/* ============================================================
   GoPass Terminal — Reset, Body & Kiosk Frame
   ============================================================ */

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Body ── */
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: #1A1A24;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
}

/* ── Kiosk Device Frame ──
   Internal coordinates stay locked to 610×1080 (every screen is tuned for
   that). On smaller viewports js/main.js fitKiosk() scales the rendered
   frame down to fit and adjusts margins so layout collapses around the
   scaled size. transform-origin is set inline by JS. */
.kiosk-device {
  width: 610px;
  min-height: 1080px;
  border-radius: 32px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 40px 100px rgba(0,0,0,0.5),
    0 12px 32px rgba(0,0,0,0.35);
  position: relative;
  flex-shrink: 0;
}

/* ── Screen container ── */
/* Each page has only one screen — always visible, no toggling needed */
.screen {
  display: flex;
  width: 610px;
  min-height: 1080px;
  background: var(--bg-page);
  flex-direction: column;
}