:root {
  --navy-900: #061424;
  --navy-800: #08192E;
  --navy-700: #0B2340;
  --navy-600: #123A63;
  --gold: #C8A24A;
  --gold-light: #E3C578;
  --cream: #F7F3EA;
  --green: #7ED9A0;
  --red: #8A2B2B;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--navy-800); font-family: Barlow, system-ui, sans-serif; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-light); }
button { font: inherit; }

@keyframes fx-pulse { 0%,100% { opacity: 1 } 50% { opacity: .45 } }
@keyframes fx-rise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

.dot { border-radius: 50%; flex: none; }
.dot.gold { background: var(--gold); animation: fx-pulse 1.6s ease-in-out infinite; }
.dot.green { background: var(--green); animation: fx-pulse 1.8s ease-in-out infinite; }
.dot.amber { background: #E8A33D; animation: fx-pulse .8s ease-in-out infinite; }

/* ---------- app bar (staff + guest) ---------- */
.appbar { display: flex; align-items: center; gap: 18px; padding: 14px 22px; background: var(--navy-700); border-bottom: 1px solid rgba(200,162,74,.28); position: sticky; top: 0; z-index: 20; flex-wrap: wrap; }
.appbar .brand { font-family: Montserrat, sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .16em; color: var(--gold); }
.appbar .sub { font-size: 13px; letter-spacing: .14em; color: rgba(255,255,255,.5); text-transform: uppercase; }
.appbar .grow { flex: 1; }
.tabs { display: flex; gap: 6px; background: rgba(255,255,255,.06); padding: 5px; border-radius: 999px; }
.tabs a { font-size: 13.5px; font-weight: 600; padding: 8px 16px; border-radius: 999px; color: rgba(255,255,255,.7); }
.tabs a.on { background: var(--gold); color: var(--navy-800); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--navy-700); color: #fff; border: 1px solid var(--gold); padding: 12px 18px; font-size: 14px; max-width: min(92vw, 560px); z-index: 50; animation: fx-rise .25s ease-out; box-shadow: 0 12px 40px rgba(0,0,0,.4); }
.toast.error { border-color: #C66; background: #3A1616; }

@media (max-width: 640px) {
  .appbar { padding: 12px 16px; gap: 10px; }
  .appbar .sub, .appbar .grow { display: none; }
  .tabs { width: 100%; justify-content: space-between; }
  .tabs a { padding: 7px 10px; font-size: 12.5px; }
}