/* ==========================================================================
   Root app — interface styles
   Type and colour follow the main site: Manrope for display and figures,
   Newsreader for card titles, Hanken Grotesk for UI, JetBrains Mono for
   small numerics and eyebrows.
   ========================================================================== */

:root {
  --cream:      #fdfcf9;
  --paper:      #ece7dd;
  --sunk:       #e3ddd1;
  --line:       #ddd6c9;
  --line-soft:  #e6e0d4;

  --ink:        #2a241f;
  --ink-2:      #332925;
  --muted:      #765f57;
  --faint:      #9a8a83;

  --orange:      #cf6f55;
  --orange-deep: #a94c38;
  /* The interaction surface: hover on a row, a selected menu option, an icon
     tile. On the inverted light ladder a surface that comes forward gets
     DARKER, so this is a warm mid-tone at roughly --sunk's lightness, not the
     near-white (#fff4f0) it used to be — that read as a hard white slab on
     every hovered row. Dark mirrors it upward from --paper. */
  --orange-soft: #ebdbd0;
  /* Semantic accent, not a ladder rung: the pale half of a two-tone orange
     bar, a warn chip, a warn button. Deliberately lighter than --paper in
     light so it pairs with --orange-deep in charts. */
  --orange-tint: #f8eae3;

  --panel:      #221b18;
  --panel-line: #3a2f2a;
  --panel-text: #b6a79f;

  --safe: #6f8560;
  --risk: #b0402c;

  --display: "Manrope", "Hanken Grotesk", system-ui, sans-serif;
  --serif:   "Newsreader", Georgia, serif;
  --sans:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", Menlo, monospace;

  /* The one elevation in the app, and it is only for things that genuinely
     float above other content: dropdown menus, popovers, tooltips, the asset
     picker sheet. Static surfaces separate by fill.
     Shape matters more than alpha: a large blur pulled back by a negative
     spread reads as a soft lift, where a tight blur at high alpha reads as a
     dark ring drawn around the panel — which is what the old
     `0 10px 24px rgba(0,0,0,.46)` did in dark. */
  --shadow-pill: 0 22px 55px -22px rgba(48, 32, 24, .32);

  --rail-w: 240px;
  /* The shell inset: how far the sidebar and the main panel sit off the window
     edge, and the gap between them. One value, so the frame stays square on
     all four sides. The desktop blocks at the end of this file derive their
     geometry from it. */
  --rail-gap: 6px;
  /* Surfaces and lines that were previously written as literals. Named by role
     so the dark palette can redefine them in one place. */
  --shell:       #fdfcf9;
  --paper-2:     #f5f1e9;
  /* The half-step between --paper and --sunk. Table header bands and row
     hovers sit here: forward of the card they live in, but not as far forward
     as a well. It used to be #f0ebe2 — lighter than --paper, i.e. a step
     BACKWARDS on the inverted ladder — and in dark it duplicated --paper
     exactly, so the band vanished. */
  --paper-3:     #e7e2d7;
  --line-strong: #ddcec5;
  --placeholder: #cdbfb7;
  --quiet-hover: #ddd5c7;
  --muted-2:     #65514a;
  --track:       #362b26;
  --spark:       #c0b6ab;
  --skeleton-a:  #efe9e3;
  --skeleton-b:  #f7f3ef;

  --orange-line: #e3c8bd;
  --orange-mid:  #dd9d86;
  --orange-pale: #f0c6b6;
  --orange-hi:   #f2a284;
  --orange-lo:   #dc6d51;
  --orange-warn: #f2ddd3;

  --risk-tint:   #f9e6e1;
  --risk-stroke: #d4573a;
  --safe-tint:   #eef2ea;
  --safe-line:   #ccd9c5;
  --safe-text:   #4f6642;
  --safe-stroke: #8aa579;

  /* Translucent washes that lift a surface one notch off whatever it sits on.
     "Lift" means "comes forward", and on the inverted light ladder forward is
     DARKER — so in light these are barely-there inks, and in dark they are the
     mirror-image barely-there whites. They used to be translucent whites in
     light, which painted every glass panel (Risk overview, Season standing,
     the badges) as a near-white slab. */
  --glass-strong: rgba(42, 36, 31, .09);
  --glass:        rgba(42, 36, 31, .06);
  --glass-soft:   rgba(42, 36, 31, .035);
  --wash-safe:   rgba(111, 133, 96, .11);
  --wash-orange: rgba(207, 111, 85, .11);
  --wash-paper:  rgba(42, 36, 31, .04);
  --wash-pale:   rgba(239, 180, 165, .42);
  /* The surface a selected segment sits on, one step past --sunk in both
     themes: darker than the track in light, lighter in dark. The step is the
     same size in both (12/12/14 off --sunk). */
  --raised:        #d7d1c3;
  --row-selected:  #e6cfbe;
  --backdrop:      rgba(34, 27, 24, .5);
  --backdrop-soft: rgba(34, 27, 24, .42);
  --modal-shadow:  rgba(48, 32, 24, .45);
  --modal-shadow-2: rgba(50, 34, 28, .22);
}




/* --------------------------------------------------------------- Base --- */

*, *::before, *::after { box-sizing: border-box; }

/* Author `display` rules (.btn is inline-flex) outrank the UA sheet's
   [hidden] { display: none }, so state-toggled elements need this to stay
   hidden. Without it, `el.hidden = true` reads correct in JS but still paints. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
}

::selection { background: rgba(207, 111, 85, .28); color: var(--ink); }
::-moz-selection { background: rgba(207, 111, 85, .28); color: var(--ink); }

button, input { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 500; }
p { margin: 0; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 10px; left: 10px;
  z-index: 90;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .18s ease;
}
.skip-link:focus-visible { transform: none; }

.num {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -.01em;
}

/* ==========================================================================
   Loading skeleton — live, price-derived figures only

   On load the committed MARKETS fallback data (AAPL at 232.47, $3,850
   collateral, an $18,200 TVL, ...) paints instantly, then /api/prices lands
   ~1s later and every number derived from it visibly jumps. html.prices-loading
   (set on <html> in index.html, removed by revealPrices() in app.js once a
   real snapshot is in hand or a 4s safety timeout fires) keeps those figures
   shimmering instead of showing fabricated numbers.

   Scope is deliberately narrow. Two kinds of element carry it:
     1. Containers that already exist purely to hold a live figure, e.g. the
        price cell in a market row (.market-row-price .num) or a borrow row's
        wallet balance/borrowing power — no ambiguity, no attribute needed.
     2. [data-live-figure], hand-placed on individual elements (in index.html)
        or inside repeating JS templates (app.js) wherever a shared class is
        used for both live and static values in the same row/card and a clean
        container split isn't available — e.g. a leaderboard row's "vaults"
        column reuses the exact classes ("ta-r num") of its live "points" and
        "collateral" columns.

   Explicitly NOT skeletoned: max LTV, liquidation LTV, borrow APR, supply
   caps, and the Risk page's protocol parameters (liquidation incentive,
   close factor, reserve factor, oracle age, ...). Those are fixed config,
   true the instant the page paints, not something a price fetch corrects.
   The same reasoning excludes the Vaults table body and the Stats "vault
   health" panel: none of their columns move when refreshPrices() runs, so
   there is nothing fake to hide behind a shimmer. ========================== */
html.prices-loading .market-row-price .num,
html.prices-loading .market-row-share small,
html.prices-loading .borrow-market-balance .num,
html.prices-loading .borrow-market-power,
html.prices-loading [data-live-figure] {
  color: transparent !important;
  background: linear-gradient(90deg, var(--skeleton-a) 25%, var(--skeleton-b) 50%, var(--skeleton-a) 75%) 0 0 / 200% 100%;
  border-radius: 6px;
  user-select: none;
}
@media (prefers-reduced-motion: no-preference) {
  html.prices-loading .market-row-price .num,
  html.prices-loading .market-row-share small,
  html.prices-loading .borrow-market-balance .num,
  html.prices-loading .borrow-market-power,
  html.prices-loading [data-live-figure] {
    animation: rootSkeleton 1.2s ease-in-out infinite;
  }
}
@keyframes rootSkeleton { to { background-position: -200% 0; } }

.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}

/* -------------------------------------------------------------- Icons --- */

.icon {
  display: inline-flex;
  flex: none;
  width: 20px; height: 20px;
  color: inherit;
}
.icon svg { width: 100%; height: 100%; display: block; }
.icon svg[data-stroke] {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-solid svg { fill: currentColor; }

/* ------------------------------------------------------------ Buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.btn .icon { width: 17px; height: 17px; }

.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-deep); }

.btn-ghost { background: var(--paper); border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { background: var(--orange-soft); border-color: var(--orange-line); }

.btn-block { width: 100%; }
.btn-lg { min-height: 48px; }
/* Topbar wallet trigger: chrome, not a page action. */
.connect-trigger {
  min-height: 34px;
  height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 13px;
}
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color .16s ease;
}
.link-btn .icon { width: 14px; height: 14px; }
.link-btn:hover { color: var(--orange-deep); }

/* ==========================================================================
   Sidebar — one floating card
   ========================================================================== */

.sidebar {
  position: fixed;
  top: var(--rail-gap);
  left: var(--rail-gap);
  bottom: var(--rail-gap);
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: var(--rail-w);
  padding: 20px 12px 14px;
  border-radius: 14px;
  background: var(--paper-2);
}

.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
  margin-bottom: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.icon-button:hover { background: var(--orange-soft); border-color: var(--orange-line); }

/* Black source PNG used as an alpha mask, so the mark is a true vector-crisp
   silhouette in whatever colour we want — no inverted-image artefacts. */
.brand-mark {
  width: 27px; height: 27px;
  flex: none;
  background-color: var(--ink);
  -webkit-mask: url("/brand/root/root-mark-transparent.png") center / contain no-repeat;
          mask: url("/brand/root/root-mark-transparent.png") center / contain no-repeat;
}

.brand-word {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.02em;
}

.drawer-close { display: none; }

.nav { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

.nav-label {
  margin: 0 10px 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--faint);
}
.nav-group + .nav-label { margin-top: 20px; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 40px;
  padding: 0 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -.01em;
  text-align: left;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.nav-item .icon { width: 18px; height: 18px; color: var(--faint); transition: color .16s ease; }
.nav-item:hover { background: var(--sunk); }
.nav-item:hover .icon { color: var(--ink-2); }
.nav-item.is-active { background: var(--sunk); color: var(--orange-deep); font-weight: 600; }
.nav-item.is-active .icon { color: var(--orange); }

.sidebar-foot { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line-soft); }

/* Live Root token CA, painted by site-config.js once a value is configured
   via /api/config ([data-root-ca] starts hidden). "CA:" is a ::before on
   the surface so it always shows, independent of the label — plain text,
   not a chip/box. */
.root-ca-surface { display: flex; align-items: center; gap: 8px; min-width: 0; }
.root-ca-surface::before {
  content: "CA:";
  flex: none;
  color: var(--orange-deep);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
}
.root-ca-label { display: none; }
.root-ca-value {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.root-ca-value:hover { color: var(--orange-deep); }
.root-ca-copy {
  flex: none;
  padding: 2px 4px;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: color .16s ease;
}
.root-ca-copy:hover { color: var(--orange-deep); }

/* Sidebar-foot row, above the X/Docs links. The rail is 228px wide with
   14px padding, too tight for the long label text ("Root token CA" /
   "Contract address") alongside a shortened address, so the label is
   hidden here — the "CA:" prefix already identifies the row. The value
   keeps its own ellipsis handling from .root-ca-value so a stray long
   value never pushes the copy button out of the row. */
.root-ca-sidebar {
  margin-bottom: 10px;
  min-width: 0;
  overflow: hidden;
}
.root-ca-sidebar .root-ca-label { display: none; }
.root-ca-sidebar .root-ca-value { flex: 1 1 auto; }


/* ------------------------------------------------------ Account card --- */

.btn-warn { background: var(--orange-tint); color: var(--orange-deep); }
.btn-warn:hover { background: var(--orange-warn); }
.btn-warn .icon { width: 16px; height: 16px; }
.account + .btn-warn, .btn-warn + .foot-links { margin-top: 8px; }

/* Wallet control lives at the top right of the app. */
.topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  max-width: 1180px;
  margin: 0 auto 18px;
}

.account { position: relative; }
.topbar .account { min-width: 0; }

.account-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 34px;
  padding: 0 9px 0 7px;
  /* Held, not drawn: the resting outline is transparent so the control is
     separated from the bar by its fill alone, and the hover state still has a
     border to colour. */
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--paper);
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease;
}
/* --paper-2 is the page fill underneath, so hovering used to dissolve the
   button into the bar. --sunk is the step forward in both themes. */
.account-btn:hover { border-color: var(--line-strong); background: var(--sunk); }

.account-avatar {
  width: 20px; height: 20px;
  flex: none;
  border-radius: 50%;
  background: var(--sunk);
  background-size: cover;
  box-shadow: inset 0 0 0 1px var(--glass-strong);
}

.account-text { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.account-text strong { font-size: 12.5px; font-weight: 550; letter-spacing: -.01em; }
.account-text small { color: var(--faint); font-size: 10.5px; white-space: nowrap; }
.account-text small.is-warn { color: var(--orange-deep); font-weight: 600; }

.account-caret { width: 13px; height: 13px; flex: none; color: var(--faint); transition: transform .18s ease; }
.account-btn[aria-expanded="true"] .account-caret { transform: rotate(180deg); }

.account-menu {
  position: absolute;
  left: auto;
  right: 0;
  min-width: 196px;
  top: calc(100% + 6px);   /* opens downward now it sits at the top of the app */
  z-index: 30;
  padding: 5px;
  border-radius: 12px;
  background: var(--paper);
  box-shadow: var(--shadow-pill);
}

.account-item {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.account-item .icon { width: 15px; height: 15px; color: var(--faint); }
.account-item:hover { background: var(--sunk); color: var(--ink); }
.account-item:hover .icon { color: var(--ink-2); }
.account-item.is-danger { color: var(--risk); }
.account-item.is-danger .icon { color: var(--risk); }
.account-item.is-danger:hover { background: var(--risk-tint); color: var(--risk); }
.account-item.is-danger:hover .icon { color: var(--risk); }

.foot-links { display: grid; grid-template-columns: 1fr; gap: 2px; }
.foot-links a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .16s ease, color .16s ease;
}
.foot-links a:hover { background: var(--sunk); color: var(--ink); }
.foot-links .icon { width: 15px; height: 15px; }

/* ------------------------------------------------------- Mobile chrome --- */

.mobile-bar { display: none; }

.scrim {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: var(--backdrop-soft);
  opacity: 0;
  transition: opacity .22s ease;
}
.scrim.is-open { opacity: 1; }

/* ==========================================================================
   Main
   ========================================================================== */

.main {
  min-height: 100vh;
  margin-left: calc(var(--rail-w) + var(--rail-gap) * 2);
  padding: 30px 30px 72px;
}
.main:focus { outline: none; }

.view { display: none; max-width: 1180px; margin: 0 auto; }
.view.is-active { display: block; animation: view-in .24s ease both; }

@keyframes view-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .view.is-active { animation: none; }
  * { transition-duration: .001ms !important; }
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.page-head h1 {
  margin-top: 5px;
  font-family: var(--display);
  font-size: clamp(30px, 2.8vw, 38px);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.05;
}
.updated {
  flex: none;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .01em;
}

.block { margin-top: 26px; }
.block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}
.block-title { font-size: 15px; font-weight: 600; letter-spacing: -.015em; }

/* Reads by fill, not by outline: --sunk is a step forward of both the page
   (--paper-2) and the card (--paper) a tag can land on, in either theme. */
.tag {
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--sunk);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  white-space: nowrap;
}
.tag-dark { border-color: var(--panel-line); background: transparent; color: var(--panel-text); }

.card {
  padding: 24px;
  border-radius: 8px;
  background: var(--paper);
}
.card-flush { padding: 0; overflow: hidden; }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}
.card-title {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.02em;
}

.split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 18px; }
.split .block { margin-top: 26px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* ------------------------------------------------- Dashboard: connect --- */

/* Disconnected, the dashboard is one centred moment rather than a page of
   panels about an account that isn't there yet. */
.dash-connect {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 210px);   /* allows for the top bar */
  padding: 20px 0 40px;
}

.connect-panel { max-width: 520px; text-align: center; }
.connect-panel .connect-medallion { width: 92px; height: 92px; margin: 0 auto 26px; display: block; }
.connect-panel h1 {
  font-family: var(--display);
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: 1.03;
}
.connect-panel > p {
  max-width: 44ch;
  margin: 14px auto 0;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.6;
}
.connect-panel .btn-row { justify-content: center; margin-top: 26px; }
.connect-note {
  margin-top: 20px;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
}

/* -------------------------------------------------- Dashboard: vaults --- */

/* One compact row, not a large empty panel. */
.zero-state {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
}
.zero-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--sunk);
  color: var(--muted);
}
.zero-text { min-width: 0; }
.zero-text h3 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.zero-text p { margin-top: 2px; color: var(--muted); font-size: 13px; }
.zero-state .btn { margin-left: auto; flex: none; }

/* --------------------------------------------------------- Connect card --- */

.connect-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: 30px 34px;
  border-radius: 18px;
  background: var(--paper);
}
.connect-copy h2 {
  font-family: var(--display);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.1;
}
.connect-copy > p {
  max-width: 52ch;
  margin-top: 10px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}
.connect-copy .btn-row { margin-top: 20px; }
.connect-medallion { width: 136px; height: 136px; object-fit: contain; }

/* ---------------------------------------------------------- Stat tiles --- */

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.stat-tile {
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--paper);
}
.stat-label { color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: -.005em; }
.stat-value {
  margin-top: 7px;
  font-family: var(--display);
  font-size: 29px;
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: 1.05;
  font-feature-settings: "tnum" 1;
}
.stat-foot { margin-top: 7px; color: var(--faint); font-size: 12.5px; }

.delta { font-weight: 600; font-family: var(--mono); font-size: .95em; }
.delta.is-up { color: var(--safe); }
.delta.is-down { color: var(--risk); }

.meter {
  height: 5px;
  margin-top: 12px;
  border-radius: 999px;
  background: var(--sunk);
  overflow: hidden;
}
.meter i { display: block; height: 100%; border-radius: 999px; background: var(--orange); }

/* -------------------------------------------------------- Market rows ---- */

.mini-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 18px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color .14s ease;
}
.mini-row:last-child { border-bottom: 0; }
.mini-row:hover { background: var(--orange-soft); }
.mini-name { display: grid; gap: 1px; min-width: 0; }
.mini-name strong { font-size: 14px; font-weight: 600; }
.mini-name small { color: var(--muted); font-family: var(--mono); font-size: 11px; }
.mini-figures { margin-left: auto; display: grid; justify-items: end; gap: 4px; }
.mini-figures strong { font-family: var(--mono); font-size: 13.5px; font-weight: 500; }
.mini-bar { width: 62px; height: 4px; border-radius: 999px; background: var(--sunk); overflow: hidden; }
.mini-bar i { display: block; height: 100%; border-radius: 999px; background: var(--orange); }

/* ------------------------------------------------------------ Empty ------ */

.empty-state { display: grid; justify-items: center; text-align: center; padding: 32px 22px; }
.empty-icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--sunk);
  color: var(--muted);
}
.empty-state h3 { font-family: var(--serif); font-size: 22px; letter-spacing: -.02em; }
.empty-state p { max-width: 34ch; margin-top: 6px; color: var(--muted); font-size: 13.5px; }
.empty-state .btn { margin-top: 16px; }

/* ------------------------------------------------------------- Borrow --- */

.borrow-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  align-items: start;
  gap: 16px;
}

.field { margin-bottom: 16px; }
.field-label {
  display: block;
  margin-bottom: 7px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
}

.control {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 60px;
  padding: 0 14px;
  /* No resting outline — the fill separates it from the card. The border is
     kept at zero visibility so hover and focus still have something to
     colour, which is the one job an outline still has here. */
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--paper);
  transition: border-color .16s ease;
}
.control:hover { border-color: var(--line-strong); }
.control:focus-within { border-color: var(--orange); }

.control-select { gap: 12px; text-align: left; cursor: pointer; }
.control-text { display: grid; gap: 1px; min-width: 0; }
.control-text strong { font-size: 15px; font-weight: 600; }
.control-text small { color: var(--muted); font-family: var(--mono); font-size: 11.5px; }
.control-caret { margin-left: auto; color: var(--faint); transition: transform .18s ease; }
.control-select[aria-expanded="true"] .control-caret { transform: rotate(180deg); }

.control-amount input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.04em;
  font-feature-settings: "tnum" 1;
}
.control-amount input::placeholder { color: var(--placeholder); font-weight: 500; }
.control-unit {
  padding-left: 12px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
}

.field-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 12.5px;
}
.field-meta strong { color: var(--ink-2); font-weight: 500; }

.fine-print { margin-top: 11px; color: var(--faint); font-size: 12px; text-align: center; }

/* Ticker monogram tile — legible where the 3D medallions were not. */
.market-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px; height: 38px;
}
.market-icon img { width: 68%; height: 68%; object-fit: contain; }
.market-icon-sm { width: 32px; height: 32px; }
.market-icon-lg { width: 46px; height: 46px; }
.market-icon-amzn img, .market-icon-spcx img { width: 88%; height: 64%; }
.market-icon-msft img { width: 62%; height: 62%; }

.combo { position: relative; }
.combo-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  z-index: 20;
  max-height: 286px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 12px;
  background: var(--paper);
  box-shadow: var(--shadow-pill);
}
.combo-option {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 8px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.combo-option:hover { background: var(--sunk); }
.combo-option[aria-selected="true"] { background: var(--orange-soft); }
.combo-option .label { display: grid; gap: 1px; }
.combo-option strong { font-size: 14px; font-weight: 600; }
.combo-option small { color: var(--muted); font-family: var(--mono); font-size: 11px; }
.combo-option .ltv {
  margin-left: auto;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11.5px;
}

/* Dark preview panel */
.card-dark { border-color: var(--panel-line); background: var(--panel); color: #fff; }
.card-dark .card-title { color: #fff; }

.health { position: relative; display: grid; place-items: center; margin: 4px 0; }
.health-ring { width: 172px; height: 172px; transform: rotate(-90deg); }
.health-track { fill: none; stroke: var(--track); stroke-width: 8; }
.health-arc {
  fill: none;
  stroke: var(--orange);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 326.7;
  stroke-dashoffset: 326.7;
  transition: stroke-dashoffset .4s ease, stroke .3s ease;
}
.health-arc.is-safe { stroke: var(--safe-stroke); }
.health-arc.is-warn { stroke: var(--orange); }
.health-arc.is-risk { stroke: var(--risk-stroke); }

.health-center { position: absolute; display: grid; justify-items: center; gap: 2px; }
.health-center strong {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -.05em;
  font-feature-settings: "tnum" 1;
}
.health-center span { color: var(--panel-text); font-size: 11px; }

.health-note {
  margin: 4px 0 18px;
  color: var(--panel-text);
  font-size: 12.5px;
  text-align: center;
}

.data-list { margin: 0; }
.data-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--panel-line);
}
.data-list div:last-child { border-bottom: 0; }
.data-list dt { color: var(--panel-text); font-size: 13.5px; }
.data-list dd { margin: 0; font-size: 13.5px; font-weight: 500; }

.notice {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--panel-line);
  color: var(--panel-text);
  font-size: 12.5px;
  line-height: 1.5;
}
.notice .icon { width: 17px; height: 17px; color: var(--orange-mid); margin-top: 1px; }

