:root {
    --love-950: #351c2d;
    --love-900: #4b263d;
    --love-800: #603049;
    --love-700: #74364f;
    --love-600: #9c4964;
    --love-500: #c4677c;
    --love-400: #db8c9d;
    --love-300: #ebb7c1;
    --love-200: #f4d6dc;
    --love-100: #faecef;
    --cream: #fffaf7;
    --paper: #fffefd;
    --ink: #382d34;
    --muted: #786a71;
    --border: rgba(105, 65, 85, .12);
    --shadow: 0 24px 70px rgba(74, 38, 60, .12);
    --shadow-sm: 0 12px 30px rgba(74, 38, 60, .08);
    --radius-xl: 30px;
    --radius-lg: 22px;
    --radius-md: 16px;
    --pa: #b75875;
    --tq: #6b72b9;
    --pr: #d19a43;
    --as: #4d9689;
    --tf: #a2629b;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 8% 12%, rgba(235,183,193,.38), transparent 28%),
        radial-gradient(circle at 92% 14%, rgba(210,194,222,.35), transparent 29%),
        linear-gradient(180deg, #fffaf8 0%, #fffdfb 54%, #fbf6f7 100%);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow-x: hidden;
}

.page-orb {
    position: fixed;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .18;
    pointer-events: none;
    z-index: -1;
}
.orb-one { background: var(--love-500); top: 8%; left: -100px; }
.orb-two { background: #7f69b0; bottom: 4%; right: -100px; }

.app-shell { max-width: 850px; }
.app-topbar { position: relative; z-index: 10; }
.brand-lockup { display: inline-flex; align-items: center; gap: 11px; color: var(--love-900); }
.brand-lockup:hover { color: var(--love-900); }
.brand-mark {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--love-700), var(--love-500));
    box-shadow: 0 10px 24px rgba(156,73,100,.23);
}
.brand-lockup strong { display:block; line-height:1; letter-spacing:-.02em; }
.brand-lockup small { display:block; margin-top:3px; color:var(--muted); font-size:.73rem; letter-spacing:.08em; text-transform:uppercase; }

.hero-copy { padding: 28px 0 12px; }
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    border: 1px solid var(--border);
    color: var(--love-700);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.hero-title {
    max-width: 760px;
    margin: 16px auto 10px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(2.1rem, 7vw, 4.1rem);
    line-height: .98;
    letter-spacing: -.045em;
    color: var(--love-950);
}
.hero-title em { color: var(--love-600); font-style: italic; font-weight: 400; }
.hero-subtitle { max-width: 620px; margin: 0 auto; color: var(--muted); font-size: 1.02rem; line-height: 1.75; }

.app-card {
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(111,51,79,.10);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
}
.app-card-soft {
    background: rgba(255,255,255,.68);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.btn-love {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--love-700);
    --bs-btn-border-color: var(--love-700);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--love-800);
    --bs-btn-hover-border-color: var(--love-800);
    --bs-btn-active-bg: var(--love-900);
    --bs-btn-active-border-color: var(--love-900);
    font-weight: 700;
    border-radius: 14px;
    min-height: 52px;
    box-shadow: 0 10px 28px rgba(116,54,79,.20);
}
.btn-soft {
    color: var(--love-700);
    background: rgba(255,255,255,.70);
    border: 1px solid var(--border);
    font-weight: 650;
}
.btn-soft:hover { color: var(--love-800); background:#fff; border-color:rgba(111,51,79,.2); }

.form-control, .form-select {
    min-height: 52px;
    border-radius: 14px;
    border-color: rgba(77,52,65,.14);
    background-color: rgba(255,255,255,.92);
    padding: .75rem 1rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--love-400);
    box-shadow: 0 0 0 .25rem rgba(196,103,124,.13);
}
.form-label { font-size:.86rem; font-weight:700; color:var(--love-900); }

