:root {
 --gold: #c8a84b;
 --gold-light: #e8c97a;
 --gold-dim: rgba(200,168,75,0.15);
 --violet: #8878d4;
 --violet-light: #b4a8f0;
 --violet-dim: rgba(136,120,212,0.12);
 --silver: #dce4f6;
 --silver-dim: rgba(176,188,216,0.1);
 --bg: #060612;
 --bg2: #0d0d22;
 --bg3: #13132e;
 --text: #f1eef8;
 --text-dim: rgba(241,238,248,0.86);
 --border: rgba(200,168,75,0.24);
 --border-soft: rgba(176,188,216,0.18);
}

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

body {
 background: var(--bg);
 color: var(--text);
 font-family: 'DM Sans', sans-serif;
 font-size: 16px;
 line-height: 1.58;
 min-height: 100vh;
 overflow-x: hidden;
}

/* Starfield */
.starfield {
 position: fixed;
 inset: 0;
 pointer-events: none;
 z-index: 0;
 overflow: hidden;
}
.star {
 position: absolute;
 border-radius: 50%;
 background: white;
 animation: twinkle var(--d, 3s) ease-in-out infinite var(--delay, 0s);
}
.relation-btn{padding:8px 12px;border-radius:20px;border:1px solid rgba(200,168,75,0.35);background:rgba(200,168,75,0.06);color:var(--silver);font-size:13px;cursor:pointer;transition:all 0.2s;font-family:'DM Sans',sans-serif}
.relation-btn:hover{background:rgba(200,168,75,0.15);border-color:var(--gold);color:var(--gold-light)}
.relation-btn.active{background:rgba(200,168,75,0.22);border-color:var(--gold);color:var(--gold-light);font-weight:600}
@keyframes astrosPulse{0%,100%{opacity:0.5}50%{opacity:1}}
@keyframes astrosDot{0%,80%,100%{opacity:0.2;transform:scale(0.8)}40%{opacity:1;transform:scale(1.2)}}
@keyframes twinkle {
 0%, 100% { opacity: var(--o1, 0.3); transform: scale(1); }
 50% { opacity: var(--o2, 0.9); transform: scale(1.4); }
}

/* Nebula glow */
.nebula {
 position: fixed;
 border-radius: 50%;
 filter: blur(80px);
 pointer-events: none;
 z-index: 0;
}
.nebula-1 {
 width: 500px; height: 500px;
 background: radial-gradient(circle, rgba(136,120,212,0.08) 0%, transparent 70%);
 top: -100px; right: -100px;
}
.nebula-2 {
 width: 400px; height: 400px;
 background: radial-gradient(circle, rgba(200,168,75,0.06) 0%, transparent 70%);
 bottom: 100px; left: -80px;
}

/* App shell */
#app {
 position: relative;
 z-index: 1;
 max-width: 420px;
 margin: 0 auto;
 min-height: 100vh;
 display: flex;
 flex-direction: column;
}

/* Header */
.app-header {
 padding: 20px 20px 0;
 text-align: center;
}
.logo {
 font-family: 'Cinzel', serif;
 font-size: 26px;
 font-weight: 700;
 letter-spacing: 0.25em;
 background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--violet-light));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
}
.logo-sub {
 font-family: 'Cormorant Garamond', serif;
 font-size: 11px;
 font-weight: 300;
 letter-spacing: 0.35em;
 color: var(--text-dim);
 margin-top: 2px;
 text-transform: uppercase;
}

/* Tab nav */
.tab-nav {
 display: grid;
 grid-template-columns: repeat(6, minmax(0, 1fr));
 gap: 6px;
 margin: 20px 16px 0;
 background: var(--bg2);
 border: 1px solid var(--border-soft);
 border-radius: 14px;
 padding: 4px;
 overflow: visible;
}
.tab-nav::-webkit-scrollbar { display: none; }
.tab-btn {
 grid-column: span 2;
 min-width: 0;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 9px 6px;
 border: none;
 background: none;
 color: var(--text-dim);
 font-family: 'DM Sans', sans-serif;
 font-size: 13px;
 font-weight: 600;
 cursor: pointer;
 border-radius: 10px;
 transition: all 0.25s;
 letter-spacing: 0;
 white-space: nowrap;
 text-align: center;
}
.tab-btn:nth-child(4) { grid-column: 2 / span 2; }
.tab-btn:nth-child(5) { grid-column: 4 / span 2; }
.tab-btn.active {
 background: linear-gradient(135deg, rgba(200,168,75,0.2), rgba(136,120,212,0.2));
 color: var(--gold-light);
 border: 1px solid var(--border);
}

