/* Kontor – gemeinsames Stylesheet
   Layout: dunkle Kontor-Leiste links (Navigation + Firmenkarte), heller Arbeitsbereich rechts; Belege als weißes Papier */
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-weight:600;font-display:swap;src:url(fonts/bricolage-grotesque-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-weight:700;font-display:swap;src:url(fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2")}

:root{
  --bg:#f3f4f7; --panel:#ffffff; --panel-2:#f7f8fa; --fg:#161a22; --muted:#626a79; --line:#e1e4ea; --line-2:#cdd2db;
  --side:#141821; --side-2:#1e2431; --side-fg:#c5cbd8; --side-dim:#7d8597; --side-strong:#ffffff;
  --accent:var(--accent-base,#3445cf); --accent-fg:var(--accent-fg-light,#ffffff);
  --accent-weak:color-mix(in srgb,var(--accent) 12%,var(--panel));
  --ok:#17804f; --ok-weak:#e3f4ec; --warn:#a86a0c; --warn-weak:#fbf0dc; --bad:#be3329; --bad-weak:#fbe7e5; --draft:#5d6575; --draft-weak:#eceef2;
  --inc:var(--accent); --exp:#d08a2a; --prev:#b8bfcc;
  --desk:#e6e8ee;
  --shadow:0 1px 2px rgba(20,24,33,.06),0 4px 16px rgba(20,24,33,.06);
  --f-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --f-body:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,"SF Mono",Menlo,monospace;
  --r:8px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f1218; --panel:#171b23; --panel-2:#1c212a; --fg:#e6e8ee; --muted:#99a0ae; --line:#2a303c; --line-2:#3a4250;
  --side:#0a0c11; --side-2:#181d27; --side-fg:#c5cbd8; --side-dim:#6f7788; --side-strong:#ffffff;
  --accent:color-mix(in srgb,var(--accent-base,#3445cf) 62%,#ffffff); --accent-fg:#0e1220;
  --ok:#4cc38a; --ok-weak:#16302a; --warn:#e3ac52; --warn-weak:#33291a; --bad:#f2716a; --bad-weak:#3a1f1f; --draft:#a3aab7; --draft-weak:#262b35;
  --exp:#e3a64e; --prev:#4a5262; --desk:#0b0e13;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0f1218; --panel:#171b23; --panel-2:#1c212a; --fg:#e6e8ee; --muted:#99a0ae; --line:#2a303c; --line-2:#3a4250;
  --side:#0a0c11; --side-2:#181d27; --side-fg:#c5cbd8; --side-dim:#6f7788; --side-strong:#ffffff;
  --accent:color-mix(in srgb,var(--accent-base,#3445cf) 62%,#ffffff); --accent-fg:#0e1220;
  --ok:#4cc38a; --ok-weak:#16302a; --warn:#e3ac52; --warn-weak:#33291a; --bad:#f2716a; --bad-weak:#3a1f1f; --draft:#a3aab7; --draft-weak:#262b35;
  --exp:#e3a64e; --prev:#4a5262; --desk:#0b0e13;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25);
  color-scheme:dark;
}
/* helle Seitenleiste (Einstellung) */
:root[data-sidebar="light"]{--side:var(--panel);--side-2:var(--panel-2);--side-fg:var(--fg);--side-dim:var(--muted);--side-strong:var(--fg)}
:root[data-sidebar="light"] .side{border-right:1px solid var(--line)}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.5 var(--f-body);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
img{max-width:100%}
a{color:var(--accent)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.num,td.num,.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:13px}
.muted{color:var(--muted)}

/* ---------- Gerüst ---------- */
.app{display:grid;grid-template-columns:240px minmax(0,1fr);height:100%}
.side{background:var(--side);color:var(--side-fg);display:flex;flex-direction:column;gap:18px;padding:20px 12px;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:2px 8px;text-decoration:none}
.brand-mark{width:28px;height:28px;border-radius:7px;background:var(--accent);display:grid;place-items:center;color:var(--accent-fg);font:700 15px var(--f-display);flex:none}
.brand-name{font:700 19px/1 var(--f-display);color:var(--side-strong);letter-spacing:.01em}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-label{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--side-dim);padding:12px 10px 6px}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;color:var(--side-fg);text-decoration:none}
.nav a:hover{background:var(--side-2);color:var(--side-strong)}
.nav a.on{background:var(--side-2);color:var(--side-strong);box-shadow:inset 2px 0 0 var(--accent)}
.nav svg{width:17px;height:17px;flex:none;opacity:.85}
.nav .badge{margin-left:auto;font:500 11px var(--f-mono);padding:1px 7px;border-radius:10px;background:var(--side-2);color:var(--side-fg)}
.nav .badge.bad{background:var(--bad);color:#fff}
.side-new{margin:0 4px}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:6px}
.me-card{border:1px solid var(--side-2);border-radius:8px;padding:10px 12px;color:var(--side-fg);display:flex;gap:10px;align-items:center;text-decoration:none}
.me-card:hover,.me-card.on{background:var(--side-2)}
.me-card .lg{width:34px;height:34px;border-radius:6px;background:#fff;display:grid;place-items:center;flex:none;overflow:hidden;padding:3px}
.me-card .lg img{max-width:100%;max-height:100%;object-fit:contain}
.me-card .tx{display:flex;flex-direction:column;min-width:0}
.me-card small{color:var(--side-dim);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em}
.me-card b{color:var(--side-strong);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fs-st{display:flex;align-items:center;gap:8px;padding:6px 12px;border:0;background:transparent;color:var(--side-dim);font-size:12px;cursor:pointer;border-radius:6px;text-align:left;text-decoration:none}
.fs-st:hover{background:var(--side-2);color:var(--side-fg)}
.fs-st i{width:7px;height:7px;border-radius:50%;flex:none}

.main{overflow-y:auto;min-width:0}
.topbar{display:none}
.wrap{max-width:1180px;margin:0 auto;padding-inline:32px;padding-block:28px 64px;display:flex;flex-direction:column;gap:22px}
.wrap.wide{max-width:none}
.head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.head h1{font:600 26px/1.15 var(--f-display);margin:0;letter-spacing:-.01em;text-wrap:balance}
.head .sub{color:var(--muted);margin-top:4px}
.head .actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crumb{color:var(--muted);font-size:13px;text-decoration:none;display:inline-block;margin-bottom:6px}
.crumb:hover{color:var(--accent)}

/* ---------- Bausteine ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 14px;border-radius:7px;border:1px solid var(--line);background:var(--panel);cursor:pointer;font-weight:500;white-space:nowrap;text-decoration:none;color:var(--fg)}
.btn:hover{border-color:var(--line-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--fg);background:var(--panel-2)}
.btn.danger{color:var(--bad)}
.btn.danger-fill{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.sm{padding:5px 10px;font-size:13px}
.btn.icon{padding:6px}
.btn svg{width:15px;height:15px;flex:none}
.btn:disabled{opacity:.45;cursor:not-allowed}
select.btn{padding-right:28px}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);min-width:0}
.panel-h{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.panel-h h2{font:600 15px var(--f-body);margin:0}
.panel-h .r{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.panel-h .hint{color:var(--muted);font-size:12.5px}
.panel-b{padding:18px}
.stack{display:flex;flex-direction:column;gap:16px;min-width:0}

.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kpis.k3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpis.k6{grid-template-columns:repeat(6,minmax(0,1fr))}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;display:flex;flex-direction:column;gap:6px;min-width:0}
.kpi .l{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.kpi .v{font:500 23px/1.1 var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;overflow-wrap:anywhere}
.kpi .s{font-size:12.5px;color:var(--muted)}
.kpis.k6 .kpi{padding:14px 14px}
.kpis.k6 .kpi .v{font-size:clamp(16px,1.35vw,21px);white-space:nowrap;overflow-wrap:normal}
.kpi .s .bad,.delta.down{color:var(--bad);font-weight:500}
.delta.up{color:var(--ok);font-weight:500}
.grid2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px}
.grid2.even{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid2 > *{min-width:0}

.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
tfoot td{border-top:1px solid var(--line-2);font-weight:600}
tbody tr[data-href]{cursor:pointer}
tbody tr[data-href]:hover td{background:var(--panel-2)}
th.num,td.num{text-align:right}
td .t2,.t2{color:var(--muted);font-size:12.5px}
td.mono,td.num{white-space:nowrap}
.empty{padding:40px 20px;text-align:center;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:12px}
.empty b{color:var(--fg);font-size:15px}

.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 9px 2px 8px;border-radius:20px;font-size:12px;font-weight:500;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st-draft{background:var(--draft-weak);color:var(--draft)}
.st-sent{background:var(--accent-weak);color:var(--accent)}
.st-partial{background:var(--warn-weak);color:var(--warn)}
.st-paid{background:var(--ok-weak);color:var(--ok)}
.st-overdue{background:var(--bad-weak);color:var(--bad)}
.st-cancelled{background:var(--draft-weak);color:var(--draft);text-decoration:line-through}
.st-active{background:var(--ok-weak);color:var(--ok)}
.st-paused{background:var(--warn-weak);color:var(--warn)}
.st-done{background:var(--draft-weak);color:var(--draft)}

.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.chips{display:flex;gap:4px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--panel);padding:5px 11px;border-radius:20px;cursor:pointer;font-size:13px;color:var(--muted)}
.chip.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chip .c{font-family:var(--f-mono);font-size:11.5px;opacity:.7;margin-left:4px}
.search{flex:1 1 220px;max-width:320px;position:relative}
.search input{width:100%;padding:7px 12px 7px 32px;border:1px solid var(--line);border-radius:7px;background:var(--panel)}
.search svg{position:absolute;left:10px;top:50%;width:15px;height:15px;transform:translateY(-50%);color:var(--muted)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;padding:3px;background:var(--panel-2);gap:2px;flex-wrap:wrap}
.seg button{border:0;background:transparent;padding:6px 14px;border-radius:6px;cursor:pointer;color:var(--muted);font-size:13.5px}
.seg button.on{background:var(--panel);color:var(--fg);box-shadow:var(--shadow)}

/* ---------- Formulare ---------- */
.form{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 14px}
.f{display:flex;flex-direction:column;gap:5px;grid-column:span 6;min-width:0}
.f.s3{grid-column:span 3}.f.s2{grid-column:span 2}.f.s4{grid-column:span 4}
.f label,.lbl{font-size:12.5px;color:var(--muted);font-weight:500}
.f input,.f select,.f textarea,.inp{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel);min-width:0}
.f textarea{resize:vertical;min-height:70px}
.f input:focus,.f select:focus,.f textarea:focus,.inp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.f .hint,.hint{font-size:12px;color:var(--muted)}
.sec-t{grid-column:span 6;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding-top:10px;border-top:1px solid var(--line);margin-top:4px}
.sec-t:first-child{border-top:0;padding-top:0;margin-top:0}
.check{display:flex;gap:10px;align-items:flex-start;grid-column:span 6;cursor:pointer}
.check input{margin-top:3px;accent-color:var(--accent)}

/* ---------- Drawer, Dialog, Toast ---------- */
.scrim{position:fixed;inset:0;background:rgba(10,12,18,.42);z-index:40;display:flex;justify-content:flex-end}
.drawer{width:min(560px,100%);height:100%;background:var(--bg);display:flex;flex-direction:column;box-shadow:-8px 0 30px rgba(0,0,0,.2);animation:slide .18s ease-out}
@keyframes slide{from{transform:translateX(24px);opacity:.6}}
.drawer-h{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line);background:var(--panel)}
.drawer-h h2{font:600 18px var(--f-display);margin:0}
.drawer-b{flex:1;overflow-y:auto;padding:20px}
.drawer-f{display:flex;gap:8px;padding:14px 20px;border-top:1px solid var(--line);background:var(--panel)}
.drawer-f .sp{flex:1}
.confirm{position:fixed;inset:0;background:rgba(10,12,18,.42);z-index:50;display:grid;place-items:center;padding:16px}
.confirm .box{background:var(--panel);border-radius:10px;padding:22px;max-width:420px;width:100%;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow)}
.confirm h3{margin:0;font:600 17px var(--f-display)}
.confirm p{margin:0;color:var(--muted)}
.confirm .row{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:8px;z-index:60;font-size:13.5px;box-shadow:var(--shadow);max-width:calc(100% - 32px)}
.banner{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:10px 14px;border-radius:var(--r);background:var(--warn-weak);color:var(--fg);font-size:13px;border:1px solid var(--line)}
.banner b{color:var(--warn)}
.banner .btn{margin-left:auto}
.banner.info{background:var(--accent-weak)}
.banner.info b{color:var(--accent)}

/* ---------- Diagramme ---------- */
.chart svg{width:100%;height:auto;display:block}
.chart text{font-family:var(--f-body)}
.legend{display:flex;gap:16px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.legend i.ln{height:3px;border-radius:2px;vertical-align:2px}
.hbar{display:flex;flex-direction:column;gap:12px}
.hbar .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;font-size:13px}
.hbar .track{grid-column:span 2;height:6px;border-radius:3px;background:var(--panel-2);overflow:hidden}
.hbar .fill{height:100%;background:var(--inc);border-radius:3px}
.hbar.exp .fill{background:var(--exp)}
.hbar .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.progress{height:6px;border-radius:3px;background:var(--panel-2);overflow:hidden;min-width:90px}
.progress i{display:block;height:100%;background:var(--accent)}
.progress i.over{background:var(--bad)}
.aging{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.aging div{border-radius:6px;padding:10px 12px;background:var(--panel-2);display:flex;flex-direction:column;gap:2px}
.aging span{font-size:12px;color:var(--muted)}
.aging b{font:500 15px var(--f-mono);font-variant-numeric:tabular-nums}
.aging .a3 b{color:var(--bad)}

.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.ccard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:10px;cursor:pointer;text-align:left}
.ccard:hover{border-color:var(--line-2)}
.ccard .t{font-weight:600;font-size:15px}
.ccard .m{color:var(--muted);font-size:12.5px}
.ccard .row{display:flex;justify-content:space-between;gap:8px;font-size:13px}
.info-list{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:13.5px;margin:0}
.info-list dt{color:var(--muted)}
.info-list dd{margin:0;min-width:0;overflow-wrap:anywhere}
.tree{font:12px/1.7 var(--f-mono);color:var(--fg);background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:10px 12px;margin:0;overflow-x:auto;white-space:pre}
.steps-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;counter-reset:s}
.steps-list li{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;counter-increment:s}
.steps-list li::before{content:counter(s);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--accent-weak);color:var(--accent);font:600 13px var(--f-mono)}
.steps-list li.done::before{content:"✓";background:var(--ok-weak);color:var(--ok)}
.steps-list li.done .tx{color:var(--muted)}

/* ---------- Rechnungseditor ---------- */
.items{width:100%}
.items th,.items td{padding:8px 6px}
.items td input,.items td select{width:100%;padding:7px 8px;border:1px solid var(--line);border-radius:6px;background:var(--panel);min-width:0}
.items td input:focus{outline:none;border-color:var(--accent)}
.items td.num{white-space:nowrap}
.items .c-desc{min-width:220px}
.items .c-qty{width:80px}.items .c-unit{width:90px}.items .c-price{width:110px}.items .c-tax{width:84px}.items .c-sum{width:110px}.items .c-x{width:36px}
.totals{display:flex;flex-direction:column;gap:6px;margin-left:auto;min-width:260px}
.totals .row{display:flex;justify-content:space-between;gap:24px}
.totals .row.big{border-top:1px solid var(--line);padding-top:8px;margin-top:4px;font-weight:600;font-size:16px}
.ed-foot{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start;padding:14px 18px;border-top:1px solid var(--line)}

/* ---------- Rechnungsansicht ---------- */
.detail{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.detail > *{min-width:0}
.desk{background:var(--desk);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;align-items:center;gap:20px;overflow:hidden}
.sheet-scale{width:100%;max-width:794px}
.sheet-box{position:relative;width:100%;aspect-ratio:210/297}
.sheet{position:absolute;left:0;top:0;width:210mm;height:297mm;background:#fff;color:#1a1d24;transform-origin:0 0;box-shadow:0 2px 6px rgba(0,0,0,.12),0 12px 32px rgba(0,0,0,.1);overflow:hidden}
.sheet .o{position:absolute;white-space:pre;margin:0}
.sheet .o.ln{background:#000}
.sheet .o.im{object-fit:contain}
.wf{display:flex;flex-direction:column;gap:8px}
.steps{display:flex;gap:4px;margin-bottom:4px}
.steps i{flex:1;height:4px;border-radius:2px;background:var(--line)}
.steps i.on{background:var(--accent)}
.steps.paid i.on{background:var(--ok)}
.steps.overdue i.on{background:var(--bad)}
.stat-line{display:flex;justify-content:space-between;gap:12px;padding:4px 0}
.stat-line span:first-child{color:var(--muted)}
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.timeline li{display:grid;grid-template-columns:10px 1fr;gap:10px;font-size:13px}
.timeline li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--muted);margin-top:6px}
.timeline .d{color:var(--muted);font-size:12px}

/* ---------- Einstellungen ---------- */
.swatches{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.swatch{width:32px;height:32px;border-radius:8px;border:2px solid transparent;cursor:pointer;padding:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.swatch.on{border-color:var(--fg);box-shadow:inset 0 0 0 2px var(--panel)}
.swatch-custom{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.swatch-custom input{width:40px;height:32px;border:1px solid var(--line);border-radius:8px;padding:2px;background:var(--panel);cursor:pointer}
.set-row{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px;padding:16px 18px;border-bottom:1px solid var(--line);align-items:start}
.set-row:last-child{border-bottom:0}
.set-row .t{font-weight:500}
.set-row .d{color:var(--muted);font-size:12.5px;margin-top:2px}
.set-row .c{display:flex;flex-direction:column;gap:10px;align-items:flex-start;min-width:0}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}
.logo-drop{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.logo-prev{width:180px;height:90px;border:1px dashed var(--line-2);border-radius:8px;display:grid;place-items:center;background:#fff;color:#8a909c;font-size:12.5px;padding:8px}
.logo-prev img{max-width:100%;max-height:100%;object-fit:contain}

/* ---------- Designer ---------- */
.dz{display:grid;grid-template-columns:230px minmax(0,1fr) 290px;gap:16px;align-items:start}
.dz > *{min-width:0}
.dz-list{display:flex;flex-direction:column}
.dz-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;cursor:pointer;font-size:13.5px}
.dz-item:hover{background:var(--panel-2)}
.dz-item.on{background:var(--accent-weak);color:var(--accent)}
.dz-item.off .nm{opacity:.45;text-decoration:line-through}
.dz-item .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dz-item .ty{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.dz-item button{border:0;background:transparent;padding:2px;cursor:pointer;color:var(--muted);display:grid}
.dz-item button svg{width:15px;height:15px}
.dz-canvas{background:var(--desk);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;align-items:center;gap:18px;overflow:hidden;position:sticky;top:12px}
.dz-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;width:100%}
.dz-bar .sp{flex:1}
.dz-bar label{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--muted)}
.dz-bar select,.dz-bar input[type=number]{padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.sheet.edit{overflow:visible}
.sheet .grid{position:absolute;inset:0;pointer-events:none}
.sheet .guide{position:absolute;border:1px dashed #3d8bfd;pointer-events:none}
.sheet .guide span{position:absolute;top:-4.2mm;left:0;font:2.6mm/1 var(--f-body);color:#3d8bfd;white-space:nowrap}
.blk{position:absolute;cursor:move;touch-action:none}
.blk::after{content:"";position:absolute;inset:-.4mm;border:.25mm dashed rgba(61,139,253,.35);pointer-events:none}
.blk:hover::after{border-color:rgba(61,139,253,.8)}
.blk.sel::after{border:.4mm solid #3d8bfd}
.blk .lbl-b{position:absolute;left:-.4mm;top:-4.3mm;font:2.5mm/1 var(--f-body);background:#3d8bfd;color:#fff;padding:.6mm 1.2mm;border-radius:.6mm .6mm 0 0;white-space:nowrap;display:none;pointer-events:none}
.blk.sel .lbl-b{display:block}
.blk .rz{position:absolute;right:-1.6mm;bottom:-1.6mm;width:3.2mm;height:3.2mm;background:#fff;border:.4mm solid #3d8bfd;border-radius:.6mm;cursor:nwse-resize;display:none}
.blk.sel .rz{display:block}
.blk .ph{position:absolute;inset:0;display:grid;place-items:center;border:.3mm dashed #b8bfcc;color:#8a909c;font:3mm var(--f-body)}
.blk.flow::before{content:"↕";position:absolute;right:.6mm;top:.4mm;font:3mm/1 var(--f-body);color:#3d8bfd;opacity:.8}
.props{display:flex;flex-direction:column;gap:12px}
.props .row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.props .row4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.props .f input,.props .f select,.props .f textarea{padding:6px 8px;font-size:13px}
.props textarea{font-family:var(--f-mono);font-size:12px!important;min-height:110px}
.ph-list{display:flex;flex-wrap:wrap;gap:4px}
.ph-list button{border:1px solid var(--line);background:var(--panel-2);border-radius:4px;padding:2px 6px;font:11px var(--f-mono);cursor:pointer;color:var(--muted)}
.ph-list button:hover{color:var(--accent);border-color:var(--accent)}
.tgl{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.tgl input{accent-color:var(--accent)}
.dirty{font-size:12.5px;color:var(--warn)}
.loading{display:grid;place-items:center;height:50vh;color:var(--muted)}

/* ---------- Responsiv ---------- */
@media (max-width:1200px){.dz{grid-template-columns:200px minmax(0,1fr)}.dz-props{grid-column:1/-1}.kpis.k6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1000px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid2,.grid2.even,.detail{grid-template-columns:minmax(0,1fr)}
  .dz{grid-template-columns:minmax(0,1fr)}
  .dz-canvas{position:static}
  .set-row{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .side{position:fixed;inset:0 auto 0 0;width:260px;z-index:45;transform:translateX(-100%);transition:transform .2s}
  .app.nav-open .side{transform:none;box-shadow:8px 0 30px rgba(0,0,0,.35)}
  .nav-scrim{position:fixed;inset:0;z-index:44;background:rgba(10,12,18,.42)}
  .topbar{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--side);color:var(--side-strong);position:sticky;top:0;z-index:20}
  .topbar button{background:transparent;border:0;color:inherit;padding:4px;cursor:pointer;display:grid}
  .topbar svg{width:22px;height:22px}
  .topbar .brand-name{font-size:17px}
  .wrap{padding-inline:16px;padding-block:20px 48px}
  .form .f.s3,.form .f.s2,.form .f.s4{grid-column:span 6}
  .desk,.dz-canvas{padding:10px}
  .hide-sm{display:none}
  .aging{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:480px){.kpis,.kpis.k3,.kpis.k6{grid-template-columns:minmax(0,1fr)}.head h1{font-size:22px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}