:root {
    --bg: #0f0f0f;
    --bg2: #161616;
    --bg3: #1e1e1e;
    --bg4: #242424;
    --border: rgba(255,255,255,0.07);
    --border2: rgba(255,255,255,0.12);
    --text: #f0f0ee;
    --text2: #888;
    --text3: #444;
    --accent: #d4f062;
    --accent2: #a8c040;
    --accent-dim: rgba(212,240,98,0.10);
    --red: #ef4444;
    --orange: #f97316;
    --green: #22c55e;
    --yellow: #eab308;
    --blue: #3b82f6;
    --teal: #14b8a6;
    --radius: 6px;
    --radius-lg: 10px;
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  body { background: var(--bg); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 13px; min-height: 100vh; overflow:hidden; }

  header.topbar {
    min-height: 58px; height: 58px;
    background:
      linear-gradient(90deg, #07162b 0%, #0a1b34 48%, #0a1628 100%);
    border-bottom: 1px solid rgba(120,160,210,0.18);
    padding: 0 18px 0 0;
    display: flex; align-items: center; gap: 14px;
    overflow: hidden;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.035), 0 1px 0 rgba(0,0,0,0.35);
  }
  .topbar-logo-wrap {
    height: 58px; width: min(405px, 31vw); min-width: 355px;
    display:flex; align-items:center; overflow:hidden; flex-shrink:0;
    position:relative;
    background:#07162b;
  }
  .topbar-logo-wrap::after {
    content:''; position:absolute; top:0; right:0; bottom:0; width:34%; pointer-events:none;
    background:linear-gradient(90deg, rgba(7,22,43,0) 0%, rgba(8,24,46,0.50) 48%, #0a1b34 100%);
  }
  .topbar-logo-img {
    height: 58px; width: auto; display:block; flex-shrink:0;
    -webkit-mask-image: linear-gradient(to right, black 0%, black 66%, rgba(0,0,0,0.65) 80%, transparent 100%);
    mask-image: linear-gradient(to right, black 0%, black 66%, rgba(0,0,0,0.65) 80%, transparent 100%);
  }
  .header-sub {
    color: rgba(232,238,252,0.68); font-size: 11px; letter-spacing:0.02em;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
    margin-left: -4px;
  }
  .header-right { margin-left: auto; display: flex; gap: 8px; align-items:center; flex-shrink:0; }
  .header-bom-tools {
    display:flex; align-items:center; gap:6px;
    background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.12);
    border-radius:var(--radius); padding:4px 8px;
  }
  .header-bom-label { font-size:10px;color:rgba(232,238,252,0.42);font-weight:700;letter-spacing:0.08em;text-transform:uppercase; }

  .app { display: grid; grid-template-columns: 290px 1fr 310px; height: calc(100vh - 58px); transition: grid-template-columns 0.18s ease; }
  .app.right-collapsed { grid-template-columns: 290px minmax(0,1fr) 42px; }
  .app.right-expanded { grid-template-columns: 290px minmax(0,1fr) 310px; }

  .panel { background: var(--bg2); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
  .panel-title {
    font-size: 10px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase;
    color: var(--text3); padding: 9px 14px 8px; border-bottom: 1px solid var(--border);
    background: var(--bg3);
  }
  .panel-title { color: rgba(232,238,252,0.52); }
  .panel-body { flex: 1; overflow-y: auto; padding: 12px 14px; }
  .panel-body::-webkit-scrollbar { width: 4px; }
  .panel-body::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }

  .right-panel { border-right: none; border-left: 1px solid var(--border); position: relative; transition: width 0.18s ease; }
  .right-panel .panel-title { display:flex; align-items:center; justify-content:space-between; gap:8px; color: var(--text2); }
  .right-toggle {
    flex-shrink:0; width:24px; height:24px; padding:0; display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--border2); border-radius:var(--radius); background:var(--bg2); color:var(--accent); cursor:pointer; font-size:13px;
  }
  .right-toggle:hover { background:var(--accent-dim); border-color:var(--accent); }
  .right-title-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color: var(--text2); font-weight:700; }
  .app.right-collapsed .right-panel { overflow:visible; }
  .app.right-collapsed .right-panel .panel-body { display:none; }
  .app.right-collapsed .right-panel .panel-title {
    height:100%; padding:10px 7px; align-items:center; justify-content:flex-start; flex-direction:column; border-bottom:none; cursor:pointer;
  }
  .app.right-collapsed .right-panel .right-title-text {
    writing-mode:vertical-rl; transform:rotate(180deg); letter-spacing:0.08em; white-space:nowrap; margin-top:4px;
    color: var(--text2); font-weight:700;
  }
  .app.right-collapsed .right-panel .right-toggle { width:26px; height:26px; }
  .app.right-collapsed .right-panel .rates-btn-expanded { display:none; }
  .rates-btn-collapsed { display:none; writing-mode:vertical-rl; transform:rotate(180deg); font-size:10px; color:var(--text3); letter-spacing:0.06em; cursor:pointer; margin-top:6px; padding:4px 0; white-space:nowrap; background:none; border:none; }
  .rates-btn-collapsed:hover { color:var(--accent); }
  .app.right-collapsed .right-panel .rates-btn-collapsed { display:block; }
  .centre { display: flex; flex-direction: column; overflow: hidden; }

  .diagram-area {
    background: var(--bg3); border-bottom: 1px solid var(--border);
    flex: 0 0 400px; display: flex; flex-direction: column; overflow: hidden;
    min-height: 120px;
  }

  /* ── Resize handle between diagram and BOM ── */
  .resize-handle {
    flex-shrink: 0; height: 6px; cursor: ns-resize;
    background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.12s; user-select: none; position: relative; z-index: 10;
  }
  .resize-handle:hover, .resize-handle.dragging { background: var(--accent-dim); border-color: rgba(212,240,98,0.3); }
  .resize-handle::after {
    content: ''; display: block; width: 32px; height: 2px;
    background: var(--border2); border-radius: 2px;
  }
  .resize-handle:hover::after, .resize-handle.dragging::after { background: var(--accent); }
  .diagram-toolbar {
    display: flex; align-items: center; gap: 0; border-bottom: 1px solid var(--border);
    background: var(--bg2); flex-shrink: 0; padding: 0 4px;
  }
  .dtab {
    padding: 7px 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
    color: var(--text2); cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.12s;
  }
  .dtab.active { color: var(--text); border-bottom-color: var(--accent); }
  .diagram-pane {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 12px; position: relative; overflow: hidden;
  }
  .pane-label {
    position: absolute; top: 7px; left: 10px;
    font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3);
  }
  #frame-svg { width: 100%; height: 100%; }

  /* ── All drawing views overview ─────────────────────────── */
  .all-views-grid {
    width: 100%; height: 100%; min-height: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 4px;
  }
  .all-view-card {
    min-width: 0; min-height: 0; position: relative; overflow: hidden;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: rgba(15,15,15,0.18); display: flex; align-items: center; justify-content: center;
  }
  .all-view-title {
    position: absolute; top: 5px; left: 7px; z-index: 2;
    font-size: 9px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text3); pointer-events: none;
  }
  .all-view-card svg { width: 100%; height: 100%; display: block; cursor: grab; }
  .all-view-card:hover { border-color: rgba(212,240,98,0.20); }
  .all-view-help {
    position: absolute; right: 7px; top: 5px; z-index: 2;
    font-size: 8px; color: var(--text3); pointer-events: none;
    letter-spacing: 0.03em;
  }

  .diagram-info {
    width: 140px; padding: 10px; border-left: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 7px; flex-shrink: 0;
  }
  .stat-box { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 7px 10px; }
  .stat-box .lbl { font-size: 9px; color: var(--text2); margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.06em; }
  .stat-box .val { font-size: 18px; font-weight: 600; font-family: 'DM Mono', monospace; }
  .stat-box .unit { font-size: 10px; color: var(--text2); }

  .bom-area { flex: 1; min-height: 80px; display: flex; flex-direction: column; overflow: hidden; }
  .tabs { display: flex; gap: 0; background: var(--bg3); padding: 0 14px; border-bottom: 1px solid var(--border); }
  .tab { padding: 7px 14px; font-size: 12px; cursor: pointer; color: var(--text2); border-bottom: 2px solid transparent; transition: color 0.12s; }
  .tab.active { color: var(--text); border-bottom-color: var(--accent); }
  .tab-panel { display: none; }
  .tab-panel.active { display: block; }

  table { width: 100%; border-collapse: collapse; }
  thead th {
    background: var(--bg3); color: var(--text2); font-size: 10px; font-weight: 600;
    letter-spacing: 0.05em; text-transform: uppercase; padding: 7px 10px;
    border-bottom: 1px solid var(--border); white-space: nowrap; text-align: left;
    position: sticky; top: 0; z-index: 1;
  }
  tbody td { padding: 6px 10px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; }
  tbody tr:hover td { background: var(--bg3); }
  tbody tr:last-child td { border-bottom: none; }
  .total-row td { background: var(--bg3); font-weight: 600; border-top: 1px solid var(--border2); }
  .bom-frame-row td {
    background: rgba(212,240,98,0.055);
    border-top: 1px solid rgba(212,240,98,0.20);
    border-bottom: 1px solid rgba(212,240,98,0.10);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 7px 10px;
  }
  .bom-frame-row.preview td { color: var(--text2); background: rgba(255,255,255,0.035); border-top-color: var(--border2); }
  .bom-frame-title { display:flex; align-items:center; gap:8px; justify-content:space-between; }
  .bom-frame-sub { color: var(--text2); font-weight:500; letter-spacing:0; text-transform:none; font-size:10px; }
  .bom-frame-actions { display:flex; align-items:center; gap:6px; }
  .bom-frame-actions .btn { padding:2px 7px; font-size:10px; }
  .bom-frame-row.just-added td { animation: bomGroupFlash 1.8s ease-out 1; }
  @keyframes bomGroupFlash {
    0% { background: rgba(212,240,98,0.22); }
    100% { background: rgba(212,240,98,0.055); }
  }

  /* Form elements */
  .field { margin-bottom: 9px; }
  .field label { display: block; font-size: 11px; color: var(--text2); margin-bottom: 3px; }
  input[type=number], input[type=text], select {
    background: var(--bg3); border: 1px solid var(--border2); color: var(--text);
    padding: 5px 8px; border-radius: var(--radius); font-size: 12px; width: 100%;
    outline: none; transition: border-color 0.15s; font-family: 'DM Mono', monospace;
  }
  input:focus, select:focus { border-color: var(--accent); }
  .field-row { display: flex; gap: 8px; }
  .field-row .field { flex: 1; margin-bottom: 0; }

  .inp-red input    { border-color: rgba(239,68,68,0.4); }
  .inp-red input:focus { border-color: var(--red); }
  .inp-orange input { border-color: rgba(249,115,22,0.4); }
  .inp-orange input:focus { border-color: var(--orange); }
  .inp-green input  { border-color: rgba(34,197,94,0.4); }
  .inp-green input:focus { border-color: var(--green); }
  .inp-accent input { border-color: rgba(212,240,98,0.4); }
  .inp-accent input:focus { border-color: var(--accent); }

  .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
  .dot-red { background: var(--red); } .dot-orange { background: var(--orange); }
  .dot-green { background: var(--green); } .dot-accent { background: var(--accent); }

  /* Buttons */
  .btn {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    font-size: 12px; padding: 5px 12px; border-radius: var(--radius);
    border: 1px solid var(--border2); background: var(--bg3); color: var(--text);
    transition: background 0.12s; font-family: 'DM Sans', sans-serif;
  }
  .btn:hover { background: var(--bg4); border-color: var(--border2); }
  .btn-primary { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
  .btn-primary:hover { background: rgba(212,240,98,0.18); }
  header.topbar .btn { background:rgba(255,255,255,0.045); border-color:rgba(255,255,255,0.14); color:rgba(240,240,238,0.90); height:32px; }
  header.topbar .btn:hover { background:rgba(255,255,255,0.075); border-color:rgba(212,240,98,0.34); color:var(--text); }
  header.topbar .btn-primary { background:rgba(212,240,98,0.10); border-color:var(--accent); color:var(--accent); box-shadow:0 0 0 1px rgba(0,0,0,0.25) inset; }
  header.topbar .btn-primary:hover { background:rgba(212,240,98,0.18); }
  .btn-danger { color: #f87171; }
  .btn-danger:hover { background: rgba(239,68,68,0.1); }
  .btn-sm { padding: 3px 8px; font-size: 11px; }

  /* Frame type cards */
  .frame-types { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
  .ft-card {
    display: flex; flex-direction: row; align-items: center; gap: 10px;
    border: 1px solid var(--border2); border-radius: var(--radius); padding: 7px 10px;
    cursor: pointer; transition: border-color 0.12s, background 0.12s; width: 100%;
  }
  .ft-card:hover { background: var(--bg3); }
  .ft-card.active { border-color: var(--accent); background: var(--accent-dim); }
  .ft-card h4 { font-size: 12px; font-weight: 600; margin-bottom: 1px; }
  .ft-card p { font-size: 10px; color: var(--text2); line-height: 1.3; margin: 0; }
  .ft-icon { font-size: 18px; flex-shrink: 0; width: 24px; text-align: center; }

  /* Section library */
  .section-list { display: flex; flex-direction: column; gap: 4px; }
  .sec-item {
    display: flex; align-items: center; gap: 8px; padding: 5px 8px;
    border-radius: var(--radius); background: var(--bg3); border: 1px solid var(--border);
    cursor: pointer;
  }
  .sec-item .code { font-size: 11px; font-weight: 600; color: var(--accent); min-width: 90px; font-family: 'DM Mono', monospace; }
  .sec-item .kgm { font-size: 11px; color: var(--text2); margin-left: auto; font-family: 'DM Mono', monospace; }
  .sec-badge { font-size: 10px; padding: 1px 6px; border-radius: 3px; font-weight: 600; background: rgba(59,130,246,0.12); color: #93c5fd; }
  .sec-badge.alum { background: rgba(34,197,94,0.12); color: #86efac; }
  .sec-badge.plate { background: rgba(234,179,8,0.12); color: #fde047; }

  .divider { height: 1px; background: var(--border); margin: 11px 0; }
  .tip { font-size: 11px; color: var(--text2); background: rgba(212,240,98,0.05); border: 1px solid rgba(212,240,98,0.12); border-radius: var(--radius); padding: 7px 10px; margin-bottom: 10px; }

  .summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
  .sum-box { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; }
  .sum-box .s-val { font-size: 17px; font-weight: 600; font-family: 'DM Mono', monospace; }
  .sum-box .s-lbl { font-size: 10px; color: var(--text2); margin-top: 1px; }
  .sum-box.accent { border-color: rgba(212,240,98,0.3); }
  .s-val.red { color: var(--red); } .s-val.green { color: var(--green); }
  .s-val.orange { color: var(--orange); } .s-val.blue { color: #60a5fa; }
  .s-val.accent-clr { color: var(--accent); }

  .badge { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 3px; font-family: 'DM Mono', monospace; }
  .badge-steel { background: rgba(59,130,246,0.12); color: #93c5fd; }
  .badge-alum  { background: rgba(34,197,94,0.12); color: #86efac; }
  .badge-plate { background: rgba(234,179,8,0.12); color: #fde047; }

  .cut-bar { height: 20px; background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; position: relative; overflow: hidden; margin-bottom: 3px; }
  .cut-seg { height: 100%; position: absolute; top: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; color: rgba(255,255,255,0.7); }
  .cut-waste { height: 100%; position: absolute; top: 0; background: rgba(239,68,68,0.15); }

  /* Brace position sub-inputs */
  .brace-pos-row { display: flex; align-items: center; gap: 6px; padding: 4px 0 4px 18px; border-bottom: 1px solid var(--border); }
  .brace-pos-row:last-child { border-bottom: none; }
  .brace-pos-label { font-size: 11px; color: var(--text3); min-width: 60px; }
  .brace-pos-row input { width: 70px; padding: 3px 6px; font-size: 11px; }

  /* ── CONFIG TABS (pylon sub-tabs) ── */
  .cfg-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 12px; margin-top: 4px; }
  .cfg-tab {
    flex: 1; padding: 6px 4px; font-size: 10px; font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase; text-align: center; color: rgba(240,240,238,0.46);
    cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.12s, background 0.12s;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .cfg-tab:hover { color: rgba(240,240,238,0.70); background: rgba(255,255,255,0.025); }
  .cfg-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
  .cfg-tab-panel { display: none; }
  .cfg-tab-panel.active { display: block; }

  #toast {
    position: fixed; bottom: 20px; right: 20px;
    background: var(--accent); color: #0f0f0f; padding: 8px 16px;
    border-radius: var(--radius); font-size: 13px; font-weight: 600;
    opacity: 0; transform: translateY(8px); transition: all 0.18s; pointer-events: none; z-index: 999;
  }
  #toast.show { opacity: 1; transform: translateY(0); }

  .bom-scroll { flex: 1; overflow-y: auto; }
  .bom-scroll::-webkit-scrollbar { width: 4px; }
  .bom-scroll::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }

  /* ── Material filter pills ──────────────────────────────── */
  .frame-mat-sel {
    display:flex; align-items:center; gap:6px; padding:6px 8px 8px;
    border-bottom:1px solid var(--border); margin-bottom:8px;
  }
  .frame-mat-sel label { font-size:10px; color:var(--text3); flex-shrink:0; }
  .frame-mat-btn {
    font-size:11px; padding:3px 10px; border-radius:10px; cursor:pointer;
    border:1px solid var(--border2); color:var(--text3); background:var(--bg2);
    transition:all 0.12s; user-select:none;
  }
  .frame-mat-btn:hover { border-color:var(--text2); color:var(--text2); }
  .frame-mat-btn.active { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); font-weight:600; }
  .mat-pills { display:flex; gap:4px; margin-bottom:5px; flex-wrap:wrap; }
  .mat-pill {
    font-size:10px; padding:2px 8px; border-radius:10px; cursor:pointer;
    border:1px solid var(--border2); color:var(--text3); background:var(--bg2);
    transition:all 0.12s; user-select:none;
  }
  .mat-pill:hover { border-color:var(--text2); color:var(--text2); }
  .mat-pill.active { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }

  /* ── Custom Section Picker ─────────────────────────────── */
  .sec-picker { position:relative; width:100%; font-size:11px; }
  .sec-trigger {
    display:flex; align-items:center; justify-content:space-between;
    background:var(--bg2); border:1px solid var(--border2); border-radius:var(--radius);
    padding:5px 8px; cursor:pointer; user-select:none; min-height:28px;
    transition:border-color 0.12s;
  }
  .sec-trigger:hover { border-color:var(--accent); }
  .sec-trigger .sec-val { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text1); }
  .sec-trigger .sec-arr { color:var(--text3); font-size:9px; margin-left:6px; transition:transform 0.15s; }
  .sec-trigger.open .sec-arr { transform:rotate(180deg); }
  .sec-panel {
    display:none; position:absolute; z-index:200; left:0; right:0; top:calc(100% + 3px);
    background:#1a1f2e; border:1px solid var(--border2); border-radius:var(--radius);
    box-shadow:0 8px 32px rgba(0,0,0,0.85); max-height:320px; overflow-y:auto;
  }
  .sec-panel.open { display:block; }
  .sec-mat {
    padding:5px 8px 3px; font-size:10px; font-weight:700; letter-spacing:0.06em;
    text-transform:uppercase; color:var(--accent); cursor:pointer;
    display:flex; align-items:center; gap:5px; user-select:none;
    border-top:1px solid var(--border); background:#1a1f2e;
  }
  .sec-mat:first-child { border-top:none; }
  .sec-mat .sec-arr2 { font-size:8px; color:var(--text3); transition:transform 0.15s; }
  .sec-mat.open .sec-arr2 { transform:rotate(90deg); }
  .sec-prod {
    padding:3px 8px 2px 20px; font-size:10px; font-weight:600; color:var(--text2);
    cursor:pointer; display:flex; align-items:center; gap:5px; user-select:none;
    background:#1a1f2e;
  }
  .sec-prod .sec-arr2 { font-size:8px; color:var(--text3); transition:transform 0.15s; }
  .sec-prod.open .sec-arr2 { transform:rotate(90deg); }
  .sec-items { display:none; }
  .sec-item {
    padding:4px 10px 4px 32px; cursor:pointer; font-size:11px; color:var(--text2);
    display:flex; justify-content:space-between; gap:8px;
    background:#1a1f2e; transition:background 0.08s;
  }
  .sec-item:hover { background:#252d42; color:var(--text1); }
  .sec-item.selected { background:var(--accent-dim); color:var(--accent); }
  .sec-item .sec-kg { color:var(--text3); font-size:10px; flex-shrink:0; }

  /* ── Section Library styles (in modal) ── */
  .sec-modal-layout{display:flex;flex:1;overflow:hidden;min-height:0}
  .sec-nav{width:128px;flex-shrink:0;background:var(--bg3);border-right:1px solid var(--border);overflow-y:auto;display:flex;flex-direction:column}
  .sec-nav-mat{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);padding:8px 10px 3px;display:flex;align-items:center;justify-content:space-between}
  .sec-nav-mat-del{background:none;border:none;color:transparent;cursor:pointer;font-size:11px;padding:0 2px;line-height:1}
  .sec-nav-mat:hover .sec-nav-mat-del,.sec-nav-btn:hover .sec-nav-btn-del{color:var(--text3)}
  .sec-nav-mat-del:hover,.sec-nav-btn-del:hover{color:#ef4444!important}
  .sec-nav-btn{padding:4px 10px 4px 12px;font-size:11px;cursor:pointer;color:var(--text2);border-left:2px solid transparent;display:flex;align-items:center;justify-content:space-between;transition:color .1s;user-select:none;overflow:hidden}
  .sec-nav-btn:hover{color:var(--text);background:var(--bg4)}
  .sec-nav-btn.active{color:var(--accent);border-left-color:var(--accent);background:var(--accent-dim);font-weight:600}
  .sec-nav-btn-del{background:none;border:none;color:transparent;cursor:pointer;font-size:11px;padding:0 2px;flex-shrink:0;line-height:1}
  .sec-grid-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
  .sec-grid-info{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);padding:6px 12px;background:var(--bg3);border-bottom:1px solid var(--border);display:flex;align-items:center;flex-shrink:0}
  .sec-grid-scroll{flex:1;overflow-y:auto}
  .sec-grid-scroll::-webkit-scrollbar{width:4px}
  .sec-grid-scroll::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}
  .sec-grid{display:grid;grid-template-columns:28px 1fr 66px 78px 76px 86px 32px;width:100%}
  .sec-grid>.hdr{display:contents}
  .sec-grid>.hdr>div{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);padding:5px 6px;border-bottom:2px solid var(--border2);background:var(--bg3);position:sticky;top:0;z-index:1;user-select:none}
  .sec-grid>.hdr>div:nth-child(n+3){text-align:right}
  .sec-grid>.row{display:contents}
  .sec-grid>.row>div{padding:0;border-bottom:1px solid var(--border);display:flex;align-items:center;background:var(--bg2);min-height:29px}
  .sec-grid>.row:hover>div{background:rgba(255,255,255,0.023)}
  .sec-cell-num{justify-content:center;font-size:10px;color:var(--text3);user-select:none}
  .sec-cell-desc{padding:0 6px;font-size:11px;color:var(--text);font-family:'DM Mono',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sec-cell-del{justify-content:center}
  .sec-inp{width:100%;background:transparent;border:none;color:var(--text);font-family:'DM Mono',monospace;font-size:11px;padding:4px 6px;outline:none;text-align:right}
  .sec-inp:focus{background:rgba(212,240,98,0.07)}
  .sec-inp::placeholder{color:var(--text3)}
  .sec-del-btn{background:none;border:none;color:transparent;cursor:pointer;font-size:13px;padding:2px 5px;border-radius:3px}
  .sec-grid>.row:hover .sec-del-btn{color:var(--text3)}
  .sec-del-btn:hover{color:#ef4444!important;background:rgba(239,68,68,.1)}
  .sec-add-bar{display:flex;gap:5px;align-items:center;padding:6px 10px;border-top:1px solid var(--border2);background:var(--bg3);flex-shrink:0}
  .sec-add-bar input,.sec-add-bar select{font-size:11px}
  .sec-add-sep{height:24px;width:1px;background:var(--border2);flex-shrink:0}

  /* ── Unified Sections & Costs modal ── */
  .cost-modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:1000;align-items:center;justify-content:center}
  .cost-modal-backdrop.open{display:flex}
  .cost-modal{background:var(--bg2);border:1px solid var(--border2);border-radius:8px;width:min(1120px,98vw);max-height:94vh;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.65);overflow:hidden}
  .cost-modal-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--bg3);flex-shrink:0}
  .cost-modal-head h2{font-size:13px;font-weight:700;color:var(--text);margin:0;flex:1}
  .cost-modal-close{background:none;border:1px solid var(--border2);color:var(--text2);width:26px;height:26px;border-radius:4px;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .cost-modal-close:hover{background:var(--bg4);color:var(--text)}
  .modal-tab-bar{display:flex;background:var(--bg3);border-bottom:1px solid var(--border);flex-shrink:0}
  .modal-tab{padding:7px 16px;font-size:12px;cursor:pointer;color:var(--text2);border-bottom:2px solid transparent;transition:color .12s;user-select:none}
  .modal-tab:hover{color:var(--text)}
  .modal-tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
  .modal-tab-panel{display:none;flex:1;flex-direction:column;overflow:hidden;min-height:0}
  .modal-tab-panel.active{display:flex}
  .diagnostics-body{flex:1;overflow-y:auto;padding:16px;display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:14px;align-content:start}
  .diag-card{background:var(--bg3);border:1px solid var(--border);border-radius:6px;overflow:hidden}
  .diag-card-head{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);padding:7px 12px 5px;border-bottom:1px solid var(--border)}
  .diag-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:6px 12px;border-bottom:1px solid var(--border);font-size:12px}
  .diag-row:last-child{border-bottom:none}
  .diag-label{color:var(--text2)}
  .diag-val{font-family:'DM Mono',monospace;color:var(--text);text-align:right;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .diag-val.good{color:var(--green)}
  .diag-val.warn{color:var(--orange)}
  .diag-note{font-size:11px;color:var(--text3);line-height:1.55;padding:9px 12px}
  @media(max-width:760px){.diagnostics-body{grid-template-columns:1fr}}
  .costs-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
  .cost-group{background:var(--bg3);border:1px solid var(--border);border-radius:6px;overflow:hidden;width:320px}
  .cost-group-head{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);padding:7px 12px 5px;border-bottom:1px solid var(--border)}
  .cost-group-rows{padding:6px 0;display:flex;flex-direction:column}
  .cost-group-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:5px 12px}
  .cost-group-row:not(:last-child){border-bottom:1px solid var(--border)}
  .cost-group-row label{font-size:12px;color:var(--text);white-space:nowrap}
  .cost-note{font-size:10px;color:var(--text3);line-height:1.45;padding:7px 12px;border-top:1px solid var(--border)}
  .cost-hint{font-size:10px;color:var(--text3);margin-top:1px}
  .cost-num-inp{width:72px;font-family:'DM Mono',monospace;font-size:12px;text-align:right;background:var(--bg2);border:1px solid var(--border2);color:var(--text);border-radius:4px;padding:3px 6px}
  .cost-num-inp:focus{border-color:var(--accent);outline:none}
  .cost-curr-inp{width:38px;font-family:'DM Mono',monospace;font-size:12px;text-align:center;background:var(--bg2);border:1px solid var(--border2);color:var(--text);border-radius:4px;padding:3px 6px}
  .cost-select{width:112px;font-family:'DM Sans',sans-serif;font-size:12px;background:var(--bg2);border:1px solid var(--border2);color:var(--text);border-radius:4px;padding:3px 6px}
  .cost-note{font-size:10px;color:var(--text3);line-height:1.5;margin:4px 12px 8px;padding:7px 9px;background:rgba(212,240,98,0.045);border:1px solid rgba(212,240,98,0.10);border-radius:4px}
  .cost-modal-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 14px;border-top:1px solid var(--border);background:var(--bg3);flex-shrink:0}

  /* ── Cost card (right panel summary) ── */
  .cost-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:9px 11px;margin-bottom:10px}
  .cost-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
  .cost-card-title{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text3)}
  .cost-card-edit{font-size:10px;background:none;border:1px solid var(--border2);color:var(--text2);border-radius:3px;padding:2px 7px;cursor:pointer}
  .cost-card-edit:hover{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}
  .cost-card-row{display:flex;justify-content:space-between;padding:2px 0;font-size:12px}
  .cost-card-row .cost-label{color:var(--text2)}
  .cost-card-row .cost-val{font-family:'DM Mono',monospace;font-weight:600}
  .cost-card-total{display:flex;justify-content:space-between;padding:5px 0 2px;border-top:1px solid var(--border);margin-top:4px;font-size:13px;font-weight:700}
  .cost-card-total .cost-val{color:var(--accent)}
  .warning-card{background:rgba(249,115,22,0.055);border:1px solid rgba(249,115,22,0.24);border-radius:var(--radius);padding:9px 11px;margin-bottom:10px;display:none}
  .warning-card.visible{display:block}
  .warning-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
  .warning-card-title{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#fdba74}
  .warning-card-count{font-family:'DM Mono',monospace;font-size:10px;color:var(--text2)}
  .warning-list{display:flex;flex-direction:column;gap:6px}
  .warning-item{border-top:1px solid rgba(255,255,255,.07);padding-top:6px}
  .warning-item:first-child{border-top:none;padding-top:0}
  .warning-item-title{font-size:11px;font-weight:700;color:var(--text);line-height:1.25}
  .warning-item-msg{font-size:10px;color:var(--text2);line-height:1.35;margin-top:2px}
  .warning-item.error .warning-item-title{color:#fca5a5}
  .warning-item.info .warning-item-title{color:#93c5fd}
  .cost-frame-breakdown{margin-top:8px;border-top:1px solid var(--border);padding-top:6px;display:flex;flex-direction:column;gap:4px}
  .cost-frame-break-title{font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text3);margin-bottom:1px}
  .cost-frame-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;font-size:11px;padding:3px 0;border-bottom:1px solid rgba(255,255,255,0.04)}
  .cost-frame-row:last-child{border-bottom:none}
  .cost-frame-name{color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .cost-frame-total{font-family:'DM Mono',monospace;font-weight:700;color:var(--text)}
  .cost-frame-sub{display:block;font-size:9px;color:var(--text3);margin-top:1px}




  /* ── Job workflow / frame selector additions ─────────────── */
  .bom-frame-row.selected td { background: rgba(212,240,98,0.12) !important; box-shadow: inset 3px 0 0 var(--accent); }
  .bom-frame-actions { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
  .frame-selector-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:9px 10px;margin-bottom:10px}
  .frame-selector-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
  .frame-selector-title{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text3)}
  .frame-selector-list{display:flex;flex-direction:column;gap:5px;max-height:190px;overflow:auto}
  .frame-selector-empty{font-size:11px;color:var(--text3);padding:6px 2px;line-height:1.45}
  .frame-select-row{border:1px solid var(--border);border-radius:5px;background:var(--bg2);padding:6px 7px;cursor:pointer;transition:border-color .12s,background .12s}
  .frame-select-row:hover{border-color:rgba(212,240,98,.28);background:var(--bg4)}
  .frame-select-row.active{border-color:var(--accent);background:var(--accent-dim)}
  .frame-select-main{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:11px;font-weight:700;color:var(--text)}
  .frame-select-sub{font-size:10px;color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .frame-select-cost{font-family:'DM Mono',monospace;color:var(--accent);font-size:10px;white-space:nowrap}
  .report-options-grid{display:grid;grid-template-columns:1fr;gap:7px}
  .report-option-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:7px 10px;background:var(--bg3);border:1px solid var(--border);border-radius:5px}
  .report-option-row label{font-size:12px;color:var(--text);cursor:pointer;display:flex;align-items:center;gap:8px;line-height:1.25}
  .report-option-row .hint{font-size:10px;color:var(--text3);margin-top:2px;line-height:1.25}
  #mpanel-report .costs-body{display:grid;grid-template-columns:minmax(330px,400px) minmax(560px,1fr);gap:12px;align-items:start;padding:12px;overflow-y:auto}
  #mpanel-report .cost-group{width:100%!important;margin:0}
  #mpanel-report .cost-group:nth-child(2){grid-column:2;grid-row:1 / span 2}
  #mpanel-report .cost-group-head{padding:6px 12px 5px}
  #mpanel-report .cost-group-rows{padding:8px 10px!important}
  #mpanel-report .report-options-grid{grid-template-columns:1fr 1fr;gap:6px}
  #mpanel-report .report-option-row{padding:6px 8px;min-height:56px}
  #mpanel-report .report-option-row label{font-size:12px}
  #mpanel-report .report-option-row .hint{font-size:10px;line-height:1.25}
  @media (max-width:820px){#mpanel-report .costs-body{display:flex;flex-direction:column;padding:10px}#mpanel-report .cost-group:nth-child(2){grid-column:auto;grid-row:auto}#mpanel-report .report-options-grid{grid-template-columns:1fr}}
  .report-mode-pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
  .report-mode-pills button{font-size:11px;padding:5px 10px;border-radius:12px;border:1px solid var(--border2);background:var(--bg2);color:var(--text2);cursor:pointer}
  .report-mode-pills button.active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim);font-weight:700}


