/* ==========================================================================
   爱笛卡数据看板 · PC 端站点样式
   ⚠️ 本文件不定义任何十六进制颜色，全部取自 /static/tokens.css（设计令牌 v2.3.1）
   ========================================================================== */
@import url('/static/tokens.css?v=1');

/* ---- 顶栏导航 ---- */
.nav{display:flex;gap:var(--sp-1)}
.nav a{padding:6px var(--sp-3);border-radius:var(--r-md);color:var(--text-sub);
  font-size:var(--fs-13);font-weight:var(--fw-medium);text-decoration:none;
  transition:var(--tr-base)}
.nav a:hover{background:var(--n-100);color:var(--text-strong)}
.nav a.on{background:var(--brand-50);color:var(--brand-700);font-weight:var(--fw-semi)}

/* ---- 页面容器 ---- */
.page{max-width:var(--container);margin:0 auto;padding:var(--sp-6) var(--sp-5) var(--sp-16)}

/* ---- 页头 ---- */
.head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--sp-4);margin-bottom:var(--sp-5);flex-wrap:wrap}
.head h1{font-size:var(--fs-24);font-weight:var(--fw-bold);color:var(--text-strong)}
.head .meta{font-size:var(--fs-13);color:var(--text-sub);margin-top:2px}
.term-pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 var(--sp-3);
  border-radius:var(--r-full);background:var(--brand-50);color:var(--brand-700);
  font-size:var(--fs-13);font-weight:var(--fw-semi)}

/* ---- 区块 ---- */
.panel{background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-5);
  box-shadow:var(--sh-2);margin-bottom:var(--sp-6)}
.panel-hd{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);margin-bottom:var(--sp-4);flex-wrap:wrap}
.panel-hd h2{font-size:var(--fs-16);font-weight:var(--fw-semi);color:var(--text-strong)}
.panel-hd .hint{font-size:var(--fs-12);color:var(--text-muted)}
/* 未结算标记：该学期结果还没发生（如最新学期的跨学期续报） */
.tag-na{display:inline-block;margin-left:var(--sp-2);padding:1px 6px;font-size:11px;
  line-height:16px;border-radius:var(--r-sm);color:var(--text-muted);
  background:var(--n-100);border:1px solid var(--border);white-space:nowrap}
.board-note{font-size:var(--fs-12);color:var(--text-muted)}

/* ---- 分段切换 ---- */
.seg{display:inline-flex;padding:3px;gap:2px;background:var(--n-100);
  border-radius:var(--r-md);box-shadow:var(--inset-well)}
.seg a,.seg button{padding:5px var(--sp-3);border-radius:var(--r-sm);color:var(--text-sub);
  font-size:var(--fs-13);text-decoration:none;white-space:nowrap;
  background:transparent;border:0;font-family:inherit;cursor:pointer;
  transition:var(--tr-base)}
.seg a:hover,.seg button:hover{color:var(--text-strong)}
.seg a.on,.seg button.on{background:var(--surface);color:var(--brand-700);
  font-weight:var(--fw-semi);box-shadow:var(--sh-1)}
.seg button:focus-visible{outline:none;box-shadow:var(--focus-ring-inset)}

/* 局部刷新时的 loading 态：只降透明度，不位移，避免布局跳动 */
.is-loading{opacity:.45;transition:opacity var(--dur-1) var(--ease-out);
  pointer-events:none}

/* ==========================================================================
   KPI 卡（主页核心，整体可点击 → 二级页）
   ========================================================================== */
/* 6 张关键指标：大屏 3 列 2 行 */
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
@media (max-width:1240px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}
.kpi{display:block;position:relative;padding:var(--sp-4);background:var(--surface);
  border-radius:var(--r-lg);box-shadow:var(--sh-2);text-decoration:none;color:inherit;
  transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--sh-3)}
