/* ============ 智跑教练组 · 高中长跑智能教学系统 ============ */
* { margin:0; padding:0; box-sizing:border-box; }
[hidden]{ display:none !important; }
:root{
  --bg:#0b1220; --panel:#111a2e; --panel2:#0d1526; --line:#1e2a44;
  --txt:#e2e8f0; --dim:#8ea0bd; --accent:#22d3ee;
  --green:#34d399; --lime:#a3e635; --yellow:#fbbf24; --orange:#fb923c; --red:#f87171; --purple:#a78bfa;
  --analyst:#38bdf8; --guardian:#f87171; --coach:#34d399; --supervisor:#a78bfa; --system:#94a3b8;
}
html,body{ height:100%; }
body{
  background:var(--bg); color:var(--txt);
  font-family:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  font-size:14px; display:flex; flex-direction:column; min-height:100vh;
}
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-weight:600; }

/* ---------- 顶栏 ---------- */
#topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px 18px; background:linear-gradient(180deg,#101a30,#0d1526);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:12px; }
.logo{ font-size:34px; filter:drop-shadow(0 0 8px rgba(34,211,238,.5)); }
.brand h1{ font-size:20px; letter-spacing:1px; }
.brand .sub{ font-size:12px; color:var(--accent); font-weight:400; margin-left:8px; }
.brand .meta{ font-size:12px; color:var(--dim); margin-top:2px; }
.actions{ display:flex; align-items:center; gap:10px; }
.src-badge{
  font-size:12px; color:#9fd6e8; background:rgba(34,211,238,.1);
  border:1px solid rgba(34,211,238,.35); padding:4px 10px; border-radius:20px;
}
.hud{ display:flex; gap:14px; align-items:center; }
.hud-item{ display:flex; flex-direction:column; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:4px 14px; }
.hud-item label{ font-size:10px; color:var(--dim); }
.hud-item b{ font-size:17px; font-variant-numeric:tabular-nums; }
.hud-item.speed{ flex-direction:row; gap:8px; padding:6px 12px; }
.hud-item.speed label{ font-size:12px; }
.speed-btns{ display:flex; gap:4px; }
.speed-btns button{
  width:34px; height:24px; background:var(--panel2); color:var(--dim);
  border:1px solid var(--line); border-radius:5px; font-size:12px;
}
.speed-btns button.on{ background:var(--accent); color:#06222b; border-color:var(--accent); font-weight:700; }

/* ---------- Tabs ---------- */
#tabs{ display:flex; gap:6px; padding:10px 18px 0; background:var(--panel2); border-bottom:1px solid var(--line); }
.tab{
  background:transparent; border:1px solid transparent; border-bottom:none; color:var(--dim);
  padding:9px 18px; font-size:14px; border-radius:10px 10px 0 0;
}
.tab:hover{ color:var(--txt); }
.tab.on{ background:var(--bg); color:var(--accent); border-color:var(--line); font-weight:700; }

/* ---------- 布局 ---------- */
#layout{ display:flex; flex:1; min-height:0; }
main{ flex:1; overflow-y:auto; padding:18px 20px 60px; min-width:0; }
.tabpane{ display:none; }
.tabpane.on{ display:block; animation:fadein .25s; }
@keyframes fadein{ from{opacity:0; transform:translateY(4px);} to{opacity:1;} }

.pane-head{ margin-bottom:14px; }
.pane-head h2{ font-size:19px; margin-bottom:4px; }
.pane-head .desc{ color:var(--dim); font-size:13px; line-height:1.6; }
.r-analyst{ color:var(--analyst);} .r-guardian{ color:var(--guardian);}
.r-coach{ color:var(--coach);} .r-supervisor{ color:var(--supervisor);}

.card{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; margin-bottom:14px;
}
.card h3{ font-size:14.5px; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.card h4{ font-size:12.5px; color:var(--dim); margin:10px 0 6px; font-weight:500; }
.hint{ font-size:11.5px; color:var(--dim); font-weight:400; }

/* ---------- 按钮 ---------- */
button.primary{
  background:linear-gradient(135deg,#22d3ee,#3b82f6); color:#04222b; font-weight:700;
  border:none; border-radius:8px; padding:9px 20px; font-size:14px;
  box-shadow:0 2px 12px rgba(34,211,238,.35);
}
button.primary:hover{ filter:brightness(1.1); }
button.primary:disabled{ filter:grayscale(.6) brightness(.7); cursor:not-allowed; box-shadow:none; }
button.ghost{
  background:transparent; color:var(--dim); border:1px solid var(--line);
  border-radius:8px; padding:8px 14px; font-size:13px;
}
button.ghost:hover{ color:var(--txt); border-color:#33456b; }
button.ghost.mini{ padding:3px 10px; font-size:12px; border-radius:6px; }
#btnBell.on{ color:var(--yellow); border-color:rgba(251,191,36,.4); }

/* ---------- 课前 ---------- */
.pre-grid{ display:grid; grid-template-columns:1.25fr 1.5fr .9fr; gap:14px; align-items:start; }
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.chip{ padding:5px 12px; border-radius:18px; font-size:12.5px; border:1px solid; }
.chip.A{ color:var(--orange); border-color:rgba(251,146,60,.4); background:rgba(251,146,60,.08);}
.chip.B{ color:var(--lime); border-color:rgba(163,230,53,.4); background:rgba(163,230,53,.08);}
.chip.C{ color:var(--analyst); border-color:rgba(56,189,248,.4); background:rgba(56,189,248,.08);}
.chip.X{ color:var(--dim); border-color:var(--line); background:var(--panel2);}
.ov-cols{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.watch{ list-style:none; }
.watch li{
  padding:7px 10px; border-left:3px solid var(--red); background:rgba(248,113,113,.06);
  border-radius:0 8px 8px 0; margin-bottom:6px; font-size:12.5px; line-height:1.5;
}
.watch li b{ color:var(--red); }
.kb{ list-style:none; }
.kb li{ font-size:12.5px; color:var(--dim); line-height:1.55; padding:8px 10px; border:1px dashed var(--line); border-radius:8px; margin-bottom:7px; }
.kb li b{ color:var(--txt); display:block; margin-bottom:2px; font-weight:500;}
.kb li em{ font-style:normal; color:#5b7194; font-size:11.5px; }

#planEmpty{ text-align:center; padding:50px 0; color:var(--dim); }
.empty-art{ font-size:44px; margin-bottom:10px; }

.plan-title{ font-size:16px; color:var(--accent); margin-bottom:2px; }
.plan-meta{ font-size:12px; color:var(--dim); margin-bottom:10px; }
.plan-goals{ margin:8px 0 12px; padding-left:18px; line-height:1.8; font-size:13px; }
table.platable{ width:100%; border-collapse:collapse; font-size:12.5px; margin:6px 0 10px; }
table.platable th, table.platable td{ border:1px solid var(--line); padding:7px 8px; text-align:left; }
table.platable th{ background:var(--panel2); color:var(--dim); font-weight:500; white-space:nowrap; }
table.platable td b{ display:block; }
table.platable td span{ font-size:11.5px; color:var(--dim); }
.plan-safe li{ list-style:none; padding:6px 10px; background:rgba(248,113,113,.06); border-radius:8px; margin-bottom:5px; font-size:12.5px; }
.plan-refs{ font-size:11.5px; color:#5b7194; line-height:1.6; }

/* ---------- 课中 ---------- */
.live-strip{ display:flex; gap:12px; align-items:stretch; flex-wrap:wrap; }
.ls-item{ flex:1; min-width:96px; background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:7px 10px; text-align:center; }
.ls-item label{ font-size:11px; color:var(--dim); display:block; }
.ls-item b{ font-size:18px; font-variant-numeric:tabular-nums; }
.ls-ctrl{ display:flex; flex-direction:column; gap:8px; justify-content:center; min-width:150px; }
.demo-hint{ font-size:12px; color:#7d92b5; background:rgba(34,211,238,.05); border:1px dashed rgba(34,211,238,.25); border-radius:8px; padding:8px 12px; margin-bottom:14px; line-height:1.7; }

.live-grid{ display:grid; grid-template-columns:1.5fr 1fr 1.05fr; gap:14px; }
.track-card canvas{ width:100%; height:330px; display:block; }
.legend{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; font-size:11.5px; color:var(--dim); }
.legend i{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:4px; }
.h130{ width:100%; height:130px; display:block; }
.h120{ width:100%; height:120px; display:block; }
.h160{ width:100%; height:160px; display:block; }

.alerts-card{ max-height:470px; overflow-y:auto; }
.empty-mini{ color:var(--dim); font-size:12.5px; padding:14px 4px; text-align:center; }
.alert-row{
  border-radius:9px; padding:9px 11px; margin-bottom:8px; font-size:12.5px; line-height:1.55;
  border:1px solid; animation:slidein .25s;
}
@keyframes slidein{ from{opacity:0; transform:translateX(8px);} to{opacity:1;} }
.alert-row.warn{ border-color:rgba(251,191,36,.45); background:rgba(251,191,36,.07); }
.alert-row.danger{ border-color:rgba(248,113,113,.6); background:rgba(248,113,113,.1); }
.alert-row .a-head{ display:flex; align-items:center; gap:6px; font-weight:700; margin-bottom:3px; }
.alert-row.warn .a-head{ color:var(--yellow); }
.alert-row.danger .a-head{ color:var(--red); }
.alert-row .a-time{ font-weight:400; color:var(--dim); font-size:11px; margin-left:auto; }
.alert-row .a-body{ color:var(--txt); }
.alert-row .a-btns{ margin-top:6px; display:flex; gap:6px; }
.a-btn{ font-size:11.5px; padding:3px 10px; border-radius:6px; border:1px solid var(--line); background:var(--panel2); color:var(--txt); }
.a-btn.main{ background:var(--red); border-color:var(--red); color:#2b0606; font-weight:700; }
.alert-row.done{ opacity:.55; }
.a-tag{ font-size:11px; padding:1px 8px; border-radius:10px; }
.a-tag.ok{ background:rgba(52,211,153,.15); color:var(--green); }
.a-tag.done{ background:rgba(148,163,184,.15); color:var(--dim); }

/* 学生网格 */
#studentGrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:9px; }
.scard{
  background:var(--panel2); border:1px solid var(--line); border-radius:10px;
  padding:8px 10px; cursor:pointer; transition:transform .12s, border-color .12s; position:relative; overflow:hidden;
}
.scard:hover{ transform:translateY(-2px); border-color:#33456b; }
.scard .s-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.scard .s-name{ font-size:13px; font-weight:600; }
.s-tier{ font-size:10px; padding:1px 7px; border-radius:9px; border:1px solid; }
.s-tier.A{ color:var(--orange); border-color:rgba(251,146,60,.5);}
.s-tier.B{ color:var(--lime); border-color:rgba(163,230,53,.5);}
.s-tier.C{ color:var(--analyst); border-color:rgba(56,189,248,.5);}
.s-tier.X{ color:var(--dim); border-color:var(--line);}
.s-hrrow{ display:flex; align-items:baseline; gap:6px; }
.s-hr{ font-size:23px; font-weight:700; font-variant-numeric:tabular-nums; }
.s-hrrow span{ font-size:10px; color:var(--dim); }
.s-zone{ font-size:10.5px; font-weight:700; padding:1px 8px; border-radius:9px; margin-left:auto; }
.s-meta{ display:flex; justify-content:space-between; font-size:11px; color:var(--dim); margin-top:3px; font-variant-numeric:tabular-nums; }
.s-bar{ height:3px; background:#182138; border-radius:2px; margin-top:5px; overflow:hidden; }
.s-bar i{ display:block; height:100%; border-radius:2px; transition:width .3s linear; }
.scard.danger{ border-color:var(--red); animation:pulse 1s infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(248,113,113,.45);} 50%{ box-shadow:0 0 0 5px rgba(248,113,113,0);} }
.scard.warn{ border-color:rgba(251,191,36,.7); }
.scard.excused{ opacity:.45; cursor:default; }
.scard.excused:hover{ transform:none; border-color:var(--line); }
.scard.sel{ outline:2px solid var(--accent); }

/* ---------- 课后 ---------- */
.empty{ text-align:center; color:var(--dim); padding:60px 0; }
.rep-head{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.rep-head h3{ margin-bottom:0; font-size:16px; color:var(--accent); }
.rep-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin:12px 0; }
.kpi{ background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:10px 12px; text-align:center; }
.kpi b{ font-size:21px; display:block; font-variant-numeric:tabular-nums; }
.kpi span{ font-size:11px; color:var(--dim); }
.rep-sec{ margin-top:12px; }
.rep-sec h4{ margin-bottom:6px; }
.post-charts{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.tbl-wrap{ overflow-x:auto; }
table.data{ width:100%; border-collapse:collapse; font-size:12.5px; }
table.data th, table.data td{ padding:7px 9px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
table.data th{ color:var(--dim); font-weight:500; background:var(--panel2); position:sticky; top:0; }
table.data tbody tr{ cursor:pointer; }
table.data tbody tr:hover{ background:rgba(34,211,238,.06); }
.pill{ font-size:11px; padding:1px 8px; border-radius:9px; }
.pill.good{ background:rgba(52,211,153,.14); color:var(--green); }
.pill.mid{ background:rgba(251,191,36,.14); color:var(--yellow); }
.pill.bad{ background:rgba(248,113,113,.14); color:var(--red); }
.rx{ font-size:12px; max-width:320px; white-space:normal; color:var(--dim); }

/* ---------- 架构页 ---------- */
.about-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:14px; }
.arch{ text-align:center; }
.arch-row{ display:flex; gap:10px; justify-content:center; align-items:stretch; flex-wrap:wrap; }
.arch-box{
  background:var(--panel2); border:1px solid var(--line); border-radius:10px;
  padding:9px 11px; text-align:left; flex:1; min-width:150px; font-size:12px;
}
.arch-box b{ display:block; margin-bottom:3px; font-size:12.5px; }
.arch-box span{ display:block; font-size:11.5px; color:var(--dim); line-height:1.45; }
.arch-box em{ display:block; font-style:normal; font-size:11px; color:#5b7194; margin-top:4px; }
.arch-box.data b{ color:var(--analyst);} .arch-box.bus b{ color:var(--accent);}
.arch-box.app b{ color:var(--purple);}
.a-analyst{ border-color:rgba(56,189,248,.4)!important; } .a-analyst b{ color:var(--analyst);}
.a-guardian{ border-color:rgba(248,113,113,.4)!important; } .a-guardian b{ color:var(--guardian);}
.a-coach{ border-color:rgba(52,211,153,.4)!important; } .a-coach b{ color:var(--coach);}
.a-supervisor{ border-color:rgba(167,139,250,.4)!important; } .a-supervisor b{ color:var(--supervisor);}
.arch-arrow{ color:#3b5079; font-size:20px; margin:4px 0; }
.arch-arrow.down{ display:block; }
.roadmap{ padding-left:18px; line-height:1.9; font-size:13px; }
.compliance{ list-style:none; font-size:12.5px; line-height:1.7; color:var(--dim); }
.compliance li{ padding-left:14px; position:relative; }
.compliance li::before{ content:"✓"; position:absolute; left:0; color:var(--green); }
.tech{ list-style:none; font-size:12.5px; color:var(--dim); line-height:1.8; }

/* ---------- 智能体面板 ---------- */
#agentPanel{
  width:330px; flex-shrink:0; border-left:1px solid var(--line); background:var(--panel2);
  display:flex; flex-direction:column; min-height:0;
}
#agentPanel h2{ font-size:13.5px; padding:12px 14px 8px; }
.filters{ display:flex; gap:5px; padding:0 14px 8px; flex-wrap:wrap; }
.filters button{
  font-size:10.5px; padding:2px 8px; border-radius:10px; border:1px solid var(--line);
  background:transparent; color:var(--dim);
}
.filters button.on{ color:#04222b; font-weight:700; }
#agentLog{ flex:1; overflow-y:auto; padding:0 12px 16px; }
.logline{
  border-left:3px solid var(--system); background:rgba(255,255,255,.025);
  border-radius:0 8px 8px 0; padding:6px 9px; margin-bottom:6px; font-size:12px; line-height:1.55;
  animation:slidein .25s;
}
.logline .l-role{ font-weight:700; margin-right:6px; }
.logline .l-time{ color:#54688c; font-size:10.5px; margin-left:6px; font-variant-numeric:tabular-nums; }
.logline.warn{ border-left-color:var(--yellow); }
.logline.danger{ border-left-color:var(--red); background:rgba(248,113,113,.07); }

/* ---------- 弹窗 / Toast ---------- */
#modalWrap{
  position:fixed; inset:0; background:rgba(4,10,20,.72); z-index:50;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(3px);
}
.modal{
  width:min(860px,94vw); max-height:88vh; overflow-y:auto; background:var(--panel);
  border:1px solid #2a3a5e; border-radius:14px; padding:18px 22px; position:relative;
}
.modal-close{ position:absolute; top:10px; right:12px; background:var(--panel2); border:1px solid var(--line); color:var(--dim); border-radius:8px; width:30px; height:30px; }
.m-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.m-head h3{ font-size:18px; }
.m-chips{ display:flex; gap:6px; flex-wrap:wrap; font-size:11.5px; }
.m-chips span{ background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:2px 10px; color:var(--dim); }
.m-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:14px; }
.m-metrics{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.m-metric{ background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:8px 10px; }
.m-metric b{ font-size:17px; display:block; font-variant-numeric:tabular-nums; }
.m-metric span{ font-size:11px; color:var(--dim); }
.splits{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.split{ background:var(--panel2); border:1px solid var(--line); border-radius:7px; padding:4px 9px; font-size:11.5px; font-variant-numeric:tabular-nums; }
.split.hot{ border-color:rgba(248,113,113,.5); color:var(--red); }
.split.fast{ border-color:rgba(52,211,153,.5); color:var(--green); }
.rxcard{ border:1px solid rgba(52,211,153,.35); background:rgba(52,211,153,.06); border-radius:10px; padding:12px 14px; font-size:13px; line-height:1.8; margin-top:10px; }
.rxcard b{ color:var(--coach); }
.predcard{ border:1px solid rgba(167,139,250,.35); background:rgba(167,139,250,.06); border-radius:10px; padding:10px 14px; font-size:12.5px; margin-top:10px; line-height:1.7; }

#toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%); z-index:60;
  background:#132038; border:1px solid var(--accent); color:var(--txt);
  padding:10px 20px; border-radius:10px; font-size:13px; box-shadow:0 6px 24px rgba(0,0,0,.5);
}
footer{ text-align:center; color:#42557a; font-size:11px; padding:10px; border-top:1px solid var(--line); }

/* ---------- 响应式 ---------- */
@media (max-width:1280px){
  .pre-grid{ grid-template-columns:1fr 1fr; }
  .live-grid{ grid-template-columns:1fr 1fr; }
  #agentPanel{ width:280px; }
}
@media (max-width:980px){
  #layout{ flex-direction:column; }
  #agentPanel{ width:auto; max-height:260px; border-left:none; border-top:1px solid var(--line); }
  .pre-grid,.live-grid,.about-grid,.m-grid,.post-charts{ grid-template-columns:1fr; }
}

/* ---------- 打印 ---------- */
@media print{
  body{ background:#fff; color:#111; }
  #topbar,#tabs,#agentPanel,footer,.demo-hint,#btnPrint,.pane-head{ display:none!important; }
  #layout{ display:block; }
  main{ overflow:visible; padding:0; }
  .tabpane{ display:none!important; }
  #tab-post{ display:block!important; }
  .card{ border:1px solid #bbb; background:#fff; break-inside:avoid; }
  .kpi,.m-metric,.split{ background:#f4f6f9; border-color:#ccc; }
}