.divider-word { display:flex; align-items:center; gap:14px; color:#a08f97; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.divider-word::before, .divider-word::after { content:''; flex:1; height:1px; background:var(--border); }

.code-badge {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 13px;
    border-radius:999px;
    border:1px dashed rgba(111,51,79,.24);
    background:var(--love-100);
    color:var(--love-800);
    font-weight:800;
    letter-spacing:.08em;
}

.participant-card {
    position: relative;
    width: 100%;
    text-align: left;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.86);
    border-radius: 22px;
    padding: 22px;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.participant-card:hover { transform: translateY(-2px); border-color:rgba(111,51,79,.22); box-shadow:var(--shadow-sm); }
.participant-icon {
    width: 48px;
    height: 48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    background:var(--love-100);
    color:var(--love-700);
    font-size:1.25rem;
}

.language-choice {
    position: relative;
    display: block;
    cursor: pointer;
}
.language-choice input { position:absolute; opacity:0; pointer-events:none; }
.language-choice .language-choice-box {
    display:flex;
    gap:15px;
    align-items:flex-start;
    padding:18px;
    border:1px solid var(--border);
    border-radius:18px;
    background:#fff;
    transition:all .18s ease;
}
.language-choice input:checked + .language-choice-box {
    border-color: var(--love-500);
    box-shadow: 0 0 0 3px rgba(196,103,124,.11);
    transform: translateY(-1px);
}
.language-choice-icon {
    flex:0 0 auto;
    width:44px;
    height:44px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
}

.lang-pa .language-choice-icon, .lang-pa .result-icon { background:var(--pa); }
.lang-tq .language-choice-icon, .lang-tq .result-icon { background:var(--tq); }
.lang-pr .language-choice-icon, .lang-pr .result-icon { background:var(--pr); }
.lang-as .language-choice-icon, .lang-as .result-icon { background:var(--as); }
.lang-tf .language-choice-icon, .lang-tf .result-icon { background:var(--tf); }

.progress-love { height: 8px; border-radius:999px; background:#f0e7eb; overflow:hidden; }
.progress-love .progress-bar { background:linear-gradient(90deg,var(--love-600),var(--love-400)); border-radius:999px; transition:width .35s ease; }
.question-kicker { font-weight:800; color:var(--love-600); font-size:.8rem; letter-spacing:.07em; text-transform:uppercase; }
.question-title { font-family:Georgia,'Times New Roman',serif; color:var(--love-950); font-size:clamp(1.55rem,5vw,2.1rem); line-height:1.18; }
.option-btn {
    width:100%;
    text-align:left;
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:18px 19px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.94);
    border-radius:19px;
    transition:all .18s ease;
    color:var(--ink);
}
.option-btn:hover { border-color:rgba(111,51,79,.24); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.option-btn.selected { border-color:var(--love-500); background:var(--love-100); box-shadow:0 0 0 3px rgba(196,103,124,.10); }
.option-letter {
    flex:0 0 auto;
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    background:#f5eff2;
    color:var(--love-800);
    font-weight:800;
}
.option-btn.selected .option-letter { color:#fff; background:var(--love-700); }

.result-hero {
    background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(250,236,239,.82));
    border:1px solid var(--border);
    border-radius:28px;
    overflow:hidden;
}
.result-icon {
    width:62px;
    height:62px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#b93c3c;
    font-size:1.5rem;
    box-shadow:0 12px 28px rgba(50,30,40,.12);
}
.result-row { padding:13px 0; border-bottom:1px solid rgba(111,51,79,.08); }
.result-row:last-child { border-bottom:0; }
.result-track { height:9px; border-radius:999px; background:#f0eaed; overflow:hidden; }
.result-fill { height:100%; border-radius:999px; }
.result-fill.lang-pa { background:var(--pa); }
.result-fill.lang-tq { background:var(--tq); }
.result-fill.lang-pr { background:var(--pr); }
.result-fill.lang-as { background:var(--as); }
.result-fill.lang-tf { background:var(--tf); }

.couple-column { height:100%; padding:21px; background:rgba(255,255,255,.72); border:1px solid var(--border); border-radius:22px; }
.mini-language { display:flex; align-items:center; gap:11px; padding:10px 0; border-bottom:1px solid rgba(111,51,79,.07); }
.mini-language:last-child { border-bottom:0; }
.mini-dot { width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
.mini-dot.lang-pa { background:var(--pa); }
.mini-dot.lang-tq { background:var(--tq); }
.mini-dot.lang-pr { background:var(--pr); }
.mini-dot.lang-as { background:var(--as); }
.mini-dot.lang-tf { background:var(--tf); }

.guess-card { border-left:4px solid var(--love-400); background:rgba(250,236,239,.55); border-radius:16px; padding:16px 18px; }
.conversation-card { counter-increment: conversation; position:relative; padding:20px 20px 20px 64px; border-radius:20px; background:#fff; border:1px solid var(--border); }
.conversation-card::before { content:counter(conversation); position:absolute; left:18px; top:18px; width:31px; height:31px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:var(--love-100); color:var(--love-700); font-weight:800; }
.conversation-list { counter-reset:conversation; }

.waiting-pulse { width:88px; height:88px; margin:0 auto; position:relative; }
.waiting-pulse::before, .waiting-pulse::after { content:''; position:absolute; inset:0; border-radius:50%; background:rgba(196,103,124,.13); animation:pulseLove 2s infinite ease-out; }
.waiting-pulse::after { animation-delay:.8s; }
.waiting-heart { position:absolute; inset:17px; z-index:2; display:flex; align-items:center; justify-content:center; border-radius:50%; background:linear-gradient(135deg,var(--love-700),var(--love-500)); color:#fff; font-size:1.45rem; box-shadow:0 10px 30px rgba(156,73,100,.22); }
@keyframes pulseLove { 0%{transform:scale(.72);opacity:1} 100%{transform:scale(1.55);opacity:0} }

.app-footer { color:#927e88; }
.footer-heart { color:var(--love-400); }
.loading-overlay { position:fixed; inset:0; background:rgba(255,250,248,.74); backdrop-filter:blur(5px); z-index:2000; display:none; align-items:center; justify-content:center; }
.loading-overlay.show { display:flex; }
.loading-card { padding:18px 22px; border-radius:18px; background:#fff; box-shadow:var(--shadow); color:var(--love-800); font-weight:700; }

.toast { background:#fff; color:var(--ink); border-radius:16px; }
.toast.toast-error .toast-icon { color:#b33e53; }
.toast.toast-success .toast-icon { color:#3e8d77; }

.qr-frame { width:min(410px,82vw); margin:0 auto; padding:20px; background:white; border-radius:30px; box-shadow:var(--shadow); }
.qr-frame img { width:100%; height:auto; display:block; border-radius:18px; }

@media (max-width: 575.98px) {
    .app-shell { padding-left:18px; padding-right:18px; }
    .hero-copy { padding-top:16px; }
    .app-card { border-radius:24px; }
    .participant-card { padding:18px; }
    .question-title { font-size:1.55rem; }
    .option-btn { padding:16px; }
}