/* ============================================================
   theme.css — 主题层：深邃星空（近黑虚空 × 稀疏星云 × 星点）× 鎏金星盘 v4
   立场：拒绝迷信，认识自己 —— 传统文化的理性视角
   · 背景以近黑为主，紫/靛星云压到极低透明度，深邃感来自黑与星点，不靠蓝
   · 表面采用中性炭黑玻璃（不再泛蓝），仅以鎏金与冷月白点缀
   · 保留全部历史变量名（JS 行内样式 / 组件类契约不变）
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
    /* ---------- 近黑虚空梯度（中性，几乎无蓝相） ---------- */
    --ink-900: #030409;
    --ink-800: #07080D;   /* 主背景基底：近黑 */
    --ink-700: #0D0F17;   /* 卡片深底 */
    --ink-600: #161924;   /* 输入框/容器 */
    --ink-500: #232735;   /* 悬浮高亮 */
    --ink-line: rgba(190, 196, 214, 0.13);

    /* ---------- 鎏金梯度（取参考稿星盘金色） ---------- */
    --gold-100: #F7ECD0;
    --gold-200: #E8CC8C;
    --gold-300: #D8B568;
    --gold-400: #CBA44E;
    --gold-500: #96752F;
    --gold-600: #6B521F;

    /* ---------- 文字色（暖象牙 + 冷月灰） ---------- */
    --text-main: #ECE7DA;
    --text-sub:  #AEB7C6;
    --text-faint:#8A93A6;
    --text-on-gold: #2A1F06;
    --text-on-slate:#FFFFFF;

    /* ---------- 深空盘面（命盘格/专业细盘/大运流年） ---------- */
    --paper:       #0B0E16;
    --paper-alt:   #161B2A;
    --paper-warm:  #13140F;
    --paper-tag:   #0F1320;
    --paper-chip:  #1B2234;
    --paper-track: #070910;
    --paper-line:  #2E3A55;
    --paper-edge:  var(--gold-400);
    --paper-main:  #ECE7DA;
    --paper-sub:   #AEB7C6;
    --paper-faint: #939DB2;
    --paper-gold:  #E8CC8C;
    --paper-accent:#F0DC98;

    /* ---------- 语义色 ---------- */
    --cinnabar: #B5483C;
    --cinnabar-text: #F2B3A8;
    --celadon:  #88CEB2;
    --starlit:  #9DBCFF;

    /* ---------- 语义别名（JS 行内样式引用） ---------- */
    --primary: var(--gold-300);
    --danger:  var(--cinnabar-text);

    /* ---------- 五行色·浅底版（保留兼容） ---------- */
    --wx-mu-ink:   #276C3D;
    --wx-huo-ink:  #A32E22;
    --wx-tu-ink:   #7E5522;
    --wx-jin-ink:  #7C5B07;
    --wx-shui-ink: #234E73;
    /* ---------- 五行色·虚空深底版 ---------- */
    --wx-mu-glow:   #6FD49A;
    --wx-huo-glow:  #EF8A76;
    --wx-tu-glow:   #D9B078;
    --wx-jin-glow:  #ECC860;
    --wx-shui-glow: #8AB8F5;

    /* ---------- 排版 ---------- */
    --fs-2xs:  12px;
    --fs-3xs:  11px;
    --fs-xs:   13px;
    --fs-sm:   14px;
    --fs-md:   15px;
    --fs-base: 15px;
    --fs-lg:   16px;
    --fs-xl:   18px;
    --fs-2xl:  22px;
    --fs-3xl:  22px;
    --fs-4xl:  34px;

    --lh-none:  1;
    --lh-tight: 1.25;
    --lh-snug:  1.6;
    --lh-base:  1.75;
    --lh-loose: 2.05;

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semi:    600;
    --fw-bold:    700;

    --ls-tight: 0.5px;
    --ls-base:  1px;
    --ls-wide:  2px;
    --ls-title: 3px;
    --ls-hero:  5px;

    /* ---------- 尺寸 ---------- */
    --tabbar-h: 64px;
    --radius: 16px;
    --radius-sm: 10px;
    --radius-lg: 22px;

    /* ---------- 间距 ---------- */
    --space-2xs: 4px;
    --space-xs:  8px;
    --space-sm:  12px;
    --space-md:  16px;
    --space-lg:  20px;
    --space-xl:  24px;
    --card-pad:  var(--space-md);
    --card-gap:  var(--space-sm);
    --frame-line: rgba(203,164,78,0.28);

    /* ---------- 字体（系统衬线降级，不引外部字体——CSP style-src 'self'） ---------- */
    --font-serif: "Noto Serif SC", "Songti SC", "STSong", "STZhongsong", "SimSun", serif;
    --font-display: "Noto Serif SC", "Songti SC", "STSong", "STZhongsong", "SimSun", serif;

    /* ---------- 背景图系列（用户星盘图） ---------- */
    --img-starfield: url("../img/bg-starfield.jpg");
    --img-astrolabe: url("../img/bg-astrolabe.jpg?v=20250914");
    --img-banner:    url("../img/bg-banner.jpg");
    --img-vip:       url("../img/bg-vip.jpg");

    --cloud-deco: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 30'><path d='M5 23 C5 16 11 13.5 16 16.5 C16.5 9 26 6.5 30.5 12.5 C34 6.5 45 7.5 46.5 15 C53 13 59.5 17.5 58 23.5 C57.4 26 55 26.5 53 26.5 L10 26.5 C7 26.5 5 25 5 23 Z' fill='none' stroke='%23CBA44E' stroke-width='2' stroke-linejoin='round'/></svg>");

    /* ---------- 稀疏星云（只由 .bg-cosmos / overlay 绘制，body 保持纯黑避免叠加发蓝） ---------- */
    --bg-page:
        radial-gradient(120% 58% at 10% 2%,  rgba(92,74,158,0.08) 0%, rgba(92,74,158,0) 54%),
        radial-gradient(95% 52% at 92% 14%,  rgba(46,74,132,0.07) 0%, rgba(46,74,132,0) 58%),
        radial-gradient(125% 70% at 84% 92%, rgba(30,52,100,0.09) 0%, rgba(30,52,100,0) 62%),
        radial-gradient(80% 48% at 26% 84%,  rgba(203,164,78,0.03) 0%, rgba(203,164,78,0) 60%),
        radial-gradient(125% 100% at 50% 42%, rgba(0,0,0,0) 48%, rgba(0,0,0,0.62) 100%),
        linear-gradient(180deg, #07080F 0%, #04050A 52%, #020308 100%);
    --bg-galaxy: linear-gradient(124deg, transparent 42%,
        rgba(150,160,222,0.02) 48%, rgba(196,176,228,0.04) 50%, rgba(150,160,222,0.02) 52%, transparent 58%);

    /* ---------- 表面：中性炭黑玻璃（不泛蓝） ---------- */
    --bg-card: linear-gradient(162deg, rgba(31,33,45,0.55) 0%, rgba(14,15,23,0.74) 55%, rgba(8,9,15,0.84) 100%);
    --bg-item: linear-gradient(162deg, rgba(26,29,41,0.50) 0%, rgba(10,11,18,0.60) 100%);
    --bg-control: linear-gradient(180deg, #1A1D29, #10131C);

    --marble-noise:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='720' height='720'><filter id='v'><feTurbulence type='fractalNoise' baseFrequency='0.003 0.007' numOctaves='5' seed='17' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.62  0 0 0 0 0.72  0 0 0 0 0.92  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23v)'/></svg>");
    --marble-noise-size: 720px 720px;

    --bg-mask: rgba(2,3,8,0.66);
    --bg-mask-strong: rgba(2,3,8,0.84);

    --glow-gold: 0 0 12px rgba(203,164,78,0.35);
    --shadow-card: 0 10px 30px rgba(0,0,0,0.55), 0 0 0 1px rgba(203,164,78,0.05),
                   inset 0 1px 0 rgba(247,236,208,0.08);
}

