/* FL-AR Assist — visual identity (FLComm Technology)
   Brand: blue #1976D2 · navy #001F3D (from the FLComm logo) · AR highlight cyan #22D3EE */
@font-face { font-family: 'Rajdhani'; font-weight: 500; font-display: swap; src: url('/fonts/rajdhani-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-weight: 600; font-display: swap; src: url('/fonts/rajdhani-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-weight: 700; font-display: swap; src: url('/fonts/rajdhani-latin-700-normal.woff2') format('woff2'); }

:root {
  --brand: #1976D2;
  --brand-hi: #3D9BFF;
  --navy: #001F3D;
  --ar: #22D3EE;
  --bg: #040A13;
  --bg-2: #071222;
  --panel: #0A1728;
  --panel-2: #0E1F35;
  --line: #19304B;
  --line-hi: #27476D;
  --text: #E6EEF7;
  --muted: #8BA1BA;
  --accent: var(--brand);
  --ok: #22C55E;
  --warn: #F59E0B;
  --bad: #EF4444;
  --radius: 10px;
  --display: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; color: var(--text);
  background: radial-gradient(1200px 600px at 50% -200px, #0B2442 0%, transparent 70%), var(--bg);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
button, input, select { font: inherit; color: inherit; }
::selection { background: rgba(25, 118, 210, .45); }

button { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 12px; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
button:hover { border-color: var(--line-hi); background: #122742; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--ar); outline-offset: 1px; }
button:disabled { opacity: .55; cursor: default; }
button.on { background: var(--brand); border-color: var(--brand-hi); color: #fff; box-shadow: 0 0 0 1px rgba(61,155,255,.25), 0 0 14px rgba(25,118,210,.35); }
button.primary { background: linear-gradient(180deg, #2185E6, var(--brand)); border-color: var(--brand-hi); color: #fff;
  font-weight: 600; box-shadow: 0 6px 20px rgba(25,118,210,.35); }
button.primary:hover { background: linear-gradient(180deg, #2F92F0, #1C7EDC); }
select { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; }
input { background: #050E1A; border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; width: 100%; transition: border-color .15s, box-shadow .15s; }
input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(25,118,210,.25); outline: none; }
label { display: block; color: var(--muted); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; margin: 12px 0 5px; }
kbd { background: #050E1A; border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; font-size: 11px; }
.hidden { display: none !important; }

/* ---------- brand ---------- */
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text); white-space: nowrap; }
.brand img { width: 26px; height: 26px; }
.brand .wm { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: .06em; line-height: 1; }
.brand .wm b { color: var(--brand-hi); font-weight: 700; }
.brand .wm i { font-style: normal; font-weight: 500; color: var(--muted); letter-spacing: .12em; margin-left: 4px; font-size: .78em; }

/* ---------- forms / cards (simulator, watch join) ---------- */
.join { max-width: 380px; margin: 10vh auto; padding: 26px; background: linear-gradient(180deg, rgba(14,31,53,.92), rgba(10,23,40,.92));
  border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.45); position: relative; }
.join h1 { font-family: var(--display); font-size: 24px; letter-spacing: .04em; margin: 0 0 4px; }
.join p { color: var(--muted); margin: 0 0 8px; }
.join button { width: 100%; margin-top: 18px; padding: 10px 12px; }
.join .brand { margin-bottom: 14px; }
.err { color: var(--bad); min-height: 1.4em; margin-top: 8px; }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); margin-right: 6px; }
.dot.ok { background: var(--ok); box-shadow: 0 0 8px var(--ok); } .dot.warn { background: var(--warn); } .dot.bad { background: var(--bad); }

/* AR corner brackets: add class="ar-frame" + <i class="c tl"></i>… */
.ar-frame .c { position: absolute; width: 18px; height: 18px; border: 2px solid var(--ar); opacity: .8; pointer-events: none; }
.ar-frame .c.tl { top: -7px; left: -7px; border-right: 0; border-bottom: 0; border-top-left-radius: 4px; }
.ar-frame .c.tr { top: -7px; right: -7px; border-left: 0; border-bottom: 0; border-top-right-radius: 4px; }
.ar-frame .c.bl { bottom: -7px; left: -7px; border-right: 0; border-top: 0; border-bottom-left-radius: 4px; }
.ar-frame .c.br { bottom: -7px; right: -7px; border-left: 0; border-top: 0; border-bottom-right-radius: 4px; }

/* app header shared by console / watch */
.appbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 14px; min-height: 52px;
  background: linear-gradient(180deg, rgba(10,23,40,.95), rgba(7,18,34,.95)); border-bottom: 1px solid var(--line);
  box-shadow: inset 0 -1px 0 rgba(34,211,238,.08); }
.appbar .vsep { width: 1px; height: 24px; background: var(--line); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }