/* ===========================
   Neon Glass UI – Locked Build
   =========================== */

:root{
  --radius: 22px;
  --inner-radius: 18px;

  /* Dark */
  --bg: #0c0f16;
  --bg-2: #0b0e15;
  --text: #e9eef8;
  --muted: #9fb0c7;

  /* Light */
  --bgL: #f6f8fc;
  --bgL-2: #ffffff;
  --textL: #10131a;
  --mutedL: #54657b;

  /* Glass + ring */
  --glass: rgba(255,255,255,.06);
  --glass-strong: rgba(255,255,255,.14);
  --glassL: rgba(255,255,255,.7);
  --ring: rgba(255,255,255,.18);
  --ringL: rgba(21, 74, 255, .15);

  /* Gradients (chips/buttons) */
  --g-indigo: linear-gradient(135deg,#7c5cff 0%, #5664ff 100%);
  --g-blue:   linear-gradient(135deg,#3aa0ff 0%, #2f79ff 100%);
  --g-teal:   linear-gradient(135deg,#00d2c9 0%, #00a3a7 100%);
  --g-fuchsia:linear-gradient(135deg,#ff64db 0%, #9747ff 100%);
  --g-amber:  linear-gradient(135deg,#ffb44d 0%, #ff7a45 100%);
  --g-cyan:   linear-gradient(135deg,#54d1ff 0%, #369dff 100%);
  --g-violet: linear-gradient(135deg,#9a6bff 0%, #3d7bff 100%);
  --g-plum:   linear-gradient(135deg,#b250ff 0%, #ff4db5 100%);

  --shadow: 0 20px 50px rgba(0,0,0,.35);
  --shadow-soft: 0 10px 30px rgba(0,0,0,.25);
  --shadowL: 0 18px 40px rgba(19, 49, 99, .10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font: 16px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg); color: var(--text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
body.light{ background:var(--bgL); color:var(--textL); }

.wrapper{ max-width:960px; margin:0 auto; padding:16px 16px 120px; }

.h1{ font-size:36px; font-weight:800; letter-spacing:.2px; }
.eyebrow{ font-weight:600; opacity:.75; margin-bottom:6px; }
.text-dim{ color:var(--muted); }
body.light .text-dim{ color:var(--mutedL); }

.row{ display:flex; gap:12px; flex-wrap:wrap; }

.mt-12{ margin-top:12px } .mt-16{ margin-top:16px } .mt-24{ margin-top:24px }

.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  border:1px solid var(--ring);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px) saturate(140%);
}
.header{ padding:20px; }
.inner{ padding:18px 18px 14px; border-radius: var(--radius); }
body.light .glass{
  background: var(--glassL);
  border-color: var(--ringL);
  box-shadow: var(--shadowL);
  backdrop-filter: blur(18px) saturate(140%);
}

.accent-violet .header{ background: radial-gradient(1200px 400px at 10% -10%, rgba(157,120,255,.35), transparent), radial-gradient(1200px 400px at 100% -10%, rgba(61,123,255,.35), transparent), var(--glass); }
.accent-teal   .header{ background: radial-gradient(1000px 380px at 0% -10%, rgba(0,210,201,.35), transparent), radial-gradient(1000px 380px at 100% -10%, rgba(63,135,255,.35), transparent), var(--glass); }
.accent-cyan   .header{ background: radial-gradient(1000px 380px at 0% -10%, rgba(84,209,255,.35), transparent), radial-gradient(1000px 380px at 100% -10%, rgba(151,107,255,.35), transparent), var(--glass); }
.accent-plum   .header{ background: radial-gradient(1000px 380px at 0% -10%, rgba(178,80,255,.35), transparent), radial-gradient(1000px 380px at 100% -10%, rgba(255,77,181,.35), transparent), var(--glass); }
body.light .header{ background: var(--glassL) }

.tab-row{
  display:flex; flex-wrap:wrap; gap:12px; margin-top:14px;
}
.chip{
  appearance:none; border:0; color:white; font-weight:700;
  padding:10px 16px; border-radius: 999px; cursor:pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 16px rgba(0,0,0,.25);
  transition: transform .08s ease, box-shadow .2s ease, opacity .2s ease, filter .2s ease;
}
.chip:hover{ transform: translateY(-1px); }
.chip.is-active{ filter: brightness(1.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 22px rgba(0,0,0,.35); }
body.light .chip{ color:var(--textL); background: #f3f6ff; border-color: #e7ecff; box-shadow: 0 8px 16px rgba(19,49,99,.08) inset; }

/* Color variants for chips */
.chip-indigo{ background: var(--g-indigo); }
.chip-blue{   background: var(--g-blue); }
.chip-teal{   background: var(--g-teal); }
.chip-fuchsia{background: var(--g-fuchsia); }
.chip-amber{  background: var(--g-amber); color:#231a00; }
.chip-cyan{   background: var(--g-cyan); }
.chip-violet{ background: var(--g-violet); }
.chip-plum{   background: var(--g-plum); }

/* Inputs & Buttons */
.input, select, textarea{
  width:100%; padding:16px 18px; border-radius: 18px;
  border:1px solid var(--ring); color:inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  outline:none; box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}
textarea{ min-height:120px; resize:vertical; }
body.light .input, body.light select, body.light textarea{
  background:#fff; border-color:#e7ecff; box-shadow: inset 0 1px 0 rgba(255,255,255,1);
}

.btn{
  appearance:none; border:0; color:white; font-weight:800;
  padding:12px 18px; border-radius: 18px; cursor:pointer; white-space:nowrap;
  background: var(--g-blue);
  box-shadow: 0 12px 22px rgba(24,119,242,.35);
}
.btn-ghost{
  background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
  color:var(--text);
}
.btn:disabled{ opacity:.6; cursor:not-allowed; }

.btn-indigo{ background: var(--g-indigo); }
.btn-teal{   background: var(--g-teal); }
.btn-amber{  background: var(--g-amber); color:#231a00; }

.panel{ margin-top:16px; }

/* Cards (lists, items) */
.card{
  padding:16px; border-radius:18px; border:1px solid var(--ring);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
}
body.light .card{ background:#fff; border-color:#e7ecff; box-shadow: var(--shadowL); }

.list{ display:grid; gap:12px; }
.item{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding:14px 16px; border-radius:16px; border:1px solid var(--ring); background: rgba(255,255,255,.04); }
body.light .item{ background:#fafcff; border-color:#e9eefc; }

.kv{ display:grid; grid-template-columns: 1fr auto; gap:8px 16px; align-items:center; }

footer{ height:32px }

/* Utility width for forms on mobile */
.form-grid{ display:grid; gap:14px; }
@media (min-width:740px){ .form-grid{ grid-template-columns:1fr 1fr; } }
.full{ grid-column:1/-1; }

/* Small toast */
.toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  background:#161b26; color:#e9eef8; padding:10px 14px; border-radius:14px;
  box-shadow:0 10px 26px rgba(0,0,0,.35); z-index:50; opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.toast.show{ opacity:1; transform:translate(-50%,-4px); }
body.light .toast{ background:#0f1430; color:#fff; }

/* Banner overlay: zero DOM changes, zero JS changes */
.glass.header {
  position: relative;          /* ensure overlay anchors correctly */
  overflow: hidden;            /* hide any overflow */
}

/