html, body {
    width: 100%;
    min-height: 100%;
}

body {
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    color: var(--text-main);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    background-color: var(--ink-800);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    padding-bottom: 0;
    overflow-x: hidden;
}

/* 数字/日期等宽 */
.v, .stat-row .v, .band-cell__age, .band-cell__year, .pan-birth__time,
.dtp-col__item, .timeline__time, .info-row__value, .cs-cell__val {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ============================================================
   深邃星空层（DOM：.bg-cosmos + #stars + .meteor，全站固定）
   ============================================================ */
.bg-cosmos {
    position: fixed; inset: 0; z-index: 0;
    pointer-events: none; overflow: hidden;
    background: var(--bg-page);
}
.bg-cosmos::before { /* 斜贯银河 */
    content: ""; position: absolute; inset: -25%;
    background: var(--bg-galaxy);
    filter: blur(7px);
}
.bg-cosmos::after {
    content: ""; position: absolute; inset: 0; opacity: .45;
    background: radial-gradient(60% 40% at 72% 38%, rgba(120,140,210,0.04), transparent 70%);
}

/* 冷暖双层星点 + 十字芒星（节点由 app.js 生成，符合 CSP） */
#stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#stars span {
    position: absolute; border-radius: 50%;
    opacity: 0; animation: starTwinkle 4s ease-in-out infinite;
}
#stars .star-warm { background: var(--gold-200); box-shadow: 0 0 6px rgba(232,204,140,0.55); }
#stars .star-cool { background: #DCE6FF; box-shadow: 0 0 6px rgba(180,205,255,0.45); }
#stars .glint { box-shadow: 0 0 9px rgba(222,232,255,0.85); }
#stars .glint::before, #stars .glint::after {
    content: ""; position: absolute; left: 50%; top: 50%; background: rgba(222,232,255,0.5);
}
#stars .glint::before { width: 8px; height: 1px; transform: translate(-50%,-50%); }
#stars .glint::after  { width: 1px; height: 8px; transform: translate(-50%,-50%); }
@keyframes starTwinkle { 0%,100% { opacity: .08; } 50% { opacity: .9; } }

