:root { --couple-ink: #44213f; --couple-accent: #9b245f; }
button, input, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #0284c7; outline-offset: 4px; }
#home-modes { gap: 14px !important; }
#home-modes > button { transition: transform 160ms ease, box-shadow 160ms ease; }
#home-modes > button:active { transform: scale(.985); }
.couple-home-card { background: linear-gradient(125deg, #a52261, #702b78); color: white; border: 0; border-radius: 22px; padding: 23px 20px; display: flex; justify-content: space-between; align-items: center; text-align: left; box-shadow: 0 8px 22px #702b7826; font: inherit; cursor: pointer; width: 100%; }
.couple-home-card strong { display: block; font-size: 21px; margin: 5px 0; }
.couple-home-card small { display: block; font-size: 13px; line-height: 1.7; }
.couple-home-icon { font-size: 37px; flex-shrink: 0; margin-left: 12px; }
.couple-tag { font: 700 10px var(--font-english); letter-spacing: 1.5px; text-transform: uppercase; }
#screen-couple { padding: 20px 20px calc(32px + var(--sa-bottom)); background: linear-gradient(160deg, #fff9f3, #f9edf7 65%, #edf4ff); color: var(--couple-ink); }
#screen-couple [hidden] { display: none !important; }
.couple-top { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.couple-top h1 { font-size: 22px; }
.couple-top button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid #ddc6da; background: #fff; font-size: 24px; color: var(--couple-ink); }
.couple-hero { background: #fff; border: 1px solid #ead8e5; border-radius: 26px; padding: 20px; margin-bottom: 10px; }
.couple-hero h2 { font-size: clamp(23px, 6vw, 30px); line-height: 1.4; margin: 8px 0; }
.couple-hero p, #couple-content p { line-height: 1.8; font-size: 15px; }
.couple-art { font-size: 48px; letter-spacing: -12px; padding-right: 12px; }
.couple-age-label { display: flex; gap: 12px; align-items: center; padding: 14px 0; font-size: 14px; line-height: 1.7; cursor: pointer; }
#couple-age { width: 24px; height: 24px; accent-color: var(--couple-accent); flex-shrink: 0; }
.couple-primary, .couple-option { width: 100%; min-height: 52px; padding: 14px 18px; font: 600 16px var(--font-bangla); border-radius: 16px; cursor: pointer; transition: transform 140ms ease, background 140ms ease; }
.couple-primary { color: white; background: var(--couple-accent); border: 1px solid var(--couple-accent); margin: 10px 0; }
.couple-option { background: white; color: var(--couple-ink); border: 1px solid #d9bed2; margin-top: 12px; text-align: left; }
.couple-option:active, .couple-primary:active { transform: scale(.985); }
#screen-couple button:disabled { opacity: .65; cursor: wait; }
.couple-join-box { border-top: 1px solid #ddc6da; padding-top: 20px; margin-top: 14px; }
.couple-join-box label { display: block; margin-bottom: 10px; }
.couple-topics { border: 1px solid #ddc6da; border-radius: 18px; padding: 14px; margin: 12px 0; }
.couple-topics legend { font-weight: 700; padding: 0 6px; }
.couple-topics p { font-size: 12px; line-height: 1.8; margin: 5px 0; }
.couple-tabs { display: flex; background: #eadce7; border-radius: 14px; padding: 4px; gap: 4px; }
.couple-tabs button { flex: 1; min-height: 46px; border: 0; border-radius: 11px; background: transparent; color: var(--couple-ink); font: 600 14px var(--font-bangla); cursor: pointer; }
.couple-tabs button[aria-selected="true"] { background: white; box-shadow: 0 2px 6px #44213f15; }
#couple-topic-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
#couple-topic-options label { display: flex; align-items: center; gap: 8px; font-size: 13px; min-height: 48px; cursor: pointer; }
#couple-topic-options input { accent-color: var(--couple-accent); width: 20px; height: 20px; flex-shrink: 0; }
#couple-code-input { width: 100%; min-width: 0; height: 54px; border: 1px solid #cbaec4; border-radius: 14px; padding: 12px 16px; text-transform: uppercase; font: 700 21px var(--font-english); letter-spacing: 3px; background: white; }
#couple-status { min-height: 44px; padding: 12px 0; font-size: 13px; line-height: 1.7; }
.couple-room-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
#couple-room-code { font: 700 22px var(--font-english); letter-spacing: 3px; user-select: all; }
.couple-text-button { background: transparent; border: 0; color: var(--couple-accent); min-height: 48px; padding: 12px; font: 600 14px var(--font-bangla); cursor: pointer; }
#couple-people { overflow-wrap: anywhere; line-height: 1.7; margin: 12px 0; }
#couple-progress { width: 100%; height: 8px; accent-color: var(--couple-accent); margin: 10px 0 20px; }
#couple-content { border-radius: 24px; background: #fff; border: 1px solid #ead8e5; padding: 22px; }
#couple-content h2 { font-size: 22px; line-height: 1.7; margin: 8px 0 18px; }
.couple-eyebrow { font-size: 12px !important; color: #71455f; }
.couple-reveal { background: #fff2d8; border-radius: 16px; padding: 16px; animation: couple-pop 240ms ease-out; }
.couple-answer { padding: 12px 0; border-bottom: 1px solid #eedfe9; overflow-wrap: anywhere; }
.couple-score { font-size: 36px; font-weight: 800; color: var(--couple-accent); margin: 12px 0; }
.couple-recap { padding-left: 22px; margin: 18px 0; line-height: 1.9; font-size: 14px; }
@keyframes couple-pop { from { transform: translateY(6px) scale(.98); } to { transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .couple-reveal { animation: none; } #home-modes > button, .couple-primary, .couple-option { transition: none; } }
@media (max-width: 350px) { #screen-couple { padding-left: 12px; padding-right: 12px; } .couple-hero, #couple-content { padding: 17px; } }