/* Domain Watch 1.3 — minimalno sučelje. Fontovi su lokalni (static/fonts), bez vanjskih zahtjeva. */
@font-face{font-family:'Geist';font-style:normal;font-weight:400 700;font-display:swap;src:url(/static/fonts/geist-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:400 700;font-display:swap;src:url(/static/fonts/geist-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:500 600;font-display:swap;src:url(/static/fonts/geist-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:500 600;font-display:swap;src:url(/static/fonts/geist-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  color-scheme:light;
  --bg:#f6f6f2;--surface:#ffffff;--ink:#101010;--mid:#46463f;--faint:#6b6b64;--line:#dcdcd4;--hover:#efefe9;
  --ok:#17794f;--ok-bg:#dff3e8;--soon:#8f5d00;--soon-bg:#fdecc4;--bad:#b3261e;--bad-bg:#fbdcd8;
  --free:#1f5fd1;--free-bg:#dce8fd;--idle:#555;--idle-bg:#e8e8e2;
  --f:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;--m:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;--ease:cubic-bezier(.2,.8,.2,1);
  --tabbar:64px;
  /* jedna visina za sve kontrole u istom retku: .btn, .sel, .field, .search, birač datoteke, segmenti */
  --ctl-h:42px;--ctl-h-sm:34px;--ctl-px:18px;--ctl-r:10px
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#0c0c0b;--surface:#161615;--ink:#f5f5f0;--mid:#c2c2ba;--faint:#92928a;--line:#2e2e2b;--hover:#1d1d1b;
  --ok:#5fd39b;--ok-bg:#12301f;--soon:#f2bf4a;--soon-bg:#33270a;--bad:#ff8277;--bad-bg:#3a1613;
  --free:#7fb2ff;--free-bg:#13264a;--idle:#c2c2ba;--idle-bg:#252523}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0c0c0b;--surface:#161615;--ink:#f5f5f0;--mid:#c2c2ba;--faint:#92928a;--line:#2e2e2b;--hover:#1d1d1b;
  --ok:#5fd39b;--ok-bg:#12301f;--soon:#f2bf4a;--soon-bg:#33270a;--bad:#ff8277;--bad-bg:#3a1613;
  --free:#7fb2ff;--free-bg:#13264a;--idle:#c2c2ba;--idle-bg:#252523}

*{box-sizing:border-box;margin:0}
html{font-size:16px;scroll-padding-top:90px}
body{background:var(--bg);color:var(--ink);font:400 1rem/1.55 var(--f);-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;transition:background .3s,color .3s}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:8px}
.hidden{display:none!important}
[hidden]{display:none!important}   /* atribut hidden uvijek pobjeđuje display iz klasa (npr. .btn{display:inline-flex} je prikazivao skriveni "Učitaj starije") */
.wrap{max-width:960px;width:100%;margin:0 auto;padding-left:24px;padding-right:24px}

/* ---- napredak (tanka traka pri svakom API pozivu) ---- */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;overflow:hidden;opacity:0;transition:opacity .2s;pointer-events:none}
.progress.on{opacity:1}
.progress i{position:absolute;top:0;bottom:0;width:40%;background:var(--ink);border-radius:3px;animation:slide 1.1s var(--ease) infinite}
@keyframes slide{from{left:-40%}to{left:100%}}

/* ---- zalijepljeno zaglavlje ---- */
.topbar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.05rem;letter-spacing:-.02em;text-decoration:none}
.brand img{width:26px;height:26px;border-radius:7px}
.topnav{display:flex;gap:2px;margin-right:auto;margin-left:14px}
.topnav a{color:var(--mid);text-decoration:none;font-size:.95rem;font-weight:500;padding:8px 16px;border-radius:8px;transition:.2s}
.topnav a:hover{color:var(--ink);background:var(--hover)}
.topnav a[aria-current]{color:var(--bg);background:var(--ink)}
.topright{display:flex;align-items:center;gap:16px}
.live{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;color:var(--mid);white-space:nowrap}
.live i{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none}
.live.pending i{background:var(--soon);animation:blink 1.2s ease-in-out infinite}
.live.offline i{background:var(--bad)}
@keyframes blink{50%{opacity:.3}}
.theme{display:inline-flex;border:1px solid var(--line);border-radius:9px;padding:2px}
.theme button{all:unset;cursor:pointer;width:30px;height:26px;display:grid;place-items:center;border-radius:7px;color:var(--faint);transition:.2s}
.theme button:hover{color:var(--ink)}
.theme button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.theme svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---- donja navigacija (mobitel) ---- */
.tabbar{display:none}
@media(max-width:720px){
  .topnav{display:none}
  .tabbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:45;height:calc(var(--tabbar) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:color-mix(in srgb,var(--surface) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:var(--faint);font-size:.68rem;font-weight:600;position:relative;transition:color .2s;min-width:0;padding:0 2px}
  .tabbar a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.01em}
  .tabbar a svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
  .tabbar a[aria-current]{color:var(--ink)}
  .tabbar a[aria-current] svg{transform:translateY(-1px) scale(1.08)}
  .tabbar a[aria-current]::before{content:"";position:absolute;top:0;width:28px;height:3px;border-radius:0 0 3px 3px;background:var(--ink)}
  .page{padding-bottom:calc(var(--tabbar) + 40px + env(safe-area-inset-bottom))}
}

.banner{margin-top:20px;padding:14px 18px;border-radius:12px;background:var(--soon-bg);color:var(--soon);font-size:.92rem;line-height:1.5}
.banner[hidden]{display:none}
.banner code{font:600 .85rem var(--m);background:#0001;padding:1px 6px;border-radius:5px}

/* ---- pogledi ---- */
.view{display:none}
.view.on{display:block;animation:enter .4s var(--ease)}
@keyframes enter{from{opacity:0;transform:translateY(6px)}}
.page{padding-bottom:80px;flex:1 0 auto}
.hero{padding:44px 0 26px}
.hero h1{font:600 clamp(1.5rem,3.2vw,2rem)/1.15 var(--f);letter-spacing:-.03em}
.hero p{color:var(--mid);margin-top:10px}

/* ---- brzi pregled (jedan redak umjesto pločica) ---- */
.stats{display:flex;gap:6px 26px;flex-wrap:wrap;margin-bottom:26px}
.stat{all:unset;cursor:pointer;display:inline-flex;align-items:baseline;gap:8px;padding:4px 0;border-bottom:2px solid transparent;color:var(--mid);font-size:.98rem;transition:color .2s,border-color .2s}
.stat:hover{color:var(--ink)}
.stat[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--ink)}
.stat b{font:700 1.15rem/1 var(--f);color:var(--ink)}
.stat.zero b{color:var(--faint);font-weight:600}
.stat::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c);align-self:center;flex:none}

