/* ============================================================
   Chronik · 平台 UI 设计系统
   ------------------------------------------------------------
   设计语言：Apple（HIG）
     · 信息层级、留白节奏、克制的色彩、单一强调色
     · 44pt 触控目标、毛玻璃导航、渐进披露、底部 sheet
     · 语义化颜色（label / secondaryLabel / separator / fill）
   配色：Claude / Anthropic 暖调体系
     · 主强调  #D97757 赤陶（不用蓝紫等冷科技色）
     · 中性阶全部带暖调（ivory / oat / sand / olive gray），
       无纯白纯黑冷灰
   字体：
     · 发布体（标题）—— 衬线（中文宋体系），呼应命理古典传统
     · UI（控件/正文）—— 系统无衬线（-apple-system → PingFang SC）
     · 图标 —— Font Awesome webfont（public/icons.css），无 SVG 无 emoji
   自适应：容器查询 + 断点；安全区；深色模式；prefers-reduced-motion
   ============================================================ */

:root {
  color-scheme: light dark;

  /* —— 表面（Claude 暖中性阶）—— */
  --u-bg:          #faf9f5;   /* ivory · 页面底 */
  --u-surface:     #ffffff;   /* 卡片 */
  --u-surface-2:   #f0eee6;   /* oat · 分组/内嵌面 */
  --u-surface-3:   #e8e6dc;   /* warm sand · 交互填充 */
  --u-surface-4:   #e3dacc;   /* sand · 徽章 */
  --u-fill:        rgba(20, 20, 19, .06);
  --u-fill-2:      rgba(20, 20, 19, .04);
  --u-fill-3:      rgba(20, 20, 19, .03);

  /* —— 文字（暖灰阶）—— */
  --u-ink:         #141413;   /* 墨 · 主文字 */
  --u-ink-2:       #5e5d59;   /* olive gray · 次级正文 */
  --u-ink-3:       #87867f;   /* stone gray · 三级/弱化 */
  --u-ink-4:       #b0aea5;   /* mid gray · 占位 */
  --u-ink-inv:     #faf9f5;

  /* —— 分隔线 —— */
  --u-line:        #e8e6dc;   /* border cream · 默认 */
  --u-line-2:      #d1cfc5;   /* border warm · 强调 */

  /* —— 强调色 —— */
  --u-accent:      #d97757;   /* 赤陶 · 主 CTA / 链接 */
  --u-accent-press:#c4633f;
  --u-accent-soft: rgba(217, 119, 87, .10);
  --u-accent-soft-2: rgba(217, 119, 87, .18);
  --u-on-accent:   #ffffff;

  --u-blue:        #6a9bcc;   /* 次强调（慎用） */
  --u-green:       #788c5d;   /* 第三强调 */
  --u-ok:          #788c5d;
  --u-warn:        #ba7517;
  --u-err:         #b53333;

  /* —— 五行语义色（暖调区分，兼顾可读）—— */
  --u-wood:        #5d7a3a;
  --u-fire:        #b5442f;
  --u-earth:       #8a6a2f;
  --u-metal:       #6f6e68;
  --u-water:       #3f6f96;

  /* —— 圆角 —— */
  --u-r-xs: 6px; --u-r-sm: 9px; --u-r-md: 12px; --u-r-lg: 16px;
  --u-r-xl: 22px; --u-r-2xl: 28px; --u-r-pill: 999px;

  /* —— 深度（轻投影 + 描边环）—— */
  --u-shadow-1: 0 1px 2px rgba(20,20,19,.04), 0 4px 12px rgba(20,20,19,.045);
  --u-shadow-2: 0 4px 12px rgba(20,20,19,.06), 0 16px 40px rgba(20,20,19,.07);
  --u-shadow-3: 0 12px 32px rgba(20,20,19,.10), 0 40px 80px rgba(20,20,19,.11);
  --u-ring: 0 0 0 1px var(--u-line-2);

  /* —— 字体 —— */
  --u-font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Helvetica Neue", "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --u-font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Songti SC",
                    "STSong", "Noto Serif SC", Georgia, serif;
  --u-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* —— 字号（Apple HIG 层级 + 流体缩放）—— */
  --u-f-display: clamp(38px, 6.4vw, 68px);
  --u-f-h1:      clamp(30px, 4.4vw, 44px);
  --u-f-h2:      clamp(23px, 3vw, 32px);
  --u-f-h3:      20px;
  --u-f-head:    17px;
  --u-f-body:    17px;
  --u-f-callout: 16px;
  --u-f-sub:     15px;
  --u-f-foot:    13px;
  --u-f-cap:     12px;

  /* —— 间距（4pt 网格）—— */
  --u-s1: 4px;  --u-s2: 8px;  --u-s3: 12px; --u-s4: 16px; --u-s5: 20px;
  --u-s6: 24px; --u-s7: 32px; --u-s8: 44px; --u-s9: 64px; --u-s10: 88px;

  /* —— 动效 —— */
  --u-ease: cubic-bezier(.32,.72,0,1);
  --u-ease-out: cubic-bezier(.25,.46,.45,.94);
  --u-dur-1: .18s;
  --u-dur-2: .32s;

  --u-wrap: 1120px;
  --u-nav-h: 52px;
}