/* v178 login/account display */
.fw-user-chip{
  color:#b8c7df;
  font-size:12px;
  border:1px solid rgba(150,190,255,.22);
  background:rgba(255,255,255,.04);
  border-radius:999px;
  padding:5px 9px;
  white-space:nowrap;
}

.fw-sub-chip{border-color:rgba(212,240,98,.35)!important;color:var(--accent)!important;background:rgba(212,240,98,.08)!important;}


/* v182 exact FrameWork banner/logo asset support */
.fw-exact-logo{
  display:block;
  height:58px;
  max-width:240px;
  object-fit:contain;
}
.fw-exact-banner{
  background-image:linear-gradient(90deg, rgba(5,22,42,.0), rgba(5,22,42,.88)), url('assets/framework-banner.png');
  background-size:auto 100%;
  background-position:left center;
  background-repeat:no-repeat;
}


/* v184 default frame templates */
.fw-template-field{
  border:1px solid rgba(212,240,74,.16);
  background:rgba(212,240,74,.045);
  border-radius:8px;
  padding:10px;
  margin-bottom:12px;
}
.fw-template-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
}
.fw-template-row select{
  min-width:0;
}
.btn.mini{
  padding:8px 11px;
  font-size:12px;
  height:34px;
}
.fw-template-field .hint{
  margin-top:7px;
  font-size:11px;
  color:var(--text3);
  line-height:1.35;
}


