/* CheckEase 教务后台 · 商用设计系统 v2（深色沉稳 header + 靛蓝 indigo + slate 中性）
   主题：:root = 浅色（默认）· html[data-theme="dark"] = 深色。所有表面色走语义令牌，切换只换令牌值。*/
:root {
  color-scheme:light;
  --indigo:#6366f1; --indigo-d:#4f46e5; --indigo-l:#eef2ff; --indigo-400:#818cf8;
  --accent:#4f46e5;                          /* 卡面上的靛蓝文字/链接 */
  --ink:#0f172a; --ink-2:#1e293b;            /* 深色 header */
  --bg:#f1f5f9; --card:#ffffff;
  --line:#e2e8f0; --line-2:#cbd5e1;
  --text:#1e293b; --muted:#64748b; --faint:#94a3b8;
  --ok:#059669; --ok-bg:#d1fae5;
  --warn:#b45309; --warn-bg:#fef3c7;
  --danger:#dc2626; --danger-bg:#fee2e2;
  --purple:#9333ea; --purple-bg:#f3e8ff;
  --sky:#0284c7; --sky-bg:#e0f2fe;
  /* —— 语义表面令牌（主题切换收口）—— */
  --th-bg:#f8fafc;      /* 表头底 */
  --hover:#f8fafc;      /* 行 / ghost hover 底 */
  --td-line:#eef2f6;    /* 单元格内分隔线 */
  --input-bg:#ffffff;   /* 输入框底 */
  --slate-bg:#f1f5f9;   /* slate 胶囊 / off 标签底 */
  --nav-a:#111c34; --nav-b:#0f172a;          /* 顶栏渐变（明暗都深）*/
  --danger-line:#fecaca; --warn-line:#fde68a;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.07);
  --shadow-lg:0 10px 25px -5px rgba(16,24,40,.15);
}

/* ===== 深色主题（沉稳石板蓝 · 顶栏更深以与页面分层）===== */
html[data-theme="dark"] {
  color-scheme:dark;
  --indigo:#6366f1; --indigo-d:#4f46e5; --indigo-l:rgba(129,140,248,.16); --indigo-400:#818cf8;
  --accent:#a5b4fc;
  --ink:#0b1220; --ink-2:#e5e9f0;
  --bg:#0b1220; --card:#151d2e;
  --line:#26324a; --line-2:#384761;
  --text:#e5e9f0; --muted:#93a1b8; --faint:#6b7a93;
  --ok:#34d399; --ok-bg:rgba(16,185,129,.16);
  --warn:#fbbf24; --warn-bg:rgba(251,191,36,.15);
  --danger:#f87171; --danger-bg:rgba(248,113,113,.15);
  --purple:#c084fc; --purple-bg:rgba(192,132,252,.15);
  --sky:#38bdf8; --sky-bg:rgba(56,189,248,.15);
  --th-bg:#1a2336; --hover:#1d2840; --td-line:#222d44; --input-bg:#0f1828; --slate-bg:#1d2840;
  --nav-a:#0c1424; --nav-b:#080e1a;
  --danger-line:#7f1d1d; --warn-line:#78580f;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.4);
  --shadow-lg:0 12px 28px -6px rgba(0,0,0,.6);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important;
           margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important;
           white-space:nowrap!important; border:0!important; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
       background:var(--bg); color:var(--text); }
[hidden] { display:none!important; }
.decorative-icon { display:inline-flex; }
html:not([data-admin-icons="on"]) .decorative-icon { display:none!important; }

/* ===== 顶部导航（深色沉稳）===== */
nav.top { background:linear-gradient(180deg,var(--nav-a),var(--nav-b)); color:#e2e8f0;
          display:flex; align-items:center; gap:6px; padding:0 22px; height:58px;
          box-shadow:0 1px 0 rgba(255,255,255,.04), 0 2px 10px rgba(0,0,0,.18); position:sticky; top:0; z-index:20; }
