/* ==========================================================================
   智能体平台 · 共享设计系统
   --------------------------------------------------------------------------
   学生端 / 教师端 / 管理后台三个页面都引用这一份。
   改这里的变量，三个页面同时生效；页面专属样式留在各自的 <style> 里。

   设计原则
   1. 一个主色（蓝），语义色只用在"需要注意/出问题"的地方，不要滥用
   2. 层次靠"阴影 + 间距 + 字重"，不靠边框堆叠
   3. 所有可点元素都要有 hover / active 反馈，过渡统一 .18s
   4. 数字用等宽（tabular-nums），避免表格里跳动
   ========================================================================== */

:root{
  /* 表面与描边 */
  --bg:#f4f6fa;
  --card:#ffffff;
  --card-2:#fafbfd;
  --line:#e6e9ef;
  --line-2:#d5dae3;

  /* 文字三级 */
  --text:#141821;
  --sub:#667085;
  --faint:#98a2b3;

  /* 主色 */
  --brand:#2563eb;
  --brand-2:#1d4ed8;
  --brand-3:#1e40af;
  --brand-soft:#eff5ff;
  --brand-line:#cfe0ff;

  /* 语义色 */
  --ok:#067647;      --ok-soft:#ecfdf3;   --ok-line:#abefc6;
  --warn:#b54708;    --warn-soft:#fffaeb; --warn-line:#fedf89;
  --err:#b42318;     --err-soft:#fef3f2;  --err-line:#fecdca;

  /* 圆角梯度 */
  --r-xs:6px;
  --r-sm:9px;
  --r:12px;
  --r-lg:16px;
  --r-xl:22px;

  /* 阴影四级：卡片 → 悬浮 → 抬起 → 弹层 */
  --sh-1:0 1px 2px rgba(16,24,40,.04);
  --sh-2:0 2px 4px -1px rgba(16,24,40,.05), 0 4px 12px -2px rgba(16,24,40,.06);
  --sh-3:0 8px 24px -6px rgba(16,24,40,.10), 0 2px 6px -2px rgba(16,24,40,.05);
  --sh-4:0 24px 48px -16px rgba(16,24,40,.20);

  /* 动效 */
  --t:.18s cubic-bezier(.4,0,.2,1);
  --t-slow:.3s cubic-bezier(.4,0,.2,1);

  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",
         "Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Consolas,"Cascadia Mono",monospace;
}

