:root{
  --bg:#0b0d10;
  --panel:#12161b;
  --ink:#e6eef6;
  --muted:#93a1b0;
  --accent:#5cc8ff;
  --accent2:#a2ff9f;
  --warn:#ff9d5c;
  --ok:#9fffa8;

  --bg1:#304050;
  --bg2:#203040;
  --bg3:#102030;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:radial-gradient(1200px 600px at 70% -20%, #16202a 0%, #0b0d10 60%);
  color:var(--ink); font:16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif;
  position:relative;
}

/* Soft color wash */
.colorwash{
  position:fixed; inset:-10% -10% -10% -10%;
  z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 60% at 30% 30%, var(--bg1), transparent 70%),
    radial-gradient(55% 55% at 70% 70%, var(--bg2), transparent 70%),
    radial-gradient(70% 70% at 60% 30%, var(--bg3), transparent 70%);
  filter: blur(60px) saturate(120%);
  opacity: .35;
  animation: drift 14s ease-in-out infinite alternate;
}
@keyframes drift{
  0% { transform: translate3d(0,0,0) scale(1); }
  100%{ transform: translate3d(2%, -2%, 0) scale(1.03); }
}

.topbar{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:color-mix(in oklab, var(--panel) 86%, black);
  border-bottom:1px solid #1c2430;
  backdrop-filter: blur(6px);
}
.topbar h1{font-size:16px; margin:0; letter-spacing:.3px}
.btn{
  appearance:none; border:1px solid #2a3340; background:#16202a; color:var(--ink);
  padding:8px 12px; border-radius:12px; cursor:pointer; font-weight:600;
  transition:transform .06s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.25); }
.btn.primary{ background: linear-gradient(180deg, #1b2a36, #15222c); border-color:#304356; }

.container{ position:relative; z-index:1; width:min(1100px,94vw); margin:18px auto 48px; }
.screen{ display:none; }
.screen.current{ display:block; }

.instructions{ background:#0f151c; border:1px solid #233142; border-radius:14px; padding:12px; }
.instructions ol{ margin:.3em 0 .5em 1.2em; }
.instructions .muted{ color:var(--muted); font-size:13px; }

.stage{ position:relative; margin-top:12px; background:#0f141a; border:1px solid #1b2028; border-radius:18px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.45); }
canvas{ display:block; width:100%; height:auto }
.status{ position:absolute; top:10px; left:10px; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(6px); padding:6px 10px; border-radius:10px; font-size:13px; color:var(--accent2); z-index:2; }
.toast{ position:absolute; right:10px; top:10px; background:rgba(255, 88, 0, .12); color:#ffdccc; border:1px solid rgba(255,140,90,.4); border-radius:12px; padding:8px 12px; font-size:13px; display:none; z-index:3; }

.legend{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px }
.chip{ padding:6px 10px; border-radius:999px; border:1px solid #2a3a4e; background:#0e1722; font-size:12px; color:#cfe7ff }

/* Loading screen: hidden by default, flex only when .current */
#screen-loading{ display:none; align-items:center; justify-content:center; min-height:50vh; }
#screen-loading.current{ display:flex }

.loading-card{ display:grid; gap:8px; place-items:center; background:#0f151c; border:1px solid #233142; border-radius:16px; padding:22px 28px; }
.spinner{ width:42px; height:42px; border:3px solid #2a3a4e; border-top-color:var(--accent); border-radius:50%; animation:spin 1s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }
.small{ font-size:12px }

/* Results */
.grid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-top:12px }
.card{ background:rgba(14,19,25,0.9); border:1px solid #1f2a38; border-radius:14px; padding:12px; backdrop-filter: blur(4px); }
.card.full{ grid-column:1 / -1 }
.muted{ color:var(--muted) }
.kv{ display:grid; grid-template-columns:130px 1fr; gap:6px 10px; font-size:13px; }

/* 8 bars */
.bar{ height:10px; background:#0c1117; border:1px solid #1f2935; border-radius:999px; overflow:hidden; }
.bar > i{ display:block; height:100%; background:linear-gradient(90deg,#78ffd6,#a8ff78) }

.actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:10px }

/* Thumbnails */
.list .item{ display:grid; grid-template-columns:72px 1fr; gap:10px; align-items:center; margin:6px 0; }
.list .thumb{
  width:64px; height:64px; border:1px solid #2a3a4e; border-radius:10px;
  display:flex; align-items:center; justify-content:center; color:#91a6bf; font-size:11px;
  background:#0d1620;
}
.item .meta{ display:flex; gap:8px; flex-wrap:wrap; color:#b8c5d6; font-size:12px }

/* Radar chart */
.radar-wrap{ display:flex; justify-content:center; align-items:center; margin-top:10px }
.radar-wrap canvas{ width:100%; max-width:520px; height:auto; display:block }