/* Jarvis — zajednički stil varijanti v1–v4 (tamno). v5 je svijetli i ima svoje tokene.
   IZVAN dizajn-okvira (HODOGRAM 12. 10.), ali s pravilima JASNOĆE iz Kruninog komentara:
   neprozirni paneli, jasna naslovna traka sekcije, glavni tekst ≥ 7:1, jedna naglasna boja (zlato = sljedeće),
   crvena samo za oznaku hitnog, bez prozirnog teksta. */
:root{
  --noc:#060919; --panel:#0F1640; --panel-2:#141C4E; --rub:rgba(150,170,255,.30); --rub-jak:rgba(185,198,255,.85);
  --sjaj:rgba(110,130,255,.40); --tekst:#F1F3FF; --tekst-2:#BAC4EE; --zlato:#EBC266; --zlato-sjaj:rgba(235,194,102,.40);
  --crvena:#FF9C9C; --cestica:170,186,255; --linija:rgba(143,162,255,.38);
  --sans:'Outfit',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html,body{height:100%}
body{background:radial-gradient(1200px 700px at 50% 30%,#111a4d 0%,var(--noc) 62%);color:var(--tekst);font:300 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--zlato);outline-offset:2px;border-radius:8px}
svg.ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
#bg{position:fixed;inset:0;z-index:0;pointer-events:none}
#links{position:fixed;inset:0;z-index:1;pointer-events:none}
#links path{fill:none;stroke:var(--linija);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s var(--ease)}
#links path.on{stroke-dashoffset:0}
#links circle{fill:var(--zlato);filter:drop-shadow(0 0 6px var(--zlato))}
.app{position:relative;z-index:2}

/* ---------- jezgra (Lega) + radijalni sat dana */
.core{position:relative;width:var(--core,400px);height:var(--core,400px);transition:width .6s var(--ease),height .6s var(--ease)}
.core svg.rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ring{transform-origin:220px 220px}
.r1{animation:spin 60s linear infinite}.r2{animation:spin 38s linear infinite reverse}.r3{animation:spin 90s linear infinite}
.core.think .r1{animation-duration:8s}.core.think .r2{animation-duration:5s}
@keyframes spin{to{transform:rotate(360deg)}}
.orb{position:absolute;left:50%;top:50%;width:34%;height:34%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 50% 45%,rgba(160,175,255,.55),rgba(40,52,140,.6) 55%,rgba(10,14,50,.2) 72%);box-shadow:0 0 40px var(--sjaj),inset 0 0 30px rgba(160,175,255,.35);display:grid;place-items:center}
.orb img{width:32%;filter:drop-shadow(0 0 12px var(--zlato-sjaj))}
.core.think .orb{animation:breathe 1.1s ease-in-out infinite}
@keyframes breathe{50%{box-shadow:0 0 70px rgba(130,150,255,.75),inset 0 0 40px rgba(180,195,255,.5)}}
.clock{position:absolute;left:0;right:0;top:20%;text-align:center;font:400 13px var(--mono);color:var(--tekst-2);letter-spacing:.2em}
.status{position:absolute;left:0;right:0;bottom:-8px;text-align:center;font:400 12px var(--mono);letter-spacing:.16em;color:var(--tekst-2)}
.wave{position:absolute;left:50%;top:76%;transform:translateX(-50%);display:flex;gap:3px;height:20px;align-items:center;opacity:0;transition:opacity .2s}
.wave.on{opacity:1}.wave i{width:3px;height:4px;border-radius:2px;background:var(--rub-jak);transition:height .08s}
.ring-bg{fill:none;stroke:rgba(143,162,255,.12);stroke-width:14;stroke-linecap:round}
.seg{fill:none;stroke-width:14;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--ease)}
.seg.on{stroke-dashoffset:0}
.seg.c{stroke:rgba(150,170,255,.8);filter:drop-shadow(0 0 6px var(--sjaj))}.seg.p{stroke:rgba(186,196,238,.35)}
.seg.g{stroke:var(--zlato);filter:drop-shadow(0 0 8px var(--zlato-sjaj))}.seg.x{stroke:rgba(143,162,255,.18)}
.tick{stroke:rgba(186,196,238,.4);stroke-width:1}
.tlab{fill:var(--tekst-2);font:11px var(--mono)}
.needle{stroke:var(--zlato);stroke-width:2;filter:drop-shadow(0 0 6px var(--zlato))}

/* ---------- panel: neprozirno, jasna naslovna traka */
.hud{position:relative;background:var(--panel);border-radius:10px;opacity:0;transform:perspective(900px) translateY(10px);transition:opacity .35s var(--ease),transform .5s var(--ease);overflow:hidden}
.hud.in{opacity:1;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.hud[data-go]{cursor:pointer}
.hud[data-go]:hover{background:var(--panel-2)}

.hud .lab{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--rub);background:rgba(255,255,255,.03)}
.hud .lab span:first-child{font:500 15px var(--sans);color:var(--tekst);letter-spacing:.01em}
.hud .lab span:last-child{font:400 12px var(--mono);color:var(--tekst-2);letter-spacing:.08em}
.hud .body{padding:16px 18px 18px;opacity:0;transition:opacity .3s .3s}
.hud.in .body{opacity:1}
.hud.gold{box-shadow:inset 3px 0 0 var(--zlato)}
.hud.gold .lab span:first-child{color:var(--zlato)}
.hud.red{box-shadow:inset 3px 0 0 var(--crvena)}.hud.red .lab span:first-child{color:var(--crvena)}
.big{font:200 60px/1 var(--sans);letter-spacing:-.03em;color:var(--tekst)}
.big small{font-size:22px;margin-left:6px;color:var(--tekst-2)}
.gold .big{color:var(--zlato);text-shadow:0 0 22px var(--zlato-sjaj)}
.sub{color:var(--tekst-2);font-size:15px;margin-top:6px}
.line{font:400 19px/1.3 var(--sans);margin-top:8px}
.q{font:italic 300 16.5px/1.45 var(--sans);color:var(--tekst);margin-top:6px}
.rows{list-style:none;padding:0}
.rows li{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid rgba(150,170,255,.14);opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s}
.rows li.on{opacity:1;transform:none}
.rows li:first-child{border-top:0;padding-top:2px}
.rows time{font:400 14.5px var(--mono);color:var(--tekst)}
.rows b{font-weight:400;font-size:16.5px}
.rows small{display:block;color:var(--tekst-2);font-size:14px}
.tg{font:500 11px var(--mono);letter-spacing:.1em;padding:3px 8px;border:1px solid var(--rub);border-radius:4px;color:var(--tekst-2);white-space:nowrap}
.tg.g{border-color:var(--zlato);color:var(--zlato)}.tg.r{border-color:var(--crvena);color:var(--crvena)}
.bars{display:flex;align-items:flex-end;gap:10px;height:190px}
.bars div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%}
.bars i{width:100%;height:0;background:linear-gradient(180deg,rgba(160,175,255,.85),rgba(60,75,170,.3));border:1px solid rgba(170,186,255,.6);border-radius:4px 4px 0 0;box-shadow:0 0 14px var(--sjaj);transition:height .7s var(--ease)}
.bars i.on{background:linear-gradient(180deg,rgba(235,194,102,.9),rgba(120,90,20,.3));border-color:var(--zlato);box-shadow:0 0 14px var(--zlato-sjaj)}
.bars span{font:11.5px var(--mono);color:var(--tekst-2);text-align:center}.bars span b{display:block;color:var(--tekst);font-weight:500;font-size:13px}

/* ---------- odgovor */
.ans{display:flex;flex-direction:column;gap:16px}
.ans > *{flex-shrink:0}
.qv{font:400 12.5px var(--mono);letter-spacing:.1em;color:var(--tekst-2)}
.say{font:300 30px/1.3 var(--sans);max-width:44ch;min-height:1.3em}
.say .c{opacity:0}.say .c.on{opacity:1}
.src{display:flex;gap:8px;flex-wrap:wrap}
.src span{font:11px var(--mono);letter-spacing:.08em;color:var(--tekst-2);border:1px solid var(--rub);padding:3px 8px;border-radius:4px}
.hgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;align-items:start}
.hgrid .hud{grid-column:span var(--s,12)}

