/* MyVault — Enterprise design system
   三栏：导航 | 紧凑列表 | 详情
   克制配色、高信息密度、6–8px 圆角、无霓虹渐变 */

:root {
  --bg: #0e1116;
  --panel: #14181f;
  --panel2: #1a1f28;
  --panel3: #222833;
  --border: #252b36;
  --border2: #323a48;
  --text: #e8eaef;
  --text2: #9aa3b2;
  --text3: #6b7382;
  --accent: #4c6ef5;
  --accent-hover: #5c7cfa;
  --accent-soft: rgba(76, 110, 245, 0.14);
  --accent-border: rgba(76, 110, 245, 0.45);
  --danger: #e5534b;
  --danger-soft: rgba(229, 83, 75, 0.12);
  --ok: #2f9e44;
  --ok-soft: rgba(47, 158, 68, 0.12);
  --warn: #f08c00;
  --warn-soft: rgba(240, 140, 0, 0.12);
  --star: #f59f00;
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --font: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --mono: "Cascadia Code", "SF Mono", Consolas, monospace;
  --topbar-h: 52px;
  --sidebar-w: 220px;
  --list-w: 340px;
}

[data-theme="light"] {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --panel2: #f8f9fb;
  --panel3: #eef0f4;
  --border: #e2e5ea;
  --border2: #c9ced8;
  --text: #1a1d23;
  --text2: #5c6570;
  --text3: #8b939e;
  --accent: #3b5bdb;
  --accent-hover: #364fc7;
  --accent-soft: rgba(59, 91, 219, 0.1);
  --accent-border: rgba(59, 91, 219, 0.4);
  --danger: #c92a2a;
  --danger-soft: rgba(201, 42, 42, 0.08);
  --ok: #2b8a3e;
  --ok-soft: rgba(43, 138, 62, 0.1);
  --warn: #e67700;
  --warn-soft: rgba(230, 119, 0, 0.1);
  --shadow: 0 12px 40px rgba(30, 40, 60, 0.12);
  --shadow-sm: 0 2px 8px rgba(30, 40, 60, 0.06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.hidden { display: none !important; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input, select, textarea {
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  width: 100%;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input::placeholder, textarea::placeholder { color: var(--text3); }

code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--panel3);
  padding: 1px 5px;
  border-radius: 4px;
}
a { color: var(--accent); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn.primary {
  background: var(--accent);
  color: #fff;
}
.btn.primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn.ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text2);
}
.btn.ghost:hover { background: var(--panel3); color: var(--text); border-color: var(--border2); }
.btn.danger { background: var(--danger-soft); color: var(--danger); }
.btn.danger:hover { background: var(--danger); color: #fff; }
.btn.wide { width: 100%; }
.btn.small { height: 28px; padding: 0 10px; font-size: 12.5px; }

.icon-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text2);
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
  font-size: 15px;
}
.icon-btn:hover { background: var(--panel3); color: var(--text); }
.icon-btn.big { width: 36px; height: 36px; background: var(--panel3); font-size: 16px; }
.icon-btn.fav-on { color: var(--star); }

/* SVG icons in toolbar */
.icon-btn svg, .btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Screens / Auth ---------- */
.screen { min-height: 100vh; }
#auth-screen, #lock-screen, #send-screen {
  overflow: auto;
  /* 与主界面同一底色 + 极淡 accent 光晕，避免登录页与应用“割裂” */
  background:
    radial-gradient(900px 480px at 50% -10%, rgba(76, 110, 245, 0.1), transparent 62%),
    var(--bg);
}

.auth-card {
  width: min(400px, calc(100vw - 32px));
  margin: 10vh auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px 24px;
  box-shadow: var(--shadow);
}

.brand { text-align: center; margin-bottom: 22px; }
.brand-icon {
  width: 48px; height: 48px;
  margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: 12px;
}
.brand h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.brand-sub { color: var(--text3); font-size: 13px; margin-top: 4px; }

