:root{
  --bg-0:#05070f; --bg-1:#0a0e1c;
  --grid:rgba(60,120,220,.10);
  --cyan:#25e7ff; --lime:#48ffb0; --amber:#ffc24b;
  --danger:#ff6b6b;
  --road:#1b6fa8; --road-core:#3fe0ff;
  --cell:#0c1428; --cell-edge:#2a6fa0; --cell-ink:#bfefff;
  --ink:#dbeeff; --ink-soft:#7fa7c9;
  --panel:rgba(12,20,40,.72); --panel-edge:rgba(60,150,220,.35);
}
*{box-sizing:border-box;}
html,body{margin:0; background:var(--bg-0); min-height:100%;}
body{
  font-family:"Rajdhani","Segoe UI",system-ui,-apple-system,sans-serif;
  color:var(--ink); -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(120% 80% at 50% -10%, #14224a 0%, var(--bg-1) 45%, var(--bg-0) 100%) fixed;
}
.mono{ font-family:"JetBrains Mono","SFMono-Regular",Consolas,ui-monospace,monospace; }
a{ color:var(--cyan); }

.wrap{ max-width:920px; margin:0 auto; padding:22px 18px 48px; }

.topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.brand{ display:flex; align-items:baseline; gap:10px; }
.brand b{ font-size:20px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#eafcff;
  text-shadow:0 0 8px var(--cyan),0 0 22px rgba(37,231,255,.5); }
.brand span{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.3em; color:var(--cyan); opacity:.8; }
.who{ font-size:13px; color:var(--ink-soft); font-family:"JetBrains Mono",ui-monospace,monospace; }
.who b{ color:var(--ink); }
.btn-ghost{ color:var(--ink-soft); text-decoration:none; font-size:13px; border:1px solid var(--panel-edge);
  padding:6px 12px; border-radius:8px; margin-left:10px; }
.btn-ghost:hover{ color:var(--cyan); border-color:var(--cyan); }

/* ---- contest banner ---- */
.contest-banner{ margin:0 0 16px; padding:12px 16px; border-radius:12px;
  background:var(--panel); border:1px solid var(--panel-edge); backdrop-filter:blur(4px);
  font-size:15px; color:var(--ink); text-align:center; letter-spacing:.02em;
  box-shadow:0 0 20px rgba(20,90,160,.15); }
.contest-banner b{ color:var(--cyan); }
.contest-banner .muted{ color:var(--ink-soft); font-size:13px; }
.contest-banner.over{ border-color:var(--amber); box-shadow:0 0 22px rgba(255,194,75,.25); }
.contest-banner.over b{ color:var(--amber); }

/* ---- personal status bar ---- */
.status-bar{ margin:0 0 16px; padding:10px 16px; border-radius:12px; background:var(--panel);
  border:1px solid var(--panel-edge); text-align:center; font-size:15px; color:var(--ink);
  box-shadow:0 0 18px rgba(20,90,160,.14); backdrop-filter:blur(4px); }
.status-bar b{ color:#eafcff; }
.status-bar b.hl{ color:var(--cyan); }
.status-bar b.lead{ color:var(--amber); }
.status-bar .sep{ color:var(--ink-soft); margin:0 4px; }

/* ---- confetti ---- */
.confetti{ position:fixed; inset:0; pointer-events:none; z-index:9998; overflow:hidden; }
.confetti i{ position:absolute; top:-14px; display:block; border-radius:2px; opacity:0;
  animation:confall linear forwards; }
@keyframes confall{
  0%{ opacity:1; transform:translate(0,-14px) rotate(0deg); }
  100%{ opacity:.85; transform:translate(var(--dx,0), 105vh) rotate(720deg); }
}

/* ---- toasts ---- */
.toasts{ position:fixed; top:18px; right:18px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast{ background:#0c1428; border:1px solid var(--amber); color:#fff2d6; padding:10px 14px; border-radius:10px;
  font-weight:700; font-size:14px; box-shadow:0 0 20px rgba(255,194,75,.35); animation:toastin .25s ease;
  transition:opacity .4s ease, transform .4s ease; }
.toast.hide{ opacity:0; transform:translateX(24px); }
@keyframes toastin{ from{ opacity:0; transform:translateX(24px) } to{ opacity:1; transform:none } }

/* ---- rating view ---- */
.rating{ display:flex; flex-direction:column; gap:6px; max-height:540px; overflow-y:auto; }
.rrow{ display:flex; align-items:center; gap:10px; font-size:13px; padding:3px 6px; border-radius:8px; }
.rrow.me{ background:rgba(37,231,255,.10); }
.rname{ width:140px; flex:none; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rbar{ flex:1; height:10px; background:rgba(70,140,200,.15); border-radius:6px; overflow:hidden; }
.rfill{ display:block; height:100%; border-radius:6px; box-shadow:0 0 8px currentColor; transition:width .5s ease; }
.rval{ width:40px; flex:none; text-align:right; font-family:"JetBrains Mono",ui-monospace,monospace; color:var(--ink-soft); }

/* ---- login ---- */
.login-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-card{ width:100%; max-width:360px; background:var(--panel); border:1px solid var(--panel-edge);
  border-radius:16px; padding:30px 26px; backdrop-filter:blur(4px);
  box-shadow:0 0 40px rgba(20,90,160,.25),inset 0 0 30px rgba(10,30,70,.5); }
.login-card h1{ margin:0 0 4px; font-size:28px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  text-align:center; color:#eafcff; text-shadow:0 0 8px var(--cyan),0 0 24px rgba(37,231,255,.5); }
.login-card .sub{ text-align:center; color:var(--ink-soft); font-size:12px; letter-spacing:.24em;
  text-transform:uppercase; margin-bottom:22px; font-family:"JetBrains Mono",ui-monospace,monospace; }

label{ display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
  margin:14px 0 6px; font-family:"JetBrains Mono",ui-monospace,monospace; }
input, select{ width:100%; padding:11px 12px; border-radius:9px; background:#0a1428;
  border:1px solid var(--panel-edge); color:var(--ink); font-family:inherit; font-size:15px; }
input:focus, select:focus{ outline:none; border-color:var(--cyan); box-shadow:0 0 12px rgba(37,231,255,.3); }

.btn{ width:100%; margin-top:20px; border:1px solid var(--cyan); cursor:pointer; font-family:inherit;
  text-transform:uppercase; background:linear-gradient(180deg, rgba(37,231,255,.18), rgba(20,90,160,.28));
  color:#eafcff; font-weight:700; font-size:14px; letter-spacing:.16em; padding:12px; border-radius:10px;
  box-shadow:0 0 18px rgba(37,231,255,.3); transition:all .12s ease; }
.btn:hover{ box-shadow:0 0 28px rgba(37,231,255,.55); }
.btn:active{ transform:translateY(2px); }
.btn.small{ width:auto; margin-top:0; padding:9px 16px; font-size:12px; letter-spacing:.1em; }
.btn.danger{ border-color:var(--danger); background:linear-gradient(180deg, rgba(255,107,107,.18), rgba(120,20,20,.28));
  box-shadow:0 0 16px rgba(255,107,107,.3); }
.err{ margin-top:14px; text-align:center; color:var(--danger); font-size:13px; }

/* ---- board ---- */
.board{ position:relative; width:100%; aspect-ratio:1/1; border-radius:16px; overflow:hidden;
  border:1px solid rgba(60,160,230,.45);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 40px rgba(20,120,200,.35),inset 0 0 80px rgba(0,20,60,.9);
  background:radial-gradient(120% 90% at 50% 0%, #14224a 0%, var(--bg-1) 45%, var(--bg-0) 100%); }
.board svg.bg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.scan{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:overlay; opacity:.5;
  background:repeating-linear-gradient(0deg, rgba(120,200,255,.06) 0 1px, transparent 1px 3px); }
.vig{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%); }

.cell{ position:absolute; transform:translate(-50%,-50%); width:4.6%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 35%, #16305c 0%, var(--cell) 70%); border:1.5px solid var(--cell-edge);
  display:flex; align-items:center; justify-content:center; font-size:clamp(7px,1.15vw,11px); font-weight:700;
  color:var(--cell-ink); font-variant-numeric:tabular-nums; font-family:"JetBrains Mono",ui-monospace,monospace;
  box-shadow:0 0 8px rgba(37,231,255,.32),inset 0 0 6px rgba(20,90,140,.6); }
.cell.start,.cell.finish{ width:6.4%; font-size:clamp(6px,1vw,9px); border-width:2px; }
.cell.start{ border-color:var(--lime); color:#d6fff0; box-shadow:0 0 14px rgba(72,255,176,.6); }
.cell.finish{ border-color:var(--amber); color:#fff2d6; box-shadow:0 0 16px rgba(255,194,75,.6); }

.token{ position:absolute; transform:translate(-50%,-50%); width:3.3%; aspect-ratio:1; border-radius:50%;
  border:2px solid rgba(255,255,255,.85); z-index:6; transition:left .45s ease, top .45s ease;
  display:flex; align-items:center; justify-content:center; cursor:default;
  font-size:clamp(6px,0.95vw,10px); font-weight:800; color:#06121f; letter-spacing:-.02em; }
.token.you{ border-color:#fff; z-index:9; }
.token.you::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid #fff; pointer-events:none; }
.cell-badge{ position:absolute; transform:translate(-50%,-50%); z-index:7;
  background:#0c1428; border:1px solid var(--cyan); color:#eafcff; font-size:10px; font-weight:700;
  padding:1px 6px; border-radius:10px; font-family:"JetBrains Mono",ui-monospace,monospace;
  box-shadow:0 0 8px rgba(37,231,255,.4); }
.gain-float{ position:absolute; transform:translate(-50%,-50%); z-index:12; color:var(--lime); font-weight:800;
  font-size:16px; text-shadow:0 0 10px rgba(72,255,176,.85); pointer-events:none; animation:floatup 1.4s ease forwards; }
@keyframes floatup{ 0%{opacity:0; margin-top:0} 15%{opacity:1} 100%{opacity:0; margin-top:-42px} }
@media (prefers-reduced-motion:no-preference){
  .token.you::after{ animation:youring 1.6s ease-in-out infinite; }
  @keyframes youring{ 0%,100%{ transform:scale(1); opacity:.9 } 50%{ transform:scale(1.35); opacity:.3 } }
  .cell.hit{ animation:cellhit .45s ease; }
  @keyframes cellhit{ 0%{ box-shadow:0 0 0 4px rgba(37,231,255,.85),inset 0 0 6px rgba(20,90,140,.6) }
    100%{ box-shadow:0 0 8px rgba(37,231,255,.32),inset 0 0 6px rgba(20,90,140,.6) } }
}

/* ---- panels & grid ---- */
.grid2{ display:grid; grid-template-columns:1.2fr 1fr; gap:16px; margin-top:20px; }
@media (max-width:660px){ .grid2{ grid-template-columns:1fr; } }
.panel{ background:var(--panel); border:1px solid var(--panel-edge); border-radius:14px; padding:16px 18px;
  backdrop-filter:blur(4px); box-shadow:0 0 24px rgba(20,90,160,.18),inset 0 0 30px rgba(10,30,70,.5); }
.panel h2{ margin:0 0 12px; font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cyan); font-family:"JetBrains Mono",ui-monospace,monospace; }

#legend{ max-height:520px; overflow-y:auto; }
.legrow{ display:flex; align-items:center; gap:11px; padding:8px 0; }
.legrow + .legrow{ border-top:1px solid rgba(70,140,200,.18); }
.dot{ width:16px; height:16px; border-radius:50%; flex:none; box-shadow:0 0 10px currentColor; }
.legrow .nm{ font-weight:700; font-size:15px; }
.legrow .nm .me{ color:var(--cyan); font-size:11px; margin-left:6px; }
.legrow .pos{ margin-left:auto; font-size:12px; color:var(--ink-soft); font-family:"JetBrains Mono",ui-monospace,monospace; }

.field-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.field-row label{ margin:0; }
.field-row input{ width:120px; text-align:right; }

.breakdown{ font-size:13px; color:var(--ink-soft); margin-top:14px; }
.breakdown .row{ display:flex; justify-content:space-between; padding:4px 0; }
.breakdown .row b{ color:var(--ink); }
.total{ margin-top:10px; display:flex; align-items:baseline; gap:8px; }
.total b{ color:#eafcff; font-size:24px; font-family:"JetBrains Mono",ui-monospace,monospace;
  text-shadow:0 0 10px rgba(37,231,255,.6); }
.note{ font-size:12px; color:var(--ink-soft); margin-top:12px; }

/* ---- host ---- */
table{ width:100%; border-collapse:collapse; font-size:13px; }
th,td{ text-align:left; padding:7px 8px; border-bottom:1px solid rgba(70,140,200,.15); }
th{ color:var(--ink-soft); font-family:"JetBrains Mono",ui-monospace,monospace; font-weight:700;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
td.num{ font-family:"JetBrains Mono",ui-monospace,monospace; text-align:right; }
.table-scroll{ overflow-x:auto; }
.host-forms{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
@media (max-width:660px){ .host-forms{ grid-template-columns:1fr; } }
.inline{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.inline > div{ flex:1; min-width:90px; }
/* Компактні однорядкові форми в клітинках таблиць — нічого не переносимо. */
.rowform{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.rowform input{ padding:8px 9px; font-size:13px; }
.btn.small{ white-space:nowrap; }
.nowrap{ white-space:nowrap; }

/* Рядки-картки менеджерів у панелі ведучого: шапка + рядок контролів.
   Ширше за панель не росте — контролі переносяться, рядок стає вищим. */
.mgr-row{ padding:14px 2px; }
.mgr-row + .mgr-row{ border-top:1px solid rgba(70,140,200,.18); }
.mgr-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.mgr-name{ font-weight:700; font-size:15px; }
.mgr-meta{ font-size:12px; color:var(--ink-soft); font-family:"JetBrains Mono",ui-monospace,monospace; }
.mgr-meta b{ color:var(--ink); }
.mgr-controls{ display:flex; gap:12px 18px; flex-wrap:wrap; align-items:flex-end; }
.ctl-label{ display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); font-family:"JetBrains Mono",ui-monospace,monospace; margin:0 0 5px; }
.ctl-right{ margin-left:auto; }
@media (max-width:660px){ .ctl-right{ margin-left:0; } }
.pen-badge{ color:var(--danger); }
.danger-zone{ border-color:rgba(255,107,107,.45); box-shadow:0 0 18px rgba(255,107,107,.12); }
.danger-zone h2{ color:var(--danger); }