/* ═══════════════════════════════════════════════════════════════
   觉山灵机易理 · 全局主题（水墨宣纸 · 淡雅国学）
   令牌 + 共享组件 + 装饰库 + 五行配色
   应用页 body 加 class="app"；营销/账号页 body 加 class="paper"
   ═══════════════════════════════════════════════════════════════ */

/* ── 设计令牌 ─────────────────────────────────────────────── */
:root {
  /* 宣纸底色阶 */
  --paper:        #faf6ee;
  --paper-deep:   #f3ecdd;
  --paper-card:   #fffdf7;
  --paper-inset:  #f8f2e5;
  --paper-wash:   rgba(168, 86, 56, 0.06);

  /* 墨色文字阶 */
  --ink:          #2b2620;
  --ink-soft:     #4a4238;
  --ink-muted:    #8a7f6e;
  --ink-faint:    #b3a894;

  /* 赭石主色阶 */
  --accent:        #a85638;
  --accent-hover:  #8e452c;
  --accent-light:  rgba(168, 86, 56, 0.10);
  --accent-faint:  rgba(168, 86, 56, 0.18);

  /* 朱砂印章红 */
  --seal:         #b44436;
  --seal-deep:    #96352a;

  /* 辅色玄青 */
  --accent2:       #2e5a7a;
  --accent2-light: rgba(46, 90, 122, 0.10);

  /* 功能色 */
  --danger:  #a83a32;
  --ok:      #3e7a52;
  --warn:    #a8763e;

  /* 五行传统五色（雅化） */
  --wx-mu:   #3e7a52;   /* 木·青绿 */
  --wx-huo:  #b44436;   /* 火·朱赤 */
  --wx-tu:   #a8763e;   /* 土·赭黄 */
  --wx-jin:  #9c7c28;   /* 金·淡金 */
  --wx-shui: #2e5a7a;   /* 水·玄青 */

  /* 边框/线条 */
  --border:       #e2d9c6;
  --border-deep:  #cfc2a6;
  --border-ink:   rgba(43, 38, 32, 0.14);

  /* 圆角/阴影 */
  --radius:    8px;
  --radius-sm: 6px;
  --shadow:    0 1px 3px rgba(74, 60, 42, 0.07);
  --shadow-lg: 0 6px 24px rgba(74, 60, 42, 0.10);

  /* 字体族 */
  --font-serif: "STSong", "STZhongsong", "SimSun", "Noto Serif SC", "Songti SC", serif;
  --font-sans:  "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-kai:   "KaiTi", "STKaiti", "STSong", "SimSun", serif;
  /* 毛笔行书：华文行楷优先，退回行楷/楷体，Win/Mac 均自带零下载 */
  --font-brush: "STXingkai", "华文行楷", "LiSu", "隶书", "STKaiti", "华文楷体", "KaiTi", serif;

  /* 命盘专用 */
  --pill-char: 34px;

  /* ── 旧变量别名（兼容遗留引用，全部指向新令牌） ── */
  --bg:         var(--paper);
  --sidebar-bg: var(--paper-deep);
  --card:       var(--paper-card);
  --text:       var(--ink);
  --muted:      var(--ink-muted);
}

/* ── 基础 ─────────────────────────────────────────────────── */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: var(--font-sans);
  background: var(--paper); color: var(--ink); line-height:1.7;
}
body.app { height:100vh; overflow:hidden; }

/* 宣纸噪点纹理（应用页 fixed 全页） */
body.app::before, body.paper::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.12;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* 应用页水墨晕染底（双色渐变模拟墨汁在宣纸上渗透） */
body.app {
  background:
    radial-gradient(1000px 400px at 90% 0%, rgba(46, 90, 122, 0.06), transparent 55%),
    radial-gradient(800px 360px at 5% 95%, rgba(168, 86, 56, 0.06), transparent 55%),
    radial-gradient(600px 300px at 50% 50%, rgba(168, 86, 56, 0.03), transparent 60%),
    var(--paper);
}
/* 应用页三栏布局需压在纹理之上 */
body.app .topbar, body.app .main { position:relative; z-index:1; }

.hidden { display:none !important; }
.mobile-new-chart { display:none; }

/* ── 五行配色（文字染色统一入口） ─────────────────────────── */
.wx-char { font-weight:700; }
.wx-木 { color: var(--wx-mu); }
.wx-火 { color: var(--wx-huo); }
.wx-土 { color: var(--wx-tu); }
.wx-金 { color: var(--wx-jin); }
.wx-水 { color: var(--wx-shui); }

/* 真太阳时提示 */
.tz-changed { color: var(--seal); font-weight:700; }
.tz-same    { color: var(--ink-muted); font-weight:700; }

/* 当前运/限高亮 */
.is-current { background: var(--accent-light) !important; font-weight:700; }

