: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;
}