/* ============================================================
   CLEAN PAGES (2026-11-02)
   Small near-square tiles in three zones (head, figure, context),
   aligned lists with column heads, details in a window
   (dialog.ep-sheet). Two families of figures: the pool and the
   network, each with its own colour AND its own label.
   Built by js/epure.js. Loaded last on every public page.
   ============================================================ */

/* ---- Tokens ---- */
:root, [data-theme="light"] {
  --cat-pool: #17774A;
  --cat-pool-soft: rgba(23,119,74,0.09);
  --cat-pool-line: rgba(23,119,74,0.28);
  --cat-net: #5B4FD0;
  --cat-net-soft: rgba(91,79,208,0.09);
  --cat-net-line: rgba(91,79,208,0.28);
  --chart-pool: #1E8A58;
  --chart-pool-2: #8FBFA6;
  --chart-net: #6A5BE0;
  --ep-radius-tile: 18px;
  --ep-radius-ctl: 10px;
  --ep-gap: 16px;
  --ep-ease: cubic-bezier(.2,.8,.2,1);
  --ep-fast: 140ms;
  --ep-tip-bg: #111820;
  --ep-tip-ink: #EAF2EE;
  --ep-tip-dim: #93A39B;
  --ep-tip-line: rgba(255,255,255,0.08);
  --ep-row-hover: rgba(13,30,45,0.04);
  --ep-head-ink: #7A8790;
}
[data-theme="dark"] {
  --cat-pool: #6AD3A0;
  --cat-pool-soft: rgba(106,211,160,0.10);
  --cat-pool-line: rgba(106,211,160,0.30);
  --cat-net: #A99CFF;
  --cat-net-soft: rgba(169,156,255,0.10);
  --cat-net-line: rgba(169,156,255,0.30);
  --chart-pool: #62CC99;
  --chart-pool-2: #3F7F62;
  --chart-net: #A99CFF;
  --ep-tip-bg: #0B1117;
  --ep-tip-ink: #E8F1EC;
  --ep-tip-dim: #8A9A93;
  --ep-tip-line: rgba(255,255,255,0.07);
  --ep-row-hover: rgba(255,255,255,0.03);
  --ep-head-ink: #74817B;
}

.ep-page.page-top { padding-top: 40px; padding-bottom: 72px; }
.ep-wrap { max-width: 1080px; margin: 0 auto; }

/* ---- Page head: title, a pill, small tools ---- */
.ep-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px; margin-bottom: 32px; }
.ep-h1 { margin: 0; font-size: 26px; line-height: 1.15; font-weight: 600; letter-spacing: -0.03em; }
.ep-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; border: 0; border-radius: 999px; font: 600 13px/1.3 var(--font-mono); color: var(--primary); background: var(--primary-dim); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 32%, transparent); cursor: pointer; }
.ep-pill[hidden] { display: none; }
.ep-pill b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font: 500 15px/1 var(--font-ui); }
.ep-pill:hover b { background: color-mix(in srgb, var(--primary) 18%, transparent); }
.ep-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ep-tool {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px;
  border: 1px solid var(--card-border-strong); border-radius: var(--ep-radius-ctl); background: transparent;
  font: 550 13px/1 var(--font-ui); color: var(--text-2); cursor: pointer; text-decoration: none;
  transition: color var(--ep-fast) ease, border-color var(--ep-fast) ease, background var(--ep-fast) ease, transform var(--ep-fast) ease;
}
.ep-tool:hover { color: var(--text-1); border-color: var(--border-active); background: var(--hover-tint); text-decoration: none; }
.ep-tool:active { transform: translateY(1px); }
.ep-tool:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ep-tool[hidden] { display: none; }
.ep-tool svg { color: var(--primary); }

/* ---- Family chips: the label says it, the colour repeats it ---- */
.ep-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px;
  font: 600 11.5px/1 var(--font-ui); letter-spacing: 0.02em; white-space: nowrap;
}
.ep-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ep-chip-pool { color: var(--cat-pool); background: var(--cat-pool-soft); box-shadow: inset 0 0 0 1px var(--cat-pool-line); }
.ep-chip-net { color: var(--cat-net); background: var(--cat-net-soft); box-shadow: inset 0 0 0 1px var(--cat-net-line); }

