/* ============================================================================
   授权服务端 · 管理后台 UI 原型 V2.0 · 全局样式（基座）
   ----------------------------------------------------------------------------
   视觉系统沿用《原型-客户端-V2》：同一套 CSS 变量 / 卡片式 / 表格 / toast / modal。
   ★ 本文件由基座产出。page-*.js 需要的样式一律【追加到文件末尾的“页面追加区”】，
     并用 /* ==== page-xxx ==== *\/ … /* ==== /page-xxx ==== *\/ 包起来，
     不得修改本行以上的任何一行。
   ★ 零外链：无 @import、无 url(http…)、无外部字体、无外部图片。
   ★ <=768px 断点是硬需求（第 22 章：目标是你在手机浏览器上也能完成开通和续期）。
   ========================================================================== */

:root {
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --border: #e4eaf2;
  --border-strong: #d6deea;
  --text: #13233a;
  --muted: #70809a;
  --muted-2: #98a5b8;
  --primary: #368af5;
  --primary-soft: #edf5ff;
  --success: #12a67d;
  --success-soft: #eafaf5;
  --danger: #ef4355;
  --danger-soft: #fff1f3;
  --warning: #d99124;
  --warning-soft: #fff8e9;
  --shadow: 0 4px 15px rgba(26, 55, 91, .06);
  --radius: 10px;
  --font: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --sidebar-w: 186px;
  --topbar-h: 56px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 13px; -webkit-text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
a { color: var(--primary); }

/* ---------------------------------------------------------------- 骨架 */
.viewport { min-height: 100vh; display: flex; flex-direction: column; }
.proto-strip {
  flex: 0 0 auto; padding: 6px 16px; background: #101c30; color: #b9c8dd;
  font-size: 11px; letter-spacing: .04em; display: flex; align-items: center; gap: 10px;
}
.proto-strip .ps-dot { width: 6px; height: 6px; border-radius: 50%; background: #f0b34a; flex: 0 0 auto; }
.proto-strip .ps-right { margin-left: auto; color: #7e91ab; font-size: 10.5px; }
.app-shell { flex: 1 1 auto; min-height: 0; display: flex; }

/* ---------------------------------------------------------------- 侧边栏 */
.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--surface);
  border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto;
}
.brand { height: 62px; padding: 0 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); }
.brand-mark { width: 27px; height: 27px; border-radius: 7px; display: grid; place-items: center; background: #2f4a6d; color: #fff; font-weight: 800; font-size: 14px; flex: 0 0 auto; }
.brand-name { font-weight: 700; font-size: 12.5px; letter-spacing: .2px; }
.brand-subtitle { color: var(--muted-2); font-size: 10px; margin-top: 3px; }
.nav { padding: 14px 10px; }
.nav-label { padding: 0 12px 7px; color: var(--muted-2); font-size: 10px; letter-spacing: .08em; }
.nav-label-spaced { margin-top: 16px; }
.nav-item {
  width: 100%; min-height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 12px; margin: 3px 0;
  border: 0; background: transparent; color: #34445c; border-radius: 8px; text-align: left; transition: .15s ease;
}
.nav-item:hover { background: #f4f8fe; color: var(--primary); }
.nav-item.is-active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.nav-icon { width: 17px; height: 17px; display: inline-grid; place-items: center; color: currentColor; flex: 0 0 auto; }
.nav-icon svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav-badge { min-width: 18px; height: 18px; padding: 0 5px; margin-left: auto; display: grid; place-items: center; border-radius: 9px; background: var(--danger-soft); color: var(--danger); font-size: 10px; font-weight: 700; }
.nav-badge.warn { background: var(--warning-soft); color: #a86b1a; }
.sidebar-footer { margin-top: auto; padding: 14px 16px 16px; color: var(--muted-2); border-top: 1px solid var(--border); font-size: 10px; line-height: 1.7; }
.sidebar-footer b { color: #6a7b93; }

/* ---------------------------------------------------------------- 顶栏 */
.main-area { min-width: 0; min-height: 0; flex: 1; display: flex; flex-direction: column; }
.topbar {
  flex: 0 0 auto; min-height: var(--topbar-h); background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 0 18px; display: flex; align-items: center; gap: 12px;
}
.hamburger { display: none; width: 34px; height: 34px; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface); color: #4b5e79; align-items: center; justify-content: center; flex: 0 0 auto; }
.hamburger svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.topbar-title { font-weight: 700; font-size: 14px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-spacer { margin-left: auto; }
.topbar-actions { display: flex; align-items: center; gap: 10px; white-space: nowrap; flex: 0 0 auto; }
.srv-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-soft); font-size: 11px; color: #4d5f79; }
.srv-chip .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(18,166,125,.13); flex: 0 0 auto; }
.srv-chip.down { border-color: #ffc2ca; background: var(--danger-soft); color: #c0374a; }
.srv-chip.down .status-dot { background: var(--danger); box-shadow: 0 0 0 3px rgba(239,67,85,.14); }
.top-link { border: 0; background: transparent; color: var(--muted); padding: 4px 2px; font-size: 12px; }
.top-link:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.who { font-size: 11.5px; color: #4d5f79; }
.who b { color: var(--text); }
.clock { color: #466081; font-size: 12px; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- 抽屉（移动端侧边栏） */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(16,28,48,.42); z-index: 80; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 258px; max-width: 84vw; z-index: 81;
  background: var(--surface); border-right: 1px solid var(--border); box-shadow: 0 0 40px rgba(11,32,63,.2);
  transform: translateX(-102%); transition: transform .2s ease; display: flex; flex-direction: column; overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }
.drawer .brand { height: 58px; }
.drawer-close { margin-left: auto; border: 0; background: transparent; color: var(--muted-2); font-size: 20px; line-height: 1; padding: 4px 6px; }
.drawer .nav-item { min-height: 46px; font-size: 13.5px; }
.drawer .nav-sub { display: block; font-size: 10.5px; color: var(--muted-2); font-weight: 400; margin-top: 2px; }
.drawer .nav-item.is-active .nav-sub { color: #6ca4ec; }

/* ---------------------------------------------------------------- 内容区 */
.content { flex: 1 1 auto; min-height: 0; padding: 18px 22px 64px; overflow: auto; }
.page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; gap: 16px; flex-wrap: wrap; }
.page-title { margin: 0; font-size: 19px; letter-spacing: -.02em; }
.page-subtitle { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; max-width: 860px; }
.page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.section-gap { margin-top: 14px; }
.page-stub { padding: 56px 20px; text-align: center; color: var(--muted-2); line-height: 2; }
.page-stub .stub-key { font-family: var(--mono); color: #64748b; background: var(--surface-soft); padding: 2px 7px; border-radius: 5px; }

/* ---------------------------------------------------------------- 按钮 */
.button { min-height: 32px; padding: 0 13px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: #52637b; transition: .15s ease; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.button:hover { border-color: #abc5e8; color: var(--primary); background: #fbfdff; }
.button-small { min-height: 29px; font-size: 12px; padding: 0 11px; }
.button-tiny { min-height: 25px; font-size: 11.5px; padding: 0 9px; border-radius: 5px; }
.button-primary { border-color: var(--primary); background: var(--primary); color: #fff; }
.button-primary:hover { background: #247be8; color: #fff; }
.button-success { border-color: #bde9da; background: var(--success-soft); color: var(--success); }
.button-success:hover { background: #dcf6ec; color: #078b68; }
.button-danger { border-color: #ffc2ca; background: var(--danger-soft); color: var(--danger); }
.button-danger:hover { background: #ffe5e8; color: #d92e43; }
.button-danger-solid { border-color: var(--danger); background: var(--danger); color: #fff; }
.button-danger-solid:hover { background: #de2f42; color: #fff; }
.button-warning { border-color: #f3d7a6; background: var(--warning-soft); color: #bd7311; }
.button-warning:hover { background: #fdf0d8; color: #a05f08; }
.button-ghost { border-color: transparent; background: transparent; color: var(--primary); padding: 0 6px; }
.button-ghost:hover { background: var(--primary-soft); }
.button-block { width: 100%; }
.button:disabled { cursor: not-allowed; opacity: .5; }
.button:disabled:hover { border-color: var(--border-strong); color: #52637b; background: var(--surface); }
.button-link { border: 0; background: transparent; color: var(--primary); padding: 0 2px; font-size: 12px; }
.button-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.button-link.danger { color: var(--danger); }

/* ---------------------------------------------------------------- 下拉菜单（行内「续期」用） */
.dropdown { position: relative; display: inline-flex; }
.dd-panel {
  position: absolute; top: calc(100% + 5px); left: 0; z-index: 40; min-width: 168px; padding: 5px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px;
  box-shadow: 0 12px 34px rgba(14,39,73,.16); display: none;
}
.dropdown.is-open .dd-panel { display: block; }
.dropdown.dd-right .dd-panel { left: auto; right: 0; }
.dd-item { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: #4b5e79; text-align: left; font-size: 12px; }
.dd-item:hover { background: var(--primary-soft); color: var(--primary); }
.dd-item .dd-note { margin-left: auto; color: var(--muted-2); font-size: 10.5px; }
.dd-item:hover .dd-note { color: #7fb0ef; }
.dd-sep { height: 1px; background: var(--border); margin: 4px 2px; }
.dd-head { padding: 5px 9px 4px; color: var(--muted-2); font-size: 10px; letter-spacing: .06em; }
.caret { font-size: 9px; opacity: .7; }

/* ---------------------------------------------------------------- 卡片 / 指标 */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card + .card { margin-top: 14px; }
.card.flat { box-shadow: none; }
.card.danger-card { border-color: #ffc2ca; }
.card.warn-card { border-color: #f3d7a6; }
.card-header { padding: 15px 17px 10px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.card-title { font-size: 14px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-subtitle { color: var(--muted); font-size: 11px; margin: 5px 0 0; line-height: 1.65; }
.card-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card-body { padding: 0 17px 17px; }
.card-body.pt { padding-top: 15px; }
.card-body.flush { padding-left: 0; padding-right: 0; }
.card-foot { padding: 11px 17px; border-top: 1px solid var(--border); color: var(--muted-2); font-size: 11px; line-height: 1.75; background: var(--surface-soft); border-radius: 0 0 var(--radius) var(--radius); }
.card-foot b { color: #6a7b93; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.metric-grid.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.metric-grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric-grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metric { padding: 14px 15px; min-height: 92px; display: flex; flex-direction: column; }
.metric.clickable { cursor: pointer; transition: .15s ease; }
.metric.clickable:hover { border-color: #abc5e8; box-shadow: 0 6px 20px rgba(26,55,91,.09); }
.metric-label { color: var(--muted); font-size: 11px; }
.metric-value { margin-top: 7px; font-size: 22px; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.metric-unit { font-size: 12px; font-weight: 600; margin-left: 3px; color: var(--muted); letter-spacing: 0; }
.metric-note { color: var(--muted-2); margin-top: auto; padding-top: 6px; font-size: 10.5px; line-height: 1.55; }
.metric-value.success { color: var(--success); }
.metric-value.warning { color: var(--warning); }
.metric-value.danger { color: var(--danger); }
.metric-value.muted { color: var(--muted-2); }

.grid-2 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 14px; }
.grid-2.equal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

/* ---------------------------------------------------------------- 表单控件 */
.control-row { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: start; gap: 12px; margin: 13px 0; }
.control-row.center { align-items: center; }
.control-label { color: #60718a; padding-top: 8px; }
.control-row.center .control-label { padding-top: 0; }
.control-content { min-width: 0; }
.field-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.input, .select, .textarea { min-width: 0; border: 1px solid var(--border-strong); border-radius: 5px; padding: 0 10px; background: var(--surface); color: var(--text); outline: none; }
.input, .select { height: 34px; }
.textarea { padding: 8px 10px; line-height: 1.7; resize: vertical; min-height: 84px; width: 100%; }
.input:focus, .select:focus, .textarea:focus { border-color: #75aaf1; box-shadow: 0 0 0 3px rgba(54,138,245,.1); }
.input.mono { font-family: var(--mono); }
.input.num { width: 116px; text-align: right; font-variant-numeric: tabular-nums; }
.input.grow { flex: 1 1 200px; }
.input.block, .select.block { width: 100%; }
.select { min-width: 116px; color: #4b5e79; }
.hint { color: var(--muted-2); font-size: 11px; line-height: 1.6; }
.hint-block { display: block; margin-top: 6px; }
.muted { color: var(--muted); }
.muted-2 { color: var(--muted-2); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.divider { height: 1px; background: var(--border); margin: 15px 0; }
.strong { font-weight: 700; color: var(--text); }

.stepper { display: inline-flex; height: 34px; border: 1px solid var(--border-strong); border-radius: 5px; overflow: hidden; background: var(--surface); }
.stepper button { width: 34px; border: 0; background: var(--surface-soft); color: var(--muted); font-size: 15px; }
.stepper button:hover { background: var(--primary-soft); color: var(--primary); }
.stepper button:disabled { opacity: .45; cursor: not-allowed; }
.stepper input { width: 84px; border: 0; border-left: 1px solid var(--border); border-right: 1px solid var(--border); text-align: center; outline: none; color: var(--text); font-variant-numeric: tabular-nums; }
.stepper.narrow input { width: 58px; }
.stepper-suffix { display: inline-flex; align-items: center; padding: 0 9px; background: var(--surface-soft); color: var(--muted-2); font-size: 11px; border-left: 1px solid var(--border); }

.switch { position: relative; display: inline-flex; align-items: center; width: 40px; height: 22px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-track { position: absolute; inset: 0; background: #dfe5ee; border-radius: 13px; transition: .2s; cursor: pointer; }
.switch-track::after { content: ""; position: absolute; width: 18px; height: 18px; left: 2px; top: 2px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(27,54,88,.2); transition: .2s; }
.switch input:checked + .switch-track { background: var(--primary); }
.switch input:checked + .switch-track::after { transform: translateX(18px); }
.switch input:disabled + .switch-track { opacity: .5; cursor: not-allowed; }
.toggle-content { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toggle-text { color: #4b5e79; font-size: 12px; }

.checkline { display: inline-flex; align-items: center; gap: 7px; color: #4b5e79; font-size: 12px; cursor: pointer; }
.checkline input { width: 15px; height: 15px; accent-color: var(--primary); margin: 0; flex: 0 0 auto; }

/* 单选卡（续期口径 / 有效期档位） */
.radio-group { display: flex; gap: 8px; flex-wrap: wrap; }
.radio-card {
  position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 132px; flex: 1 1 132px;
  padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); cursor: pointer; transition: .15s ease;
}
.radio-card:hover { border-color: #abc5e8; }
.radio-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio-card .rc-title { font-weight: 650; color: #34445c; font-size: 12.5px; }
.radio-card .rc-note { color: var(--muted-2); font-size: 10.5px; line-height: 1.5; }
.radio-card.is-checked { border-color: var(--primary); background: var(--primary-soft); }
.radio-card.is-checked .rc-title { color: var(--primary); }
.radio-card.is-checked .rc-note { color: #5d94dd; }
.radio-card.warnish.is-checked { border-color: var(--warning); background: var(--warning-soft); }
.radio-card.warnish.is-checked .rc-title { color: #a86b1a; }
.radio-card.warnish.is-checked .rc-note { color: #b07f34; }

/* 计算预览盒（续期实时预览） */
.calc-box { margin-top: 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-soft); padding: 4px 13px; }
.calc-line { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.calc-line:last-child { border-bottom: 0; }
.calc-line .k { color: var(--muted); font-size: 11.5px; flex: 0 0 92px; }
.calc-line .v { color: var(--text); font-size: 12.5px; font-variant-numeric: tabular-nums; min-width: 0; }
.calc-line .v.big { font-size: 16px; font-weight: 750; letter-spacing: -.02em; }
.calc-line .v.big.warn { color: #a86b1a; }
.calc-line .v.big.danger { color: var(--danger); }

/* 复制块（开通账号页的四行文本 —— 这一页存在的全部意义） */
.copybox { border: 1px solid var(--border-strong); border-radius: 9px; background: #0f1a2b; color: #d6e2f2; padding: 13px 15px; font-family: var(--mono); font-size: 12px; line-height: 2; white-space: pre-wrap; word-break: break-all; }
.copybox .cb-k { color: #7fa6d8; }
.copy-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.copy-fallback { width: 100%; min-height: 120px; font-family: var(--mono); font-size: 12px; line-height: 1.9; }

/* ---------------------------------------------------------------- 表格 */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap.scroll-y { max-height: 460px; overflow-y: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 10px 9px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; font-size: 12px; vertical-align: middle; }
.data-table th { color: var(--muted); font-weight: 500; font-size: 11px; background: var(--surface); position: sticky; top: 0; z-index: 1; }
.data-table td { color: #4b5e79; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: #fbfdff; }
.data-table .wrap { white-space: normal; min-width: 170px; line-height: 1.55; }
.data-table .num, .data-table .right { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .center { text-align: center; }
.data-table .ops { white-space: nowrap; }
.data-table tr.row-danger td { background: #fff7f8; }
.data-table tr.row-danger:hover td { background: #ffeff1; }
.data-table tr.row-warn td { background: #fffcf4; }
.data-table tr.row-warn:hover td { background: #fff8e9; }
.data-table tr.row-muted td { color: var(--muted-2); }
.data-table tr.row-off td { background: #f7f9fc; color: var(--muted-2); }
.table-note { margin: 10px 0 0; color: var(--muted-2); font-size: 11px; line-height: 1.8; }
.th-sort { cursor: pointer; user-select: none; }
.th-sort .sort-mark { margin-left: 4px; opacity: .55; font-size: 9px; }
.th-sort.is-sorted { color: var(--primary); }
.th-sort.is-sorted .sort-mark { opacity: 1; }

/* ---------------------------------------------------------------- 标签 / 徽章 */
.tag { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 21px; padding: 0 7px; border-radius: 5px; font-size: 11px; font-weight: 650; }
.tag.info { color: var(--primary); background: var(--primary-soft); }
.tag.gray { color: var(--muted); background: #f1f4f8; }
.tag.warn { color: #a86b1a; background: var(--warning-soft); }
.tag.danger { color: var(--danger); background: var(--danger-soft); }
.tag.success { color: var(--success); background: var(--success-soft); }
.tag.dark { color: #fff; background: #4a5c78; }
.tag.outline { background: transparent; border: 1px solid var(--border-strong); color: var(--muted); font-weight: 500; }
.tag + .tag { margin-left: 5px; }

/* 剩余天数药丸 */
.days { display: inline-flex; align-items: center; height: 21px; padding: 0 8px; border-radius: 11px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.days.normal { background: var(--success-soft); color: var(--success); }
.days.soon   { background: #eef4fd; color: #2f6fc4; }
.days.urgent { background: var(--warning-soft); color: #a86b1a; }
.days.today  { background: #ffe9c9; color: #96540b; }
.days.dead   { background: var(--danger-soft); color: var(--danger); }

/* 到期日单元格：★到期时刻恒为「当天 23:59:59 Asia/Shanghai」，任何地方都不许只显示日期 */
.expiry { line-height: 1.45; }
.expiry .ex-date { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.expiry .ex-time { color: var(--muted-2); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.expiry.is-dead .ex-date { color: var(--danger); }

/* 登录结果 result 色板（页 4 排障用） */
.res { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; font: 650 10.5px var(--mono); }
.res.ok           { background: var(--success-soft); color: var(--success); }
.res.bad_pwd      { background: var(--warning-soft); color: #a86b1a; }
.res.expired      { background: var(--danger-soft);  color: var(--danger); }
.res.disabled     { background: #eef1f5; color: #5b6b83; }
.res.fp_mismatch  { background: #f3ecff; color: #6c4bc9; }
.res.quota_full   { background: #fff0e6; color: #b45c15; }
.res.rate_limited { background: #ffeef2; color: #c2415c; }

/* 机器码 */
.fp { font-family: var(--mono); font-size: 11.5px; color: #3f5470; letter-spacing: .02em; }
.fp-parts { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.fp-part { width: 15px; height: 15px; border-radius: 4px; display: inline-grid; place-items: center; font-size: 9px; font-weight: 700; background: var(--success-soft); color: var(--success); }
.fp-part.miss { background: var(--danger-soft); color: var(--danger); }

/* 键值清单（详情页 / 设置页） */
.kv { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 0; }
.kv > dt { padding: 8px 0; color: var(--muted); font-size: 11.5px; border-bottom: 1px dashed var(--border); }
.kv > dd { padding: 8px 0; margin: 0; color: #3f5470; font-size: 12px; border-bottom: 1px dashed var(--border); min-width: 0; word-break: break-word; }
.kv > dt:last-of-type, .kv > dd:last-of-type { border-bottom: 0; }

/* 分组标题（到期看板三分组） */
.group-head { display: flex; align-items: center; gap: 9px; margin: 0 0 9px; }
.group-head .gh-title { font-size: 13.5px; font-weight: 700; }
.group-head .gh-count { min-width: 22px; height: 20px; padding: 0 7px; border-radius: 10px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; background: #eef1f5; color: #5b6b83; }
.group-head.danger .gh-title { color: var(--danger); }
.group-head.danger .gh-count { background: var(--danger-soft); color: var(--danger); }
.group-head.warn .gh-title { color: #a86b1a; }
.group-head.warn .gh-count { background: var(--warning-soft); color: #a86b1a; }
.group-head .gh-note { color: var(--muted-2); font-size: 11px; margin-left: auto; }

/* 内联编辑（备注） */
.inline-edit { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 260px; }
.inline-edit .ie-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px dashed transparent; cursor: text; padding: 2px 0; }
.inline-edit:hover .ie-text { border-bottom-color: var(--border-strong); }
.inline-edit .ie-pencil { opacity: 0; border: 0; background: transparent; color: var(--muted-2); padding: 0 2px; font-size: 11px; }
.inline-edit:hover .ie-pencil { opacity: 1; }
.inline-edit input { height: 28px; }

/* 筛选条 */
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.toolbar .input { width: 190px; }
.toolbar .select { width: 130px; }
.toolbar-spacer { margin-left: auto; }
.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 7px; overflow: hidden; background: var(--surface); }
.seg button { min-height: 32px; padding: 0 12px; border: 0; border-left: 1px solid var(--border); background: transparent; color: #5b6b83; font-size: 12px; white-space: nowrap; }
.seg button:first-child { border-left: 0; }
.seg button.is-active { background: var(--primary-soft); color: var(--primary); font-weight: 650; }
.seg .seg-count { margin-left: 5px; font-size: 10px; opacity: .75; }

/* ---------------------------------------------------------------- 提示块 */
.notice { padding: 11px 13px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-soft); color: var(--muted); font-size: 11.5px; line-height: 1.8; }
.notice + .notice { margin-top: 9px; }
.notice.warning { border-color: #f3d7a6; background: var(--warning-soft); color: #a86b1a; }
.notice.danger  { border-color: #ffc2ca; background: var(--danger-soft); color: #c93649; }
.notice.success { border-color: #bde9da; background: var(--success-soft); color: #0a7d61; }
.notice.info    { border-color: #cfe3ff; background: var(--primary-soft); color: #1f63bd; }
.notice b, .notice strong { font-weight: 700; }
.notice .notice-title { display: block; font-weight: 700; margin-bottom: 4px; }
.notice code { font-family: var(--mono); background: rgba(255,255,255,.65); padding: 1px 5px; border-radius: 4px; }

.empty-state { padding: 34px 20px; text-align: center; color: var(--muted-2); }
.empty-state strong { display: block; color: #64748b; margin-bottom: 6px; font-size: 12.5px; }
.empty-state p { margin: 0; font-size: 11.5px; line-height: 1.8; }
.empty-icon { width: 42px; height: 42px; border-radius: 12px; background: var(--surface-soft); display: grid; place-items: center; margin: 0 auto 11px; color: var(--muted-2); }
.empty-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- Tab */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 14px; flex-wrap: wrap; }
.tab { min-height: 34px; padding: 0 14px; border: 0; background: transparent; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--primary); }
.tab.is-active { color: var(--primary); font-weight: 650; border-bottom-color: var(--primary); }
.tab .tab-count { margin-left: 6px; padding: 1px 6px; border-radius: 9px; background: #eef2f7; color: #6a7b93; font-size: 10px; }
.tab.is-active .tab-count { background: var(--primary-soft); color: var(--primary); }

/* ---------------------------------------------------------------- 弹窗 / 二次确认 */
.modal-backdrop { position: fixed; inset: 0; background: rgba(21,35,58,.4); z-index: 90; display: grid; place-items: center; padding: 22px; overflow: auto; }
.modal-backdrop.hidden { display: none; }
.modal { width: min(560px, 100%); max-height: calc(100vh - 50px); display: flex; flex-direction: column; background: var(--surface); border-radius: 12px; box-shadow: 0 18px 60px rgba(11,32,63,.24); overflow: hidden; }
.modal.wide { width: min(780px, 100%); }
.modal-head { padding: 18px 22px 10px; display: flex; align-items: flex-start; gap: 10px; }
.modal-head h2 { margin: 0; font-size: 16.5px; letter-spacing: -.02em; flex: 1 1 auto; }
.modal-level { flex: 0 0 auto; height: 20px; padding: 0 7px; border-radius: 5px; display: inline-grid; place-items: center; font: 700 10px var(--mono); }
.modal-level.L1 { background: var(--success-soft); color: var(--success); }
.modal-level.L2 { background: var(--warning-soft); color: #a86b1a; }
.modal-level.L3 { background: var(--danger-soft); color: var(--danger); }
.modal-cf { flex: 0 0 auto; color: var(--muted-2); font: 10px var(--mono); padding-top: 4px; }
.modal-sub { margin: 0 22px 10px; color: var(--muted); font-size: 11.5px; line-height: 1.7; }
.modal-body { padding: 0 22px 6px; overflow: auto; }
.modal-lead { margin: 0 0 13px; padding: 10px 12px; border-radius: 7px; font-size: 12px; line-height: 1.8; border: 1px solid #ffc2ca; background: var(--danger-soft); color: #c0374a; }
.modal-lead.warn { border-color: #f3d7a6; background: var(--warning-soft); color: #8f5a10; }
.modal-lead.info { border-color: #cfe3ff; background: var(--primary-soft); color: #1f63bd; }
.cf-sec + .cf-sec { margin-top: 13px; }
.cf-k { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 5px; }
.cf-items { margin: 0; padding-left: 18px; color: #55677f; font-size: 12px; line-height: 1.9; }
.cf-items b { color: var(--text); }
.cf-items .em-danger { color: var(--danger); font-weight: 700; }
.cf-items .em-success { color: var(--success); font-weight: 700; }
.cf-word { margin-top: 15px; padding: 12px 13px; border: 1px dashed var(--border-strong); border-radius: 8px; background: var(--surface-soft); }
.cf-word label { display: block; color: #55677f; font-size: 12px; margin-bottom: 8px; }
.cf-word label b { color: var(--danger); }
.cf-word input { width: 100%; height: 36px; border: 1px solid var(--border-strong); border-radius: 6px; padding: 0 11px; outline: none; background: var(--surface); }
.cf-word input:focus { border-color: #75aaf1; box-shadow: 0 0 0 3px rgba(54,138,245,.1); }
.modal-actions { padding: 14px 22px 18px; display: flex; justify-content: flex-end; align-items: center; gap: 8px; border-top: 1px solid var(--border); background: var(--surface); flex-wrap: wrap; }
.modal-actions .spacer { margin-right: auto; color: var(--muted-2); font-size: 11px; }
.modal-actions .button { min-height: 34px; }
.modal-actions .button.is-focus { box-shadow: 0 0 0 3px rgba(54,138,245,.18); }

/* ---------------------------------------------------------------- Toast */
.toast-region { position: fixed; right: 22px; bottom: 20px; z-index: 95; display: grid; gap: 8px; justify-items: end; }
.toast { max-width: 400px; padding: 10px 14px; border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: 7px; background: var(--surface); box-shadow: 0 8px 26px rgba(14,39,73,.16); color: #4d607b; font-size: 12px; line-height: 1.75; animation: toast-in .2s ease-out; }
.toast.success { border-left-color: var(--success); }
.toast.warning { border-left-color: var(--warning); }
.toast.danger  { border-left-color: var(--danger); }
.toast b { color: var(--text); }
.toast .toast-undo { margin-left: 8px; border: 0; background: transparent; color: var(--primary); padding: 0; font-size: 11.5px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------------------------------------------------------------- 演示场景坞 */
.demo-dock { position: fixed; left: calc(var(--sidebar-w) + 12px); bottom: 12px; z-index: 60; width: 226px; border: 1px dashed var(--border-strong); border-radius: 9px; background: rgba(255,255,255,.97); box-shadow: 0 10px 30px rgba(14,39,73,.12); font-size: 11px; }
.demo-dock-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px dashed var(--border); color: var(--muted); }
.demo-dock-head strong { color: #4b5e79; font-size: 11px; }
.demo-dock-toggle { margin-left: auto; border: 0; background: transparent; color: var(--muted-2); }
.demo-dock-body { padding: 8px 10px 10px; display: grid; gap: 5px; max-height: 42vh; overflow: auto; }
.demo-dock.collapsed .demo-dock-body, .demo-dock.collapsed .demo-dock-foot { display: none; }
.demo-state { width: 100%; text-align: left; padding: 6px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: #52637b; font-size: 11px; line-height: 1.45; display: flex; align-items: center; gap: 6px; }
.demo-state:hover { border-color: #abc5e8; color: var(--primary); }
.demo-state.is-active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 650; }
.demo-state .sid { font: 10px var(--mono); opacity: .7; }
.demo-dock-foot { padding: 0 10px 9px; color: var(--muted-2); font-size: 10px; line-height: 1.6; }

/* ---------------------------------------------------------------- 登录页 */
.login-body { min-height: 100vh; display: flex; flex-direction: column; background: #0e1a2c; }
.login-shell { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) 430px; min-height: 0; }
.login-visual { position: relative; overflow: hidden; padding: 44px 48px; color: #cfdcec; background: linear-gradient(150deg, #16273f 0%, #0e1a2c 58%, #101d31 100%); display: flex; flex-direction: column; }
.login-orb { position: absolute; border-radius: 50%; filter: blur(58px); opacity: .5; }
.login-orb.one { width: 320px; height: 320px; top: -80px; right: -60px; background: #2c5f9e; }
.login-orb.two { width: 260px; height: 260px; bottom: -70px; left: -50px; background: #1c6a5c; }
.login-visual-inner { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; }
.login-brand { display: flex; align-items: center; gap: 11px; }
.login-brand-mark { width: 34px; height: 34px; border-radius: 9px; background: #f0f5fb; color: #16273f; display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.login-brand strong { display: block; color: #eef4fb; font-size: 14px; }
.login-brand small { display: block; color: #8ba3c1; font-size: 11px; margin-top: 3px; }
.login-copy { margin-top: auto; padding-top: 40px; }
.login-copy .eyebrow { display: inline-block; color: #6f8db3; font-size: 10.5px; letter-spacing: .22em; }
.login-copy h1 { margin: 12px 0 0; font-size: 30px; line-height: 1.35; color: #f2f7fd; letter-spacing: -.02em; }
.login-copy h1 em { font-style: normal; color: #6fb0ff; }
.login-copy p { margin: 14px 0 0; color: #93a9c6; font-size: 12.5px; line-height: 1.9; max-width: 460px; }
.login-facts { margin-top: 30px; display: grid; gap: 10px; }
.login-fact { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: rgba(255,255,255,.035); }
.login-fact .lf-i { width: 22px; height: 22px; border-radius: 6px; background: rgba(111,176,255,.16); color: #8dc0ff; display: grid; place-items: center; font-size: 11px; flex: 0 0 auto; }
.login-fact strong { display: block; color: #dce8f6; font-size: 12px; }
.login-fact small { display: block; color: #859cbb; font-size: 11px; line-height: 1.7; margin-top: 3px; }
.login-foot { margin-top: 34px; color: #6c85a5; font-size: 10.5px; line-height: 1.8; }

.login-panel { background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 34px 30px; }
.login-card { width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 20px 50px rgba(6,18,36,.28); padding: 26px 26px 24px; }
.login-card h2 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
.login-card .lc-sub { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.login-internal { margin: 16px 0 0; padding: 10px 12px; border: 1px solid #f3d7a6; border-radius: 8px; background: var(--warning-soft); color: #8f5a10; font-size: 11.5px; line-height: 1.75; }
.login-internal b { font-weight: 700; }
.login-form { margin-top: 18px; display: grid; gap: 13px; }
.login-field label { display: block; color: #60718a; font-size: 11.5px; margin-bottom: 6px; }
.login-field .input { width: 100%; height: 38px; }
.captcha-row { display: flex; gap: 9px; align-items: stretch; }
.captcha-row .input { flex: 1 1 auto; }
.captcha-img { width: 108px; height: 38px; flex: 0 0 auto; border: 1px solid var(--border-strong); border-radius: 5px; overflow: hidden; background: #eef2f8; cursor: pointer; display: grid; place-items: center; }
.captcha-img svg { display: block; width: 108px; height: 38px; }
.captcha-hint { margin-top: 6px; color: var(--muted-2); font-size: 10.5px; }
.captcha-hint b { color: #6a7b93; font-family: var(--mono); letter-spacing: .12em; }
.login-error { padding: 9px 11px; border: 1px solid #ffc2ca; border-radius: 7px; background: var(--danger-soft); color: #c0374a; font-size: 11.5px; line-height: 1.7; }
.login-submit { width: 100%; height: 40px; justify-content: center; font-size: 13.5px; font-weight: 650; }
.login-demo { margin-top: 14px; padding: 9px 11px; border: 1px dashed var(--border-strong); border-radius: 7px; background: var(--surface-soft); color: var(--muted); font-size: 11px; line-height: 1.75; }
.login-demo b { color: #4b5e79; font-family: var(--mono); }
.login-legal { margin-top: 14px; color: var(--muted-2); font-size: 10.5px; line-height: 1.8; }

/* ---------------------------------------------------------------- 工具类 */
.only-mobile { display: none !important; }
.only-desktop { display: inline-flex; }
.stack { display: grid; gap: 10px; }
.row-gap { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.right-align { text-align: right; }
.f11 { font-size: 11px; }
.f12 { font-size: 12px; }

/* ============================================================================
   响应式
   ========================================================================== */
@media (max-width: 1180px) {
  .metric-grid, .metric-grid.g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-2, .grid-2.equal, .grid-3 { grid-template-columns: 1fr; }
  .demo-dock { width: 200px; }
}

/* ★★★ 移动端（<=768px）—— 第 22 章硬需求：手机上要能完成开通与续期 ★★★ */
@media (max-width: 768px) {
  body { font-size: 13.5px; }

  /* 侧边栏收成抽屉，由顶栏汉堡键唤起 */
  .sidebar { display: none; }
  .hamburger { display: inline-flex; }
  .topbar { padding: 0 12px; gap: 9px; position: sticky; top: 0; z-index: 50; }
  .topbar .who, .topbar .clock { display: none; }
  .srv-chip { padding: 4px 7px; font-size: 10.5px; }
  .proto-strip { padding: 5px 12px; font-size: 10.5px; }
  .proto-strip .ps-right { display: none; }

  .content { padding: 12px 12px 92px; }
  .page-header { margin-bottom: 12px; gap: 10px; }
  .page-title { font-size: 17px; }
  .page-subtitle { font-size: 11.5px; }
  .page-actions { width: 100%; justify-content: flex-start; }

  .card-header { padding: 13px 13px 9px; }
  .card-body { padding: 0 13px 14px; }
  .card-body.pt { padding-top: 13px; }
  .card-foot { padding: 10px 13px; }

  .metric-grid, .metric-grid.g5, .metric-grid.g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .metric { min-height: 78px; padding: 12px 12px; }
  .metric-value { font-size: 19px; }

  /* 表单：单列，控件放大到可触摸 */
  .control-row { grid-template-columns: 1fr; gap: 6px; margin: 14px 0; }
  .control-label { padding-top: 0; font-weight: 650; color: #4b5e79; }
  .input, .select { height: 40px; }
  .stepper { height: 40px; }
  .stepper button { width: 42px; }
  .toolbar { gap: 7px; }
  .toolbar .input, .toolbar .select { width: 100%; }
  .toolbar .input.grow { flex: 1 1 100%; }
  .radio-group { gap: 7px; }
  .radio-card { min-width: 0; flex: 1 1 calc(50% - 4px); padding: 10px 11px; }
  .button { min-height: 38px; padding: 0 14px; }
  .button-small { min-height: 34px; }
  .button-tiny { min-height: 30px; padding: 0 10px; }
  .seg button { min-height: 36px; padding: 0 10px; }

  /* 表格：默认横向可滚；页面可加 .as-cards 转卡片式 */
  .table-wrap { overflow-x: auto; margin: 0 -13px; padding: 0 13px; }
  .data-table th, .data-table td { padding: 9px 8px; }

  .data-table.as-cards { display: block; min-width: 0 !important; }
  .data-table.as-cards thead { display: none; }
  .data-table.as-cards tbody, .data-table.as-cards tr, .data-table.as-cards td { display: block; width: auto; }
  .data-table.as-cards tr {
    border: 1px solid var(--border); border-radius: 9px; background: var(--surface);
    padding: 4px 11px 8px; margin-bottom: 9px; box-shadow: 0 2px 8px rgba(26,55,91,.05);
  }
  .data-table.as-cards tr.row-danger { border-color: #ffc2ca; background: #fff7f8; }
  .data-table.as-cards tr.row-warn { border-color: #f3d7a6; background: #fffcf4; }
  .data-table.as-cards tr.row-off { background: #f7f9fc; }
  .data-table.as-cards tbody tr:hover td { background: transparent; }
  .data-table.as-cards td {
    border-bottom: 1px dashed var(--border); padding: 8px 0; white-space: normal;
    display: flex; align-items: baseline; gap: 12px; text-align: left !important;
  }
  .data-table.as-cards td:last-child { border-bottom: 0; }
  .data-table.as-cards td::before {
    content: attr(data-th); flex: 0 0 82px; color: var(--muted-2); font-size: 11px; line-height: 1.6;
  }
  .data-table.as-cards td[data-th=""]::before { display: none; }
  .data-table.as-cards td.cardhead {
    border-bottom: 1px solid var(--border); padding: 10px 0 9px; font-size: 13.5px; font-weight: 700; color: var(--text);
  }
  .data-table.as-cards td.cardhead::before { display: none; }
  .data-table.as-cards td.ops { padding-top: 10px; flex-wrap: wrap; gap: 7px; }
  .data-table.as-cards td.ops::before { flex-basis: 100%; margin-bottom: 2px; }
  .data-table.as-cards .inline-edit { max-width: 100%; }

  .kv { grid-template-columns: 100px minmax(0, 1fr); }

  /* 弹窗：底部抽屉式，避开手机键盘 */
  .modal-backdrop { padding: 0; place-items: end stretch; }
  .modal, .modal.wide { width: 100%; max-width: none; max-height: 94vh; border-radius: 14px 14px 0 0; }
  .modal-head { padding: 16px 16px 8px; }
  .modal-head h2 { font-size: 16px; }
  .modal-sub { margin: 0 16px 8px; }
  .modal-body { padding: 0 16px 6px; }
  .modal-actions { padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); position: sticky; bottom: 0; }
  .modal-actions .button { flex: 1 1 auto; min-height: 42px; justify-content: center; }
  .modal-actions .spacer { flex: 1 1 100%; margin: 0 0 6px; text-align: center; }

  .calc-line { flex-direction: column; gap: 3px; padding: 7px 0; }
  .calc-line .k { flex: none; }

  /* toast 贴底通栏 */
  .toast-region { left: 10px; right: 10px; bottom: 10px; justify-items: stretch; }
  .toast { max-width: none; }

  /* 演示坞在手机上收起到右下角，不挡正文 */
  .demo-dock { left: auto; right: 10px; bottom: 10px; width: 200px; }
  .demo-dock.collapsed { width: auto; }

  .only-mobile { display: block !important; }
  .only-desktop { display: none !important; }

  /* 登录页 */
  .login-shell { grid-template-columns: 1fr; }
  .login-visual { display: none; }
  .login-panel { padding: 22px 14px 32px; align-items: flex-start; }
  .login-card { max-width: none; padding: 20px 18px 20px; }
  .login-card .input { height: 42px; }
  .captcha-img, .captcha-img svg { height: 42px; }
}

@media (max-width: 380px) {
  .metric-grid, .metric-grid.g5, .metric-grid.g3, .metric-grid.g2 { grid-template-columns: 1fr; }
  .radio-card { flex: 1 1 100%; }
  .data-table.as-cards td::before { flex-basis: 70px; }
}

/* 打印：把当前页当成一张可发给自己的清单 */
@media print {
  .sidebar, .topbar, .proto-strip, .demo-dock, .toast-region, .page-actions, .drawer, .drawer-backdrop { display: none !important; }
  .content { padding: 0; overflow: visible; }
  .card { box-shadow: none; break-inside: avoid; }
}

/* ============================================================================
   ↓↓↓ 以下为【页面追加区】。page-*.js 的样式请【追加】在本行之后，
       每段用 /* ==== page-xxx ==== *\/ 开头、/* ==== /page-xxx ==== *\/ 结尾，
       不得修改本行以上的任何一行。
   ========================================================================== */

/* ==== page-expiring ==== */
/* 页 3 · 到期看板（P1）。只读三分组 + 行内续期快捷按钮。
   ★ 视觉全部复用基座变量与既有组件类，这里只补看板特有的几处。 */

/* 顶部三张汇总小卡：点一下滚到对应分组 */
.exp-tiles { margin-top: 2px; }
.exp-jump { display: flex; cursor: pointer; min-width: 0; }
.exp-jump > .metric { flex: 1 1 auto; width: 100%; transition: .15s ease; }
.exp-jump:hover > .metric { border-color: #abc5e8; box-shadow: 0 6px 20px rgba(26,55,91,.09); }
.exp-jump:active > .metric { transform: translateY(1px); }

/* 分组卡标题与计数 */
.exp-gt { font-size: 14px; font-weight: 700; }
.exp-gt.danger { color: var(--danger); }
.exp-gt.warn { color: #a86b1a; }
.exp-count {
  min-width: 22px; height: 20px; padding: 0 7px; border-radius: 10px; display: inline-grid; place-items: center;
  font: 700 11px var(--mono); background: #eef1f5; color: #5b6b83;
}
.exp-count.danger { background: var(--danger-soft); color: var(--danger); }
.exp-count.warn { background: var(--warning-soft); color: #a86b1a; }
.exp-modenote { margin-bottom: 11px; }

/* 分组被汇总卡点中时闪一下，眼睛跟得上 */
.page-expiring [id^="expGroup-"].is-flash > .card { box-shadow: 0 0 0 3px rgba(54,138,245,.22), var(--shadow); }

/* 表格：行内「续期」下拉是绝对定位的，table-wrap 的 overflow 会把它裁掉，
   所以本页放开裁剪（<=768px 走 .as-cards 卡片式，本来就不需要横向滚动）。 */
.page-expiring .exp-tablewrap .table-wrap { overflow: visible; }
.exp-login { font-size: 12.5px; font-weight: 700; color: var(--text); letter-spacing: .02em; }
.exp-remark { display: block; color: #4b5e79; line-height: 1.5; }
.exp-sub { display: block; margin-top: 3px; color: var(--muted-2); font-size: 10.5px; line-height: 1.6; }
.exp-sub b { color: #a86b1a; }
.exp-note { display: block; margin-top: 4px; color: var(--danger); font-size: 10.5px; line-height: 1.6; white-space: normal; }

/* ① 本行默认续期口径 —— 顺延 / 从今日重算在看板上就看得见 */
.exp-mode {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 5px;
  font-size: 11px; font-weight: 650; white-space: nowrap; cursor: help;
}
.exp-mode.extend { background: var(--primary-soft); color: var(--primary); }
.exp-mode.reset  { background: var(--warning-soft); color: #a86b1a; }
.exp-mode-note { display: block; margin-top: 3px; color: var(--muted-2); font-size: 10px; line-height: 1.55; }

.exp-ops { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.exp-filter { margin-right: 2px; }

/* ---- 窄屏（<=768px）：第 22 章硬需求，手机上要能在看板里直接完成续期 ---- */
@media (max-width: 768px) {
  .exp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-expiring .page-actions { width: 100%; gap: 8px; }
  .page-expiring .page-actions .button { flex: 1 1 auto; }
  .exp-filter { flex: 1 1 100%; min-height: 34px; }

  .exp-modenote { font-size: 11.5px; line-height: 1.85; }
  /* 卡片式下：表格不再横向滚，恢复负边距的贴边观感即可 */
  .page-expiring .exp-tablewrap .table-wrap { overflow: visible; }
  .page-expiring .data-table.as-cards td[data-th="操作"] { padding-top: 10px; }
  /* 卡片头（账号 + 状态标签 + 停用说明）在窄屏要能换行，别把标签挤成两行字 */
  .page-expiring .data-table.as-cards td.cardhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .page-expiring .data-table.as-cards td.cardhead .tag { flex: 0 0 auto; margin-left: 0; }
  .page-expiring .data-table.as-cards td.cardhead .exp-note { flex: 1 1 100%; margin-top: 0; }
  .exp-ops { justify-content: flex-start; width: 100%; gap: 8px; }
  .exp-ops .button, .exp-ops .dd-toggle { min-height: 34px; }
  .exp-ops .dropdown { flex: 0 0 auto; }
  /* 下拉面板在窄屏靠右会顶出屏幕，改为左对齐并放宽 */
  .page-expiring .dropdown.dd-right .dd-panel { left: 0; right: auto; min-width: 200px; }
  .exp-mode-note { font-size: 10.5px; }
  .exp-note { font-size: 11px; }
}

@media (max-width: 380px) {
  .exp-tiles { grid-template-columns: 1fr; }
  .exp-ops .button, .exp-ops .dropdown { flex: 1 1 100%; }
  .exp-ops .dd-toggle { width: 100%; justify-content: center; }
}
/* ==== /page-expiring ==== */

/* ==== page-provision ==== */
/* 页 2 · 开通账号。★这一页存在的全部意义是那个复制按钮，所以视觉重心只给它一个：
   结果卡 = 绿框 + 一次性密码红条 + 深色四行预览块 + 一个大到不可能点错的复制按钮。
   其余一律复用基座组件类，这里只补本页特有的几处。 */

/* ---- 表单 ---- */
.pv-grid { align-items: start; }
.req { color: var(--danger); font-weight: 700; margin-left: 2px; }
.input.is-bad { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(239,67,85,.1); }
.pv-custom { margin-top: 9px; }
.pv-custom .input[type="date"] { width: 190px; }
.pv-preview-label { color: var(--muted-2); font-size: 10.5px; letter-spacing: .06em; margin-bottom: 7px; }
.pv-preset { white-space: nowrap; }
.pv-submit-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.pv-submit { min-height: 38px; padding: 0 20px; font-size: 13.5px; font-weight: 650; }

/* ---- 结果卡：开通成功 ---- */
.card.pv-issued { border-color: #bde9da; box-shadow: 0 6px 22px rgba(18,166,125,.12); }
.card.pv-issued .card-header { background: var(--success-soft); border-radius: var(--radius) var(--radius) 0 0; }
.card.pv-issued .card-title { color: #0a7d61; }

/* 四个字段的独立展示（每个都能单独复制，手机上尤其有用） */
.pv-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.pv-field {
  min-width: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-soft);
  padding: 9px 11px; display: flex; flex-direction: column; gap: 4px;
}
.pv-field .pf-k { color: var(--muted); font-size: 10.5px; display: flex; align-items: center; gap: 6px; }
.pv-field .pf-v { color: var(--text); font-size: 13px; font-weight: 650; word-break: break-all; line-height: 1.5; }
.pv-field .button-tiny { align-self: flex-start; margin-top: 2px; }
.pv-field .pf-tz { color: var(--muted-2); font-size: 10.5px; }
.pv-field .pf-url { font-family: var(--mono); font-size: 11px; font-weight: 400; color: #3f5470; }
.pv-field-pwd { border-color: #ffc2ca; background: var(--danger-soft); }
.pv-field-pwd .pf-k { color: #c0374a; }
.pv-field .pf-pwd { font-size: 17px; letter-spacing: .06em; color: #c0374a; font-weight: 750; }
.pf-once {
  height: 16px; padding: 0 6px; border-radius: 4px; display: inline-grid; place-items: center;
  background: var(--danger); color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
}

/* 将要复制的四行文本（预览块的 textContent 就是复制内容，所见即所得） */
.pv-copy-title { margin-top: 14px; margin-bottom: 6px; color: var(--muted-2); font-size: 10.5px; letter-spacing: .06em; }
.pv-copy-actions { margin-top: 11px; }

/* ★ 这个按钮就是整页的意义，所以它必须比周围任何东西都显眼、都好点 */
.pv-copybtn {
  min-height: 44px; padding: 0 22px; font-size: 14px; font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 6px 18px rgba(54,138,245,.28);
}
.pv-copybtn .ico { display: inline-flex; align-items: center; }
.pv-copybtn .ico svg { width: 17px; height: 17px; }
.pv-copybtn:active { transform: translateY(1px); }

/* ---- 右栏说明 ---- */
.pv-side { min-width: 0; }
.pv-mini { margin-top: 10px; display: grid; gap: 7px; }
.pv-mini .pm-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: start; }
.pv-mini .pm-k { color: var(--muted-2); font-size: 11px; padding-top: 1px; }
.pv-mini .pm-v { color: #4b5e79; font-size: 11.5px; line-height: 1.75; min-width: 0; }
.pv-mini .pm-v b { color: var(--text); }

/* ---- ★窄屏（<=768px）：第 22 章硬需求 —— 手机浏览器上要能完整走完开通 ---- */
@media (max-width: 768px) {
  /* 表单单列铺满（.control-row 在基座里已转单列，这里只管本页控件） */
  .pv-custom .input[type="date"] { width: 100%; }
  .pv-preset { flex: 1 1 100%; }
  .pv-submit-row { gap: 9px; }
  .pv-submit { flex: 1 1 100%; min-height: 46px; font-size: 15px; }
  .pv-submit-row .button:not(.pv-submit) { flex: 1 1 100%; min-height: 38px; }

  /* 结果卡：四个字段改单列，密码要足够大到能照着念给客户 */
  .pv-fields { grid-template-columns: 1fr; gap: 8px; }
  .pv-field .pf-pwd { font-size: 19px; }
  .pv-field .button-tiny { min-height: 32px; padding: 0 14px; }

  .copybox { font-size: 11.5px; line-height: 1.95; padding: 12px 12px; }

  /* ★复制按钮在手机上独占一行、足够大 —— 这是这一页在手机上的唯一目的 */
  .pv-copy-actions { gap: 9px; }
  .pv-copybtn { flex: 1 1 100%; width: 100%; min-height: 54px; font-size: 16px; }
  .pv-copy-actions .button:not(.pv-copybtn) { flex: 1 1 calc(50% - 5px); min-height: 40px; }

  .pv-mini .pm-row { grid-template-columns: 1fr; gap: 2px; }
  .pv-mini .pm-k { font-size: 10.5px; }
}

@media (max-width: 380px) {
  .pv-copy-actions .button:not(.pv-copybtn) { flex: 1 1 100%; }
  .pv-field .pf-pwd { font-size: 17px; letter-spacing: .04em; }
}
/* ==== /page-provision ==== */

/* ==== page-accounts ==== */
/* 页 1 客户列表（首页）追加样式。★不修改本区块以外的任何一行。
   要点：① 行内续期浮层（不跳页、不开大弹窗，窄屏自动变底部抽屉）
        ② 到期日两行显示，恒带 23:59:59
        ③ <=768px 表格转卡片式、浮层转抽屉、控件放大到可触摸 —— 第 22 章移动端硬需求 */

/* ---- 顶部：横幅 / 指标条（指标条同时也是筛选器） ---- */
.acc-banners { margin-bottom: 12px; }
.acc-banners .notice + .notice { margin-top: 9px; }
.acc-metrics { margin-bottom: 12px; }
.acc-metric { position: relative; }
.acc-metric.is-on { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(54, 138, 245, .12); }
.acc-metric.is-on .metric-label { color: var(--primary); font-weight: 650; }

/* ---- 两条语义提示并排（窄屏自动叠成一列） ---- */
.acc-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.acc-notes .notice { margin: 0; }

/* ---- 工具条 ---- */
.acc-toolbar { margin-bottom: 12px; }
.acc-search { position: relative; display: inline-flex; align-items: center; }
.acc-search .ico { position: absolute; left: 9px; display: inline-flex; color: var(--muted-2); pointer-events: none; }
.acc-search .ico svg { width: 15px; height: 15px; }
.acc-search .input { width: 244px; padding-left: 30px; }
.acc-count { color: var(--muted-2); font-size: 11.5px; line-height: 1.7; }
.acc-count b { color: #4b5e79; }
#accExport .ico svg, [data-page="provision"] .ico svg { width: 15px; height: 15px; }
.acc-hdr-actions { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---- 表格内的零件 ---- */
.acc-card .card-body { padding-top: 15px; }
.data-table .th-sub { display: block; font-weight: 400; color: var(--muted-2); font-size: 10px; margin-top: 1px; }
.acc-login {
  border: 0; background: transparent; padding: 0; font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  color: var(--primary); letter-spacing: .02em;
}
.acc-login:hover { text-decoration: underline; text-underline-offset: 3px; }
.acc-badges { display: inline-flex; gap: 4px; flex-wrap: wrap; margin-left: 6px; vertical-align: middle; }
.acc-badges .tag { min-width: 0; height: 18px; font-size: 10px; padding: 0 5px; }
.acc-badges .tag + .tag { margin-left: 0; }
.acc-mac { font-variant-numeric: tabular-nums; }
.acc-mac.is-full { color: var(--warning); font-weight: 700; }
.acc-ops { display: inline-flex; gap: 6px; align-items: center; flex-wrap: nowrap; min-width: 182px; }
.acc-remark .ie-text { max-width: 240px; }
.inline-edit.is-editing { width: 100%; max-width: 260px; }
.inline-edit.is-editing input { width: 100%; }

/* ---- ★行内续期浮层：桌面贴着按钮弹出，窄屏变底部抽屉 ---- */
.acc-pop {
  position: fixed; z-index: 88; display: none; width: 336px; max-height: 78vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px;
  box-shadow: 0 18px 48px rgba(14, 39, 73, .22);
}
.acc-pop.is-open { display: block; }
.ap-head { position: relative; padding: 12px 34px 9px 14px; border-bottom: 1px solid var(--border); background: var(--surface-soft); border-radius: 12px 12px 0 0; }
.ap-title { font-size: 13.5px; font-weight: 700; }
.ap-sub { color: var(--muted-2); font-size: 11px; margin-top: 3px; line-height: 1.5; }
.ap-x { position: absolute; top: 8px; right: 8px; border: 0; background: transparent; color: var(--muted-2); font-size: 19px; line-height: 1; padding: 2px 7px; border-radius: 6px; }
.ap-x:hover { background: #eef2f7; color: #4b5e79; }
.ap-body { padding: 11px 14px 4px; }
.ap-now { color: #4b5e79; font-size: 11.5px; line-height: 1.9; }
.ap-now b { font-variant-numeric: tabular-nums; }
.ap-lab { margin: 11px 0 6px; color: #60718a; font-size: 11px; font-weight: 650; }
.ap-tip { color: var(--muted-2); font-size: 10.5px; line-height: 1.6; margin-top: 6px; }
.ap-foot { color: var(--muted-2); font-size: 10.5px; line-height: 1.7; margin: 10px 0 2px; padding-top: 9px; border-top: 1px dashed var(--border); }
.ap-foot code { font-family: var(--mono); background: var(--surface-soft); padding: 1px 4px; border-radius: 4px; }
.ap-warn { margin-top: 10px; }
.ap-warn .notice { font-size: 11px; line-height: 1.75; }
.ap-actions { display: flex; gap: 8px; padding: 10px 14px 12px; border-top: 1px solid var(--border); background: var(--surface); position: sticky; bottom: 0; border-radius: 0 0 12px 12px; }
.ap-actions .button { flex: 1 1 auto; justify-content: center; }

/* 档位 chips */
.acc-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.acc-chip {
  min-height: 32px; padding: 0 4px; border: 1px solid var(--border-strong); border-radius: 7px;
  background: var(--surface); color: #52637b; font-size: 11.5px; white-space: nowrap;
}
.acc-chip:hover { border-color: #abc5e8; color: var(--primary); }
.acc-chip.is-active { border-color: var(--primary); background: var(--primary); color: #fff; font-weight: 650; }
.acc-date { margin-top: 8px; }

/* 口径切换 */
.acc-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.acc-mode {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: 46px; padding: 7px 9px; border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--surface); color: #34445c; font-size: 12px; font-weight: 650; text-align: left;
}
.acc-mode:hover:not(:disabled) { border-color: #abc5e8; }
.acc-mode .am-note { color: var(--muted-2); font-size: 10px; font-weight: 400; font-variant-numeric: tabular-nums; }
.acc-mode .am-def { position: absolute; top: -7px; right: 6px; font-style: normal; font-size: 9.5px; font-weight: 700; color: var(--muted); background: #eef1f5; border-radius: 8px; padding: 1px 6px; }
.acc-mode.is-active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.acc-mode.is-active .am-note { color: #5d94dd; }
.acc-mode.is-active .am-def { background: #d9e8fd; color: var(--primary); }
.acc-mode:disabled { opacity: .5; cursor: not-allowed; }

/* ★实时预览：新到期日恒带 23:59:59 —— 一个人操作没有第二双眼睛复核，这是唯一的防手滑手段 */
.acc-prev { margin-top: 11px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-soft); }
.acc-prev .ap-k { color: var(--muted); font-size: 11px; display: flex; align-items: center; gap: 7px; }
.acc-prev .ap-mode { font-weight: 700; color: #4b5e79; background: #eef1f5; border-radius: 6px; padding: 1px 7px; font-size: 10.5px; }
.acc-prev .ap-v { margin-top: 4px; font-size: 18px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.acc-prev .ap-t { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.acc-prev .ap-n { margin-top: 3px; color: var(--muted-2); font-size: 10.5px; line-height: 1.6; font-variant-numeric: tabular-nums; }
.acc-prev.warn { border-color: #f3d7a6; background: var(--warning-soft); }
.acc-prev.warn .ap-v, .acc-prev.warn .ap-t { color: #a86b1a; }
.acc-prev.warn .ap-mode { background: #fbeacc; color: #a86b1a; }
.acc-prev.danger { border-color: #ffc2ca; background: var(--danger-soft); }
.acc-prev.danger .ap-v, .acc-prev.danger .ap-t { color: var(--danger); }
.acc-prev.danger .ap-mode { background: #ffd9de; color: var(--danger); }

/* ---- ★<=768px：手机上也要能完成续期与停用（第 22 章硬需求，不是加分项） ---- */
@media (max-width: 768px) {
  .acc-notes { grid-template-columns: 1fr; }
  /* 头部两个按钮并排，别各占一整行把列表顶下去 */
  .acc-hdr-actions { width: 100%; }
  .page-actions .acc-hdr-actions .button.button-small { flex: 1 1 0; min-width: 0; }
  /* 指标条压缩成两列小卡：这一页 80% 的操作在下面的列表里，别让它们占满第一屏 */
  .acc-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
  .acc-metrics .metric { min-height: 0; padding: 10px 11px; }
  .acc-metrics .metric-value { font-size: 17px; margin-top: 4px; }
  .acc-metrics .metric-note { display: none; }
  .acc-search { width: 100%; }
  .acc-search .input { width: 100%; }
  .acc-toolbar .select { width: calc(50% - 4px); }
  .acc-count { width: 100%; margin-top: 2px; }
  .toolbar-spacer { margin-left: 0; }

  /* 表格转卡片式：账号做卡片标题，操作区整行铺开，按钮加大到可触摸 */
  .acc-card .table-wrap { margin: 0; padding: 0; }
  .acc-login { font-size: 14px; }
  .acc-badges { margin-left: 0; }
  .data-table.as-cards td.ops .acc-ops { width: 100%; min-width: 0; flex-wrap: wrap; gap: 8px; }
  .data-table.as-cards td.ops .acc-ops > * { flex: 1 1 0; justify-content: center; }
  .acc-remark .ie-text { max-width: 100%; white-space: normal; }
  .inline-edit.is-editing { max-width: 100%; }
  .data-table .th-sub { display: inline; margin-left: 4px; }

  /* 浮层 → 底部抽屉：整屏宽、贴底、留出安全区，避开手机键盘 */
  .acc-pop.is-sheet {
    left: 0; right: 0; bottom: 0; top: auto !important; width: auto !important;
    max-height: 86vh; border-radius: 14px 14px 0 0; border-left: 0; border-right: 0; border-bottom: 0;
    box-shadow: 0 -10px 40px rgba(14, 39, 73, .28);
  }
  .acc-pop.is-sheet .ap-head { border-radius: 14px 14px 0 0; padding: 14px 40px 11px 16px; }
  .acc-pop.is-sheet .ap-title { font-size: 15px; }
  .acc-pop.is-sheet .ap-x { top: 10px; right: 10px; font-size: 22px; padding: 4px 9px; }
  .acc-pop.is-sheet .ap-body { padding: 13px 16px 6px; }
  .acc-pop.is-sheet .acc-chip { min-height: 40px; font-size: 12.5px; }
  .acc-pop.is-sheet .acc-mode { min-height: 54px; padding: 9px 11px; }
  .acc-pop.is-sheet .acc-prev .ap-v { font-size: 20px; }
  .acc-pop.is-sheet .ap-actions {
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    border-radius: 0;
  }
  .acc-pop.is-sheet .ap-actions .button { min-height: 44px; }
}

@media (max-width: 380px) {
  .acc-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acc-modes { grid-template-columns: 1fr; }
  .acc-toolbar .select { width: 100%; }
  .data-table.as-cards td.ops .acc-ops > * { flex: 1 1 100%; }
}
/* ==== /page-accounts ==== */

/* ==== page-audit ==== */
/* 页 5 · 操作审计（只读 · append-only）。全部选择器均以 .audit-page 收口，
   不污染其它页面；<=768px 窄屏适配在本区块末尾。 */

.audit-page .ico { display: inline-flex; align-items: center; color: currentColor; vertical-align: -3px; }
.audit-page .ico svg { width: 14px; height: 14px; }

/* 顶部「只读」铭牌 —— 让「没有删除按钮」第一眼就被读成设计而不是缺失 */
.audit-page .ad-lock {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
  border: 1px dashed var(--border-strong); border-radius: 7px;
  background: var(--surface-soft); color: #5b6b83; font-size: 11.5px; white-space: nowrap;
}

/* ---------------------------------------------------------------- 筛选条 */
.audit-page .ad-filters { display: grid; gap: 9px; margin-bottom: 13px; }
.audit-page .ad-frow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.audit-page .ad-flabel { flex: 0 0 46px; color: var(--muted-2); font-size: 11px; }
.audit-page .ad-account { width: 268px; max-width: 100%; }
.audit-page .ad-q { width: 220px; }
.audit-page .ad-dates { display: inline-flex; align-items: center; gap: 6px; }
.audit-page .ad-date { width: 148px; font-variant-numeric: tabular-nums; }
.audit-page .ad-dash { color: var(--muted-2); font-size: 11px; }
.audit-page .ad-sort { font-variant-numeric: tabular-nums; }

.audit-page .ad-chiprow { align-items: flex-start; }
.audit-page .ad-chiprow .ad-flabel { padding-top: 8px; }
.audit-page .ad-chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.audit-page .ad-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 29px; padding: 0 10px;
  border: 1px solid var(--border-strong); border-radius: 15px; background: var(--surface);
  color: #52637b; font-size: 11.5px; white-space: nowrap; transition: .15s ease;
}
.audit-page .ad-chip:hover { border-color: #abc5e8; color: var(--primary); }
.audit-page .ad-chip .ad-n {
  min-width: 18px; height: 16px; padding: 0 5px; border-radius: 8px; display: inline-grid; place-items: center;
  background: #eef2f7; color: #6a7b93; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.audit-page .ad-chip.is-zero { opacity: .48; }
.audit-page .ad-chip.is-on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 650; }
.audit-page .ad-chip.is-on .ad-n { background: #d9e9ff; color: var(--primary); }
.audit-page .ad-chip.t-danger.is-on { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.audit-page .ad-chip.t-danger.is-on .ad-n { background: #ffdde2; color: var(--danger); }
.audit-page .ad-chip.t-success.is-on { border-color: var(--success); background: var(--success-soft); color: var(--success); }
.audit-page .ad-chip.t-success.is-on .ad-n { background: #d3f3e8; color: var(--success); }
.audit-page .ad-chip.t-warn.is-on { border-color: var(--warning); background: var(--warning-soft); color: #a86b1a; }
.audit-page .ad-chip.t-warn.is-on .ad-n { background: #f8e7c4; color: #a86b1a; }

.audit-page .ad-count { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.audit-page .ad-count b { color: var(--text); }

/* ---------------------------------------------------------------- 列表单元格 */
.audit-page .ad-ts { display: block; font-size: 11.5px; color: #3f5470; }
.audit-page .ad-ago { display: block; margin-top: 2px; color: var(--muted-2); font-size: 10.5px; }
.audit-page .ad-headtag { display: none; }          /* 只在窄屏卡片头出现 */
.audit-page .ad-akey {
  display: block; margin-top: 3px; font-family: var(--mono); font-size: 10px; color: var(--muted-2); letter-spacing: .02em;
}

.audit-page .ad-acc-row { display: flex; align-items: center; gap: 6px; }
.audit-page .ad-acc {
  border: 0; background: transparent; padding: 0; font-family: var(--mono); font-size: 12px;
  font-weight: 700; color: var(--primary); letter-spacing: .02em;
}
.audit-page .ad-acc:hover { text-decoration: underline; text-underline-offset: 3px; }
.audit-page .ad-only {
  border: 1px solid var(--border); border-radius: 4px; background: var(--surface-soft);
  color: var(--muted-2); font-size: 10px; padding: 1px 6px; line-height: 1.6;
}
.audit-page .ad-only:hover { border-color: #abc5e8; color: var(--primary); background: var(--primary-soft); }
.audit-page .ad-remark {
  display: block; margin-top: 3px; color: var(--muted-2); font-size: 10.5px; line-height: 1.5;
  white-space: normal; word-break: break-word;
}
.audit-page .ad-sys { display: inline-flex; color: #5b6b83; font-size: 11.5px; font-weight: 650; }

/* ★ 变更前后：本页的核心 —— 「到期日 2026-09-30 → 2026-12-31」这种粒度 */
.audit-page .ad-diffcell { min-width: 300px; }
.audit-page .ad-diff {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  padding: 3px 0; line-height: 1.7;
}
.audit-page .ad-diff + .ad-diff { border-top: 1px dashed var(--border); margin-top: 3px; padding-top: 5px; }
.audit-page .ad-k {
  flex: 0 0 auto; color: var(--muted-2); font-size: 10.5px;
  background: var(--surface-soft); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px;
}
.audit-page .ad-b, .audit-page .ad-a {
  min-width: 0; font-size: 11.5px; word-break: break-word;
  border-radius: 5px; padding: 2px 7px;
}
.audit-page .ad-b { background: #f4f6fa; color: #7b8aa0; text-decoration: line-through; text-decoration-color: #c6d0de; }
.audit-page .ad-a { background: var(--primary-soft); color: #1f63bd; font-weight: 650; }
.audit-page .ad-b b, .audit-page .ad-a b { font-variant-numeric: tabular-nums; }
.audit-page .ad-b .ad-t, .audit-page .ad-a .ad-t {
  font-style: normal; font-family: var(--mono); font-size: 10px; opacity: .78; font-weight: 400;
}
.audit-page .ad-arrow { flex: 0 0 auto; color: var(--muted-2); font-size: 12px; }
.audit-page .ad-none, .audit-page .ad-gone { color: var(--muted-2); font-style: normal; }
.audit-page .ad-b code, .audit-page .ad-a code {
  font-family: var(--mono); font-size: 10.5px; background: rgba(255,255,255,.7); padding: 0 4px; border-radius: 3px;
}
.audit-page .ad-b .fp, .audit-page .ad-a .fp { font-size: 11px; }

/* 每行下面那句「所以呢」—— ①续期口径 ②停用只在下次登录生效 ③到期时刻 都落在这里 */
.audit-page .ad-meta {
  margin-top: 4px; color: var(--muted-2); font-size: 10.5px; line-height: 1.7;
  white-space: normal; word-break: break-word;
}
.audit-page .ad-meta b { color: #5b6b83; }
.audit-page .ad-meta code { font-family: var(--mono); background: var(--surface-soft); padding: 0 4px; border-radius: 3px; }
.audit-page .ad-meta .button-link { font-size: 10.5px; }
.audit-page .ad-delta {
  display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 4px;
  background: var(--success-soft); color: var(--success); font-size: 10px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.audit-page .ad-delta.minus { background: var(--danger-soft); color: var(--danger); }
.audit-page .ad-tz { font-family: var(--mono); font-size: 10px; opacity: .8; }

.audit-page .ad-notecell { min-width: 210px; max-width: 330px; }
.audit-page .ad-note { color: #55677f; line-height: 1.7; }
.audit-page .ad-actor { font-size: 11px; color: var(--muted); }

/* 行底色：只做极轻的区分，重点仍在动作标签上 */
.audit-page tr.ad-disable td { background: #fffafa; }
.audit-page tr.ad-disable:hover td { background: #fff4f5; }
.audit-page tr.ad-create td { background: #fbfefd; }
.audit-page tr.ad-create:hover td { background: #f4fbf8; }

/* ---------------------------------------------------------------- ★<=768px 窄屏（第 22 章硬需求） */
@media (max-width: 768px) {
  .audit-page .ad-filters { gap: 11px; }
  .audit-page .ad-frow { gap: 7px; }
  .audit-page .ad-flabel { flex: 1 1 100%; font-weight: 650; color: #4b5e79; }
  .audit-page .ad-chiprow .ad-flabel { padding-top: 0; }
  .audit-page .ad-account, .audit-page .ad-q { width: 100%; flex: 1 1 100%; }
  .audit-page .ad-seg { width: 100%; }
  .audit-page .ad-seg button { flex: 1 1 0; padding: 0 6px; }
  .audit-page .ad-dates { flex: 1 1 100%; }
  .audit-page .ad-date { flex: 1 1 0; width: auto; min-width: 0; }
  .audit-page .ad-frow .button { flex: 1 1 calc(50% - 4px); }
  .audit-page .ad-chip { min-height: 34px; padding: 0 12px; font-size: 12px; }
  .audit-page .ad-lock { height: 34px; }

  /* 卡片式：卡头 = 时间 + 动作标签（该标签在桌面端是隐藏的） */
  .audit-page .data-table.as-cards td.cardhead { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
  .audit-page .ad-ts { display: inline; font-size: 13px; font-weight: 700; color: var(--text); }
  .audit-page .ad-ago { display: inline; margin: 0 0 0 2px; font-weight: 400; }
  .audit-page .ad-headtag { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; }
  .audit-page .ad-akey { display: inline; margin: 0 0 0 6px; }
  /* 卡头已经带了动作标签，「动作」那一行在卡片里是重复的，收掉 */
  .audit-page .data-table.as-cards td[data-th="动作"] { display: none; }

  .audit-page .ad-diffcell, .audit-page .ad-notecell { min-width: 0; max-width: none; }
  /* ★窄屏把「左 → 右」改成「上 ↓ 下」：前后值各占一行，长日期不再被挤断 */
  .audit-page .ad-diff { flex-direction: column; align-items: stretch; gap: 3px; }
  .audit-page .ad-k { align-self: flex-start; }
  .audit-page .ad-b, .audit-page .ad-a { display: block; padding: 5px 8px; font-size: 12px; }
  .audit-page .ad-arrow { align-self: flex-start; transform: rotate(90deg); margin: 1px 0 1px 10px; }
  .audit-page .data-table.as-cards td.ad-diffcell,
  .audit-page .data-table.as-cards td.ad-notecell { flex-wrap: wrap; }
  .audit-page .data-table.as-cards td.ad-diffcell::before,
  .audit-page .data-table.as-cards td.ad-notecell::before { flex-basis: 100%; margin-bottom: 4px; }
  .audit-page .ad-acc-row { flex-wrap: wrap; }
}

@media (max-width: 380px) {
  .audit-page .ad-chip { padding: 0 10px; }
  .audit-page .ad-frow .button { flex: 1 1 100%; }
}
/* ==== /page-audit ==== */

/* ==== page-settings ==== */
/* 页 6 设置：一页放完，不做子导航。所有区块都是同一层级的卡片，靠标题分区。 */

.set-page .card + .card { margin-top: 14px; }
.set-page .set-lead { margin: 0 0 12px; color: #4b5e79; font-size: 12px; line-height: 1.85; }
.set-page .set-sub { color: var(--muted-2); font-size: 11px; line-height: 1.75; margin-top: 4px; }
.set-page .set-sub code { font-family: var(--mono); background: #f1f4f8; padding: 1px 5px; border-radius: 4px; }
.set-sub-h { margin: 15px 0 8px; color: #60718a; font-size: 11.5px; font-weight: 650; }
.set-sub-h code { font-family: var(--mono); background: var(--surface-soft); padding: 1px 5px; border-radius: 4px; font-weight: 400; }
.set-page .em-bad { color: var(--danger); font-weight: 700; }
.set-page .em-ok { color: var(--success); font-weight: 700; }

/* --- ★常驻安全提示（SVR-16）：钉在页首，视觉上必须比普通卡片重 --- */
.card.set-sec { border-color: #f3d7a6; box-shadow: 0 4px 15px rgba(191, 130, 26, .09); }
.card.set-sec .card-header { background: linear-gradient(180deg, #fffaf0, transparent); border-radius: var(--radius) var(--radius) 0 0; }
.card.set-sec .card-title { color: #a86b1a; }
.set-cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-bottom: 11px; }
.set-cmp-col { border: 1px solid var(--border); border-radius: 9px; padding: 11px 13px 12px; background: var(--surface-soft); min-width: 0; }
.set-cmp-col.bad { border-color: #ffc2ca; background: var(--danger-soft); }
.set-cmp-col.good { border-color: #bde9da; background: var(--success-soft); }
.set-cmp-col p { margin: 8px 0 0; font-size: 11.5px; line-height: 1.8; color: #55677f; }
.set-cmp-col code { font-family: var(--mono); background: rgba(255, 255, 255, .7); padding: 1px 5px; border-radius: 4px; }
.scc-h { font-size: 12px; font-weight: 700; }
.set-cmp-col.bad .scc-h { color: var(--danger); }
.set-cmp-col.good .scc-h { color: var(--success); }
.scc-code { margin-top: 8px; padding: 8px 10px; border-radius: 6px; background: #0f1a2b; color: #d6e2f2; font-family: var(--mono); font-size: 11.5px; line-height: 1.7; word-break: break-all; }
.scc-code .scc-ref { display: block; color: #7fa6d8; font-size: 10.5px; margin-top: 3px; }
.set-why { margin: 11px 0 0; padding: 10px 12px; border-left: 3px solid var(--warning); border-radius: 0 7px 7px 0; background: var(--warning-soft); color: #8f5a10; font-size: 11.5px; line-height: 1.85; }

/* --- 保存条：每块卡片自己保存，不做全页大保存按钮 --- */
.set-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 15px; padding-top: 13px; border-top: 1px dashed var(--border); }
.set-actions .set-hint { margin-left: auto; color: var(--muted-2); font-size: 11px; }
.set-actions .set-hint b { color: #4b5e79; }
.set-actions .set-hint code { font-family: var(--mono); background: var(--surface-soft); padding: 1px 5px; border-radius: 4px; }

/* --- 密码强度 --- */
.pwd-meter { display: flex; gap: 4px; margin-top: 8px; max-width: 320px; }
.pwd-meter i { flex: 1 1 0; height: 5px; border-radius: 3px; background: #e9eef5; transition: background .15s ease; }
.pwd-meter i.on.s1 { background: var(--danger); }
.pwd-meter i.on.s2 { background: var(--warning); }
.pwd-meter i.on.s3 { background: var(--primary); }
.pwd-meter i.on.s4 { background: var(--success); }
.pwd-msg { margin-top: 7px; min-height: 17px; color: var(--muted-2); font-size: 11.5px; line-height: 1.6; }
.pwd-msg.err { color: var(--danger); }
.pwd-msg.ok { color: var(--success); }

/* --- 宽限期论证列表 --- */
.set-facts { margin: 11px 0; padding-left: 18px; color: #55677f; font-size: 11.5px; line-height: 1.95; }
.set-facts b { color: var(--text); }

/* --- 客户端版本分布 --- */
.set-vers { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.ver-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface); font-size: 11px; color: var(--muted); }
.ver-chip b { font-size: 11.5px; color: #3f5470; }
.ver-chip.is-latest { border-color: #bde9da; background: var(--success-soft); color: var(--success); }
.ver-chip.is-latest b { color: var(--success); }
.ver-chip.is-behind { border-color: #f3d7a6; background: var(--warning-soft); color: #a86b1a; }
.ver-chip.is-behind b { color: #a86b1a; }
.ver-chip.is-never { border-style: dashed; color: var(--muted-2); }

/* --- 公告预览（模拟客户端登录后的那条提示条） --- */
.set-preview { display: flex; align-items: flex-start; gap: 9px; padding: 11px 13px; border: 1px solid #cfe3ff; border-left: 3px solid var(--primary); border-radius: 7px; background: var(--primary-soft); color: #1f63bd; font-size: 12px; line-height: 1.8; word-break: break-word; }
.set-preview .ico { flex: 0 0 auto; margin-top: 2px; }
.set-preview.empty { border-style: dashed; border-color: var(--border-strong); border-left-color: var(--border-strong); background: var(--surface-soft); color: var(--muted-2); }
.set-count { color: var(--muted-2); font-size: 11px; font-variant-numeric: tabular-nums; }
.set-count.over { color: var(--warning); font-weight: 650; }

/* --- ★「这里没有的开关」：把否决理由留在人们来找开关的地方 --- */
.set-nolist { display: grid; gap: 9px; }
.no-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-soft); }
.no-item .ni-x { flex: 0 0 auto; width: 19px; height: 19px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--danger-soft); color: var(--danger); font-size: 11px; font-weight: 700; margin-top: 1px; }
.no-item strong { display: block; color: var(--text); font-size: 12.5px; }
.no-item small { display: block; margin-top: 4px; color: #55677f; font-size: 11.5px; line-height: 1.85; }
.no-item code { font-family: var(--mono); background: #eef2f7; padding: 1px 5px; border-radius: 4px; }

/* ★★★ 窄屏（<=768px）：设置页也必须能在手机上改完并保存 ★★★ */
@media (max-width: 768px) {
  .set-cmp { grid-template-columns: 1fr; gap: 9px; }
  .scc-code { font-size: 11px; }

  /* 保存按钮撑满、说明文字换行落到下一行，拇指够得到 */
  .set-actions { gap: 7px; }
  .set-actions .button { flex: 1 1 46%; justify-content: center; }
  .set-actions .set-hint { flex: 1 1 100%; margin-left: 0; padding-top: 2px; }

  /* 输入框在窄屏一律通栏（版本号那个是行内定宽的，要覆盖掉） */
  .set-page .input, .set-page .textarea { width: 100% !important; }
  .set-page .field-row { gap: 7px; }
  .set-page .field-row .button { flex: 1 1 auto; }
  .set-page .textarea { min-height: 108px; }

  .pwd-meter { max-width: none; }
  .set-vers { gap: 6px; }
  .ver-chip { flex: 1 1 calc(50% - 3px); justify-content: center; }
  .no-item { padding: 10px 11px; }
  .set-facts { padding-left: 16px; }
}

@media (max-width: 380px) {
  .ver-chip { flex: 1 1 100%; }
  .set-actions .button { flex: 1 1 100%; }
}
/* ==== /page-settings ==== */

/* ==== page-detail ==== */
/* 页 4 · 账号详情（排障页）。★只追加，不改上面任何一行。
   设计意图：第一屏就要给出「他为什么登不进」的结论，所以 .dt-verdict 比普通 notice 更重、
   证据行 .dt-evi 紧贴结论；clock_skew 分四档着色，|skew|≥300s 直接判红并加 ★（疑似改钟）。 */

/* ---- 排障结论 ---- */
.dt-verdict { border: 1px solid var(--border); border-left: 4px solid var(--muted-2); border-radius: 9px; background: var(--surface-soft); padding: 13px 15px; }
.dt-verdict.ok   { border-color: #bde9da; border-left-color: var(--success); background: var(--success-soft); }
.dt-verdict.warn { border-color: #f3d7a6; border-left-color: var(--warning); background: var(--warning-soft); }
.dt-verdict.bad  { border-color: #ffc2ca; border-left-color: var(--danger);  background: var(--danger-soft); }
.dt-v-head { display: flex; align-items: center; gap: 7px; color: var(--muted); }
.dt-v-head .ico { display: inline-grid; place-items: center; }
.dt-v-head .ico svg { width: 15px; height: 15px; }
.dt-verdict.ok  .dt-v-head { color: var(--success); }
.dt-verdict.warn .dt-v-head { color: #a86b1a; }
.dt-verdict.bad .dt-v-head { color: var(--danger); }
.dt-v-label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; }
.dt-v-code { margin-left: auto; font: 650 10.5px var(--mono); padding: 2px 7px; border-radius: 5px; background: rgba(255,255,255,.7); color: #55677f; }
.dt-v-text { margin-top: 7px; font-size: 15px; line-height: 1.6; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.dt-verdict.bad .dt-v-text { color: #a92438; }
.dt-verdict.warn .dt-v-text { color: #8f5a10; }
.dt-verdict.ok  .dt-v-text { color: #0a7d61; }
.dt-v-fix { margin-top: 7px; font-size: 12px; line-height: 1.85; color: #55677f; }
.dt-verdict.bad .dt-v-fix { color: #99404f; }
.dt-verdict.warn .dt-v-fix { color: #8a6524; }
.dt-verdict.ok .dt-v-fix { color: #3f7566; }
.dt-v-acts { margin-top: 11px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dt-v-hint { font-size: 11px; line-height: 1.7; color: #6a7b93; }

/* 证据行：那条真正的 login_log */
.dt-evi { margin-top: 11px; padding: 8px 11px; border: 1px dashed var(--border-strong); border-radius: 7px; background: rgba(255,255,255,.72);
          display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: #4b5e79; }
.dt-evi .mono { font-size: 11.5px; }
.dt-evi-k { font-size: 10px; letter-spacing: .08em; color: var(--muted-2); }
.dt-evi-i { color: var(--muted); font-size: 11px; }

/* ---- clock_skew_sec 四档（PRD 11.3：>5 提示 / >30 红条；≥300 本页判疑似改钟） ---- */
.dt-skew { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 11.5px; padding: 1px 6px; border-radius: 5px; white-space: nowrap; }
.dt-skew.ok    { color: #5b6b83; }
.dt-skew.warn  { color: #a86b1a; background: var(--warning-soft); }
.dt-skew.warn2 { color: var(--danger); background: var(--danger-soft); }
.dt-skew.bad   { color: #fff; background: var(--danger); font-weight: 700; }

/* ---- 机器码展开全码 ---- */
.dt-fpcell { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dt-fptoggle { font-size: 11px; }
.dt-fppanel { margin: 8px 0 2px; padding: 9px 11px; border: 1px dashed var(--border-strong); border-radius: 8px; background: var(--surface-soft); }
.dt-fpline { display: flex; align-items: baseline; gap: 9px; padding: 5px 0; border-bottom: 1px dashed var(--border); flex-wrap: wrap; }
.dt-fpline:last-of-type { border-bottom: 0; }
.dt-fpline .k { flex: 0 0 148px; color: var(--muted-2); font-size: 10.5px; letter-spacing: .02em; }
.dt-fpline .v { color: #3f5470; font-size: 11.5px; letter-spacing: .04em; }
.dt-fpmark { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.dt-fpmark.hit  { color: var(--success); background: var(--success-soft); }
.dt-fpmark.miss { color: var(--danger); background: var(--danger-soft); }
.dt-fpsrc { color: #6a7b93; font-size: 10.5px; line-height: 1.6; }
.dt-fpnote { margin-top: 7px; color: var(--muted-2); font-size: 10.5px; line-height: 1.75; }

/* ---- 小记号 ---- */
.dt-unknown { display: inline-flex; align-items: center; height: 17px; padding: 0 5px; border-radius: 4px; background: #f3ecff; color: #6c4bc9; font-size: 10px; font-weight: 700; }
.dt-stale { color: var(--muted-2); text-decoration: line-through dotted; }
.dt-num-bad  { color: var(--danger); }
.dt-num-warn { color: #a86b1a; }
.dt-more { margin-top: 9px; line-height: 1.7; }
.dt-diff { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.dt-diff .b { color: var(--muted-2); text-decoration: line-through; }
.dt-diff .ar { color: var(--muted-2); }
.dt-diff .a { color: #3f5470; font-weight: 650; }
.dt-switch { max-width: 230px; }
.dt-hidden-src { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---- ★<=768px：手机上也要能排障（第 22 章移动端硬需求） ---- */
@media (max-width: 768px) {
  .dt-verdict { padding: 12px 12px; border-left-width: 3px; }
  .dt-v-text { font-size: 14px; }
  .dt-v-code { margin-left: 0; }
  .dt-v-head { flex-wrap: wrap; }
  .dt-v-acts .button { flex: 1 1 100%; }
  .dt-v-hint { flex: 1 1 100%; }
  .dt-evi { gap: 6px 10px; }

  /* 页头动作在窄屏排成两行：下拉换账号占满，操作按钮均分 */
  .dt-switch { max-width: none; width: 100%; flex: 1 1 100%; }
  .page-actions .button-small { flex: 1 1 calc(50% - 4px); }

  /* 卡片式表格里，机器码单元格与展开面板要能换行 */
  .dt-fpcell { width: 100%; }
  .dt-fpline .k { flex: 0 0 100%; }
  .dt-fpsrc { flex: 0 0 100%; }
  .dt-fppanel { margin-left: 0; }
  .data-table.as-cards td .dt-fppanel { margin-top: 9px; }
  .dt-skew { font-size: 12px; }
}
@media (max-width: 380px) {
  .page-actions .button-small { flex: 1 1 100%; }
  .dt-evi-i { flex: 1 1 100%; }
}
/* ==== /page-detail ==== */

/* ============================================================================
   【装配修复区】—— 由装配 agent 追加，位于所有页面追加区之后，故优先级最高。
   本区块只修装配阶段实测出来的问题，不新增任何页面样式。
   ========================================================================= */

/* --- 修复 A：桌面端外壳固定，内容区内部滚动 ------------------------------
   原先 .viewport 只写了 min-height:100vh，整个 window 跟着内容一起长高，
   于是长页面（页 2 开通表单 / 页 4 排障页 / 页 6 设置）往下翻之后，
   侧边栏 6 个入口和顶栏会一起滚出屏幕，必须滚回最顶上才能切页。
   .content 本来就写了 overflow:auto，只是祖先没有高度约束，永远不会内部滚动。
   ★ 只在 >=769px 生效：移动端保持文档滚动 + sticky 顶栏（第 528 行那套），
     手机上用 100vh 会被地址栏收放搞乱，不动它。 */
@media (min-width: 769px) {
  .viewport   { height: 100vh; }
  .app-shell  { overflow: hidden; }
  .main-area  { overflow: hidden; }
  .sidebar    { overflow-y: auto; }
  .content    { overflow-y: auto; }
}

/* --- 修复 B：移动端把「可点但看不出可点」的行内入口做成可触摸 -------------
   .ie-pencil 原本 opacity:0，只在 :hover 时显形 —— 触屏没有 hover，
   于是手机上「备注内联编辑」（第 22 章页 1 的必备能力之一）完全没有提示。
   备注整块 span 本来就可点，这里只是把提示补回来并放大热区。 */
@media (max-width: 768px) {
  .inline-edit .ie-pencil { opacity: .55; padding: 5px 8px; font-size: 12px; }
  .inline-edit .ie-pencil:active { opacity: 1; }
  /* 账号链接（跳页 4 排障）与审计页账号筛选：文字大小不变，只加高热区 */
  .acc-login { padding: 5px 2px; }
  .audit-page .ad-acc { padding: 5px 2px; }
}

/* ===== 设置页 tab(生产版 2026-08-09) ===== */
.set-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line, #e3e9f2); margin-bottom: 18px; }
.set-tab {
  appearance: none; border: none; background: none; cursor: pointer;
  padding: 10px 18px; font-size: 14px; color: #5a6b82; border-radius: 8px 8px 0 0;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.set-tab:hover { background: #f2f6fb; color: #1f2f45; }
.set-tab.active { color: #1d5bbf; border-bottom-color: #1d5bbf; font-weight: 600; background: #f7faff; }
.set-pane { max-width: 640px; padding: 4px 2px 8px; }
.set-row { margin-bottom: 14px; }
.set-row label { display: block; font-size: 13px; color: #44536a; margin-bottom: 6px; font-weight: 600; }
.set-actions { margin-top: 16px; display: flex; gap: 8px; }
.pool-lbl { font-size: 13px; color: #44536a; margin-right: 6px; font-weight: 600; }
.pool-fileinfo { font-size: 13px; color: #2a3a52; }

/* ===== 登录页 2.0(九章 · 2026-08-10)===== */
.lg2-body { margin: 0; min-height: 100vh; font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; background: #0b1526; overflow: hidden; }
.lg2-bg { position: fixed; inset: 0; background: linear-gradient(135deg, #0b1526 0%, #10233f 55%, #0d1b33 100%); }
.lg2-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .45; }
.lg2-glow.one { width: 560px; height: 560px; left: -140px; top: -160px; background: #1d5bbf; }
.lg2-glow.two { width: 480px; height: 480px; right: -120px; bottom: -140px; background: #123d7a; }
.lg2-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%); }
.lg2-shell { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.lg2-card { width: 400px; max-width: 94vw; background: rgba(255,255,255,.97); border-radius: 18px; padding: 36px 38px 26px; box-shadow: 0 24px 80px rgba(3,10,24,.55), 0 2px 8px rgba(3,10,24,.3); }
.lg2-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 26px; }
.lg2-mark { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, #1d5bbf, #123d7a); color: #fff; font-size: 24px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(29,91,191,.35); }
.lg2-brand-txt strong { display: block; font-size: 18px; color: #14243c; letter-spacing: .5px; }
.lg2-brand-txt small { display: block; font-size: 12.5px; color: #6b7c94; margin-top: 2px; letter-spacing: 2px; }
.lg2-field { margin-bottom: 15px; }
.lg2-field label { display: block; font-size: 13px; font-weight: 600; color: #44536a; margin-bottom: 6px; }
.lg2-input { width: 100%; box-sizing: border-box; height: 42px; padding: 0 13px; font-size: 14.5px; color: #14243c; background: #f4f7fb; border: 1.5px solid #dde5f0; border-radius: 10px; outline: none; transition: border-color .15s, background .15s, box-shadow .15s; }
.lg2-input:focus { border-color: #1d5bbf; background: #fff; box-shadow: 0 0 0 3px rgba(29,91,191,.13); }
.lg2-cap-row { display: flex; gap: 10px; }
.lg2-cap-input { flex: 1; }
.lg2-cap-img { width: 116px; height: 42px; padding: 0; border: 1.5px solid #dde5f0; border-radius: 10px; background: #eef2f8; cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.lg2-cap-img svg { width: 100%; height: 100%; display: block; }
.lg2-cap-img:hover { border-color: #1d5bbf; }
.lg2-cap-loading { font-size: 12px; color: #8a99b0; }
.lg2-submit { width: 100%; height: 44px; margin-top: 6px; border: none; border-radius: 10px; background: linear-gradient(135deg, #1d5bbf, #1746a0); color: #fff; font-size: 15.5px; font-weight: 600; letter-spacing: 6px; cursor: pointer; transition: filter .15s, transform .05s; }
.lg2-submit:hover { filter: brightness(1.08); }
.lg2-submit:active { transform: translateY(1px); }
.lg2-submit:disabled { opacity: .6; cursor: default; }
.lg2-error { background: #fdeeee; border: 1px solid #f3c2c2; color: #a13030; font-size: 13px; border-radius: 9px; padding: 9px 12px; margin-bottom: 14px; line-height: 1.55; }
.lg2-err-hint { color: #7a5b30; font-size: 12px; }
.lg2-foot { margin-top: 22px; text-align: center; font-size: 11.5px; color: #9aa8bc; letter-spacing: 1px; }

/* ===== 系统管理 / 分组导航 / 分页 / 等高卡(2026-08-10)===== */
.nav-group .nav-caret { margin-left: auto; font-size: 11px; color: #8a99b0; }
.nav-item.nav-child { padding-left: 38px; font-size: 13.5px; }
.nav-item.is-active-group { color: #1d5bbf; }
/* 指标卡等高:选中态加边框会把第一张撑高 —— 统一盒模型与最小高 */
.metric-grid { align-items: stretch; }
.metric-grid > * { box-sizing: border-box; min-height: 112px; }
/* 通用分页条 */
.pager { display: flex; align-items: center; gap: 8px; justify-content: flex-end; padding: 12px 4px 2px; font-size: 13px; color: #5a6b82; }
.pager button { min-width: 30px; height: 28px; border: 1px solid #dde5f0; background: #fff; border-radius: 7px; cursor: pointer; color: #44536a; }
.pager button:hover { border-color: #1d5bbf; color: #1d5bbf; }
.pager button.cur { background: #1d5bbf; border-color: #1d5bbf; color: #fff; cursor: default; }
.pager button:disabled { opacity: .4; cursor: default; }
/* 表单单选组(客户类型/资金规模/客户等级) */
.radio-group { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.radio-group label { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; color: #2a3a52; cursor: pointer; white-space: nowrap; }
.radio-group input { accent-color: #1d5bbf; }

/* 版本号显示(2026-08-10) */
.sidebar-ver { margin-top: auto; padding: 12px 18px; font-size: 11px; color: #7a8aa0; letter-spacing: .5px; }