/* ── 按钮 ─────────────────────────────────────────────────── */
.btn {
  padding:8px 16px; border:none; border-radius:6px; font-size:13px;
  cursor:pointer; font-weight:600; transition:all 0.15s;
  font-family: var(--font-sans);
}
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-hover); }
.btn-primary:disabled { opacity:0.5; cursor:not-allowed; }
.btn-sm { padding:5px 12px; font-size:12px; }
.btn-outline { background:transparent; border:1px solid var(--border); color:var(--ink-muted); }
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }
.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { opacity:0.85; }

/* ── 顶栏 ─────────────────────────────────────────────────── */
.topbar {
  height:48px; display:flex; align-items:center; justify-content:flex-start;
  padding:0 16px; background:rgba(255, 253, 247, 0.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border); flex-shrink:0;
  position:relative; z-index:160; gap:12px;
}
.topbar-brand {
  display:flex; align-items:center; gap:8px;
  font-family: var(--font-serif); font-size:17px; font-weight:700;
  color:var(--accent); text-decoration:none; letter-spacing:2px; flex-shrink:0;
}
.topbar-brand .brand-logo { height:26px; width:26px; border-radius:5px; box-shadow:var(--shadow); }
.topbar-desktop { display:flex; align-items:center; gap:12px; flex:1; }
.topbar-modules { display:flex; gap:2px; }
.topbar-module {
  padding:4px 14px; border-radius:14px; font-size:12px; cursor:pointer;
  color:var(--ink-muted); background:transparent; border:1px solid transparent;
  transition:all 0.2s; font-weight:500; white-space:nowrap;
}
.topbar-module.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.topbar-module:hover:not(.active) { border-color:var(--accent); color:var(--accent); }
.topbar-right { display:flex; align-items:center; gap:10px; font-size:12px; margin-left:auto; }
.topbar-right .credits { color:var(--accent); font-weight:600; }
.topbar-right a { color:var(--ink-muted); text-decoration:none; font-size:12px; }
.topbar-right a:hover { color:var(--accent); }
.status-badge { display:inline-block; padding:1px 8px; border-radius:10px; font-size:11px; font-weight:600; }
.status-info { background:var(--accent2-light); color:var(--accent2); }
.status-ok { background:rgba(62,122,82,0.12); color:var(--ok); }
.lang-link { color:var(--ink-muted); text-decoration:none; font-size:0.8rem; }
.lang-link:hover { color:var(--accent); }
.topbar-credits-badge {
  display:none;
  font-size:12px; font-weight:600; color:var(--accent); cursor:pointer;
  background:var(--accent-light); padding:2px 10px; border-radius:12px;
  white-space:nowrap;
}

/* ── 汉堡菜单 ─────────────────────────────────────────────── */
.hamburger {
  display:none; position:absolute; left:12px; top:50%; transform:translateY(-50%);
  background:none; border:none; font-size:22px;
  cursor:pointer; color:var(--ink); padding:2px 4px; line-height:1;
  flex-shrink:0; z-index:5;
}
.sidebar-overlay {
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(43, 38, 32, 0.35); z-index:150; transition:opacity 0.3s ease;
}

/* ── 浮动排盘按钮（仅手机） ───────────────────────────────── */
.fab-paipan {
  display:none;
  position:fixed; left:16px; bottom:80px; z-index:90;
  width:48px; height:48px; border-radius:50%; border:none;
  background:var(--accent); color:#fff; font-size:26px; line-height:1;
  box-shadow:0 3px 12px rgba(168, 86, 56, 0.45);
  cursor:pointer; align-items:center; justify-content:center;
  transition:transform 0.2s;
}
.fab-paipan:active { transform:scale(0.92); }

/* ── 底部标签栏（仅手机） ─────────────────────────────────── */
.mobile-tab-bar {
  display:none;
  position:fixed; bottom:0; left:0; right:0; z-index:100;
  height:56px; padding:0 8px; padding-bottom:env(safe-area-inset-bottom);
  background:var(--paper-card); border-top:1px solid var(--border);
  justify-content:space-evenly; align-items:center;
}
.mobile-tab {
  font-size:15px; font-weight:500; color:var(--ink-muted); cursor:pointer;
  text-decoration:none; padding:8px 0; text-align:center;
  transition:color 0.2s; -webkit-tap-highlight-color:transparent;
  white-space:nowrap;
}
.mobile-tab.active { color:var(--accent); font-weight:700; }
.mobile-tab-sep { color:var(--border-deep); font-size:18px; user-select:none; pointer-events:none; }

