:root{
  --bg1:#070a12;
  --bg2:#0b1020;
  --card:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.12);
  --text:#e9eefc;
  --muted:rgba(233,238,252,.70);
  --accent:#e91e63;
}

*{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial; }
body{
  background:
    radial-gradient(1200px 800px at 20% 0%, #141b36 0%, transparent 55%),
    radial-gradient(1000px 700px at 90% 10%, #2b1030 0%, transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  color: var(--text);
}

.app-bg{
  position: fixed; inset: 0; pointer-events:none;
  background:
    radial-gradient(700px 500px at 30% 10%, rgba(233,30,99,.15), transparent 60%),
    radial-gradient(600px 400px at 80% 20%, rgba(37,99,235,.12), transparent 60%);
  filter: saturate(120%);
}

.nav-glass{
  background: rgba(10, 12, 20, .55) !important;
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}

.glass{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.glass-alert{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
}

.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: 12px;
}
.pill .material-icons-round{ font-size: 16px; opacity:.9; }

.md-field{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
}
.md-field .material-icons-round{ opacity:.9; }
.md-field .form-control{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--text) !important;
  padding: 0 !important;
}
.md-field .form-control::placeholder{ color: rgba(233,238,252,.55); }

.btn-accent{
  background: var(--accent) !important;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  color: #fff !important;
  font-weight: 800;
}
.btn-accent:hover{ filter: brightness(1.05); }

.soft{ border-color: rgba(255,255,255,.10); }

.card-row{
  display:flex; align-items:center; gap:10px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono"; }
.tiny{ font-size: 11px; opacity: .75; }
.help{ font-size: 12px; color: rgba(233,238,252,.60); margin-top: 6px; }

.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  text-decoration:none;
  font-size: 13px;
}
.chip .material-icons-round{ font-size: 16px; opacity:.9; }
.chip:hover{ background: rgba(255,255,255,.07); }
.chip.active{ border-color: rgba(233,30,99,.65); box-shadow: 0 0 0 .2rem rgba(233,30,99,.12); }

.tag{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(233,238,252,.82);
  text-decoration:none;
  font-size: 12px;
}
.tag:hover{ background: rgba(0,0,0,.26); }
.tag-n{
  font-size: 11px;
  opacity: .8;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

.review-front{
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
}
.review-back{
  font-size: 18px;
  font-weight: 600;
}
.answer-box{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 12px;
}