/* Marazul staff and waiter sign-in pages. Self-contained: no vendor stylesheet loads here. */
:root {
  --lg-ink: #18181B; --lg-ink2: #3F3F46; --lg-muted: #71717A; --lg-faint: #A1A1AA; --lg-line: #E4E4E7; --lg-soft: #F4F4F5;
  --lg-pri: #16A34A; --lg-pri-d: #15803D; --lg-ring: rgba(22, 163, 74, .18);
  --lg-danger: #991B1B; --lg-danger-soft: #FEF2F2; --lg-danger-line: #FECACA; --lg-ok: #166534; --lg-ok-soft: #F0FDF4; --lg-ok-line: #BBF7D0;
  --lg-display: "Bricolage Grotesque", "Geist", system-ui, sans-serif;
  --lg-body: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body.lg-body { margin: 0; background: #fff; color: var(--lg-ink); font: 15px/1.55 var(--lg-body); }

.lg { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }
.lg-brand { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 40px 44px; color: #fff; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(8, 51, 68, .05) 0%, rgba(8, 51, 68, .55) 58%, rgba(8, 51, 68, .94) 100%),
    radial-gradient(120% 70% at 72% 34%, #F7B955 0%, #E8930C 22%, rgba(14, 116, 144, 0) 55%),
    linear-gradient(180deg, #2B6E86 0%, #0E7490 45%, #0B4F63 62%, #083344 100%); }
.lg-brand::after { content: ""; position: absolute; left: 0; right: 0; top: 56%; height: 18%; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .10) 0 2px, transparent 2px 9px); pointer-events: none; }
.lg-brand > * { position: relative; z-index: 1; }
.lg-mark { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font: 800 24px/1 var(--lg-display); letter-spacing: -.01em; }
.lg-mark img { display: block; max-height: 48px; width: auto; }
.lg-mark i { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(150deg, #22A3C3, #0E7490); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.lg-brand h2 { margin: 0 0 10px; max-width: 12ch; font: 800 clamp(34px, 4.2vw, 48px)/1.03 var(--lg-display); letter-spacing: -.02em; }
.lg-brand p { margin: 0; max-width: 36ch; color: #E6F1F4; }
.lg-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; font-size: 13px; color: #CFE3E9; }
.lg-meta a { color: #fff; text-decoration: none; font-weight: 600; }
.lg-meta a:hover { text-decoration: underline; }

.lg-side { display: flex; align-items: center; justify-content: center; padding: 40px 32px; }
.lg-form { width: 100%; max-width: 370px; }
.lg-form h1 { margin: 0 0 4px; font: 800 30px/1.1 var(--lg-display); letter-spacing: -.015em; }
.lg-hint { margin: 0 0 22px; font-size: 14px; color: var(--lg-muted); }
.lg-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-bottom: 18px; padding: 3px; border: 1px solid var(--lg-line); border-radius: 9px; background: var(--lg-soft); }
.lg-mode button { padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--lg-ink2); font: 500 14px var(--lg-body); cursor: pointer; }
.lg-mode button[aria-pressed="true"] { background: #fff; color: var(--lg-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.lg-alert { margin-bottom: 14px; padding: 10px 12px; border-radius: 8px; font-size: 14px; }
.lg-alert.is-error { background: var(--lg-danger-soft); color: var(--lg-danger); border: 1px solid var(--lg-danger-line); }
.lg-alert.is-ok { background: var(--lg-ok-soft); color: var(--lg-ok); border: 1px solid var(--lg-ok-line); }
.lg-field { margin-bottom: 14px; }
.lg-field label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 500; color: var(--lg-ink2); }
.lg-in { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--lg-line); border-radius: 8px; background: #fff; color: var(--lg-ink); font: 15px var(--lg-body); }
.lg-in:focus { outline: none; border-color: var(--lg-pri); box-shadow: 0 0 0 3px var(--lg-ring); }
.lg-in.is-bad { border-color: #F87171; }
.lg-pw { position: relative; }
.lg-pw .lg-in { padding-right: 46px; }
.lg-pw button { position: absolute; top: 5px; right: 5px; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 6px; background: transparent; color: var(--lg-muted); cursor: pointer; }
.lg-pw button:hover { background: var(--lg-soft); color: var(--lg-ink); }
.lg-pw svg { width: 18px; height: 18px; }
.lg-row { display: flex; justify-content: flex-end; margin: -4px 0 16px; }
.lg-row a { font-size: 13.5px; font-weight: 500; color: var(--lg-pri-d); text-decoration: none; }
.lg-row a:hover { text-decoration: underline; }
.lg-center { justify-content: center; margin-top: 16px; }
.lg-btn { width: 100%; height: 46px; border: 0; border-radius: 8px; background: var(--lg-pri); color: #fff; font: 600 15px var(--lg-body); cursor: pointer; }
.lg-btn:hover { background: var(--lg-pri-d); }
.lg-mode button:focus-visible, .lg-btn:focus-visible, .lg-keypad button:focus-visible, .lg-pw button:focus-visible, .lg-row a:focus-visible, .lg-meta a:focus-visible, .lg-mark:focus-visible { outline: 2px solid var(--lg-pri); outline-offset: 2px; }

.lg-pin-boxes { display: grid; grid-template-columns: repeat(4, 58px); justify-content: center; gap: 10px; margin: 6px 0 16px; }
.lg-pin-boxes span { display: flex; align-items: center; justify-content: center; height: 62px; border: 1px solid var(--lg-line); border-radius: 10px; background: #fff; font: 700 28px var(--lg-body); }
.lg-pin-boxes span.is-next { border-color: var(--lg-pri); box-shadow: 0 0 0 3px var(--lg-ring); }
.lg-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lg-keypad button { height: 56px; border: 1px solid var(--lg-line); border-radius: 10px; background: #fff; color: var(--lg-ink); font: 600 21px var(--lg-body); cursor: pointer; touch-action: manipulation; }
.lg-keypad button:hover { background: var(--lg-soft); }
.lg-keypad button:active { background: var(--lg-line); }
.lg-keypad .is-ghost { border-color: transparent; background: transparent; color: var(--lg-muted); font-size: 14px; font-weight: 500; }
.lg-note { margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--lg-muted); }
.lg-busy { margin: 10px 0 0; text-align: center; font-size: 14px; font-weight: 600; color: var(--lg-pri-d); }
.lg-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; font-size: 12.5px; color: var(--lg-faint); }

@media (max-width: 860px) {
  .lg { grid-template-columns: 1fr; min-height: 0; }
  .lg-brand { gap: 14px; padding: 22px 20px 24px; }
  .lg-brand h2 { font-size: 30px; margin-bottom: 4px; }
  .lg-brand p { font-size: 14px; }
  .lg-brand::after { top: 40%; height: 30%; }
  .lg-side { align-items: flex-start; padding: 26px 20px 32px; }
  .lg-keypad button { height: 60px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }