/* =====================================================================
   智慧班主任 · 统一主题（对齐 index.php 设计语言）
   仅做「视觉升级」：覆盖各页面既有 class 的配色 / 圆角 / 阴影 / 字体，
   不改任何 HTML 结构与 PHP 逻辑，零功能风险。
   ===================================================================== */

:root{
  --ink:#0F1729; --ink2:#48566E; --ink3:#8A97AD;
  --brand:#3D5AFE; --brand2:#7C3AED; --brand-soft:#EEF1FF;
  --gold:#FF9F1C;  --gold-soft:#FFF4E3;
  --mint:#10B981;  --mint-soft:#E7F8F1;
  --rose:#F43F5E;  --rose-soft:#FFEDF0;
  --bg:#FFFFFF; --soft:#F5F7FC; --line:#E6EAF2; --deep:#0B1020;
  --r:16px; --rl:24px;
  --sh-s:0 2px 8px rgba(15,23,41,.05);
  --sh-m:0 12px 32px rgba(15,23,41,.08);
  --sh-l:0 32px 72px rgba(15,23,41,.14);
  --max:1180px;
  --bk-brand:#3D5AFE; --bk-brand2:#7C3AED;
}

/* ---------- 基础 ---------- */
*{-webkit-box-sizing:border-box;box-sizing:border-box}
body{
  font-family:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Source Han Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  background:#fff;
}
/* 仅作用于目标页（班级看板首页 body.bk-themed 保留原有紫色渐变） */
body:not(.bk-themed){
  background:
    radial-gradient(900px 520px at 92% -8%, rgba(124,58,237,.10), transparent 60%),
    radial-gradient(820px 480px at 4% 4%,   rgba(61,90,254,.10),  transparent 58%),
    radial-gradient(620px 380px at 60% 108%,rgba(255,159,28,.07),  transparent 62%),
    linear-gradient(180deg,#FBFCFF, #F5F7FC 42%, #EEF2FB);
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none}

/* ---------- 容器 ---------- */
.container{max-width:var(--max);margin:0 auto;padding:28px 24px}

/* =====================================================================
   页头 / 导航（玻璃拟态 sticky，呼应 index.php 的导航）
   ===================================================================== */
.page-head{
  position:sticky;top:0;z-index:60;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  margin-bottom:24px;padding:14px 22px;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
  border:1px solid var(--line);border-radius:var(--rl);
  box-shadow:var(--sh-s);
}
.page-head .brand-name{font-size:20px;font-weight:800;color:var(--brand);letter-spacing:-.01em}
.page-title{
  font-size:clamp(22px,2.6vw,32px);font-weight:800;letter-spacing:-.02em;line-height:1.2;
  background:linear-gradient(120deg,var(--brand),var(--brand2) 58%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.page-sub{color:var(--ink3);font-size:14px;margin-top:2px}

.page-header{
  position:sticky;top:0;z-index:60;margin-bottom:22px;padding:16px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
  border:1px solid var(--line);border-radius:var(--rl);box-shadow:var(--sh-s);
}
.brand-head .brand-name{font-size:19px;font-weight:800;color:var(--brand)}
.class-title{
  font-size:clamp(22px,2.6vw,32px);font-weight:800;letter-spacing:-.02em;line-height:1.2;
  background:linear-gradient(120deg,var(--brand),var(--brand2) 58%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.subtitle{color:var(--ink3);font-size:14px;margin-top:2px}

/* class_eval 顶栏（已是 sticky，升级为玻璃 + 渐变圆标） */
.topbar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 24px;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line);box-shadow:var(--sh-s);
}
.topbar .brand-mark{
  width:38px;height:38px;border-radius:11px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;
  box-shadow:0 6px 16px rgba(61,90,254,.32);
}
.title{font-size:20px;font-weight:800;color:var(--ink)}
.title small{font-weight:500;color:var(--ink3);font-size:13px;margin-left:6px}

/* =====================================================================
   统计卡（数字渐变 + 顶部高亮条 + 悬浮抬升）
   ===================================================================== */
.dash,.stats-grid{display:grid;gap:18px;margin-bottom:24px}
.dash{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stats-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}

.stat,.stat-card{
  position:relative;overflow:hidden;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--rl);
  padding:22px 20px;box-shadow:var(--sh-m);
  transition:.3s cubic-bezier(.4,0,.2,1);
}
.stat::before,.stat-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  transform:scaleX(0);transform-origin:left;transition:transform .35s;
}
.stat:hover,.stat-card:hover{transform:translateY(-4px);box-shadow:var(--sh-l)}
.stat:hover::before,.stat-card:hover::before{transform:scaleX(1)}
.stat .v,.stat-card .num{
  font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.1;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat .l,.stat-card .label{font-size:13.5px;color:var(--ink3);margin-top:8px;font-weight:500}

/* =====================================================================
   面板（白卡 + 大圆角 + 柔和阴影 + 标题左侧渐变竖条）
   ===================================================================== */
.panel{
  position:relative;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--rl);
  padding:24px 26px;box-shadow:var(--sh-m);margin-bottom:22px;
}
.panel h2,.panel h3{
  font-size:19px;font-weight:800;color:var(--ink);margin-bottom:16px;
  display:flex;align-items:center;gap:9px;
}
.panel h2::before,.panel h3::before{
  content:"";width:5px;height:20px;border-radius:3px;
  background:linear-gradient(180deg,var(--brand),var(--brand2));
  flex:0 0 auto;
}

/* 班级详情的「班级愿景 / 公约」卡片 */
.class-profile{
  background:#fff;border:1px solid var(--line);border-radius:var(--rl);
  padding:22px 26px;box-shadow:var(--sh-s);margin-bottom:20px;
}
.function-area{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  margin:18px 0;
}
.links-container a{
  display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;
  padding:9px 16px;border-radius:10px;border:1px solid var(--line);
  color:var(--brand);background:#fff;box-shadow:var(--sh-s);transition:.2s;
}
.links-container a:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--sh-m)}