/* -------------------------------------------------------------- Table --- */

.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.search {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 300px;
  max-width: 100%;
  height: 42px;
  padding: 0 13px;
  border-radius: 10px;
  background: var(--paper);
  transition: border-color .16s ease;
}
.search:focus-within { border-color: var(--orange); }
.search .icon { width: 17px; height: 17px; color: var(--faint); }
.search input { width: 100%; border: 0; outline: none; background: transparent; font-size: 14px; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.toolbar-note { color: var(--muted); font-family: var(--mono); font-size: 12px; }

.market-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.market-table th {
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-3);
  color: var(--faint);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
.market-table td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.market-table td:first-child { font-family: var(--sans); }
.market-table tbody tr:last-child td { border-bottom: 0; }
.market-table tbody tr { transition: background-color .14s ease; }
.market-table tbody tr:hover { background: var(--paper-3); }
/* `.market-table th` sets text-align:left at (0,1,1), so a bare `.ta-r` at
   (0,1,0) loses. Both element-qualified selectors are required. */
.ta-r,
.market-table th.ta-r,
.market-table td.ta-r { text-align: right; }

.cell-market { display: flex; align-items: center; gap: 12px; }
.cell-market .label { display: grid; gap: 1px; }
.cell-market strong { font-size: 14px; font-weight: 600; }
.cell-market small { color: var(--muted); font-family: var(--mono); font-size: 11px; }

.util { display: inline-grid; gap: 5px; justify-items: end; }
.util-bar { width: 64px; height: 4px; border-radius: 999px; background: var(--sunk); overflow: hidden; }
.util-bar i { display: block; height: 100%; border-radius: 999px; background: var(--orange); }

.row-action {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  margin-left: auto;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--paper);
  color: var(--muted);
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.row-action .icon { width: 14px; height: 14px; }
.market-table tbody tr:hover .row-action, .row-action:focus-visible {
  border-color: var(--orange-line);
  background: var(--orange-soft);
  color: var(--orange-deep);
}
/* Action column only exists on the vaults table. */
.market-table-vaults td:last-child { width: 58px; }

.table-empty { padding: 38px 20px; color: var(--muted); font-size: 14px; text-align: center; }

/* ---------------------------------------------------------------- Risk --- */

.feature { display: flex; flex-direction: column; gap: 10px; }
.feature-icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  margin-bottom: 4px;
  border-radius: 12px;
  background: var(--orange-soft);
  color: var(--orange-deep);
}
.feature-title { font-family: var(--serif); font-size: 23px; letter-spacing: -.02em; }
.feature p { color: var(--muted); font-size: 14px; line-height: 1.6; }

.param-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 44px;
  margin: 0;
  padding: 4px 24px;
}
.param-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}
.param-list div:nth-last-child(-n+2) { border-bottom: 0; }
.param-list dt { color: var(--muted); font-size: 14px; }
.param-list dd { margin: 0; font-family: var(--mono); font-size: 13px; font-weight: 500; }

/* --------------------------------------------------------------- Stats --- */

.chart-card { padding: 24px 26px 20px; }
.chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}
.chart-value {
  margin-top: 6px;
  font-family: var(--display);
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: 1;
  font-feature-settings: "tnum" 1;
}
.chart-foot { margin-top: 7px; color: var(--muted); font-size: 13px; }

/* Columns must STRETCH, not sit at `end`: the bars size themselves with a
   percentage height, which only resolves against a definite column height. */
.chart {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: stretch;
  gap: 12px;
  height: 190px;
  margin-bottom: 28px;
  padding-top: 10px;
  border-bottom: 1px solid var(--line);
}
.chart-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  min-height: 0;
}
.chart-bar {
  flex: none;
  width: 100%;
  max-width: 44px;
  border-radius: 5px 5px 0 0;
  background: var(--orange-tint);
  transition: background-color .16s ease;
}
.chart-tick {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 10.5px;
  transform: translateY(15px);
}

/* Grouped series: two bars share a column and align on the same baseline. */
.chart-grouped .chart-pair {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  width: 100%;
  height: 100%;
}
.chart-grouped .chart-bar { max-width: 20px; }
.chart-bar.is-collateral { background: var(--orange-tint); }
.chart-bar.is-borrowed { background: var(--orange); }
.chart-col:hover .chart-bar.is-collateral { background: var(--orange-pale); }
.chart-col:hover .chart-bar.is-borrowed { background: var(--orange-deep); }

.legend { display: flex; gap: 14px; }
.legend-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
}
.swatch {
  width: 10px; height: 10px;
  flex: none;
  border-radius: 3px;
  background: var(--orange-tint);
}
.swatch.is-borrowed { background: var(--orange); }
.swatch.is-collateral { background: var(--orange-tint); }

/* ---------------------------------------------------- Stats: backing --- */

.split-even { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.big-value {
  margin-top: 6px;
  font-family: var(--display);
  font-size: clamp(34px, 3.4vw, 46px);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: 1;
  font-feature-settings: "tnum" 1;
}
.big-foot { margin-top: 9px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.big-foot strong { color: var(--ink); font-weight: 600; }

.backing-bar {
  position: relative;
  height: 10px;
  margin-top: 18px;
  border-radius: 999px;
  background: var(--orange-tint);
  overflow: hidden;
}
.backing-bar i { display: block; height: 100%; border-radius: 999px; background: var(--orange); }

.backing-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 10px;
}
.backing-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12.5px;
}
.backing-legend strong { color: var(--ink); font-weight: 600; }

.data-rows { margin: 18px 0 0; padding-top: 6px; border-top: 1px solid var(--line-soft); }
.data-rows div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}
.data-rows div:last-child { border-bottom: 0; }
.data-rows dt { color: var(--muted); font-size: 13.5px; }
.data-rows dd { margin: 0; font-size: 13.5px; font-weight: 500; }

.delta-value.is-up { color: var(--safe); }
.delta-value.is-down { color: var(--risk); }

.liquidation-note { display: flex; align-items: flex-start; gap: 16px; margin-top: 14px; }
.liquidation-note h3 { font-family: var(--serif); font-size: 20px; letter-spacing: -.02em; }
.liquidation-note p { margin-top: 5px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.liquidation-note strong { color: var(--ink); font-weight: 600; }
.liquidation-note .feature-icon { margin-bottom: 0; }

/* ----------------------------------------------- Stats: health buckets --- */

.buckets { display: grid; gap: 14px; }
.bucket {
  display: grid;
  grid-template-columns: minmax(140px, 1.1fr) minmax(0, 2.4fr) 92px;
  align-items: center;
  gap: 16px;
}
.bucket-head { display: grid; gap: 1px; }
.bucket-label { font-size: 13.5px; font-weight: 600; font-family: var(--mono); letter-spacing: -.02em; }
.bucket-hint { color: var(--faint); font-size: 12px; }
.bucket-track { height: 10px; border-radius: 999px; background: var(--sunk); overflow: hidden; }
.bucket-track i { display: block; height: 100%; border-radius: 999px; background: var(--orange); }
.bucket-track i.is-safe { background: var(--safe-stroke); }
.bucket-track i.is-warn { background: var(--orange); }
.bucket-track i.is-risk { background: var(--risk); }
.bucket-figures {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  font-family: var(--mono);
}
.bucket-figures strong { font-size: 15px; font-weight: 500; }
.bucket-figures span { color: var(--faint); font-size: 11.5px; }
.bucket-foot { margin-top: 18px; text-align: left; }

/* ------------------------------------------------ Stats: risk matrix --- */

.headroom {
  display: inline-block;
  min-width: 62px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  text-align: center;
}
.headroom.is-safe { background: var(--safe-tint); color: var(--safe-text); }
.headroom.is-warn { background: var(--orange-tint); color: var(--orange-deep); }
.headroom.is-risk { background: var(--risk-tint); color: var(--risk); }

/* ==========================================================================
   Borrow — swap card
   Structure follows the Skiper UI "Aave token swap" component (shadcn
   registry, meant to be copied into your app), rebuilt in Root's tokens.
   ========================================================================== */

/* One centred column: the swap card, then everything it implies beneath it. */
.swap-wrap {
  display: grid;
  grid-template-columns: minmax(0, 460px);
  justify-content: center;
  gap: 14px;
}

.swap { display: flex; flex-direction: column; gap: 10px; }

/* Until a wallet is connected the card is inert — no balance is claimed and
   no amount can be entered. */
.swap.is-locked .swap-card { background: var(--sunk); }
.swap.is-locked .amount-input,
.swap.is-locked .receive-input { color: var(--placeholder); cursor: not-allowed; }
.swap.is-locked .token-pick { cursor: pointer; }

.swap-card {
  position: relative;
  padding: 14px;
  border-radius: 10px;
  background: var(--paper);
}

.swap-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.token-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px 5px 5px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color .16s ease;
}
.token-pick:hover { background: var(--sunk); }
.token-pick.is-static { cursor: default; }
.token-pick.is-static:hover { background: transparent; }
.token-text { display: grid; gap: 1px; min-width: 0; }
.token-text strong { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.token-text small { color: var(--faint); font-size: 12px; }
.token-caret { width: 15px; height: 15px; color: var(--faint); transition: transform .18s ease; }
.token-pick[aria-expanded="true"] .token-caret { transform: rotate(180deg); }

.pill-btn {
  flex: none;
  padding: 6px 13px;
  border: 0;
  border-radius: 999px;
  background: var(--sunk);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.pill-btn:hover { background: var(--orange-tint); color: var(--orange-deep); }

.swap-divider { height: 1px; margin: 12px 0; background: var(--line-soft); }

.swap-amount { display: grid; justify-items: center; gap: 10px; padding-bottom: 18px; }

.amount-input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--display);
  font-size: 56px;          /* JS narrows this to fit; see autoScale() */
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: 1.15;
  text-align: center;
  font-feature-settings: "tnum" 1;
  transition: font-size .14s ease;
}
.amount-input::placeholder { color: var(--placeholder); }

.swap-usd {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}
/* The "=" chip and the up/down glyph are indicators, not controls — matching
   the source component, where both are plain elements rather than buttons. */
.equals-pill {
  position: relative;
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--sunk);
}
.equals-pill::before,
.equals-pill::after {
  content: "";
  position: absolute;
  left: 7px;
  width: 12px; height: 1.6px;
  border-radius: 2px;
  background: var(--muted);
}
.equals-pill::before { top: 10px; }
.equals-pill::after  { top: 14.4px; }
.flip-glyph { width: 17px; height: 17px; color: var(--faint); }

/* Badge straddling the seam between the two cards. */
.swap-seam {
  position: absolute;
  left: 50%;
  bottom: -21px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--paper);
  color: var(--faint);
}
.swap-seam .icon { width: 16px; height: 16px; }

.swap-receive .swap-row { min-height: 46px; }
.receive-input {
  width: 45%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.03em;
  text-align: right;
  font-feature-settings: "tnum" 1;
}
.receive-input::placeholder { color: var(--placeholder); }

.swap-actions { display: grid; gap: 8px; margin-top: 4px; }
.btn-pill { border-radius: 999px; }
.btn-quiet {
  background: var(--sunk);
  border-color: transparent;
  color: var(--muted);
  font-weight: 500;
}
.btn-quiet:hover { background: var(--quiet-hover); color: var(--ink); }

/* The market dropdown is anchored to the token picker. */
.swap-pay .combo { position: relative; }
.swap-pay .combo-menu { left: 0; right: auto; width: 268px; }

/* ------------------------------------------------- Borrow: summary rail --- */

.swap-summary {
  padding: 22px;
  border-radius: 18px;
  background: var(--paper);
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  background: var(--sunk);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.status-chip.is-safe { background: var(--safe-tint); color: var(--safe-text); }
.status-chip.is-warn { background: var(--orange-tint); color: var(--orange-deep); }
.status-chip.is-risk { background: var(--risk-tint); color: var(--risk); }

.health-dot {
  width: 7px; height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--faint);
}
.health-dot.is-safe { background: var(--safe); }
.health-dot.is-warn { background: var(--orange); }
.health-dot.is-risk { background: var(--risk); }

.summary-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.summary-health-value {
  font-family: var(--display);
  font-size: 42px;
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: 1;
}
.summary-health-label { margin-top: 7px; color: var(--muted); font-size: 13px; font-weight: 600; }
.summary-note { margin-top: 10px; color: var(--faint); font-size: 12.5px; line-height: 1.5; }

/* Scale runs 0 → liquidation LTV, with a tick at this market's max LTV. */
.ltv-scale { margin-top: 20px; }
.ltv-track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: var(--sunk);
  overflow: hidden;
}
.ltv-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--faint);
  transition: width .32s ease, background-color .24s ease;
}
.ltv-fill.is-safe { background: var(--safe); }
.ltv-fill.is-warn { background: var(--orange); }
.ltv-fill.is-risk { background: var(--risk); }
.ltv-mark {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 12px;
  border-radius: 2px;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(42, 36, 31, .18);
  transform: translateX(-1px);
}
.ltv-legend {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
  color: var(--faint);
  font-size: 11.5px;
}
.ltv-legend strong { color: var(--ink-2); font-weight: 500; }

.summary-highlight {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--sunk);
}
.summary-liq {
  margin-top: 4px;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.05;
}
.summary-liq-foot { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.5; }

.summary-group-label {
  margin-top: 20px;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.swap-summary .data-rows { margin-top: 2px; padding-top: 0; border-top: 0; }
.swap-summary .data-rows div { padding: 10px 0; }

.summary-source {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  color: var(--faint);
  font-size: 11.5px;
  line-height: 1.5;
}
.summary-source::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--faint);
}
.summary-source.is-live { color: var(--muted); }
.summary-source.is-live::before { background: var(--safe); }

.page-head-center .page-sub { max-width: 46ch; }

/* ------------------------------------------------------------- Markets --- */

.asset-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: 8px;
  background: var(--paper);
}
.asset-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.asset-card h3 { margin-top: 14px; font-family: var(--serif); font-size: 22px; letter-spacing: -.02em; }
.asset-sub { color: var(--muted); font-family: var(--mono); font-size: 11.5px; }
.asset-price { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
.asset-price strong {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.045em;
  font-feature-settings: "tnum" 1;
}
.asset-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.asset-meta dt { color: var(--muted); font-size: 12px; }
.asset-meta dd { margin: 3px 0 0; font-family: var(--mono); font-size: 13px; font-weight: 500; }
.asset-card .btn { margin-top: 16px; }

/* ==========================================================================
   Root workspace views — quieter hierarchy for non-dashboard pages
   ========================================================================== */

.view.is-active { animation: none; }

[data-page="borrow"],
[data-page="vaults"],
[data-page="risk"],
[data-page="stats"],
[data-page="markets"] { max-width: 1180px; }

[data-page="borrow"] .page-head,
[data-page="vaults"] .page-head,
[data-page="risk"] .page-head,
[data-page="stats"] .page-head,
[data-page="markets"] .page-head { margin-bottom: 28px; }

[data-page="borrow"] .page-head h1,
[data-page="vaults"] .page-head h1,
[data-page="risk"] .page-head h1,
[data-page="stats"] .page-head h1,
[data-page="markets"] .page-head h1 {
  max-width: 780px;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.02;
  letter-spacing: -.055em;
}

[data-page="borrow"] .page-sub,
[data-page="vaults"] .page-sub,
[data-page="risk"] .page-sub,
[data-page="stats"] .page-sub,
[data-page="markets"] .page-sub { max-width: 620px; margin-top: 9px; font-size: 15px; line-height: 1.55; }

.network-badge,
.risk-status,
.market-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  background: var(--glass);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
}
.network-badge i, .risk-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px var(--orange-soft); }
.risk-status i { background: var(--safe); box-shadow: 0 0 0 4px var(--safe-tint); }

/* Eight facts as a uniform grid. Label-over-value avoids the long dead gap
   that label/value rows leave at this width. */
.swap-facts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-radius: 22px;
  background: var(--paper);
  overflow: hidden;
}
.fact { padding: 16px 20px; }
/* Rule between columns, and between the two rows. */
.fact:not(:nth-child(4n + 1)) { border-left: 1px solid var(--line-soft); }
.fact:nth-child(n + 5) { border-top: 1px solid var(--line-soft); }
.fact dt {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fact dd {
  margin: 5px 0 0;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.035em;
  font-feature-settings: "tnum" 1;
}

/* Vaults: one compact protocol readout followed by the searchable ledger. */
.vault-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 20px;
}
.vault-overview > div { padding: 22px 24px 22px 0; }
.vault-overview > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.vault-overview span, .vault-overview small { display: block; color: var(--faint); font-size: 12px; }
.vault-overview strong { display: block; margin: 3px 0 2px; font-family: var(--display); font-size: 27px; font-weight: 600; letter-spacing: -.045em; }
[data-page="vaults"] .table-toolbar { margin-bottom: 10px; }
[data-page="vaults"] .card-flush { border-radius: 8px; box-shadow: none; }
[data-page="vaults"] .market-table tbody tr { transition: background-color .16s ease; }
[data-page="vaults"] .market-table tbody tr:hover { background: var(--orange-soft); }

/* Risk: editorial hierarchy instead of three equal marketing cards.
   The band's own top/bottom rules are gone — it is a filled panel now, and the
   rules between the principles do the dividing. */
