/* ============================================================
   携程哨兵 · Design System
   --------------------------------------------------------------
   产品定位：私人哨位日志（field notebook for a watchtower）
   不是 admin dashboard，不是 SaaS 控制台。
   一个人在他的摊子上，30 分钟看一轮，记录谁在哪儿、
   我在第几名、价格怎么动。
   --------------------------------------------------------------
   调性：纸 / 墨 / 朱印 / 楷书。
   单列 980px、衬线大标 + 无衬线正文 + 等宽数字。
   ============================================================ */

:root {
  /* ─── 颜色：6 色，不调出 AI 默认三件套 ─── */
  --paper:   #F4EFE4;   /* 米白纸面，主背景 */
  --card:    #FBF8F0;   /* 浅纸，卡片表面 */
  --card-2:  #EAE2D0;   /* 嵌套表 / 浮层 */
  --ink:     #1A1814;   /* 浓墨，主文字 */
  --ink-2:   #4A4540;   /* 次墨 */
  --ink-3:   #847B6E;   /* 灰墨，注释 */
  --rule:    #D8CFB8;   /* 纸张分隔线 */
  --rule-strong: #B8AB8C;  /* 强调分隔线 */

  /* 朱印色（terracotta）— 我的、CTA、当前选中 */
  --seal:    #C2410C;
  --seal-soft: #F3D9C7;
  /* 海军蓝（navy）— 排名印章、第 1 名 */
  --navy:    #1E3A5F;
  --navy-soft: #D4DBE5;
  /* 茶绿（forest）— rank 上升、OK */
  --moss:    #4D6A3F;
  --moss-soft: #DDE5D2;
  /* 赭石（amber）— rank 下降、warning */
  --amber:   #B45309;
  --amber-soft: #F2DDB6;
  /* 朱砂（crimson）— 消失、critical */
  --crimson: #991B1B;
  --crimson-soft: #F0D2D2;

  /* 字体 */
  --font-display: "Noto Serif SC", "Songti SC", "SimSun", "STSong", serif;
  --font-body:    "Noto Sans SC", "Inter", -apple-system, BlinkMacSystemFont,
                  "PingFang SC", "Microsoft YaHei", "Segoe UI", Helvetica, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* 间距（4 倍数，宽松） */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 36px;
  --sp-7: 56px;
  --sp-8: 80px;

  /* 字号 */
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  15px;
  --fs-lg:  18px;
  --fs-xl:  24px;
  --fs-2xl: 32px;
  --fs-3xl: 44px;

  /* 阴影：一层纸阴影，克制 */
  --sh-sm: 0 1px 0 rgba(26, 24, 20, 0.04);
  --sh-md: 0 1px 2px rgba(26, 24, 20, 0.06), 0 0 0 1px var(--rule);
}

/* ----- Reset ----- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern" 1, "liga" 1, "tnum" 0;
}
a { color: var(--seal); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s; }
a:hover { border-bottom-color: var(--seal); }
button { font-family: inherit; }
table { border-collapse: collapse; width: 100%; }
code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--card-2);
  padding: 1px 5px;
  border-radius: 2px;
  color: var(--ink-2);
}

/* ─────────────────────────────────────────────────────────
   Masthead 报头
   ───────────────────────────────────────────────────────── */
.masthead {
  border-bottom: 1px solid var(--rule-strong);
  padding: var(--sp-4) var(--sp-5) 0;
  background: var(--paper);
}
.masthead-row {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-5);
}
.masthead .brand {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}
.masthead .brand .chop {
  /* 圆形印章，朱印色，宋体大字 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--seal);
  color: var(--card);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.04em;
  /* 印章的微微不规则感：用 box-shadow 做双层边 */
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--seal);
  margin-right: 2px;
  transform: translateY(2px);
}
.masthead .brand .name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  color: var(--ink);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.masthead .brand .name .light { color: var(--ink-3); font-weight: 400; }
.masthead .heartbeat {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-3);
  text-align: right;
  line-height: 1.6;
  white-space: nowrap;
}
.masthead .heartbeat .pulse {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--moss);
  margin-right: 6px;
  vertical-align: 1px;
}
.masthead .heartbeat .pulse.late {
  background: var(--amber);
}
.masthead .heartbeat .pulse.dead {
  background: var(--crimson);
}
.masthead .heartbeat .when { color: var(--ink-2); }
.masthead .heartbeat .who { color: var(--ink-3); }

