@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500;600;700;800&display=swap');

@scope (.mlc-calculator-page) {
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }

:scope {
    --bg-start:#FFFFFF;
    --bg-mid:#FFF8F8;
    --bg-end:#FFFFFF;
    --surface:#FFFFFF;
    --surface-glass:rgba(255,255,255,0.86);
    --rose:#E70021;
    --rose-deep:#C9001C;
    --rose-soft:#FF7F90;
    --rose-pale:#FFDDE2;
    --rose-mist:#FFF6F7;
    --rose-3d:#FFB2BF;
    --text-dark:#191719;
    --text-mid:#575257;
    --text-soft:#8E878E;
    --border:rgba(231,0,33,0.14);
    --shadow-sm:0 4px 14px rgba(231,0,33,0.06);
    --shadow-md:0 18px 48px rgba(231,0,33,0.11);
    --shadow-lg:0 28px 80px rgba(231,0,33,0.16);
    --transition:all .3s cubic-bezier(.4,0,.2,1);
    --orange:#FF6B35; --blue:#0070C0; --purple:#7030A0; --gold:#FFD700;
}
:scope[data-calculator-theme="dark"] {
    --bg-start:#1A0912; --bg-mid:#2A0E1A; --bg-end:#1E0A15;
    --surface:#2A0E1A;
    --surface-glass:rgba(42,14,26,0.75);
    --rose-mist:#3A1524; --rose-pale:#5A1F30;
    --text-dark:#FFEEF3; --text-mid:#D4B5C0; --text-soft:#8A6B75;
    --border:rgba(255,107,138,0.15);
    --shadow-sm:0 2px 8px rgba(0,0,0,0.3);
    --shadow-md:0 8px 32px rgba(0,0,0,0.4);
    --shadow-lg:0 20px 60px rgba(0,0,0,0.5);
}

:scope { overflow-x:hidden; }
:scope {
    font-family:'DM Sans',sans-serif;
    background:
        radial-gradient(circle at 8% 24%, rgba(255,178,191,0.22) 0 44px, transparent 74px),
        radial-gradient(circle at 86% 82%, rgba(255,221,226,0.42) 0 130px, transparent 260px),
        linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 50%, var(--bg-end) 100%);
    background-attachment:fixed;
    color:var(--text-dark);
    min-height:100vh;
    transition:var(--transition);
    position:relative;
}

/* ── FLOATING 3D HEARTS ── */
.floating-decor {
    position:fixed; inset:0;
    pointer-events:none;
    z-index:1;
    overflow:hidden;
}
.deco-heart {
    position:absolute;
    font-size:80px;
    color:var(--rose-3d);
    filter:blur(1px) drop-shadow(0 12px 24px rgba(255,127,144,0.28));
    opacity:.36;
    animation:heartFloat 12s ease-in-out infinite;
}
.deco-heart.h1 { top:20%; left:3%; font-size:96px; animation-delay:0s; opacity:.28; }
.deco-heart.h2 { top:52%; left:4%; font-size:70px; animation-delay:2s; opacity:.22; }
.deco-heart.h3 { top:26%; right:9%; font-size:60px; animation-delay:4s; opacity:.35; }
.deco-heart.h4 { top:65%; left:5%; font-size:45px; animation-delay:1s; opacity:.4; }
.deco-heart.h5 { top:72%; right:6%; font-size:50px; animation-delay:3s; opacity:.35; }
.deco-heart.h6 { top:50%; right:12%; font-size:35px; animation-delay:5s; opacity:.3; }

@keyframes heartFloat {
    0%,100% { transform:translate(0,0) rotate(-8deg); }
    50% { transform:translate(20px,-30px) rotate(8deg); }
}

.sparkle {
    position:absolute;
    color:var(--rose-soft);
    font-size:20px;
    opacity:.4;
    animation:sparkle 4s ease-in-out infinite;
}
.sparkle.s1 { top:35%; left:14%; animation-delay:0s; }
.sparkle.s2 { top:70%; left:10%; animation-delay:1.5s; }
.sparkle.s3 { top:15%; right:20%; animation-delay:2.5s; }
.sparkle.s4 { top:60%; right:15%; animation-delay:3s; }

@keyframes sparkle {
    0%,100% { opacity:.2; transform:scale(0.8); }
    50% { opacity:.7; transform:scale(1.2); }
}

/* ── TOPBAR ── */
.topbar {
    position:fixed; top:0; left:0; right:0;
    z-index:100;
    display:grid;
    grid-template-columns:minmax(180px, 320px) 1fr auto;
    align-items:center;
    gap:24px;
    padding:16px 56px;
    background:var(--surface-glass);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(231,0,33,0.08);
}
.main-nav {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:38px;
    min-width:0;
}
.main-nav a {
    flex:0 0 auto;
    position:relative;
    color:var(--text-dark);
    text-decoration:none;
    font-weight:800;
    font-size:.98rem;
    white-space:nowrap;
    padding:12px 0;
    transition:var(--transition);
}
.main-nav a:hover,
.main-nav a.active {
    color:var(--rose);
}
.main-nav a.active::after {
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:4px;
    height:3px;
    border-radius:999px;
    background:var(--rose);
    box-shadow:0 8px 14px rgba(231,0,33,.16);
}
.brand {
    display:flex; align-items:center;
    text-decoration:none;
    min-width:0;
}
.brand-logo-img {
    display:block;
    width:286px;
    max-width:min(46vw, 320px);
    height:auto;
    object-fit:contain;
    filter:drop-shadow(0 8px 18px rgba(230,0,35,0.08));
}
.brand-logo {
    width:34px; height:34px;
    display:flex; align-items:center; justify-content:center;
    font-size:26px;
    color:var(--rose);
    filter:drop-shadow(0 2px 6px rgba(230,0,35,0.3));
}
.brand-name {
    font-family:'DM Serif Display',serif;
    font-style:normal;
    font-size:1.55rem;
    font-weight:700;
    color:var(--rose);
    letter-spacing:0.3px;
}
.topbar-controls { display:flex; justify-content:flex-end; gap:10px; }
.ctrl-btn {
    width:54px; height:54px;
    border-radius:50%;
    border:1px solid rgba(25,23,25,0.08);
    background:var(--surface);
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-size:1.1rem;
    transition:var(--transition);
    box-shadow:0 10px 30px rgba(25,23,25,0.04);
}
.ctrl-btn:hover {
    border-color:var(--rose);
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
}

/* ── MAIN CONTAINER ── */
.container {
    max-width:1480px;
    margin:0 auto;
    padding:150px 56px 80px;
    position:relative;
    z-index:10;
}

/* ── HERO ── */
.hero {
    text-align:center;
    margin-bottom:48px;
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
}
.hero-tag {
    display:inline-block;
    background:var(--rose-pale);
    color:var(--rose);
    font-size:.78rem;
    font-weight:700;
    letter-spacing:2.5px;
    text-transform:uppercase;
    padding:8px 22px;
    border-radius:100px;
    margin-bottom:28px;
    animation:fadeInDown .6s ease-out;
}
.hero-title {
    font-family:'DM Serif Display',serif;
    font-size:4.6rem;
    line-height:1;
    letter-spacing:0;
    margin-bottom:20px;
    animation:fadeInUp .8s ease-out;
}
.hero-title em {
    font-style:italic;
    color:var(--rose);
    display:inline-block;
}
.title-divider {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin:24px auto;
    max-width:120px;
}
.title-divider::before,
.title-divider::after {
    content:'';
    flex:1;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--rose-soft), transparent);
}
.title-divider-heart {
    color:var(--rose-soft);
    font-size:14px;
}
.hero-sub {
    font-size:1.05rem;
    color:var(--text-mid);
    line-height:1.75;
    max-width:640px;
    margin:0 auto;
    animation:fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
    from { opacity:0; transform:translateY(20px); }
    to { opacity:1; transform:translateY(0); }
}
@keyframes fadeInDown {
    from { opacity:0; transform:translateY(-20px); }
    to { opacity:1; transform:translateY(0); }
}

/* ── CALCULATOR CARD ── */
.calc-card {
    background:rgba(255,255,255,0.78);
    border:1.5px solid rgba(231,0,33,0.42);
    border-radius:34px;
    padding:54px 58px 44px;
    max-width:760px;
    margin:0 auto;
    box-shadow:0 34px 90px rgba(231,0,33,0.14);
    animation:cardIn .8s cubic-bezier(.34,1.56,.64,1);
    position:relative;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    overflow:hidden;
}
.calc-card::before,
.calc-card::after {
    content:'✦';
    position:absolute;
    color:var(--rose-soft);
    opacity:.55;
    font-size:24px;
    pointer-events:none;
}
.calc-card::before { top:34px; left:42px; }
.calc-card::after { top:42px; right:44px; }
@keyframes cardIn {
    from { opacity:0; transform:translateY(30px) scale(.98); }
    to { opacity:1; transform:translateY(0) scale(1); }
}

.calc-title {
    font-family:'DM Serif Display',serif;
    font-size:3.35rem;
    color:var(--rose);
    text-align:center;
    margin-bottom:18px;
    line-height:1;
    letter-spacing:0;
}
.calc-divider {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin:0 auto 34px;
    max-width:220px;
}
.calc-divider::before,
.calc-divider::after {
    content:'';
    flex:1;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--rose), transparent);
}
.calc-divider-heart {
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:var(--rose);
    border-radius:50%;
    font-size:22px;
    box-shadow:0 12px 24px rgba(231,0,33,0.22);
}

/* ── FORM GRID ── */
.form-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-bottom:24px;
}
.field-label {
    display:block;
    font-size:.75rem;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--text-dark);
    margin-bottom:12px;
}
.input-wrap {
    position:relative;
}
.input-icon {
    position:absolute;
    left:24px;
    top:50%;
    transform:translateY(-50%);
    width:26px; height:26px;
    color:var(--rose);
    display:flex; align-items:center; justify-content:center;
    pointer-events:none;
}
.input-icon::after {
    content:'';
    width:1px;
    height:28px;
    background:var(--rose-pale);
    position:absolute;
    right:-16px;
    top:50%;
    transform:translateY(-50%);
}
.input-divider {
    position:absolute;
    left:52px;
    top:14px; bottom:14px;
    width:1px;
    background:var(--rose-pale);
    pointer-events:none;
}
.field-input {
    width:100%;
    padding:22px 24px 22px 86px;
    background:rgba(255,255,255,0.72);
    border:1.5px solid rgba(231,0,33,0.30);
    border-radius:12px;
    font-family:'DM Sans',sans-serif;
    font-size:1.12rem;
    color:var(--text-dark);
    transition:var(--transition);
    -webkit-appearance:none;
}
.field-input:focus {
    outline:none;
    border-color:var(--rose);
    box-shadow:0 0 0 5px rgba(231,0,33,0.08), 0 12px 34px rgba(231,0,33,0.08);
}
.field-input::placeholder {
    color:var(--text-soft);
    font-weight:400;
}

/* ── ATTENTION PULSE ── */
.input-wrap.attention .field-input {
    animation:attentionPulse 1.4s ease-in-out 3;
    border-color:var(--rose);
}
.input-wrap.attention::after {
    content:'';
    position:absolute;
    inset:-6px;
    border-radius:20px;
    border:2px solid var(--rose);
    opacity:0;
    animation:attentionRing 1.4s ease-out 3;
    pointer-events:none;
}
@keyframes attentionPulse {
    0%,100% {
        box-shadow:0 0 0 0 rgba(230,0,35,0);
        transform:scale(1);
    }
    50% {
        box-shadow:0 0 0 8px rgba(230,0,35,0.15), 0 8px 24px rgba(230,0,35,0.2);
        transform:scale(1.015);
    }
}
@keyframes attentionRing {
    0% { opacity:0; transform:scale(1); }
    50% { opacity:0.6; transform:scale(1.02); }
    100% { opacity:0; transform:scale(1.08); }
}

/* Arrow hint */
.input-hint {
    position:absolute;
    top:50%;
    right:16px;
    transform:translateY(-50%);
    font-size:1.2rem;
    color:var(--rose);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s;
}
.input-wrap.attention .input-hint {
    opacity:1;
    animation:hintBounce 1s ease-in-out infinite;
}
@keyframes hintBounce {
    0%,100% { transform:translateY(-50%) translateX(0); }
    50% { transform:translateY(-50%) translateX(-6px); }
}
.field-input:focus ~ .input-hint,
.input-wrap.filled .input-hint { opacity:0 !important; animation:none !important; }
.input-wrap.filled { animation:none; }
.input-wrap.filled::after { display:none; }

