:root{
  --bg-0:#0a0c10; --bg-1:#0e1117; --bg-2:#141922; --surface:#161b24; --surface-2:#1b212c;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --text:#e6e9ef; --muted:#8b94a3; --faint:#5c6573;
  --brand:#5b8cff; --brand-2:#3f6fe0; --ok:#34d399; --warn:#fbbf24; --danger:#f87171;
  --radius:12px; --radius-sm:9px; --sidebar-w:220px;
}
*{ box-sizing:border-box; scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:8px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:var(--muted); background-clip:padding-box; }
html,body{ height:100%; margin:0; }
body{ color:var(--text); background:var(--bg-0); font-size:14px; line-height:1.55;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif; }

/* 默认密码安全提示条 */
.pw-warn-bar{ background:rgba(251,191,36,.12); color:var(--warn); border-bottom:1px solid rgba(251,191,36,.35);
  padding:10px 18px; font-size:13px; text-align:center; }

/* 登录 */
.login-mask{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:var(--bg-0); }
.login-box{ width:340px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
.login-box h3{ margin:0 0 6px; font-size:20px; }
.login-box p{ margin:0 0 16px; color:var(--muted); font-size:13px; }
.login-box input{ width:100%; padding:11px 13px; margin-bottom:12px; border-radius:var(--radius-sm); border:1px solid var(--line-2); background:var(--bg-2); color:var(--text); outline:none; }

/* 布局：一级窄图标栏 + 二级菜单 + 内容区 */
.app{ display:grid; grid-template-columns:76px 190px 1fr; min-height:100vh; }

/* 一级：窄图标活动栏 */
.rail{ background:var(--bg-0); border-right:1px solid var(--line); display:flex; flex-direction:column; align-items:center; padding:14px 0; gap:6px; }
.rail-brand{ width:40px; height:40px; border-radius:11px; background:var(--brand); color:#fff; font-weight:700; font-size:17px;
  display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.rail-items{ display:flex; flex-direction:column; gap:6px; flex:1; width:100%; align-items:center; }
.rail-item{ width:60px; padding:9px 0; border-radius:10px; display:flex; flex-direction:column; align-items:center; gap:4px;
  color:var(--muted); cursor:pointer; user-select:none; transition:.15s; border:1px solid transparent; }
.rail-item:hover{ background:var(--surface); color:var(--text); }
.rail-item.active{ background:var(--surface-2); color:var(--brand); border-color:var(--line-2); }
.rail-item .rail-ico{ font-size:19px; line-height:1; }
.rail-item .rail-txt{ font-size:11px; }
.rail-logout{ width:60px; padding:9px 0; border-radius:10px; display:flex; flex-direction:column; align-items:center; gap:4px;
  color:var(--muted); cursor:pointer; background:transparent; border:none; transition:.15s; }
.rail-logout:hover{ background:rgba(248,113,113,.12); color:#fca5a5; }
.rail-logout .rail-ico{ font-size:17px; }
.rail-logout .rail-txt{ font-size:11px; }

/* 二级：子菜单栏 */
.submenu{ background:var(--bg-1); border-right:1px solid var(--line); padding:20px 12px; display:flex; flex-direction:column; }
.submenu-title{ font-size:15px; font-weight:700; padding:4px 10px 16px; color:var(--text); }
.submenu-nav{ display:flex; flex-direction:column; gap:3px; }
.nav-item{ padding:10px 12px; border-radius:var(--radius-sm); color:var(--muted); cursor:pointer; font-size:14px; user-select:none; }
.nav-item:hover{ background:var(--surface); color:var(--text); }
.nav-item.active{ background:var(--brand); color:#fff; }
.main{ padding:26px 30px; overflow:auto; }
.view{ display:none; }
.view.active{ display:block; }

/* 通用 */
h2.page-title{ margin:0 0 4px; font-size:22px; }
.page-sub{ color:var(--muted); margin:0 0 22px; font-size:13px; }
.btn{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--line-2); background:var(--surface-2); color:var(--text); cursor:pointer; font-size:13px; }
.btn:hover{ border-color:var(--brand); }
.btn.primary{ background:var(--brand); border-color:var(--brand); color:#fff; }
.btn.primary:hover{ background:var(--brand-2); }
.btn.ghost{ background:transparent; }
.btn.danger{ background:rgba(248,113,113,.1); border-color:rgba(248,113,113,.3); color:#fca5a5; }
.btn.sm{ padding:5px 10px; font-size:12px; }
.msg.err{ color:#fca5a5; font-size:13px; min-height:18px; }

/* 卡片/统计 */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; margin-bottom:24px; }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; }
.card .k{ color:var(--muted); font-size:12px; }
.card .v{ font-size:26px; font-weight:700; margin-top:6px; }
.card .v.sm{ font-size:18px; }
.table-scroll{ overflow-x:auto; margin-bottom:8px; }
.period-table{ margin-bottom:8px; }
#usageStats{ margin-bottom:20px; }

/* 表格 */
table{ width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
th,td{ text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); font-size:13px; }
th{ color:var(--muted); font-weight:600; background:var(--bg-2); }
tr:last-child td{ border-bottom:none; }
.tag{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; }
.tag.on{ background:rgba(52,211,153,.14); color:#6ee7b7; }
.tag.off{ background:rgba(248,113,113,.14); color:#fca5a5; }
.tag.over{ background:rgba(251,191,36,.14); color:#fcd34d; }
.mono{ font-family:Consolas,Monaco,monospace; font-size:12px; }
.toolbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.toolbar input,.toolbar select{ padding:7px 10px; border-radius:var(--radius-sm); border:1px solid var(--line-2); background:var(--bg-2); color:var(--text); outline:none; font-size:13px; }

/* 弹窗：右侧抽屉式，统一宽度 */
.modal-mask{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; justify-content:flex-end; z-index:50; }
.modal-mask.show{ display:flex; }
/* 抽屉：从右侧滑入，模态与确认框共用同一宽度 */
.modal, .confirm-box{ width:440px; max-width:92vw; height:100vh; max-height:100vh; overflow:auto;
  background:var(--surface); border:none; border-left:1px solid var(--line-2); border-radius:0; padding:26px 24px;
  transform:translateX(100%); transition:transform .26s cubic-bezier(.4,0,.2,1); box-shadow:-16px 0 48px rgba(0,0,0,.45); }
.modal-mask.show .modal, .modal-mask.show .confirm-box{ transform:translateX(0); }
.modal h3{ margin:0 0 16px; font-size:18px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
.field input,.field select,.field textarea{ width:100%; padding:9px 11px; border-radius:var(--radius-sm); border:1px solid var(--line-2); background:var(--bg-2); color:var(--text); outline:none; font-size:13px; }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:24px; padding-top:18px; border-top:1px solid var(--line); }
/* 明细编辑表单（复用确认框容器） */
.cf-form{ display:flex; flex-direction:column; gap:12px; margin:14px 0 4px; }
.cf-form label{ display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--muted); }
.cf-form label.cf-check{ flex-direction:row; align-items:flex-start; gap:8px; color:var(--text); font-size:12px; line-height:1.4; }
.cf-form label.cf-check input{ width:auto; margin-top:2px; }
.cf-form input{ width:100%; padding:9px 11px; border-radius:var(--radius-sm); border:1px solid var(--line-2); background:var(--bg-2); color:var(--text); outline:none; font-size:13px; }
.cf-form .cf-hint{ margin:2px 0 0; font-size:11px; color:var(--faint); }
.reveal{ background:var(--bg-2); border:1px dashed var(--line-2); border-radius:var(--radius-sm); padding:12px; margin:8px 0; word-break:break-all; }
.reveal .lbl{ color:var(--muted); font-size:11px; display:block; margin-bottom:4px; }
/* 带复制按钮的凭据行 */
.reveal-copy{ display:flex; align-items:center; gap:12px; }
.reveal-copy .reveal-main{ flex:1; min-width:0; }
.reveal-copy .reveal-val{ display:block; word-break:break-all; }
.copy-btn{ flex:none; white-space:nowrap; }
.copy-btn.copied, .btn.copied{ background:rgba(52,211,153,.18); color:#6ee7b7; border-color:transparent; }
/* 客户列表行内 client_id 复制 */
.cid-row{ display:flex; align-items:center; gap:6px; }
.copy-mini{ flex:none; cursor:pointer; border:none; background:transparent; color:var(--muted);
  font-size:13px; line-height:1; padding:2px 4px; border-radius:4px; transition:color .15s, background .15s; }
.copy-mini:hover{ color:var(--text); background:var(--bg-2); }
.copy-mini.copied{ color:#6ee7b7; }
/* 连接诊断清单 */
.diag-list{ margin:8px 0; }
.diag-summary{ padding:10px 12px; border-radius:var(--radius-sm); font-size:13px; margin-bottom:10px; }
.diag-summary.ok{ background:rgba(52,211,153,.14); color:#6ee7b7; }
.diag-summary.fail{ background:rgba(248,113,113,.14); color:#fca5a5; }
.diag-step{ display:flex; gap:10px; padding:10px 12px; border:1px solid var(--line-2);
  border-radius:var(--radius-sm); margin-bottom:8px; background:var(--bg-2); }
.diag-ico{ flex:none; width:20px; height:20px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:12px; color:#fff; }
.diag-step.ok .diag-ico{ background:#20a53a; }
.diag-step.fail .diag-ico{ background:#e05260; }
.diag-body{ min-width:0; }
.diag-name{ font-size:13px; font-weight:600; margin-bottom:2px; }
.diag-detail{ font-size:12px; color:var(--muted); word-break:break-all; line-height:1.5; }

/* toast：右上角滑入通知条 */
.toast{ position:fixed; top:20px; right:20px; left:auto; transform:translateX(24px); opacity:0;
  display:none; align-items:center; gap:12px; max-width:min(92vw,400px); min-width:240px;
  color:#fff; padding:13px 14px 13px 16px; border-radius:var(--radius-sm);
  box-shadow:0 10px 34px rgba(0,0,0,.4); transition:opacity .22s, transform .22s; z-index:80;
  font-size:13.5px; line-height:1.5; }
.toast.show{ display:flex; opacity:1; transform:translateX(0); }
.toast .toast-ico{ flex-shrink:0; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; background:rgba(255,255,255,.22); color:#fff; }
.toast .toast-msg{ flex:1; word-break:break-word; }
.toast .toast-close{ flex-shrink:0; border:none; background:transparent; color:rgba(255,255,255,.7); cursor:pointer;
  font-size:13px; line-height:1; padding:5px; border-radius:6px; }
.toast .toast-close:hover{ color:#fff; background:rgba(255,255,255,.18); }
/* 实底彩色背景（右上角悬浮更醒目） */
.toast-success{ background:linear-gradient(135deg,#16a34a,#15803d); }
.toast-error{ background:linear-gradient(135deg,#475569,#334155); }
.toast-info{ background:linear-gradient(135deg,#2563eb,#1d4ed8); }
.toast-info .toast-ico{ font-style:italic; font-family:Georgia,serif; }
.toast-loading{ background:linear-gradient(135deg,#d97706,#b45309); }
.toast-loading .toast-ico{ animation:toastSpin 1s linear infinite; }
@keyframes toastSpin{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }

/* 确认对话框（居中） */
.confirm-box .cf-title{ font-size:18px; font-weight:700; margin-bottom:12px; }
.confirm-box .cf-msg{ color:var(--muted); font-size:13.5px; line-height:1.65; margin-bottom:24px; word-break:break-word; }
.confirm-box .cf-actions{ display:flex; gap:10px; justify-content:flex-end; padding-top:18px; border-top:1px solid var(--line); }

/* 密钥页：引擎卡片网格（对齐用户端观感） */
.keys-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:18px; }
.key-card{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; display:flex; flex-direction:column; overflow:hidden; transition:border-color .18s, transform .18s; }
.key-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--accent, var(--brand)); opacity:.9; }
.key-card:hover{ border-color:var(--line-2); }
.key-card.openai{ --accent:#10a37f; }
.key-card.fish{ --accent:#5b8cff; }
.key-card.eleven{ --accent:#d97cf5; }
.key-card-hd{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.key-logo{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:19px; background:color-mix(in srgb, var(--accent) 18%, transparent); flex-shrink:0; }
.key-card-title{ flex:1; min-width:0; }
.key-card-name{ font-size:15px; font-weight:700; display:block; }
.key-card-sub{ font-size:11px; color:var(--faint); }
.key-card-note{ color:var(--muted); font-size:12px; margin:0 0 14px; line-height:1.55; min-height:56px; }
.key-badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:11px; white-space:nowrap;
  background:rgba(248,113,113,.14); color:#fca5a5; }
.key-badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.key-badge.is-on{ background:rgba(52,211,153,.14); color:#6ee7b7; }
.key-fieldlbl{ font-size:11px; color:var(--muted); margin:0 0 5px 2px; }
.key-input{ position:relative; display:flex; align-items:center; gap:8px; margin-bottom:12px;
  padding:0 6px 0 12px; border-radius:var(--radius-sm); border:1px solid var(--line-2); background:var(--bg-2);
  transition:border-color .15s; }
.key-input:focus-within{ border-color:var(--accent, var(--brand)); }
.key-input .ico{ opacity:.6; font-size:14px; flex-shrink:0; }
.key-input input{ flex:1; border:none; background:transparent; color:var(--text); outline:none; font-size:13px; min-width:0; padding:10px 0; }
.key-eye{ border:none; background:transparent; color:var(--muted); cursor:pointer; padding:6px; font-size:15px; line-height:1; border-radius:6px; }
.key-eye:hover{ color:var(--text); background:var(--surface-2); }
.key-bal{ margin-top:auto; display:flex; align-items:center; gap:8px; padding-top:12px;
  font-size:12px; color:var(--muted); border-top:1px dashed var(--line); min-height:20px; }
.key-bal .bal-dot{ width:7px; height:7px; border-radius:50%; background:var(--faint); flex-shrink:0; }
.key-bal.err{ color:#fca5a5; } .key-bal.err .bal-dot{ background:#f87171; }
.key-bal.ok{ color:#6ee7b7; } .key-bal.ok .bal-dot{ background:#34d399; }
.key-bal.loading .bal-dot{ background:var(--warn); animation:balpulse 1s ease-in-out infinite; }
@keyframes balpulse{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }
.key-card-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; }
.key-card-foot .btn.sm{ flex:1; justify-content:center; }
.key-link{ color:var(--faint); font-size:11px; text-decoration:none; white-space:nowrap; }
.key-link:hover{ color:var(--brand); text-decoration:underline; }
.keys-actions{ display:flex; gap:10px; flex-wrap:wrap; margin:0 0 20px; }

/* 费用明细页 */
.usage-summary{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.usum{ flex:1; min-width:120px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 15px; }
.usum .k{ color:var(--muted); font-size:11px; }
.usum .v{ font-size:19px; font-weight:700; margin-top:3px; }
.usum.accent .v{ color:var(--brand); }
.usum.ok .v{ color:var(--ok); }
.quick-ranges{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.chip{ padding:5px 12px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface-2);
  color:var(--muted); cursor:pointer; font-size:12px; user-select:none; transition:.15s; }
.chip:hover{ color:var(--text); border-color:var(--brand); }
.chip.active{ background:var(--brand); border-color:var(--brand); color:#fff; }
.stats-panel{ border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); margin-bottom:18px; overflow:hidden; }
.stats-panel > summary{ list-style:none; cursor:pointer; padding:13px 16px; font-size:13px; color:var(--muted);
  display:flex; align-items:center; gap:8px; user-select:none; }
.stats-panel > summary::-webkit-details-marker{ display:none; }
.stats-panel > summary::before{ content:"▸"; transition:transform .18s; color:var(--faint); }
.stats-panel[open] > summary::before{ transform:rotate(90deg); }
.stats-panel > summary:hover{ color:var(--text); }
.stats-panel .stats-body{ padding:4px 16px 16px; border-top:1px solid var(--line); }
.pager{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; font-size:13px; color:var(--muted); }
.pager .btn.sm{ min-width:64px; justify-content:center; }
.pager .pg-info{ color:var(--text); }
.pager select{ padding:5px 8px; border-radius:var(--radius-sm); border:1px solid var(--line-2); background:var(--bg-2); color:var(--text); font-size:12px; }
.pager .spacer{ flex:1; }

/* 总览：重点数字卡（首张高亮） */
.stat-row{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:22px; }
.stat{ flex:1; min-width:170px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; position:relative; }
.stat .k{ color:var(--muted); font-size:12px; }
.stat .v{ font-size:24px; font-weight:700; margin-top:8px; }
.stat .v.sm{ font-size:17px; }
.stat .sub{ color:var(--faint); font-size:11px; margin-top:4px; }
.stat.hero{ background:linear-gradient(135deg, rgba(91,140,255,.16), rgba(63,111,224,.05)); border-color:rgba(91,140,255,.35); }
.stat.hero .v{ font-size:30px; color:#a9c3ff; }
.stat.pos .v{ color:var(--ok); } .stat.neg .v{ color:var(--danger); }
.health{ display:flex; align-items:center; gap:8px; padding:11px 16px; border-radius:var(--radius-sm);
  font-size:13px; margin-bottom:22px; border:1px solid var(--line); background:var(--surface); }
.health.ok{ border-color:rgba(52,211,153,.3); background:rgba(52,211,153,.08); color:#6ee7b7; }
.health.warn{ border-color:rgba(251,191,36,.3); background:rgba(251,191,36,.08); color:#fcd34d; }
.section-hd{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:26px 0 12px; }
.section-hd h3{ margin:0; font-size:15px; }
.section-hd .link{ color:var(--brand); font-size:12px; cursor:pointer; }
.section-hd .link:hover{ text-decoration:underline; }

/* 客户管理表格：不裁剪，避免下拉菜单被切掉；圆角改到首尾单元格 */
#view-clients table{ overflow:visible; }
#view-clients thead th:first-child{ border-top-left-radius:var(--radius); }
#view-clients thead th:last-child{ border-top-right-radius:var(--radius); }

/* 下拉「更多」菜单 */
.dropdown{ position:relative; display:inline-block; }
.dropdown-menu{ position:absolute; right:0; top:calc(100% + 4px); z-index:30; min-width:132px;
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--radius-sm); padding:5px;
  box-shadow:0 8px 24px rgba(0,0,0,.4); display:none; }
.dropdown.open .dropdown-menu{ display:block; }
.dropdown-menu button{ display:block; width:100%; text-align:left; padding:8px 12px; border:none; background:transparent;
  color:var(--text); cursor:pointer; font-size:13px; border-radius:6px; white-space:nowrap; }
.dropdown-menu button:hover{ background:var(--brand); color:#fff; }
.dropdown-menu button.danger{ color:#fca5a5; }
.dropdown-menu button.danger:hover{ background:rgba(248,113,113,.9); color:#fff; }
.dropdown-menu .sep{ height:1px; background:var(--line); margin:5px 0; }

/* 占位页 */
.placeholder{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:70px 20px; border:1px dashed var(--line-2); border-radius:var(--radius); background:var(--surface); color:var(--muted); }
.placeholder-ico{ font-size:44px; opacity:.85; }
.placeholder-title{ font-size:16px; font-weight:700; color:var(--text); }
.placeholder-desc{ font-size:13px; }

/* 页内 Tab 栏 */
.tabbar{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:18px; }
.tab-btn{ padding:9px 16px; border:none; background:transparent; color:var(--muted); cursor:pointer;
  font-size:14px; border-bottom:2px solid transparent; margin-bottom:-1px; transition:.15s; }
.tab-btn:hover{ color:var(--text); }
.tab-btn.active{ color:var(--brand); border-bottom-color:var(--brand); font-weight:600; }

/* 周期迷你卡（近 3/7/10/30 天） */
.period-mini{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.pmini{ flex:1; min-width:130px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 14px; position:relative; overflow:hidden; }
.pmini::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--brand); opacity:.7; }
.pmini .pm-lbl{ color:var(--muted); font-size:11px; }
.pmini .pm-main{ font-size:18px; font-weight:700; margin-top:4px; }
.pmini .pm-sub{ color:var(--faint); font-size:11px; margin-top:2px; }
.period-mini-detail{ border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); margin-bottom:18px; overflow:hidden; }
.period-mini-detail > summary{ list-style:none; cursor:pointer; padding:11px 16px; font-size:13px; color:var(--muted);
  display:flex; align-items:center; gap:8px; user-select:none; }
.period-mini-detail > summary::-webkit-details-marker{ display:none; }
.period-mini-detail > summary::before{ content:"▸"; transition:transform .18s; color:var(--faint); }
.period-mini-detail[open] > summary::before{ transform:rotate(90deg); }
.period-mini-detail > summary:hover{ color:var(--text); }
.period-mini-detail .pmd-body{ padding:4px 16px 16px; border-top:1px solid var(--line); }

/* 设置页 */
.settings-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; max-width:760px; }
.set-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; }
.set-card h3{ margin:0 0 4px; font-size:15px; }
.set-card .set-desc{ color:var(--muted); font-size:12px; margin:0 0 16px; line-height:1.55; }
.set-input-wrap{ position:relative; display:flex; align-items:center; margin-bottom:12px;
  padding:0 6px 0 12px; border-radius:var(--radius-sm); border:1px solid var(--line-2); background:var(--bg-2); }
.set-input-wrap:focus-within{ border-color:var(--brand); }
.set-input-wrap input{ flex:1; border:none; background:transparent; color:var(--text); outline:none; font-size:13px; padding:10px 0; }
.pw-meter{ height:5px; border-radius:999px; background:var(--bg-2); overflow:hidden; margin:2px 0 6px; }
.pw-meter i{ display:block; height:100%; width:0; border-radius:999px; transition:width .25s, background .25s; }
.pw-hint{ font-size:11px; color:var(--faint); margin-bottom:14px; }
.set-info-row{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; }
.set-info-row:last-child{ border-bottom:none; }
.set-info-row .k{ color:var(--muted); }

/* 部署 / 监控（宝塔）*/
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.card-head h3{ margin:0; font-size:15px; }
.card-body{ font-size:13px; }
.btnrow{ display:flex; gap:8px; flex-wrap:wrap; }
.modal-title{ margin:0 0 16px; font-size:16px; }
.btn.xs{ padding:4px 9px; font-size:12px; border-radius:var(--radius-sm); }
.bt-serverbar{ display:flex; align-items:center; gap:8px; }
.bt-serverbar label{ color:var(--muted); font-size:12px; }
.bt-serverbar select{ padding:6px 10px; border-radius:var(--radius-sm); border:1px solid var(--line-2);
  background:var(--bg-2); color:var(--text); outline:none; font-size:13px; max-width:340px; }
.bt-noserver{ padding:26px 20px; text-align:center; color:var(--muted); border:1px dashed var(--line-2);
  border-radius:var(--radius); background:var(--surface); }
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.stat-card{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px; }
.stat-card .stat-k{ color:var(--muted); font-size:12px; }
.stat-card .stat-v{ font-size:16px; font-weight:700; margin-top:6px; word-break:break-all; }

/* ===========================================================
   移动端适配（平板/手机）
   桌面为「一级图标栏 + 二级菜单 + 主区」三栏；小屏改为
   顶部两条横向栏（可横滑）+ 全宽主区，表格横滑、下拉底部弹出。
   =========================================================== */
@media (max-width: 820px){
  /* 三栏 → 顶部两横条 + 主区 */
  .app{ grid-template-columns:1fr; grid-template-rows:auto auto 1fr; min-height:100vh; }

  /* 一级图标栏：顶部横向条 */
  .rail{ flex-direction:row; align-items:center; gap:4px; padding:8px 10px;
    border-right:none; border-bottom:1px solid var(--line); overflow-x:auto; }
  .rail-brand{ margin:0 6px 0 0; width:34px; height:34px; font-size:15px; flex:none; }
  .rail-items{ flex-direction:row; flex:1; width:auto; gap:4px; justify-content:flex-start; }
  .rail-item{ flex:none; width:auto; min-width:56px; padding:6px 10px; }
  .rail-item .rail-ico{ font-size:17px; }
  .rail-logout{ flex:none; width:auto; min-width:52px; padding:6px 10px; }

  /* 二级菜单：顶部横向条 */
  .submenu{ flex-direction:row; align-items:center; gap:8px; padding:8px 10px;
    border-right:none; border-bottom:1px solid var(--line); overflow-x:auto; }
  .submenu-title{ flex:none; padding:0 6px 0 4px; font-size:14px; white-space:nowrap; }
  .submenu-nav{ flex-direction:row; flex:1; gap:4px; }
  .nav-item{ flex:none; white-space:nowrap; padding:7px 12px; }

  /* 主区收窄内边距 */
  .main{ padding:16px 14px; }
  h2.page-title{ font-size:19px; }
  .page-sub{ margin-bottom:16px; }

  /* 表格：整体横向滑动，单元格不换行（内部匿名表格盒仍保证列对齐） */
  .view table{ display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
  #view-clients table{ overflow-x:auto; }
  th,td{ padding:9px 11px; }

  /* 操作「更多」下拉：改为屏幕底部弹出，避免被表格横滑容器裁掉 */
  .dropdown.open .dropdown-menu{ position:fixed; left:12px; right:12px; bottom:12px; top:auto;
    min-width:0; padding:6px; box-shadow:0 -10px 34px rgba(0,0,0,.5); z-index:60; }
  .dropdown.open .dropdown-menu button{ padding:12px; font-size:14px; }

  /* 卡片/统计：更小列宽自适应 */
  .cards{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
  .card .v{ font-size:22px; }
  .stat-row{ gap:10px; }
  .stat{ min-width:calc(50% - 5px); padding:14px 15px; }
  .stat .v{ font-size:20px; } .stat.hero .v{ font-size:24px; }
  .stat-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
  .keys-grid{ grid-template-columns:1fr; }
  .settings-grid{ grid-template-columns:1fr; max-width:none; }

  /* 弹窗抽屉：小屏全宽 */
  .modal, .confirm-box{ width:100%; max-width:100%; padding:20px 16px; }
  .modal-actions, .confirm-box .cf-actions{ position:sticky; bottom:0; background:var(--surface); }

  /* toast 横跨顶部 */
  .toast{ top:12px; right:12px; left:12px; max-width:none; }

  /* 登录框留边 */
  .login-box{ width:100%; max-width:92vw; }
}

@media (max-width: 480px){
  .main{ padding:14px 11px; }
  .rail-item .rail-txt{ font-size:10px; }
  /* 统计/卡片两列或单列，避免数字被挤压换行 */
  .cards{ grid-template-columns:1fr 1fr; }
  .stat{ min-width:100%; }
  .stat-grid{ grid-template-columns:1fr 1fr; }
  h2.page-title{ font-size:18px; }
  .toolbar{ gap:8px; }
  .toolbar input, .toolbar select{ flex:1; min-width:0; }
}