/* ============================================================
   ENFASYS — Corporate Identity Theme
   Work Sans (primary) · IBM Plex Mono (secondary)
   Red #D51317 · Black #000000 · White #FFFFFF
   Sharp corners · Offset shadows · High contrast
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500&family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap');

:root {
  /* Brand */
  --enf-red:       #D51317;
  --enf-red-dark:  #A50F12;
  --enf-red-tint:  #FFF0F0;
  --enf-red-border:#F5C0C1;
  --black:         #000000;
  --white:         #FFFFFF;

  /* Greys */
  --grey-05:       #F5F5F5;
  --grey-10:       #EBEBEB;
  --grey-20:       #D4D4D4;
  --grey-40:       #A3A3A3;
  --grey-60:       #666666;
  --grey-80:       #333333;

  /* Semantic */
  --green:         #1A7A1A;

  /* Legacy aliases — override base.css variables */
  --bg:            var(--grey-05);
  --card:          var(--white);
  --border:        var(--grey-20);
  --primary:       var(--black);
  --secondary:     var(--grey-80);
  --red:           var(--enf-red);
  --orange:        #B86A00;
  --gray:          var(--grey-60);
  --text:          var(--black);
  --light-text:    var(--grey-80);

  /* Typography */
  --font-display:  'Work Sans', system-ui, sans-serif;
  --font-sans:     'Work Sans', system-ui, sans-serif;
  --font-mono:     'IBM Plex Mono', 'Fira Mono', monospace;
  --font-serif:    'Work Sans', system-ui, sans-serif;

  /* Geometry — sharp corners */
  --radius-sm:     0px;
  --radius-md:     0px;
  --radius-lg:     0px;

  /* Shadows — sharp offset, no blur */
  --shadow-xs:  2px 2px 0 rgba(0,0,0,0.08);
  --shadow-sm:  3px 3px 0 rgba(0,0,0,0.12);
  --shadow-md:  4px 4px 0 rgba(0,0,0,0.15);

  /* Transitions */
  --ease:       cubic-bezier(0.4,0,0.2,1);
  --dur:        150ms;
}

/* ============================================================
   Reset & Base overrides
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--grey-05);
  color: var(--black);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--enf-red); text-decoration: none; }
a:hover { color: var(--enf-red-dark); text-decoration: underline; }
::selection { background: var(--enf-red); color: var(--white); }
:focus-visible { outline: 2px solid var(--enf-red); outline-offset: 2px; }

.container { padding: 24px 28px; }

/* ============================================================
   Header
   ============================================================ */
.header {
  position: relative;
  background: var(--white);
  color: var(--black);
  padding: 28px 36px;
  border-radius: 0;
  margin-bottom: 24px;
  overflow: hidden;
  border: 2px solid var(--black);
  box-shadow: 4px 4px 0 var(--black);
}
/* Red accent stripe on left */
.header::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--enf-red);
  border-radius: 0;
}

.header-inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 24px; padding-left: 10px; }
.header-logo { flex-shrink: 0; width: 72px; height: 72px; }
.header-text { flex: 1; }

.header h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.9rem;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 4px;
  color: var(--black);
  text-transform: uppercase;
}
.header h1 .arc-word { color: var(--enf-red); }

.header-tagline {
  font-family: var(--font-mono);
  font-style: italic;
  font-weight: 300;
  font-size: 0.82rem;
  color: var(--enf-red);
  letter-spacing: 0.02em;
  margin-bottom: 3px;
}

.header .subtitle {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-80);
  font-weight: 500;
  white-space: nowrap;
}

.subtitle-by {
  color: #B01014;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.header-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: transparent;
  color: var(--grey-60);
  border: 1px solid var(--grey-20);
  padding: 5px 12px;
  border-radius: 0;
  align-self: flex-start;
  font-weight: 400;
  line-height: 1.8;
}
.header-badge-by {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--grey-40);
  text-transform: uppercase;
}

/* ============================================================
   Step Panels
   ============================================================ */
.step {
  background: var(--white);
  padding: 22px 24px;
  border: 1px solid var(--grey-20);
  border-left: 3px solid var(--black);
  border-radius: 0;
  margin-bottom: 16px;
  transition: box-shadow var(--dur) var(--ease), border-left-color var(--dur) var(--ease);
}
.step:hover {
  box-shadow: var(--shadow-sm);
  border-left-color: var(--enf-red);
}