/* 报头 nav */
.masthead-nav {
  max-width: 980px;
  margin: var(--sp-4) auto 0;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding-bottom: var(--sp-3);
}
.masthead-nav a {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--ink-2);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.masthead-nav a.active {
  color: var(--ink);
  border-bottom-color: var(--seal);
}
.masthead-nav a:hover { color: var(--ink); }
.masthead .right {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}
.masthead .right .user {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-3);
  white-space: nowrap;
}
.masthead .right form { margin: 0; }

/* 管理子导航 */
.admin-subnav {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  gap: var(--sp-5);
  padding: 0 0 var(--sp-3);
  border-top: 1px dashed var(--rule);
  padding-top: var(--sp-3);
}
.admin-subnav a {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--ink-3);
  border-bottom: none;
}
.admin-subnav a.active {
  color: var(--seal);
  border-bottom: 2px solid var(--seal);
}

/* ─────────────────────────────────────────────────────────
   Page 主体：单列 980px
   ───────────────────────────────────────────────────────── */
.page {
  max-width: 980px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-8);
}
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--rule);
}
.page-header h1 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 600;
  margin: 0;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.page-header .sub {
  color: var(--ink-3);
  font-size: var(--fs-sm);
  font-family: var(--font-display);
  font-style: italic;
}

/* eyebrow 小标题（贴在大标题上方） */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  color: var(--seal);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: var(--sp-2);
}

/* ─────────────────────────────────────────────────────────
   Card 卡片：纸感
   ───────────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: var(--sp-5);
  box-shadow: var(--sh-sm);
}
.card + .card { margin-top: var(--sp-4); }
.card-title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--ink);
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px dashed var(--rule);
}

/* ─────────────────────────────────────────────────────────
   KPI：报数
   ───────────────────────────────────────────────────────── */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.kpi {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: var(--sp-4) var(--sp-5);
}
.kpi .label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  color: var(--ink-3);
  letter-spacing: 0.1em;
  margin-bottom: var(--sp-2);
  text-transform: uppercase;
}
.kpi .num {
  font-family: var(--font-mono);
  font-size: var(--fs-3xl);
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}
.kpi .num .unit {
  font-size: var(--fs-md);
  color: var(--ink-3);
  margin-left: 4px;
  font-weight: 400;
}
.kpi .num.good { color: var(--moss); }
.kpi .num.warn { color: var(--amber); }
.kpi .num.danger { color: var(--crimson); }

/* ─────────────────────────────────────────────────────────
   Rank seal：印章
   ───────────────────────────────────────────────────────── */
.seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
  border: 2px solid var(--ink-2);
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.seal.r1 {
  background: var(--navy);
  color: var(--paper);
  border-color: var(--navy);
  font-weight: 700;
}
.seal.r2 {
  border-color: var(--navy);
  color: var(--navy);
}
.seal.r3 {
  border-color: var(--ink-2);
}
.seal.up { box-shadow: -2px 0 0 var(--moss); }
.seal.down { box-shadow: -2px 0 0 var(--amber); }

/* ─────────────────────────────────────────────────────────
   POI card list（总览）
   ───────────────────────────────────────────────────────── */
