/* ========== Design Tokens (8pt grid) ========== */


        :root {
            --bg: #050507;
            --bg-surface: oklch(12% 0.015 260);
            --bg-elevated: oklch(16% 0.01 260);
            --gold: oklch(68% 0.08 85);
            --gold-hover: oklch(78% 0.1 85);
            --gold-subtle: oklch(75% 0.04 85);
            --text: oklch(88% 0.01 95);
            --text-secondary: oklch(65% 0.005 95);
            --text-muted: oklch(42% 0.005 95);
            --accent: oklch(50% 0.05 240);
            --border-subtle: oklch(100% 0 0 / 0.06);
            --border-gold: oklch(68% 0.08 85 / 0.15);
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

            /* legacy aliases for internal compatibility */
            --card: oklch(12% 0.015 260);
            --card-2: oklch(16% 0.01 260);
            --text-2: oklch(65% 0.005 95);
            --text-3: oklch(42% 0.005 95);
            --gold-soft: oklch(75% 0.04 85 / 0.25);
            --line: oklch(100% 0 0 / 0.06);
            --s1: 4px;
            --s2: 8px;
            --s3: 12px;
            --s4: 16px;
            --s5: 24px;
            --s6: 32px;
            --s7: 48px;
            --s8: 64px;
            --s9: 96px;
            --r1: 8px;
            --r2: 12px;
            --r3: 16px;
            --r4: 24px;
            --shadow-soft: 0 10px 30px rgba(0,0,0,0.25);
            --shadow-deep: 0 20px 60px rgba(0,0,0,0.45);
            --ease: cubic-bezier(0.22, 1, 0.36, 1);
            --t1: 200ms;
            --t2: 350ms;
            --t3: 600ms;
        }


        * { margin:0; padding:0; box-sizing:border-box }


        html { overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
        body { margin: 0; background: #050507; color: var(--text); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Noto Serif SC", sans-serif; overflow-x: hidden; -webkit-font-smoothing: antialiased; }


        .bg-video-wrapper { position:fixed; top:0; left:0; width:100%; height:100%; z-index:0; overflow:hidden }


        .bg-video-wrapper video { position:absolute; width:100%; height:100%; object-fit:cover; background:radial-gradient(ellipse at center, var(--bg-surface), var(--bg)) }


        .bg-video-overlay { position:absolute; inset:0; background:linear-gradient(180deg, oklch(6% 0.01 260 / 0.65), oklch(6% 0.01 260 / 0.88)); z-index:1 }


        .navbar { position:fixed; top:0; left:0; width:100%; z-index:1000; padding: var(--s4) var(--s6); display:flex; justify-content:space-between; align-items:center; background:transparent; backdrop-filter:blur(0px); border-bottom:1px solid transparent; transition:background 0.3s, backdrop-filter 0.3s, border-color 0.3s; }


        .navbar.scrolled { background:oklch(12% 0.015 260 / 0.85); backdrop-filter:blur(20px); }


        .nav-brand { font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Noto Serif SC", sans-serif; font-size:1.4rem; color:var(--gold); letter-spacing:2px; cursor:pointer }


        .nav-links { display:flex; gap:var(--s5); align-items:center }


        .nav-links a { font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Noto Serif SC", sans-serif; color:var(--text-2); font-size:15px; letter-spacing:1px; cursor:pointer; transition:color 0.2s; }


        .nav-links a:hover,.nav-links a.active { color:var(--gold) }


        .btn-login { background: transparent; border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; min-height: 44px; transition: all 0.3s var(--ease-out); }


        .btn-login:hover { background: var(--gold); color: var(--bg); }


        .btn-logout { background: transparent; border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; min-height: 44px; transition: all 0.3s var(--ease-out); font-size:0.8rem; cursor:pointer; display:none; }


        .user-greeting { font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Noto Serif SC", sans-serif; color:var(--gold); font-size:0.85rem; display:none; margin-right:10px }


        .lang-switch { position:relative; margin-left:5px }


        .lang-btn { background: transparent; border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; min-height: 44px; transition: all 0.3s var(--ease-out); cursor:pointer; font-size:0.8rem; display:flex; align-items:center; gap:5px; }


        .lang-dropdown { position:absolute; top:100%; right:0; background:oklch(6% 0.01 260 / 0.95); backdrop-filter:blur(20px); border:1px solid oklch(70% 0.03 270 / 0.2); border-radius:12px; padding:8px 0; min-width:130px; display:none; z-index:1001 }


        .lang-dropdown.show { display:block }


        .lang-dropdown div { padding:8px 16px; cursor:pointer; font-size:0.8rem; color:var(--text-2); transition:all var(--duration-fast) var(--ease-standard) }


        .lang-dropdown div:hover { color:var(--gold); background:oklch(45% 0.05 260 / 0.1) }


        .lang-dropdown div.active { color:var(--gold) }


        .hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; z-index:1001 }


        .hamburger span { width:22px; height:2px; background:var(--gold); border-radius:2px }


        @media(max-width:768px){


            .nav-links { position:fixed; top:0; right:-100%; width:70%; height:100vh; background:oklch(6% 0.01 260 / 0.95); backdrop-filter:blur(30px); flex-direction:column; justify-content:center; gap:25px; transition:right 0.4s; z-index:1000 }


            .nav-links.open { right:0 } .hamburger { display:flex } .nav-links a { font-size:1.1rem }


        }


        .page-view { position:relative; z-index:2; min-height:100vh; padding-top:80px; display:none }


        .page-view.active { display:block }


        .hero-section { height:100vh; display:flex; align-items:center; justify-content:center; text-align:center }


        .hero-content { z-index:3; padding:var(--s5) }


        .hero-symbol {
    font-size: 48px;
    margin-bottom: var(--s2);
    transform: translateY(0);
}
@media (max-width: 768px) {
    .hero-symbol {
        transform: translateY(-20px);
        margin-bottom: var(--s1);
    }
    .hero-symbol .icon {
        width: 48px ;
        height: 48px ;
    }
}

    .hero-symbol .icon {
        width: 36px ;
        height: 36px ;
    }


        .hero-content h1 { font-size: clamp(32px, 6vw, 52px); font-weight: 300; letter-spacing: 2px; color: var(--text); text-shadow: 0 0 60px oklch(68% 0.08 85 / 0.1); line-height: 1.2; }


        .hero-content h2 { font-size:1.4rem; font-weight:300; color:var(--gold); margin-top:var(--s4); letter-spacing:6px }


        .hero-content p { margin-top:var(--s4); font-size:1.125rem; letter-spacing:2px; color:var(--text-2) }


        .hero-start-btn { background: transparent; border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; min-height: 44px; transition: all 0.3s var(--ease-out); font-size:1.125rem; cursor:pointer; }


        .hero-start-btn:hover { background: var(--gold); color: var(--bg); transform:translateY(-2px); }


        .hero-scroll { position:absolute; bottom:40px; left:50%; transform:translateX(-50%); color:var(--gold); font-size:24px; z-index:3; animation:floatArrow 2.5s infinite }


        @keyframes floatArrow{0%,100%{transform:translate(-50%,0); opacity:0.5}50%{transform:translate(-50%,12px); opacity:1}}

        .result-actions-secondary button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 20px oklch(68% 0.08 85 / 0.15);
        }

        .section-block { max-width:1100px; margin:0 auto; padding: var(--s6) var(--s4) }

        .section-title { font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Noto Serif SC", sans-serif; font-size:2.3rem; color:var(--gold); text-align:center; letter-spacing:4px; margin-bottom:var(--s6); font-weight:300 }
.hero-badge {
            display: inline-block;
            padding: 4px 16px;
            border-radius: 999px;
            background: oklch(70% 0.03 270 / 0.08);
            color: var(--gold);
            font-size: 11px;
            letter-spacing: 2px;
            margin-bottom: var(--s3);
            border: 1px solid oklch(70% 0.03 270 / 0.1);
        }
        .hero-desc {
            font-size: 16px;
            color: var(--text-2);
            margin-top: var(--s2);
            letter-spacing: 4px;
        }
        .hero-hint {
            font-size: 12px;
            color: var(--text-3);
            margin-top: var(--s5);
            letter-spacing: 1px;
        }

        .card { min-width:220px; scroll-snap-align:start; background:var(--card); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:var(--r3); padding:var(--s5) var(--s4); text-align:center; cursor:pointer; transition: all var(--t3) var(--ease); flex-shrink:0; }

        .brand-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: var(--s5);
            margin-top: var(--s4);
        }
/* ===== 定制图标系统 ===== */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    flex-shrink: 0;
}
.icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}
.icon-sm { width: 1em; height: 1em; }
.icon-md { width: 1.4em; height: 1.4em; }
.icon-lg { width: 2rem; height: 2rem; }
.icon-xl { width: 3rem; height: 3rem; }
.icon-gold {
    color: var(--gold);
    filter: drop-shadow(0 0 6px oklch(68% 0.08 85 / 0.2));
}
.icon-gold:hover {
    filter: drop-shadow(0 0 12px oklch(68% 0.08 85 / 0.4));
}

        .footer-left {
            text-align: left;
        }
        .footer-right {
            text-align: right;
        }
                .heart-beat {
            display: inline-block;
            margin-left: 8px;
        }


        .tarot-screen { position:relative; z-index:2; display:none; min-height:80vh; padding:20px; overflow-x:hidden; touch-action:pan-y; overscroll-behavior-x:none }


        .tarot-screen.active { display:flex; flex-direction:column; align-items:center; justify-content:center }


        #cardPickScreen { min-height: 65vh; padding: 20px; overflow-x: visible; touch-action: pan-y; }


        #ritualScreen { text-align:center }


        .ritual-moon { font-size:80px; color:var(--gold); margin-bottom:20px; animation:floatMoon 3s ease-in-out infinite }


        @keyframes floatMoon{0%,100%{opacity:0.6;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}


        .tarot-btn { background: transparent; border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; min-height: 44px; transition: all 0.3s var(--ease-out); width:280px; padding:16px; font-size:18px; font-weight:600; cursor:pointer; letter-spacing:2px; margin-top:15px }


        .booking-submit, #bookingForm button[type="submit"], #bookingForm button { display:block; margin:24px auto; padding:14px 48px; background: transparent; border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; min-height: 44px; transition: all 0.3s var(--ease-out); font-weight:700; font-size:16px; letter-spacing:0.5px; cursor:pointer; }


        .booking-submit:hover, #bookingForm button:hover { background: var(--gold); color: var(--bg); transform:translateY(-2px); }


        @keyframes goldShimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}


        .tarot-input { width:280px; padding:14px 18px; border-radius:999px; border:1px solid oklch(70% 0.03 270 / 0.4); background:oklch(100% 0 0 / 0.05); color:var(--text); font-size:15px; text-align:center; outline:none; margin-bottom:10px }


        .reading-type {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 16px;
}
.reading-type button {
    background: transparent; border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; min-height: 44px; transition: all 0.3s var(--ease-out);
    padding: 6px 12px;
    font-size: .75rem;
    cursor: pointer;
    flex-shrink: 0;
}
.reading-type button.active {
    background: var(--gold);
    color: var(--bg);
    border-color: var(--gold);
}

    .reading-type {
        gap: 4px;
    }


        .spread-select { width:280px; margin:0 auto 20px }


        .spread-select select { width:100%; padding:12px; background:oklch(100% 0 0 / 0.05); border:1px solid oklch(70% 0.03 270 / 0.2); border-radius:10px; color:var(--text); font-size:1rem; outline:none }/* 点击选中状态（覆盖 active） */


        
.hover-glow:hover {
            filter: brightness(1.15);
            text-shadow: 0 0 20px oklch(70% 0.03 270 / 0.3);
        }
    
/* ===== 分享卡片样式（与设计稿一致） ===== */
.share-card-container {
    background: linear-gradient(145deg, var(--bg), var(--bg-surface));
    border: 1px solid oklch(68% 0.08 85 / 0.3);
    border-radius: 20px;
    padding: 30px 24px 20px;
    max-width: 400px;
    margin: 0 auto;
    color: var(--text);
    font-family: 'Noto Serif SC', -apple-system, sans-serif;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    text-align: center;
    position: relative;
    overflow: hidden;
}
/* 装饰性光晕 */
.share-card-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 30%, oklch(68% 0.08 85 / 0.04), transparent);
    pointer-events: none;
}
.share-header {
    font-size: 22px;
    letter-spacing: 6px;
    color: var(--gold);
    font-weight: 300;
    margin-bottom: 4px;
    position: relative;
}
.share-date {
    font-size: 13px;
    color: oklch(100% 0 0 / 0.4);
    letter-spacing: 1px;
    margin-bottom: 2px;
}
.share-subtitle {
    font-size: 13px;
    color: oklch(100% 0 0 / 0.5);
    letter-spacing: 3px;
    margin-bottom: 20px;
    border-bottom: 1px solid oklch(68% 0.08 85 / 0.15);
    padding-bottom: 14px;
}
.share-cards {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}
.share-card-item {
    background: oklch(100% 0 0 / 0.04);
    border: 1px solid oklch(68% 0.08 85 / 0.15);
    border-radius: 12px;
    padding: 10px 8px;
    min-width: 70px;
}
.share-card-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 1px;
}
.share-card-position {
    font-size: 12px;
    color: oklch(100% 0 0 / 0.4);
    margin-top: 2px;
}
.share-oracle {
    background: oklch(68% 0.08 85 / 0.06);
    border-radius: 12px;
    padding: 14px 12px;
    margin-bottom: 20px;
}
.share-oracle-label {
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--gold);
    margin-bottom: 4px;
}
.share-oracle-text {
    font-size: 15px;
    line-height: 1.6;
    color: oklch(100% 0 0 / 0.85);
    font-style: italic;
}
.share-energy {
    margin-bottom: 16px;
}
.share-energy-label {
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--gold);
    margin-bottom: 10px;
}
.share-energy-bars {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.bar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
.bar-label {
    width: 20px;
    color: oklch(100% 0 0 / 0.7);
    text-align: right;
}
.bar-value {
    width: 34px;
    text-align: right;
    color: oklch(100% 0 0 / 0.5);
}
.bar-track {
    flex: 1;
    height: 6px;
    background: var(--glass-border);
    border-radius: 4px;
    overflow: hidden;
}
.bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s ease;
}
.share-astro {
    background: oklch(70% 0.03 270 / 0.06);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 16px;
}
.share-astro-label {
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--gold);
    margin-bottom: 2px;
}
.share-astro-dominant {
    font-size: 18px;
    font-weight: 500;
    color: var(--gold-hover);
}
.share-astro-tag {
    font-size: 12px;
    color: oklch(100% 0 0 / 0.4);
    margin-top: 2px;
}
.share-cta {
    font-size: 12px;
    color: var(--gold);
    letter-spacing: 1px;
    border-top: 1px solid oklch(68% 0.08 85 / 0.15);
    padding-top: 14px;
    margin-bottom: 10px;
}
.share-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.share-url {
    font-size: 14px;
    color: oklch(100% 0 0 / 0.3);
    letter-spacing: 2px;
}
.share-qr {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-xs);
    background: white;
    padding: 4px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.share-qr-text {
    font-size: 10px;
    color: oklch(100% 0 0 / 0.3);
    letter-spacing: 1px;
}/* ===== 付费系统 ===== */
.paywall-overlay {
    position: fixed; inset: 0; z-index: 3000;
    background: oklch(6% 0.01 260 / 0.92); backdrop-filter: blur(16px);
    display: none; align-items: center; justify-content: center; padding: var(--s5);
}
.paywall-overlay.open { display: flex; }
.paywall-card {
    background: var(--card); border: 1px solid var(--gold-soft); border-radius: var(--r4);
    padding: var(--s7) var(--s6); max-width: 420px; width: 100%; text-align: center;
    position: relative; animation: paywallFadeIn 0.4s var(--ease);
}
@keyframes paywallFadeIn {
    from { opacity: 0; transform: scale(0.95) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.paywall-card .paywall-close { position: absolute; top: var(--s3); right: var(--s4); background: none; border: none; color: var(--text-3); font-size: 22px; cursor: pointer; transition: all var(--t1) var(--ease); }
.paywall-card .paywall-close:hover { color: var(--text); }
.paywall-card .paywall-badge { display: inline-block; padding: 4px 16px; border-radius: var(--r2); background: var(--gold-soft); color: var(--gold); font-size: 11px; letter-spacing: 2px; margin-bottom: var(--s3); }
.paywall-card .paywall-title { font-size: 24px; font-weight: 600; color: var(--text); margin-bottom: var(--s2); }
.paywall-card .paywall-desc { font-size: 14px; color: var(--text-2); line-height: 1.6; margin-bottom: var(--s5); }
.paywall-card .paywall-plans { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s5); }
.paywall-card .paywall-plan { display: flex; justify-content: space-between; align-items: center; padding: var(--s3) var(--s4); background: oklch(100% 0 0 / 0.02); border: 1px solid var(--line); border-radius: var(--r2); cursor: pointer; transition: all var(--t1) var(--ease); }
.paywall-card .paywall-plan:hover { border-color: var(--gold-soft); background: oklch(68% 0.08 85 / 0.04); }
.paywall-card .paywall-plan.recommended { border-color: var(--gold); background: oklch(68% 0.08 85 / 0.06); }
.paywall-card .paywall-plan .plan-info { text-align: left; }
.paywall-card .paywall-plan .plan-name { font-size: 14px; font-weight: 600; color: var(--text); }
.paywall-card .paywall-plan .plan-desc { font-size: 12px; color: var(--text-3); }
.paywall-card .paywall-plan .plan-price { font-size: 20px; font-weight: 700; color: var(--gold); }
.paywall-card .paywall-plan .plan-price small { font-size: 12px; font-weight: 400; color: var(--text-3); }
.paywall-card .paywall-footer { font-size: 12px; color: var(--text-3); margin-top: var(--s3); }
.paywall-card .paywall-footer a { color: var(--gold); text-decoration: underline; cursor: pointer; }
.paywall-trigger { margin: var(--s4) 0; padding: var(--s4); background: linear-gradient(135deg, oklch(68% 0.08 85 / 0.04), oklch(68% 0.08 85 / 0.01)); border: 1px dashed var(--gold-soft); border-radius: var(--r3); text-align: center; }
.paywall-trigger .trigger-title { font-size: 14px; color: var(--gold); margin-bottom: var(--s2); }
.paywall-trigger .trigger-desc { font-size: 13px; color: var(--text-2); margin-bottom: var(--s3); }
.paywall-trigger .trigger-btn { background: transparent; border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; min-height: 44px; transition: all 0.3s var(--ease-out); font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; }
.paywall-trigger .trigger-btn:hover { background: var(--gold); color: var(--bg); transform:translateY(-2px); box-shadow:0 4px 20px oklch(68% 0.08 85 / 0.2); }
.usage-bar { display: flex; align-items: center; gap: var(--s3); margin: var(--s2) 0; padding: var(--s2) var(--s3); background: oklch(100% 0 0 / 0.02); border-radius: var(--r2); border: 1px solid var(--line); }
.usage-bar .usage-text { font-size: 12px; color: var(--text-3); }
.usage-bar .usage-dots { display: flex; gap: 4px; }
.usage-bar .usage-dots .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: all var(--t1) var(--ease); }
.usage-bar .usage-dots .dot.used { background: var(--gold); }
.usage-bar .usage-dots .dot.current { background: var(--gold); box-shadow: 0 0 12px oklch(68% 0.08 85 / 0.3); }




