/* ============================================================================
   app.css — core application styles for the Economic Growth Model.
   Extracted verbatim from the former inline <style> block in index.html for
   organization. Loaded BEFORE assets/supplement-theme.css so the supplement
   chrome overrides these base styles (cascade order preserved).
   ========================================================================== */

        * {
            box-sizing: border-box;
        }
        body {
            font-family: "Courier New", Courier, monospace, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
            max-width: 1800px;
            margin: 0 auto;
            padding: 20px;
            background: #FFFEF8;
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 4px;
        }
        .draft-banner {
            background: #d32f2f;
            color: white;
            text-align: center;
            padding: 6px 0;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 2px;
            margin: -20px -20px 16px -20px;
        }
        .model-description {
            max-width: 800px;
            margin: 0 auto 16px auto;
            text-align: center;
            font-size: 12px;
            color: #666;
            line-height: 1.5;
        }
        .file-input-wrapper {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
        }
        .params-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
        }
        .param-group {
            display: flex;
            flex-direction: column;
        }
        .param-group label {
            font-weight: 500;
            margin-bottom: 5px;
            color: #555;
        }
        .param-group input {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        .param-group small {
            color: #888;
            margin-top: 3px;
        }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 15px;
        }
        button:hover {
            background: #0056b3;
        }
        button:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
        .template-btn {
            background: #555;
            color: white;
            margin-top: 0;
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            font-family: inherit;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: all 0.15s ease;
        }
        .template-btn:hover {
            background: #333;
            box-shadow: 0 3px 6px rgba(0,0,0,0.15);
        }
        .template-btn:active {
            background: #222;
        }
        .charts-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }
        @media (max-width: 900px) {
            .charts-section {
                grid-template-columns: 1fr;
            }
        }
        .chart-container {
            background: #FFFEF8;
            padding: 16px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            position: relative;
            height: 420px;
            display: flex;
            flex-direction: column;
        }
        .chart-container canvas {
            flex: 1;
            min-height: 0;
        }
        .chart-container h3 {
            margin-top: 0;
            margin-bottom: 4px;
            color: #1a1a1a;
            text-align: center;
            font-size: 16px;
        }

        .status {
            padding: 10px;
            border-radius: 4px;
            margin-top: 10px;
        }
        .status.error {
            background: #fee;
            color: #c00;
        }
        .status.success {
            background: #efe;
            color: #060;
        }
        .status.info {
            background: #eef;
            color: #006;
        }
        .hidden {
            display: none;
        }
        .data-section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .data-section h2 {
            margin-top: 0;
            color: #555;
        }
        #scenarioTable {
            width: 100%;
            border-collapse: collapse;
            font-size: 12px;
        }
        #scenarioTable th,
        #scenarioTable td {
            padding: 3px 1px;
            text-align: right;
            border-bottom: 1px solid #eee;
        }
        #scenarioTable th {
            background: #f8f9fa;
            font-weight: 600;
            position: sticky;
            top: 0;
            z-index: 1;
        }
        #scenarioTable td:first-child,
        #scenarioTable th:first-child {
            text-align: left;
            font-weight: 500;
            white-space: nowrap;
            padding-right: 10px;
        }
        #scenarioTable input {
            width: 58px;
            border: 1px solid transparent;
            background: transparent;
            text-align: right;
            font-size: 12px;
            font-family: inherit;
            padding: 2px 3px;
            border-radius: 3px;
        }
        #scenarioTable input:hover {
            border-color: #ccc;
            background: #fafafa;
        }
        #scenarioTable input:focus {
            border-color: #007bff;
            background: #fff;
            outline: none;
            box-shadow: 0 0 0 2px rgba(0,123,255,0.15);
        }
        #scenarioTable input.invalid {
            border-color: #dc3545;
            background: #fff5f5;
        }
        #scenarioTable .derived-cell {
            display: inline-block;
            width: 58px;
            text-align: right;
            font-size: 12px;
            padding: 2px 3px;
            color: #555;
        }
        .scenario-section-header td {
            background: #333;
            color: #fff;
            font-weight: 700;
            font-size: 13px;
            padding: 6px 8px;
            text-align: left;
            letter-spacing: 0.5px;
        }
        .scenario-subsection-header td {
            background: #f0f0f0;
            color: #888;
            font-weight: 600;
            font-size: 11px;
            padding: 3px 8px;
            text-align: left;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        /* Cost-Side tab tables */
        #costSideLearningTable,
        #costSideSdomTable,
        #costSideSigmaAcrossTable {
            width: 100%;
            border-collapse: collapse;
            font-size: 12px;
        }
        #costSideLearningTable th,
        #costSideLearningTable td,
        #costSideSdomTable th,
        #costSideSdomTable td,
        #costSideSigmaAcrossTable th,
        #costSideSigmaAcrossTable td {
            padding: 3px 4px;
            text-align: right;
            border-bottom: 1px solid #eee;
        }
        #costSideLearningTable th,
        #costSideSdomTable th,
        #costSideSigmaAcrossTable th {
            background: #f8f9fa;
            font-weight: 600;
            font-size: 11px;
        }
        #costSideLearningTable td:first-child,
        #costSideLearningTable th:first-child,
        #costSideSdomTable td:first-child,
        #costSideSdomTable th:first-child,
        #costSideSigmaAcrossTable td:first-child,
        #costSideSigmaAcrossTable th:first-child {
            text-align: left;
            font-weight: 500;
            white-space: nowrap;
            padding-right: 10px;
        }
        #costSideLearningTable input,
        #costSideSdomTable input,
        #costSideSigmaAcrossTable input {
            width: 58px;
            border: 1px solid transparent;
            background: transparent;
            text-align: right;
            font-size: 12px;
            font-family: inherit;
            padding: 2px 3px;
            border-radius: 3px;
        }
        #costSideLearningTable input:hover,
        #costSideSdomTable input:hover,
        #costSideSigmaAcrossTable input:hover {
            border-color: #ccc;
            background: #fafafa;
        }
        #costSideLearningTable input:focus,
        #costSideSdomTable input:focus,
        #costSideSigmaAcrossTable input:focus {
            border-color: #007bff;
            background: #fff;
            outline: none;
            box-shadow: 0 0 0 2px rgba(0,123,255,0.15);
        }
        #costSideLearningTable .derived-cell,
        #costSideSdomTable .derived-cell,
        #costSideSigmaAcrossTable .derived-cell {
            display: inline-block;
            width: 58px;
            text-align: right;
            font-size: 12px;
            padding: 2px 3px;
            color: #555;
        }

        .upload-label {
            display: inline-block;
            background: #555;
            color: white;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-family: inherit;
            font-size: 14px;
            font-weight: 500;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: all 0.15s ease;
        }
        .upload-label:hover {
            background: #333 !important;
            box-shadow: 0 3px 6px rgba(0,0,0,0.15);
        }
        /* App layout: main content + side panel */
        .app-layout {
            display: flex;
            gap: 20px;
            align-items: flex-start;
        }
        .main-content {
            flex: 1;
            min-width: 0;
        }

        /* Collapsible side panel (fixed drawer on right) */
        .side-panel {
            position: fixed;
            right: 0;
            top: 0;
            bottom: 0;
            width: 620px;
            background: #FFFEF8;
            border-left: 1px solid #ccc;
            padding: 20px;
            overflow-y: auto;
            z-index: 200;
            box-shadow: -4px 0 16px rgba(0,0,0,0.15);
            transform: translateX(0);
            transition: transform 0.3s ease;
        }
        .side-panel.collapsed {
            transform: translateX(100%);
            box-shadow: none;
        }
        .side-panel h3 {
            margin-top: 0;
            color: #555;
            font-size: 14px;
        }
        .side-panel details {
            margin-bottom: 10px;
            padding: 8px;
            background: #f9f9f9;
            border-radius: 4px;
            border: 1px solid #ddd;
        }
        .side-panel summary {
            cursor: pointer;
            font-weight: 600;
            color: #333;
            font-size: 13px;
        }
        .side-panel .params-grid {
            gap: 10px;
        }
        .side-panel .param-group label {
            font-size: 12px;
        }
        .side-panel .param-group input {
            padding: 5px;
            font-size: 13px;
        }
        .side-panel .param-group small {
            font-size: 10px;
        }
        .side-panel table {
            font-size: 11px;
        }
        .side-panel table input {
            font-size: 11px;
        }
        .side-panel-tab {
            position: fixed;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            z-index: 201;
            background: #555;
            color: white;
            border: none;
            border-radius: 6px 0 0 6px;
            width: 28px;
            padding: 12px 4px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
            box-shadow: -2px 0 8px rgba(0,0,0,0.2);
            writing-mode: vertical-rl;
            text-orientation: mixed;
            letter-spacing: 1px;
            transition: right 0.3s ease, background 0.15s;
        }
        .side-panel-tab:hover {
            background: #333;
        }
        .side-panel-tab.open {
            right: 620px;
        }
        @media (max-width: 900px) {
            .side-panel-tab.open {
                right: 90vw;
            }
        }

        /* Key params section - matches side panel style */
        .key-params-section {
            background: #f9f9f9;
            padding: 12px 16px;
            border-radius: 4px;
            border: 1px solid #ddd;
            margin-bottom: 16px;
        }
        .key-params-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px 16px;
        }
        @media (max-width: 900px) {
            .key-params-grid { grid-template-columns: repeat(2, 1fr); }
        }
        .key-params-grid .param-group {
            display: flex;
            flex-direction: column;
        }
        .key-params-grid .param-group label {
            font-weight: 600;
            margin-bottom: 2px;
            color: #333;
            font-size: 12px;
        }
        .key-params-grid .param-group input {
            padding: 5px 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 13px;
            width: 100%;
        }
        .key-params-grid .param-group small {
            color: #888;
            font-size: 10px;
            margin-top: 2px;
            line-height: 1.3;
        }

        /* Prominent Run Button - matches side panel style */
        .run-button-container {
            text-align: center;
            padding: 12px 0;
            margin-bottom: 16px;
        }
        .run-button-main {
            background: #555;
            color: white;
            border: none;
            padding: 12px 32px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 15px;
            font-weight: 600;
            letter-spacing: 0.5px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            transition: all 0.15s ease;
            margin-top: 0;
        }
        .run-button-main:hover {
            background: #333;
            box-shadow: 0 3px 10px rgba(0,0,0,0.2);
        }
        .run-button-main:active {
            background: #222;
            box-shadow: 0 1px 4px rgba(0,0,0,0.2);
        }
        .run-button-main:disabled {
            background: #aaa;
            cursor: not-allowed;
            box-shadow: none;
        }
        .run-button-hint {
            font-size: 11px;
            color: #888;
            margin-top: 6px;
        }

        /* Region Toggle - button group style */
        .region-toggle {
            display: flex;
            justify-content: center;
            gap: 0;
            margin-top: 12px;
        }
        .region-toggle input[type="radio"] {
            display: none;
        }
        .region-toggle label {
            background: #e0e0e0;
            color: #555;
            border: none;
            padding: 10px 0;
            width: 160px;
            text-align: center;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.15s ease;
        }
        .region-toggle label:first-of-type {
            border-radius: 4px 0 0 4px;
        }
        .region-toggle label:last-of-type {
            border-radius: 0 4px 4px 0;
        }
        .region-toggle input[type="radio"]:checked + label {
            background: #555;
            color: white;
            box-shadow: 0 2px 6px rgba(0,0,0,0.15);
        }
        .region-toggle label:hover:not(:has(+ input:checked)) {
            background: #ccc;
        }
        /* Fix for hover when checked - needs different selector */
        .region-toggle input[type="radio"]:not(:checked) + label:hover {
            background: #ccc;
        }
        /* Loading state for region toggle */
        .region-toggle.loading label {
            pointer-events: none;
            opacity: 0.6;
        }
        .region-toggle.loading label.selected::after {
            content: '';
            display: inline-block;
            width: 14px;
            height: 14px;
            margin-left: 8px;
            border: 2px solid rgba(255,255,255,0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
            vertical-align: middle;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Main Tab Bar */
        .main-tab-bar {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            margin-bottom: 20px;
        }
        .tab-row {
            display: flex;
            gap: 8px;
        }
        .tab-row-label {
            font-size: 11px;
            color: #999;
            font-weight: 600;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            width: 60px;
            text-align: right;
            padding-right: 8px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
        .main-tab-bar button {
            background: #e0e0e0;
            color: #555;
            border: none;
            padding: 10px 8px;
            width: 190px;
            text-align: center;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.15s ease;
            font-family: inherit;
        }
        .tab-row button {
            border-radius: 4px;
        }
        .main-tab-bar button.active {
            background: #555;
            color: white;
            box-shadow: 0 2px 6px rgba(0,0,0,0.15);
        }
        .main-tab-bar button:not(.active):hover {
            background: #ccc;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }

        /* Shared section panel for AI + Robotics tabs */
        .tab-section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        /* Robotics tab styles */
        .r-category-grid {
            display: grid;
            grid-template-columns: auto 1fr 1fr 1fr;
            gap: 8px;
            margin-bottom: 24px;
        }
        .r-category-grid .col-header {
            text-align: center;
            font-weight: 600;
            font-size: 11px;
            padding: 8px;
            color: #555;
            background: #f8f9fa;
            border-radius: 4px;
        }
        .r-category-grid .row-label {
            font-weight: 600;
            font-size: 11px;
            color: #555;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px;
            background: #f8f9fa;
            border-radius: 4px;
            writing-mode: vertical-rl;
            text-orientation: mixed;
            transform: rotate(180deg);
        }
        .r-cat-card {
            background: #fafaf8;
            border: 1px solid #eee;
            border-left: 3px solid;
            border-radius: 6px;
            padding: 12px;
            font-size: 12px;
            transition: background 0.15s;
        }
        .r-cat-card:hover { background: #f5f5f0; }
        .r-cat-card .cat-header {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 6px;
            padding-bottom: 4px;
            border-bottom: 1px solid #eee;
        }
        .r-cat-card .cat-color { width: 10px; height: 10px; border-radius: 3px; }
        .r-cat-card .cat-name { font-weight: 700; font-size: 13px; }
        .r-cat-card .cat-examples { font-size: 10px; color: #666; margin-bottom: 8px; }
        .r-param-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 3px;
            font-size: 11px;
        }
        .r-param-row label { color: #555; flex: 1; }
        .r-param-row input {
            width: 80px;
            padding: 3px 4px;
            border: 1px solid transparent;
            border-radius: 3px;
            font-family: inherit;
            font-size: 12px;
            text-align: right;
            background: transparent;
        }
        .r-param-row input:hover {
            border-color: #ccc;
            background: #fafafa;
        }
        .r-param-row input:focus {
            outline: none;
            border-color: #007bff;
            background: #fff;
            box-shadow: 0 0 0 2px rgba(0,123,255,0.15);
        }
        .r-param-row .unit { color: #888; font-size: 9px; width: 28px; text-align: left; margin-left: 2px; }
        .r-section-header {
            font-size: 14px;
            font-weight: 600;
            color: #555;
            margin: 0 0 12px 0;
            padding-bottom: 6px;
            border-bottom: 1px solid #eee;
        }
        .r-charts-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-bottom: 20px;
        }
        @media (max-width: 1100px) { .r-charts-grid { grid-template-columns: 1fr; } }
        .r-chart-container {
            background: #FFFEF8;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            padding: 16px;
            position: relative;
            height: 420px;
            display: flex;
            flex-direction: column;
        }
        .r-chart-container h3 {
            font-size: 16px;
            color: #1a1a1a;
            margin-top: 0;
            margin-bottom: 8px;
            text-align: center;
        }
        .r-chart-wrap {
            flex: 1;
            min-height: 0;
            position: relative;
            overflow: hidden;
        }
        .r-chart-wrap svg {
            font-family: 'SF Mono', monospace;
            width: 100%;
            height: 100%;
        }
        .r-chart-tooltip {
            position: absolute;
            background: rgba(0,0,0,0.88);
            color: white;
            padding: 10px 14px;
            border-radius: 6px;
            font-size: 11px;
            pointer-events: none;
            z-index: 100;
            white-space: nowrap;
        }
        .r-summary-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 10px;
            margin-bottom: 16px;
        }
        .r-summary-box {
            padding: 12px 14px;
            border-radius: 6px;
            text-align: center;
            color: white;
        }
        .r-summary-value { font-size: 16px; font-weight: 700; margin-bottom: 2px; }
        .r-summary-label { font-size: 10px; opacity: 0.9; }
        .r-data-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 12px;
            margin-bottom: 16px;
        }
        .r-data-table th, .r-data-table td {
            padding: 4px 2px;
            text-align: center;
            border-bottom: 1px solid #eee;
        }
        .r-data-table th {
            background: #f8f9fa;
            font-weight: 600;
            font-size: 11px;
            position: sticky;
            top: 0;
        }
        .r-data-table td:first-child { text-align: left; font-weight: 500; white-space: nowrap; padding-right: 10px; }
        .r-data-table input {
            width: 60px;
            padding: 3px 4px;
            border: 1px solid transparent;
            background: transparent;
            font-family: inherit;
            font-size: 12px;
            text-align: center;
            border-radius: 3px;
        }
        .r-data-table input:hover { border-color: #ccc; background: #fafafa; }
        .r-data-table input:focus { border-color: #007bff; background: #fff; outline: none; box-shadow: 0 0 0 2px rgba(0,123,255,0.15); }
        .r-cat-col-js { background: rgba(124, 179, 66, 0.08); }
        .r-cat-col-jm { background: rgba(158, 158, 158, 0.08); }
        .r-cat-col-jl { background: rgba(121, 85, 72, 0.08); }
        .r-cat-col-fs { background: rgba(0, 137, 123, 0.08); }
        .r-cat-col-fm { background: rgba(44, 90, 160, 0.08); }
        .r-cat-col-fl { background: rgba(74, 20, 140, 0.08); }

        /* Dark expandable details */
        .dark-expandable { margin-bottom: 16px; }
        .dark-expandable > summary {
            background: #444;
            color: white;
            padding: 12px 18px;
            font-weight: 700;
            font-size: 14px;
            cursor: pointer;
            border-radius: 6px;
            user-select: none;
            list-style: none;
        }
        .dark-expandable > summary::-webkit-details-marker { display: none; }
        .dark-expandable > summary::before {
            content: '\25B6  ';
            font-size: 11px;
            margin-right: 8px;
            transition: transform 0.2s;
            display: inline-block;
        }
        .dark-expandable[open] > summary::before { transform: rotate(90deg); }
        .dark-expandable[open] > summary { border-radius: 6px 6px 0 0; }

        /* AI tab styles */
        .ai-section-header {
            font-size: 14px;
            font-weight: 600;
            color: #555;
            margin: 0 0 12px 0;
            padding-bottom: 6px;
            border-bottom: 1px solid #eee;
        }
        .ai-section-header:first-child { margin-top: 0; }
        /* Each input/output section gets the same clean spacing. */
        .ai-input-section { margin-bottom: 18px; }
        /* Collapsible "Adjust inputs" block beneath each derived headline.
           The summary explains the equation the inputs combine into, so the
           user knows what's hidden inside before opening it. */
        .ai-input-details {
            margin: 6px 0 0 0;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            background: #fafbfc;
        }
        .ai-input-details > summary {
            cursor: pointer;
            padding: 10px 14px;
            list-style: none;
            user-select: none;
            border-radius: 6px;
            display: flex;
            flex-direction: column;
            gap: 3px;
        }
        .ai-input-details > summary::-webkit-details-marker { display: none; }
        .ai-input-details > summary:hover { background: #f1f3f5; }
        .ai-input-details[open] > summary {
            border-bottom: 1px solid #e5e7eb;
            border-radius: 6px 6px 0 0;
        }
        .ai-input-summary-title {
            font-size: 12px;
            font-weight: 600;
            color: #374151;
        }
        .ai-input-summary-eq {
            font-size: 11px;
            color: #6b7280;
            line-height: 1.45;
            font-family: inherit;
        }
        .ai-input-summary-eq b {
            font-family: "Courier New", Courier, monospace;
            color: #1f2937;
            font-weight: 600;
        }
        .ai-input-details > .curve-widget-container {
            margin: 14px 14px;
        }
        /* "Section-style" details used by Ownership — heavier visual weight,
           matches the prominence of an h3 section header. */
        .ai-section-details > summary {
            background: #f4f5f7;
            border-bottom: 1px solid #e5e7eb;
            border-radius: 6px 6px 0 0;
        }
        .ai-section-details:not([open]) > summary {
            border-bottom: 1px solid transparent;
            border-radius: 6px;
        }

        /* Standard derived-display container (used inside Ownership and a few
           legacy spots). Soft grey panel that matches the input widget chrome. */
        .ai-derived-display {
            margin: 0 0 8px 0;
            padding: 12px 16px;
            background: #f8f9fa;
            border: 1px solid #eee;
            border-radius: 6px;
        }
        /* When a derived display is the visible HEADLINE for a Quantity /
           Efficiency section, strip the grey panel chrome so it visually
           matches an input curve-widget-container. The inner chart's own
           border + cream background then provides the visual frame, exactly
           like the input widgets above. */
        .ai-derived-display.ai-headline-chart {
            background: transparent;
            border: none;
            padding: 0;
            margin: 0 0 6px 0;
            border-radius: 0;
        }
        .ai-derived-display.ai-headline-chart h4 {
            font-size: 13px;
            font-weight: 600;
            color: #555;
            margin: 0 0 10px 0;
        }
        .ai-derived-display.ai-headline-chart .curve-widget-chart {
            width: 100%;
            height: 200px;
            background: #FFFEF8;
            border: 1px solid #eee;
            border-radius: 6px;
        }
        /* Inside an Ownership <details>, the world-share derived block keeps
           the standard grey panel for visual contrast with the editable inputs. */
        .ai-input-details > .ai-derived-display {
            margin: 14px 14px;
        }
        .ai-derived-label {
            font-size: 13px;
            font-weight: 700;
            color: #555;
            margin-bottom: 8px;
        }
        .ai-derived-values {
            display: flex;
            gap: 24px;
            flex-wrap: wrap;
        }
        .ai-derived-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .ai-derived-year {
            font-size: 11px;
            color: #888;
            font-weight: 600;
        }
        .ai-derived-val {
            font-size: 16px;
            font-weight: 700;
            color: #333;
        }
        .ai-derived-sparkline {
            margin-top: 8px;
            width: 100%;
            background: #fafaf5;
            border-radius: 4px;
        }

        /* Curve Widget styles (shared between AI + Robotics) */
        .curve-widget-container {
            margin-bottom: 16px;
            padding: 0;
            background: transparent;
            border-radius: 0;
        }
        .curve-widget-container:last-child {
            margin-bottom: 0;
        }
        .curve-widget-container h4 {
            font-size: 13px;
            font-weight: 600;
            color: #555;
            margin: 0 0 10px 0;
        }
        .curve-widget-chart {
            width: 100%;
            height: 200px;
            background: #FFFEF8;
            border: 1px solid #eee;
            border-radius: 6px;
            margin-bottom: 12px;
        }
        #rdAllocGrid .curve-widget-chart {
            height: 140px;
        }
        #rdAllocGrid h4 {
            font-size: 11px;
            margin: 0 0 6px 0;
        }
        #rdAllocGrid .curve-widget-controls {
            font-size: 10px;
        }
        .curve-widget-controls {
            display: flex;
            gap: 16px;
            align-items: center;
            margin-bottom: 12px;
            font-size: 12px;
        }
        .curve-widget-controls select, .curve-widget-controls input {
            font-family: inherit;
            font-size: 12px;
            padding: 3px 6px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }
        .curve-widget-controls select:focus, .curve-widget-controls input:focus {
            border-color: #007bff;
            outline: none;
            box-shadow: 0 0 0 2px rgba(0,123,255,0.15);
        }
        .curve-widget-anchors {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 8px;
        }
        .curve-widget-anchor {
            display: flex;
            align-items: center;
            gap: 4px;
            background: #f8f9fa;
            border: 1px solid #e8e8e8;
            border-radius: 4px;
            padding: 5px 8px;
            font-size: 12px;
        }
        .curve-widget-anchor input {
            font-family: inherit;
            font-size: 12px;
            padding: 3px 4px;
            border: 1px solid transparent;
            border-radius: 3px;
            background: transparent;
        }
        .curve-widget-anchor input:hover { border-color: #ccc; background: #fff; }
        .curve-widget-anchor input:focus {
            border-color: #007bff;
            background: #fff;
            outline: none;
            box-shadow: 0 0 0 2px rgba(0,123,255,0.15);
        }
        .curve-widget-anchor input[type="number"] { width: 65px; text-align: right; }
        .curve-widget-anchor input[type="text"] { width: 90px; text-align: right; }
        /* Per-segment interpolation override dropdown shown inside each anchor
           pill (except the last). Compact styling so it doesn't bloat the row. */
        .curve-widget-anchor select.cw-anchor-segmethod {
            font-family: inherit;
            font-size: 10px;
            padding: 1px 2px;
            margin-left: 4px;
            border: 1px solid #ddd;
            border-radius: 3px;
            background: #fff;
            color: #666;
            cursor: pointer;
            max-width: 100px;
        }
        .curve-widget-anchor select.cw-anchor-segmethod:hover { border-color: #bbb; color: #333; }
        .curve-widget-anchor select.cw-anchor-segmethod:focus {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 0 2px rgba(0,123,255,0.15);
        }
        .remove-anchor {
            cursor: pointer;
            color: #999;
            font-size: 18px;
            padding: 0 4px;
            line-height: 1;
        }
        .remove-anchor:hover { color: #c00; }
        .curve-widget-add-btn {
            background: transparent;
            border: 1px dashed #ccc;
            border-radius: 4px;
            padding: 5px 12px;
            cursor: pointer;
            font-family: inherit;
            font-size: 11px;
            color: #888;
            margin-top: 0;
        }
        .curve-widget-add-btn:hover { background: #f8f9fa; border-color: #007bff; color: #007bff; }

        /* Enhanced FTE table styles */
        .r-fte-interp-row {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
            margin-bottom: 12px;
            font-size: 12px;
        }
        .r-fte-interp-label {
            font-weight: 600;
            color: #333;
        }
        .r-fte-interp-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .r-fte-interp-item select {
            font-family: inherit;
            font-size: 12px;
            padding: 2px 6px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }
        .r-fte-interp-item select:focus {
            border-color: #007bff;
            outline: none;
            box-shadow: 0 0 0 2px rgba(0,123,255,0.15);
        }
        .r-fte-interp-cat-label { font-weight: 600; font-size: 11px; }
        .r-fte-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 12px;
            margin-bottom: 12px;
        }
        .r-fte-table th, .r-fte-table td {
            padding: 4px 6px;
            text-align: center;
            border-bottom: 1px solid #eee;
        }
        .r-fte-table th {
            background: #f8f9fa;
            font-weight: 600;
            font-size: 12px;
        }
        .r-fte-table input {
            font-family: inherit;
            font-size: 12px;
            padding: 3px 4px;
            border: 1px solid transparent;
            background: transparent;
            text-align: center;
            border-radius: 3px;
        }
        .r-fte-table input:hover { border-color: #ccc; background: #fafafa; }
        .r-fte-table input:focus { border-color: #007bff; background: #fff; outline: none; box-shadow: 0 0 0 2px rgba(0,123,255,0.15); }
        .r-fte-sparkline-box {
            background: #FFFEF8;
            border-radius: 6px;
            border: 1px solid #eee;
            padding: 10px 12px;
            text-align: center;
        }
        .r-fte-sparkline-label {
            font-size: 12px;
            font-weight: 700;
            margin-bottom: 4px;
        }
        .r-fte-sparkline-vals {
            font-size: 11px;
            color: #666;
            margin-top: 4px;
        }
        .sync-btn {
            padding: 8px 20px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            background: #555;
            color: white;
            border: none;
            border-radius: 4px;
            font-family: inherit;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: all 0.15s ease;
            margin-top: 0;
        }
        .sync-btn:hover { background: #333; box-shadow: 0 3px 6px rgba(0,0,0,0.15); }

        /* Robotics Simple/Advanced mode toggle */
        .r-mode-toggle {
            display: flex;
            justify-content: center;
            gap: 0;
            margin: 0 0 16px 0;
        }
        .r-mode-btn {
            padding: 6px 18px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            background: #f0f0f0;
            color: #666;
            border: 1px solid #ddd;
            font-family: inherit;
            transition: all 0.15s ease;
        }
        .r-mode-btn:first-child { border-radius: 4px 0 0 4px; }
        .r-mode-btn:last-child { border-radius: 0 4px 4px 0; border-left: none; }
        .r-mode-btn.active {
            background: #555;
            color: white;
            border-color: #555;
        }
        .r-mode-btn:hover:not(.active) { background: #e0e0e0; }

        /* Cost & Component expandable */
        .r-cost-expandable {
            margin-top: 24px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            padding: 0;
        }
        .r-cost-expandable > summary {
            padding: 10px 16px;
            margin: 0;
            border-bottom: none;
            list-style: none;
        }
        .r-cost-expandable > summary::-webkit-details-marker { display: none; }
        .r-cost-expandable > summary::before {
            content: '\25B6';
            display: inline-block;
            margin-right: 8px;
            font-size: 10px;
            transition: transform 0.15s ease;
        }
        .r-cost-expandable[open] > summary::before { transform: rotate(90deg); }
        .r-cost-expandable[open] > summary { border-bottom: 1px solid #e0e0e0; }
        .r-cost-expandable > .tab-section { padding: 0 16px 16px; }

        /* Feature toggles bar */
        .feature-toggles-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding: 8px 12px;
            background: #f8f8f8;
            border-radius: 6px;
            margin-bottom: 12px;
            font-size: 12px;
        }
        .feature-toggles-bar label {
            display: flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
            border: 1px solid #ddd;
            background: white;
            font-weight: 500;
            color: #555;
        }
        .feature-toggles-bar input[type="checkbox"] {
            width: 14px;
            height: 14px;
            margin: 0;
        }

        /* Chart toolbar (download) */
        .chart-toolbar {
            position: absolute;
            top: 8px;
            right: 8px;
            display: flex;
            gap: 4px;
            z-index: 10;
            opacity: 0.3;
            transition: opacity 0.2s;
        }
        .chart-container:hover .chart-toolbar {
            opacity: 1;
        }
        /* Mobile: the floating toolbar lands on the centered chart title, and
           touch has no hover to reveal it — drop it into the flow above the
           title (right-aligned; mode toggles keep left via margin-right:auto)
           at full opacity, and grow the container so the plot keeps its size. */
        @media (max-width: 767px) {
            .chart-toolbar {
                position: static;
                justify-content: flex-end;
                flex-wrap: wrap;
                opacity: 1;
                margin: 8px 0 12px;
            }
            .chart-container {
                height: 468px;
            }
        }
        .chart-toolbar button {
            background: rgba(0,0,0,0.5);
            color: white;
            border: none;
            border-radius: 4px;
            width: 28px;
            height: 28px;
            cursor: pointer;
            font-size: 14px;
            padding: 0;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .chart-toolbar button:hover {
            background: rgba(0,0,0,0.8);
        }
        /* AI cost mode toggle (per H100e / per HE) */
        .ai-cost-mode-btn {
            width: auto !important;
            padding: 2px 8px !important;
            font-size: 11px !important;
            font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
            letter-spacing: -0.3px;
            border-radius: 3px !important;
        }
        .ai-cost-mode-btn.active {
            background: rgba(102,126,234,0.85) !important;
        }

        /* Deep-link anchors on model-explanation sub-headings.
           Hidden by default, visible on hover of the enclosing paragraph. */
        a.deep-link {
            color: #b0b8c4;
            text-decoration: none;
            margin-left: 6px;
            font-size: 0.85em;
            font-weight: normal;
            opacity: 0;
            transition: opacity 0.15s, color 0.15s;
        }
        a.deep-link:hover { color: #3B82F6; }
        p:hover > a.deep-link, h3:hover > a.deep-link { opacity: 1; }

        /* Dual-range slider thumbs */
        .dual-range-input::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #333;
            cursor: pointer;
            pointer-events: auto;
            border: none;
            margin-top: -4px;
            position: relative;
            z-index: 2;
        }
        .dual-range-input::-moz-range-thumb {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #333;
            cursor: pointer;
            pointer-events: auto;
            border: none;
        }
        .dual-range-input::-webkit-slider-runnable-track {
            height: 2px;
            background: transparent;
        }
        .dual-range-input::-moz-range-track {
            height: 2px;
            background: transparent;
            border: none;
        }

        @media (max-width: 900px) {
            .side-panel {
                width: 90vw;
            }
        }