/* ---------- pitaj Legu */
.dock{display:flex;flex-direction:column;gap:10px}
.sugg{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.sugg button{white-space:nowrap;font:400 14px var(--sans);padding:9px 14px;border:1px solid var(--rub);border-radius:999px;color:var(--tekst);background:var(--panel);min-height:40px}
.sugg button:hover{border-color:var(--rub-jak);box-shadow:0 0 12px var(--sjaj)}
.sugg button.home{color:var(--zlato);border-color:rgba(235,194,102,.6)}
.cmd{display:flex;align-items:center;gap:10px;border:1px solid var(--rub);border-radius:14px;background:var(--panel);padding:6px 6px 6px 16px;box-shadow:0 0 24px rgba(60,80,200,.2)}
.cmd .p{font-family:var(--mono);color:var(--zlato)}
.cmd input{flex:1;background:none;border:0;outline:0;color:var(--tekst);font:300 18px var(--sans);height:44px;min-width:0}
.cmd input::placeholder{color:#8F9AC9}
.cmd button{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--rub)}
.cmd .mic.on{border-color:var(--crvena);box-shadow:0 0 14px rgba(255,156,156,.5)}
.opts{display:flex;gap:18px;font:11.5px var(--mono);letter-spacing:.06em;color:var(--tekst-2)}
.opts label{display:flex;gap:6px;align-items:center}.opts input{accent-color:var(--zlato)}

/* ---------- izbornik (stil daje varijanta; ovdje zajedničko) */
#menu button{display:flex;align-items:center;gap:10px;color:var(--tekst-2);font:400 15px var(--sans);border-radius:10px;min-height:44px}
#menu button.on{color:var(--tekst)}
#menu .b{font:500 11px var(--mono);color:var(--noc);background:var(--zlato);border-radius:6px;padding:1px 6px;margin-left:auto}

@media (max-width:1100px){
  #links{display:none}
  .say{font-size:23px}
  .hgrid{grid-template-columns:1fr 1fr;gap:12px}
  .hgrid .hud{grid-column:1 / -1}
  .hgrid .hud.half{grid-column:span 1}
  .hud.half .big{font-size:42px}
  .opts{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- TEMA „svjetlije plavo” (prekidač u izborniku; Kristijanu se sviđaju plave boje)
   Izračunato iz hue 272 (oklch), sve provjere prolaze: tekst 15–17:1, sporedni 7–8:1, zlato na sidru 8,8:1. */
:root[data-theme="svjetlo"]{
  --noc:#E4EBFF; --panel:#FDFDFF; --panel-2:#F2F5FF; --rub:#C9D0E9; --rub-jak:#586ABD; --sjaj:rgba(88,106,189,.22);
  --tekst:#10162F; --tekst-2:#434C69; --zlato:#EBC266; --zlato-sjaj:rgba(235,194,102,.35); --crvena:#A12A2A;
  --cestica:111,129,200; --linija:rgba(88,106,189,.35); --sidro:#18205E;
}
[data-theme="svjetlo"] body{background:radial-gradient(1200px 700px at 50% 30%,#F2F5FF 0%,var(--noc) 70%)}
[data-theme="svjetlo"] .hud{box-shadow:0 1px 2px rgba(16,22,47,.05),0 4px 14px rgba(16,22,47,.05)}
[data-theme="svjetlo"] .hud .lab{background:#F6F8FF}
[data-theme="svjetlo"] .hud.gold{background:var(--sidro);color:#FAF8F5;box-shadow:none}
[data-theme="svjetlo"] .hud.gold .lab{background:rgba(255,255,255,.06);border-color:#2C3771}
[data-theme="svjetlo"] .hud.gold .lab span:last-child,[data-theme="svjetlo"] .hud.gold .sub,[data-theme="svjetlo"] .hud.gold .big small{color:#C2CAE2}
[data-theme="svjetlo"] .hud.gold .line,[data-theme="svjetlo"] .hud.gold b{color:#FAF8F5}
[data-theme="svjetlo"] .hud.red{box-shadow:inset 3px 0 0 var(--crvena),0 1px 2px rgba(16,22,47,.05)}

[data-theme="svjetlo"] .rows li{border-color:#E3E8F7}
[data-theme="svjetlo"] .big{text-shadow:none}
[data-theme="svjetlo"] .orb{background:radial-gradient(circle at 50% 45%,#2C3771,#18205E 60%,#12184a 75%);box-shadow:0 0 40px rgba(88,106,189,.35)}
[data-theme="svjetlo"] .ring-bg{stroke:rgba(24,32,94,.08)}
[data-theme="svjetlo"] .seg.c{stroke:#8FA0E8;filter:none}[data-theme="svjetlo"] .seg.p{stroke:#C9D0E9}[data-theme="svjetlo"] .seg.x{stroke:#DCE2F4}
[data-theme="svjetlo"] .seg.g{stroke:#D4A23A;filter:none}[data-theme="svjetlo"] .tick{stroke:#B4BEDD}[data-theme="svjetlo"] .needle{stroke:#C2410C;filter:none}
[data-theme="svjetlo"] .core svg.rings circle{stroke:rgba(30,58,200,.38)!important}
[data-theme="svjetlo"] .bars i{background:linear-gradient(180deg,#B9C5F5,#DCE3FF);border-color:#8FA0E8;box-shadow:none}
[data-theme="svjetlo"] .bars i.on{background:linear-gradient(180deg,#2C3771,#18205E);border-color:#18205E;box-shadow:none}
[data-theme="svjetlo"] .cmd,[data-theme="svjetlo"] .sugg button{box-shadow:0 1px 2px rgba(16,22,47,.05),0 4px 14px rgba(16,22,47,.05)}
[data-theme="svjetlo"] .cmd .p,[data-theme="svjetlo"] .sugg button.home{color:var(--sidro);border-color:var(--sidro)}
[data-theme="svjetlo"] .cmd input::placeholder{color:#6B7396}
[data-theme="svjetlo"] #menu .b{background:#DBE4FF;color:#232B4C}
[data-theme="svjetlo"] #links circle{fill:#586ABD;filter:none}
[data-theme="svjetlo"] .gold .big{color:var(--zlato)}
[data-theme="svjetlo"] .tg.g{color:#7A5510;border-color:#D4A23A}
[data-theme="svjetlo"] :focus-visible{outline-color:#586ABD}
/* prekidač teme */
.tema{display:flex;align-items:center;gap:8px;color:var(--tekst-2);font:400 14px var(--sans);border:1px solid var(--rub);border-radius:999px;padding:6px 12px;min-height:36px;background:var(--panel)}
.tema:hover{color:var(--tekst);border-color:var(--rub-jak)}
#menu .tema{margin-top:auto;justify-content:center}
@media (max-width:1100px){#menu .tema{flex:0 0 44px;margin:0;border:0;background:none;padding:0;font-size:20px}#menu .tema .tl{display:none}}
.ring-bg{fill:none}
.tlab.gl{fill:var(--tekst);font-weight:500;font-size:12.5px}
/* „traje” — svijetli luk (legenda u Postavkama) */
.seg.n{stroke:#F1F3FF;filter:drop-shadow(0 0 6px rgba(240,244,255,.6))}
[data-theme="svjetlo"] .seg.n{stroke:#18205E;filter:none}
.seg.x{stroke-width:8}
/* nova jezgra (canvas) u verzijama */
.core.jz canvas#jez{position:absolute;inset:0;width:100%;height:100%}
.core .anchor{position:absolute;left:50%;top:50%;width:40px;height:40px;transform:translate(-50%,-50%);pointer-events:none}
.core.jz .wave{top:auto;bottom:-34px}
.core.jz .status{bottom:-14px}

/* ---------- zlato u SVJETLIJOJ temi: puno blaže (Kruno 12. 10.) — paleta.py "#E2B04A" (hue 82):
   linije/lukovi = pastel rub #D9B97E (bez sjaja), plohe/gumbi = pastel #F7E2BC + tekst #3D2A02 (10,8:1),
   tekst u zlatu = #7A5510 (6,6:1), aktivno u izborniku = tamnoplavo. Na tamnoplavoj kartici #D9B97E ima 7,95:1. */
:root[data-theme="svjetlo"]{--zlato:#D9B97E;--zlato-sjaj:rgba(217,185,126,.28);--zlato-ploha:#F7E2BC;--zlato-tekst:#3D2A02}
[data-theme="svjetlo"] .gold .big{text-shadow:none}
[data-theme="svjetlo"] .hud.gold{box-shadow:none}

[data-theme="svjetlo"] #menu button.on{box-shadow:inset 3px 0 0 #18205E!important;color:var(--tekst)}
[data-theme="svjetlo"] #menu .b{background:#F7E2BC;color:#3D2A02}
[data-theme="svjetlo"] .sugg button.home{color:#18205E;border-color:#18205E}
[data-theme="svjetlo"] .tg.g{color:#7A5510;border-color:#D9B97E}
[data-theme="svjetlo"] .btn.pri,[data-theme="svjetlo"] a.go{background:var(--zlato-ploha)!important;border-color:#D9B97E!important;color:var(--zlato-tekst)!important}
[data-theme="svjetlo"] .prep{background:var(--zlato-ploha);color:var(--zlato-tekst)}
[data-theme="svjetlo"] .states button.on{box-shadow:none}
[data-theme="svjetlo"] #links circle{fill:#586ABD}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sr-only button:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;clip:auto;z-index:99;background:var(--panel);color:var(--tekst);padding:10px 14px;border:2px solid var(--zlato);border-radius:10px}

/* =====================================================================
   LEGA-APP — kompletna verzija (12. 10. 2026.). Ispod: P2 popravci iz audita (jarvis/audit/IZVJESTAJ.md)
   i komponente stranica. Stare datoteke (jarvis/, raspored/…) se ne diraju.
   ===================================================================== */
/* P2 #2 — ništa ispod 12 px */
#menu a,#menu button{font-size:12px}
#menu .b,.tg,.tlab,.rows .tg,.opts{font-size:12px}
/* P2 #3 — dodirni ciljevi ≥ 44 px */
.sugg button{min-height:44px}
.opts label{min-height:44px;padding:0 6px;cursor:pointer}
/* P2 #4 — 4 px grid (18 → 16/20) */
.hud .lab{padding:12px 20px}
.hud .body{padding:16px 20px 20px}
/* KUĆICE ISTAKNUTE BOJOM PO VRSTI (Kruno 14. 10.: „kao stari prijedlozi 6 Svjetlosna jezgra i proba”) — vraća traku uz rub
   koju je P3 iz audita bio uklonio (odstupanje od impeccable „side-tab” zapisano u HODOGRAM): crveno = hitno/sigurnost, zlatno = sljedeće.
   Uz to kutne oznake u boji vrste i žice/kuglice iz kruga iste boje. */
.hud{--vrsta:rgba(143,162,255,.7)}
.hud.red{--vrsta:var(--crvena);box-shadow:inset 3px 0 0 var(--crvena);background:color-mix(in srgb,var(--panel) 92%,var(--crvena))}
.hud.gold{--vrsta:var(--zlato);box-shadow:inset 3px 0 0 var(--zlato);background:color-mix(in srgb,var(--panel) 87%,var(--zlato))}
.hud.gold .big{color:var(--zlato)}

.hud.in::before,.hud.in::after{opacity:1}
#links path.red{stroke:rgba(255,156,156,.55)}#links path.gold{stroke:rgba(235,194,102,.6)}
#links circle.red{fill:var(--crvena);filter:drop-shadow(0 0 6px var(--crvena))}
[data-theme="svjetlo"] .hud{--vrsta:#586ABD}
[data-theme="svjetlo"] .hud.gold .big{color:#F7E2BC}
[data-theme="svjetlo"] #links path.red{stroke:rgba(161,42,42,.45)}[data-theme="svjetlo"] #links circle.red{fill:var(--crvena)}
.hud.red .lab span:first-child::before,.k-hitno .naslov::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--crvena);margin-right:8px;vertical-align:1px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- ljuska: izbornik lijevo (računalo) / dolje (mobitel), stranica, Lega na dnu */
body.app-body{overflow:auto}
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
#menu{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px;padding:20px 14px;border-right:1px solid var(--rub);background:color-mix(in srgb,var(--noc) 80%,transparent);z-index:5}
#menu .brand{display:flex;align-items:center;gap:10px;padding:2px 10px 22px;font:500 14px var(--mono);letter-spacing:.14em;color:var(--tekst);text-decoration:none}
#menu .brand img{width:24px}
#menu a.nav{border:1px solid transparent;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--tekst-2);text-decoration:none;font:400 15px var(--sans);min-height:44px}
#menu a.nav:hover{background:var(--panel)}
#menu a.nav.on{background:var(--panel);color:var(--tekst);border:1px solid var(--rub-jak);font-weight:500}
[data-theme="svjetlo"] #menu a.nav.on{border-color:#18205E}
#menu .b{margin-left:auto;font:500 12px var(--mono);color:var(--noc);background:var(--zlato);border-radius:6px;padding:1px 7px}
[data-theme="svjetlo"] #menu .b{background:#F7E2BC;color:#3D2A02}
#menu .tema{margin-top:auto}
.page{padding:24px 32px 190px;max-width:1280px;width:100%;position:relative;z-index:2}
.ph{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.ph .crumb{font:400 13px var(--mono);letter-spacing:.02em;color:var(--tekst-2)}
.ph .crumb a{color:var(--tekst-2);text-decoration:none;display:inline-block;padding:12px 0}
.ph .crumb a:hover{color:var(--tekst)}
.ph h1{font:300 36px/1.1 var(--sans);letter-spacing:-.01em;width:100%}
.ph p{color:var(--tekst-2);width:100%}
.ph .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--rub);background:var(--panel);font:400 15px var(--sans);color:var(--tekst);cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--rub-jak)}
.btn.pri{background:var(--zlato);border-color:var(--zlato);color:#1A1206;font-weight:500}
[data-theme="svjetlo"] .btn.pri{background:#F7E2BC;border-color:#D9B97E;color:#3D2A02}
.btn.sm{min-height:44px;padding:0 12px;font-size:14px}
.hud.static{opacity:1;transform:none}.hud.static .body{opacity:1}
.dock-app{position:fixed;left:240px;right:0;bottom:0;z-index:30;padding:12px 32px 10px;background:linear-gradient(transparent,var(--noc) 30%)}
.dock-app .in{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
#val{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.filters a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid var(--rub);border-radius:999px;color:var(--tekst-2);text-decoration:none;font:400 14px var(--sans);background:var(--panel)}
.filters a.on{color:var(--tekst);border-color:var(--rub-jak);box-shadow:0 0 0 1px var(--rub-jak) inset}
.filters a b{font:500 12px var(--mono);color:var(--tekst-2)}
.dayh{font:500 12px var(--mono);letter-spacing:.12em;color:var(--tekst-2);text-transform:uppercase;margin:18px 0 8px}

/* boje kategorija (pločice, način B — traka uz rub kartice zamijenjena ruba u boji) */
.k-hitno{--k:255,140,140}.k-upit{--k:125,155,255}.k-uplata{--k:110,220,160}.k-izvj{--k:185,145,255}.k-sustav{--k:150,160,190}.k-osobno{--k:240,180,120}.k-privatno{--k:120,205,200}
[data-theme="svjetlo"] .k-hitno{--k:178,34,34}[data-theme="svjetlo"] .k-upit{--k:52,72,196}[data-theme="svjetlo"] .k-uplata{--k:18,120,70}[data-theme="svjetlo"] .k-izvj{--k:106,56,196}[data-theme="svjetlo"] .k-sustav{--k:84,94,120}[data-theme="svjetlo"] .k-osobno{--k:150,90,20}[data-theme="svjetlo"] .k-privatno{--k:18,110,110}
/* pločica emaila: svijetleći rub u boji kategorije (način A, blaži) */
.mail{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:start;padding:14px 18px;border-radius:12px;background:var(--panel);border:1px solid rgba(var(--k),.55);box-shadow:0 0 14px rgba(var(--k),.12);color:var(--tekst);text-decoration:none;margin-bottom:10px}
.mail:hover{border-color:rgba(var(--k),.9);box-shadow:0 0 18px rgba(var(--k),.22)}
.mail.procitano{border-color:var(--rub);box-shadow:none}
.mail .av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:500 15px var(--sans);background:var(--panel-2)}
.mail .who{font:500 16.5px var(--sans)}
.mail .subj{font:500 15px var(--sans);margin-top:2px}
.mail .ab{color:var(--tekst-2);font-size:15px;margin-top:2px}
.mail .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.mail .kat{color:rgb(var(--k));border-color:rgba(var(--k),.6)}
.mail time{font:12px var(--mono);color:var(--tekst-2);white-space:nowrap}
.tbl{width:100%;border-collapse:collapse}
.tbl th{font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tekst-2);text-align:left;padding:10px 14px;border-bottom:1px solid var(--rub)}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--rub);vertical-align:middle}
.tbl tr:hover td{background:var(--panel-2)}
.tbl a{color:var(--tekst);text-decoration:none}
.tbl .who{display:flex;align-items:center;gap:12px}
.tbl .av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:500 13px var(--sans);background:var(--panel-2);flex:none}
.tbl small{display:block;color:var(--tekst-2);font-size:13.5px}
.grid2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:18px;align-items:start}
.col{display:flex;flex-direction:column;gap:18px}

@media (max-width:1100px){
  .app{grid-template-columns:1fr}
  #menu{position:fixed;top:auto;height:auto;left:8px;right:8px;bottom:8px;flex-direction:row;padding:6px;border:1px solid var(--rub);border-radius:18px;background:var(--panel);gap:2px;z-index:40}
  #menu .brand{display:none}
  #menu a.nav{flex:1;flex-direction:column;gap:2px;font-size:12px;padding:6px 0;justify-content:center;min-height:52px}
  #menu a.nav.on{box-shadow:inset 0 -2px 0 var(--zlato)}
  [data-theme="svjetlo"] #menu a.nav.on{box-shadow:inset 0 -2px 0 #18205E}
  #menu .b{display:none}
  #menu .tema{flex:0 0 44px;margin:0;border:0;background:none;padding:0;font-size:20px}#menu .tema .tl{display:none}
  .page{padding:16px 14px 250px}
  .ph h1{font-size:28px}
  .dock-app{left:0;bottom:76px;padding:10px 12px 8px}
  .grid2{grid-template-columns:1fr}
  .mail{grid-template-columns:40px minmax(0,1fr);padding:12px 14px}
  .mail time{grid-column:2}
  .tbl .hide-m{display:none}
}

/* ---------- Lega na dnu običnih stranica: odgovor na licu mjesta */

/* ---------- zajedničke komponente stranica (profil, programi, email) — skala fonta 12·14·16·20·28·40, 4 px grid */
.head{display:flex;align-items:center;gap:20px;margin:4px 0 20px;flex-wrap:wrap}
.head .avb{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font:300 28px var(--sans);background:var(--panel-2);border:1px solid var(--rub-jak)}
.head h1{font:300 40px/1.1 var(--sans);letter-spacing:-.01em}
.head .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.head .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 20px}
.kv small{display:block;font:400 12px var(--mono);letter-spacing:.1em;color:var(--tekst-2);text-transform:uppercase}
.kv b{font:400 16px var(--sans);overflow-wrap:anywhere}
.kv i{font:12px var(--mono);font-style:normal;color:var(--tekst-2);margin-left:6px}
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rub);margin:20px -20px -20px}
.nums div{padding:16px 20px;border-left:1px solid var(--rub)}
.nums div:first-child{border-left:0}
.nums b{display:block;font:200 40px/1 var(--sans);letter-spacing:-.02em}
.nums b small{font-size:16px;color:var(--tekst-2);margin-left:4px}
.nums span{font-size:14px;color:var(--tekst-2)}
.days{display:grid;grid-template-columns:repeat(21,minmax(0,1fr));gap:4px;margin:8px 0 12px}
.days i{aspect-ratio:1;border-radius:50%;border:1px solid var(--rub);display:grid;place-items:center;font:12px var(--mono);font-style:normal;color:var(--tekst-2)}
.days i.ok{background:var(--rub-jak);border-color:var(--rub-jak);color:var(--noc)}
.days i.miss{border-color:var(--crvena);color:var(--crvena)}
.days i.today{box-shadow:0 0 0 2px var(--zlato)}
[data-theme="svjetlo"] .days i.ok{background:#3D4FA8;border-color:#3D4FA8;color:#fff}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--tekst-2)}
.legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px;border:1px solid var(--rub)}
.legend .l-ok::before{background:var(--rub-jak);border-color:var(--rub-jak)}.legend .l-miss::before{border-color:var(--crvena)}
.prog{height:8px;border-radius:4px;background:var(--panel-2);overflow:hidden;margin:12px 0 8px}
.prog i{display:block;height:100%;background:var(--zlato);border-radius:4px}
.tl{list-style:none;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:1px;background:var(--rub)}
.tl .mo{font:500 12px var(--mono);letter-spacing:.12em;color:var(--tekst-2);padding:16px 0 8px 44px}
.tl li.e{position:relative;padding:8px 0 12px 44px}
.tl li.e .d{position:absolute;left:4px;top:8px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--panel-2);border:1px solid var(--rub);font:12px var(--mono)}
.tl li.e.pay .d{border-color:var(--zlato);color:var(--zlato)}
.tl li.e.book .d{background:var(--rub-jak);color:var(--noc);border-color:var(--rub-jak)}
[data-theme="svjetlo"] .tl li.e.book .d{background:#3D4FA8;border-color:#3D4FA8;color:#fff}
[data-theme="svjetlo"] .tl li.e.pay .d{color:#7A5510}
.tl li.e b{font-weight:400}
.tl li.e small{display:block;color:var(--tekst-2);font-size:14px}
.tl li.e time{font:12px var(--mono);color:var(--tekst-2);margin-left:8px}
.note{padding:12px 0;border-top:1px solid var(--rub)}.note:first-child{border-top:0;padding-top:0}
.note small{display:block;font:12px var(--mono);color:var(--tekst-2);letter-spacing:.06em;margin-top:4px}
.tg.k{color:rgb(var(--k));border-color:rgba(var(--k),.6)}
.tbl tr.lnk{cursor:pointer}
.tbl .num-c{font:400 16px var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{display:flex;gap:16px;align-items:flex-start;padding:16px 20px;background:var(--panel);border:1px solid var(--rub);border-radius:16px;text-decoration:none;color:var(--tekst)}
.card:hover{border-color:var(--rub-jak)}
.card svg.ic{margin-top:2px;color:var(--tekst-2);flex:none}
.card b{font-weight:500;display:block}
.card small{color:var(--tekst-2);font-size:14px}
.sec{margin-top:32px}
.sec h2{font:400 28px/1.2 var(--sans);letter-spacing:-.01em;margin-bottom:4px}
.sec > p{color:var(--tekst-2);margin-bottom:16px;max-width:75ch}
.empty{padding:24px;text-align:center;color:var(--tekst-2);border:1px dashed var(--rub-jak);border-radius:16px}

@media (max-width:1100px){
  .head{gap:12px}
  .head .avb{width:52px;height:52px;font-size:20px}
  .head h1{font-size:28px}
  .head .acts{margin-left:0;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .head .acts .btn.pri{grid-column:1 / -1}
  .kv{grid-template-columns:1fr 1fr}
  .kv div:first-child{grid-column:1 / -1}
  .nums{grid-template-columns:1fr 1fr}
  .nums div:nth-child(3){border-left:0}
  .nums div:nth-child(n+3){border-top:1px solid var(--rub)}
  .days{grid-template-columns:repeat(11,minmax(0,1fr))}
  .sec h2{font-size:20px}
}
#toast{position:fixed;left:50%;top:20px;transform:translate(-50%,-140%);z-index:60;padding:12px 20px;border-radius:12px;background:var(--panel);border:1px solid var(--rub-jak);color:var(--tekst);font:400 15px var(--sans);transition:transform .3s var(--ease);max-width:calc(100vw - 32px)}
#toast.on{transform:translate(-50%,0)}
/* popravci nakon screenshota (12. 10.): grid stupci se ne šire zbog reda prijedloga (vodoravni pomak na 375);
   bez trake uz lijevi rub i u svjetlijoj temi; valovi ne prelaze preko putanje i naslova */
.app > *,.main,.dock,.dock-app{min-width:0}
[data-theme="svjetlo"] .hud.red{box-shadow:none}

.page{padding-top:72px}
@media (max-width:1100px){.page{padding-top:56px}}
/* red prijedloga nikad ne širi roditelja (flex min-width) — klizi vodoravno unutar sebe */
.sugg{min-width:0;max-width:100%}
.grid2 > *,.col > *{min-width:0}
.niz .tg,.prilozi .tg,.meta .tg,.mail .tg{white-space:normal}
/* mala živa sfera na mobitelu (obične stranice) */
.mjez{display:none}
@media (max-width:1100px){
  /* Kruno 15. 10.: krug na sredini ekrana kao prozirna sjena (~20 %), sadržaj ide preko njega; ne smeta dodirima */
  .mjez{display:block;position:fixed;left:50%;top:44dvh;width:min(80vw,340px);height:min(80vw,340px);transform:translate(-50%,-50%);z-index:0;opacity:.2;pointer-events:none;border-radius:50%}
  .page > :not(.mjez){position:relative;z-index:1}
  .mjez canvas{width:100%;height:100%;display:block}
  .ph .crumb{padding-right:0}
  .ph h1,.head{padding-right:0}
}

/* ---------- Postavke → Emailovi: obrasci i pregled emaila */
.frm{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.frm label{display:flex;flex-direction:column;gap:8px;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-2)}
.frm label.wide{grid-column:1 / -1}
.frm label.chk{flex-direction:row;align-items:center;gap:12px;text-transform:none;letter-spacing:0;font:400 16px var(--sans);color:var(--tekst);min-height:44px}
.frm input:is([type=text],[type=password],[type=number],[type=email],[type=time],[type=date],[type=datetime-local],[type=search],[type=tel],[type=url]),.frm textarea,.frm select{width:100%;min-height:44px;padding:12px 16px;border-radius:12px;border:1px solid var(--rub-jak);background:var(--panel-2);color:var(--tekst);font:400 16px/1.55 var(--sans);text-transform:none;letter-spacing:0}
.frm textarea{resize:vertical}
.frm input[type=checkbox]{width:20px;height:20px;accent-color:var(--zlato)}
.frm .mono{font-family:var(--mono);font-size:14px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{min-height:36px;padding:0 12px;border-radius:8px;border:1px solid var(--rub);background:var(--panel-2);color:var(--tekst);font:400 13px var(--mono)}
.chips button:hover{border-color:var(--rub-jak)}
.hint{font-size:14px;color:var(--tekst-2);margin-top:8px}
.att{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 0;border-top:1px solid var(--rub)}
.att:first-of-type{border-top:0}
.att .nm{overflow-wrap:anywhere}
.att .nm small{display:block;color:var(--tekst-2);font-size:13px}
.att label{font-size:14px;display:flex;align-items:center;gap:8px;min-height:44px;color:var(--tekst-2)}
.tg.ok{color:var(--zelena,#6edca0);border-color:currentColor}.tg.warn{color:var(--zlato);border-color:var(--zlato)}.tg.off{color:var(--crvena);border-color:var(--crvena)}
[data-theme="svjetlo"] .tg.ok{color:#127846}[data-theme="svjetlo"] .tg.warn{color:#7A5510;border-color:#D9B97E}
/* pregled: email kakav stiže primatelju — bijeli papir u obje teme */
.ep{background:#fff;color:#16181F;border-radius:12px;border:1px solid #D8DCE8;overflow:hidden}
.ep-h{padding:12px 20px;border-bottom:1px solid #E6E8F0}
.ep-h small{display:block;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#4A5068}
.ep-h b{font:500 16px var(--sans)}
.ep-b{padding:16px 20px;font:400 15px/1.6 var(--sans);overflow-wrap:anywhere}
.ep-pot{margin-top:16px;padding-top:12px;border-top:1px solid #E6E8F0;color:#2A2F40}
.ep-dis{margin-top:12px;font-size:13px;color:#4A5068}
.ep-pr{display:flex;gap:8px;flex-wrap:wrap;padding:12px 20px;border-top:1px solid #E6E8F0;background:#F6F7FB}
.ep-pr span{font:400 13px var(--mono);padding:4px 8px;border:1px solid #D8DCE8;border-radius:8px;background:#fff;overflow-wrap:anywhere}
.ep mark{background:#FBE3B4;color:#3D2A02;border-radius:4px;padding:0 4px}
.alert{padding:12px 16px;border-radius:12px;border:1px solid var(--rub-jak);margin-bottom:16px;font-size:16px}
.alert.warn{border-color:var(--zlato)}
/* UPOZORENJE = POVEZNICA (Kruno 18. 10.: „upozorenja moraju biti klikabilna — da me točno navede na postavku”) */
a.alert{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--tekst);text-decoration:none;transition:border-color .15s var(--ease),background .15s var(--ease)}
a.alert::after{content:"→";flex:none;color:var(--zlato);font-weight:600}
a.alert:hover{background:var(--panel-2)}
a.alert:focus-visible{outline:2px solid var(--zlato);outline-offset:2px}
.alert.ok{border-color:var(--zelena,#6edca0)}
pre.anon{white-space:pre-wrap;font:400 14px/1.6 var(--mono);background:var(--panel-2);border:1px solid var(--rub);border-radius:12px;padding:16px;overflow-wrap:anywhere}
.lst{list-style:none;padding:0}
.lst li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--rub)}
.lst li:first-child{border-top:0}
.lst li > span:first-child{flex:none;width:24px;text-align:center}
.lst small{display:block;color:var(--tekst-2);font-size:14px}
.row-a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:12px 0;border-top:1px solid var(--rub);color:var(--tekst);text-decoration:none}
.row-a:first-child{border-top:0}
.row-a b{font-weight:500}
.row-a small{display:block;color:var(--tekst-2);font-size:14px}
.row-a .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
a.row-a:hover b{text-decoration:underline}
@media (max-width:1100px){.frm{grid-template-columns:1fr}.att{grid-template-columns:auto minmax(0,1fr)}.att label:last-child{grid-column:2}}

/* ---------- Kontrola, dnevnici, popisi stanja */
.stat{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--rub)}
.stat:first-child{border-top:0}
.stat b{font-weight:500}.stat small{display:block;color:var(--tekst-2);font-size:14px}
.tg.st-u-redu{color:var(--tekst-2)}.tg.st-pažnja{color:var(--zlato);border-color:var(--zlato)}.tg.st-kritično{color:var(--crvena);border-color:var(--crvena)}.tg.st-popravljeno{color:var(--tekst);border-color:var(--rub-jak)}
[data-theme="svjetlo"] .tg.st-pažnja{color:#7A5510;border-color:#D9B97E}
.zad{padding:16px 0;border-top:1px solid var(--rub)}.zad:first-child{border-top:0;padding-top:0}
.zad b{font-weight:500}.zad small{display:block;color:var(--tekst-2);font-size:14px}
.zad .tags{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.zad .ak{display:flex;gap:8px;flex-wrap:wrap}
ol.pr{padding-left:24px}ol.pr li{padding:8px 0;border-top:1px solid var(--rub)}ol.pr li:first-child{border-top:0}
ol.pr small{display:block;color:var(--tekst-2);font-size:13px;font-family:var(--mono);letter-spacing:.04em;margin-top:4px}

/* brojke na vrhu stranice (Dnevnici, Termin) */
.kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:16px}.kpi div{background:var(--panel);border:1px solid var(--rub);border-radius:16px;padding:16px 20px}.kpi b{display:block;font:200 40px/1 var(--sans)}.kpi span{color:var(--tekst-2);font-size:14px}.kpi .g b{color:var(--zlato)}[data-theme="svjetlo"] .kpi .g b{color:#7A5510}@media (max-width:1100px){.kpi{grid-template-columns:1fr 1fr}}
/* popravci nakon screenshota (Postavke → Emailovi / Lega): */
.tg{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.sw .tg,.stat .tg,.row-a > .tg{flex:none;align-self:center}
.page p a:not(.btn),.page small a,.page .hint a,.page .alert a,.page .sub a{color:var(--tekst);text-decoration:underline;text-underline-offset:3px}
input[type=checkbox],input[type=radio]{accent-color:var(--zlato)}
[data-theme="svjetlo"] input[type=checkbox],[data-theme="svjetlo"] input[type=radio]{accent-color:#3D4FA8}
.att label.off{opacity:1;color:var(--tekst-2)}
.att label.off input{visibility:hidden}

/* =====================================================================
   SKRIVENI IZBORNIK (računalo) — Kruno 12. 10.: maksimum ekrana; gumb gore lijevo ili miš na lijevi rub
   ===================================================================== */
#menu-gumb,#menu-rub{display:none}
@media (min-width:1101px){
  .app{grid-template-columns:minmax(0,1fr)}
  /* izbornik BEZ okvira (Kruno 14. 10., zamjenjuje poluprozirnu ploču): samo nazivi kližu slijeva nadesno, a stranica se
     pomakne udesno da se ništa ne preklapa. Nema pozadine, ruba ni blura; čitljivost daje to što ispod njih više nema teksta. */
  #menu{position:fixed;left:0;top:0;bottom:0;width:248px;height:auto;z-index:80;padding:84px 16px 20px;border:0;border-radius:0;background:none;box-shadow:none;
    visibility:hidden;transition:visibility 0s linear .3s}
  body.menu-otvoren #menu{visibility:visible;transition:visibility 0s}
  #menu .brand{display:none} /* znak i „Izbornik” već su na gumbu iznad — bez dvostrukog naslova */
  #menu > *{opacity:0;transform:translateX(-24px);transition:opacity .18s var(--ease),transform .26s var(--ease)}
  body.menu-otvoren #menu > *{opacity:1;transform:none}
  body.menu-otvoren #menu > :nth-child(2){transition-delay:.02s} body.menu-otvoren #menu > :nth-child(3){transition-delay:.05s}
  body.menu-otvoren #menu > :nth-child(4){transition-delay:.08s} body.menu-otvoren #menu > :nth-child(5){transition-delay:.11s}
  body.menu-otvoren #menu > :nth-child(6){transition-delay:.14s} body.menu-otvoren #menu > :nth-child(7){transition-delay:.17s}
  body.menu-otvoren #menu > :nth-child(n+8){transition-delay:.2s}
  #menu a.nav{padding:10px 12px;border-radius:12px;border:1px solid transparent;background:none}
  #menu a.nav:hover{background:none;border-color:var(--rub)}
  #menu a.nav.on{background:none;border-color:var(--rub-jak)}
  /* stranica se odmakne: sadržaj i polje „Pitaj Legu” kreću od desnog ruba izbornika */
  .app{transition:padding-left .3s var(--ease)}
  body.menu-otvoren.menu-gura .app{padding-left:248px}
  .dock-app{transition:left .3s var(--ease)}
  body.menu-otvoren.menu-gura .dock-app{left:248px}
  #menu .tema{border:1px solid transparent;background:none;justify-content:flex-start;padding:10px 12px;min-height:44px;border-radius:12px;font-size:15px}
  #menu .tema:hover{border-color:var(--rub)}
  @media (prefers-reduced-motion:reduce){#menu,#menu > *,.app,.dock-app{transition:none!important}#menu > *{transform:none}}
  /* Izbornik: samo znak i riječ na prozirnom, bez okvira (Kruno 14. 10.) */
  #menu-gumb{display:inline-flex;align-items:center;gap:10px;position:fixed;left:16px;top:16px;z-index:81;min-height:44px;padding:0 12px 0 8px;border:0;border-radius:12px;background:transparent;color:var(--tekst);font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase}
  #menu-gumb img{width:22px}
  #menu-gumb:hover,body.menu-otvoren #menu-gumb{color:var(--zlato)}
  [data-theme="svjetlo"] #menu-gumb:hover,[data-theme="svjetlo"] body.menu-otvoren #menu-gumb{color:#7A5510}
  #menu-gumb:focus-visible{outline:2px solid var(--zlato);outline-offset:2px}
  #menu-rub{display:block;position:fixed;left:0;top:0;bottom:0;width:10px;z-index:59}
  .page{margin:0 auto}
  .dock-app{left:0}
  body.fokus #menu-gumb{opacity:0;pointer-events:none}
}

/* =====================================================================
   POLJE „PITAJ LEGU” — dotjerano: znak umjesto ›, blagi sjaj koji jača kad se piše, okrugli gumbi, jedna istaknuta (pošalji)
   ===================================================================== */
.cmd{border-radius:20px;border:1px solid rgba(143,162,255,.45);background:var(--panel);padding:6px 6px 6px 14px;box-shadow:0 0 0 1px rgba(143,162,255,.06),0 0 22px rgba(96,120,255,.18),0 10px 28px rgba(0,0,0,.3);transition:box-shadow .2s var(--ease),border-color .2s var(--ease)}
.cmd:focus-within{border-color:var(--rub-jak);box-shadow:0 0 0 3px rgba(143,162,255,.14),0 0 30px rgba(110,130,255,.32),0 10px 28px rgba(0,0,0,.3)}
.cmd img.p{width:22px;height:22px;flex:none;opacity:.95}
.cmd button{width:44px;height:44px;border-radius:50%;border:1px solid var(--rub);background:var(--panel-2);color:var(--tekst)}
.cmd button:last-child{background:var(--zlato);border-color:var(--zlato);color:#1A1206}
.cmd button:hover{border-color:var(--rub-jak)}
[data-theme="svjetlo"] .cmd{border-color:rgba(88,106,189,.45);box-shadow:0 0 0 1px rgba(88,106,189,.05),0 0 18px rgba(88,106,189,.14),0 8px 22px rgba(16,22,47,.07)}
[data-theme="svjetlo"] .cmd:focus-within{border-color:#586ABD;box-shadow:0 0 0 3px rgba(88,106,189,.14),0 0 22px rgba(88,106,189,.22),0 8px 22px rgba(16,22,47,.07)}
[data-theme="svjetlo"] .cmd button:last-child{background:#F7E2BC;border-color:#D9B97E;color:#3D2A02}

/* =====================================================================
   PREDMET EMAILA ISTAKNUT (obje verzije) — Kruno 12. 10.: ime, pa predmet na blagoj podlozi u boji kategorije, pa tekst
   ===================================================================== */
.mail .subj{display:inline-block!important;margin-top:6px;padding:4px 10px;border-radius:8px;background:rgba(var(--k),.16);color:var(--tekst);font-weight:500}
[data-theme="svjetlo"] .mail .subj{background:rgba(var(--k),.09)}
.mail .ab{margin-top:6px!important}

/* =====================================================================
   ZAOBLJENA VERZIJA SA SJAJEM (?stil=oblo) — Kruno 12. 10.: bez oštrih rubova, rub obojen, blagi sjaj „ne cirkus”.
   Odstupanje od dizajn-okvira (glow, veći radius) zapisano u HODOGRAM.
   ===================================================================== */
[data-stil="oblo"]{--sjaj-rub:143,162,255}
[data-stil="oblo"][data-theme="svjetlo"]{--sjaj-rub:88,106,189}
[data-stil="oblo"] .hud{border-radius:24px;border:1px solid rgba(var(--sjaj-rub),.5);box-shadow:0 0 0 1px rgba(var(--sjaj-rub),.06),0 0 18px rgba(var(--sjaj-rub),.16),0 10px 28px rgba(0,0,0,.22)}

[data-stil="oblo"] .hud .lab{border-bottom-color:rgba(var(--sjaj-rub),.22);background:rgba(var(--sjaj-rub),.06)}
[data-stil="oblo"] .hud.gold{border-color:rgba(235,194,102,.7);box-shadow:0 0 0 1px rgba(235,194,102,.08),0 0 22px rgba(235,194,102,.2),0 10px 28px rgba(0,0,0,.22)}
[data-stil="oblo"] .hud.red{border-color:rgba(255,140,140,.6);box-shadow:0 0 0 1px rgba(255,140,140,.08),0 0 18px rgba(255,140,140,.16),0 10px 28px rgba(0,0,0,.22)}
[data-stil="oblo"][data-theme="svjetlo"] .hud{box-shadow:0 0 0 1px rgba(var(--sjaj-rub),.05),0 0 14px rgba(var(--sjaj-rub),.12),0 8px 22px rgba(16,22,47,.06)}
[data-stil="oblo"][data-theme="svjetlo"] .hud.gold{border-color:#18205E;box-shadow:0 0 18px rgba(24,32,94,.22),0 8px 22px rgba(16,22,47,.08)}
[data-stil="oblo"][data-theme="svjetlo"] .hud.red{border-color:rgba(178,34,34,.5);box-shadow:0 0 14px rgba(178,34,34,.12),0 8px 22px rgba(16,22,47,.06)}
[data-stil="oblo"] .hud[data-klik]:hover,[data-stil="oblo"] .hud[data-href]:hover,[data-stil="oblo"] a.hud:hover{border-color:rgba(var(--sjaj-rub),.85);box-shadow:0 0 0 1px rgba(var(--sjaj-rub),.12),0 0 26px rgba(var(--sjaj-rub),.26),0 10px 28px rgba(0,0,0,.22)}
[data-stil="oblo"] .mail{border-radius:22px;box-shadow:0 0 16px rgba(var(--k),.2)}
[data-stil="oblo"] .mail:hover{box-shadow:0 0 24px rgba(var(--k),.32)}
[data-stil="oblo"] .mail .subj{border-radius:999px;padding:4px 14px}
[data-stil="oblo"] .btn{border-radius:999px}
[data-stil="oblo"] .btn.pri{box-shadow:0 0 16px rgba(235,194,102,.28)}
[data-stil="oblo"][data-theme="svjetlo"] .btn.pri{box-shadow:0 0 12px rgba(217,185,126,.35)}
[data-stil="oblo"] .tg{border-radius:999px;padding:3px 10px}
[data-stil="oblo"] .card,[data-stil="oblo"] .kpi > div,[data-stil="oblo"] .ep,[data-stil="oblo"] .alert,[data-stil="oblo"] .empty{border-radius:22px}
[data-stil="oblo"] .card,[data-stil="oblo"] .kpi > div{border-color:rgba(var(--sjaj-rub),.45);box-shadow:0 0 16px rgba(var(--sjaj-rub),.14)}
[data-stil="oblo"] .frm input:is([type=text],[type=password],[type=number],[type=email],[type=time],[type=date],[type=datetime-local],[type=search],[type=tel],[type=url]),[data-stil="oblo"] .frm textarea,[data-stil="oblo"] .frm select,[data-stil="oblo"] .trazi input,[data-stil="oblo"] textarea.nacrt{border-radius:16px}
[data-stil="oblo"] .chips button,[data-stil="oblo"] .fl .ik{border-radius:14px}
[data-stil="oblo"] .cmd{border-radius:999px;padding-left:18px}
[data-stil="oblo"] #menu a.nav{border-radius:999px}
[data-stil="oblo"] #menu{border-radius:24px}
[data-stil="oblo"] .tbl tr:first-child td:first-child{border-top-left-radius:12px}
[data-stil="oblo"] .krug{border-radius:50%}
@media (max-width:1100px){[data-stil="oblo"] #menu{border-radius:999px}[data-stil="oblo"] #menu a.nav{border-radius:20px}}
/* ← Natrag u putanji */
.ph .crumb{display:flex;align-items:center;flex-wrap:wrap;gap:0 6px}
.ph .crumb .nazad{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;margin-right:10px;border-radius:999px;border:1px solid var(--rub);background:var(--panel);color:var(--tekst);font:400 14px var(--sans);letter-spacing:0}
.ph .crumb .nazad:hover{border-color:var(--rub-jak)}
/* oznaka: lega-app na stvarnim podacima (platforma /lega) */
.stvarno-oznaka{display:block;margin:0 12px 12px;font:500 12px var(--mono);letter-spacing:.06em;color:var(--tekst-2);white-space:nowrap} /* bez okvira, jedan redak (Kruno 14. 10.) */
@media (max-width:1100px){.stvarno-oznaka{display:none}}

/* Lega snalaženje: popis pogodaka u odgovoru (T-390) */
.nav-popis{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.nav-popis a{display:flex;flex-direction:column;padding:8px 12px;border:1px solid var(--rub);border-radius:12px;color:var(--tekst);text-decoration:none;min-height:44px;justify-content:center}
.nav-popis a:hover,.nav-popis a:focus-visible{border-color:var(--rub-jak)}
.nav-popis small{color:var(--tekst-2);font-size:13px}
.nav-popis b{font:500 17px/1.3 var(--sans)}
.say .nav-popis{font-size:16px;max-width:640px}

/* audit 14. 10. (P1): u svijetloj temi zlatna ploča je tamno sidro — sav sitni tekst, oznake, poveznice i polja u njoj moraju biti svijetli
   (prije: tamni tekst na tamnoj ploči, kontrast 1,2–2,2:1 na Dnevnicima i Snimkama) */
[data-theme="svjetlo"] .hud.gold small,[data-theme="svjetlo"] .hud.gold label,[data-theme="svjetlo"] .hud.gold .hint{color:#C2CAE2}
[data-theme="svjetlo"] .hud.gold a{color:#FAF8F5}
[data-theme="svjetlo"] .hud.gold .tg{color:#E4E9F7;border-color:#5A669E}
[data-theme="svjetlo"] .hud.gold .tg.warn{color:#F2D49A;border-color:#B8955A}
[data-theme="svjetlo"] .hud.gold .tg.off{color:#FFB3A8;border-color:#C9786C}
[data-theme="svjetlo"] .hud.gold input,[data-theme="svjetlo"] .hud.gold textarea{background:#1E2860;color:#FAF8F5;border-color:#5A669E}
[data-theme="svjetlo"] .hud.gold .btn:not(.pri){color:#FAF8F5;border-color:#5A669E;background:transparent}
[data-theme="svjetlo"] .hud.gold .stanje{color:#C2CAE2}
/* audit 14. 10. (P1): red brzih pitanja Lege skrola se unutar polja, ne širi stranicu (Pošta 375: dokument 1191 px) */
.dock-app,.dock-app .in,.dock-app .sugg{min-width:0;max-width:100%}
.dock-app .sugg{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain}
.dock-app .sugg button{flex:0 0 auto}
/* audit 14. 10. (P1, stvarni uzrok preljeva Pošte): duge poveznice i riječi u stvarnim mailovima se lome i ne šire karticu */
a.mail,a.mail > span,.mail small,.mail b,.zad small,.row-a span,.rows li span{min-width:0;overflow-wrap:anywhere}

/* SUMNJIVA POŠTA na popisu (T-413, Kruno 14. 10.: „jasno crveno da bode u oči”) */
.tg.sumnjivo{background:#B3261E;color:#fff;border-color:#FF8A80;font-weight:600}
.tg.oprez{border-color:var(--zlato);color:var(--zlato)}
[data-theme="svjetlo"] .tg.oprez{color:#7A5510}
a.mail.sumnjiv{border:2px solid #E5534B!important;background:color-mix(in srgb,var(--panel) 88%,#B3261E)}

/* polja s brojem, vremenom i datumom unutar retka (npr. „Unutar [24] sati”) zadržavaju svoju zadanu širinu */
.frm .chk input:is([type=number],[type=time],[type=text]){width:auto}
[data-theme="svjetlo"] .frm input:is([type=time],[type=date],[type=datetime-local]){color-scheme:light}
.frm input:is([type=time],[type=date],[type=datetime-local]){color-scheme:dark}

/* polje nacrta odgovora — zajedničko (email, Odgovori: Lega test); prije samo na stranici emaila */
textarea.nacrt{width:100%;min-height:160px;resize:vertical;padding:16px;border-radius:12px;border:1px solid var(--rub-jak);background:var(--panel-2);color:var(--tekst);font:400 16px/1.6 var(--sans)}
.hud.lt .lab{flex-wrap:wrap;row-gap:6px}

/* ============ LEGINA TRAKA — ISTA NA SVAKOJ STRANICI (T-438, Kruno 15. 10.) ============
   Kao na početnoj: u sredini (do 760 px), brza pitanja kao tihi redak teksta (ne gumbi), polje sa svijetlim zlatnim rubom
   koji lagano diše (pojača se i stiša, 6 s). Ispod trake je puna podloga, pa sadržaj koji se skrola ne ide pod tekst. */
.dock-app .sugg,.dock-app .cmd{width:100%;max-width:760px;margin-left:auto;margin-right:auto}
.dock-app{background:linear-gradient(to bottom,transparent,var(--noc) 30px)} /* mekši i niži rub iznad brzih pitanja (Kruno 15. 10.) */
:is(.dock,.dock-app) .sugg{flex-wrap:wrap;justify-content:center;overflow:visible;gap:0 4px;max-width:1040px}
:is(.dock,.dock-app) .sugg button{flex:0 0 auto;border:0;background:none;box-shadow:none!important;border-radius:8px;color:var(--tekst-2);font:400 15px var(--sans);padding:0 10px;min-height:40px}
:is(.dock,.dock-app) .sugg button:hover{color:var(--tekst);background:none;text-decoration:underline;text-decoration-color:var(--zlato);text-underline-offset:6px}
:is(.dock,.dock-app) .sugg button:focus-visible{outline:2px solid var(--zlato);outline-offset:0}
:is(.dock,.dock-app) .sugg button + button::before{content:"·";color:var(--rub-jak);margin-right:14px;text-decoration:none;display:inline-block}
:is(.dock,.dock-app) .sugg button.home{color:var(--zlato)}
@media (max-width:1100px){:is(.dock,.dock-app) .sugg{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);padding-right:40px}}
.cmd{border-color:rgba(246,218,154,.7);animation:lega-dah 6s ease-in-out infinite}
.cmd:focus-within{border-color:#F6DA9A;animation:none;box-shadow:0 0 0 3px rgba(235,194,102,.18),0 0 30px rgba(235,194,102,.38)}
@keyframes lega-dah{0%,100%{box-shadow:0 0 0 1px rgba(246,218,154,.08),0 0 10px rgba(235,194,102,.14)}50%{box-shadow:0 0 0 1px rgba(246,218,154,.22),0 0 26px rgba(235,194,102,.36)}}
[data-theme="svjetlo"] .cmd{border-color:#D9B97E;animation-name:lega-dah-svj}
[data-theme="svjetlo"] .cmd:focus-within{border-color:#B8913F;box-shadow:0 0 0 3px rgba(217,185,126,.28),0 0 22px rgba(217,185,126,.45)}
@keyframes lega-dah-svj{0%,100%{box-shadow:0 0 0 1px rgba(217,185,126,.12),0 0 8px rgba(217,185,126,.22)}50%{box-shadow:0 0 0 1px rgba(217,185,126,.30),0 0 20px rgba(217,185,126,.50)}}
@media (prefers-reduced-motion:reduce){.cmd{animation:none;box-shadow:0 0 16px rgba(235,194,102,.26)}[data-theme="svjetlo"] .cmd{box-shadow:0 0 14px rgba(217,185,126,.4)}}

/* ============ PADAJUĆI IZBORNIK (T-440, Kruno 15. 10.: „prozirni kao izbornik, samo neka izađu”) ============
   Izvorni <select> ostaje u obrascu (vrijednost, change), a vidi se ovaj: stavke iskoče kao glavni izbornik, bez kutije;
   tanki rub na prijelazu, odabrano sa zlatnom kvačicom. Lista je iznad svega (fiksna), ne reže je okvir kartice. */
.izbor{position:relative;display:inline-block;min-width:0;max-width:100%}
.frm .izbor,.izbor.puna{display:block;width:100%}
.izbor-izvorni{position:absolute!important;inset:0;opacity:0;pointer-events:none;width:100%!important;height:100%!important;min-height:0!important}
.izbor-gumb{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:10px 14px 10px 16px;border-radius:12px;border:1px solid var(--rub-jak);background:var(--panel-2);color:var(--tekst);font:400 16px/1.4 var(--sans);text-align:left;text-transform:none;letter-spacing:0;cursor:pointer}
.izbor-gumb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.izbor-gumb svg{flex:none;width:16px;height:16px;color:var(--zlato);transition:transform .2s var(--ease)}
.izbor-gumb[aria-expanded="true"]{border-color:var(--zlato)}
.izbor-gumb[aria-expanded="true"] svg{transform:rotate(180deg)}
.izbor-gumb:hover{border-color:var(--zlato)}
.izbor-gumb:focus-visible{outline:2px solid var(--zlato);outline-offset:2px}
.izbor-gumb:disabled{opacity:.5;cursor:not-allowed}
.izbor-lista{position:fixed;z-index:200;margin:0;padding:6px;list-style:none;max-height:min(340px,60vh);overflow:auto;border-radius:14px;
  background:color-mix(in srgb,var(--noc) 90%,transparent);border:1px solid var(--rub);box-shadow:0 12px 32px rgba(0,0,0,.35)}
.izbor-lista li{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border:1px solid transparent;border-radius:12px;color:var(--tekst-2);font:400 15px/1.35 var(--sans);cursor:pointer;
  opacity:0;transform:translateY(-6px);animation:izbor-iskoci .2s var(--ease) forwards;animation-delay:calc(var(--i,0) * 18ms)}
.izbor-lista li::before{content:"";flex:none;width:14px;height:14px}
.izbor-lista li[aria-selected="true"]{color:var(--tekst);border-color:var(--rub-jak)}
.izbor-lista li[aria-selected="true"]::before{content:"✓";color:var(--zlato);font-size:14px;line-height:14px}
.izbor-lista li.akt,.izbor-lista li:hover{color:var(--tekst);border-color:var(--zlato)}
.izbor-lista li[aria-disabled="true"]{opacity:.5;cursor:default;border-color:transparent}
@keyframes izbor-iskoci{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.izbor-lista li{animation:none;opacity:1;transform:none}.izbor-gumb svg{transition:none}}
[data-theme="svjetlo"] .izbor-gumb{background:#FFFFFF;border-color:#C9D0E9}
[data-theme="svjetlo"] .izbor-gumb svg{color:#7A5510}
[data-theme="svjetlo"] .izbor-gumb:hover,[data-theme="svjetlo"] .izbor-gumb[aria-expanded="true"]{border-color:#B8913F}
[data-theme="svjetlo"] .izbor-lista{background:color-mix(in srgb,#FFFFFF 94%,transparent);box-shadow:0 12px 28px rgba(16,22,47,.12)}
[data-theme="svjetlo"] .izbor-lista li[aria-selected="true"]::before{color:#7A5510}
[data-theme="svjetlo"] .izbor-lista li.akt,[data-theme="svjetlo"] .izbor-lista li:hover{border-color:#B8913F}
/* mobitel: podloga trake ide do dna (iza donjeg izbornika), pa između trake i izbornika ne viri sadržaj (T-438) */
@media (max-width:1100px){.dock-app{bottom:0;padding-bottom:84px}}
/* traka alata obrasca (Umetni polje · Spremi): na računalu prati dno iznad Legine trake; na mobitelu stoji na kraju obrasca,
   jer bi plutajuća prekrila polja (Kruno 15. 10.: „nijedan prozorčić ne pokriva drugi”) */
.alat-traka{position:sticky;bottom:200px;margin-top:16px;z-index:5}
@media (max-width:1100px){.alat-traka{position:static}}

/* pripremljeni odgovor prije „Uredi”: čita se kao tekst, bez izgleda polja za upis; kad se uređuje — puno polje sa zlatnim rubom (T-443) */
textarea.nacrt[readonly]{background:transparent;border-color:var(--rub);resize:none;cursor:default}
textarea.nacrt:not([readonly]):focus{border-color:var(--zlato);outline:none;box-shadow:0 0 0 3px rgba(235,194,102,.18)}
[data-theme="svjetlo"] textarea.nacrt:not([readonly]):focus{border-color:#B8913F}

/* radnje prije slanja (T-452): zlatni okvir, svaka radnja kvačica ≥ 44 px; Pošalji je zaključan dok sve nisu označene */
.prije-slanja{margin:12px 0 4px;padding:12px 16px;border:1px solid var(--zlato);border-radius:12px;display:grid;gap:4px}
.prije-slanja b{font:500 14px var(--sans);color:var(--tekst)}
.prije-slanja label{display:flex;align-items:center;gap:12px;min-height:44px;font:400 15px/1.4 var(--sans);color:var(--tekst);cursor:pointer}
.prije-slanja input{width:20px;height:20px;flex:none;accent-color:var(--zlato)}
[data-theme="svjetlo"] .prije-slanja{border-color:#B8913F}

/* zaključan gumb (npr. Pošalji dok radnje nisu označene) mora izgledati zaključano */
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}

/* primjer teksta u poljima: čitljiv (bio #757575 na tamnoj plohi = 3,5:1; impeccable 15. 10.) */
.frm :is(input,textarea)::placeholder,textarea.nacrt::placeholder{color:var(--tekst-2);opacity:1}

/* TJEDAN (Lega „Termini ovaj tjedan”, Kruno 15. 10.): 7 stupaca po danu s vremenom i imenom; danas zlatno; mobitel: dan ispod dana */
.tjedan{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.tj-dan{border:1px solid var(--rub);border-radius:12px;padding:10px 10px 12px;min-width:0;background:var(--panel)}
.tj-dan header{display:flex;align-items:baseline;gap:6px;margin-bottom:8px}
.tj-dan header b{font:500 12px var(--mono);letter-spacing:.1em;color:var(--tekst)}
.tj-dan header span{font:400 12px var(--mono);color:var(--tekst-2)}
.tj-dan header em{margin-left:auto;font:500 12px var(--mono);font-style:normal;color:var(--zlato)}
.tj-dan.danas{border-color:var(--zlato)}
.tj-dan.danas header b{color:var(--zlato)}
.tj-dan ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tj-dan li{display:grid;gap:2px;font:400 14px/1.35 var(--sans);color:var(--tekst);min-width:0}
.tj-dan li time{font:500 13px var(--mono);color:var(--tekst)}
.tj-dan li span{overflow-wrap:anywhere}
.tj-dan li small{display:block;font:400 12px/1.35 var(--sans);color:var(--tekst-2)}
.tj-dan li.proslo{opacity:1;color:var(--tekst-2)}.tj-dan li.proslo time{color:var(--tekst-2)}
.tj-dan p{margin:0;font:400 13px var(--sans);color:var(--tekst-2)}
.tj-dan.prazan{background:transparent}
[data-theme="svjetlo"] .tj-dan.danas{border-color:#B8913F}[data-theme="svjetlo"] .tj-dan.danas header b,[data-theme="svjetlo"] .tj-dan header em{color:#7A5510}
/* T-625: na širokom zaslonu tjedan koristi prostor — viši dani i čitljiva slova (prije 12–14 px na 2000 px zaslonu, ispod prazno) */
@media (min-width:1400px){
  .tjedan{gap:12px}.tjedan:has(li){min-height:min(52vh,560px)} /* prazan tjedan ostaje nizak */
  .tj-dan{padding:16px 16px 18px;border-radius:16px}
  .tj-dan header{margin-bottom:12px}.tj-dan header b,.tj-dan header span,.tj-dan header em{font-size:14px}
  .tj-dan ul{gap:14px}.tj-dan li{font-size:17px}.tj-dan li time{font-size:15px}.tj-dan li small{font-size:14px;margin-top:2px}.tj-dan p{font-size:15px}
}
@media (max-width:1100px){.tjedan{grid-template-columns:1fr}.tj-dan{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px}.tj-dan header{flex-direction:column;align-items:flex-start;gap:2px;margin:0}.tj-dan header em{margin-left:0}}

/* SLOBODAN DAN (Kruno 15. 10.): okvir točno na sredini prozora (između vrha i Legine trake), par koji pleše, poruka i misao dana */
#ans.samo-kartica .say{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.slobodan{position:fixed;left:50%;top:calc((100dvh - 200px) / 2 + 10px);transform:translate(-50%,-50%);z-index:3;width:min(520px,calc(100vw - 32px));
  padding:20px 28px 28px;text-align:center;border:1px solid var(--zlato);border-radius:24px;background:var(--panel);animation:slob-ulaz .5s var(--ease) both}
.slobodan .ples{width:min(360px,100%);aspect-ratio:4 / 3;margin:0 auto 4px;border-radius:16px;overflow:hidden;background:var(--panel)}
.slobodan .ples :is(video,img){display:block;width:100%;height:100%;object-fit:cover;mix-blend-mode:screen}
.slobodan h2{font:300 32px/1.2 var(--sans);letter-spacing:-.01em;margin:0 0 8px;color:var(--tekst)}
.slobodan p{font:400 18px/1.5 var(--sans);color:var(--tekst-2);margin:0 0 20px}
.slobodan blockquote{margin:0;padding:16px 0 0;border-top:1px solid var(--rub);font:300 20px/1.45 var(--sans);font-style:italic;color:var(--tekst)}
.slobodan blockquote span{display:block;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;font-style:normal;color:var(--tekst-2);margin-bottom:6px}
.slobodan blockquote cite{display:block;margin-top:6px;font:400 13px var(--sans);font-style:normal;color:var(--tekst-2)}
@keyframes slob-ulaz{from{opacity:0;transform:translate(-50%,calc(-50% + 8px))}to{opacity:1;transform:translate(-50%,-50%)}}
@media (prefers-reduced-motion:reduce){.slobodan{animation:none}}
@media (max-width:1100px){.slobodan{top:calc(190px + (100dvh - 190px - 210px) / 2);padding:14px 18px 18px}.slobodan h2{font-size:24px;margin-bottom:4px}.slobodan p{font-size:15px;margin-bottom:12px}.slobodan blockquote{font-size:16px;padding-top:12px}.slobodan .ples{width:min(200px,100%)}}
/* svijetla tema: ples stoji na tamnoj pozornici (video je svjetlost na crnom) — jedino tamno sidro na zaslonu */
[data-theme="svjetlo"] .slobodan{border-color:#B8913F;background:#FFFFFF}
[data-theme="svjetlo"] .slobodan .ples{background:#0F1640}

/* mikrofon: snima (crveni rub, postoji .on) · prepoznaje (zlatni rub koji pulsira) */
.cmd .mic.radi{border-color:var(--zlato);animation:mic-radi 1s ease-in-out infinite}
@keyframes mic-radi{50%{box-shadow:0 0 0 4px rgba(235,194,102,.25)}}
@media (prefers-reduced-motion:reduce){.cmd .mic.radi{animation:none}}

/* diktiranje: međutekst dok Kiki govori je nakošen i tiši; konačni je običan tekst (T-466) */
.cmd input.diktat{font-style:italic;color:var(--tekst-2)}
/* stavka koju je Lega otvorila (#sidro, T-472): kratko zlatni obrub da se odmah vidi gdje je */
.istaknuto{outline:2px solid var(--zlato);outline-offset:4px;border-radius:8px;transition:outline-color .6s var(--ease)}

/* ============ LEGIN RAZGOVOR U TRACI (T-478, Kruno 15. 10.: „ne pop-up — donji bar se proširi prema gore”) ============
   Ploha zalijepljena za traku (isti rub, bez šava): pitanje u jednom retku, odgovor ispod; najnovije dolje uz polje, starije se skrola gore.
   Kratki razgovor pomoćnika, ne pravi chat: zadnjih nekoliko izmjena, „Proširi” za više. */
.dock-app .bar{width:100%;max-width:760px;margin:0 auto}
/* otvoren razgovor: traka zadrži svoj izgled (rub, sjaj, zaobljenje) i samo naraste prema gore — razgovor je unutra, polje dolje (Kruno 15. 10.) */
.dock-app.razg-otvoren .bar{border:1px solid rgba(246,218,154,.7);border-radius:20px;background:var(--panel);animation:lega-dah 6s ease-in-out infinite;overflow:hidden}
.dock-app.razg-otvoren .bar:focus-within{border-color:#F6DA9A;animation:none;box-shadow:0 0 0 3px rgba(235,194,102,.18),0 0 30px rgba(235,194,102,.38)}
.dock-app.razg-otvoren .bar .cmd{border:0;border-top:1px solid var(--rub);border-radius:0;box-shadow:none;animation:none;background:transparent}
[data-theme="svjetlo"] .dock-app.razg-otvoren .bar{border-color:#D9B97E;animation-name:lega-dah-svj}
[data-theme="svjetlo"] .dock-app.razg-otvoren .bar:focus-within{border-color:#B8913F;box-shadow:0 0 0 3px rgba(217,185,126,.28),0 0 22px rgba(217,185,126,.45)}
@media (prefers-reduced-motion:reduce){.dock-app.razg-otvoren .bar{animation:none;box-shadow:0 0 16px rgba(235,194,102,.26)}}
.razg{position:relative;padding:8px 100px 8px 18px}
/* SAŽETO (T-482, Kruno 15. 10.: „razgovor zauzima trećinu ekrana — najviše jedan red više”): po zadanom samo zadnji odgovor u najviše dva retka;
   ↑ otvara cijeli razgovor (zadnjih nekoliko izmjena, skrol), × ga zatvara. Gumbi stoje desno u istom retku. */
.razg-vrh{position:absolute;top:2px;right:6px;z-index:1}
.razg-gumbi{display:flex;gap:2px}
.razg-g{width:44px;height:44px;display:grid;place-items:center;border:0;background:none;border-radius:12px;color:var(--tekst-2);cursor:pointer}
.razg-g:hover{color:var(--tekst);background:var(--panel-2)}
.razg-g:focus-visible{outline:2px solid var(--zlato);outline-offset:0}
.razg-g svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
.razg.siroko #razg-siri svg{transform:rotate(180deg)}
.razg-tijek{display:flex;flex-direction:column;gap:14px}
.razg:not(.siroko) .r-par:not(:last-child),.razg:not(.siroko) .r-q{display:none}
.razg:not(.siroko) .r-a{max-height:3em;overflow:hidden;line-height:1.5;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.razg:not(.siroko) .r-a:not(:has(.nav-popis)){-webkit-mask-image:none;mask-image:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.razg.siroko{padding-top:44px}
.razg.siroko .razg-tijek{overflow-y:auto;max-height:min(50vh,480px);padding-right:10px;overscroll-behavior:contain}
.r-par{display:flex;flex-direction:column;gap:4px}
.r-q{margin:0;font:400 13px/1.4 var(--sans);color:var(--tekst-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-q::before{content:"› "}
.r-a{font:400 16px/1.5 var(--sans);color:var(--tekst);overflow-wrap:anywhere}
.r-a .nav-popis{margin-top:8px}
@media (max-width:1100px){.r-a{font-size:15px}.razg{padding-right:96px}.razg.siroko .razg-tijek{max-height:min(46vh,420px)}}

/* LEGA KAŽE (T-479, Kruno 15. 10.): odgovor samo tekstom na naslovnici stoji na sredini praznog ekrana (između vrha i Legine trake, kao „slobodan dan”),
   ispod njega val koji prati Legin glas. Pitanje iznad sitno; tekst veći i centriran. */
#ans.samo-tekst{min-height:0}
.lega-kaze{position:fixed;left:50%;top:calc((100dvh - 200px) / 2 + 10px);transform:translate(-50%,-50%);z-index:3;width:min(820px,calc(100vw - 48px));
  display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;animation:slob-ulaz .4s var(--ease) both}
.lega-kaze .say{max-width:34ch;font-size:32px;line-height:1.35}
.lega-kaze .say .nav-popis{text-align:left;margin-left:auto;margin-right:auto;max-height:42dvh;overflow-y:auto}
.lega-kaze .qv{max-width:min(60ch,100%);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.val-glasa{display:flex;align-items:center;justify-content:center;gap:4px;height:48px}
.val-glasa i{display:block;width:4px;height:48px;border-radius:2px;background:var(--zlato);transform:scaleY(.08);transform-origin:50% 50%;transition:transform .08s linear;opacity:.55}
.val-glasa.govori i{opacity:1}
[data-theme="svjetlo"] .val-glasa i{background:#B8913F}
@media (prefers-reduced-motion:reduce){.lega-kaze{animation:none}.val-glasa i{transition:none}}
@media (max-width:1100px){.lega-kaze{top:calc(190px + (100dvh - 190px - 210px) / 2);gap:12px}.lega-kaze .say{font-size:22px}.val-glasa{height:36px}.val-glasa i{height:36px;width:3px}}

/* KARTICA MAILA (T-489): ime u svom retku, naslov ispod (do 2 retka), vrijeme uvijek gore desno — i na mobitelu (ne zaseban redak) */
.mail .who{display:block;font-weight:600}
.mail .subj{max-width:100%;display:-webkit-inline-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mail .ab{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:1100px){
  .mail{grid-template-columns:36px minmax(0,1fr) auto;gap:10px}
  .mail .av{width:36px;height:36px;font-size:13px}
  .mail time{grid-column:auto}
  .mail .who{font-size:15.5px}
  .mail .subj{font-size:14px}
  .mail .ab{font-size:14px}
}
/* traka na mobitelu: puna pozadina ispod brzih pitanja — sadržaj se ne vidi kroz njih (Kruno 15. 10.: „preklapa se”) */
@media (max-width:1100px){.dock-app{background:linear-gradient(to bottom,transparent,var(--noc) 30px,var(--noc))}}

/* LIJEP ODGOVOR (Kruno 15. 10.): sažetak u prvom redu, zatim kratki redovi s istaknutim brojevima — na naslovnici i u traci */
.lo-uvod{margin:0}
.lo-st{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.lo-st li{position:relative;padding-left:20px}
.lo-st li::before{content:"";position:absolute;left:4px;top:.65em;width:6px;height:6px;border-radius:50%;background:var(--zlato)}
.lo-pod{margin:14px 0 0}
.lo b,.r-a b{font-weight:500;color:var(--tekst);font-variant-numeric:tabular-nums}
.lega-kaze .say.lo{font-size:26px;line-height:1.4;max-width:min(40ch,100%)}
.lega-kaze .say.lo:has(.lo-st){text-align:left}
.lega-kaze .say.lo .lo-uvod{font-size:28px;line-height:1.3}
.lega-kaze .say.lo .lo-st{gap:8px;margin-top:16px;font-size:22px;color:var(--tekst)}
.lega-kaze .say.lo .lo-pod{font-size:24px;margin-top:20px}
@media (max-width:1100px){.lega-kaze .say.lo{font-size:19px}.lega-kaze .say.lo .lo-uvod{font-size:20px}.lega-kaze .say.lo .lo-st{font-size:17px}.lega-kaze .say.lo .lo-pod{font-size:18px}}
/* ČITANJE MAILA (T-519): tekst maila lijevo poravnat, mjera za čitanje; uvod (tko, kada, naslov) ostaje naslovni red */
.lo-citanje{margin:18px 0 0;text-align:left;font-size:18px;line-height:1.6;color:var(--tekst);max-height:42dvh;overflow-y:auto;padding-right:8px} /* odgovor stoji u sredini ekrana (fixed): dug mail se lista unutra, uvod ostaje vidljiv */
.lo-citanje p{margin:0 0 .8em}
.lega-kaze .say.lo:has(.lo-citanje){max-width:min(62ch,100%)}
@media (max-width:1100px){.lo-citanje{font-size:16px;max-height:max(140px,calc(100dvh - 560px))}}

/* KARTICA MAILA v2 (T-494, Kruno 15. 10.): tko · oznake · vrijeme u prvom redu; naslov običnim tekstom (bez oblačića) u omjeru s imenom; isječak prigušen */
.mail .tijelo{display:flex;flex-direction:column;gap:4px;min-width:0}
.mail .red1{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;min-width:0}
.mail .red1 .who{display:inline;font:600 16px/1.3 var(--sans)}
.mail .red1 .tags{margin:0}
.mail .subj,[data-stil="oblo"] .mail .subj,[data-theme="svjetlo"] .mail .subj{display:-webkit-box!important;margin:0!important;padding:0!important;background:none!important;border-radius:0!important;font:500 15px/1.4 var(--sans);color:var(--tekst)}
.mail .ab{margin:0!important;font:400 14px/1.5 var(--sans);color:var(--tekst-2)}
@media (max-width:1100px){.mail .red1 .who{font-size:15px}.mail .subj{font-size:14px}.mail .ab{font-size:13.5px}}

/* ODGOVOR NA MAIL GLASOM (T-498): prozor jasno kaže komu i na koji mail; tekst se može urediti prije slanja u red */
.lega-odg{position:fixed;inset:0;margin:auto;height:fit-content;max-height:90dvh;width:min(720px,calc(100vw - 32px));border:1px solid var(--zlato);border-radius:24px;background:var(--panel);color:var(--tekst);padding:24px;overflow:auto}
.lega-odg::backdrop{background:rgba(0,0,0,.6)}
.lega-nova{position:fixed;z-index:60;top:16px;left:50%;transform:translateX(-50%);width:min(720px,calc(100vw - 32px));display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px;border-radius:16px;border:1px solid var(--zlato);background:var(--panel);color:var(--tekst);font:400 16px/1.45 var(--sans);box-shadow:0 4px 12px rgba(0,0,0,.18);animation:lega-nova-ulaz .2s ease-out}
.lega-nova span{flex:1 1 260px}
@keyframes lega-nova-ulaz{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.lega-nova{animation:none}}
.lega-mik{width:min(560px,calc(100vw - 32px))}
.lega-mik p{margin:0 0 12px;font:400 17px/1.55 var(--sans)}
.mik-koraci{margin:0 0 14px;padding-left:22px;font:400 17px/1.6 var(--sans)}
.mik-koraci li{margin-bottom:6px}
.lega-odg h2{font:400 24px/1.2 var(--sans);margin:0 0 12px}
.lo-na{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0 0 14px;font:400 15px/1.45 var(--sans)}
.lo-na span{font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tekst-2);padding-top:3px}
.lo-na b{font-weight:500;overflow-wrap:anywhere}
.lega-odg textarea{width:100%;min-height:240px;resize:vertical;border-radius:12px;border:1px solid var(--rub-jak);background:var(--panel-2);color:var(--tekst);padding:14px 16px;font:400 16px/1.6 var(--sans)}
.lega-odg textarea:focus-visible{outline:2px solid var(--zlato);outline-offset:2px}
.lo-pot{margin:8px 0 0;font:400 13px var(--sans);color:var(--tekst-2)}
.lega-mik .lo-pot{font-size:15px;line-height:1.5}
.lo-ak{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 0}
[data-theme="svjetlo"] .lega-odg{border-color:#B8913F}
/* NAČIN U TRACI (T-528, Kruno 18. 10.: „ili live razgovor, ili traka — nikad oba”): pisanje = traka; live = gumb „Live” (malo veći, dolje, na mobitelu
   pri ruci), dok razgovor traje samo crtice koje prate glas. Prebacivanje = mala diskretna ikona. Zlato = jedini akcent; pill samo za mali CTA. */
.nacin{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px}
.nacin-g{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:40px;min-height:40px;padding:0 10px;border-radius:999px;border:1px solid var(--rub);background:var(--panel);color:var(--tekst-2);font:500 13px var(--sans);cursor:pointer;transition:color .15s var(--ease),border-color .15s var(--ease)}
.nacin-g svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nacin-g:hover{color:var(--tekst);border-color:var(--rub-jak)}
.nacin-g:focus-visible,.live-g:focus-visible{outline:2px solid var(--zlato);outline-offset:2px}
.live-g{display:none;align-items:center;gap:12px;min-height:56px;min-width:min(240px,100%);justify-content:center;padding:0 28px;border-radius:999px;border:1px solid var(--zlato);background:var(--panel);color:var(--tekst);font:600 16px var(--sans);letter-spacing:.01em;cursor:pointer;transition:box-shadow .2s var(--ease),background .2s var(--ease)}
.live-g:hover{box-shadow:0 0 0 4px var(--zlato-sjaj)}
.live-val{display:inline-flex;align-items:center;gap:3px;height:24px}
.live-val i{display:block;width:3px;height:24px;border-radius:2px;background:var(--zlato);transform:scaleY(.18);transform-origin:50% 50%;transition:transform .08s linear}
.live-g.on{box-shadow:0 0 0 4px var(--zlato-sjaj)}
.live-g[data-s="spaja"] .live-val i{opacity:.5}
/* pisanje: vidi se samo mala ikona „Live”; live: veliki gumb + ikona tipkovnice, traka i prijedlozi skriveni */
.nacin .live-g + .nacin-g{display:none}
.nacin-live .nacin .live-g{display:inline-flex}
.nacin-live .nacin .live-g + .nacin-g{display:inline-flex}
.nacin-live .nacin .u-pisanje{display:none}
.dock.nacin-live > .sugg,.dock.nacin-live > .cmd,.dock-app.nacin-live > .in{display:none}
@media (max-width:720px){.live-g{min-height:60px;min-width:min(280px,calc(100vw - 96px))}}
/* TITLOVI U LIVE NAČINU (T-531): prozorčić iznad gumba — što si rekao (sitno) i što Lega čita; skrol unutra, × sakrije.
   Uvijek centrirano, kao na naslovnici (Kruno 18. 10.: „titlovi uvijek na sredini, bez obzira gdje su”). */
.live-tit{position:relative;width:min(720px,100%);margin:8px auto 0;padding:10px 44px;text-align:center;border-radius:16px;border:1px solid var(--rub);background:var(--panel)}
.dock-app:not(.nacin-live) .live-tit,.dock:not(.nacin-live) .live-tit{display:none}
.lt-ti{margin:0 0 6px;font:500 13px/1.4 var(--sans);color:var(--tekst-2)}
.lt-ti::before{content:"Ti · ";font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.lt-ti:empty{display:none}
.lt-lega{font:400 16px/1.5 var(--sans);color:var(--tekst);max-height:6em;overflow:hidden;position:relative} /* najviše 4 retka (1.5 × 4) */
.lt-ti{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lt-r{transition:color .2s ease-out}
.lt-r.bilo{color:var(--tekst-2)}
.lt-r.on{color:var(--zlato);font-weight:500}
.lt-lega .lo-uvod{margin:0}
.lt-lega .lo-st{display:inline-grid;text-align:left}
.live-tit-x{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--tekst-2)}
.live-tit-x:hover{color:var(--tekst);background:var(--panel-2)}
.live-tit-x:focus-visible{outline:2px solid var(--zlato);outline-offset:2px}
.live-tit-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media (max-width:720px){.lt-lega{font-size:15px}}
@media (prefers-reduced-motion:reduce){.live-val i{transition:none}}
/* LJUSKA (audit 19. 10.): dok traje Live, stranica je u okviru preko cijelog zaslona, a razgovor (gumb Live, titlovi) u traci ljuske iznad nje.
   Ljuska skriva svoj sadržaj; u okviru stranica skriva svoju traku (razgovor je u ljusci). Traka ljuske ima isti položaj kao obična (.dock-app). */
body.ljuska > :not(.ljuska-okvir):not(.ljuska-dock):not(#toast):not(.lega-mik):not(.lega-nova):not(.lega-kvar){display:none!important}
body.ljuska{overflow:hidden}
.ljuska-okvir{position:fixed;inset:0;width:100%;height:100dvh;border:0;display:block;background:var(--noc);z-index:1}
.ljuska-dock{z-index:30}
.ljuska-dock .nacin-g{display:none!important} /* u razgovoru samo gumb Live; pisanje je na običnoj stranici nakon razgovora */
body.ljuska-danas .ljuska-dock .live-tit{display:none} /* na Danas tekst ide u veliki prikaz */
html.u-ljusci .dock-app,html.u-ljusci .dock{display:none!important}
@media (max-width:1100px){.ljuska-dock{bottom:76px;padding-bottom:8px;background:linear-gradient(transparent,var(--noc) 40%)}} /* izbornik stranice u okviru ostaje vidljiv ispod trake */

/* ---------- PROZORI (T-559, Kruno 20. 10.: prijedlog E „postojeće boje + okviri” prihvaćen) ----------
   HUD okvir (svg.fr), „skeniranje” i kutovi uklonjeni; oznake svg.fr/.scan u HTML-u još postoje pa se skrivaju dok se ne očiste (zadatak u dnevniku).
   Svaki panel (.hud) je zaobljen prozor s punim rubom; kad je vrsta poznata (data-kat, postavlja okvir.js prema naslovu), rub i točka uz naslov nose
   boju vrste: hitno 25 · pošta 252 · čeka 300 · termini 200 · uplate 150 · izvještaji 80 · klijenti 330. Prelazak mišem posvijetli rub (Kruno: „dobro izgleda”).
   Boje teme su iste; mijenja se samo prozor. Cijeli rub umjesto debele trake s lijeve strane (AI-tell). */
.hud > svg.fr,.hud .scan{display:none!important}
:root{--rub-L:.74;--rub-C:.14}
[data-theme="svjetlo"]{--rub-L:.60;--rub-C:.15}
.hud{border-radius:20px;border:1px solid var(--rub);transition:opacity .35s var(--ease),transform .5s var(--ease),border-color .2s var(--ease),background .2s var(--ease)}
.hud:hover{border-color:var(--rub-jak)}
.hud .lab{background:none;padding:14px 18px}
.hud .lab span:first-child{display:inline-flex;align-items:center;gap:10px;font-weight:600}
.hud[data-kat]{border-color:oklch(var(--rub-L) calc(var(--rub-C) * .6) var(--h))}
.hud[data-kat]:hover{border-color:oklch(var(--rub-L) var(--rub-C) var(--h))}
.hud[data-kat] .lab span:first-child::before{content:"";width:10px;height:10px;border-radius:50%;background:oklch(var(--rub-L) var(--rub-C) var(--h));flex:none}
.hud[data-kat="hitno"]{--h:25}.hud[data-kat="posta"]{--h:252}.hud[data-kat="ceka"]{--h:300}.hud[data-kat="termin"]{--h:200}
.hud[data-kat="uplata"]{--h:150}.hud[data-kat="izvj"]{--h:80}.hud[data-kat="klijent"]{--h:330}
.hud.red,.hud.gold,[data-theme="svjetlo"] .hud.red{box-shadow:none}
/* retci pošte u prozoru na mobitelu: vrijeme i oznaka gore, ime i naslov ispod (ime se prije lomilo slovo po slovo) */
@media (max-width:640px){
  .hud .rows li{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"vr tg" "tk tk";gap:4px 12px;align-items:center}
  .hud .rows li > time{grid-area:vr}.hud .rows li > .tg{grid-area:tg;justify-self:end}.hud .rows li > span:not(.tg){grid-area:tk;min-width:0}
}
/* T-621 (Kruno 2. 11., snimka u širini tableta/laptopa): kartica na Danas zna biti uska i na širokom zaslonu (~240 px) — isto slaganje kao na
   mobitelu, ali prema širini KARTICE, ne zaslona (prije: ime i naslov se lomili slovo po slovo jer je pravilo gledalo samo zaslon ≤ 640 px) */
.hud .body{container-type:inline-size}
@container (max-width:420px){ /* datum, pa tko i o čemu, pa oznaka u svom redu (uz datum joj ne ostaje mjesta i lomi se) */
  .hud .rows li{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"vr" "tk" "tg";gap:4px;align-items:start}
  .hud .rows li > time{grid-area:vr}.hud .rows li > .tg{grid-area:tg;justify-self:start}.hud .rows li > span:not(.tg){grid-area:tk;min-width:0}
}

/* TRAKA NA DNU — način Pisanje (T-582; Kruno 21. 10.: „Live strši desno, search bar prevelik, prečice bez veze, sve previsoko — uskladi”):
   jedno polje u jednom redu — prekidač na Live je ikona u polju (okvir.js ga premjesti), prečice-pitanja se ne prikazuju. Način Live ostaje:
   Live u sredini, tipkovnica desno. (Zamjenjuje T-571: gumb Live desno izvan polja.) */
:is(.dock,.dock-app) .sugg{display:none!important}
.dock:not(.nacin-live) > .nacin,.dock-app:not(.nacin-live) > .nacin{display:none}
.cmd .u-pisanje{display:grid!important;padding:0;min-width:0;min-height:0}
.cmd .u-pisanje span{display:none}
.cmd .u-pisanje svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* KVAR USLUGE (T-573): traka na vrhu kad Nadzornik sam nije uspio popraviti; ista mjera kao „Nova verzija”, crveni rub i točka */
.lega-kvar{position:fixed;z-index:59;top:16px;left:50%;transform:translateX(-50%);width:min(720px,calc(100vw - 32px));display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px;border-radius:16px;border:1px solid oklch(var(--rub-L) var(--rub-C) 25);background:var(--panel);color:var(--tekst);font:400 16px/1.45 var(--sans);box-shadow:0 4px 12px rgba(0,0,0,.18);animation:lega-nova-ulaz .2s ease-out}
.lega-kvar.ispod{top:96px}
.lega-kvar > span:nth-child(2){flex:1 1 260px}
.lega-kvar-tocka{width:10px;height:10px;border-radius:50%;background:oklch(var(--rub-L) var(--rub-C) 25);flex:none}
@media (prefers-reduced-motion:reduce){.lega-kvar{animation:none}}
@media (max-width:720px){:is(.dock,.dock-app):not(.nacin-live) .cmd{gap:6px;padding-left:12px}:is(.dock,.dock-app):not(.nacin-live) .cmd img.p{display:none}}