.poi-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
.poi-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: var(--sp-5);
  color: inherit;
  display: block;
  transition: border-color .15s;
}
.poi-card:hover {
  border-color: var(--rule-strong);
  text-decoration: none;
}
.poi-card .name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--sp-2);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.poi-card .name .id {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--ink-3);
}
.poi-card .statline {
  display: flex;
  gap: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  padding-top: var(--sp-3);
  margin-top: var(--sp-3);
  border-top: 1px dashed var(--rule);
}
.poi-card .statline .stat .v { color: var(--ink); font-weight: 500; }
.poi-card .statline .stat .v.mine { color: var(--seal); }
.poi-card .statline .stat .k {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  color: var(--ink-3);
  letter-spacing: 0.1em;
  margin-bottom: 2px;
  text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────
   Table：纸质账本
   ───────────────────────────────────────────────────────── */
.table {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
}
.table table { width: 100%; }
.table th, .table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.table th {
  background: var(--card-2);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  color: var(--ink-2);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.table tr:last-child td { border-bottom: none; }
.table tr.is-mine td {
  background: var(--seal-soft);
}
.table tr.is-mine td:first-child {
  border-left: 3px solid var(--seal);
  padding-left: calc(var(--sp-4) - 3px);
}
.table td.num, .table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}
.table td .sku-name {
  font-size: var(--fs-md);
  color: var(--ink);
  font-weight: 500;
}
.table td .sku-name .vendor {
  color: var(--ink-3);
  font-size: var(--fs-xs);
  font-weight: 400;
  font-family: var(--font-display);
  font-style: italic;
  display: block;
  margin-top: 2px;
}

/* ─────────────────────────────────────────────────────────
   Shelf group（POI detail）：分组账页
   ───────────────────────────────────────────────────────── */
.shelf-group {
  margin-bottom: var(--sp-6);
}
.shelf-group .header {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--card-2);
  border: 1px solid var(--rule);
  border-bottom: none;
  border-radius: 2px 2px 0 0;
}
.shelf-group .header .title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
  flex: 1;
}
.shelf-group .header .shelf-id {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.shelf-group .body {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 0 0 2px 2px;
  overflow: hidden;
}

.sku-row {
  display: grid;
  grid-template-columns: 36px 1fr 140px 80px;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--rule);
}
.sku-row:last-child { border-bottom: none; }
.sku-row.mine {
  background: var(--seal-soft);
}
.sku-row .sku-info .sku-name {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--ink);
}
.sku-row .sku-info .sku-meta {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  margin-top: 2px;
}
.sku-row .sku-info .sku-meta .mine-tag {
  color: var(--seal);
  font-style: normal;
  font-weight: 600;
  font-family: var(--font-display);
  margin-left: 6px;
}
.sku-row .price {
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sku-row .price .market {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-3);
  text-decoration: line-through;
}
.sku-row .sales {
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.sku-row .sales .v { color: var(--ink-2); }

/* ─────────────────────────────────────────────────────────
   Watchlist toggle：星标
   ───────────────────────────────────────────────────────── */
.wl-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--ink-3);
  border: 1px solid var(--rule);
  padding: 4px 10px;
  border-radius: 2px;
  background: var(--paper);
  transition: border-color .15s, color .15s;
}
.wl-toggle:hover { border-color: var(--seal); color: var(--seal); }
.wl-toggle.on {
  color: var(--seal);
  border-color: var(--seal);
  background: var(--seal-soft);
}

/* ─────────────────────────────────────────────────────────
   Form：克制
   ───────────────────────────────────────────────────────── */
.form-row {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  margin-bottom: var(--sp-3);
}
.form-row label {
  min-width: 90px;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.form-row input,
.form-row select,
.form-row textarea {
  flex: 1;
  padding: var(--sp-2) var(--sp-3);
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-family: inherit;
  font-size: var(--fs-sm);
  transition: border-color .15s;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--seal);
  box-shadow: 0 0 0 3px var(--seal-soft);
}
.form-row .hint { font-size: var(--fs-xs); color: var(--ink-3); }

/* ─────────────────────────────────────────────────────────
   Button：印章式
   ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.btn:hover {
  border-color: var(--ink);
  background: var(--card);
}
.btn.primary {
  background: var(--seal);
  border-color: var(--seal);
  color: var(--paper);
}
.btn.primary:hover {
  background: var(--ink);
  border-color: var(--ink);
}
.btn.danger {
  background: var(--crimson);
  border-color: var(--crimson);
  color: var(--paper);
}
.btn.danger:hover {
  background: var(--ink);
  border-color: var(--ink);
}
.btn.ghost {
  background: transparent;
  border-color: var(--rule);
  color: var(--ink-2);
}
.btn.sm {
  padding: 3px var(--sp-3);
  font-size: var(--fs-xs);
}

/* ─────────────────────────────────────────────────────────
   Alert list：朱批
   ───────────────────────────────────────────────────────── */