.auth-tabs {
  display: flex;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px;
  margin-bottom: 18px;
  gap: 3px;
}
.auth-tab {
  flex: 1;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text3);
  transition: background 0.12s, color 0.12s;
}
.auth-tab.active {
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form label, .modal-body label, .settings-group label {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.auth-form label span, .modal-body label span, .settings-group label span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text2);
}
.auth-hint { font-size: 12px; color: var(--text3); text-align: center; line-height: 1.5; }
.auth-hint.warning { color: var(--warn); }
.form-error {
  margin-top: 12px;
  padding: 8px 10px;
  background: var(--danger-soft);
  color: var(--danger);
  border-radius: var(--radius-sm);
  font-size: 13px;
  text-align: center;
}

/* ---------- Send 领取屏 ---------- */
#send-content { text-align: left; }
#send-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 6px 0 12px;
  word-break: break-word;
}
.send-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  margin-bottom: 8px;
}
.send-line .val {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--text);
  word-break: break-all;
  white-space: pre-wrap;
}
#share-result input[readonly] { font-family: var(--mono); font-size: 12.5px; }

.strength-bar {
  height: 4px;
  background: var(--panel3);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 4px;
}
.strength-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 99px;
  transition: width 0.2s ease;
}
.strength-fill[data-level="0"] { background: var(--danger); }
.strength-fill[data-level="1"] { background: #e8590c; }
.strength-fill[data-level="2"] { background: var(--warn); }
.strength-fill[data-level="3"] { background: var(--ok); }
.strength-fill[data-level="4"] { background: var(--accent); }
.strength-text { font-size: 12px; color: var(--text3); margin-top: 4px; }

/* ---------- Topbar ---------- */
.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 40;
}
.topbar-left { display: flex; align-items: center; gap: 8px; min-width: 0; width: calc(var(--sidebar-w) - 14px); }
.logo {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: 7px;
}
.logo-text {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.search-wrap { flex: 1; max-width: 420px; position: relative; }
.search-wrap input {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 12px 7px 32px;
  font-size: 13.5px;
  height: 34px;
}
.search-wrap::before {
  content: "";
  position: absolute;
  left: 10px; top: 50%;
  width: 14px; height: 14px;
  transform: translateY(-50%);
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7382' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3-3'/%3E%3C/svg%3E");
  opacity: 0.9;
  pointer-events: none;
}
.topbar-right { display: flex; align-items: center; gap: 4px; margin-left: auto; }

/* ---------- 3-pane layout ---------- */
#app-screen {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 0;
}

.layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--sidebar-w) var(--list-w) 1fr;
}

.sidebar {
  background: var(--panel);
  border-right: 1px solid var(--border);
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  min-height: 0;
}
.sidebar-section h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text3);
  padding: 0 8px;
  margin-bottom: 6px;
  font-weight: 700;
}
#category-list { display: flex; flex-direction: column; gap: 1px; }
.cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--text2);
  transition: background 0.1s, color 0.1s;
}
.cat-item:hover { background: var(--panel2); color: var(--text); }
.cat-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 650;
}
.cat-count {
  font-size: 11px;
  background: var(--panel3);
  color: var(--text3);
  padding: 1px 7px;
  border-radius: 99px;
  font-variant-numeric: tabular-nums;
  min-width: 22px;
  text-align: center;
}
.cat-count:empty { display: none; } /* 空计数不渲染小胶囊（统计/报告等无计数项） */
.cat-item.active .cat-count {
  background: var(--accent-soft);
  color: var(--accent);
}
.sidebar-footer {
  margin-top: auto;
  padding: 8px 8px 2px;
  font-size: 12px;
  color: var(--text3);
  border-top: 1px solid var(--border);
}

/* ---------- List pane ---------- */
.list-pane {
  /* 与侧栏/详情同一表面，仅靠 1px 分隔线划分，消除三栏色带割裂感 */
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.list-pane-head {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
}
.list-pane-head h2 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.list-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 6px;
}
.entry-list { display: flex; flex-direction: column; gap: 2px; }