/* 流星（低频） */
.meteor {
    position: fixed; top: 8%; width: 130px; height: 1px; border-radius: 1px;
    z-index: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(255,255,255,0.8), transparent);
    opacity: 0; transform: rotate(20deg);
    animation: meteorShoot 16s linear infinite;
}
.meteor.m2 { top: 32%; animation-duration: 22s; animation-delay: 8s; }
@keyframes meteorShoot {
    0%   { left: 108%; opacity: 0; }
    2%   { opacity: .75; }
    11%  { left: -18%; opacity: 0; }
    100% { left: -18%; opacity: 0; }
}

/* 业务内容浮于星空之上 */
.bg-cosmos, #stars, .meteor { z-index: 0; }
.app-header, .app-view, .tab-bar, .overlay { position: relative; z-index: 1; }

/* ---------- 鎏金渐变文字 ---------- */
.gold-text {
    background: linear-gradient(180deg, var(--gold-100) 0%, var(--gold-200) 45%, var(--gold-400) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--gold-300);
    filter: drop-shadow(0 1px 6px rgba(203,164,78,0.30));
}

/* ---------- 迷你装饰图标 ---------- */
.mini-ico {
    width: 16px; height: 16px;
    flex: none;
    color: var(--gold-300);
    vertical-align: -3px;
}
.mini-ico.cloud { color: var(--gold-200); width: 20px; height: 10px; }

::-webkit-scrollbar { display: none; }
input, select, textarea, button { font-family: inherit; font-size: inherit; outline: none; }
input, select, textarea { color: var(--text-main); }
input::placeholder, textarea::placeholder { color: var(--text-faint); opacity: 1; }
select option { background: var(--ink-700); color: var(--text-main); }
a { color: inherit; text-decoration: none; }
ul, li { list-style: none; }

@media (prefers-reduced-motion: reduce) {
    #stars span, .meteor { animation: none; }
}