:root{
  --fl-yellow:#FFCB05;
  --fl-orange:#F7901E;
  --fl-red:#F0552A;
  --bg:#0f1318;
  --panel:#171c23;
  --panel2:#1e252e;
  --line:#2a323d;
  --txt:#e8edf2;
  --muted:#8b97a5;
  --danger:#e0533b;
  --ok:#3fbf6f;
  --viewer-bg:#0a0d11;
}
/* V21.13: Hellmodus — Light-Theme über data-theme="light" */
:root[data-theme="light"]{
  --bg:#f6f7f9;
  --panel:#ffffff;
  --panel2:#f0f2f5;
  --line:#d4d8de;
  --txt:#1a1f26;
  --muted:#5b6877;
  --danger:#c63d27;
  --ok:#2e9d57;
  --viewer-bg:#e9ecef;
}
/* 3D-Viewer-Hintergrund-Palette (ändert NUR den Viewer, nicht die UI) */
#viewerBg{display:flex;align-items:center;gap:5px;padding:0 4px}
#viewerBg .bglbl{font-size:11px;color:var(--muted);margin-right:4px;
  text-transform:uppercase;letter-spacing:.5px}
.bgsw{width:22px;height:22px;border-radius:5px;cursor:pointer;
  border:1px solid var(--line);padding:0;transition:.12s}
.bgsw:hover{transform:scale(1.12)}
.bgsw.active{outline:2px solid var(--fl-yellow);outline-offset:1px;
  border-color:var(--fl-yellow)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font:14px/1.45 "Segoe UI",system-ui,sans-serif;
  background:var(--bg);color:var(--txt);overflow:hidden;
}
a{color:var(--fl-yellow);text-decoration:none}

/* ---- top bar ---- */
#topbar{
  min-height:64px;display:flex;align-items:center;gap:22px;padding:6px 20px;
  background:linear-gradient(90deg,#0c0f13 0%,#171c23 100%);
  border-bottom:2px solid var(--fl-yellow);
  flex-wrap:wrap;                /* V21.16d: bei sehr engen Screens wraps Brand/Title trotzdem */
}
#brand img{height:34px;display:block}
#title{font-size:18px;font-weight:600;letter-spacing:.5px;color:var(--txt);
  display:flex;align-items:baseline;gap:8px}
#title::before{content:"";display:inline-block;width:1px;height:22px;
  background:var(--line);margin-right:14px;vertical-align:middle}
/* V21.16f / V1.1: Versions-Tag klein neben dem Titel. Statisch — wird
   beim Boot aus APP_VERSION_DISPLAY in app.js befüllt. */
.app-version-tag{font-size:11px;font-weight:400;color:var(--muted);
  letter-spacing:.3px;font-family:"Consolas","JetBrains Mono",monospace;
  padding:1px 5px;border:1px solid var(--line);border-radius:3px;
  background:var(--panel2)}
/* V21.16d: Header-Actions wrappen bei zu wenig Platz in eine 2./3. Zeile.
   row-gap kümmert sich um vertikalen Abstand zwischen den Zeilen. */
#topactions{margin-left:auto;display:flex;gap:8px;align-items:center;
  flex-wrap:wrap;row-gap:6px;justify-content:flex-end}
/* Icon-Buttons im Header — kompakter als der Default .btn */
#topactions .btn{padding:6px 9px;font-size:14px;line-height:1.1}
/* Falls ein Button per data-i18n nur 1-3 Zeichen lang ist (Emoji-Icons),
   geben wir ihm trotzdem eine sinnvolle Mindestbreite damit Hover-Boxen
   sauber wirken */
#topactions .btn > span:only-child{min-width:14px;text-align:center}
/* V19: Sprach-Selektor ganz rechts */
.lang-select{
  background:var(--panel2);color:var(--txt);border:1px solid var(--line);
  padding:7px 8px;border-radius:7px;font-size:12px;font-weight:600;
  letter-spacing:.5px;cursor:pointer;outline:none;
  margin-left:6px;
}
.lang-select:hover,.lang-select:focus{border-color:var(--fl-yellow)}

/* ---- buttons ---- */
.btn{
  background:var(--panel2);color:var(--txt);border:1px solid var(--line);
  padding:8px 14px;border-radius:7px;cursor:pointer;font-size:13px;
  display:inline-flex;align-items:center;gap:6px;transition:.15s;
}
.btn:hover:not(:disabled){border-color:var(--fl-yellow)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{background:var(--fl-yellow);color:#1a1300;border-color:var(--fl-yellow);font-weight:600}
.btn.primary:hover:not(:disabled){background:var(--fl-orange);border-color:var(--fl-orange)}
.btn.danger{background:var(--danger);color:#fff;border-color:var(--danger);font-weight:600}
.btn.danger:hover:not(:disabled){filter:brightness(1.1)}

/* ---- layout ---- */
#layout{display:flex;height:calc(100% - 64px)}
/* V3.3: Project Tree als eigene, ein-/ausklappbare Spalte ganz links */
#treeDock{width:300px;min-width:220px;max-width:560px;height:100%;flex:none;
  display:flex;flex-direction:column;background:var(--panel);
  border-right:1px solid var(--line);overflow:hidden}
#treeDockHead{display:flex;align-items:center;gap:8px;padding:10px 12px;
  border-bottom:1px solid var(--line);font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:1px;color:var(--fl-yellow)}
#treeDockHead > span{flex:1}
#treeDockHead .pane-toggle{position:static}
#treeDockBody{flex:1;overflow-y:auto}
#treeDockBody .panel{border-bottom:none}
.dock-reopen{position:fixed;left:8px;top:72px;z-index:30;
  width:34px;height:34px;border-radius:8px;font-size:16px;line-height:1;
  background:var(--panel2);border:1px solid var(--line);color:var(--txt);
  cursor:pointer}
.dock-reopen:hover{border-color:var(--fl-yellow)}
#sidebar{
  width:360px;min-width:280px;max-width:800px;height:100%;overflow-y:auto;
  background:var(--panel);border-right:1px solid var(--line);
  flex:none;position:relative;
}
/* V19: drag-handle to resize the sidebar manually (mirror of #qualityResize) */
#sidebarResize{
  position:absolute;right:0;top:0;width:6px;height:100%;
  cursor:ew-resize;z-index:20;background:transparent;
}
#sidebarResize:hover,#sidebarResize.dragging{background:var(--fl-yellow);opacity:.5}
body.resizing-sidebar{cursor:ew-resize !important;user-select:none}
.panel{padding:16px 16px 18px;border-bottom:1px solid var(--line)}
.panel h2{font-size:13px;text-transform:uppercase;letter-spacing:1px;
  color:var(--fl-yellow);margin-bottom:12px;cursor:pointer;
  display:flex;align-items:center;gap:8px;user-select:none}
.panel h2::before{content:"▾";font-size:11px;color:var(--muted);
  transition:transform .15s;display:inline-block}
.panel.collapsed h2{margin-bottom:0}
.panel.collapsed h2::before{transform:rotate(-90deg)}
.panel.collapsed > *:not(h2){display:none}
.sub{font-size:11px;text-transform:uppercase;letter-spacing:.8px;
  color:var(--muted);margin:14px 0 6px}
.hint{font-size:11.5px;color:var(--muted);margin:6px 0}
.muted{color:var(--muted)}
.small{font-size:12px}

.inp{
  width:100%;background:var(--panel2);border:1px solid var(--line);
  color:var(--txt);padding:7px 9px;border-radius:6px;font-size:13px;margin:4px 0;
}
.inp:focus{outline:none;border-color:var(--fl-yellow)}
select.inp{cursor:pointer}
.row{display:flex;gap:8px;margin:8px 0}
.row .btn{flex:1;justify-content:center}
.row .inp{margin:0}

