/* 本来 · 主题 token（深/浅）— 组件样式见 style.css */
:root {
  color-scheme: dark;

  /* 墨笺：交互铬仅黑/白（五行色、标签色、危急色除外）；灰阶只用于字重层次透明度 */
  --mono-black: #000000;
  --mono-white: #ffffff;
  --bg-dark: #050505;
  --bg-gradient:
    radial-gradient(90% 55% at 50% -8%, rgba(255, 255, 255, 0.04) 0%, transparent 52%),
    radial-gradient(120% 80% at 50% -10%, #121212 0%, #050505 58%);
  --bg-surface: #0a0a0a;
  --panel-bg: rgba(10, 10, 10, 0.94);
  --panel-border: rgba(255, 255, 255, 0.14);
  --glass-blur: blur(12px);

  --primary: var(--mono-white);
  --primary-hover: var(--mono-white);
  --accent: var(--mono-white);
  --accent-glow: rgba(255, 255, 255, 0.14);
  --accent-rgb: 255, 255, 255;
  --accent-muted: rgba(255, 255, 255, 0.78);

  --text-main: var(--mono-white);
  --text-muted: rgba(255, 255, 255, 0.88);
  --text-dim: rgba(255, 255, 255, 0.58);

  --line: rgba(255, 255, 255, 0.14);
  --line-heavy: rgba(255, 255, 255, 0.28);
  --card-bg: #0a0a0a;
  --card-bg-solid: #0a0a0a;
  --card-hover: rgba(255, 255, 255, 0.06);
  --input-bg: #000000;
  --input-border: rgba(255, 255, 255, 0.22);
  --overlay-bg: rgba(0, 0, 0, 0.72);
  --overlay-blur: blur(10px);
  --popover-bg: #0a0a0a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55);
  /* 居中设置板（modalSheet / 偏好 portal / AI 设置）共用铬 */
  --sheet-radius: var(--surface-radius-lg);
  --sheet-bg: var(--bg-dark);
  --sheet-border: var(--surface-border, var(--panel-border));
  --sheet-divider: color-mix(in srgb, var(--text-main) 10%, transparent);
  --sheet-shadow: var(--shadow-lg);
  --tag-bg: rgba(255, 255, 255, 0.08);
  --tag-text: var(--mono-white);

  /* 五行：保持识别度，略降荧光感 */
  --wood: #3dba8c;
  --fire: #e85d6a;
  --earth: #d4a017;
  --metal: var(--mono-white);
  --water: #3b9fd4;

  /* 命盘导出：浅色纸面/打印友好五行（DOM 快照与 JS 补丁共用） */
  --pan-export-wood: #0d6e54;
  --pan-export-fire: #c81a3a;
  --pan-export-earth: #b45309;
  --pan-export-metal: #000000;
  --pan-export-water: #0369a1;
  /* 命盘导出：运程列在浅色主题下的屏上高对比色 */
  --pan-export-flow-wood: #52f08c;
  --pan-export-flow-fire: #ff7e92;
  --pan-export-flow-earth: #fcd34d;
  --pan-export-flow-metal: #ffffff;
  --pan-export-flow-water: #0ea5e9;
  /* 命盘导出：画布/补丁共用铬色 */
  --pan-export-surface-light: #ffffff;
  --pan-export-surface-dark: #020204;
  --pan-export-canvas-glow: #1a1a30;
  --pan-export-ink: #111111;
  --pan-export-aux: #334155;
  --pan-export-phase-base: #94a3b8;
  --pan-export-phase-hour: #64748b;
  --pan-export-god-text: #cbd5e1;
  --pan-export-cs-text: rgba(226, 232, 240, 0.92);
  --pan-export-header-liunian: #d4d4d8;
  --pan-export-header-liuyue: #a1a1aa;
  --pan-export-header-liuri: #71717a;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --filter-chip-bg: transparent;
  --filter-chip-hover-bg: transparent;
  --filter-chip-active-bg: var(--mono-white);
  --filter-chip-active-border: var(--mono-white);
  --filter-separator: rgba(255, 255, 255, 0.14);
  --filter-add-hover-bg: transparent;

  --group-badge-radius: 3px 14px 14px 10px;
  --group-badge-radius-lead: 3px 0 0 10px;
  --group-badge-radius-tail: 0 14px 14px 0;
  --group-badge-min-h: 30px;
  --group-badge-max-h: 32px;

  --tag-badge-radius: 3px 12px 12px 3px;
  --tag-badge-radius-lead: 3px 0 0 3px;
  --tag-badge-radius-tail: 0 12px 12px 0;
  --tag-badge-min-h: 30px;
  --tag-badge-max-h: 32px;

  --focus-ring-color: rgba(255, 255, 255, 0.72);
  --control-accent: var(--mono-white);

  --space-page: 32px;
  --space-page-x: 16px;
  --module-gap: 22px;
  --module-gap-sm: 10px;
  /* 收顶栏看盘/学习盘：页缘与卡片顶距，避免贴视口 */
  --page-inset-focus: 12px;
  --pan-column-max: 640px;
  --birth-form-inline: 18px;
  --birth-field-font-size: 12px;
  --surface-radius: 16px;
  --surface-radius-lg: 20px;
  --surface-radius-sm: 11px;
  --surface-border: rgba(255, 255, 255, 0.14);
  /* 独立动作弹层（账户菜单 / 命盘卡「更多」）统一最小宽：随内容收缩，不留大空白 */
  --menu-min-width: 128px;
  /* 通用浮层/细边（前事验证等共用）：深主题白调，浅主题黑调 */
  --surface-1: rgba(255, 255, 255, 0.05);
  --surface-2: rgba(255, 255, 255, 0.08);
  --border-subtle: rgba(255, 255, 255, 0.12);

  --font-ui: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei",
    "Segoe UI", sans-serif;
  --font-display: "Songti SC", "Noto Serif SC", "STSong", "Source Han Serif SC",
    "PingFang SC", serif;
  --touch-min: 44px;
  --danger: #e25b5b;
  --danger-muted: rgba(226, 91, 91, 0.14);
  --success: var(--mono-white);
  --motion-fast: 0.15s;
  --motion-med: 0.22s;

  /* 文字按钮：主 CTA=实心反色；ghost=描边；分段与主钮同色语汇 */
  --btn-h: var(--touch-min);
  --btn-h-dense: 36px;
  --btn-h-auth: 48px;
  --btn-radius: var(--surface-radius-sm);
  --btn-pad-y: 11px;
  --btn-pad-x: 22px;
  --btn-font: 14px;
  --btn-weight: 700;
  --btn-primary-bg: var(--mono-white);
  --btn-primary-bg-hover: var(--mono-white);
  --btn-primary-fg: var(--mono-black);
  --btn-primary-border: var(--mono-white);
  --btn-ghost-bg: transparent;
  --btn-ghost-bg-hover: transparent;
  --btn-ghost-fg: var(--mono-white);
  --btn-ghost-fg-hover: var(--mono-white);
  --btn-ghost-border: rgba(255, 255, 255, 0.55);
  --btn-ghost-border-hover: var(--mono-white);
  --btn-disabled-opacity: 0.4;
  --seg-track-bg: transparent;
  --seg-track-border: rgba(255, 255, 255, 0.28);
  --seg-btn-fg: rgba(255, 255, 255, 0.55);
  --seg-btn-fg-hover: var(--mono-white);
  --seg-btn-hover-bg: transparent;
  --seg-btn-active-bg: var(--mono-white);
  --seg-btn-active-fg: var(--mono-black);

  /* 干支空位空心环：出生直排 / 库房筛选 / 学习盘共用（尺寸由各表面自定） */
  --bazi-empty-ring: rgba(148, 163, 184, 0.58);
  --bazi-empty-ring-hover: rgba(148, 163, 184, 0.72);
  --bazi-empty-ring-focus: rgba(148, 163, 184, 0.84);
}

:root[data-theme="light"] {
  color-scheme: light;

  /* 浅色：纸白底 + 纯黑交互（五行色、标签色、危急色除外） */
  --bg-dark: var(--mono-white);
  --bg-gradient: none;
  --bg-surface: var(--mono-white);
  --panel-bg: var(--mono-white);
  --panel-border: rgba(0, 0, 0, 0.14);
  --glass-blur: blur(10px);

  --primary: var(--mono-black);
  --primary-hover: var(--mono-black);
  --accent: var(--mono-black);
  --accent-glow: rgba(0, 0, 0, 0.1);
  --accent-rgb: 0, 0, 0;
  --accent-muted: rgba(0, 0, 0, 0.72);

  --text-main: var(--mono-black);
  --text-muted: rgba(0, 0, 0, 0.78);
  --text-dim: rgba(0, 0, 0, 0.55);

  --line: rgba(0, 0, 0, 0.12);
  --line-heavy: rgba(0, 0, 0, 0.28);
  --card-bg: var(--mono-white);
  --card-bg-solid: var(--mono-white);
  --card-hover: transparent;
  --input-bg: var(--mono-white);
  --input-border: rgba(0, 0, 0, 0.22);
  --overlay-bg: rgba(0, 0, 0, 0.4);
  --overlay-blur: blur(10px);
  --popover-bg: var(--mono-white);
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --sheet-bg: var(--bg-surface);
  --sheet-border: var(--surface-border, var(--panel-border));
  --sheet-divider: var(--line);
  --sheet-shadow: none;
  --tag-bg: transparent;
  --tag-text: var(--mono-black);

  --metal: var(--mono-black);

  --filter-chip-bg: transparent;
  --filter-chip-hover-bg: transparent;
  --filter-chip-active-bg: var(--mono-black);
  --filter-chip-active-border: var(--mono-black);
  --filter-separator: rgba(0, 0, 0, 0.14);
  --filter-add-hover-bg: transparent;

  --focus-ring-color: rgba(0, 0, 0, 0.72);
  --control-accent: var(--mono-black);
  --surface-border: rgba(0, 0, 0, 0.14);
  --surface-1: rgba(0, 0, 0, 0.03);
  --surface-2: rgba(0, 0, 0, 0.05);
  --border-subtle: rgba(0, 0, 0, 0.1);
  --danger: #c23b3b;
  --danger-muted: rgba(194, 59, 59, 0.1);
  --success: var(--mono-black);

  --btn-primary-bg: var(--mono-black);
  --btn-primary-bg-hover: var(--mono-black);
  --btn-primary-fg: var(--mono-white);
  --btn-primary-border: var(--mono-black);
  --btn-ghost-bg: transparent;
  --btn-ghost-bg-hover: transparent;
  --btn-ghost-fg: var(--mono-black);
  --btn-ghost-fg-hover: var(--mono-black);
  --btn-ghost-border: rgba(0, 0, 0, 0.55);
  --btn-ghost-border-hover: var(--mono-black);
  --seg-track-bg: transparent;
  --seg-track-border: rgba(0, 0, 0, 0.28);
  --seg-btn-fg: rgba(0, 0, 0, 0.55);
  --seg-btn-fg-hover: var(--mono-black);
  --seg-btn-hover-bg: transparent;
  --seg-btn-active-bg: var(--mono-black);
  --seg-btn-active-fg: var(--mono-white);

  --bazi-empty-ring: rgba(100, 116, 139, 0.55);
  --bazi-empty-ring-hover: rgba(100, 116, 139, 0.7);
  --bazi-empty-ring-focus: rgba(100, 116, 139, 0.85);
}

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  position: relative;
  isolation: isolate;
  margin: 0;
  font-family: var(--font-ui);
  background: var(--bg-dark);
  background-image: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--text-main);
  min-height: 100vh;
  min-height: 100dvh;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