.alert-list { display: flex; flex-direction: column; gap: 0; }
.alert-row {
  display: grid;
  grid-template-columns: 140px 90px 1fr;
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-3) var(--sp-4);
  background: var(--card);
  border: 1px solid var(--rule);
  border-bottom: none;
}
.alert-row:first-child { border-radius: 2px 2px 0 0; }
.alert-row:last-child { border-bottom: 1px solid var(--rule); border-radius: 0 0 2px 2px; }
.alert-row.critical {
  background: var(--crimson-soft);
  border-color: var(--crimson);
}
.alert-row.warning {
  background: var(--amber-soft);
  border-color: var(--amber);
}
.alert-row.info { }
.alert-row .ts {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.alert-row .pill {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 2px;
  display: inline-flex;
  width: fit-content;
}
.alert-row .pill.critical { background: var(--crimson); color: var(--paper); }
.alert-row .pill.warning  { background: var(--amber);   color: var(--paper); }
.alert-row .pill.info     { background: var(--navy);    color: var(--paper); }
.alert-row .body { font-size: var(--fs-sm); }
.alert-row .body .title { color: var(--ink); font-weight: 500; }
.alert-row .body .ctx {
  color: var(--ink-3);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-xs);
  margin-top: 2px;
}

/* ─────────────────────────────────────────────────────────
   Login：单页
   ───────────────────────────────────────────────────────── */
.login-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: var(--sp-5);
}
.login-card {
  width: 360px;
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: var(--sp-6);
  box-shadow: 0 2px 0 rgba(26, 24, 20, 0.06);
}
.login-card .brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--rule);
}
.login-card .brand .chop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--seal);
  color: var(--card);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--seal);
}
.login-card .brand .name {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--ink);
}
.login-card .brand .name .light {
  color: var(--ink-3);
  font-weight: 400;
  display: block;
  font-size: var(--fs-xs);
  margin-top: 2px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.login-card .err {
  background: var(--crimson-soft);
  color: var(--crimson);
  padding: var(--sp-2) var(--sp-3);
  border-radius: 2px;
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
  font-family: var(--font-display);
}

/* ─────────────────────────────────────────────────────────
   Misc
   ───────────────────────────────────────────────────────── */
.empty {
  text-align: center;
  padding: var(--sp-7) var(--sp-5);
  color: var(--ink-3);
  background: var(--card);
  border: 1px dashed var(--rule);
  border-radius: 2px;
  font-family: var(--font-display);
  font-style: italic;
}
.empty .icon { font-size: 28px; opacity: .5; margin-bottom: var(--sp-3); }

.spark { display: inline-block; vertical-align: middle; }

.muted { color: var(--ink-3); }
.dim { color: var(--ink-2); }
.mono { font-family: var(--font-mono); }
.right { text-align: right; }
.flex { display: flex; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.between { justify-content: space-between; }
.center { align-items: center; }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.hidden { display: none !important; }

/* 旋转 Secret 后的提示卡 */
.notice {
  background: var(--amber-soft);
  border: 1px solid var(--amber);
  color: var(--ink);
  border-radius: 2px;
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
}
.notice strong { color: var(--amber); margin-right: 4px; }

/* Secret 区域：等宽 */
.secret-box {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  flex: 1;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: var(--sp-2) var(--sp-3);
  border-radius: 2px;
  color: var(--ink);
  word-break: break-all;
}
.secret-box:focus { outline: none; border-color: var(--seal); }

/* 滚动条：浅色 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb {
  background: var(--rule);
  border: 2px solid var(--paper);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover { background: var(--rule-strong); }

/* 选区 */
::selection { background: var(--seal-soft); color: var(--ink); }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* 响应：堆叠 */
@media (max-width: 720px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .poi-list { grid-template-columns: 1fr; }
  .masthead-row { flex-direction: column; gap: var(--sp-2); }
  .masthead .heartbeat { text-align: left; }
}