/* ============================================================
   Anatomie Borne - Page Styles
   ============================================================ */

.anat-page { max-width: 1200px; }

/* Tabs — reuses diag-tab pattern */
.anat-tabs {
  display: flex; border-bottom: 2px solid #e0e0e0; background: #fff;
  border-radius: 4px 4px 0 0; overflow-x: auto; margin-bottom: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.anat-tab {
  display: flex; align-items: center; gap: 6px; padding: 12px 20px;
  font-size: 12px; font-weight: 500; text-transform: uppercase;
  color: rgba(0,0,0,.54); cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -2px; white-space: nowrap; transition: all .2s;
  background: none; border-top: none; border-left: none; border-right: none;
  font-family: 'Roboto', sans-serif; letter-spacing: .3px;
}
.anat-tab:hover { color: rgba(0,0,0,.87); background: rgba(0,0,0,.04); }
.anat-tab.active { color: #4CAF50; border-bottom-color: #4CAF50; }
.anat-tab .mdi { font-size: 18px; }

.anat-tab-content {
  background: #fff; border-radius: 0 0 4px 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  padding: 16px; min-height: 400px;
}

/* ======== TAB 1: SYNOPTIQUE AC ======== */
.anat-svg-wrap {
  background: #0f172a; border-radius: 6px; padding: 8px;
  overflow-x: auto; position: relative;
}
.anat-svg-wrap svg { width: 100%; min-width: 700px; display: block; }

/* Component boxes */
.comp-box { cursor: pointer; transition: opacity .2s; }
.comp-box rect { transition: filter .2s, opacity .2s; }
.comp-box:hover rect { filter: drop-shadow(0 0 8px rgba(255,255,255,.4)); }
.comp-box text { pointer-events: none; user-select: none; }

/* State classes */
.state-active rect { opacity: 1; }
.state-inactive rect { opacity: 0.3; }
.state-inactive text { opacity: 0.3; }

/* Hover highlighting */
.hl-mode .comp-box { opacity: 0.25; }
.hl-mode .comp-box.hl-src { opacity: 1; }
.hl-mode .comp-box.hl-peer { opacity: 0.85; }
.hl-src rect { filter: drop-shadow(0 0 12px rgba(255,255,255,.6)) !important; }
.hl-peer rect { filter: drop-shadow(0 0 6px rgba(255,255,255,.3)) !important; }

/* Signal lines */
.svg-line { transition: stroke-opacity .2s, stroke-width .2s; }
.line-active { stroke-opacity: 0.8; }
.line-dim { stroke-opacity: 0.15; }
.hl-on { stroke-opacity: 1 !important; stroke-width: 4 !important; }
.line-label { font-size: 9px; pointer-events: none; }

/* Badges */
.comp-badge .badge-bg { rx: 7; ry: 7; }
.comp-badge .badge-txt { fill: #fff; font-size: 8px; font-weight: 700; text-anchor: middle; }

/* State bar */
.anat-state-bar {
  display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap;
}
.anat-state-bar button {
  padding: 6px 14px; border: 1px solid #e0e0e0; border-radius: 4px;
  background: #fff; cursor: pointer; font-size: 12px; font-family: 'Roboto', sans-serif;
  transition: all .15s;
}
.anat-state-bar button:hover { border-color: #4CAF50; background: #E8F5E9; }
.anat-state-bar button.active { background: #4CAF50; color: #fff; border-color: #4CAF50; }
.anat-state-bar button.fault-active { background: #f44336; color: #fff; border-color: #f44336; }

/* Legend */
.anat-legend {
  display: flex; gap: 16px; flex-wrap: wrap; font-size: 11px;
  color: rgba(0,0,0,.54); margin-top: 10px; padding: 8px 12px;
  background: #f5f5f5; border-radius: 4px;
}
.anat-legend span { display: flex; align-items: center; gap: 4px; }
.anat-legend-line {
  display: inline-block; width: 24px; height: 3px; vertical-align: middle; border-radius: 2px;
}
.anat-legend-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%; vertical-align: middle;
}

/* ======== COMPONENT POPUP ======== */
.anat-popup-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px); z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  animation: anatFadeIn .2s ease;
}
@keyframes anatFadeIn { from { opacity: 0; } to { opacity: 1; } }

.anat-popup {
  background: #fff; border-radius: 6px; max-width: 600px; width: 90%;
  max-height: 80vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,.3);
}
.anat-popup__header {
  padding: 14px 16px; color: #fff; border-radius: 6px 6px 0 0;
  display: flex; align-items: center; justify-content: space-between;
}
.anat-popup__header-title { font-size: 16px; font-weight: 500; }
.anat-popup__header-specs { font-size: 11px; opacity: .8; margin-top: 2px; }
.anat-popup__close {
  background: none; border: none; color: #fff; cursor: pointer;
  font-size: 22px; padding: 4px; border-radius: 50%;
}
.anat-popup__close:hover { background: rgba(255,255,255,.15); }
.anat-popup__body { padding: 16px; font-size: 13px; line-height: 1.6; color: rgba(0,0,0,.87); }
.anat-popup__body h4 { font-size: 13px; font-weight: 500; margin: 12px 0 6px; color: rgba(0,0,0,.87); }
.anat-popup__body table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 12px; }
.anat-popup__body th { text-align: left; padding: 6px 8px; background: #f5f5f5; font-weight: 500; border-bottom: 1px solid #e0e0e0; }
.anat-popup__body td { padding: 6px 8px; border-bottom: 1px solid #f0f0f0; }
.anat-popup__codes { margin-top: 10px; }
.anat-popup__codes-title { font-size: 11px; font-weight: 500; text-transform: uppercase; color: rgba(0,0,0,.54); margin-bottom: 6px; }
.anat-code-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 12px; font-size: 11px; margin: 2px 4px 2px 0;
}
.anat-code-chip--ocpp { background: #FFEBEE; color: #C62828; }
.anat-code-chip--vendor { background: #f5f5f5; color: rgba(0,0,0,.6); }

/* ======== TAB 2: PROCESSUS DE CHARGE ======== */
.anat-process-layout { display: flex; gap: 16px; min-height: 450px; }

.anat-process-sidebar {
  width: 280px; min-width: 280px;
  border-right: 1px solid #e0e0e0; padding-right: 16px;
  max-height: 600px; overflow-y: auto;
}
.anat-process-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 10px; margin-bottom: 4px;
  border: 1px solid #e0e0e0; border-radius: 4px;
  background: #fff; cursor: pointer; text-align: left;
  font-family: 'Roboto', sans-serif; font-size: 12px;
  transition: all .15s; color: rgba(0,0,0,.87);
}
.anat-process-btn:hover { border-color: #4CAF50; background: rgba(76,175,80,.04); }
.anat-process-btn.active { border-color: #4CAF50; background: #E8F5E9; border-left: 4px solid #4CAF50; font-weight: 500; }
.anat-process-btn__num {
  width: 24px; height: 24px; border-radius: 50%; background: #e0e0e0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0; color: rgba(0,0,0,.6);
}
.anat-process-btn.active .anat-process-btn__num { background: #4CAF50; color: #fff; }

.anat-process-main { flex: 1; min-width: 0; }

.anat-process-placeholder {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; height: 300px; color: rgba(0,0,0,.38); text-align: center;
}
.anat-process-placeholder .mdi { font-size: 64px; margin-bottom: 12px; opacity: .4; }

/* Step detail */
.anat-step-detail { animation: anatSlideIn .3s ease; }
@keyframes anatSlideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.anat-step-detail__header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: #f5f5f5; border-radius: 4px;
  margin-bottom: 12px; font-size: 15px; font-weight: 500;
}
.anat-step-detail__desc { font-size: 13px; color: rgba(0,0,0,.6); margin-bottom: 12px; line-height: 1.5; }
.anat-step-detail__content {
  font-size: 13px; line-height: 1.6; color: rgba(0,0,0,.87);
  border: 1px solid #e0e0e0; border-radius: 4px; padding: 14px; margin-bottom: 12px;
}
.anat-step-detail__content h4 { font-size: 13px; font-weight: 500; margin: 10px 0 6px; }
.anat-step-detail__content table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 12px; }
.anat-step-detail__content th { text-align: left; padding: 6px 8px; background: #f5f5f5; font-weight: 500; border-bottom: 1px solid #e0e0e0; }
.anat-step-detail__content td { padding: 6px 8px; border-bottom: 1px solid #f0f0f0; }
.anat-step-detail__content .norm-ref {
  font-size: 12px; color: #1565C0; padding: 8px 12px;
  background: #E3F2FD; border-radius: 4px; margin: 8px 0; border-left: 3px solid #1976D2;
}
.anat-step-detail__content .diagram-box {
  background: #1e293b; color: #94a3b8; padding: 12px 16px; border-radius: 4px;
  font-family: 'Roboto Mono', monospace; font-size: 11px; white-space: pre; margin: 8px 0;
  overflow-x: auto;
}
.anat-step-detail__content .detail-table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 12px; }
.anat-step-detail__content .detail-table th { text-align: left; padding: 6px 8px; background: #f5f5f5; font-weight: 500; border-bottom: 1px solid #e0e0e0; }
.anat-step-detail__content .detail-table td { padding: 6px 8px; border-bottom: 1px solid #f0f0f0; }

/* Quiz */
.anat-quiz {
  background: #FFF8E1; border: 1px solid #FFE082; border-radius: 4px;
  padding: 12px 14px; margin-bottom: 12px;
}
.anat-quiz__question { font-size: 13px; font-weight: 500; margin-bottom: 8px; color: rgba(0,0,0,.87); }
.anat-quiz__options { display: flex; flex-direction: column; gap: 6px; }
.anat-quiz__opt {
  padding: 8px 12px; border: 1px solid #e0e0e0; border-radius: 4px;
  background: #fff; cursor: pointer; font-size: 12px; font-family: 'Roboto', sans-serif;
  transition: all .15s; text-align: left; width: 100%;
}
.anat-quiz__opt:hover { border-color: #4CAF50; background: #E8F5E9; }
.anat-quiz__opt--correct { background: #E8F5E9 !important; border-color: #4CAF50 !important; color: #2E7D32; font-weight: 500; }
.anat-quiz__opt--wrong { background: #FFEBEE !important; border-color: #f44336 !important; color: #C62828; }
.anat-quiz__opt--locked { pointer-events: none; opacity: .7; }
.anat-quiz__expl {
  margin-top: 8px; padding: 8px 12px; background: #E8F5E9; border-radius: 4px;
  font-size: 12px; color: #2E7D32; border-left: 3px solid #4CAF50;
}

/* Log terminal */
.anat-log-terminal {
  background: #1e293b; border-radius: 4px; padding: 10px 12px;
  font-family: 'Roboto Mono', monospace; font-size: 11px;
  max-height: 180px; overflow-y: auto; color: #94a3b8;
}
.anat-log-filters {
  display: flex; gap: 4px; margin-bottom: 8px;
}
.anat-log-filter {
  padding: 3px 10px; border-radius: 12px; border: 1px solid #e0e0e0;
  background: #fff; cursor: pointer; font-size: 11px; font-family: 'Roboto', sans-serif;
  transition: all .15s;
}
.anat-log-filter:hover { border-color: #4CAF50; }
.anat-log-filter.active { background: #4CAF50; color: #fff; border-color: #4CAF50; }
.anat-log-entry { padding: 2px 0; display: flex; gap: 8px; }
.anat-log-tag {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  font-size: 9px; font-weight: 700; text-transform: uppercase; min-width: 36px; text-align: center;
}
.anat-log-tag--hw { background: #3b82f6; color: #fff; }
.anat-log-tag--com { background: #22c55e; color: #fff; }
.anat-log-tag--ocpp { background: #f59e0b; color: #fff; }
.anat-log-tag--fault { background: #ef4444; color: #fff; }
.anat-log-time { color: #64748b; min-width: 55px; }

/* ======== TAB 3: COURBE CC-CV ======== */
.anat-cccv-controls {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; background: #f5f5f5; border-radius: 4px; margin-bottom: 12px;
}
.anat-cccv-controls label { font-size: 12px; font-weight: 500; color: rgba(0,0,0,.6); }
.anat-cccv-controls input[type="range"] { width: 140px; }
.anat-cccv-controls select {
  padding: 4px 8px; border: 1px solid #e0e0e0; border-radius: 4px;
  font-size: 13px; font-family: 'Roboto', sans-serif;
}
.anat-cccv-power-val { font-weight: 700; color: #4CAF50; min-width: 60px; font-size: 14px; }

.anat-cccv-presets {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px;
}
.anat-cccv-preset {
  padding: 6px 14px; border: 1px solid #e0e0e0; border-radius: 4px;
  background: #fff; cursor: pointer; font-size: 12px; font-family: 'Roboto', sans-serif;
  transition: all .15s;
}
.anat-cccv-preset:hover { border-color: #4CAF50; background: #E8F5E9; }

.anat-cccv-canvas {
  width: 100%; background: #fafafa; border: 1px solid #e0e0e0; border-radius: 4px;
}

.anat-cccv-info {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px; margin-top: 12px;
}
.anat-cccv-info-item {
  background: #fff; border-radius: 4px; padding: 10px 12px; text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.anat-cccv-info-item__label { font-size: 11px; color: rgba(0,0,0,.54); text-transform: uppercase; margin-bottom: 2px; }
.anat-cccv-info-item__value { font-size: 20px; font-weight: 700; color: #1976D2; }
.anat-cccv-info-item__unit { font-size: 12px; color: rgba(0,0,0,.54); }

/* ======== TAB 4: CHAINE DE PUISSANCE ======== */
.chain-intro {
  padding: 14px 16px; background: linear-gradient(135deg, #FFF8E1, #FFF3E0);
  border-radius: 6px; margin-bottom: 16px; border-left: 4px solid #FF9800;
}
.chain-intro h3 { font-size: 15px; font-weight: 600; color: #E65100; margin: 0 0 6px; display: flex; align-items: center; gap: 6px; }
.chain-intro p { font-size: 13px; color: rgba(0,0,0,.7); margin: 0; line-height: 1.5; }

.chain-scenarios {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;
}
.chain-scenario {
  padding: 8px 14px; border: 1px solid #e0e0e0; border-radius: 6px;
  background: #fff; cursor: pointer; font-size: 12px; font-family: 'Roboto', sans-serif;
  transition: all .15s; text-align: left; line-height: 1.4;
}
.chain-scenario:hover { border-color: #FF9800; background: #FFF8E1; }
.chain-scenario strong { color: #E65100; font-size: 12px; }
.chain-scenario span { color: rgba(0,0,0,.54); font-size: 11px; }

.chain-selectors {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 20px;
}
.chain-sel {
  flex: 1; min-width: 160px; background: #f5f5f5; border-radius: 8px;
  padding: 12px; text-align: center; border: 2px solid transparent;
  transition: border-color .2s;
}
.chain-sel:focus-within { border-color: #4CAF50; }
.chain-sel__icon {
  width: 42px; height: 42px; border-radius: 50%; margin: 0 auto 8px;
  display: flex; align-items: center; justify-content: center;
}
.chain-sel__icon .mdi { font-size: 22px; color: #fff; }
.chain-sel label { display: block; font-size: 11px; font-weight: 600; color: rgba(0,0,0,.6); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .3px; }
.chain-sel select {
  width: 100%; padding: 6px 8px; border: 1px solid #e0e0e0; border-radius: 4px;
  font-size: 12px; font-family: 'Roboto', sans-serif; background: #fff;
}
.chain-arrow { font-size: 24px; color: rgba(0,0,0,.25); flex-shrink: 0; }

.chain-result {
  text-align: center; margin-bottom: 20px;
}
.chain-result__power {
  display: inline-block; padding: 16px 32px; background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
  border-radius: 10px; border: 2px solid #4CAF50;
}
.chain-result__label { font-size: 12px; text-transform: uppercase; color: rgba(0,0,0,.54); letter-spacing: .5px; font-weight: 500; }
.chain-result__value { font-size: 42px; font-weight: 800; color: #2E7D32; line-height: 1.1; margin: 4px 0; }
.chain-result__value span { font-size: 20px; font-weight: 400; color: #4CAF50; }
.chain-result__mode { font-size: 13px; color: #388E3C; font-weight: 500; margin-bottom: 6px; }
.chain-result__formula {
  font-size: 12px; color: rgba(0,0,0,.6); background: rgba(255,255,255,.6);
  padding: 6px 12px; border-radius: 4px; font-family: 'Roboto Mono', monospace;
}

.chain-bars { margin-bottom: 16px; }
.chain-bar-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}
.chain-bar-row:last-child { border-bottom: none; }
.chain-bar--bottleneck { background: #FFF3E0; border-radius: 4px; padding: 8px 10px; margin: 2px -10px; border-bottom-color: transparent; }
.chain-bar-label { min-width: 100px; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.chain-bar-label .mdi { font-size: 20px; }
.chain-bar-track {
  height: 28px; background: #f0f0f0; border-radius: 4px;
  position: relative; overflow: hidden;
}
.chain-bar-fill {
  height: 100%; border-radius: 4px; transition: width .4s ease;
  min-width: 2px;
}
.chain-bar-val {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 12px; font-weight: 700; color: rgba(0,0,0,.7);
}
.chain-bar-bottleneck-tag {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 600; color: #E65100;
  background: #FFCC80; padding: 2px 10px; border-radius: 12px; white-space: nowrap;
}
.chain-bar-content { flex: 1; min-width: 0; }
.chain-bar-amps { font-size: 11px; color: rgba(0,0,0,.4); font-weight: 400; margin-left: auto; }
.chain-bar-fill--native { position: absolute; top: 0; left: 0; height: 100%; border-radius: 4px; }
.chain-bar-native { font-size: 10px; color: rgba(0,0,0,.4); font-weight: 400; }
.chain-bar-formula {
  font-size: 11px; color: rgba(0,0,0,.5); font-family: 'Roboto Mono', monospace;
  margin-top: 3px; padding-left: 2px;
}
.chain-bar-formula strong { color: rgba(0,0,0,.8); }

.chain-explain {
  padding: 12px 16px; background: #E3F2FD; border-radius: 6px;
  font-size: 13px; color: #1565C0; line-height: 1.5;
  border-left: 4px solid #1976D2; display: flex; align-items: flex-start; gap: 8px;
}
.chain-explain .mdi { font-size: 20px; flex-shrink: 0; margin-top: 1px; }

/* ======== RESPONSIVE ======== */
@media (max-width: 768px) {
  .anat-process-layout { flex-direction: column; }
  .anat-process-sidebar { width: 100%; min-width: auto; border-right: none; border-bottom: 1px solid #e0e0e0; padding-right: 0; padding-bottom: 12px; max-height: 200px; }
  .anat-cccv-controls { flex-direction: column; align-items: flex-start; }
  .chain-selectors { flex-direction: column; }
  .chain-arrow { transform: rotate(90deg); }
  .chain-sel { min-width: auto; }
  .chain-bar-row { flex-wrap: wrap; }
}

/* === DARK MODE === */
[data-theme="dark"] .anat-tabs { background: #16213e; border-color: #2a2a4a; box-shadow: none; }
[data-theme="dark"] .anat-tab { color: rgba(255,255,255,.5); }
[data-theme="dark"] .anat-tab:hover { color: #e0e0e0; background: rgba(255,255,255,.04); }
[data-theme="dark"] .anat-tab.active { color: #66BB6A; border-bottom-color: #66BB6A; }
[data-theme="dark"] .anat-tab-content { background: #16213e; box-shadow: none; color: #e0e0e0; }
[data-theme="dark"] .anat-state-bar button { background: #16213e; border-color: #2a2a4a; color: #e0e0e0; }
[data-theme="dark"] .anat-state-bar button:hover { background: #1c3a2e; border-color: #66BB6A; }
[data-theme="dark"] .anat-legend { background: #1c2a4a; color: rgba(255,255,255,.5); }
[data-theme="dark"] .anat-popup { background: #16213e; color: #e0e0e0; }
[data-theme="dark"] .anat-popup__body { color: #e0e0e0; }
[data-theme="dark"] .anat-popup__body th { background: #1c2a4a; border-color: #2a2a4a; color: rgba(255,255,255,.6); }
[data-theme="dark"] .anat-popup__body td { border-color: #2a2a4a; }
[data-theme="dark"] .anat-process-sidebar { border-color: #2a2a4a; }
[data-theme="dark"] .anat-process-btn { background: #16213e; border-color: #2a2a4a; color: #e0e0e0; }
[data-theme="dark"] .anat-process-btn:hover { background: #1c2a4a; border-color: #66BB6A; }
[data-theme="dark"] .anat-process-btn.active { background: #1c3a2e; border-color: #66BB6A; }
[data-theme="dark"] .anat-process-placeholder { color: rgba(255,255,255,.3); }
[data-theme="dark"] .anat-step-detail__header { background: #1c2a4a; color: #e0e0e0; }
[data-theme="dark"] .anat-step-detail__desc { color: rgba(255,255,255,.5); }
[data-theme="dark"] .anat-step-detail__content { border-color: #2a2a4a; color: #e0e0e0; }
[data-theme="dark"] .anat-step-detail__content th { background: #1c2a4a; border-color: #2a2a4a; }
[data-theme="dark"] .anat-step-detail__content td { border-color: #2a2a4a; }
[data-theme="dark"] .anat-quiz { background: #1c2a3e; border-color: #2a2a4a; }
[data-theme="dark"] .anat-quiz__opt { background: #16213e; border-color: #2a2a4a; color: #e0e0e0; }
[data-theme="dark"] .anat-quiz__opt:hover { background: #1c3a2e; border-color: #66BB6A; }
[data-theme="dark"] .anat-cccv-controls { background: #1c2a4a; }
[data-theme="dark"] .anat-cccv-controls label { color: rgba(255,255,255,.6); }
[data-theme="dark"] .anat-cccv-controls select { background: #16213e; border-color: #2a2a4a; color: #e0e0e0; }
[data-theme="dark"] .anat-cccv-preset { background: #16213e; border-color: #2a2a4a; color: #e0e0e0; }
[data-theme="dark"] .anat-cccv-preset:hover { background: #1c3a2e; border-color: #66BB6A; }
[data-theme="dark"] .anat-cccv-canvas { background: #1c2a4a; border-color: #2a2a4a; }
[data-theme="dark"] .anat-cccv-info-item { background: #16213e; }
[data-theme="dark"] .chain-intro { background: linear-gradient(135deg, #1c2a3e, #1c2a4a); border-color: #f59e0b; }
[data-theme="dark"] .chain-intro h3 { color: #f59e0b; }
[data-theme="dark"] .chain-intro p { color: rgba(255,255,255,.7); }
[data-theme="dark"] .chain-scenario { background: #16213e; border-color: #2a2a4a; color: #e0e0e0; }
[data-theme="dark"] .chain-scenario:hover { background: #1c2a3e; border-color: #f59e0b; }
[data-theme="dark"] .chain-scenario span { color: rgba(255,255,255,.5); }
[data-theme="dark"] .chain-sel { background: #1c2a4a; }
[data-theme="dark"] .chain-sel label { color: rgba(255,255,255,.6); }
[data-theme="dark"] .chain-sel select { background: #16213e; border-color: #2a2a4a; color: #e0e0e0; }
[data-theme="dark"] .chain-result__power { background: linear-gradient(135deg, #1c3a2e, #16213e); border-color: #66BB6A; }
[data-theme="dark"] .chain-result__label { color: rgba(255,255,255,.5); }
[data-theme="dark"] .chain-result__value { color: #66BB6A; }
[data-theme="dark"] .chain-result__mode { color: #81C784; }
[data-theme="dark"] .chain-result__formula { background: rgba(0,0,0,.3); color: rgba(255,255,255,.7); }
[data-theme="dark"] .chain-bar-track { background: #1c2a4a; }
[data-theme="dark"] .chain-bar-val { color: rgba(255,255,255,.8); }
[data-theme="dark"] .chain-bar--bottleneck { background: rgba(255,152,0,.1); }
[data-theme="dark"] .chain-bar-row { border-color: #2a2a4a; }
[data-theme="dark"] .chain-explain { background: #1c2a4a; color: #64B5F6; border-color: #42A5F5; }
[data-theme="dark"] .chain-arrow { color: rgba(255,255,255,.2); }
[data-theme="dark"] .chain-bar-formula { color: rgba(255,255,255,.5); }
[data-theme="dark"] .chain-bar-formula strong { color: rgba(255,255,255,.85); }