/* V17: extrahiert aus index.html (unverändert). App-/Grunddesign */
/* V18D-A1: ohne diese Angabe zeichnet der Browser die AUFGEKLAPPTE Auswahlliste, die
   Bildlaufleisten und die Systemzustaende im hellen Vorgabeschema – im Widerspruch zum dunklen
   Dialog. Sie gehoert hierher und NICHT in einen <style>-Block des Dokuments: seit V17 liegt
   das gesamte Stilwerk in styles/*.css, und der Architekturtest haelt das fest. */
:root{color-scheme:dark;
  --app-bg:#101010;
  --sidebar-bg:#171719;
  --panel-bg:#171719;
  --surface-1:#1d1d20;
  --surface-2:#232326;
  --surface-hover:#29292d;
  --surface-active:#303036;
  --text-primary:rgba(255,255,255,.94);
  --text-secondary:rgba(255,255,255,.72);
  /* V18D-A1: Der Wert .42 ergab auf `--surface-1` nur 4,03:1 und lag damit unter WCAG AA.
     .55 erreicht auf JEDER hier verwendeten Flaeche mindestens 4,5:1 – auch auf der hellsten
     (`--surface-active` #303036, dort 5,18:1). Gemessen, nicht geschaetzt. */
  --text-muted:rgba(255,255,255,.55);
  --border:rgba(255,255,255,.07);
  --border-strong:rgba(255,255,255,.12);
  --accent:#ff6a1a;                     /* Primär = Refloxy-Orange */
  --accent-hover:#ff8c42;
  --accent-soft:rgba(255,106,26,.14);
  --success:#6bff46;                    /* Grün nur für Erfolg (Mesh gültig, Prüfung, Export ok) */
  --success-soft:rgba(107,255,70,.12);
  /* V18D.1-A6: Gemessen erreichte #ff5f68 auf der Dialogflaeche (48,48,54) nur 4,43:1. Seit die
     Rollenzeile ohne Vorbelegung startet, steht sie sofort im Fehlerzustand – der Ton ist deshalb
     so weit aufgehellt, dass er WCAG AA sicher erfuellt (gemessen 4,84:1). */
  --danger:#ff6e76;
  /* V18D.3: Sichtbarkeit. Dasselbe Hellblau, das die 3D-Ansicht fuer eine Auswahl benutzt
     (`0x6cc0ff`) – der Zustand „sichtbar" sieht im Browser aus wie in der Szene. */
  --vis-on:#6cc0ff;
  --warning:#f5bd45;
  --radius-panel:16px;
  --radius-control:8px;
  --nav-w:210px;
  --settings-w:268px;
  --results-w:300px;
  --header-h:64px;
  --gap:8px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;max-width:100%}
body{font-family:var(--font);background:var(--app-bg);color:var(--text-primary);
  font-size:13px;line-height:1.4;-webkit-font-smoothing:antialiased;overflow:hidden}
button,input,select{font-family:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--surface-2);border-radius:6px;border:2px solid var(--panel-bg)}
::-webkit-scrollbar-thumb:hover{background:var(--surface-hover)}

.app{display:flex;gap:var(--gap);padding:var(--gap);height:100vh;height:100dvh}
.panel{background:var(--panel-bg);border:1px solid var(--border);border-radius:var(--radius-panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.022),0 1px 2px rgba(0,0,0,.25)}

/* ---------- Left navigation ---------- */
.sidebar{width:var(--nav-w);flex:0 0 var(--nav-w);display:flex;flex-direction:column;
  transition:width .18s ease,flex-basis .18s ease;overflow:hidden}
.sidebar .brand{display:flex;align-items:center;gap:10px;padding:16px 14px 14px}
.brand .logo{width:28px;height:28px;flex:none;border-radius:8px;background:var(--accent-soft);
  border:1px solid rgba(255,106,26,.3);display:grid;place-items:center}
.brand .logo svg{width:17px;height:17px;stroke:var(--accent)}
.brand .name{font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden}
.brand .collapse{margin-left:auto;width:26px;height:26px;flex:none;border:0;background:transparent;
  color:var(--text-muted);border-radius:6px;display:grid;place-items:center}
.brand .collapse:hover{background:var(--surface-hover);color:var(--text-secondary)}
.brand .collapse svg{width:16px;height:16px;stroke:currentColor}
.nav-sec{padding:6px 10px}
.nav-sec .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--text-muted);
  padding:8px 6px 6px;white-space:nowrap;overflow:hidden}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;height:38px;padding:0 10px;border:0;
  background:transparent;color:var(--text-secondary);border-radius:var(--radius-control);
  font-size:13px;text-align:left;white-space:nowrap;overflow:hidden;position:relative}
.nav-item svg{width:17px;height:17px;flex:none;stroke:currentColor;opacity:.85}
.nav-item .txt{overflow:hidden;text-overflow:ellipsis}
.nav-item:hover{background:var(--surface-hover);color:var(--text-primary)}
.nav-item[aria-current="true"]{background:var(--surface-active);color:var(--text-primary)}
.nav-item[aria-current="true"] svg{stroke:var(--accent);opacity:1}
.nav-item[aria-current="true"]::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
  border-radius:0 3px 3px 0;background:var(--accent)}
.sidebar .spacer{flex:1}
.sidebar .foot{padding:12px 14px;border-top:1px solid var(--border);font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden}
.sidebar.collapsed{--nav-w:56px}
.sidebar.collapsed .name,.sidebar.collapsed .nav-sec .lbl,.sidebar.collapsed .nav-item .txt,.sidebar.collapsed .foot span{display:none}
.sidebar.collapsed .brand{padding:16px 0 14px;justify-content:center}
.sidebar.collapsed .brand .collapse{display:none}
.sidebar.collapsed .nav-item{justify-content:center;padding:0}

