/* ============================================================================
   Pixi Commerce , Cockpit-Design-System
   Basis (bestehende Klassen, 1:1 erhalten) + Redesign-Layer (elevated).
   Class-kompatibel: alle bisherigen Views funktionieren unverändert, sehen nur
   hochwertiger aus. Neue Komponenten (Entity-Tabs, Baum, Galerie, Toggles …)
   am Ende. Hell/Dunkel über dieselben Tokens.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   BASIS (unverändert übernommen)
   --------------------------------------------------------------------------- */
:root{--bg:#F6F7FB;--surface:#fff;--ink:#151A22;--mut:#5B6472;--faint:#8A93A2;--line:#E8EBF2;--line2:#EEF1F7;
--acc:#5B4BD6;--acc-soft:#EDEAFB;--acc-d:#4636C4;--ok:#0FA678;--ok-soft:#E4F6EF;--warn:#D98324;--warn-soft:#FBF0E2;--pink:#D9498A;
--r:12px;--sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--mono:ui-monospace,'SF Mono',Menlo,monospace;--sb:#12141C;}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0D0F14;--surface:#141922;--ink:#E9ECF3;--mut:#98A2B3;--faint:#6B7480;--line:#232B38;--line2:#1B222D;--acc:#8B7BFF;--acc-soft:#1E2130;--ok-soft:#12251E;--warn-soft:#25200F;--sb:#0A0C11;}}
:root[data-theme="dark"]{--bg:#0D0F14;--surface:#141922;--ink:#E9ECF3;--mut:#98A2B3;--faint:#6B7480;--line:#232B38;--line2:#1B222D;--acc:#8B7BFF;--acc-soft:#1E2130;--ok-soft:#12251E;--warn-soft:#25200F;--sb:#0A0C11;}
:root{color-scheme:light dark}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;-webkit-font-smoothing:antialiased}
.app{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.sb{background:var(--sb);color:#C9CFDB;display:flex;flex-direction:column;padding:14px 12px;position:sticky;top:0;height:100vh;z-index:40}
.brand{display:flex;align-items:center;gap:10px;padding:6px 10px 14px}
.plogo{display:grid;grid-template-columns:repeat(2,9px);grid-auto-rows:9px;gap:2.5px}.plogo i{border-radius:2px;background:var(--acc)}
.plogo i:nth-child(2){background:var(--ok)}.plogo i:nth-child(3){background:var(--pink)}.plogo i:nth-child(4){background:var(--acc);opacity:.5}
.brand b{font-size:15px;color:#fff;font-weight:650}.brand small{display:block;font-family:var(--mono);font-size:8px;letter-spacing:.16em;color:#8B93A5;margin-top:1px}
.nav{overflow-y:auto}
.nav .grp{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:#6B7280;padding:13px 10px 5px}
.nav a{display:flex;align-items:center;gap:11px;padding:10px 10px;border-radius:9px;color:#C1C8D4;font-size:13.5px;cursor:pointer;margin-bottom:1px}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}.nav a.on{background:var(--acc);color:#fff;font-weight:550}
.nav a .ic{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav a .bd{margin-left:auto;font-family:var(--mono);font-size:9px;background:rgba(255,255,255,.14);padding:1px 6px;border-radius:20px}
.nav a .soon{margin-left:auto;font-size:8.5px;color:#7B8496;font-family:var(--mono)}
.sb-foot{margin-top:auto;padding-top:10px;border-top:1px solid rgba(255,255,255,.07);font-size:11px;color:#8B93A5}
.backdrop{display:none}
.main{min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:12px;padding:11px 18px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;flex-wrap:wrap}
.burger{display:none;width:38px;height:38px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);align-items:center;justify-content:center;cursor:pointer}
.burger svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.iconbtn{flex:none;width:38px;height:38px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
.iconbtn:hover{background:var(--bg)}.iconbtn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:root[data-theme="dark"] .iconbtn .ic-moon{display:none}:root[data-theme="dark"] .iconbtn .ic-sun{display:block!important}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .iconbtn .ic-moon{display:none}:root:not([data-theme="light"]) .iconbtn .ic-sun{display:block!important}}
.tenant{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:6px 12px;font-weight:550;font-size:13px;min-width:0}
.tenant .d{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}.tenant .u{font-family:var(--mono);font-size:9px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.content{padding:20px;max-width:1200px;width:100%}
.hd{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:16px;gap:12px;flex-wrap:wrap}
.hd h1{margin:0;font-size:21px;letter-spacing:-.02em}.hd p{margin:3px 0 0;color:var(--mut);font-size:13px}
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--acc);color:#fff;border:0;border-radius:9px;padding:9px 14px;font-family:var(--sans);font-size:12.5px;font-weight:550;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--acc-d)}.btn.sm{padding:6px 11px;font-size:11.5px}
.btn:disabled{opacity:.5;cursor:default}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 15px}
.kpi .lb{font-size:12px;color:var(--mut)}.kpi .v{font-size:23px;font-weight:700;letter-spacing:-.02em;margin-top:6px;font-variant-numeric:tabular-nums}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:16px}
.panel .ph{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line2)}
.panel .ph h3{margin:0;font-size:14px}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:13px}th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line2);white-space:nowrap}
th{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);font-weight:600}tbody tr:last-child td{border-bottom:0}
td.num{font-variant-numeric:tabular-nums}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px}
.pill.ok{background:var(--ok-soft);color:var(--ok)}.pill.wa{background:var(--warn-soft);color:var(--warn)}.pill.ac{background:var(--acc-soft);color:var(--acc-d)}
.pill .d{width:6px;height:6px;border-radius:50%;background:currentColor}
.view{display:none}.view.on{display:block}
.empty{padding:26px 16px;text-align:center;color:var(--faint);font-size:13px}
.vgrp{margin-bottom:8px}.vgrp-h{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:6px 0 3px}
.vgrp-c{display:flex;flex-wrap:wrap;gap:4px}
.vchip{font-size:11px;background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:3px 8px;color:var(--ink);cursor:pointer;line-height:1.3}
.vchip:hover{background:var(--acc);color:#fff;border-color:var(--acc)}
.soonbox{background:var(--surface);border:1px dashed var(--line);border-radius:var(--r);padding:34px 20px;text-align:center;color:var(--mut)}
.soonbox b{color:var(--ink);display:block;font-size:15px;margin-bottom:5px}
.mono{font-family:var(--mono)}
.flbl{display:block;font-size:11px;color:var(--faint);margin-bottom:4px}
.fin{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-family:var(--sans);font-size:13px}
.aedit{position:fixed;inset:0;z-index:60;background:var(--bg);display:none;flex-direction:column}.aedit.open{display:flex}
.aedit-top{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0}
.aedit-top h2{margin:0;font-size:16px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aedit-x{width:36px;height:36px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);cursor:pointer;font-size:18px}
.aedit-tabs{display:flex;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:8px 12px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:57px;z-index:2}
.aedit-tabs button{flex:none;padding:7px 12px;border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--mut);font-family:var(--sans);font-size:12.5px;cursor:pointer;white-space:nowrap}
.aedit-tabs button.on{background:var(--acc);color:#fff;border-color:var(--acc)}
.aedit-body{flex:1;overflow-y:auto;padding:16px;max-width:900px;width:100%;margin:0 auto}
.apane{display:none}.apane.on{display:block}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.fld{margin-bottom:12px}.fin textarea,textarea.fin{min-height:90px;resize:vertical}
.savebar{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:12px 16px;display:flex;gap:10px;align-items:center}
@media(max-width:640px){.grid2,.grid3{grid-template-columns:1fr}.aedit-tabs{top:57px}}
@media(max-width:820px){
  .app{grid-template-columns:1fr}
  .sb{position:fixed;left:0;top:0;width:250px;transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 20px 60px rgba(0,0,0,.4)}
  .app.open .sb{transform:none}
  .app.open .backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:35}
  .burger{display:flex}
  .kpis{grid-template-columns:1fr 1fr}
  .content{padding:16px}
}
@media(max-width:720px){
  .tw{overflow-x:visible}
  .tw table,.tw thead,.tw tbody,.tw tr,.tw td{display:block;width:100%}
  .tw thead{position:absolute;left:-9999px;top:-9999px}
  .tw tr{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 0 10px;background:var(--surface)}
  .tw tbody tr:last-child td{border-bottom:0}
  .tw td{white-space:normal;text-align:right !important;padding:7px 0;border-bottom:1px solid var(--line2);display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:20px}
  .tw td::before{content:attr(data-label);font-weight:600;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);text-align:left;flex:0 0 auto}
  .tw td[data-label=""]::before,.tw td.nolabel::before{content:""}
  .tw td[colspan]{justify-content:center;text-align:center !important}
  .tw td[colspan]::before{content:""}
  .tw td .btn,.tw td button{width:auto}
  .tw td select,.tw td input{max-width:60%}
}
@media(max-width:640px){
  .content div[style*="grid-template-columns"],.aedit-body div[style*="grid-template-columns"]{grid-template-columns:1fr !important}
  #gsearch-wrap{max-width:none;width:auto;flex:1 1 120px}
  .tenant{padding:6px 9px;flex:0 1 auto}
  .top{padding:10px 12px;gap:8px}
  .hd h1{font-size:19px}
  /* Kopf-Aktionsgruppe (Buttons rechts) auf dem Handy umbrechen statt nach rechts rausschieben */
  .hd > div{flex-wrap:wrap;min-width:0}
  /* Speichern-Leiste am Handy NICHT sticky , sonst schwebt sie über den Feldern (Overlap) */
  .savebar{position:static;flex-wrap:wrap}
  .savebar .btn{flex:0 0 auto}
  /* Größere Touch-Ziele: Eingaben, Buttons, Chips auf dem Handy angenehm bedienbar */
  .fin,input.fin,select.fin,textarea.fin{min-height:44px;font-size:15px;padding:10px 12px}
  .btn{min-height:44px;font-size:13.5px;padding:11px 16px}
  .btn.sm{min-height:40px;font-size:12.5px;padding:9px 13px}
  .chip{padding:10px 15px;font-size:13px;min-height:40px}
  /* Filter-Selects in der Auftragsleiste nicht mehr winzig */
  #of-tabs+.filterbox .fin[style*="width:auto"]{width:100%!important;flex:1 1 100%!important}
  /* Spalten-Zahnrad ausblenden , überlagert auf dem Handy die erste Card-Zeile (Desktop-Feature) */
  .coledit-gear{display:none!important}
  /* Objekt-Tab-Leiste weg , die untere Navigation genügt, kein „Tab-Wurst"-Überlauf */
  .etabs{display:none!important}
  /* Platz für die fixe untere Navigation, sonst verschwinden Buttons dahinter */
  .content{padding-bottom:92px}
  /* Aktions-Buttons in Card-Zeilen umbrechen statt rechts abschneiden */
  .tw td{flex-wrap:wrap}
  .tw td .btn{margin:2px 0}
  /* Prozessleiste (Order-to-Cash) am Handy umbrechen statt nach rechts scrollen (kein Abschneiden „Rechnun") */
  .o2c{flex-wrap:wrap;overflow-x:visible;gap:4px 0}
  .o2c-step{flex:1 1 30%;min-width:0;padding:10px 4px}
  .o2c-step:not(:last-child)::after{display:none}
  .o2c-step .o2c-l{white-space:normal;line-height:1.15}
  /* Handeln-nötig-Kacheln: 2 Spalten, nicht abschneiden */
  #dash-todo{grid-template-columns:1fr 1fr!important}
  .todo-card .tl{white-space:normal}
  /* Firmen-/B2B-B2C-Umschalter am Handy kompakt, kein Rechts-Überlauf */
  .scopebar{padding:8px 12px;gap:8px 10px}
  .scope-sel{max-width:44vw}
  .scope-aud .stab{padding:8px 13px}
  /* Bild-Bereich im Editor nicht halben Screen groß */
  .img-drop{padding:14px}
  .img-card img,.img-drop{max-height:150px}
  /* Kategorien: größere Zeilen + Bearbeiten-Icon IMMER sichtbar (kein Hover auf dem Handy) */
  .tnode{padding:12px 10px;font-size:15px;gap:10px}
  .tnode .tedit{opacity:.85!important;font-size:19px;padding:6px 10px;margin-left:6px}
  .tnode .cx{width:18px;height:18px}
  /* Kopfleiste: redundantes Mini-Logo weg, Firmenname sauber abschneiden (kein Overlap) */
  .brand-mini{display:none}
  .tenant{max-width:44vw;overflow:hidden}
  #tenant-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:400px){ .tenant .u{display:none} }
.img-drop{border:2px dashed var(--line2);border-radius:12px;padding:26px;text-align:center;color:var(--mut);transition:border-color .15s,background .15s;cursor:pointer}
.img-drop:hover,.img-drop.drag{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 7%,transparent)}
.img-drop-inner{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px}
.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.img-card{position:relative;border:1px solid var(--line2);border-radius:10px;overflow:hidden;background:var(--card2,var(--bg2,#fafafa));cursor:grab}
.img-card.dragging{opacity:.4}
.img-card img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.img-card .img-del{position:absolute;top:5px;right:5px;background:rgba(0,0,0,.6);color:#fff;border:0;border-radius:6px;width:24px;height:24px;font-size:14px;line-height:1;cursor:pointer}
.img-card .img-main{position:absolute;top:5px;left:5px;background:var(--acc);color:#fff;font-size:10px;font-weight:600;padding:2px 6px;border-radius:6px}
#ae-vm-table{min-width:640px;font-size:12px}
#ae-vm-table th{white-space:nowrap;font-size:11px;color:var(--mut);text-align:left;padding:6px 8px}
#ae-vm-table td{padding:4px 8px;border-top:1px solid var(--line2)}
#ae-vm-table input.vm-in{width:100%;min-width:64px;padding:4px 6px;border:1px solid var(--line2);border-radius:6px;background:var(--card,transparent);color:inherit;font-size:12px}
#ae-vm-table tr.vm-dirty td{background:color-mix(in srgb,#ff9800 14%,transparent)}
#ae-vm-table td.vm-attr{font-weight:600;white-space:nowrap}

/* ===========================================================================
   REDESIGN-LAYER , elevated. Kommt NACH der Basis → gewinnt bei Konflikten.
   =========================================================================== */
:root{
  --surface2:#FBFCFE;--acc-soft2:#EDEAFB;--pink-soft:#FBE9F2;
  --sh-1:0 1px 2px rgba(16,20,30,.06),0 1px 3px rgba(16,20,30,.04);
  --sh-2:0 4px 12px rgba(16,20,30,.08),0 2px 4px rgba(16,20,30,.05);
  --sh-3:0 12px 32px rgba(16,20,30,.14),0 4px 8px rgba(16,20,30,.06);
  --r-sm:9px;--sb-line:#22262F;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--surface2:#10151D;--pink-soft:#2A1622;
  --sh-1:0 1px 2px rgba(0,0,0,.4);--sh-2:0 4px 14px rgba(0,0,0,.5);--sh-3:0 16px 40px rgba(0,0,0,.6);--sb-line:#1A1F29;}}
:root[data-theme="dark"]{--surface2:#10151D;--pink-soft:#2A1622;
  --sh-1:0 1px 2px rgba(0,0,0,.4);--sh-2:0 4px 14px rgba(0,0,0,.5);--sh-3:0 16px 40px rgba(0,0,0,.6);--sb-line:#1A1F29;}

/* Sidebar , aktiver Eintrag als Gradient-Pill mit Tiefe */
.nav a.on{background:linear-gradient(90deg,var(--acc),color-mix(in srgb,var(--acc) 68%,#000));box-shadow:var(--sh-1)}
.brand b{font-weight:680}

/* Buttons + Karten , dezente Tiefe */
.btn{border-radius:var(--r-sm);font-weight:580;box-shadow:var(--sh-1)}
.btn:active{transform:translateY(.5px)}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{background:var(--bg)}
.iconbtn{border-radius:var(--r-sm)}
.tenant{border-radius:var(--r-sm)}
.kpi{box-shadow:var(--sh-1);padding:15px 16px}
.kpi .v{font-size:25px;font-weight:720;margin-top:8px}
.panel{box-shadow:var(--sh-1)}
.panel .ph h3{font-weight:640}
tbody tr:hover td{background:var(--surface2)}
.pill{font-weight:650}
.pill.mut{background:var(--line2);color:var(--mut)}

/* Suche in der Topbar , edler */
#gsearch-wrap input,.top input[type="search"]{border-radius:var(--r-sm)}

/* Artikel-Editor , Tab-Leiste als Unterstreichung (premium statt Pillen),
   Overlay-Kopf mit Tiefe. */
.aedit-tabs{gap:2px;padding:0 12px}
.aedit-tabs button{border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--mut);padding:12px 13px;font-weight:540}
.aedit-tabs button:hover{color:var(--ink)}
.aedit-tabs button.on{background:transparent;color:var(--acc-d);border-bottom-color:var(--acc);font-weight:680}
.aedit-top{box-shadow:var(--sh-1)}
.aedit-top h2{font-weight:680;letter-spacing:-.01em}

/* Bild-Galerie , aufgewertet: Drag-Handle, Hauptbild-Badge, Ordnungszahl */
.img-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.img-card{border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-1)}
.img-card.over{outline:2px dashed var(--acc);outline-offset:-3px}
.img-card .img-handle{position:absolute;top:7px;left:7px;width:22px;height:22px;border-radius:6px;background:rgba(10,12,17,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;cursor:grab;backdrop-filter:blur(4px);z-index:2}
.img-card .img-main{bottom:7px;left:7px;top:auto;font-size:9.5px;font-weight:800;letter-spacing:.04em;padding:2px 7px}
.img-card .img-del{border-radius:6px;opacity:0;transition:.15s;z-index:2}
.img-card:hover .img-del{opacity:1}
.img-card .img-ord{position:absolute;bottom:7px;right:7px;font-family:var(--mono);font-size:10px;color:#fff;background:rgba(10,12,17,.55);padding:1px 6px;border-radius:5px;z-index:2}
.img-drop{border-radius:12px;background:var(--surface2)}

/* --- NEUE KOMPONENTEN --- */

/* Entity-Tab-Leiste (mehrere Objekte offen, wie JTL) */
.etabs{display:flex;align-items:center;gap:2px;padding:7px 14px 0;background:var(--surface);border-bottom:1px solid var(--line);overflow-x:auto;-webkit-overflow-scrolling:touch;position:sticky;top:61px;z-index:19}
.etab{display:flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid transparent;border-bottom:0;border-radius:10px 10px 0 0;color:var(--mut);font-size:13px;font-weight:530;cursor:pointer;white-space:nowrap;background:transparent;position:relative;top:1px;flex:none}
.etab:hover{background:var(--bg)}
.etab.on{background:var(--bg);color:var(--ink);border-color:var(--line);font-weight:620}
.etab .ei{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8}
.etab .ex{width:17px;height:17px;border-radius:5px;display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:15px;margin-left:1px;line-height:1}
.etab .ex:hover{background:color-mix(in srgb,var(--ink) 13%,transparent);color:var(--ink)}

/* Arbeitsbereich mit Baum + Liste (Artikel/Kategorien) */
.work{display:grid;grid-template-columns:250px 1fr;gap:0;align-items:start}
.tree{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--sh-1);padding:12px 8px;position:sticky;top:112px;max-height:calc(100vh - 130px);overflow:auto}
.tree .th{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding:6px 10px 8px}
.tnode{display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:8px;font-size:13px;cursor:pointer;color:var(--ink)}
.tnode:hover{background:var(--bg)}.tnode.on{background:var(--acc-soft);color:var(--acc-d);font-weight:600}
.tnode .cx{width:14px;height:14px;flex:none;color:var(--faint);transition:transform .15s;stroke:currentColor;fill:none;stroke-width:2}
.tnode.open>.cx{transform:rotate(90deg)}
.tnode .ct{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--faint)}
.tnode .badge-shop{margin-left:auto;font-size:8.5px;font-weight:700;background:var(--acc);color:#fff;padding:1px 6px;border-radius:5px}
.tchild{margin-left:15px;border-left:1px solid var(--line2);padding-left:3px}
.tchild.collapsed{display:none}
.work .listwrap{min-width:0;padding-left:16px}

/* Filter-Chips */
.chip{font-size:12px;font-weight:560;color:var(--mut);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.chip:hover{background:var(--bg)}
.chip.on{background:var(--acc-soft);color:var(--acc-d);border-color:transparent}

/* Thumbnails + Artikelzeile */
.thumb{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:19px;flex:none;box-shadow:var(--sh-1);overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}
.artrow{display:flex;align-items:center;gap:11px;min-width:0}
.artrow .nm{font-weight:580}.artrow .sk{font-family:var(--mono);font-size:11px;color:var(--faint)}

/* Kanal-Punkte (Aktivierung je Kanal) */
.chdots{display:inline-flex;gap:4px}
.chdot{width:17px;height:17px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:#fff}
.chdot.off{background:var(--line2);color:var(--faint)}

/* Toggle-Schalter */
.toggle{width:40px;height:23px;border-radius:20px;background:var(--line);position:relative;cursor:pointer;flex:none;transition:.18s;border:0;padding:0}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:var(--sh-1);transition:.18s}
.toggle.on{background:var(--acc)}.toggle.on::after{transform:translateX(17px)}

/* Detail-Kopf (Artikel/Kunde) */
.det-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.det-head .cover{width:60px;height:60px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:var(--sh-2);overflow:hidden;flex:none}
.det-head .cover img{width:100%;height:100%;object-fit:cover}
.det-head .dmeta{display:flex;align-items:center;gap:9px;margin-top:6px;flex-wrap:wrap}
.det-head .sk{font-family:var(--mono);font-size:12px;color:var(--mut)}

/* Mehrlager-Zeile */
.wh{display:flex;align-items:center;gap:11px}
.wh-in{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 10px;font:inherit;font-size:13px;color:var(--ink);width:100px;text-align:right}

/* Kanal-Karte im Artikel-Detail */
.ch-card{display:flex;align-items:center;gap:13px;padding:13px 15px;border:1px solid var(--line);border-radius:var(--r);margin-bottom:11px;background:var(--surface);box-shadow:var(--sh-1);flex-wrap:wrap}
.ch-logo{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:#fff;flex:none}
.ch-card .info{flex:1;min-width:120px}.ch-card .info b{font-size:14px}.ch-card .info span{display:block;font-size:12px;color:var(--mut);margin-top:2px}
.root-sel{font-size:12px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:6px 9px;font-family:var(--sans)}

/* Sparkline (Dashboard-KPI) */
.spark{height:34px;margin-top:9px;display:flex;align-items:flex-end;gap:3px}
.spark i{flex:1;background:color-mix(in srgb,var(--acc) 55%,transparent);border-radius:2px 2px 0 0}
.kpi .dl{font-size:11.5px;font-weight:640;margin-top:5px}
.kpi .up{color:var(--ok)}.kpi .dn{color:var(--pink)}

/* Entity-Tabs + Baum auf dem Handy */
@media(max-width:820px){
  .etabs{top:57px}
  .work{grid-template-columns:1fr}
  .tree{position:static;max-height:none;margin-bottom:14px}
  .work .listwrap{padding-left:0}
  .det-head .cover{width:50px;height:50px;font-size:23px}
}

/* ============================================================================
   SHELL v2: keine Sidebar , Steuerung nur über schwebende Bottom-Tab-Leiste
   (Desktop + Mobile) + „Mehr"-Voll-Menü. Oben bleiben die Objekt-Tabs (#etabs).
   ========================================================================== */
.sb{display:none!important}
.app{grid-template-columns:1fr!important}

/* Sicherheitsmodus , kleines Icon in der Topbar + Popover (statt großem Banner) */
.safe-btn{color:#c0392b;border-color:color-mix(in srgb,#c0392b 34%,var(--line))}
.safe-btn:hover{background:color-mix(in srgb,#c0392b 9%,var(--surface))}
:root[data-theme="dark"] .safe-btn{color:#ff9a9a;border-color:#5a2530}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .safe-btn{color:#ff9a9a;border-color:#5a2530}}
.safe-pop{position:fixed;top:58px;right:14px;z-index:950;width:min(92vw,340px);background:var(--surface);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-3);padding:13px 15px;font-size:12.5px;line-height:1.5;color:var(--ink)}
.safe-pop h4{margin:0 0 6px;font-size:13px;font-weight:680;display:flex;align-items:center;gap:7px}
.safe-pop h4 .dot{width:8px;height:8px;border-radius:50%;background:#c0392b;flex:none}
.safe-pop .mut{color:var(--mut)}

/* Topbar: Brand-Mini + User-Chip (aus der früheren Sidebar hierher) */
.brand-mini{display:flex;align-items:center;gap:9px;padding-right:4px;flex:none}
.brand-mini .plogo{transform:scale(.95)}
.brand-mini b{font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.whoami{font-size:11px;color:var(--faint);white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis;flex:none}
.logout{color:var(--mut);text-decoration:underline;font-size:11px;white-space:nowrap;flex:none}

/* Schwebende Bottom-Leiste , Desktop: zentrierte dunkle Pille */
.botbar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:3px;padding:7px 8px;background:var(--sb);
  border:1px solid var(--sb-line);border-radius:999px;
  box-shadow:0 18px 44px rgba(8,10,16,.34),0 6px 14px rgba(8,10,16,.22);max-width:calc(100vw - 28px)}
.botbar .bt{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:60px;
  padding:8px 12px;border-radius:16px;color:#8B93A5;font-size:10.5px;font-weight:560;cursor:pointer;
  text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:color .12s,background .12s}
.botbar .bt svg{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.botbar .bt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.botbar .bt:hover{color:#EEF1F7}
.botbar .bt.on{color:#fff;background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 85%,#000),var(--acc))}
.botbar .bt.more{color:#C9CFDB}
.botbar .bt-sep{width:1px;height:30px;background:var(--sb-line);margin:0 3px;flex:none}
.content{padding-bottom:104px}
.aedit.open .aedit-body{padding-bottom:112px}

/* „Mehr" , Voll-Menü aller Bereiche (Bottom-Sheet) */
.mm-scrim{position:fixed;inset:0;z-index:80;background:rgba(6,8,12,.5);backdrop-filter:blur(3px);
  display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
.mm-scrim.on{opacity:1;pointer-events:auto}
.megamenu{width:100%;max-width:860px;max-height:82vh;overflow:auto;background:var(--surface);
  border:1px solid var(--line);border-radius:20px 20px 0 0;box-shadow:0 -20px 48px rgba(8,10,16,.4);
  padding:14px 22px calc(44px + env(safe-area-inset-bottom,0px));transform:translateY(24px);transition:transform .22s}
.mm-scrim.on .megamenu{transform:none}
.mm-grip{width:44px;height:4px;border-radius:3px;background:var(--line);margin:2px auto 12px}
.mm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.mm-head h3{margin:0;font-size:16px;font-weight:680}
.mm-x{cursor:pointer;color:var(--mut);font-size:20px;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.mm-x:hover{background:var(--bg)}
.mm-grp{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:16px 2px 8px}
.mm-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mm-tile{display:flex;align-items:center;gap:11px;padding:12px 13px;border:1px solid var(--line);border-radius:13px;background:var(--surface2);cursor:pointer;transition:.12s;color:var(--ink)}
.mm-tile:hover{border-color:var(--acc);box-shadow:var(--sh-1);transform:translateY(-1px)}
.mm-tile .ic{width:34px;height:34px;flex:none;border-radius:10px;background:var(--acc-soft);color:var(--acc-d);display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1}
.mm-tile .ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mm-tile .nm{font-size:13px;font-weight:600}
.mm-tile.on{border-color:var(--acc);background:var(--acc-soft)}

/* Mobile: vollbreite Leiste, nur Primär-Tabs + Mehr; Extra-Tabs aus */
@media(max-width:820px){
  .botbar{left:0;right:0;bottom:0;transform:none;max-width:none;width:100%;border:0;border-top:1px solid var(--sb-line);
    border-radius:16px 16px 0 0;justify-content:space-around;gap:0;
    padding:7px 4px calc(9px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 28px rgba(0,0,0,.32)}
  .botbar .bt{min-width:0;flex:1 1 0;padding:6px 2px}
  .botbar .bt.desk-only{display:none}
  .botbar .bt-sep{display:none}
  .content{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}
  .aedit.open .aedit-body{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))}
  .brand-mini b{display:none}
  .whoami{display:none}
  .mm-tiles{grid-template-columns:1fr 1fr}
  .megamenu{max-width:none;max-height:78vh}
}

/* ============================================================================
   === v3 SKIN , 1:1 Look des freigegebenen Prototyps v3 (Farben/Chrome/Karten/Hero)
   Überschreibt Tokens am Ende (gewinnt per Kaskade). Chris-Freigabe 2026-08-19.
   ========================================================================== */
:root{
  --bg:#F4F5FA;--surface:#fff;--surface2:#F7F8FC;--ink:#141824;--mut:#5A6472;--faint:#8B94A5;
  --line:#E7EAF2;--line2:#EFF1F8;--acc:#5B4BD6;--acc2:#8B5CF6;--acc-soft:#ECEAFB;--acc-d:#4536C0;
  --ok:#0FA678;--ok-soft:#E3F6EF;--warn:#E0912F;--warn-soft:#FCF1E1;--pink:#E14A8B;--pink-soft:#FCE9F2;--red:#DC3A4B;
  --sb:#12141C;--sb-ink:#C4CBD8;--sb-line:#262B37;
  --r:14px;--r-lg:20px;--r-sm:10px;
  --sh-1:0 1px 2px rgba(20,24,36,.05),0 2px 6px rgba(20,24,36,.05);
  --sh-2:0 6px 18px rgba(20,24,36,.09),0 2px 6px rgba(20,24,36,.05);
  --sh-3:0 18px 44px rgba(20,24,36,.16),0 6px 14px rgba(20,24,36,.07);
}
:root[data-theme="dark"]{
  --bg:#0B0D12;--surface:#141922;--surface2:#111620;--ink:#E9ECF3;--mut:#98A2B3;--faint:#69727F;
  --line:#242C3A;--line2:#1A212C;--acc:#8B7BFF;--acc2:#A98BFF;--acc-soft:#1E2233;--acc-d:#A99BFF;
  --ok:#2BD4A0;--ok-soft:#10241D;--warn:#E7A54B;--warn-soft:#241F10;--pink:#F06BAA;--pink-soft:#2A1622;--red:#F26D7A;
  --sb:#080A0E;--sb-ink:#AEB6C4;--sb-line:#181D27;
  --sh-1:0 1px 2px rgba(0,0,0,.4);--sh-2:0 6px 18px rgba(0,0,0,.5);--sh-3:0 18px 44px rgba(0,0,0,.62);
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0B0D12;--surface:#141922;--surface2:#111620;--ink:#E9ECF3;--mut:#98A2B3;--faint:#69727F;
  --line:#242C3A;--line2:#1A212C;--acc:#8B7BFF;--acc2:#A98BFF;--acc-soft:#1E2233;--acc-d:#A99BFF;
  --ok:#2BD4A0;--ok-soft:#10241D;--warn:#E7A54B;--warn-soft:#241F10;--pink:#F06BAA;--pink-soft:#2A1622;--red:#F26D7A;
  --sb:#080A0E;--sb-ink:#AEB6C4;--sb-line:#181D27;
  --sh-1:0 1px 2px rgba(0,0,0,.4);--sh-2:0 6px 18px rgba(0,0,0,.5);--sh-3:0 18px 44px rgba(0,0,0,.62);
}}

/* Topbar , glassy + Pill-Suche */
.top{background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:blur(10px)}
.brand-mini{display:flex;align-items:center;gap:9px;flex:none}
.brand-mini b{font-size:14.5px;font-weight:720;letter-spacing:-.01em}
.brand-mini .plogo{display:grid;grid-template-columns:repeat(2,8px);grid-auto-rows:8px;gap:2.5px}
.brand-mini .plogo i{border-radius:2px;background:var(--acc)}
.brand-mini .plogo i:nth-child(2){background:var(--ok)}.brand-mini .plogo i:nth-child(3){background:var(--pink)}.brand-mini .plogo i:nth-child(4){background:var(--acc2)}
#gsearch{border-radius:999px;background:var(--bg);padding:9px 15px !important}
.tenant{border-radius:999px}
.iconbtn{border-radius:12px}

/* Objekt-Tabs (etabs) , v3 */
.etabs{gap:3px;padding:8px 14px 0}
.etab{border-radius:12px 12px 0 0;gap:9px}
.etab.on{font-weight:640}
.etab .ti{width:20px;height:20px;border-radius:6px;object-fit:cover;flex:none}

/* Bottom-Leiste , v3 Gradient (acc2->acc) */
.botbar .bt.on{background:linear-gradient(180deg,var(--acc2),var(--acc))}

/* Editor als v3-Detail: Kopf mit Cover + Pills, Pill-Tabs, große Galerie */
.aedit-top{gap:14px;padding:16px 20px}
.ae-cover{width:50px;height:50px;border-radius:12px;overflow:hidden;box-shadow:var(--sh-2);flex:none;background:var(--surface2);display:none}
.ae-cover img{width:100%;height:100%;object-fit:cover;display:block}
.aedit-top h2{font-size:20px;font-weight:760;letter-spacing:-.02em;flex:0 1 auto}
#ae-pills{display:inline-flex;gap:7px;flex-wrap:wrap;align-items:center}
.aedit-tabs{gap:3px;padding:12px 18px 0;border-bottom:0}
.aedit-tabs button{border:0;border-radius:10px;background:transparent;color:var(--mut);padding:10px 15px;font-weight:560}
.aedit-tabs button:hover{background:var(--surface)}
.aedit-tabs button.on{background:var(--surface);color:var(--acc-d);font-weight:680;box-shadow:var(--sh-1);border-bottom:0}
.aedit-body{max-width:1080px}
.img-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.img-card{border-radius:16px}
.img-card img{border-radius:15px}

/* Artikel , Karten-Galerie (bild-stark) */
.artbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.chip{font-size:12.5px;font-weight:580;color:var(--mut);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:7px 13px;cursor:pointer;user-select:none}
.chip.on{background:var(--acc-soft);color:var(--acc-d);border-color:transparent}
.viewtoggle{margin-left:auto;display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.viewtoggle button{border:0;background:transparent;color:var(--mut);padding:8px 12px;cursor:pointer;display:flex;align-items:center;gap:6px;font-family:var(--sans);font-size:12px;font-weight:600}
.viewtoggle button.on{background:var(--acc);color:#fff}
.viewtoggle svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:18px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);cursor:pointer;transition:transform .16s,box-shadow .16s,border-color .16s}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:color-mix(in srgb,var(--acc) 32%,var(--line))}
.pcard .pimg{aspect-ratio:1;position:relative;overflow:hidden;background:var(--surface2)}
.pcard .pimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.pcard:hover .pimg img{transform:scale(1.04)}
.pcard .pimg .ph-emoji{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:52px}
.pcard .ov-top{position:absolute;top:11px;left:11px;right:11px;display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.pcard .pbody{padding:14px 15px 16px}
.pcard .pnm{font-size:14px;font-weight:680;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .psk{font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .prow{display:flex;align-items:center;justify-content:space-between;margin-top:11px;gap:8px}
.pcard .pprice{font-size:16px;font-weight:760;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pcard .pprice small{font-size:11px;font-weight:600;color:var(--faint)}
.pcard .pstock{font-size:12px;color:var(--mut);white-space:nowrap}
.pill.rd{background:color-mix(in srgb,var(--red) 15%,transparent);color:var(--red)}

/* Artikel-Detail , Hero oben im Allgemein-Reiter */
.aeh{display:grid;grid-template-columns:minmax(0,1fr) 1.05fr;gap:24px;margin-bottom:20px}
.aeh-main{aspect-ratio:1;border-radius:var(--r-lg);overflow:hidden;background:var(--surface2);border:1px solid var(--line);box-shadow:var(--sh-2)}
.aeh-main img{width:100%;height:100%;object-fit:cover;display:block}
.aeh-main .ph-emoji{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:70px}
.aeh-thumbs{display:flex;gap:11px;margin-top:14px;flex-wrap:wrap}
.aeh-th{width:64px;height:64px;border-radius:13px;overflow:hidden;border:2px solid transparent;cursor:pointer;background:var(--surface2)}
.aeh-th img{width:100%;height:100%;object-fit:cover;display:block}
.aeh-th.on{border-color:var(--acc)}
.aeh-info h2{margin:0 0 3px;font-size:20px;font-weight:760;letter-spacing:-.02em}
.aeh-price{font-size:28px;font-weight:800;letter-spacing:-.03em;margin:14px 0 3px;font-variant-numeric:tabular-nums}
.aeh-price small{font-size:13px;font-weight:600;color:var(--mut)}
.aeh-facts{margin-top:16px;border-top:1px solid var(--line2)}
.aeh-fact{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line2);font-size:13px}
.aeh-fact .k{color:var(--mut)}.aeh-fact .v{font-weight:600;text-align:right}

@media(max-width:820px){
  .pgrid{grid-template-columns:1fr 1fr;gap:14px}
  .aeh{grid-template-columns:1fr;gap:14px}
  .aedit-top{padding:14px 16px}
  .aedit-top h2{font-size:18px}
}

/* JTL-Stil Kategorie → Artikel: Zähler im Baum + Kategorie-Kopf über den Karten */
.tnode .tlbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tcount{margin-left:auto;font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--mut);background:var(--line2);border-radius:20px;padding:1px 8px;flex:none}
.tnode.on .tcount{background:color-mix(in srgb,var(--acc) 22%,transparent);color:var(--acc-d)}
.tcount.zero{opacity:.45}
.cathd{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:0 2px}
.cathd .cathd-ic{font-size:18px}
.cathd b{font-size:17px;font-weight:740;letter-spacing:-.01em}
.cathd .cathd-n{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--mut);background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:4px 12px}

/* Kategorie direkt aus dem Baum bearbeiten (Stift) */
.tnode .tedit{flex:none;opacity:0;color:var(--faint);font-size:12px;cursor:pointer;padding:0 4px;border-radius:5px;transition:opacity .12s}
.tnode:hover .tedit{opacity:.8}
.tnode .tedit:hover{opacity:1;color:var(--acc-d);background:var(--acc-soft)}

/* Globaler Toast (konsistentes Feedback) */
#toastwrap{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--sb);color:var(--sb-ink);border:1px solid var(--sb-line);border-radius:var(--r);padding:10px 16px;font-size:13px;box-shadow:var(--sh-2);opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;max-width:90vw}
.toast.on{opacity:1;transform:translateY(0)}
.toast.ok{border-left:3px solid var(--ok)}.toast.err{border-left:3px solid var(--red)}

/* ============================================================================
   === KONSOLIDIERUNG (2026-08-24, aus Multi-Modell-Review) ===
   Steht bewusst GANZ am Ende → gewinnt per Kaskade, ohne die Alt-Schichten zu
   löschen (kein Blind-Refactor). Behebt: undefinierte Tokens, fehlende .r-Regel,
   liefert Loading/Empty/Banner-Primitive + Text-Stufen.
   ========================================================================== */
:root{
  --fg:var(--ink); --fg-muted:var(--mut); --border:var(--line);
  --green:var(--ok); --yellow:var(--warn); --primary:var(--acc);
  --text-xs:11px; --text-sm:12.5px; --text-md:14px; --text-lg:16px; --text-xl:21px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
}
/* Rechtsbündig (war 10× benutzt, ohne Regel) */
th.r,td.r,.r{text-align:right}
td.r,.num.r{font-variant-numeric:tabular-nums}
/* Text-Stufen als Utilities (statt ~11 Inline-Größen) */
.t-xs{font-size:var(--text-xs)}.t-sm{font-size:var(--text-sm)}.t-md{font-size:var(--text-md)}
.t-lg{font-size:var(--text-lg);font-weight:640}.t-xl{font-size:var(--text-xl);font-weight:720;letter-spacing:-.02em}
.t-mut{color:var(--fg-muted)}
/* Marken-Buttons als Klasse statt Inline (#ffcc00 DHL etc.) */
.btn.dhl{background:#FFCC00;color:#111;box-shadow:var(--sh-1)}
.btn.dhl:hover{background:#f0c000}
/* Loading-Skeleton , eine Klasse, überall nutzbar */
.sk-row{display:block;height:13px;border-radius:6px;margin:9px 0;
  background:linear-gradient(90deg,var(--line2) 25%,var(--line) 37%,var(--line2) 63%);
  background-size:400% 100%;animation:sk 1.3s ease-in-out infinite}
@keyframes sk{0%{background-position:100% 0}100%{background-position:-100% 0}}
.sk-cell{height:11px;border-radius:5px;background:var(--line2);animation:sk 1.3s ease-in-out infinite;background-image:linear-gradient(90deg,var(--line2) 25%,var(--line) 37%,var(--line2) 63%);background-size:400% 100%}
@media(prefers-reduced-motion:reduce){.sk-row,.sk-cell{animation:none}}
/* Empty-State mit Aktion (statt reiner Grau-Text) */
.empty-cta{padding:30px 16px;text-align:center;color:var(--faint)}
.empty-cta .ec-ic{font-size:30px;opacity:.7;margin-bottom:8px}
.empty-cta .ec-t{color:var(--fg);font-weight:600;font-size:14px;margin-bottom:3px}
.empty-cta .ec-d{font-size:12.5px;margin-bottom:12px}
/* Fehler-Zustand einer View */
.view-error{margin:8px 0;padding:12px 15px;border:1px solid color-mix(in srgb,var(--red) 40%,var(--line));
  border-radius:var(--r);background:color-mix(in srgb,var(--red) 8%,var(--surface));color:var(--fg);font-size:13px;
  display:flex;align-items:center;gap:10px;justify-content:space-between}
.view-error button{flex:none}
/* Banner (systemischer Zustand, z.B. Sync gestört) */
.banner{display:flex;align-items:center;gap:10px;padding:10px 15px;border-radius:var(--r);font-size:13px;margin-bottom:14px}
.banner.warn{background:var(--warn-soft);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent)}
.banner.err{background:color-mix(in srgb,var(--red) 10%,transparent);color:var(--red);border:1px solid color-mix(in srgb,var(--red) 30%,transparent)}
.banner.info{background:var(--acc-soft);color:var(--acc-d)}
/* Sichtbarer Fokus (A11y) , war nirgends definiert */
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
.botbar .bt:focus-visible,.mm-tile:focus-visible{outline-offset:-2px}
/* „Handeln nötig"-Kacheln (Dashboard) */
.todo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:10px;margin-bottom:16px}
.todo-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;cursor:pointer;box-shadow:var(--sh-1);transition:transform .12s,border-color .12s;text-align:left}
.todo-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--acc) 30%,var(--line))}
.todo-card .tv{font-size:24px;font-weight:780;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.todo-card .tl{font-size:12px;color:var(--fg-muted);margin-top:2px}
.todo-card.alert .tv{color:var(--red)}
.todo-card.ok .tv{color:var(--ok)}
/* Einstellungen als Sekundärnav */
.settings-wrap{display:grid;grid-template-columns:210px 1fr;gap:18px;align-items:start}
.settings-nav{position:sticky;top:112px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--sh-1);padding:8px;max-height:calc(100vh - 130px);overflow:auto}
.settings-nav a{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:9px;color:var(--fg);font-size:13px;cursor:pointer;font-weight:530}
.settings-nav a:hover{background:var(--bg)}
.settings-nav a.on{background:var(--acc-soft);color:var(--acc-d);font-weight:650}
.settings-main{min-width:0}
.settings-sec{scroll-margin-top:120px}
@media(max-width:820px){
  .settings-wrap{grid-template-columns:1fr}
  .settings-nav{position:static;max-height:none;display:flex;gap:4px;overflow-x:auto;margin-bottom:12px}
  .settings-nav a{white-space:nowrap}
}

/* Artikel-Editor: mobiler Reiter-Dropdown statt 14 scrollender Tabs + Desktop-Scroll-Hinweis */
.ae-tab-select{display:none;margin:10px 16px 0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--fg);font-size:13px;font-weight:600;width:calc(100% - 32px)}
.aedit-tabs{position:relative;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
@media(max-width:640px){ .aedit-tabs{display:none} .ae-tab-select{display:block} }

/* Order-to-Cash-Prozessleiste (Dashboard) */
.o2c{display:flex;align-items:stretch;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);padding:6px;margin-bottom:16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.o2c-step{flex:1 1 0;min-width:96px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 8px;border-radius:10px;cursor:pointer;text-align:center;position:relative;color:var(--fg);transition:background .12s}
.o2c-step:hover{background:var(--surface2)}
.o2c-step .o2c-n{font-size:20px;font-weight:760;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.o2c-step .o2c-l{font-size:11px;color:var(--fg-muted)}
.o2c-step:not(:last-child)::after{content:"›";position:absolute;right:-3px;top:50%;transform:translateY(-50%);color:var(--faint);font-size:18px;z-index:1}
.o2c-step.warn .o2c-n{color:var(--warn)}

/* Berichte: inline-Flex-Filter-/Aktionszeilen brechen mobil um (kein Ueberlauf) */
@media(max-width:640px){ #berichte div[style*="display:flex"]{flex-wrap:wrap} }

/* === Vorlagen-Editor: Tabs + Farbwahl + Fehlerbanner === */
.tpl-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px;border-bottom:1px solid var(--line)}
.tpl-tabs button{border:0;border-bottom:2px solid transparent;background:transparent;color:var(--mut);padding:10px 14px;font-family:var(--sans);font-size:13px;font-weight:560;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.tpl-tabs button:hover{color:var(--ink)}
.tpl-tabs button.on{color:var(--acc-d);border-bottom-color:var(--acc);font-weight:680}
.tpl-pane{display:none}.tpl-pane.on{display:block}
.tpl-color-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface2)}
.tpl-color-row label{font-size:12px;color:var(--fg-muted);display:flex;align-items:center;gap:7px}
.tpl-color-row input[type=color]{width:38px;height:30px;border:1px solid var(--line);border-radius:8px;padding:0;background:none;cursor:pointer}
.tpl-swatch{width:22px;height:22px;border-radius:6px;border:1px solid var(--line);cursor:pointer}
.tpl-errbar{margin:0 0 10px;padding:10px 13px;border-radius:10px;font-size:12.5px;display:none}
.tpl-errbar.show{display:block}
.tpl-errbar.err{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red);border:1px solid color-mix(in srgb,var(--red) 35%,transparent)}
.tpl-errbar.ok{background:var(--ok-soft);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent)}
.tpl-errbar ul{margin:6px 0 0;padding-left:18px}
.vchip.addvar::before{content:"+";font-weight:800;margin-right:4px;color:var(--acc)}
@media(max-width:820px){ #tpl-grid{grid-template-columns:1fr !important} }
.tpl-pane-preview{display:block}
.tpl-tab-mob{display:none}
@media(max-width:820px){
  .tpl-pane-preview{display:none}
  .tpl-pane-preview.on{display:block}
  .tpl-tab-mob{display:inline-flex}
}

/* Objekt-Tabs (offene Editoren) , durch Punkt vom View-Tab unterschieden */
.etab-obj .etobj-dot{width:7px;height:7px;border-radius:50%;background:var(--acc2,var(--acc));flex:none}
.etab-obj.on .etobj-dot{background:#fff}
.etab-obj{font-style:normal}

/* === Spalteneditor (Spalten ein-/ausblenden je Liste) === */
.coledit-gear{position:absolute;top:6px;right:6px;width:28px;height:28px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--mut);cursor:pointer;font-size:14px;z-index:6;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-1)}
.coledit-gear:hover{background:var(--bg);color:var(--ink)}
.coledit-menu{position:absolute;z-index:9999;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh-3);padding:8px;min-width:190px;max-height:340px;overflow:auto}
.coledit-menu .cm-h{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);padding:2px 6px 6px;display:flex;justify-content:space-between;align-items:center}
.coledit-menu .cm-h .cm-reset{cursor:pointer;color:var(--acc-d);font-size:11px;text-transform:none;letter-spacing:0}
.coledit-menu label{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:6px;font-size:13px;cursor:pointer}
.coledit-menu label:hover{background:var(--bg)}

/* Feature-Gating (Lizenzen) + Service/Store */
.feat-locked{opacity:.5;pointer-events:none;position:relative}
/* Nav-Item eines nicht gebuchten Zubuch-Plugins: bleibt klickbar (-> Store), aber sichtbar markiert */
#nav a.nav-locked{opacity:.62}
#nav a.nav-locked::after{content:"🔒";margin-left:auto;font-size:11px;opacity:.85}
.svc-pane{min-height:40px}
#svc-tabs button[data-svc]{cursor:pointer}

/* JTL-artige Status-Tabs (Aufträge u.a.) , groß, horizontal scrollbar, touch-freundlich */
.statustabs{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:2px 0 12px;scrollbar-width:none}
.statustabs::-webkit-scrollbar{display:none}
.stab{flex:0 0 auto;padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer;min-height:42px}
.stab.on{background:var(--acc);color:#fff;border-color:var(--acc)}
/* Kopf-Umschalter: aktive Firma + B2B/B2C-Sicht (JTL-artig), auf allen Seiten */
.scopebar{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;padding:8px 20px;background:var(--surface);border-bottom:1px solid var(--line)}
.scope-co{display:flex;align-items:center;gap:8px;min-width:0}
.scope-lbl{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);font-weight:700;flex:0 0 auto}
.scope-sel{width:auto;min-width:150px;max-width:56vw;min-height:38px;padding:7px 10px;font-weight:600}
#scope-add{flex:0 0 auto}
.scope-aud{display:inline-flex;gap:0;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--surface)}
.scope-aud .stab{border:0;border-radius:0;min-height:36px;padding:8px 16px;background:transparent;font-size:13px}
.scope-aud .stab.on{background:var(--acc);color:#fff}
.scope-aud .stab:not(.on):hover{background:var(--surface2)}
/* Plugin-Cockpit: Auswahl als umbrechende Chip-Leiste (KEIN Pillen-Kreis) */
.pc-tabs{display:flex;flex-wrap:wrap;gap:8px}
.pc-tabs .stab{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:8px 14px;font-size:13px;min-height:38px;line-height:1.2;cursor:pointer;white-space:nowrap}
.pc-tabs .stab.on{background:var(--acc);color:#fff;border-color:var(--acc)}
.pc-tabs .stab:not(.on):hover{background:var(--surface2)}
/* Ausklappbare „Weitere Filter" , hält Mobile aufgeräumt */
.filterbox{margin-bottom:12px}
.filterbox>summary{cursor:pointer;font-size:13px;color:var(--mut);padding:9px 13px;border:1px solid var(--line);border-radius:10px;background:var(--surface);list-style:none;user-select:none;display:inline-block}
.filterbox>summary::-webkit-details-marker{display:none}
.filterbox>summary::before{content:"⚙ "}

/* ---- Command-Palette (Strg/Cmd+K) ---- */
.cmdk{position:fixed;inset:0;z-index:9000;background:rgba(10,12,18,.55);display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px}
.cmdk[hidden]{display:none}
.cmdk-box{width:100%;max-width:620px;background:var(--panel,#fff);color:var(--fg,#111);border:1px solid var(--line,#e5e7eb);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden;display:flex;flex-direction:column;max-height:70vh}
.cmdk-input{border:0;outline:0;padding:16px 18px;font-size:16px;background:transparent;color:inherit;border-bottom:1px solid var(--line,#e5e7eb)}
.cmdk-list{overflow:auto;padding:6px}
.cmdk-group{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--mut,#8b93a7);padding:8px 12px 4px}
.cmdk-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;cursor:pointer}
.cmdk-item .ic{width:22px;text-align:center}
.cmdk-item .lb{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk-item .sb{font-size:12px;color:var(--mut,#8b93a7)}
.cmdk-item.sel,.cmdk-item:hover{background:var(--acc-weak,rgba(59,130,246,.14))}
.cmdk-empty{padding:18px 14px;color:var(--mut,#8b93a7);font-size:14px}
.cmdk-foot{display:flex;gap:14px;justify-content:flex-end;padding:8px 14px;border-top:1px solid var(--line,#e5e7eb);font-size:11px;color:var(--mut,#8b93a7);flex-wrap:wrap}

/* ---- Barrierefreiheit (BFSG/WCAG-Grundpass) ---- */
.skip-link{position:fixed;top:-60px;left:8px;z-index:99999;background:var(--acc,#3b82f6);color:#fff;padding:10px 16px;border-radius:8px;transition:top .15s;text-decoration:none;font-weight:600}
.skip-link:focus{top:8px}
:focus-visible{outline:2px solid var(--acc,#3b82f6);outline-offset:2px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
/* Kontrast-Fixes (WCAG AA) , Tabellenköpfe + Kopf-Labels auf volle Vordergrundfarbe */
.tw thead th{color:var(--fg)!important}
#tenant-host,.scope-lbl{color:var(--fg)!important}

/* ===== First-Run-Firmen-Assistent (Onboarding-Wizard) ===== */
.ob-scrim{position:fixed;inset:0;z-index:9200;background:var(--bg);display:flex;align-items:stretch;justify-content:center;overflow:auto}
.ob-card{width:100%;max-width:600px;display:flex;flex-direction:column;min-height:100vh;background:var(--surface)}
@media(min-width:640px){.ob-scrim{padding:28px 16px;align-items:flex-start}.ob-card{min-height:auto;max-height:calc(100vh - 56px);border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 80px rgba(20,16,60,.22);overflow:hidden;margin:auto}}
.ob-head{padding:16px 22px 14px;border-bottom:1px solid var(--line);background:var(--surface)}
.ob-brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:15px;letter-spacing:-.01em}
.ob-brand .plogo{display:grid;grid-template-columns:1fr 1fr;gap:2px;width:20px;height:20px}
.ob-brand .plogo i{display:block;border-radius:3px;background:var(--acc)}.ob-brand .plogo i:nth-child(2){background:#22c55e}.ob-brand .plogo i:nth-child(3){background:#e879f9}.ob-brand .plogo i:nth-child(4){background:#7a6ff0}
.ob-progwrap{display:flex;align-items:center;gap:10px;margin-top:12px}
.ob-progbar{flex:1;height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.ob-progbar i{display:block;height:100%;width:0;background:var(--acc);border-radius:99px;transition:width .3s ease}
.ob-progtxt{font-size:11.5px;color:var(--faint);white-space:nowrap;font-weight:600}
.ob-body{flex:1;overflow:auto;padding:24px 22px 20px}
.ob-h1{font-size:22px;letter-spacing:-.01em;margin:0 0 6px}
.ob-intro{color:var(--mut);font-size:14px;margin:0 0 18px;line-height:1.55}
.ob-foot{display:flex;gap:10px;align-items:center;padding:14px 22px;border-top:1px solid var(--line);background:var(--surface)}
.ob-foot .grow{flex:1}
.ob-skip{background:none;border:0;color:var(--mut);font:inherit;font-size:13px;cursor:pointer;text-decoration:underline;padding:6px}
.ob-skip:hover{color:var(--ink)}
.ob-hint{font-size:11.5px;color:var(--faint);margin-top:4px;line-height:1.45}
.ob-err{display:none;color:#c0392b;font-size:11.5px;margin-top:4px}
.ob-field.bad .fin{border-color:#c0392b}
.ob-field.bad .ob-err{display:block}
.ob-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.ob-grid2{grid-template-columns:1fr}}
.ob-choice{display:flex;flex-direction:column;gap:10px;margin:4px 0}
.ob-opt{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line);border-radius:13px;padding:14px 16px;cursor:pointer;background:var(--surface)}
.ob-opt:hover{border-color:var(--acc)}
.ob-opt.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 8%,var(--surface))}
.ob-opt .dot{flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:2px solid var(--line);margin-top:1px}
.ob-opt.on .dot{border-color:var(--acc);background:radial-gradient(circle,var(--acc) 0 5px,transparent 6px)}
.ob-opt b{display:block;font-size:14.5px}
.ob-opt span{color:var(--mut);font-size:12.5px}
.ob-swatches{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ob-swatch{width:34px;height:34px;border-radius:9px;cursor:pointer;border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.ob-swatch.on{border-color:var(--ink)}
.ob-acc{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
.ob-acc>summary{list-style:none;cursor:pointer;padding:13px 15px;display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:14px}
.ob-acc>summary::-webkit-details-marker{display:none}
.ob-acc>summary .prev{font-family:var(--mono,monospace);font-size:12px;color:var(--acc);font-weight:700}
.ob-acc[open]>summary{border-bottom:1px solid var(--line2)}
.ob-acc .ob-accbody{padding:14px 15px}
.ob-note{border:1px solid var(--line);background:color-mix(in srgb,var(--acc) 5%,var(--surface));border-radius:12px;padding:16px;color:#2a2f3a;font-size:14px;line-height:1.55}
.ob-result{border-radius:12px;padding:13px 15px;font-size:13.5px;margin-top:12px}
.ob-result.ok{background:#e9f9ef;border:1px solid #b7ebc6;color:#186a35}
.ob-result.err{background:#fdecea;border:1px solid #f3c2bb;color:#a12c1c}
.ob-sumrow{display:flex;gap:10px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line2);font-size:14px}
.ob-sumrow .i{flex:0 0 auto;font-size:17px}
.ob-toggle{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13.5px;padding:6px 0}
.ob-toggle input{width:42px;height:24px;-webkit-appearance:none;appearance:none;background:var(--line);border-radius:99px;position:relative;cursor:pointer;flex:0 0 auto;transition:background .18s}
.ob-toggle input:checked{background:var(--acc)}
.ob-toggle input::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .18s}
.ob-toggle input:checked::after{transform:translateX(18px)}
.ob-uploadbox{border:1.5px dashed var(--line);border-radius:12px;padding:22px;text-align:center;cursor:pointer;color:var(--mut);font-size:13.5px}
.ob-uploadbox:hover{border-color:var(--acc);color:var(--ink)}
.ob-uploadbox img{max-height:90px;border-radius:8px}
.ob-layouts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:520px){.ob-layouts{grid-template-columns:1fr 1fr}}
.ob-lcard{border:1.5px solid var(--line);border-radius:11px;padding:8px;cursor:pointer;background:var(--surface);transition:border-color .12s}
.ob-lcard:hover{border-color:var(--acc)}
.ob-lcard.on{border-color:var(--acc);box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 30%,transparent)}
.ob-lcard b{display:block;font-size:11.5px;font-weight:600;margin-top:6px;text-align:center;color:var(--ink)}
.ob-lt{background:#fff;border:1px solid var(--line2);border-radius:6px;height:78px;padding:7px 8px;overflow:hidden}

/* --- CTI / Live-Kontakt (Screen-Pop) --- */
#cti-scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:flex-start;justify-content:flex-end;z-index:1200}
#cti-scrim[hidden]{display:none!important}
.cti-card{background:var(--surface,#fff);color:var(--ink,#111);width:360px;max-width:92vw;margin:16px;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.25);overflow:hidden}
.cti-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;font-weight:700;background:var(--acc-soft,#eef)}
.cti-body{padding:14px}
.cti-act{display:block;width:100%;text-align:left;margin:6px 0;padding:9px 12px;border:1px solid var(--line,#ddd);border-radius:8px;background:var(--surface,#fff);color:var(--ink,#111);cursor:pointer;font-size:13px}
.cti-act:hover{background:var(--acc-soft,#eef)}
.cti-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;margin:0 6px 4px 0}