:root[data-theme="dark"]{--bg:#12151A;--card:#1B2027;--card2:#222833;--ink:#E8EBEF;--soft:#95A0AE;
 --line:#2C333D;--navy:#7FA8D8;--accent:#E2725B;--amber:#E0A33A;--ok:#4CAF7D;--no:#E0645A;--shadow:0 12px 30px -16px #000}
:root[data-theme="light"]{--bg:#F4F5F3;--card:#FFFFFF;--card2:#F7F8F9;--ink:#1B1F27;--soft:#5A6270;
 --line:#DFE3E8;--navy:#16324F;--accent:#C0392B;--amber:#A97400;--ok:#1E7A4C;--no:#C0392B;--shadow:0 10px 26px -18px rgba(22,50,79,.5)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);
 font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
 display:flex;flex-direction:column;min-height:100dvh;
 padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);transition:background .2s,color .2s}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.cz{font-family:Georgia,"Times New Roman",serif}

header{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:30}
.hin{max-width:680px;margin:0 auto;padding:11px 16px 0;display:flex;align-items:flex-start;gap:12px}
.brand{flex:1;font:600 15px/1.1 system-ui;color:var(--ink);display:flex;align-items:center;
 flex-wrap:wrap;gap:0 7px}
.flagcz{width:22px;height:15px;border-radius:2px;overflow:hidden;position:relative;
 display:inline-block;flex:0 0 auto;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.flagcz i{position:absolute;inset:0 0 50% 0;background:#fff}
.flagcz::after{content:"";position:absolute;inset:50% 0 0 0;background:#D7141A}
.flagcz b{position:absolute;left:0;top:0;bottom:0;width:0;height:0;
 border-top:7.5px solid transparent;border-bottom:7.5px solid transparent;
 border-left:11px solid #11457E;z-index:2}
.brand small{width:100%}
.brand small{display:block;font:10px/1.5 ui-monospace,monospace;color:var(--soft);
 letter-spacing:.1em;text-transform:uppercase;margin-top:3px}
.icobtn{background:none;border:1px solid var(--line);border-radius:7px;color:var(--soft);
 cursor:pointer;padding:7px 9px;font-size:15px;line-height:1}
.icobtn:hover{color:var(--ink);border-color:var(--soft)}
#langbtn{font:11px/1 ui-monospace,monospace;letter-spacing:.06em;padding:8px 8px;min-width:34px}
#langbtn u{text-decoration:underline;text-underline-offset:2px}
#docbtn{border-color:var(--amber);color:var(--amber);font:700 12px/1 system-ui;padding:8px 10px;white-space:nowrap}
#docbtn:hover{background:rgba(224,163,58,.14);color:var(--amber);border-color:var(--amber)}
#langbtn.cz{color:var(--navy);border-color:var(--navy)}
.tabrow{max-width:680px;margin:0 auto;padding:9px 16px 10px;display:flex;align-items:center;gap:8px}
.navsel{flex:1;min-width:0}
.navsel select{width:100%;font:12px/1 ui-monospace,monospace;letter-spacing:.07em;
 text-transform:uppercase;color:var(--ink);background-color:var(--card);border:1px solid var(--navy);
 border-radius:7px;padding:11px 38px 11px 12px;font-weight:700;
 -webkit-appearance:none;-moz-appearance:none;appearance:none;
 background-image:linear-gradient(45deg,transparent 50%,var(--navy) 50%),
  linear-gradient(135deg,var(--navy) 50%,transparent 50%);
 background-position:calc(100% - 23px) calc(50% - 2px),calc(100% - 17px) calc(50% - 2px);
 background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.tabwrap{flex:1;min-width:0;position:relative;display:flex;align-items:center}
.tabnav{flex:0 0 auto;width:24px;height:30px;border:1px solid var(--line);border-radius:6px;
 background:var(--card);color:var(--soft);cursor:pointer;font:13px/1 ui-monospace,monospace;
 padding:0;display:flex;align-items:center;justify-content:center;transition:opacity .2s}
.tabnav:hover{color:var(--ink);border-color:var(--soft)}
.tabnav[disabled]{opacity:.25;cursor:default}
/* senke koje pokazuju da ima još tabova */
.tabwrap::before,.tabwrap::after{content:"";position:absolute;top:0;bottom:0;width:22px;
 pointer-events:none;opacity:0;transition:opacity .2s;z-index:2}
.tabwrap::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.tabwrap::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.tabwrap.moreL::before{opacity:1}
.tabwrap.moreR::after{opacity:1}
.tabs{flex:1;min-width:0;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;align-items:stretch}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto}
.tab{border:0;background:none;cursor:pointer;color:var(--soft);
 font:11px/1 ui-monospace,monospace;letter-spacing:.09em;text-transform:uppercase;
 padding:11px 12px;border-bottom:2px solid transparent}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent);font-weight:700}
.tab.dictbtn{flex:0 0 auto;border:1px solid var(--line);border-radius:7px;
 padding:9px 12px;align-self:center;margin:0;
 border-bottom-color:var(--line);color:var(--soft);letter-spacing:.05em}
.tab.dictbtn[data-m="dict"]::before{content:"▤ ";opacity:.75}
.tab.dictbtn[data-m="rep"]::before{content:"◑ ";opacity:.75}
@media(hover:hover){.tab.dictbtn:hover{color:var(--ink);border-color:var(--soft)}}
.tab.dictbtn[aria-selected="true"]{color:var(--ink);background:var(--card2);
 border-color:var(--navy);border-bottom-color:var(--navy);font-weight:400}
.filters{max-width:680px;margin:0 auto;padding:10px 16px;display:flex;gap:8px;flex-wrap:wrap}
select{flex:1;min-width:0;font:12px/1 ui-monospace,monospace;color:var(--ink);background:var(--card);
 border:1px solid var(--line);border-radius:5px;padding:9px 34px 9px 10px;
 -webkit-appearance:none;-moz-appearance:none;appearance:none;
 background-image:linear-gradient(45deg,transparent 50%,var(--soft) 50%),
  linear-gradient(135deg,var(--soft) 50%,transparent 50%);
 background-position:calc(100% - 20px) calc(50% - 2px),calc(100% - 15px) calc(50% - 2px);
 background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select:focus-visible,button:focus-visible,.card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

main{flex:1;width:100%;max-width:680px;margin:0 auto;padding:14px 16px 26px;
 display:flex;flex-direction:column;gap:14px}
.panel
/* ---------- rečnik ---------- */
.dtools{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.dtools input{flex:1;min-width:140px;font:13px/1 system-ui;color:var(--ink);background:var(--card);
 border:1px solid var(--line);border-radius:5px;padding:10px 11px}
.dtools input:focus{outline:2px solid var(--accent);outline-offset:1px}
.dcount{font:11px/1 ui-monospace,monospace;color:var(--soft);margin-bottom:8px}
.vt{width:100%;border-collapse:collapse;font-size:13.5px}
.vt thead th{position:sticky;top:0;z-index:5;background:var(--bg);text-align:left;
 font:9px/1 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);
 padding:8px 8px;border-bottom:1px solid var(--line)}
.vt td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
/* prve tri kolone vertikalno centrirane */
.vt td:nth-child(-n+3){vertical-align:middle}
.vt td:nth-child(4){vertical-align:middle}
.vt .c{font-family:Georgia,serif;font-weight:600;cursor:pointer;white-space:nowrap}
.vt .c iconify-icon{color:var(--navy);font-size:17px;margin-right:6px;vertical-align:middle}
.vt .c span{vertical-align:middle}
.vt .c:hover{color:var(--navy);text-decoration:underline}
.vt .i{font:12px/1.4 ui-monospace,monospace;color:var(--amber);white-space:nowrap}
.vt .e{font-family:Georgia,serif;font-style:italic;font-size:12.5px;line-height:1.4}
.vt .es{font-size:11.5px;color:var(--soft);line-height:1.4;margin-top:2px}
.vt .gh td{background:var(--card2);font:10px/1 ui-monospace,monospace;letter-spacing:.1em;
 text-transform:uppercase;color:var(--soft);padding:9px 8px}
#p-dict{overflow:auto;max-height:calc(100dvh - 200px);scrollbar-width:thin;scrollbar-color:var(--line) transparent}
#p-dict::-webkit-scrollbar{height:6px}
#p-dict::-webkit-scrollbar-track{background:transparent}
#p-dict::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
#p-dict::-webkit-scrollbar-thumb:hover{background:var(--soft)}
/* globalno: tanka traka koja se uklapa u temu */
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:2px solid transparent;
 background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--soft);background-clip:content-box}
@media(max-width:660px){
 .vt{min-width:600px;font-size:12px}
 .vt td{padding:6px}
 .vt .i{font-size:11px}
 .vt .e{font-size:11.5px}
 .vt .es{font-size:10.5px}
}

/* ---------- spajanje reči ---------- */
.mwrap{display:flex;flex-direction:column;gap:12px}
.mtop{display:flex;align-items:center;gap:10px;font:11px/1 ui-monospace,monospace;color:var(--soft)}
.mtop .sc{margin-left:auto;color:var(--ink)}
.mtop .sc b{color:var(--ok)}
.mtop .miss b{color:var(--no)}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mcol{display:flex;flex-direction:column;gap:7px}
.mhead{font:9px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;
 color:var(--soft);padding:0 2px 2px}
.mi{background:var(--card);border:1px solid var(--line);border-radius:8px;
 padding:12px 11px;cursor:pointer;text-align:left;color:var(--ink);
 font-size:14.5px;line-height:1.3;min-height:48px;display:flex;align-items:center;gap:8px;
 transition:border-color .15s,background .15s,opacity .3s,transform .3s}
.mi.cz{font-family:Georgia,serif}
.mi iconify-icon{color:var(--navy);font-size:19px;flex:0 0 auto}
.mi:hover{border-color:var(--soft)}
.mi.sel{border-color:var(--navy);border-width:2px;background:var(--card2)}
.mi.hit{border-color:var(--ok);background:rgba(76,175,125,.12);color:var(--ok)}
.mi.miss{border-color:var(--no);background:rgba(224,100,90,.12);animation:sh .3s}
.mi.gone{opacity:0;transform:scale(.94);pointer-events:none}
@keyframes sh{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.mdone{text-align:center;padding:22px 10px}
.mdone b{display:block;font:600 21px/1.3 system-ui;color:var(--ok);margin-bottom:6px}

/* ---------- diktat ---------- */
.dk{display:flex;flex-direction:column;gap:13px;align-items:center;text-align:center;
 padding:6px 0 0}
.dk .play{width:62px;height:62px;border-radius:50%;border:2px solid var(--navy);
 background:var(--card);color:var(--navy);font-size:22px;cursor:pointer;
 display:flex;align-items:center;justify-content:center;transition:transform .15s,background .15s}
.dk .play:hover{background:var(--card2)}
.dk .play:active{transform:scale(.95)}
.dk .play.on{background:var(--navy);color:var(--bg)}
.dk .lbl2{font:10px/1.4 ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.dk input{width:100%;max-width:400px;font:17px/1.4 Georgia,serif;color:var(--ink);
 background:var(--card);border:1px solid var(--line);border-radius:8px;padding:13px 14px;text-align:center}
.dk input:focus{outline:2px solid var(--accent);outline-offset:1px}
.dk input.ok{border-color:var(--ok);color:var(--ok)}
.dk input.near{border-color:var(--amber);color:var(--amber)}
.dk input.bad{border-color:var(--no);color:var(--no)}
.dk .verd{font:12px/1.5 ui-monospace,monospace;min-height:36px;max-width:400px}
.dk .verd .sol{font:600 19px/1.35 Georgia,serif;display:block;margin-top:3px}
.dk .hintsr{font-size:13.5px;color:var(--soft);max-width:400px}
.dk .row2{display:flex;gap:8px;width:100%;max-width:400px}
.dk .row2 button{flex:1;font:12px/1 ui-monospace,monospace;letter-spacing:.06em;
 text-transform:uppercase;padding:13px 8px;border-radius:7px;border:1px solid var(--line);
 background:var(--card);color:var(--ink);cursor:pointer}
.dk .row2 .go{background:var(--navy);border-color:var(--navy);color:var(--bg);font-weight:700}
.dk .keys{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;max-width:400px}
.dk .keys button{font:15px/1 Georgia,serif;background:var(--card);border:1px solid var(--line);
 color:var(--ink);border-radius:6px;padding:8px 10px;cursor:pointer;min-width:34px}
.dk .keys button:hover{border-color:var(--navy);color:var(--navy)}

/* ---------- pisanje e-maila ---------- */
.ml{display:flex;flex-direction:column;gap:12px}
.mlhead{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent);
 border-radius:0 8px 8px 0;padding:12px 14px}
.mlhead h4{margin:0 0 4px;font:600 16px/1.3 system-ui}
.mlhead p{margin:0;font-size:13.5px;color:var(--soft);line-height:1.5}
.mlform{display:inline-block;font:9px/1 ui-monospace,monospace;letter-spacing:.12em;
 text-transform:uppercase;padding:3px 7px;border-radius:99px;margin-top:8px}
.mlform.vy{background:rgba(224,163,58,.16);color:var(--amber);border:1px solid var(--amber)}
.mlform.ty{background:rgba(127,168,216,.16);color:var(--navy);border:1px solid var(--navy)}
.mlpts{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.mlpts li{font-size:13px;color:var(--soft);display:flex;gap:7px;align-items:baseline}
.mlpts li::before{content:"○";color:var(--soft);font-size:10px}
.mlpts li.done{color:var(--ok)}
.mlpts li.done::before{content:"●";color:var(--ok)}
.ml textarea{width:100%;min-height:220px;font:15px/1.7 Georgia,serif;color:var(--ink);
 background:var(--card);border:1px solid var(--line);border-radius:8px;padding:13px 14px;resize:vertical}
.ml textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.mlbar{display:flex;align-items:center;gap:10px}
.mlbar .trk{flex:1;height:6px;background:var(--line);border-radius:99px;overflow:hidden}
.mlbar .trk i{display:block;height:100%;width:0;background:var(--no);border-radius:99px;
 transition:width .25s,background .25s}
.mlbar.ok .trk i{background:var(--ok)}
.mlbar .cnt{font:12px/1 ui-monospace,monospace;color:var(--soft);min-width:92px;text-align:right}
.mlbar .cnt b{font-size:15px;color:var(--no)}
.mlbar.ok .cnt b{color:var(--ok)}
.mlres{display:flex;flex-direction:column;gap:7px}
.chk{display:flex;gap:9px;align-items:flex-start;background:var(--card);border:1px solid var(--line);
 border-radius:7px;padding:10px 12px;font-size:13.5px;line-height:1.5}
.chk .ic{flex:0 0 auto;font:12px/1.4 ui-monospace,monospace}
.chk.ok{border-left:3px solid var(--ok)} .chk.ok .ic{color:var(--ok)}
.chk.warn{border-left:3px solid var(--amber)} .chk.warn .ic{color:var(--amber)}
.chk.bad{border-left:3px solid var(--no)} .chk.bad .ic{color:var(--no)}
.chk b{color:var(--ink)}
.chk code{font:12px/1.5 ui-monospace,monospace;background:var(--card2);padding:1px 5px;
 border-radius:4px;color:var(--amber)}
.mlmodel{background:var(--card2);border:1px solid var(--line);border-radius:8px;padding:14px;
 font:15px/1.65 Georgia,serif;white-space:pre-wrap}

/* ---------- ocena spremnosti ---------- */
.vd{border:1px solid var(--line);border-radius:11px;padding:16px;background:var(--card);
 margin-bottom:6px;position:relative;overflow:hidden}
.vd::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.vd.pass::before{background:var(--ok)} .vd.near::before{background:var(--amber)}
.vd.fail::before{background:var(--no)} .vd.none::before{background:var(--line)}
.vd .big{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.vd .num{font:600 40px/1 system-ui;letter-spacing:-.02em}
.vd.pass .num{color:var(--ok)} .vd.near .num{color:var(--amber)}
.vd.fail .num{color:var(--no)} .vd.none .num{color:var(--soft)}
.vd .verdict{font:600 15px/1.3 system-ui;margin-top:2px}
.vd .sub2{font-size:13px;color:var(--soft);line-height:1.55;margin-top:9px}
.vdbar{height:9px;background:var(--line);border-radius:99px;margin:13px 0 5px;position:relative;overflow:hidden}
.vdbar i{display:block;height:100%;border-radius:99px;transition:width .5s ease}
.vd.pass .vdbar i{background:var(--ok)} .vd.near .vdbar i{background:var(--amber)}
.vd.fail .vdbar i{background:var(--no)} .vd.none .vdbar i{background:var(--soft)}
.vdbar .th{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:.55}
.vdlbl{display:flex;justify-content:space-between;font:9px/1 ui-monospace,monospace;
 color:var(--soft);letter-spacing:.1em}
.skl{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.sk{display:flex;align-items:center;gap:10px;font-size:13px}
.sk .nm2{flex:0 0 108px;color:var(--soft)}
.sk .b2{flex:1;height:6px;background:var(--line);border-radius:99px;overflow:hidden;position:relative}
.sk .b2 i{display:block;height:100%;border-radius:99px}
.sk .b2 .thin{position:absolute;top:-2px;bottom:-2px;left:60%;width:1px;background:var(--ink);opacity:.4}
.sk .pc2{font:11px/1 ui-monospace,monospace;width:52px;text-align:right}
.sk.ok .pc2{color:var(--ok)} .sk.mid .pc2{color:var(--amber)} .sk.low .pc2{color:var(--no)}
.sk.na .pc2{color:var(--soft)}

/* ---------- izvor za spajanje ---------- */
.psrc{display:flex;gap:5px;margin-bottom:10px}
.psrc button{flex:1;font:10px/1.3 ui-monospace,monospace;letter-spacing:.05em;text-transform:uppercase;
 padding:9px 5px;border-radius:7px;border:1px solid var(--line);background:var(--card);
 color:var(--soft);cursor:pointer}
.psrc button[aria-pressed="true"]{color:var(--ink);border-color:var(--navy);background:var(--card2)}
.mi.wide{font-family:system-ui,-apple-system,sans-serif;font-size:13px;line-height:1.35}
.mi.wide.cz{font-family:Georgia,serif;font-size:14px}
/* ---------- kostur ---------- */
.ks{display:flex;flex-direction:column;gap:12px}
.kshead{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent);
 border-radius:0 8px 8px 0;padding:12px 14px}
.kshead h4{margin:0 0 3px;font:600 17px/1.3 system-ui}
.kshead p{margin:0;font-size:13px;color:var(--soft)}
.kstep{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:11px 13px}
.kstep .n2{font:9px/1 ui-monospace,monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.kstep .ttl{font:600 14px/1.3 system-ui;margin:5px 0 3px}
.kstep .pat{font-family:Georgia,serif;font-size:14px;color:var(--navy);font-style:italic}
.kstep .patsr{font-size:12px;color:var(--soft);margin-top:2px}
.kstep textarea{width:100%;min-height:52px;margin-top:9px;font:14.5px/1.6 Georgia,serif;
 color:var(--ink);background:var(--card2);border:1px solid var(--line);border-radius:6px;padding:9px 11px;resize:vertical}
.kstep textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.kstep.done{border-left:3px solid var(--ok)}

.picstrip{display:flex;gap:6px;margin:10px 0 4px;flex-wrap:wrap}
.picstrip div{flex:1;min-width:96px;background:var(--card2);border:1px solid var(--line);
 border-radius:7px;padding:9px 10px;font-size:12px;line-height:1.4;color:var(--soft);position:relative}
.picstrip div b{display:block;font:9px/1 ui-monospace,monospace;color:var(--accent);margin-bottom:5px}
.optrow{display:flex;gap:6px;margin:10px 0 4px}
.optrow div{flex:1;background:var(--card2);border:1px solid var(--line);border-radius:7px;
 padding:11px 8px;text-align:center;font-family:Georgia,serif;font-size:14.5px}

/* ---------- animacije ---------- */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes riseIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes opFadeIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.anim-fade{animation:fadeIn .28s ease both}
.stagger>*{animation:riseIn .34s ease both}
.opcell{animation:opFadeIn 1.1s ease-out both}
@media (prefers-reduced-motion:reduce){
 .anim-fade,.stagger>*,.opcell{animation:none!important;opacity:1!important;transform:none!important}
}

/* ---------- lepljivi footer iznad tastature ---------- */
.stickyfoot{position:sticky;bottom:0;z-index:12;background:var(--bg);
 padding:9px 0 calc(6px + env(safe-area-inset-bottom));
 border-top:1px solid var(--line);margin-top:auto}
.dk{padding-bottom:0}
#p-dkt,#p-mail,#p-oral{flex:1;display:flex;flex-direction:column;min-height:0}
#p-dkt>.dk{flex:1;display:flex;flex-direction:column;min-height:0}
.ml{flex:1;display:flex;flex-direction:column;min-height:0}
.ml textarea#mltxt{flex:1;min-height:140px;max-height:none;resize:none}

/* ---------- opis slike ---------- */
.opgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.opcell{background:var(--card2);border:1px solid var(--line);border-radius:8px;
 padding:10px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.opcell iconify-icon{font-size:40px;color:var(--navy)}
.opcell span{font:10px/1.3 ui-monospace,monospace;color:var(--soft)}
.optimer{font:600 26px/1 ui-monospace,monospace;color:var(--navy);text-align:center;margin:2px 0}
.optimer.run{color:var(--ok)}
.opq{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.opq li{font-size:13.5px;color:var(--soft);display:flex;gap:7px}
.opq li::before{content:"›";color:var(--accent)}
/* ---------- donacije ---------- */
.dona{position:relative;background:linear-gradient(135deg,rgba(224,163,58,.16),rgba(224,114,91,.14));
 border:1px solid var(--amber);border-radius:12px;padding:16px 16px 14px;margin-bottom:14px}
.dona h4{margin:0 0 6px;font:600 17px/1.3 system-ui;color:var(--ink)}
.dona p{margin:0 0 8px;font-size:13.5px;line-height:1.55;color:var(--soft)}
.dona .emo{font-size:26px;line-height:1;margin-bottom:6px}
.dona .btns{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.dona .give{flex:1;min-width:150px;background:var(--amber);color:#1B1F27;border:0;border-radius:8px;
 padding:12px;font:700 13px/1 system-ui;cursor:pointer;text-align:center;text-decoration:none;
 display:flex;align-items:center;justify-content:center;gap:6px}
.dona .give:hover{filter:brightness(1.08)}
.dona .close{background:none;border:1px solid var(--line);color:var(--soft);border-radius:8px;
 padding:12px 14px;font:12px/1 ui-monospace,monospace;cursor:pointer}
[hidden]{display:none!important}
#p-study{flex:1;display:flex;flex-direction:column;gap:14px}

.meter{display:flex;align-items:center;gap:10px;font:11px/1 ui-monospace,monospace;color:var(--soft)}
.meter .t{flex:1;height:4px;background:var(--line);border-radius:99px;overflow:hidden}
.meter .f{height:100%;width:0;background:var(--navy);transition:width .3s}

.scene{width:100%;perspective:1500px;-webkit-perspective:1500px}
.card{position:relative;width:100%;min-height:min(58vh,400px);cursor:pointer;
 -webkit-transform-style:preserve-3d;transform-style:preserve-3d;
 -webkit-transform:rotateY(0deg);transform:rotateY(0deg);
 -webkit-transition:-webkit-transform .55s cubic-bezier(.3,.9,.3,1);
 transition:transform .55s cubic-bezier(.3,.9,.3,1)}
.card.showback{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}
.card.showback .front{pointer-events:none}
.card:not(.showback) .back{pointer-events:none}
body.conv .card{min-height:min(70vh,560px)}
.face{position:absolute;inset:0;
 -webkit-backface-visibility:hidden;backface-visibility:hidden;
 background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 padding:38px 20px 30px;text-align:center;overflow:hidden}
.back{-webkit-transform:rotateY(180deg);transform:rotateY(180deg);
 border-top:3px solid var(--navy);justify-content:flex-start;padding:34px 20px 26px}
.scroll{width:100%;max-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;
 display:flex;flex-direction:column;align-items:center;
 margin:auto 0;padding:2px 0;scrollbar-width:none;-ms-overflow-style:none}
.scroll::-webkit-scrollbar{width:0;height:0;display:none}
.back::after,.back::before{content:"";position:absolute;left:1px;right:1px;height:30px;
 pointer-events:none;opacity:0;transition:opacity .22s;z-index:2}
.back::before{top:1px;background:linear-gradient(var(--card),transparent);border-radius:9px 9px 0 0}
.back::after{bottom:1px;background:linear-gradient(transparent,var(--card));border-radius:0 0 9px 9px}
.back.more::after{opacity:1}
.back.moretop::before{opacity:1}
.tl{position:absolute;top:11px;left:15px;font:10px/1 ui-monospace,monospace;letter-spacing:.09em;
 color:var(--accent);text-transform:uppercase}
.tr{position:absolute;top:11px;right:15px;font:10px/1 ui-monospace,monospace;color:var(--soft);
 max-width:52%;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.word.lat{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:600}
.word{font-family:Georgia,serif;font-size:clamp(29px,8vw,48px);line-height:1.14;color:var(--ink);word-break:break-word}
body.conv .word{font-size:clamp(20px,5.2vw,29px);line-height:1.3;max-width:470px}
.hint{position:absolute;bottom:14px;left:0;right:0;font:10px/1 ui-monospace,monospace;
 color:var(--soft);opacity:.7;letter-spacing:.1em;text-transform:uppercase}

.spk{background:none;border:1px solid var(--line);border-radius:50%;width:30px;height:30px;
 flex:0 0 auto;cursor:pointer;color:var(--navy);font-size:13px;line-height:1;padding:0;
 display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.spk:hover{border-color:var(--navy);background:var(--card2)}
.spk.sm{width:25px;height:25px;font-size:11px}
.spk.on{background:var(--navy);color:var(--bg);border-color:var(--navy)}
.wrow{display:flex;align-items:center;justify-content:center;gap:11px;flex-wrap:wrap}

.iz{font:600 clamp(16px,4.3vw,21px)/1.3 ui-monospace,monospace;color:var(--amber);word-break:break-word}
.izl{font:9px/1 ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin-bottom:5px}
.sr{font-size:clamp(19px,5vw,27px);font-weight:600;line-height:1.25;max-width:470px}
.sep{width:100%;max-width:360px;border-top:1px dashed var(--line);margin:15px 0 13px}
.ex{font-family:Georgia,serif;font-style:italic;font-size:15px;line-height:1.45;max-width:430px}
.exsr{font-size:13px;color:var(--soft);margin-top:5px;max-width:430px}

.ansl{width:100%;max-width:470px;text-align:left;margin-top:4px}
.ansl .lbl{font:9px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;
 color:var(--amber);margin:14px 0 9px;text-align:center}
.ans{background:var(--card2);border:1px solid var(--line);border-left:3px solid var(--navy);
 border-radius:0 6px 6px 0;padding:9px 11px;margin-bottom:7px;display:flex;gap:9px;align-items:flex-start}
.ans .n{font:10px/1.6 ui-monospace,monospace;color:var(--soft);flex:0 0 auto}
.ans .tx{flex:1;min-width:0}
.ans .a{font-family:Georgia,serif;font-size:14.5px;line-height:1.4}
.ans .s{font-size:12.5px;color:var(--soft);margin-top:3px;line-height:1.4}

.pad{display:flex;gap:8px}
.pad button{flex:1;font:12px/1 ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;
 padding:15px 8px;border-radius:7px;border:1px solid var(--line);background:var(--card);
 color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center}
.pad .know{border-color:var(--ok);color:var(--ok)}
.pad .go{background:var(--navy);border-color:var(--navy);color:var(--bg);font-weight:700}
.pad button:disabled{opacity:.35;cursor:default}
.bar2{border:1px solid var(--line);border-radius:9px;background:var(--card);overflow:hidden}
.bar2 .r1,.bar2 .r2{display:flex}
.bar2 .r1{border-bottom:1px solid var(--line)}
.bar2 button{flex:1;background:none;border:0;color:var(--soft);cursor:pointer;
 font:10px/1.35 ui-monospace,monospace;letter-spacing:.05em;padding:10px 5px;
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0}
.bar2 .r1 button+button,.bar2 .r2 button+button{border-left:1px solid var(--line)}
.bar2 button i{font-size:15px;font-style:normal;line-height:1}
.bar2 button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.bar2 button:hover{color:var(--ink);background:var(--card2)}
.bar2 button[aria-pressed="true"]{color:var(--accent);background:var(--card2)}
.bar2 button[aria-pressed="true"] i{color:var(--accent)}
.modelbl{font:9px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;
 color:var(--soft);text-align:center;padding:7px 0 0}
/* pomagač */
.helper{margin-top:14px;font-size:15px;color:var(--soft);opacity:0;transition:opacity .5s ease;
 max-width:430px}
.helper.on{opacity:1}

/* na telefonu: dugmad drže prirodnu visinu da ceo red ispod (ponovi/preskoči/pravi test)
   ostane vidljiv bez skrolovanja */
@media(max-width:660px){
 #p-study{gap:10px}
 .pad{flex:0 0 auto}
 .bar2{flex:0 0 auto;display:flex;flex-direction:column}
 .bar2 .r1{flex:0 0 auto}
 .bar2 .r2{flex:0 0 auto}
}
/* na niskim ekranima kartica se dodatno smanjuje da bi red ispod dugmadi ostao vidljiv bez skrolovanja */
@media(max-width:660px) and (max-height:760px){
 .card{min-height:min(46vh,320px)}
 body.conv .card{min-height:min(50vh,420px)}
}
@media(max-width:660px) and (max-height:700px){
 .card{min-height:min(40vh,270px)}
 body.conv .card{min-height:min(46vh,360px)}
 .bar2 button{padding:8px 5px}
}
.helper small{display:block;font:9px/1 ui-monospace,monospace;letter-spacing:.14em;
 text-transform:uppercase;color:var(--amber);margin-bottom:5px}
/* ikonica na kartici */
.cardic{color:var(--navy);margin-bottom:14px;line-height:0;
 height:56px;width:56px;flex:0 0 auto;              /* prostor rezervisan pre učitavanja */
 display:flex;align-items:center;justify-content:center;
 opacity:0;transition:opacity .25s ease}
.cardic.ready{opacity:.9}
.cardic[hidden]{display:none}
.cardic iconify-icon{font-size:56px;display:block;width:56px;height:56px}
/* medalja */
.medal{display:inline-flex;align-items:center;gap:4px;font:10px/1 ui-monospace,monospace;
 padding:3px 7px;border-radius:99px;margin-left:7px;vertical-align:2px;letter-spacing:.06em}
.m70{background:rgba(224,163,58,.16);color:var(--amber);border:1px solid var(--amber)}
.m90{background:rgba(127,168,216,.16);color:var(--navy);border:1px solid var(--navy)}
.m100{background:rgba(76,175,125,.16);color:var(--ok);border:1px solid var(--ok)}

/* report */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px}
.st{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:12px 13px}
.st b{display:block;font:600 23px/1.15 system-ui;color:var(--ink)}
.st b .u{font:600 13px/1 system-ui!important;letter-spacing:0!important;
 text-transform:none!important;color:inherit!important}
.st span{font:9px/1.4 ui-monospace,monospace;letter-spacing:.11em;text-transform:uppercase;color:var(--soft)}
.st.ok b{color:var(--ok)} .st.no b{color:var(--no)} .st.hi b{color:var(--amber)}
h3{font:600 13px/1 system-ui;color:var(--soft);margin:18px 0 8px;
 text-transform:uppercase;letter-spacing:.08em}
.catrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.catrow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.catrow .bar{width:78px;height:5px;background:var(--line);border-radius:99px;overflow:hidden;flex:0 0 auto}
.catrow .bar i{display:block;height:100%;background:var(--ok)}
.catrow .pc{font:11px/1 ui-monospace,monospace;color:var(--soft);width:36px;text-align:right;flex:0 0 auto}
.lst{margin-top:6px}
.li{display:flex;gap:10px;align-items:center;padding:10px 12px;background:var(--card);
 border:1px solid var(--line);border-radius:7px;margin-bottom:6px;cursor:pointer;text-align:left;width:100%}
.li:hover{border-color:var(--soft)}
.li .dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.li .m{flex:1;min-width:0}
.li .c{font-family:Georgia,serif;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li .s2{font-size:12px;color:var(--soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li .k{font:10px/1 ui-monospace,monospace;color:var(--soft);flex:0 0 auto}
.empty{color:var(--soft);font-size:14px;padding:22px 0;text-align:center}

/* modal */
.ovl{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;
 justify-content:center;padding:16px;z-index:60;overscroll-behavior:contain;touch-action:none}
.dlg{overscroll-behavior:contain;touch-action:pan-y}
.ovl[hidden]{display:none}
.dlg{background:var(--card);border:1px solid var(--line);border-radius:11px;max-width:460px;width:100%;
 max-height:86vh;box-shadow:var(--shadow);
 display:flex;flex-direction:column;padding:0;overflow:hidden}
.dlg-head{flex:0 0 auto;padding:20px 20px 12px}
.dlg-body{flex:1 1 auto;overflow-y:auto;padding:0 20px 20px;scrollbar-width:none}
.dlg-body::-webkit-scrollbar{width:0;display:none}
.dlg-foot{flex:0 0 auto;padding:12px 20px 20px;border-top:1px solid var(--line)}
.dlg-foot .opt{margin:0;padding:11px;font:12px/1 ui-monospace,monospace;letter-spacing:.06em;
 text-transform:uppercase;text-align:center}
.dlg h4{margin:0 0 4px;font:600 19px/1.25 Georgia,serif}
.dlg .x{float:right;background:none;border:0;color:var(--soft);font-size:22px;cursor:pointer;line-height:1}
.opt{display:block;width:100%;text-align:left;background:var(--card2);border:1px solid var(--line);
 border-radius:7px;padding:13px 14px;margin-bottom:8px;cursor:pointer;color:var(--ink);font-size:14.5px}
.opt:hover{border-color:var(--navy)}
.opt small{display:block;color:var(--soft);font-size:12px;margin-top:3px}
.note{font-size:12px;color:var(--soft);line-height:1.5;margin-top:12px}

/* ---------- rečnik ---------- */
.dtools{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.dtools input{flex:1;min-width:140px;font:13px/1 system-ui;color:var(--ink);background:var(--card);
 border:1px solid var(--line);border-radius:5px;padding:10px 11px}
.dtools input:focus{outline:2px solid var(--accent);outline-offset:1px}
.dcount{font:11px/1 ui-monospace,monospace;color:var(--soft);margin-bottom:8px}
.vt{width:100%;border-collapse:collapse;font-size:13.5px}
.vt thead th{position:sticky;top:0;z-index:5;background:var(--bg);text-align:left;
 font:9px/1 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);
 padding:8px 8px;border-bottom:1px solid var(--line)}
.vt td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
/* prve tri kolone vertikalno centrirane */
.vt td:nth-child(-n+3){vertical-align:middle}
.vt td:nth-child(4){vertical-align:middle}
.vt .c{font-family:Georgia,serif;font-weight:600;cursor:pointer;white-space:nowrap}
.vt .c iconify-icon{color:var(--navy);font-size:17px;margin-right:6px;vertical-align:middle}
.vt .c span{vertical-align:middle}
.vt .c:hover{color:var(--navy);text-decoration:underline}
.vt .i{font:12px/1.4 ui-monospace,monospace;color:var(--amber);white-space:nowrap}
.vt .e{font-family:Georgia,serif;font-style:italic;font-size:12.5px;line-height:1.4}
.vt .es{font-size:11.5px;color:var(--soft);line-height:1.4;margin-top:2px}
.vt .gh td{background:var(--card2);font:10px/1 ui-monospace,monospace;letter-spacing:.1em;
 text-transform:uppercase;color:var(--soft);padding:9px 8px}
#p-dict{overflow:auto;max-height:calc(100dvh - 200px);scrollbar-width:thin;scrollbar-color:var(--line) transparent}
#p-dict::-webkit-scrollbar{height:6px}
#p-dict::-webkit-scrollbar-track{background:transparent}
#p-dict::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
#p-dict::-webkit-scrollbar-thumb:hover{background:var(--soft)}
/* globalno: tanka traka koja se uklapa u temu */
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:2px solid transparent;
 background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--soft);background-clip:content-box}
@media(max-width:660px){
 .vt{min-width:600px;font-size:12px}
 .vt td{padding:6px}
 .vt .i{font-size:11px}
 .vt .e{font-size:11.5px}
 .vt .es{font-size:10.5px}
}

/* ---------- spajanje reči ---------- */
.mwrap{display:flex;flex-direction:column;gap:12px}
.mtop{display:flex;align-items:center;gap:10px;font:11px/1 ui-monospace,monospace;color:var(--soft)}
.mtop .sc{margin-left:auto;color:var(--ink)}
.mtop .sc b{color:var(--ok)}
.mtop .miss b{color:var(--no)}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mcol{display:flex;flex-direction:column;gap:7px}
.mhead{font:9px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;
 color:var(--soft);padding:0 2px 2px}
.mi{background:var(--card);border:1px solid var(--line);border-radius:8px;
 padding:12px 11px;cursor:pointer;text-align:left;color:var(--ink);
 font-size:14.5px;line-height:1.3;min-height:48px;display:flex;align-items:center;gap:8px;
 transition:border-color .15s,background .15s,opacity .3s,transform .3s}
.mi.cz{font-family:Georgia,serif}
.mi iconify-icon{color:var(--navy);font-size:19px;flex:0 0 auto}
.mi:hover{border-color:var(--soft)}
.mi.sel{border-color:var(--navy);border-width:2px;background:var(--card2)}
.mi.hit{border-color:var(--ok);background:rgba(76,175,125,.12);color:var(--ok)}
.mi.miss{border-color:var(--no);background:rgba(224,100,90,.12);animation:sh .3s}
.mi.gone{opacity:0;transform:scale(.94);pointer-events:none}
@keyframes sh{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.mdone{text-align:center;padding:22px 10px}
.mdone b{display:block;font:600 21px/1.3 system-ui;color:var(--ok);margin-bottom:6px}

/* ---------- diktat ---------- */
.dk{display:flex;flex-direction:column;gap:13px;align-items:center;text-align:center;
 padding:6px 0 0}
.dk .play{width:62px;height:62px;border-radius:50%;border:2px solid var(--navy);
 background:var(--card);color:var(--navy);font-size:22px;cursor:pointer;
 display:flex;align-items:center;justify-content:center;transition:transform .15s,background .15s}
.dk .play:hover{background:var(--card2)}
.dk .play:active{transform:scale(.95)}
.dk .play.on{background:var(--navy);color:var(--bg)}
.dk .lbl2{font:10px/1.4 ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.dk input{width:100%;max-width:400px;font:17px/1.4 Georgia,serif;color:var(--ink);
 background:var(--card);border:1px solid var(--line);border-radius:8px;padding:13px 14px;text-align:center}
.dk input:focus{outline:2px solid var(--accent);outline-offset:1px}
.dk input.ok{border-color:var(--ok);color:var(--ok)}
.dk input.near{border-color:var(--amber);color:var(--amber)}
.dk input.bad{border-color:var(--no);color:var(--no)}
.dk .verd{font:12px/1.5 ui-monospace,monospace;min-height:36px;max-width:400px}
.dk .verd .sol{font:600 19px/1.35 Georgia,serif;display:block;margin-top:3px}
.dk .hintsr{font-size:13.5px;color:var(--soft);max-width:400px}
.dk .row2{display:flex;gap:8px;width:100%;max-width:400px}
.dk .row2 button{flex:1;font:12px/1 ui-monospace,monospace;letter-spacing:.06em;
 text-transform:uppercase;padding:13px 8px;border-radius:7px;border:1px solid var(--line);
 background:var(--card);color:var(--ink);cursor:pointer}
.dk .row2 .go{background:var(--navy);border-color:var(--navy);color:var(--bg);font-weight:700}
.dk .keys{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;max-width:400px}
.dk .keys button{font:15px/1 Georgia,serif;background:var(--card);border:1px solid var(--line);
 color:var(--ink);border-radius:6px;padding:8px 10px;cursor:pointer;min-width:34px}
.dk .keys button:hover{border-color:var(--navy);color:var(--navy)}

/* ---------- pisanje e-maila ---------- */
.ml{display:flex;flex-direction:column;gap:12px}
.mlhead{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent);
 border-radius:0 8px 8px 0;padding:12px 14px}
.mlhead h4{margin:0 0 4px;font:600 16px/1.3 system-ui}
.mlhead p{margin:0;font-size:13.5px;color:var(--soft);line-height:1.5}
.mlform{display:inline-block;font:9px/1 ui-monospace,monospace;letter-spacing:.12em;
 text-transform:uppercase;padding:3px 7px;border-radius:99px;margin-top:8px}
.mlform.vy{background:rgba(224,163,58,.16);color:var(--amber);border:1px solid var(--amber)}
.mlform.ty{background:rgba(127,168,216,.16);color:var(--navy);border:1px solid var(--navy)}
.mlpts{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.mlpts li{font-size:13px;color:var(--soft);display:flex;gap:7px;align-items:baseline}
.mlpts li::before{content:"○";color:var(--soft);font-size:10px}
.mlpts li.done{color:var(--ok)}
.mlpts li.done::before{content:"●";color:var(--ok)}
.ml textarea{width:100%;min-height:220px;font:15px/1.7 Georgia,serif;color:var(--ink);
 background:var(--card);border:1px solid var(--line);border-radius:8px;padding:13px 14px;resize:vertical}
.ml textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.mlbar{display:flex;align-items:center;gap:10px}
.mlbar .trk{flex:1;height:6px;background:var(--line);border-radius:99px;overflow:hidden}
.mlbar .trk i{display:block;height:100%;width:0;background:var(--no);border-radius:99px;
 transition:width .25s,background .25s}
.mlbar.ok .trk i{background:var(--ok)}
.mlbar .cnt{font:12px/1 ui-monospace,monospace;color:var(--soft);min-width:92px;text-align:right}
.mlbar .cnt b{font-size:15px;color:var(--no)}
.mlbar.ok .cnt b{color:var(--ok)}
.mlres{display:flex;flex-direction:column;gap:7px}
.chk{display:flex;gap:9px;align-items:flex-start;background:var(--card);border:1px solid var(--line);
 border-radius:7px;padding:10px 12px;font-size:13.5px;line-height:1.5}
.chk .ic{flex:0 0 auto;font:12px/1.4 ui-monospace,monospace}
.chk.ok{border-left:3px solid var(--ok)} .chk.ok .ic{color:var(--ok)}
.chk.warn{border-left:3px solid var(--amber)} .chk.warn .ic{color:var(--amber)}
.chk.bad{border-left:3px solid var(--no)} .chk.bad .ic{color:var(--no)}
.chk b{color:var(--ink)}
.chk code{font:12px/1.5 ui-monospace,monospace;background:var(--card2);padding:1px 5px;
 border-radius:4px;color:var(--amber)}
.mlmodel{background:var(--card2);border:1px solid var(--line);border-radius:8px;padding:14px;
 font:15px/1.65 Georgia,serif;white-space:pre-wrap}

/* ---------- ocena spremnosti ---------- */
.vd{border:1px solid var(--line);border-radius:11px;padding:16px;background:var(--card);
 margin-bottom:6px;position:relative;overflow:hidden}
.vd::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.vd.pass::before{background:var(--ok)} .vd.near::before{background:var(--amber)}
.vd.fail::before{background:var(--no)} .vd.none::before{background:var(--line)}
.vd .big{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.vd .num{font:600 40px/1 system-ui;letter-spacing:-.02em}
.vd.pass .num{color:var(--ok)} .vd.near .num{color:var(--amber)}
.vd.fail .num{color:var(--no)} .vd.none .num{color:var(--soft)}
.vd .verdict{font:600 15px/1.3 system-ui;margin-top:2px}
.vd .sub2{font-size:13px;color:var(--soft);line-height:1.55;margin-top:9px}
.vdbar{height:9px;background:var(--line);border-radius:99px;margin:13px 0 5px;position:relative;overflow:hidden}
.vdbar i{display:block;height:100%;border-radius:99px;transition:width .5s ease}
.vd.pass .vdbar i{background:var(--ok)} .vd.near .vdbar i{background:var(--amber)}
.vd.fail .vdbar i{background:var(--no)} .vd.none .vdbar i{background:var(--soft)}
.vdbar .th{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:.55}
.vdlbl{display:flex;justify-content:space-between;font:9px/1 ui-monospace,monospace;
 color:var(--soft);letter-spacing:.1em}
.skl{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.sk{display:flex;align-items:center;gap:10px;font-size:13px}
.sk .nm2{flex:0 0 108px;color:var(--soft)}
.sk .b2{flex:1;height:6px;background:var(--line);border-radius:99px;overflow:hidden;position:relative}
.sk .b2 i{display:block;height:100%;border-radius:99px}
.sk .b2 .thin{position:absolute;top:-2px;bottom:-2px;left:60%;width:1px;background:var(--ink);opacity:.4}
.sk .pc2{font:11px/1 ui-monospace,monospace;width:52px;text-align:right}
.sk.ok .pc2{color:var(--ok)} .sk.mid .pc2{color:var(--amber)} .sk.low .pc2{color:var(--no)}
.sk.na .pc2{color:var(--soft)}

/* ---------- izvor za spajanje ---------- */
.psrc{display:flex;gap:5px;margin-bottom:10px}
.psrc button{flex:1;font:10px/1.3 ui-monospace,monospace;letter-spacing:.05em;text-transform:uppercase;
 padding:9px 5px;border-radius:7px;border:1px solid var(--line);background:var(--card);
 color:var(--soft);cursor:pointer}
.psrc button[aria-pressed="true"]{color:var(--ink);border-color:var(--navy);background:var(--card2)}
.mi.wide{font-family:system-ui,-apple-system,sans-serif;font-size:13px;line-height:1.35}
.mi.wide.cz{font-family:Georgia,serif;font-size:14px}
/* ---------- kostur ---------- */
.ks{display:flex;flex-direction:column;gap:12px}
.kshead{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent);
 border-radius:0 8px 8px 0;padding:12px 14px}
.kshead h4{margin:0 0 3px;font:600 17px/1.3 system-ui}
.kshead p{margin:0;font-size:13px;color:var(--soft)}
.kstep{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:11px 13px}
.kstep .n2{font:9px/1 ui-monospace,monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.kstep .ttl{font:600 14px/1.3 system-ui;margin:5px 0 3px}
.kstep .pat{font-family:Georgia,serif;font-size:14px;color:var(--navy);font-style:italic}
.kstep .patsr{font-size:12px;color:var(--soft);margin-top:2px}
.kstep textarea{width:100%;min-height:52px;margin-top:9px;font:14.5px/1.6 Georgia,serif;
 color:var(--ink);background:var(--card2);border:1px solid var(--line);border-radius:6px;padding:9px 11px;resize:vertical}
.kstep textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.kstep.done{border-left:3px solid var(--ok)}

.picstrip{display:flex;gap:6px;margin:10px 0 4px;flex-wrap:wrap}
.picstrip div{flex:1;min-width:96px;background:var(--card2);border:1px solid var(--line);
 border-radius:7px;padding:9px 10px;font-size:12px;line-height:1.4;color:var(--soft);position:relative}
.picstrip div b{display:block;font:9px/1 ui-monospace,monospace;color:var(--accent);margin-bottom:5px}
.optrow{display:flex;gap:6px;margin:10px 0 4px}
.optrow div{flex:1;background:var(--card2);border:1px solid var(--line);border-radius:7px;
 padding:11px 8px;text-align:center;font-family:Georgia,serif;font-size:14.5px}

/* ---------- animacije ---------- */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes riseIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes opFadeIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.anim-fade{animation:fadeIn .28s ease both}
.stagger>*{animation:riseIn .34s ease both}
.opcell{animation:opFadeIn 1.1s ease-out both}
@media (prefers-reduced-motion:reduce){
 .anim-fade,.stagger>*,.opcell{animation:none!important;opacity:1!important;transform:none!important}
}

/* ---------- lepljivi footer iznad tastature ---------- */
.stickyfoot{position:sticky;bottom:0;z-index:12;background:var(--bg);
 padding:9px 0 calc(6px + env(safe-area-inset-bottom));
 border-top:1px solid var(--line);margin-top:auto}
.dk{padding-bottom:0}
#p-dkt,#p-mail,#p-oral{flex:1;display:flex;flex-direction:column;min-height:0}
#p-dkt>.dk{flex:1;display:flex;flex-direction:column;min-height:0}
.ml{flex:1;display:flex;flex-direction:column;min-height:0}
.ml textarea#mltxt{flex:1;min-height:140px;max-height:none;resize:none}

/* ---------- opis slike ---------- */
.opgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.opcell{background:var(--card2);border:1px solid var(--line);border-radius:8px;
 padding:10px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.opcell iconify-icon{font-size:40px;color:var(--navy)}
.opcell span{font:10px/1.3 ui-monospace,monospace;color:var(--soft)}
.optimer{font:600 26px/1 ui-monospace,monospace;color:var(--navy);text-align:center;margin:2px 0}
.optimer.run{color:var(--ok)}
.opq{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.opq li{font-size:13.5px;color:var(--soft);display:flex;gap:7px}
.opq li::before{content:"›";color:var(--accent)}
/* ---------- donacije ---------- */
.dona{position:relative;background:linear-gradient(135deg,rgba(224,163,58,.16),rgba(224,114,91,.14));
 border:1px solid var(--amber);border-radius:12px;padding:16px 16px 14px;margin-bottom:14px}
.dona h4{margin:0 0 6px;font:600 17px/1.3 system-ui;color:var(--ink)}
.dona p{margin:0 0 8px;font-size:13.5px;line-height:1.55;color:var(--soft)}
.dona .emo{font-size:26px;line-height:1;margin-bottom:6px}
.dona .btns{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.dona .give{flex:1;min-width:150px;background:var(--amber);color:#1B1F27;border:0;border-radius:8px;
 padding:12px;font:700 13px/1 system-ui;cursor:pointer;text-align:center;text-decoration:none;
 display:flex;align-items:center;justify-content:center;gap:6px}
.dona .give:hover{filter:brightness(1.08)}
.dona .close{background:none;border:1px solid var(--line);color:var(--soft);border-radius:8px;
 padding:12px 14px;font:12px/1 ui-monospace,monospace;cursor:pointer}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){.meter .f{transition:none}}
@media(max-width:430px){.pad button{font-size:11px;padding:14px 4px}.face{padding:34px 15px 28px}}

/* ---------- splash (uvodni ekran) ---------- */
#splash{position:fixed;inset:0;z-index:9999;background:var(--bg);
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
 padding:24px;transition:opacity .45s ease,visibility .45s ease}
#splash.gone{opacity:0;visibility:hidden;pointer-events:none}
/* icon.png ima ~28% providne ivice, pa je nacrtan kvadrat manji od okvira slike */
#splash img{width:min(72vw,320px);height:auto;margin-bottom:-12px;
 filter:drop-shadow(0 18px 34px rgba(0,0,0,.28));
 animation:splashPop .55s cubic-bezier(.2,.8,.3,1) both}
#splash .sname{font:700 19px/1.2 system-ui;letter-spacing:.01em;color:var(--ink);
 animation:splashPop .55s cubic-bezier(.2,.8,.3,1) .1s both}
#splash .stag{font:10px/1.5 ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;
 color:var(--soft);margin-top:-10px;animation:splashPop .55s cubic-bezier(.2,.8,.3,1) .18s both}
#splash .sbar{width:120px;height:3px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:6px}
#splash .sbar i{display:block;height:100%;width:40%;border-radius:99px;background:var(--accent);
 animation:splashBar 1.1s ease-in-out infinite}
@keyframes splashPop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes splashBar{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}
@media (prefers-reduced-motion:reduce){
 #splash img,#splash .sname,#splash .stag{animation:none}
 #splash .sbar i{animation-duration:2.4s}
}