/* ── Toast 提示 ───────────────────────────────────────────── */
.toast {
  position:fixed; bottom:120px; left:50%; transform:translateX(-50%); z-index:300;
  background:rgba(10, 14, 26, 0.92); color:#fff; padding:10px 24px;
  border-radius:20px; font-size:13px; pointer-events:none;
  animation:toastIn 0.3s ease, toastOut 0.3s ease 1.8s forwards;
}
@keyframes toastIn { from{opacity:0;transform:translateX(-50%) translateY(8px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
@keyframes toastOut { from{opacity:1} to{opacity:0} }

/* ── 侧栏菜单项 ───────────────────────────────────────────── */
.sidebar-menu-item {
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  font-size:13px; color:var(--ink); text-decoration:none;
  border-radius:6px; transition:background 0.15s;
}
.sidebar-menu-item:hover { background:var(--paper-inset); }

/* ── 主布局 ───────────────────────────────────────────────── */
.main { display:flex; height:calc(100vh - 48px); }
.sidebar, .center, .chat-panel { overflow-y:auto; }

/* ── 左侧边栏 ─────────────────────────────────────────────── */
.sidebar {
  width:260px; flex-shrink:0; background:var(--paper-deep);
  border-right:1px solid var(--border); display:flex; flex-direction:column;
  transition:width 0.25s ease;
}
.sidebar.collapsed { width:0; min-width:0; border-right:none; overflow:hidden; }
.sidebar-header {
  padding:14px 16px 10px; font-size:13px; font-weight:600;
  font-family: var(--font-serif); letter-spacing:1px;
  color:var(--accent); border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
}
.sidebar-list { flex:1; overflow-y:auto; padding:8px 6px; }
.sidebar-item {
  padding:12px 14px; border-radius:10px; cursor:pointer; margin-bottom:2px;
  border:1px solid transparent; transition:all 0.2s ease; font-size:13px;
  background:transparent; position:relative;
}
.sidebar-item:hover { background:var(--paper-card); box-shadow:var(--shadow); }
.sidebar-item.active {
  background:var(--paper-card); border-color:var(--border-deep);
  box-shadow:0 1px 4px rgba(168, 86, 56, 0.10);
}
.sidebar-item:active { transform:scale(0.985); background:var(--paper-inset); }
.sidebar-tab {
  flex:1; text-align:center; padding:5px 0; border-radius:6px;
  font-size:12px; font-weight:600; cursor:pointer; color:var(--ink-muted);
  background:transparent; border:1px solid transparent; transition:all 0.15s;
}
.sidebar-tab:hover { color:var(--accent); background:var(--paper-inset); }
.sidebar-tab.active { color:var(--accent2); background:var(--accent2-light); border-color:var(--accent2); }
.sidebar-footer {
  padding:10px 12px; border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:6px; flex-shrink:0;
}
.sidebar-footer a {
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 12px; border-radius:8px; font-size:13px; font-weight:600;
  text-decoration:none; transition:all 0.15s;
  border:1.5px solid var(--border); background:var(--paper-card);
}
.sidebar-footer a:hover { border-color:var(--accent); color:var(--accent); background:var(--paper-inset); }
.sidebar-footer a:first-child { color:var(--ink); }
.sidebar-footer a:last-child { color:var(--accent); border-color:var(--accent); background:var(--paper-inset); }
.sidebar-footer a:last-child:hover { background:var(--accent); color:#fff; }
.sidebar-item .hi-master { font-weight:600; font-size:14px; }
.sidebar-item .date { font-size:11px; color:var(--ink-muted); margin-top:3px; }
.sidebar-item { color:var(--ink); line-height:1.5; }
.sidebar-item .del-btn {
  opacity:0; transition:opacity 0.15s; background:none; border:none;
  color:var(--ink-muted); cursor:pointer; font-size:13px; padding:2px 6px;
  border-radius:4px; position:absolute; right:8px; top:50%; transform:translateY(-50%);
}
.sidebar-item:hover .del-btn { opacity:0.6; }
.sidebar-item .del-btn:hover { opacity:1; color:var(--danger); background:rgba(168, 58, 50, 0.08); }

/* sidebar 内删除按钮：hover 才显示 */
.sidebar .btn-danger.btn-sm { opacity:0; transition:opacity 0.15s; }
.sidebar-item:hover .btn-danger.btn-sm { opacity:1; }

.sidebar-toggle {
  width:24px; height:56px; background:var(--paper-card); border:1px solid var(--border);
  border-left:none; border-radius:0 8px 8px 0; cursor:pointer;
  font-size:12px; color:var(--ink-muted); z-index:5;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  position:absolute; left:260px; top:50%; transform:translateY(-50%);
  transition:left 0.25s ease;
}
.sidebar-toggle.collapsed { left:32px; }
.sidebar-toggle:hover { color:var(--accent); background:var(--paper-inset); }
.sidebar-mini {
  display:none; width:32px; flex-shrink:0; background:var(--paper-deep);
  border-right:1px solid var(--border); flex-direction:column; align-items:center;
  padding-top:12px; gap:12px; cursor:pointer;
}
.sidebar-mini.show { display:flex; }
.sidebar-mini:hover { background:var(--paper-inset); }
.sidebar-mini .icon { font-size:14px; color:var(--accent); writing-mode:vertical-rl; letter-spacing:4px; font-family:var(--font-serif); }

/* ── 中间：排盘区 ─────────────────────────────────────────── */
.center {
  padding:16px 24px;
  display:flex; flex-direction:column; gap:12px; overflow-y:auto;
}
.center-header { text-align:center; padding:4px 0; }
.center-header h2 { font-size:16px; color:var(--accent); font-weight:600; font-family:var(--font-serif); }

/* ── 卡片 ─────────────────────────────────────────────────── */
.card {
  background:var(--paper-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow); margin-bottom:0;
  position:relative;
}

/* ── 表单 ─────────────────────────────────────────────────── */
.form-row { display:flex; gap:6px; flex-wrap:wrap; align-items:flex-end; }
.form-group { display:flex; flex-direction:column; gap:2px; }
.form-group label { font-size:11px; color:var(--ink-muted); }
.form-group input, .form-group select {
  padding:6px 10px; border:1px solid var(--border); border-radius:6px;
  font-size:14px; background:var(--paper-card); color:var(--ink); width:72px;
}
.form-group select { cursor:pointer; }
.form-group input:focus, .form-group select:focus {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-faint);
}

/* ── 排盘表格（通用，紫微大限表等） ────────────────────────── */
.chart-table { width:100%; border-collapse:collapse; font-size:13px; margin-top:10px; }
.chart-table th, .chart-table td { border:1px solid var(--border); padding:6px 4px; text-align:center; }
.chart-table th { background:var(--paper-inset); color:var(--accent); font-weight:600; font-size:12px; }
.chart-meta { display:flex; gap:10px; flex-wrap:wrap; font-size:13px; color:var(--ink-muted); }
.chart-meta strong { color:var(--ink-soft); }

/* ── 快捷提问按钮 ─────────────────────────────────────────── */
.quick-btns { display:flex; gap:4px; flex-wrap:wrap; padding:8px 16px; }
.quick-btn {
  padding:5px 14px; border:1px solid var(--border); border-radius:16px;
  background:var(--paper-card); cursor:pointer; font-size:12px; color:var(--ink-muted);
  transition:all 0.15s; white-space:nowrap;
}
.quick-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--paper-inset); }

/* ── 聊天 ─────────────────────────────────────────────────── */
.chat-panel {
  flex:1; background:var(--paper-card); border-left:1px solid var(--border);
  display:flex; flex-direction:column; min-width:300px;
}
.chat-header {
  padding:14px 16px 10px; font-size:13px; font-weight:600;
  font-family:var(--font-serif); letter-spacing:1px;
  color:var(--ink); border-bottom:1px solid var(--border);
}
.chat-messages { flex:1; overflow-y:auto; padding:16px 20px; }
.msg { margin-bottom:18px; animation:fadeIn 0.25s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.msg .label { font-size:11px; font-weight:600; margin-bottom:4px; }
.msg-user .label { color:var(--accent); }
.msg-ai .label { color:var(--accent2); }
.msg .body {
  padding:10px 14px; border-radius:8px; font-size:13px; line-height:1.8;
  white-space:normal; word-break:break-word;
}
.msg-user .body { background:var(--accent-light); border:1px solid var(--accent-faint); }
.msg-ai .body { background:var(--paper); border:1px solid var(--border); }

/* Markdown 渲染样式 */
.msg-ai .body h2 { font-size:16px; color:var(--accent); margin:14px 0 8px; border-bottom:1px solid var(--border-deep); padding-bottom:4px; font-family:var(--font-serif); }
.msg-ai .body h3 { font-size:15px; color:var(--accent); margin:12px 0 8px; border-left:3px solid var(--accent); padding-left:8px; font-family:var(--font-serif); }
.msg-ai .body h4 { font-size:13px; color:var(--ink-soft); margin:8px 0 4px; }
.msg-ai .body h5 { font-size:12px; color:var(--ink-muted); margin:6px 0 3px; }
.msg-ai .body ul { margin:4px 0; padding-left:18px; }
.msg-ai .body li { margin:2px 0; }
.msg-ai .body strong { color:var(--ink); font-weight:700; }
.msg-ai .body em { color:var(--accent-hover); }
.msg-ai .body code { background:var(--paper-inset); padding:1px 5px; border-radius:3px; font-size:12px; font-family:inherit; }
.msg-ai .body pre { background:var(--paper-inset); padding:8px 12px; border-radius:6px; overflow-x:auto; margin:6px 0; }
.msg-ai .body pre code { background:transparent; padding:0; }
.msg-ai .body hr.md-hr { border:none; border-top:1px solid var(--border-deep); margin:14px 0; }
.msg-ai .body p { margin:3px 0; }

.chat-input-row { display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--border); }
.chat-input-row input {
  flex:1; padding:10px 16px; border:1px solid var(--border); border-radius:22px;
  font-size:13px; background:var(--paper); color:var(--ink);
}
.chat-input-row input:focus { outline:none; border-color:var(--accent); background:var(--paper-card); box-shadow:0 0 0 2px var(--accent-faint); }
.typing-indicator { display:flex; align-items:center; gap:8px; color:var(--ink-muted); font-size:13px; margin-bottom:12px; padding:4px 0; }
.typing-dots { display:inline-flex; align-items:center; gap:5px; }
.typing-dots i { width:8px; height:8px; min-width:8px; min-height:8px; background:var(--accent); border-radius:50%; display:block; flex-shrink:0; animation:dotBounce 1.4s infinite ease-in-out; }
.typing-dots i:nth-child(2) { animation-delay:0.2s; }
.typing-dots i:nth-child(3) { animation-delay:0.4s; }
@keyframes dotBounce { 0%,60%,100% { transform:translateY(0); opacity:0.2; } 30% { transform:translateY(-10px); opacity:1; } }
/* AI 思考动画（嵌入消息框内） */
.loading-dots { display:inline-flex; align-items:center; gap:5px; vertical-align:middle; }
.loading-dots i { width:7px; height:7px; background:var(--accent); border-radius:50%; display:inline-block; animation:ldBounce 1.4s infinite ease-in-out; }
.loading-dots i:nth-child(2) { animation-delay:0.2s; }
.loading-dots i:nth-child(3) { animation-delay:0.4s; }
@keyframes ldBounce { 0%,60%,100%{transform:translateY(0);opacity:0.25} 30%{transform:translateY(-6px);opacity:1} }
.chat-empty { text-align:center; color:var(--ink-muted); padding:60px 20px; font-size:14px; }

/* ═══ 装饰库 ═══════════════════════════════════════════════ */

/* 印章角标（朱砂方印） */
.seal-stamp {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; height:30px; padding:0 6px;
  background:var(--seal); color:#fff;
  font-family:var(--font-serif); font-size:14px; font-weight:700; line-height:1;
  border-radius:4px; box-shadow:inset 0 0 0 2px rgba(255,255,255,0.35), var(--shadow);
  transform:rotate(-3deg); user-select:none;
}

/* 回纹顶饰带（命盘卡等重点卡片） */
.frame-huiwen { position:relative; }
.frame-huiwen::before {
  content:''; position:absolute; left:12px; right:12px; top:0; height:5px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='5'%3E%3Cpath d='M1 4V1h10v3H7V2.5H5V4' fill='none' stroke='%23a85638' stroke-width='0.7' opacity='0.45'/%3E%3C/svg%3E") repeat-x;
  pointer-events:none;
}

/* 云纹分隔线 */
.divider-yun {
  border:none; height:14px; margin:16px 0; opacity:0.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='14'%3E%3Cpath d='M2 10q7-9 14 0t14 0 14 0 14 0' fill='none' stroke='%23cfc2a6' stroke-width='1.2'/%3E%3C/svg%3E") repeat-x center;
}

/* 太极图（内联 SVG 用） */
.taiji-spin { animation:taijiRotate 24s linear infinite; transform-origin:center; }
@keyframes taijiRotate { to { transform:rotate(360deg); } }

/* 纸面晕染背景（营销/账号页 body.paper） */
body.paper {
  background:
    radial-gradient(1200px 500px at 85% -5%, rgba(46, 90, 122, 0.05), transparent 60%),
    radial-gradient(900px 420px at 8% 108%, rgba(168, 86, 56, 0.05), transparent 60%),
    var(--paper);
  min-height:100vh;
}

/* ═══ 响应式 ═══════════════════════════════════════════════ */

/* 中屏（801~1100px）：侧栏改抽屉，修复历史不可达的断档 */
@media (max-width:1100px) and (min-width:801px) {
  .hamburger { display:block; }
  .topbar-brand { margin-left:36px; }
  .sidebar {
    display:flex !important;
    position:fixed; top:48px; left:0; bottom:0; width:280px; z-index:200;
    transform:translateX(-100%); transition:transform 0.3s ease;
    box-shadow:2px 0 12px rgba(43, 38, 32, 0.15);
  }
  .sidebar.mobile-open { transform:translateX(0); }
  .sidebar-header .btn-outline { display:none; }
  .sidebar-toggle, .sidebar-mini { display:none !important; }
  .sidebar-overlay { left:280px; }
}

/* 手机端（≤800px） */
@media (max-width:800px) {
  body.app { overflow:auto; }
  .main {
    flex-direction:column; height:auto; min-height:calc(100vh - 48px);
    padding-bottom:60px;
  }
  .center { width:100% !important; max-width:none !important; padding:12px; flex:0 0 auto; overflow:visible; }
  .chat-panel {
    flex:0 0 auto; min-height:70vh; min-width:0; border-left:none;
    border-top:1px solid var(--border);
  }
  .chat-messages { max-height:55vh; }

  /* 顶栏：手机端居中品牌，隐藏桌面模块 */
  .topbar { height:44px; padding:0 12px; justify-content:center; gap:0; }
  .topbar-brand { font-size:15px; letter-spacing:1px; margin-left:0; }
  .topbar-brand .brand-logo { height:22px; width:22px; }
  .topbar-desktop { display:none; }
  .topbar-credits-badge {
    display:block; position:absolute; right:10px; top:50%; transform:translateY(-50%);
    font-size:11px; padding:2px 8px;
  }

  /* 底部标签栏 + 浮动按钮 */
  .mobile-tab-bar { display:flex; }
  .fab-paipan { display:flex; }

  /* 表单适配 */
  .card { padding:12px; }
  .form-group input, .form-group select { font-size:16px; width:64px; }
  .form-row { gap:4px; }

  /* 图表横向滚动 */
  .chart-table { font-size:11px; }
  .chart-table th, .chart-table td { padding:4px 2px; }

  /* 合盘网格 */
  .chart-grid { grid-template-columns:1fr; }

  /* 汉堡按钮 */
  .hamburger { display:block; }

  /* 侧栏 → 滑入 overlay（覆盖底部标签栏） */
  .sidebar {
    display:flex !important;
    position:fixed; top:44px; left:0; bottom:0; width:280px; z-index:200;
    transform:translateX(-100%); transition:transform 0.3s ease;
    box-shadow:2px 0 12px rgba(43, 38, 32, 0.15);
  }
  .sidebar.mobile-open { transform:translateX(0); }
  .sidebar-header .btn-outline { display:none; }

  /* 侧栏收起按钮与 mini 条 */
  .sidebar-toggle, .sidebar-mini { display:none !important; }
  .sidebar-overlay { left:280px; }
}

/* ═══════════════════════════════════════════════════════════════
   2026 product system · 玄墨天机
   后置令牌覆盖保留旧业务选择器，同时提供完整主题与状态体系。
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* 水墨宣纸：干净的暖白宣纸底 · 纯正松烟墨 · 朱砂红作唯一点睛 */
  --paper: #f7f4ec;
  --paper-deep: #efeae0;
  --paper-card: #fdfbf5;
  --paper-inset: #f2ede3;
  --paper-wash: rgba(60, 56, 50, 0.045);
  --surface-1: rgba(253, 251, 245, 0.96);
  --surface-2: rgba(242, 237, 227, 0.88);
  --surface-3: #e7e1d4;
  --ink: #23201b;
  --ink-soft: #423d35;
  --ink-muted: #6f685c;
  --ink-faint: #a49b8a;
  --accent: #b23a2e;
  --accent-hover: #972d23;
  --accent-light: rgba(178, 58, 46, 0.09);
  --accent-faint: rgba(178, 58, 46, 0.18);
  --seal: #c0392b;
  --seal-deep: #9a2a1f;
  --gold: #9c7c3c;
  --gold-bright: #bd9a52;
  --jade: #4a7256;
  --water: #3a5f74;
  --accent2: var(--water);
  --accent2-light: rgba(58, 95, 116, 0.09);
  --danger: #b23a2e;
  --red: var(--danger);
  --ok: #4a7256;
  --success: var(--ok);
  --warn: #9c7c3c;
  --warning: var(--warn);
  --info: #3a5f74;
  --wx-mu: #4a7256;
  --wx-huo: #b23a2e;
  --wx-tu: #93683a;
  --wx-jin: #9c7c3c;
  --wx-shui: #3a5f74;
  --border: rgba(52, 46, 38, 0.14);
  --border-deep: rgba(52, 46, 38, 0.26);
  --border-strong: rgba(52, 46, 38, 0.4);
  --border-ink: rgba(35, 32, 27, 0.14);
  --shadow-xs: 0 1px 2px rgba(60, 50, 36, 0.05);
  --shadow-sm: 0 4px 18px rgba(60, 50, 36, 0.08);
  --shadow-md: 0 16px 44px rgba(60, 50, 36, 0.12);
  --shadow-lg: 0 30px 76px rgba(45, 38, 28, 0.16);
  --shadow: var(--shadow-sm);
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: clamp(1.35rem, 1.1rem + 0.7vw, 1.8rem);
  --text-2xl: clamp(1.9rem, 1.35rem + 1.5vw, 3rem);
  --text-hero: clamp(2.65rem, 1.8rem + 3vw, 5.4rem);
  --leading-tight: 1.24;
  --leading-normal: 1.7;
  --leading-loose: 1.95;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --container: 1240px;
  --container-wide: 1760px;
  --z-base: 1;
  --z-sticky: 100;
  --z-drawer: 220;
  --z-modal: 320;
  --z-toast: 420;
  --duration-fast: 150ms;
  --duration-normal: 260ms;
  --duration-slow: 380ms;
  --ease-standard: cubic-bezier(.2,.7,.2,1);
  --ease-emphasized: cubic-bezier(.16,1,.3,1);
  --focus-ring: 0 0 0 3px rgba(178, 58, 46, 0.26);
  --topbar-height: 60px;
}