.risk-principles { grid-template-columns: 1.35fr .825fr .825fr; gap: 0; }
.risk-principles .feature { min-height: 230px; padding: 26px 28px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.risk-principles .feature + .feature { border-left: 1px solid var(--line); }
.risk-principles .feature:first-child { padding-left: 0; }
.risk-principles .feature:last-child { padding-right: 0; }
.risk-principles .feature-title { font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -.035em; }
.risk-principles .feature-icon { width: 36px; height: 36px; border-radius: 10px; }
[data-page="risk"] .block { margin-top: 34px; }
[data-page="risk"] .param-list { padding-block: 10px; }

/* Stats: the top line reads like a protocol pulse, not a card collection.
   The strip's own top/bottom rules are an outline on a container and are gone;
   the rule between tiles is a divider and stays. */
.stats-overview { gap: 0; }
.stats-overview .stat-tile { min-height: 126px; padding: 22px 24px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.stats-overview .stat-tile:first-child { padding-left: 0; }
.stats-overview .stat-tile + .stat-tile { border-left: 1px solid var(--line); }
.stats-overview .stat-value { font-size: 30px; }
[data-page="stats"] .chart-card { padding: 26px 28px; border-radius: 8px; box-shadow: none; }
[data-page="stats"] .split-even .card { min-height: 320px; box-shadow: none; }
[data-page="stats"] .liquidation-note { border-left: 3px solid var(--orange); box-shadow: none; }

/* Markets: a dense directory, not a generic card wall. */

[data-page="markets"] .asset-card {
  display: grid;
  grid-template-columns: 48px minmax(125px, 1fr) minmax(120px, .8fr);
  grid-template-areas: "icon name price" "icon sub price" "meta meta action";
  align-items: center;
  gap: 3px 14px;
  min-height: 178px;
  padding: 24px 26px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
[data-page="markets"] .asset-card:nth-child(odd) { padding-left: 0; padding-right: 30px; border-right: 1px solid var(--line); }
[data-page="markets"] .asset-card:nth-child(even) { padding-left: 30px; padding-right: 0; }
[data-page="markets"] .asset-card:nth-last-child(-n+2) { border-bottom: 0; }
[data-page="markets"] .asset-top { grid-area: icon; display: block; }
[data-page="markets"] .asset-top .tag { display: none; }
[data-page="markets"] .asset-top .market-icon.is-lg { width: 44px; height: 44px; }
[data-page="markets"] .asset-card > h3 { grid-area: name; margin: 0; font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: -.035em; }
[data-page="markets"] .asset-card > .asset-sub { grid-area: sub; }
[data-page="markets"] .asset-price { grid-area: price; justify-content: flex-end; margin: 0; }
[data-page="markets"] .asset-meta { grid-area: meta; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0 0; padding-top: 15px; }
[data-page="markets"] .asset-meta dd { font-size: 12.5px; }
[data-page="markets"] .asset-card .btn {
  grid-area: action;
  align-self: stretch;
  justify-content: flex-end;
  min-height: 0;
  margin: 18px 0 0;
  padding: 15px 0 0;
  border: 0;
  border-top: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  color: var(--orange-deep);
  font-size: 12.5px;
}
[data-page="markets"] .asset-card .btn:hover { background: transparent; color: var(--ink); }

@media (max-width: 1120px) {
  .risk-principles { grid-template-columns: 1fr; }
  .risk-principles .feature { min-height: 0; padding: 24px 0; }
  .risk-principles .feature + .feature { border-left: 0; border-top: 1px solid var(--line); }

  [data-page="markets"] .asset-card:nth-child(n) { padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  [data-page="markets"] .asset-card:last-child { border-bottom: 0; }
}

@media (max-width: 760px) {
  .network-badge, .risk-status, .market-count-badge { align-self: flex-start; }
  .vault-overview { grid-template-columns: 1fr; }
  .vault-overview > div { padding: 16px 0; }
  .vault-overview > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .stats-overview .stat-tile { padding: 18px 0; }
  .stats-overview .stat-tile + .stat-tile { border-left: 0; border-top: 1px solid var(--line); }
  [data-page="markets"] .asset-card { grid-template-columns: 44px 1fr; grid-template-areas: "icon name" "icon sub" "price price" "meta meta" "action action"; }
  [data-page="markets"] .asset-price { justify-content: flex-start; margin-top: 12px; }
  [data-page="markets"] .asset-card .btn { justify-content: flex-start; }
  [data-page="borrow"] .swap-actions { grid-template-columns: 1fr; }
  [data-page="borrow"] .swap-actions .btn-quiet { width: 100%; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1240px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
}

@media (max-width: 1120px) {

  .connect-banner { padding: 26px 26px; gap: 20px; }
  .connect-medallion { width: 108px; height: 108px; }
}

@media (max-width: 900px) {
  .sidebar {
    top: 10px; left: 10px; bottom: 10px;
    width: min(288px, calc(100vw - 20px));
    transform: translateX(calc(-100% - 14px));
    transition: transform .26s cubic-bezier(.32, .72, 0, 1);
  }
  .sidebar.is-open { transform: none; }

  .drawer-close {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
  }
  .drawer-close:hover { background: var(--sunk); color: var(--ink); }
  .drawer-close .icon { width: 18px; height: 18px; }

  .mobile-bar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 62px;
    padding: 0 16px;
    background: var(--wash-paper);
    border-bottom: 1px solid var(--line);
    backdrop-filter: saturate(1.4) blur(12px);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
  }

  body.nav-open { overflow: hidden; }

  .main { margin-left: 0; padding: 24px 16px 60px; }
  .page-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .param-list { grid-template-columns: 1fr; }
  .param-list div:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
  .param-list div:last-child { border-bottom: 0; }

  .table-toolbar { flex-wrap: wrap; }
  .search { width: 100%; }

  /* Drop the least load-bearing columns instead of scrolling sideways. */
  .market-table-vaults th:nth-child(2), .market-table-vaults td:nth-child(2),
  .market-table-vaults th:nth-child(4), .market-table-vaults td:nth-child(4) { display: none; }
  /* Risk matrix keeps market, avg LTV, liquidation LTV, headroom. */
  .market-table-risk th:nth-child(2), .market-table-risk td:nth-child(2),
  .market-table-risk th:nth-child(3), .market-table-risk td:nth-child(3),
  .market-table-risk th:nth-child(5), .market-table-risk td:nth-child(5),
  .market-table-risk th:nth-child(8), .market-table-risk td:nth-child(8) { display: none; }
  /* Positions keep vault, borrowed, LTV, health, action. */
  .market-table-positions th:nth-child(2), .market-table-positions td:nth-child(2),
  .market-table-positions th:nth-child(5), .market-table-positions td:nth-child(5) { display: none; }
  .market-table th, .market-table td { padding-left: 14px; padding-right: 14px; }

  .split-even { grid-template-columns: 1fr; }
  .bucket { grid-template-columns: minmax(0, 1fr) 84px; row-gap: 8px; }
  .bucket-track { grid-column: 1 / -1; order: 3; }
  .liquidation-note { flex-direction: column; gap: 12px; }
  .indexed { justify-items: start; text-align: left; }
}

@media (max-width: 640px) {

  .zero-state { flex-wrap: wrap; }
  .zero-state .btn { width: 100%; margin-left: 0; }
  .dash-connect { min-height: calc(100vh - 180px); }
  .connect-panel .connect-medallion { width: 76px; height: 76px; margin-bottom: 20px; }
  .connect-banner { grid-template-columns: 1fr; padding: 24px 20px; }
  .connect-medallion { order: -1; width: 88px; height: 88px; }
  .connect-copy h2 { font-size: 26px; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
  .card { padding: 18px; }
  .card-flush { padding: 0; }
  .card-title { font-size: 22px; }
  .param-list { padding: 2px 18px; }

  .health-ring { width: 148px; height: 148px; }
  .health-center strong { font-size: 28px; }

  .chart { height: 150px; gap: 7px; }

  .market-table-vaults th:nth-child(5), .market-table-vaults td:nth-child(5) { display: none; }
  /* Thresholds table keeps market + the two LTVs; supply cap goes. */
  .market-table-compact th:nth-child(4), .market-table-compact td:nth-child(4) { display: none; }
  /* Risk matrix narrows to market, avg LTV, headroom. */
  .market-table-risk th:nth-child(6), .market-table-risk td:nth-child(6) { display: none; }
  /* Positions narrow to vault, LTV, health, action. */
  .market-table-positions th:nth-child(3), .market-table-positions td:nth-child(3) { display: none; }
  /* The vault age is the widest thing in a nowrap cell — drop it here. */
  .cell-age { display: none; }
  /* Safety net: if a table still exceeds the viewport, scroll it inside its
     own card rather than letting the page scroll sideways. */
  .card-flush { overflow-x: auto; overflow-y: hidden; }
  .market-table th, .market-table td { padding: 12px; }

  .chart-grouped .chart-bar { max-width: 13px; }
  .chart-grouped .chart-pair { gap: 2px; }

  .amount-input { font-size: 38px; }
  .swap-pay .combo-menu { width: min(268px, calc(100vw - 64px)); }
  .swap-card { padding: 12px; }
  /* Position and market facts stack rather than squeeze into two columns. */
  .ticker { width: 34px; height: 34px; font-size: 9px; }

}

/* ------------------------------------------------------ Batch deposits --- */

.deposit-modal[hidden] { display: none; }
.deposit-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.deposit-modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--backdrop-soft); backdrop-filter: blur(7px); cursor: default; }
.deposit-dialog {
  position: relative;
  width: min(460px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  padding: 20px;
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 30px 80px -30px var(--modal-shadow);
}

/* =====================================================================
   August polish pass — compact glass, open ledgers, capital-flow stats
   ===================================================================== */

/* Keep the global wallet control inside the app canvas, not pinned to its edge. */
.topbar { width: min(100% - 32px, 1080px); min-height: 42px; margin-bottom: 22px; }

/* Borrow is a single, genuinely centered task. */
[data-page="borrow"] { max-width: none; }
[data-page="borrow"].is-active { min-height: calc(100vh - 136px); place-items: center; }
[data-page="borrow"] .swap-wrap { width: 100%; grid-template-columns: minmax(0, 452px); align-content: center; }
[data-page="borrow"] .swap { width: 100%; }

/* A small glass readout instead of a second panel beneath the form. */
.swap-health-trigger {
  min-height: 30px;
  padding: 5px 9px;
  gap: 6px;
  border: 1px solid var(--glass);
  background: var(--glass-soft);
  box-shadow: inset 0 1px 0 var(--glass-strong);
  backdrop-filter: blur(16px) saturate(145%);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
}
.swap-health-trigger:hover, .swap-health-trigger:focus-visible { background: var(--glass); }
.swap-health-tooltip {
  width: min(330px, calc(100vw - 36px));
  padding: 12px 14px;
  border-color: var(--glass);
  border-radius: 13px;
  background: linear-gradient(145deg, var(--glass), var(--wash-paper));
  box-shadow: var(--shadow-pill), inset 0 1px 0 var(--glass-strong);
  backdrop-filter: blur(22px) saturate(155%);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
}
.health-copy-note { font-size: 11.5px; }
.health-copy-lines { margin-top: 8px; }
.health-copy-lines p { padding: 8px 0; font-size: 10.75px; line-height: 1.45; }
.swap-health-info { width: 14px; height: 14px; font-size: 9px; }

/* The collateral-markets page starts with the useful numbers, then the ledger. */
[data-page="vaults"] .vault-overview { margin-top: 12px; margin-bottom: 18px; }
[data-page="vaults"] .table-toolbar { margin-top: 0; }
[data-page="vaults"] .market-table th { padding-block: 9px; }
[data-page="vaults"] .market-table td { padding-block: 10px; }

/* Risk: plain-language hierarchy — posture, controls, parameters. */

.risk-overview { grid-template-columns: 1.25fr repeat(2, 1fr); overflow: hidden; border-radius: 16px; background: var(--glass-soft); }
.risk-overview > div { min-height: 118px; padding: 18px 20px; }
.risk-overview-lead { background: linear-gradient(145deg, var(--wash-safe), var(--glass)); }
.risk-overview-lead strong { font-size: 30px; }
.risk-principles { display: grid; grid-template-columns: 1.35fr 1fr 1fr; margin-top: 18px; border-radius: 16px; background: var(--glass-soft); overflow: hidden; }
.risk-principle { min-height: 188px; padding: 24px; }
.risk-principle + .risk-principle { border-left: 1px solid var(--line); }
.risk-principle:first-child { background: linear-gradient(145deg, var(--wash-orange), var(--glass-soft)); }
.risk-principle h2 { margin: 18px 0 9px; font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: -.035em; }
.risk-principle p { color: var(--muted); font-size: 12px; line-height: 1.6; }
[data-page="risk"] .block { margin-top: 25px; }

/* Option 3: capital enters from two sources, is consolidated by Root, then
   resolves into liquidity, debt, and utilization. The remainder is an open
   protocol ledger rather than a stack of generic cards. */
.stats-page-head { margin: 2px 0 20px; padding: 0; border: 0; background: transparent; }
.stats-page-head h1 { margin-top: 0; font-size: clamp(34px, 3.2vw, 44px); }
.capital-flow {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(64px, .45fr) minmax(210px, 1.1fr) minmax(64px, .45fr) minmax(205px, 1fr);
  align-items: center;
  min-height: 330px;
  padding: 18px 4px;
}
.flow-label { margin-bottom: 10px; color: var(--faint); font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.flow-source-group, .flow-output-group { display: grid; gap: 10px; }
.flow-source, .flow-output { position: relative; display: grid; gap: 3px; min-height: 86px; padding: 15px 17px; border-radius: 14px; background: var(--glass); }
.flow-source span, .flow-output span, .flow-core span { color: var(--faint); font-family: var(--mono); font-size: 8.5px; letter-spacing: .09em; text-transform: uppercase; }
.flow-source strong, .flow-output strong { font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -.04em; }
.flow-source small, .flow-output small { color: var(--orange-deep); font-family: var(--mono); font-size: 9px; }
.flow-output { border-radius: 0; }
.flow-output.is-buffer small { color: var(--safe); }
.flow-core { display: grid; justify-items: center; gap: 7px; padding: 30px 16px; border-radius: 18px; background: var(--glass); text-align: center; }
.flow-core strong:first-of-type { margin-bottom: 18px; font-family: var(--display); font-size: clamp(38px, 4vw, 54px); font-weight: 600; letter-spacing: -.06em; }
.flow-core strong:last-of-type { font-family: var(--display); font-size: 29px; font-weight: 600; letter-spacing: -.045em; }
.flow-core small { color: var(--muted); font-size: 10px; }
.flow-ribbons { display: flex; flex-direction: column; justify-content: center; gap: 16px; height: 190px; margin-inline: -1px; }
.flow-ribbons i { display: block; height: 58px; border-block: 1px solid rgba(207,111,85,.16); background: linear-gradient(90deg, rgba(207,111,85,.08), rgba(232,142,118,.58)); clip-path: polygon(0 10%, 100% 32%, 100% 68%, 0 90%); }
.flow-ribbons i + i { background: linear-gradient(90deg, var(--glass-soft), var(--wash-pale)); clip-path: polygon(0 18%, 100% 35%, 100% 65%, 0 82%); }
.flow-ribbons.is-output i { width: 100% !important; height: 40px; background: linear-gradient(90deg, rgba(232,142,118,.58), rgba(207,111,85,.12)); clip-path: polygon(0 34%, 100% 4%, 100% 96%, 0 66%); }
.flow-ribbons.is-output i:nth-child(2) { background: linear-gradient(90deg, rgba(232,142,118,.5), rgba(207,111,85,.09)); clip-path: polygon(0 24%, 100% 8%, 100% 92%, 0 76%); }
.flow-ribbons.is-output i:nth-child(3) { background: linear-gradient(90deg, rgba(137,153,123,.46), rgba(137,153,123,.08)); }
.stats-source-strip { display: grid; grid-template-columns: auto minmax(140px, 1fr) auto auto; align-items: center; gap: 16px; padding: 14px 5px; border-block: 1px solid var(--line); color: var(--faint); font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.stats-source-strip .stats-source-bar { display: flex; height: 7px; overflow: hidden; border-radius: 999px; }
.stats-source-strip .stats-source-bar i:first-child { width: 50.9%; background: var(--orange-deep); }
.stats-source-strip .stats-source-bar i:last-child { width: 49.1%; background: var(--orange-tint); }
.stats-source-strip > span > i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; }
.stats-source-strip .is-collateral { background: var(--orange-deep); }
.stats-source-strip .is-liquidity { background: var(--orange-tint); }
.stats-trend { padding: 26px 4px 8px; border-bottom: 1px solid var(--line); }
.stats-trend-head h2, .stats-ledger h2 { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.stats-trend-head p { margin-top: 4px; color: var(--faint); font-size: 10px; }
.stats-trend .chart { min-height: 230px; margin-top: 8px; }
.stats-ledger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats-ledger > article { min-width: 0; padding: 25px 28px 8px 4px; }
.stats-ledger > article + article { padding-left: 28px; border-left: 1px solid var(--line); }
.stats-ledger .data-rows { margin-top: 14px; }
.stats-ledger .data-rows div { padding-block: 8px; }
.stats-ledger .data-rows dt, .stats-ledger .data-rows dd { font-size: 11px; }
.compact-buckets { gap: 7px; margin-top: 14px; }
.compact-buckets .bucket { grid-template-columns: 1fr auto; gap: 4px 10px; }
.compact-buckets .bucket-hint { display: none; }
.compact-buckets .bucket-track { grid-column: 1; }
.compact-buckets .bucket-figures { grid-column: 2; grid-row: 1 / span 2; }

/* Markets is a compact decision surface: overview rail, then dense directory. */

[data-page="markets"] .asset-card { min-height: 158px; padding-block: 20px; }
[data-page="markets"] .asset-meta { margin-top: 12px; padding-top: 11px; }
[data-page="markets"] .asset-card .btn { margin-top: 12px; padding-top: 11px; }

@media (max-width: 980px) {
  .capital-flow { grid-template-columns: 1fr 46px 1.05fr 46px 1fr; }
  .flow-source strong, .flow-output strong { font-size: 18px; }
  .stats-ledger { grid-template-columns: 1fr; }
  .stats-ledger > article + article { padding-left: 4px; border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 760px) {
  .topbar { width: 100%; }
  [data-page="borrow"].is-active { min-height: auto; }

  .capital-flow { grid-template-columns: 1fr; gap: 10px; }
  .flow-ribbons { display: none; }
  .flow-source, .flow-output { border-radius: 14px; background: var(--paper); }
  .flow-core { order: -1; }
  .stats-source-strip { grid-template-columns: 1fr 1fr; }
  .stats-source-strip .stats-source-bar { grid-column: 1 / -1; grid-row: 2; }
}
.deposit-open { overflow: hidden; }
.deposit-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.deposit-head h2 { font-family: var(--display); font-size: 28px; font-weight: 600; letter-spacing: -.045em; line-height: 1.05; }
.deposit-head p:last-child { margin-top: 7px; color: var(--muted); font-size: 13px; }
/* Everything inside the deposit dialog sits on --paper, so any child that also
   asked for --paper painted nothing. They take --sunk: one step forward of the
   dialog in both themes, no outlines needed. */
.deposit-close { display: grid; place-items: center; width: 34px; height: 34px; flex: none; padding: 0; border: 1px solid transparent; border-radius: 10px; background: var(--sunk); color: var(--muted); cursor: pointer; }
.deposit-close:hover { border-color: var(--orange-line); background: var(--orange-soft); color: var(--orange-deep); }
.deposit-close .icon { width: 16px; height: 16px; }
.deposit-qr-wrap { display: grid; justify-items: center; gap: 8px; margin-bottom: 18px; padding: 16px; border-radius: 16px; background: var(--sunk); }
.deposit-qr-wrap img { width: 132px; height: 132px; border-radius: 8px; }
.deposit-qr-wrap p { color: var(--muted); font-size: 11px; }
.deposit-address-label { display: block; margin: 13px 0 6px; color: var(--muted); font-size: 11px; font-weight: 650; }
.deposit-address-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.deposit-address-row #copyDepositAddress { min-width: 82px; transition: background-color .16s ease, border-color .16s ease, color .16s ease; }
.deposit-address-row #copyDepositAddress.is-copied { border-color: var(--safe-line); background: var(--safe-tint); color: var(--safe); }
.deposit-address-row #copyDepositAddress.is-error { border-color: var(--orange-line); background: var(--orange-soft); color: var(--risk); }
.deposit-amount-row { min-height: 46px; border-radius: 12px; background: var(--sunk); }
.deposit-address-value { display: flex; align-items: center; min-width: 0; min-height: 46px; padding: 9px 12px; border-radius: 12px; background: var(--sunk); color: var(--ink-2); font-size: 10.5px; line-height: 1.35; overflow-wrap: anywhere; user-select: all; }
.deposit-amount-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding-right: 14px; }
.deposit-amount-row input { width: 100%; min-width: 0; padding: 0 14px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 22px; }
.deposit-amount-row strong { font-size: 12px; }
#prepareDeposit, #confirmDeposit { margin-top: 16px; }
.deposit-destination[hidden] { display: none; }
.deposit-status { min-height: 20px; margin-top: 13px; color: var(--ink-2); font-size: 12px; line-height: 1.5; }
.deposit-status:empty { display: none; }
.deposit-status.is-success { color: var(--safe); }
.deposit-status.is-error { color: var(--danger); }
.local-vault-card { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 22px; padding: 18px 20px; }
.local-vault-asset { display: flex; align-items: center; gap: 12px; }
.local-vault-asset img { width: 38px; height: 38px; border-radius: 50%; }
.local-vault-asset span, .local-vault-balance { display: grid; gap: 2px; }
.local-vault-asset small, .local-vault-balance span, .local-vault-balance small { color: var(--muted); font-size: 10.5px; }
.local-vault-balance { text-align: right; }
.local-vault-balance strong { font-size: 14px; }

/* ---- Your open vaults, on the dashboard ----
   A totals row, then one row per market, then the leftover balance. Same
   ledger metrics as the borrow page's market rows so the two read as the
   same table seen from either end. */
.position-card { padding: 0; overflow: hidden; }
.position-card-head { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line-soft); }
.position-card-figure { padding: 16px 18px; }
.position-card-figure + .position-card-figure { border-left: 1px solid var(--line-soft); }
.position-card-figure span { display: block; color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.position-card-figure strong { display: block; margin-top: 8px; font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -.045em; line-height: 1; font-feature-settings: "tnum" 1; }
.position-card-list { margin: 0; padding: 0; list-style: none; }
.position-card-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto 54px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 18px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color .14s ease;
}
.position-card-row:hover { background: var(--orange-soft); }
.position-card-name { display: grid; gap: 1px; min-width: 0; }
.position-card-name strong { font-size: 14px; font-weight: 600; }
.position-card-name small { color: var(--muted); font-family: var(--mono); font-size: 11px; }
.position-card-debt { display: grid; gap: 1px; justify-items: end; text-align: right; }
.position-card-debt strong { font-family: var(--mono); font-size: 13.5px; font-weight: 500; }
.position-card-debt small { color: var(--faint); font-family: var(--mono); font-size: 10.5px; }
/* Health is the one figure worth colouring: same three tones as the dialog. */
.position-card-health {
  justify-self: end;
  min-width: 54px;
  padding: 4px 0;
  border-radius: 5px;
  background: var(--sunk);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
}
.position-card-health.is-safe { background: var(--safe-tint); color: var(--safe-text); }
.position-card-health.is-warn { background: var(--orange-tint); color: var(--orange-deep); }
.position-card-health.is-risk { background: var(--risk-tint); color: var(--risk); }
.position-card-foot { padding: 12px 18px; color: var(--faint); font-size: 12px; }

@media (max-width: 520px) {
  .position-card-head { grid-template-columns: 1fr; }
  .position-card-figure + .position-card-figure { border-left: 0; border-top: 1px solid var(--line-soft); }
  .position-card-row { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "icon name health" "icon debt health"; gap: 4px 10px; }
  .position-card-row .market-icon { grid-area: icon; }
  .position-card-name { grid-area: name; }
  .position-card-debt { grid-area: debt; justify-items: start; text-align: left; }
  .position-card-health { grid-area: health; align-self: center; }
}

@media (max-width: 520px) {
  .deposit-modal { align-items: end; padding: 10px; }
  .deposit-dialog { width: 100%; padding: 20px 16px 16px; border-radius: 14px; }
  .deposit-head h2 { font-size: 25px; }
  .deposit-qr-wrap img { width: 140px; height: 140px; }
  .local-vault-card { grid-template-columns: 1fr; gap: 14px; }
  .local-vault-balance { text-align: left; }
}

/* ========================================================================== 
   2026-08 protocol workspace refinement
   ========================================================================== */

[data-page="borrow"] { max-width: 1000px; }
[data-page="borrow"] .workspace-head { max-width: 1000px; margin-inline: auto; }

/* The swap is the page's single focal point. */
[data-page="borrow"] .swap-wrap {
  grid-template-columns: minmax(0, 500px);
  justify-content: center;
  max-width: 500px;
  margin-inline: auto;
}
[data-page="borrow"] .swap {
  padding: 14px;
  border-radius: 22px;
  background: var(--paper);
}
[data-page="borrow"] .swap-card { transition: order .2s ease, border-color .2s ease, background-color .2s ease; }
[data-page="borrow"] .swap.is-reverse .swap-receive { order: 1; }
[data-page="borrow"] .swap.is-reverse .swap-pay { order: 2; }
[data-page="borrow"] .swap.is-reverse .swap-actions { order: 3; }
[data-page="borrow"] .swap-health-popover { order: 4; }
[data-page="borrow"] .swap.is-reverse .swap-seam .icon { transform: rotate(180deg); }
[data-page="borrow"] .swap-actions { grid-template-columns: 1fr 104px; }
[data-page="borrow"] .swap-actions .btn-quiet { width: 104px; }

/* Compact factor sits below the form; detail appears on hover, focus or tap. */
.swap-health-popover { position: relative; display: flex; justify-content: center; margin-top: 2px; }
.swap-health-trigger { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 7px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 11.5px; cursor: help; }
.swap-health-trigger:hover, .swap-health-trigger:focus-visible { background: var(--sunk); color: var(--ink); }
.swap-health-trigger strong { color: var(--ink); font-family: var(--mono); font-size: 12px; }
.swap-health-trigger #healthLabel { color: var(--faint); }
.swap-health-trigger #healthLabel.is-safe { color: var(--safe-text); }
.swap-health-trigger #healthLabel.is-warn { color: var(--orange-deep); }
.swap-health-trigger #healthLabel.is-risk { color: var(--risk); }
.swap-health-info { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: var(--faint); font-family: var(--serif); font-size: 10px; }
.swap-health-tooltip { position: absolute; z-index: 20; top: calc(100% + 9px); left: 50%; width: min(430px, calc(100vw - 44px)); padding: 18px 20px; transform: translate(-50%, -5px); border-radius: 13px; background: var(--paper); box-shadow: var(--shadow-pill); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .16s ease, transform .16s ease, visibility .16s ease; }
.swap-health-popover:hover .swap-health-tooltip, .swap-health-popover:focus-within .swap-health-tooltip, .swap-health-popover.is-open .swap-health-tooltip { transform: translate(-50%, 0); opacity: 1; visibility: visible; pointer-events: auto; }
.health-copy-note { color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.health-copy-lines { margin-top: 14px; border-top: 1px solid var(--line-soft); }
.health-copy-lines p { padding: 13px 0; border-bottom: 1px solid var(--line-soft); color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.health-copy-lines p:last-child { padding-bottom: 0; border-bottom: 0; }
.health-copy-lines strong { color: var(--ink); font-weight: 600; }

.swap-seam {
  padding: 0;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease, transform .2s ease;
}
.swap-seam:hover, .swap-seam:focus-visible { border-color: var(--orange); background: var(--orange-soft); color: var(--orange-deep); }
.swap-seam .icon { transition: transform .22s ease; }

[data-page="vaults"] .market-table th,
[data-page="risk"] .market-table th,
[data-page="stats"] .market-table th { padding: 9px 13px; font-size: 9.5px; }
[data-page="vaults"] .market-table td,
[data-page="risk"] .market-table td,
[data-page="stats"] .market-table td { padding: 9px 13px; font-size: 11.5px; }
[data-page="vaults"] .cell-market { gap: 9px; }
[data-page="vaults"] .cell-market strong { font-size: 12.5px; }
[data-page="vaults"] .market-icon-sm { width: 27px; height: 27px; }
[data-page="vaults"] .row-action { width: 28px; height: 28px; border: 0; background: transparent; }
.risk-overview {
  display: grid;
  grid-template-columns: 1.35fr repeat(2, minmax(0, 1fr));
  margin-bottom: 14px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--paper);
}
.risk-overview > div { display: flex; min-height: 132px; flex-direction: column; justify-content: center; gap: 6px; padding: 22px 24px; }
.risk-overview > div + div { border-left: 1px solid var(--line); }
.risk-overview span { color: var(--faint); font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; }
.risk-overview strong { font-family: var(--display); font-size: 27px; font-weight: 600; letter-spacing: -.045em; line-height: 1; }
.risk-overview small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.risk-overview-lead { background: linear-gradient(145deg, var(--wash-safe), var(--paper) 74%); }
.risk-overview-lead strong { color: var(--safe); font-size: 34px; }
.risk-principles {
  border-radius: 16px;
  overflow: hidden;
  background: var(--paper);
}
.risk-principles .feature { min-height: 205px; padding: 25px 26px; }
.risk-principles .feature:first-child { padding-left: 26px; background: linear-gradient(145deg, var(--orange-soft), var(--glass)); }
.risk-principles .feature:last-child { padding-right: 26px; }
.risk-principles .feature p { max-width: 48ch; }

.stats-page-head {
  min-height: 146px;
  padding: 27px 30px;
  border-radius: 20px;
  background: radial-gradient(circle at 90% 45%, rgba(207,111,85,.18), transparent 34%), var(--paper);
}
.stats-indexed { align-self: flex-end; display: grid; justify-items: end; gap: 3px; color: var(--faint); font-size: 11px; }
.stats-indexed strong { color: var(--ink-2); font-family: var(--mono); font-size: 11px; font-weight: 500; }
.stats-hero-card {
  display: grid;
  grid-template-columns: 1.55fr repeat(4, minmax(0, 1fr));
  margin-top: 18px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper);
}
.stats-tvl-primary { min-height: 184px; padding: 26px 28px; background: linear-gradient(145deg, var(--wash-orange), var(--paper) 72%); }
.stats-tvl-value { margin: 5px 0 10px; font-family: var(--display); font-size: clamp(44px, 4vw, 62px); font-weight: 600; letter-spacing: -.06em; line-height: 1; }
.stats-tvl-primary > p:last-child { max-width: 260px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.stats-metric { display: flex; flex-direction: column; justify-content: center; gap: 7px; min-width: 0; padding: 22px 20px; border-left: 1px solid var(--line); }
.stats-metric > span { color: var(--faint); font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; }
.stats-metric strong { font-family: var(--display); font-size: clamp(20px, 2vw, 27px); font-weight: 600; letter-spacing: -.045em; line-height: 1.08; }
.stats-metric small { color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.stats-source-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; min-height: 50px; padding: 0 28px; border-top: 1px solid var(--line); color: var(--faint); font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; }
.stats-source-bar { display: flex; flex: 1; height: 7px; overflow: hidden; border-radius: 999px; background: var(--sunk); }
.stats-source-bar i:first-child { background: var(--orange-deep); }
.stats-source-bar i:last-child { background: var(--orange-tint); }
.source-key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; letter-spacing: 0; text-transform: none; }
.source-key > i, .breakdown-list dt > i { width: 8px; height: 8px; border-radius: 999px; background: var(--orange-deep); }
.source-key > i.is-liquidity, .breakdown-list dt > i.is-liquidity { background: var(--orange-tint); }
.breakdown-list dt > i.is-available { background: var(--orange-pale); }
.source-key strong { color: var(--ink-2); font-weight: 600; }
.stats-history-block { margin-top: 16px; }
.stats-history-layout { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(245px, .9fr); gap: 14px; }
[data-page="stats"] .stats-history-card, [data-page="stats"] .stats-breakdown-card { min-height: 390px; padding: 25px 26px; border-radius: 10px; }
.stats-history-card .chart-head { align-items: center; }
.chart-area { display: block; width: 100%; height: 280px; margin: 0; padding: 0; border: 0; }
.chart-area svg { display: block; width: 100%; height: 100%; overflow: visible; }
.area-grid line { stroke: var(--line-soft); stroke-width: 1; vector-effect: non-scaling-stroke; }
.area-grid text, .area-labels text { fill: var(--faint); font-family: var(--mono); font-size: 10px; }
.area-fill { stroke: none; }
.area-fill-total { fill: url(#tvlArea); }
.area-fill-liquidity { fill: url(#liquidityArea); }
.area-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.area-line-total { stroke: var(--orange-deep); }
.area-line-collateral { stroke: var(--orange); stroke-width: 1.5; }
.area-line-liquidity { stroke: var(--orange-mid); stroke-width: 1.5; }
.area-dots circle { fill: var(--paper); stroke: var(--orange-deep); stroke-width: 2; vector-effect: non-scaling-stroke; }
.swatch.is-liquidity { background: var(--orange-tint); }
.breakdown-list { margin: 28px 0 0; }
.breakdown-list > div { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; padding: 21px 0; border-bottom: 1px solid var(--line-soft); }
.breakdown-list > div:last-child { border-bottom: 0; }
.breakdown-list dt { display: flex; align-items: center; gap: 9px; color: var(--ink-2); font-size: 13px; }
.breakdown-list dd { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.breakdown-list dd strong { font-family: var(--mono); font-size: 13px; }
.breakdown-list dd span { min-width: 38px; color: var(--faint); font-family: var(--mono); font-size: 10.5px; text-align: right; }

@media (max-width: 1120px) {
  .stats-hero-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-tvl-primary { grid-column: 1 / -1; }
  .stats-metric { border-top: 1px solid var(--line); }
  .stats-metric:nth-of-type(odd) { border-left: 0; }
  .stats-source-row { flex-wrap: wrap; padding-block: 14px; }
  .stats-source-bar { flex-basis: 50%; }
  .risk-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .risk-overview > div:nth-child(3) { border-left: 0; }
  .risk-overview > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

@media (max-width: 820px) {
  [data-page="borrow"] .swap-summary { grid-template-columns: 1fr; row-gap: 6px; }
  [data-page="borrow"] .swap-summary > * { grid-column: 1 !important; grid-row: auto !important; }
  [data-page="borrow"] .swap-summary > .summary-group-label { margin-top: 22px; }
  .stats-history-layout { grid-template-columns: 1fr; }
  .stats-indexed { align-self: flex-start; justify-items: start; }
}

@media (max-width: 620px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .main, .view, .card-flush { min-width: 0; max-width: 100%; }
  .stats-page-head { padding: 22px; }
  .stats-hero-card { grid-template-columns: 1fr; }
  .stats-tvl-primary { grid-column: auto; }
  .stats-metric { border-left: 0; }
  .stats-source-row { align-items: flex-start; }
  .stats-source-bar { flex-basis: 100%; order: 3; }
  .source-key { width: 100%; }
  .legend { flex-wrap: wrap; }
  .chart-area { height: 235px; }
  .risk-overview { grid-template-columns: 1fr; }
  .risk-overview > div + div { border-left: 0; border-top: 1px solid var(--line); }
}

/* ==========================================================================
   Responsive overrides — must stay last so they outrank the refinement block
   above, which shares their specificity.
   ========================================================================== */

@media (max-width: 1000px) {
  [data-page="borrow"] .swap-wrap { grid-template-columns: minmax(0, 480px); justify-content: center; }
}

@media (max-width: 900px) {
  .swap-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:not(:nth-child(4n + 1)) { border-left: 0; }
  .fact:nth-child(even) { border-left: 1px solid var(--line-soft); }
  .fact:nth-child(n + 3) { border-top: 1px solid var(--line-soft); }
}

@media (max-width: 359px) {
  .swap-facts { grid-template-columns: 1fr; }
  .fact { border-left: 0 !important; }
  .fact + .fact { border-top: 1px solid var(--line-soft); }
}

/* Final cascade locks for the approved Option 3 direction. */
.stats-page-head { min-height: 0; margin: 2px 0 20px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.swap-health-trigger { min-height: 30px; padding: 5px 9px; gap: 6px; border: 1px solid var(--glass); background: var(--glass-soft); box-shadow: inset 0 1px 0 var(--glass-strong); backdrop-filter: blur(16px) saturate(145%); -webkit-backdrop-filter: blur(16px) saturate(145%); }
.swap-health-tooltip { width: min(330px, calc(100vw - 36px)); padding: 12px 14px; border-color: var(--glass-strong); border-radius: 13px; background: linear-gradient(145deg, var(--glass-strong), var(--wash-paper)); box-shadow: var(--shadow-pill), inset 0 1px 0 var(--glass-strong); backdrop-filter: blur(22px) saturate(155%); -webkit-backdrop-filter: blur(22px) saturate(155%); }
.health-copy-note { font-size: 11.5px; }
.health-copy-lines { margin-top: 8px; }
.health-copy-lines p { padding: 8px 0; color: var(--muted-2); font-size: 10.75px; line-height: 1.45; }
/* Both of these are page-level panels, not glass floating over something —
   they take the card fill every other panel on the app uses, so they step off
   the page in both themes instead of painting a near-white slab in light. */
.risk-overview { grid-template-columns: 1.25fr repeat(2, 1fr); min-height: 0; background: var(--paper); }
.risk-overview > div { min-height: 118px; padding: 18px 20px; }
.risk-principles { display: grid; grid-template-columns: 1.35fr 1fr 1fr; border-radius: 16px; background: var(--paper); }
[data-page="borrow"].is-active { display: grid; }

.capital-flow { grid-template-columns: minmax(255px, 1.42fr) minmax(78px, .48fr) minmax(235px, 1.1fr) minmax(82px, .5fr) minmax(245px, 1.18fr); min-height: 332px; padding-top: 8px; }
.flow-source { grid-template-columns: 48px 1fr auto; grid-template-areas: "med label label" "med value value" "med share share"; align-content: center; min-height: 112px; padding: 18px 22px 18px 16px; border-radius: 60px 16px 16px 60px; }
.flow-source > b { grid-area: med; }
.flow-source > span { grid-area: label; }
.flow-source > strong { grid-area: value; }
.flow-source > small { grid-area: share; }
.flow-medallion { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--orange); color: #fff; font-family: var(--mono); font-size: 8px; }
.flow-medallion .icon { width: 18px; height: 18px; }
.flow-medallion.is-usdg { background: linear-gradient(145deg, var(--orange-hi), var(--orange-lo)); }
.flow-output { grid-template-columns: 1fr 48px; grid-template-areas: "label icon" "value icon" "share icon"; min-height: 92px; padding: 13px 10px 13px 18px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.flow-output > span { grid-area: label; }
.flow-output > strong { grid-area: value; }
.flow-output > small { grid-area: share; }
.flow-output-icon { grid-area: icon; align-self: center; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--orange); border-radius: 50%; color: var(--orange); }
.flow-output-icon .icon { width: 20px; height: 20px; }
.flow-output.is-buffer .flow-output-icon { border-color: var(--safe); color: var(--safe); }
.flow-source-group, .flow-output-group { position: relative; z-index: 2; }
.flow-core { z-index: 3; }
.flow-ribbons { position: relative; z-index: 1; width: 230%; margin-left: -94%; margin-right: -2px; }
.flow-ribbons.is-output { width: 165%; margin-left: -2px; margin-right: -65%; }
.flow-ribbons svg { display: block; width: 100%; height: 250px; overflow: visible; }
.flow-ribbons svg path { fill: rgba(232,142,118,.48); stroke: rgba(207,111,85,.2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.flow-ribbons svg path + path { fill: var(--wash-pale); stroke: var(--wash-pale); }
.flow-ribbons.is-output svg path:nth-child(1) { fill: rgba(232,142,118,.58); }
.flow-ribbons.is-output svg path:nth-child(2) { fill: rgba(207,111,85,.46); }
.flow-ribbons.is-output svg path:nth-child(3) { fill: rgba(137,153,123,.42); stroke: rgba(111,133,96,.2); }
.flow-core em { position: absolute; top: -28px; color: var(--faint); font-family: var(--mono); font-size: 8.5px; font-style: normal; letter-spacing: .1em; text-transform: uppercase; }
.flow-core { position: relative; }
.stats-trend { padding-top: 22px; }
.stats-trend .chart, .chart-area { height: 136px; min-height: 136px; }
.area-labels text { font-size: 8px; letter-spacing: .08em; }
.area-labels .area-value { fill: var(--ink-2); font-size: 10px; letter-spacing: 0; }
.stats-ledger > article { padding-top: 20px; }

@media (max-width: 760px) {
  .stats-page-head { padding: 0; }
  .risk-overview, .risk-principles { grid-template-columns: 1fr; }
  .capital-flow { grid-template-columns: 1fr; }
  .flow-source, .flow-output { border-radius: 14px; background: var(--paper); }
}

/* Option 3 desktop geometry is deliberately fixed to the approved artboard. */
@media (min-width: 761px) {
  .sidebar { top: 0; left: 0; bottom: 0; width: 228px; padding: 24px 14px 18px; border-width: 0 1px 0 0; border-radius: 0; box-shadow: none; }
  .main { margin-left: 228px; padding: 30px 40px 72px 49px; }
  .view, .topbar { max-width: none; }
  .topbar { width: 100%; }

  [data-page="stats"] .capital-flow { position: relative; display: block; height: 340px; min-height: 340px; padding: 0; }
  [data-page="stats"] .stats-page-head { transform: translateY(-34px); }
  [data-page="stats"] .stats-page-head h1 { margin-top: 13px; }
  [data-page="stats"] .flow-source-group { position: absolute; top: 16px; left: 4px; width: 398px; }
  [data-page="stats"] .flow-source-group .flow-label, [data-page="stats"] .flow-output-group .flow-label { position: absolute; top: -28px; left: 4px; margin: 0; }
  [data-page="stats"] .flow-source { min-height: 112px; }
  [data-page="stats"] .flow-ribbons { position: absolute; top: 10px; left: 230px; width: 192px; margin: 0; }
  [data-page="stats"] .flow-core { position: absolute; top: 16px; left: 402px; width: 285px; min-height: 292px; }
  [data-page="stats"] .flow-ribbons.is-output { top: 10px; left: 687px; width: 188px; margin: 0; }
  [data-page="stats"] .flow-output-group { position: absolute; top: 15px; right: 0; width: calc(100% - 875px); min-width: 255px; }
  [data-page="stats"] .flow-output { min-height: 91px; }
  [data-page="stats"] .stats-trend { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: 8px; min-height: 150px; padding: 24px 0 0; }
  [data-page="stats"] .stats-trend .chart { margin-top: 0; }
}

.compact-health-row { display: grid; grid-template-columns: 1fr auto 42px; align-items: baseline; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.compact-health-row span { font-size: 11px; }
.compact-health-row strong { font-family: var(--mono); font-size: 11px; }
.compact-health-row small { color: var(--faint); font-family: var(--mono); font-size: 9px; text-align: right; }
.stats-ledger-link { margin-top: 14px; padding: 0; border: 0; background: transparent; color: var(--orange-deep); font-family: var(--mono); font-size: 9.5px; cursor: pointer; }
.stats-ledger-link:hover { color: var(--ink); }

/* Stats v3 — the accepted flow artboard, scoped to its final semantic markup. */
[data-page="stats"] .stats-head { align-items: flex-start; min-height: 124px; margin: -34px 0 0; padding: 0; border: 0; background: transparent; }
[data-page="stats"] .stats-head h1 { margin-top: 8px; font-size: 46px; }
[data-page="stats"] .stats-stamp { display: grid; justify-items: end; gap: 2px; margin-top: 62px; color: var(--faint); font-size: 10px; }
[data-page="stats"] .stats-stamp strong { color: var(--ink-2); font-family: var(--mono); font-size: 10px; font-weight: 500; }
[data-page="stats"] .flow { margin-top: 4px; }
[data-page="stats"] .flow-legend { display: grid; grid-template-columns: 36% 26% 38%; padding: 0 4px 9px; color: var(--faint); font-family: var(--mono); font-size: 8.5px; letter-spacing: .11em; text-transform: uppercase; }
[data-page="stats"] .flow-legend span:nth-child(2) { text-align: center; }
[data-page="stats"] .flow-legend span:nth-child(3) { padding-left: 42%; }
[data-page="stats"] .flow-body { position: relative; height: 300px; }
[data-page="stats"] .flow-ribbons { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 300px; margin: 0; overflow: visible; pointer-events: none; }
[data-page="stats"] .flow-ribbons .ribbon { stroke-width: 0; }
[data-page="stats"] .flow-ribbons .is-collateral { fill: rgba(232,142,118,.56); }
[data-page="stats"] .flow-ribbons .is-supply { fill: var(--wash-pale); }
[data-page="stats"] .flow-ribbons .is-available { fill: rgba(232,142,118,.62); }
[data-page="stats"] .flow-ribbons .is-debt { fill: rgba(207,111,85,.50); }
[data-page="stats"] .flow-ribbons .is-surplus { fill: rgba(137,153,123,.44); }
[data-page="stats"] .flow-col { position: absolute; z-index: 2; display: grid; }
/* Sources must stop short of the core, or the ribbons have no channel to
   travel through and collapse to a few pixels. Left gap 36−27 = 9%,
   right gap 73−62 = 11%. */
[data-page="stats"] .flow-sources { top: 8px; left: 0; width: 27%; gap: 38px; }
[data-page="stats"] .flow-alloc { top: 0; right: 0; width: 27%; gap: 0; }
[data-page="stats"] .flow-node { display: flex; align-items: center; gap: 16px; min-height: 112px; padding: 18px 20px; border-radius: 18px; background: var(--paper); }
[data-page="stats"] .flow-sources .flow-node { background: var(--paper); }
[data-page="stats"] .flow-sources .flow-node + .flow-node { background: var(--paper); }
[data-page="stats"] .flow-node.is-right { display: grid; grid-template-columns: 1fr 52px; gap: 12px; min-height: 100px; padding: 12px 7px 12px 14px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
[data-page="stats"] .flow-badge { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--orange); color: #fff; }
[data-page="stats"] .flow-badge .icon { width: 20px; height: 20px; }
[data-page="stats"] .flow-badge.is-usdg { overflow: hidden; background: var(--orange); }
[data-page="stats"] .flow-badge.is-usdg img { display: block; width: 44px; height: 44px; object-fit: cover; }
[data-page="stats"] .flow-badge.is-outline { grid-column: 2; grid-row: 1; width: 42px; height: 42px; border: 1px solid var(--orange); background: transparent; color: var(--orange); }
[data-page="stats"] .flow-badge.is-quiet { border-color: var(--safe); color: var(--safe); }
[data-page="stats"] .flow-node.is-right > div { grid-column: 1; grid-row: 1; align-self: center; }
[data-page="stats"] .flow-label { margin: 0; color: var(--faint); font-family: var(--mono); font-size: 10px; line-height: 1.5; letter-spacing: .09em; text-transform: uppercase; }
[data-page="stats"] .flow-value { margin-top: 6px; color: var(--ink); font-family: var(--display); font-size: 26px; font-weight: 600; letter-spacing: -.04em; }
[data-page="stats"] .flow-share { margin-top: 4px; color: var(--orange-deep); font-size: 12.5px; font-weight: 500; }
[data-page="stats"] .flow-share.is-muted { color: var(--safe); }
[data-page="stats"] .flow-core { position: absolute; z-index: 3; top: 5px; left: 36%; display: grid; justify-items: center; align-content: center; gap: 7px; width: 26%; height: 290px; padding: 24px 16px; border-radius: 18px; background: var(--paper); text-align: center; }
[data-page="stats"] .flow-core-label { color: var(--faint); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
[data-page="stats"] .flow-core-value { margin: 4px 0 18px; font-family: var(--display); font-size: clamp(38px,3.6vw,46px); font-weight: 600; letter-spacing: -.06em; line-height: 1; }
[data-page="stats"] .flow-core-backing { font-family: var(--display); font-size: 34px; font-weight: 600; letter-spacing: -.045em; }
[data-page="stats"] .flow-core-note { color: var(--muted); font-size: 12px; }
[data-page="stats"] .split-row { display: grid; grid-template-columns: auto minmax(150px,1fr) auto; align-items: center; gap: 18px; min-height: 54px; padding: 0 5px; border-block: 1px solid var(--line); }
[data-page="stats"] .split-title { color: var(--faint); font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
[data-page="stats"] .split-bar { display: flex; height: 7px; overflow: hidden; border-radius: 999px; background: var(--sunk); }
[data-page="stats"] .split-bar i:first-child { background: var(--orange-deep); }
[data-page="stats"] .split-bar i:last-child { background: var(--orange-tint); }
[data-page="stats"] .split-legend { display: flex; gap: 20px; color: var(--muted); font-family: var(--sans); font-size: 12.5px; }
[data-page="stats"] .split-legend span { display: inline-flex; align-items: center; gap: 5px; }
[data-page="stats"] .split-legend strong { color: var(--ink-2); font-weight: 500; }
[data-page="stats"] .split-legend .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange-deep); }
[data-page="stats"] .split-legend .dot.is-supply { background: var(--orange-tint); }
[data-page="stats"] .tvl-history { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 8px; min-height: 158px; padding: 24px 4px 0; border-bottom: 1px solid var(--line); }
[data-page="stats"] .tvl-title p { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
[data-page="stats"] .tvl-title small { color: var(--faint); font-size: 11px; }
[data-page="stats"] .tvl-chart { position: relative; min-width: 0; }
[data-page="stats"] .tvl-ticks { display: grid; grid-template-columns: repeat(7,1fr); align-items: start; }
[data-page="stats"] .tvl-ticks span { display: grid; gap: 2px; justify-items: center; }
[data-page="stats"] .tvl-ticks b { color: var(--faint); font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .08em; }
[data-page="stats"] .tvl-ticks strong { font-family: var(--mono); font-size: 12.5px; font-weight: 500; }
[data-page="stats"] .tvl-line { position: absolute; inset: 24px 0 0; display: block; width: 100%; height: 120px; overflow: visible; }
[data-page="stats"] .tvl-line polyline { fill: none; stroke: var(--orange-deep); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
[data-page="stats"] .tvl-line circle { fill: var(--paper); stroke: var(--orange-deep); stroke-width: 1.7; vector-effect: non-scaling-stroke; }
[data-page="stats"] .stats-columns { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
[data-page="stats"] .stats-col { min-width: 0; padding: 20px 28px 8px 4px; }
[data-page="stats"] .stats-col + .stats-col { padding-left: 28px; border-left: 1px solid var(--line); }
[data-page="stats"] .stats-col h2 { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
[data-page="stats"] .stats-col h2 .icon { width: 16px; height: 16px; color: var(--orange); }
[data-page="stats"] .stats-col dl { margin: 13px 0 0; }
[data-page="stats"] .stats-col dl div { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
[data-page="stats"] .stats-col dt, [data-page="stats"] .stats-col dd { font-size: 13px; }
[data-page="stats"] .stats-col dd { margin: 0; }
[data-page="stats"] .stats-col dd.is-accent { color: var(--safe); }
[data-page="stats"] .stats-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 14px; padding: 0; border: 0; background: transparent; color: var(--orange-deep); font-family: var(--mono); font-size: 9px; cursor: pointer; }
[data-page="stats"] .stats-link { font-size: 13px; } [data-page="stats"] .stats-link .icon { width: 14px; height: 14px; }

@media (max-width: 900px) {
  [data-page="stats"] .flow-body { height: auto; }
  [data-page="stats"] .flow-ribbons { display: none; }
  [data-page="stats"] .flow-col, [data-page="stats"] .flow-core { position: static; width: auto; height: auto; }
  [data-page="stats"] .flow-body { display: grid; gap: 12px; }
  [data-page="stats"] .flow-core { order: -1; min-height: 230px; }
  [data-page="stats"] .flow-sources, [data-page="stats"] .flow-alloc { grid-template-columns: 1fr; }
  [data-page="stats"] .flow-node, [data-page="stats"] .flow-node.is-right { border-radius: 14px; background: var(--paper); }
  [data-page="stats"] .flow-legend { display: none; }
  [data-page="stats"] .stats-columns { grid-template-columns: 1fr; }
  [data-page="stats"] .stats-col + .stats-col { padding-left: 4px; border-left: 0; border-top: 1px solid var(--line); }
}

/* ==========================================================================
   Stats — lower half: readable sans
   labels at 13–18px/600, figures set in Newsreader with tight tracking,
   and a segmented composition bar rather than a legend strip.
   ========================================================================== */

[data-page="stats"] .composition {
  margin-top: 26px;
  padding: 28px 30px 26px;
  border-radius: 17px;
  background:
    radial-gradient(120% 140% at 0 0, rgba(207, 111, 85, .07) 0, rgba(207, 111, 85, 0) 55%),
    var(--paper);
}

[data-page="stats"] .composition-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--sunk);
}
[data-page="stats"] .composition-bar i { display: block; height: 100%; }
[data-page="stats"] .composition-bar i:first-child { background: var(--orange-deep); }
[data-page="stats"] .composition-bar i:last-child { background: var(--orange-pale); }

[data-page="stats"] .composition-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 22px;
}
[data-page="stats"] .composition-card { display: grid; gap: 7px; align-content: start; }
[data-page="stats"] .composition-card + .composition-card { padding-left: 26px; border-left: 1px solid var(--line-soft); }

[data-page="stats"] .comp-label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
}
[data-page="stats"] .comp-label .dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--orange-deep); }
[data-page="stats"] .comp-label .dot.is-supply { background: var(--orange-pale); }
[data-page="stats"] .comp-label .dot.is-debt { background: var(--orange); }

[data-page="stats"] .comp-value {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1;
}
[data-page="stats"] .comp-share { color: var(--muted); font-size: 13px; font-weight: 500; }

/* ------------------------------------------------------------ TVL history --- */

[data-page="stats"] .tvl-history {
  grid-template-columns: 168px minmax(0, 1fr);
  min-height: 0;
  margin-top: 26px;
  padding: 26px 4px 4px;
  border-top: 1px solid var(--line);
}
[data-page="stats"] .tvl-title p {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-transform: none;
}
[data-page="stats"] .tvl-title small { margin-top: 3px; color: var(--muted); font-size: 13px; }
[data-page="stats"] .tvl-ticks b {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
}
[data-page="stats"] .tvl-ticks strong {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.02em;
}
[data-page="stats"] .tvl-ticks strong.is-accent { color: var(--orange-deep); }
[data-page="stats"] .tvl-line { inset: 46px 0 0; height: 128px; }

/* --------------------------------------------------------- Three columns --- */

[data-page="stats"] .stats-columns { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line); }
[data-page="stats"] .stats-col { padding: 0 30px; }
[data-page="stats"] .stats-col:first-child { padding-left: 0; }
[data-page="stats"] .stats-col:last-child { padding-right: 0; }
[data-page="stats"] .stats-col + .stats-col { padding-left: 30px; border-left: 1px solid var(--line); }

[data-page="stats"] .stats-col h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-transform: none;
}
[data-page="stats"] .stats-col h2 .icon { width: 18px; height: 18px; color: var(--orange); }

[data-page="stats"] .stats-col dl { margin: 0; }
[data-page="stats"] .stats-col dl div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}
[data-page="stats"] .stats-col dl div:last-child { border-bottom: 0; }
[data-page="stats"] .stats-col dt { color: var(--muted); font-family: var(--sans); font-size: 13px; font-weight: 500; }
[data-page="stats"] .stats-col dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.02em;
  white-space: nowrap;
}
[data-page="stats"] .stats-col dd.is-accent { color: var(--orange-deep); }

[data-page="stats"] .stats-link {
  margin-top: 16px;
  color: var(--orange-deep);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
}
[data-page="stats"] .stats-link .icon { width: 14px; height: 14px; }

@media (max-width: 900px) {
  [data-page="stats"] .composition { padding: 22px 20px; }
  [data-page="stats"] .composition-cards { grid-template-columns: 1fr; gap: 0; }
  [data-page="stats"] .composition-card { padding: 16px 0; }
  [data-page="stats"] .composition-card + .composition-card { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-soft); }
  [data-page="stats"] .tvl-history { grid-template-columns: 1fr; gap: 14px; }
  [data-page="stats"] .stats-col { padding: 22px 0; }
  [data-page="stats"] .stats-col + .stats-col { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 640px) {
  /* Seven month labels will not fit at full size — shrink rather than clip. */
  [data-page="stats"] .tvl-ticks b { font-size: 9px; letter-spacing: 0; }
  [data-page="stats"] .tvl-ticks strong { font-size: 11px; letter-spacing: -.03em; }
  [data-page="stats"] .tvl-tick { min-width: 0; }
  [data-page="stats"] .comp-value { font-size: 29px; }
}

/* ==========================================================================
   Vaults — overview card, then a dense market ledger
   ========================================================================== */

[data-page="vaults"] .vault-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 18px;
  padding: 24px 28px;
  border-radius: 17px;
  background:
    radial-gradient(120% 140% at 0 0, rgba(207, 111, 85, .07) 0, rgba(207, 111, 85, 0) 55%),
    var(--paper);
}
[data-page="vaults"] .vault-stat {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 0;
  padding: 0 26px 0 0;
  border: 0;
}
[data-page="vaults"] .vault-stat + .vault-stat { padding-left: 26px; border-left: 1px solid var(--line-soft); }

[data-page="vaults"] .vault-stat-label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  text-transform: none;
}
[data-page="vaults"] .vault-stat-label .dot {
  width: 9px; height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--orange-deep);
}
[data-page="vaults"] .vault-stat-label .dot.is-debt { background: var(--orange); }
[data-page="vaults"] .vault-stat-label .dot.is-supply { background: var(--orange-pale); }

[data-page="vaults"] .vault-stat-value {
  display: block;
  margin: 0;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1;
}
[data-page="vaults"] .vault-stat-sub {
  display: block;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
}
[data-page="vaults"] .vault-meter {
  height: 5px;
  margin-top: 2px;
  border-radius: 999px;
  background: var(--sunk);
  overflow: hidden;
}
[data-page="vaults"] .vault-meter i { display: block; height: 100%; border-radius: 999px; background: var(--orange); }

/* ------------------------------------------------------------- Ledger ----- */

[data-page="vaults"] .table-toolbar { margin-bottom: 10px; }
[data-page="vaults"] .search { height: 38px; }

[data-page="vaults"] .market-table th {
  padding: 8px 14px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
}
/* Compact rows: one line per market, small icon, tight padding. */
[data-page="vaults"] .market-table td {
  padding: 0 14px;
  height: 42px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
}
[data-page="vaults"] .market-table td:first-child { font-family: var(--sans); }
[data-page="vaults"] .cell-market { display: flex; align-items: center; gap: 9px; }
[data-page="vaults"] .cell-market strong { font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
[data-page="vaults"] .cell-market small {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .02em;
}
[data-page="vaults"] .market-icon-sm { width: 24px; height: 24px; }
[data-page="vaults"] .market-icon-sm img { width: 100%; height: 100%; }

/* Utilization reads as bar-then-number on one line. */
[data-page="vaults"] .util {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}
[data-page="vaults"] .util-bar { width: 46px; height: 4px; border-radius: 999px; background: var(--sunk); overflow: hidden; }
[data-page="vaults"] .util-bar i { display: block; height: 100%; border-radius: 999px; background: var(--orange); }

[data-page="vaults"] .row-action { width: 26px; height: 26px; border: 0; background: transparent; }
[data-page="vaults"] .row-action .icon { width: 13px; height: 13px; }
[data-page="vaults"] .market-table tbody tr:hover { background: var(--orange-soft); }

@media (max-width: 900px) {
  [data-page="vaults"] .vault-overview { grid-template-columns: 1fr; padding: 20px; }
  [data-page="vaults"] .vault-stat { padding: 14px 0; }
  [data-page="vaults"] .vault-stat + .vault-stat { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-soft); }
  [data-page="vaults"] .market-table td { height: 46px; }
}

/* ==========================================================================
   Sidebar stays a floating card on desktop. Must remain last — an earlier
   desktop block flattens it to a flush rail at the same specificity.
   ========================================================================== */

@media (min-width: 761px) {
  .sidebar {
    top: var(--rail-gap);
    left: var(--rail-gap);
    bottom: var(--rail-gap);
    width: 228px;
    padding: 20px 12px 14px;
    border-width: 0;
    border-radius: 14px;
    box-shadow: none;
  }
  .main { margin-left: calc(228px + var(--rail-gap) * 2); }
}

/* ==========================================================================
   Figures use Root's display face (Manrope) rather than a serif.
   Kept last so it overrides the blocks above.
   ========================================================================== */

[data-page="vaults"] .vault-stat-value,
[data-page="stats"] .comp-value {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: 1;
}
[data-page="stats"] .stats-col dd,
[data-page="stats"] .tvl-ticks strong {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.035em;
}
[data-page="stats"] .stats-col dd { font-size: 14px; }
[data-page="stats"] .tvl-ticks strong { font-size: 14px; }

/* Overview reads tighter. */
[data-page="vaults"] .vault-overview { padding: 22px 26px; }
[data-page="vaults"] .vault-stat { gap: 6px; }
[data-page="vaults"] .vault-stat-label { font-size: 13.5px; }
[data-page="vaults"] .vault-stat-sub { font-size: 12.5px; }

/* ---------------------------------------------------- Table header ------- */

/* Sans at a readable size instead of 9.5px mono, on a tinted band. */
[data-page="vaults"] .market-table thead tr { background: var(--paper-3); }
[data-page="vaults"] .market-table th {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Name and ticker need real separation — the flex gap was not reaching them. */
[data-page="vaults"] .cell-market { display: flex; align-items: baseline; gap: 8px; }
[data-page="vaults"] .cell-market .market-icon { align-self: center; }
[data-page="vaults"] .cell-market small { margin-left: 1px; }

@media (max-width: 900px) {
  /* Drop supplied + max LTV so the ledger fits without sideways scroll. */
  [data-page="vaults"] .market-table th:nth-child(2),
  [data-page="vaults"] .market-table td:nth-child(2),
  [data-page="vaults"] .market-table th:nth-child(5),
  [data-page="vaults"] .market-table td:nth-child(5) { display: none; }
  [data-page="vaults"] .market-table th,
  [data-page="vaults"] .market-table td { padding-left: 11px; padding-right: 11px; }
  [data-page="vaults"] .util-bar { display: none; }
}

@media (max-width: 900px) {
  /* Long header words (UTILIZATION) force the table wider than the card;
     let them wrap and tighten so the ledger fits without inner scrolling. */
  [data-page="vaults"] .market-table th {
    white-space: normal;
    font-size: 10px;
    letter-spacing: .03em;
    line-height: 1.25;
  }
  [data-page="vaults"] .market-table td { font-size: 11.5px; }
  [data-page="vaults"] .cell-market small { display: none; }
}

/* ==========================================================================
   Main content sits in its own floating off-white panel, matching the
   sidebar's inset and height.
   ========================================================================== */

@media (min-width: 761px) {
  body { background: var(--shell); }

  /* The shell is a frame, not part of the content. The document itself does
     not scroll, so a long page moves inside the panel and the two panels stay
     pinned where they are — otherwise the main panel and its corners ride up
     out of the window along with the content. */
  html, body { height: 100%; overflow: hidden; }

  .main {
    /* Pinned exactly like the sidebar beside it: the inset on three sides, and
       the rail plus the inset either side of it on the left, so the gutter
       between the two panels matches the other three margins. */
    position: fixed;
    top: var(--rail-gap);
    right: var(--rail-gap);
    bottom: var(--rail-gap);
    left: calc(228px + var(--rail-gap) * 2);
    margin: 0;
    /* The base rule pins .main to 100vh for the mobile document flow; here the
       top/bottom offsets already give it its height, and leaving that in place
       pushes the panel's bottom edge past the window. */
    min-height: 0;
    padding: 16px 16px 22px;
    overflow-y: auto;
    /* Reaching the end of the panel must not start scrolling anything behind
       it. */
    overscroll-behavior: contain;
    border-radius: 14px;
    background: var(--paper-2);
  }
  .view, .topbar { max-width: 1180px; margin-inline: auto; }
}

/* ------------------------------------------------- Borrow: unit toggle --- */

.unit-toggle {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, transform .28s cubic-bezier(.34,1.56,.64,1);
}
.unit-toggle:hover { background: var(--sunk); color: var(--ink-2); }
.unit-toggle[aria-pressed="true"] { color: var(--orange-deep); transform: rotate(180deg); }
.unit-toggle .icon { width: 16px; height: 16px; }

/* USD entry: the big field leads with a currency mark. */
.swap-pay.is-usd .amount-input { padding-left: 0; }
.swap-pay.is-usd .swap-amount { position: relative; }
.swap-pay.is-usd .swap-amount::before {
  content: "$";
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--faint);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  content: "USD";
}

/* ------------------------------------------- Borrow: direction switch --- */

/* `order` is not animatable, so the cards were snapping. Cross-fade and
   slide them instead, driven by a class the toggle sets. */
@keyframes swap-drop {
  0%   { opacity: .35; transform: translateY(-14px) scale(.985); }
  60%  { opacity: 1;   transform: translateY(2px) scale(1.004); }
  100% { opacity: 1;   transform: none; }
}
@keyframes swap-rise {
  0%   { opacity: .35; transform: translateY(14px) scale(.985); }
  60%  { opacity: 1;   transform: translateY(-2px) scale(1.004); }
  100% { opacity: 1;   transform: none; }
}
.swap.is-switching .swap-pay { animation: swap-rise .42s cubic-bezier(.32,.72,0,1) both; }
.swap.is-switching .swap-receive { animation: swap-drop .42s cubic-bezier(.32,.72,0,1) both; }
.swap.is-switching.is-reverse .swap-pay { animation-name: swap-drop; }
.swap.is-switching.is-reverse .swap-receive { animation-name: swap-rise; }

.swap-seam { transition: transform .42s cubic-bezier(.34,1.56,.64,1), background-color .16s ease, border-color .16s ease, color .16s ease; }
.swap.is-reverse .swap-seam { transform: translateX(-50%) rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .swap.is-switching .swap-pay,
  .swap.is-switching .swap-receive { animation: none; }
}

@media (max-width: 760px) {
  body { background: var(--cream); }
}

/* ========================================================================== 
   Borrow — collateral ledger and position dialog
   ========================================================================== */

[data-page="borrow"] { max-width: 1180px; }

.borrow-head { margin-bottom: 24px; }
.borrow-head h1 {
  margin-top: 5px;
  font-family: var(--display);
  font-size: clamp(40px, 4.2vw, 58px);
  font-weight: 500;
  letter-spacing: -.06em;
  line-height: 1;
}
.borrow-head > div > p:last-child { max-width: 660px; margin-top: 10px; color: var(--muted); font-size: 15px; }

.borrow-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.borrow-tabs { display: inline-flex; padding: 3px; border-radius: 11px; background: var(--sunk); }
.borrow-tabs button {
  min-width: 120px;
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.borrow-tabs button.is-active { background: var(--raised); color: var(--orange-deep); }

.borrow-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(290px, 36%);
  height: 46px;
  padding: 0 14px;
  border-radius: 11px;
  background: var(--paper);
}
.borrow-search .icon { width: 17px; height: 17px; color: var(--faint); }
.borrow-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: 13.5px; }
.borrow-search input::placeholder { color: var(--faint); }

.borrow-ledger { overflow: hidden; border-radius: 16px; background: var(--paper); }
.borrow-ledger-head,
.borrow-market-row {
  display: grid;
  grid-template-columns: minmax(250px, 1.5fr) minmax(170px, 1fr) 100px minmax(150px, .95fr) 28px;
  align-items: center;
  column-gap: 18px;
}
.borrow-ledger-head {
  min-height: 48px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  color: var(--faint);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.borrow-market-row {
  width: 100%;
  min-height: 78px;
  padding: 0 22px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s ease;
}
.borrow-market-row:last-child { border-bottom: 0; }
.borrow-market-row:hover { background: var(--sunk); }
.borrow-market-row.is-selected { background: var(--row-selected); }
.borrow-market-name { display: flex; align-items: center; gap: 13px; min-width: 0; }
.borrow-market-name .market-icon { width: 40px; height: 40px; }
.borrow-market-name > span:last-child { display: grid; min-width: 0; }
.borrow-market-name strong { font-size: 15px; font-weight: 600; }
.borrow-market-name small,
.borrow-market-balance small { color: var(--faint); font-family: var(--mono); font-size: 10.5px; }
.borrow-market-balance { display: grid; }
.borrow-market-balance strong,
.borrow-market-ltv,
.borrow-market-power { font-size: 13px; font-weight: 500; }
.borrow-radio { display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid var(--faint); border-radius: 50%; }
.borrow-market-row.is-selected .borrow-radio { border-color: var(--orange); }
.borrow-market-row.is-selected .borrow-radio i { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); }
.borrow-empty { padding: 42px 20px; color: var(--muted); text-align: center; }

.borrow-continue {
  width: 100%;
  min-height: 50px;
  margin-top: 18px;
  border: 0;
  border-radius: 11px;
  background: var(--orange);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.borrow-continue:hover { background: var(--orange-deep); }

body.position-open { overflow: hidden; }
.position-modal[hidden] { display: none; }
.position-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 28px; }
.position-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: var(--backdrop-soft);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* The dialog is a single column at the swap card's own width. It used to be a
   730px two-column box, which forced both halves into 300-odd pixels and left
   the risk row three cramped cells wide. Stacking the legs is also what the
   swap card does, so the two surfaces now read as one product — and it means
   there is no desktop layout to unpick when it stacks on a phone. */
[data-page="borrow"] .position-dialog.swap {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  width: min(520px, calc(100vw - 48px));
  max-height: calc(100vh - 56px);
  overflow: auto;
  padding: 20px;
  border-radius: 14px;
  background: var(--paper);
  /* Kept exactly as fixed: a tighter, further-offset shadow than the old one,
     which haloed orange against the cream page. Do not add spread here. */
  box-shadow: 0 26px 70px -30px var(--modal-shadow);
}

.position-head { display: grid; grid-template-columns: 42px minmax(0, 1fr) 34px; align-items: center; gap: 12px; padding: 2px 1px 2px 0; }
.position-head .market-icon { width: 42px; height: 42px; }
.position-head-text { display: grid; gap: 1px; min-width: 0; }
.position-head h2 { font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: -.04em; line-height: 1.1; }
.position-head p { color: var(--faint); font-size: 12px; }
/* Same family as .deposit-close: a quiet filled square, one step forward of
   the dialog it sits on, with no resting outline. */
.position-close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--sunk);
  color: var(--muted);
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.position-close:hover { border-color: var(--orange-line); background: var(--orange-soft); color: var(--orange-deep); }
.position-close .icon { width: 16px; height: 16px; }

/* ---- Borrow / repay switch ---- */

.position-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  border-radius: 11px;
  background: var(--sunk);
}
.position-modes button {
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  transition: background-color .16s ease, color .16s ease;
}
.position-modes button:hover:not([disabled]) { color: var(--ink); }
.position-modes button[aria-pressed="true"] { background: var(--raised); color: var(--orange-deep); }
.position-modes button[disabled] { color: var(--placeholder); cursor: not-allowed; }

/* One quiet line stating what is already open in this market. */
.position-open-line {
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--sunk);
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}
.position-open-line strong { color: var(--ink); font-family: var(--mono); font-size: 11px; font-weight: 600; }

/* ---- Amount halves: the swap card's sunken shells ---- */

.position-fields { display: grid; gap: 8px; }
/* Deliberately the same metrics as the swap card's halves — sunk fill, 16px
   radius — so the two amount surfaces in the app are one component seen twice
   rather than two different ideas. The resting hairline is gone: --sunk
   already separates the half from the dialog. The border stays at zero
   visibility so :focus-within still has something to colour. */
.position-half {
  display: block;
  padding: 17px 19px 16px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: var(--sunk);
  transition: border-color .16s ease;
}
.position-half:focus-within { border-color: var(--orange-line); }
.position-half-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
}
.position-half-text { display: grid; gap: 0; min-width: 0; }
.position-label { color: var(--muted); font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: -.005em; }
.position-label strong { font-weight: 600; }
.position-balance {
  display: block;
  overflow: hidden;
  color: var(--faint);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.position-balance strong { color: var(--muted-2); font-weight: 500; }
.position-half-side { display: flex; align-items: center; gap: 7px; flex: none; }
/* The unit is fixed on both legs — this market on one, USDG on the other — so
   it is a pill that states the token, not a picker pretending to offer a
   choice. Same silhouette as the swap card's token button, minus the caret. */
.position-unit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 11px 0 7px;
  border-radius: 999px;
  background: var(--raised);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.position-unit .market-icon { width: 22px; height: 22px; flex: none; }
.position-mark-usdg img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; }
/* Small control, same family as .stat/.chip buttons elsewhere. */
.position-max {
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--raised);
  color: var(--muted);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.7;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.position-max:hover { background: var(--orange-soft); border-color: var(--orange-line); color: var(--orange-deep); }
.position-figure {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.15;
  text-align: left;
}
.position-figure::placeholder { color: var(--placeholder); }
/* A locked card still takes typing — the gate is on the action, not the
   field — so the figure keeps full contrast either way. */
[data-page="borrow"] .swap.is-locked .position-figure { color: var(--ink); cursor: text; }
.position-convert { display: block; min-height: 16px; margin-top: 3px; color: var(--faint); font-size: 11px; }

/* ---- Risk strip ---- */

/* A ruled region of the dialog rather than a box on it: no outline and no
   fill of its own, so the only surface inside it is the meter footer. */
.position-risk {
  margin-top: 2px;
  border-radius: 16px;
  overflow: hidden;
}
/* Reads like the Stats page KPI row: mono eyebrow, display figure, quiet
   supporting line, hairline dividers instead of three separate boxes. */
.position-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.position-stat { position: relative; min-height: 96px; padding: 15px 16px; }
.position-stat + .position-stat { border-left: 1px solid var(--line-soft); }
.position-stat-label {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  line-height: 1.3;
  text-transform: uppercase;
}
.position-stat > strong,
.position-stat button strong {
  display: block;
  margin-top: 9px;
  color: var(--ink);
  font-family: var(--display);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1;
  font-feature-settings: "tnum" 1;
}
.position-stat button { display: block; width: 100%; padding: 0; border: 0; background: transparent; text-align: left; cursor: help; }
.position-stat-foot {
  display: block;
  margin-top: 6px;
  color: var(--faint);
  font-size: 11px;
  line-height: 1.35;
}
.position-stat-foot b { color: var(--muted-2); font-weight: 500; }
#healthLabel.is-safe { color: var(--safe-text); }
#healthLabel.is-warn { color: var(--orange-deep); }
#healthLabel.is-risk { color: var(--risk); }
/* The note was written on every keystroke and shown to nobody — the rule that
   revealed it never existed. It is a hover/click detail on the figure. */
#healthTooltip { display: none; }
.position-stat.is-open #healthTooltip {
  position: absolute;
  z-index: 4;
  left: 12px;
  right: 12px;
  top: calc(100% - 10px);
  display: block;
  padding: 9px 11px;
  border-radius: 10px;
  background: var(--sunk);
  box-shadow: var(--shadow-pill);
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}

/* One ruled footer row — the swap card's closing device. */
.position-meter { display: grid; gap: 9px; padding: 14px 16px 15px; border-top: 1px solid var(--line-soft); background: var(--paper-3); }
/* The empty track is the quietest of the three zones on purpose: --line-strong
   is a warm tint and sat too close to the liquidation band beside it, so the
   bar read as one wash rather than fill / headroom / band. */
.position-ltv-track { position: relative; height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
/* The stretch between max LTV and liquidation: borrowable in principle, but
   only reachable by the price moving against you. Tinted, not fenced off.
   Scoped through the track because the tick rule two lines down is a bare
   `span` and would otherwise outrank a single class. */
.position-ltv-track .position-ltv-band { position: absolute; inset: 0 0 0 auto; width: 0; background: var(--orange-pale); }
.position-ltv-track i { position: relative; display: block; width: 0; height: 100%; border-radius: inherit; background: var(--orange); transition: width .2s ease; }
.position-ltv-track i.is-safe { background: var(--safe-stroke); }
.position-ltv-track i.is-warn { background: var(--orange); }
.position-ltv-track i.is-risk { background: var(--risk); }
.position-ltv-track span { position: absolute; top: 0; width: 2px; height: 100%; background: var(--ink-2); }
.position-ltv-scale { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--faint); font-family: var(--sans); font-size: 10.5px; }
.position-ltv-scale span { display: inline-flex; align-items: center; gap: 6px; }
.position-ltv-scale i { width: 8px; height: 8px; flex: none; border-radius: 2px; background: var(--ink-2); }
.position-ltv-scale i.is-liq { background: var(--orange-pale); }
.position-ltv-scale strong { color: var(--muted-2); font-family: var(--mono); font-size: 10.5px; font-weight: 600; }
.position-submit { min-height: 46px; margin-top: 2px; border-radius: 11px; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
/* While the accounting runs the button states what it is doing and stops
   taking clicks. Nothing is signed and nothing is sent — see app.js. */
.position-submit[disabled] { opacity: .72; cursor: default; }

@media (max-width: 1040px) {
  .borrow-ledger-head,
  .borrow-market-row { grid-template-columns: minmax(220px, 1.45fr) minmax(150px, 1fr) 90px minmax(125px, .8fr) 24px; column-gap: 12px; }
}

@media (max-width: 760px) {
  .borrow-toolbar { align-items: stretch; flex-direction: column; }
  .borrow-tabs { width: 100%; }
  .borrow-tabs button { flex: 1; min-width: 0; }
  .borrow-search { width: 100%; }
  .borrow-ledger-head { display: none; }
  .borrow-market-row { grid-template-columns: 1fr auto 22px; grid-template-areas: "market ltv radio" "balance power radio"; gap: 7px 12px; padding: 15px; }
  .borrow-market-name { grid-area: market; }
  .borrow-market-balance { grid-area: balance; }
  .borrow-market-ltv { grid-area: ltv; }
  .borrow-market-power { grid-area: power; }
  .borrow-radio { grid-area: radio; }
  /* The dialog is already one column, so the phone layout is the same card
     with tighter padding — only the three-across stat strip has to give, and
     it becomes three stacked rows divided by the same hairline. */
  .position-modal { padding: 10px; align-items: end; }
  [data-page="borrow"] .position-dialog.swap { width: 100%; max-height: calc(100dvh - 20px); padding: 16px; border-radius: 14px; }
  .position-head h2 { font-size: 19px; }
  .position-half { padding: 14px 15px 13px; }
  .position-figure { font-size: 28px; }
  .position-stats { grid-template-columns: 1fr; }
  .position-stat { min-height: 0; padding: 13px 15px; }
  .position-stat + .position-stat { border-left: 0; border-top: 1px solid var(--line-soft); }
  /* Rows this short cannot carry a popover hanging off the bottom edge. */
  .position-stat.is-open #healthTooltip { position: static; margin-top: 8px; box-shadow: none; }
  .position-ltv-scale { flex-wrap: wrap; row-gap: 4px; }
}

/* ==========================================================================
   Wallet control hugs the top-right corner of the app panel rather than
   sitting at the centred content column's edge. Must stay last.
   ========================================================================== */

@media (min-width: 761px) {
  .topbar {
    max-width: none;
    margin: -10px -16px 18px 0;   /* cancel most of the panel's padding */
    width: auto;
  }
}

/* ==========================================================================
   Wallet control is pinned to the window's top-right corner, mirroring the
   sidebar's inset on the left. Offsets are the shell inset plus the distance
   the bar sits inside the panel's own edge, so it tracks --rail-gap instead of
   drifting when the frame tightens. Stays put while the page scrolls.
   Must remain last.
   ========================================================================== */

@media (min-width: 761px) {
  .topbar {
    position: fixed;
    top: calc(var(--rail-gap) + 12px);
    right: calc(var(--rail-gap) + 12px);
    left: auto;
    bottom: auto;
    z-index: 46;
    width: auto;
    max-width: none;
    min-height: 0;
    margin: 0;
    justify-content: flex-end;
  }
  /* Reserve the space the fixed bar no longer occupies in flow. */
  .main { padding-top: 84px; }
  /* Menu still opens downward, anchored to the card. */
  .topbar .account-menu { top: calc(100% + 8px); bottom: auto; }
}

/* ==========================================================================
   Borrow — bring the new ledger in line with the rest of the app:
   matching heading scale, sans column headers, denser rows, and a clearer
   selected state. Appended last so it settles the earlier passes.
   ========================================================================== */

/* Heading was 58px while every other page tops out near 38px. */
[data-page="borrow"] .borrow-head h1 {
  font-family: var(--display);
  font-size: clamp(30px, 2.8vw, 38px);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.05;
}
[data-page="borrow"] .borrow-head > div > p:last-child { max-width: 62ch; font-size: 14.5px; }

/* Column headers: sans, like the vaults ledger, on a tinted band. */
[data-page="borrow"] .borrow-ledger-head {
  height: 38px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-3);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Denser rows: 78px was a lot of air for one line of content. */
[data-page="borrow"] .borrow-market-row {
  min-height: 62px;
  padding: 0 22px;
  border-left: 2px solid transparent;
  transition: background-color .16s ease, border-color .16s ease;
}
[data-page="borrow"] .borrow-market-row .market-icon,
[data-page="borrow"] .borrow-market-row .market-icon-lg { width: 32px; height: 32px; }
[data-page="borrow"] .borrow-market-name { gap: 11px; }
[data-page="borrow"] .borrow-market-name strong { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
[data-page="borrow"] .borrow-market-name small { color: var(--faint); font-family: var(--mono); font-size: 10.5px; }
[data-page="borrow"] .borrow-market-balance strong { font-family: var(--mono); font-size: 12.5px; font-weight: 500; }
[data-page="borrow"] .borrow-market-balance small { color: var(--faint); font-family: var(--mono); font-size: 10.5px; }
[data-page="borrow"] .borrow-market-ltv,
[data-page="borrow"] .borrow-market-power { font-family: var(--mono); font-size: 12.5px; font-weight: 500; }

/* Selection is carried by the wash alone; the left rail was reading as a tag
   stuck to the row. */
[data-page="borrow"] .borrow-market-row.is-selected {
  border-left-color: transparent;
  background: var(--row-selected);
}
[data-page="borrow"] .borrow-market-row:hover:not(.is-selected) { background: var(--sunk); }

[data-page="borrow"] .borrow-radio {
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  transition: border-color .16s ease;
}
[data-page="borrow"] .borrow-radio i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: transparent;
  transition: background-color .16s ease;
}
[data-page="borrow"] .borrow-market-row.is-selected .borrow-radio { border-color: var(--orange); }
[data-page="borrow"] .borrow-market-row.is-selected .borrow-radio i { background: var(--orange); }

/* Toolbar sits tighter to the ledger. */
[data-page="borrow"] .borrow-toolbar { margin-bottom: 12px; }
[data-page="borrow"] .borrow-search { height: 40px; border-radius: 10px; }
[data-page="borrow"] .borrow-search input { font-size: 14px; }

/* Primary action matches the app's button scale. */
[data-page="borrow"] .borrow-continue {
  height: 46px;
  margin-top: 16px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.01em;
}

@media (max-width: 900px) {
  [data-page="borrow"] .borrow-market-row { min-height: 58px; padding: 0 14px; }
  [data-page="borrow"] .borrow-ledger-head { padding-inline: 14px; }
}

@media (min-width: 901px) {
  /* `min-height` on the base rules was outranking the heights set above. */
  [data-page="borrow"] .borrow-ledger-head { min-height: 38px; }
  [data-page="borrow"] .borrow-continue { min-height: 46px; }
}

/* The risk readout used to be patched here, one override per element, because
   the dialog's own rules were written at a different scale to the app's. The
   strip now carries a single scale of its own (.position-stat-*), so these
   page-scoped overrides only outranked it and are gone. */

/* ==========================================================================
   Borrow view was a grid with place-items:center, which shrink-wrapped and
   centred every child — the toolbar could not spread its tabs and search to
   opposite ends. Let the children fill the column instead.
   ========================================================================== */

/* No `display` here — that would beat .view { display: none } and leave the
   borrow view rendered on every page. Display is set on .is-active only. */
[data-page="borrow"] {
  align-items: initial;
  justify-items: initial;
  place-items: initial;
  max-width: 1080px;
  margin-inline: auto;
}

/* Tabs left, search right, sitting directly above the ledger. */
[data-page="borrow"] .borrow-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0 0 12px;
}
[data-page="borrow"] .borrow-tabs { flex: none; margin-right: auto; }
[data-page="borrow"] .borrow-search { flex: none; width: min(300px, 46%); margin-left: auto; }
[data-page="borrow"] .borrow-ledger,
[data-page="borrow"] .borrow-continue { width: 100%; }

@media (max-width: 900px) {
  /* Toolbar stacks here, so the search should fill rather than sit half-width. */
  [data-page="borrow"] .borrow-search { width: 100%; margin-left: 0; }
  [data-page="borrow"] .borrow-tabs { width: 100%; margin-right: 0; }
  [data-page="borrow"] .borrow-tabs button { flex: 1; }
}

/* ==========================================================================
   Kill the leftover full-height centred grid from the old swap layout. It
   forced min-height: calc(100vh - 136px) and stretched the three rows, which
   is what pushed the toolbar ~190px above the table.
   Needs `.is-active` to match the specificity of the rule it replaces.
   ========================================================================== */

[data-page="borrow"].is-active {
  display: block;
  min-height: 0;
  place-items: initial;
  align-content: start;
}

/* Toolbar sits directly on top of the ledger. */
[data-page="borrow"] .borrow-toolbar { margin: 0 0 10px; }

/* Action is a normal button, not a full-width slab. */
[data-page="borrow"] .borrow-continue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-width: 172px;
  height: 40px;
  min-height: 40px;
  margin: 14px 0 0 auto;   /* sits at the right, under the ledger */
  padding: 0 22px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
}