/* ---- Tiles: head (icon, label), figure, context (line, change, sparkline) ---- */
.ep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: var(--ep-gap); }
.ep-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ep-grid > [hidden] { display: none !important; }
.ep-tile {
  --cat: var(--cat-pool); --cat-soft: var(--cat-pool-soft); --cat-line: var(--cat-pool-line);
  position: relative; display: flex; flex-direction: column; align-items: stretch; width: 100%; min-width: 0; min-height: 156px;
  padding: 15px 16px 14px; border-radius: var(--ep-radius-tile); font: inherit; color: inherit; text-align: left; text-decoration: none;
}
.ep-tile.ep-cat-net { --cat: var(--cat-net); --cat-soft: var(--cat-net-soft); --cat-line: var(--cat-net-line); }
.ep-tile:hover { text-decoration: none; }
.ep-tile-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ep-tile .ico-duo {
  box-sizing: content-box; flex: none; width: 15px; height: 15px; padding: 5px; border-radius: 9px; color: var(--cat);
  background: var(--cat-soft); box-shadow: inset 0 0 0 1px var(--cat-line);
}
.ep-tile .ico-duo .duo { fill: currentColor; opacity: 0.16; }
.ep-tile-label { min-width: 0; font-size: 12.5px; line-height: 1.25; font-weight: 520; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-tile-go { margin-left: auto; flex: none; color: var(--text-3); font-size: 15px; line-height: 1; transition: transform var(--ep-fast) var(--ep-ease), color var(--ep-fast) ease; }
.ep-tile-btn:hover .ep-tile-go, .ep-tile-link:hover .ep-tile-go { color: var(--cat); transform: translateX(2px); }
.ep-tile-value {
  margin-top: 16px; max-width: 100%; font-size: 23px; line-height: 1.1; font-weight: 620; letter-spacing: -0.035em;
  color: var(--text-1); font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.ep-tile-value.is-empty { color: var(--text-3); font-weight: 500; }
.ep-unit { margin-left: 4px; font-size: 12px; font-weight: 520; letter-spacing: 0; color: var(--text-3); white-space: nowrap; }
.ep-tile-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-height: 18px; margin-top: 6px; font-size: 12px; line-height: 1.35; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ep-tile-foot:empty { display: none; }
.ep-tile-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-trend { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 6px; border-radius: 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.ep-trend.up { color: var(--success); background: var(--success-dim, rgba(23,119,74,0.1)); }
.ep-trend.down { color: var(--danger); background: color-mix(in srgb, var(--danger) 11%, transparent); }
.ep-trend.flat { color: var(--text-3); background: var(--well); }
.ep-spark { display: block; width: calc(100% + 8px); height: 30px; margin: auto -4px -4px; pointer-events: none; }
.ep-spark[hidden] { display: none; }
.ep-tile-value + .ep-spark, .ep-tile-foot + .ep-spark { margin-top: 10px; }
.ep-tile-extra { width: 100%; margin-top: 10px; }
.ep-tile-extra:empty { display: none; }
.ep-tile-btn { cursor: pointer; }
.ep-tile-btn:focus-visible, .ep-tile-link:focus-visible { outline: 2px solid var(--cat); outline-offset: 2px; }
.ep-meter { display: block; height: 5px; border-radius: 99px; overflow: hidden; background: var(--well); box-shadow: inset 0 0 0 1px var(--card-border); }
.ep-meter i { display: block; min-width: 4px; height: 100%; border-radius: 99px; background: var(--cat, var(--primary)); transition: width 700ms var(--ep-ease); }
/* Loading: a quiet pulse in place of the figure, never a zero */
.ep-tile.is-loading .ep-tile-value { width: 60%; height: 24px; border-radius: 6px; color: transparent; background: var(--well); animation: ep-pulse 1.4s ease-in-out infinite; }
@keyframes ep-pulse { 50% { opacity: 0.45; } }

/* Explanations: a small dark label on hover or keyboard focus */
[data-tip] { position: relative; }
.ep-tip-host:hover > .ep-tip, .ep-tip-host:focus-visible > .ep-tip, .ep-tip-host:focus-within > .ep-tip { opacity: 1; transform: translateY(0); transition-delay: 350ms; }
.ep-tip {
  position: absolute; z-index: 20; left: 12px; right: 12px; bottom: calc(100% + 8px); padding: 8px 10px; border-radius: 10px;
  font: 450 12px/1.45 var(--font-ui); color: var(--ep-tip-ink); background: var(--ep-tip-bg); box-shadow: 0 10px 28px -10px rgba(0,0,0,0.55), inset 0 0 0 1px var(--ep-tip-line);
  opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity 120ms ease, transform 120ms ease; transition-delay: 0ms; text-align: left; white-space: normal;
}

/* ---- Sections ---- */
.ep-sec { margin-top: 48px; }
.ep-sec-tight { margin-top: 28px; }
.ep-sec[hidden] { display: none !important; }
.ep-sec-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 14px; }
.ep-sec-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 620; letter-spacing: -0.012em; color: var(--text-1); }
main h1.ep-sec-title, main h2.ep-sec-title { background: none; -webkit-text-fill-color: currentColor; color: var(--text-1); }
.ep-sec-title .ico-duo { color: var(--cat-pool); }
.ep-sec-side { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.ep-summary { font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ep-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ep-gap); }
.ep-chart { padding: 16px 18px 12px; }
.ep-chart .chart-box { height: 230px; }
.ep-chart .ep-sec-head { margin-bottom: 10px; }
.ep-chart:hover, .ep-list:hover { transform: none; }

/* ---- Lists: aligned columns under one head; a line opens its window ---- */
.ep-list { padding: 4px 6px 6px; }
.ep-list::before, .ep-list::after { display: none; }
.ep-thead, .ep-row { display: grid; grid-template-columns: var(--cols, minmax(0, 1fr) auto); align-items: center; column-gap: 20px; }
.ep-thead { padding: 10px 14px 9px; border-bottom: 1px solid var(--card-border); font-size: 11.5px; font-weight: 560; letter-spacing: 0.02em; color: var(--ep-head-ink); }
.ep-thead span[title] { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: var(--text-3); }
.ep-rows { margin: 0; padding: 0; list-style: none; }
.ep-rows > li + li { border-top: 1px solid var(--card-border); }
.ep-row {
  width: 100%; min-height: 46px; padding: 9px 14px; border: 0; border-radius: 10px; background: none;
  font: inherit; font-size: 13.5px; color: inherit; text-align: left; cursor: pointer; transition: background var(--ep-fast) ease;
}
.ep-row:hover { background: var(--ep-row-hover); }
.ep-row:active { background: var(--row-hover); }
.ep-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.ep-c { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-r { text-align: right; justify-self: end; font-variant-numeric: tabular-nums; }
.ep-c .badge { vertical-align: middle; }
.ep-row-rank { color: var(--text-3); font-variant-numeric: tabular-nums; }
.ep-row-strong { font-weight: 620; color: var(--text-1); font-variant-numeric: tabular-nums; }
.ep-row-dim { color: var(--text-3); font-size: 12.5px; }
.ep-row-amount { font-weight: 620; color: var(--text-1); font-variant-numeric: tabular-nums; }
.ep-row .mono, .ep-c.mono { font-family: var(--font-mono); font-size: 12.5px; }
.ep-empty { margin: 0; padding: 22px 14px; font-size: 13px; text-align: center; color: var(--text-3); list-style: none; }
.ep-sec > .pager { margin-top: 14px; }
.pager:empty { display: none; }

/* ---- Windows ---- */
dialog.ep-sheet {
  width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 18px 20px 22px; overflow: auto;
  border: 1px solid var(--card-border); border-radius: 18px; color: var(--text-1); background: var(--surface-1, var(--card-bg));
  box-shadow: var(--card-shadow-hover); outline: none; overscroll-behavior: contain;
}
dialog.ep-sheet[open] { animation: ep-sheet-in 180ms var(--ep-ease) both; }
@keyframes ep-sheet-in { from { opacity: 0; transform: translateY(6px) scale(0.985); } }
dialog.ep-sheet-wide { width: min(640px, calc(100vw - 32px)); }
dialog.ep-sheet::backdrop { background: rgba(5, 8, 12, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.ep-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ep-sheet-head h2 { min-width: 0; margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.012em; overflow-wrap: anywhere; }
.ep-sheet-head .ep-chip { margin-right: auto; }
.ep-sheet p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.ep-sheet p:last-child { margin-bottom: 0; }
.ep-sheet-form { display: flex; flex-direction: column; gap: 12px; }
.ep-sheet input[type="text"], .ep-sheet input[type="number"], .ep-sheet select {
  width: 100%; min-height: 40px; padding: 0 12px; border-radius: var(--ep-radius-ctl); color: var(--text-1); font: 450 14px/1 var(--font-ui);
  background: var(--well); border: 1px solid var(--card-border-strong); box-shadow: var(--well-shadow);
}
.ep-sheet input.mono-input { font-family: var(--font-mono); font-size: 12.5px; }
.ep-sheet input:focus, .ep-sheet select:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); }
.ep-sheet input[aria-invalid="true"] { border-color: var(--danger); }
.ep-sheet-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.ep-sheet-form .ep-sheet-actions { margin-top: 4px; }
.ep-sheet .copy-field { margin: 0; }
.ep-sheet .home-seg { margin-bottom: 16px; }
.ep-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; margin: 2px 0 16px; }
.ep-big-value { font-size: 30px; line-height: 1.1; font-weight: 620; letter-spacing: -0.035em; color: var(--text-1); font-variant-numeric: tabular-nums; }
.ep-facts { display: flex; flex-direction: column; margin: 0; }
.ep-fact { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--card-border); font-size: 13px; }
.ep-fact dt { flex: none; color: var(--text-3); }
.ep-fact dt[title] { cursor: help; text-decoration: underline dotted; text-decoration-color: var(--text-3); text-underline-offset: 3px; }
.ep-fact dd { min-width: 0; margin: 0; font-weight: 560; text-align: right; color: var(--text-1); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ep-fact-net dt::before, .ep-fact-pool dt::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; vertical-align: 1px; }
.ep-fact-net dt::before { background: var(--cat-net); }
.ep-fact-pool dt::before { background: var(--cat-pool); }
.ep-field { margin-top: 14px; }
.ep-field-label { display: block; margin-bottom: 6px; font-size: 12px; color: var(--text-3); }
.ep-sheet .ep-meter { margin: -6px 0 16px; }

