/* CSJ9 signed-in area (Dashboard · P&L · Settings).
 *
 * Source of truth: docs/superpowers/design/2026-10-05-client-area/
 *   README.md (§Tokens, §Shell, §Components, §Theme), HOMEPAGE_README.md (tokens, type,
 *   wordmark, focus ring, buttons, fields) and the inline styles of design/*.dc.html.
 * Every value below is copied from those files. No Bootstrap on client pages.
 *
 * Theme: <html data-theme="light|dark"> when the user chose one explicitly; no attribute for
 * System, so the prefers-color-scheme block applies the dark tokens. Nothing computed in JS.
 *
 * The prototypes size with cqi units against a root that has container-type:inline-size;
 * .c-root is that root, so the clamp(…cqi…) values below are the prototype values verbatim.
 */

/* ---------------------------------------------------------------- tokens */
:root {
  color-scheme: light;
  /* colour (HOMEPAGE_README §Design tokens + README §Tokens) */
  --bg: #FFFFFF;
  --panel: #F4F6F2;          /* vault band only */
  --ink: #18231D;
  --ink-2: #3E5247;          /* D2 (#289): mid-ink step for chart line slots, 8.4:1 on --bg */
  --muted: #5F6C64;
  --rule: #E3E7E1;
  --rule-panel: #DCE1DA;
  --tag-border: #C4CCC3;
  --chart-fill: #E4E9E1;
  --field-border: #8E9A92;
  --dark: #13201A;           /* strip, footer */
  --dark-rule: #2C3A33;
  --on-dark: #FFFFFF;
  --on-dark-muted: #C3CDC6;
  --footer-label: #A3AFA7;
  --footer-text: #BAC4BD;
  --link: #4C7612;
  --link-hover: #18231D;     /* a:hover in ClientDashboard.dc.html */
  --lime: #8CCA2B;           /* wordmark full stop + focus halo only */
  --error: #A3361F;
  --negative: #A3361F;       /* README §Tokens: the one new token, same value as --error */
  --positive: #27702B;       /* G2 (2026-10-06) Long dot; heat fills since D11 (2026-10-09): was #2F7D32, AA on solid cells */
  --placeholder: #7A867E;
  --tip-shadow: rgba(19,32,26,0.10);
  --btn-bg: #13201A;         /* primary button (README §Theme table) */
  --btn-fg: #FFFFFF;
  --focus-inner: #FFFFFF;    /* focus ring: 2px inner, 4px ink, 7px lime */
  --focus-mid: #18231D;
  /* D3 §5 (2026-10-12-dashboard-clarity): one colour per asset, chart + Allocation; ≥3:1 on --bg
   * (WCAG 1.4.11, measured). --asset-other was #A3AFA7 in the handoff (2.27:1) → #8A968E (3.07:1). */
  --asset-usdt: #3A7CA5; --asset-btc: #C46F17; --asset-xrp: #178A84; --asset-eth: #5B57C9;
  --asset-hype: #C2457A; --asset-xaut: #9A7B2C; --asset-link: #6B7A8A; --asset-usdc: #2B5C8A;
  --asset-vault: #3E5247; --asset-other: #8A968E; --venue-bybit: #3E5247; --venue-hl: #178A84;

  /* type */
  --font-display: "DM Serif Display", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* layout */
  --content-max: 1040px;
  --shell-max: 1200px;       /* D1 §Layout / spec D13: strip, nav, sub-nav, footer on every signed-in page */
  --radius: 2px;
}

/* Dark: README §Theme "Dark token values", verbatim. Two copies: explicit Dark, and System
 * on a dark device (the attribute is absent for System). Keep both blocks identical. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101A15;
  --panel: #17241D;
  --ink: #E8ECE6;
  --ink-2: #C2CBC4;
  --muted: #9AA79F;
  --rule: #25332C;
  --rule-panel: #2C3A33;
  --tag-border: #3C4C43;
  --chart-fill: #203029;
  --field-border: #5E6E64;
  --dark: #0A110D;
  --link: #8CCA2B;
  --link-hover: #FFFFFF;     /* a:hover in ClientDashboardDark.dc.html */
  --error: #E8826A;
  --negative: #E8826A;
  --positive: #6CC070;
  --placeholder: #7F8C84;    /* input::placeholder in ClientWalletsDark.dc.html */
  --tip-shadow: rgba(0,0,0,0.45);
  --btn-bg: #E8ECE6;
  --btn-fg: #101A15;
  --focus-inner: #101A15;
  --focus-mid: #E8ECE6;
  --asset-usdt: #6FA8D6; --asset-btc: #E9A04F; --asset-xrp: #4FC1B8; --asset-eth: #9A92F0;
  --asset-hype: #EA7FA9; --asset-xaut: #D2B160; --asset-link: #9AA9B8; --asset-usdc: #5E8FD0;
  --asset-vault: #C2CBC4; --asset-other: #5E6E64; --venue-bybit: #C2CBC4; --venue-hl: #4FC1B8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #101A15;
    --panel: #17241D;
    --ink: #E8ECE6;
    --ink-2: #C2CBC4;
    --muted: #9AA79F;
    --rule: #25332C;
    --rule-panel: #2C3A33;
    --tag-border: #3C4C43;
    --chart-fill: #203029;
    --field-border: #5E6E64;
    --dark: #0A110D;
    --link: #8CCA2B;
    --link-hover: #FFFFFF;
    --error: #E8826A;
    --negative: #E8826A;
    --positive: #6CC070;
    --placeholder: #7F8C84;
    --tip-shadow: rgba(0,0,0,0.45);
    --btn-bg: #E8ECE6;
    --btn-fg: #101A15;
    --focus-inner: #101A15;
    --focus-mid: #E8ECE6;
    --asset-usdt: #6FA8D6; --asset-btc: #E9A04F; --asset-xrp: #4FC1B8; --asset-eth: #9A92F0;
    --asset-hype: #EA7FA9; --asset-xaut: #D2B160; --asset-link: #9AA9B8; --asset-usdc: #5E8FD0;
    --asset-vault: #C2CBC4; --asset-other: #5E6E64; --venue-bybit: #C2CBC4; --venue-hl: #4FC1B8;
  }
}

/* ------------------------------------------------------------------ base */
body { margin: 0; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
a { color: var(--link); }
a:hover { color: var(--link-hover); }

/* One focus ring for every a, button, input, select, textarea (HOMEPAGE_README §Focus ring;
 * dark values from README §Theme). Scoped to .c-root so it wins over component box-shadows
 * (the active nav underline, the pressed range button). */
.c-root a:focus-visible,
.c-root button:focus-visible,
.c-root input:focus-visible,
.c-root select:focus-visible,
.c-root textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-inner), 0 0 0 4px var(--focus-mid), 0 0 0 7px var(--lime);
}

.c-root {
  container-type: inline-size;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
}

/* ------------------------------------------------------------ type scale */
.c-label {            /* mono label */
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
.c-caption {          /* mono caption: "as of 13:00 UTC", "Unified account" */
  font-family: var(--font-mono); font-size: 12px; color: var(--muted);
}
.c-note {             /* 14px muted note / footnote */
  margin: 0; font-size: 14px; color: var(--muted);
}
.c-nodata { color: var(--muted); }   /* "—" for missing values */
.neg { color: var(--negative); }     /* losses only; gains stay ink */

/* ----------------------------------------------------------------- strip */
.c-strip { background: var(--dark); color: var(--on-dark); }
.c-strip__inner {
  max-width: var(--shell-max); margin: 0 auto; padding: 0 clamp(20px, 5cqi, 40px); height: 44px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
}
.c-strip__private { color: var(--on-dark-muted); }
.c-strip__right { display: flex; align-items: center; gap: 20px; }
.c-strip__user { color: var(--on-dark-muted); text-transform: none; letter-spacing: 0.02em; }
/* "Log out" is a POST form (Django 5 LogoutView); the button is drawn as the prototype's link. */
.c-strip__logout { margin: 0; display: flex; }
.c-strip__logout button {
  background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--on-dark); min-height: 44px; display: flex; align-items: center;
}
/* "EN · ES" (#287): same drawing as Log out; the current language in --on-dark, the other muted. */
.c-strip__lang { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--on-dark-muted); }
.c-strip__lang button {
  background: transparent; border: 0; padding: 0 2px; margin: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--on-dark-muted); min-height: 44px; min-width: 24px;
}
.c-strip__lang button[aria-current="true"] { color: var(--on-dark); }
/* D1: below 480px "Private" is hidden (the footer still says it) and the gap is 12px; below 360px
 * the username truncates with an ellipsis (max 84px). */
.c-strip__user { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.c-strip__right { margin-left: auto; min-width: 0; }
@media (max-width: 479.98px) {
  .c-strip__private { display: none; }
  .c-strip__right { gap: 12px; }
}
@media (max-width: 359.98px) { .c-strip__user { max-width: 84px; } }

/* ------------------------------------------------------------------- nav */
.c-nav { border-bottom: 1px solid var(--rule); }
.c-nav__inner {
  max-width: var(--shell-max); margin: 0 auto; padding: 0 clamp(20px, 5cqi, 40px); min-height: 76px;
  display: flex; align-items: center; justify-content: space-between; gap: 0 16px; flex-wrap: wrap;
}
.c-wordmark, .c-wordmark:hover {
  text-decoration: none; color: var(--ink); display: flex; align-items: baseline; gap: 3px;
  min-height: 44px; padding-top: 6px;
}
.c-wordmark__text { font-family: var(--font-display); font-size: 31px; line-height: 1; letter-spacing: -0.01em; }
.c-wordmark__dot { width: 6px; height: 6px; background: var(--lime); display: block; }
.c-nav__links { display: flex; gap: 4px; font-size: 16px; flex-wrap: wrap; }
.c-nav__link, .c-nav__link:hover {
  color: var(--muted); text-decoration: none; min-height: 44px; display: flex; align-items: center;
  padding: 0 10px;
}
.c-nav__links > .c-nav__link:last-child { padding: 0 0 0 10px; }
/* On Settings the active "Settings" link keeps 10px on both sides (ClientSettings/ClientWallets.dc.html). */
.c-nav__links > .c-nav__link[aria-current="page"]:last-child { padding: 0 10px; }
.c-nav__link[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }

/* Staff "More ▾" (ClientWallets.dc.html, staff). The open menu is not drawn in the handoff:
 * it uses only the tokens and the nav link metrics above. */
.c-more { position: relative; display: flex; }
.c-more__btn {
  background: transparent; border: 0; font: inherit; font-size: 16px; color: var(--muted);
  min-height: 44px; padding: 0 0 0 10px; cursor: pointer;
}
.c-more__menu {
  position: absolute; right: 0; top: 100%; z-index: 10; margin: 0; padding: 0; list-style: none;
  background: var(--bg); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule);
}
.c-more__menu[hidden] { display: none; }
.c-more__menu .nav-item + .nav-item { border-top: 1px solid var(--rule); }
.c-more__menu .nav-link, .c-more__menu .nav-link:hover {
  color: var(--muted); text-decoration: none; min-height: 44px; display: flex; align-items: center;
  padding: 0 10px; font-size: 16px; white-space: nowrap;
}
.c-more__menu .nav-link.active { color: var(--ink); }