/* =====================================================================
   高频项目 chips（胶囊 + 品牌底色）
   ===================================================================== */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--brand-soft);color:var(--brand);
  border-radius:999px;padding:7px 15px;font-size:13.5px;font-weight:600;border:1px solid transparent;
}
.chip .c{color:var(--ink3);font-weight:500;margin-left:4px}

/* =====================================================================
   名次徽章 r1/r2/r3（金 / 银 / 铜，带光晕）
   ===================================================================== */
.badge{
  width:28px;height:28px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;
  border:2px solid #fff;box-shadow:0 3px 8px rgba(15,23,41,.12);
}
.badge.r1{background:linear-gradient(135deg,#FFD43B,#FFB800);color:#7a4b00;box-shadow:0 4px 12px rgba(255,184,0,.45)}
.badge.r2{background:linear-gradient(135deg,#D9DEE7,#AEB6C2);color:#3b4252;box-shadow:0 4px 12px rgba(174,182,194,.45)}
.badge.r3{background:linear-gradient(135deg,#E8A87C,#C97B4A);color:#fff;box-shadow:0 4px 12px rgba(201,123,74,.45)}

/* =====================================================================
   荣誉墙 / 学生卡（卡片化 + 悬浮）
   ===================================================================== */
.honor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.honor-col{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--sh-s)}
.honor-col .hc-title{font-weight:800;color:var(--ink);margin-bottom:12px;text-align:center;font-size:15px}
.honor-item{display:flex;align-items:center;gap:10px;padding:10px 8px;border-bottom:1px dashed var(--line)}
.honor-item:last-child{border-bottom:none}
.honor-name{flex:1;font-size:15px;color:var(--ink);font-weight:500}
.honor-cnt{font-size:13px;color:var(--ink3)}

.student-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:16px;box-shadow:var(--sh-s);transition:.25s;position:relative;overflow:hidden;
}
.student-card:hover{transform:translateY(-4px);box-shadow:var(--sh-m);border-color:transparent}
.student-rank{font-size:13px;font-weight:800;color:var(--brand)}
.points-display{
  font-size:26px;font-weight:800;line-height:1.1;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.view-records-btn{
  display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
  padding:7px 14px;border-radius:999px;border:1px solid var(--line);
  color:var(--brand);background:var(--brand-soft);transition:.2s;
}
.view-records-btn:hover{transform:translateY(-1px);box-shadow:var(--sh-s)}

/* =====================================================================
   积分分布条
   ===================================================================== */
/* class.php 竖向柱状 */
.dist{display:flex;align-items:flex-end;gap:14px;height:150px;padding-top:10px}
.dist .col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.dist .bar{width:62%;background:linear-gradient(180deg,var(--brand),var(--brand2));border-radius:8px 8px 0 0;min-height:4px;box-shadow:0 4px 14px rgba(61,90,254,.28)}
.dist .cap{font-size:12px;color:var(--ink3);margin-top:6px}
.dist .num{font-size:12.5px;color:var(--ink);font-weight:700}
/* points_ranking 横向条 */
.dist-bar{flex:1;height:22px;background:#EEF1F8;border-radius:999px;overflow:hidden}
.dist-fill{height:100%;background:linear-gradient(90deg,var(--brand),var(--brand2));border-radius:999px}
.dist-val{width:48px;font-size:13.5px;color:var(--brand);font-weight:700}
.dist-label{width:56px;font-size:13.5px;color:var(--ink2);text-align:right}

/* =====================================================================
   工具条 / 切换 tab（胶囊，激活态渐变）
   ===================================================================== */
.period-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-bottom:22px;padding:14px 18px;
  background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:var(--r);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.period-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.period-label{font-size:14px;color:var(--ink3)}

.period-bar a,.behaviors a,.period a{
  font-size:14px;text-decoration:none;padding:8px 18px;border-radius:999px;
  border:1px solid var(--line);color:var(--ink2);background:#fff;
  font-weight:500;transition:.2s;
}
.period-bar a:hover,.behaviors a:hover,.period a:hover{border-color:var(--brand);color:var(--brand)}
.period-bar a.active,.behaviors a.active,.period a.active{
  background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;
  border-color:transparent;box-shadow:0 6px 16px rgba(61,90,254,.28);
}
.names-toggle{font-size:14px;text-decoration:none;padding:8px 16px;border-radius:999px;border:1px solid var(--line);color:var(--ink2);background:#fff;margin-left:6px;white-space:nowrap;transition:.2s}
.names-toggle:hover{border-color:var(--brand);color:var(--brand)}

.toolbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 22px;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--sh-s);
}
.subject-wrap select{
  font-size:14px;padding:9px 14px;border-radius:10px;border:1px solid var(--line);
  color:var(--ink);background:#fff;transition:.2s;
}
.subject-wrap select:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px var(--brand-soft)}

/* =====================================================================
   按钮（统一为 index.php 的渐变主按钮 / 幽灵按钮）
   ===================================================================== */
.head-actions a,.head-actions button,
.names-toggle,.btn-names,a.back,.self-form button{
  font-size:14px;font-weight:600;text-decoration:none;
  border-radius:10px;cursor:pointer;white-space:nowrap;transition:.25s cubic-bezier(.4,0,.2,1);
  border:1px solid var(--line);color:var(--ink2);background:#fff;padding:9px 16px;box-shadow:var(--sh-s);
}
.head-actions a:hover,.names-toggle:hover,.btn-names:hover,a.back:hover,.self-form button:hover{
  border-color:var(--brand);color:var(--brand);transform:translateY(-2px);box-shadow:var(--sh-m);
}
/* 危险：关闭 / 退出 */
.close-btn,.btn-close{
  color:#fff!important;border:none!important;
  background:linear-gradient(135deg,#FB7185,var(--rose))!important;
  box-shadow:0 8px 20px rgba(244,63,94,.28)!important;
}
.close-btn:hover,.btn-close:hover{filter:brightness(1.05);transform:translateY(-2px)}
/* 强调：快捷评价（金橙） */
.quick-eval-btn{
  display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;text-decoration:none;
  padding:9px 16px;border-radius:10px;border:none;color:#fff;
  background:linear-gradient(135deg,var(--gold),#FF7A18);
  box-shadow:0 8px 20px rgba(255,159,28,.3);transition:.25s;
}
.quick-eval-btn:hover{transform:translateY(-2px);filter:brightness(1.04)}
/* 评价页「+1 记一次」 */
.c-btn{
  width:100%;font-size:15px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand2))!important;
  border:none;border-radius:12px;padding:12px 0;cursor:pointer;
  box-shadow:0 10px 26px rgba(61,90,254,.3);transition:.25s;
}
.c-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(61,90,254,.4)}
.c-btn:active{filter:brightness(.95)}
.c-btn:disabled{opacity:.55;cursor:default;transform:none}
/* 查询表单提交（品牌渐变） */
.self-form button{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;border:none}
.self-form input{padding:11px 15px;border:2px solid var(--line);border-radius:11px;font-size:.95rem;min-width:220px;transition:.2s}
.self-form input:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px var(--brand-soft)}

/* =====================================================================
   表格（聚合看板「查询我的积分」）
   ===================================================================== */
table.mini{width:100%;border-collapse:collapse;margin-top:8px;border-radius:12px;overflow:hidden}
table.mini th,table.mini td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:14px}
table.mini th{color:var(--ink3);font-size:12.5px;font-weight:700;background:var(--brand-soft);letter-spacing:.02em}
table.mini tr:last-child td{border-bottom:none}
table.mini tbody tr:hover{background:var(--soft)}

/* 个人查询卡 */
.self-card{
  background:linear-gradient(135deg,var(--brand-soft),#fff 60%,var(--gold-soft));
  border:1px solid var(--line);border-radius:var(--rl);padding:24px;box-shadow:var(--sh-m);
}
.self-top .big{
  font-size:32px;font-weight:800;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.self-top .rank{font-size:16px;color:var(--gold);font-weight:700}

/* 返回链接（聚合看板页首） */
a.back{
  display:inline-block;margin-bottom:20px;color:var(--brand);
  background:#fff;padding:8px 18px;border-radius:10px;box-shadow:var(--sh-s);font-weight:600;
}
a.back:hover{transform:translateY(-2px);box-shadow:var(--sh-m);color:var(--brand2)}

/* =====================================================================
   杂项文字
   ===================================================================== */
.compliance{font-size:12.5px;color:var(--ink3);margin-top:18px;text-align:center}
.compliance-note{background:var(--mint-soft);color:#047857;border:1px solid #BBF0DB;border-radius:12px;padding:12px 18px;font-size:13px;margin-bottom:18px}
.muted{color:var(--ink3);font-size:13px}
.msg{color:var(--rose);font-size:14px;margin:10px 0}
.empty,.empty-tip{color:var(--ink3);font-size:14px;text-align:center;padding:30px 0}

/* =====================================================================
   班级看板首页（body.bk-themed，保留紫底，仅打磨卡片）
   ===================================================================== */
.bk-themed .header h1{text-shadow:0 2px 16px rgba(0,0,0,.25)}
.bk-themed .class-card{border-radius:var(--rl);box-shadow:0 12px 40px rgba(0,0,0,.18)}
.bk-themed .class-card:hover{transform:translateY(-6px);box-shadow:0 20px 52px rgba(0,0,0,.24)}
.bk-themed .class-name{color:var(--ink)}

/* =====================================================================
   响应式
   ===================================================================== */
@media (max-width:640px){
  .container{padding:18px 14px}
  .page-head{grid-template-columns:1fr;gap:10px;text-align:center;padding:14px}
  .page-head .left,.page-head .head-actions{justify-content:center}
  .page-header,.topbar{padding:12px 16px}
  .panel{padding:20px 18px}
  .stat .v,.stat-card .num{font-size:28px}
}