/* ============================================================
   教师端样式
   ============================================================ */

/* ================= 登录页 ================= */
.login-page{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:40px 20px;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1px, transparent 0) 0 0/26px 26px,
    linear-gradient(135deg,#1b51e0 0%,#2a6cf5 48%,#3b82ff 100%);
  position:relative;
}
.login-page::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 120%, rgba(8,30,90,.28), transparent 60%);
}
.login-shell{
  position:relative; z-index:1;
  width:100%; max-width:920px;
  display:grid; grid-template-columns:1fr 420px; gap:0;
  border-radius:16px; overflow:hidden;
  box-shadow:0 30px 70px rgba(10,26,70,.32);
}
.login-brand{
  padding:46px 40px 34px; color:#fff;
  display:flex; flex-direction:column;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(2px);
}
.login-brand-top{display:flex; align-items:center; gap:12px}
.login-logo{
  width:40px; height:40px; border-radius:12px;
  background:rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
}
.login-brand h1{font-size:21px; font-weight:700; letter-spacing:.01em}
.login-brand .sub{font-size:12.5px; color:rgba(255,255,255,.72); margin-top:3px}
.login-features{margin-top:auto; padding-top:44px; display:flex; flex-direction:column; gap:22px}
.login-feature{display:flex; gap:12px; align-items:flex-start}
.login-feature .fi{
  width:28px; height:28px; border-radius:9px; flex:none;
  background:rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center;
}
.login-feature h3{font-size:13.5px; font-weight:600; margin-bottom:3px}
.login-feature p{font-size:11.5px; color:rgba(255,255,255,.62); line-height:1.55}
.login-copy{font-size:11px; color:rgba(255,255,255,.5); margin-top:36px}

.login-card{
  background:#fff; padding:38px 36px 30px;
  display:flex; flex-direction:column;
}
.login-card h2{font-size:21px; font-weight:700; letter-spacing:-.01em}
.login-card .hint{font-size:12.5px; color:var(--ink-3); margin-top:6px; margin-bottom:24px}
.login-form{display:flex; flex-direction:column; gap:16px}
.login-row{display:flex; align-items:center; justify-content:space-between; font-size:12.5px}
.checkbox{display:inline-flex; align-items:center; gap:7px; color:var(--ink-2); cursor:pointer; user-select:none}
.checkbox input{
  appearance:none; width:15px; height:15px; border:1px solid var(--line-2);
  border-radius:4px; background:#fff; position:relative; cursor:pointer; flex:none;
}
.checkbox input:checked{background:var(--brand); border-color:var(--brand)}
.checkbox input:checked::after{
  content:""; position:absolute; left:4px; top:1.5px; width:4px; height:8px;
  border:solid #fff; border-width:0 1.8px 1.8px 0; transform:rotate(43deg);
}
.link{color:var(--brand); font-size:12.5px; cursor:pointer}
.link:hover{text-decoration:underline}
.input-icon{position:relative}
.input-icon .ico{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--ink-4); pointer-events:none}
.input-icon .input{padding-left:36px}
.input-icon .eye{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  color:var(--ink-4); border-radius:6px;
}
.input-icon .eye:hover{color:var(--ink-2); background:var(--surface-2)}
.login-submit{height:44px; width:100%; margin-top:4px; font-size:14.5px; font-weight:600}
.demo-tip{
  margin-top:20px; padding:9px 12px; border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid var(--line);
  font-size:11.5px; color:var(--ink-3); text-align:center;
}
.demo-tip b{color:var(--ink-2); font-weight:600}

/* ================= 应用骨架 ================= */
.app{display:flex; min-height:100vh; background:var(--bg)}