.kpi:active{transform:translateY(0);box-shadow:var(--sh-1)}
.kpi:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.kpi-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.kpi-k{font-size:var(--fs-13);color:var(--text-sub);font-weight:var(--fw-medium)}
.kpi-go{color:var(--n-300);font-size:16px;line-height:1;transition:var(--tr-base)}
.kpi:hover .kpi-go{color:var(--brand);transform:translateX(2px)}
.kpi-v{margin-top:var(--sp-2);font-size:var(--fs-30);font-weight:var(--fw-bold);
  line-height:var(--lh-tight);color:var(--text-strong);letter-spacing:-.5px}
.kpi-u{font-size:var(--fs-13);font-weight:var(--fw-medium);color:var(--text-sub);margin-left:4px}
.kpi-d{margin-top:var(--sp-2);display:flex;gap:var(--sp-3);flex-wrap:wrap;
  font-size:var(--fs-12)}

/* ---- 涨跌：中国习惯 增=红↑ 减=绿↓ ---- */
.delta{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.delta .lb{color:var(--text-muted)}
.delta.up{color:var(--danger)}
.delta.down{color:var(--success)}
.delta.flat,.delta.na{color:var(--text-muted)}
.delta b{font-weight:var(--fw-semi)}

/* 讲师详情页 KPI 卡：左值右同比/环比（用户 2026-10-14 要求右侧固定显示） */
.tcard{display:flex;align-items:stretch;justify-content:space-between;gap:var(--sp-3)}
.tcard .tc-main{flex:1;min-width:0}
.tc-side{display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding-left:var(--sp-3);border-left:1px solid var(--line);min-width:96px}
.tc-d{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2);
  font-size:var(--fs-12);white-space:nowrap}

/* ---- 迷你指标（次级区块）---- */
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
@media (max-width:1240px){.mini-grid{grid-template-columns:repeat(2,1fr)}}
.mini{display:block;padding:var(--sp-3) var(--sp-4);background:var(--n-50);
  border-radius:var(--r-md);box-shadow:var(--inset-well);text-decoration:none;
  color:inherit;transition:var(--tr-base)}
.mini:hover{background:var(--brand-50)}
.mini:focus-visible{outline:none;box-shadow:var(--focus-ring-inset)}
.mini-k{font-size:var(--fs-12);color:var(--text-sub)}
.mini-v{margin-top:2px;font-size:var(--fs-20);font-weight:var(--fw-bold);
  color:var(--text-strong)}
.mini-u{font-size:var(--fs-11);font-weight:var(--fw-medium);color:var(--text-sub);margin-left:3px}
.mini-d{margin-top:2px;display:flex;gap:var(--sp-3);font-size:var(--fs-11)}

/* ==========================================================================
   数据条（分布区块，每行可点击进入该成员的历史走势）
   ========================================================================== */
/* 列数不固定（各面板 1~9 个数据列），grid 模板由模板/JS 按列数内联下发 */
.bars{display:flex;flex-direction:column;overflow-x:auto}
.bar-row{display:grid;grid-template-columns:minmax(0,1fr) 92px 96px 84px 20px;
  align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-2);
  border-radius:var(--r-md);text-decoration:none;color:inherit;
  transition:background var(--dur-1) var(--ease-out)}
.bar-row:hover{background:var(--n-50)}
.bar-row:focus-visible{outline:none;box-shadow:var(--focus-ring-inset)}
.bar-row.head{font-size:var(--fs-12);color:var(--text-muted);padding-bottom:var(--sp-1)}
.bar-row.head:hover{background:transparent}
.bar-name{font-size:var(--fs-13);color:var(--text-strong);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.bar-track{height:8px;border-radius:var(--r-full);background:var(--n-200);
  box-shadow:var(--inset-well);overflow:hidden}
.bar-fill{display:block;height:100%;border-radius:var(--r-full);background:var(--brand);
  transition:width var(--dur-3) var(--ease-out)}
.bar-val{font-size:var(--fs-13);text-align:right;color:var(--text-strong)}
.bar-row .go{color:var(--n-300);text-align:right;transition:var(--tr-base)}
.bar-row:hover .go{color:var(--brand);transform:translateX(2px)}

/* ---- 表格 ---- */
.tbl-wrap{border-radius:var(--r-lg);background:var(--surface);
  box-shadow:var(--sh-2);overflow:auto}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-13)}
