/* ============================================================
   PredictEats — oblikovni žetoni
   ============================================================ */
:root{
  /* Znamka PredictLeads (odčitano iz predictleads-og-BH9OKJct.png) */
  --pl-purple:#76508E;
  --pl-ink:#2A2430;
  --pl-body:#505050;

  /* Klubski barvi */
  --lj:#00A44E;   --lj-rgb:0,164,78;     /* Olimpija Ljubljana */
  --mb:#4B2178;   --mb-rgb:75,33,120;    /* NK Maribor */

  /* Živi poudarek — preklopi ga mestni stikalnik */
  --accent:var(--lj);
  --accent-rgb:var(--lj-rgb);

  /* Nevtralne */
  --bg:#F6F5F8;
  --surface:#FFFFFF;
  --surface-2:#FBFAFC;
  --line:#E7E3EC;
  --line-strong:#D8D2E0;
  --muted:#8A8194;

  /* Oblika in gibanje */
  --r-sm:8px; --r:12px; --r-lg:18px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(42,36,48,.05), 0 1px 3px rgba(42,36,48,.04);
  --sh-2:0 2px 4px rgba(42,36,48,.04), 0 8px 24px rgba(42,36,48,.07);
  --sh-3:0 -1px 0 var(--line), 0 -12px 32px rgba(42,36,48,.08);
  --ease:cubic-bezier(.2,.7,.2,1);

  --maxw:1080px;
}

html[data-city="maribor"]{ --accent:var(--mb); --accent-rgb:var(--mb-rgb); }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.55;
  color:var(--pl-body);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
/* barvni preliv za glavo — preklop mesta se vidi, ne le prebere */
body::before{
  content:""; position:fixed; inset:0 0 auto 0; height:420px; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 300px at 50% -140px, rgba(var(--accent-rgb),.16), transparent 70%),
    linear-gradient(180deg, rgba(var(--accent-rgb),.05), transparent 70%);
  transition:background .45s var(--ease);
}
h1,h2,h3,h4{color:var(--pl-ink); margin:0; font-weight:650; letter-spacing:-.015em}
a{color:var(--pl-purple)}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px; position:relative; z-index:1}

/* ============================================================
   Glava
   ============================================================ */
.hdr{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(1.6) blur(12px);
  -webkit-backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--line);
}
.hdr-in{
  max-width:var(--maxw); margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; gap:16px;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto}
.brand svg{display:block; color:var(--pl-purple)}
.brand-name{font-size:17px; font-weight:700; letter-spacing:-.02em; color:var(--pl-ink)}
.brand-name em{font-style:normal; color:var(--pl-purple)}
.brand-sub{
  display:block; font-size:10.5px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); margin-top:-3px;
}
.hdr-spacer{flex:1 1 auto}

/* Mestni stikalnik — osrednja kontrola */
.toggle{
  position:relative; display:inline-flex; padding:4px; gap:2px;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-pill); box-shadow:inset 0 1px 2px rgba(42,36,48,.03);
}
.toggle-thumb{
  position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px);
  border-radius:var(--r-pill); background:var(--accent);
  box-shadow:0 1px 2px rgba(42,36,48,.18), 0 4px 12px rgba(var(--accent-rgb),.35);
  transition:transform .34s var(--ease), background .34s var(--ease), box-shadow .34s var(--ease);
}
html[data-city="maribor"] .toggle-thumb{transform:translateX(100%)}
.toggle a{
  position:relative; text-decoration:none; z-index:1; appearance:none; background:none; border:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 16px; border-radius:var(--r-pill);
  font-size:13.5px; font-weight:600; letter-spacing:-.01em;
  color:var(--muted); white-space:nowrap;
  transition:color .28s var(--ease);
  min-width:118px; justify-content:center;
}
.toggle a[aria-selected="true"]{color:#fff}
.dot{width:8px; height:8px; border-radius:50%; flex:0 0 auto; box-shadow:0 0 0 2px rgba(255,255,255,.55) inset}
.dot.lj{background:var(--lj)} .dot.mb{background:var(--mb)}
.toggle a[aria-selected="true"] .dot{background:#fff; box-shadow:none}

.navlink{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:var(--r-pill); border:1px solid var(--line);
  background:var(--surface); color:var(--pl-ink); text-decoration:none;
  font-size:13.5px; font-weight:600; cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s;
}
.navlink:hover{border-color:var(--line-strong); background:var(--surface-2)}
.navlink.is-on{border-color:rgba(var(--accent-rgb),.4); color:var(--accent); background:rgba(var(--accent-rgb),.06)}

/* ============================================================
   Naslovni del
   ============================================================ */
main{padding:34px 0 160px}
.hero{margin-bottom:26px}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); margin-bottom:12px;
  transition:color .35s var(--ease);
}
.eyebrow::before{content:""; width:20px; height:2px; border-radius:2px; background:currentColor; opacity:.5}
h1{font-size:clamp(28px,4.4vw,40px); line-height:1.1; margin-bottom:8px}
h1 .city{color:var(--accent); transition:color .35s var(--ease)}
.lede{font-size:15.5px; color:var(--muted); max-width:60ch; margin:0}

