/* ===========================================================================
   De Kringloop Competitie — gedeelde stijl
   Visuele identiteit: een macro-economische "regiekamer" \u2014 diepe nachtblauwe
   panelen, geld in goud, groei in mint, oververhitting in koraal. De
   bewegende kringloop is de ster; alles eromheen blijft rustig.
   =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --bg:#0E1230; --bg2:#171D49; --panel:#1A2147; --panel2:#222C5A;
  --line:rgba(150,165,230,.18); --line2:rgba(150,165,230,.30);
  --ink:#E9EDFF; --muted:#9AA3CF; --faint:#6B739E;
  --gold:#F4C04E; --mint:#3FD9A4; --coral:#FF6B6B;
  --sky:#5AA9FF; --violet:#B68CFF; --teal:#2FD0D6; --pink:#FF7EA8; --orange:#FF9F45; --grass:#7CF6B0;
  --r:16px; --r-sm:10px;
  --shadow:0 18px 50px -20px rgba(0,0,0,.65);
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --disp:'Space Grotesk',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--body); color:var(--ink); line-height:1.5;
  background:
    radial-gradient(1200px 700px at 50% -8%, var(--bg2), transparent 60%),
    radial-gradient(900px 600px at 88% 110%, #20184a, transparent 55%),
    var(--bg);
  background-attachment:fixed; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--disp); font-weight:600; margin:0; letter-spacing:-.01em}
a{color:var(--sky)}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)} .faint{color:var(--faint)}

/* ---- topbar ---- */
.topbar{
  display:flex; align-items:center; gap:18px; padding:14px 26px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(26,33,71,.85),rgba(26,33,71,.45));
  backdrop-filter:blur(8px); position:sticky; top:0; z-index:50;
}
.brand{display:flex; align-items:center; gap:12px; font-family:var(--disp); font-weight:700; font-size:18px}
.brand .glyph{width:34px;height:34px;flex:0 0 auto}
.brand small{display:block; font-weight:500; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}
.topbar .spacer{flex:1}
.pill{font-family:var(--mono); font-size:12px; padding:6px 12px; border-radius:999px;
  border:1px solid var(--line2); color:var(--muted); background:rgba(255,255,255,.02)}
.pill b{color:var(--ink)}

/* ---- layout ---- */
.wrap{max-width:1280px; margin:0 auto; padding:26px}
.grid{display:grid; gap:20px}
.panel{
  background:linear-gradient(180deg,var(--panel),rgba(26,33,71,.7));
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow);
}
.panel.pad{padding:22px}
.panel-h{display:flex; align-items:center; gap:10px; padding:16px 20px; border-bottom:1px solid var(--line)}
.panel-h h2{font-size:16px}
.panel-h .eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
.panel-b{padding:20px}

/* ---- buttons ---- */
.btn{font-family:var(--disp); font-weight:600; font-size:14px; cursor:pointer;
  border:1px solid var(--line2); background:var(--panel2); color:var(--ink);
  padding:11px 18px; border-radius:var(--r-sm); transition:.15s; display:inline-flex; align-items:center; gap:8px}
