/*
  WHAT THIS IS
  Spoločný dizajn pre administráciu richardfedorko.com. Je to kópia design.css z openbot.sk
  (27. 10. 2026) bez prezenčnej listiny a audio prehrávača. Vychádza z manuálu
  „Design interných systémov v2": tokeny, typografia, karty, tlačidlá, shell a login.

  HOW TO USE
  <link rel="stylesheet" href="/assets/design.css?v=N"> v každej stránke.
  Po zmene tohto súboru zvýš V v build.py, inak prehliadač drží starú verziu.
  Farby len cez tokeny a color-mix, žiadny hex v komponentoch.
  Ďalšie komponenty (grafy, tagy, dialóg) prenášaj z manuálu až vtedy, keď ich projekt potrebuje.

  RECOLOUR
  --pri je primárna akcia, významové farby sú v :root a [data-theme="light"].
*/

/* Tmavý režim je default, svetlý cez [data-theme="light"]. */
:root{
  --bg:#050506;
  --panel:#0E0E11;
  --panel-2:#16161C;
  --ink:#F4F4F6;
  --ink-2:#C9CAD1;
  --muted:#8E8F99;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.05);
  --blue:#6E9BFF;
  --green:#2FD98A;
  --amber:#FFB224;
  --red:#FF7A70;
  --purple:#B18CFF;
  --pink:#FF7AB8;
  --cyan:#3ECBF0;
  /* grafová paleta: duotone, rovnaká v oboch režimoch, len na výplne grafov */
  --gA:#E879F9; --gB:#7C3AED;
  --gOkA:#A3E635; --gOkB:#0D9488;
  --gLineA:#5EB1FF; --gLineB:#2E6BFF;
  --ch-1:#6366F1; --ch-2:#D946EF; --ch-3:#22D3EE; --ch-4:#FB923C; --ch-5:#A3E635;
  --pri:#2E5BFF;
  --pri-ink:#ffffff;
  --tip-bg:#F4F4F6; --tip-ink:#0E0E11;
  --ease:cubic-bezier(.16,1,.3,1);
}
[data-theme="light"]{
  --bg:#f1f2f5;
  --panel:#ffffff;
  --panel-2:#eceef2;
  --ink:#14171a;
  --ink-2:#3f4854;
  --muted:#626B76;
  --line:rgba(20,23,26,.13);
  --line-2:rgba(20,23,26,.07);
  --blue:#2450E8;
  --green:#05713F;
  --amber:#8F5400;
  --red:#C11E14;
  --purple:#6B3BDF;
  --pink:#B81F6A;
  --cyan:#056781;
  --pri-ink:#ffffff;
  --tip-bg:#14171a; --tip-ink:#ffffff;
}
html{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font:13.5px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
  transition:background .25s var(--ease),color .25s var(--ease);
}
a{color:var(--blue)}

h1{font-size:20px;font-weight:600;letter-spacing:-0.01em;margin:0}
h2{font-size:15px;font-weight:600;letter-spacing:-0.005em;margin:0 0 14px}
h3{font-size:13.5px;font-weight:600;margin:20px 0 8px}
p{max-width:70ch;margin:10px 0;text-wrap:pretty;color:var(--muted)}
p strong,li strong{color:var(--ink);font-weight:500}

/* text len pre čítačky */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.skip{position:absolute;left:12px;top:12px;z-index:100;background:var(--tip-bg);color:var(--tip-ink);
  font-weight:500;padding:8px 14px;border-radius:10px;text-decoration:none;
  transform:translateY(-200%);transition:transform .15s var(--ease)}
.skip:focus{transform:none}

/* ------------------------------------------------ stránka, karty, mriežka */
.phead{display:flex;justify-content:space-between;align-items:baseline;gap:6px 24px;flex-wrap:wrap}
.lead{color:var(--muted);margin:0;max-width:64ch;text-align:right;text-wrap:pretty}
@media (max-width:900px){.lead{text-align:left}}

.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px 24px;
  transition:background .25s var(--ease),border-color .25s var(--ease)}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:24px}