/* ---- alatna traka ---- */
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.toolbar .spacer{flex:1}
.toolbar .search{flex:0 1 240px}.toolbar .search:focus{width:auto;flex-basis:300px}
.pop-wrap{position:relative}
.pop{position:absolute;right:0;top:calc(100% + 8px);z-index:35;min-width:290px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 18px 50px #0003;display:grid;gap:16px;animation:enter .2s var(--ease)}
.pop[hidden]{display:none}
.pop label{font-size:.8rem;font-weight:600;color:var(--mid);display:block;margin-bottom:7px}
.pop .sel{width:100%}
.pop .seg{display:flex}.pop .seg button{flex:1;text-align:center}
.pop.menu{min-width:210px;padding:6px;gap:0}
.pop.menu button{all:unset;cursor:pointer;box-sizing:border-box;width:100%;padding:11px 14px;border-radius:9px;font-size:.92rem;display:block}
.pop.menu button:hover{background:var(--hover)}
.badge[hidden]{display:none}
.badge{display:inline-grid;margin-left:8px;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:var(--ink);color:var(--bg);font-size:.72rem;font-weight:700}

.bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:16px;flex-wrap:wrap}
.bar .l,.bar .r{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;padding:2px;background:var(--surface)}
.seg button{all:unset;box-sizing:border-box;cursor:pointer;color:var(--mid);font-size:.9rem;font-weight:500;line-height:1.2;height:calc(var(--ctl-h) - 6px);padding:0 16px;border-radius:7px;transition:.2s;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--ink);color:var(--bg)}
.seg small{opacity:.65;margin-left:4px;font-size:.8rem}
.sel,.search,.field{all:unset;box-sizing:border-box;height:var(--ctl-h);line-height:1.2;border:1px solid var(--line);border-radius:var(--ctl-r);font-size:.92rem;padding:0 14px;background:var(--surface);transition:border-color .2s,width .25s var(--ease);color:var(--ink)}
.sel{--h:var(--ctl-h);height:var(--h);padding-top:calc((var(--h) - 2px - 1.2em) / 2);padding-bottom:0;cursor:pointer;padding-right:32px;background-image:linear-gradient(45deg,transparent 50%,var(--mid) 50%),linear-gradient(135deg,var(--mid) 50%,transparent 50%);background-position:calc(100% - 14px) 52%,calc(100% - 9px) 52%;background-size:5px 5px;background-repeat:no-repeat}
.sel:hover,.search:focus,.field:focus{border-color:var(--ink)}
.search{width:200px}.search:focus{width:250px}
.search::placeholder,.field::placeholder{color:var(--faint)}
.field{width:100%;background-color:var(--bg)}   /* samo boja: .sel.field zadržava strelicu (background-image) */
.field[type=date]{cursor:text;min-width:0}
.field[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.7}
.field:disabled{opacity:.6;cursor:not-allowed}

/* ---- gumbi + spinner ---- */
.btn{all:unset;cursor:pointer;box-sizing:border-box;font-size:.92rem;font-weight:600;line-height:1.2;min-height:var(--ctl-h);padding:0 var(--ctl-px);border-radius:var(--ctl-r);background:var(--ink);color:var(--bg);transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.btn:hover{opacity:.85}
.btn.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn.line:hover{box-shadow:inset 0 0 0 1px var(--ink);opacity:1}
.btn.danger{color:var(--bad)}
.btn.icon{padding:0;width:var(--ctl-h)}
.btn:disabled,.btn[aria-busy=true]{opacity:.55;cursor:not-allowed}
.spin{width:14px;height:14px;border:2px solid color-mix(in srgb,currentColor 25%,transparent);border-top-color:currentColor;border-radius:50%;animation:rot .7s linear infinite;display:inline-block;flex:none}
@keyframes rot{to{transform:rotate(360deg)}}
.spin.lg{width:22px;height:22px;border-width:3px}

/* ---- forma za dodavanje / uređivanje ---- */
.fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.fold.open{grid-template-rows:1fr}
.fold>div{overflow:hidden;min-height:0}
.addform{display:grid;grid-template-columns:1fr 1fr;gap:18px 18px;padding:24px;margin-bottom:20px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.addform .full{grid-column:1/-1}
.fld label{display:block;font-size:.82rem;font-weight:600;color:var(--mid);margin-bottom:7px}
.fld label em{font-style:normal;font-weight:400;color:var(--faint);margin-left:4px}
.addform .hint{font-size:.85rem;color:var(--mid)}
.addform .err{font-size:.9rem;color:var(--bad);font-weight:500}
.addform .acts{display:flex;gap:10px;justify-content:flex-end}

/* ---- popis ---- */
.cols,.head{display:grid;grid-template-columns:minmax(0,2.4fr) 150px 108px 84px;gap:14px;align-items:center}
.cols{padding:10px 20px 10px 24px;font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.cols span:last-child,.head .days{text-align:right}
.group{font-size:.88rem;font-weight:700;padding:28px 4px 12px;display:flex;align-items:center;gap:8px}
.group em,.gh em{font-style:normal;font-weight:600;font-size:.75rem;background:var(--ink);color:var(--bg);padding:1px 8px;border-radius:99px}
.row{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden;opacity:0;transform:translateY(6px);animation:rowin .45s var(--ease) forwards;transition:border-color .2s;position:relative}
.row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c)}
.row:hover,.row.open{border-color:var(--ink)}
@keyframes rowin{to{opacity:1;transform:none}}
.head{padding:16px 22px 16px 28px;cursor:pointer}
.nm{font-weight:600;font-size:1.08rem;letter-spacing:-.02em;display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere;line-height:1.25}
.nm small{font-weight:400;font-size:.86rem;color:var(--mid);letter-spacing:0;margin-top:4px;overflow-wrap:anywhere}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:600;padding:4px 12px 4px 10px;border-radius:99px;background:var(--bg-c);color:var(--c);width:max-content;white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.date{font-size:.92rem}
.days{font:600 1.45rem/1 var(--m);letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--c)}
.days small{display:block;font:500 .74rem/1.3 var(--f);letter-spacing:0;color:var(--mid);margin-top:5px}
.more{padding:22px 28px 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px 24px;border-top:1px solid var(--line)}
.more .k{display:block;font-size:.74rem;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}
.more .v{font-size:.92rem;overflow-wrap:anywhere}
.more .wide{grid-column:span 2}
.more .full{grid-column:1/-1}
.lasterr{background:var(--bad-bg);color:var(--bad);border-radius:8px;padding:8px 12px;font-size:.88rem}
.acts{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap;padding-top:4px}
.hist{grid-column:1/-1}
.hist table{width:100%;border-collapse:collapse;font-size:.88rem}
.hist th{text-align:left;font-size:.74rem;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;padding:6px 12px 6px 0}
.hist td{padding:9px 12px 9px 0;border-top:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
.loadline{display:flex;align-items:center;gap:12px;color:var(--mid);font-size:.92rem;padding:12px 0}
.empty{color:var(--mid);padding:60px 12px;text-align:center}
.empty strong{display:block;color:var(--ink);font-size:1.1rem;margin-bottom:4px}
.empty .btn{margin-top:14px}
.explain{font-size:.86rem;color:var(--mid);margin-top:32px;display:grid;gap:8px;line-height:1.6}
.sk{height:76px;border-radius:14px;margin-bottom:12px;background:linear-gradient(90deg,var(--surface) 25%,var(--hover) 50%,var(--surface) 75%);background-size:300% 100%;border:1px solid var(--line);animation:shim 1.4s linear infinite}
@keyframes shim{from{background-position:100% 0}to{background-position:0 0}}

/* ---- grupe ---- */
.gh{all:unset;cursor:pointer;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:14px;padding:22px 8px 12px;margin-top:8px}
.gh .chev{width:18px;height:18px;flex:none;color:var(--faint);transition:transform .25s var(--ease)}
.gh[aria-expanded=false] .chev{transform:rotate(-90deg)}
.gh .gn{font-weight:700;font-size:1.05rem;letter-spacing:-.02em}
.gh .gs{margin-left:auto;display:flex;gap:18px;font-size:.85rem;color:var(--mid);align-items:center;flex-wrap:wrap;justify-content:flex-end}
.gs b{font-weight:600;color:var(--ink)}
.gs .dotn::before{content:"●";color:var(--c);margin-right:4px;font-size:.8em}
.gbody{display:grid;grid-template-rows:1fr;transition:grid-template-rows .35s var(--ease)}
.gbody.shut{grid-template-rows:0fr}
.gbody>div{overflow:hidden;min-height:0}

/* ---- provjera ---- */
.lookform{display:grid;grid-template-columns:1fr auto;gap:14px}
input.big{all:unset;box-sizing:border-box;width:100%;font:600 clamp(1.4rem,3.6vw,1.9rem)/1.2 var(--f);letter-spacing:-.03em;padding:16px 22px;border:1px solid var(--line);border-radius:14px;background:var(--surface);transition:.25s}
input.big:focus{border-color:var(--ink)}
input.big::placeholder{color:var(--faint)}
.lookform .btn{padding:0 22px;font-size:1rem}
.lookext{margin-top:18px}
.lookext label{display:block;font-size:.8rem;font-weight:600;color:var(--mid);margin-bottom:4px}
.lookext label em{font-style:normal;font-weight:400;color:var(--faint);margin-left:4px}
.lookext .field{background:var(--surface);font-family:var(--m);font-weight:500}
.note{font-size:.88rem;color:var(--mid);margin-top:18px}
.rl{margin-top:20px;display:grid;gap:12px}
.res{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:18px 22px;background:var(--surface);border:1px solid var(--line);border-radius:14px;opacity:0;transform:translateX(-8px);animation:rowin .4s var(--ease) forwards}
.res b{font:600 1.1rem var(--m);letter-spacing:-.03em;overflow-wrap:anywhere;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.res .tag{font:600 .68rem var(--f);letter-spacing:.08em;background:var(--ink);color:var(--bg);padding:2px 7px;border-radius:6px}
.res .sub{font-size:.88rem;color:var(--mid);grid-column:1}
.res .why{font-size:.85rem;color:var(--mid);grid-column:1/-1;overflow-wrap:anywhere}
.res .meta{font-size:.8rem;color:var(--faint);grid-column:1}
.res .btn{grid-column:2;grid-row:1/3;align-self:center}
.resh{display:flex;justify-content:space-between;align-items:center;margin-top:34px}
.resh h2{font-size:1rem;font-weight:700}

/* ---- aktivnost i postavke ---- */
.item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;padding:18px 22px;background:var(--surface);border:1px solid var(--line);border-radius:14px;margin-bottom:12px;align-items:center;opacity:0;animation:rowin .4s var(--ease) forwards}
.item b{font-size:1rem;font-weight:600}
.item small{display:block;color:var(--mid);font-size:.88rem;overflow-wrap:anywhere}
.item time{font-size:.82rem;color:var(--faint)}
.sect{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:40px 4px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.card{padding:22px 24px;background:var(--surface);border:1px solid var(--line);border-radius:14px;margin-bottom:12px}
.set{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 20px;align-items:center}
.set b{font-size:1.05rem;font-weight:600;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.set small{display:block;color:var(--mid);font-size:.88rem;margin-top:5px}
.ctl{display:flex;align-items:center;gap:12px;justify-content:flex-end;flex-wrap:wrap}
.tres{grid-column:1/-1;font-size:.88rem;display:flex;align-items:center;gap:8px;min-height:0;overflow-wrap:anywhere}
.tres:empty{display:none}
.tres.ok{color:var(--ok)}.tres.bad{color:var(--bad)}.tres.wait{color:var(--mid)}
.tg{all:unset;cursor:pointer;width:42px;height:24px;border-radius:99px;background:var(--line);position:relative;transition:.3s var(--ease);flex:none}
.tg::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px #0005;transition:.3s var(--ease)}
.tg[aria-checked=true]{background:var(--ok)}.tg[aria-checked=true]::after{transform:translateX(18px)}
.tg:disabled{opacity:.4;cursor:not-allowed}
.tg[aria-busy=true]{opacity:.6}
.line2{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:.92rem}
.line2:first-of-type{border-top:0}
.line2 span:last-child{color:var(--mid);text-align:right}
.code{font:600 .8rem var(--m);background:var(--hover);padding:1px 8px;border-radius:6px}
.keyrow{display:flex;gap:10px;margin-top:14px}
.keyrow .field{flex:1;background:var(--bg)}
.muted{color:var(--mid);font-size:.9rem}
.muted code,.card code{font:500 .85rem var(--m);background:var(--hover);padding:1px 6px;border-radius:5px;overflow-wrap:anywhere}
.line2 small{font-size:.86rem;line-height:1.5}
.foot{margin-top:auto;padding-top:28px;padding-bottom:40px;font-size:.8rem;color:var(--faint);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line)}

/* ---- autocomplete grupa ---- */
.ac{position:fixed;z-index:80;background:var(--surface);border:1px solid var(--ink);border-radius:12px;box-shadow:0 14px 40px #0004;padding:6px;max-height:264px;overflow:auto;animation:enter .15s var(--ease)}
.ac[hidden]{display:none}
.ac [role=option]{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:9px 12px;border-radius:8px;cursor:pointer;font-size:.95rem}
.ac [role=option][aria-selected=true]{background:var(--hover)}
.ac [role=option] small{color:var(--faint);font-size:.8rem;white-space:nowrap}
.ac [role=option].new{font-weight:600}
.ac mark{background:none;color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.ac .none{padding:10px 12px;color:var(--faint);font-size:.9rem}

/* ---- prijava ---- */
.userbox{display:flex;align-items:center;gap:10px}
.userbox[hidden]{display:none}
.who{font-weight:600;font-size:.92rem}
.login{max-width:380px;margin:12vh auto 0;display:grid;gap:14px}
.login h1{font:600 clamp(1.6rem,4vw,2rem)/1.15 var(--f);letter-spacing:-.03em}
.login form{display:grid;gap:16px;margin-top:6px}
.login .err{color:var(--bad);font-size:.9rem;min-height:1.2em}
.login .btn{justify-content:center}
.locked .topnav,.locked .tabbar,.locked .live,.locked .foot,.locked .userbox{display:none!important}
@media(max-width:720px){.who{display:none}.login{margin-top:6vh}}

/* ---- obavijesti ---- */
.toasts{position:fixed;right:18px;bottom:18px;z-index:70;display:grid;gap:8px;max-width:min(380px,calc(100vw - 36px))}
.toast{background:var(--ink);color:var(--bg);padding:11px 16px;border-radius:11px;font-size:.92rem;font-weight:500;box-shadow:0 10px 30px #0004;animation:toastin .35s var(--ease);overflow-wrap:anywhere}
.toast.error{background:var(--bad);color:#fff}
@keyframes toastin{from{opacity:0;transform:translateY(10px)}}

@media(max-width:820px){
  .cols{display:none}
  .head{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
  .head .pill{grid-column:1;grid-row:2}.head .date{display:none}.head .days{grid-column:2;grid-row:1/3}
  .more{grid-template-columns:1fr 1fr}.more .wide{grid-column:1/-1}
  .addform{grid-template-columns:1fr}
  .head{padding:16px 16px 16px 22px}.more{padding:18px 20px 20px}.hero{padding:30px 0 20px}.topbar-in{min-height:60px}.card{padding:18px}.res{padding:16px}.item{padding:16px}.addform{padding:18px}
  .item{grid-template-columns:1fr}
  .search,.search:focus{width:100%}.bar .r{width:100%}.bar .r .search{flex:1}
  .toolbar #types{width:100%}.toolbar #types button{flex:1;text-align:center}.toolbar .search,.toolbar .search:focus{flex:1 1 100%}.toolbar .spacer{display:none}.toolbar #addbtn{flex:1}.pop{right:auto;left:0;min-width:min(300px,calc(100vw - 32px))}.pop-wrap:last-of-type .pop{left:auto;right:0}
  .stats{gap:6px 18px;margin-bottom:20px}

  .gh .gs{display:none}
  .set{grid-template-columns:1fr}.ctl{justify-content:flex-start}
  .res{grid-template-columns:1fr}.res .btn{grid-column:1;grid-row:auto;justify-self:start;margin-top:6px}
  .lookform{grid-template-columns:1fr}.lookform .btn{padding:11px}
}
@media(max-width:720px){.wrap{padding-left:16px;padding-right:16px}.toasts{right:12px;left:12px;bottom:calc(var(--tabbar) + 12px + env(safe-area-inset-bottom));max-width:none}.foot{flex-direction:column}}
@media print{.topbar,.tabbar,.toasts,.progress{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}*:not(.spin){animation:none!important}.row,.res,.item{opacity:1;transform:none}.progress i{width:100%;left:0}.spin{animation:rot 1.6s linear infinite!important}}

/* ---- admin ---- */
.adm-tag{font-weight:500;font-size:.8rem;border:1px solid var(--line);border-radius:6px;padding:1px 7px;margin-left:6px}
.chk{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:500;color:var(--mid);margin-top:10px;cursor:pointer}
.chk input{width:16px;height:16px;accent-color:var(--ink)}
.once{background:var(--soon-bg);color:var(--ink);border:1px solid var(--soon);border-radius:14px;padding:16px 20px;margin:14px 0;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.once code{font:600 1.15rem var(--m);letter-spacing:.04em;background:var(--surface);border-radius:8px;padding:6px 12px;user-select:all;overflow-wrap:anywhere}
.once p{flex-basis:100%;font-size:.88rem}
.tablewrap{overflow-x:auto;margin-top:14px}
.atable{width:100%;border-collapse:collapse;font-size:.92rem}
.atable th{text-align:left;font-size:.74rem;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;padding:8px 12px}
.atable td{padding:12px;border-top:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
.atable td small{font-size:.82rem}
.atable .acts-cell{white-space:nowrap;text-align:right}
.atable .acts-cell .btn{min-height:30px;padding:0 11px;font-size:.82rem;margin-left:4px}
.logs .logrow{cursor:pointer}.logs .logrow:hover td{background:var(--hover)}
.logs td.t{white-space:nowrap;font:500 .82rem var(--m);color:var(--mid)}
.logs pre{margin:0;font:500 .82rem/1.5 var(--m);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--mid)}
.logs tr.logdetail td{background:var(--hover)}
@media(max-width:820px){.atable .acts-cell{white-space:normal}.atable th:nth-child(3),.atable td:nth-child(3){display:none}}
.pill.k-ok{--c:var(--ok);--bg-c:var(--ok-bg)}.pill.k-bad{--c:var(--bad);--bg-c:var(--bad-bg)}.pill.k-soon{--c:var(--soon);--bg-c:var(--soon-bg)}.pill.k-idle{--c:var(--mid);--bg-c:var(--hover)}
.chk[hidden]{display:none}
@media(max-width:640px){
  .atable:not(.logs),.atable:not(.logs) tbody,.atable:not(.logs) tr,.atable:not(.logs) td{display:block}
  .atable:not(.logs) thead{display:none}
  .atable:not(.logs) tr{border:1px solid var(--line);border-radius:14px;padding:6px 4px;margin-bottom:12px;background:var(--surface)}
  .atable:not(.logs) td{border:0;padding:6px 12px}
  .atable:not(.logs) td:nth-child(2)::before{content:"Domene: ";color:var(--faint)}
  .atable:not(.logs) td:nth-child(3){display:block}.atable:not(.logs) td:nth-child(3)::before{content:"Zadnja prijava: ";color:var(--faint)}
  .atable:not(.logs) .acts-cell{display:flex;flex-wrap:wrap;gap:6px;text-align:left}.atable:not(.logs) .acts-cell .btn{margin:0}
  .logs th:nth-child(3),.logs td:nth-child(3){display:none}
  .once code{font-size:1rem}
}
@media(max-width:480px){.adm-tag{display:none}.topright .btn{min-height:var(--ctl-h-sm);padding:0 12px;font-size:.85rem}}

.scard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin:18px 0}
.scard h3{margin:0 0 6px;font-size:1.05rem;letter-spacing:-.01em}
.srow{padding:12px 0;border-top:1px solid var(--line)}.scard h3+.srow,.scard h3+p+.srow{border-top:0}
.srow label{display:block;font-size:.84rem;font-weight:600;color:var(--mid);margin-bottom:6px}
.srow label em{font-style:normal;font-weight:500;color:var(--faint);margin-left:6px;font-size:.78rem}
.sin{display:flex;gap:10px;flex-wrap:wrap}.sin .field,.sin .sel{flex:1 1 220px;min-width:0}
.srow small{display:block;margin-top:6px}

.linkbtn{all:unset;cursor:pointer;color:var(--mid);font-size:.9rem;font-weight:500;text-decoration:underline;text-underline-offset:3px;display:inline-block;margin:14px 0 0}
.linkbtn:hover{color:var(--ink)}.linkbtn[hidden]{display:none}
.login .err.ok{color:var(--ok)}
#login-form[hidden],#magic-form[hidden]{display:none!important}

/* ---- izbornik računa ---- */
.fld[hidden],#acc[hidden],#secwrap[hidden]{display:none}
.acctbtn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 12px 0 6px;border:1px solid var(--line);border-radius:99px;background:var(--surface);color:var(--ink);font-size:.92rem;font-weight:600;transition:border-color .2s,background .2s}
.acctbtn:hover,.acctbtn[aria-expanded=true]{border-color:var(--ink)}
.acctbtn.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}   /* aktivan pogled: Postavke (nisu u glavnoj navigaciji) */
.acctbtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* Inicijal u krugu: flex centriranje + line-height:1, bez paddinga. Geist ima gotovo simetrične metrike za verzale
   ((ascent − descent − visina verzala)/2 ≈ −0,01 em), pa optička korekcija nije potrebna; izmjereno u Chromeu za B, A, Z, Č.
   (Prije: klasa "big" sudarala se s .big poljem Provjere i davala 16 px gornjeg paddinga, pa je slovo sjedilo nisko.) */
.avatar{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border-radius:50%;background:var(--ink);color:var(--bg);font-size:.82rem;font-weight:700;line-height:1;letter-spacing:0;text-transform:uppercase;flex:none;overflow:hidden}
.avatar.lg{width:44px;height:44px;font-size:1.1rem}
.avatar.ico{background:transparent;color:var(--mid);box-shadow:inset 0 0 0 1px var(--line)}
.avatar svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.chev{width:16px;height:16px;fill:none;stroke:var(--mid);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.acctbtn[aria-expanded=true] .chev{transform:rotate(180deg)}
.acctmenu{min-width:272px;padding:8px;gap:2px;right:0;left:auto}
.acct-head{padding:10px 12px 12px;display:grid;gap:2px;border-bottom:1px solid var(--line);margin-bottom:6px}
.acct-head[hidden]{display:none}
.acct-head b{font-size:1rem}.acct-head small{color:var(--mid);font-size:.84rem;overflow-wrap:anywhere}
.acct-block{padding:8px 12px 10px}
.acct-label{display:block;font-size:.74rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.acctmenu .theme{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;width:100%}
.acctmenu .theme button{width:auto;height:auto;padding:9px 4px;flex-direction:column;gap:5px;font-size:.78rem;font-weight:600}
.acctmenu .theme button span{line-height:1}
.acct-item{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;cursor:pointer;padding:11px 12px;border-radius:9px;font-size:.92rem;font-weight:500;color:var(--ink);text-decoration:none}
.acct-item svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;color:var(--mid)}
.acct-item[aria-current]{background:var(--hover);font-weight:650;box-shadow:inset 3px 0 0 var(--ink)}
.acct-item[aria-current] svg{color:var(--ink)}
.acct-item:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.acct-item[hidden]{display:none}
.acct-item:hover{background:var(--hover)}
.acct-item#logout{color:var(--bad)}
@media(max-width:720px){.acctbtn{padding:0 6px;gap:4px}.acctbtn .who{display:none}.acctmenu{right:0;left:auto;min-width:min(272px,calc(100vw - 32px))}}
.live.offline{color:var(--bad);font-weight:600}.live::before{content:none}
/* ---- postavke: kanali i račun ---- */
.chan{padding:20px 22px}
.chan-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.chan-h b{font-size:1.08rem;font-weight:600}
.chan-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chan-note{margin:10px 0 0;color:var(--mid);font-size:.9rem;line-height:1.5}
.chan-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.chan-acts .btn{flex:0 1 auto}
.chan .tres{margin-top:12px}
@media(max-width:720px){
  .chan{padding:18px}.chan-acts .btn{flex:1 1 calc(50% - 5px)}
}
/* ---- pretraga svih nastavaka, aktivnost ---- */
.lookall{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.lookall .muted{font-size:.86rem;flex:1 1 260px}
.scan{margin-top:26px;padding:20px 22px;background:var(--surface);border:1px solid var(--line);border-radius:14px}
.scan-h{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap}
.scan-h b{display:block;font-size:1.02rem}.scan-h small{display:block;margin-top:4px}
.bar-track{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin:16px 0 14px}
.bar-track i{display:block;height:100%;background:var(--ink);border-radius:99px;transition:width .5s var(--ease)}
.scan .chk{margin:0 0 12px}.scan .rl{margin-top:6px}
.barbtns{display:flex;gap:10px;flex-wrap:wrap}
.morewrap{text-align:center;margin-top:18px}
@media(max-width:720px){.barbtns{width:100%}.barbtns .btn{flex:1}.scan{padding:16px}}
.sect{min-height:var(--ctl-h-sm)}
.sect .btn{text-transform:none;letter-spacing:0;font-size:.85rem;font-weight:600;flex:none;min-height:var(--ctl-h-sm);padding:0 14px}

.topbar-in{justify-content:flex-start}.topright{margin-left:auto}
.mono{font-family:var(--m);font-size:.86rem;line-height:1.6}

/* ---- račun (kartica) ---- */
.acc{padding:0;overflow:hidden}
.acc-head{display:flex;align-items:center;gap:14px;padding:20px 26px;border-bottom:1px solid var(--line)}
.acc-who{flex:1;min-width:0}.acc-who b{display:block;font-size:1.1rem;letter-spacing:-.01em}.acc-who small{display:block;margin-top:2px;overflow-wrap:anywhere}
.acc-forms{display:grid;grid-template-columns:1fr 1fr}
.acc-form{display:flex;flex-direction:column;gap:16px;padding:26px}
.acc-form+.acc-form{border-left:1px solid var(--line)}
.acc-sec h3{margin:0;font-size:1.02rem;letter-spacing:-.01em}.acc-sec p{margin:6px 0 0;font-size:.88rem;line-height:1.5}
.acc-foot{margin-top:auto;padding-top:6px}
.acc-form .err{font-size:.9rem;color:var(--bad);font-weight:500}.acc-form .err:empty{display:none}
@media(max-width:720px){
  .acc-head{padding:16px 18px;flex-wrap:wrap}.acc-head .btn{margin-left:auto}
  .acc-forms{grid-template-columns:1fr}.acc-form{padding:20px 18px}.acc-form+.acc-form{border-left:0;border-top:1px solid var(--line)}
  .acc-foot .btn{width:100%}
}

/* ---- izbor jezika (podnožje, prijava, račun) ---- */
.langsel{--h:var(--ctl-h-sm);font-size:.8rem;padding-left:10px;padding-right:28px;border-radius:8px;background-position:calc(100% - 13px) 52%,calc(100% - 8px) 52%}
.foot .langsel{align-self:center;color:var(--mid)}
.loginlang{display:none;max-width:380px;margin:22px auto 0;justify-content:center}
#v-prijava.on~.loginlang,#v-magic.on~.loginlang{display:flex}
.head .date{white-space:nowrap}

.acc-langrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 26px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.acc-langrow label{font-size:.9rem;font-weight:600}.acc-langrow label em{font-style:normal;font-weight:400;color:var(--faint);margin-left:6px;font-size:.82rem}
.acc-langrow .sel{min-width:170px}
@media(max-width:720px){.acc-langrow{padding:14px 18px}.acc-langrow .sel{width:100%}}

/* ---- grupe: brisanje (gumb uz zaglavlje grupe) ---- */
.ghw{display:flex;align-items:flex-end;gap:4px}
.ghw .gh{flex:1;min-width:0}
.gdel{all:unset;box-sizing:border-box;cursor:pointer;flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:9px;color:var(--faint);margin-bottom:6px;opacity:0;transition:opacity .2s,color .2s,background .2s}
.gdel svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ghw:hover .gdel,.gdel:focus-visible{opacity:1}
.gdel:hover{color:var(--bad);background:var(--bad-bg)}
@media(hover:none),(max-width:720px){.gdel{opacity:1}}

/* ---- dijalog (brisanje grupe) ---- */
.dlg{margin:auto;border:1px solid var(--line);border-radius:16px;padding:0;background:var(--surface);color:var(--ink);width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 32px);box-shadow:0 24px 70px #0005}
.dlg::backdrop{background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.dlg[open]{animation:enter .2s var(--ease)}
.dlg form{display:grid;gap:14px;padding:24px}
.dlg h2{font-size:1.15rem;letter-spacing:-.02em;overflow-wrap:anywhere;padding-right:4px}
.gd-opts{border:0;padding:0;display:grid;gap:10px;min-width:0}
.gd-opts legend{font-size:.8rem;font-weight:600;color:var(--mid);margin-bottom:8px;padding:0}
.opt{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.95rem;cursor:pointer}
.opt input{width:17px;height:17px;accent-color:var(--ink);flex:none;margin:0}
.opt.danger{color:var(--bad)}.opt.danger input{accent-color:var(--bad)}
.gd-opts .sel{margin-left:27px;width:calc(100% - 27px)}
.gd-opts .sel:disabled{opacity:.5;cursor:not-allowed}
.gd-sure{margin:0 0 0 27px;color:var(--bad);align-items:flex-start}.gd-sure input{margin-top:2px;accent-color:var(--bad)}
.dlg .err{color:var(--bad);font-size:.9rem;font-weight:500}.dlg .err:empty{display:none}
.dlg-acts{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:4px}
.btn.bad{background:var(--bad);color:var(--bg)}
@media(max-width:720px){.dlg form{padding:20px 18px}.dlg-acts .btn{flex:1}}

/* ---- vremenska crta ---- */
.tl-bar{justify-content:space-between}
.tl-bar .chk{margin-top:0}
.tl-note{min-height:0;margin:-8px 4px 6px}.tl-note:empty{display:none}
.tl-sec{margin-top:26px}
.tl-h{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:0 4px 10px;display:flex;align-items:center;gap:8px}
.tl-h em{font-style:normal;font-weight:600;font-size:.72rem;letter-spacing:0;background:var(--hover);color:var(--mid);padding:1px 8px;border-radius:99px}
.tl-sec.overdue{background:var(--bad-bg);border-radius:16px;padding:14px 12px 6px;margin:6px -12px 0}
.tl-sec.overdue .tl-chip{background:var(--surface)}
.tl-sec.overdue .tl-h{color:var(--bad)}
.tl-sec.overdue .tl-h em{background:var(--surface);color:var(--bad)}
.tl-list{list-style:none;padding:0;position:relative}
.tl-list::before{content:"";position:absolute;left:85px;top:10px;bottom:10px;width:2px;border-radius:2px;background:var(--line)}
.tl-item{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:58px 20px minmax(0,1fr) auto;gap:0 14px;align-items:center;padding:10px 12px 10px 4px;border-radius:12px;position:relative;transition:background .2s}
.tl-item:hover{background:var(--hover)}
.tl-sec.overdue .tl-item:hover{background:color-mix(in srgb,var(--surface) 55%,transparent)}
.tl-item:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.tl-day{text-align:right;line-height:1.1}
.tl-day b{display:block;font:600 1.3rem/1 var(--m);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.tl-day small{display:block;font-size:.74rem;color:var(--mid);margin-top:3px;white-space:nowrap}
.tl-dot{justify-self:center;width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--bg-c);position:relative;z-index:1}
.tl-sec.overdue .tl-dot{box-shadow:0 0 0 3px var(--bad-bg)}
.tl-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.tl-name{font-weight:600;font-size:1.02rem;letter-spacing:-.02em;overflow-wrap:anywhere;line-height:1.25}
.tl-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.86rem;color:var(--mid)}
.tl-chip{font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:6px;background:var(--bg-c);color:var(--c);white-space:nowrap}
.tl-rel{font:600 .86rem var(--f);color:var(--c);white-space:nowrap;text-align:right}
@media(max-width:720px){
  .tl-bar #tlf{width:100%}.tl-bar #tlf button{flex:1 1 auto;text-align:center;padding:7px 8px;font-size:.86rem}
  .tl-sec.overdue{margin:6px -8px 0;padding:12px 8px 4px}
  .tl-list::before{left:63px}
  .tl-item{grid-template-columns:44px 16px minmax(0,1fr);gap:0 10px;padding:10px 8px 10px 2px;align-items:start}
  .tl-dot{margin-top:5px}.tl-day{padding-top:1px}
  .tl-rel{grid-column:3;text-align:left;font-size:.8rem}
  .tl-day b{font-size:1.15rem}
}

/* ---- postavke: podaci (izvoz / uvoz) ----
   Svaki blok: naslov + opis, ispod jedan redak radnji poravnat lijevo; sve kontrole u retku iste visine (--ctl-h). */
.data{display:grid;gap:0;padding-top:6px;padding-bottom:6px}
.data-blk{display:grid;gap:14px;padding:18px 0}
.data-blk+.data-blk{border-top:1px solid var(--line)}
.data-txt{min-width:0;max-width:68ch}.data-txt b{font-size:1.02rem}.data-txt p{margin-top:4px;line-height:1.5}
.data-ctl{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px}
.filepick{display:flex;align-items:center;gap:12px;position:relative;min-width:0;max-width:100%}
.filepick input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip-path:inset(50%)}
.filepick input:focus-visible+label{outline:2px solid var(--ink);outline-offset:2px}
.filepick .fname{font-size:.86rem;color:var(--mid);min-width:0;max-width:26ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.data-ctl .chk{margin:0;min-height:var(--ctl-h)}
.dx-res{font-size:.9rem;padding:12px 14px;border-radius:10px;background:var(--hover);margin:4px 0 12px;overflow-wrap:anywhere}
.dx-res:empty{display:none}
.dx-res.ok{background:var(--ok-bg)}.dx-res.bad{background:var(--bad-bg);color:var(--bad)}.dx-res.wait{display:flex;align-items:center;gap:10px;color:var(--mid)}
.dx-res ul{margin:8px 0 0;padding-left:18px;display:grid;gap:3px}
.dx-res p+p{margin-top:6px}
@media(max-width:720px){
  .data-ctl{flex-direction:column;align-items:stretch;gap:10px}
  .data-ctl .btn,.filepick label{width:100%}
  .filepick{flex-direction:column;align-items:stretch;gap:6px}.filepick .fname{max-width:none;text-align:center}
  .data-ctl .chk{min-height:0;padding:4px 0}
}

/* ---- forma: ručni datum isteka, izvor datuma ---- */
.fhint{display:block;margin-top:6px;font-size:.8rem;color:var(--faint);line-height:1.4}
.xsrc{display:block;margin-top:3px;font-size:.74rem;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.head .date{min-width:0}
.xsrc-m{display:none}
@media(max-width:820px){.xsrc-m{display:inline}}
.noexp{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;padding:14px 16px;border-radius:12px;background:var(--soon-bg);color:var(--ink)}
.noexp p{font-size:.92rem;flex:1 1 280px;min-width:0}
.noexp-acts{display:flex;gap:10px;flex-wrap:wrap}
.noexp .btn.line{background:var(--surface)}
@media(max-width:720px){.noexp-acts{width:100%}.noexp-acts .btn{flex:1 1 auto}}

/* ---- vremenska crta: sljedeći podsjetnik kao sporedni redak registracije ---- */
/* desno: dan, točka, naziv i relativni rok u prvom retku; podsjetnik je drugi redak ispod naziva (na mobitelu ispod roka) */
.tl-day,.tl-dot,.tl-main,.tl-rel{grid-row:1}
.tl-next{grid-column:3/-1;grid-row:2;margin-top:3px;font-size:.8rem;color:var(--faint);line-height:1.35;display:flex;align-items:baseline;gap:6px}
@media(max-width:720px){.tl-rel{grid-row:2}.tl-next{grid-column:3;grid-row:3;margin-top:2px}}
.tl-next::before{content:"";width:6px;height:6px;border-radius:50%;border:1.5px solid currentColor;flex:none;transform:translateY(-1px)}

/* ---- postavke: registrari ---- */
.reg{display:grid;gap:16px}
.reg-intro{max-width:72ch;line-height:1.5}
.reg-list{display:grid;gap:10px}.reg-list:empty{display:none}
.reg-acc{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.reg-acc-txt{flex:1 1 240px;min-width:0;display:grid;gap:3px}
.reg-acc-txt b{font-size:1rem;overflow-wrap:anywhere}.reg-acc-txt b .muted{font-weight:500;font-size:.92rem}
.reg-acc-txt small{font-size:.84rem}
.reg-acc-txt .lasterr{margin-top:6px;overflow-wrap:anywhere}
.reg-acc-acts{display:flex;gap:10px;flex-wrap:wrap}
.reg .dx-res{margin:0}
.reg-res-acts{margin-top:12px}
.reg-form{display:grid;gap:14px;padding-top:16px;border-top:1px solid var(--line)}
.reg-form[hidden]{display:none}
.reg-form h3{font-size:1.02rem;letter-spacing:-.01em}
.reg-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.reg-fields{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}.reg-fields:empty{display:none}
.reg-hint{font-size:.86rem;color:var(--mid);line-height:1.5}
.reg-docs{font-weight:600;white-space:nowrap;text-underline-offset:3px}.reg-docs[hidden]{display:none}
.reg-sec{font-size:.84rem;color:var(--mid);background:var(--hover);border-radius:10px;padding:10px 14px;line-height:1.5}
.reg-form .err{font-size:.9rem;color:var(--bad);font-weight:500}.reg-form .err:empty{display:none}
@media(max-width:720px){
  .reg-grid,.reg-fields{grid-template-columns:1fr}
  .reg-acc{padding:14px}.reg-acc-acts{width:100%}.reg-acc-acts .btn{flex:1 1 auto}
  .reg-foot .btn,.reg-res-acts .btn{width:100%}
}