:root {
  --bg: #10141a;
  --panel: #171c24;
  --panel-alt: #1d2430;
  --border: #2a323e;

  --copper: #c6793f;
  --copper-dim: #8a5730;
  --good: #4cb17d;
  --warn: #e3a94b;
  --crit: #e0563d;

  --savings: #4cb17d;
  --savings-dim: #2f7550;
  --review: #b07cc6;
  --review-dim: #5c3d6b;

  --text: #f5f7f9;
  --text-muted: #a8b2bf;
  --text-dim: #7c8796;

  /* FIX: was used by .stat-hero / .stat-chip but never defined,
     so every box-shadow: var(--shadow) silently did nothing. */
  --shadow: 0 1px 3px rgba(0,0,0,0.35);

  --mono: 'IBM Plex Mono', monospace;
  --sans: 'Inter', sans-serif;
  --disp: 'Oswald', sans-serif;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
}

/* ============ HEADER ============ */
/* Two tiers: title + clock on top, an instrument strip of five cards
   underneath. The title never shares a row with the cards, so it always
   shows in full. */

header {
  padding: 16px 28px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #131923 0%, var(--bg) 100%);
}
.hd-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; margin-bottom: 14px;
}

header h1 {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  font-family: var(--disp); font-weight: 600; letter-spacing: 0.04em;
  font-size: clamp(15px, 1.7vw, 22px);
  cursor: pointer; white-space: nowrap;
}
.hd-logo {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  background: var(--copper); color: var(--bg); border-radius: 3px;
}
.hd-logo svg { width: 19px; height: 19px; }
.hd-name { color: var(--text); }
.hd-sub  { color: var(--text-muted); font-weight: 400; letter-spacing: 0.06em; }
.hd-sub::before { content: '\2014'; margin-right: 12px; color: var(--copper); }

/* --- instrument strip --- */
.hd-stats {
  display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr 1.05fr; gap: 10px;
}
.hs {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  gap: 6px; min-width: 0; padding: 11px 14px 10px;
  background: linear-gradient(160deg, var(--panel) 0%, #141922 100%);
  border: 1px solid var(--border); border-top: 2px solid var(--accent, var(--copper));
  box-shadow: var(--shadow);
}
.hs-load    { --accent: var(--copper); }
.hs-energy  { --accent: #4c8fb1; }
.hs-month   { --accent: #c9a227; }
.hs-df      { --accent: #5b8c7e; }
.hs-savings { --accent: var(--savings); cursor: pointer; transition: transform .12s, border-color .2s; }
.hs-savings:hover { transform: translateY(-2px); border-color: var(--savings-dim); }

.hs-label {
  font-family: var(--disp); font-size: 10px; letter-spacing: 0.12em;
  color: var(--text-dim); white-space: nowrap;
}
.hs-main { display: flex; align-items: baseline; gap: 5px; }
.hs-val  { font-family: var(--mono); font-size: clamp(20px, 2vw, 27px); font-weight: 600; line-height: 1; color: var(--text); }
.hs-foot { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1150px) { .hs-gauge { display: none; } .hs { padding: 10px 11px 9px; } }
.hs-unit { font-family: var(--mono); font-size: 11px; color: var(--accent, var(--copper)); }
.hs-foot { font-family: var(--mono); font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }
.hs-foot b { color: var(--text); font-weight: 600; }
.hs-foot-dim { color: var(--text-dim); font-size: 10px; cursor: help; }
.hs-foot-dim b { color: var(--text-muted); font-weight: 600; }
.hs-savings .hs-val { color: #7dd9a8; }

/* capacity bar under the load figure */
.hs-cap { height: 5px; background: var(--panel-alt); border: 1px solid var(--border); position: relative; }
.hs-cap i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--copper-dim), var(--copper)); }

/* demand-factor gauge sits to the right of the number */
.hs-df .hs-body { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.hs-gauge { width: 74px; height: 42px; flex: none; }
.hs-gauge path { fill: none; stroke-width: 6; stroke-linecap: round; }
.hs-gauge .track { stroke: var(--panel-alt); }
.hs-gauge .fill  { stroke: var(--accent); }

/* "try a different total MW" input on the DEMAND FACTOR card */
.hs-df-edit { display: flex; align-items: center; gap: 4px; margin-top: 7px; }
.hs-df-edit label {
  font-family: var(--mono); font-size: 9.5px; color: var(--text-dim); white-space: nowrap;
}
.hs-df-edit input {
  width: 52px; font-family: var(--mono); font-size: 11px; background: var(--panel-alt);
  border: 1px solid var(--border); color: var(--text); border-radius: 3px; padding: 2px 5px;
}
.hs-df-edit input:focus { outline: none; border-color: var(--accent); }
.hs-df-edit button {
  font-family: var(--mono); font-size: 12px; background: none; border: 1px solid var(--border);
  color: var(--text-dim); border-radius: 3px; padding: 1px 6px; cursor: pointer; line-height: 1.4;
}
.hs-df-edit button:hover { border-color: var(--accent); color: var(--text); }
.hs-df.simulated { border-top-color: #c9a227; }
.hs-df.simulated .hs-label::after { content: ' · SIMULATED'; color: #c9a227; }

/* --- clock: date over big HH:MM, seconds in copper, minute bar underneath --- */
#liveClock {
  flex: none; position: relative; min-width: 168px; padding: 7px 16px 9px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  background: linear-gradient(160deg, var(--panel) 0%, #141922 100%);
  border: 1px solid var(--border); border-right: 3px solid var(--copper);
  box-shadow: var(--shadow);
}
#clockDate { font-family: var(--disp); font-size: 10px; letter-spacing: 0.14em; color: var(--text-dim); }
#clockRow  { display: flex; align-items: baseline; font-family: var(--mono); line-height: 1.05; }
#clockTime { font-size: 27px; font-weight: 600; color: var(--text); letter-spacing: 0.02em; }
#clockTime .colon { animation: blink 1s steps(1) infinite; color: var(--copper); }
#clockSec  { font-size: 14px; font-weight: 500; color: var(--copper); margin-left: 3px; min-width: 22px; }
#clockBar  { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--panel-alt); }
#clockBar i { display: block; height: 100%; width: 0; background: var(--copper); transition: width 1s linear; }
@keyframes blink { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { #clockTime .colon { animation: none; } }


/* ============ TABS ============ */

#plantTabs {
  display: flex;
  text-transform: uppercase;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  scrollbar-width: thin;
  scrollbar-color: var(--border) var(--panel);
}
#plantTabs::-webkit-scrollbar { height: 6px; }
#plantTabs::-webkit-scrollbar-track { background: var(--panel); }
#plantTabs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
#plantTabs::-webkit-scrollbar-thumb:hover { background: var(--text); }

body, #plantTabs button, .feeder-card, .rank-row, .flow-title,
#equipmentTable, #breadcrumb, #flowBreadcrumb { text-transform: uppercase; }
.flow-hint, .notes-panel, .rank-pending { text-transform: none; }

#plantTabs button {
  position: relative;
  padding: 15px 22px;
  border-right: 1px solid var(--border);
  background: none;
  border-top: none;
  border-bottom: none;
  border-left: none;
  font-family: var(--disp);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s, background .18s;
}
#plantTabs button::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--copper);
  transform: scaleX(0);
  transition: transform .2s ease;
}
#plantTabs button:hover::after { transform: scaleX(1); }
#plantTabs button:hover { color: var(--text); background: var(--panel-alt); }
#plantTabs button.active { background: var(--copper); color: var(--bg); }
#plantTabs button.active::after { transform: scaleX(0); }

/* ============ FEEDER CARDS ============ */

#feederCards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin: 28px;
}

/* FIX: two @media blocks were nested INSIDE this rule. Nested like
   that they resolved to ".feeder-card #feederCards", which matches
   nothing. They now live at the bottom of the file. */
.feeder-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  background: linear-gradient(160deg, var(--panel) 0%, #141922 100%);
  border-left: 3px solid var(--text-dim);
  padding: 18px 18px 20px;
  cursor: pointer;
  min-width: 0;
  transition: background .2s, border-left-color .2s, transform .12s;
}

.feeder-card:hover {
  background: linear-gradient(160deg, var(--panel-alt) 0%, #171d27 100%);
  border-left-color: var(--copper);
  transform: translateY(-2px);
}

.fc-name {
  font-family: var(--disp);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.fc-mw {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
}

/* ============ RANK BLOCKS ============ */

#rankRow {
  display: flex;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin: 0 28px 28px;
}
#rankRow section {
  flex: 1;
  background: var(--panel);
  padding: 16px 18px;
}
#rankRow h2 {
  font-family: var(--disp);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.rankitem { padding: 12px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.rankitem:last-child { border-bottom: none; }
.rankitem:hover { background: var(--panel-alt); }
.rankitem-name {
  font-size: 13px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rankitem-tag {
  font-family: var(--disp); font-size: 9px; letter-spacing: 0.06em;
  color: var(--text-dim); margin-top: 2px;
}
.rankitem-barrow { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.rankitem-track {
  flex: 1; height: 16px;
  background: var(--panel-alt); border: 1px solid var(--border); position: relative;
}
.rankitem-fill { position: absolute; top: 0; left: 0; bottom: 0; background: var(--copper-dim); }
.rankitem-value {
  font-family: var(--mono); font-size: 12px; color: var(--text);
  white-space: nowrap; flex-shrink: 0; min-width: 74px; text-align: right;
}

#rankUtilitiesList, #rankFeedersList, #rankEquipmentList {
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) var(--panel);
}
#rankUtilitiesList::-webkit-scrollbar,
#rankFeedersList::-webkit-scrollbar,
#rankEquipmentList::-webkit-scrollbar { width: 6px; }
#rankUtilitiesList::-webkit-scrollbar-thumb,
#rankFeedersList::-webkit-scrollbar-thumb,
#rankEquipmentList::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ============ BREADCRUMB + SUMMARY ============ */

#breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 28px 0;
  font-family: var(--mono);
  font-size: 12px;
}
#breadcrumb button {
  background: none;
  border: none;
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  padding: 0;
}
#breadcrumb button:hover { color: var(--copper); }
#breadcrumb button.crumb-current { color: var(--text); cursor: default; }
.crumb-sep { color: var(--text); }

#summaryTrio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border);
  margin: 20px 28px 28px;
}
.trio-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 20px;
  border-right: 1px solid var(--border);
}
.trio-cell:last-child { border-right: none; }
.trio-label { font-family: var(--disp); font-size: 11px; letter-spacing: 0.05em; color: var(--text-muted); }
.trio-value { font-family: var(--mono); font-size: 22px; color: var(--text); }

/* ============ EQUIPMENT TABLE ============ */
/* FIX: all of the rules below had accidentally ended up INSIDE the
   @media (max-width: 820px) block, so vertical-align, padding and the
   right-aligned numeric columns only applied on phones, never on
   desktop. They are now at top level where they belong. */

#equipmentTable {
  width: calc(100% - 56px);
  border-collapse: collapse;
  margin: 0 28px 28px;
  table-layout: fixed;
}

#equipmentTable th, #equipmentTable td {
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  padding: 13px 12px;
}

/* Column widths. The <colgroup> in index.html also sets these; keeping
   them here as a fallback does no harm since the values match.
   FIX: the old "min-width: 150px" on column 6 has been removed - it
   fought these percentages and pushed every later column out of line. */
#equipmentTable th:nth-child(1), #equipmentTable td:nth-child(1) { width: 18%; }  /* was 24% */
#equipmentTable th:nth-child(2), #equipmentTable td:nth-child(2) { width: 16%; }
#equipmentTable th:nth-child(3), #equipmentTable td:nth-child(3) { width: 7%;  }
#equipmentTable th:nth-child(4), #equipmentTable td:nth-child(4) { width: 10%; }
#equipmentTable th:nth-child(5), #equipmentTable td:nth-child(5) { width: 11%; }
#equipmentTable th:nth-child(6), #equipmentTable td:nth-child(6) { width: 15%; }  /* was 14% */
#equipmentTable th:nth-child(7), #equipmentTable td:nth-child(7) { width: 18%; }

#equipmentTable thead th {
  font-family: var(--disp);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text);
  vertical-align: bottom;
  line-height: 1.3;
  border-bottom: 1px solid var(--border);
}

#equipmentTable tbody td {
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
}

/* Alignment - one explicit rule per column, header and body together.
   Written this way so a header can never sit in a different place
   than the values underneath it. */

/* 1 - Equipment Name */
#equipmentTable thead th:nth-child(1),
#equipmentTable tbody td:nth-child(1) { text-align: left; }

/* 2 - Description */
#equipmentTable thead th:nth-child(2),
#equipmentTable tbody td:nth-child(2) { text-align: left; }

/* 3 - Run Hours (short number - centred reads best) */
#equipmentTable thead th:nth-child(3),
#equipmentTable tbody td:nth-child(3) { text-align: center; }

/* 4 - Avg Load */
#equipmentTable thead th:nth-child(4),
#equipmentTable tbody td:nth-child(4) { text-align: right; }

/* 5 - Daily Energy */
#equipmentTable thead th:nth-child(5),
#equipmentTable tbody td:nth-child(5) { text-align: right; }

/* 6 - Share % */
#equipmentTable thead th:nth-child(6),
#equipmentTable tbody td:nth-child(6) { text-align: left; }

/* 7 - Remarks */
#equipmentTable thead th:nth-child(7),
#equipmentTable tbody td:nth-child(7) { text-align: left; }

/* Visible column separators so each column's boundary is explicit */
#equipmentTable thead th,
#equipmentTable tbody td { border-right: 1px solid var(--border); }
#equipmentTable thead th:last-child,
#equipmentTable tbody td:last-child { border-right: none; }

#equipmentTable tbody tr.drillable { cursor: pointer; }
#equipmentTable tbody tr.drillable:hover { background: var(--panel-alt); }
.row-chevron { color: var(--text-dim); margin-left: 6px; }
#equipmentTable tbody tr:last-child td { border-bottom: none; }
#equipmentTable td:first-child { font-family: var(--sans); color: var(--text); }

.share-cell {
  display: grid;
  grid-template-columns: 62px 80px 62px;  /* phantom | bar | text */
  align-items: left;
  justify-content: center;
  gap: 12px;
  width: 100% 
 }
.share-track {
 grid-column: 2;        /* middle column - truly centred */
  width: 80px;
  height: 20px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;   /* a bar can never draw outside its track */
}
.share-fill { position: absolute; top: 0; left: 0; bottom: 0; background: var(--copper-dim); }
.share-pct { 
  grid-column: 3;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  text-align: left;
  white-space: nowrap;    /* never wrap or clip the value */
  overflow: visible;
 }
#equipmentTable td:nth-child(6) { overflow: visible; }

#equipmentTable tbody tr.highlighted {
  background: rgba(198, 121, 63, 0.12);
  box-shadow: inset 3px 0 0 var(--copper);
  animation: highlightPulse 1.4s ease-out;
}
@keyframes highlightPulse {
  0%   { background: rgba(198, 121, 63, 0.45); }
  100% { background: rgba(198, 121, 63, 0.12); }
}

/* ============ NOTES PANEL (under the feeder table) ============ */
.notes-panel {
  margin: 0 28px 28px;
  padding: 16px 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--copper);
}
.notes-panel h3 {
  font-family: var(--disp); font-size: 11px; letter-spacing: 0.08em;
  color: var(--text-muted); margin-bottom: 10px;
}
.notes-panel ul { list-style: none; }
.notes-panel li {
  font-size: 13px; color: var(--text); padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.notes-panel li:last-child { border-bottom: none; }
.notes-panel li:first-child { color: var(--text-muted); }
@media (max-width: 820px) { .notes-panel { margin: 0 16px 24px; } }

/* ============ ENERGY FLOW ============ */

#flowTabRow { padding: 0 28px; margin-top: 16px; display: flex; gap: 10px; }
#flowTab, #savingsTab {
  background: none; border: 1px solid var(--border);
  font-family: var(--disp); font-size: 13px; letter-spacing: 0.03em;
  color: var(--text-muted); padding: 10px 18px; cursor: pointer;
  outline: none;   /* the default focus ring is what was showing as the ugly white box */
}
#flowTab:hover, #savingsTab:hover { color: var(--text); background: var(--panel-alt); }
#flowTab.active, #savingsTab.active { background: var(--savings); color: var(--bg); border-color: var(--savings); }
#flowTab.active { background: var(--copper); border-color: var(--copper); }

#flowView { padding: 24px 28px 48px; }
#flowSvg { width: 100%; height: auto; }

.flow-band { cursor: pointer; transition: opacity 0.2s; }
.flow-band:hover { opacity: 1 !important; }
.flow-band.leaf { cursor: default; }
.flow-label { font-family: var(--sans); font-size: 12px; fill: var(--text-muted); }
.flow-value { font-family: var(--mono); font-size: 11px; fill: var(--text); }
.flow-source-label { font-family: var(--disp); font-size: 13px; fill: var(--text); }

#flowBreadcrumb {
  display: flex; align-items: center; gap: 8px;
  padding: 0 0 16px;
  font-family: var(--mono); font-size: 12px;
}
#flowBreadcrumb button {
  background: none; border: none;
  font-family: var(--mono); font-size: 12px;
  color: var(--text-muted); cursor: pointer; padding: 0;
}
#flowBreadcrumb button:hover { color: var(--copper); }
#flowBreadcrumb button.crumb-current { color: var(--text); cursor: default; }

/* --- flow view: tools row (view toggle) --- */
#flowTools { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
#flowModes { display: inline-flex; border: 1px solid var(--border); }
#flowModes button, #flowExpandBtn {
  background: none; border: none; outline: none; cursor: pointer;
  font-family: var(--disp); font-size: 11px; letter-spacing: 0.08em;
  color: var(--text-muted); padding: 8px 16px;
}
#flowModes button + button { border-left: 1px solid var(--border); }
#flowModes button:hover, #flowExpandBtn:hover { color: var(--text); background: var(--panel-alt); }
#flowModes button.active { background: var(--copper); color: var(--bg); }
#flowExpandBtn { border: 1px solid var(--border); }

/* --- bands: hover focus + subtle flow animation --- */
.flow-item { cursor: pointer; transition: opacity .2s; }
.flow-item.leaf { cursor: default; }
#flowSvg:has(.flow-item:hover) .flow-item:not(:hover) { opacity: 0.28; }
.flow-item:hover .flow-band { filter: brightness(1.15); }
.flow-band { transition: filter .2s; }
.flow-src, .flow-tgt { shape-rendering: geometricPrecision; }
.flow-leader { fill: none; stroke: var(--border); stroke-width: 1; }
.flow-item:hover .flow-leader { stroke: var(--text-dim); }
.flow-name { font-family: var(--sans); font-size: 13px; fill: var(--text); }

/* --- columns view (desktop) --- */
.fcol-head { display: flex; align-items: baseline; gap: 14px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.fcol-head span { font-family: var(--disp); font-size: 13px; letter-spacing: .06em; color: var(--text-muted); }
.fcol-head b { font-family: var(--mono); font-size: 26px; font-weight: 600; }
.fcol-head b i { font-style: normal; font-size: 12px; color: var(--copper); font-weight: 400; }
.fcol-head em { font-style: normal; font-size: 11px; color: var(--text-dim); }
.fcol-chart { display: flex; align-items: flex-end; gap: 12px; overflow-x: auto; padding: 8px 4px 12px; }
.fcol-item { flex: 1 1 78px; min-width: 78px; max-width: 130px; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: stretch; cursor: default; }
.fcol-item.drill { cursor: pointer; }
.fcol-item.drill:hover .fcol-bar { filter: brightness(1.18); }
.fcol-val { text-align: center; font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--text); margin-bottom: 5px; line-height: 1.25; white-space: nowrap; }
.fcol-val i { font-style: normal; font-size: 9px; color: var(--copper); font-weight: 400; margin-left: 2px; }
.fcol-val em { display: block; font-style: normal; font-size: 10px; color: var(--text-muted); font-weight: 400; }
.fcol-bar { width: 100%; border-radius: 4px 4px 0 0; transition: filter .15s; }
.fcol-bar.gap { background-image: repeating-linear-gradient(45deg, transparent 0 5px, var(--border) 5px 7px) !important;
  border: 1px solid var(--border); }
.fcol-name { height: 60px; margin-top: 8px; font-size: 11px; line-height: 1.3; color: var(--text-muted);
  text-align: center; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
/* when both views are stacked, give the chart some air */
#flowSvg + #flowCols { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); }

.flow-title {
  font-family: var(--disp); font-size: 15px; letter-spacing: 0.04em;
  color: var(--text); margin-bottom: 4px;
}
.flow-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 16px; }

/* ============ P.F. & KVA PAGE ============ */
#pfTab {
  background: none; border: 1px solid var(--border);
  font-family: var(--disp); font-size: 13px; letter-spacing: 0.03em;
  color: var(--text-muted); padding: 10px 18px; cursor: pointer; outline: none;
}
#pfTab:hover { color: var(--text); background: var(--panel-alt); }
#pfTab.active { background: #4c8fb1; color: var(--bg); border-color: #4c8fb1; }

#pfView { padding: 24px 28px 48px; }

.pf-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.pf-hero2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; margin-bottom: 14px; }
.pf-card.act { border-top-color: var(--warn); }
.pf-cap { align-self: flex-start; margin-top: -6px; font-size: 11px; color: var(--text-muted); }