/* v185 collapsible default frame templates */
.fw-template-field{
  display:block;
  padding:0;
  overflow:hidden;
}
.fw-template-field summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px;
  color:var(--accent);
  font-weight:800;
  font-size:12px;
  letter-spacing:.02em;
  user-select:none;
}
.fw-template-field summary::-webkit-details-marker{
  display:none;
}
.fw-template-field summary::before{
  content:'▸';
  color:var(--accent);
  margin-right:2px;
  transition:transform .15s ease;
}
.fw-template-field[open] summary::before{
  transform:rotate(90deg);
}
.fw-template-field summary span{
  flex:1;
}
.fw-template-field summary small{
  color:var(--text3);
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
}
.fw-template-field:not([open]) summary small::before{
  content:'collapsed';
}
.fw-template-field[open] summary small::before{
  content:'close';
}
.fw-template-field summary small{
  font-size:0;
}
.fw-template-field summary small::before{
  font-size:10px;
}
.fw-template-body{
  padding:0 10px 10px;
}


/* v188 manual box frame brace positions */
.bf-manual-brace-panel{
  border:1px solid rgba(249,115,22,.24);
  background:rgba(249,115,22,.055);
  border-radius:8px;
  padding:10px;
  margin-top:10px;
}
.bf-manual-brace-panel .manual-brace-check{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  font-size:12px;
  color:var(--text2);
}
.bf-manual-brace-panel .manual-brace-check input{
  width:auto;
  accent-color:var(--accent);
}
.bf-manual-brace-panel .hint{
  margin-top:7px;
  color:var(--text3);
  font-size:11px;
  line-height:1.35;
}
.btn.mini{
  padding:8px 11px;
  font-size:12px;
  height:34px;
}