.btn:hover{border-color:var(--line2); transform:translateY(-1px); filter:brightness(1.08)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.4; cursor:not-allowed; transform:none}
.btn.gold{background:linear-gradient(180deg,#f7cd66,#e9ad33); color:#2a1c00; border-color:#f7cd66}
.btn.mint{background:linear-gradient(180deg,#54e3b3,#2bc28e); color:#062a1f; border-color:#54e3b3}
.btn.ghost{background:transparent}
.btn.danger{background:transparent; color:var(--coral); border-color:rgba(255,107,107,.4)}
.btn.lg{font-size:16px; padding:14px 24px}
.btn.block{width:100%; justify-content:center}

/* ---- forms ---- */
label.fld{display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:7px}
input[type=text],input[type=password],input[type=number],select{
  width:100%; font-family:var(--body); font-size:15px; color:var(--ink);
  background:rgba(8,11,30,.6); border:1px solid var(--line2); border-radius:var(--r-sm);
  padding:12px 14px; outline:none; transition:.15s}
input:focus,select:focus{border-color:var(--sky); box-shadow:0 0 0 3px rgba(90,169,255,.18)}

/* ---- range sliders ---- */
.slider-row{margin:18px 0}
.slider-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px}
.slider-top .name{font-family:var(--disp); font-weight:600; font-size:15px}
.slider-top .name .dot{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:8px; vertical-align:middle}
.slider-top .val{font-family:var(--mono); font-size:15px; color:var(--gold)}
.slider-sub{font-size:12.5px; color:var(--faint); margin-bottom:10px}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:7px; border-radius:999px;
  background:linear-gradient(90deg, var(--accent,#5AA9FF) var(--pc,40%), rgba(255,255,255,.10) var(--pc,40%));
  outline:none; cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:#fff; border:3px solid var(--accent,#5AA9FF); box-shadow:0 3px 10px rgba(0,0,0,.5); cursor:grab}
input[type=range]::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--accent,#5AA9FF); cursor:grab}

/* ---- stat tiles ---- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px}
.stat{background:rgba(8,11,30,.45); border:1px solid var(--line); border-radius:var(--r-sm); padding:14px 16px}
.stat .k{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)}
.stat .v{font-family:var(--mono); font-size:24px; font-weight:700; margin-top:4px; line-height:1.1}
.stat .v small{font-size:13px; color:var(--muted); font-weight:400}
.up{color:var(--mint)} .down{color:var(--coral)} .neutral{color:var(--ink)}

/* ---- badges / shock card ---- */
.shock-card{display:flex; gap:16px; align-items:center; padding:16px 18px; border-radius:var(--r-sm);
  border:1px solid var(--line2); background:rgba(8,11,30,.4)}
.shock-card .ic{font-size:34px; line-height:1}
.shock-card .t{font-family:var(--disp); font-weight:600; font-size:17px}
.shock-card .d{font-size:13px; color:var(--muted)}
.shock-card.good{border-color:rgba(63,217,164,.5); background:rgba(63,217,164,.07)}
.shock-card.bad{border-color:rgba(255,107,107,.5); background:rgba(255,107,107,.07)}
.shock-card.mixed{border-color:rgba(244,192,78,.5); background:rgba(244,192,78,.07)}
.shock-card.calm{border-color:var(--line2)}

/* ---- scoreboard ---- */
table.board{width:100%; border-collapse:collapse; font-size:15px}
table.board th{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); text-align:left; padding:10px 12px; border-bottom:1px solid var(--line)}
table.board td{padding:14px 12px; border-bottom:1px solid var(--line)}
table.board tr:last-child td{border-bottom:none}
table.board .rank{font-family:var(--disp); font-weight:700; font-size:20px; width:54px; color:var(--muted)}
table.board tr.r1 .rank{color:var(--gold)} table.board tr.r2 .rank{color:#cfd6f5} table.board tr.r3 .rank{color:var(--orange)}
table.board .gname{font-family:var(--disp); font-weight:600; font-size:16px}
table.board .score{font-family:var(--mono); font-weight:700; font-size:22px; color:var(--gold); text-align:right}
table.board .num{font-family:var(--mono); text-align:right}
table.board tr.locked-in td{background:rgba(63,217,164,.05)}
.swatch{display:inline-block; width:12px; height:12px; border-radius:4px; margin-right:8px; vertical-align:middle}
.bar{height:8px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; margin-top:6px}
.bar > i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--gold),#ffe09a)}

/* ---- chips / status ---- */
.chip{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:12px;
  padding:5px 11px; border-radius:999px; border:1px solid var(--line2); color:var(--muted)}
.chip .led{width:8px; height:8px; border-radius:50%; background:var(--faint)}
.chip.on{color:var(--mint); border-color:rgba(63,217,164,.5)} .chip.on .led{background:var(--mint); box-shadow:0 0 8px var(--mint)}
.chip.wait .led{background:var(--gold); animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.3}}

/* ---- circular-flow diagram ---- */
.flowstage{width:100%; display:block}
.legend{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px 16px; margin-top:14px}
.legend .li{display:flex; align-items:center; gap:9px; font-size:13px}
.legend .li .sw{width:14px; height:14px; border-radius:4px; flex:0 0 auto}
.legend .li .lv{font-family:var(--mono); margin-left:auto; color:var(--muted)}

.notice{font-size:13.5px; padding:12px 14px; border-radius:var(--r-sm); border:1px solid var(--line2); display:flex; gap:10px; align-items:flex-start}
.notice.good{border-color:rgba(63,217,164,.45); background:rgba(63,217,164,.06)}
.notice.warn{border-color:rgba(255,107,107,.45); background:rgba(255,107,107,.06)}
.notice.info{border-color:var(--line2); background:rgba(90,169,255,.05)}

.section-title{display:flex; align-items:center; gap:12px; margin:6px 0 18px}
.section-title .eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint)}
.section-title .rule{flex:1; height:1px; background:var(--line)}

.center{text-align:center}
.hide{display:none!important}

@media (max-width:880px){
  .wrap{padding:16px}
  .topbar{padding:12px 16px}
  .stat .v{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important; transition:none!important}
}