/* ui.css: base element styles and every c- component, taken from redizajn/v2/v2.html as of commit b8cc61b (the
   mockup after the 2026-11-04 review, DESIGN.md §0.9) with the site-specific additions marked "SITE:". One
   implementation per component: a page never re-declares a c- class or an element selector in its own stylesheet
   or <style> block (DESIGN.md §2, §12.15; dev/css-gate.py). The behaviours that the Pregled page (F4) first carried
   in pregled.css (two-part set pill, sortable heads, sticky action cell, popover placement, filter sheet, 44 px
   phone rules) live here now; pregled.css keeps only the page-only rules.
   Loads after legacy.css so the element rules here win over the old file by order; the control rules use
   :where() so that component rules (.c-search input …) still beat them. Tokens only: no literal colour here.
   Show/hide contract: layers shared with the shell (.c-scrim, .c-menu-sheet) toggle .open; page layers
   (.c-modal, .c-sheet, .c-pop, .c-batch, .c-band) and every other element a script hides use the hidden attribute,
   which the last rule of this file makes win over any display rule (see there). */

/* ---- base ---- */
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--t1);font:var(--fs-2)/1.5 var(--sans);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
a{color:var(--acc);text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
:where(body.shell-2) :is(h1,h2,h3,h4,p,ul,dl){margin:0}   /* SITE: the resets apply to the new shell only; old pages keep their paragraphs and lists */
:where(body.shell-2) ul{padding:0;list-style:none}
.i{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mono{font-family:var(--mono)}
.t2{color:var(--t2)} .t3{color:var(--t3)}
kbd{font:12px var(--mono);border:1px solid var(--line);border-radius:var(--r-1);padding:1px 5px;background:var(--s1);color:var(--t3);line-height:1.4}

/* base controls on ELEMENT selectors: no native control is ever unstyled; 16 px so iOS never zooms */
input:where(:not([type=checkbox],[type=radio],[type=range],[type=file])),select:where(:not([multiple])),textarea{
  font:inherit;font-size:var(--fs-in);color:var(--t1);background:var(--s1);border:1px solid var(--line-strong);border-radius:var(--r-2);
  height:var(--inp);padding:0 12px;margin:0;min-width:0}
input[type=file]{font:inherit;color:var(--t2);font-size:var(--fs-1)}
input::placeholder,textarea::placeholder{color:var(--t3)}
input:where(:not([type=checkbox],[type=radio])):focus,select:focus,textarea:focus{outline:2px solid var(--focus);outline-offset:-1px;border-color:transparent}
select:where(:not([multiple])){appearance:none;background-image:var(--chev);background-repeat:no-repeat;background-position:right 10px center;background-size:18px;padding-right:36px}
textarea{height:auto;min-height:120px;padding:10px 12px;line-height:1.6;resize:vertical}
textarea.mono{font:var(--fs-in)/1.6 var(--mono)}
/* checkbox and radio drawn the same way in both themes; padding:0 so a legacy `label > input` rule cannot stretch them */
input[type=checkbox],input[type=radio]{appearance:none;width:18px;height:18px;border:1.5px solid var(--line-strong);border-radius:var(--r-1);background:var(--s1);margin:0;padding:0;display:inline-grid;place-items:center;flex:none;cursor:pointer;vertical-align:-4px}
input[type=checkbox]:checked{background:var(--acc-fill);border-color:var(--acc-fill)}
input[type=checkbox]:checked::after{content:"";width:5px;height:9px;border:solid var(--on-acc);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-.5px,-1px)}
input[type=radio]{border-radius:50%}   /* SITE: radios were native in both themes */
input[type=radio]:checked{border-color:var(--acc-fill)}
input[type=radio]:checked::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--acc-fill)}
input[type=checkbox].c-sw{position:relative;width:40px;height:24px;border-radius:12px;border:none;background:var(--line-strong)}
input[type=checkbox].c-sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;border:none;background:var(--s1);transform:none;transition:transform .15s}
input[type=checkbox].c-sw:checked{background:var(--acc-fill)} input[type=checkbox].c-sw:checked::after{transform:translateX(16px)}
.c-cb{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-2);cursor:pointer}

/* ---- app shell: left menu + content (replaces header + tool row) ---- */
.c-app{display:grid;grid-template-columns:var(--nav) minmax(0,1fr);min-height:100vh}
.c-nav{background:var(--s1);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:14px 12px 16px;gap:4px;position:sticky;top:0;max-height:100vh;overflow:auto;scrollbar-width:thin}   /* SITE: sticky, scrolls on its own */
.c-brand{display:flex;align-items:center;color:var(--t1);padding:6px 8px 12px;text-decoration:none}   /* no logo, no mark (owner 03.11.2026): the wordmark is the only brand element */
.c-wm{font-weight:600;font-size:var(--fs-3);letter-spacing:.01em}
.c-wm span{font-weight:400;color:var(--t3);margin-left:6px}
.c-nsearch{position:relative;margin:0 4px 10px}
.c-nsearch input{width:100%;height:var(--ctl);padding:0 34px 0 36px;border-color:var(--line);background:var(--s2);font-size:var(--fs-2)}
.c-nsearch .i{position:absolute;left:11px;top:10px;color:var(--t3)}
.c-nsearch kbd{position:absolute;right:9px;top:9px}
.c-grp{margin-top:6px}
.c-grp h3{display:flex;align-items:center;justify-content:space-between;font-size:var(--fs-1);font-weight:500;color:var(--t3);padding:8px 8px 4px;cursor:pointer;user-select:none}
.c-grp h3 .i{width:14px;height:14px;color:var(--t3);transition:transform .15s}
.c-grp.shut h3 .i{transform:rotate(-90deg)}
.c-grp.shut ul{display:none}
.c-grp a{display:flex;align-items:center;gap:8px;height:38px;padding:0 10px;border-radius:var(--r-2);color:var(--t1);font-size:var(--fs-2);text-decoration:none;position:relative}
.c-grp a:hover{background:var(--s2)}
.c-grp a.on{background:var(--acc-soft);color:var(--acc);font-weight:500}
.c-grp a .n{margin-left:auto;font-family:var(--mono);font-size:var(--fs-1);color:var(--t3)}
.c-grp a.on .n{color:var(--acc)}
.c-grp .c-sub{list-style:none;margin:2px 0 6px;padding:0 0 0 12px;border-left:2px solid var(--line)}   /* pages of the active job that are still separate files */
.c-grp .c-sub a{height:34px;font-size:var(--fs-1);color:var(--t2)}
.c-grp .c-sub a.on{background:transparent;color:var(--acc);font-weight:500}
.c-grp a .n.hot{color:var(--err)}
.c-nav-foot{margin-top:auto;padding:12px 8px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;font-size:var(--fs-1);color:var(--t2)}
.c-nav-foot .row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px;flex-wrap:wrap}
.c-nav-foot .row>span:last-child{white-space:nowrap}   /* "admin · Odjava" stays one piece beside the red Produkcija tag; the row wraps instead */
.c-nav-foot b{font-weight:500;color:var(--t1);font-family:var(--mono)}   /* balance is an identifier-class value: mono (DESIGN §4) */
.c-env{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border:1px solid var(--line);border-radius:var(--r-1);font-size:var(--fs-0);font-weight:500;color:var(--t2);letter-spacing:.02em;white-space:nowrap}
.c-env i{width:7px;height:7px;border-radius:50%;background:var(--t3)}
.c-env.ote i{background:var(--warn)}
.c-env.prod{border-color:var(--err);color:var(--err)} .c-env.prod i{background:var(--err)}
.c-nav-foot a{color:var(--t2)} .c-nav-foot a:hover{color:var(--acc)}
.c-main{padding:20px 24px 48px;min-width:0}
/* phone top bar: shown only below 900 px */
.c-top{display:none;align-items:center;gap:10px;height:52px;padding:0 12px 0 16px;background:var(--s1);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}   /* SITE: sticky */
.c-top h2{font-size:var(--fs-3);font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-top .c-env{height:24px}
.c-top button{height:44px;width:44px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--s1);color:var(--t2);display:inline-flex;align-items:center;justify-content:center}   /* 44: touch target */