@media (max-width: 900px) {
  [data-page="borrow"] .borrow-continue { width: 100%; margin-left: 0; }
}

/* `margin-left: auto` only shifts block-level boxes, so the inline-flex button
   was still sitting on the left. */
[data-page="borrow"] .borrow-continue { display: flex; width: fit-content; }

@media (max-width: 900px) {
  [data-page="borrow"] .borrow-continue { width: 100%; }
}

/* ==========================================================================
   Borrow: centre the block vertically, and tidy the select radio.
   ========================================================================== */

[data-page="borrow"].is-active {
  display: grid;
  align-content: center;      /* vertical centring… */
  justify-items: stretch;     /* …without shrink-wrapping the children */
  min-height: calc(100vh - 190px);
}

/* Radio: the dot changed size between states, so it jumped on select.
   Fixed 7px dot with a consistent ring and a little breathing room. */
[data-page="borrow"] .borrow-radio {
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: transparent;
  transition: border-color .16s ease, background-color .16s ease;
}
[data-page="borrow"] .borrow-radio i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: transparent;
  transform: scale(.4);
  transition: background-color .16s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
}
[data-page="borrow"] .borrow-market-row:hover:not(.is-selected) .borrow-radio { border-color: var(--line-strong); }
[data-page="borrow"] .borrow-market-row.is-selected .borrow-radio { border-color: var(--orange); }
[data-page="borrow"] .borrow-market-row.is-selected .borrow-radio i {
  background: var(--orange);
  transform: scale(1);
}

