/* Кудрявый Банк — банкомат на планшете (режим киоска).
   Всё крупное: экран смотрят стоя, с расстояния вытянутой руки. */
*,*::before,*::after { box-sizing: border-box; }
[hidden] { display: none !important; }

:root {
  --bg: #0b1020; --bg-elev: #141d36; --fg: #f2f5fb; --fg-muted: #93a0bd;
  --accent: #1f63d2; --accent-2: #18a3e2; --line: #22304f;
  --danger: #ff5252; --ok: #4ade80; --warn: #ffb020;
  --radius: 18px;
}

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #16234a 0%, var(--bg) 60%);
  color: var(--fg);
  font: 20px/1.4 -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.atm-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 26px; border-bottom: 1px solid var(--line);
  background: rgba(10,15,32,.7);
}
.brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 22px; }
.logo {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-size: 24px;
}
.atm-top-right { display: flex; align-items: center; gap: 14px; }
.atm-status { color: var(--fg-muted); font-size: 16px; }
.icon-btn {
  background: transparent; border: 1px solid var(--line); color: var(--fg);
  border-radius: 10px; padding: 6px 12px; font-size: 20px;
}

/* ---------- экраны ---------- */
.screens { height: calc(100% - 71px); position: relative; }
.screen {
  position: absolute; inset: 0; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 28px; text-align: center;
  animation: fade .18s ease-out;
}
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

h1 { font-size: 34px; margin: 0; font-weight: 800; letter-spacing: -.02em; }
.huge { font-size: clamp(38px, 6vw, 72px); line-height: 1.05; }
.lead { font-size: 24px; margin: 0; color: var(--fg); }
.muted { color: var(--fg-muted); font-size: 18px; margin: 0; }
.error { color: var(--danger); font-size: 20px; margin: 0; font-weight: 600; }
.danger { color: var(--danger); }

/* Экраны с громким оповещением: пульсирующая рамка вместо мигания всего фона. */
.screen.alarm { box-shadow: inset 0 0 0 10px var(--danger); animation: pulse 1.1s infinite; }
.screen.alarm .call { color: var(--warn); }
@keyframes pulse {
  0%, 100% { box-shadow: inset 0 0 0 10px rgba(255,82,82,.9); }
  50%      { box-shadow: inset 0 0 0 10px rgba(255,82,82,.15); }
}
@media (prefers-reduced-motion: reduce) {
  .screen, .screen.alarm { animation: none; }
}

/* ---------- QR ---------- */
.qr-box {
  background: #fff; padding: 20px; border-radius: 24px;
  box-shadow: 0 12px 50px rgba(24,163,226,.25);
}
.qr-box.small { padding: 14px; }
.qr-box.tiny  { padding: 10px; border-radius: 16px; box-shadow: none; }

/* Служебное меню */
.service-hint { display: flex; align-items: center; gap: 20px; margin-top: 10px; }
.service-hint .muted { text-align: left; }
.service-state {
  font-size: 24px; font-weight: 700; padding: 14px 28px;
  border-radius: 14px; background: var(--bg-elev); border: 1px solid var(--line);
}
.service-state.off { color: var(--danger); border-color: var(--danger); }
.service-state.on  { color: var(--ok); }
.btn.danger-btn { color: var(--danger); border-color: var(--danger); }
.qr-canvas img, .qr-canvas canvas { display: block; }

/* ---------- кнопки ---------- */
.btn {
  font: inherit; color: var(--fg); cursor: pointer;
  padding: 16px 28px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--bg-elev);
}
.btn.big { font-size: 26px; padding: 22px 40px; min-width: 220px; font-weight: 700; }
.btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border: 0; color: #fff; }
.btn.accent  { background: linear-gradient(135deg, #16a34a, #4ade80); border: 0; color: #06240f; }
.btn.ghost   { background: transparent; }
.btn:active  { transform: scale(.97); }
.btn[disabled] { opacity: .5; }
.btn.reveal { font-size: 20px; padding: 12px 24px; }
.actions { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }

/* ---------- счета ---------- */
.acc-list { display: flex; flex-direction: column; gap: 12px; width: min(760px, 100%); }
.acc {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 24px; border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--bg-elev); text-align: left;
}
.acc-title { font-size: 22px; font-weight: 700; }
.acc-sub { color: var(--fg-muted); font-size: 16px; }
.acc-balance { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.acc-list.picker .acc { cursor: pointer; }
.acc-list.picker .acc.selected { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(24,163,226,.25); }

/* ---------- ПИН и суммы ---------- */
.pin-dots { display: flex; gap: 18px; }
.pin-dots i {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--fg-muted); display: block;
}
.pin-dots i.filled { background: var(--accent-2); border-color: var(--accent-2); }

.amount-display {
  font-size: 56px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 40px; min-width: 320px;
}
.amount-display small { font-size: 22px; color: var(--fg-muted); font-weight: 600; }

.keypad {
  display: grid; grid-template-columns: repeat(3, 110px); gap: 12px;
}
.key {
  font: inherit; color: var(--fg); cursor: pointer;
  height: 84px; font-size: 32px; font-weight: 700;
  border-radius: 16px; border: 1px solid var(--line); background: var(--bg-elev);
}
.key:active { transform: scale(.95); background: color-mix(in srgb, var(--bg-elev) 70%, var(--accent) 30%); }
.key.wide { grid-column: span 1; font-size: 24px; }

.quick-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.quick-row .btn { padding: 12px 20px; font-size: 20px; }

.done-icon {
  width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center;
  font-size: 64px; background: rgba(74,222,128,.15); color: var(--ok);
}

.pair-code {
  font-size: clamp(48px, 11vw, 120px); font-weight: 800; letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 20px;
  padding: 18px 40px;
}

.atm-toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%);
  background: var(--danger); color: #fff; font-size: 24px; font-weight: 700;
  padding: 18px 32px; border-radius: 16px; z-index: 50;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}

/* HID-считыватель печатает «как клавиатура» — поле держим вне поля зрения. */
.hid-input { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }

/* Планшеты в портретной ориентации / небольшие экраны. */
@media (max-height: 800px) {
  .huge { font-size: clamp(30px, 5vw, 48px); }
  .amount-display { font-size: 40px; padding: 8px 28px; }
  .key { height: 64px; font-size: 26px; }
  .keypad { grid-template-columns: repeat(3, 92px); }
  .btn.big { font-size: 22px; padding: 16px 28px; min-width: 180px; }
  .screen { gap: 12px; }
}