/* section-block moved to critical */

/* section-title moved to critical */


        .moon-phase-box { background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:12px; padding:var(--s5); text-align:center; margin-bottom:var(--s5); transition:all var(--t3) var(--ease); }

    .moon-phase-box .moon-phase-icon {
        font-size: 2rem;
    }
    .moon-phase-box h3 {
        font-size: 1.125rem;
    }
    .moon-phase-box p {
        font-size: 0.875rem;
    }


        .moon-phase-box:hover { border-color:var(--border-gold); }


        .moon-phase-icon { font-size:2.5rem; margin-bottom:var(--s2) }


        .cards-scroll { display:flex; gap:var(--s4); overflow-x:auto; padding-bottom:var(--s4); scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch }


        .cards-scroll::-webkit-scrollbar { height:4px }


        .cards-scroll::-webkit-scrollbar-thumb { background:oklch(70% 0.03 270 / 0.3); border-radius:4px }

/* card moved to critical */


        .card:hover { border-color:var(--gold); transform:translateY(-6px) scale(1.02); box-shadow:var(--shadow-deep) }


        .card-icon { font-size:2rem; margin-bottom:var(--s3) }


        .card-title { font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Noto Serif SC", sans-serif; font-size:1.4rem; color:var(--gold); letter-spacing:2px; margin-bottom:var(--s1) }


        .card-desc { font-size:0.9375rem; color:var(--text-2) }


        .services-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:var(--s5) }


        .service-card { background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:12px; padding:var(--s5); text-align:center; transition:all var(--t3) var(--ease); }

    .service-card .service-name {
        font-size: 1.125rem;
    }
    .service-card .service-desc {
        font-size: 0.875rem;
        -webkit-line-clamp: 3;
    }
    .service-card .service-price {
        font-size: 1.4rem;
    }
    .service-card .service-btn { background: transparent; border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; min-height: 44px; transition: all 0.3s var(--ease-out); font-family:inherit; cursor:pointer; }


        .service-card:hover { border-color:var(--border-gold); transform:translateY(-4px); }


        .service-name { font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Noto Serif SC", sans-serif; font-size:1.4rem; color:var(--gold); margin-bottom:var(--s2) }


        .service-desc { font-size:0.9375rem; color:var(--text-2); margin-bottom:var(--s3); line-height:1.5; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical }


        .service-price { font-size:1.7rem; color:var(--gold); font-weight:600; margin-bottom:var(--s3) }


        .service-btn { background: transparent; border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; min-height: 44px; transition: all 0.3s var(--ease-out); font-family:inherit; cursor:pointer; }


        .service-btn:hover { background: var(--gold); color: var(--bg); }


        .booking-form { background:var(--card); backdrop-filter:blur(12px); border:1px solid var(--line); border-radius:var(--r3); padding:var(--s6); max-width:600px; margin:0 auto }

    .booking-form select,
    .booking-form input,
    .booking-form textarea {
        padding: 10px var(--s3);
        font-size: 0.9375rem;
        margin-bottom: var(--s3);
    }
    .booking-form .tip-box {
        font-size: 0.875rem;
        padding: var(--s2);
    }
    .booking-form button {
        padding: 10px var(--s5);
        font-size: 0.9375rem;
        width: 100%;
    }


        .booking-form select,.booking-form input,.booking-form textarea { width:100%; padding:var(--s3); margin-bottom:var(--s4); background:oklch(100% 0 0 / 0.05); border:1px solid var(--line); border-radius:var(--r1); color:var(--text); font-size:1.125rem; outline:none; font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Noto Serif SC", sans-serif; }


        .booking-form select option { background:var(--bg-surface); color:var(--text) }


        .booking-form select:focus,.booking-form input:focus,.booking-form textarea:focus { border-color:var(--gold) }


        .booking-form textarea { resize:vertical; min-height:100px }


        .booking-form .required { color:#d46a6a }


        .tip-box { background:oklch(45% 0.05 260 / 0.1); border:1px solid oklch(70% 0.03 270 / 0.2); border-radius:var(--r1); padding:var(--s3); margin-bottom:var(--s4); font-size:0.9375rem; color:var(--gold) }


        .consult-box { background:var(--card); backdrop-filter:blur(12px); border:1px solid var(--line); border-radius:var(--r3); padding:var(--s6); text-align:center }


        .consult-box p { margin-bottom:var(--s3); font-size:1.125rem }


        .consult-box strong { color:var(--gold) }


        .modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:2000; display:none; justify-content:center; align-items:center; backdrop-filter:blur(5px) }


        .modal-overlay.open { display:flex }


        .modal { background:var(--bg-surface); border:1px solid oklch(70% 0.03 270 / 0.3); border-radius:var(--r4); padding:var(--s6) var(--s6); max-width:400px; width:90%; text-align:center; position:relative }

    .modal h3 {
        font-size: 1.4rem;
    }
    .modal p {
        font-size: 0.875rem;
    }
    .modal input {
        font-size: 0.9375rem;
        padding: 10px var(--s3);
    }
    .modal .btn-submit { background: transparent; border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; min-height: 44px; transition: all 0.3s var(--ease-out); font-family:inherit; font-size:1.125rem; font-weight:700; cursor:pointer; letter-spacing:2px; margin-top:var(--s2); }
    #tabAuth0, #tabSupabase {
        font-size: .7rem ;
        padding: 6px 14px ;
    }


        .modal-close { position:absolute; top:15px; right:20px; background:none; border:none; color:var(--text-2); font-size:1.5rem; cursor:pointer }


        .modal-close:hover { color:var(--gold) }


        .modal h3 { font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Noto Serif SC", sans-serif; color:var(--gold); letter-spacing:2px; margin-bottom:var(--s2) }


        .modal p { color:var(--text-2); font-size:0.9375rem; margin-bottom:var(--s5) }


        .modal input { width:100%; padding:var(--s3); border:1px solid oklch(70% 0.03 270 / 0.2); border-radius:var(--r1); background:oklch(100% 0 0 / 0.05); color:var(--text); font-size:1.125rem; margin-bottom:var(--s3); outline:none }


        .modal input:focus { border-color:var(--gold) }


        .modal .btn-submit { background: transparent; border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; min-height: 44px; transition: all 0.3s var(--ease-out); font-family:inherit; font-size:1.125rem; font-weight:700; cursor:pointer; letter-spacing:2px; margin-top:var(--s2); }


        .modal .btn-submit:hover { background: var(--gold); color: var(--bg); }


        .footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--s3);
    padding: var(--s4) var(--s4);
    border-top: 1px solid var(--line);
    color: var(--text-2);
    font-size: 0.9375rem;
    letter-spacing: 1px;
    position: relative;
    z-index: 2;
    flex-wrap: wrap;
}
.footer-left,
.footer-right {
    font-size: 0.875rem;
}

    .footer-left,
    .footer-right {
        font-size: var(--text-10);
        letter-spacing: 0.5px;
    }
    .footer .heart-beat .icon {
        width: 1rem ;
        height: 1rem ;
    }