/* 极淡纸纹：打破数码平板感，不抢内容 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
}

[data-theme="light"] body::before {
  opacity: 0.028;
}

/* 品牌字：壳层主信号，宋体标题气质 */
.brand-display,
.header .logo,
.header .brand,
.brandTitle,
.login-brand,
.auth-title {
  font-family: var(--font-display);
  letter-spacing: 0.14em;
  font-weight: 600;
}

.brandTitle {
  font-size: clamp(1.7rem, 2.4vw + 1rem, 2.05rem);
  line-height: 1.12;
  color: var(--text-main);
  margin: 0;
  text-align: center;
  padding-right: 0.14em;
  text-wrap: balance;
}

.brandSub {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.32em;
  color: var(--text-dim);
  margin-top: 8px;
  opacity: 0.72;
}

/* 键盘用户：跳到主内容 */
.bazi-skip-link {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 10000;
  padding: 10px 14px;
  border-radius: var(--surface-radius-sm);
  border: 1px solid var(--surface-border);
  background: var(--popover-bg);
  color: var(--text-main);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transform: translateY(-160%);
  transition: transform var(--motion-fast) ease;
}

.bazi-skip-link:focus,
.bazi-skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

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

/* 登录/门禁共用卡片气质 */
.auth-page {
  background: var(--bg-dark);
  background-image: var(--bg-gradient);
}