.statbar{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; align-items:center}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line);
  font-size:13px; font-weight:600; color:var(--pl-ink); box-shadow:var(--sh-1);
}
.chip .k{color:var(--muted); font-weight:500}
.chip.live::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 rgba(var(--accent-rgb),.6); animation:pulse 2.2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.55)}
  70%{box-shadow:0 0 0 7px rgba(var(--accent-rgb),0)}
  100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}
}
.chip.closed::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--muted)}

/* ---------- Kdo je glasoval — gruča ljudi namesto "12 od 40" ---------- */
.tally{margin-top:24px}
.tally-label{
  display:flex; align-items:center; gap:9px; margin-bottom:11px;
  font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted);
}
.tally-label b{
  font-size:13px; letter-spacing:0; color:#fff; background:var(--accent);
  min-width:24px; height:22px; padding:0 8px; border-radius:var(--r-pill);
  display:inline-grid; place-items:center;
  box-shadow:0 2px 8px rgba(var(--accent-rgb),.32);
  transition:background .35s var(--ease), box-shadow .35s var(--ease);
}
.tally-row{display:flex; align-items:center; flex-wrap:wrap; row-gap:9px}
.tally-av{
  width:38px; height:38px; flex:0 0 auto; border-radius:50%;
  display:grid; place-items:center;
  font-size:11px; font-weight:700; color:#fff; letter-spacing:-.01em;
  background:var(--accent);
  box-shadow:0 0 0 2.5px var(--bg), 0 2px 7px rgba(var(--accent-rgb),.28);
  margin-left:-8px; cursor:default;
  transition:transform .2s var(--ease), background .35s var(--ease);
}
.tally-av:first-child{margin-left:0}
.tally-av:hover{transform:translateY(-4px) scale(1.07); z-index:3}
.tally-more{
  margin-left:-8px; height:38px; padding:0 14px 0 18px; border-radius:var(--r-pill);
  display:grid; place-items:center; font-size:12px; font-weight:700; color:var(--accent);
  background:var(--surface); box-shadow:0 0 0 2.5px var(--bg), var(--sh-1);
}
.tally-empty{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--muted)}
.tally-ghost{
  width:38px; height:38px; border-radius:50%; margin-left:-8px;
  border:1.5px dashed var(--line-strong); background:var(--surface-2);
}
.tally-ghost:first-child{margin-left:0}

/* ============================================================
   Kartice in sekcije
   ============================================================ */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-1);
}
.section{margin-top:24px}
.section-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.section-head h2{font-size:17px}
.section-head .hint{font-size:13px; color:var(--muted)}