/* icon system moved to critical *//* ===== 紧凑卡槽 ===== */


        .slot-row { display:flex; gap:8px; justify-content:center; margin:10px 0; flex-wrap:wrap }


        .slot { width:80px; height:125px; border:1px dashed oklch(70% 0.03 270 / 0.3); border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--text-2); font-size:0.7rem; text-align:center; font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Noto Serif SC", sans-serif; flex-shrink:0 }


        .slot.filled { border:1px solid var(--gold); background:oklch(45% 0.05 260 / 0.1); font-size:0.65rem }


         .slot-row { gap:5px }


        .result-wrapper { max-width:700px; margin:auto }


        .selected-cards-row { display:flex; gap:12px; justify-content:center; margin-bottom:30px; flex-wrap:wrap }


        .result-card { width:95px; text-align:center }

    .result-card .card-placeholder {
        font-size: .6rem;
        padding: 4px;
    }
    .selected-cards-row {
        gap: 6px;
    }


        .result-card .card-placeholder { width:100%; aspect-ratio:2/3; border-radius:var(--radius-sm); background:oklch(45% 0.05 260 / .1); border:1px solid oklch(70% 0.03 270 / .2); display:flex; align-items:center; justify-content:center; font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Noto Serif SC", sans-serif; color:var(--gold); font-size:.7rem; padding:8px }


        .oracle-box { background:oklch(15% 0.04 280 / .6); backdrop-filter:blur(15px); border:1px solid oklch(70% 0.03 270 / .15); padding:24px; border-radius:20px; margin-bottom:16px; line-height:1.9 }


        .oracle-box h3 { color:var(--gold); margin-bottom:10px; font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Noto Serif SC", sans-serif }


        .share-section { text-align:center; margin-top:30px }


        .share-btn { background: transparent; border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; min-height: 44px; transition: all 0.3s var(--ease-out); cursor:pointer; font-family:inherit; letter-spacing:2px; }


        .share-menu { display:flex; justify-content:center; gap:12px; margin-top:16px; flex-wrap:wrap }


        .share-option { background: transparent; border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; min-height: 44px; transition: all 0.3s var(--ease-out); cursor:pointer; font-family:inherit; font-size:.85rem; }


        .ls-history { margin-top:40px; padding:24px; border-radius:24px; background:oklch(100% 0 0 / .05) }


        .ls-history-item { padding:18px; margin-bottom:14px; border-radius:18px; background:oklch(100% 0 0 / .04) }


        .ls-history-date { font-size:12px; opacity:.6 }


        .ls-result-actions { margin-top:30px; display:flex; justify-content:center; gap:15px; flex-wrap:wrap }


        .btn-save-fav,.btn-poster,.btn-export { background: transparent; border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; min-height: 44px; transition: all 0.3s var(--ease-out); cursor:pointer; font-family:inherit; }


        .encyclopedia-grid { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:20px }


        .encyclopedia-grid .card-item { width:60px; height:95px; border-radius:var(--radius-xs); background:linear-gradient(180deg,var(--bg-surface),var(--bg)); border:1px solid oklch(70% 0.03 270 / 0.2); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:0.55rem; color:var(--gold); text-align:center; transition: all var(--t3) var(--ease) }


        .encyclopedia-grid .card-item:hover { border-color:var(--gold); transform:scale(1.05) }


        .modal-detail { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.85); z-index:3000; display:none; justify-content:center; align-items:center }


.modal-close { position:absolute; top:8px; right:16px; background:none; border:none; color:var(--gold); font-size:28px; cursor:pointer; padding:4px 8px; line-height:1; transition:all var(--duration-fast) var(--ease-standard); z-index:10 }


.modal-close:hover { color:var(--gold); transform:scale(1.15) }


.card-detail-slide { transition:transform var(--duration-normal) var(--ease-standard) }


.card-detail-slide.slide-out { transform:translateX(-100%) }


        .modal-detail.open { display:flex }


        .modal-detail .inner { background:var(--bg-surface); border:1px solid oklch(70% 0.03 270 / 0.3); border-radius:24px; padding:30px; max-width:500px; width:90%; max-height:80vh; overflow-y:auto }


        .ritual-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.9); z-index:2500; display:none; justify-content:center; align-items:center; flex-direction:column }


        .ritual-overlay.active { display:flex }


        .ritual-step { margin:20px; text-align:center; color:var(--gold); font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Noto Serif SC", sans-serif; font-size:1.2rem }


        .divination-tool { background:var(--card); backdrop-filter:blur(12px); border:1px solid var(--line); border-radius:var(--r3); padding:var(--s5); margin-bottom:var(--s5); }


        .divination-tool h3 { font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Noto Serif SC", sans-serif; color:var(--gold); text-align:center; margin-bottom:var(--s4); }


        .divination-tool select,
.divination-tool input {
    width: 100%;
    padding: var(--s3);
    margin-bottom: var(--s3);
    background: oklch(100% 0 0 / 0.05);
    border: 1px solid var(--line);
    border-radius: var(--r1);
    color: var(--text);
    font-size: 1.125rem;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.divination-tool select option {
    background: var(--bg-surface);
    color: var(--text);
    padding: var(--s2);
}


        .divination-tool button { background: transparent; border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; min-height: 44px; transition: all 0.3s var(--ease-out); width:100%; padding:var(--s3); font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Noto Serif SC", sans-serif; font-size:1.125rem; font-weight:700; cursor:pointer; letter-spacing:2px; margin-top:var(--s2); }


        .divination-result { margin-top:var(--s4); padding:var(--s4); background:oklch(15% 0.04 280 / 0.6); border-radius:var(--r1); border:1px solid var(--line); display:none; line-height:1.8; }


        .divination-result.show { display:block }


        #starQueryApp .sq-container { background:var(--card); backdrop-filter:blur(15px); border:1px solid var(--line); border-radius:var(--r3); padding:var(--s6); max-width:480px; margin:0 auto; }


        #starQueryApp .sq-title { font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Noto Serif SC", sans-serif; font-size:1.7rem; color:var(--gold); text-align:center; margin-bottom:var(--s2) }


        #starQueryApp .sq-subtitle { text-align:center; color:var(--text-2); margin-bottom:var(--s5); font-size:0.9375rem }


        #starQueryApp .input-group { margin-bottom:var(--s4) }


        #starQueryApp .input-group label { display:block; color:var(--gold); font-size:0.9375rem; margin-bottom:var(--s2) }


        #starQueryApp .input-group input { width:100%; padding:var(--s3); background:oklch(100% 0 0 / 0.05); border:1px solid var(--line); border-radius:var(--r1); color:var(--text); font-size:1.125rem; outline:none }


        #starQueryApp .sq-btn { background: transparent; border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; min-height: 44px; transition: all 0.3s var(--ease-out); width:100%; padding:var(--s3); font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Noto Serif SC", sans-serif; font-size:1.125rem; font-weight:700; cursor:pointer; letter-spacing:2px; margin-top:var(--s2) }


        #starQueryApp .sq-result { margin-top:var(--s5); display:none }


        #starQueryApp .sq-result.show { display:block }


        #starQueryApp .star-card { background:oklch(20% 0.04 275 / 0.6); border:1px solid var(--line); border-radius:var(--r2); padding:var(--s5); margin-bottom:var(--s3); transition: all var(--t3) var(--ease) }


        #starQueryApp .star-card:hover { border-color:var(--gold); box-shadow:0 0 20px oklch(45% 0.05 260 / 0.15) }


        #starQueryApp .star-card .star-name { font-size:1.4rem; font-weight:700; color:var(--gold); font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Noto Serif SC", sans-serif; margin-bottom:var(--s2) }


        #starQueryApp .star-card .star-detail { font-size:0.9375rem; color:var(--text-2); line-height:1.7 }


        #starQueryApp .star-card .star-meta { display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s2) }


        #starQueryApp .star-card .star-meta span { background:oklch(45% 0.05 260 / 0.15); padding:4px 12px; border-radius:20px; font-size:0.875rem; color:var(--gold); border:1px solid oklch(70% 0.03 270 / 0.15) }


        #starQueryApp .relation-box { background:linear-gradient(135deg,oklch(45% 0.05 260 / 0.2),oklch(15% 0.04 280 / 0.2)); border:2px solid var(--gold); border-radius:var(--r2); padding:var(--s5); text-align:center; margin-top:var(--s4) }


        #starQueryApp .relation-box .rel-name { font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Noto Serif SC", sans-serif; font-size:1.7rem; color:var(--gold); font-weight:700; letter-spacing:3px }


        #starQueryApp .relation-box .rel-desc { font-size:0.9375rem; color:var(--text-2); margin-top:var(--s2); line-height:1.6 }


    
        /* 品牌叙事区 */
        .brand-story-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: var(--s5);
            margin-top: var(--s4);
        }
        .brand-story-card { background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:12px; padding:var(--s6) var(--s5); text-align:center; transition:all var(--t2) var(--ease); opacity:0; transform:translateY(30px); }

    .brand-story-card .story-icon {
        font-size: 2rem;
    }
    .brand-story-card h3 {
        font-size: 1.125rem;
    }
    .brand-story-card p {
        font-size: 0.875rem;
    }
        .brand-story-card.reveal.active {
            opacity: 1;
            transform: translateY(0);
        }
        .brand-story-card:nth-child(2) { transition-delay: 100ms; }
        .brand-story-card:nth-child(3) { transition-delay: 200ms; }
        .brand-story-card:hover { border-color:var(--border-gold); transform:translateY(-4px); }
        .story-icon {
            font-size: 2.8rem;
            margin-bottom: var(--s3);
        }
        .brand-story-card h3 {
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Noto Serif SC", sans-serif;
            color: var(--gold);
            font-size: 1.4rem;
            margin-bottom: var(--s2);
        }
        .brand-story-card p {
            color: var(--text-2);
            font-size: 0.9375rem;
            line-height: 1.6;
        }
        /* 仪式粒子动画 */
        /* ===== Scroll Narrative Animation ===== */
        .reveal-section {
            opacity: 0;
            transform: translateY(60px) scale(0.98);
            transition: all 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .reveal-section.visible {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        .reveal-section.delay-1 { transition-delay: 100ms; }
        .reveal-section.delay-2 { transition-delay: 200ms; }
        .reveal-section.delay-3 { transition-delay: 300ms; }
        .reveal-section.delay-4 { transition-delay: 400ms; }

        /* Hero brand breathing animation */
        @keyframes brandBreath {
            0%, 100% { opacity: 0.7; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.03); }
        }
        .brand-tagline {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Noto Serif SC", sans-serif;
    font-size: clamp(1rem, 2vw, 1.4rem);
    color: var(--gold);
    letter-spacing: 6px;
    margin-top: var(--s2);
    opacity: 0.8;
    animation: brandBreath 3s ease-in-out infinite;
    padding: 0 var(--s4);
}

/* ===== Three Core Features Section ===== */
.features-section {
    padding: var(--s8) var(--s4);
    text-align: center;
}
.features-section .section-title {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Noto Serif SC", sans-serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--gold);
    margin-bottom: var(--s2);
}
.features-section .section-subtitle {
    font-size: 1rem;
    color: var(--text-2);
    margin-bottom: var(--s6);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s4);
    max-width: 960px;
    margin: 0 auto;
    padding: 0 var(--s3);
}
.feature-card { background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:12px; padding:var(--s5) var(--s4); text-align:center; transition:transform var(--duration-normal) var(--ease-standard), border-color var(--duration-normal) var(--ease-standard); }
.feature-card:hover { transform:translateY(-4px); border-color:var(--border-gold); }
.feature-icon {
    font-size: 2.5rem;
    margin-bottom: var(--s3);
}
.feature-card h3 {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Noto Serif SC", sans-serif;
    font-size: 1.125rem;
    color: var(--text);
    margin-bottom: var(--s2);
}
.feature-card p {
    font-size: 0.9rem;
    color: var(--text-2);
    line-height: 1.7;
}
@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
}

/* Golden pulse for ritual overlay */
        @keyframes goldenPulse {
            0%, 100% { box-shadow: inset 0 0 60px oklch(68% 0.08 85 / 0.05); }
            50% { box-shadow: inset 0 0 120px oklch(68% 0.08 85 / 0.15), 0 0 60px oklch(68% 0.08 85 / 0.05); }
        }
        #ritualOverlay.active {
            animation: goldenPulse 3s ease-in-out infinite;
        }

        @keyframes floatParticle {
            0% { transform: translate(0, 0) scale(1); opacity: 0.3; }
            50% { transform: translate(30px, -50px) scale(1.5); opacity: 0.8; }
            100% { transform: translate(-20px, 20px) scale(0.8); opacity: 0.2; }
        }
        @keyframes pulseGold {
            0%, 100% { opacity: 1; text-shadow: 0 0 20px oklch(68% 0.08 85 / 0.5); }
            50% { opacity: 0.6; text-shadow: 0 0 40px oklch(68% 0.08 85 / 0.9); }
        }
        .ritual-step { position: relative; z-index: 1; }

        .hover-lift {
            transition: transform var(--t1) var(--ease), box-shadow var(--t1) var(--ease);
        }
        .hover-lift:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-deep);
        }
        /* hover-glow moved to critical */


    #universeDashboard h3 {
        font-size: 1.4rem ;
    }
    #universeDashboard .icon {
        width: 0.8em ;
        height: 0.8em ;
    }
    #universeDashboard div[style*="display:flex;flex-wrap:wrap;justify-content:center"] {
        gap: var(--s2) ;
    }
    #universeDashboard div[style*="display:flex;flex-wrap:wrap;justify-content:center"] > div {
        min-width: 60px;
    }
    #universeDashboard div[style*="display:flex;flex-wrap:wrap;justify-content:center"] strong {
        font-size: 1.125rem ;
    }