/* ============================================================
   深色模式（跟随系统）—— Claude 深色版暖炭阶
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --u-bg:        #1f1e1d;
    --u-surface:   #2a2a28;
    --u-surface-2: #30302e;
    --u-surface-3: #3a3a37;
    --u-surface-4: #45443f;
    --u-fill:      rgba(250, 249, 245, .08);
    --u-fill-2:    rgba(250, 249, 245, .06);
    --u-fill-3:    rgba(250, 249, 245, .04);

    --u-ink:       #f5f4ee;
    --u-ink-2:     #b8b4aa;
    --u-ink-3:     #918d84;
    --u-ink-4:     #6d6a63;
    --u-ink-inv:   #1f1e1d;

    --u-line:      #3a3a37;
    --u-line-2:    #4d4c47;

    --u-accent:    #e08568;
    --u-accent-press: #ec9a80;
    --u-accent-soft: rgba(224, 133, 104, .16);
    --u-accent-soft-2: rgba(224, 133, 104, .26);
    --u-on-accent: #241612;

    --u-blue:      #7fa8d4;
    --u-green:     #9aab7c;
    --u-ok:        #9aab7c;
    --u-warn:      #d9a04a;
    --u-err:       #e08585;

    --u-wood:      #8fae64;
    --u-fire:      #d97a63;
    --u-earth:     #c4a45e;
    --u-metal:     #a3a199;
    --u-water:     #6f9fc4;

    --u-shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.28);
    --u-shadow-2: 0 4px 12px rgba(0,0,0,.34), 0 16px 40px rgba(0,0,0,.32);
    --u-shadow-3: 0 12px 32px rgba(0,0,0,.42), 0 40px 80px rgba(0,0,0,.44);
  }
}

/* ============================================================
   基础重置
   ⚠ 限定 body.u-root（新页面）。旧页自带 style.css 的基础样式，
   若在此重置 button/ul 等会造成布局回归，旧页只取令牌。
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--u-nav-h) + var(--u-s6));
}

body.u-root {
  margin: 0;
  background: var(--u-bg);
  color: var(--u-ink);
  font-family: var(--u-font-ui);
  font-size: var(--u-f-body);
  line-height: 1.47;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

body.u-root h1, body.u-root h2, body.u-root h3, body.u-root h4 {
  margin: 0; font-weight: 600; letter-spacing: -.012em; text-wrap: balance;
  font-family: var(--u-font-display);
}
body.u-root h1 { font-size: var(--u-f-h1); line-height: 1.15; }
body.u-root h2 { font-size: var(--u-f-h2); line-height: 1.2; }
body.u-root h3 { font-size: var(--u-f-h3); line-height: 1.3; letter-spacing: -.01em; }
body.u-root p  { margin: 0; text-wrap: pretty; }
body.u-root a  { color: inherit; text-decoration: none; }
body.u-root img, body.u-root svg { max-width: 100%; height: auto; }
body.u-root button, body.u-root input, body.u-root select, body.u-root textarea { font: inherit; color: inherit; }
body.u-root button { cursor: pointer; background: none; border: 0; padding: 0; }
body.u-root ul, body.u-root ol { margin: 0; padding: 0; list-style: none; }
body.u-root hr { border: 0; border-top: 1px solid var(--u-line); margin: var(--u-s6) 0; }

::selection { background: var(--u-accent-soft-2); }

:focus-visible {
  outline: 2px solid var(--u-accent);
  outline-offset: 2px;
  border-radius: var(--u-r-xs);
}

/* ============================================================
   布局
   ============================================================ */
.u-wrap {
  width: 100%; max-width: var(--u-wrap); margin-inline: auto;
  padding-inline: var(--u-s6);
}
@media (max-width: 640px) { .u-wrap { padding-inline: var(--u-s5); } }

.u-sec { padding-block: clamp(var(--u-s8), 7vw, var(--u-s10)); }
.u-sec-tight { padding-block: clamp(var(--u-s7), 5vw, var(--u-s8)); }

.u-cols { display: grid; gap: var(--u-s5); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.u-cols-2 { display: grid; gap: var(--u-s5); grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.u-cols-3 { display: grid; gap: var(--u-s5); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }

/* ============================================================
   排版
   ============================================================ */
.u-display {
  font-family: var(--u-font-display);
  font-size: var(--u-f-display); line-height: 1.12; letter-spacing: -.01em; font-weight: 600;
}
.u-h2 { font-family: var(--u-font-display); font-size: var(--u-f-h2); }
.u-h3 { font-family: var(--u-font-display); font-size: var(--u-f-h3); font-weight: 600; }
.u-lead {
  font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5;
  letter-spacing: -.008em; color: var(--u-ink-2);
}
.u-sub { font-size: var(--u-f-sub); color: var(--u-ink-2); line-height: 1.5; }
.u-note { font-size: var(--u-f-foot); color: var(--u-ink-2); line-height: 1.45; }
.u-cap { font-size: var(--u-f-cap); color: var(--u-ink-3); letter-spacing: .01em; }
.u-eyebrow {
  font-size: var(--u-f-cap); font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--u-accent);
}
.u-muted { color: var(--u-ink-2); }
.u-strong { font-weight: 600; color: var(--u-ink); }
.u-center { text-align: center; }
.u-measure { max-width: 62ch; }
.u-measure-narrow { max-width: 48ch; }

/* ============================================================
   导航（毛玻璃）
   ============================================================ */
.u-nav {
  position: sticky; top: 0; z-index: 100;
  height: calc(var(--u-nav-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--u-bg) 78%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--u-line);
}
.u-nav-in { height: var(--u-nav-h); display: flex; align-items: center; gap: var(--u-s5); }
.u-brand {
  display: inline-flex; align-items: center; gap: var(--u-s2);
  font-weight: 600; font-size: var(--u-f-callout); letter-spacing: -.018em;
  flex: 0 0 auto;
}
.u-brand .u-mark {
  width: 22px; height: 22px; border-radius: 7px; flex: 0 0 auto;
  background: linear-gradient(155deg, #d97757 0%, #c4633f 55%, #a85234 100%);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.3);
}
.u-nav-links {
  display: flex; align-items: center; gap: var(--u-s5);
  margin-inline-start: var(--u-s3); flex: 1 1 auto; min-width: 0; overflow: hidden;
}
.u-nav-links a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--u-f-sub); color: var(--u-ink-2); white-space: nowrap;
  transition: color var(--u-dur-1) var(--u-ease);
}
.u-nav-links a:hover { color: var(--u-ink); }
.u-nav-links a.on { color: var(--u-ink); font-weight: 590; }
.u-nav-links .ic { font-size: .95em; color: var(--u-ink-3); }
.u-nav-links a.on .ic, .u-nav-links a:hover .ic { color: var(--u-accent); }
.u-nav-right { display: flex; align-items: center; gap: var(--u-s3); flex: 0 0 auto; margin-inline-start: auto; }
/* 移动端：保留导航可达性（横向滑动），避免链接被隐藏导致无法跳转 */
@media (max-width: 900px) {
  .u-nav-links { display: flex; overflow-x: auto; gap: 4px; margin-inline-start: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .u-nav-links::-webkit-scrollbar { display: none; }
  .u-nav-links a { font-size: 13px; padding: 6px 8px; white-space: nowrap; }
  .u-nav-in { gap: var(--u-s3); }
}

/* 语言分段控件 */
.u-lang {
  display: inline-flex; background: var(--u-fill-3); border-radius: var(--u-r-sm);
  padding: 2px; gap: 2px;
}
.u-lang button {
  min-height: 28px; padding: 0 10px; border-radius: 7px;
  font-size: var(--u-f-cap); font-weight: 590; color: var(--u-ink-2);
  transition: background var(--u-dur-1) var(--u-ease), color var(--u-dur-1) var(--u-ease);
}
.u-lang button.on { background: var(--u-surface); color: var(--u-ink); box-shadow: 0 1px 3px rgba(20,20,19,.12); }
@media (prefers-color-scheme: dark) { .u-lang button.on { box-shadow: 0 1px 3px rgba(0,0,0,.5); } }

/* ============================================================
   按钮
   ============================================================ */
.u-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--u-s2);
  min-height: 44px; padding: 0 var(--u-s6);
  border-radius: var(--u-r-md);
  font-size: var(--u-f-callout); font-weight: 590; letter-spacing: -.012em;
  white-space: nowrap;
  transition: background var(--u-dur-1) var(--u-ease), transform var(--u-dur-1) var(--u-ease),
              opacity var(--u-dur-1) var(--u-ease), box-shadow var(--u-dur-1) var(--u-ease);
  -webkit-user-select: none; user-select: none;
}
.u-btn:active { transform: scale(.97); }
.u-btn[disabled] { opacity: .42; pointer-events: none; }