.auth-card {
  box-shadow: var(--shadow-md);
  border-color: var(--surface-border);
  border-radius: var(--surface-radius-lg);
  background: var(--panel-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.auth-msg--error,
.auth-msg:not(:empty) {
  color: var(--danger);
}

/* 主站会话校验加载 */
#index-user-gate-loader {
  font-family: var(--font-ui);
  letter-spacing: 0.12em;
  color: var(--text-dim);
  background: var(--bg-dark);
  background-image: var(--bg-gradient);
}

#index-user-gate-loader::after {
  content: "";
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  margin-left: 0.65em;
  border: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  vertical-align: -0.15em;
  animation: bazi-gate-spin 0.7s linear infinite;
}

@keyframes bazi-gate-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #index-user-gate-loader::after {
    animation: none;
    border-top-color: color-mix(in srgb, var(--accent) 35%, transparent);
  }
}

/* 读屏专用 */
.bazi-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 轻提示：小模块操作反馈，勿用 alert 打断 */
.bazi-toast {
  position: fixed;
  left: 50%;
  bottom: calc(28px + var(--safe-bottom, 0px));
  transform: translateX(-50%) translateY(12px);
  z-index: 2147483600;
  max-width: min(92vw, 360px);
  padding: 10px 16px;
  border-radius: var(--surface-radius-sm, 11px);
  border: 1px solid var(--surface-border);
  background: var(--popover-bg);
  color: var(--text-main);
  box-shadow: var(--shadow-md);
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: 0.02em;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-med, 0.22s) ease, transform var(--motion-med, 0.22s) ease;
}