.entry-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.entry-card:hover { background: var(--panel2); }
.entry-card.selected {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  /* 左侧 accent 竖条：把列表选中态“牵”向右侧详情，强化两栏联动 */
  box-shadow: inset 3px 0 0 var(--accent);
}
.entry-avatar {
  width: 32px; height: 32px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  background: #4c6ef5;
  flex-shrink: 0;
}
.entry-avatar[data-hue="1"] { background: #ae3ec9; }
.entry-avatar[data-hue="2"] { background: #1098ad; }
.entry-avatar[data-hue="3"] { background: #2f9e44; }
.entry-avatar[data-hue="4"] { background: #e8590c; }
.entry-avatar[data-hue="5"] { background: #5c7cfa; }

.entry-main { flex: 1; min-width: 0; }
.entry-name {
  font-weight: 600;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.entry-name .fav-mark { color: var(--star); font-size: 11px; flex-shrink: 0; }
.entry-sub {
  font-size: 12px;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.type-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--panel3);
  color: var(--text3);
  flex-shrink: 0;
}
.type-badge.login { background: var(--accent-soft); color: var(--accent); }
.type-badge.note { background: var(--warn-soft); color: var(--warn); }
.type-badge.identity { background: rgba(190, 50, 140, 0.14); color: #d63384; }
.type-badge.card { background: var(--ok-soft); color: var(--ok); }

.entry-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.12s;
  flex-shrink: 0;
}
.entry-card:hover .entry-actions,
.entry-card.selected .entry-actions { opacity: 1; }
.entry-actions .icon-btn { width: 28px; height: 28px; font-size: 13px; }

.empty-state {
  text-align: center;
  padding: 48px 16px;
  color: var(--text3);
}
.empty-icon { font-size: 36px; margin-bottom: 10px; opacity: 0.7; }
.empty-state h3 { color: var(--text2); font-size: 15px; margin-bottom: 6px; }
.empty-state p { font-size: 13px; line-height: 1.6; }
.no-result {
  text-align: center;
  padding: 32px 12px;
  color: var(--text3);
  font-size: 13px;
}

/* ---------- Detail pane ---------- */
.detail-pane {
  background: var(--panel);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.detail-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text3);
  gap: 8px;
  padding: 32px;
  text-align: center;
}
.detail-placeholder .ph-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--panel2);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  margin-bottom: 4px;
}
.detail-placeholder h3 { font-size: 15px; color: var(--text2); font-weight: 650; }
.detail-placeholder p { font-size: 13px; max-width: 280px; line-height: 1.6; }

.detail-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 18px 22px 28px;
}
.detail-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.detail-head .entry-avatar {
  width: 44px; height: 44px;
  font-size: 18px;
  border-radius: 10px;
}
.detail-title { flex: 1; min-width: 0; }
.detail-title h2 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.detail-title .sub {
  font-size: 13px;
  color: var(--text3);
  margin-top: 3px;
}
.detail-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}
.field-group > label,
.field-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text3);
}
/* 详情字段双列网格：消除单列铺满造成的横向空白 */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
  align-items: start;
}
.detail-grid .field-group { margin-bottom: 0; }
.field-group.span-2 { grid-column: 1 / -1; }
/* 元信息行：分类/时间用一行轻量文本替代整宽字段盒 */
.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text3);
}
.detail-meta b {
  color: var(--text2);
  font-weight: 650;
  margin-right: 5px;
}
.field-row-view {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 10px;
  min-height: 36px;
}
.field-row-view .val {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--text);
  word-break: break-all;
  user-select: all;
  font-family: inherit;
}
.field-row-view .val.mono { font-family: var(--mono); font-size: 13.5px; }
.field-row-view .val.masked {
  letter-spacing: 0.15em;
  font-family: var(--mono);
  user-select: none;
}
.field-row-view .acts { display: flex; gap: 2px; flex-shrink: 0; }

