/* ============ 设计令牌 ============ */
:root{
  --primary:#4f46e5; --primary-700:#4338ca;
  --primary-50:#eef2ff; --primary-100:#e0e7ff; --primary-200:#c7d2fe;
  --bg:#ffffff; --surface:#ffffff;
  --border:#e4e7ee; --border-2:#eef0f5;
  --text-1:#20242e; --text-2:#4e5664; --text-3:#77808f;
  --success:#16a34a; --success-700:#15803d; --success-bg:#ecfdf3; --success-border:#bbf7d0;
  --danger:#dc2626; --danger-700:#b91c1c; --danger-bg:#fef2f2; --danger-border:#fecaca;
  --warning:#d97706; --warning-700:#b45309; --warning-bg:#fffbeb; --warning-border:#fde68a;
  --info:#2563eb; --info-700:#1d4ed8; --info-bg:#eff6ff; --info-border:#bfdbfe;
  --cyan:#0891b2; --cyan-700:#0e7490; --cyan-bg:#ecfeff; --cyan-border:#a5f3fc;
  --radius:12px;
  --shadow:0 1px 2px rgba(23,26,41,.05), 0 3px 10px rgba(23,26,41,.06);
  --shadow-sm:0 1px 2px rgba(23,26,41,.05), 0 1px 4px rgba(23,26,41,.04);
  --shadow-md:0 2px 4px rgba(23,26,41,.05), 0 8px 20px rgba(23,26,41,.06);
  --grad-brand:linear-gradient(135deg,#4f46e5,#7c3aed 60%,#ec4899);
  --grad-soft:linear-gradient(180deg,#ffffff,#fafbfd);
  --mono:ui-monospace,'Cascadia Code','JetBrains Mono',Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:'Segoe UI','Microsoft YaHei','PingFang SC',system-ui,sans-serif;font-size:14px;color:var(--text-1);background:var(--bg);-webkit-font-smoothing:antialiased}
.hidden{display:none !important}
.mono{font-family:var(--mono)}
button{font-family:inherit}
/* ============ 图标 ============ */
.ic{display:inline-flex;flex-shrink:0;vertical-align:-2px}
.ic svg{width:1em;height:1em;display:block}
.btn .ic{margin-right:4px}
/* ============ 登录视图 ============ */
#view-login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px;background:radial-gradient(1100px 600px at 12% 8%,rgba(99,102,241,.14),transparent 60%),radial-gradient(900px 520px at 88% 92%,rgba(124,58,237,.13),transparent 60%),linear-gradient(160deg,#f6f7ff 0%,#eef1ff 45%,#f8f4ff 100%)}
.login-wrap{width:880px;max-width:100%}
.login-panel{display:flex;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 30px 80px rgba(79,70,229,.18),0 4px 16px rgba(23,26,41,.06);border:1px solid rgba(255,255,255,.7)}
.login-hero{width:380px;flex-shrink:0;padding:52px 40px;color:#fff;background:linear-gradient(150deg,#4f46e5 0%,#6d28d9 55%,#9333ea 100%);display:flex;flex-direction:column;position:relative;overflow:hidden}
.login-hero::before{content:'';position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.13),transparent 70%);top:-110px;right:-110px}
.login-hero::after{content:'';position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.09),transparent 70%);bottom:-80px;left:-70px}
.login-hero-logo{width:56px;height:56px;border-radius:15px;background:rgba(255,255,255,.16);backdrop-filter:blur(4px);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.3);margin-bottom:30px;position:relative;z-index:1}
.login-hero-title{font-size:28px;font-weight:700;letter-spacing:.5px;position:relative;z-index:1}
.login-hero-sub{font-size:14px;opacity:.85;margin-top:8px;margin-bottom:36px;position:relative;z-index:1}
.login-hero-feats{display:flex;flex-direction:column;gap:15px;margin-top:auto;position:relative;z-index:1}
.login-hero-feat{display:flex;align-items:center;gap:11px;font-size:13.5px;opacity:.92}
.login-hero-feat-ic{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.18);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.login-form-side{flex:1;padding:52px 48px 44px;background:#fff;display:flex;flex-direction:column;justify-content:center}
.login-form-title{font-size:24px;font-weight:700;color:var(--text-1)}
.login-form-sub{font-size:13px;color:var(--text-3);margin:8px 0 26px}
.login-form-side .field{margin-bottom:18px}
.login-form-side .field label{font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:7px}
.login-submit{width:100%;height:42px;font-size:14px;margin-top:6px;border-radius:9px}
.captcha-row{display:flex;align-items:center;gap:10px}
.captcha-q{height:38px;padding:0 14px;border:1px solid var(--border);border-radius:8px;background:linear-gradient(180deg,#f8f9fc,#f3f4f9);color:var(--text-1);font-size:14px;font-weight:600;font-family:var(--mono);display:flex;align-items:center;white-space:nowrap;flex-shrink:0;letter-spacing:.5px}
.captcha-input{flex:1}
.captcha-refresh{width:38px;height:38px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--text-3);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0}
.captcha-refresh:hover{border-color:var(--primary-200);color:var(--primary-700);background:var(--primary-50)}
.captcha-refresh svg{display:block}
.login-card{width:420px;background:linear-gradient(180deg,#ffffff,#fafbfe);border:1px solid var(--border);border-radius:16px;box-shadow:0 24px 60px rgba(79,70,229,.12),0 2px 8px rgba(23,26,41,.05);padding:40px 40px 32px}
.login-brand{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.login-logo{width:46px;height:46px;border-radius:12px;background:var(--grad-brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 6px 16px rgba(79,70,229,.35),inset 0 1px 0 rgba(255,255,255,.25);flex-shrink:0}
.login-title{font-size:22px;font-weight:700}
.login-sub{font-size:13px;color:var(--text-2);margin-bottom:26px}
.field{margin-bottom:18px}
.field:last-child{margin-bottom:0}
.field label{display:block;font-size:13px;font-weight:500;color:var(--text-2);margin-bottom:7px}
.field .hint{font-size:12px;color:var(--text-3);margin-top:6px;line-height:1.6}
.input{width:100%;height:38px;border:1px solid var(--border);border-radius:8px;padding:0 12px;font-size:13.5px;background:#fff;color:var(--text-1);outline:none;transition:border-color .15s,box-shadow .15s}
.input:hover{border-color:var(--primary-200)}
.input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.12)}
.input:disabled{background:#f4f5f9;color:var(--text-3);cursor:not-allowed}
.form-error{display:none;align-items:center;gap:7px;background:var(--danger-bg);border:1px solid var(--danger-border);color:var(--danger-700);border-radius:8px;padding:9px 12px;font-size:12.5px;margin-bottom:16px}
.form-error.show{display:flex}
.login-hint{background:#f8f9fc;border:1px dashed var(--border);border-radius:8px;padding:12px 14px;font-size:12.5px;color:var(--text-2);line-height:1.8;margin-top:24px}
.login-hint b{color:var(--text-1)}
.code-chip{display:inline-block;background:var(--primary-50);color:var(--primary-700);border-radius:5px;padding:1px 7px;font-family:var(--mono);font-size:12px}
/* ============ 首次运行安装向导 ============ */
#view-setup{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#eef2ff 0%,#f6f7fb 40%,#fdf4ff 100%);padding:32px}
.setup-wrap{width:520px;max-width:100%}
.setup-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 24px 60px rgba(79,70,229,.12);padding:40px 40px 32px}
.setup-steps{display:flex;flex-direction:column;gap:12px}
.setup-step{display:flex;gap:12px;align-items:flex-start}
.step-dot{width:22px;height:22px;border-radius:50%;background:var(--primary-50);color:var(--primary-700);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.step-t{font-size:13.5px;font-weight:600;color:var(--text-1)}
.step-d{font-size:12px;color:var(--text-3);margin-top:2px;line-height:1.5}
/* ============ 壳层布局 ============ */
.app{display:flex;height:100vh;overflow:hidden}
.sidebar{width:248px;flex-shrink:0;background:linear-gradient(180deg,#ffffff 0%,#fafbfd 100%);border-right:1px solid var(--border);display:flex;flex-direction:column;box-shadow:1px 0 3px rgba(23,26,41,.03)}
.brand{display:flex;align-items:center;gap:12px;padding:20px 18px 18px;border-bottom:1px solid var(--border-2)}
.brand-logo{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 60%,#ec4899 100%);color:#fff;display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0;box-shadow:0 6px 16px rgba(79,70,229,.32),inset 0 1px 0 rgba(255,255,255,.25)}
.brand-name{font-size:16.5px;font-weight:700;line-height:1.2;letter-spacing:-.2px}
.brand-sub{font-size:11.5px;color:var(--text-3);margin-top:3px;white-space:nowrap}
.nav{flex:1;overflow-y:auto;padding:14px 10px 18px}
.nav-group{margin-bottom:6px}
/* ---- 一级菜单（分组标题） ---- */
.nav-cap{display:flex;align-items:center;gap:10px;padding:15px 14px;margin:2px 0;border-radius:9px;cursor:pointer;user-select:none;font-size:15px;font-weight:600;color:var(--text-2);letter-spacing:.2px;transition:all .15s;position:relative}
.nav-cap:hover{background:#f4f5f9;color:var(--text-1)}
.nav-cap:hover .nav-cap-icon{color:var(--primary-700)}
.nav-cap-icon{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;color:var(--text-3);transition:all .15s;border-radius:5px}
.nav-cap-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-cap-arrow{width:0;height:0;border-left:4.5px solid transparent;border-right:4.5px solid transparent;border-top:5px solid var(--text-3);transition:transform .2s;opacity:.55;flex-shrink:0;margin-left:auto}
.nav-group.expanded .nav-cap{color:var(--text-1)}
.nav-group.expanded .nav-cap-arrow{transform:rotate(180deg);border-top-color:var(--text-2);opacity:.75}
.nav-group.expanded.has-active .nav-cap::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:22px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,var(--primary),#7c3aed)}
.nav-group.expanded.has-active .nav-cap-icon{color:var(--primary-700)}
.nav-group.expanded.has-active .nav-cap-arrow{border-top-color:var(--primary-700);opacity:.9}
/* ---- 二级子项 ---- */
.nav-items{display:none;padding:3px 0 5px}
.nav-group.expanded .nav-items{display:block}
.nav-item{display:flex;align-items:center;gap:10px;padding:14px 12px 14px 37px;border-radius:9px;color:var(--text-2);cursor:pointer;font-size:15px;margin:2px 0;font-weight:500;transition:all .15s;position:relative;border:1px solid transparent}
.nav-item:hover{background:#f4f5f9;color:var(--text-1)}
.nav-item:hover .ic{color:var(--primary-700)}
.nav-item .ic{font-size:15px;color:var(--text-3);width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s}
.nav-item.active{color:var(--primary-700);font-weight:600}
.nav-item.active .ic{color:var(--primary-700)}
.nav-item.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:21px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,var(--primary),#7c3aed)}
.side-user{margin:8px 10px 12px;padding:10px 11px;display:flex;align-items:center;gap:10px;border-radius:10px;background:linear-gradient(135deg,#f8f9fc 0%,#fafbfd 100%);border:1px solid var(--border-2);transition:all .15s;cursor:pointer}
.side-user:hover{background:#fff;border-color:var(--primary-200);box-shadow:0 2px 8px rgba(79,70,229,.08)}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;flex-shrink:0}
.sidebar .avatar{background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 60%,#ec4899 100%);box-shadow:0 2px 6px rgba(99,102,241,.32),inset 0 1px 0 rgba(255,255,255,.2);border:2px solid #fff}
.avatar-sm{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;margin-right:9px;vertical-align:middle;flex-shrink:0}
.side-user-name{font-size:13.5px;font-weight:600;line-height:1.3}
.side-user-role{font-size:11px;color:var(--text-3);margin-top:2px}
.main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg)}
.topbar{height:62px;flex-shrink:0;background:var(--grad-soft);border-bottom:1px solid var(--border);box-shadow:0 1px 3px rgba(23,26,41,.04);display:flex;align-items:center;justify-content:space-between;padding:0 26px;position:relative;z-index:2}
.topbar-title h1{font-size:16.5px;font-weight:700;line-height:1.25;letter-spacing:-.2px}
.topbar-title p{font-size:12px;color:var(--text-3);margin-top:2px}
.topbar-right{display:flex;align-items:center;gap:14px}
.reg-chip{display:flex;align-items:center;gap:8px;background:linear-gradient(180deg,#f8f9fc,#f1f2f7);border:1px solid var(--border);border-radius:9px;padding:6px 11px;font-size:12.5px;color:var(--text-2);box-shadow:var(--shadow-sm);transition:all .15s}
.reg-chip:hover{border-color:var(--primary-200);color:var(--primary-700);box-shadow:0 2px 6px rgba(79,70,229,.08)}
.reg-chip .ic{color:var(--text-3)}
.divider{width:1px;height:22px;background:var(--border)}
.user-chip{display:flex;align-items:center;gap:9px}
.user-chip .avatar{width:30px;height:30px;font-size:12.5px}
.btn-ic{width:30px;height:30px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--text-3);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:16px;transition:background .12s,color .12s;padding:0}
.btn-ic:hover{background:#f0f1f6;color:var(--text-1)}
.gc-banner{display:flex;align-items:center;gap:10px;padding:9px 26px;background:linear-gradient(180deg,var(--info-bg),#e6f1ff);border-bottom:1px solid var(--info-border);color:var(--info-700);font-size:13px;flex-shrink:0;box-shadow:inset 0 -1px 0 rgba(37,99,235,.04)}
.spin{width:14px;height:14px;border:2px solid var(--info-border);border-top-color:var(--info);border-radius:50%;animation:rot .9s linear infinite;flex-shrink:0}
@keyframes rot{to{transform:rotate(360deg)}}
.content{flex:1;overflow-y:auto;padding:16px 18px}
/* ============ 页面与卡片 ============ */
.page{display:flex;flex-direction:column;gap:20px;min-height:100%}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md)}
/* 表格卡片撑满屏幕：卡片 flex 纵向布局、分页吸底；表格保持自然高度（顶部对齐） */
.card-fill{display:flex;flex-direction:column;flex:1}
.card-fill>.card-foot{margin-top:auto}
.card-head{padding:16px 20px;border-bottom:1px solid var(--border-2);background:linear-gradient(180deg,#ffffff,#fbfbfe);border-radius:var(--radius) var(--radius) 0 0}
.card-title{font-size:15px;font-weight:700;letter-spacing:-.2px}
.card-title .ic{color:var(--primary);margin-right:7px;vertical-align:-2px}
.card-sub{font-size:12px;color:var(--text-3);margin-top:3px}
.card-foot{padding:14px 20px;border-top:1px solid var(--border-2);display:flex;align-items:center;justify-content:flex-end;background:linear-gradient(180deg,#fbfbfe,#f7f8fb);border-radius:0 0 var(--radius) var(--radius)}
/* 卡片空态垂直居中 */
.card-fill>.empty,.card-fill>.g-empty{margin:auto 0}
.g-empty,.g-members-empty,.g-perms-empty{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:0}
.empty{margin:auto 0}
/* 用户组详情区撑满右侧卡片 */
.g-detail{flex:1;min-height:0;display:flex;flex-direction:column}
.g-detail-inner{flex:1;min-height:0;display:flex;flex-direction:column}
.g-detail-inner .tab-pane{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column}
.g-pane-members,.g-pane-perms{display:flex;flex-direction:column;min-height:0}
.g-pane-members .table,.g-pane-perms .table{flex-shrink:0}
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.toolbar .spacer{flex:1}
.search{position:relative;width:300px}
.search .ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:14px;pointer-events:none}
.search input{padding-left:33px}
.batch{display:flex;align-items:center;gap:8px;background:var(--primary-50);border:1px solid var(--primary-100);border-radius:8px;padding:5px 10px}
.batch-count{font-size:12.5px;color:var(--primary-700);font-weight:600;margin-right:2px}
/* ============ 按钮 ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:34px;padding:0 14px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:all .15s;white-space:nowrap;line-height:1}
.btn-primary{background:linear-gradient(135deg,#4f46e5,#6b57ea);color:#fff;box-shadow:0 2px 6px rgba(79,70,229,.25)}
.btn-primary:hover{background:linear-gradient(135deg,#4338ca,#5a48e0);box-shadow:0 4px 12px rgba(79,70,229,.3);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:#fff;border-color:var(--border);color:var(--text-2);box-shadow:var(--shadow-sm)}
.btn-ghost:hover{border-color:var(--primary-200);color:var(--primary-700);background:var(--primary-50);box-shadow:0 2px 6px rgba(79,70,229,.08)}
.btn-danger{background:linear-gradient(135deg,#dc2626,#e2503a);color:#fff;box-shadow:0 2px 6px rgba(220,38,38,.22)}
.btn-danger:hover{background:linear-gradient(135deg,#b91c1c,#d53b28);box-shadow:0 4px 12px rgba(220,38,38,.28);transform:translateY(-1px)}
.btn-danger-ghost{background:#fff;border-color:var(--border);color:var(--danger)}
.btn-danger-ghost:hover{border-color:var(--danger-border);background:var(--danger-bg)}
.btn-sm{height:30px;padding:0 12px;font-size:12.5px}
.btn-xs{height:26px;padding:0 9px;font-size:12px;border-radius:7px}
.btn-xs .ic{margin-right:3px;font-size:13px}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
/* ============ 表格（Flux 风格：浅色表头 + 行分隔线，无斑马纹） ============ */
/* ============ 表格（扁平中性主题：浅灰表头 + 居中文字 + 行号列 + 分组行 + 选中工具栏） ============ */
.table{width:100%;border-collapse:separate;border-spacing:0}
.table thead th{background:#f5f6fa;color:#3d4456;font-size:12.5px;font-weight:600;text-align:center;padding:13px 16px;border-bottom:1px solid #e2e5ec;border-right:1px solid #e9ecf2;white-space:nowrap;letter-spacing:.4px;position:sticky;top:0;z-index:1;transition:background-color .12s}
.table thead th:last-child{border-right:none}
.table thead th .ic{color:var(--text-3);margin-right:5px;vertical-align:-2px}
/* 表头内可选中的"排序指示" */
.table thead th.sortable{cursor:pointer;user-select:none}
.table thead th.sortable:hover{background:#ebedf3;color:var(--text-1)}
.table tbody td{padding:12px 16px;font-size:13.5px;border-bottom:1px solid var(--border-2);vertical-align:middle;background:#fff;transition:background-color .12s}
.table tbody tr:nth-child(even) td{background:#fafbfd}
.table tbody tr:hover td{background:#f5f3ff}
.table tbody tr.clickable{cursor:pointer}
.table tbody tr.clickable:hover td{background:#eef2ff}
.table tbody tr.sel td{background:#ede9fe !important}
.table tbody tr:last-child td{border-bottom:none}
/* 行号列（首列前可放数字 + 浅灰底） */
.table td.row-num,.table th.row-num{width:48px;text-align:center;background:#f4f5f9 !important;color:var(--text-3);font-family:var(--mono);font-size:12px;letter-spacing:.5px;font-weight:500}
.table tbody tr:hover td.row-num{background:#ede9fe !important;color:var(--primary-700)}
.table tbody tr.sel td.row-num{background:#ddd6fe !important;color:var(--primary-700);font-weight:600}
/* 分组表头行（tr.group）：浅紫底 + 文件夹图标 + 整行合并单元格 */
.table tr.group td{background:linear-gradient(90deg,#f5f3ff,#faf7ff) !important;color:var(--primary-700);font-weight:600;font-size:13px;padding:11px 16px;border-bottom:1px solid var(--primary-100)}
.table tr.group td::before{content:'';display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-3px;background:var(--primary);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/></svg>") no-repeat center/contain;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/></svg>") no-repeat center/contain}
.table tr.group:hover td{background:linear-gradient(90deg,#ede9fe,#f5f3ff) !important}
/* 数字列右对齐 */
.table td.num,.table th.num{text-align:right;font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
.col-check{width:44px;text-align:center !important}
.col-check input{width:15px;height:15px;accent-color:var(--primary);cursor:pointer;vertical-align:middle}
/* 选中行数工具栏（吸顶 / 浮在表头上方） */
.sel-bar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:#f5f6fa;color:#3d4456;border-radius:var(--radius) var(--radius) 0 0;font-size:13px;font-weight:500;border-bottom:1px solid #e2e5ec}
.sel-bar .sel-count{display:inline-flex;align-items:center;gap:8px;padding-right:14px;border-right:1px solid var(--border);font-weight:600;color:#3d4456}
.sel-bar .sel-count strong{font-size:15px;color:var(--primary-700)}
.sel-bar .sel-actions{display:flex;align-items:center;gap:8px;flex:1}
.sel-bar .sel-btn{height:30px;padding:0 12px;border-radius:7px;background:#fff;color:var(--text-2);border:1px solid var(--border);font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .15s}
.sel-bar .sel-btn:hover{color:var(--primary-700);border-color:var(--primary-200);background:var(--primary-50)}
.sel-bar .sel-btn .ic{font-size:14px;color:var(--primary)}
.sel-bar .sel-clear{margin-left:auto;background:transparent;border-color:var(--border);font-size:12px;color:var(--text-3)}
.sel-bar .sel-clear:hover{background:#fff;color:var(--text-2)}
.td-muted{color:var(--text-3)}
.td-actions{white-space:nowrap}
.td-actions .btn{margin-right:6px}
.td-actions .btn:last-child{margin-right:0}
/* ============ 徽标 ============ */
.badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:500;line-height:1;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.badge-indigo{background:linear-gradient(180deg,var(--primary-50),#e6e9ff);color:var(--primary-700);border:1px solid var(--primary-100)}
.badge-green{background:linear-gradient(180deg,var(--success-bg),#d9fbe6);color:var(--success-700);border:1px solid var(--success-border)}
.badge-gray{background:linear-gradient(180deg,#f4f5f9,#eceef4);color:var(--text-2);border:1px solid var(--border)}
.badge-cyan{background:linear-gradient(180deg,var(--cyan-bg),#d8f6fe);color:var(--cyan-700);border:1px solid var(--cyan-border)}
.badge-amber{background:linear-gradient(180deg,var(--warning-bg),#fdeec9);color:var(--warning-700);border:1px solid var(--warning-border)}
.badge-red{background:linear-gradient(180deg,var(--danger-bg),#fddcd9);color:var(--danger-700);border:1px solid var(--danger-border)}
.badge-blue{background:linear-gradient(180deg,var(--info-bg),#d9eaff);color:var(--info-700);border:1px solid var(--info-border)}
.bot-tag{display:inline-block;background:#0f172a;color:#94a3b8;font-size:10px;font-weight:700;border-radius:4px;padding:2px 5px;margin-left:8px;vertical-align:middle;letter-spacing:.5px;font-family:var(--mono)}
/* ============ 空态（在 .card-fill 内自动垂直居中） ============ */
.empty{padding:48px 20px;text-align:center;color:var(--text-3);display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-height:300px}
.empty .ic{width:54px;height:54px;border-radius:16px;background:linear-gradient(135deg,var(--primary-50),#eef1ff);color:var(--primary);display:inline-flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.empty-title{font-size:14px;color:var(--text-2);font-weight:600;margin-bottom:4px}
.empty-sub{font-size:12.5px}
/* ============ 横幅 ============ */
.banner{display:flex;gap:10px;padding:12px 16px;border-radius:10px;font-size:13px;align-items:flex-start;line-height:1.65;box-shadow:var(--shadow-sm)}
.banner .ic{font-size:16px;margin-top:2px;flex-shrink:0}
.banner-info{background:linear-gradient(180deg,var(--info-bg),#e6f1ff);border:1px solid var(--info-border);color:var(--info-700)}
.banner-warning{background:linear-gradient(180deg,var(--warning-bg),#fdf0d4);border:1px solid var(--warning-border);color:var(--warning-700)}
.banner-danger{background:linear-gradient(180deg,var(--danger-bg),#fcdcd8);border:1px solid var(--danger-border);color:var(--danger-700)}
/* ============ 模态框 ============ */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px}
.modal{background:var(--surface);border-radius:14px;width:520px;max-width:100%;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(15,23,42,.3),0 2px 8px rgba(15,23,42,.08);animation:pop .16s ease}
@keyframes pop{from{transform:scale(.97);opacity:.6}to{transform:scale(1);opacity:1}}
.modal-head{padding:16px 22px;border-bottom:1px solid var(--border-2);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:var(--grad-soft);border-radius:14px 14px 0 0}
.modal-title{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.modal-title .ic{color:var(--primary)}
.modal-body{padding:22px;overflow:visible}
.modal-foot{padding:13px 22px;border-top:1px solid var(--border-2);display:flex;justify-content:flex-end;gap:10px;background:linear-gradient(180deg,#fbfbfe,#f4f5f9);border-radius:0 0 14px 14px;flex-shrink:0}
.cf-body{display:flex;gap:14px;align-items:flex-start}
.cf-icon{width:38px;height:38px;border-radius:10px;background:var(--danger-bg);color:var(--danger);display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
.cf-msg{font-size:13.5px;color:var(--text-1);line-height:1.7}
.cf-msg .sub{display:block;font-size:12.5px;color:var(--text-3);margin-top:5px}
.logout-ic{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--primary-50),#e6e9ff);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
/* ============ 开关行 ============ */
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:linear-gradient(180deg,#fafbfd,#f4f5f9);transition:all .15s}
.switch-row:hover{border-color:var(--primary-200);box-shadow:0 2px 6px rgba(79,70,229,.06)}
.switch-row .sw-title{font-size:13px;font-weight:600;color:var(--text-1)}
.switch-row .sw-desc{font-size:12px;color:var(--text-3);margin-top:3px;line-height:1.5}
.switch{width:38px;height:22px;border-radius:999px;background:#d3d7e0;position:relative;cursor:pointer;transition:background .2s,box-shadow .2s;flex-shrink:0}
.switch .knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.22)}
.switch.on{background:linear-gradient(135deg,var(--primary),#7c3aed);box-shadow:0 2px 6px rgba(79,70,229,.3)}
.switch.on .knob{left:18px}
.switch.disabled{opacity:.5;cursor:not-allowed}
/* ============ 下拉选择 ============ */
.cb{position:relative}
.cb-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;height:38px;border:1px solid var(--border);border-radius:8px;padding:0 12px;font-size:13.5px;background:#fff;color:var(--text-1);cursor:pointer;transition:border-color .15s,box-shadow .15s;min-width:0}
.cb-btn:hover{border-color:var(--primary-200);box-shadow:var(--shadow-sm)}
.cb-btn .ic{color:var(--text-3);transition:transform .15s;font-size:15px;flex-shrink:0}
.cb.open .cb-btn{border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.12)}
.cb.open .cb-btn .ic{transform:rotate(180deg)}
.cb-placeholder{color:var(--text-3)}
.cb-value{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-menu{position:absolute;top:calc(100% + 5px);left:0;min-width:100%;width:max-content;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 40px rgba(15,23,42,.16);z-index:1400;max-height:250px;overflow-y:auto;display:none;padding:5px;animation:pop .14s ease}
.cb.open .cb-menu{display:block}
.cb-up .cb-menu{top:auto;bottom:calc(100% + 5px)}
.cb-opt{padding:8px 12px;border-radius:7px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:8px;color:var(--text-1);transition:background .12s,color .12s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-opt:hover{background:#f5f6fa;color:var(--text-1)}
.cb-opt.sel{background:linear-gradient(95deg,var(--primary-50),#f5f3ff);color:var(--primary-700);font-weight:600}
.cb-opt.sel:hover{background:linear-gradient(95deg,var(--primary-100),var(--primary-50))}
.cb-opt .opt-sub{font-size:11.5px;color:var(--text-3);margin-left:auto;padding-left:12px;flex-shrink:0}
.cb-opt .cb-opt-check{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;color:var(--primary);font-size:13px;background:#fff;border-radius:50%;width:18px;height:18px;flex-shrink:0;box-shadow:0 1px 3px rgba(79,70,229,.25)}
/* cb 小尺寸变体（分页「每页 N 条」用，与分页按钮同高 30px） */
.cb-sm .cb-btn{height:30px;font-size:12.5px;padding:0 11px;border-radius:8px;gap:8px;box-shadow:0 1px 2px rgba(23,26,41,.04);border:1px solid var(--border);background:#fff;color:var(--text-2)}
.cb-sm .cb-btn:hover{border-color:var(--primary-200);color:var(--primary-700);background:var(--primary-50)}
.cb-sm .cb-btn .ic{font-size:13px;color:var(--text-3)}
.cb-sm .cb-btn .cb-value{font-size:12.5px;font-weight:500}
.cb-sm .cb-menu{font-size:12.5px;min-width:100%;width:max-content;padding:5px}
.cb-sm .cb-opt{padding:7px 12px;border-radius:6px}
/* ============ Tabs ============ */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);padding:0 4px}
.tab{padding:11px 16px;font-size:13.5px;color:var(--text-2);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;display:flex;align-items:center;gap:6px;font-weight:500;border-radius:8px 8px 0 0;transition:all .15s}
.tab:hover{color:var(--primary-700);background:var(--primary-50)}
.tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600;background:linear-gradient(180deg,var(--primary-50),#fff)}
.tab .count{background:var(--primary-50);color:var(--primary-700);border-radius:999px;font-size:11.5px;padding:1px 8px;font-weight:600}
.tab.active .count{background:var(--primary);color:#fff}
.tab-pane{padding:20px}
/* ============ 分页（统一紫色主题，与全站按钮/徽标一致） ============ */
.pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 0}
.pg-total{font-size:12.5px;color:var(--text-3);margin-right:auto;display:inline-flex;align-items:center;gap:8px}
.pg-total::before{content:'';width:3px;height:12px;border-radius:2px;background:var(--primary);opacity:.55}
.pg-size-wrap{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-3);margin:0 14px 0 6px;padding-right:14px;border-right:1px solid var(--border-2)}
.pg-num,.pg-ellipsis{height:30px;min-width:30px;border:1px solid var(--border);background:#fff;border-radius:8px;font-size:13px;cursor:pointer;color:var(--text-2);display:inline-flex;align-items:center;justify-content:center;padding:0 8px;transition:all .15s;font-weight:500;line-height:1;box-shadow:0 1px 2px rgba(23,26,41,.04)}
.pg-num:hover{border-color:var(--primary-200);color:var(--primary-700);background:var(--primary-50);box-shadow:0 2px 6px rgba(79,70,229,.1);transform:translateY(-1px)}
.pg-num.active{background:linear-gradient(135deg,var(--primary),#7c3aed);color:#fff;border-color:transparent;cursor:default;font-weight:600;box-shadow:0 3px 8px rgba(79,70,229,.3)}
.pg-num.active:hover{transform:none;background:linear-gradient(135deg,var(--primary),#7c3aed)}
/* 上一页/下一页：透明描边风，与页码视觉分组；与页码额外留 12px 间距 */
.pg-btn{height:30px;min-width:30px;border:1px solid var(--border);background:#fff;border-radius:8px;font-size:13px;cursor:pointer;color:var(--text-2);display:inline-flex;align-items:center;justify-content:center;padding:0 9px;transition:all .15s;font-weight:500;line-height:1;box-shadow:0 1px 2px rgba(23,26,41,.04)}
.pg-btn:hover:not(:disabled){border-color:var(--primary-200);color:var(--primary-700);background:var(--primary-50);box-shadow:0 2px 6px rgba(79,70,229,.1);transform:translateY(-1px)}
.pg-btn.prev{margin-right:8px}
.pg-btn.next{margin-left:8px}
.pg-btn:disabled{opacity:.4;cursor:not-allowed;background:#f8f9fc;box-shadow:none}
.pg-btn:disabled:hover{transform:none;border-color:var(--border);color:var(--text-2);background:#f8f9fc}
.pg-ellipsis{cursor:default;background:transparent;border-color:transparent;color:var(--text-3);box-shadow:none;font-weight:600;letter-spacing:1px;min-width:auto;padding:0 4px}
.pg-btn .ic{font-size:14px;color:inherit}
/* ============ Toast ============ */
#toast-root{position:fixed;top:20px;right:22px;z-index:2000;display:flex;flex-direction:column;gap:10px}
.toast{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 36px rgba(15,23,42,.16);padding:11px 16px;font-size:13px;color:var(--text-1);animation:tin .22s ease;max-width:380px;position:relative;overflow:hidden}
.toast::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--text-3)}
.toast-success::before{background:var(--success)}
.toast-error::before{background:var(--danger)}
.toast-info::before{background:var(--info)}
.toast-warning::before{background:var(--warning)}
@keyframes tin{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}
.toast .ic{font-size:16px}
.toast-success .ic{color:var(--success)}
.toast-error .ic{color:var(--danger)}
.toast-info .ic{color:var(--info)}
.toast-warning .ic{color:var(--warning)}
.toast.leaving{opacity:0;transform:translateX(16px);transition:all .25s}
/* ============ 代码框 / 命令 ============ */
.code-box{background:linear-gradient(180deg,#f8f9fc,#f1f2f7);border:1px solid var(--border);border-radius:8px;padding:14px 16px;font-family:var(--mono);font-size:12px;line-height:1.7;color:#334155;overflow:auto;max-height:340px;white-space:pre}
.cmd-row{display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,#f8f9fc,#f1f2f7);border:1px solid var(--border);border-radius:8px;padding:8px 12px;margin-bottom:8px;transition:all .15s}
.cmd-row:hover{border-color:var(--primary-200);box-shadow:0 2px 6px rgba(79,70,229,.06)}
.cmd-row:last-child{margin-bottom:0}
.cmd-row .prompt{color:var(--primary-700);font-weight:700;font-family:var(--mono);font-size:12.5px;flex-shrink:0}
.cmd-row code{font-family:var(--mono);font-size:12.5px;color:var(--text-1);flex:1;word-break:break-all}
.cmd-row .btn{flex-shrink:0}
/* ============ 布局网格 ============ */
/* grid-2 两列等高：stretch 让两卡同高，卡片转 flex 纵向使底栏按钮吸底对齐 */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.grid-2>.card{display:flex;flex-direction:column}
.grid-2>.card>.card-foot{margin-top:auto}
.grid-side{display:grid;grid-template-columns:430px 1fr;gap:20px;align-items:start}
.grid-fill{flex:1;align-items:stretch}
.grid-fill>.card{min-height:0}
@media (max-width:1400px){.grid-2,.grid-side{grid-template-columns:1fr}}
/* ============ 信息列表 ============ */
.kv{display:flex;align-items:center;padding:10px 0;border-bottom:1px dashed var(--border-2);font-size:13.5px;gap:16px}
.kv:last-child{border-bottom:none}
.kv .k{width:120px;color:var(--text-3);flex-shrink:0}
.kv .v{color:var(--text-1);word-break:break-all;display:flex;align-items:center;gap:8px;min-width:0}
.kv .v .btn-ic{width:24px;height:24px;font-size:13px}
/* ============ 详情弹窗 ============ */
.detail-title{font-size:12px;font-weight:700;color:var(--text-3);letter-spacing:.4px;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.detail-title .ic{font-size:13px}
/* ============ 命令行指南 ============ */
details.cli{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}
details.cli summary{list-style:none;cursor:pointer;padding:14px 20px;display:flex;align-items:center;gap:9px;font-weight:600;font-size:13.5px}
details.cli summary::-webkit-details-marker{display:none}
details.cli summary .ic{color:var(--primary);font-size:16px}
details.cli summary .chev{color:var(--text-3);margin-left:auto;transition:transform .18s}
details.cli[open] summary .chev{transform:rotate(180deg)}
details.cli .cli-body{padding:0 20px 18px}

/* ===== Tag 页 / 系统页补充样式 ===== */
.tag-chip{display:inline-flex;align-items:center;gap:6px;background:var(--primary-50);color:var(--primary-700);border-radius:6px;padding:3px 10px;font-weight:600}
.tag-chip .ic{font-size:13px}
.digest{font-family:var(--mono);font-size:12px;color:var(--text-2);word-break:break-all}
.row-muted td{color:var(--text-3)}
.row-muted .tag-chip{background:#f1f2f6;color:var(--text-3)}
.kv-list{padding:4px 20px 14px}
.code-inline{background:#f8f9fc;border:1px solid var(--border);border-radius:5px;padding:2px 8px;font-family:var(--mono);font-size:12px;color:var(--primary-700);word-break:break-all}