:root {
    --bg: #F9F9F7;
    --jade: #2f695e;
    --jade-light: #0d9488;
    --ink: #18181b;
    --muted: #71717a;
    --card: rgba(255,255,255,0.55);
    --card-border: rgba(255,255,255,0.65);
}
.font-serif-elegant { font-family: 'Cormorant Garamond', 'Noto Serif SC', Georgia, serif; }
.font-tech { font-family: 'JetBrains Mono', 'Courier New', monospace; }
.ink-jade-text {
    background: linear-gradient(135deg, #18181b 0%, #475569 50%, #2f695e 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.bg-grid-pattern {
    background-image: linear-gradient(to right,rgba(0,0,0,0.03) 1px,transparent 1px),
                      linear-gradient(to bottom,rgba(0,0,0,0.03) 1px,transparent 1px);
    background-size: 40px 40px;
}
.bg-noise-light {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}
.yang-dot { width:10px;height:10px;border-radius:50%;border:1.5px solid #0d9488;background:rgba(255,255,255,0.85);box-shadow:0 0 6px rgba(13,148,136,0.25);display:inline-block;flex-shrink:0; }
.yin-dot  { width:10px;height:10px;border-radius:50%;border:1.5px solid #3f3f46;background:#3f3f46;box-shadow:0 0 6px rgba(63,63,70,0.25);display:inline-block;flex-shrink:0; }
@keyframes orbit { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes fade-in-up { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse-teal { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.85)} }
@keyframes descend-line { 0%{opacity:0;transform:scaleY(0);transform-origin:top} 50%{opacity:1} 100%{opacity:0;transform:scaleY(1);transform-origin:top} }
@keyframes spin-slow { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes page-in { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes pillarRise { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
.hero-badge{animation:fade-in-up 1s ease 0.3s both}
.hero-title{animation:fade-in-up 1s ease 0.55s both}
.hero-sub{animation:fade-in-up 1s ease 0.75s both}
.hero-tagline{animation:fade-in-up 1s ease 0.9s both}
.hero-scroll{animation:fade-in-up 1s ease 1.1s both}
.reveal { opacity:0; transform:translateY(28px); transition:opacity 0.8s ease,transform 0.8s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.feature-card { transition:transform 0.3s ease,background 0.3s ease,box-shadow 0.3s ease; }
.feature-card:hover { transform:translateY(-5px);background:rgba(255,255,255,0.72)!important;box-shadow:0 12px 32px rgba(47,105,94,0.08); }
.nav-link { position:relative; transition:color 0.2s; }
.nav-link::after { content:'';position:absolute;bottom:-3px;left:0;width:0;height:1px;background:#2f695e;transition:width 0.3s ease; }
.nav-link:hover::after { width:100%; }
.nav-link.active-nav { color: #2f695e !important; }
.nav-link.active-nav::after { width: 100%; }
#resonator-instruction, #resonator-subtext { transition:opacity 0.6s ease,filter 0.6s ease; }
html { scroll-behavior: smooth; }
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(47,105,94,0.25);border-radius:2px; }

/* ── Tool page styles ── */
.tool-page { animation: page-in 0.5s ease both; }
.glass-card {
    background: rgba(255,255,255,0.58);
    border: 1px solid rgba(255,255,255,0.7);
    backdrop-filter: blur(12px);
    border-radius: 18px;
}
.glass-card-dark {
    background: rgba(24,24,27,0.04);
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 14px;
}
.field-label { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:#71717a; margin-bottom:6px; display:block; }
.field-input {
    width:100%; padding:10px 14px;
    background:rgba(255,255,255,0.7);
    border:1px solid rgba(0,0,0,0.1);
    border-radius:10px;
    font-size:14px; color:#18181b;
    font-family:inherit; outline:none;
    transition:border-color 0.2s, box-shadow 0.2s;
}
.field-input:focus { border-color:#2f695e; box-shadow:0 0 0 3px rgba(47,105,94,0.08); }
.field-input::placeholder { color:#a1a1aa; }
.btn-jade {
    background: linear-gradient(135deg, #2f695e, #0d9488);
    color: white; border: none;
    padding: 11px 28px; border-radius: 10px;
    font-family:'JetBrains Mono',monospace;
    font-size:12px; letter-spacing:0.08em;
    cursor:pointer; transition:opacity 0.2s,transform 0.2s;
}
.btn-jade:hover { opacity:0.88; transform:translateY(-1px); }
.btn-jade:disabled { opacity:0.4; cursor:not-allowed; transform:none; }
.btn-ghost {
    background: transparent;
    color: #2f695e; border: 1px solid rgba(47,105,94,0.4);
    padding: 10px 22px; border-radius: 10px;
    font-family:'JetBrains Mono',monospace;
    font-size:11px; letter-spacing:0.06em;
    cursor:pointer; transition:all 0.2s;
}
.btn-ghost:hover { background:rgba(47,105,94,0.06); border-color:#2f695e; }
.btn-debug {
    background: rgba(234,179,8,0.12);
    color: #92400e; border: 1px solid rgba(234,179,8,0.3);
    padding: 8px 18px; border-radius: 8px;
    font-family:'JetBrains Mono',monospace; font-size:10px;
    letter-spacing:0.06em; cursor:pointer; transition:all 0.2s;
}
.btn-debug:hover { background:rgba(234,179,8,0.2); }

/* ── 九宫格 ── */
.qm-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; max-width:480px; margin:0 auto; }
.qm-cell {
    background:rgba(255,255,255,0.55); border:1.5px solid rgba(255,255,255,0.7);
    border-radius:10px; padding:6px; position:relative;
    backdrop-filter:blur(8px); aspect-ratio:1;
}
.qm-cell.center { opacity:0.5; }
.qm-cell-grid { display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:1fr 1fr 1fr; gap:1px; width:100%; height:100%; }
.qm-ci { display:flex;align-items:center;justify-content:center;font-family:'Noto Serif SC','STKaiti',serif;font-size:14px;line-height:1; }
.qm-gong { position:absolute;top:4px;left:6px;font-family:'JetBrains Mono',monospace;font-size:9px;color:rgba(113,113,122,0.5); }
.qm-marks { position:absolute;top:3px;right:5px;display:flex;gap:2px; }
.mark-kong { font-size:9px;background:rgba(0,0,0,0.06);color:#71717a;padding:1px 4px;border-radius:3px; }
.mark-yima { font-size:9px;background:rgba(232,93,93,0.1);color:#ef4444;padding:1px 4px;border-radius:3px; }
.c-water{color:#5EEADB!important} .c-wood{color:#6BCB77!important} .c-fire{color:#E85D5D!important}
.c-earth{color:#C9A050!important} .c-metal{color:#b0a000!important}
.bd-water{border-color:rgba(94,234,219,0.35)!important;background:rgba(94,234,219,0.05)!important}
.bd-wood{border-color:rgba(107,203,119,0.35)!important;background:rgba(107,203,119,0.05)!important}
.bd-fire{border-color:rgba(232,93,93,0.35)!important;background:rgba(232,93,93,0.05)!important}
.bd-earth{border-color:rgba(201,160,80,0.35)!important;background:rgba(201,160,80,0.05)!important}
.bd-metal{border-color:rgba(176,160,0,0.35)!important;background:rgba(176,160,0,0.05)!important}

/* ── BaZi table ── */
.bazi-table { width:100%;max-width:380px;margin:0 auto;border-collapse:collapse;text-align:center; }
.bazi-table th { font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.1em;color:#71717a;padding:6px 4px;font-weight:400; }
.bazi-table td { padding:14px 8px;border:1px solid rgba(0,0,0,0.08);background:rgba(255,255,255,0.6);font-family:'Noto Serif SC',serif;font-size:26px;font-weight:600; }

/* ── XLR hexagon ── */
.xlr-hex-wrap { position:relative; width:320px; height:320px; margin:0 auto 24px; }
.xlr-hex-node {
    position:absolute; width:80px; height:80px; border-radius:50%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    transform:translate(-50%,-50%); transition:all 0.4s ease;
    background:rgba(255,255,255,0.55); border:1.5px solid rgba(255,255,255,0.7);
    backdrop-filter:blur(8px); cursor:default; z-index:1;
}
.xlr-hex-node.highlight {
    border-color:#2f695e!important; background:rgba(47,105,94,0.12)!important;
    box-shadow:0 0 24px rgba(47,105,94,0.25)!important; transform:translate(-50%,-50%) scale(1.12)!important; z-index:3!important;
}
.xlr-hex-node .xlr-cn { font-family:'Noto Serif SC',serif; font-size:16px; font-weight:600; color:#3f3f46; }
.xlr-hex-node.highlight .xlr-cn { color:#2f695e; font-size:18px; }
.xlr-hex-node .xlr-en { font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:0.1em; text-transform:uppercase; color:#a1a1aa; margin-top:2px; }

/* ── Reading ── */
.reading-body { font-size:15px; color:#374151; line-height:2; white-space:pre-wrap; }
.reading-section-title {
    font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.2em;
    text-transform:uppercase; color:#2f695e; margin-bottom:12px; padding-bottom:8px;
    border-bottom:1px solid rgba(47,105,94,0.15);
}
.loading-dots { display:inline-flex; gap:5px; align-items:center; }
.loading-dots span { width:6px;height:6px;border-radius:50%;background:#0d9488;animation:pulse-teal 1.2s ease infinite; }
.loading-dots span:nth-child(2){animation-delay:0.2s}
.loading-dots span:nth-child(3){animation-delay:0.4s}

/* ── Auth modal ── */
.modal-overlay { position:fixed;inset:0;background:rgba(249,249,247,0.92);backdrop-filter:blur(16px);z-index:99999;display:flex;align-items:center;justify-content:center; }
.modal-box { background:rgba(255,255,255,0.9);border:1px solid rgba(0,0,0,0.08);border-radius:24px;padding:40px 36px;width:92%;max-width:440px;box-shadow:0 24px 80px rgba(0,0,0,0.1);position:relative; }

/* ── Membership tiers ── */
.tier-card { background:rgba(255,255,255,0.55);border:1.5px solid rgba(255,255,255,0.7);border-radius:18px;padding:16px 20px;transition:all 0.3s;cursor:pointer;min-height: 540px;display: flex;flex-direction: column;justify-content: space-between;}
.tier-card .font-serif-elegant.text-3xl {font-size: 1.5rem;margin-bottom: 0px;text-align: center;}
.tier-card ul {margin-bottom: 12px; padding-left: 0;list-style: none;}
.tier-card:hover { transform:translateY(-4px);box-shadow:0 16px 40px rgba(47,105,94,0.1);border-color:rgba(47,105,94,0.3); }
.tier-card.featured { border-color: #2f695e; background: rgba(255,255,255,0.55); box-shadow: 0 0 30px rgba(47,105,94,0.3), 0 0 60px rgba(47,105,94,0.1);}

/* ── Profile sidebar ── */
.pd-overlay { position:fixed;inset:0;background:rgba(249,249,247,0.6);backdrop-filter:blur(8px);z-index:50000;display:none;justify-content:flex-end; }
.pd-overlay.show { display:flex; }
.pd-panel { width:100%;max-width:420px;height:100%;background:rgba(255,255,255,0.96);border-left:1px solid rgba(0,0,0,0.07);overflow-y:auto;padding:28px 24px 48px;animation:pdSlide 0.3s ease; }
@keyframes pdSlide { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }

/* ── Paywall modal ── */
.paywall-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.4);backdrop-filter:blur(6px);z-index:99990;display:none;align-items:center;justify-content:center; }
.paywall-overlay.show { display:flex; }
.paywall-box { background:rgba(255,255,255,0.97);border-radius:22px;padding:36px 30px;width:90%;max-width:400px;text-align:center;position:relative; }

/* ── Detail modal ── */
.detail-overlay { position:fixed;inset:0;background:rgba(249,249,247,0.92);backdrop-filter:blur(16px);z-index:60000;display:none;align-items:center;justify-content:center; }
.detail-overlay.show { display:flex; }
.detail-box { background:rgba(255,255,255,0.96);border:1px solid rgba(0,0,0,0.08);border-radius:20px;padding:32px 28px;width:90%;max-width:520px;max-height:80vh;overflow-y:auto;position:relative; }

/* ── Payment confirm modal ── */
.payment-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.45);backdrop-filter:blur(8px);z-index:99995;display:none;align-items:center;justify-content:center; }
.payment-overlay.show { display:flex; }
.payment-box { background:rgba(255,255,255,0.97);border-radius:22px;padding:36px 30px;width:90%;max-width:420px;text-align:center;position:relative; }