:root[data-theme="dark"] {
  /* 深玄星空：深空蓝黑打底 · 香槟金描边 · 紫微紫主强调 */
  --paper: #0a0e1a;
  --paper-deep: #0e1424;
  --paper-card: #141b30;
  --paper-inset: #1a2340;
  --paper-wash: rgba(150, 130, 235, 0.06);
  --surface-1: rgba(20, 27, 48, 0.94);
  --surface-2: rgba(14, 20, 36, 0.9);
  --surface-3: #202a4a;
  --ink: #eef1fb;
  --ink-soft: #c7cde6;
  --ink-muted: #8b93b5;
  --ink-faint: #5d6588;
  --accent: #9182f0;
  --accent-hover: #a89cf5;
  --accent-light: rgba(145, 130, 240, 0.14);
  --accent-faint: rgba(145, 130, 240, 0.28);
  --seal: #d76b8a;
  --seal-deep: #b84f6e;
  --gold: #d4b06a;
  --gold-bright: #ecc987;
  --jade: #4fc2a5;
  --water: #5aa9e0;
  --accent2: #5aa9e0;
  --accent2-light: rgba(90, 169, 224, 0.16);
  --danger: #e8737a;
  --ok: #4fc2a5;
  --warn: #d4b06a;
  --info: #5aa9e0;
  --wx-mu: #5fcaa9;
  --wx-huo: #e8737a;
  --wx-tu: #d4a76a;
  --wx-jin: #ecc987;
  --wx-shui: #5aa9e0;
  --border: rgba(150, 165, 230, 0.16);
  --border-deep: rgba(150, 165, 230, 0.28);
  --border-strong: rgba(170, 185, 240, 0.42);
  --border-ink: rgba(150, 165, 230, 0.14);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 6px 22px rgba(3, 6, 18, 0.5);
  --shadow-md: 0 18px 48px rgba(3, 6, 18, 0.62);
  --shadow-lg: 0 34px 90px rgba(2, 4, 14, 0.72);
  --focus-ring: 0 0 0 3px rgba(145, 130, 240, 0.4);
}

