:root {
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-tertiary: #0f3460;
    --accent-color: #e94560;
    --text-primary: #e0e0e0;
    --text-muted: #a0a0b0;
    --border-color: #0f3460;
    --success-color: #4caf50;
    --error-color: #f44336;
    --warning-color: #ff9800;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    color: #60c5ff;
    text-decoration: none;
}
a:hover {
    color: #93d8ff;
    text-decoration: underline;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    /* The page itself doesn't scroll — sidebar and #content scroll
       independently so the nav stays visible while content scrolls. */
    height: 100vh;
    overflow: hidden;
}

#app {
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

/* Sidebar */
#sidebar {
    width: 220px;
    flex: 0 0 220px;
    background: #16213e;
    border-right: 1px solid #0f3460;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;          /* the inner .sidebar-scroll handles scroll */
    transition: flex-basis 0.2s ease, width 0.2s ease;
    position: relative;
}

/* Collapsed sidebar: hide entirely; the floating expand button takes over. */
#sidebar.collapsed {
    flex: 0 0 0;
    width: 0;
    border-right: none;
}
#sidebar.collapsed > * {
    display: none;
}

.sidebar-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 16px 16px 12px 20px;
    border-bottom: 1px solid rgba(15, 52, 96, 0.5);
}

.sidebar-collapse-btn,
.sidebar-expand-btn {
    background: transparent;
    color: #a0a0b0;
    border: 1px solid #0f3460;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 4px 8px;
    transition: background 0.15s, color 0.15s;
}
.sidebar-collapse-btn:hover,
.sidebar-expand-btn:hover {
    background: #0f3460;
    color: #fff;
}
.sidebar-expand-btn {
    display: none;             /* shown only when sidebar is collapsed */
    position: fixed;
    top: 12px;
    left: 8px;
    z-index: 50;
    background: #16213e;
}
#app.sidebar-collapsed .sidebar-expand-btn {
    display: block;
}

.sidebar-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 16px 16px 20px;
    /* Slim scrollbar styling so it doesn't dominate the narrow column. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.sidebar-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 3px; }

#sidebar h1 {
    font-size: 1.3em;
    color: #e94560;
    margin: 0;
}

/* Sidebar sections */
.nav-section {
    margin-bottom: 6px;
}

.nav-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6a6a80;
    cursor: pointer;
    user-select: none;
    border-radius: 4px;
    transition: color 0.15s;
}

.nav-section-header:hover {
    color: #a0a0b0;
}

.nav-section-chevron {
    display: inline-block;
    font-size: 0.9em;
    transition: transform 0.2s;
}

.nav-section.collapsed .nav-section-chevron {
    transform: rotate(-90deg);
}

.nav-section-items {
    list-style: none;
    overflow: hidden;
    max-height: 500px;
    transition: max-height 0.25s ease;
}

.nav-section.collapsed .nav-section-items {
    max-height: 0;
}

.nav-section-items li {
    margin-bottom: 2px;
}

.nav-link {
    display: block;
    padding: 7px 14px;
    border-radius: 6px;
    color: #a0a0b0;
    text-decoration: none;
    font-size: 0.92em;
    transition: all 0.2s;
}

.nav-link:hover {
    background: #0f3460;
    color: #fff;
}

.nav-link.active {
    background: #0f3460;
    color: #e94560;
    font-weight: 600;
}

/* Main content */
#content {
    flex: 1 1 auto;
    min-width: 0;
    height: 100vh;
    /* No top padding: the dashboard's sticky toolbar pins at scrollport
       top (which equals viewport top) so it covers everything above it.
       Non-dashboard views add their own top padding via the rule below. */
    padding: 0 30px 30px 30px;
    overflow-y: auto;
    overflow-x: hidden;
}
#content > div { padding-top: 30px; }
#content > #view-dashboard,
#content > #view-recovery-states,
#content > #view-transition-specialist,
#content > #view-distill,
#content > #view-distill-run,
#content > #view-distill-result { padding-top: 0; }

h2 {
    margin-bottom: 20px;
    color: #fff;
    font-size: 1.5em;
}

/* Tables */
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-secondary);
    border-radius: 8px;
    overflow: hidden;
}

