@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600&family=Inter:wght@400;600&display=swap');

:root{
  --bg:#0d0f1a;
  --card:#151a2b;
  --accent:#00ffcc;
  --accent2:#7cf0ff;
  --text:#e6f1ff;
  --muted:#90a4b8;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(circle at 10% 0%, #1a213a, #0d0f1a 40%, #0b0e16 100%);
  color: var(--text);
  min-height:100vh;
}

a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }

.app-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 20px; background:#0b0f1f; border-bottom:1px solid #1c2544;
  position:sticky; top:0; z-index:10;
}
.brand{ font-family: Orbitron, monospace; color:var(--accent); font-weight:600; letter-spacing:1px; }

.container{ max-width: 900px; margin: 30px auto; padding: 0 16px; }

.card{
  background: var(--card);
  border-radius: 16px;
  padding: 24px;
}

.neon{ box-shadow: 0 0 0 1px rgba(124,240,255,.15), 0 0 24px rgba(0,255,204,.08) inset; }

.login-box, .form-box{ max-width: 420px; margin: 60px auto; }

input, select, button{
  width:100%; padding:12px 14px; margin:8px 0 14px; border-radius:10px; border:1px solid #26304f; background:#0f1426; color:var(--text);
}
button{ background: linear-gradient(90deg, var(--accent), var(--accent2)); color:#001214; border:none; font-weight:700; cursor:pointer; }
button.ghost{ background: transparent; color: var(--accent2); border:1px solid #223159; }

.muted{ color: var(--muted); font-size: 14px; }

#form-container{ max-width:680px; margin: 40px auto; }
#progress{ height: 6px; background:#0a0f1f; border-radius:6px; overflow:hidden; margin-bottom:20px; }
#progress-bar{ display:block; height:100%; width:0%; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .3s ease; }

.question h2{ margin-top:8px; font-family: Orbitron, monospace; letter-spacing:.5px; }
.options{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.option-btn{
  padding:10px 14px; border-radius:999px; background:#0f1426; border:1px solid #223159; color:var(--text);
}
.option-btn.active{ border-color: var(--accent); box-shadow: 0 0 0 1px rgba(0,255,204,.4); }

.controls{ display:flex; justify-content:space-between; margin-top: 8px; }

.grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 20px; }
.pill-list{ list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.pill{ background:#0f1426; border:1px solid #223159; border-radius:999px; padding:6px 10px; }
.pill-delete{ margin-left:8px; color:#ff819b; }

table{ width:100%; border-collapse: collapse; margin-top:10px; }
td, th{ padding:8px; border-bottom:1px solid #26304f; }

.error{ color:#ff6b6b; }
.success{ color:#7CFFCB; }