/* ---- frame + command bar ---- */
.c-frame{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-3);overflow:hidden}
.c-frame.env-ote{border-top:3px solid var(--warn)}
.c-frame.env-prod{border-top:3px solid var(--err)}
.c-frame + .c-frame{margin-top:20px}
.c-cmd{display:flex;align-items:center;gap:14px;padding:16px 20px 12px;flex-wrap:wrap}
.c-cmd h1{font-size:var(--fs-4);font-weight:600;line-height:1.3}
.c-cmd h2{font-size:var(--fs-3);font-weight:600}
.c-cmd .meta{color:var(--t2);font-size:var(--fs-1);display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.c-cmd .meta b{color:var(--t1);font-weight:500}
.c-cmd .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.c-band{display:flex;align-items:center;gap:10px;padding:0 20px;min-height:40px;font-size:var(--fs-1);border-bottom:1px solid var(--line)}
.c-band.err{background:var(--err-soft);color:var(--err)}
.c-band.warn{background:var(--warn-soft);color:var(--warn)}
.c-band b{font-weight:600}
.c-band a{margin-left:auto;color:inherit;text-decoration:underline;text-underline-offset:3px}

/* buttons: three kinds + danger; 36 px, 44 on touch rows */
.c-btn{height:var(--ctl);padding:0 14px;border:1px solid var(--line-strong);background:var(--s1);color:var(--t1);border-radius:var(--r-2);font-weight:500;font-size:var(--fs-2);font-family:inherit;display:inline-flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap;line-height:1;cursor:pointer}
.c-btn:hover{background:var(--s2);text-decoration:none}
.c-btn.pri{background:var(--acc-fill);border-color:var(--acc-fill);color:var(--on-acc)}
.c-btn.pri:hover{filter:brightness(1.08)}
.c-btn.ghost{border-color:transparent;background:transparent;color:var(--t2)}
.c-btn.ghost:hover{color:var(--t1);background:var(--s2)}
.c-btn.danger{background:var(--err);border-color:var(--err);color:var(--t-inv)}
.c-btn.sm{height:32px;padding:0 10px;font-size:var(--fs-1)}
.c-btn.tap{height:44px;padding:0 16px}
.c-btn:disabled,.c-btn.dis{color:var(--t3);border-color:var(--line);background:var(--s2);cursor:default}
.c-lnk{color:var(--acc);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--acc-line);background:none;border:none;padding:0;font:inherit;cursor:pointer}   /* a link or a button that looks like one */

/* filter bar: search, pills, column picker; no density switch */
.c-bar{display:flex;align-items:center;gap:8px;padding:0 20px 12px;flex-wrap:wrap}
.c-search{flex:1 1 300px;position:relative;min-width:240px;margin:0}
.c-search input{width:100%;padding:0 36px;border-color:var(--line);background:var(--s2)}
.c-search input:focus{background:var(--s1)}
.c-search .i{position:absolute;left:12px;top:11px;color:var(--t3)}
.c-search kbd{position:absolute;right:10px;top:10px}
.c-pill{height:var(--ctl);border:1px dashed var(--line-strong);border-radius:var(--r-2);padding:0 10px 0 12px;background:transparent;color:var(--t2);font-size:var(--fs-2);font-family:inherit;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer}
.c-pill:hover{border-style:solid;color:var(--t1)}
.c-pill .i{width:13px;height:13px;color:var(--t3)}
.c-pill.set{border-style:solid;border-color:var(--acc-line);background:var(--acc-soft);color:var(--acc);font-weight:500}
.c-pill.set em{font-style:normal;font-family:var(--mono);font-size:var(--fs-1);font-weight:500}
.c-pill.set .i{color:var(--acc)}
/* a set pill on the site is two controls (a button cannot hold a button): .lbl opens the popover, .x clears the filter */
.c-pill.set:has(>.lbl){padding:0}
.c-pill.set .lbl{all:unset;display:inline-flex;align-items:center;gap:6px;height:100%;padding:0 4px 0 12px;cursor:pointer}
.c-pill.set .x{display:inline-flex;align-items:center;height:100%;padding:0 10px 0 4px;color:var(--acc);text-decoration:none}
.c-pill.set .lbl:focus-visible,.c-pill.set .x:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:var(--r-1)}
.c-bar .end{margin-left:auto;display:flex;gap:8px}
.c-bar .end .c-btn b{font-weight:500;color:var(--acc)}

/* counted segments = the single metric primitive; the row WRAPS, it never hides a segment behind a scroll (2026-11-04: seven segments did not fit at 1470) */
.c-seg{display:flex;flex-wrap:wrap;gap:0 22px;padding:0 20px;border-bottom:1px solid var(--line)}
.c-seg a{padding:10px 2px 12px;color:var(--t2);font-size:var(--fs-2);position:relative;display:flex;gap:8px;align-items:center;white-space:nowrap;text-decoration:none}
.c-seg a b{font-weight:500;color:var(--t1);font-family:var(--mono);font-size:var(--fs-1)}
.c-seg a.zero b{color:var(--t3)}
.c-seg a:hover{color:var(--t1);text-decoration:none}
.c-seg a.on{color:var(--t1);font-weight:500}
.c-seg a.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--acc)}
.c-dot{width:8px;height:8px;border-radius:50%;background:var(--t3);flex:none;display:inline-block}
.c-dot.ok{background:var(--ok)} .c-dot.warn{background:var(--warn)} .c-dot.err{background:var(--err)}
.c-dot.hollow{background:transparent;border:1.5px solid var(--t3)}

/* batch bar: ink, above the table while rows are selected */
.c-batch{display:flex;align-items:center;flex-wrap:wrap;gap:2px;min-height:44px;padding:4px 10px 4px 20px;background:var(--ink);color:var(--on-ink);font-size:var(--fs-2)}
.c-batch b{font-weight:600;margin-right:12px;white-space:nowrap}
.c-batch a{color:inherit;text-decoration:none;padding:0 10px;height:32px;display:inline-flex;align-items:center;border-radius:var(--r-1);font-weight:500;white-space:nowrap}
.c-batch a:hover{background:color-mix(in srgb,var(--on-ink) 14%,transparent);text-decoration:none}
.c-batch .hint{color:var(--on-ink-2);font-size:var(--fs-1);margin-left:12px}
.c-batch .x{margin-left:auto;background:none;border:none;color:var(--on-ink-2);display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-1);font-family:inherit;height:32px;padding:0 8px;border-radius:var(--r-1);cursor:pointer}