/* kVA ladder */
.pf-card.lad { align-items: stretch; }
.lad-rows { display: flex; flex-direction: column; gap: 10px; justify-content: center; flex: 1; }
.lad-row { display: grid; grid-template-columns: 52px 108px 1fr 92px; align-items: center; gap: 12px; }
.lad-row .pfx { font-family: var(--mono); font-size: 12.5px; font-weight: 600; padding: 3px 0; text-align: center; border: 1px solid; }
.lad-row .pfx.low  { color: #e39a66; border-color: #6b4126; background: rgba(198,121,63,0.12); }
.lad-row .pfx.ok   { color: var(--warn); border-color: #7a5f2a; background: rgba(227,169,75,0.12); }
.lad-row .pfx.good { color: #7dd9a8; border-color: var(--savings-dim); background: rgba(76,177,125,0.14); }
.lad-row .nm { font-family: var(--disp); font-size: 10px; letter-spacing: 0.1em; color: var(--text-muted); white-space: nowrap; }
.lad-track { height: 16px; background: var(--panel-alt); border: 1px solid var(--border); position: relative; }
.lad-track i { position: absolute; inset: 0 auto 0 0; display: block; }
.lad-track .unc { background: rgba(224,86,61,0.5); }
.lad-track .act { background: rgba(227,169,75,0.6); }
.lad-track .cor { background: var(--good); }
.lad-row b { font-family: var(--mono); font-size: 15px; font-weight: 600; text-align: right; }
.lad-row b i { font-style: normal; font-size: 10px; font-weight: 400; color: var(--copper); margin-left: 4px; }
.lad-gap { margin-left: 64px; font-family: var(--mono); font-size: 11.5px; padding-left: 12px; border-left: 2px solid; }
.lad-gap em { font-style: normal; color: var(--text-dim); }
.lad-gap.now  { color: var(--warn); border-color: #7a5f2a; }
.lad-gap.more { color: #7dd9a8; border-color: var(--savings-dim); }
.pf-tri .t-act { fill: none; stroke: var(--warn); stroke-width: 2.4; }
.pf-tri .rel.now  { stroke: var(--warn); }
.pf-tri .rel.more { stroke: var(--good); }
.pf-tri .lb.a { fill: var(--warn); font-weight: 600; }
.pf-legend .a { color: var(--warn); }
.pf-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0;
  padding: 16px 18px 18px; box-shadow: var(--shadow);
  background: linear-gradient(160deg, var(--panel) 0%, #141922 100%);
  border: 1px solid var(--border); border-top: 2px solid var(--copper);
}
.pf-card.cor { border-top-color: var(--good); }
.pf-card.mid { border-top-color: #4c8fb1; }
.pf-tag { align-self: flex-start; font-family: var(--disp); font-size: 10px; letter-spacing: 0.13em; color: var(--text-dim); }

.pf-gauge { width: 100%; max-width: 250px; }
.pf-gauge .trk, .pf-gauge .fil { fill: none; stroke-width: 14; stroke-linecap: round; }
.pf-gauge .trk { stroke: var(--panel-alt); }
.pf-gauge.low .fil  { stroke: var(--copper); }
.pf-gauge.ok .fil   { stroke: var(--warn); }
.pf-gauge.good .fil { stroke: var(--good); }
.pf-gauge .tk { stroke: var(--text-dim); stroke-width: 1.5; }
.pf-gauge .num { font-family: var(--mono); font-size: 30px; font-weight: 600; fill: var(--text); text-anchor: middle; }
.pf-gauge .lab { font-family: var(--disp); font-size: 8.5px; letter-spacing: 0.14em; fill: var(--text-dim); text-anchor: middle; }

.pf-big { font-family: var(--mono); font-size: 36px; font-weight: 600; line-height: 1; }
.pf-big i, .pf-stats i, .pf-chip b i { font-style: normal; font-size: 12px; font-weight: 400; color: var(--copper); margin-left: 5px; }
.pf-card.cor .pf-big i, .pf-card.cor .pf-stats i { color: var(--good); }
.pf-stats { display: flex; gap: 26px; margin-top: 2px; }
.pf-stats div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pf-stats span { font-family: var(--disp); font-size: 9px; letter-spacing: 0.12em; color: var(--text-dim); }
.pf-stats b { font-family: var(--mono); font-size: 16px; font-weight: 600; }

.pf-tri { width: 100%; max-height: 300px; }
.pf-tri .t-unc { fill: rgba(224,86,61,0.14); stroke: #e0563d; stroke-width: 2; stroke-dasharray: 6 5; }
.pf-tri .t-cor { fill: rgba(76,177,125,0.24); stroke: var(--good); stroke-width: 2.4; }
.pf-tri .rel { stroke: var(--text-muted); stroke-width: 1.4; }
.pf-tri .lb { font-family: var(--mono); font-size: 13px; fill: var(--text-muted); }
.pf-tri .lb.u { fill: #ee7a64; font-weight: 600; }
.pf-tri .lb.c { fill: #7dd9a8; font-weight: 600; }
.pf-tri .lb.rl { fill: var(--text); font-weight: 600; }
.pf-legend { display: flex; gap: 20px; font-size: 11px; color: var(--text-muted); }
.pf-legend .u { color: #ee7a64; } .pf-legend .c { color: #7dd9a8; }

.pf-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 26px; }
.pf-chip {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 16px;
  background: var(--panel); border: 1px solid var(--border); border-left: 3px solid #4c8fb1;
}
.pf-chip span { font-family: var(--disp); font-size: 10px; letter-spacing: 0.12em; color: var(--text-dim); }
.pf-chip b { font-family: var(--mono); font-size: 22px; font-weight: 600; }
.pf-chip em { font-style: normal; font-size: 11px; color: var(--text-muted); font-family: var(--mono); }

#pfFilters { display: inline-flex; border: 1px solid var(--border); margin-bottom: 14px; }
#pfFilters button {
  background: none; border: none; outline: none; cursor: pointer;
  font-family: var(--disp); font-size: 11px; letter-spacing: 0.08em; color: var(--text-muted); padding: 8px 16px;
}
#pfFilters button + button { border-left: 1px solid var(--border); }
#pfFilters button:hover { color: var(--text); background: var(--panel-alt); }
#pfFilters button.active { background: var(--copper); color: var(--bg); }

.pf-head, .pf-row {
  display: grid; align-items: center; gap: 16px;
  grid-template-columns: minmax(230px, 1.7fr) 96px 150px minmax(260px, 2.6fr) 96px;
}
.pf-head { padding: 8px 16px; font-family: var(--disp); font-size: 10px; letter-spacing: 0.12em; color: var(--text-dim);
  border-bottom: 1px solid var(--border); }
.pf-head span:nth-child(2), .pf-head span:nth-child(5) { text-align: right; }
.pf-group {
  display: flex; align-items: baseline; gap: 14px; padding: 12px 16px 8px; margin-top: 14px;
  font-family: var(--disp); font-size: 12px; letter-spacing: 0.06em; color: var(--copper);
  border-bottom: 1px solid var(--border);
}
.pf-group em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--text-dim); }
.pf-group b { margin-left: auto; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--text); }
.pf-group i { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--good); min-width: 70px; text-align: right; }
.pf-row { padding: 11px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .15s; }
.pf-row:hover { background: var(--panel-alt); }
.pf-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.pf-name b { font-weight: 500; font-size: 14px; }
.pf-name small { flex-basis: 100%; font-size: 11px; color: var(--text-dim); }
.pf-badge {
  font-family: var(--disp); font-size: 9px; letter-spacing: 0.1em; padding: 2px 7px;
  color: var(--text-dim); border: 1px solid var(--border);
}
.pf-badge.pfc  { color: #7dd9a8; border-color: var(--savings-dim); background: rgba(76,177,125,0.1); }
.pf-badge.warn { color: var(--warn); border-color: #7a5f2a; background: rgba(227,169,75,0.1); }
.pf-badge.load { color: #4c8fb1; border-color: #2d5470; background: rgba(76,143,177,0.1); }
.pf-kw { text-align: right; font-family: var(--mono); font-size: 13px; }
.pf-kw i, .pf-nums i { font-style: normal; font-size: 10px; color: var(--copper); margin-left: 3px; }
.pf-pf { display: flex; align-items: center; gap: 8px; }
.pf-pf .arr { color: var(--text-dim); }
.pf-pill { font-family: var(--mono); font-size: 12.5px; font-weight: 600; padding: 3px 9px; border: 1px solid; }
.pf-pill.low  { color: #e39a66; border-color: #6b4126; background: rgba(198,121,63,0.12); }
.pf-pill.ok   { color: var(--warn); border-color: #7a5f2a; background: rgba(227,169,75,0.12); }
.pf-pill.good { color: #7dd9a8; border-color: var(--savings-dim); background: rgba(76,177,125,0.14); }
.pf-kva { display: flex; flex-direction: column; gap: 5px; }
.pf-track { position: relative; height: 10px; background: var(--panel-alt); border: 1px solid var(--border); }
.pf-track i { position: absolute; top: 0; bottom: 0; left: 0; display: block; }
.pf-track .unc { background: rgba(224,86,61,0.45); }
.pf-track .cor { background: var(--good); }
.pf-nums { font-family: var(--mono); font-size: 12px; color: var(--text-muted); }
.pf-nums b { color: var(--text); font-weight: 600; }
.pf-nums em { font-style: normal; color: var(--text-dim); }
.pf-save { text-align: right; font-family: var(--mono); font-size: 13px; color: var(--text-dim); }
.pf-save.yes { color: #7dd9a8; font-weight: 600; }

/* ---- PFC Opportunity + Value Check ---- */
.pf-sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 28px;
  margin: 36px 0 14px; padding-top: 22px; border-top: 1px solid var(--border); }
.pf-sec-head h3 { font-family: var(--disp); font-size: 16px; letter-spacing: 0.04em; margin-bottom: 6px; }
.pf-sec-head.opp h3 { color: var(--warn); }
.pf-sec-head.check h3 { color: var(--review); }
.pf-sec-head p { max-width: 680px; font-size: 12.5px; line-height: 1.55; color: var(--text-muted); text-transform: none; }

.pf-opp-total { display: flex; gap: 26px; }
.pf-opp-total div { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.pf-opp-total span { font-family: var(--disp); font-size: 10px; letter-spacing: 0.12em; color: var(--text-dim); }
.pf-opp-total b { font-family: var(--mono); font-size: 26px; font-weight: 600; color: var(--warn); white-space: nowrap; }
.pf-opp-total b i { font-style: normal; font-size: 12px; font-weight: 400; margin-left: 5px; }

.pf-badge.install { color: var(--warn); border-color: #7a5f2a; background: rgba(227, 169, 75, 0.12); }
.pf-badge.react   { color: #7dd9a8; border-color: var(--savings-dim); background: rgba(76, 177, 125, 0.14); }
.pf-badge.flagbadge { color: var(--review); border-color: var(--review-dim); background: rgba(176, 124, 198, 0.14); }
.pf-pill.good.ghost { opacity: 0.5; border-style: dashed; }
.pf-track .pot { background: var(--warn); }
.pf-save.opp { color: var(--warn); font-weight: 600; }

.pf-row.check { display: grid; align-items: center; gap: 16px; padding: 12px 16px;
  grid-template-columns: minmax(220px, 1.6fr) 90px minmax(260px, 2.6fr) 130px;
  border-bottom: 1px solid var(--border); cursor: pointer; border-left: 3px solid transparent; transition: background .15s, border-color .15s; }
.pf-row.check:hover { background: var(--panel-alt); border-left-color: var(--fc, var(--copper)); }
.pf-row.check.flag { background: rgba(176, 124, 198, 0.05); }
.pf-mix-bar { display: flex; height: 10px; border: 1px solid var(--border); background: var(--panel-alt); overflow: hidden; }
.pf-mix-bar i { display: block; height: 100%; }
.pf-mix-bar .vfd { background: var(--review); }
.pf-mix-bar .dol { background: var(--text-dim); opacity: 0.45; }
.pf-mix-bar .ss  { background: #4c8fb1; }
.pf-mix-bar .unknown { background: var(--border); }
.pf-mix-nums { margin-top: 5px; font-family: var(--mono); font-size: 11px; color: var(--text-muted); text-transform: none; }
.pf-mix-nums em { font-style: normal; color: var(--text-dim); margin-left: 6px; }
.pf-mix-nums i { font-style: normal; color: var(--text-dim); }
.pf-kva .pf-mix-nums { margin-top: 6px; }
.pf-benefit { text-align: right; }
.pf-benefit b { font-family: var(--mono); font-size: 19px; font-weight: 600; }
.pf-benefit span { display: block; font-size: 10px; color: var(--text-dim); text-transform: none; }
.pf-row.check.flag .pf-benefit b { color: var(--review); }

@media (max-width: 1100px) {
  .pf-hero { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
  .pf-hero2 { grid-template-columns: 1fr; }
  .lad-row { grid-template-columns: 48px 90px 1fr 84px; gap: 8px; }
  .pf-strip { grid-template-columns: repeat(2, 1fr); }
  .pf-head, .pf-row { grid-template-columns: minmax(170px, 1.5fr) 80px 130px minmax(160px, 2fr) 80px; gap: 10px; }
  .pf-row.check { grid-template-columns: minmax(170px, 1.5fr) 70px minmax(160px, 2fr) 100px; gap: 10px; }
}
@media (max-width: 820px) { #pfView { padding: 14px 16px 32px; } }

/* ============ SAVINGS & RETURNS PAGE ============ */
.sv-tariff {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; margin-bottom: 16px;
  padding: 12px 16px; background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--copper);
}
.sv-t-title { flex-basis: 100%; font-family: var(--disp); font-size: 11px; letter-spacing: 0.12em; color: var(--text-muted); }
.sv-t-title em { font-style: normal; font-family: var(--sans); letter-spacing: 0; text-transform: none; color: var(--text-dim); margin-left: 8px; }
.sv-tariff label { display: flex; flex-direction: column; gap: 4px; font-size: 10.5px; color: var(--text-dim); text-transform: none; }
.sv-tariff input {
  width: 150px; padding: 7px 10px; background: var(--bg); color: var(--text); font-family: var(--mono); font-size: 13px;
  border: 1px solid var(--border); outline: none;
}
.sv-tariff input:focus { border-color: var(--copper); }
.sv-tariff label:first-of-type input { width: 90px; }

.sv-hero { display: grid; grid-template-columns: 1.15fr 1.15fr 1fr; gap: 14px; margin-bottom: 26px; }
.sv-card {
  display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px 18px 14px; box-shadow: var(--shadow);
  background: linear-gradient(160deg, var(--panel) 0%, #141922 100%);
  border: 1px solid var(--border); border-top: 2px solid var(--savings);
}
.sv-card.pfc { border-top-color: #4c8fb1; }
.sv-card.total { border-top-color: var(--copper); }
.sv-tag { display: flex; justify-content: space-between; font-family: var(--disp); font-size: 11px; letter-spacing: 0.13em; color: var(--text-dim); }
.sv-tag span { font-family: var(--mono); letter-spacing: 0; font-size: 10.5px; color: var(--text-muted); }
.sv-big { font-family: var(--mono); font-size: 40px; font-weight: 600; line-height: 1; }
.sv-big i { font-style: normal; font-size: 14px; font-weight: 400; margin-left: 6px; color: var(--savings); }
.sv-card.pfc .sv-big i { color: #4c8fb1; }
.sv-card.total .sv-big { color: #f0b37a; }
.sv-big.dim { color: var(--text-dim); }
.sv-sub { font-size: 12px; color: var(--text-muted); }
.sv-sub b { color: var(--text); }
.sv-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.sv-cols div { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; background: var(--panel); min-width: 0; }
.sv-cols span { font-family: var(--disp); font-size: 9px; letter-spacing: 0.12em; color: var(--text-dim); }
.sv-cols b { font-family: var(--mono); font-size: 15px; font-weight: 600; white-space: nowrap; }
.sv-cols b i { font-style: normal; font-size: 9px; font-weight: 400; color: var(--copper); margin-left: 3px; }
.sv-cols em { font-style: normal; font-family: var(--mono); font-size: 11px; color: #7dd9a8; }
.sv-card.pfc .sv-cols em { color: var(--text-dim); font-size: 10px; text-transform: none; }
.sv-foot { font-size: 11px; color: var(--text-dim); text-transform: none; margin-top: auto; }
.sv-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sv-split div { display: flex; flex-direction: column; gap: 3px; padding-left: 10px; border-left: 2px solid var(--border); }
.sv-split span { font-family: var(--disp); font-size: 9.5px; letter-spacing: 0.12em; color: var(--text-dim); }
.sv-split b { font-family: var(--mono); font-size: 15px; }
.sv-plant { display: flex; flex-direction: column; gap: 5px; margin-top: auto; }
.sv-plant span { font-family: var(--disp); font-size: 9.5px; letter-spacing: 0.12em; color: var(--text-dim); }
.sv-plant b { font-family: var(--mono); font-size: 12px; color: var(--text-muted); font-weight: 400; }
.sv-pbar { display: flex; height: 12px; background: var(--panel-alt); border: 1px solid var(--border); }
.sv-pbar i { background: linear-gradient(90deg, var(--copper-dim), var(--copper)); }
.sv-pbar u { text-decoration: none; background: repeating-linear-gradient(45deg, var(--savings) 0 4px, var(--savings-dim) 4px 8px); }

.sv-sec {
  display: flex; align-items: center; gap: 14px; margin: 6px 0 12px;
  font-family: var(--disp); font-size: 12px; letter-spacing: 0.1em; color: var(--text-muted);
}
.sv-sec button {
  margin-left: auto; background: none; border: 1px solid var(--border); color: var(--text-muted); cursor: pointer;
  font-family: var(--disp); font-size: 10px; letter-spacing: 0.1em; padding: 6px 12px; outline: none;
}
.sv-sec button:hover { color: var(--text); background: var(--panel-alt); }
.sv-stack { display: flex; height: 34px; gap: 2px; margin-bottom: 10px; }
.sv-stack div { display: flex; align-items: center; justify-content: center; min-width: 0; }
.sv-stack span { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--bg); }
.sv-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 28px; font-size: 12px; color: var(--text-muted); text-transform: none; }
.sv-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 2px; }
.sv-legend b { color: var(--text); font-family: var(--mono); font-weight: 600; }

.sv-group {
  display: flex; align-items: baseline; gap: 14px; padding: 12px 16px 8px; margin-top: 12px;
  font-family: var(--disp); font-size: 13px; letter-spacing: 0.06em; border-bottom: 1px solid var(--border);
}
.sv-group em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--text-dim); }
.sv-group b { margin-left: auto; font-family: var(--mono); font-size: 13px; color: var(--text); }
.sv-item {
  display: grid; align-items: center; gap: 16px; padding: 11px 16px; cursor: pointer;
  grid-template-columns: minmax(220px, 1.6fr) minmax(120px, 1.4fr) 90px 150px 130px;
  border-bottom: 1px solid var(--border); transition: background .15s;
}
.sv-item:hover { background: var(--panel-alt); }
.sv-name b { font-weight: 500; font-size: 14px; }
.sv-name small { display: block; font-size: 11px; color: var(--text-dim); text-transform: none; }
.sv-bar { height: 10px; background: var(--panel-alt); border: 1px solid var(--border); position: relative; }
.sv-bar i { position: absolute; inset: 0 auto 0 0; display: block; }
.sv-kw, .sv-mwh, .sv-mon { text-align: right; font-family: var(--mono); font-size: 13px; }
.sv-kw { font-weight: 600; }
.sv-kw i, .sv-mwh i, .sv-mon i, .sv-pfrow b i { font-style: normal; font-size: 9.5px; color: var(--copper); margin-left: 4px; font-weight: 400; }
.sv-mwh { color: var(--text-muted); }
.sv-mon { color: #f0b37a; }
.sv-pfrows { display: flex; flex-direction: column; }
.sv-pfrow {
  display: grid; align-items: center; gap: 16px; padding: 9px 16px; border-bottom: 1px solid var(--border);
  grid-template-columns: minmax(230px, 1.6fr) minmax(160px, 2fr) 110px;
}
.sv-pfrow .n { font-size: 14px; }
.sv-pfrow .n small { margin-left: 10px; font-size: 10.5px; color: var(--text-dim); }
.sv-pfrow b { text-align: right; font-family: var(--mono); font-size: 13px; }
.sv-note { margin: 12px 16px 0; font-size: 12px; color: var(--text-dim); text-transform: none; line-height: 1.5; }

@media (max-width: 1100px) {
  .sv-hero { grid-template-columns: 1fr; }
  .sv-item { grid-template-columns: minmax(160px, 1.5fr) minmax(80px, 1fr) 80px 110px 100px; gap: 10px; }
}

/* ============ RESPONSIVE (must stay last) ============ */

@media (max-width: 900px) {
  #feederCards { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
  header { padding: 12px 16px 14px; }
  .hd-top { margin-bottom: 12px; gap: 12px; }
  header h1 { white-space: normal; flex-wrap: wrap; row-gap: 0; }
  .hd-logo { width: 28px; height: 28px; }
  .hd-sub::before { display: none; }
  .hd-sub { flex-basis: 100%; font-size: 11px; }
  .hd-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hs-load { grid-column: 1 / -1; }
  .hs-val { font-size: 23px; }
  #liveClock { min-width: 0; padding: 6px 12px 8px; }
  #clockTime { font-size: 20px; }

  #feederCards { grid-template-columns: repeat(2, 1fr); margin: 12px; }
  .feeder-card { padding: 14px 12px 16px; gap: 6px; }
  .fc-name { font-size: 10px; line-height: 1.3; }
  .fc-mw { font-size: 20px; }


  #plantTabs button { padding: 12px 14px; font-size: 11px; }

  #rankRow { flex-direction: column; }
  #rankRow > section { width: auto; }

  /* Table scrolls sideways rather than crushing 7 columns onto a phone */
  #equipmentTable {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    width: auto;
    margin: 0 16px 24px;
    table-layout: auto;
  }
  #equipmentTable th, #equipmentTable td { min-width: 90px; }
  #equipmentTable th:nth-child(1), #equipmentTable td:nth-child(1) { min-width: 150px; }

  #summaryTrio { grid-template-columns: 1fr; }
  #flowView { padding: 14px 16px 32px; }
  #breadcrumb { padding: 0 16px; flex-wrap: wrap; }
}

@media (max-width: 480px) {
  #feederCards { grid-template-columns: 1fr; }
}
/* ============ COLUMN ALIGNMENT ============ */
/* Header and body MUST match per column, or the header sits in a
   different place than the values under it. */

#equipmentTable thead th:nth-child(1),
#equipmentTable tbody td:nth-child(1) { text-align: center !important; }

#equipmentTable thead th:nth-child(2),
#equipmentTable tbody td:nth-child(2) { text-align: center !important; }

#equipmentTable thead th:nth-child(3),
#equipmentTable tbody td:nth-child(3) { text-align: center !important; }

#equipmentTable thead th:nth-child(4),
#equipmentTable tbody td:nth-child(4) { text-align: center !important; }

#equipmentTable thead th:nth-child(5),
#equipmentTable tbody td:nth-child(5) { text-align: center !important; }

#equipmentTable thead th:nth-child(6),
#equipmentTable tbody td:nth-child(6) { text-align: left !important; }

#equipmentTable thead th:nth-child(7),
#equipmentTable tbody td:nth-child(7) { text-align: center !important; }

#equipmentTable thead th,
#equipmentTable tbody td {
  border-right: none;
  padding: 13px 14px !important;
}
.savings-modal{
  display:none; position:fixed; inset:0; z-index:100;
  background:rgba(0,0,0,.6);
  align-items:center; justify-content:center;
}
.savings-modal.open{ display:flex; }

.savings-card{
  background:var(--panel); border:1px solid var(--border);
  border-top:3px solid var(--savings);
  width:min(560px, 90vw); max-height:80vh; overflow-y:auto;
}
.savings-card-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:22px 24px 16px; border-bottom:1px solid var(--border);
}
.savings-card-title{
  font-family:var(--disp); font-size:13px; letter-spacing:.08em; color:var(--text-muted);
}
.savings-card-total{
  font-family:var(--mono); font-size:28px; font-weight:600; color:var(--savings);
  margin-top:6px;
}
.savings-close{
  background:none; border:1px solid var(--border); color:var(--text-muted);
  width:30px; height:30px; font-size:18px; line-height:1; cursor:pointer;
}
.savings-close:hover{ color:var(--text); border-color:var(--savings); }

.savings-card-body{ padding:8px 24px 24px; }
.savings-group-name{
  font-family:var(--disp); font-size:11px; letter-spacing:.06em; color:var(--copper);
  margin:18px 0 8px; display:flex; justify-content:space-between;
}
.savings-row{
  display:flex; justify-content:space-between; gap:14px;
  padding:9px 0; border-bottom:1px solid var(--border); font-size:13px;
}
.savings-row-name{ color:var(--text); }
.savings-row-note{ font-size:11px; color:var(--text-dim); margin-top:2px; }
.savings-row-val{
  font-family:var(--mono); font-size:13px; font-weight:600; color:var(--text);
  white-space:nowrap; flex-shrink:0;
}
/* ---------- savings page ---------- */
#savingsView { padding: 24px 28px 48px; }

#savingsSummary{
  display:flex; align-items:baseline; gap:14px;
  margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid var(--border);
}
#savingsSummary .big{
  font-family:var(--mono); font-size:30px; font-weight:600; color:var(--savings);
}
#savingsSummary .sub{ font-size:12px; color:var(--text-dim); }

.savings-group{ margin-bottom:26px; }
.savings-group-head{
  font-family:var(--disp); font-size:12px; letter-spacing:.05em; color:var(--copper);
  display:flex; justify-content:space-between;
  margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--border);
}

/* card, matching .feeder-card's own visual language */
.savings-item{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  background: linear-gradient(160deg, var(--panel) 0%, var(--panel-alt) 100%);
  border-left:3px solid var(--savings-dim);
  padding:16px 18px; margin-bottom:1px; cursor:pointer;
  transition: background .2s, border-left-color .2s, transform .12s;
}
.savings-item:hover{
  background: linear-gradient(160deg, var(--panel-alt) 0%, var(--panel) 100%);
  border-left-color: var(--savings);
  transform: translateX(3px);
}
.savings-item-name{ font-size:14px; color:var(--text); }
.savings-item-note{ font-size:11px; color:var(--text-dim); margin-top:4px; }
.savings-item-val{
  font-family:var(--mono); font-size:16px; font-weight:600; color:var(--text);
  white-space:nowrap; flex-shrink:0;
}


/* ==========================================================================
   UNIFIED DESIGN v2
   One colour per feeder (--fc, set from colors.js) carried through the tabs,
   cards, tables, rank blocks, flow, savings and P.F. Children use tints (--rc).
   ========================================================================== */
:root { --lift: 0 8px 22px rgba(0, 0, 0, 0.4); }

/* ---- feeder tabs ---- */
#plantTabs { padding: 0 16px; gap: 2px; background: linear-gradient(180deg, #131923, var(--panel)); }
#plantTabs button {
  --fc: var(--copper);
  display: flex; align-items: center; gap: 10px;
  padding: 15px 18px; border-right: none; border-radius: 0;
}
#plantTabs button::before {
  content: ''; width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--fc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc) 20%, transparent);
}
#plantTabs button::after { height: 3px; background: var(--fc); }
#plantTabs button:hover { color: var(--text); background: color-mix(in srgb, var(--fc) 10%, transparent); }
#plantTabs button:hover::after { transform: scaleX(1); }
#plantTabs button.active {
  color: var(--text); font-weight: 500;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--fc) 24%, transparent));
}
#plantTabs button.active::after { transform: scaleX(1); }

/* ---- Energy Flow / Savings / P.F. tabs ---- */
#flowTabRow { padding: 18px 28px 0; margin-top: 0; gap: 12px; }
.mode-tab {
  --fc: var(--copper);
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 22px 10px 14px; cursor: pointer; outline: none;
  background: linear-gradient(160deg, var(--panel), #141922);
  border: 1px solid var(--border); border-left: 3px solid var(--fc);
  color: var(--text-muted); font-family: var(--disp); font-size: 13px; letter-spacing: 0.06em;
  transition: transform .15s, box-shadow .2s, color .15s, background .2s;
}
.mode-tab svg { width: 18px; height: 18px; fill: none; stroke: var(--fc); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mode-tab:hover { color: var(--text); transform: translateY(-2px); box-shadow: var(--lift); }
#flowTab.active, #savingsTab.active, #pfTab.active {
  color: var(--text); border-color: var(--fc);
  background: linear-gradient(160deg, color-mix(in srgb, var(--fc) 34%, var(--panel)), color-mix(in srgb, var(--fc) 10%, #141922));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fc) 40%, transparent), var(--shadow);
}

/* ---- home: site strip + feeder cards ---- */
#siteStrip { margin: 22px 28px 0; }
.ss-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 8px;
  font-family: var(--disp); font-size: 12px; letter-spacing: 0.1em; color: var(--text-muted); }
.ss-head em { font-style: normal; font-family: var(--sans); letter-spacing: 0; font-size: 11px; color: var(--text-dim); text-transform: none; }
.ss-bar { display: flex; height: 36px; gap: 2px; }
.ss-bar div {
  flex: none; min-width: 3px; display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: linear-gradient(180deg, color-mix(in srgb, var(--fc) 100%, #fff 12%), var(--fc));
  transition: filter .15s, transform .15s;
}
.ss-bar div:hover { filter: brightness(1.2); transform: scaleY(1.14); }
.ss-bar span { font-family: var(--mono); font-size: 12px; font-weight: 600; color: rgba(0, 0, 0, 0.72); }

#feederCards {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
  background: none; border: none; margin: 16px 28px 26px;
}
.feeder-card {
  --fc: var(--copper);
  gap: 8px; padding: 16px 16px 14px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--fc) 13%, var(--panel)) 0%, #141922 72%);
  border: 1px solid var(--border); border-left: 4px solid var(--fc);
  box-shadow: var(--shadow);
}
.feeder-card:hover {
  transform: translateY(-3px); border-left-color: var(--fc);
  background: linear-gradient(160deg, color-mix(in srgb, var(--fc) 22%, var(--panel)) 0%, #141922 72%);
  box-shadow: var(--lift), 0 0 0 1px color-mix(in srgb, var(--fc) 50%, transparent);
}
.fc-name { color: var(--text); font-size: 12px; letter-spacing: 0.06em; }
.fc-mw { display: flex; align-items: baseline; gap: 6px; font-size: 29px; line-height: 1.05; }
.fc-mw i { font-style: normal; font-size: 12px; font-weight: 400; color: var(--fc); }
.fc-bar { align-self: stretch; height: 5px; background: rgba(255, 255, 255, 0.07); position: relative; }
.fc-bar i { position: absolute; inset: 0 auto 0 0; background: var(--fc); display: block; }
.fc-meta { align-self: stretch; display: flex; justify-content: space-between; gap: 8px;
  font-family: var(--mono); font-size: 10.5px; color: var(--text-muted); text-transform: none; }
.fc-meta b { color: var(--fc); font-weight: 600; }

/* ---- the three rank blocks ---- */
#rankRow { gap: 14px; background: none; border: none; margin: 0 28px 28px; }
#rankRow section {
  padding: 16px 18px 10px; box-shadow: var(--shadow);
  background: linear-gradient(160deg, var(--panel), #141922);
  border: 1px solid var(--border); border-top: 2px solid var(--copper);
}
#rankRow h2 { display: flex; align-items: center; gap: 10px; }
#rankRow h2::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--copper); }
.rankitem {
  display: flex; align-items: center; gap: 12px; padding: 10px 8px; margin: 0 -8px;
  border-left: 3px solid transparent; transition: background .15s, border-color .15s;
}
.rankitem:hover { background: color-mix(in srgb, var(--fc) 9%, transparent); border-left-color: var(--fc); }
.rank-n {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--fc);
  border: 1px solid color-mix(in srgb, var(--fc) 45%, transparent);
  background: color-mix(in srgb, var(--fc) 12%, transparent);
}
.rank-body { flex: 1; min-width: 0; }
.rankitem-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rankitem-tag {
  flex: none; margin: 0; padding: 1px 7px; border-radius: 2px; font-size: 8.5px;
  color: var(--fc); background: color-mix(in srgb, var(--fc) 14%, transparent);
}
.rankitem-track { border-color: color-mix(in srgb, var(--fc) 25%, var(--border)); }
.rankitem-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--fc) 50%, #000), var(--fc)); }

/* ---- feeder view: banner, breadcrumb, summary, table ---- */
#feederView { --fc: var(--copper); }
#feederHead {
  display: flex; align-items: center; gap: 16px; margin: 20px 28px 0; padding: 16px 20px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--fc) 26%, var(--panel)) 0%, #141922 70%);
  border: 1px solid var(--border); border-left: 5px solid var(--fc); box-shadow: var(--shadow);
}
#feederHead .fh-mark { width: 12px; height: 12px; border-radius: 50%; background: var(--fc); box-shadow: 0 0 0 5px color-mix(in srgb, var(--fc) 25%, transparent); }
#feederHead h2 { font-family: var(--disp); font-size: 20px; font-weight: 600; letter-spacing: 0.05em; }
#feederHead .fh-meta { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--text-muted); text-transform: none; }
#feederHead .fh-meta b { font-size: 20px; color: var(--text); }