.u-btn-primary { background: var(--u-accent); color: var(--u-on-accent); }
.u-btn-primary:hover { background: var(--u-accent-press); }

.u-btn-tint { background: var(--u-accent-soft); color: var(--u-accent); }
.u-btn-tint:hover { background: var(--u-accent-soft-2); }

.u-btn-quiet { background: var(--u-fill-3); color: var(--u-ink); }
.u-btn-quiet:hover { background: var(--u-fill-2); }

.u-btn-plain { background: transparent; color: var(--u-accent); padding-inline: var(--u-s3); }
.u-btn-plain:hover { background: var(--u-accent-soft); }

.u-btn-outline { background: var(--u-surface); color: var(--u-ink); box-shadow: inset 0 0 0 1px var(--u-line-2); }
.u-btn-outline:hover { background: var(--u-surface-2); }

.u-btn-sm { min-height: 34px; padding: 0 var(--u-s4); font-size: var(--u-f-sub); border-radius: var(--u-r-sm); }
.u-btn-lg { min-height: 52px; padding: 0 var(--u-s7); font-size: 18px; border-radius: var(--u-r-lg); }
.u-btn-pill { border-radius: var(--u-r-pill); }
.u-btn-block { display: flex; width: 100%; }
.u-btn .ic { font-size: .95em; }

/* 营销型大 CTA */
.u-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--u-s2);
  min-height: 50px; padding: 0 var(--u-s7);
  border-radius: var(--u-r-pill);
  font-size: 17px; font-weight: 590; letter-spacing: -.014em;
  background: var(--u-accent); color: var(--u-on-accent);
  transition: transform var(--u-dur-1) var(--u-ease), background var(--u-dur-1) var(--u-ease);
}
.u-cta:hover { background: var(--u-accent-press); }
.u-cta:active { transform: scale(.97); }
.u-cta-quiet { background: var(--u-fill-3); color: var(--u-ink); }
.u-cta-quiet:hover { background: var(--u-fill-2); }

/* ============================================================
   卡片 / 面板
   ============================================================ */
.u-card {
  background: var(--u-surface);
  border-radius: var(--u-r-lg);
  box-shadow: var(--u-shadow-1);
  padding: var(--u-s6);
}
@media (prefers-color-scheme: dark) { .u-card { box-shadow: none; box-shadow: inset 0 0 0 1px var(--u-line); } }
.u-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--u-s4); margin-bottom: var(--u-s3); }
.u-card h3 { font-size: var(--u-f-head); font-weight: 600; letter-spacing: -.014em; }

.u-panel { background: var(--u-surface-2); border-radius: var(--u-r-lg); padding: var(--u-s7); }
@media (max-width: 640px) { .u-panel { padding: var(--u-s5); } }

.u-list { background: var(--u-surface); border-radius: var(--u-r-lg); overflow: hidden; }
@media (prefers-color-scheme: dark) { .u-list { box-shadow: inset 0 0 0 1px var(--u-line); } }
.u-row {
  display: flex; align-items: center; gap: var(--u-s4);
  min-height: 52px; padding: var(--u-s3) var(--u-s5);
  border-bottom: 1px solid var(--u-line);
  width: 100%; text-align: start;
  transition: background var(--u-dur-1) var(--u-ease);
}
.u-row:last-child { border-bottom: 0; }
a.u-row:hover, button.u-row:hover { background: var(--u-fill-3); }
.u-row .u-row-main { flex: 1 1 auto; min-width: 0; }
.u-row .u-row-t { font-size: var(--u-f-callout); font-weight: 500; }
.u-row .u-row-s { font-size: var(--u-f-foot); color: var(--u-ink-2); margin-top: 1px; }
.u-row .u-chev { color: var(--u-ink-4); flex: 0 0 auto; font-size: 13px; }

/* ============================================================
   分段控件
   ============================================================ */
.u-seg {
  display: inline-flex; background: var(--u-fill-3);
  border-radius: var(--u-r-sm); padding: 2px; gap: 2px; max-width: 100%;
}
.u-seg button {
  flex: 1 1 auto; min-height: 32px; padding: 0 var(--u-s4);
  border-radius: 7px; font-size: var(--u-f-sub); font-weight: 500;
  color: var(--u-ink); white-space: nowrap;
  transition: background var(--u-dur-1) var(--u-ease), box-shadow var(--u-dur-1) var(--u-ease);
}
.u-seg button.on { background: var(--u-surface); font-weight: 590; box-shadow: 0 1px 3px rgba(20,20,19,.13); }
@media (prefers-color-scheme: dark) { .u-seg button.on { box-shadow: 0 1px 3px rgba(0,0,0,.55); } }

/* ============================================================
   表单
   ============================================================ */