/* table: 14 px cells, 42 px rows, six default columns */
.c-work{display:grid;grid-template-columns:minmax(0,1fr) 260px}
.c-work.norail{grid-template-columns:minmax(0,1fr)} .c-work.norail .c-rail{display:none}   /* no row selected: the rail is away and the table has the whole frame (MIGRACIJA-F4 rupa 11); the page script toggles it */
.c-scroll{overflow-x:auto}
.c-tbl{width:100%;border-collapse:collapse;min-width:720px}
.c-tbl thead th{position:sticky;top:0;z-index:2;background:var(--s1);text-align:left;font-size:var(--fs-1);font-weight:500;color:var(--t2);padding:10px 8px;border-bottom:1px solid var(--line);white-space:nowrap;user-select:none}
.c-tbl th.srt{color:var(--t1)}
.c-tbl th a{color:inherit;text-decoration:none}   /* sortable head: a real link */
.c-tbl th a.on{color:var(--t1)}
.c-tbl th a:hover{color:var(--t1);text-decoration:none}
.c-tbl th .i{width:13px;height:13px;vertical-align:-2px;margin-left:3px;color:var(--acc)}
.c-tbl th .i.up{transform:rotate(180deg)}
.c-tbl tbody td{height:var(--row);padding:0 8px;border-bottom:1px solid var(--line-2);vertical-align:middle;white-space:nowrap;font-size:var(--fs-cell)}
.c-tbl tbody tr:hover td{background:var(--s2)}
.c-tbl tbody tr.sel td{background:var(--acc-soft)}
.c-tbl tbody tr.sel td:first-child{box-shadow:inset 3px 0 var(--acc)}
.c-tbl tbody tr:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.c-tbl td.ck,.c-tbl th.ck{width:40px;padding-right:0}
/* when the table is short of room (rail open at 1470, long names) the one cell that gives way is td.wrap: its status
   flags drop under the status word; the domain name never breaks on the desk (names wrap only on the phone cards, before a dot) */