/* ---------------------------------------------------------- Bybit sub-nav */
.c-subnav { border-bottom: 1px solid var(--rule); }
.c-subnav__inner {
  max-width: var(--shell-max); margin: 0 auto; padding: 0 clamp(20px, 5cqi, 40px);
  display: flex; align-items: center; gap: 20px; overflow-x: auto; white-space: nowrap;
}
.c-subnav__label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.c-subnav__links { display: flex; gap: 4px; font-size: 15px; }
.c-subnav__link, .c-subnav__link:hover {
  color: var(--ink); text-decoration: none; min-height: 48px; display: flex; align-items: center;
  padding: 0 8px;
}

/* ------------------------------------------------------------------ main */
.c-main {
  /* P&L / Settings: 1040px main aligned to the 1200px shell's left edge (D1 §Layout), not centred. */
  max-width: 1040px; margin: 0 auto 0 max(0px, calc((100% - var(--shell-max)) / 2));
  padding: clamp(36px, 6cqi, 56px) clamp(20px, 5cqi, 40px) clamp(64px, 10cqi, 112px);
  display: flex; flex-direction: column; gap: clamp(48px, 7cqi, 72px);
}
/* Title row + optional block under it (the Dashboard summary sits 28px below the H1). */
.c-head { display: flex; flex-direction: column; gap: 28px; }

/* Page title row */
.c-title-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px 24px; flex-wrap: wrap;
}
.c-title-row__h1 {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(40px, 5.4cqi, 52px); line-height: 1.05; letter-spacing: -0.015em;
}
.c-title-row__caption {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--muted);
}

/* Section header */
.c-section-head {
  border-top: 1px solid var(--ink); padding-top: 14px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
}
.c-section-head--controls { align-items: center; gap: 8px 16px; flex-wrap: wrap; }  /* with range buttons */
.c-section-head__h2 {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(26px, 3cqi, 30px); line-height: 1.2;
}

/* ---------------------------------------------------------------- footer */
.c-footer { background: var(--dark); color: var(--on-dark); }
.c-footer__inner {
  max-width: var(--shell-max); margin: 0 auto; padding: 0 clamp(20px, 5cqi, 40px);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 0 24px; min-height: 64px;
}
.c-footer__place { font-size: 15px; }
.c-footer__label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-dark-muted);
}

/* --------------------------------------------------------------- summary */
.c-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); column-gap: 24px;
  border-top: 2px solid var(--ink);
}
.c-summary__item { padding: 14px 0 16px; border-bottom: 1px solid var(--rule); }
.c-summary__label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
}
.c-summary__value {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: clamp(22px, 2.6cqi, 26px); line-height: 1.3; margin-top: 6px;
}
.c-summary__note { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-top: 2px; }
.c-summary__foot { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
/* Facts variant: Hyperliquid account block and vault facts (14px 0 padding, 22px values). */
.c-summary--facts .c-summary__item { padding: 14px 0; }
.c-summary--facts .c-summary__value { font-size: 22px; line-height: inherit; margin-top: 4px; }
.c-summary__text { font-size: 18px; margin-top: 6px; }   /* "No current deposit" */

/* ------------------------------------------------------------ exchange tag */
.c-tag {
  display: inline-flex; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; border: 1px solid var(--tag-border); padding: 2px 6px;
  border-radius: 2px; line-height: 1.4; color: var(--ink);
}

/* ------------------------------------------------------------- data table
 * One markup, two layouts (README §Components: below 640px of content → stacked rows).
 *   <div class="c-table c-table--positions c-table--stack" role="table">
 *     <div class="c-table__head" role="row"><span>…</span><span class="num">…</span></div>
 *     <div class="c-table__row" role="row">
 *       <div class="c-table__line">                       (mobile line 1)
 *         <div class="c-table__lead"> tag · <span class="c-table__sym"> · <span class="c-table__side"> </div>
 *         <span class="num c-table__end">P&L</span>          (last column on desktop)
 *       </div>
 *       <div class="c-table__grid">                       (mobile lines 2–3, 3 columns: Size Entry Mark / Margin Leverage)
 *         <div class="num"><span class="c-table__cell-label">Size</span><span class="c-table__cell-value">…</span></div> …
 *       </div>
 *     </div>
 *   </div>
 * On desktop the line/lead/grid wrappers are display:contents, so every cell is a grid column. */
.c-table { font-variant-numeric: tabular-nums; }
.c-table--positions { --c-cols: 120px 1.2fr 0.7fr 0.8fr 1fr 1fr 0.9fr 0.8fr 1.3fr; }   /* #467: + Margin, Leverage */
.c-table--vault     { --c-cols: 1.1fr 0.6fr 0.8fr 1fr 1fr 1.1fr; }
.c-table__head, .c-table__row { display: grid; grid-template-columns: var(--c-cols); gap: 16px; }
.c-table__head {
  padding: 10px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--tag-border);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
}
.c-table__row {
  padding: 12px 0; border-bottom: 1px solid var(--rule); align-items: center;
  font-family: var(--font-mono); font-size: 16px;
}
.c-table--vault .c-table__row { align-items: normal; }
.c-table__total { font-weight: 500; border-bottom: 2px solid var(--ink); }
.c-table .num { text-align: right; }
.c-table__side { font-family: var(--font-body); }
/* Side dot (GTP decision G2): 8px, before Long / Short; the word keeps its colour. */
.c-side-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px;
  vertical-align: 0.05em;
}
.c-side-dot--long { background: var(--positive); }
.c-side-dot--short { background: var(--negative); }
.c-table__full { grid-column: 2 / -1; font-family: var(--font-body); color: var(--muted); }  /* unavailable row */
.c-table__line, .c-table__lead, .c-table__grid { display: contents; }
.c-table__end { order: 1; }
.c-table__cell-label { display: none; }
.c-panel .c-table__row { border-bottom-color: var(--rule-panel); }
.c-empty {   /* "No open positions." ruled block */
  margin: 16px 0 0; padding: 18px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule);
  color: var(--muted); font-size: 16px;
}

@media (max-width: 680px) {
  .c-table--stack { border-top: 2px solid var(--ink); }
  .c-table--stack .c-table__head { display: none; }
  .c-table--stack .c-table__row { display: block; padding: 14px 0; }
  .c-table--stack .c-table__line { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .c-table--stack .c-table__lead { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .c-table--stack .c-table__side { font-size: 15px; color: var(--muted); }
  .c-table--stack .c-table__grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px;
  }
  .c-table--stack .c-table__grid .num { text-align: left; }
  .c-table--stack .c-table__cell-label {
    display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  }
  .c-table--stack .c-table__cell-value { display: block; font-size: 15px; }
  .c-table--stack .c-table__full { display: block; margin: 8px 0 0; font-size: 16px; }
}

/* ---------------------------------------------------------------- notice */
.c-notice { background: var(--panel); padding: 14px 16px; font-size: 16px; border-top: 2px solid var(--ink); }
.c-notice--info { border-top-color: var(--ink); }
.c-notice--problem { border-top-color: var(--negative); }
.c-notice a { color: var(--link); text-underline-offset: 4px; }

/* --------------------------------------------------------------- buttons */
.c-btn {
  display: inline-flex; align-items: center; min-height: 48px; box-sizing: border-box;
  font: inherit; font-size: 16px; font-weight: 500; border-radius: 2px; cursor: pointer;
  text-decoration: none;
}
.c-btn--primary, .c-btn--primary:hover { background: var(--btn-bg); color: var(--btn-fg); border: 0; padding: 0 24px; }
.c-btn--outlined, .c-btn--outlined:hover { background: transparent; border: 1px solid var(--ink); color: var(--ink); padding: 0 20px; }
.c-btn[aria-busy="true"] { opacity: 0.6; }

/* ---------------------------------------------------------------- fields */
.c-field { display: flex; flex-direction: column; gap: 8px; }
.c-field__label { font-size: 16px; font-weight: 500; }
.c-field__label-opt { font-weight: 400; color: var(--muted); }
.c-field__input {
  height: 48px; box-sizing: border-box; border: 1px solid var(--field-border); border-radius: 2px;
  padding: 0 14px; font: inherit; font-size: 16px; color: var(--ink); background: var(--bg); width: 100%;
}
.c-field__input--mono { font-family: var(--font-mono); }
.c-field__input::placeholder { color: var(--placeholder); }
.c-field__input[aria-invalid="true"] { border-color: var(--error); }
select.c-field__input {
  padding: 0 44px 0 14px; appearance: none; -webkit-appearance: none;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2318231D' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center;
}
.c-field__error { font-size: 15px; color: var(--error); }

/* ------------------------------------------------- vault panel (--panel band) */
.c-panel {
  background: var(--panel); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: clamp(24px, 4cqi, 36px) clamp(20px, 4cqi, 36px);
  margin: 0 calc(-1 * clamp(0px, 2cqi, 36px));
}
.c-panel .c-summary__item { border-bottom-color: var(--rule-panel); }

/* --------------------------------------------------------- range buttons */
.c-range { display: flex; gap: 2px; }
.c-range__btn {
  background: transparent; border: 0; min-height: 44px; min-width: 44px; padding: 0 8px;
  font-family: var(--font-mono); font-size: 13px; color: var(--muted); cursor: pointer;
}
.c-range__btn[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }

/* =====================================================================================
 * Dashboard (T12) — ClientDashboard.dc.html / ClientDashboardDark.dc.html inline values.
 * ===================================================================================== */
.c-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.c-mono-num { font-variant-numeric: tabular-nums; }
.c-section-head + .c-table,
.c-section-head + .c-notice,
.c-sec__body > .c-table:first-child,
.c-sec__body > .c-notice:first-child { margin-top: 16px; }

/* Onboarding panel (state D) */
.c-onboard { border-top: 2px solid var(--ink); padding-top: 24px; }
.c-onboard__h2 {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 3.4cqi, 34px); line-height: 1.15;
}
.c-onboard__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 40px; margin-top: 28px;
}
.c-onboard__cell {
  border-top: 1px solid var(--rule); padding: 18px 0 22px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.c-onboard__label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}

/* _hl_section: one block per wallet */
.c-hl { margin-top: 16px; border-top: 2px solid var(--ink); }
.c-hl__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--rule); flex-wrap: wrap;
}
.c-hl__addr { font-family: var(--font-mono); font-size: 16px; }
.c-hl__missing { margin: 0; padding: 16px 0; border-bottom: 1px solid var(--rule); font-size: 16px; color: var(--muted); }
.c-hl__vault { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 16px; }
.c-hl__note { margin-top: 10px; }
.c-summary--plain { border-top: 0; }

/* _vault_card (inside .c-panel) */
.c-panel__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; }
.c-panel__link {
  color: var(--link); font-size: 16px; font-weight: 500; text-underline-offset: 4px;
  min-height: 44px; display: inline-flex; align-items: center;
}
.c-panel__missing {
  margin: 16px 0 0; padding: 16px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule-panel);
  font-size: 16px; color: var(--muted);
}
.c-panel__facts { margin-top: 16px; }
.c-panel__note { margin-top: 10px; }
.c-panel__foot { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-top: 10px; }
.c-panel__subhead {
  margin-top: 36px; display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px 16px; flex-wrap: wrap;
}
.c-panel__h3 { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.35; }
.c-panel__subhead + .c-table,
.c-panel__subhead + .c-panel__missing,
.c-panel__subhead + .c-empty { margin-top: 12px; }
.c-panel .c-empty { border-bottom-color: var(--rule-panel); }

/* _chart: account value */
.c-range__btn, .c-range__btn:hover {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  text-decoration: none; color: var(--muted); line-height: normal;   /* as the prototype's <button> */
}
.c-range__btn[aria-pressed="true"]:hover { color: var(--ink); }
.c-legend {
  display: flex; gap: 20px; margin-top: 14px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.c-legend__item { display: flex; align-items: center; gap: 8px; }
.c-legend__line { width: 22px; height: 0; border-top: 2px solid var(--ink); display: block; }
.c-legend__line--dashed { border-top: 2px dashed var(--muted); }
.c-chart {
  position: relative; height: clamp(180px, 24cqi, 240px); margin-top: 12px;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--tag-border);
  background: linear-gradient(var(--rule), var(--rule)) 0 50% / 100% 1px no-repeat;
}
.c-chart__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.c-chart__area { fill: var(--chart-fill); }
/* G5 (controller ruling): both areas translucent so overlaps show through; larger series behind. */
.c-chart__area--primary { fill-opacity: 0.7; }
.c-chart__area--secondary { fill-opacity: 0.45; }
.c-chart__line { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.c-chart__line--secondary { stroke: var(--muted); stroke-dasharray: 5 4; }
.c-chart__dot {
  position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--ink);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--ink); transform: translate(-50%, -50%);
}
.c-chart__dot--secondary { width: 7px; height: 7px; background: var(--bg); box-shadow: 0 0 0 1.5px var(--muted); }
.c-chart__max {
  position: absolute; left: 0; top: 4px; font-family: var(--font-mono); font-size: 12px; color: var(--muted);
  background: var(--bg); padding-right: 6px; font-variant-numeric: tabular-nums;
}
.c-chart__x {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-family: var(--font-mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
}

/* _assets */
.c-table--assets .c-table__row { align-items: normal; }
.c-table--assets .c-table__end { order: 0; }
.c-coin-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* 22px coin circle. Icon = self-hosted CC0 single-colour SVG used as a mask filled with --ink
 * (README: "prefer pre-made single-colour SVGs filled with --ink"); no icon → monogram. */
.c-coin {
  position: relative; width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%;
  background: var(--chart-fill); box-shadow: inset 0 0 0 1px var(--rule-panel);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 10px; font-weight: 600; color: var(--ink); overflow: hidden;
}
.c-coin__icon {
  position: absolute; inset: 0; background: var(--ink);
  -webkit-mask: var(--icon) center / 22px 22px no-repeat; mask: var(--icon) center / 22px 22px no-repeat;
}
/* The monogram stays in the flow under an icon (hidden) so the row keeps the text baseline,
 * as in the prototype where the <img> overlays the monogram. */
.c-coin__under { visibility: hidden; }
.c-table__total-label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; align-self: center; }
.c-table__total-pair { display: contents; }
.c-table__total-real { order: 1; }
.c-table__total-bal { order: 2; }
.c-table__total-end { grid-column: -2 / -1; }      /* positions Total (G1): value in the P&L column */
.c-table__total-mid { display: contents; }          /* #467: Σ margin + portfolio leverage under their columns */
.c-table__total-mid .c-table__total-cell:first-child { grid-column: 7; }
.c-table__total-mid .c-table__total-cell:last-child { grid-column: 8; }
.c-table__narrow-only { display: none; }

@media (max-width: 680px) {
  .c-table--stack .c-table__tagcell { display: contents; }
  .c-table--vault.c-table--stack .c-table__lead { align-items: baseline; }
  .c-table--assets.c-table--stack .c-table__line { align-items: baseline; }
  .c-table--stack .c-table__wide-only { display: none; }
  .c-table--stack .c-table__narrow-only { display: inline; }
  .c-table--stack .c-table__wrap { overflow-wrap: anywhere; }
  .c-table--stack .c-table__total { display: flex; justify-content: space-between; }
  .c-table--stack .c-table__total-label { align-self: auto; }
  .c-table--stack .c-table__total-pair { display: inline; }
  .c-table--stack .c-table__total-mid { display: flex; gap: 16px; margin-left: auto; margin-right: 16px; }
  .c-table--stack .c-table__total-cell { text-align: right; font-size: 15px; }
}

/* =====================================================================================
 * P&L (T13) — ClientPnl.dc.html / ClientPnlDark.dc.html inline values.
 * ===================================================================================== */