@media (max-width: 900px) {
  [data-page="borrow"].is-active { min-height: 0; align-content: start; }
}

/* Base rule sets a 9px dot on the selected state only, so the dot changed size
   between states. Pin both to the same size and let scale do the motion. */
[data-page="borrow"] .borrow-market-row.is-selected .borrow-radio i {
  width: 7px;
  height: 7px;
}

/* ==========================================================================
   Radio sat left inside its 28px grid column (justify-self defaulted to
   auto), which read as off-centre. Centre it in its own cell.
   ========================================================================== */

[data-page="borrow"] .borrow-radio {
  justify-self: center;
  align-self: center;
  border-width: 1.5px;
  line-height: 0;
}

/* ==========================================================================
   Vaults centred vertically, same treatment as Borrow.
   `display` is set on .is-active only — putting it on the bare attribute
   selector would beat .view { display: none } and leak the view everywhere.
   ========================================================================== */

@media (min-width: 901px) {
  [data-page="vaults"].is-active {
    display: grid;
    align-content: center;
    justify-items: stretch;
    min-height: calc(100vh - 190px);
  }
}

/* ==========================================================================
   Radio: the dot was a child element inside a ring sitting at a fractional x
   (the row's fr columns resolve to 361.734px etc.), so the 1px border and the
   4.5px gaps rounded unevenly and it read as off-centre.
   Painting the dot as a radial-gradient on the ring itself makes it centred
   by construction — the gradient is relative to the element's own box, so no
   child layout rounding is involved. Even geometry throughout: 20px ring,
   2px border, 8px dot -> exactly 4px of ring on every side.
   ========================================================================== */

