:root {
  --ink: #172321; --muted: #667572; --paper: #f4f1e9; --panel: #fffdf8;
  --line: #d9ded8; --green: #176b55; --mint: #bde6d4; --orange: #e66f3b;
  --shadow: 0 18px 50px rgba(23, 35, 33, .09);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 15px/1.5 Inter, ui-sans-serif, system-ui, sans-serif; }
.topbar { height: 68px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 100; }
.brand-wrap { display: flex; align-items: center; gap: 14px; }
.sidebar-toggle-btn { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); cursor: pointer; transition: all 0.18s ease; }
.sidebar-toggle-btn:hover { border-color: var(--green); background: #f0f7f3; color: var(--green); }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; color: #fff; background: var(--green); border-radius: 10px; font-weight: 800; }
.brand strong, .brand small { display: block; }.brand strong { font-size: 16px; }.brand small { color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.connection { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.status-dot { width: 8px; height: 8px; background: #a4aaa7; border-radius: 50%; }.status-dot.online, .status-dot.ok { background: #3bb987; box-shadow: 0 0 0 4px #d9eee5; }

/* App Layout & Sidebar Navigation */
.app-layout { display: flex; min-height: calc(100vh - 128px); }
.app-sidebar { width: 210px; padding: 16px 12px; border-right: 1px solid var(--line); background: #f0f2eb; display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; transition: width 0.22s cubic-bezier(0.2, 0, 0, 1); overflow-x: hidden; }
.app-sidebar.collapsed { width: 68px; padding: 16px 8px; }

.app-sidebar .nav-tab { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font-weight: 700; font-size: 13px; text-decoration: none; cursor: pointer; transition: all 0.18s ease; white-space: nowrap; }
.app-sidebar .nav-tab:hover { color: var(--ink); background: rgba(255, 255, 255, 0.7); }
.app-sidebar .nav-tab.active { color: #fff; background: var(--ink); box-shadow: 0 4px 12px rgba(23, 35, 33, 0.18); }
.app-sidebar .nav-icon { font-size: 16px; display: inline-flex; place-items: center; width: 24px; height: 24px; flex-shrink: 0; }
.app-sidebar .nav-label { opacity: 1; transition: opacity 0.18s ease; }
.app-sidebar.collapsed .nav-label { display: none; opacity: 0; }
.app-sidebar.collapsed .nav-tab { justify-content: center; padding: 12px; }

.main-viewport { flex: 1; min-width: 0; padding: 24px; max-width: 1400px; margin: 0 auto; width: 100%; }

/* Compact Informative Footer */
.app-footer { padding: 16px 24px; border-top: 1px solid var(--line); background: var(--paper); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); }
.footer-brand-info strong { color: var(--ink); font-weight: 700; }
.footer-brand-info em { color: var(--green); font-style: normal; font-weight: 600; }
.footer-meta { display: flex; align-items: center; gap: 16px; }
.footer-badge { padding: 3px 8px; border-radius: 6px; font-weight: 800; font-size: 10px; text-transform: uppercase; background: #e2e8e4; color: var(--green); }

.workspace { display: grid; grid-template-columns: 360px minmax(0, 1fr); min-height: 600px; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; }
.catalog-panel { padding: 30px; border-right: 1px solid var(--line); min-width: 0; }.section-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }.section-heading h2 { margin: 0; font: 600 25px Georgia, serif; }
.count { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 9px; background: #e6eee9; border-radius: 20px; font-weight: 700; }
.catalog { display: grid; gap: 12px; min-width: 0; }
.catalog .card, .experiment-card { width: 100%; min-width: 0; padding: 16px; text-align: left; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: inherit; cursor: pointer; transition: all 0.18s ease; overflow-wrap: anywhere; word-break: break-word; }
.catalog .card:hover, .catalog .card.selected, .catalog .card.active, .experiment-card:hover, .experiment-card.active { border-color: var(--green); background: #f0f7f3; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(23, 107, 85, 0.08); }
.catalog .card h3 { margin: 6px 0 4px; font-size: 14px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; word-break: break-word; }
.catalog .card .meta { display: flex; flex-direction: column; gap: 2px; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; word-break: break-word; }
.badge { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; background: #e6eee9; color: var(--green); max-width: 100%; overflow-wrap: anywhere; }
.badge-success, .badge.documented { color: #fff; background: var(--green); }
.badge-synthetic, .badge.assumed { color: #355e7a; background: #e3f0f7; }
.badge-warning { color: #83472b; background: #fae4d7; }
.badge-danger, .badge.pending_validation { color: #9c2727; background: #fbe3e3; }
.tag { display: inline-flex; margin-top: 13px; padding: 4px 8px; color: var(--green); background: var(--mint); border-radius: 6px; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.detail-panel { min-width: 0; padding: 42px; }.empty-state { display: grid; place-items: center; align-content: center; height: 100%; text-align: center; color: var(--muted); }.empty-state span { color: var(--green); font: 600 Georgia, serif; opacity: .25; }.empty-state h2 { margin: 5px 0; color: var(--ink); font: 600 28px Georgia, serif; }.empty-state p { max-width: 390px; }
.detail-header { display: flex; justify-content: space-between; gap: 24px; align-items: start; border-bottom: 1px solid var(--line); padding-bottom: 26px; }.detail-header > div { min-width: 0; }.detail-header h2 { margin: 3px 0 8px; overflow-wrap: anywhere; word-break: break-word; font: 600 34px Georgia, serif; }.detail-header p { margin: 0; color: var(--muted); }
button.run { border: 0; border-radius: 10px; padding: 13px 20px; white-space: nowrap; color: #fff; background: var(--green); font-weight: 750; cursor: pointer; }button.run:hover { background: #0d5643; }button.run:disabled { opacity: .55; cursor: wait; }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 26px 0; }.metric { min-width: 0; padding: 16px; background: #f4f6f2; border-radius: 12px; }.metric span, .metric strong { display: block; }.metric span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }.metric strong { margin-top: 5px; font-size: 18px; }
.notice { padding: 18px 20px; border-left: 3px solid var(--orange); background: #fff3eb; border-radius: 4px 12px 12px 4px; }.notice strong { display: block; color: #9b3c1c; }.notice ul { margin: 8px 0 0; padding-left: 18px; color: #714d40; }
.config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }.config-block { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 12px; }.config-block span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; text-transform: uppercase; }.config-block code { overflow-wrap: anywhere; font-size: 12px; }
.results { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }.results h3 { margin: 0 0 18px; font: 600 25px Georgia, serif; }.results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.result-card { padding: 18px; color: #fff; background: var(--ink); border-radius: 12px; }.result-card span,.result-card strong { display:block }.result-card span { color:#afbbb7;font-size:11px;text-transform:uppercase }.result-card strong { margin-top:7px;font-size:21px }.error { color: #a52626; }.muted { color: var(--muted); }
.plant-card,.chart-card { margin-top: 28px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: #fafaf6; overflow: hidden; }.chart-heading { display:flex; align-items:start; justify-content:space-between; gap:20px; }.chart-heading h4 { margin:0; font:600 22px Georgia,serif; }.chart-heading > span { padding:5px 9px; color:var(--green); background:#e5eee9; border-radius:6px; font-size:11px; font-weight:800; text-transform:uppercase; }
.plant { position:relative; display:grid; grid-template-columns:160px minmax(70px,1fr) 160px minmax(70px,1fr) 160px; align-items:center; min-height:350px; margin-top:20px; }.plant-node { position:relative; z-index:2; padding:18px; border:1px solid #aab7b1; border-radius:14px; background:#fff; box-shadow:0 8px 18px rgba(23,35,33,.06); text-align:center; }.plant-node small,.plant-node strong,.plant-node span { display:block; }.plant-node small { color:var(--muted); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }.plant-node strong { margin:5px 0; font-size:17px; text-transform:capitalize; }.plant-node span { color:var(--green); font:700 12px ui-monospace,monospace; }.source-node { border-color:#58a78f; }.bus-node { border-width:2px; border-color:var(--green); }.load-node { border-color:#e4a284; }
.flow { position:relative; height:4px; background:#d7dedb; overflow:hidden; }.flow i { position:absolute; inset:0; background:linear-gradient(90deg,transparent 0 30%,var(--green) 30% 48%,transparent 48% 100%); background-size:42px 100%; opacity:0; }.flow.active i { opacity:1; animation:energy-flow 1.3s linear infinite; }.flow.warning i { background:linear-gradient(90deg,transparent 0 30%,var(--orange) 30% 48%,transparent 48% 100%); background-size:42px 100%; }.flow.reverse i { animation-direction:reverse; }.storage-bank { position:absolute; left:50%; bottom:8px; display:flex; gap:24px; transform:translateX(-50%); }.storage-branch { display:flex; flex-direction:column; align-items:center; width:160px; }.storage-branch .flow { width:4px; height:70px; }.storage-branch .flow i { background:linear-gradient(180deg,transparent 0 30%,var(--green) 30% 48%,transparent 48% 100%); background-size:100% 42px; }.storage-branch .flow.active i { animation-name:energy-flow-vertical; }.storage-node { width:160px; }.soc-track { height:5px; margin-top:10px; overflow:hidden; background:#dde5e1; border-radius:4px; }.soc-track b { display:block; height:100%; background:var(--green); border-radius:4px; transition:width .15s; }
.scrubber { display:flex; align-items:center; gap:20px; margin-top:18px; }.scrubber label { min-width:110px; color:var(--muted); font-size:12px; }.scrubber label strong { color:var(--ink); }.scrubber input { width:100%; accent-color:var(--green); }
.telemetry-grid { display:grid; grid-template-columns:1fr; gap:0; }.chart { width:100%; margin-top:10px; overflow:visible; }.chart line { stroke:#d5dcd8; stroke-width:1; }.chart text { fill:var(--muted); font-size:11px; }.chart-line { fill:none; stroke-width:2.5; vector-effect:non-scaling-stroke; }.line-0 { stroke:#172321; }.line-1 { stroke:#2a9d72; }.line-2 { stroke:#367dba; }.line-3 { stroke:#e66f3b; }.soc-0 { stroke:#8055ad; }.soc-1 { stroke:#14a085; }.legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; color:var(--muted); font-size:11px; }.legend span::before { content:""; display:inline-block; width:15px; height:3px; margin:0 6px 3px 0; background:currentColor; }.legend-0 { color:#172321; }.legend-1 { color:#2a9d72; }.legend-2 { color:#367dba; }.legend-3 { color:#e66f3b; }.soc-legend-0 { color:#8055ad; }.soc-legend-1 { color:#14a085; }
.diagnostics-section { margin-top:34px; padding-top:30px; border-top:1px solid var(--line); }.diagnostic-heading,.stress-header { display:flex; justify-content:space-between; align-items:start; gap:20px; }.diagnostic-heading h3 { margin:0; font:600 28px Georgia,serif; }.diagnostic-heading > span,.stress-header > span { padding:6px 10px; color:#9b3c1c; background:#fff0e8; border-radius:7px; font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }.checks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:22px 0; }.check { display:grid; grid-template-columns:1fr auto; gap:4px 12px; padding:16px 18px; border:1px solid var(--line); border-left-width:4px; border-radius:10px; background:#fff; }.check.pass { border-left-color:#2a9d72; }.check.attention { border-left-color:var(--orange); }.check span { color:var(--muted); text-transform:capitalize; }.check strong { font-size:11px; letter-spacing:.06em; }.check.pass strong { color:var(--green); }.check.attention strong { color:#b34e24; }.check small { grid-column:1/-1; color:#87918e; font:10px ui-monospace,monospace; }
.modes-card,.observations-card,.boundary-card { padding:22px; border:1px solid var(--line); border-radius:14px; background:#fafaf6; }.mode-track { display:flex; height:42px; margin-top:22px; overflow:hidden; border-radius:8px; background:#e3e8e5; }.mode-segment { display:grid; min-width:2px; place-items:center; overflow:hidden; color:#fff; font-size:10px; text-transform:uppercase; }.mode-segment b { padding:0 6px; overflow:hidden; text-overflow:ellipsis; }.mode-preparation { background:#b58635; }.mode-normal { background:var(--green); }.mode-degraded { background:#c5532e; }.mode-legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; color:var(--muted); font-size:11px; }.diagnostic-columns { display:grid; grid-template-columns:1.2fr .8fr; gap:14px; margin-top:14px; }.observations-card ul,.boundary-card ul { margin:16px 0 0; padding:0; list-style:none; }.observation { display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-top:1px solid var(--line); }.observation:first-child { border-top:0; }.observation strong { color:#a84824; font-size:11px; letter-spacing:.05em; }.observation p { margin:3px 0 0; color:var(--muted); font-size:12px; }.observation > span { white-space:nowrap; font:700 12px ui-monospace,monospace; }.observation.clear strong { color:var(--green); }.boundary-card { background:#172321; color:#eef5f1; }.boundary-card h4 { margin:0; font:600 21px Georgia,serif; }.boundary-card li { margin:10px 0; color:#bdc9c5; font-size:12px; }.boundary-card li::before { content:"—"; margin-right:8px; color:#e89168; }
.stress-header { margin:28px 0 14px; }.stress-header h4 { margin:0; font:600 22px Georgia,serif; }.stress-header > span { color:var(--green); background:#e5eee9; }.stress-groups { display:grid; gap:12px; }.stress-group { display:grid; grid-template-columns:150px 1fr; gap:18px; padding:18px; border:1px solid var(--line); border-radius:12px; background:#fff; }.stress-title span,.stress-title strong { display:block; }.stress-title span { color:var(--muted); font-size:10px; text-transform:uppercase; }.stress-title strong { margin-top:5px; text-transform:capitalize; }.stress-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:10px; }.stress-metric { min-width:0; padding-left:12px; border-left:2px solid #dce5e0; }.stress-metric span,.stress-metric strong { display:block; }.stress-metric span { overflow-wrap:anywhere; color:var(--muted); font-size:10px; text-transform:capitalize; }.stress-metric strong { margin-top:3px; font:700 13px ui-monospace,monospace; }
.factor-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin:22px 0; }.factor-list article { min-width:0; padding:15px; border:1px solid var(--line); border-radius:10px; background:#f7f8f4; }.factor-list span,.factor-list strong { display:block; }.factor-list span { color:var(--green); font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.factor-list strong { margin-top:4px; overflow-wrap:anywhere; }.factor-list p { margin:8px 0 0; color:var(--muted); font-size:11px; overflow-wrap:anywhere; }.campaign-spec { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px; }.campaign-spec article { padding:18px; border:1px solid var(--line); border-radius:12px; }.campaign-spec h4 { margin:0; font:600 20px Georgia,serif; }.campaign-spec ul { margin:12px 0 0; padding:0; list-style:none; }.campaign-spec li { display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-top:1px solid #edf0eb; font-size:10px; }.campaign-spec li:first-child { border:0; }.campaign-spec code { overflow-wrap:anywhere; }.campaign-spec li strong { white-space:nowrap; color:var(--green); }.campaign-wait { margin-top:28px; padding:20px; background:#eff4f0; border-radius:10px; }
.campaign-result { margin-top:34px; padding-top:30px; border-top:1px solid var(--line); }.campaign-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:22px 0; }.campaign-summary div { padding:16px; background:var(--ink); color:#fff; border-radius:10px; }.campaign-summary span,.campaign-summary strong { display:block; }.campaign-summary span { color:#aebbb6; font-size:10px; text-transform:uppercase; }.campaign-summary strong { margin-top:4px; font-size:24px; }.group-fronts { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:8px; margin-bottom:24px; }.group-fronts article { padding:12px 14px; border-left:3px solid var(--green); background:#edf4f0; border-radius:4px 8px 8px 4px; }.group-fronts strong,.group-fronts span { display:block; }.group-fronts strong { overflow-wrap:anywhere; font-size:11px; }.group-fronts span { margin-top:3px; color:var(--muted); font-size:10px; }.table-controls { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-top:24px; }.table-controls h4 { margin:0; font:600 22px Georgia,serif; }.table-controls label { color:var(--muted); font-size:11px; }.table-controls select { margin-left:8px; padding:8px 28px 8px 10px; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--ink); }.decision-table-wrap { margin-top:12px; overflow:auto; border:1px solid var(--line); border-radius:10px; }.decision-table { width:100%; border-collapse:collapse; white-space:nowrap; font-size:10px; }.decision-table th { position:sticky; top:0; padding:11px; background:#eef1ec; text-align:left; text-transform:capitalize; }.decision-table td { max-width:220px; padding:10px 11px; overflow:hidden; border-top:1px solid #e8ece8; text-overflow:ellipsis; }.decision-table tr:hover td { background:#f4f8f5; }.decision-table .pareto-row td { background:#f0f8f3; }.decision-status { padding:4px 7px; border-radius:5px; font-size:8px; font-weight:800; letter-spacing:.05em; }.decision-status.pareto { color:#fff; background:var(--green); }.decision-status.feasible { color:#326b58; background:#dcece4; }.decision-status.infeasible { color:#a24120; background:#f9ded1; }.table-count { color:var(--muted); font-size:10px; text-align:right; }.campaign-boundary { margin-top:18px; }.campaign-boundary p:last-child { color:#bdc9c5; font-size:12px; }
.job-card { margin-top:28px; padding:22px; border:1px solid var(--line); border-radius:14px; background:#f7f9f5; }.cancel-job { padding:8px 12px; border:1px solid #dc8d6c; border-radius:7px; color:#a3411f; background:#fff5ef; font-weight:700; cursor:pointer; }.cancel-job:disabled { opacity:.5; }.job-progress { height:10px; margin-top:20px; overflow:hidden; background:#dfe6e2; border-radius:8px; }.job-progress b { display:block; width:0; height:100%; background:var(--green); transition:width .2s; }.job-meta { display:flex; justify-content:space-between; gap:16px; margin-top:9px; color:var(--muted); font-size:11px; }.job-card > p { margin:12px 0 0; color:var(--muted); }
@keyframes energy-flow { to { background-position:42px 0; } }
@keyframes energy-flow-vertical { to { background-position:0 42px; } }
footer { max-width: 1320px; margin: auto; padding: 22px 24px; display: flex; justify-content: space-between; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
@media (max-width: 850px) { .workspace { grid-template-columns: 1fr; }.catalog-panel { border-right: 0; border-bottom: 1px solid var(--line); }.metrics { grid-template-columns: 1fr 1fr; }.detail-header { flex-direction: column; }.config-grid,.results-grid,.diagnostic-columns,.campaign-spec { grid-template-columns: 1fr; }.plant { grid-template-columns:110px minmax(25px,1fr) 110px minmax(25px,1fr) 110px; }.plant-node { padding:12px 8px; }.storage-bank { gap:10px; }.storage-branch,.storage-node { width:120px; }.stress-group { grid-template-columns:1fr; }.campaign-summary { grid-template-columns:1fr 1fr; } }
.tag.completed { color: #fff; background: var(--green); }
.tag.cancelled { color: #83472b; background: #fae4d7; }
.tag.failed { color: #9c2727; background: #fbe3e3; }
.tag.interrupted { color: #705417; background: #fdf3d8; }
.tag.queued { color: #355e7a; background: #e3f0f7; }
.tag.running { color: #176b55; background: #bde6d4; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.filter-bar label { color: var(--muted); font-size: 11px; display: flex; flex-direction: column; gap: 4px; }
.filter-bar select { padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); font-size: 12px; }
.job-item-card { border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 12px; background: #fff; }
.job-item-header { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.job-item-header strong { font-size: 14px; word-break: break-all; }
.reopen-button { margin-top: 12px; padding: 8px 14px; border: 0; border-radius: 6px; background: var(--green); color: #fff; font-weight: 700; font-size: 12px; cursor: pointer; }
.reopen-button:hover { background: #0d5643; }

.builder-workspace { padding: 36px; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
.builder-header { display: flex; justify-content: space-between; align-items: start; gap: 20px; border-bottom: 1px solid var(--line); padding-bottom: 24px; margin-bottom: 28px; }
.builder-header h2 { margin: 4px 0 8px; font: 600 32px Georgia, serif; }
.builder-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-bottom: 28px; }
.builder-card { padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: #fafaf6; }
.builder-card h3 { margin: 0 0 16px; font: 600 20px Georgia, serif; color: var(--ink); display: flex; justify-content: space-between; align-items: center; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-group label { font-size: 12px; font-weight: 700; color: var(--ink); display: flex; justify-content: space-between; }
.form-group label span.unit { color: var(--green); font-weight: 800; font-family: ui-monospace, monospace; }
.form-group input, .form-group select { padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-size: 14px; }
.form-group input:focus, .form-group select:focus { border-color: var(--green); outline: 0; box-shadow: 0 0 0 3px #d9eee5; }
.evidence-badge { display: inline-block; padding: 3px 8px; border-radius: 5px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
.evidence-badge.documented { color: #fff; background: var(--green); }
.evidence-badge.assumed { color: #83472b; background: #fae4d7; }
.evidence-badge.synthetic { color: #355e7a; background: #e3f0f7; }
.evidence-badge.pending_validation { color: #9c2727; background: #fbe3e3; }
.evidence-summary-card { padding: 20px; border-left: 4px solid var(--green); background: #f0f7f3; border-radius: 12px; margin-bottom: 24px; }
.evidence-summary-card h4 { margin: 0 0 8px; font: 600 18px Georgia, serif; }
.evidence-breakdown { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.evidence-breakdown-item { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; background: #fff; border: 1px solid var(--line); font-size: 12px; }
.builder-actions { display: flex; justify-content: flex-end; gap: 16px; margin-top: 28px; border-top: 1px solid var(--line); padding-top: 24px; }
.tech-property { margin: 14px 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }.tech-property legend { padding: 0 6px; color: var(--green); font-weight: 700; }.tech-property .form-group { margin-bottom: 9px; }
.btn-primary { border: 0; border-radius: 10px; padding: 14px 28px; color: #fff; background: var(--green); font-size: 15px; font-weight: 800; cursor: pointer; transition: background 0.18s; }
.btn-primary:hover { background: #0d5643; }
.btn-primary:disabled { opacity: 0.55; cursor: wait; }
.btn-secondary { border: 1px solid var(--line); border-radius: 10px; padding: 14px 24px; color: var(--ink); background: #fff; font-size: 14px; font-weight: 700; cursor: pointer; transition: background 0.18s; }
.btn-secondary:hover { background: #f4f6f2; }

.download-panel { margin-top: 32px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: #fafaf6; }
.download-panel h4 { margin: 0 0 4px; font: 600 22px Georgia, serif; }
.download-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 18px; }
.download-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 18px; border: 1px solid var(--green); border-radius: 10px; background: #fff; color: var(--green); font-weight: 750; font-size: 13px; text-decoration: none; transition: all 0.18s ease; }
.download-btn:hover { background: var(--green); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(23, 107, 85, 0.18); }
.delta-pos { color: #176b55; font-weight: 700; }
.delta-neg { color: #b34e24; font-weight: 700; }
.delta-zero { color: #667572; }

.notice-body { margin-top: 8px; }
.warning-card { margin-bottom: 24px; }
.warning-text { margin-top: 4px; }
.reopen-wrap { margin-top: 20px; }
.results-flat { border-top: 0 !important; margin-top: 0 !important; }
.builder-actions-spaced { margin-top: 32px; }
.notice-spaced { margin-top: 14px; }
.error-spaced { margin-bottom: 14px; }

/* Selection Grid & Experiment Cards for Compare View */
.selection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; gap: 12px !important; margin-bottom: 1.25rem !important; }
.select-exp-card { display: flex !important; align-items: flex-start !important; gap: 10px !important; padding: 12px 14px !important; border: 1px solid var(--line) !important; border-radius: 10px !important; background: #fff !important; cursor: pointer !important; min-width: 0 !important; overflow: hidden !important; transition: all 0.18s ease !important; }
.select-exp-card:hover { border-color: var(--green) !important; background: #f9fbf9 !important; }
.select-exp-card input[type="checkbox"] { margin-top: 2px !important; flex-shrink: 0 !important; width: 16px !important; height: 16px !important; accent-color: var(--green) !important; }
.select-exp-card > div { min-width: 0 !important; flex: 1 !important; overflow: hidden !important; }
.select-exp-card strong { display: block !important; font-size: 13px !important; font-weight: 700 !important; color: var(--ink) !important; overflow-wrap: anywhere !important; word-break: break-word !important; margin-bottom: 3px !important; }
.select-exp-card small { display: block !important; color: var(--muted) !important; font-size: 11px !important; overflow-wrap: anywhere !important; word-break: break-word !important; }

/* Generic Search Bar & Server Pagination Component */
.search-bar-container { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; width: 100%; }
.search-input-wrap { position: relative; display: flex; align-items: center; width: 100%; }
.search-icon { position: absolute; left: 12px; font-size: 13px; color: var(--muted); pointer-events: none; }
.search-input { width: 100%; padding: 9px 34px 9px 34px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); font-size: 13px; transition: border-color 0.18s, box-shadow 0.18s; }
.search-input::-webkit-search-cancel-button, .search-input::-webkit-search-decoration, .search-input::-webkit-search-results-button { display: none !important; -webkit-appearance: none !important; }
.search-input:focus { border-color: var(--green); outline: 0; box-shadow: 0 0 0 3px #d9eee5; }
.search-clear-btn { position: absolute; right: 10px; border: 0; background: transparent; color: var(--muted); font-size: 16px; font-weight: 700; cursor: pointer; padding: 0 4px; line-height: 1; }
.search-clear-btn:hover { color: var(--ink); }
.search-pagination-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.search-count-badge { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.pagination-controls { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; }
.page-size-wrap { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 11px; }
.page-size-select { padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); font-size: 11px; font-weight: 700; cursor: pointer; }
.page-btn { padding: 5px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); font-weight: 700; font-size: 11px; cursor: pointer; transition: all 0.18s ease; }
.page-btn:hover:not(:disabled) { border-color: var(--green); background: #f0f7f3; color: var(--green); }
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.page-info { font-weight: 700; color: var(--ink); font-size: 11px; white-space: nowrap; }

/* User Manual View Styles */
.manual-workspace { display: grid; grid-template-columns: 340px minmax(0, 1fr); min-height: 700px; }
.manual-sidebar { padding: 24px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; background: #fafaf6; }
.manual-search-box input { width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; background: #fff; }
.manual-toc { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; max-height: calc(100vh - 300px); }
.toc-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 600; transition: all 0.18s ease; }
.toc-link:hover { background: #eef4f0; color: var(--ink); }
.toc-link.active { background: var(--green); color: #fff; }
.toc-num { font-family: ui-monospace, monospace; font-size: 11px; opacity: 0.8; }
.toc-title { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.manual-content-panel { padding: 36px 42px; display: flex; flex-direction: column; gap: 48px; max-height: calc(100vh - 220px); overflow-y: auto; scroll-behavior: smooth; }
.manual-section { scroll-margin-top: 20px; border-bottom: 1px solid var(--line); padding-bottom: 40px; }
.manual-section:last-child { border-bottom: 0; }
.manual-section-header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.manual-section-header h2 { margin: 0; font: 600 28px Georgia, serif; color: var(--ink); }
.manual-lead { font-size: 16px; line-height: 1.6; color: #2d3b38; margin-bottom: 20px; }

.manual-callout { padding: 18px 20px; border-left: 4px solid var(--green); background: #f0f7f3; border-radius: 6px 12px 12px 6px; margin: 20px 0; }
.manual-callout.callout-info { border-left-color: #367dba; background: #f0f6fb; }
.manual-callout.callout-warning { border-left-color: var(--orange); background: #fff3eb; }
.manual-callout.callout-danger { border-left-color: #9c2727; background: #fbe3e3; }
.manual-callout.callout-success { border-left-color: var(--green); background: #f0f7f3; }
.manual-callout strong { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.manual-callout p { margin: 0; font-size: 13px; color: #435450; }

.manual-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 20px 0; }
.manual-card { padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.manual-card h4 { margin: 0 0 8px; font-size: 14px; color: var(--ink); }
.manual-card p { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.4; }

.manual-steps { display: flex; flex-direction: column; gap: 16px; margin: 20px 0; }
.manual-step { display: flex; gap: 16px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.step-num { display: grid; place-items: center; width: 28px; height: 28px; background: var(--green); color: #fff; font-weight: 800; border-radius: 50%; font-size: 13px; flex-shrink: 0; }
.manual-step strong { display: block; font-size: 14px; color: var(--ink); margin-bottom: 4px; }
.manual-step p { margin: 0; font-size: 13px; color: var(--muted); }

.manual-numbered-list { margin: 16px 0; padding-left: 20px; line-height: 1.7; color: var(--ink); font-size: 14px; }
.manual-numbered-list li { margin-bottom: 8px; }

.manual-state-machine { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0; font-size: 12px; font-weight: 700; }
.state-pill { padding: 6px 12px; border-radius: 20px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.state-queued { background: #e3f0f7; color: #355e7a; }
.state-running { background: #bde6d4; color: #176b55; }
.state-completed { background: var(--green); color: #fff; }
.state-cancelled { background: #fae4d7; color: #83472b; }

.faq-accordion { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.faq-item { border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; }
.faq-item summary { padding: 14px 18px; font-weight: 700; font-size: 14px; color: var(--ink); cursor: pointer; background: #fafaf6; }
.faq-item summary:hover { background: #f0f7f3; }
.faq-body { padding: 16px 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); line-height: 1.5; }
.faq-body code { background: #eef2ef; padding: 2px 6px; border-radius: 4px; font-size: 12px; }

.manual-action-bar { margin-top: 24px; padding-top: 16px; border-top: 1px dashed var(--line); }
.nav-shortcut { font-size: 13px; padding: 10px 18px; border-radius: 8px; }
.changelog-entry { padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(29, 55, 48, 0.06); }
.changelog-entry-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.changelog-entry-header h3 { margin: 4px 0 0; font: 600 28px Georgia, serif; }
.changelog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.changelog-grid section { min-width: 0; padding: 16px; border-radius: 10px; background: #f8faf7; }
.changelog-grid h4 { margin: 0 0 10px; color: var(--ink); }
.changelog-grid ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.changelog-grid li + li { margin-top: 6px; }

/* HIL workspace */
.hil-dashboard-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 18px; margin-bottom: 18px; }
.hil-passive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.hil-card { min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.hil-card h3 { margin-top: 0; font: 600 22px Georgia, serif; }
.hil-card-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hil-card-header h3 { margin: 0; }
.hil-state-badge { padding: 6px 10px; color: #fff; font-size: 12px; }
.preflight-config-panel, .hil-session-panel { margin-top: 18px; padding: 16px; border-radius: 10px; background: #f5f7f4; }
.preflight-config-panel h4, .hil-session-panel h4 { margin: 0 0 12px; }
.hil-form-row, .hil-actions { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.hil-form-row label, .hil-replay-form label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 700; }
.hil-form-row input { width: 160px; }
.hil-form-row input[type="number"] { width: 110px; }
.action-feedback { margin-top: 12px; }
.hil-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.hil-metrics div { min-width: 0; padding: 12px; border-radius: 9px; background: #f5f7f4; }
.hil-metrics dt { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.hil-metrics dd { margin: 5px 0 0; overflow-wrap: anywhere; font: 700 13px ui-monospace, monospace; }
.hil-metrics .hil-heartbeat { grid-column: 1 / -1; }
.hil-truth-note { font-size: 11px; }
.hil-replay-form { display: grid; gap: 12px; }
.input-with-unit { display: flex; align-items: center; gap: 8px; }
.input-with-unit input { min-width: 0; flex: 1; }
.physical-can-card { margin-bottom: 18px; border-color: #d9aaa0; background: #fff9f7; }

/* Study builder */
.advanced-panel { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: #fafbf8; }
.advanced-panel summary { color: var(--green); font-weight: 800; cursor: pointer; }
.advanced-panel[open] summary { margin-bottom: 14px; }
.saved-drafts-panel { margin-top: 28px; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: #f8faf7; }
.saved-drafts-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.saved-drafts-heading h3 { margin: 0; font: 600 24px Georgia, serif; }
.saved-drafts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.saved-draft-card { display: flex; min-width: 0; flex-direction: column; justify-content: space-between; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.saved-draft-card h4 { margin: 8px 0 5px; overflow-wrap: anywhere; }
.saved-draft-card p { margin: 0 0 8px; color: var(--muted); font-size: 12px; }
.saved-draft-card small { overflow-wrap: anywhere; }
.saved-draft-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profile-picker-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; margin-bottom: 14px; }
.profile-picker-toolbar label { grid-column: 1 / -1; color: var(--muted); font-size: 12px; font-weight: 750; }
.profile-picker-toolbar input { min-width: 0; width: 100%; }
.profile-picker-toolbar span { align-self: center; color: var(--muted); font-size: 11px; white-space: nowrap; }
.compare-actions { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.compare-actions label { display: grid; min-width: min(100%, 320px); gap: 5px; color: var(--muted); font-size: 12px; font-weight: 700; }
.comparison-techno-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.metric-unit { display: block; margin-top: 3px; }
.profile-quality-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 8px; margin: 14px 0; }
.profile-quality-grid div { padding: 10px; border-radius: 8px; background: #fff; border: 1px solid var(--line); }
.profile-quality-grid span, .profile-quality-grid strong { display: block; }
.profile-quality-grid span { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.profile-quality-grid strong { margin-top: 4px; font-size: 13px; }
.profile-artifact-actions, .mission-artifact-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.profile-artifact-actions a { color: var(--green); font-size: 11px; font-weight: 750; }
.scientific-report-builder { display: grid; gap: 16px; padding: 20px; margin-bottom: 24px; }
.scientific-report-builder h3 { margin: 4px 0 8px; }
.scientific-report-form { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; }
.scientific-report-form label { display: grid; flex: 1 1 240px; gap: 5px; min-width: 0; color: var(--muted); font-size: 12px; font-weight: 700; }
.scientific-report-form select { width: 100%; }
.scientific-summary-row { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 16px; }
.scientific-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.scientific-report-list { display: grid; gap: 10px; margin-top: 16px; }
.scientific-report-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.scientific-report-item small { display: block; color: var(--muted); overflow-wrap: anywhere; }
.scientific-report-table { max-width: 100%; margin-top: 16px; padding: 20px; overflow-x: auto; }

/* Accessibility & High Contrast Focus Rules (WCAG 2.2 AA) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

*:focus-visible {
  outline: 3px solid #176b55 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(23, 107, 85, 0.25) !important;
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Responsive Layout Adjustments */
@media (max-width: 768px) {
  .topbar { padding: 0 12px; }
  .app-layout { flex-direction: column; }
  .app-sidebar { width: 100%; flex-direction: row; overflow-x: auto; padding: 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .app-sidebar .nav-tab { font-size: 11px; padding: 6px 10px; }
  .workspace { grid-template-columns: 1fr; }
  .catalog-panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .main-viewport { padding: 12px; }
  .library-grid, .campaigns-grid, .hil-dashboard-grid, .hil-passive-grid, .details-split-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .wizard-stepper { overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 8px; }
  .wizard-stepper::after { content: "Desliza para ver todos los pasos →"; flex: 0 0 auto; align-self: center; color: var(--muted); font-size: 11px; }
  .step-pill { flex: 0 0 auto; scroll-snap-align: start; }
  .profile-picker-toolbar { grid-template-columns: minmax(0, 1fr); }
  .profile-picker-toolbar label { grid-column: auto; }
  .profile-picker-toolbar span { white-space: normal; }
  .changelog-entry { padding: 16px; }
  .changelog-entry-header { align-items: flex-start; flex-direction: column; }
  .changelog-grid { grid-template-columns: minmax(0, 1fr); }
  .scientific-workspace, .scientific-content, .scientific-content > *, .candidates-grid { min-width: 0; max-width: 100%; }
  .candidates-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .scientific-content [style*="grid-template-columns: 1fr 1fr"], .scientific-content [style*="minmax(320px"] { grid-template-columns: minmax(0, 1fr) !important; }
  .scientific-two-column { grid-template-columns: minmax(0, 1fr); }
  .scientific-report-item { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .scientific-report-form .btn { width: 100%; }
  .results-quick-switcher { width: 100%; flex-wrap: wrap; }
}

.result-select-card {
  width: 100%; padding: 16px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--ink); text-align: left; cursor: pointer;
}
.result-select-card:hover { border-color: var(--green); background: #f5faf7; }
.result-select-card h4 { margin: 8px 0; }
.result-select-card .meta { margin: 0; color: var(--muted); }
.kpi-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin: 20px 0; }
.kpi-card { padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.kpi-card p { margin: 6px 0 0; font-size: 24px; font-weight: 750; }
.results-meta-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.evidence-boundary-card { margin-top: 20px; padding: 16px; border-left: 4px solid var(--green); border-radius: 8px; background: #f5f8f6; }
.modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; }
.preserve-lines { white-space: pre-wrap; }