html { color-scheme: light; scroll-behavior: smooth; }
html[data-theme="dark"] { color-scheme: dark; }
body { font-size: var(--text-base); accent-color: var(--accent); text-rendering: optimizeLegibility; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 999; padding: 10px 14px; border-radius: var(--radius-pill); background: var(--ink); color: var(--paper-card); transform: translateY(-160%); transition: transform var(--duration-fast); }
.skip-link:focus { transform: translateY(0); }
::selection { color: #fff; background: var(--accent); }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; }
a, button, input, select, textarea, [tabindex] { -webkit-tap-highlight-color: transparent; }

:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--water);
  outline-offset: 3px;
  box-shadow: var(--focus-ring);
}

.btn,
a.btn,
a.btn:link,
a.btn:visited,
a.btn:hover,
a.btn:active,
a.btn:focus {
  position: relative;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 17px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  line-height: 1.2;
  font-family: var(--font-serif);
  font-weight: 650;
  letter-spacing: .14em;
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
  text-underline-offset: 0;
  transition: color var(--duration-fast), background var(--duration-fast), border-color var(--duration-fast), box-shadow var(--duration-normal), transform var(--duration-fast);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .48; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 7px 20px color-mix(in srgb, var(--accent) 32%, transparent); }
.btn-primary:hover { background: var(--accent-hover); box-shadow: 0 9px 24px color-mix(in srgb, var(--accent) 42%, transparent); }
a.btn-primary,
a.btn-primary:link,
a.btn-primary:visited,
a.btn-primary:hover,
a.btn-primary:active { color: #fff; text-decoration: none !important; }
.btn-outline { color: var(--ink-soft); border-color: var(--border-deep); background: color-mix(in srgb, var(--paper-card) 82%, transparent); }
.btn-outline:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-light); }
a.btn-outline,
a.btn-outline:link,
a.btn-outline:visited { color: var(--ink-soft); text-decoration: none !important; }
a.btn-outline:hover,
a.btn-outline:active { color: var(--accent); text-decoration: none !important; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-sm { min-height: 34px; padding: 7px 13px; }
.btn-lg {
  min-height: 48px;
  padding: 12px 22px;
  font-size: 15px;
  letter-spacing: .16em;
}

input, select, textarea {
  border: 1px solid var(--border);
  background: var(--paper-card);
  color: var(--ink);
  border-radius: var(--radius-xs);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast), background var(--duration-fast);
}
input:hover, select:hover, textarea:hover { border-color: var(--border-deep); }
input:focus, select:focus, textarea:focus { border-color: var(--water); box-shadow: var(--focus-ring); outline: none; }
input:disabled, select:disabled, textarea:disabled { background: var(--paper-inset); color: var(--ink-faint); cursor: not-allowed; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }

.ui-icon { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
.icon-button {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-1);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all var(--duration-fast);
}
.icon-button:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-light); }

.state-success, .status-success { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.state-warning, .status-warning { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.state-error, .status-error { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.state-info, .status-info { color: var(--info); background: color-mix(in srgb, var(--info) 12%, transparent); }

.toast {
  z-index: var(--z-toast);
  max-width: min(90vw, 520px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(14px);
}

.back-to-top {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-1);
  color: var(--ink-soft);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--duration-normal) var(--ease-standard);
  z-index: var(--z-sticky);
  cursor: pointer;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* ═══ 跨页转场：旧页完整褪去 → 新页完整浮现（慢、顺、不卡） ═══
   不用重 blur；只用 opacity + 轻微位移，保证流畅 */
@view-transition {
  navigation: none; /* 禁用原生 VT，避免和我们的 leave/enter 打架、也避免卡顿 */
}

/* 跳转前：先藏住新页，防止闪一下 */
html.page-enter-prep body {
  opacity: 0;
}

html.page-enter body,
body.page-enter-body {
  animation: pageEnter 1000ms cubic-bezier(.22, 1, .36, 1) both;
}
html.page-leave body,
body.page-leave-body {
  pointer-events: none;
  animation: pageLeave 900ms cubic-bezier(.4, 0, .2, 1) both;
}

/* 新页：慢慢从下方浮现 */
@keyframes pageEnter {
  0% {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(.985);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
/* 旧页：慢慢向上褪去 —— 用户必须能看清它消失 */
@keyframes pageLeave {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -22px, 0) scale(.98);
  }
}

/* 宣纸 veil：轻点缀，不抢戏、不重绘 */
.page-transition-veil {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  transition: opacity 700ms cubic-bezier(.4, 0, .2, 1), visibility 700ms;
}
.page-transition-veil::before {
  content: '觉';
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%) scale(.9);
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  color: color-mix(in srgb, var(--accent) 70%, transparent);
  font: 700 34px/1 var(--font-serif);
  letter-spacing: .1em;
  opacity: 0;
  clip-path: polygon(6% 3%, 94% 5%, 97% 92%, 88% 98%, 4% 94%, 3% 10%);
  transition: opacity 600ms ease, transform 800ms cubic-bezier(.22,1,.36,1);
}
.page-transition-veil.is-active {
  opacity: 1;
  visibility: visible;
}
.page-transition-veil.is-active::before {
  opacity: .55;
  transform: translate(-50%, -50%) scale(1);
}
html.page-leave .page-transition-veil {
  opacity: 1;
  visibility: visible;
}
.page-transition-veil.is-entering {
  opacity: 1;
  visibility: visible;
  animation: veilDissolve 900ms cubic-bezier(.22,1,.36,1) both;
}
.page-transition-veil.is-entering::before {
  opacity: .5;
  animation: sealFade 900ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes veilDissolve {
  0% { opacity: .9; }
  100% { opacity: 0; visibility: hidden; }
}
@keyframes sealFade {
  0% { opacity: .55; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.08); }
}

/* 主按钮扫光（全站） */
.btn-primary {
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(110deg, transparent 18%, rgba(255,255,255,.28), transparent 78%);
  transform: translateX(-140%);
  transition: transform .7s var(--ease-standard);
  pointer-events: none;
}
.btn-primary:hover::after {
  transform: translateX(140%);
}
@media (pointer: coarse) {
  .btn-primary::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.page-enter body,
  html.page-leave body,
  html.page-enter-prep body,
  body.page-enter-body,
  body.page-leave-body { animation: none !important; opacity: 1 !important; transform: none !important; }
  .page-transition-veil { display: none !important; }
  .btn-primary::after { display: none !important; }
}