/* ---------------------------------------------------------------- 基础 */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
::placeholder{color:var(--faint)}
::selection{background:#dbeafe;color:var(--brand-3)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* 滚动条：不抢视线，悬停才明显 */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#dbe0e8;border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#c3cad6;background-clip:content-box}

/* ---------------------------------------------------------------- 按钮 */

button{
  font:inherit;cursor:pointer;color:var(--text);
  background:#fff;border:1px solid var(--line);
  padding:8px 13px;border-radius:var(--r-sm);
  box-shadow:var(--sh-1);
  transition:background var(--t),border-color var(--t),box-shadow var(--t),
             color var(--t),transform var(--t);
}
button:hover{background:var(--card-2);border-color:var(--line-2)}
button:active{transform:translateY(1px);box-shadow:none}
button:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:var(--sh-1)}
button:disabled:hover{background:#fff;border-color:var(--line)}

button.primary{
  color:#fff;font-weight:500;
  background:linear-gradient(180deg,#3b74f0 0%,var(--brand) 100%);
  border-color:var(--brand-2);
  box-shadow:0 1px 2px rgba(37,99,235,.28),inset 0 1px 0 rgba(255,255,255,.16);
}
button.primary:hover{
  background:linear-gradient(180deg,#4a80f2 0%,var(--brand-2) 100%);
  border-color:var(--brand-3);
  box-shadow:0 2px 6px rgba(37,99,235,.32),inset 0 1px 0 rgba(255,255,255,.16);
}
button.primary:active{box-shadow:none}

button.danger{color:var(--err);border-color:var(--err-line)}
button.danger:hover{background:var(--err-soft);border-color:var(--err)}

button.ghost{
  background:transparent;border-color:transparent;box-shadow:none;color:var(--sub);
}
button.ghost:hover{background:var(--brand-soft);color:var(--brand);border-color:transparent}

/* ------------------------------------------------------------ 表单控件 */

/* 注意：这里不设 width。各页面按自己的场景决定——
   管理后台的表单要撑满，教师端的筛选下拉要按内容宽度，学生端的输入框靠 flex。 */
input,textarea,select{
  font:inherit;color:var(--text);
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:9px 11px;outline:none;
  transition:border-color var(--t),box-shadow var(--t),background var(--t);
}
input:hover,textarea:hover,select:hover{border-color:var(--line-2)}
input:focus,textarea:focus,select:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(37,99,235,.13);
}
input:disabled,textarea:disabled,select:disabled{background:var(--card-2);color:var(--faint)}

label{display:block;font-size:12.5px;color:var(--sub);margin:12px 0 5px;font-weight:500}

/* ------------------------------------------------------------ 容器/卡片 */

.card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:16px;margin-top:14px;
  box-shadow:var(--sh-2);
}
.card h2{
  font-size:14.5px;margin:0 0 13px;font-weight:600;
  display:flex;align-items:center;gap:7px;
}
/* h2 前的小竖条，让每个分区的标题更好扫读 */
.card h2::before{
  content:"";width:3px;height:14px;border-radius:2px;
  background:linear-gradient(180deg,#60a5fa,var(--brand));
  flex:0 0 auto;
}

/* ---------------------------------------------------------------- 指标卡 */

.kpi{
  position:relative;overflow:hidden;
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:14px 15px;
  box-shadow:var(--sh-2);
  transition:transform var(--t),box-shadow var(--t);
}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--sh-3)}
/* 左侧色条表示状态；无状态时是中性灰，不喧哗 */
.kpi::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--line-2);transition:background var(--t);
}
.kpi.good::before{background:linear-gradient(180deg,#34d399,var(--ok))}
.kpi.hot::before{background:linear-gradient(180deg,#fbbf24,var(--warn))}
.kpi.bad::before{background:linear-gradient(180deg,#f87171,var(--err))}
.kpi.info::before{background:linear-gradient(180deg,#60a5fa,var(--brand))}
.kpi .n{
  font-size:27px;font-weight:600;line-height:1.15;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.kpi .l{font-size:12.5px;color:var(--sub);margin-top:4px;line-height:1.45}
.kpi.good .n{color:var(--ok)}
.kpi.hot .n{color:var(--warn)}
.kpi.bad .n{color:var(--err)}
.kpi.info .n{color:var(--brand)}

/* ---------------------------------------------------------------- 表格 */

table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:10px 9px;border-bottom:1px solid var(--line)}
th{
  color:var(--sub);font-weight:600;font-size:12.5px;white-space:nowrap;
  background:var(--card-2);
}
thead tr:first-child th:first-child{border-top-left-radius:var(--r-sm)}
thead tr:first-child th:last-child{border-top-right-radius:var(--r-sm)}
tbody tr{transition:background var(--t)}
tbody tr:hover{background:var(--brand-soft)}
tbody tr:last-child td{border-bottom:none}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------- 状态标签/提示条 */

.pill,.badge{
  display:inline-block;padding:2px 9px;border-radius:999px;
  font-size:12px;border:1px solid;white-space:nowrap;line-height:1.6;
}
.pill.g,.badge.g{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line)}
.pill.y,.badge.y{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.pill.r,.badge.r{background:var(--err-soft);color:var(--err);border-color:var(--err-line)}
.pill.n,.badge.n{background:#f2f4f7;color:var(--sub);border-color:var(--line)}
.badge{margin-left:6px}

.alert{
  border-radius:var(--r-sm);padding:11px 14px;
  font-size:13.5px;border:1px solid;line-height:1.65;
}
.alert.g{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok)}
.alert.y{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn)}
.alert.r{background:var(--err-soft);border-color:var(--err-line);color:var(--err)}

code{background:#f2f4f7;padding:1.5px 6px;border-radius:var(--r-xs);
     font-family:var(--mono);font-size:12.5px;color:#3f4a5a}

/* ------------------------------------------------------------ 口令门弹层 */

.gate{
  position:fixed;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(244,246,250,.86);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.gate .box,.gate .panel{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r-xl);padding:26px;
  width:100%;max-width:370px;
  box-shadow:var(--sh-4);
  animation:pop .3s cubic-bezier(.34,1.28,.64,1);
}
@keyframes pop{
  from{opacity:0;transform:translateY(12px) scale(.97)}
  to{opacity:1;transform:none}
}
.gate h2{margin:0 0 5px;font-size:19px;letter-spacing:-.01em}
.gate input{margin-top:14px;padding:11px 12px}
.gate button{width:100%;margin-top:12px;padding:11px}

/* ---------------------------------------------------------------- 工具类 */

.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{justify-content:space-between}
.muted{color:var(--sub);font-size:13px}
.tips{color:var(--sub);font-size:12.5px;line-height:1.75}
.faint{color:var(--faint)}
.stack{display:flex;flex-direction:column}
.empty{
  padding:34px 16px;text-align:center;color:var(--faint);font-size:13px;
}

/* 尊重系统的"减少动态效果"设置 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}