.u-field { display: block; }
.u-field > label, .u-label {
  display: block; font-size: var(--u-f-foot); font-weight: 590;
  letter-spacing: -.004em; color: var(--u-ink-2); margin-bottom: var(--u-s2);
}
.u-input, .u-select, .u-textarea {
  display: block; width: 100%; min-height: 44px;
  padding: 10px var(--u-s4);
  background: var(--u-surface);
  border: 1px solid var(--u-line-2);
  border-radius: var(--u-r-md);
  font-size: var(--u-f-callout); letter-spacing: -.01em; color: var(--u-ink);
  transition: border-color var(--u-dur-1) var(--u-ease), box-shadow var(--u-dur-1) var(--u-ease);
  -webkit-appearance: none; appearance: none;
}
.u-textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
.u-input::placeholder, .u-textarea::placeholder { color: var(--u-ink-4); }
.u-input:focus, .u-select:focus, .u-textarea:focus {
  outline: none; border-color: var(--u-accent);
  box-shadow: 0 0 0 3.5px var(--u-accent-soft);
}
.u-select {
  background-image: linear-gradient(45deg, transparent 50%, var(--u-ink-3) 50%),
                    linear-gradient(135deg, var(--u-ink-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-inline-end: var(--u-s8);
}
.u-hint { font-size: var(--u-f-foot); color: var(--u-ink-2); margin-top: var(--u-s2); line-height: 1.4; }
.u-error { font-size: var(--u-f-foot); color: var(--u-err); margin-top: var(--u-s2); }
.u-field.invalid .u-input, .u-field.invalid .u-select { border-color: var(--u-err); }

/* iOS 开关 */
.u-switch { display: flex; align-items: flex-start; gap: var(--u-s3); cursor: pointer; }
.u-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.u-switch .u-track {
  flex: 0 0 auto; width: 51px; height: 31px; border-radius: var(--u-r-pill);
  background: var(--u-surface-3); position: relative;
  transition: background var(--u-dur-2) var(--u-ease); margin-top: 1px;
}
.u-switch .u-track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(20,20,19,.24);
  transition: transform var(--u-dur-2) var(--u-ease);
}
.u-switch input:checked + .u-track { background: var(--u-ok); }
.u-switch input:checked + .u-track::after { transform: translateX(20px); }
.u-switch input:focus-visible + .u-track { outline: 2px solid var(--u-accent); outline-offset: 2px; }
.u-switch .u-sw-txt { font-size: var(--u-f-callout); }
.u-switch .u-sw-txt small { display: block; font-size: var(--u-f-foot); color: var(--u-ink-2); margin-top: 2px; line-height: 1.4; }

/* ============================================================
   建议下拉
   ============================================================ */
.u-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  z-index: 60; max-height: 264px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--u-surface); border: 1px solid var(--u-line);
  border-radius: var(--u-r-md); box-shadow: var(--u-shadow-2);
  display: none;
}
.u-suggest.show { display: block; }
.u-suggest .it {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--u-s4); padding: 10px var(--u-s4); cursor: pointer;
  border-bottom: 1px solid var(--u-line);
}
.u-suggest .it:last-child { border-bottom: 0; }
.u-suggest .it:hover, .u-suggest .it.active { background: var(--u-fill-3); }
.u-suggest .nm { font-size: var(--u-f-callout); }
.u-suggest .cc { font-size: var(--u-f-cap); color: var(--u-ink-2); white-space: nowrap; }
.u-rel { position: relative; }

/* ============================================================
   弹层 / 底部 sheet
   ============================================================ */
.u-scrim {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20,20,19,.42);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: none; align-items: flex-end; justify-content: center;
}
.u-scrim.open { display: flex; }
.u-sheet {
  width: 100%; max-width: 560px; max-height: 92vh;
  display: flex; flex-direction: column;
  background: var(--u-surface);
  border-radius: var(--u-r-2xl) var(--u-r-2xl) 0 0;
  box-shadow: var(--u-shadow-3);
  padding-bottom: env(safe-area-inset-bottom);
  animation: u-sheet-in .34s var(--u-ease);
}
@media (min-width: 700px) {
  .u-scrim { align-items: center; }
  .u-sheet { border-radius: var(--u-r-xl); max-height: 86vh; animation: u-pop-in .28s var(--u-ease); }
}
@keyframes u-sheet-in { from { transform: translateY(14%); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes u-pop-in { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }

.u-sheet-head { display: flex; align-items: flex-start; gap: var(--u-s4); padding: var(--u-s5) var(--u-s5) var(--u-s4); }
.u-sheet-head .t { font-size: var(--u-f-head); font-weight: 600; letter-spacing: -.016em; }
.u-sheet-head .s { font-size: var(--u-f-foot); color: var(--u-ink-2); margin-top: 3px; line-height: 1.42; }
.u-sheet-body { flex: 1 1 auto; overflow-y: auto; padding: 0 var(--u-s5) var(--u-s4); }
.u-sheet-foot { display: flex; gap: var(--u-s3); padding: var(--u-s4) var(--u-s5) var(--u-s5); border-top: 1px solid var(--u-line); }
.u-sheet-foot .u-btn { flex: 1 1 0; }
.u-sheet-close {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: var(--u-fill-2); color: var(--u-ink-2); font-size: 16px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}

/* 进度条 / 步骤点 */
.u-progress { height: 4px; background: var(--u-fill-3); border-radius: 2px; overflow: hidden; margin: 0 var(--u-s5); }
.u-progress i { display: block; height: 100%; background: var(--u-accent); border-radius: 2px; transition: width var(--u-dur-2) var(--u-ease); }
.u-steps { display: flex; gap: 6px; justify-content: center; padding: var(--u-s4) 0 0; }
.u-steps i { width: 6px; height: 6px; border-radius: 50%; background: var(--u-fill); transition: background var(--u-dur-1) var(--u-ease), width var(--u-dur-1) var(--u-ease); }
.u-steps i.on { background: var(--u-accent); width: 18px; border-radius: 3px; }

/* 复核摘要 */
.u-review { background: var(--u-surface); border-radius: var(--u-r-md); overflow: hidden; }
.u-review .li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--u-s4); padding: 11px var(--u-s4); border-bottom: 1px solid var(--u-line); }
.u-review .li:last-child { border-bottom: 0; }
.u-review .k { font-size: var(--u-f-foot); color: var(--u-ink-2); flex: 0 0 auto; }
.u-review .v { font-size: var(--u-f-callout); font-weight: 500; text-align: end; }

/* ============================================================
   Toast
   ============================================================ */
.u-toast {
  position: fixed; left: 50%; bottom: calc(var(--u-s8) + env(safe-area-inset-bottom));
  transform: translate(-50%, 12px); z-index: 300;
  max-width: min(440px, calc(100vw - 32px));
  padding: 11px var(--u-s5);
  background: var(--u-ink); color: var(--u-ink-inv);
  border-radius: var(--u-r-pill);
  font-size: var(--u-f-sub); font-weight: 500;
  box-shadow: var(--u-shadow-2);
  opacity: 0; pointer-events: none;
  transition: opacity var(--u-dur-2) var(--u-ease), transform var(--u-dur-2) var(--u-ease);
  display: flex; align-items: center; gap: var(--u-s2);
}
.u-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   徽章
   ============================================================ */
.u-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--u-r-pill);
  background: var(--u-fill-3); color: var(--u-ink-2);
  font-size: var(--u-f-cap); font-weight: 590;
}
.u-badge-accent { background: var(--u-accent-soft); color: var(--u-accent); }
.u-badge-sand { background: var(--u-surface-4); color: var(--u-ink-2); }
.u-badge .ic { font-size: .92em; }

/* 五行色点 */
.u-el { display: inline-flex; align-items: center; gap: 5px; font-size: var(--u-f-cap); color: var(--u-ink-2); }
.u-el i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.u-el-wood i { background: var(--u-wood); }
.u-el-fire i { background: var(--u-fire); }
.u-el-earth i { background: var(--u-earth); }
.u-el-metal i { background: var(--u-metal); }
.u-el-water i { background: var(--u-water); }

/* ============================================================
   空状态
   ============================================================ */