[data-page="borrow"] .borrow-radio {
  justify-self: center;
  align-self: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background-color: transparent;
  background-image: radial-gradient(circle at 50% 50%, var(--orange) 0 4px, transparent 4.5px);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 0% 0%;
  transition: border-color .16s ease, background-size .18s cubic-bezier(.34, 1.56, .64, 1);
}
/* The child dot is no longer used for the mark. */
[data-page="borrow"] .borrow-radio i { display: none; }

[data-page="borrow"] .borrow-market-row:hover:not(.is-selected) .borrow-radio { border-color: var(--line-strong); }
[data-page="borrow"] .borrow-market-row.is-selected .borrow-radio {
  border-color: var(--orange);
  background-size: 100% 100%;
}

/* =====================================================================
   Local virtualized-stock deposits
   ===================================================================== */

.deposit-token-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
  padding: 11px 12px;
  border-radius: 14px;
  background: var(--sunk);
}
.deposit-token-summary > span:not(.market-icon) { display: grid; gap: 2px; }
.deposit-token-summary small { color: var(--muted); font-size: 10px; }
.deposit-current { justify-items: end; text-align: right; }
.deposit-current strong { font-size: 12px; }
.deposit-asset-select {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-height: 56px;
  margin-bottom: 8px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--sunk);
}
.deposit-asset-select:focus-within {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(207, 111, 85, .12);
}
.deposit-asset-select select {
  width: 100%;
  min-width: 0;
  padding: 8px 34px 8px 2px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 600 14px/1.2 var(--sans);
  cursor: pointer;
}
.deposit-asset-select select:disabled { color: var(--muted); cursor: not-allowed; }
.deposit-disclaimer {
  margin-top: 8px;
  color: var(--faint);
  font-size: 9.5px;
  line-height: 1.45;
  text-align: center;
}