.step-header {
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--grey-10);
}

.step-num {
  background: var(--black);
  width: 22px; height: 22px;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0;
}

.step-header h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--black);
}

/* ============================================================
   Config Sections
   ============================================================ */
.config-grid { gap: 16px; }
.config-section {
  background: var(--grey-05);
  padding: 14px 16px;
  border: 1px solid var(--grey-20);
  border-radius: 0;
}
.config-section h3 {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--enf-red);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--grey-10);
}
.config-section h4 {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--grey-80);
}

/* ============================================================
   Forms
   ============================================================ */
.form-row label {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--grey-60);
}
.form-row input[type="number"],
.form-row input[type="date"],
.form-row input[type="text"],
.form-row select {
  padding: 5px 8px;
  border: 1px solid var(--grey-20);
  border-bottom: 2px solid var(--grey-40);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--black);
  background: var(--white);
  transition: border-color var(--dur) var(--ease);
}
.form-row input:focus,
.form-row select:focus {
  border-bottom-color: var(--enf-red);
  outline: none;
  background: var(--white);
}
.form-row .unit {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--grey-80);
}

/* ============================================================
   Upload Area
   ============================================================ */
.upload-area {
  border-radius: 0;
  background: var(--grey-05);
  font-family: var(--font-sans);
  color: var(--grey-60);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.upload-area:hover { border-color: var(--black); background: var(--white); }
.upload-area.active { border-color: var(--enf-red); background: var(--enf-red-tint); border-style: solid; }
.upload-status { font-family: var(--font-mono); }
.upload-status.success { color: var(--green); }

/* ============================================================
   Field Chips
   ============================================================ */
.field-chip {
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}
.field-chip.required.unmapped   { background: var(--enf-red-tint); color: var(--enf-red); border-color: var(--enf-red-border); }
.field-chip.required.mapped     { background: #F0FAF0; color: var(--green); border-color: #A8D8A8; }
.field-chip.optional.unmapped   { background: var(--grey-05); color: var(--grey-60); border-color: var(--grey-20); }
.field-chip.optional.mapped     { background: #F0FAF0; color: var(--green); border-color: #A8D8A8; }
.field-chip.optional.disabled-field {
  background: var(--grey-05); color: var(--grey-40);
  border-color: var(--grey-10);
}

/* ============================================================
   Pending Upload Cards
   ============================================================ */
.pending-upload-card {
  background: var(--grey-05);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.pending-upload-card .pu-title { font-weight: 400; }
.pending-upload-card .pu-delete { opacity: 0.6; transition: opacity var(--dur); }
.pending-upload-card .pu-delete:hover { opacity: 1; }
.pending-upload-card .mapping-row select {
  font-family: var(--font-mono); background: var(--white); color: var(--black); border-radius: 0;
}

/* ============================================================
   Dataset List
   ============================================================ */
.dataset-item {
  border-radius: 0;
  border-left: 3px solid transparent;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  background: var(--white);
  transition: all var(--dur) var(--ease);
}
.dataset-item:hover { border-left-color: var(--grey-60); background: var(--grey-05); }
.dataset-item.active { border-left-color: var(--enf-red); background: var(--enf-red-tint); border-color: var(--enf-red); }
.dataset-item .ds-badge {
  font-family: var(--font-mono);
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--black); color: var(--white);
  border-radius: 0;
}

/* ============================================================
   Service Items
   ============================================================ */
.service-item label {
  font-family: var(--font-sans);
  color: var(--grey-80);
  font-weight: 400;
}
.service-item input[type="checkbox"],
.service-item input[type="radio"] {
  accent-color: var(--enf-red);
}

/* ============================================================
   DR Event Cards
   ============================================================ */
.dr-event-card {
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.dr-event-card input[type="time"],
.dr-event-card input[type="number"],
.dr-event-card select,
.dr-event-card input[type="date"] {
  font-family: var(--font-mono);
  border-bottom: 2px solid var(--grey-40);
  border-radius: 0;
  background: var(--white);
  color: var(--black);
}
.dr-event-card .dr-delete { opacity: 0.5; }
.dr-schedule-options label { color: var(--grey-60); font-family: var(--font-sans); }
.dr-schedule-options input[type="checkbox"] { accent-color: var(--enf-red); }

/* ============================================================
   Multi-Stage Timeline
   ============================================================ */
.ms-timeline::before { background: var(--grey-20); }
.ms-stage-dot {
  border: 2px solid var(--grey-20);
  border-radius: 0;
  transition: all var(--dur) var(--ease);
}
.ms-stage.active .ms-stage-dot {
  background: var(--enf-red);
  border-color: var(--enf-red);
  border-radius: 0;
  box-shadow: 0 0 0 3px rgba(213,19,23,0.12);
}
.ms-stage.dimmed { opacity: 0.3; }
.ms-stage-card {
  background: var(--grey-05);
  border-left: 2px solid transparent;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  transition: border-left-color var(--dur) var(--ease);
}
.ms-stage.active .ms-stage-card { border-left-color: var(--enf-red); background: var(--white); }
.ms-stage-header {
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--enf-red);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ms-stage-gate { font-family: var(--font-sans); }
.ms-stage-services { font-family: var(--font-sans); }
.ms-stage-services span {
  background: var(--black); color: var(--white);
  border-radius: 0;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
}
.ms-stage-param label { font-family: var(--font-sans); }
.ms-stage-param input {
  border-bottom: 2px solid var(--grey-40);
  border-radius: 0;
  font-family: var(--font-mono);
  background: var(--white);
  color: var(--black);
}
.ms-stage-param .param-label { font-family: var(--font-sans); }
.ms-lock-arrow {
  color: var(--grey-40);
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ============================================================
   Scenario Panel
   ============================================================ */
.scenario-panel {
  background: var(--grey-05);
  border-radius: 0;
}
.scenario-panel h3 {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--enf-red);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--grey-10);
}
.scenario-row {
  border-radius: 0;
  border-left: 3px solid transparent;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  background: var(--white);
  transition: all var(--dur) var(--ease);
}
.scenario-row.active-scenario { border-left-color: var(--enf-red); background: var(--enf-red-tint); box-shadow: none; }
.scenario-row.baseline-scenario { border-style: dashed; background: var(--grey-05); }
.scenario-row .sc-vis { accent-color: var(--enf-red); width: 14px; height: 14px; }
.scenario-row .sc-color { width: 12px; height: 12px; border-radius: 0; }
.sc-color-square { width: 12px; height: 12px; border-radius: 0; }
.scenario-row .sc-name { font-weight: 400; }
.scenario-row .sc-result { font-weight: 500; }
.scenario-row .sc-result.positive { color: var(--green); }
.scenario-row .sc-export-bat {
  border: 1px solid var(--grey-20);
  color: var(--grey-80);
  font-family: var(--font-mono);
  border-radius: 0;
  transition: all var(--dur);
}
.scenario-row .sc-export-bat:hover { border-color: var(--black); }
.scenario-row .sc-delete { opacity: 0.4; transition: opacity var(--dur); }

/* ============================================================
   Buttons
   ============================================================ */
.run-btn {
  background: var(--enf-red);
  color: var(--white);
  border: 2px solid var(--enf-red);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform 120ms;
}
.run-btn:hover { background: var(--enf-red-dark); border-color: var(--enf-red-dark); box-shadow: 3px 3px 0 rgba(213,19,23,0.3); }
.run-btn:active { transform: translate(1px,1px); box-shadow: none; }
.run-btn:disabled { background: var(--grey-20); border-color: var(--grey-20); color: var(--grey-60); }

.scenario-name-input {
  border-bottom: 2px solid var(--grey-40);
  border-radius: 0;
  font-family: var(--font-mono);
  background: var(--white);
  color: var(--black);
  transition: border-bottom-color var(--dur);
}
.scenario-name-input:focus { border-bottom-color: var(--enf-red); outline: none; }

/* ============================================================
   Progress Bar
   ============================================================ */
.progress-inner { height: 2px; background: var(--enf-red); border-radius: 0; }
.progress-text { font-family: var(--font-mono); font-size: 0.75rem; color: var(--grey-60); }

/* ============================================================
   Results Section
   ============================================================ */
h2.section-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 28px 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--black);
  color: var(--black);
  display: flex; align-items: center; gap: 10px;
}
h2.section-title::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--enf-red);
  border-radius: 0;
  flex-shrink: 0;
  transform: rotate(45deg);
}

