/* 学校体检数据操纵台 —— 电脑端科技感大屏 */
:root{
  --bg:#050912;
  --panel:rgba(13,22,45,.66);
  --panel2:rgba(18,30,58,.5);
  --line:rgba(88,166,255,.16);
  --line2:rgba(88,166,255,.30);
  --t1:#e6edf9; --t2:#93a7c9; --t3:#5f739a;
  --cy:#22d3ee; --bl:#3b82f6; --pu:#a78bfa; --gr:#34d399; --or:#fbbf24; --rd:#fb7185;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(30,64,140,.55) 0%, transparent 62%),
    radial-gradient(760px 460px at 92% -4%, rgba(12,90,110,.42) 0%, transparent 58%),
    radial-gradient(700px 500px at 50% 108%, rgba(70,40,140,.34) 0%, transparent 60%),
    var(--bg);
  color:var(--t1);
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px; overflow:hidden;
}
/* 背景网格 + 扫描线 */
.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(88,166,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(88,166,255,.045) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at 50% 30%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 30%,#000 20%,transparent 78%);}
.bg-scan{position:fixed;left:0;right:0;height:180px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(34,211,238,.055),transparent);
  animation:scan 9s linear infinite}
@keyframes scan{0%{top:-180px}100%{top:100%}}

/* ---------- 顶栏 ---------- */
.top{position:relative;z-index:2;height:64px;display:flex;align-items:center;gap:18px;padding:0 22px;
  border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(10,20,44,.86),rgba(10,20,44,.35));backdrop-filter:blur(8px)}