/* ---- Segmented tabs: one indicator that slides to the active choice ---- */
.ep-seg { position: relative; isolation: isolate; }
.ep-seg > .ep-seg-ind {
  position: absolute; z-index: -1; top: 0; left: 0; height: 0; width: 0; border-radius: var(--ep-seg-r, 8px);
  background: var(--ctl-bg); box-shadow: var(--ctl-shadow); pointer-events: none; opacity: 0;
  transition: transform 240ms var(--ep-ease), width 240ms var(--ep-ease), height 240ms var(--ep-ease), opacity 120ms ease;
}
.ep-seg.is-ready > .ep-seg-ind { opacity: 1; }
.ep-seg.is-ready > button[aria-selected="true"], .ep-seg.is-ready > button[aria-pressed="true"],
.ep-seg.is-ready > button[aria-selected="true"]:hover, .ep-seg.is-ready > button[aria-pressed="true"]:hover { background: transparent !important; background-image: none !important; box-shadow: none !important; }
.ep-seg > button { position: relative; transition: color var(--ep-fast) ease; }
.ep-seg > button:active { transform: none; }
.acct-tabs.ep-seg { --ep-seg-r: 10px; }

/* ---- Phones ---- */
@media (max-width: 1000px) {
  .ep-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ep-page.page-top { padding-top: 22px; padding-bottom: 40px; }
  .ep-head { margin-bottom: 22px; }
  .ep-h1 { font-size: 23px; }
  .ep-tool { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .ep-tool span { display: none; }
  .ep-grid, .ep-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ep-tile { min-height: 138px; padding: 13px 13px 12px; }
  .ep-tile-value { margin-top: 12px; font-size: 20px; }
  .ep-sec { margin-top: 36px; }
  .ep-charts { grid-template-columns: minmax(0, 1fr); }
  .ep-chart { padding: 14px 12px 10px; }
  .ep-chart .chart-box { height: 200px; }
  .ep-thead, .ep-row { grid-template-columns: var(--cols-sm, var(--cols, minmax(0, 1fr) auto)); column-gap: 12px; }
  .ep-list .ep-sm-hide { display: none; }
  .ep-row { padding: 10px 10px; min-height: 48px; }
  .ep-thead { padding: 9px 10px 8px; }
  .ep-sheet-actions .btn { width: auto; }
  .ep-sheet input[type="text"], .ep-sheet input[type="number"], .ep-sheet select { min-height: 44px; }
  .ep-tip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ep-seg > .ep-seg-ind, dialog.ep-sheet[open], .ep-tile-go, .ep-meter i { transition: none; animation: none; }
  .ep-tile.is-loading .ep-tile-value { animation: none; }
}

/* ---- Charts: a dark ticket for the reading, a precise cursor (js/charts.js) ---- */
.chart-area .chart-tooltip {
  min-width: 168px; padding: 10px 12px 9px; border: 0; border-radius: 12px;
  color: var(--ep-tip-ink); background: var(--ep-tip-bg);
  box-shadow: 0 14px 34px -14px rgba(0,0,0,0.6), inset 0 0 0 1px var(--ep-tip-line);
}
.chart-area .chart-tip-row { gap: 8px; font-size: 12.5px; line-height: 1.7; color: var(--ep-tip-dim); }
.chart-area .chart-tip-row i { width: 8px; height: 8px; box-shadow: 0 0 0 2px rgba(255,255,255,0.08); }
.chart-area .chart-tip-row b { padding-left: 18px; font-size: 13px; font-weight: 650; color: var(--ep-tip-ink); }
.chart-area .chart-tip-when { margin: 7px 0 0; padding-top: 7px; border-top: 1px solid var(--ep-tip-line); font: 500 10.5px/1.2 var(--font-mono); color: var(--ep-tip-dim); }
.chart-cursor-bar { width: 1px; background: linear-gradient(180deg, transparent, var(--chart-axis) 12%, var(--chart-axis) 88%, transparent); transition: left 70ms ease-out; }
.chart-cursor-dot { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border: 2.5px solid var(--surface-1); border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 0%, transparent), 0 1px 4px rgba(0,0,0,0.3); transition: left 70ms ease-out, top 70ms ease-out; }
.chart-box.is-loading .chart-empty { font-size: 13px; animation: ep-pulse 1.4s ease-in-out infinite; }
.chart-legend span { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .chart-cursor-bar, .chart-cursor-dot { transition: none; } .chart-box.is-loading .chart-empty { animation: none; } }

/* ---- Buttons: the same states everywhere ---- */
.btn { transition: background-color var(--ep-fast) ease, border-color var(--ep-fast) ease, color var(--ep-fast) ease, box-shadow var(--ep-fast) ease, transform var(--ep-fast) ease; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.is-loading, .btn[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after, .btn[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-color: var(--text-2) transparent var(--text-2) transparent; animation: ep-spin 700ms linear infinite;
}
@keyframes ep-spin { to { transform: rotate(360deg); } }
.btn-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; }
.ep-sec-title .ep-chip { margin-left: 4px; }
@media (prefers-reduced-motion: reduce) { .btn.is-loading::after, .btn[aria-busy="true"]::after { animation-duration: 2s; } }

/* ---- Large charts (PPChart.flow): the figure at the top left, a glowing line, a reading box ---- */
:root, [data-theme="light"] {
  --flow-ink: #0E1A16; --flow-dim: #6B7A74; --flow-tip-bg: #FFFFFF; --flow-tip-line: rgba(13,30,45,0.10);
  --flow-tip-shadow: 0 18px 40px -18px rgba(13,30,45,0.35); --flow-btn-bg: rgba(13,30,45,0.04); --flow-btn-line: rgba(13,30,45,0.10);
  --flow-ico-bg: #0E1A16; --flow-ico-ink: #FFFFFF;
}
[data-theme="dark"] {
  --flow-ink: #FFFFFF; --flow-dim: #8A8F98; --flow-tip-bg: #1A1C20; --flow-tip-line: rgba(243,248,255,0.07);
  --flow-tip-shadow: 0 18px 40px -16px rgba(0,0,0,0.8); --flow-btn-bg: rgba(255,255,255,0.05); --flow-btn-line: rgba(243,248,255,0.06);
  --flow-ico-bg: #FFFFFF; --flow-ico-ink: #0E1013;
}
.flow-card { padding: 22px 22px 16px; }
.flow-card:hover { transform: none; }
.flow-card::before, .flow-card::after { display: none; }
.chart-box.flow-box { height: 360px; }
.flow-box canvas { cursor: crosshair; touch-action: pan-y; }
.flow-head { position: absolute; z-index: 2; top: 4px; left: 2px; pointer-events: none; }
.flow-title { display: flex; align-items: center; gap: 10px; font-size: 22px; line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; color: var(--flow-ink); }
.flow-sub { margin-left: 2px; font-weight: 400; color: var(--flow-dim); }
.flow-ico { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; color: var(--flow-ico-ink); background: var(--flow-ico-bg); }
.flow-ico svg { width: 16px; height: 16px; }
.flow-value { margin-top: 10px; color: var(--flow-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.flow-int { font-size: 60px; line-height: 1; font-weight: 400; letter-spacing: -1.2px; }
.flow-dec { font-size: 36px; line-height: 1; font-weight: 400; letter-spacing: -0.8px; }
.flow-unit { margin-left: 8px; font-size: 18px; font-weight: 450; letter-spacing: 0; color: var(--flow-dim); }
.flow-second { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 14px; color: var(--flow-dim); font-variant-numeric: tabular-nums; }
.flow-second i { width: 8px; height: 8px; border-radius: 50%; }
.flow-box .chart-cursor { z-index: 3; }
/* the cursor: a drop line fading to the foot, a dot ringed by the card's colour inside a soft halo that breathes */
.flow-drop { position: absolute; bottom: 0; width: 1px; margin-left: -0.5px; transition: left 80ms ease-out, top 80ms ease-out; }
.flow-dot {
  position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--dot);
  box-shadow: 0 0 0 2px var(--edge), 0 0 12px 1px var(--dot); transition: left 80ms ease-out, top 80ms ease-out;
}
.flow-dot::before {
  content: ""; position: absolute; inset: -9px; border-radius: 50%; background: var(--halo);
  animation: flow-halo 1.8s ease-in-out infinite;
}
@keyframes flow-halo { 0%, 100% { transform: scale(0.72); opacity: 1; } 50% { transform: scale(1); opacity: 0.55; } }
/* the reading box: the value, then the time */
.flow-box .flow-tip {
  position: absolute; z-index: 4; padding: 7px 11px 7px; border: 1px solid var(--flow-tip-line); border-radius: 9px;
  color: var(--flow-ink); background: color-mix(in srgb, var(--flow-tip-bg) 88%, transparent); box-shadow: var(--flow-tip-shadow);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; white-space: nowrap;
  transition: left 80ms ease-out, top 80ms ease-out;
}
.flow-tip-value { display: flex; align-items: center; gap: 6px; font-size: 14px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.flow-tip-value i { width: 6px; height: 6px; border-radius: 50%; }
.flow-tip-when { margin-top: 2px; font-size: 11.5px; line-height: 1.3; color: var(--flow-dim); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .flow-drop, .flow-dot, .flow-box .flow-tip { transition: none; } .flow-dot::before { animation: none; } }
.flow-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.flow-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.flow-btn {
  display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0; border: 1px solid var(--flow-btn-line); border-radius: 6px;
  background: var(--flow-btn-bg); color: var(--flow-ink); font: 500 14px/1 var(--font-ui); cursor: pointer; transition: background var(--ep-fast) ease, border-color var(--ep-fast) ease;
}
.flow-btn-text { padding: 0 10px; }
.flow-btn:hover:not(:disabled) { border-color: var(--border-active); background: var(--hover-tint); }
.flow-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.flow-btn:disabled { opacity: 0.4; cursor: default; }
.flow-box.is-loading .chart-empty { font-size: 13px; }
@media (max-width: 900px) {
  .flow-int { font-size: 46px; } .flow-dec { font-size: 28px; } .flow-title { font-size: 19px; }
}
@media (max-width: 720px) {
  .flow-card { padding: 16px 14px 12px; }
  .chart-box.flow-box { height: 270px; }
  .flow-int { font-size: 38px; letter-spacing: -0.8px; } .flow-dec { font-size: 24px; } .flow-unit { font-size: 15px; }
  .flow-title { font-size: 17px; gap: 8px; } .flow-ico { width: 26px; height: 26px; }
  .flow-btn { min-width: 44px; height: 44px; }
}

/* ---- Large tiles (3 per row): the figure, two facts, a window on a click ---- */
.ep-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ep-tile-lg { min-height: 176px; padding: 18px 20px 16px; }
.ep-tile-lg .ico-duo { width: 17px; height: 17px; padding: 6px; border-radius: 10px; }
.ep-tile-lg .ep-tile-label { font-size: 14px; font-weight: 560; color: var(--text-1); }
.ep-tile-lg .ep-tile-value { margin-top: 16px; font-size: 34px; font-weight: 600; letter-spacing: -0.04em; }
.ep-tile-lg .ep-unit { font-size: 15px; margin-left: 6px; }
.ep-tile-lg .ep-tile-foot:empty + .ep-spark[hidden] + .ep-tile-facts, .ep-tile-lg .ep-tile-foot:empty { display: none; }
.ep-tile-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: auto 0 0; padding-top: 14px; }
.ep-tile-facts > div { min-width: 0; padding-top: 10px; border-top: 1px solid var(--card-border); }
.ep-tile-facts dt { font-size: 12px; color: var(--text-3); }
.ep-tile-facts dd { margin: 3px 0 0; font-size: 14px; font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-tile-lg .ep-tile-extra { margin-top: 12px; }
.ep-tile-lg .ep-tile-go { font-size: 18px; }
.ep-sheet-chip { margin: -4px 0 10px; }
@media (max-width: 860px) { .ep-grid-3 { grid-template-columns: minmax(0, 1fr); } .ep-tile-lg { min-height: 0; } }
@media (min-width: 521px) and (max-width: 860px) { .ep-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Light / dark switch: a pill track, a knob that springs across and grows, the sun or the moon in it ---- */
:root, [data-theme="light"] { --sw-track: #CFE6D9; --sw-track-ring: inset 0 0 0 1px rgba(23,119,74,0.18); --sw-knob: #FFFFFF; --sw-sun: #E5A10F; --sw-moon: #1F6E4A; }
[data-theme="dark"] { --sw-track: #2E8F63; --sw-track-ring: inset 0 0 0 1px rgba(255,255,255,0.08); --sw-knob: #F1FBF5; --sw-sun: #E5A10F; --sw-moon: #1F6E4A; }
.header-actions .theme-toggle, .header-actions .theme-toggle:hover, .header-actions .theme-toggle:active {
  position: relative; display: inline-block; flex: none; width: 56px; min-width: 56px; height: 32px; padding: 0; border: 0; border-radius: 50px;
  background: var(--sw-track); box-shadow: var(--sw-track-ring); transform: none; cursor: pointer;
  transition: background 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.2s ease;
}
.header-actions .theme-toggle:hover { box-shadow: var(--sw-track-ring), 0 0 0 4px color-mix(in srgb, var(--sw-track) 45%, transparent); }
.header-actions .theme-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.header-actions .theme-toggle .tt-knob {
  position: absolute; left: 5px; bottom: 5px; top: auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50px;
  background: var(--sw-knob); box-shadow: 0 0 18px rgba(0,0,0,0.28), 0 1px 2px rgba(0,0,0,0.18);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), height 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
[data-theme="dark"] .header-actions .theme-toggle .tt-knob { transform: translateX(24px); width: 32px; height: 32px; bottom: 0; }
.header-actions .theme-toggle .tt-knob .ico { position: absolute; inset: 0; display: grid; place-items: center; width: auto; height: auto; transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.header-actions .theme-toggle .tt-knob .ico svg { width: 13px; height: 13px; }
.header-actions .theme-toggle .tt-knob .tt-sun { color: var(--sw-sun); opacity: 1; transform: rotate(0deg) scale(1); }
.header-actions .theme-toggle .tt-knob .tt-moon { color: var(--sw-moon); opacity: 0; transform: rotate(-60deg) scale(0.6); }
[data-theme="dark"] .header-actions .theme-toggle .tt-knob .tt-sun { opacity: 0; transform: rotate(90deg) scale(0.6); }
[data-theme="dark"] .header-actions .theme-toggle .tt-knob .tt-moon { opacity: 1; transform: rotate(0deg) scale(1); }
[data-theme="dark"] .header-actions .theme-toggle .tt-knob .ico svg { width: 15px; height: 15px; }
.header-actions .theme-toggle:hover .ico { color: inherit; }
.header-actions .theme-toggle:hover .tt-sun { color: var(--sw-sun); }
.header-actions .theme-toggle:hover .tt-moon { color: var(--sw-moon); }
@media (prefers-reduced-motion: reduce) { .header-actions .theme-toggle, .header-actions .theme-toggle .tt-knob, .header-actions .theme-toggle .tt-knob .ico { transition: none; } }

/* A figure read live: a small pulsing dot before it */
.ep-live { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.ep-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 50%, transparent); animation: ep-live 2s ease-out infinite; }
@keyframes ep-live { 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .ep-live i { animation: none; } }

/* ---- Home: two charts side by side, the animation next to the top 10 ---- */
.ep-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ep-gap); align-items: start; }
.ep-duo > .flow-card { min-width: 0; }
.ep-duo .chart-box.flow-box { height: 320px; }
.ep-duo .flow-int { font-size: 48px; } .ep-duo .flow-dec { font-size: 30px; } .ep-duo .flow-title { font-size: 19px; }
.ep-duo-circuit { align-items: stretch; }
.ep-duo-cell { min-width: 0; }
.ep-duo-cell > .circuit { margin-top: 0; height: 100%; }
.ep-duo-cell .ep-sec-head { margin-top: 0; }
#circuitHome .circuit-stage { cursor: zoom-in; }
.circuit-head .circuit-expand {
  pointer-events: auto; margin-left: auto; display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; background: rgba(6,10,16,0.55); color: #EAF2EE; cursor: pointer;
  transition: background var(--ep-fast) ease, border-color var(--ep-fast) ease;
}
.circuit-head .circuit-expand:hover { border-color: rgba(120,220,180,0.5); background: rgba(10,30,24,0.75); }
.circuit-head .circuit-expand:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
dialog.ep-sheet.circuit-full { width: min(1600px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 14px 16px 16px; background: #04070C; border-color: rgba(120,200,190,0.18); color: #EAF2EE; }
dialog.circuit-full .ep-sheet-head { margin-bottom: 10px; }
dialog.circuit-full .pitch-close { color: #EAF2EE; }
.circuit-full-host > .circuit { margin: 0; }
.circuit-full .circuit-expand { display: none; }
@media (max-width: 1000px) { .ep-duo { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .ep-duo .chart-box.flow-box { height: 270px; } .ep-duo .flow-int { font-size: 38px; } .ep-duo .flow-dec { font-size: 24px; } }

.ep-duo-circuit { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.ep-duo-circuit .ep-list .ep-thead, .ep-duo-circuit .ep-list .ep-row { column-gap: 12px; }
.ep-duo-circuit .ep-list .ep-row { min-height: 44px; }
@media (max-width: 1000px) { .ep-duo-circuit { grid-template-columns: minmax(0, 1fr); } }
/* in its column the six step names go on two rows of three, so none runs into the next */
@media (min-width: 721px) { #circuitHome .circuit-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; } }
@media (max-width: 720px) { .circuit-head .circuit-expand { box-sizing: border-box; width: 44px; height: 44px; min-width: 44px; min-height: 44px; } }

/* ---- Columns (PPChart.columns): rounded bars with a dot on top, a dashed estimate line ---- */
:root, [data-theme="light"] { --col-a: #2FA36C; --col-b: #8FD2AE; --col-dot-bg: #FFFFFF; --col-ref: #E5484D; --col-tip-bg: #111820; --col-tip-ink: #FFFFFF;
  --col-halo: rgba(17,24,32,0.55); --col-halo-glow: rgba(17,24,32,0.14); }
[data-theme="dark"] { --col-a: #3DD598; --col-b: #1E7F57; --col-dot-bg: #0E1013; --col-ref: #FF6B6B; --col-tip-bg: #F1F5F3; --col-tip-ink: #0E1013;
  --col-halo: rgba(255,255,255,0.92); --col-halo-glow: rgba(255,255,255,0.28); }
.col-chart { position: relative; height: 220px; }
.col-plot { position: relative; display: flex; align-items: stretch; justify-content: space-around; gap: 4px; height: 100%; padding: 26px 6px 22px; }
.col-wrap { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; cursor: default; }
.col-bar {
  position: relative; width: clamp(6px, 46%, 22px); border-radius: 10px; transform-origin: bottom;
  background: linear-gradient(to bottom, var(--col-a) 0%, var(--col-b) 100%);
  transform: scaleY(0); transition: transform 600ms cubic-bezier(.2,.8,.2,1), filter 160ms ease, box-shadow 160ms ease;
}
.col-chart.is-in .col-bar { transform: scaleY(1); }
.col-wrap:nth-child(odd) .col-bar { transition-delay: 40ms; }
.col-bar.is-zero { background: var(--card-border-strong); }
.col-dot { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border: 1.5px solid var(--col-a); border-radius: 50%; background: var(--col-dot-bg); box-sizing: border-box; }
.col-bar.is-zero .col-dot { display: none; }
/* the bar in parts (js/charts.js): the green base under the violet; lit one at a time, a halo for the whole bar */
.col-chart .col-bar.has-parts { background: none; }
.col-bar.has-parts .col-dot { z-index: 2; }
.col-green { position: absolute; left: 0; right: 0; bottom: 0; border-radius: inherit; background: linear-gradient(to bottom, var(--col-a) 0%, var(--col-b) 100%);
  transition: opacity 160ms ease, filter 160ms ease, box-shadow 160ms ease; }
.col-bar.has-boost .col-green { border-top-left-radius: 0; border-top-right-radius: 0; }
.col-wrap.is-total .col-bar { box-shadow: 0 0 0 1.5px var(--col-halo), 0 0 14px 2px var(--col-halo-glow); }
.col-wrap.is-green .col-green { filter: brightness(1.15) saturate(1.1); box-shadow: 0 0 14px color-mix(in srgb, var(--col-a) 50%, transparent); }
.col-wrap.is-green .col-boost { opacity: 0.4; box-shadow: none; }
.col-wrap.is-boost .col-green { opacity: 0.4; }
.col-tip.is-green b { color: var(--col-a); }
/* the total above each bar, small */
.col-val { position: absolute; left: 50%; transform: translateX(-50%); font-size: 10.5px; font-weight: 600; line-height: 1; color: var(--text-3);
  font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 300ms ease 450ms, color 140ms ease; }
.col-chart.is-in .col-val { opacity: 1; }
.col-wrap.is-on .col-val { color: var(--text-1); }
.col-wrap.is-on .col-dot { width: 10px; height: 10px; margin-left: -5px; top: -5px; border-width: 2px; }
.col-tick { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 500; color: var(--text-3); white-space: nowrap; }
.col-ref { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed var(--col-ref); opacity: 0.8; z-index: 1; pointer-events: none; }
.col-ref-label { position: absolute; right: 0; top: -22px; padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; color: #FFFFFF; background: var(--col-ref); white-space: nowrap; }
.col-tip {
  position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 9px; border-radius: 6px;
  color: var(--col-tip-ink); background: var(--col-tip-bg); transform: translateX(-50%); pointer-events: none; opacity: 0; transition: opacity 140ms ease, left 140ms ease, bottom 140ms ease; white-space: nowrap;
}
.col-tip.is-on { opacity: 1; }
.col-tip b { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.col-tip span { font-size: 9.5px; opacity: 0.7; }
.col-empty { display: grid; place-items: center; height: 100%; font-size: 13px; color: var(--text-3); }
.col-chart.is-dense .col-plot { gap: 2px; }
@media (prefers-reduced-motion: reduce) { .col-bar { transform: none; transition: none; } .col-val { transition: none; } }

/* ---- Home: the two animations side by side; full screen ---- */
.ep-duo-anim { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.ep-duo-anim .ep-duo-cell > .circuit, .ep-duo-anim .ep-duo-cell > .deleg-anim { margin: 0; height: 100%; }
@media (min-width: 721px) { #circuitHome .circuit-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; } }
dialog.anim-full {
  position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: radial-gradient(80% 90% at 50% 40%, #0A1420, #02040A 70%); color: #EAF2EE; overflow: hidden;
}
dialog.anim-full[open] { display: flex; animation: anim-full-in 260ms cubic-bezier(.2,.8,.2,1) both; }
dialog.anim-full::backdrop { background: #02040A; }
@keyframes anim-full-in { from { opacity: 0; transform: scale(.98); } }
.anim-full-host { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 24px; box-sizing: border-box; }
.anim-full-host > .circuit { width: min(100%, calc((100dvh - 48px - 90px) * 3.1)); margin: 0; }
.anim-full-host > .deleg-anim { width: min(100%, calc((100dvh - 48px - 110px) * 2)); height: auto; margin: 0; }
.anim-full-host .circuit-expand { display: none; }
.anim-full-host .circuit-stage, .anim-full-host .dg-stage { cursor: default; }
#animFullHost .circuit-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.anim-full-close {
  position: absolute; z-index: 10; top: 14px; right: 16px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 50%; background: rgba(6,10,16,0.7); color: #EAF2EE; font: 400 24px/1 var(--font-ui); cursor: pointer;
}
.anim-full-close:hover { border-color: rgba(120,220,180,0.55); }
.anim-full-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (max-width: 1000px) { .ep-duo-anim { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .anim-full-host { padding: 56px 8px 8px; } }
#animFullHost .dg-steps li, #animFullHost .circuit-steps li { font-size: 15px; }
#animFullHost .dg-caption, #animFullHost .circuit-caption { font-size: 15.5px; }
#animFullHost .dg-head .home-title, #animFullHost .circuit-head .home-title { font-size: 17px; }
.col-ref.is-off { opacity: .45; }
.dg-head .circuit-expand {
  pointer-events: auto; margin-left: auto; display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; background: rgba(6,10,16,0.55); color: #EAF2EE; cursor: pointer;
  transition: background var(--ep-fast) ease, border-color var(--ep-fast) ease;
}
.dg-head .circuit-expand:hover { border-color: rgba(120,220,180,0.5); background: rgba(10,30,24,0.75); }
.dg-head .circuit-expand:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (max-width: 720px) {
  .dg-head .circuit-expand { box-sizing: border-box; width: 44px; height: 44px; }
  .flow-foot .home-seg button, .acct-earn .home-seg button, .acct-viewseg button { min-width: 44px; min-height: 44px; }
}

/* ---- New miner (2026-11-04): neon violet tags, the note under the pool row,
   the ticker under the home buttons (js/board.js) ---- */
:root, [data-theme="light"] {
  --boost: #7C2AE8;
  --boost-glow: rgba(124,42,232,0.28);
  --boost-soft: rgba(124,42,232,0.08);
  --bm-a: #7C2AE8;
  --bm-b: #0A8FD6;
  --boost-bar-a: #9B3BFF;
  --boost-bar-b: #7417E0;
}
[data-theme="dark"] {
  --boost: #C77DFF;
  --boost-glow: rgba(199,125,255,0.6);
  --boost-soft: rgba(199,125,255,0.10);
  --bm-a: #D49BFF;
  --bm-b: #7FDBFF;
  --boost-bar-a: #C26BFF;
  --boost-bar-b: #9327FF;
}
.ep-boost { display: inline-flex; align-items: center; gap: 7px; color: var(--boost); font-weight: 600; text-shadow: 0 0 10px var(--boost-glow); }
.ep-boost-name { font-size: 12px; letter-spacing: 0.01em; }
.ep-boost b { padding: 2px 8px; border-radius: 999px; font: 700 13px/1.2 var(--font-mono); background: var(--boost-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--boost) 45%, transparent), 0 0 12px var(--boost-glow); }
.ep-tile-sub:has(.ep-boost) { overflow: visible; padding: 3px 0; }
.ep-boost-incl { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }
.ep-boost-note { display: flex; align-items: flex-start; gap: 8px; margin: 14px 2px 0; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.ep-boost-note[hidden] { display: none; }
.ep-boost-bolt { color: var(--boost); text-shadow: 0 0 10px var(--boost-glow); }
.ep-fact-boost dt { color: var(--boost); }

.boost-marquee { position: relative; max-width: 760px; height: 42px; margin: 22px auto 0; overflow: hidden; border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--boost-soft) 18%, var(--boost-soft) 82%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.bm-track { display: flex; align-items: center; width: max-content; height: 100%; animation: bm-scroll 40s linear infinite; }
.boost-marquee:hover .bm-track { animation-play-state: paused; }
.bm-group { display: flex; align-items: center; gap: 22px; padding-right: 22px; white-space: nowrap; font: 500 14px/1 var(--font-ui); letter-spacing: 0.01em; color: var(--text-2); }
.bm-name { font: 700 15px/1.2 var(--font-mono); letter-spacing: 0.02em; color: transparent;
  background: linear-gradient(90deg, var(--bm-a), var(--bm-b) 50%, var(--bm-a)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 8px var(--boost-glow)); animation: bm-shine 6s linear infinite; }
.bm-rate { color: var(--boost); font-family: var(--font-mono); text-shadow: 0 0 10px var(--boost-glow); }
.bm-dot { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--boost); box-shadow: 0 0 8px var(--boost-glow); }
@keyframes bm-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bm-shine { to { background-position: -200% 0; } }
@media (max-width: 640px) {
  .boost-marquee { height: 36px; margin-top: 16px; }
  .bm-group { gap: 16px; padding-right: 16px; font-size: 13px; }
  .bm-name { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .bm-track, .bm-name { animation: none; }
}

/* ---- New miner part on the earnings bars (js/charts.js columns, p[2]) ---- */
.col-boost { position: absolute; left: 0; right: 0; top: 0; z-index: 1; border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; cursor: pointer;
  background: linear-gradient(to bottom, var(--boost-bar-a), var(--boost-bar-b)); box-shadow: 0 0 14px var(--boost-glow), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: opacity 160ms ease, filter 160ms ease, box-shadow 160ms ease; }
.col-bar.has-boost .col-dot { z-index: 2; border-color: var(--boost); }
.col-wrap.is-boost .col-boost { filter: brightness(1.18); box-shadow: 0 0 20px var(--boost-glow), 0 0 4px var(--boost); }
.col-tip.is-boost b { color: var(--boost); }
.acct-earn .col-tip.is-boost { border-color: color-mix(in srgb, var(--boost) 55%, transparent); box-shadow: 0 0 16px var(--boost-glow); }

/* ---- Miners tile: what 100 MH/s brought in 24 h, in a small square on the right, centred on the
   tile's height, with an i ---- */
.ep-tile-split { position: relative; }
.ep-tile-split .ep-tile-facts { grid-template-columns: minmax(0, 1fr); margin-right: 152px; }
.ep-side-card { position: absolute; top: 50%; right: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 128px; height: 128px; padding: 10px; border: 1px solid var(--card-border); border-radius: 16px; box-sizing: border-box; transform: translateY(-50%);
  background: color-mix(in srgb, var(--text-1) 4%, transparent); box-shadow: 0 8px 22px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04); text-align: center; }
.ep-side-label { font-size: 12px; font-weight: 520; color: var(--text-2); }
.ep-side-value { margin-top: 2px; font-size: 28px; line-height: 1.05; font-weight: 600; letter-spacing: -0.03em; color: var(--text-1); font-variant-numeric: tabular-nums; }
.ep-side-unit { font-size: 12px; color: var(--text-3); }
.ep-info-host { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.ep-info { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; font: italic 700 10px/1 Georgia, serif; color: var(--text-2); box-shadow: inset 0 0 0 1.2px var(--card-border-strong, var(--text-3)); cursor: pointer; }
.ep-info:hover, .ep-info:focus-visible, .ep-info-host.is-open .ep-info { color: var(--surface-1, #0E1013); background: var(--text-1); outline: none; }
.ep-info-pop { position: absolute; z-index: 5; right: -10px; bottom: calc(100% + 10px); width: min(250px, 70vw); padding: 9px 11px; border-radius: 10px; font-size: 12px; font-weight: 500; line-height: 1.45; text-align: left; white-space: normal;
  color: var(--ep-tip-ink); background: var(--ep-tip-bg); box-shadow: 0 10px 28px rgba(0,0,0,0.35), inset 0 0 0 1px var(--ep-tip-line); opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity 140ms ease, transform 140ms ease; }
.ep-info-host:hover .ep-info-pop, .ep-info-host:focus-within .ep-info-pop, .ep-info-host.is-open .ep-info-pop { opacity: 1; transform: none; }
.ep-per100-dot { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--cat-pool); box-shadow: 0 0 8px var(--cat-pool-line); }