/* BETIME terminal — BEQUALITY glass tokens, sharp touch targets and bounded blur. */
:root {
  --paper: #ecf5fc;
  --panel: rgba(255,255,255,.62);
  --panel-solid: rgba(255,255,255,.88);
  --panel-soft: rgba(238,248,251,.82);
  --ink: #15343e;
  --muted: #58727b;
  --line: rgba(173,205,218,.62);
  --teal: #1294aa;
  --teal-dark: #0e7d8f;
  --teal-soft: #d9f0f5;
  --ok: #376347;
  --err: #c84639;
  --shadow: 0 14px 34px rgba(14,56,68,.11), inset 0 1px 0 rgba(255,255,255,.88);
}
html { background: var(--paper); }
body {
  font-family: "Manrope", "Avenir Next", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 5% -12%,rgba(18,148,170,.30),rgba(18,148,170,.12) 30%,transparent 59%),
    radial-gradient(circle at 96% 3%,rgba(67,197,219,.22),rgba(67,197,219,.08) 27%,transparent 56%),
    linear-gradient(125deg,#ecf5fc 0%,#dceff7 48%,#ecf5fc 100%);
  background-attachment: fixed;
  overflow: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.kiosk { grid-template-rows: auto auto auto auto minmax(0,1fr); }
.kiosk-header, .status-panel, .action-panel, .pin-card, .qr-card, .recent-card {
  border: 1px solid rgba(255,255,255,.82);
  background: var(--panel);
  border-radius: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.kiosk-header {
  border-radius: 22px;
  background: linear-gradient(145deg,rgba(255,255,255,.52),rgba(224,248,250,.34));
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}
.brand picture { background: transparent; padding: 5px; border-radius: 13px; }
.brand h1, .panel-title h2 { font-family: "Space Grotesk", "Avenir Next", "Segoe UI", sans-serif; font-weight: 700; letter-spacing: -.025em; }
.brand h1 { font-size: 1.2rem; }
.brand p { color: var(--muted); font-size: .75rem; }
.clock-face strong { color: var(--teal-dark); font-weight: 650; font-variant-numeric: tabular-nums; }
.clock-face span { color: var(--muted); font-weight: 600; }
.header-tools label { color: #3d5963; letter-spacing: .07em; font-size: .63rem; font-weight: 650; }
button, input, select { font-family: inherit; }
input, select { border: 1px solid rgba(167,197,209,.78); background: rgba(255,255,255,.88); border-radius: 12px; color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
input:focus, select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(18,148,170,.14); }
button:disabled { opacity: .45; cursor: not-allowed; }
:where(button,a,input,select):focus-visible { outline: 3px solid rgba(18,148,170,.7); outline-offset: 3px; }
.ghost, .primary { box-shadow: none; border: 1px solid rgba(167,197,209,.82); border-radius: 12px; font-weight: 700; }
.primary { background: var(--teal); border-color: var(--teal-dark); color: #fff; }
.primary:hover { background: var(--teal-dark); }
.ghost { background: rgba(255,255,255,.78); color: #15505d; }
.ghost:hover { background: #fff; }
.ghost:hover, .primary:hover, .action-btn:hover { transform: none; }
.kiosk-header .fullscreen-btn { font-size: .75rem; }
.status-panel { border-left: 4px solid #83bfca; background: rgba(233,248,251,.78); }
.status-panel span { font-size: .64rem; letter-spacing: .12em; font-weight: 750; color: #0e7d8f; }
.status-panel strong { font-weight: 650; font-size: clamp(1.15rem,2vw,1.75rem); letter-spacing: -.03em; }
.status-panel.ok { background: rgba(219,243,210,.82); border-color: rgba(153,190,141,.7); }
.status-panel.error { background: rgba(255,242,240,.9); border-color: rgba(217,77,62,.5); }
.kiosk > div > a { color: #15505d; font-size: .73rem; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.action-panel { padding: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.88); }
.action-btn { background: rgba(255,255,255,.54); border: 1px solid rgba(173,205,218,.62); border-radius: 13px; }
.action-btn span { font-weight: 700; font-size: clamp(.92rem,1.4vw,1.2rem); }
.action-btn small { color: var(--muted); font-weight: 500; font-size: .72rem; }
.action-btn.active { border: 1px solid #82bac7; background: rgba(255,255,255,.88); box-shadow: 0 3px 12px rgba(14,56,68,.08); color: #0e7d8f; }
.panel-title { margin-bottom: 12px; }
.panel-title h2 { color: var(--ink); font-size: 1rem; }
.panel-title p { color: var(--muted); font-size: .68rem; font-weight: 600; }
.pinpad { gap: 8px; }
.pinpad button { border: 1px solid rgba(173,205,218,.62); border-radius: 13px; background: rgba(255,255,255,.72); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); font-weight: 600; font-variant-numeric: tabular-nums; font-size: clamp(1.2rem,2.4vw,1.85rem); }
.pinpad button:hover { background: #fff; border-color: #82bac7; }
.pinpad button[data-key="clear"], .pinpad button[data-key="back"] { color: #58727b; font-size: 1.05rem; background: rgba(226,241,247,.65); }
.pin-dots span { background: #c7dce5; width: 8px; height: 8px; }
.pin-dots span.filled { background: var(--teal); }
#pin-input { background: rgba(255,255,255,.88); border-color: #bdd6e1; }
.recent-events li { border-radius: 12px; border-color: var(--line); background: rgba(255,255,255,.54); font-size: .76rem; }
.recent-events strong { color: #365762; font-weight: 650; }
.recent-events span { color: var(--muted); }
.recent-events li.ok { border-color: #bcd8c0; }
.recent-events li.error { background: rgba(255,242,240,.78); border-color: #e1bdb8; }
@media (max-width: 640px) {
  body { background-attachment: scroll; }
  .kiosk { gap: 10px; padding: 10px; }
  .kiosk-header { padding: 11px; border-radius: 18px; }
  .brand picture { padding: 4px; }
  .kiosk-header .fullscreen-btn { font-size: 0; }
  .status-panel { padding: 15px; min-height: 76px; }
  .status-panel strong { line-height: 1.4; }
  .action-btn span { font-size: .78rem; }
  .pin-card, .qr-card, .recent-card { padding: 16px; }
  .pin-card { min-height: 490px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kiosk-header, .status-panel, .pin-card, .qr-card, .recent-card { background: rgba(247,252,255,.94); }
}
@media (prefers-reduced-transparency: reduce) {
  .kiosk-header, .status-panel, .action-panel, .pin-card, .qr-card, .recent-card { background: #f6fbfe; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }