/* Shared calculator look - big, bold, dark, phone-first. Accent color comes from --a on <html>. */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0}
body{background:#0b1220;color:#f8fafc;font:20px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
 padding:0 14px calc(28px + env(safe-area-inset-bottom));touch-action:manipulation;overflow-x:hidden}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;touch-action:manipulation;user-select:none;-webkit-user-select:none}
main{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.top{display:flex;align-items:center;justify-content:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 0 2px}
.top img{width:34px;height:34px;border-radius:9px}
.top h1{margin:0;font-size:1.35rem;font-weight:900;letter-spacing:.01em}

/* The big answer stays pinned at the top while you type */
.hero{position:sticky;top:0;z-index:5;margin:0 -14px;padding:8px 14px 10px;background:#0b1220}
.hero .in{background:var(--a);color:var(--on,#04120a);border-radius:22px;padding:12px 18px 14px;text-align:center;box-shadow:0 8px 24px #0006}
.hero .rl{display:block;font-size:1.05rem;font-weight:800;opacity:.85}
.hero output{display:block;font-size:clamp(2.6rem,13vw,3.6rem);font-weight:900;line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.02em;word-break:break-word}
.hero .sub{display:block;font-size:1.05rem;font-weight:800;min-height:1.3em}
.hero.loss .in{background:#ef4444;color:#fff}
.hero.empty .in{background:#1e293b;color:#94a3b8}

/* Input boxes */
.f{display:block}
.l{display:block;font-size:1.15rem;font-weight:800;margin:0 0 6px 4px;color:#e2e8f0}
.l small{font-weight:600;color:#94a3b8;font-size:.9rem}
.box{display:flex;align-items:center;height:72px;border-radius:18px;border:3px solid #334155;background:#111a2e;padding:0 16px;gap:6px}
.box:focus-within{border-color:var(--a)}
.box .pre,.box .suf{font-size:1.7rem;font-weight:900;color:#94a3b8}
.box input{flex:1;min-width:0;width:100%;height:100%;border:0;background:transparent;outline:none;font-size:1.75rem;font-weight:800;font-variant-numeric:tabular-nums}
.box input::placeholder{color:#475569;font-weight:700}
input{font-size:max(16px,1em)}
.box.text input{font-size:1.4rem}
.hint{margin:6px 0 0 6px;font-size:1rem;color:#94a3b8;min-height:1.2em}

/* Quick-pick buttons */
.chips{display:flex;gap:8px;margin-top:8px}
.chips button{flex:1;height:58px;border-radius:16px;background:#1e293b;border:3px solid #334155;font-size:1.3rem;font-weight:900}
.chips button.on{background:var(--a);border-color:var(--a);color:var(--on,#04120a)}
.chips button:active,.big:active,.step:active{transform:scale(.96)}
.toggle{display:flex;gap:0;margin-left:8px;flex:0 0 auto}
.toggle button{width:56px;height:52px;background:#1e293b;border:3px solid #334155;font-size:1.3rem;font-weight:900}
.toggle button:first-child{border-radius:14px 0 0 14px}.toggle button:last-child{border-radius:0 14px 14px 0;border-left:0}
.toggle button.on{background:var(--a);border-color:var(--a);color:var(--on,#04120a)}

/* Answer list */
.out{background:#1e293b;border-radius:22px;padding:6px 18px;border:3px solid #334155}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-bottom:2px solid #334155}
.row:last-child{border-bottom:0}
.row span{font-size:1.1rem;font-weight:700;color:#cbd5e1}
.row output{font-size:1.6rem;font-weight:900;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.row.neg output{color:#fca5a5}
.msg{text-align:center;font-size:1.15rem;font-weight:800;color:#fde68a;margin:0;min-height:0}

/* Big buttons */
.big{width:100%;height:68px;border-radius:20px;font-size:1.35rem;font-weight:900;background:#1e293b;border:3px solid #334155}
.big.go{background:var(--a);border-color:var(--a);color:var(--on,#04120a)}
.big.clear{background:transparent;border-color:#ef4444;color:#fca5a5;margin-top:4px}
.pair{display:flex;gap:10px}.pair>*{flex:1}

/* Toast */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom));z-index:20;display:flex;align-items:center;gap:14px;
 background:#f8fafc;color:#0b1220;border-radius:18px;padding:10px 12px 10px 20px;font-weight:900;font-size:1.15rem;box-shadow:0 10px 30px #000a;max-width:92vw}
.toast button{background:#0b1220;color:#fff;border-radius:12px;height:48px;padding:0 18px;font-weight:900}
.toast[hidden],[hidden]{display:none!important}
.foot{text-align:center;color:#475569;font-size:.85rem;margin-top:6px}
@media (min-width:700px){body{font-size:21px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}