.s4{grid-column:span 4}
.s6{grid-column:span 6}
.s8{grid-column:span 8}
.s12{grid-column:span 12}
@media (max-width:1100px){.s4,.s6,.s8{grid-column:span 12}}

.empty{border:1px dashed var(--line);border-radius:12px;padding:26px 20px;text-align:center;
  color:var(--muted);font-size:13px;margin-top:10px}
.empty b{display:block;color:var(--ink-2);font-weight:600;margin-bottom:3px}

.kv{display:grid;grid-template-columns:max-content 1fr;gap:7px 22px;font-size:13.5px;margin:6px 0 0}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-weight:500}
@media (max-width:700px){.kv{grid-template-columns:1fr;gap:2px 0}.kv dd{margin-bottom:8px}}

/* ------------------------------------------------ aktívne prvky */
.iconbtn{border:1px solid var(--line);background:transparent;color:var(--muted);
  border-radius:10px;width:32px;height:32px;cursor:pointer;display:grid;place-items:center;flex:none;
  transition:background .15s var(--ease),color .15s var(--ease)}
.iconbtn svg{width:16px;height:16px}
.iconbtn:hover{background:var(--panel-2);color:var(--ink)}
.iconbtn:active{transform:translateY(1px);background:color-mix(in srgb,var(--ink) 10%,transparent)}
.iconbtn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
#themeBtn .ic-sun{display:none}
[data-theme="dark"] #themeBtn .ic-sun{display:block}
[data-theme="dark"] #themeBtn .ic-moon{display:none}
/* prepínač témy potrebuje JS, bez neho sa neukáže */
html:not(.js) #themeBtn{display:none}

.btn{
  font:500 13.5px -apple-system,sans-serif;color:var(--ink);background:transparent;
  border:1px solid var(--line);border-radius:10px;padding:8px 16px;cursor:pointer;
  display:inline-block;text-decoration:none;
  transition:background .15s var(--ease),border-color .15s var(--ease),
    box-shadow .15s var(--ease),transform .06s var(--ease),filter .15s var(--ease)}
