/* =========================================================
   东南 · 共享设计令牌
   四端统一引用：<link rel="stylesheet" href="../shared/theme.css">
   口径以教师端为准（18 个变量），学生端的 --attention 已统一为 #C77700
   ========================================================= */
:root{
  --primary:#0064E0;
  --primary-deep:#0457CB;
  --ink-deep:#0A1317;
  --ink:#1C1E21;
  --charcoal:#444950;
  --slate:#4B4C4F;
  --steel:#5D6C7B;
  --stone:#8595A4;
  --hairline:#CED0D4;
  --hairline-soft:#DEE3E9;
  --surface:#F1F4F7;
  --tint:#F5F9FF;

  --success:#31A24C;
  --success-bg:#E9F7ED;
  --attention:#C77700;
  --attention-bg:#FFF6E5;
  --critical:#E41E3F;
  --critical-bg:#FDECF0;
  --canvas:#FFFFFF;

  /* 图表序列色：单序列用主色，多序列按此顺序取，保证三端口径一致 */
  --c1:#0064E0;
  --c2:#0457CB;
  --c3:#31A24C;
  --c4:#C77700;
  --c5:#E41E3F;
  --c6:#5D6C7B;

  /* 图表/表格组件 */
  --chart-h:290px;
  --chart-h-sm:220px;
  --radius:8px;

  /* =========================================================
     质感令牌（四端共用，新增部分不改动上面 18 个既有变量）
     ---------------------------------------------------------
     为什么单独列一层：上面的变量是「业务口径」，改动会影响图表配色等既有契约；
     这一层只服务观感（圆角 / 阴影 / 动效 / 焦点环），四端统一引用即可拿到一致的质感。
     ========================================================= */

  /* 圆角：越大越柔和现代。卡片用 lg，控件用 sm/md，胶囊用 pill */
  --r-xs:6px;
  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --r-xl:22px;
  --r-2xl:28px;
  --r-pill:999px;

  /* 层级阴影：三层递进。刻意用极低透明度 + 双层叠加，比单层重阴影更「贵」 */
  --sh-1:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.05);
  --sh-2:0 2px 4px rgba(16,24,40,.04), 0 8px 20px rgba(16,24,40,.06);
  --sh-3:0 4px 8px rgba(16,24,40,.05), 0 18px 40px rgba(16,24,40,.10);
  /* 主色投影：用于主按钮 / 选中态，让强调色“发光”而不脏 */
  --sh-primary:0 2px 6px rgba(0,100,224,.18), 0 10px 24px rgba(0,100,224,.16);

  /* 焦点环：键盘可达性的底线，不能只靠颜色区分 */
  --ring:0 0 0 3px rgba(0,100,224,.16);
  --ring-strong:0 0 0 4px rgba(0,100,224,.22);

  /* 动效：统一时长与曲线，避免四端各写各的导致手感不一致 */
  --dur-1:140ms;
  --dur-2:200ms;
  --dur-3:320ms;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-spring:cubic-bezier(.34,1.26,.64,1);

  /* 渐变：主按钮与品牌面使用，避免大片纯色的廉价感 */
  --grad-primary:linear-gradient(135deg,#0A72E8 0%,#0457CB 100%);
  --grad-primary-hover:linear-gradient(135deg,#0B7CF5 0%,#0457CB 100%);
  --grad-brand:linear-gradient(160deg,#0A1317 0%,#12202A 55%,#0A3A6B 100%);

  /* 表面层级：卡片底色与页面底色的区分度，决定层次是否清晰 */
  --surface-2:#F7F9FC;
  --canvas-2:#FBFCFE;

  /* 品牌标志尺寸：桌面端 40px，登录页大图 48px，移动端 32px */
  --logo:40px;
  --logo-lg:48px;
  --logo-sm:32px;
}

/* =========================================================
   品牌标志（四端统一）
   logo.png 已抠为透明底（黑底已去除），因此不再需要圆形裁切与深色兜底；
   object-fit:contain 保证任何尺寸下都完整显示、不拉伸不裁切不模糊。
   ========================================================= */
.brand-logo{
  width:var(--logo);height:var(--logo);
  object-fit:contain;object-position:center;
  display:block;flex:0 0 auto;background:transparent;
}
.brand-logo.brand-logo-lg{width:var(--logo-lg);height:var(--logo-lg);}

.mask .modal{max-height:88vh;overflow-y:auto;}

@media (max-width:767px){
  .brand-logo{width:var(--logo-sm);height:var(--logo-sm);}
  .brand-logo.brand-logo-lg{width:38px;height:38px;}
}

/* =========================================================
   图表卡片：图 + 明细数据表 + 导出 CSV（四端共用）
   结构由 shared/charts.js 生成，样式集中在此，避免四端各写一份
   ========================================================= */
.chart-card{
  background:var(--canvas);
  border:1px solid var(--hairline-soft);
  border-radius:var(--radius);
  padding:14px 16px 12px;
  margin:0 0 14px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.chart-card:hover{
  border-color:var(--hairline);
  box-shadow:0 2px 10px rgba(10,19,23,.05);
}
.chart-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;margin-bottom:10px;
}
.chart-title{font-size:14px;font-weight:700;color:var(--ink-deep);line-height:1.4;}
.chart-sub{font-size:12px;color:var(--stone);margin-top:2px;line-height:1.5;}
.chart-acts{display:flex;align-items:center;gap:6px;flex:0 0 auto;}
.chart-btn{
  font:inherit;font-size:12px;color:var(--steel);cursor:pointer;
  background:var(--canvas);border:1px solid var(--hairline-soft);
  border-radius:6px;padding:4px 9px;line-height:1.5;white-space:nowrap;
  transition:all .15s ease;
}
.chart-btn:hover{color:var(--primary);border-color:var(--primary);background:var(--tint);}
.chart-btn.on{color:var(--primary);border-color:var(--primary);background:var(--tint);font-weight:700;}
.chart-tabs{display:flex;gap:4px;margin-bottom:8px;}
.chart-canvas{width:100%;height:var(--chart-h);}
.chart-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;color:var(--stone);font-size:13px;gap:6px;
}
.chart-empty b{font-size:22px;font-weight:400;line-height:1;}

/* 明细数据表（默认折叠） */
.chart-table{display:none;margin-top:10px;border-top:1px dashed var(--hairline-soft);padding-top:10px;}
.chart-table.on{display:block;}
.chart-table .ct-wrap{max-height:320px;overflow:auto;border:1px solid var(--hairline-soft);border-radius:6px;}
.chart-table table{width:100%;border-collapse:collapse;font-size:12.5px;}
.chart-table th{
  position:sticky;top:0;background:var(--surface);color:var(--steel);
  font-weight:700;text-align:left;padding:7px 10px;white-space:nowrap;
  border-bottom:1px solid var(--hairline-soft);
}
.chart-table td{padding:6px 10px;color:var(--ink);border-bottom:1px solid #F4F6F8;}
.chart-table tr:last-child td{border-bottom:none;}
.chart-table tbody tr:nth-child(even){background:#FBFCFD;}
.chart-table td.num{text-align:right;font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}
.chart-table th.num{text-align:right;}

/* 紧凑统计条：图上方的一排关键数字 */
.chart-stats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
.chart-stat{
  flex:1 1 96px;min-width:96px;background:var(--surface);border-radius:6px;
  padding:8px 10px;
}
.chart-stat .k{font-size:11px;color:var(--stone);}
.chart-stat .v{font-size:17px;font-weight:700;color:var(--ink-deep);font-variant-numeric:tabular-nums;}
.chart-stat.ok .v{color:var(--success);}
.chart-stat.warn .v{color:var(--attention);}
.chart-stat.bad .v{color:var(--critical);}

/* =========================================================
   响应式：侧栏 248px 在窄屏会挤爆主区，这里统一兜底
   ========================================================= */
/* 学科色标签（九门学科，四端共用） */
/* =========================================================
   知识图谱（四端共用）
   ---------------------------------------------------------
   四阶段颜色不写在这里 —— 它随 data.js 的 KB_STAGES 走、由 JS 内联到元素上，
   保证「改一处、四端同色」。本段只负责布局与观感。
   ========================================================= */
.kb-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.kb-bar .sp{margin-left:auto;font-size:12.5px;color:var(--stone);}

.kb-legend{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:12px;
  font-size:12.5px;color:var(--steel);}
.kb-legend .kb-lg-t{color:var(--stone);}
.kb-legend .kb-lg{display:inline-flex;align-items:center;gap:6px;}
.kb-legend .kb-lg i{width:12px;height:12px;border-radius:3px;display:inline-block;}

.kb-total{display:flex;align-items:center;gap:14px;padding:12px 14px;background:var(--surface);
  border-radius:10px;margin-bottom:16px;font-size:13px;color:var(--steel);flex-wrap:wrap;}
.kb-total b{color:var(--ink-deep);font-size:16px;}
.kb-total .tr{flex:1 1 180px;min-width:140px;height:8px;border-radius:100px;
  background:var(--hairline-soft);overflow:hidden;display:flex;}
.kb-total .tr i{display:block;height:100%;transition:width 400ms ease;}

.kb-ch{margin-bottom:18px;border:1px solid var(--hairline-soft);border-radius:12px;padding:14px 16px;}
.kb-chh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.kb-chh .nm{font-size:15px;font-weight:700;color:var(--ink-deep);}
.kb-chh .ct{font-size:12px;color:var(--stone);}
.kb-sec{padding:10px 0 4px;border-top:1px dashed var(--hairline-soft);}
.kb-sec:first-of-type{border-top:none;}
.kb-sech{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;
  font-size:13.5px;font-weight:700;color:var(--ink);}
.kb-sech .ct{font-size:12px;color:var(--stone);font-weight:400;}
.kb-kps{display:flex;gap:8px;flex-wrap:wrap;}
.kb-kp{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:100px;font-size:13px;
  cursor:pointer;background:#fff;border:1px solid var(--hairline-soft);color:var(--slate);
  transition:all 160ms ease;}
.kb-kp:hover{border-color:var(--stone);}
.kb-kp .dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;}
.kb-kp .st{font-size:11.5px;font-weight:700;}

/* 四阶段选择器（教师端 / 管理员端） */
.kb-row{display:flex;align-items:center;gap:12px;padding:7px 10px;border-radius:8px;flex-wrap:wrap;}
.kb-row:hover{background:var(--surface);}
.kb-row-nm{flex:1 1 200px;min-width:160px;font-size:13.5px;color:var(--slate);}
.kb-src{font-size:11.5px;color:var(--stone);flex:0 0 auto;}
.kb-stage{display:flex;gap:4px;flex-wrap:wrap;}
.kb-stage button{border:1px solid var(--hairline);background:#fff;border-radius:6px;
  font-family:inherit;font-size:11.5px;padding:3px 8px;color:var(--slate);cursor:pointer;transition:all 140ms ease;}
.kb-stage button:hover{border-color:var(--primary);color:var(--primary);}
.kb-stage button.on{font-weight:700;}

@media (max-width:767px){
  .kb-ch{padding:12px;}
  .kb-kp{font-size:12.5px;}
  .kb-legend{gap:10px;}
}

/* 学科色标签（九门学科，四端共用） */
.tag-s{font-size:11px;font-weight:700;padding:3px 8px;border-radius:100px;margin-right:6px;}
.s-math{background:#EAF2FF;color:#0064E0;}
.s-phy{background:#EAF7F1;color:#12805A;}
.s-chem{background:#FDF0E6;color:#B35C00;}
.s-chi{background:#F6EDFB;color:#7B3FA8;}
.s-eng{background:#FFF3E0;color:#B26A00;}
.s-bio{background:#E6F6EE;color:#0F7A52;}
.s-his{background:#F1EADA;color:#8A5A1B;}
.s-pol{background:#FBE9EC;color:#B02A45;}
.s-geo{background:#E4F0FA;color:#1B5E8A;}

@media (max-width:1199px){
  .chart-canvas{height:260px;}
}
@media (max-width:767px){
  :root{--chart-h:var(--chart-h-sm);}
  .chart-card{padding:12px 12px 10px;}
  .chart-head{flex-direction:column;align-items:stretch;gap:8px;}
  .chart-acts{justify-content:flex-end;}
  .chart-table .ct-wrap{max-height:260px;-webkit-overflow-scrolling:touch;}
}

/* =========================================================
   质感层（四端共用，追加在最后以便覆盖上面的基础观感）
   ---------------------------------------------------------
   这一段只做三件事：给「面」加层级、给「交互」加反馈、给「动效」定节奏。
   不改动任何布局尺寸，因此不会引起破版；四端只要用了这些类名/元素就自动受益。
   ========================================================= */

/* 1) 层级：卡片 / 图卡 / 知识块统一抬起来一点，页面立刻有纵深 */
.chart-card{
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  transition:box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.chart-card:hover{
  border-color:var(--hairline);
  box-shadow:var(--sh-2);
  transform:translateY(-1px);
}
.kb-ch{border-radius:var(--r-lg);box-shadow:var(--sh-1);}
.kb-total{border-radius:var(--r-md);box-shadow:var(--sh-1);}
.kb-kp{
  border-radius:var(--r-pill);
  box-shadow:var(--sh-1);
  transition:box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.kb-kp:hover{border-color:var(--primary);box-shadow:var(--sh-2);transform:translateY(-1px);}
.chart-btn{border-radius:var(--r-sm);transition:all var(--dur-1) var(--ease-out);}
.chart-table .ct-wrap{border-radius:var(--r-sm);}
.chart-stat{border-radius:var(--r-sm);}

/* 2) 交互反馈：键盘焦点必须有可见环；这是无障碍的底线，不能只靠颜色变化 */
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,
[role=button]:focus-visible,.kb-kp:focus-visible{
  outline:none;
  box-shadow:var(--ring);
}

/* 3) 动效节奏：hover 微微抬起、按下轻微下沉 —— 「手感」主要来自这里 */
@media (hover:hover){
  button:not(:disabled):active,.btn:not(:disabled):active,.chart-btn:not(:disabled):active{transform:translateY(1px);}
}

/* 4) 尊重系统「减少动态效果」设置：前庭敏感用户会因大位移不适。
      这里统一降级为「只保留透明度变化」，而不是简单粗暴地全关（全关会丢掉反馈）。 */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
  .chart-card:hover,.kb-kp:hover{transform:none;}
}