/* ============================================================
   KPI Cards
   ============================================================ */
.card {
  background: var(--white);
  padding: 16px 18px;
  border: 1px solid var(--grey-20);
  border-top: 3px solid var(--black);
  border-radius: 0;
  position: relative;
  overflow: visible;
  transition: box-shadow var(--dur) var(--ease), border-top-color var(--dur) var(--ease);
}
.card::before { display: none; }
.card:hover { box-shadow: var(--shadow-sm); border-top-color: var(--enf-red); }

.card .label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey-60);
  font-weight: 400;
}
.card .value {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.card .detail { font-family: var(--font-sans); font-size: 0.72rem; color: var(--grey-60); }
.card.green  .value { color: var(--green); }
.card.red    .value { color: var(--enf-red); }
.card.blue   .value { color: var(--black); }
.card.purple .value { color: var(--grey-80); }
.card.orange .value { color: #B86A00; }

/* ============================================================
   Chart Boxes
   ============================================================ */
.chart-box {
  background: var(--white);
  padding: 14px 16px;
  border: 1px solid var(--grey-20);
  border-radius: 0;
}
.chart-box h3 {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey-60);
}
.two-col { gap: 16px; }

/* ============================================================
   Tables
   ============================================================ */
.table-wrap { border-radius: 0; }

table { font-family: var(--font-mono); font-size: 0.78rem; }
th {
  background: var(--grey-05);
  color: var(--grey-80);
  border-bottom: 2px solid var(--grey-20);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
td {
  border-bottom: 1px solid var(--grey-10);
  color: var(--grey-80);
  font-variant-numeric: tabular-nums;
}
tr:hover td { background: var(--grey-05); }
.positive { font-weight: 400; }
.negative { font-weight: 400; }

/* Comparison table */
.comparison-table { font-family: var(--font-mono); font-size: 0.8rem; }
.comparison-table th {
  background: var(--grey-05); color: var(--grey-80);
  font-size: 0.65rem; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 500;
}
.comparison-table td { color: var(--grey-80); }
.comparison-table td:first-child { font-weight: 400; color: var(--black); }
.comparison-table .col-header {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--black);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: none;
}

/* Alloc table */
#alloc-table input[type="number"] {
  border-bottom: 2px solid var(--grey-40);
  border-radius: 0;
  font-family: var(--font-mono);
  background: var(--white);
  color: var(--black);
}
#alloc-table tr.peak-row { background: #FFF8EC; }

