:root{--bg:#e4e9f3;--hi:#fff;--lo:#c3cad9;--ink:#1f2540;--dim:#5d6684;--accent:#2b3cff}
*{box-sizing:border-box;margin:0}[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font:500 15px/1.5 'Plus Jakarta Sans',system-ui,sans-serif;min-height:100vh}
.wrap{max-width:560px;margin:0 auto;padding:22px 20px 60px}
.logo{font-weight:800;font-size:1.3rem;color:var(--ink);text-decoration:none}.logo span{color:var(--accent)}
h1{font-size:clamp(1.7rem,6vw,2.3rem);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:26px 0 8px}
.sub{color:var(--dim);margin-bottom:8px}
label,.lab{display:block;font-weight:600;font-size:.85rem;color:var(--dim);margin:18px 0 9px}
input,textarea{width:100%;border:0;outline:0;background:var(--bg);color:var(--ink);font:inherit;padding:14px 16px;border-radius:14px;box-shadow:inset 5px 5px 10px var(--lo),inset -5px -5px 10px var(--hi)}
textarea{resize:vertical;min-height:140px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.seg{display:flex;gap:10px;padding:8px;border-radius:18px;box-shadow:inset 5px 5px 10px var(--lo),inset -5px -5px 10px var(--hi)}
.seg button{flex:1;border:0;background:none;padding:11px 6px;border-radius:12px;font:inherit;font-weight:600;color:var(--dim);cursor:pointer}
.seg button[aria-pressed=true]{background:var(--bg);color:var(--accent);box-shadow:5px 5px 10px var(--lo),-5px -5px 10px var(--hi)}
.swatches{display:flex;gap:18px;padding:4px}
.sw{width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;box-shadow:5px 5px 10px var(--lo),-5px -5px 10px var(--hi)}
.sw[aria-pressed=true]{box-shadow:0 0 0 4px var(--bg),0 0 0 6px var(--accent)}
.btn{display:inline-block;text-align:center;text-decoration:none;border:0;border-radius:14px;padding:14px 20px;font:inherit;font-weight:700;color:var(--ink);background:var(--bg);cursor:pointer;box-shadow:6px 6px 12px var(--lo),-6px -6px 12px var(--hi)}
.btn:active{box-shadow:inset 4px 4px 8px var(--lo),inset -4px -4px 8px var(--hi)}
.btn.pri{background:var(--accent);color:#fff}
.acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}.acts .btn{flex:1;min-width:130px}
#err{color:#c4243a;min-height:1.4em;margin-top:12px;font-weight:600}
.count{float:right;font-weight:500}
.res{margin-top:30px;padding:22px;border-radius:24px;box-shadow:8px 8px 18px var(--lo),-8px -8px 18px var(--hi)}
.res h2{font-size:1.2rem;margin-bottom:12px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
#anims button{font-size:.85rem;padding:11px 2px}
select{width:100%;border:0;outline:0;background:var(--bg);color:var(--ink);font:inherit;padding:14px 16px;border-radius:14px;box-shadow:inset 5px 5px 10px var(--lo),inset -5px -5px 10px var(--hi)}
.perks{list-style:none;padding:0;margin:18px 0}.perks li{padding:6px 0}.perks small{color:var(--dim)}
#price{font-size:1.4rem;font-weight:800;margin:18px 0 4px}
.txt{background:none;border:0;color:var(--accent);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;padding:0;margin-top:14px}

/* Lumora red — used for love-themed pages only */
:root{--rose:#e11d48}
.wrap h1{position:relative}
#anims button[data-a="couple"]{position:relative}
.pulse{display:inline-block;animation:pulse 1.15s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.btn.pri{background:linear-gradient(135deg,#2b3cff,var(--rose));box-shadow:6px 6px 14px var(--lo),-6px -6px 14px var(--hi),0 0 0 rgba(225,29,72,0)}
.btn.pri:active{box-shadow:inset 4px 4px 8px var(--lo),inset -4px -4px 8px var(--hi)}
@media(prefers-reduced-motion:reduce){.pulse{animation:none}}