.detail-section {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.detail-section h3 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text3);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.detail-notes {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 13.5px;
  color: var(--text2);
  white-space: pre-wrap;
  line-height: 1.6;
}
.totp-live {
  font-size: 13px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  margin-top: 6px;
}
.history-list, .fields-list, .report-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* 详情内的自定义字段双列（卡片类条目持卡人/卡号…不再整宽一列）；
   注意：弹窗编辑器也用 .fields-list，必须限定在详情内避免挤坏表单 */
.detail-scroll .fields-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
}
.history-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto auto;
  gap: 6px;
  align-items: center;
}
.field-row input, .field-row select {
  min-width: 0;
  padding: 6px 8px;
  font-size: 13px;
}

/* ---------- Report / dashboard (spans list+detail) ---------- */
.report-panel {
  grid-column: 2 / -1;
  overflow: auto;
  background: var(--panel);
  padding: 20px 24px 36px;
  min-height: 0;
}
.report-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.report-head h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }

.health-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
  padding: 20px 22px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 14px;
}
.health-ring {
  width: 100px; height: 100px;
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background:
    radial-gradient(closest-side, var(--panel) 76%, transparent 77% 100%),
    conic-gradient(var(--accent) calc(var(--pct, 0) * 1%), var(--panel3) 0);
}
.health-score {
  font-size: 28px;
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.health-grade {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.1em;
  margin-top: 3px;
}
.health-meta { display: flex; flex-direction: column; gap: 6px; }
.health-tips { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.health-tips li {
  font-size: 13.5px;
  color: var(--text2);
  padding-left: 16px;
  position: relative;
}
.health-tips li::before {
  content: "›";
  position: absolute;
  left: 2px;
  color: var(--accent);
  font-weight: 700;
}
.health-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}
.stat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 12px;
  text-align: center;
}
.stat-card .n {
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-card .l { font-size: 11.5px; color: var(--text3); margin-top: 3px; }
.stat-card.warn .n { color: var(--warn); }
.stat-card.bad .n { color: var(--danger); }
.stat-card.ok .n { color: var(--ok); }

/* ---------- 统计总览：卡片流布局 ---------- */
.stats-flow {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.stats-flow > .kpi-grid { margin-bottom: 0; }
.stat-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px 16px;
  min-width: 0;
}
.stat-panel h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  margin: 0 0 12px;
  font-weight: 700;
  color: var(--text2);
}
.stats-cols {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 14px;
  align-items: start;
}
.stats-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
/* 卡片内的健康条/分布条不再自带外框 */
.stat-panel .health-strip {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}
.stat-panel .kpi-grid.compact + .bar-list { margin-top: 12px; }
/* 域名 KPI 恰好 3 个：一行排开，避免 2 列网格落单 */
#stats-domain-kpis { grid-template-columns: repeat(3, 1fr); }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 8px;
}
.kpi-grid.compact { grid-template-columns: repeat(2, 1fr); margin-bottom: 0; }

