/* ===== Theme tokens ===== */
:root{
  --bg:#0b0f14;
  --fg:#e6e8eb;
  --muted:#9aa4b2;
  --card:#121824;
  --stroke:#1e2633;
  --stroke2:#2a3446;
  --accent:#7dd3fc;
  --accent2:#a78bfa;
  --glow: 0 0 24px rgba(125,211,252,.25);
  --glow2: 0 0 30px rgba(167,139,250,.18);
  --shadow: 0 14px 40px rgba(0,0,0,.45);
}
:root[data-theme="dark"]{
  --bg: #070912;
  --panel: rgba(255,255,255,0.06);
  --text: rgba(255,255,255,0.92);
  --stroke: rgba(255,255,255,0.12);
}

:root[data-theme="light"]{
  --bg: #f7f8ff;
  --panel: rgba(10,12,22,0.06);
  --text: rgba(10,12,22,0.92);
  --stroke: rgba(10,12,22,0.12);
}

body{
  background: var(--bg);
  color: var(--text);
}
.card{
  background: var(--panel);
  border-color: var(--stroke);
}

/* ===== Base ===== */
*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;
  background: radial-gradient(1200px 700px at 20% 10%, rgba(125,211,252,.08), transparent 60%),
              radial-gradient(900px 600px at 90% 20%, rgba(167,139,250,.06), transparent 55%),
              radial-gradient(1100px 700px at 60% 90%, rgba(34,197,94,.05), transparent 55%),
              var(--bg);
  color: var(--text);
  min-height:100vh;
  overflow-x:hidden;
}

/* ===== Topbar (shared Labs nav) ===== */
.topbar{
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1.5rem 0.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  z-index: 3;
}

.topbar__actions{
  display: flex;
  align-items: center;
  gap: .6rem;
}

/* Brand (🧪 + title) */
.brand{
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  color: inherit;
  user-select: none;
}

.brand__mark{
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: color-mix(in oklab, var(--panel, rgba(255,255,255,0.06)) 80%, transparent 20%);
  box-shadow: 0 0 22px rgba(125,211,252,.18);
}

.brand__title{
  font-weight: 800;
  letter-spacing: .2px;
}

/* Action pills */
.chip{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .62rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: color-mix(in oklab, var(--panel, rgba(255,255,255,0.06)) 82%, transparent 18%);
  color: var(--text);
  font-weight: 750;
  font-size: .95rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

.chip--ghost{
  background: color-mix(in oklab, var(--panel, rgba(255,255,255,0.06)) 72%, transparent 28%);
}

.chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,.16);
  border-color: color-mix(in oklab, var(--stroke) 60%, rgba(125,211,252,.35) 40%);
}

.chip:active{ transform: translateY(0px); }

.chip:focus-visible,
.brand:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.18), 0 0 22px rgba(255,255,255,0.12), var(--glow);
  border-radius: 999px;
}

/* Small screens: keep topbar readable */
@media (max-width: 560px){
  .topbar{ padding: .9rem 1rem 0.15rem; }
  .brand__title{ display:none; }
  .chip__label{ display:none; }
  .chip{ padding: .62rem .78rem; }
}


.hero{
  position:relative;
  max-width:900px;
  margin:0 auto;
  padding:2.2rem 1.5rem 1rem;
  text-align:center;
  z-index:2;
}

h1{margin:0 0 .5rem;font-size:2.2rem;letter-spacing:.2px}
p{margin:.25rem auto 0;max-width:680px;color:var(--muted)}

main{
  position:relative;
  max-width:900px;
  margin:0 auto;
  padding:1.25rem 1.5rem 1.5rem;
  z-index:2;
}

/* ===== Card ===== */
.card{
  background: var(--panel, color-mix(in oklab, var(--card) 92%, black 8%));
  border:1px solid var(--stroke);
  border-radius:18px;
  padding:1.35rem;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin-bottom:1rem;
}
.row.tight{grid-template-columns:1fr 1fr; align-items:start}
@media (max-width:760px){
  .row, .row.tight{grid-template-columns:1fr}
}

label{display:block;font-weight:800;margin:0 0 .35rem}
.muted{color:var(--muted);font-size:.9rem;line-height:1.25; margin-top:.35rem}