/* ===== Arc Tarot Deck V7 ===== */
.arc-deck-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    height: 340px;
    overflow: visible ;
    perspective: 1200px;
    transform-style: preserve-3d;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
    overscroll-behavior: none;
    cursor: grab;
}
#cardPickScreen .arc-deck-container {
    width: 100vw;
    margin-left: calc(-50vw + 50% - 20px);
    margin-right: 0;
}
.arc-deck-container:active { cursor: grabbing; }
.arc-deck-container.dragging { cursor: grabbing; }

.arc-card {
    position: absolute;
    width: 140px;
    height: 210px;
    border-radius: var(--radius-xs);
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    contain: layout style paint;
    transform-origin: center bottom;
    pointer-events: auto;
    border: 1.5px solid oklch(78% 0.1 85 / 0.35);
    background: linear-gradient(145deg, var(--bg-surface), var(--bg));
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: none;
}

.arc-card::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px solid oklch(78% 0.1 85 / 0.15);
    border-radius: 4px;
    pointer-events: none;
}

.arc-card::after {
    content: '✦';
    position: absolute;
    font-size: 28px;
    color: oklch(78% 0.1 85 / 0.35);
    pointer-events: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.arc-card.card-animating {
    transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1),
                opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Card front face (revealed after draw) */
.arc-card .card-front-face {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, var(--bg-surface), var(--bg));
    border-radius: 7px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    text-align: center;
    color: var(--gold);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Noto Serif SC", sans-serif;
    font-size: 0.6rem;
    line-height: 1.3;
}

.arc-card.drawn .card-front-face {
    display: flex;
}
.arc-card.drawn::after { display: none; }
.arc-card.drawn::before { border-color: oklch(78% 0.1 85 / 0.4); }

