/* ============================================================
   Chronik · 桥接层（legacy → 平台设计系统）
   ------------------------------------------------------------
   用于尚未逐页重写 DOM 的旧页面：studio / ziwei / nianli / admin / r。
   作用：把旧页自带的暗色令牌映射到新设计体系的暖调色板（ui.css），
        使其配色/字体/控件观感与新页面一致，且不改 DOM 与 JS。

   加载顺序要求：必须在该页内联 <style> 之后加载（同特异性才能覆盖）。
   ⚠ 刻意**不引入** ui.css 的通用组件类（.u-btn/.u-card…），
      避免与旧页自有同名类冲突；ui.css 的组件由新页面使用。
   ============================================================ */

/* —— 1. 令牌桥接 —— */
:root {
  --bg:        var(--u-bg);
  --bg2:       var(--u-surface-2);
  --panel:     var(--u-surface);
  --panel2:    var(--u-surface-2);

  --line:      var(--u-line);
  --line2:     var(--u-line-2);
  --gold:      var(--u-accent);
  --gold-bright: var(--u-accent);
  --gold-deep: var(--u-accent-press);
  --jade:      var(--u-ok);
  --cyan:      var(--u-blue);
  --purple:    var(--u-accent);

  --ink:       var(--u-ink);
  --ink-dim:   var(--u-ink-2);
  --red:       var(--u-err);
  --warn:      var(--u-warn);

  --shadow:    var(--u-shadow-2);
  --r:         var(--u-r-md);

  /* 平台设计语言 = 系统字体，弃用装饰衬线（中文回落 PingFang SC） */
  --font-cn:   var(--u-font-ui);
  --font-serif:var(--u-font-ui);
  --font-en:   var(--u-font-ui);
}

/* —— 2. 页面底色：去掉旧页暗色径向渐变 —— */
html, body {
  background: var(--u-bg);
  color: var(--u-ink);
  font-family: var(--u-font-ui);
  letter-spacing: -.011em;
}

/* —— 3. 排版基线 —— */
h1, h2, h3, h4 {
  font-family: var(--u-font-display);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
}
a { color: var(--u-accent); }
code { color: var(--u-accent); }
:focus-visible { outline-color: var(--u-accent); }

/* —— 4. 基础控件 —— */
button {
  font-family: var(--u-font-ui);
  border-radius: var(--u-r-md);
  border: 1px solid var(--u-line-2);
  background: var(--u-surface);
  color: var(--u-ink);
  font-size: 14px;
  letter-spacing: -.01em;
  transition: background .18s var(--u-ease), border-color .18s var(--u-ease),
              transform .18s var(--u-ease), color .18s var(--u-ease);
}
button:hover { border-color: var(--u-accent); color: var(--u-accent); }
button.primary {
  background: var(--u-accent);
  color: var(--u-on-accent);
  border: 0;
  font-weight: 590;
  min-height: 44px;
}
button.primary:hover { filter: none; background: var(--u-accent-press); color: var(--u-on-accent); }
button:active { transform: scale(.98); }
button:disabled { opacity: .42; }

input, select, textarea {
  background: var(--u-surface);
  border: 1px solid var(--u-line-2);
  border-radius: var(--u-r-md);
  color: var(--u-ink);
  font-family: var(--u-font-ui);
  font-size: 15px;
  letter-spacing: -.01em;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--u-accent);
  box-shadow: 0 0 0 3.5px var(--u-accent-soft);
}

/* —— 5. 顶栏 → 毛玻璃 —— */
.topnav {
  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);
  padding: 8px 22px;
}
.topnav .brand .seal {
  background: linear-gradient(155deg, #d97757 0%, #c4633f 55%, #a85234 100%);
  color: #fff;
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.3);
  border-radius: 8px;
}
.topnav .brand .cn { color: var(--u-ink); }
.topnav .nav-links a { color: var(--u-ink-2); }
.topnav .nav-links a.on,
.topnav .nav-links a:hover { color: var(--u-ink); }
.topnav .avatar {
  background: var(--u-accent-soft);
  color: var(--u-accent);
  border-radius: 50%;
}