.checklist{
  max-height:170px;overflow-y:auto;border:1px solid var(--line);
  border-radius:6px;padding:6px;background:var(--panel2);font-size:13px;
}
.checklist.tall{max-height:230px}
.checklist label{display:flex;align-items:center;gap:7px;padding:3px 4px;
  border-radius:4px;cursor:pointer}
.checklist label:hover{background:#252d38}
.checklist .cnt{margin-left:auto;color:var(--muted);font-size:11.5px}
.chk{display:flex;align-items:center;gap:7px;margin:5px 0;cursor:pointer;font-size:13px}
.fld{display:flex;flex-direction:column;gap:2px;font-size:11.5px;
  color:var(--muted);margin:6px 0}
.fld .inp{margin-top:2px}

/* ---- spatial tree ---- */
.tree{font-size:13px;max-height:240px;overflow:auto;
  border:1px solid var(--line);border-radius:6px;padding:6px;background:var(--panel2)}
/* V3.3.1: Project Tree manuell nach unten vergrößerbar (Drag am unteren Rand).
   height/resize überschreiben das max-height:240px der .tree-Basisklasse. */
#spatialTree{height:340px;min-height:140px;max-height:80vh;resize:vertical;overflow:auto}
.tnode{padding:3px 4px;border-radius:4px;cursor:pointer;white-space:nowrap}
.tnode:hover{background:#252d38}
.tnode.sel{background:rgba(255,203,5,.16);outline:1px solid var(--fl-yellow)}
.tnode .tag{color:var(--fl-orange);font-size:11px;margin-right:6px}
.tnode .cc{color:var(--muted);font-size:11px;margin-left:6px}
.editor{margin:10px 0;padding:10px;background:var(--panel2);
  border:1px solid var(--line);border-radius:6px}
.editor.hidden,.hidden{display:none}

/* ---- V19: quality panel right of the viewer ---- */
#qualityPanel{
  width:460px;min-width:320px;max-width:1200px;
  height:100%;overflow-y:auto;flex:none;
  background:var(--panel);border-left:1px solid var(--line);
  display:flex;flex-direction:column;position:relative;
}
/* drag-handle to resize the panel manually */
#qualityResize{
  position:absolute;left:0;top:0;width:6px;height:100%;
  cursor:ew-resize;z-index:20;background:transparent;
}
#qualityResize:hover,#qualityResize.dragging{background:var(--fl-yellow);opacity:.5}
body.resizing-quality{cursor:ew-resize !important;user-select:none}

/* ---- V21.4: 3D-Viewer Quick-Navigation oben rechts im Viewer ---- */
#viewerWrap{position:relative}
.viewer-nav{
  position:absolute;top:12px;right:12px;z-index:30;
  display:flex;flex-direction:column;gap:4px;
}
.vn-btn{
  width:36px;height:36px;border-radius:6px;
  background:rgba(15,19,24,.85);color:var(--txt);
  border:1px solid var(--line);cursor:pointer;
  font-size:16px;line-height:1;padding:0;
  display:flex;align-items:center;justify-content:center;
  transition:.12s;
}
.vn-btn:hover:not(:disabled){
  border-color:var(--fl-yellow);
  color:var(--fl-yellow);
}
.vn-btn:disabled{opacity:.35;cursor:not-allowed}
.vn-btn.active{border-color:var(--fl-yellow);color:var(--fl-yellow);
  background:rgba(255,203,5,.14)}

/* V21.14a/b: ViewCube layout — 70px (V21.14b halbiert) */
.viewer-nav-cube{align-items:flex-end}
#viewCube{width:70px;height:70px;display:block;background:transparent;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.55));cursor:pointer}
.viewer-nav-cube .vn-row{display:flex;gap:3px;margin-top:4px}
.viewer-nav-cube .vn-btn{width:26px;height:26px;font-size:13px}
.viewer-nav-cube [hidden]{display:none !important}

/* V21.14d: Heatmap-Legende — kompakt, unter den Buttons */
.heatmap-legend{margin-top:6px;background:rgba(15,19,24,.92);
  border:1px solid var(--line);border-radius:6px;padding:6px 8px;
  font-size:11px;color:var(--txt);min-width:130px}
.heatmap-legend.hidden{display:none}
.heatmap-legend .hm-row{display:flex;align-items:center;gap:6px;
  padding:2px 0;line-height:1.3}
.heatmap-legend .hm-sw{display:inline-block;width:12px;height:12px;
  border-radius:3px;flex:0 0 12px;border:1px solid rgba(0,0,0,.4)}
.heatmap-legend .hm-stats{margin-top:4px;padding-top:4px;
  border-top:1px solid var(--line);font-size:10.5px}
.vn-btn.active{background:rgba(255,203,5,.18)}

/* V21.14d: Mini-Map */
.minimap-wrap{position:relative;width:120px;height:120px;margin-top:6px;
  border:1px solid var(--line);border-radius:6px;overflow:hidden;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.55))}
#miniMap{display:block;width:120px;height:120px;background:transparent}
.minimap-arrow{position:absolute;left:50%;top:50%;width:14px;height:14px;
  background:transparent;pointer-events:none;
  /* Pfeil via SVG-Hintergrund (gelb mit Schatten) */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><polygon points='10,1 17,18 10,14 3,18' fill='%23FFCB05' stroke='black' stroke-width='1' stroke-opacity='.6'/></svg>");
  background-repeat:no-repeat;background-position:center;background-size:contain;
  transform-origin:center;transition:transform .12s linear}
:root[data-theme="light"] .heatmap-legend{background:#ffffffd9;color:var(--txt)}
:root[data-theme="light"] .minimap-wrap{border-color:#d4d8de}

/* ---- V21.7: Identifier-Diagnose Modal ---- */
.idc-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9994;
}
.idc-backdrop.hidden{display:none}
.idc-modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:9995;width:480px;max-width:calc(100vw - 24px);
  max-height:80vh;overflow-y:auto;
  background:#0f1318;color:var(--txt);
  border:1.5px solid var(--fl-yellow);border-radius:10px;
  box-shadow:0 12px 40px rgba(0,0,0,.7);
  font:13px/1.5 "Segoe UI",sans-serif;
}
.idc-modal.hidden{display:none}
.idc-head{display:flex;align-items:center;gap:8px;padding:12px 14px;
  border-bottom:1px solid var(--line);cursor:grab}  /* V3.2.1: Popup verschiebbar */
.idc-title{flex:1;font-weight:700;color:var(--fl-yellow);font-size:14px}
.idc-close{width:24px;height:24px;border:none;background:transparent;
  color:var(--muted);cursor:pointer;font-size:20px;line-height:1;border-radius:4px}
