/* ---------- Root & Theme ---------- */
:root{
  --bg-0: #0b0f17;
  --bg-1: #0f1522;
  --fg-0: #eaf2ff;
  --fg-dim: #9bb0d4;
  --line: 216 32% 22%;
  --brand: 265 84% 62%;
  --brand-2: 199 92% 57%;
  --ok: 158 72% 46%;
  --warn: 46 100% 52%;
  --accent: 332 86% 62%;
  --shadow: 0 0% 0% / .35;
  --radius-2xl: 22px;
  --radius-xl: 16px;
  --glass: 16px;
}

/* Global reset-lite */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--fg-0);
  background: radial-gradient(1200px 800px at 10% 0%, #14203a 0%, transparent 60%),
              radial-gradient(900px 700px at 100% 80%, #1a1030 0%, transparent 60%),
              linear-gradient(180deg, var(--bg-0), var(--bg-1) 60%, #0a0d14);
  overflow-x:hidden;
}

/* Orbital backdrop accent */
.bg-orbit{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1200px 1200px at 30% -10%, hsl(var(--brand)/.16), transparent 70%),
    radial-gradient(900px 900px at 120% 110%, hsl(var(--brand-2)/.15), transparent 70%);
  filter: blur(36px);
}

/* Layout shell */
.shell{
  position:relative; z-index:1;
  max-width: 980px;
  margin: clamp(24px, 4vh, 48px) auto;
  padding: clamp(12px, 1.5vw, 24px);
}

.titlebar{
  text-align:center;
  margin-bottom: 16px;
}
.titlebar h1{
  font-weight:800;
  letter-spacing: .6px;
  font-size: clamp(1.6rem, 2.4vw + .5rem, 3rem);
  margin: 0 0 .25rem;
  background: linear-gradient(90deg, hsl(var(--brand)), hsl(var(--brand-2)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.subtitle{
  margin:0;
  color:var(--fg-dim);
  font-size: .98rem;
}

/* Glass card */
.card{
  backdrop-filter: blur(var(--glass));
  -webkit-backdrop-filter: blur(var(--glass));
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid hsl(var(--line) / .5);
  border-radius: var(--radius-2xl);
  padding: clamp(18px, 2.2vw, 28px);
  box-shadow: 0 10px 40px hsla(220, 50%, 2%, .6), 0 2px 8px hsla(220, 50%, 2%, .4) inset;
}

/* Fieldset: Who */
fieldset{
  margin:0; padding:0; border:0;
}
legend{
  font-weight:700;
  color:var(--fg-0);
  margin-bottom: .75rem;
  letter-spacing: .4px;
}

.who{
  display:grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
@media (max-width:560px){
  .who{ grid-template-columns: 1fr; }
}

/* Fancy radio chips (pure CSS) */
.radio-chip{
  position:relative; display:block;
}
.radio-chip input{
  position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;
}
.radio-chip .chip{
  display:flex; align-items:center; gap:.7rem;
  padding: 14px 16px;
  border-radius: var(--radius-xl);
  border: 1px solid hsl(var(--line) / .55);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 8px 18px rgba(0,0,0,.25);
  user-select:none;
}
.radio-chip .icon{
  display:inline-grid; place-items:center;
  width:28px; height:28px; border-radius: 12px;
  background: linear-gradient(135deg, hsl(var(--brand)/.18), hsl(var(--brand-2)/.18));
  font-size: 16px;
}
.radio-chip:hover .chip{ transform: translateY(-1px); border-color: hsl(var(--brand)/.7); }
.radio-chip input:focus-visible + .chip{ outline: 2px solid hsl(var(--brand)); outline-offset: 3px; }

/* Selected state */
.radio-chip input:checked + .chip{
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)),
    linear-gradient(90deg, hsl(var(--brand)/.3), hsl(var(--brand-2)/.3));
  border-color: transparent;
  box-shadow: 0 0 0 1px hsl(var(--brand)/.35) inset, 0 16px 40px hsla(265,84%,62%,.20);
}

/* Questions */
.qs{ display:grid; gap:18px; }
.q{
  display:grid; gap:8px;
}
.q label{
  color:var(--fg-0);
  font-weight:600;
}
textarea{
  width:100%;
  resize:vertical;
  min-height: 130px;
  padding: 14px 16px;
  color: var(--fg-0);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid hsl(var(--line) / .5);
  border-radius: 14px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
textarea::placeholder{ color: hsl(220 20% 74% / .7); }
textarea:focus{
  border-color: hsl(var(--brand)/.75);
  box-shadow: 0 0 0 4px hsl(var(--brand)/.18);
}

/* Action bar */
.actions{
  margin-top: 22px;
  display:flex; flex-wrap:wrap; gap:12px;
}

/* Button styles — three visual weights, all pure CSS */
.btn{
  --ring: hsl(var(--brand)/.2);
  display:inline-flex; align-items:center; gap:.55rem;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight:700;
  letter-spacing:.3px;
  text-decoration:none;
  transform: translateZ(0); /* improve text rendering */
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  will-change: transform;
  cursor:pointer;
  border:1px solid transparent;
}

.btn .btn-ico{ font-size: 1.05rem; line-height: 1; transform: translateY(1px); }

/* Solid (Save) */
.btn.solid{
  background: linear-gradient(180deg, hsl(var(--brand)), hsl(265 84% 52%));
  color:#fff;
  box-shadow: 0 8px 24px hsla(265,84%,62%,.35), 0 1px 0 rgba(255,255,255,.2) inset;
}
.btn.solid:hover{ transform: translateY(-1px); }
.btn.solid:active{ transform: translateY(0); box-shadow: 0 6px 18px hsla(265,84%,62%,.35) inset; }

/* Outline (Send) */
.btn.outline{
  color: var(--fg-0);
  border-color: hsl(var(--brand)/.55);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 8px 20px rgba(0,0,0,.22);
}
.btn.outline:hover{
  box-shadow: 0 10px 28px rgba(0,0,0,.30);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  transform: translateY(-1px);
}

/* Ghost (Publish) */
.btn.ghost{
  color: var(--fg-0);
  background: transparent;
  border-color: hsl(var(--line) / .55);
}
.btn.ghost:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border-color: hsl(var(--brand-2)/.6);
  transform: translateY(-1px);
}

/* Button variants hints (not functional) */
.btn.save{ --ring: hsl(var(--ok)/.18); }
.btn.send{ --ring: hsl(var(--brand)/.22); }
.btn.publish{ --ring: hsl(var(--accent)/.20); }

/* Focus ring for all buttons */
.btn:focus-visible{ outline: 3px solid var(--ring); outline-offset: 3px; }

/* Helper text */
.hint{
  color:var(--fg-dim);
  font-size: .9rem;
  margin: 12px 2px 0;
}

/* Footer */
.legal{
  text-align:center;
  color:var(--fg-dim);
  margin-top: 18px;
  font-size: .85rem;
}

/* Print-friendly (if someone prints or saves to PDF) */
@media print{
  body{ background:#fff; color:#000; }
  .bg-orbit{ display:none; }
  .card{ background:#fff; border:1px solid #bbb; box-shadow:none; }
  .btn{ border:1px solid #888; background:#f2f2f2 !important; color:#000 !important; }
  .hint, .subtitle{ color:#333; }
}