:root { --bg:#14161a; --card:#1e2127; --text:#eceff4; --dim:#8b93a1; --accent:#6ea8ff; --ok:#4cc38a; --bad:#f06a6a; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.4 -apple-system, system-ui, sans-serif;
       padding: env(safe-area-inset-top) 12px calc(env(safe-area-inset-bottom) + 12px); max-width:520px; margin-inline:auto; }
h1 { font-size:18px; margin:14px 0 2px; }
h2 { font-size:16px; margin:18px 0 6px; }
a { color:var(--accent); }
.top { font-size:13px; color:var(--dim); margin-bottom:10px; }
nav { display:flex; gap:6px; margin-bottom:12px; }
nav button { flex:1; padding:10px 4px; border:0; border-radius:10px; background:var(--card); color:var(--dim); font-size:15px; }
nav button.on { background:var(--accent); color:#0b1220; font-weight:600; }
.card { background:var(--card); border-radius:14px; padding:16px; margin-bottom:12px; }
.big { font-size:72px; font-weight:700; text-align:center; margin:8px 0; min-height:84px; }
.msg { text-align:center; min-height:24px; color:var(--dim); }
.msg.ok { color:var(--ok); } .msg.bad { color:var(--bad); }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px; }
.grid button { padding:16px 0; font-size:20px; border:0; border-radius:10px; background:#2a2f38; color:var(--text); }
.grid button.sharp { background:#222730; }
.grid button:disabled { opacity:.25; }
.grid button.right { background:var(--ok); color:#06210f; }
.grid button.wrong { background:var(--bad); color:#2a0707; }
.row { display:flex; gap:8px; margin-top:12px; }
.row button, .primary { flex:1; padding:14px; border:0; border-radius:10px; background:var(--accent); color:#0b1220; font-size:16px; font-weight:600; }
.row button.sec { background:#2a2f38; color:var(--text); font-weight:400; }
.small { font-size:13px; color:var(--dim); }
.meter { position:relative; height:14px; border-radius:7px; background:#2a2f38; margin:14px 0 4px; overflow:hidden; }
.meter .mid { position:absolute; left:50%; top:0; bottom:0; width:2px; background:#555c68; }
.meter .needle { position:absolute; top:0; bottom:0; width:6px; margin-left:-3px; border-radius:3px; background:var(--accent); left:50%; transition:left .06s; }
.meter .needle.hit { background:var(--ok); }
.hold { height:6px; border-radius:3px; background:#2a2f38; overflow:hidden; }
.hold > div { height:100%; width:0; background:var(--ok); }
table { width:100%; border-collapse:collapse; font-size:14px; }
td, th { padding:6px 4px; text-align:left; } th { color:var(--dim); font-weight:500; }
.bar { height:8px; border-radius:4px; background:#2a2f38; overflow:hidden; min-width:60px; }
.bar > div { height:100%; background:var(--accent); }
.hidden { display:none !important; }
.toast { text-align:center; color:var(--ok); min-height:20px; font-size:14px; }
.field { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid #2a2f38; }
.field:last-child { border-bottom:0; }
.field label { flex:1; }
select, input[type=number], textarea { background:#2a2f38; color:var(--text); border:0; border-radius:8px; padding:8px; font-size:16px; }
input[type=number] { width:80px; } input[type=range] { width:140px; }
textarea { width:100%; height:80px; font-size:12px; margin-top:8px; font-family:monospace; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.65); display:flex; align-items:center; justify-content:center; padding:20px; z-index:10; }
.modal .card { width:100%; max-width:420px; margin:0; }
.modal .stat { font-size:34px; font-weight:700; text-align:center; margin:4px 0; }
footer { margin-top:18px; text-align:center; font-size:13px; color:var(--dim); }
footer a { color:var(--dim); margin:0 8px; }
.page p, .page li { color:#c9ced8; }