:root {
    --bg: #000000;
    --key: 56px;
    --gap: 10px;
    --key-bg: #1a1a1c;
    --key-bg-press: #34343a;
    --key-border: rgba(255,255,255,0.05);
    --red: #f4634f;
    --red-press: #ff7a68;
    --green: #19a06b;
    --green-bright: #22c281;
    --green-press: #1fbd7c;
    --op-bg: #20413a;
    --op-press: #2a564b;
    --text: #ffffff;
    --muted: #84848c;
    --dim: #4a4a50;
    --box-bg: #131315;
    --box-fill: #18181b;
    --box-active: rgba(25,160,107,0.10);
    --ring: #19a06b;
    --line: rgba(255,255,255,0.07);
    --font: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow: hidden;
    overscroll-behavior: none;
}
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; border: none; background: none; cursor: pointer; }

.app {
    width: 100%;
    max-width: 432px;
    height: 100svh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding:
        max(10px, env(safe-area-inset-top))
        max(18px, env(safe-area-inset-right))
        max(16px, env(safe-area-inset-bottom))
        max(18px, env(safe-area-inset-left));
    overflow: hidden;
}

/* ---------- Topbar ---------- */
.topbar {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between;
    min-height: 30px;
    padding: 0 2px;
}
.app-title {
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: #b6b6bd;
}
.ac-btn {
    width: 34px; height: 30px;
    display: grid; place-items: center;
    border-radius: 9px;
    color: var(--muted);
    background: var(--key-bg);
    border: 1px solid var(--key-border);
    transition: color 140ms, background 140ms;
}
.ac-btn:active { color: var(--red); background: rgba(244,99,79,0.12); }
.ac-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Board ---------- */
.board {
    flex: 1 1 auto;
    min-height: 0;
    display: flex; flex-direction: column;
    justify-content: center;
    gap: clamp(10px, 2vh, 18px);
    padding: clamp(8px, 2vh, 20px) 2px;
}
.line {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 12px;
}
.line-label {
    font-size: clamp(15px, 2.4vh, 19px);
    font-weight: 600; letter-spacing: -0.01em;
    color: #d6d6db;
    white-space: nowrap;
}
.gg-line { gap: 9px; }
.gg-line .line-label { font-size: clamp(14px, 2.2vh, 18px); }
.dash { color: var(--muted); font-size: 18px; padding: 0 1px; }

/* boxes (editable) */
.box {
    display: flex; align-items: center; justify-content: flex-end;
    height: clamp(46px, 6.4vh, 58px);
    min-width: 86px;
    padding: 0 16px;
    background: var(--box-bg);
    border: 2px solid rgba(255,255,255,0.12);
    border-radius: 13px;
    transition: border-color 160ms, background 160ms, box-shadow 160ms;
    overflow: hidden;
}
.gg-line .box { min-width: 66px; flex: 1 1 0; }
.line.result-line .box { min-width: 120px; }
.box-val {
    font-size: clamp(18px, 2.9vh, 24px); font-weight: 600;
    letter-spacing: -0.02em; color: #fff;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.box-val.empty { color: rgba(255,255,255,0.22); font-weight: 400; }
.box.active {
    border-color: var(--ring);
    background: var(--box-active);
    box-shadow: 0 0 0 3px rgba(25,160,107,0.14);
}

/* result boxes (read-only) */
.box-result {
    cursor: default;
    font-size: clamp(15px, 2.5vh, 20px); font-weight: 700;
    letter-spacing: -0.01em; color: #e7e7ea;
    font-variant-numeric: tabular-nums;
    border-style: solid; border-color: rgba(255,255,255,0.10);
    background: var(--box-fill);
}
.box-money { color: var(--green-bright); }
.box-money.zero { color: #e7e7ea; }

/* price reset button */
.reset-price {
    flex: 0 0 auto;
    width: 38px; height: clamp(46px, 6.4vh, 58px);
    display: grid; place-items: center;
    border-radius: 12px;
    color: var(--muted);
    background: #111113;
    border: 1px solid rgba(255,255,255,0.06);
    transition: color 140ms, background 140ms, border-color 140ms;
}
.reset-price:active { color: var(--green-bright); background: rgba(25,160,107,0.10); border-color: rgba(25,160,107,0.3); }
.reset-price svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Keypad ---------- */
.keypad {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--gap);
    align-content: end;
    padding-top: clamp(6px, 1.4vh, 12px);
}
.key {
    height: var(--key);
    border-radius: 14px;
    background: var(--key-bg);
    border: 1px solid var(--key-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
    color: var(--text);
    font-size: clamp(18px, 3.4vh, 24px); font-weight: 500;
    display: grid; place-items: center;
    user-select: none; -webkit-user-select: none;
    transition: transform 110ms cubic-bezier(.34,1.56,.64,1), background 120ms ease;
}
.key:active, .key.pressed { transform: scale(0.92); background: var(--key-bg-press); }
.key.span3 { grid-column: span 3; }
.key.util { font-size: clamp(13px, 2.3vh, 16px); font-weight: 700; height: clamp(40px, 5vh, 48px); color: var(--muted); }
.key.util.red:active, .key.util.red.pressed { color: var(--red-press); background: rgba(244,99,79,0.14); }
.key.util svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.key.op {
    background: var(--op-bg); color: var(--green-bright);
    border-color: rgba(34,194,129,0.18); font-weight: 600;
}
.key.op:active, .key.op.pressed { background: var(--op-press); }
.key.eq {
    background: var(--green); border-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 4px 18px rgba(25,160,107,0.32);
    color: #fff; font-weight: 700;
}
.key.eq:active, .key.eq.pressed { background: var(--green-press); transform: scale(0.92); }

/* ---------- Toast ---------- */
.toast {
    position: absolute;
    left: 50%; bottom: max(20px, env(safe-area-inset-bottom));
    transform: translate(-50%, 14px);
    max-width: calc(100% - 40px);
    background: #fff; color: #111;
    padding: 11px 18px; border-radius: 13px;
    font-size: 13px; font-weight: 700;
    opacity: 0; pointer-events: none;
    transition: opacity 180ms, transform 180ms;
    white-space: nowrap; z-index: 50;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

.box.pop { animation: pop 260ms cubic-bezier(.34,1.56,.64,1); }
@keyframes pop { 0% { transform: scale(.97) } 60% { transform: scale(1.02) } 100% { transform: scale(1) } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}