th{text-align:left;padding:var(--sp-2) var(--sp-3);background:var(--n-100);
  color:var(--text-sub);font-weight:var(--fw-semi);font-size:var(--fs-12);
  border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0}
td{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--n-100);
  color:var(--text)}
tbody tr:hover td{background:var(--n-50)}
tbody tr:last-child td{border-bottom:none}
.num{text-align:right;font-family:var(--num-font);font-variant-numeric:tabular-nums}
td.name a{color:var(--text-strong);text-decoration:none;font-weight:var(--fw-medium)}
td.name a:hover{color:var(--brand);text-decoration:underline}

/* ==========================================================================
   二级页（/metric）
   ========================================================================== */
.crumb{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-13);
  color:var(--text-muted);margin-bottom:var(--sp-4)}
.crumb a{color:var(--text-sub);text-decoration:none}
.crumb a:hover{color:var(--brand)}
.crumb .sep{color:var(--n-300)}

.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-6);
  padding:var(--sp-5);border-radius:var(--r-lg);background:var(--surface);
  box-shadow:var(--sh-2);margin-bottom:var(--sp-5);flex-wrap:wrap}
.hero-l{min-width:260px}
.hero-v{font-size:var(--fs-36);font-weight:var(--fw-bold);color:var(--text-strong);
  line-height:var(--lh-tight);letter-spacing:-1px}
.hero-u{font-size:var(--fs-16);font-weight:var(--fw-medium);color:var(--text-sub);margin-left:6px}
.hero-d{margin-top:var(--sp-3);display:flex;gap:var(--sp-5);flex-wrap:wrap;font-size:var(--fs-13)}
.hero-d .item .k{font-size:var(--fs-11);color:var(--text-muted);margin-bottom:2px}
.hero-desc{max-width:420px;font-size:var(--fs-12);color:var(--text-sub);
  line-height:var(--lh-relaxed);padding:var(--sp-3);background:var(--n-50);
  border-radius:var(--r-md);box-shadow:var(--inset-well)}

.chart{height:300px;width:100%}
.chart-lg{height:340px;width:100%}

/* ---- 空态 / 提示 ---- */
.empty{padding:var(--sp-12) var(--sp-5);text-align:center;color:var(--text-muted);
  font-size:var(--fs-13)}
.note{padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);font-size:var(--fs-12);
  background:var(--n-50);color:var(--text-sub);line-height:var(--lh-relaxed)}

/* ==========================================================================
   兼容层：数据校验 / 在读回溯 / 讲师页 / 登录页 仍在用的旧类名。
   这里只做「旧类名 -> 令牌值」的映射，不再引入任何新颜色。
   等这些页面按新令牌重构后，整段可以直接删掉。
   ========================================================================== */
.topbar{background:var(--surface);border-bottom:1px solid var(--line);
  padding:0 var(--sp-5);display:flex;align-items:center;gap:var(--sp-5);
  height:var(--topbar-h);position:sticky;top:0;z-index:var(--z-sticky)}
.logo{font-size:var(--fs-16);font-weight:var(--fw-bold);color:var(--brand-700)}
.logo small{color:var(--text-sub);font-weight:var(--fw-regular);
  font-size:var(--fs-12);margin-left:var(--sp-2)}
.topnav{display:flex;gap:var(--sp-1)}
.topnav a{padding:6px var(--sp-3);border-radius:var(--r-md);color:var(--text-sub);
  font-size:var(--fs-13);text-decoration:none;transition:var(--tr-base)}
