/* Shared look for every LetMeIn page: tokens, the ambient background, glass panels. */
:root {
  --bg-0: #05080f;
  --glass: rgba(20, 30, 48, 0.62);
  --glass-strong: rgba(22, 34, 54, 0.82);
  --glass-edge: rgba(160, 200, 255, 0.16);
  --glass-hi: rgba(255, 255, 255, 0.08);
  --ink: #eaf2ff;
  --ink-2: #a9b8d0;
  --ink-3: #7385a3;
  --accent: #7cc4ff;
  /* one colour = one table state */
  --free: #8fa3c0;
  --reserved: #4d8dff;
  --seated: #3ddc97;
  --late: #ffb547;
  --radius: 18px;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg-0); overflow: hidden; }
button, input { font: inherit; }

/* ambient room: soft lights behind the glass */
.ambient { position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(40vw 40vw at 12% 20%, rgba(80, 140, 255, 0.18), transparent 70%),
    radial-gradient(35vw 35vw at 88% 15%, rgba(120, 90, 255, 0.12), transparent 70%),
    radial-gradient(50vw 30vw at 70% 95%, rgba(40, 200, 170, 0.10), transparent 70%),
    linear-gradient(180deg, #070b14, #04060b);
}
.ambient::after { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 120px); }

.glass {
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 24px 60px -24px rgba(0, 0, 0, 0.7);
}

/* The app is exactly one screen tall (dvh follows mobile browser bars); nothing inside may push it taller. */