/* ============================================================
   Export / Action Buttons
   ============================================================ */
.export-btn {
  background: var(--black);
  border: 2px solid var(--black);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background var(--dur), box-shadow var(--dur);
}
.export-btn:hover { background: var(--grey-80); box-shadow: 2px 2px 0 rgba(0,0,0,0.2); }

.baseline-btn {
  background: var(--white) !important;
  color: var(--black) !important;
  border: 2px solid var(--grey-20) !important;
  border-radius: 0 !important;
}
.baseline-btn:hover:not(:disabled) { border-color: var(--black) !important; background: var(--grey-05) !important; }
.baseline-btn:disabled { color: var(--grey-40) !important; border-color: var(--grey-10) !important; background: var(--grey-05) !important; }

#confirm-dataset-btn {
  background: var(--enf-red);
  color: var(--white);
  border: 2px solid var(--enf-red);
  border-radius: 0;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background var(--dur), box-shadow var(--dur);
}
#confirm-dataset-btn:hover:not(:disabled) { background: var(--enf-red-dark); border-color: var(--enf-red-dark); box-shadow: 2px 2px 0 rgba(213,19,23,0.3); }
#confirm-dataset-btn:disabled { background: var(--grey-20); border-color: var(--grey-20); color: var(--grey-60); }

/* ============================================================
   EMS Baselines (brand overrides)
   ============================================================ */