.btn:hover{background:var(--panel-2);border-color:color-mix(in srgb,var(--ink) 24%,transparent)}
.btn:active{transform:translateY(1px);background:color-mix(in srgb,var(--ink) 10%,transparent)}
/* primár: max jedno na obrazovke, hĺbku robí inset highlight a tmavšia spodná hrana */
.btn.pri{
  background:var(--pri);border-color:color-mix(in srgb,var(--pri) 72%,#000);
  color:var(--pri-ink);font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.btn.pri:hover{
  background:var(--pri);filter:saturate(1.12) brightness(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 3px 14px color-mix(in srgb,var(--pri) 40%,transparent)}
.btn.pri:active{
  transform:translateY(1px);filter:none;
  background:color-mix(in srgb,var(--pri) 84%,#000);
  box-shadow:inset 0 2px 5px rgba(0,0,20,.35)}
.btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ------------------------------------------------ prepínač */
.switch{position:relative;display:inline-flex;align-items:center;gap:9px;cursor:pointer;color:var(--ink-2)}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{width:36px;height:20px;border-radius:999px;background:color-mix(in srgb,var(--ink) 15%,transparent);
  position:relative;transition:background .2s var(--ease);flex:none}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:var(--panel);transition:transform .2s var(--ease)}
.switch input:checked+.track{background:var(--green)}
.switch input:checked+.track::after{transform:translateX(16px)}
.switch input:focus-visible+.track{outline:2px solid var(--blue);outline-offset:2px}
/* kým sa stav načíta alebo ukladá, prepínač nereaguje */
.switch:has(input:disabled){cursor:default}
.switch input:disabled+.track{opacity:.45}
.switch .err{color:var(--red)}
/* stav drží server a načíta ho JS, bez neho sa prepínač neukáže */
html:not(.js) .switch{display:none}

/* ------------------------------------------------ odkazové karty */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:12px;margin-top:6px}
/* hairline sa rozsvieti: border prejde do akcentu, šípka sa posunie o 3 px */
.hovercard{display:block;border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  color:var(--ink);text-decoration:none;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.hovercard:hover{border-color:color-mix(in srgb,var(--blue) 45%,transparent);background:color-mix(in srgb,var(--blue) 5%,transparent)}
.hovercard:active{background:color-mix(in srgb,var(--blue) 10%,transparent)}
.hovercard:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.hovercard .hk{font-weight:600;font-size:13px}
.hovercard .hv{color:var(--muted);font-size:12.5px;margin-top:2px}
.hovercard .harr{float:right;margin-left:12px;color:var(--muted);transition:transform .2s var(--ease),color .2s var(--ease)}
.hovercard:hover .harr{transform:translateX(3px);color:var(--blue)}

/* ------------------------------------------------ aplikačná tabuľka */
/* nadpis sekcie priamo na podklade stránky, mimo karty */
.sec{margin:28px 0 0}
/* tabuľka sedí na --panel priamo na --bg, akčné tlačidlá malé a vpravo */
.apptbl{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;overflow-x:auto;margin-top:12px;
  transition:background .25s var(--ease),border-color .25s var(--ease)}
.phead+.apptbl,.phead+.empty{margin-top:24px}
.apptbl table{width:100%;border-collapse:collapse}
.apptbl th{text-align:left;font-weight:500;color:var(--muted);font-size:11.5px;letter-spacing:.02em;
  padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;
  background:color-mix(in srgb,var(--ink) 4%,transparent)}
.apptbl td{padding:10px 12px;border-bottom:1px solid var(--line-2);font-size:13px;color:var(--ink);white-space:nowrap}
.apptbl tr:last-child td{border-bottom:0}
.apptbl th.num,.apptbl td.num{text-align:right}
.apptbl td.dim{color:var(--muted)}
/* hlavný stĺpec berie zvyšok šírky a smie sa zalomiť */
.apptbl td.main{width:100%;min-width:220px;white-space:normal;text-wrap:pretty}
/* názov v tabuľke je odkaz na to isté ako tlačidlo v riadku (18. 10. 2026) */
.apptbl td.main a{color:inherit;text-decoration:none}
.apptbl td.main a:hover{text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--ink) 45%,transparent);text-underline-offset:3px}
.apptbl td.main a:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:3px}
.apptbl tbody tr{transition:background .15s var(--ease)}
.apptbl tbody tr:hover td{background:color-mix(in srgb,var(--ink) 4%,transparent)}
td.act{text-align:right}
td.act .btn,td.files .btn{font-size:12px;padding:5px 11px}
td.act .btn+.btn,td.files .btn+.btn{margin-left:6px}
/* na telefóne sa riadok preskladá: názov hore, akcie pod ním, doplnkové stĺpce (.extra) sa skryjú */
@media (max-width:700px){
  .apptbl{overflow-x:visible}
  .apptbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .apptbl table,.apptbl tbody{display:block}
  .apptbl tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;padding:13px 14px;border-bottom:1px solid var(--line-2)}
  .apptbl tr:last-child{border-bottom:0}
  .apptbl td{display:block;padding:0;border:0}
  .apptbl td.extra{display:none}
  .apptbl td.c-no{flex:none}
  .apptbl td.main{flex:1 1 calc(100% - 40px);width:auto;min-width:0}
  .apptbl td.act{order:1;flex:none;text-align:left}
  .apptbl td.files{order:2;flex:1 1 auto}
  .apptbl tbody tr:hover td{background:transparent}
}

/* ------------------------------------------------ segmentový prepínač (manuál v2, .segf) */
.segf{display:inline-flex;flex-wrap:wrap;background:var(--panel-2);border:1px solid var(--line);
  border-radius:10px;overflow:hidden}
.segf a,.segf button{display:inline-flex;align-items:baseline;gap:6px;padding:7px 13px;font:500 13px -apple-system,sans-serif;
  color:var(--muted);text-decoration:none;background:transparent;border:0;border-right:1px solid var(--line-2);
  white-space:nowrap;cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease)}
