:root {
  --bg: #0c0e11;
  --card: #141820;
  --text: #e8eef7;
  --muted: #9fb0c0;
  --accent: #6aa9ff;
  --border: #263043;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

.page { max-width: 980px; margin: 24px auto; padding: 0 16px 48px; }
h1, h2, h3 { margin: 8px 0 12px; }
p, small, label { color: var(--muted); }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin: 16px 0; }
.row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 8px 0; }
.inline { display: inline-flex; gap: 8px; align-items: center; }
.group { padding: 8px 12px; background: #0f131b; border-radius: 8px; border: 1px solid var(--border); }
.hidden { display: none; }
.checkbox { display: inline-flex; align-items: center; gap: 6px; }

.balls { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.ball { background: #0f131b; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.ball h3 { margin: 0 0 8px; color: var(--text); }
.alpha { margin-left: 8px; }

button { background: var(--accent); color: #06101e; border: none; border-radius: 8px; padding: 8px 12px; cursor: pointer; font-weight: 600; }
button:hover { filter: brightness(1.05); }
input, select { background: #0d1117; color: var(--text); border: 1px solid var(--border); padding: 6px 8px; border-radius: 6px; }
input[type="color"] { padding: 0; height: 30px; width: 46px; border: none; background: transparent; }

.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 10; }
.overlay-content { width: min(520px, 92vw); background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px; }
.overlay.hidden { display: none; }

#c { position: fixed; inset: 0; display: block; width: 100vw; height: 100vh; }

.hud { position: fixed; left: 12px; top: 12px; z-index: 5; color: var(--text); }
.panel { background: rgba(20, 24, 32, 0.8); backdrop-filter: blur(6px); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; min-width: 340px; }
.hud .row { margin: 6px 0; }
details summary { cursor: pointer; margin-top: 6px; }