.data-table th, .data-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.data-table th {
    background: var(--bg-tertiary);
    color: var(--accent-color);
    font-weight: 600;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.data-table td {
    font-size: 0.9em;
}

.data-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.data-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

.table-scroll {
    max-height: 600px;
    overflow-y: auto;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-2, #1a1a2e);
}

/* Scenario filter chips */
.scenario-status-chip {
    font-size: 0.78em;
    padding: 2px 10px;
    border-radius: 12px;
    border: 1px solid var(--border-color, #3a3a4a);
    background: transparent;
    color: var(--text-muted, #aaa);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.scenario-status-chip:hover {
    background: var(--surface-3, #16161f);
    color: var(--text, #eee);
}
.scenario-status-chip.active {
    background: var(--accent, #4c6ef5);
    color: #fff;
    border-color: var(--accent, #4c6ef5);
}

/* Status badges */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 600;
}

.badge-running {
    background: #1b4332;
    color: #52b788;
}

.badge-completed {
    background: #1b3a5c;
    color: #74b9ff;
}

.badge-stopped {
    background: #3d3d3d;
    color: #aaa;
}

.badge-stopping {
    background: #3d3520;
    color: #d4a843;
}

.badge-error {
    background: #5c1b1b;
    color: #ff7474;
}

.badge-failed {
    background: #5c1b1b;
    color: #ff7474;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.btn-primary {
    background: #e94560;
    color: #fff;
}

.btn-primary:hover {
    background: #c73e54;
}

.btn-secondary {
    background: #0f3460;
    color: #e0e0e0;
}

.btn-secondary:hover {
    background: #1a4a7a;
}

.btn-danger {
    background: #5c1b1b;
    color: #ff7474;
}

.btn-danger:hover {
    background: #7c2b2b;
}

.btn-sm {
    padding: 5px 12px;
    font-size: 0.8em;
}

/* Forms */
.experiment-form {
    max-width: 800px;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.85em;
    color: #a0a0b0;
}

.label-hint {
    font-weight: 400;
    font-size: 0.9em;
    color: #707080;
}

.ppo-readout {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    padding: 9px 10px;
    background: #1a1a2e;
    border: 1px solid #0f3460;
    border-radius: 6px;
}

.ppo-readout .ppo-readout-warn {
    color: #e94560;
    font-family: inherit;
}

.label-hint-link,
.label-link {
    font-weight: 400;
    font-size: 0.85em;
    color: var(--accent);
    text-decoration: none;
    margin-left: 4px;
}
.label-hint-link:hover,
.label-link:hover {
    text-decoration: underline;
}

.form-group input[type="checkbox"] {
    width: auto;
    margin-right: 8px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #0f3460;
    border-radius: 6px;
    background: #1a1a2e;
    color: #e0e0e0;
    font-size: 0.9em;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #e94560;
}

.form-row {
    display: flex;
    gap: 16px;
}

.form-row .form-group {
    flex: 1;
}

.form-actions {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.fitness-input-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.fitness-input-row textarea {
    flex: 1;
}

.fitness-input-row .btn {
    flex-shrink: 0;
    margin-top: 0;
}

.validation-msg {
    margin-top: 6px;
    font-size: 0.85em;
}

.preset-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.chip {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid #0f3460;
    border-radius: 16px;
    background: transparent;
    color: #74b9ff;
    font-size: 0.8em;
    cursor: pointer;
    transition: all 0.2s;
}

.chip:hover {
    background: #0f3460;
    color: #fff;
}

/* Expression Palette */
.expression-palette {
    margin-top: 12px;
    padding: 10px 12px;
    background: #0a1628;
    border: 1px solid #1a2744;
    border-radius: 8px;
}
.palette-section {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}
.palette-section:last-child { margin-bottom: 0; }
.palette-label {
    font-size: 0.75em;
    color: #888;
    min-width: 70px;
    flex-shrink: 0;
}
.palette-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.palette-chips .chip {
    padding: 2px 8px;
    font-size: 0.75em;
    border-radius: 10px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}
.chip-prop { border-color: #2d6a4f; color: #52b788; }
.chip-prop:hover { background: #2d6a4f; color: #fff; }
.chip-fn { border-color: #7b2d8b; color: #c77dff; }
.chip-fn:hover { background: #7b2d8b; color: #fff; }
.chip-global { border-color: #8b6914; color: #f0c040; }
.chip-global:hover { background: #8b6914; color: #fff; }
.chip-part { border-color: #1a73e8; color: #74b9ff; }
.chip-part:hover { background: #1a73e8; color: #fff; }
.chip-saved { border-color: #5a3a7a; color: #c084fc; }
.chip-saved:hover { background: #5a3a7a; color: #fff; }

/* Objectives Library */
.objective-editor-card {
    background: var(--card-bg, #1e1e2e);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}
.objective-editor-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.objective-editor-card h3 {
    margin: 0;
}
.objective-form .form-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.fitness-input-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.fitness-input-row textarea {
    flex: 1;
}
.validation-msg {
    font-size: 0.85em;
    margin-top: 4px;
    min-height: 1.2em;
}
.obj-expr-cell {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.actions-cell {
    white-space: nowrap;
    display: flex;
    gap: 4px;
}
.palette-saved-section .palette-section-label {
    color: #c084fc;
}
.objectives-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.obj-config-select {
    padding: 4px 8px;
    background: #1e1e2e;
    border: 1px solid #444;
    border-radius: 4px;
    color: inherit;
    font-size: 0.9em;
    min-width: 240px;
}
.part-tag {
    background: #1a2a3a;
    color: #74b9ff;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 0.8em;
    margin-right: 2px;
}
.obj-filter-note {
    margin-bottom: 10px;
    font-size: 0.88em;
}

/* Training View */
.training-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.training-header h2 {
    margin-bottom: 0;
}

.training-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.training-settings-panel {
    margin-bottom: 12px;
}

.behavior-breakdown-panel {
    margin-bottom: 16px;
    background: #16213e;
    border: 1px solid #2a3a5c;
    border-radius: 8px;
    padding: 10px 14px;
}

/* PPO health mini-charts grid */
.ppo-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.ppo-metric-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ppo-metric-label {
    font-size: 0.82em;
    color: #9aa4b2;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ppo-metric-hint {
    cursor: help;
    font-size: 0.9em;
    opacity: 0.6;
    margin-left: 2px;
}

.ppo-health-badge {
    font-size: 0.85em;
    font-weight: 600;
    font-family: 'SF Mono', 'Menlo', monospace;
    min-height: 1.2em;
}

.ppo-chart-wrap {
    height: 90px;
    position: relative;
}

.behavior-breakdown-header {
    font-size: 0.82em;
    color: #9aa4b2;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.behavior-breakdown-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88em;
}

.behavior-breakdown-table th {
    color: #9aa4b2;
    font-weight: 500;
    text-align: left;
    padding: 3px 10px 3px 0;
    border-bottom: 1px solid #2a3a5c;
    white-space: nowrap;
}

.behavior-breakdown-table td {
    padding: 4px 10px 4px 0;
    font-family: 'SF Mono', 'Menlo', monospace;
    color: #e0e0e0;
    white-space: nowrap;
}

.behavior-breakdown-table tr:first-child td {
    padding-top: 6px;
}

/* Evaluation Summary Panel (New Experiment form) */
.eval-summary-panel {
    margin: 16px 0;
    background: #16213e;
    border: 1px solid #2a3a5c;
    border-radius: 8px;
    padding: 10px 14px;
}

.eval-summary-header {
    font-size: 0.82em;
    color: #9aa4b2;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.eval-summary-subtitle {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.95em;
}

.eval-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88em;
}

.eval-summary-table th {
    color: #9aa4b2;
    font-weight: 500;
    text-align: left;
    padding: 3px 10px 3px 0;
    border-bottom: 1px solid #2a3a5c;
    white-space: nowrap;
}

.eval-summary-table td {
    padding: 4px 10px 4px 0;
    font-family: 'SF Mono', 'Menlo', monospace;
    color: #e0e0e0;
    white-space: nowrap;
}

.eval-summary-table .section-header td {
    color: #7c8aff;
    font-family: inherit;
    font-weight: 600;
    padding-top: 10px;
    font-size: 0.92em;
}

.eval-summary-noise-yes { color: #ff9800; }
.eval-summary-noise-no { color: #4caf50; }

.training-settings-grid {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 6px 12px;
    font-size: 0.88em;
}

.training-settings-grid .label {
    color: #9aa4b2;
}

.training-settings-grid .value {
    color: #e0e0e0;
    font-family: 'SF Mono', 'Menlo', monospace;
    word-break: break-word;
}

.stat-card {
    flex: 1;
    background: #16213e;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    border: 1px solid #0f3460;
}

.stat-label {
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #a0a0b0;
    margin-bottom: 8px;
}

.stat-value {
    font-size: 1.4em;
    font-weight: 700;
    color: #fff;
    font-family: 'SF Mono', 'Menlo', monospace;
}

.chart-container {
    background: #16213e;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid #0f3460;
}

.chart-container h3 {
    margin-bottom: 12px;
    font-size: 0.95em;
    color: #a0a0b0;
}

.chart-container canvas,
.gen-chart-container canvas {
    background: #0a0a1a;
    border-radius: 4px;
    width: 100%;
}

/* Training preview + chart layout */
.training-preview-area {
    margin-bottom: 12px;
}

.training-preview-container {
    background: #0a0a1a;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #333;
    position: relative;
}

.training-preview-container canvas {
    display: block;
    width: 100%;
    height: auto;
}

.training-preview-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: #161625;
    border: 1px solid #333;
    border-radius: 6px;
    margin-top: 4px;
}

/* Minimal per-panel strip: zoom only */
.tp-per-panel-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    background: #161625;
    border-top: 1px solid #333;
}

.training-preview-controls-left { display: flex; gap: 4px; flex-shrink: 0; }
.training-preview-controls-center { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.training-preview-controls-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.training-preview-controls-right .btn.active {
    background: #3a3a7a;
    border: 1px solid #5a5aaa;
    color: #fff;
}

.tp-scrubber-stack {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 3px;
}
.tp-scrubber-stack .viewer-scrubber {
    flex: none;
    width: 100%;
}

.tp-zoom-group {
    display: flex;
    gap: 2px;
}

.tp-gen-label {
    font-family: monospace;
    font-size: 0.85em;
    color: #e0e0e0;
    white-space: nowrap;
}

.training-preview-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 26, 0.85);
    z-index: 1;
}

.training-preview-placeholder p {
    color: #607090;
    font-size: 0.95em;
    text-align: center;
}

/* Split-view / side-by-side compare layout */
.tp-split-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 0 6px;
}

.tp-split-wrapper {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.tp-split-wrapper > .training-preview-container {
    flex: 1;
    min-width: 0;
}

/* ── Transition Specialist multi-canvas replay ─────────────────────── */
#tr-container {
    background: #0d1b33;
    border: 1px solid #1a3a5c;
    border-radius: 8px;
    padding: 8px;
    margin-top: 6px;
}

.tr-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 6px;
    flex-wrap: wrap;
}

.tr-badge {
    background: #d97706;
    color: #fff;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tr-training-badge {
    background: #d97706;
    color: #fff;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-left: 8px;
    vertical-align: middle;
}

.tr-gen-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.tr-canvas-grid {
    display: grid;
    gap: 4px;
}

.tr-canvas-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tr-canvas-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tr-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0 0;
    flex-wrap: wrap;
}

.tr-zoom-group {
    display: flex;
    gap: 2px;
    margin-left: 4px;
}

.tr-grid-size-group {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
}

.tr-grid-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
}

.tr-grid-input {
    width: 44px;
    padding: 2px 4px;
    font-size: 12px;
    background: var(--bg-secondary, #1e1e2e);
    color: inherit;
    border: 1px solid var(--border-color, #3a3a4a);
    border-radius: 4px;
    text-align: center;
}

.tr-batch-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    min-width: 80px;
    text-align: center;
}

.tr-frame-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

.training-chart-area {
    background: #16213e;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #0f3460;
}

.chart-canvas-wrap {
    position: relative;
    width: 100%;
    height: 260px;
    min-height: 140px;
    max-height: 600px;
    resize: vertical;
    overflow: auto;
    border-radius: 6px;
}

.chart-canvas-wrap canvas {
    cursor: pointer;
}

.component-table-panel {
    margin-top: 10px;
    background: rgba(15, 52, 96, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    overflow: hidden;
}

.component-table-panel summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    cursor: pointer;
    color: #e0e0e0;
    font-size: 0.86em;
    font-weight: 600;
    user-select: none;
}

.component-table-panel summary:hover {
    background: rgba(255, 255, 255, 0.04);
}

.component-table-summary {
    color: #9aa4b2;
    font-size: 0.9em;
    font-weight: 500;
    text-align: right;
}

.component-table-wrap {
    max-height: 320px;
    overflow: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.component-breakdown-table th {
    position: sticky;
    top: 0;
    background: #16213e;
    z-index: 1;
}

.component-breakdown-table td,
.component-breakdown-table th {
    padding-right: 14px;
}

.component-breakdown-table td:not(:first-child),
.component-breakdown-table th:not(:first-child) {
    text-align: right;
}

.component-breakdown-table .component-name {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 260px;
    white-space: normal;
    word-break: break-word;
}

.component-swatch {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.component-sortable {
    cursor: pointer;
    user-select: none;
}

.component-sortable:hover,
.component-sortable.active {
    color: #e94560;
}

.component-breakdown-table .trend-up {
    color: #4ade80;
}

.component-breakdown-table .trend-down {
    color: #f87171;
}

/* Custom chart tooltip */
.chart-tooltip {
    position: absolute;
    background: rgba(20, 20, 28, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 8px 10px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
    font-size: 12px;
    color: #ddd;
    z-index: 10;
    white-space: nowrap;
}
.chart-tooltip-title {
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
    font-size: 11px;
}
.chart-tooltip-table {
    border-collapse: collapse;
    border-spacing: 0;
}
.chart-tooltip-table td {
    padding: 1px 0;
}
.chart-tooltip-swatch {
    width: 18px;
}
.chart-tooltip-swatch span {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}
.chart-tooltip-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-family: monospace;
    color: #fff;
}
.chart-tooltip-label {
    padding-left: 12px;
    color: #aaa;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chart-tooltip-footer {
    margin-top: 4px;
    font-size: 10px;
    color: #666;
    font-style: italic;
}

.chart-tooltip-restart {
    margin-top: 4px;
    font-size: 10px;
    color: #f0c040;
}

.chart-tooltip-noise {
    margin-top: 4px;
    font-size: 10px;
    color: #4ade80;
    opacity: 0.85;
}

.chart-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 4px 0;
    flex-wrap: wrap;
}

.chart-toolbar-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chart-toolbar-label {
    color: #888;
    font-size: 0.8em;
    white-space: nowrap;
}

.chart-toolbar-sep {
    color: #666;
    font-size: 0.85em;
}

.chart-range-input {
    width: 70px;
    padding: 3px 6px;
    background: #0a0a1a;
    border: 1px solid #0f3460;
    border-radius: 4px;
    color: #ccc;
    font-size: 0.8em;
    font-family: inherit;
}

.chart-range-input::placeholder {
    color: #555;
}

.chart-toolbar-btn {
    padding: 2px 8px;
    font-size: 0.75em;
}

.chart-scale-select {
    padding: 3px 6px;
    background: #0a0a1a;
    border: 1px solid #0f3460;
    border-radius: 4px;
    color: #ccc;
    font-size: 0.8em;
    font-family: inherit;
    cursor: pointer;
}

.chart-scale-select option {
    background: #16213e;
    color: #ccc;
}

.training-log-header {
    display: flex;
    justify-content: flex-end;
    margin: 4px 0 6px;
}

.training-log-jump {
    padding: 3px 10px;
    font-size: 0.75em;
    background: #1b3a5c;
    color: #74b9ff;
    border: 1px solid #2d5a8a;
}

.training-log-jump:hover {
    background: #25507f;
    color: #fff;
}

.training-log {
    background: #0a0a1a;
    border: 1px solid #0f3460;
    border-radius: 8px;
    padding: 12px;
    max-height: 150px;
    overflow-y: auto;
    font-family: 'SF Mono', 'Menlo', monospace;
    font-size: 0.8em;
}

.log-line {
    padding: 2px 0;
    color: #a0a0b0;
}

.log-time {
    color: #555;
    margin-right: 8px;
}

/* Training Phase Progress Bar */
.training-phase-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 6px 10px;
    background: #0a0a1a;
    border: 1px solid #0f3460;
    border-radius: 6px;
}

.phase-track {
    flex: 1;
    height: 6px;
    background: #1a1a2e;
    border-radius: 3px;
    overflow: hidden;
}

.phase-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #16c784, #00e5ff);
    border-radius: 3px;
    transition: width 180ms ease-out;
}

.phase-label {
    font-family: 'SF Mono', 'Menlo', monospace;
    font-size: 0.78em;
    color: #a0a0b0;
    white-space: nowrap;
    min-width: 180px;
}

.phase-perf-btn {
    background: none;
    border: 1px solid #333;
    border-radius: 4px;
    color: #a0a0b0;
    cursor: pointer;
    font-size: 0.85em;
    padding: 2px 6px;
    transition: border-color 0.15s, color 0.15s;
}

.phase-perf-btn:hover {
    border-color: #16c784;
    color: #16c784;
}

/* Performance Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-card {
    background: #16213e;
    border: 1px solid #0f3460;
    border-radius: 12px;
    width: 380px;
    max-width: 90vw;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #0f3460;
}

.modal-header h3 {
    margin: 0;
    font-size: 1em;
    color: #e0e0f0;
}

.modal-close {
    background: none;
    border: none;
    color: #a0a0b0;
    font-size: 1.3em;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.modal-close:hover {
    color: #ff6b6b;
}

.modal-body {
    padding: 14px 18px 18px;
}

.perf-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 14px;
}

.perf-table caption {
    text-align: left;
    font-size: 0.82em;
    color: #777;
    padding-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.perf-table td {
    padding: 4px 0;
    font-size: 0.88em;
    color: #c0c0d0;
}

.perf-table td.perf-val {
    text-align: right;
    font-family: 'SF Mono', 'Menlo', monospace;
    color: #e0e0f0;
}

.perf-table tr.perf-total td {
    border-top: 1px solid #0f3460;
    padding-top: 6px;
    font-weight: 600;
    color: #16c784;
}

.perf-pop-info {
    font-size: 0.82em;
    color: #777;
    text-align: center;
}

/* ── PPO Architecture Sync Modal ─────────────────────────────────────────── */
.ppo-arch-card { width: 440px; }

.ppo-arch-intro {
    margin: 0 0 12px;
    color: #c0c0d0;
    font-size: 0.9em;
}

.ppo-arch-diff,
.exp-import-diff {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875em;
    margin-bottom: 14px;
}

.ppo-arch-diff th,
.exp-import-diff th {
    text-align: left;
    padding: 3px 8px 5px 0;
    color: #777;
    font-weight: 600;
    border-bottom: 1px solid #0f3460;
    font-size: 0.82em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ppo-arch-diff td,
.exp-import-diff td {
    padding: 5px 8px 5px 0;
    vertical-align: top;
    color: #c0c0d0;
    font-family: 'SF Mono', 'Menlo', monospace;
}

.ppo-arch-diff td:first-child,
.exp-import-diff td:first-child {
    font-family: inherit;
    color: #a0a0b0;
}

.ppo-arch-diff td.diff-mismatch,
.exp-import-diff td.diff-mismatch { color: #ffb347; }

.ppo-arch-diff td.diff-match,
.exp-import-diff td.diff-match    { color: #78c7a0; }

.ppo-arch-actions {
    display: flex;
    gap: 8px;
    padding: 12px 18px 16px;
    border-top: 1px solid #0f3460;
}

/* ── Experiment Import Modal ─────────────────────────────────────────────── */
.exp-import-card { width: 520px; }

.exp-import-intro {
    margin: 0 0 12px;
    color: #c0c0d0;
    font-size: 0.9em;
}

.exp-import-diff td.diff-none { color: #555; font-style: italic; }

/* ── Initial Params Picker Modal ──────────────────────────────────────────── */
.ip-picker-card {
    width: 700px;
    max-width: 96vw;
}

.ip-picker-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 6px;
}

.ip-picker-context {
    margin: 0;
    font-size: 0.82em;
    color: #a0a0b0;
}

.ip-picker-search {
    width: 100%;
    background: #0d1b2e;
    border: 1px solid #0f3460;
    border-radius: 6px;
    color: #e0e0f0;
    padding: 6px 10px;
    font-size: 0.9em;
    box-sizing: border-box;
}

.ip-picker-search:focus {
    outline: none;
    border-color: #4a9eff;
}

.ip-picker-list {
    overflow-y: auto;
    max-height: 52vh;
    border: 1px solid #0f3460;
    border-radius: 6px;
    background: #0d1b2e;
}

.ip-picker-row {
    display: grid;
    grid-template-columns: 1fr 90px 90px 120px;
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #0a1628;
    transition: background 0.1s;
}

.ip-picker-row:last-child {
    border-bottom: none;
}

.ip-picker-row:hover {
    background: #162040;
}

.ip-picker-row-name {
    font-size: 0.88em;
    color: #e0e0f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ip-picker-row-name small {
    display: block;
    font-size: 0.82em;
    color: #7080a0;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ip-picker-row-status {
    font-size: 0.78em;
    text-align: center;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ip-picker-row-status.running { background: #1a4060; color: #6af; }
.ip-picker-row-status.completed { background: #0d3020; color: #4c8; }
.ip-picker-row-status.stopped { background: #2e1a10; color: #c84; }
.ip-picker-row-status.failed { background: #3e1010; color: #f66; }

.ip-picker-row-fitness {
    font-size: 0.85em;
    text-align: right;
    font-family: 'SF Mono', 'Menlo', monospace;
    color: #c0d0e0;
}

.ip-picker-row-compat {
    font-size: 0.75em;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.ip-compat-ok   { color: #4c8; }
.ip-compat-warn { color: #fc6; }
.ip-compat-na   { color: #666; }

.ip-picker-empty {
    padding: 20px;
    text-align: center;
    color: #666;
    font-size: 0.88em;
}

/* Inline validation status below experiment ID inputs */
.ip-validation-status {
    font-size: 0.78em;
    margin-top: 3px;
    min-height: 1.2em;
}

.ip-validation-status.ok   { color: #4c8; }
.ip-validation-status.warn { color: #fc6; }
.ip-validation-status.err  { color: #f66; }

/* Experiment Detail */
.experiment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.experiment-header h2 {
    margin-bottom: 0;
}

.experiment-header > div {
    display: flex;
    gap: 8px;
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.detail-card {
    background: #16213e;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #0f3460;
}

.detail-card h3, .detail-card h4 {
    margin-bottom: 14px;
    color: #e94560;
    font-size: 0.95em;
    display: flex;
    align-items: center;
}

.detail-card dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
}

.detail-card dt {
    color: #a0a0b0;
    font-size: 0.85em;
}

.detail-card dd {
    color: #e0e0e0;
    font-size: 0.9em;
}

.table-scroll {
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    margin-bottom: 20px;
}

.gen-chart-container {
    margin-bottom: 16px;
}

table.compact td, table.compact th {
    padding: 6px 12px;
    font-size: 0.8em;
}

/* Clickable rows */
.clickable-row {
    cursor: pointer;
}

.clickable-row:hover {
    background: #1a1a3e !important;
}

.actions-cell {
    cursor: default;
}

/* Running indicator */
.running-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 30px;
    padding: 10px 14px;
    background: #1b4332;
    border-radius: 6px;
    color: #52b788;
    font-size: 0.85em;
    font-weight: 600;
}

.pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #52b788;
    animation: pulse-anim 1.5s infinite;
}

@keyframes pulse-anim {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

.empty-state p {
    margin-bottom: 16px;
    font-size: 1.1em;
}

/* Canvas viewer */
#robot-canvas {
    background: #0a0a1a;
    border: 1px solid #0f3460;
    border-radius: 8px;
    width: 100%;
    max-width: 900px;
}

/* Utility */
.text-muted { color: var(--text-muted); }
.text-success { color: #52b788; }
.text-danger { color: #ff7474; }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }

code {
    font-family: 'SF Mono', 'Menlo', monospace;
    font-size: 0.9em;
    color: #74b9ff;
}

h3 {
    margin-bottom: 12px;
    color: #e0e0e0;
    font-size: 1.1em;
}

.truncated {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Viewer ---- */

.viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.viewer-header h2 {
    margin: 0;
}

.viewer-container {
    background: #0a0a1a;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #333;
}

.viewer-container canvas {
    display: block;
    width: 100%;
    height: auto;
}

/* Zoom overlay for experiment preview canvas */
.preview-zoom-overlay {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: flex;
    gap: 4px;
    z-index: 2;
}
.preview-zoom-overlay .btn {
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 16px;
    line-height: 26px;
    text-align: center;
    background: rgba(22, 22, 37, 0.85);
    border: 1px solid #555;
    color: #ccc;
    border-radius: 4px;
    cursor: pointer;
    backdrop-filter: blur(4px);
}
.preview-zoom-overlay .btn:hover {
    background: rgba(40, 40, 70, 0.95);
    color: #fff;
    border-color: #888;
}

.viewer-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #161625;
    border-top: 1px solid #333;
}

.viewer-controls-left {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.viewer-controls-center {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.viewer-scrubber {
    flex: 1;
    min-width: 80px;
    accent-color: #4ade80;
    cursor: pointer;
}

.viewer-frame-label {
    font-family: monospace;
    font-size: 0.85em;
    color: #aaa;
    white-space: nowrap;
    min-width: 70px;
    text-align: right;
}

.viewer-controls-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.viewer-speed-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85em;
    color: #aaa;
}

.viewer-speed {
    width: 80px;
    accent-color: #60a5fa;
    cursor: pointer;
}

#viewer-speed-val {
    font-family: monospace;
    min-width: 30px;
    text-align: right;
}

.viewer-zoom-group {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: 12px;
}

.viewer-zoom-val {
    font-family: monospace;
    font-size: 0.85em;
    color: #aaa;
    min-width: 40px;
    text-align: center;
}

/* Generation selector bar */
.viewer-generation-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    background: #16213e;
    border: 1px solid #0f3460;
    border-radius: 0 0 8px 8px;
    border-top: none;
}

.viewer-gen-display {
    font-family: monospace;
    font-size: 0.85em;
    color: #e0e0e0;
    min-width: 200px;
    text-align: center;
}

.viewer-gen-best-btn {
    margin-left: 8px;
}

.viewer-generation-bar .btn {
    min-width: 36px;
}

.viewer-generation-bar .btn:disabled {
    opacity: 0.3;
    cursor: default;
}

/* ---- Compare View ---- */

.compare-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.compare-picker {
    background: #16213e;
    border: 1px solid #0f3460;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.compare-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px 0 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 14px;
}

.compare-filter-select {
    background: #1a1a2e;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ccc;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    cursor: pointer;
}

.compare-filter-select:focus {
    outline: none;
    border-color: #e94560;
}

.compare-filter-select.compare-filter-empty {
    opacity: 0.35;
    cursor: not-allowed;
}

.compare-picker h4 {
    margin: 0 0 10px;
    color: #e94560;
}

.compare-exp-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 300px;
    overflow-y: auto;
}

.compare-exp-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}

.compare-exp-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.compare-exp-item input[type="checkbox"] {
    accent-color: #e94560;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.compare-exp-item .exp-name {
    font-weight: 500;
    flex: 1;
}

.compare-exp-item .exp-meta {
    font-size: 0.85em;
    color: #888;
}

.compare-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.compare-actions .compare-count {
    font-size: 0.9em;
    color: #888;
}

/* ---- Robot Configs ---- */

.configs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.configs-header h2 {
    margin: 0;
}

/* Sticky-header treatment for views that opt in by setting padding-top: 0
   on themselves. Mirrors the dashboard's sticky toolbar: pins flush to the
   top of #content, extends opaque background out into the 30px side gutter
   so scrolling content cannot bleed through. These views all use the
   header layout title-on-top + description-below (rather than the
   title + right-aligned button used by morphologies/worlds), so we override
   the default flex layout to flex-direction: column. */
#view-recovery-states > .configs-header,
#view-transition-specialist > .configs-header,
#view-distill > .configs-header,
#view-distill-run > .configs-header,
#view-distill-result > .configs-header,
#view-projects > .configs-header,
#view-project-detail > .configs-header,
#view-project-new > .configs-header {
    position: sticky;
    top: 0;
    z-index: 20;
    margin: 0 -30px 16px -30px;
    padding: 18px 30px 12px 30px;
    background: #1a1a2e;
    box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.55);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
}
#view-recovery-states > .configs-header h2,
#view-transition-specialist > .configs-header h2,
#view-distill > .configs-header h2,
#view-distill-run > .configs-header h2,
#view-distill-result > .configs-header h2,
#view-projects > .configs-header h2,
#view-project-detail > .configs-header h2,
#view-project-new > .configs-header h2 {
    margin: 0;
    line-height: 1.15;
}

.config-detail-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.detail-section {
    background: #1a1a2e;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 16px;
}

.detail-section h3 {
    margin: 0 0 12px 0;
    color: #7ec8e3;
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Collapsible detail sections using <details>/<summary> */
details.detail-section {
    padding: 0;
}

details.detail-section > summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    border-radius: 8px;
}

details.detail-section > summary::-webkit-details-marker {
    display: none;
}

details.detail-section > summary::before {
    content: '\25B6';  /* ▶ */
    font-size: 0.7em;
    color: #7ec8e3;
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

details.detail-section[open] > summary::before {
    transform: rotate(90deg);
}

details.detail-section > summary:hover {
    background: #1e1e38;
}

details.detail-section > summary h3 {
    margin: 0;
}

details.detail-section > .collapsible-body {
    padding: 0 16px 16px 16px;
}

.morph-detail-grid {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 6px 12px;
}

.detail-label {
    color: #999;
    font-size: 0.85em;
}

.detail-value {
    color: #eee;
}

.inline-edit {
    background: #222;
    border: 1px solid #444;
    border-radius: 4px;
    color: #eee;
    padding: 4px 8px;
    width: 100%;
    font-size: 0.9em;
}

.inline-edit:focus {
    border-color: #7ec8e3;
    outline: none;
}

.data-table.compact {
    font-size: 0.85em;
}

.data-table.compact td, .data-table.compact th {
    padding: 4px 8px;
}

/* ── Bare inline / prose links (no explicit class) ─────────────────────────── */
.data-table a:not([class]),
.detail-section a:not([class]),
.meta-grid a:not([class]),
.text-muted a:not([class]) {
    color: #7ab3ff;
    text-decoration: none;
    border-bottom: 1px solid rgba(122, 179, 255, 0.3);
    transition: color 0.15s, border-color 0.15s;
}
.data-table a:not([class]):hover,
.detail-section a:not([class]):hover,
.meta-grid a:not([class]):hover,
.text-muted a:not([class]):hover {
    color: #a8d0ff;
    border-bottom-color: #a8d0ff;
}

.monospace {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.9em;
}

.code-block {
    background: #111;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 12px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.8em;
    color: #aaa;
    overflow-x: auto;
    max-height: 300px;
    overflow-y: auto;
    white-space: pre-wrap;
}

.json-editor {
    width: 100%;
    background: #111;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 12px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.8em;
    color: #ccc;
    resize: vertical;
}

.json-editor:focus {
    border-color: #7ec8e3;
    outline: none;
}

/* Robot type badges */
.badge-bow { background: #2d5016; color: #9ade5a; }
.badge-spider { background: #4a1650; color: #d97ee3; }
.badge-pendulum { background: #164a50; color: #7ee3d9; }
.badge-other { background: #444; color: #ccc; }

/* ═══════════════════════════════════════════════════════════════════════
   Inline config editing
   ═══════════════════════════════════════════════════════════════════════ */

.editable-table td { vertical-align: middle; }

.cell-edit {
    width: 90px;
    padding: 3px 6px;
    background: #1a1a2e;
    border: 1px solid #444;
    border-radius: 3px;
    color: #e0e0e0;
    font-size: 0.85em;
    font-family: 'SF Mono', 'Fira Code', monospace;
}
.cell-edit:focus {
    border-color: #7ec8e3;
    outline: none;
    background: #222244;
}
.cell-edit[type="checkbox"] {
    width: auto;
    accent-color: #7ec8e3;
}

.cell-select {
    padding: 3px 6px;
    background: #1a1a2e;
    border: 1px solid #444;
    border-radius: 3px;
    color: #e0e0e0;
    font-size: 0.85em;
}
.cell-select:focus {
    border-color: #7ec8e3;
    outline: none;
}

.section-edit-hint {
    font-size: 0.75em;
    color: #888;
    font-style: italic;
    margin-left: 8px;
    font-weight: normal;
}

.save-status {
    font-size: 0.8em;
    margin-left: 8px;
}

.btn-xs {
    padding: 1px 6px;
    font-size: 0.75em;
    border-radius: 3px;
    cursor: pointer;
    line-height: 1.4;
}

.btn-danger {
    background: #700;
    color: #f99;
    border: 1px solid #900;
}
.btn-danger:hover {
    background: #900;
}

.btn-save-section {
    margin-top: 8px;
    padding: 4px 14px;
    font-size: 0.85em;
    background: #16213e;
    color: #7ec8e3;
    border: 1px solid #7ec8e3;
    border-radius: 4px;
    cursor: pointer;
}
.btn-save-section:hover {
    background: #1a3a5c;
}

.add-sensor-form {
    background: #16213e;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 12px;
    margin-top: 8px;
}
.add-sensor-form label {
    display: block;
    font-size: 0.85em;
    color: #aaa;
    margin-bottom: 4px;
    margin-top: 8px;
}
.add-sensor-form label:first-child { margin-top: 0; }
.add-sensor-form select,
.add-sensor-form input {
    width: 100%;
    padding: 5px 8px;
    background: #1a1a2e;
    border: 1px solid #444;
    border-radius: 3px;
    color: #e0e0e0;
    font-size: 0.85em;
}
.add-sensor-form .btn {
    margin-top: 10px;
}

/* ---- Multi-Objective Form ---- */

.objective-item {
    border: 1px solid #2a2a3a;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 10px;
    background: #13131f;
}

.objective-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

/* Objective Toolbar (Load / Save / Delete) */
.objective-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 6px 8px;
    background: #0d1117;
    border: 1px solid #1a2744;
    border-radius: 6px;
    flex-wrap: wrap;
}
.objective-toolbar .obj-lib-select {
    background: #1a1a2e;
    border: 1px solid #2a2a3a;
    color: #ccc;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.82em;
    min-width: 200px;
    max-width: 320px;
    cursor: pointer;
}
.objective-toolbar .obj-lib-select:hover {
    border-color: #4a4a6a;
}
.objective-toolbar .obj-toolbar-save {
    background: #22543d;
    color: #a7f3d0;
    font-size: 0.78em;
    padding: 3px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}
.objective-toolbar .obj-toolbar-save:hover {
    background: #166534;
}
.objective-toolbar .obj-toolbar-delete {
    font-size: 0.78em;
    padding: 3px 10px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}
.objective-toolbar .obj-toolbar-status {
    font-size: 0.8em;
    margin-left: 4px;
}
.objective-toolbar-slot {
    margin-bottom: 8px;
}

.objective-item-number {
    font-weight: 600;
    color: #aaa;
    font-size: 0.85em;
    min-width: 80px;
}

.objective-item-header .cfg-obj-name {
    flex: 1;
    background: #1a1a2e;
    border: 1px solid #2a2a3a;
    color: #e0e0e0;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.95em;
}

.objective-item-header .cfg-obj-remove {
    margin-left: auto;
}

.objectives-list {
    margin-top: 8px;
}

.objectives-list .expression-palette {
    margin-top: 8px;
}

.objective-card {
    border: 1px solid #2a2a3a;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 12px;
    background: #13131f;
}

.objective-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.objective-card-number {
    font-weight: 600;
    color: #aaa;
    font-size: 0.85em;
    min-width: 80px;
}

.objective-name-input {
    flex: 1;
    background: #1a1a2e;
    border: 1px solid #2a2a3a;
    color: #e0e0e0;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.9em;
}

.objective-remove-btn {
    margin-left: auto;
    padding: 2px 8px;
    font-size: 0.8em;
}

.btn-xs {
    padding: 2px 8px;
    font-size: 0.8em;
    border-radius: 3px;
}

.objectives-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

/* ---- Objective selector bar (viewer + training preview) ---- */

.viewer-objective-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.03);
    border-top: 1px solid #1e1e2e;
    flex-wrap: wrap;
}

.objective-bar-label {
    font-size: 0.85em;
    color: #888;
    flex-shrink: 0;
}

.objective-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.objective-tab {
    padding: 4px 12px;
    font-size: 0.85em;
    border: 1px solid #2a2a3a;
    background: transparent;
    color: #aaa;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}

.objective-tab:hover {
    background: #1e1e2e;
    color: #e0e0e0;
}

.objective-tab.active {
    background: #3a3a7a;
    border-color: #5a5aaa;
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   Morphologies browser
   ═══════════════════════════════════════════════════════════════ */

.morph-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

/* ── Shared style for all in-table name / row-opener links ─────────────────── */
.table-link,
.morph-name-link {
    color: #e0e0e0;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(122, 179, 255, 0.35);
    transition: color 0.15s, border-color 0.15s;
    cursor: pointer;
}
.table-link:hover,
.morph-name-link:hover {
    color: #7ab3ff;
    border-bottom-color: #7ab3ff;
    text-decoration: none;
}

.morph-compare-columns {
    display: flex;
    gap: 16px;
}
.morph-compare-col {
    flex: 1;
    min-width: 0;
}
.morph-compare-col h4 {
    margin: 0 0 6px;
    font-size: 0.9rem;
    color: #aaa;
}

.json-block {
    background: #1e1e2e;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.8rem;
    overflow-x: auto;
    max-height: 200px;
    color: #ccc;
}

.merge-part-sel {
    width: 100%;
}

/* Comparison row highlighting */
.cmp-diff {
    background: rgba(200, 120, 50, 0.12);
}
.cmp-missing {
    background: rgba(200, 50, 50, 0.12);
}

/* ═══════════════════════════════════════════════════════════════
   Toast Notifications
   ═══════════════════════════════════════════════════════════════ */
.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
}

.toast {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 12px 20px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-left: 4px solid var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 250px;
    max-width: 400px;
    animation: slideIn 0.3s ease-out forwards;
    opacity: 0;
    transform: translateX(100%);
}

.toast.success { border-left-color: var(--success-color); }
.toast.error { border-left-color: var(--error-color); }
.toast.warning { border-left-color: var(--warning-color); }

.toast.fade-out {
    animation: fadeOut 0.3s ease-in forwards;
}

@keyframes slideIn {
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeOut {
    to { opacity: 0; transform: translateX(100%); }
}

/* ═══════════════════════════════════════════════════════════════
   Form Grid & Layout Utilities
   ═══════════════════════════════════════════════════════════════ */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.form-grid .form-group {
    margin-bottom: 0;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    margin-right: 8px;
    vertical-align: middle;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}
.cmp-diff-detail td {
    border-top: none !important;
    padding-top: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   Sandbox (interactive live simulation)
   ═══════════════════════════════════════════════════════════════ */

.sandbox-status {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 4px;
}
.sandbox-status.connecting {
    color: #f0ad4e;
}
.sandbox-status.connected {
    color: #5cb85c;
}
.sandbox-status.disconnected {
    color: #d9534f;
}

#sandbox-info {
    font-size: 0.82rem;
    margin-top: 6px;
}
#sandbox-info kbd {
    background: #333;
    border: 1px solid #555;
    border-radius: 3px;
    padding: 1px 5px;
    font-family: monospace;
    font-size: 0.85em;
}

/* Sandbox picker */
.sandbox-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.sandbox-picker-card {
    display: block;
    background: #1a1a2e;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 16px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, background 0.15s;
}
.sandbox-picker-card:hover {
    border-color: #1a6;
    background: #1e1e3a;
}
.sandbox-picker-card h4 {
    margin: 0 0 8px 0;
    font-size: 1em;
    color: #ddd;
}
.sandbox-picker-card .meta {
    font-size: 0.82em;
    color: #888;
    line-height: 1.5;
}

/* ── Create Config Dialog ──────────────────────────────────────────────────── */
dialog.create-config-dialog {
    background: #1a1a2e;
    color: #e0e0e0;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 0;
    width: min(560px, 90vw);
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
dialog.create-config-dialog::backdrop {
    background: rgba(0,0,0,0.6);
}
dialog.create-config-dialog .dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #333;
}
dialog.create-config-dialog .dialog-header h3 {
    margin: 0;
    font-size: 1.1em;
}
dialog.create-config-dialog .dialog-close {
    background: none;
    border: none;
    color: #888;
    font-size: 1.4em;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
dialog.create-config-dialog .dialog-close:hover { color: #fff; }
dialog.create-config-dialog .dialog-body {
    padding: 20px;
}
dialog.create-config-dialog .mode-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border: 1px solid #333;
    border-radius: 6px;
    overflow: hidden;
}
dialog.create-config-dialog .mode-tab {
    flex: 1;
    padding: 8px 12px;
    border: none;
    background: #16213e;
    color: #aaa;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 600;
    transition: all 0.15s;
    text-align: center;
}
dialog.create-config-dialog .mode-tab.active {
    background: #0f3460;
    color: #fff;
}
dialog.create-config-dialog .mode-tab:hover:not(.active) {
    background: #1a3a5c;
    color: #ddd;
}
dialog.create-config-dialog .mode-panel {
    display: none;
}
dialog.create-config-dialog .mode-panel.active {
    display: block;
}
dialog.create-config-dialog .field {
    margin-bottom: 14px;
}
dialog.create-config-dialog .field label {
    display: block;
    font-size: 0.82em;
    font-weight: 600;
    color: #aaa;
    margin-bottom: 4px;
}
dialog.create-config-dialog .field input,
dialog.create-config-dialog .field select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #333;
    border-radius: 6px;
    background: #16213e;
    color: #e0e0e0;
    font-size: 0.9em;
    box-sizing: border-box;
}
dialog.create-config-dialog .field input:focus,
dialog.create-config-dialog .field select:focus {
    border-color: #e94560;
    outline: none;
}
dialog.create-config-dialog .dialog-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid #333;
    flex-wrap: wrap;
}
dialog.create-config-dialog .dialog-error {
    flex: 1 1 100%;
    color: #e94560;
    background: rgba(233, 69, 96, 0.1);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.9em;
    margin-bottom: 8px;
}
dialog.create-config-dialog .ref-count-badge {
    color: #888;
    font-size: 0.85em;
}

/* ---- Workbench Recent Runs ---- */
.btn-success {
    background: #28a745;
    border-color: #28a745;
    color: white;
}

.workbench-run-actions {
    white-space: nowrap;
}
.workbench-run-actions .btn {
    margin-right: 4px;
}

/* ── Component Info Button & Detail Panel ─────────────────────────── */
.component-info-btn {
    background: none;
    border: 1px solid #555;
    border-radius: 50%;
    color: #7ec8e3;
    font-size: 0.75em;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    padding: 0;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 4px;
    opacity: 0.7;
    transition: opacity 0.15s, border-color 0.15s;
}
.component-info-btn:hover {
    opacity: 1;
    border-color: #7ec8e3;
}
.component-info-btn.active {
    background: #7ec8e3;
    color: #1a1a2e;
    opacity: 1;
}

/* Anchor popovers to form groups so opening details does not shift layout */
.form-group {
    position: relative;
    overflow: visible;
}

.component-detail-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    width: min(420px, calc(100vw - 48px));
    max-height: min(60vh, 420px);
    overflow: auto;
    padding: 8px 10px;
    background: #1a1a2e;
    border: 1px solid #333;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    font-size: 0.82em;
    line-height: 1.5;
    color: #ccc;
    animation: detailSlideIn 0.15s ease-out;
}
.component-detail-panel[hidden] {
    display: none;
}
@keyframes detailSlideIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.component-detail-panel .cdp-row {
    display: flex;
    gap: 6px;
}
.component-detail-panel .cdp-label {
    color: #888;
    min-width: 70px;
    flex-shrink: 0;
}
.component-detail-panel .cdp-value {
    color: #eee;
    word-break: break-word;
}
.component-detail-panel .cdp-desc {
    color: #aaa;
    font-style: italic;
    margin-bottom: 4px;
}
.component-detail-panel .cdp-empty {
    color: #666;
    font-style: italic;
}

.sensor-docs-block {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sensor-docs-heading {
    color: #9fb1bd;
    font-size: 0.88em;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
}

.sensor-docs-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sensor-doc-card {
    border: 1px solid rgba(126, 200, 227, 0.16);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    padding: 8px;
}

.sensor-doc-card-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: baseline;
    margin-bottom: 4px;
}

.sensor-doc-name {
    color: #f2f5f7;
    font-weight: 600;
}

.sensor-doc-range {
    color: #7ec8e3;
    font-size: 0.85em;
}

.sensor-doc-summary {
    color: #d1d8dd;
    margin-bottom: 6px;
}

.sensor-doc-line {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 8px;
    color: #c3ccd3;
}

.sensor-doc-label {
    color: #7f8d99;
    font-weight: 600;
}

.morph-sensor-docs-wrap {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.morph-sensor-docs-wrap .rule-types-picker {
    flex: 1;
}

.morph-sensor-docs-panel {
    left: auto;
    right: 0;
    top: calc(100% + 4px);
}


/* ─── Dashboard v2: grouped, comparable, chip-decorated ──────────────────── */

.dash-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}
.dash-toolbar-search {
    flex: 1;
    min-width: 180px;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
}
.dash-toolbar-select {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
}
.dash-toolbar-check {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    white-space: nowrap;
    color: var(--text-muted);
}
.dash-toolbar-count {
    color: var(--text-muted);
    margin-left: auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.dash-group {
    margin-bottom: 18px;
}
.dash-group-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s ease;
    flex-wrap: wrap;
}
.dash-group-header:hover { background: #134680; }
.dash-group-toggle {
    color: var(--text-muted);
    font-size: 11px;
    width: 12px;
    flex-shrink: 0;
}
.dash-group-label {
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'SF Mono', Menlo, monospace;
    font-size: 13px;
    overflow-wrap: anywhere;
    flex: 1 1 0;
    min-width: 0;
}
.dash-group-sublabel {
    color: var(--text-muted);
    font-size: 12px;
    font-style: italic;
}
.dash-group-stats {
    margin-left: auto;
    display: flex;
    gap: 14px;
    color: var(--text-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.dash-table {
    border-radius: 0 0 6px 6px;
    overflow: hidden;
}
.dash-row { transition: background 0.1s ease; }
.dash-row.expanded { background: rgba(125, 211, 252, 0.06); }
.dash-cell-link, .dash-cell-objectives { cursor: pointer; }
.dash-cell-link { padding: 0; }
.dash-link-anchor { display: block; padding: 12px 16px; color: inherit; text-decoration: none; }
.dash-cell-static { cursor: default; }
.dash-cell-objectives:hover { background: rgba(125, 211, 252, 0.04); }

.dash-sortable { cursor: pointer; user-select: none; }
.dash-sortable:hover { color: var(--text-primary); }
.dash-sortable.active { color: var(--accent-color); }

.dash-fit { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-primary); }

/* Comparison cells */
.compare-bar {
    position: relative;
    width: 110px;
    height: 18px;
    background: rgba(255,255,255,0.05);
    border-radius: 3px;
    overflow: hidden;
}
.compare-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(90deg, #1d6fa5, #7dd3fc);
    border-radius: 3px;
}
.compare-bar-neg .compare-bar-fill { background: linear-gradient(90deg, #7a2030, #fda4af); }
.compare-bar-label {
    position: relative;
    display: block;
    text-align: center;
    line-height: 18px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    text-shadow: 0 0 2px rgba(0,0,0,0.6);
}
.pctile {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--border-color);
}
.pctile-top { color: #86efac; border-color: #2d6a4f; background: rgba(45,106,79,0.18); }
.pctile-mid { color: #fcd34d; border-color: #8b6914; background: rgba(139,105,20,0.18); }
.pctile-low { color: #fda4af; border-color: #7a2030; background: rgba(122,32,48,0.18); }

.sparkline { display: block; }
.sparkline .spark-zero { stroke: rgba(255,255,255,0.15); stroke-width: 0.7; stroke-dasharray: 2 2; }

.component-bar {
    display: flex;
    width: 110px;
    height: 14px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(255,255,255,0.05);
}
.component-seg { display: block; height: 100%; }
.component-seg-neg {
    background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.4) 0 3px, transparent 3px 6px);
    background-blend-mode: multiply;
}

/* Expression chips (dashboard variant — decoupled from editor's `.chip`) */
.expr-canonical, .expr-summary, .expr-pretty {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.expr-chip {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-family: 'SF Mono', Menlo, monospace;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.02);
    color: var(--text-muted);
    line-height: 1.4;
    white-space: nowrap;
}
.expr-chip.expr-part { background: rgba(125,211,252,0.06); }
.expr-chip.expr-fn { color: #c77dff; border-color: #7b2d8b; background: rgba(123,45,139,0.10); }
.expr-chip.expr-global { color: #f0c040; border-color: #8b6914; background: rgba(139,105,20,0.10); }
.expr-chip.expr-num { color: #a3e635; border-color: #4d6e1f; background: rgba(77,110,31,0.10); }
.expr-chip.expr-ref { color: #a5b4fc; border-color: #4338ca; background: rgba(67,56,202,0.10); }
.expr-chip.expr-objname { color: var(--text-primary); border-color: var(--accent-color); background: rgba(233,69,96,0.10); font-weight: 600; }
.expr-chip.expr-more { color: var(--text-muted); }
.expr-op { color: var(--text-muted); padding: 0 2px; font-family: 'SF Mono', Menlo, monospace; }
.expr-paren { color: var(--text-muted); }
.expr-warn { color: #fcd34d; margin-left: 4px; }
.expr-flag { color: #86efac; margin-left: 4px; }

/* Row expansion */
.dash-row-expansion > td {
    background: rgba(15, 52, 96, 0.35);
    padding: 12px 16px;
}
.dash-expansion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dash-expansion-actions { display: flex; gap: 8px; margin-top: 4px; }
.expr-objective-block {
    border-left: 2px solid var(--accent-color);
    padding: 4px 0 4px 10px;
}
.expr-objective-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.expr-block-label {
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 4px;
}
.expr-pretty-line {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    padding: 4px 0;
}
.expr-raw {
    background: var(--bg-primary);
    padding: 8px;
    border-radius: 4px;
    font-size: 11px;
    overflow: auto;
    color: var(--text-muted);
}

.dash-compare-bar {
    margin-top: 10px;
    padding: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    align-items: center;
    gap: 10px;
}

/* ─── Triage layer (v3): tier badges, top-of-group, action bar ───────────── */

.triage-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 9px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    background: rgba(255,255,255,0.03);
    vertical-align: middle;
}
.triage-promising { color: #86efac; border-color: #2d6a4f; background: rgba(45,106,79,0.18); font-weight: 600; }
.triage-decent    { color: #7dd3fc; border-color: #1d6fa5; background: rgba(29,111,165,0.16); }
.triage-ok        { color: var(--text-muted); }
.triage-short     { color: #a0a0b0; border-color: #444; background: rgba(255,255,255,0.02); }
.triage-stuck     { color: #fcd34d; border-color: #8b6914; background: rgba(139,105,20,0.18); }
.triage-errored   { color: #fda4af; border-color: #7a2030; background: rgba(122,32,48,0.18); }

/* Tone-down chaff rows so the eye glides past them */
.dash-row.row-tier-short td,
.dash-row.row-tier-errored td { opacity: 0.55; }
.dash-row.row-tier-stuck td { opacity: 0.7; }
.dash-row.row-tier-promising { background: rgba(45, 106, 79, 0.06); }
.dash-row.row-tier-promising td:first-child { border-left: 2px solid #86efac; }

/* Top of group ribbon */
.dash-row.top-of-group {
    box-shadow: inset 3px 0 0 var(--accent-color);
}
.top-mark {
    color: #f5a623;
    margin-right: 4px;
    font-size: 11px;
}

/* Toolbar count colors */
.dash-toolbar-count .text-promising { color: #86efac; }
.dash-toolbar-count .text-chaff { color: #fda4af; }
.dash-toolbar-count .text-starred { color: #f5a623; }

/* Action bar — appears inside the sticky toolbar wrap when rows are
   selected, so it stays visible regardless of scroll position. */
.dash-action-bar {
    margin: 8px 0 0 0;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--accent-color);
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.dash-action-count {
    font-size: 13px;
    color: var(--text-muted);
}
.dash-action-count strong {
    color: var(--text-primary);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    margin-right: 2px;
}
.btn-danger {
    background: #7a2030;
    color: #fda4af;
    border: 1px solid #c5485f;
}
.btn-danger:hover { background: #c5485f; color: #fff; }
.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid transparent;
}
.btn-ghost:hover { color: var(--text-primary); border-color: var(--border-color); }

/* ─── Dashboard v5: explicit filters ─────────────────────────────────────── */

.dash-toolbar-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Stick to the top of the scrolling #content. Because #view-dashboard
       has padding-top: 0, the scrollport top equals the viewport top, so
       this wrapper pins flush against y=0 with no gap. Negative left/right
       margins extend the opaque background out into #content's 30px side
       padding so content scrolling under it cannot bleed through. */
    position: sticky;
    top: 0;
    z-index: 20;
    margin: 0 -30px 12px -30px;
    padding: 18px 30px 10px 30px;
    background: #1a1a2e;
    box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.55);
}
.dash-title {
    margin: 0 0 4px 0;
    color: #fff;
    font-size: 1.4em;
    line-height: 1.1;
}
.dash-toolbar-row1 { align-items: center; }
.dash-toolbar-row2 {
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 8px;
    background: var(--bg-tertiary, rgba(255,255,255,0.02));
    border: 1px solid var(--border-color);
    border-radius: 6px;
}
.dash-filter-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-right: 4px;
}
.dash-filter, .dash-filter-check {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-secondary, var(--text-primary));
    white-space: nowrap;
}
.dash-num-input {
    width: 60px;
    padding: 2px 4px;
    font-size: 12px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.dash-num-input:focus { outline: none; border-color: var(--accent-color); }

/* Polarity toggle */
.dash-polarity {
    display: inline-flex;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}
.dash-pol-btn {
    background: transparent;
    color: var(--text-muted);
    border: 0;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    border-right: 1px solid var(--border-color);
}
.dash-pol-btn:last-child { border-right: 0; }
.dash-pol-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.04); }
.dash-pol-btn.active {
    background: var(--accent-color);
    color: #fff;
}
.dash-pol-btn[data-pol="hidden"].active { background: #7a2030; }

/* Filter-chip stats line */
.dash-filter-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: 8px;
}
.dash-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    font-size: 11px;
    background: rgba(125, 211, 252, 0.08);
    border: 1px solid rgba(125, 211, 252, 0.3);
    border-radius: 9px;
    color: #7dd3fc;
    cursor: pointer;
    font-family: inherit;
}
.dash-filter-chip:hover {
    background: rgba(125, 211, 252, 0.18);
    color: #fff;
}
.dash-filter-chip strong {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* "Hidden" mode visually warns the user the rows shown are deletion candidates */
.dash-row.row-hidden-mode td:first-child {
    box-shadow: inset 3px 0 0 #c5485f;
}

/* xs button variant */
.btn-xs {
    padding: 2px 8px;
    font-size: 11px;
    line-height: 1.4;
}

/* ── Dashboard preview thumbnails (lazy-loaded canvas replays) ───────────── */
.dash-cell-preview {
    padding: 4px 6px !important;
    width: 1%;            /* shrink-to-content */
    white-space: nowrap;
    vertical-align: middle;
}
.dash-preview-strip {
    display: inline-flex;
    gap: 4px;
    align-items: stretch;
}
.dash-preview-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.dash-preview-canvas {
    display: block;
    width: 140px;
    height: 84px;
    border-radius: 4px;
    background: #0a0a1a;
    border: 1px solid rgba(255,255,255,0.08);
}
.dash-preview-label {
    font-size: 10px;
    color: var(--text-muted);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: monospace;
}
.dash-preview-empty {
    width: 140px;
    height: 84px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 11px;
    border: 1px dashed rgba(255,255,255,0.08);
    border-radius: 4px;
}

/* ─── Saved-libraries list (State Libraries view) ─────────────────────────── */
.library-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.library-row {
    display: grid;
    grid-template-columns: 24px 1fr auto auto auto auto;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}
.library-row .library-name {
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.library-row .text-muted {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* ─── Standalone sticky bulk-action bars (State Libraries, Distill picker) ─── */
/* These views' action bars sit outside the toolbar wrap, so they need their
   own bottom-pinned sticky position to stay visible while scrolling. */
#rs-action-bar,
#distill-action-bar {
    position: sticky;
    bottom: 12px;
    z-index: 30;
    margin-top: 12px;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.55);
}

/* ─── Distill form labels ─────────────────────────────────────────────────── */
/* Labels in #distill-form contain both the label text and the <input>/<select>
   child.  Without explicit block display they flow inline and overlap. */
#distill-form label {
    display: block;
    font-size: 0.85em;
    color: #a0a0b0;
    margin-bottom: 8px;
}
#distill-form label > input,
#distill-form label > select {
    display: block;
    margin-top: 4px;
    width: 100%;
}

/* ─── Distill configure panel & multi-column form layout ─────────────────── */
.distill-configure-panel {
    background: var(--bg-secondary);
    border: 1px solid #0f3460;
    border-radius: 8px;
    padding: 20px 24px 24px;
}

.distill-form-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 40px;
    align-items: start;
    margin-top: 12px;
}

.distill-form-cols-2col {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 8px 48px;
    align-items: start;
    margin-top: 12px;
}

.distill-form-col-group {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.distill-form-col h4 {
    margin-bottom: 8px;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #707088;
    border-bottom: 1px solid #0f3460;
    padding-bottom: 4px;
}

/* === Tags & Re-evaluation === */
.tag-chip {
    display: inline-block;
    padding: 1px 7px;
    margin-right: 4px;
    border: 1px solid #888;
    border-radius: 10px;
    font-size: 0.78em;
    line-height: 1.4;
    color: #ccc;
    background: rgba(255,255,255,0.04);
    white-space: nowrap;
}
.tag-chip-removable .tag-chip-x {
    margin-left: 4px;
    cursor: pointer;
    opacity: 0.65;
}
.tag-chip-removable .tag-chip-x:hover { opacity: 1; }
.dash-row-tags { display: inline-block; margin-left: 6px; }

.tag-color-picker { display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0; }
.tag-color-dot {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
}
.tag-color-dot.selected { border-color: #fff; }
.tag-swatch {
    display: inline-block; width: 12px; height: 12px;
    border-radius: 50%; vertical-align: middle; margin-right: 6px;
}

.detail-card-wide { grid-column: 1 / -1; }

.eval-panel table, .lb-table { width: 100%; border-collapse: collapse; }
.eval-panel th, .eval-panel td, .lb-table th, .lb-table td {
    padding: 4px 8px; text-align: left; border-bottom: 1px solid #2a2a2a;
}
.lb-badge-cached { color: #6c6; }
.lb-badge-stale { color: #cc6; }
.lb-badge-missing { color: #888; }
.lb-badge-incompatible { color: #c66; }
.lb-badge-no-checkpoint { color: #fa8; }
.lb-job-bar {
    height: 8px; background: #222; border-radius: 4px; overflow: hidden;
    margin: 8px 0;
}
.lb-job-bar-fill {
    height: 100%; background: linear-gradient(90deg, #4a90e2, #6cf);
    transition: width 0.3s;
}

/* ── Multi-Behavior Project detail ─────────────────────────────────────────── */
.project-detail {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.project-section {
    background: var(--bg-secondary, #1a1a2e);
    border: 1px solid var(--border-color, #333);
    border-radius: 8px;
    padding: 16px 20px;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 12px;
    gap: 8px 12px;
}

.section-header h3 {
    margin: 0;
    font-size: 1em;
}

.section-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Behavior label chips */
.behavior-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.behavior-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(100, 180, 255, 0.15);
    border: 1px solid rgba(100, 180, 255, 0.3);
    color: #9dc8f5;
    font-size: 0.82em;
    font-family: 'SF Mono', 'Fira Code', monospace;
    letter-spacing: 0.2px;
}

.chip-mirror-badge {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 5px;
    border-radius: 8px;
    background: rgba(180, 130, 255, 0.18);
    border: 1px solid rgba(180, 130, 255, 0.35);
    color: #c4a0f0;
    font-size: 0.88em;
    font-family: inherit;
}

/* Wide modal variant for experiment picker */
.modal-card-wide {
    width: min(95vw, 980px);
    max-height: 88vh;
    overflow-y: auto;
}

/* Override overlay alignment for wide/tall modals so the card
   anchors near the top rather than being vertically centered */
.modal-overlay-top {
    align-items: flex-start;
    padding-top: 4vh;
}

/* Add comfortable interior padding to the wide picker card */
.modal-card-padded {
    padding: 24px 28px 20px;
}

/* Specialist picker table */
.specialist-pick-table tbody tr.specialist-pick-row:hover {
    background: rgba(100, 180, 255, 0.08);
}
.specialist-pick-table tbody tr.specialist-pick-row.selected {
    background: rgba(100, 180, 255, 0.18);
    outline: 2px solid rgba(100, 180, 255, 0.5);
    outline-offset: -2px;
}

/* ── Probe (Find Weaknesses) progress panel ────────────────────────────── */
.probe-panel {
    margin-top: 12px;
    padding: 10px 14px;
    background: #0a0a1a;
    border: 1px solid #1a2a4a;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.probe-phase-label {
    font-family: 'SF Mono', 'Menlo', monospace;
    font-size: 0.85em;
    color: #c0c0d0;
    font-weight: 600;
}

.probe-track {
    height: 6px;
    background: #1a1a2e;
    border-radius: 3px;
    overflow: hidden;
}

.probe-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #16c784, #00e5ff);
    border-radius: 3px;
    transition: width 200ms ease-out;
}

.probe-panel-done .probe-phase-label {
    color: #16c784;
}

.probe-panel-error-state .probe-phase-label {
    color: #e05c5c;
}

.probe-panel-error {
    color: #e05c5c;
    font-size: 0.85em;
    margin-top: 2px;
}

/* ─── Reward Designer ────────────────────────────────────────────────────── */

.rd-layout {
    padding: 0 24px 40px;
    max-width: 1400px;
}

.rd-subtitle { color: var(--text-muted); margin-top: 4px; }

.rd-panels { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }

/* Two-column layout: left=picker+table, right=config+controls+results */
.rd-main { display: flex; gap: 16px; align-items: flex-start; margin-top: 16px; }
.rd-left  { flex: 1; min-width: 0; transition: flex 0.2s ease; }
.rd-right { flex: 0 0 300px; width: 300px; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 8px; max-height: calc(100vh - 32px); overflow-y: auto; transition: flex 0.2s ease; }
/* Results mode: collapse the episode picker, expand the results panel */
.rd-main--results .rd-left  { flex: 0 0 260px; }
.rd-main--results .rd-right { flex: 1; width: auto; max-height: none; position: static; }

/* Mode toggle segmented control */
.rd-mode-toggle { display: inline-flex; border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; overflow: hidden; margin-top: 10px; }
.rd-mode-btn { background: transparent; border: none; border-right: 1px solid rgba(255,255,255,0.12); color: var(--text-muted); cursor: pointer; font-size: 0.82em; padding: 5px 14px; transition: background 0.15s, color 0.15s; white-space: nowrap; }
.rd-mode-btn:last-child { border-right: none; }
.rd-mode-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.rd-mode-btn.active { background: rgba(125,211,252,0.12); color: #7dd3fc; font-weight: 600; }

.rd-panel {
    background: var(--card-bg, #1e1e2e);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    padding: 12px 16px;
}

/* Episode picker */
.rd-episode-cols { display: flex; gap: 16px; margin-bottom: 12px; }
.rd-episode-col { flex: 1; min-width: 0; }
.rd-pos-col h4 { color: #4c8; }
.rd-neg-col h4 { color: #f66; }
.rd-episode-list { min-height: 36px; display: flex; flex-wrap: wrap; gap: 6px; }
.rd-episode-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 6px; border-radius: 4px; font-size: 0.8em;
}
.rd-episode-positive { background: #0d3020; border: 1px solid #4c8; }
.rd-episode-negative { background: #3e1010; border: 1px solid #f66; }
.rd-ep-name { font-weight: 500; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-ep-gen { color: var(--text-muted); font-size: 0.9em; }
.rd-ep-remove { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 1.1em; line-height: 1; padding: 0 2px; }
.rd-ep-remove:hover { color: #f88; }

/* Filter bar */
.rd-filter-bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 10px;
}
.rd-filter-input {
    flex: 1; min-width: 160px; max-width: 260px;
    background: #13131f; border: 1px solid rgba(255,255,255,0.12);
    color: inherit; border-radius: 5px; padding: 5px 10px; font-size: 0.85em;
}
.rd-filter-input:focus { outline: none; border-color: var(--accent-color); }
.rd-filter-select {
    background: #13131f; border: 1px solid rgba(255,255,255,0.12);
    color: inherit; border-radius: 5px; padding: 5px 8px; font-size: 0.85em; cursor: pointer;
}
.rd-exp-count { font-size: 0.82em; white-space: nowrap; }

/* Experiment table */
.rd-exp-table-scroll { overflow-x: auto; overflow-y: auto; max-height: 380px; }
.rd-exp-tbl {
    width: 100%; border-collapse: collapse; font-size: 0.85em;
    table-layout: fixed;
}
.rd-exp-tbl th {
    text-align: left; padding: 7px 10px; border-bottom: 1px solid rgba(255,255,255,0.1);
    color: var(--text-muted); font-weight: 600; white-space: nowrap;
}
.rd-exp-tbl td {
    padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: middle;
}
.rd-exp-row { cursor: pointer; transition: background 0.1s; }
.rd-exp-row:hover { background: rgba(125,211,252,0.04); }
.rd-exp-row.rd-row-positive { background: rgba(34,197,94,0.10); border-left: 3px solid rgba(34,197,94,0.6); }
.rd-exp-row.rd-row-negative { background: rgba(239,68,68,0.10); border-left: 3px solid rgba(239,68,68,0.6); }
.rd-exp-row.rd-row-both    { background: rgba(168,85,247,0.10); border-left: 3px solid rgba(168,85,247,0.6); }
.rd-exp-row.rd-row-positive:hover { background: rgba(34,197,94,0.16); }
.rd-exp-row.rd-row-negative:hover { background: rgba(239,68,68,0.16); }
.rd-exp-row.rd-row-both:hover    { background: rgba(168,85,247,0.16); }
.rd-col-star { width: 28px; text-align: center; color: #f5a623; }
.rd-col-fit, .rd-col-gens, .rd-col-metric { text-align: right; width: 68px; }
.rd-col-preview { width: 148px; padding: 2px 4px !important; vertical-align: middle; }
.rd-col-preview .dash-preview-strip { margin: 0; }
.rd-col-name { width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-col-body { width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-col-actions { white-space: nowrap; width: 120px; }
.rd-metric-stale { opacity: 0.7; }
.rd-metric-stale sup { font-size: 0.65em; color: var(--accent-color); }
.rd-metric-na { font-size: 0.8em; }
.rd-col-date { white-space: nowrap; width: 80px; color: var(--text-muted); }
.rd-col-status { white-space: nowrap; width: 90px; }
.rd-col-actions { white-space: nowrap; width: 120px; }
.rd-star { color: #f59e0b; font-size: 0.75em; vertical-align: middle; }
.rd-col-expr { min-width: 0; overflow: hidden; }
.rd-col-expr-hint { font-size: 0.75em; color: var(--text-muted); font-weight: normal; }
.rd-expr-pill code {
    font-size: 0.8em; color: #a8d8ff; background: rgba(100,160,255,0.08);
    padding: 1px 5px; border-radius: 3px; white-space: nowrap;
    display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
}
.rd-empty-cell { text-align: center; padding: 20px; color: var(--text-muted); }

/* Expanded detail row */
.rd-detail-row td { background: rgba(80,120,180,0.06); cursor: default; }
.rd-detail-content { padding: 8px 4px; }
.rd-detail-label { font-size: 0.8em; color: var(--text-muted); margin-bottom: 4px; }
.rd-detail-expr {
    font-size: 0.82em; background: #0d0d1a; border: 1px solid rgba(255,255,255,0.08);
    border-radius: 5px; padding: 8px 12px; margin: 0 0 8px; white-space: pre-wrap;
    word-break: break-all; max-height: 200px; overflow-y: auto;
}
.rd-detail-link { font-size: 0.82em; color: var(--accent-color); text-decoration: none; }
.rd-detail-link:hover { text-decoration: underline; }

/* GP config grid */
.rd-gp-config-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px;
    margin-top: 12px;
}
.rd-gp-config-grid label {
    display: flex; flex-direction: column; gap: 4px; font-size: 0.85em; color: var(--text-muted);
}
.rd-number-input {
    background: #13131f; border: 1px solid rgba(255,255,255,0.12);
    color: inherit; border-radius: 5px; padding: 5px 8px; font-size: 0.95em; width: 100%;
}

/* Controls bar */
.rd-panel-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rd-status-bar { display: flex; align-items: center; gap: 8px; }
.rd-phase-badge {
    font-size: 0.75em; padding: 2px 8px; border-radius: 20px;
    background: rgba(255,255,255,0.08); color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.05em;
}
.rd-progress-text { font-size: 0.85em; color: var(--text-muted); }

/* Results leaderboard */
.rd-result-table { width: 100%; border-collapse: collapse; font-size: 0.85em; }
.rd-result-table th { padding: 7px 10px; border-bottom: 1px solid rgba(255,255,255,0.1); color: var(--text-muted); text-align: left; }
.rd-result-table td { padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: middle; }
.rd-rank { width: 30px; color: var(--text-muted); }
.rd-expr code { font-size: 0.8em; color: #a8d8ff; white-space: pre-wrap; word-break: break-all; }
.rd-score { width: 70px; text-align: right; font-weight: 600; color: #4c8; }
.rd-pos, .rd-neg { width: 70px; text-align: right; }
.rd-nodes { width: 50px; text-align: right; color: var(--text-muted); }
.rd-margin { width: 72px; text-align: right; font-variant-numeric: tabular-nums; }
.rd-margin-ok  { color: #4ade80; }
.rd-margin-bad { color: #f87171; font-weight: 600; }
.rd-effect { width: 56px; text-align: right; font-variant-numeric: tabular-nums; color: #c4b5fd; cursor: help; }

/* Binding-pair callout in the expandable detail row */
.rd-binding-note {
    margin: 6px 4px 10px;
    padding: 6px 10px;
    font-size: 0.8em;
    line-height: 1.6;
    background: rgba(255,255,255,0.03);
    border-left: 3px solid #c4b5fd;
    border-radius: 3px;
}
.rd-binding-note .ep-pos { color: #4ade80; }
.rd-binding-note .ep-neg { color: #f87171; }
.rd-binding-vs { color: var(--text-muted); margin: 0 6px; }
.rd-binding-warn { color: #fbbf24; margin-left: 6px; font-style: italic; }
.rd-binding-row { background: rgba(196,181,253,0.10); }
.rd-binding-row td { font-weight: 600; }
.rd-actions { width: 70px; }
.rd-dotplot-cell { width: 220px; padding: 2px 8px; }
.rd-dotplot { display: block; width: 220px; height: 30px; cursor: default; }
.rd-result-row { cursor: pointer; }
.rd-result-row:hover { background: rgba(125,211,252,0.04); }
.rd-score-detail-row > td { padding: 0 0 4px 40px; }
.rd-score-detail-row table { width: 100%; border-collapse: collapse; font-size: 0.8em; }
.rd-score-detail-row td { padding: 2px 8px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.ep-pos  { color: #86efac; }
.ep-neg  { color: #fca5a5; }
.ep-neutral { color: #9ca3af; }
.ep-score { text-align: right; font-family: monospace; }

.rd-empty { color: var(--text-muted); font-style: italic; font-size: 0.9em; }
.rd-loading { color: var(--text-muted); font-style: italic; }
.rd-error { color: #f66; }

/* ─── Reward Designer: closed-loop stepper ─────────────────────────────────── */
.rd-stepper {
    display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap;
    margin-top: 12px;
}
.rd-step {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent; border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px; padding: 6px 12px; cursor: pointer;
    color: var(--text-muted); text-align: left;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.rd-step:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
.rd-step.active {
    background: rgba(125,211,252,0.10); border-color: rgba(125,211,252,0.45);
    color: #7dd3fc;
}
.rd-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%; flex: none;
    background: rgba(255,255,255,0.10); font-size: 0.78em; font-weight: 700;
}
.rd-step.active .rd-step-num { background: rgba(125,211,252,0.25); }
.rd-step-body { display: flex; flex-direction: column; line-height: 1.25; }
.rd-step-body strong { font-size: 0.82em; }
.rd-step-body small { font-size: 0.72em; color: var(--text-muted); }
.rd-step-arrow { align-self: center; color: var(--text-muted); font-size: 0.9em; }
.rd-step-loop { border-style: dashed; }

/* Episode pin (persist to library) */
.rd-ep-pin {
    background: none; border: none; cursor: pointer; padding: 0 2px;
    font-size: 0.95em; line-height: 1; filter: grayscale(1); opacity: 0.45;
    transition: filter 0.15s, opacity 0.15s;
}
.rd-ep-pin:hover { opacity: 0.9; }
.rd-ep-pinned { filter: none; opacity: 1; }

/* Library chips (👍/👎 markers in tables) */
.rd-lib-chip { font-size: 0.85em; }
.rd-lib-chip-pos { color: #4c8; }
.rd-lib-chip-neg { color: #f66; }

/* Smoke-test panel */
.rd-smoke-expr { margin-bottom: 8px; }
.rd-smoke-expr code { font-size: 0.85em; word-break: break-all; }
.rd-smoke-verdict {
    border-radius: 6px; padding: 8px 12px; margin-bottom: 10px; font-size: 0.85em;
}
.rd-smoke-ok { background: rgba(80,200,120,0.10); border: 1px solid rgba(80,200,120,0.4); color: #6ee7a0; }
.rd-smoke-bad { background: rgba(255,120,80,0.10); border: 1px solid rgba(255,120,80,0.4); color: #fca5a5; }
.rd-smoke-neutral { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); color: var(--text-muted); }
.rd-smoke-table td { vertical-align: middle; }
.rd-smoke-row-pos { background: rgba(80,200,120,0.06); }
.rd-smoke-row-neg { background: rgba(255,100,100,0.06); }
.rd-smoke-meta { font-size: 0.78em; margin: 8px 0 0; }

/* ─── Experiment detail: Reward Loop card ──────────────────────────────────── */
.reward-loop-hint { color: var(--text-muted); font-size: 0.85em; margin: 0 0 10px; }
.reward-loop-btns { display: flex; gap: 8px; }
.episode-label-btn { border: 1px solid rgba(255,255,255,0.15); }
.episode-label-btn--pos-active {
    background: rgba(80,200,120,0.18); border-color: #4c8; color: #6ee7a0; font-weight: 600;
}
.episode-label-btn--neg-active {
    background: rgba(255,100,100,0.15); border-color: #f66; color: #fca5a5; font-weight: 600;
}
.reward-loop-state { color: var(--text-muted); font-size: 0.8em; margin: 8px 0 0; }

/* ─── Behavior Cluster View ──────────────────────────────────────────────────── */
.dash-mode-toggle {
    display: flex; gap: 6px; margin-bottom: 12px;
}
.dash-mode-btn {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15);
    color: var(--text-muted); border-radius: 6px; padding: 5px 14px;
    cursor: pointer; font-size: 0.88em; transition: background 0.15s;
}
.dash-mode-btn.active {
    background: rgba(78,142,247,0.2); border-color: #4e8ef7; color: #8ab4f8; font-weight: 600;
}
.dash-mode-btn:hover:not(.active) { background: rgba(255,255,255,0.1); }

.cluster-header { margin-bottom: 12px; }
.cluster-controls-top { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.cluster-label { font-size: 0.87em; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.cluster-label select, .cluster-label input[type=number] {
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15);
    color: var(--text); border-radius: 5px; padding: 3px 7px; font-size: 0.9em;
}
.cluster-ab-toggle-wrap { cursor: pointer; }

.cluster-ab-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cluster-ab-panel { min-width: 0; }

.cluster-panel { }
.cluster-panel-controls {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px;
}
.cluster-algo-tabs { display: flex; }
.cluster-algo-btn {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15);
    color: var(--text-muted); padding: 3px 10px; font-size: 0.85em; cursor: pointer;
}
.cluster-algo-btn:first-child { border-radius: 5px 0 0 5px; }
.cluster-algo-btn:last-child { border-radius: 0 5px 5px 0; }
.cluster-algo-active {
    background: rgba(78,142,247,0.2); border-color: #4e8ef7; color: #8ab4f8;
}
.cluster-num { width: 4.5em !important; }

.cluster-main-row { display: flex; gap: 16px; align-items: flex-start; }
.cluster-scatter-wrap { flex-shrink: 0; }
.cluster-scatter-svg {
    width: 400px; height: 340px; background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 8px;
}
.cluster-axis-label { fill: var(--text-muted); font-size: 11px; }
.cluster-dot { cursor: pointer; transition: transform 0.65s ease, r 0.1s; }
.cluster-dot:hover { r: 8px; }

.cluster-sidebar { width: 200px; flex-shrink: 0; }
.cluster-replay-col { flex: 1; min-width: 300px; }
.cluster-sidebar-inner { display: flex; flex-direction: column; gap: 6px; }
.cluster-sidebar-title { font-size: 0.82em; color: var(--text-muted); margin: 0 0 4px; }

.cluster-card {
    border: 1px solid rgba(255,255,255,0.1); border-radius: 7px;
    padding: 8px 10px; cursor: pointer; transition: background 0.12s;
}
.cluster-card:hover { background: rgba(255,255,255,0.05); }
.cluster-card-selected { border-color: #4e8ef7 !important; background: rgba(78,142,247,0.1); }
.cluster-card-header { display: flex; align-items: center; gap: 6px; }
.cluster-color-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cluster-label-input {
    flex: 1; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.15);
    color: var(--text); font-size: 0.85em; padding: 1px 2px; min-width: 0;
    outline: none;
}
.cluster-label-input:focus { border-bottom-color: #4e8ef7; }
.cluster-count { font-size: 0.78em; color: var(--text-muted); flex-shrink: 0; }
.cluster-rep-link { font-size: 0.78em; color: #4e8ef7; text-decoration: none; display: block; margin-top: 4px; }
.cluster-rep-link:hover { text-decoration: underline; }
.cluster-noise-note { font-size: 0.8em; color: var(--text-muted); margin: 4px 0 0; }

/* Cluster progress bar */
.cluster-progress {
    margin: 6px 0 10px; display: flex; flex-direction: column; gap: 5px;
}
.cluster-progress-bar-wrap {
    height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden;
}
.cluster-progress-bar {
    height: 100%; background: #4e8ef7; border-radius: 3px;
    transition: width 0.4s ease; min-width: 2px;
}
.cluster-progress-label {
    font-size: 0.8em; color: var(--text-muted);
}

/* Cluster inline replay */
.cluster-replay-section { height: 100%; }
.cluster-replay-header {
    display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
    font-size: 0.85em; min-height: 22px;
}
.cluster-replay-title { color: var(--text-muted); flex: 1; }
.cluster-replay-explink { color: #4e8ef7; text-decoration: none; font-weight: 500; }
.cluster-replay-explink:hover { text-decoration: underline; }
.cluster-replay-canvas {
    display: block; border: 1px solid rgba(255,255,255,0.1); border-radius: 6px;
    background: #111; width: 100%; height: 340px;
}
.cluster-replay-controls { margin-top: 5px; display: flex; gap: 6px; }
.cluster-replay-placeholder {
    display: flex; align-items: center; justify-content: center;
    height: 340px; border: 1px dashed rgba(255,255,255,0.1); border-radius: 6px;
    color: var(--text-muted); font-size: 0.82em; text-align: center; padding: 16px;
}

/* Schema multi-select checkboxes */
.cluster-schema-group { display: flex; flex-direction: column; gap: 4px; }
.cluster-schema-group-label { font-size: 0.8em; color: var(--text-muted); }
.cluster-schema-checks { display: flex; gap: 8px; flex-wrap: wrap; }
.cluster-schema-check {
    display: flex; align-items: center; gap: 4px;
    font-size: 0.82em; color: var(--text); cursor: pointer;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 5px; padding: 3px 8px; transition: background 0.12s;
}
.cluster-schema-check:has(input:checked) {
    background: rgba(78,142,247,0.18); border-color: #4e8ef7; color: #8ab4f8;
}
.cluster-schema-check input { accent-color: #4e8ef7; }

/* ── Gait analysis panel ─────────────────────────────────────────────────── */

.gait-panel {
    margin-top: 12px;
    background: #16213e;
    border: 1px solid #2a3a5c;
    border-radius: 8px;
    padding: 12px 14px;
}

.gait-panel-empty {
    color: #9aa4b2;
    font-size: 0.9em;
}

.gait-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.gait-verdict {
    font-weight: 700;
    font-size: 1.02em;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.gait-verdict-good { color: #4ade80; background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.35); }
.gait-verdict-warn { color: #fcd34d; background: rgba(252,211,77,0.12); border-color: rgba(252,211,77,0.35); }
.gait-verdict-bad  { color: #f87171; background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.35); }

.gait-blurb {
    color: #9aa4b2;
    font-size: 0.88em;
}

.gait-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px 14px;
}

.gait-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: help;
}

.gait-stat-label {
    font-size: 0.72em;
    color: #9aa4b2;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gait-stat-value {
    font-family: 'SF Mono', 'Menlo', monospace;
    font-size: 0.95em;
    color: #e6edf3;
}

.gait-why {
    margin-top: 10px;
    padding: 7px 10px;
    background: rgba(252,211,77,0.08);
    border-left: 3px solid rgba(252,211,77,0.5);
    border-radius: 3px;
    color: #d8c48a;
    font-size: 0.87em;
}

.gait-trace-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    color: #7dd3fc;
}

.gait-trace { display: block; flex: 0 0 auto; }
.gait-trace-tick { stroke: rgba(255,255,255,0.16); stroke-width: 1; }

.gait-trace-note {
    color: #9aa4b2;
    font-size: 0.82em;
    font-family: 'SF Mono', 'Menlo', monospace;
}

.gait-badge {
    font-weight: 700;
    font-size: 0.85em;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.gait-badge-detail {
    margin-left: 8px;
    color: #9aa4b2;
    font-size: 0.85em;
    font-family: 'SF Mono', 'Menlo', monospace;
}

.gait-stat-muted .gait-stat-value { color: #6b7687; }
.gait-stat-muted .gait-stat-label { color: #6b7687; }

/* Sits next to the replay title so the verdict is readable without scrolling.
   margin-right:auto keeps it hugging the title inside the space-between header. */
.gait-badge-slot {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 12px;
    margin-right: auto;
}

.tp-gait-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 22px;
    margin-bottom: 8px;
}

/* Server-measured gait_* descriptor panel — the exact custom_metrics the
   reward algebra evaluated for the replay shown below, not a client-side
   estimate. Distinguished from .gait-panel (the client-side verdict) by a
   slightly warmer border and a title, so the two are never mistaken for
   duplicate readouts of the same thing. */
.measured-gait-panel {
    margin-top: 8px;
    margin-bottom: 12px;
    border-color: #35406b;
}

.measured-gait-title {
    font-size: 0.78em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #7dd3fc;
}

.gait-stat-warn .gait-stat-value {
    color: #fcd34d;
}

.gait-stat-pin {
    margin-right: 3px;
}

.gait-pin-banner {
    color: #d8c48a;
}

/* Reward term contribution rows */
.reward-term-label {
    font-family: 'SF Mono', 'Menlo', monospace;
    font-size: 0.88em;
    max-width: 420px;
    overflow-wrap: anywhere;
}

.reward-term-inert {
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 3px;
    font-family: inherit;
    font-size: 0.78em;
    font-weight: 600;
    color: #f0a04b;
    background: rgba(240,160,75,0.14);
    border: 1px solid rgba(240,160,75,0.35);
    cursor: help;
}

.reward-term-bar {
    position: relative;
    height: 16px;
    min-width: 120px;
    background: #0f1830;
    border-radius: 3px;
    overflow: hidden;
}

.reward-term-bar-pos, .reward-term-bar-neg {
    height: 100%;
}
.reward-term-bar-pos { background: rgba(74,222,128,0.45); }
.reward-term-bar-neg { background: rgba(248,113,113,0.45); }

.reward-term-bar-label {
    position: absolute;
    top: 0;
    left: 6px;
    line-height: 16px;
    font-size: 0.78em;
    font-family: 'SF Mono', 'Menlo', monospace;
    color: #e6edf3;
}

.reward-term-total td {
    border-top: 1px solid #2a3a5c;
    font-weight: 700;
}

/* ── Gait Builder ────────────────────────────────────────────────────────── */

.gait-builder {
    margin-bottom: 14px;
    background: #16213e;
    border: 1px solid #2a3a5c;
    border-radius: 8px;
    padding: 10px 14px;
}

.gait-builder > summary {
    cursor: pointer;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.gait-builder-title {
    font-weight: 700;
    color: #7dd3fc;
}

.gait-builder-body {
    margin-top: 12px;
}

.gait-builder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px 14px;
    margin-bottom: 12px;
}

.gb-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gb-field > span {
    font-size: 0.75em;
    color: #9aa4b2;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gb-constraints {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 14px;
}

.gb-check {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.9em;
    cursor: pointer;
}

.gb-check input[type="number"] {
    width: 78px;
}

.gb-unit {
    color: #9aa4b2;
    font-size: 0.85em;
}

.gb-tag {
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 3px;
}

.gb-tag-hard {
    color: #f0a04b;
    background: rgba(240,160,75,0.14);
    border: 1px solid rgba(240,160,75,0.35);
}

.gb-preview {
    border-top: 1px solid #2a3a5c;
    padding-top: 10px;
}

.gb-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.75em;
    color: #9aa4b2;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gb-expression {
    margin: 0 0 10px 0;
    padding: 10px 12px;
    background: #0f1830;
    border: 1px solid #2a3a5c;
    border-radius: 5px;
    font-family: 'SF Mono', 'Menlo', monospace;
    font-size: 0.85em;
    color: #e6edf3;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.gb-notes, .gb-caveats {
    margin: 0 0 6px 0;
    padding-left: 18px;
    font-size: 0.84em;
}

.gb-notes { color: #9aa4b2; }
.gb-notes li, .gb-caveats li { margin-bottom: 3px; }
.gb-caveats { color: #d8c48a; }

.gb-symmetry-note {
    margin-bottom: 12px;
    padding: 8px 11px;
    background: rgba(125,211,252,0.08);
    border-left: 3px solid rgba(125,211,252,0.5);
    border-radius: 3px;
    color: #a9c8dd;
    font-size: 0.85em;
}

.gb-symmetry-note code {
    font-family: 'SF Mono', 'Menlo', monospace;
    color: #7dd3fc;
}

.gb-reference {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #2a3a5c;
}

.gb-measured {
    margin-top: 8px;
    font-size: 0.85em;
    color: #9aa4b2;
}

.gb-measured strong { color: #7dd3fc; font-family: 'SF Mono', 'Menlo', monospace; }

.gb-comparatives {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 10px 22px;
    margin-top: 10px;
}

.gb-comparative {
    display: grid;
    grid-template-columns: 90px minmax(90px, 1fr) 88px;
    align-items: center;
    gap: 10px;
    font-size: 0.85em;
    min-width: 0;
}

.gb-comparative input[type="range"] { min-width: 0; width: 100%; }

.gb-comparative > span {
    color: #9aa4b2;
    font-weight: 600;
}

.gb-comparative output {
    color: #e6edf3;
    font-size: 0.88em;
    text-align: right;
}

.gb-recipe-field { margin-bottom: 6px; }
.gb-recipe-blurb {
    margin-bottom: 12px;
    font-size: 0.86em;
    color: #9aa4b2;
    min-height: 1.1em;
}

/* ── Staged (curriculum) training section ── */
.curriculum-stage-row {
    border: 1px solid #2c3442;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.02);
}
.curriculum-stage-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.curriculum-stage-snap {
    border-left: 3px solid #4a6cf7;
    padding-left: 10px;
    margin-bottom: 10px;
}
.curriculum-stage-row textarea {
    min-height: 48px;
    width: 100%;
    font-family: var(--font-mono, monospace);
    font-size: 0.9em;
}
.curriculum-status {
    padding: 10px 12px;
    border: 1px solid #2c3442;
    border-radius: 8px;
    background: rgba(74, 108, 247, 0.08);
}
.curriculum-status a { margin-right: 4px; }

/* ── Play: the toy front door ─────────────────────────────── */
.nav-play {
    margin: 10px 10px 4px;
    font-weight: 600;
    color: var(--text-primary);
    background: rgba(233, 69, 96, 0.15);
    border: 1px solid rgba(233, 69, 96, 0.4);
}
.nav-play:hover,
.nav-play.active {
    background: var(--accent-color);
    color: #fff;
}
.nav-lab-label {
    margin: 14px 10px 2px;
    padding: 10px 6px 0;
    border-top: 1px solid var(--border-color);
    font-size: 0.72em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

kbd {
    display: inline-block;
    min-width: 1.5em;
    padding: 0 0.35em;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    font: 600 0.85em ui-monospace, SFMono-Regular, Menlo, monospace;
    text-align: center;
}

.play-hero { max-width: 760px; margin: 8px 0 20px; }
.play-hero h2 { font-size: 1.9em; margin-bottom: 6px; }
.play-hero p { color: var(--text-muted); line-height: 1.5; }
.play-empty { color: var(--text-muted); }

.play-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.play-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: inherit;
    transition: transform 0.15s, border-color 0.15s;
}
.play-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-color);
    color: inherit;
    text-decoration: none;
}
.play-card canvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background: #0a0a1a;
}
.play-card-body { padding: 12px 14px 14px; }
.play-card-body h3 { margin: 0 0 4px; font-size: 1.1em; }
.play-card-body p { margin: 0; color: var(--text-muted); font-size: 0.9em; line-height: 1.4; }
.play-card-featured { grid-column: span 2; border-color: rgba(233, 69, 96, 0.6); }
.play-card-featured canvas { aspect-ratio: 32 / 9; }
@media (max-width: 700px) {
    .play-card-featured { grid-column: auto; }
}
.play-keys { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 0.85em; }

.play-critter-header { max-width: 800px; margin-bottom: 12px; }
.play-back { font-size: 0.9em; }
.play-critter-header h2 { margin: 6px 0 4px; font-size: 1.8em; }
.play-critter-header p { color: var(--text-muted); line-height: 1.5; }
.play-stage { position: relative; max-width: 1100px; }
.play-stage canvas {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    background: #0a0a1a;
}
.play-status { position: absolute; top: 10px; right: 14px; color: var(--text-muted); font-size: 0.85em; }
.play-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    max-width: 1100px;
    margin: 12px 0;
}
.play-behaviors { display: flex; flex-wrap: wrap; gap: 8px; }
.play-behavior {
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 1em;
    cursor: pointer;
}
.play-behavior.active { background: var(--accent-color); border-color: var(--accent-color); color: #fff; }
.play-hint { margin-left: auto; color: var(--text-muted); font-size: 0.85em; }
.play-level { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 0.9em; }
.play-level select { font: inherit; color: var(--text); background: var(--bg-secondary, transparent); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; }
.play-stick { display: flex; align-items: center; gap: 8px; color: var(--text-muted); flex: 1 1 260px; min-width: 0; }
.play-stick input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent-color); }
.play-speed-readout { font-variant-numeric: tabular-nums; color: var(--text-primary); }
.play-behaviors.play-sticks {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: repeat(var(--play-sticks, 1), minmax(0, 1fr));
    gap: 10px 24px;
    align-items: start;
}
.play-control { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.play-control-head { display: flex; justify-content: space-between; gap: 8px; color: var(--text-muted); white-space: nowrap; }
.play-control-head .play-speed-readout { overflow: hidden; text-overflow: ellipsis; }
.play-sticks .play-stick { flex: none; min-height: 38px; }
.play-control-foot { min-height: 1.3em; text-align: right; color: var(--text-muted); font-size: 0.9em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.play-sticks .play-hint { grid-column: 1 / -1; margin-left: 0; text-align: right; }
@media (max-width: 760px) { .play-behaviors.play-sticks { grid-template-columns: minmax(0, 1fr); } }
.play-planner[aria-pressed="true"] { background: var(--accent-color); border-color: var(--accent-color); color: #fff; }
.play-planner-readout {
    max-width: 1100px;
    margin: 0 0 8px;
    color: var(--text-muted);
    font-size: 0.9em;
    font-variant-numeric: tabular-nums;
    min-height: 1.4em;
}

.play-imagination-legend {
    max-width: 1100px;
    margin: -4px 0 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    color: var(--text-muted);
    font-size: 0.85em;
}
.play-imagination-legend .swatch {
    display: inline-block;
    width: 18px;
    height: 0;
    margin-right: 6px;
    vertical-align: middle;
    border-top: 2px solid;
}
.play-imagination-legend .swatch-ghost { height: 10px; border: 0; border-radius: 3px; background: rgba(100, 181, 246, 0.45); }
.play-imagination-legend .swatch-chosen { border-color: #64b5f6; }
.play-imagination-legend .swatch-alone { border-top-style: dashed; border-color: #ffb74d; }
.play-imagination-legend .swatch-tried { border-top-width: 1px; border-color: rgba(200, 200, 220, 0.7); }
.play-imagination-legend .swatch-flipped { border-top-width: 1px; border-color: #f06262; }

.play-underneath {
    max-width: 1100px;
    margin-top: 8px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.play-underneath summary { cursor: pointer; font-weight: 600; }
.play-underneath[open] summary { margin-bottom: 10px; }
.play-rewards { display: grid; gap: 6px; margin: 6px 0 12px; padding: 0; list-style: none; }
.play-rewards code,
.play-whole-run code {
    padding: 3px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.88em;
    word-break: break-word;
}
.play-whole-run { margin-top: 4px; color: var(--text-muted); font-size: 0.9em; }
.play-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 16px;
    margin: 0 0 12px;
    font-size: 0.92em;
}
.play-facts dt { color: var(--text-muted); }
.play-lab-link { font-weight: 600; }