/* Public-view first-paint styles — applied before any JS runs so /view/ links
     never flash the full editor layout, even on slow mobile networks. */
  html.ghc-public-view body { background:#1a1a2e !important; color:#fff; }
  html.ghc-public-view #lpanel,
  html.ghc-public-view #expandL,
  html.ghc-public-view #loginOverlay,
  html.ghc-public-view #vpStats,
  html.ghc-public-view #publicViewBadge { display:none !important; }
  /* Paint shield — covers every other DOM element from the first frame so the
     editor chrome can't peek through during parse/layout. JS removes it after
     the public-view setup completes. */
  #pvPaintShield { display:none; }
  html.ghc-public-view #pvPaintShield {
    display:flex !important;
    position:fixed; inset:0;
    background:#1a1a2e;
    z-index:99999;
    align-items:center; justify-content:center;
    color:#4fc3f7;
    font:600 14px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    letter-spacing:1px;
    transition:opacity 0.25s ease;
  }

  *{margin:0;padding:0;box-sizing:border-box}
  button,input,select,label{touch-action:manipulation;-webkit-tap-highlight-color:rgba(16,185,129,0.3)}
  button{cursor:pointer;-webkit-appearance:none}
  :root{
    --bg:#1a1a2e;--panel:#ffffff;--border:#e5e7eb;--accent:#10b981;--accent2:#059669;
    --dim:#d1fae5;--text:#374151;--muted:#6b7280;--warn:#eab308;--err:#ef4444;
    --sect-bg:#f9fafb;--sect-hover:#f3f4f6;--input-bg:#ffffff;--input-border:#d1d5db;
    --panel-w:280px;
    /* Theme-aware panel colors */
    --sect-text:#1f2937;       /* section header text */
    --panel-strong:#1e293b;    /* dialog titles, stat values */
    --panel-mid:#475569;       /* item names, secondary text */
    --panel-dark-input:#334155;/* input/select text */
    --surface1:#f8fafc;        /* stat cards, table headers, settings rows */
    --surface2:#f1f5f9;        /* totals bar, secondary button bg */
    --surface3:#e8e8e8;        /* nvph-section bg, cfg-g-hdr */
    --surface3-hover:#ddd;     /* nvph-section hover */
    --item-border:#f1f5f9;     /* nvph-item row separators */
    --section-border:#d0d0d0;  /* nvph-section bottom border */
    --dialog-border:#e2e8f0;   /* dialog internal borders, cfg inputs */
    --item-hover-bg:#e0f2fe;   /* clickable item hover */
    --section-sum:#555;        /* section subtotal text */
    --cfg-hdr-text:#334155;    /* cfg group header text */
    --canvas-bg:#e8ecf3;       /* viewport + Three.js background (light) */
    --legend-bg:rgba(255,255,255,0.90);  /* legend glassmorphism */
  }
  /* ── DARK THEME ── */
  html[data-theme="dark"]{
    --bg:#0d1117;--panel:#161b22;--border:#30363d;--accent:#10b981;--accent2:#34d399;
    --dim:#0d2818;--text:#c9d1d9;--muted:#8b949e;--warn:#d29922;--err:#f85149;
    --sect-bg:#1c2128;--sect-hover:#21262d;--input-bg:#0d1117;--input-border:#30363d;
    --sect-text:#c9d1d9;
    --panel-strong:#f0f6fc;
    --panel-mid:#8b949e;
    --panel-dark-input:#c9d1d9;
    --surface1:#1c2128;
    --surface2:#21262d;
    --surface3:#1c2128;
    --surface3-hover:#21262d;
    --item-border:#21262d;
    --section-border:#30363d;
    --dialog-border:#30363d;
    --item-hover-bg:#1c3a4a;
    --section-sum:#8b949e;
    --cfg-hdr-text:#8b949e;
    --canvas-bg:#0d1117;
    --legend-bg:rgba(22,27,34,0.90);     /* legend glassmorphism dark */
  }
  body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;overflow:hidden;height:100vh;height:100dvh}

  /* 100dvh (dynamic viewport height) = the actually-visible area — handles the
     Chrome-Android URL bar and Samsung Fold posture changes without the JS
     innerHeight override that could report half on a foldable. 100vh is the
     fallback for older browsers. */
  .app{display:flex;height:100vh;height:100dvh;overflow:hidden}

  /* LEFT PANEL */
  .lpanel{
    width:var(--panel-w);min-width:var(--panel-w);background:var(--panel);
    display:flex;flex-direction:column;transition:margin-left 0.3s ease,min-width 0.3s ease,width 0.3s ease;
    z-index:100;box-shadow:2px 0 20px rgba(0,0,0,0.15);
  }
  .lpanel.collapsed{margin-left:calc(var(--panel-w) * -1);min-width:0;width:0;overflow:hidden}
  .lpanel-hdr{
    background:linear-gradient(135deg,#10b981 0%,#059669 100%);
    padding:12px 16px 10px;display:flex;flex-direction:column;gap:8px;flex-shrink:0;
  }
  .lpanel-hdr .logo{font-weight:700;font-size:15px;color:#fff;display:flex;align-items:center;gap:8px;letter-spacing:0.3px}
  .lpanel-hdr .logo svg{width:20px;height:20px;fill:#fff}
  .lpanel-hdr .hdr-row{display:flex;align-items:center;justify-content:space-between;gap:6px}
  .lpanel-hdr .hdr-row .hdr-actions{display:flex;align-items:center;gap:6px}
  .collapse-btn{background:rgba(255,255,255,0.2);border:none;color:#fff;width:30px;height:30px;border-radius:6px;font-size:14px;transition:background 0.2s;display:flex;align-items:center;justify-content:center}
  .collapse-btn:hover{background:rgba(255,255,255,0.3)}
  .hdr-ibtn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;background:rgba(255,255,255,0.18);border:1px solid rgba(255,255,255,0.3);border-radius:4px;color:#fff;cursor:pointer;text-decoration:none;transition:background 0.2s}
  .hdr-ibtn:hover{background:rgba(255,255,255,0.32)}
  .hdr-ibtn svg{width:14px;height:14px;fill:currentColor;display:block}
  .hdr-ibtn.accent{background:rgba(16,185,129,0.35);border-color:rgba(16,185,129,0.5)}
  .hdr-ibtn.accent:hover{background:rgba(16,185,129,0.55)}
  body.edit-default-mode{padding-top:48px}
  .lpanel-body{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d1d5db #f9fafb;-webkit-overflow-scrolling:touch;touch-action:pan-y}
  .lpanel-body::-webkit-scrollbar{width:5px}
  .lpanel-body::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}
  .lpanel-body::-webkit-scrollbar-thumb:hover{background:#9ca3af}


  /* SECTIONS */
  .sect{border-bottom:1px solid var(--border)}
  .sect-hdr{padding:10px 14px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--sect-text);cursor:pointer;display:flex;align-items:center;gap:6px;user-select:none;background:var(--sect-bg)}
  .sect-hdr:hover{background:var(--sect-hover)}
  .sect-hdr .arrow{transition:transform 0.2s;font-size:8px;color:var(--muted)}
  .sect-hdr .arrow.open{transform:rotate(90deg)}
  .sect-body{padding:8px 14px 12px;display:none}
  .sect-body.open{display:block}
  .pipe-group-body{transition:max-height 0.2s}
  .pipe-group-body.collapsed{display:none}
  .arr.open{transform:rotate(90deg)}

  /* NVPH Panel Styles */
  .nvph-btn-group{display:flex;gap:6px}
  .nvph-generate-btn{flex:1;padding:10px 12px;color:#fff;border:none;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all 0.2s}
  .nvph-generate-btn:hover{transform:translateY(-1px)}
  .nvph-generate-btn:active{transform:translateY(0)}
  .nvph-generate-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}
  .nvph-btn-primary{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 2px 6px rgba(16,185,129,0.3)}
  .nvph-btn-primary:hover{box-shadow:0 4px 10px rgba(16,185,129,0.4)}
  .nvph-btn-secondary{background:linear-gradient(135deg,#64748b,#475569);box-shadow:0 2px 6px rgba(100,116,139,0.3)}
  .nvph-btn-secondary:hover:not(:disabled){box-shadow:0 4px 10px rgba(100,116,139,0.4)}
  .nvph-btn-secondary.pipes-dirty{background:linear-gradient(135deg,#059669,#047857);box-shadow:0 2px 8px rgba(5,150,105,0.4);animation:pulse-dirty 1.5s infinite}
  @keyframes pulse-dirty{0%,100%{box-shadow:0 2px 8px rgba(5,150,105,0.4)}50%{box-shadow:0 2px 16px rgba(5,150,105,0.7)}}
  .nvph-btn-icon{font-size:10px}
  .nvph-stat{display:flex;flex-direction:column;align-items:center;gap:2px}
  .nvph-stat-val{font-size:12px;font-weight:700;color:var(--accent2)}
  .nvph-stat-lbl{font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px}
  .nvph-export-btn{padding:4px 10px;background:var(--panel);border:1px solid var(--dialog-border);border-radius:4px;font-size:10px;color:var(--panel-mid);cursor:pointer;transition:all 0.15s}
  .nvph-export-btn:hover{background:var(--surface2);border-color:var(--input-border)}
  .nvph-export-row{display:flex;align-items:center;gap:6px}
  .nvph-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;color:#475569;cursor:pointer;transition:all 0.15s}
  .nvph-iconbtn:hover{background:#fff;border-color:#cbd5e1;color:#1e293b;box-shadow:0 1px 3px rgba(0,0,0,0.08)}
  .nvph-iconbtn:disabled{opacity:0.5;cursor:not-allowed}
  .nvph-iconbtn svg{width:15px;height:15px;fill:currentColor;display:block}
  .nvph-iconbtn.xlsx{color:#15803d}
  .nvph-iconbtn.xlsx:hover{background:#f0fdf4;border-color:#86efac}
  .nvph-iconbtn.ghc{color:#0369a1}
  .nvph-iconbtn.ghc:hover{background:#f0f9ff;border-color:#7dd3fc}
  .nvph-iconbtn.pdf{color:#b91c1c}
  .nvph-iconbtn.pdf:hover{background:#fef2f2;border-color:#fca5a5}
  .nvph-iconbtn.report{color:#7c3aed}
  .nvph-iconbtn.report:hover{background:#faf5ff;border-color:#c4b5fd}
  .nvph-totals{display:flex;justify-content:space-between;padding:8px 12px;background:var(--surface2);border-radius:6px;font-size:11px;color:var(--panel-mid);margin-top:8px}
  .nvph-totals strong{color:var(--accent2)}
  .nvph-section{display:flex;align-items:center;padding:5px 8px;background:var(--surface3);font-weight:700;font-size:11px;color:var(--sect-text);border-bottom:1px solid var(--section-border);margin-top:2px;font-style:italic;cursor:pointer;user-select:none}
  .nvph-section:hover{background:var(--surface3-hover)}
  .nvph-section-arr{font-size:7px;color:var(--muted);margin-right:5px;transition:transform 0.2s;display:inline-block}
  .nvph-section.open .nvph-section-arr{transform:rotate(90deg)}
  .nvph-section-name{flex:1}
  .nvph-section-sum{font-size:10px;color:var(--section-sum);font-weight:600;margin-right:8px}
  .nvph-section-price{font-size:10px;color:var(--accent2);font-weight:600}
  .nvph-section-body{display:none}
  .nvph-section-body.open{display:block}
  .nvph-item{display:flex;flex-wrap:wrap;padding:5px 8px 4px;gap:0;font-size:10px;border-bottom:1px solid var(--item-border)}
  .nvph-item:last-child{border-bottom:none}
  .nvph-item-line1{display:flex;align-items:center;width:100%;gap:6px;margin-bottom:3px}
  .nvph-item-line2{display:flex;align-items:center;width:100%;gap:8px;padding-left:14px}
  .nvph-item-color{width:8px;height:8px;border-radius:2px;flex-shrink:0}
  .nvph-item-name{flex:1;color:var(--panel-mid);font-weight:600}
  .nvph-item select{padding:2px 4px;font-size:9px;border:1px solid var(--dialog-border);border-radius:3px;background:var(--input-bg);color:var(--panel-dark-input);max-width:80px;cursor:pointer}
  .nvph-item select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 1px #3b82f6}
  .nvph-rot-select{max-width:64px;flex-shrink:0;font-weight:600}
  .nvph-item-qty{color:var(--muted);font-size:10px}
  .nvph-item-len{color:var(--muted);font-size:10px}
  .nvph-item-tlen{color:var(--panel-dark-input);font-weight:600;font-size:10px}
  .nvph-item-price{text-align:right;font-size:9px;color:var(--accent2);font-weight:500;white-space:nowrap;margin-left:auto}
  .nvph-item.clickable{cursor:pointer;transition:background 0.15s}
  .nvph-item.clickable:hover{background:var(--item-hover-bg)}

  /* Accessories updated flash */
  @keyframes acc-flash{0%{background:#d1fae5}100%{background:transparent}}
  .acc-flash .nvph-section{animation:acc-flash 1.2s ease-out}

  /* Hardware BOM Detail Dialog */
  .hw-dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.45);z-index:9000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
  .hw-dialog-overlay.open{display:flex}
  .hw-dialog{background:var(--panel);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,0.25);min-width:340px;max-width:520px;max-height:80vh;overflow:hidden;animation:hw-dialog-in 0.2s ease-out}
  @keyframes hw-dialog-in{from{opacity:0;transform:scale(0.95) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
  .hw-dialog-hdr{display:flex;align-items:center;padding:14px 18px;border-bottom:1px solid var(--dialog-border);gap:10px}
  .hw-dialog-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
  .hw-dialog-title{flex:1}
  .hw-dialog-title h3{margin:0;font-size:14px;color:var(--panel-strong);font-weight:600}
  .hw-dialog-title p{margin:2px 0 0;font-size:11px;color:var(--muted)}
  .hw-dialog-close{width:28px;height:28px;border:none;background:transparent;cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:18px;transition:all 0.15s}
  .hw-dialog-close:hover{background:var(--surface2);color:var(--panel-mid)}
  .hw-dialog-body{padding:14px 18px;overflow-y:auto;max-height:55vh}
  .hw-dialog-summary{display:flex;gap:12px;margin-bottom:14px}
  .hw-dialog-stat{flex:1;background:var(--surface1);border-radius:8px;padding:10px 12px;text-align:center}
  .hw-dialog-stat-val{font-size:20px;font-weight:700;color:var(--panel-strong)}
  .hw-dialog-stat-lbl{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;margin-top:2px}
  .hw-detail-table{width:100%;border-collapse:collapse;font-size:11px}
  .hw-detail-table th{text-align:left;padding:6px 8px;background:var(--surface1);color:var(--muted);font-weight:500;font-size:10px;text-transform:uppercase;letter-spacing:0.3px;border-bottom:1px solid var(--dialog-border)}
  .hw-detail-table td{padding:6px 8px;border-bottom:1px solid var(--item-border);color:var(--panel-dark-input)}
  .hw-detail-table tr:last-child td{border-bottom:none}
  .hw-detail-table .qty-col{text-align:right;font-weight:600;width:50px}
  .hw-detail-table .total-row td{background:#f0fdf4;font-weight:600;border-top:2px solid #bbf7d0}

  /* Dialog Settings Section */
  .hw-dialog-settings{margin-top:14px;border-top:1px solid var(--dialog-border);padding-top:12px}
  .hw-dialog-settings-hdr{font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px;display:flex;align-items:center;gap:6px}
  .hw-setting-row{display:flex;align-items:center;padding:5px 8px;border-radius:4px;margin-bottom:2px;font-size:11px}
  .hw-setting-row:nth-child(even){background:var(--surface1)}
  .hw-setting-key{flex:1;color:var(--muted)}
  .hw-setting-val{font-weight:600;color:var(--panel-strong);min-width:60px;text-align:right}
  .hw-setting-val.bool-true{color:#16a34a}
  .hw-setting-val.bool-false{color:#dc2626}
  .hw-setting-val.readonly{font-size:10px;opacity:0.7}
  .hw-setting-inp{width:60px;padding:3px 6px;font-size:11px;border:1px solid var(--input-border);border-radius:4px;text-align:right;background:var(--input-bg);color:var(--panel-strong);font-weight:600;outline:none;transition:border-color 0.15s}
  .hw-setting-inp:focus{border-color:#10b981;box-shadow:0 0 0 2px rgba(16,185,129,0.15)}
  .hw-setting-sel{padding:3px 6px;font-size:11px;border:1px solid var(--input-border);border-radius:4px;background:var(--input-bg);color:var(--panel-strong);font-weight:600;outline:none;cursor:pointer;max-width:90px}
  .hw-setting-sel:focus{border-color:#10b981}
  .hw-setting-chk{width:16px;height:16px;accent-color:#10b981;cursor:pointer}
  .hw-dialog-apply{display:flex;justify-content:flex-end;margin-top:12px;gap:8px}
  .hw-dialog-apply-btn{padding:7px 16px;font-size:11px;font-weight:600;border:none;border-radius:6px;cursor:pointer;transition:all 0.15s;display:flex;align-items:center;gap:5px}
  .hw-dialog-apply-btn.primary{background:#10b981;color:#fff}
  .hw-dialog-apply-btn.primary:hover{background:#059669}
  .hw-dialog-apply-btn.secondary{background:var(--surface2);color:var(--panel-mid)}
  .hw-dialog-apply-btn.secondary:hover{background:var(--surface1)}
  .hw-setting-changed{border-color:#f59e0b !important;background:#fffbeb !important}

  /* Pipe Detail Dialog extras */
  .pipe-specs-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:14px}
  .pipe-spec-item{background:var(--surface1);border-radius:6px;padding:8px 10px;text-align:center}
  .pipe-spec-val{font-size:16px;font-weight:700;color:var(--panel-strong)}
  .pipe-spec-lbl{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:0.3px;margin-top:2px}
  .pipe-info-row{display:flex;align-items:center;padding:5px 8px;font-size:11px;border-bottom:1px solid var(--item-border)}
  .pipe-info-row:last-child{border-bottom:none}
  .pipe-info-key{flex:1;color:var(--muted)}
  .pipe-info-val{font-weight:600;color:var(--panel-strong)}

  .ctrl{display:flex;align-items:center;gap:8px;margin-bottom:10px}
  .ctrl>label{flex:1;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ctrl select{width:100%;background:var(--input-bg);border:1px solid var(--input-border);color:var(--text);padding:6px 10px;font-size:12px;font-family:inherit;border-radius:6px;outline:none;transition:border-color 0.15s}
  .ctrl select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(16,185,129,0.15)}
  .ctrl-full{display:block;margin-bottom:10px}
  .ctrl-full>label{display:block;font-size:11px;color:var(--muted);margin-bottom:4px}
  .ctrl-full select{width:100%}
  .ctrl input[type="text"]{width:100%;background:var(--input-bg);border:1px solid var(--input-border);color:var(--text);padding:6px 10px;font-size:12px;font-family:inherit;border-radius:6px;outline:none;box-sizing:border-box;transition:border-color 0.15s}
  .ctrl input[type="text"]:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(16,185,129,0.15)}
  .ctrl input[type="color"]{width:50px;height:32px;border:1px solid var(--input-border);border-radius:6px;cursor:pointer;padding:2px}
  .ctrl input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
  .ctrl input[type="color"]::-webkit-color-swatch{border:none;border-radius:4px}

  .chk{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;cursor:pointer;font-size:12px;color:var(--text)}
  .chk .toggle{position:relative;width:40px;height:22px;flex-shrink:0}
  .chk .toggle input{opacity:0;width:0;height:0;position:absolute}
  .chk .toggle .slider{position:absolute;inset:0;background:#d1d5db;border-radius:11px;transition:background 0.25s}
  .chk .toggle input:checked+.slider{background:var(--accent)}
  .chk .toggle .slider::before{content:"";position:absolute;width:18px;height:18px;left:2px;bottom:2px;background:#fff;border-radius:50%;transition:transform 0.25s;box-shadow:0 1px 3px rgba(0,0,0,0.2)}
  .chk .toggle input:checked+.slider::before{transform:translateX(18px)}

  .btn{width:100%;padding:10px 16px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s;margin-bottom:8px}
  .btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(16,185,129,0.3)}
  .btn:active{transform:translateY(0)}
  .btn-secondary{background:linear-gradient(135deg,#6b7280,#4b5563)}
  .btn-secondary:hover{box-shadow:0 4px 12px rgba(107,114,128,0.3)}

  /* INFO ROWS */

  /* FILE LIST */
  .file-list{max-height:200px;overflow-y:auto;border:1px solid var(--border);border-radius:6px;margin-bottom:10px}
  .file-item{padding:8px 12px;font-size:12px;cursor:pointer;border-bottom:1px solid var(--border);transition:background 0.15s;display:flex;align-items:center;gap:8px}
  .file-item:last-child{border-bottom:none}
  .file-item:hover{background:var(--sect-hover)}
  .file-item.active{background:var(--dim);color:var(--accent2);font-weight:600}
  .file-item .icon{font-size:14px}

  /* VIEWPORT */
  .viewport{flex:1;position:relative;background:var(--canvas-bg);touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;overflow:hidden}

  /* EXPAND BUTTONS */
  @keyframes expandPulse{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,0.5)}50%{box-shadow:0 0 0 10px rgba(16,185,129,0)}}
  .expand-btn{
    position:fixed;top:20px;width:auto;height:44px;padding:0 14px;gap:6px;
    background:linear-gradient(135deg,#10b981 0%,#059669 100%);border:2px solid #fff;border-radius:10px;
    color:#fff;font-size:13px;font-weight:700;z-index:9999;display:none;align-items:center;justify-content:center;
    cursor:pointer;transition:background 0.2s,transform 0.2s;
    box-shadow:0 4px 16px rgba(0,0,0,0.3);animation:expandPulse 2s ease-in-out infinite;
  }
  .expand-btn:hover{background:#059669;transform:scale(1.1);animation:none;box-shadow:0 6px 24px rgba(16,185,129,0.4)}
  .expand-btn-l{left:20px}

  /* TOOLBAR */
  .view-toolbar{position:absolute;top:20px;right:20px;display:flex;gap:6px;z-index:50;pointer-events:auto}
  .tb-group{display:flex;background:rgba(255,255,255,0.95);border-radius:8px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,0.15)}
  .tb-btn{
    width:36px;height:36px;background:none;border:none;border-right:1px solid #e5e7eb;
    color:#6b7280;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all 0.15s;
  }
  .tb-btn:last-child{border-right:none}
  .tb-btn:hover{background:#d1fae5;color:#059669}
  .tb-btn.active{background:#d1fae5;color:#059669}
  .tb-single{
    width:36px;height:36px;background:rgba(255,255,255,0.95);border:none;border-radius:8px;
    color:#6b7280;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all 0.15s;box-shadow:0 2px 10px rgba(0,0,0,0.15);
  }
  .tb-single:hover{background:#d1fae5;color:#059669}
  html[data-theme="dark"] .tb-group{background:rgba(30,41,59,0.95)}
  html[data-theme="dark"] .tb-btn{border-right-color:#334155;color:#94a3b8}
  html[data-theme="dark"] .tb-btn:hover,html[data-theme="dark"] .tb-btn.active{background:#1c3a4a;color:#34d399}
  html[data-theme="dark"] .tb-single{background:rgba(30,41,59,0.95);color:#94a3b8}
  html[data-theme="dark"] .tb-single:hover{background:#1c3a4a;color:#34d399}
  html[data-theme="dark"] .zoom-btn{background:rgba(30,41,59,0.95);color:#94a3b8}
  html[data-theme="dark"] .zoom-btn:hover{background:#1c3a4a;color:#34d399}

  /* VIEW DROPDOWN */
  .view-dd{position:relative}
  .view-dd-content{
    display:none;position:absolute;top:calc(100% + 6px);right:0;
    background:var(--panel);border-radius:10px;
    min-width:160px;z-index:200;overflow:hidden;max-height:70vh;overflow-y:auto;box-shadow:0 4px 20px rgba(0,0,0,0.2);
  }
  .view-dd.open .view-dd-content{display:block}
  .view-dd-content button{
    width:100%;padding:10px 14px;border:none;background:none;text-align:left;
    font-size:12px;font-family:inherit;color:var(--text);transition:background 0.15s;
  }
  .view-dd-content button:hover{background:#d1fae5;color:#059669}
  .view-dd-content .divider{height:1px;background:var(--border);margin:2px 0}

  /* ZOOM */
  .zoom-ctrl{position:absolute;bottom:20px;right:20px;display:flex;flex-direction:column;gap:3px;z-index:50}
  .zoom-btn{
    width:36px;height:36px;background:rgba(255,255,255,0.95);border:none;border-radius:8px;
    color:#374151;font-size:18px;font-weight:bold;display:flex;align-items:center;justify-content:center;
    transition:all 0.15s;box-shadow:0 2px 10px rgba(0,0,0,0.15);
  }
  .zoom-btn:hover{background:#d1fae5;color:#059669}
  .zoom-level{text-align:center;font-size:10px;color:rgba(255,255,255,0.7);padding:2px}

  /* VIEW LABEL */
  .view-label{
    position:absolute;top:20px;left:50%;transform:translateX(-50%);
    background:rgba(0,0,0,0.7);color:#fff;
    padding:6px 18px;border-radius:16px;font-size:11px;font-weight:500;z-index:50;backdrop-filter:blur(8px);pointer-events:none;
  }
  .vp-stats{
    position:absolute;top:16px;left:16px;z-index:50;
    background:rgba(0,0,0,0.72);backdrop-filter:blur(8px);
    border-radius:8px;padding:8px 12px;pointer-events:none;
    display:none;min-width:120px;
  }
  /* The box can be folded away and unfolded, and it does NOT move when it is:
     the header stays exactly where the whole box was, top-left of the viewport
     (user 2026-09-10). The box itself keeps pointer-events:none so the model can
     still be orbited through it; only the header takes clicks. */
  .vp-stats-hdr{
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    pointer-events:auto;cursor:pointer;user-select:none;
  }
  .vp-stats-ttl{font-size:9px;color:rgba(255,255,255,0.55);text-transform:uppercase;letter-spacing:0.6px}
  .vp-stats-caret{font-size:8px;color:rgba(255,255,255,0.55);line-height:1;transition:transform .15s}
  .vp-stats.collapsed .vp-stats-caret{transform:rotate(-90deg)}
  .vp-stats.collapsed .vp-stats-body{display:none}
  .vp-stats-body{margin-top:5px}
  .vp-stats-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
  .vp-stats-row+.vp-stats-row{margin-top:3px}
  .vp-stats-lbl{font-size:9px;color:rgba(255,255,255,0.6);text-transform:uppercase;letter-spacing:0.3px}
  .vp-stats-val{font-size:12px;color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
  .vp-stats-val.accent{color:#34d399}

  /* HOVER TOOLTIP */
  .pipe-tooltip{
    position:absolute;pointer-events:none;z-index:300;display:none;
    background:rgba(0,0,0,0.88);color:#fff;padding:8px 12px;border-radius:8px;
    font-size:11px;font-family:'SF Mono',Monaco,Consolas,monospace;
    backdrop-filter:blur(6px);box-shadow:0 4px 16px rgba(0,0,0,0.4);
    border:1px solid rgba(255,255,255,0.1);white-space:nowrap;
  }
  .pipe-tooltip .tt-name{font-weight:600;color:#10b981;margin-bottom:3px;font-size:12px}
  .pipe-tooltip .tt-row{display:flex;gap:10px;color:#d1d5db}
  .pipe-tooltip .tt-lbl{color:#9ca3af}
  .pipe-tooltip .tt-val{color:#fff;font-weight:500}
  .pipe-tooltip .tt-color{width:10px;height:10px;border-radius:2px;display:inline-block;vertical-align:middle;margin-right:4px}

  /* JUNCTION SUMMARY TABLE */
  .jsa.open{transform:rotate(90deg)}
  #juncSumTable table{width:100%;border-collapse:collapse;font-size:10px;color:#e2e8f0}
  #juncSumTable th{text-align:left;padding:4px 6px;color:#94a3b8;font-size:9px;text-transform:uppercase;letter-spacing:0.3px;border-bottom:1px solid rgba(255,255,255,0.1)}
  #juncSumTable th.num{text-align:right}
  #juncSumTable td{padding:3px 6px;border-bottom:1px solid rgba(255,255,255,0.04)}
  #juncSumTable td.num{text-align:right;font-variant-numeric:tabular-nums}
  #juncSumTable tr.sec-hdr td{color:#34d399;font-weight:600;padding-top:8px;font-size:10px;border-bottom:1px solid rgba(52,211,153,0.15)}
  #juncSumTable tr.totals td{font-weight:700;color:#f1f5f9;border-top:2px solid rgba(255,255,255,0.15);padding-top:6px}
  #juncSumTable .hw-tag{display:inline-block;padding:1px 5px;border-radius:3px;font-size:8px;margin-left:4px}
  #juncSumTable .hw-full{background:rgba(16,185,129,0.15);color:#6ee7b7}
  #juncSumTable .hw-half{background:rgba(99,102,241,0.15);color:#a5b4fc}
  #juncSumTable .hw-bolt{background:rgba(251,146,60,0.15);color:#fdba74}

  /* FRAME CLAMPS VIEW */
  #frameClampTable table{width:100%;border-collapse:collapse;font-size:10px;color:#e2e8f0}
  #frameClampTable th{text-align:left;padding:4px 6px;color:#94a3b8;font-size:9px;text-transform:uppercase;letter-spacing:0.3px;border-bottom:1px solid rgba(255,255,255,0.1)}
  #frameClampTable th.num{text-align:right}
  #frameClampTable td{padding:3px 6px;border-bottom:1px solid rgba(255,255,255,0.04)}
  #frameClampTable td.num{text-align:right;font-variant-numeric:tabular-nums}
  #frameClampTable .fc-type-hdr td{color:#38bdf8;font-weight:700;padding-top:10px;font-size:11px;border-bottom:1px solid rgba(56,189,248,0.2)}
  #frameClampTable .fc-sec-hdr td{color:#34d399;font-weight:600;padding-top:6px;font-size:10px;border-bottom:1px solid rgba(52,211,153,0.1)}
  #frameClampTable .fc-totals td{font-weight:700;color:#f1f5f9;border-top:2px solid rgba(255,255,255,0.15);padding-top:6px}
  #frameClampTable .fc-pipe{color:#94a3b8;font-size:9px}
  #frameClampTable .fc-size{display:inline-block;padding:1px 5px;border-radius:3px;font-size:8px;font-weight:600}
  #frameClampTable .fc-full{background:rgba(16,185,129,0.15);color:#6ee7b7}
  #frameClampTable .fc-half{background:rgba(99,102,241,0.15);color:#a5b4fc}

  /* JUNCTION DETAIL PANEL */
  #junctionPanel{
    position:absolute;display:none;z-index:310;
    background:rgba(15,23,42,0.95);color:#e2e8f0;
    padding:0;border-radius:12px;min-width:260px;max-width:320px;
    font-family:'SF Mono',Monaco,Consolas,monospace;font-size:11px;
    backdrop-filter:blur(12px);box-shadow:0 8px 32px rgba(0,0,0,0.5);
    border:1px solid rgba(255,255,255,0.12);
    pointer-events:auto;
  }
  #junctionPanel .jp-header{
    padding:10px 14px 8px;border-bottom:1px solid rgba(255,255,255,0.08);
    display:flex;align-items:center;gap:8px;
  }
  #junctionPanel .jp-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;box-shadow:0 0 6px currentColor}
  #junctionPanel .jp-title{font-weight:700;font-size:12px;color:#f1f5f9}
  #junctionPanel .jp-close{
    margin-left:auto;cursor:pointer;color:#64748b;font-size:16px;
    width:24px;height:24px;display:flex;align-items:center;justify-content:center;
    border-radius:6px;transition:all .15s;
  }
  #junctionPanel .jp-close:hover{background:rgba(255,255,255,0.1);color:#fff}
  #junctionPanel .jp-section{padding:8px 14px;border-bottom:1px solid rgba(255,255,255,0.06)}
  #junctionPanel .jp-section:last-child{border-bottom:none;padding-bottom:10px}
  #junctionPanel .jp-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:3px}
  #junctionPanel .jp-lbl{color:#64748b;font-size:10px;text-transform:uppercase;letter-spacing:0.3px}
  #junctionPanel .jp-val{color:#f1f5f9;font-weight:500}
  #junctionPanel .jp-hw-title{color:#94a3b8;font-size:10px;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px}
  #junctionPanel .jp-hw-item{
    display:flex;justify-content:space-between;align-items:center;
    padding:3px 0;color:#e2e8f0;
  }
  #junctionPanel .jp-hw-name{font-weight:500}
  #junctionPanel .jp-hw-size{color:#94a3b8;margin:0 8px}
  #junctionPanel .jp-hw-qty{color:#34d399;font-weight:600}
  #junctionPanel .jp-tags{display:flex;flex-wrap:wrap;gap:4px;padding:6px 14px 10px}
  #junctionPanel .jp-tag{
    background:rgba(255,255,255,0.06);color:#94a3b8;padding:2px 8px;
    border-radius:4px;font-size:10px;
  }
  /* Junction panel — edit mode */
  #junctionPanel .jp-edit-btn{
    margin-left:4px;cursor:pointer;color:#94a3b8;font-size:11px;
    padding:2px 8px;border-radius:4px;border:1px solid rgba(255,255,255,0.12);
    background:rgba(255,255,255,0.06);transition:all .15s;
  }
  #junctionPanel .jp-edit-btn:hover{background:rgba(16,185,129,0.15);color:#34d399;border-color:#34d399}
  #junctionPanel .jp-override-badge{
    display:inline-block;padding:1px 6px;border-radius:3px;font-size:8px;font-weight:600;
    background:rgba(234,179,8,0.2);color:#facc15;letter-spacing:0.3px;margin-left:6px;
  }
  #junctionPanel .jp-hw-edit-row{
    display:flex;align-items:center;gap:4px;margin-bottom:4px;padding:3px 0;
  }
  #junctionPanel .jp-hw-edit-row select{
    padding:3px 4px;font-size:10px;border:1px solid rgba(255,255,255,0.15);
    border-radius:3px;background:rgba(255,255,255,0.08);color:#e2e8f0;
    cursor:pointer;outline:none;
  }
  #junctionPanel .jp-hw-edit-row select:focus{border-color:#34d399}
  #junctionPanel .jp-hw-edit-row .jp-hw-rm{
    cursor:pointer;color:#64748b;font-size:14px;padding:0 4px;transition:color .15s;
  }
  #junctionPanel .jp-hw-edit-row .jp-hw-rm:hover{color:#ef4444}
  #junctionPanel .jp-add-hw{
    color:#34d399;cursor:pointer;font-size:10px;font-weight:600;
    display:inline-flex;align-items:center;gap:3px;margin-top:2px;transition:color .15s;
  }
  #junctionPanel .jp-add-hw:hover{color:#6ee7b7}
  #junctionPanel .jp-scope{padding:8px 14px;border-top:1px solid rgba(255,255,255,0.06)}
  #junctionPanel .jp-scope-title{color:#94a3b8;font-size:9px;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px}
  #junctionPanel .jp-scope label{
    display:flex;align-items:center;gap:6px;padding:3px 0;cursor:pointer;
    color:#cbd5e1;font-size:10px;transition:color .15s;
  }
  #junctionPanel .jp-scope label:hover{color:#f1f5f9}
  #junctionPanel .jp-scope input[type="radio"]{accent-color:#10b981;margin:0}
  #junctionPanel .jp-scope select{
    padding:2px 4px;font-size:9px;border:1px solid rgba(255,255,255,0.12);
    border-radius:3px;background:rgba(255,255,255,0.06);color:#cbd5e1;outline:none;
  }
  #junctionPanel .jp-scope select:focus{border-color:#34d399}
  #junctionPanel .jp-actions{
    display:flex;justify-content:flex-end;gap:6px;padding:8px 14px;
    border-top:1px solid rgba(255,255,255,0.06);
  }
  #junctionPanel .jp-btn{
    padding:4px 12px;border:none;border-radius:4px;font-size:10px;font-weight:600;
    cursor:pointer;transition:all .15s;
  }
  #junctionPanel .jp-btn-save{background:#10b981;color:#fff}
  #junctionPanel .jp-btn-save:hover{background:#059669}
  #junctionPanel .jp-btn-cancel{background:rgba(255,255,255,0.08);color:#94a3b8}
  #junctionPanel .jp-btn-cancel:hover{background:rgba(255,255,255,0.12);color:#e2e8f0}
  /* Override indicator on Show Junctions row */
  .jp-override-count{
    display:inline-block;padding:1px 6px;border-radius:10px;font-size:9px;font-weight:600;
    background:rgba(234,179,8,0.15);color:#eab308;margin-left:4px;cursor:pointer;
    transition:all .15s;
  }
  .jp-override-count:hover{background:rgba(234,179,8,0.3)}

  /* COLLAPSIBLE CONFIG GROUPS */
  .cfg-groups{padding:0}
  .cfg-g{border-bottom:1px solid var(--border)}
  .cfg-g-hdr{
    display:flex;align-items:center;gap:6px;padding:8px 12px;
    font-size:11px;font-weight:600;color:var(--cfg-hdr-text);cursor:pointer;
    background:var(--surface1);user-select:none;transition:background 0.15s;
  }
  .cfg-g-hdr:hover{background:var(--surface2)}
  .cfg-arr{font-size:8px;color:var(--muted);transition:transform 0.2s;display:inline-block}
  .cfg-arr.open{transform:rotate(90deg)}
  .cfg-g-body{padding:4px 12px 8px}
  .cfg-g-body.collapsed{display:none}
  .cfg-row{
    display:flex;align-items:center;gap:6px;padding:3px 0;
    font-size:11px;color:var(--panel-mid);
  }
  .cfg-row>label{flex:0 0 80px;font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cfg-row input[type="number"],.cfg-row input[type="text"]{
    width:56px;padding:4px 6px;border:1px solid var(--dialog-border);border-radius:4px;
    font-size:11px;color:var(--panel-strong);background:var(--input-bg);text-align:center;
    -moz-appearance:textfield;
  }
  .cfg-row input[type="number"]::-webkit-outer-spin-button,
  .cfg-row input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  .cfg-row input:focus,.cfg-row select:focus{outline:none;border-color:#10b981;box-shadow:0 0 0 2px rgba(16,185,129,0.1)}
  .cfg-row select{
    padding:4px 6px;border:1px solid var(--dialog-border);border-radius:4px;
    font-size:11px;color:var(--panel-strong);background:var(--input-bg);flex:0 0 auto;
  }
  .cfg-row input[type="checkbox"]{width:14px;height:14px;accent-color:#10b981;flex-shrink:0}
  .cfg-row input[type="range"]{flex:1;height:4px;accent-color:#10b981}
  .cfg-u{font-size:9px;color:var(--muted);flex-shrink:0;min-width:12px}

  /* RESPONSIVE — mobile keeps the DESKTOP side-by-side layout (sidebar + 3D), it
     just NARROWS the sidebar so the 3D gets more room (user: "sidebar haju small").
     The old rule turned the sidebar into a full-screen overlay; that plus the fixed
     viewport is what broke the 3D. Collapse (‹) still slides it fully away for a
     full-width 3D. */
  @media(max-width:900px){
    :root{ --panel-w:200px; }
    .lpanel-hdr .logo{ font-size:13px; }
    .expand-btn{width:44px;height:44px;font-size:18px}
  }
  @media(max-width:560px){
    :root{ --panel-w:172px; }
  }
  @media(max-width:480px){
    .view-toolbar{top:12px;right:12px;gap:4px}
    .tb-btn,.tb-single{width:32px;height:32px;font-size:12px}
    .zoom-ctrl{bottom:12px;right:12px}
    .zoom-btn{width:32px;height:32px;font-size:16px}
  }