/* 使用排行：卡内两个子榜 */
.board-sub {
  font-size: 12px;
  font-weight: 650;
  color: var(--text3);
  margin: 14px 0 8px;
}
.stat-panel h3 + .board-sub { margin-top: 0; }
.mini-list + .board-sub {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

/* 单色横条分布：值在条端，行间距即表面分隔 */
.bar-list { display: flex; flex-direction: column; gap: 6px; }
.bar-row {
  display: grid;
  grid-template-columns: 96px 1fr 92px;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 5px 8px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.bar-row:hover { background: var(--panel2); }
.bar-label {
  font-size: 13px;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-track {
  display: block;
  height: 16px;
  background: var(--panel3);
  border-radius: 0 4px 4px 0;
  overflow: hidden;
}
.bar-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 0 4px 4px 0;
}
.bar-val {
  font-size: 12.5px;
  color: var(--text3);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* ---------- 统计总览增强：健康强度 / 域名 / 趋势 / 覆盖率 ---------- */
button.stat-card { cursor: pointer; font-family: inherit; transition: border-color 0.1s, background 0.1s; }
button.stat-card:hover { border-color: var(--border2); background: var(--panel2); }

.health-strip {
  display: grid;
  grid-template-columns: 116px 1fr minmax(260px, 1.15fr);
  gap: 14px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.health-score .n { font-size: 30px; }
.strength-block { min-width: 0; }
.strength-bar {
  display: flex;
  height: 14px;
  background: var(--panel3);
  border-radius: 4px;
  overflow: hidden;
}
.strength-bar .seg { display: block; height: 100%; }
.strength-bar .seg.strong { background: var(--ok); }
.strength-bar .seg.mid { background: var(--warn); }
.strength-bar .seg.weak { background: var(--danger); }
.strength-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 7px;
  font-size: 12.5px;
  color: var(--text2);
}
.strength-legend .lg.strong { color: var(--ok); }
.strength-legend .lg.mid { color: var(--warn); }
.strength-legend .lg.weak { color: var(--danger); }
.risk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.risk-grid .stat-card { padding: 10px 6px; }

.bar-row.domain { grid-template-columns: 136px 1fr 92px; }

.trend-lg .sw {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin: 0 3px 0 7px;
  vertical-align: middle;
}
.trend-lg .sw:first-child { margin-left: 0; }
.trend-lg .sw.created { background: var(--accent); }
.trend-lg .sw.updated { background: var(--text2); }

.trend-chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 128px;
  padding-top: 4px;
}
.trend-col {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.trend-bars {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
}
.trend-bars .tb { width: 13px; border-radius: 3px 3px 0 0; }
.trend-bars .tb.created { background: var(--accent); }
.trend-bars .tb.updated { background: var(--text2); }
.trend-x { font-size: 11px; color: var(--text3); }
.trend-v {
  font-size: 11px;
  color: var(--text3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mini-list { display: flex; flex-direction: column; gap: 2px; }
.mini-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 6px 8px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font-size: 13px;
  transition: background 0.1s;
}
.mini-row:hover { background: var(--panel2); }
.mini-rank {
  color: var(--text3);
  font-size: 12px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.mini-name { color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-meta { color: var(--text3); font-size: 12px; white-space: nowrap; }

.cov-list { display: flex; flex-direction: column; gap: 12px; }
.cov-row { display: grid; grid-template-columns: 118px 1fr 118px; gap: 10px; align-items: center; }
.cov-label { font-size: 13px; color: var(--text2); }
.cov-track { display: block; height: 16px; background: var(--panel3); border-radius: 4px; overflow: hidden; }
.cov-fill { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.cov-val {
  font-size: 12.5px;
  color: var(--text3);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 分类快捷 chips（编辑弹窗） */
.cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -2px 0 12px;
}
.chip {
  height: 26px;
  padding: 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text2);
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 99px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.chip:hover { border-color: var(--border2); color: var(--text); }
.chip.active {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent);
}

.report-section { margin-top: 18px; }
.report-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  margin: 0 0 8px;
  font-weight: 700;
  color: var(--text2);
}
.report-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  transition: border-color 0.12s;
  margin-bottom: 6px;
}
.report-row:hover { border-color: var(--accent-border); }

/* ---------- Modals ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 14, 0.55);
  backdrop-filter: blur(3px);
}
.modal-card {
  position: relative;
  width: min(540px, 100%);
  max-height: min(88vh, 900px);
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  animation: modal-in 0.16s ease;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.modal-card.narrow { width: min(440px, 100%); }
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 10px;
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 2;
}
.modal-head h2 { font-size: 16px; font-weight: 700; }
.modal-body {
  padding: 4px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.modal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.modal-actions .spacer { flex: 1; }
.input-action { display: flex; gap: 6px; align-items: center; }
.input-action input { flex: 1; min-width: 0; }

/* 手机壳（分类横滑条/底部标签栏）：桌面隐藏，≤760px 断点显示 */
.mobile-shell { display: none; }
/* 更多抽屉：仅 ≤760px 可用（该断点内显示，是否弹出由 .hidden 控制） */
.more-sheet { display: none; }
/* 详情「← 返回」：仅窄屏全屏详情时显示 */
.detail-back { display: none; }

/* Generator / settings fragments */
.gen-tabs { margin-bottom: 2px; }
.gen-tabs .auth-tab { flex: 1; }
.gen-output-row { display: flex; gap: 6px; align-items: center; }
.gen-output-row input {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  background: var(--panel2);
}
.inline-label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.inline-label span { white-space: nowrap; }
.inline-label input[type="range"] {
  flex: 1; width: auto; padding: 0; border: none; background: transparent;
  accent-color: var(--accent);
}
.check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}
.check {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 7px !important;
  font-size: 13px;
  color: var(--text2);
  cursor: pointer;
}
.check input { width: auto; accent-color: var(--accent); }
.check select { width: auto; margin-left: auto; padding: 3px 6px; font-size: 12.5px; }

.settings-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.settings-group:last-of-type { border-bottom: none; }
.settings-group h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 700;
}
.settings-line { font-size: 13.5px; color: var(--text2); }
.settings-line.dim { font-size: 12.5px; color: var(--text3); line-height: 1.6; }
.settings-line select { width: auto; padding: 4px 8px; margin-left: 6px; font-size: 13px; }

.recovery-codes {
  margin-top: 6px;
  padding: 10px;
  background: var(--panel2);
  border: 1px dashed var(--border2);
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 12.5px;
  white-space: pre-wrap;
  user-select: all;
  line-height: 1.7;
}
.selectable { user-select: all; }
.small-uri { font-size: 11px; word-break: break-all; }
.dim { opacity: 0.8; }
.export-choices { display: flex; flex-direction: column; gap: 8px; }

.file-label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 14px;
  border: 1px dashed var(--border2);
  border-radius: var(--radius);
  color: var(--text2);
  cursor: pointer;
  text-align: center;
  font-weight: 600;
  font-size: 13.5px;
  transition: border-color 0.12s, background 0.12s;
}
.file-label:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.file-label input { display: none; }

.qr-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: fit-content;
  margin: 0 auto;
}
.qr-box svg { display: block; image-rendering: pixelated; }
.qr-box .qr-cap { color: #111; font-size: 12px; font-weight: 600; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel3);
  color: var(--text);
  border: 1px solid var(--border2);
  padding: 9px 18px;
  border-radius: var(--radius);
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: var(--shadow);
  z-index: 200;
  animation: toast-in 0.18s ease-out;
  max-width: 90vw;
  text-align: center;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

#btn-theme { font-size: 14px; }
.pwa-hint { font-size: 12px; color: var(--text3); text-align: center; }

* { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .layout { grid-template-columns: var(--sidebar-w) 1fr; }
  .detail-pane { display: none; }
  .list-pane { border-right: none; }
  .report-panel { grid-column: 2 / -1; }
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .stats-cols { grid-template-columns: 1fr; }
  .health-strip { grid-template-columns: 116px 1fr; }
  .risk-grid { grid-column: 1 / -1; }
  /* 选中时用全宽浮层详情：由 JS 切 body.detail-open */
  body.detail-open .list-pane { display: none; }
  body.detail-open .detail-pane {
    display: flex;
    grid-column: 2 / -1;
    border-left: none;
  }
  /* 全屏详情的返回按钮（平板/手机共用） */
  body.detail-open .detail-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    color: var(--text);
    font-size: 16px;
    cursor: pointer;
    margin-right: 2px;
    align-self: flex-start;
  }
  body.detail-open .detail-back svg { width: 18px; height: 18px; }
}