/* ── CALCULATE BUTTON ── */
.calc-btn {
    width:100%;
    margin-top:20px;
    padding:24px 20px;
    background:linear-gradient(180deg, #F5002D 0%, #E70021 48%, #C5001B 100%);
    color:#fff;
    border:none;
    border-radius:12px;
    font-family:'DM Serif Display',serif;
    font-size:1.45rem;
    font-weight:700;
    letter-spacing:0;
    cursor:pointer;
    transition:var(--transition);
    box-shadow:0 18px 36px rgba(231,0,33,0.34);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    position:relative;
    overflow:hidden;
}
.calc-btn::before {
    content:'';
    position:absolute;
    top:0; left:-100%;
    width:100%; height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition:left .6s;
}
.calc-btn:hover {
    transform:translateY(-3px);
    box-shadow:0 14px 40px rgba(230,0,35,0.45);
}
.calc-btn:hover::before { left:100%; }
.calc-btn:active { transform:translateY(-1px); }
.calc-btn:disabled { opacity:.7; cursor:not-allowed; transform:none; }
.calc-btn-heart {
    width:30px; height:30px;
    background:rgba(255,255,255,0.18);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:20px;
}

/* ── STATS ── */
.stats {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    max-width:820px;
    margin:60px auto 0;
    padding:0 20px;
}
.stat-item {
    text-align:center;
    padding:0 20px;
    border-right:1px solid var(--rose-pale);
    position:relative;
}
.stat-item:last-child { border-right:none; }
.stat-icon {
    width:44px; height:44px;
    margin:0 auto 16px;
    background:var(--rose-pale);
    color:var(--rose);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:1.1rem;
}
.stat-value {
    font-family:'DM Serif Display',serif;
    font-size:2.2rem;
    color:var(--rose);
    line-height:1;
    margin-bottom:6px;
}
.stat-label {
    font-size:.85rem;
    color:var(--text-mid);
    font-weight:500;
}

/* ── LOADING ── */
.loading-overlay {
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:360px;
    padding:58px 24px;
    gap:24px;
    border:1.5px solid rgba(231,0,33,.16);
    border-radius:24px;
    background:
        radial-gradient(circle at 50% 18%, rgba(255,210,219,.58), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,246,248,.92));
    box-shadow:0 22px 60px rgba(231,0,33,.12);
}
.loading-overlay.show { display:flex; }
.loading-spinner {
    width:104px; height:104px;
    border:8px solid #FFE1E8;
    border-top-color:var(--rose);
    border-right-color:var(--rose);
    border-radius:50%;
    animation:spin 1s linear infinite, lovePulse 1.9s ease-in-out infinite;
    position:relative;
    box-shadow:0 18px 34px rgba(231,0,33,.14);
}
.loading-spinner::after {
    content:'♥';
    position:absolute;
    inset:18px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#fff;
    color:var(--rose);
    font-size:2rem;
    animation:heartBeat 1.4s ease-in-out infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes lovePulse {
    0%, 100% { box-shadow:0 18px 34px rgba(231,0,33,.14); }
    50% { box-shadow:0 24px 50px rgba(231,0,33,.24); }
}
@keyframes heartBeat {
    0%, 100% { transform:scale(1); }
    35% { transform:scale(1.12); }
    55% { transform:scale(.96); }
}
.loading-step {
    font-size:1.08rem;
    color:var(--rose);
    font-weight:800;
    min-height:1.4em;
    text-align:center;
    letter-spacing:.3px;
}

/* ── RESULT CARD ── */
.result-card {
    width:100%;
    max-width:1368px;
    margin:56px auto 0;
    background:
        radial-gradient(circle at 11% 33%, rgba(255,221,226,0.64) 0 72px, transparent 160px),
        radial-gradient(circle at 88% 32%, rgba(255,221,226,0.52) 0 88px, transparent 180px),
        linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,248,249,0.92));
    border:1.5px solid rgba(231,0,33,0.28);
    border-radius:34px;
    padding:58px 72px 64px;
    text-align:center;
    box-shadow:0 30px 84px rgba(231,0,33,0.14);
    display:none;
    position:relative;
    z-index:10;
    overflow:hidden;
    scroll-margin-top:110px;
}
.result-card::before,
.result-card::after {
    content:'';
    position:absolute;
    width:220px;
    height:140px;
    bottom:150px;
    border-radius:70% 70% 0 0;
    background:rgba(255,221,226,0.55);
    filter:blur(1px);
    pointer-events:none;
    z-index:-1;
}
.result-card::before { left:-50px; }
.result-card::after { right:-54px; }
.result-card.show {
    display:block;
    animation:cardIn .55s cubic-bezier(.34,1.56,.64,1);
}
.result-label {
    font-size:.88rem;
    font-weight:700;
    letter-spacing:4px;
    text-transform:uppercase;
    color:var(--rose);
    margin-bottom:22px;
    display:inline-flex;
    align-items:center;
    gap:18px;
}
.result-label::before,
.result-label::after {
    content:'♥';
    color:var(--rose-pale);
    font-size:1rem;
    letter-spacing:0;
}
.result-names {
    font-family:'DM Serif Display',serif;
    font-size:4.4rem;
    color:var(--text-dark);
    margin-bottom:30px;
    line-height:1;
}
.result-names span {
    color:#68111F;
    font-style:italic;
}
.meter-wrap {
    width:320px;
    height:320px;
    background:transparent;
    border-radius:50%;
    overflow:hidden;
    margin:0 auto 28px;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    box-shadow:none;
    position:relative;
    display:grid;
    place-items:center;
}
.meter-fill {
    position:absolute;
    inset:0;
    height:100%;
    width:100% !important;
    border-radius:50%;
    background:conic-gradient(var(--rose) calc(var(--pct, 0) * 1%), #FFE2E7 0);
    -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 18px), #000 0);
    mask:radial-gradient(farthest-side, transparent calc(100% - 18px), #000 0);
    transition:width 1.4s cubic-bezier(.4,0,.2,1);
}
.result-percent {
    position:relative;
    z-index:1;
    font-family:'DM Serif Display',serif;
    font-size:8rem;
    color:var(--rose);
    line-height:1;
    margin-bottom:0;
    background:linear-gradient(135deg, #F90031 0%, var(--rose) 50%, var(--rose-deep) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}
.result-verdict {
    font-size:1.35rem;
    color:var(--text-mid);
    line-height:1.6;
    margin-bottom:18px;
    max-width:820px;
    margin-left:auto;
    margin-right:auto;
}
.stats-badge {
    display:inline-block;
    background:linear-gradient(180deg, #FFE8EC, #FFF5F6);
    border:1px solid rgba(231,0,33,0.12);
    color:var(--rose);
    font-size:1rem;
    font-weight:600;
    padding:10px 28px;
    border-radius:100px;
    margin-bottom:34px;
}

/* ── REACTIONS ── */
.reactions-row {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    justify-content:center;
    gap:0;
    max-width:920px;
    margin:0 auto 42px;
    padding:14px 18px;
    background:rgba(255,255,255,0.88);
    border:1px solid rgba(231,0,33,0.18);
    border-radius:24px;
    box-shadow:0 14px 38px rgba(231,0,33,0.10);
}
.reaction-btn {
    font-size:2.1rem;
    border:none;
    border-right:1px solid rgba(231,0,33,0.15);
    border-radius:0;
    background:transparent;
    padding:8px 16px;
    cursor:pointer;
    transition:var(--transition);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    min-width:0;
}
.reaction-btn:last-child { border-right:none; }
.reaction-btn::after {
    content:attr(title);
    font-size:.92rem;
    font-weight:700;
    color:var(--text-dark);
}
.reaction-btn:hover {
    color:var(--rose);
    transform:translateY(-3px);
}
.reaction-btn.active {
    color:var(--rose);
    background:transparent;
    box-shadow:none;
}
.reaction-count {
    font-size:1rem;
    color:var(--text-mid);
    font-weight:600;
}

/* ── RESULT DETAILS GRID ── */
.details-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    margin-bottom:28px;
    text-align:left;
}
.detail-card {
    background:rgba(255,255,255,0.86);
    border:1px solid rgba(231,0,33,0.14);
    border-radius:24px;
    padding:34px 38px;
    box-shadow:0 12px 34px rgba(231,0,33,0.06);
}
.detail-full { grid-column:1/-1; }

.section-title {
    font-size:.86rem;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--rose);
    margin-bottom:24px;
    display:flex;
    align-items:center;
    gap:8px;
}

/* Breakdown */
.category-list { display:flex; flex-direction:column; gap:14px; }
.cat-row { display:grid; grid-template-columns:34px 150px 1fr 58px; align-items:center; gap:16px; }
.cat-icon { font-size:1.4rem; flex-shrink:0; width:34px; text-align:center; }
.cat-label { font-size:1.02rem; font-weight:700; color:var(--text-mid); width:auto; flex-shrink:0; }
.cat-bar-wrap { flex:1; background:#F2EEF0; border-radius:100px; height:12px; overflow:hidden; }
.cat-bar-fill { height:100%; border-radius:100px; width:0%; transition:width 1.4s cubic-bezier(.4,0,.2,1); }
.cat-score { font-size:1rem; font-weight:700; color:var(--text-dark); width:auto; text-align:right; flex-shrink:0; }

/* Numerology */
.num-row { display:flex; gap:14px; align-items:center; margin-bottom:18px; }
.num-item { flex:1; text-align:center; }
.num-digit {
    font-family:'DM Serif Display',serif;
    font-size:3rem;
    color:var(--purple);
    line-height:1;
}
.num-name-label { font-size:.88rem; color:var(--text-soft); margin-top:4px; }
.num-op { font-size:1.8rem; color:var(--rose-soft); }
.num-meaning { font-size:1rem; color:var(--text-mid); line-height:1.55; font-style:italic; text-align:center; }

/* Famous couple */
.famous-row { display:flex; align-items:center; gap:14px; }
.famous-icon { font-size:3rem; flex-shrink:0; }
.famous-names { font-family:'DM Serif Display',serif; font-size:1.45rem; color:var(--text-dark); margin-bottom:6px; }
.famous-desc { font-size:1rem; color:var(--text-mid); }

/* Horoscope */
.horoscope-text { font-size:1.05rem; color:var(--text-mid); line-height:1.7; }

/* Advice */
.advice-text { font-size:1.05rem; color:var(--text-mid); line-height:1.7; font-style:italic; }
.advice-icon-wrap { color:var(--orange) !important; }

/* Easter egg */
.easter-egg-card {
    background:linear-gradient(135deg, #FFF0A0, #FFD700);
    border-radius:20px;
    padding:24px;
    margin-bottom:24px;
    text-align:center;
    display:none;
    animation:eggPop .6s cubic-bezier(.34,1.56,.64,1);
}
:scope[data-calculator-theme="dark"] .easter-egg-card { background:linear-gradient(135deg,#3A2D00,#5A4500); }
.easter-egg-card.show { display:block; }
@keyframes eggPop { from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)} }
.easter-egg-icon { font-size:3rem; margin-bottom:10px; }
.easter-egg-title { font-family:'DM Serif Display',serif; font-size:1.2rem; color:#7A5A00; margin-bottom:6px; }
:scope[data-calculator-theme="dark"] .easter-egg-title { color:#FFD700; }
.easter-egg-text { font-size:.9rem; color:#8A6A10; }
:scope[data-calculator-theme="dark"] .easter-egg-text { color:#D4AA40; }

/* ── SHARE ROW ── */
.share-panel {
    margin-bottom:18px;
    padding:28px;
    background:rgba(255,255,255,0.86);
    border:1px solid rgba(231,0,33,0.14);
    border-radius:24px;
    box-shadow:0 12px 34px rgba(231,0,33,0.06);
    text-align:center;
}
.share-title {
    margin:0;
    font-family:'DM Sans',sans-serif;
    font-size:1.45rem;
    line-height:1.15;
    color:var(--rose);
    font-weight:800;
}
.share-subtitle {
    margin:6px 0 22px;
    color:var(--text-muted);
    font-size:1rem;
}
.share-row {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:16px 22px;
}
.share-btn {
    min-height:66px;
    padding:14px 22px;
    border:1.5px solid rgba(231,0,33,0.22);
    border-radius:12px;
    background:var(--surface);
    font-family:'DM Sans',sans-serif;
    font-size:1rem;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition);
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:18px;
    color:var(--text-dark);
    box-shadow:0 8px 22px rgba(231,0,33,0.04);
}
.share-btn:hover {
    border-color:var(--rose);
    color:var(--rose);
    background:var(--rose-mist);
    transform:translateY(-2px);
}
.share-icon,
.share-icon-svg {
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:grid;
    place-items:center;
}
.share-icon {
    border-radius:9px;
    color:#fff;
    font-size:1.45rem;
    font-weight:800;
    line-height:1;
}
.share-icon-svg {
    color:currentColor;
}
.share-facebook .share-icon { background:#1877F2; font-family:Arial, sans-serif; font-size:2rem; }
.share-instagram .share-icon {
    background:radial-gradient(circle at 30% 110%, #FEDA75 0 18%, #FA7E1E 34%, #D62976 56%, #962FBF 74%, #4F5BD5 100%);
    font-size:1.75rem;
}
.share-whatsapp .share-icon { background:#25D366; font-size:1.35rem; }
.share-x .share-icon-svg,
.share-copy .share-icon-svg,
.share-download .share-icon-svg { color:#151515; }
.try-again-btn {
    width:100%;
    padding:20px;
    background:linear-gradient(135deg, #FF0040, #E60023 58%, #C9001F);
    border:0;
    border-radius:100px;
    font-family:'DM Sans',sans-serif;
    font-size:1.18rem;
    font-weight:700;
    color:#fff;
    cursor:pointer;
    transition:var(--transition);
    box-shadow:0 16px 30px rgba(230,0,35,0.22);
    position:relative;
}
.try-again-btn:hover {
    transform:translateY(-2px);
    box-shadow:0 20px 36px rgba(230,0,35,0.28);
}
.try-again-btn::after {
    content:'♡';
    position:absolute;
    right:32px;
    top:50%;
    transform:translateY(-52%);
    font-size:1.8rem;
    line-height:1;
}

/* ── SECONDARY SECTIONS ── */
.secondary-wrapper {
    width:100%;
    max-width:1368px;
    margin:92px auto 0;
    display:flex;
    flex-direction:column;
    gap:76px;
    position:relative;
    z-index:10;
}
.section-heading {
    font-family:'DM Serif Display',serif;
    font-size:3rem;
    color:var(--text-dark);
    margin-bottom:28px;
    text-align:center;
}
.section-heading em { color:var(--rose); font-style:italic; }

/* History */
#historySection {
    width:100%;
    max-width:1368px;
    margin:42px auto 56px;
    position:relative;
    z-index:10;
}
.history-header {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:16px;
}
.history-clear {
    font-size:.85rem;
    color:var(--text-soft);
    cursor:pointer;
    background:none;
    border:none;
    font-family:inherit;
    transition:color .2s;
}
.history-clear:hover { color:var(--rose); }
.history-list { display:flex; flex-direction:column; gap:12px; }
.history-item {
    background:var(--surface);
    border-radius:18px;
    padding:18px 24px;
    display:flex;
    align-items:center;
    gap:18px;
    box-shadow:var(--shadow-sm);
    cursor:pointer;
    transition:var(--transition);
}
.history-item:hover {
    box-shadow:var(--shadow-md);
    transform:translateY(-2px);
}
.history-percent {
    font-family:'DM Serif Display',serif;
    font-size:1.8rem;
    color:var(--rose);
    width:64px;
    text-align:center;
    flex-shrink:0;
}
.history-names { flex:1; }
.history-name-pair {
    font-size:1rem;
    font-weight:500;
    color:var(--text-dark);
}
.history-name-pair span { color:var(--rose); font-style:italic; }
.history-date { font-size:.8rem; color:var(--text-soft); margin-top:4px; }

/* FAQ */
.faq-list { display:flex; flex-direction:column; gap:12px; }
.faq-item {
    background:rgba(255,255,255,0.9);
    border:1px solid rgba(231,0,33,0.10);
    border-radius:18px;
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    transition:var(--transition);
}
.faq-item:hover { box-shadow:var(--shadow-md); }
.faq-q {
    width:100%;
    background:none;
    border:none;
    padding:22px 26px;
    text-align:left;
    font-family:'DM Sans',sans-serif;
    font-size:1rem;
    font-weight:600;
    color:var(--text-dark);
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
}
.faq-q:hover { color:var(--rose); }
.faq-chevron {
    font-size:.85rem;
    color:var(--rose-soft);
    transition:transform .3s;
    flex-shrink:0;
}
.faq-item.open .faq-chevron { transform:rotate(180deg); }
.faq-a {
    max-height:0;
    overflow:hidden;
    transition:max-height .4s ease, padding .3s;
    font-size:.95rem;
    color:var(--text-mid);
    line-height:1.7;
    padding:0 26px;
}
.faq-item.open .faq-a { max-height:250px; padding:0 26px 22px; }

/* ══ HERO SPLIT (2-column with form on right) ══ */
.hero-split {
    display:grid;
    grid-template-columns:minmax(420px, .9fr) minmax(620px, 1.25fr);
    gap:84px;
    align-items:center;
    margin-bottom:78px;
    position:relative;
}
.hero-split-left { text-align:left; }
.hero-split-tag {
    display:inline-block;
    background:linear-gradient(180deg, #FFE9EC, #FFDADF);
    color:var(--rose);
    font-size:.78rem;
    font-weight:700;
    letter-spacing:2.5px;
    text-transform:uppercase;
    padding:10px 26px;
    border-radius:100px;
    margin-bottom:28px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.9);
}
.hero-split-title {
    font-family:'DM Serif Display',serif;
    font-size:6.15rem;
    line-height:.92;
    letter-spacing:0;
    color:var(--text-dark);
    margin-bottom:26px;
    position:relative;
    text-shadow:0 7px 18px rgba(25,23,25,0.10);
}
.hero-split-title em {
    color:var(--rose);
    font-style:italic;
    display:inline-block;
}
.hero-heart-doodle {
    position:absolute;
    right:-40px;
    bottom:10px;
    color:var(--rose-soft);
    opacity:.55;
    font-size:2.2rem;
    transform:rotate(-8deg);
    pointer-events:none;
}
.hero-split-sub {
    font-size:1.11rem;
    color:var(--text-mid);
    line-height:1.65;
    margin-bottom:52px;
    max-width:520px;
}
.hero-cta-row {
    display:none;
    align-items:center;
    gap:24px;
    margin-bottom:36px;
    flex-wrap:wrap;
}
.hero-cta {
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:18px 40px;
    background:linear-gradient(135deg, #FF3366, var(--rose), var(--rose-deep));
    color:#fff;
    border-radius:100px;
    text-decoration:none;
    font-size:1.05rem;
    font-weight:600;
    transition:var(--transition);
    box-shadow:0 10px 28px rgba(230,0,35,0.35);
}
.hero-cta:hover {
    transform:translateY(-3px);
    box-shadow:0 14px 36px rgba(230,0,35,0.45);
}
.hero-cta-icon {
    width:24px; height:24px;
    background:rgba(255,255,255,0.25);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:12px;
}
.hero-cta-hint {
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--rose);
    font-size:.95rem;
    font-weight:500;
}
.hero-cta-hint::before {
    content:'♥';
    color:var(--rose-soft);
}
.hero-badges {
    display:grid;
    grid-template-columns:repeat(3, max-content);
    gap:0;
    align-items:center;
}
.hero-badge {
    display:flex;
    align-items:center;
    gap:14px;
    padding:0 22px;
    border-right:1px solid rgba(25,23,25,0.12);
}
.hero-badge:first-child {
    padding-left:0;
}
.hero-badge:last-child {
    border-right:none;
    padding-right:0;
}
.hero-badge-icon {
    width:58px; height:58px;
    background:linear-gradient(180deg, #FFE6EA, #FFD7DE);
    color:var(--rose);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}
.hero-badge-icon svg { width:26px; height:26px; }
.hero-badge-value {
    font-size:1.28rem;
    font-weight:700;
    color:var(--text-dark);
    line-height:1.1;
}
.hero-badge-label {
    font-size:.95rem;
    color:var(--text-mid);
    margin-top:2px;
}

/* Hero right = form card */
.hero-split-right { position:relative; }
#loveCalculator { scroll-margin-top:118px; }
.hero-form-float {
    position:absolute;
    bottom:-54px;
    right:-18px;
    background:var(--surface);
    border:1px solid rgba(231,0,33,0.16);
    border-radius:24px;
    padding:18px 28px;
    display:flex;
    align-items:center;
    gap:14px;
    box-shadow:0 22px 58px rgba(231,0,33,0.17);
    z-index:5;
}
.float-circle {
    position:relative;
    width:84px; height:84px;
    flex-shrink:0;
}
.float-circle svg { width:100%; height:100%; transform:rotate(-90deg); }
.float-circle-bg { fill:none; stroke:var(--rose-pale); stroke-width:7; }
.float-circle-fill { fill:none; stroke:var(--rose); stroke-width:7; stroke-linecap:round; }
.float-circle-text {
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'DM Serif Display',serif;
    font-size:1.45rem;
    color:var(--rose);
    font-weight:700;
}
.float-content { text-align:left; }
.float-title {
    font-family:'DM Serif Display',serif;
    font-size:1.18rem;
    color:var(--rose);
    line-height:1.1;
}
.float-desc {
    font-size:.95rem;
    color:var(--text-mid);
    margin-top:4px;
    display:flex;
    align-items:center;
    gap:4px;
}

/* Hero form divider */
.hero-form-divider {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin:22px 0 18px;
}
.hfd-line {
    flex:1;
    height:1px;
    border-top:1px dashed rgba(231,0,33,0.34);
}
.hfd-heart {
    width:54px; height:54px;
    background:#fff;
    color:var(--rose);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:24px;
    border:1px solid var(--rose-pale);
    box-shadow:0 12px 28px rgba(231,0,33,0.13);
}
.calc-card-footnote {
    text-align:center;
    margin-top:22px;
    font-size:1rem;
    color:var(--text-mid);
    letter-spacing:0.5px;
}

/* ══ COMPATIBILITY WITH BREAKDOWN MOCKUP ══ */
.compat-hero {
    background:rgba(255,255,255,0.86);
    border:1px solid rgba(231,0,33,0.12);
    border-radius:34px;
    padding:64px 72px;
    box-shadow:0 26px 70px rgba(231,0,33,0.11);
    display:grid;
    grid-template-columns:minmax(420px, .85fr) minmax(560px, 1.15fr);
    gap:76px;
    align-items:center;
    position:relative;
    overflow:hidden;
}
.compat-hero-left { text-align:left; }
.compat-highlight { color:var(--rose); font-weight:700; }
.compat-mini-grid {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:12px;
    margin-top:24px;
}
.compat-mini-card {
    background:#FFF7F8;
    border:1px solid rgba(231,0,33,0.10);
    border-radius:14px;
    padding:16px 8px;
    text-align:center;
}
.compat-mini-icon {
    width:36px; height:36px;
    margin:0 auto 8px;
    background:var(--surface);
    color:var(--rose);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 8px rgba(230,0,35,0.1);
}
.compat-mini-icon svg { width:18px; height:18px; }
.compat-mini-label {
    font-size:.8rem;
    font-weight:600;
    color:var(--text-dark);
}

/* Breakdown card (right side of compat) */
.breakdown-mockup {
    background:#FFF7F8;
    border:1px solid rgba(231,0,33,0.10);
    border-radius:26px;
    padding:34px;
    position:relative;
}
.breakdown-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}
.breakdown-header-title {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:.9rem;
    font-weight:600;
    color:var(--text-dark);
}
.breakdown-header-icon {
    width:24px; height:24px;
    background:var(--rose-pale);
    color:var(--rose);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:12px;
}
.breakdown-badge-heart {
    width:36px; height:36px;
    background:linear-gradient(135deg, var(--rose-soft), var(--rose));
    color:#fff;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:16px;
    box-shadow:0 6px 16px rgba(230,0,35,0.3);
}
.breakdown-rows { display:flex; flex-direction:column; gap:12px; }
.breakdown-row {
    display:grid;
    grid-template-columns:32px 100px 1fr 48px;
    align-items:center;
    gap:12px;
}
.breakdown-icon {
    width:32px; height:32px;
    background:var(--surface);
    color:var(--rose);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
}
.breakdown-icon svg { width:16px; height:16px; }
.breakdown-label {
    font-size:.9rem;
    color:var(--text-dark);
    font-weight:500;
}
.breakdown-bar-wrap {
    background:var(--surface);
    border-radius:100px;
    height:8px;
    overflow:hidden;
}
.breakdown-bar-fill {
    height:100%;
    border-radius:100px;
    background:linear-gradient(90deg, var(--rose-soft), var(--rose));
}
.breakdown-value {
    font-family:'DM Serif Display',serif;
    font-size:1.05rem;
    color:var(--rose);
    text-align:right;
}
.breakdown-footer {
    margin-top:16px;
    padding-top:14px;
    border-top:1px dashed var(--rose-pale);
    display:flex;
    align-items:center;
    gap:8px;
    font-size:.8rem;
    color:var(--text-mid);
    line-height:1.4;
}
.breakdown-footer-heart {
    color:var(--rose);
    font-size:.9rem;
}

/* ══ TRUE LOVE WITH CIRCLE ══ */
.truelove-hero {
    background:rgba(255,255,255,0.86);
    border:1px solid rgba(231,0,33,0.12);
    border-radius:34px;
    padding:64px 72px;
    box-shadow:0 26px 70px rgba(231,0,33,0.11);
    display:grid;
    grid-template-columns:minmax(360px, .75fr) minmax(580px, 1.25fr);
    gap:76px;
    align-items:center;
    position:relative;
    overflow:hidden;
}
.truelove-circle-side {
    background:#FFF7F8;
    border:1px solid rgba(231,0,33,0.10);
    border-radius:26px;
    padding:56px 28px;
    text-align:center;
    position:relative;
    overflow:hidden;
}
.truelove-circle-side::before {
    content:'♥';
    position:absolute;
    top:20px;
    left:24px;
    color:var(--rose-soft);
    opacity:.3;
    font-size:20px;
}
.truelove-circle-side::after {
    content:'✦';
    position:absolute;
    bottom:20px;
    right:30px;
    color:var(--rose-soft);
    opacity:.4;
    font-size:16px;
}
.truelove-circle {
    position:relative;
    width:260px; height:260px;
    margin:0 auto;
}
.truelove-circle svg { width:100%; height:100%; transform:rotate(-90deg); }
.truelove-circle-bg { fill:none; stroke:var(--rose-pale); stroke-width:8; }
.truelove-circle-fill { fill:none; stroke:var(--rose); stroke-width:8; stroke-linecap:round; }
.truelove-circle-inner {
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:20px;
}
.truelove-badge {
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:var(--rose-pale);
    color:var(--rose);
    padding:4px 12px;
    border-radius:100px;
    font-size:.68rem;
    font-weight:700;
    letter-spacing:1.5px;
    margin-bottom:10px;
}
.truelove-percent {
    font-family:'DM Serif Display',serif;
    font-size:3.5rem;
    color:var(--rose);
    line-height:1;
    margin-bottom:6px;
}
.truelove-percent .pct { font-size:2rem; }
.truelove-caption {
    font-size:.78rem;
    color:var(--text-mid);
    line-height:1.4;
    max-width:150px;
}
.truelove-content { text-align:left; }
.truelove-content .split-title { margin-bottom:14px; }
.truelove-features {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
    margin-top:24px;
    padding-top:24px;
    border-top:1px solid var(--rose-pale);
}
.truelove-feature {
    display:flex;
    flex-direction:column;
    gap:8px;
}
.truelove-feature-icon {
    width:38px; height:38px;
    background:var(--rose-pale);
    color:var(--rose);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
}
.truelove-feature-icon svg { width:18px; height:18px; }
.truelove-feature-title {
    font-size:.85rem;
    font-weight:700;
    color:var(--text-dark);
    line-height:1.2;
}
.truelove-feature-desc {
    font-size:.75rem;
    color:var(--text-mid);
    line-height:1.4;
}
.truelove-feature-pill {
    display:inline-block;
    margin-top:4px;
    background:var(--rose);
    color:#fff;
    padding:3px 10px;
    border-radius:100px;
    font-size:.7rem;
    font-weight:600;
    width:fit-content;
}

/* Responsive for new hero */
@media (max-width:1180px) {
    .topbar { padding:16px 32px; }
    .container { padding:130px 32px 72px; }
    .hero-split {
        grid-template-columns:1fr;
        gap:48px;
    }
    .hero-split-left {
        max-width:760px;
    }
    .hero-split-title {
        font-size:4.9rem;
    }
    .calc-card {
        max-width:860px;
    }
    .secondary-wrapper {
        margin-top:72px;
        gap:58px;
    }
    .content-split,
    .compat-hero,
    .truelove-hero {
        grid-template-columns:1fr;
        gap:42px;
    }
    .content-split {
        padding:54px 0;
    }
    .mockup-card {
        max-width:860px;
        width:100%;
    }
}
@media (max-width:900px) {
    .hero-split, .compat-hero, .truelove-hero { grid-template-columns:1fr; gap:36px; padding:32px 24px; }
    .hero-form-float { display:none; }
    .hero-split-title { font-size:3.2rem; }
    .compat-mini-grid { grid-template-columns:repeat(2, 1fr); }
    .truelove-features { grid-template-columns:1fr; gap:14px; }
    .breakdown-row { grid-template-columns:28px 90px 1fr 40px; }
    .hero-heart-doodle { display:none; }
    .hero-badges {
        grid-template-columns:repeat(3, max-content);
        gap:0;
    }
    .hero-badge {
        border-right:none;
        padding:0;
        min-width:180px;
    }
}

/* ── CONTENT BLOCKS ── */

/* SPLIT BLOCK (two columns with mockup) */
.content-split {
    display:grid;
    grid-template-columns:minmax(420px, .9fr) minmax(560px, 1.1fr);
    gap:86px;
    align-items:center;
    padding:68px 0;
}
.split-left { text-align:left; }
.split-eyebrow {
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--rose);
    font-size:.78rem;
    font-weight:700;
    letter-spacing:2.5px;
    text-transform:uppercase;
    margin-bottom:20px;
}
.split-eyebrow-heart {
    width:24px; height:24px;
    background:var(--rose-pale);
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
}
.split-title {
    font-family:'DM Serif Display',serif;
    font-size:4rem;
    line-height:1.05;
    letter-spacing:0;
    color:var(--text-dark);
    margin-bottom:24px;
}
.split-title em { color:var(--rose); font-style:italic; }
.split-text {
    font-size:1.12rem;
    color:var(--text-mid);
    line-height:1.75;
    margin-bottom:18px;
    max-width:600px;
}
.split-cta-row {
    display:flex;
    align-items:center;
    gap:20px;
    margin-top:32px;
    flex-wrap:wrap;
}
.split-cta {
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:16px 32px;
    background:linear-gradient(180deg, #F90431 0%, var(--rose) 55%, var(--rose-deep) 100%);
    color:#fff;
    border-radius:100px;
    text-decoration:none;
    font-size:1rem;
    font-weight:600;
    transition:var(--transition);
    box-shadow:0 8px 24px rgba(230,0,35,0.3);
}
.split-cta:hover {
    background:var(--rose-deep);
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(230,0,35,0.4);
}
.split-cta-hint {
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--rose);
    font-size:.95rem;
    font-weight:500;
}
.split-cta-hint::before {
    content:'→';
    font-size:1.1rem;
}

/* Mockup card (right side) */
.mockup-card {
    background:rgba(255,255,255,0.9);
    border:1px solid rgba(231,0,33,0.12);
    border-radius:30px;
    padding:56px;
    box-shadow:0 26px 70px rgba(231,0,33,0.11);
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:44px;
    align-items:center;
    position:relative;
    min-height:330px;
}
.mockup-inputs { display:flex; flex-direction:column; gap:20px; }
.mockup-field-label {
    font-size:.7rem;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--text-mid);
    margin-bottom:8px;
}
.mockup-input {
    background:var(--surface);
    border:1.5px solid var(--rose-pale);
    border-radius:14px;
    padding:14px 18px;
    display:flex;
    align-items:center;
    gap:12px;
    font-size:.95rem;
    color:var(--text-dark);
    box-shadow:0 4px 12px rgba(230,0,35,0.06);
}
.mockup-input-icon {
    width:24px; height:24px;
    color:var(--rose-soft);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}
.mockup-divider-heart {
    width:52px; height:52px;
    background:linear-gradient(135deg, var(--rose-soft), var(--rose));
    color:#fff;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:22px;
    box-shadow:0 8px 20px rgba(230,0,35,0.35);
    position:relative;
}
.mockup-divider-heart::before,
.mockup-divider-heart::after {
    content:'';
    position:absolute;
    top:50%;
    width:24px;
    height:2px;
    border-top:2px dashed var(--rose-pale);
}
.mockup-divider-heart::before { right:100%; margin-right:4px; }
.mockup-divider-heart::after { left:100%; margin-left:4px; }
.mockup-result {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
}
.mockup-circle {
    position:relative;
    width:190px; height:190px;
}
.mockup-circle svg { width:100%; height:100%; transform:rotate(-90deg); }
.mockup-circle-bg { fill:none; stroke:var(--rose-pale); stroke-width:10; }
.mockup-circle-fill { fill:none; stroke:var(--rose); stroke-width:10; stroke-linecap:round; }
.mockup-circle-text {
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    line-height:1.1;
}
.mockup-circle-percent {
    font-family:'DM Serif Display',serif;
    font-size:2.8rem;
    color:var(--rose);
}
.mockup-circle-label {
    font-size:.8rem;
    color:var(--text-dark);
    font-weight:600;
}
.mockup-badge {
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--rose-pale);
    color:var(--rose);
    padding:10px 20px;
    border-radius:100px;
    font-size:.95rem;
    font-weight:600;
}

/* CENTERED BLOCK (with cards grid) */
.content-centered {
    padding:70px 0 64px;
    text-align:center;
    border-top:1px solid rgba(231,0,33,0.08);
    border-bottom:1px solid rgba(231,0,33,0.08);
}
.centered-heart {
    display:inline-block;
    color:var(--rose);
    font-size:1.6rem;
    margin-bottom:16px;
}
.centered-title {
    font-family:'DM Serif Display',serif;
    font-size:3.7rem;
    line-height:1.1;
    letter-spacing:0;
    color:var(--text-dark);
    margin-bottom:16px;
}
.centered-title em { color:var(--rose); font-style:italic; }
.centered-subtitle {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    color:var(--text-mid);
    font-size:1.1rem;
    line-height:1.6;
    max-width:780px;
    margin:0 auto 48px;
}
.centered-subtitle::before,
.centered-subtitle::after {
    content:'♥';
    color:var(--rose-soft);
    font-size:.8rem;
    opacity:.6;
}

/* Card grid */
.card-grid {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:24px;
}
.info-card {
    background:#FFF7F8;
    border:1px solid rgba(231,0,33,0.10);
    border-radius:20px;
    padding:36px 28px;
    text-align:center;
    transition:var(--transition);
    min-height:230px;
}
.info-card:hover {
    transform:translateY(-6px);
    box-shadow:0 18px 44px rgba(231,0,33,0.12);
}
.info-card-icon {
    width:56px; height:56px;
    margin:0 auto 16px;
    background:var(--surface);
    color:var(--rose);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 12px rgba(230,0,35,0.1);
}
.info-card-icon svg { width:24px; height:24px; }
.info-card-percent {
    font-family:'DM Serif Display',serif;
    font-size:2.1rem;
    color:var(--rose);
    margin-bottom:6px;
    line-height:1;
}
.info-card-title {
    font-size:1rem;
    font-weight:700;
    color:var(--text-dark);
    margin-bottom:10px;
}
.info-card-desc {
    font-size:.85rem;
    color:var(--text-mid);
    line-height:1.5;
}

/* Compatibility test row (2-col with icon list) */
.content-compat {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
    align-items:center;
    padding:32px 0;
}
.compat-feature-list {
    display:flex;
    flex-direction:column;
    gap:18px;
    list-style:none;
    padding:0;
}
.compat-feature {
    display:flex;
    gap:16px;
    align-items:flex-start;
    background:var(--rose-mist);
    padding:20px 24px;
    border-radius:18px;
}
.compat-feature-icon {
    width:44px; height:44px;
    background:var(--surface);
    color:var(--rose);
    border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.2rem;
    flex-shrink:0;
    box-shadow:0 4px 10px rgba(230,0,35,0.1);
}
.compat-feature-body { flex:1; }
.compat-feature-title {
    font-size:1.05rem;
    font-weight:700;
    color:var(--text-dark);
    margin-bottom:4px;
}
.compat-feature-desc {
    font-size:.9rem;
    color:var(--text-mid);
    line-height:1.5;
}

/* Responsive for new blocks */
@media (max-width:900px) {
    .content-split, .content-compat { grid-template-columns:1fr; gap:36px; }
    .card-grid { grid-template-columns:repeat(2, 1fr); }
    .mockup-card { padding:28px 20px; gap:16px; grid-template-columns:1fr; }
    .mockup-divider-heart::before, .mockup-divider-heart::after { display:none; }
}
@media (max-width:480px) {
    .card-grid { grid-template-columns:1fr; }
}

/* Footer */
.site-footer {
    text-align:center;
    padding:46px 20px 26px;
    font-size:.85rem;
    color:var(--text-soft);
    line-height:1.6;
    position:relative;
    z-index:10;
}
.site-footer p {
    margin:0;
}
.footer-nav {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px 28px;
    margin:14px 0 8px;
}
.footer-nav a {
    font-weight:800;
}
.footer-legal {
    font-size:.8rem;
}
.site-footer a { color:var(--rose); text-decoration:none; }
.site-footer a:hover { text-decoration:underline; }

/* Legal pages */
.legal-container {
    width:100%;
    max-width:980px;
    margin:0 auto;
    padding:150px 24px 64px;
}
.legal-card {
    background:rgba(255,255,255,0.9);
    border:1px solid rgba(231,0,33,0.14);
    border-radius:26px;
    box-shadow:0 24px 70px rgba(231,0,33,0.08);
    padding:44px;
}
.legal-eyebrow {
    font-size:.78rem;
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--rose);
    font-weight:800;
    margin-bottom:12px;
}
.legal-title {
    font-family:'DM Serif Display',serif;
    font-size:3rem;
    line-height:1.05;
    margin:0 0 16px;
    color:var(--text-dark);
}
.legal-updated {
    color:var(--text-soft);
    margin-bottom:30px;
}
.legal-card h2 {
    font-family:'DM Serif Display',serif;
    font-size:1.55rem;
    color:var(--text-dark);
    margin:30px 0 10px;
}
.legal-card p,
.legal-card li {
    color:var(--text-mid);
    line-height:1.75;
    font-size:1rem;
}
.legal-card ul {
    padding-left:22px;
}
.legal-contact-box {
    margin-top:26px;
    padding:20px;
    border-radius:18px;
    background:var(--rose-mist);
    border:1px solid rgba(231,0,33,0.14);
}
.legal-contact-box a {
    color:var(--rose);
    font-weight:800;
    text-decoration:none;
}
.legal-back {
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:30px;
    color:var(--rose);
    font-weight:800;
    text-decoration:none;
}
.legal-back:hover { text-decoration:underline; }

/* Zodiac calculator page */
.zodiac-page {
    --z-red:#E60023;
    --z-wine:#2A0715;
    --z-blush:#FFF5F7;
    --z-border:#FFD3DC;
    --z-text:#241018;
    background:
        radial-gradient(circle at 7% 28%, rgba(255,211,220,0.42) 0 70px, transparent 180px),
        radial-gradient(circle at 90% 82%, rgba(255,211,220,0.34) 0 90px, transparent 220px),
        linear-gradient(180deg, #fff 0%, var(--z-blush) 46%, #fff 100%);
    color:var(--z-text);
}
.zodiac-bg-glyphs {
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
}
.zodiac-bg-glyphs span {
    position:absolute;
    color:#E60023;
    opacity:.14;
    font-size:1.9rem;
    font-family:'DM Serif Display',serif;
}
.zodiac-bg-glyphs span:nth-child(1) { top:14%; left:5%; }
.zodiac-bg-glyphs span:nth-child(2) { top:15%; left:22%; }
.zodiac-bg-glyphs span:nth-child(3) { top:28%; left:3%; }
.zodiac-bg-glyphs span:nth-child(4) { top:39%; left:7%; }
.zodiac-bg-glyphs span:nth-child(5) { top:53%; left:4%; }
.zodiac-bg-glyphs span:nth-child(6) { top:67%; left:8%; }
.zodiac-bg-glyphs span:nth-child(7) { top:68%; left:23%; }
.zodiac-bg-glyphs span:nth-child(8) { top:18%; right:55%; }
.zodiac-bg-glyphs span:nth-child(9) { top:31%; right:50%; }
.zodiac-bg-glyphs span:nth-child(10) { top:12%; right:32%; }
.zodiac-bg-glyphs span:nth-child(11) { top:44%; right:8%; }
.zodiac-bg-glyphs span:nth-child(12) { top:72%; right:12%; }
.zodiac-topbar {
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:110;
    min-height:86px;
    display:grid;
    grid-template-columns:minmax(210px, 320px) 1fr auto;
    align-items:center;
    gap:24px;
    padding:14px 38px;
    background:rgba(255,255,255,.9);
    border-bottom:1px solid rgba(230,0,35,.1);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}
.zodiac-brand img {
    display:block;
    width:286px;
    max-width:100%;
    height:auto;
}
.zodiac-nav {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:42px;
}
.zodiac-nav a {
    color:#171015;
    text-decoration:none;
    font-weight:700;
    position:relative;
    padding:12px 0;
}
.zodiac-nav a.active {
    color:var(--z-red);
}
.zodiac-nav a.active::after {
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:3px;
    height:3px;
    border-radius:999px;
    background:var(--z-red);
    box-shadow:0 8px 14px rgba(230,0,35,.16);
}
.zodiac-controls {
    display:flex;
    gap:10px;
}
.zodiac-shell {
    position:relative;
    z-index:2;
    width:100%;
    max-width:1640px;
    margin:0 auto;
    padding:142px 56px 72px;
}
.zodiac-hero {
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(520px, 720px);
    gap:74px;
    align-items:center;
    min-height:640px;
}
.zodiac-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-height:42px;
    padding:10px 0;
    border:0;
    border-radius:999px;
    color:var(--z-red);
    text-transform:uppercase;
    font-weight:800;
    letter-spacing:2.6px;
    font-size:1rem;
    background:transparent;
    margin-bottom:42px;
}
.zodiac-badge span {
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border:2px solid currentColor;
    border-radius:50%;
    font-size:1.1rem;
    line-height:1;
}
.zodiac-hero h1 {
    margin:0;
    max-width:760px;
    font-family:'DM Serif Display',serif;
    font-size:6.1rem;
    line-height:.98;
    color:var(--z-wine);
    letter-spacing:0;
}
.zodiac-hero h1::first-line {
    color:var(--z-wine);
}
.zodiac-hero-divider {
    width:min(460px, 70%);
    display:flex;
    align-items:center;
    gap:18px;
    margin:32px 0 0;
    color:#F05A71;
}
.zodiac-hero-divider::before,
.zodiac-hero-divider::after {
    content:'';
    height:1px;
    flex:1;
    background:linear-gradient(90deg, transparent, rgba(230,0,35,.25), transparent);
}
.zodiac-hero-divider span {
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    color:var(--z-red);
    font-size:1.4rem;
}
.zodiac-hero-copy p {
    margin:34px 0 44px;
    max-width:620px;
    color:#51434A;
    font-size:1.45rem;
    line-height:1.65;
}
.zodiac-benefits {
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}
.zodiac-benefits span {
    min-height:52px;
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:12px 22px;
    border:1px solid var(--z-border);
    border-radius:999px;
    background:rgba(255,255,255,.72);
    color:#241018;
    font-weight:800;
    font-size:.96rem;
    box-shadow:0 10px 28px rgba(230,0,35,.05);
}
.zodiac-form-card {
    position:relative;
    background:rgba(255,255,255,.9);
    border:1.5px solid var(--z-border);
    border-top:5px solid var(--z-red);
    border-radius:18px;
    box-shadow:0 24px 74px rgba(42,7,21,.1), 0 34px 70px rgba(230,0,35,.07);
    padding:68px 58px 40px;
}
.zodiac-form-card::before {
    content:'♥';
    position:absolute;
    top:-30px;
    left:50%;
    transform:translateX(-50%);
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:linear-gradient(145deg, #FF4D67, #E60023);
    color:#fff;
    font-size:1.45rem;
    box-shadow:0 14px 30px rgba(230,0,35,.28);
}
.zodiac-form-title {
    margin:0 0 44px;
    text-align:center;
    font-family:'DM Serif Display',serif;
    color:var(--z-wine);
    font-size:2.65rem;
    line-height:1.1;
}
.zodiac-form-card label {
    display:block;
    margin:0 0 16px;
    font-weight:800;
    color:#1E1419;
    font-size:1.08rem;
}
.zodiac-picker {
    position:relative;
    margin-bottom:34px;
}
.zodiac-picker-btn {
    width:100%;
    min-height:118px;
    display:grid;
    grid-template-columns:78px 1fr auto;
    align-items:center;
    gap:22px;
    border:1.5px solid var(--z-border);
    border-radius:16px;
    background:rgba(255,255,255,.92);
    color:#171015;
    padding:18px 28px;
    text-align:left;
    cursor:pointer;
    outline:none;
    transition:var(--transition);
}
.zodiac-picker-btn:focus,
.zodiac-picker.open .zodiac-picker-btn {
    border-color:var(--z-red);
    box-shadow:0 0 0 5px rgba(230,0,35,.08);
}
.zodiac-select-glyph,
.zodiac-option-glyph {
    width:78px;
    height:78px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:radial-gradient(circle at 35% 28%, #FF7E8F 0 12%, #F62B4C 34%, #E60023 68%, #B90021 100%);
    color:#fff;
    font-family:'DM Serif Display',serif;
    font-size:2.8rem;
    line-height:1;
    flex:none;
    box-shadow:inset 0 10px 18px rgba(255,255,255,.24), 0 14px 26px rgba(230,0,35,.18);
}
.zodiac-picker-text strong,
.zodiac-option-text strong {
    display:block;
    color:#171015;
    font:800 1.7rem 'DM Sans',sans-serif;
}
.zodiac-picker-text small,
.zodiac-option-text small {
    display:block;
    margin-top:8px;
    color:#8A747C;
    font:700 1rem 'DM Sans',sans-serif;
    line-height:1.2;
}
.zodiac-picker-chevron {
    color:#2A0715;
    font-size:1.8rem;
    line-height:1;
    transition:var(--transition);
}
.zodiac-picker.open .zodiac-picker-chevron {
    transform:rotate(180deg);
}
.zodiac-options {
    position:absolute;
    z-index:70;
    top:calc(100% + 8px);
    left:0;
    right:0;
    display:none;
    max-height:330px;
    overflow:auto;
    padding:8px;
    border:1px solid var(--z-border);
    border-radius:14px;
    background:#fff;
    box-shadow:0 22px 50px rgba(42,7,21,.16);
}
.zodiac-picker.open .zodiac-options {
    display:grid;
    gap:4px;
}
.zodiac-option {
    width:100%;
    display:grid;
    grid-template-columns:52px 1fr;
    align-items:center;
    gap:14px;
    border:0;
    border-radius:10px;
    background:transparent;
    padding:10px 12px;
    text-align:left;
    cursor:pointer;
    transition:var(--transition);
}
.zodiac-option:hover,
.zodiac-option.active {
    background:#FFF0F3;
}
.zodiac-option-glyph {
    width:52px;
    height:52px;
    font-size:1.8rem;
}
.zodiac-option-text strong {
    font-size:1.08rem;
}
.zodiac-option-text small {
    margin-top:3px;
    font-size:.74rem;
}
.zodiac-calc-btn {
    width:100%;
    min-height:86px;
    border:0;
    border-radius:12px;
    background:linear-gradient(135deg, #FF0040, #E60023 58%, #C9001F);
    color:#fff;
    font:800 1.35rem 'DM Sans',sans-serif;
    cursor:pointer;
    box-shadow:0 18px 34px rgba(230,0,35,.24);
    transition:var(--transition);
}
.zodiac-calc-btn:hover {
    transform:translateY(-2px);
    box-shadow:0 22px 40px rgba(230,0,35,.3);
}
.zodiac-calc-btn:disabled,
.calc-btn:disabled {
    cursor:wait;
    opacity:.78;
    transform:none;
}
.zodiac-form-note {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0;
    text-align:center;
    margin:28px 0 0;
    color:#6E6268;
    font-weight:800;
}
.zodiac-form-note span {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:0 26px;
}
.zodiac-form-note span + span {
    border-left:1px solid var(--z-border);
}
.zodiac-preview {
    display:none;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin:8px 0 42px;
    padding:18px 24px;
    border:1px solid var(--z-border);
    border-radius:18px;
    background:rgba(255,255,255,.76);
    box-shadow:0 12px 34px rgba(230,0,35,.06);
}
.zodiac-preview.show {
    display:flex;
}
.zodiac-loading {
    display:none;
    max-width:760px;
    margin:0 auto 46px;
    padding:38px 34px;
    border:1.5px solid var(--z-border);
    border-radius:24px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,210,219,.62), transparent 45%),
        rgba(255,255,255,.88);
    box-shadow:0 24px 70px rgba(230,0,35,.12);
    text-align:center;
}
.zodiac-loading.show {
    display:grid;
    place-items:center;
    gap:18px;
    animation:cardIn .35s ease;
}
.zodiac-loading-ring {
    width:132px;
    aspect-ratio:1;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:conic-gradient(var(--z-red) 0 74%, #FFE1E8 0);
    position:relative;
    animation:spin 1.25s linear infinite, lovePulse 2s ease-in-out infinite;
}
.zodiac-loading-ring::after {
    content:'';
    position:absolute;
    inset:16px;
    border-radius:50%;
    background:#fff;
}
.zodiac-loading-ring span {
    position:relative;
    z-index:1;
    display:grid;
    place-items:center;
    width:72px;
    height:72px;
    border-radius:50%;
    color:#fff;
    background:linear-gradient(145deg, #FF4D67, #E60023);
    font-size:2rem;
    animation:heartBeat 1.35s ease-in-out infinite;
}
.zodiac-loading strong {
    display:block;
    color:var(--z-wine);
    font:800 1.55rem 'DM Serif Display',serif;
}
.zodiac-loading p {
    margin:8px 0 0;
    color:#6E6268;
    font-weight:800;
}
.zodiac-loading-dots {
    display:flex;
    gap:8px;
}
.zodiac-loading-dots span {
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--z-red);
    animation:dotPulse 1s ease-in-out infinite;
}
.zodiac-loading-dots span:nth-child(2) { animation-delay:.16s; }
.zodiac-loading-dots span:nth-child(3) { animation-delay:.32s; }
@keyframes dotPulse {
    0%, 100% { opacity:.35; transform:translateY(0); }
    50% { opacity:1; transform:translateY(-5px); }
}
.zodiac-preview strong {
    color:var(--z-wine);
    font-family:'DM Serif Display',serif;
    font-size:1.35rem;
}
.zodiac-preview span {
    color:#5A4A51;
    font-weight:700;
    margin-left:8px;
}
.zodiac-preview-meter {
    width:180px;
    height:12px;
    border-radius:999px;
    background:#FFE1E8;
    overflow:hidden;
}
.zodiac-preview-meter span {
    display:block;
    height:100%;
    width:82%;
    border-radius:inherit;
    background:var(--z-red);
    margin:0;
}
.zodiac-result-card {
    display:none;
    margin:0 0 70px;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
}
.zodiac-result-card.show {
    display:block;
    animation:cardIn .45s ease;
}
.zodiac-result-top {
    display:grid;
    grid-template-columns:300px minmax(360px, 1fr) 430px;
    align-items:center;
    gap:0;
    padding:58px 40px;
    border:1.5px solid var(--z-border);
    border-radius:28px;
    background:rgba(255,255,255,.86);
    box-shadow:0 24px 80px rgba(42,7,21,.08);
}
.zodiac-result-score-col {
    display:grid;
    place-items:center;
}
.zodiac-result-pair {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:14px;
    font-family:'DM Serif Display',serif;
    color:var(--z-wine);
    font-size:2.45rem;
    line-height:1;
    margin-bottom:28px;
}
.zodiac-result-pair strong {
    font:inherit;
}
.zodiac-result-glyph {
    width:64px;
    height:64px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#FFF0F3;
    color:var(--z-red);
    font-family:'DM Serif Display',serif;
    font-size:2.2rem;
    box-shadow:0 12px 28px rgba(230,0,35,.08);
}
.zodiac-result-heart {
    color:var(--z-red);
    font-size:2rem;
}
.zodiac-result-copy {
    min-height:260px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:0 56px;
    border-left:1px solid var(--z-border);
    border-right:1px solid var(--z-border);
}
.zodiac-score-ring {
    width:250px;
    aspect-ratio:1;
    border-radius:50%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:conic-gradient(var(--z-red) var(--score), #FFE1E8 0);
    position:relative;
    box-shadow:0 22px 40px rgba(230,0,35,.12);
}
.zodiac-score-ring::after {
    content:'';
    position:absolute;
    inset:20px;
    border-radius:50%;
    background:#fff;
}
.zodiac-score-ring span {
    position:relative;
    z-index:1;
    font-family:'DM Serif Display',serif;
    font-size:5.15rem;
    line-height:.92;
    color:var(--z-red);
}
.zodiac-score-ring small {
    position:relative;
    z-index:1;
    display:block;
    margin-top:16px;
    padding-top:16px;
    color:var(--z-wine);
    font:800 1.08rem 'DM Serif Display',serif;
}
.zodiac-score-ring small::before {
    content:'♥';
    position:absolute;
    top:-8px;
    left:50%;
    transform:translateX(-50%);
    width:64px;
    border-top:1px solid #FFBCC8;
    color:var(--z-red);
    text-align:center;
    line-height:0;
}
.zodiac-result-label {
    font-family:'DM Serif Display',serif;
    font-size:3rem;
    line-height:1.05;
    color:var(--z-red);
    margin-bottom:20px;
}
.zodiac-result-card p {
    color:#55454D;
    line-height:1.58;
    font-size:1.24rem;
    margin:0;
}
.zodiac-breakdown {
    display:grid;
    gap:24px;
    margin:0;
    padding-left:44px;
}
.zodiac-break-row {
    display:grid;
    grid-template-columns:1fr 52px;
    gap:10px 18px;
    align-items:center;
}
.zodiac-break-row strong {
    grid-column:1;
    color:var(--z-wine);
    font-size:1.02rem;
}
.zodiac-break-track {
    grid-column:1;
    height:12px;
    border-radius:999px;
    background:#FFE1E8;
    overflow:hidden;
}
.zodiac-break-track span {
    display:block;
    height:100%;
    width:var(--value);
    border-radius:inherit;
    background:var(--color, var(--z-red));
}
.zodiac-break-row em {
    grid-column:2;
    grid-row:1 / 3;
    align-self:center;
    font-style:normal;
    text-align:right;
    color:var(--z-wine);
    font-weight:800;
    font-size:1.16rem;
}
.zodiac-insights {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:24px;
    margin:34px 0 34px;
}
.zodiac-insight-card {
    min-height:260px;
    padding:34px 32px 28px;
    border:1.5px solid var(--z-border);
    border-radius:22px;
    background:rgba(255,255,255,.86);
    box-shadow:0 18px 54px rgba(42,7,21,.05);
}
.zodiac-insight-icon {
    width:62px;
    height:62px;
    display:grid;
    place-items:center;
    margin-bottom:22px;
    border-radius:50%;
    background:#FFF0F3;
    color:var(--z-red);
    font-size:2rem;
}
.zodiac-insight-card span {
    display:block;
    color:var(--z-red);
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:.74rem;
    font-weight:900;
    margin-bottom:14px;
}
.zodiac-insight-card strong {
    display:block;
    color:var(--z-wine);
    font-family:'DM Serif Display',serif;
    font-size:1.35rem;
    margin-bottom:12px;
}
.zodiac-insight-card p {
    font-size:1rem;
    line-height:1.62;
    margin:0;
}
.zodiac-how {
    padding:28px 0 60px;
    border-bottom:1px solid var(--z-border);
}
.zodiac-section-rule {
    display:flex;
    align-items:center;
    gap:24px;
    justify-content:center;
    margin-bottom:34px;
    color:var(--z-wine);
    font-family:'DM Serif Display',serif;
    font-size:1.7rem;
}
.zodiac-section-rule::before,
.zodiac-section-rule::after {
    content:'';
    height:1px;
    flex:1;
    max-width:380px;
    background:var(--z-border);
}
.zodiac-steps {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px;
    text-align:center;
}
.zodiac-steps div {
    position:relative;
}
.zodiac-steps strong {
    width:62px;
    height:62px;
    margin:0 auto 16px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#FFE3E9;
    color:var(--z-red);
    font-family:'DM Serif Display',serif;
    font-size:1.9rem;
}
.zodiac-steps span {
    color:#241018;
    font-weight:700;
}
.zodiac-seo {
    padding:64px 0;
    text-align:center;
}
.zodiac-seo h2,
.zodiac-faq h2 {
    font-family:'DM Serif Display',serif;
    font-size:2.25rem;
    line-height:1.15;
    color:var(--z-wine);
    margin:0 0 22px;
}
.zodiac-seo > p {
    max-width:860px;
    margin:0 auto 54px;
    color:#51434A;
    line-height:1.75;
    font-size:1.05rem;
}
.zodiac-check-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    text-align:left;
    margin:0 auto 64px;
    max-width:940px;
}
.zodiac-check-grid div {
    display:grid;
    grid-template-columns:70px 1fr;
    grid-template-rows:auto auto;
    column-gap:20px;
    padding:26px;
    border-bottom:1px solid var(--z-border);
}
.zodiac-check-grid div:nth-child(odd) {
    border-right:1px solid var(--z-border);
}
.zodiac-check-grid span {
    grid-row:1 / span 2;
    width:56px;
    height:56px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#FFEFF2;
    color:var(--z-red);
    font-size:1.8rem;
}
.zodiac-check-grid strong {
    color:var(--z-wine);
    margin-bottom:6px;
}
.zodiac-check-grid p {
    color:#51434A;
    line-height:1.55;
    margin:0;
}
.zodiac-element-grid {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:18px;
    text-align:left;
    margin:0 0 68px;
}
.zodiac-element-grid div {
    border-left:1px solid var(--z-border);
    padding:8px 18px;
}
.zodiac-element-grid span {
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    border-radius:50%;
    margin-bottom:12px;
    background:#FFF0F3;
    color:var(--z-red);
    font-size:1.55rem;
}
.zodiac-element-grid .earth { color:#258A2C; background:#EDFAEF; }
.zodiac-element-grid .air { color:#2D64C8; background:#EEF4FF; }
.zodiac-element-grid .water { color:#0E5BBE; background:#EEF7FF; }
.zodiac-element-grid strong,
.zodiac-element-grid small {
    display:block;
}
.zodiac-element-grid strong {
    color:var(--z-wine);
    margin-bottom:4px;
}
.zodiac-element-grid small {
    font-weight:800;
    color:#241018;
    margin-bottom:8px;
}
.zodiac-element-grid p {
    color:#51434A;
    line-height:1.5;
    margin:0;
}
.zodiac-tool-links {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:24px;
}
.zodiac-tool-links a {
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--z-border);
    border-radius:12px;
    background:#fff;
    color:#241018;
    font-weight:800;
    text-decoration:none;
    transition:var(--transition);
}
.zodiac-tool-links a:hover {
    color:var(--z-red);
    border-color:var(--z-red);
    transform:translateY(-2px);
}
.zodiac-faq {
    padding-bottom:54px;
}
.zodiac-faq h2 {
    text-align:left;
}
.zodiac-share-panel {
    margin:0;
    padding:30px 64px 28px;
    border:1.5px solid var(--z-border);
    border-radius:24px;
    background:rgba(255,255,255,.86);
    box-shadow:0 18px 58px rgba(42,7,21,.06);
}
.zodiac-share-panel .share-title {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    color:var(--z-wine);
    font-family:'DM Serif Display',serif;
    font-size:2rem;
}
.zodiac-share-panel .share-title::before,
.zodiac-share-panel .share-title::after {
    content:'';
    width:74px;
    height:1px;
    background:#FFB7C4;
}
.zodiac-share-panel .share-subtitle {
    margin:8px 0 22px;
    color:#6E6268;
}
.zodiac-share-panel .share-row {
    max-width:1120px;
    margin:0 auto;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:16px 28px;
}
.zodiac-share-panel .share-btn {
    min-height:58px;
    justify-content:center;
    border-color:var(--z-border);
    background:rgba(255,255,255,.82);
    box-shadow:none;
    font-weight:800;
}
.zodiac-share-divider {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    max-width:1040px;
    margin:30px auto 26px;
    color:var(--z-red);
}
.zodiac-share-divider::before,
.zodiac-share-divider::after {
    content:'';
    height:1px;
    flex:1;
    border-top:1px dashed #FFB7C4;
}
.zodiac-retry-btn {
    min-height:56px;
    min-width:min(420px, 100%);
    padding:12px 28px;
    border:1.5px solid var(--z-red);
    border-radius:12px;
    background:#fff;
    color:var(--z-red);
    font:800 1.08rem 'DM Serif Display',serif;
    cursor:pointer;
    transition:var(--transition);
}
.zodiac-retry-btn:hover {
    transform:translateY(-2px);
    background:#FFF0F3;
    box-shadow:0 14px 28px rgba(230,0,35,.12);
}

@media (max-width:980px) {
    .zodiac-topbar {
        grid-template-columns:1fr auto;
        gap:16px;
        padding:12px 20px;
    }
    .zodiac-nav {
        grid-column:1 / -1;
        order:3;
        justify-content:flex-start;
        gap:22px;
        overflow-x:auto;
        padding-top:4px;
    }
    .zodiac-brand img { width:230px; }
    .zodiac-shell { max-width:1180px; padding:150px 22px 60px; }
    .zodiac-hero { grid-template-columns:1fr; gap:34px; min-height:0; }
    .zodiac-hero h1 { font-size:3.6rem; }
    .zodiac-hero-copy p { font-size:1.2rem; }
    .zodiac-form-card { padding:52px 34px 30px; }
    .zodiac-form-title { font-size:2.15rem; }
    .zodiac-picker-btn { min-height:96px; grid-template-columns:66px 1fr auto; }
    .zodiac-select-glyph { width:66px; height:66px; font-size:2.3rem; }
    .zodiac-picker-text strong { font-size:1.45rem; }
    .zodiac-picker-text small { font-size:.9rem; }
    .zodiac-result-card { padding:0; }
    .zodiac-result-top { grid-template-columns:1fr; gap:28px; padding:36px 28px; }
    .zodiac-result-copy {
        min-height:0;
        align-items:center;
        text-align:center;
        padding:28px 0;
        border-left:0;
        border-right:0;
        border-top:1px solid var(--z-border);
        border-bottom:1px solid var(--z-border);
    }
    .zodiac-result-pair { justify-content:center; }
    .zodiac-breakdown { width:100%; padding-left:0; }
    .zodiac-share-panel { padding:28px 26px; }
    .zodiac-share-panel .share-row { grid-template-columns:1fr 1fr; }
    .zodiac-insights,
    .zodiac-element-grid,
    .zodiac-tool-links { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
    .zodiac-topbar { min-height:76px; }
    .zodiac-brand img { width:170px; }
    .zodiac-controls .ctrl-btn { width:38px; height:38px; }
    .zodiac-nav { font-size:.9rem; gap:18px; }
    .zodiac-shell { padding:142px 16px 50px; }
    .zodiac-hero { gap:22px; }
    .zodiac-hero-copy { display:contents; }
    .zodiac-badge { order:1; margin-bottom:0; font-size:.72rem; padding:9px 18px; }
    .zodiac-badge span { width:22px; height:22px; font-size:.9rem; }
    .zodiac-hero h1 { order:2; font-size:2.75rem; }
    .zodiac-form-card { order:3; padding:42px 18px 22px; border-radius:16px; }
    .zodiac-hero-divider { order:4; width:100%; margin-top:2px; }
    .zodiac-hero-copy p { order:5; font-size:1.05rem; margin:0 0 4px; }
    .zodiac-benefits { order:6; display:grid; grid-template-columns:1fr; }
    .zodiac-form-card::before { width:42px; height:42px; top:-24px; font-size:1.1rem; }
    .zodiac-form-title { font-size:1.72rem; margin-bottom:28px; }
    .zodiac-picker { margin-bottom:22px; }
    .zodiac-picker-btn { min-height:64px; grid-template-columns:48px 1fr auto; gap:14px; padding:9px 14px; }
    .zodiac-select-glyph { width:48px; height:48px; font-size:1.72rem; }
    .zodiac-picker-text strong { font-size:1.12rem; }
    .zodiac-picker-text small { font-size:.7rem; }
    .zodiac-options { max-height:280px; }
    .zodiac-calc-btn { min-height:58px; }
    .zodiac-loading { padding:30px 18px; margin-bottom:30px; border-radius:18px; }
    .zodiac-loading-ring { width:112px; }
    .zodiac-loading-ring span { width:62px; height:62px; }
    .zodiac-loading strong { font-size:1.28rem; }
    .zodiac-form-note { flex-wrap:wrap; gap:10px 0; margin-top:20px; font-size:.84rem; }
    .zodiac-form-note span { padding:0 12px; }
    .zodiac-preview.show { display:block; }
    .zodiac-preview span { display:block; margin:6px 0 14px; }
    .zodiac-preview-meter { width:100%; }
    .zodiac-result-top { padding:26px 18px; border-radius:20px; }
    .zodiac-result-pair { font-size:2rem; gap:10px; }
    .zodiac-result-glyph { width:48px; height:48px; font-size:1.7rem; }
    .zodiac-result-heart { font-size:1.45rem; }
    .zodiac-result-label { font-size:2.25rem; }
    .zodiac-result-card p { font-size:1.02rem; }
    .zodiac-score-ring { width:190px; }
    .zodiac-score-ring span { font-size:3.8rem; }
    .zodiac-score-ring small { font-size:.92rem; margin-top:12px; padding-top:12px; }
    .zodiac-break-row { grid-template-columns:1fr 44px; gap:8px 12px; }
    .zodiac-break-track { grid-column:1 / -1; order:3; }
    .zodiac-break-row em { grid-column:2; grid-row:1; font-size:1rem; }
    .zodiac-insights,
    .zodiac-steps,
    .zodiac-check-grid,
    .zodiac-element-grid,
    .zodiac-tool-links { grid-template-columns:1fr; }
    .zodiac-insight-card { min-height:0; padding:26px 24px; }
    .zodiac-share-panel { padding:26px 18px; }
    .zodiac-share-panel .share-title { font-size:1.55rem; }
    .zodiac-share-panel .share-title::before,
    .zodiac-share-panel .share-title::after { width:34px; }
    .zodiac-share-panel .share-row { grid-template-columns:1fr; gap:12px; }
    .zodiac-check-grid div,
    .zodiac-check-grid div:nth-child(odd) { border-right:0; }
    .zodiac-section-rule { font-size:1.45rem; }
}

/* ── MODALS ── */
.modal-overlay {
    position:fixed; inset:0;
    background:rgba(0,0,0,.65);
    z-index:200;
    display:none;
    align-items:center;
    justify-content:center;
    backdrop-filter:blur(6px);
    padding:20px;
}
.modal-overlay.show { display:flex; }
.modal-box {
    background:var(--surface);
    border-radius:28px;
    padding:40px;
    max-width:400px;
    width:100%;
    text-align:center;
    box-shadow:0 30px 80px rgba(0,0,0,.4);
    animation:cardIn .4s ease;
}
.modal-title {
    font-family:'DM Serif Display',serif;
    font-size:1.5rem;
    margin-bottom:8px;
    color:var(--rose);
}
.modal-sub {
    font-size:.9rem;
    color:var(--text-soft);
    margin-bottom:24px;
}
#qrCanvas, #certCanvas {
    border-radius:14px;
    margin:0 auto 24px;
    display:block;
    max-width:100%;
}
.modal-close, .cert-dl-btn {
    width:100%;
    padding:15px;
    background:var(--rose);
    color:#fff;
    border:none;
    border-radius:14px;
    font-family:inherit;
    font-size:1rem;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition);
}
.modal-close:hover, .cert-dl-btn:hover { background:var(--rose-deep); }
.cert-dl-btn {
    background:linear-gradient(135deg, var(--rose), var(--rose-soft));
    margin-bottom:10px;
}

/* Toast */
.toast {
    position:fixed;
    bottom:40px;
    left:50%;
    transform:translateX(-50%) translateY(20px);
    background:var(--text-dark);
    color:var(--surface);
    padding:14px 26px;
    border-radius:100px;
    font-size:.9rem;
    font-weight:500;
    opacity:0;
    transition:all .3s;
    pointer-events:none;
    z-index:999;
    box-shadow:0 12px 40px rgba(0,0,0,.3);
}
.toast.show {
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

#confettiCanvas {
    position:fixed;
    top:0; left:0;
    width:100%; height:100%;
    pointer-events:none;
    z-index:998;
}

/* ── RESPONSIVE ── */
@media (max-width:768px) {
    :scope {
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }
    .topbar {
        width:100%;
        max-width:100vw;
        padding:14px 18px;
        overflow:hidden;
    }
    .topbar-controls {
        flex-shrink:0;
        gap:8px;
    }
    .brand-name { font-size:1.1rem; }
    .brand-logo-img {
        width:220px;
        max-width:calc(100vw - 150px);
    }
    .brand-logo { font-size:22px; }
    .ctrl-btn { width:44px; height:44px; }
    .container {
        width:100%;
        max-width:100%;
        padding:100px 20px 60px;
    }
    .hero-split {
        display:flex;
        flex-direction:column;
        align-items:stretch;
        width:100%;
        max-width:100%;
        padding-left:0;
        padding-right:0;
        min-width:0;
    }
    .hero-split-left {
        display:contents;
    }
    .hero-split-tag {
        order:1;
        width:fit-content;
    }
    .hero-split-title {
        order:2;
        margin-bottom:24px;
    }
    .hero-split-right {
        order:3;
        width:100%;
        max-width:100%;
        min-width:0;
        margin-bottom:34px;
    }
    #loveCalculator { scroll-margin-top:92px; }
    .hero-split-sub {
        order:4;
        width:100%;
        max-width:none;
        margin-bottom:32px;
        overflow-wrap:break-word;
    }
    .hero-badges {
        order:5;
        grid-template-columns:1fr;
        gap:18px;
        width:100%;
        max-width:100%;
    }
    .hero-badge {
        min-width:0;
        width:100%;
        border-right:none;
        padding:0;
    }
    .hero-title { font-size:2.5rem; }
    .calc-card {
        width:100%;
        max-width:100%;
        min-width:0;
        margin-left:auto;
        margin-right:auto;
        padding:34px 24px 28px;
        border-radius:24px;
    }
    .calc-title {
        max-width:300px;
        margin-left:auto;
        margin-right:auto;
        font-size:2.1rem;
        overflow-wrap:break-word;
        text-wrap:balance;
    }
    .form-grid { grid-template-columns:1fr; gap:16px; }
    .field-input { min-width:0; padding:18px 18px 18px 70px; }
    .input-icon { left:20px; }
    .input-icon::after { right:-12px; }
    .stats {
        grid-template-columns:1fr;
        gap:24px;
        margin-top:40px;
    }
    .stat-item {
        border-right:none;
        border-bottom:1px solid var(--rose-pale);
        padding-bottom:20px;
    }
    .stat-item:last-child { border-bottom:none; }
    .result-card {
        width:100%;
        max-width:100%;
        min-width:0;
        padding:36px 22px;
        border-radius:24px;
    }
    .result-label {
        font-size:.72rem;
        letter-spacing:2.4px;
        gap:10px;
    }
    .result-names {
        font-size:2.25rem;
        line-height:1.12;
    }
    .meter-wrap {
        width:230px;
        height:230px;
    }
    .result-percent { font-size:4.7rem; }
    .result-verdict { font-size:1.05rem; }
    .stats-badge { font-size:.88rem; padding:9px 16px; }
    .reactions-row {
        grid-template-columns:repeat(2, 1fr);
        gap:0;
        padding:10px;
    }
    .reaction-btn {
        border-right:none;
        border-bottom:1px solid rgba(231,0,33,0.14);
    }
    .reaction-btn:nth-child(3),
    .reaction-btn:nth-child(4) {
        border-bottom:none;
    }
    .details-grid { grid-template-columns:1fr; }
    .detail-card { padding:26px 22px; border-radius:20px; }
    .cat-row {
        grid-template-columns:28px 96px 1fr 44px;
        gap:10px;
    }
    .cat-icon { width:28px; font-size:1.15rem; }
    .cat-label { font-size:.88rem; }
    .cat-score { font-size:.88rem; }
    .share-row { grid-template-columns:repeat(2, 1fr); }
    .deco-heart { font-size:35px !important; }
    .deco-heart.h1 { font-size:50px !important; }
    .deco-heart.h3 { display:none; }
    .deco-heart.h6 { display:none; }
}
@media (max-width:600px) {
    .topbar {
        left:0;
        right:auto;
        width:100vw;
        max-width:100vw;
        padding-left:14px;
        padding-right:14px;
        position:fixed;
    }
    .topbar-controls {
        position:fixed;
        right:14px;
        top:14px;
        transform:none;
        gap:6px;
        z-index:150;
    }
    .ctrl-btn {
        width:36px;
        height:36px;
        font-size:1rem;
    }
    .brand-name { font-size:1rem; }
    .brand-logo-img {
        width:174px;
        max-width:calc(100vw - 112px);
    }
    .container {
        padding-left:16px;
        padding-right:16px;
    }
    .hero-split-right,
    .secondary-wrapper,
    #historySection {
        width:100%;
        max-width:100%;
        margin-left:0;
        margin-right:0;
    }
    .calc-card,
    .result-card {
        width:100%;
        max-width:100%;
        margin-left:0;
        margin-right:0;
        padding-left:16px;
        padding-right:16px;
    }
    .calc-btn {
        width:100%;
    }
    .share-row {
        grid-template-columns:1fr;
    }
}
@media (max-width:480px) {
    .hero-title { font-size:2rem; }
    .hero-split-title { font-size:2.75rem; }
    .hero-sub { font-size:.95rem; }
    .calc-card,
    .result-card {
        max-width:100%;
    }
    .calc-title {
        max-width:250px;
        font-size:1.6rem;
        line-height:1.08;
    }
    .calc-divider { max-width:170px; }
    .calc-btn { font-size:1.25rem; padding:20px 16px; }
    .hero-badge { min-width:100%; }
    .hero-badges { grid-template-columns:1fr; gap:18px; }
}

/* Shared header/footer overrides */
@media (max-width:1180px) {
    .topbar {
        grid-template-columns:minmax(160px, 240px) minmax(0, 1fr) auto;
        gap:18px;
        padding:14px 28px;
    }
    .main-nav {
        gap:24px;
        justify-content:flex-start;
        overflow-x:auto;
        scrollbar-width:none;
    }
    .main-nav::-webkit-scrollbar {
        display:none;
    }
    .main-nav a {
        font-size:.92rem;
    }
    .brand-logo-img {
        width:240px;
    }
}
@media (max-width:768px) {
    .topbar {
        width:100%;
        max-width:100vw;
        display:grid;
        grid-template-columns:1fr auto;
        gap:10px 14px;
        padding:12px 16px;
        overflow:visible;
    }
    .brand {
        grid-column:1;
        min-width:0;
    }
    .brand-logo-img {
        width:180px;
        max-width:100%;
    }
    .topbar-controls {
        position:static;
        grid-column:2;
        justify-self:end;
        flex-shrink:0;
        gap:8px;
        z-index:auto;
    }
    .main-nav {
        grid-column:1 / -1;
        justify-content:flex-start;
        gap:22px;
        overflow-x:auto;
        padding:2px 2px 0;
        scrollbar-width:none;
    }
    .main-nav::-webkit-scrollbar {
        display:none;
    }
    .main-nav a {
        font-size:.88rem;
        padding:8px 0;
    }
    .ctrl-btn {
        width:40px;
        height:40px;
        font-size:1rem;
    }
    .footer-nav {
        gap:10px 20px;
    }
}
@media (max-width:420px) {
    .brand-logo-img {
        width:158px;
    }
    .main-nav {
        gap:18px;
    }
    .main-nav a {
        font-size:.82rem;
    }
    .ctrl-btn {
        width:36px;
        height:36px;
    }
}

/* Birth date love calculator page */
.birth-page {
    --birth-red:#E60023;
    --birth-wine:#260713;
    --birth-border:#FFD3DC;
    --birth-blush:#FFF5F7;
    color:var(--birth-wine);
    background:
        radial-gradient(circle at 8% 26%, rgba(255,211,220,.38) 0 72px, transparent 180px),
        radial-gradient(circle at 88% 80%, rgba(255,211,220,.28) 0 90px, transparent 230px),
        linear-gradient(180deg, #fff 0%, var(--birth-blush) 48%, #fff 100%);
}
.birth-shell {
    width:100%;
    max-width:1320px;
    margin:0 auto;
    padding:150px 34px 70px;
    position:relative;
    z-index:10;
}
.birth-hero {
    min-height:580px;
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(420px, 560px);
    gap:58px;
    align-items:center;
}
.birth-badge {
    display:inline-flex;
    align-items:center;
    min-height:40px;
    padding:10px 24px;
    border:1px solid var(--birth-border);
    border-radius:999px;
    background:rgba(255,255,255,.75);
    color:var(--birth-red);
    text-transform:uppercase;
    letter-spacing:2.2px;
    font-weight:900;
    font-size:.82rem;
    margin-bottom:30px;
}
.birth-hero h1 {
    max-width:680px;
    margin:0;
    color:var(--birth-wine);
    font-family:'DM Serif Display',serif;
    font-size:5.35rem;
    line-height:1;
    letter-spacing:0;
}
.birth-intro {
    max-width:560px;
    margin:30px 0 28px;
    color:#51434A;
    font-size:1.28rem;
    line-height:1.65;
}
.birth-chips {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:20px;
}
.birth-chips span {
    display:inline-flex;
    align-items:center;
    min-height:48px;
    padding:10px 18px;
    border:1px solid var(--birth-border);
    border-radius:999px;
    background:rgba(255,255,255,.72);
    color:#241018;
    font-weight:800;
}
.birth-small {
    margin:0;
    color:#7A6870;
    font-size:.98rem;
}
.birth-form-card {
    position:relative;
    padding:44px 38px 30px;
    border:1.5px solid var(--birth-border);
    border-top:5px solid var(--birth-red);
    border-radius:22px;
    background:rgba(255,255,255,.9);
    box-shadow:0 26px 74px rgba(230,0,35,.11);
}
.birth-form-title {
    margin:0 0 30px;
    text-align:center;
    font-family:'DM Serif Display',serif;
    color:var(--birth-wine);
    font-size:2.15rem;
    line-height:1.12;
}
.birth-form-card label {
    display:block;
    margin:0 0 10px;
    color:#1E1419;
    font-weight:900;
}
.birth-date-field {
    position:relative;
    margin:0 0 24px;
}
.birth-date-trigger {
    width:100%;
    min-height:70px;
    display:grid;
    grid-template-columns:46px 1fr auto;
    align-items:center;
    gap:16px;
    padding:10px 18px;
    border:1.5px solid var(--birth-border);
    border-radius:14px;
    background:#fff;
    color:var(--birth-wine);
    font-family:'DM Sans',sans-serif;
    text-align:left;
    cursor:pointer;
    outline:none;
    transition:var(--transition);
}
.birth-date-trigger:focus,
.birth-date-field.open .birth-date-trigger {
    border-color:var(--birth-red);
    box-shadow:0 0 0 5px rgba(230,0,35,.08);
}
.birth-date-icon {
    width:46px;
    height:46px;
    position:relative;
    display:block;
    border-radius:50%;
    background:#FFEFF2;
    color:var(--birth-red);
}
.birth-date-icon::before {
    content:'';
    position:absolute;
    left:50%;
    top:52%;
    width:18px;
    height:16px;
    border:2px solid currentColor;
    border-radius:4px;
    transform:translate(-50%, -50%);
}
.birth-date-icon::after {
    content:'';
    position:absolute;
    left:50%;
    top:39%;
    width:18px;
    height:2px;
    background:currentColor;
    border-radius:999px;
    transform:translateX(-50%);
}
.birth-date-text strong,
.birth-date-text small {
    display:block;
}
.birth-date-text strong {
    color:var(--birth-wine);
    font-size:1.08rem;
    font-weight:900;
}
.birth-date-text small {
    margin-top:3px;
    color:#8A747C;
    font-size:.78rem;
    font-weight:700;
}
.birth-date-chevron {
    width:10px;
    height:10px;
    border-right:2px solid var(--birth-wine);
    border-bottom:2px solid var(--birth-wine);
    transform:rotate(45deg);
    transition:var(--transition);
}
.birth-date-field.open .birth-date-chevron {
    transform:rotate(225deg);
}
.birth-calendar {
    position:absolute;
    z-index:120;
    top:calc(100% + 10px);
    left:0;
    right:0;
    display:none;
    padding:20px;
    border:1.5px solid var(--birth-border);
    border-radius:18px;
    background:#fff;
    box-shadow:0 24px 60px rgba(38,7,19,.16);
}
.birth-date-field.open .birth-calendar {
    display:block;
}
.birth-calendar-nav {
    display:grid;
    grid-template-columns:44px minmax(0, 1fr) minmax(0, .9fr) 44px;
    gap:10px;
    align-items:center;
    margin-bottom:22px;
}
.birth-calendar-arrow,
.birth-calendar-select,
.birth-calendar-day {
    font-family:'DM Sans',sans-serif;
}
.birth-calendar-arrow {
    width:44px;
    height:44px;
    border:0;
    border-radius:50%;
    background:#fff;
    color:#201A22;
    font-size:2rem;
    font-weight:900;
    cursor:pointer;
}
.birth-calendar-arrow:hover {
    background:#FFF0F3;
    color:var(--birth-red);
}
.birth-calendar-select {
    min-height:54px;
    border:1px solid var(--birth-border);
    border-radius:12px;
    background:#fff;
    color:#201A22;
    font-size:1.05rem;
    font-weight:900;
    padding:0 14px;
    outline:none;
}
.birth-calendar-weekdays,
.birth-calendar-days {
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    text-align:center;
}
.birth-calendar-weekdays {
    margin-bottom:12px;
    color:#201A22;
    font-weight:900;
}
.birth-calendar-weekdays span:last-child {
    color:var(--birth-red);
}
.birth-calendar-days {
    gap:6px 4px;
}
.birth-calendar-day {
    min-width:0;
    width:42px;
    height:42px;
    justify-self:center;
    border:0;
    border-radius:50%;
    background:transparent;
    color:#201A22;
    font-size:1.05rem;
    font-weight:900;
    cursor:pointer;
    transition:var(--transition);
}
.birth-calendar-day:hover {
    background:#FFF0F3;
    color:var(--birth-red);
}
.birth-calendar-day.muted {
    color:#A89FAA;
}
.birth-calendar-day.sunday {
    color:var(--birth-red);
}
.birth-calendar-day.selected {
    background:var(--birth-red);
    color:#fff;
    box-shadow:0 12px 24px rgba(230,0,35,.24);
}
.birth-calc-btn {
    width:100%;
    min-height:72px;
    border:0;
    border-radius:14px;
    background:linear-gradient(135deg, #FF0040, #E60023 58%, #C9001F);
    color:#fff;
    font:900 1.12rem 'DM Sans',sans-serif;
    cursor:pointer;
    box-shadow:0 18px 36px rgba(230,0,35,.26);
    transition:var(--transition);
}
.birth-calc-btn:hover {
    transform:translateY(-2px);
    box-shadow:0 22px 44px rgba(230,0,35,.32);
}
.birth-calc-btn:disabled {
    cursor:wait;
    opacity:.78;
    transform:none;
}
.birth-form-note {
    margin:18px 0 0;
    text-align:center;
    color:#6E6268;
    font-weight:700;
}
.birth-how {
    padding:24px 0 44px;
    text-align:center;
}
.birth-how h2,
.birth-seo h2,
.birth-faq h2 {
    margin:0 0 26px;
    color:var(--birth-wine);
    font-family:'DM Serif Display',serif;
    font-size:2.2rem;
    line-height:1.15;
}
.birth-steps {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
}
.birth-steps div {
    padding:28px 20px;
    border:1px solid var(--birth-border);
    border-radius:18px;
    background:rgba(255,255,255,.78);
}
.birth-steps strong {
    width:56px;
    height:56px;
    display:grid;
    place-items:center;
    margin:0 auto 14px;
    border-radius:50%;
    background:#FFE3E9;
    color:var(--birth-red);
    font-family:'DM Serif Display',serif;
    font-size:1.7rem;
}
.birth-steps span {
    font-weight:800;
}
.birth-loading {
    display:none;
    max-width:640px;
    margin:0 auto 42px;
    padding:34px 26px;
    border:1.5px solid var(--birth-border);
    border-radius:22px;
    background:rgba(255,255,255,.88);
    box-shadow:0 22px 60px rgba(230,0,35,.12);
    text-align:center;
}
.birth-loading.show {
    display:grid;
    justify-items:center;
    gap:14px;
}
.birth-loading-ring {
    width:118px;
    aspect-ratio:1;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:conic-gradient(var(--birth-red) 0 74%, #FFE1E8 0);
    animation:spin 1.2s linear infinite, lovePulse 2s ease-in-out infinite;
    position:relative;
}
.birth-loading-ring::after {
    content:'';
    position:absolute;
    inset:15px;
    border-radius:50%;
    background:#fff;
}
.birth-loading-ring span {
    position:relative;
    z-index:1;
    display:grid;
    place-items:center;
    width:62px;
    height:62px;
    border-radius:50%;
    background:var(--birth-red);
    color:#fff;
    font-size:1.8rem;
    animation:heartBeat 1.35s ease-in-out infinite;
}
.birth-loading strong {
    color:var(--birth-wine);
    font:900 1.3rem 'DM Serif Display',serif;
}
.birth-loading p {
    margin:0;
    color:#6E6268;
    font-weight:800;
}
.birth-result-card {
    display:none;
    margin:0 0 56px;
    padding:34px;
    border:1.5px solid var(--birth-border);
    border-radius:24px;
    background:rgba(255,255,255,.9);
    box-shadow:0 24px 72px rgba(230,0,35,.1);
    scroll-margin-top:128px;
}
.birth-result-card.show {
    display:block;
    animation:cardIn .42s ease;
}
.birth-result-main {
    display:grid;
    grid-template-columns:1fr 190px 1.2fr;
    gap:32px;
    align-items:center;
}
.birth-result-pair {
    color:var(--birth-wine);
    font-family:'DM Serif Display',serif;
    font-size:2.35rem;
    line-height:1.1;
}
.birth-score-ring {
    width:190px;
    aspect-ratio:1;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:conic-gradient(var(--birth-red) var(--score), #FFE1E8 0);
    position:relative;
}
.birth-score-ring::after {
    content:'';
    position:absolute;
    inset:15px;
    border-radius:50%;
    background:#fff;
}
.birth-score-ring span {
    position:relative;
    z-index:1;
    color:var(--birth-red);
    font-family:'DM Serif Display',serif;
    font-size:4rem;
}
.birth-result-label {
    margin-bottom:12px;
    color:var(--birth-red);
    font-family:'DM Serif Display',serif;
    font-size:2.4rem;
}
.birth-result-card p {
    margin:0;
    color:#55454D;
    line-height:1.65;
}
.birth-breakdown {
    display:grid;
    gap:18px;
    margin-top:30px;
}
.birth-break-row {
    display:grid;
    grid-template-columns:190px 1fr 54px;
    gap:16px;
    align-items:center;
}
.birth-break-row strong {
    color:var(--birth-wine);
}
.birth-break-track {
    height:12px;
    overflow:hidden;
    border-radius:999px;
    background:#FFE1E8;
}
.birth-break-track span {
    display:block;
    width:var(--value);
    height:100%;
    border-radius:inherit;
    background:var(--birth-red);
}
.birth-break-row em {
    color:var(--birth-wine);
    font-style:normal;
    font-weight:900;
    text-align:right;
}
.birth-seo {
    padding:30px 0 56px;
    text-align:center;
}
.birth-seo > p {
    max-width:860px;
    margin:0 auto 46px;
    color:#51434A;
    line-height:1.75;
}
.birth-check-grid {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:18px;
    margin:0 0 54px;
    text-align:left;
}
.birth-check-grid div {
    padding:24px;
    border:1px solid var(--birth-border);
    border-radius:18px;
    background:rgba(255,255,255,.84);
}
.birth-check-grid span {
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    margin-bottom:14px;
    border-radius:50%;
    background:#FFEFF2;
    color:var(--birth-red);
    font-weight:900;
}
.birth-check-grid strong {
    display:block;
    margin-bottom:8px;
    color:var(--birth-wine);
}
.birth-check-grid p {
    margin:0;
    color:#51434A;
    line-height:1.55;
}
.birth-tool-links {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:18px;
}
.birth-tool-links a {
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px 16px;
    border:1px solid var(--birth-border);
    border-radius:12px;
    background:#fff;
    color:var(--birth-wine);
    text-decoration:none;
    font-weight:900;
    transition:var(--transition);
}
.birth-tool-links a:hover {
    color:var(--birth-red);
    border-color:var(--birth-red);
    transform:translateY(-2px);
}
.birth-faq {
    padding-bottom:54px;
}
.birth-faq h2 {
    text-align:left;
}
@media (max-width:980px) {
    .birth-shell { padding:146px 22px 60px; }
    .birth-hero { grid-template-columns:1fr; gap:34px; min-height:0; }
    .birth-hero h1 { font-size:3.8rem; }
    .birth-result-main { grid-template-columns:1fr; text-align:center; justify-items:center; }
    .birth-check-grid,
    .birth-tool-links { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
    .birth-shell { padding:132px 16px 50px; }
    .birth-hero { gap:22px; }
    .birth-hero-copy { display:contents; }
    .birth-hero h1 { order:1; font-size:2.7rem; }
    .birth-form-card { order:2; padding:34px 18px 22px; border-radius:18px; }
    .birth-how { order:3; }
    .birth-badge { order:4; margin:0; font-size:.7rem; letter-spacing:1.5px; }
    .birth-intro { order:5; margin:0; font-size:1.03rem; }
    .birth-chips { order:6; display:grid; grid-template-columns:1fr; margin:0; }
    .birth-small { order:7; }
    .birth-form-title { font-size:1.65rem; }
    .birth-date-field { margin-bottom:18px; }
    .birth-date-trigger { min-height:58px; grid-template-columns:40px 1fr auto; gap:12px; padding:8px 12px; }
    .birth-date-icon { width:40px; height:40px; font-size:1.05rem; }
    .birth-date-text strong { font-size:.98rem; }
    .birth-calendar { padding:14px 10px; border-radius:16px; }
    .birth-calendar-nav { grid-template-columns:34px 1fr 1fr 34px; gap:6px; margin-bottom:16px; }
    .birth-calendar-arrow { width:34px; height:34px; font-size:1.65rem; }
    .birth-calendar-select { min-height:44px; font-size:.9rem; padding:0 8px; }
    .birth-calendar-weekdays { font-size:.82rem; }
    .birth-calendar-day { width:34px; height:34px; font-size:.95rem; }
    .birth-calc-btn { min-height:60px; }
    .birth-steps,
    .birth-check-grid,
    .birth-tool-links { grid-template-columns:1fr; }
    .birth-result-card { padding:24px 18px; }
    .birth-result-pair { font-size:2rem; }
    .birth-score-ring { width:170px; }
    .birth-score-ring span { font-size:3.5rem; }
    .birth-result-label { font-size:2rem; }
    .birth-break-row { grid-template-columns:1fr 48px; gap:8px 12px; }
    .birth-break-track { grid-column:1 / -1; order:3; }
    .birth-break-row em { grid-column:2; grid-row:1; }
}

/* Zodiac purple theme */
.zodiac-page {
    --rose:#9465ea;
    --rose-deep:#6F3FE3;
    --rose-soft:#B997FF;
    --rose-mist:#F1ECFF;
    --rose-pale:#E4D8FF;
    --z-red:#9465ea;
    --z-wine:#28154B;
    --z-blush:#F8F5FF;
    --z-border:#D9CDFC;
    --z-text:#241833;
    background:
        radial-gradient(circle at 7% 28%, rgba(148,101,234,.18) 0 76px, transparent 190px),
        radial-gradient(circle at 90% 82%, rgba(148,101,234,.14) 0 96px, transparent 230px),
        linear-gradient(180deg, #fff 0%, var(--z-blush) 46%, #fff 100%);
}
.zodiac-page .topbar {
    border-bottom-color:rgba(148,101,234,.12);
}
.zodiac-bg-glyphs span {
    color:#9465ea;
}
.zodiac-hero-divider {
    color:#9465ea;
}
.zodiac-hero-divider::before,
.zodiac-hero-divider::after {
    background:linear-gradient(90deg, transparent, rgba(148,101,234,.32), transparent);
}
.zodiac-benefits span,
.zodiac-form-card,
.zodiac-preview,
.zodiac-loading,
.zodiac-result-top,
.zodiac-insight-card,
.zodiac-share-panel {
    box-shadow:0 24px 72px rgba(148,101,234,.08);
}
.zodiac-form-card::before,
.zodiac-calc-btn,
.zodiac-loading-ring span {
    background:linear-gradient(135deg, #B997FF, #9465ea 58%, #6F3FE3);
    box-shadow:0 18px 36px rgba(148,101,234,.26);
}
.zodiac-calc-btn:hover {
    box-shadow:0 22px 42px rgba(148,101,234,.34);
}
.zodiac-picker-btn:focus,
.zodiac-picker.open .zodiac-picker-btn {
    box-shadow:0 0 0 5px rgba(148,101,234,.12);
}
.zodiac-select-glyph,
.zodiac-option-glyph {
    background:radial-gradient(circle at 35% 28%, #D5C4FF 0 12%, #B997FF 34%, #9465ea 68%, #6F3FE3 100%);
    box-shadow:inset 0 10px 18px rgba(255,255,255,.26), 0 14px 26px rgba(148,101,234,.2);
}
.zodiac-option:hover,
.zodiac-option.active,
.zodiac-result-glyph,
.zodiac-insight-icon,
.zodiac-check-grid span,
.zodiac-element-grid span,
.zodiac-retry-btn:hover {
    background:#F1ECFF;
}
.zodiac-loading {
    background:
        radial-gradient(circle at 50% 0%, rgba(148,101,234,.22), transparent 45%),
        rgba(255,255,255,.9);
}
.zodiac-loading-ring,
.zodiac-score-ring {
    background:conic-gradient(var(--z-red) var(--score, 74%), #E7DCFF 0);
    box-shadow:0 22px 42px rgba(148,101,234,.16);
}
.zodiac-loading-ring {
    background:conic-gradient(var(--z-red) 0 74%, #E7DCFF 0);
}
.zodiac-preview-meter,
.zodiac-break-track {
    background:#E7DCFF;
}
.zodiac-score-ring small::before {
    border-top-color:#CDBBFF;
}
.zodiac-steps strong {
    background:#F1ECFF;
}
.zodiac-element-grid .earth,
.zodiac-element-grid .air,
.zodiac-element-grid .water {
    color:#9465ea;
    background:#F1ECFF;
}
.zodiac-share-panel .share-title::before,
.zodiac-share-panel .share-title::after {
    background:#CDBBFF;
}
.zodiac-share-divider::before,
.zodiac-share-divider::after {
    border-top-color:#CDBBFF;
}
.zodiac-retry-btn:hover {
    box-shadow:0 14px 30px rgba(148,101,234,.16);
}

/* Full dark theme for secondary calculator pages */
:scope[data-calculator-theme="dark"] :scope.zodiac-page {
    --z-wine:#F7ECFF;
    --z-text:#F5EFFF;
    --z-blush:#160B27;
    --z-border:#4E3282;
    color:var(--z-text);
    background:
        radial-gradient(circle at 7% 28%, rgba(148,101,234,.22) 0 76px, transparent 190px),
        radial-gradient(circle at 90% 82%, rgba(148,101,234,.16) 0 96px, transparent 230px),
        linear-gradient(180deg, #12091F 0%, #1A0E2E 46%, #100818 100%);
}
:scope[data-calculator-theme="dark"] :scope.birth-page {
    --birth-wine:#FFEAF0;
    --birth-border:#643044;
    --birth-blush:#1A0912;
    color:var(--birth-wine);
    background:
        radial-gradient(circle at 8% 26%, rgba(230,0,35,.20) 0 72px, transparent 190px),
        radial-gradient(circle at 88% 80%, rgba(230,0,35,.14) 0 90px, transparent 230px),
        linear-gradient(180deg, #16070F 0%, #24101A 48%, #12060D 100%);
}
:scope[data-calculator-theme="dark"] :scope.zodiac-page .topbar,
:scope[data-calculator-theme="dark"] :scope.birth-page .topbar {
    background:rgba(42,14,26,.86);
    border-bottom-color:rgba(255,255,255,.08);
}
:scope[data-calculator-theme="dark"] :scope.zodiac-page .main-nav a,
:scope[data-calculator-theme="dark"] :scope.birth-page .main-nav a,
:scope[data-calculator-theme="dark"] :scope.zodiac-page .footer-nav a,
:scope[data-calculator-theme="dark"] :scope.birth-page .footer-nav a {
    color:#F8EAF0;
}
:scope[data-calculator-theme="dark"] :scope.zodiac-page .main-nav a.active,
:scope[data-calculator-theme="dark"] :scope.birth-page .main-nav a.active,
:scope[data-calculator-theme="dark"] :scope.zodiac-page .main-nav a:hover,
:scope[data-calculator-theme="dark"] :scope.birth-page .main-nav a:hover {
    color:var(--rose);
}
:scope[data-calculator-theme="dark"] :scope.zodiac-page .zodiac-form-card,
:scope[data-calculator-theme="dark"] :scope.zodiac-page .zodiac-preview,
:scope[data-calculator-theme="dark"] :scope.zodiac-page .zodiac-loading,
:scope[data-calculator-theme="dark"] :scope.zodiac-page .zodiac-result-top,
:scope[data-calculator-theme="dark"] :scope.zodiac-page .zodiac-insight-card,
:scope[data-calculator-theme="dark"] :scope.zodiac-page .zodiac-faq,
:scope[data-calculator-theme="dark"] :scope.zodiac-page .zodiac-share-panel,
:scope[data-calculator-theme="dark"] :scope.birth-page .birth-form-card,
:scope[data-calculator-theme="dark"] :scope.birth-page .birth-loading,
:scope[data-calculator-theme="dark"] :scope.birth-page .birth-result-card,
:scope[data-calculator-theme="dark"] :scope.birth-page .birth-steps div,
:scope[data-calculator-theme="dark"] :scope.birth-page .birth-check-grid div {
    background:rgba(38,12,26,.88);
    border-color:rgba(255,180,196,.22);
    box-shadow:0 24px 72px rgba(0,0,0,.28);
}
:scope[data-calculator-theme="dark"] :scope.zodiac-page .zodiac-picker-btn,
:scope[data-calculator-theme="dark"] :scope.zodiac-page .zodiac-options,
:scope[data-calculator-theme="dark"] :scope.zodiac-page .zodiac-option,
:scope[data-calculator-theme="dark"] :scope.zodiac-page .zodiac-tool-links a,
:scope[data-calculator-theme="dark"] :scope.zodiac-page .faq-q,
:scope[data-calculator-theme="dark"] :scope.birth-page .birth-date-trigger,
:scope[data-calculator-theme="dark"] :scope.birth-page .birth-calendar,
:scope[data-calculator-theme="dark"] :scope.birth-page .birth-calendar-select,
:scope[data-calculator-theme="dark"] :scope.birth-page .birth-tool-links a,
:scope[data-calculator-theme="dark"] :scope.birth-page .faq-q {
    background:#24101A;
    border-color:rgba(255,180,196,.22);
    color:#FFF3F6;
}
:scope[data-calculator-theme="dark"] :scope.zodiac-page .zodiac-benefits span,
:scope[data-calculator-theme="dark"] :scope.zodiac-page .zodiac-badge,
:scope[data-calculator-theme="dark"] :scope.birth-page .birth-badge,
:scope[data-calculator-theme="dark"] :scope.birth-page .birth-chips span {
    background:rgba(255,255,255,.06);
    border-color:rgba(255,180,196,.18);
    color:#FFF3F6;
}
:scope[data-calculator-theme="dark"] :scope.zodiac-page .zodiac-picker-text strong,
:scope[data-calculator-theme="dark"] :scope.zodiac-page .zodiac-option-text strong,
:scope[data-calculator-theme="dark"] :scope.zodiac-page .zodiac-preview strong,
:scope[data-calculator-theme="dark"] :scope.zodiac-page .zodiac-break-row strong,
:scope[data-calculator-theme="dark"] :scope.zodiac-page .zodiac-break-row em,
:scope[data-calculator-theme="dark"] :scope.zodiac-page .zodiac-steps span,
:scope[data-calculator-theme="dark"] :scope.zodiac-page .zodiac-check-grid strong,
:scope[data-calculator-theme="dark"] :scope.zodiac-page .zodiac-element-grid strong,
:scope[data-calculator-theme="dark"] :scope.birth-page .birth-date-text strong,
:scope[data-calculator-theme="dark"] :scope.birth-page .birth-date-chevron,
:scope[data-calculator-theme="dark"] :scope.birth-page .birth-loading strong,
:scope[data-calculator-theme="dark"] :scope.birth-page .birth-result-pair,
:scope[data-calculator-theme="dark"] :scope.birth-page .birth-break-row strong,
:scope[data-calculator-theme="dark"] :scope.birth-page .birth-break-row em,
:scope[data-calculator-theme="dark"] :scope.birth-page .birth-check-grid strong,
:scope[data-calculator-theme="dark"] :scope.birth-page .birth-tool-links a {
    color:#FFF3F6;
}
:scope[data-calculator-theme="dark"] :scope.zodiac-page .zodiac-hero-copy p,
:scope[data-calculator-theme="dark"] :scope.zodiac-page .zodiac-preview span,
:scope[data-calculator-theme="dark"] :scope.zodiac-page .zodiac-result-card p,
:scope[data-calculator-theme="dark"] :scope.zodiac-page .zodiac-insight-card p,
:scope[data-calculator-theme="dark"] :scope.zodiac-page .zodiac-seo p,
:scope[data-calculator-theme="dark"] :scope.zodiac-page .zodiac-check-grid p,
:scope[data-calculator-theme="dark"] :scope.zodiac-page .zodiac-element-grid small,
:scope[data-calculator-theme="dark"] :scope.zodiac-page .faq-a,
:scope[data-calculator-theme="dark"] :scope.birth-page .birth-intro,
:scope[data-calculator-theme="dark"] :scope.birth-page .birth-small,
:scope[data-calculator-theme="dark"] :scope.birth-page .birth-result-card p,
:scope[data-calculator-theme="dark"] :scope.birth-page .birth-seo p,
:scope[data-calculator-theme="dark"] :scope.birth-page .birth-check-grid p,
:scope[data-calculator-theme="dark"] :scope.birth-page .faq-a {
    color:#E9D8DF;
}
:scope[data-calculator-theme="dark"] :scope.zodiac-page .zodiac-option:hover,
:scope[data-calculator-theme="dark"] :scope.zodiac-page .zodiac-option.active,
:scope[data-calculator-theme="dark"] :scope.birth-page .birth-calendar-day:hover {
    background:rgba(230,0,35,.16);
}
:scope[data-calculator-theme="dark"] :scope.birth-page .birth-calendar-day,
:scope[data-calculator-theme="dark"] :scope.birth-page .birth-calendar-arrow {
    color:#FFF3F6;
}
:scope[data-calculator-theme="dark"] :scope.birth-page .birth-calendar-arrow {
    background:#24101A;
}
:scope[data-calculator-theme="dark"] :scope.zodiac-page .site-footer,
:scope[data-calculator-theme="dark"] :scope.birth-page .site-footer {
    background:#10060C;
    color:#E9D8DF;
    border-top-color:rgba(255,255,255,.08);
}

/* Mobile header should scroll away with the page, not stay fixed */
@media (max-width:768px) {
    .topbar {
        position:relative;
        top:auto;
        left:auto;
        right:auto;
    }
    .topbar-controls {
        position:static;
    }
    .container {
        padding-top:28px;
    }
    .zodiac-shell,
    .birth-shell {
        padding-top:28px;
    }
}

}

.calculator-toolstrip{display:flex;justify-content:space-between;align-items:center;gap:16px;max-width:1180px;margin:0 auto 20px;padding:0 24px}.calculator-tabs{display:flex;gap:10px;overflow-x:auto;padding:4px;scrollbar-width:thin}.calculator-tabs a{white-space:nowrap;padding:10px 14px;border-radius:999px;border:1px solid rgba(231,0,33,.18);color:#191719;background:#fff;text-decoration:none;font:700 .9rem 'DM Sans',sans-serif}.calculator-tabs a:hover,.calculator-tabs a:focus-visible,.calculator-tabs a[aria-current=page]{background:#E70021;border-color:#E70021;color:#fff;outline:2px solid #ffd2da;outline-offset:2px}.calculator-controls{display:flex;gap:8px;flex:0 0 auto}.calculator-controls button{width:40px;height:40px;border:1px solid rgba(231,0,33,.18);border-radius:50%;background:#fff;cursor:pointer;font-size:1.1rem}@media (max-width:640px){.calculator-toolstrip{padding:0 16px;align-items:flex-start;flex-direction:column}.calculator-tabs{width:100%}.calculator-controls{align-self:flex-end;margin-top:-52px}}

@media (max-width:480px){.content-split>*,.content-compat>*,.mockup-card,.split-left{min-width:0;width:100%;max-width:100%}}