.borrow-holdings {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 28px;
  width: 100%;
  margin-bottom: 18px;
  padding: 18px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--glass), var(--wash-orange));
}
.borrow-holdings-label {
  color: var(--orange-deep);
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.borrow-holdings-copy h1 {
  margin-top: 4px;
  font-family: var(--display);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -.045em;
}
.borrow-holdings-copy p { max-width: 570px; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.borrow-holdings-summary { display: flex; align-items: center; gap: 22px; }
.borrow-holdings-summary > span { display: grid; gap: 3px; min-width: 80px; }
.borrow-holdings-summary small { color: var(--faint); font-size: 9px; }
.borrow-holdings-summary strong { font-size: 14px; }
.borrow-holdings-list { grid-column: 1 / -1; display: flex; gap: 8px; overflow-x: auto; padding-top: 13px; border-top: 1px solid var(--line-soft); }
.borrow-holdings-empty { color: var(--faint); font-size: 10.5px; }
.borrow-holding {
  display: grid;
  grid-template-columns: auto minmax(72px, auto) auto;
  align-items: center;
  gap: 9px;
  min-width: 245px;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--glass);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.borrow-holding:hover { border-color: var(--orange-line); background: var(--paper); }
.borrow-holding > span:not(.market-icon) { display: grid; gap: 1px; }
.borrow-holding small { color: var(--muted); font-size: 9px; }
.borrow-holding-amount { justify-items: end; margin-left: auto; text-align: right; }
.borrow-holding-amount strong { font-size: 10px; }

@media (max-width: 820px) {
  .borrow-holdings { grid-template-columns: 1fr; }
  .borrow-holdings-summary { justify-content: space-between; flex-wrap: wrap; }
  .borrow-holdings-list { grid-column: 1; }
}

@media (max-width: 520px) {
  .borrow-holdings { padding: 15px; }
  .borrow-holdings-summary { gap: 14px; }
  .borrow-holdings-summary .btn { width: 100%; }
  .deposit-token-summary { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ==========================================================================
   Dashboard centred vertically, matching Borrow and Vaults. Both states —
   the connect prompt and the connected account view — use the same centring
   so switching between them does not shift the layout.
   `display` on .is-active only; on the bare selector it would beat
   .view { display: none } and leak the view onto every page.
   ========================================================================== */

@media (min-width: 901px) {
  [data-page="dashboard"].is-active {
    display: grid;
    justify-items: stretch;
    min-height: calc(100vh - 190px);
    align-content: center;
    /* Falls back to start when the content is taller than the viewport, so a
       long connected dashboard never gets its top clipped. */
    align-content: safe center;
  }
  /* The wrapper no longer needs its own full-height centring. */
  .dash-connect { min-height: 0; padding: 0; }
}

/* ==========================================================================
   Page title + info tooltip (all views)
   ========================================================================== */

.page-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.page-title-main { position: relative; display: flex; align-items: center; gap: 9px; }
.page-title h1 {
  font-family: var(--display);
  font-size: clamp(28px, 2.6vw, 34px);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.05;
}
.page-title > div > p { margin-top: 8px; color: var(--muted); font-size: 14px; }

.info-tip {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.info-tip:hover, .info-tip[aria-expanded="true"] { background: var(--sunk); color: var(--orange-deep); }
.info-tip .icon { width: 16px; height: 16px; }

.info-pop {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 40;
  width: min(380px, calc(100vw - 60px));
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--paper);
  box-shadow: var(--shadow-pill);
}
.info-pop strong {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.info-pop p { color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.info-pop p + p { margin-top: 8px; }
.info-pop b { color: var(--ink); font-weight: 600; }
.info-pop-note {
  margin-top: 10px !important;
  padding-top: 9px;
  border-top: 1px solid var(--line-soft);
  color: var(--faint) !important;
  font-family: var(--mono);
  font-size: 10.5px !important;
}

/* ==========================================================================
   Stats
   ========================================================================== */

[data-page="stats"] .stats-stamp {
  flex: none;
  display: grid;
  justify-items: end;
  gap: 3px;
  text-align: right;
}
[data-page="stats"] .stats-stamp span { color: var(--faint); font-size: 11.5px; }
[data-page="stats"] .stats-stamp strong { font-size: 12.5px; font-weight: 600; }

/* --------------------------------------------------------------- KPIs ----- */

.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
/* The headline figures read as blocks recessed into the panel rather than
   cards raised off it. --sunk is the token for exactly that role: deeper than
   the card fill in light, and a lighter neutral grey than it in dark, so the
   tiles sit visibly off both the panel behind them and the chart card beside
   them in either theme. The page fill is not usable here — in light it is too
   close to the panel and the tiles disappear into it. */
.kpi {
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--paper);
}
.kpi-label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
}
/* Filled tile rather than an outlined one — the old #e8c4b5 hairline was a
   tint used nowhere else and read as an unfinished outline at this size. */
.kpi-icon {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  flex: none;
  border-radius: 9px;
  background: var(--orange-soft);
  color: var(--orange-deep);
}
.kpi-icon .icon { width: 15px; height: 15px; }
.kpi-value {
  margin-top: 12px;
  font-family: var(--display);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1;
}
.kpi-sub { margin-top: 7px; color: var(--muted); font-size: 12.5px; }

/* -------------------------------------------------------------- Chart ----- */

.chart-card {
  margin-top: 14px;
  padding: 20px 22px 12px;
  border-radius: 8px;
  background: var(--paper);
}
.chart-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}
.chart-card-head h2 { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.chart-legend { display: flex; gap: 18px; margin-top: 8px; color: var(--muted); font-size: 12px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.line-key { width: 18px; height: 2px; border-radius: 2px; background: var(--orange); }
.line-key.is-dotted {
  height: 0;
  border-top: 2px dotted var(--orange);
  background: none;
}

.range-picker {
  display: inline-flex;
  flex: none;
  padding: 3px;
  border-radius: 9px;
  background: var(--sunk);
}
.range-picker button {
  min-width: 42px;
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.range-picker button:hover { color: var(--ink); }
.range-picker button.is-active {
  background: var(--raised);
  color: var(--ink);
}

.chart-plot { position: relative; width: 100%; }
.chart-plot svg { display: block; width: 100%; height: 260px; }
.axis-y, .axis-x { fill: var(--faint); font-family: var(--mono); font-size: 10px; }
.chart-hover[hidden] { display: none; }
.chart-hover { position: absolute; inset: 0; pointer-events: none; }
.chart-crosshair {
  position: absolute;
  top: 12px;
  bottom: 30px;
  width: 1px;
  background: rgba(169, 76, 56, .32);
  transform: translateX(-.5px);
}
.chart-point {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 1px var(--orange);
  transform: translate(-50%, -50%);
}
.chart-point-debt { background: var(--orange-deep); box-shadow: 0 0 0 1px var(--orange-deep); }
.chart-tooltip {
  position: absolute;
  z-index: 2;
  width: 174px;
  padding: 11px 12px;
  border-radius: 11px;
  background: var(--sunk);
  box-shadow: var(--shadow-pill);
  backdrop-filter: blur(10px);
}
.chart-tooltip time {
  display: block;
  margin-bottom: 8px;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 9.5px;
}
.chart-tooltip span {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
}
.chart-tooltip span + span { margin-top: 6px; }
.chart-tooltip strong { color: var(--ink); font-size: 11px; font-weight: 600; }
.chart-tooltip .line-key { display: block; }

/* --------------------------------------------------------- Three panels --- */

.stats-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.panel-card {
  display: flex;
  flex-direction: column;
  padding: 20px 22px;
  border-radius: 8px;
  background: var(--paper);
}
.panel-card h2 { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.panel-sub { margin-top: 3px; color: var(--faint); font-size: 12px; }

.donut-wrap { display: flex; align-items: center; gap: 18px; margin-top: 16px; }
.donut { flex: none; width: 118px; height: 118px; }
.donut svg { display: block; width: 100%; height: 100%; }
.donut-legend { flex: 1; margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; min-width: 0; }
.donut-legend li {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
}
.donut-legend i { width: 8px; height: 8px; border-radius: 50%; }
.donut-legend span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-legend strong { font-family: var(--mono); font-size: 11px; font-weight: 500; }

.panel-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 12.5px;
}
.panel-total strong { color: var(--ink); font-family: var(--mono); font-size: 12.5px; font-weight: 500; }

.panel-hero {
  margin-top: 14px;
  font-family: var(--display);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: 1;
}
.panel-meter {
  height: 7px;
  margin-top: 12px;
  border-radius: 999px;
  background: var(--sunk);
  overflow: hidden;
}
.panel-meter i { display: block; height: 100%; border-radius: 999px; background: var(--orange); }

.panel-rows { margin: 16px 0 0; }
.panel-rows div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
}
.panel-rows.is-tall div { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.panel-rows.is-tall div:last-child { border-bottom: 0; }
.panel-rows dt { color: var(--muted); font-size: 12.5px; }
.panel-rows dd { margin: 0; font-family: var(--mono); font-size: 12px; font-weight: 500; }

.panel-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding: 14px 0 0;
  border: 0;
  background: none;
  color: var(--orange-deep);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: gap .16s ease;
}
.panel-link:hover { gap: 11px; }
.panel-link .icon { width: 13px; height: 13px; }

/* --------------------------------------------------------- Responsive ----- */

@media (max-width: 1180px) {
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-trio { grid-template-columns: 1fr; }
  .donut-wrap { gap: 24px; }
}

@media (max-width: 760px) {
  .page-title { flex-direction: column; gap: 10px; }
  .info-pop { width: calc(100vw - 48px); }
  .kpi-row { grid-template-columns: 1fr; }
  .chart-card-head { flex-direction: column; }
  .range-picker { width: 100%; justify-content: space-between; }
  .range-picker button { flex: 1; min-width: 0; }
  .chart-plot svg { height: 210px; }
}

/* ==========================================================================
   Vaults: protocol totals now sit under the ledger as a summary strip —
   three cells in one bordered band rather than three floating cards.
   ========================================================================== */

[data-page="vaults"] .vault-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
  border-radius: 16px;
  background: var(--paper);
  overflow: hidden;
}
[data-page="vaults"] .vault-sum { padding: 18px 22px; }
[data-page="vaults"] .vault-sum + .vault-sum { border-left: 1px solid var(--line); }
[data-page="vaults"] .vault-sum-label {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
}
[data-page="vaults"] .vault-sum-value {
  margin-top: 10px;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1;
}
[data-page="vaults"] .vault-sum-sub { margin-top: 7px; color: var(--muted); font-size: 12.5px; }
[data-page="vaults"] .vault-sum-meter {
  height: 5px;
  margin-top: 11px;
  border-radius: 999px;
  background: var(--sunk);
  overflow: hidden;
}
[data-page="vaults"] .vault-sum-meter i { display: block; height: 100%; border-radius: 999px; background: var(--orange); }

/* ==========================================================================
   Dashboard: the connect screen is its own moment — no page header above it.
   ========================================================================== */

[data-page="dashboard"].is-connected .page-title { display: flex; }
[data-page="dashboard"]:not(.is-connected) .page-title { display: none; }

/* Stats header now matches the other pages (no stamp pulling it wide). */
[data-page="stats"] .page-title { display: block; }

/* ========================================================================== 
   Leaderboard — the reference's dense ranked ledger in Root's light system.
   ========================================================================== */

[data-page="leaderboard"] { max-width: 1180px; }
.leaderboard-title { display: block; margin-bottom: 26px; }
.leaderboard-title p { margin-top: 8px; color: var(--muted); font-size: 14px; }

/* A panel like every other panel: it had no fill at all and sat naked on the
   page. */
.leaderboard-panel {
  border-radius: 8px;
  background: var(--paper);
  overflow: hidden;
}
.leaderboard-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  justify-content: space-between;
  min-height: 0;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}
.leaderboard-toolbar h2 {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.025em;
}
.leaderboard-toolbar > div:first-child > span {
  display: block;
  margin-top: 3px;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.leaderboard-scroll { max-height: min(650px, calc(100vh - 276px)); overflow: auto; }
.leaderboard-scroll:focus-visible { outline-offset: -3px; }
.leaderboard-table { width: 100%; min-width: 720px; border-collapse: collapse; table-layout: fixed; }
.leaderboard-table th,
.leaderboard-table td { height: 40px; padding: 0 18px; border-bottom: 1px solid var(--line-soft); text-align: left; }
.leaderboard-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 32px;
  background: var(--paper-3);
  color: var(--faint);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.leaderboard-table th:first-child,
.leaderboard-table td:first-child { width: 72px; }
.leaderboard-table th:nth-child(2),
.leaderboard-table td:nth-child(2) { width: 38%; }
.leaderboard-table th:nth-child(5),
.leaderboard-table td:nth-child(5) { width: 90px; }
.leaderboard-table .ta-r { text-align: right; }
.leaderboard-table tbody tr { transition: background-color .14s ease; }
.leaderboard-table tbody tr:hover { background: var(--orange-soft); }
.leaderboard-table code { color: var(--ink); font-family: var(--mono); font-size: 11.5px; }
.leaderboard-table td { color: var(--ink); font-size: 12.5px; }
.leaderboard-table td strong { color: var(--ink); font-weight: 600; }
.leaderboard-rank {
  display: inline-block;
  min-width: 20px;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.leaderboard-rank.is-podium { color: var(--orange-deep); font-weight: 650; }

.leaderboard-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 40px;
  padding: 8px 18px;
  color: var(--faint);
  font-size: 11.5px;
}
@media (max-width: 760px) {
  .leaderboard-title { margin-bottom: 18px; }
  .leaderboard-toolbar { align-items: flex-start; flex-direction: column; gap: 14px; padding: 17px 16px; }
  .leaderboard-scroll { max-height: none; }
  .leaderboard-table th, .leaderboard-table td { padding-inline: 14px; }
  .leaderboard-footer { padding-inline: 14px; }
}

@media (max-width: 900px) {
  [data-page="vaults"] .vault-summary { grid-template-columns: 1fr; }
  [data-page="vaults"] .vault-sum + .vault-sum { border-left: 0; border-top: 1px solid var(--line); }
}

/* ==========================================================================
   Markets — one bordered list of dense rows. Follows a collateral-list
   density (72px rows, hairline dividers, container owns the radius) rather
   than a grid of cards.
   ========================================================================== */

.markets-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 16px;
  border-radius: 16px;
  background: var(--paper);
  overflow: hidden;
}
.markets-strip > div { padding: 16px 20px; }
.markets-strip > div + div { border-left: 1px solid var(--line); }
.markets-strip span {
  display: block;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.markets-strip strong {
  display: block;
  margin-top: 9px;
  font-family: var(--display);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1;
}

.market-list {
  border-radius: 16px;
  background: var(--paper);
  overflow: hidden;
}

/* One grid template shared by the header and every row so the columns line up. */
.market-list-head,
.market-row {
  display: grid;
  grid-template-columns:
    minmax(0, 1.5fr) minmax(92px, .95fr) 96px minmax(0, 1.25fr)
    minmax(62px, .55fr) minmax(72px, .6fr) minmax(72px, .6fr) 28px;
  align-items: center;
  gap: 18px;
}

.market-list-head {
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-3);
}
.market-list-head span {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.market-list-head .ta-r { text-align: right; }
.market-list-head .ta-c { text-align: center; }

.market-row {
  width: 100%;
  padding: 14px 20px;
  border: 0;
  border-top: 1px solid var(--line-soft);
  background: transparent;
  color: inherit;
  font-family: var(--sans);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: background-color .14s ease;
}
.market-row:first-child { border-top: 0; }
.market-row:hover { background: var(--sunk); }
.market-row:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }

.market-row-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.market-row-id > span { display: grid; gap: 1px; min-width: 0; }
.market-row-id strong {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.015em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.market-row-id small { color: var(--faint); font-family: var(--mono); font-size: 10.5px; }

.market-row-price { display: grid; gap: 2px; justify-items: end; }
.market-row-price strong { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.market-row-price small { font-family: var(--mono); font-size: 10.5px; font-weight: 500; }

.market-row-spark { display: block; height: 28px; }
.market-row-spark svg { display: block; width: 100%; height: 100%; }
.market-row-spark path { stroke: var(--spark); transition: stroke .14s ease; }
.market-row:hover .market-row-spark path { stroke: var(--orange); }

.market-row-share { display: grid; gap: 7px; min-width: 0; }
.market-row-bar {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: var(--sunk);
  overflow: hidden;
}
.market-row-bar i { display: block; height: 100%; border-radius: 999px; background: var(--orange); }
.market-row-share small { color: var(--muted); font-family: var(--mono); font-size: 10.5px; }

.market-row > .num { font-family: var(--mono); font-size: 12.5px; font-weight: 500; }
.market-row .ta-r { text-align: right; }
.market-row-apr { color: var(--orange-deep); }

.market-row-go {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  color: var(--faint);
  transition: background-color .14s ease, color .14s ease;
}
.market-row-go .icon { width: 14px; height: 14px; }
.market-row:hover .market-row-go { background: var(--orange-soft); color: var(--orange-deep); }

/* --------------------------------------------------------- Responsive ----- */

@media (max-width: 1240px) {
  .market-list-head,
  .market-row {
    grid-template-columns:
      minmax(0, 1.5fr) minmax(92px, 1fr) minmax(0, 1.2fr)
      minmax(62px, .6fr) minmax(72px, .6fr) 28px;
    gap: 16px;
  }
  /* Drop the sparkline (3rd cell) and liquidation LTV (6th cell) so the row
     keeps exactly six children for the six-column template above. */
  .market-list-head > :nth-child(3),
  .market-row > :nth-child(3),
  .market-list-head > :nth-child(6),
  .market-row > :nth-child(6) { display: none; }
}

@media (max-width: 900px) {
  .markets-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .markets-strip > div:nth-child(3) { border-left: 0; }
  .markets-strip > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .market-list-head { display: none; }
  .market-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 14px;
    padding: 16px 18px;
  }
  .market-row-share { grid-column: 1 / -1; }
  .market-row-spark,
  .market-row > .num,
  .market-row-go { display: none; }
  .market-row-apr {
    display: block !important;
    grid-column: 1 / -1;
    text-align: left;
  }
  .market-row-apr::before { content: 'Borrow APR '; color: var(--muted); font-family: var(--sans); }
}

/* Right-hand axis carries the debt line's own scale. Tinted so it reads as
   belonging to the dotted series rather than to the gridlines. */
.axis-y-right { fill: var(--orange-deep); opacity: .75; }
.chart-legend small {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Use the landing hero's exact editorial face for app headings too. */
body #mainContent h1,
body #mainContent h2,
body #mainContent h3,
body .deposit-dialog h2,
body .position-dialog h2 {
  font-family: "Manrope", "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -.06em;
  line-height: 1.03;
}

/* Leaderboard period tabs reuse the chart's segmented control. */
.leaderboard-periods { margin-left: auto; }
@media (max-width: 760px) {
  .leaderboard-periods { margin-left: 0; width: 100%; }
  .leaderboard-periods button { flex: 1; }
}


/* ==========================================================================
   Dashboard account summary (connected)

   The four figures an account is judged on, joined into one strip so they read
   as a single statement rather than four unrelated tiles. Collateral and debt
   live here instead of in the vault card's header, so the same two numbers are
   not printed twice on one screen.
   ========================================================================== */

.account-panel-figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  border-radius: 8px;
  background: var(--paper);
}
.account-figure { padding: 17px 22px; }
.account-figure + .account-figure { border-left: 1px solid var(--line); }
.account-figure .stat-value { font-size: 25px; }
/* Health borrows the tone the position rows already use. */
.account-figure .stat-value.is-safe { color: var(--safe-text); }
.account-figure .stat-value.is-warn { color: var(--orange-deep); }
.account-figure .stat-value.is-risk { color: var(--risk); }



/* ==========================================================================
   Season page

   Standing is one joined strip, the same idiom the Risk page opens with, so
   it reads as a single account statement. The protocol figures below it are
   separate tiles because each is independently true.
   ========================================================================== */

/* "Your standing" is a panel, not glass: --glass-soft painted it near-white
   in light. It takes the card fill the rest of the page uses. */
.season-standing {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  border-radius: 8px;
  background: var(--paper);
}
.season-standing-figure { min-height: 118px; padding: 18px 20px; }
.season-standing-figure + .season-standing-figure { border-left: 1px solid var(--line); }
.season-standing-figure:first-child { background: linear-gradient(145deg, var(--wash-orange), var(--paper) 74%); }
.season-standing-figure .stat-value { font-size: 28px; }
.season-standing-note {
  margin-top: 12px;
  max-width: 74ch;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

/* The snapshot clock is the one figure that moves on its own, so it gets the
   mono face at a size that will not reflow as the digits change. */
.season-countdown-tile .stat-value { font-variant-numeric: tabular-nums; }

.season-params { margin-top: 14px; }

/* -- how points are earned ------------------------------------------------- */

/* The multiplier is what the reader came for, so it is set at display scale
   and given its own column; the title, the rate it works out to and the
   qualifying balance all hang off it. Same card weight as the Risk page's
   principles, same figure treatment as the Stats KPIs. */
.earn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.earn-card {
  display: flex;
  flex-direction: column;
  padding: 20px 22px;
  border-radius: 8px;
  background: var(--paper);
}
.earn-card-head { display: flex; align-items: center; gap: 16px; }
.earn-mult {
  display: flex;
  align-items: baseline;
  flex: none;
  min-width: 74px;
  color: var(--orange-deep);
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: 1;
}
.earn-mult span { font-size: 44px; font-feature-settings: "tnum" 1; }
/* The base rate is the one multiplier worth naming as such, since every other
   figure on the page is a multiple of it. */
.earn-mult small {
  align-self: center;
  margin-left: 7px;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.earn-card-title h3 { font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.earn-rate { margin-top: 4px; color: var(--muted); font-size: 12px; }
.earn-note {
  margin: 14px 0 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.earn-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  /* Feet line up across the row even when the notes are different lengths. */
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid var(--line-soft);
}
.earn-assets { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.earn-balance { display: grid; justify-items: end; gap: 1px; text-align: right; }
.earn-balance small { color: var(--faint); font-size: 11px; }
.earn-balance strong { font-size: 14px; font-weight: 600; }

.block-note { color: var(--faint); font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; }

@media (max-width: 1120px) {
  .season-standing { grid-template-columns: repeat(2, 1fr); }
  .season-standing-figure:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .season-standing-figure:nth-child(odd) { border-left: 0; }
  .account-panel-figures { grid-template-columns: repeat(2, 1fr); }
  .account-figure:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .account-figure:nth-child(odd) { border-left: 0; }
}

@media (max-width: 760px) {
  .account-figure { padding: 15px 18px; }
  .next-action { padding: 14px 16px; }
  .season-standing-figure { min-height: 0; padding: 15px 16px; }
  .earn-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .earn-card { padding: 17px 18px; }
  .earn-mult { min-width: 62px; font-size: 17px; }
  .earn-mult span { font-size: 37px; }
  /* The seven marks wrap to two lines in a narrow card and push the balance
     out of line, so the foot stacks instead. */
  .earn-card-foot { align-items: flex-start; flex-direction: column; gap: 10px; }
  .earn-balance { justify-items: start; text-align: left; }
}


/* ==========================================================================
   Risk page — column alignment

   The posture row and the principles row sit directly above one another and
   read as one table, so their dividers have to line up. They had drifted
   apart: 1.25fr vs 1.35fr for the first column (dividers 17px and 8px out),
   and between 761-1120px the posture row went to two columns while the
   principles stacked to one. Both now share a single template at every width.
   ========================================================================== */

.risk-overview,
.risk-principles { grid-template-columns: 1.25fr 1fr 1fr; }

@media (max-width: 1120px) {
  .risk-overview,
  .risk-principles { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Dark theme. Every rule in this stylesheet already draws from the tokens
   above, so the theme is entirely a matter of redefining them here. The
   attribute is set on <html> by an inline script before first paint.
   ========================================================================== */

:root[data-theme="dark"] {
  /* Zinc: a true neutral ramp. The light theme is warm paper, but a warm dark
     reads as brown, so dark goes fully neutral and the orange carries the
     brand on its own. Three distinct layers — page, panel, card — so surfaces
     separate by fill rather than relying on borders alone. */
  --cream:      #18181b;
  --shell:      #18181b;
  --paper:      #27272a;
  --paper-2:    #1f1f23;
  /* Mirrors light: the half-step between --paper and --sunk, so a table
     header band separates from the card it sits in. It used to equal --paper
     and painted nothing. */
  --paper-3:    #2a2a2e;
  --sunk:       #2e2e33;
  --line:       #3f3f46;
  --line-soft:  #303035;
  --line-strong:#52525b;

  --ink:        #fafafa;
  --ink-2:      #ffffff;
  --muted:      #a1a1aa;
  --muted-2:    #d4d4d8;
  --faint:      #71717a;
  --placeholder:#52525b;

  --orange:      #e0805f;
  --orange-deep: #f0a184;
  /* Mirrors light: a warm interaction surface a visible step forward of
     --paper. #2b2321 was fractionally DARKER than --paper, so a hovered row
     barely moved. */
  --orange-soft: #3a2b22;
  --orange-tint: #352925;
  --orange-line: #4d3a30;
  --orange-mid:  #a9654d;
  --orange-pale: #7c4835;
  --orange-hi:   #e8946f;
  --orange-lo:   #c05f42;
  --orange-warn: #3a2a22;

  --risk:        #ef7059;
  --risk-tint:   #36211d;
  --risk-stroke: #ef7059;
  --safe:        #93b57f;
  --safe-tint:   #212a20;
  --safe-line:   #3c4a33;
  --safe-text:   #aecb99;
  --safe-stroke: #93b57f;

  --panel:      #09090b;
  --panel-line: #27272a;
  --panel-text: #a1a1aa;

  --track:       #3f3f46;
  --quiet-hover: #38383e;
  --skeleton-a:  #27272a;
  --skeleton-b:  #34343a;
  --spark:       #71717a;

  /* Lighter than --sunk (#2e2e33), where --paper (#27272a) is darker and
     inverted the lift. */
  --raised:         #3a3a41;
  /* A selected row has to out-step its own hover (--orange-soft); #33251f was
     the same lightness as --paper and read as no selection at all. */
  --row-selected:   #452f24;
  --backdrop:       rgba(9, 9, 11, .8);
  --backdrop-soft:  rgba(9, 9, 11, .72);
  --modal-shadow:   rgba(0, 0, 0, .64);
  --modal-shadow-2: rgba(0, 0, 0, .5);

  --wash-safe:   rgba(147, 181, 127, .11);
  --wash-orange: rgba(224, 128, 95, .11);
  --wash-paper:  rgba(255, 255, 255, .04);
  --wash-pale:   rgba(224, 128, 95, .26);

  --glass-strong: rgba(255, 255, 255, .09);
  --glass:        rgba(255, 255, 255, .06);
  --glass-soft:   rgba(255, 255, 255, .035);

  --shadow-pill: 0 22px 55px -22px rgba(0, 0, 0, .8);

  color-scheme: dark;
}

/* The sidebar normally shares the card fill; in dark it takes the panel layer
   instead so it reads as the same surface as the main area beside it. */
:root[data-theme="dark"] .sidebar { background: var(--paper-2); }

/* Stock marks are solid black artwork and vanish on a dark ground. Inverting
   only the mark keeps the real logo shape without shipping a second set. */
:root[data-theme="dark"] .market-icon img { filter: invert(1) hue-rotate(180deg); }
/* The USDG mark is already a full-colour token image, not black line art, so
   the inversion above would turn it inside out. Opt it back out. */
:root[data-theme="dark"] .position-mark-usdg img { filter: none; }

/* -- sidebar theme switch -------------------------------------------------- */

.theme-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.theme-toggle:hover { background: var(--sunk); color: var(--ink); }
.theme-toggle .icon { width: 16px; height: 16px; flex: none; }
.theme-toggle-label { flex: 1; min-width: 0; }
.theme-switch {
  position: relative;
  flex: none;
  width: 30px;
  height: 17px;
  border-radius: 9px;
  background: var(--line-strong);
  transition: background-color .18s ease;
}
.theme-switch i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: transform .18s ease;
}
.theme-toggle[aria-checked="true"] .theme-switch { background: var(--orange); }
.theme-toggle[aria-checked="true"] .theme-switch i { transform: translateX(13px); }

/* ==========================================================================
   Introduction modal — a three-step walkthrough shown once on a first visit.
   An inset hero carries a card per step; the copy and action sit centred
   beneath it.
   ========================================================================== */

.intro-modal[hidden] { display: none; }
.intro-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: 24px;
}
.intro-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--backdrop);
  backdrop-filter: blur(8px);
  cursor: default;
}
body.intro-open { overflow: hidden; }

.intro-dialog {
  position: relative;
  width: min(452px, 100%);
  max-height: calc(100vh - 48px);
  overflow: hidden auto;
  /* The hero is inset rather than full-bleed, so the dialog pads itself and
     the hero takes its own smaller radius inside. */
  padding: 7px;
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 30px 80px -30px var(--modal-shadow);
}

/* -- hero ------------------------------------------------------------------ */

.intro-hero {
  position: relative;
  display: grid;
  place-items: center;
  height: 186px;
  overflow: hidden;
  border-radius: 15px;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(255, 255, 255, .5) 0%, transparent 60%),
    linear-gradient(168deg, #fae1d3 0%, #f2b795 52%, #e59268 100%);
}

/* The card floats a little above the hero's lower edge, as in the reference. */
.intro-cards { position: relative; display: grid; align-self: end; width: 146px; margin-bottom: 15px; }
.intro-card {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  display: grid;
  padding: 11px 12px 10px;
  text-align: left;
  border: 1px solid rgba(38, 25, 18, .07);
  border-radius: 6px;
  background: #fff;
  color: #2a241f;
  box-shadow: 0 14px 30px -12px rgba(78, 44, 26, .34);
  transition: transform .4s cubic-bezier(.22, .9, .3, 1), opacity .28s ease;
}
/* Deck placement is purely a function of the distance from the active step, so
   advancing only re-labels the cards and the transition does the movement. */
.intro-card[data-pos="0"] { transform: none; opacity: 1; z-index: 3; }
.intro-card[data-pos="1"] { transform: translateY(-20px) scale(.92); opacity: .85; z-index: 2; }
.intro-card[data-pos="2"] { transform: translateY(-34px) scale(.85); opacity: .6; z-index: 1; }
/* Steps already passed drop forward and fade, so Back reverses it cleanly. */
.intro-card[data-pos="-1"],
.intro-card[data-pos="-2"] { transform: translateY(15px) scale(1.05); opacity: 0; z-index: 0; }
.intro-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(38, 25, 18, .08);
}
.intro-card-id { display: grid; min-width: 0; }
.intro-card-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 19px;
  height: 19px;
}
.intro-card-mark img { width: 100%; height: 100%; object-fit: contain; }
.intro-card strong { font-size: 12px; font-weight: 650; letter-spacing: -.01em; line-height: 1.25; }
.intro-card small { color: #9a8a83; font-size: 9px; line-height: 1.3; }
.intro-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 7px;
  color: #7a6a62;
  font-size: 10px;
}
.intro-card-row b { color: #2a241f; font-size: 10.5px; font-weight: 650; }
.intro-card-meter {
  display: block;
  width: 100%;
  height: 3px;
  margin-top: 9px;
  border-radius: 2px;
  background: rgba(38, 25, 18, .1);
  overflow: hidden;
}
.intro-card-meter i { display: block; height: 100%; border-radius: 2px; background: #cf6f55; }
.intro-card-cap {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 5px;
  color: #9a8a83;
  font-size: 8.5px;
  letter-spacing: .02em;
}

/* -- body ------------------------------------------------------------------ */

.intro-body { padding: 22px 0 22px; text-align: center; }
/* The content column is narrower than the hero, as in the reference: the copy
   and the action share one centred measure rather than filling the dialog. */
.intro-panels, .intro-dots, .intro-actions {
  max-width: 274px;
  margin-inline: auto;
}

.intro-panels { display: grid; }
.intro-panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease;
}
.intro-panel.is-active { opacity: 1; visibility: visible; }
.intro-panel h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -.035em;
  line-height: 1.22;
}
.intro-panel p {
  margin: 7px auto 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.intro-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 16px auto 14px;
}
.intro-dots button {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line-strong);
  cursor: pointer;
  transition: width .2s ease, background-color .2s ease;
}
.intro-dots button[aria-current="true"] {
  width: 18px;
  border-radius: 3px;
  background: var(--orange);
}

.intro-actions { display: flex; gap: 8px; }
.intro-cta {
  position: relative;
  overflow: hidden;
  flex: 1;
  min-width: 0;
  height: 38px;
  border: 0;
  border-radius: 19px;
  background: var(--orange);
  color: #fff;
  font-size: 13.5px;
  font-weight: 650;
  cursor: pointer;
  transition: background-color .16s ease;
}
.intro-cta:hover { background: var(--orange-deep); }
/* Held for a moment on each step; the ring in the hero corner shows the wait,
   so the button only has to read as inert. */
.intro-cta[disabled] { cursor: default; opacity: .74; }
.intro-cta[disabled]:hover { background: var(--orange); }

/* Countdown ring. Only visible while a step is being held. */
/* On the dialog surface rather than the hero: over the gradient a small ring
   at this size was effectively invisible. Sits in the gutter beside the action
   row, vertically centred on it. */
.intro-timer {
  position: absolute;
  right: 22px;
  bottom: 37px;
  z-index: 4;
  width: 22px;
  height: 22px;
  opacity: 0;
  transition: opacity .22s ease;
}
.intro-modal.is-holding .intro-timer { opacity: 1; }
/* Rotated so the sweep starts at twelve o'clock rather than three. */
.intro-timer svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.intro-timer circle { fill: none; stroke-width: 2.6; }
.intro-timer-track { stroke: var(--line); }
.intro-timer-fill {
  stroke: var(--orange);
  stroke-linecap: round;
  /* 2 * PI * r, with r = 9 */
  stroke-dasharray: 56.55;
  stroke-dashoffset: 56.55;
}
.intro-modal.is-holding .intro-timer-fill { animation: introRing 1.5s linear forwards; }
@keyframes introRing { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .intro-timer-fill { transition: none; }
  .intro-modal.is-holding .intro-timer-fill { animation-duration: 1.5s; }
}

.intro-back {
  flex: none;
  width: 84px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 19px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.intro-back:hover { background: var(--sunk); color: var(--ink); }
/* Removed from flow entirely on the first step, so the CTA takes the full row
   rather than sitting beside a gap. */
.intro-back[disabled] { display: none; }

@media (max-width: 760px) {
  .intro-modal { padding: 14px; }
  /* No gutter at this width; tuck it into the corner instead. */
  .intro-timer { right: 14px; bottom: 14px; }
  .intro-dialog { max-height: calc(100vh - 28px); }
  .intro-hero { height: 176px; }
  .intro-body { padding: 20px 18px 20px; }
  .intro-panels, .intro-dots, .intro-cta, .intro-back { max-width: none; }
  .intro-panel h2 { font-size: 19px; }
}

/* The deck advance is decorative, so hold the cards still when motion is not
   wanted and let opacity alone carry the change. */
@media (prefers-reduced-motion: reduce) {
  .intro-card { transition: opacity .28s ease; }
}

/* ==========================================================================
   Swap — buy a listed stock into its vault

   Prefixed `stockswap-` rather than reusing the Borrow page's `.swap-*`
   family: that family is the collateral/borrow dialog, several of its rules
   are global rather than scoped to [data-page="borrow"], and paintSwapGate()
   reaches for a bare `.swap` element. A separate namespace keeps the two from
   colliding.

   Shape: one white card holding two identical off-white rounded rectangles,
   stacked, with the direction control straddling the seam. The halves are
   `--sunk` on `--paper`, the same figure/ground the app uses everywhere else,
   so this is a layout change and not a new palette.
   ========================================================================== */

/* The instrument is centred on the page, and the title travels WITH it: the
   whole view is constrained to the card's width and centred, so "Swap" sits
   directly above the card, flush with the card's own left edge — not the far
   edge of the content container. */
.view[data-page="swap"] { max-width: 520px; }
/* Centred on the page rather than pinned to the top: the instrument is the
   whole view, so a tall empty column beneath it read as misalignment. The
   selector carries .is-active to outrank the generic .view.is-active display
   rule that would otherwise force it back to block. */
.view[data-page="swap"].is-active {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 210px);
}
.stockswap-wrap {
  display: grid;
  grid-template-columns: minmax(0, 520px);
  justify-content: start;
}
.stockswap-card {
  display: grid;
  gap: 8px;
  padding: 20px;
  border-radius: 10px;
  background: var(--paper);
}

/* The two halves are deliberately identical: same fill, same radius, same
   metrics. Which one you are typing into is told by its label, not by its
   styling, because the flip control can swap what they mean. */
.stockswap-half {
  padding: 17px 19px 16px;
  /* No resting hairline: --sunk on --paper is a full step of the ladder in
     both themes, so the halves read as layers on fill alone. The border is
     kept invisible so :focus-within and .is-problem still have an edge to
     colour — the red error outline is the one that had to survive. */
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--sunk);
  transition: border-color .16s ease;
}
.stockswap-half:focus-within { border-color: var(--orange-line); }
/* Red marks a half that cannot produce the trade as entered: on the receive
   side nothing to route through or an amount too small to guarantee any stock
   at all, on the pay side an amount larger than the wallet holds. It is a
   colour swap on the border the half already draws — same box, same metrics —
   and it outranks focus because a state that cannot be swapped matters more
   than which half the caret is in. Never a resting state: it appears only
   while that condition holds. */
.stockswap-half.is-problem, .stockswap-half.is-problem:focus-within { border-color: var(--risk); }
.stockswap-half-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
}
.stockswap-label {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.005em;
}
/* The label and the wallet balance stack in the left column of the head, so
   the token picker keeps the whole right side and the row's height is set by
   the picker either way — a connected wallet does not make the card grow. */
.stockswap-head-text { display: grid; gap: 0; min-width: 0; }
/* Same quiet register as the conversion line under the figure: this is a fact
   about the wallet, not part of the trade being sized. */
.stockswap-balance {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--faint);
  font-size: 11px;
  white-space: nowrap;
}
/* The app's small control: a hairline button in the paper fill, the same
   family as .stockswap-chip one row down. */