/* _pnl_block, desktop: one table */
.c-pnl { font-variant-numeric: tabular-nums; }
.c-pnl__head, .c-pnl__row {
  display: grid; grid-template-columns: minmax(0, 2.3fr) repeat(5, minmax(0, 1fr)); gap: 16px;
}
.c-pnl__head {
  padding: 10px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--tag-border);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
}
.c-pnl__head > span { text-align: right; }
.c-pnl__row { align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.c-pnl__label { font-size: 17px; line-height: 1.35; }
.c-pnl__note { font-size: 14px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.c-pnl__val { text-align: right; font-family: var(--font-mono); font-size: 16px; }
.c-pnl__star { font-size: 12px; margin-left: 1px; }
.c-pnl__row--hl { border-bottom: none; }
.c-pnl__row--vault {
  background: var(--panel); padding: 12px 0 14px; border-top: 1px solid var(--rule);
}
.c-pnl__row--vault .c-pnl__lead { padding-left: 24px; }
.c-pnl__row--vault .c-pnl__label { font-size: 16px; }
.c-pnl__row--total { font-weight: 500; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }

/* _pnl_block, mobile: one list per block (prototype `narrow` = root narrower than 640px) */
.c-pnl-m { display: none; flex-direction: column; gap: 28px; }
.c-pnl-m__block { border-top: 2px solid var(--ink); }
.c-pnl-m__block--vault { background: var(--panel); padding: 14px 16px 6px; border-top: none; }
.c-pnl-m__block--total .c-pnl-m__label,
.c-pnl-m__block--total .c-pnl-m__val { font-weight: 500; }
.c-pnl-m__label { font-size: 17px; line-height: 1.35; }
.c-pnl-m__list { margin-top: 10px; }
.c-pnl-m__item {
  display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}
.c-pnl-m__period {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); align-self: center;
}
.c-pnl-m__val { font-family: var(--font-mono); font-size: 16px; }
@media (max-width: 639.98px) {
  .c-pnl { display: none; }
  .c-pnl-m { display: flex; }
}

.c-pnl-foot {
  margin-top: 16px; display: flex; flex-direction: column; gap: 4px;
  font-size: 14px; line-height: 1.55; color: var(--muted);
}
.c-pnl-foot p { margin: 0; }

/* Empty state: ruled block + "Settings →" */
.c-pnl-empty {
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 20px 0;
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between;
}
.c-pnl-empty__text { margin: 0; font-size: 17px; }
.c-pnl-empty__link {
  color: var(--link); font-weight: 500; font-size: 16px; text-underline-offset: 4px;
  min-height: 44px; display: inline-flex; align-items: center;
}

/* Daily P&L bars */
.c-pnl-legend__swatch { width: 10px; height: 10px; background: var(--ink); display: block; }
.c-pnl-legend__swatch--bybit { border: 1.5px solid var(--ink); box-sizing: border-box; background: var(--bg); }
.c-bars { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-top: 12px; }
.c-bars__plot {
  position: relative; height: clamp(180px, 24cqi, 240px);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.c-bars__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.c-bars__hl { fill: var(--ink); }
.c-bars__by { fill: var(--bg); stroke: var(--ink); stroke-width: 1; }
.c-bars__zero { stroke: var(--ink); stroke-width: 1; }
.c-bars__y {
  display: flex; flex-direction: column; justify-content: space-between; margin: -8px 0;
  font-family: var(--font-mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
  text-align: right;
}
.c-bars__y0 { color: var(--ink); }
.c-bars__x {
  display: flex; justify-content: space-between; margin-top: 8px; padding-right: 56px;
  font-family: var(--font-mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
}

/* =====================================================================================
 * Settings (T14) — SETTINGS.md + ClientSettings.dc.html / ClientSettingsDark.dc.html,
 * ClientWallets.dc.html (_wallets_card), SettingsComponents.dc.html (frame 5a). Dark = token swap.
 * ===================================================================================== */
.c-main--settings { gap: clamp(56px, 8cqi, 88px); }     /* groups 56–88px apart */
.c-main--settings .c-head { gap: 20px; }                 /* title row → anchor row */

/* Anchor row: links, not a segmented control */
.c-anchors { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); overflow-x: auto; }
.c-anchors__row { display: flex; gap: 8px; white-space: nowrap; }
.c-anchors__link, .c-anchors__link:hover {
  color: var(--ink); text-decoration: none; min-height: 48px; display: flex; align-items: center;
  padding: 0 12px; font-size: 16px;
}
.c-anchors__link:first-child { padding: 0 12px 0 0; }

/* Group (section) + H2 on the homepage section scale */
.c-group { border-top: 2px solid var(--ink); padding-top: 20px; display: flex; flex-direction: column; gap: 32px; }
.c-group--profile { gap: 28px; }
.c-group__h2 {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 4.4cqi, 44px); line-height: 1.1; letter-spacing: -0.015em;
}

/* Sub-block: aside/main */
.c-sub { border-top: 1px solid var(--ink); padding-top: 16px; display: flex; flex-wrap: wrap; gap: 16px 48px; }
.c-sub--plain { border-top: 0; padding-top: 0; }
.c-sub__aside { flex: 1 1 200px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.c-sub__spacer { flex: 1 1 200px; }
.c-sub__h3 {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(26px, 3cqi, 30px); line-height: 1.2;
}
.c-sub__h3--aside { flex: 1 1 200px; }
.c-sub__main { flex: 3 1 560px; min-width: 0; }
.c-sub__main--wallets { display: flex; flex-direction: column; gap: 24px; }
.c-sub__main--ta { display: flex; flex-direction: column; gap: 20px; }
.c-sub__main--appearance { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.c-sub__main--selects { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px 20px; }
.c-sub__main--alloc { display: flex; flex-direction: column; gap: 28px; }
.c-sub__main--good { display: flex; flex-direction: column; gap: 20px; }

/* Forms */
.c-form { display: flex; flex-direction: column; gap: 22px; }
.c-form--profile { max-width: 720px; }
.c-form--security { max-width: 420px; }
.c-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px 20px; }
.c-prefs { display: flex; flex-direction: column; gap: 32px; }
.c-field__hint { font-size: 14px; color: var(--muted); }
.c-field__hint--num { font-variant-numeric: tabular-nums; }
.c-field__input--readonly { border-color: var(--rule); background: var(--panel); cursor: default; }
.c-exchanges {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 56px 56px; align-items: start;
}
.c-exchanges__col { display: flex; flex-direction: column; gap: 48px; }

/* Lines of text */
.c-intro { margin: 0; max-width: 40em; text-wrap: pretty; }
.c-help { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 40em; }
.c-help a { color: var(--link); text-underline-offset: 4px; }
.c-ta__first { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }

/* Password field: homepage field + 76px right padding, Show/Hide text button inside */
.c-pw { position: relative; }
.c-pw__input { padding-right: 76px; }
.c-pw__toggle {
  position: absolute; right: 2px; top: 2px; height: 44px; min-width: 60px; padding: 0 12px;
  background: transparent; border: 0; font: inherit; font-size: 15px; font-weight: 500;
  color: var(--link); text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}

/* Bybit: ruled facts row + expiry line */
.c-facts { border-top: 2px solid var(--ink); }
.c-facts__row {
  display: flex; justify-content: space-between; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--rule); flex-wrap: wrap; font-size: 16px;
}
.c-facts__value { font-family: var(--font-mono); font-size: 16px; }
.c-expiry { margin: 0; font-family: var(--font-mono); font-size: 14px; font-variant-numeric: tabular-nums; color: var(--muted); }
.c-expiry--error { color: var(--error); }

/* Text button (Unlink, Later, Approve now, check) */
.c-textbtn {
  background: transparent; border: 0; font: inherit; font-size: 16px; font-weight: 500; color: var(--link);
  text-decoration: underline; text-underline-offset: 4px; min-height: 44px; padding: 0 2px; cursor: pointer;
}
.c-textbtn--wide { padding: 0 4px; }
.c-textbtn--inline { vertical-align: middle; margin: -12px 0; }

/* Outlined button, 44px variant (Renew, Approve) */
.c-btn--sm { min-height: 44px; }
.c-btn--outlined.c-btn--sm { padding: 0 18px; }

/* _wallets_card (frames 1l–1t) */
.c-wallets { border-top: 2px solid var(--ink); }
.c-wallets__empty { margin: 0; padding: 16px 0; border-bottom: 1px solid var(--rule); color: var(--muted); font-size: 16px; }
.c-wallet {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; padding: 8px 0;
  border-bottom: 1px solid var(--rule);
}
.c-wallet__addr { font-family: var(--font-mono); font-size: 16px; flex: 0 0 auto; min-width: 130px; }
.c-wallet__label { flex: 1 1 80px; font-size: 16px; color: var(--muted); }
.c-notice[hidden] { display: none; }
.c-connect { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.c-staff-form { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: flex-end; }
.c-staff-form__addr { flex: 2 1 260px; }
.c-staff-form__label { flex: 1 1 180px; }

/* Trading access */
.c-ta__root { display: contents; }
.c-ta__list { border-top: 2px solid var(--ink); }
.c-ta__wallet { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 16px; }
.c-ta__row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid var(--rule);
}
.c-ta__row--fee { min-height: 44px; }
.c-ta__text { font-size: 16px; }
.c-ta__fee-actions { display: flex; gap: 4px 12px; align-items: center; }
.c-ta__managed { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 14px 0; font-size: 16px; }
.c-ta__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.c-ta__referral { margin: 0; font-size: 15px; color: var(--muted); }
.c-ta__code { font-family: var(--font-mono); color: var(--ink); }
.c-ta__us { display: flex; flex-direction: column; gap: 6px; }
.c-mono-tab { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Checkbox (SettingsComponents "Checkbox") */
.c-check { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-size: 16px; }
.c-check--top { align-items: flex-start; padding-top: 10px; }
.c-check__box { position: relative; width: 22px; height: 22px; flex: 0 0 22px; }
.c-check--top .c-check__box { margin-top: 1px; }
.c-check__input {
  appearance: none; -webkit-appearance: none; margin: 0; width: 22px; height: 22px;
  border: 1.5px solid var(--ink); border-radius: 2px; background: transparent; cursor: pointer;
  display: block; box-sizing: border-box;
}
.c-check__input:checked { background: var(--ink); }
.c-check__input[aria-invalid="true"] { border-color: var(--error); }
.c-check__mark {
  position: absolute; left: 8px; top: 3px; width: 6px; height: 12px;
  border-right: 2px solid var(--bg); border-bottom: 2px solid var(--bg);
  transform: rotate(45deg); pointer-events: none; opacity: 0;
}
.c-check__input:checked + .c-check__mark { opacity: 1; }
.c-check__error { font-size: 15px; color: var(--error); padding-left: 34px; }
.c-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.c-legend-label { padding: 0; font-size: 16px; font-weight: 500; margin-bottom: 6px; }
.c-checks { display: flex; flex-wrap: wrap; gap: 0 28px; }

/* Number + unit */
.c-alloc { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px 20px; }
.c-unit { position: relative; }
.c-unit__input { padding: 0 40px 0 14px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.c-unit__unit {
  position: absolute; right: 14px; top: 0; height: 48px; display: flex; align-items: center;
  font-family: var(--font-mono); font-size: 16px; color: var(--muted); pointer-events: none;
}

/* Doing Good */
.c-good__text { display: flex; flex-direction: column; gap: 4px; }
.c-good__link { align-self: flex-start; }
.c-good__select { max-width: 280px; }

/* Appearance: segmented radiogroup (README §Theme) */
.c-seg { display: inline-flex; border: 1px solid var(--ink); border-radius: 2px; overflow: hidden; }
.c-seg__btn {
  min-height: 44px; min-width: 92px; padding: 0 18px; border: 0; font: inherit; font-size: 16px;
  font-weight: 500; cursor: pointer; background: transparent; color: var(--ink);
}
.c-seg__btn[aria-checked="true"] { background: var(--ink); color: var(--bg); }

/* Series toggle (GTP decision A): the legend row's labels become .c-range links, swatch kept. */
.c-legend--toggle { text-transform: none; letter-spacing: normal; margin-top: 6px; }
.c-legend--toggle .c-legend__item { gap: 8px; }

/* =====================================================================================
 * Collapsible sections (#286 S1) — header per D1 "Collapsible section header" (#288):
 * [h2 + caption/controls (flex-wrap)] [44×44 chevron toggle], 1px --ink top rule. Collapsed: the
 * caption/controls give way to a one-line mono summary, a 1px --rule rule sits 8px below, the body
 * is `hidden` (kept in the DOM). State = csj9_cs cookie, applied server-side (spec D12), no flash.
 * ===================================================================================== */
.c-sec__head { border-top: 1px solid var(--ink); padding-top: 8px; display: flex; align-items: flex-start; gap: 12px; }
.c-sec__title {
  flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; min-height: 44px;
}
.c-sec__extras { display: contents; }
.c-sec__title .c-range, .c-sec__title .c-panel__link { margin-left: auto; }
.c-sec__summary { display: none; }
.c-sec__summary .c-sep { color: var(--muted); }
.c-sec__rule { display: none; }
.c-sec.is-collapsed .c-sec__extras { display: none; }
.c-sec.is-collapsed .c-sec__summary {
  display: block; flex: 1 1 160px; min-width: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.c-sec.is-collapsed .c-sec__rule { display: block; border-bottom: 1px solid var(--rule); margin-top: 8px; }
.c-sec__toggle {
  flex: 0 0 44px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; border-radius: 2px; cursor: pointer;
  color: var(--ink); padding: 0; margin: 0;
}
.c-sec__toggle:hover { background: var(--panel); border-color: var(--tag-border); }
.c-panel .c-sec__toggle:hover { background: var(--rule-panel); }
.c-sec__chev {
  width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-135deg); margin-top: 4px; transition: transform 0.15s; box-sizing: border-box;
}
.c-sec__toggle[aria-expanded="false"] .c-sec__chev { transform: rotate(45deg); margin-top: -4px; }
.c-sec__body[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .c-sec__chev { transition: none; } }
/* Vault on --panel: no top rule, no collapsed rule; padding shrinks while collapsed. */
.c-panel .c-sec__head { border-top: 0; padding-top: 0; }
.c-panel.is-collapsed { padding-top: clamp(14px, 2cqi, 20px); padding-bottom: clamp(14px, 2cqi, 20px); }
.c-panel.is-collapsed .c-sec__rule { display: none; }

/* Heat-shaded numbers (#286 S1, decision D1) — colours painted by users/static/users/heat.js from
 * the --positive / --negative / --tag-border tokens; this only shapes the fill. */
.c-heat { border-radius: var(--radius); }
/* D1 heat tile: sits inside the cell, right-aligned, never touches the row rules. */
.c-tile { border-radius: 2px; line-height: 1.4; white-space: nowrap; }
.c-table--positions .c-tile { padding: 4px 8px; }
@media (max-width: 680px) { .c-table--positions .c-tile { padding: 3px 8px; font-size: 15px; } }

/* Interactive charts (#286 S1, users/static/users/charts.js): canvas box + "Reset zoom". */
.c-ichart { position: relative; height: clamp(180px, 24cqi, 240px); margin-top: 12px; }
.c-ichart__reset {
  background: transparent; border: 0; min-height: 44px; padding: 0 8px; cursor: pointer;
  font-family: var(--font-mono); font-size: 13px; color: var(--link); text-decoration: underline;
  text-underline-offset: 4px;
}

/* =====================================================================================
 * Dashboard v2 (#288) — handoff D1 (2026-10-09-client-area-v2/D1-dashboard-v2, ClientDashboardV2.dc.html).
 * ===================================================================================== */
.c-main--dash { max-width: var(--shell-max); margin: 0 auto; gap: clamp(40px, 6cqi, 64px); }
.c-dash { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(48px, 6cqi, 64px); align-items: start; }
.c-dash > * { min-width: 0; }
@media (min-width: 1200px) {
  .c-dash { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 40px; }   /* D3 §1 */
  .c-span-4 { grid-column: span 4; }
  .c-span-5 { grid-column: span 5; }
  .c-span-7 { grid-column: span 7; }
  .c-span-8 { grid-column: span 8; }
}
.c-span-12 { grid-column: 1 / -1; }
.c-summary__stale { margin-top: 20px; }
.c-summary__short { display: none; }
/* D3 §5b (390): 2×2 — Total, Open positions / Bybit, Hyperliquid; short labels, 18px values */
@media (max-width: 639.98px) {
  .c-main--dash .c-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .c-main--dash .c-summary__item--positions { order: 1; }
  .c-main--dash .c-summary__item--bybit { order: 2; }
  .c-main--dash .c-summary__item--hyperliquid { order: 3; }
  .c-main--dash .c-summary__item { padding: 14px 0 12px; }
  .c-main--dash .c-summary__label { font-size: 11px; letter-spacing: 0.14em; }
  .c-main--dash .c-summary__value { font-size: 18px; margin-top: 6px; }
  .c-main--dash .c-summary__long { display: none; }
  .c-main--dash .c-summary__short { display: inline; }
}
.c-foot { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.c-foot p { margin: 0; text-wrap: pretty; }

/* Open positions: 44px rows, 6px vertical padding (D1) */
.c-table--positions .c-table__row { padding: 6px 0; min-height: 44px; box-sizing: border-box; }
.c-table--positions .c-table__total { padding: 12px 0; }
.c-table--positions .c-table__total-end { padding-right: 8px; }

/* Account overview (_overview.html) */
.c-ov { margin-top: 16px; font-variant-numeric: tabular-nums; --o-cols: minmax(0, 1fr) minmax(0, 1fr); }
.c-ov--multi { --o-cols: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
.c-ov__head, .c-ov__row { display: grid; grid-template-columns: var(--o-cols); gap: 12px; }
.c-ov__head {
  padding: 10px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--tag-border);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.c-ov__head > span { text-align: right; }
.c-ov__row { padding: 12px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.c-ov__row--vault { background: var(--panel); }
.c-ov__label { font-size: 16px; line-height: 1.35; }
.c-ov__sub { display: block; font-size: 13px; color: var(--muted); }
.c-ov__val { text-align: right; font-family: var(--font-mono); font-size: 15px; white-space: nowrap; }
.c-ov__val--total { font-weight: 500; }
.c-ov__mark { font-size: 12px; margin-left: 2px; }
.c-ov__row--vault .c-ov__label { font-size: 14px; color: var(--ink-2); padding-left: 16px; }
.c-ov__parts { display: none; }
.c-ov__foot { margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
/* D3 §5b: below 640px each row stacks — label + Total, then "Bybit $x · Hyperliquid $y". */
@media (max-width: 639.98px) {
  .c-ov--multi .c-ov__head, .c-ov--multi .c-ov__val:not(.c-ov__val--total) { display: none; }
  .c-ov--multi { border-top: 2px solid var(--ink); }
  .c-ov--multi .c-ov__row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 0; }
  .c-ov--multi .c-ov__row--vault { padding: 12px 0 12px 14px; }
  .c-ov--multi .c-ov__row--vault .c-ov__label { padding-left: 0; }
  .c-ov--multi .c-ov__label { font-size: 15px; }
  .c-ov--multi .c-ov__sub { display: inline; font-size: 12px; margin-left: 6px; }
  .c-ov--multi .c-ov__parts { display: block; grid-column: 1 / -1; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
}

/* Holdings (_holdings.html) */
.c-hold {
  margin-top: 16px; font-variant-numeric: tabular-nums;
  /* #292: + Avg cost + Appreciation (8 columns; 10 with both exchanges' value columns) */
  --h-cols: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 0.6fr) minmax(0, 0.95fr) minmax(0, 1fr) minmax(0, 0.95fr) minmax(0, 1.05fr);
}
.c-hold--both {
  --h-cols: minmax(0, 1.2fr) minmax(0, 0.85fr) repeat(3, minmax(0, 0.95fr)) minmax(0, 0.6fr) minmax(0, 0.9fr) minmax(0, 0.95fr) minmax(0, 0.9fr) minmax(0, 1.05fr);
}
.c-notice + .c-hold { margin-top: 16px; }
.c-hold__head, .c-hold__row { display: grid; grid-template-columns: var(--h-cols); gap: 10px; }
.c-hold__head {
  padding: 10px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--tag-border);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.35; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); align-items: end;
}
.c-hold__row {
  padding: 4px 0; min-height: 48px; box-sizing: border-box; border-bottom: 1px solid var(--rule); align-items: center;
  font-family: var(--font-mono); font-size: 15px;
}
.c-hold .num { text-align: right; }
.c-hold__v, .c-hold__pnl { display: flex; justify-content: flex-end; align-items: center; }
.c-hold .c-tile { padding: 4px 6px; }
.c-hold--both .c-hold__v--total .c-tile { font-weight: 500; }
.c-hold__coin { display: flex; align-items: center; gap: 10px; min-width: 0; }
.c-hold__name { min-width: 0; }
/* #292 (D3 §How it opens): the coin name links to the asset detail — ink, ≥44px tall, underlined on hover/focus */
.c-hold__link { color: var(--ink); text-decoration: none; text-underline-offset: 4px; display: inline-flex; align-items: center; min-height: 44px; }
.c-hold__link:hover, .c-hold__link:focus-visible { text-decoration: underline; }
@media (max-width: 639.98px) { .c-hold__link { min-height: 0; } }
.c-hold__qty { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-hold__w { white-space: nowrap; }
.c-hold__qty-m, .c-hold__lbl { display: none; }
.c-hold__total { padding: 12px 0; min-height: 0; border-bottom: 2px solid var(--ink); font-weight: 500; }
.c-hold__total .c-hold__pnl, .c-hold__total .c-hold__v--split, .c-hold__total-v { padding-right: 6px; display: block; }
/* #292 Avg cost (plain, unshaded) + Appreciation (pnl tile + % note under it) */
.c-hold__avg { white-space: nowrap; }
.c-hold__appr { flex-direction: column; align-items: flex-end; gap: 1px; }
.c-hold__sub { font-size: 11px; color: var(--muted); line-height: 1.3; }
.c-hold__val { padding: 4px 0; }
.c-hold__total-label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; align-self: center; }
@media (min-width: 640px) and (max-width: 1099.98px) {   /* D1: the three value columns become one "Value Total" */
  .c-hold--both {
    --h-cols: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 0.6fr) minmax(0, 0.95fr) minmax(0, 1fr) minmax(0, 0.95fr) minmax(0, 1.05fr);
  }
  .c-hold--both .c-hold__v--split { display: none; }
  .c-hold--both .c-hold__v--total .c-tile { font-weight: 400; }
}
@media (max-width: 639.98px) {                           /* D1: stacked card rows */
  .c-hold { border-top: 2px solid var(--ink); }
  .c-hold__head, .c-hold__qty, .c-hold__v--split { display: none; }
  .c-hold__row {
    grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "coin tot" "coin w" "unr real" "avg appr";
    gap: 0 8px; padding: 14px 0; align-items: start;
  }
  .c-hold__coin { grid-area: coin; align-items: center; align-self: start; }
  .c-hold__name { display: flex; flex-direction: column; line-height: 1.3; font-size: 16px; }
  .c-hold__qty-m { display: block; font-size: 12px; color: var(--muted); }
  .c-hold__v--total { grid-area: tot; font-size: 16px; line-height: 1.3; }
  .c-hold__v--total .c-tile { background: none !important; color: inherit !important; padding: 0; font-weight: 400; }
  .c-hold__w { grid-area: w; font-size: 12px; color: var(--muted); line-height: 1.3; }
  .c-hold__unr { grid-area: unr; }
  .c-hold__real { grid-area: real; }
  .c-hold__avg { grid-area: avg; display: block; text-align: left; margin-top: 10px; font-size: 14px; }
  .c-hold__avg .c-hold__val { padding: 2px 0; display: inline-block; margin-top: 2px; }
  .c-hold__appr { grid-area: appr; align-items: flex-start; }
  .c-hold__appr .c-hold__sub { margin-left: 6px; }
  .c-hold__pnl { display: block; text-align: left; margin-top: 10px; }
  .c-hold__lbl { display: block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
  .c-hold__pnl .c-tile, .c-hold__pnl .c-nodata { display: inline-block; margin-top: 2px; font-size: 14px; padding: 2px 6px; }
  .c-hold__total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; font-size: 16px; }
  .c-hold__total > :not(.c-hold__total-label):not(.c-hold__total-v) { display: none; }
  .c-hold__total-v { padding-right: 0; }
}
@media (max-width: 359.98px) {
  .c-hold__row { grid-template-areas: "coin tot" "coin w" "unr unr" "real real" "avg avg" "appr appr"; }
  .c-hold__avg { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .c-hold__appr { flex-direction: row; justify-content: space-between; }
  .c-hold__pnl { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .c-hold__pnl .c-tile, .c-hold__pnl .c-nodata { margin-top: 0; }
}

/* Allocation (_allocation.html + users/static/users/allocation.js) — D3 §4: both exchanges, tabs
 * All · Bybit · Hyperliquid, server SVG donut in the asset colours. */
.c-alloc__tabs { gap: 18px; }
.c-alloc__tabs .c-range__btn { font-size: 14px; }
.c-alloc__tabs .c-range__btn:hover { color: var(--link); }
.c-alloc__tabs .c-range__btn[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.c-allocp { margin-top: 16px; border-top: 2px solid var(--ink); }
.c-allocp:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-inner), 0 0 0 4px var(--focus-mid), 0 0 0 7px var(--lime); }
.c-alloc__split { display: flex; height: 10px; background: var(--rule); margin-top: 20px; }
.c-alloc__seg--by { background: var(--venue-bybit); }
.c-alloc__seg--hl { background: var(--venue-hl); }
.c-alloc__split .c-alloc__seg--hl { min-width: 3px; }
.c-alloc__splitkey {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 8px;
  font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums;
}
.c-alloc__splitkey > span { display: flex; gap: 8px; align-items: center; }
.c-alloc__key { width: 10px; height: 10px; display: inline-block; flex: 0 0 10px; }
.c-alloc__wallet {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 18px 0 14px; border-bottom: 1px solid var(--rule);
}
.c-alloc__wid { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; min-width: 0; }
.c-alloc__addr { font-family: var(--font-mono); font-size: 15px; }
.c-alloc__wlabel { font-size: 14px; color: var(--muted); }
.c-alloc__wpnl { font-family: var(--font-mono); font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.c-alloc__body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 36px; align-items: start; padding-top: 20px; }
.c-alloc__donut { position: relative; width: 200px; height: 200px; }
.c-alloc__donut svg { width: 100%; height: 100%; display: block; }
.c-alloc__centre {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; pointer-events: none;
}
.c-alloc__ex { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.c-alloc__total { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 15px; }
.c-alloc__legend { list-style: none; margin: 0; padding: 0; min-width: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 14px; }
.c-alloc__item {
  display: grid; grid-template-columns: 12px minmax(0, 1fr) 64px 110px; gap: 12px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--rule);
}
.c-alloc__sw { width: 12px; height: 12px; display: block; }
.c-alloc__coin { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-alloc__venue { font-size: 11px; color: var(--muted); margin-left: 4px; }
.c-alloc__pct { text-align: right; }
.c-alloc__val { text-align: right; color: var(--ink-2); }
.c-alloc__note { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
@media (max-width: 639.98px) {
  .c-sec[data-cs="allocation"] .c-alloc__tabs { width: 100%; gap: 14px; }
  .c-alloc__tabs .c-range__btn { min-height: 44px; }
  .c-alloc__body { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 22px; }
  .c-alloc__donut { width: 180px; height: 180px; margin: 0 auto; }
  .c-alloc__ex { font-size: 10px; }
  .c-alloc__total { font-size: 13px; }
  .c-alloc__legend { font-size: 13px; }
  .c-alloc__item { grid-template-columns: 12px minmax(0, 1fr) 56px 100px; gap: 10px; }
  .c-alloc__splitkey { font-size: 12px; }
  .c-alloc__wallet { padding: 16px 0 12px; }
  .c-alloc__wid { flex-direction: column; }
  .c-alloc__addr { font-size: 14px; }
  .c-alloc__wlabel { font-size: 12px; }
  .c-alloc__wpnl { font-size: 13px; }
}

/* =====================================================================================
 * Account value chart — D2 (#289, 2026-10-09-client-area-v2/D2-account-value-chart) restyled by
 * D3 §2 (2026-10-12-dashboard-clarity, CSJ9 Dashboard Clarity.dc.html inline styles).
 * JS: users/static/users/account-chart.js.
 * ===================================================================================== */
.c-range--nowrap { flex-wrap: nowrap; }
.c-avc [hidden], .c-pnlx [hidden] { display: none !important; }
.c-sec[data-cs="account-value"] .c-range { gap: 18px; }
.c-sec[data-cs="account-value"] .c-range__btn { min-height: 32px; min-width: 0; padding: 0 4px; font-size: 15px; }
.c-sec[data-cs="account-value"] .c-range__btn:hover { color: var(--link); }
.c-sec[data-cs="account-value"] .c-range__btn[aria-pressed="true"]:hover { color: var(--ink); }

/* readout (left) + Show control and exchange filter (right) — shared with the P&L chart (D4.1): .c-chead / .c-read / .c-show / .c-exf */
.c-chead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; padding: 24px 0 20px; }
.c-read { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.c-read__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); min-height: 1.3em; }
.c-read__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; font-variant-numeric: tabular-nums; }
.c-read__val { font-family: var(--font-mono); font-size: 34px; line-height: 1.15; min-height: 1.15em; }
.c-read__delta { font-family: var(--font-mono); font-size: 16px; white-space: pre; }
.c-read__cap { font-size: 14px; color: var(--muted); }
.is-pos { color: var(--positive); }
.is-neg { color: var(--negative); }
.is-flat { color: var(--muted); }
.is-qty { color: var(--ink-2); }
.c-chead__ctl { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.c-show { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; border: 1px solid var(--rule); padding: 3px; }
.c-show__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding: 0 8px 0 6px; }
.c-show__btn {
  border: 0; border-radius: 0; cursor: pointer; padding: 7px 12px; background: transparent; color: var(--ink-2);
  font-family: var(--font-mono); font-size: 13px; line-height: normal;
}
.c-show__btn:hover { color: var(--link); }
.c-show__btn[aria-checked="true"] { background: var(--ink); color: var(--bg); }
.c-exf { display: flex; align-items: center; gap: 14px; }
.c-exf__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.c-exf__btns { display: flex; gap: 10px; }
.c-exf__btn {
  background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 2px 2px 4px; cursor: pointer;
  font-family: var(--font-mono); font-size: 13px; color: var(--muted);
}
.c-exf__btn:hover { color: var(--link); }
.c-exf__btn[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }

/* plot (fluid) + legend table (300px) */
.c-avc__body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.c-avc__main { min-width: 0; }
.c-avc__plot { position: relative; height: 396px; }        /* 28 date pill + 340 plot + 28 x labels */
.c-avc__focus { position: absolute; inset: 0; border-radius: 2px; }
.c-avc__focus canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.c-avc__focus.is-grab canvas { cursor: grab; }
.c-avc__focus.is-select canvas { cursor: crosshair; }
/* footer tools + note — shared with the P&L chart: .c-cfoot */
.c-cfoot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; margin: 14px 0 0 84px; }
.c-cfoot__tools { position: relative; display: flex; gap: 2px; flex-shrink: 0; white-space: nowrap; }
.c-tool {
  min-height: 32px; padding: 6px 10px; background: transparent; border: 1px solid var(--rule); border-radius: 0;
  color: var(--ink-2); cursor: pointer; font-family: var(--font-mono); font-size: 13px; line-height: normal; white-space: nowrap;
}
.c-tool--zoom { font-size: 14px; }
.c-tool:hover { color: var(--link); border-color: var(--tag-border); }
.c-tool[aria-disabled="true"] { color: var(--muted); cursor: default; }
.c-tool[aria-disabled="true"]:hover { color: var(--muted); border-color: var(--rule); }
.c-tool--help { border-color: transparent; color: var(--muted); }
.c-tool--help[aria-expanded="true"] { color: var(--ink); }
.c-cfoot__help {
  position: absolute; z-index: 20; bottom: calc(100% + 8px); left: 0; width: max-content; max-width: min(460px, 86vw);
  box-sizing: border-box; background: var(--bg); border: 1px solid var(--tag-border); border-top: 2px solid var(--ink);
  box-shadow: 0 8px 24px var(--tip-shadow); padding: 10px 12px; white-space: normal;
  font-size: 13px; line-height: 1.5; color: var(--ink-2);
}
.c-cfoot__help p { margin: 0; }
.c-cfoot__note { font-family: var(--font-mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.c-cfoot__touch { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.c-lg { min-width: 0; }
.c-lg__head, .c-lg__row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto 64px; gap: 10px; align-items: center; }
.c-lg__head {
  padding: 0 0 8px; border-bottom: 1px solid var(--ink);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.c-lg__head > span:nth-child(n+3) { text-align: right; }
.c-lg__row {
  width: 100%; box-sizing: border-box; margin: 0; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--rule);
  border-radius: 0; padding: 10px 0; color: var(--ink); font: inherit; font-variant-numeric: tabular-nums;
}
button.c-lg__row { cursor: pointer; }
button.c-lg__row:hover .c-lg__label { color: var(--link); }
.c-lg__row.is-off { opacity: 0.45; }
.c-lg__sw { width: 12px; height: 12px; box-sizing: border-box; border: 2px solid transparent; border-radius: 2px; }
.c-lg__sw--bar { height: 3px; border: 0; border-radius: 0; }
.c-lg__sw--none { visibility: hidden; }
.c-lg__sw--ring { border-radius: 50%; }
.c-lg__name { display: flex; flex-direction: column; min-width: 0; }
.c-lg__label { font-family: var(--font-mono); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-lg__sub { font-size: 12px; color: var(--muted); }
.c-lg__val { font-family: var(--font-mono); font-size: 14px; text-align: right; white-space: nowrap; }
.c-lg__chg { font-family: var(--font-mono); font-size: 12px; text-align: right; white-space: nowrap; color: var(--ink-2); }
.c-lg__row.is-total .c-lg__label, .c-lg__row.is-total .c-lg__val { font-weight: 600; }
.c-lg__note { margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
@media (max-width: 1199.98px) {
  .c-avc__body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .c-avc__plot { height: 316px; }
}
/* < 640 px of chart (D3 §5b, frame 2b) */
@media (max-width: 639.98px) {
  .c-sec[data-cs="account-value"] .c-avc__ranges { width: 100%; justify-content: space-between; gap: 0; }
  .c-sec[data-cs="account-value"] .c-range__btn { min-height: 44px; padding: 0 6px; font-size: 14px; }
}
.is-narrow .c-chead { flex-direction: column; align-items: stretch; gap: 0; padding: 18px 0 0; }
.is-narrow .c-read { gap: 4px; padding-bottom: 16px; }
.is-narrow .c-read__label { font-size: 11px; }
.is-narrow .c-read__row { flex-direction: column; align-items: flex-start; gap: 4px; }
.is-narrow .c-read__val { font-size: 28px; }
.is-narrow .c-read__delta { font-size: 14px; }
.is-narrow .c-read__cap { font-size: 13px; }
.is-narrow .c-chead__ctl { align-items: stretch; gap: 0; }
.is-narrow .c-show { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.is-narrow .c-show__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.is-narrow .c-show__btn { min-height: 44px; }
.is-narrow .c-exf { justify-content: space-between; padding-top: 6px; }
.is-narrow .c-exf__btns { gap: 6px; }
.is-narrow .c-exf__btn { min-height: 44px; padding: 0 6px; }
.is-narrow .c-avc__plot { height: 294px; margin-top: 10px; }    /* 28 pill + 240 plot + 26 x labels */
.is-narrow .c-cfoot { margin-left: 0; gap: 8px; }
.is-narrow .c-tool--zoom { display: none; }
.is-narrow .c-tool { min-height: 44px; min-width: 44px; padding: 0 12px; }
.is-narrow .c-cfoot__note { font-size: 11px; }
.is-narrow .c-lg__head, .is-narrow .c-lg__row { grid-template-columns: 18px minmax(0, 1fr) auto 60px; }
.is-narrow .c-lg__row { min-height: 44px; padding: 8px 0; }
.is-narrow .c-lg__label, .is-narrow .c-lg__val { font-size: 13px; }
.is-narrow .c-lg__chg, .is-narrow .c-lg__sub { font-size: 11px; }
.is-narrow .c-lg__note { margin-top: 10px; }

/* Full screen (Fullscreen API on the section; a fixed overlay where the API is missing, e.g. iPhone) */
.c-sec.is-avc-full {
  position: fixed; inset: 0; z-index: 1000; margin: 0; max-width: none; width: auto; overflow: auto;
  background: var(--bg); padding: 16px clamp(16px, 3vw, 40px); box-sizing: border-box;
}
.c-sec.is-avc-full .c-sec__toggle { visibility: hidden; }
.c-sec.is-avc-full .c-avc__plot, .c-sec.is-avc-full .c-pnlx__plot { height: max(300px, calc(100vh - 300px)); }
html.is-avc-full-lock { overflow: hidden; }

/* states, toast, partial-data notice */
.c-avc .c-notice { margin-top: 16px; text-wrap: pretty; }
.c-toast {
  position: absolute; z-index: 6; left: 50%; top: 42%; transform: translate(-50%, -50%); background: var(--ink); color: var(--bg);
  font-family: var(--font-mono); font-size: 12px; padding: 8px 12px; border-radius: 2px; pointer-events: none; white-space: nowrap;
}
.c-avc__state { position: absolute; inset: 28px 0 0; z-index: 4; background: var(--bg); }
.c-avc__state--loading { display: grid; grid-template-rows: repeat(4, 1fr) 28px; }
.c-avc__state--loading > div { border-top: 1px solid var(--rule); }
.c-avc__sil { position: relative; }
.c-avc__sil > div {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 120%; background: var(--chart-fill); opacity: 0.55; border: 0;
  clip-path: polygon(0 70%, 12% 58%, 24% 64%, 38% 40%, 52% 48%, 66% 30%, 80% 36%, 100% 18%, 100% 100%, 0 100%);
}
.c-avc__silfill { background: var(--chart-fill); opacity: 0.55; }
.c-avc__state--loading > .c-avc__statecap { border-top-color: var(--tag-border); display: flex; align-items: center; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.c-avc__state--block {
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center; gap: 12px; padding: 0 4px;
}
.c-avc__state--block p { margin: 0; font-size: 17px; }
.c-avc__state--block .c-avc__err { font-size: 16px; color: var(--muted); }
.c-btn-outline {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; background: transparent; border: 1px solid var(--ink);
  border-radius: 2px; color: var(--ink); font-family: var(--font-body); font-size: 16px; font-weight: 500; cursor: pointer;
}
.c-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.c-avc button:focus-visible, .c-avc input:focus-visible, .c-avc [tabindex]:focus-visible,
.c-pnlx button:focus-visible, .c-pnlx [tabindex]:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--focus-inner), 0 0 0 4px var(--focus-mid), 0 0 0 7px var(--lime);
}

/* =====================================================================================
 * P&L v2 (#296, S11) restyled by D4.1 "P&L clarity" (docs/superpowers/design/2026-10-13-pnl-clarity/,
 * CSJ9 PnL Clarity.dc.html frames 3a 1280 / 3b 390, inline values). Chart section: range links
 * (+ Days · Months), readout + Show + Exchange filter (shared .c-chead/.c-read/.c-show/.c-exf),
 * key row, one Chart.js plot (users/static/users/pnl.js), legend table (.c-lg), footer (.c-cfoot),
 * Performance groups. Summary: venue swatches, P&L-coloured values, linked cells, vault on --panel;
 * transposed below 640px. Green / red only for gains and losses.
 * ===================================================================================== */
/* section header: range links (+ Days · Months for This year / All) */
.c-pnl-ranges { display: flex; align-items: center; gap: 18px; }
.c-pnl-ranges__div { width: 1px; height: 22px; background: var(--rule); }
.c-sec[data-cs="daily-pnl"] .c-range { gap: 18px; }
.c-sec[data-cs="daily-pnl"] .c-range__btn { min-height: 32px; min-width: 0; padding: 0 4px; font-size: 15px; }
.c-sec[data-cs="daily-pnl"] .c-range__btn:hover { color: var(--link); }
.c-sec[data-cs="daily-pnl"] .c-range__btn[aria-pressed="true"]:hover { color: var(--ink); }
.c-sec[data-cs="daily-pnl"] .c-pnl-ranges__gran { gap: 12px; }
.c-sec[data-cs="daily-pnl"] .c-pnl-ranges__gran .c-range__btn { font-size: 13px; padding: 0 2px; }
.c-range__short { display: none; }
.c-pnl-report { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; margin-left: auto; }
.c-pnl-nodata {
  margin: 20px 0 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 48px 0; text-align: center; font-size: 16px;
}

/* chart: key row · plot (fluid) · footer | legend table (330px) */
.c-pnlx__body { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 40px; align-items: start; }
.c-pnlx__main { min-width: 0; }
.c-pnlx__key {
  display: flex; justify-content: space-between; align-items: center; gap: 6px 14px; flex-wrap: wrap; margin: 0 72px 10px 84px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--muted);
}
.c-pnlx__key-l, .c-pnlx__key-r, .c-pnlx__keys { display: flex; gap: 14px; align-items: center; }
.c-pnlx__axis { text-transform: uppercase; white-space: nowrap; }
.c-key { display: inline-flex; gap: 6px; align-items: center; letter-spacing: 0; font-size: 12px; white-space: nowrap; }
.c-key__sw { width: 10px; height: 10px; display: inline-block; flex: none; }
.c-key__ln { width: 16px; height: 2px; display: inline-block; flex: none; }
.c-pnlx__plot { position: relative; height: 396px; }      /* 28 date pill + 340 plot + 28 x labels */
.c-pnlx__focus { position: absolute; inset: 0; border-radius: 2px; }
.c-pnlx__focus canvas { display: block; width: 100% !important; height: 100% !important; touch-action: pan-y; cursor: crosshair; }
.c-pnlx__focus.is-grab canvas { cursor: grab; }
.c-pnlchart__loading {
  position: absolute; inset: 28px 72px 28px 84px; display: flex; align-items: center; justify-content: center; z-index: 3;
  background: var(--bg); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--muted);
}
.c-pnlx.is-ready .c-pnlchart__loading { display: none; }
.c-pnlx .c-bars--noscript { position: absolute; inset: 28px 0; margin: 0; z-index: 4; background: var(--bg); }
.c-pnlx .c-bars--noscript .c-bars__plot { height: auto; }
.c-pnlx .c-cfoot__touch { display: none; }
.c-pnlx.is-narrow .c-cfoot__touch { display: block; }
.c-pnlx__legend .c-lg__head, .c-pnlx__legend .c-lg__row { grid-template-columns: 18px minmax(0, 1fr) 76px 92px; gap: 8px; }
.c-pnlx__legend .c-lg__day { font-size: 13px; }
.c-lg__sw--off { background: transparent !important; }
@media (max-width: 1199.98px) {
  .c-pnlx__body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
/* < 640 px (frame 3b): controls under the title, 240px plot, stacked key row, legend 18 | 1fr | 80 | 92 */
@media (max-width: 639.98px) {
  .c-sec[data-cs="daily-pnl"] .c-sec__extras { width: 100%; }
  .c-pnl-ranges { flex-direction: column; align-items: stretch; gap: 0; }
  .c-pnl-ranges__div { display: none; }
  .c-sec[data-cs="daily-pnl"] .c-pnl-ranges__main { width: 100%; justify-content: space-between; gap: 0; }
  .c-sec[data-cs="daily-pnl"] .c-range__btn { min-height: 44px; padding: 0 4px; font-size: 13px; }
  .c-sec[data-cs="daily-pnl"] .c-pnl-ranges__gran { justify-content: flex-end; gap: 12px; }
  .c-range__full { display: none; }
  .c-range__short { display: inline; }
}
/* §6: the Show control keeps its label at 390 (label + two 44px cells) */
.c-pnlx.is-narrow .c-show { display: flex; gap: 3px; }
.c-pnlx.is-narrow .c-show__label { position: static; width: auto; height: auto; clip: auto; display: flex; align-items: center; }
.c-pnlx.is-narrow .c-show__btn { flex: 1; min-height: 44px; }
.c-pnlx.is-narrow .c-pnlx__key { margin: 0 0 10px; flex-direction: column; align-items: stretch; gap: 6px; font-size: 10px; }
.c-pnlx.is-narrow .c-pnlx__key-r { justify-content: flex-end; }
.c-pnlx.is-narrow .c-key { font-size: 11px; }
.c-pnlx.is-narrow .c-pnlx__plot { height: 294px; margin-top: 4px; }   /* 28 pill + 240 plot + 26 x labels */
.c-pnlx.is-narrow .c-pnlchart__loading { inset: 28px 50px 26px 52px; }
.c-pnlx.is-narrow .c-lg__head, .c-pnlx.is-narrow .c-lg__row { grid-template-columns: 18px minmax(0, 1fr) 80px 92px; gap: 8px; }
.c-pnlx.is-narrow .c-lg__day { font-size: 12px; }

/* Performance, tied to the chart (D4.1 §4) */
.c-perf { margin-top: 44px; border-top: 1px solid var(--ink); padding-top: 20px; }
.c-perf__head { display: flex; align-items: baseline; gap: 6px 18px; flex-wrap: wrap; }
.c-perf__h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1; }
.c-perf__cap { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); }
.c-perf__link { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.c-perf__link--narrow { display: none; }
.c-perf__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 40px; margin-top: 20px; align-items: start; font-variant-numeric: tabular-nums; }
.c-perf__gname {
  padding-bottom: 8px; border-bottom: 1px solid var(--ink);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.c-perf__dl { margin: 0; }
.c-perf__row {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: baseline;
  padding: 10px 6px; margin: 0 -6px; border-bottom: 1px solid var(--rule); outline: none;
}
.c-perf__row--link { cursor: pointer; }
.c-perf__row--link .c-perf__label { text-decoration: underline dotted; text-decoration-color: var(--muted); text-underline-offset: 4px; }
.c-perf__row.is-active { background: var(--panel); }
.c-perf__row:focus-visible { box-shadow: inset 0 0 0 2px var(--lime); }
.c-perf__dt { display: flex; gap: 6px; align-items: center; min-width: 0; font-size: 15px; line-height: 1.35; }
.c-perf__help {
  flex-shrink: 0; width: 18px; height: 18px; padding: 0; border: 1px solid var(--rule); border-radius: 0; background: none; color: var(--muted);
  font-family: var(--font-mono); font-size: 11px; line-height: 16px; cursor: pointer;
}
.c-perf__help:hover { color: var(--ink); border-color: var(--tag-border); }
.c-perf__help[aria-expanded="true"] { border-color: var(--ink); color: var(--ink); }
.c-perf__dd { margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.c-perf__val { font-family: var(--font-mono); font-size: 15px; white-space: nowrap; }
.c-perf__sub { font-family: var(--font-mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.c-perf__reason { grid-column: 1 / -1; font-size: 12px; line-height: 1.35; color: var(--muted); }
.c-perf__tip { grid-column: 1 / -1; font-size: 13px; line-height: 1.45; color: var(--ink-2); border: 1px solid var(--ink); padding: 8px 10px; background: var(--bg); }
.c-perf__tip[hidden] { display: none; }
.c-perf__note { margin: 14px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
@media (max-width: 1199.98px) { .c-perf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639.98px) {
  .c-perf { margin-top: 32px; padding-top: 16px; }
  .c-perf__head { flex-direction: column; gap: 6px; }
  .c-perf__h3 { font-size: 24px; }
  .c-perf__cap { font-size: 12px; }
  .c-perf__link--wide { display: none; }
  .c-perf__link--narrow { display: block; }
  .c-perf__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 16px; }
  .c-perf__row { min-height: 44px; box-sizing: border-box; align-content: center; }
  .c-perf__dt { font-size: 14px; }
  .c-perf__help { width: 22px; height: 22px; line-height: 20px; }
  .c-perf__val { font-size: 14px; }
  .c-perf__sub { font-size: 11px; }
}

/* Summary (D4.1 §5): swatches, P&L-coloured values, linked cells, vault on --panel */
.c-pnl-hint { font-family: var(--font-mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.c-pnl__head, .c-pnl__row { grid-template-columns: minmax(0, 1.7fr) repeat(6, minmax(0, 1fr)); gap: 0; }
.c-pnl__head { padding: 0; border: 0; align-items: end; }
.c-pnl__head > span {
  padding: 14px 10px; border-bottom: 1px solid var(--rule); line-height: 1.35;
  font-size: 11px; letter-spacing: 0.14em; text-wrap: balance;
}
.c-pnl__head > span:first-child { padding: 14px 0; }
.c-pnl__row { align-items: stretch; padding: 0; border: 0; }
.c-pnl__lead { display: flex; gap: 10px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--rule); min-width: 0; }
.c-sw { flex-shrink: 0; width: 10px; height: 10px; display: inline-block; vertical-align: baseline; }
.c-sw--bybit { background: var(--venue-bybit); }
.c-sw--hl { background: var(--venue-hl); }
.c-sw--total { background: var(--ink); }
.c-pnl__lead-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c-pnl__label { font-size: 16px; line-height: 1.35; }
.c-pnl__note { font-size: 12px; margin: 0; line-height: 1.4; }
.c-pnl__val {
  display: flex; align-items: center; justify-content: flex-end; padding: 16px 10px 16px 0; border-bottom: 1px solid var(--rule);
  font-size: 15px; white-space: nowrap; text-decoration: none; color: var(--ink); box-sizing: border-box;
}
a.c-pnl__val:hover { background: var(--panel); }
/* P&L colours win over the cell's ink (the .is-* rules sit earlier in the file) */
.c-pnl__val.is-pos, .c-pnl-m__val.is-pos, .c-pnl-m__vval.is-pos { color: var(--positive); }
.c-pnl__val.is-neg, .c-pnl-m__val.is-neg, .c-pnl-m__vval.is-neg { color: var(--negative); }
.c-pnl__val.is-flat, .c-pnl-m__val.is-flat, .c-pnl-m__vval.is-flat, .c-pnl__val.c-nodata, .c-pnl-m__val.c-nodata { color: var(--muted); }
.c-pnl__val.is-on { outline: 2px solid var(--ink); outline-offset: -2px; }
.c-pnl__star { color: var(--muted); font-size: 11px; }
.c-pnl__row--hl .c-pnl__lead, .c-pnl__row--hl .c-pnl__val { border-bottom: 1px solid var(--rule); }
.c-pnl__row--vault { background: none; border: 0; padding: 0; }
.c-pnl__row--vault .c-pnl__lead { padding: 10px 0 10px 16px; background: var(--panel); border-bottom-color: var(--rule); }
.c-pnl__row--vault .c-pnl__val { background: var(--panel); padding: 10px 10px 10px 0; font-size: 14px; }
.c-pnl__row--vault .c-pnl__label { font-size: 14px; color: var(--ink-2); }
.c-pnl__row--total { font-weight: 600; border: 0; }
.c-pnl__row--total .c-pnl__lead, .c-pnl__row--total .c-pnl__val { border-bottom: 1px solid var(--ink); }
.c-pnl-foot { margin: 12px 0 0; display: block; font-size: 13px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
/* below 640px: transposed table (rows = periods, columns = exchanges + Total) + the vault block */
.c-pnl-m { display: none; font-variant-numeric: tabular-nums; }
.c-pnl-m__head, .c-pnl-m__row { display: grid; grid-template-columns: 64px repeat(3, minmax(0, 1fr)); align-items: center; }
.c-pnl-m--2 .c-pnl-m__head, .c-pnl-m--2 .c-pnl-m__row { grid-template-columns: 64px repeat(2, minmax(0, 1fr)); }
.c-pnl-m__head > span {
  display: flex; gap: 5px; justify-content: flex-end; align-items: center; padding: 12px 4px 12px 0; border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.c-pnl-m__head > span:first-child { padding: 12px 0; }
.c-pnl-m__head .c-sw { width: 8px; height: 8px; }
.c-pnl-m__period {
  min-height: 44px; display: flex; align-items: center; border-bottom: 1px solid var(--rule);
  font-family: var(--font-body); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--ink-2);
}
.c-pnl-m__val {
  min-height: 44px; display: flex; align-items: center; justify-content: flex-end; padding: 0 4px 0 8px; border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 11px; white-space: nowrap; text-decoration: none; color: var(--ink); box-sizing: border-box;
}
.c-pnl-m__val:last-child { font-weight: 600; }
.c-pnl-m__val.is-on { outline: 2px solid var(--ink); outline-offset: -2px; }
.c-pnl-m__vault { margin-top: 16px; background: var(--panel); padding: 12px 14px; }
.c-pnl-m__vlabel { font-size: 14px; color: var(--ink-2); }
.c-pnl-m__vault .c-pnl__note { margin-bottom: 6px; }
.c-pnl-m__vlist { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.c-pnl-m__vitem { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--rule); font-family: var(--font-mono); font-size: 12px; }
.c-pnl-m__vperiod { font-family: var(--font-body); color: var(--muted); }
@media (max-width: 639.98px) {
  .c-pnl { display: none; }
  .c-pnl-m { display: block; }
  .c-sec[data-cs="pnl-summary"] .c-pnl-hint { font-size: 11px; white-space: normal; }
}

/* ---- PDF report download control (#297, handoff D6 §7) ---- */
.c-report {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px;
  margin: 28px 0 0; padding: 10px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.c-report__left { flex: 1 1 240px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.c-report__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.c-report__sel { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
.c-report__right { display: flex; align-items: center; flex-wrap: wrap; gap: 0 10px; min-height: 44px; font-size: 16px; }
.c-report__dl { color: var(--ink); font-weight: 500; }
.c-report__sep { color: var(--muted); }
.c-report__lnk {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; font-weight: 500;
  color: var(--link); text-decoration: underline; text-underline-offset: 4px; transition: opacity 150ms;
}
.c-report__lnk:hover, .c-report__lnk:focus-visible { text-decoration-thickness: 2px; }
.c-report__lnk[aria-disabled="true"], .c-report.is-busy .c-report__lnk { opacity: 0.6; cursor: default; pointer-events: none; }
.c-report__cap { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--muted); }
.c-report__cap[hidden] { display: none; }
.c-report__err { flex-basis: 100%; margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.c-report__retry { font: inherit; font-weight: 500; color: var(--link); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; min-height: 44px; }
@media (max-width: 639.98px) {
  .c-report__right { flex-basis: 100%; }
}

/* =====================================================================================
 * Asset detail (#292 S7) — handoff D3-asset-detail (ClientAssetDetail.dc.html). Main stays 1040 (D13).
 * ===================================================================================== */
.c-main--asset .c-head { gap: 20px; }
.c-aback {
  order: -1; align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 500; color: var(--link); text-decoration: none; text-underline-offset: 4px;
}
.c-aback:hover, .c-aback:focus-visible { text-decoration: underline; }
.c-aback__short { display: none; }
.c-aowner { margin: -8px 0 0; }
/* Title row: 44px logo inside the H1, then name + tags, "Updated" at the far right */
.c-acoin { display: inline-flex; vertical-align: middle; margin-right: 16px; }
.c-acoin .c-coin { width: 44px; height: 44px; flex-basis: 44px; font-size: 18px; }
.c-acoin .c-coin__icon { -webkit-mask-size: 44px 44px; mask-size: 44px 44px; }
.c-main--asset .c-title-row { align-items: center; }
.c-atitle__meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-right: auto; }
.c-atitle__name { font-size: 18px; color: var(--muted); }
.c-atitle__tags { display: inline-flex; gap: 6px; }
/* Facts line: PRICE $148.20 · HELD 8 SOL */
.c-afacts { display: flex; gap: 8px 40px; flex-wrap: wrap; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.c-afacts__item { display: flex; align-items: baseline; gap: 10px; }
.c-afacts__label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.c-afacts__value { font-size: 20px; }
/* Exchange tabs (coin held on both exchanges) */
.c-atabs { display: flex; flex-direction: column; gap: 6px; }
.c-atabs__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 4px 24px; flex-wrap: wrap; border-bottom: 1px solid var(--rule); }
.c-atabs__nav { display: flex; gap: 4px; }
.c-atabs__tab {
  text-decoration: none; min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 0;
  margin-right: 12px; color: var(--muted); font-size: 16px;
}
.c-atabs__tab:hover { color: var(--link); }
.c-atabs__tab[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.c-atabs__qty { font-family: var(--font-mono); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.c-atabs__combined { font-family: var(--font-mono); font-size: 12px; color: var(--muted); padding-bottom: 12px; font-variant-numeric: tabular-nums; }
.c-atabs__note { margin: 0; font-size: 14px; color: var(--muted); }
.c-asumfoot { max-width: 72ch; text-wrap: pretty; }
.c-summary--asset .c-summary__value.neg, .c-summary--asset .c-summary__note.neg { color: var(--negative); }
/* History table: 9 columns, mono 15 (one step below 16 because of the width) */
.c-ah { margin-top: 16px; font-variant-numeric: tabular-nums; --ah-cols: 112px 92px repeat(6, minmax(0, 1fr)) minmax(0, 1.4fr); }   /* 112: "26 sept 2026" (ES) on one line */
.c-ah__head, .c-ah__row { display: grid; grid-template-columns: var(--ah-cols); gap: 12px; }
.c-ah__head {
  padding: 10px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--tag-border);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  line-height: 1.35; align-items: end;
}
.c-ah__row { padding: 10px 0; border-bottom: 1px solid var(--rule); align-items: center; font-family: var(--font-mono); font-size: 15px; line-height: 1.4; }
.c-ah__row:focus { outline: 2px solid var(--link); outline-offset: 2px; }
.c-ah__row[hidden] { display: none; }
.c-ah .num { text-align: right; }
.c-ah__lead { display: contents; }
.c-ah__side { font-family: var(--font-body); display: flex; flex-direction: column; line-height: 1.25; }
.c-ah__src { font-size: 13px; color: var(--muted); }
.c-ah__lbl { display: none; }
.c-ah__v--wrap { overflow-wrap: anywhere; }
.c-ah__heat { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.c-ah__heat .c-tile { padding: 2px 8px; margin-right: -8px; }
.c-ah__note { font-size: 12px; color: var(--muted); }
.c-ah__more { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-top: 20px; }
.c-ah__count { font-family: var(--font-mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.c-ah__foot { margin-top: 16px; max-width: 72ch; gap: 6px; }
.c-ahist .c-section-head + .c-empty, .c-ahist .c-section-head + .c-notice { margin-top: 16px; }
@media (max-width: 639.98px) {   /* D3 §Mobile: line 1 date + side | heat; then a 3×2 grid of labelled values */
  .c-aback__long { display: none; }
  .c-aback__short { display: inline; }
  .c-main--asset .c-title-row__h1 { font-size: 40px; }
  .c-ah { border-top: 2px solid var(--ink); }
  .c-ah__head { display: none; }
  .c-ah__row {
    grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "lead lead heat" "c1 c2 c3" "c4 c5 c6";
    gap: 10px 8px; padding: 14px 0; align-items: start;
  }
  .c-ah__lead { display: flex; grid-area: lead; flex-direction: column; line-height: 1.35; min-width: 0; }
  .c-ah__lead .c-ah__date { font-size: 15px; }
  .c-ah__side { flex-direction: row; flex-wrap: wrap; gap: 0 10px; align-items: baseline; }
  .c-ah__side > span:first-child { font-size: 15px; font-weight: 500; }
  .c-ah__side .c-ah__src { flex-basis: 100%; }
  .c-ah__heat { grid-area: heat; }
  .c-ah__heat .c-tile { margin-right: 0; }
  .c-ah__c { text-align: left; }
  .c-ah__c:nth-of-type(1) { grid-area: c1; } .c-ah__c:nth-of-type(2) { grid-area: c2; } .c-ah__c:nth-of-type(3) { grid-area: c3; }
  .c-ah__c:nth-of-type(4) { grid-area: c4; } .c-ah__c:nth-of-type(5) { grid-area: c5; } .c-ah__c:nth-of-type(6) { grid-area: c6; }
  .c-ah__lbl { display: block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  .c-ah__lbl--long { display: none; }
  .c-ah__v, .c-ah__c .c-nodata { font-size: 14px; }
  .c-afacts__value { font-size: 18px; }
}
@media (min-width: 640px) { .c-ah__lbl--short { display: none; } }