@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
:root{
  --bg:#0b1220; --bg-2:#0d1a35; --fg:#e8ecf5; --muted:#a9b3c9;
  --accent:#7aa2ff; --accent-2:#9ed0ff; --card:rgba(18,25,50,.66);
  --border:rgba(138,153,191,.18); --ok:#3ddc97; --warn:#ffb84d; --danger:#ff6b6b;
  --shadow:0 20px 50px rgba(0,0,0,.45); --radius:18px;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--fg);
  background: radial-gradient(1200px 800px at 85% -10%, rgba(75,125,255,.25), transparent 60%),
              radial-gradient(900px 700px at -10% 110%, rgba(0,210,255,.18), transparent 60%),
              linear-gradient(180deg, var(--bg), var(--bg-2)); background-attachment:fixed; line-height:1.65}
.container{max-width:980px;margin:0 auto;padding:clamp(16px,2.5vw,32px)}
.card{background:var(--card);backdrop-filter:blur(10px) saturate(110%);-webkit-backdrop-filter:blur(10px) saturate(110%);
  border:1px solid var(--border);border-radius:var(--radius);padding:clamp(20px,3vw,32px);box-shadow:var(--shadow)}
h1{margin:0 0 10px 0;font-size:clamp(26px,3.2vw,36px);font-weight:700}
h3{font-size:clamp(16px,1.9vw,20px);font-weight:600;color:var(--accent-2);margin-top:22px}
.btn{--btn-bg:var(--accent);--btn-fg:#0c1530;display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border:0;border-radius:12px;
  background:linear-gradient(180deg,var(--btn-bg),color-mix(in oklab,var(--btn-bg) 80%, #0b1220));color:var(--btn-fg);font-weight:700;text-decoration:none;cursor:pointer}
.btn.secondary{--btn-bg:#2a3b73;color:var(--fg)}
.input,select,textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.02);color:var(--fg)}
label{display:block;margin:14px 0 6px;color:var(--muted);font-weight:600}
hr{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--border),transparent);margin:22px 0}
.qrow{display:flex;align-items:center;justify-content:space-between;padding:12px 10px;border:1px dashed var(--border);border-radius:12px;margin:10px 0;background:rgba(255,255,255,.02)}
.qtext{flex:1;padding-right:12px}
.footer{margin-top:12px;font-size:13px;color:var(--muted)}
.success{color:var(--ok);font-weight:600}.warning{color:var(--warn);font-weight:600}.error{color:var(--danger);font-weight:600}

/* Emoji gender selection */
.gender-wrap{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.gender-pill{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--border);border-radius:14px;cursor:pointer;background:rgba(255,255,255,.02);user-select:none}
.gender-pill input{appearance:none}
.gender-pill .emoji{font-size:20px}
.gender-pill:has(input:checked){border-color:color-mix(in oklab,var(--accent) 55%, #fff 0%);background:color-mix(in oklab,var(--accent) 18%, var(--card))}

/* Thumbs up/down buttons */
.qans{display:flex;gap:10px;align-items:center}
.thumb{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:999px;padding:8px 12px;background:rgba(255,255,255,.02);cursor:pointer;user-select:none}
.thumb input{appearance:none}
.thumb .icon{font-size:18px;display:inline-block}
.thumb .txt{opacity:.9}
.thumb:has(input:checked){border-color:color-mix(in oklab,var(--accent) 55%, #fff 0%);background:color-mix(in oklab,var(--accent) 22%, var(--card))}