/* ─────────────────────────────────────────────────────────────
   v189 sidebar usability tidy-up
   - wider working panel
   - collapsible left panel with remembered state
   - collapsed project details
   - compact horizontal frame selector
   - sticky material/tabs while editing
   ───────────────────────────────────────────────────────────── */
.app{
  --left-col:330px;
  --right-col:310px;
  grid-template-columns:var(--left-col) minmax(0,1fr) var(--right-col);
}
.app.right-collapsed{ --right-col:42px; }
.app.right-expanded{ --right-col:310px; }
.app.left-collapsed{ --left-col:42px; }

#left-panel{ min-width:0; }
.left-panel-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:var(--text2);
}
.left-title-text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text2);
  font-weight:700;
}
.left-toggle{
  flex-shrink:0;
  width:24px;
  height:24px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border2);
  border-radius:var(--radius);
  background:var(--bg2);
  color:var(--accent);
  cursor:pointer;
  font-size:15px;
  line-height:1;
}
.left-toggle:hover{ background:var(--accent-dim); border-color:var(--accent); }
.app.left-collapsed #left-panel{ overflow:visible; }
.app.left-collapsed #left-panel .panel-body{ display:none; }
.app.left-collapsed #left-panel .panel-title{
  height:100%;
  padding:10px 7px;
  align-items:center;
  justify-content:flex-start;
  flex-direction:column;
  border-bottom:none;
  cursor:pointer;
}
.app.left-collapsed #left-panel .left-title-text{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  letter-spacing:.08em;
  white-space:nowrap;
  margin-top:4px;
}
.app.left-collapsed #left-panel .left-toggle{ width:26px; height:26px; }

#left-panel .panel-body{ padding:12px 16px 18px; scrollbar-width:auto; scrollbar-color:var(--border2) transparent; }
#left-panel .panel-body::-webkit-scrollbar{ width:9px; }
#left-panel .panel-body::-webkit-scrollbar-track{ background:transparent; }
#left-panel .panel-body::-webkit-scrollbar-thumb{
  background:var(--border2);
  border-radius:8px;
  border:2px solid var(--bg2);
}
#left-panel .panel-body::-webkit-scrollbar-thumb:hover{ background:rgba(232,238,252,.28); }

.project-details{
  border:1px solid var(--border);
  border-radius:7px;
  overflow:hidden;
  background:rgba(255,255,255,.015);
}
.project-details summary{
  list-style:none;
  cursor:pointer;
  min-height:34px;
  padding:8px 10px;
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--text2);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  user-select:none;
}
.project-details summary::-webkit-details-marker{ display:none; }
.project-details summary::before{
  content:'▸';
  color:var(--accent);
  font-size:11px;
  transition:transform .15s ease;
}
.project-details[open] summary::before{ transform:rotate(90deg); }
.project-details summary span{ flex:1; }
.project-details summary small::before{
  content:'collapsed';
  color:var(--text3);
  font-size:9px;
  font-weight:600;
  letter-spacing:.04em;
}
.project-details[open] summary small::before{ content:'close'; }
.project-details-body{ padding:2px 10px 10px; border-top:1px solid var(--border); }
.project-details-body > .field:first-child{ margin-top:9px; }
.sidebar-divider{ margin:9px 0; }

.frame-type-field{ margin-bottom:0; }
.frame-type-field > label{
  margin-bottom:6px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--text3);
}
.frame-types{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px;
  margin-bottom:8px;
}
.ft-card{
  min-width:0;
  min-height:38px;
  padding:6px 5px;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:5px;
  text-align:center;
}
.ft-card .ft-icon{ width:auto; font-size:14px; }
.ft-card h4{
  min-width:0;
  margin:0;
  font-size:10.5px;
  line-height:1.12;
  font-weight:600;
  white-space:normal;
}
.ft-card p{ display:none; }

#left-panel .fw-template-field{ margin-bottom:9px; }
#left-panel .fw-template-field summary{ padding:8px 10px; }

/* Working controls stay available once the configuration reaches the top. */
#left-panel .frame-mat-sel{
  position:sticky;
  top:0;
  z-index:31;
  margin:0 -4px;
  padding:7px 4px 8px;
  background:linear-gradient(var(--bg2),var(--bg2));
  box-shadow:0 1px 0 var(--border);
}
#left-panel .cfg-tabs{
  position:sticky;
  top:39px;
  z-index:30;
  margin:0 -4px 12px;
  padding:0 4px;
  background:var(--bg2);
}
#left-panel .cfg-tab{ padding-top:7px; padding-bottom:7px; }

#left-panel input,
#left-panel select{ min-width:0; }
#left-panel .sec-trigger{ padding-left:9px; padding-right:9px; }
#left-panel .sec-trigger .sec-val{ font-size:11px; }

@media(max-width:1050px){
  .app{ --left-col:310px; }
  .app.left-collapsed{ --left-col:42px; }
}


/* ─────────────────────────────────────────────────────────────
   v190 sidebar polish
   - remove horizontal sidebar scrolling
   - stack manual brace position inputs full-width
   - compact template header
   - exactly equal frame type buttons
   ───────────────────────────────────────────────────────────── */
#left-panel .panel-body{
  overflow-x:hidden;
}
#left-panel .field-row,
#left-panel .field-row > *{
  min-width:0;
}

.frame-types{
  grid-template-columns:repeat(3,1fr);
}
.frame-types > .ft-card{
  width:100%;
  min-width:0;
  max-width:none;
  box-sizing:border-box;
}

/* Keep the collapsed template control compact and on one line. */
#left-panel .fw-template-field:not([open]) summary{
  min-height:34px;
  padding:6px 10px;
}
#left-panel .fw-template-field summary span{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#left-panel .fw-template-field:not([open]) summary small{
  display:none;
}

/* Box-frame manual brace controls: full-width, comfortable rows. */
.bf-manual-brace-panel{
  margin-top:14px;
  padding:10px;
}
.bf-manual-brace-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:7px;
}
.bf-manual-brace-head > label{
  margin:0;
  min-width:0;
  font-size:11px;
  color:var(--text2);
}
.bf-manual-brace-panel .bf-auto-fill{
  flex:0 0 auto;
  height:28px;
  padding:5px 10px;
  font-size:11px;
}
.bf-manual-brace-panel .manual-brace-check{
  width:100%;
  min-height:26px;
  margin:0 0 8px;
  padding:0;
}
.bf-manual-brace-panel .manual-brace-check span{
  min-width:0;
}
.bf-manual-position-field{
  width:100%;
  min-width:0;
  margin-bottom:8px;
}
.bf-manual-position-field label{
  margin-bottom:4px;
}
.bf-manual-position-field input{
  width:100%;
  min-width:0;
}
.bf-manual-brace-panel .hint{
  width:100%;
  margin-top:1px;
  font-size:10.5px;
  line-height:1.4;
}

/* ─────────────────────────────────────────────────────────────
   v191 collapsed sidebar + configuration tab prominence
   - make the collapsed left rail truly narrow
   - let the centre workspace reclaim the released width
   - make General / Posts / Braces / Legs / Base Plates etc. clear buttons
   ───────────────────────────────────────────────────────────── */

/* The original .app.right-expanded/right-collapsed rules used a fixed 290px
   first column. Reassert the variable-based grid after those rules so the
   left-panel collapse state actually changes the layout width. */
.app.right-expanded,
.app.right-collapsed{
  grid-template-columns:var(--left-col) minmax(0,1fr) var(--right-col);
}
.app.left-collapsed{
  --left-col:44px;
}

/* Proper compact collapsed rail. */
.app.left-collapsed #left-panel{
  width:44px;
  min-width:44px;
  max-width:44px;
  overflow:hidden;
  border-right-color:rgba(212,240,98,.20);
  background:linear-gradient(180deg,var(--bg3),var(--bg2));
}
.app.left-collapsed #left-panel .panel-title{
  width:44px;
  min-width:44px;
  padding:8px 0;
  gap:10px;
  justify-content:flex-start;
  align-items:center;
  overflow:hidden;
}
.app.left-collapsed #left-panel .left-toggle{
  order:0;
  width:28px;
  height:28px;
  min-width:28px;
  margin:0 auto;
  border-color:rgba(212,240,98,.34);
  background:rgba(212,240,98,.06);
  font-size:17px;
}
.app.left-collapsed #left-panel .left-title-text{
  order:1;
  margin:0 auto;
  font-size:9px;
  line-height:1;
  letter-spacing:.13em;
  color:rgba(232,238,252,.58);
}
.app.left-collapsed #left-panel .panel-title:hover{
  background:rgba(212,240,98,.035);
}
.app.left-collapsed #left-panel .panel-title:hover .left-title-text{
  color:var(--accent);
}

/* Configuration tabs are working-mode controls, so present them as a
   segmented button bar rather than faint text on a divider line. */
#left-panel .cfg-tabs{
  display:flex;
  gap:5px;
  border:1px solid var(--border2);
  border-bottom:1px solid var(--border2);
  border-radius:7px;
  margin:0 -1px 12px;
  padding:5px;
  background:#111;
  box-shadow:0 1px 0 rgba(255,255,255,.025), 0 4px 12px rgba(0,0,0,.12);
}
#left-panel .cfg-tab{
  min-width:0;
  min-height:32px;
  padding:6px 5px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  border-radius:5px;
  background:var(--bg3);
  color:rgba(240,240,238,.72);
  font-size:10.5px;
  font-weight:700;
  line-height:1.05;
  letter-spacing:.035em;
  text-transform:uppercase;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  transition:background .12s,border-color .12s,color .12s,transform .08s;
}
#left-panel .cfg-tab:hover{
  color:var(--text);
  background:var(--bg4);
  border-color:rgba(212,240,98,.28);
}
#left-panel .cfg-tab:active{
  transform:translateY(1px);
}
#left-panel .cfg-tab.active{
  color:#10120a;
  background:var(--accent);
  border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(212,240,98,.12), inset 0 1px 0 rgba(255,255,255,.20);
}