#breadcrumb { padding: 16px 28px 0; gap: 6px; flex-wrap: wrap; }
#breadcrumb button {
  padding: 6px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 2px;
  color: var(--text-muted); font-size: 11.5px; transition: background .15s, border-color .15s, color .15s;
}
#breadcrumb button:hover { color: var(--text); border-color: var(--fc); background: color-mix(in srgb, var(--fc) 10%, var(--panel)); }
#breadcrumb button.crumb-current {
  color: var(--text); font-weight: 600; border-color: var(--fc);
  background: linear-gradient(160deg, color-mix(in srgb, var(--fc) 32%, var(--panel)), color-mix(in srgb, var(--fc) 10%, var(--panel)));
}
.crumb-sep { color: var(--fc); opacity: 0.75; }

#summaryTrio { gap: 12px; border: none; margin: 18px 28px 22px; }
.trio-cell {
  border: 1px solid var(--border); border-top: 2px solid var(--fc); padding: 14px 18px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--fc) 10%, var(--panel)), #141922);
}
.trio-cell:last-child { border-right: 1px solid var(--border); }
.trio-value { font-size: 26px; font-weight: 600; }

#equipmentTable {
  border-collapse: separate; border-spacing: 0;
  background: linear-gradient(160deg, var(--panel), #141922);
  border: 1px solid var(--border); border-top: 2px solid var(--fc); box-shadow: var(--shadow);
}
#equipmentTable thead th {
  background: color-mix(in srgb, var(--fc) 12%, var(--panel-alt));
  border-bottom: 2px solid var(--fc); border-right: none; letter-spacing: 0.12em; font-size: 10.5px;
}
#equipmentTable tbody td { border-right: none; border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, transparent); }
#equipmentTable tbody tr { transition: background .15s; }
#equipmentTable tbody tr:hover { background: color-mix(in srgb, var(--rc, var(--fc)) 11%, transparent); }
#equipmentTable tbody tr td:first-child { border-left: 3px solid transparent; }
#equipmentTable tbody tr.drillable td:first-child,
#equipmentTable tbody tr:hover td:first-child { border-left-color: var(--rc, var(--fc)); }
#equipmentTable .nm { display: inline-flex; align-items: center; gap: 9px; }
#equipmentTable .dot {
  flex: none; width: 9px; height: 9px; border-radius: 2px; background: var(--rc, var(--fc));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rc, var(--fc)) 28%, transparent);
}
.row-chevron { color: var(--rc, var(--fc)); }
.rh {
  display: inline-flex; align-items: baseline; gap: 2px; padding: 2px 8px;
  font-family: var(--mono); font-size: 12px; background: var(--bg); border: 1px solid var(--border);
}
.rh i { font-style: normal; font-size: 9px; color: var(--text-dim); }
.ds { color: var(--text-muted); font-size: 12px; }
.nv { font-family: var(--mono); font-size: 13.5px; font-weight: 600; color: var(--text); }
.rm {
  display: inline-block; padding: 2px 8px; font-size: 11px; color: var(--text-muted);
  border-left: 2px solid var(--fc); background: color-mix(in srgb, var(--fc) 10%, transparent);
}
#equipmentTable .share-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--rc, var(--fc)) 50%, #000), var(--rc, var(--fc))); }
#equipmentTable .share-track { border-color: color-mix(in srgb, var(--rc, var(--fc)) 30%, var(--border)); }
#equipmentTable tbody tr.highlighted {
  background: color-mix(in srgb, var(--fc) 17%, transparent);
  box-shadow: none; animation: hlPulse 1.5s ease-out;
}
#equipmentTable tbody tr.highlighted td:first-child { border-left-color: var(--fc); }
@keyframes hlPulse { 0% { background: color-mix(in srgb, var(--fc) 50%, transparent); } 100% { background: color-mix(in srgb, var(--fc) 17%, transparent); } }
#equipmentTable td[colspan] { text-align: center; color: var(--text-dim); padding: 30px !important; }
#feederView .notes-panel { border-left-color: var(--fc); background: linear-gradient(160deg, color-mix(in srgb, var(--fc) 7%, var(--panel)), #141922); }

