/* PGD Vaje — design tokeni (svetlo + temno), ploščat slog kot pgd app */
:root{
  --ozadje:#ECEAE4; --povrsina:#FFFFFF; --povrsina2:#F6F5F1; /* paleta Papir kontrast (prej #F7F6F2, #FFFFFF, #FBFAF7) */
  --t:#1A1A18; --t2:#5F5E5A; --t3:#95938C;
  --rob:rgba(0,0,0,.11); --rob2:rgba(0,0,0,.22);
  --primary:#C8102E; --primary-ink:#FFFFFF; --head:#1B3A6B; --nova:#16A34A; --nova-t:#FFFFFF;
  --zel:#1D9E75; --zel-bg:#E1F5EE; --ora:#BA7517; --ora-bg:#FAEEDA;
  --siv:#8B8A82; --siv-bg:#EEEDE8;
  --im-moj:#007AFF; --im-tuj:#E9E9EB; --im-tuj-t:#000; --im-tuj-tema:#FFFFFF; /* mehurčki kot iMessage */
  --r:13px; --r-sm:9px;
  --shadow-card:0 1px 2px rgba(16,24,40,.05);
  --font:'Schibsted Grotesk',system-ui,-apple-system,sans-serif;
}
/* svetle teme: light (Svetla), mehka (Svetla mehka), topla (Svetla topla); temne: dark (Temna), modra (Temna modra) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="mehka"]):not([data-theme="topla"]):not([data-theme="modra"]){ /* modra ima svoj blok spodaj */
    --ozadje:#121317; --povrsina:#1B1D22; --povrsina2:#22252B;
    --t:#ECEDEF; --t2:#9AA0A8; --t3:#6B7078;
    --rob:rgba(255,255,255,.10); --rob2:rgba(255,255,255,.22);
    --primary:#F2545B; --primary-ink:#FFFFFF; --head:#6E9BE0; --nova:#22C55E; --nova-t:#05200E;
    --zel:#34C88A; --zel-bg:rgba(52,200,138,.16); --ora:#E0A33B; --ora-bg:rgba(224,163,59,.16);
    --siv:#6B6F78; --siv-bg:rgba(255,255,255,.06);
    --im-moj:#0A84FF; --im-tuj:#2C2C2E; --im-tuj-t:#FFFFFF; --im-tuj-tema:#2C2C2E;
    --shadow-card:none;
  }
}
:root[data-theme="dark"],:root[data-theme="modra"]{
  --ozadje:#121317; --povrsina:#1B1D22; --povrsina2:#22252B;
  --t:#ECEDEF; --t2:#9AA0A8; --t3:#6B7078;
  --rob:rgba(255,255,255,.10); --rob2:rgba(255,255,255,.22);
  --primary:#F2545B; --primary-ink:#FFFFFF; --head:#6E9BE0; --nova:#22C55E; --nova-t:#05200E;
  --zel:#34C88A; --zel-bg:rgba(52,200,138,.16); --ora:#E0A33B; --ora-bg:rgba(224,163,59,.16);
  --siv:#6B6F78; --siv-bg:rgba(255,255,255,.06);
  --im-moj:#0A84FF; --im-tuj:#2C2C2E; --im-tuj-t:#FFFFFF; --im-tuj-tema:#2C2C2E;
}
/* Svetla mehka: prejšnja svetla */
:root[data-theme="mehka"]{--ozadje:#F7F6F2; --povrsina:#FFFFFF; --povrsina2:#FBFAF7; --rob:rgba(0,0,0,.12)}
/* Svetla topla: peščena */
:root[data-theme="topla"]{--ozadje:#F3EFE7; --povrsina:#FFFDF8; --povrsina2:#F8F4EC; --rob:rgba(60,40,10,.13)}
/* Temna modra: polnočno modra (ostalo kot Temna) */
:root[data-theme="modra"]{--ozadje:#0E1420; --povrsina:#172033; --povrsina2:#1F2A40; --rob:rgba(160,190,255,.13)}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--ozadje); color:var(--t);
  font-family:var(--font); font-size:15px; line-height:1.4;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"tnum" 1;
}
#root{min-height:100%;font-family:var(--font)}
.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:20px;line-height:1;vertical-align:middle;-webkit-font-feature-settings:'liga';user-select:none}

.app{max-width:520px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;background:var(--ozadje);
  padding-top:env(safe-area-inset-top,0);}
.body{flex:1;padding:14px 14px 90px;overflow-x:hidden;overflow-x:clip} /* clip: ni okno za pomik, zato glava klepeta lahko ostane pripeta */

/* topbar */
.topbar{display:flex;align-items:center;gap:11px;padding:12px 16px 10px;position:sticky;top:0;z-index:20;
  background:var(--ozadje);border-bottom:1px solid var(--rob)} /* polna barva: zameglitev je na iPhonu med pomikanjem draga */
.logo{width:36px;height:36px;border-radius:9px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;flex:none;overflow:hidden}
.topbar .who{flex:1;min-width:0}
.topbar .who .g{font-size:16px;font-weight:600;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .who .u{font-size:12px;color:var(--t2)}
.iconbtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--rob);background:var(--povrsina);display:flex;align-items:center;justify-content:center;color:var(--t2);cursor:pointer}
.iconbtn:active{background:var(--povrsina2)}

/* sekcije, kartice */
.sec{font-size:11.5px;font-weight:600;letter-spacing:.05em;color:var(--t2);text-transform:uppercase;margin:16px 2px 8px}
.sec:first-child{margin-top:4px}
.card{background:var(--povrsina);border:1px solid var(--rob);border-radius:var(--r);padding:14px}
.card+.card{margin-top:10px}
.muted{color:var(--t2)} .small{font-size:12.5px}
.center{text-align:center}
.hstack{display:flex;align-items:center;gap:10px}
.spacer{flex:1}

/* gumbi */
.btn{font-family:inherit;border:1px solid var(--rob);cursor:pointer;border-radius:var(--r);font-size:15px;font-weight:500;
  min-height:48px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--t);background:var(--povrsina);transition:filter .12s,transform .04s}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-block{width:100%}
.btn-primary{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.btn-head{background:var(--head);color:#fff;border-color:var(--head)}
.btn-ghost{background:var(--povrsina)}
.btn-sm{min-height:38px;font-size:13px;padding:0 12px;border-radius:var(--r-sm)}

/* polja */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.field label{font-size:12.5px;font-weight:500;color:var(--t2)}
input,select,textarea{font-family:inherit;font-size:16px;color:var(--t);background:var(--povrsina);border:1px solid var(--rob);border-radius:var(--r-sm);padding:11px 12px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primary);outline-offset:-1px}
/* iPhone da poljem za datum in uro najmanjšo širino, ki je ne skrči: brez tega štrlijo čez rob in razširijo stran */
input[type=date],input[type=time],input[type=datetime-local]{-webkit-appearance:none;appearance:none;min-width:0;max-width:100%;min-height:46px;display:block;text-align:left}
input::-webkit-date-and-time-value{text-align:left;margin:0}
textarea{min-height:64px;resize:vertical}

/* vaja kartica */
.vaja-h{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600}
.vaja-h .material-symbols-outlined{color:var(--primary);font-size:20px}
.vaja-row{display:flex;align-items:center;gap:9px;color:var(--t2);font-size:13.5px;margin-top:9px}
.vaja-row .material-symbols-outlined{font-size:18px;color:var(--t3)}

.link{font-size:13px;color:var(--head);font-weight:500;background:none;border:0;cursor:pointer;padding:0}

/* opcije ankete */
.opt{display:flex;align-items:center;gap:11px;padding:11px 2px;border-bottom:1px solid var(--rob);cursor:pointer}
.opt:last-child{border-bottom:0}
.opt .box{width:26px;height:26px;border-radius:7px;border:1.5px solid var(--rob2);display:flex;align-items:center;justify-content:center;color:transparent;flex:none}
.opt .box.on{background:var(--zel);border-color:var(--zel);color:#fff}
.opt .box .material-symbols-outlined{font-size:18px}
.opt .ot{flex:1}
.opt .ot .od{font-size:14px;font-weight:500}
.opt .ot .ol{font-size:12px;color:var(--t2)}
.opt .cnt{font-size:12.5px;color:var(--t2);font-weight:500;white-space:nowrap}
.opt .cnt b{color:var(--zel);font-weight:600}

/* seznam članov */
.mlist{display:flex;flex-direction:column}
.mrow{display:flex;align-items:center;gap:11px;padding:11px 2px;border-bottom:1px solid var(--rob)}
.mrow:last-child{border-bottom:0}
.st{width:11px;height:11px;border-radius:50%;flex:none}
.g-zel{background:var(--zel)} .g-ora{background:var(--ora)} .g-rde{background:var(--primary)} .g-none{background:var(--rob2)} .g-siv{background:var(--siv)}
.mrow .nm{flex:1;font-size:14px;font-weight:500;min-width:0}
.mrow .sub{font-size:12px;color:var(--t2);font-weight:400}

/* KPI ploščice */
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kpi{background:var(--povrsina);border:1px solid var(--rob);border-radius:var(--r);padding:13px}
.kpi .n{font-size:28px;font-weight:600;letter-spacing:-.02em}
.kpi .n small{font-size:15px;color:var(--t3);font-weight:500}
.kpi .l{font-size:12px;color:var(--t2);margin-top:2px}

/* kvorum trak */
.qbar{height:10px;border-radius:6px;background:var(--povrsina2);overflow:hidden;margin-top:10px;display:flex}
.qbar i{height:100%;background:var(--zel)}

/* lestvica */
.rank{display:flex;align-items:center;gap:11px;padding:10px 2px;border-bottom:1px solid var(--rob);font-size:14px}
.rank:last-child{border-bottom:0}
.rank .pos{width:22px;color:var(--t3);font-weight:600;font-variant-numeric:tabular-nums}
.rank .nm{flex:1}
.rank .pct{font-weight:600;font-variant-numeric:tabular-nums}
.rank.me{background:color-mix(in srgb,var(--primary) 7%,transparent);margin:0 -8px;padding-left:10px;padding-right:10px;border-radius:8px;border-bottom-color:transparent}
.rank.me .pos{color:var(--primary)}
.rank.pica{background:var(--ora-bg);margin:0 -8px;padding:10px;border-radius:8px;border-bottom-color:transparent}


/* tabbar */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;max-width:520px;margin:0 auto;border-top:1px solid var(--rob);background:var(--povrsina);padding-bottom:env(safe-area-inset-bottom,0)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 0 10px;font-size:10.5px;color:var(--t3);background:none;border:0;cursor:pointer;font-family:inherit}
.tab.on{color:var(--primary)}
.tab .material-symbols-outlined{font-size:23px}

/* skupina switcher */
.picker{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;background:var(--povrsina);border:1px solid var(--rob);border-radius:20px;padding:6px 12px 4px;color:var(--t);cursor:pointer}
.picker .material-symbols-outlined{font-size:16px;color:var(--t3)}
/* izbirnik skupine: moje skupine + (skrbnik) Društvo */
.picker-zl{color:var(--ora);border-color:color-mix(in srgb,var(--ora) 45%,transparent)}
.picker-zl .material-symbols-outlined:first-child{color:var(--ora)}
.pick-nsl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);padding:2px 8px 6px}
.pick-op{font:inherit;width:100%;display:flex;align-items:center;gap:10px;padding:12px 10px;border:0;border-radius:11px;background:none;color:var(--t);font-size:15px;text-align:left;cursor:pointer}
.pick-op .material-symbols-outlined{font-size:21px;color:var(--t3)}
.pick-op small{margin-left:auto;font-size:12px;color:var(--t2)}
.pick-op.izb{background:var(--povrsina2)}
.pick-op.izb .material-symbols-outlined{color:var(--primary)}
.pick-op.zl{color:var(--ora);font-weight:600}
.pick-op.zl .material-symbols-outlined{color:var(--ora)}
.pick-loc{height:1px;background:var(--rob);margin:6px 8px}
.k-zaseben{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 18px;margin-top:10px}
.k-zaseben .material-symbols-outlined{font-size:30px;color:var(--t3)}

