:root{
  --bg:#0b0f14; --panel:#111823; --ink:#e8f0ff; --muted:#9bb0c9;
  --accent:#5ee397; --accent-2:#ffd166; --bad:#ff6b6b; --good:#7cffc4;
  --yellow:#e2b714;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:radial-gradient(80vmax 80vmax at 80% -10%, #1a2433 0%, #0b0f14 55%);
  color:var(--ink); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Cantarell,Noto Sans,Arial;
  display:grid; place-items:center; padding:18px;
}
.app{
  width:min(980px,96vw);
  background:linear-gradient(180deg,#101621,#0d1420);
  border:1px solid #1d2a3b; border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.03);
  padding:16px; position:relative;
}
.row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:space-between}
.title{font-weight:800; text-transform:lowercase}
.badge{font-size:12px; color:var(--muted); background:#0b131f; border:1px solid #1b2a3e; border-radius:999px; padding:6px 10px}
.hud{display:flex; gap:10px; flex-wrap:wrap}
.stat{background:#0b131f; border:1px solid #1b2a3e; padding:8px 10px; border-radius:10px; min-width:88px; text-align:center}
.stat .l{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px}
.stat .v{font-size:18px; font-weight:700; margin-top:2px}
.controls{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; align-items:center}
/* base buttons (top controls) */
button{background:#0b131f; border:1px solid #1b2a3e; color:var(--ink); padding:8px 12px; border-radius:10px; cursor:pointer}
button:hover{box-shadow:0 0 0 2px #1b2a3e inset}
.spacer{flex:1 1 auto}
canvas.stage{display:block; width:100%; height:420px; border-radius:12px; background:#0d1623; border:1px solid #1c2a3f}
#sink{position:absolute; left:-9999px; top:-9999px; opacity:0; width:0; height:0; caret-color:transparent}

/* segmented timer */
.seg{display:inline-flex; background:#0b131f; border:1px solid #1b2a3e; border-radius:12px; overflow:hidden}
.seg button{border:0; background:transparent; padding:8px 10px; border-right:1px solid #1b2a3e; border-radius:0}
.seg button:last-child{border-right:0}
.seg button.is-active{background:#0f1a2a; color:#fff}

/* custom text modal */
.overlay{position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.5); backdrop-filter:saturate(120%) blur(2px); padding:20px; z-index:10;}
.overlay.show{display:flex;}
.sheet{width:min(880px,95vw); background:#0d1623; border:1px solid #1c2a3f; border-radius:12px; padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.6);}
.sheet h3{margin:0 0 8px 0; font-size:16px}
.sheet textarea{width:100%; height:220px; resize:vertical; background:#0b131f; color:#e8f0ff;
  border:1px solid #1b2a3e; border-radius:10px; padding:10px; font-size:14px; line-height:1.5;
  font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;}
.sheet .actions{display:flex; gap:8px; margin-top:10px; justify-content:flex-end}

/* RESULTS PAGE */
.results{display:none; margin-top:12px;}
.results.show{display:block;}
.result-grid{display:grid; grid-template-columns: 240px 1fr; gap:18px; align-items:start}
.big{font-size:56px; font-weight:800; color:var(--yellow); line-height:1}
.label{color:var(--muted); text-transform:uppercase; letter-spacing:.6px; font-size:12px; margin-top:6px}
.kvs{display:flex; gap:18px; flex-wrap:wrap; margin-top:8px}
.kv{min-width:120px}
.kv .k{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.6px}
.kv .v{font-weight:700; font-size:18px; margin-top:2px}
.chart{width:100%; height:240px; border:1px solid #1b2a3e; border-radius:10px; background:#0b131f}

/* centered, flat results buttons */
.res-actions{
  grid-column:1 / -1;
  display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:nowrap; width:100%; margin-top:6px;
}
.res-actions button{
  appearance:none; background:var(--panel); color:var(--ink); padding:10px 16px; border-radius:12px;
  border:1px solid #1b2a3e; box-shadow:none; font-weight:600; letter-spacing:.2px; cursor:pointer;
  transition:border-color .15s ease, transform .12s ease; flex:0 0 auto;
}
.res-actions button:hover{border-color:#2a3d58; transform:translateY(-1px)}
.res-actions button:active{transform:none}
.res-actions button:focus-visible{outline:none; border-color:var(--yellow)}

/* light theme */
body.light{
  --ink:#0b0f14;
  --muted:#445161;
  background:radial-gradient(80vmax 80vmax at 80% -10%, #f0f4fa 0%, #ffffff 55%);
  color:var(--ink);
}
body.light .app{
  background:linear-gradient(180deg,#ffffff,#f0f4fa);
  border:1px solid #d0d7e2;
  box-shadow:0 10px 30px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.8);
}
body.light .badge,
body.light .stat,
body.light button,
body.light .seg,
body.light .sheet textarea,
body.light .chart{
  background:#ffffff;
  border:1px solid #d0d7e2;
  color:var(--ink);
}
body.light .badge{color:var(--muted);}
body.light button:hover,
body.light .res-actions button:hover{box-shadow:0 0 0 2px #d0d7e2 inset; border-color:#d0d7e2;}
body.light .seg button{border-right:1px solid #d0d7e2;}
body.light .seg button.is-active{background:#e6eaf0; color:#000;}
body.light canvas.stage{background:#ffffff; border:1px solid #d0d7e2;}
body.light .sheet{background:#ffffff; border:1px solid #d0d7e2;}
body.light .label{color:var(--muted);}
body.light .res-actions button{background:#f6f7f9; border:1px solid #d0d7e2; color:var(--ink);}
body.light .res-actions button:hover{border-color:#c0c8d2; transform:translateY(-1px);}