:root{--bg:#0b0d10;--bar:#0f1318;--b:#1e242c;--card:#14181e;--muted:#9aa4b2;--ok:#16a34a;--err:#dc2626}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:#e5e7eb;font-family:system-ui,Segoe UI,Arial}
a{color:#cbd5e1;text-decoration:none}
a:hover{color:#fff}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.topbar{position:sticky;top:0;z-index:10;background:var(--bar);border-bottom:1px solid var(--b)}
.topbar-inner{display:flex;align-items:center;height:56px;gap:12px}
.brand{display:flex;align-items:center;gap:8px;font-weight:700}
.brand img{height:22px}
.env-pill{margin-left:8px;padding:4px 10px;border-radius:8px;font:600 12px/1 monospace}
.env-pill.PROD{background:#065f46;color:#d1fae5}
.env-pill.TEST{background:#7f1d1d;color:#fee2e2}
.env-pill.DEV{background:#1e40af;color:#dbeafe}
.spacer{flex:1}
.user{position:relative}
.user-btn{background:#11161c;border:1px solid var(--b);border-radius:10px;padding:8px 12px;cursor:pointer}
.dropdown{position:absolute;right:0;top:110%;display:none;min-width:220px;background:#0f1318;border:1px solid var(--b);border-radius:10px;overflow:hidden}
.dropdown a{display:block;padding:10px 12px;border-bottom:1px solid #1a212a}
.dropdown a:last-child{border-bottom:0}
.show{display:block}

.page{padding:18px 0}
.card{background:var(--card);border:1px solid var(--b);border-radius:12px;padding:16px}
h1{margin:0 0 12px}
.muted{color:var(--muted)}
.list{display:grid;gap:8px}
/* --- clickable brand (logo + text + ENV badge) --- */
.brand-link{
  display:flex; align-items:center; gap:8px;
  font-weight:700;
  color:inherit; text-decoration:none;
}
.brand-link:hover{ opacity:0.9; }
.brand-logo{ height:22px; display:block; }

/* --- user button + droplist toggle --- */
.user-menu-btn{
  margin-left:8px;
  background:#11161c;
  border:1px solid var(--b);
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
  color:#e5e7eb;
}
.user-menu-btn:hover{ filter:brightness(1.08); }

/* ghost varianta (např. nepřihlášený) */
.user-btn.ghost{
  background:transparent;
  border:1px solid var(--b);
}

/* dropdown nad ostatními prvky */
.user .dropdown{
  z-index:20;
}

/* pro jistotu – pokud by staré .brand kolidovalo se z-index/klikem */
.brand{ pointer-events:auto; }
/* layout pro dvě karty vedle sebe */
.grid-two{
  display:grid; gap:16px;
  grid-template-columns: 1fr 420px;
}
@media (max-width: 980px){
  .grid-two{ grid-template-columns: 1fr; }
}

/* key–value list (profil) */
.kv{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap:6px 12px;
  margin-top:8px;
}
.kv div{ padding:6px 0; border-bottom:1px dashed #26303a; }
.kv div:nth-child(2n){ border-bottom:1px dashed #26303a; }

/* progress bar (level) */
.progress{
  height:12px;
  background:#0f1318;
  border:1px solid var(--b);
  border-radius:999px;
  overflow:hidden;
  margin-top:8px;
}
.progress > div{
  height:100%;
  background:#2563eb;
  width:0%;
}

/* stackovat inputy ve formuláři */
.row.stack{ display:flex; flex-direction:column; gap:8px; }
input,button{
  padding:10px; border-radius:10px;
  border:1px solid #334155; background:#1f2937; color:#fff;
}
input{ background:#0f1318; }
button{ cursor:pointer; }
/* --- login/register card --- */
form {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.card form input {
  width:100%;
  padding:10px;
  border-radius:8px;
  border:1px solid #2a3038;
  background:#0f1318;
  color:#e5e7eb;
}
.card form button {
  width:100%;
  padding:10px;
  border-radius:10px;
  border:1px solid #334155;
  background:#1f2937;
  color:#fff;
  cursor:pointer;
}
.card form button:hover {
  filter:brightness(1.1);
}
/* homepage buttons */
.menu{margin:16px 0;display:flex;gap:8px;flex-wrap:wrap}
a.btn{display:inline-block;padding:10px 14px;border-radius:10px;border:1px solid #334155;background:#1f2937;color:#fff;text-decoration:none}
a.btn:hover{filter:brightness(1.1)}
.grid-two{display:grid;gap:16px;grid-template-columns:1fr 360px}
.row{display:flex;gap:8px;flex-wrap:wrap}
.slider{width:100%}
.video{background:#000;height:420px;border-radius:10px;display:grid;place-items:center;color:#94a3b8;border:1px dashed #334155}
.dot{width:10px;height:10px;border-radius:50%;background:#555}
.dot.ok{background:var(--ok)}
.dot.err{background:var(--err)}

/* chat */
.chat-box{display:flex;flex-direction:column;height:420px}
.chat-log{flex:1;overflow:auto;border:1px solid #2a3038;border-radius:8px;padding:10px;background:#0f1318}
.chat-item{margin:6px 0}
.chat-meta{font-size:12px;color:#9aa4b2}
.chat-text{white-space:pre-wrap}

/* buttons look consistent */
button{background:#1f2937;color:#fff;border:1px solid #334155;border-radius:10px;padding:10px 14px;cursor:pointer}
button:active{transform:translateY(1px)}
.card-title { margin: 0 0 10px; }
/* --- user dropdown: danger action --- */
.dropdown a.danger{
  color:#fecaca;
  background:#1a1212;
}
.dropdown a.danger:hover{
  background:#7f1d1d;
  color:#fff;
  border-color:#7f1d1d;
}
/* === Aktuální stav: seznam aut === */
.car-list{
  display:grid;
  gap:10px;
}

.car-card{
  display:grid;
  grid-template-columns: 60px 1fr auto;
  gap:12px;
  align-items:center;
  padding:12px;
  background:var(--card);
  border:1px solid var(--b);
  border-radius:12px;
  text-decoration:none;
  color:#e5e7eb;
  transition:transform .05s ease-in-out, border-color .15s;
}

.car-card:hover{
  border-color:#2a3440;
  transform:translateY(-1px);
}

.car-left{
  display:grid;
  place-items:center;
  width:60px; height:60px;
  border-radius:10px;
  background:#0f1318;
  border:1px dashed var(--b);
}

.car-emoji{
  font-size:32px;
  line-height:1;
  font-weight:700;
  color:#94a3b8;
}

.car-mid{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.car-name{
  font-weight:700;
  font-size:16px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.car-right{
  display:flex;
  align-items:center;
}

/* Mobile */
@media (max-width: 640px){
  .car-card{
    grid-template-columns: 50px 1fr;
    gap:10px;
  }
  .car-right{
    grid-column: 1 / -1;
    justify-content:flex-start;
    margin-top:4px;
  }
  .car-left{ width:50px; height:50px; }
  .car-emoji{ font-size:26px; }
}

.presence-pill{
  margin-left:8px;padding:4px 10px;border-radius:8px;
  font:600 12px/1 system-ui,Segoe UI,Arial;
  border:1px solid var(--b);
  background:#11161c;color:#94a3b8; /* default OFFLINE */
}
.presence-online   { background:#0b3d24; color:#86efac; border-color:#14532d; } /* zelená */
.presence-ingame   { background:#0c2c1b; color:#bbf7d0; border-color:#166534; } /* trochu jiná zelená */
.presence-offline  { background:#11161c; color:#94a3b8; border-color:#2a3038; } /* šedá */

/* === Live neon blocks (scoped) === */
.live { margin: 40px 0 24px; }
.live-title { margin: 0 0 14px; font-size: 22px; font-weight: 700; }

.live-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap:14px;
}
@media (max-width: 1100px){ .live-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .live-grid{ grid-template-columns: 1fr; } }

.live .neon{
  --neon:#03e9f4;                 /* výchozí; přebarvuje se třídou */
  position: relative;
  display: block;
  padding: 18px 18px 16px;
  background:#0a0f14;
  color:#e6edf6;
  text-decoration:none;
  border-radius:14px;
  overflow:hidden;
  isolation:isolate;
  box-shadow: 
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 0 80px color-mix(in oklab, var(--neon) 8%, transparent);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  animation: neon-pulse 3s ease-in-out infinite;
}
.live .neon:hover{
  transform: translateY(-2px);
  background:#0d141b;
  box-shadow:
    0 0 6px   color-mix(in oklab, var(--neon) 60%, transparent),
    0 0 22px  color-mix(in oklab, var(--neon) 35%, transparent),
    inset 0 0 0 1px color-mix(in oklab, var(--neon) 45%, transparent),
    inset 0 0 100px color-mix(in oklab, var(--neon) 15%, transparent);
}

@keyframes neon-pulse{
  0%, 100%{ 
    box-shadow: 
      inset 0 0 0 1px rgba(255,255,255,.05),
      inset 0 0 60px color-mix(in oklab, var(--neon) 5%, transparent);
  }
  50%{ 
    box-shadow: 
      inset 0 0 0 1px rgba(255,255,255,.08),
      inset 0 0 120px color-mix(in oklab, var(--neon) 12%, transparent);
  }
}

/* čtyři „linky“ kolem dokola */
.live .neon > span{ position:absolute; display:block; }
.live .neon > span:nth-child(1){
  top:0; left:-100%; width:100%; height:2px;
  background:linear-gradient(90deg,transparent,var(--neon));
  animation:ln1 1.4s linear infinite;
}
.live .neon > span:nth-child(2){
  top:-100%; right:0; width:2px; height:100%;
  background:linear-gradient(180deg,transparent,var(--neon));
  animation:ln2 1.4s linear infinite .35s;
}
.live .neon > span:nth-child(3){
  bottom:0; right:-100%; width:100%; height:2px;
  background:linear-gradient(270deg,transparent,var(--neon));
  animation:ln3 1.4s linear infinite .7s;
}
.live .neon > span:nth-child(4){
  bottom:-100%; left:0; width:2px; height:100%;
  background:linear-gradient(360deg,transparent,var(--neon));
  animation:ln4 1.4s linear infinite 1.05s;
}
@keyframes ln1{ 0%{left:-100%} 50%,100%{left:100%} }
@keyframes ln2{ 0%{top:-100%} 50%,100%{top:100%} }
@keyframes ln3{ 0%{right:-100%} 50%,100%{right:100%} }
@keyframes ln4{ 0%{bottom:-100%} 50%,100%{bottom:100%} }

.live .neon .neon-body{ position:relative; z-index:1; }
.live .neon .neon-top{
  display:flex; align-items:baseline; gap:10px;
}
.live .neon .neon-kpi{
  font-size:28px; line-height:1; letter-spacing:.2px;
  text-shadow: 0 0 8px color-mix(in oklab, var(--neon) 55%, transparent);
}
.live .neon .neon-label{
  font-size:12.5px; opacity:.85; padding-top:3px;
}
.live .neon .neon-note{
  margin-top:8px; font-size:12px; opacity:.7;
}

/* barvy (cyberpunk) */
.live .neon-cyan   { --neon:#00e5ff; }
.live .neon-magenta{ --neon:#ff3bf0; }
.live .neon-lime   { --neon:#35ff6b; }
.live .neon-violet { --neon:#8f6bff; }