.bazi-toast.isVisible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.bazi-toast[data-tone="ok"] {
  border-color: color-mix(in srgb, var(--success) 45%, var(--surface-border));
}

.bazi-toast[data-tone="err"] {
  border-color: color-mix(in srgb, var(--danger) 50%, var(--surface-border));
  color: var(--danger);
}

.hint[data-tone="err"],
.storePanelStatus[data-tone="err"] {
  color: var(--danger);
}

.hint[hidden]:not([data-tone]) {
  display: none;
}

.birth-wheel-foot {
  display: flex;
  justify-content: stretch;
  padding: 12px 14px calc(12px + var(--safe-bottom, 0px));
  border-top: 1px solid var(--line);
}

.birth-wheel-done-btn {
  width: 100%;
  min-height: var(--touch-min, 44px);
  border-radius: var(--surface-radius-sm);
  font-size: 15px;
  font-weight: 650;
}

/* 确认框须盖过库房溢出层(8300)等；specificity 压过后载入的 .modal */
.modal.bazi-confirm-modal {
  z-index: 2147483610;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  /* 轻量 alert：始终视口居中；勿继承 style_responsive_mobile 对大表单的左上对齐 */
  justify-content: center;
  align-items: center;
  overflow-y: visible;
}

.bazi-confirm-sheet {
  width: min(92vw, 360px);
  max-width: 360px;
  max-height: none;
  margin: 0;
  padding: 18px 16px 14px;
  border-radius: var(--surface-radius, 14px);
  border: 1px solid var(--surface-border);
  background: var(--popover-bg, var(--surface));
  box-shadow: var(--shadow-md);
}

.bazi-confirm-title {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--text-main);
  margin: 0 0 8px;
}

.bazi-confirm-msg {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-muted, var(--muted));
  white-space: pre-wrap;
}

.bazi-confirm-foot {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.bazi-confirm-btn {
  min-height: var(--btn-h, var(--touch-min, 44px));
  min-width: 88px;
  padding: 0 14px;
  border-radius: var(--btn-radius, var(--surface-radius-sm, 11px));
  border: 1px solid var(--btn-ghost-border);
  background: var(--btn-ghost-bg);
  color: var(--btn-ghost-fg-hover);
  font-size: var(--btn-font, 14px);
  font-weight: 650;
  cursor: pointer;
}

.bazi-confirm-btn--ok {
  border-color: var(--btn-primary-border);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
}

.bazi-confirm-btn--danger {
  border-color: color-mix(in srgb, var(--danger) 50%, var(--surface-border));
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--danger);
}

.bazi-confirm-btn:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .bazi-toast {
    transition: none;
  }
}