.idc-close:hover{background:#2a323d;color:var(--fl-yellow)}
.idc-body{padding:12px 14px}
.idc-section{margin-bottom:16px}
.idc-h{color:var(--fl-orange);font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.idc-row{display:flex;gap:8px;padding:3px 0;border-bottom:1px solid #1a212a}
.idc-row .k{flex:0 0 50%;color:var(--muted)}
.idc-row .v{flex:1}
.idc-badge{display:inline-block;padding:1px 7px;border-radius:4px;font-weight:600;font-size:11px}
.idc-badge.good{background:rgba(63,191,111,.18);color:var(--ok)}
.idc-badge.warn{background:rgba(247,144,30,.18);color:var(--fl-orange)}
.idc-badge.bad{background:rgba(224,83,59,.18);color:var(--danger)}

/* ---- V21.5: Element-Eigenschaften-Karte (Rechtsklick im Viewer) ---- */
.prop-card{
  position:fixed;z-index:9990;
  width:340px;max-width:calc(100vw - 24px);
  max-height:70vh;overflow-y:auto;
  background:#0f1318;color:var(--txt);
  border:1.5px solid var(--fl-yellow);border-radius:8px;
  box-shadow:0 8px 32px rgba(0,0,0,.6);
  font:12px/1.45 "Segoe UI",sans-serif;
}
.prop-card.hidden{display:none}
.prop-card .pc-head{
  display:flex;align-items:center;gap:8px;
  padding:9px 10px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:#0f1318;
  cursor:move;user-select:none;            /* V21.11: Drag-Handle */
}
.prop-card.dragging{user-select:none;box-shadow:0 12px 40px rgba(0,0,0,.75)}
.prop-card.dragging .pc-body{pointer-events:none}  /* sauberes Ziehen */
.prop-card .pc-title{flex:1;font-weight:700;color:var(--fl-yellow);font-size:12.5px;
  pointer-events:none}                     /* Text nicht markieren beim Ziehen */
.prop-card .pc-close{
  width:22px;height:22px;border:none;background:transparent;
  color:var(--muted);cursor:pointer;font-size:18px;line-height:1;border-radius:4px;
}
.prop-card .pc-close:hover{background:#2a323d;color:var(--fl-yellow)}
.prop-card .pc-body{padding:8px 10px}
/* V21.8: klappbare Gruppen — Header klickbar, Body default eingeklappt */
.prop-card .pc-grp{margin:4px 0;border:1px solid var(--line);border-radius:5px;
  overflow:hidden}
.prop-card .pc-grp-h{display:flex;align-items:center;gap:6px;
  color:var(--fl-orange);font-weight:600;font-size:11px;
  text-transform:uppercase;letter-spacing:.5px;
  padding:6px 8px;cursor:pointer;user-select:none;background:#141a21}
/* V21.13d: × in Gruppen-Header zum Entfernen eines PSets von DIESEM Element */
.prop-card .pc-grp-del{background:none;border:none;color:var(--muted);
  cursor:pointer;font-size:14px;line-height:1;padding:0 4px;border-radius:3px;
  margin-left:2px;opacity:0;transition:opacity .15s,color .15s,background .15s}
.prop-card .pc-grp-h:hover .pc-grp-del{opacity:1}
.prop-card .pc-grp-del:hover{color:#fff;background:var(--danger)}
/* V21.13d: kurzes Flash auf eine PSet-Gruppe (z.B. wenn frisch hinzugefügt) */
.prop-card .pc-grp.pc-grp-flash{animation:pcGrpFlash 2s ease-out}
@keyframes pcGrpFlash{
  0%{box-shadow:inset 0 0 0 2px var(--fl-yellow)}
  100%{box-shadow:inset 0 0 0 0 transparent}
}
/* V21.13d: Add-PSet-Sub-Form innerhalb der Karte */
.prop-card .pc-add-pset{border-top:1px solid var(--line);padding:8px 10px;
  background:#0b0f14}
.prop-card .pc-add-pset.hidden{display:none}
.prop-card .pc-add-pset .pc-add-h{display:flex;justify-content:space-between;
  align-items:center;font-size:11px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--fl-yellow);font-weight:600;margin-bottom:6px}
.prop-card .pc-add-pset .pc-add-x{background:none;border:none;color:var(--muted);
  cursor:pointer;font-size:15px;padding:0 4px;border-radius:3px}
.prop-card .pc-add-pset .pc-add-x:hover{color:var(--fl-yellow);background:#1c2530}
.prop-card .pc-add-pset .fld{margin:3px 0;font-size:11.5px}
.prop-card .pc-add-pset .fld span{font-size:11px}
.prop-card .pc-add-pset .inp{font-size:12px;padding:3px 6px}
.prop-card .pc-add-pset .sub{margin-top:6px;font-size:10.5px;color:var(--fl-orange)}
.prop-card .pc-add-pset .btn{font-size:11.5px;padding:5px 8px;margin-top:6px}
.prop-card .pc-add-pset .btn.primary{margin-top:8px;width:100%}
/* Light-Theme */
:root[data-theme="light"] .prop-card .pc-add-pset{background:#f0f2f5}
:root[data-theme="light"] .prop-card .pc-grp-h{background:#f0f2f5;color:#7a6010}

/* V21.13e: PropCard ⋮-Mehr-Dropdown + Toggle-Button-Color */
.prop-card .pc-actions{flex-wrap:wrap;gap:4px 6px}
.prop-card .pc-actions .btn{flex:0 1 auto;min-width:0;padding:5px 7px;font-size:11px}
.prop-card #pcAddSel.danger{background:#481010;color:var(--danger);
  border-color:var(--danger)}
.prop-card .pc-more-wrap{position:relative;display:inline-block}
.prop-card #pcMoreBtn{font-size:14px;padding:3px 8px;line-height:1}
.prop-card .pc-more-menu{position:absolute;bottom:calc(100% + 4px);right:0;
  z-index:9999;min-width:200px;background:#0f1318;
  border:1.5px solid var(--fl-yellow);border-radius:6px;
  box-shadow:0 6px 22px rgba(0,0,0,.65);padding:4px;display:flex;flex-direction:column}
.prop-card .pc-more-menu.hidden{display:none}
.prop-card .pc-menu-item{background:none;border:none;color:var(--txt);
  text-align:left;cursor:pointer;padding:7px 12px;border-radius:3px;
  font:inherit;font-size:12px;line-height:1.3}
.prop-card .pc-menu-item:hover{background:#1c2530;color:var(--fl-yellow)}
.prop-card .pc-menu-item.danger{color:var(--danger)}
.prop-card .pc-menu-item.danger:hover{background:var(--danger);color:#fff}
.prop-card .pc-menu-sep{height:1px;background:var(--line);margin:4px 0}
:root[data-theme="light"] .prop-card .pc-more-menu{background:#ffffff}
:root[data-theme="light"] .prop-card .pc-menu-item:hover{background:#f0f2f5}

/* ===========================================================================
 * V21.14a: Hotkey-Legende
 * =========================================================================== */
#legendToggle.legend-toggle{font-size:13px;padding:6px 10px;line-height:1}
#legendToggle.active{background:var(--fl-yellow);color:#1a1300;
  border-color:var(--fl-yellow)}
/* V21.14c: Floating-Panel — kein fester left/bottom-Wert mehr.
   Initial-Position wird von JS unter dem Header-Button gesetzt,
   danach per Drag verschiebbar, Position bleibt in localStorage. */
.hotkey-legend{position:fixed;z-index:200;
  width:320px;max-height:60vh;overflow:auto;
  background:var(--panel);color:var(--txt);
  border:1.5px solid var(--fl-yellow);border-radius:8px;
  box-shadow:0 6px 24px rgba(0,0,0,.55)}
.hotkey-legend.hidden{display:none}
.hotkey-legend.dragging{box-shadow:0 12px 36px rgba(0,0,0,.7);
  user-select:none}
.hotkey-legend .hkl-head{display:flex;justify-content:space-between;
  align-items:center;padding:8px 12px;
  border-bottom:1px solid var(--line);background:var(--panel2);
  font-weight:600;color:var(--fl-yellow);text-transform:uppercase;
  letter-spacing:.5px;font-size:12px;cursor:move;user-select:none}
.hotkey-legend.dragging .hkl-head{cursor:grabbing}
.hotkey-legend .hkl-head span{pointer-events:none}
.hotkey-legend .hkl-close{background:none;border:none;color:var(--muted);
  cursor:pointer;font-size:17px;padding:0 6px;border-radius:3px}
.hotkey-legend .hkl-close:hover{color:var(--fl-yellow);background:#1c2530}
.hotkey-legend .hkl-body{padding:6px 8px}
.hotkey-legend .hkl-row{display:flex;gap:10px;padding:5px 4px;
  align-items:flex-start;border-bottom:1px solid #1a212a;font-size:11.5px}
.hotkey-legend .hkl-row:last-child{border-bottom:none}
.hotkey-legend .hkl-keys{flex:0 0 110px;display:flex;gap:4px;flex-wrap:wrap}
.hotkey-legend kbd{background:#1c2530;color:var(--fl-yellow);
  border:1px solid var(--line);border-radius:3px;padding:1px 6px;
  font:11px/1.2 "JetBrains Mono","Consolas","Courier New",monospace;
  min-width:18px;text-align:center;white-space:nowrap}
.hotkey-legend .hkl-desc{flex:1;color:var(--txt);line-height:1.35}
:root[data-theme="light"] .hotkey-legend{background:#ffffff}
:root[data-theme="light"] .hotkey-legend kbd{background:#f0f2f5;color:#7a6010}
.prop-card .pc-grp-h:hover{background:#1a212a}
.prop-card .pc-grp-h::before{content:"▾";font-size:10px;color:var(--muted);
  transition:transform .15s;display:inline-block;transform:rotate(-90deg)}
.prop-card .pc-grp.open .pc-grp-h::before{transform:rotate(0)}
.prop-card .pc-grp-t{flex:1;word-break:break-word}
.prop-card .pc-grp-n{flex:0 0 auto;color:var(--muted);font-weight:400;
  background:#0f1318;border:1px solid var(--line);border-radius:10px;
  padding:0 7px;font-size:10px}
.prop-card .pc-grp-body{display:none;padding:4px 8px 6px}
.prop-card .pc-grp.open .pc-grp-body{display:block}
.prop-card .pc-row{display:flex;gap:8px;padding:2px 0;border-bottom:1px solid #1a212a}
.prop-card .pc-k{flex:0 0 45%;color:var(--muted);word-break:break-word}
.prop-card .pc-v{flex:1;word-break:break-word;min-height:18px}
/* V21.13b: editierbare Werte mit Hover-Hinweis */
.prop-card .pc-v.editable{cursor:text;border-radius:3px;
  padding:0 4px;transition:background .15s}
.prop-card .pc-v.editable:hover{background:#1c2530;outline:1px dashed #4b5563}
.prop-card .pc-v.editable::after{content:"✎";color:#4b5563;
  font-size:10px;margin-left:6px;opacity:0;transition:opacity .15s}
.prop-card .pc-v.editable:hover::after{opacity:1}
.prop-card .pc-v.saving{background:#3a3210;color:var(--fl-yellow)}
.prop-card .pc-v.saved{background:#103a1f;color:var(--ok);
  animation:pcSaveFlash 1.2s ease-out}
@keyframes pcSaveFlash{
  0%{background:#1a7a3a}
  100%{background:transparent}
}
.prop-card .pc-edit-inp{width:100%;background:#0b0f14;color:var(--txt);
  border:1px solid var(--fl-yellow);border-radius:3px;padding:2px 5px;
  font:inherit;outline:none}
:root[data-theme="light"] .prop-card .pc-v.editable:hover{background:#f0f2f5}
:root[data-theme="light"] .prop-card .pc-edit-inp{background:#ffffff;
  border-color:var(--fl-orange)}
.prop-card .pc-actions{
  display:flex;gap:6px;padding:8px 10px;border-top:1px solid var(--line);
  position:sticky;bottom:0;background:#0f1318;
}
.prop-card .pc-actions .btn{flex:1;justify-content:center;font-size:11.5px;padding:6px 8px}

/* ---- V21.4: Box-Select Overlay-Rechteck (CTRL+Drag) ---- */
.box-select-rect{
  position:absolute;
  border:1.5px dashed var(--fl-yellow);
  background:rgba(255,203,5,.10);
  pointer-events:none;
  z-index:25;
}
.box-select-rect.hidden{display:none}

/* ---- V21.2: Coord-Warn-Banner in der Modell-Info-Card ---- */
.coord-banner{
  display:flex;align-items:center;gap:8px;
  margin-top:10px;padding:8px 10px;
  border:1.5px solid var(--fl-orange);
  border-radius:6px;
  background:rgba(247,144,30,.10);
  color:var(--fl-orange);
  font-size:12px;font-weight:600;
}
.coord-banner.hidden{display:none}
.coord-banner .cb-icon{font-size:14px;flex:0 0 auto}
.coord-banner .cb-msg{flex:1;line-height:1.35}

/* ---- V19: collapse/expand toggle for both side panes ---- */
.pane-toggle{
  position:absolute;top:14px;
  width:18px;height:18px;
  background:var(--panel2);border:1px solid var(--line);
  color:var(--fl-yellow);border-radius:4px;cursor:pointer;
  font-size:11px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  z-index:22;padding:0;user-select:none;
}
.pane-toggle:hover{border-color:var(--fl-yellow)}
#sidebar .pane-toggle{right:10px}
#qualityPanel .pane-toggle{left:10px}
/* Collapsed pane: shrink to 36px strip + show a bold yellow-bordered toggle */
#sidebar.pane-collapsed,#qualityPanel.pane-collapsed{
  width:36px !important;min-width:36px !important;max-width:36px !important;
  overflow:hidden;
}
#sidebar.pane-collapsed > *:not(.pane-toggle),
#qualityPanel.pane-collapsed > *:not(.pane-toggle){display:none !important}
.pane-collapsed .pane-toggle{
  top:50% !important;left:50% !important;right:auto !important;
  transform:translate(-50%,-50%);
  width:26px;height:80px;font-size:16px;
  border:2.5px solid var(--fl-yellow);border-radius:8px;
  box-shadow:0 0 8px rgba(255,203,5,.3);
  background:var(--panel);
}
/* hide the resize-grabber while collapsed (drag would be meaningless) */
#sidebar.pane-collapsed #sidebarResize,
#qualityPanel.pane-collapsed #qualityResize{display:none}

.qsection{padding:14px 16px;border-bottom:1px solid var(--line)}
.qsection h3{font-size:11px;text-transform:uppercase;letter-spacing:.8px;
  color:var(--fl-yellow);margin-bottom:10px;display:flex;align-items:baseline;
  gap:8px;cursor:pointer;user-select:none}
.qsection h3::before{content:"\25BE";font-size:9px;color:var(--muted);
  margin-right:2px;transition:transform .15s;display:inline-block}
.qsection.collapsed h3{margin-bottom:0}
.qsection.collapsed h3::before{transform:rotate(-90deg)}
.qsection.collapsed > *:not(h3){display:none}
.qsection h3 .muted{text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted)}

/* Info-Icon — Click-Popup statt Hover-Tooltip (V21).
   Der alte Hover-Tooltip wurde von der Sidebar-Overflow abgeschnitten;
   jetzt steht der Tooltip als position:fixed Popup über allen Panels
   und wird per JS gefüllt + positioniert (siehe setupInfoPopup in app.js). */
.info{
  display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;border-radius:50%;
  background:#2a323d;color:var(--muted);
  font:700 10px/1 "Segoe UI",sans-serif;text-transform:none;letter-spacing:0;
  cursor:pointer;position:relative;flex:0 0 auto;
  user-select:none;
}
.info:hover,.info.active{background:var(--fl-yellow);color:#1a1300}
h2 .info, h3 .info{margin-left:6px;vertical-align:middle}

/* Das globale Popup — ein einzelnes Element für alle Tooltips, von JS
   verschoben + befüllt. Sitzt über allen Sidebar-Panels via position:fixed,
   so dass es nie von overflow:hidden beschnitten wird. */
#infoPopup{
  position:fixed;top:0;left:0;
  width:360px;max-width:calc(100vw - 32px);
  background:#0f1318;color:var(--txt);
  border:1.5px solid var(--fl-yellow);border-radius:8px;
  padding:14px 16px 12px;
  font:400 12.5px/1.5 "Segoe UI",sans-serif;letter-spacing:0;
  box-shadow:0 8px 32px rgba(0,0,0,.6);
  z-index:9999;
  visibility:hidden;opacity:0;
  transition:opacity .12s ease;
}
#infoPopup.show{visibility:visible;opacity:1}
#infoPopup .ip-close{
  position:absolute;top:4px;right:6px;
  width:22px;height:22px;border-radius:4px;
  background:transparent;border:none;color:var(--muted);
  cursor:pointer;font-size:18px;line-height:1;padding:0;
}
#infoPopup .ip-close:hover{background:#2a323d;color:var(--fl-yellow)}
#infoPopup .ip-body{padding-right:16px}
/* Klickbarer Backdrop für „Klick außerhalb schließt". Sitzt unter dem
   Popup aber über dem Viewer — nur visuell unsichtbar, fängt Klicks. */
#infoBackdrop{
  position:fixed;inset:0;background:transparent;
  z-index:9998;display:none;
}
#infoBackdrop.show{display:block}

/* Empty-Bar Wert-Override Eingabefeld inline im h3 */
.fillval-input{
  margin-left:auto;background:var(--panel2);color:var(--txt);
  border:1px solid var(--line);border-radius:5px;
  padding:3px 7px;font-size:11px;width:120px;
  font-family:inherit;text-transform:none;letter-spacing:0;
}
.fillval-input:focus{outline:none;border-color:var(--fl-yellow)}
.score-hero{display:flex;align-items:center;gap:14px;padding:18px 16px;
  background:linear-gradient(180deg,#1c232c 0%,var(--panel) 100%)}
.score-value{font-size:42px;font-weight:700;line-height:1;color:var(--fl-yellow)}
.score-value.b{color:var(--fl-yellow)}
.score-value.c{color:var(--fl-orange)}
.score-value.d,.score-value.f{color:var(--danger)}
.score-grade{font-size:18px;font-weight:600;color:var(--muted);margin-top:2px}
.score-meta{font-size:11.5px;color:var(--muted);line-height:1.4}
.chart-box{width:100%;height:240px}
.chart-box.tall{height:300px}
.audit{font-size:12px;max-height:220px;overflow-y:auto;
  border:1px solid var(--line);border-radius:6px;background:var(--panel2)}
.audit-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px;
  padding:5px 8px;border-bottom:1px dotted var(--line);align-items:center}
.audit-row:last-child{border-bottom:none}
.audit-row:hover{background:#252d38;cursor:pointer}
.audit-row .miss{color:var(--fl-orange);font-weight:600;text-align:right}
.delta-up{color:var(--ok)}
.delta-down{color:var(--danger)}
.delta-eq{color:var(--muted)}

/* ---- viewer ---- */
#viewerWrap{flex:1;position:relative;background:var(--viewer-bg)}
#viewer{position:absolute;inset:0}
#viewer canvas{display:block}
.overlay{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;background:var(--viewer-bg);z-index:5}
.overlay.hidden{display:none}
.drop{text-align:center;color:var(--muted);border:2px dashed var(--line);
  padding:50px 70px;border-radius:14px}
.drop.hover{border-color:var(--fl-yellow);color:var(--txt)}
.drop img{height:46px;opacity:.85;margin-bottom:18px}
.spinner{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;background:rgba(10,13,17,.82);
  z-index:8;color:var(--txt)}
.spinner.hidden{display:none}
.spinner div{width:42px;height:42px;border:4px solid var(--line);
  border-top-color:var(--fl-yellow);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- toast ---- */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(40px);
  background:var(--panel2);border:1px solid var(--line);border-left:4px solid var(--fl-yellow);
  color:var(--txt);padding:12px 18px;border-radius:8px;opacity:0;
  transition:.25s;pointer-events:none;z-index:30;max-width:560px;font-size:13px}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{border-left-color:var(--danger)}
.toast.ok{border-left-color:var(--ok)}

/* ---- V16: remapping / rename / transfer ---- */
.remap-badge{font-size:12px;color:var(--txt);background:var(--panel2);
  border:1px solid var(--line);border-left:3px solid var(--fl-yellow);
  border-radius:6px;padding:6px 9px;margin:6px 0}
.remap-badge b{color:var(--fl-yellow)}
.remap-badge.none{border-left-color:var(--muted)}
.remap-badge.none b{color:var(--muted)}
.namegrid{display:flex;flex-direction:column;gap:2px;margin:6px 0}
.rn-extra{margin:6px 0;padding:8px 10px;background:var(--panel2);
  border:1px solid var(--line);border-radius:6px}
.rn-extra.hidden{display:none}
.preview{font-size:12px;margin:8px 0;padding:7px 9px;border-radius:6px;
  background:var(--panel2);border:1px dashed var(--line)}
.preview b{color:var(--ok)}
.tr-row{display:flex;align-items:center;gap:6px;margin:6px 0;
  padding:7px;background:var(--panel2);border:1px solid var(--line);
  border-radius:6px;flex-wrap:wrap}
.tr-row select{flex:1;min-width:96px;background:var(--bg);
  border:1px solid var(--line);color:var(--txt);padding:5px 6px;
  border-radius:5px;font-size:12px}
.tr-row .arrow{color:var(--fl-orange);font-weight:700}
.tr-row .trDel{background:none;border:none;color:var(--muted);
  cursor:pointer;font-size:15px;padding:0 4px}
.tr-row .trDel:hover{color:var(--danger)}
optgroup{color:var(--fl-orange);font-style:normal}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#2d3744;border-radius:5px}
::-webkit-scrollbar-track{background:transparent}

/* ===========================================================================
 * V21.12 — UI Quick Wins
 * =========================================================================== */

/* Cmd+K Command-Palette ---------------------------------------------------- */
.cmdp{position:fixed;inset:0;z-index:10000;
  background:rgba(0,0,0,.55);display:flex;align-items:flex-start;
  justify-content:center;padding-top:14vh}
.cmdp.hidden{display:none}
.cmdp-card{width:540px;max-width:92vw;background:#0f1318;color:var(--txt);
  border:1.5px solid var(--fl-yellow);border-radius:10px;
  box-shadow:0 12px 40px rgba(0,0,0,.7);overflow:hidden}
.cmdp-input{width:100%;padding:14px 18px;background:transparent;border:none;
  outline:none;color:var(--txt);font:14px/1.4 "Segoe UI",sans-serif;
  border-bottom:1px solid var(--line)}
.cmdp-input::placeholder{color:var(--muted)}
.cmdp-list{max-height:50vh;overflow-y:auto;padding:6px 0}
.cmdp-row{padding:9px 18px;cursor:pointer;font-size:13px;color:var(--txt)}
.cmdp-row.active,.cmdp-row:hover{background:#1c2530;color:var(--fl-yellow)}
.cmdp-hint{padding:8px 18px;border-top:1px solid var(--line);
  background:#0b0f14;font-size:11px}

/* Mini-Statusbar ----------------------------------------------------------- */
.statusbar{position:fixed;bottom:6px;right:10px;z-index:50;
  background:#0f1318cc;backdrop-filter:blur(4px);
  color:var(--muted);border:1px solid var(--line);border-radius:6px;
  padding:5px 10px;font:11px/1.3 "Segoe UI",sans-serif;
  display:flex;gap:6px;align-items:center;pointer-events:none;
  max-width:calc(100vw - 20px);overflow:hidden}
.statusbar .sb-item{display:inline-flex;gap:4px;align-items:baseline;white-space:nowrap}
.statusbar .sb-k{color:var(--muted)}
.statusbar .sb-item b{color:var(--txt);font-weight:600}
.statusbar .sb-sep{color:#374151;font-weight:300}

/* Selection-Sets list ------------------------------------------------------ */
.selset-row{display:flex;gap:6px;align-items:center;padding:3px 0;
  border-bottom:1px solid #1a212a}
.selset-row:last-child{border-bottom:none}
.selset-lbl{flex:1;color:var(--txt);font-size:12px;word-break:break-word}
.selset-row .btn.small{padding:3px 7px;font-size:11px}

/* Recent FDK picks --------------------------------------------------------- */
.recent-row{display:flex;gap:6px;align-items:center;padding:3px 0;
  border-bottom:1px solid #1a212a}
.recent-row:last-child{border-bottom:none}
.recent-lbl{flex:1;color:var(--txt);font-size:11.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent-row .btn.small{padding:3px 7px;font-size:11px}

/* Generic small button modifier ------------------------------------------- */
.btn.small{padding:4px 8px;font-size:11.5px}
/* V21.13b: KEINE Override von .btn.danger hier — Original-Regel oben
   (background:var(--danger);color:#fff) bleibt gültig. Frühere V21.12-
   Override hat Text+Hintergrund auf Rot=Rot gesetzt → unsichtbar. */

/* Table-Import Modal stats grid ------------------------------------------- */
.ti-file{padding:4px 0 10px;font-weight:600;color:var(--fl-yellow)}
.ti-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;
  margin-bottom:8px}
.ti-stat{display:flex;justify-content:space-between;
  padding:6px 8px;background:#141a21;border:1px solid var(--line);
  border-radius:5px;font-size:12px}
.ti-stat .ti-k{color:var(--muted)}
.ti-stat b{color:var(--fl-yellow);font-weight:700}
.ti-match{margin-top:4px;font-size:11.5px}

/* Drag-&-Drop PSet rows --------------------------------------------------- */
.pa-row[draggable="true"]{cursor:grab}
.pa-row[draggable="true"]:active{cursor:grabbing}
.pa-row.dragging{opacity:.5;background:#1c2530}

/* Workspace-Preset Select stays compact ----------------------------------- */
#wsPreset{min-width:120px;max-width:170px}

/* ===========================================================================
 * V21.13 — Multi-Undo, Theme, Compare, FDK-Help
 * =========================================================================== */

/* Undo-Group im Header (Hauptbutton + Dropdown-Pfeil zusammen) */
.undo-grp{display:inline-flex;gap:0;border-radius:5px;overflow:hidden}
.undo-grp .btn{border-radius:0}
.undo-grp .btn:first-child{border-radius:5px 0 0 5px}
.undo-grp .undo-drop{border-radius:0 5px 5px 0;padding:6px 7px;
  border-left:1px solid var(--line)}

/* Undo-Timeline-Popover (Header-Dropdown) */
.undo-pop{position:fixed;top:48px;right:14px;z-index:9999;
  width:330px;max-width:92vw;max-height:60vh;overflow:auto;
  background:var(--panel);color:var(--txt);
  border:1.5px solid var(--fl-yellow);border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,.65)}
.undo-pop.hidden{display:none}
.undo-pop-head{display:flex;align-items:center;justify-content:space-between;
  padding:8px 10px;border-bottom:1px solid var(--line);
  background:var(--panel2);font-weight:600;color:var(--fl-yellow)}
.undo-pop-list{padding:4px}
.undo-row{display:flex;gap:8px;align-items:center;padding:6px 8px;
  border-radius:4px;cursor:pointer;font-size:12.5px}
.undo-row:hover{background:#1a212a}
.undo-row .undo-idx{flex:0 0 28px;color:var(--fl-orange);font-weight:600}
.undo-row .undo-lbl{flex:1;color:var(--txt);word-break:break-word}
.undo-row .undo-ts{flex:0 0 auto;font-size:10.5px}
.undo-pop-hint{padding:6px 10px;border-top:1px solid var(--line)}

/* Theme-Toggle: nur Icon-Button, anpassbar */
#themeToggle{font-size:14px;padding:4px 8px;min-width:30px}

/* Compare Modal */
.cmp-cols{display:grid;grid-template-columns:1fr 90px 1fr;gap:8px;
  margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.cmp-col h3{font-size:12.5px;color:var(--fl-yellow);margin:0;
  word-break:break-word}
.cmp-mid{}
.cmp-grp{margin:8px 0;border:1px solid var(--line);border-radius:5px;
  overflow:hidden}
.cmp-grp-h{padding:5px 9px;background:var(--panel2);
  font-weight:600;color:var(--fl-orange);font-size:11px;
  text-transform:uppercase;letter-spacing:.5px}
.cmp-row{display:grid;grid-template-columns:1fr 110px 1fr;gap:4px;
  padding:4px 8px;border-top:1px solid #1a212a;font-size:12px;
  align-items:center}
.cmp-row:first-of-type{border-top:none}
.cmp-row .cmp-c{padding:2px 6px;border-radius:3px;word-break:break-word;
  min-height:18px}
.cmp-row .cmp-k{color:var(--muted);text-align:center;
  font-size:11px;font-weight:600}
/* gleich = grau, verschieden = orange-Hintergrund, nur in einem = gelb */
.cmp-row.cmp-eq   .cmp-c{background:#0e131a}
.cmp-row.cmp-diff .cmp-c{background:#3a1f10;color:var(--fl-orange)}
.cmp-row.cmp-only .cmp-c{background:#3a3210;color:var(--fl-yellow)}
.cmp-legend{display:flex;gap:14px;padding-top:10px;justify-content:center}
.cmp-eq-dot,.cmp-diff-dot,.cmp-only-dot{display:inline-block;width:10px;
  height:10px;border-radius:5px;margin-right:4px;vertical-align:middle}
.cmp-eq-dot  {background:#0e131a;border:1px solid var(--line)}
.cmp-diff-dot{background:var(--fl-orange)}
.cmp-only-dot{background:var(--fl-yellow)}

/* PinA Button visual state */
#pcPinA.pinned{background:var(--fl-orange);color:#fff}

/* FDK Inline-Help Tabelle */
.fdk-help-toggle{background:none;border:1px solid var(--line);color:var(--muted);
  cursor:pointer;border-radius:50%;width:18px;height:18px;line-height:1;
  font-size:11px;padding:0;margin-left:4px}
.fdk-help-toggle:hover{color:var(--fl-yellow);border-color:var(--fl-yellow)}
.fdk-help{margin-top:6px;border:1px solid var(--line);border-radius:5px;
  overflow:auto;max-height:240px;background:var(--panel2)}
.fdk-help.hidden{display:none}
.fdk-help-tbl{width:100%;border-collapse:collapse;font-size:11px}
.fdk-help-tbl th,.fdk-help-tbl td{padding:4px 7px;text-align:left;
  border-bottom:1px solid #1a212a;vertical-align:top}
.fdk-help-tbl th{background:var(--panel);color:var(--fl-yellow);
  font-weight:600;position:sticky;top:0}
.fdk-help-tbl td:nth-child(4){color:var(--muted)}

/* Hellmodus-Anpassungen — kleinere Korrekturen für die Hintergründe der
   Toast-/Modal-Elemente, die fixe Werte hatten */
:root[data-theme="light"] .cmp-row.cmp-eq .cmp-c{background:#f0f2f5}
:root[data-theme="light"] .cmp-row.cmp-diff .cmp-c{background:#ffe8d4;color:#8a4416}
:root[data-theme="light"] .cmp-row.cmp-only .cmp-c{background:#fff4be;color:#7a6010}
:root[data-theme="light"] .cmdp-card{background:var(--panel)}
:root[data-theme="light"] .undo-pop{background:var(--panel)}
:root[data-theme="light"] .cmdp-row.active,
:root[data-theme="light"] .cmdp-row:hover{background:#e9ecef;color:#7a6010}
:root[data-theme="light"] .statusbar{background:#ffffffcc}
:root[data-theme="light"] .prop-card{background:#ffffff;color:var(--txt)}
:root[data-theme="light"] .prop-card .pc-head,
:root[data-theme="light"] .prop-card .pc-actions{background:#ffffff}
:root[data-theme="light"] .prop-card .pc-grp-h{background:#f0f2f5;color:#7a6010}
:root[data-theme="light"] .prop-card .pc-grp-body{background:#ffffff}
:root[data-theme="light"] .idc-card{background:#ffffff;color:var(--txt)}
:root[data-theme="light"] .idc-head{background:#f0f2f5}

/* V21.17 (V2.0): IDS-Validation Modal -------------------------------------- */
.ids-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:10px}
.ids-status{padding:4px 0 8px}
.ids-stats{display:flex;gap:6px;margin-bottom:10px}
.ids-pill{padding:3px 10px;border-radius:12px;font-size:11px;font-weight:600;
  background:#1c2530;color:var(--txt);border:1px solid var(--line)}
.ids-pill-pass{background:#1a3318;color:#9dca7c;border-color:#5ca84a}
.ids-pill-fail{background:#3b1212;color:#ff8d72;border-color:#e0533b}
.ids-list{max-height:480px;overflow:auto;display:flex;flex-direction:column;
  gap:8px}
.ids-spec{border:1px solid var(--line);border-radius:6px;background:#0f1318;
  padding:8px 10px}
.ids-spec-pass{border-left:3px solid #5ca84a}
.ids-spec-fail{border-left:3px solid #e0533b}
.ids-spec-h{display:flex;align-items:center;gap:8px;font-size:12.5px}
.ids-spec-status{font-weight:700;font-size:14px}
.ids-spec-pass .ids-spec-status{color:#5ca84a}
.ids-spec-fail .ids-spec-status{color:#e0533b}
.ids-spec-name{flex:1;color:var(--txt);font-weight:600}
.ids-spec-cnt{flex:0 0 auto}
.ids-spec-desc{margin-top:3px;font-size:11px}
.ids-spec-reqs{margin-top:3px;font-size:10.5px;font-style:italic}
.ids-spec-fails{margin-top:6px;border-top:1px dashed #1a212a;padding-top:5px;
  max-height:200px;overflow:auto}
.ids-fail-row{display:flex;align-items:center;gap:8px;padding:3px 0;
  font-size:11px;cursor:pointer;border-bottom:1px solid #161c24}
.ids-fail-row:hover{background:#1a212a}
.ids-fail-row:last-child{border-bottom:none}
.ids-fail-cls{flex:0 0 110px;color:var(--muted);font-size:10.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ids-fail-nm{flex:1;color:var(--txt);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.ids-fail-gid{flex:0 0 auto}
.ids-hint{margin-top:10px;padding-top:8px;border-top:1px solid #1a212a}

/* V21.17 (V2.0): QTO Modal ------------------------------------------------- */
.qto-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:14px;padding-top:10px;border-top:1px solid var(--line)}
.qto-warn{flex:1;color:var(--muted);font-style:italic}
/* V3.1c: PSet-Transfer */
hr.sep{border:0;border-top:1px solid var(--line);margin:14px 0 10px}
.tp-list{max-height:240px;overflow:auto;margin:4px 0;padding:4px 0}
.tp-list .chk{display:block;margin:2px 0}
/* V3.1d: „Quelle picken" */
#tpPickBtn.active{background:#2f7bff;border-color:#2f7bff;color:#fff}
#tpSrcPanel.tp-pick{color:#2f7bff;font-weight:600}
/* V3.2: Project Tree — ein-/ausklappbar + Element-/Gruppen-Zeilen */
.tn-tog{display:inline-block;width:14px;text-align:center;cursor:pointer;
  color:var(--muted);font-size:10px;user-select:none}
.tn-lbl{cursor:pointer}
.tn-kids{}
.tnode.tn-elem{font-size:12px;opacity:.92}
.tnode.tn-elemgrp,.tnode.tn-grouphead{font-size:12px}
.tag-el{background:#334155}
.tag-grp{background:#6b21a8}
:root[data-theme="light"] .ids-spec{background:#ffffff}
:root[data-theme="light"] .ids-fail-row:hover{background:#f0f2f5}

/* V3.1: FDK Cascade-Search-Box im Panel 7 ---------------------------------- */
.fdk-search-wrap{display:flex;align-items:center;gap:4px;margin-bottom:6px}
.fdk-search-wrap .inp{flex:1;font-size:12px;padding:4px 8px}
.fdk-search-wrap .btn-mini{flex:0 0 auto;padding:2px 8px;font-size:13px;
  line-height:1;background:var(--panel2);border:1px solid var(--line);
  border-radius:4px;cursor:pointer;color:var(--muted)}
.fdk-search-wrap .btn-mini:hover{color:var(--danger);border-color:var(--danger)}

/* V21.15: Section-Planes Floating-Panel — wie hotkey-legend stilisiert.
   V21.16e: Breite auf 320 px erhöht für Number-Input pro Achse. */
.section-panel{position:fixed;z-index:200;
  width:320px;background:var(--panel);color:var(--txt);
  border:1.5px solid var(--fl-yellow);border-radius:8px;
  box-shadow:0 6px 24px rgba(0,0,0,.55);padding:0 0 8px}
.section-panel.hidden{display:none}
.section-panel .sp-head{display:flex;align-items:center;gap:6px;
  padding:8px 10px;border-bottom:1px solid var(--line);background:var(--panel2);
  font-weight:600;color:var(--fl-yellow);text-transform:uppercase;
  letter-spacing:.5px;font-size:12px;cursor:move;user-select:none;
  border-top-left-radius:6px;border-top-right-radius:6px}
.section-panel .sp-grip{color:var(--muted);font-size:10px;cursor:move}
.section-panel .sp-title{flex:1}
.section-panel .sp-close{background:none;border:none;color:var(--muted);
  cursor:pointer;font-size:17px;padding:0 6px;border-radius:3px}
.section-panel .sp-close:hover{color:var(--fl-yellow);background:#1c2530}
.section-panel .sp-enable{padding:8px 12px 4px 12px;display:flex;
  align-items:center;gap:8px;font-size:12px}
.section-panel .sp-ax{display:flex;align-items:center;gap:8px;
  padding:4px 12px;font-size:12px}
.section-panel .sp-ax .chk{flex:0 0 30px;margin:0}
.section-panel .sp-range{flex:1;min-width:60px;height:18px;
  accent-color:var(--fl-yellow);background:transparent}
/* V21.16e: Number-Input neben dem Slider — exakte Distanz-Eingabe */
.section-panel .sp-pos{flex:0 0 56px;background:var(--panel2);
  color:var(--txt);border:1px solid var(--line);border-radius:4px;
  padding:2px 4px;font-size:11px;font-family:"Consolas","JetBrains Mono",monospace;
  text-align:right;outline:none;-moz-appearance:textfield}
.section-panel .sp-pos::-webkit-outer-spin-button,
.section-panel .sp-pos::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.section-panel .sp-pos:focus{border-color:var(--fl-yellow);
  box-shadow:0 0 0 2px rgba(255,203,5,.15)}
.section-panel .sp-unit-lbl{flex:0 0 18px;font-size:10.5px;
  color:var(--muted);text-align:left}
.section-panel .sp-unit{display:flex;align-items:center;gap:6px;
  padding:4px 12px 6px;font-size:11px;border-bottom:1px dashed #1a212a}
.section-panel .sp-unit-sel{background:var(--panel2);color:var(--txt);
  border:1px solid var(--line);border-radius:4px;padding:2px 6px;
  font-size:11px;cursor:pointer}
.section-panel .sp-unit-sel:focus{border-color:var(--fl-yellow)}
.section-panel .sp-unit .sp-hint{flex:1;text-align:right;font-size:10px;
  color:var(--muted)}
:root[data-theme="light"] .section-panel .sp-pos{background:#ffffff;
  color:var(--txt)}
:root[data-theme="light"] .section-panel .sp-unit-sel{background:#ffffff}
.section-panel .sp-flip{background:#1c2530;color:var(--fl-yellow);
  border:1px solid var(--line);border-radius:3px;cursor:pointer;
  padding:1px 6px;font-size:11px;line-height:1}
.section-panel .sp-flip:hover{border-color:var(--fl-yellow)}
/* V21.16d: Frame-Toggle (Global / Pick) im Section-Panel */
.section-panel .sp-frame{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:4px 12px 6px;font-size:11.5px;border-bottom:1px dashed #1a212a}
.section-panel .sp-frame .chk{margin:0;flex:0 0 auto;font-size:11.5px}
.section-panel .sp-frame input[type=radio]:disabled+span{opacity:.5}
/* Wenn Local-Mode aktiv ist, das ganze Section-Panel mit gelbem Akzent */
.section-panel:has(input[name="spFrame"][value="local"]:checked) .sp-head{
  background:linear-gradient(90deg, var(--panel2) 0%, #2d2410 100%)}

/* V21.16c: Free-Plane Block (4. Schnitt entlang gepickter Fläche) */
.section-panel .sp-free{padding:6px 12px 4px 12px;
  border-top:1px dashed #1a212a;margin-top:6px}
/* V21.16d: Local-Mode Layout — Offset-Slider + Flip ausblenden, weil das
   jetzt der X-Slider macht. Nur Re-Pick-Button + Status bleiben. */
.section-panel .sp-free.sp-free-local .sp-enable{display:none}
.section-panel .sp-free.sp-free-local .sp-free-row #spFreeOffset{display:none}
.section-panel .sp-free.sp-free-local .sp-free-row #spFreeFlip{display:none}
.section-panel .sp-free .sp-enable{margin:0 0 4px;font-size:12px}
.section-panel .sp-free-row{display:flex;align-items:center;gap:6px}
.section-panel .sp-free-row .btn-mini{flex:0 0 auto;font-size:11px;
  padding:2px 8px;white-space:nowrap}
.section-panel .sp-free-status{padding:2px 0 0;font-size:10.5px;
  color:var(--muted);min-height:14px;word-break:break-word}
/* Active-State während Pick-Mode: Button blinkt gelb */
.section-panel .sp-pick-active{background:var(--fl-yellow) !important;
  color:#0a0d11 !important;border-color:var(--fl-yellow) !important;
  animation:sp-pulse 1.1s ease-in-out infinite}
@keyframes sp-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,203,5,.7)}
  50%{box-shadow:0 0 0 6px rgba(255,203,5,0)}
}
:root[data-theme="light"] .section-panel .sp-pick-active{
  background:var(--fl-yellow) !important;color:#7a6010 !important}

/* V21.16b: Pivot-Indikator + Re-Pivot Button im Section-Panel */
.section-panel .sp-pivot{display:flex;align-items:center;gap:6px;
  padding:2px 12px 4px 12px;font-size:11px;border-top:1px dashed #1a212a;
  border-bottom:1px dashed #1a212a;margin:4px 0 2px}
.section-panel .sp-pivot-ind{flex:1;color:var(--fl-yellow);font-style:italic}
.section-panel .sp-pivot .btn-mini{padding:1px 6px;font-size:10.5px}
.section-panel .sp-presets{display:flex;gap:4px;flex-wrap:wrap;
  padding:6px 12px 2px 12px;border-top:1px solid #1a212a;margin-top:6px}
.section-panel .sp-presets .btn{padding:2px 8px;font-size:11px;flex:1;
  min-width:54px}
.section-panel .btn-mini{padding:2px 8px;font-size:11px}
:root[data-theme="light"] .section-panel{background:#ffffff}
:root[data-theme="light"] .section-panel .sp-flip{background:#f0f2f5;
  color:#7a6010}

/* V21.16: Multi-Model Chip-Bar + IFC-Diff Modal ----------------------- */
.mc-bar{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0 6px}
.mc-bar .muted{padding:4px 0}
.model-chip{display:inline-flex;align-items:center;gap:5px;
  background:#1c2530;border:1px solid var(--line);border-radius:14px;
  padding:3px 6px 3px 10px;cursor:pointer;font-size:11.5px;
  color:var(--txt);max-width:220px;line-height:1.2}
.model-chip:hover{border-color:var(--fl-yellow);background:#202a36}
.model-chip.mc-active{background:#26341a;border-color:#5ca84a;
  color:#cfe5b8}
.model-chip .mc-name{flex:1;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:160px}
.model-chip .mc-count{background:#0f1318;border:1px solid var(--line);
  border-radius:8px;padding:0 5px;font-size:10px;color:var(--muted)}
.model-chip.mc-active .mc-count{background:#1a2510;color:#9dca7c}
.model-chip .mc-x{background:none;border:none;color:var(--muted);
  cursor:pointer;font-size:14px;padding:0 4px;border-radius:3px;
  line-height:1}
.model-chip .mc-x:hover{color:var(--danger);background:#1a212a}
.mc-add{margin-bottom:6px;font-size:11.5px;padding:3px 10px}
.mc-add:hover{border-color:var(--fl-yellow)}

/* Diff-Modal */
.diff-pickrow{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;
  padding:0 0 10px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.diff-pickrow .fld{flex:1;min-width:200px;margin:0}
.diff-pickrow .btn{align-self:flex-end}
.diff-stats{padding:8px 0;border-bottom:1px solid #1a212a;
  margin-bottom:10px;line-height:1.5}
.diff-lists{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.diff-col{background:#0f1318;border:1px solid var(--line);
  border-radius:6px;padding:8px;max-height:340px;overflow:auto}
.diff-col h4{margin:0 0 6px;font-size:12px;color:var(--fl-yellow);
  text-transform:uppercase;letter-spacing:.5px;display:flex;
  align-items:center;gap:6px}
.diff-list{font-size:11.5px}
.dl-row{display:flex;gap:6px;padding:3px 0;border-bottom:1px solid #1a212a;
  cursor:pointer}
.dl-row:hover{background:#1a212a}
.dl-row:last-child{border-bottom:none}
.dl-cls{flex:0 0 90px;color:var(--muted);font-size:10.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-nm{flex:1;color:var(--txt);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.dl-cnt{flex:0 0 auto;background:#1c2530;border:1px solid var(--line);
  border-radius:8px;padding:0 5px;font-size:10px;color:var(--fl-yellow)}
.diff-dot{display:inline-block;width:10px;height:10px;border-radius:50%}
.diff-added{background:#00d860}
.diff-removed{background:#e0533b}
.diff-modified{background:#ffaa00}
.diff-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.diff-foot .diff-hint{flex:1;min-width:200px}

:root[data-theme="light"] .model-chip{background:#f0f2f5;color:var(--txt)}
:root[data-theme="light"] .model-chip.mc-active{background:#dff0d3;
  border-color:#5ca84a;color:#365b22}
:root[data-theme="light"] .model-chip .mc-count{background:#ffffff;
  color:#7a6010}
:root[data-theme="light"] .diff-col{background:#ffffff;color:var(--txt)}

/* V5.2.1: Rechtliches — dezenter Link + Modal */
#legalLink{position:fixed;left:8px;bottom:6px;z-index:2147483300;
  font-size:10px;color:#6b7280;text-decoration:none;opacity:.7;
  background:rgba(15,19,24,.55);padding:2px 6px;border-radius:4px}
#legalLink:hover{opacity:1;color:#9aa3b2;text-decoration:underline}
.legal-back{position:fixed;inset:0;z-index:2147483600;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center}
.legal-back.hidden{display:none}
.legal-card{position:relative;background:#1b1f27;border:1px solid #2a2f3a;
  border-radius:10px;max-width:680px;width:92%;max-height:84vh;overflow:auto;
  padding:22px 26px;color:#e7ecf3;box-shadow:0 18px 50px rgba(0,0,0,.5);
  font-size:13px;line-height:1.5}
.legal-card h2{margin:0 0 4px;font-size:18px}
.legal-card h3{margin:16px 0 4px;font-size:14px;color:var(--fl-yellow)}
.legal-card p{margin:0 0 6px;color:#c7cdd6}
.legal-meta{font-size:11px;color:#8b93a3}
.legal-x{position:absolute;top:10px;right:12px;background:none;border:none;
  color:#8b93a3;font-size:22px;cursor:pointer;line-height:1}
.legal-x:hover{color:#fff}