/* Keep the sticky tab bar clear beneath the sticky Material selector. */
#left-panel .cfg-tabs{
  top:39px;
}


/* ── v202 legacy interactive SVG 3D styles (superseded by v203) ── */
#pane-3d{
  position:relative;
  overflow:hidden;
  background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.018),transparent 58%);
}
#frame-svg-3d{
  width:100%;
  height:100%;
  display:block;
  cursor:grab;
  touch-action:none;
  user-select:none;
}
.orbit3d-help{
  position:absolute;
  top:7px;
  right:84px;
  z-index:4;
  font-size:9px;
  color:var(--text3);
  pointer-events:none;
}
.orbit3d-reset{
  position:absolute;
  top:5px;
  right:9px;
  z-index:5;
  height:22px;
  padding:0 8px;
  border:1px solid var(--border2);
  border-radius:5px;
  background:rgba(17,20,24,.88);
  color:var(--text2);
  font:600 9px 'DM Sans',sans-serif;
  cursor:pointer;
}
.orbit3d-reset:hover{
  color:#10120a;
  border-color:var(--accent);
  background:var(--accent);
}

/* ── v203 genuine Three.js / WebGL 3D viewer ──────────────── */
#pane-3d{
  position:relative;
  overflow:hidden;
  background:#1b1d20;
}
.framework-3d-stage{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:radial-gradient(circle at 48% 35%,rgba(67,86,103,.20),rgba(27,29,32,.08) 48%,#1b1d20 82%);
}
#framework-3d-canvas{
  width:100%;
  height:100%;
  display:block;
  touch-action:none;
  outline:none;
}
.framework-3d-status{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text3);
  font:500 11px 'DM Sans',sans-serif;
  letter-spacing:.02em;
  pointer-events:none;
  background:rgba(27,29,32,.20);
  z-index:2;
}
.framework-3d-status.error{
  color:#ffb06b;
}
.orbit3d-help{
  top:7px;
  right:318px;
  z-index:7;
}
.orbit3d-actions{
  position:absolute;
  top:5px;
  right:8px;
  z-index:8;
  display:flex;
  align-items:center;
  gap:6px;
}
.orbit3d-camera-mode{
  display:flex;
  padding:2px;
  border:1px solid var(--border2);
  border-radius:6px;
  background:rgba(17,20,24,.90);
  box-shadow:0 2px 10px rgba(0,0,0,.22);
}
.orbit3d-mode,
.orbit3d-reset{
  position:static;
  height:22px;
  padding:0 8px;
  border:1px solid transparent;
  border-radius:4px;
  background:transparent;
  color:var(--text2);
  font:600 9px 'DM Sans',sans-serif;
  cursor:pointer;
  white-space:nowrap;
}
.orbit3d-mode:hover,
.orbit3d-reset:hover{
  color:#eef4d7;
  border-color:rgba(212,240,98,.45);
  background:rgba(212,240,98,.07);
}
.orbit3d-mode.active{
  color:#10120a;
  background:var(--accent);
  border-color:var(--accent);
}
.orbit3d-reset{
  border-color:var(--border2);
  background:rgba(17,20,24,.90);
}
#pane-3d .pane-label{
  z-index:7;
  pointer-events:none;
}
@media (max-width:1100px){
  .orbit3d-help{display:none;}
}


/* ─── v204 Project Frame Manager ───────────────────────────────────── */
.project-frame-manager{
  margin:0 0 10px;
  padding:9px;
  background:linear-gradient(180deg,rgba(212,240,98,.055),rgba(255,255,255,.018));
  border:1px solid rgba(212,240,98,.20);
  border-radius:var(--radius-lg);
}
.project-frame-manager-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;
}
.project-frame-manager-title{
  font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
}
.project-frame-manager-sub{
  margin-top:2px;font-size:9px;color:var(--text3);
}
.project-frame-list{
  display:flex;flex-direction:column;gap:6px;max-height:245px;overflow:auto;padding-right:2px;
}
.project-frame-list::-webkit-scrollbar{width:4px}
.project-frame-list::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}
.project-frame-empty{
  padding:9px 7px;border:1px dashed var(--border2);border-radius:6px;
  font-size:10px;line-height:1.45;color:var(--text3);
}
.project-frame-item{
  position:relative;border:1px solid var(--border);border-radius:7px;background:var(--bg2);
  padding:8px;cursor:pointer;transition:.12s ease;
}
.project-frame-item:hover{border-color:rgba(212,240,98,.35);background:var(--bg4)}
.project-frame-item.active{
  border-color:var(--accent);background:rgba(212,240,98,.085);
  box-shadow:inset 3px 0 0 var(--accent);
}
.project-frame-item-top{display:flex;align-items:flex-start;gap:6px}
.project-frame-name-wrap{min-width:0;flex:1}
.project-frame-name{
  width:100%;border:0;border-bottom:1px solid transparent;background:transparent;color:var(--text);
  font:700 11px/1.2 'DM Sans',sans-serif;padding:0 0 2px;outline:none;
}
.project-frame-name:focus{border-bottom-color:var(--accent);background:rgba(255,255,255,.025)}
.project-frame-type{
  margin-top:2px;font-size:9px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.project-frame-badge{
  flex:0 0 auto;font-size:8px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent);border:1px solid rgba(212,240,98,.25);border-radius:999px;padding:2px 5px;
}
.project-frame-item:not(.active) .project-frame-badge{display:none}
.project-frame-item-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:7px;margin-top:7px;
}
.project-frame-dims{
  min-width:0;flex:1;font:9px/1.2 'DM Mono',monospace;color:var(--text3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.project-frame-qty{
  flex:0 0 auto;display:flex;align-items:center;gap:3px;background:rgba(0,0,0,.18);
  border:1px solid var(--border);border-radius:5px;padding:2px;
}
.project-frame-qty-label{font-size:8px;color:var(--text3);padding-left:3px;text-transform:uppercase}
.project-frame-qty button{
  width:22px;height:22px;border:0;border-radius:4px;background:var(--bg4);color:var(--text2);
  cursor:pointer;font-size:14px;line-height:20px;
}
.project-frame-qty button:hover{background:var(--accent-dim);color:var(--accent)}
.project-frame-qty input{
  width:36px!important;height:22px;border:0!important;background:transparent!important;color:var(--text)!important;
  padding:0!important;text-align:center;font:700 10px 'DM Mono',monospace;outline:none;
}
.project-frame-manager-foot{
  display:flex;align-items:center;gap:5px;margin-top:7px;padding-top:6px;border-top:1px solid var(--border);
  font-size:9px;color:var(--text3);
}
.project-frame-manager-foot::before{
  content:'●';font-size:7px;color:var(--green);
}
.project-frame-manager-foot.saving::before{color:var(--orange)}
.project-frame-manager-foot.saving #project-frame-save-state{color:var(--text2)}
.fw-legacy-frame-qty{display:none!important}

/* The project frame manager replaces the duplicate Added Frames card on the right. */
#right-panel .frame-selector-card{display:none!important}

/* v204 add-frame chooser */
.fw-project-modal-backdrop{
  display:none;position:fixed;inset:0;z-index:12000;background:rgba(0,0,0,.70);
  align-items:center;justify-content:center;padding:20px;
}
.fw-project-modal-backdrop.show{display:flex}
.fw-project-modal{
  width:min(620px,94vw);max-height:88vh;overflow:auto;background:#171717;
  border:1px solid var(--border2);border-radius:12px;box-shadow:0 24px 80px rgba(0,0,0,.55);
}
.fw-project-modal-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px 12px;
  border-bottom:1px solid var(--border);
}
.fw-project-modal-title{font-size:15px;font-weight:800;color:var(--text)}
.fw-project-modal-sub{font-size:10px;color:var(--text3);margin-top:3px}
.fw-project-modal-close{
  width:28px;height:28px;border:1px solid var(--border2);background:var(--bg3);color:var(--text2);
  border-radius:6px;cursor:pointer;font-size:16px;
}
.fw-project-modal-body{padding:16px 18px 18px}
.fw-project-type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.fw-project-type{
  border:1px solid var(--border2);border-radius:8px;background:var(--bg3);color:var(--text);
  padding:14px 10px;text-align:left;cursor:pointer;
}
.fw-project-type:hover{border-color:var(--accent);background:var(--accent-dim)}
.fw-project-type strong{display:block;font-size:12px;margin-bottom:3px}
.fw-project-type span{display:block;font-size:9px;color:var(--text3);line-height:1.35}
.fw-project-modal-divider{
  display:flex;align-items:center;gap:8px;margin:15px 0 10px;color:var(--text3);
  font-size:9px;text-transform:uppercase;letter-spacing:.06em;
}
.fw-project-modal-divider::before,.fw-project-modal-divider::after{content:'';height:1px;background:var(--border);flex:1}
.fw-project-template-row{display:flex;gap:7px}
.fw-project-template-row select{min-width:0;flex:1}
.fw-project-modal-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}
@media(max-width:650px){
  .fw-project-type-grid{grid-template-columns:1fr}
}

/* v204 header terminology */
.header-bom-tools .btn{white-space:nowrap}


/* v204.3 - Project-frame cut list clarity */
.project-bom-editing{
  display:inline-flex;align-items:center;margin-left:7px;padding:1px 6px;
  border:1px solid rgba(212,240,98,.55);border-radius:999px;
  background:rgba(212,240,98,.10);color:var(--accent);
  font-size:8px;font-weight:800;letter-spacing:.6px;vertical-align:1px;
}
.project-bom-frame .bom-frame-sub{margin-left:8px}

/* ─── v204.4 Project workflow polish ───────────────────────────────────── */
.fw-version-status{
  display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
  height:27px;padding:0 7px;border:1px solid rgba(255,255,255,.11);border-radius:5px;
  background:rgba(0,0,0,.18);color:rgba(232,238,252,.60);
  font:700 9px/1 'DM Mono',Consolas,monospace;white-space:nowrap;
}
.fw-version-status::before{content:'●';font-size:7px;color:var(--green)}
.fw-version-status.dirty{color:#fdba74;border-color:rgba(249,115,22,.28);background:rgba(249,115,22,.07)}
.fw-version-status.dirty::before{color:var(--orange)}
.fw-version-status.saved::before{color:var(--green)}

.project-frame-manager-head{margin-bottom:8px}
.project-frame-manager-heading{min-width:0;flex:1;cursor:pointer}
.project-frame-manager-toggle{
  width:22px;height:22px;flex:0 0 22px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border2);border-radius:5px;background:var(--bg3);color:var(--accent);
  font-size:12px;cursor:pointer;
}
.project-frame-manager-toggle:hover{border-color:var(--accent);background:var(--accent-dim)}
.project-frame-manager.collapsed .project-frame-list,
.project-frame-manager.collapsed .project-frame-manager-foot{display:none}
.project-frame-manager.collapsed .project-frame-manager-head{margin-bottom:0}
.project-frame-manager.collapsed{padding-top:7px;padding-bottom:7px}

.project-bom-frame{cursor:pointer;user-select:none}
.project-bom-frame:hover td{background:rgba(212,240,98,.065)}
.project-bom-frame.selected:hover td{background:rgba(212,240,98,.14)!important}
.project-bom-title-wrap{display:flex;align-items:center;gap:6px;min-width:0}
.project-bom-collapse{
  width:20px;height:20px;flex:0 0 20px;border:1px solid var(--border2);border-radius:4px;
  background:rgba(0,0,0,.18);color:var(--accent);cursor:pointer;font-size:11px;line-height:18px;
}
.project-bom-collapse:hover{background:var(--accent-dim);border-color:var(--accent)}
.project-bom-frame.collapsed .bom-frame-sub{opacity:.72}