/* toast + modal */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:80px;z-index:60;background:var(--t);color:var(--ozadje);padding:11px 18px;border-radius:22px;font-size:14px;font-weight:500;box-shadow:0 8px 30px rgba(0,0,0,.25);max-width:90%}
.overlay{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center}
@media(min-width:560px){.overlay{align-items:center}}
.sheet{background:var(--povrsina);width:100%;max-width:520px;border-radius:18px 18px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0));max-height:88vh;overflow:auto;overscroll-behavior:contain}
@media(min-width:560px){.sheet{border-radius:16px}}
.sheet h3{font-size:18px;font-weight:600;margin-bottom:12px}
.invite-box{background:var(--povrsina2);border:1px dashed var(--rob2);border-radius:var(--r-sm);padding:10px;font-size:13px;word-break:break-all;color:var(--t2);margin:6px 0 12px}

.center-screen{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:24px;max-width:430px;margin:0 auto}
.auth-card{background:var(--povrsina);border:1px solid var(--rob);border-radius:18px;padding:24px 20px}
.brand-logo{width:82%;max-width:230px;height:auto;display:block;margin:2px auto 12px}
.err{color:var(--primary);font-size:13px;margin:-4px 0 10px}
.needsattn{background:var(--ora-bg);border:1px solid transparent;border-radius:var(--r);padding:12px 14px;font-size:13.5px;color:var(--t);display:flex;gap:9px;align-items:flex-start;margin-bottom:12px}
.needsattn .material-symbols-outlined{color:var(--ora);font-size:19px;flex:none}
.seg{display:flex;gap:6px;background:var(--povrsina2);padding:4px;border-radius:11px;margin-bottom:12px}
.seg button{flex:1;border:0;background:none;font-family:inherit;font-size:13px;font-weight:600;color:var(--t2);padding:8px;border-radius:8px;cursor:pointer}
.seg button.on{background:var(--povrsina);color:var(--t)}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}

/* ===== NAMIZNA postavitev (admin/superadmin na kompu, >=900px) ===== */
.layout{display:flex;min-height:100vh;align-items:stretch}
.sidebar{width:238px;flex:none;border-right:1px solid var(--rob);background:var(--povrsina);display:flex;flex-direction:column;padding:16px 12px;position:sticky;top:0;height:100vh}
.side-brand{display:flex;align-items:center;gap:10px;padding:4px 6px 14px;border-bottom:1px solid var(--rob);margin-bottom:10px}
.side-brand .logo{width:38px;height:38px;border-radius:10px}
.sb-title{font-size:15px;font-weight:600;line-height:1.15}
.sb-sub{font-size:12px;color:var(--t2)}
.side-sel{margin-bottom:10px}
.side-nav{display:flex;flex-direction:column;gap:2px}
.nav-i{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:var(--t2);font-size:14.5px;font-weight:500;background:none;border:0;cursor:pointer;font-family:inherit;text-align:left;width:100%}
.nav-i .material-symbols-outlined{font-size:21px}
.nav-i:hover{background:var(--povrsina2)}
.nav-i.on{background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary)}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--rob);padding-top:8px}
.main{flex:1;min-width:0;padding:22px 28px 48px;max-width:1180px}
.desk-head{margin-bottom:16px}
.desk-head h2{font-size:22px;font-weight:600}
.app-desktop .kpis{grid-template-columns:repeat(3,1fr)}

