/* The Blueprint · app pages (/track/, /staff/). Same world as the site: void, signal cyan, champagne. */
:root{
  --void:#04060b; --void-2:#080c15; --panel:#0b111d; --panel-2:#0f1726; --raise:#131d2e;
  --line:rgba(69,227,255,.12); --line-2:rgba(69,227,255,.24); --hair:rgba(255,255,255,.07);
  --sig:#45e3ff; --sig-2:#a6f3ff; --hot:#ff3d6e; --ok:#44e5a0; --warn:#ffc24b;
  --gold:#d4b47a; --gold-2:#ecd3a0; --gold-line:rgba(212,180,122,.3);
  --text:#e9f3f7; --text-2:#9fb0be; --muted:#5f7182;
  --f-display:"Syne","Helvetica Neue",Arial,sans-serif;
  --f-serif:"Bodoni Moda","Didot",Georgia,serif;
  --f-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.2,.7,.1,1);
  --r:12px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:dark}
body{margin:0;background:var(--void);color:var(--text);font:400 15px/1.55 var(--f-body);-webkit-font-smoothing:antialiased}
a{color:var(--sig)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:1px solid var(--sig);outline-offset:3px}
::selection{background:var(--sig);color:var(--void)}

.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--text)}
.brand svg{width:28px;height:28px;fill:none;stroke:var(--sig);stroke-width:2}
.brand svg circle{fill:var(--sig);stroke:none}
.brand svg .core{fill:#fff;filter:drop-shadow(0 0 4px var(--sig))}
.brand b{font:500 12px/1 var(--f-mono);letter-spacing:.28em;text-transform:uppercase}
.brand small{font:400 10.5px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-left:4px}

.label{font:400 10.5px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:12px;margin:0 0 14px}
.label::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.serif{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--gold-2)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:10px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--text);font-weight:600;font-size:14px;transition:border-color .2s,background .2s,box-shadow .2s,transform .2s;white-space:nowrap;text-decoration:none}
.btn:hover{border-color:var(--sig);box-shadow:0 0 18px -6px rgba(69,227,255,.6)}
.btn:disabled{opacity:.5;pointer-events:none}
.btn--signal{background:var(--sig);border-color:var(--sig);color:var(--void);box-shadow:0 0 24px -6px rgba(69,227,255,.7)}
.btn--signal:hover{box-shadow:0 0 34px -4px rgba(69,227,255,.9);transform:translateY(-1px)}
.btn--ghost{background:transparent}
.btn--sm{height:34px;padding:0 12px;font-size:13px;border-radius:8px}
.btn--danger:hover{border-color:var(--hot);color:#ff8aa6;box-shadow:none}

.field{display:grid;gap:6px}
.field>span{font:500 11px/1 var(--f-mono);letter-spacing:.06em;color:var(--muted)}
.input,.field input,.field select,.field textarea{width:100%;background:var(--void-2);border:1px solid var(--line-2);border-radius:10px;padding:11px 13px;color:var(--text);transition:border-color .2s,box-shadow .2s}
.field textarea{resize:vertical;min-height:72px}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--sig);box-shadow:0 0 0 3px rgba(69,227,255,.14)}
.check{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--text-2);cursor:pointer}
.check input{width:17px;height:17px;accent-color:var(--sig);margin:0}

.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;font:500 11px/1 var(--f-mono);letter-spacing:.04em;border:1px solid var(--line-2);color:var(--text-2);white-space:nowrap}
.pill i{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill--sig{color:var(--sig);border-color:rgba(69,227,255,.4);background:rgba(69,227,255,.08)}
.pill--gold{color:var(--gold-2);border-color:var(--gold-line);background:rgba(212,180,122,.07)}
.pill--hot{color:#ff8aa6;border-color:rgba(255,61,110,.45);background:rgba(255,61,110,.08)}
.pill--ok{color:var(--ok);border-color:rgba(68,229,160,.4);background:rgba(68,229,160,.07)}
.pill--warn{color:var(--warn);border-color:rgba(255,194,75,.4);background:rgba(255,194,75,.07)}
.pill--muted{color:var(--muted)}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--raise);border:1px solid var(--line-2);color:var(--text);padding:12px 18px;border-radius:12px;box-shadow:0 20px 50px -20px #000;opacity:0;transition:all .3s var(--ease);z-index:200;max-width:min(520px,92vw);font-size:14px}
.toast.show{opacity:1;transform:translateX(-50%)}

.err{color:#ff8aa6;font-size:14px;margin:0}
.muted{color:var(--muted)}
.mono{font-family:var(--f-mono)}
