:root {
    --bg:#0f172a; --card:#1e293b; --card2:#273449;
    --txt:#e2e8f0; --muted:#94a3b8; --line:#334155;
    --accent:#22c55e; --accent2:#16a34a; --gold:#fbbf24;
    --danger:#ef4444; --blue:#38bdf8;
    --led:#2dff9e; --led-amber:#ffce4a;
}
* { box-sizing:border-box; }
body {
    margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    background:radial-gradient(1200px 600px at 50% -10%, #12324a, #0b1220 55%) fixed, #0b1220;
    color:var(--txt); line-height:1.5;
}
body.center { display:flex; min-height:100vh; align-items:center; justify-content:center; padding:16px; }

h1,h2 { margin:0 0 .4em; }
h1 { font-size:1.5rem; } h2 { font-size:1.2rem; }
a { color:var(--blue); text-decoration:none; }
a:hover { text-decoration:underline; }
.muted { color:var(--muted); }
.small { font-size:.82rem; }
.center-t { text-align:center; }

/* layout */
.topbar {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:12px 16px; background:#0b1220cc; backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5;
}
.brand { font-weight:700; }
.userbox { display:flex; align-items:center; gap:12px; font-size:.9rem; }
.link { color:var(--blue); }
.wrap { max-width:560px; margin:0 auto; padding:18px 16px 40px; display:grid; gap:18px; }

.card {
    background:var(--card); border:1px solid var(--line); border-radius:16px;
    padding:18px; box-shadow:0 6px 24px rgba(0,0,0,.25);
}
.card.narrow { max-width:380px; width:100%; }

/* ====================== ŠTEVEC / TOTEM ====================== */
.totem {
    position:relative;
    background:linear-gradient(180deg,#0c4a37 0%, #08362a 55%, #062019 100%);
    border:1px solid #15634a;
    border-radius:26px;
    padding:22px 20px 18px;
    box-shadow:0 18px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
    text-align:center;
}
.totem-head {
    display:flex; align-items:center; gap:12px; justify-content:center;
    margin-bottom:14px;
}
.totem-bike { font-size:2rem; filter:drop-shadow(0 0 6px rgba(45,255,158,.5)); }
.totem-title { font-weight:800; letter-spacing:3px; font-size:1.05rem; color:#d6ffe9; }
.totem-sub   { font-size:.78rem; color:#7fd7b3; letter-spacing:1px; }

.totem-screenlabel { font-size:.74rem; letter-spacing:2px; color:#8fe6c2; }
.totem-date { font-size:.9rem; color:#bdeccf; margin-bottom:10px; }

/* zeleni LED zaslon */
.screen {
    background:#02110b;
    border:1px solid #0e3b2c;
    border-radius:16px;
    padding:18px 12px 12px;
    margin:0 auto;
    box-shadow:inset 0 4px 18px rgba(0,0,0,.7), inset 0 0 0 2px rgba(45,255,158,.06);
}
.digits {
    font-family:"Orbitron", ui-monospace, monospace;
    font-weight:900;
    font-size:clamp(3rem, 18vw, 5rem);
    line-height:1;
    letter-spacing:.06em;
    color:var(--led);
    text-shadow:0 0 8px rgba(45,255,158,.7), 0 0 24px rgba(45,255,158,.35);
}
.digits.dim { color:#1d5c45; text-shadow:none; }
.digits-input {
    width:100%; text-align:center; background:transparent; border:none;
    margin:0; padding:0; caret-color:var(--led);
    -moz-appearance:textfield; appearance:textfield;
}
.digits-input:focus { outline:none; }
.digits-input::placeholder { color:#1d5c45; }
.digits-input::-webkit-outer-spin-button,
.digits-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.screen-foot {
    margin-top:8px; font-size:.82rem; color:var(--led-amber);
    font-variant-numeric:tabular-nums; letter-spacing:.5px; min-height:1.1em;
}

.totem-actions { display:flex; gap:10px; justify-content:center; margin-top:14px; flex-wrap:wrap; }
.totem .status { color:#bdeccf; }

/* dejanski odčitek */
.totem-real {
    margin-top:16px; padding-top:14px; border-top:1px dashed #15634a;
    display:flex; flex-direction:column; align-items:center; gap:2px;
}
.totem-real-label { font-size:.7rem; letter-spacing:2px; color:#7fd7b3; }
.totem-real-num {
    font-family:"Orbitron", monospace; font-weight:800; font-size:1.8rem;
    color:var(--led-amber); text-shadow:0 0 8px rgba(255,206,74,.5); letter-spacing:.08em;
}
.totem-real-num.dim { color:#5c4a1d; text-shadow:none; }
.totem-real-by { font-size:.72rem; color:#7fd7b3; }

/* forms (shared) */
label { display:block; margin:10px 0; font-size:.9rem; color:var(--muted); }
input {
    width:100%; margin-top:4px; padding:11px 12px; font-size:1rem;
    background:var(--card2); border:1px solid var(--line); border-radius:10px; color:var(--txt);
}
input:focus { outline:2px solid var(--accent); border-color:var(--accent); }

.btn {
    display:inline-block; padding:11px 16px; font-size:1rem; font-weight:600;
    background:var(--accent); color:#06210f; border:none; border-radius:10px; cursor:pointer;
    white-space:nowrap;
}
.btn:hover { background:var(--accent2); color:#fff; }
.btn-ghost { background:transparent; color:var(--txt); border:1px solid var(--line); }
.btn-ghost:hover { background:var(--card2); }
.btn-mic {
    padding:11px 16px; font-size:1rem; font-weight:600; border:1px solid #15634a;
    background:#0c3a2c; color:#d6ffe9; border-radius:10px; cursor:pointer;
}
.btn-mic:hover { background:#114a39; }
.btn-mic.listening { background:var(--danger); border-color:var(--danger); color:#fff; animation:pulse 1s infinite; }
@keyframes pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.07);} }

.guess-row { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.guess-row input[type=number] { flex:1; min-width:120px; }
.guess-row input[type=date] { flex:0 0 auto; width:auto; }

.status { font-size:.9rem; margin:10px 0 0; min-height:1.2em; }
.status.ok { color:var(--accent); }
.status.err { color:#fda4a4; }

.alert { background:rgba(239,68,68,.15); border:1px solid var(--danger);
    color:#fecaca; padding:10px 12px; border-radius:10px; margin-bottom:12px; }

/* voice confirm */
.voice-box { margin-top:14px; padding:14px; background:#0c3a2c;
    border:1px dashed var(--accent); border-radius:12px; }
.voice-box strong { font-size:1.3rem; color:var(--led); }
.voice-actions { display:flex; gap:8px; margin-top:8px; justify-content:center; flex-wrap:wrap; }
.hidden { display:none; }

/* chips */
.chips { list-style:none; padding:0; margin:8px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.chip { background:var(--card2); border:1px solid var(--line); padding:5px 11px; border-radius:999px; font-size:.9rem; }

/* ====================== PODIJ / PODIUM ====================== */
.month-nav { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.month-nav .link { font-size:1.7rem; line-height:1; padding:0 10px; }
.month-nav h2 { margin:0; text-align:center; }

.podium {
    display:flex; align-items:flex-end; justify-content:center; gap:10px;
    margin:18px 0 6px;
}
.pod { flex:1 1 0; max-width:150px; text-align:center; }
.pod-medal { font-size:1.9rem; line-height:1; }
.pod-1 .pod-medal { font-size:2.3rem; filter:drop-shadow(0 0 8px rgba(251,191,36,.6)); }
.pod-name {
    font-weight:700; margin-top:2px; font-size:.95rem;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pod-pts { font-size:.8rem; color:var(--muted); margin-bottom:6px; }

.pedestal {
    border-radius:10px 10px 0 0; display:flex; align-items:center; justify-content:center;
    font-family:"Orbitron", monospace; font-weight:900; font-size:1.6rem; color:#06210f;
    box-shadow:inset 0 2px 0 rgba(255,255,255,.35), 0 6px 14px rgba(0,0,0,.4);
}
.pod-1 .pedestal { height:108px; }
.pod-2 .pedestal { height:78px; }
.pod-3 .pedestal { height:58px; }
.pedestal.gold   { background:linear-gradient(180deg,#fde68a,#f59e0b); }
.pedestal.silver { background:linear-gradient(180deg,#f1f5f9,#94a3b8); }
.pedestal.bronze { background:linear-gradient(180deg,#fcd9b6,#b97a3e); color:#3a1d09; }
.pod-me .pod-name { color:var(--blue); }
.pod-me .pedestal { outline:2px solid var(--blue); outline-offset:1px; }

/* full standings (collapsible) */
.full-table { margin-top:12px; }
.full-table > summary {
    cursor:pointer; color:var(--blue); font-weight:600; padding:6px 0; list-style:none;
}
.full-table > summary::-webkit-details-marker { display:none; }
.full-table > summary::before { content:"▸ "; }
.full-table[open] > summary::before { content:"▾ "; }

/* tables */
.table-scroll { overflow-x:auto; }
.table { width:100%; border-collapse:collapse; margin-top:8px; font-size:.95rem; }
.table th, .table td { padding:8px 10px; text-align:left; border-bottom:1px solid var(--line); }
.table th { color:var(--muted); font-weight:600; font-size:.85rem; }
.standings td, .standings th { text-align:center; }
.standings td:nth-child(2), .standings th:nth-child(2) { text-align:left; }
.table .pts { font-weight:700; color:var(--accent); }
.table tr.winner { background:rgba(251,191,36,.12); }
.table tr.me { background:rgba(56,189,248,.12); }
.tag { font-size:.7rem; background:var(--blue); color:#06210f; padding:1px 6px; border-radius:6px; vertical-align:middle; }

@media (max-width:480px){
    .wrap { padding:12px; }
    .card { padding:14px; }
    .pod-medal { font-size:1.6rem; }
    .pod-1 .pod-medal { font-size:2rem; }
}