/* ===== sence kartic + dashboard ===== */
.card,.kpi{box-shadow:var(--shadow-card)}
.app-desktop{max-width:none;margin:0;width:100%}
.dash{display:flex;flex-direction:column;gap:16px}
.dash-actions{display:flex;gap:8px;flex-wrap:wrap}
.dash-kpis{grid-template-columns:repeat(4,1fr)}
.kpi .ksub{font-size:12px;color:var(--t2);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:1050px){.dash-2{grid-template-columns:1fr}.dash-kpis{grid-template-columns:repeat(2,1fr)}}
.panel{background:var(--povrsina);border:1px solid var(--rob);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-card)}
.panel .ph{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--rob);font-size:12.5px;font-weight:600;color:var(--t2)}
.panel .ph .material-symbols-outlined{font-size:18px;color:var(--t3)}
.p-empty{padding:18px 16px;color:var(--t2);font-size:13px}
.p-list{padding:2px 16px 8px}
.p-body{padding:12px 16px}
.bars{display:flex;align-items:flex-end;gap:10px;height:112px;padding-top:8px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;justify-content:flex-end}
.bar-col .bar{width:100%;max-width:32px;background:var(--head);border-radius:5px 5px 0 0;min-height:3px}
.bar-col span{font-size:11px;color:var(--t2);font-variant-numeric:tabular-nums}
.vtable{display:flex;flex-direction:column}
.vrow{display:flex;align-items:center;gap:12px;padding:12px 16px;border:0;border-top:1px solid var(--rob);background:none;cursor:pointer;font-family:inherit;color:var(--t);text-align:left;width:100%}
.vrow:hover{background:var(--povrsina2)}
.vst{width:9px;height:9px;border-radius:50%;background:var(--siv);flex:none}
.vst[data-s="objavljena"]{background:var(--zel)} .vst[data-s="anketa"]{background:var(--ora)} .vst[data-s="poteka"]{background:var(--head)}
.vnas{flex:1;font-weight:500;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vdat{font-size:13px;color:var(--t2);width:110px;text-align:right;white-space:nowrap}
.vinfo{font-size:12.5px;color:var(--t2);width:96px;text-align:right;white-space:nowrap}
.vrow .material-symbols-outlined{color:var(--t3);font-size:20px}
/* člani */
.clan-row{padding:11px 4px;border-bottom:1px solid var(--rob)}
.clan-row:last-child{border-bottom:0}
.clan-head{display:flex;align-items:center;gap:10px}
.clan-actions{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.pill{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--ora-bg);color:var(--ora)}

/* Društvo (skrbnik) */
.drust-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.prow{display:flex;align-items:center;gap:12px;padding:11px 16px;border-top:1px solid var(--rob);font-size:13.5px}
.panel .ph + .prow{border-top:0}
.prow .nm{flex:1;font-weight:500;min-width:0}
.prow .sub{font-size:12px;color:var(--t2)}

/* @uporabniško ime (handle) — tesnejši izpis, da pika ne izgleda razmaknjena */
.handle{letter-spacing:-.01em;font-feature-settings:"tnum" 0;font-variant-numeric:proportional-nums;font-variant-ligatures:none}
.handle .at{color:var(--primary);font-weight:600}

/* profil na vrhu Jaz */
.prof{display:flex;align-items:center;gap:13px}
.prof .av{width:52px;height:52px;border-radius:50%;background:var(--head);color:#fff;font-size:19px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none}
.prof .pn{font-size:18px;font-weight:600;letter-spacing:-.01em}

/* učenje / kviz */
.mode-card{display:flex;align-items:center;gap:12px;background:var(--povrsina);border:1px solid var(--rob);border-radius:12px;padding:13px;margin-top:9px;cursor:pointer;box-shadow:var(--shadow-card)}
.mode-card:active{background:var(--povrsina2)}
.mode-card .mi{width:38px;height:38px;border-radius:10px;background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary);display:flex;align-items:center;justify-content:center;flex:none}
.mode-card .mt{flex:1}.mode-card .mt .n{font-size:14.5px;font-weight:600}.mode-card .mt .d{font-size:12px;color:var(--t2)}
.q-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.q-head .l{flex:1;font-size:13px;color:var(--t2);font-weight:500;text-align:center}
.qbar2{height:6px;border-radius:4px;background:var(--povrsina2);overflow:hidden;margin-bottom:14px}
.qbar2 i{display:block;height:100%;background:var(--primary)}
.q-q{font-size:17px;font-weight:600;line-height:1.35;margin-bottom:2px}
.qopt{width:100%;text-align:left;background:var(--povrsina);border:1px solid var(--rob);border-radius:12px;padding:14px;margin-top:10px;font-size:15px;display:flex;align-items:center;gap:11px;color:var(--t);font-family:inherit;cursor:pointer}
.qopt .lab{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--rob2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--t2);flex:none}
.qopt.ok{background:var(--zel-bg);border-color:var(--zel)}
.qopt.ok .lab{background:var(--zel);border-color:var(--zel);color:#fff}
.qopt.no{background:color-mix(in srgb,var(--primary) 12%,transparent);border-color:var(--primary)}
.qopt.no .lab{background:var(--primary);border-color:var(--primary);color:#fff}
.qopt:disabled{cursor:default}
.snov-o{font-size:13.5px;color:var(--t2);margin-top:5px}
.snov-o.ok{color:var(--zel);font-weight:600}

/* kviz landing (kot original pgdkviz) */
.kviz-hero{background:var(--povrsina);border:1px solid var(--rob);border-left:4px solid var(--primary);border-radius:var(--r);padding:16px;box-shadow:var(--shadow-card)}
.kviz-hero h2{font-size:20px;font-weight:600}
.kviz-hero p{font-size:13.5px;color:var(--t2);margin:4px 0 12px}
.qstats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin-top:12px}
.qstat{background:var(--povrsina);border:1px solid var(--rob);border-radius:12px;padding:12px;text-align:center;box-shadow:var(--shadow-card)}
.qstat .n{font-size:24px;font-weight:600;letter-spacing:-.02em}
.qstat .n.zel{color:var(--zel)} .qstat .n.head{color:var(--head)}
.qstat .l{font-size:11px;color:var(--t2);margin-top:2px}
.cover{background:var(--povrsina);border:1px solid var(--rob);border-radius:12px;padding:14px;margin-top:12px;box-shadow:var(--shadow-card)}
.cover-top{display:flex;justify-content:space-between;font-size:14px}
.cover-top b{font-weight:600}
.cov-txt{font-size:12.5px;color:var(--t2);margin-top:8px}
.badge-pill{display:inline-block;font-size:11px;font-weight:600;color:var(--primary);background:color-mix(in srgb,var(--primary) 14%,transparent);padding:2px 8px;border-radius:999px;margin-left:8px}
.hint{font-size:12px;color:var(--t3);text-align:center;margin-top:16px;line-height:1.5}
.mi-em{font-size:20px;background:var(--povrsina2)!important}

/* glava varianta C: skupina + @handle levo, pasica PGD Grosuplje desno (max 50%) */
.topbar-c{align-items:center;gap:10px}
.topbar-logo{max-width:50%;max-height:31px;width:auto;height:auto;object-fit:contain;flex:none}
.who2{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-end;text-align:right;overflow:hidden;line-height:1.2}
.who2 .g{font-size:16px;font-weight:600;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.who2 .hand{margin-top:2px;font-size:12.5px;color:var(--t2);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* ============ Kako deluje (vodič po vlogah) ============ */
.kd-wrap{position:fixed;inset:0;z-index:70;background:var(--ozadje);overflow-y:auto;-webkit-overflow-scrolling:touch}
.kd-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;padding:12px 14px;
  background:var(--ozadje);border-bottom:1px solid var(--rob);
  padding-top:calc(12px + env(safe-area-inset-top,0))}
.kd-top h2{font-size:17px;font-weight:700;flex:1;letter-spacing:-.01em}
.kd-inner{max-width:640px;margin:0 auto;padding:14px 16px 60px}
.kd-inner h2.kd-sec{font-size:19px;font-weight:800;margin:28px 0 10px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.kd-inner h2.kd-sec .em{font-size:22px}
.kd-lead{color:var(--t2);font-size:14.5px;margin:0 0 8px}

.kd-logika{background:color-mix(in srgb,var(--primary) 9%,var(--povrsina));border:1px solid color-mix(in srgb,var(--primary) 30%,var(--rob));
  border-left:4px solid var(--primary);border-radius:var(--r);padding:16px;margin:6px 0 4px}
.kd-logika .geslo{font-size:17px;font-weight:800;color:var(--primary);margin:0 0 6px;letter-spacing:-.01em}
.kd-logika p{margin:0;color:var(--t2);font-size:14.5px}

.kd-shema{background:var(--povrsina);border:1px solid var(--rob);border-radius:var(--r);padding:14px;margin:8px 0 4px;box-shadow:var(--shadow-card)}
.kd-chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.kd-chip{display:inline-flex;align-items:center;gap:7px;padding:10px 15px;border-radius:99px;border:2px solid var(--rob2);
  background:var(--povrsina2);color:var(--t);font-size:14.5px;font-weight:700;cursor:pointer;transition:.15s;font-family:inherit}
.kd-chip .e{font-size:18px}
.kd-chip[data-g="clan"]{border-color:color-mix(in srgb,var(--primary) 45%,var(--rob))}
.kd-chip[data-g="admin"]{border-color:color-mix(in srgb,var(--head) 45%,var(--rob))}
.kd-chip[data-g="skrbnik"]{border-color:color-mix(in srgb,var(--ora) 45%,var(--rob))}
.kd-chip.dim{opacity:.32}
.kd-chip.hot[data-g="clan"]{background:color-mix(in srgb,var(--primary) 14%,var(--povrsina));border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 22%,transparent)}
.kd-chip.hot[data-g="admin"]{background:color-mix(in srgb,var(--head) 14%,var(--povrsina));border-color:var(--head);box-shadow:0 0 0 3px color-mix(in srgb,var(--head) 22%,transparent)}
.kd-chip.hot[data-g="skrbnik"]{background:color-mix(in srgb,var(--ora) 14%,var(--povrsina));border-color:var(--ora);box-shadow:0 0 0 3px color-mix(in srgb,var(--ora) 22%,transparent)}
.kd-hint{font-size:13px;color:var(--t3);margin-top:12px;text-align:center;min-height:18px}
.kd-hint b{color:var(--primary)}

.kd-kazalo{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:8px 0}
.kd-kcard{background:var(--povrsina);border:1px solid var(--rob);border-radius:12px;padding:13px;display:flex;flex-direction:column;gap:3px;
  cursor:pointer;transition:.15s;text-align:left;font-family:inherit;color:inherit;box-shadow:var(--shadow-card)}
.kd-kcard:hover{border-color:var(--primary);background:var(--povrsina2)}
.kd-kcard .e{font-size:24px}
.kd-kcard .nm{font-weight:700;font-size:14.5px}
.kd-kcard .sb{font-size:12px;color:var(--t3)}
.kd-kcard .tag{align-self:flex-start;margin-top:5px;font-size:10.5px;font-weight:800;padding:2px 9px;border-radius:99px;text-transform:uppercase;letter-spacing:.03em}
.tag-clan{background:color-mix(in srgb,var(--primary) 15%,transparent);color:var(--primary)}
.tag-admin{background:color-mix(in srgb,var(--head) 15%,transparent);color:var(--head)}
.tag-skrbnik{background:color-mix(in srgb,var(--ora) 18%,transparent);color:var(--ora)}

.kd-prijava{background:var(--povrsina);border:1px solid var(--rob);border-radius:var(--r);padding:16px;margin:8px 0;box-shadow:var(--shadow-card)}
.kd-koraki{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.kd-korak{flex:1 1 150px;background:var(--povrsina2);border:1px solid var(--rob);border-radius:11px;padding:12px}
.kd-korak .n{display:inline-flex;width:24px;height:24px;border-radius:99px;background:var(--primary);color:var(--primary-ink);align-items:center;justify-content:center;font-weight:800;font-size:13px;margin-bottom:7px}
.kd-korak .t{font-size:13.5px;color:var(--t2)}

.kd-vloga{background:var(--povrsina);border:1px solid var(--rob);border-radius:var(--r);padding:18px;margin:14px 0;scroll-margin-top:64px;box-shadow:var(--shadow-card)}
.kd-vloga.clan{border-top:4px solid var(--primary)}
.kd-vloga.admin{border-top:4px solid var(--head)}
.kd-vloga.skrbnik{border-top:4px solid var(--ora)}
.kd-vloga h3{display:flex;align-items:center;gap:10px;font-size:18px;margin:0 0 2px;font-weight:800}
.kd-vloga h3 .e{font-size:25px}
.kd-namen{color:var(--t2);font-size:14.5px;margin:6px 0 12px}
.kd-blok{margin:13px 0}
.kd-nas{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--t3);margin-bottom:8px}
.kd-flow{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:13.5px}
.kd-flow .v{background:var(--povrsina2);border:1px solid var(--rob);border-radius:9px;padding:7px 11px;font-weight:600}
.kd-flow .v.ti{background:color-mix(in srgb,var(--primary) 10%,var(--povrsina));border-color:color-mix(in srgb,var(--primary) 35%,var(--rob));color:var(--primary)}
.kd-flow .a{color:var(--t3);font-weight:700}
.kd-feat{background:var(--povrsina2);border:1px solid var(--rob);border-radius:11px;padding:11px 13px;margin-bottom:8px}
.kd-feat .ft{font-weight:700;font-size:14px}
.kd-feat .fd{font-size:13.5px;color:var(--t2);margin-top:2px}
.kd-feat .ff{font-size:13px;color:var(--t3);margin-top:4px}
.kd-feat .ff b{color:var(--primary)}
.kd-zlato{display:flex;gap:10px;align-items:flex-start;background:color-mix(in srgb,var(--primary) 8%,var(--povrsina));
  border:1px solid color-mix(in srgb,var(--primary) 28%,var(--rob));border-radius:11px;padding:11px 13px;margin-top:14px;font-size:14px}
.kd-zlato .e{font-size:18px}.kd-zlato b{color:var(--primary)}

.kd-tabela{width:100%;border-collapse:collapse;font-size:14px;background:var(--povrsina);border:1px solid var(--rob);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-card)}
.kd-tabela th{background:var(--povrsina2);text-align:left;padding:11px 13px;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--t3)}
.kd-tabela td{padding:11px 13px;border-top:1px solid var(--rob);vertical-align:top}
.kd-tabela td b{color:var(--primary)}