/* Particles */
.tarot-particle {
    position: absolute;
    pointer-events: none;
    z-index: 1000;
    border-radius: 50%;
    will-change: transform, opacity;
    animation: particleFloat 2.5s ease-out forwards;
}
@keyframes particleFloat {
    0% { transform: translate(0, 0) scale(1); opacity: 0.35; }
    100% { transform: translate(var(--px), var(--py)) scale(0); opacity: 0; }
}

/* Draw card fly animation keyframes via JS RAF */

/* Draw result overlay */
.draw-result-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: oklch(4% 0.01 260 / 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: overlayFadeIn var(--duration-normal) var(--ease-standard);
}
@keyframes overlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.draw-result-overlay .draw-card-display {
    width: 180px;
    height: 270px;
    border-radius: 18px;
    background: linear-gradient(145deg, var(--bg-surface), var(--bg));
    border: 2px solid oklch(78% 0.1 85 / 0.5);
    box-shadow: 0 0 60px oklch(78% 0.1 85 / 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    color: var(--gold);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Noto Serif SC", sans-serif;
    animation: cardRevealPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cardRevealPop {
    from { transform: scale(0.3) rotateY(180deg); opacity: 0; }
    to { transform: scale(1) rotateY(0); opacity: 1; }
}
.draw-result-overlay .draw-card-display .card-name {
    font-size: 1.1rem;
    margin-bottom: 6px;
    color: var(--gold);
}
.draw-result-overlay .draw-card-display .card-position {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-bottom: 10px;
}
.draw-result-overlay .draw-card-display .card-meaning {
    font-size: 0.7rem;
    opacity: 0.8;
    line-height: 1.5;
    max-height: 80px;
    overflow-y: auto;
}
.draw-result-overlay .draw-close-btn {
    margin-top: 20px;
    padding: 8px 24px;
    background: oklch(45% 0.05 260 / 0.2);
    border: 1px solid var(--gold);
    color: var(--gold);
    border-radius: 999px;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Noto Serif SC", sans-serif;
    letter-spacing: 1px;
}

/* Mobile responsive */
@media (max-width: 480px) {
    .arc-deck-container { height: 280px; }
    .arc-card { width: 120px; height: 180px; border-radius: 7px; }
    .arc-card::after { font-size: 22px; }
}
@media (min-width: 768px) {
    .arc-deck-container { height: 440px; }
    .arc-card { width: 140px; height: 210px; border-radius: 12px; }
    .arc-card::after { font-size: 36px; }
}

        

        /* ===== UI Design System v1 ===== */

        /* --- hyperlinks --- */
        a { color: var(--gold); text-decoration: none; }
        a:hover { color: var(--gold-hover); }

        /* --- card --- */
        .card { background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:12px; transition:all var(--t2) var(--ease); padding:var(--s5); }
        .card:hover { transform:translateY(-4px); border-color:var(--border-gold); }

        /* --- buttons --- */
        .btn-primary { background: transparent; border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; min-height: 44px; transition: all 0.3s var(--ease-out); font-weight:600; font-size:16px; cursor:pointer; font-family:inherit; }
        .btn-primary:hover { background: var(--gold); color: var(--bg); transform:scale(1.03); box-shadow:0 0 30px oklch(68% 0.08 85 / 0.2); }
        .btn-primary:active { transform:scale(0.97); }

        .btn-secondary { background: transparent; border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; min-height: 44px; transition: all 0.3s var(--ease-out); cursor:pointer; font-family:inherit; font-size:16px; }
        .btn-secondary:hover { background: var(--gold); color: var(--bg); }

        .btn-ghost { background:transparent; color:var(--text-secondary); padding:8px 16px; border:none; cursor:pointer; transition:all 0.3s var(--ease-out); font-family:inherit; font-size:14px; }
        .btn-ghost:hover { color:var(--gold); }

        /* --- headings --- */
        h1 { font-size: 42px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); margin: 0 0 var(--s2) 0; }
        h2 { font-size: 28px; font-weight: 600; color: var(--text); margin: 0 0 var(--s2) 0; }
        h3 { font-size: 20px; font-weight: 500; color: var(--text); margin: 0 0 var(--s2) 0; }
        h4 { font-size: 16px; font-weight: 500; color: var(--text-2); margin: 0 0 var(--s1) 0; }
        p { color: var(--text-2); line-height: 1.6; margin: 0 0 var(--s3) 0; }

        /* --- sections --- */
        .section { padding: var(--s6) var(--s5); max-width: 1100px; margin: 0 auto; }
        .section-sm { padding: var(--s5) var(--s5); max-width: 1100px; margin: 0 auto; }
        .section-center { display: flex; flex-direction: column; align-items: center; text-align: center; }

        /* --- Hero --- */
        .hero {
            min-height: 80vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: var(--s5);
            background: radial-gradient(ellipse at center top, oklch(68% 0.08 85 / 0.06), transparent 70%);
        }
        .hero h1 {
            font-size: clamp(48px, 10vw, 100px);
            letter-spacing: 0.04em;
            background: linear-gradient(135deg, var(--gold), var(--gold-hover));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .hero p {
            font-size: clamp(16px, 2vw, 22px);
            color: var(--text-2);
            max-width: 500px;
            margin: var(--s3) auto var(--s5);
        }

        /* --- brand grid --- *//* brand-grid moved to critical */
        .brand-grid .card { text-align: center; padding: var(--s6) var(--s4); }
        .brand-grid .card .icon { font-size: 32px; margin-bottom: var(--s2); }
        .brand-grid .card h3 { font-size: 18px; margin-bottom: var(--s1); }
        .brand-grid .card p { font-size: 14px; margin: 0; }

        /* ===== Tarot Page ===== */
        .tarot-page {
            min-height: 100vh;
            background: radial-gradient(circle at center, var(--bg-elevated), var(--bg));
            padding: var(--s5);
        }
        .page-view.tarot-page.active {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .tarot-page .tarot-container { width: 100%; max-width: 800px; margin: 0 auto; }
        .tarot-page .tarot-screen { padding: var(--s4); width: 100%; }

        .tarot-page .ritual-moon { font-size: 72px; margin-bottom: var(--s3); opacity: 0.8; animation: floatMoon 3s ease-in-out infinite; }
        @keyframes floatMoon { 0%,100%{transform:translateY(0);opacity:0.6} 50%{transform:translateY(-12px);opacity:1} }

        .tarot-page .tarot-btn { background: transparent; border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; min-height: 44px; transition: all 0.3s var(--ease-out); font-weight:600; font-size:16px; cursor:pointer; font-family:inherit; }
        .tarot-page .tarot-btn:hover { background: var(--gold); color: var(--bg); transform:scale(1.03); box-shadow:0 0 40px oklch(68% 0.08 85 / 0.15); }
        .tarot-page .tarot-btn:disabled { opacity:0.4; cursor:not-allowed; transform:none; }

        .tarot-page .reading-type { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin: var(--s3) 0; }
        .tarot-page .reading-type button {
            background: var(--card); border: 1px solid var(--line); color: var(--text-2);
            padding: 6px 14px; border-radius: var(--r2); font-size: 12px; cursor: pointer;
            transition: all var(--t1) var(--ease); font-family: inherit;
        }
        .tarot-page .reading-type button.active { border-color: var(--gold); color: var(--gold); background: var(--gold-soft); }
        .tarot-page .reading-type button:hover { border-color: var(--gold); color: var(--text); }

        .tarot-page .spread-select { width: 100%; max-width: 280px; margin: var(--s3) auto; }
        .tarot-page .spread-select select {
            width: 100%; padding: 12px 16px; background: var(--card);
            border: 1px solid var(--line); border-radius: var(--r2); color: var(--text);
            font-size: 14px; font-family: inherit; outline: none; cursor: pointer;
        }
        .tarot-page .spread-select select:focus { border-color: var(--gold); }

        .tarot-page .tarot-input {
            width: 100%; max-width: 280px; padding: 12px 16px; background: var(--card);
            border: 1px solid var(--line); border-radius: var(--r2); color: var(--text);
            font-size: 14px; text-align: center; outline: none; font-family: inherit; margin: var(--s2) 0;
        }
        .tarot-page .tarot-input:focus { border-color: var(--gold); }

        .tarot-page .slot-row { display: flex; gap: var(--s2); justify-content: center; flex-wrap: wrap; margin: var(--s3) 0; }
        .tarot-page .slot {
            width: 72px; height: 112px; border: 1px dashed var(--line); border-radius: var(--r2);
            display: flex; align-items: center; justify-content: center; color: var(--text-3);
            font-size: 11px; text-align: center; font-family: inherit; flex-shrink: 0;
            transition: all var(--t1) var(--ease);
        }
        .tarot-page .slot.filled { border: 1px solid var(--gold); border-style: solid; color: var(--gold); background: var(--gold-soft); }

        .tarot-page .arc-deck-container {
            width: 100%; height: 340px; position: relative; overflow: visible;
            margin: var(--s3) 0; touch-action: none; cursor: grab;
        }
        .tarot-page .arc-deck-container:active { cursor: grabbing; }

        .tarot-page .arc-card {
            position: absolute; width: 120px; height: 180px; border-radius: var(--r1);
            will-change: transform; transform-origin: center bottom; backface-visibility: hidden;
            pointer-events: auto; border: 1.5px solid oklch(68% 0.08 85 / 0.3);
            background: linear-gradient(145deg, var(--bg-surface), var(--bg));
            box-shadow: var(--shadow-soft); overflow: hidden;
            display: flex; align-items: center; justify-content: center; transition: none;
        }
        .tarot-page .arc-card::before {
            content: \'\';
            position: absolute; inset: 5px;
            border: 1px solid oklch(68% 0.08 85 / 0.1); border-radius: 4px; pointer-events: none;
        }
        .tarot-page .arc-card::after {
            content: \'�6\'; position: absolute; font-size: 24px;
            color: oklch(68% 0.08 85 / 0.25); pointer-events: none;
            top: 50%; left: 50%; transform: translate(-50%, -50%);
        }
        .tarot-page .arc-card .card-front-face {
            display: none; width: 100%; height: 100%; position: absolute; inset: 0;
            background: var(--card); border-radius: 7px; flex-direction: column;
            align-items: center; justify-content: center; padding: var(--s2);
            text-align: center; color: var(--gold); font-family: inherit; font-size: 11px; line-height: 1.3;
        }
        .tarot-page .arc-card.drawn .card-front-face { display: flex; }
        .tarot-page .arc-card.drawn::after { display: none; }
        .tarot-page .arc-card.drawn::before { border-color: oklch(68% 0.08 85 / 0.3); }

        /* --- Draw result overlay --- */
        .tarot-page .draw-result-overlay {
            position: fixed; inset: 0; z-index: 2000; background: oklch(6% 0.01 260 / 0.92);
            display: flex; align-items: center; justify-content: center;
            animation: overlayFadeIn var(--t1) var(--ease);
        }
        @keyframes overlayFadeIn { from{opacity:0} to{opacity:1} }

        .tarot-page .draw-result-overlay .draw-card-display {
            width: 180px; height: 270px; border-radius: var(--r3); background: var(--card);
            border: 2px solid oklch(68% 0.08 85 / 0.4); box-shadow: var(--shadow-deep);
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            padding: var(--s5); text-align: center; color: var(--gold); font-family: inherit;
            animation: cardRevealPop var(--t2) var(--ease);
        }
        @keyframes cardRevealPop { from{transform:scale(0.3) rotateY(180deg);opacity:0} to{transform:scale(1) rotateY(0);opacity:1} }

        .tarot-page .draw-result-overlay .draw-card-display .card-name { font-size: 18px; margin-bottom: var(--s1); }
        .tarot-page .draw-result-overlay .draw-card-display .card-position { font-size: 12px; opacity: 0.6; margin-bottom: var(--s2); }
        .tarot-page .draw-result-overlay .draw-card-display .card-meaning { font-size: 13px; opacity: 0.8; line-height: 1.5; }

        .tarot-page .draw-result-overlay .draw-close-btn {
            margin-top: var(--s5); padding: 10px 28px; background: var(--gold-soft);
            border: 1px solid var(--gold); color: var(--gold); border-radius: var(--r2);
            cursor: pointer; font-family: inherit; font-size: 14px; transition: all var(--t1) var(--ease);
        }
        .tarot-page .draw-result-overlay .draw-close-btn:hover { background: var(--gold); color: var(--bg); }

        /* --- Tarot result --- */
        .tarot-page .result-wrapper { max-width: 700px; margin: 0 auto; width: 100%; }
        .tarot-page .oracle-box {
            background: var(--card); border: 1px solid var(--line); border-radius: var(--r3);
            padding: var(--s5); margin-bottom: var(--s4); line-height: 1.8;
        }
        .tarot-page .oracle-box h3 { color: var(--gold); margin-bottom: var(--s2); font-size: 16px; }
        .tarot-page .selected-cards-row { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; margin-bottom: var(--s5); }
        .tarot-page .result-card { width: 80px; text-align: center; }
        .tarot-page .result-card .card-placeholder {
            width: 100%; aspect-ratio: 2/3; border-radius: var(--r2); background: var(--card);
            border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
            font-family: inherit; color: var(--gold); font-size: 11px; padding: var(--s2);
        }
        .tarot-page .ls-result-actions { display: flex; justify-content: center; gap: var(--s3); flex-wrap: wrap; margin: var(--s5) 0; }
        .tarot-page .ls-result-actions button {
            padding: 10px 20px; border-radius: var(--r2); border: 1px solid var(--line);
            background: transparent; color: var(--text-2); cursor: pointer; font-family: inherit;
            font-size: 13px; transition: all var(--t1) var(--ease);
        }
        .tarot-page .ls-result-actions button:hover { border-color: var(--gold); color: var(--gold); }

        .tarot-page .ls-history { margin-top: var(--s6); padding: var(--s5); border-radius: var(--r3); background: var(--card); border: 1px solid var(--line); }
        .tarot-page .ls-history-item { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
        .tarot-page .ls-history-item:last-child { border-bottom: none; }
        .tarot-page .ls-history-date { font-size: 12px; color: var(--text-3); }

        .tarot-page .share-section { text-align: center; margin-top: var(--s5); }
        .tarot-page .share-menu { display: flex; justify-content: center; gap: var(--s3); margin-top: var(--s3); flex-wrap: wrap; }
        .tarot-page .share-option { background: transparent; border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; min-height: 44px; transition: all 0.3s var(--ease-out); cursor:pointer; font-family:inherit; font-size:.85rem; }
        .tarot-page .share-option:hover { border-color: var(--gold); color: var(--gold); }

        .tarot-page .btn-encyclopedia {
            margin-top: var(--s3); padding: 10px 28px; background: transparent;
            border: 1px solid var(--line); border-radius: var(--r2); color: var(--text-3);
            font-size: 13px; cursor: pointer; transition: all var(--t1) var(--ease); font-family: inherit;
        }
        .tarot-page .btn-encyclopedia:hover { border-color: var(--gold); color: var(--gold); }

        .tarot-page .encyclopedia-grid { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; }
        .tarot-page .encyclopedia-grid .card-item {
            width: 56px; height: 84px; border-radius: var(--r1); background: var(--card);
            border: 1px solid var(--line); cursor: pointer; display: flex;
            align-items: center; justify-content: center; font-size: 10px; color: var(--text-2);
            text-align: center; transition: all var(--t1) var(--ease);
        }
        .tarot-page .encyclopedia-grid .card-item:hover { border-color: var(--gold); transform: scale(1.05); }

        /* --- Ritual overlay --- */
        .ritual-overlay {
            position: fixed; inset: 0; z-index: 2500; background: oklch(6% 0.01 260 / 0.95);
            display: none; align-items: center; justify-content: center; flex-direction: column;
        }
        .ritual-overlay.active { display: flex; }
        .ritual-overlay .ritual-step { margin: var(--s3); text-align: center; color: var(--gold); font-family: inherit; font-size: 18px; }
        .ritual-overlay .ritual-step .ritual-moon { font-size: 64px; margin-bottom: var(--s3); display: block; }

        /* ===== Universe ===== */
        .universe-container { max-width: 700px; margin: 0 auto; padding: var(--s6) var(--s5); }
        .universe-card { background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:12px; padding:var(--s5); margin-bottom:var(--s4); transition:all var(--t2) var(--ease); }
        .universe-card:hover { border-color:var(--border-gold); }
        .universe-card .label { font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--s1); }
        .universe-card .value { font-size: 24px; font-weight: 600; color: var(--text); }
        .universe-card .value.gold { color: var(--gold); }

        .universe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s3); }
        .universe-stat { text-align: center; padding: var(--s3); background: var(--card-2); border-radius: var(--r2); }
        .universe-stat .number { font-size: 28px; font-weight: 700; color: var(--gold); }
        .universe-stat .label { font-size: 12px; color: var(--text-3); margin-top: var(--s1); }

        /* ===== Modal ===== */
        .modal-overlay {
            position: fixed; inset: 0; z-index: 2000; background: oklch(6% 0.01 260 / 0.85);
            display: none; align-items: center; justify-content: center; backdrop-filter: blur(8px);
        }
        .modal-overlay.open { display: flex; }

        .modal {
            background: var(--card); border: 1px solid var(--line); border-radius: var(--r4);
            padding: var(--s7) var(--s6); max-width: 400px; width: 90%; text-align: center; position: relative;
        }
        .modal .modal-close {
            position: absolute; top: var(--s3); right: var(--s4); background: none;
            border: none; color: var(--text-3); font-size: 24px; cursor: pointer;
            transition: all var(--t1) var(--ease);
        }
        .modal .modal-close:hover { color: var(--text); }
        .modal h3 { color: var(--gold); margin-bottom: var(--s2); }
        .modal p { color: var(--text-2); margin-bottom: var(--s5); }
        .modal input {
            width: 100%; padding: 12px 16px; background: var(--card-2); border: 1px solid var(--line);
            border-radius: var(--r2); color: var(--text); font-size: 14px; font-family: inherit;
            outline: none; margin-bottom: var(--s3);
        }
        .modal input:focus { border-color: var(--gold); }
        .modal .btn-submit { background: transparent; border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; min-height: 44px; transition: all 0.3s var(--ease-out); font-family:inherit; font-size:1.125rem; font-weight:700; cursor:pointer; letter-spacing:2px; margin-top:var(--s2); }
        .modal .btn-submit:hover { background: var(--gold); color: var(--bg); }

        /* ===== Responsive ===== */
        @media (max-width: 768px) {
            :root { --s8: 48px; --s7: 36px; }
            h1 { font-size: 32px; }
            h2 { font-size: 22px; }
            .hero h1 { font-size: clamp(36px, 8vw, 56px); }
            .tarot-page .arc-card { width: 100px; height: 150px; }
            .tarot-page .arc-deck-container { height: 260px; }
            .tarot-page .slot { width: 60px; height: 92px; font-size: 10px; }
            .tarot-page .result-card { width: 64px; }
            .modal { padding: var(--s5) var(--s4); }
        }

        @media (max-width: 480px) {
            .tarot-page .arc-card { width: 80px; height: 120px; }
            .tarot-page .arc-deck-container { height: 200px; }
            .tarot-page .slot { width: 48px; height: 72px; font-size: 8px; }
            .tarot-page .result-card { width: 56px; }
            .tarot-page .result-card .card-placeholder { font-size: 9px; }
            .brand-grid { grid-template-columns: 1fr; }
            .universe-grid { grid-template-columns: 1fr 1fr; }
        }

        /* ===== Hero Badge & Desc ===== */
        /* hero-badge moved to critical */

        /* ===== Tarot 三状态 ===== */
        .tarot-state-idle .tarot-deck-wrapper {
            opacity: 0.6;
            transform: scale(0.95);
            transition: all 0.8s var(--ease);
        }
        .tarot-state-idle .tarot-deck-wrapper:hover {
            opacity: 0.8;
            transform: scale(0.98);
        }
        .tarot-state-idle .reading-type,
        .tarot-state-idle .spread-select,
        .tarot-state-idle .tarot-input {
            opacity: 0.4;
            pointer-events: none;
            transition: all var(--duration-slow) var(--ease);
        }

        .tarot-state-active .tarot-deck-wrapper {
            opacity: 1;
            transform: scale(1);
        }
        .tarot-state-active .reading-type,
        .tarot-state-active .spread-select,
        .tarot-state-active .tarot-input {
            opacity: 1;
            pointer-events: auto;
        }

        .tarot-state-result .tarot-deck-wrapper {
            opacity: 0.3;
            transform: scale(0.85);
            pointer-events: none;
        }
        .tarot-state-result .reading-type,
        .tarot-state-result .spread-select,
        .tarot-state-result .tarot-input {
            opacity: 0;
            pointer-events: none;
            transition: all var(--duration-normal) var(--ease);
        }

        /* ===== 移动端优化 ===== */
        @media (max-width: 480px) {
            .hero-start-btn { background: transparent; border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; min-height: 44px; transition: all 0.3s var(--ease-out); font-size:1.125rem; cursor:pointer; }
            .arc-card {
                width: 100px ;
                height: 150px ;
                touch-action: none;
                pointer-events: auto;
            }
            .arc-deck-container {
                height: 260px;
                touch-action: none ;
            }
            .oracle-box {
                font-size: 14px;
                padding: var(--s4);
                margin-bottom: var(--s3);
            }
            .oracle-box h3 {
                font-size: 14px;
            }
            .oracle-box p {
                font-size: 12px;
            }
            .tarot-btn {
                width: 100%;
                max-width: 100%;
            }
            .slot {
                width: 56px;
                height: 88px;
                font-size: 0.55rem;
            }
}



/* ===== Mobile First - 全面适配 ===== */
@media (max-width: 768px) {
    :root { --s5: 16px; --s8: 40px; }
    .hero-section { min-height: 90vh; padding: var(--s4); }
    .hero-content h1 { font-size: clamp(28px, 6vw, 40px); }
    .hero-start-btn { background: transparent; border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; min-height: 44px; transition: all 0.3s var(--ease-out); font-size:1.125rem; cursor:pointer; }
    .navbar { padding: 10px 16px; }
    .nav-links { position: fixed; top: 0; right: -100%; width: 75%; height: 100vh; background: oklch(6% 0.01 260 / 0.98); backdrop-filter: blur(30px); flex-direction: column; justify-content: center; align-items: center; gap: 24px; transition: right var(--duration-normal) var(--ease-standard); z-index: 1000; display: flex; }
    .nav-links.open { right: 0; }
    .hamburger { display: flex; flex-direction: column; gap: 5px; cursor: pointer; z-index: 1001; }
    .hamburger span { width: 24px; height: 2px; background: var(--gold); border-radius: 2px; }
}

@media (max-width: 480px) {
    .arc-deck-container { height: 220px ; touch-action: none ; }
    .arc-card { width: 80px ; height: 120px ; }
    .arc-card::after { font-size: 16px ; }
    .slot { width: 48px ; height: 72px ; font-size: 8px ; }
    .slot-row { gap: 4px ; }
    .tarot-btn { width: 100%; max-width: 100%; padding: 14px; font-size: 16px; }
    .tarot-input { width: 100%; max-width: 100%; padding: 12px; font-size: 14px; }
    .spread-select { width: 100%; max-width: 100%; }
    .spread-select select { padding: 12px; font-size: 14px; }
    .reading-type { gap: 4px; }
    .reading-type button { font-size: 10px; padding: 4px 10px; }
    .result-card { width: 56px ; }
    .result-card .card-placeholder { font-size: 8px ; padding: 4px ; }
    .oracle-box { padding: 12px ; font-size: 13px ; }
    .oracle-box h3 { font-size: 14px ; }
.ls-result-actions { gap: 8px; }
    .ls-result-actions button { font-size: 11px; padding: 8px 14px; }
    .arc-deck-container { overscroll-behavior: none; }
    .tarot-page { touch-action: manipulation; }
}

/* ===== 全局防误触 ===== */
* { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }

/* ===== Growth System ===== */
.growth-section { margin-top: var(--s6); padding: var(--s5); background: linear-gradient(135deg, oklch(68% 0.08 85 / 0.06), oklch(68% 0.08 85 / 0.01)); border-radius: var(--r3); border: 1px solid var(--gold-soft); text-align: center; }
.growth-section .growth-title { font-size: 14px; color: var(--gold); letter-spacing: 2px; margin-bottom: var(--s2); }
.growth-section .growth-desc { font-size: 13px; color: var(--text-2); margin-bottom: var(--s3); }
.growth-section .growth-actions { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; }
.growth-section .growth-actions button { background: transparent; border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; min-height: 44px; transition: all 0.3s var(--ease-out); font-size:13px; cursor:pointer; font-family:inherit; display:flex; align-items:center; gap:6px; }
.growth-section .growth-actions button:hover { background: var(--gold); color: var(--bg); }
.growth-section .growth-actions button.btn-growth-primary { background: transparent; border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; min-height: 44px; transition: all 0.3s var(--ease-out); font-weight:600; }
.growth-section .growth-actions button.btn-growth-primary:hover { background: var(--gold); color: var(--bg); transform:translateY(-2px); box-shadow:0 4px 20px oklch(68% 0.08 85 / 0.2); }
.growth-feedback { margin-top: var(--s3); display: flex; gap: var(--s4); justify-content: center; align-items: center; flex-wrap: wrap; }
.growth-feedback .fb-btn { background: transparent; border: none; color: var(--text-3); font-size: 18px; cursor: pointer; transition: all var(--t1) var(--ease); padding: 4px 12px; border-radius: var(--r2); }
.growth-feedback .fb-btn:hover { color: var(--gold); background: var(--gold-soft); }
.growth-feedback .fb-btn.active { color: var(--gold); }
.growth-feedback .fb-count { font-size: 12px; color: var(--text-3); min-width: 20px; }
.share-toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px); background: var(--card); border: 1px solid var(--gold-soft); border-radius: var(--r2); padding: 12px 24px; color: var(--text); font-size: 14px; z-index: 3000; opacity: 0; transition: all 0.4s var(--ease); box-shadow: var(--shadow-deep); }
.share-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== Synastry Page ===== */
.synastry-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); margin-bottom: var(--s5); }
.synastry-person-card { background: var(--card); backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: var(--r3); padding: var(--s5); transition: all var(--t3) var(--ease); }
.synastry-person-card:hover { border-color: var(--gold-soft); }
.synastry-person-card h3 { font-size: 1.15rem; color: var(--gold); letter-spacing: 2px; margin-bottom: var(--s4); text-align: center; font-weight: 300; }
.synastry-person-card label { display: block; font-size: 0.8rem; color: var(--text-2); margin-bottom: var(--s1); letter-spacing: 1px; }
.synastry-person-card input { width: 100%; padding: var(--s3); margin-bottom: var(--s3); background: oklch(100% 0 0 / 0.05); border: 1px solid var(--line); border-radius: var(--r1); color: var(--text); font-size: 0.9375rem; outline: none; font-family: inherit; }
.synastry-person-card input:focus { border-color: var(--gold); }
.synastry-submit-wrap { text-align: center; margin: var(--s5) 0; }
.synastry-submit-btn { background: transparent; border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; min-height: 44px; transition: all 0.3s var(--ease-out); padding: 14px 56px; font-size: 18px; font-weight: 600; cursor: pointer; letter-spacing: 2px; font-family: inherit; }
.synastry-submit-btn:hover { background: var(--gold); color: var(--bg); transform: translateY(-2px); }
.synastry-result { display: none; margin-top: var(--s5); animation: synastryFadeIn 0.6s var(--ease); }
.synastry-result.show { display: block; }
@keyframes synastryFadeIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.synastry-score-circle { width: 120px; height: 120px; border-radius: 50%; margin: 0 auto var(--s4); display: flex; align-items: center; justify-content: center; border: 3px solid var(--gold); background: var(--card); position: relative; }
.synastry-score-circle .score-inner { text-align: center; }
.synastry-score-circle .score-num { font-size: 2.5rem; font-weight: 300; color: var(--gold); line-height: 1; }
.synastry-score-circle .score-label { font-size: 0.7rem; color: var(--text-3); letter-spacing: 1px; margin-top: 2px; }
.synastry-match-summary { text-align: center; margin-bottom: var(--s5); }
.synastry-match-summary h3 { font-size: 1.3rem; color: var(--text); font-weight: 300; margin-bottom: var(--s2); }
.synastry-match-summary p { color: var(--text-2); font-size: 0.9375rem; }
.synastry-element-badge { display: inline-block; padding: 4px 16px; border-radius: 999px; font-size: 0.75rem; letter-spacing: 1px; margin: 0 4px; }
.synastry-element-badge.fire { background: rgba(255,107,53,0.15); color: #ff6b35; border: 1px solid rgba(255,107,53,0.3); }
.synastry-element-badge.earth { background: rgba(122,163,67,0.15); color: #7aa343; border: 1px solid rgba(122,163,67,0.3); }
.synastry-element-badge.air { background: rgba(131,175,235,0.15); color: #83afeb; border: 1px solid rgba(131,175,235,0.3); }
.synastry-element-badge.water { background: rgba(100,149,237,0.15); color: #6495ed; border: 1px solid rgba(100,149,237,0.3); }
.synastry-dims { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-bottom: var(--s5); }
.synastry-dim-card { background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s4); }
.synastry-dim-card .dim-label { font-size: 0.8rem; color: var(--text-2); letter-spacing: 1px; margin-bottom: var(--s2); display: flex; justify-content: space-between; }
.synastry-dim-card .dim-bar { width: 100%; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.synastry-dim-card .dim-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--gold-soft), var(--gold)); transition: width 0.8s var(--ease); }
.synastry-advice { background: oklch(68% 0.08 85 / 0.04); border: 1px solid var(--gold-soft); border-radius: var(--r2); padding: var(--s4); margin-top: var(--s4); }
.synastry-advice h4 { font-size: 0.95rem; color: var(--gold); letter-spacing: 1px; margin-bottom: var(--s2); font-weight: 400; }
.synastry-advice p { font-size: 0.875rem; color: var(--text-2); line-height: 1.7; }
.synastry-sign-info { display: flex; align-items: center; gap: var(--s3); justify-content: center; flex-wrap: wrap; margin-bottom: var(--s2); }
.synastry-sign-info .sign-icon { font-size: 2rem; }
.synastry-sign-info .sign-name { font-size: 1.1rem; color: var(--gold); letter-spacing: 1px; }
@media (max-width: 768px) {
    .synastry-form-grid { grid-template-columns: 1fr; gap: var(--s4); }
    .synastry-dims { grid-template-columns: 1fr; }
}






            .learn-section { margin-bottom: var(--s6); }


            .learn-section h2 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Noto Serif SC", sans-serif; color: var(--gold); font-size: 1.7rem; margin-bottom: var(--s4); text-align: center; }


            .learn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s4); }


            .learn-card { background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:12px; padding:var(--s5); text-align:center; cursor:pointer; transition:all var(--t2) var(--ease); }


            .learn-card:hover { border-color:var(--border-gold); transform:translateY(-4px); }


            .learn-card .icon { font-size: 2.5rem; margin-bottom: var(--s2); }


            .learn-card h3 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Noto Serif SC", sans-serif; color: var(--gold); font-size: 1.125rem; }


            .learn-card p { color: var(--text-2); font-size: 0.9375rem; margin-top: var(--s2); }


            .learn-major-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s3); margin-top: var(--s4); }


            .learn-minor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--s2); margin-top: var(--s4); }


            .learn-card-sm { background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:12px; padding:var(--s4); text-align:center; cursor:pointer; transition:all var(--duration-fast) var(--ease-standard); }


            .learn-card-sm:hover { border-color:var(--border-gold); transform:translateY(-2px); }


            .learn-card-sm h4 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Noto Serif SC", sans-serif; color: var(--gold); font-size: 0.9375rem; }


            .learn-card-sm p { color: var(--text-2); font-size: 0.875rem; margin-top: var(--s1); }


            .faq-block { background: var(--card); backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: var(--r3); padding: var(--s5); margin-bottom: var(--s4); }


            .faq-block h3 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Noto Serif SC", sans-serif; color: var(--gold); margin-bottom: var(--s3); }


            .faq-block details { margin-bottom: var(--s2); color: var(--text-2); }


            .faq-block details summary { cursor: pointer; color: var(--text); font-weight: bold; }


            .faq-block details p { margin-top: var(--s2); margin-left: var(--s4); font-size: 0.9375rem; }


        
        /* ===== Share Card ===== */

