/* Tokens */
:root{
  --bg:#0b0e13;--bg-soft:#0f131a;--card:rgba(255,255,255,.06);
  --text:#e7e7ea;--muted:#98a0ad;--ring:#273248;
  --accent:#8be0a4;--accent-2:#82b2ff;--ok:#38d39f;--warn:#ffd36a;--err:#ff6b6b;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f8fc;--bg-soft:#fff;--card:rgba(0,0,0,.04);
    --text:#151922;--muted:#5d6674;--ring:#e6ecff;
    --accent:#2fb380;--accent-2:#3456ff;--ok:#1eae78;--warn:#b8860b;--err:#d94a4a;
    --shadow:0 10px 22px rgba(0,0,0,.10);
  }
}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial,sans-serif}
.bg{position:fixed;inset:0;background:radial-gradient(1200px 500px at 20% 5%, #121826, transparent), radial-gradient(1200px 600px at 80% 90%, #0f131a, transparent);pointer-events:none}
.shell{max-width:780px;margin:0 auto;padding:20px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:36px;height:36px;display:grid;place-items:center;background:var(--card);border-radius:12px;box-shadow:var(--shadow)}
h1{margin:0;font-size:24px}
.icon-btn{background:var(--card);border:1px solid var(--ring);border-radius:12px;color:var(--text);padding:8px 10px;cursor:pointer;box-shadow:var(--shadow);transition:transform .08s}
.icon-btn:active{transform:scale(.98)}
.switch{display:inline-flex;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--ring);border-radius:12px;background:var(--card);box-shadow:var(--shadow);cursor:pointer}

.card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border:1px solid var(--ring);border-radius:16px;padding:16px;box-shadow:var(--shadow);backdrop-filter: blur(6px)}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.target{background:var(--bg-soft);border:1px solid var(--ring);border-radius:12px;padding:10px 12px;font-weight:700}
.digits{display:flex;gap:8px;flex-wrap:wrap}
.digit{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--bg-soft);border:1px solid var(--ring);font-weight:700;box-shadow:var(--shadow)}

.stats{display:flex;gap:12px;margin-top:10px;flex-wrap:wrap}
.stat{flex:1;min-width:120px;background:var(--bg-soft);border:1px solid var(--ring);border-radius:12px;padding:10px;text-align:center}
.stat .label{display:block;font-size:12px;color:var(--muted)}
.stat .value{font-weight:700;font-size:18px}

.expr{display:flex;gap:8px;margin-top:10px}
#expr{flex:1;padding:12px;border-radius:12px;border:1px solid var(--ring);background:var(--bg-soft);color:var(--text);font-size:18px}
.primary{background:linear-gradient(180deg, var(--accent), var(--accent-2));border:none;color:white;padding:12px 16px;border-radius:12px;cursor:pointer;box-shadow:var(--shadow)}

.keys{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;margin-top:10px}
.keys button{padding:10px 0;border-radius:12px;border:1px solid var(--ring);background:var(--bg-soft);color:var(--text);cursor:pointer}
.keys .wide{grid-column:span 3}

.board{margin-top:10px}
.attempts{list-style:none;padding:0;margin:8px 0 0}
.attempts li{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:10px 12px;border:1px solid var(--ring);background:var(--bg-soft);border-radius:12px;margin-top:8px}
.delta{font-weight:700}
.delta.ok{color:var(--ok)} .delta.mid{color:var(--warn)} .delta.bad{color:var(--err)}
.expr-code{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace}

.result{margin-top:12px;padding:12px;border:1px solid var(--ring);background:var(--bg-soft);border-radius:16px}
.secondary{background:var(--card);border:1px solid var(--ring);color:var(--text);padding:10px 14px;border-radius:12px;cursor:pointer}
.ghost{background:transparent;border:1px dashed var(--ring);color:var(--text);padding:10px 14px;border-radius:12px;cursor:pointer}

.foot{opacity:.8;text-align:center;margin-top:14px}
.muted{color:var(--muted)} .tiny{font-size:12px}