.c-tbl td.wrap{white-space:normal}
.c-tbl td.wrap .c-st{flex-wrap:wrap;row-gap:0} .c-tbl td.wrap .c-st small{white-space:nowrap}   /* the flags drop as one line (ellipsis), never as three */
.c-refs{display:inline-flex;flex-direction:column;line-height:1.35}   /* two WHMCS refs one under the other inside the 42 px row */
.c-tbl td.rg{max-width:180px;overflow:hidden;text-overflow:ellipsis}
.c-tbl td.num{text-align:right}
/* the action cell stays visible when the table is wider than the frame (rail open, long names): sticky on the right */
.c-tbl td.act,.c-tbl th.act{text-align:right;width:1%;position:sticky;right:0;background:var(--s1)}
.c-tbl td.act .c-btn.sm{padding:0 9px} .c-tbl td.act .c-btn.sm.ghost{padding:0 6px}
.c-tbl tbody tr:hover td.act{background:var(--s2)} .c-tbl tbody tr.sel td.act{background:var(--acc-soft)}
.c-scroll.ovf td.act,.c-scroll.ovf th.act{box-shadow:inset 1px 0 var(--line)}   /* the page script sets .ovf when the table overflows its frame */
.c-tbl tr.empty td{height:auto;padding:0}
.c-dom{font-family:var(--mono);font-size:var(--fs-cell);font-weight:500;color:var(--t1);text-decoration:none}
.c-dom i{font-style:normal;color:var(--t3);font-weight:400}
.c-dom:hover{text-decoration:underline;text-underline-offset:3px}
.c-st{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.c-st small{font-family:var(--mono);font-size:var(--fs-0);color:var(--t3);max-width:110px;overflow:hidden;text-overflow:ellipsis}   /* clientTransferProhibited must not widen the column (110: six columns beside the open rail at 1470); the full flag list sits in title */
.c-st.warn{color:var(--warn)} .c-st.err{color:var(--err)} .c-st.ok{color:var(--ok)}
.c-tag{display:inline-block;font-size:var(--fs-0);font-weight:500;padding:1px 6px;border:1px solid transparent;border-radius:var(--r-1);background:var(--s3);color:var(--t2);line-height:1.5;vertical-align:1px}
.c-tag.ok,.c-tag.warn,.c-tag.err{background:transparent;border-color:currentColor}
.c-tag.ok{color:var(--ok)} .c-tag.warn{color:var(--warn)} .c-tag.err{color:var(--err)} .c-tag.mono{font-family:var(--mono)}
.c-exp small{font-family:var(--mono);font-size:var(--fs-0);color:var(--t3);margin-left:6px}
.c-exp.soon,.c-exp.soon small{color:var(--warn)} .c-exp.past,.c-exp.past small{color:var(--err)}
.c-ref{font-family:var(--mono);font-size:var(--fs-1);color:var(--t1);text-decoration:none}
a.c-ref:hover{text-decoration:underline;text-underline-offset:3px}
.c-ref small{font-family:var(--sans);font-size:var(--fs-0);color:var(--t3);margin-left:4px}
.c-pager{display:flex;align-items:center;gap:14px;padding:10px 20px;border-top:1px solid var(--line);font-size:var(--fs-1);color:var(--t2);flex-wrap:wrap}
.c-pager b{color:var(--t1);font-weight:500}
.c-pager .ctrls{margin-left:auto;display:flex;gap:3px;align-items:center}
.c-keys{color:var(--t3);display:inline-flex;gap:5px;align-items:center;font-size:var(--fs-0)} .c-keys kbd{padding:0 4px}
.c-pb{min-width:32px;height:32px;padding:0 8px;border:1px solid var(--line);background:var(--s1);color:var(--t1);border-radius:var(--r-2);font-size:var(--fs-1);font-weight:500;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.c-pb .i{width:14px;height:14px}   /* prev/next are SVG icons, never ‹ › glyphs (DON'T 8) */
.c-pb:hover{background:var(--s2);text-decoration:none}
.c-pb.cur{background:var(--s3);border-color:var(--line-strong);font-weight:600}
.c-pb:disabled,.c-pb.dis{color:var(--t3);pointer-events:none}
select.sm{height:32px;padding:0 28px 0 8px;border-color:var(--line);font-size:var(--fs-1);background-size:14px;background-position:right 7px center}

/* side rail (quick look); "Otvori karticu" leads to the full card */
.c-rail{border-left:1px solid var(--line);background:var(--s2);padding:18px 18px 16px;display:flex;flex-direction:column;gap:16px;min-width:0;position:relative}
.c-rail .name{font-family:var(--mono);font-size:var(--fs-4);font-weight:500;line-height:1.3;overflow-wrap:normal}   /* on the scale (20), not 18; a long name breaks before a dot (<wbr>) or after a hyphen, never inside a label */
.c-rail .name{padding-right:28px}   /* room for the close button in the corner */
.c-rail .name.long{font-size:var(--fs-3)} .c-rail .name.longer{font-size:var(--fs-cell)}   /* one step down when the name would not fit the 196 px beside the close button at 20 px (over 16 characters), two steps over 20 */
.c-rail .name i{font-style:normal;color:var(--t3);font-weight:400}
.c-rail .puny{font:var(--fs-0) var(--mono);color:var(--t3);margin-top:2px}
.c-rail .st{margin-top:8px;display:flex;flex-direction:column;gap:4px;font-size:var(--fs-cell)}
.c-rail .tags{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.c-rail h4,.c-card h4{margin:0 0 6px;font-size:var(--fs-1);font-weight:500;color:var(--t2);display:flex;justify-content:space-between}
.c-rail h4 a,.c-card h4 a{font-weight:400;color:var(--t3);text-decoration:none}
.c-rail p{margin:0;font-size:var(--fs-cell)}
.c-rail .close{position:absolute;right:10px;top:10px}
.c-kv{display:grid;grid-template-columns:112px minmax(0,1fr);gap:6px 12px;font-size:var(--fs-cell);margin:0}
.c-kv dt{color:var(--t2)} .c-kv dd{margin:0;overflow-wrap:anywhere}
/* in the 260 px rail the pairs stack (label above value): a 112 px label column wrapped registrant names to four lines */
.c-rail .c-kv{grid-template-columns:1fr;gap:1px 0}
.c-rail .c-kv dt{font-size:var(--fs-1);margin-top:7px} .c-rail .c-kv dt:first-child{margin-top:0}
.c-ns{display:flex;justify-content:space-between;gap:8px;font:var(--fs-cell) var(--mono);padding:4px 0}
.c-ns span{color:var(--t3);font-family:var(--sans);font-size:var(--fs-0)}
.c-tl{position:relative;margin:8px 0 2px;height:84px}   /* 84 so a two-line label above the line never touches the end point */
.c-tl .line{position:absolute;left:4px;right:4px;top:38px;height:2px;background:var(--line-strong)}
.c-tl .grace{position:absolute;top:38px;right:4px;height:2px;background:repeating-linear-gradient(90deg,var(--warn) 0 4px,transparent 4px 8px)}
.c-tl .pt{position:absolute;top:33px;width:12px;height:12px;border-radius:50%;background:var(--s2);border:2px solid var(--t3);transform:translateX(-50%)}
.c-tl .pt.a{border-color:var(--ok);background:var(--ok);left:4px} .c-tl .pt.b{border-color:var(--warn)} .c-tl .pt.c{border-color:var(--err);right:-2px}
.c-tl .pt.now{border-color:var(--acc);background:var(--acc);width:8px;height:8px;top:35px}
.c-tl .lb{position:absolute;top:50px;transform:translateX(-50%);font-size:var(--fs-0);color:var(--t3);white-space:nowrap;text-align:center;line-height:1.3}
.c-tl .lb b{display:block;color:var(--t1);font-weight:500}
.c-tl .lb.up{top:0} .c-tl .lb.l{transform:none;left:0} .c-tl .lb.r{transform:translateX(-100%)} .c-tl .lb.r.up{left:100%}
/* the fixed positions above are classes; only the moving ones (today, expiry) are set by script through el.style.left */
.c-rail .acts{margin-top:auto;display:flex;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.c-rail .acts .c-btn{flex:1;justify-content:center}

/* domain card (full page): tabs, facts column, action column */
.c-card{display:grid;grid-template-columns:minmax(0,1fr) 340px}
.c-card .facts{padding:18px 20px 20px;display:flex;flex-direction:column;gap:22px;min-width:0}
.c-card .side{border-left:1px solid var(--line);background:var(--s2);padding:18px 20px;display:flex;flex-direction:column;gap:18px}
.c-card .side .c-btn.pri{width:100%;justify-content:center;height:44px;font-size:var(--fs-3)}
.c-card .price{display:flex;align-items:baseline;justify-content:space-between;font-size:var(--fs-cell)}
.c-card .price b{font-size:var(--fs-4);font-weight:600}
.c-card .sw-row{display:flex;align-items:center;gap:12px;font-size:var(--fs-cell)}
.c-card .sw-row p{color:var(--t2);font-size:var(--fs-1);margin-top:2px}
.c-card .sw-row>div{min-width:0}
.c-hist li{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:12px;padding:8px 0;border-bottom:1px solid var(--line-2);font-size:var(--fs-cell)}
.c-hist li:last-child{border-bottom:none}
.c-hist time{color:var(--t3);font-family:var(--mono);font-size:var(--fs-1)}
.c-hist span{color:var(--t3);font-size:var(--fs-1)}
.c-hist i{font-style:normal;font-family:var(--mono);font-size:var(--fs-1)}
.c-nstbl{width:100%;border-collapse:collapse}
.c-nstbl th{text-align:left;font-size:var(--fs-1);font-weight:500;color:var(--t2);padding:8px 10px 8px 0;border-bottom:1px solid var(--line)}
.c-nstbl td{padding:0 10px 0 0;height:var(--row);border-bottom:1px solid var(--line-2);font-size:var(--fs-cell);vertical-align:middle}
.c-nstbl td.h{font-family:var(--mono)}
.c-nstbl td.a{text-align:right;width:1%;white-space:nowrap}
.c-copy{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 8px;border:1px solid var(--line);border-radius:var(--r-1);background:var(--s1);color:var(--t2);font-size:var(--fs-0);vertical-align:middle;margin-left:6px}
.c-copy .i{width:13px;height:13px}

/* forms: running-head sections */
.c-fs{display:grid;grid-template-columns:200px minmax(0,1fr);gap:0 24px;padding:20px 0;border-bottom:1px solid var(--line)}
.c-fs:first-child{padding-top:4px}
.c-fs:last-of-type{border-bottom:none}
.c-fs h2{font-size:var(--fs-3);font-weight:600;line-height:1.3}
.c-fs .note{font-size:var(--fs-1);color:var(--t3);margin-top:4px;line-height:1.5;max-width:180px}
.c-fs .body{display:flex;flex-direction:column;gap:14px;min-width:0}
.c-fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.c-fld label{font-size:var(--fs-1);color:var(--t2);font-weight:500}
.c-fld .lab2{display:flex;justify-content:space-between;gap:12px}
.c-fld .lab2 span{font-weight:400;color:var(--t3)}
.c-hint{font-size:var(--fs-1);color:var(--t3)}
.c-fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;max-width:680px}
.c-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.w-xs{max-width:170px} .w-sm{max-width:240px} .w-md{max-width:400px} .w-lg{max-width:680px}
.c-segc{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-2);padding:3px;gap:2px;background:var(--s2)}
.c-segc button,.c-segc a{height:32px;padding:0 14px;border:1px solid transparent;border-radius:var(--r-1);background:transparent;color:var(--t2);font-weight:500;font-size:var(--fs-2);white-space:nowrap;display:inline-flex;align-items:center;text-decoration:none}   /* a job switch may hold links to sibling pages (Operacije) */
.c-segc button.on,.c-segc a.on{background:var(--s1);color:var(--t1);border-color:var(--line-strong)}
.c-segc a:hover{color:var(--t1)}
.c-segc button.on.warn{color:var(--warn)} .c-segc button.on.err{color:var(--err)}
details.c-why{font-size:var(--fs-1);color:var(--t3)}
details.c-why summary{cursor:pointer;color:var(--t2);list-style:none;display:inline-flex;gap:5px;align-items:center}
details.c-why summary::-webkit-details-marker{display:none}
details.c-why summary .i{width:13px;height:13px;color:var(--t3);transition:transform .15s} details.c-why[open] summary .i{transform:rotate(180deg)}   /* the disclosure shows it opens */
details.c-why p{margin:6px 0 0;max-width:62ch;line-height:1.55}
.c-runrow{display:flex;align-items:center;gap:14px;padding:14px 20px;border-top:1px solid var(--line);background:var(--s2);flex-wrap:wrap}
.c-runrow .c-btn.pri,.c-runrow .c-btn.danger{margin-left:auto}
.c-log{font-size:var(--fs-1)}
.c-log li{display:grid;grid-template-columns:80px 1fr;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.c-log li:last-child{border-bottom:none}
.c-log time{color:var(--t3);font-family:var(--mono);font-size:var(--fs-0);padding-top:2px}
.c-log b{font-weight:500}
.c-log span{color:var(--t3)}
.c-bulk{display:grid;grid-template-columns:minmax(0,1fr) 340px;border-top:1px solid var(--line)}
.c-form{padding:14px 20px 0}
.c-side{border-left:1px solid var(--line);background:var(--s2);padding:18px 20px;display:flex;flex-direction:column;gap:18px}
.c-side h3{margin:0 0 10px;font-size:var(--fs-1);font-weight:500;color:var(--t2)}
.c-side .c-fld + .c-fld{margin-top:10px}
.pc-note{display:none}   /* phone-only sentence on desktop-only blocks (odluke 9) */

/* results */
.c-res{border-top:1px solid var(--line)}
.c-res .c-cmd{padding-bottom:8px}
.c-sum{display:flex;gap:18px;padding:0 20px 12px;font-size:var(--fs-2);color:var(--t2);flex-wrap:wrap;align-items:center}
.c-sum b{color:var(--t1);font-weight:500;font-family:var(--mono);font-size:var(--fs-1)}
.c-prog{height:3px;background:var(--line-2);margin:0 20px 8px;border-radius:1px;overflow:hidden}
.c-prog i{display:block;height:100%;width:100%;background:var(--acc)}
.c-prog i.p60{width:60%}
.c-rt{width:100%;border-collapse:collapse;min-width:640px}
.c-rt th{text-align:left;font-size:var(--fs-1);font-weight:500;color:var(--t2);padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.c-rt th:first-child,.c-rt td:first-child{padding-left:20px;width:44px;color:var(--t3);font-family:var(--mono);font-size:var(--fs-1)}
.c-rt td{padding:9px 12px;border-bottom:1px solid var(--line-2);vertical-align:top;font-size:var(--fs-cell)}
.c-rt td.c{font-family:var(--mono);font-size:var(--fs-1);color:var(--t2)}
.c-rt td.d{color:var(--t2);white-space:normal}
.c-rt td.d i{font-style:normal;font-family:var(--mono);font-size:var(--fs-1);color:var(--t1)}
.c-rt tr.info td{color:var(--t3);font-size:var(--fs-1);background:var(--s2)}
.c-rt tr.err td.d{color:var(--err)}
.c-sselog{margin:0;padding:12px 20px 16px;font:13px/1.6 var(--mono);color:var(--t2);border-top:1px solid var(--line);background:var(--s2);white-space:pre-wrap}
.c-sselog b{font-weight:500;color:var(--t1)}
.c-sselog span{color:var(--t3)}

/* home (2026-11-04): six figures, two lists, one system list, nothing that repeats the left menu.
   .c-dir (tool directory), .c-days (seven bars), .c-pkv (Brojke) and .c-pulse are deleted: they were the launcher grid in text form. */
.c-home-top{display:flex;align-items:flex-start;gap:20px;padding:4px 0 16px;flex-wrap:wrap}
.c-home-top>div:first-child{flex:1 1 560px;min-width:0}
.c-now{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;min-height:44px;padding:8px 16px;background:var(--s1);border:1px solid var(--line);border-radius:var(--r-2);font-size:var(--fs-2)}
.c-now b{font-weight:600;margin-right:4px} .c-now .c-dom{font-size:var(--fs-2)} .c-now span{color:var(--t2)}
.c-bigsearch{flex:0 1 420px;position:relative;margin-left:auto;align-self:flex-start}
.c-bigsearch input{width:100%;height:44px;padding:0 44px;border-color:var(--line-strong);background:var(--s1)}
.c-bigsearch .i{position:absolute;left:14px;top:13px;color:var(--t3);width:18px;height:18px}
.c-bigsearch kbd{position:absolute;right:12px;top:13px}
.c-desk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.c-sec{margin-bottom:28px}
.c-rh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:8px;margin-bottom:2px;border-bottom:1px solid var(--line);font-size:var(--fs-3);font-weight:600;color:var(--t1)}
.c-rh a{font-weight:400;color:var(--t3);font-size:var(--fs-1);text-decoration:none;white-space:nowrap}
.c-rh a:hover{color:var(--acc)}
.c-ledger li{display:grid;grid-template-columns:56px 10px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line-2)}
.c-ledger li:last-child{border-bottom:none}
.c-ledger li>i{justify-self:center}
.c-ledger b{font-size:var(--fs-5);font-weight:600;text-align:right;line-height:1;color:var(--t1)}   /* 24, on the scale */
.c-ledger li.zero b{color:var(--t3);font-weight:500}
.c-ledger .cap{display:flex;align-items:center;gap:8px;font-size:var(--fs-2);color:var(--t1);text-decoration:none;min-width:0;flex-wrap:wrap}
.c-ledger .cap small{color:var(--t3);font-size:var(--fs-1);margin-left:2px}
.c-ledger .go{font-size:var(--fs-1);color:var(--t3);text-decoration:none;white-space:nowrap}
.c-ledger .go:hover{color:var(--acc)}
.c-dlist li{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:var(--fs-2);border-bottom:1px solid var(--line-2)}
.c-dlist li:last-child{border-bottom:none}
.c-dlist li>span:last-child{margin-left:auto;color:var(--t3);font-size:var(--fs-1);white-space:nowrap}   /* only the trailing meta span is pushed right; a .c-st span stays left */
.c-dlist li.more{color:var(--t3);font-size:var(--fs-1);border-bottom:none}
/* a list row with an action: name on line 1, meta on line 2, the button on the right spanning both (no more right-aligned meta wrapping to four lines) */
.c-dlist li:has(.c-btn){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center}
.c-dlist li:has(.c-btn) .c-dom{grid-column:1}
.c-dlist li:has(.c-btn)>span{grid-column:1;margin-left:0;white-space:normal;text-align:left}
.c-dlist li:has(.c-btn) .c-btn{grid-column:2;grid-row:1/span 2}
.c-foot{color:var(--t3);font-size:var(--fs-1);padding:28px 0 0;display:flex;gap:14px}
.c-foot b{font-weight:500;color:var(--t2)}

/* floating layers (the only shadowed surfaces); .inline renders them in the flow for the mockup */
.c-pw{position:relative}   /* the wrapper a popover is anchored to */
.c-pop{position:absolute;z-index:30;top:calc(100% + 6px);left:0;min-width:240px;max-width:340px;background:var(--s1);border:1px solid var(--line);border-radius:var(--r-3);box-shadow:var(--shadow-pop);padding:6px}
.c-pop.right{left:auto;right:0}
.c-pop .list{display:flex;flex-direction:column;gap:1px;max-height:60vh;overflow:auto}
.c-pop .opt{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 10px;border-radius:var(--r-1);font-size:var(--fs-2);color:var(--t1);text-decoration:none;white-space:nowrap}
.c-pop .opt:hover{background:var(--s2);text-decoration:none} .c-pop .opt.on{background:var(--acc-soft);color:var(--acc)} .c-pop .opt span{color:var(--t3);font-size:var(--fs-1);font-family:var(--mono)}
.c-pop .opt.mono{font-family:var(--mono)}
.c-pop .opt.c-cb{justify-content:flex-start;gap:10px;cursor:pointer}
.c-pop .sep{border-top:1px solid var(--line);margin:4px 0}
.c-pop .foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 10px 4px;margin-top:4px;border-top:1px solid var(--line);font-size:var(--fs-1);color:var(--t3)}
.c-pop .range{display:flex;gap:8px;align-items:end;flex-wrap:wrap;padding:8px 10px 6px;margin-top:4px;border-top:1px solid var(--line)}
.c-pop .range label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-1);color:var(--t2)}
.c-pop .range input{height:32px;font-size:var(--fs-1);padding:0 8px;width:150px}
.c-scrim{display:none;position:fixed;inset:0;z-index:40;background:var(--scrim)}
.c-scrim.open{display:block}
.c-modal{position:fixed;z-index:41;left:50%;top:12vh;transform:translateX(-50%);width:min(600px,calc(100% - 32px));background:var(--s1);border:1px solid var(--line);border-radius:var(--r-3);box-shadow:var(--shadow-pop)}
.c-modal.inline{position:static;transform:none;margin:20px 0 0}
.c-modal .c-cmd{padding:16px 20px 10px} .c-modal .body{padding:0 20px 16px;display:flex;flex-direction:column;gap:14px} .c-modal .acts{display:flex;gap:8px;justify-content:flex-end;padding:12px 20px;border-top:1px solid var(--line);flex-wrap:wrap}
.c-modal .body .c-kv{grid-template-columns:150px minmax(0,1fr)}
.c-modal textarea{width:100%;min-height:200px}
.c-sheet{position:fixed;z-index:41;left:0;right:0;bottom:0;max-height:80vh;overflow:auto;background:var(--s1);border-top:1px solid var(--line);border-radius:var(--r-3) var(--r-3) 0 0;box-shadow:var(--shadow-pop)}
.c-sheet.inline{position:static;max-height:none;margin-top:16px;border:1px solid var(--line);border-radius:var(--r-3)}
.c-sheet .body{padding:0 16px 24px}
.c-sheet h3{font-size:var(--fs-1);font-weight:500;color:var(--t3);margin:14px 0 4px}
.c-sheet .opt{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;color:var(--t1);text-decoration:none;border-bottom:1px solid var(--line-2);font-size:var(--fs-2)}
.c-sheet .opt.on{color:var(--acc);font-weight:500} .c-sheet .opt span{color:var(--t3);font-family:var(--mono);font-size:var(--fs-1)}
.c-sheet .range{display:flex;gap:8px;align-items:end;flex-wrap:wrap;padding:10px 0}
.c-sheet .range label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-1);color:var(--t2)}
.c-sheet .range input{height:40px;width:150px}
.c-sheet .foot{display:none}
.c-flash{display:flex;align-items:center;gap:10px;padding:0 20px;height:40px;font-size:var(--fs-1);color:var(--t2);border-bottom:1px solid var(--line)}
.c-flash.ok{color:var(--ok)} .c-flash.err{color:var(--err)}
.c-empty{padding:48px 20px;text-align:center;color:var(--t2);font-size:var(--fs-2);white-space:normal} .c-empty .c-btn{margin-top:12px}
.c-menu-sheet{padding:8px 16px 20px}
.c-menu-sheet h3{font-size:var(--fs-1);font-weight:500;color:var(--t3);margin:14px 0 4px}
.c-menu-sheet a{display:flex;justify-content:space-between;padding:11px 0;color:var(--t1);text-decoration:none;border-bottom:1px solid var(--line-2);font-size:var(--fs-2)}
.c-menu-sheet a .n{font-family:var(--mono);color:var(--t3);font-size:var(--fs-1)}
.c-menu-sheet a.on{color:var(--acc);font-weight:500}
/* phone bottom action bar */
.c-botbar{display:none}