.top .logo{display:flex;align-items:center;gap:10px}
.top .dot{width:9px;height:9px;border-radius:50%;background:var(--cy);box-shadow:0 0 12px var(--cy);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
.top h1{margin:0;font-size:19px;font-weight:700;letter-spacing:2px;
  background:linear-gradient(90deg,#e8f6ff,#7fd8ff 55%,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}
.top .sub{font-size:12px;color:var(--t3);letter-spacing:1px}
.top .spacer{flex:1}
.top .clock{font-size:12px;color:var(--t2);text-align:right;line-height:1.5;font-variant-numeric:tabular-nums}
.top .clock b{display:block;font-size:15px;color:var(--t1);letter-spacing:1px}
.src{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--t2);
  padding:6px 12px;border:1px solid var(--line);border-radius:20px;background:rgba(20,34,66,.5)}
.src i{width:7px;height:7px;border-radius:50%;background:var(--gr);box-shadow:0 0 8px var(--gr);font-style:normal}
.src.off i{background:var(--or);box-shadow:0 0 8px var(--or)}
.demo-badge{font-size:11px;padding:4px 10px;border-radius:20px;background:rgba(251,191,36,.14);
  border:1px solid rgba(251,191,36,.4);color:var(--or);letter-spacing:1px}

/* ---------- 骨架 ---------- */
.shell{position:relative;z-index:1;height:calc(100% - 64px);display:flex}
.side{width:186px;flex:none;padding:16px 12px;border-right:1px solid var(--line);
  background:linear-gradient(180deg,rgba(10,18,40,.55),rgba(8,14,32,.2));backdrop-filter:blur(6px)}
.nav-i{display:flex;align-items:center;gap:10px;padding:11px 13px;margin-bottom:6px;border-radius:10px;
  color:var(--t2);cursor:pointer;font-size:14px;border:1px solid transparent;transition:.18s;user-select:none}
.nav-i:hover{background:rgba(59,130,246,.10);color:var(--t1)}
.nav-i.on{background:linear-gradient(90deg,rgba(34,211,238,.16),rgba(59,130,246,.06));
  color:#cdefff;border-color:var(--line2);box-shadow:inset 3px 0 0 var(--cy)}
.nav-i .n-ic{width:20px;text-align:center;font-size:15px}
.side .foot{position:absolute;bottom:16px;left:12px;right:12px;font-size:11px;color:var(--t3);line-height:1.7}

.main{flex:1;overflow:auto;padding:18px 22px 30px}
.main::-webkit-scrollbar{width:9px;height:9px}
.main::-webkit-scrollbar-thumb{background:rgba(88,166,255,.22);border-radius:6px}
.main::-webkit-scrollbar-track{background:transparent}

/* ---------- 面板 ---------- */
.panel{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;
  backdrop-filter:blur(10px);box-shadow:0 8px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04)}
.panel::before,.panel::after{content:'';position:absolute;width:14px;height:14px;border:2px solid var(--cy);opacity:.55}
.panel::before{left:-1px;top:-1px;border-right:0;border-bottom:0;border-radius:14px 0 0 0}
.panel::after{right:-1px;bottom:-1px;border-left:0;border-top:0;border-radius:0 0 14px 0}
.p-h{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.p-h .t{font-size:15px;font-weight:600;letter-spacing:1px}
.p-h .t::before{content:'';display:inline-block;width:3px;height:14px;background:linear-gradient(180deg,var(--cy),var(--bl));
  margin-right:9px;vertical-align:-2px;border-radius:2px}
.p-h .r{margin-left:auto;font-size:12px;color:var(--t3)}
.grid{display:grid;gap:16px}
.g-kpi{grid-template-columns:repeat(6,1fr)}
.g-2{grid-template-columns:1fr 1fr}
.g-3{grid-template-columns:1.15fr 1fr .9fr}
.g-23{grid-template-columns:1.6fr 1fr}
.mb{margin-bottom:16px}

/* ---------- KPI ---------- */
.kpi{position:relative;overflow:hidden}
.kpi .lb{font-size:12px;color:var(--t3);letter-spacing:1px}
.kpi .v{font-size:30px;font-weight:700;margin-top:6px;font-variant-numeric:tabular-nums;letter-spacing:1px;
  text-shadow:0 0 22px rgba(34,211,238,.35)}
.kpi .v small{font-size:14px;font-weight:500;color:var(--t2);margin-left:3px}
.kpi .d{font-size:11px;color:var(--t3);margin-top:4px}
.kpi .spark{position:absolute;right:8px;bottom:6px;opacity:.6}
.kpi.c1 .v{color:#7fe6ff} .kpi.c2 .v{color:#86efac} .kpi.c3 .v{color:#c4b5fd}
.kpi.c4 .v{color:#fda4af} .kpi.c5 .v{color:#fcd34d} .kpi.c6 .v{color:#93c5fd}

/* ---------- 条形 / 进度 ---------- */
.bars{display:flex;flex-direction:column;gap:11px}
.bar-row{font-size:13px}
.bar-top{display:flex;align-items:baseline;gap:8px;margin-bottom:5px}
.bar-top .nm{color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-top .vl{margin-left:auto;color:var(--t2);font-variant-numeric:tabular-nums;font-size:12px}
.bar-top .pc{color:var(--cy);font-variant-numeric:tabular-nums;font-weight:600;min-width:44px;text-align:right}
.track{height:8px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden;position:relative}
.track i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--bl),var(--cy));
  box-shadow:0 0 12px rgba(34,211,238,.45);transition:width .8s cubic-bezier(.22,1,.36,1)}
.track.o i{background:linear-gradient(90deg,#b45309,var(--or));box-shadow:0 0 12px rgba(251,191,36,.35)}
.track.r i{background:linear-gradient(90deg,#9f1239,var(--rd));box-shadow:0 0 12px rgba(251,113,133,.35)}
.track.g i{background:linear-gradient(90deg,#047857,var(--gr));box-shadow:0 0 12px rgba(52,211,153,.35)}

/* ---------- 表格 ---------- */
table.tb{width:100%;border-collapse:collapse;font-size:13px}
table.tb th{text-align:left;padding:9px 10px;color:var(--t3);font-weight:500;font-size:12px;letter-spacing:1px;
  border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;background:rgba(11,20,42,.96);backdrop-filter:blur(4px);z-index:2}
table.tb td{padding:9px 10px;border-bottom:1px solid rgba(88,166,255,.07);color:var(--t1);white-space:nowrap}
table.tb tbody tr:hover{background:rgba(59,130,246,.07)}
table.tb td.num{font-variant-numeric:tabular-nums}
.tw{max-height:100%;overflow:auto}
.tw::-webkit-scrollbar{width:8px} .tw::-webkit-scrollbar-thumb{background:rgba(88,166,255,.22);border-radius:6px}

/* 状态点 */
.st{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;border:1px solid}
.st.ok{color:#86efac;background:rgba(52,211,153,.10);border-color:rgba(52,211,153,.32)}
.st.doing{color:#7fe6ff;background:rgba(34,211,238,.10);border-color:rgba(34,211,238,.32)}
.st.todo{color:var(--t3);background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10)}
.st.warn{color:#fcd34d;background:rgba(251,191,36,.10);border-color:rgba(251,191,36,.32)}
.cell{display:inline-block;min-width:34px;height:20px;line-height:20px;border-radius:5px;font-size:11px;text-align:center;
  color:var(--t3);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.cell.done{color:#0b1220;background:linear-gradient(180deg,#67e8f9,#22d3ee);border-color:#22d3ee;font-weight:600}
.cell.part{color:#0b1220;background:linear-gradient(180deg,#fde68a,#fbbf24);border-color:#fbbf24;font-weight:600}
.cell.none{background:rgba(255,255,255,.03)}

/* ---------- 流水 ---------- */
.feed{display:flex;flex-direction:column;gap:2px;max-height:420px;overflow:auto}
.feed::-webkit-scrollbar{width:6px} .feed::-webkit-scrollbar-thumb{background:rgba(88,166,255,.2);border-radius:6px}
.f-i{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:12.5px;
  border-left:2px solid transparent;animation:rise .5s ease both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.f-i:nth-child(odd){background:rgba(255,255,255,.022)}
.f-i .tm{color:var(--t3);font-variant-numeric:tabular-nums;min-width:78px}
.f-i .nm{color:var(--t1)}
.f-i .dk{margin-left:auto;font-size:11px;padding:1px 8px;border-radius:20px;background:rgba(59,130,246,.13);
  border:1px solid rgba(59,130,246,.28);color:#93c5fd}
.f-i .sc{font-size:11px;color:var(--t3);min-width:104px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- 按钮 / 表单 ---------- */
.btn{padding:9px 16px;border-radius:9px;border:1px solid var(--line2);background:rgba(34,211,238,.10);
  color:#cdefff;cursor:pointer;font-size:13px;transition:.16s}
.btn:hover{background:rgba(34,211,238,.2);box-shadow:0 0 16px rgba(34,211,238,.25)}
.btn.gh{background:rgba(255,255,255,.04);border-color:var(--line);color:var(--t2)}
.btn.gh:hover{background:rgba(255,255,255,.08);color:var(--t1);box-shadow:none}
.btn.rd{background:rgba(251,113,133,.10);border-color:rgba(251,113,133,.34);color:#fda4af}
.btn.rd:hover{background:rgba(251,113,133,.2);box-shadow:0 0 16px rgba(251,113,133,.25)}
.btn.sm{padding:6px 12px;font-size:12px}
.btn.primary{background:linear-gradient(90deg,var(--bl),var(--cy));border-color:transparent;color:#04121f;font-weight:600}
.btn.primary:hover{box-shadow:0 0 22px rgba(34,211,238,.4)}
.hidden{display:none !important}

/* ---------- 机构入口门禁（多机构隔离） ---------- */
.org-gate{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(900px 520px at 50% 18%, rgba(30,64,140,.5), transparent 62%), var(--bg)}
.org-gate .org-card{width:min(420px,92vw);background:var(--panel);border:1px solid var(--line2);border-radius:16px;
  padding:26px 26px 22px;box-shadow:0 24px 70px rgba(0,0,0,.6);backdrop-filter:blur(10px)}
.org-gate .org-logo{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;letter-spacing:1px;color:#cdefff}
.org-gate .org-logo .dot{width:9px;height:9px;border-radius:50%;background:var(--cy);box-shadow:0 0 12px var(--cy);animation:pulse 2s infinite}
.org-gate .org-sub{color:var(--t2);font-size:13px;margin:10px 0 18px;line-height:1.6}
.org-gate .lab{display:block;font-size:13px;color:var(--t2);margin:14px 0 7px}
.org-gate .req{color:var(--rd);font-size:11px;margin-left:4px}
.org-gate .tip{margin-top:12px;font-size:12.5px;color:var(--rd);min-height:16px}
.org-tag{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--t2);
  padding:6px 12px;border:1px solid var(--line);border-radius:20px;background:rgba(20,34,66,.5);cursor:pointer;user-select:none}
.org-tag:hover{color:var(--t1);border-color:var(--line2)}
.org-tag .o-ic{width:7px;height:7px;border-radius:50%;background:var(--cy);box-shadow:0 0 8px var(--cy);font-style:normal}
.inp{padding:9px 12px;border-radius:9px;border:1px solid var(--line);background:rgba(8,15,34,.7);
  color:var(--t1);outline:none;font-size:13px}
.inp:focus{border-color:var(--cy);box-shadow:0 0 0 3px rgba(34,211,238,.12)}
.inp::placeholder{color:#4a5b7d}
select.inp option{background:#0b1428}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.hint{font-size:12px;color:var(--t3);line-height:1.75}
.empty{padding:46px 0;text-align:center;color:var(--t3);font-size:13px}
.empty .big{font-size:34px;opacity:.4;margin-bottom:10px}

/* ---------- 明细弹层 ---------- */
.mask{position:fixed;inset:0;background:rgba(2,5,12,.72);backdrop-filter:blur(3px);z-index:40;display:flex;
  align-items:center;justify-content:center;padding:30px}
.modal{width:min(920px,94vw);max-height:86vh;overflow:auto;background:linear-gradient(180deg,#0c1730,#0a1226);
  border:1px solid var(--line2);border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.modal .mh{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal .mh .nm{font-size:17px;font-weight:600}
.modal .mh .x{margin-left:auto;cursor:pointer;color:var(--t3);font-size:22px;line-height:1}
.modal .mb2{padding:16px 20px 22px}
.kvs{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.kv{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.kv .k{font-size:11px;color:var(--t3);margin-bottom:3px}
.kv .v{font-size:13.5px;color:var(--t1);word-break:break-all}
.kv.abn{border-color:rgba(251,113,133,.34);background:rgba(251,113,133,.07)}
.kv.abn .v{color:#fda4af}

/* ---------- 数据管理页 ---------- */
.drop{border:1px dashed var(--line2);border-radius:12px;padding:26px;text-align:center;color:var(--t3);
  background:rgba(255,255,255,.02);transition:.18s}
.drop.over{border-color:var(--cy);background:rgba(34,211,238,.07);color:#cdefff}
.card{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:16px}
.card h4{margin:0 0 8px;font-size:14px;font-weight:600;color:#cdefff}
.toast{position:fixed;left:50%;bottom:40px;transform:translateX(-50%) translateY(20px);z-index:60;
  background:rgba(8,16,36,.96);border:1px solid var(--line2);color:var(--t1);padding:11px 22px;border-radius:24px;
  font-size:13px;opacity:0;pointer-events:none;transition:.24s;box-shadow:0 10px 34px rgba(0,0,0,.5)}
.toast.show{opacity:1;transform:translateX(-50%)}
.sel-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.chip2{padding:5px 13px;border-radius:20px;border:1px solid var(--line);background:rgba(255,255,255,.03);
  color:var(--t2);cursor:pointer;font-size:12.5px;transition:.16s}
.chip2:hover{color:var(--t1);border-color:var(--line2)}
.chip2.on{background:rgba(34,211,238,.16);border-color:var(--cy);color:#cdefff}
.pg{display:none} .pg.on{display:block}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--t3);margin-top:10px}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px}

/* ---------- 管理员机构维护页 ---------- */
.admin-shell{flex-direction:column;height:100vh}
.admin-shell .top{position:sticky;top:0}
.admin-main{overflow:auto;flex:1;padding:18px 22px}
.ver{text-align:center;padding:13px;color:#5f739a;font-size:12px;letter-spacing:.6px;border-top:1px solid var(--line)}

/* ===== 手机端（小屏）适配：操纵台在手机上也能看 ===== */
@media (max-width: 760px){
  body{ font-size: 13px; overflow: auto; }
  .top{ height: 54px; padding: 0 12px; gap: 10px; }
  .top h1{ font-size: 15px; letter-spacing: 1px; }
  .top .sub{ display: none; }
  .clock{ display: none; }
  .src{ padding: 5px 9px; font-size: 11px; }
  .demo-badge{ padding: 3px 8px; font-size: 10px; }

  /* 侧栏变顶部横向滚动导航 */
  .shell{ flex-direction: column; height: auto; min-height: 100vh; }
  .side{ width: 100%; flex: none; padding: 8px 10px; border-right: none; border-bottom: 1px solid var(--line);
    display: flex; gap: 6px; overflow-x: auto; white-space: nowrap; backdrop-filter: blur(6px); }
  .side::-webkit-scrollbar{ height: 0; }
  .nav-i{ flex: 0 0 auto; padding: 9px 12px; margin-bottom: 0; font-size: 13px; border-radius: 8px; }
  .nav-i.on{ box-shadow: none; border-left: 0; border-bottom: 2px solid var(--cy); }
  .side .foot{ display: none; }

  /* 主内容区紧凑 */
  .main{ padding: 12px 10px 30px; overflow: visible; }
  .panel{ padding: 12px 13px; border-radius: 12px; }
  .p-h{ margin-bottom: 10px; }
  .p-h .t{ font-size: 14px; }

  /* 网格全部改为单列 / 双列 */
  .grid, .g-kpi, .g-2, .g-3, .g-23{ grid-template-columns: 1fr !important; gap: 10px; }
  .g-kpi{ grid-template-columns: repeat(2, 1fr) !important; }
  .mb{ margin-bottom: 10px; }

  /* KPI 卡片紧凑 */
  .kpi .v{ font-size: 22px; }
  .kpi .lb{ font-size: 11px; }
  .kpi .d{ font-size: 10px; }
  .kpi .spark{ display: none; }

  /* 表格横向滚动 */
  .tw{ max-height: 56vh; overflow: auto; -webkit-overflow-scrolling: touch; }
  table.tb{ font-size: 12px; }
  table.tb th, table.tb td{ padding: 7px 8px; }

  /* 表单行换行 */
  .row{ gap: 8px; }
  .row .inp{ flex: 1 1 100%; min-width: 0; }
  .row .btn{ flex: 1 1 auto; }

  /* 登录卡片 */
  .org-card{ padding: 22px 18px; }

  /* 隐藏一些复杂图表在手机上占位 */
  #ovRadar{ min-height: 220px; }

  /* 数据管理页 */
  .drop{ padding: 18px; }
  .sel-row{ gap: 6px; }
  .chip2{ padding: 5px 10px; font-size: 12px; }
  /* 导出筛选（学校 / 年级 / 班级 / 项目） */
  .exp-filter .flt-lab{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:#1f3a63; white-space:nowrap; }
  .exp-filter .flt-lab select{ margin:0; }
  .exp-proj-title{ font-size:13px; color:#1f3a63; font-weight:600; margin:2px 0 6px; }
  .exp-proj{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-bottom:6px; }
  .exp-proj .pchip{ display:inline-flex; align-items:center; gap:5px; font-size:13px; color:#243b5e; white-space:nowrap; cursor:pointer; }
  .exp-proj .pchip input{ width:15px; height:15px; accent-color:#1f6feb; cursor:pointer; }
}