/* PitSkill Public Race Servers — base. The screens are heavily inline-styled in app.js
   (faithful to the design handoff); this file holds the globals + a few shared bits. */
:root{
  --accent:#FF4B2B; --accent-light:#FF6347; --accent-lighter:#FF7F6B;
  --bg:#000; --panel:#141414; --neutral:#0A0A0A; --line:#1A1A1A; --line2:#262626;
  --txt:#fff; --mut:#A1A1AA; --faint:#52525B; --ok:#4CAF50; --gold:#F0CA02; --hot:#B388FF;
}
*{box-sizing:border-box}
body{margin:0;background:#000;color:#fff;font-family:'Titillium Web',Arial,Helvetica,sans-serif;line-height:1.5;font-size:15px;-webkit-font-smoothing:antialiased}
input{font-family:inherit}
a{color:var(--accent-light);text-decoration:none}
::selection{background:rgba(255,75,43,.35)}
table{border-collapse:collapse}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,75,43,.45)}70%{box-shadow:0 0 0 8px rgba(255,75,43,0)}100%{box-shadow:0 0 0 0 rgba(255,75,43,0)}}
@keyframes fadein{from{opacity:.3;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite;display:inline-block;flex:none}
.card-hover{transition:border-color .15s,transform .15s}
.card-hover:hover{border-color:rgba(255,75,43,.55)}
.row-hover:hover{background:rgba(255,75,43,.05)}
tbody tr{transition:background .12s}
/* persistent alpha flag */
#alpha-flag{position:fixed;bottom:14px;right:14px;z-index:50;font-family:'Oswald',sans-serif;font-weight:700;font-size:11px;letter-spacing:2px;background:var(--accent);color:#fff;border-radius:6px;padding:6px 12px;box-shadow:0 4px 14px rgba(0,0,0,.5);pointer-events:none;opacity:.92}
/* thin scrollbars for the dark theme */
::-webkit-scrollbar{height:8px;width:8px}
::-webkit-scrollbar-thumb{background:#262626;border-radius:8px}
@media(max-width:640px){ #alpha-flag{bottom:8px;right:8px} }

/* ============ Admin (Race Servers control) ============ */
:root{ --muted:#A1A1AA; --mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace }
.topbar{position:sticky;top:0;z-index:20;background:rgba(10,10,10,.94);border-bottom:1px solid var(--line2);backdrop-filter:blur(8px)}
.topbar header{max-width:1400px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-size:15px}
.brand .logo{font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:.5px}
.brand .logo b{color:var(--accent)}
.brand .sep{width:1px;height:16px;background:var(--line2);display:inline-block}
.brand .unit{color:var(--mut)} .brand .unit b{color:#fff}
.live{display:flex;align-items:center;gap:7px;font-family:'Oswald',sans-serif;font-weight:600;font-size:12px;letter-spacing:1.5px;color:var(--ok)}
.live.stale{color:var(--faint)} .live.stale .dot{background:var(--faint);animation:none}
.kbd{font-family:var(--mono);font-size:12px;color:var(--mut);border:1px solid var(--line2);border-radius:6px;padding:5px 10px;background:transparent}
.wrap{max-width:1400px;margin:0 auto;padding:22px}
.page-title{font-family:'Oswald',sans-serif;font-weight:700;font-size:30px;letter-spacing:.5px;margin:6px 0 20px}
.page-title span{color:var(--accent)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:16px}
.panel-h{font-family:'Oswald',sans-serif;font-weight:600;font-size:14px;letter-spacing:1px;text-transform:uppercase;color:#fff;margin-bottom:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.panel-sub{font-size:12px;color:var(--mut);font-weight:400;letter-spacing:0;text-transform:none}
.empty{color:var(--faint);padding:14px 0;font-size:14px}
.empty b{color:var(--mut)}
.server-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.server-tabs button{background:var(--neutral);border:1px solid var(--line2);color:var(--mut);border-radius:7px;padding:7px 13px;font-family:inherit;font-size:13px;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:7px}
.server-tabs button:hover{border-color:var(--accent-light);color:#fff}
.server-tabs button.st-on{background:rgba(255,75,43,.14);border-color:var(--accent);color:#fff}
.server-tabs .cnt{font-family:var(--mono);font-size:11px;color:var(--ok)}
.ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:12px}
.ctrl button{background:var(--neutral);border:1px solid var(--line2);color:#fff;border-radius:7px;padding:8px 15px;font-family:inherit;font-size:13px;cursor:pointer;transition:.15s}
.ctrl button:hover{border-color:var(--accent-light)}
.ctrl button.danger{border-color:rgba(244,67,54,.5);color:#EF9A9A}
.ctrl button.danger:hover{background:rgba(244,67,54,.14);border-color:#F44336}
.ctrl input{background:var(--neutral);border:1px solid var(--line2);color:var(--txt);border-radius:6px;padding:9px 12px;font-family:var(--mono);font-size:13px}
.ctrl-msg{font-size:12.5px;color:var(--mut);font-family:var(--mono)}
.game-tab{background:var(--neutral);border:1px solid var(--line2);color:var(--mut);border-radius:6px;padding:5px 11px;font-family:inherit;font-size:12px;cursor:pointer}
.game-tab:hover{border-color:var(--accent-light);color:#fff}
.stats{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 16px;min-width:118px}
.kpi .l{display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--faint);margin-top:4px}
.kpi .v{font-family:'Oswald',sans-serif;font-weight:700;font-size:22px}
#live-board table,.board-table,#health-body table,#bans-body table{width:100%;font-size:13.5px}
#live-board th,.board-table th,#health-body th{text-align:left;padding:8px 10px;color:var(--faint);font-weight:600;font-size:11px;letter-spacing:.5px;text-transform:uppercase;border-bottom:1px solid var(--line2)}
#live-board td,.board-table td,#health-body td{padding:8px 10px;border-bottom:1px solid var(--line)}
.board-table .num,#live-board .num,td.num{text-align:right;font-family:var(--mono)}
.board-table .rank{font-family:'Oswald',sans-serif;font-weight:700;color:var(--accent-light)}
.board-table .driver{color:#fff;font-weight:600}
.board-table .car{color:var(--mut)}
.board-table .lap,.board-table .gap{font-family:var(--mono);color:var(--mut)}
tbody tr.row-hover:hover,#live-board tbody tr:hover{background:rgba(255,75,43,.05)}
@media(max-width:760px){ .hide-sm{display:none} }
.efeed{list-style:none;margin:0;padding:0;max-height:280px;overflow-y:auto}
.efeed li{padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px;display:flex;gap:9px;align-items:baseline}
.efeed .ek{font-size:10px;font-weight:700;text-transform:uppercase;border-radius:3px;padding:2px 7px;color:#fff;flex:none;background:var(--line2)}
.efeed .ek.chat{background:var(--accent)}
.efeed .ea{color:#fff;font-weight:600}
.efeed .et{color:var(--mut)} .efeed .et b{color:#fff}
.cfg{display:flex;flex-direction:column;gap:3px;font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.5px}
.cfg input{background:var(--neutral);border:1px solid var(--line2);color:var(--txt);border-radius:6px;padding:7px 10px;font-family:var(--mono);font-size:13px;width:120px;text-transform:none}