/* ==========================================================================
   授权系统 · v2 界面  深色侧栏 + 浅色内容区
   重点：侧边栏固定定位、互不干扰的独立滚动
   ========================================================================== */
:root{
  --bg:#f4f6fb; --surface:#fff; --surface-2:#fafbfe; --surface-3:#f2f5fb;
  --border:#e7ebf3; --border-strong:#d8dfec;
  --text:#16203a; --text-2:#5a6684; --text-3:#8d97ae;
  --primary:#4f6bf6; --primary-600:#3d59e8; --primary-700:#3348c9;
  --primary-soft:#eef1fe; --primary-ring:rgba(79,107,246,.18);
  --success:#12b76a; --success-soft:#e6f8ef;
  --warning:#f79009; --warning-soft:#fff4e5;
  --danger:#f04438;  --danger-soft:#fdeceb;
  --info:#3a8bfd;    --info-soft:#eaf2fe;
  --violet:#8b5cf6;  --violet-soft:#f2edfe;
  --radius:16px; --radius-md:12px; --radius-sm:10px; --radius-xs:8px;
  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow-sm:0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  --shadow:0 1px 3px rgba(16,24,40,.05), 0 10px 28px -10px rgba(16,24,40,.16);
  --shadow-lg:0 24px 48px -16px rgba(16,24,40,.28);
  --sidebar-w:250px;
  --sidebar-bg:linear-gradient(180deg,#1b2544 0%,#131a30 100%);
  --font:system-ui,-apple-system,"Segoe UI","Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"Cascadia Mono",Consolas,"Liberation Mono",monospace;
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ font-family:var(--font); background:var(--bg); color:var(--text);
  font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:650; letter-spacing:-.01em; }
p{ margin:0; } code{ font-family:var(--mono); font-size:12px; }
input,select,textarea,button{ font-family:inherit; }
::selection{ background:var(--primary-ring); }

/* ==========================================================================
   外壳 —— 侧边栏 fixed，内容区独立滚动
   ========================================================================== */
.app{ min-height:100vh; }

.sidebar{
  position:fixed; top:0; left:0; bottom:0; z-index:60;
  width:var(--sidebar-w);
  background:var(--sidebar-bg);
  color:#c8d0e6;
  display:flex; flex-direction:column;
  /* 关键：整条侧栏永不随页面滚动 */
  overflow:hidden;
}
/* 品牌区固定不滚 */
.sidebar-brand{
  flex:0 0 auto; display:flex; align-items:center; gap:11px;
  padding:20px 16px 16px; border-bottom:1px solid rgba(255,255,255,.07);
}
.brand-mark{ width:38px; height:38px; border-radius:11px; flex:0 0 38px;
  background:linear-gradient(140deg,#5b7bff,#7c5cff 55%,#a855f7);
  display:grid; place-items:center; box-shadow:0 6px 18px -6px rgba(91,123,255,.85); }
.brand-mark svg{ width:21px; height:21px; }
.brand-text b{ display:block; color:#fff; font-size:15.5px; line-height:1.3; }
.brand-text span{ display:block; font-size:10.5px; color:#7c88a8; letter-spacing:.1em; }

/* 关键：只有菜单区滚动 */
.sidebar-scroll{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain;
  padding:10px 14px 16px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.22) transparent;
}
.sidebar-scroll::-webkit-scrollbar{ width:8px; }
.sidebar-scroll::-webkit-scrollbar-track{ background:transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.16); border-radius:8px;
  border:2px solid transparent; background-clip:content-box;
}
.sidebar-scroll::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.3); background-clip:content-box; }

.sidebar-foot{
  flex:0 0 auto; border-top:1px solid rgba(255,255,255,.08);
  padding:13px 20px 15px; font-size:11.5px; color:#5d6884;
}
.sidebar-foot .dot{ display:inline-block; width:6px; height:6px; border-radius:50%;
  background:#12b76a; margin-right:6px; box-shadow:0 0 0 3px rgba(18,183,106,.18); }

.nav-label{ font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:#5d6884; padding:14px 12px 7px; font-weight:600; }
.nav{ display:flex; flex-direction:column; gap:3px; }
.nav a{ display:flex; align-items:center; gap:11px; padding:10px 12px;
  border-radius:var(--radius-sm); color:#a9b4cd; font-weight:500; font-size:13.5px;
  position:relative; transition:.16s ease; }
.nav a svg{ width:17px; height:17px; flex:0 0 17px; opacity:.82; }
.nav a:hover{ background:rgba(255,255,255,.06); color:#e8ecf7; }
.nav a.active{ background:linear-gradient(90deg,rgba(91,123,255,.3),rgba(91,123,255,.07)); color:#fff; }
.nav a.active svg{ opacity:1; }
.nav a.active::before{ content:""; position:absolute; left:-14px; top:9px; bottom:9px;
  width:3px; border-radius:0 3px 3px 0; background:linear-gradient(180deg,#7c9bff,#a78bfa); }
.nav .pill{ margin-left:auto; background:rgba(255,255,255,.14); color:#dfe5f5;
  font-size:11px; padding:1px 7px; border-radius:20px; font-weight:600; font-style:normal; }
.nav .pill.hot{ background:rgba(240,68,56,.9); color:#fff; }

/* 内容区让出侧栏宽度 */
.main{ margin-left:var(--sidebar-w); min-width:0; display:flex; flex-direction:column; }

.topbar{ height:66px; flex:0 0 66px; background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:14px; padding:0 26px;
  position:sticky; top:0; z-index:40; }
.crumb{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-3); }
.crumb b{ color:var(--text); font-weight:600; font-size:15px; }
.crumb .sep{ color:#c3cad9; }
.topbar .spacer{ margin-left:auto; }
.search{ display:flex; align-items:center; gap:8px; background:var(--surface-3);
  border:1px solid transparent; border-radius:999px; padding:7px 14px; width:236px; color:var(--text-3); }
.search svg{ width:16px; height:16px; flex:0 0 16px; }
.search input{ border:0; background:none; outline:0; font-size:13.5px; width:100%; color:var(--text); }
.icon-btn{ width:36px; height:36px; border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--surface); display:grid; place-items:center; cursor:pointer; color:var(--text-2);
  transition:.15s ease; }
.icon-btn:hover{ background:var(--surface-3); color:var(--text); }
.icon-btn svg{ width:17px; height:17px; }
.avatar{ display:flex; align-items:center; gap:9px; padding:4px 12px 4px 4px;
  border:1px solid var(--border); border-radius:999px; background:var(--surface); }
.avatar .img{ width:28px; height:28px; border-radius:50%;
  background:linear-gradient(140deg,#5b7bff,#a855f7); color:#fff;
  display:grid; place-items:center; font-size:12px; font-weight:700; }
.avatar span{ font-size:13px; font-weight:600; }
.content{ padding:26px; max-width:1560px; width:100%; }

/* 页头 */
.page-head{ display:flex; align-items:flex-end; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.page-head h1{ font-size:22px; }
.page-head .sub{ color:var(--text-2); font-size:13px; margin-top:3px; }
.page-head .actions{ margin-left:auto; display:flex; gap:10px; }

/* 卡片 */
.card{ background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-sm); margin-bottom:20px; overflow:hidden; }
.card-head{ padding:16px 20px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.card-head h3{ font-size:15px; }
.card-head .desc{ font-size:12.5px; color:var(--text-3); margin-top:2px; }
.card-head .right{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.card-body{ padding:20px; }

/* 统计卡 */
.stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:20px; }
.stat{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; }
.stat::after{ content:""; position:absolute; right:-30px; top:-30px; width:96px; height:96px;
  border-radius:50%; background:var(--primary-soft); opacity:.7; }
.stat .ico{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  margin-bottom:14px; position:relative; z-index:1; }
.stat .ico svg{ width:19px; height:19px; }
.stat .lbl{ color:var(--text-2); font-size:13px; position:relative; z-index:1; }
.stat .val{ font-size:30px; font-weight:700; letter-spacing:-.02em; margin-top:4px;
  position:relative; z-index:1; font-variant-numeric:tabular-nums; }
.stat .foot{ font-size:12px; color:var(--text-3); margin-top:6px; position:relative; z-index:1; }
.i-blue{ background:var(--primary-soft); color:var(--primary); }
.i-green{ background:var(--success-soft); color:var(--success); }
.i-amber{ background:var(--warning-soft); color:var(--warning); }
.i-red{ background:var(--danger-soft); color:var(--danger); }
.i-violet{ background:var(--violet-soft); color:var(--violet); }
.i-info{ background:var(--info-soft); color:var(--info); }
.i-grey{ background:var(--surface-3); color:var(--text-2); }

/* 按钮 */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 15px; border-radius:var(--radius-sm); border:1px solid var(--border-strong);
  background:var(--surface); color:var(--text); font-weight:600; font-size:13.5px;
  cursor:pointer; transition:.15s ease; white-space:nowrap; line-height:1.4; }
.btn svg{ width:16px; height:16px; flex:0 0 16px; }
.btn:hover{ border-color:#c3cde0; background:var(--surface-2); }
.btn-primary{ background:linear-gradient(180deg,var(--primary),var(--primary-600));
  border-color:var(--primary-600); color:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.1),0 8px 20px -10px rgba(79,107,246,.8); }
.btn-primary:hover{ filter:brightness(1.06); background:linear-gradient(180deg,var(--primary),var(--primary-600)); }
.btn-ghost{ border-color:transparent; background:transparent; color:var(--text-2); }
.btn-ghost:hover{ background:var(--surface-3); color:var(--text); }
.btn-danger{ border-color:#f6c6c2; color:var(--danger); background:var(--danger-soft); }
.btn-danger:hover{ background:#fbdcd9; border-color:#f0a9a3; }
.btn-success{ border-color:#a9e7c9; color:#05794a; background:var(--success-soft); }
.btn-sm{ padding:6px 10px; font-size:12.5px; border-radius:var(--radius-xs); }
.btn-sm svg{ width:14px; height:14px; }
.btn-block{ width:100%; padding:11px; }

/* 表格 */
.table-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:13.5px; }
thead th{ text-align:left; font-weight:600; font-size:11.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--text-3); background:var(--surface-2);
  padding:11px 12px; border-bottom:1px solid var(--border); white-space:nowrap; }
tbody td{ padding:12px; border-bottom:1px solid #f0f3f9; vertical-align:middle; }
tbody tr:last-child td{ border-bottom:0; }
tbody tr:hover{ background:var(--surface-2); }
td.num{ font-variant-numeric:tabular-nums; color:var(--text-2); }
/* 操作列：按钮允许折行，避免把其它列挤到换行 */
td.act-col{ white-space:normal; min-width:158px; }
td.act-col .btn{ margin:2px 0 2px 4px; }
/* 列多的表格：不再压扁换行，改为横向滚动 */
table.tbl-wide{ min-width:1100px; }
table.tbl-wide td.code-cell{ white-space:nowrap; font-size:11.5px; }
.cell-main{ font-weight:600; }
.cell-sub{ font-size:12px; color:var(--text-3); }
.mono{ font-family:var(--mono); font-size:12px; }
.nowrap{ white-space:nowrap; }
.th-nowrap{ white-space:nowrap; }
.ta-r{ text-align:right; }
.empty{ text-align:center; padding:52px 20px; color:var(--text-3); }
.empty svg{ width:42px; height:42px; opacity:.35; margin-bottom:10px; }

/* 开关（模态框内使用）；选择器需压过 .field label */
label.switch,
.field label.switch{ display:flex; align-items:center; gap:9px; cursor:pointer;
  font-weight:500; font-size:13.5px; color:var(--text-2); user-select:none; margin-bottom:0; }
label.switch input{ position:absolute; opacity:0; width:0; height:0; }
label.switch > span{ position:relative; display:inline-block; flex:0 0 40px; width:40px; height:22px;
  border-radius:999px; background:var(--border-strong); transition:.18s ease; }
label.switch > span::after{ content:""; position:absolute; top:3px; left:3px; width:16px; height:16px;
  border-radius:50%; background:#fff; box-shadow:var(--shadow-xs); transition:.18s ease; }
label.switch input:checked + span{ background:var(--primary); }
label.switch input:checked + span::after{ transform:translateX(18px); }
label.switch input:focus-visible + span{ outline:2px solid var(--primary-ring); outline-offset:2px; }

/* 徽标 */
.badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px;
  border-radius:999px; font-size:12px; font-weight:600; line-height:1.5; white-space:nowrap; }
.badge .d{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.b-green{ background:var(--success-soft); color:#05794a; }
.b-amber{ background:var(--warning-soft); color:#b45309; }
.b-red{ background:var(--danger-soft); color:#b42318; }
.b-blue{ background:var(--primary-soft); color:var(--primary-700); }
.b-grey{ background:var(--surface-3); color:var(--text-2); }
.b-violet{ background:var(--violet-soft); color:#6d28d9; }

/* 表单 */
.field{ margin-bottom:16px; }
.field label{ display:block; font-weight:600; font-size:13px; margin-bottom:7px; }
.field .hint{ font-size:12px; color:var(--text-3); margin-top:6px; }
.field .req{ color:var(--danger); }
.input,select.input,textarea.input{ width:100%; padding:10px 13px; font-size:13.5px;
  color:var(--text); background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--radius-sm); outline:0; transition:.15s ease; }
.input::placeholder{ color:#a9b2c6; }
.input:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-ring); }
.input-group{ display:flex; gap:10px; }
/* 下拉框：去掉系统原生外观，换成统一的自绘箭头 */
select.input{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  padding:10px 34px 10px 13px;
  background-color:var(--surface);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d97ae' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:11px 11px;
  cursor:pointer;
  text-overflow:ellipsis;
  white-space:nowrap;
}
select.input::-ms-expand{ display:none; }
select.input:hover{ border-color:#c2cbe0; background-color:var(--surface-2); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6684' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
select.input:focus{ border-color:var(--primary); background-color:var(--surface); box-shadow:0 0 0 3px var(--primary-ring); }
select.input:active{ background-color:var(--surface); }
select.input:disabled{ opacity:.6; cursor:not-allowed; background-color:var(--surface-3); border-color:var(--border); }
select.input option{ color:var(--text); background:#fff; font-size:13.5px; }
select.input option:disabled{ color:var(--text-3); }
select.input optgroup{ color:var(--text-3); font-size:12.5px; font-style:normal; font-weight:600; }
/* ---------- 自绘下拉框（替换系统原生列表） ---------- */
.cs-wrap{ position:relative; display:block; width:100%; }
.cs-wrap > select.cs-native{ position:absolute; left:0; top:0; width:100%; height:100%;
  margin:0; padding:0; border:0; opacity:0; pointer-events:none; z-index:0; }
.cs-btn{ display:flex; align-items:center; width:100%; text-align:left; font-family:inherit;
  padding:10px 34px 10px 13px; font-size:13.5px; line-height:1.45; color:var(--text);
  background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--radius-sm); cursor:pointer; outline:0; position:relative;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.cs-btn:hover{ border-color:#c2cbe0; background:var(--surface-2); }
.cs-btn:focus-visible{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-ring); }
.cs-btn.is-open{ border-color:var(--primary); background:var(--surface); box-shadow:0 0 0 3px var(--primary-ring); }
.cs-btn.is-dis{ opacity:.6; cursor:not-allowed; background:var(--surface-3); border-color:var(--border); }
.cs-btn.is-dis:hover{ border-color:var(--border); background:var(--surface-3); }
.cs-label{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-arrow{ position:absolute; right:12px; top:50%; width:11px; height:11px; margin-top:-5.5px;
  color:var(--text-3); pointer-events:none; transition:transform .18s ease, color .18s ease; }
.cs-btn.is-open .cs-arrow{ transform:rotate(180deg); color:var(--primary); }
.cs-panel{ position:fixed; z-index:250; box-sizing:border-box; padding:6px;
  max-height:288px; overflow-y:auto; overscroll-behavior:contain;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); box-shadow:var(--shadow-lg);
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .14s ease, transform .14s ease; }
.cs-panel.in{ opacity:1; transform:none; pointer-events:auto; }
.cs-opt{ display:flex; align-items:center; gap:8px; padding:9px 11px;
  border-radius:var(--radius-xs); font-size:13.5px; line-height:1.45; color:var(--text);
  cursor:pointer; user-select:none; transition:background-color .12s ease; }
.cs-opt-t{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-chk{ width:15px; height:15px; flex:0 0 15px; color:var(--primary); opacity:0; }
.cs-opt.is-act{ background:var(--surface-3); }
.cs-opt.is-sel{ color:var(--primary-700); font-weight:600; background:var(--primary-soft); }
.cs-opt.is-sel.is-act{ background:#e3e8fd; }
.cs-opt.is-sel .cs-chk{ opacity:1; }
.cs-opt.is-dis{ color:var(--text-3); cursor:not-allowed; }
.cs-opt.is-dis.is-act{ background:transparent; }
.cs-panel .cs-group{ padding:9px 11px 4px; font-size:12px; font-weight:600; color:var(--text-3); }
.cs-panel::-webkit-scrollbar{ width:8px; }
.cs-panel::-webkit-scrollbar-thumb{ background:#d7dced; border-radius:8px; }
.bulk-bar .cs-wrap{ width:auto; min-width:170px; }
.bulk-bar .cs-btn{ padding:7px 30px 7px 11px; font-size:13px; }
.bulk-bar .cs-arrow{ right:9px; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 16px; }
.form-actions{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }
.form-actions.right{ justify-content:flex-end; }

/* 提示条 */
.alert{ display:flex; gap:11px; padding:13px 16px; border-radius:var(--radius-md);
  font-size:13px; margin-bottom:16px; border:1px solid transparent; align-items:flex-start; }
.alert svg{ width:17px; height:17px; flex:0 0 17px; margin-top:2px; }
.alert b{ display:block; font-weight:650; }
.alert-success{ background:var(--success-soft); border-color:#b7ead1; color:#06693f; }
.alert-error{ background:var(--danger-soft); border-color:#f8cdc9; color:#a4231a; }
.alert-warn{ background:var(--warning-soft); border-color:#fbdcae; color:#8a5209; }
.alert-info{ background:var(--info-soft); border-color:#c3ddfd; color:#1a56a8; }

/* 分页 */
.pager{ display:flex; align-items:center; gap:6px; padding:16px 20px; border-top:1px solid var(--border); flex-wrap:wrap; }
.pager .info{ color:var(--text-3); font-size:12.5px; margin-right:auto; }
.pager a,.pager span{ min-width:32px; height:32px; padding:0 9px; border-radius:var(--radius-xs);
  display:inline-flex; align-items:center; justify-content:center; font-size:13px;
  font-weight:600; color:var(--text-2); border:1px solid transparent; }
.pager a:hover{ background:var(--surface-3); color:var(--text); }
.pager .cur{ background:var(--primary); color:#fff; }

/* Tabs */
.tabs{ display:inline-flex; gap:4px; padding:4px; background:var(--surface-3); border-radius:12px; }
.tabs a,.tabs button{ padding:8px 18px; border-radius:9px; font-weight:600; font-size:13.5px;
  color:var(--text-2); border:0; background:none; cursor:pointer; }
.tabs a.on,.tabs button.on{ background:var(--surface); color:var(--primary-700); box-shadow:var(--shadow-xs); }
.tabs-n{ display:inline-block; margin-left:7px; padding:1px 7px; border-radius:999px;
  background:var(--warning-soft); color:#b45309; font-size:11.5px; font-weight:700; }
.tabs a.on .tabs-n{ background:var(--primary-soft); color:var(--primary-700); }

/* 页面级子页签条 */
.subnav{ display:flex; align-items:center; gap:12px; margin:-6px 0 20px; flex-wrap:wrap; }
.subnav .tabs{ background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-xs); }
.subnav .tabs a.on{ background:var(--primary-soft); color:var(--primary-700); box-shadow:none; }

/* 应用筛选条 */
.filter-bar{ display:flex; align-items:center; gap:10px; padding:12px 16px;
  border-bottom:1px solid var(--border); background:var(--surface-2); flex-wrap:wrap; }
.filter-bar .fb-label{ font-size:12.5px; font-weight:600; color:var(--text-3); }
.filter-bar .tabs{ background:var(--surface-3); flex-wrap:wrap; }
.tabs.tabs-sm a,.tabs.tabs-sm button{ padding:6px 13px; font-size:12.5px; border-radius:8px; }
.tabs.tabs-sm .tabs-n{ margin-left:6px; padding:0 6px; font-size:11px; }

/* 表格勾选列 */
th.chk-col,td.chk-col{ width:40px; text-align:center; padding-left:14px; padding-right:0; }
th.chk-col input,td.chk-col input{ width:15px; height:15px; cursor:pointer; accent-color:var(--primary); }

/* 批量操作条 */
.bulk-bar{ display:none; align-items:center; gap:10px; padding:11px 16px;
  border-bottom:1px solid var(--border); background:var(--primary-soft); flex-wrap:wrap; }
.bulk-bar.on{ display:flex; }
.bulk-bar .bb-info{ font-size:13px; font-weight:600; color:var(--primary-700); }
.bulk-bar .bb-info b{ font-variant-numeric:tabular-nums; }
.bulk-bar select.input{ width:auto; min-width:170px; padding:7px 30px 7px 11px; font-size:13px; background-position:right 9px center; }
.bulk-bar .btn{ margin:0; }

/* 弹窗 */
.modal-mask{ display:none; position:fixed; inset:0; background:rgba(16,24,40,.45);
  backdrop-filter:blur(2px); z-index:200; }
.modal-mask.open{ display:block; }
.modal{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(560px,92vw); max-height:88vh; display:none; flex-direction:column;
  background:var(--surface); border-radius:18px; box-shadow:var(--shadow-lg); z-index:201; overflow:hidden; }
.modal.open{ display:flex; }
.modal-head{ padding:18px 22px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.modal-head h3{ font-size:16px; }
.modal-body{ padding:22px; overflow-y:auto; }
.modal-foot{ padding:15px 22px; border-top:1px solid var(--border); background:var(--surface-2);
  display:flex; gap:10px; justify-content:flex-end; flex:0 0 auto; flex-wrap:wrap; }

/* 代码块 */
pre.code{ background:#121a2e; color:#c9d6f2; padding:16px 18px; border-radius:var(--radius-md);
  overflow-x:auto; font-family:var(--mono); font-size:12.5px; line-height:1.7; margin:0; }
pre.code .cm{ color:#6b7a9c; }
/* ---------- 代码块复制按钮 ---------- */
.code-wrap{ position:relative; }
.code-wrap > pre.code{ padding-right:100px; }
.code-copy{ position:absolute; top:10px; right:10px; z-index:2;
  display:inline-flex; align-items:center; gap:5px; padding:5px 10px;
  font-family:inherit; font-size:12px; line-height:1.5; font-weight:600;
  color:#a9b6d6; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14); border-radius:8px;
  cursor:pointer; outline:0; transition:.15s ease; }
.code-copy svg{ width:13px; height:13px; flex:0 0 13px; }
.code-copy .i-done{ display:none; }
.code-copy:hover{ color:#e9eefc; background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.26); }
.code-copy:focus-visible{ box-shadow:0 0 0 3px rgba(122,152,255,.35); }
.code-copy.is-done{ color:#7ee0a4; border-color:rgba(126,224,164,.42); background:rgba(126,224,164,.12); }
.code-copy.is-done .i-done{ display:block; }
.code-copy.is-done .i-copy{ display:none; }
@media (max-width:640px){
  .code-wrap > pre.code{ padding-right:50px; }
  .code-copy span{ display:none; }
  .code-copy{ padding:6px; }
}
.chip{ font-family:var(--mono); font-size:12px; background:var(--surface-3);
  border:1px solid var(--border); padding:7px 12px; border-radius:9px; display:inline-block; }

/* ==========================================================================
   前台
   ========================================================================== */
.pub{ background:#0b1020; }
.pub-hero{ position:relative; overflow:hidden;
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(91,123,255,.34), transparent 60%),
    radial-gradient(760px 380px at 88% 0%, rgba(168,85,247,.26), transparent 62%),
    linear-gradient(180deg,#101733 0%,#0b1020 100%);
  padding:0 0 78px; }
.pub-nav{ max-width:1120px; margin:0 auto; padding:20px 28px;
  display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.pub-nav .brand{ display:flex; align-items:center; gap:11px; }
.pub-nav .links{ display:flex; gap:24px; margin-left:auto; }
.pub-nav .links a{ color:#a8b2cc; font-size:13.5px; font-weight:500; }
.pub-nav .links a:hover,.pub-nav .links a.on{ color:#fff; }
.btn-light{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.18); color:#fff; }
.btn-light:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.32); }
.hero-copy{ max-width:1120px; margin:34px auto 0; padding:0 28px; text-align:center; }
.hero-copy .tag{ display:inline-flex; align-items:center; gap:8px; padding:5px 13px;
  border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  color:#c9d3ee; font-size:12.5px; font-weight:600; }
.hero-copy .tag svg{ width:14px; height:14px; }
.hero-copy h1{ color:#fff; font-size:40px; line-height:1.25; margin:18px 0 14px; letter-spacing:-.02em; }
.hero-copy h1 em{ font-style:normal;
  background:linear-gradient(100deg,#7c9bff,#b98bff 60%,#f0abfc);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-copy p{ color:#98a4c4; font-size:15.5px; max-width:640px; margin:0 auto; }
.pub-wrap{ max-width:1120px; margin:-54px auto 0; padding:0 28px 60px; position:relative; z-index:2; }
.panel{ background:var(--surface); border-radius:20px; box-shadow:var(--shadow-lg);
  border:1px solid var(--border); overflow:hidden; }
.panel-head{ padding:18px 26px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.panel-body{ padding:26px; }
.tri{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px; }
.tri .t{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius); padding:20px; }
.tri .t .ico{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; margin-bottom:12px; }
.tri .t .ico svg{ width:18px; height:18px; }
.tri .t b{ color:#fff; display:block; font-size:14.5px; margin-bottom:5px; }
.tri .t span{ color:#98a4c4; font-size:13px; line-height:1.65; }
.pub-foot{ border-top:1px solid rgba(255,255,255,.08); padding:22px 28px;
  text-align:center; color:#6d7899; font-size:12.5px; }

/* 登录页 */
.login-page{ min-height:100vh; display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(760px 380px at 20% 0%, rgba(91,123,255,.16), transparent 60%),
    radial-gradient(700px 360px at 90% 100%, rgba(168,85,247,.14), transparent 60%),
    var(--bg); }
.login-card{ width:100%; max-width:404px; background:var(--surface);
  border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow-lg); padding:34px 32px 28px; }
.login-card .brand{ margin-bottom:22px; }
.login-card h2{ font-size:21px; margin-bottom:5px; }
.login-card .lead{ color:var(--text-2); font-size:13.5px; margin-bottom:24px; }
.login-foot{ margin-top:22px; padding-top:18px; border-top:1px solid var(--border);
  text-align:center; color:var(--text-3); font-size:12.5px; }

/* 响应式 */
@media (max-width:1180px){ .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px){
  :root{ --sidebar-w:0px; }
  .sidebar{ width:250px; transform:translateX(-100%); transition:transform .22s ease; }
  .sidebar.open{ transform:none; box-shadow:var(--shadow-lg); }
  .main{ margin-left:0; }
  .grid-3,.grid-2{ grid-template-columns:1fr; }
  .tri{ grid-template-columns:1fr; }
  .hero-copy h1{ font-size:29px; }
  .content{ padding:18px; }
  .topbar{ padding:0 16px; gap:10px; }
  .search{ display:none; }
}
@media (max-width:620px){ .stats{ grid-template-columns:1fr; } .avatar span{ display:none; } }

/* ==========================================================================
   Toast 通知
   ========================================================================== */
.toast-box{ position:fixed; top:22px; left:50%; transform:translateX(-50%);
  z-index:400; display:flex; flex-direction:column; gap:10px; align-items:center; pointer-events:none; }
.toast{ display:flex; align-items:center; gap:9px; padding:11px 18px; border-radius:12px;
  background:#1b2544; color:#fff; font-size:13.5px; font-weight:600;
  box-shadow:0 12px 32px -10px rgba(16,24,40,.5);
  opacity:0; transform:translateY(-10px) scale(.97); transition:.24s cubic-bezier(.2,.8,.3,1); }
.toast.in{ opacity:1; transform:none; }
.toast svg{ width:17px; height:17px; flex:0 0 17px; }
.toast-ok svg{ color:#4ade80; }
.toast-err svg{ color:#ff8a80; }

/* ==========================================================================
   自定义确认对话框
   ========================================================================== */
.cfm-mask{ position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:24px;
  background:rgba(16,24,40,.5); backdrop-filter:blur(3px);
  opacity:0; transition:.18s ease; }
.cfm-mask.in{ opacity:1; }
.cfm-box{ width:min(432px,100%); background:var(--surface); border-radius:18px;
  box-shadow:0 30px 60px -20px rgba(16,24,40,.45);
  transform:translateY(10px) scale(.97); transition:.2s cubic-bezier(.2,.8,.3,1); overflow:hidden; }
.cfm-mask.in .cfm-box{ transform:none; }
.cfm-head{ display:flex; gap:14px; padding:22px 24px 18px; align-items:flex-start; }
.cfm-ico{ width:40px; height:40px; flex:0 0 40px; border-radius:12px; display:grid; place-items:center; }
.cfm-ico svg{ width:20px; height:20px; }
.cfm-danger{ background:var(--danger-soft); color:var(--danger); }
.cfm-normal{ background:var(--primary-soft); color:var(--primary); }
.cfm-text{ min-width:0; padding-top:1px; }
.cfm-title{ font-size:16px; font-weight:650; margin:0 0 5px; }
.cfm-msg{ font-size:13.5px; color:var(--text-2); line-height:1.65; margin:0; word-break:break-word; }
.cfm-foot{ display:flex; gap:10px; justify-content:flex-end; padding:15px 24px;
  border-top:1px solid var(--border); background:var(--surface-2); }
.cfm-foot .btn{ min-width:84px; }
/* 确认框主按钮实心化，危险操作用实心红更醒目 */
.cfm-ok{ color:#fff; border-color:transparent; box-shadow:0 6px 16px -8px rgba(16,24,40,.5); }
.cfm-ok.btn-primary{ background:linear-gradient(180deg,var(--primary),var(--primary-600)); }
.cfm-ok.btn-primary:hover{ background:linear-gradient(180deg,var(--primary),var(--primary-600)); filter:brightness(1.06); }
.cfm-ok.btn-danger{ background:linear-gradient(180deg,#f4574a,#e13327); border-color:transparent; color:#fff; }
.cfm-ok.btn-danger:hover{ background:linear-gradient(180deg,#e8483b,#cf2b20); border-color:transparent; }