@media (max-width: 760px) {
  :root { --sidebar-w: 0px; --list-w: 100%; }
  .sidebar { display: none; }
  .layout { grid-template-columns: 1fr; }
  .topbar-left { width: auto; }
  .logo-text { display: none; }
  .topbar {
    flex-wrap: wrap;
    height: auto;
    padding: 6px 10px;
    gap: 6px;
  }
  .search-wrap { order: 3; max-width: none; width: 100%; }
  .report-panel { grid-column: 1 / -1; }
  .health-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .health-stats { grid-template-columns: repeat(2, 1fr); }
  .check-grid { grid-template-columns: 1fr; }
  .auth-card { margin: 4vh auto; }
  .detail-scroll { padding: 16px; }
  .detail-head { flex-direction: column; }
  .detail-grid { grid-template-columns: 1fr; }
  .field-group.span-2 { grid-column: auto; }
  .detail-scroll .fields-list { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-cols { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 72px 1fr 80px; }
  .bar-row.domain { grid-template-columns: 96px 1fr 84px; }
  .health-strip { grid-template-columns: 1fr; }
  .risk-grid { grid-template-columns: repeat(2, 1fr); }
  .cov-row { grid-template-columns: 92px 1fr 96px; }
  /* ---------- 手机壳（App 操作模式） ---------- */
  .topbar-right { display: none; } /* 7 个功能入口移入标签栏/抽屉 */

  /* 分类横滑条：替代侧栏/下拉，数据与侧栏同源 */
  .cat-strip {
    display: flex;
    gap: 8px;
    padding: 6px 10px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--border);
    background: var(--panel);
    flex-shrink: 0;
  }
  .cat-strip::-webkit-scrollbar { display: none; }
  .cat-pill {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--panel2);
    color: var(--text2);
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
  }
  .cat-pill.active {
    background: var(--accent-soft);
    border-color: var(--accent-border);
    color: var(--accent);
    font-weight: 650;
  }
  .cat-pill.active .cat-count {
    background: var(--accent-soft);
    color: var(--accent);
  }

  /* 底部标签栏：#app-screen 为 100vh flex 列，置于末位即固定底部；
     列表/详情滚动区由 .layout flex:1 自动让位 */
  .tabbar {
    display: flex;
    flex-shrink: 0;
    background: var(--panel);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 45;
  }
  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 52px;
    padding: 6px 0;
    border: none;
    background: transparent;
    color: var(--text2);
    font-size: 11px;
    cursor: pointer;
  }
  .tab-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
  }
  .tab-ico svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .tab-item.tab-add .tab-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
  }
  .tab-item.tab-add .tab-ico svg { width: 18px; height: 18px; }
  .tab-item.tab-add .tab-text { color: var(--accent); font-weight: 650; }
  .tab-item:active { background: var(--panel2); }

  /* 更多抽屉：底部滑出面板 */
  .more-sheet {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 80;
  }
  .sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
  }
  .sheet-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 82vh;
    overflow-y: auto;
    background: var(--panel);
    border-radius: 16px 16px 0 0;
    padding: 8px 10px calc(12px + env(safe-area-inset-bottom));
  }
  .sheet-handle {
    width: 40px;
    height: 4px;
    margin: 4px auto 8px;
    border-radius: 99px;
    background: var(--border2);
  }
  .sheet-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text);
    font-size: 15px;
    text-align: left;
    cursor: pointer;
  }
  .sheet-row:hover,
  .sheet-row:active { background: var(--panel2); }
  .sheet-row.danger { color: var(--danger); }
  .sheet-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
  }
  .sheet-ico svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* 顶部内容区收紧：标题/摘要/KPI 卡在手机上降一号（用户反馈整体偏大偏高） */
  .report-head h2 { font-size: 15px; }
  .report-head .dim { font-size: 12.5px; }
  .stat-card { padding: 10px 8px; }
  .stat-card .n { font-size: 18px; }
}