nav.top .brand { display:flex; align-items:center; gap:9px; font-size:16px; font-weight:700;
                 color:#fff; margin-right:20px; letter-spacing:.5px; }
nav.top .brand .logo { width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
                 background:linear-gradient(135deg,#34d399,#10b981); color:#fff; font-size:15px; font-weight:900;
                 box-shadow:0 2px 6px rgba(16,185,129,.4); }
nav.top .brand .sub { color:#94a3b8; font-weight:500; font-size:13px; }
nav.top .tabs { display:flex; gap:2px; overflow-x:auto; }
nav.top a.tab { color:#cbd5e1; text-decoration:none; padding:8px 13px; font-size:14px; font-weight:500;
                border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; transition:.15s; border-radius:6px 6px 0 0; }
nav.top a.tab:hover { color:#fff; background:rgba(255,255,255,.06); }
nav.top a.tab.on { color:#fff; border-bottom-color:var(--indigo-400); background:rgba(129,140,248,.12); }
nav.top a.tab .ic { margin-right:5px; }
nav.top .sp { flex:1; }
nav.top .me { display:flex; align-items:center; gap:8px; color:#cbd5e1; font-size:13px; margin-right:6px; }
nav.top .me .av { width:26px; height:26px; border-radius:50%; background:rgba(129,140,248,.2);
                  display:grid; place-items:center; font-size:14px; }
nav.top .me .rolep { font-size:11px; padding:1px 7px; border-radius:999px; background:rgba(147,51,234,.25); color:#e9d5ff; }
nav.top .logout { background:rgba(255,255,255,.08); color:#e2e8f0; border:1px solid rgba(255,255,255,.15);
                  border-radius:8px; padding:6px 14px; font-size:13px; cursor:pointer; }
nav.top .logout:hover { background:rgba(255,255,255,.16); }

/* ===== 布局 ===== */
.wrap { width:100%; max-width:1100px; margin:0 auto; padding:26px 22px; }
.wrap.wide { max-width:1500px; }
h2 { font-size:22px; margin:0 0 4px; letter-spacing:.3px; }
.hint { color:var(--muted); font-size:13px; margin-bottom:18px; }

/* ===== 卡片 ===== */
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 20px;
        box-shadow:var(--shadow); margin-bottom:18px; }
.card h3 { margin:0 0 14px; font-size:15px; font-weight:600; display:flex; align-items:center; gap:8px;
           padding-left:11px; border-left:3px solid var(--indigo); }

/* ===== 表格（立体表头）===== */
table { width:100%; border-collapse:separate; border-spacing:0; font-size:14px; }
thead th { text-align:left; font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--muted);
           text-transform:uppercase; background:var(--th-bg); padding:11px 10px;
           border-top:1px solid var(--line); border-bottom:2px solid var(--line-2); white-space:nowrap; }
thead th:first-child { border-left:1px solid var(--line); border-top-left-radius:10px; }
thead th:last-child { border-right:1px solid var(--line); border-top-right-radius:10px; }
tbody td { padding:11px 14px; border-bottom:1px solid var(--td-line); }
tbody tr:hover { background:var(--hover); }
tbody tr:last-child td { border-bottom:none; }

/* ===== 行内头像 ===== */
.avatar { display:inline-flex; align-items:center; gap:9px; }
.avatar .chip { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; font-size:17px;
                background:var(--indigo-l); flex:0 0 auto; }
.avatar .nm { font-weight:600; }
.avatar .sub { font-size:12px; color:var(--faint); }

/* ===== 胶囊 / 徽章 ===== */
.pill { display:inline-flex; align-items:center; gap:3px; padding:3px 10px; border-radius:999px;
        font-size:12px; font-weight:600; line-height:1.4; }
.pill.indigo { background:var(--indigo-l); color:var(--accent); }
.pill.purple { background:var(--purple-bg); color:var(--purple); }
.pill.sky { background:var(--sky-bg); color:var(--sky); }
.pill.green, .tag { background:var(--ok-bg); color:var(--ok); display:inline-flex; align-items:center;
                    padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; }
.pill.amber { background:var(--warn-bg); color:var(--warn); }
.pill.red { background:var(--danger-bg); color:var(--danger); }
.pill.slate, .tag.off { background:var(--slate-bg); color:var(--muted); }

/* ===== 按钮 ===== */
button, .btn { font-family:inherit; }
.btn { display:inline-flex; align-items:center; gap:5px; border:none; border-radius:9px; padding:9px 16px;
       font-size:14px; font-weight:600; cursor:pointer; transition:.15s;
       background:linear-gradient(135deg,var(--indigo),var(--indigo-d)); color:#fff;
       box-shadow:0 1px 2px rgba(79,70,229,.25); }
.btn:hover { filter:brightness(1.06); box-shadow:0 3px 10px rgba(79,70,229,.32); }
.btn:active { transform:translateY(1px); }
.btn:disabled { background:#cbd5e1; box-shadow:none; cursor:not-allowed; filter:none; }
.btn.sm { padding:6px 11px; font-size:13px; border-radius:8px; }
.btn.ghost { background:var(--card); color:var(--text); border:1px solid var(--line-2); box-shadow:none; }
.btn.ghost:hover { background:var(--hover); filter:none; box-shadow:none; }
.btn.danger { background:var(--card); color:var(--danger); border:1px solid var(--danger-line); box-shadow:none; }
.btn.danger:hover { background:var(--danger-bg); filter:none; }
.btn.warn { background:var(--card); color:var(--warn); border:1px solid var(--warn-line); box-shadow:none; }

a.link { color:var(--accent); text-decoration:none; font-weight:600; }
a.link:hover { text-decoration:underline; }

/* ===== 表单 ===== */
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
input, select { padding:9px 11px; border:1px solid var(--line-2); border-radius:9px; font-size:14px;
                font-family:inherit; background:var(--input-bg); color:var(--text); transition:.15s; }
input:focus, select:focus { outline:none; border-color:var(--indigo); box-shadow:0 0 0 3px rgba(99,102,241,.15); }
label.fld { display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--muted); font-weight:500; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid2 > * { min-width:0; }

/* ===== 统计卡 ===== */
.stat { display:inline-flex; flex-direction:column; gap:2px; background:var(--card); border:1px solid var(--line);
        border-radius:14px; padding:18px 26px; margin-right:14px; box-shadow:var(--shadow); position:relative; overflow:hidden; }
.stat::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,var(--indigo),var(--indigo-d)); }
.stat .n { font-size:30px; font-weight:800; color:var(--ink-2); letter-spacing:.5px; }
.stat .l { font-size:13px; color:var(--muted); }

/* ===== 模态框 ===== */
.mask { position:fixed; inset:0; background:rgba(15,23,42,.5); display:none; align-items:center;
        justify-content:center; z-index:40; padding:24px; backdrop-filter:blur(2px); overflow-y:auto; }
.mask.show { display:flex; }
body.modal-open { overflow:hidden; }   /* 弹窗打开锁背景滚动 */
.modal { background:var(--card); border-radius:18px; padding:22px; width:100%; max-width:460px; box-shadow:var(--shadow-lg);
         max-height:90vh; overflow-y:auto; overscroll-behavior:contain; }
.modal h3 { margin:0 0 14px; font-size:17px; }
.mbtns { display:flex; gap:10px; margin-top:14px; }
.mbtns button { flex:1; padding:11px; border-radius:10px; font-size:15px; border:1px solid var(--line-2);
                background:var(--card); color:var(--text); cursor:pointer; }
.mbtns button.primary { background:linear-gradient(135deg,var(--indigo),var(--indigo-d)); color:#fff; border:none; font-weight:600; }

/* ===== 分页条 ===== */
.pager { display:flex; align-items:center; justify-content:flex-end; gap:14px; margin-top:14px;
         font-size:13px; color:var(--muted); flex-wrap:wrap; }
.pager .psize { padding:4px 8px; font-size:13px; border-radius:7px; }
.pager .btn.sm { padding:5px 12px; }
.pager label { display:flex; align-items:center; gap:5px; }

/* ===== 表格横向滚动 + 不换行 ===== */
.tbl-scroll { overflow-x:auto; }
td.ccourse { max-width:160px; white-space:normal; word-break:break-word; line-height:1.3; }
td.ccourse a { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.actions { display:inline-flex; gap:6px; white-space:nowrap; }
.nowrap, td.nowrap { white-space:nowrap; }

/* 操作列固定在横向滚动区域右侧，长表格滚动时仍保持可用。 */
table.has-ops { min-width:max-content; }
table.has-ops thead th:last-child,
table.has-ops tbody td:last-child:not([colspan]) {
  position:sticky;
  right:0;
  min-width:160px;
  white-space:nowrap;
  border-left:1px solid var(--line-2);
  box-shadow:-8px 0 14px -12px rgba(15,23,42,.6);
}
table.has-ops thead th:last-child {
  z-index:4;
  background:var(--th-bg);
}
table.has-ops tbody td:last-child:not([colspan]) {
  z-index:2;
  background:var(--card);
}
table.has-ops tbody tr:hover td:last-child:not([colspan]) { background:var(--hover); }

.muted { color:var(--muted); }
.toast { position:fixed; left:50%; top:16%; transform:translateX(-50%); background:rgba(15,23,42,.92);
         color:#fff; padding:12px 20px; border-radius:11px; font-size:14px; display:none; z-index:50;
         box-shadow:var(--shadow-lg); }

/* ===== 右上角用户菜单（外观主题 + 登出）===== */
.usermenu { position:relative; }
.utrigger { display:flex; align-items:center; gap:7px; background:rgba(255,255,255,.08);
            border:1px solid rgba(255,255,255,.14); color:#e2e8f0; border-radius:9px;
            padding:6px 11px; font-size:13px; font-family:inherit; cursor:pointer; transition:.15s; }
.utrigger:hover { background:rgba(255,255,255,.16); }
.utrigger .av { width:24px; height:24px; border-radius:50%; background:rgba(129,140,248,.25);
                display:grid; place-items:center; font-size:13px; flex:0 0 auto; }
.utrigger .uname { max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.utrigger .ucaret { font-size:11px; color:#94a3b8; transition:transform .15s; }
.usermenu.open .utrigger .ucaret { transform:rotate(180deg); }
.udrop { position:absolute; right:0; top:calc(100% + 9px); min-width:236px; background:var(--card);
         border:1px solid var(--line); border-radius:13px; box-shadow:var(--shadow-lg); padding:10px;
         display:none; z-index:30; color:var(--text); }
.usermenu.open .udrop { display:block; }
.udrop .usec { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
               color:var(--faint); padding:2px 4px 9px; }
.useg { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; background:var(--bg);
        border:1px solid var(--line); border-radius:10px; padding:3px; }
.useg button { border:none; background:transparent; color:var(--muted); font-family:inherit;
               font-size:12px; font-weight:600; padding:8px 4px; border-radius:7px; cursor:pointer;
               display:flex; flex-direction:column; align-items:center; gap:4px; transition:.12s; line-height:1; }
.useg button:hover { color:var(--text); }
.useg button.on { background:var(--card); color:var(--accent); box-shadow:var(--shadow); }
.useg button span { font-size:12px; }
.udiv { height:1px; background:var(--line); margin:10px 2px; }
.uitem { display:flex; align-items:center; gap:8px; width:100%; border:none; background:transparent;
         color:var(--text); font-family:inherit; font-size:14px; font-weight:500; padding:9px 8px;
         border-radius:8px; cursor:pointer; text-align:left; }
.uitem:hover { background:var(--hover); }
a.uitem { text-decoration:none; box-sizing:border-box; }

/* 图标关闭时，快捷入口和统计卡自动收口，不保留图标占位。 */
html:not([data-admin-icons="on"]) .tile,
html:not([data-admin-icons="on"]) .avatar { gap:0; }

@media (max-width:720px) {
  nav.top { height:auto; min-height:58px; padding:8px 12px 0; flex-wrap:wrap; align-content:flex-start; }
  nav.top .brand { flex:1; min-width:0; margin-right:4px; font-size:14px; white-space:nowrap; }
  nav.top .sp { display:none; }
  nav.top .usermenu { flex:0 1 auto; min-width:0; }
  nav.top .utrigger { max-width:180px; }
  nav.top .utrigger .uname { max-width:140px; }
  nav.top .tabs { order:3; flex:0 0 calc(100% + 24px); margin:0 -12px; padding:0 12px;
                  min-width:0; height:42px; align-items:stretch; scrollbar-width:none; }
  nav.top .tabs::-webkit-scrollbar { display:none; }
  nav.top a.tab { display:flex; align-items:center; padding:8px 12px; margin-bottom:0; }
  .wrap { padding:22px 14px; }
  .grid2 { grid-template-columns:1fr; }
}