/* Screens */
.screen { display: none; padding: 16px; flex: 1; }
.screen.active { display: block; }
.app-back-btn {
 position: fixed;
 top: max(14px, env(safe-area-inset-top));
 left: max(14px, env(safe-area-inset-left));
 z-index: 40;
 width: 38px;
 height: 38px;
 border-radius: 50%;
 border: 1px solid rgba(232,201,122,0.26);
 background: rgba(9,9,22,0.62);
 color: var(--gold-light);
 font-size: 28px;
 line-height: 1;
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 box-shadow: 0 10px 28px rgba(0,0,0,0.22);
 transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.app-back-btn:hover {
 border-color: rgba(232,201,122,0.58);
 background: rgba(18,18,38,0.82);
 transform: translateX(-1px);
}
.app-back-btn:active { transform: translateX(-2px) scale(0.98); }
.text-size-toggle {
 position: fixed;
 top: max(14px, env(safe-area-inset-top));
 right: max(14px, env(safe-area-inset-right));
 z-index: 41;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 2px;
 min-width: 86px;
 height: 44px;
 padding: 4px;
 border-radius: 999px;
 border: 1px solid rgba(200,168,75,0.34);
 background: rgba(13,13,34,0.82);
 box-shadow: 0 10px 34px rgba(0,0,0,0.35);
 backdrop-filter: blur(14px);
 -webkit-backdrop-filter: blur(14px);
}
.text-size-btn {
 width: 36px;
 height: 34px;
 border: 0;
 border-radius: 999px;
 background: transparent;
 color: var(--text-dim);
 font-family: 'DM Sans', sans-serif;
 font-size: 22px;
 font-weight: 900;
 line-height: 1;
 cursor: pointer;
}
.text-size-btn.active {
 background: linear-gradient(135deg, rgba(200,168,75,0.26), rgba(136,120,212,0.22));
 color: #fff2bd;
}
.text-size-divider {
 width: 1px;
 height: 20px;
 background: rgba(200,168,75,0.22);
}

/* Onboarding screens */
.onboard-screen { display: none; min-height: 100vh; flex-direction: column; align-items: center; justify-content: center; padding: 32px 20px; position: relative; background: transparent; }
.onboard-screen.active { display: flex; }
.onboard-screen > * { position: relative; z-index: 2; }
#starfield-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; display: none; background: #060612; }
body.onboarding { background: #060612; }
.onboard-logo { width: 100%; text-align: center; font-family: 'Cinzel', serif; font-size: 28px; letter-spacing: 0.15em; color: var(--gold); margin-bottom: 6px; position: relative; z-index: 3; }
.onboard-logo-sub { width: 100%; text-align: center; font-family: 'Cormorant Garamond', serif; font-size: 14px; color: var(--text-dim); letter-spacing: 0.1em; margin-bottom: 40px; position: relative; z-index: 3; }
.onboard-title { font-family: 'Cinzel', serif; font-size: 16px; color: var(--gold-light); letter-spacing: 0.08em; margin-bottom: 8px; text-align: center; }
.onboard-sub { font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--text-dim); text-align: center; margin-bottom: 32px; line-height: 1.6; }
.onboard-card { background: rgba(13,13,34,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: 18px; padding: 28px 24px; width: 100%; max-width: 400px; position: relative; z-index: 3; }
.onboard-system-list { display: grid; gap: 8px; margin: 18px 0; }
.onboard-system-pill { display: grid; grid-template-columns: 94px 1fr; gap: 10px; align-items: center; padding: 11px 12px; border: 1px solid rgba(200,168,75,0.18); border-radius: 12px; background: rgba(255,255,255,0.035); text-align: left; }
.onboard-system-name { font-family: 'Cinzel', serif; font-size: 10px; color: var(--gold-light); letter-spacing: 0.11em; text-transform: uppercase; }
.onboard-system-copy { font-size: 12px; color: var(--silver); line-height: 1.45; }
.onboard-unified-copy { font-size: 13px; color: var(--text); line-height: 1.65; text-align: center; margin: 14px 0 18px; }
.terms-list { list-style: none; padding: 0; margin: 0 0 24px 0; }
.terms-list li { font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--silver); padding: 10px 0; border-bottom: 1px solid var(--border-soft); line-height: 1.5; display: flex; gap: 10px; }
.terms-list li:last-child { border-bottom: none; }
.terms-list li::before { content: '✦'; color: var(--gold); flex-shrink: 0; margin-top: 1px; }
.terms-check-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; cursor: pointer; }
.terms-check-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--gold); flex-shrink: 0; margin-top: 2px; cursor: pointer; }
.terms-check-label { font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--text-dim); line-height: 1.5; cursor: pointer; }
.onboard-btn { width: 100%; padding: 15px; background: linear-gradient(135deg, var(--gold) 0%, #a8883b 100%); color: #060612; font-family: 'Cinzel', serif; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; border: none; border-radius: 12px; cursor: pointer; transition: opacity 0.2s; }
.onboard-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.quiz-shell { width: 100%; max-width: 430px; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 0 28px; }
.quiz-progress-track { height: 4px; border-radius: 999px; background: rgba(200,168,75,0.12); overflow: hidden; }
.quiz-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); transition: width 0.65s ease; box-shadow: 0 0 18px rgba(200,168,75,0.55); }
.quiz-progress-text { margin-top: 10px; text-align: center; font-size: 11px; color: var(--gold-light); letter-spacing: 0.08em; font-family: 'Cinzel', serif; }
.quiz-progress-inline { margin: 18px 0 20px; }
.quiz-card { background: rgba(13,13,34,0.74); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(200,168,75,0.24); border-radius: 18px; padding: 24px 20px; width: 100%; min-height: 390px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 3; transition: opacity 0.36s ease, transform 0.36s ease, filter 0.36s ease; }
.quiz-card.is-leaving { opacity: 0; transform: translateY(8px) scale(0.992); filter: blur(2px); }
.quiz-card.is-entering { animation: quizCardEnter 0.42s ease both; }
@keyframes quizCardEnter { from { opacity: 0; transform: translateY(10px) scale(0.992); filter: blur(3px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
.landing-choice-title { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 500; color: var(--gold-light); letter-spacing: 0.01em; line-height: 1.08; text-align: center; margin: 0 auto 14px; max-width: 340px; text-wrap: balance; }
.landing-choice-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 16px; }
.landing-choice-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 7px 12px; border: 1px solid rgba(232,201,122,0.24); border-radius: 999px; background: rgba(232,201,122,0.06); color: rgba(232,201,122,0.92); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; line-height: 1; }
.landing-choice-copy { font-size: 14px; font-weight: 400; color: rgba(232,228,240,0.78); line-height: 1.62; text-align: center; margin: 0 auto 22px; max-width: 330px; text-wrap: balance; }
.landing-promise-list { display: grid; gap: 8px; margin: 0 0 20px; }
.landing-promise-item { min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid rgba(232,201,122,0.16); border-radius: 14px; background: linear-gradient(135deg, rgba(255,255,255,0.038), rgba(136,120,212,0.035)); color: rgba(232,228,240,0.86); font-size: 13px; font-weight: 500; line-height: 1.35; }
.landing-promise-item::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px; background: var(--gold-light); box-shadow: 0 0 16px rgba(232,201,122,0.48); }
.landing-action-grid { display: grid; gap: 12px; }
.landing-action-card { width: 100%; min-height: 58px; padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(232,201,122,0.6); background: linear-gradient(135deg, #ead07d 0%, #c8a84b 52%, #a98532 100%); color: #080812; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.25; text-align: center; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 14px 34px rgba(200,168,75,0.14), inset 0 1px 0 rgba(255,255,255,0.35); transition: border-color 0.2s ease, transform 0.2s ease, filter 0.2s ease; }
.landing-action-card:hover { border-color: var(--gold-light); filter: brightness(1.04); transform: translateY(-1px); }
.landing-action-card.secondary { min-height: 52px; border-color: rgba(160,145,213,0.28); color: rgba(232,228,240,0.82); background: rgba(255,255,255,0.028); box-shadow: none; font-weight: 600; }
.landing-action-card small { display: block; color: var(--silver); font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1.5; }
.landing-restore-form { display: grid; gap: 10px; margin-top: 8px; }
.landing-restore-note { font-size: 12px; color: var(--silver); line-height: 1.55; text-align: center; margin: 0 0 8px; }
.landing-secondary-link { width: 100%; margin-top: 10px; background: transparent; border: none; color: var(--gold-light); font-family: 'DM Sans', sans-serif; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.quiz-kicker { font-family: 'Cinzel', serif; font-size: 11px; color: var(--gold); letter-spacing: 0.16em; text-align: center; margin-bottom: 14px; text-transform: uppercase; }
.quiz-question { font-family: 'Cormorant Garamond', serif; font-size: 30px; line-height: 1.1; color: var(--text); text-align: center; margin-bottom: 22px; }
.quiz-welcome { font-family: 'Cormorant Garamond', serif; font-size: 22px; line-height: 1.35; color: var(--silver); text-align: center; margin-bottom: 20px; }
.quiz-helper { color: var(--text-dim); font-size: 12px; line-height: 1.55; text-align: center; margin: -8px 0 16px; }
.quiz-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.quiz-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quiz-select, .quiz-input { width: 100%; height: 48px; border-radius: 12px; border: 1px solid var(--border-soft); background: rgba(6,6,18,0.78); color: var(--text); padding: 0 12px; font-size: 14px; font-family: 'DM Sans', sans-serif; }
.quiz-input { height: 50px; }
.quiz-options { display: grid; gap: 10px; }
.quiz-option { width: 100%; min-height: 54px; padding: 13px 14px; border-radius: 14px; border: 1px solid rgba(200,168,75,0.2); background: rgba(255,255,255,0.035); color: var(--silver); text-align: left; font-size: 14px; line-height: 1.35; font-family: 'DM Sans', sans-serif; cursor: pointer; transition: all 0.2s ease; }
.quiz-option:hover, .quiz-option.selected { border-color: var(--gold); background: rgba(200,168,75,0.12); color: var(--gold-light); }
.quiz-primary { width: 100%; min-height: 52px; margin-top: 18px; border: none; border-radius: 14px; background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: #080812; font-family: 'Cinzel', serif; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; cursor: pointer; }
.quiz-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.quiz-skip { width: 100%; margin-top: 10px; background: transparent; border: none; color: var(--text-dim); font-size: 12px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.quiz-message-wrap { min-height: 390px; display: flex; flex-direction: column; align-items: stretch; justify-content: center; padding: 30px 10px; }
.quiz-message-mark { width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 22px; border: 1px solid rgba(232,201,122,0.32); background: radial-gradient(circle, rgba(232,201,122,0.26), rgba(136,120,212,0.08) 62%, transparent 64%); box-shadow: 0 0 28px rgba(200,168,75,0.16); position: relative; }
.quiz-message-mark::after { content: ''; position: absolute; inset: 11px; border-radius: 50%; background: rgba(232,201,122,0.38); box-shadow: 0 0 18px rgba(232,201,122,0.34); animation: quizQuietPulse 1.9s ease-in-out infinite; }
.quiz-message { min-height: 58px; display: flex; align-items: center; justify-content: center; text-align: center; font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600; line-height: 1.55; color: rgba(232,228,240,0.9); padding: 0 8px; letter-spacing: 0; }
@keyframes quizQuietPulse { 0%,100% { opacity: 0.58; transform: scale(0.86); } 50% { opacity: 1; transform: scale(1); } }
.quiz-final-title { font-family: 'Cinzel', serif; font-size: 17px; color: var(--gold-light); text-align: center; letter-spacing: 0.12em; line-height: 1.4; margin-bottom: 14px; }
.quiz-final-copy { color: var(--silver); font-size: 13px; line-height: 1.65; text-align: center; margin-bottom: 18px; }
.quiz-register-grid { display: grid; gap: 10px; }
.quiz-error { display: none; margin-top: 10px; color: #ffb4b4; font-size: 12px; line-height: 1.5; text-align: center; }
@media (max-width: 480px) {
 .onboard-screen { padding: 0 16px; }
 .quiz-shell { padding-top: 30px; }
 .landing-choice-title { font-size: 30px; max-width: 320px; }
 .landing-choice-copy { font-size: 13px; }
 .landing-promise-item { min-height: 42px; font-size: 12px; }
 .quiz-question { font-size: 27px; }
 .quiz-card { min-height: 370px; padding: 22px 16px; }
 .quiz-row { gap: 7px; }
 .quiz-select { padding: 0 8px; font-size: 13px; }
}

/* Section title */
.section-title {
 font-family: 'Cinzel', serif;
 font-size: 13px;
 font-weight: 600;
 letter-spacing: 0.2em;
 color: var(--gold);
 text-transform: uppercase;
 margin-bottom: 14px;
 display: flex;
 align-items: center;
 gap: 10px;
}
.section-title::after {
 content: '';
 flex: 1;
 height: 1px;
 background: linear-gradient(to right, var(--border), transparent);
}

/* Card */
.card {
 background: linear-gradient(135deg, var(--bg2), var(--bg3));
 border: 1px solid var(--border-soft);
 border-radius: 16px;
 padding: 18px;
 margin-bottom: 14px;
 position: relative;
 overflow: hidden;
}
.card::before {
 content: '';
 position: absolute;
 top: 0; left: 0; right: 0;
 height: 1px;
 background: linear-gradient(to right, transparent, var(--gold-dim), transparent);
}

/* Input */
.form-group { margin-bottom: 14px; }
.form-label {
 display: block;
 font-size: 11px;
 font-weight: 500;
 letter-spacing: 0.1em;
 color: var(--text-dim);
 margin-bottom: 6px;
 text-transform: uppercase;
}
.form-input, .form-select {
 width: 100%;
 padding: 11px 14px;
 background: rgba(255,255,255,0.04);
 border: 1px solid var(--border-soft);
 border-radius: 10px;
 color: var(--text);
 font-family: 'DM Sans', sans-serif;
 font-size: 14px;
 outline: none;
 transition: border-color 0.2s;
 -webkit-appearance: none;
}
.form-input:focus, .form-select:focus {
 border-color: var(--gold);
 background: rgba(200,168,75,0.04);
}
.form-select option { background: #13132e; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Button */
.btn-primary {
 width: 100%;
 padding: 14px;
 background: linear-gradient(135deg, rgba(200,168,75,0.25), rgba(136,120,212,0.2));
 border: 1px solid var(--gold);
 border-radius: 12px;
 color: var(--gold-light);
 font-family: 'Cinzel', serif;
 font-size: 13px;
 font-weight: 600;
 letter-spacing: 0.15em;
 cursor: pointer;
 transition: all 0.2s;
 margin-top: 4px;
}
.btn-primary:hover { background: linear-gradient(135deg, rgba(200,168,75,0.35), rgba(136,120,212,0.3)); }
.btn-primary:active { transform: scale(0.98); }

/* System tabs */
.sys-tabs-wrap {
 position: relative;
 margin: 0 0 14px;
}
.sys-tabs-wrap::after {
 display: none;
}
.sys-tabs {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 6px;
 overflow: visible;
 padding: 4px 0 8px;
}
.sys-tabs::-webkit-scrollbar { display: none; }
.sys-tab {
 flex: 0 0 auto;
 padding: 6px 10px;
 border: 1px solid var(--border-soft);
 border-radius: 20px;
 background: none;
 color: var(--text-dim);
 font-size: 11px;
 font-weight: 500;
 cursor: pointer;
 transition: all 0.2s;
 white-space: nowrap;
 line-height: 1;
}
.sys-tabs > .sys-tab {
 width: 100%;
 min-width: 0;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 7px 6px;
 font-size: 10.5px;
}
.sys-tab.active {
 border-color: var(--violet);
 color: var(--violet-light);
 background: var(--violet-dim);
}
@media (max-width: 360px) {
 .sys-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 .sys-tabs > .sys-tab {
  font-size: 10px;
 }
}

/* Result panels */
.result-panel { display: none; }
.result-panel.active { display: block; }
.birth-ready-summary {
 display: none;
 margin-bottom: 14px;
 border-color: rgba(200,168,75,0.38);
 background:
  radial-gradient(circle at 18% 0%, rgba(232,201,122,0.11), transparent 32%),
  linear-gradient(145deg, rgba(200,168,75,0.08), rgba(136,120,212,0.07));
 padding-top: 20px;
 overflow: hidden;
}
.birth-ready-summary.active { display: block; }
.birth-ready-top {
 display: block;
 position: relative;
}
.birth-ready-kicker {
 font-family: 'Cinzel', serif;
 font-size: 10px;
 letter-spacing: 0.14em;
 color: var(--gold);
 text-transform: uppercase;
 margin-bottom: 8px;
 padding-right: 118px;
}
.birth-ready-title {
 font-family: 'Cormorant Garamond', serif;
 font-size: 23px;
 line-height: 1.2;
 color: var(--gold-light);
 margin-bottom: 8px;
 padding-right: 118px;
}
.birth-ready-copy {
 color: var(--silver);
 font-size: 14px;
 line-height: 1.65;
}
.post-birth-next-card {
 margin-top: 14px;
 padding: 18px 16px 16px;
 border: 1px solid rgba(200,168,75,0.28);
 border-radius: 16px;
 background: linear-gradient(145deg, rgba(200,168,75,0.075), rgba(30,29,45,0.72));
 box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.post-birth-next-title {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 margin-bottom: 14px;
 font-family: 'Cinzel', serif;
 font-size: 13px;
 line-height: 1.55;
 letter-spacing: 0.13em;
 color: var(--gold-light);
 text-transform: uppercase;
}
.post-birth-next-title .glyph {
 flex: 0 0 auto;
 margin-top: 2px;
}
.post-birth-path-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: 10px;
}
.post-birth-path-btn {
 width: 100%;
 min-width: 0;
 min-height: 104px;
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 justify-content: flex-start;
 gap: 7px;
 padding: 14px 14px 13px;
 border: 1px solid rgba(176,188,216,0.20);
 border-radius: 14px;
 background: rgba(255,255,255,0.04);
 color: var(--text);
 text-align: left;
 cursor: pointer;
 transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
 white-space: normal;
}
.post-birth-path-btn:hover,
.post-birth-path-btn:focus-visible {
 border-color: rgba(232,201,122,0.42);
 background: rgba(255,255,255,0.065);
 transform: translateY(-1px);
 outline: none;
}
.post-birth-path-btn.is-featured {
 border-color: rgba(200,168,75,0.42);
 background: rgba(200,168,75,0.085);
}
.post-birth-path-title {
 font-family: 'DM Sans', sans-serif;
 font-size: 14px;
 line-height: 1.35;
 font-weight: 800;
 color: var(--text);
 letter-spacing: 0;
}
.post-birth-path-copy {
 max-width: 100%;
 font-size: 12.5px;
 line-height: 1.5;
 color: var(--text-dim);
}
.post-birth-path-action {
 margin-top: auto;
 font-size: 11px;
 line-height: 1.35;
 letter-spacing: 0.06em;
 color: var(--gold-light);
 font-weight: 800;
 text-transform: uppercase;
}
.birth-diagnosis-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: 10px;
 margin-top: 16px;
}
.birth-diagnosis-item,
.birth-system-card {
 position: relative;
 padding: 14px;
 border: 1px solid rgba(232,201,122,0.18);
 border-radius: 14px;
 background: linear-gradient(145deg, rgba(255,255,255,0.052), rgba(255,255,255,0.024));
 cursor: default;
 transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease;
 overflow: hidden;
}
.birth-system-card:hover {
 border-color: rgba(232,201,122,0.45);
 background: linear-gradient(145deg, rgba(255,255,255,0.074), rgba(136,120,212,0.055));
 transform: translateY(-1px);
}
.birth-system-card.locked {
 border-color: rgba(200,168,75,0.34);
 background:
  linear-gradient(145deg, rgba(200,168,75,0.12), rgba(136,120,212,0.075)),
  rgba(255,255,255,0.02);
}
.birth-system-card.locked::after {
 content: 'PREMIUM';
 position: absolute;
 top: 12px;
 right: 12px;
 padding: 4px 8px;
 border-radius: 999px;
 border: 1px solid rgba(232,201,122,0.22);
 color: var(--gold-light);
 font-size: 9px;
 font-family: 'Cinzel', serif;
 letter-spacing: 0.11em;
 background: rgba(6,6,18,0.36);
}
.birth-system-head {
 display: flex;
 align-items: center;
 gap: 10px;
 margin-bottom: 10px;
 padding-right: 76px;
}
.birth-system-glyph {
 width: 30px;
 height: 30px;
 flex: 0 0 30px;
 border-radius: 50%;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 border: 1px solid rgba(232,201,122,0.24);
 background: rgba(200,168,75,0.08);
 color: var(--gold-light);
 font-size: 15px;
}
.birth-system-kicker {
 font-size: 10px;
 line-height: 1.25;
 letter-spacing: 0.12em;
 color: var(--text-dim);
 text-transform: uppercase;
 margin-bottom: 3px;
}
.birth-system-title {
 font-size: 13px;
 line-height: 1.35;
 color: var(--gold-light);
 font-weight: 700;
 letter-spacing: 0;
}
.birth-system-meta {
 margin-bottom: 8px;
 color: rgba(232,228,240,0.72);
 font-size: 12px;
 line-height: 1.45;
}
.birth-diagnosis-label {
 font-size: 12px;
 letter-spacing: 0.02em;
 color: var(--gold-light);
 text-transform: none;
 margin-bottom: 6px;
 font-weight: 600;
}
.birth-diagnosis-text {
 font-family: 'DM Sans', sans-serif;
 font-size: 14px;
 line-height: 1.62;
 color: var(--text);
}
.birth-system-action {
 margin-top: 10px;
 color: var(--gold-light);
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0.04em;
}
.birth-system-action-btn {
 margin-top: 10px;
 padding: 0;
 border: none;
 background: transparent;
 color: var(--gold-light);
 font: inherit;
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0.04em;
 text-align: left;
 text-decoration: underline;
 text-underline-offset: 4px;
 cursor: pointer;
}
.birth-system-detail-panel {
 display: none;
 margin-top: 14px;
 padding: 16px;
 border-radius: 14px;
 border: 1px solid rgba(232,201,122,0.22);
 background: rgba(255,255,255,0.035);
}
.birth-system-detail-panel.active { display: block; }
.birth-system-detail-title {
 font-family: 'Cinzel', serif;
 font-size: 11px;
 color: var(--gold-light);
 letter-spacing: 0.12em;
 text-transform: uppercase;
 margin-bottom: 10px;
}
.birth-system-detail-text {
 color: var(--silver);
 font-size: 14px;
 line-height: 1.75;
}
.birth-diagnosis-cta {
 width: 100%;
 margin-top: 12px;
 padding: 13px 14px;
 border-radius: 12px;
 border: 1px solid var(--gold);
 background: linear-gradient(135deg, rgba(200,168,75,0.24), rgba(136,120,212,0.18));
 color: var(--gold-light);
 font-family: 'Cinzel', serif;
 font-size: 12px;
 font-weight: 700;
 letter-spacing: 0.1em;
 cursor: pointer;
}
.birth-diagnosis-cta:hover {
 background: linear-gradient(135deg, rgba(200,168,75,0.34), rgba(136,120,212,0.26));
}
.birth-edit-btn {
 position: absolute;
 top: 0;
 right: 0;
 padding: 10px 14px;
 border-radius: 12px;
 border: 1px solid var(--border-soft);
 background: rgba(255,255,255,0.04);
 color: var(--silver);
 font-size: 11px;
 letter-spacing: 0.06em;
 cursor: pointer;
 text-transform: uppercase;
}
.birth-edit-btn:hover { border-color: var(--gold); color: var(--gold-light); }
@media (max-width: 520px) {
 .birth-ready-kicker,
 .birth-ready-title { padding-right: 0; }
 .birth-edit-btn {
  position: static;
  width: 100%;
  margin-bottom: 12px;
 }
}

/* Sign display */
.sign-hero {
 text-align: center;
 padding: 20px 0 14px;
}
.sign-symbol {
 font-size: 52px;
 line-height: 1;
 margin-bottom: 10px;
 filter: drop-shadow(0 0 20px var(--gold));
 animation: float 4s ease-in-out infinite;
}
@keyframes float {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-6px); }
}
.sign-name {
 font-family: 'Cinzel', serif;
 font-size: 22px;
 font-weight: 600;
 color: var(--gold-light);
 letter-spacing: 0.08em;
}
.sign-name-mn {
 font-family: 'Cormorant Garamond', serif;
 font-size: 15px;
 font-style: italic;
 color: var(--text-dim);
 margin-top: 3px;
}
.sign-dates {
 font-size: 12px;
 color: var(--text-dim);
 margin-top: 6px;
 letter-spacing: 0.05em;
}

/* Info grid */
.info-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 10px;
 margin: 14px 0;
}
.info-chip {
 background: var(--silver-dim);
 border: 1px solid var(--border-soft);
 border-radius: 10px;
 padding: 10px 12px;
 text-align: center;
}
.info-chip-label {
 font-size: 10px;
 letter-spacing: 0.1em;
 color: var(--text-dim);
 text-transform: uppercase;
 margin-bottom: 4px;
}
.info-chip-value {
 font-family: 'Cormorant Garamond', serif;
 font-size: 15px;
 font-weight: 500;
 color: var(--gold-light);
}

/* Description text */
.desc-text {
 font-family: 'Cormorant Garamond', serif;
 font-size: 17px;
 line-height: 1.7;
 color: var(--silver);
 margin-bottom: 14px;
}
.desc-text em {
 color: var(--gold-light);
 font-style: italic;
}

/* Trait list */
.trait-list { margin: 10px 0; }
.trait-item {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 padding: 8px 0;
 border-bottom: 1px solid var(--border-soft);
}
.trait-item:last-child { border-bottom: none; }
.trait-dot {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: var(--gold);
 margin-top: 6px;
 flex-shrink: 0;
}
.trait-dot.violet { background: var(--violet-light); }
.trait-text {
 font-size: 14px;
 color: var(--silver);
 line-height: 1.5;
}

/* Planet row */
.planet-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 9px 0;
 border-bottom: 1px solid var(--border-soft);
}
.planet-row:last-child { border-bottom: none; }
.planet-name { font-size: 13px; color: var(--text-dim); }
.planet-sign {
 font-family: 'Cormorant Garamond', serif;
 font-size: 15px;
 color: var(--gold-light);
 text-align: right;
}

/* Menge display */
.menge-circle {
 width: 80px; height: 80px;
 border-radius: 50%;
 border: 2px solid var(--gold);
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 margin: 0 auto 14px;
 background: radial-gradient(circle, rgba(200,168,75,0.1), transparent);
 box-shadow: 0 0 30px rgba(200,168,75,0.2);
}
.menge-num {
 font-family: 'Cinzel', serif;
 font-size: 28px;
 font-weight: 700;
 color: var(--gold-light);
 line-height: 1;
}
.menge-label {
 font-size: 9px;
 letter-spacing: 0.15em;
 color: var(--text-dim);
 text-transform: uppercase;
}

/* Year badge */
.year-badge {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 8px 16px;
 border-radius: 20px;
 font-size: 13px;
 font-weight: 500;
 margin-bottom: 12px;
}
.year-badge.good { background: rgba(100,200,120,0.12); border: 1px solid rgba(100,200,120,0.3); color: #80e89a; }
.year-badge.medium { background: rgba(200,168,75,0.12); border: 1px solid var(--border); color: var(--gold-light); }
.year-badge.bad { background: rgba(200,80,80,0.12); border: 1px solid rgba(200,80,80,0.3); color: #f09090; }
.year-badge.strike { background: rgba(180,40,40,0.15); border: 1px solid rgba(180,40,40,0.4); color: #e07070; }

/* Compatibility */
.compat-avatars {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 16px;
 margin: 10px 0 18px;
}
.compat-avatar {
 text-align: center;
}
.compat-symbol { font-size: 38px; line-height: 1; }
.compat-name {
 font-family: 'Cinzel', serif;
 font-size: 12px;
 color: var(--gold-light);
 margin-top: 6px;
 letter-spacing: 0.05em;
}
.compat-divider {
 font-size: 22px;
 color: var(--violet-light);
 opacity: 0.6;
}

/* Score */
.score-display {
 text-align: center;
 margin: 16px 0;
}
.score-number {
 font-family: 'Cinzel', serif;
 font-size: 56px;
 font-weight: 700;
 line-height: 1;
 background: linear-gradient(135deg, var(--gold-light), var(--violet-light));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
}
.score-max {
 font-size: 18px;
 color: var(--text-dim);
 font-family: 'Cormorant Garamond', serif;
}
.score-label {
 font-family: 'Cormorant Garamond', serif;
 font-size: 16px;
 font-style: italic;
 color: var(--silver);
 margin-top: 6px;
}

/* Score bars */
.score-bar-row {
 display: flex;
 align-items: center;
 gap: 10px;
 margin-bottom: 10px;
}
.score-bar-label { font-size: 12px; color: var(--text-dim); width: 70px; flex-shrink: 0; }
.score-bar-track {
 flex: 1;
 height: 5px;
 background: var(--silver-dim);
 border-radius: 3px;
 overflow: hidden;
}
.score-bar-fill {
 height: 100%;
 border-radius: 3px;
 background: linear-gradient(to right, var(--gold), var(--violet-light));
 transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}
.score-bar-val { font-size: 12px; color: var(--gold-light); width: 32px; text-align: right; }

/* Mayan */
.tzolkin-display {
 text-align: center;
 padding: 16px 0;
}
.tzolkin-tone {
 font-family: 'Cinzel', serif;
 font-size: 48px;
 font-weight: 700;
 color: var(--violet-light);
 line-height: 1;
 filter: drop-shadow(0 0 20px var(--violet));
}
.tzolkin-sign-name {
 font-family: 'Cinzel', serif;
 font-size: 20px;
 color: var(--gold-light);
 margin-top: 8px;
 letter-spacing: 0.1em;
}
.tzolkin-mayan {
 font-family: 'Cormorant Garamond', serif;
 font-size: 14px;
 font-style: italic;
 color: var(--text-dim);
 margin-top: 4px;
}
.tzolkin-combined {
 font-size: 13px;
 color: var(--silver);
 margin-top: 10px;
 padding: 8px 16px;
 background: var(--violet-dim);
 border-radius: 20px;
 display: inline-block;
 border: 1px solid rgba(136,120,212,0.2);
}

/* Convergence section */
.convergence-item {
 display: flex;
 gap: 12px;
 padding: 12px 0;
 border-bottom: 1px solid var(--border-soft);
}
.convergence-item:last-child { border-bottom: none; }
.convergence-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.convergence-text { font-size: 14px; color: var(--silver); line-height: 1.5; }
.convergence-text strong { color: var(--gold-light); font-weight: 500; }

/* Empty / placeholder */
.placeholder {
 text-align: center;
 padding: 40px 20px;
 color: var(--text-dim);
}
.placeholder-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.4; }
.placeholder-text {
 font-family: 'Cormorant Garamond', serif;
 font-size: 16px;
 font-style: italic;
 line-height: 1.6;
}

/* Animate in */
.fade-in { animation: fadeIn 0.4s ease forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Bottom padding */

/* ══════════════════════════════════════════════
  PAYWALL & MONETIZATION STYLES — ASTROS17
══════════════════════════════════════════════ */

/* ── Premium badge in header ── */
.premium-badge {
 display: inline-flex;
 align-items: center;
 gap: 5px;
 padding: 3px 10px;
 border-radius: 20px;
 font-size: 10px;
 font-family: 'Cinzel', serif;
 letter-spacing: 0.12em;
 cursor: pointer;
 transition: all 0.25s;
}
.premium-badge.locked {
 background: rgba(200,168,75,0.1);
 border: 1px solid rgba(200,168,75,0.35);
 color: var(--gold);
}
.premium-badge.unlocked {
 background: rgba(100,200,120,0.12);
 border: 1px solid rgba(100,200,120,0.3);
 color: #80e89a;
}

/* ── Lock overlay on system tabs ── */
.sys-tab.locked-tab {
 position: relative;
 opacity: 0.55;
}
.sys-tab.locked-tab::after {
 content: '🔒';
 font-size: 8px;
 position: absolute;
 top: 2px;
 right: 2px;
}

/* ── Blurred / teaser content ── */
.content-locked {
 position: relative;
 overflow: hidden;
}
.content-blur {
 filter: blur(5px);
 user-select: none;
 pointer-events: none;
 transition: filter 0.5s;
}
.content-blur.revealed {
 filter: none;
}

/* ── Lock gate overlay on cards ── */
.lock-gate {
 position: absolute;
 inset: 0;
 background: linear-gradient(to bottom, 
  rgba(6,6,18,0) 0%, 
  rgba(6,6,18,0.5) 35%, 
  rgba(6,6,18,0.92) 65%, 
  rgba(6,6,18,1) 100%);
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: flex-end;
 padding: 20px 20px 22px;
 border-radius: 16px;
 z-index: 10;
 transition: opacity 0.5s;
}
.lock-gate.hidden {
 opacity: 0;
 pointer-events: none;
}
.lock-icon {
 font-size: 22px;
 margin-bottom: 8px;
 filter: drop-shadow(0 0 8px var(--gold));
}
.lock-gate-title {
 font-family: 'Cinzel', serif;
 font-size: 13px;
 letter-spacing: 0.14em;
 color: var(--gold-light);
 margin-bottom: 6px;
 text-align: center;
}
.lock-gate-sub {
 font-family: 'Cormorant Garamond', serif;
 font-size: 14px;
 color: var(--silver);
 text-align: center;
 line-height: 1.5;
 margin-bottom: 14px;
}
.lock-gate-btn {
 width: 100%;
 padding: 11px;
 background: linear-gradient(135deg, rgba(200,168,75,0.3), rgba(136,120,212,0.25));
 border: 1px solid var(--gold);
 border-radius: 10px;
 color: var(--gold-light);
 font-family: 'Cinzel', serif;
 font-size: 12px;
 font-weight: 600;
 letter-spacing: 0.12em;
 cursor: pointer;
 transition: all 0.2s;
}
.lock-gate-btn:hover {
 background: linear-gradient(135deg, rgba(200,168,75,0.45), rgba(136,120,212,0.4));
 transform: translateY(-1px);
}

/* ── Free preview strip (gradient cut on text) ── */
.preview-cut {
 position: relative;
 max-height: 120px;
 overflow: hidden;
}
.preview-cut::after {
 content: '';
 position: absolute;
 bottom: 0; left: 0; right: 0;
 height: 80px;
 background: linear-gradient(to bottom, transparent, var(--bg3));
 pointer-events: none;
}

/* ── Main paywall block ── */
.paywall-block {
 margin: 6px 0 16px;
 background: linear-gradient(135deg, rgba(13,13,34,0.98), rgba(19,19,46,0.98));
 border: 1px solid var(--gold);
 border-radius: 20px;
 padding: 28px 22px 24px;
 text-align: center;
 position: relative;
 overflow: hidden;
}
.paywall-block::before {
 content: '';
 position: absolute;
 top: 0; left: 20%; right: 20%;
 height: 1px;
 background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.paywall-radiance {
 position: absolute;
 width: 300px; height: 300px;
 border-radius: 50%;
 background: radial-gradient(circle, rgba(200,168,75,0.08) 0%, transparent 70%);
 top: -100px; left: 50%;
 transform: translateX(-50%);
 pointer-events: none;
}
.paywall-star {
 font-size: 32px;
 margin-bottom: 10px;
 display: block;
 animation: float 4s ease-in-out infinite;
}
.paywall-title {
 font-family: 'Cinzel', serif;
 font-size: 17px;
 font-weight: 700;
 letter-spacing: 0.15em;
 background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--violet-light));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 margin-bottom: 10px;
}
.paywall-sub {
 font-family: 'Cormorant Garamond', serif;
 font-size: 16px;
 font-style: italic;
 color: var(--silver);
 line-height: 1.6;
 margin-bottom: 20px;
}
.paywall-includes {
 background: rgba(255,255,255,0.03);
 border: 1px solid var(--border-soft);
 border-radius: 12px;
 padding: 14px 16px;
 margin-bottom: 20px;
 text-align: left;
}
.paywall-includes-title {
 font-size: 10px;
 letter-spacing: 0.15em;
 color: var(--text-dim);
 text-transform: uppercase;
 margin-bottom: 10px;
 text-align: center;
}
.paywall-item {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 padding: 6px 0;
 font-family: 'Cormorant Garamond', serif;
 font-size: 15px;
 color: var(--silver);
 border-bottom: 1px solid rgba(255,255,255,0.04);
}
.paywall-item:last-child { border-bottom: none; }
.paywall-item-dot {
 width: 5px; height: 5px;
 border-radius: 50%;
 background: var(--gold);
 flex-shrink: 0;
}
.paywall-price-row {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 margin-bottom: 16px;
}
.paywall-price {
 font-family: 'Cinzel', serif;
 font-size: 28px;
 font-weight: 700;
 color: var(--gold-light);
}
.paywall-price-note {
 font-size: 13px;
 color: var(--text-dim);
 line-height: 1.4;
 text-align: left;
}
.paywall-price-note strong {
 color: var(--gold-light);
 font-weight: 700;
}
.paywall-cta {
 width: 100%;
 padding: 15px;
 background: linear-gradient(135deg, #ead07d 0%, #c8a84b 54%, #a98532 100%);
 border: 1px solid rgba(232,201,122,0.72);
 border-radius: 13px;
 color: #080812;
 font-family: 'DM Sans', sans-serif;
 font-size: 13px;
 font-weight: 800;
 letter-spacing: 0.03em;
 line-height: 1.35;
 cursor: pointer;
 transition: all 0.25s;
 margin-bottom: 10px;
 box-shadow: 0 12px 30px rgba(200,168,75,0.14), inset 0 1px 0 rgba(255,255,255,0.34);
}
.paywall-cta:hover {
 filter: brightness(1.04);
 transform: translateY(-2px);
 box-shadow: 0 14px 34px rgba(200,168,75,0.2), inset 0 1px 0 rgba(255,255,255,0.38);
}
.paywall-cta:active { transform: scale(0.98) translateY(0); }
.paywall-guarantee {
 margin-top: 10px;
 padding: 11px 12px;
 border: 1px solid rgba(73,194,125,0.42);
 background: rgba(73,194,125,0.08);
 border-radius: 12px;
 color: #bff3d2;
 font-size: 12px;
 line-height: 1.55;
 letter-spacing: 0;
 text-align: left;
}
.paywall-guarantee strong {
 color: #eafff0;
 font-weight: 800;
}

/* ── Payment modal overlay ── */
.payment-overlay {
 position: fixed;
 inset: 0;
 z-index: 999;
 display: none;
 background: rgba(4,4,12,0.92);
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
 align-items: flex-end;
 justify-content: center;
 padding: 0;
}
.payment-overlay.visible {
 display: flex;
 animation: slideUp 0.35s cubic-bezier(0.4,0,0.2,1);
}
.install-guide-overlay {
 display: none;
 position: fixed;
 inset: 0;
 z-index: 10020;
 background: rgba(3,3,14,0.84);
 align-items: center;
 justify-content: center;
 padding: 18px;
 backdrop-filter: blur(18px);
 -webkit-backdrop-filter: blur(18px);
}
.install-guide-overlay.visible {
 display: flex;
 animation: slideUp 0.28s cubic-bezier(0.4,0,0.2,1);
}
.install-guide-card {
 width: min(100%, 390px);
 max-height: min(82vh, 620px);
 overflow: auto;
 border: 1px solid rgba(200,168,75,0.32);
 border-radius: 18px;
 background:
  radial-gradient(circle at 18% 0%, rgba(200,168,75,0.15), transparent 34%),
  radial-gradient(circle at 90% 15%, rgba(136,120,212,0.16), transparent 38%),
  linear-gradient(180deg, rgba(26,24,48,0.98), rgba(12,12,30,0.98));
 box-shadow: 0 24px 80px rgba(0,0,0,0.52), inset 0 1px 0 rgba(255,255,255,0.06);
 padding: 20px;
}
.install-guide-top {
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 gap: 14px;
 margin-bottom: 14px;
}
.install-guide-kicker {
 font-family: 'Cinzel', serif;
 font-size: 10px;
 letter-spacing: 0.16em;
 color: var(--gold);
 text-transform: uppercase;
 margin-bottom: 8px;
}
.install-guide-title {
 font-family: 'Cormorant Garamond', serif;
 font-size: 24px;
 line-height: 1.08;
 color: var(--gold-light);
}
.install-guide-close {
 width: 34px;
 height: 34px;
 border-radius: 50%;
 border: 1px solid rgba(200,168,75,0.28);
 background: rgba(255,255,255,0.04);
 color: var(--text-dim);
 font-size: 18px;
 cursor: pointer;
 flex: 0 0 auto;
}
.install-guide-copy {
 color: var(--text);
 font-size: 14px;
 line-height: 1.7;
 margin-bottom: 16px;
}
.install-guide-steps {
 display: grid;
 gap: 10px;
 margin: 14px 0 18px;
}
.install-guide-step {
 display: grid;
 grid-template-columns: 28px 1fr;
 gap: 10px;
 align-items: start;
 padding: 12px;
 border: 1px solid rgba(176,188,216,0.16);
 border-radius: 12px;
 background: rgba(255,255,255,0.04);
}
.install-guide-num {
 width: 28px;
 height: 28px;
 border-radius: 50%;
 display: grid;
 place-items: center;
 background: rgba(200,168,75,0.15);
 color: var(--gold-light);
 font-family: 'Cinzel', serif;
 font-size: 12px;
 font-weight: 700;
}
.install-guide-step-text {
 color: var(--silver);
 font-size: 14px;
 line-height: 1.55;
}
.install-guide-note {
 color: var(--text-dim);
 font-size: 12px;
 line-height: 1.55;
 border-top: 1px solid rgba(176,188,216,0.14);
 padding-top: 12px;
}
.install-guide-action {
 width: 100%;
 padding: 13px 16px;
 border: 1px solid rgba(200,168,75,0.42);
 border-radius: 13px;
 background: linear-gradient(135deg, rgba(200,168,75,0.2), rgba(136,120,212,0.16));
 color: var(--gold-light);
 font-family: 'Cinzel', serif;
 font-weight: 700;
 letter-spacing: 0.08em;
 cursor: pointer;
}
@keyframes slideUp {
 from { opacity: 0; transform: translateY(40px); }
 to  { opacity: 1; transform: translateY(0); }
}
.payment-sheet {
 width: 100%;
 max-width: 420px;
 background: linear-gradient(180deg, #0d0d22 0%, #080618 100%);
 border: 1px solid rgba(200,168,75,0.3);
 border-bottom: none;
 border-radius: 24px 24px 0 0;
 padding: 10px 0 40px;
 max-height: 92vh;
 overflow-y: auto;
}
.payment-handle {
 width: 40px; height: 4px;
 background: rgba(255,255,255,0.12);
 border-radius: 2px;
 margin: 10px auto 20px;
}
.payment-close {
 position: absolute;
 top: 16px; right: 20px;
 background: none;
 border: none;
 color: var(--text-dim);
 font-size: 20px;
 cursor: pointer;
 padding: 4px 8px;
}
.payment-back {
 position: absolute;
 top: 16px;
 left: 20px;
 width: 36px;
 height: 36px;
 border-radius: 999px;
 border: 1px solid rgba(200,168,75,0.28);
 background: rgba(255,255,255,0.035);
 color: var(--gold-light);
 font-size: 26px;
 line-height: 1;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 0 0 3px;
}
.payment-back:hover {
 border-color: rgba(200,168,75,0.52);
 background: rgba(200,168,75,0.1);
}
.payment-inner {
 padding: 0 22px;
}
.payment-top {
 text-align: center;
 padding-bottom: 20px;
 border-bottom: 1px solid var(--border-soft);
 margin-bottom: 20px;
}
.payment-top-icon {
 font-size: 36px;
 display: block;
 margin-bottom: 10px;
 animation: float 4s ease-in-out infinite;
}
.payment-title {
 font-family: 'Cinzel', serif;
 font-size: 18px;
 font-weight: 700;
 letter-spacing: 0.15em;
 background: linear-gradient(135deg, var(--gold-light), var(--violet-light));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 margin-bottom: 6px;
}
.payment-sub {
 font-family: 'Cormorant Garamond', serif;
 font-size: 15px;
 font-style: italic;
 color: var(--text-dim);
}
.payment-includes-list {
 margin-bottom: 22px;
}
.payment-includes-item {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 padding: 9px 0;
 border-bottom: 1px solid rgba(255,255,255,0.04);
}
.payment-includes-item:last-child { border-bottom: none; }
.payment-check {
 color: var(--gold);
 font-size: 13px;
 flex-shrink: 0;
 margin-top: 2px;
}
.payment-item-text {
 font-family: 'Cormorant Garamond', serif;
 font-size: 15px;
 color: var(--silver);
 line-height: 1.4;
}
.payment-item-text strong { color: var(--gold-light); font-weight: 500; }
.payment-price-box {
 background: linear-gradient(135deg, rgba(200,168,75,0.08), rgba(136,120,212,0.06));
 border: 1px solid var(--border);
 border-radius: 14px;
 padding: 16px 18px;
 text-align: center;
 margin-bottom: 16px;
}
.payment-price-main {
 font-family: 'Cinzel', serif;
 font-size: 36px;
 font-weight: 700;
 color: var(--gold-light);
 line-height: 1;
 margin-bottom: 4px;
}
.payment-price-desc {
 font-size: 12px;
 color: var(--text-dim);
 letter-spacing: 0.05em;
}
.payment-cta-btn {
 width: 100%;
 padding: 16px;
 background: linear-gradient(135deg, #ead07d 0%, #c8a84b 54%, #a98532 100%);
 border: 1px solid rgba(232,201,122,0.72);
 border-radius: 13px;
 color: #080812;
 font-family: 'DM Sans', sans-serif;
 font-size: 14px;
 font-weight: 800;
 letter-spacing: 0.03em;
 cursor: pointer;
 transition: all 0.25s;
 margin-bottom: 10px;
 box-shadow: 0 14px 34px rgba(200,168,75,0.16), inset 0 1px 0 rgba(255,255,255,0.34);
}
.payment-cta-btn:hover {
 filter: brightness(1.04);
 transform: translateY(-2px);
 box-shadow: 0 16px 38px rgba(200,168,75,0.22), inset 0 1px 0 rgba(255,255,255,0.38);
}
.payment-cta-btn:active { transform: scale(0.98) translateY(0); }
.payment-secure {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 6px;
 font-size: 11px;
 color: var(--text-dim);
 margin-top: 6px;
}

/* ── Unlock success toast ── */
.unlock-toast {
 position: fixed;
 top: 20px; left: 50%;
 transform: translateX(-50%) translateY(-80px);
 z-index: 9999;
 background: linear-gradient(135deg, rgba(13,13,34,0.98), rgba(19,19,46,0.98));
 border: 1px solid rgba(100,200,120,0.4);
 border-radius: 16px;
 padding: 14px 22px;
 display: flex;
 align-items: center;
 gap: 12px;
 min-width: 260px;
 max-width: 340px;
 box-shadow: 0 8px 32px rgba(0,0,0,0.5);
 transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
 pointer-events: none;
}
.unlock-toast.visible {
 transform: translateX(-50%) translateY(0);
}
.unlock-toast-icon { font-size: 22px; flex-shrink: 0; }
.unlock-toast-text {
 font-family: 'Cormorant Garamond', serif;
 font-size: 15px;
 color: #80e89a;
 line-height: 1.4;
}
.unlock-toast-title {
 font-family: 'Cinzel', serif;
 font-size: 11px;
 letter-spacing: 0.12em;
 color: #80e89a;
 margin-bottom: 2px;
}

/* ── Premium-only section label ── */
.premium-section-label {
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: 10px;
 letter-spacing: 0.15em;
 color: var(--gold);
 margin-bottom: 8px;
 text-transform: uppercase;
 font-family: 'Cinzel', serif;
}
.premium-dot {
 width: 5px; height: 5px;
 border-radius: 50%;
 background: var(--gold);
 flex-shrink: 0;
}

/* ── Synthesis tab highlight ── */
.sys-tab.premium-tab {
 border-color: rgba(200,168,75,0.4);
 color: var(--gold);
}
.sys-tab.premium-tab.active {
 border-color: var(--gold);
 color: var(--gold-light);
 background: var(--gold-dim);
}

/* ── Compat locked ── */
.compat-lock-overlay {
 position: relative;
}
.compat-lock-cover {
 position: absolute;
 inset: 0;
 background: linear-gradient(to bottom, transparent 0%, rgba(6,6,18,0.85) 40%, rgba(6,6,18,1) 100%);
 border-radius: 16px;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: flex-end;
 padding: 20px;
 z-index: 5;
}
.compat-lock-cover.hidden {
 display: none;
}
.bottom-pad { height: 32px; }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
/* ── Unified Icon System ── */
.glyph {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 22px;
 height: 22px;
 border-radius: 50%;
 background: var(--gold-dim);
 border: 1px solid rgba(200,168,75,0.35);
 font-family: 'Cinzel', serif;
 font-size: 10px;
 font-weight: 700;
 color: var(--gold);
 letter-spacing: 0;
 flex-shrink: 0;
 vertical-align: middle;
 margin-right: 7px;
}
/* Tab glyph — smaller, no bg */
.tab-icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 18px;
 height: 18px;
 border-radius: 50%;
 background: rgba(200,168,75,0.12);
 border: 1px solid rgba(200,168,75,0.3);
 font-family: 'Cinzel', serif;
 font-size: 9px;
 font-weight: 700;
 color: var(--gold);
 flex-shrink: 0;
 vertical-align: middle;
 margin-right: 5px;
}
.tab-btn.active .tab-icon {
 background: rgba(136,120,212,0.25);
 border-color: var(--violet);
 color: var(--violet-light);
}
/* Sys-tab glyph */
.sys-glyph {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 16px;
 height: 16px;
 border-radius: 50%;
 background: rgba(200,168,75,0.08);
 border: 1px solid rgba(200,168,75,0.2);
 font-family: 'Cinzel', serif;
 font-size: 8px;
 font-weight: 700;
 color: var(--gold-light);
 flex-shrink: 0;
 vertical-align: middle;
 margin-right: 4px;
}
.sys-tab.active .sys-glyph {
 background: rgba(136,120,212,0.2);
 border-color: var(--violet);
 color: var(--violet-light);
}

/* ── Fixed Bottom Navigation ── */
.bottom-nav {
 position: fixed;
 bottom: 0; left: 0; right: 0;
 z-index: 100;
 display: flex;
 justify-content: center;
 padding: 10px 16px 24px;
 background: linear-gradient(to top, var(--bg) 60%, transparent);
 pointer-events: none;
}
.bottom-nav-inner {
 display: flex;
 gap: 8px;
 width: min(100%, 420px);
 background: rgba(13,13,34,0.92);
 border: 1px solid var(--border-soft);
 border-radius: 20px;
 padding: 6px 8px;
 pointer-events: all;
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 box-shadow: 0 4px 32px rgba(0,0,0,0.5);
}
.bottom-nav-btn {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 3px;
 padding: 8px 16px;
 border: none;
 border-radius: 14px;
 background: none;
 color: var(--text-dim);
 font-size: 10px;
 font-family: 'Cinzel', serif;
 letter-spacing: 0.06em;
 cursor: pointer;
 transition: all 0.2s;
 min-width: 64px;
}
.bottom-nav-btn.active {
 background: var(--violet-dim);
 color: var(--violet-light);
}
.bottom-nav-btn .bnav-icon {
 font-size: 18px;
 font-family: 'Cinzel', serif;
 font-weight: 700;
 color: var(--gold);
 line-height: 1;
}
.bottom-nav-btn.active .bnav-icon {
 color: var(--violet-light);
}
@media (max-width: 430px) {
 .bottom-nav {
  padding-left: 8px;
  padding-right: 8px;
 }
 .bottom-nav-inner {
  width: 100%;
  max-width: calc(100vw - 16px);
  justify-content: space-between;
  gap: 4px;
 }
 .bottom-nav-btn {
  min-width: 0;
  flex: 1 1 0;
  padding: 8px 4px;
  font-size: 9.5px;
 }
}
@media (max-width: 380px) {
 .post-birth-next-card {
  padding: 16px 14px 14px;
  border-radius: 14px;
 }
 .post-birth-next-title {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.1em;
 }
 .post-birth-path-btn {
  min-height: 98px;
  padding: 13px;
 }
 .post-birth-path-title {
  font-size: 13.5px;
 }
 .post-birth-path-copy {
  font-size: 12px;
 }
 .post-birth-path-action {
  font-size: 10.5px;
  letter-spacing: 0.04em;
 }
 .tab-btn {
  font-size: 12.5px;
  padding-left: 4px;
  padding-right: 4px;
 }
}
/* Push content above fixed nav */
#app { padding-bottom: 90px; }

/* ── System intro banner ── */
.sys-intro {
 background: linear-gradient(135deg, rgba(136,120,212,0.08), rgba(200,168,75,0.05));
 border: 1px solid var(--border-soft);
 border-radius: 12px;
 padding: 14px 16px;
 margin-bottom: 14px;
 font-size: 12px;
 color: var(--text-dim);
 line-height: 1.6;
 display: none;
}
.sys-intro.visible { display: block; }
.sys-intro-title {
 font-family: 'Cinzel', serif;
 font-size: 10px;
 letter-spacing: 0.14em;
 color: var(--gold);
 margin-bottom: 5px;
}


/* ── ASTROS Funnel additions ── */
.premium-teaser{margin-top:16px;border:1px solid rgba(200,168,75,.35);border-radius:18px;background:linear-gradient(180deg, rgba(18,16,40,.96), rgba(10,10,26,.96));box-shadow:0 12px 32px rgba(0,0,0,.28);overflow:hidden;display:none}
.premium-teaser-inner{padding:18px}
.premium-kicker{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#c8a84b;margin-bottom:10px}
.premium-title{font-size:18px;line-height:1.5;color:#f3e7b3;margin-bottom:12px}
.premium-points{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.premium-point{color:rgba(255,255,255,.86);font-size:14px;line-height:1.6}
.unlock-btn,.ask-btn,.return-btn,.share-btn,.compat-btn,.renew-btn{width:100%;padding:14px;background:linear-gradient(135deg, rgba(200,168,75,0.25), rgba(136,120,212,0.2));border:1px solid var(--gold);border-radius:12px;color:var(--gold-light);font-family:'Cinzel',serif;font-size:12px;font-weight:700;letter-spacing:.12em;cursor:pointer}
.partial-answer .block{margin-bottom:14px}
.partial-answer .label{font-size:11px;letter-spacing:.08em;color:#c8a84b;margin-bottom:4px}
.partial-answer .text{font-size:14px;color:rgba(255,255,255,.9);line-height:1.7}
.partial-answer .hook{margin-top:10px;padding-top:10px;border-top:1px solid rgba(200,168,75,.3)}
.ask-cta,.return-cta,.share-block,.compat-block,#historyBlock,#renewBlock,#successBlock,.synthesis-block{margin-top:16px;padding:16px;border:1px solid rgba(200,168,75,.25);border-radius:16px;background:rgba(20,18,45,.7)}
.ask-text,.return-text,.compat-text,.history-title,.renew-text,.success-title,.synthesis-title{font-size:15px;color:#f3e7b3;margin-bottom:6px}
.ask-sub,.return-sub,.share-text,.success-text,.synthesis-sub{font-size:13px;color:rgba(255,255,255,.72);margin-bottom:12px;line-height:1.6}
.ask-cta.highlight{box-shadow:0 0 0 1px rgba(200,168,75,.6)}
.history-item{margin-top:8px;padding:10px;border:1px solid rgba(200,168,75,.2);border-radius:10px}
.history-q{font-size:13px;color:rgba(255,255,255,.85);cursor:pointer}
.urgency{margin-top:10px;font-size:12px;color:#ff8b8b;line-height:1.5}
.paywall-note{font-size:12px;color:var(--text-dim);line-height:1.6;margin-top:10px}
.form-input.input-error,.form-select.input-error{border-color:rgba(224,128,128,0.85)!important;background:rgba(224,128,128,0.06)!important}
.inline-error{color:#e08080;font-size:11px;line-height:1.4;margin-top:5px}
@keyframes shake{
 0%,100%{transform:translateX(0)}
 25%{transform:translateX(-4px)}
 75%{transform:translateX(4px)}
}



/* ── Social login auth block ── */
.auth-entry-card {
 margin-bottom: 14px;
 background: linear-gradient(135deg, rgba(18,16,42,0.96), rgba(11,11,28,0.96));
 border: 1px solid rgba(136,120,212,0.22);
}
.auth-entry-top {
 display:flex;
 align-items:flex-start;
 justify-content:space-between;
 gap:10px;
 margin-bottom:12px;
}
.auth-entry-title {
 font-family:'Cinzel',serif;
 font-size:12px;
 letter-spacing:0.14em;
 color:var(--violet-light);
 text-transform:uppercase;
 margin-bottom:5px;
}
.auth-entry-sub {
 font-size:13px;
 color:var(--silver);
 line-height:1.6;
}
.auth-chip {
 display:inline-flex;
 align-items:center;
 gap:6px;
 padding:5px 9px;
 border-radius:999px;
 background:rgba(136,120,212,0.12);
 border:1px solid rgba(136,120,212,0.25);
 color:var(--violet-light);
 font-size:10px;
 letter-spacing:0.08em;
 white-space:nowrap;
}
.auth-google-btn, .auth-facebook-btn, .auth-secondary-btn {
 width:100%;
 display:flex;
 align-items:center;
 justify-content:center;
 gap:10px;
 padding:13px 14px;
 border-radius:12px;
 cursor:pointer;
 transition:all 0.2s;
 font-family:'DM Sans', sans-serif;
 font-size:14px;
 font-weight:600;
}
.auth-google-btn {
 background:rgba(255,255,255,0.96);
 color:#171717;
 border:1px solid rgba(255,255,255,0.9);
}
.auth-google-btn:hover, .auth-facebook-btn:hover { transform: translateY(-1px); }
.auth-facebook-btn {
 margin-top:10px;
 background:#1877F2;
 color:#fff;
 border:1px solid rgba(24,119,242,0.95);
}
.auth-facebook-f {
 width:20px; height:20px; border-radius:50%;
 display:inline-flex; align-items:center; justify-content:center;
 background:rgba(255,255,255,0.15); color:#fff; font-weight:700; font-size:15px;
 box-shadow:0 0 0 1px rgba(255,255,255,0.18) inset;
 }
.auth-google-g {
 width:20px; height:20px; border-radius:50%;
 display:inline-flex; align-items:center; justify-content:center;
 background:#fff; color:#4285F4; font-weight:700; font-size:14px;
 box-shadow:0 0 0 1px rgba(0,0,0,0.06) inset;
}
.auth-secondary-btn {
 margin-top:10px;
 background:rgba(255,255,255,0.03);
 border:1px solid var(--border-soft);
 color:var(--text-dim);
}
.auth-helper-row {
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:10px;
 margin-top:10px;
 flex-wrap:wrap;
}
.auth-helper-text {
 font-size:12px;
 color:var(--text-dim);
 line-height:1.6;
}
.auth-plan {
 margin-top:12px;
 padding:12px;
 border-radius:12px;
 background:rgba(255,255,255,0.03);
 border:1px solid var(--border-soft);
}
.auth-plan-step {
 display:flex;
 gap:10px;
 align-items:flex-start;
 padding:7px 0;
 border-bottom:1px solid rgba(255,255,255,0.04);
}
.auth-plan-step:last-child { border-bottom:none; }
.auth-plan-num {
 width:22px; height:22px; border-radius:50%;
 display:inline-flex; align-items:center; justify-content:center;
 background:rgba(200,168,75,0.12);
 border:1px solid rgba(200,168,75,0.25);
 color:var(--gold-light);
 font-size:11px; font-family:'Cinzel',serif; flex-shrink:0;
}
.auth-plan-copy { font-size:12px; color:var(--silver); line-height:1.55; }
.auth-user-card {
 display:none;
 margin-top:12px;
 padding:14px;
 border-radius:12px;
 background:rgba(255,255,255,0.03);
 border:1px solid rgba(100,200,120,0.22);
}
.auth-user-top {
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:12px;
}
.auth-user-meta {
 display:flex;
 align-items:center;
 gap:12px;
 min-width:0;
}
.auth-user-avatar {
 width:42px; height:42px; border-radius:50%;
 object-fit:cover; background:rgba(255,255,255,0.08); border:1px solid var(--border-soft);
}
.auth-user-name {
 font-size:14px;
 color:var(--text);
 font-weight:600;
 white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.auth-user-email {
 font-size:12px;
 color:var(--text-dim);
 white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.auth-signout-btn {
 background:none;
 border:1px solid var(--border-soft);
 color:var(--text-dim);
 border-radius:10px;
 padding:9px 11px;
 font-size:11px;
 cursor:pointer;
 letter-spacing:0.06em;
}
.auth-status-line {
 margin-top:10px;
 font-size:12px;
 color:var(--text-dim);
 line-height:1.6;
}
.auth-callback-banner {
 display:none;
 margin:0 16px 14px;
 padding:12px 14px;
 border-radius:12px;
 background:linear-gradient(135deg, rgba(136,120,212,0.14), rgba(200,168,75,0.08));
 border:1px solid rgba(136,120,212,0.22);
 color:var(--silver);
 font-size:12px;
 line-height:1.6;
}
.auth-callback-banner strong { color: var(--gold-light); }
.auth-dev-note {
 margin-top:10px;
 font-size:11px;
 color:var(--text-dim);
 line-height:1.6;
}
.auth-dev-note code { color: var(--gold-light); }

/* ── Readability pass for 40+ users ── */
.form-input,
.form-select,
input,
select,
textarea {
 font-size: 16px !important;
 line-height: 1.45 !important;
}
.screen,
.quiz-card,
.payment-sheet,
.paywall-block,
.partial-answer .text,
#qna-result,
#birth-result,
#compat-result,
#daily-detail,
#child-reading-result {
 line-height: 1.68;
}
.paywall-sub,
.paywall-note,
.paywall-guarantee,
.payment-sub,
.payment-item-text,
.payment-price-desc,
.premium-point,
.ask-sub,
.return-sub,
.success-text,
.synthesis-sub,
.history-q,
.sys-intro,
.quiz-helper,
.quiz-final-copy,
.landing-choice-copy,
.landing-restore-note {
 font-size: 14px !important;
 line-height: 1.68 !important;
 color: var(--text-dim) !important;
}
.paywall-item,
.payment-includes-item,
.quiz-option,
.trait-text,
.info-text,
.form-label {
 font-size: 14px !important;
 line-height: 1.55 !important;
}
body.readable-mode {
 --silver: #edf2ff;
 --text: #fffaf2;
 --text-dim: rgba(255,250,242,0.94);
 font-size: 18px;
}
body.readable-mode #app {
 max-width: 460px;
}
body.readable-mode .screen,
body.readable-mode .quiz-card,
body.readable-mode .payment-sheet,
body.readable-mode .paywall-block,
body.readable-mode #qna-result,
body.readable-mode #birth-result,
body.readable-mode #compat-result,
body.readable-mode #daily-detail,
body.readable-mode #child-reading-result {
 line-height: 1.82;
}
body.readable-mode .logo-sub,
body.readable-mode .quiz-kicker,
body.readable-mode .premium-kicker,
body.readable-mode .sys-intro-title,
body.readable-mode .payment-list-label,
body.readable-mode [style*="font-size:9px"],
body.readable-mode [style*="font-size:10px"],
body.readable-mode [style*="font-size:11px"],
body.readable-mode [style*="font-size:12px"] {
 font-size: 14px !important;
 line-height: 1.6 !important;
 letter-spacing: 0.04em !important;
}
body.readable-mode .paywall-sub,
body.readable-mode .paywall-note,
body.readable-mode .paywall-guarantee,
body.readable-mode .payment-sub,
body.readable-mode .payment-item-text,
body.readable-mode .payment-price-desc,
body.readable-mode .premium-point,
body.readable-mode .ask-sub,
body.readable-mode .return-sub,
body.readable-mode .success-text,
body.readable-mode .synthesis-sub,
body.readable-mode .history-q,
body.readable-mode .sys-intro,
body.readable-mode .quiz-helper,
body.readable-mode .quiz-final-copy,
body.readable-mode .landing-choice-copy,
body.readable-mode .landing-restore-note,
body.readable-mode .partial-answer .text {
 font-size: 17px !important;
 line-height: 1.82 !important;
 color: var(--text-dim) !important;
}
body.readable-mode .paywall-item,
body.readable-mode .payment-includes-item,
body.readable-mode .quiz-option,
body.readable-mode .trait-text,
body.readable-mode .form-label,
body.readable-mode .form-input,
body.readable-mode .form-select,
body.readable-mode input,
body.readable-mode select,
body.readable-mode textarea {
 font-size: 17px !important;
 line-height: 1.62 !important;
}
body.readable-mode .btn-primary,
body.readable-mode .unlock-btn,
body.readable-mode .paywall-cta,
body.readable-mode .payment-cta-btn,
body.readable-mode .tab-btn,
body.readable-mode .bottom-nav-btn {
 font-size: 14px !important;
 letter-spacing: 0.04em !important;
}
body.readable-mode .bottom-nav-inner {
 max-width: 460px;
}