/* —— 6. 语言切换 → 分段控件 —— */
.lang-switch {
  background: var(--u-fill-3);
  border: 0;
  border-radius: var(--u-r-sm);
  padding: 2px;
  gap: 2px;
}
.lang-switch button {
  border: 0;
  background: transparent;
  color: var(--u-ink-2);
  border-radius: 7px;
  font-family: var(--u-font-ui);
  font-size: 12px;
  letter-spacing: 0;
  min-height: 28px;
  padding: 0 9px;
}
.lang-switch button.on {
  background: var(--u-surface);
  color: var(--u-ink);
  font-weight: 590;
  box-shadow: 0 1px 3px rgba(20,20,19,.12);
}
@media (prefers-color-scheme: dark) {
  .lang-switch button.on { box-shadow: 0 1px 3px rgba(0,0,0,.55); }
}

/* —— 7. 段选 → 分段控件 —— */
.seg {
  background: var(--u-fill-3);
  border-radius: var(--u-r-sm);
  padding: 2px;
  gap: 2px;
  border: 0;
}
.seg button {
  border: 0;
  background: transparent;
  color: var(--u-ink);
  border-radius: 7px;
  font-family: var(--u-font-ui);
  font-size: 14px;
  letter-spacing: 0;
  min-height: 32px;
  padding: 0 var(--u-s4);
}
.seg button.on {
  background: var(--u-surface);
  font-weight: 590;
  box-shadow: 0 1px 3px rgba(20,20,19,.12);
}
@media (prefers-color-scheme: dark) {
  .seg button.on { box-shadow: 0 1px 3px rgba(0,0,0,.55); }
}

/* —— 8. 字段标签 —— */
.field label,
.col-form label {
  font-size: 13px;
  font-weight: 590;
  color: var(--u-ink-2);
  letter-spacing: -.004em;
}
.hint { color: var(--u-ink-2); font-size: 13px; }
.geo-hint { color: var(--u-ink-2); }
.geo-hint.ok { color: var(--u-ok); }
.geo-hint.warn { color: var(--u-err); }
.geo-hint.loading { color: var(--u-ink-3); }

