/* ============================================================
   管理后台样式 · 医学蓝白风（与实验前端一致）
   ============================================================ */
:root{
  --primary:#1668B8; --primary-deep:#0E4E8C; --primary-soft:#E7F1FB;
  --accent:#18A3B8; --bg:#EEF3F8; --surface:#fff; --border:#DBE6F1;
  --text:#1C2B3A; --sub:#5A6B7B; --muted:#93A3B3;
  --success:#2BA471; --warning:#E89B2B; --danger:#E5484D;
  --radius:12px; --shadow:0 2px 10px rgba(16,48,84,.08); --shadow-lg:0 16px 44px rgba(16,48,84,.18);
  --font:"PingFang SC","Microsoft YaHei",-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p{margin:0} ul{margin:0;padding:0;list-style:none} a{color:var(--primary);text-decoration:none}
button{font-family:inherit;cursor:pointer}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:#c2d4e6;border-radius:9px}

/* ---------- 登录 ---------- */
.login-bg{height:100%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1100px 560px at 75% -10%,#1c74c4,#0e4e8c 45%,#0a3a68)}
.login-box{background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);width:380px;max-width:92vw;padding:34px 32px}
.login-box .lg{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.login-box .lg .ic{width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,#1668b8,#18a3b8);display:grid;place-items:center;color:#fff;font-size:21px}
.login-box .lg b{font-size:15px}
.login-box h2{font-size:21px;margin:16px 0 4px}
.login-box .sub{color:var(--sub);font-size:13px;margin-bottom:22px}
.fld{margin-bottom:15px}
.fld label{display:block;font-size:13px;color:var(--sub);font-weight:600;margin-bottom:7px}
.fld input{width:100%;padding:11px 13px;border:1.5px solid var(--border);border-radius:9px;font-size:14px;font-family:inherit}
.fld input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.login-err{color:var(--danger);font-size:13px;margin:4px 0 12px;min-height:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;border-radius:9px;
  padding:10px 18px;font-size:14px;font-weight:600;background:var(--primary);color:#fff;transition:.15s}
.btn:hover{background:var(--primary-deep)} .btn:disabled{opacity:.5;cursor:not-allowed}
.btn--block{width:100%;padding:12px} .btn--ghost{background:#fff;color:var(--primary);border-color:var(--border)}
.btn--ghost:hover{background:var(--primary-soft)} .btn--sm{padding:6px 12px;font-size:13px;border-radius:8px}
.btn--danger{background:var(--danger)} .btn--danger:hover{background:#c93b40}
.btn--accent{background:var(--accent)} .btn--accent:hover{background:#128094}
.login-tip{margin-top:16px;font-size:12px;color:var(--muted);text-align:center}

/* ---------- 后台外壳 ---------- */
.layout{display:grid;grid-template-columns:230px 1fr;grid-template-rows:60px 1fr;
  grid-template-areas:"side head" "side main";height:100%}
.side{grid-area:side;background:linear-gradient(180deg,#0e4e8c,#0a3a68);color:#fff;padding:18px 14px;display:flex;flex-direction:column}
.side .brand{display:flex;align-items:center;gap:10px;padding:6px 8px 18px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:14px}
.side .brand .ic{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:19px}
.side .brand b{font-size:14px;line-height:1.3}
.side nav a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:9px;color:rgba(255,255,255,.82);font-size:14px;font-weight:600;margin-bottom:3px;cursor:pointer}
.side nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.side nav a.active{background:rgba(255,255,255,.18);color:#fff}
.side nav a .i{width:18px;text-align:center}
.side .foot{margin-top:auto;font-size:11.5px;color:rgba(255,255,255,.5);padding:10px 8px}
.head{grid-area:head;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 22px;gap:12px}
.head h1{font-size:17px} .head .right{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--sub)}
.head .avatar{width:32px;height:32px;border-radius:50%;background:var(--primary-soft);color:var(--primary-deep);display:grid;place-items:center;font-weight:700}
.main{grid-area:main;overflow-y:auto;padding:22px}
.page{display:none} .page.active{display:block;animation:fade .25s}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- 卡片/统计 ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.stat{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.stat .k{font-size:13px;color:var(--sub)} .stat .v{font-size:30px;font-weight:800;color:var(--primary-deep);margin-top:6px;line-height:1}
.stat .v small{font-size:14px;font-weight:600;color:var(--muted)}
.stat .ic{position:absolute;right:14px;top:14px;font-size:24px;opacity:.5}
.stat.s2 .v{color:var(--accent)} .stat.s3 .v{color:var(--success)} .stat.s4 .v{color:var(--warning)}
.grid2{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin-bottom:20px}
.panel{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.panel h3{font-size:15px;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.panel h3 .more{margin-left:auto;font-size:12px;font-weight:500;color:var(--muted)}

/* 柱状图 */
.barchart{display:flex;align-items:flex-end;gap:14px;height:170px;padding-top:18px}
.barchart .col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.barchart .bar{width:60%;max-width:46px;background:linear-gradient(#2b8de0,#1668b8);border-radius:6px 6px 0 0;position:relative;transition:height .8s cubic-bezier(.22,.61,.36,1);min-height:2px}
.barchart .bar .n{position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:700}
.barchart .lb{margin-top:8px;font-size:11px;color:var(--sub);text-align:center}
/* 环形 */
.donut{display:flex;align-items:center;gap:18px}
.donut svg{width:120px;height:120px;flex:none}
.donut .legend div{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:8px;color:var(--sub)}
.donut .legend .dot{width:11px;height:11px;border-radius:3px}

/* ---------- 表格 ---------- */
.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.toolbar input,.toolbar select{padding:9px 12px;border:1.5px solid var(--border);border-radius:9px;font-size:13.5px;font-family:inherit}
.toolbar input{min-width:220px} .toolbar .sp{margin-left:auto}
table.tb{width:100%;border-collapse:collapse;font-size:13.5px;background:#fff}
table.tb th,table.tb td{padding:11px 12px;border-bottom:1px solid var(--border);text-align:left}
table.tb th{background:var(--primary-soft);color:var(--primary-deep);font-weight:700;position:sticky;top:0;white-space:nowrap}
table.tb tbody tr:hover{background:#f6fafe}
.tb-wrap{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:auto;max-height:calc(100vh - 230px)}
.pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700}
.pill.teach{background:var(--primary-soft);color:var(--primary-deep)} .pill.exam{background:#fcf1df;color:#b9760f}
.pill.done{background:#e4f6ee;color:var(--success)} .pill.doing{background:#eef1f4;color:var(--sub)}
.score{font-weight:800} .score.hi{color:var(--success)} .score.mid{color:var(--warning)} .score.lo{color:var(--danger)}
.link{color:var(--primary);cursor:pointer;font-weight:600} .link:hover{text-decoration:underline}
.empty{text-align:center;color:var(--muted);padding:40px}
.tag-weak{display:inline-flex;align-items:center;gap:6px;background:#fbe7e8;color:var(--danger);padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:600;margin:0 8px 8px 0}
.tag-weak b{background:var(--danger);color:#fff;border-radius:999px;padding:0 6px;font-size:11px}

/* ---------- 抽屉 ---------- */
.drawer-mask{position:fixed;inset:0;background:rgba(14,34,56,.42);display:none;z-index:50}
.drawer-mask.show{display:block;animation:fade .2s}
.drawer{position:fixed;top:0;right:0;height:100%;width:560px;max-width:94vw;background:var(--bg);box-shadow:var(--shadow-lg);
  transform:translateX(100%);transition:transform .3s cubic-bezier(.22,.61,.36,1);z-index:51;overflow-y:auto}
.drawer.show{transform:none}
.drawer .dh{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);padding:18px 20px;display:flex;align-items:center;gap:12px;z-index:1}
.drawer .dh .av{width:42px;height:42px;border-radius:50%;background:var(--primary-soft);color:var(--primary-deep);display:grid;place-items:center;font-weight:800;font-size:17px}
.drawer .dh b{font-size:16px} .drawer .dh small{color:var(--muted);font-size:12.5px}
.drawer .dh .x{margin-left:auto;width:32px;height:32px;border:none;border-radius:8px;background:#eef3f8;font-size:18px;color:var(--sub)}
.drawer .db{padding:18px 20px}
.mini-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.mini-cards .mc{background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px;text-align:center}
.mini-cards .mc .n{font-size:20px;font-weight:800;color:var(--primary-deep)} .mini-cards .mc .l{font-size:11.5px;color:var(--sub);margin-top:2px}
.sec-title{font-size:13px;font-weight:700;color:var(--sub);margin:16px 0 8px;display:flex;align-items:center;gap:7px}
.timeline .ti{display:flex;gap:10px;padding:8px 0;border-bottom:1px dashed var(--border);font-size:12.5px}
.timeline .ti .tt{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.timeline .ti .ta{font-weight:600;color:var(--primary-deep);white-space:nowrap}
.qz{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px dashed var(--border);font-size:12.5px}
.qz .b{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;color:#fff;font-size:11px;flex:none}
.qz .b.ok{background:var(--success)} .qz .b.no{background:var(--danger)}

/* ---------- Toast / Modal ---------- */
#toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center}
#toast .t{background:#fff;box-shadow:var(--shadow-lg);border:1px solid var(--border);border-radius:999px;padding:10px 18px;font-size:13.5px;font-weight:600;display:flex;gap:9px;align-items:center;animation:fade .25s}
#toast .t .d{width:9px;height:9px;border-radius:50%}
#toast .t.ok .d{background:var(--success)} #toast .t.err .d{background:var(--danger)} #toast .t.info .d{background:var(--primary)}
#modal{position:fixed;inset:0;background:rgba(14,34,56,.42);display:none;align-items:center;justify-content:center;z-index:120;padding:20px}
#modal.show{display:flex;animation:fade .2s}
#modal .m{background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);width:420px;max-width:94vw;padding:24px}
#modal .m h3{font-size:17px;margin-bottom:16px}
#modal .m .foot{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}

@media (max-width:880px){
  .layout{grid-template-columns:1fr;grid-template-rows:60px 1fr;grid-template-areas:"head" "main"}
  .side{position:fixed;left:0;top:0;bottom:0;width:230px;z-index:60;transform:translateX(-100%);transition:transform .25s}
  .side.open{transform:none} .menu-t{display:grid!important}
  .cards{grid-template-columns:repeat(2,1fr)} .grid2{grid-template-columns:1fr}
}
.menu-t{display:none;width:34px;height:34px;border:1px solid var(--border);border-radius:8px;background:#fff;place-items:center;font-size:16px;color:var(--sub)}