/* ══════════════════════════════════════════════════════════════════
       ENGINEERING CONSOLE — EdgeAI System Designer
       ══════════════════════════════════════════════════════════════════ */

    /* ── Two-pane shell ──────────────────────────────────────────────── */
    /* Match .site-nav height (60px) so the left pane footer is not clipped */
    .designer-shell {
      display: flex;
      height: calc(100vh - 60px);
      overflow: hidden;
    }

    /* ── LEFT PANE — fixed header/rail, scrollable editor ────────────── */
    .designer-pane-left {
      width: 20%;
      min-width: 180px;
      max-width: 45%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: var(--bg);
      transition: width 0.2s ease, min-width 0.2s ease;
    }
    .designer-pane-left.collapsed {
      width: 0 !important;
      min-width: 0 !important;
      overflow: hidden;
    }
    .designer-pane-left.collapsed > *:not(.pane-collapse-bar) { display: none; }

    .pane-header {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      padding: 0.5rem 1rem;
      flex-shrink: 0;
    }
    .pane-header h1 {
      font-size: 0.85rem;
      font-weight: 700;
      margin: 0;
      white-space: nowrap;
      color: var(--text);
    }
    .pane-header .mode-toggle {
      display: flex;
      gap: 0;
      margin: 0;
      border: 1px solid var(--border);
      border-radius: 6px;
      overflow: hidden;
      flex-shrink: 0;
      align-self: flex-start;
    }
    .mode-btn {
      padding: 0.3em 0.7em;
      font-size: 0.75rem;
      font-weight: 600;
      font-family: var(--mono);
      background: transparent;
      color: var(--text-dim);
      border: none;
      cursor: pointer;
      transition: all 0.12s;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .mode-btn:first-child { border-right: 1px solid var(--border); }
    .mode-btn.active { background: var(--accent); color: var(--bg); }
    .mode-btn:hover:not(.active) { color: var(--text); }

    /* ── Collapse toggle — centered on separator ───────────────────── */
    .btn-collapse-pane { display: none; } /* hidden — replaced by separator toggle */

    .btn-pane-toggle {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 25;
      width: 20px; height: 40px;
      padding: 0;
      font-size: 0.7rem;
      font-family: var(--mono);
      background: var(--surface);
      color: var(--text-dim);
      border: 1px solid var(--border);
      cursor: pointer;
      transition: all 0.15s;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }
    .btn-pane-toggle:hover { border-color: var(--accent); color: var(--accent); background: var(--bg); }
    .designer-shell.pane-collapsed .pane-resizer { position: relative; }
    .designer-shell.pane-collapsed .btn-pane-toggle { left: 10px; transform: translateY(-50%); }

    /* ── Section rail ────────────────────────────────────────────────── */
    .section-rail {
      display: flex;
      gap: 0;
      flex-shrink: 0;
      border-bottom: 1px solid var(--border);
      padding: 0 1rem;
    }
    .rail-btn {
      padding: 0.4em 0.5em;
      font-size: 0.72rem;
      font-weight: 700;
      color: var(--text-dim);
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      cursor: pointer;
      transition: all 0.12s;
      white-space: nowrap;
      font-family: inherit;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .rail-btn:hover { color: var(--text); }
    .rail-btn.active {
      color: var(--accent);
      border-bottom-color: var(--accent);
    }

    /* ── Narrow panel: stack sections vertically ──────────────────────── */
    .designer-pane-left.narrow-panel .section-rail {
      flex-direction: column;
      padding: 0;
    }
    .designer-pane-left.narrow-panel .rail-btn {
      border-bottom: none;
      border-left: 2px solid transparent;
      padding: 0.4em 0.6em;
      font-size: 0.65rem;
    }
    .designer-pane-left.narrow-panel .rail-btn.active {
      border-left-color: var(--accent);
      border-bottom-color: transparent;
    }
    .designer-pane-left.narrow-panel .rail-btn .rail-summary { display: none; }
    .designer-pane-left.narrow-panel .opt-row { flex-direction: column; }
    .designer-pane-left.narrow-panel .opt { font-size: 0.65rem; padding: 0.3em 0.5em; }

    /* ── Editor panel (scrollable) ────────────────────────────────────── */
    .editor-panel {
      flex: 1;
      overflow-y: auto;
      padding: 0.75rem 1rem;
    }
    .editor-section { display: none; }
    .editor-section.active { display: block; }

    /* ── Resizer ─────────────────────────────────────────────────────── */
    .pane-resizer {
      width: 4px;
      cursor: col-resize;
      background: var(--border);
      flex-shrink: 0;
      transition: background 0.15s;
      position: relative;
      z-index: 20;
    }
    .pane-resizer:hover, .pane-resizer.dragging { background: var(--accent); }
    .pane-resizer::after {
      content: '';
      position: absolute;
      top: 0; bottom: 0; left: -4px; right: -4px;
    }

    /* ── RIGHT PANE ──────────────────────────────────────────────────── */
    .designer-pane-right {
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    /* Override old single-column constraints */
    .designer-form { max-width: none; padding: 0; }
    #results-section {
      display: none;
      flex: 1;
      overflow: hidden;
      flex-direction: column;
    }
    #results-section[style*="block"] { display: flex !important; }

    /* ── Status strip (telemetry header) ──────────────────────────────── */
    .status-strip {
      display: none;
      flex-shrink: 0;
      padding: 0.4rem 1rem;
      background: rgba(0, 212, 255, 0.04);
      border-bottom: 1px solid var(--border);
      font-size: 0.7rem;
      color: var(--text-dim);
      gap: 0.5rem;
      align-items: center;
      flex-wrap: wrap;
    }
    .status-strip.visible { display: flex; }
    .status-strip .ss-config {
      font-family: var(--mono);
      color: var(--text-mid);
    }
    .status-strip .ss-divider {
      color: var(--border);
      margin: 0 0.25rem;
    }
    .status-strip .ss-rec {
      color: var(--accent);
      font-weight: 600;
    }
    .ss-status {
      font-family: var(--mono);
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      height: 18px;
    }
    .ss-status.viable { background: rgba(16,185,129,0.15); color: var(--accent3); border: 1px solid rgba(16,185,129,0.3); }
    .ss-status.medium { background: rgba(255,165,0,0.15); color: #ffa500; border: 1px solid rgba(255,165,0,0.3); }
    .ss-status.not-viable { background: rgba(239,68,68,0.15); color: var(--danger); border: 1px solid rgba(239,68,68,0.3); }

    /* ── Workspace tabs ──────────────────────────────────────────────── */
    .workspace-tab-strip {
      display: flex;
      gap: 0;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      padding: 0 1rem;
      align-items: center;
    }
    .currency-selector {
      margin-left: auto;
      flex-shrink: 0;
    }
    .currency-selector select {
      font-family: var(--mono);
      font-size: 0.7rem;
      background: var(--surface);
      color: var(--text-dim);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 3px 6px;
      cursor: pointer;
    }
    .currency-selector select:hover { border-color: var(--accent); color: var(--text); }
    .fx-est {
      font-size: 0.75em;
      opacity: 0.6;
      margin-left: 0.3em;
    }
    .workspace-tab {
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--text-dim);
      background: none;
      border: none;
      padding: 0.55em 1em;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: all 0.12s;
      font-family: var(--mono);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .workspace-tab:hover { color: var(--text); }
    .workspace-tab.active {
      color: var(--accent);
      border-bottom-color: var(--accent);
    }
    .workspace-tab-content {
      display: none;
      flex: 1;
      overflow-y: auto;
      padding: 0 1rem 0.75rem;
    }
    .workspace-tab-content.active { display: block; }

    /* ── Quick/Advanced mode ──────────────────────────────────────────── */
    .quick-mode .advanced-field { display: none; }

    /* ── Sticky action bar ────────────────────────────────────────────── */
    .pane-action-bar {
      flex-shrink: 0;
      background: var(--bg);
      padding: 0.5rem 1rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
      border-top: 1px solid var(--border);
    }

    /* ── Empty state ──────────────────────────────────────────────────── */
    .results-empty {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      text-align: center;
      padding: 2rem;
    }
    .results-empty-inner { max-width: 300px; }
    .results-empty-icon { font-size: 2.5rem; color: var(--text-dim); margin-bottom: 0.75rem; opacity: 0.3; }
    .results-empty-title { font-size: 0.95rem; font-weight: 600; color: var(--text-mid); margin-bottom: 0.4rem; }
    .results-empty-text { font-size: 0.8rem; color: var(--text-dim); line-height: 1.5; }

    /* ── Mobile ──────────────────────────────────────────────────────── */
    .mobile-view-toggle {
      display: none;
      position: fixed; bottom: 1rem; right: 1rem; z-index: 100;
      background: var(--accent); color: var(--bg); border: none;
      padding: 0.75em 1.25em; font-size: 0.85rem; font-weight: 700;
      font-family: inherit; border-radius: 2px; cursor: pointer;
      box-shadow: 0 2px 12px rgba(0,0,0,0.3);
    }
    @media (max-width: 900px) {
      .designer-shell { flex-direction: column; height: auto; overflow: visible; }
      .pane-resizer { display: none; }
      .designer-pane-left, .designer-pane-right { width: 100% !important; min-width: 0; max-width: none; height: auto; overflow: visible; }
      .editor-panel { overflow: visible; }
      .mobile-view-toggle { display: block; }
      .workspace-tab-strip { overflow-x: auto; }
      .status-strip { font-size: 0.65rem; }
      .sim-workspace { flex-direction: column; }
      .sim-controls-col, .sim-results-col { width: 100%; }
    }

    /* ── Form inputs ─────────────────────────────────────────────────── */
    .input-row { margin-bottom: 0.6rem; }
    .input-label {
      display: block;
      font-size: 0.75rem;
      font-weight: 500;
      color: var(--text-mid);
      margin-bottom: 0.3rem;
    }
    .opt-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
    .opt {
      padding: 0.4em 0.8em;
      background: var(--surface2);
      border: 1px solid transparent;
      border-radius: 2px;
      cursor: pointer;
      font-size: 12px;
      color: var(--text);
      transition: all 0.12s;
      font-family: inherit;
    }
    .opt:hover { border-color: var(--accent); }
    .opt.selected {
      background: var(--accent);
      color: var(--bg);
      border-color: var(--accent);
      font-weight: 600;
    }
    input[type="number"], input[type="text"] {
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 0.45em 0.7em;
      border-radius: 2px;
      font-size: 12px;
      font-family: inherit;
      width: 100px;
    }
    input[type="number"]:focus, input[type="text"]:focus { outline: 1px solid var(--accent); }
    .input-inline { display: flex; align-items: center; gap: 0.5rem; }
    .input-unit { font-size: 0.72rem; color: var(--text-dim); font-family: var(--mono); }

    /* ── Goal options ────────────────────────────────────────────────── */
    .goal-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 0.4rem;
    }
    .goal-opt {
      padding: 0.55em 0.75em;
      background: var(--surface2);
      border: 1px solid transparent;
      border-radius: 2px;
      cursor: pointer;
      font-size: 12px;
      color: var(--text);
      text-align: left;
      font-family: inherit;
      transition: all 0.12s;
    }
    .goal-opt .goal-title { font-weight: 600; display: block; margin-bottom: 0.1rem; font-size: 12px; }
    .goal-opt .goal-sub { font-size: 10px; color: var(--text-dim); font-family: var(--mono); }
    .goal-opt:hover { border-color: var(--accent); }
    .goal-opt.selected { border-color: var(--accent); background: rgba(0,212,255,0.06); }
    .goal-opt.selected .goal-title { color: var(--accent); }

    /* ── Section navigation ──────────────────────────────────────────── */
    .section-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 0.5rem;
      margin-top: 0.5rem;
    }
    .section-nav-btn {
      font-size: 0.68rem;
      color: var(--text-dim);
      background: none;
      border: 1px solid var(--border);
      padding: 0.3em 0.8em;
      cursor: pointer;
      transition: all 0.12s;
      font-family: inherit;
    }
    .section-nav-btn:hover { border-color: var(--accent); color: var(--accent); }
    .section-nav-spacer { flex: 1; }

    /* ── Run button ───────────────────────────────────────────────────── */
    .btn-design {
      background: var(--gradient-accent);
      color: var(--bg);
      border: none;
      padding: 0.7em 2em;
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-family: var(--mono);
      transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), opacity var(--duration);
      box-shadow: 0 2px 8px rgba(0,212,255,0.15);
      width: 100%;
    }
    .btn-design:hover { opacity: 0.92; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,212,255,0.22); }

    /* ── Progress bar ────────────────────────────────────────────────── */
    #progress-wrap { max-width: none; margin: 0; padding: 0 1rem 0.5rem; display: none; }
    .progress-label { font-family: var(--mono); font-size: 0.72rem; color: var(--text-mid); margin-bottom: 0.4rem; }
    .progress-bar { height: 2px; background: var(--border); border-radius: 2px; overflow: hidden; }
    .progress-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.4s ease; }
    .analysis-error { font-family: var(--mono); font-size: 0.8rem; color: #ff4444; padding: 0.6rem; border: 1px solid #ff4444; border-radius: 2px; }

    /* ══════════════════════════════════════════════════════════════════
       SUMMARY TAB — Dashboard layout
       ══════════════════════════════════════════════════════════════════ */

    /* ── Recommendation card (compact) ───────────────────────────────── */
    .rec-card {
      padding: 0.75rem;
      margin-bottom: 0.75rem;
      background: rgba(0,212,255,0.03);
      border-left: 3px solid var(--accent);
    }
    .rec-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      margin-bottom: 0.75rem;
      flex-wrap: wrap;
    }
    .rec-platform-name {
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--text);
      margin: 0;
    }
    .rec-tagline {
      font-size: 0.78rem;
      color: var(--text-dim);
      font-family: var(--mono);
    }

    /* ── Metric grid override: 7 columns ─────────────────────────────── */
    .metric-grid-7 { grid-template-columns: repeat(7, 1fr) !important; }
    @media (max-width: 900px) { .metric-grid-7 { grid-template-columns: repeat(4, 1fr) !important; } }
    @media (max-width: 600px) { .metric-grid-7 { grid-template-columns: repeat(2, 1fr) !important; } }
    .metric-grid-7 .metric-cell-label { font-size: 12px; color: #00d4ff; text-align: center; }
    .metric-grid-7 .metric-cell-primary { font-size: 15px; text-align: center; }
    .metric-grid-7 .metric-cell-secondary { text-align: center; }
    .metric-grid-7 .metric-cell { text-align: center; }

    /* ── Compute rows with visible borders ────────────────────────────── */
    .compute-row-bordered {
      display: flex; justify-content: space-between; gap: 0.75rem;
      font-size: 0.82rem; font-family: var(--mono); color: var(--text-mid);
      padding: 0.4rem 0; border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .compute-row-bordered:last-child { border-bottom: none; }
    .compute-row-bordered .compute-label { color: var(--text-dim); }
    .compute-row-bordered .compute-val { color: var(--text); }
    .compute-row-bordered .compute-headroom-val { color: var(--accent); font-weight: 600; }
    .cost-total-row { border-top: 2px solid var(--border); font-weight: 700; margin-top: 0.25rem; padding-top: 0.3rem; }

    /* ── Telemetry KPI strip ─────────────────────────────────────────── */
    .results-divider { display: none; }

    /* ── No-viable block ─────────────────────────────────────────────── */
    #no-viable-block { display: none; margin: 0.75rem 0; padding: 0; }

    /* Multi-node architecture section */
    #architecture-block { margin: 0.75rem 0; }
    .arch-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 20px 24px; margin-bottom: 12px; }
    .arch-card h3 { font-size: 1rem; margin: 0 0 4px; color: var(--text); font-family: var(--mono); }
    .arch-summary-name { font-size: 1.3rem; font-weight: 700; color: var(--accent); margin: 8px 0 16px; }
    .arch-nodes { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
    .arch-node {
      flex: 1 1 140px; background: #141820; border: 1px solid var(--border); border-radius: 6px;
      padding: 12px 14px; font-size: 0.82rem;
    }
    .arch-node-label { font-family: var(--mono); font-size: 0.72rem; color: var(--text-dim); margin-bottom: 4px; }
    .arch-node-cams { font-size: 1rem; font-weight: 600; color: var(--text); }
    .arch-node-platform { font-size: 0.78rem; color: var(--text-mid); margin-top: 4px; }
    .arch-totals { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
    .arch-total { text-align: center; }
    .arch-total-val { font-size: 1.1rem; font-weight: 700; color: var(--text); font-family: var(--mono); }
    .arch-total-label { font-size: 0.68rem; color: var(--text-dim); font-family: var(--mono); text-transform: uppercase; }
    .arch-bottleneck { font-size: 0.82rem; color: var(--warn); font-family: var(--mono); margin-bottom: 16px; }
    .arch-confidence { font-size: 0.75rem; font-family: var(--mono); margin-bottom: 16px; }
    .arch-alt { background: #141820; border: 1px solid var(--border); border-radius: 6px; padding: 14px 18px; margin-bottom: 12px; }
    .arch-alt-label { font-size: 0.72rem; color: var(--text-dim); font-family: var(--mono); text-transform: uppercase; margin-bottom: 6px; }
    .arch-alt-name { font-size: 0.95rem; font-weight: 600; color: var(--text); margin-bottom: 4px; }
    .arch-alt-tradeoff { font-size: 0.78rem; color: var(--text-dim); }
    .arch-infra-note { font-size: 0.72rem; color: var(--text-dim); font-style: italic; }
    .no-viable-msg { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.75rem; background: rgba(255,68,68,0.06); border-left: 3px solid var(--danger); }
    .nv-icon { color: #ff4444; font-size: 1rem; flex-shrink: 0; }
    .nv-text { color: var(--text); font-size: 0.85rem; }
    .nv-demand { margin-top: 0.4rem; font-size: 0.75rem; color: var(--text-dim); }
    .nv-suggestions { margin-top: 0.5rem; }
    .nv-suggestion { font-size: 0.78rem; color: var(--text-mid); padding: 0.15rem 0; }
    .loading-val { color: var(--text-dim); font-style: italic; }

    /* ── Reasons ──────────────────────────────────────────────────────── */
    .reasons-block { margin-top: 0.75rem; }
    .reasons-title {
      font-family: var(--mono);
      font-size: 0.62rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-dim);
      margin-bottom: 0.35rem;
      font-weight: 700;
    }
    .reason-item {
      font-size: 0.8rem;
      color: var(--text-mid);
      margin-bottom: 0.25rem;
      display: flex;
      gap: 0.4rem;
      align-items: flex-start;
    }
    .reason-tick { color: var(--accent); flex-shrink: 0; }

    /* ── Decision analysis accordion ───────────────────────────────────── */
    .decision-accordion { margin: 0.75rem 0; display: flex; flex-direction: column; gap: 0; }
    .decision-section {
      border: 1px solid var(--border); border-top: none;
      background: var(--surface2);
    }
    .decision-section:first-child { border-top: 1px solid var(--border); }
    .decision-section summary {
      font-family: var(--mono); font-size: 13px; font-weight: 700;
      color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em;
      padding: 0.5rem 0.75rem; cursor: pointer; list-style: none;
      display: flex; align-items: center; gap: 0.5rem;
      transition: color 0.12s, background 0.12s;
      user-select: none;
    }
    .decision-section summary::-webkit-details-marker { display: none; }
    .decision-section summary::before { content: '▸'; font-size: 0.65rem; color: var(--accent); flex-shrink: 0; }
    .decision-section[open] summary::before { content: '▾'; }
    .decision-section summary:hover { color: var(--text); background: rgba(255,255,255,0.02); }
    .decision-section[open] summary { color: var(--accent); border-bottom: 1px solid var(--border); }
    .decision-section-body { padding: 0.6rem 0.75rem; }

    /* ── Risk flags ───────────────────────────────────────────────────── */
    .risk-fail .risk-icon { color: var(--danger); }
    .risk-warn .risk-icon { color: var(--warn); }
    .risk-label { margin-right: 0.1rem; }
    .risk-suggestions { margin-top: 0.3rem; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.15rem; }
    .risk-suggestion { font-size: 0.72rem; color: var(--text-mid); font-family: var(--mono); }
    .risk-suggestion.positive { color: #00c875; }

    /* ── Tradeoff tabs ────────────────────────────────────────────────── */
    .tabs-section { margin: 0.75rem 0; }
    .tradeoff-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
    .tradeoff-table th {
      text-align: left; padding: 0.4rem 0.6rem;
      font-size: 0.68rem; font-family: var(--mono);
      color: var(--text-dim); border-bottom: 1px solid var(--border); font-weight: 600;
    }
    .tradeoff-table td { padding: 0.4rem 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.03); color: var(--text-mid); }
    .tradeoff-table .row-label { color: var(--text-dim); font-family: var(--mono); font-size: 0.72rem; }
    .tradeoff-table .col-primary { color: var(--text); font-weight: 600; }

    /* ── Deployment summary grid ──────────────────────────────────────── */
    .summary-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 1px;
      background: var(--border);
      overflow: hidden;
      margin-bottom: 0.75rem;
    }
    .summary-row { background: var(--surface2); padding: 0.5rem 0.65rem; display: flex; flex-direction: column; gap: 0.15rem; }
    .summary-label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); font-weight: 600; }
    .summary-value { font-size: 0.82rem; color: var(--text); font-weight: 500; }

    /* ── Alternatives ─────────────────────────────────────────────────── */
    .alt-pos-label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 0.3rem; font-weight: 600; }
    .alt-metrics { font-size: 0.75rem; color: var(--text-mid); font-family: var(--mono); display: flex; flex-direction: column; gap: 0.2rem; }
    .alt-delta { margin-top: 0.4rem; font-size: 0.7rem; color: var(--text-dim); font-family: var(--mono); border-top: 1px solid rgba(255,255,255,0.04); padding-top: 0.4rem; }
    .no-alts { font-size: 0.78rem; color: var(--text-dim); font-family: var(--mono); }

    /* ── Actions row ──────────────────────────────────────────────────── */
    .actions-row {
      display: flex;
      gap: 0.6rem;
      flex-wrap: wrap;
      padding: 0.9rem 0;
      border-top: 1px solid var(--border);
      align-items: center;
    }
    .actions-row .action-btn,
    .actions-row .btn-feedback,
    .actions-row .btn-reset {
      min-height: 34px;
      padding: 8px 14px;
      line-height: 1.1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      margin-top: 0;
      font-size: 11px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    #exports-section #link-planner {
      background: var(--gradient-accent);
      color: var(--bg);
      border-color: transparent;
      font-weight: 600;
      box-shadow: 0 2px 8px rgba(0,212,255,0.15);
    }
    #exports-section #link-planner:hover {
      color: var(--bg);
      box-shadow: 0 4px 14px rgba(0,212,255,0.22);
    }
    .output-nav-links {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 10px 16px;
      border-top: 1px solid var(--border);
      background: var(--surface);
    }
    .output-nav-label {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--text-dim);
      letter-spacing: 0.08em;
      white-space: nowrap;
    }
    .output-nav-link {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--text-mid);
      text-decoration: none;
      transition: color 0.15s;
    }
    .output-nav-link:hover { color: var(--accent); }

    /* ── Compute summary ─────────────────────────────────────────────── */
    .compute-row { display: flex; justify-content: space-between; gap: 0.75rem; color: var(--text-mid); }
    .compute-label { color: var(--text-dim); }
    .compute-val { color: var(--text); }
    .compute-headroom-val { color: var(--accent); font-weight: 600; }

    /* ── Excluded platforms ───────────────────────────────────────────── */
    .excluded-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; padding: 0.35rem 0; border-bottom: 1px solid rgba(255,255,255,0.03); font-size: 0.78rem; }
    .excluded-item:last-child { border-bottom: none; }
    .excluded-name { font-weight: 600; color: var(--text); min-width: 150px; }
    .excluded-reason { color: var(--text-dim); font-family: var(--mono); font-size: 0.72rem; }

    /* ── Source tags ──────────────────────────────────────────────────── */
    .source-tag { display: block; font-size: 0.62rem; font-family: var(--mono); color: var(--text-dim); letter-spacing: 0.03em; margin-top: 2px; }
    .source-row { align-items: baseline; }
    .source-ok { color: var(--text); }
    .source-miss { color: var(--text-dim); }
    .source-ok .src-icon { color: var(--accent); }
    .source-miss .src-icon { color: var(--text-dim); }
    .src-label { color: var(--text); }
    .src-desc { color: var(--text-dim); font-size: 0.65rem; }

    /* ── Responsive ──────────────────────────────────────────────────── */
    @media (max-width: 700px) { .metric-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 480px) { .metric-grid { grid-template-columns: 1fr 1fr; } .goal-row { grid-template-columns: 1fr; } }

    /* ══════════════════════════════════════════════════════════════════
       ARCHITECTURE TAB — Canvas workspace
       ══════════════════════════════════════════════════════════════════ */
    #tab-architecture {
      display: none;
      flex-direction: column;
    }
    #tab-architecture.active { display: flex !important; }
    .arch-context {
      display: flex;
      gap: 1rem;
      padding: 0.4rem 0;
      font-size: 0.68rem;
      color: var(--text-dim);
      flex-shrink: 0;
    }
    .arch-context span { font-family: var(--mono); }
    .arch-context strong { color: var(--text-mid); font-weight: 600; }
    .diagram-wrap {
      position: relative;
      background: var(--surface);
      overflow: hidden;
      flex: 1;
      min-height: 300px;
    }
    .diagram-title-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 12px;
      background: rgba(0,0,0,0.15);
      border-bottom: 1px solid var(--border);
    }
    .diagram-title-bar .dtitle { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.06em; }
    .diagram-actions { display: flex; gap: 4px; }
    .btn-diag-action {
      font-family: var(--mono); font-size: 10px; color: var(--text-dim);
      background: none; border: 1px solid var(--border); padding: 3px 8px;
      border-radius: var(--radius-sm); cursor: pointer; transition: all var(--duration) var(--ease);
    }
    .btn-diag-action:hover { border-color: var(--accent); color: var(--accent); background: rgba(0,212,255,0.06); transform: translateY(-1px); }
    .btn-diag-theme {
      font-family: var(--mono); font-size: 10px; color: var(--text-dim);
      background: none; border: 1px solid var(--border); padding: 3px 10px;
      border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; gap: 4px; transition: all var(--duration) var(--ease);
    }
    .btn-diag-theme:hover { border-color: var(--accent); color: var(--accent); background: rgba(0,212,255,0.06); transform: translateY(-1px); }
    #diag-canvas svg { width: 100%; height: auto; display: block; }
    .arch-export-row {
      display: flex;
      gap: 0.6rem;
      flex-wrap: wrap;
      padding: 0.9rem 0;
      border-top: 1px solid var(--border);
      flex-shrink: 0;
    }
    .arch-export-row .action-btn {
      min-height: 34px;
      padding: 8px 14px;
      line-height: 1.1;
      font-size: 11px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    /* ══════════════════════════════════════════════════════════════════
       BOTTLENECK WORKBENCH v3.0 — 4-zone vertical layout
       ══════════════════════════════════════════════════════════════════ */
    .sim-intro { font-size: 0.86rem; color: var(--text-dim); margin-bottom: 12px; }
    .sim-badge-online { color: var(--accent3); border: 1px solid rgba(16,185,129,0.3); background: rgba(16,185,129,0.15); border-radius: 12px; }
    .sim-badge-offline { color: var(--warn); border: 1px solid rgba(245,158,11,0.3); background: rgba(245,158,11,0.08); border-radius: 12px; }
    .sim-badge-validating { color: var(--warn); border: 1px solid rgba(245,158,11,0.3); background: rgba(245,158,11,0.08); border-radius: 12px; animation: pulse 0.8s infinite; }

    /* Spec strip — prominent single line */
    .sim-spec-strip {
      display: flex; align-items: center; gap: 8px;
      font-family: var(--mono); font-size: 13px; color: var(--text);
      padding: 6px 10px; margin-bottom: 8px;
      border: 1px solid rgba(0,212,255,0.25); background: rgba(0,212,255,0.04);
      min-height: 28px; overflow: hidden; white-space: nowrap;
    }
    .sim-spec-strip .sim-spec-label { color: var(--accent); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; flex-shrink: 0; }
    .sim-spec-strip .sim-spec-text { flex: 1; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.02em; }
    .sim-spec-badge { font-size: 10px; padding: 2px 7px; flex-shrink: 0; font-weight: 700; font-family: var(--mono); letter-spacing: 0.08em; text-transform: uppercase; border-radius: 12px; }
    .sim-spec-modified { color: var(--accent); border: 1px solid rgba(0,212,255,0.4); background: rgba(0,212,255,0.06); }
    .sim-spec-baseline { color: var(--accent3); border: 1px solid rgba(16,185,129,0.3); background: rgba(16,185,129,0.15); }

    /* Resource + Bottleneck combined row */
    .sim-monitor-row {
      display: flex; gap: 0; margin-bottom: 8px;
      border: 1px solid var(--border); background: var(--surface);
    }
    .sim-monitor-left {
      flex: 0 0 45%; padding: 8px 10px;
      border-right: 1px solid var(--border);
    }
    .sim-monitor-right {
      flex: 0 0 55%; padding: 6px 8px; overflow-y: auto;
    }

    /* Bottleneck panel — inside monitor right */
    .sim-bn-panel {
      font-family: var(--mono); font-size: 13px;
      height: 100%; display: flex; flex-direction: column;
    }
    .sim-bn-ok-state .sim-monitor-right { background: rgba(34,197,94,0.04); }
    .sim-bn-warn-state .sim-monitor-right { background: rgba(245,158,11,0.04); }
    .sim-bn-critical-state .sim-monitor-right { background: rgba(239,68,68,0.06); }
    .sim-bn-ok { color: var(--accent3); font-size: 12px; display: flex; align-items: center; justify-content: center; flex: 1; }
    .sim-bn-ok-icon { margin-right: 4px; }

    /* Bottleneck rows — compact vertical list, single-line items */
    .sim-bn-list { display: flex; flex-direction: column; gap: 0; flex: 1; overflow-y: auto; }
    .sim-bn-item { padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .sim-bn-item:last-child { border-bottom: none; }
    .sim-bn-line { font-size: 12px; line-height: 1.4; }
    .sim-bn-resource-name { font-weight: 600; color: var(--text); }
    .sim-bn-severity { font-size: 8px; padding: 1px 4px; text-transform: uppercase; letter-spacing: 0.08em; vertical-align: middle; }
    .sim-bn-severity-critical { color: var(--danger); border: 1px solid var(--danger); background: rgba(239,68,68,0.08); }
    .sim-bn-severity-warn { color: var(--warn); border: 1px solid var(--warn); background: rgba(245,158,11,0.08); }
    .sim-bn-util { color: var(--text-dim); font-size: 11px; }
    .sim-bn-reason { color: var(--text-mid); font-size: 11px; }
    .sim-bn-fixes { display: flex; gap: 3px; flex-wrap: wrap; }
    .sim-fix-btn {
      font-family: var(--mono); font-size: 10px; padding: 2px 6px;
      background: transparent; color: var(--accent); border: 1px solid rgba(0,212,255,0.3);
      cursor: pointer; transition: all 0.12s;
    }
    .sim-fix-btn:hover { background: rgba(0,212,255,0.08); border-color: var(--accent); }
    .sim-bn-nofix { font-size: 11px; color: var(--text-dim); font-style: italic; }

    /* Section boxes — visible bordered containers */
    .sim-section-box {
      border: 1px solid var(--border); background: var(--surface);
      margin-bottom: 8px; padding: 8px 10px;
    }
    .sim-section-header {
      font-family: var(--mono); font-size: 13px; color: var(--accent);
      text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700;
      margin-bottom: 6px; display: flex; align-items: center; gap: 6px;
    }
    .sim-section-header::after {
      content: ''; flex: 1; height: 1px; background: var(--border);
    }
    .sim-monitor-context {
      font-family: var(--mono); font-size: 11px; color: var(--text-dim);
      margin-bottom: 6px; letter-spacing: 0.02em;
    }
    .sim-monitor-context span { color: var(--accent); font-weight: 600; }

    /* ZONE 2 — 4-column control matrix with inline labels */
    .sim-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
    }
    .sim-grid-cell {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 8px;
      border-bottom: 1px solid rgba(255,255,255,0.04);
      border-right: 1px solid rgba(255,255,255,0.04);
      min-height: 34px;
    }
    .sim-grid-cell:nth-child(4n) { border-right: none; }
    .sim-grid-cell.sim-cell-empty { opacity: 0.3; }
    .sim-grid-label {
      font-family: var(--mono); font-size: 11px; color: var(--text-dim);
      text-transform: uppercase; letter-spacing: 0.06em;
      min-width: 52px; flex-shrink: 0; white-space: nowrap;
    }
    .sim-grid-ctrl { flex: 1; display: flex; align-items: center; min-width: 0; }
    .sim-btn-group { display: flex; gap: 2px; flex-wrap: nowrap; }
    .sim-btn {
      font-family: var(--mono); font-size: 12px; padding: 2px 7px; background: transparent;
      color: var(--text-mid); border: 1px solid var(--border); cursor: pointer;
      transition: all 0.12s; height: 26px; white-space: nowrap;
    }
    .sim-btn:hover { border-color: var(--accent); color: var(--accent); }
    .sim-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(0,212,255,0.08); }
    .sim-select {
      font-family: var(--mono); font-size: 12px; padding: 2px 6px;
      background: var(--surface); color: var(--text); border: 1px solid var(--border);
      outline: none; width: 100%; height: 26px;
    }
    .sim-select:focus { border-color: var(--accent); }

    /* Platform row — full width */
    .sim-platform-row {
      display: flex; align-items: center; gap: 8px;
      padding: 5px 8px; margin-bottom: 6px;
      border: 1px solid var(--border); background: var(--surface);
    }

    /* Numeric stepper */
    .sim-stepper { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--border); height: 26px; }
    .sim-stepper-btn {
      font-family: var(--mono); font-size: 14px; width: 24px; height: 100%;
      background: transparent; color: var(--text-mid); border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center; padding: 0; transition: all 0.12s;
    }
    .sim-stepper-btn:hover { background: rgba(0,212,255,0.08); color: var(--accent); }
    .sim-stepper input {
      font-family: var(--mono); font-size: 13px; width: 36px; height: 100%; text-align: center;
      background: var(--surface); color: var(--accent); border: none; border-left: 1px solid var(--border);
      border-right: 1px solid var(--border); outline: none; -moz-appearance: textfield;
    }
    .sim-stepper input::-webkit-outer-spin-button,
    .sim-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

    /* Legacy compat for sim-controls (unused in new grid) */
    .sim-controls { display: none; }
    .sim-group-header { display: none; }
    .sim-control-group { display: none; }
    .sim-label { display: none; }

    /* ZONE 3 — Resource analysis */
    .sim-platform-conf {
      font-family: var(--mono); font-size: 12px; padding: 6px 10px;
      margin-bottom: 8px; display: flex; align-items: center; gap: 4px;
    }
    .sim-pc-stale, .sim-pc-local { color: var(--warn); border-left: 3px solid var(--warn); background: rgba(245,158,11,0.04); }
    .sim-pc-validating { color: var(--warn); border-left: 3px solid var(--warn); background: rgba(245,158,11,0.04); }
    .sim-pc-validating .sim-pc-icon { animation: pulse 0.8s infinite; }
    .sim-pc-validated { color: var(--accent3); border-left: 3px solid var(--accent3); background: rgba(34,197,94,0.04); }
    .sim-pc-icon { margin-right: 3px; flex-shrink: 0; }
    .sim-pc-dismiss {
      margin-left: auto; background: none; border: none; color: var(--text-dim);
      font-size: 17px; cursor: pointer; padding: 0 2px; line-height: 1;
      transition: color 0.12s; flex-shrink: 0;
    }
    .sim-pc-dismiss:hover { color: var(--text); }
    /* Resource tiles — 5×1 dashboard row */
    .sim-tiles { display: flex; gap: 6px; background: transparent; }
    .sim-tile {
      flex: 1; min-width: 0; padding: 8px 12px;
      background: var(--surface); font-family: var(--mono);
      display: flex; flex-direction: column; gap: 2px;
      border-top: 2px solid transparent; border: 1px solid var(--border);
      border-top: 2px solid transparent; transition: border-color 0.2s;
    }
    .sim-tile.stale { opacity: 0.5; }
    .sim-tile.validating { animation: pulse 0.8s infinite; }
    .sim-tile-bottleneck { border-top-color: var(--danger) !important; border-color: var(--danger); }
    .sim-tile-label { font-size: 13px; color: #00d4ff; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; text-align: center; }
    .sim-tile-value { font-size: 18px; font-weight: 700; line-height: 1.1; text-align: center; }
    .sim-tile-ref { font-size: 10px; color: var(--text-dim); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
    .sim-tile-bar { height: 3px; background: rgba(255,255,255,0.06); border-radius: 1px; overflow: hidden; margin-top: 3px; }
    .sim-tile-bar-fill { height: 100%; border-radius: 1px; transition: width 0.3s ease; }
    .sim-tile-headroom { font-size: 11px; margin-top: 2px; letter-spacing: 0.02em; text-align: center; }
    .sim-tile-bn-tag { font-size: 8px; color: var(--danger); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin-top: 1px; text-align: center; }
    .sim-comparison { display: grid; grid-template-columns: 90px 1fr 1fr; margin-bottom: 10px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm); overflow: hidden; }
    .sim-col-header { font-family: var(--mono); font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; padding: 6px 8px; border-bottom: 1px solid var(--border); background: rgba(0,0,0,0.15); }
    .sim-row-label { font-family: var(--mono); font-size: 11px; color: var(--text-dim); padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,0.03); display: flex; align-items: center; gap: 4px; border-right: 1px solid var(--border); }
    .sim-row-value { font-family: var(--mono); font-size: 12px; color: var(--text); padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,0.03); }
    .sim-col-header:first-child,
    .sim-row-label { border-right: 1px solid var(--border); }
    .sim-comparison > :nth-child(3n+2) { border-right: 1px solid rgba(255,255,255,0.03); }
    .sim-metric-base { color: var(--text-dim); }
    .sim-metric-mod { font-weight: 500; }
    .sim-trust-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; vertical-align: middle; cursor: help; }
    .sim-trust-validated { background: var(--accent3); }
    .sim-trust-instant { background: var(--text-dim); }
    .sim-trust-stale { background: var(--warn); }
    .sim-trust-validating { background: var(--warn); animation: pulse 0.8s infinite; }
    @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

    /* (warnings CSS removed — bottlenecks now rendered inside sim-bn-panel) */

    /* ZONE 4 — Scenarios (collapsed by default via <details>) */
    .sim-scenarios-section { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
    .sim-scenarios-summary-toggle {
      font-family: var(--mono); font-size: 11px; color: var(--accent); text-transform: uppercase;
      letter-spacing: 0.1em; font-weight: 700; cursor: pointer; padding: 4px 0; list-style: none;
    }
    .sim-scenarios-summary-toggle::-webkit-details-marker { display: none; }
    .sim-scenarios-summary-toggle::before { content: '▸ '; }
    details[open] > .sim-scenarios-summary-toggle::before { content: '▾ '; }
    .sim-scenarios-header { font-family: var(--mono); font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 8px; }
    .sim-scenario-save-row { display: flex; gap: 6px; margin-bottom: 10px; align-items: center; }
    .sim-scenario-save-row input { flex: 1; font-family: var(--mono); font-size: 13px; padding: 4px 8px; background: var(--surface); color: var(--text); border: 1px solid var(--border); outline: none; }
    .sim-scenario-save-row input:focus { border-color: var(--accent); }
    .sim-scenario-row {
      display: flex; align-items: center; gap: 6px; padding: 5px 0;
      border-bottom: 1px solid rgba(255,255,255,0.03); font-family: var(--mono); font-size: 12px;
    }
    .sim-scenario-name { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sim-scenario-tag { font-size: 10px; color: var(--text-dim); border: 1px solid var(--border); padding: 1px 5px; text-transform: uppercase; letter-spacing: 0.05em; }
    .sim-scenario-load {
      font-family: var(--mono); font-size: 11px; padding: 2px 7px;
      background: transparent; color: var(--accent2); border: 1px solid rgba(77,240,255,0.3);
      cursor: pointer; transition: all 0.12s;
    }
    .sim-scenario-load:hover { background: rgba(77,240,255,0.08); border-color: var(--accent2); }
    .sim-scenario-del {
      font-family: var(--mono); font-size: 14px; padding: 1px 6px; line-height: 1;
      background: transparent; color: var(--text-dim); border: 1px solid var(--border);
      cursor: pointer; transition: all 0.12s;
    }
    .sim-scenario-del:hover { color: var(--danger); border-color: var(--danger); }
    .sim-scenario-empty { font-family: var(--mono); font-size: 12px; color: var(--text-dim); padding: 6px 0; }

    /* Comparison + Scenarios side-by-side row */
    .sim-bottom-row { display: flex; gap: 8px; margin-bottom: 8px; }
    .sim-bottom-row > details { flex: 1; min-width: 0; }

    /* Presets row */
    .sim-presets { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
    .sim-preset { font-family: var(--mono); font-size: 11px; padding: 3px 8px; background: transparent; color: var(--accent2); border: 1px solid rgba(77,240,255,0.3); cursor: pointer; transition: all 0.12s; text-transform: uppercase; letter-spacing: 0.05em; }
    .sim-preset:hover { background: rgba(77,240,255,0.08); border-color: var(--accent2); }

    @media (max-width: 800px) {
      .sim-grid { grid-template-columns: repeat(3, 1fr); }
      .sim-grid-cell:nth-child(4n) { border-right: 1px solid rgba(255,255,255,0.04); }
      .sim-grid-cell:nth-child(3n) { border-right: none; }
    }
    @media (max-width: 640px) {
      .sim-monitor-row { flex-direction: column; }
      .sim-monitor-left, .sim-monitor-right { flex: none; width: 100%; }
      .sim-monitor-left { border-right: none; border-bottom: 1px solid var(--border); }
      .sim-bottom-row { flex-direction: column; }
      .sim-grid { grid-template-columns: repeat(2, 1fr); }
      .sim-grid-cell:nth-child(3n) { border-right: 1px solid rgba(255,255,255,0.04); }
      .sim-grid-cell:nth-child(2n) { border-right: none; }
      .sim-col-labels { flex: 0 0 80px; }
      .sim-presets { gap: 4px; }
      #diag-canvas svg { height: auto; }
    }
    @media (max-width: 420px) {
      .sim-grid { grid-template-columns: 1fr; }
      .sim-grid-cell:nth-child(2n) { border-right: 1px solid rgba(255,255,255,0.04); }
      .sim-grid-cell { border-right: none !important; }
      .sim-grid-cell.sim-platform-cell { grid-column: span 1; }
    }

    /* ── Legacy compat (unused but referenced) ────────────────────────── */
    .form-section { margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); }
    .form-section:last-of-type { border-bottom: none; }
    .form-section-header { margin-bottom: 1rem; }
    .form-section-label { font-family: var(--mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); font-weight: 700; display: block; margin-bottom: 0.25rem; }
    .form-section-title { font-size: 0.9rem; font-weight: 600; color: var(--text); margin: 0; }
    .config-section-label { font-family: var(--mono); font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); font-weight: 700; margin-left: auto; }
    .run-section { display: none; }

    /* ── Decision Summary Card — Two-Choice Layout ─────────────── */
    .ds-card { padding: 0.9rem 1rem; margin-bottom: 0.75rem; background: rgba(0,212,255,0.04); border: 1px solid var(--border); border-left: 3px solid var(--accent); }
    .ds-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.3rem; }
    .ds-top-label { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: #00d4ff; font-weight: 600; }
    .ds-top-badges { display: flex; gap: 0.4rem; flex-shrink: 0; }
    .ds-evidence { font-family: var(--mono); font-size: 0.68rem; color: var(--text-dim); margin-bottom: 0.5rem; }
    .ds-choices { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border); }
    .ds-choice { padding: 0.6rem 0.75rem; }
    .ds-choice:first-child { border-right: 1px solid var(--border); }
    .ds-choice-badge { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 0.3rem; }
    .ds-choice:first-child .ds-choice-badge { color: var(--accent); }
    .ds-choice:last-child .ds-choice-badge { color: var(--accent2); }
    .ds-choice-name { font-size: 0.88rem; font-weight: 700; color: var(--text); }
    .ds-choice-headroom { font-family: var(--mono); font-size: 0.72rem; font-weight: 600; margin-bottom: 0.15rem; }
    .ds-choice-desc { font-size: 0.72rem; color: var(--text-dim); font-family: var(--mono); margin-bottom: 0.4rem; }
    .ds-choice-section { margin-top: 0.3rem; display: flex; align-items: baseline; gap: 0.4rem; padding: 0.25rem 0.4rem; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); }
    .ds-choice-label { font-family: var(--mono); font-size: 9px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; flex-shrink: 0; min-width: 62px; }
    .ds-choice-value { font-size: 0.75rem; color: var(--text-mid); }
    .ds-assumptions-inline { font-family: var(--mono); font-size: 0.68rem; color: var(--text-dim); margin-top: 0.5rem; padding-top: 0.4rem; border-top: 1px solid rgba(255,255,255,0.04); }
    .ds-assumptions-inline span { color: #00d4ff; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 9px; }
    @media (max-width: 700px) { .ds-choices { grid-template-columns: 1fr; } .ds-choice:first-child { border-right: none; border-bottom: 1px solid var(--border); } }

    /* ── Cost tab ─────────────────────────────────────────────────── */
    .cost-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0; }
    .cost-stat { background: var(--surface); border: 1px solid var(--border); padding: 8px 10px; text-align: center; }
    .cost-stat-label { font-family: var(--mono); font-size: 10px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
    .cost-stat-value { font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--text); }
    .cost-stat-sub { font-family: var(--mono); font-size: 10px; color: var(--text-dim); margin-top: 2px; }
    .cost-section-label { font-family: var(--mono); font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin: 8px 0 4px; }
    .cost-driver { display: flex; justify-content: space-between; align-items: center; padding: 4px 10px; border-bottom: 1px solid rgba(255,255,255,0.03); font-family: var(--mono); font-size: 12px; }
    .cost-driver:last-child { border-bottom: none; }
    .cost-driver-name { color: var(--text-mid); }
    .cost-driver-cost { color: var(--text); font-weight: 600; }
    .cost-driver-pct { color: var(--text-dim); font-size: 10px; margin-left: 6px; }
    .cost-mid-row { display: flex; gap: 8px; margin-top: 4px; }
    .cost-mid-left { flex: 1; min-width: 0; }
    .cost-mid-right { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
    .cost-option { background: var(--surface); border: 1px solid var(--border); padding: 8px 10px; }
    .cost-option-badge { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 4px; }
    .cost-option:first-of-type .cost-option-badge { color: var(--accent3); }
    .cost-option:last-of-type .cost-option-badge { color: var(--accent2); }
    .cost-option-name { font-size: 0.82rem; font-weight: 600; color: var(--text); }
    .cost-option-delta { font-family: var(--mono); font-size: 0.75rem; color: var(--text-dim); margin-top: 2px; }
    .cost-assumptions { font-family: var(--mono); font-size: 0.68rem; color: var(--text-dim); margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.04); }
    .cost-assumptions span { color: #00d4ff; font-weight: 600; text-transform: uppercase; font-size: 9px; letter-spacing: 0.06em; }
    @media (max-width: 700px) { .cost-summary { grid-template-columns: repeat(2, 1fr); } .cost-mid-row { flex-direction: column; } }
    .cost-driver-section { font-family: var(--mono); font-size: 8px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); background: rgba(255,255,255,0.04); padding: 1px 5px; margin-right: 6px; border-radius: 2px; display: inline-block; min-width: 52px; text-align: center; }
    .cost-bom-group-label { font-family: var(--mono); font-size: 10px; color: var(--accent2); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin: 8px 0 3px; padding-bottom: 3px; border-bottom: 1px solid rgba(255,255,255,0.06); }
    .cost-subtotal-row .compute-label, .cost-subtotal-row .compute-val { font-weight: 600; color: var(--text-mid); }
    .cost-option-desc { font-family: var(--mono); font-size: 0.7rem; color: var(--text-dim); margin-top: 3px; line-height: 1.4; }
    .cost-option-core-delta { font-family: var(--mono); font-size: 0.7rem; color: var(--text-mid); margin-top: 2px; }
    .cost-assumption-list { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 2px; }
    .cost-assumption-list li { font-family: var(--mono); font-size: 0.68rem; color: var(--text-dim); }
    .cost-assumption-list li::before { content: '·'; margin-right: 4px; color: var(--text-dim); }
    .cost-assume-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .cost-assume-col { min-width: 0; }
    @media (max-width: 600px) { .cost-assume-row { grid-template-columns: 1fr; } }

    /* ── Unified metrics grid ─────────────────────────────────────── */
    .ds-metrics { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 0.75rem; }
    .ds-metrics .sim-tile { text-align: center; }
    @media (max-width: 900px) { .ds-metrics { grid-template-columns: repeat(4, 1fr); } }
    @media (max-width: 600px) { .ds-metrics { grid-template-columns: repeat(2, 1fr); } }