/* —— 9. studio 三栏 —— */
.studio { grid-template-columns: 360px 1fr 500px; }
.col-form { border-right: 1px solid var(--u-line); padding: var(--u-s5); background: var(--u-bg); }
.col-chat { background: var(--u-surface-2); }
.col-report { background: var(--u-surface-2); border-left: 1px solid var(--u-line); }
.form-h {
  font-family: var(--u-font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.016em;
  color: var(--u-ink);
  margin-bottom: var(--u-s4);
}

/* —— 10. 聊天气泡 —— */
.chat-head { border-bottom: 1px solid var(--u-line); }
.chat-head .t { font-family: var(--u-font-ui); color: var(--u-ink); font-size: 15px; font-weight: 590; letter-spacing: -.012em; }
.msg { border-radius: var(--u-r-lg); font-size: 14px; }
.msg.user { background: var(--u-accent); color: var(--u-on-accent); border-bottom-right-radius: var(--u-r-xs); }
.msg.ai {
  background: var(--u-surface);
  border: 1px solid var(--u-line);
  color: var(--u-ink);
  border-bottom-left-radius: var(--u-r-xs);
}
.msg.ai h1, .msg.ai h2, .msg.ai h3, .msg.ai h4 { color: var(--u-ink); font-weight: 600; }
.msg.ai strong { color: var(--u-ink); }
.msg.ai a { color: var(--u-accent); }
.msg.ai code { background: var(--u-surface-2); color: var(--u-accent); }
.msg.ai pre { background: var(--u-surface-2); border: 1px solid var(--u-line); }
.msg.ai blockquote { background: var(--u-accent-soft); border-left-color: var(--u-accent); color: var(--u-ink-2); }
.msg.ai th { background: var(--u-surface-2); color: var(--u-ink); }
.msg.thinking {
  background: var(--u-surface);
  border: 1px dashed var(--u-accent);
  color: var(--u-accent);
  font-family: var(--u-font-ui);
  letter-spacing: 0;
}
.msg.thinking .sigil { border-color: var(--u-accent); border-top-color: transparent; }
.chat-empty { color: var(--u-ink-2); font-size: 13.5px; }
.chat-input { border-top: 1px solid var(--u-line); background: var(--u-surface); }
.chat-input textarea {
  background: var(--u-surface);
  border: 1px solid var(--u-line-2);
  border-radius: var(--u-r-md);
  color: var(--u-ink);
  font-family: var(--u-font-ui);
}
#btnSend .spin { border-color: rgba(255,255,255,.45); border-top-color: var(--u-on-accent); }
#btnSend.loading .spin { border-color: rgba(255,255,255,.45); border-top-color: var(--u-on-accent); }

/* —— 11. 历史列表 —— */
.recent-list .item {
  background: var(--u-surface);
  border: 1px solid var(--u-line);
  border-radius: var(--u-r-md);
  color: var(--u-ink);
}
.recent-list .item:hover { border-color: var(--u-accent); background: var(--u-surface-2); }
.recent-list .item .p { font-family: var(--u-font-ui); color: var(--u-ink); font-weight: 590; }
.recent-list .item .t { color: var(--u-ink-3); }

/* —— 12. 报告栏 —— */
.report-bar { border-bottom: 1px solid var(--u-line); }
.report-bar .t { font-family: var(--u-font-ui); color: var(--u-ink); font-size: 15px; font-weight: 590; letter-spacing: -.012em; }
.report-bar button.take-link { background: var(--u-accent); color: var(--u-on-accent); font-weight: 590; }
.report-bar button.take-link:hover { filter: none; background: var(--u-accent-press); }
iframe.report { background: #fff; }

/* —— 13. 城市建议下拉 —— */
.city-suggest, .zw-city-suggest {
  background: var(--u-surface);
  border: 1px solid var(--u-line);
  border-radius: var(--u-r-md);
  box-shadow: var(--u-shadow-2);
}
.city-suggest .opt:hover, .city-suggest .opt.active,
.zw-city-suggest .it:hover, .zw-city-suggest .it.active { background: var(--u-fill-3); }
.city-suggest .opt .nm, .zw-city-suggest .it .nm { color: var(--u-ink); }
.city-suggest .opt .ct, .zw-city-suggest .it .ct { color: var(--u-ink-2); }
.country-sel { background: var(--u-surface); color: var(--u-ink); border: 1px solid var(--u-line-2); border-radius: var(--u-r-md); }

/* —— 14. 游客登录浮层 → sheet —— */
.auth-mask { background: rgba(20,20,19,.42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.auth-card {
  background: var(--u-surface);
  border: 1px solid var(--u-line);
  border-radius: var(--u-r-xl);
  padding: var(--u-s6);
  box-shadow: var(--u-shadow-3);
  color: var(--u-ink);
}
.auth-x { color: var(--u-ink-2); }
.auth-x:hover { color: var(--u-ink); }
.auth-tabs { gap: 2px; background: var(--u-fill-3); padding: 2px; border-radius: var(--u-r-sm); }
.auth-tabs button {
  border: 0; background: transparent; color: var(--u-ink);
  border-radius: 7px; font-family: var(--u-font-ui); letter-spacing: 0;
}
.auth-tabs button.on {
  background: var(--u-surface); color: var(--u-ink); font-weight: 590;
  box-shadow: 0 1px 3px rgba(20,20,19,.12);
}
.auth-card .field input { background: var(--u-surface); border: 1px solid var(--u-line-2); color: var(--u-ink); }
.auth-card .field input:focus { border-color: var(--u-accent); }
.auth-perks { background: var(--u-surface); border: 1px solid var(--u-line); border-radius: var(--u-r-md); }
.auth-perks .perk { color: var(--u-ink); }
.auth-perks .perk strong { color: var(--u-accent); }
.auth-perks .perks-title { font-family: var(--u-font-ui); color: var(--u-ink); letter-spacing: 0; }
.auth-perks .perk .perk-ic { background: var(--u-accent-soft); }
.auth-hint { color: var(--u-ink-2); }
.status-line { color: var(--u-err); }

/* —— 15. AI 提示 / 免责块 —— */
.msg.l3 { background: var(--u-surface-2); border: 0; color: var(--u-ink-2); font-size: 12.5px; border-radius: var(--u-r-md); }
.l3-tail { color: var(--u-ink-3); font-style: normal; }
.sys-note { border-top-color: var(--u-line); color: var(--u-ink-3); }
.sys-note-l3 { color: var(--u-ink-2); border-top-color: var(--u-line-2); }
.ai-disclaimer-sep { background: linear-gradient(90deg, transparent, var(--u-line-2), transparent); }
.ai-disclaimer-text { color: var(--u-ink-3); }
.ai-disclaimer.l3 .ai-disclaimer-text { color: var(--u-ink-2); }
.ai-gen-badge { border-color: var(--u-line-2); color: var(--u-accent); }
.ai-content { color: var(--u-ink); }
.fallback-card { background: var(--u-surface-2); border: 1px solid var(--u-line); }
.btn-retry { background: var(--u-accent); color: var(--u-on-accent); border-radius: var(--u-r-pill); }
.btn-retry:hover { transform: none; box-shadow: var(--u-shadow-1); background: var(--u-accent-press); }
.ai-maintenance-banner { background: var(--u-warn); border: 0; color: var(--u-ink); }
.ai-maintenance-banner strong { color: var(--u-ink); }
.ai-maintenance-card { background: var(--u-surface-2); border: 0; color: var(--u-ink); }

/* —— 16. 页脚 —— */
.site-footer { color: var(--u-ink-3); border-top: 1px solid var(--u-line); }
.site-footer a { color: var(--u-accent); }

/* —— 17. 移动端三标签 → 底部标签栏 —— */
@media (max-width: 760px) {
  body { height: 100dvh; }
  .m-tabs {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 90;
    display: flex; gap: 0;
    padding: 0 0 env(safe-area-inset-bottom);
    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);
    border-bottom: 0;
  }
  .m-tabs button {
    flex: 1 1 0; min-height: 50px; padding: 8px 0;
    font-size: 12px; letter-spacing: 0;
    border: 0; border-radius: 0; background: transparent;
    color: var(--u-ink-3); font-family: var(--u-font-ui); font-weight: 500;
  }
  .m-tabs button.on { background: transparent; color: var(--u-accent); font-weight: 590; }
  .studio { padding-bottom: calc(50px + env(safe-area-inset-bottom)); }
}

/* —— 18. 紫微 / 农历 / 管理台 通用 —— */
.zw-cell { background: var(--u-surface); border-color: var(--u-line); }
.zw-cell.center { background: var(--u-surface-2); }
.zw-cell:hover { background: var(--u-surface-2); }

/* —— 19. 旧页导航图标（新页面同款结构）—— */
.topnav .u-brand {
  display: inline-flex; align-items: center; gap: var(--u-s2);
  font-weight: 600; font-size: var(--u-f-callout); letter-spacing: -.018em;
  cursor: pointer; flex: 0 0 auto;
}
.topnav .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);
}
.topnav .nav-links a {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--u-font-ui); font-size: var(--u-f-sub);
}
.topnav .nav-links a .ic { font-size: .92em; color: var(--u-ink-3); }
.topnav .nav-links a.on .ic, .topnav .nav-links a:hover .ic { color: var(--u-accent); }

/* 旧页 .topnav 的 brand 已被 u-brand 取代，隐藏旧结构 */
.topnav > .brand:not(.u-brand) { display: none; }

/* 移动端底部标签栏图标 */
.m-tabs button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.m-tabs button .ic { font-size: 17px; }
@media (max-width: 760px) {
  .m-tabs button.on .ic { color: var(--u-accent); }
}

/* 卖点图标 */
.auth-perks .perk .perk-ic .ic { font-size: 13px; }