.sidebar{
  width:var(--sidebar-w); flex:none;
  background:#fff; border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.brand-bar{
  height:var(--topbar-h); flex:none;
  display:flex; align-items:center; gap:9px; padding:0 16px;
}
.brand-logo{
  width:27px; height:27px; border-radius:8px; flex:none;
  background:linear-gradient(140deg,#3d7bff,#1f4fd6);
  display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow:0 3px 8px rgba(47,107,255,.3);
}
.brand-text{display:flex; flex-direction:column; line-height:1.15; min-width:0}
.brand-text b{font-size:13.5px; font-weight:700; letter-spacing:.01em}
.brand-text span{font-size:9.5px; color:var(--ink-4); letter-spacing:.06em}

.nav{flex:1; padding:6px 10px; display:flex; flex-direction:column; gap:2px; overflow-y:auto}
.nav-item{
  display:flex; align-items:center; gap:10px;
  height:38px; padding:0 11px; border-radius:9px;
  font-size:13px; color:var(--ink-2); cursor:pointer;
  transition:background .15s, color .15s;
}
.nav-item svg{color:var(--ink-3); transition:color .15s}
.nav-item:hover{background:#f5f7fc; color:var(--ink)}
.nav-item.active{background:var(--brand); color:#fff; box-shadow:var(--shadow-brand)}
.nav-item.active svg{color:#fff}

.sidebar-foot{
  border-top:1px solid var(--line); padding:12px 14px;
  display:flex; align-items:center; gap:9px;
}
.avatar{
  width:32px; height:32px; border-radius:50%; flex:none;
  background:linear-gradient(140deg,#cfd9ef,#a9bce0);
  color:#fff; font-size:13px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
.sidebar-foot .who{min-width:0; flex:1}
.sidebar-foot .who b{display:block; font-size:12.5px; font-weight:600}
.sidebar-foot .who span{display:block; font-size:10.5px; color:var(--ink-3)}
.icon-btn{
  width:28px; height:28px; border-radius:7px; flex:none;
  display:flex; align-items:center; justify-content:center; color:var(--ink-3);
}
.icon-btn:hover{background:var(--surface-2); color:var(--ink-2)}

.main{flex:1; min-width:0; display:flex; flex-direction:column}

.topbar{
  height:var(--topbar-h); flex:none;
  background:#fff; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:14px; padding:0 24px;
  position:sticky; top:0; z-index:30;
}
.page-name{font-size:15px; font-weight:600}
.topbar-right{margin-left:auto; display:flex; align-items:center; gap:14px}
.date-chip{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-3)}
.bell{position:relative; color:var(--ink-3)}
.bell::after{
  content:""; position:absolute; top:3px; right:3px;
  width:6px; height:6px; border-radius:50%; background:#ff5c5c;
  box-shadow:0 0 0 2px #fff;
}

.content{padding:22px 26px 44px; flex:1}
.page-head{display:flex; align-items:flex-start; gap:14px; margin-bottom:18px}
.page-head h2{font-size:19px; font-weight:700; letter-spacing:-.01em}
.page-head .sub{font-size:12.5px; color:var(--ink-3); margin-top:4px}
.page-head .actions{margin-left:auto; display:flex; gap:10px; align-items:center}

/* ================= 工作台 ================= */
.banner{
  border-radius:var(--r-lg); padding:26px 28px;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.13) 1px, transparent 0) 0 0/22px 22px,
    linear-gradient(115deg,#2a63f0,#3f83ff 60%,#4b8dff);
  color:#fff; display:flex; align-items:center; gap:20px;
  box-shadow:0 10px 26px rgba(47,107,255,.22);
  position:relative; overflow:hidden;
}
.banner h2{font-size:24px; font-weight:700; letter-spacing:-.01em}
.banner p{font-size:12.5px; color:rgba(255,255,255,.78); margin-top:6px}
.banner .banner-actions{display:flex; gap:10px; margin-top:18px}
.banner .b1{
  height:34px; padding:0 14px; border-radius:8px; background:#fff; color:var(--brand);
  font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:6px;
  box-shadow:0 3px 10px rgba(10,30,90,.16);
}
.banner .b2{
  height:34px; padding:0 14px; border-radius:8px;
  background:rgba(255,255,255,.18); color:#fff; font-size:13px; font-weight:500;
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid rgba(255,255,255,.28);
}
.banner .b1:hover{background:#f4f7ff}
.banner .b2:hover{background:rgba(255,255,255,.26)}
.banner .sun{
  margin-left:auto; width:74px; height:74px; flex:none; color:rgba(255,255,255,.92);
  opacity:.95;
}

.kpi-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  margin:16px 0 22px;
}
.kpi{
  background:#fff; border-radius:var(--r-lg); border:1px solid var(--line);
  padding:18px 20px; display:flex; align-items:center; gap:12px;
  box-shadow:var(--shadow-1);
}
.kpi .num{font-size:27px; font-weight:700; letter-spacing:-.02em; line-height:1.1}
.kpi .lbl{font-size:12px; color:var(--ink-3); margin-top:4px}
.kpi .kicon{
  margin-left:auto; width:42px; height:42px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; flex:none;
}
.k-blue{background:#eef3ff; color:#3b74ff}
.k-orange{background:#fdf3e4; color:#f0a020}
.k-green{background:#e9f8ef; color:#22b573}
.k-purple{background:#f3edff; color:#8b5cf6}

.section-card{background:#fff; border-radius:var(--r-lg); border:1px solid var(--line); box-shadow:var(--shadow-1)}
.section-head{align-items:center}
.section-head .more{margin-left:auto; font-size:12.5px; color:var(--brand); display:flex; align-items:center; gap:4px; cursor:pointer}

.hw-row{
  display:grid; grid-template-columns:1fr 96px 150px 16px;
  align-items:center; gap:16px;
  padding:15px 22px; border-top:1px solid var(--line); cursor:pointer;
  transition:background .15s;
}
.hw-row:first-of-type{border-top:0}
.hw-row:hover{background:#fafbfe}
.hw-row .hleft{display:flex; align-items:center; gap:12px; min-width:0}
.hw-ico{
  width:30px; height:30px; border-radius:8px; background:var(--brand-soft);
  color:var(--brand); display:flex; align-items:center; justify-content:center; flex:none;
}
.hw-row .t{font-size:13.5px; font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hw-row .m{font-size:11.5px; color:var(--ink-3); margin-top:3px}
.hw-row .chev{color:var(--ink-4)}
.progress-wrap{display:flex; align-items:center; gap:9px; justify-content:flex-end}
.progress{height:6px; border-radius:4px; background:#eef1f6; flex:1; overflow:hidden; max-width:86px}
.progress i{display:block; height:100%; border-radius:4px; background:var(--brand); transition:width .6s ease}
.progress i.green{background:#22b573}
.progress-label{font-size:11.5px; color:var(--ink-3); display:flex; gap:5px; align-items:center; white-space:nowrap}

/* ================= 班级管理 ================= */
.class-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.class-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px 20px; box-shadow:var(--shadow-1); cursor:pointer;
  transition:border-color .16s, box-shadow .16s, transform .16s;
}
.class-card:hover{border-color:#cfdcff; box-shadow:0 10px 24px rgba(47,107,255,.1); transform:translateY(-1px)}
.class-card .top{display:flex; align-items:flex-start}
.class-ico{
  width:36px; height:36px; border-radius:10px; background:var(--brand-soft);
  color:var(--brand); display:flex; align-items:center; justify-content:center;
}
.class-card .grade{margin-left:auto; font-size:11.5px; color:var(--ink-3)}
.class-card h3{font-size:16px; font-weight:700; margin:14px 0 12px}
.class-stats{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.class-stat{background:var(--surface-2); border-radius:9px; padding:10px 12px}
.class-stat b{font-size:19px; font-weight:700; color:var(--brand); display:block; line-height:1.2}
.class-stat.g b{color:#22b573}
.class-stat span{font-size:11px; color:var(--ink-3)}
.class-card .enter{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--brand); font-weight:500;
}

/* ================= 创建作业向导 ================= */
.stepbar{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:16px 24px; display:flex; align-items:center; gap:8px;
  box-shadow:var(--shadow-1); margin-bottom:16px;
}
.step{display:flex; align-items:center; gap:9px; flex:1; min-width:0}
.step .cir{
  width:24px; height:24px; border-radius:50%; flex:none;
  border:1.5px solid var(--line-2); color:var(--ink-4);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; background:#fff;
}
.step .lbl{font-size:12.5px; color:var(--ink-3); white-space:nowrap}
.step .bar{height:1px; background:var(--line-2); flex:1; margin:0 6px; min-width:20px}
.step.active .cir{background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 0 0 3px rgba(47,107,255,.14)}
.step.active .lbl{color:var(--brand); font-weight:600}
.step.done .cir{background:var(--brand-soft); border-color:var(--brand-line); color:var(--brand)}
.step.done .lbl{color:var(--ink-2)}
.step:last-child .bar{display:none}

.panel{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-1); overflow:hidden}
.panel-head{
  display:flex; align-items:center; gap:12px; padding:17px 22px;
  border-bottom:1px solid var(--line);
}
.panel-head h3{font-size:14.5px; font-weight:600}
.panel-head .right{margin-left:auto; display:flex; gap:8px; align-items:center}
.panel-body{padding:20px 22px}
.panel-foot{
  display:flex; align-items:center; gap:10px;
  padding:14px 22px; border-top:1px solid var(--line); background:var(--surface-2);
}
.panel-foot .right{margin-left:auto; display:flex; gap:10px}

.segmented{display:inline-flex; background:#f1f3f8; border-radius:8px; padding:3px; gap:2px}
.segmented button{
  height:28px; padding:0 12px; border-radius:6px; font-size:12.5px; color:var(--ink-2);
  transition:background .15s, color .15s, box-shadow .15s;
}
.segmented button.on{background:#fff; color:var(--brand); font-weight:600; box-shadow:0 1px 3px rgba(20,30,60,.1)}

.unit-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.unit-card{
  position:relative; text-align:left;
  border:1px solid var(--line-2); border-radius:11px; padding:14px 16px;
  background:#fff; cursor:pointer; transition:border-color .15s, box-shadow .15s, background .15s;
}
.unit-card:hover{border-color:#c7d8ff; background:#fcfdff}
.unit-card.on{border-color:var(--brand); box-shadow:0 0 0 3px rgba(47,107,255,.12); background:#fbfcff}
.unit-card .chip{
  display:inline-block; padding:2px 6px; border-radius:5px;
  background:var(--brand-soft); color:var(--brand);
  font-size:10.5px; font-weight:600; letter-spacing:.02em;
}
.unit-card h4{font-size:14px; font-weight:600; margin:9px 0 4px}
.unit-card p{font-size:11.5px; color:var(--ink-3)}
.unit-card .radio{
  position:absolute; top:15px; right:15px;
  width:16px; height:16px; border-radius:50%; border:1.5px solid var(--line-2); background:#fff;
}
.unit-card.on .radio{border-color:var(--brand); border-width:5px}

.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px 18px}
.form-grid .full{grid-column:1/-1}
.chip-row{display:flex; flex-wrap:wrap; gap:8px}
.chip-select{
  height:32px; padding:0 12px; border-radius:8px; border:1px solid var(--line-2);
  background:#fff; font-size:12.5px; color:var(--ink-2);
  display:inline-flex; align-items:center; gap:6px; transition:all .15s;
}
.chip-select:hover{border-color:#c7d8ff}
.chip-select.on{background:var(--brand-soft); border-color:var(--brand); color:var(--brand); font-weight:600}
.tier-row{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.tier-box{border:1px solid var(--line-2); border-radius:10px; padding:12px 14px; text-align:center}
.tier-box b{font-size:20px; font-weight:700; display:block}
.tier-box span{font-size:11.5px; color:var(--ink-3)}
.tier-box .numline{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:8px}
.tier-box button{
  width:24px; height:24px; border-radius:6px; border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center; color:var(--ink-2); background:#fff;
}
.tier-box button:hover{border-color:var(--brand); color:var(--brand)}

.preview-list{display:flex; flex-direction:column; gap:12px}
.preview-item{border:1px solid var(--line); border-radius:11px; padding:14px 16px; background:#fff}
.preview-item .qhead{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.qno{
  width:22px; height:22px; border-radius:6px; background:var(--brand-soft); color:var(--brand);
  font-size:11.5px; font-weight:600; display:flex; align-items:center; justify-content:center; flex:none;
}
.preview-item .stem{font-size:13.5px; line-height:1.65; color:var(--ink)}
.preview-item .opts{display:grid; grid-template-columns:1fr 1fr; gap:6px 18px; margin-top:10px}
.preview-item .opt{font-size:12.5px; color:var(--ink-2); display:flex; gap:7px}
.preview-item .opt b{color:var(--ink-3); font-weight:500}
.preview-item .ans{
  margin-top:10px; padding:8px 11px; border-radius:8px;
  background:var(--surface-2); font-size:12px; color:var(--ink-2); line-height:1.6;
}
.preview-item .ans b{color:var(--green)}
.preview-item .qops{margin-left:auto; display:flex; gap:6px}
.mini-btn{
  height:26px; padding:0 9px; border-radius:6px; border:1px solid var(--line-2);
  font-size:11.5px; color:var(--ink-2); background:#fff;
}
.mini-btn:hover{border-color:var(--brand); color:var(--brand)}

/* ================= 作业列表 ================= */
.filter-bar{display:flex; gap:10px; padding:14px 20px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.filter-select{
  height:32px; padding:0 30px 0 11px; border-radius:7px; font-size:12.5px; color:var(--ink-2);
  background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%238b93a5' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  border:1px solid var(--line-2); appearance:none; cursor:pointer;
}
.table-wrap{overflow-x:auto}
table.tb{width:100%; border-collapse:collapse; font-size:13px; min-width:820px}
.tb thead th{
  text-align:left; padding:11px 18px; font-size:11.5px; font-weight:500;
  color:var(--ink-3); background:var(--surface-2); border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.tb tbody td{padding:14px 18px; border-bottom:1px solid var(--line); color:var(--ink-2); vertical-align:middle}
.tb tbody tr:last-child td{border-bottom:0}
.tb tbody tr.clickable{cursor:pointer; transition:background .14s}
.tb tbody tr.clickable:hover{background:#fafbfe}
.tb .strong{color:var(--ink); font-weight:500}
.tb .num{font-variant-numeric:tabular-nums; font-weight:600}
.tb td.score-hi, .tb .score-hi{color:var(--green)}
.tb td.score-mid, .tb .score-mid{color:var(--amber)}
.tb td.score-low, .tb .score-low{color:var(--red)}
.tb .chev{color:var(--ink-4); text-align:right; width:40px}

/* ================= 学情分析 ================= */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.grid-2.wide-left{grid-template-columns:0.85fr 1.15fr}
.ana-grid{display:grid; gap:16px}

.donut-wrap{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:22px 20px 24px}
.donut{position:relative; width:168px; height:168px}
.donut svg{transform:rotate(-90deg)}
.donut .center{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px;
}
.donut .center b{font-size:26px; font-weight:700; letter-spacing:-.02em; color:var(--brand)}
.donut .center span{font-size:11px; color:var(--ink-3)}
.donut .legend{font-size:11.5px; color:var(--ink-3); margin-top:14px}

.chart-bars{display:flex; align-items:flex-end; gap:18px; height:172px; padding:10px 8px 0; justify-content:space-around}
.chart-bar{display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; height:100%; justify-content:flex-end}
.chart-bar .v{font-size:11.5px; font-weight:600; color:var(--ink-2)}
.chart-bar .col{width:26px; border-radius:6px 6px 2px 2px; background:linear-gradient(180deg,#6f9dff,#3b74ff); transition:height .7s cubic-bezier(.22,.8,.3,1)}
.chart-bar .lab{font-size:11px; color:var(--ink-3); white-space:nowrap}

.tier-bars{display:flex; flex-direction:column; gap:16px; padding:6px 0 4px}
.tier-line{display:grid; grid-template-columns:64px 1fr 34px; align-items:center; gap:12px}
.tier-line .lab{font-size:12.5px; color:var(--ink-2)}
.tier-line .track{height:10px; border-radius:6px; background:#eff2f7; overflow:hidden}
.tier-line .track i{display:block; height:100%; border-radius:6px; transition:width .8s cubic-bezier(.22,.8,.3,1)}
.tier-line .val{font-size:13px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums}
.t-blue{background:linear-gradient(90deg,#7ba6ff,#3b74ff)}
.t-green{background:linear-gradient(90deg,#7fd8a8,#22b573)}
.t-orange{background:linear-gradient(90deg,#ffc166,#f59315)}

.mistake{display:flex; gap:12px; padding:11px 0; border-top:1px dashed var(--line-2)}
.mistake:first-child{border-top:0; padding-top:2px}
.rank{
  width:19px; height:19px; border-radius:5px; flex:none;
  background:#f4f6fa; color:var(--ink-3); font-size:11px; font-weight:600;
  display:flex; align-items:center; justify-content:center; margin-top:2px;
}
.rank.top1{background:#fdeceb; color:#e5484d}
.rank.top2{background:#fdf3e4; color:#f0a020}
.mistake .body{flex:1; min-width:0}
.mistake .q{font-size:12.5px; color:var(--ink); line-height:1.55; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mistake .kp{font-size:11px; color:var(--ink-3); margin-top:3px}
.mistake .stat{text-align:right; flex:none}
.mistake .wrong{font-size:12px; color:var(--red); font-weight:600}
.mistake .rate{font-size:10.5px; color:var(--ink-3); margin-top:2px}

.heat{display:grid; grid-template-columns:repeat(6,1fr); gap:14px 10px; padding-top:6px}
.heat-item{text-align:center}
.heat-dot{
  width:10px; height:10px; border-radius:50%; margin:0 auto 7px;
  position:relative;
}
.heat-dot::after{content:""; position:absolute; inset:-4px; border-radius:50%; opacity:.16; background:currentColor}
.heat-item .n{font-size:11px; color:var(--ink-2); line-height:1.35; min-height:30px}
.heat-item .p{font-size:11px; font-weight:600; margin-top:3px; font-variant-numeric:tabular-nums}
.p-g{color:#22b573}
.p-y{color:#e0a020}
.p-r{color:#e5484d}
.heat-legend{display:flex; gap:16px; font-size:11px; color:var(--ink-3); margin-bottom:4px; flex-wrap:wrap}
.heat-legend span{display:inline-flex; align-items:center; gap:5px}

.attn{display:flex; gap:10px; align-items:center; padding:11px 0; border-top:1px dashed var(--line-2)}
.attn:first-child{border-top:0; padding-top:2px}
.attn .nm{font-size:12.5px; font-weight:500; width:52px}
.attn .sc{margin-left:auto; font-size:12.5px; font-weight:700; color:var(--red)}

.advice{display:flex; gap:10px; padding:12px 14px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line); font-size:12px; color:var(--ink-2); line-height:1.65}
.advice + .advice{margin-top:10px}
.advice .ai{flex:none; width:22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--line-2)}

/* ================= 作业详情 ================= */
.crumb{font-size:12px; color:var(--ink-3); display:flex; align-items:center; gap:6px; margin-bottom:6px}
.crumb .sep{color:var(--ink-4)}
.detail-head{display:flex; align-items:center; gap:12px; margin-bottom:16px}
.detail-head h2{font-size:19px; font-weight:700; letter-spacing:-.01em}
.detail-head .tag{margin-left:auto}

.info-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  padding:18px 22px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-1); margin-bottom:14px;
}
.info-grid .k{font-size:11.5px; color:var(--ink-3); margin-bottom:7px}
.info-grid .v{font-size:13.5px; font-weight:600; color:var(--ink)}
.info-grid .v small{font-size:11px; color:var(--ink-3); font-weight:400; margin-left:5px}

.tier-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:14px}
.tier-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:16px 18px; box-shadow:var(--shadow-1);
  display:flex; align-items:center; gap:12px;
}
.tier-card .tag{height:20px; font-size:11px}
.tier-card .frac{margin-left:auto; display:flex; align-items:baseline; gap:2px; font-variant-numeric:tabular-nums}
.tier-card .frac b{font-size:22px; font-weight:700; letter-spacing:-.02em}
.tier-card .frac span{font-size:12px; color:var(--ink-3)}
.tier-card .below{font-size:10.5px; color:var(--ink-3); margin-top:8px; width:100%}

.detail-foot{text-align:center; font-size:11.5px; color:var(--ink-3); padding:14px 0 2px}

/* ================= 学生管理 ================= */
.member-name{display:flex; align-items:center; gap:9px}
.mini-avatar{
  width:26px; height:26px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:600; color:#fff;
  background:linear-gradient(140deg,#a9c0ee,#7e9bd6);
}

/* ================= 响应式 ================= */
@media (max-width:1180px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .class-grid{grid-template-columns:repeat(2,1fr)}
  .heat{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:980px){
  .login-shell{grid-template-columns:1fr; max-width:440px}
  .login-brand{display:none}
  .grid-2,.grid-2.wide-left{grid-template-columns:1fr}
  .unit-grid{grid-template-columns:repeat(2,1fr)}
  .tier-cards{grid-template-columns:1fr; gap:10px}
  .info-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .app{flex-direction:column}
  .sidebar{
    width:100%; height:auto; position:sticky; top:0; z-index:40;
    flex-direction:row; align-items:center; border-right:0; border-bottom:1px solid var(--line);
    overflow-x:auto; padding-right:8px;
  }
  .brand-bar{height:56px; flex:none; padding:0 14px 0 16px}
  .nav{flex-direction:row; padding:0 4px; gap:2px; overflow-x:auto; flex:1}
  .nav-item{height:52px; border-radius:0; padding:0 12px; font-size:12.5px; white-space:nowrap}
  .nav-item.active{box-shadow:none; background:transparent; color:var(--brand); box-shadow:inset 0 -2px 0 var(--brand)}
  .nav-item.active svg{color:var(--brand)}
  .sidebar-foot{display:none}
  .topbar{padding:0 16px; position:static}
  .date-chip{display:none}
  .content{padding:16px 14px 40px}
  .banner{padding:20px; flex-direction:column; align-items:flex-start}
  .banner .sun{display:none}
  .banner h2{font-size:20px}
  .hw-row{grid-template-columns:1fr auto; gap:8px 10px; padding:14px 16px}
  .hw-row .chev{display:none}
  .hw-row > div:nth-child(2){align-self:start}
  .hw-row .progress-wrap{grid-column:1 / -1; justify-content:flex-start; padding-left:42px; margin-top:2px}
  .hw-row .progress{max-width:none}
  .class-grid{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:repeat(2,1fr); gap:10px}
  .kpi{padding:14px}
  .kpi .num{font-size:22px}
  .kpi .kicon{display:none}
  .form-grid{grid-template-columns:1fr}
  .unit-grid{grid-template-columns:1fr}
  .heat{grid-template-columns:repeat(3,1fr)}
  .page-head{flex-direction:column; gap:10px}
  .page-head .actions{margin-left:0}
  .stepbar{padding:12px; overflow-x:auto}
  .step .lbl{display:none}
  .step.active .lbl{display:block}
  .preview-item .opts{grid-template-columns:1fr}
  .detail-head{flex-wrap:wrap}
  .detail-head .tag{margin-left:0}
}