/* ========================================
   Scroll Reveal Animations
   ======================================== */
.ls-reveal-scroll,
.reveal-section,
.reveal-line,
.journey-part,
.philosophy-reveal,
.principle,
.timeline-step,
.roadmap-item,
.faq-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.ls-reveal-scroll.visible,
.reveal-section.visible,
.reveal-line.visible,
.journey-part.visible,
.philosophy-reveal.visible,
.principle.visible,
.timeline-step.visible,
.roadmap-item.visible,
.faq-item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Graceful fallback: show content when JS not available */
noscript .reveal-line,
noscript .philosophy-reveal,
noscript .principle,
noscript .faq-item,
noscript .timeline-step,
noscript .roadmap-item,
noscript .ls-reveal-scroll,
noscript .reveal-section,
noscript .journey-part {
    opacity: 1;
    transform: translateY(0);
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ls-reveal-scroll,
    .reveal-section,
    .reveal-line,
    .journey-part,
    .philosophy-reveal,
    .principle,
    .timeline-step,
    .roadmap-item,
    .faq-item {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.reveal-line:nth-child(2) { transition-delay: 0.1s; }
.reveal-line:nth-child(3) { transition-delay: 0.2s; }
.reveal-line:nth-child(4) { transition-delay: 0.3s; }
.timeline-step:nth-child(1) { transition-delay: 0s; }
.timeline-step:nth-child(3) { transition-delay: 0.15s; }
.timeline-step:nth-child(5) { transition-delay: 0.3s; }
.timeline-step:nth-child(7) { transition-delay: 0.45s; }

/* Journey animations */
.journey-line {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.journey-line.visible {
    opacity: 1;
    transform: translateY(0);
}

.journey-keyword {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.journey-keyword.visible {
    opacity: 1;
    transform: scale(1);
}

/* ============================================================
   Hero 4.0 — Continuous Universe Overrides
   All sections transparent, fixed Hero Canvas shines through
   ============================================================ */

/* ── Section backgrounds → transparent / semi-transparent ── */
#brand.brand-section,
.universe-section,
.philosophy-section,
.journey-section,
.story-section {
  background: transparent !important;
}

#brand.brand-section {
  background: rgba(10, 8, 24, 0.55) !important;
}

.universe-section {
  background: rgba(8, 6, 20, 0.45) !important;
}

.philosophy-section {
  background: rgba(10, 8, 24, 0.5) !important;
}

.journey-section {
  background: rgba(8, 6, 20, 0.4) !important;
}

/* ── All generic sections get glass backing ── */
#home-how.section,
#home-roadmap.section,
#home-about-us.section,
#home-technology.section,
#home-faq.section,
#home-cta.section {
  background: rgba(10, 8, 24, 0.45);
}

/* ── Cards need dark glass for readability ── */
.ls-card,
.feature-card,
.service-card,
.brand-story-card {
  background: rgba(12, 10, 28, 0.65) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── Footer ── */
.footer {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ── Journey dark overlay: lighter to let cosmos through ── */
.journey-bg-overlay {
  background: radial-gradient(
    ellipse at 50% 35%,
    transparent 20%,
    rgba(4, 7, 19, 0.2) 50%,
    rgba(4, 7, 19, 0.4) 80%,
    rgba(4, 7, 19, 0.6) 100%
  ) !important;
}

/* ── Story section ── */
.story-section {
  background: rgba(250, 250, 249, 0.92) !important;
}

/* ── Page view base transparent ── */
.page-view {
  background: transparent !important;
}

#view-home {
  background: transparent !important;
}

/* ============================================================
   Hero 4.0 — Six Function Planets
   Circular gradient orbs + glow + hover ring expansion
   ============================================================ */

/* ── Planets grid container (positioned in hero section) ── */
.hero-planets {
  position: absolute;
  bottom: 4vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 18;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  pointer-events: auto;
}

/* ── Individual planet wrapper ── */
.hero-planet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.hero-planet .planet-name {
  font-family: 'Noto Serif SC', serif;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.4s ease;
}

.hero-planet:hover .planet-name {
  color: rgba(255, 255, 255, 0.85);
}

/* ── Planet orb base ── */
.planet-orb {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s ease;
}

/* ── Hover: ring expansion ── */
.planet-orb::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.35s ease,
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.hero-planet:hover .planet-orb {
  transform: scale(1.12);
}

.hero-planet:hover .planet-orb::after {
  opacity: 1;
  transform: scale(1.15);
}

/* ── Tarot — 暗金 #8B6508 ── */
.planet-tarot {
  background: radial-gradient(circle at 35% 35%, #C9A84C, #8B6508 65%, #5C3D00 100%);
  box-shadow:
    0 0 18px rgba(139, 101, 8, 0.45),
    0 0 40px rgba(139, 101, 8, 0.15),
    inset 0 -2px 6px rgba(0, 0, 0, 0.3);
}
.hero-planet:hover .planet-tarot {
  box-shadow:
    0 0 30px rgba(201, 168, 76, 0.6),
    0 0 60px rgba(139, 101, 8, 0.25),
    inset 0 -2px 6px rgba(0, 0, 0, 0.3);
}
.planet-tarot::after {
  border-color: rgba(201, 168, 76, 0.6);
}

/* ── AI Oracle — 银白 #C0C0C0 ── */
.planet-ai {
  background: radial-gradient(circle at 35% 35%, #F0F0F0, #C0C0C0 50%, #808080 100%);
  box-shadow:
    0 0 18px rgba(192, 192, 192, 0.4),
    0 0 40px rgba(192, 192, 192, 0.12),
    inset 0 -2px 6px rgba(0, 0, 0, 0.25);
}
.hero-planet:hover .planet-ai {
  box-shadow:
    0 0 30px rgba(240, 240, 240, 0.55),
    0 0 60px rgba(192, 192, 192, 0.22),
    inset 0 -2px 6px rgba(0, 0, 0, 0.25);
}
.planet-ai::after {
  border-color: rgba(240, 240, 240, 0.5);
}

/* ── Dream — 蓝紫 #6A5ACD ── */
.planet-dream {
  background: radial-gradient(circle at 35% 35%, #9B8FE8, #6A5ACD 55%, #3E3080 100%);
  box-shadow:
    0 0 18px rgba(106, 90, 205, 0.45),
    0 0 40px rgba(106, 90, 205, 0.15),
    inset 0 -2px 6px rgba(0, 0, 0, 0.3);
}
.hero-planet:hover .planet-dream {
  box-shadow:
    0 0 30px rgba(155, 143, 232, 0.6),
    0 0 60px rgba(106, 90, 205, 0.25),
    inset 0 -2px 6px rgba(0, 0, 0, 0.3);
}
.planet-dream::after {
  border-color: rgba(155, 143, 232, 0.55);
}

/* ── Community — 暖光 #FF8C42 ── */
.planet-community {
  background: radial-gradient(circle at 35% 35%, #FFB07A, #FF8C42 55%, #CC5500 100%);
  box-shadow:
    0 0 18px rgba(255, 140, 66, 0.45),
    0 0 40px rgba(255, 140, 66, 0.15),
    inset 0 -2px 6px rgba(0, 0, 0, 0.3);
}
.hero-planet:hover .planet-community {
  box-shadow:
    0 0 30px rgba(255, 176, 122, 0.6),
    0 0 60px rgba(255, 140, 66, 0.25),
    inset 0 -2px 6px rgba(0, 0, 0, 0.3);
}
.planet-community::after {
  border-color: rgba(255, 176, 122, 0.5);
}

/* ── Learning — 青灰 #5B7B8A ── */
.planet-learning {
  background: radial-gradient(circle at 35% 35%, #8FADBB, #5B7B8A 55%, #2E4A55 100%);
  box-shadow:
    0 0 18px rgba(91, 123, 138, 0.4),
    0 0 40px rgba(91, 123, 138, 0.12),
    inset 0 -2px 6px rgba(0, 0, 0, 0.3);
}
.hero-planet:hover .planet-learning {
  box-shadow:
    0 0 30px rgba(143, 173, 187, 0.55),
    0 0 60px rgba(91, 123, 138, 0.22),
    inset 0 -2px 6px rgba(0, 0, 0, 0.3);
}
.planet-learning::after {
  border-color: rgba(143, 173, 187, 0.5);
}

/* ── Astrology — 深蓝 #1B3A5C ── */
.planet-astrology {
  background: radial-gradient(circle at 35% 35%, #4B7FAD, #1B3A5C 60%, #0A1A2E 100%);
  box-shadow:
    0 0 18px rgba(27, 58, 92, 0.45),
    0 0 40px rgba(27, 58, 92, 0.15),
    inset 0 -2px 6px rgba(0, 0, 0, 0.35);
}
.hero-planet:hover .planet-astrology {
  box-shadow:
    0 0 30px rgba(75, 127, 173, 0.6),
    0 0 60px rgba(27, 58, 92, 0.25),
    inset 0 -2px 6px rgba(0, 0, 0, 0.35);
}
.planet-astrology::after {
  border-color: rgba(75, 127, 173, 0.55);
}

/* ── Mobile: smaller planets ── */
@media (max-width: 768px) {
  .hero-planets {
    bottom: 3vh;
    gap: 14px;
  }

  .planet-orb {
    width: 34px;
    height: 34px;
  }

  .hero-planet .planet-name {
    font-size: 9px;
    letter-spacing: 0.06em;
  }
}

@media (max-width: 480px) {
  .hero-planets {
    gap: 10px;
  }

  .planet-orb {
    width: 28px;
    height: 28px;
  }

  .hero-planet .planet-name {
    font-size: 8px;
  }
}