.segf a:last-child,.segf button:last-child{border-right:0}
.segf a:hover,.segf button:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent)}
.segf a:active,.segf button:active{background:color-mix(in srgb,var(--ink) 10%,transparent)}
.segf a.on,.segf button.on{background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--ink);font-weight:600}
.segf a:focus-visible,.segf button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

/* ------------------------------------------------ KPI dlaždice, tagy, hlášky, filtre, dialóg, timeline (manuál v2) */
/* triedy rovnaké ako v manuáli */
.kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));margin-top:16px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px 14px;
  transition:background .25s var(--ease),border-color .25s var(--ease)}
.kpi .top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.kpi .n{font-size:26px;font-weight:650;letter-spacing:-.02em;line-height:1.05}
.kpi .n small{font-size:.42em;color:var(--muted);font-weight:500;margin-left:4px}
.kpi .k{color:var(--ink-2);font-size:12.5px;font-weight:500;margin-top:8px}
.kpi .spark{width:96px;height:30px;flex:none;overflow:visible}
.spark path{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.trend{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;white-space:nowrap;
  border-radius:999px;padding:2px 9px;margin-top:7px}
.trend.up{color:var(--green);background:color-mix(in srgb,var(--green) 15%,transparent)}
.trend.down{color:var(--red);background:color-mix(in srgb,var(--red) 15%,transparent)}
.trend.flat{color:var(--amber);background:color-mix(in srgb,var(--amber) 16%,transparent)}
.trend.neu{color:var(--muted);background:color-mix(in srgb,var(--muted) 10%,transparent)}

.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  border-radius:999px;padding:3px 11px;white-space:nowrap}
.tag i{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}
.tag.b{color:var(--blue);background:color-mix(in srgb,var(--blue) 16%,transparent)}
.tag.g{color:var(--green);background:color-mix(in srgb,var(--green) 15%,transparent)}
.tag.a{color:var(--amber);background:color-mix(in srgb,var(--amber) 16%,transparent)}
.tag.r{color:var(--red);background:color-mix(in srgb,var(--red) 15%,transparent)}
.tag.p{color:var(--purple);background:color-mix(in srgb,var(--purple) 16%,transparent)}
.tag.k{color:var(--pink);background:color-mix(in srgb,var(--pink) 15%,transparent)}
.tag.c{color:var(--cyan);background:color-mix(in srgb,var(--cyan) 15%,transparent)}
.tag.n{color:var(--muted);background:color-mix(in srgb,var(--muted) 10%,transparent)}

.flash{display:flex;align-items:center;gap:10px;border-radius:12px;padding:11px 15px;font-size:13px;
  font-weight:500;margin-top:10px;border:1px solid transparent}
.flash.ok{color:var(--green);background:color-mix(in srgb,var(--green) 11%,transparent);border-color:color-mix(in srgb,var(--green) 25%,transparent)}
.flash.warn{color:var(--amber);background:color-mix(in srgb,var(--amber) 11%,transparent);border-color:color-mix(in srgb,var(--amber) 25%,transparent)}
.flash.bad{color:var(--red);background:color-mix(in srgb,var(--red) 11%,transparent);border-color:color-mix(in srgb,var(--red) 25%,transparent)}

.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,10px);z-index:90;
  display:flex;align-items:center;gap:9px;background:var(--tip-bg);color:var(--tip-ink);
  font:500 13px -apple-system,sans-serif;padding:11px 18px;border-radius:12px;
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast svg{width:15px;height:15px;color:var(--green);flex:none}
.toast.err svg{color:var(--red)}

.skel{border-radius:8px;height:12px;margin:10px 0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 7%,transparent) 25%,color-mix(in srgb,var(--ink) 13%,transparent) 40%,color-mix(in srgb,var(--ink) 7%,transparent) 55%);
  background-size:300% 100%;animation:skel 1.3s linear infinite}
.skel.w60{width:60%}
.skel.w80{width:80%}
.skel.big{height:24px;width:40%}
@keyframes skel{from{background-position:120% 0}to{background-position:-180% 0}}

