:root {
  color-scheme: dark;
  --bg: #000;
  --text: #f5f5f5;
  --muted: rgba(255,255,255,.66);
  --key: #333336;
  --utility: #a7a7aa;
  --operator: #f19a20;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; width:100%; height:100%; background:#000; overflow:hidden; font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body { overscroll-behavior:none; touch-action:manipulation; }
button { font: inherit; border:0; color:inherit; }
#app, .view { position:fixed; inset:0; }
.view { display:none; background:#000; }
.view.active { display:block; }

#scannerView { background:#050505; }
#camera { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.scannerTop { position:absolute; top:max(20px,env(safe-area-inset-top)); left:22px; display:flex; align-items:center; gap:9px; color:#fff; font-size:14px; text-shadow:0 1px 3px #000; }
.statusDot { width:8px; height:8px; border-radius:50%; background:#e0a126; box-shadow:0 0 10px currentColor; }
.statusDot.ready { background:#46d56e; }.statusDot.error { background:#e45656; }
.scannerBottom { position:absolute; bottom:max(26px,env(safe-area-inset-bottom)); left:20px; right:20px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.lastRead { min-height:24px; padding:8px 12px; border-radius:12px; color:#fff; background:rgba(0,0,0,.58); backdrop-filter:blur(12px); font-size:14px; text-align:center; }
.startButton { padding:13px 24px; border-radius:999px; background:#fff; color:#111; font-weight:650; display:none; }
.startButton.visible { display:block; }

.calculatorView { padding:0 15px max(16px,env(safe-area-inset-bottom)); user-select:none; -webkit-user-select:none; }
.calcTopSpacer { height:calc(max(18px, env(safe-area-inset-top)) + 9vh); }
.displayWrap { height:25vh; min-height:150px; display:flex; align-items:flex-end; justify-content:flex-end; padding:0 12px 22px; overflow:hidden; touch-action:none; }
.display { width:100%; color:#fff; text-align:right; white-space:nowrap; font-size:clamp(46px, 18vw, 82px); line-height:1; font-weight:300; letter-spacing:-.045em; overflow:hidden; text-overflow:clip; }
.keypad { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; width:min(100%,520px); margin:0 auto; }
.key { aspect-ratio:1/1; border-radius:50%; background:var(--key); display:flex; justify-content:center; align-items:center; font-size:clamp(27px,7vw,38px); font-weight:400; cursor:pointer; }
.key:active { filter:brightness(1.45); }
.key.utility { background:var(--utility); color:#090909; }
.key.operator { background:var(--operator); color:#fff; font-size:clamp(31px,8vw,42px); }
.key.zero { grid-column:span 2; aspect-ratio:auto; border-radius:999px; justify-content:flex-start; padding-left:calc((100% - 10px)/4.2); }
.peekBubble { position:absolute; z-index:20; top:max(22px,env(safe-area-inset-top)); right:18px; max-width:72vw; padding:9px 13px; border-radius:16px; background:rgba(38,38,41,.93); color:#fff; font-size:15px; font-weight:650; box-shadow:0 8px 32px rgba(0,0,0,.36); opacity:0; transform:translateY(-5px) scale(.96); transition:opacity .08s linear,transform .08s linear; pointer-events:none; }
.peekBubble.visible { opacity:1; transform:none; }

@media (min-width:700px) {
  .calculatorView { padding-left:calc((100vw - 520px)/2); padding-right:calc((100vw - 520px)/2); }
  .displayWrap { width:520px; margin:0 auto; }
}