.cost-selected-frame{
  margin:-1px 0 7px;padding:5px 7px;border:1px solid rgba(212,240,98,.16);border-radius:5px;
  background:rgba(212,240,98,.055);color:var(--accent);font-size:10px;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cost-frame-row.active{
  margin:0 -4px;padding:4px;border-radius:4px;background:rgba(212,240,98,.065);
  border-bottom-color:transparent;
}
.cost-frame-editing{
  display:inline-flex;margin-left:5px;padding:1px 4px;border:1px solid rgba(212,240,98,.35);
  border-radius:999px;color:var(--accent);font-size:7px;font-weight:800;letter-spacing:.05em;vertical-align:1px;
}
.cost-project-total{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin-top:8px;padding:8px 0 1px;border-top:1px solid rgba(212,240,98,.28);
  font-size:13px;font-weight:800;
}
.cost-project-total .cost-label{color:var(--text)}
.cost-project-total .cost-val{font-family:'DM Mono',monospace;color:var(--accent);font-size:14px}


/* ─── v204.5 Sidebar hierarchy tidy ───────────────────────────────────── */
/* The left rail now has one visual priority: Project Frames -> Design.
   Frame type/templates are secondary drawers rather than permanent blocks. */
#left-panel .panel-body{padding:10px 12px 18px;}
#left-panel .project-details{margin-bottom:7px;}
#left-panel .sidebar-divider{display:none;}

.project-frame-manager{
  margin:0 0 7px;padding:7px 8px;
  background:linear-gradient(180deg,rgba(212,240,98,.040),rgba(255,255,255,.012));
  border-color:rgba(212,240,98,.17);
}
.project-frame-manager-head{gap:6px;margin-bottom:6px;}
.project-frame-manager-title{font-size:9.5px;letter-spacing:.075em;}
.project-frame-manager-sub{display:inline;margin:0 0 0 5px;font-size:8.5px;}
.project-frame-manager-heading{display:flex;align-items:baseline;min-width:0;}
.project-frame-manager-toggle{width:20px;height:20px;flex-basis:20px;font-size:11px;}
.project-frame-manager-head .btn{height:25px;padding:4px 8px;font-size:9px;}
.project-frame-list{gap:4px;max-height:188px;padding-right:1px;}
.project-frame-item{padding:5px 6px;border-radius:6px;}
.project-frame-item.active{box-shadow:inset 2px 0 0 var(--accent);}
.project-frame-item-top{align-items:center;gap:5px;min-height:18px;}
.project-frame-active-dot{
  width:5px;height:5px;flex:0 0 5px;border-radius:50%;background:var(--text3);opacity:.45;
}
.project-frame-item.active .project-frame-active-dot{background:var(--accent);opacity:1;box-shadow:0 0 0 2px rgba(212,240,98,.08);}
.project-frame-name{font-size:10.5px;line-height:1.15;padding:0;height:18px;}
.project-frame-badge{font-size:7px;padding:1px 4px;letter-spacing:.045em;}
.project-frame-item-bottom{gap:5px;margin-top:3px;min-height:21px;}
.project-frame-meta{
  min-width:0;flex:1;display:flex;align-items:center;gap:4px;overflow:hidden;white-space:nowrap;
  color:var(--text3);font-size:8.5px;
}
.project-frame-type{margin:0;flex:0 0 auto;font-size:8.5px;color:var(--text3);}
.project-frame-meta-sep{opacity:.45;}
.project-frame-dims{font-size:8.5px;line-height:1;overflow:hidden;text-overflow:ellipsis;}
.project-frame-qty{gap:1px;padding:1px;border-radius:4px;}
.project-frame-qty-label{display:none;}
.project-frame-qty button{width:18px;height:18px;font-size:12px;line-height:16px;}
.project-frame-qty input{width:25px!important;height:18px;font-size:9px;}
.project-frame-manager-foot{display:none!important;}
.project-frame-manager.collapsed{padding:6px 8px;}
.project-frame-manager.collapsed .project-frame-manager-head{margin-bottom:0;}

.fw-sidebar-secondary{display:flex;flex-direction:column;gap:5px;margin:0 0 7px;}
#left-panel .fw-sidebar-section{
  margin:0;border:1px solid var(--border);border-radius:6px;overflow:hidden;background:rgba(255,255,255,.012);
}
#left-panel .fw-sidebar-section > summary{
  list-style:none;min-height:30px;padding:6px 8px;display:flex;align-items:center;gap:6px;cursor:pointer;
  user-select:none;color:var(--text2);font-size:9.5px;font-weight:750;letter-spacing:.065em;text-transform:uppercase;
}
#left-panel .fw-sidebar-section > summary::-webkit-details-marker{display:none;}
#left-panel .fw-sidebar-section > summary::before{content:'▸';color:var(--accent);font-size:10px;transition:transform .14s ease;}
#left-panel .fw-sidebar-section[open] > summary::before{transform:rotate(90deg);}
#left-panel .fw-sidebar-section > summary > span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#left-panel .fw-sidebar-section > summary > small{
  flex:0 1 auto;max-width:54%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--text3);font-size:8.5px;font-weight:600;letter-spacing:0;text-transform:none;
}
#left-panel .fw-sidebar-section[open] > summary{border-bottom:1px solid var(--border);background:rgba(255,255,255,.018);}
.fw-sidebar-section-body{padding:7px 8px 8px;}
.fw-sidebar-section-hint{margin-top:5px;font-size:8.5px;line-height:1.25;}
#left-panel .fw-frame-type-panel .frame-type-field{margin:0;}
#left-panel .fw-frame-type-panel .frame-types{margin:0;gap:4px;}
#left-panel .fw-frame-type-panel .ft-card{min-height:34px;padding:5px 4px;}
#left-panel .fw-frame-type-panel .ft-card h4{font-size:9.5px;}
#left-panel .fw-frame-type-panel .ft-card .ft-icon{font-size:12px;}

/* Override the older template-details styling so Frame Type and Templates read
   as a matched pair of secondary drawers. */
#left-panel .fw-template-field{margin:0;}
#left-panel .fw-template-field summary{padding:6px 8px!important;min-height:30px!important;}
#left-panel .fw-template-field summary small{display:block!important;}
#left-panel .fw-template-field summary small::before{content:none!important;}
#left-panel .fw-template-field .fw-template-body{padding:7px 8px 8px;}
#left-panel .fw-template-field .fw-template-row{gap:5px;}
#left-panel .fw-template-field .btn.mini{height:30px;padding:5px 9px;font-size:10px;}
#left-panel .fw-template-field .hint{font-size:8.5px;line-height:1.3;margin-top:5px;}

.fw-design-heading{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin:5px 0 5px;padding:5px 2px 4px;border-top:1px solid rgba(255,255,255,.07);
}
.fw-design-heading > span{color:var(--accent);font-size:9.5px;font-weight:800;letter-spacing:.085em;text-transform:uppercase;}
.fw-design-heading > small{
  min-width:0;max-width:68%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--text3);font-size:8.5px;font-weight:600;text-align:right;
}

/* Design controls are the primary workspace: make the material strip quieter
   and let the tabs carry the strongest visual weight. */
#left-panel .frame-mat-sel{
  margin:0 -2px;padding:5px 2px 6px;min-height:30px;box-shadow:none;border-bottom:0;
}
#left-panel .frame-mat-sel label{font-size:9px;margin-right:2px;}
#left-panel .frame-mat-btn{padding:3px 7px;font-size:9px;}
#left-panel .cfg-tabs{top:31px;margin:0 -2px 9px;padding:0 2px 5px;border-bottom:1px solid var(--border);}
#left-panel .cfg-tab{padding:6px 5px;font-size:9.5px;}

@media(max-width:1050px){
  .project-frame-manager-sub{display:none;}
}


/* ─── v204.6 Consolidated Frame Setup + Perspective 3D ───────────────── */
/* Frame type, material and templates now live in one secondary drawer. */
#left-panel .fw-frame-setup-body{padding:7px 8px 8px;}
#left-panel .fw-frame-setup-group{padding:0 0 7px;margin:0 0 7px;border-bottom:1px solid rgba(255,255,255,.055);}
#left-panel .fw-frame-setup-group:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0;}
#left-panel .fw-frame-setup-label{margin:0 0 5px;color:var(--text3);font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;}
#left-panel .fw-frame-setup-body .frame-type-field{margin:0;}
#left-panel .fw-frame-setup-body .frame-mat-sel{
  margin:0;padding:0;min-height:24px;border:0;box-shadow:none;display:flex;align-items:center;gap:5px;
}
#left-panel .fw-frame-setup-body .frame-mat-btn{padding:4px 9px;font-size:9px;}
#left-panel .fw-frame-setup-template .fw-template-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px;align-items:center;}
#left-panel .fw-frame-setup-template select{min-width:0;height:30px;font-size:9.5px;}
#left-panel .fw-frame-setup-template .btn.mini{height:30px;padding:5px 9px;font-size:9.5px;}
/* Material is setup metadata now, not a permanent design-row above every tab. */
#cfg-pylon > .frame-mat-sel,#cfg-pole > .frame-mat-sel,#cfg-boxframe > .frame-mat-sel{display:none!important;}


/* ─── v204.7 Save/Load + unified sidebar drawers ─────────────────────── */
/* Project Details, Project Frames and Frame Type use the same visual rhythm. */
#left-panel .panel-body{
  padding:10px 12px 18px;
}
#left-panel .project-details,
#left-panel .project-frame-manager,
#left-panel .fw-sidebar-section{
  box-sizing:border-box;
  margin:0 0 7px;
  border:1px solid var(--border);
  border-radius:6px;
  background:rgba(255,255,255,.012);
  overflow:hidden;
}
#left-panel .fw-sidebar-secondary{
  gap:0;
  margin:0;
}

/* Matched 32px collapsed/header rows. */
#left-panel .project-details > summary,
#left-panel .fw-sidebar-section > summary,
#left-panel .project-frame-manager-head{
  box-sizing:border-box;
  min-height:32px;
  margin:0;
  padding:6px 8px;
  align-items:center;
  color:var(--text2);
  font-size:9.5px;
  font-weight:750;
  letter-spacing:.065em;
  text-transform:uppercase;
  background:rgba(255,255,255,.008);
}
#left-panel .project-details > summary,
#left-panel .fw-sidebar-section > summary{
  display:flex;
  gap:6px;
}
#left-panel .project-details[open] > summary,
#left-panel .fw-sidebar-section[open] > summary,
#left-panel .project-frame-manager:not(.collapsed) > .project-frame-manager-head{
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.020);
}

/* Use one chevron treatment throughout. */
#left-panel .project-details > summary::before,
#left-panel .fw-sidebar-section > summary::before{
  width:12px;
  flex:0 0 12px;
  text-align:center;
  color:var(--accent);
  font-size:10px;
}
#left-panel .project-details > summary small::before{
  content:none!important;
}
#left-panel .project-details > summary small:empty{
  display:none;
}
#left-panel .project-frame-manager-toggle{
  width:12px;
  height:18px;
  flex:0 0 12px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--accent);
  font-size:10px;
  line-height:18px;
}
#left-panel .project-frame-manager-toggle:hover{
  border:0;
  background:transparent;
  color:var(--text);
}
#left-panel .project-frame-manager.collapsed .project-frame-manager-toggle{
  transform:rotate(-90deg);
}