.ems-section {
  background: var(--grey-05);
  border: 1px solid var(--grey-20);
  border-left: 3px solid var(--enf-red);
  border-radius: 0;
}
.ems-section h3 { color: var(--enf-red); }
.tod-cell { border-radius: 0; border-color: var(--grey-20); }
.tod-cell.idle { background: var(--grey-05); color: var(--grey-40); }
.tod-cell.charge { background: var(--black); }
.tod-cell.discharge { background: var(--enf-red); }
.tod-power-input { border-color: var(--grey-20); border-radius: 0; font-family: var(--font-mono); }
.tod-power-input:disabled { background: var(--grey-05); color: var(--grey-40); }
.tod-preset-btn {
  border-radius: 0;
  font-family: var(--font-mono);
  border-color: var(--grey-20);
}
.tod-preset-btn:hover { border-color: var(--black); }
.tod-preset-btn.active { background: var(--enf-red-tint); border-color: var(--enf-red); color: var(--enf-red); }
.ems-run-btn {
  background: var(--enf-red);
  border: 2px solid var(--enf-red);
  border-radius: 0;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ems-run-btn:hover { background: var(--enf-red-dark); }
.ems-run-btn:disabled { background: var(--grey-20); border-color: var(--grey-20); color: var(--grey-60); }

/* ============================================================
   SRAD Help Panels
   ============================================================ */
#srad-mode-help {
  background: var(--grey-05);
  border-left: 3px solid var(--enf-red);
  border-radius: 0;
  font-family: var(--font-sans);
  color: var(--grey-80);
}
#srad-activation-help {
  background: var(--grey-05);
  border-left: 2px solid var(--grey-20);
  border-radius: 0;
  font-family: var(--font-sans);
  color: var(--grey-80);
}

/* ============================================================
   Modal
   ============================================================ */
.modal-overlay { background: rgba(0,0,0,0.7); }
.modal-card {
  border-radius: 0;
  border: 2px solid var(--black);
  box-shadow: 6px 6px 0 var(--black);
}
.modal-card h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--black);
}
.modal-card p { font-family: var(--font-sans); color: var(--grey-80); }
.modal-card ul { font-family: var(--font-sans); color: var(--grey-80); }
.modal-buttons button {
  border-radius: 0;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 400;
  transition: all var(--dur);
}
.modal-btn-cancel { background: var(--white); border: 2px solid var(--grey-20); color: var(--grey-80); }
.modal-btn-cancel:hover { border-color: var(--black); }
.modal-btn-confirm { background: var(--enf-red); border: 2px solid var(--enf-red); }
.modal-btn-confirm:hover { background: var(--enf-red-dark); border-color: var(--enf-red-dark); }

/* ============================================================
   Dispatch Hint
   ============================================================ */
.dispatch-hint { font-family: var(--font-sans); color: var(--grey-60); }

/* ============================================================
   Prose / Note text
   ============================================================ */
.note {
  font-family: var(--font-sans);
  color: var(--grey-60);
  background: var(--grey-05);
  border-left: 3px solid var(--grey-20);
  border-radius: 0;
}
details > div {
  font-family: var(--font-sans) !important;
  color: var(--grey-80) !important;
}
div[style*="line-height:1.5"],
div[style*="line-height: 1.5"],
div[style*="line-height:1.45"],
div[style*="line-height: 1.45"] {
  font-family: var(--font-sans) !important;
}

/* Details / Summary */
details > summary {
  font-family: var(--font-mono);
  color: var(--enf-red);
  font-weight: 400;
  letter-spacing: 0.06em;
  list-style: none;
  display: flex; align-items: center; gap: 6px;
}
details > summary::before {
  content: '\25B6';
  font-size: 0.55rem;
  transition: transform var(--dur) var(--ease);
  color: var(--enf-red);
}
details[open] > summary::before { transform: rotate(90deg); }

/* ============================================================
   Global overrides
   ============================================================ */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--enf-red);
}
strong, b { font-weight: 500; }

/* ============================================================
   Scrollbar
   ============================================================ */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--grey-05); }
::-webkit-scrollbar-thumb { background: var(--grey-20); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--enf-red); }

/* ============================================================
   Inline button overrides
   ============================================================ */
button[style*="background:var(--primary)"],
button[style*="background: var(--primary)"],
button[style*="background:#3b82f6"],
button[style*="background:#16a34a"] {
  background: var(--enf-red) !important;
  border-color: var(--enf-red) !important;
  border-radius: 0 !important;
}