.u-empty { text-align: center; padding: var(--u-s9) var(--u-s5); color: var(--u-ink-2); }
.u-empty .u-empty-ic {
  width: 44px; height: 44px; border-radius: var(--u-r-md);
  background: var(--u-surface-2); color: var(--u-ink-3);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 19px; margin-bottom: var(--u-s4);
}
.u-empty .u-empty-t { font-family: var(--u-font-display); font-size: var(--u-f-head); font-weight: 600; color: var(--u-ink); margin-bottom: var(--u-s2); }
.u-empty .u-empty-s { font-size: var(--u-f-sub); max-width: 42ch; margin: 0 auto var(--u-s5); }

/* ============================================================
   页脚
   ============================================================ */
.u-foot { border-top: 1px solid var(--u-line); padding-block: var(--u-s8) var(--u-s6); color: var(--u-ink-2); font-size: var(--u-f-foot); }
.u-foot-grid { display: grid; gap: var(--u-s6); grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.u-foot h4 { font-family: var(--u-font-ui); font-size: var(--u-f-foot); font-weight: 590; color: var(--u-ink); margin-bottom: var(--u-s3); }
.u-foot a { display: block; padding: 3px 0; color: var(--u-ink-2); }
.u-foot a:hover { color: var(--u-ink); }
.u-foot-bottom {
  display: flex; flex-wrap: wrap; gap: var(--u-s3); justify-content: space-between;
  margin-top: var(--u-s7); padding-top: var(--u-s5);
  border-top: 1px solid var(--u-line); color: var(--u-ink-3);
}
.u-foot-disclaimer {
  margin-top: var(--u-s5); padding-top: var(--u-s4);
  border-top: 1px solid var(--u-line);
  font-size: var(--u-f-foot); color: var(--u-ink-3); line-height: 1.6;
}

/* ============================================================
   移动端底部标签栏
   ============================================================ */
.u-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  display: none;
  background: color-mix(in srgb, var(--u-bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--u-line);
  padding-bottom: env(safe-area-inset-bottom);
}
.u-tabbar button {
  flex: 1 1 0; min-height: 50px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 10px; font-weight: 500; color: var(--u-ink-3);
}
.u-tabbar button.on { color: var(--u-accent); }
.u-tabbar .ic { font-size: 18px; }
@media (max-width: 760px) { .u-tabbar { display: flex; } }
@media (max-width: 760px) { .u-has-tabbar { padding-bottom: calc(58px + env(safe-area-inset-bottom)); } }

/* ============================================================
   Hero
   ============================================================ */
.u-hero { padding-block: clamp(var(--u-s8), 8vw, var(--u-s10)) clamp(var(--u-s7), 6vw, var(--u-s9)); }
.u-hero-grid {
  display: grid; gap: clamp(var(--u-s7), 5vw, var(--u-s9));
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
}
@media (max-width: 940px) { .u-hero-grid { grid-template-columns: 1fr; gap: var(--u-s7); } }
.u-hero h1 { margin-bottom: var(--u-s4); }
.u-hero h1 em { font-style: normal; color: var(--u-accent); }
.u-hero .u-lead { max-width: 54ch; }
.u-hero-cta { display: flex; flex-wrap: wrap; gap: var(--u-s3); margin-top: var(--u-s6); }
.u-hero-meta { display: flex; flex-wrap: wrap; gap: var(--u-s5); margin-top: var(--u-s7); font-size: var(--u-f-foot); color: var(--u-ink-2); }
.u-hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.u-hero-meta .ic { color: var(--u-ok); font-size: .95em; }

/* ============================================================
   工具卡
   ============================================================ */
.u-tool {
  display: flex; flex-direction: column; gap: var(--u-s3);
  background: var(--u-surface); border-radius: var(--u-r-lg);
  padding: var(--u-s6); box-shadow: var(--u-shadow-1);
  transition: transform var(--u-dur-2) var(--u-ease), box-shadow var(--u-dur-2) var(--u-ease);
}
@media (prefers-color-scheme: dark) { .u-tool { box-shadow: inset 0 0 0 1px var(--u-line); } }
.u-tool:hover { transform: translateY(-2px); box-shadow: var(--u-shadow-2); }
.u-tool .u-tool-ic {
  width: 40px; height: 40px; border-radius: var(--u-r-md);
  background: var(--u-accent-soft); color: var(--u-accent);
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
}
.u-tool h3 { font-size: var(--u-f-head); font-weight: 600; letter-spacing: -.014em; }
.u-tool .u-tool-sub { font-size: var(--u-f-foot); color: var(--u-ink-3); margin-top: -4px; }
.u-tool p { font-size: var(--u-f-sub); color: var(--u-ink-2); line-height: 1.5; }
.u-tool .u-go {
  margin-top: auto; padding-top: var(--u-s3);
  font-size: var(--u-f-sub); font-weight: 590; color: var(--u-accent);
  display: inline-flex; align-items: center; gap: 6px;
}
.u-tool .u-go .ic { transition: transform var(--u-dur-1) var(--u-ease); }
.u-tool:hover .u-go .ic { transform: translateX(3px); }

/* ============================================================
   步骤
   ============================================================ */
.u-step { display: flex; gap: var(--u-s4); align-items: flex-start; }
.u-step .n {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--u-accent-soft); color: var(--u-accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--u-f-cap); font-weight: 700;
}
.u-step h3 { font-family: var(--u-font-ui); font-size: var(--u-f-callout); font-weight: 600; margin-bottom: 3px; }
.u-step p { font-size: var(--u-f-sub); color: var(--u-ink-2); line-height: 1.5; }

/* ============================================================
   提示条
   ============================================================ */
.u-note-bar {
  display: flex; gap: var(--u-s4); align-items: flex-start;
  background: var(--u-surface-2); border-radius: var(--u-r-lg); padding: var(--u-s5);
}
.u-note-bar .ic { font-size: 17px; flex: 0 0 auto; color: var(--u-ink-3); margin-top: 1px; }
.u-note-bar h3 { font-family: var(--u-font-ui); font-size: var(--u-f-callout); font-weight: 600; margin-bottom: 4px; }
.u-note-bar p { font-size: var(--u-f-sub); color: var(--u-ink-2); line-height: 1.5; }

/* ============================================================
   四柱（命盘）展示
   ============================================================ */