.kd-callout{background:color-mix(in srgb,var(--ora) 10%,var(--povrsina));border:1px solid color-mix(in srgb,var(--ora) 30%,var(--rob));border-radius:var(--r);padding:16px;margin:18px 0}
.kd-callout h2{margin:0 0 6px;color:var(--ora);font-size:17px;font-weight:800;display:flex;align-items:center;gap:8px}
.kd-callout ol{margin:6px 0 0;padding-left:20px}.kd-callout li{margin:5px 0;font-size:14px;color:var(--t2)}

.kd-reveal{opacity:0;transform:translateY(14px)}
.kd-reveal.in{opacity:1;transform:none;transition:opacity .45s ease,transform .45s ease}
.kd-foot{text-align:center;color:var(--t3);font-size:12px;padding:24px 0 10px}

/* ============ zvonec + nabiralnik obvestil ============ */
.bell-dot{width:9px;height:9px;border-radius:50%;background:var(--primary);display:inline-block;box-shadow:0 0 0 2px var(--povrsina)}
.iconbtn.bell{position:relative;flex:none}
.iconbtn.bell .bell-dot{position:absolute;top:7px;right:7px}
.nav-i .bell-dot{margin-left:auto}
.obv-list{display:flex;flex-direction:column;gap:8px}
.obv-row{text-align:left;background:var(--povrsina2);border:1px solid var(--rob);border-radius:12px;padding:11px 13px;
  display:flex;flex-direction:column;gap:3px;cursor:pointer;font-family:inherit;color:inherit;transition:.12s}
.obv-row:hover{border-color:var(--primary)}
.obv-row.nolink{cursor:default}
.obv-row.nolink:hover{border-color:var(--rob)}
.obv-h{display:flex;align-items:baseline;gap:8px}
.obv-t{font-weight:600;font-size:14.5px;flex:1;min-width:0}
.obv-cas{font-size:12px;color:var(--t3);white-space:nowrap;flex:none}
.obv-b{font-size:13.5px;color:var(--t2)}
.obv-s{font-size:12px;color:var(--t3)}