/* ---- P.F. and Savings pages: same feeder colours ---- */
.pf-group { color: var(--fc, var(--copper)); }
.pf-group::before { content: ''; align-self: center; width: 9px; height: 9px; border-radius: 2px; background: var(--fc, var(--copper)); }
.pf-row { border-left: 3px solid transparent; }
.pf-row:hover { border-left-color: var(--fc, var(--copper)); }
.sv-hero { grid-template-columns: 1fr 1fr; }
.sv-group { color: var(--fc, var(--copper)); }
.sv-group::before { content: ''; align-self: center; width: 9px; height: 9px; border-radius: 2px; background: var(--fc, var(--copper)); }
.sv-item { border-left: 3px solid transparent; }
.sv-item:hover { border-left-color: var(--fc); }
.sv-bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--fc, var(--savings)) 50%, #000), var(--fc, var(--savings))); }

/* ---- responsive for the new pieces ---- */
@media (max-width: 1100px) { .sv-hero { grid-template-columns: 1fr; } }
@media (max-width: 900px) { #feederCards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) {
  #siteStrip { margin: 14px 12px 0; }
  #feederCards { grid-template-columns: repeat(2, 1fr); margin: 12px; }
  #rankRow { margin: 0 12px 24px; }
  #feederHead { margin: 14px 16px 0; padding: 12px 14px; }
  #feederHead h2 { font-size: 16px; }
  #feederHead .fh-meta { display: none; }
  #summaryTrio { margin: 14px 16px 20px; grid-template-columns: 1fr; }
  #flowTabRow { padding: 14px 16px 0; flex-wrap: wrap; }
  #plantTabs button { padding: 12px 14px; }
}
@media (max-width: 480px) { #feederCards { grid-template-columns: 1fr; } }

/* ---- equipment table: first column is a straight, left-aligned list ----
   (the dots line up in one vertical row; the chevron sits at the far right of the cell) */
#equipmentTable thead th:nth-child(1),
#equipmentTable tbody td:nth-child(1) { text-align: left !important; }
#equipmentTable thead th:nth-child(1) { padding-left: 21px !important; }
#equipmentTable tbody td:nth-child(1) { padding-left: 14px !important; }
#equipmentTable .nmrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#equipmentTable .nm { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
#equipmentTable .nt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#equipmentTable .row-chevron { flex: none; }

/* ---- "back to Home" bar at the top of Energy Flow, Savings and P.F. ---- */
.page-crumb { display: flex; align-items: center; gap: 8px; margin: -4px 0 16px; }
.page-crumb button {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; cursor: pointer; outline: none;
  background: var(--panel); border: 1px solid var(--border); color: var(--text-muted);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.page-crumb button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.page-crumb button:hover { color: var(--text); border-color: var(--copper); background: color-mix(in srgb, var(--copper) 12%, var(--panel)); transform: translateX(-2px); }
.page-crumb .sep { color: var(--text-dim); }
.page-crumb .here { padding: 7px 14px; border: 1px solid var(--fc, var(--copper)); color: var(--text); font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  background: linear-gradient(160deg, color-mix(in srgb, var(--fc, var(--copper)) 30%, var(--panel)), color-mix(in srgb, var(--fc, var(--copper)) 10%, var(--panel))); }

/* ==========================================================================
   DESKTOP LEADERBOARD + CARD-ROW TABLE (same language as the mobile app)
   ========================================================================== */
@keyframes lbRise { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes lbStep { from { transform: scaleY(.04); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes lbGrow { from { transform: scaleX(0); } }
@keyframes ringIn { from { stroke-dasharray: 0 200; } }
@media (prefers-reduced-motion: reduce) { .lb-row, .lb-step, .lb-bar i, .eq-row, .eq-ring .f { animation: none !important; } }

/* sliding pill (shared by the leaderboard) */
.seg2 {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; width: 400px; max-width: 100%;
  border-radius: 14px; background: var(--panel); border: 1px solid var(--border);
}
.seg2 button {
  position: relative; z-index: 1; background: none; border: none; outline: none; cursor: pointer; color: var(--text-dim);
  font-family: var(--disp); font-size: 12px; letter-spacing: 0.1em; padding: 11px 6px; transition: color .25s;
}
.seg2 button:hover { color: var(--text); }
.seg2 button.on { color: #10141a; font-weight: 600; }
.seg2-thumb {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 10px;
  background: linear-gradient(135deg, #e3a94b, #c6793f); box-shadow: 0 4px 14px rgba(198, 121, 63, 0.45);
  transform: translateX(calc(var(--ti, 0) * 100%)); transition: transform .34s cubic-bezier(.3, .9, .3, 1);
}

/* ---- leaderboard ---- */
#leaderboard {
  margin: 0 28px 28px; padding: 22px 24px 26px; box-shadow: var(--shadow);
  background: linear-gradient(160deg, var(--panel), #141922);
  border: 1px solid var(--border); border-top: 2px solid var(--copper);
}
.lb-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.lb-head h2 { font-family: var(--disp); font-size: 20px; letter-spacing: 0.08em; }
.lb-head p { margin-top: 4px; font-size: 12px; color: var(--text-dim); text-transform: none; }
.lb-body { display: grid; grid-template-columns: minmax(400px, 0.95fr) 1.4fr; gap: 30px; align-items: end; }

.lb-podium { display: grid; grid-template-columns: 1fr 1.14fr 1fr; align-items: end; gap: 10px; }
.lb-pod { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; min-width: 0; cursor: pointer; transition: transform .18s; }
.lb-pod:hover { transform: translateY(-4px); }
.lb-medal {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; font-size: 15px; color: #10141a;
}
.lb-pod.p1 .lb-medal { width: 44px; height: 44px; font-size: 19px; }
.lb-medal.gold   { background: linear-gradient(135deg, #f6d365, #e3a94b); box-shadow: 0 0 0 4px rgba(227, 169, 75, 0.22), 0 0 22px rgba(227, 169, 75, 0.45); }
.lb-medal.silver { background: linear-gradient(135deg, #eef2f6, #9aa6b2); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.07); }
.lb-medal.bronze { background: linear-gradient(135deg, #e6a877, #b06c3a); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06); }
.lb-pname { font-size: 13px; line-height: 1.3; min-height: 3.9em; overflow-wrap: anywhere; display: flex; align-items: flex-end; justify-content: center; }
.lb-pval { font-family: var(--mono); font-size: 18px; font-weight: 600; white-space: nowrap; }
.lb-pod.p1 .lb-pval { font-size: 24px; }
.lb-pval i, .lb-rval i { font-style: normal; font-size: 10px; font-weight: 400; color: var(--fc); margin-left: 4px; }
.lb-ptag {
  font-family: var(--disp); font-size: 9.5px; letter-spacing: 0.1em; padding: 3px 11px; border-radius: 999px;
  color: var(--fc); background: color-mix(in srgb, var(--fc) 16%, transparent);
}
.lb-step {
  width: 100%; border-radius: 16px 16px 0 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--fc) 80%, #fff 6%), color-mix(in srgb, var(--fc) 20%, var(--panel)));
  transform-origin: bottom; animation: lbStep .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 100ms);
}
.lb-step span { font-family: var(--mono); font-size: 14px; font-weight: 700; color: rgba(0, 0, 0, 0.62); }

.lb-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: end; }
.lb-row {
  display: flex; gap: 14px; align-items: flex-start; padding: 13px 14px; border-radius: 12px; cursor: pointer;
  background: linear-gradient(90deg, color-mix(in srgb, var(--fc) 10%, var(--panel)), var(--panel) 62%);
  border: 1px solid var(--border); border-left: 3px solid var(--fc);
  animation: lbRise .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms + 150ms);
  transition: transform .18s, box-shadow .2s, background .2s;
}
.lb-row:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--fc) 15%, var(--panel)); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); }
.lb-n {
  flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--fc);
  background: color-mix(in srgb, var(--fc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--fc) 40%, transparent);
}
.lb-rb { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lb-rtop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.lb-rname { font-size: 13.5px; line-height: 1.3; overflow-wrap: anywhere; }
.lb-rval { font-family: var(--mono); font-size: 14px; font-weight: 600; white-space: nowrap; }
.lb-bar { height: 6px; border-radius: 3px; background: var(--panel-alt); overflow: hidden; }
.lb-bar i {
  display: block; height: 100%; border-radius: 3px; transform-origin: left;
  background: linear-gradient(90deg, color-mix(in srgb, var(--fc) 50%, #000), var(--fc));
  animation: lbGrow .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms + 300ms);
}
.lb-rmeta { display: flex; justify-content: space-between; gap: 10px; font-size: 10.5px; color: var(--text-dim); }
.lb-rtag { color: var(--fc); font-family: var(--disp); letter-spacing: 0.06em; }

/* ---- equipment table as card rows ---- */
.eq-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 28px 14px; }
.eq-count { font-family: var(--mono); font-size: 11px; color: var(--text-dim); margin-right: 4px; }
.eq-chips { display: flex; gap: 8px; }
.eq-chips button {
  padding: 8px 15px; border-radius: 999px; cursor: pointer; outline: none; background: var(--panel); border: 1px solid var(--border);
  color: var(--text-muted); font-family: var(--disp); font-size: 11px; letter-spacing: 0.1em; transition: all .2s;
}
.eq-chips button:hover { color: var(--text); border-color: var(--fc); }
.eq-chips button.on { color: #10141a; font-weight: 600; border-color: transparent; background: linear-gradient(135deg, #e3a94b, #c6793f); }
.eq-filter {
  margin-left: auto; display: flex; align-items: center; gap: 9px; padding: 8px 15px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--border); transition: border-color .2s;
}
.eq-filter:focus-within { border-color: var(--fc); }
.eq-filter svg { width: 15px; height: 15px; fill: none; stroke: var(--text-dim); stroke-width: 2; stroke-linecap: round; }
.eq-filter input { width: 220px; background: none; border: none; outline: none; color: var(--text); font-family: var(--mono); font-size: 12.5px; text-transform: none; }

#eqTable { margin: 0 28px 28px; }
.eq-head, .eq-row {
  display: grid; align-items: center; gap: 20px;
  grid-template-columns: minmax(270px, 2.1fr) minmax(200px, 1.7fr) 90px minmax(170px, 1.2fr) 120px minmax(190px, 1.6fr);
}
.eq-head {
  padding: 13px 20px; border-top: 2px solid var(--fc); border-bottom: 2px solid var(--fc);
  background: color-mix(in srgb, var(--fc) 12%, var(--panel-alt));
  font-family: var(--disp); font-size: 10.5px; letter-spacing: 0.12em;
}
.eq-head .c { text-align: center; }
.eq-row {
  padding: 13px 20px; margin-top: 8px; border-radius: 12px; min-height: 68px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--rc, var(--fc)) 10%, var(--panel)), var(--panel) 58%);
  border: 1px solid var(--border); border-left: 4px solid var(--rc, var(--fc));
  animation: lbRise .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 28ms);
  transition: transform .16s, box-shadow .2s, background .2s;
}
.eq-row.drillable { cursor: pointer; }
.eq-row:hover { background: color-mix(in srgb, var(--rc, var(--fc)) 14%, var(--panel)); }
.eq-row.drillable:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38); }
.eq-row.highlighted {
  box-shadow: 0 0 0 1px var(--fc), 0 0 28px color-mix(in srgb, var(--fc) 42%, transparent);
  background: color-mix(in srgb, var(--fc) 16%, var(--panel));
}
.eq-c { min-width: 0; }
.eq-name { display: flex; align-items: center; gap: 14px; }
.eq-ring { position: relative; flex: none; width: 48px; height: 48px; }
.eq-ring svg { width: 48px; height: 48px; transform: rotate(-90deg); }
.eq-ring .t { fill: none; stroke: var(--panel-alt); stroke-width: 4.5; }
.eq-ring .f { fill: none; stroke: var(--rc, var(--fc)); stroke-width: 4.5; stroke-linecap: round; animation: ringIn .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 28ms + 150ms); }
.eq-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--mono); font-size: 10.5px; font-weight: 600; }
.eq-nm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* the full name, always - it wraps instead of being cut off */
.eq-title { font-size: 14.5px; font-weight: 500; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
.eq-sub { font-size: 11px; color: var(--text-dim); }
.eq-row .row-chevron { flex: none; font-size: 15px; }
.eq-desc .ds, .eq-rem .rm { display: block; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
.eq-desc .ds { color: var(--text-muted); font-size: 12.5px; }
.eq-rem .rm { font-size: 12px; }
.eq-run, .eq-kwh { text-align: center; }
.eq-load { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.eq-lbar { width: 100%; max-width: 150px; height: 5px; border-radius: 3px; background: var(--panel-alt); overflow: hidden; }
.eq-lbar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--rc, var(--fc)) 50%, #000), var(--rc, var(--fc))); }
.eq-share { font-family: var(--mono); font-size: 10.5px; color: var(--text-dim); text-transform: none; }
.eq-row .nv { font-size: 15px; }
.eq-row .na { font-style: normal; color: var(--text-dim); }
.eq-empty { margin-top: 8px; padding: 34px; text-align: center; color: var(--text-dim); background: var(--panel); border: 1px dashed var(--border); border-radius: 12px; }

/* mark a leaf as not running right now - see equipstatus.js */
.eq-toggle {
  flex: none; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .04em;
  border: 1px solid var(--border); border-radius: 20px; padding: 4px 10px; cursor: pointer;
  background: var(--panel-alt); color: var(--text-dim);
}
.eq-toggle:hover { border-color: var(--rc, var(--fc)); color: var(--text); }
.eq-toggle.is-off { background: color-mix(in srgb, #c9a227 22%, var(--panel-alt)); border-color: #c9a227; color: #c9a227; }
.eq-off-tag { color: #c9a227; }
.eq-row.is-off { opacity: 0.62; border-left-color: #c9a227; }
.eq-row.is-off .eq-ring .f { stroke: #c9a227; }

/* ============ SINGLE LINE / LOAD FLOW (sld-view.js) ============ */
.sld { margin-top: 8px; }
.sld-buses { display: flex; align-items: flex-start; gap: 4px; }
.sld-bus-block { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; }
.sld-gens { display: flex; justify-content: center; gap: 10px; margin-bottom: 8px; }
.sld-gen {
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 16px; text-align: center;
  background: linear-gradient(160deg, var(--panel), #141922);
}
.sld-gen b { display: block; font-family: var(--mono); font-size: 15px; color: var(--copper); }
.sld-gen span { font-family: var(--mono); font-size: 10px; color: var(--text-dim); }
.sld-bus-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: linear-gradient(90deg, var(--copper-dim), var(--copper)); color: var(--bg);
  border-radius: 6px; padding: 7px 14px; margin-bottom: 18px; font-family: var(--disp);
}
.sld-bus-bar span { font-size: 11px; letter-spacing: 0.08em; font-weight: 600; }
.sld-bus-bar em { font-style: normal; font-family: var(--mono); font-size: 11px; opacity: 0.85; }
.sld-tie {
  flex: none; align-self: center; display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 0 10px; margin-top: 34px;
}
.sld-tie-line { width: 26px; height: 2px; background: repeating-linear-gradient(90deg, var(--copper) 0 6px, transparent 6px 12px); animation: sldFlow 1s linear infinite; }
.sld-tie b { font-family: var(--disp); font-size: 9px; letter-spacing: 0.08em; color: var(--text-dim); white-space: nowrap; }
.sld-feeders { display: flex; flex-wrap: wrap; gap: 16px 10px; justify-content: center; }
.sld-feeder { flex: 1 1 150px; max-width: 220px; display: flex; flex-direction: column; align-items: stretch; cursor: pointer; }
.sld-stem {
  width: 3px; height: 18px; margin: 0 auto; background: repeating-linear-gradient(180deg, var(--fc) 0 5px, transparent 5px 10px);
  animation: sldFlow 0.7s linear infinite;
}
.sld-feeder-card {
  border: 1px solid var(--border); border-top: 3px solid var(--fc); border-radius: 10px; padding: 10px 12px;
  background: linear-gradient(160deg, var(--panel), #141922); transition: border-color .15s, transform .15s;
}
.sld-feeder:hover .sld-feeder-card { border-color: var(--fc); transform: translateY(-2px); }
.sld-feeder-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sld-feeder-top b { font-size: 13px; font-weight: 500; }
.sld-feeder-top span { font-family: var(--mono); font-size: 12px; color: var(--fc); white-space: nowrap; }
.sld-feeder-bar { height: 4px; border-radius: 2px; background: var(--panel-alt); overflow: hidden; margin: 6px 0 5px; }
.sld-feeder-bar i { display: block; height: 100%; background: var(--fc); }
.sld-feeder-meta { font-family: var(--mono); font-size: 10px; color: var(--text-dim); }
.sld-feeder.open .sld-feeder-meta em { display: inline-block; transform: rotate(180deg); }
.sld-xf-list { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 5px; }
.sld-xf-row { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; cursor: pointer; }
.sld-xf-row:hover .sld-xf-name { color: var(--fc); }
.sld-xf-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); }
.sld-xf-dot.pfc { background: #7dd9a8; }
.sld-xf-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
.sld-xf-kw { color: var(--text); white-space: nowrap; }
.sld-xf-pct { color: #4c8fb1; white-space: nowrap; }
.sld-xf-pct.warn { color: var(--warn); }
.sld-xf-empty { font-family: var(--mono); font-size: 10px; color: var(--text-dim); }
@keyframes sldFlow { from { background-position: 0 0; } to { background-position: 12px 0; } }
.sld-tie .sld-tie-line { background-position: 0 0; }
@media (prefers-reduced-motion: reduce) { .sld-tie-line, .sld-stem { animation: none; } }

@media (max-width: 900px) {
  .sld-buses { flex-direction: column; }
  .sld-tie { flex-direction: row; margin: 6px 0; align-self: center; }
  .sld-tie-line { width: 2px; height: 18px; background: repeating-linear-gradient(180deg, var(--copper) 0 6px, transparent 6px 12px); }
}

@media (max-width: 1250px) {
  .lb-body { grid-template-columns: 1fr; }
  .lb-rows { grid-template-columns: 1fr 1fr; }
  .eq-head, .eq-row { grid-template-columns: minmax(230px, 2fr) minmax(160px, 1.4fr) 70px 140px 100px minmax(150px, 1.3fr); gap: 14px; }
}
@media (max-width: 820px) {
  #leaderboard { margin: 0 12px 24px; padding: 16px; }
  .lb-rows { grid-template-columns: 1fr; }
  .seg2 { width: 100%; }
  .eq-tools, #eqTable { margin-left: 16px; margin-right: 16px; }
  .eq-filter { margin-left: 0; width: 100%; } .eq-filter input { width: 100%; }
  .eq-head { display: none; }
  .eq-row { grid-template-columns: 1fr 1fr; }
  .eq-name, .eq-desc, .eq-rem { grid-column: 1 / -1; }
}

/* tighter card rows for long lists */
.eq-row { padding: 10px 20px; min-height: 58px; margin-top: 6px; }
.eq-ring, .eq-ring svg { width: 44px; height: 44px; }

/* ===== Utilities / HVAC / Lighting pages ===== */
#utilView, #hvacView, #lightView, #sldView { display: none; padding: 0 28px 40px; }
.sy-hero { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr; gap: 14px; margin-bottom: 24px; }
.sy-card { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; background: var(--panel); border: 1px solid var(--border); border-top: 3px solid var(--fc); min-width: 0; }
.sy-card .t { font-family: var(--disp); font-size: 11px; letter-spacing: 0.13em; color: var(--text-dim); }
.sy-card .v { font-family: var(--mono); font-size: 34px; font-weight: 600; line-height: 1; }
.sy-card.big .v { font-size: 42px; color: var(--fc); }
.sy-card .v i { font-style: normal; font-size: 14px; font-weight: 400; margin-left: 6px; color: var(--fc); }
.sy-card .s { font-size: 12px; color: var(--text-muted); text-transform: none; overflow-wrap: anywhere; }
.sy-card .s b { color: var(--text); }
.sy-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.sy-pod { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 14px 16px 14px 52px; background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--fc); cursor: pointer; min-width: 0; transition: background .15s, transform .15s; }
.sy-pod:hover { background: var(--panel-alt); transform: translateY(-2px); }
.sy-pod .n { position: absolute; left: 14px; top: 14px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-weight: 700; color: var(--bg); background: var(--fc); }
.sy-pod .nm { font-family: var(--sans); font-size: 14px; font-weight: 600; text-transform: none; white-space: normal; overflow-wrap: anywhere; }
.sy-pod .v { font-family: var(--mono); font-size: 22px; font-weight: 600; }
.sy-pod .v i, .sy-kw i { font-style: normal; font-size: 11px; color: var(--text-dim); margin-left: 4px; }
.sy-pod .tg { font-size: 11px; color: var(--fc); letter-spacing: .08em; }
.sy-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.sy-chips button { font-family: var(--disp); font-size: 11px; letter-spacing: .12em; padding: 7px 14px; background: var(--panel); border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; }
.sy-chips button em { font-style: normal; font-family: var(--mono); margin-left: 6px; color: var(--text-dim); }
.sy-chips button.on { border-color: var(--fc); color: var(--text); background: var(--panel-alt); }
.sy-warn { font-size: 12px; color: #e6b450; text-transform: none; margin: 0 0 12px; }
.sy-item { border-left: 3px solid var(--fc); background: var(--panel); border-bottom: 1px solid var(--border); }
.sy-item.open { background: var(--panel-alt); }
.sy-row { display: grid; grid-template-columns: 28px minmax(200px, 1.6fr) minmax(90px, 1fr) 90px 120px 84px; gap: 12px; align-items: center; padding: 10px 12px; }
.sy-tog { width: 24px; height: 24px; background: none; border: 0; color: var(--text-muted); cursor: pointer; font-size: 13px; transition: transform .15s; }
.sy-item.open .sy-tog { transform: rotate(90deg); }
.sy-tog:disabled { cursor: default; }
.sy-open { font-family: var(--disp); font-size: 10px; letter-spacing: .12em; padding: 6px 8px; background: none; border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; }
.sy-open:hover { color: var(--text); border-color: var(--fc); }
.sy-item .sv-name b, .sy-item .sv-name small { white-space: normal; overflow-wrap: anywhere; }
.sy-item .sv-bar i { background: var(--fc); }
.sy-kids { padding: 0 12px 10px 52px; }
.sy-child { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0 5px calc(var(--d) * 18px); border-top: 1px dashed var(--border); font-size: 12.5px; text-transform: none; }
.sy-cn { overflow-wrap: anywhere; }
.sy-cn em { font-style: normal; font-size: 10.5px; color: var(--text-dim); margin-left: 8px; }
.sy-child b { font-family: var(--mono); font-weight: 500; white-space: nowrap; }
.sy-child b i { font-style: normal; font-size: 10px; color: var(--text-dim); margin-left: 3px; }
@media (max-width: 900px) { .sy-hero, .sy-podium { grid-template-columns: 1fr; } .sy-row { grid-template-columns: 24px 1fr 90px 84px; } .sy-row .sv-bar, .sy-row .sv-mwh { display: none; } }

/* keep the scrollbar space reserved, so short pages / filtered tables never shift sideways */
html { scrollbar-gutter: stable; }

/* breadcrumb never sits on top of the sort / filter row (the summary cards are hidden below
   the feeder's first level, which left zero gap). Same height for crumbs and chips. */
#breadcrumb { margin-bottom: 18px; row-gap: 8px; }
#breadcrumb button { min-height: 34px; padding: 7px 13px; display: inline-flex; align-items: center; }
.eq-chips button, .eq-filter { min-height: 34px; box-sizing: border-box; }
.eq-tools { padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--fc) 22%, var(--border)); }


/* ---- Utilities / HVAC / Lighting: the system inside every feeder ---- */
.sv-sec em { font-style: normal; font-family: var(--sans); font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--text-dim); margin-left: 10px; }
.sy-feeders { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; }
.sy-fd { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--border);
  border-top: 3px solid var(--fc); cursor: pointer; min-width: 0; transition: background .15s, transform .15s; }
.sy-fd:hover { background: var(--panel-alt); transform: translateY(-2px); }
.sy-fd.none { cursor: default; opacity: .55; }
.sy-fd.none:hover { transform: none; background: var(--panel); }
.fd-top { display: flex; align-items: center; gap: 7px; font-family: var(--disp); font-size: 11px; letter-spacing: .08em; color: var(--text-muted); }
.fd-top i { width: 8px; height: 8px; border-radius: 50%; background: var(--fc); flex: none; }
.fd-top span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-v { font-family: var(--mono); font-size: 22px; font-weight: 600; line-height: 1.1; }
.fd-v i { font-style: normal; font-size: 11px; color: var(--fc); margin-left: 4px; }
.fd-bar { height: 6px; background: var(--panel-alt); border-radius: 3px; overflow: hidden; }
.fd-bar i { display: block; height: 100%; min-width: 2px; background: var(--fc); border-radius: 3px; }
.sy-fd.none .fd-bar i { min-width: 0; }
.fd-m { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; color: var(--text-dim); text-transform: none; }
.fd-m b { color: var(--fc); font-family: var(--mono); }
.fd-m span { white-space: nowrap; }
.fd-s { font-size: 10.5px; color: var(--text-muted); text-transform: none; line-height: 1.45; }
.fd-s b { font-family: var(--mono); font-weight: 500; color: var(--text); }
.sy-item small u { text-decoration: none; color: #e6b450; }
@media (max-width: 1200px) { .sy-feeders { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .sy-feeders { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the % a bar stands for, printed under the kW */
.sv-kw small { display: block; font-size: 10px; font-weight: 400; color: var(--text-dim); margin-top: 2px; white-space: nowrap; }

/* units keep their real case (kW, MWh, kVA, Mvar) even inside the all-caps layout */
body i, .hs-unit { text-transform: none; }
.eq-head i { font-style: normal; }
.trio-value i, .fh-meta i { font-style: normal; font-size: .72em; color: var(--fc); margin-left: 2px; }
.u, .sv-group b, .sy-item .sv-kw, .sv-kw small { text-transform: none; }
/* same breathing room under the tab row as the Savings and P.F. pages */
#utilView, #hvacView, #lightView, #sldView { padding-top: 22px; }

/* ---- Lighting page: site load with vs without street lighting ---- */
.sy-core { display: flex; align-items: stretch; gap: 14px; margin-bottom: 8px; }
.sy-core-card { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--border); border-top: 3px solid var(--text-dim); min-width: 0; }
.sy-core-card.core { border-top-color: var(--fc); }
.sy-core-card .t { font-family: var(--disp); font-size: 11px; letter-spacing: 0.1em; color: var(--text-dim); }
.sy-core-card .t em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--text-muted); margin-left: 6px; font-size: 10.5px; }
.sy-core-card .v { font-family: var(--mono); font-size: 34px; font-weight: 600; }
.sy-core-card.core .v { color: var(--fc); }
.sy-core-card .v i { font-style: normal; font-size: 13px; font-weight: 400; margin-left: 6px; color: var(--text-dim); }
.sy-core-card.core .v i { color: var(--fc); }
.sy-core-minus { flex: none; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 150px; font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--copper); text-align: center; }
.sy-core-minus small { font-family: var(--sans); font-size: 10.5px; font-weight: 400; color: var(--text-dim); text-transform: none; line-height: 1.3; }
@media (max-width: 700px) { .sy-core { flex-direction: column; } .sy-core-minus { width: auto; flex-direction: row; justify-content: center; } }