/* ---------- Main column ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--gap)}
.topbar{height:var(--header-h);flex:0 0 var(--header-h);display:flex;align-items:center;
  padding:0 14px;gap:12px}
.topbar .tt-icon{width:34px;height:34px;flex:none;border-radius:9px;background:var(--surface-1);
  border:1px solid var(--border);display:grid;place-items:center}
.topbar .tt-icon svg{width:19px;height:19px;stroke:var(--accent)}
.topbar .tt-meta{min-width:0;display:flex;flex-direction:column;justify-content:center}
.topbar .tt-title{font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .tt-file{font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.topbar .tt-actions{margin-left:auto;display:flex;align-items:center;gap:6px}
.tbtn{height:34px;padding:0 12px;border:1px solid var(--border);background:var(--surface-1);
  color:var(--text-secondary);border-radius:var(--radius-control);font-size:12.5px;font-weight:500;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.tbtn svg{width:15px;height:15px;stroke:currentColor}
.tbtn:hover:not(:disabled){background:var(--surface-hover);color:var(--text-primary)}
.tbtn:disabled{opacity:.4;cursor:not-allowed}
.tbtn.icon{padding:0;width:34px;justify-content:center}
.tbtn.primary{background:var(--accent);color:#0a1a06;border-color:var(--accent);font-weight:600}
/* Ungespeicherte Änderungen: Speichern-Button leuchtet orange. */
.tbtn.dirty{background:var(--accent);color:#180a02;border-color:var(--accent);font-weight:600}
.tbtn.dirty:hover:not(:disabled){background:var(--accent);color:#180a02;filter:brightness(1.07)}
.tbtn-cta{background:var(--accent);color:#0a1a06;border-color:var(--accent);font-weight:600}
.tbtn-cta:hover:not(:disabled){filter:brightness(1.08)}
/* Prominenter STL-Export: auffälliges Orange */
.tbtn-export{background:#ff6a1a;color:#160a02;border-color:#ff6a1a;font-weight:700;
  box-shadow:0 4px 16px -4px rgba(255,106,26,.65)}
.tbtn-export:hover{background:#ff8c42;border-color:#ff8c42;filter:none}
.tbtn-export svg{stroke-width:2.1}
.tbtn.primary:hover:not(:disabled){background:var(--accent-hover)}
.tt-divider{width:1px;height:22px;background:var(--border-strong);margin:0 2px}

.workspace{flex:1;min-height:0;display:flex;gap:var(--gap);position:relative}

/* ---------- Settings panel ---------- */
.settings{width:var(--settings-w);flex:0 0 var(--settings-w);display:flex;flex-direction:column;min-height:0}
.tabbar{display:flex;padding:4px;gap:3px;margin:9px 9px 3px;background:var(--surface-1);
  border:1px solid var(--border);border-radius:10px}
.tabbar button{flex:1;height:30px;border:0;background:transparent;color:var(--text-muted);
  border-radius:7px;font-size:12.5px;font-weight:500;transition:background .14s,color .14s}
.tabbar button:hover:not([aria-selected="true"]){color:var(--text-secondary)}
.tabbar button[aria-selected="true"]{background:var(--surface-active);color:var(--text-primary);box-shadow:0 1px 2px rgba(0,0,0,.28)}
.tabpanes{flex:1;min-height:0;overflow-y:auto;padding:12px}
.tabpane{display:none}
.tabpane.on{display:block}

.upload{display:block;width:100%;min-height:190px;padding:22px 16px;text-align:center;cursor:pointer;
  background:var(--surface-1);border:1.5px dashed var(--border-strong);border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;transition:border-color .15s,background .15s}
.upload:hover{border-color:var(--accent);background:var(--accent-soft)}
.upload input{display:none}
.upload .uic{width:44px;height:44px;stroke:var(--text-muted)}
.upload:hover .uic{stroke:var(--accent)}
.upload .up-t{font-size:13px;font-weight:600;color:var(--text-secondary)}
.upload .up-t2{display:none;font-size:12px;font-weight:600;color:var(--text-secondary)}
.upload .up-s{font-size:11px;color:var(--text-muted)}
/* Nach dem Laden: großes Upload-Feld -> schlanke „Modell ersetzen"-Zeile (spart ~140 px). */
#paneModel.has-model .upload{min-height:0;flex-direction:row;justify-content:flex-start;gap:10px;padding:10px 12px;border-style:solid;text-align:left}
#paneModel.has-model .upload .uic{width:20px;height:20px}
#paneModel.has-model .upload .up-t,#paneModel.has-model .upload .up-s{display:none}
#paneModel.has-model .upload .up-t2{display:inline}
#paneModel.has-model #demoBtn{display:none}

.grp{margin-top:14px}
.grp+.grp{padding-top:12px;border-top:1px solid var(--border)}
.grp>h4{margin:0 0 10px;font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--text-muted);
  text-transform:uppercase}
.field{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.field:last-child{margin-bottom:0}
.field label{flex:1;font-size:12px;color:var(--text-secondary);min-width:0}
.field label .hint{display:block;font-size:10.5px;color:var(--text-muted);margin-top:2px;line-height:1.35;font-weight:400}
.inp{position:relative;flex:0 0 auto;display:flex;align-items:center}
.inp input[type=number]{width:76px;height:34px;text-align:right;padding:0 30px 0 10px;font-size:12.5px;
  background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-control);
  color:var(--text-primary);transition:border-color .12s,box-shadow .12s}
.inp .u{position:absolute;right:9px;font-size:10.5px;color:var(--text-muted);pointer-events:none}
.inp input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.inp input.narrow{width:54px;padding-right:22px}
select.sel{height:34px;background:var(--surface-1);border:1px solid var(--border);color:var(--text-primary);
  border-radius:var(--radius-control);padding:0 8px;font-size:12.5px}
select.sel:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

.seg{display:flex;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-control);
  padding:3px;gap:2px}
.seg button{flex:1;min-width:34px;height:28px;border:0;background:transparent;color:var(--text-muted);
  border-radius:6px;font-size:12px;font-weight:500;padding:0 8px}
.seg button:hover:not([aria-pressed=true]){background:var(--surface-hover);color:var(--text-secondary)}
.seg button[aria-pressed=true]{background:var(--surface-active);color:var(--text-primary)}
.seg.accent button[aria-pressed=true]{color:var(--accent)}

.mrow{display:flex;gap:6px;margin-bottom:10px}
.mrow .tbtn{flex:1;justify-content:center;height:32px}
.mrow .tbtn[aria-pressed=true]{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.rotbtns{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:-2px 0 12px}
.rotbtns .tbtn{justify-content:center;height:30px;padding:0;font-size:11.5px;font-variant-numeric:tabular-nums}
.dimbox{margin:2px 0 12px;background:var(--surface-1);border:1px solid var(--border);border-radius:10px;padding:8px 12px}
.dimrow{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;padding:3px 0;color:var(--text-muted)}
.dimrow b{color:var(--text-primary);font-weight:600;font-variant-numeric:tabular-nums}

.mstat{margin-top:12px;background:var(--surface-1);border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.mstat .r{display:flex;justify-content:space-between;font-size:11.5px;padding:3px 0;color:var(--text-muted)}
.mstat .r b{color:var(--text-secondary);font-weight:600}
.mnote{margin-top:10px;font-size:11px;line-height:1.45;padding:9px 11px;border-radius:9px}
.mnote.warn{background:rgba(245,189,69,.1);color:var(--warning);border:1px solid rgba(245,189,69,.22)}
.mnote.ok{background:var(--success-soft);color:var(--success);border:1px solid rgba(107,255,70,.22)}

.settings .action{padding:10px 12px;border-top:1px solid var(--border);flex:none}
.go{width:100%;height:48px;border:0;border-radius:12px;background:var(--accent);color:#0a1a06;
  font-size:14px;font-weight:700;letter-spacing:.01em;display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .14s}
.go:hover:not(:disabled){background:var(--accent-hover)}
.go:disabled{background:var(--surface-2);color:var(--text-muted);cursor:not-allowed}
.go.busy{background:var(--surface-2);color:var(--text-secondary)}
.progress{display:none;align-items:center;gap:10px}
.progress.on{display:flex}
.progress .track{flex:1;height:6px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.progress .track i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
.progress .cancel{height:32px;padding:0 12px;border:1px solid var(--border-strong);background:var(--surface-1);
  color:var(--text-secondary);border-radius:8px;font-size:12px}
.progress .cancel:hover{background:var(--surface-hover);color:var(--text-primary)}
.pstep{font-size:11px;color:var(--text-muted);margin-top:6px;min-height:14px}

/* ---------- Viewport ---------- */
.viewport{flex:1;min-width:0;position:relative;background:#0a0a0b;border:1px solid var(--border);
  border-radius:var(--radius-panel);overflow:hidden}
.viewport canvas{display:block;width:100%;height:100%;touch-action:none}
/* CAD-Menüband: eigene Zeile in voller Breite unter der Kopfleiste, Werkzeuge in Gruppen. */
.vtoolbar{flex:0 0 auto;display:flex;align-items:stretch;gap:0;
  background:var(--surface-1);border:1px solid var(--border);
  border-radius:12px;padding:3px 8px;overflow-x:auto;overflow-y:hidden}
.vtoolbar::-webkit-scrollbar{height:0}
.vtoolbar .rb-group{display:flex;flex-direction:column;gap:2px;padding:0 10px;position:relative}
.vtoolbar .rb-group+.rb-group::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--border-strong)}
.vtoolbar .rb-head{font-size:10px;color:var(--text-muted);letter-spacing:.02em;padding:1px 2px 0;white-space:nowrap}
.vtoolbar .rb-head--menu{border:0;background:transparent;color:var(--text-muted);font-size:10px;letter-spacing:.02em;cursor:pointer;display:inline-flex;align-items:center;gap:2px;padding:1px 3px 0;border-radius:5px;white-space:nowrap}
.vtoolbar .rb-head--menu:hover{color:var(--text-secondary)}
.vtoolbar .rb-car{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .12s}
.vtoolbar .rb-group[data-open] .rb-car{transform:rotate(180deg)}
.rb-menu{position:fixed;z-index:60;min-width:184px;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:11px;padding:5px;box-shadow:0 16px 44px rgba(0,0,0,.55)}
.rb-menu[hidden]{display:none}
.rb-menu button{display:flex;align-items:center;gap:9px;width:100%;height:34px;padding:0 9px;border:0;border-radius:7px;background:transparent;color:var(--text-secondary);font-size:12px;cursor:pointer;text-align:left;white-space:nowrap}
.rb-menu button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.rb-menu button:hover:not(:disabled){background:var(--surface-hover);color:var(--text-primary)}
.rb-menu button:disabled{opacity:.42;cursor:not-allowed}
.rb-menu .rb-soon{margin-left:auto;font-size:8.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--warning)}
.vtoolbar .rb-row{display:flex;gap:2px}
.vtoolbar .vb{min-width:50px;border:0;background:transparent;color:var(--text-secondary);
  border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;padding:4px 6px 3px}
.vtoolbar .vb svg{width:19px;height:19px;stroke:currentColor;fill:none}
.vtoolbar .vb .vbl{font-size:9.5px;line-height:1;white-space:nowrap;color:var(--text-muted)}
.vtoolbar .vb:hover{background:var(--surface-hover)}
.vtoolbar .vb:hover .vbl{color:var(--text-primary)}
.vtoolbar .vb:disabled{opacity:.32;pointer-events:none}
.vtoolbar .vb[aria-pressed=true]{background:var(--accent-soft)}
.vtoolbar .vb[aria-pressed=true] .vbl{color:var(--accent)}
.vtoolbar .vsep{width:1px;align-self:stretch;margin:4px 3px;background:var(--border-strong)}
/* bunte Icons, damit man die Werkzeuge sofort erkennt */
#vFit svg{stroke:#7fd4c6} #vProj svg{stroke:#9aa4b2} #vSection svg{stroke:#b98cff}
#vExplode svg{stroke:#f5bd45} #vMeasure svg{stroke:#5fd07a} #vUndercut svg{stroke:#ff6b73}
/* V19.1: „Drehen" ist fertig programmiert und bekommt eine EIGENE Farbe – vorher trug es die
   graue Schrift der noch gesperrten Werkzeuge (Sweep/Loft) und wirkte dadurch ausgegraut. */
#vPlanes svg{stroke:#4bc0e0} #vSketch svg{stroke:#ff8a3d} #vExtrude svg{stroke:#5aa0ff}
#vRevolve svg{stroke:#4ad991}
.vtoolbar .vb-key{background:rgba(255,255,255,.05)}
#vSketch .vbl{color:#ffa257;font-weight:700} #vExtrude .vbl{color:#7fb2ff;font-weight:700}
#vRevolve .vbl{color:#79e6b1;font-weight:700}
/* Schmalere Bildschirme (Laptops): Werkzeugleiste kompakter halten, damit sie
   in EINER Zeile bleibt und nicht umbricht. */
@media(max-width:1500px){
  .vtoolbar{gap:2px;padding:4px;max-width:calc(100% - 12px)}
  .vtoolbar .vb{min-width:42px;padding:5px 2px 3px}
  .vtoolbar .vb svg{width:19px;height:19px}
  .vtoolbar .vb .vbl{font-size:8.5px}
  .vtoolbar .vsep{margin:4px 2px}
}
@media(max-width:1180px){                       /* sehr schmal: nur Icons (Tooltip zeigt den Namen) */
  .vtoolbar .vb .vbl{display:none}
  .vtoolbar .vb{min-width:34px;padding:6px 3px}
}

.vtop-right{position:absolute;right:12px;top:12px;display:flex;align-items:center;gap:6px;z-index:6;
  background:rgba(23,23,25,.82);backdrop-filter:blur(8px);border:1px solid var(--border-strong);
  border-radius:11px;padding:5px 8px}
.vtop-right .vb{width:30px;height:30px;border:0;background:transparent;color:var(--text-secondary);border-radius:7px;display:grid;place-items:center}
.vtop-right .vb svg{width:16px;height:16px;stroke:currentColor;fill:none}
.vtop-right .vb:hover{background:var(--surface-hover);color:var(--text-primary)}
.vtop-right .vb[aria-pressed=true]{background:var(--accent-soft);color:var(--accent)}
.vtop-right .opacity{display:flex;align-items:center;gap:6px;padding:0 4px}
.vtop-right .opacity svg{width:15px;height:15px;stroke:var(--text-muted)}
input[type=range]{-webkit-appearance:none;appearance:none;height:4px;background:var(--surface-2);border-radius:3px;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid #0a0a0b;box-shadow:0 0 0 3px rgba(255,106,26,.16),0 1px 3px rgba(0,0,0,.4);transition:box-shadow .12s}
input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 0 5px rgba(255,106,26,.2),0 1px 3px rgba(0,0,0,.4)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid #0a0a0b}
.vtop-right input[type=range]{width:70px}

.axisgizmo{display:none}   /* kleines XYZ-Gizmo entfernt – der ViewCube rechts dient als Orientierung */
.statusbar{position:absolute;left:0;right:0;bottom:0;height:30px;display:flex;align-items:center;gap:16px;
  padding:0 14px;font-size:11px;color:var(--text-muted);background:linear-gradient(180deg,rgba(10,10,11,0),rgba(10,10,11,.85));z-index:5}
.statusbar .sdot{width:7px;height:7px;border-radius:50%;background:var(--text-muted);flex:none}
.statusbar .sdot.ok{background:var(--success)}
.statusbar .sdot.busy{background:var(--warning)}
.statusbar .grow{flex:1}
.statusbar .sprog{width:110px;height:4px;background:var(--surface-2);border-radius:3px;overflow:hidden;display:none}
.statusbar .sprog.on{display:block}
.statusbar .sprog i{display:block;height:100%;width:0;background:var(--accent)}

.section-ctl{position:absolute;left:12px;bottom:120px;z-index:6;background:rgba(23,23,25,.9);
  border:1px solid var(--border-strong);border-radius:10px;padding:10px 12px;display:none;width:180px}
.section-ctl.on{display:block}
.section-ctl .t{font-size:11px;color:var(--text-secondary);margin-bottom:8px;display:flex;justify-content:space-between}
.section-ctl input[type=range]{width:100%}
.undercut-ctl{bottom:212px;width:210px}
.undercut-ctl .uc-note{font-size:10px;color:var(--text-muted);line-height:1.4;margin-top:2px}
.undercut-ctl .sel{background:var(--surface-1);color:var(--text-primary)}

.overlay{position:absolute;inset:0;display:grid;place-items:center;z-index:4;padding:24px;text-align:center}
/* V18D.4-1: Der Editor startet leer. Die Einladung „3D-Modell laden" liegt dabei ueber dem
   GESAMTEN Zeichenbereich – als klickbare Flaeche verschluckte sie jeden Zeigerklick auf die
   Zeichenflaeche, es liess sich also weder drehen noch zeichnen noch etwas anwaehlen. Sie ist
   ein Angebot, kein Riegel: nur die Karte selbst nimmt Klicks an. Das Wartefenster waehrend
   der Erzeugung (#aiGenOverlay) soll dagegen weiterhin sperren und bleibt unberuehrt. */
#emptyOverlay{pointer-events:none}
#emptyOverlay .empty-card{pointer-events:auto}
.overlay.hide{display:none}
.empty-card{max-width:340px}
.empty-card .eic{width:76px;height:76px;margin:0 auto 16px;border-radius:18px;background:var(--surface-1);
  border:1px solid var(--border);display:grid;place-items:center}
.empty-card .eic svg{width:40px;height:40px;stroke:var(--text-muted)}
.empty-card h3{margin:0 0 6px;font-size:16px;font-weight:600}
.empty-card p{margin:0 0 16px;font-size:12.5px;color:var(--text-muted);line-height:1.5}
.empty-card .up-btn{height:40px;padding:0 20px;border:0;border-radius:10px;background:var(--accent);color:#0a1a06;font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:8px}
.empty-card .up-btn:hover{background:var(--accent-hover)}
/* V18D.8: Zwei gleichwertige Wege in ein Dokument – selbst zeichnen oder ein Modell laden.
   Der zweite ist bewusst ruhiger gezeichnet, weil der eigene Entwurf der Regelfall ist. */
.empty-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.empty-card .up-btn-zweit{background:var(--surface-1);color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--border-strong)}
.empty-card .up-btn-zweit:hover{background:var(--surface-hover)}
.samples{margin-top:18px}
.samples .sl{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:8px}
.samples .chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.chip{height:30px;padding:0 12px;border:1px solid var(--border);background:var(--surface-1);color:var(--text-secondary);
  border-radius:20px;font-size:12px;display:inline-flex;align-items:center;gap:6px}
.chip:hover{background:var(--surface-hover);color:var(--text-primary);border-color:var(--border-strong)}
.chip svg{width:13px;height:13px;stroke:currentColor}
/* ---------- Skizzen-Werkzeugleiste (vertikal, rechts) ---------- */
.sketch-pal{position:absolute;top:56px;right:12px;left:auto;transform:none;z-index:12;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:8px 6px;background:var(--surface-1);border:1px solid var(--border-strong);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.5)}
.sketch-pal .sp-title{font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:2px}
.sketch-pal .sp-tool,.sketch-pal .sp-act{width:34px;height:34px;border:0;border-radius:9px;background:transparent;color:var(--text-secondary);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.12s}
.sketch-pal .sp-tool svg,.sketch-pal .sp-act svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sketch-pal .sp-tool:hover,.sketch-pal .sp-act:hover{background:var(--surface-hover);color:var(--text-primary)}
.sketch-pal .sp-tool[aria-pressed=true]{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.sketch-pal .sp-tool:disabled{opacity:.32;pointer-events:none}
.sketch-pal .sp-sep{width:22px;height:1px;background:var(--border);margin:3px 0}
.sketch-pal .sp-rad{display:flex;align-items:center;gap:3px;font-size:10px;color:var(--text-secondary);background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:3px 5px}
.sketch-pal .sp-rad[hidden]{display:none}
.sketch-pal .sp-rad input{width:34px;background:transparent;border:0;color:var(--text-primary);font-size:11px;text-align:right;outline:none;-moz-appearance:textfield}
.sketch-pal .sp-rad input::-webkit-outer-spin-button,.sketch-pal .sp-rad input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* Werkzeug-Gruppen mit Varianten-Flyout (Rechteck/Kreis) – Flyout klappt nach LINKS auf */
.sketch-pal .sp-group{position:relative;display:flex;align-items:center;justify-content:center}
.sketch-pal .sp-caret{position:absolute;right:0;bottom:0;width:13px;height:13px;padding:0;border:0;border-radius:0 0 9px 0;
  background:transparent;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.sketch-pal .sp-caret svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sketch-pal .sp-caret:hover{color:var(--accent)}
.sketch-pal .sp-fly{position:absolute;right:calc(100% + 8px);left:auto;top:-4px;z-index:20;min-width:172px;
  background:var(--surface-2);border:1px solid var(--border-strong);border-radius:11px;padding:5px;box-shadow:0 16px 44px rgba(0,0,0,.55)}
.sketch-pal .sp-fly[hidden]{display:none}
.sketch-pal .sp-fly button{display:flex;align-items:center;gap:9px;width:100%;height:34px;padding:0 9px;border:0;border-radius:7px;
  background:transparent;color:var(--text-secondary);font-size:12px;cursor:pointer;text-align:left;white-space:nowrap}
.sketch-pal .sp-fly button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sketch-pal .sp-fly button:hover{background:var(--surface-hover);color:var(--text-primary)}
.sketch-pal .sp-fly button[aria-pressed=true]{color:var(--accent)}
.sketch-pal .sp-act.done{flex-direction:column;width:44px;height:auto;padding:6px 2px;gap:2px;color:#0a1a06;background:var(--accent);border-radius:10px;margin-left:0}
.sketch-pal .sp-act.done:hover{filter:brightness(1.08)}
.sketch-pal .sp-done-lbl{font-size:8px;line-height:1.05;font-weight:800;text-align:center}
.plane-pick{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:30;min-width:230px;
  background:var(--surface-2);border:1px solid var(--border-strong);border-radius:14px;padding:12px;box-shadow:0 20px 50px rgba(0,0,0,.55)}
.plane-pick .pp-h{font-size:12px;font-weight:600;color:var(--text-primary);margin:2px 4px 10px}
.plane-pick button{display:flex;align-items:center;gap:10px;width:100%;height:40px;padding:0 10px;margin-bottom:6px;border:1px solid var(--border);
  border-radius:9px;background:var(--surface-1);color:var(--text-secondary);font-size:12.5px;cursor:pointer;text-align:left}
.plane-pick button:hover{border-color:var(--accent);color:var(--text-primary)}
.plane-pick button em{color:var(--text-muted);font-style:normal;font-size:11px}
.plane-pick .pp-cancel{justify-content:center;color:var(--text-muted);margin-top:2px;margin-bottom:0}
.plane-pick .pp-x{width:16px;height:16px;border-radius:4px;flex:none}
.plane-pick .pp-x.xy{background:rgba(90,160,255,.5);border:1px solid #5aa0ff}
.plane-pick .pp-x.xz{background:rgba(107,255,70,.4);border:1px solid #6bff46}
.plane-pick .pp-x.yz{background:rgba(255,95,104,.4);border:1px solid #ff5f68}
/* hidden-Attribut schlägt die flex/absolute-Regeln (sonst immer sichtbar) */
.sketch-pal[hidden],.plane-pick[hidden],.extrude-panel[hidden]{display:none!important}
/* Skizzen-Tools ausgegraut, solange noch keine Ebene gewählt ist */
.sketch-pal.pick-wait .sp-tool,.sketch-pal.pick-wait .sp-act,.sketch-pal.pick-wait .sp-caret{opacity:.3;pointer-events:none}
.sketch-pal .sp-hint{font-size:8.5px;color:var(--accent);text-align:center;max-width:44px;line-height:1.2;margin-bottom:2px}
/* Linien-Eingabe (Länge/Winkel) */
.line-hud{position:absolute;bottom:52px;left:50%;transform:translateX(-50%);z-index:14;display:flex;align-items:center;gap:12px;
  padding:8px 12px;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.line-hud[hidden]{display:none!important}   /* sonst überschreibt display:flex das hidden-Attribut -> HUDs stapeln sich */
.line-hud label{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-secondary)}
.line-hud input{width:70px;height:28px;border:1px solid var(--border);border-radius:7px;background:var(--surface-1);color:var(--text-primary);
  text-align:right;padding:0 7px;font-size:12.5px;font-variant-numeric:tabular-nums}
.line-hud input:focus{border-color:var(--accent);outline:none}
.line-hud label span{color:var(--text-muted);font-size:11px}
.line-hud .lh-tip{font-size:10.5px;color:var(--text-muted)}
/* Skizzen-Browser */
.sketch-browser{position:absolute;left:12px;top:14px;z-index:12;width:186px;max-height:44%;overflow:auto;
  background:var(--surface-1);border:1px solid var(--border-strong);border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.5)}
.sketch-browser .sb-h{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:var(--text-secondary);
  padding:9px 11px 7px;border-bottom:1px solid var(--border)}
.sketch-browser .sb-h svg{width:14px;height:14px}
.sb-list{padding:5px}
.sk-row{display:flex;align-items:center;gap:6px;padding:5px 6px;border-radius:8px;cursor:pointer}
.sk-row:hover{background:var(--surface-hover)}
.sk-row.active{background:var(--accent-soft)}
.sk-row .sk-name{flex:1;min-width:0;font-size:11.5px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk-eye,.sk-del{width:24px;height:24px;flex:none;border:0;background:transparent;color:var(--text-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:6px}
.sk-eye svg,.sk-del svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* V18D.3: Sichtbar = blau, ausgeblendet = gedaempftes Grau mit durchgestrichenem Auge.
   Der Zustand ist damit an der FARBE ablesbar, nicht nur an einem kleinen Strich im Symbol. */
.sk-eye[aria-pressed=true]{color:var(--vis-on)}
.sk-eye[aria-pressed=true]:hover{color:var(--vis-on);background:var(--surface-2)}
.sk-eye[aria-pressed=false]{opacity:.45;color:var(--text-muted)}
.sk-eye:hover,.sk-del:hover{color:var(--text-primary);background:var(--surface-2)}
.sk-del:hover{color:#ff6a6a}
/* Browser-Baum (aufklappbar wie Fusion) */
.tree-sec{margin-bottom:1px}
.ts-h{display:flex;align-items:center;gap:4px;padding:5px 6px;border-radius:8px;cursor:pointer;user-select:none}
.ts-h:hover{background:var(--surface-hover)}
.ts-tw{width:14px;flex:none;color:var(--text-muted);font-size:10px;text-align:center;transition:transform .12s}
.ts-h.open .ts-tw{transform:rotate(90deg)}
.ts-name{flex:1;min-width:0;font-size:11.5px;font-weight:600;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-body{padding-left:14px;margin-left:10px;border-left:1px solid rgba(150,160,180,.16)}   /* Kinder klar eingerückt unter der Überschrift (Fusion-Stil) */
.ts-body[hidden]{display:none}
.tree-leaf{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:8px;cursor:pointer}
.tree-leaf:hover{background:var(--surface-hover)}
/* V18D-A1: gleiche Spezifitaet wie `.sk-row.active` liess die Auswahlfarbe beim Hover
   verschwinden – aktiv und ueberfahren waren genau beim Anfassen nicht unterscheidbar. */
.tree-leaf.sk-row.active,.tree-leaf.sk-row.active:hover{background:var(--accent-soft)}
.tree-leaf .tl-name{flex:1;min-width:0;font-size:11px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tree-leaf.muted .tl-name{color:var(--text-muted)}
.tree-leaf.info{cursor:default}
.tree-leaf.info:hover{background:transparent}
.tree-leaf.info .tl-name{color:var(--text-muted);font-size:10.5px}
.sk-eye.ghost{width:16px;flex:none;pointer-events:none;opacity:0}
/* Zeilen-Symbole im Browser-Baum */
.ts-ic,.tl-ic{width:15px;height:15px;flex:none;display:inline-flex;align-items:center;justify-content:center;color:var(--text-secondary)}
.ts-ic svg,.tl-ic svg{width:15px;height:15px}
.tree-leaf.muted .tl-ic{color:var(--text-muted)}
/* Dokumentwurzel im Browser-Baum (wie Fusion) */
.tree-root{display:flex;align-items:center;gap:6px;padding:5px 6px;margin-bottom:2px;border-radius:8px;font-size:11.5px;font-weight:700;color:var(--text-primary)}
.tree-root .tr-ic{width:16px;flex:none;text-align:center;color:var(--text-secondary)}
.tree-root .tr-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ViewCube */
/* V18D.9: Der Wuerfel stand mit `bottom:44px` TIEFER als die Zeitleiste hoch ist (50 px) –
   gemessen ragte er 11 px darunter und wurde vom `overflow:hidden` des Bereichs
   angeschnitten. Er sitzt jetzt ueber der Leiste, mit Abstand zu beiden Raendern; seine
   Achsenpfeile ragen ueber den eigenen Kasten hinaus und brauchen diesen Rand. */
.viewcube{position:absolute;bottom:64px;right:22px;z-index:13;width:96px;display:flex;flex-direction:column;align-items:center;gap:6px;perspective:440px;pointer-events:auto;cursor:grab;touch-action:none;transform:scale(1.2);transform-origin:bottom right}
.viewcube:active{cursor:grabbing}
/* V18D.9: Die Skizzenpalette steht als Spalte am rechten Rand und reicht weit nach unten –
   dort lag der ViewCube und die beiden ueberdeckten sich. Solange gezeichnet wird, rueckt der
   Wuerfel neben die Spalte. Ausserhalb des Skizzenmodus bleibt seine Lage unveraendert. */
body.fg-sketching .viewcube{right:72px}
.vc-stage{width:80px;height:70px;position:relative;transform-style:preserve-3d}
.vc-cube{display:none}   /* durch den WebGL-ViewCube ersetzt */
.vc-face{position:absolute;left:0;top:0;width:40px;height:40px;border:1px solid #b4b8c0;background:#dcdee3;
  color:#33373f;font-size:8px;font-weight:800;letter-spacing:.4px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;pointer-events:auto;backface-visibility:hidden}
.vc-face:hover{background:#ff8c3c!important;border-color:var(--accent)}
/* Flächen an den Welt-Achsen ausgerichtet; die Würfel-Orientierung setzt JS live.
   Text klebt auf der Fläche (dreht mit); horizontale Flächen bekommen die richtige
   Leserichtung per Zusatzrotation. */
/* scaleX(-1) hebt die Spiegelung der Würfel-Matrix (det -1) auf -> Text lesbar. */
.vc-top{transform:translateZ(20px) scaleX(-1)}                     /* +Z OBEN */
.vc-bottom{transform:rotateX(180deg) translateZ(20px) scaleX(-1)}  /* -Z UNTEN */
.vc-front{transform:rotateX(90deg) translateZ(20px) scaleX(-1)}    /* -Y VORNE */
.vc-back{transform:rotateX(-90deg) translateZ(20px) scaleX(-1)}    /* +Y HINTEN */
.vc-right{transform:rotateY(90deg) translateZ(20px) scaleX(-1)}    /* +X RECHTS */
.vc-left{transform:rotateY(-90deg) translateZ(20px) scaleX(-1)}    /* -X LINKS */
.vc-home{position:absolute;left:-6px;top:-6px;width:22px;height:22px;padding:0;display:flex;align-items:center;justify-content:center;
  background:var(--surface-1);border:1px solid var(--border-strong);border-radius:6px;color:var(--text-secondary);cursor:pointer;z-index:22}
.vc-home:hover{background:var(--surface-hover);color:var(--accent)}
.vc-home svg{width:14px;height:14px}
/* Roll-Steuerung: EIN doppelköpfiger geschwungener Pfeil (wie Fusion), zwei Klick-Hälften. */
.vc-rollctl{position:absolute;top:-24px;right:2px;width:40px;height:40px;display:none;z-index:22}
.viewcube.face-view .vc-rollctl{display:block}   /* nur in einer Flächen-Ansicht sichtbar */
.vc-rollart{position:absolute;inset:0;width:100%;height:100%;color:#dbe2ea;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7));pointer-events:none;transition:color .12s}
.vc-rollctl:hover .vc-rollart{color:var(--accent)}
.vc-roll{position:absolute;left:0;width:100%;height:50%;padding:0;margin:0;border:0;background:transparent;cursor:pointer}
.vc-roll-t{top:0} .vc-roll-b{bottom:0}
/* Nachbar-Dreiecke (nur in Flächenansicht via .show-nb eingeblendet) */
.vc-nb{position:absolute;display:none;padding:0;width:16px;height:16px;line-height:14px;text-align:center;font-size:11px;
  background:transparent;border:0;color:var(--text-muted);cursor:pointer;z-index:21}
.vc-nb:hover{color:var(--accent)}
.viewcube.show-nb .vc-nb{display:block}
.vc-nb-up{left:50%;top:-2px;transform:translateX(-50%)}
.vc-nb-down{left:50%;top:62px;transform:translateX(-50%)}
.vc-nb-left{left:2px;top:50%;transform:translateY(-50%)}
.vc-nb-right{right:2px;top:50%;transform:translateY(-50%)}
/* ViewCube-Menü */
.vc-menu-btn{position:absolute;right:-6px;bottom:-4px;width:18px;height:18px;padding:0;display:flex;align-items:center;justify-content:center;
  background:var(--surface-1);border:1px solid var(--border-strong);border-radius:5px;color:var(--text-secondary);cursor:pointer;z-index:22}
.vc-menu-btn:hover{color:var(--accent)}
.vc-menu-btn svg{width:12px;height:12px}
.vc-menu{position:absolute;right:60px;bottom:-4px;min-width:212px;background:var(--surface-1);border:1px solid var(--border-strong);
  border-radius:9px;padding:5px;z-index:30;box-shadow:0 14px 40px rgba(0,0,0,.5)}
.vc-menu[hidden]{display:none}
.vc-menu button{display:block;width:100%;text-align:left;padding:7px 10px 7px 26px;border:0;background:transparent;color:var(--text-primary);
  font-size:12px;border-radius:6px;cursor:pointer;position:relative;font-family:inherit;white-space:nowrap}
.vc-menu button:hover{background:var(--surface-hover)}
.vc-menu button.on::before{content:"✓";position:absolute;left:9px;color:var(--accent)}
.vc-menu-sep{height:1px;background:var(--border);margin:4px 6px}
/* Einheitlich hellgrau (Fusion-Look); Orientierung gibt die XYZ-Achse an der Ecke. */
.vc-top,.vc-bottom,.vc-front,.vc-back,.vc-right,.vc-left{background:#dcdee3;border-color:#b4b8c0}
/* XYZ-Achslinien an der Würfelecke (Overlay, drehen mit, in Achsfarben) */
.vc-axis{position:absolute;left:0;top:0;width:80px;height:70px;z-index:2;pointer-events:none;overflow:visible}
/* Aufrechte Flächen-Beschriftung: immer waagerecht/lesbar, JS positioniert live.
   Liegt ÜBER dem Würfel (nicht im 3D-Kontext), deckt die vc-stage ab. */
.vc-labels{position:absolute;left:8px;top:0;width:80px;height:70px;z-index:20;pointer-events:none}
.vc-labels span{position:absolute;transform:translate(-50%,-50%);font-size:8px;font-weight:800;letter-spacing:.3px;color:#33373f;text-shadow:0 1px 1px rgba(255,255,255,.55);white-space:nowrap;display:none}
/* Extrudieren-Panel (rechts, kontextuell) */
.extrude-panel{position:absolute;top:56px;right:12px;z-index:14;width:190px;background:var(--surface-1);border:1px solid var(--border-strong);border-radius:12px;padding:12px;box-shadow:0 14px 40px rgba(0,0,0,.5)}
.extrude-panel .ep-h{font-size:12px;font-weight:600;color:var(--text-primary);margin-bottom:10px}
.ep-row{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.ep-row label{font-size:12px;color:var(--text-secondary);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ep-inp{display:flex;align-items:center;gap:5px}
.ep-inp input{width:64px;height:30px;border:1px solid var(--border);border-radius:7px;background:var(--surface-2);color:var(--text-primary);text-align:right;padding:0 7px;font-variant-numeric:tabular-nums}
.ep-inp span{font-size:11px;color:var(--text-muted)}
.ep-btns{display:flex;flex-direction:column;gap:6px}
.ep-apply{height:34px;border:0;border-radius:8px;background:var(--accent);color:#0a1a06;font-size:12.5px;font-weight:600;cursor:pointer}
.ep-apply:hover{background:var(--accent-hover)}
.ep-flip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--border-strong);border-radius:7px;background:var(--surface-2);color:var(--text-secondary);font-size:12px;cursor:pointer}
.ep-flip:hover{color:var(--text-primary);border-color:var(--accent);background:var(--surface-hover)}
.ep-flip svg{flex:0 0 auto}
.ep-sel{height:28px;border:1px solid var(--border-strong);border-radius:7px;background:var(--surface-2);color:var(--text-primary);font-size:12px;padding:0 6px;cursor:pointer;min-width:0;max-width:100%}
.ep-sel:focus{outline:none;border-color:var(--accent)}
/* V20.2: Das Symbol des GEWAEHLTEN Wertes steht im Feld vor der Auswahlliste. Es ist reine
   Anzeige – Klicks gehen an die Liste darunter, damit der Bedienweg unveraendert bleibt. */
.ep-selw{position:relative;display:inline-flex;align-items:center;min-width:0;max-width:100%}
.ep-selw>.ep-sel{padding-left:21px;width:100%}
/* In einer Zeile mit Auswahlfeld behaelt die Beschriftung ihre volle Breite – sie ist kurz und
   fest; gekuerzt wird notfalls der Wert, den das Symbol ohnehin mit anzeigt. */
.ep-row-sel>label{flex:0 0 auto}
.ep-row-sel>.ep-selw{flex:1 1 auto}
.ep-sic{position:absolute;left:5px;top:50%;transform:translateY(-50%);display:flex;
  color:var(--text-secondary);pointer-events:none}
.ep-sic:empty{display:none}
.ep-sic:empty+.ep-sel{padding-left:6px}
.ep-chk{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.ep-targets{margin:2px 0 12px;border-top:1px solid var(--border-strong);padding-top:10px}
.ep-th{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.ep-trow{display:flex;align-items:center;gap:8px;padding:4px 2px;font-size:12px;color:var(--text-primary);cursor:pointer;border-radius:6px;min-width:0}
.ep-trow>span:not(.ep-tbadge){flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ep-trow input{flex:0 0 auto}
.ep-trow:hover{background:var(--surface-hover)}
.ep-trow input{width:15px;height:15px;accent-color:var(--accent);cursor:pointer}
.ep-trow.disabled{color:var(--text-muted);cursor:not-allowed}
.ep-trow.disabled:hover{background:transparent}
.ep-trow.disabled .ep-tbadge{color:var(--text-secondary)}
.ep-trow .ep-tbadge{margin-left:auto;font-size:10px;color:var(--text-muted)}
.ep-tmsg{font-size:11px;color:#e6a23c;margin-top:6px;min-height:0}
.ep-cancel{height:30px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface-2);color:var(--text-secondary);font-size:11.5px;cursor:pointer}
.ep-cancel:hover{color:var(--text-primary);border-color:var(--accent);background:var(--surface-hover)}
/* V18D-A1: Sichtbarer Tastaturfokus an JEDEM Bedienelement der Dialoge. `outline:none` ohne
   Ersatz galt bisher an `.ep-sel` – der Fokus war dort nur an der Randfarbe erkennbar. */
.extrude-panel :is(select,button,input):focus-visible,
.xf-panel :is(select,button,input):focus-visible,
#skList :is(select,button,input):focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}
/* Beschriftungszeile mit Kontrollkaestchen im Boolean-Dialog. */
.ep-lbl{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-primary);cursor:pointer}
/* Transformieren-Panel */
.xf-panel{position:absolute;top:56px;right:12px;z-index:15;width:210px;background:var(--surface-1);border:1px solid var(--border-strong);border-radius:12px;padding:12px;box-shadow:0 14px 40px rgba(0,0,0,.5)}
.xf-panel[hidden]{display:none!important}
.xf-panel .xf-h{font-size:12px;font-weight:600;color:var(--text-primary);margin-bottom:6px}
.xf-hint{font-size:10.5px;color:var(--text-muted);line-height:1.35;margin-bottom:10px}
.xf-sec{font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin:8px 0 4px}
.xf-row{display:flex;align-items:center;gap:7px;margin-bottom:6px;min-width:0}
.xf-row .xf-ax{width:16px;height:16px;border-radius:4px;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;color:#0a0a0b;flex:none}
.xf-ax.ax-x{background:#ff6b6b} .xf-ax.ax-y{background:#63d471} .xf-ax.ax-z{background:#5aa0ff}
.xf-row input{flex:1 1 auto;min-width:0;height:30px;border:1px solid var(--border);border-radius:7px;background:var(--surface-2);color:var(--text-primary);text-align:right;padding:0 8px;font-variant-numeric:tabular-nums}
.xf-row .xf-u{font-size:11px;color:var(--text-muted);width:22px;flex:0 0 auto}
.xf-row.xf-full select{width:100%;height:30px;border:1px solid var(--border);border-radius:7px;background:var(--surface-2);color:var(--text-primary);padding:0 8px}
.xf-pos{font-size:10.5px;color:var(--text-secondary);margin:10px 0 8px;font-variant-numeric:tabular-nums;line-height:1.4}
.xf-btns{display:flex;gap:6px}
.xf-apply{flex:1;height:34px;border:0;border-radius:8px;background:var(--accent);color:#0a1a06;font-size:12.5px;font-weight:600;cursor:pointer}
.xf-apply:hover{background:var(--accent-hover)}
.xf-cancel{flex:1;height:34px;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--text-muted);font-size:12px;cursor:pointer}
.xf-cancel:hover{color:var(--text-primary)}
.xf-info{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:var(--text-muted);padding:4px 0;border-bottom:1px solid var(--border)}
.xf-info b{color:var(--text-secondary);font-weight:600}
.xf-copy{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text-secondary);margin:10px 0 2px;cursor:pointer}
.xf-copy input{width:15px;height:15px;accent-color:var(--accent)}
.xf-soon{margin-left:auto;font-size:9px;text-transform:uppercase;letter-spacing:.4px;color:var(--warning);background:rgba(245,189,69,.12);border-radius:4px;padding:1px 5px}
/* Kontext-Eingabeleiste unten (Fusion-Stil): erscheint je nach Werkzeug. */
.ctx-bar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:14;display:flex;align-items:center;gap:14px;
  background:rgba(20,21,24,.94);backdrop-filter:blur(8px);border:1px solid var(--border-strong);border-radius:11px;padding:7px 14px;box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:calc(100% - 24px)}
.ctx-bar[hidden]{display:none!important}
.ctx-lead{font-size:11.5px;color:var(--text-muted);white-space:nowrap}
.ctx-lead b{color:var(--text-secondary);font-weight:600}
.ctx-fields{display:flex;align-items:center;gap:8px}
.ctx-bar .cf{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--text-secondary)}
.ctx-bar .cf.ax-x{color:#ff6b6b} .ctx-bar .cf.ax-y{color:#63d471} .ctx-bar .cf.ax-z{color:#5aa0ff}
.ctx-bar .cf input{width:58px;height:28px;border:1px solid var(--border);border-radius:7px;background:var(--surface-2);color:var(--text-primary);text-align:right;padding:0 7px;font-variant-numeric:tabular-nums;font-weight:600}
.ctx-bar .cf input:focus{border-color:var(--accent);outline:none}
.ctx-bar .cf input::selection{background:#2d6cff;color:#fff}
.ctx-div{width:1px;height:20px;background:var(--border-strong)}
.ctx-u{font-size:11px;color:var(--text-muted);white-space:nowrap}
.ctx-bar input::-webkit-outer-spin-button,.ctx-bar input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ctx-bar input{-moz-appearance:textfield;appearance:textfield}
.giz-label{position:fixed;z-index:16;transform:translate(-50%,-140%);pointer-events:none;background:rgba(20,22,26,.92);
  border:1px solid #ffd24a;color:#ffd24a;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;padding:2px 7px;border-radius:7px;white-space:nowrap}
.giz-label[hidden]{display:none}
.giz-input{position:fixed;z-index:16;transform:translate(8px,-50%);display:flex;align-items:center;gap:4px;
  background:rgba(20,22,26,.95);border:1px solid #5aa0ff;border-radius:8px;padding:2px 6px}
.giz-input[hidden]{display:none}
.giz-input:focus-within{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 4px 12px rgba(0,0,0,.5)}
.giz-input input{width:56px;height:24px;border:0;outline:none;background:transparent;color:#dfe8f5;font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums}
.giz-input span{font-size:10.5px;color:var(--text-muted)}
/* Fusion-Technik: markierter Wert im Fokus (blau) -> beim Tippen ersetzt + nativer Cursor. */
.giz-input input::selection,.circ-dim input::selection,.line-hud input::selection{background:#2d6cff;color:#fff}
.circ-dim{position:fixed;z-index:16;transform:translate(-50%,-50%);display:flex;align-items:center;gap:4px;cursor:text;
  background:#12141a;border:1px solid #36d1ff;border-radius:9px;padding:3px 10px;box-shadow:0 4px 14px rgba(0,0,0,.55)}
.circ-dim[hidden]{display:none}
.circ-dim:focus-within{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 4px 14px rgba(0,0,0,.55)}
.circ-dim .cd-pre{font-size:12.5px;color:#36d1ff;font-weight:700}
.circ-dim input{width:60px;height:22px;border:0;outline:none;background:transparent;color:#dfe8f5;font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums}
.circ-dim .cd-u{font-size:10.5px;color:var(--text-muted);white-space:nowrap}
/* Maßfelder: keine hässlichen Spinner-Pfeilchen */
.circ-dim input,.giz-input input,.line-hud input{-moz-appearance:textfield;appearance:textfield}
.circ-dim input::-webkit-outer-spin-button,.circ-dim input::-webkit-inner-spin-button,
.giz-input input::-webkit-outer-spin-button,.giz-input input::-webkit-inner-spin-button,
.line-hud input::-webkit-outer-spin-button,.line-hud input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.circ-dim input{width:60px}
.sel-box{position:fixed;z-index:25;border:1px solid #63d471;background:rgba(99,212,113,.12);pointer-events:none}
.sel-box.cross{border-style:dashed;border-color:#36d1ff;background:rgba(54,209,255,.10)}
.sel-box[hidden]{display:none}
/* Raster-Maße */
.grid-labels{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.ang-label{position:absolute;z-index:7;pointer-events:none;transform:translate(-50%,-50%);
  font-size:11px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 0 3px #000,0 1px 3px #000}
.ang-label[hidden]{display:none}
.len-label{background:rgba(20,22,26,.9);border:1px solid var(--accent);border-radius:6px;padding:1px 5px;color:#fff;text-shadow:none}
/* Wie in Fusion: der Live-Maßwert sieht aus wie ein markiertes Eingabefeld -> lädt zum Tippen ein. */
.len-label.editable{background:#12141a;border:1px solid var(--accent);border-radius:7px;padding:2px 8px;
  box-shadow:0 0 0 2px rgba(54,209,255,.22),0 4px 12px rgba(0,0,0,.5)}
.len-label .dl-sel{background:#2d6cff;color:#fff;border-radius:2px;padding:0 3px;margin:0 1px}
.len-label .dl-caret{display:inline-block;width:1px;height:1em;background:var(--accent);
  vertical-align:-.15em;margin:0 1px;animation:dlCaret 1.05s steps(1) infinite}
@keyframes dlCaret{50%{opacity:0}}
.grid-labels span{position:absolute;transform:translate(-50%,-50%);font-size:10px;font-weight:700;color:var(--text-secondary);
  font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:0 0 3px #000,0 1px 3px #000,0 0 6px #000}
.hint-badge{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);z-index:5;
  background:rgba(23,23,25,.9);border:1px solid var(--border-strong);border-radius:20px;padding:8px 16px;
  font-size:12px;color:var(--text-secondary);display:none;align-items:center;gap:8px}
.hint-badge.on{display:flex}
.hint-badge svg{width:15px;height:15px;stroke:var(--accent)}

/* ---------- Results panel ---------- */
.results{width:var(--results-w);flex:0 0 var(--results-w);display:flex;flex-direction:column;min-height:0}
.results .tabpanes{padding:12px}
.stale-banner{display:none;margin:10px 12px 0;padding:8px 11px;border-radius:9px;font-size:11.5px;
  background:rgba(245,189,69,.1);color:var(--warning);border:1px solid rgba(245,189,69,.22);align-items:center;gap:8px}
.stale-banner.on{display:flex}
.stale-banner svg{width:15px;height:15px;stroke:currentColor;flex:none}

.res-tools{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.res-tools .tbtn{height:30px;font-size:11.5px}
.explode-ctl{background:var(--surface-1);border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:12px}
.explode-ctl .t{display:flex;justify-content:space-between;font-size:11.5px;color:var(--text-secondary);margin-bottom:8px}
.explode-ctl input[type=range]{width:100%}

.part{display:flex;align-items:center;gap:9px;padding:9px 10px;background:var(--surface-1);border:1px solid var(--border);
  border-radius:10px;margin-bottom:7px;position:relative}
.part .sw{width:12px;height:12px;border-radius:3px;flex:none;border:1px solid rgba(255,255,255,.2)}
.part .pn{flex:1;min-width:0}
.part .pn .nm{font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.part .pn .tri{font-size:10.5px;color:var(--text-muted)}
.part .ibtn{width:26px;height:26px;border:0;background:transparent;color:var(--text-muted);border-radius:6px;display:grid;place-items:center;flex:none}
.part .ibtn svg{width:15px;height:15px;stroke:currentColor;fill:none}
.part .ibtn:hover{background:var(--surface-hover);color:var(--text-primary)}
.part.hidden{opacity:.5}
.part.hidden .sw{background:transparent!important}
.ctxmenu{position:absolute;z-index:20;background:var(--surface-2);border:1px solid var(--border-strong);
  border-radius:9px;padding:5px;min-width:170px;box-shadow:0 12px 30px rgba(0,0,0,.5);display:none}
.ctxmenu.on{display:block}
.ctxmenu button{display:flex;align-items:center;gap:9px;width:100%;padding:8px 9px;border:0;background:transparent;
  color:var(--text-secondary);border-radius:6px;font-size:12px;text-align:left}
.ctxmenu button:hover{background:var(--surface-hover);color:var(--text-primary)}
.ctxmenu button svg{width:14px;height:14px;stroke:currentColor;fill:none}
.filemenu{position:fixed;z-index:200;min-width:214px;padding:6px}
.filemenu .dd-h{font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);padding:4px 9px 5px}
.filemenu .dd-sep{height:1px;background:var(--border);margin:5px 6px}
.filemenu button{padding:9px 9px;font-size:12.5px}
.filemenu button svg{width:16px;height:16px;flex:none}
.filemenu button span{display:flex;align-items:center;gap:6px}
/* V22: Hinweiszeile fuer Formate, die das Programm bewusst NICHT liest. Sie steht im
   Menue statt erst in der Fehlermeldung nach dem Auswaehlen der Datei. */
.filemenu .dd-note{font-size:10.5px;line-height:1.35;color:var(--text-muted);padding:2px 10px 6px}
/* Aufklapp-Pfeil an einer beschrifteten Werkzeugleisten-Schaltflaeche. */
.tbtn .tbtn-car{width:12px;height:12px;stroke:currentColor;fill:none;opacity:.7;margin-left:-2px}
.filemenu button em{font-style:normal;font-size:10px;font-weight:600;color:var(--text-muted);background:var(--surface-1);border:1px solid var(--border);border-radius:5px;padding:1px 5px}

.overall{display:flex;align-items:center;gap:11px;padding:13px;border-radius:11px;margin-bottom:14px;
  background:var(--surface-1);border:1px solid var(--border)}
.overall .big{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center}
.overall .big svg{width:20px;height:20px}
.overall .ot{font-size:13.5px;font-weight:600}
.overall .os{font-size:11px;color:var(--text-muted);margin-top:1px}
.overall.ok .big{background:var(--success-soft)} .overall.ok .big svg{stroke:var(--success)}
.overall.warn .big{background:rgba(245,189,69,.14)} .overall.warn .big svg{stroke:var(--warning)}
.overall.err .big{background:rgba(255,95,104,.14)} .overall.err .big svg{stroke:var(--danger)}
.overall.none .big{background:var(--surface-2)} .overall.none .big svg{stroke:var(--text-muted)}

.check{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--border);font-size:12px}
.check:last-child{border-bottom:0}
.check .st{width:9px;height:9px;border-radius:50%;flex:none;background:var(--text-muted)}
.check .st.ok{background:var(--success)} .check .st.warn{background:var(--warning)} .check .st.err{background:var(--danger)} .check .st.none{background:var(--surface-2);border:1px solid var(--border-strong)}
.check .cl{flex:1;color:var(--text-secondary)}
.check .cv{color:var(--text-primary);font-weight:500;text-align:right}
.warnbox{margin-top:12px}
.warnbox .wi{display:flex;gap:8px;font-size:11.5px;color:var(--warning);padding:6px 0;line-height:1.4}
.warnbox .wi svg{width:14px;height:14px;stroke:currentColor;flex:none;margin-top:1px}
.res-empty{text-align:center;color:var(--text-muted);font-size:12px;padding:30px 14px;line-height:1.5}
.proj-hint{color:var(--text-muted);font-size:11.5px;padding:10px 12px 6px;line-height:1.45}
.proj-list{display:flex;flex-direction:column;gap:8px;padding:4px 10px 12px}
.proj-empty{text-align:center;color:var(--text-muted);font-size:12px;padding:24px 10px}
.proj-card{position:relative;display:flex;gap:10px;align-items:center;background:var(--surface-1,#16181d);border:1px solid var(--border);border-radius:10px;padding:8px;cursor:pointer;transition:.12s}
.proj-card:hover{border-color:var(--accent)}
.proj-card.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.proj-thumb{width:52px;height:52px;flex:0 0 auto;border-radius:8px;object-fit:cover;background:#0c0d10;display:block}
.proj-meta{min-width:0;flex:1 1 auto}
.proj-name{font-size:12.5px;color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-sub{font-size:10.5px;color:var(--text-muted);margin-top:2px}
.proj-del{position:absolute;top:5px;right:5px;width:22px;height:22px;border:0;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:.12s}
.proj-card:hover .proj-del{opacity:1}
.proj-del:hover{background:#ff5a5a}
.proj-del svg{width:12px;height:12px}
/* Ergebnis-/Projekte-Panel ein- und ausklappen (größerer Editor) */
#resCollapse{flex:0 0 auto!important;width:30px;min-width:30px;height:30px;padding:0;display:flex;align-items:center;justify-content:center;color:var(--text-muted)}
#resCollapse:hover{color:var(--text-secondary)}
#resCollapse svg{width:16px;height:16px;stroke:currentColor;fill:none}
.results.collapsed{width:0;flex-basis:0;min-width:0;overflow:hidden;opacity:0;pointer-events:none;margin:0;padding:0;border:0}
/* Rechte Randlasche „Projekte" in die untere rechte Ecke (über dem ViewCube) – nicht mehr mittig
   am Rand, damit sie nicht mit dem Extrudieren-/Auswahl-Panel (oben rechts) kollidiert. Beim
   Extrudieren wird sie zusätzlich ausgeblendet (siehe fg-extruding-Regel). */
#resReopen{display:none;position:absolute;top:auto;bottom:210px;right:0;z-index:20;align-items:center;gap:7px;height:38px;padding:0 14px 0 13px;
  border:1px solid var(--accent);border-right:0;border-radius:10px 0 0 10px;background:var(--accent);color:#160a02;
  font-size:12.5px;font-weight:700;cursor:pointer;transition:.12s;box-shadow:0 4px 16px -4px rgba(255,106,26,.7)}
#resReopen:hover{filter:brightness(1.08)}
#resReopen svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4}
.workspace.res-collapsed #resReopen{display:flex}
/* Während einer Skizze (Palette rechts + Browser links) die Randlaschen ausblenden -> keine Überlappung. */
body.fg-sketching #resReopen,body.fg-sketching #setReopen{display:none!important}
/* Beim Extrudieren (Panel oben rechts) die rechte „Projekte"-Lasche ausblenden -> keine Überlappung. */
body.fg-extruding #resReopen{display:none!important}
/* Prominenter „Skizze fertigstellen"-Button (Fusion-Stil, oben mittig über dem Canvas). */
.sk-finish{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:40;display:inline-flex;align-items:center;gap:8px;
  padding:10px 20px 10px 16px;border:1px solid #34c877;border-top-color:#4fd98a;border-radius:9px;
  background:linear-gradient(#2bbd6a,#1f9c54);color:#fff;font-size:13px;font-weight:700;cursor:pointer;
  box-shadow:0 2px 5px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.18);letter-spacing:.2px;
  transition:filter .12s,transform .08s,box-shadow .12s}
.sk-finish:hover{filter:brightness(1.08);box-shadow:0 5px 14px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.22);transform:translateX(-50%) translateY(-1px)}
.sk-finish:active{filter:brightness(.94);transform:translateX(-50%) translateY(0);box-shadow:0 1px 3px rgba(0,0,0,.45),inset 0 1px 2px rgba(0,0,0,.25)}
.sk-finish svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sk-finish[hidden]{display:none}
/* V19.1: Hinweisstreifen im 3D-Bereich. Er erklaert eine abgelehnte Aktion dort, wo der
   Zeiger gerade ist – die Fusszeile wurde beim Arbeiten uebersehen. Er blockiert nichts:
   `pointer-events:none`, und er verschwindet von allein. */
.fg-hint{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:41;pointer-events:none;
  max-width:min(620px,86%);padding:9px 14px;border:1px solid #7a5a1e;border-radius:9px;
  background:linear-gradient(#3a2c12,#2a2010);color:#ffd79a;font-size:12.5px;line-height:1.35;
  box-shadow:0 6px 18px rgba(0,0,0,.45);text-align:center}
.fg-hint[hidden]{display:none}
.res-empty svg{width:36px;height:36px;stroke:var(--surface-2);margin-bottom:12px;stroke-width:1.5}
/* Einstellungen-Panel einklappbar (spiegelt Ergebnisse) -> mehr Platz fürs 3D-Canvas. */
#setCollapse{flex:0 0 auto!important;width:30px;min-width:30px;height:30px;padding:0;display:flex;align-items:center;justify-content:center;color:var(--text-muted);border:0;background:transparent;border-radius:7px}
#setCollapse:hover{color:var(--text-secondary);background:var(--surface-hover)}
#setCollapse svg{width:16px;height:16px;stroke:currentColor;fill:none}
.settings.collapsed{width:0;flex-basis:0;min-width:0;overflow:hidden;opacity:0;pointer-events:none;margin:0;padding:0;border:0}
.settings{transition:width .18s ease,flex-basis .18s ease,opacity .12s ease}
#setReopen{display:none;position:absolute;top:50%;left:0;transform:translateY(-50%);z-index:20;align-items:center;gap:7px;height:36px;padding:0 11px 0 12px;
  border:1px solid var(--border);border-left:0;border-radius:0 10px 10px 0;background:var(--surface-1);color:var(--text-secondary);
  font-size:12px;font-weight:600;cursor:pointer;transition:.12s}
#setReopen:hover{color:var(--text);border-color:var(--accent)}
#setReopen svg{width:15px;height:15px;stroke:currentColor;fill:none}
.workspace.set-collapsed #setReopen{display:flex}

.results .action{padding:10px 12px;border-top:1px solid var(--border);flex:none}
.export-all{width:100%;height:42px;border:0;border-radius:10px;background:var(--accent);color:#0a1a06;
  font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px}
.export-all:hover:not(:disabled){background:var(--accent-hover)}
.export-all:disabled{background:var(--surface-2);color:var(--text-muted);cursor:not-allowed}
.export-all svg{width:16px;height:16px;stroke:currentColor}

/* ---------- Compare bars (adaptive) ---------- */
.compare{margin-top:12px}
.cmprow{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-size:11.5px}
.cmprow .cl{width:78px;flex:none;color:var(--text-muted)}
.cmprow .tk{flex:1;height:16px;background:var(--surface-2);border-radius:5px;overflow:hidden}
.cmprow .tk i{display:block;height:100%;background:var(--surface-hover)}
.cmprow.now .tk i{background:var(--accent)}
.cmprow .cv{width:64px;flex:none;text-align:right;color:var(--text-secondary)}

/* ---------- Modal ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:100;display:none;align-items:center;justify-content:center;padding:20px}
.modal-bg.on{display:flex}
.modal{background:var(--panel-bg);border:1px solid var(--border-strong);border-radius:14px;max-width:440px;width:100%;
  max-height:80vh;overflow-y:auto;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.modal .mh{display:flex;align-items:center;padding:16px 18px;border-bottom:1px solid var(--border)}
.modal .mh h3{margin:0;font-size:15px;font-weight:600}
.modal .mh .x{margin-left:auto;width:30px;height:30px;border:0;background:transparent;color:var(--text-muted);border-radius:7px;display:grid;place-items:center}
.modal .mh .x:hover{background:var(--surface-hover);color:var(--text-primary)}
.modal .mb{padding:18px;font-size:13px;color:var(--text-secondary);line-height:1.6}
.modal .mb h4{color:var(--text-primary);font-size:13px;margin:16px 0 6px}
.modal .mb h4:first-child{margin-top:0}
.modal .mb code{background:var(--surface-1);padding:1px 5px;border-radius:4px;font-size:12px}
.modal .mb ul{margin:6px 0;padding-left:18px}
.modal .mb .set-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border)}
.soon{font-size:9px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--warning);
  background:rgba(245,189,69,.12);border:1px solid rgba(245,189,69,.25);border-radius:5px;padding:1px 5px;margin-left:6px}

/* ---------- Account / Auth / Plans ---------- */
.account-btn{display:inline-flex;align-items:center;gap:8px;padding:0 10px 0 5px;height:34px}
.account-btn .avatar{width:24px;height:24px;flex:none;border-radius:50%;background:var(--surface-2);
  display:grid;place-items:center;font-size:10.5px;font-weight:700;color:var(--text-secondary);overflow:hidden}
.account-btn .avatar svg{width:15px;height:15px;stroke:var(--text-muted)}
.account-btn.in .avatar{background:var(--accent);color:#0a1a06}
.account-btn .acc-name{font-size:12.5px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal.wide{max-width:720px}
.demo-note{background:rgba(245,189,69,.09);border:1px solid rgba(245,189,69,.22);color:var(--warning);
  border-radius:10px;padding:11px 13px;font-size:11.5px;line-height:1.5;margin-bottom:16px}
.demo-note b{color:var(--warning)}
.field-col{margin-bottom:12px}
.field-col label{display:block;font-size:11.5px;color:var(--text-secondary);margin-bottom:5px}
.field-col label .opt{color:var(--text-muted)}
.ti{width:100%;height:38px;padding:0 12px;background:var(--surface-1);border:1px solid var(--border);
  border-radius:var(--radius-control);color:var(--text-primary);font-size:13px}
.ti:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ti:disabled{opacity:.6;cursor:not-allowed}
.auth-err,.acc-saved{font-size:12px;min-height:16px;margin:4px 0 10px}
.auth-err{color:var(--danger)}
.acc-saved{color:var(--accent);display:none}
.acc-saved.on{display:block}
.modal-primary{width:100%;height:44px;border:0;border-radius:10px;background:var(--accent);color:#0a1a06;
  font-size:13.5px;font-weight:700}
.modal-primary:hover{background:var(--accent-hover)}
.modal-secondary{width:100%;height:44px;border:1px solid var(--border-strong);border-radius:10px;
  background:var(--surface-1);color:var(--text-primary);font-size:13.5px;font-weight:600}
.modal-secondary:hover{background:var(--surface-hover)}
.auth-switch{margin-top:14px;font-size:12.5px;color:var(--text-muted);text-align:center}
.linklike{border:0;background:transparent;color:var(--accent);font-size:inherit;font-weight:600;padding:0;cursor:pointer}
.linklike:hover{color:var(--accent-hover);text-decoration:underline}
.linklike.danger{color:var(--danger)}
[data-auth]{display:none}
[data-auth].on{display:block}
.auth-switch span[data-auth]{display:none}
.auth-switch span[data-auth].on{display:inline}
.auth-pane{display:none}
.auth-pane.on{display:block}
.auth-lead{font-size:13px;color:var(--text-muted);line-height:1.55;margin:0 0 14px}
.auth-lead b{color:var(--text-primary)}
.auth-oauth{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px 14px;
  background:#fff;color:#1f2328;border:1px solid #dadce0;border-radius:10px;font-size:14px;font-weight:600;
  cursor:pointer;transition:.12s;font-family:inherit}
.auth-oauth:hover{background:#f5f6f7}
.auth-or{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--text-muted);font-size:11px;letter-spacing:.08em}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--border)}
/* ---- Anmelde-Modal im hellen, kontraststarken Autodesk-Stil ---- */
#authModal .modal{background:#fff;color:#141414;border:1px solid #e4e4e8;box-shadow:0 24px 70px rgba(0,0,0,.55)}
#authModal .mh{border-bottom:1px solid #ececf0}
#authModal .mh h3{color:#0a0a0a;font-weight:800}
#authModal .x{color:#888}
#authModal .x:hover{color:#111}
#authModal .auth-sub{font-size:12.5px;color:#5b6470;margin:0 0 16px}
#authModal .auth-lead{color:#4a4a52}
#authModal .auth-lead b{color:#111}
#authModal .field-col label{color:#333}
#authModal .ti{background:#fff;color:#111;border:1px solid #c7c7cf}
#authModal .ti:focus{border-color:#111;box-shadow:none}
#authModal .modal-primary{background:#0a0a0a;color:#fff;border:0;font-weight:700}
#authModal .modal-primary:hover{background:#242424}
#authModal .auth-oauth{color:#141414;border:1px solid #c7c7cf;font-weight:600;margin-bottom:8px}
#authModal .auth-oauth:hover{background:#f4f4f6}
#authModal .auth-or{color:#8a8a92}
#authModal .auth-or::before,#authModal .auth-or::after{background:#e2e2e6}
#authModal .linklike{color:#0b63d6;font-weight:600}
#authModal .auth-switch{color:#6a6a72}
#authModal .auth-err{color:#c0392b}
#authModal .demo-note{display:none}   /* Hinweis gilt nur der lokalen Simulation – bei echtem Backend irreführend */
.acc-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.acc-avatar-lg{width:46px;height:46px;flex:none;border-radius:50%;background:var(--accent);color:#0a1a06;
  display:grid;place-items:center;font-size:17px;font-weight:700}
.acc-hn{font-size:15px;font-weight:600}
.acc-he{font-size:12px;color:var(--text-muted);margin-top:2px}
.plan-badge{margin-left:auto;font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px;
  background:var(--accent-soft);color:var(--accent);border:1px solid rgba(255,106,26,.28);text-transform:capitalize}
.acc-actions{display:flex;gap:10px;margin-top:6px}
.acc-actions .modal-primary,.acc-actions .modal-secondary{flex:1}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.plan{border:1px solid var(--border);background:var(--surface-1);border-radius:12px;padding:16px;display:flex;flex-direction:column}
.plan.hl{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.plan.current{outline:2px solid var(--accent);outline-offset:-1px}
.plan .pname{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.plan .tag{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 6px;border-radius:5px;background:var(--accent);color:#0a1a06}
.plan .price{margin:10px 0 2px;font-size:24px;font-weight:700}
.plan .per{font-size:11px;color:var(--text-muted)}
.plan ul{list-style:none;margin:14px 0;padding:0;flex:1;display:flex;flex-direction:column;gap:8px}
.plan li{font-size:12px;color:var(--text-secondary);display:flex;gap:8px;align-items:flex-start;line-height:1.4}
.plan li svg{width:14px;height:14px;flex:none;stroke:var(--accent);margin-top:1px}
.plan .choose{height:38px;border-radius:9px;border:1px solid var(--border-strong);background:var(--surface-2);
  color:var(--text-primary);font-size:12.5px;font-weight:600}
.plan .choose:hover{background:var(--surface-hover)}
.plan.hl .choose{background:var(--accent);color:#0a1a06;border-color:var(--accent)}
.plan.hl .choose:hover{background:var(--accent-hover)}
.plan .choose.iscurrent{background:transparent;color:var(--text-muted);border-color:var(--border);cursor:default}
@media(max-width:640px){ .plans{grid-template-columns:1fr} .modal.wide{max-width:440px} }

/* ---------- Mobile drawer controls ---------- */
.mobtabs{display:none;position:fixed;left:8px;right:8px;bottom:8px;z-index:40;background:var(--surface-2);
  border:1px solid var(--border-strong);border-radius:12px;padding:5px;gap:5px}
.mobtabs button{flex:1;height:40px;border:0;background:transparent;color:var(--text-secondary);border-radius:8px;font-size:12px;font-weight:500;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.mobtabs button svg{width:17px;height:17px;stroke:currentColor}
.mobtabs button[aria-pressed=true]{background:var(--surface-active);color:var(--accent)}
.scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:30}
.scrim.on{display:block}

@media(max-width:1240px){:root{--nav-w:190px;--settings-w:252px;--results-w:280px}}
@media(max-width:1099px){
  .sidebar{--nav-w:56px}
  .sidebar .name,.sidebar .nav-sec .lbl,.sidebar .nav-item .txt,.sidebar .foot span{display:none}
  .sidebar .brand{padding:16px 0 14px;justify-content:center}
  .sidebar .brand .collapse{display:none}
  .sidebar .nav-item{justify-content:center;padding:0}
}
@media(max-width:860px){
  .mobtabs{display:flex}
  #resCollapse,#resReopen{display:none!important}
  .results.collapsed{width:300px;flex-basis:auto;opacity:1;pointer-events:auto}
  .app{padding:8px 8px 60px}
  .settings,.results{position:fixed;top:8px;bottom:64px;z-index:35;width:300px;max-width:88vw;
    box-shadow:0 20px 50px rgba(0,0,0,.5);transition:transform .22s ease}
  .settings{left:8px;transform:translateX(calc(-100% - 16px))}
  .results{right:8px;transform:translateX(calc(100% + 16px))}
  .settings.open{transform:translateX(0)}
  .results.open{transform:translateX(0)}
  .sidebar{position:fixed;top:8px;bottom:64px;left:8px;z-index:38}
  .main{margin-left:64px}
  .topbar .tt-actions .lbl-hide{display:none}
}
@media(max-width:520px){
  .topbar{padding:0 8px;gap:6px}
  .tbtn .lbl-hide{display:none}
  .topbar .tt-actions{gap:3px}
  .topbar .tbtn{height:30px;padding:0 8px}
  .topbar .tbtn.icon{width:30px}
  .tt-divider{display:none}
  .topbar .tt-icon{width:30px;height:30px}
  .settings,.results{width:86vw}
  .vtoolbar{top:8px}
}
/* closed mobile drawers must not extend the page horizontally */
@media(max-width:860px){ .results{right:auto;left:8px;transform:translateX(calc(-100% - 24px))} }

/* ---------- V18D-A2/A3: direkte Auswahl in der 3D-Ansicht ----------
   Die Farben stimmen mit den Konturfarben im Modell ueberein (PICK_COLORS in model-bodies.js):
   Kandidat unter dem Zeiger hellcyan, Ziel blau, Werkzeug orange, unzulaessig rot. Sie sind an
   das dunkle Refloxy-Design angepasst, die Bedeutung ist dieselbe wie im Referenzablauf. */
.ep-pick{margin:0 0 8px;padding:6px 8px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface-1)}
.ep-pkind{font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
.ep-pask{font-size:11.5px;color:var(--text-primary);margin-top:2px}
/* V18D.1-A6: Die Rollenzeile steht jetzt von Anfang an im NICHT gewaehlten Zustand (es gibt
   keine Vorbelegung mehr). Gemessen erreichte sie dort mit `--text-secondary` nur 4,43:1 und
   verfehlte WCAG AA knapp; unterschieden werden die Zustaende ohnehin ueber Rand und Flaeche. */
.ep-prole{display:flex;align-items:center;gap:7px;margin:4px 0 6px;padding:4px 7px;border:1px solid var(--border);
  border-radius:7px;background:var(--surface-1);color:var(--text-primary);font-size:11.5px;cursor:pointer}
.ep-prole:hover{background:var(--surface-hover);color:var(--text-primary)}
.ep-prole[aria-pressed="true"]{border-color:var(--accent);background:var(--surface-active);color:var(--text-primary)}
.ep-prole:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* V20.2: Beim Extrudieren und Drehen NENNT die Rollenzeile nur die Rolle – sie ist keine
   Schaltflaeche. Ohne diese Ausnahme haette sie den Zeiger und den Hover einer Schaltflaeche
   und verspraeche eine Auswahl, die es dort nicht gibt. */
.ep-prole.info{cursor:default}
.ep-prole.info:hover{background:var(--surface-1)}
.ep-pdot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 1px rgba(0,0,0,.5) inset}
/* V18D.1-A7: Auswahlzeilen mit sichtbarem ×. Die Rollenfarbe wiederholt sich am linken Rand,
   damit Ziel und Werkzeug nicht allein ueber die Farbe im 3D-Bild unterschieden werden. */
.ep-chips{display:flex;flex-direction:column;gap:4px;margin:4px 0 0}
.ep-chips:empty{display:none}
.ep-chip{display:flex;align-items:center;gap:8px;min-width:0;padding:4px 6px 4px 8px;border-radius:7px;
  border:1px solid var(--border-strong);background:var(--surface-1);font-size:12.5px;color:var(--text-primary)}
.ep-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ep-chip .ep-cdot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.ep-chip[data-role="target"] .ep-cdot{background:#2f7dff}
.ep-chip[data-role="tool"] .ep-cdot{background:#ff8c1a}
.ep-chip .ep-cname{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ep-chip .ep-cbadge{flex:0 0 auto;font-size:10.5px;font-weight:700;letter-spacing:.02em;
  padding:1px 6px;border-radius:999px;color:#0b0b0e}
.ep-chip[data-role="target"] .ep-cbadge{background:#2f7dff;color:#fff}
.ep-chip[data-role="tool"] .ep-cbadge{background:#ff8c1a;color:#160a02}
.ep-chip .ep-cx{flex:0 0 auto;width:20px;height:20px;display:grid;place-items:center;border:0;border-radius:5px;
  background:transparent;color:var(--text-muted);font-size:14px;line-height:1;cursor:pointer}
.ep-chip .ep-cx:hover{background:var(--surface-hover);color:var(--text-primary)}
.ep-chip .ep-cx:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ep-pdot[data-dot="target"]{background:#2f7dff}
.ep-pdot[data-dot="tool"]{background:#ff8c1a}
.ep-pdet{margin:0 0 4px}
.ep-pdet>summary{font-size:11px;color:var(--text-secondary);cursor:pointer;padding:2px 0;list-style:revert}
.ep-pdet>summary:hover{color:var(--text-primary)}
.ep-pdet>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Fehlerhafte Auswahl wird ROT markiert, nicht nur in einer fluechtigen Meldung. */
.ep-prole.bad{border-color:var(--danger);color:var(--danger)}
.ep-trow.bad{outline:1px solid var(--danger);outline-offset:-1px;border-radius:6px}

/* V18D-Erg6: Ein Zahlenfeld mit unvollstaendiger oder unzulaessiger Eingabe wird rot umrandet.
   Der zuletzt gueltige Wert bleibt bestehen – die Markierung sagt nur, dass die aktuelle
   Eingabe noch nicht uebernommen werden kann. */
.ep-inp input.bad,#exArrowInp.bad{border-color:var(--danger);outline:none}
.ep-inp input.bad:focus-visible{outline:2px solid var(--danger);outline-offset:2px}

/* ---------- V18D-C1/C2: Konstruktions-Timeline ----------
   Sie liegt dauerhaft unten im 3D-Bereich, ist einklappbar und waagerecht scrollbar. Der
   Browserbaum links bleibt unveraendert – die Leiste ersetzt ihn nicht, sondern ergaenzt ihn
   um die zeitliche Abfolge der Konstruktionsschritte. */
.tl-bar{position:absolute;left:0;right:0;bottom:0;z-index:13;display:flex;align-items:center;gap:8px;
  height:50px;padding:0 10px;background:var(--panel-bg);border-top:1px solid var(--border-strong)}
.tl-bar[data-folded="1"]{height:22px;padding:0 10px}
.tl-bar[data-folded="1"] .tl-track,
.tl-bar[data-folded="1"] .tl-ctrls,
.tl-bar[data-folded="1"] .tl-msg{display:none}
.tl-fold{width:22px;height:22px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border-strong);border-radius:6px;background:var(--surface-2);color:var(--text-secondary);cursor:pointer}
.tl-fold:hover{color:var(--text-primary);border-color:var(--accent)}
.tl-fold:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tl-bar[data-folded="1"] .tl-fold svg{transform:rotate(180deg)}
.tl-ctrls{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.tl-btn{min-width:26px;height:26px;padding:0 5px;border:1px solid var(--border-strong);border-radius:6px;
  background:var(--surface-2);color:var(--text-secondary);font-size:12px;line-height:1;cursor:pointer}
.tl-btn:hover{color:var(--text-primary);border-color:var(--accent);background:var(--surface-hover)}
.tl-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tl-btn[aria-pressed="true"]{border-color:var(--accent);color:var(--text-primary);background:var(--surface-active)}
.tl-speed{height:26px;font-size:11px;padding:0 4px}
/* Die Spur selbst: waagerecht scrollbar, damit lange Historien vollstaendig erreichbar bleiben. */
.tl-track{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:6px;overflow-x:auto;overflow-y:hidden;
  height:38px;padding:2px 4px;scrollbar-width:thin;position:relative}
/* V18D.2-2: Kompakter Eintrag – nur das Symbol. Die Breite haengt damit nicht mehr am Namen;
   in dieselbe Leiste passen ein Vielfaches an Schritten. `max-width` bleibt als Deckel stehen,
   falls ein Eintrag doch einmal Text traegt. */
.tl-step{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:3px;height:28px;padding:0 7px;
  border:1px solid var(--border-strong);border-radius:7px;background:var(--surface-1);
  color:var(--text-secondary);font-size:11.5px;white-space:nowrap;cursor:pointer;max-width:132px}
.tl-step:hover{background:var(--surface-hover);color:var(--text-primary)}
.tl-step:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tl-step .tl-ic{width:15px;height:15px;flex:0 0 auto;opacity:.9}
.tl-step .tl-lbl{overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Aktiver Schritt: dezent – Akzentrahmen und ein leicht abgesetzter Grund, kein Farbblock. */
.tl-step[aria-current="true"]{border-color:var(--accent);background:var(--surface-active);color:var(--text-primary)}
/* Unterdrueckt: gedimmt und durchgestrichen. Ohne Text traegt die Durchstreichung ein
   Querstrich ueber dem Symbol – sonst waere der Zustand rein optisch nicht mehr ablesbar. */
.tl-step[data-state="suppressed"]{color:var(--text-muted);text-decoration:line-through;position:relative}
.tl-step[data-state="suppressed"]::after{content:"";position:absolute;left:4px;right:4px;top:50%;
  height:1px;background:currentColor;opacity:.9;pointer-events:none}
.tl-step[data-state="error"]{border-color:var(--danger);color:var(--danger)}
.tl-step[data-state="beyond"]{color:var(--text-muted);border-color:var(--border);opacity:.75}
/* V18D.3-2: Steht eine Loeschung zur Bestaetigung an, sind ALLE betroffenen Schritte rot –
   der angeklickte wie die, die nur wegen ihrer Abhaengigkeit mitgehen. Die Markierung gewinnt
   ueber jeden anderen Zustand, denn sie beschreibt, was gleich verschwindet. */
.tl-step[data-del="1"],.tl-step[data-del="1"]:hover{border-color:var(--danger);color:var(--danger);
  background:rgba(255,110,118,.16)}
.tl-step .tl-err{color:var(--danger);font-weight:700}
/* Endmarke: sie bestimmt die aktive Auswertungsgrenze. */
/* V18D.3-1: Textlink im Kombinieren-Feld zu den erweiterten Angaben eines Schritts. */
.bool-more{border:0;background:none;padding:0;font:inherit;color:var(--accent-hover);
  text-decoration:underline;cursor:pointer}
.bool-more:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* V18D.11: Die Endmarke liegt AUSSERHALB des Flusses. Im Fluss verschob sie beim Ruecksprung
   alle Schritte hinter ihr um ihre Breite samt Abstand – und das mitten in einem Doppelklick:
   der erste Klick setzte die Grenze, die Marke wanderte, der zweite Klick landete auf einem
   ANDEREN Schritt. Ihre Stelle in der Kindfolge behaelt sie (dort steht, wohin sie gehoert),
   ihr Platz kommt jetzt aus `left`. */
.tl-end{position:absolute;top:50%;transform:translateY(-50%);width:3px;height:26px;border-radius:2px;
  background:var(--accent);box-shadow:0 0 0 1px rgba(0,0,0,.45);pointer-events:none}
.tl-msg{flex:0 0 auto;font-size:11px;color:var(--text-muted);max-width:220px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- V18D.1-B1/B6: Bearbeitungsfeld EINES Schritts ----------
   Der Browserbaum links zeigt keine chronologische Historie mehr (das war eine zweite,
   konkurrierende Darstellung derselben Sache). Bearbeitet wird ueber die Zeitleiste: ein
   Doppelklick auf einen Schritt oeffnet dieses Feld unmittelbar darueber. */
.feat-edit{position:absolute;left:0;right:0;bottom:50px;z-index:14;max-height:46%;
  display:flex;flex-direction:column;background:var(--panel-bg);border-top:1px solid var(--border-strong)}
.feat-edit[hidden]{display:none}
.fe-head{flex:0 0 auto;display:flex;align-items:center;gap:8px;height:30px;padding:0 10px;
  border-bottom:1px solid var(--border)}
.fe-title{flex:1 1 auto;min-width:0;font-size:12px;color:var(--text-primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fe-x{width:22px;height:22px;flex:0 0 auto;border:1px solid var(--border-strong);border-radius:6px;
  background:var(--surface-2);color:var(--text-secondary);font-size:12px;line-height:1;cursor:pointer}
.fe-x:hover{color:var(--text-primary);border-color:var(--accent)}
.fe-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fe-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px 6px}
.fe-msg{padding:6px 10px;font-size:11.5px;color:var(--text-muted)}
.fe-msg.bad{color:var(--danger)}

/* ---------- V19: Drehen-Dialog ----------
   Die beiden Auswahlzeilen (Profil, Achse) zeigen ihren Inhalt, tragen ein × zum Entfernen und
   markieren, WELCHE Auswahl gerade aktiv ist. Ein Klick auf die Zeile schaltet sie wieder aktiv. */
.ep-sel-row{cursor:pointer;border:1px solid transparent;border-radius:8px;padding:4px 6px;margin:0 -6px 6px}
.ep-sel-row.ep-aktiv{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.ep-pickv{flex:1;text-align:right;font-size:11.5px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ep-x{margin-left:6px;width:18px;height:18px;line-height:1;border:0;border-radius:4px;background:transparent;
  color:var(--text-muted);cursor:pointer;font-size:14px}
.ep-x:hover{background:var(--surface-2);color:var(--text-primary)}
.ep-t{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-primary);padding:2px 0}