/* Project Frames keeps its useful count/+Add, but within the same header scale. */
#left-panel .project-frame-manager{
  padding:0;
  border-color:var(--border);
  background:rgba(255,255,255,.012);
}
#left-panel .project-frame-manager-head{
  display:flex;
  gap:6px;
}
#left-panel .project-frame-manager-heading{
  flex:1;
  min-width:0;
  display:flex;
  align-items:baseline;
}
#left-panel .project-frame-manager-title{
  font-size:9.5px;
  letter-spacing:.065em;
}
#left-panel .project-frame-manager-sub{
  margin-left:5px;
  font-size:8.5px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  color:var(--text3);
}
#left-panel .project-frame-manager-head .btn{
  height:22px;
  padding:3px 7px;
  font-size:8.5px;
}
#left-panel .project-frame-list{
  margin:7px 8px 8px;
  max-height:188px;
}
#left-panel .project-frame-manager.collapsed{
  padding:0;
}
#left-panel .project-frame-manager.collapsed .project-frame-manager-head{
  margin:0;
  border-bottom:0;
}

/* Expanded bodies start at a common inset. */
#left-panel .project-details-body{
  padding:7px 8px 8px;
  border-top:0;
}
#left-panel .project-details-body > .field:first-child{
  margin-top:0;
}
#left-panel .fw-sidebar-section-body{
  padding:7px 8px 8px;
}


/* ─── v204.8 Save/Load session + sidebar accordion polish ─────────────── */
#left-panel .project-details,
#left-panel .project-frame-manager,
#left-panel .fw-sidebar-section{
  margin-bottom:7px;
  border:1px solid var(--border);
  border-radius:7px;
  background:rgba(255,255,255,.012);
  overflow:hidden;
  transition:border-color .14s ease,box-shadow .14s ease,background .14s ease;
}

/* Every real accordion uses the same explicit chevron. */
#left-panel .project-details > summary::before,
#left-panel .fw-sidebar-section > summary::before{
  content:'▸' !important;
  display:inline-block;
  width:12px;
  flex:0 0 12px;
  text-align:center;
  color:var(--accent);
  font-size:10px;
  transform:none;
  transition:transform .14s ease;
}
#left-panel .project-details[open] > summary::before,
#left-panel .fw-sidebar-section[open] > summary::before{
  transform:rotate(90deg);
}

/* An open section should read as a single bordered container, not loose content. */
#left-panel .project-details[open],
#left-panel .fw-sidebar-section[open],
#left-panel .project-frame-manager:not(.collapsed){
  border-color:rgba(212,240,98,.34);
  background:linear-gradient(180deg,rgba(212,240,98,.028),rgba(255,255,255,.010));
  box-shadow:0 0 0 1px rgba(212,240,98,.035) inset;
}
#left-panel .project-details[open] > summary,
#left-panel .fw-sidebar-section[open] > summary,
#left-panel .project-frame-manager:not(.collapsed) > .project-frame-manager-head{
  border-bottom:1px solid rgba(212,240,98,.20);
  background:rgba(212,240,98,.035);
}

/* Design is now its own accordion below Frame Type. */
#left-panel .fw-design-panel{margin-top:0;}
#left-panel .fw-design-body{padding:8px 8px 10px;}
#left-panel .fw-design-panel > summary small{max-width:62%;}
#left-panel .fw-design-body .cfg-tabs{
  top:0;
  margin:0 0 9px;
  padding:0 0 6px;
}
#left-panel .fw-design-body > [id^="cfg-"]{margin:0;}

/* Consistent vertical rhythm for the four top-level left-rail sections. */
#left-panel .project-details,
#left-panel .project-frame-manager,
#left-panel .fw-sidebar-secondary,
#left-panel .fw-design-panel{margin-top:0;}
#left-panel .fw-sidebar-secondary{margin-bottom:0;}

/* Clean alignment for the three General-tab brace checkboxes. */
#left-panel .fw-brace-field{margin-bottom:10px;}
#left-panel .fw-brace-field-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
  color:var(--text2);
  font-size:10.5px;
}
#left-panel .fw-brace-field-head > span{
  flex:1 1 auto;
  min-width:0;
  padding-top:2px;
}
#left-panel .fw-brace-checks{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:5px 9px;
  flex:0 0 auto;
}
#left-panel .fw-check-option{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin:0;
  color:var(--text2);
  font-size:9.5px;
  line-height:1;
  cursor:pointer;
  white-space:nowrap;
}
#left-panel .fw-check-option input[type="checkbox"]{
  width:13px;
  height:13px;
  margin:0;
  accent-color:var(--accent);
  flex:0 0 13px;
}
#left-panel .fw-brace-picker{margin-top:0;}

@media(max-width:1180px){
  #left-panel .fw-brace-field-head{display:block;}
  #left-panel .fw-brace-checks{justify-content:flex-start;margin-top:5px;}
}

/* ─── v204.10 report launcher + one-page technical drawing ─────────────── */
.report-launch-wrap{position:relative;display:inline-flex;align-items:center}
.report-launch-btn{display:flex;align-items:center;gap:5px}
.report-launch-chevron{font-size:10px;opacity:.8;transform:translateY(-1px)}
.report-quick-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:1200;width:260px;padding:6px;background:#171b20;border:1px solid var(--border2);border-radius:7px;box-shadow:0 14px 36px rgba(0,0,0,.45)}
.report-quick-menu.open{display:block}
.report-quick-menu button{display:block;width:100%;text-align:left;border:0;border-radius:5px;background:transparent;color:var(--text);padding:8px 9px;cursor:pointer}
.report-quick-menu button:hover{background:var(--bg4)}
.report-quick-menu button strong{display:block;font-size:11px;color:var(--text);font-weight:700}
.report-quick-menu button span{display:block;margin-top:2px;font-size:9px;line-height:1.35;color:var(--text3)}
.report-quick-sep{height:1px;background:var(--border);margin:4px 2px}
.report-output-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px;padding-top:9px;border-top:1px solid var(--border)}
/* v204.10 One-page technical drawing report */