.notice[hidden]{display:none}
.notice{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px 14px; border-radius:var(--r);
  background:rgba(200,144,30,.08); border:1px solid rgba(200,144,30,.28);
  color:#7A5910; font-size:13px; margin-bottom:18px;
}
.notice b{color:#6A4C08}

/* ---------- Iskalno polje z imeni ---------- */
.namebox{padding:18px; margin-bottom:20px}
label.fld{display:block; font-size:12.5px; font-weight:650; color:var(--pl-ink); margin-bottom:7px}
.combo{position:relative}
.combo-input{
  width:100%; padding:13px 44px 13px 14px;
  font-size:15px; color:var(--pl-ink);
  background:var(--surface-2); border:1.5px solid var(--line); border-radius:var(--r);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s;
}
.combo-input::placeholder{color:#A9A2B3}
.combo-input:focus{
  outline:none; background:var(--surface);
  border-color:var(--accent); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.13);
}
.combo-input.ok{border-color:var(--accent); background:rgba(var(--accent-rgb),.04)}
.combo-input.bad{border-color:#D2544B; background:#FDF4F3}
.combo-mark{
  position:absolute; right:13px; top:50%; transform:translateY(-50%);
  font-size:13px; font-weight:700; color:var(--accent); pointer-events:none; opacity:0;
  transition:opacity .2s;
}
.combo-input.ok + .combo-mark{opacity:1}
.combo-list{
  position:absolute; z-index:30; left:0; right:0; top:calc(100% + 6px);
  max-height:264px; overflow:auto;
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--r); box-shadow:var(--sh-2); padding:6px;
  display:none;
}
.combo-list.open{display:block}
.opt{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 10px; border-radius:var(--r-sm); border:0; background:none;
  cursor:pointer; text-align:left; font-size:14px; color:var(--pl-ink);
}
.opt:hover,.opt.cursor{background:rgba(var(--accent-rgb),.09)}
.opt .av{
  width:26px; height:26px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; font-size:10.5px; font-weight:700;
  background:#F0EDF4; color:var(--pl-purple);
}
.opt .tag{
  margin-left:auto; font-size:11px; font-weight:650; color:var(--muted);
  background:var(--surface-2); border:1px solid var(--line); padding:2px 8px; border-radius:var(--r-pill);
}
.opt.voted{opacity:.55}
.opt.voted .tag{color:#B0432F; background:#FDF1EE; border-color:#F5D9D2}
.combo-empty{padding:14px 10px; font-size:13.5px; color:var(--muted); text-align:center}
.fld-err{display:none; align-items:center; gap:6px; margin-top:8px; font-size:12.5px; font-weight:600; color:#C2413A}
.fld-err.show{display:flex}

/* ---------- Mreža restavracij ---------- */
.grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.tile{
  position:relative; display:flex; align-items:center; gap:12px;
  padding:14px; text-align:left; cursor:pointer;
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-1);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease),
             transform .18s var(--ease), background .18s var(--ease);
}
.tile:hover{border-color:var(--line-strong); transform:translateY(-1px); box-shadow:var(--sh-2)}
.tile:active{transform:translateY(0)}
.tile.sel{
  border-color:var(--accent); background:rgba(var(--accent-rgb),.045);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12), var(--sh-1);
}
.tile-badge{
  width:38px; height:38px; flex:0 0 auto; border-radius:10px;
  display:grid; place-items:center; font-size:15px; font-weight:700; letter-spacing:-.02em;
  background:var(--surface-2); border:1px solid var(--line); color:var(--muted);
  transition:all .22s var(--ease);
}
.tile.sel .tile-badge{
  background:var(--accent); border-color:transparent; color:#fff;
  box-shadow:0 3px 10px rgba(var(--accent-rgb),.4);
}
.tile.sel[data-rank="2"] .tile-badge{background:rgba(var(--accent-rgb),.72); box-shadow:0 3px 10px rgba(var(--accent-rgb),.28)}
.tile.sel[data-rank="3"] .tile-badge{background:rgba(var(--accent-rgb),.5); box-shadow:0 3px 10px rgba(var(--accent-rgb),.2)}
.tile-body{min-width:0; flex:1 1 auto}
.tile-name{
  display:block; font-size:14.5px; font-weight:650; color:var(--pl-ink);
  letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tile-meta{display:flex; align-items:center; gap:8px; margin-top:2px}
.tile-menu{
  font-size:12px; font-weight:600; color:var(--muted); text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:1px;
}
.tile-menu:hover{color:var(--pl-purple); border-bottom-color:rgba(118,80,142,.4)}
.tile-pts{display:none; font-size:11px; font-weight:700; color:var(--accent); letter-spacing:.02em}
.tile.sel .tile-pts{display:inline}
.tile.sel .tile-menu{display:none}

/* ---------- Lepljiva vrstica z izbiro ---------- */
.pickbar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px);
  box-shadow:var(--sh-3);
  padding-bottom:env(safe-area-inset-bottom);
}
.pickbar[hidden]{display:none}
.pickbar-in{
  max-width:var(--maxw); margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.slots{display:flex; gap:8px; flex:1 1 380px; min-width:0}
.slot{
  flex:1 1 0; min-width:0;
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:10px;
  border:1.5px dashed var(--line-strong); background:var(--surface-2);
  font-size:13px; color:var(--muted);
  transition:all .22s var(--ease);
}
.slot .n{
  width:22px; height:22px; flex:0 0 auto; border-radius:6px; display:grid; place-items:center;
  font-size:11px; font-weight:700; background:var(--line); color:var(--muted);
  transition:all .22s var(--ease);
}
.slot .v{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600}
.slot .v .short{display:none}
.slot.on{
  border-style:solid; border-color:rgba(var(--accent-rgb),.35);
  background:rgba(var(--accent-rgb),.06); color:var(--pl-ink);
}
.slot.on .n{background:var(--accent); color:#fff}
.slot .x{
  margin-left:auto; border:0; background:none; cursor:pointer; padding:2px 4px;
  color:var(--muted); font-size:15px; line-height:1; border-radius:4px; display:none;
}
.slot.on .x{display:block}
.slot .x:hover{color:#C2413A; background:rgba(194,65,58,.08)}

.btn{
  appearance:none; border:0; cursor:pointer;
  padding:12px 24px; border-radius:var(--r-pill);
  font-size:14.5px; font-weight:650; letter-spacing:-.01em;
  background:var(--accent); color:#fff;
  box-shadow:0 2px 6px rgba(var(--accent-rgb),.3), 0 8px 20px rgba(var(--accent-rgb),.22);
  transition:filter .18s, transform .12s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
  white-space:nowrap;
}
.btn:hover:not(:disabled){filter:brightness(1.06)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{background:var(--line); color:#A9A2B3; box-shadow:none; cursor:not-allowed}
.btn.ghost{background:var(--surface); color:var(--pl-ink); border:1px solid var(--line); box-shadow:var(--sh-1)}
.btn.ghost:hover{background:var(--surface-2)}
.submit-wrap{display:flex; flex-direction:column; align-items:flex-end; gap:5px}
.submit-why{font-size:11.5px; color:var(--muted); height:14px}

/* ============================================================
   Potrditev
   ============================================================ */
.confirm{padding:40px 32px; text-align:center; max-width:520px; margin:12px auto 0; animation:rise .5s var(--ease) both}
@keyframes rise{from{opacity:0; transform:translateY(14px) scale(.985)} to{opacity:1; transform:none}}
.confirm .tick{
  width:60px; height:60px; margin:0 auto 18px; border-radius:50%;
  display:grid; place-items:center; color:#fff; background:var(--accent);
  box-shadow:0 6px 20px rgba(var(--accent-rgb),.38);
}
.confirm h2{font-size:22px; margin-bottom:6px}
.confirm p{color:var(--muted); margin:0 0 22px}
.recap{display:flex; flex-direction:column; gap:8px; margin-bottom:24px; text-align:left}
.recap-row{
  display:flex; align-items:center; gap:11px; padding:11px 13px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r);
}
.recap-row .n{width:26px; height:26px; border-radius:7px; display:grid; place-items:center; font-size:12px; font-weight:700; background:var(--accent); color:#fff}
.recap-row:nth-child(2) .n{background:rgba(var(--accent-rgb),.72)}
.recap-row:nth-child(3) .n{background:rgba(var(--accent-rgb),.5)}
.recap-row .nm{font-weight:650; color:var(--pl-ink)}
.recap-row .p{margin-left:auto; font-size:12px; font-weight:650; color:var(--muted)}

/* ============================================================
   Lestvica
   ============================================================ */
.board{padding:8px}
.row{display:grid; grid-template-columns:36px 1fr auto; gap:14px; align-items:center; padding:14px; border-radius:var(--r); transition:background .2s}
.row + .row{border-top:1px solid var(--line)}
.row:hover{background:var(--surface-2)}
.row.win{background:rgba(var(--accent-rgb),.055)}
.row.win:hover{background:rgba(var(--accent-rgb),.08)}
.rk{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  font-size:13px; font-weight:700; background:var(--surface-2); border:1px solid var(--line); color:var(--muted);
}
.row.win .rk{background:var(--accent); border-color:transparent; color:#fff; box-shadow:0 3px 10px rgba(var(--accent-rgb),.35)}
.row-main{min-width:0}
.row-top{display:flex; align-items:center; gap:9px; margin-bottom:7px}
.row-name{font-size:15px; font-weight:650; color:var(--pl-ink); letter-spacing:-.01em}
.row-name a{color:inherit; text-decoration:none; border-bottom:1px solid transparent}
.row-name a:hover{color:var(--pl-purple); border-bottom-color:rgba(118,80,142,.35)}
.crown{
  font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--accent); background:rgba(var(--accent-rgb),.12);
  padding:2px 8px; border-radius:var(--r-pill); transition:color .35s var(--ease);
}
.bar{height:8px; border-radius:99px; background:var(--line); overflow:hidden}
.bar i{display:block; height:100%; border-radius:99px; background:rgba(var(--accent-rgb),.45); width:0; transition:width .7s var(--ease), background .35s var(--ease)}
.row.win .bar i{background:var(--accent)}
.pts{text-align:right; white-space:nowrap}
.pts b{display:block; font-size:19px; font-weight:700; color:var(--pl-ink); letter-spacing:-.02em; line-height:1.1}
.pts span{font-size:11px; color:var(--muted); font-weight:600; letter-spacing:.03em; text-transform:uppercase}
.voters{display:flex; flex-wrap:wrap; gap:5px; margin-top:9px}
.vt{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 8px 3px 7px; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line);
  font-size:11.5px; font-weight:650; color:var(--pl-body);
}
.vt sup{
  font-size:9.5px; font-weight:700; color:#fff; background:rgba(var(--accent-rgb),.5);
  width:15px; height:15px; border-radius:50%; display:grid; place-items:center; top:0;
}
.vt[data-p="3"] sup{background:var(--accent)}
.vt[data-p="2"] sup{background:rgba(var(--accent-rgb),.72)}

details.fold{margin-top:20px}
details.fold > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
  padding:13px 16px; border-radius:var(--r); background:var(--surface);
  border:1px solid var(--line); font-size:14px; font-weight:650; color:var(--pl-ink);
}
details.fold > summary::-webkit-details-marker{display:none}
details.fold > summary::before{content:"▸"; color:var(--muted); transition:transform .2s var(--ease); display:inline-block}
details.fold[open] > summary::before{transform:rotate(90deg)}
details.fold > summary .count{margin-left:auto; font-size:12px; color:var(--muted); font-weight:600}
.people{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); margin-top:12px}
.person{padding:13px 14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r)}
.person-h{display:flex; align-items:center; gap:9px; margin-bottom:9px}
.person-h .av{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:10.5px; font-weight:700; background:#F0EDF4; color:var(--pl-purple)}
.person-h b{font-size:13.5px; color:var(--pl-ink); font-weight:650}
.person-v{display:flex; flex-direction:column; gap:4px}
.pv{display:flex; align-items:center; gap:8px; font-size:12.5px}
.pv .n{width:18px; height:18px; border-radius:5px; display:grid; place-items:center; font-size:10px; font-weight:700; color:#fff; background:rgba(var(--accent-rgb),.5); flex:0 0 auto}
.pv[data-p="3"] .n{background:var(--accent)}
.pv[data-p="2"] .n{background:rgba(var(--accent-rgb),.72)}

/* ============================================================
   Prazna / zaprta stanja
   ============================================================ */
.state{padding:56px 32px; text-align:center; max-width:520px; margin:12px auto 0}
.state .ic{
  width:56px; height:56px; margin:0 auto 18px; border-radius:16px; display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--line); color:var(--muted);
}
.state h2{font-size:19px; margin-bottom:7px}
.state p{color:var(--muted); margin:0 auto 22px; max-width:42ch}
.countdown{display:inline-flex; gap:6px; align-items:flex-end; justify-content:center; margin-bottom:22px; font-variant-numeric:tabular-nums}
.cd-unit{min-width:62px; padding:11px 8px 8px; border-radius:var(--r); background:var(--surface-2); border:1px solid var(--line)}
.cd-unit b{display:block; font-size:24px; font-weight:700; color:var(--pl-ink); letter-spacing:-.03em; line-height:1}
.cd-unit span{font-size:10px; font-weight:650; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}

/* ============================================================
   Noga
   ============================================================ */
footer{border-top:1px solid var(--line); margin-top:48px; padding:22px 0 34px; font-size:12.5px; color:var(--muted)}
.foot-in{max-width:var(--maxw); margin:0 auto; padding:0 20px; display:flex; align-items:center; gap:9px}
.foot-in svg{color:var(--pl-purple); opacity:.85}


/* ============================================================
   Odzivnost
   ============================================================ */
@media (max-width:820px){
  .hdr-in{flex-wrap:wrap; row-gap:10px}
  .brand{order:1} .hdr-spacer{order:2} .navlink{order:3}
  .toggle{order:4; width:100%}
  .toggle a{flex:1 1 0; min-width:0}
  main{padding-top:26px}
}
@media (max-width:640px){
  .grid{grid-template-columns:1fr}
  .slots{flex:1 1 100%; order:1}
  .slot{padding:8px; gap:6px}
  .slot .v{font-size:12.5px}
  .slot .v .long{display:none}
  .slot .v .short{display:inline}
  .slot .x{margin-left:0}
  .submit-wrap{order:2; width:100%; align-items:stretch}
  .btn{width:100%}
  .submit-why{text-align:center}
  .row{grid-template-columns:30px 1fr; row-gap:8px}
  .pts{grid-column:2; text-align:left; display:flex; align-items:baseline; gap:6px}
  .pts b{font-size:16px}
  .tally-av,.tally-ghost{width:34px; height:34px; font-size:10.5px; margin-left:-7px}
  main{padding-bottom:200px}
}

/* ============================================================
   Temni način
   ============================================================ */
@media (prefers-color-scheme:dark){
  :root{
    --bg:#141118; --surface:#1D1922; --surface-2:#232029;
    --line:#2E2A37; --line-strong:#3B3644;
    --pl-ink:#F0EDF4; --pl-body:#C3BCCC; --muted:#8F869C;
    --pl-purple:#A883C0;
    --lj:#1FBF69; --lj-rgb:31,191,105;
    --mb:#8B5FC4; --mb-rgb:139,95,196;
    --sh-1:0 1px 2px rgba(0,0,0,.3);
    --sh-2:0 8px 24px rgba(0,0,0,.4);
    --sh-3:0 -1px 0 var(--line), 0 -12px 32px rgba(0,0,0,.4);
  }
  .hdr{background:rgba(29,25,34,.82)}
  .pickbar{background:rgba(29,25,34,.94)}
  .opt .av,.person-h .av{background:#2E2639; color:#BFA0D4}
  .combo-input.bad{background:#2A1D1E; border-color:#8C4038}
  .fld-err{color:#E68B84}
  .notice{background:rgba(200,144,30,.1); border-color:rgba(200,144,30,.3); color:#D9B366}
  .notice b{color:#EBC988}
  .opt.voted .tag{background:#2E1F1F; border-color:#4A2E2C; color:#D9857A}
}

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


/* ============================================================
   Dodatki aplikacije (prototip jih ni potreboval)
   ============================================================ */

/* .btn se uporablja tudi kot povezava */
a.btn{display:inline-flex; align-items:center; justify-content:center; text-decoration:none}

/* Sporočilo napake s strežnika */
.alert{
  display:flex; gap:10px; align-items:center;
  padding:12px 15px; border-radius:var(--r); margin-bottom:18px;
  background:#FDF4F3; border:1px solid #F2D3CE; color:#A8382F;
  font-size:13.5px; font-weight:600;
}
@media (prefers-color-scheme:dark){
  .alert{background:#2A1D1E; border-color:#4A2E2C; color:#E68B84}
}

/* Brez JS mreža restavracij ostane prazna — povej, zakaj. */
.noscript{
  padding:14px 16px; border-radius:var(--r); font-size:13.5px;
  background:var(--surface); border:1px solid var(--line); color:var(--muted);
}