/* utilities */
.u-col6{display:flex;flex-direction:column;gap:6px} .u-mt-6{margin-top:-6px} .u-mt8{margin-top:8px} .u-mt10{margin-top:10px} .u-mt14{margin-top:14px} .u-mt20{margin-top:20px}
.u-ml0{margin-left:0} .u-ml8{margin-left:8px} .u-ml-auto{margin-left:auto} .u-gap10{gap:10px} .u-i13 .i,.i.u-i13{width:13px;height:13px}
.u-fs13{font-size:var(--fs-1)} .u-lab{color:var(--t2);font-weight:500} .u-dots{padding:0 4px;line-height:32px} .u-w170{max-width:170px} .u-w150{max-width:150px}
.u-rec{font-weight:500} .u-note{font-size:var(--fs-1);color:var(--t3)}

/* ---- responsive ---- */
@media (max-width:1180px){
  .c-desk{grid-template-columns:1fr 1fr}
  .c-work{grid-template-columns:1fr}
  .c-rail{border-left:none;border-top:1px solid var(--line)}
  .c-card{grid-template-columns:1fr}
  .c-card .side{border-left:none;border-top:1px solid var(--line)}
}
@media (max-width:1000px){
  .c-bulk{grid-template-columns:1fr}
  .c-side{border-left:none;border-top:1px solid var(--line)}
  .c-fs{grid-template-columns:1fr;gap:8px}
  .c-fs .note{max-width:none}
}
@media (max-width:900px){
  .c-grp .c-sub a{height:44px;font-size:var(--fs-2)}
  .c-form .c-btn{height:44px}   /* thumb targets in forms */
  .c-empty .c-btn{height:44px;padding:0 14px;font-size:var(--fs-2)}   /* "Poništi filtere", the empty card's buttons */
  .c-cb{min-height:44px}   /* a checkbox / radio / switch row is a thumb target */
  details.c-why summary{min-height:44px}
  .c-pill,.c-pill.set .lbl{height:44px}   /* set pills stay in the band on the phone (DESIGN 0.9) */
  .c-pill.set .x{min-width:44px;justify-content:center;padding:0 8px}   /* the one touch that clears a filter */
  /* a pill's popover on the phone: anchored to the bar, full width, scrolls inside; 44 px options and fields */
  .c-bar{position:relative} .c-bar .c-pw{position:static}
  .c-bar .c-pop,.c-bar .c-pop.right{left:16px;right:16px;min-width:0;max-width:none;max-height:70vh;overflow:auto}
  .c-pop .opt{min-height:44px} .c-pop .range input{height:44px;font-size:var(--fs-in);width:100%} .c-pop .range label{flex:1 1 140px} .c-pop .range .c-btn{height:44px}
  .c-app{grid-template-columns:minmax(0,1fr);min-height:0}
  .c-nav{display:none}
  .c-top{display:flex}
  .c-main{padding:12px 0 88px}
  .c-frame{border-left:none;border-right:none;border-radius:0;overflow:clip}   /* clip, not hidden: a sticky .c-botbar inside must follow the viewport, and overflow:hidden would make the frame its scroll container */
  .c-frame + .c-frame{margin-top:12px}
  .c-cmd{padding:14px 16px 10px}
  .c-cmd h1{font-size:var(--fs-4)}
  .c-cmd .meta{font-size:var(--fs-1)}
  .c-cmd .acts{margin-left:0;width:100%}
  .c-cmd .acts .c-btn{height:44px}
  .c-sheet .c-cmd>.c-btn,.c-modal .c-cmd>.c-btn{height:44px;min-width:44px;padding:0 12px;justify-content:center}   /* the X of a sheet or modal */
  .hm{display:none}   /* anything marked .hm is a desk-only thing: table columns, secondary command-bar buttons, "Kolone", "Masovna provera" */
  .c-search kbd,.c-bigsearch kbd,.c-bigin kbd{display:none}   /* no keyboard on the phone; the drawer's .c-nsearch keeps its kbd on purpose */
  .c-bar{padding:0 16px 10px} .c-bar .c-search{flex-basis:100%} .c-bar .c-search input{height:44px}
  .c-bar .c-pill{display:none} .c-bar .c-pill.keep{display:inline-flex}   /* only SET pills stay visible; the rest sit behind "Filteri" at the right of the same row */
  .c-bar .end{margin-left:auto} .c-bar .end .c-btn{height:44px}
  .c-seg,.c-pager{padding-left:16px;padding-right:16px}
  .c-batch{display:none}   /* checkboxes are hidden on the phone, so the selection bar has nothing to act on; list operations are a desk job (mapa 2.3) */
  .c-tbl{min-width:0} .c-tbl thead{display:none}
  .c-tbl tbody td{height:auto;padding:12px 16px;white-space:normal}
  .c-tbl tbody td.ck{display:none}
  .c-tbl td.act,.c-tbl th.act{position:static}
  .c-tbl.cards,.c-tbl.cards tbody{display:block}
  .c-tbl.cards tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;border-bottom:1px solid var(--line-2)}
  .c-tbl.cards tbody tr.empty{display:block}
  .c-tbl.cards tbody td{display:block;grid-column:1;border-bottom:none;padding:4px 16px;background:transparent}
  .c-tbl.cards tbody td.hm,.c-tbl.cards tbody td.ck{display:none}   /* phone row = domain · expiry · status word (obrasci 19) */
  .c-tbl.cards tbody td:first-of-type,.c-tbl.cards tbody td.ck + td{padding-top:12px} .c-tbl.cards tbody td:last-of-type{padding-bottom:12px}
  .c-tbl.cards tbody td.act{grid-column:2;grid-row:1/span 3;align-self:center;padding-top:12px;display:flex;align-items:center}
  .c-tbl.cards tbody td.act .c-btn{height:44px;padding:0 14px;font-size:var(--fs-2);border-color:var(--line-strong);color:var(--t1)}   /* every per-row action is a 44 px target on the phone (DESIGN 0.1); a ghost button gets its border back so the target is visible */
  .c-tbl.cards tbody td.act .c-btn.sm.ghost{padding:0 14px;min-width:44px;justify-content:center}   /* beats the desk rule .c-tbl td.act .c-btn.sm.ghost{padding:0 6px}: an icon-only "Još radnji" is 44 px wide */
  .c-tbl.cards tbody tr.sel{background:var(--acc-soft);box-shadow:inset 3px 0 var(--acc)} .c-tbl.cards tbody tr.sel td,.c-tbl.cards tbody tr.sel td:first-child{background:transparent;box-shadow:none}
  .c-tbl.cards tbody tr:hover td{background:transparent}
  .c-tbl.cards tbody td.d{display:block;grid-column:1;color:var(--t2);font-size:var(--fs-1)}   /* Nadzor: the reason a job failed must be readable on the phone */
  .c-tbl.cards .c-dom{font-size:var(--fs-2)}
  .c-rail{display:none}
  .c-pager .ctrls{margin-left:0;width:100%;flex-wrap:wrap} .c-pb{min-width:44px;height:44px} select.sm{height:44px;font-size:var(--fs-in)}   /* the per-page select: 16 px so iOS does not zoom */
  .c-card .facts,.c-card .side{padding:16px}
  .c-card .side .c-btn.pri{display:none}
  .c-botbar{display:flex;gap:8px;padding:12px 16px;background:var(--s1);border-top:1px solid var(--line);position:sticky;bottom:0}   /* SITE: sticky (DESIGN 0.5) */
  .c-botbar .c-btn{flex:1;justify-content:center;height:48px;font-size:var(--fs-3)}
  .c-form,.c-side{padding-left:16px;padding-right:16px}
  .c-fgrid{grid-template-columns:1fr}
  .c-segc{flex-wrap:wrap}
  .c-segc button,.c-segc a{height:44px}   /* thumb target */
  .c-home-top{padding:0 16px 14px;gap:10px}
  .c-now{padding:8px 12px}
  .c-bigsearch{margin:0;max-width:none;flex-basis:100%}
  .c-desk{grid-template-columns:1fr;gap:20px;padding:0 16px}
  .c-desk>div,.c-sec{min-width:0}
  .c-dlist li>span:last-child{white-space:normal;text-align:right}
  .c-dlist .c-btn{height:44px;padding:0 14px;font-size:var(--fs-2)}
  /* text links that are the only target of their row are 44 px tall: "u 30 dana N", "+ još N", "Prebaci na OTE" */
  .c-rh a,.c-dlist li.more a,.c-dlist li>a.c-st,.c-band a{display:inline-flex;align-items:center;min-height:44px}
  .c-rh{align-items:center} .c-band{min-height:44px}
  .c-ledger li{grid-template-columns:48px 10px minmax(0,1fr) auto}
  .c-foot{padding:24px 16px 0}
  .c-modal{top:4vh}
  .c-modal .body .c-kv{grid-template-columns:1fr;gap:2px 0} .c-modal .body .c-kv dt{font-size:var(--fs-1);margin-top:8px} .c-modal .body .c-kv dt:first-child{margin-top:0}   /* pairs stack: a 150 px label column left 141 px for "1.700 RSD bez PDV-a" and nameservers */
  .c-modal.inline{margin:12px 0 0;border-left:none;border-right:none;border-radius:0}
  .c-modal .acts .c-btn{flex:1;justify-content:center;height:48px}
  .c-runrow{padding:12px 16px} .c-runrow .c-btn{height:48px} .c-runrow .c-btn.pri,.c-runrow .c-btn.danger{margin-left:0;width:100%;justify-content:center}
  .pc-only{display:none} .pc-note{display:block;color:var(--t2);font-size:var(--fs-2)}   /* dangerous actions are read-only on the phone (odluke 9) */
}
/* home: two phone entries (flows a and c); flow b is the big search above them. On desktop they are plain buttons. */
.c-flows{display:flex;gap:8px;flex-wrap:wrap;padding:0 0 20px}
.c-flows .c-btn{flex:1 1 200px;justify-content:center;max-width:420px}
.c-home-head{display:flex;align-items:baseline;gap:12px;padding:4px 0 14px;flex-wrap:wrap}
.c-home-head h1{font-size:var(--fs-4);font-weight:600}
.c-home-head span{color:var(--t3);font-size:var(--fs-1)}
.c-tbl td.d{white-space:normal;min-width:180px}   /* Nadzor: the reason / note cell; 180 so the seven RNIDS columns fit at 1470 (260 pushed the table 70 px past the frame) */
.c-tbl td.d i{font-style:normal;font-family:var(--mono);font-size:var(--fs-1)}
@media (max-width:900px){
  .c-home-head{padding:0 16px 10px}
  .c-flows{padding:0 16px 14px} .c-flows .c-btn{max-width:none}
  .c-tbl td.d{min-width:0}
  .c-tbl.cards tbody td.act{grid-row:1/span 4}
}
/* D/E additions: result rows of Dodaj domen and the queue block of Lov */
.c-avail{width:100%;border-collapse:collapse}
.c-avail td{padding:0 8px;height:var(--row);border-bottom:1px solid var(--line-2);font-size:var(--fs-cell);vertical-align:middle;white-space:nowrap}
.c-avail td.p{text-align:right;font-variant-numeric:tabular-nums}
.c-avail td.p small,.c-avail td.r small{display:block;font-size:var(--fs-0);color:var(--t3);line-height:1.2}   /* second line: renewal price · other registrars (so the row fits beside the 340 px summary) */
.c-avail td.r b{font-weight:500}
.c-avail tr.exact td{background:var(--acc-soft)}
.c-avail tr.exact td:first-child{box-shadow:inset 3px 0 var(--acc)}
.c-avail tr.taken td,.c-avail tr.taken .c-dom{color:var(--t3)}
.c-avail td.act{text-align:right;width:1%;padding-right:12px}
.c-bigin{position:relative;max-width:680px}
.c-bigin input{width:100%;height:48px;font-size:var(--fs-4);padding:0 48px 0 14px;font-family:var(--mono);font-weight:500}
.c-bigin kbd{position:absolute;right:12px;top:15px}
.c-sumkv{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px 12px;font-size:var(--fs-cell)}
.c-sumkv dt{color:var(--t2)} .c-sumkv dd{margin:0;overflow-wrap:anywhere}
.c-sumkv dd select{width:100%}
.c-total{display:flex;align-items:baseline;justify-content:space-between;padding-top:12px;border-top:1px solid var(--line);font-size:var(--fs-cell)}
.c-total b{font-size:var(--fs-4);font-weight:600}
.c-botbar .sum{flex:1;display:flex;flex-direction:column;justify-content:center;font-size:var(--fs-1);color:var(--t2);min-width:0}
.c-botbar .sum b{font-size:var(--fs-3);color:var(--t1);font-family:var(--mono);font-weight:500;overflow-wrap:break-word}   /* name on line 1, amount on line 2: nothing truncates; the production confirmation carries the amount */
.c-botbar .sum~.c-btn{flex:0 0 auto;min-width:132px}
.c-form.flush{padding:0}
.c-lead{padding:4px 20px 14px;font-size:var(--fs-2);color:var(--t2)} .c-lead b{color:var(--t1);font-weight:500}
.c-queue{padding:0 20px 8px} .c-queue .c-dlist li{padding:8px 0}
@media (max-width:900px){
  /* result rows become cards: name · status · price on the left, a 44 px "Izaberi" on the right (flow c needs a choice on the phone too) */
  .c-avail,.c-avail tbody{display:block}
  .c-avail tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;border-bottom:1px solid var(--line-2)}
  .c-avail td{display:block;grid-column:1;height:auto;border-bottom:none;padding:3px 16px;white-space:normal}
  .c-avail td.hm{display:none}
  .c-avail td:first-child{padding-top:10px}
  .c-avail td.p{text-align:left;padding-bottom:10px} .c-avail td.p small{display:inline;margin-left:6px;white-space:nowrap}
  .c-avail td.act{grid-column:2;grid-row:1/span 3;align-self:center;display:flex;align-items:center;padding:0 16px 0 8px;width:auto}
  .c-avail td.act .c-btn{height:44px;padding:0 14px;font-size:var(--fs-2)}
  .c-avail tr.exact{background:var(--acc-soft);box-shadow:inset 3px 0 var(--acc)} .c-avail tr.exact td{background:transparent;box-shadow:none}
  .c-tbl.cards td.act .c-tag{white-space:nowrap} .c-bigin{max-width:none} .c-bigin input{font-size:var(--fs-3)}
  .c-lead,.c-queue{padding-left:16px;padding-right:16px}
  .c-queue .c-btn{height:44px;padding:0 14px;font-size:var(--fs-2)}
}
/* F/H additions: the one-field answer bar and the running job line (tokens only) */
.c-bar .c-fld.c-grow{flex:1 1 360px}
.c-bar .c-fld{align-self:flex-end}
.c-bar .c-hint{align-self:flex-end;padding-bottom:9px}
.c-job{display:flex;align-items:center;gap:12px;padding:0 20px 10px;font-size:var(--fs-1);color:var(--t2)}
.c-job b{color:var(--t1);font-weight:500}
@media (max-width:900px){.c-bar .c-fld.c-grow{flex-basis:100%}.c-job{padding:0 16px 10px}}
.c-segc.c-wrap-seg{flex-wrap:wrap}
@media (max-width:900px){
  .c-tbl.cards tbody td.num{text-align:left}
  /* Operacije result rows on the phone: number · domain · outcome on line 1, the detail sentence under them; the EPP code column is hidden */
  .c-rt{min-width:0} .c-rt thead{display:none}
  .c-rt tbody tr{display:grid;grid-template-columns:28px minmax(0,1fr) auto;border-bottom:1px solid var(--line-2)}
  .c-rt td{border-bottom:none;padding:10px 8px 2px}
  .c-rt td:first-child{padding-left:16px;width:auto;grid-row:1/span 2}
  .c-rt td.c{display:none}
  .c-rt td.d{grid-column:2/4;padding:0 16px 10px 8px}
  .c-rt tr.info td[colspan]{grid-column:2/4;padding-bottom:10px}
  .c-res .c-cmd .acts .c-btn{height:44px;font-size:var(--fs-2)}   /* "Izvrši" is an EPP write: 44 px */
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* ---- SITE additions (not in the mockup): the icon sprite, the phone menu drawer, its scrim, the group toggles ---- */
.c-sprite{position:absolute;width:0;height:0;overflow:hidden}
.c-grp h3{border-radius:var(--r-2)}
.c-grp h3:focus-visible{outline-offset:-2px}
.c-sheet.c-menu-sheet{display:none}
body.c-noscroll{overflow:hidden}
.c-menu-sheet .head{display:flex;align-items:center;justify-content:space-between;gap:10px;height:52px;margin:-8px -16px 0;padding:0 12px 0 16px;border-bottom:1px solid var(--line)}
.c-menu-sheet .head b{font-weight:600;font-size:var(--fs-3)}
.c-menu-sheet .head button{height:44px;width:44px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--s1);color:var(--t2);display:inline-flex;align-items:center;justify-content:center}
/* everything in the drawer is a thumb target: 44 px rows and heads, a 16 px search field (iOS zooms below that) */
.c-menu-sheet .c-nsearch{margin:12px 0 4px}
.c-menu-sheet .c-nsearch input{height:44px;font-size:var(--fs-in)}
.c-menu-sheet .c-nsearch .i{top:14px} .c-menu-sheet .c-nsearch kbd{top:13px}
.c-menu-sheet .c-grp h3{min-height:44px;padding-top:12px;padding-bottom:8px}
.c-menu-sheet .c-grp a{height:44px;border-bottom:none}
.c-menu-sheet .c-nav-foot{margin-top:16px;padding:12px 0 0}
.c-menu-sheet .c-nav-foot .row{min-height:44px}
.c-menu-sheet .c-nav-foot a{padding:0;display:inline-flex;align-items:center;min-height:44px;border:none}   /* Odjava is a 44 px target like every other row of the drawer */
@media (max-width:900px){
  .c-sheet.c-menu-sheet.open{display:block}   /* the drawer exists only on the phone; above 900 px the script closes it */
}
/* a shell-2 page that still prints the old h1 (layout_start option cmd=>false) */
body.shell-2 h1.page-title{font-size:var(--fs-4);font-weight:600;letter-spacing:0;margin:0 0 16px}
/* The hidden attribute wins over EVERY display rule, whatever its specificity: a bare [hidden] (0,1,0) lost to compound
   rules such as .c-tbl.cards tbody tr (0,2,2) or .fx .c-tbl.cards tbody tr.fx-grp (0,4,2), so a filtered row stayed
   visible on the phone. !important is the one durable answer (no future selector can beat it); dev/css-gate.py allows
   it for this rule only. The one legitimate override is a script that shows an element through el.style.display
   (app.js and #resultsCard), hence :not([style*="display"]): an inline display beats the attribute, nothing else does. */
[hidden]:not([style*="display"]){display:none !important}