.topnav a:hover{background:var(--n-100);color:var(--text-strong)}
.topnav a.on{background:var(--brand-50);color:var(--brand-700);font-weight:var(--fw-semi)}
.spacer{flex:1}
.devtag{font-size:var(--fs-12);color:var(--text-sub);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:3px var(--sp-2)}
.wrap{max-width:var(--container);margin:0 auto;padding:var(--sp-6) var(--sp-5) var(--sp-16)}
h1{font-size:var(--fs-20);color:var(--text-strong)}
.sub{color:var(--text-sub);font-size:var(--fs-13);margin-bottom:var(--sp-5)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:var(--sp-4);margin-bottom:var(--sp-6)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-4);box-shadow:var(--sh-2)}
.card .k{font-size:var(--fs-12);color:var(--text-sub);margin-bottom:var(--sp-1)}
.card .v{font-size:var(--fs-24);font-weight:var(--fw-bold);color:var(--text-strong);
  letter-spacing:-.5px}
.card .v small{font-size:var(--fs-13);font-weight:var(--fw-medium);
  color:var(--text-sub);margin-left:4px}
.card.ok .v{color:var(--success)}
.card.bad .v{color:var(--danger)}
.card.warn .v{color:var(--warning)}
section{background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-5);
  box-shadow:var(--sh-2);margin-bottom:var(--sp-5)}
section > h2{font-size:var(--fs-15);margin-bottom:var(--sp-1);display:flex;
  align-items:center;gap:var(--sp-2);color:var(--text-strong)}
section > h2 .cnt{font-size:var(--fs-12);font-weight:var(--fw-regular);
  color:var(--text-sub);background:var(--n-100);border-radius:var(--r-full);
  padding:2px var(--sp-2)}
section > .desc{font-size:var(--fs-12);color:var(--text-sub);margin-bottom:var(--sp-4)}
.tag{display:inline-block;border-radius:var(--r-sm);padding:2px 7px;
  font-size:var(--fs-12);line-height:1.5;background:var(--n-100);color:var(--n-600)}
.tag.ok{background:var(--success-bg);color:var(--success)}
.tag.bad{background:var(--danger-bg);color:var(--danger)}
.tag.warn{background:var(--warning-bg);color:var(--warning)}
.tag.gray{background:var(--n-100);color:var(--text-sub)}
.bar{height:6px;background:var(--n-200);border-radius:var(--r-full);
  overflow:hidden;min-width:70px;box-shadow:var(--inset-well)}
.bar > i{display:block;height:100%;background:var(--brand)}
.bar.ok > i{background:var(--success)}
.bar.bad > i{background:var(--danger)}
.tabs{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-4);flex-wrap:wrap}
.tabs a{padding:5px var(--sp-3);border:1px solid var(--line);border-radius:var(--r-md);
  color:var(--text-sub);text-decoration:none;font-size:var(--fs-13);
  background:var(--surface);transition:var(--tr-base)}
.tabs a:hover{border-color:var(--brand);color:var(--brand-700)}
.tabs a.on{background:var(--brand);border-color:var(--brand);color:#fff;
  font-weight:var(--fw-semi)}
.up{color:var(--danger);font-weight:var(--fw-semi)}
.down{color:var(--success);font-weight:var(--fw-semi)}
.flat,.na{color:var(--text-muted)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6)}
@media (max-width:1100px){.grid2{grid-template-columns:1fr}}
.mono{font-family:var(--font-mono);font-size:var(--fs-12)}
a.name{color:var(--brand-700);text-decoration:none}
a.name:hover{text-decoration:underline}
.note.bad{background:var(--danger-bg);color:var(--danger)}
.note.ok{background:var(--success-bg);color:var(--success)}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--sp-3)}

/* ---- 顶栏用户区（2026-10-22：退出登录） ----
   样式走 tokens.css 的 .ad-user / .ad-btn-ghost / .ad-btn-sm，
   见 templates/_userbar.html —— 不在这里重复定义。 */

/* 顶栏「初始密码」提醒按钮 —— 提醒还没改过密码的人（2026-10-26） */
.pwd-warn{color:var(--warning);border-color:var(--warning-bd);
  background:var(--warning-bg);font-weight:var(--fw-medium)}
.pwd-warn:hover{background:var(--warning);color:#fff;border-color:var(--warning)}