/* ─── v204.10 Header fit + unclipped report/file/account menus ─────────── */
header.topbar{
  position:relative;
  z-index:5000;
  overflow:visible;
  gap:8px;
  padding-right:10px;
}
.app{position:relative;z-index:1;}
.topbar-logo-wrap{
  width:250px;
  min-width:210px;
}
.header-sub{
  flex:0 1 210px;
  max-width:210px;
}
.header-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  flex:1 1 auto;
  min-width:0;
}
header.topbar .btn{
  height:30px;
  padding:0 9px;
  font-size:11px;
  white-space:nowrap;
}
.header-bom-tools{
  gap:4px;
  padding:3px 5px;
  flex:0 0 auto;
}
.header-bom-tools .btn{padding-left:8px;padding-right:8px;}
.header-bom-label{font-size:9px;}
.fw-version-status{
  flex:0 0 auto;
  white-space:nowrap;
  font-size:9px!important;
  padding-left:7px!important;
  padding-right:7px!important;
}
.report-launch-wrap,.files-launch-wrap,.account-launch-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
}
.header-menu-chevron{font-size:9px;opacity:.75;margin-left:2px;transform:translateY(-1px);}
.report-quick-menu,
.header-quick-menu{
  z-index:6500!important;
  box-shadow:0 16px 38px rgba(0,0,0,.58)!important;
}
.header-quick-menu{
  display:none;
  position:absolute;
  top:calc(100% + 7px);
  width:250px;
  padding:6px;
  background:#171b20;
  border:1px solid var(--border2);
  border-radius:7px;
}
.header-quick-menu.open{display:block;}
.files-quick-menu{left:0;}
.account-quick-menu{right:0;left:auto;width:235px;}
.header-quick-menu button{
  display:block;
  width:100%;
  text-align:left;
  border:0;
  border-radius:5px;
  background:transparent;
  color:var(--text);
  padding:8px 9px;
  cursor:pointer;
}
.header-quick-menu button:hover{background:var(--bg4);}
.header-quick-menu button strong{display:block;font-size:11px;color:var(--text);font-weight:700;}
.header-quick-menu button span{display:block;margin-top:2px;font-size:9px;line-height:1.35;color:var(--text3);}
.account-quick-identity{padding:7px 9px 5px;min-width:0;}
.account-quick-identity strong{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.account-quick-identity span{display:block;margin-top:3px;font-size:9px;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.account-launch-btn{max-width:118px;}
#account-launch-name{display:inline-block;max-width:78px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;}
/* Legacy standalone identity chips are no longer placed in the top bar in v204.10. */
header.topbar > .fw-user-chip,
header.topbar > .fw-sub-chip{display:none!important;}

@media (max-width:1800px){
  header.topbar{gap:6px;padding-right:7px;}
  .topbar-logo-wrap{width:205px;min-width:190px;}
  .header-sub{display:none;}
  .header-bom-label{display:none;}
  header.topbar .btn{padding-left:8px;padding-right:8px;font-size:10.5px;}
  .header-right{gap:5px;}
}
@media (max-width:1450px){
  .topbar-logo-wrap{width:180px;min-width:165px;}
  header.topbar .btn{padding-left:7px;padding-right:7px;font-size:10px;}
  .fw-version-status{font-size:8px!important;padding-left:5px!important;padding-right:5px!important;}
  .header-bom-tools{padding-left:4px;padding-right:4px;}
  .account-launch-btn{max-width:96px;}
  #account-launch-name{max-width:58px;}
}

/* v204.11 Technical drawing report: supplied logo, full cut/member schedule, deduplicated fabrication notes. */

/* ─── v205.0 Quote Request UI ─────────────────────────────────────────── */
.fw-rfq-backdrop{position:fixed;inset:0;z-index:24000;background:rgba(3,7,15,.78);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:24px}
.fw-rfq-backdrop.open{display:flex}
.fw-rfq-modal{width:min(860px,94vw);max-height:88vh;background:#111722;border:1px solid #31405a;border-radius:12px;box-shadow:0 24px 80px rgba(0,0,0,.55);display:flex;flex-direction:column;overflow:hidden}
.fw-rfq-ops-modal{width:min(980px,95vw)}
.fw-rfq-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:18px 20px;border-bottom:1px solid #29364b;background:#151d2a}
.fw-rfq-head h2{margin:0;color:#eef3ff;font-size:18px;letter-spacing:.01em}.fw-rfq-head p{margin:4px 0 0;color:#94a2ba;font-size:11px;line-height:1.45}
.fw-rfq-close{border:1px solid #35445e;background:#1b2534;color:#dce5f5;border-radius:7px;width:30px;height:30px;font-size:19px;cursor:pointer}
.fw-rfq-toolbar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #263248;color:#91a0b7;font-size:11px}
.fw-rfq-list{overflow:auto;min-height:160px;padding:10px;display:flex;flex-direction:column;gap:8px}
.fw-rfq-row{width:100%;text-align:left;border:1px solid #26354d;background:#131b28;border-radius:8px;padding:11px 12px;color:#edf3ff;cursor:pointer}
.fw-rfq-row:hover{border-color:#78933c;background:#192231}.fw-rfq-row-main{display:flex;align-items:center;gap:8px}.fw-rfq-row-main strong{font-size:12px}.fw-rfq-date{margin-left:auto;color:#8492aa;font-size:10px}
.fw-rfq-project{font-size:13px;font-weight:650;margin-top:6px}.fw-rfq-meta{font-size:10px;color:#91a0b6;margin-top:4px;line-height:1.4}
.fw-rfq-status{display:inline-flex;border:1px solid #45546c;background:#202a39;border-radius:999px;padding:2px 7px;font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:#c6d0df}
.fw-rfq-status.status-submitted{border-color:#6c7f35;color:#d4f062;background:rgba(212,240,98,.08)}.fw-rfq-status.status-reviewing{border-color:#3b6c8e;color:#78c8ff}.fw-rfq-status.status-quoted{border-color:#875e2e;color:#ffbd67}.fw-rfq-status.status-accepted{border-color:#2c7552;color:#6ee7a5}
.fw-rfq-empty,.fw-rfq-error{padding:28px;text-align:center;color:#8d9bb0;font-size:12px}.fw-rfq-error{color:#ff9c9c}
.fw-rfq-detail{padding:14px 16px 18px;overflow:auto}.fw-rfq-detail-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.fw-rfq-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid #2a374c;border-radius:8px;overflow:hidden}.fw-rfq-detail-grid>div{padding:9px 10px;border-bottom:1px solid #263248}.fw-rfq-detail-grid>div:nth-child(odd){border-right:1px solid #263248}.fw-rfq-detail-grid label,.fw-rfq-notes label{display:block;color:#7f8ca1;text-transform:uppercase;font-size:8px;letter-spacing:.07em;margin-bottom:3px}.fw-rfq-detail-grid strong{font-size:11px;color:#e9eff9;font-weight:550}
.fw-rfq-notes{margin-top:12px;border:1px solid #2a374c;border-radius:8px;padding:10px}.fw-rfq-notes>div{font-size:11px;color:#d0d8e6;white-space:pre-wrap;line-height:1.45}
.fw-rfq-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:14px}.fw-rfq-actions select{width:auto;min-width:120px}
.fw-client-quote-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px 18px}.fw-client-quote-grid .field{margin:0}.fw-client-quote-grid input,.fw-client-quote-grid textarea{width:100%}.fw-client-quote-notes{grid-column:1/-1}.fw-client-delivery{display:flex;align-items:flex-end}.fw-client-delivery label{display:flex;align-items:center;gap:8px;padding-bottom:7px}.fw-client-delivery input{width:auto}
.fw-client-quote-summary{margin:14px 18px 0;padding:10px 12px;border:1px solid rgba(212,240,98,.25);background:rgba(212,240,98,.055);border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:15px}.fw-client-quote-summary strong{color:#eef4ff}.fw-client-quote-summary span{font-size:10px;color:#9faabd}
.fw-client-quote-privacy{margin:0 18px;padding:10px 12px;border-radius:7px;background:#0e141f;color:#8391a7;font-size:10px;line-height:1.45;border:1px solid #263248}.fw-client-quote-modal .fw-rfq-actions{padding:0 18px}.fw-client-request-btn{min-width:140px}.fw-client-quote-result{padding:0 18px 18px}.fw-client-quote-success{border:1px solid rgba(110,231,165,.35);background:rgba(110,231,165,.07);border-radius:8px;padding:11px 12px;display:flex;flex-direction:column;gap:3px}.fw-client-quote-success strong{color:#6ee7a5}.fw-client-quote-success span{color:#bdc8d8;font-size:10px;line-height:1.45}
@media(max-width:760px){.fw-rfq-detail-grid,.fw-client-quote-grid{grid-template-columns:1fr}.fw-rfq-detail-grid>div:nth-child(odd){border-right:0}.fw-client-quote-notes{grid-column:auto}}


/* ──────────────────────────────────────────────────────────────────────────
   FrameWork v205.2 — shared Designer shell
   The Operations and Client designers use this exact same left-rail layout.
   Compact project/setup accordions stay at the top; Design fills the rest.
   ────────────────────────────────────────────────────────────────────────── */
#left-panel .panel-body{
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
  padding-bottom:10px;
}
#left-panel .project-details,
#left-panel .project-frame-manager,
#left-panel .fw-sidebar-secondary{
  flex:0 0 auto;
}
#left-panel .fw-design-panel{flex:0 0 auto;min-height:0;}
#left-panel .fw-design-panel[open]{
  flex:1 1 auto;
  min-height:0;
  margin-bottom:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
#left-panel .fw-design-panel[open] > summary{flex:0 0 auto;}
#left-panel .fw-design-panel[open] > .fw-design-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding-bottom:18px;
  scrollbar-width:auto;
  scrollbar-color:var(--border2) transparent;
}
#left-panel .fw-design-panel[open] > .fw-design-body::-webkit-scrollbar{width:8px;}
#left-panel .fw-design-panel[open] > .fw-design-body::-webkit-scrollbar-track{background:transparent;}
#left-panel .fw-design-panel[open] > .fw-design-body::-webkit-scrollbar-thumb{
  background:rgba(232,238,252,.18);border-radius:8px;
}
#left-panel .fw-design-panel[open] > .fw-design-body::-webkit-scrollbar-thumb:hover{
  background:rgba(232,238,252,.28);
}
/* Keep the design tabs legible if they stick while the Design body scrolls. */
#left-panel .fw-design-body .cfg-tabs{
  position:sticky;
  top:0;
  z-index:35;
  background:var(--bg2);
  box-shadow:0 6px 8px rgba(0,0,0,.30),0 1px 0 var(--border2);
}

/* ──────────────────────────────────────────────────────────────────────────
   FrameWork v205.2.3 — stable shared sidebar layout
   Design owns the remaining rail height. Its tabs form an opaque sticky
   header; only the control content scrolls beneath, with no exposed strip
   where labels can bleed above the tabs.
   ────────────────────────────────────────────────────────────────────────── */
#left-panel .panel-body{
  height:100%;
  min-height:0;
  overflow:hidden!important;
}
#left-panel .fw-design-panel[open]{
  flex:1 1 0!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  overflow:hidden!important;
}
#left-panel .fw-design-panel[open] > .fw-design-body{
  flex:1 1 0!important;
  min-height:0!important;
  height:0; /* forces the flex child to use only the remaining rail height */
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:0 8px 16px!important;
  position:relative;
  overscroll-behavior:contain;
}
#left-panel .fw-design-body .cfg-tabs{
  position:sticky!important;
  top:0!important;
  z-index:80!important;
  margin:0 -8px 9px!important;
  padding:7px 8px 6px!important;
  min-height:44px;
  background:#161616!important;
  border-bottom:1px solid var(--border2)!important;
  box-shadow:0 7px 10px rgba(0,0,0,.48)!important;
}
#left-panel .fw-design-body .cfg-tab-panel{
  position:relative;
  z-index:1;
}
#left-panel .fw-design-body > [id^="cfg-"]{
  min-height:0;
}
#left-panel .fw-design-panel:not([open]){
  flex:0 0 auto!important;
  height:auto!important;
}


/* v205.2.3 — keep section pickers as overlay dropdowns. JavaScript sizes each
   open picker to the remaining visible Design area; never place it in flow. */
#left-panel .fw-design-body .sec-panel{overflow-y:auto;overflow-x:hidden;}

/* ──────────────────────────────────────────────────────────────────────────
   FrameWork v205.2.5 — Design accordion structural grid fix
   Chromium does not reliably honour the previous height:0/flex-grow pattern
   on an open <details>. Use an explicit two-row grid instead:
   fixed accordion summary + one minmax(0,1fr) scrolling Design body.
   ────────────────────────────────────────────────────────────────────────── */
#left-panel .fw-design-panel[open]{
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  flex:1 1 0!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  overflow:hidden!important;
}
#left-panel .fw-design-panel[open] > summary{
  grid-row:1;
  min-height:32px!important;
  flex:none!important;
}
#left-panel .fw-design-panel[open] > .fw-design-body{
  grid-row:2;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  flex:none!important;
  display:block!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:0 8px 16px!important;
  position:relative;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
}
#left-panel .fw-design-body .cfg-tabs{
  position:sticky!important;
  top:0!important;
  z-index:80!important;
  margin:0 -8px 9px!important;
  padding:7px 8px 6px!important;
  min-height:44px!important;
  background:#161616!important;
  border-bottom:1px solid var(--border2)!important;
  box-shadow:0 7px 10px rgba(0,0,0,.48)!important;
}

/* ──────────────────────────────────────────────────────────────────────────
   FrameWork v205.2.5 — exact Design scroll viewport fill
   The outer Design accordion already owns the remaining left-rail height.
   Bypass <details> content sizing entirely: pin the Design body from the
   measured summary/header height to the bottom edge of the accordion.
   ────────────────────────────────────────────────────────────────────────── */
#left-panel .fw-design-panel[open]{
  position:relative!important;
  display:block!important;
  flex:1 1 0!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  overflow:hidden!important;
}
#left-panel .fw-design-panel[open] > summary{
  position:relative!important;
  z-index:95!important;
  display:flex!important;
  min-height:32px!important;
}
#left-panel .fw-design-panel[open] > .fw-design-body{
  position:absolute!important;
  top:var(--fw-design-summary-h,32px)!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:0 8px 16px!important;
  box-sizing:border-box!important;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
}
#left-panel .fw-design-body .cfg-tabs{
  position:sticky!important;
  top:0!important;
  z-index:100!important;
  margin:0 -8px 9px!important;
  padding:7px 8px 6px!important;
  background:#161616!important;
}

/* ──────────────────────────────────────────────────────────────────────────
   FrameWork v205.15.61 — Section Library table layout repair
   Operator Section Library has 10 cells per row (#, name, X, Y, t, kg/m,
   stock, cost, sell, delete). The older 7-column grid caused later cells to
   wrap into subsequent CSS-grid rows and appear scattered/overlapping.
   Client read-only mode intentionally remains a 7-column table.
   ────────────────────────────────────────────────────────────────────────── */
.cost-modal{
  width:min(1280px,calc(100vw - 24px));
}
.sec-grid-area{
  min-width:0;
}
.sec-grid-info{
  gap:10px;
  min-width:0;
}
#sec-grid-title{
  flex:1 1 auto;
  min-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sec-price-mode-control{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
  white-space:nowrap;
}
.sec-price-mode-control select{
  min-width:148px;
}
#sec-grid-count,
.sec-save-state{
  flex:0 0 auto;
  white-space:nowrap;
}
.sec-grid-scroll{
  overflow:auto;
  scrollbar-gutter:stable;
}
.sec-grid-scroll::-webkit-scrollbar{
  width:7px;
  height:7px;
}
.sec-grid{
  grid-template-columns:
    32px
    minmax(220px,1.6fr)
    68px
    68px
    68px
    88px
    92px
    108px
    108px
    34px;
  min-width:930px;
  width:100%;
  align-content:start;
}
.sec-grid.client-readonly{
  grid-template-columns:32px minmax(240px,1fr) 72px 72px 72px 92px 92px;
  min-width:720px;
}
.sec-grid>.hdr>div{
  box-sizing:border-box;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sec-grid>.row>div{
  box-sizing:border-box;
  min-width:0;
}
.sec-grid>.row>div:nth-child(n+3):not(.sec-cell-del){
  justify-content:flex-end;
}
.sec-cell-calc,
.sec-readonly-value{
  padding:0 7px!important;
  justify-content:flex-end;
  font-family:'DM Mono',monospace;
  font-size:11px;
  color:var(--green);
  white-space:nowrap;
}
.sec-readonly-name{
  padding:0 7px!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sec-inp{
  box-sizing:border-box;
  min-width:0;
}
.sec-name-inp{
  text-align:left;
}
.sec-add-fields{
  display:grid;
  grid-template-columns:82px 82px minmax(170px,1fr) 68px 68px 68px 92px 104px 104px auto;
  gap:5px;
  overflow-x:auto;
  scrollbar-gutter:stable;
}
.sec-add-fields>input,
.sec-add-fields>select{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
@media(max-width:900px){
  .cost-modal{width:calc(100vw - 12px)}
  .sec-nav{width:112px}
  .sec-grid{min-width:900px}
  .sec-grid-info{padding-left:8px;padding-right:8px}
  .sec-save-state{display:none}
}