/* ============ prenova v0.13: vaje, odgovor v treh stopnjah, podrobnosti vaje ============ */
.vaje{display:flex;flex-direction:column;gap:10px}
.app-desktop .vaje{max-width:720px}
.vstack{display:flex;flex-direction:column;gap:12px}
.hero{background:var(--povrsina);border:1px solid var(--rob);border-radius:16px;padding:14px;overflow:hidden;display:flex;flex-direction:column;gap:11px;box-shadow:var(--shadow-card)}
.ey{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--primary)}
.ey-m{color:var(--t2);font-weight:600}
.hero-t{font:inherit;border:0;background:transparent;padding:0;cursor:pointer;font-size:19px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:2px;color:var(--t);text-align:left}
.hero-t .material-symbols-outlined{font-size:20px;color:var(--t3)}
.meta{display:flex;flex-wrap:wrap;gap:4px 12px;color:var(--t2);font-size:13.5px}
.meta span{display:inline-flex;align-items:center;gap:4px}
.meta .material-symbols-outlined{font-size:16px;color:var(--t3)}
.seg3{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.seg3 button{font:inherit;height:48px;border-radius:var(--r);border:1px solid var(--rob);background:var(--povrsina2);color:var(--t2);font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center;gap:4px;cursor:pointer;padding:0 4px;white-space:nowrap;min-width:0;overflow:hidden}
@media (max-width:374px){.seg3 button .material-symbols-outlined,.nova-vaja .material-symbols-outlined{display:none}}
.seg3 button .material-symbols-outlined{font-size:19px}
.seg3 .on.yes{background:var(--zel);border-color:var(--zel);color:#fff}
.seg3 .on.maybe{background:var(--ora);border-color:var(--ora);color:#fff}
.seg3 .on.no{background:var(--primary);border-color:var(--primary);color:#fff}
.obraz{width:30px;height:30px;border-radius:50%;font-size:11px;font-weight:700;display:grid;place-items:center;color:#16171A;flex:none}
.o0{background:#F2B8BC}.o1{background:#A9D7F0}.o2{background:#F4D58D}.o3{background:#B5E3C9}.o4{background:#D6C3F2}.o5{background:#F7C6A3}
/* kartica naslednje vaje: obroč »koliko pride« levo, spodaj vrstica treh gumbov */
.h-top{display:flex;gap:14px;align-items:center}
.h-in{min-width:0;display:flex;flex-direction:column;gap:3px}
.h-in .hero-t{font-size:18px}
.obroc{flex:none;position:relative;width:64px;height:64px;border:0;background:none;padding:0;cursor:pointer;color:var(--t)}
.obroc svg{width:64px;height:64px;transform:rotate(-90deg)}
.obroc circle{fill:none;stroke-width:6}
.obroc .bg{stroke:var(--siv-bg)}
.obroc .fg{stroke:var(--zel);stroke-linecap:round}
.obroc span{position:absolute;inset:0;display:grid;place-items:center;align-content:center;line-height:1;font-variant-numeric:tabular-nums}
.obroc b{font-size:18px;font-weight:800}
.obroc small{font-size:9.5px;color:var(--t2);font-weight:600;margin-top:2px}
.h-op{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--t2);min-height:48px;padding:0 12px;border-radius:12px;border:1px dashed color-mix(in srgb,var(--primary) 45%,transparent)}
.h-op button{margin-left:auto;font:inherit;border:0;background:none;color:var(--primary);font-weight:700;cursor:pointer;padding:0;font-size:13px}
.h-tab{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;margin:2px -14px -14px;border-top:1px solid var(--rob)}
.h-tab button{font:inherit;border:0;background:none;cursor:pointer;padding:10px 2px 11px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11.5px;font-weight:600;color:var(--t2)}
.h-tab .material-symbols-outlined{font-size:21px;color:var(--head)}
.h-tab button:active{background:var(--povrsina2)}
.q{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--t2);font-variant-numeric:tabular-nums}
.q .tr{flex:1;height:6px;border-radius:99px;background:var(--siv-bg);overflow:hidden}
.q .tr i{display:block;height:100%;background:var(--ora);border-radius:99px}
.q .tr i.poln{background:var(--zel)}
.foot{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot .link{display:inline-flex;align-items:center;gap:4px;font-size:13.5px}
.foot .link .material-symbols-outlined{font-size:17px}
.lead{font:inherit;color:var(--t);display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--primary) 10%,var(--povrsina));border:0;text-align:left;cursor:pointer;width:100%;font-size:14px}
.lead > .material-symbols-outlined{color:var(--primary)}
.lead-b{margin-left:auto;font:inherit;background:var(--primary);color:var(--primary-ink);font-weight:650;font-size:13px;border-radius:9px;padding:7px 12px;border:0;white-space:nowrap;cursor:pointer}
.lh{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
/* vrstica Naslednje z gumbom Nova vaja: gumb je točno tako širok kot stolpec »Pridem« v kartici zgoraj
   (kartica: rob 1 px + odmik 14 px na vsaki strani, trije stolpci z razmikom 7 px) */
.lh.z-novo{display:grid;grid-template-columns:1fr calc((100% - 44px) / 3) 15px;gap:0}
.lh.z-novo .nova-vaja{grid-column:2;width:100%}
.lh .sec{margin:0}
/* gumb za novo vajo (admin): enak kot izbrani »Pridem« (barva, višina, zaobljenost, pisava) */
.nova-vaja{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:48px;padding:0 6px;border:1px solid var(--zel);border-radius:var(--r);background:var(--zel);color:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
.nova-vaja .material-symbols-outlined{font-size:19px}
.nova-vaja:active{filter:brightness(.92)}
.vrsta{font:inherit;color:var(--t);display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--povrsina);border:1px solid var(--rob);border-radius:var(--r);width:100%;text-align:left;cursor:pointer}
.dt{width:38px;text-align:center;line-height:1.05;flex:none}
.dt small{display:block;font-size:10px;color:var(--t2);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.dt b{font-size:19px;font-weight:700}
.dt b .material-symbols-outlined{font-size:20px;color:var(--head)}
.vr-t{min-width:0;flex:1}
.vr-t b{display:block;font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vr-t span{font-size:12.5px;color:var(--t2)}
.chip{font-size:11.5px;padding:3px 9px;border-radius:99px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-weight:600;flex:none}
.chip i{width:7px;height:7px;border-radius:50%;display:inline-block}
.c-zel{background:var(--zel-bg);color:var(--zel)} .c-zel i{background:var(--zel)}
.c-ora{background:var(--ora-bg);color:var(--ora)} .c-ora i{background:var(--ora)}
.c-rde{background:color-mix(in srgb,var(--primary) 13%,transparent);color:var(--primary)} .c-rde i{background:var(--primary)}
.c-siv{background:var(--siv-bg);color:var(--t2)} .c-siv i{background:var(--siv)}
.c-head{background:color-mix(in srgb,var(--head) 14%,transparent);color:var(--head)} .c-head i{background:var(--head)}
.mini{font:inherit;color:var(--t2);display:flex;align-items:center;gap:9px;font-size:13.5px;padding:10px 12px;border:1px dashed var(--rob2);border-radius:var(--r);background:transparent;width:100%;text-align:left;cursor:pointer;margin-top:4px}
.mini b{color:var(--t);font-weight:600}
.mini > .material-symbols-outlined:last-child{margin-left:auto;color:var(--t3)}
.ok-line{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--zel);font-weight:600;padding:4px 2px}
.sheet{position:relative}
.vtabs{display:flex;background:var(--povrsina2);border:1px solid var(--rob);border-radius:11px;padding:3px;margin:12px 0}
.vtabs button{font:inherit;flex:1;border:0;background:transparent;padding:8px 4px;border-radius:8px;font-size:13px;color:var(--t2);cursor:pointer;white-space:nowrap}
.vtabs button.on{background:var(--povrsina);color:var(--t);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.pmenu{position:absolute;right:16px;top:58px;z-index:5;width:226px;background:var(--povrsina);border:1px solid var(--rob2);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.25);padding:5px;display:flex;flex-direction:column}
.pmenu button{font:inherit;display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:9px;border:0;background:transparent;color:var(--t);font-size:14px;text-align:left;cursor:pointer}
.pmenu button:hover{background:var(--povrsina2)}
.pmenu button .material-symbols-outlined{font-size:19px;color:var(--t2)}
.pmenu hr{border:0;border-top:1px solid var(--rob);margin:4px 6px}
.pmenu .dan,.pmenu .dan .material-symbols-outlined{color:var(--primary)}
.potrdi{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;background:color-mix(in srgb,var(--primary) 9%,var(--povrsina));border:1px solid color-mix(in srgb,var(--primary) 35%,transparent);font-size:14px}
.potrdi span{color:var(--t2)}
.gh{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--t2);display:flex;align-items:center;gap:7px;margin:4px 2px 7px}
.gh i{width:8px;height:8px;border-radius:50%;display:inline-block}
.gh .link{text-transform:none;letter-spacing:0;font-size:13px}
.plist{background:var(--povrsina);border:1px solid var(--rob);border-radius:var(--r);padding:2px 12px}
.pr{font:inherit;color:var(--t);display:flex;align-items:center;gap:10px;padding:9px 0;border:0;border-bottom:1px solid var(--rob);background:transparent;width:100%;text-align:left}
button.pr{cursor:pointer} button.pr:disabled{cursor:default}
.pr:last-child{border-bottom:0}
.pr .nm{font-size:14.5px;min-width:0;flex:1}
.pr .nm small{display:block;font-size:12px;color:var(--t2)}
.info{font-size:13px;color:var(--t2);background:var(--povrsina2);border-radius:11px;padding:10px 12px;display:flex;gap:8px;line-height:1.4}
.info .material-symbols-outlined{font-size:18px;color:var(--head)}
.stevec{display:flex;align-items:baseline;gap:7px} .stevec b{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums} .stevec span{color:var(--t2);font-size:13.5px}
.sw{width:40px;height:24px;border-radius:99px;background:var(--siv-bg);border:1px solid var(--rob);position:relative;flex:none;transition:background .15s}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--siv);transition:left .15s}
.sw.on{background:var(--zel);border-color:var(--zel)} .sw.on::after{left:18px;background:#fff}
.btn-tonal{background:color-mix(in srgb,var(--primary) 12%,var(--povrsina));color:var(--primary);border-color:transparent}
.btn-danger{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
@media (prefers-reduced-motion:reduce){.sw,.sw::after{transition:none}}

/* ============ klepet v0.14: kanal skupine in komentarji pri vaji (slog IRC) ============ */
.klepet{display:flex;flex-direction:column;gap:6px}
/* računalnik: klepet je en stolpec na sredini (mehurčki, kartice, ure in vnos poravnani) */
.klepet.v-toku{max-width:760px;margin:0 auto;width:100%}
.klepet.v-toku .k-bm{max-width:70%}
.klepet:not(.v-toku){padding-bottom:76px}
.k-glava{display:flex;align-items:center;gap:10px;padding:2px 2px 9px;border-bottom:1px solid var(--rob);position:sticky;top:var(--top-h,0px);z-index:15;background:var(--ozadje)}
/* glava kanala ostane pripeta pod zgornjo vrstico, premika se le pogovor (--top-h izmeri Klepet) */
.body .k-glava{margin:0 -14px;padding:10px 16px 9px}
.body .klepet > .k-glava:first-child{margin-top:-14px}
.k-glava b{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:15px;display:block}
.k-glava span{font-size:12px;color:var(--t2);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-glava > div:first-child{flex:1}
/* med iskanjem iskalna vrstica zamenja glavo kanala */
.k-isk ~ .k-glava{display:none}
.k-obv{margin-left:auto;width:auto;font-size:12.5px;padding:6px 8px;border-radius:9px;flex:none}
.k-tok{display:flex;flex-direction:column;gap:2px;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:14px;line-height:1.5}
.k-dan{align-self:center;font-family:var(--font);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin:8px 0 4px}
.k-vr{display:grid;grid-template-columns:44px 1fr;gap:6px;padding:2px 4px;border-radius:6px;cursor:pointer}
.k-vr.izbran{background:var(--povrsina2)}
.k-cas{color:var(--t3);font-variant-numeric:tabular-nums;font-size:12.5px;padding-top:1px}
.k-msg{min-width:0;overflow-wrap:anywhere;color:var(--t)}
.k-sys{color:var(--t2);font-style:italic;font-size:13px}
.k-nick{font-weight:600}
.n0{color:var(--head)}.n1{color:var(--zel)}.n2{color:var(--ora)}.n3{color:var(--primary)}.n4{color:#8B6FD0}.n5{color:#2A9DB0}
.k-omemba{background:color-mix(in srgb,var(--head) 14%,transparent);color:var(--head);border-radius:4px;padding:0 3px}
.k-omemba.jaz{background:color-mix(in srgb,var(--primary) 18%,transparent);color:var(--primary);font-weight:600}
.k-msg a{color:var(--head);word-break:break-all}
/* niz komentarjev iste vaje v kanalu */
/* tema vaje v kanalu: ena kartica z vsemi komentarji, datumi znotraj */
.k-tema{font-family:var(--font);border:1px solid var(--rob);border-radius:14px;background:var(--povrsina2);margin:8px 0;overflow:hidden;flex:none}
.k-tema.izbrana{border-color:color-mix(in srgb,var(--head) 60%,transparent)}
.k-tema-g{font:inherit;display:flex;align-items:center;gap:7px;width:100%;padding:9px 12px;border:0;border-bottom:1px solid var(--rob);background:none;cursor:pointer;color:var(--head);font-size:13.5px;font-weight:700;text-align:left}
.k-tema-g .material-symbols-outlined{font-size:18px}
.k-tema-t{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-tema-st{font-weight:500;color:var(--t2);font-size:12px;white-space:nowrap}
.k-tema-v{padding:2px 10px 6px;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;display:flex;flex-direction:column;gap:2px}
.k-tema-dan{font-family:var(--font);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin:7px 0 1px 44px}
.k-odj{font-family:var(--font);font-size:12.5px;color:var(--t2);display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:3px 0 3px 50px}
.k-odj-ne{font-size:11.5px;font-weight:700;color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,transparent);border-radius:99px;padding:1px 8px}
.k-tema-k{font:inherit;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:9px;border:0;border-top:1px solid var(--rob);background:none;cursor:pointer;color:var(--head);font-size:13.5px;font-weight:600}
.k-tema-k .material-symbols-outlined{font-size:18px}
.k-tema .k-akcije{padding-left:50px}
/* videz klepeta: Mehurčki, v slogu iMessage (Jaz → Videz → Videz klepeta) */
.mehur .k-tok{font-family:-apple-system,system-ui,var(--font);gap:0}
.mehur .k-dan,.mehur .k-tema-dan{align-self:center;background:none;padding:0;margin:12px 0 4px;font-size:11.5px;letter-spacing:0;text-transform:none;color:var(--t2)}
.mehur .k-dan b,.mehur .k-tema-dan b{font-weight:600}
/* tema vaje v Mehurčkih: mehka podlaga brez obrobe in črt, »Komentiraj« kot gumb desno spodaj */
.mehur .k-tema{display:flex;flex-direction:column;border:0;border-radius:22px;background:color-mix(in srgb,var(--head) 8%,var(--ozadje));padding:10px 8px 8px;margin:10px -4px 6px;overflow:visible}
.mehur .k-tema.izbrana{background:color-mix(in srgb,var(--head) 16%,var(--ozadje))} /* polna barva: prosojna je v Chromu kazala robove ploščic */
.mehur .k-tema-g{border-bottom:0;padding:0 4px 2px;font-size:13px}
.mehur .k-tema-v{padding:0}
/* na podlagi teme so tuji mehurčki na svetli temi beli, sicer se zlijejo s podlago */
.mehur .k-tema .k-bm:not(.moj):not(.emoji) .k-bb{background:var(--im-tuj-tema)}
.mehur .k-tema-k{width:auto;align-self:flex-end;border-top:0;margin-top:6px;padding:6px 13px;border-radius:99px;background:var(--head);color:var(--ozadje);font-size:12.5px;gap:4px}
.mehur .k-tema-k .material-symbols-outlined{font-size:16px}
.mehur .k-tema-v{font-family:-apple-system,system-ui,var(--font)}
.k-im{font-size:12px;color:var(--t2);margin:8px 0 1px 48px}
.k-bm{display:flex;gap:8px;align-items:flex-end;max-width:78%;cursor:pointer;margin:1px 0;-webkit-tap-highlight-color:transparent}
.k-bm.moj.prvi{margin-top:8px}
.k-bm.zadnji{margin-bottom:5px}
.k-av{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:10.5px;font-weight:700;color:#16171A}
.k-av.prazen{visibility:hidden}
.k-bb{position:relative;background:var(--im-tuj);color:var(--im-tuj-t);border-radius:18px;padding:7px 12px;font-size:16px;line-height:1.3;min-width:0;overflow-wrap:anywhere;font-feature-settings:normal;letter-spacing:0}
.k-bm.moj{align-self:flex-end;flex-direction:row-reverse}
.k-bm.moj .k-bb{background:var(--im-moj);color:#fff}
/* rep pri zadnjem mehurčku v nizu, oblika kot iMessage: zavije iz kota navzdol v konico; pod besedilom (z-index -1) */
.k-bb{isolation:isolate}
.k-bm.zadnji:not(.emoji) .k-bb::before{content:"";position:absolute;z-index:-1;bottom:-1.6px;left:-5.6px;width:16px;height:16px;background:inherit;transform:scaleX(-1);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 0H10.4V6A8 8 0 0 0 16 13.63V16H12.8A12.8 11.2 0 0 1 0 4.8Z'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 0H10.4V6A8 8 0 0 0 16 13.63V16H12.8A12.8 11.2 0 0 1 0 4.8Z'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%}
.k-bm.moj.zadnji:not(.emoji) .k-bb::before{left:auto;right:-5.6px;transform:none}
.k-bm.moj .k-omemba{color:#fff;background:rgba(255,255,255,.25)}
.k-bm.moj .k-bb a{color:#fff;text-decoration:underline}
/* samo emoji: velik, brez mehurčka */
.k-bm.emoji .k-bb{background:none;padding:0 2px;font-size:40px;line-height:1.15}
.k-bm.izbran .k-bb{filter:brightness(.86)}
.k-bm.zadetek .k-bb{box-shadow:0 0 0 2px var(--ora)}
.k-sist{align-self:center;font-family:var(--font);font-size:12px;color:var(--t2);padding:2px 10px;margin:6px 0;text-align:center;max-width:92%;cursor:pointer;border-radius:8px}
.k-sist.zadetek{outline:2px solid var(--ora)}
.mehur .k-odj{align-self:center;padding-left:0;margin:4px 0}
.mehur .k-akcije{padding-left:44px}
.mehur .k-akcije.moj{align-self:flex-end;padding-left:0}
/* odgovor na sporočilo: citat izvirnika (tap = skok na izvirnik) */
.k-cit{font:inherit;font-family:var(--font);display:flex;flex-direction:column;align-items:flex-start;text-align:left;max-width:100%;border:0;border-left:3px solid var(--head);background:color-mix(in srgb,var(--head) 10%,transparent);border-radius:6px;padding:3px 8px;margin:2px 0 4px;cursor:pointer;color:var(--t2);font-size:12.5px;line-height:1.3}
.k-cit b{color:var(--head);font-weight:700;font-size:12px}
.k-cit span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.k-cit.izbrisano{font-style:italic;cursor:default}
.k-bb .k-cit{margin:0 0 5px;background:rgba(127,127,127,.18);border-left-color:currentColor;color:inherit;opacity:.92}
.k-bb .k-cit b{color:inherit}
.k-bm.moj .k-bb .k-cit{background:rgba(255,255,255,.2);border-left-color:#fff}
.k-odgv .material-symbols-outlined{color:var(--head)}
.k-vr.utrip,.k-sist.utrip,.k-bm.utrip .k-bb{animation:k-utrip 1.8s ease}
@keyframes k-utrip{0%,45%{box-shadow:0 0 0 3px var(--ora)}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.k-vr.utrip,.k-sist.utrip,.k-bm.utrip .k-bb{animation:none;box-shadow:0 0 0 3px var(--ora)}}
/* preklop z dvema gumboma v nastavitvah */
.seg2{display:inline-flex;background:var(--povrsina2);border:1px solid var(--rob);border-radius:10px;padding:2px}
.seg2 button{font:inherit;border:0;background:none;padding:5px 11px;border-radius:8px;font-size:13px;font-weight:600;color:var(--t2);cursor:pointer}
.seg2 button.on{background:var(--head);color:#fff}
/* komentar k vaji iz kanala: vrstica nad vnosom, izbira vaje */
.k-odg{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--t2);padding:6px 4px 6px 10px;border-radius:10px;background:color-mix(in srgb,var(--head) 10%,var(--povrsina))}
.k-odg .material-symbols-outlined{font-size:17px;color:var(--head)}
.k-odg b{color:var(--head);font-weight:600;min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-odg button{font:inherit;border:0;background:none;color:var(--t2);cursor:pointer;display:grid;place-items:center;width:30px;height:30px}
.k-izb-b{font:inherit;flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--rob2);background:var(--povrsina);color:var(--head);display:grid;place-items:center;cursor:pointer}
/* seznam vaj se odpre kot plavajoče okno tik nad vnosom (nič se ne premakne, ni treba pomikati) */
.k-vnos{position:relative}
.k-izbira{position:absolute;left:8px;right:8px;bottom:calc(100% + 6px);z-index:30;display:flex;flex-direction:column;border:1px solid var(--rob2);border-radius:12px;background:var(--povrsina);padding:4px 0;box-shadow:0 8px 24px rgba(0,0,0,.28);max-width:520px}
.k-izbira .na{font-size:11.5px;color:var(--t2);padding:4px 12px;letter-spacing:.04em;text-transform:uppercase}
.k-izbira-sez{max-height:min(46vh,320px);overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column}
.k-izbira-sez button,.k-izbira-vec{font:inherit;border:0;background:none;text-align:left;padding:9px 12px;font-size:14px;cursor:pointer;display:flex;gap:8px;align-items:center;color:var(--t)}
.k-izbira-sez button .material-symbols-outlined{font-size:18px;color:var(--head)}
.k-izbira-vec{color:var(--head);font-weight:600;font-size:13.5px}
.k-akcije{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;padding:2px 0 6px 52px;font-family:var(--font)}
.k-akcije .link{display:inline-flex;align-items:center;gap:3px;font-size:13px}
.k-akcije .link .material-symbols-outlined{font-size:16px}
.link.dan{color:var(--primary)}
.k-vnos{display:flex;flex-direction:column;gap:6px;background:var(--ozadje);padding:8px 0 4px}
.k-vnos.fiksen{position:fixed;left:0;right:0;bottom:calc(58px + env(safe-area-inset-bottom,0));max-width:520px;margin:0 auto;padding:8px 12px;border-top:1px solid var(--rob);z-index:25}
/* komentarji pri vaji: svoja stran, pomika se cela stran (kot Klepet); ostala aplikacija je skrita */
html.kom-odprt .app > :not(.kz){display:none!important}
/* čez celo širino (v stolpcu .app se sicer skrči na najdaljšo vrstico), vsaj višina zaslona;
   svh se ne spreminja, ko Safari skrije vrstico, zato med pomikanjem ni preračunavanja */
.kz{width:100%;max-width:520px;margin:0 auto;min-height:100vh;min-height:100svh;background:var(--povrsina);display:flex;flex-direction:column}
.kz-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:4px;padding:6px 6px 8px 4px;border-bottom:1px solid var(--rob);background:var(--povrsina)}
.kz-naz{font:inherit;border:0;background:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--head);flex:none}
.kz-naz .material-symbols-outlined{font-size:24px}
.kz-lupa{margin-left:auto;color:var(--t2)}
.kz-ti{min-width:0;display:flex;flex-direction:column}
.kz-ti b{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kz-ti span{font-size:12.5px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kz .klepet{flex:1;padding:4px 12px calc(62px + env(safe-area-inset-bottom,0))} /* spodaj le prostor za vnos */
.kz .k-tok{margin-top:auto} /* malo komentarjev: ob vnosu spodaj, kot WhatsApp */
/* kanal: malo sporočil stoji spodaj ob vnosu (ne zgoraj s praznino pod njimi), da jih iPhone v PWA ob tipkovnici ne potisne pod glavo */
.body:has(> .klepet){display:flex;flex-direction:column}
.body > .klepet{flex:1}
.body > .klepet > .k-tok{margin-top:auto}
/* pisanje v klepetu na telefonu (html.kt): aplikacija = vidni del nad tipkovnico, pomika se le seznam;
   stran se ne premika, zato glava ostane na vrhu in nad njo ni sporočil */
html.kt,html.kt body{overflow:hidden;height:100%}
html.kt .app:not(.app-desktop){position:fixed;left:0;right:0;top:var(--vv-top,0px);height:var(--vv-h,100%);min-height:0;overflow:hidden}
html.kt .app:not(.app-desktop) > .body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:32px}
html.kt .app:not(.app-desktop) > .kz{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
html.tipkam.kt .topbar,html.tipkam.kt .kz-top,html.tipkam.kt .kz .k-isk{top:0} /* močnejše od html.tipkam … spodaj */
html.tipkam.kt .body .k-glava,html.tipkam.kt .body .k-isk{top:-14px} /* lepljivost šteje od roba pod odmikom .body (14 px) */
.kz .k-vnos.fiksen{bottom:0;background:var(--povrsina);padding-bottom:calc(8px + env(safe-area-inset-bottom,0))}
/* starejša sporočila, datum med pomikanjem, na dno, iskanje */
.k-nal,.k-konec{align-self:center;font-family:var(--font);font-size:12px;color:var(--t2);margin:6px 0 2px;display:flex;align-items:center;gap:7px}
.k-konec{color:var(--t3);font-size:11.5px}
.k-vrt{width:14px;height:14px;border-radius:50%;border:2px solid var(--rob2);border-top-color:var(--head);animation:k-vrt .8s linear infinite}
@keyframes k-vrt{to{transform:rotate(360deg)}}
/* med pisanjem: brez spodnjega menija, vnos tik nad tipkovnico (tipkovnica prekrije tudi spodnjo črto iPhona) */
html.tipkam .tabbar{display:none}
html.tipkam .k-vnos.fiksen,html.tipkam .kz .k-vnos.fiksen{bottom:var(--vv-dno,0px);padding-bottom:8px}
/* med pisanjem (iPhone): glave ostanejo na vrhu vidnega dela zaslona */
html.tipkam .topbar,html.tipkam .kz-top,html.tipkam .k-isk{top:var(--vv-top,0px)}
html.tipkam .body .k-glava,html.tipkam .body .k-isk{top:calc(var(--vv-top,0px) + var(--top-h,0px))}
html.tipkam .k-dol{bottom:calc(74px + var(--vv-dno,0px))}
/* nad vnosom je vrstica »Odgovarjaš / Komentiraš«: gumb »na najnovejša« gre višje, da ne prekrije ✕ */
.k-dol.visje{bottom:calc(58px + 74px + 46px + env(safe-area-inset-bottom,0))}
.kz .k-dol.visje{bottom:calc(74px + 46px + env(safe-area-inset-bottom,0))}
html.tipkam .k-dol.visje{bottom:calc(120px + var(--vv-dno,0px))}
.k-dol{position:fixed;z-index:26;right:max(14px,calc(50% - 246px));bottom:calc(58px + 74px + env(safe-area-inset-bottom,0));width:42px;height:42px;border-radius:50%;border:1px solid var(--rob);background:var(--povrsina);color:var(--t2);display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.kz .k-dol{bottom:calc(74px + env(safe-area-inset-bottom,0))}
.k-lupa{margin-left:auto;flex:none;width:36px;height:36px}
.k-lupa + .k-obv{margin-left:0}
.k-isk{position:sticky;top:0;z-index:30;background:var(--povrsina);border-bottom:1px solid var(--rob);margin:0 -12px;padding:6px 6px 4px}
.body .k-isk{top:var(--top-h,0px);margin:-14px -14px 0;padding:6px 8px 4px}
.k-isk-v{display:flex;align-items:center;gap:4px}
.k-isk-v input{flex:1;min-width:0;height:40px;border-radius:10px;padding:0 12px;font-size:15px}
.k-isk-b{flex:none;width:40px;height:40px;border:0;background:none}
.k-isk-b:disabled{opacity:.35;cursor:default}
.k-isk-st{font-size:12px;color:var(--t2);padding:2px 10px 2px 48px}
.k-vr.zadetek{background:color-mix(in srgb,var(--ora) 16%,transparent)}
.k-msg mark,.k-sys mark{background:color-mix(in srgb,var(--ora) 40%,transparent);color:inherit;border-radius:3px}
.k-poslano{font-size:12px;color:var(--t2)}
@media (prefers-reduced-motion:reduce){.k-vrt{animation:none}}
.k-vrstica{display:flex;gap:8px;align-items:center}
.k-vrstica input{flex:1;min-width:0;border-radius:22px;padding:11px 15px}
.k-poslji{width:44px;height:44px;border-radius:50%;border:0;background:var(--primary);color:var(--primary-ink);display:grid;place-items:center;cursor:pointer;flex:none}
.k-poslji:disabled{opacity:.4;cursor:default}
.k-predlogi{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.k-predlogi button{font:inherit;flex:none;display:flex;flex-direction:column;align-items:flex-start;padding:5px 10px;border-radius:10px;border:1px solid var(--rob);background:var(--povrsina);color:var(--head);font-size:13px;font-weight:600;cursor:pointer}
.k-predlogi small{font-size:11px;color:var(--t2);font-weight:400}
.tab{position:relative}
.tab-badge{position:absolute;top:4px;left:calc(50% + 6px);background:var(--primary);color:#fff;font-size:10px;font-weight:700;border-radius:99px;padding:0 5px;line-height:16px;min-width:16px;text-align:center}
.nav-badge{margin-left:auto;background:var(--primary);color:#fff;font-size:11px;font-weight:700;border-radius:99px;padding:0 7px;line-height:18px}

/* ============ v0.15: Jaz, priprava telefona, položaji ============ */
.jaz-prof{display:flex;flex-direction:column;gap:10px}
.stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.stats3 div{background:var(--povrsina2);border:1px solid var(--rob);border-radius:11px;padding:9px 9px;display:flex;flex-direction:column;gap:2px;min-width:0}
.stats3 b{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stats3 span{font-size:11.5px;color:var(--t2)}
.slist{background:var(--povrsina);border:1px solid var(--rob);border-radius:var(--r);padding:0 13px}
.sr{font:inherit;color:var(--t);display:flex;align-items:center;gap:11px;padding:12px 0;border:0;border-bottom:1px solid var(--rob);background:transparent;width:100%;text-align:left;font-size:15px;min-height:50px}
button.sr{cursor:pointer}
.slist > :last-child{border-bottom:0}
.sr > .material-symbols-outlined{color:var(--t2);font-size:21px}
.sr > span:not(.v){flex:1;min-width:0}
.sr small{display:block;font-size:12px;color:var(--t2)}
.sr .v{margin-left:auto;color:var(--t2);font-size:13.5px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.sr .v.ok{color:var(--zel);font-weight:600}
.sr .v .material-symbols-outlined{font-size:18px}
.sr .v select{width:auto;font-size:13.5px;padding:6px 8px;border-radius:9px}
.sr.out,.sr.out > .material-symbols-outlined{color:var(--primary)}
.sr-vsebina{padding:4px 0 12px;border-bottom:1px solid var(--rob)}
button.sw{padding:0;cursor:pointer;margin-left:auto}
.pripravi{display:flex;flex-direction:column;gap:9px;border-color:color-mix(in srgb,var(--head) 35%,var(--rob))}
.pripravi .ey{color:var(--head)}
.pk{display:flex;align-items:flex-start;gap:10px}
.pk > .material-symbols-outlined{color:var(--t3);margin-top:1px}
.pk.ok > .material-symbols-outlined{color:var(--zel)}
.pk-t{flex:1;min-width:0;font-size:14.5px}
.pk.ok .pk-t b{color:var(--t2);font-weight:500;text-decoration:line-through}
.pk-t small{display:block;font-size:12.5px;color:var(--t2);margin-top:1px}
.poz{margin-left:auto;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:11px;font-weight:600;color:var(--t2);border:1px solid var(--rob2);border-radius:6px;padding:1px 6px;min-width:34px;text-align:center;flex:none}
.sr > span.material-symbols-outlined{flex:none}
/* Jaz v slogu iPhona: vrstice z ločilom od ikone naprej, stikala, mali meni ob vrednosti, segment čez celo širino */
.slist{padding:0;position:relative}
.slist > .sr{position:relative;padding:11px 14px;border-bottom:0;min-height:52px}
.slist > .sr:not(:last-child)::after{content:"";position:absolute;left:46px;right:0;bottom:0;height:1px;background:var(--rob)}
.slist > .sr-vsebina{padding:4px 14px 12px;border-bottom:1px solid var(--rob)}
.slist > .sr-vsebina:last-child{border-bottom:0}
.sr.klik{cursor:pointer}
div.sr{cursor:pointer} .sr.blok{cursor:default}
.sr .v .material-symbols-outlined{color:var(--t3)}
.sr > span.isw{flex:none}
.isw{width:51px;height:31px;border-radius:99px;background:var(--siv-bg);box-shadow:inset 0 0 0 1px var(--rob);position:relative;flex:none;margin-left:auto;cursor:pointer;transition:background .2s}
.isw::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.22),0 0 0 .5px rgba(0,0,0,.06);transition:left .2s}
.isw.on{background:var(--zel);box-shadow:none} .isw.on::after{left:22px}
.sr.blok{flex-wrap:wrap;row-gap:9px}
.sr.blok .pod{flex-basis:100%;padding-left:32px}
.iseg{display:flex;background:var(--povrsina2);border:1px solid var(--rob);border-radius:10px;padding:2px}
.iseg button{flex:1;font:inherit;border:0;background:none;padding:7px 10px;border-radius:8px;font-size:14px;font-weight:600;color:var(--t2);cursor:pointer}
.iseg button.on{background:var(--povrsina);color:var(--t);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.mm-ozadje{position:fixed;inset:0;z-index:40;cursor:default}
.mm{position:absolute;top:calc(100% - 6px);right:14px;z-index:41;min-width:190px;background:var(--povrsina);border:1px solid var(--rob2);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.18);overflow:hidden}
.mm-o{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;font:inherit;font-size:15px;color:var(--t);background:none;border:0;border-bottom:1px solid var(--rob);padding:11px 14px;text-align:left;cursor:pointer}
.mm-o:last-child{border-bottom:0}
.mm-o .material-symbols-outlined{color:var(--head);font-size:20px}

.k-vpr{font-size:13px;color:var(--t)}
/* Društvo (skrbnik): skupine in admini */
.dr{display:flex;flex-direction:column;gap:12px}
.dr-razl{margin:0;font-size:13.5px;color:var(--t2);line-height:1.45}
.dr-sk{display:flex;flex-direction:column;gap:10px;margin:0}
.dr-sk-h{display:flex;align-items:center;gap:9px}
.dr-sk-h b{font-size:16px;flex:1;min-width:0}
.dr-ur{width:34px;height:34px}
.dr-adm{display:flex;flex-wrap:wrap;gap:6px}
.dr-chip{display:inline-flex;align-items:center;gap:4px;border-radius:99px;padding:3px 10px 3px 7px;font-size:12.5px;font-weight:600;background:color-mix(in srgb,var(--head) 15%,transparent);color:var(--head)}
.dr-chip .material-symbols-outlined{font-size:15px}
.dr-chip em{font-style:normal;font-weight:500;color:var(--t2)}
.dr-opoz{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ora)}
.dr-opoz .material-symbols-outlined{font-size:18px}
.dr-izbor{max-height:46vh;overflow:auto;display:flex;flex-direction:column}

/* prva uporaba: brskalnik v Viberju/WhatsAppu */
.odpri{text-align:center;display:flex;flex-direction:column;gap:10px}
.odpri h1{font-size:22px;margin:0}
.odpri p{margin:0;line-height:1.45}
.odpri-ik{width:68px;height:68px;border-radius:20px;display:grid;place-items:center;background:var(--ora-bg);color:var(--ora);margin:0 auto 4px}
.odpri-ik .material-symbols-outlined{font-size:38px}
.odpri-k{display:flex;flex-direction:column;gap:8px;text-align:left}
.odpri-k > div{display:flex;gap:10px;align-items:flex-start;background:var(--povrsina);border:1px solid var(--rob);border-radius:12px;padding:10px 12px;font-size:14px;line-height:1.4}
.odpri-k i{font-style:normal;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--head);color:var(--povrsina);font-weight:800;font-size:12px;flex:none}
.znak{display:inline-flex;align-items:center;border:1px solid var(--rob2);border-radius:7px;padding:0 5px;background:var(--povrsina2);vertical-align:-4px}
.znak .material-symbols-outlined{font-size:17px}
/* zavrnjena obvestila */
.obv-pomoc{display:flex;flex-direction:column;gap:8px;background:var(--ora-bg);border-radius:12px;padding:11px 12px;margin-top:6px;text-align:left}
.obv-pomoc-h{display:flex;gap:7px;align-items:center;color:var(--ora)}
.obv-pomoc-h b{color:var(--t)}
.pot{display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-size:13px}
.pot-k{background:var(--povrsina);border:1px solid var(--rob);border-radius:7px;padding:2px 8px;font-weight:600}
.pot-p{color:var(--t3)}
.pk{flex-wrap:wrap}
/* člani: kdo ima obvestila */
.obv-stevec{display:flex;gap:10px;align-items:center;background:var(--povrsina);border:1px solid var(--rob);border-radius:12px;padding:10px 12px;margin-bottom:12px;font-size:13px;color:var(--t2);line-height:1.35}
.obv-stevec b{font-size:22px;color:var(--t);font-variant-numeric:tabular-nums}
.obv-zn{display:grid;place-items:center;width:26px;height:26px;border-radius:50%}
.obv-zn .material-symbols-outlined{font-size:16px}
.obv-zn.da{background:var(--zel-bg);color:var(--zel)}
.obv-zn.ne{background:var(--ora-bg);color:var(--ora)}

.btn-izbrisi{color:var(--primary)}

/* strežnik ni dosegljiv */
.streznik-dol{position:fixed;left:0;right:0;top:0;z-index:80;display:flex;align-items:center;justify-content:center;gap:8px;padding:calc(env(safe-area-inset-top,0px) + 8px) 14px 9px;background:var(--ora);color:#1A1205;font-size:13.5px;font-weight:600;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.streznik-dol .material-symbols-outlined{font-size:19px}

/* zvonček: število novih; okno z obvestili v slogu seznama (ikona vrste, kratek čas, pika, odgovor v obvestilu) */
.iconbtn.bell{position:relative}
.bell-st{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--primary);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 2px var(--ozadje);font-variant-numeric:tabular-nums}
.obv-pocisti{font:inherit;font-size:13.5px;font-weight:600;color:var(--head);background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:3px;margin-right:4px;padding:6px 4px}
.obv-pocisti .material-symbols-outlined{font-size:17px}
.obv-list{gap:0}
.obv-nsl{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);padding:10px 0 4px}
.obv-st{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:9px;background:var(--primary);color:#fff;font-size:10.5px;font-weight:800;padding:0 5px;letter-spacing:0}
.obv-r{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--rob)}
.obv-r:last-child{border-bottom:0}
.obv-ik{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none}
.obv-ik .material-symbols-outlined{font-size:20px}
.obv-ik.zel{background:var(--zel-bg);color:var(--zel)}
.obv-ik.mod{background:color-mix(in srgb,var(--head) 15%,transparent);color:var(--head)}
.obv-ik.ora{background:var(--ora-bg);color:var(--ora)}
.obv-ik.rde{background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary)}
.obv-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.obv-r.klik .obv-vr,.obv-r.klik .obv-tx > div:nth-child(2){cursor:pointer}
.obv-vr{display:flex;align-items:center;gap:6px;min-height:22px}
.obv-t{flex:1;min-width:0;font-size:14.5px;font-weight:700;line-height:1.25}
.obv-t.prebrano{font-weight:600;color:var(--t2)}
.obv-cas{font-size:12px;color:var(--t3);white-space:nowrap}
.obv-pika{width:8px;height:8px;border-radius:50%;background:var(--primary);flex:none}
.obv-skrij{width:26px;height:26px;margin:-3px -6px -3px 0;border:0;background:none;border-radius:50%;display:grid;place-items:center;color:var(--t3);cursor:pointer;flex:none}
.obv-skrij .material-symbols-outlined{font-size:17px}
.obv-b{font-size:13.5px;color:var(--t2);line-height:1.4}
.obv-s{font-size:12px;color:var(--t3)}
.obv-vec{font-size:12.5px;color:var(--t2);line-height:1.45}
.obv-vec span{display:inline-block;background:var(--povrsina2);border:1px solid var(--rob);border-radius:6px;padding:0 6px;margin-right:6px;font-weight:600;font-size:11.5px}
.obv-gumbi{display:flex;gap:8px;margin-top:8px}
.obv-gumbi button{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;border-radius:11px;padding:9px 0;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.obv-gumbi .material-symbols-outlined{font-size:18px}
.obv-da{background:var(--nova);color:var(--nova-t);border:1px solid var(--nova)}
.obv-ne{background:none;color:var(--t);border:1px solid var(--rob2)}
.obv-odg{margin-top:4px;display:flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:var(--zel)}
.obv-odg .material-symbols-outlined{font-size:16px}
.obv-odg.ne_morem{color:var(--primary)}
.obv-odg.ne_vem{color:var(--ora)}

/* anketa: odstotki in vrstica */
.ank{display:flex;flex-direction:column;gap:9px;margin-bottom:6px}
.ank-sum{display:flex;align-items:center;gap:8px;background:var(--povrsina2);border-radius:12px;padding:9px 12px;font-size:13.5px;color:var(--t2)}
.ank-sum b{color:var(--t);font-size:15px}
.ank-sum .material-symbols-outlined{color:var(--head);font-size:20px}
.ank-op{border:1px solid var(--rob);border-radius:13px;padding:11px 12px;display:flex;flex-direction:column;gap:7px}
.ank-op.izb{border-color:color-mix(in srgb,var(--nova) 60%,transparent)}
.ank-op.vodi:not(.izb){border-color:color-mix(in srgb,var(--head) 55%,transparent)}
.ank-vr{display:flex;align-items:center;gap:10px;cursor:pointer}
.ank-vr .box{width:26px;height:26px;border-radius:7px;border:1.5px solid var(--rob2);display:flex;align-items:center;justify-content:center;color:transparent;flex:none}
.ank-vr .box.on{background:var(--nova);border-color:var(--nova);color:var(--nova-t)}
.ank-vr .box .material-symbols-outlined{font-size:18px}
.ank-l{width:26px;height:26px;border-radius:8px;background:var(--povrsina2);display:grid;place-items:center;font-weight:800;font-size:12.5px;flex:none}
.ank-t{flex:1;min-width:0;font-size:14.5px;font-weight:600;line-height:1.3}
.ank-t small{display:block;font-size:12px;color:var(--t2);font-weight:500}
.ank-vodi{display:inline-block;margin-left:6px;font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--head);background:color-mix(in srgb,var(--head) 15%,transparent);border-radius:6px;padding:1px 6px;vertical-align:2px}
.ank-n{font-size:12.5px;color:var(--t2);white-space:nowrap}
.ank-n b{color:var(--t);font-size:15px}
.ank-bar{height:7px;border-radius:4px;background:var(--povrsina2);overflow:hidden}
.ank-bar i{display:block;height:100%;border-radius:4px;background:var(--head);transition:width .3s}
.ank-op.izb .ank-bar i{background:var(--nova)}
.ank-adm{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--t2)}
.ank-potrdi{background:var(--nova);color:var(--nova-t);border:1px solid var(--nova);font-weight:700}
.ank-tvoj{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--zel)}
.ank-tvoj .material-symbols-outlined{font-size:18px}
.ank-niso{font-size:13px;color:var(--t2);display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;border-top:1px solid var(--rob);padding-top:9px}
.ank-niso b{color:var(--t);font-weight:600}
.ank-niso .link{margin-left:auto;color:var(--primary);font-weight:700}