.stockswap-max {
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--raised);
  color: var(--muted);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.7;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.stockswap-max:hover { background: var(--orange-soft); border-color: var(--orange-line); color: var(--orange-deep); }
.stockswap-unit { display: flex; align-items: center; min-width: 0; }

.stockswap-figure {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.15;
  text-align: left;
}
.stockswap-figure::placeholder { color: var(--placeholder); }
/* Quoted, not entered — a shade back from the figure being typed. */
.stockswap-out { overflow: hidden; color: var(--muted-2); text-overflow: ellipsis; white-space: nowrap; }
.stockswap-convert { min-height: 16px; margin-top: 3px; color: var(--faint); font-size: 11px; }
/* Same quiet treatment as the conversion line above it, but it collapses
   rather than reserving a row — otherwise the receive half would stand a line
   taller than the pay half at rest. */
.stockswap-min { min-height: 0; margin-top: 1px; }
.stockswap-min:empty { display: none; }

/* Straddles the seam, overlapping both rectangles. The card is a grid with an
   8px gap, and this row clamps to zero height, so the channel between the two
   halves is both gaps together. A 34px control pulled up by half its own
   height (-17px) therefore sits exactly centred on the seam, with 9px of it
   inside each rectangle. The ring is drawn in the card's own fill so the badge
   punches a hole through the join rather than sitting on top of it. */
.stockswap-flip {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  justify-self: center;
  width: 34px; height: 34px;
  margin: -17px 0;
  padding: 0;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: var(--sunk);
  color: var(--muted);
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.stockswap-flip:hover { background: var(--orange-soft); color: var(--orange-deep); }
.stockswap-flip .icon { width: 16px; height: 16px; transition: transform .2s ease; }
/* Selling turns the glyph over, so the control shows which way round the
   instrument currently is rather than only what pressing it does. */
.stockswap-flip[aria-pressed="true"] .icon { transform: rotate(180deg); }

/* ---- Card controls ----

   Where the stock is delivered and how far the price may move before the
   router gives up. Both carry money, so both sit on the card in the open
   rather than behind a settings affordance. Built from the parts already on
   this page — the half's --sunk fill and hairline, the app's control radius
   family — so it reads as another row of the instrument rather than a panel
   bolted underneath it. */
.stockswap-controls {
  display: grid;
  gap: 9px;
  padding: 13px 15px 12px;
  border-radius: 14px;
  background: var(--sunk);
}
.stockswap-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
}
.stockswap-control-label {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.005em;
}
/* The --sunk controls panel behind it IS the track, so the group takes the
   app's segmented idiom exactly as .borrow-tabs and .position-modes do: a
   recessed track with one raised current value. It used to draw its own fill
   as well, which put a second rung between the panel and the chip and left
   the selection nowhere to step to. */
.stockswap-chips {
  display: inline-flex;
  flex: none;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: transparent;
}
.stockswap-chip {
  padding: 4px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12px;
  white-space: nowrap;
  transition: background-color .16s ease, color .16s ease;
}
.stockswap-chip:hover { background: var(--orange-soft); color: var(--orange-deep); }
/* The selection is a raised pill, not a coloured one: --orange-tint is a pale
   peach that ran LIGHTER than the track in light and darker in dark, so it
   read as a warm alert rather than a current value. Orange still marks it —
   in the label, where it costs nothing. */
.stockswap-chip.is-on { background: var(--raised); color: var(--orange-deep); font-weight: 600; }
.stockswap-chip.is-on:hover { background: var(--raised); }

.stockswap-note { margin: 0; color: var(--faint); font-size: 11.5px; line-height: 1.45; }
.stockswap-note:empty { display: none; }

/* ---- Asset picker ----

   Not a new control: the trigger is .token-pick and the rows are
   .combo-option, the two the app already uses for choosing an asset. Only
   the parts that have to differ are set here — the pill needs a fill and a
   border because it sits on a --sunk half rather than a white card, and the
   menu needs anchoring to its own trigger. Everything else, including the
   type ramp, is inherited so this page reads exactly like Borrow. */

.stockswap-pick-wrap { position: relative; }
/* Squared off, in the app's control radius family (.btn is 8, .deposit-close
   and .nav-item are 10) rather than a pill — it reads as a control that opens
   something, which is what it is. */
.stockswap-pick {
  max-width: 260px;
  height: 38px;
  padding: 0 10px 0 7px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--raised);
  transition: background-color .15s ease, border-color .15s ease;
}
.stockswap-pick:hover { background: var(--orange-soft); border-color: var(--orange-line); }
/* One option is not a choice: keep the surface, drop the affordance. */
.stockswap-pick.is-single { cursor: default; }
.stockswap-pick.is-single:hover { background: var(--raised); border-color: transparent; }
.stockswap-pick.is-single .token-caret { display: none; }
.stockswap-pick .market-icon { width: 22px; height: 22px; flex: none; }
.stockswap-pick .token-text {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.stockswap-pick .token-text strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stockswap-pick .token-text small { color: var(--faint); font-size: 11px; white-space: nowrap; }
.stockswap-pick .token-caret { width: 14px; height: 14px; flex: none; }

/* USDG ships as token art; ETH has none in /brand, so it takes the inline
   glyph and a ring to sit in, reading as a coin beside the others. */
.stockswap-mark img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; }
/* Ethereum's own blue, as with every other market mark carrying its brand. */
.stockswap-mark-eth { color: #627eea; }
.stockswap-mark-eth .icon { width: 100%; height: 100%; }

/* .combo-menu is written for a full-width field; here it hangs off a pill,
   so it is anchored to the trigger and given its own width. */
/* A centred sheet rather than a menu hanging off a small button: at this size
   the list is the thing being looked at, and anchoring it to the trigger left
   it cramped and overlapping the instrument it was meant to configure. */
.stockswap-scrim[hidden] { display: none; }
.stockswap-scrim {
  position: fixed;
  inset: 0;
  z-index: 230;
  background: var(--backdrop);
  backdrop-filter: blur(6px);
}
body.stockswap-picking { overflow: hidden; }

.stockswap-menu {
  position: fixed;
  top: 50%;
  left: 50%;
  right: auto;
  z-index: 240;
  width: min(392px, calc(100vw - 32px));
  max-height: min(72vh, 580px);
  overflow-y: auto;
  transform: translate(-50%, -50%);
  padding: 8px;
  border-radius: 18px;
  box-shadow: var(--shadow-pill);
}
.stockswap-sheet-head {
  padding: 4px 10px 11px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 6px;
}
.stockswap-sheet-head strong {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.015em;
}
.stockswap-menu .market-icon { width: 26px; height: 26px; }
/* Three columns: mark, identity, figure — with the tick occupying a reserved
   slot so selecting a row never shifts the price column. */
.stockswap-menu .combo-option {
  gap: 12px;
  min-height: 54px;
  padding: 9px 10px;
  border-radius: 11px;
}
.stockswap-menu .market-icon { width: 30px; height: 30px; }
.stockswap-menu .combo-option + .combo-option { margin-top: 1px; }
.stockswap-menu .combo-option .label { display: grid; gap: 0; }
.stockswap-menu .combo-option strong {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}
.stockswap-menu .combo-option small {
  font-family: var(--sans);
  font-size: 10.5px;
  color: var(--faint);
  line-height: 1.25;
}
.stockswap-tick {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--orange);
  opacity: 0;
}
.stockswap-menu .combo-option.is-selected .stockswap-tick { opacity: 1; }
/* The app marks a chosen row with aria-selected; keep the same fill and add
   the rail the borrow ledger uses so the current asset is unmistakable. */
.stockswap-menu .combo-option.is-selected { background: var(--orange-soft); }
.stockswap-menu .combo-option:hover { background: var(--sunk); }
.stockswap-menu .combo-option.is-selected:hover { background: var(--orange-soft); }
.stockswap-menu .ltv { font-size: 12px; color: var(--ink); }
/* Price over daily move, right-aligned, so the figures form a column instead
   of drifting with each name's length. */
.stockswap-opt-fig {
  display: grid;
  justify-items: end;
  gap: 1px;
  margin-left: auto;
  text-align: right;
}
.stockswap-opt-move { font-size: 10px; font-style: normal; color: var(--faint); }
.stockswap-opt-move.is-up { color: var(--safe); }
.stockswap-opt-move.is-down { color: var(--risk); }

/* ---- Action and quote footer ---- */

/* Where the stock lands is a standing fact about the page, not a property of
   the trade being sized, so it lives in the title's info tooltip. On the card
   it was a permanent orange slab between the instrument and its button. */
.stockswap-card .btn { margin-top: 6px; }

/* One ruled row: rate left, provenance and freshness right, a single mono
   size throughout. The rule and the gap above it are what separate it from
   the action button — without them it read as debris under the CTA. */
.stockswap-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding-top: 11px;
  border-top: 1px solid var(--line-soft);
  color: var(--faint);
  font-family: var(--sans);
  font-size: 11.5px;
  white-space: nowrap;
}
/* The rate is the one part that may run long (six decimals on a small rate),
   so it is the only part allowed to shrink — the badge and the countdown keep
   their full width instead of the row collapsing into three ragged lines. */
.stockswap-meta > .num { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.stockswap-meta-end { display: inline-flex; align-items: center; flex: none; gap: 9px; }
.stockswap-meta-refresh { color: var(--faint); }
.stockswap-badge {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--sunk);
  color: var(--muted);
  white-space: nowrap;
}
/* Orange marks the one state worth reacting to: a real routed price. */
.stockswap-badge.is-routed { background: var(--orange-soft); color: var(--orange-deep); }

.stockswap-status { margin-top: 8px; color: var(--risk); font-size: 12.5px; text-align: center; }
/* Why the action is unavailable is information, not a mistake to flag red. */
.stockswap-status.is-note { color: var(--muted); }
.stockswap-status:empty { display: none; }

/* ---- Swap dialog ----
   Shell metrics are lifted from .deposit-dialog so the app has one modal
   idiom rather than two that nearly match. */

body.stockswap-open { overflow: hidden; }
.stockswap-modal[hidden] { display: none; }
.stockswap-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.stockswap-modal-backdrop {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  background: var(--backdrop-soft);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  cursor: default;
}
.stockswap-dialog {
  position: relative;
  width: min(460px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 20px;
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 30px 80px -30px var(--modal-shadow);
}

/* The two legs of the trade side by side, so the exchange is what gets read
   first rather than a list of properties. */
.stockswap-legs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: var(--sunk);
}
.stockswap-leg { display: grid; gap: 3px; min-width: 0; }
.stockswap-leg span {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.stockswap-leg strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stockswap-leg-in strong { color: var(--orange-deep); }
.stockswap-leg-arrow { width: 16px; height: 16px; flex: none; color: var(--faint); }

.stockswap-dialog-rows { margin-top: 4px; }
.stockswap-dialog-rows div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 12.5px;
}
.stockswap-dialog-rows div:last-child { border-bottom: 0; }
.stockswap-dialog-rows strong { color: var(--ink); font-size: 12.5px; font-weight: 600; text-align: right; }

/* The live address row borrows .deposit-address-row/.deposit-address-value
   wholesale; only the copy button width and the meta line under it are new. */
.stockswap-dialog .deposit-address-row #swapCopyAddress { min-width: 82px; transition: background-color .16s ease, border-color .16s ease, color .16s ease; }
.stockswap-dialog #swapCopyAddress.is-copied { border-color: var(--safe-line); background: var(--safe-tint); color: var(--safe); }
.stockswap-dialog #swapCopyAddress.is-error { border-color: var(--orange-line); background: var(--orange-soft); color: var(--risk); }
/* The action needs air under the address block; the deposit dialog gets the
   same separation from its own amount step. */
.stockswap-dialog #swapModalAction { margin-top: 16px; }
.stockswap-address-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .02em;
}

/* .deposit-status.is-error resolves to an undefined --danger token, so the
   swap dialog states its own error colour rather than inheriting nothing. */
.stockswap-dialog .deposit-status.is-error { color: var(--risk); }

/* Declared, not disguised: whatever is not a live address — preparing, an
   unsupported direction, every wallet leased, or an expired window — says so
   in the place the address would otherwise sit. */
.stockswap-pending {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 14px;
  padding: 12px 13px;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  background: var(--sunk);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.stockswap-pending .icon { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--faint); }

/* A disabled action must not keep the primary fill — an orange button reads
   as pressable no matter what the cursor does. Applies in the dialog too,
   where the pending-address action is disabled by design. */
.stockswap-card .btn:disabled,
.stockswap-dialog .btn:disabled {
  background: var(--sunk);
  color: var(--faint);
  cursor: not-allowed;
}

@media (max-width: 760px) {
  .stockswap-wrap { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .stockswap-card { padding: 13px; }
  .stockswap-half { padding: 12px 13px 11px; }
  .stockswap-figure { font-size: 27px; }
  .stockswap-pick { max-width: 158px; }
  /* Rate over provenance: side by side they collide at this width. */
  .stockswap-meta { flex-direction: column; align-items: flex-start; gap: 7px; }
  /* Stacked legs: side by side they truncate to the point of uselessness. */
  .stockswap-legs { grid-template-columns: minmax(0, 1fr); }
  .stockswap-leg-arrow { transform: rotate(90deg); justify-self: start; }
}

/* ==========================================================================
   Scrollbars. The platform default is a grey slab that belongs to no theme;
   these are drawn from the palette so they read as part of the surface in
   both. Firefox gets the two-colour form, WebKit the full treatment.
   ========================================================================== */

* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  /* Painted into the padding box so the border above reads as a gap, which is
     what keeps the thumb clear of the content beside it. */
  background: var(--line-strong);
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }

/* ==========================================================================
   Topbar market search. Chrome rather than a page control, so it is quieter
   than the page-level search fields and sized to the wallet button beside it.
   ========================================================================== */

.topsearch { position: relative; width: min(250px, 34vw); }
.topsearch-field {
  height: 34px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--paper);
}
.topsearch-field .icon { width: 15px; height: 15px; }
.topsearch-field input { font-size: 13px; }
.topsearch-field input::placeholder { color: var(--faint); }

/* The shortcut hint retires once the field is in use. */
.topsearch-key {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  flex: none;
  border-radius: 5px;
  background: var(--sunk);
  color: var(--faint);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1;
}
.topsearch-field:focus-within .topsearch-key { opacity: 0; }

.topsearch-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 5px;
  list-style: none;
  border-radius: 6px;
  background: var(--paper);
  box-shadow: var(--shadow-pill);
}
.topsearch-results[hidden] { display: none; }

.topsearch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 6px 8px;
  border: 0;
  border-radius: 5px;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background-color .14s ease;
}
.topsearch-row:hover,
.topsearch-row:focus-visible { background: var(--sunk); outline: none; }
.topsearch-row .market-icon { width: 24px; height: 24px; flex: none; }
.topsearch-name { display: grid; min-width: 0; }
.topsearch-name strong { font-size: 13px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.topsearch-name small { color: var(--faint); font-family: var(--mono); font-size: 10px; line-height: 1.3; }
.topsearch-price { margin-left: auto; color: var(--ink); font-size: 12px; }
.topsearch-empty { padding: 10px 10px 11px; color: var(--faint); font-size: 12.5px; }

/* The wallet control keeps priority when the bar runs out of room. */
@media (max-width: 760px) { .topsearch { display: none; } }


/* Recessed in dark, a plain card in light, for the reason above. */

/* Chain mark in the wallet control, in place of the network name. */
.account-chain { display: inline-flex; align-items: center; align-self: center; }
.account-chain img {
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 4px;
}

/* The primary action in the wallet menu: a tinted row rather than coloured
   text, which on its own just looked inconsistent with the rows beside it. */
#openDeposit { background: var(--orange-soft); color: var(--orange-deep); font-weight: 600; }
#openDeposit .icon { color: var(--orange); }
#openDeposit:hover { background: var(--orange-tint); color: var(--orange-deep); }
#openDeposit:hover .icon { color: var(--orange-deep); }