:root {
    --room: #1d2026;
    --metal-1: #d9dde3;
    --metal-2: #a9b0ba;
    --metal-3: #6f7782;
    --body: #2b3240;
    --body-hi: #3a4356;
    --accent: #12b886;
    --accent-dark: #087f5b;
    --screen-bg: #0b2a4a;
    --screen-bg-2: #0e3a66;
    --screen-fg: #e7f5ff;
    --screen-dim: #8fb8de;
    --warn: #ffd43b;
    --danger: #fa5252;
    --tech-bg: #f8f9fa;
    --tech-fg: #212529;
    --tech-border: #dee2e6;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background: radial-gradient(ellipse at top, #343a46 0%, var(--room) 70%);
    font-family: Inter, system-ui, sans-serif;
    color: var(--screen-fg);
}

.layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px;
    flex-wrap: wrap;
}

/* ---------- ATM chassis ---------- */
.atm {
    width: min(720px, 100%);
    background: linear-gradient(180deg, var(--body-hi), var(--body) 30%, #222836);
    border-radius: 18px 18px 6px 6px;
    padding: 0 22px 0;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .15);
}

.atm-topper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 -22px;
    padding: 14px 26px;
    background: linear-gradient(90deg, var(--accent-dark), var(--accent));
    border-radius: 18px 18px 0 0;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25);
}

.brand { font-weight: 800; font-size: 26px; letter-spacing: .5px; display: flex; align-items: center; gap: 10px; }
.brand small { font-weight: 600; font-size: 11px; letter-spacing: 3px; opacity: .8; margin-left: 6px; }
.brand-mark {
    display: inline-grid; place-items: center;
    width: 34px; height: 34px; border-radius: 9px;
    background: #fff; color: var(--accent-dark); font-size: 22px;
}
.vendor-plate {
    font: 700 12px var(--mono); letter-spacing: 4px;
    padding: 4px 10px; border-radius: 4px;
    background: linear-gradient(var(--metal-1), var(--metal-2)); color: #333;
}

.atm-face {
    display: grid;
    grid-template-columns: 54px 1fr 54px;
    gap: 10px;
    align-items: center;
    padding: 26px 0 18px;
}

.softkeys { display: flex; flex-direction: column; gap: 22px; padding: 30px 0; }
.softkey {
    height: 40px; border-radius: 6px; border: 0; cursor: pointer;
    background: linear-gradient(var(--metal-1), var(--metal-2));
    box-shadow: 0 3px 0 var(--metal-3), inset 0 1px 0 #fff;
    position: relative;
}
.softkey:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--metal-3); }
.softkeys.left .softkey::after, .softkeys.right .softkey::after {
    content: ""; position: absolute; top: 50%; width: 10px; height: 2px; background: var(--metal-3);
}
.softkeys.left .softkey::after { right: -12px; }
.softkeys.right .softkey::after { left: -12px; }

.screen-bezel {
    background: #0d0f14;
    padding: 18px;
    border-radius: 12px;
    box-shadow: inset 0 0 0 3px #3b4252, inset 0 6px 18px rgba(0, 0, 0, .8);
    position: relative;
}
.camera {
    position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
    width: 10px; height: 10px; border-radius: 50%; background: #222; box-shadow: 0 0 0 2px #333;
}
.camera span { display: block; width: 4px; height: 4px; margin: 3px; border-radius: 50%; background: #444; }
.camera.recording span { background: var(--danger); box-shadow: 0 0 6px var(--danger); }

.screen {
    aspect-ratio: 4 / 3;
    background: linear-gradient(160deg, var(--screen-bg-2), var(--screen-bg));
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    font-size: 15px;
    text-shadow: 0 0 1px rgba(255, 255, 255, .3);
}
.screen::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px);
}

.screen-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 14px; font-size: 12px; color: var(--screen-dim);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.screen-main { display: grid; grid-template-columns: auto 1fr auto; min-height: 0; }
.screen-body { padding: 12px 14px; display: flex; flex-direction: column; min-width: 0; }