.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}
.toolbar .spacer{flex:1}
.segf .cnt{color:var(--muted);font-weight:500}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;align-items:center}
.filters input,.filters select{
  font:400 13.5px -apple-system,sans-serif;color:var(--ink);background:var(--panel-2);
  border:1px solid var(--line);border-radius:10px;padding:8px 12px;min-width:0;
  transition:border-color .15s var(--ease),background .15s var(--ease)}
.filters input{flex:1 1 200px}
.filters input::placeholder{color:var(--muted)}
.filters input:hover,.filters select:hover{border-color:color-mix(in srgb,var(--ink) 22%,transparent)}
.filters input:focus,.filters select:focus{outline:none;border-color:var(--blue);background:var(--panel)}
/* select: vlastný chevron s dychom, natívna šípka býva nalepená na okraji */
.filters select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8F99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:14px}

dialog.dlg{border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);
  padding:0;max-width:520px;width:calc(100% - 32px)}
dialog.dlg::backdrop{background:rgba(0,0,0,.55)}
dialog.dlg form{padding:22px 24px 18px;margin:0}
dialog.dlg h3{margin:0 0 4px;font-size:15px;font-weight:600}
dialog.dlg .dsub{color:var(--muted);font-size:12.5px;margin:0 0 14px}
dialog.dlg textarea{font:400 13.5px/1.6 -apple-system,sans-serif;color:var(--ink);width:100%;
  background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:11px 13px;
  outline:none;resize:vertical;transition:border-color .15s var(--ease),background .15s var(--ease)}
dialog.dlg textarea:focus{border-color:var(--blue);background:var(--bg)}
.dlgfoot{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}

.tline{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:6px}
.tline .ev{display:flex;gap:12px;align-items:baseline;padding:10px 16px;border-bottom:1px solid var(--line-2);font-size:13px}
.tline .ev:last-child{border-bottom:0}
.tline .ev time{color:var(--muted);font-size:12px;white-space:nowrap}

/* ------------------------------------------------ shell: sidebar + obsah */
.app{display:flex;min-height:100svh}
.aside{width:204px;flex:none;position:sticky;top:0;align-self:flex-start;height:100svh;
  border-right:1px solid var(--line);padding:14px 10px;
  display:flex;flex-direction:column;background:var(--panel);
  transition:background .25s var(--ease),border-color .25s var(--ease)}
.alogo{display:flex;align-items:center;gap:9px;color:var(--ink);font-weight:600;font-size:13.5px;
  letter-spacing:-.01em;padding:2px 10px 12px;text-decoration:none;border-radius:8px}
.alogo svg{width:17px;height:17px;flex:none}
.alogo:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.anav{display:grid;gap:2px}
.anav a{display:flex;align-items:center;gap:9px;color:var(--muted);font-weight:500;font-size:13px;
  padding:7px 10px;border-radius:8px;text-decoration:none;
  transition:background .15s var(--ease),color .15s var(--ease)}
.anav a svg{width:16px;height:16px;flex:none}
.anav a:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink)}
.anav a:active{background:color-mix(in srgb,var(--ink) 10%,transparent)}
.anav a.on{background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--ink);font-weight:600}
.anav a:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.afoot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  padding:8px 4px 0 10px;color:var(--muted);font-size:12px}
.afoot .acts{display:flex;gap:6px}
.afoot form{margin:0}
.amain{flex:1;min-width:0;padding:clamp(20px,3vw,40px) clamp(20px,3vw,48px) 80px}
.amain .inner{max-width:1720px;margin:0 auto}
/* pod 700 px sa sidebar preklopí na horný pruh, labely sa skryjú, ostanú ikony */
@media (max-width:700px){
  .app{flex-direction:column}
  .aside{position:static;align-self:auto;width:100%;height:auto;flex-direction:row;align-items:center;gap:6px;
    border-right:0;border-bottom:1px solid var(--line);padding:8px 12px}
  .alogo{padding:2px 8px 2px 4px}
  .anav{display:flex}
  .anav a{padding:8px}
  .anav .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .afoot{margin:0 0 0 auto;padding:0}
  .afoot .who{display:none}
}

/* ------------------------------------------------ login */
.loginpage{min-height:100svh;display:grid;place-items:center;padding:20px}
/* karta v strede aj na úzkom displeji, kde by sa main roztiahol na celú šírku */
.loginpage main{width:100%;display:grid;justify-items:center}
.logincard{width:min(300px,100%);display:grid;gap:12px;text-align:center;background:var(--panel);
  border:1px solid var(--line);border-radius:16px;padding:30px 28px;margin:0}
.logincard .llogo{display:flex;justify-content:center;padding:0 0 4px;color:var(--ink)}
.logincard .llogo svg{width:26px;height:26px}
.logincard input{font:400 13.5px -apple-system,sans-serif;color:var(--ink);background:var(--panel-2);
  border:1px solid var(--line);border-radius:10px;padding:10px 13px;width:100%;text-align:center;
  transition:border-color .15s var(--ease),background .15s var(--ease)}
.logincard input::placeholder{color:var(--muted)}
.logincard input:focus{outline:none;border-color:var(--blue);background:var(--bg)}
.logincard .btn.pri{width:100%;padding:10px}
/* chyba sa ukáže, keď server presmeruje na /login#chyba, funguje aj bez JS */
.lerr{display:none;margin:0;max-width:none;color:var(--red);font-size:12.5px;font-weight:500}
.lerr:target{display:block}
/* iOS pri písme pod 16 px po ťuknutí do poľa priblíži stránku */
@media (max-width:700px){.logincard input{font-size:16px}}

/* ------------------------------------------------ projekty (27. 10. 2026) */
/* prihlásenie do projektu: názov projektu nad poľom pre PIN */
.logincard .lname{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.35;text-wrap:balance}
.logincard .lsub{margin:0 0 4px;color:var(--muted);font-size:12.5px;text-wrap:pretty}
/* projekt nie je dostupný: len text, bez karty */
.loginpage .note{max-width:34ch;text-align:center}
.loginpage .note h1{margin:0;font-size:clamp(24px,4vw,30px);font-weight:500;letter-spacing:-.015em;line-height:1.2;text-wrap:balance}
.loginpage .note p{margin:12px 0 0;color:var(--muted);text-wrap:pretty}
/* adresa projektu pod názvom, kopíruje ju tlačidlo v riadku */
.apptbl td.main .sub{display:block;color:var(--muted);font-size:12px;margin-top:2px;overflow-wrap:anywhere}
.hint{color:var(--muted);font-size:12.5px;max-width:78ch;margin:12px 2px 0;text-wrap:pretty}
/* dialóg PIN-u: rovnaké pole ako filtre, chyba červeno pod ním */
dialog.dlg .pininp{font:400 14px -apple-system,sans-serif;color:var(--ink);width:100%;letter-spacing:.04em;
  background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:10px 13px;
  transition:border-color .15s var(--ease),background .15s var(--ease)}
dialog.dlg .pininp::placeholder{color:var(--muted);letter-spacing:0}
dialog.dlg .pininp:focus{outline:none;border-color:var(--blue);background:var(--bg)}
.pinerr{margin:6px 0 0;color:var(--red);font-size:12.5px;font-weight:500;min-height:1em}
.pinerr:empty{display:none}
/* poznámka o zázname prístupov pod tlačidlom na prihlásenie do projektu */
.logincard .lnote{margin:2px 0 0;color:var(--muted);font-size:11.5px;text-wrap:pretty}
/* záznam prístupov: čas a čísla v stĺpcoch rovnako široké, prehliadač s celým textom v title */
.plog td.cas{font-variant-numeric:tabular-nums}
.plog td .tag{font-size:11.5px;padding:2px 9px}
.pcount{color:var(--muted);font-size:12.5px}
.kpi .k small{display:block;color:var(--muted);font-weight:400;margin-top:2px}
@media (max-width:700px){#pSuhrn{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#pSuhrn .kpi{padding:13px 14px 12px}#pSuhrn .kpi .n{font-size:22px}}
/* tlačidlá, ktoré bez JS nič nerobia, sa bez neho neukážu */
html:not(.js) .js-only{display:none}
.btn:disabled{opacity:.45;cursor:default}
@media (max-width:700px){dialog.dlg .pininp{font-size:16px}}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}