@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=Audiowide&family=Martian+Mono:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Chonburi&display=swap');

/* ==========================================================================
   Queen Central Admin — shared design system.
   ONE place for the palette, top bar, buttons, inputs, modals and headers so
   every facility (Board, Users, Venues, Question Bank) looks the same. Module
   stylesheets add ONLY their own layout on top of this — no more duplicated
   button/modal kits drifting apart. Matches the /account/credits console.
   ========================================================================== */
:root {
  --bg: #140a24;
  --bg-2: #0d0618;
  --panel: #1b1030;
  --panel-2: #241540;
  --line: #33224f;
  --text: #f5eeff;
  --muted: #a892cc;
  --muted-2: #7d6aa0;
  --pink: #ff2e88;
  --pink-2: #ff7ac0;
  --purple: #8a3ffc;
  --gold: #ffd23f;
  --green: #3de882;
  --cyan: #2fe1e8;
  --red: #ff5470;
  --orange: #ff8a3d;
  --grad: linear-gradient(90deg, #ff2e88, #ff8a3d, #ffd23f, #3de882, #2fe1e8, #8a3ffc);
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 400 14.5px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;
  background: linear-gradient(180deg, var(--bg), var(--bg-2));
  color: var(--text);
  min-height: 100vh;
}
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
.accent { color: var(--pink); }
.muted { color: var(--muted); font-size: 13px; }
.muted-sm { font-size: 12px; color: var(--muted-2); }
.hidden, [hidden] { display: none !important; }
.spacer { flex: 1; }
.grow { flex: 1; min-width: 0; }

/* --- Top nav --- */
.topnav {
  display: flex; align-items: center; gap: 22px;
  padding: 11px 22px; background: rgba(20, 10, 36, .9);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30;
}
.topnav .brand { display: flex; align-items: baseline; gap: 8px; }
.topnav .brand .mark {
  font-family: "Chonburi", serif; font-size: 18px; letter-spacing: .01em;
  background: var(--grad); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.topnav .brand .brand-sub {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em;
  color: var(--muted-2);
}
.topnav .links { display: flex; gap: 4px; }
.topnav .links a {
  padding: 7px 13px; border-radius: 9px; color: var(--muted);
  text-decoration: none; font-weight: 600; font-size: 13.5px; line-height: 1;
  border: 1px solid transparent; transition: color .12s, background .12s, border-color .12s;
}
.topnav .links a:hover { color: var(--text); background: var(--panel); text-decoration: none; }
.topnav .links a.active { background: var(--panel-2); color: var(--text); border-color: var(--line); }
.topnav .links a.soon { opacity: .4; cursor: default; }
.topnav .links a.soon:hover { background: none; color: var(--muted); }
.topnav .who { color: var(--muted-2); font-size: 13px; }
.topnav .who a {
  color: var(--muted); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 12px; font-weight: 600; font-size: 12.5px;
}
.topnav .who a:hover { color: var(--text); border-color: var(--muted-2); text-decoration: none; }

/* --- Page header (shared across facilities) --- */
.page-head, .board-head {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 22px 10px; max-width: 1200px; margin: 0 auto;
}
.page-head h2, .board-head h2 {
  margin: 0; font-family: "Chonburi", serif; font-size: 22px; font-weight: 400;
}
.page-head .count, .board-head .count { font-size: 12.5px; color: var(--muted-2); }
.lede {
  color: var(--muted); font-size: 13.5px; margin: 0 auto; padding: 0 22px 14px;
  max-width: 1200px;
}
.lede.narrow { max-width: 80ch; }

/* --- Search box --- */
.search {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 9px; padding: 8px 12px; font: inherit; font-size: 13.5px; width: 260px; max-width: 46vw;
}
.search:focus { outline: none; border-color: var(--purple); }
.search::placeholder { color: var(--muted-2); }

/* --- Buttons --- */
.btn {
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  padding: 8px 14px; border-radius: 9px; font-weight: 700; font-size: 13px; cursor: pointer;
  transition: border-color .12s, filter .12s, background .12s;
}
.btn:hover { border-color: var(--muted-2); }
.btn.primary { background: linear-gradient(135deg, var(--purple), var(--pink)); border-color: transparent; color: #fff; }
.btn.primary:hover { filter: brightness(1.08); border-color: transparent; }
.btn.danger { background: transparent; border-color: #6b2740; color: #ff8fb2; }
.btn.danger:hover { border-color: var(--red); }
.btn-sm {
  font-size: 11.5px; padding: 4px 10px; border-radius: 7px; font-weight: 600;
  border: 1px solid var(--line); color: var(--text); background: var(--panel-2); cursor: pointer;
}
.btn-sm:hover { border-color: var(--muted-2); }
.btn-sm.danger { border-color: #6b2740; color: #ff8fb2; background: transparent; }
.btn-sm.danger:hover { border-color: var(--red); }
.icon-btn { background: none; border: none; color: var(--muted); font-size: 16px; cursor: pointer; line-height: 1; }
.icon-btn:hover { color: var(--text); }

/* --- Form controls --- */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
select, textarea {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 9px 10px; font: inherit; font-size: 14px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--purple); }
input::placeholder, textarea::placeholder { color: var(--muted-2); }
textarea { resize: vertical; }
label { font-size: 13px; color: var(--muted); }
.field-label { font-size: 13px; color: var(--muted); font-weight: 600; }

/* --- Modals (shared) --- */
.modal {
  position: fixed; inset: 0; background: rgba(6, 2, 14, .62);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: grid; place-items: center; z-index: 40; padding: 20px;
}
.modal.hidden { display: none; }
.modal-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  width: 620px; max-width: 100%; max-height: 90vh; overflow: auto;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}
.modal-card.wide { width: 820px; }
.modal-head { display: flex; align-items: center; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-family: "Chonburi", serif; font-weight: 400; font-size: 17px; flex: 1; }
form { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
form > label, .row label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row .grow { flex: 1; min-width: 180px; }
.modal-actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.hint { font-size: 12px; color: var(--muted-2); margin: 4px 0 0; }
.err { color: #ff8fb2; font-size: 13px; margin: 0; }

/* --- Login --- */
.login-body { display: grid; place-items: center; min-height: 100vh; }
.login-card {
  text-align: center; padding: 44px 46px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 18px; max-width: 380px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}
.login-card h1 {
  font-family: "Chonburi", serif; font-weight: 400; font-size: 34px; margin: 0;
  background: var(--grad); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.login-card .sub { color: var(--muted); margin: 6px 0 28px; letter-spacing: .18em; text-transform: uppercase; font-size: 12px; }
.gbtn {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: #1a1a1a; text-decoration: none;
  font-weight: 700; padding: 11px 18px; border-radius: 10px;
}
.gbtn:hover { background: #f1f1f1; text-decoration: none; }
.login-card .fine { color: var(--muted-2); font-size: 12px; margin-top: 22px; }

/* ==========================================================================
   Boardroom Games — Broadcast override (appended after the base sheet).
   Colour: separation by light on the navy ramp; volt means LIVE, the logo's
   cold blue means ACTION. Type: Archivo (width carries register), Audiowide
   wordmark, Martian Mono equipment. Shape: 4px system radius, 8px cards.
   ========================================================================== */
:root {
  --bg: #0B1424;
  --bg-2: #060B14;
  --panel: #16233A;
  --panel-2: #1B2B45;
  --line: #24395B;
  --text: #F2F6FC;
  --muted: #8FA3BE;
  --muted-2: #4A5D7A;
  --pink: #7DD3FC;       /* action — the logo's cold blue */
  --pink-2: #A5E3FF;
  --purple: #2563EB;
  --gold: #D8F34A;       /* volt — live/signal, never action */
  --green: #10B981;
  --cyan: #06B6D4;
  --red: #EF4444;
  --orange: #F97316;
  --grad: linear-gradient(90deg, #2563EB, #06B6D4, #10B981, #D8F34A);
}
body { font-family: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }

/* Wordmark: Audiowide + the PlayBeam mark, no gradient-text */
.topnav .brand .mark {
  font-family: "Audiowide", system-ui, sans-serif; font-size: 15px; letter-spacing: -.02em;
  background: none; -webkit-text-fill-color: currentColor; color: var(--text);
  display: inline-flex; align-items: center; gap: 9px;
}
.topnav .brand .mark::before {
  content: ""; width: 22px; height: 19px; flex: none;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="8 14 148 130"><rect x="14" y="44" width="88" height="62" rx="12" fill="%23101c33" stroke="%237DD3FC" stroke-width="5"/><path d="M50 61l35 14-35 14z" fill="%237DD3FC"/><path d="M104 75h18m-8-9 10 9-10 9" fill="none" stroke="%23D8F34A" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/><rect x="126" y="20" width="26" height="118" rx="10" fill="%23101c33" stroke="%23D8F34A" stroke-width="5"/><circle cx="139" cy="52" r="7" fill="%23D8F34A"/><circle cx="139" cy="80" r="7" fill="%2310B981"/><circle cx="139" cy="108" r="7" fill="%232563EB"/></svg>') center/contain no-repeat;
}
.topnav .brand .brand-sub { font-family: "Martian Mono", ui-monospace, monospace; }

/* Headings: tells register, not Chonburi */
.page-head h2, .board-head h2, .modal-head h3 {
  font-family: "Archivo", system-ui, sans-serif;
  font-variation-settings: 'wdth' 125; font-weight: 800; letter-spacing: -.015em;
}
.login-card h1 {
  font-family: "Audiowide", system-ui, sans-serif;
  background: none; -webkit-text-fill-color: currentColor; color: var(--text); font-size: 28px;
}
.login-card .sub, .field-label { font-family: "Martian Mono", ui-monospace, monospace; }
.login-card .sub { font-size: 10px; }

/* Action is a solid cold-blue fill with dark ink — never a pink/purple gradient */
.btn.primary { background: var(--pink); color: #0B1424; }
.search:focus, input:focus, select:focus, textarea:focus { border-color: var(--pink); }

/* Shape: crisp broadcast radii */
.topnav .links a, .search, .btn, .who a { border-radius: 4px; }
.btn-sm { border-radius: 3px; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
select, textarea { border-radius: 4px; }
.modal-card, .login-card { border-radius: 8px; }