.u-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--u-s3); }
@media (max-width: 520px) { .u-pillars { gap: var(--u-s2); } }
.u-pillar { text-align: center; padding: var(--u-s4) var(--u-s2); border-radius: var(--u-r-md); background: var(--u-surface-2); }
.u-pillar .pl { font-size: var(--u-f-cap); color: var(--u-ink-2); margin-bottom: var(--u-s2); }
.u-pillar .chars { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.u-pillar .ch {
  width: 100%; height: 42px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--u-r-sm); font-size: 21px; font-weight: 500;
  color: #fff; font-family: var(--u-font-display);
}
@media (max-width: 520px) { .u-pillar .ch { height: 36px; font-size: 18px; } }
.u-pillar .py { font-size: var(--u-f-cap); color: var(--u-ink-2); margin-top: 7px; }
.u-ch-wood  { background: var(--u-wood); }
.u-ch-fire  { background: var(--u-fire); }
.u-ch-earth { background: var(--u-earth); }
.u-ch-metal { background: var(--u-metal); }
.u-ch-water { background: var(--u-water); }

/* 五行分布 */
.u-elems { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--u-s2); }
.u-elems .e { text-align: center; padding: var(--u-s3) var(--u-s1); border-radius: var(--u-r-sm); background: var(--u-surface-2); }
.u-elems .e .ch { font-size: 18px; font-weight: 500; font-family: var(--u-font-display); }
.u-elems .e .nm { font-size: 10px; color: var(--u-ink-2); margin-top: 2px; }
.u-elems .e .ct { font-size: var(--u-f-foot); font-weight: 600; margin-top: 2px; }
.u-elems .e.wood .ch { color: var(--u-wood); }
.u-elems .e.fire .ch { color: var(--u-fire); }
.u-elems .e.earth .ch { color: var(--u-earth); }
.u-elems .e.metal .ch { color: var(--u-metal); }
.u-elems .e.water .ch { color: var(--u-water); }

/* ============================================================
   档案卡
   ============================================================ */
.u-pcards { display: grid; gap: var(--u-s3); grid-template-columns: repeat(auto-fill, minmax(min(260px,100%),1fr)); }
.u-pcard {
  display: flex; align-items: center; gap: var(--u-s3);
  background: var(--u-surface); border-radius: var(--u-r-md);
  padding: var(--u-s3) var(--u-s4); min-height: 62px;
  border: 1px solid var(--u-line); text-align: start; width: 100%;
  transition: background var(--u-dur-1) var(--u-ease), border-color var(--u-dur-1) var(--u-ease);
}
.u-pcard:hover { background: var(--u-surface-2); border-color: var(--u-accent); }
.u-pcard .ava {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  background: var(--u-accent-soft); color: var(--u-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--u-f-sub); font-weight: 600;
}
.u-pcard .info { flex: 1 1 auto; min-width: 0; }
.u-pcard .info b { display: block; font-size: var(--u-f-callout); font-weight: 590; letter-spacing: -.012em; }
.u-pcard .info span { display: block; font-size: var(--u-f-cap); color: var(--u-ink-2); margin-top: 2px; }

/* ============================================================
   工具类
   ============================================================ */
.u-rowflex { display: flex; align-items: center; gap: var(--u-s3); flex-wrap: wrap; }
.u-stack > * + * { margin-top: var(--u-s5); }
.u-stack-sm > * + * { margin-top: var(--u-s3); }
.u-hr { height: 1px; background: var(--u-line); border: 0; margin: var(--u-s6) 0; }
.u-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 状态提示 */
#status, .status-line { font-size: 13px; text-align: center; min-height: 18px; }
#status.err, .status-line.err { color: var(--u-err); }
#status.ok, .status-line.ok { color: var(--u-ok); }
.status { margin-top: 12px; font-size: 13px; min-height: 18px; line-height: 1.5; color: var(--u-ink-2); }
.status.ok { color: var(--u-ok); }
.status.err { color: var(--u-err); }
.status.info { color: var(--u-ink-2); }

/* ============================================================
   无障碍 / 偏好
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
@media print {
  .u-nav, .u-tabbar, .u-toast, .u-sheet, .u-scrim { display: none !important; }
  body { background: #fff; color: #000; }
}
@media (prefers-contrast: more) {
  :root { --u-line: var(--u-line-2); --u-ink-2: var(--u-ink); }
}

/* ============================================================
   天机阁 · 今日（首页仪表盘）
   作用域限定 #dash，避免与其它页面的 .card / .hint 等通用类冲突
   ============================================================ */
#dash .dash-core, #dash .dash-mid, #dash .dash-row3, #dash .dash-foot { display: grid; gap: var(--u-s5); }
#dash .dash-core { grid-template-columns: 1fr 1fr; }
#dash .dash-mid  { grid-template-columns: 1.25fr .75fr; }
#dash .dash-row3 { grid-template-columns: 1fr 1fr; }
#dash .dash-foot { grid-template-columns: 1fr 1fr; }
@media (max-width: 880px) { #dash .dash-core, #dash .dash-mid, #dash .dash-row3, #dash .dash-foot { grid-template-columns: 1fr; } }

#dash .card { background: var(--u-surface); border-radius: var(--u-r-lg); padding: var(--u-s6); box-shadow: var(--u-shadow-1); color: var(--u-ink); }
@media (prefers-color-scheme: dark) { #dash .card { box-shadow: inset 0 0 0 1px var(--u-line); } }
#dash .card h3 { display: flex; align-items: center; gap: 10px; font-size: var(--u-f-head); font-weight: 600; letter-spacing: -.014em; margin: 0 0 var(--u-s4); color: var(--u-ink); }
#dash .card h3 .ic { font-size: 15px; color: var(--u-accent); }
#dash .hint { color: var(--u-ink-2); font-size: var(--u-f-foot); }
#dash .loading { color: var(--u-ink-2); padding: 14px 0; font-size: var(--u-f-sub); }
#dash .fadeup { animation: u-fadeup .5s var(--u-ease-out) both; }
@keyframes u-fadeup { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

#dash .fortune-card, #dash .pft-card, #dash .advice-card, #dash .wx-card,
#dash .cal-card, #dash .hours-card, #dash .omen-card, #dash .cta-card,
#dash .recent-card { display: flex; flex-direction: column; }

#dash .fortune-big { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; margin-bottom: var(--u-s4); }
#dash .fortune-big .gz { font-family: var(--u-font-display); font-size: 36px; font-weight: 600; color: var(--u-ink); }
#dash .fortune-big .el { font-size: 18px; color: var(--u-ink-2); }
#dash .fortune-head { font-family: var(--u-font-display); font-size: var(--u-f-head); font-weight: 600; margin: 10px 0; }

#dash .pft-top { display: flex; gap: 16px; align-items: center; margin-bottom: var(--u-s4); }
#dash .pft-score { display: flex; flex-direction: column; align-items: center; background: var(--u-accent-soft); border-radius: var(--u-r-md); padding: 10px 16px; }
#dash .pft-num { font-family: var(--u-font-display); font-size: 36px; font-weight: 600; color: var(--u-accent); line-height: 1; }
#dash .pft-tier { font-size: 12px; color: var(--u-ink-2); margin-top: 3px; }
#dash .pft-meta { flex: 1; min-width: 0; }
#dash .rel-tag { display: inline-block; background: var(--u-surface-2); border-radius: var(--u-r-pill); padding: 4px 12px; font-size: 13px; color: var(--u-ink-2); }
#dash .pft-sub { font-size: 13px; color: var(--u-ink-3); margin-top: 6px; }
#dash .pft-dims { display: grid; gap: 12px; }
#dash .pft-dim { display: block; }
#dash .pft-dim-head { display: grid; grid-template-columns: 120px 1fr 36px; align-items: center; gap: 10px; }
#dash .pft-dlab { font-size: 14px; color: var(--u-ink-2); font-weight: 590; }
#dash .pft-bar { height: 8px; background: var(--u-fill-3); border-radius: var(--u-r-pill); overflow: hidden; }
#dash .pft-bar i { display: block; height: 100%; background: var(--u-accent); border-radius: var(--u-r-pill); }
#dash .pft-dnum { font-size: 13px; color: var(--u-ink-2); text-align: right; }
#dash .pft-dtext { font-size: 13.5px; color: var(--u-ink-2); margin: 6px 0 0; }
#dash .pft-tips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: var(--u-s4); }
@media (max-width: 560px) { #dash .pft-tips { grid-template-columns: 1fr; } }
#dash .pft-tip { display: flex; gap: 8px; font-size: 13.5px; color: var(--u-ink-2); background: var(--u-surface-2); border-radius: var(--u-r-md); padding: 10px 12px; }
#dash .pft-tip b { flex: none; }
#dash .yi-c { color: var(--u-ok); }
#dash .ji-c { color: var(--u-err); }
#dash .pft-why-btn { margin-top: 12px; background: var(--u-surface-2); border: 1px solid var(--u-line); border-radius: var(--u-r-sm); padding: 9px 14px; font-size: 13.5px; color: var(--u-ink-2); cursor: pointer; min-height: 36px; }
#dash .pft-why { margin-top: 10px; font-size: 13.5px; color: var(--u-ink-2); background: var(--u-surface-2); border-radius: var(--u-r-md); padding: 12px; }
#dash .pft-nonatal { color: var(--u-ink-3); }

#dash .yi-ji { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: var(--u-s4); }
@media (max-width: 560px) { #dash .yi-ji { grid-template-columns: 1fr; } }
#dash .yi-ji .col { background: var(--u-surface-2); border-radius: var(--u-r-md); padding: 12px; }
#dash .yi-ji .lab { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
#dash .yi-ji .lab.yi { color: var(--u-ok); }
#dash .yi-ji .lab.ji { color: var(--u-err); }
#dash .yi-ji .v { font-size: 13.5px; color: var(--u-ink-2); margin-top: 6px; }

#dash .wx-reloc { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
#dash .wx-reloc button { background: var(--u-surface-2); border: 1px solid var(--u-line); border-radius: var(--u-r-pill); padding: 6px 14px; font-size: 13px; color: var(--u-ink-2); cursor: pointer; min-height: 32px; }
#dash .wx-loc { font-size: 13px; color: var(--u-ink-3); }
#dash .wx-top { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
#dash .wx-icon { font-size: 28px; }
#dash .wx-temp { font-family: var(--u-font-display); font-size: 36px; font-weight: 600; color: var(--u-ink); }
#dash .wx-meta { font-size: 13px; color: var(--u-ink-2); }
#dash #wxChart { width: 100%; height: 140px; }

#dash .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--u-s3); }
#dash .cal-head .ml { font-family: var(--u-font-display); font-size: 18px; font-weight: 600; }
#dash .cal-head button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--u-line); background: var(--u-surface); font-size: 15px; color: var(--u-ink-2); cursor: pointer; }
#dash .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
#dash .cal-grid .wd { font-size: 11px; color: var(--u-ink-3); text-align: center; font-weight: 600; text-transform: uppercase; padding-bottom: 4px; }
#dash .cal-cell { border: 1px solid var(--u-line); border-radius: var(--u-r-sm); padding: 8px 6px; min-height: 64px; cursor: pointer; background: var(--u-surface); transition: background var(--u-dur-1) var(--u-ease), border-color var(--u-dur-1) var(--u-ease); }
#dash .cal-cell:hover { background: var(--u-surface-2); }
#dash .cal-cell.out { opacity: .4; }
#dash .cal-cell.today { border-color: var(--u-accent); box-shadow: inset 0 0 0 2px var(--u-accent-soft); }
#dash .cal-cell .d { font-size: 16px; font-weight: 600; }
#dash .cal-cell .gz { font-size: 12px; color: var(--u-accent); }
#dash .cal-cell .lu { font-size: 10.5px; color: var(--u-ink-3); }
#dash .day-detail { margin-top: 12px; font-size: 13.5px; color: var(--u-ink-2); border-top: 1px solid var(--u-line); padding-top: 12px; }

#dash .advice { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
#dash .advice li { font-size: 14px; color: var(--u-ink-2); padding-left: 18px; position: relative; }
#dash .advice li::before { content: ""; position: absolute; left: 5px; top: 9px; width: 4px; height: 4px; border-radius: 50%; background: var(--u-accent); }
#dash .advice-art { height: 120px; border-radius: var(--u-r-md); margin-top: 12px; overflow: hidden; position: relative; background: linear-gradient(150deg, #d97757 0%, #c4633f 50%, #a85234 100%); }
#dash .advice-art::after { content: ""; position: absolute; inset: 0; opacity: .5; background: radial-gradient(1.4px 1.4px at 20% 30%, #fff, transparent), radial-gradient(1.4px 1.4px at 70% 60%, #fff, transparent), radial-gradient(1px 1px at 40% 80%, #fff, transparent); }

#dash .hours-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
#dash .hour-cell { position: relative; border: 1px solid var(--u-line); border-radius: var(--u-r-sm); padding: 10px 8px; text-align: center; background: var(--u-surface); }
#dash .hour-cell.lv1 { border-color: color-mix(in srgb, var(--u-ok) 50%, var(--u-line)); }
#dash .hour-cell.lv3 { border-color: color-mix(in srgb, var(--u-err) 45%, var(--u-line)); }
#dash .hour-cell .hb { font-family: var(--u-font-display); font-size: 20px; font-weight: 600; color: var(--u-ink); }
#dash .hour-cell .hr { font-size: 11px; color: var(--u-ink-3); }
#dash .hour-cell .dot { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; }
#dash .hour-cell.lv1 .dot { background: var(--u-ok); }
#dash .hour-cell.lv2 .dot { background: var(--u-earth); }
#dash .hour-cell.lv3 .dot { background: var(--u-err); }
#dash .hour-cell .tip { font-size: 11px; color: var(--u-ink-3); margin-top: 4px; }
#dash .hour-legend { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--u-ink-3); }
#dash .hour-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 5px; vertical-align: middle; }
#dash .hour-legend i:nth-child(1) { background: var(--u-ok); }
#dash .hour-legend i:nth-child(2) { background: var(--u-earth); }
#dash .hour-legend i:nth-child(3) { background: var(--u-err); }

#dash .omen-box { font-size: 14px; color: var(--u-ink-2); }
#dash .omen-level { display: inline-block; font-family: var(--u-font-display); font-size: 16px; font-weight: 600; }
#dash .omen-level.lv1 { color: var(--u-ok); }
#dash .omen-level.lv2 { color: var(--u-earth); }
#dash .omen-level.lv3 { color: var(--u-err); }
#dash .omen-title { font-family: var(--u-font-display); font-size: 18px; font-weight: 600; margin: 6px 0; color: var(--u-ink); }
#dash .omen-poem { line-height: 1.8; color: var(--u-ink-2); font-family: var(--u-font-display); }
#dash .omen-desc { font-size: 13.5px; color: var(--u-ink-2); margin-top: 8px; }
#dash .omen-actions { margin-top: 12px; }
#dash .omen-actions button { background: var(--u-accent); color: var(--u-on-accent); border: 0; border-radius: var(--u-r-pill); padding: 10px 18px; font-size: 14px; font-weight: 590; cursor: pointer; min-height: 40px; }

#dash .cta { display: flex; flex-direction: column; gap: 10px; }
#dash .cta a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--u-accent); color: var(--u-on-accent); border-radius: var(--u-r-pill); padding: 11px 18px; font-weight: 590; font-size: 14px; transition: background var(--u-dur-1) var(--u-ease); }
#dash .cta a:hover { background: var(--u-accent-press); }
#dash .cta a:last-child { background: var(--u-fill-3); color: var(--u-ink); }
#dash .cta a:last-child:hover { background: var(--u-fill-2); }

#dash .recent { display: grid; gap: 8px; }
#dash .recent .item { border: 1px solid var(--u-line); border-radius: var(--u-r-sm); padding: 10px 12px; cursor: pointer; transition: background var(--u-dur-1) var(--u-ease), border-color var(--u-dur-1) var(--u-ease); }
#dash .recent .item:hover { border-color: var(--u-accent); background: var(--u-surface-2); }
#dash .recent .p { font-size: 15px; color: var(--u-ink); }
#dash .recent .t { font-size: 12px; color: var(--u-ink-3); margin-top: 2px; }

#dash .liuyue-card { margin-top: 16px; }
#dash .liuyue-card h3 { color: var(--u-ink); }
#dash .liuyue-card .ly-row { display: flex; align-items: center; gap: 12px; margin: 6px 0 10px; flex-wrap: wrap; }
#dash .liuyue-card .ly-verdict { display: inline-block; padding: 4px 14px; border-radius: var(--u-r-pill); font-weight: 700; font-size: 14px; }
#dash .liuyue-card .ly-verdict.v-good { background: color-mix(in srgb, var(--u-ok) 14%, transparent); color: var(--u-ok); }
#dash .liuyue-card .ly-verdict.v-mid { background: var(--u-accent-soft); color: var(--u-accent); }
#dash .liuyue-card .ly-verdict.v-warn { background: color-mix(in srgb, var(--u-err) 14%, transparent); color: var(--u-err); }
#dash .liuyue-card .ly-desc { color: var(--u-ink-2); font-size: 13px; }
#dash .liuyue-card .ly-hl { font-size: 13.5px; line-height: 1.7; color: var(--u-ink); }
#dash .liuyue-card .ly-rng { margin-top: 10px; font-size: 12px; color: var(--u-ink-3); }
#dash .liuyue-card .ly-rng a { color: var(--u-accent); font-weight: 590; }
#dash .liuyue-card .ly-dis { margin-top: 8px; font-size: 11px; color: var(--u-ok); }

/* 定价页动态渲染类 */
#renewBanner .b-title { font-size: 15px; font-weight: 600; color: var(--u-accent); margin-bottom: 4px; }
#renewBanner .b-text { font-size: 13.5px; color: var(--u-ink-2); line-height: 1.6; }
#renewBanner .b-text b { color: var(--u-accent); }
#renewBanner .b-actions { margin-top: 10px; }
#renewBanner .b-actions a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: var(--u-r-pill); background: var(--u-accent); color: var(--u-on-accent); font-size: 13.5px; font-weight: 590; }
#redeemSuccess.show { display: block; }

/* ============================================================
   图标排版适配（配合 public/icons.css 的语义图标类）
   ============================================================ */
/* 卡片标题内的图标 */
#dash .card h3 .ic { font-size: 15px; color: var(--u-accent); }
.u-card h3 .ic { color: var(--u-accent); margin-right: 2px; }
/* 工具卡图标容器 */
.u-tool .u-tool-ic .ic { font-size: 18px; }
/* 按钮内图标间距 */
.u-btn .ic, .u-cta .ic { margin-right: -1px; }
/* 空状态图标 */
.u-empty-ic .ic { font-size: 19px; color: var(--u-ink-3); }
/* 提示条图标 */
.u-note-bar .ic { font-size: 17px; color: var(--u-ink-3); }
/* 天气大图标 */
#dash .wx-icon .ic { font-size: 28px; color: var(--u-ink); }
/* 顶栏链接图标 */
.u-nav-links .ic { font-size: .92em; }
/* 徽章图标 */
.u-badge .ic { font-size: .92em; }
/* 列表行 chevron */
.u-chev .ic { font-size: 12px; }
/* 状态文本内的图标 */
.status .ic, #status .ic { margin-right: 3px; vertical-align: -1px; }

/* ============================================================
   已登录状态卡（login.js 动态渲染）
   ============================================================ */
.u-signed-in { text-align: center; padding: 8px 0 4px; }
.u-signed-in-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: var(--u-r-md);
  background: var(--u-accent-soft); color: var(--u-accent);
  font-size: 24px; margin-bottom: 14px;
}
.u-signed-in .lg-title {
  font-family: var(--u-font-display);
  font-size: 17px; font-weight: 600; letter-spacing: -.016em;
  color: var(--u-ink); margin-bottom: 4px;
}
.u-signed-in .lg-name { color: var(--u-ink-2); font-size: 13px; margin-bottom: 22px; }
.u-signed-in .lg-sw { margin-top: 10px; }

/* 登录页 · 日期行（保留旧 ID 契约） */
.sub-line { font-size: 12px; color: var(--u-ink-3); text-align: center; margin-top: 10px; }