/* Wygląd z obieg.smartfile.pl (nowy wygląd html.ui2) — skopiowany 1:1 z views/app.html, żeby Kancelaria wyglądała tak samo. */
:root{
  --bg:#e8ebef; --chrome:#f6f7f9; --panel:#ffffff; --line:#d2d7de; --line-soft:#e7eaee;
  --text:#1d2430; --muted:#687386; --faint:#9aa3b1;
  --accent:#1a73c9; --accent-soft:#e4effa; --brand:#c4122f; --warn:#b26a00; --warn-soft:#fff4e0; --ok:#2e7d32; --ok-soft:#e8f5e9; --err-soft:#fdecee;
  --canvas:#ffffff; --grid:#eef1f5; --node:#ffffff; --lane-head:#fafbfc; --sel:#1a73c9;
  --c-start:#e3b100; --c-inter:#9aa7c6; --c-pos:#43a047; --c-neg:#e53935; --c-sys:#4f7fe0; --c-flow:#b3bac5;
  --p-blue:#1e88e5; --p-green:#7cb342; --p-red:#d81b3c; --p-grey:#9aa3ae; --p-orange:#ef8a00; --p-violet:#7e57c2;
  --shadow:0 6px 18px rgba(20,30,45,.14);
  --font:"Segoe UI","Selawik","Noto Sans",system-ui,-apple-system,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14181e; --chrome:#1b2028; --panel:#20262f; --line:#343c48; --line-soft:#2a313b;
    --text:#e2e6ec; --muted:#9aa4b4; --faint:#6d7787;
    --accent:#5aa9f0; --accent-soft:#1d3246; --warn:#f0b24a; --warn-soft:#3a2d14; --ok:#6ccf73; --ok-soft:#1c3320; --err-soft:#3d1c22;
    --canvas:#1a1f26; --grid:#212731; --node:#232a34; --lane-head:#1f252e; --sel:#5aa9f0;
    --c-inter:#7f8db0; --c-flow:#5d6674; --p-grey:#77808c;
    --shadow:0 6px 18px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --bg:#14181e; --chrome:#1b2028; --panel:#20262f; --line:#343c48; --line-soft:#2a313b;
  --text:#e2e6ec; --muted:#9aa4b4; --faint:#6d7787;
  --accent:#5aa9f0; --accent-soft:#1d3246; --warn:#f0b24a; --warn-soft:#3a2d14; --ok:#6ccf73; --ok-soft:#1c3320; --err-soft:#3d1c22;
  --canvas:#1a1f26; --grid:#212731; --node:#232a34; --lane-head:#1f252e; --sel:#5aa9f0;
  --c-inter:#7f8db0; --c-flow:#5d6674; --p-grey:#77808c;
  --shadow:0 6px 18px rgba(0,0,0,.45);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{background:var(--bg);color:var(--text);font:13px/1.4 var(--font);overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
svg.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
#app{height:100%;display:flex;flex-direction:column}

/* title bar + ribbon */
.titlebar{height:34px;display:flex;align-items:center;gap:10px;padding:0 12px;background:var(--panel);border-bottom:1px solid var(--line)}
.logo{width:22px;height:22px;border-radius:50%;border:2px solid var(--muted);display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--muted)}
.titlebar .ttl{flex:1;text-align:center;font-size:14px}
.titlebar .who{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.seg button{border:0;background:transparent;padding:3px 10px;font-size:12px;color:var(--muted)}
.seg button.on{background:var(--accent);color:#fff}
.ribbon{display:flex;align-items:stretch;background:var(--chrome);border-bottom:1px solid var(--line);min-height:70px;overflow-x:auto}
.rgroup{display:flex;align-items:stretch;gap:2px;padding:6px 8px 4px;border-right:1px solid var(--line-soft);position:relative}
.rgroup .rlabel{position:absolute;bottom:1px;left:0;right:0;text-align:center;font-size:10px;color:var(--faint)}
.rbtn{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;min-width:62px;padding:4px 6px 12px;border:1px solid transparent;border-radius:3px;background:transparent;font-size:11px;line-height:1.15;color:var(--text)}
.rbtn svg.ic{width:22px;height:22px;color:var(--accent)}
.rbtn.danger svg.ic{color:var(--c-neg)}
.rbtn:hover:not(:disabled){background:var(--accent-soft);border-color:var(--line)}
.rbtn:disabled{opacity:.4;cursor:default}
.ribbon .spacer{flex:1}
.envmark{display:flex;align-items:center;padding:0 18px;font-size:26px;letter-spacing:-.5px;color:var(--brand);white-space:nowrap}
.envmark b{font-weight:600;margin-left:8px;color:var(--text);font-size:13px;letter-spacing:0}
.envmark.prod{color:var(--brand)}
.envmark.dev{color:var(--warn)}

/* main */
.main{flex:1;display:flex;min-height:0}
.tree{width:258px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.tree h2{margin:0;padding:8px 10px 6px;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:space-between}
.tree .search{margin:0 8px 6px;display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:3px;padding:3px 6px;background:var(--canvas)}
.tree .search input{border:0;outline:0;background:transparent;width:100%;font-size:12px}
#tree{flex:1;overflow:auto;padding:2px 4px 10px;font-size:12px}
.tnode{display:flex;align-items:center;gap:6px;padding:3px 6px;border-radius:2px;cursor:pointer;white-space:nowrap;user-select:none}
.tnode:hover{background:var(--accent-soft)}
.tnode.on{background:var(--line);font-weight:600}
.tnode .tw{width:12px;color:var(--muted);font-size:9px;text-align:center}
.tnode .kod{color:var(--muted);font-size:11px;min-width:54px}
.tnode .nm{overflow:hidden;text-overflow:ellipsis}
.dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--faint)}
.dot.on{background:var(--c-pos)} .dot.dirty{background:var(--p-orange)}
.tree .legend{border-top:1px solid var(--line-soft);padding:6px 10px;font-size:11px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}
.tree .legend span{display:inline-flex;align-items:center;gap:4px}

.work{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--panel)}
.work-head{display:flex;align-items:baseline;gap:8px;padding:8px 14px 4px}
.work-head h1{margin:0;font-size:22px;font-weight:400}
.work-head small{font-size:12px;color:var(--muted)}
.work-head .dirty{margin-left:auto;font-size:12px;color:var(--warn)}
.robanner{margin:0 14px 6px;padding:6px 10px;border-radius:3px;background:var(--warn-soft);color:var(--text);font-size:12.5px;display:flex;align-items:center;gap:10px}
.lockic{font-size:11px;color:var(--warn)}
#boot{position:fixed;inset:0;background:var(--bg);display:grid;place-items:center;z-index:80;color:var(--muted);font-size:14px}
.sync.ok{color:var(--ok)} .sync.err{color:var(--c-neg)} .sync.busy{color:var(--warn)}
.tabs{display:flex;gap:2px;padding:0 10px;border-bottom:1px solid var(--line);overflow-x:auto}
.tab{display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid transparent;border-bottom:0;background:transparent;font-size:12px;color:var(--muted);border-radius:3px 3px 0 0;white-space:nowrap}
.tab svg.ic{width:15px;height:15px}
.tab:hover{color:var(--text)}
.tab.on{background:var(--panel);border-color:var(--line);color:var(--accent);margin-bottom:-1px;padding-bottom:7px}
.tab .badge{background:var(--c-neg);color:#fff;border-radius:8px;font-size:10px;padding:0 5px}
.tab .badge.w{background:var(--p-orange)}
.tabbody{flex:1;min-height:0;position:relative}
.pane{position:absolute;inset:0;overflow:auto;display:none}
.pane.on{display:block}
.pane.flex.on{display:flex}

/* designer */
.palette{width:200px;flex:none;border-right:1px solid var(--line);background:var(--chrome);display:flex;flex-direction:column;min-height:0}
.ptabs{display:flex;gap:16px;padding:10px 14px 6px;font-size:15px}
.ptabs button{border:0;background:none;padding:0 0 2px;color:var(--muted)}
.ptabs button.on{color:var(--text);border-bottom:2px solid var(--text)}
.plist{flex:1;overflow:auto;padding:6px 14px 14px;display:flex;flex-direction:column;gap:10px}
.pgroup{font-weight:600;font-size:13px;display:flex;align-items:center;gap:6px;margin-top:2px}
.ptile{position:relative;background:var(--node);border:1px solid var(--line);border-bottom:4px solid var(--tc);border-radius:2px;height:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:10.5px;font-weight:700;letter-spacing:.2px;cursor:grab;user-select:none;touch-action:none;text-align:center}
.ptile:hover{box-shadow:var(--shadow)}
.ptile.t-start{--tc:var(--c-start)} .ptile.t-inter{--tc:var(--c-inter)} .ptile.t-final_pos{--tc:var(--c-pos);border-color:var(--c-pos)}
.ptile.t-final_neg{--tc:var(--c-neg);border-color:var(--c-neg)} .ptile.t-system{--tc:var(--c-sys)}
.ptile.t-flow{border:0;background:none;height:112px}
.ptile.t-flow::before{content:"";position:absolute;width:76px;height:76px;transform:rotate(45deg);border:1px solid var(--line);background:var(--node);box-shadow:inset 0 0 0 1px var(--line-soft)}
.ptile.t-flow span,.ptile.t-flow svg{position:relative}
.ptile svg{width:24px;height:24px}
.atile{display:flex;align-items:center;gap:8px;padding:8px;background:var(--node);border:1px solid var(--line);border-left:3px solid var(--c-sys);border-radius:2px;font-size:12px;cursor:grab;user-select:none;touch-action:none}
.atile:hover{box-shadow:var(--shadow)}
.atile small{display:block;color:var(--muted);font-size:10.5px}
.phint{font-size:11px;color:var(--muted);line-height:1.35}

.cwrap{flex:1;position:relative;min-width:0;background:var(--canvas);overflow:hidden}
#cv{position:absolute;inset:0;width:100%;height:100%;touch-action:none;user-select:none;display:block}
#cv.panning{cursor:grabbing}
.cbar{position:absolute;top:10px;left:10px;display:flex;gap:6px;z-index:2;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:5px;background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:3px 8px;font-size:11.5px;color:var(--muted)}
.chip input{margin:0}
.chip.btn:hover{color:var(--text);border-color:var(--accent)}
.zoom{position:absolute;right:16px;bottom:16px;display:flex;align-items:center;gap:4px;background:var(--panel);box-shadow:var(--shadow);border-radius:3px;padding:6px 8px;z-index:2}
.zoom button{border:0;background:none;width:30px;height:28px;display:grid;place-items:center;border-radius:3px;color:var(--text)}
.zoom button:hover{background:var(--accent-soft)}
.zoom .pct{min-width:48px;text-align:center;font-size:14px}
.chint{position:absolute;left:10px;bottom:10px;font-size:11px;color:var(--faint);z-index:1;pointer-events:none;max-width:60%}

/* svg canvas styling */
.gridbg{fill:url(#dgridpat)}
.node .frame{fill:var(--node);stroke:var(--tc);stroke-width:1.2}
.node .bar{fill:var(--tc)}
.node .glyph{stroke:var(--tc);fill:none;stroke-width:1.6}
.node .glyphf{fill:var(--tc)}
.node .nm{font:600 10.5px var(--font);fill:var(--text);text-anchor:middle}
.node .as{font:10px var(--font);fill:var(--muted);text-anchor:middle}
.node .gear{font:12px var(--font);fill:var(--muted)}
.node .dmdx{stroke:var(--line-soft);stroke-width:9;stroke-linecap:round}
.node.t-start{--tc:var(--c-start)} .node.t-inter{--tc:var(--c-inter)} .node.t-final_pos{--tc:var(--c-pos)}
.node.t-final_neg{--tc:var(--c-neg)} .node.t-system{--tc:var(--c-sys)} .node.t-flow{--tc:var(--c-flow)}
.node.t-flow .frame{stroke:var(--line)}
.node{cursor:move}
.node.sel .frame,.node.target .frame{stroke:var(--sel);stroke-width:2.4}
.node.sel .selring{display:block}
.node .selring{display:none;fill:none;stroke:var(--sel);stroke-width:1;stroke-dasharray:3 3;opacity:.7}
.node .port{fill:var(--panel);stroke:var(--accent);stroke-width:1.4;opacity:0;cursor:crosshair;transition:opacity .12s}
.node:hover .port,.node.sel .port,svg.connecting .node .port{opacity:1}
.node .port:hover{fill:var(--accent)}
.ro .node{cursor:default}
.node.cur .frame{stroke:var(--p-orange);stroke-width:3}
.node.cur{filter:drop-shadow(0 0 6px rgba(239,138,0,.55))}
.node.dim{opacity:.45}
.edge .ln{fill:none;stroke:var(--pc);stroke-width:1.6}
.edge .hit{fill:none;stroke:transparent;stroke-width:12;cursor:pointer}
.edge .lb{font:10px var(--font);fill:var(--muted);paint-order:stroke;stroke:var(--canvas);stroke-width:4px;stroke-linejoin:round;cursor:pointer}
.edge .pd{fill:var(--panel);stroke:var(--muted);stroke-width:1}
.edge.sel .ln{stroke-width:3}
.edge.sel .lb{fill:var(--text);font-weight:600}
.edge.trail .ln{stroke-width:3.2}
.edge.dim{opacity:.35}
.pc-blue{--pc:var(--p-blue)} .pc-green{--pc:var(--p-green)} .pc-red{--pc:var(--p-red)} .pc-grey{--pc:var(--p-grey)} .pc-orange{--pc:var(--p-orange)} .pc-violet{--pc:var(--p-violet)}
.lanes .lbox{fill:none;stroke:var(--line);stroke-width:1}
.lanes .lh{fill:var(--lane-head);stroke:var(--line)}
.lanes .lt{font:600 12.5px var(--font);fill:var(--text);text-anchor:middle}
.lanes .ll{stroke:var(--line);stroke-width:1}
.tmp{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-dasharray:5 4}
.marq{fill:var(--accent);fill-opacity:.08;stroke:var(--accent);stroke-dasharray:4 3}

/* properties panel */
.props{width:300px;flex:none;border-left:1px solid var(--line);background:var(--panel);overflow:auto;display:flex;flex-direction:column}
.props .ph{padding:10px 12px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:8px;background:var(--chrome)}
.props .ph h3{margin:0;font-size:13px;font-weight:600;flex:1}
.props .ph .tt{font-size:11px;color:var(--muted)}
.props .pb{padding:10px 12px;display:flex;flex-direction:column;gap:10px}
.fld{display:flex;flex-direction:column;gap:3px}
.fld>label,.lbl{font-size:11.5px;color:var(--muted)}
.row{display:flex;gap:6px;align-items:center}
.row>*{min-width:0}
input[type=text],input[type=number],input[type=date],select,textarea{width:100%;border:1px solid var(--line);border-radius:3px;padding:5px 7px;background:var(--canvas);font-size:12.5px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
textarea{resize:vertical;min-height:54px}
.sec{border-top:1px solid var(--line-soft);padding-top:8px;display:flex;flex-direction:column;gap:6px}
.sec h4{margin:0;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:space-between}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--panel);border-radius:3px;padding:5px 10px;font-size:12px}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.pri:hover{filter:brightness(1.08);color:#fff}
.btn.dng{color:var(--c-neg)}
.btn.dng:hover{border-color:var(--c-neg)}
.btn.sm{padding:2px 7px;font-size:11px}
.btn svg.ic{width:15px;height:15px}
.btn:disabled{opacity:.45;cursor:default}
.ibtn{border:0;background:none;padding:2px;border-radius:3px;color:var(--muted);display:inline-grid;place-items:center}
.ibtn:hover{color:var(--text);background:var(--accent-soft)}
.ibtn svg.ic{width:15px;height:15px}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.pill{display:inline-flex;align-items:center;gap:4px;background:var(--accent-soft);border-radius:10px;padding:1px 4px 1px 8px;font-size:11.5px}
.pill button{border:0;background:none;padding:0 2px;color:var(--muted);font-size:13px;line-height:1}
.item{display:flex;align-items:center;gap:6px;border:1px solid var(--line-soft);border-radius:3px;padding:5px 6px;font-size:12px}
.item.click{cursor:pointer}
.item.click:hover{border-color:var(--accent)}
.item .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw{width:10px;height:10px;border-radius:2px;background:var(--pc);flex:none}
.muted{color:var(--muted)} .small{font-size:11.5px}
.kbd{font-size:11px;color:var(--muted);display:grid;grid-template-columns:auto 1fr;gap:3px 10px}
.kbd b{font-weight:600;color:var(--text);white-space:nowrap}
.colors{display:flex;gap:5px}
.colors button{width:20px;height:20px;border-radius:3px;border:2px solid transparent;background:var(--pc)}
.colors button.on{border-color:var(--text)}
.colors button.auto{background:linear-gradient(135deg,var(--p-blue) 50%,var(--p-red) 50%)}

/* forms / tables */
.page{padding:18px 22px;max-width:1100px}
.page h2{font-size:18px;font-weight:400;margin:0 0 12px;padding-bottom:6px;border-bottom:1px solid var(--line-soft)}
.page h3{font-size:14px;font-weight:600;margin:22px 0 8px}
.grid2{display:grid;grid-template-columns:170px minmax(0,460px);gap:10px 14px;align-items:center}
.grid2>label{text-align:right;color:var(--muted);font-size:12.5px}
.note{background:var(--accent-soft);border-radius:3px;padding:9px 12px;font-size:12.5px}
table.t{border-collapse:collapse;width:100%;font-size:12.5px}
table.t th{text-align:left;font-weight:600;font-size:11.5px;color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--line);background:var(--chrome);position:sticky;top:0}
table.t td{padding:4px 8px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
table.t input[type=text],table.t select{padding:3px 6px}
.mx td.c{text-align:center;padding:2px}
.mx th.c{text-align:center;writing-mode:vertical-rl;transform:rotate(180deg);height:120px;vertical-align:bottom;font-weight:500;padding:6px 4px;white-space:nowrap}
.mxb{width:30px;height:24px;border:1px solid var(--line);border-radius:3px;background:var(--panel);font-size:11px;font-weight:700}
.mxb.h{color:var(--faint)} .mxb.r{color:var(--muted);background:var(--chrome)} .mxb.e{color:var(--accent);background:var(--accent-soft)} .mxb.w{color:#fff;background:var(--accent)}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:4px 14px}
.checks label{display:flex;gap:6px;align-items:center;font-size:12.5px}

/* simulation */
.sim{display:none}
.sim.on{display:flex}
.simside{width:290px;flex:none;border-right:1px solid var(--line);padding:14px;overflow:auto;display:flex;flex-direction:column;gap:10px;background:var(--chrome)}
.simmain{flex:1;position:relative;min-width:0;background:var(--canvas)}
.simmain svg{position:absolute;inset:0;width:100%;height:100%}
.simright{width:320px;flex:none;border-left:1px solid var(--line);padding:14px;overflow:auto;display:flex;flex-direction:column;gap:10px}
.card{border:1px solid var(--line);border-radius:4px;padding:10px 12px;background:var(--panel)}
.card h4{margin:0 0 6px;font-size:13px}
.pathbtn{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:1px solid var(--line);border-left:4px solid var(--pc);background:var(--panel);border-radius:3px;padding:7px 9px;font-size:12.5px}
.pathbtn:hover:not(:disabled){border-color:var(--pc);background:var(--accent-soft)}
.pathbtn:disabled{opacity:.5;cursor:not-allowed}
.pathbtn small{display:block;color:var(--muted);font-size:11px}
.log{font-size:12px;display:flex;flex-direction:column;gap:0}
.log div{padding:5px 0 5px 12px;border-left:2px solid var(--line);position:relative}
.log div::before{content:"";position:absolute;left:-5px;top:9px;width:8px;height:8px;border-radius:50%;background:var(--line)}
.log div.a::before{background:var(--c-sys)} .log div.u::before{background:var(--accent)} .log div.f::before{background:var(--c-pos)} .log div.x::before{background:var(--c-neg)}
.log time{color:var(--faint);font-size:10.5px;margin-right:6px}
.banner{border-radius:4px;padding:10px 12px;font-weight:600}
.banner.pos{background:var(--ok-soft);color:var(--ok)} .banner.neg{background:var(--err-soft);color:var(--c-neg)}

/* publish */
.vlist{display:flex;flex-direction:column;gap:4px}
.vi{display:flex;gap:8px;align-items:flex-start;padding:6px 9px;border-radius:3px;font-size:12.5px;cursor:pointer}
.vi.e{background:var(--err-soft)} .vi.w{background:var(--warn-soft)} .vi.ok{background:var(--ok-soft);color:var(--ok);cursor:default}
.vi .tag{font-weight:700;font-size:11px;min-width:58px}
.vi.e .tag{color:var(--c-neg)} .vi.w .tag{color:var(--warn)}
.envs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.envcard{border:1px solid var(--line);border-radius:4px;padding:12px 14px}
.envcard h4{margin:0 0 4px;font-size:14px;display:flex;justify-content:space-between}
.envcard code{font-size:11.5px;color:var(--muted)}
.jsonbox{width:100%;height:220px;font:11.5px/1.45 ui-monospace,Consolas,monospace;white-space:pre}

/* status bar, modal, toast, ghost */
.status{height:24px;display:flex;align-items:center;gap:16px;padding:0 12px;border-top:1px solid var(--line);background:var(--chrome);font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden}
.status .sp{flex:1}
#modal-root .ov{position:fixed;inset:0;background:rgba(15,20,30,.38);display:grid;place-items:center;z-index:50;padding:16px}
.modal{background:var(--panel);border-radius:5px;box-shadow:var(--shadow);width:min(520px,100%);max-height:90vh;display:flex;flex-direction:column}
.modal .mh{padding:12px 16px;border-bottom:1px solid var(--line-soft);font-weight:600;font-size:14px}
.modal .mb{padding:14px 16px;overflow:auto;display:flex;flex-direction:column;gap:10px}
.modal .mf{padding:10px 16px;border-top:1px solid var(--line-soft);display:flex;justify-content:flex-end;gap:8px}
#toast{position:fixed;right:18px;bottom:36px;z-index:60;display:flex;flex-direction:column;gap:6px;align-items:flex-end;pointer-events:none}
.tst{background:var(--text);color:var(--panel);padding:8px 14px;border-radius:4px;font-size:12.5px;box-shadow:var(--shadow);animation:tin .18s ease-out}
.tst.err{background:var(--c-neg);color:#fff} .tst.ok{background:var(--ok);color:#fff}
@keyframes tin{from{opacity:0;transform:translateY(6px)}}
#ghost{position:fixed;z-index:70;pointer-events:none;display:none;opacity:.85;transform:translate(-50%,-50%)}
#ghost .ptile,#ghost .atile{width:150px;box-shadow:var(--shadow)}
.empty{height:100%;display:grid;place-items:center;text-align:center;color:var(--muted)}
.hidden{display:none!important}

/* widoki */
.view{flex:1;min-height:0;display:none;flex-direction:column}
.view.on{display:flex}
.titlebar .ttl{flex:none;text-align:left;font-weight:600}
.tspace{flex:1}
.navseg{margin-left:14px}
.navseg button{padding:4px 14px}
/* panel pracownika */
.up{flex:1;display:flex;min-height:0;background:var(--bg)}
.unav{width:236px;flex:none;background:var(--panel);border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:3px;overflow:auto}
.newbtn{padding:9px 12px;font-size:13px;margin-bottom:12px}
.ni{display:flex;justify-content:space-between;align-items:center;border:0;background:none;text-align:left;padding:8px 10px;border-radius:6px;font-size:13px;color:var(--text)}
.ni:hover{background:var(--chrome)}
.ni.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.ni .cnt{font-size:11.5px;font-weight:700;color:var(--accent)}
.unav-foot{margin-top:auto;border-top:1px solid var(--line-soft);padding-top:12px;display:flex;flex-direction:column;gap:6px}
.umain{flex:1;overflow:auto}
.uwrap{max-width:1180px;margin:0 auto;padding:24px 28px 40px}
.uhead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.uh1{font-size:24px;font-weight:600;margin:0 0 2px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.uhead p{margin:0}
.usearch{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:6px;padding:5px 9px;background:var(--panel);width:300px;max-width:100%}
.usearch input{border:0;outline:0;background:transparent;box-shadow:none;padding:0}
.usearch input:focus{box-shadow:none}
.ctable{background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.crow{display:grid;grid-template-columns:130px minmax(180px,2fr) minmax(120px,1.2fr) minmax(120px,1.2fr) 110px 100px 110px;gap:12px;align-items:center;width:100%;border:0;border-top:1px solid var(--line-soft);background:none;text-align:left;padding:11px 16px;font-size:12.5px;color:var(--text)}
.crow:first-child{border-top:0}
button.crow:hover{background:var(--accent-soft)}
.chead{font-size:11.5px;color:var(--muted);font-weight:600;background:var(--chrome)}
.crow .nr{font-weight:600;font-size:12px}
.crow .tt b{display:block;font-size:13px}
.crow .tt small{color:var(--muted)}
.crow .r{text-align:right}
.late{color:var(--c-neg);font-weight:600}
.st{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;white-space:nowrap;vertical-align:middle}
.st.run{background:var(--accent-soft);color:var(--accent)} .st.ok{background:var(--ok-soft);color:var(--ok)} .st.neg{background:var(--err-soft);color:var(--c-neg)}
.st.hold{background:var(--warn-soft);color:var(--warn)} .st.off{background:var(--chrome);color:var(--muted);border:1px solid var(--line)}
.uempty{background:var(--panel);border:1px dashed var(--line);border-radius:8px;padding:34px;text-align:center;color:var(--muted)}
.uempty b{color:var(--text);font-size:15px}
.ucat{font-size:13px;font-weight:600;color:var(--muted);margin:22px 0 8px}
.wtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.wtile{display:flex;flex-direction:column;gap:4px;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px;color:var(--text)}
.wtile:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.wtile .kod{font-size:11px;color:var(--accent);font-weight:700}
.wtile b{font-size:14px}
.wtile small{color:var(--muted);font-size:11.5px;line-height:1.35}
.back{border:0;background:none;color:var(--accent);padding:0;margin-bottom:12px;font-size:12.5px}
.chead2{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.meta{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-top:4px}
.meta b{color:var(--text)}
.track{display:flex;flex-wrap:wrap;row-gap:14px;padding:16px 18px;background:var(--panel);border:1px solid var(--line);border-radius:8px}
.ts{display:flex;align-items:flex-start}
.ts .dotc{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;flex:none;border:2px solid transparent}
.ts.done .dotc,.ts.fin .dotc{background:var(--ok);color:#fff}
.ts.ret .dotc{background:var(--p-grey);color:#fff}
.ts.neg .dotc{background:var(--c-neg);color:#fff}
.ts.cur .dotc{background:var(--p-orange);color:#fff;box-shadow:0 0 0 5px rgba(239,138,0,.18)}
.ts.next .dotc{border:2px dashed var(--line);color:var(--faint);font-size:11px}
.ts.more .dotc{background:var(--chrome);color:var(--muted);font-size:11px;border-color:var(--line)}
.ts .tx{margin:3px 10px 0;max-width:160px}
.ts .tx b{display:block;font-size:12.5px;line-height:1.25}
.ts .tx small{display:block;color:var(--muted);font-size:11px;margin-top:2px;line-height:1.3}
.ts.next .tx b{color:var(--muted);font-weight:500}
.ts .bar{width:30px;height:2px;background:var(--line);margin-top:14px}
.ts.done .bar,.ts.ret .bar{background:var(--ok)}
.trackhint{margin:6px 2px 0}
.umap{height:380px;position:relative;background:var(--canvas);border:1px solid var(--line);border-radius:8px;margin-top:12px}
.umap svg{position:absolute;inset:0;width:100%;height:100%}
.cgrid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;margin-top:18px;align-items:start}
.ccard,.dcard{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:16px 18px}
.dcard{display:flex;flex-direction:column;gap:10px;position:sticky;top:0}
.ccard h3,.dcard h3{margin:0 0 12px;font-size:15px;font-weight:600}
.dcard h3{margin:0}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.ff{display:flex;flex-direction:column;gap:4px;min-width:0}
.ff.wide{grid-column:1/-1}
.ff>label{font-size:12px;color:var(--muted)}
.ff .flabel{font-size:11.5px;color:var(--muted)}
.ff .fval{font-size:13px;padding:4px 0;border-bottom:1px solid var(--line-soft);white-space:pre-wrap;word-break:break-word}
.req{color:var(--c-neg)}
.votes{display:flex;flex-direction:column;gap:3px;font-size:12px;background:var(--chrome);border-radius:6px;padding:8px 10px}
.votes .ok{color:var(--ok);font-weight:600}
.log blockquote{margin:4px 0 0;padding:4px 8px;border-left:3px solid var(--line);color:var(--muted);font-style:italic}
.found{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pplwrap{flex:1;overflow:auto;background:var(--panel)}
@media (max-width:1000px){.cgrid{grid-template-columns:1fr}.dcard{position:static}.crow{grid-template-columns:110px 1fr 100px}.crow>span:nth-child(n+4):not(:last-child){display:none}.chead>span:nth-child(n+4):not(:last-child){display:none}}
@media (max-width:760px){.up{flex-direction:column}.unav{width:auto;flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--line)}.unav-foot{display:none}.newbtn{margin:0}.fgrid{grid-template-columns:1fr}.uwrap{padding:16px}.navseg button{padding:4px 8px;font-size:11px}.titlebar .ttl{display:none}}

/* magazyn */
.magwrap{flex:1;overflow:auto;background:var(--bg);padding:20px 24px 40px}
.mhead{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.mtabs button{padding:5px 14px}
.mtool{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.mtool select{width:auto;max-width:210px}
.mtool .grow{flex:1}
.mgrid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:16px;align-items:start}
.lrow{display:grid;grid-template-columns:120px 80px 70px 120px minmax(110px,1fr) minmax(130px,1.3fr) minmax(110px,1fr) 60px;gap:10px;align-items:center;width:100%;border:0;border-top:1px solid var(--line-soft);background:none;text-align:left;padding:8px 14px;font-size:12.5px;color:var(--text)}
.trow{display:grid;grid-template-columns:120px minmax(160px,1.5fr) 110px 60px minmax(120px,1fr) 60px 60px 170px;gap:10px;align-items:center;width:100%;border:0;border-top:1px solid var(--line-soft);background:none;text-align:left;padding:8px 14px;font-size:12.5px;color:var(--text)}
.krow{display:grid;grid-template-columns:150px minmax(180px,2fr) 70px 50px 70px minmax(110px,1fr) minmax(110px,1fr) 55px;gap:10px;align-items:center;width:100%;border:0;border-top:1px solid var(--line-soft);background:none;text-align:left;padding:8px 14px;font-size:12.5px;color:var(--text)}
.krow:first-child{border-top:0}
button.krow:hover{background:var(--accent-soft)}
.krow.on{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.kgrp{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-bottom:12px}
.kgrp .ff{min-width:180px}
.kdl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:12.5px;margin:0}
.kdl dt{color:var(--muted)} .kdl dd{margin:0;word-break:break-word}
@media (max-width:1000px){.krow{grid-template-columns:120px 1fr 70px}.krow>span:nth-child(n+4){display:none}}
.lrow:first-child,.trow:first-child{border-top:0}
/* tabela pozycji */
.pz{grid-column:1/-1}
.cfrow{background:var(--chrome);padding-top:5px!important;padding-bottom:5px!important;border-bottom:1px solid var(--line)}
.cfrow input{width:100%;min-width:0;padding:3px 6px;font-size:11.5px;border-radius:4px}
.cfrow input.on{border-color:var(--accent);background:var(--accent-soft)}
.navbadge{background:var(--c-neg);color:#fff;border-radius:8px;font-size:10px;padding:0 5px;margin-left:5px;font-weight:700}
.kmap{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.kcard{display:flex;flex-direction:column;gap:6px;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px;color:var(--text)}
.kcard:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.kcard b{font-size:14px}
.kcard .kgr{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted)}
.kcard .kgr span:last-child{font-weight:600;color:var(--text)}
.kcard.brak{border-style:dashed}
.fchip{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);color:var(--accent);border-radius:12px;padding:2px 4px 2px 10px;font-size:12px}
.fchip button{border:0;background:none;color:inherit;font-size:14px;padding:0 4px}
.nowy{border:1px solid var(--line);border-radius:8px;padding:12px 14px;background:var(--panel);margin-bottom:12px}
.nowy .fgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.zrow{display:grid;grid-template-columns:130px 150px 110px 110px minmax(200px,1fr) 150px;gap:10px;align-items:start;border-top:1px solid var(--line-soft);padding:9px 14px;font-size:12.5px}
.zrow:first-child{border-top:0}
.zrow.done{opacity:.6}
.zrow .zch{display:flex;flex-direction:column;gap:2px}
.zrow .zch s{color:var(--muted)}
.rinfo{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 16px;margin-top:14px;display:grid;grid-template-columns:170px 1fr;gap:5px 14px;font-size:12.5px;max-width:1180px}
.rinfo dt{color:var(--muted)} .rinfo dd{margin:0}
table.rodz td{vertical-align:top}
.warn{color:var(--c-neg);font-weight:600}
.uwrap.uwide{max-width:1680px}
.uwrap.uwide .cgrid{grid-template-columns:minmax(0,1fr) 330px}
.pzwrap{overflow:auto;border:1px solid var(--line);border-radius:6px}
table.pzt{border-collapse:collapse;width:100%;font-size:12.5px}
table.pzt th{text-align:left;font-weight:600;font-size:11.5px;color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--line);background:var(--chrome);white-space:nowrap}
table.pzt td{padding:4px 6px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
table.pzt td.r,table.pzt th.r{text-align:right}
table.pzt input[type=text],table.pzt input[type=number]{padding:4px 6px;min-width:70px}
table.pzt tr.pzodrz td{color:var(--faint);text-decoration:line-through}
table.pzt tr.pzodrz td.pzact,table.pzt tr.pzinfo td{text-decoration:none}
table.pzt tr.pzinfo td{font-size:11.5px;color:var(--c-neg);background:var(--err-soft);border-bottom:1px solid var(--line)}
table.pzt td.pzact{white-space:nowrap;text-align:right}
table.pzt .best{color:var(--ok);font-weight:700}
table.pzt th.rek,table.pzt td.rek{background:var(--ok-soft)}
.pzfoot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.pzsum{margin-left:auto;font-size:12.5px}
.pzsum b{font-size:14px}
.pzof{margin-top:12px}
.pzhint{font-size:11.5px;color:var(--muted);margin:4px 0 6px}
table.pzcfg td{white-space:nowrap}
table.pzcfg select{width:auto;padding:3px 4px;font-size:11.5px}
button.lrow:hover,button.trow:hover{background:var(--accent-soft)}
.lrow.on{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.lrow.off{opacity:.55}
.lrow .kod,.trow .kod{font-family:ui-monospace,Consolas,monospace;font-weight:600}
.lrow .r,.trow .r{text-align:right}
.mside{position:sticky;top:0;max-height:calc(100vh - 150px);overflow:auto}
.bcwrap{display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:10px}
.bcode{max-width:100%;height:auto}
.tlist{display:flex;flex-direction:column;gap:4px}
.titem{display:flex;gap:6px;align-items:center;border:1px solid var(--line-soft);border-radius:6px;padding:6px 8px;font-size:12.5px}
.titem .grow{flex:1;min-width:0}
.titem small{display:block;color:var(--muted);font-size:11px}
.padd{margin-top:10px;display:flex;flex-direction:column;gap:6px;background:var(--chrome);border-radius:6px;padding:10px}
.padd2{padding:12px 14px}
.row.wrap{flex-wrap:wrap}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.slist{display:flex;flex-direction:column;max-height:420px;overflow:auto}
.sitem{display:flex;align-items:center;gap:6px;padding:4px 2px;border-bottom:1px solid var(--line-soft);font-size:12.5px}
.sitem .grow{flex:1}
.sitem .odp{font-size:11.5px;color:var(--accent)}
.gchk{max-height:190px;overflow:auto;border:1px solid var(--line);border-radius:3px;padding:4px 8px;background:var(--canvas);display:grid;grid-template-columns:1fr 1fr;gap:2px 10px}
.gchk label{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--text)}
.gchk.dis{opacity:.7}
.odpinfo{font-size:12px;color:var(--muted)}
.odpinfo b{color:var(--text)}
.impsum ul{margin:6px 0 10px;padding-left:18px;font-size:13px}
@media (max-width:1100px){.mgrid{grid-template-columns:1fr}.mside{position:static;max-height:none}}
@media (max-width:760px){.lrow{grid-template-columns:110px 1fr 50px}.lrow>span:nth-child(2),.lrow>span:nth-child(3),.lrow>span:nth-child(4),.lrow>span:nth-child(5),.lrow>span:nth-child(7){display:none}.trow{grid-template-columns:100px 1fr 100px}.trow>span:nth-child(n+4){display:none}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
@media (max-width:1100px){.props{width:250px}.palette{width:170px}.simright{width:260px}.simside{width:240px}}
@media (max-width:860px){
  .tree{position:absolute;z-index:20;top:0;bottom:0;left:0;box-shadow:var(--shadow);transform:translateX(-105%);transition:transform .15s}
  .main{position:relative}
  body.tree-open .tree{transform:none}
  .palette{width:118px}.ptile{font-size:9px}.plist{padding:6px 8px}
  .props{position:absolute;right:0;top:0;bottom:0;z-index:5;box-shadow:var(--shadow)}
  .props.collapsed{display:none}
  .grid2{grid-template-columns:1fr}.grid2>label{text-align:left}
  .sim.on{flex-direction:column;overflow:auto}.simside,.simright{width:auto}.simmain{min-height:360px}
  .envmark{display:none}
}

/* ===================== NOWY WYGLĄD (html.ui2) — przełącznik w pasku u góry ===================== */
html.ui2{
  --bg:#e4e7ee; --bg2:#eef0f4; --chrome:#f1f2f6; --panel:#fcfcfd; --line:#dcdfe7; --line-soft:#eceef3;
  --text:#161112; --muted:#68696f; --faint:#9a9ba2;
  --accent:#161112; --on-accent:#ffffff; --accent-soft:#e6e8f0; --lilac:#8c9fd0; --lilac-soft:#e3e8f5; --rose:#c4675d; --rose-soft:#f5e4e1;
  --card:rgba(255,255,255,.66); --card-line:rgba(255,255,255,.85); --glass:rgba(255,255,255,.55);
  --canvas:#ffffff; --grid:#eef0f5; --node:#ffffff; --lane-head:#f7f8fa; --sel:#5d6fa0;
  --shadow:0 12px 32px rgba(60,66,90,.12); --shadow-sm:0 6px 18px rgba(60,66,90,.08);
  --font:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme: dark){
  html.ui2:not([data-theme="light"]){
    --bg:#15161b; --bg2:#1c1d24; --chrome:#22232b; --panel:#24252d; --line:#363844; --line-soft:#2c2e37;
    --text:#ecebf0; --muted:#a3a4ad; --faint:#747682;
    --accent:#ecebf0; --on-accent:#161112; --accent-soft:#30323d; --lilac:#8c9fd0; --lilac-soft:#2b3246; --rose:#d98077; --rose-soft:#3d2524;
    --card:rgba(38,39,48,.78); --card-line:rgba(255,255,255,.06); --glass:rgba(38,39,48,.6);
    --canvas:#1c1d24; --grid:#24262f; --node:#262833; --lane-head:#22232b; --sel:#a5b0ca;
    --shadow:0 12px 32px rgba(0,0,0,.45); --shadow-sm:0 6px 18px rgba(0,0,0,.3); color-scheme:dark;
  }
}
html.ui2[data-theme="dark"]{
  --bg:#15161b; --bg2:#1c1d24; --chrome:#22232b; --panel:#24252d; --line:#363844; --line-soft:#2c2e37;
  --text:#ecebf0; --muted:#a3a4ad; --faint:#747682;
  --accent:#ecebf0; --on-accent:#161112; --accent-soft:#30323d; --lilac:#8c9fd0; --lilac-soft:#2b3246; --rose:#d98077; --rose-soft:#3d2524;
  --card:rgba(38,39,48,.78); --card-line:rgba(255,255,255,.06); --glass:rgba(38,39,48,.6);
  --canvas:#1c1d24; --grid:#24262f; --node:#262833; --lane-head:#22232b; --sel:#a5b0ca;
  --shadow:0 12px 32px rgba(0,0,0,.45); --shadow-sm:0 6px 18px rgba(0,0,0,.3); color-scheme:dark;
}
html.ui2 body{background:linear-gradient(160deg,var(--bg2) 0%,var(--bg) 70%);font-size:13px}
.rail2,.ui2only{display:none}
html.ui2 .ui2only{display:revert}
html.ui2 .ui1only{display:none!important}

/* rama: pasek ikon po lewej */
html.ui2 #app{padding-left:76px;position:relative}
html.ui2 .rail2{display:flex;position:absolute;left:14px;top:78px;bottom:14px;width:48px;flex-direction:column;gap:10px;align-items:center;z-index:5}
.rail2 button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--glass);display:grid;place-items:center;color:var(--text);padding:0;position:relative}
.rail2 button:hover{background:var(--panel)}
.rail2 button.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.rail2 button svg.ic{width:19px;height:19px}
.rail2 .rb{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;border-radius:9px;background:var(--rose);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;padding:0 4px;border:2px solid var(--bg2)}

/* pasek tytułowy */
html.ui2 .titlebar{height:66px;background:transparent;border:0;padding:0 18px 0 0;gap:14px}
html.ui2 .titlebar .logo{width:30px;height:30px;border-radius:9px;border:0;background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:800;margin-left:-58px}
html.ui2 .titlebar .ttl{flex:none;text-align:left;font-size:18px;font-weight:800;letter-spacing:-.3px;margin-left:24px}
html.ui2 .titlebar .ttl span{font-weight:400;color:var(--muted)}
html.ui2 .tspace{flex:1}
html.ui2 .navseg{border:0;background:transparent;gap:4px;overflow:visible}
html.ui2 .navseg button{border-radius:22px;padding:9px 16px;font-size:13.5px;color:var(--text);white-space:nowrap}
html.ui2 .titlebar .who>*{white-space:nowrap}
html.ui2 .titlebar .who>span.adminonly{display:none}
@media (max-width:1500px){html.ui2 .navseg button{padding:8px 11px;font-size:13px}html.ui2 .titlebar .ttl{font-size:16px;margin-left:12px}}
html.ui2 .navseg button:hover{background:var(--glass)}
html.ui2 .navseg button.on{background:var(--accent);color:var(--on-accent)}
html.ui2 .titlebar .who{gap:10px;font-size:12.5px;color:var(--muted)}
html.ui2 .titlebar .ibtn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--glass)}
html.ui2 #who-name{display:inline-grid;place-items:center;height:40px;padding:0 14px;border-radius:20px;background:var(--glass);border:1px solid var(--line);color:var(--text);font-weight:600}

/* elementy wspólne */
html.ui2 .seg{border:1px solid var(--line);background:var(--glass);border-radius:22px;padding:3px;gap:2px}
html.ui2 .seg button{border-radius:18px;padding:6px 13px;font-size:12.5px;color:var(--text)}
html.ui2 .seg button.on{background:var(--accent);color:var(--on-accent)}
html.ui2 .btn{border-radius:20px;padding:7px 14px;font-weight:600;border-color:var(--line);background:var(--panel)}
html.ui2 .btn:hover{border-color:var(--accent);color:var(--text)}
html.ui2 .btn.pri{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
html.ui2 .btn.pri:hover{filter:none;opacity:.88;color:var(--on-accent)}
html.ui2 .btn.dng{color:var(--rose)}
html.ui2 .btn.sm{padding:4px 10px;font-size:11.5px}
html.ui2 .ibtn{border-radius:50%}
html.ui2 input[type=text],html.ui2 input[type=number],html.ui2 input[type=date],html.ui2 select,html.ui2 textarea{border-radius:12px;border-color:var(--line);background:var(--panel)}
html.ui2 .pill{background:var(--accent-soft);border-radius:14px;padding:3px 5px 3px 10px}
html.ui2 .mxb.w{color:var(--on-accent);background:var(--accent)}
html.ui2 .card{border-radius:20px;border-color:var(--card-line);background:var(--card);box-shadow:var(--shadow-sm)}
html.ui2 .modal{border-radius:24px}
html.ui2 .modal .mh{font-size:16px;padding:16px 20px}
html.ui2 .modal .mb{padding:16px 20px}
html.ui2 .modal .mf{padding:12px 20px}
html.ui2 #toast .tst{border-radius:22px}
html.ui2 .status{background:transparent;border:0;height:26px}
html.ui2 table.t th{font-weight:500;color:var(--muted)}
html.ui2 .st{border-radius:20px;padding:3px 10px;font-weight:600}
html.ui2 .st.run{background:var(--lilac);color:#fff}
html.ui2 .st.ok{background:var(--accent);color:var(--on-accent)}
html.ui2 .st.neg{background:var(--rose);color:#fff}
html.ui2 .st.hold{background:#e0a14a;color:#fff}
html.ui2 .st.off{background:var(--accent-soft);color:var(--muted);border:0}
html.ui2 .late{color:var(--rose)}

/* panel pracownika */
html.ui2 .up{background:transparent;gap:16px;padding:0 18px 14px 0}
html.ui2 .unav{width:230px;background:var(--card);border:1px solid var(--card-line);border-radius:26px;box-shadow:var(--shadow-sm);padding:16px 12px}
html.ui2 .newbtn{border-radius:22px;padding:11px 14px}
html.ui2 .ni{border-radius:18px;padding:9px 12px}
html.ui2 .ni:hover{background:var(--glass)}
html.ui2 .ni.on{background:var(--accent);color:var(--on-accent)}
html.ui2 .ni.on .cnt{color:var(--on-accent)}
html.ui2 .ni .cnt{color:var(--text)}
html.ui2 .umain{border-radius:26px}
html.ui2 .uwrap{padding:6px 8px 40px;max-width:1500px}
html.ui2 .uh1{font-size:32px;font-weight:700;letter-spacing:-.7px}
html.ui2 .usearch{border-radius:22px;padding:8px 14px;background:var(--glass)}
html.ui2 .ctable{background:var(--card);border:1px solid var(--card-line);border-radius:24px;box-shadow:var(--shadow-sm);padding:6px 10px}
html.ui2 .crow{border-top-color:var(--line-soft);border-radius:14px}
html.ui2 button.crow:hover{background:var(--glass)}
html.ui2 .chead{background:transparent}
html.ui2 .uempty{background:var(--card);border:1px dashed var(--line);border-radius:24px}
html.ui2 .wtile{background:var(--card);border:1px solid var(--card-line);border-radius:20px;padding:14px 16px;box-shadow:var(--shadow-sm)}
html.ui2 .wtile:hover{border-color:var(--accent)}
html.ui2 .wtile .kod{color:var(--muted)}
html.ui2 .back{color:var(--muted)}
html.ui2 .track{background:transparent;border:0;padding:4px 0;gap:6px}
html.ui2 .ts{background:var(--card);border-radius:40px;padding:5px 14px 5px 5px;align-items:center}
html.ui2 .ts .tx{margin:0 0 0 9px}
html.ui2 .ts .bar{display:none}
html.ui2 .ts.done .dotc,html.ui2 .ts.fin .dotc{background:var(--lilac)}
html.ui2 .ts.cur{background:var(--accent);color:var(--on-accent)}
html.ui2 .ts.cur .tx small{color:var(--faint)}
html.ui2 .ts.cur .dotc{background:var(--on-accent);color:var(--accent);box-shadow:none}
html.ui2 .ts.neg .dotc{background:var(--rose)}
html.ui2 .ccard,html.ui2 .dcard{background:var(--card);border:1px solid var(--card-line);border-radius:26px;padding:20px 22px;box-shadow:var(--shadow-sm)}
html.ui2 .ccard h3,html.ui2 .dcard h3{font-size:17px;font-weight:700}

/* magazyn, osoby */
html.ui2 .magwrap{background:transparent;padding:6px 18px 40px 0}
html.ui2 .mhead .uh1{font-size:32px}
html.ui2 .krow.on,html.ui2 .lrow.on{background:var(--lilac-soft);box-shadow:none}
html.ui2 .kcard{background:var(--card);border:1px solid var(--card-line);border-radius:20px;box-shadow:var(--shadow-sm)}
html.ui2 .kcard:hover{border-color:var(--accent)}
html.ui2 .pplwrap{background:transparent;padding:0 18px 20px 0}
html.ui2 .pplwrap .page{background:var(--card);border:1px solid var(--card-line);border-radius:26px;box-shadow:var(--shadow-sm);max-width:none!important;margin:0}
html.ui2 .page h2{font-size:28px;font-weight:700;letter-spacing:-.5px;border:0}

/* projektant */
html.ui2 #view-admin{padding:0 18px 12px 0;gap:12px}
html.ui2 .ribbon{background:var(--card);border:1px solid var(--card-line);border-radius:22px;min-height:64px;box-shadow:var(--shadow-sm)}
html.ui2 .rgroup{border-right-color:var(--line-soft)}
html.ui2 .rbtn{border-radius:14px}
html.ui2 .rbtn svg.ic{color:var(--text)}
html.ui2 .rbtn:hover:not(:disabled){background:var(--glass);border-color:transparent}
html.ui2 .main{gap:12px}
html.ui2 .tree{background:var(--card);border:1px solid var(--card-line);border-radius:24px;box-shadow:var(--shadow-sm);overflow:hidden}
html.ui2 .tree .search{border-radius:16px;padding:6px 10px}
html.ui2 .tnode{border-radius:10px;padding:5px 8px}
html.ui2 .tnode.on{background:var(--accent);color:var(--on-accent)}
html.ui2 .tnode.on .kod{color:var(--faint)}
html.ui2 .dot.on{background:var(--lilac)}
html.ui2 .work{background:var(--card);border:1px solid var(--card-line);border-radius:24px;box-shadow:var(--shadow-sm);overflow:hidden}
html.ui2 .work-head h1{font-weight:700;letter-spacing:-.4px}
html.ui2 .tabs{border:0;padding:4px 12px 8px;gap:4px}
html.ui2 .tab{border-radius:18px;border:0;padding:7px 13px}
html.ui2 .tab.on{background:var(--accent);color:var(--on-accent);margin:0;padding-bottom:7px}
html.ui2 .palette{background:transparent;border-right-color:var(--line-soft)}
html.ui2 .props{background:transparent;border-left-color:var(--line-soft)}
html.ui2 .props .ph{background:transparent}
html.ui2 .cwrap{border-radius:0}

/* pulpit */
.pul{display:flex;flex-direction:column;gap:18px}
.pul .hrow{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.pul .hrow .uh1{flex:1;margin:0}
.pul .pc{background:var(--card);border:1px solid var(--card-line);border-radius:26px;box-shadow:var(--shadow-sm);padding:20px 22px;min-width:0}
.pul .ph2{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.pul .ph2 b{font-size:17px;flex:1;min-width:0}
.pul .jcols{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);gap:22px;overflow-x:auto;padding:4px 6px 8px}
.pul .jcw{display:flex;flex-direction:column;gap:10px;min-width:0}
.pul .jc{position:relative;background:var(--panel);border-radius:22px;padding:10px;display:flex;flex-direction:column;gap:4px;min-height:200px;max-height:360px;overflow:auto}
.pul .jlab{text-align:center;font-size:12.5px;color:var(--muted)}
.pul .jlab b{color:var(--text);font-weight:600}
.pul .jst{display:flex;align-items:center;gap:9px;border:0;background:transparent;border-radius:14px;padding:7px;text-align:left;color:var(--text);width:100%}
.pul .jst:hover{background:var(--accent-soft)}
.pul .av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:700;flex:none;border:2px solid var(--panel);color:#161112}
.pul .jtx{display:flex;flex-direction:column;min-width:0;flex:1}
.pul .jtx b{font-size:11.5px}
.pul .jtx span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pul .jd{min-width:44px;height:28px;padding:0 6px;border-radius:14px;border:1px solid var(--line);display:grid;place-items:center;font-size:10.5px;font-weight:600;flex:none;color:var(--muted)}
.pul .jd.late{border-color:var(--rose);color:var(--rose)}
.pul .jd.mine{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.pul .jempty{margin:auto;font-size:12px;color:var(--faint);text-align:center;padding:10px}
.pul .tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pul .tile{border:1px solid var(--card-line);background:var(--card);border-radius:20px;padding:14px;text-align:left;display:flex;flex-direction:column;gap:6px;color:var(--text);box-shadow:var(--shadow-sm);min-height:84px;justify-content:space-between}
.pul .tile b{font-size:24px;letter-spacing:-.5px}
.pul .tile span{font-size:12px;color:var(--muted)}
.pul .tile:hover{border-color:var(--accent)}
.pul .tile.dark{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.pul .tile.dark span{color:var(--faint)}
.pul .tile.warn b{color:var(--rose)}
.pul .g2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:18px;align-items:start}
.pul table.t{width:100%;border-collapse:collapse;font-size:12.5px}
.pul table.t td{padding:9px 8px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.pul table.t th{padding:8px;text-align:left;border-bottom:1px solid var(--line)}
.pul .lnk{border:0;background:none;padding:0;font-weight:700;color:var(--text);text-align:left}
.pul .lnk:hover{text-decoration:underline}
.pul .donut{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.pul .lg{display:flex;flex-direction:column;gap:9px;font-size:13px}
.pul .lg div{display:flex;align-items:center;gap:8px}
.pul .lg i{width:10px;height:10px;border-radius:50%;display:inline-block}
.pul .none{color:var(--muted);font-size:13px;padding:10px 0}
@media (max-width:1100px){.pul .g2{grid-template-columns:minmax(0,1fr)}.pul .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){html.ui2 #app{padding-left:0}html.ui2 .rail2{display:none}html.ui2 .titlebar .logo{margin-left:12px}html.ui2 .titlebar .ttl{margin-left:0}html.ui2 .up,html.ui2 .magwrap,html.ui2 .pplwrap,html.ui2 #view-admin{padding-left:12px;padding-right:12px}html.ui2 .titlebar{height:auto;flex-wrap:wrap;padding:8px 0}}

a.ni{text-decoration:none}
#perm .kcard{width:100%}
#perm .checks input{flex:none}
@media (min-width:861px){html.ui2 #btn-tree{display:none}}

.pkrow{display:flex;gap:6px;align-items:center}.pkrow>select,.pkrow>input{flex:1;min-width:0}.pkrow>.btn{flex:none;white-space:nowrap}
.pklist{display:flex;flex-direction:column;gap:2px;max-height:min(55vh,460px);overflow:auto;margin-top:8px;border:1px solid var(--line-soft);border-radius:8px;padding:4px}
.pkit{border:0;background:none;text-align:left;padding:8px 10px;border-radius:6px;color:var(--text);font-size:13px}
.pkit:hover,.pkit:focus-visible{background:var(--accent-soft)}
.pkit.on{font-weight:700;background:var(--accent-soft)}