input,select{
  width:100%;
  padding:.78rem .9rem;
  border-radius:12px;
  border:1px solid var(--stroke);
  background: color-mix(in oklab, var(--bg) 92%, black 8%);
  color: var(--text);
  outline:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
input:focus,select:focus{
  border-color: color-mix(in oklab, var(--accent) 60%, var(--stroke) 40%);
  box-shadow: var(--glow);
}

.toggle{
  border:1px solid var(--stroke);
  border-radius:14px;
  padding:.85rem .9rem;
  /* Theme-aware panel so light mode doesn't inherit a dark-only background */
  background: var(--panel, color-mix(in oklab, var(--bg) 92%, black 8%));
  color: var(--text);
}
.toggle input{width:auto; margin-right:.6rem; transform: translateY(1px)}
.toggle label{display:inline;font-weight:900; margin:0; color: var(--text)}
.toggle .muted{margin-top:.35rem; color: var(--muted)}

button{
  width:100%;
  padding:.9rem 1rem;
  border:none;
  border-radius:14px;
  font-weight:950;
  letter-spacing:.2px;
  color:#081018;
  background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent2) 60%, var(--accent) 40%));
  cursor:pointer;
  box-shadow: var(--glow), var(--glow2);
}
button:hover{filter:saturate(1.1) brightness(1.02)}
button:active{transform:translateY(1px)}

.result{
  margin-top:1rem;
  padding:1rem 1rem;
  border-radius:14px;
  background: color-mix(in oklab, #0f1520 92%, black 8%);
  border:1px dashed color-mix(in oklab, var(--accent) 35%, var(--stroke) 65%);
}
.kpi{font-size:1.08rem;font-weight:950}
.small{font-size:.92rem;color:var(--muted);margin-top:.35rem}

.streak{
  margin-top:.9rem;
  color: color-mix(in oklab, var(--muted) 85%, white 15%);
  font-size:.9rem;
}

/* ===== Footer ===== */
footer{
  position:relative;
  max-width:900px;
  margin:0 auto;
  padding:1.4rem 1.5rem 2.6rem;
  text-align:center;
  color:#6b7280;
  font-size:.85rem;
  z-index:2;
}

/* ===== Ambient FX layer ===== */
.fx{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
}
#fxCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.9;
}

/* Reactor */
.reactor{
  position:absolute;
  left:50%;
  top:18%;
  width:min(520px, 70vw);
  aspect-ratio:1/1;
  transform:translateX(-50%);
  opacity:.55;
  filter: drop-shadow(0 0 20px rgba(125,211,252,.12));
}
.ring{
  position:absolute;
  inset:0;
  border-radius:999px;
  border:2px solid color-mix(in oklab, var(--accent) 55%, rgba(255,255,255,.06) 45%);
  box-shadow: var(--glow);
  mask-image: radial-gradient(circle at center, transparent 55%, black 62%);
}
.ring.r2{inset:6%; opacity:.55; border-color: color-mix(in oklab, var(--accent2) 55%, rgba(255,255,255,.05) 45%)}
.ring.r3{inset:12%; opacity:.35; border-color: color-mix(in oklab, #22c55e 45%, rgba(255,255,255,.05) 55%)}

.core{
  position:absolute;
  left:50%;
  top:50%;
  width:16%;
  height:16%;
  transform:translate(-50%,-50%);
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), rgba(125,211,252,.18) 45%, rgba(0,0,0,0) 70%);
  box-shadow: 0 0 40px rgba(125,211,252,.22), 0 0 60px rgba(167,139,250,.10);
}


/* Reactor motion */
:root{ --reactorSpeed: 14s; }

.ring.r1{ animation: spin var(--reactorSpeed) linear infinite; }
.ring.r2{ animation: spin calc(var(--reactorSpeed) * 1.35) linear infinite reverse; }
.ring.r3{ animation: spin calc(var(--reactorSpeed) * 1.75) linear infinite; }

@keyframes spin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

.how + .how{ margin-top:.7rem; }


/* Make regular options look normal */
select option {
  color: var(--fg);
  font-weight: 600;
  background: #0f1520;
}