.screen h1 { font-size: 26px; margin: 4px 0 6px; font-weight: 800; }
.screen h2 { font-size: 20px; margin: 4px 0 6px; font-weight: 700; }
.screen p { margin: 4px 0; color: var(--screen-dim); }
.screen .big { font: 400 56px VT323, var(--mono); color: #fff; line-height: 1; }
.screen .warn { color: var(--warn); }
.screen .error { color: #ffa8a8; }
.screen .center { text-align: center; align-items: center; justify-content: center; flex: 1; display: flex; flex-direction: column; }

/* soft-key labels aligned to the physical buttons */
.sk-col { display: flex; flex-direction: column; justify-content: center; gap: 28px; padding-bottom: 30px; }
.sk-col.right { align-items: flex-end; }
.sk-label {
    height: 34px; display: flex; align-items: center; padding: 0 12px; white-space: nowrap;
    font-weight: 700; font-size: 13px; color: #fff;
}
.sk-label:empty { padding: 0; }
.sk-label:not(:empty) { background: rgba(18, 184, 134, .85); }
.sk-col.left .sk-label:not(:empty) { border-radius: 0 20px 20px 0; }
.sk-col.right .sk-label:not(:empty) { border-radius: 20px 0 0 20px; }
.sk-col.left .sk-label:not(:empty)::before { content: "◀"; font-size: 10px; margin-right: 8px; }
.sk-col.right .sk-label:not(:empty)::after { content: "▶"; font-size: 10px; margin-left: 8px; }

.qr-wrap { display: flex; gap: 18px; align-items: center; justify-content: center; flex: 1; }
.qr { background: #fff; padding: 8px; border-radius: 8px; width: 170px; height: 170px; }
.qr svg { width: 100%; height: 100%; display: block; }
.code { font: 400 44px VT323, var(--mono); letter-spacing: 6px; color: #fff; }
.countdown { font: 400 22px VT323, var(--mono); color: var(--warn); }

.spinner {
    width: 54px; height: 54px; border-radius: 50%; margin: 10px auto;
    border: 5px solid rgba(255, 255, 255, .15); border-top-color: var(--accent);
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.amount-entry { font: 400 64px VT323, var(--mono); color: #fff; border-bottom: 2px solid var(--accent); padding: 0 10px; min-width: 220px; text-align: right; }
.limits { display: grid; grid-template-columns: auto auto; gap: 2px 16px; font-size: 13px; color: var(--screen-dim); }
.limits b { color: #fff; text-align: right; }

.face-frame {
    width: 120px; height: 150px; border-radius: 50%;
    border: 3px dashed var(--accent); margin: 8px auto; position: relative;
}
.face-frame.flash { animation: flash .4s; }
@keyframes flash { 0% { box-shadow: 0 0 0 999px rgba(255, 255, 255, .9); } 100% { box-shadow: none; } }

.progress { height: 10px; background: rgba(255, 255, 255, .1); border-radius: 5px; overflow: hidden; width: 70%; margin: 10px auto; }
.progress > div { height: 100%; background: var(--accent); width: 0; transition: width .3s; }

/* ---------- deck: scanner, keypad, acceptor ---------- */
.atm-deck {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 18px;
    padding: 18px;
    margin: 0 -8px;
    background: linear-gradient(#3a4252, #2c3341);
    border-radius: 10px;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), 0 6px 0 #1a1f29;
}
.deck-col { display: flex; flex-direction: column; gap: 6px; }
.slot-label { font: 700 10px var(--mono); letter-spacing: 2px; color: var(--metal-2); }

.keypad { display: grid; grid-template-columns: repeat(3, 52px) 86px; gap: 8px; padding: 10px; background: #1b1f27; border-radius: 8px; }
.keypad button {
    height: 44px; border: 0; border-radius: 6px; cursor: pointer;
    font: 700 18px Inter, sans-serif; color: #222;
    background: linear-gradient(var(--metal-1), var(--metal-2));
    box-shadow: 0 3px 0 var(--metal-3);
}
.keypad button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--metal-3); }
.keypad .fn { font-size: 12px; letter-spacing: 1px; color: #fff; }
.keypad .cancel { background: linear-gradient(#ff6b6b, #e03131); box-shadow: 0 3px 0 #a51111; }
.keypad .clear { background: linear-gradient(#ffe066, #fab005); box-shadow: 0 3px 0 #b07b00; color: #333; }
.keypad .enter { background: linear-gradient(#51cf66, #2f9e44); box-shadow: 0 3px 0 #1b6e2c; }
.keypad .blank { background: transparent; box-shadow: none; cursor: default; }

.id-scanner {
    height: 54px; border-radius: 6px; background: #111; position: relative; overflow: hidden;
    box-shadow: inset 0 0 0 2px #444;
}
.id-scanner .scan-light { position: absolute; top: 0; bottom: 0; width: 8px; left: -10px; background: #74c0fc; box-shadow: 0 0 14px #74c0fc; }
.id-scanner.scanning .scan-light { animation: scan 1.2s ease-in-out infinite alternate; }
.id-scanner.has-card::before {
    content: "ID"; position: absolute; inset: 8px 20px; border-radius: 4px;
    background: linear-gradient(135deg, #e7f5ff, #a5d8ff); color: #1864ab;
    font: 800 12px Inter; display: grid; place-items: center;
}
@keyframes scan { from { left: -10px; } to { left: 100%; } }

.printer { position: relative; height: 84px; }
.printer-mouth { height: 10px; border-radius: 5px; background: #0b0d12; box-shadow: inset 0 2px 3px #000; }
.receipt {
    position: absolute; top: 5px; left: 10%; width: 80%; max-height: 0; overflow: hidden;
    background: #fffdf5; color: #222; font: 11px/1.35 var(--mono);
    transition: max-height 1.6s steps(24); cursor: pointer; z-index: 3;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .4);
}
.receipt.printed { max-height: 420px; padding: 8px 10px; }
.receipt hr { border: 0; border-top: 1px dashed #999; }

.acceptor { display: flex; flex-direction: column; gap: 8px; }
.acceptor-mouth {
    height: 22px; border-radius: 4px; background: #0b0d12; box-shadow: inset 0 3px 4px #000;
    display: flex; align-items: center; justify-content: flex-end; padding-right: 8px;
}
.bill-tray { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; opacity: .35; pointer-events: none; transition: opacity .2s; }
.bill-tray.enabled { opacity: 1; pointer-events: auto; }
.bill {
    height: 34px; border: 0; border-radius: 3px; cursor: grab; font: 800 13px Inter; color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .4); text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
.bill.b20 { background: linear-gradient(135deg, #e8590c, #d9480f); }
.bill.b50 { background: linear-gradient(135deg, #37b24d, #2b8a3e); }
.bill.b100 { background: linear-gradient(135deg, #f59f00, #e67700); }
.bill.b200 { background: linear-gradient(135deg, #4263eb, #364fc7); }
.bill.inserting { animation: insert .5s ease-in forwards; }
@keyframes insert { to { transform: translateY(-40px) scaleY(.2); opacity: 0; } }

.led { width: 10px; height: 10px; border-radius: 50%; background: #333; }
.led.on { background: #51cf66; box-shadow: 0 0 8px #51cf66; animation: blink 1s infinite; }
.led.err { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
@keyframes blink { 50% { opacity: .35; } }

.dispenser-wrap { padding: 16px 70px 10px; }
.dispenser {
    height: 46px; border-radius: 6px; position: relative;
    background: linear-gradient(#0b0d12, #1a1e27); box-shadow: inset 0 4px 8px #000, 0 0 0 3px var(--metal-3);
    display: flex; align-items: center; padding-left: 10px;
}
.dispensed { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; gap: 2px; }
.dispensed .note {
    width: 18px; height: 70px; border-radius: 2px; cursor: pointer;
    animation: dispense .35s ease-out backwards; box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}
@keyframes dispense { from { transform: translateY(60px); opacity: 0; } }

.atm-plinth {
    margin: 0 -22px; height: 22px; border-radius: 0 0 6px 6px;
    background: linear-gradient(#1a1f29, #12151c);
    font: 10px var(--mono); color: var(--metal-3); text-align: center; line-height: 22px;
}

/* ---------- technician panel ---------- */
.tech {
    width: min(380px, 100%);
    background: var(--tech-bg); color: var(--tech-fg);
    border-radius: 10px; padding: 16px 18px; font-size: 13px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}
.tech h2 { margin: 0 0 10px; font-size: 16px; }
.tech h3 { margin: 16px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #495057; }
.tech h3 small { text-transform: none; letter-spacing: 0; font-weight: 400; color: #868e96; }
.tech label { display: block; margin: 6px 0; }
.tech label.check { display: flex; gap: 6px; align-items: center; }
.tech select { width: 100%; margin-top: 4px; padding: 5px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; }
.kv dt { color: #868e96; }
.kv dd { margin: 0; font-family: var(--mono); font-size: 12px; word-break: break-all; }
.log { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; border: 1px solid var(--tech-border); border-radius: 6px; background: #fff; }
.log li { padding: 6px 8px; border-bottom: 1px solid var(--tech-border); font: 11px/1.4 var(--mono); }
.log li:last-child { border-bottom: 0; }
.log .meta { display: flex; justify-content: space-between; color: #868e96; }
.log .ok { color: #2b8a3e; font-weight: 700; }
.log .bad { color: #c92a2a; font-weight: 700; }
.log pre { margin: 4px 0 0; white-space: pre-wrap; word-break: break-all; color: #343a40; }
.buyer { display: flex; flex-direction: column; gap: 6px; }
.copy-row { display: grid; grid-template-columns: 96px 1fr auto; gap: 8px; align-items: center; }
.copy-row span { color: #868e96; }
.copy-row code { font: 12px var(--mono); background: #fff; border: 1px solid var(--tech-border); border-radius: 4px; padding: 3px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy { font: 600 11px Inter, sans-serif; padding: 4px 10px; border-radius: 4px; border: 1px solid #1c7ed6; background: #e7f5ff; color: #1864ab; cursor: pointer; }
.copy:disabled { opacity: .4; cursor: default; }
.copy.done { background: #d3f9d8; border-color: #2f9e44; color: #2b8a3e; }
.copy.wide { padding: 6px; }
.hint { margin: 2px 0 0; color: #868e96; font-size: 11px; }
.link { background: none; border: 0; color: #1c7ed6; cursor: pointer; font-size: 11px; padding: 0; }

@media (max-width: 640px) {
    .atm { padding: 0 10px; }
    .atm-face { grid-template-columns: 34px 1fr 34px; gap: 6px; }
    .atm-deck { grid-template-columns: 1fr; }
    .keypad { justify-self: center; }
    .dispenser-wrap { padding: 16px 20px 10px; }
    .screen h1 { font-size: 20px; }
    .qr { width: 120px; height: 120px; }
}