:root {
  /* Single dark theme. */
  color-scheme: dark;
  --ledger: #10151e;
  --ink: #f1f4f9;
  --cobalt: #8299ef;
  --cobalt-strong: #a6b6f7;
  --cobalt-soft: #202b4e;
  --tide: #51b9c2;
  --tide-soft: #13373c;
  --amber: #e3ad56;
  --amber-soft: #3c2d17;
  --risk: #e07886;
  --risk-soft: #44242c;
  --surface: #171d28;
  --surface-raised: #1d2431;
  --surface-subtle: #242c3a;
  --surface-hover: #202836;
  --text: #f1f4f9;
  --muted: #abb5c4;
  --faint: #7f8a9b;
  --line: #303a4a;
  --line-strong: #465267;
  --focus: #9aacf5;
  --positive: #65c7cf;
  --negative: #ed8995;
  --violet: #b98ef2;
  --violet-soft: #2a1f3d;
  --sunset: #e8965f;
  --sunset-soft: #3a2413;
  --sky: #56c2e3;
  --sky-soft: #123244;
  --leaf: #8fd15c;
  --leaf-soft: #1e3320;
  --shadow-soft: 0 12px 40px rgba(0, 0, 0, 0.28);
  --shadow-dialog: 0 24px 90px rgba(0, 0, 0, 0.58);
  --font-sans: "Avenir Next", Avenir, "Century Gothic", Futura, Montserrat, Inter, ui-sans-serif,
    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, "Liberation Mono",
    monospace;
  --chart-tick-size: 11px;
  --chart-tick-weight: 400;
  --chart-tick-font: var(--font-sans);
  --chart-tick-fill: var(--muted);
  --chart-grid-opacity: 0.2;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  color: var(--text);
  background:
    linear-gradient(rgba(56, 88, 199, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 88, 199, 0.025) 1px, transparent 1px),
    var(--ledger);
  background-size: 36px 36px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select {
  color: inherit;
  font: inherit;
}

button,
select {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

a {
  color: inherit;
}

svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 42%, transparent);
  outline-offset: 2px;
}

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

.skip-link {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  border-radius: 5px;
  color: #fff;
  background: var(--cobalt-strong);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.auth-gate {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  place-items: center;
  padding:
    max(24px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 34%, color-mix(in srgb, #5865f2 12%, transparent), transparent 32%),
    var(--bg);
}

.auth-card {
  width: min(430px, 100%);
  padding: 42px 36px 34px;
  text-align: center;
}

.auth-logo {
  width: 78px;
  height: 78px;
  margin-bottom: 22px;
  object-fit: contain;
}

.auth-eyebrow {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.auth-card h1 {
  margin: 0;
  font-size: clamp(1.8rem, 7vw, 2.5rem);
  font-weight: 650;
  letter-spacing: -0.045em;
}

.auth-detail {
  max-width: 34ch;
  margin: 14px auto 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.55;
}

.auth-error {
  margin: 18px 0 0;
  border: 1px solid color-mix(in srgb, var(--risk) 35%, var(--line));
  border-radius: 12px;
  padding: 11px 12px;
  color: var(--risk);
  background: color-mix(in srgb, var(--risk) 7%, transparent);
  font-size: 0.86rem;
  line-height: 1.45;
}

.discord-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(290px, 100%);
  min-height: 48px;
  margin-top: 24px;
  border-radius: 12px;
  color: #fff;
  background: #5865f2;
  box-shadow: 0 8px 24px rgba(88, 101, 242, 0.22);
  font-weight: 650;
  text-decoration: none;
  transition: background 140ms ease, transform 140ms ease;
}

.discord-login:hover {
  background: #4752c4;
  transform: translateY(-1px);
}

.discord-login:focus-visible {
  outline: 3px solid color-mix(in srgb, #5865f2 38%, transparent);
  outline-offset: 3px;
}

.auth-requirement {
  margin: 16px 0 0;
  color: var(--faint, var(--muted));
  font-size: 0.74rem;
}

body.auth-pending .markets-shell,
body.auth-required .markets-shell,
body.authenticated .auth-gate {
  display: none;
}

.markets-shell {
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom);
}

.member-avatar {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft, var(--surface));
  color: var(--ink, var(--text));
  font-size: 0.72rem;
  font-weight: 750;
}

.member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-name {
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Keep the header clear of the iOS status bar in a home-screen app. The
     inset is 0 in a normal browser, so this is unconditional on purpose; see
     site-nav.css for why the `display-mode: standalone` gate was dropped.
     Padding longhands only — a shorthand here resets padding-top. */
  min-height: calc(62px + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  padding-right: max(clamp(18px, 3.5vw, 54px), env(safe-area-inset-right));
  padding-bottom: 0;
  padding-left: max(clamp(18px, 3.5vw, 54px), env(safe-area-inset-left));
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(16px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand-mark {
  display: block;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  object-fit: cover;
}

.brand-name {
  letter-spacing: 0.08em;
  font-weight: 800;
}

.brand-divider {
  width: 1px;
  height: 18px;
  background: var(--line-strong);
}

.brand-section {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.header-actions,
.market-controls,
.toolbar-meta,
.section-label-row,
.page-buttons {
  display: flex;
  align-items: center;
}

.header-actions {
  gap: 12px;
}

.refresh-button,
.reset-button,
.pagination button,
.message-state button,
.copy-button,
.dialog-close {
  border: 1px solid var(--line);
  background: var(--surface);
}

main {
  width: min(100%, 1760px);
  margin: 0 auto;
}

.market-controls-bar {
  display: flex;
  justify-content: flex-end;
  padding: 20px clamp(18px, 3.5vw, 54px) 16px;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 9px;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.market-controls {
  flex: 0 0 auto;
  gap: 18px;
}

.as-of-block {
  text-align: right;
}

.as-of-block span,
.as-of-block time {
  display: block;
}

.as-of-block span {
  margin-bottom: 3px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.as-of-block time {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
}

.refresh-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 5px;
  font-size: 0.76rem;
  font-weight: 750;
}

.refresh-button:hover {
  border-color: var(--cobalt);
  color: var(--cobalt);
}

.refresh-button svg {
  width: 15px;
  height: 15px;
}

.refresh-button.is-refreshing svg {
  animation: spin 0.8s linear infinite;
}

.source-section {
  padding: 0 clamp(18px, 3.5vw, 54px) 26px;
}

.section-label-row {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.section-label-row h2 {
  margin: 0;
  font-size: 0.98rem;
  letter-spacing: -0.02em;
}

.section-label-row span {
  color: var(--muted);
  font-size: 0.74rem;
  text-align: right;
}

.source-health {
  min-width: 0;
  min-height: 254px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.source-overview {
  display: grid;
  min-width: 0;
  min-height: 0;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--cobalt-soft) 30%, transparent), transparent 48%),
    var(--surface-hover);
  grid-template-areas:
    "decision context"
    "counts counts"
    "refresh refresh";
  grid-template-columns: minmax(300px, 1fr) auto;
}

.source-decision {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 13px;
  padding: 18px 20px;
  grid-area: decision;
}

.source-decision-mark {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--tide) 50%, var(--line));
  border-radius: 50%;
  color: var(--tide);
  background: var(--tide-soft);
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 800;
}

.source-overview.is-partial .source-decision-mark {
  border-color: color-mix(in srgb, var(--amber) 55%, var(--line));
  color: var(--amber);
  background: var(--amber-soft);
}

.source-overview.is-error .source-decision-mark {
  border-color: color-mix(in srgb, var(--risk) 55%, var(--line));
  color: var(--risk);
  background: var(--risk-soft);
}

.source-overview.is-refreshing .source-decision-mark {
  color: var(--cobalt);
  background: var(--cobalt-soft);
  animation: spin 1.2s linear infinite;
}

.source-decision > span:last-child,
.source-decision strong,
.source-decision > span:last-child > span {
  display: block;
  min-width: 0;
}

.source-decision strong {
  margin-bottom: 3px;
  font-size: 0.96rem;
  letter-spacing: -0.025em;
}

.source-decision > span:last-child > span {
  color: var(--muted);
  font-size: 0.74rem;
}

.source-counts {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 9px 14px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  grid-area: counts;
  grid-template-columns: repeat(4, minmax(90px, 1fr));
  gap: 8px;
}

.source-counts > div {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  padding: 5px 8px;
}

.source-counts dt,
.source-counts dd {
  margin: 0;
}

.source-counts dd {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
}

.source-counts dt {
  color: var(--muted);
  font-size: 0.68rem;
}

.source-counts .is-healthy dd {
  color: var(--tide);
}

.source-counts .is-partial dd {
  color: var(--amber);
}

.source-counts .is-error dd {
  color: var(--risk);
}

.source-counts .is-refreshing dd {
  color: var(--cobalt);
}

.source-context {
  display: grid;
  min-width: 0;
  align-content: center;
  padding: 14px 20px;
  grid-area: context;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.source-context span,
.source-context small,
.source-context strong {
  display: block;
  min-width: 0;
}

.source-context small {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.68rem;
}

.source-context strong {
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: 0.76rem;
}

.source-refresh-strip {
  display: grid;
  min-width: 0;
  grid-area: refresh;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  gap: 0;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.source-refresh-block {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 9px;
  padding: 13px 16px 15px;
}

.source-refresh-block + .source-refresh-block {
  border-left: 1px solid var(--line);
}

.source-refresh-block > small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 720;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.source-refresh-idle {
  color: var(--muted);
  font-size: 0.72rem;
}

.source-refresh-chips {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 6px;
}

.source-refresh-chip {
  display: flex;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 6px;
  background: var(--surface-hover);
}

.source-refresh-chip .source-logo {
  width: 22px;
  height: 22px;
  border-radius: 6px 3px 6px 3px;
  font-size: 0.52rem;
}

.source-refresh-chip-text {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.source-refresh-chip-text strong,
.source-refresh-chip-text span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-refresh-chip-text strong {
  font-size: 0.69rem;
  font-weight: 760;
}

.source-refresh-chip-text span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
}

.source-refresh-chip.is-running {
  border-color: color-mix(in srgb, var(--cobalt) 35%, var(--line));
}

.source-refresh-chip.is-queued {
  border-color: color-mix(in srgb, var(--amber) 30%, var(--line));
}

.source-refresh-more {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 8px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.source-register {
  min-width: 0;
  padding: 11px;
}

.source-group {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.source-group + .source-group {
  margin-top: 9px;
}

.source-group > summary {
  display: flex;
  min-height: 43px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 13px;
  color: var(--text);
  background: var(--surface-hover);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 760;
  list-style: none;
}

.source-group > summary::-webkit-details-marker,
.source-provider > summary::-webkit-details-marker {
  display: none;
}

.source-group > summary::before {
  content: "›";
  width: 15px;
  flex: 0 0 auto;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 1rem;
  transform-origin: center;
  transition: transform 150ms ease;
}

.source-group[open] > summary::before {
  transform: rotate(90deg);
}

.source-group > summary > span:first-child {
  margin-right: auto;
}

.source-group > summary > span:last-child {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
}

.source-attention > summary {
  background: color-mix(in srgb, var(--amber-soft) 62%, var(--surface));
}

.source-more-attention > summary {
  color: color-mix(in srgb, var(--amber) 78%, var(--text));
  background: color-mix(in srgb, var(--amber-soft) 28%, var(--surface));
}

.source-provider-list {
  min-width: 0;
  border-top: 1px solid var(--line);
}

.source-provider + .source-provider {
  border-top: 1px solid var(--line);
}

.source-provider > summary {
  display: grid;
  min-width: 0;
  min-height: 66px;
  align-items: center;
  padding: 9px 12px;
  background: var(--surface);
  cursor: pointer;
  grid-template-columns: minmax(235px, 1.3fr) minmax(126px, 0.54fr) minmax(210px, 0.8fr) 18px;
  gap: 16px;
  list-style: none;
}

.source-provider > summary:hover {
  background: var(--surface-hover);
}

.source-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.source-logo {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 9px 5px 9px 5px;
  color: var(--cobalt-strong);
  background: var(--cobalt-soft);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 800;
}

.source-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Logos keep their own transparency; initials hide once one loads. */
  background: transparent;
}

.source-identity-text {
  min-width: 0;
}

.source-identity-text strong,
.source-reason {
  display: block;
  min-width: 0;
}

.source-identity-text strong {
  margin-bottom: 2px;
  overflow: hidden;
  font-size: 0.8rem;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-reason {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.69rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.source-status {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-hover);
  font-size: 0.68rem;
  font-weight: 720;
}

.source-status-glyph {
  display: grid;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: var(--surface);
  background: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 900;
}

.source-provider.is-healthy .source-status {
  border-color: color-mix(in srgb, var(--tide) 35%, var(--line));
  color: var(--tide);
  background: var(--tide-soft);
}

.source-provider.is-healthy .source-status-glyph {
  background: var(--tide);
}

.source-provider.is-partial .source-status,
.source-provider.is-stale .source-status {
  border-color: color-mix(in srgb, var(--amber) 38%, var(--line));
  color: var(--amber);
  background: var(--amber-soft);
}

.source-provider.is-partial .source-status-glyph,
.source-provider.is-stale .source-status-glyph {
  background: var(--amber);
}

.source-provider.is-error .source-status,
.source-provider.is-unavailable .source-status {
  border-color: color-mix(in srgb, var(--risk) 38%, var(--line));
  color: var(--risk);
  background: var(--risk-soft);
}

.source-provider.is-error .source-status-glyph,
.source-provider.is-unavailable .source-status-glyph {
  background: var(--risk);
}

.source-provider.is-refreshing .source-status {
  border-color: color-mix(in srgb, var(--cobalt) 38%, var(--line));
  color: var(--cobalt);
  background: var(--cobalt-soft);
}

.source-provider.is-refreshing .source-status-glyph {
  background: var(--cobalt);
  animation: spin 1.2s linear infinite;
}

.source-metrics {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(58px, 1fr));
  gap: 8px;
}

.source-metrics > span,
.source-metrics strong,
.source-metrics small {
  display: block;
  min-width: 0;
}

.source-metrics strong {
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-metrics small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.62rem;
}

.source-chevron {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 1rem;
  transform-origin: center;
  transition: transform 150ms ease;
}

.source-provider[open] .source-chevron {
  transform: rotate(180deg);
}

.source-provider-details {
  padding: 12px 14px 14px 56px;
  border-top: 1px solid var(--line);
  background: var(--surface-hover);
}

.source-provider-details > p {
  max-width: 880px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 0.73rem;
}

.source-provider-details dl {
  display: grid;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  grid-template-columns: minmax(120px, 0.24fr) minmax(0, 1fr);
}

.source-provider-details dt,
.source-provider-details dd {
  min-width: 0;
  margin: 0;
  padding: 7px 9px;
  border-bottom: 1px solid var(--line);
  font-size: 0.68rem;
}

.source-provider-details dt {
  color: var(--muted);
  font-weight: 700;
}

.source-provider-details dd {
  overflow-wrap: anywhere;
  border-left: 1px solid var(--line);
  font-family: var(--font-mono);
  white-space: pre-wrap;
}

.source-provider-details dt:last-of-type,
.source-provider-details dd:last-of-type {
  border-bottom: 0;
}

.source-empty {
  min-height: 72px;
  margin: 0;
  padding: 18px;
  color: var(--muted);
  font-size: 0.76rem;
}

.source-overview-skeleton {
  gap: 1px;
  padding: 20px;
  background: var(--line);
  grid-template-areas: none;
  grid-template-columns: 1.15fr 1.5fr 0.8fr;
}

.source-skeleton {
  background: linear-gradient(
    100deg,
    var(--surface-hover) 20%,
    color-mix(in srgb, var(--line) 45%, var(--surface-hover)) 42%,
    var(--surface-hover) 62%
  );
  background-size: 250% 100%;
  animation: shimmer 1.5s infinite;
}

.source-skeleton-decision,
.source-skeleton-counts,
.source-skeleton-context {
  min-width: 0;
  border-radius: 5px;
}

.source-register-skeleton {
  display: grid;
  gap: 8px;
}

.source-skeleton-group,
.source-skeleton-provider {
  border: 1px solid var(--line);
  border-radius: 5px;
}

.source-skeleton-group {
  height: 43px;
}

.source-skeleton-provider {
  height: 66px;
}

.browser-frame {
  display: block;
  padding: 0 clamp(18px, 3.5vw, 54px) 60px;
}

body.is-starred-view .filter-bar,
body.is-starred-view .page-size-control,
body.is-starred-view .mobile-sort-control {
  display: none;
}

/* Exit intel view: hide the market browser chrome behind the tab bar. */
body.is-exit-view .toolbar-meta,
body.is-exit-view .filter-bar,
body.is-exit-view .results-content,
body.is-exit-view .notice-stack,
body.is-exit-view .pagination {
  display: none;
}

.exit-intel-panel {
  padding: 18px clamp(10px, 2vw, 24px) 32px;
}

.exit-intel-intro {
  max-width: 78ch;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
  white-space: normal;
}

.exit-intel-status {
  margin: 0 0 14px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  white-space: normal;
}

.exit-intel-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin: 0 0 14px;
}

.exit-intel-search {
  flex: 1 1 220px;
  max-width: 360px;
}

.exit-intel-search .search-control input {
  width: 100%;
}

.table-shell.exit-intel-shell,
.exit-intel-shell {
  overflow-x: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.exit-intel-shell table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.exit-intel-shell th,
.exit-intel-shell td {
  box-sizing: border-box;
}

.exit-intel-shell th {
  height: auto;
  padding: 8px 10px 10px;
  white-space: normal;
  vertical-align: bottom;
}

.exit-intel-shell td {
  height: auto;
  min-height: 0;
  padding: 12px 10px;
  line-height: 1.38;
  white-space: normal;
  vertical-align: top;
}

.exit-intel-shell tbody tr {
  cursor: default;
}

.exit-intel-shell .exit-col-asset {
  width: 22%;
}

.exit-intel-shell .exit-col-size {
  width: 13%;
}

.exit-intel-shell .exit-col-exit {
  width: 28%;
}

.exit-intel-shell .exit-col-scores {
  width: 18%;
}

.exit-intel-shell .exit-col-rwa-xyz {
  width: 19%;
}

.exit-col-heading {
  display: block;
  margin-bottom: 4px;
  color: var(--faint);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
}

.exit-col-sorts {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  align-items: baseline;
}

.exit-intel-shell th .sort-button {
  padding: 0;
}

.exit-metric-stack {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.exit-metric {
  display: grid;
  min-width: 0;
  align-items: baseline;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 8px;
}

.exit-metric-label {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.exit-metric-value {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
}

.exit-metric.is-numeric .exit-metric-value {
  font-variant-numeric: tabular-nums;
}

.exit-metric.exit-unprofiled .exit-metric-value,
.exit-metric.exit-reported .exit-metric-value {
  color: inherit;
}

.exit-asset-cell {
  text-align: left;
}

.exit-asset-identity {
  display: grid;
  min-width: 0;
  align-items: center;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 9px;
}

.exit-asset-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.exit-asset-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.exit-asset-symbol {
  display: block;
  color: var(--text);
  font-weight: 700;
}

.exit-asset-subline {
  display: block;
  max-width: 100%;
  color: var(--faint);
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

.exit-route-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.exit-route-badge {
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.exit-route-instant {
  color: var(--positive);
  background: color-mix(in srgb, var(--positive) 12%, transparent);
}

.exit-route-queued {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 14%, transparent);
}

.exit-route-secondary {
  color: var(--negative);
  background: color-mix(in srgb, var(--negative) 12%, transparent);
}

.exit-grade-badge {
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
}

.exit-rwa-profile {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.exit-rwa-primary {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.exit-rwa-label {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-weight: 700;
}

.exit-rwa-primary a {
  text-decoration: none;
}

.exit-rwa-primary a:hover,
.exit-rwa-primary a:focus-visible {
  color: var(--cobalt);
  text-decoration: underline;
}

.exit-rwa-rating {
  flex: 0 0 auto;
  padding: 1px 5px;
  border: 1px solid color-mix(in srgb, var(--cobalt) 35%, var(--line));
  border-radius: 999px;
  color: var(--cobalt);
  background: var(--cobalt-soft);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 800;
}

.exit-rwa-secondary {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--faint);
  font-size: 0.7rem;
}

.exit-rwa-details {
  width: max-content;
  padding: 0;
  border: 0;
  color: var(--cobalt);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
}

.exit-rwa-details:hover,
.exit-rwa-details:focus-visible {
  text-decoration: underline;
}

.exit-unprofiled {
  color: var(--faint);
}

/* Feed-reported redemption facts (RWA.xyz) shown on unprofiled rows: kept
   visually softer than curated intel so provenance stays obvious. */
.exit-reported {
  color: var(--muted);
  font-style: italic;
}

.exit-asset-variants {
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  vertical-align: middle;
  white-space: nowrap;
}

.exit-asset-family {
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cobalt) 14%, transparent);
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

/* Flags rows where curated research and issuer-reported feed data disagree. */
.exit-cross-check {
  color: var(--amber);
  font-size: 0.72rem;
  vertical-align: middle;
  cursor: help;
}

.exit-family-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  flex: 1 1 280px;
}

.exit-family-filters:empty {
  display: none;
}

.exit-family-chip {
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  cursor: pointer;
}

.exit-family-chip:hover {
  border-color: color-mix(in srgb, var(--cobalt) 45%, var(--line));
  color: var(--text);
}

.exit-family-chip.is-active {
  border-color: var(--cobalt);
  background: color-mix(in srgb, var(--cobalt) 16%, transparent);
  color: var(--text);
}

.filter-bar {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-subtle) 64%, var(--surface));
}

.filter-bar > summary {
  display: none;
  list-style: none;
}

.filter-bar > summary::-webkit-details-marker {
  display: none;
}

.filter-bar-summary {
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 0 14px;
  cursor: pointer;
}

.filter-bar-summary-main {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.filter-bar-summary-main strong {
  font-size: 0.74rem;
}

.filter-bar-summary-main small {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.54rem;
  font-weight: 600;
}

.filter-bar-form {
  display: grid;
  gap: 0;
  padding: 0;
}

.filter-bar-toolbar,
.filter-bar-primary {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 14px 16px;
}

/* Facet labels stay in the accessibility tree; triggers already name the field. */
.filter-bar .filter-facet-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.filter-bar-toolbar .search-group {
  flex: 1 1 220px;
  max-width: 280px;
  margin: 0;
}

.filter-bar-facets {
  flex: 1 1 520px;
  min-width: 0;
}

.filter-bar-toolbar .reset-button {
  flex: 0 0 auto;
  width: auto;
  min-height: 34px;
  margin: 0;
  padding: 0 12px;
}

.filter-presets {
  position: relative;
  flex: 0 0 auto;
}

.filter-preset-trigger {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--text);
  background: var(--surface-raised);
  font-size: 0.7rem;
  font-weight: 650;
}

.filter-preset-trigger:hover,
.filter-preset-trigger[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--cobalt) 48%, var(--line));
  color: var(--cobalt);
}

.filter-preset-count {
  min-width: 17px;
  padding: 1px 4px;
  border-radius: 999px;
  color: var(--cobalt);
  background: color-mix(in srgb, var(--cobalt) 12%, transparent);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  text-align: center;
}

.filter-preset-panel {
  position: absolute;
  z-index: 39;
  top: calc(100% + 7px);
  right: 0;
  width: min(340px, calc(100vw - 32px));
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
}

.filter-preset-save-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.filter-preset-save-row input {
  width: 100%;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--text);
  background: var(--surface);
}

.filter-preset-save-row button {
  padding: 0 13px;
  border: 1px solid var(--cobalt);
  border-radius: 5px;
  color: #fff;
  background: var(--cobalt);
  font-size: 0.68rem;
  font-weight: 700;
}

.filter-preset-help,
.filter-preset-empty {
  margin: 8px 0 0;
  color: var(--faint);
  font-size: 0.62rem;
}

.filter-preset-list {
  display: grid;
  gap: 5px;
  max-height: 260px;
  margin-top: 10px;
  overflow-y: auto;
}

.filter-preset-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  gap: 5px;
}

.filter-preset-activate {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--text);
  background: var(--surface);
  text-align: left;
}

.filter-preset-activate:hover {
  border-color: var(--cobalt);
}

.filter-preset-activate strong,
.filter-preset-activate small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-preset-activate strong {
  font-size: 0.7rem;
}

.filter-preset-activate small {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.56rem;
}

.filter-preset-delete {
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--faint);
  background: transparent;
  font-size: 1rem;
}

.filter-preset-delete:hover {
  border-color: color-mix(in srgb, var(--risk) 35%, var(--line));
  color: var(--risk);
  background: var(--risk-soft);
}

.filter-bar-metrics {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.filter-bar-chips {
  display: grid;
  gap: 10px;
  padding: 13px 16px 12px;
}

#filters-form {
  padding: 0;
}

.metric-filter {
  position: relative;
}

.metric-filter-trigger {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--text);
  background: var(--surface-raised);
  font-size: 0.7rem;
  font-weight: 650;
}

.metric-filter-trigger:hover {
  border-color: var(--line-strong);
}

.metric-filter-trigger.has-selection,
.metric-filter-trigger[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--cobalt) 48%, var(--line));
}

.metric-filter-trigger.has-selection .metric-filter-trigger-label::after {
  content: ":";
}

.metric-filter-trigger-selected {
  overflow: hidden;
  color: var(--cobalt);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-filter-trigger svg {
  width: 12px;
  height: 12px;
  color: var(--faint);
  transition: transform 140ms ease;
}

.metric-filter-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.metric-filter-panel {
  position: absolute;
  z-index: 37;
  top: calc(100% + 7px);
  left: 0;
  width: min(280px, calc(100vw - 32px));
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
}

.metric-filter-fields {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.deployment-loop-policy-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.deployment-loop-policy-fields[hidden] {
  display: none;
}

.metric-filter-fields label {
  display: grid;
  gap: 5px;
  margin: 0;
}

.metric-filter-fields label > span:first-child {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 650;
}

.metric-filter-help {
  margin: -4px 12px 12px;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.45;
}

.metric-filter-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--surface-hover);
}

.metric-filter-actions button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--text);
  background: transparent;
  font-size: 0.7rem;
  font-weight: 650;
}

.metric-filter-actions button:hover,
.metric-filter-actions button:focus-visible {
  border-color: var(--cobalt);
  color: var(--cobalt);
  background: color-mix(in srgb, var(--cobalt) 8%, transparent);
}

.metric-filter-actions [data-metric-apply] {
  border-color: var(--cobalt);
  color: #fff;
  background: var(--cobalt);
}

.metric-filter-actions [data-metric-apply]:hover,
.metric-filter-actions [data-metric-apply]:focus-visible {
  color: #fff;
  background: color-mix(in srgb, var(--cobalt) 86%, white);
}

/* Deposit/equity sizing recomputes every row in the table rather than
 * narrowing them, so it doesn't live in the popover-filter row like a normal
 * range filter — it's pinned open, full width, first in the metrics row. */
.metric-filter[data-always-open] {
  order: -1;
  flex: 1 1 100%;
  margin: 0 0 10px;
}

.metric-filter[data-always-open] .metric-filter-trigger {
  display: none;
}

.metric-filter[data-always-open] .metric-filter-panel {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-end;
  position: static;
  width: 100%;
  overflow: visible;
  gap: 10px 18px;
  box-shadow: none;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-subtle);
}

/* Both wrapper divs disappear from layout; their field/label children
 * become direct items of the panel's single flex row, wrapping only when
 * the viewport is too narrow to fit everything on one line. */
.metric-filter[data-always-open] .metric-filter-fields,
.metric-filter[data-always-open] .deployment-loop-policy-fields {
  display: contents;
}

.metric-filter[data-always-open] .metric-filter-help {
  flex-basis: 100%;
  order: 1;
  margin: 2px 0 0;
}

.metric-filter[data-always-open] .metric-filter-help:empty {
  display: none;
}

.metric-filter[data-always-open] .metric-filter-actions {
  display: flex;
  flex: 0 0 auto;
  /* Match the field inputs' own box height so this wrapper aligns bottom-
   * to-bottom with them via the panel's `align-items: flex-end`, then
   * center the short "Clear" text inside that same band — otherwise a
   * bottom-aligned, much-shorter text node visually sits low and detached
   * from the input row instead of level with it. */
  height: 34px;
  align-items: center;
  gap: 8px;
  padding: 0;
  border-top: 0;
  background: none;
}

.metric-filter[data-always-open] [data-metric-clear] {
  min-width: 0;
  height: 34px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--text);
  background: transparent;
  font-size: 0.7rem;
  font-weight: 650;
}

.metric-filter[data-always-open] [data-metric-clear]:hover,
.metric-filter[data-always-open] [data-metric-clear]:focus-visible {
  border-color: var(--cobalt);
  color: var(--cobalt);
  background: color-mix(in srgb, var(--cobalt) 8%, transparent);
}

.metric-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  color: var(--cobalt);
  background: var(--cobalt-soft);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
}

.custom-filter-panel {
  width: min(286px, calc(100vw - 32px));
}

.custom-filter-panel select,
.custom-filter-panel .yam-select,
.custom-filter-panel .yam-select-trigger {
  width: 100%;
  height: 34px;
  min-height: 34px;
  font-size: 0.74rem;
}

.custom-filter-rules {
  display: grid;
  gap: 6px;
  margin: 12px 12px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.custom-filter-rule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
  padding: 0 4px 0 9px;
  border: 1px solid color-mix(in srgb, var(--cobalt) 30%, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--cobalt) 7%, transparent);
}

.custom-filter-rule-label {
  overflow: hidden;
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-filter-rule-remove {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 5px;
  color: var(--faint);
  background: transparent;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
}

.custom-filter-rule-remove:hover,
.custom-filter-rule-remove:focus-visible {
  color: var(--negative);
  background: color-mix(in srgb, var(--negative) 12%, transparent);
}

.filter-group {
  margin-bottom: 13px;
}

.filter-group label,
fieldset legend,
.paired-inputs label > span:first-child,
.stacked-inputs label > span:first-child {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.filter-bar .filter-group label {
  margin-bottom: 4px;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  text-transform: none;
}

input,
select,
.yam-select-trigger {
  width: 100%;
  min-width: 0;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 4px;
  outline: none;
  background: var(--surface-raised);
  font-size: 0.76rem;
}

input:hover,
select:hover,
.yam-select-trigger:hover {
  border-color: var(--line-strong);
}

input:focus,
select:focus,
.yam-select-trigger:focus-visible {
  border-color: var(--cobalt);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cobalt) 12%, transparent);
}

/* Text-like fields already signal focus with a cobalt border + soft shadow
   (or via their .number-control / .search-control wrapper). The global
   :focus-visible outline doubled that up into a heavy ring. */
input:where(
    [type="text"],
    [type="search"],
    [type="number"],
    [type="email"],
    [type="url"],
    [type="password"]
  ):focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
}

select {
  padding: 0 27px 0 9px;
  text-overflow: ellipsis;
}

input {
  padding: 0 9px;
}

input::placeholder {
  color: var(--faint);
  opacity: 1;
}

.search-control {
  position: relative;
}

.search-control svg {
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 10px;
  width: 15px;
  height: 15px;
  color: var(--faint);
}

.search-control input {
  padding-left: 32px;
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 7px;
}

.filter-bar .filter-group {
  margin: 0;
}

.filter-bar .filter-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px 10px;
}

.filter-bar input,
.filter-bar select,
.filter-bar .yam-select-trigger,
.filter-bar .multiselect-trigger,
.filter-bar .number-control {
  height: 34px;
  min-height: 34px;
  font-size: 0.74rem;
}

.filter-bar .number-control input {
  height: 32px;
}

.filter-bar .search-control svg {
  top: 9px;
  width: 14px;
  height: 14px;
}

.filter-bar .search-control input {
  padding-left: 30px;
}

.filter-bar .multiselect-trigger {
  padding: 0 8px 0 9px;
  gap: 6px;
}

.filter-bar .multiselect-panel {
  width: max(100%, 240px);
  min-width: 220px;
}

.multiselect {
  position: relative;
}

.multiselect-trigger {
  display: grid;
  width: 100%;
  min-height: 36px;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  padding: 0 8px 0 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text);
  background: var(--surface-raised);
  font-size: 0.76rem;
  text-align: left;
}

.multiselect-trigger:hover {
  border-color: var(--line-strong);
}

.multiselect-trigger[aria-expanded="true"] {
  border-color: var(--cobalt);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cobalt) 12%, transparent);
}

.multiselect-trigger.has-selection {
  border-color: color-mix(in srgb, var(--cobalt) 42%, var(--line));
}

.multiselect-summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multiselect-count {
  min-width: 20px;
  padding: 2px 5px;
  border-radius: 999px;
  color: var(--cobalt);
  background: var(--cobalt-soft);
  font-family: var(--font-mono);
  font-size: 0.61rem;
  font-weight: 800;
  text-align: center;
}

.multiselect-trigger > svg {
  width: 13px;
  height: 13px;
  color: var(--faint);
  transition: transform 140ms ease;
}

.multiselect-trigger[aria-expanded="true"] > svg {
  transform: rotate(180deg);
}

.multiselect-panel {
  position: absolute;
  z-index: 35;
  top: calc(100% + 7px);
  right: 0;
  left: 0;
  min-width: 280px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
}

.multiselect-search {
  margin: 12px 12px 8px;
}

.multiselect-search input {
  height: 34px;
}

.multiselect-options {
  max-height: 238px;
  overflow-y: auto;
  padding: 2px 6px 6px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.filter-group .multiselect-option {
  /* Anchor the visually hidden checkbox to its own row; otherwise focusing
     it scrolls the option list back to the top on every click. */
  position: relative;
  display: grid;
  min-height: 38px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 5px 7px;
  border-radius: 4px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}

.filter-group .multiselect-option-toggle {
  display: grid;
  min-width: 0;
  align-items: center;
  grid-template-columns: 18px 26px minmax(0, 1fr) auto;
  gap: 8px;
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.multiselect-option:hover,
.multiselect-option:has(input:focus-visible) {
  background: var(--surface-hover);
}

.multiselect-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.multiselect-checkbox {
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--surface);
}

.multiselect-checkbox::after {
  width: 8px;
  height: 4px;
  border: solid currentColor;
  border-width: 0 0 2px 2px;
  content: "";
  opacity: 0;
  transform: translateY(-1px) rotate(-45deg);
}

.multiselect-option input:checked + .multiselect-checkbox {
  border-color: var(--cobalt);
  color: #fff;
  background: var(--cobalt);
}

.multiselect-option input:checked + .multiselect-checkbox::after {
  opacity: 1;
}

.multiselect-option input:focus-visible + .multiselect-checkbox {
  outline: 3px solid color-mix(in srgb, var(--focus) 35%, transparent);
  outline-offset: 2px;
}

.multiselect-option-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.facet-option-icon {
  position: relative;
  display: grid;
  width: 26px;
  height: 26px;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  background: var(--surface-subtle);
  font-family: var(--font-mono);
  font-size: 0.47rem;
  font-weight: 800;
}

.facet-option-icon img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Logos keep their own transparency; initials hide once one loads. */
  background: transparent;
}

.multiselect-selected-icons {
  display: flex;
  min-width: 20px;
  align-items: center;
}

.multiselect-selected-icons .facet-option-icon {
  width: 20px;
  height: 20px;
  font-size: 0.4rem;
}

.multiselect-selected-icons .facet-option-icon + .facet-option-icon {
  margin-left: -6px;
}

.multiselect-option small {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.59rem;
}

.multiselect-only {
  min-height: 28px;
  padding: 0 6px;
  border: 0;
  border-radius: 4px;
  color: var(--faint);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 800;
}

.multiselect-only:hover,
.multiselect-only:focus-visible {
  color: var(--cobalt);
  background: var(--cobalt-soft);
}

.multiselect-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--surface-hover);
}

.multiselect-status {
  grid-column: 1 / -1;
  order: 0;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.58rem;
}

.multiselect-clear,
.multiselect-all {
  order: 2;
  min-height: 34px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--text);
  background: transparent;
  font-size: 0.7rem;
  font-weight: 650;
}

.multiselect-clear:hover:not(:disabled),
.multiselect-clear:focus-visible:not(:disabled),
.multiselect-all:hover:not(:disabled),
.multiselect-all:focus-visible:not(:disabled) {
  border-color: var(--cobalt);
  color: var(--cobalt);
  background: color-mix(in srgb, var(--cobalt) 8%, transparent);
}

.multiselect-more {
  grid-column: 1 / -1;
  order: 1;
  min-height: 32px;
  margin: 0;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--cobalt);
  background: transparent;
  font-size: 0.67rem;
  font-weight: 650;
}

.multiselect-more:hover:not(:disabled) {
  background: var(--cobalt-soft);
}

.multiselect-all[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--cobalt) 55%, var(--line-strong));
  color: var(--cobalt);
  background: transparent;
}

.asset-group-filter {
  padding-bottom: 12px;
}

.asset-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.asset-groups button {
  display: grid;
  min-width: 0;
  min-height: 32px;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  background: var(--surface-raised);
  font-size: 0.64rem;
  font-weight: 700;
  text-align: left;
}

.asset-groups button > span {
  min-width: 0;
  line-height: 1.2;
}

.asset-groups button:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

.asset-groups button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--cobalt) 45%, var(--line));
  color: var(--cobalt);
  background: var(--cobalt-soft);
}

.asset-groups button small {
  justify-self: end;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.52rem;
  font-weight: 600;
  white-space: nowrap;
}

.asset-groups button[aria-pressed="true"] small {
  color: var(--cobalt);
}

.more-filters {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.more-filters > summary {
  display: inline-flex;
  width: auto;
  min-height: 34px;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--text);
  background: var(--surface-raised);
  cursor: pointer;
  list-style: none;
}

.more-filters > summary::-webkit-details-marker {
  display: none;
}

.more-filters > summary:hover {
  border-color: var(--line-strong);
  color: var(--text);
  background: var(--surface-hover);
}

.more-filters > summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 35%, transparent);
  outline-offset: 2px;
}

.more-filters-summary-main {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.more-filters-summary-main strong {
  color: inherit;
  font-size: 0.7rem;
  font-weight: 650;
  white-space: nowrap;
}

.more-filters-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  color: var(--cobalt);
  background: var(--cobalt-soft);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  white-space: pre;
}

.more-filters-count::after {
  content: " active";
}

.more-filters-chevron {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  color: var(--faint);
  transition: transform 140ms ease;
}

.more-filters[open] .more-filters-chevron {
  transform: rotate(180deg);
}

.more-filters-panel {
  position: absolute;
  z-index: 37;
  top: calc(100% + 7px);
  right: 0;
  display: grid;
  width: min(380px, calc(100vw - 32px));
  max-height: min(520px, calc(100vh - 96px));
  overflow-y: auto;
  grid-template-columns: 1fr;
  gap: 7px;
  margin-top: 0;
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
}

.more-filters-panel .check-filter {
  margin: 0;
  padding: 8px;
  gap: 8px;
}

.more-filters-panel .check-filter strong {
  font-size: 0.68rem;
}

.more-filters-panel .check-filter small {
  font-size: 0.58rem;
}

.check-filter {
  display: grid;
  margin: 17px 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 5px;
  cursor: pointer;
  grid-template-columns: auto 1fr;
  gap: 1px 9px;
}

.check-filter:hover {
  background: var(--surface-hover);
}

.check-filter-risk {
  border-color: color-mix(in srgb, var(--risk) 38%, var(--line));
  background: color-mix(in srgb, var(--risk-soft) 32%, var(--surface));
}

.check-filter-risk strong {
  color: var(--risk);
}

.check-filter input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.check-box {
  display: grid;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  color: #fff;
}

.check-box svg {
  width: 12px;
  opacity: 0;
  stroke-width: 2.5;
}

.check-filter input:checked + .check-box {
  border-color: var(--cobalt);
  background: var(--cobalt);
}

.check-filter-risk input:checked + .check-box {
  border-color: var(--risk);
  background: var(--risk);
}

/* Informational only — the headline number is a best-effort current-rate
   estimate rather than an authoritative on-chain curve. Rows still sort
   purely by value; this differentiates estimate rows in place instead of
   demoting them to the bottom of the list. Declared before the risk-state
   rules below so bad-debt/unsafe-market accents win when both apply. */
.is-quality-estimate {
  background: color-mix(in srgb, var(--amber-soft) 20%, var(--surface)) !important;
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--amber) 50%, transparent);
}

.has-bad-debt {
  background: color-mix(in srgb, var(--risk-soft) 68%, var(--surface)) !important;
  box-shadow: inset 4px 0 0 var(--risk);
}

.has-unsafe-market {
  background: color-mix(in srgb, var(--amber-soft) 68%, var(--surface)) !important;
  box-shadow: inset 4px 0 0 var(--amber);
}

/* Softer than unsafe: left accent only, light wash. */
.has-zero-utilization {
  background: color-mix(in srgb, var(--amber-soft) 34%, var(--surface)) !important;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--amber) 78%, transparent);
}

.has-unsafe-market.has-zero-utilization {
  /* Stronger status accents win when stacked. */
  box-shadow: inset 4px 0 0 var(--amber);
}

.has-rate-artifact {
  background: color-mix(in srgb, var(--amber-soft) 22%, var(--surface)) !important;
}

.rate-artifact-badge {
  display: inline-flex;
  width: max-content;
  margin: 5px 0 0 42px;
  padding: 2px 5px;
  border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
  border-radius: 3px;
  color: var(--amber);
  background: var(--amber-soft);
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.card-primary-value .rate-artifact-badge {
  margin: 4px 0 0;
}

/* Informational, not a warning: the yield is real, but elevated because
   the collateral asset's utilization crossed into steep-curve territory
   and may ease back down. Uses --tide rather than --amber/--risk to read
   as "explained", distinct from the rate-artifact/bad-debt/unsafe-market
   caution accents above. */
.has-utilization-yield-spike {
  background: color-mix(in srgb, var(--tide-soft) 55%, var(--surface)) !important;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--tide) 70%, transparent);
}

.utilization-yield-spike-badge {
  display: inline-flex;
  width: max-content;
  margin: 5px 0 0 42px;
  padding: 2px 5px;
  border: 1px solid color-mix(in srgb, var(--tide) 45%, transparent);
  border-radius: 3px;
  color: var(--tide);
  background: var(--tide-soft);
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.card-primary-value .utilization-yield-spike-badge {
  margin: 4px 0 0;
}

.has-bad-debt.has-zero-utilization {
  box-shadow: inset 4px 0 0 var(--risk);
}

.bad-debt-badge,
.unsafe-market-badge,
.zero-util-badge {
  display: inline-flex;
  margin-left: 7px;
  padding: 2px 5px;
  border: 1px solid color-mix(in srgb, var(--risk) 50%, transparent);
  border-radius: 3px;
  color: var(--risk);
  background: var(--risk-soft);
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

.unsafe-market-badge {
  border-color: color-mix(in srgb, var(--amber) 50%, transparent);
  color: var(--amber);
  background: var(--amber-soft);
}

td.market-flow-cell.is-inflow {
  color: var(--positive);
}

td.market-flow-cell.is-outflow {
  color: var(--negative);
}

.vault-allocation-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-raised) 45%, transparent);
}

.vault-allocation-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.vault-allocation-table th {
  position: static;
  height: auto;
  padding: 10px 14px;
  font-size: 0.62rem;
}

.vault-allocation-table th:not(.is-numeric) {
  width: 42%;
}

.vault-allocation-table th.is-numeric {
  width: 14.5%;
}

.vault-allocation-table th,
.vault-allocation-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  height: auto;
  vertical-align: middle;
}

.vault-allocation-table tbody tr:last-child td {
  border-bottom: 0;
}

.vault-allocation-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--surface-subtle) 70%, transparent);
}

.vault-allocation-table th.is-numeric,
.vault-allocation-table td.is-numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.vault-allocation-table tr.has-bad-debt td {
  color: var(--risk);
  background: color-mix(in srgb, var(--risk-soft) 55%, transparent);
}

.vault-allocation-table tr.is-inactive-allocation td {
  color: var(--faint);
}

.vault-allocation-market {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vault-allocation-pair {
  flex: 0 0 auto;
}

.vault-allocation-pair .asset-token {
  width: 26px;
  height: 26px;
  box-shadow: 0 0 0 2px var(--surface);
}

.vault-allocation-pair .asset-token + .asset-token {
  margin-left: -10px;
}

.vault-allocation-market-identity {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.vault-allocation-market-name {
  font-size: 0.92rem;
  font-weight: 650;
  white-space: nowrap;
}

.vault-allocation-lltv {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 1px 6px;
  border: 1px solid color-mix(in srgb, var(--muted) 55%, transparent);
  border-radius: 4px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-subtle) 80%, transparent);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.vault-allocation-share-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.vault-allocation-share-meter {
  display: block;
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background: var(--surface-subtle);
  overflow: hidden;
}

.vault-allocation-share-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--cobalt);
}

.exit-friction-metrics {
  margin-top: 10px;
}

.zero-util-badge {
  margin-left: 0;
  border-color: color-mix(in srgb, var(--amber) 42%, transparent);
  color: color-mix(in srgb, var(--amber) 88%, var(--text));
  background: color-mix(in srgb, var(--amber-soft) 72%, var(--surface));
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 650;
}

.market-meta .zero-util-badge {
  margin-left: 0;
}

.market-meta:has(.market-structure) .zero-util-badge {
  margin-left: 6px;
}

.bad-debt-alert {
  margin: 0 14px 12px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--risk) 55%, var(--line));
  border-radius: 4px;
  color: var(--risk);
  background: var(--risk-soft);
  font-size: 0.68rem;
  font-weight: 800;
}

.unsafe-market-alert {
  margin: 0 14px 12px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--amber) 55%, var(--line));
  border-radius: 4px;
  color: var(--amber);
  background: var(--amber-soft);
  font-size: 0.68rem;
  font-weight: 800;
}

.check-filter input:checked + .check-box svg {
  opacity: 1;
}

.check-filter input:focus-visible + .check-box {
  outline: 3px solid color-mix(in srgb, var(--focus) 42%, transparent);
  outline-offset: 2px;
}

.check-filter strong,
.check-filter small {
  display: block;
}

.check-filter strong {
  font-size: 0.74rem;
}

.check-filter small {
  margin-top: 1px;
  color: var(--faint);
  font-size: 0.65rem;
}

fieldset {
  padding: 14px 0 3px;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
}

fieldset legend {
  padding: 0 7px 0 0;
  color: var(--text);
}

.paired-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.stacked-inputs label,
.paired-inputs label {
  display: block;
  min-width: 0;
  margin-bottom: 10px;
}

.paired-inputs label > span:first-child,
.stacked-inputs label > span:first-child {
  font-size: 0.54rem;
  letter-spacing: 0.025em;
}

.number-control {
  display: flex;
  align-items: center;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--faint);
  background: var(--surface-raised);
  font-family: var(--font-mono);
  font-size: 0.67rem;
}

.number-control:focus-within {
  border-color: var(--cobalt);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cobalt) 12%, transparent);
}

.number-control input {
  height: 34px;
  padding-right: 2px;
  border: 0;
  background: transparent;
  box-shadow: none;
  -moz-appearance: textfield;
}

.number-control input::-webkit-inner-spin-button,
.number-control input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.number-control > span {
  padding: 0 8px 0 3px;
}

.number-control-prefix > span {
  padding: 0 3px 0 8px;
}

.number-control-prefix input {
  padding-left: 2px;
}

.reset-button {
  display: inline-flex;
  width: auto;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 0;
  padding: 0 10px;
  border-radius: 4px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 750;
}

.reset-button:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

.reset-button svg {
  width: 15px;
  height: 15px;
}

.results-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.results-toolbar {
  display: flex;
  min-height: 60px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 14px 0 0;
  border-bottom: 1px solid var(--line);
}

.tabs {
  display: flex;
  align-self: stretch;
}

.tab-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 126px;
  justify-content: center;
  padding: 0 17px;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 0.76rem;
  font-weight: 750;
}

.tab-button::after {
  position: absolute;
  right: 14px;
  bottom: -1px;
  left: 14px;
  height: 2px;
  background: var(--cobalt);
  content: "";
  opacity: 0;
}

.tab-button:hover {
  color: var(--text);
}

.tab-button[aria-selected="true"] {
  color: var(--cobalt);
}

.tab-button[aria-selected="true"]::after {
  opacity: 1;
}

.tab-count {
  min-width: 26px;
  padding: 2px 6px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-subtle);
  font-family: var(--font-mono);
  font-size: 0.58rem;
}

.tab-button[aria-selected="true"] .tab-count {
  color: var(--cobalt);
  background: var(--cobalt-soft);
}

.toolbar-meta {
  justify-content: flex-end;
  gap: 16px;
}

.starred-view-toggle {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  background: var(--surface);
  font-size: 0.68rem;
  font-weight: 750;
}

.starred-view-toggle:hover,
.starred-view-toggle:focus-visible,
.starred-view-toggle[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--amber) 58%, var(--line));
  color: var(--text);
  background: color-mix(in srgb, var(--amber-soft) 70%, var(--surface));
}

.starred-view-toggle svg {
  width: 15px;
  height: 15px;
  fill: transparent;
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.starred-view-toggle[aria-pressed="true"] svg {
  color: var(--amber);
  fill: currentColor;
}

.starred-view-count {
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  color: var(--text);
  background: var(--surface-subtle);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  text-align: center;
}

.export-button {
  min-height: 30px;
  padding: 0 10px;
  border-color: var(--line);
  border-radius: 4px;
  color: var(--muted);
  background: var(--surface-raised);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 750;
  white-space: nowrap;
}

.export-button:hover:not(:disabled) {
  border-color: var(--cobalt);
  color: var(--cobalt);
}

.column-picker {
  position: relative;
}

.column-picker-trigger {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  background: var(--surface-raised);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
}

.column-picker-trigger:hover,
.column-picker-trigger:focus-visible,
.column-picker-trigger[aria-expanded="true"],
.column-picker-trigger[aria-pressed="true"] {
  border-color: var(--cobalt);
  color: var(--cobalt);
  background: color-mix(in srgb, var(--cobalt) 10%, var(--surface));
}

.column-picker-count {
  display: inline-flex;
  min-width: 1.1rem;
  height: 1.1rem;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border-radius: 999px;
  color: var(--text);
  background: var(--surface-subtle);
  font-size: 0.55rem;
  text-align: center;
}

.column-picker-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  right: 0;
  width: min(240px, calc(100vw - 24px));
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
}

.column-picker-options {
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.column-picker-option {
  /* Anchor the visually hidden checkbox to its own row; otherwise it counts as
     overflow of the panel and focusing it scrolls the panel content out of view. */
  position: relative;
  display: block;
  margin: 0;
  border-radius: 4px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.73rem;
  font-weight: 600;
}

.column-picker-option:hover,
.column-picker-option:has(input:focus-visible) {
  background: var(--surface-hover);
}

.column-picker-option-toggle {
  display: grid;
  min-height: 34px;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  cursor: pointer;
}

/* Brand marks need a column of their own; without one the logo takes the label's
   cell and the label wraps into the 18px checkbox column. Columns are pinned so
   the label stays put whether or not a source ships a logo. */
.column-picker-option-toggle-with-logo {
  grid-template-columns: 18px 14px minmax(0, 1fr);
}

.column-picker-option-toggle-with-logo .risk-source-option-logo {
  grid-column: 2;
}

.column-picker-option-toggle-with-logo .column-picker-option-label {
  grid-column: 3;
}

.column-picker-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}

.column-picker-checkbox {
  width: 14px;
  height: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--surface);
  box-shadow: inset 0 0 0 0 var(--cobalt);
}

.column-picker-option input:checked + .column-picker-checkbox {
  border-color: var(--cobalt);
  background: color-mix(in srgb, var(--cobalt) 18%, var(--surface));
  box-shadow: inset 0 0 0 3px var(--cobalt);
}

.column-picker-option input:disabled + .column-picker-checkbox {
  opacity: 0.45;
}

.column-picker-option input:disabled ~ .column-picker-option-label {
  color: var(--muted);
}

.column-picker-option-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.column-picker-footer {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 6px 8px 8px;
  border-top: 1px solid var(--line);
}

.column-picker-reset {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 750;
  cursor: pointer;
}

.column-picker-reset:hover:not(:disabled),
.column-picker-reset:focus-visible:not(:disabled) {
  border-color: var(--cobalt);
  color: var(--cobalt);
}

.column-picker-reset:disabled {
  opacity: 0.45;
  cursor: default;
}

.risk-source-picker-panel {
  min-width: 240px;
}

.risk-source-option-logo {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex: 0 0 auto;
}

.risk-source-only-rated {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  cursor: pointer;
}

.risk-source-only-rated-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.risk-source-only-rated-copy strong {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 750;
}

.risk-source-only-rated-copy small {
  color: var(--muted);
  font-size: 0.58rem;
  line-height: 1.35;
}

.risk-source-only-rated-control {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.risk-source-only-rated-control input {
  cursor: pointer;
}

.results-count {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  white-space: nowrap;
}

.page-size-control {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.61rem;
  text-transform: uppercase;
}

.page-size-label {
  cursor: pointer;
}

.page-size-trigger {
  display: inline-flex;
  min-width: 52px;
  height: 30px;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 0 6px 0 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text);
  background: var(--surface-raised);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  cursor: pointer;
}

.page-size-trigger:hover,
.page-size-trigger:focus-visible,
.page-size-trigger[aria-expanded="true"] {
  border-color: var(--cobalt);
  color: var(--cobalt);
}

.page-size-value {
  min-width: 3ch;
  overflow: visible;
  font-variant-numeric: tabular-nums;
  text-align: left;
  white-space: nowrap;
}

.page-size-trigger svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  color: var(--faint);
  transition: transform 140ms ease;
}

.page-size-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.page-size-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  right: 0;
  min-width: 100%;
  overflow: hidden;
  padding: 4px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
}

.page-size-option {
  display: flex;
  width: 100%;
  min-height: 28px;
  align-items: center;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  color: var(--text);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-variant-numeric: tabular-nums;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
}

.page-size-option:hover,
.page-size-option:focus-visible {
  background: var(--surface-hover);
}

.page-size-option[aria-selected="true"] {
  color: var(--cobalt);
  background: color-mix(in srgb, var(--cobalt) 10%, var(--surface));
}

.mobile-sort-control {
  display: none;
  align-items: center;
  gap: 6px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.61rem;
  text-transform: uppercase;
}

.mobile-sort-control select,
.mobile-sort-control .yam-select,
.mobile-sort-control .yam-select-trigger {
  width: 112px;
  height: 30px;
  min-height: 30px;
  padding-left: 7px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
}

.mobile-sort-control button {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
}

.filter-count {
  display: inline-flex;
  min-width: 17px;
  align-items: center;
  justify-content: center;
  padding: 1px 5px;
  border-radius: 999px;
  color: #fff;
  background: var(--cobalt);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 700;
}

.quick-filter-row {
  display: grid;
  min-width: 0;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.quick-filter-label {
  width: auto;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-transform: none;
}

.quick-filter-chips {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px;
}

.quick-filter-chips button {
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
  min-height: 28px;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  font-size: 0.64rem;
  font-weight: 650;
  white-space: nowrap;
}

.category-chip-logo {
  position: relative;
  display: grid;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  background: var(--surface-subtle);
  font-family: var(--font-mono);
  font-size: 0.38rem;
  font-weight: 800;
}

.category-chip-logo > span,
.category-chip-logo > img {
  grid-area: 1 / 1;
}

.category-chip-logo > img {
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 1px;
  border-radius: inherit;
  /* Logos keep their own transparency; initials hide once one loads. */
  background: transparent;
  object-fit: contain;
}

.quick-filter-chips button:hover {
  border-color: var(--line);
  color: var(--text);
  background: var(--surface-hover);
}

.quick-filter-chips button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--cobalt) 42%, var(--line));
  color: var(--cobalt);
  background: var(--cobalt-soft);
}

.quick-filter-chips small {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.53rem;
  font-weight: 600;
  opacity: 0.45;
}

.quick-filter-chips button[aria-pressed="true"] small {
  color: var(--cobalt);
  opacity: 1;
}

.attribute-filter-row {
  position: relative;
}

.attribute-multiselect {
  position: relative;
  min-width: 0;
  max-width: min(280px, 100%);
}

.attribute-multiselect-trigger {
  display: inline-flex;
  max-width: 100%;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--text);
  background: var(--surface-raised);
  font-size: 0.7rem;
  font-weight: 650;
  text-align: left;
}

.attribute-multiselect-trigger:hover,
.attribute-multiselect-trigger:focus-visible {
  border-color: var(--line-strong);
}

.attribute-multiselect-trigger:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 35%, transparent);
  outline-offset: 2px;
}

.attribute-multiselect-selected {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attribute-multiselect-trigger:not(.has-selection) .attribute-multiselect-selected {
  color: inherit;
  font-weight: inherit;
}

.attribute-multiselect-trigger.has-selection .attribute-multiselect-selected {
  color: var(--cobalt);
}

.attribute-multiselect-trigger > svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  color: var(--faint);
  transition: transform 140ms ease;
}

.attribute-multiselect-trigger[aria-expanded="true"] > svg {
  transform: rotate(180deg);
}

.attribute-multiselect-panel {
  position: absolute;
  z-index: 36;
  top: calc(100% + 4px);
  left: 0;
  width: min(320px, calc(100vw - 48px));
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
}

.attribute-multiselect-search {
  margin: 10px 10px 6px;
}

.attribute-multiselect-search input {
  height: 34px;
}

.attribute-multiselect-bulk {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 2px 12px 10px;
}

.attribute-bulk-action {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--text);
  background: transparent;
  font-size: 0.7rem;
  font-weight: 650;
}

.attribute-bulk-action:hover,
.attribute-bulk-action:focus-visible {
  border-color: var(--cobalt);
  color: var(--cobalt);
  background: color-mix(in srgb, var(--cobalt) 8%, transparent);
}

.attribute-bulk-action:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 35%, transparent);
  outline-offset: 2px;
}

.attribute-multiselect-options {
  max-height: 280px;
  overflow-y: auto;
  padding: 0 4px 6px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.attribute-option {
  display: grid;
  min-height: 40px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0 8px;
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
}

.attribute-option + .attribute-option {
  border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  border-radius: 0;
}

.attribute-option:hover,
.attribute-option:has(input:focus-visible) {
  background: var(--surface-hover);
}

.attribute-option-main {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.attribute-option-label {
  overflow: hidden;
  font-size: 0.74rem;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attribute-option-help {
  display: inline-block;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--line-strong) 90%, transparent);
  border-radius: 50%;
  color: var(--faint);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  /* Content box is 14px inside the 1px border; matching line-height keeps
     the glyph optically centered instead of drifting off-axis. */
  line-height: 14px;
  text-align: center;
  /* Span (not <button>) so it is not the label's labeled control. */
  cursor: help;
  user-select: none;
}

.attribute-option-help:hover,
.attribute-option-help:focus-visible {
  border-color: var(--cobalt);
  color: var(--cobalt);
  background: color-mix(in srgb, var(--cobalt) 10%, transparent);
}

.attribute-option-control {
  position: relative;
  display: grid;
  place-items: center;
}

.attribute-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.attribute-checkbox {
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--surface);
}

.attribute-checkbox::after {
  width: 8px;
  height: 4px;
  border: solid currentColor;
  border-width: 0 0 2px 2px;
  content: "";
  opacity: 0;
  transform: translateY(-1px) rotate(-45deg);
}

.attribute-option input:checked + .attribute-checkbox {
  border-color: var(--cobalt);
  color: #fff;
  background: var(--cobalt);
}

.attribute-option input:checked + .attribute-checkbox::after {
  opacity: 1;
}

.attribute-option input:focus-visible + .attribute-checkbox {
  outline: 3px solid color-mix(in srgb, var(--focus) 35%, transparent);
  outline-offset: 2px;
}

.attribute-option small {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.53rem;
  font-weight: 600;
  opacity: 0.55;
}

.notice-stack {
  display: grid;
  gap: 1px;
  background: var(--line);
}

.notice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 13px;
  color: var(--muted);
  background: var(--amber-soft);
  font-size: 0.69rem;
}

.notice.is-error {
  background: var(--risk-soft);
}

.notice svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--amber);
}

.notice.is-error svg {
  color: var(--risk);
}

.notice strong {
  color: var(--text);
}

.results-content {
  position: relative;
  min-height: 360px;
}

.results-content.is-updating::after {
  position: absolute;
  z-index: 3;
  top: 9px;
  right: 10px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-raised) 94%, transparent);
  box-shadow: var(--shadow-sm);
  content: "↻  Updating results";
  font-family: var(--font-mono);
  font-size: 0.59rem;
  letter-spacing: 0.01em;
  pointer-events: none;
}

.results-content.is-updating #data-view {
  opacity: 0.72;
  transition: opacity 120ms ease;
}

.loading-state {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: flex;
  min-height: 360px;
  align-items: center;
  justify-content: center;
  gap: 11px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  backdrop-filter: blur(2px);
}

.loading-mark {
  width: 15px;
  height: 15px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--cobalt);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.message-state {
  display: grid;
  min-height: 360px;
  padding: 45px 20px;
  place-items: center;
  align-content: center;
  text-align: center;
}

.state-symbol {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 15px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
}

.state-symbol-error {
  border-color: color-mix(in srgb, var(--risk) 40%, var(--line));
  color: var(--risk);
  background: var(--risk-soft);
}

.message-state h2 {
  margin-bottom: 7px;
  font-size: 1.05rem;
}

.message-state p {
  max-width: 440px;
  margin-bottom: 17px;
  color: var(--muted);
  font-size: 0.78rem;
}

.message-state button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 750;
}

/* `overflow-x: auto` unavoidably forces `overflow-y` to a non-`visible`
 * value too (CSS Overflow Module coupling rule) — that makes this element
 * the sticky positioning container for the `th` cells below. Without a
 * height cap it never scrolls internally, so a bare `position: sticky; top:
 * 0` on `th` was a no-op: the header just scrolled away with the page.
 * Capping the height and pinning the shell itself turns it into the real
 * scrolling frame the header can stick inside of. */
.table-shell {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  position: sticky;
  top: 0;
  max-height: 100vh;
  max-height: 100dvh;
  scrollbar-color: var(--line-strong) transparent;
}

.table-shell.is-column-scroll {
  scrollbar-width: thin;
}

th.is-col-hidden,
td.is-col-hidden {
  display: none;
}

th.is-col-group-start,
td.is-col-group-start {
  padding-left: 14px;
  box-shadow: inset 1px 0 0 var(--line);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  white-space: nowrap;
}

th {
  position: sticky;
  /* `.table-shell` is now `position: sticky` too (see the header-stickiness
   * fix above), which means it establishes the shared stacking context for
   * both this header row and every row's cell content. Composite asset-logo
   * stacks in the assets column set an inline `z-index` up to
   * `MAX_VISIBLE_COMPONENT_LOGOS` (4) so overlapping token icons layer
   * correctly; with headers now genuinely staying pinned while rows scroll
   * past underneath, those logos would otherwise paint on top of the
   * header once sticky actually engaged. Stay comfortably above that. */
  z-index: 5;
  top: 0;
  height: 42px;
  padding: 0 6px;
  border-bottom: 1px solid var(--line);
  color: var(--faint);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
}

/* Main markets table headers grow to fit up to two lines so multi-word
 * labels ("7D loop APY", "Unwind cost", "30D implied APR", …) wrap
 * instead of truncating. Scoped away from the exit-intel table, which
 * already manages its own auto-height, multi-row header layout. */
.table-shell:not(.exit-intel-shell) th {
  height: 50px;
  white-space: normal;
  line-height: 1.2;
  vertical-align: middle;
}

/* Column alignment contract:
 * - Identity / text (market): left
 * - Numeric metrics (APY, util, TVL, LTV, …): right + tabular-nums
 * - Oracle logos / compact badges: center (header + cells)
 */
th.cell-market,
td.cell-market {
  text-align: left;
}

th.cell-oracle,
td.cell-oracle {
  padding-left: 4px;
  padding-right: 4px;
  text-align: center;
}

th.is-numeric,
td.is-numeric,
td.number-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  /* Shared gutter so breakdown glyphs don't shift the numeric edge per row. */
  padding-right: 10px;
}

.sort-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 9px 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

th.is-numeric .sort-button {
  width: 100%;
  justify-content: flex-end;
}

.sort-button:hover,
.sort-button.is-active {
  color: var(--cobalt);
}

.sort-arrow {
  width: 12px;
  font-size: 0.72rem;
}

td {
  height: 62px;
  padding: 8px 6px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

tbody tr {
  cursor: pointer;
  transition: background-color 120ms ease;
}

tbody tr:hover {
  background: var(--surface-hover);
}

tbody tr:focus-within {
  background: var(--surface-hover);
}

tbody tr:last-child td {
  border-bottom: 0;
}

.cell-market {
  /* `table-layout: auto` (the table's default) sizes this column from its
   * own content instead of a fixed share of the table, so short names (most
   * rows) give the width back to other columns. Capped so a handful of
   * long paired/PT names can't balloon it past a reasonable share. */
  width: auto;
  min-width: 200px;
  max-width: 420px;
  white-space: normal;
}

th.cell-protocol,
td.cell-protocol,
th.cell-chain,
td.cell-chain {
  text-align: left;
}

.cell-protocol,
.cell-chain {
  width: 9%;
  min-width: 124px;
  max-width: 196px;
  white-space: nowrap;
}

th.cell-earn-type,
td.cell-earn-type {
  text-align: left;
  width: 6%;
  min-width: 84px;
  white-space: nowrap;
}

.earn-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--muted) 35%, transparent);
  border-radius: 3px;
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 9%, transparent);
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.earn-type-badge-icon {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex: none;
}

.earn-type-staking {
  border-color: color-mix(in srgb, var(--cobalt) 40%, transparent);
  color: var(--cobalt-strong);
  background: color-mix(in srgb, var(--cobalt) 10%, transparent);
}

.earn-type-savings {
  border-color: color-mix(in srgb, var(--positive) 40%, transparent);
  color: var(--positive);
  background: color-mix(in srgb, var(--positive) 10%, transparent);
}

.earn-type-vault {
  border-color: color-mix(in srgb, var(--amber) 40%, transparent);
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 10%, transparent);
}

.earn-type-isolated-market {
  border-color: color-mix(in srgb, var(--violet) 40%, transparent);
  color: var(--violet);
  background: color-mix(in srgb, var(--violet) 10%, transparent);
}

.earn-type-fixed-order {
  border-color: color-mix(in srgb, var(--sunset) 40%, transparent);
  color: var(--sunset);
  background: color-mix(in srgb, var(--sunset) 10%, transparent);
}

.earn-type-liquidity-pool {
  border-color: color-mix(in srgb, var(--sky) 40%, transparent);
  color: var(--sky);
  background: color-mix(in srgb, var(--sky) 10%, transparent);
}

.earn-type-rwa-fund {
  border-color: color-mix(in srgb, var(--leaf) 40%, transparent);
  color: var(--leaf);
  background: color-mix(in srgb, var(--leaf) 10%, transparent);
}

/* Protocol/chain read larger than the table base so the identity columns
 * scan as easily as the market name; logos keep the 20px default. */
.cell-protocol .column-entity,
.cell-chain .column-entity {
  max-width: 100%;
  font-size: 0.95rem;
}

th.cell-apy-trend,
td.cell-apy-trend,
th.cell-apy-stability,
td.cell-apy-stability {
  text-align: left;
}

th.cell-apy-trend .sort-button,
th.cell-apy-stability .sort-button {
  width: auto;
  justify-content: flex-start;
}

.cell-apy-trend {
  width: 84px;
  min-width: 78px;
  padding-left: 4px;
  padding-right: 4px;
}

.apy-trend-sparkline {
  display: block;
  overflow: visible;
}

.apy-trend-sparkline.is-up {
  color: #3ecf7a;
}

.apy-trend-sparkline.is-down {
  color: #e45d6a;
}

.apy-trend-sparkline.is-flat {
  color: #8b95a3;
}

.cell-apy-stability {
  width: 118px;
  min-width: 108px;
}

.apy-stability-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.apy-stability-badge.is-stable {
  color: #3ecf7a;
  background: color-mix(in srgb, #3ecf7a 16%, #161d27);
}

.apy-stability-badge.is-mixed {
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 16%, #161d27);
}

.apy-stability-badge.is-volatile {
  color: var(--risk);
  background: color-mix(in srgb, var(--risk) 16%, #161d27);
}

.apy-stability-rating {
  border-bottom: 1px dotted currentColor;
}

.apy-stability-score {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.market-cell {
  display: grid;
  align-items: center;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  gap: 8px;
  /* `table-layout: auto` only honors `.cell-market`'s own `max-width` as a
   * hint - once the table has leftover width to distribute (few optional
   * columns visible), it can still stretch the `<td>` past that cap. Cap
   * this inner box directly so the icon + name never actually spread out
   * past a sane width; any extra `<td>` width just becomes left-aligned
   * padding instead of stretching the content. */
  max-width: 420px;
}

.market-cell:not(:has(.market-popout-link)) {
  grid-template-columns: 28px minmax(0, 1fr);
}

.market-identity {
  display: grid;
  min-width: 0;
  align-items: center;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
}

.market-cell.has-asset-pair .market-identity {
  grid-template-columns: max-content minmax(0, 1fr);
}

.star-button {
  display: inline-grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--faint);
  background: transparent;
  line-height: 0;
  cursor: pointer;
}

.star-button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.star-button:hover,
.star-button:focus-visible {
  border-color: color-mix(in srgb, var(--amber) 45%, var(--line));
  color: var(--amber);
  background: var(--amber-soft);
}

.star-button[aria-pressed="true"] {
  color: var(--amber);
}

.star-button[disabled] {
  cursor: wait;
  opacity: 0.55;
}

.star-button svg {
  display: block;
  width: 18px;
  height: 18px;
  margin: 0;
  fill: transparent;
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.star-button[aria-pressed="true"] svg {
  fill: currentColor;
}

.alert-bell-button {
  display: inline-grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--faint);
  background: transparent;
  line-height: 0;
  cursor: pointer;
}

.alert-bell-button:hover,
.alert-bell-button:focus-visible {
  border-color: color-mix(in srgb, var(--cobalt) 45%, var(--line));
  color: var(--cobalt-strong);
  background: var(--cobalt-soft);
}

.alert-bell-button svg {
  display: block;
  width: 18px;
  height: 18px;
  margin: 0;
  fill: transparent;
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-width: 1.7;
}

.market-popout-link {
  display: inline-grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--faint);
  background: transparent;
  line-height: 0;
  text-decoration: none;
  cursor: pointer;
}

.market-popout-link:hover,
.market-popout-link:focus-visible {
  border-color: color-mix(in srgb, var(--cobalt) 45%, var(--line));
  color: var(--cobalt);
  background: color-mix(in srgb, var(--cobalt) 12%, transparent);
}

.market-popout-link svg {
  display: block;
  width: 14px;
  height: 14px;
}

.detail-header-actions > .star-button,
.detail-header-actions > .market-popout-link {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-color: var(--line);
  background: var(--surface);
}

.asset-pair {
  display: flex;
  width: max-content;
  min-width: 54px;
  height: 36px;
  align-items: center;
}

.asset-pair .asset-token {
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px var(--surface);
}

.asset-pair .asset-token + .asset-token {
  z-index: 2;
  margin-left: -12px;
}

.asset-pair .asset-token-collateral {
  border-color: color-mix(in srgb, var(--tide) 48%, var(--line));
  color: var(--tide);
  background: var(--tide-soft);
}

.asset-pair .asset-token-borrow {
  border-color: color-mix(in srgb, var(--risk) 42%, var(--line));
  color: var(--risk);
  background: var(--risk-soft);
}

.asset-pair-lend .asset-token-asset {
  z-index: 3;
  width: 36px;
  height: 36px;
  box-shadow: 0 0 0 2px var(--surface);
}

.asset-pair-lend .asset-token-collateral {
  z-index: 1;
  width: 28px;
  height: 28px;
  margin-left: -9px;
  box-shadow: 0 0 0 2px var(--surface);
}

.asset-composite .asset-token {
  width: 28px;
  height: 28px;
}

.asset-composite .asset-token + .asset-token {
  margin-left: -10px;
}

/* Composite groups nested inside a collateral/borrow pair must not inherit
   the outer pair's min-width — a two-token group is narrower than 54px, so
   the leftover minimum showed up as dead space at the group boundary. */
.asset-pair .asset-composite {
  min-width: 0;
}

/* Single tokens overlap each other, but group boundaries (composite next to
   a token or another composite) had no overlap rule and sat flush. Nestle
   them like the plain pair; z-index keeps the debt side painting on top.
   Lend pairs are excluded: their collateral tokens already tuck under the
   asset icon via .asset-pair-lend .asset-token-collateral's own margin. */
.asset-pair:not(.asset-pair-lend) > .asset-composite + .asset-token,
.asset-pair:not(.asset-pair-lend) > .asset-token + .asset-composite,
.asset-pair:not(.asset-pair-lend) > .asset-composite + .asset-composite {
  z-index: 2;
  margin-left: -8px;
}

.asset-component-overflow {
  display: grid;
  width: 28px;
  height: 28px;
  margin-left: -7px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--muted);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 800;
}

/* Circular token mark matching .entity-logo (protocol/chain columns), so
   transparent coin artwork never sits inside a visible tile. The cobalt
   initials keep the badge readable while a logo is missing or loading. */
.asset-token {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--cobalt);
  background: var(--surface-subtle);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  overflow: hidden;
}

.asset-token > span {
  grid-area: 1 / 1;
}

/* Theme-neutral inner ring so logo artwork that matches the surface (near-black
   logos in dark mode, near-white in light mode) keeps a visible edge. Drawn as
   an overlay because inset shadows on a replaced <img> paint behind its pixels. */
.asset-token:has(img)::after {
  content: "";
  position: absolute;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 26%, transparent);
  inset: 0;
  pointer-events: none;
}

.asset-token img {
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  /* Logos keep their own transparency (the inset ring above preserves an
     edge for surface-colored artwork); initials hide once a logo loads. */
  background: transparent;
  grid-area: 1 / 1;
  object-fit: cover;
}

.market-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.market-name,
.market-subline,
.market-meta .market-structure {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-name {
  display: inline-flex;
  max-width: 380px;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  font-size: 0.9rem;
  font-weight: 750;
}

.market-subline {
  display: flex;
  max-width: 380px;
  align-items: center;
  gap: 0;
  color: color-mix(in srgb, var(--faint) 88%, transparent);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.market-subline-asset {
  color: color-mix(in srgb, var(--text) 74%, var(--faint));
  font-weight: 650;
}

.market-meta {
  display: flex;
  max-width: 380px;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  color: color-mix(in srgb, var(--faint) 88%, transparent);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.market-meta .market-structure {
  min-width: 0;
  flex: 0 1 auto;
}

.market-subline .entity-label {
  gap: 4px;
  min-width: 0;
  flex: 0 1 auto;
}

.market-subline .entity-logo {
  width: 13px;
  height: 13px;
  font-size: 0.36rem;
}

.source-cell {
  max-width: 128px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entity-label {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}

.entity-label > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-logo {
  position: relative;
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  background: var(--surface-subtle);
  font-family: var(--font-mono);
  font-size: 0.42rem;
  font-weight: 800;
  text-transform: uppercase;
}

.entity-logo > span,
.entity-logo > img {
  grid-area: 1 / 1;
}

.entity-logo > img {
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  /* Logos keep their own transparency; initials hide once one loads. */
  background: transparent;
  object-fit: cover;
}

.chain-badge,
.quality-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-subtle);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
}

.quality-badge.is-good {
  border-color: color-mix(in srgb, var(--tide) 30%, var(--line));
  color: var(--tide);
  background: var(--tide-soft);
}

.quality-badge.is-warning {
  border-color: color-mix(in srgb, var(--amber) 30%, var(--line));
  color: var(--amber);
  background: var(--amber-soft);
}

.quality-badge.is-risk {
  border-color: color-mix(in srgb, var(--risk) 30%, var(--line));
  color: var(--risk);
  background: var(--risk-soft);
}

.market-name .quality-badge,
.detail-page-title .quality-badge,
.detail-section-title .quality-badge {
  margin-left: 7px;
  flex-shrink: 0;
  text-transform: none;
  letter-spacing: 0;
}

.collateral-risk-cell .collateral-risk-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.collateral-risk-cell .cell-empty {
  color: var(--ink-muted);
}

.cell-oracle {
  vertical-align: middle;
  text-align: center;
}

.cell-oracle .oracle-source-compact,
.cell-oracle .oracle-badges,
.cell-oracle .cell-empty {
  /* Keep compact oracle content centered with the header. */
  margin-inline: auto;
}

.oracle-badges {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 4px;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  line-height: 1;
}

.cell-oracle .oracle-badges {
  justify-content: center;
}

.oracle-badge,
.oracle-route .oracle-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
}

.oracle-badge.oracle-badge-logo-only {
  padding: 0;
  gap: 0;
  min-width: 0;
  justify-content: center;
}

.oracle-badge-logo,
.oracle-route .oracle-badge-logo {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  flex: 0 0 auto;
  object-fit: contain;
  display: block;
}

.oracle-badge-logo-only .oracle-badge-logo {
  width: 20px;
  height: 20px;
}

.oracle-badge-logos {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

.oracle-badge-label {
  line-height: 1;
}

/* Multi-word mechanism labels get a deterministic 2-line break (see
 * `appendWrappedHeaderLabel`) instead of relying on incidental wrapping,
 * so the oracle column stays as narrow as a single word needs. */
.oracle-badge.oracle-badge-mechanism {
  white-space: normal;
  text-align: left;
}

.oracle-badge-mechanism .oracle-badge-label {
  display: block;
  max-width: 5.5rem;
  line-height: 1.15;
}

.oracle-address-link,
.cell-oracle .oracle-address-link {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1;
  color: var(--ink-muted);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 7.25rem;
  align-self: center;
}

.oracle-address-link:hover,
.cell-oracle .oracle-address-link:hover {
  color: var(--ink);
  text-decoration: underline;
}

.cell-oracle .cell-empty {
  color: var(--ink-muted);
}

.oracle-source {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}

.oracle-source-compact {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  line-height: 1;
}

.oracle-source-compact.has-rich-tip {
  outline: none;
}

.oracle-source-compact.has-rich-tip:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cobalt) 45%, transparent);
  border-radius: 4px;
}

.oracle-pricing-summary {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--ink-muted);
  max-width: 36rem;
}

.oracle-address-line {
  margin: 0;
  font-size: 0.72rem;
}

.oracle-route {
  display: grid;
  gap: 0.35rem;
}

.oracle-route h5 {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--ink-muted);
}

.oracle-route ol {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.25rem;
}

.oracle-route li {
  font-size: 0.78rem;
  line-height: 1.35;
}

.oracle-route-role {
  font-weight: 650;
}

.oracle-route-note {
  color: var(--ink-muted);
  font-size: 0.72rem;
}

.rate-type-badge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-subtle);
  font-family: var(--font-mono);
  font-size: 0.52rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
}

.rate-type-badge.is-fixed {
  border-color: color-mix(in srgb, var(--amber) 34%, var(--line));
  color: var(--amber);
  background: var(--amber-soft);
}

.rate-type-badge.is-variable {
  border-color: color-mix(in srgb, var(--faint) 28%, var(--line));
  color: var(--muted);
  background: var(--surface-raised);
}

.rate-type-badge.is-estimate {
  border-color: color-mix(in srgb, var(--amber) 30%, var(--line));
  color: var(--amber);
  background: var(--amber-soft);
}

.rate-type-badge.is-estimate.is-modelled {
  border-color: color-mix(in srgb, var(--positive) 34%, var(--line));
  color: var(--positive);
  background: color-mix(in srgb, var(--positive) 10%, transparent);
}

.rate-type-badge.is-estimate.is-assumption {
  border-style: dashed;
  color: var(--ink-muted);
  background: var(--surface-raised);
}

.rate-type-badge.is-estimate.is-heuristic {
  border-color: color-mix(in srgb, var(--amber) 42%, var(--line));
}

.rate-apr-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.equity-current-rate {
  color: var(--ink-muted);
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
}

.equity-rate-delta {
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

.equity-rate-delta.is-favorable {
  color: var(--positive);
}

.equity-rate-delta.is-unfavorable {
  color: var(--amber);
}

.rate-apr-value {
  display: block;
}

.rate-apr-amount {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.detail-carry-node .rate-type-badge {
  margin-top: 3px;
}

.card-primary-value .rate-type-badge {
  margin-top: 4px;
}

.ltv-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.ltv-value {
  display: block;
}

.ltv-limit-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.ltv-limit-chip,
.card-metric .ltv-limit-chips {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-subtle);
  font-family: var(--font-mono);
  font-size: 0.52rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
}

.ltv-limit-chip.is-emode {
  max-width: 11.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  border-color: color-mix(in srgb, var(--cobalt) 34%, var(--line));
  color: var(--cobalt);
  background: var(--cobalt-soft);
}

.ltv-limit-chip.is-isolated,
.ltv-limit-chip.is-cap {
  border-color: color-mix(in srgb, var(--amber) 34%, var(--line));
  color: var(--amber);
  background: var(--amber-soft);
}

.ltv-limit-chip.is-morpho-lltv {
  border-color: color-mix(in srgb, var(--ink-muted) 28%, var(--line));
  color: var(--ink-muted);
  background: color-mix(in srgb, var(--ink-muted) 8%, transparent);
}

.ltv-limit-chip.is-amm-safe {
  border-color: color-mix(in srgb, var(--positive) 34%, var(--line));
  color: var(--positive);
  background: color-mix(in srgb, var(--positive) 10%, transparent);
}

.card-metric .ltv-limit-chips {
  margin-top: 4px;
}

.borrow-cap-chips {
  margin-top: 4px;
}

.detail-opening-limits-section {
  margin-bottom: 12px;
}

.detail-opening-limits.is-compact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 4px 18px;
}

.detail-opening-limits.is-compact .detail-metric {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.detail-opening-limits.is-compact .detail-metric dt {
  margin: 0;
}

.detail-opening-limits.is-compact .detail-metric dd {
  margin: 0;
  font-size: 0.82rem;
  text-align: right;
}

.detail-opening-limits-section .pendle-amm-gauge {
  margin-top: 8px;
}

.pendle-amm-details {
  margin-top: 2px;
}

.pendle-amm-details > summary {
  width: fit-content;
  padding: 4px 0 6px;
  color: var(--cobalt);
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 750;
}

.pendle-amm-details[open] > summary {
  padding-bottom: 10px;
}

.pendle-amm-gauge {
  display: grid;
  gap: 7px;
  margin: 2px 0 8px;
}

.pendle-amm-gauge-track {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: var(--surface-subtle);
  overflow: hidden;
}

.pendle-amm-gauge-segment {
  position: absolute;
  top: 0;
  bottom: 0;
}

.pendle-amm-gauge-segment.is-hold {
  background: color-mix(in srgb, var(--positive) 62%, var(--surface-subtle));
}

.pendle-amm-gauge-segment.is-risk {
  background: color-mix(in srgb, var(--risk) 58%, var(--surface-subtle));
}

.pendle-amm-gauge-segment.is-liquidated {
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--risk) 45%, transparent) 0 4px,
    transparent 4px 8px
  );
}

.pendle-amm-gauge-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--risk);
}

.pendle-amm-gauge-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: var(--muted);
  font-size: 0.7rem;
}

.pendle-amm-gauge-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pendle-amm-gauge-legend-item::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--surface-subtle);
}

.pendle-amm-gauge-legend-item.is-hold::before {
  background: color-mix(in srgb, var(--positive) 62%, var(--surface-subtle));
}

.pendle-amm-gauge-legend-item.is-risk::before {
  background: color-mix(in srgb, var(--risk) 58%, var(--surface-subtle));
}

.pendle-amm-expanded {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
}

.pendle-amm-expanded-intro {
  display: grid;
  gap: 4px;
}

.pendle-amm-expanded-intro h4 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.pendle-amm-expanded-intro p {
  max-width: 58rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.5;
}

.pendle-amm-hero {
  margin: 0;
}

.pendle-amm-hero-cards {
  display: grid;
  grid-template-columns: minmax(180px, 1.25fr) repeat(4, minmax(120px, 1fr));
  gap: 8px;
}

.pendle-amm-metric-card {
  display: flex;
  min-width: 0;
  min-height: 82px;
  flex-direction: column;
  justify-content: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface-raised) 58%, transparent);
}

.pendle-amm-metric-card dt {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  line-height: 1.25;
  text-transform: uppercase;
}

.pendle-amm-metric-card dd {
  margin: 0;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.pendle-amm-metric-card small {
  display: block;
  margin-top: 5px;
  color: var(--faint);
  font-size: 0.63rem;
  line-height: 1.35;
}

.pendle-amm-metric-card.is-primary {
  border-color: color-mix(in srgb, var(--positive) 58%, var(--line));
  background: color-mix(in srgb, var(--positive) 8%, var(--surface));
}

.pendle-amm-metric-card.is-primary dd {
  color: var(--positive);
  font-size: 1.55rem;
}

.pendle-amm-metric-card.is-live dd {
  color: var(--amber);
}

.pendle-amm-metric-card.is-risk dd {
  color: var(--risk);
}

.pendle-amm-boundary-note,
.pendle-amm-worst-caption {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.5;
}

.pendle-amm-boundary-note {
  padding: 8px 10px;
  border-left: 2px solid var(--positive);
  background: color-mix(in srgb, var(--positive) 4%, transparent);
}

.pendle-amm-worst-case {
  display: grid;
  gap: 9px;
  padding-top: 2px;
}

.pendle-amm-subheading {
  margin: 0;
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.pendle-amm-worst-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(240px, 0.8fr);
  gap: 8px;
  align-items: stretch;
}

.pendle-amm-ledger-wrap {
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface-raised) 48%, transparent);
}

.pendle-amm-ledger {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}

.pendle-amm-ledger th {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--faint);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-align: left;
  text-transform: uppercase;
}

.pendle-amm-ledger th:nth-child(3),
.pendle-amm-ledger th:nth-child(4) {
  text-align: right;
}

.pendle-amm-ledger td {
  padding: 8px 10px;
  border-top: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  vertical-align: middle;
}

.pendle-amm-ledger tbody tr:first-child td {
  border-top: 0;
}

.pendle-amm-ledger-step {
  width: 28px;
  color: var(--positive);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
}

.pendle-amm-ledger-title {
  display: block;
  color: var(--text);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.35;
}

.pendle-amm-ledger-note {
  display: block;
  margin-top: 2px;
  color: var(--faint);
  font-size: 0.62rem;
  line-height: 1.35;
}

.pendle-amm-ledger-delta {
  width: 72px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.69rem;
  text-align: right;
  white-space: nowrap;
}

.pendle-amm-ledger-delta.is-down {
  color: var(--risk);
}

.pendle-amm-ledger-price {
  width: 88px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.pendle-amm-worst-strip {
  display: grid;
  gap: 8px;
  margin: 0;
}

.pendle-amm-worst-strip .pendle-amm-metric-card {
  min-height: 0;
  padding: 9px 10px;
}

.pendle-amm-worst-strip .pendle-amm-metric-card dd {
  font-size: 0.88rem;
}

.pendle-amm-worst-strip .pendle-amm-metric-card.is-primary dd {
  font-size: 1rem;
}

.pendle-amm-floor-chart {
  min-height: 0;
}

.pendle-amm-floor-chart .detail-chart-header {
  margin-bottom: 8px;
}

.pendle-amm-floor-chart .pendle-amm-curve-legend {
  margin: 0 0 10px;
}

.pendle-amm-floor-chart .detail-chart-legend-item {
  padding: 5px 8px;
}

.pendle-amm-chart-plot {
  display: block;
  width: 100%;
  height: auto;
  min-height: 260px;
  max-height: 420px;
}

.pendle-amm-floor-chart .detail-chart-hover-point.is-hold {
  stroke: var(--positive);
}

.pendle-amm-floor-chart .detail-chart-hover-point.is-live {
  stroke: var(--amber);
}

.pendle-amm-curve-grid {
  stroke: var(--line);
  stroke-width: 1;
  stroke-opacity: var(--chart-grid-opacity);
}

.pendle-amm-curve-grid.is-vertical {
  stroke-opacity: var(--chart-grid-opacity);
}

.pendle-amm-curve-hold {
  fill: none;
  stroke: var(--positive);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.25;
  vector-effect: non-scaling-stroke;
}

.pendle-amm-curve-live {
  fill: none;
  stroke: var(--amber);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.25;
  vector-effect: non-scaling-stroke;
}

.pendle-amm-curve-lltv {
  stroke: var(--risk);
  stroke-width: 1.75;
  stroke-dasharray: 7 5;
  vector-effect: non-scaling-stroke;
}

.pendle-amm-curve-label,
.pendle-amm-curve-axis-title {
  fill: var(--chart-tick-fill);
  stroke: none;
  font-family: var(--chart-tick-font);
  font-size: var(--chart-tick-size);
  font-weight: var(--chart-tick-weight);
}

.pendle-amm-curve-point {
  stroke: var(--surface);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}

.pendle-amm-curve-point.is-hold {
  fill: var(--positive);
}

.pendle-amm-curve-point.is-live {
  fill: var(--amber);
}

.pendle-amm-curve-point.is-end {
  fill: var(--risk);
}

.pendle-amm-curve-value {
  stroke: none;
  font-family: var(--font-mono);
  font-size: var(--chart-tick-size);
  font-weight: var(--chart-tick-weight);
}

.pendle-amm-curve-value.is-hold {
  fill: var(--positive);
}

.pendle-amm-curve-value.is-live {
  fill: var(--amber);
}

.pendle-amm-curve-value.is-limit {
  fill: var(--risk);
}

.pendle-amm-assumptions {
  display: grid;
  grid-template-columns: minmax(110px, 0.22fr) minmax(0, 1fr);
  gap: 14px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--positive) 3%, var(--surface-raised));
}

.pendle-amm-assumptions h4 {
  margin: 0;
  color: var(--positive);
  font-size: 0.65rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pendle-amm-assumptions ul {
  display: grid;
  gap: 3px;
  margin: 0;
  padding-left: 16px;
  color: var(--muted);
  font-size: 0.64rem;
  line-height: 1.4;
}

@media (max-width: 980px) {
  .pendle-amm-hero-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pendle-amm-hero-cards > .pendle-amm-metric-card.is-primary {
    grid-column: span 2;
  }

  .pendle-amm-worst-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pendle-amm-worst-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .pendle-amm-expanded {
    padding: 10px;
  }

  .pendle-amm-hero-cards,
  .pendle-amm-worst-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .pendle-amm-hero-cards > .pendle-amm-metric-card.is-primary {
    grid-column: auto;
  }

  .pendle-amm-chart-plot {
    min-height: 220px;
  }

  .pendle-amm-assumptions {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }
}

.emode-picker {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
}

.emode-picker-label {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.emode-category-select,
.yam-select:has(.emode-category-select) {
  width: min(100%, 28rem);
}

.emode-category-select,
.yam-select:has(.emode-category-select) .yam-select-trigger {
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.emode-variants-table-wrap {
  margin-top: 14px;
}

.emode-variants-heading {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
}

.emode-variants-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.emode-variants-table th,
.emode-variants-table td {
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.emode-variants-table th {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.emode-variants-table td.number-cell {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.emode-variants-table tbody tr {
  cursor: pointer;
}

.emode-variants-table tbody tr:hover {
  background: var(--surface-subtle);
}

.emode-variants-table tbody tr.is-active {
  background: var(--cobalt-soft);
}

.emode-variants-table tbody tr:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: -2px;
}

.emode-best-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cobalt) 34%, var(--line));
  color: var(--cobalt);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.number-cell {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.has-apy-breakdown,
.has-rich-tip {
  cursor: help;
}

.market-identity.has-rich-tip,
.market-name.has-rich-tip {
  cursor: pointer;
}

.carry-node.has-apy-breakdown,
.carry-node.has-rich-tip {
  position: relative;
}

td.number-cell.has-apy-breakdown {
  position: relative;
}

.apy-breakdown-badge {
  margin-left: 3px;
  color: var(--cobalt);
  font-size: 0.62em;
  vertical-align: super;
  line-height: 1;
}

/* Overlay the glyph in the shared numeric gutter so % / $ edges stay stable. */
td.number-cell.has-apy-breakdown > .apy-breakdown-badge {
  position: absolute;
  top: 50%;
  right: 4px;
  margin-left: 0;
  transform: translateY(-50%);
  vertical-align: unset;
}

td.number-cell.has-merkl-rate > .apy-breakdown-badge {
  top: 30%;
}

.market-merkl-rate {
  display: block;
  margin-top: 2px;
  color: var(--cobalt);
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}

.market-merkl-rate.is-restricted {
  color: var(--amber);
}

.apy-breakdown-tip {
  position: fixed;
  z-index: 90;
  min-width: 220px;
  max-width: 360px;
  max-height: min(480px, calc(50vh - 16px));
  overflow-y: auto;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
  font-size: 0.72rem;
  line-height: 1.35;
  pointer-events: auto;
}

.apy-breakdown-tip[hidden] {
  display: none;
}

/* Invisible hit-strip in the gap between trigger and tip only. */
.rich-tip-bridge {
  position: fixed;
  z-index: 89;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  pointer-events: auto;
}

.rich-tip-bridge[hidden] {
  display: none !important;
}

.apy-breakdown-tip.is-oracle-tip {
  min-width: 240px;
  max-width: 330px;
  padding: 10px 12px 11px;
}

.apy-breakdown-tip.is-utilization-tip {
  /* Keep the IRM readable while allowing the tip to shrink on narrow screens. */
  width: min(624px, calc(100vw - 24px));
  min-width: 0;
  max-width: none;
  max-height: calc(100vh - 16px);
  padding: 10px 12px 9px;
  overflow-y: auto;
}

.apy-breakdown-tip.is-asset-pair-tip {
  max-width: min(640px, calc(100vw - 24px));
  max-height: calc(100vh - 16px);
  overflow-y: auto;
}

.apy-breakdown-asset-split {
  display: grid;
  /* Left column hugs the stacked role groups; the detail pane takes every
     remaining pixel so the tip carries no dead space. */
  grid-template-columns: max-content minmax(220px, 1fr);
  gap: 8px 16px;
  align-items: start;
  min-width: 0;
}

/* Every asset pane stays mounted in the same grid cell so switching the
   hovered asset never resizes (and thus never moves) the tooltip. */
.apy-breakdown-asset-detail-stack {
  display: grid;
  min-width: 0;
}

.apy-breakdown-asset-detail-stack > .apy-breakdown-asset-detail {
  grid-area: 1 / 1;
}

.apy-breakdown-asset-detail {
  min-width: 0;
  padding-left: 12px;
  border-left: 1px solid var(--line);
}

.apy-breakdown-asset-detail.is-inactive {
  visibility: hidden;
}

.apy-breakdown-asset-detail > .apy-breakdown-line:first-child {
  padding-top: 0;
}

@media (max-width: 720px) {
  .apy-breakdown-tip.is-asset-pair-tip {
    max-width: calc(100vw - 24px);
  }

  .apy-breakdown-asset-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .apy-breakdown-asset-detail {
    padding-left: 0;
    padding-top: 8px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

.apy-breakdown-role-grid {
  /* Role groups stack (Collateral above Borrow): the pane beside them is
     tall anyway, and stacking frees width for larger asset rows. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
}

.apy-breakdown-role-col-label {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.3;
  margin-bottom: 2px;
}

.apy-breakdown-role-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 2px 0;
  font-size: 0.82rem;
}

.apy-breakdown-role-row.is-selectable {
  cursor: pointer;
  margin: 0 -4px;
  padding: 2px 4px;
  border-radius: 4px;
}

.apy-breakdown-role-row.is-selectable:hover,
.apy-breakdown-role-row.is-selected {
  background: color-mix(in srgb, var(--cobalt) 12%, transparent);
}

.apy-breakdown-role-row.is-selectable:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--cobalt) 55%, var(--line));
  outline-offset: 1px;
}

.apy-breakdown-role-symbol {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-weight: 650;
}

.apy-breakdown-role-symbol > span {
  min-width: 0;
  max-width: 18ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.apy-breakdown-role-symbol .apy-breakdown-tip-logo {
  width: 16px;
  height: 16px;
}

.apy-breakdown-role-row .apy-breakdown-value {
  white-space: nowrap;
  flex-shrink: 0;
}

.apy-breakdown-tip.is-asset-pair-tip .apy-breakdown-line.is-text-only .apy-breakdown-label,
.apy-breakdown-tip.is-asset-pair-tip
  .apy-breakdown-line.is-text-only
  .apy-breakdown-label-with-logo {
  color: var(--text);
  font-weight: 650;
}

.apy-breakdown-role-grid + .apy-breakdown-line.is-section-start {
  margin-top: 8px;
}

.utilization-tip-chart {
  width: 100%;
  min-width: 0;
  margin-top: 7px;
}

.utilization-tip-chart.is-loading,
.utilization-tip-chart.is-empty {
  margin-top: 4px;
  min-width: 0;
}

.utilization-tip-status {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.35;
}

.utilization-tip-chart .detail-irm-chart {
  /* Kill detail-panel .detail-chart min-height:280px / chrome so the tip
     collapses to the plot + legend instead of a tall empty card. */
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.utilization-tip-chart .detail-irm-legend {
  margin-top: 0;
  margin-bottom: 3px;
  gap: 6px;
}

.utilization-tip-chart .detail-chart-legend-item {
  padding: 4px 8px;
  font-size: 0.6rem;
}

.utilization-tip-chart .detail-irm-plot,
.utilization-tip-chart .detail-irm-svg {
  aspect-ratio: 20 / 7;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  max-height: none;
}

.utilization-tip-chart .detail-irm-plot .detail-uplot,
.utilization-tip-chart .detail-irm-plot .uplot {
  width: 100% !important;
  height: 100% !important;
}

.utilization-tip-chart .detail-chart-tooltip {
  font-size: 0.64rem;
}

.oracle-tip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.oracle-tip-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-weight: 700;
  color: var(--text);
}

.oracle-tip-provider-logos {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.oracle-tip-provider-logo {
  width: 14px;
  height: 14px;
  object-fit: contain;
  display: block;
}

.oracle-tip-link {
  color: var(--cobalt);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

.oracle-tip-link:hover,
.oracle-tip-link:focus-visible {
  text-decoration: underline;
}

.oracle-tip-structure {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.35;
}

.oracle-tip-simple {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 0.7rem;
  line-height: 1.4;
}

.oracle-tip-simple-summary {
  margin: 0 0 6px;
}

.oracle-tip-simple-heading {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.oracle-tip-simple-list {
  margin: 0 0 6px;
  padding: 0 0 0 1.1rem;
  display: grid;
  gap: 3px;
  list-style: disc;
}

.oracle-tip-simple-affect {
  font-weight: 700;
  white-space: nowrap;
}

.oracle-tip-simple-affect.is-affect {
  color: var(--amber);
}

.oracle-tip-simple-affect.is-no-affect {
  color: var(--positive);
}

.oracle-tip-simple-disclaimer {
  color: var(--muted);
  font-size: 0.62rem;
  font-style: italic;
}

.oracle-tip-mode-switch {
  display: inline-flex;
  align-items: stretch;
  margin: 0 0 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}

.oracle-tip-mode-button {
  min-height: 22px;
  padding: 0 9px;
  border: 0;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.oracle-tip-mode-button + .oracle-tip-mode-button {
  border-left: 1px solid var(--line);
}

.oracle-tip-mode-button:hover,
.oracle-tip-mode-button:focus-visible {
  color: var(--text);
}

.oracle-tip-mode-button.is-active,
.oracle-tip-mode-button[aria-pressed="true"] {
  color: var(--text);
  background: color-mix(in srgb, var(--cobalt-soft) 70%, var(--surface));
}

.oracle-tip-breakdown {
  min-width: 0;
}

.detail-oracle-section .oracle-tip-simple {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  font-size: 0.76rem;
}

.detail-oracle-section .oracle-tip-simple-summary {
  max-width: 92ch;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.detail-oracle-section .oracle-tip-simple-heading {
  margin-bottom: 7px;
  color: var(--faint);
}

.detail-oracle-section .oracle-tip-simple-list {
  margin: 0;
  padding: 0;
  gap: 0;
  list-style: none;
}

.detail-oracle-section .oracle-tip-simple-list li {
  position: relative;
  padding: 8px 8px 8px 22px;
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

.detail-oracle-section .oracle-tip-simple-list li::before {
  position: absolute;
  top: 13px;
  left: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  content: "";
}

.detail-oracle-section
  .oracle-tip-simple-list
  li:has(.oracle-tip-simple-affect.is-affect)::before {
  background: var(--amber);
}

.detail-oracle-section
  .oracle-tip-simple-list
  li:has(.oracle-tip-simple-affect.is-no-affect)::before {
  background: var(--positive);
}

.detail-oracle-section .oracle-tip-simple-rule {
  color: var(--text);
  font-weight: 600;
}

.detail-oracle-section .oracle-tip-simple-explanation {
  color: var(--muted);
}

.detail-oracle-section .oracle-tip-simple-disclaimer {
  margin-top: 9px;
}

.detail-oracle-section .oracle-detail-technical {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface) 48%, transparent);
}

.detail-oracle-section .oracle-detail-technical-summary {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 10px 34px 10px 12px;
  cursor: pointer;
  list-style: none;
}

.detail-oracle-section .oracle-detail-technical-summary::-webkit-details-marker {
  display: none;
}

.detail-oracle-section .oracle-detail-technical-summary::after {
  position: absolute;
  top: 50%;
  right: 13px;
  color: var(--muted);
  font-size: 1rem;
  content: "+";
  transform: translateY(-50%);
}

.detail-oracle-section
  .oracle-detail-technical[open]
  > .oracle-detail-technical-summary::after {
  content: "−";
}

.detail-oracle-section .oracle-detail-technical-title {
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 650;
}

.detail-oracle-section .oracle-detail-technical-subtitle {
  color: var(--muted);
  font-size: 0.66rem;
}

.detail-oracle-section .oracle-detail-technical-body {
  padding: 10px 12px 12px;
  border-top: 1px solid var(--line);
}

.oracle-tip-multihop {
  margin: 0 0 8px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.01em;
}

.oracle-tip-vendor-stack {
  display: grid;
  gap: 6px;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.35;
}

.oracle-tip-vendor-entry {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  color: var(--text);
  font-weight: 650;
}

.oracle-tip-vendor-entry-label {
  font-family: var(--font-mono);
}

.oracle-tip-vendor-modules-heading {
  color: var(--muted);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.oracle-tip-vendor-modules {
  margin: 0;
  padding: 0 0 0 1.1rem;
  display: grid;
  gap: 3px;
  list-style: disc;
}

.oracle-tip-vendor-module {
  color: var(--text);
}

.oracle-tip-vendor-module-name {
  font-family: var(--font-mono);
  font-weight: 600;
}

.detail-oracle-section .oracle-tip-vendor-stack {
  margin: 0 0 10px;
  font-size: 0.74rem;
}

.detail-oracle-section .oracle-tip-vendor-modules-heading {
  font-size: 0.7rem;
}

.oracle-tip-modt-stack {
  display: grid;
  gap: 6px;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.35;
}

.oracle-tip-modt-heading {
  color: var(--muted);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.oracle-tip-modt-shells {
  display: grid;
  gap: 4px;
}

.oracle-tip-modt-shell {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  color: var(--text);
}

.oracle-tip-modt-shell.is-primary .oracle-tip-modt-shell-label {
  font-weight: 650;
}

.oracle-tip-modt-shell.is-backup .oracle-tip-modt-shell-label {
  font-weight: 500;
  color: var(--muted);
}

.oracle-tip-modt-shell-label {
  font-family: var(--font-mono);
}

.oracle-tip-modt-params {
  color: var(--muted);
  font-size: 0.66rem;
}

.detail-oracle-section .oracle-tip-modt-stack {
  margin: 0 0 10px;
  font-size: 0.74rem;
}

.detail-oracle-section .oracle-tip-modt-heading {
  font-size: 0.7rem;
}

.oracle-tip-side {
  display: grid;
  gap: 5px;
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px solid var(--line);
}

.oracle-tip-side-head {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.oracle-tip-side-role {
  color: var(--muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.oracle-tip-side-symbol {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  column-gap: 6px;
  min-width: 0;
  font-weight: 650;
  color: var(--text);
}

.oracle-tip-side-symbol .apy-breakdown-tip-logo,
.oracle-tip-side-symbol .apy-breakdown-tip-logo-fallback {
  grid-column: 1;
  grid-row: 1;
}

/* White diamond marks (Dolomite ETH) need a circular field at 14px or they
   read as a naked blob instead of the header's "ETH in a circle". */
.oracle-tip-side-symbol .apy-breakdown-tip-logo {
  padding: 2px;
  box-sizing: border-box;
  object-fit: contain;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 26%, transparent);
}

.oracle-tip-side-price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text);
  justify-self: end;
}

.oracle-tip-side-summary {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.oracle-tip-side-price.is-skeleton {
  min-width: 4.5rem;
}

.oracle-tip-skeleton-bar {
  display: block;
  height: 0.7rem;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--line) 75%, transparent) 0%,
    color-mix(in srgb, var(--line-strong) 90%, transparent) 45%,
    color-mix(in srgb, var(--line) 75%, transparent) 100%
  );
  background-size: 200% 100%;
  animation: oracle-tip-shimmer 1.1s ease-in-out infinite;
}

@keyframes oracle-tip-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.oracle-tip-hop-chain {
  display: grid;
  gap: 5px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.68rem;
}

.oracle-tip-hop {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.oracle-tip-hop.is-nested {
  --oracle-hop-depth: 1;
  padding-left: calc(var(--oracle-hop-depth) * 10px);
  margin-left: 2px;
  border-left: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
}

.oracle-tip-hop.is-branch {
  border-left-style: dashed;
}

.oracle-tip-hop-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: baseline;
  min-width: 0;
}

.oracle-tip-hop-main:not(:has(.oracle-tip-link)) {
  grid-template-columns: minmax(0, 1fr);
}

.oracle-tip-hop-title {
  min-width: 0;
  color: var(--text);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.oracle-tip-hop-meta {
  grid-column: 1;
  min-width: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.oracle-tip-hop-main .oracle-tip-link {
  justify-self: end;
}

.oracle-tip-status {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.66rem;
}

.oracle-tip-status.is-muted {
  opacity: 0.9;
}

.detail-oracle-section .oracle-detail-body {
  padding: 8px 10px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
}

.detail-oracle-section .oracle-detail-body.is-oracle-detail {
  max-width: none;
}

.detail-oracle-section .oracle-tip-header {
  margin-bottom: 6px;
}

.detail-oracle-section .oracle-tip-title {
  font-size: 0.78rem;
  font-weight: 650;
}

.detail-oracle-section .oracle-detail-structure {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 0.72rem;
  line-height: 1.35;
  max-width: none;
}

.detail-oracle-section .oracle-tip-multihop {
  margin: 0 0 6px;
  font-size: 0.7rem;
}

.detail-oracle-section .oracle-tip-scanner-note {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 0.66rem;
}

.detail-oracle-section .oracle-tip-sides {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  margin-top: 8px;
}

.detail-oracle-section .oracle-tip-sides:has(> :only-child) {
  grid-template-columns: minmax(0, 1fr);
}

.detail-oracle-section .oracle-tip-sides .oracle-tip-side {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 9px 10px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface) 48%, transparent);
}

.detail-oracle-section .oracle-tip-side-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "role price"
    "symbol price";
  gap: 3px 12px;
  align-items: center;
}

.detail-oracle-section .oracle-tip-side-role {
  grid-area: role;
}

.detail-oracle-section .oracle-tip-side-symbol {
  grid-area: symbol;
  justify-self: start;
  font-size: 0.8rem;
  line-height: 1.25;
}

.detail-oracle-section .oracle-tip-side-symbol > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.detail-oracle-section .oracle-tip-side-price {
  grid-area: price;
  align-self: center;
  font-size: 0.84rem;
}

.detail-oracle-section .oracle-tip-side-summary {
  font-size: 0.7rem;
  line-height: 1.3;
}

.detail-oracle-section .oracle-tip-hop-chain {
  gap: 6px;
  font-size: 0.7rem;
}

.detail-oracle-section .oracle-tip-hop-title {
  font-size: 0.72rem;
}

.detail-oracle-section .oracle-tip-hop-meta {
  font-size: 0.64rem;
}

@media (max-width: 680px) {
  .detail-oracle-section .oracle-tip-sides {
    grid-template-columns: minmax(0, 1fr);
  }
}

.apy-breakdown-value-link {
  color: var(--cobalt);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  word-break: break-all;
  cursor: pointer;
}

.apy-breakdown-value-link:hover,
.apy-breakdown-value-link:focus-visible {
  text-decoration-thickness: 2px;
}

/* Grade tone must beat the default cobalt assessment-link color. */
.apy-breakdown-value-link.is-good,
.apy-breakdown-value.apy-breakdown-value-link.is-good {
  color: var(--tide);
}

.apy-breakdown-value-link.is-warning,
.apy-breakdown-value.apy-breakdown-value-link.is-warning {
  color: var(--amber);
}

.apy-breakdown-value-link.is-risk,
.apy-breakdown-value.apy-breakdown-value-link.is-risk {
  color: var(--risk);
}

.apy-breakdown-label-link {
  color: var(--cobalt);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  cursor: pointer;
}

.apy-breakdown-label-link:hover,
.apy-breakdown-label-link:focus-visible {
  text-decoration-thickness: 2px;
}

.apy-breakdown-label-link .apy-breakdown-label {
  color: inherit;
}

.apy-breakdown-line {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 2px 0;
}

.apy-breakdown-line.is-section-start {
  margin-top: 8px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}

.apy-breakdown-label {
  color: var(--muted);
}

.apy-breakdown-label-with-logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.apy-breakdown-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  color: var(--text);
}

.apy-breakdown-value-with-logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.apy-breakdown-tip-logo {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  /* Logos keep their own transparency; initials hide once one loads. */
  background: transparent;
}

.apy-breakdown-tip-logo-fallback {
  display: inline-grid;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text);
  background: color-mix(in srgb, var(--text) 12%, transparent);
}

.apy-breakdown-line.is-merkl .apy-breakdown-value {
  color: var(--cobalt);
}

.apy-breakdown-line.is-net .apy-breakdown-value {
  color: var(--tide);
}

.apy-breakdown-line.is-base .apy-breakdown-value {
  color: var(--tide);
}

.apy-breakdown-line.is-warning .apy-breakdown-value {
  color: var(--amber);
}

.apy-breakdown-line.is-excluded .apy-breakdown-value {
  color: var(--faint);
  font-weight: 500;
}

.apy-breakdown-line.is-text-only {
  display: block;
}

.apy-breakdown-note {
  margin: 1px 0 5px;
  color: var(--faint);
  font-size: 0.66rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

.apy-breakdown-note.is-warning {
  color: var(--amber);
}

.apy-breakdown-meta {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  white-space: normal;
  overflow-wrap: anywhere;
}

.apy-breakdown-line.is-info .apy-breakdown-value,
.apy-breakdown-line.is-warning .apy-breakdown-value {
  font-family: var(--font-mono);
}

.apy-breakdown-value.is-good,
.apy-breakdown-value.apy-breakdown-value-link.is-good {
  color: var(--tide);
}

.apy-breakdown-value.is-warning,
.apy-breakdown-value.apy-breakdown-value-link.is-warning {
  color: var(--amber);
}

.apy-breakdown-value.is-risk,
.apy-breakdown-value.apy-breakdown-value-link.is-risk {
  color: var(--risk);
}

.number-primary {
  font-weight: 750;
}

.borrow-apy-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.borrow-apy-value {
  display: block;
}

.number-cell.borrow-apy-cell .borrow-apy-value.number-negative {
  color: var(--negative);
}

.number-cell.borrow-apy-cell .borrow-apy-value.number-positive {
  color: var(--positive);
}

.number-cell.borrow-apy-cell .borrow-apy-value.number-muted {
  color: var(--muted);
}

.borrow-apy-deltas {
  display: block;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.52rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1.25;
  white-space: nowrap;
}

.borrow-apy-delta.is-favorable {
  color: var(--tide);
}

.borrow-apy-delta.is-unfavorable {
  color: var(--amber);
}

.number-positive {
  color: var(--positive);
}

.number-negative {
  color: var(--negative);
}

.number-muted {
  color: var(--muted);
}

.number-cell.is-over-kink {
  color: var(--risk);
  font-weight: 750;
}

.carry-node.borrow.is-rebate {
  color: var(--positive);
}

.delta {
  display: block;
  margin-top: 2px;
  font-size: 0.55rem;
}

.details-button {
  display: grid;
  width: 29px;
  height: 29px;
  margin-left: auto;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
}

.details-button:hover,
.details-button:focus-visible {
  border-color: var(--line);
  color: var(--cobalt);
  background: var(--surface);
}

.carry-rail {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(34px, auto) 13px minmax(34px, auto) 14px minmax(42px, auto);
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
}

.carry-node {
  display: block;
  min-width: 0;
  text-align: center;
}

.carry-node small {
  display: block;
  margin-bottom: 2px;
  color: var(--faint);
  font-size: 0.47rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.carry-node strong {
  display: block;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
}

.carry-node.supply {
  color: var(--tide);
}

.carry-node.borrow {
  color: var(--risk);
}

.carry-node.borrow.is-fixed small {
  color: var(--amber);
}

.carry-node.net {
  padding: 3px 5px;
  border-radius: 3px;
  color: var(--cobalt);
  background: var(--cobalt-soft);
  font-weight: 800;
}

.carry-operator {
  color: var(--faint);
  text-align: center;
}

.utilization-indicator {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.utilization-indicator.is-comfortable {
  color: var(--text);
}

.utilization-indicator.is-caution,
.utilization-indicator.is-suspicious {
  color: var(--amber);
}

.utilization-indicator.is-critical {
  color: var(--risk);
}

.utilization-indicator.is-unknown {
  color: var(--faint);
}

.utilization-cell.is-suspicious .metric-bar-stack {
  align-items: flex-end;
}

.card-metric strong .utilization-indicator,
.detail-metric .utilization-indicator {
  font-size: inherit;
}

/* Available / Util: value on top + thin horizontal bar underneath. */
.metric-bar-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  min-width: 4.5rem;
  max-width: 100%;
}

.metric-bar-stack .utilization-indicator,
.metric-bar-stack .metric-bar-value {
  line-height: 1.15;
}

.metric-bar-track {
  display: block;
  width: 100%;
  min-width: 4.5rem;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line-strong) 72%, var(--surface));
}

.metric-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--cobalt-strong, var(--cobalt));
}

.metric-bar-track.is-comfortable .metric-bar-fill {
  background: var(--text);
}

.metric-bar-track.is-caution .metric-bar-fill,
.metric-bar-track.is-suspicious .metric-bar-fill {
  background: var(--amber);
}

.metric-bar-track.is-suspicious {
  background: color-mix(in srgb, var(--amber) 26%, var(--surface));
}

.metric-bar-track.is-critical .metric-bar-fill {
  background: var(--risk);
}

.metric-bar-track.is-unknown .metric-bar-fill,
.metric-bar-track.is-empty .metric-bar-fill {
  background: var(--faint);
}

.utilization-cell,
.liquidity-bar-cell {
  width: 80px;
  min-width: 80px;
}

.risk-limit-cell {
  width: 58px;
  min-width: 58px;
}

.utilization-cell .metric-bar-stack,
.liquidity-bar-cell .metric-bar-stack {
  width: 100%;
}

.supply-rate-cell,
.borrow-rate-cell,
.ltv-carry-cell {
  width: 76px;
  min-width: 76px;
}

.number-cell.supply-rate-cell {
  color: var(--tide);
}

.number-cell.borrow-rate-cell.number-negative {
  color: var(--risk);
}

.number-cell.borrow-rate-cell.number-positive {
  color: var(--positive);
}

.number-cell.borrow-rate-cell.number-muted {
  color: var(--muted);
}

.number-cell.ltv-carry-cell {
  color: var(--cobalt);
  font-weight: 800;
}

.market-cards {
  display: none;
}

.pagination {
  display: flex;
  min-height: 57px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 9px 13px;
  border-top: 1px solid var(--line);
}

.pagination p,
.page-buttons span {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
}

.page-buttons {
  gap: 9px;
}

.pagination button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
}

.pagination button:not(:disabled):hover {
  border-color: var(--cobalt);
  color: var(--cobalt);
}

.pagination button svg {
  width: 13px;
  height: 13px;
}

body.is-detail-view {
  /* Slightly brighter secondary text so labels on surface cards stay readable. */
  --muted: #c4ccd8;
  --faint: #98a3b4;
}

body.is-detail-view .market-controls-bar,
body.is-detail-view .source-section,
body.is-detail-view .browser-frame {
  display: none;
}

.market-detail-page {
  padding: 14px 22px 36px;
}

.detail-page-shell {
  width: min(1120px, 100%);
  margin: 0 auto;
}

.detail-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
}

.detail-back {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 5px;
  padding: 0 10px 0 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text);
  background: var(--surface-hover);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
}

.detail-back:hover,
.detail-back:focus-visible {
  border-color: var(--cobalt);
  color: var(--cobalt);
}

.detail-back svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.detail-breadcrumb-sep {
  color: var(--faint);
}

.detail-breadcrumb-kind {
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.detail-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.detail-page-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 6px;
  font-size: clamp(1.5rem, 2.8vw, 2.05rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.detail-alerts {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
}

.detail-alerts[hidden] {
  display: none;
}

.detail-alert {
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 6px;
  background: var(--surface-hover);
  color: var(--text);
  font-size: 0.7rem;
  line-height: 1.4;
}

.detail-alert.is-warning {
  border-left-color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 40%, var(--line));
  color: var(--text);
  background: color-mix(in srgb, var(--amber) 14%, var(--surface));
}

.detail-alert.is-danger {
  border-left-color: var(--risk);
  border-color: color-mix(in srgb, var(--risk) 40%, var(--line));
  color: var(--text);
  background: color-mix(in srgb, var(--risk) 14%, var(--surface));
}

.detail-strip-caption {
  margin: 0 0 -6px 2px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.detail-inline-flag {
  margin: 0;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  background: var(--surface);
  font-size: 0.72rem;
  line-height: 1.4;
  width: fit-content;
  max-width: 100%;
}

.detail-inline-flag.is-warning {
  border-color: color-mix(in srgb, var(--amber) 45%, var(--line));
  color: color-mix(in srgb, var(--amber) 80%, var(--text));
  background: color-mix(in srgb, var(--amber-soft) 70%, var(--surface));
}

.detail-alert.is-info {
  border-left-color: var(--cobalt);
  color: var(--muted);
  background: color-mix(in srgb, var(--cobalt-soft) 55%, var(--surface-hover));
}

.detail-secondary {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.detail-secondary:empty {
  display: none;
}

.detail-page-title-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.detail-page-title-text a.related-lend-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, var(--cobalt) 45%, transparent);
}

.detail-page-title-text a.related-lend-link:hover,
.detail-page-title-text a.related-lend-link:focus-visible {
  color: var(--cobalt);
  border-bottom-color: var(--cobalt);
}

.detail-title-logo {
  flex: 0 0 auto;
}

.detail-title-logo.asset-pair {
  height: 36px;
  min-width: 54px;
}

.detail-title-logo.asset-pair .asset-token {
  width: 36px;
  height: 36px;
}

.detail-title-logo.asset-pair .asset-token + .asset-token,
.detail-title-logo.asset-pair a.related-lend-link + a.related-lend-link,
.detail-title-logo.asset-pair a.related-lend-link + .asset-token,
.detail-title-logo.asset-pair .asset-token + a.related-lend-link {
  margin-left: -12px;
}

.detail-title-logo.asset-pair a.related-lend-link {
  display: inline-flex;
  color: inherit;
  text-decoration: none;
  border-radius: 999px;
  line-height: 0;
}

.detail-title-logo.asset-pair a.related-lend-link:hover,
.detail-title-logo.asset-pair a.related-lend-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--cobalt) 70%, transparent);
  outline-offset: 1px;
  position: relative;
  z-index: 2;
}

.detail-title-logo.asset-token {
  width: 36px;
  height: 36px;
}

.detail-page-meta {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.65rem;
}

.detail-page-meta .dialog-entity {
  max-width: 180px;
}

.detail-page-meta .entity-logo {
  width: 15px;
  height: 15px;
  font-size: 0.38rem;
}

.detail-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  gap: 7px;
  max-width: none;
}

.detail-header-actions .detail-action-links {
  flex-wrap: nowrap;
}

.detail-header-actions .detail-action-note,
.detail-header-actions .detail-link-unavailable {
  display: none;
}

.detail-page-body {
  display: grid;
  gap: 12px;
}

.detail-summary-slot {
  margin-bottom: 16px;
}

.detail-summary-slot:empty {
  display: none;
  margin-bottom: 0;
}

.detail-page-footer {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.detail-tabs {
  display: flex;
  gap: 2px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--line);
}

.detail-tab-button {
  position: relative;
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.detail-tab-button[aria-selected="true"] {
  color: var(--text);
  border-bottom-color: var(--cobalt);
}

.detail-tab-button:hover,
.detail-tab-button:focus-visible {
  color: var(--cobalt);
}

.detail-tab-panels {
  display: grid;
  gap: 14px;
}

.detail-tab-panel[hidden] {
  display: none;
}

.detail-tab-content {
  display: grid;
  gap: 12px;
}

.detail-trend-strip {
  display: grid;
  gap: 10px;
}

.detail-trend-strip {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}

.detail-trend-strip.is-compact .detail-trend-strip-metric {
  padding: 8px 12px;
}

.detail-trend-strip.is-single {
  grid-template-columns: minmax(160px, 240px);
  width: fit-content;
  max-width: 100%;
}

.detail-trend-strip-metric {
  display: flex;
  min-width: 0;
  justify-content: center;
  flex-direction: column;
  padding: 10px 12px;
  border-right: 1px solid var(--line);
}

.detail-trend-strip-metric:last-child {
  border-right: 0;
}

.detail-trend-strip-metric span {
  margin-bottom: 4px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.54rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.detail-trend-strip-metric strong {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 750;
}

.detail-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.detail-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-raised) 82%, transparent);
  font-family: var(--font-mono);
  font-size: 0.64rem;
}

.detail-chart-legend-item::before {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--series-color);
  content: "";
}

.detail-chart-legend-item strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.detail-chart-legend-item small {
  padding-left: 7px;
  border-left: 1px solid var(--line);
  font-size: 0.57rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.detail-chart-legend-item small.is-positive {
  color: var(--positive);
}

.detail-chart-legend-item small.is-negative {
  color: var(--risk);
}

.detail-data-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  font-size: 0.68rem;
}

.detail-data-table th,
.detail-data-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.detail-table-more {
  margin: 6px 2px 0;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.58rem;
}

.detail-data-table th {
  color: var(--muted);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.detail-data-table tbody tr:last-child td {
  border-bottom: 0;
}

.detail-table-section .detail-section-title {
  margin-bottom: 8px;
}

.detail-table-section {
  overflow-x: auto;
}

.detail-data-table td {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-data-table td:first-child {
  font-family: var(--font-mono);
  font-size: 0.64rem;
}

.detail-data-table td.intel-wallet-cell,
.detail-data-table td.intel-amount-cell {
  overflow: visible;
  white-space: nowrap;
}

.intel-wallet,
.wallet-identity {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.intel-wallet-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.intel-wallet-named {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.intel-wallet-label {
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.2;
}

.intel-wallet-confidence {
  position: relative;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 550;
  letter-spacing: 0.02em;
  line-height: 1;
  flex: 0 0 auto;
  border-bottom: 1px dotted color-mix(in srgb, var(--muted) 70%, transparent);
  cursor: help;
}

.intel-wallet-confidence[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  z-index: 8;
  width: max-content;
  max-width: 220px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.35;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px);
}

.intel-wallet-confidence[data-tip]:hover::after,
.intel-wallet-confidence[data-tip]:focus-visible::after {
  opacity: 1;
  transform: none;
}

.intel-wallet.is-account .intel-wallet-confidence {
  font-size: 0.68rem;
}

.intel-wallet-address,
a.intel-wallet-address {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.58rem;
}

.wallet-identicon {
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-raised);
  object-fit: cover;
}

span.wallet-identicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.42rem;
  font-weight: 700;
}

.intel-wallet.is-account {
  gap: 12px;
}

.intel-wallet.is-account .intel-wallet-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.intel-wallet.is-account .wallet-identicon {
  width: 24px;
  height: 24px;
}

.intel-wallet.is-account a.intel-wallet-name,
.intel-wallet.is-account span.intel-wallet-name,
.intel-positions-table .intel-wallet.is-account a.intel-wallet-name,
.intel-positions-table .intel-wallet.is-account span.intel-wallet-name {
  color: var(--text);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 550;
  text-decoration: none;
}

.intel-wallet.is-account a.intel-wallet-via-pendle,
.intel-positions-table .intel-wallet.is-account a.intel-wallet-via-pendle {
  color: var(--muted);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.intel-wallet.is-account a.intel-wallet-address:not(.intel-wallet-name) {
  color: var(--text);
  font-size: 0.92rem;
}

.intel-positions-table .intel-wallet.is-account a.intel-wallet-address {
  text-decoration: none;
}

.intel-positions-table .intel-wallet.is-account a.intel-wallet-address:hover {
  text-decoration: underline;
}

.intel-positions-table {
  border: 0;
  font-size: 0.92rem;
}

.intel-positions-table th,
.intel-positions-table td {
  padding: 12px 12px;
  max-width: none;
  overflow: visible;
  white-space: nowrap;
  vertical-align: middle;
}

.intel-positions-table th {
  font-size: 0.68rem;
}

.intel-positions-table .sort-button {
  padding: 0;
  white-space: nowrap;
}

.intel-positions-table th.is-end .sort-button {
  width: 100%;
  justify-content: flex-end;
}

.intel-positions-table td:first-child {
  font-family: inherit;
  font-size: inherit;
}

.intel-positions-table th.is-end,
.intel-positions-table td.is-end {
  width: 1%;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.intel-positions-table th.intel-wallet-cell,
.intel-positions-table td.intel-wallet-cell {
  width: 100%;
}

.intel-positions-table tbody tr:last-child td {
  border-bottom: 1px solid var(--line);
}

.intel-positions-table tbody tr:hover,
.intel-positions-table tbody tr:focus-within {
  background: color-mix(in srgb, var(--cobalt-soft) 42%, transparent);
  box-shadow: inset 2px 0 0 var(--cobalt);
}

.intel-positions-table .intel-position-amount {
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
}

.intel-positions-table .intel-position-amount .detail-depth-amount,
.intel-positions-table .intel-token-amount .detail-depth-amount,
.intel-positions-table td.is-end,
.intel-positions-table .intel-health,
.intel-positions-table .intel-liq-price {
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.intel-positions-table .intel-token-amount .asset-token {
  width: 16px;
  height: 16px;
}

.intel-positions-table .intel-liq-price {
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
}

.wallet-identity.is-inline {
  white-space: nowrap;
}

.wallet-identity.is-inline .intel-wallet-text {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.detail-metric .wallet-identity,
.detail-irm-address {
  align-items: center;
}

.detail-irm-address {
  display: inline-flex;
  gap: 6px;
  min-width: 0;
}

.intel-token-amount {
  gap: 6px;
}

.intel-token-amount .asset-token {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-color: var(--line-strong);
  background: var(--surface-raised);
}

.intel-token-amount .asset-token:has(img)::after {
  display: none;
}

.intel-token-amount .asset-token img,
.intel-token-amount .asset-token > span {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: contain;
  background: transparent;
  font-size: 0.5rem;
}

.intel-liq-price {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  white-space: nowrap;
}

.intel-liq-drop {
  color: var(--muted);
  font-size: 0.62rem;
}

.intel-activity-assets {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 4px;
}

.intel-health.is-critical {
  color: var(--risk);
}

.intel-health.is-warning {
  color: var(--amber);
}

.intel-health.is-healthy {
  color: var(--positive);
}

.intel-activity-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 650;
}

.intel-activity-mark {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--muted);
}

.intel-activity-type.is-supply {
  color: var(--positive);
}

.intel-activity-type.is-supply .intel-activity-mark {
  background: var(--positive);
}

.intel-activity-type.is-withdraw,
.intel-activity-type.is-liquidate {
  color: var(--risk);
}

.intel-activity-type.is-withdraw .intel-activity-mark,
.intel-activity-type.is-liquidate .intel-activity-mark {
  background: var(--risk);
}

.intel-activity-type.is-borrow {
  color: var(--cobalt);
}

.intel-activity-type.is-borrow .intel-activity-mark {
  background: var(--cobalt);
}

.intel-activity-type.is-repay,
.intel-activity-type.is-collateral {
  color: var(--amber);
}

.intel-activity-type.is-repay .intel-activity-mark,
.intel-activity-type.is-collateral .intel-activity-mark {
  background: var(--amber);
}

.intel-tx-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--muted);
}

.intel-tx-link svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.intel-tx-link:hover {
  color: var(--cobalt);
}

.intel-activities-table .intel-wallet.is-account a.intel-wallet-address {
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--cobalt) 26%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--cobalt-soft) 36%, var(--surface));
}

.intel-activities-table .intel-wallet.is-account a.intel-wallet-name {
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
}

.intel-activities-table .intel-wallet.is-via-pendle a.intel-wallet-name,
.intel-activities-table .intel-wallet.is-via-pendle span.intel-wallet-name {
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}

.intel-activities-table td.intel-tx-cell {
  text-align: right;
}

.intel-liquidations-table th.intel-wallet-cell,
.intel-liquidations-table td.intel-wallet-cell {
  width: auto;
}

.intel-liquidations-table .intel-wallet.is-account {
  padding: 3px 8px 3px 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
}

.intel-liquidations-table .intel-wallet.is-account .wallet-identicon {
  width: 18px;
  height: 18px;
  border-radius: 4px;
}

.intel-liquidations-table .intel-wallet.is-account a.intel-wallet-address,
.intel-liquidations-table .intel-wallet.is-account a.intel-wallet-name {
  font-size: 0.78rem;
}

.intel-liquidations-table td.intel-time-cell {
  color: var(--muted);
}

.intel-tx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-decoration: none;
  white-space: nowrap;
}

.intel-tx-chip svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.intel-tx-chip:hover {
  color: var(--cobalt);
  border-color: color-mix(in srgb, var(--cobalt) 40%, var(--line));
}

.intel-tx-chip.is-unavailable {
  color: var(--muted);
}

.intel-activities-table .intel-activity-assets {
  gap: 8px;
}

.intel-activities-table .intel-token-amount {
  gap: 6px;
}

.intel-activities-table .intel-token-amount .asset-token {
  width: 16px;
  height: 16px;
}

.intel-activities-section .detail-section-title {
  margin-bottom: 4px;
}

.intel-activities-table th,
.intel-activities-table td {
  padding: 8px 10px;
}

.intel-activities-table .intel-wallet.is-account {
  gap: 8px;
}

.intel-activities-table .intel-wallet.is-account .wallet-identicon {
  width: 18px;
  height: 18px;
}

.intel-activities-table .intel-wallet.is-account a.intel-wallet-address,
.intel-activities-table .intel-wallet.is-account a.intel-wallet-name {
  font-size: 0.82rem;
}

.intel-activities-table td.intel-time-cell {
  color: var(--muted);
  font-size: 0.82rem;
}

.intel-activities-table .intel-activity-type {
  font-size: 0.82rem;
}

.intel-activity-assets-sep {
  color: var(--muted);
}

.intel-activities-table .intel-token-amount,
.intel-activities-table .intel-activity-assets {
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
}

.intel-activity-filters {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 10px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-raised) 72%, var(--surface));
}

.intel-activity-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 11px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font-size: 0.78rem;
  font-weight: 650;
}

.intel-activity-filter-count {
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
}

.intel-activity-filter.is-active,
.intel-activity-filter[aria-pressed="true"] {
  color: var(--text);
  background: color-mix(in srgb, var(--cobalt-soft) 82%, var(--surface));
  box-shadow: inset 0 0 0 1px var(--cobalt);
}

.intel-activity-filter.is-active .intel-activity-filter-count,
.intel-activity-filter[aria-pressed="true"] .intel-activity-filter-count {
  color: var(--text);
}

.intel-pager-host:empty {
  display: none;
}

.intel-pager {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-top: 12px;
}

.intel-pager-bar {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-raised) 80%, var(--surface));
}

.intel-pager-nav,
.intel-pager-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 7px;
  color: var(--muted);
  background: transparent;
  font-size: 0.82rem;
  font-weight: 650;
}

.intel-pager-nav svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.intel-pager-page.is-active,
.intel-pager-page[aria-current="page"] {
  color: var(--text);
  background: var(--cobalt);
}

.intel-pager-nav:disabled {
  opacity: 0.35;
}

.intel-pager-nav:not(:disabled):hover,
.intel-pager-page:not(.is-active):hover {
  color: var(--text);
  background: color-mix(in srgb, var(--cobalt-soft) 55%, transparent);
}

.intel-pager-ellipsis {
  min-width: 24px;
  color: var(--faint);
  text-align: center;
}

.intel-pager-summary {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

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

.intel-analysis-card {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-rows: auto minmax(240px, 1fr);
  gap: 12px;
  min-width: 0;
  min-height: 300px;
  padding: 14px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.intel-analysis-card:hover,
.intel-analysis-card:focus-within {
  z-index: 3;
}

.intel-analysis-card:has(.intel-analysis-card-caption) {
  grid-template-rows: auto minmax(240px, 1fr) auto;
}

.intel-analysis-card.is-wide {
  grid-column: 1 / -1;
}

.intel-analysis-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.intel-analysis-card-title {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.intel-analysis-card-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.68rem;
}

.intel-analysis-card-caption {
  margin: 0;
  color: var(--faint);
  font-size: 0.72rem;
}

.intel-analysis-donut {
  position: relative;
  display: grid;
  grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  min-height: 240px;
  height: 100%;
}

.intel-analysis-donut-svg {
  width: 100%;
  height: auto;
  max-width: 240px;
  aspect-ratio: 1;
  justify-self: center;
}

.intel-analysis-donut-slice {
  cursor: pointer;
  stroke: none;
}

.intel-analysis-legend {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
  width: 100%;
}

.intel-analysis-legend li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
  cursor: pointer;
}

.intel-analysis-legend-swatch {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  margin-top: 0.35em;
  border-radius: 2px;
}

.intel-analysis-legend-label {
  min-width: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: break-word;
}

.intel-analysis-xy-figure {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 240px;
}

.intel-analysis-xy {
  width: 100%;
  height: 100%;
  min-height: 240px;
}

.intel-analysis-ideal {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.intel-analysis-hover-point {
  fill: var(--surface);
  stroke: var(--cobalt);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.intel-analysis-xy.is-borrow .intel-analysis-hover-point {
  stroke: var(--positive);
}

.intel-analysis-xy.is-risk .intel-analysis-hover-point {
  stroke: var(--amber);
}

.intel-analysis-hover-point.is-ideal {
  stroke: var(--muted);
  stroke-width: 1.5;
}

.intel-analysis-tooltip {
  position: absolute;
  z-index: 90;
  min-width: 168px;
  max-width: 280px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
  font-size: 0.875rem;
  line-height: 1.35;
  pointer-events: none;
}

.intel-analysis-tooltip[hidden] {
  display: none;
}

.intel-analysis-tooltip-title {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 500;
}

.intel-analysis-tooltip-title.is-muted {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 400;
}

.intel-analysis-tooltip-sub {
  margin: 0 0 8px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.intel-analysis-tooltip-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.intel-analysis-tooltip-row + .intel-analysis-tooltip-row {
  margin-top: 4px;
}

.intel-analysis-tooltip-row span:first-child {
  color: var(--muted);
}

.intel-analysis-tooltip-row span:last-child {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.intel-analysis-tooltip-row.is-emphasis span:last-child {
  font-weight: 500;
}

.intel-analysis-plot-grid {
  stroke: var(--line);
  stroke-width: 1;
  stroke-opacity: var(--chart-grid-opacity);
}

.intel-analysis-plot-zero {
  stroke-opacity: 0.28;
}

.intel-analysis-axis {
  fill: var(--chart-tick-fill);
  stroke: none;
  font-size: var(--chart-tick-size);
  font-weight: var(--chart-tick-weight);
  font-family: var(--chart-tick-font);
}

.intel-analysis-line {
  stroke: var(--cobalt);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.intel-analysis-xy.is-borrow .intel-analysis-line {
  stroke: var(--positive);
}

.intel-analysis-xy.is-risk .intel-analysis-line {
  stroke: var(--amber);
}

@media (max-width: 900px) {
  .intel-analysis-grid {
    grid-template-columns: 1fr;
  }

  .intel-analysis-card {
    min-height: 260px;
    grid-template-rows: auto minmax(200px, 1fr);
  }

  .intel-analysis-card:has(.intel-analysis-card-caption) {
    grid-template-rows: auto minmax(200px, 1fr) auto;
  }

  .intel-analysis-donut {
    grid-template-columns: minmax(160px, 180px) minmax(0, 1fr);
    min-height: 180px;
    gap: 14px;
  }

  .intel-analysis-donut-svg {
    max-width: 180px;
  }

  .intel-analysis-xy-figure,
  .intel-analysis-xy {
    min-height: 200px;
  }
}

.intel-trend-stack {
  display: grid;
  gap: 14px;
}

.intel-trend-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.intel-trend-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.intel-trend-title {
  margin: 0;
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 700;
}

.intel-trend-subtitle {
  margin: 2px 0 0;
  color: var(--faint);
  font-size: 0.74rem;
}

.intel-trend-meta {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  white-space: nowrap;
}

.intel-trend-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.intel-trend-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  min-width: 0;
}

.intel-trend-metric {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.intel-trend-metric-label {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.intel-trend-metric-value {
  color: var(--text);
  font-size: 1.18rem;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  line-height: 1.15;
}

.intel-trend-metric-detail {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.intel-trend-metric-detail.is-positive,
.intel-trend-metric-value.is-positive {
  color: var(--positive);
}

.intel-trend-metric-detail.is-negative,
.intel-trend-metric-value.is-negative {
  color: var(--risk);
}

.intel-trend-flow-meta {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
}

.intel-trend-metric.is-up .intel-trend-metric-label {
  color: var(--positive);
}

.intel-trend-metric.is-down .intel-trend-metric-label {
  color: var(--risk);
}

.intel-trend-controls {
  flex: 0 0 auto;
}

.intel-trend-controls .detail-chart-window-controls {
  margin-left: 0;
}

.intel-trend-select {
  display: inline-flex;
}

.intel-trend-select select,
.intel-trend-select .yam-select-trigger {
  min-width: 64px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface-raised);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
}

.intel-trend-select .yam-select {
  width: auto;
}

.intel-trend-util {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

.intel-trend-util-track {
  display: inline-block;
  width: 88px;
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--surface-subtle);
}

.intel-trend-util-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--amber);
}

.intel-trend-plot.detail-chart {
  min-height: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

.intel-trend-plot .detail-chart-header {
  display: none;
}

.intel-trend-plot .detail-chart-legend,
.intel-trend-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 16px;
  margin-top: 4px;
}

.intel-trend-plot .detail-chart-legend-item,
.intel-trend-legend-item {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 0.74rem;
}

.intel-trend-plot button.detail-chart-legend-item {
  cursor: pointer;
  font: inherit;
}

.intel-trend-plot .detail-chart-legend-item.is-off {
  opacity: 0.4;
  text-decoration: line-through;
}

.intel-trend-legend-item::before {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--amber);
  content: "";
}

.intel-trend-legend-item.is-up::before {
  background: oklch(0.66 0.12 154);
}

.intel-trend-legend-item.is-down::before {
  background: oklch(0.62 0.13 24);
}

.intel-trend-legend-item.is-net::before {
  background: #edc948;
}

.intel-trend-plot .detail-chart-svg,
.intel-trend-flow-svg {
  display: block;
  width: 100%;
  height: 350px;
  min-height: 350px;
  max-height: none;
  aspect-ratio: auto;
}

.intel-trend-flow-svg {
  overflow: visible;
  fill: none;
  stroke: none;
}

.intel-trend-flow-svg text {
  fill: var(--chart-tick-fill);
  stroke: none;
  font-size: var(--chart-tick-size);
  font-weight: var(--chart-tick-weight);
  font-family: var(--chart-tick-font);
}

.intel-trend-flow-figure {
  position: relative;
  width: 100%;
  margin: 0;
}

.intel-trend-flow-up,
.intel-trend-flow-down {
  stroke: none;
}

.intel-trend-flow-up {
  fill: oklch(0.66 0.12 154);
}

.intel-trend-flow-down {
  fill: oklch(0.62 0.13 24);
}

.intel-trend-flow-net {
  fill: none;
  stroke: #edc948;
  stroke-width: 1.75;
  stroke-opacity: 0.82;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.intel-trend-footer,
.intel-trend-gross {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  color: var(--muted);
  font-size: 0.74rem;
}

.intel-trend-footer-label,
.intel-trend-gross .intel-trend-footer-label {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.intel-trend-footer-item {
  font-variant-numeric: tabular-nums;
}

.intel-trend-gross {
  display: grid;
  gap: 6px;
}

.intel-trend-gross-track {
  display: flex;
  overflow: hidden;
  height: 8px;
  border-radius: 99px;
  background: var(--surface-subtle);
}

.intel-trend-gross-up {
  background: color-mix(in srgb, oklch(0.66 0.12 154) 55%, var(--surface-subtle));
}

.intel-trend-gross-down {
  background: color-mix(in srgb, oklch(0.62 0.13 24) 55%, var(--surface-subtle));
}

.intel-trend-gross-labels {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

.intel-trend-extra {
  margin-top: 14px;
}

@media (max-width: 900px) {
  .intel-trend-head,
  .intel-trend-title-row {
    flex-direction: column;
  }

  .intel-trend-metric-value {
    font-size: 1.05rem;
  }

  .intel-trend-plot .detail-chart-svg,
  .intel-trend-flow-svg {
    height: 280px;
    min-height: 280px;
  }
}

.detail-summary {
  display: grid;
  gap: 8px;
}

.detail-summary-bar {
  display: grid;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  overflow: hidden;
}

.detail-summary-bar.is-secondary,
.detail-summary-bar.is-depth {
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.detail-summary-bar.is-secondary {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.detail-summary-bar.is-depth {
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
}

.detail-summary-bar.is-secondary:has(> :only-child),
.detail-summary-bar.is-depth:has(> :only-child) {
  width: fit-content;
  max-width: 100%;
  grid-template-columns: minmax(160px, max-content);
}

.detail-summary-metric {
  display: flex;
  min-width: 0;
  justify-content: center;
  flex-direction: column;
  padding: 12px 14px;
  border-right: 1px solid var(--line);
}

.detail-summary-bar.is-secondary .detail-summary-metric,
.detail-summary-bar.is-depth .detail-summary-metric {
  padding: 9px 12px;
}

.detail-summary-metric:last-child {
  border-right: 0;
}

.detail-summary-metric span {
  margin-bottom: 5px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.detail-summary-metric strong {
  font-family: var(--font-mono);
  font-size: 0.98rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.detail-summary-bar.is-secondary .detail-summary-metric strong,
.detail-summary-bar.is-depth .detail-summary-metric strong {
  font-size: 0.88rem;
}

.detail-summary-metric.is-primary strong {
  color: var(--positive);
  font-size: 1.12rem;
}

.detail-summary-metric.is-limit {
  background: color-mix(in srgb, var(--cobalt-soft) 22%, var(--surface));
}

.detail-summary-bar > .detail-summary-metric:not(.is-limit) + .detail-summary-metric.is-limit {
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--cobalt) 42%, var(--line));
}

.detail-decision-grid .detail-oracle-section .oracle-detail-body {
  padding: 0;
  border: 0;
  background: transparent;
}

.detail-section {
  margin-bottom: 16px;
}

.detail-section:last-child {
  margin-bottom: 0;
}

.detail-decision-grid {
  display: grid;
  align-items: start;
  margin-bottom: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.detail-decision-grid .detail-section {
  margin-bottom: 0;
}

.detail-section-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 7px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.detail-section-title::after {
  height: 1px;
  flex: 1;
  background: var(--line);
  content: "";
}

.implied-apy-curve-section svg {
  display: block;
  margin-top: 8px;
}

.implied-apy-axis {
  stroke: var(--line);
  stroke-width: 1;
}

.implied-apy-zero-line {
  stroke: var(--faint);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.implied-apy-asymptote {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

.implied-apy-asymptote-label,
.implied-apy-breakeven-label,
.implied-apy-tick-label {
  fill: var(--muted);
  font-family: var(--font-mono);
  font-size: 8px;
}

.implied-apy-breakeven-line {
  stroke: var(--amber);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.implied-apy-breakeven-label {
  fill: var(--amber);
}

.implied-apy-curve {
  fill: none;
  stroke: var(--cobalt);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.implied-apy-selected-dot {
  fill: var(--tide);
  stroke: var(--surface);
  stroke-width: 1.5;
}

.implied-apy-selected-label {
  fill: var(--tide);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
}

.detail-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.detail-metric {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.detail-metric dt,
.provider-field dt {
  margin: 0 0 4px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.54rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.detail-metric dd,
.provider-field dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.detail-metric dd {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.merkl-stack {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.detail-merkl-section .detail-apy-breakdown {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-hover);
  font-size: 0.7rem;
  gap: 3px 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

.detail-merkl-section .detail-apy-breakdown-item {
  display: flex;
  min-width: 0;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 8px;
}

.detail-merkl-section .detail-apy-breakdown-item .apy-breakdown-line {
  min-width: 150px;
  flex: 1 1 150px;
}

.detail-merkl-section .detail-apy-breakdown-item .apy-breakdown-meta,
.detail-merkl-section .detail-apy-breakdown-item .apy-breakdown-note {
  margin: 0;
  flex: 0 1 auto;
  line-height: 1.25;
}

.merkl-section-note {
  display: inline;
  margin: 0;
  color: var(--muted);
  font-size: 0.67rem;
  line-height: 1.35;
}

.merkl-stack:has(+ .merkl-section-note) {
  margin-bottom: 4px;
}

.merkl-section-note + .merkl-section-note::before {
  color: var(--faint);
  content: " · ";
}

.merkl-campaign-list {
  display: grid;
  min-width: 0;
  gap: 6px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.merkl-campaign {
  display: grid;
  min-width: 0;
  align-items: center;
  gap: 4px 10px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--cobalt);
  border-radius: 6px;
  background: var(--surface);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto auto;
}

.merkl-campaign-header {
  display: contents;
}

.merkl-campaign-name {
  min-width: 0;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.3;
  overflow-wrap: anywhere;
  grid-column: 1;
  grid-row: 1;
}

.merkl-campaign-apr-block {
  display: flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 4px;
  text-align: right;
  grid-column: 3;
  grid-row: 1;
}

.merkl-campaign-apr {
  color: var(--tide);
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.merkl-campaign-apr-label {
  margin: 0;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.49rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.merkl-campaign-meta {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 7px;
  grid-column: 2;
  grid-row: 1;
}

.merkl-campaign-chip {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--muted);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.merkl-campaign-chip + .merkl-campaign-chip::before {
  margin-right: 7px;
  color: var(--faint);
  content: "·";
}

.merkl-campaign-chip.is-ending {
  color: var(--amber);
}

.merkl-campaign-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
  grid-column: 4;
  grid-row: 1;
}

.merkl-campaign-body {
  display: grid;
  min-width: 0;
  gap: 4px;
  grid-column: 1 / -1;
  grid-row: 2;
}

.merkl-campaign-summary {
  margin: 0;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.4;
}

.merkl-campaign-steps {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted);
  font-size: 0.65rem;
  line-height: 1.4;
}

.merkl-campaign-links .detail-action-link {
  min-height: 24px;
  flex: 0 0 auto;
  justify-content: center;
  padding: 0 8px;
  font-size: 0.61rem;
}

.merkl-campaign-eligibility {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--line));
  border-left: 2px solid var(--amber);
  border-radius: 4px;
  background: color-mix(in srgb, var(--amber) 10%, var(--surface));
  grid-column: 1 / -1;
}

.merkl-campaign-eligibility-heading {
  margin: 0;
  color: var(--amber);
  font-size: 0.66rem;
  font-weight: 650;
  line-height: 1.35;
}

.merkl-campaign-eligibility-list {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted);
  font-size: 0.65rem;
  line-height: 1.4;
}

.merkl-campaign-eligibility-rule-label {
  color: var(--text);
  font-weight: 650;
}

@media (max-width: 600px) {
  .merkl-campaign {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .merkl-campaign-apr-block,
  .merkl-campaign-links {
    grid-column: 2;
  }

  .merkl-campaign-name,
  .merkl-campaign-apr-block {
    grid-row: 1;
  }

  .merkl-campaign-links,
  .merkl-campaign-meta {
    grid-column: 1;
    grid-row: 2;
  }

  .merkl-campaign-links {
    grid-column: 2;
  }
}

.detail-yield-quote {
  display: grid;
  min-height: 92px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--tide);
  border-radius: 6px;
  background:
    linear-gradient(var(--line) 1px, transparent 1px),
    var(--surface-hover);
  background-size: 100% 31px;
  grid-template-columns: minmax(190px, 0.85fr) minmax(250px, 1.15fr);
}

.detail-yield-current {
  display: flex;
  min-width: 0;
  justify-content: center;
  flex-direction: column;
  padding: 14px 17px;
}

.detail-yield-current span,
.detail-risk-note,
.detail-source-name,
.detail-link-unavailable {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.61rem;
}

.detail-yield-current span {
  margin-bottom: 5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.detail-yield-current strong {
  color: var(--positive);
  font-family: var(--font-mono);
  font-size: clamp(1.7rem, 4vw, 2.35rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.065em;
  line-height: 0.95;
}

.detail-yield-history {
  display: grid;
  min-width: 0;
  margin: 0;
  border-left: 1px solid var(--line);
  grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
}

.detail-yield-history .detail-metric {
  display: flex;
  justify-content: center;
  flex-direction: column;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.detail-yield-history .detail-metric:last-child {
  border-right: 0;
}

.detail-yield-history .detail-metric dd {
  font-size: 1rem;
}

.detail-outcomes {
  margin-top: 8px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.detail-depth {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-depth-books {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.detail-depth-books:has(> :only-child) {
  grid-template-columns: minmax(0, 1fr);
}

.detail-depth-reserve {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
}

.detail-depth-reserve-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.detail-depth-reserve-head .detail-depth-asset {
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 750;
}

.detail-depth-reserve-head .detail-depth-asset .asset-token {
  width: 22px;
  height: 22px;
  background: var(--surface);
}

.detail-depth-reserve-head > span:last-child {
  margin-left: auto;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.detail-depth-pair {
  gap: 10px;
}

.detail-depth-pair-head {
  display: grid;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.detail-depth-pair-asset {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.detail-depth-pair-asset:last-child {
  justify-content: flex-end;
}

.detail-depth-pair-asset .detail-depth-asset {
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 750;
}

.detail-depth-pair-asset .detail-depth-asset .asset-token {
  width: 22px;
  height: 22px;
  background: var(--surface);
}

.detail-depth-pair-asset > span:last-child {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.detail-depth-pair-arrow {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

.detail-depth-pair-totals {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-depth-reserve-total.is-liquidity::before {
  background: var(--positive);
}

.detail-depth-reserve-total.is-optimal::before {
  background: var(--tide);
}

.detail-depth-pair-utilization {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-depth-pair-utilization .detail-depth-reserve-utilization {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.detail-depth-reserve-totals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.detail-depth-reserve-total {
  position: relative;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.detail-depth-reserve-total::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--cobalt);
  content: "";
}

.detail-depth-reserve-total.is-borrow::before {
  background: var(--amber);
}

.detail-depth-reserve-total > span:first-child,
.detail-depth-reserve-capacity-metric > span:first-child,
.detail-depth-reserve-utilization-head > span:first-child {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.detail-depth-reserve-total .detail-depth-value,
.detail-depth-reserve-capacity-metric .detail-depth-value {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
  flex-wrap: nowrap;
}

.detail-depth-reserve-total .detail-depth-token {
  gap: 5px;
  max-width: 100%;
}

.detail-depth-reserve-total .detail-depth-amount {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.detail-depth-reserve-total .detail-depth-token .asset-token,
.detail-depth-reserve-capacity-metric .detail-depth-token .asset-token {
  display: none;
}

.detail-depth-reserve-total .detail-depth-asset-symbol {
  color: var(--muted);
  font-size: 0.66rem;
}

.detail-depth-reserve-total .detail-depth-usd {
  color: var(--muted);
  font-size: 0.7rem;
}

.detail-depth-reserve-utilization {
  display: grid;
  gap: 6px;
  padding: 0 2px;
}

.detail-depth-reserve-utilization-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.detail-depth-reserve-optimal {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
}

.detail-depth-reserve-gauge.metric-bar-stack {
  align-items: stretch;
  width: 100%;
  min-width: 0;
  gap: 5px;
}

.detail-depth-reserve-gauge .utilization-indicator {
  align-self: flex-end;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 750;
}

.detail-depth-reserve-gauge .metric-bar-track {
  position: relative;
  width: 100%;
  height: 7px;
}

.detail-depth-reserve-optimal-marker {
  position: absolute;
  z-index: 1;
  top: -2px;
  width: 2px;
  height: 11px;
  border-radius: 999px;
  background: var(--text);
  box-shadow: 0 0 0 1px var(--surface);
  transform: translateX(-1px);
}

.detail-depth-reserve-capacity {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.detail-depth-reserve-capacity:has(> :only-child) {
  grid-template-columns: minmax(0, 1fr);
}

.detail-depth-reserve-capacity-metric {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.detail-depth-reserve-capacity-metric .detail-depth-amount {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
}

.detail-depth-reserve-capacity-metric .detail-depth-asset-symbol,
.detail-depth-reserve-capacity-metric .detail-depth-usd {
  color: var(--muted);
  font-size: 0.64rem;
}

.detail-depth-book {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
}

.detail-depth-book-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.detail-depth-book-head .detail-depth-asset {
  min-width: 0;
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 700;
}

.detail-depth-book-head .detail-depth-asset-symbol {
  overflow: visible;
  text-overflow: unset;
  white-space: nowrap;
}

.detail-depth-book-head .asset-token {
  width: 22px;
  height: 22px;
  border-color: var(--line-strong);
  background: var(--surface);
}

.detail-depth-book-head .asset-token:has(img)::after {
  display: none;
}

.detail-depth-book-head .asset-token img,
.detail-depth-book-head .asset-token > span {
  width: 100%;
  height: 100%;
  padding: 3px;
  object-fit: contain;
  background: transparent;
}

.detail-depth-book-role {
  margin-left: auto;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.detail-depth-book-hero {
  display: grid;
  gap: 3px;
  margin: 0;
}

.detail-depth-book-hero > span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.detail-depth-book-hero strong {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 1.18rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.detail-depth-book-hero .detail-depth-value {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.detail-depth-book-hero .detail-depth-usd {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

.detail-depth-book-rows {
  display: grid;
  gap: 8px;
  margin: 0;
}

.detail-depth-book-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

.detail-depth-book-row dt {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
}

.detail-depth-book-row dd {
  margin: 0;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

@media (max-width: 680px) {
  .detail-depth-books {
    grid-template-columns: minmax(0, 1fr);
  }

}

@media (max-width: 480px) {
  .detail-depth-reserve-totals,
  .detail-depth-reserve-capacity,
  .detail-depth-pair-utilization {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-depth-pair-head {
    gap: 6px;
  }

  .detail-depth-pair-asset {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .detail-depth-pair-asset:last-child {
    align-items: flex-end;
  }
}

.detail-depth .detail-metric {
  min-height: 52px;
}

.detail-depth .detail-metric dd {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-size: 1rem;
}

.detail-depth-value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.detail-depth .detail-metric .detail-depth-value,
.detail-depth-book-hero .detail-depth-value,
.detail-depth-book-row .detail-depth-value {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex-wrap: nowrap;
}

.detail-depth-token {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.detail-depth-amount {
  font-variant-numeric: tabular-nums;
}

.detail-depth-usd {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.detail-depth-token .detail-depth-asset-symbol {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
}

.detail-depth-metric-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.detail-depth-asset {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
}

.detail-depth-metric-label .detail-depth-asset {
  margin-left: 2px;
}

.detail-depth-asset .asset-token {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  /* A full-bleed img on a bordered 16px chip overflows and shears diamond
     marks (ETH). Size the artwork to the content box and inset it so the
     octahedron stays intact. */
  border-color: var(--line-strong);
  background: var(--surface-raised);
}

.detail-depth-asset .asset-token:has(img)::after {
  display: none;
}

.detail-depth-asset .asset-token img,
.detail-depth-asset .asset-token > span {
  width: 100%;
  height: 100%;
  padding: 3px;
  object-fit: contain;
  background: transparent;
  font-size: 0.45rem;
}

.detail-depth-asset-symbol {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.detail-depth-asset.related-lend-link {
  color: inherit;
  text-decoration: none;
}

a.detail-depth-asset.related-lend-link .detail-depth-asset-symbol {
  border-bottom: 1px dotted color-mix(in srgb, var(--cobalt) 50%, transparent);
}

a.detail-depth-asset.related-lend-link:hover,
a.detail-depth-asset.related-lend-link:focus-visible {
  color: var(--cobalt);
}

a.detail-depth-asset.related-lend-link:hover .detail-depth-asset-symbol,
a.detail-depth-asset.related-lend-link:focus-visible .detail-depth-asset-symbol {
  border-bottom-color: var(--cobalt);
}

.detail-risk-note {
  margin: 8px 2px 0;
  line-height: 1.5;
}

.detail-risk.is-compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.detail-risk.is-compact .detail-metric {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  min-height: 0;
  padding: 5px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.detail-risk.is-compact .detail-metric:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.detail-risk.is-compact .detail-metric:first-child {
  padding-top: 0;
}

.detail-risk.is-compact .detail-metric dt {
  margin: 0;
}

.detail-risk.is-compact .detail-metric dd {
  margin: 0;
  font-size: 0.92rem;
  text-align: right;
}

.detail-enrichment,
.detail-history-section {
  min-height: 0;
}

.detail-loading-label,
.detail-freshness,
.detail-error-copy,
.detail-chart figcaption,
.detail-action-note {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.61rem;
}

.detail-loading-label {
  margin-bottom: 10px;
}

.detail-history-section .detail-section-title {
  margin-bottom: 10px;
  font-size: 0.68rem;
}

.detail-chart-skeleton {
  position: relative;
  display: grid;
  min-height: 104px;
  align-content: center;
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:
    linear-gradient(var(--surface-subtle) 0 0) 14px 22px / 42% 9px no-repeat,
    linear-gradient(var(--surface-subtle) 0 0) 14px 47px / 72% 9px no-repeat,
    linear-gradient(var(--surface-subtle) 0 0) 14px 72px / 56% 9px no-repeat,
    var(--surface-hover);
  gap: 10px;
}

.detail-chart-skeleton::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(
    100deg,
    transparent 30%,
    color-mix(in srgb, var(--cobalt) 10%, transparent) 50%,
    transparent 70%
  );
  background-position: 150% 0;
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.detail-skeleton-line {
  width: 46px;
  height: 8px;
  border-radius: 3px;
  background: var(--surface-subtle);
}

.detail-freshness {
  margin: -2px 0 12px;
}

.detail-freshness.is-stale {
  padding: 7px 9px;
  border-left: 3px solid var(--amber);
  color: var(--amber);
  background: var(--amber-soft);
}

.detail-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.detail-charts:has(> :only-child) {
  grid-template-columns: minmax(0, 1fr);
}

.detail-chart {
  position: relative;
  min-width: 0;
  min-height: 280px;
  padding: 12px 14px 10px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 72%, transparent), transparent 96px),
    var(--surface);
  box-shadow: 0 8px 24px color-mix(in srgb, #08101f 10%, transparent);
}

.detail-charts > .detail-chart:only-child {
  max-width: 920px;
}

.detail-chart-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.detail-chart-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  min-width: 0;
}

.detail-chart-header h4 {
  margin: 0;
  font-size: 0.86rem;
}

.detail-chart-header > span,
.detail-chart-heading > span,
.detail-chart-range {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
}

.detail-chart-range {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.detail-chart-window-controls {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: auto;
}

.detail-chart-window-controls button {
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  background: var(--surface-hover);
  font-family: var(--font-mono);
  font-size: 0.6rem;
}

.detail-chart-window-controls button:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

.detail-chart-window-controls button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--cobalt) 62%, var(--line));
  color: var(--cobalt);
  background: var(--cobalt-soft);
}

.detail-chart-svg {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  max-height: 360px;
  min-height: 220px;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 5px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cobalt-soft) 20%, transparent), transparent 62%),
    color-mix(in srgb, var(--surface-hover) 72%, transparent);
}

.detail-chart-plot {
  position: relative;
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
}

.detail-chart-plot .uplot,
.detail-chart-plot .u-wrap {
  width: 100% !important;
  height: 100% !important;
  font-family: var(--font-sans);
  color: var(--muted);
  background: transparent;
}

.detail-chart-plot .u-legend {
  display: none;
}

.detail-chart-plot .u-cursor-pt {
  border-radius: 50%;
}

/* Interpolated hover guide/dots for IRM charts (dot colors are set inline). */
.detail-irm-plot .detail-irm-hover-guide {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  border-left: 1px dashed color-mix(in srgb, var(--text) 55%, transparent);
  transform: translateX(-0.5px);
  pointer-events: none;
  z-index: 2;
}

.detail-irm-plot .detail-irm-hover-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--surface-raised);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
}

.detail-irm-svg .detail-irm-kink-point {
  fill: color-mix(in srgb, var(--text) 42%, var(--line-strong));
  stroke: var(--surface-raised);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.detail-chart-plot .u-over {
  cursor: crosshair;
}

.detail-charts > .detail-chart:only-child .detail-chart-svg {
  aspect-ratio: 16 / 9;
  max-height: 380px;
}

.detail-charts:has(> :nth-child(3)) .detail-chart {
  min-height: 240px;
}

.detail-charts:has(> :nth-child(3)) .detail-chart-svg {
  aspect-ratio: 16 / 9;
  max-height: 280px;
  min-height: 200px;
}

.detail-chart-svg,
.intel-trend-flow-svg,
.intel-analysis-xy,
.intel-analysis-donut-svg {
  stroke: none;
}

.detail-chart-svg text,
.intel-trend-flow-svg text,
.intel-analysis-axis,
.pendle-amm-curve-label,
.pendle-amm-curve-axis-title,
.chart-axis {
  fill: var(--chart-tick-fill);
  stroke: none;
  font-family: var(--chart-tick-font);
  font-size: var(--chart-tick-size);
  font-weight: var(--chart-tick-weight);
  font-variant-numeric: tabular-nums;
}

.detail-chart-svg text.detail-chart-axis-title {
  fill: var(--chart-tick-fill);
  font-size: var(--chart-tick-size);
  font-weight: var(--chart-tick-weight);
  letter-spacing: 0;
}

.detail-chart-svg text.detail-chart-axis-title-horizontal {
  dominant-baseline: hanging;
}

.detail-chart-grid {
  stroke: var(--line);
  stroke-width: 1;
  stroke-opacity: var(--chart-grid-opacity);
}

.detail-chart-grid-vertical {
  stroke-opacity: var(--chart-grid-opacity);
}

.detail-chart-tick {
  display: none;
}

.detail-chart-area {
  opacity: 0.1;
  stroke: none;
  pointer-events: none;
}

.detail-chart-path {
  fill: none;
  stroke: var(--cobalt);
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-width: 3.25;
  vector-effect: non-scaling-stroke;
}

.detail-irm-section .detail-irm-breakdown {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.detail-irm-section .detail-irm-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 10px 28px;
  align-items: start;
  min-width: 0;
  overflow: hidden;
  margin-top: 2px;
  padding: 10px 2px 2px;
  border-top: 1px solid var(--line);
}

.detail-irm-section .detail-irm-metric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 0;
  padding: 8px 0;
}

.detail-irm-section .detail-irm-metric-row:first-child {
  padding-top: 2px;
}

.detail-irm-section .detail-irm-metric-row:last-child {
  padding-bottom: 2px;
}

.detail-irm-section .detail-irm-metric-label {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--faint);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: uppercase;
}

.detail-irm-section .detail-irm-metric-label > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.detail-irm-section .detail-irm-metric-value {
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  text-align: left;
}

.detail-irm-section .detail-irm-metric-row.is-stacked {
  align-items: stretch;
  flex-direction: column;
  gap: 4px;
}

.detail-irm-section .detail-irm-metric-row.is-stacked .detail-irm-metric-value {
  width: 100%;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.detail-irm-section .detail-irm-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  color: var(--faint);
  cursor: help;
}

.detail-irm-section .detail-irm-info svg {
  width: 13px;
  height: 13px;
}

.detail-irm-section .detail-irm-address {
  display: flex;
  width: 100%;
  max-width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
}

.detail-irm-section .detail-irm-address-identity {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
}

.detail-irm-section .detail-irm-address-text {
  display: grid;
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
  grid-template-columns: minmax(0, 1fr);
  align-items: baseline;
  justify-items: start;
  gap: 2px 5px;
}

.detail-irm-section .detail-irm-address-text .intel-wallet-label {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--text);
  font-family: var(--font);
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-irm-section .detail-irm-address-text .intel-wallet-confidence {
  white-space: nowrap;
}

.detail-irm-section .detail-irm-address-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
}

.detail-irm-section .detail-irm-address code {
  display: block;
  min-width: 0;
  max-width: 100%;
  grid-column: 1 / -1;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-irm-section .detail-irm-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--faint);
  text-decoration: none;
  cursor: pointer;
}

.detail-irm-section .detail-irm-icon-button:hover,
.detail-irm-section .detail-irm-icon-button:focus-visible {
  color: var(--text);
  background: var(--surface-hover);
  outline: none;
}

.detail-irm-section .detail-irm-icon-button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.detail-irm-section .detail-irm-chart-wrap {
  min-width: 0;
}

.detail-irm-section .detail-irm-chart {
  position: relative;
  min-height: 0;
  padding: 12px 12px 10px;
  background: var(--surface-raised);
  box-shadow: none;
}

.detail-irm-section .detail-irm-legend {
  margin-top: 0;
  margin-bottom: 8px;
}

.detail-irm-legend .detail-chart-legend-item.is-anchor::before {
  width: 2px;
  height: 11px;
  border-radius: 1px;
  background: repeating-linear-gradient(
    to bottom,
    var(--anchor-color) 0 2px,
    transparent 2px 3.5px
  );
}

/* Morpho/loop detail chrome shrinks every legend swatch to 7×7. Keep the
   IRM target/current dashes as vertical ticks so they still match the plot. */
body.is-detail-view.is-morpho-workspace
  .detail-irm-legend
  .detail-chart-legend-item.is-anchor::before,
body.is-detail-view.is-loop-workspace
  .detail-irm-legend
  .detail-chart-legend-item.is-anchor::before {
  width: 2px;
  height: 11px;
}

.detail-irm-legend .detail-chart-legend-item.is-target {
  --anchor-color: color-mix(in srgb, var(--text) 52%, var(--line-strong));
}

.detail-irm-legend .detail-chart-legend-item.is-current {
  --anchor-color: var(--tide);
}

.detail-irm-legend .detail-chart-legend-item.is-current > span {
  color: var(--tide);
}

.detail-irm-legend .detail-chart-legend-item.is-projected {
  --anchor-color: var(--amber);
}

.detail-irm-legend .detail-chart-legend-item.is-projected > span {
  color: var(--amber);
}

.detail-irm-section .detail-irm-plot {
  aspect-ratio: 16 / 10;
  max-height: 340px;
  min-height: 240px;
}

.detail-irm-section .detail-irm-path-borrow {
  stroke: #5b8def;
  stroke-width: 2.75;
}

.detail-irm-section .detail-irm-path-supply {
  stroke: #f28e2b;
  stroke-width: 2.35;
}

.detail-irm-section .detail-irm-marker-line,
.detail-irm-chart .detail-irm-marker-line {
  stroke-width: 1.35;
  stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.detail-irm-section .detail-irm-marker-line.is-current,
.detail-irm-chart .detail-irm-marker-line.is-current {
  stroke: var(--tide);
  opacity: 0.95;
}

.detail-irm-section .detail-irm-marker-line.is-projected,
.detail-irm-chart .detail-irm-marker-line.is-projected {
  stroke: var(--amber);
  opacity: 0.95;
}

.detail-irm-section .detail-irm-marker-line.is-target,
.detail-irm-chart .detail-irm-marker-line.is-target {
  stroke: color-mix(in srgb, var(--text) 42%, var(--line-strong));
  opacity: 0.9;
}

.detail-irm-section .detail-irm-current-point,
.detail-irm-chart .detail-irm-current-point {
  fill: var(--tide);
  stroke: var(--surface-raised);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.detail-irm-section .detail-irm-projected-point,
.detail-irm-chart .detail-irm-projected-point {
  fill: var(--amber);
  stroke: var(--surface-raised);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.detail-irm-section .detail-chart-hover-point.is-borrow {
  stroke: #5b8def;
}

.detail-irm-section .detail-chart-hover-point.is-supply {
  stroke: #f28e2b;
}

@media (max-width: 900px) {
  .detail-irm-section .detail-irm-breakdown {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.detail-chart-end-point {
  fill: var(--surface);
  stroke: var(--series-color, var(--cobalt));
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.detail-chart-point {
  fill: var(--surface);
  stroke: var(--cobalt);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.detail-chart-point:focus {
  fill: var(--cobalt);
  outline: none;
}

.detail-chart-hover-guide {
  stroke: var(--line-strong);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.detail-chart-hover-point {
  fill: var(--surface);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.detail-chart-hover-capture {
  cursor: crosshair;
  touch-action: none;
}

.detail-chart-tooltip {
  position: absolute;
  z-index: 90;
  min-width: 156px;
  max-width: 260px;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface-raised);
  box-shadow: 0 10px 28px rgba(8, 15, 28, 0.28);
  font-size: 0.72rem;
  line-height: 1.35;
  pointer-events: none;
}

.detail-chart-tooltip[hidden] {
  display: none;
}

.detail-chart-tooltip-time {
  margin-bottom: 6px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
}

.detail-chart-tooltip-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 2px 0;
}

.detail-chart-tooltip-row::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 0.2em;
  border-radius: 50%;
  background: var(--series-color, var(--cobalt));
}

.detail-chart-tooltip-label {
  flex: 1 1 auto;
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
}

.detail-chart-tooltip-value {
  flex: 0 0 auto;
  color: var(--text);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.detail-chart figcaption {
  margin-top: 3px;
  line-height: 1.45;
}

.protocol-controls-section {
  display: grid;
  gap: 12px;
}

.protocol-control-group {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-raised) 54%, var(--surface));
}

.protocol-control-group > h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 12px 7px;
  color: var(--positive);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.protocol-control-group > h4::after {
  height: 1px;
  flex: 1;
  background: var(--line);
  content: "";
}

.protocol-capacity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 5px 12px 14px;
}

.protocol-capacity-card {
  min-width: 0;
  overflow: hidden;
  padding: 0 16px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.protocol-capacity-card h5 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 -16px 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--positive);
  font-family: var(--font-mono);
  font-size: 0.61rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.protocol-capacity-card h5::before {
  display: inline-grid;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border: 1px solid currentColor;
  border-radius: 50%;
  content: "$";
  font-size: 0.64rem;
  line-height: 1;
  place-items: center;
}

.protocol-capacity-card.is-supply h5 {
  color: var(--amber);
}

.protocol-capacity-metrics,
.protocol-control-metrics {
  display: grid;
  margin: 0;
}

.protocol-capacity-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.protocol-control-metrics {
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}

.protocol-control-metric {
  min-width: 0;
  padding: 9px 12px;
  border-right: 1px solid var(--line);
}

.protocol-capacity-metrics .protocol-control-metric {
  padding: 7px 12px 10px;
  text-align: center;
}

.protocol-capacity-metrics .protocol-control-metric:first-child {
  padding-left: 0;
}

.protocol-capacity-metrics .protocol-control-metric:last-child {
  padding-right: 0;
}

.protocol-capacity-metrics .protocol-control-metric:last-child,
.protocol-control-metrics .protocol-control-metric:last-child {
  border-right: 0;
}

.protocol-control-metric dt {
  margin-bottom: 5px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.protocol-control-metric dd {
  overflow: hidden;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.protocol-capacity-metrics .protocol-control-metric dd {
  color: var(--text);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: normal;
}

.protocol-capacity-card.is-supply
  .protocol-capacity-metrics
  .protocol-control-metric:last-child
  dd {
  color: var(--amber);
}

.protocol-capacity-card.is-borrow
  .protocol-capacity-metrics
  .protocol-control-metric:last-child
  dd {
  color: var(--positive);
}

.protocol-control-metric.is-enabled dd {
  color: var(--positive);
}

.protocol-control-metric.is-warning dd {
  color: var(--amber);
}

.protocol-control-metric.is-critical dd {
  color: var(--risk);
}

.protocol-capacity-card
  .protocol-capacity-metrics
  .protocol-control-metric:last-child.is-warning
  dd {
  color: var(--amber);
}

.protocol-capacity-card
  .protocol-capacity-metrics
  .protocol-control-metric:last-child.is-critical
  dd {
  color: var(--risk);
}

.protocol-control-metric.is-neutral dd {
  color: var(--muted);
}

.protocol-capacity-meter {
  position: relative;
  height: 8px;
  overflow: hidden;
  margin-top: 9px;
  border: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--line-strong) 58%, transparent);
}

.protocol-capacity-meter > span {
  display: block;
  width: var(--protocol-capacity-fill);
  height: 100%;
  border-radius: inherit;
  background: var(--positive);
}

.protocol-capacity-card.is-supply .protocol-capacity-meter > span {
  background: var(--amber);
}

.protocol-capacity-meter > span.is-warning {
  background: var(--amber);
}

.protocol-capacity-meter > span.is-critical {
  background: var(--risk);
}

.protocol-capacity-scale {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-variant-numeric: tabular-nums;
}

.protocol-capacity-scale .protocol-capacity-current {
  position: absolute;
  left: clamp(28px, var(--protocol-capacity-position), calc(100% - 28px));
  color: var(--positive);
  font-weight: 750;
  transform: translateX(-50%);
}

.protocol-capacity-card.is-supply .protocol-capacity-current {
  color: var(--amber);
}

.protocol-capacity-scale.is-warning .protocol-capacity-current {
  color: var(--amber);
}

.protocol-capacity-scale.is-critical .protocol-capacity-current {
  color: var(--risk);
}

@media (max-width: 780px) {
  .protocol-capacity-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .protocol-capacity-metrics .protocol-control-metric dd {
    font-size: 0.78rem;
  }
}

@media (max-width: 520px) {
  .protocol-capacity-grid {
    padding-inline: 9px;
  }

  .protocol-capacity-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .protocol-capacity-metrics .protocol-control-metric:last-child {
    grid-column: 1 / -1;
    padding-top: 9px;
    border-top: 1px solid var(--line);
    border-right: 0;
  }

  .protocol-capacity-metrics .protocol-control-metric:nth-child(2) {
    border-right: 0;
  }

  .protocol-control-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .protocol-control-metrics .protocol-control-metric {
    border-bottom: 1px solid var(--line);
  }

  .protocol-control-metrics .protocol-control-metric:nth-child(2n) {
    border-right: 0;
  }

  .protocol-control-metrics .protocol-control-metric:last-child,
  .protocol-control-metrics
    .protocol-control-metric:nth-last-child(2):nth-child(odd) {
    border-bottom: 0;
  }

  .protocol-control-metrics .protocol-control-metric:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    border-right: 0;
  }
}

.detail-enrichment.is-error {
  display: grid;
  min-height: 112px;
  place-items: center;
  align-content: center;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--risk) 30%, var(--line));
  border-radius: 6px;
  background: var(--risk-soft);
  text-align: center;
}

.detail-error-copy {
  max-width: 520px;
  margin-bottom: 12px;
  color: var(--text);
}

.detail-retry {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--text);
  background: var(--surface);
  font-size: 0.68rem;
  font-weight: 750;
}

.detail-action-note {
  max-width: 300px;
  line-height: 1.35;
  text-align: right;
}

.detail-carry {
  position: relative;
  display: grid;
  padding: 16px;
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--cobalt);
  border-radius: 6px;
  background: var(--surface-hover);
  grid-template-columns: 1fr auto 1fr auto 1.15fr;
  gap: 10px;
}

.detail-carry-node {
  min-width: 0;
}

.detail-carry-node span,
.detail-carry-node strong {
  display: block;
}

.detail-carry-node span {
  margin-bottom: 5px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.52rem;
  text-transform: uppercase;
}

.detail-carry-node strong {
  font-family: var(--font-mono);
  font-size: 1rem;
}

.detail-carry-node.supply strong {
  color: var(--tide);
}

.detail-carry-node.borrow strong {
  color: var(--risk);
}

.detail-carry-node.result strong {
  color: var(--cobalt);
}

.detail-carry-op {
  align-self: center;
  color: var(--faint);
  font-size: 1rem;
}

.warning-list {
  display: grid;
  gap: 7px;
  padding: 0;
  margin: 9px 0 0;
  list-style: none;
}

.warning-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--amber) 28%, var(--line));
  border-radius: 4px;
  color: var(--text);
  background: var(--amber-soft);
  font-size: 0.7rem;
}

.warning-item svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--amber);
}

.provider-fields {
  display: grid;
  border-top: 1px solid var(--line);
}

.provider-field {
  display: grid;
  min-width: 0;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line);
  grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
  gap: 15px;
}

.provider-field dd,
.technical-id code {
  font-family: var(--font-mono);
  font-size: 0.65rem;
}

.provider-field dd a {
  color: var(--cobalt);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.provider-field dd.is-identifier {
  color: var(--cobalt);
}

.nested-path {
  color: var(--faint);
  font-weight: 400;
}

.detail-empty {
  margin: 0;
  color: var(--faint);
  font-size: 0.72rem;
}

.technical-disclosure {
  border-top: 1px solid var(--line);
}

.technical-disclosure > summary {
  position: relative;
  display: grid;
  min-height: 48px;
  align-items: center;
  padding: 8px 28px 8px 0;
  list-style: none;
  cursor: pointer;
  grid-template-columns: minmax(0, 1fr);
}

.technical-disclosure > summary::-webkit-details-marker {
  display: none;
}

.technical-disclosure > summary::after {
  position: absolute;
  right: 3px;
  color: var(--faint);
  content: "+";
  font-family: var(--font-mono);
  font-size: 1rem;
}

.technical-disclosure[open] > summary::after {
  content: "−";
}

.technical-disclosure > summary:hover span {
  color: var(--cobalt);
}

.technical-disclosure > summary span {
  font-size: 0.72rem;
  font-weight: 750;
}

.technical-disclosure > summary small {
  margin-top: 2px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.57rem;
}

.technical-content {
  display: grid;
  gap: 12px;
  padding: 4px 0 8px;
}

.technical-id {
  display: grid;
  min-width: 0;
  align-items: center;
  gap: 6px 9px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-hover);
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.technical-id > span:first-child {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.54rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.technical-id code {
  overflow: hidden;
  color: var(--cobalt);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.technical-id .copy-button {
  min-height: 30px;
  padding: 0 8px;
}

.technical-sources {
  display: grid;
  padding: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  list-style: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.technical-sources li {
  display: grid;
  min-width: 0;
  padding: 9px 11px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.technical-sources li:nth-child(2n) {
  border-right: 0;
}

.technical-sources li:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.technical-sources strong {
  overflow: hidden;
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.technical-sources span,
.technical-sources small {
  margin-top: 2px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.56rem;
}

.technical-sources small {
  color: var(--risk);
}

.dialog-footer {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 8px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface-hover);
}

.detail-actions {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
}

.copy-button,
.detail-action-link {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 750;
  text-decoration: none;
}

.detail-action-link:focus-visible,
.detail-retry:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--cobalt) 42%, transparent);
  outline-offset: 2px;
}

.detail-history-unavailable {
  padding: 10px 12px;
  border-left: 3px solid var(--line-strong);
  background: var(--surface-hover);
  line-height: 1.45;
}

.copy-button:hover {
  border-color: var(--line-strong);
}

.copy-button svg,
.detail-action-link svg {
  width: 14px;
  height: 14px;
}

.copy-status {
  overflow: hidden;
  color: var(--tide);
  font-family: var(--font-mono);
  font-size: 0.61rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-action-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

.detail-action-link {
  border: 1px solid var(--line);
  color: var(--text);
  background: var(--surface);
}

.detail-action-link:hover {
  border-color: var(--cobalt);
  color: var(--cobalt);
}

.detail-action-link.is-primary {
  border-color: var(--cobalt-strong);
  color: var(--ledger);
  background: var(--cobalt-strong);
}

.detail-action-link.is-primary:hover {
  color: var(--ledger);
  background: var(--cobalt);
}

.toast-region {
  position: fixed;
  z-index: 90;
  right: 18px;
  bottom: 18px;
  display: grid;
  gap: 8px;
  width: min(340px, calc(100vw - 36px));
}

.toast {
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--cobalt);
  border-radius: 5px;
  color: var(--text);
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
  font-size: 0.72rem;
}

.toast.is-error {
  border-left-color: var(--risk);
}

.feedback-implemented-toast {
  position: relative;
  display: grid;
  gap: 7px;
  padding: 16px 42px 16px 17px;
  border-left-width: 4px;
  background:
    linear-gradient(135deg, var(--cobalt-soft), transparent 68%),
    var(--surface-raised);
}

.feedback-implemented-eyebrow {
  color: var(--cobalt);
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.feedback-implemented-toast strong {
  font-family: var(--font-display);
  font-size: 0.92rem;
  line-height: 1.25;
}

.feedback-implemented-toast p {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

.feedback-implemented-close {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
  font-size: 1.15rem;
  line-height: 1;
}

.feedback-implemented-close:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.feedback-implemented-action {
  width: fit-content;
  min-height: 34px;
  margin-top: 3px;
  padding: 0 12px;
  border: 1px solid var(--cobalt-strong);
  border-radius: 4px;
  color: var(--ledger);
  background: var(--cobalt-strong);
  font-size: 0.68rem;
  font-weight: 800;
}

.feedback-implemented-action:hover {
  background: var(--cobalt);
}

.calculator-action-button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--cobalt) 48%, var(--line));
  border-radius: 4px;
  color: var(--cobalt);
  background: var(--cobalt-soft);
  font-size: 0.68rem;
  font-weight: 750;
}

.calculator-action-button:hover {
  border-color: var(--cobalt);
  color: var(--cobalt-strong);
}

.calculator-action-button svg {
  width: 15px;
  height: 15px;
}

.loop-calculator-cell {
  text-align: right;
}

.equity-position-cell {
  width: 98px;
  min-width: 98px;
}

.equity-market-metric-cell,
.equity-market-supply-cell,
.equity-market-borrow-cell {
  width: 94px;
  min-width: 94px;
}

.equity-market-utilization-cell {
  width: 118px;
  min-width: 118px;
}

.equity-market-liquidity-cell {
  width: 108px;
  min-width: 108px;
}

.equity-table-stack {
  display: inline-grid;
  width: 100%;
  min-width: 0;
  gap: 5px;
  text-align: right;
}

.equity-table-stack-line {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 7px;
  align-items: baseline;
}

.equity-table-stack-line > span {
  color: var(--ink-muted);
  font-size: 0.62rem;
  font-weight: 650;
  text-transform: uppercase;
}

.equity-table-stack-line > strong {
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.equity-table-stack-line > small {
  grid-column: 2;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.61rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.equity-market-metric-cell > strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.equity-market-metric-cell > small {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.61rem;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.equity-market-utilization-cell > strong {
  color: var(--cobalt);
}

.equity-market-metric-cell.is-warning > strong,
.equity-market-metric-cell.is-warning > small {
  color: var(--amber);
}

.loop-table-calculator-button {
  min-height: 30px;
  padding-inline: 9px;
  white-space: nowrap;
}

.leverage-calculator {
  width: min(560px, calc(100vw - 28px));
  max-width: none;
  max-height: calc(100vh - 18px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-dialog);
}

#leverage-calculator,
#borrow-calculator {
  width: min(1160px, calc(100vw - 32px));
}

.leverage-calculator::backdrop {
  background: rgba(7, 12, 22, 0.68);
  backdrop-filter: blur(4px);
}

.calculator-shell {
  max-height: calc(100vh - 18px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.calculator-header {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px 13px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(14px);
}

.calculator-kicker {
  margin: 0 0 4px;
  color: var(--cobalt);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.calculator-header h2 {
  margin: 0 0 4px;
  font-size: 1.28rem;
  letter-spacing: -0.025em;
}

.calculator-market-label {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.74rem;
}

.calculator-close {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
}

.calculator-close:hover {
  border-color: var(--line);
  color: var(--text);
  background: var(--surface-hover);
}

.calculator-close svg {
  width: 17px;
  height: 17px;
}

.calculator-unavailable {
  margin: 20px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--amber) 42%, var(--line));
  border-left: 4px solid var(--amber);
  border-radius: 6px;
  color: var(--text);
  background: var(--amber-soft);
  font-size: 0.85rem;
  line-height: 1.55;
}

.calculator-content {
  display: grid;
  gap: 11px;
  padding: 18px 20px 16px;
}

#leverage-calculator .calculator-content {
  align-items: start;
  grid-template-columns: minmax(390px, 1.05fr) minmax(420px, 1fr);
  gap: 14px 18px;
}

#borrow-calculator .calculator-content {
  align-items: start;
  grid-template-columns: minmax(390px, 1.05fr) minmax(420px, 1fr);
  gap: 14px 18px;
}

.calculator-column {
  display: grid;
  min-width: 0;
  gap: 11px;
}

#leverage-calculator .calculator-metric-rail,
#leverage-calculator .calculator-risk-card,
#leverage-calculator .calculator-note,
#borrow-calculator .calculator-metric-rail,
#borrow-calculator .calculator-risk-card,
#borrow-calculator .calculator-note {
  grid-column: 1 / -1;
}

.calculator-metric-rail {
  display: grid;
  margin: 0 -20px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-raised) 62%, var(--surface));
  grid-template-columns: 0.85fr 1.25fr 0.9fr 1.2fr;
}

.calculator-metric-rail > div {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 70px;
  align-content: center;
  padding: 10px 16px;
  border-right: 1px solid var(--line);
}

.calculator-metric-rail > div:last-child {
  border-right: 0;
}

.calculator-metric-rail dt,
.calculator-metric-rail dd {
  margin: 0;
}

.calculator-metric-rail dt {
  margin-bottom: 5px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.calculator-metric-rail dd {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  white-space: nowrap;
}

.calculator-ltv-metric dd {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
}

.calculator-ltv-metric small {
  flex-basis: 100%;
  margin-top: 2px;
  overflow: hidden;
  color: var(--faint);
  font-size: 0.62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#leverage-calculator .calculator-ltv-metric dd,
#leverage-calculator .calculator-liquidation-metric dd {
  display: grid;
  gap: 2px;
}

#leverage-calculator .calculator-ltv-metric small,
#leverage-calculator .calculator-liquidation-metric small {
  color: var(--faint);
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: normal;
}

.calculator-liquidation-metric dt {
  display: flex;
  align-items: center;
  gap: 6px;
}

.calculator-liquidation-metric dt span {
  padding: 1px 5px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  color: var(--muted);
  font-size: 0.56rem;
  letter-spacing: 0.04em;
}

.calculator-buffer-metric dd {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 8px;
  color: var(--risk);
}

.calculator-summary-risk-level {
  max-width: 100%;
  margin-left: auto;
  padding: 2px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--muted);
  background: var(--surface-hover);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
  text-align: center;
  text-transform: uppercase;
  white-space: normal;
}

.calculator-summary-risk-level.is-safe {
  border-color: color-mix(in srgb, var(--tide) 42%, var(--line));
  color: var(--tide);
  background: var(--tide-soft);
}

.calculator-summary-risk-level.is-moderate,
.calculator-summary-risk-level.is-high {
  border-color: color-mix(in srgb, var(--amber) 48%, var(--line));
  color: var(--amber);
  background: var(--amber-soft);
}

.calculator-summary-risk-level.is-critical {
  border-color: color-mix(in srgb, var(--risk) 62%, var(--line));
  color: var(--risk);
  background: var(--risk-soft);
}

.calculator-section-label {
  margin: 0 0 9px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.calculator-controls {
  display: grid;
}

.calculator-controls > label,
.calculator-leverage-heading label,
.calculator-amount-field > label,
.borrow-calculator-field > label {
  margin-bottom: 6px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.calculator-money-input {
  display: flex;
  height: 44px;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--muted);
  background: var(--surface-raised);
}

.calculator-money-input:focus-within {
  border-color: var(--cobalt);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cobalt) 12%, transparent);
}

.calculator-money-input:has(input[aria-invalid="true"]) {
  border-color: var(--risk);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--risk) 11%, transparent);
}

.calculator-money-input > span {
  padding-left: 12px;
  font-family: var(--font-mono);
}

.calculator-money-input input {
  min-width: 0;
  /* The global `input { width: 100% }` would make the auto flex-basis span the
     whole row and crush the token-symbol span; grow from a zero basis instead. */
  flex: 1 1 0%;
  height: 42px;
  padding-left: 7px;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}

.calculator-inline-action {
  min-height: 27px;
  flex: none;
  margin-right: 8px;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--muted);
  background: var(--surface-hover);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  white-space: nowrap;
}

.calculator-inline-action:hover:not(:disabled) {
  border-color: var(--cobalt);
  color: var(--cobalt-strong);
  background: var(--cobalt-soft);
}

.calculator-inline-action[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--cobalt) 62%, var(--line));
  color: var(--cobalt);
  background: var(--cobalt-soft);
}

.borrow-calculator-inputs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.borrow-calculator-field {
  display: grid;
  min-width: 0;
  align-content: start;
}

.borrow-calculator-field .calculator-money-input > span,
.calculator-amount-field .calculator-money-input > span {
  max-width: 45%;
  flex: none;
  padding: 0 12px 0 7px;
  overflow: hidden;
  font-size: 0.74rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.borrow-calculator-price {
  min-height: 1.1em;
  margin: 6px 0 0;
  overflow: hidden;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.borrow-calculator-inputs > .calculator-input-error {
  grid-column: 1 / -1;
}

.calculator-money-input input::-webkit-inner-spin-button,
.calculator-money-input input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.calculator-input-error {
  margin: 6px 0 0;
  color: var(--risk);
  font-size: 0.72rem;
}

.calculator-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.calculator-presets button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  background: var(--surface-hover);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.calculator-presets button:hover:not(:disabled) {
  border-color: var(--line-strong);
  color: var(--text);
}

.calculator-presets button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--cobalt) 62%, var(--line));
  color: var(--cobalt);
  background: var(--cobalt-soft);
}

.calculator-presets button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.calculator-amount-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.calculator-token-slot {
  display: contents;
}

.calculator-money-input .asset-token {
  width: 24px;
  height: 24px;
  flex: none;
  margin-left: 10px;
  font-size: 0.48rem;
}

.calculator-amount-field {
  display: grid;
  min-width: 0;
  align-content: start;
}

.calculator-slider-mode {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.calculator-slider-mode > span {
  margin-right: 2px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.calculator-slider-mode button {
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-hover);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

.calculator-slider-mode button:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

.calculator-slider-mode button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.calculator-slider-mode button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--cobalt) 62%, var(--line));
  color: var(--cobalt);
  background: var(--cobalt-soft);
}

.calculator-ltv-stage {
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--tide);
  background: var(--tide-soft);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.calculator-ltv-stage.is-unknown {
  color: var(--muted);
  background: var(--surface-subtle);
}

.calculator-ltv-slider {
  position: relative;
  height: 32px;
  margin-top: 8px;
}

.calculator-ltv-stage-track {
  --stage-current: 0%;
  --stage-hold: 100%;
  --stage-max: 100%;
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-subtle);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-strong) 68%, transparent);
  transform: translateY(-50%);
}

.calculator-ltv-stage-track[data-stage="unknown"] .calculator-stage-segment {
  display: none;
}

.calculator-stage-segment {
  position: absolute;
  top: 0;
  bottom: 0;
}

.calculator-stage-segment.is-hold {
  left: 0;
  width: var(--stage-hold);
  background: color-mix(in srgb, var(--positive) 74%, var(--surface-subtle));
}

.calculator-stage-segment.is-max {
  left: var(--stage-hold);
  width: calc(var(--stage-max) - var(--stage-hold));
  background: color-mix(in srgb, var(--cobalt) 58%, var(--surface-subtle));
}

.calculator-stage-segment.is-liquidation {
  left: var(--stage-max);
  right: 0;
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--risk) 68%, var(--surface-subtle)) 0 5px,
    color-mix(in srgb, var(--risk) 35%, var(--surface-subtle)) 5px 10px
  );
}

/* Dims the stage colors between the thumb and the end of the draggable
   range so the vivid portion reads as the slider's fill. */
.calculator-stage-remaining {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--stage-current);
  width: calc(var(--stage-max) - var(--stage-current));
  background: color-mix(in srgb, var(--surface) 74%, transparent);
}

.calculator-stage-legend {
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0 0;
  gap: 6px 22px;
}

.calculator-stage-legend:not(:has(> div:not([hidden]))) {
  display: none;
}

.calculator-stage-legend > div {
  min-width: 96px;
  padding-top: 6px;
  border-top: 2px solid var(--line);
}

.calculator-stage-legend > div.is-hold {
  border-color: var(--positive);
}

.calculator-stage-legend > div.is-liquidation {
  border-color: var(--risk);
}

.calculator-stage-legend dt,
.calculator-stage-legend dd {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calculator-stage-legend dt {
  color: var(--faint);
  font-size: 0.66rem;
}

.calculator-stage-legend dd {
  margin-top: 2px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 750;
}

.calculator-stage-context {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--positive) 32%, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--positive) 6%, transparent);
}

.calculator-stage-context > div,
.calculator-stage-context dl {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.calculator-stage-context > div span,
.calculator-stage-context dt {
  color: var(--muted);
  font-size: 0.68rem;
}

.calculator-stage-context > div strong,
.calculator-stage-context dd {
  margin: 0;
  color: var(--positive);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.calculator-stage-context > p {
  margin: 0;
  color: var(--faint);
  font-size: 0.7rem;
  line-height: 1.45;
}

.calculator-oracle-guidance.is-moderate,
.calculator-oracle-guidance.is-unknown {
  border-color: color-mix(in srgb, var(--amber) 38%, var(--line));
  background: color-mix(in srgb, var(--amber) 7%, transparent);
}

.calculator-oracle-guidance.is-moderate > div strong,
.calculator-oracle-guidance.is-unknown > div strong {
  color: var(--amber);
}

.calculator-oracle-guidance.is-high {
  border-color: color-mix(in srgb, var(--negative) 42%, var(--line));
  background: color-mix(in srgb, var(--negative) 7%, transparent);
}

.calculator-oracle-guidance.is-high > div strong {
  color: var(--negative);
}

.calculator-stage-context dl {
  margin: 0;
}

.calculator-stage-context dl > div {
  display: flex;
  gap: 5px;
}

.calculator-leverage-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.calculator-leverage-heading label {
  margin-bottom: 0;
}

.calculator-leverage-heading output {
  margin-left: auto;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* The range input floats transparently over the stage track and spans only
   the draggable portion (up to the opening max). The 10px offsets widen it
   by one thumb so the thumb's center lines up with the track's LTV scale. */
.calculator-range {
  --slider-span: 100%;
  --slider-focus-ring: transparent;
  position: absolute;
  top: 0;
  left: -10px;
  width: calc(var(--slider-span) + 20px);
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  appearance: none;
}

.calculator-range::-webkit-slider-runnable-track {
  height: 32px;
  background: transparent;
}

.calculator-range::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: 6px;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: var(--cobalt);
  box-shadow:
    0 0 0 1px var(--cobalt),
    0 0 0 5px var(--slider-focus-ring),
    0 3px 9px color-mix(in srgb, var(--cobalt) 32%, transparent);
  appearance: none;
}

.calculator-range::-moz-range-track {
  height: 32px;
  background: transparent;
}

.calculator-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: var(--cobalt);
  box-shadow:
    0 0 0 1px var(--cobalt),
    0 0 0 5px var(--slider-focus-ring),
    0 3px 9px color-mix(in srgb, var(--cobalt) 32%, transparent);
}

.calculator-range:focus-visible {
  --slider-focus-ring: color-mix(in srgb, var(--focus) 42%, transparent);
  outline: 0;
}

/* [data-pointer-focus] marks mouse/touch interaction (set in markets.js):
   Chrome matches :focus-visible on range inputs even for pointer focus, which
   otherwise leaves a ring around the track after every drag. */
.calculator-range[data-pointer-focus]:focus-visible {
  --slider-focus-ring: transparent;
}

.calculator-range-labels {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.66rem;
}

.calculator-slider-help {
  margin: 6px 0 0;
  color: var(--faint);
  font-size: 0.68rem;
  line-height: 1.45;
}

.calculator-leverage-presets button:disabled {
  display: none;
}

/* Collapse an entirely unavailable preset row so it does not leave a gap. */
.calculator-leverage-presets:not(:has(button:not([hidden], :disabled))) {
  display: none;
}

.calculator-yield-card,
.calculator-profit-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-hover);
}

.calculator-yield-card {
  position: relative;
  overflow: hidden;
  border-left: 4px solid var(--tide);
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--tide-soft) 75%, transparent), transparent 58%),
    var(--surface-hover);
}

.calculator-yield-card::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 34%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--cobalt));
  content: "";
}

.calculator-yield-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}

.calculator-yield-heading span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.76rem;
}

.calculator-yield-heading strong {
  color: var(--positive);
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
}

#leverage-calculator .calculator-yield-card,
#borrow-calculator .calculator-yield-card {
  padding: 17px 18px;
}

#leverage-calculator .calculator-yield-heading,
#borrow-calculator .calculator-yield-heading {
  align-items: center;
}

#leverage-calculator .calculator-yield-heading span,
#borrow-calculator .calculator-yield-heading span {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

#leverage-calculator .calculator-yield-heading strong,
#borrow-calculator .calculator-yield-heading strong {
  font-size: 2rem;
}

.calculator-yield-card > p {
  margin: 3px 0 11px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.66rem;
}

#leverage-calculator .calculator-yield-card > p,
#borrow-calculator .calculator-yield-card > p {
  margin: 4px 0 15px;
  font-family: var(--font-sans);
  font-size: 0.76rem;
}

.calculator-ledger {
  display: grid;
  margin: 0;
}

.calculator-ledger > div {
  display: flex;
  min-height: 31px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.calculator-ledger dt,
.calculator-ledger dd {
  margin: 0;
  font-size: 0.8rem;
}

.calculator-ledger dt {
  color: var(--muted);
}

.calculator-ledger dd {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
}

.calculator-borrowed {
  color: var(--amber);
}

.calculator-profit-card h3,
.calculator-rate-heading h3,
.calculator-risk-heading h3 {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 760;
}

.calculator-profit-card h3 {
  margin-bottom: 6px;
  color: var(--muted);
  font-family: var(--font-mono);
}

.calculator-rate-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}

.calculator-rate-heading h3 {
  color: var(--text);
}

.calculator-rate-heading > span {
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-subtle);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.calculator-rate-heading > span.is-projected {
  color: var(--positive);
  background: color-mix(in srgb, var(--positive) 10%, var(--surface-subtle));
}

.calculator-rate-heading > span.is-size-quoted {
  color: var(--cobalt);
  background: var(--cobalt-soft);
}

.calculator-rate-section {
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

#leverage-calculator .calculator-rate-heading,
#borrow-calculator .calculator-rate-heading {
  margin-bottom: 4px;
}

#leverage-calculator .calculator-rate-heading h3,
#borrow-calculator .calculator-rate-heading h3 {
  font-size: 0.98rem;
}

.calculator-rate-ledger {
  display: grid;
  margin: 0;
}

.calculator-rate-ledger > div {
  padding: 9px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
}

.calculator-rate-ledger > div:last-child {
  padding-bottom: 2px;
  border-bottom: 0;
}

.calculator-rate-ledger > div:nth-last-child(2):has(+ [hidden]) {
  padding-bottom: 2px;
  border-bottom: 0;
}

.calculator-rate-primary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}

.calculator-rate-primary dt,
.calculator-rate-primary dd {
  margin: 0;
}

.calculator-rate-primary dt {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 650;
}

.calculator-rate-primary dd {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.calculator-rate-ledger p {
  margin: 2px 0 0;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.66rem;
}

.calculator-equity-strip {
  display: grid;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-hover);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.calculator-equity-strip > div {
  min-width: 0;
  padding: 11px 14px;
  border-right: 1px solid var(--line);
}

.calculator-equity-strip > div:last-child {
  border-right: 0;
}

.calculator-equity-strip dt,
.calculator-equity-strip dd {
  margin: 0;
}

.calculator-equity-strip dt {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 0.72rem;
}

.calculator-equity-strip dd {
  font-family: var(--font-mono);
  font-size: 0.94rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.calculator-rate-impact {
  display: grid;
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-subtle);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.calculator-rate-impact > div {
  min-width: 0;
  padding: 8px 12px;
  border-right: 1px solid var(--line);
}

.calculator-rate-impact > div:last-child {
  border-right: 0;
}

.calculator-rate-impact > div > span {
  display: block;
  margin-bottom: 5px;
  color: var(--faint);
  font-size: 0.68rem;
  text-transform: uppercase;
}

.calculator-rate-impact strong {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.calculator-rate-impact .calculator-utilization-change {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

.calculator-rate-impact b {
  color: var(--faint);
  font-weight: 500;
}

.calculator-rate-impact .is-worse {
  color: var(--negative);
}

.calculator-rate-impact .is-better {
  color: var(--positive);
}

.calculator-net-row {
  margin-top: 5px;
  padding-top: 7px;
  border-top: 1px solid var(--line-strong);
}

.calculator-net-row dt,
.calculator-net-row dd {
  color: var(--text);
  font-weight: 800;
}

.calculator-periods {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--line);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
}

.calculator-periods > div {
  display: grid;
  min-width: 0;
  min-height: 58px;
  place-items: center;
  align-content: center;
  padding: 8px;
  background: var(--surface-hover);
}

.calculator-periods span {
  margin-bottom: 2px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.64rem;
}

.calculator-periods strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--positive);
  font-family: var(--font-mono);
  font-size: 0.94rem;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calculator-periods strong.number-negative {
  color: var(--negative);
}

.calculator-risk-card {
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--tide) 42%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--tide-soft) 52%, var(--surface));
}

.calculator-risk-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 5px;
}

.calculator-risk-note {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.5;
}

.calculator-risk-heading h3 {
  display: flex;
  align-items: center;
  gap: 7px;
}

.calculator-risk-heading h3 svg {
  width: 17px;
  height: 17px;
}

.calculator-risk-heading > span {
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--tide);
  background: var(--tide-soft);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.calculator-risk-card.is-unknown {
  border-color: var(--line-strong);
  background: var(--surface-subtle);
}

.calculator-risk-card.is-unknown .calculator-risk-heading > span {
  color: var(--muted);
  background: var(--surface-hover);
}

.calculator-risk-card.is-moderate {
  border-color: color-mix(in srgb, var(--amber) 50%, var(--line));
  background: color-mix(in srgb, var(--amber-soft) 52%, var(--surface));
}

.calculator-risk-card.is-moderate .calculator-risk-heading > span,
.calculator-risk-card.is-high .calculator-risk-heading > span {
  color: var(--amber);
  background: var(--amber-soft);
}

.calculator-risk-card.is-high {
  border-color: color-mix(in srgb, var(--amber) 72%, var(--risk));
  background: color-mix(in srgb, var(--amber-soft) 68%, var(--risk-soft));
}

.calculator-risk-card.is-critical {
  border-color: color-mix(in srgb, var(--risk) 62%, var(--line));
  background: color-mix(in srgb, var(--risk-soft) 68%, var(--surface));
  box-shadow: inset 0 0 34px color-mix(in srgb, var(--risk) 9%, transparent);
}

.calculator-risk-card.is-critical .calculator-risk-heading > span {
  color: var(--risk);
  background: var(--risk-soft);
}

.calculator-risk-card.is-critical .calculator-risk-ledger dd,
.calculator-risk-card.is-critical .calculator-risk-separator dd {
  color: var(--risk);
}

#leverage-calculator .calculator-risk-card,
#borrow-calculator .calculator-risk-card {
  display: grid;
  min-width: 0;
  align-items: center;
  padding: 11px 14px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 18px;
}

.calculator-risk-summary {
  min-width: 0;
}

.calculator-risk-summary h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.88rem;
}

.calculator-risk-summary h3 svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.calculator-risk-summary > p {
  margin: 3px 0 0 26px;
  color: var(--muted);
  font-size: 0.72rem;
}

.calculator-risk-facts {
  display: flex;
  align-items: stretch;
  margin: 0;
}

.calculator-risk-facts > div {
  display: grid;
  min-width: 118px;
  align-content: center;
  padding: 0 18px;
  border-left: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  text-align: center;
}

.calculator-risk-facts dt,
.calculator-risk-facts dd {
  margin: 0;
}

.calculator-risk-facts dt {
  color: var(--muted);
  font-size: 0.68rem;
}

.calculator-risk-facts dd {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 750;
  white-space: nowrap;
}

.calculator-risk-level {
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--tide) 42%, var(--line));
  border-radius: 4px;
  color: var(--tide);
  background: var(--tide-soft);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#leverage-calculator .calculator-risk-card.is-unknown .calculator-risk-level,
#borrow-calculator .calculator-risk-card.is-unknown .calculator-risk-level {
  border-color: var(--line-strong);
  color: var(--muted);
  background: var(--surface-hover);
}

#leverage-calculator .calculator-risk-card.is-moderate .calculator-risk-level,
#leverage-calculator .calculator-risk-card.is-high .calculator-risk-level,
#borrow-calculator .calculator-risk-card.is-moderate .calculator-risk-level,
#borrow-calculator .calculator-risk-card.is-high .calculator-risk-level {
  border-color: color-mix(in srgb, var(--amber) 50%, var(--line));
  color: var(--amber);
  background: var(--amber-soft);
}

#leverage-calculator .calculator-risk-card.is-critical .calculator-risk-level,
#borrow-calculator .calculator-risk-card.is-critical .calculator-risk-level {
  border-color: color-mix(in srgb, var(--risk) 62%, var(--line));
  color: var(--risk);
  background: var(--risk-soft);
}

#leverage-calculator .calculator-risk-card.is-critical #calculator-price-drop,
#leverage-calculator .calculator-risk-card.is-critical #calculator-debt-rise,
#leverage-calculator .calculator-risk-card.is-critical .calculator-risk-facts dd,
#borrow-calculator .calculator-risk-card.is-critical #borrow-calculator-risk-price-drop,
#borrow-calculator .calculator-risk-card.is-critical #borrow-calculator-debt-rise,
#borrow-calculator .calculator-risk-card.is-critical .calculator-risk-facts dd {
  color: var(--risk);
}

#leverage-calculator .calculator-risk-note,
#borrow-calculator .calculator-risk-note {
  margin: 7px 0 0 26px;
  padding-top: 7px;
}

#leverage-calculator .calculator-analysis-column {
  gap: 12px;
}

#leverage-calculator .calculator-risk-card {
  display: grid;
  grid-column: 1 / -1;
  padding: 12px 14px;
  border-color: var(--line-strong);
  border-radius: 7px;
  background: var(--surface-hover);
  box-shadow: none;
  grid-template-areas:
    "header facts"
    "explanation facts"
    "note note";
  grid-template-columns: minmax(0, 1.45fr) minmax(330px, 1fr);
  gap: 8px 20px;
}

#leverage-calculator .calculator-risk-card.is-unknown,
#leverage-calculator .calculator-risk-card.is-moderate {
  border-color: var(--line-strong);
  background: var(--surface-hover);
}

#leverage-calculator .calculator-risk-card.is-high {
  border-color: color-mix(in srgb, var(--amber) 28%, var(--line-strong));
  background: var(--surface-hover);
}

#leverage-calculator .calculator-risk-card.is-critical {
  border-color: color-mix(in srgb, var(--risk) 32%, var(--line-strong));
  background: var(--surface-hover);
  box-shadow: none;
}

#leverage-calculator .calculator-risk-compact-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  grid-area: header;
}

#leverage-calculator .calculator-risk-compact-header h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--text);
  font-size: 0.84rem;
}

#leverage-calculator .calculator-risk-compact-header h3 svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--muted);
}

#leverage-calculator .calculator-risk-level {
  flex: none;
  margin-top: 0;
}

#leverage-calculator .calculator-risk-compact-header p {
  margin: 4px 0 0 24px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

#leverage-calculator .calculator-risk-compact-header p strong {
  color: var(--text);
  font-family: var(--font-mono);
  font-weight: 750;
}

#leverage-calculator .calculator-risk-facts {
  display: grid;
  align-items: stretch;
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 4px;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  grid-area: facts;
}

#leverage-calculator .calculator-risk-facts > div {
  display: grid;
  min-width: 0;
  min-height: 48px;
  align-content: center;
  padding: 8px 12px;
  border-left: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  text-align: left;
}

#leverage-calculator .calculator-risk-facts > div:first-child {
  border-left: 0;
}

#leverage-calculator .calculator-risk-facts dt {
  color: var(--muted);
  font-size: 0.64rem;
}

#leverage-calculator .calculator-risk-facts dd {
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 0.72rem;
  white-space: normal;
}

#leverage-calculator .calculator-risk-card.is-critical .calculator-risk-facts dd {
  color: var(--text);
}

.calculator-risk-explanation {
  margin: 0 0 0 24px;
  color: var(--faint);
  font-size: 0.68rem;
  line-height: 1.45;
  grid-area: explanation;
}

#leverage-calculator .calculator-risk-note {
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  grid-area: note;
}

#leverage-calculator .calculator-metric-rail {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#leverage-calculator .calculator-money-input {
  height: 52px;
}

#leverage-calculator .calculator-money-input input {
  height: 50px;
  font-size: 1.08rem;
}

#leverage-calculator .calculator-yield-card {
  border-left: 1px solid var(--line);
  background: var(--surface-hover);
}

#leverage-calculator .calculator-yield-card::after {
  display: none;
}

#leverage-calculator .calculator-unavailable {
  border-left-width: 1px;
}

.calculator-risk-separator {
  margin-top: 5px;
  padding-top: 7px;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.calculator-capacity-warning {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--amber) 28%, var(--line));
  border-radius: 6px;
  color: var(--muted);
  background: color-mix(in srgb, var(--amber-soft) 28%, var(--surface));
  font-size: 0.75rem;
}

#leverage-calculator .calculator-capacity-warning {
  grid-column: 1 / -1;
}

.calculator-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.5;
}

.calculator-note svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: var(--cobalt);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes shimmer {
  to {
    background-position: -150% 0;
  }
}

@media (min-width: 881px) {
  .asset-groups button {
    min-height: 40px;
    padding-top: 5px;
    padding-bottom: 5px;
    align-content: center;
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
  }
}

@media (max-width: 1180px) {
  .results-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  .tabs {
    min-height: 55px;
  }

  .toolbar-meta {
    min-height: 45px;
    padding: 0 13px;
    border-top: 1px solid var(--line);
  }

  .results-count {
    margin-right: auto;
  }
}

@media (max-width: 920px) {
  #leverage-calculator,
  #borrow-calculator {
    width: min(620px, calc(100vw - 24px));
  }

  #leverage-calculator .calculator-content,
  #borrow-calculator .calculator-content {
    grid-template-columns: minmax(0, 1fr);
  }

  #leverage-calculator .calculator-metric-rail,
  #leverage-calculator .calculator-risk-card,
  #leverage-calculator .calculator-note,
  #borrow-calculator .calculator-metric-rail,
  #borrow-calculator .calculator-risk-card,
  #borrow-calculator .calculator-note {
    grid-column: auto;
  }

  .calculator-metric-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #leverage-calculator .calculator-risk-card,
  #borrow-calculator .calculator-risk-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #leverage-calculator .calculator-risk-card {
    grid-template-areas:
      "header"
      "facts"
      "explanation"
      "note";
    grid-template-columns: minmax(0, 1fr);
  }

  .calculator-risk-facts {
    grid-column: 1 / -1;
    border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  }

  .calculator-risk-facts > div {
    min-height: 42px;
    flex: 1 1 0;
  }
}

@media (max-width: 880px) {
  .site-header {
    padding-right: max(18px, env(safe-area-inset-right));
    padding-left: max(18px, env(safe-area-inset-left));
  }

  .member-name {
    display: none;
  }

  .filter-bar-toolbar .search-group {
    max-width: none;
    flex-basis: 100%;
  }

  .filter-bar-toolbar .reset-button {
    width: 100%;
    margin-left: 0;
  }

  .filter-presets {
    width: 100%;
  }

  .filter-preset-trigger {
    width: 100%;
    justify-content: center;
  }

  .filter-preset-panel {
    right: auto;
    left: 0;
    width: 100%;
  }

  .filter-grid,
  .filter-bar .filter-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .multiselect-trigger {
    min-height: 36px;
  }

  .filter-group .multiselect-option {
    min-height: 40px;
  }

  .multiselect-all,
  .multiselect-more,
  .multiselect-clear {
    min-height: 36px;
  }

  .source-section {
    padding-bottom: 18px;
  }

  .source-overview {
    grid-template-areas:
      "decision context"
      "counts counts"
      "refresh refresh";
    grid-template-columns: minmax(0, 1fr) minmax(230px, 0.72fr);
  }

  .source-counts {
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 76px;
    border-top: 1px solid var(--line);
    border-right: 0;
    border-left: 0;
  }

  .source-refresh-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .source-refresh-block + .source-refresh-block {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .source-provider > summary {
    grid-template-columns: minmax(210px, 1fr) minmax(120px, 0.56fr) minmax(190px, 0.8fr) 18px;
    gap: 11px;
  }

  .detail-decision-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  body {
    background-size: 26px 26px;
  }

  .borrow-calculator-inputs {
    grid-template-columns: 1fr;
  }

  .brand-divider,
  .brand-section {
    display: none;
  }

  .market-controls-bar {
    padding: 16px 16px 14px;
  }

  .market-controls {
    flex: 1;
    justify-content: space-between;
  }

  .as-of-block {
    text-align: left;
  }

  .source-section {
    padding-right: 16px;
    padding-left: 16px;
  }

  .section-label-row {
    align-items: flex-end;
  }

  .section-label-row span {
    max-width: 210px;
    font-size: 0.68rem;
  }

  .source-health {
    min-height: 320px;
  }

  .source-overview {
    grid-template-areas:
      "decision"
      "context"
      "counts"
      "refresh";
    grid-template-columns: 1fr;
  }

  .source-decision {
    padding: 17px 16px 14px;
  }

  .source-context {
    padding: 13px 16px 16px;
    border-top: 1px solid var(--line);
  }

  .source-counts {
    grid-column: auto;
    grid-row: auto;
    order: 3;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .source-counts > div {
    padding: 13px 6px;
  }

  .source-counts dd {
    font-size: 1.05rem;
  }

  .source-counts dt {
    font-size: 0.63rem;
  }

  .source-register {
    padding: 8px;
  }

  .source-group > summary {
    min-height: 46px;
  }

  .source-provider > summary {
    position: relative;
    min-height: 116px;
    padding: 11px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 8px;
  }

  .source-identity {
    grid-column: 1 / -1;
    padding-right: 25px;
  }

  .source-identity-text strong {
    white-space: normal;
  }

  .source-status {
    grid-column: 1;
  }

  .source-metrics {
    grid-column: 1 / -1;
    grid-row: 3;
    padding-top: 8px;
    border-top: 1px solid var(--line);
  }

  .source-chevron {
    position: absolute;
    top: 17px;
    right: 13px;
  }

  .source-provider-details {
    padding: 12px;
  }

  .source-provider-details dl {
    display: block;
  }

  .source-provider-details dt,
  .source-provider-details dd {
    border-left: 0;
  }

  .source-provider-details dt {
    padding-bottom: 2px;
    border-bottom: 0;
  }

  .source-provider-details dd {
    padding-top: 2px;
  }

  .source-overview-skeleton {
    display: grid;
    min-height: 251px;
    padding: 14px;
    grid-template-areas: none;
    grid-template-columns: 1fr;
  }

  .source-skeleton-group {
    height: 46px;
  }

  .source-skeleton-provider {
    height: 146px;
  }

  .browser-frame {
    padding: 0 0 35px;
  }

  .results-panel {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .tab-button {
    min-width: 0;
    flex: 1 0 auto;
    gap: 5px;
    padding: 0 8px;
    font-size: 0.72rem;
    white-space: nowrap;
  }

  .tab-button::after {
    right: 8px;
    left: 8px;
  }

  .tab-count {
    min-width: 0;
    padding: 2px 5px;
    font-size: 0.52rem;
  }

  /* Single-line tab bar; scrolls horizontally if labels ever outgrow it.
     The 100vw cap keeps overflow inside this scroller instead of letting it
     inflate the layout viewport. */
  .results-toolbar {
    min-width: 0;
  }

  .tabs {
    width: 100%;
    max-width: 100vw;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  .export-button {
    padding: 0 7px;
  }

  .filter-bar > summary {
    display: flex;
  }

  .filter-bar > summary:active {
    background: var(--surface-hover);
  }

  .filter-bar-summary {
    min-height: 48px;
    justify-content: flex-start;
  }

  .filter-bar-summary-main {
    margin-right: auto;
  }

  .filter-bar-summary-main strong {
    font-size: 0.82rem;
  }

  /* Chevron so the collapsed bar reads as a tappable disclosure control. */
  .filter-bar-summary::after {
    content: "";
    width: 8px;
    height: 8px;
    margin: -3px 3px 0;
    flex: 0 0 auto;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg);
    transition: transform 140ms ease;
  }

  .filter-bar[open] > .filter-bar-summary::after {
    margin-top: 3px;
    transform: rotate(225deg);
  }

  .filter-bar:not([open]) > .filter-bar-form {
    display: none;
  }

  .filter-bar[open] > .filter-bar-form {
    border-top: 1px solid var(--line);
  }

  .filter-bar-form {
    gap: 0;
    padding: 0;
  }

  .filter-bar-toolbar {
    align-items: stretch;
    padding: 12px 16px;
  }

  .filter-bar .filter-facet-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 4px;
    overflow: visible;
    clip: auto;
    white-space: normal;
    color: var(--muted);
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    text-transform: none;
  }

  .filter-bar-facets .filter-grid {
    grid-template-columns: 1fr 1fr;
  }

  /*
   * Dropdown panels: detach from their (narrow) trigger column and span the
   * full page width so options are readable on phones. alignFilterPanel()
   * in markets.js stands down at this breakpoint.
   */
  .filter-bar .multiselect,
  .filter-bar .metric-filter,
  .filter-bar .attribute-multiselect,
  .filter-bar .more-filters {
    position: static;
  }

  .filter-bar .multiselect-panel,
  .filter-bar .metric-filter-panel,
  .filter-bar .attribute-multiselect-panel,
  .filter-bar .more-filters-panel {
    top: auto;
    right: 16px;
    left: 16px;
    width: auto;
    min-width: 0;
    max-width: none;
    margin-top: 7px;
  }

  .filter-bar .multiselect-options {
    max-height: min(320px, 48vh);
  }

  /*
   * 16px is the threshold below which iOS Safari force-zooms the page when a
   * text control or select receives focus; keep every focusable control at or
   * above it so filtering does not shift the layout mid-interaction.
   */
  .filter-bar input,
  .filter-bar select,
  .filter-bar .yam-select-trigger,
  .custom-filter-panel .yam-select-trigger,
  .mobile-sort-control select,
  .mobile-sort-control .yam-select-trigger,
  .page-size-trigger {
    font-size: 16px;
  }

  /*
   * Toolbar: Export CSV has no room to be useful at phone widths, so this
   * breakpoint hides it (it still shows above 680px). Starred takes the
   * freed row; Sort | Rows keep sharing the row beneath it.
   */
  .toolbar-meta {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 9px;
    padding: 10px 13px;
  }

  .export-button {
    display: none;
  }

  .starred-view-toggle {
    display: inline-flex;
    grid-column: 1 / -1;
    width: 100%;
    min-height: 38px;
    align-items: center;
    justify-content: center;
  }

  .mobile-sort-control {
    min-width: 0;
    gap: 9px;
  }

  .mobile-sort-control select,
  .mobile-sort-control .yam-select,
  .mobile-sort-control .yam-select-trigger {
    width: auto;
    min-width: 0;
    max-width: none;
    height: 38px;
    min-height: 38px;
    flex: 1 1 auto;
  }

  .mobile-sort-control button {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
  }

  .page-size-control {
    justify-self: end;
  }

  .page-size-trigger {
    width: 88px;
    height: 38px;
  }

  /* Saved filters + Reset share one row instead of stacking full-width. */
  .filter-presets {
    position: static;
    width: auto;
    flex: 1 1 calc(50% - 12px);
  }

  .filter-preset-trigger {
    min-height: 40px;
  }

  .filter-bar-toolbar .reset-button {
    width: auto;
    min-height: 40px;
    flex: 1 1 calc(50% - 12px);
  }

  .filter-preset-panel {
    top: auto;
    right: 16px;
    left: 16px;
    width: auto;
    margin-top: 7px;
  }

  /* Uniform 40px touch targets for the facet controls. */
  .filter-bar .search-control input,
  .filter-bar .multiselect-trigger {
    height: 40px;
    min-height: 40px;
  }

  .filter-bar .search-control svg {
    top: 12px;
  }

  /*
   * Harmonized control typography: every tappable control shares one family,
   * size, weight, and ink. Muted small type stays reserved for section labels
   * and count pills only.
   */
  .starred-view-toggle,
  .filter-bar-toolbar .reset-button,
  .filter-preset-trigger {
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 650;
  }

  .filter-bar .multiselect-trigger,
  .filter-bar .metric-filter-trigger,
  .filter-bar .attribute-multiselect-trigger {
    font-size: 0.85rem;
    font-weight: 650;
  }

  .more-filters-summary-main {
    min-width: 0;
  }

  .more-filters-summary-main strong {
    overflow: hidden;
    font-size: 0.85rem;
    font-weight: 650;
    text-overflow: ellipsis;
  }

  /* The bare count is enough next to the "Safety filters" label. */
  .more-filters-count::after {
    content: "";
  }

  /* Selects are pinned at 16px (iOS no-zoom floor); a lighter weight keeps
     them from visually dominating the 0.85rem buttons around them. */
  .mobile-sort-control select,
  .mobile-sort-control .yam-select-trigger,
  .page-size-trigger {
    color: var(--text);
    font-family: var(--font-sans);
    font-weight: 500;
  }

  /* Metric pills: an even two-column grid instead of a ragged pill cloud. */
  .filter-bar-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 16px;
  }

  .filter-bar-metrics .metric-filter {
    min-width: 0;
  }

  .filter-bar .attribute-multiselect {
    width: 100%;
    max-width: none;
  }

  .filter-bar .metric-filter-trigger,
  .filter-bar .attribute-multiselect-trigger {
    width: 100%;
    max-width: none;
    min-height: 40px;
  }

  .filter-bar .more-filters > summary {
    width: 100%;
    min-height: 40px;
  }

  /* Pin only the chevron to the right edge; keep label + value together. */
  .filter-bar .metric-filter-trigger > svg,
  .filter-bar .attribute-multiselect-trigger > svg,
  .filter-bar .more-filters > summary .more-filters-chevron {
    margin-left: auto;
  }

  .more-filters-panel {
    grid-template-columns: 1fr;
  }

  .quick-filter-row {
    width: auto;
    grid-template-columns: minmax(0, 1fr);
    align-items: flex-start;
    gap: 6px;
  }

  .quick-filter-label {
    width: auto;
  }

  .quick-filter-chips {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  .quick-filter-chips button {
    min-height: 38px;
    gap: 6px;
    padding: 0 13px;
    font-size: 0.8rem;
  }

  .quick-filter-chips small {
    font-size: 0.62rem;
  }

  .filter-bar-chips {
    padding: 12px 16px;
  }

  .more-filters {
    padding: 0;
  }

  /* The active tab pill already shows the result count. */
  .results-count {
    display: none;
  }

  .page-size-label {
    display: none;
  }

  .mobile-sort-control {
    display: flex;
  }

  .mobile-sort-control > span {
    display: none;
  }

  .table-shell {
    display: none;
  }

  .exit-intel-shell {
    display: block;
    overflow-x: hidden;
    border: 0;
    border-radius: 0;
  }

  .exit-intel-shell table,
  .exit-intel-shell thead,
  .exit-intel-shell tbody,
  .exit-intel-shell tr,
  .exit-intel-shell th,
  .exit-intel-shell td {
    display: block;
    width: 100%;
  }

  .exit-intel-shell thead {
    padding: 0 14px 10px;
  }

  .exit-intel-shell thead tr {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
  }

  .exit-intel-shell th {
    position: static;
    width: auto;
    padding: 0;
    border-bottom: 0;
    background: transparent;
  }

  .exit-intel-shell tbody {
    display: grid;
    gap: 10px;
    padding: 0 14px 14px;
  }

  .exit-intel-shell tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px 14px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
  }

  .exit-intel-shell td {
    width: auto;
    min-width: 0;
    padding: 0;
    border-bottom: 0;
  }

  .exit-intel-shell td.exit-col-asset,
  .exit-intel-shell td.exit-col-exit {
    grid-column: 1 / -1;
  }

  .exit-intel-panel {
    padding-right: 0;
    padding-left: 0;
  }

  .exit-intel-header {
    padding-right: 14px;
    padding-left: 14px;
  }

  .exit-intel-search {
    flex: 1 1 100%;
    max-width: none;
  }

  .column-picker {
    display: none;
  }

  .market-cards {
    display: grid;
    /* Without an explicit column the implicit track auto-sizes to the widest
       card's max-content (~454px on a 390px phone), which inflates the layout
       viewport and renders the whole page zoomed-out. */
    grid-template-columns: minmax(0, 1fr);
  }

  .market-card {
    width: 100%;
    padding: 15px 16px;
    border: 0;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    background: var(--surface);
    cursor: pointer;
    font: inherit;
    text-align: left;
  }

  .market-card:hover {
    background: var(--surface-hover);
  }

  .card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
  }

  .card-header .market-cell {
    min-width: 0;
  }

  .card-header .market-name,
  .card-header .market-subline {
    max-width: calc(100vw - 160px);
  }

  .card-primary-value {
    flex: 0 0 auto;
    text-align: right;
  }

  .card-primary-value strong,
  .card-primary-value span {
    display: block;
  }

  .card-primary-value strong {
    color: var(--positive);
    font-family: var(--font-mono);
    font-size: 0.93rem;
  }

  .card-primary-value span {
    color: var(--faint);
    font-family: var(--font-mono);
    font-size: 0.5rem;
    text-transform: uppercase;
  }

  .card-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--line);
  }

  .card-metric {
    min-width: 0;
    padding: 8px;
    background: var(--surface-hover);
  }

  .card-metric span,
  .card-metric strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .card-metric span {
    margin-bottom: 3px;
    color: var(--faint);
    font-family: var(--font-mono);
    font-size: 0.48rem;
    letter-spacing: 0.035em;
    text-transform: uppercase;
  }

  .card-metric strong {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-variant-numeric: tabular-nums;
    text-align: left;
  }

  .card-metric > .equity-utilization-meta {
    display: block;
    margin-top: 3px;
    font-size: 0.5rem;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .card-metric .utilization-indicator,
  .card-metric .metric-bar-stack {
    align-items: flex-start;
  }

  .card-carry {
    margin-bottom: 11px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 5px;
  }

  .card-carry .carry-rail {
    grid-template-columns: 1fr 15px 1fr 15px 1fr;
  }

  .card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 11px;
  }

  .card-tags {
    display: flex;
    min-width: 0;
    gap: 5px;
  }

  .card-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
  }

  .card-calculator-action {
    min-height: 32px;
    padding-inline: 8px;
  }

  .card-tags .chain-badge {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .card-detail {
    width: auto;
    min-width: 74px;
    padding: 0 7px;
    color: var(--cobalt);
    font-family: var(--font-mono);
    font-size: 0.59rem;
    font-weight: 700;
  }

  .pagination {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
  }

  .page-buttons {
    justify-content: space-between;
  }

  .pagination p {
    text-align: center;
  }

  .detail-charts {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-chart {
    min-height: 300px;
  }

  .detail-chart-svg {
    max-height: 320px;
  }

  .detail-summary-bar,
  .detail-summary-bar.is-primary,
  .detail-summary-bar.is-secondary,
  .detail-summary-bar.is-depth {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-summary-metric:nth-child(2n) {
    border-right: 0;
  }

  .detail-summary-metric:not(:nth-last-child(-n + 2)) {
    border-bottom: 1px solid var(--line);
  }

  .detail-page-header {
    flex-direction: column;
    align-items: stretch;
  }

  .detail-header-actions {
    justify-content: flex-start;
  }

  .detail-tabs {
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .detail-trend-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-trend-strip-metric,
  .detail-summary-metric {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .detail-trend-strip-metric:last-child,
  .detail-summary-metric:last-child {
    border-bottom: 0;
  }

  .detail-chart-skeleton {
    min-height: 96px;
    padding: 14px;
  }

  .detail-depth .detail-metric dd {
    font-size: 0.7rem;
    letter-spacing: -0.025em;
  }

  .detail-carry {
    padding: 12px 9px;
    gap: 5px;
  }

  .detail-carry-node strong {
    font-size: 0.76rem;
  }

  .detail-carry-node span {
    font-size: 0.45rem;
  }

  .provider-field {
    display: block;
  }

  .provider-field dt {
    margin-bottom: 5px;
  }

  .dialog-footer {
    align-items: stretch;
  }

  .detail-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .detail-action-links {
    justify-content: flex-start;
  }

  .detail-action-note {
    max-width: none;
    flex-basis: 100%;
    text-align: left;
  }

  .technical-id {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .technical-id > span:first-child,
  .technical-id code {
    grid-column: 1 / -1;
  }

  .technical-id .copy-status {
    align-self: center;
  }

  .technical-sources {
    grid-template-columns: 1fr;
  }

  .technical-sources li,
  .technical-sources li:nth-child(2n),
  .technical-sources li:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .technical-sources li:last-child {
    border-bottom: 0;
  }

  .leverage-calculator {
    width: calc(100vw - 18px);
    max-height: calc(100vh - 18px);
  }

  .calculator-shell {
    max-height: calc(100vh - 18px);
  }

  .calculator-header {
    padding: 16px 15px 13px;
  }

  .calculator-close {
    width: 44px;
    height: 44px;
  }

  .calculator-slider-mode button,
  .calculator-presets button {
    min-height: 44px;
  }

  .calculator-ltv-slider,
  .calculator-range,
  .calculator-range::-webkit-slider-runnable-track {
    height: 44px;
  }

  .calculator-range::-webkit-slider-thumb {
    margin-top: 12px;
  }

  .calculator-range::-moz-range-track {
    height: 44px;
  }

  .calculator-content {
    padding: 14px 15px 16px;
  }

  .calculator-metric-rail {
    margin-right: -15px;
    margin-left: -15px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #leverage-calculator .calculator-metric-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #leverage-calculator .calculator-liquidation-metric {
    border-right: 0;
    border-bottom: 0;
    grid-column: 1 / -1;
  }

  .calculator-metric-rail > div,
  .calculator-metric-rail > div:nth-child(3) {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .calculator-metric-rail > div:nth-child(2n) {
    border-right: 0;
  }

  .calculator-metric-rail > div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .calculator-equity-strip > div {
    padding-right: 8px;
    padding-left: 8px;
  }

  .calculator-equity-strip dd {
    font-size: 0.82rem;
  }

  #leverage-calculator .calculator-risk-card,
  #borrow-calculator .calculator-risk-card {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
  }

  .calculator-risk-level {
    justify-self: start;
  }

  .calculator-risk-facts {
    min-width: 0;
    grid-column: auto;
  }

  .calculator-risk-facts > div {
    min-width: 0;
    padding-right: 10px;
    padding-left: 10px;
  }

  .calculator-risk-facts > div:first-child {
    border-left: 0;
  }

  .calculator-risk-facts dd {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  #leverage-calculator .calculator-risk-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  #leverage-calculator .calculator-risk-facts > div {
    border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    border-left: 0;
  }

  #leverage-calculator .calculator-risk-facts > div:last-child {
    border-bottom: 0;
  }

  .calculator-yield-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .calculator-rate-impact {
    grid-template-columns: minmax(0, 1fr);
  }

  .calculator-rate-impact > div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .calculator-rate-impact > div:last-child {
    border-bottom: 0;
  }
}

.asset-token[data-pharos-blurb],
.asset-pair[data-pharos-blurb],
.collateral-risk-badges[data-pharos-blurb],
.utilization-indicator.has-rich-tip,
.rate-type-badge.has-rich-tip,
.borrow-apy-deltas.has-rich-tip {
  cursor: help;
}

.collateral-risk-section,
.pharos-token-section {
  padding: 16px;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cobalt) 6%, transparent), transparent 42%),
    var(--surface);
}

.collateral-risk-section {
  display: grid;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 10px;
  background: var(--surface);
}

.collateral-risk-section > .detail-section-title {
  padding: 14px 16px 12px;
}

.collateral-risk-overview {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 20px;
  padding: 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-raised) 72%, var(--surface));
}

.collateral-risk-identity {
  display: flex;
  min-width: min(360px, 42%);
  align-items: center;
  gap: 12px;
}

.collateral-risk-identity .pharos-token-logo {
  width: 38px;
  height: 38px;
}

.collateral-risk-identity h4,
.collateral-risk-identity p {
  margin: 0;
}

.collateral-risk-identity h4 {
  font-size: 0.98rem;
  line-height: 1.3;
}

.collateral-risk-identity p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.66rem;
}

.collateral-risk-overview-facts {
  display: grid;
  width: min(100%, 620px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.collateral-risk-overview-facts .pharos-token-metric {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 4px 16px;
  border-right: 1px solid var(--line);
  border-bottom: 0;
}

.collateral-risk-overview-facts .pharos-token-metric:last-child {
  border-right: 0;
}

.collateral-risk-overview-facts .pharos-token-metric dd {
  font-size: 0.76rem;
}

.collateral-risk-notices {
  display: grid;
  gap: 6px;
  padding: 10px 16px 0;
}

.collateral-risk-notices .pharos-token-status {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: 5px;
  background: color-mix(in srgb, var(--line) 16%, transparent);
}

.collateral-risk-notices .pharos-token-status.is-warning {
  border-color: color-mix(in srgb, var(--amber) 28%, var(--line));
  border-left-color: var(--amber);
  background: color-mix(in srgb, var(--amber-soft) 34%, transparent);
}

.collateral-risk-notices .pharos-token-status.is-error {
  border-color: color-mix(in srgb, var(--risk) 28%, var(--line));
  border-left-color: var(--risk);
}

.collateral-risk-breakdown-label {
  margin: 0;
  padding: 14px 16px 9px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.61rem;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.collateral-risk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
  gap: 12px;
  align-items: stretch;
  padding: 0 16px 16px;
}

.collateral-risk-grid.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.collateral-risk-grid .pharos-token-section {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.risk-provider-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.risk-provider-panel .pharos-token-grid {
  flex: 1;
  grid-template-columns: minmax(0, 1fr);
}

.risk-provider-panel .pharos-token-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  border-radius: 8px;
  box-shadow: none;
}

.risk-provider-panel .pharos-token-card > .pharos-token-freshness:last-child {
  margin-top: auto;
  padding: 9px 12px;
  border-top: 1px solid var(--line);
}

.risk-provider-panel > .pharos-token-freshness {
  margin-top: 7px;
  padding-right: 4px;
  font-size: 0.56rem;
}

.collateral-risk-disclosure {
  margin: 0;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 0.6rem;
  line-height: 1.45;
}

.collateral-risk-unrated {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.collateral-risk-unrated li {
  flex: 1 1 220px;
  min-width: 0;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--line) 14%, transparent);
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.4;
}

.collateral-risk-unrated li.is-error {
  border-left: 3px solid var(--risk);
}

.collateral-risk-unrated li.is-warning {
  border-left: 3px solid var(--amber);
}

.collateral-risk-unrated li.is-loading {
  border-left: 3px solid var(--cobalt);
}

.risk-provider-label {
  display: flex;
  min-height: 20px;
  align-items: center;
  gap: 7px;
  margin: 0 0 6px;
  color: var(--faint);
  font-size: 0.58rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.risk-provider-label::before {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
}

.credora-asset-card .risk-provider-label::before {
  background-image: url("/rating-logos/credora.png");
}

.cicada-asset-card .risk-provider-label::before {
  background-image: url("/rating-logos/cicada.png");
}

.bluechip-asset-card .risk-provider-label::before {
  background-image: url("/rating-logos/bluechip.png");
}

.philidor-asset-card .risk-provider-label::before,
.philidor-vault-card .risk-provider-label::before {
  background-image: url("/rating-logos/philidor.png");
}

.yearn-asset-card .risk-provider-label::before {
  background-image: url("/rating-logos/yearn.svg");
}

.rwa-xyz-asset-card .risk-provider-label::before {
  background-image: url("/rating-logos/rwa-xyz-mark.svg");
}

.pharos-token-card:not([class*="-asset-card"]):not(.philidor-vault-card)
  .risk-provider-label::before {
  background-image: url("/rating-logos/pharos.svg");
}

.risk-assessment-link {
  color: inherit;
  text-decoration: none;
}

.risk-assessment-link:hover,
.risk-assessment-link:focus-visible {
  text-decoration: underline;
}

.risk-dimension-list {
  display: grid;
  gap: 8px;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--line);
}

.risk-dimension-item {
  min-width: 0;
}

.risk-dimension-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.risk-dimension-heading strong {
  font-size: 0.72rem;
}

.risk-dimension-heading span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

.risk-dimension-heading span.is-positive {
  color: var(--positive, #1f7a4d);
}

.risk-dimension-heading span.is-warning {
  color: var(--warning, #9a6b12);
}

.risk-dimension-detail {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.4;
}

.collateral-risk-grid.is-single .pharos-token-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.collateral-risk-grid.is-single .pharos-token-metric {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.collateral-risk-grid.is-single .pharos-token-metric:nth-child(4n) {
  border-right: 0;
}

.collateral-risk-grid.is-single .pharos-token-metric:nth-last-child(-n + 4) {
  border-bottom: 0;
}

@media (min-width: 721px) {
  .collateral-risk-grid:not(.is-single) .pharos-token-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .collateral-risk-grid:not(.is-single) .pharos-token-metric,
  .collateral-risk-grid:not(.is-single) .pharos-token-metric:nth-child(3n),
  .collateral-risk-grid:not(.is-single) .pharos-token-metric:nth-last-child(-n + 3) {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .collateral-risk-grid:not(.is-single) .pharos-token-metric:nth-child(2n) {
    border-right: 0;
  }

  .collateral-risk-grid:not(.is-single) .pharos-token-metric:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

@media (max-width: 720px) {
  .collateral-risk-overview {
    flex-direction: column;
  }

  .collateral-risk-identity {
    min-width: 0;
  }

  .collateral-risk-overview-facts {
    width: 100%;
  }

  .collateral-risk-grid.is-single .pharos-token-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .collateral-risk-grid.is-single .pharos-token-metric:nth-child(4n) {
    border-right: 1px solid var(--line);
  }

  .collateral-risk-grid.is-single .pharos-token-metric:nth-child(3n) {
    border-right: 0;
  }

  .collateral-risk-grid.is-single .pharos-token-metric:nth-last-child(-n + 4) {
    border-bottom: 1px solid var(--line);
  }

  .collateral-risk-grid.is-single .pharos-token-metric:nth-last-child(-n + 3) {
    border-bottom: 0;
  }
}

.credora-overview {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
}

.credora-overview p,
.credora-overview h4 {
  margin: 0;
}

.credora-overview h4 {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
}

.credora-overview p {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

.credora-bullet-list {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.45;
}

.credora-bullet-list.is-positive li::marker {
  color: var(--positive, #1f7a4d);
}

.credora-bullet-list.is-warning li::marker {
  color: var(--warning, #9a6b12);
}

.pharos-token-metric dd.is-neutral {
  color: var(--muted);
}

.pharos-token-metric dd.is-warning {
  color: var(--warning, #9a6b12);
}

.pharos-token-intro,
.pharos-token-freshness,
.pharos-token-status {
  margin: 0;
  color: var(--muted);
}

.pharos-token-intro {
  margin-bottom: 12px;
}

.pharos-token-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 12px;
}

.pharos-token-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-raised);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ink) 7%, transparent);
}

.pharos-token-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}

.pharos-token-identity {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.pharos-token-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.pharos-token-logo {
  position: relative;
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  background: var(--surface-subtle);
  font-family: var(--font-mono);
  font-size: 0.48rem;
  font-weight: 800;
}

.pharos-token-logo > span,
.pharos-token-logo > img {
  grid-area: 1 / 1;
}

.pharos-token-logo > img {
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 2px;
  border-radius: inherit;
  background: transparent;
  object-fit: contain;
}

.pharos-token-card-header h3 {
  margin: 0;
  font-size: 0.9rem;
}

.pharos-token-card-header a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  color: var(--cobalt);
  font-size: 0.62rem;
  font-weight: 750;
  text-decoration: none;
}

.pharos-token-card-header a:hover,
.pharos-token-card-header a:focus-visible {
  text-decoration: underline;
}

.pharos-token-card-header a svg {
  width: 12px;
  height: 12px;
}

.pharos-token-roles {
  margin: 5px 0 0;
  color: var(--faint);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.credora-underlying-note {
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 600;
}

.pharos-token-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.pharos-token-metric {
  min-width: 0;
  padding: 11px 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.pharos-token-metric:nth-child(3n) {
  border-right: 0;
}

.pharos-token-metric:nth-last-child(-n + 3) {
  border-bottom: 0;
}

.pharos-token-metric dt {
  margin: 0 0 5px;
  color: var(--faint);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.pharos-token-metric dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.pharos-token-metric dd.is-positive {
  color: var(--positive);
}

.pharos-token-notes {
  display: grid;
  gap: 6px;
  padding: 11px 14px;
  border-top: 1px solid var(--line);
}

.pharos-token-status {
  padding: 10px 12px;
  border-left: 3px solid var(--line);
  background: color-mix(in srgb, var(--line) 18%, transparent);
  font-size: 0.7rem;
}

.pharos-token-status.is-loading {
  border-left-color: var(--cobalt);
}

.pharos-token-status.is-warning {
  border-left-color: var(--amber);
}

.pharos-token-status.is-error {
  border-left-color: var(--risk);
}

.pharos-supply-history {
  margin-top: 14px;
}

.pharos-token-freshness {
  margin-top: 10px;
  font-size: 0.62rem;
  text-align: right;
}

.market-exit-intel-section {
  margin-top: 4px;
}

.exit-intel-card .exit-intel-mechanism {
  margin: 0;
  padding: 12px 14px 0;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.45;
}

.exit-intel-card .pharos-token-metrics {
  margin-top: 12px;
  border-top: 1px solid var(--line);
}

.exit-intel-card.is-unprofiled .risk-provider-label {
  color: var(--muted);
}

.exit-intel-notes .exit-intel-source {
  margin: 2px 0 0;
  color: var(--faint);
  font-size: 0.62rem;
}

.exit-intel-source a {
  color: var(--cobalt);
  font-weight: 700;
  text-decoration: none;
}

.exit-intel-source a:hover,
.exit-intel-source a:focus-visible {
  text-decoration: underline;
}

.exit-intel-card .exit-route-group {
  justify-items: start;
}

@media (max-width: 420px) {
  .refresh-button span {
    display: none;
  }

  .refresh-button {
    width: 40px;
    padding: 0;
    justify-content: center;
  }

  .toolbar-meta {
    padding-right: 9px;
    padding-left: 9px;
  }

  .results-count {
    display: none;
  }

  .card-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pharos-token-section {
    padding: 12px;
  }

  .pharos-token-card-header {
    flex-direction: column;
  }

  .pharos-token-metrics,
  .collateral-risk-grid.is-single .pharos-token-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pharos-token-metric,
  .pharos-token-metric:nth-child(3n),
  .pharos-token-metric:nth-last-child(-n + 3),
  .collateral-risk-grid.is-single .pharos-token-metric,
  .collateral-risk-grid.is-single .pharos-token-metric:nth-child(3n),
  .collateral-risk-grid.is-single .pharos-token-metric:nth-child(4n),
  .collateral-risk-grid.is-single .pharos-token-metric:nth-last-child(-n + 3),
  .collateral-risk-grid.is-single .pharos-token-metric:nth-last-child(-n + 4) {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .pharos-token-metric:nth-child(2n),
  .collateral-risk-grid.is-single .pharos-token-metric:nth-child(2n) {
    border-right: 0;
  }

  .pharos-token-metric:last-child,
  .collateral-risk-grid.is-single .pharos-token-metric:last-child {
    border-right: 0;
    border-bottom: 0;
  }
}

.detail-structure-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-hover);
  vertical-align: baseline;
}

.detail-structure-chip small {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.detail-structure-chip span {
  font-weight: 650;
}

.detail-structure-section .detail-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pharos-token-disclosure > .pharos-token-section {
  margin-top: 4px;
}

.detail-secondary > .pharos-token-disclosure {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.detail-secondary > .pharos-token-disclosure > summary {
  padding: 8px 28px 8px 12px;
}

.detail-secondary > .pharos-token-disclosure > .pharos-token-section {
  margin: 0;
  padding: 0 12px 12px;
  border: 0;
  background: transparent;
}

.detail-tab-content > .detail-decision-grid {
  margin-bottom: 14px;
}

.detail-concentration-metrics {
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}

.detail-concentration-metrics .detail-metric {
  padding: 10px 12px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.detail-concentration-metrics .detail-metric:last-child {
  border-right: 0;
}

@media (max-width: 900px) {
  .detail-structure-section .detail-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Euler market detail */
.euler-warning-stack {
  display: grid;
  gap: 8px;
}

.euler-warning {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-hover);
}

.euler-warning strong {
  display: block;
  margin-bottom: 3px;
  font-size: 0.76rem;
}

.euler-warning p {
  margin: 0;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.45;
}

.euler-warning.is-high {
  border-color: color-mix(in srgb, var(--amber) 45%, var(--line));
  background: color-mix(in srgb, var(--amber-soft) 55%, var(--surface));
}

.euler-warning.is-critical {
  border-color: color-mix(in srgb, var(--risk) 48%, var(--line));
  background: color-mix(in srgb, var(--risk-soft) 62%, var(--surface));
}

.euler-warning.is-critical strong {
  color: var(--risk);
}

.euler-structure-note {
  max-width: 680px;
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.euler-ramp-note {
  margin: -2px 0 10px;
  padding: 8px 10px;
  border-left: 3px solid var(--amber);
  color: var(--muted);
  background: color-mix(in srgb, var(--amber-soft) 48%, transparent);
  font-size: 0.68rem;
  line-height: 1.45;
}

.euler-structure-section .detail-trend-strip {
  margin-bottom: 10px;
}

.euler-vault-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.euler-vault-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-hover);
}

.euler-vault-card-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 9px;
  font-size: 0.85rem;
}

.euler-vault-role {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.54rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.euler-vault-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.euler-vault-metrics .detail-metric {
  background: var(--surface);
}

.euler-cap-value {
  display: grid;
  gap: 5px;
}

.euler-cap-progress {
  display: block;
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

.euler-cap-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--cobalt-strong);
}

.euler-cap-progress > span.is-high {
  background: var(--amber);
}

.euler-cap-progress > span.is-critical {
  background: var(--risk);
}

.euler-oracle-route {
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.euler-oracle-route h5 {
  margin: 0 0 6px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.euler-oracle-route ol {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.66rem;
}

.euler-oracle-route a {
  font-family: var(--font-mono);
}

.euler-vault-address {
  font-family: var(--font-mono);
}

@media (width <= 760px) {
  .euler-vault-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (width <= 480px) {
  .euler-vault-metrics {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Dolomite detail page */

.dolomite-structure-section .dolomite-margin-metrics {
  margin-bottom: 8px;
}

.dolomite-structure-section .detail-risk-note {
  margin: 0 0 10px;
}

.dolomite-reserve-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dolomite-reserve-card {
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-hover);
}

.dolomite-reserve-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
}

.dolomite-reserve-card-header h4 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 0.82rem;
}

.dolomite-reserve-role {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.dolomite-reserve-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .dolomite-reserve-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Fixed-term market detail section (Pendle, Exponent, Term Finance, TermMax). */
.fixed-term-section .fixed-term-hero {
  margin-bottom: 10px;
  border-left: 3px solid var(--cobalt);
}

.fixed-term-hero .detail-summary-metric.is-primary strong {
  color: var(--text);
}

.fixed-term-remaining.is-soon {
  color: var(--amber);
}

.fixed-term-remaining.is-matured {
  color: var(--risk);
}

.duration-cell {
  font-variant-numeric: tabular-nums;
}

.duration-cell.is-soon {
  color: var(--amber);
}

.duration-cell.is-matured {
  color: var(--risk);
}

.fixed-term-explainer {
  margin-bottom: 10px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cobalt) 5%, transparent), transparent 46%),
    var(--surface-hover);
}

.fixed-term-explainer-title {
  margin: 0 0 6px;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}

.fixed-term-copy {
  max-width: 78ch;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.55;
}

.fixed-term-copy:last-child {
  margin-bottom: 0;
}

.fixed-term-matured-note {
  color: var(--risk);
}

.fixed-term-facts {
  margin: 0;
}

/* Feather Finance detail page (borrows/loops) */

.feather-structure-section .detail-trend-strip {
  margin-bottom: 10px;
}

.feather-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.feather-meta-column {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-hover);
  overflow: hidden;
}

.feather-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}

.feather-meta-row:last-child {
  border-bottom: 0;
}

.feather-meta-label {
  flex: 0 0 auto;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.feather-meta-value {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  text-align: right;
}

.feather-address {
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  background: var(--surface);
  font-size: 0.66rem;
  letter-spacing: 0.01em;
}

.feather-pair {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.feather-pair-asset {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.feather-pair-asset .asset-token {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-color: var(--line-strong);
  background: var(--surface-raised);
}

.feather-pair-asset .asset-token:has(img)::after {
  display: none;
}

.feather-pair-asset .asset-token img,
.feather-pair-asset .asset-token > span {
  width: 100%;
  height: 100%;
  padding: 3px;
  object-fit: contain;
  background: transparent;
  font-size: 0.45rem;
}

.feather-pair-symbol {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feather-pair-arrow {
  color: var(--faint);
}

@media (max-width: 900px) {
  .feather-meta-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Spot (lend) per-source detail page. */
.spot-history-section .detail-section-title {
  margin-bottom: 10px;
}

.source-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.source-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-hover);
  font-family: var(--font-mono);
  font-size: 0.61rem;
  letter-spacing: 0.03em;
}

.source-badge.is-positive {
  border-color: color-mix(in srgb, var(--positive) 45%, var(--line));
  color: var(--positive);
  background: color-mix(in srgb, var(--positive) 9%, transparent);
}

.source-badge.is-warning {
  border-color: color-mix(in srgb, var(--amber) 55%, var(--line));
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 10%, transparent);
}

.source-badge.is-info {
  border-color: color-mix(in srgb, var(--cobalt) 50%, var(--line));
  color: var(--cobalt);
  background: var(--cobalt-soft);
}

.spot-prediction-card {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-hover);
}

.spot-prediction-heading {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.spot-prediction-card strong {
  font-size: 0.85rem;
}

.spot-prediction-meta {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
}

.spot-source-metrics,
.spot-source-pool {
  margin-top: 8px;
}

.spot-source-pool-id {
  font-family: var(--font-mono);
}

.spot-source-note {
  margin: 8px 0 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Fluid market detail page */
.fluid-vault-type {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.fluid-vault-type strong {
  font-size: 1.02rem;
}

.fluid-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--cobalt);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.fluid-vault-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 0.76rem;
  color: var(--ink-soft, var(--ink));
}

.fluid-vault-chip.is-positive {
  border-color: color-mix(in srgb, var(--positive) 55%, var(--line));
  color: var(--positive);
}

.fluid-vault-copy {
  margin: 8px 0 0;
  max-width: 70ch;
  color: var(--ink-soft, var(--ink));
  font-size: 0.9rem;
}

.fluid-vault-composition {
  font-weight: 600;
}

.borrow-attribution-caption {
  margin: 0 0 8px;
  max-width: 72ch;
  color: var(--ink-soft, var(--ink));
  font-size: 0.82rem;
  line-height: 1.35;
}

.borrow-attribution-stack {
  display: flex;
  overflow: hidden;
  width: 100%;
  height: 8px;
  margin: 0 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line-strong) 70%, var(--surface));
}

.borrow-attribution-slice {
  display: block;
  min-width: 2px;
  height: 100%;
}

.borrow-attribution-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.borrow-attribution-row {
  display: grid;
  align-items: start;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 6px 8px;
}

.borrow-attribution-swatch {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 999px;
}

.borrow-attribution-asset {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  min-width: 0;
}

.borrow-attribution-name {
  font-weight: 600;
}

.lend-intel-quality-assets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}

.borrow-attribution-count {
  color: var(--muted);
  font-size: 0.72rem;
}

.borrow-attribution-figures {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px 8px;
  font-variant-numeric: tabular-nums;
}

.borrow-attribution-figures > strong {
  font-size: 0.9rem;
}

.borrow-attribution-share {
  color: var(--muted);
  font-size: 0.75rem;
}

.borrow-attribution-markets {
  display: grid;
  gap: 1px;
  flex: 1 0 100%;
  min-width: 0;
}

.borrow-attribution-market {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 2px 6px;
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
}

.borrow-attribution-delta {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.borrow-attribution-delta strong {
  font-size: inherit;
  font-weight: 700;
}

.borrow-attribution-delta-period {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.borrow-attribution-delta.is-up,
.borrow-attribution-figures .borrow-attribution-delta.is-up {
  color: var(--amber);
}

.borrow-attribution-delta.is-down,
.borrow-attribution-figures .borrow-attribution-delta.is-down {
  color: #3ecf7a;
}

.borrow-attribution-delta.is-flat {
  color: var(--muted);
}

.borrow-trend-sparkline {
  display: block;
  overflow: visible;
  flex: 0 0 auto;
}

.borrow-trend-sparkline.is-up {
  color: var(--amber);
}

.borrow-trend-sparkline.is-down {
  color: #3ecf7a;
}

.borrow-trend-sparkline.is-flat {
  color: #8b95a3;
}

.borrow-attribution-section:not(.lend-intel-section) {
  --borrow-attribution-columns: minmax(260px, 1fr) minmax(120px, 0.22fr)
    minmax(130px, 0.22fr) 86px;
}

.borrow-attribution-section:not(.lend-intel-section) .borrow-attribution-caption {
  margin-bottom: 12px;
}

.borrow-attribution-columns,
.borrow-attribution-summary,
.borrow-attribution-section:not(.lend-intel-section) .borrow-attribution-market {
  display: grid;
  grid-template-columns: var(--borrow-attribution-columns);
  align-items: center;
  column-gap: 18px;
}

.borrow-attribution-columns {
  padding: 4px 12px 7px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.borrow-attribution-columns > span:not(:first-child) {
  text-align: right;
}

.borrow-attribution-section:not(.lend-intel-section) .borrow-attribution-list {
  gap: 8px;
}

.borrow-attribution-section:not(.lend-intel-section) .borrow-attribution-row {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.borrow-attribution-summary {
  min-height: 44px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
}

.borrow-attribution-summary-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.borrow-attribution-section:not(.lend-intel-section) .borrow-attribution-swatch {
  flex: 0 0 auto;
  margin-top: 0;
}

.borrow-attribution-section:not(.lend-intel-section) .borrow-attribution-asset {
  gap: 3px 8px;
}

.borrow-attribution-summary-amount {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 3px 7px;
}

.borrow-attribution-summary-amount > strong {
  font-size: 0.88rem;
}

.borrow-attribution-section:not(.lend-intel-section) .borrow-attribution-markets {
  display: grid;
  gap: 0;
  min-width: 0;
}

.borrow-attribution-section:not(.lend-intel-section) .borrow-attribution-market {
  min-height: 43px;
  padding: 7px 12px;
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 0;
}

.borrow-attribution-section:not(.lend-intel-section) .borrow-attribution-market:hover {
  background: color-mix(in srgb, var(--cobalt) 7%, transparent);
}

.borrow-attribution-market-main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding-left: 20px;
}

.borrow-attribution-market-main::before {
  position: absolute;
  left: 3px;
  width: 7px;
  height: 7px;
  border-bottom: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
  content: "";
  transform: translateY(-2px);
}

.borrow-attribution-market-link {
  color: inherit;
  text-decoration: none;
}

.borrow-attribution-market-name {
  overflow: hidden;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.borrow-attribution-market-action {
  flex: 0 0 auto;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--cobalt) 62%, var(--line));
  border-radius: 999px;
  color: var(--cobalt-strong);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.borrow-attribution-market-link:hover .borrow-attribution-market-name {
  color: var(--cobalt-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.borrow-attribution-market-link:hover .borrow-attribution-market-action {
  border-color: var(--cobalt);
  background: color-mix(in srgb, var(--cobalt) 14%, transparent);
}

.borrow-attribution-metric {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

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

.borrow-attribution-metric-value {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
}

.borrow-attribution-outstanding .borrow-attribution-metric-value {
  font-size: 0.78rem;
  font-weight: 650;
}

.borrow-attribution-trend .borrow-attribution-metric-value {
  min-width: 72px;
}

.borrow-attribution-trend .borrow-attribution-metric-value:empty::after {
  color: var(--muted);
  content: "—";
}

@media (max-width: 820px) {
  .borrow-attribution-columns {
    display: none;
  }

  .borrow-attribution-section:not(.lend-intel-section) {
    --borrow-attribution-columns: minmax(180px, 1fr) minmax(95px, auto)
      minmax(105px, auto) 76px;
  }

  .borrow-attribution-summary,
  .borrow-attribution-section:not(.lend-intel-section) .borrow-attribution-market {
    column-gap: 12px;
  }

  .borrow-attribution-metric {
    align-items: flex-end;
    flex-direction: column;
    gap: 1px;
  }

  .borrow-attribution-metric-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    color: var(--faint);
    font-family: var(--font-mono);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: normal;
  }
}

@media (max-width: 620px) {
  .borrow-attribution-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 9px;
  }

  .borrow-attribution-section:not(.lend-intel-section) .borrow-attribution-market {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 9px;
  }

  .borrow-attribution-summary-identity,
  .borrow-attribution-market-main {
    grid-column: 1 / -1;
  }

  .borrow-attribution-summary > .borrow-attribution-trend {
    display: none;
  }

  .borrow-attribution-summary > .borrow-attribution-metric {
    align-items: flex-start;
  }

  .borrow-attribution-section:not(.lend-intel-section) .borrow-attribution-market {
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .borrow-attribution-market-main {
    padding-left: 0;
  }

  .borrow-attribution-market-main::before {
    display: none;
  }

  .borrow-attribution-section:not(.lend-intel-section)
    .borrow-attribution-market
    > .borrow-attribution-metric {
    align-items: flex-start;
  }

  .borrow-attribution-section:not(.lend-intel-section)
    .borrow-attribution-market
    > .borrow-attribution-trend {
    align-items: flex-end;
  }
}

.lend-intel-asset-link {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.lend-intel-asset-link:hover .borrow-attribution-name {
  color: var(--cobalt);
}

.lend-intel-loop-market-links {
  display: grid;
  gap: 5px;
  flex: 1 0 100%;
  min-width: 0;
  margin: 4px 0 0 23px;
}

.lend-intel-loop-market-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface-raised) 55%, transparent);
  color: inherit;
  font-size: 0.72rem;
  text-decoration: none;
}

.lend-intel-loop-market-link:hover,
.lend-intel-loop-market-link:focus-visible {
  border-color: color-mix(in srgb, var(--cobalt) 58%, var(--line));
  background: color-mix(in srgb, var(--cobalt) 8%, var(--surface-raised));
  outline: none;
}

.lend-intel-loop-market-link strong {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lend-intel-loop-market-metrics {
  flex: 0 0 auto;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  white-space: nowrap;
}

.lend-intel-loop-market-more {
  padding: 4px 9px;
  color: var(--muted);
  font-size: 0.68rem;
}

.lend-intel-facts {
  margin: 0 0 10px;
  color: var(--ink-soft, var(--ink));
  font-size: 0.82rem;
}

@media (max-width: 620px) {
  .lend-intel-loop-market-links {
    margin-left: 0;
  }

  .lend-intel-loop-market-link {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .lend-intel-loop-market-metrics {
    white-space: normal;
  }
}

.lend-intel-wallets .borrow-attribution-caption,
.lend-intel-wallets .lend-intel-facts {
  max-width: none;
}

.lend-intel-wallets .detail-data-table {
  margin-top: 4px;
}

.lend-intel-compare,
.lend-intel-structure-list,
.lend-intel-isolation-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lend-intel-compare-row {
  min-width: 0;
}

.lend-intel-same-asset {
  --lend-intel-compare-columns: minmax(180px, 1fr) minmax(110px, 0.28fr)
    minmax(95px, 0.22fr) minmax(110px, 0.25fr) minmax(92px, auto);
}

.lend-intel-compare-columns,
.lend-intel-compare-market {
  display: grid;
  grid-template-columns: var(--lend-intel-compare-columns);
  align-items: center;
  column-gap: 12px;
}

.lend-intel-compare-columns {
  padding: 2px 12px 6px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.lend-intel-compare-columns > span:not(:first-child) {
  text-align: right;
}

.lend-intel-compare-market {
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
  color: inherit;
  text-decoration: none;
}

.lend-intel-compare-market.is-link:hover,
.lend-intel-compare-market.is-link:focus-visible {
  border-color: color-mix(in srgb, var(--cobalt) 58%, var(--line));
  background: color-mix(in srgb, var(--cobalt) 8%, var(--surface-raised));
  outline: none;
}

.lend-intel-compare-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lend-intel-compare-id .entity-label {
  min-width: 0;
  gap: 8px;
}

.lend-intel-compare-id .entity-logo {
  width: 22px;
  height: 22px;
  font-size: 0.48rem;
}

.lend-intel-compare-id > span {
  padding-left: 30px;
  color: var(--muted);
  font-size: 0.74rem;
}

.lend-intel-compare-metric {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

.lend-intel-compare-metric-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.lend-intel-compare-metric strong {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 750;
  white-space: nowrap;
}

.lend-intel-compare-metric.is-tvl strong {
  font-size: 0.96rem;
}

.lend-intel-compare-metric.is-apy strong {
  color: var(--positive);
}

.lend-intel-compare-utilization-track {
  width: min(100%, 78px);
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line-strong);
}

.lend-intel-compare-utilization-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--cobalt);
}

.lend-intel-compare-action {
  justify-self: end;
  color: var(--cobalt);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.025em;
  white-space: nowrap;
}

.lend-intel-compare-market.is-static .lend-intel-compare-action {
  color: var(--faint);
  font-weight: 600;
}

@media (max-width: 760px) {
  .lend-intel-compare-columns {
    display: none;
  }

  .lend-intel-compare-metric-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    color: var(--faint);
    font-family: var(--font-mono);
    font-size: 0.54rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    white-space: normal;
  }

  .lend-intel-compare-market {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lend-intel-compare-id {
    grid-column: 1 / 3;
  }

  .lend-intel-compare-action {
    align-self: start;
    grid-column: 3;
    grid-row: 1;
  }

  .lend-intel-compare-metric {
    align-items: flex-start;
  }

  .lend-intel-compare-utilization-track {
    width: 100%;
  }
}

@media (max-width: 430px) {
  .lend-intel-compare-market {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lend-intel-compare-id {
    grid-column: 1;
  }

  .lend-intel-compare-action {
    grid-column: 2;
  }

  .lend-intel-compare-metric.is-utilization {
    grid-column: 1 / -1;
  }
}

.lend-intel-structure-card,
.lend-intel-isolation-card {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.lend-intel-structure-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 16px;
}

.lend-intel-structure-head strong {
  font-size: 0.98rem;
}

.lend-intel-structure-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.lend-intel-stat {
  display: grid;
  gap: 1px;
  min-width: 4.5rem;
}

.lend-intel-stat strong {
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

.lend-intel-stat span {
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.lend-intel-ltv-track,
.lend-intel-isolation-track {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
}

.lend-intel-isolation-track {
  overflow: hidden;
}

.lend-intel-ltv-fill,
.lend-intel-isolation-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--cobalt-strong);
}

.lend-intel-lltv-mark {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 10px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--amber);
}

.lend-intel-isolation-track > span.is-high {
  background: var(--amber);
}

.lend-intel-isolation-track > span.is-critical {
  background: var(--risk);
}

.lend-intel-structure-assets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lend-intel-asset-chip,
.lend-intel-asset-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 2px 8px 2px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 600;
}

.lend-intel-asset-more {
  padding: 2px 8px;
  color: var(--muted);
  font-weight: 500;
}

.lend-intel-asset-chip .asset-token {
  width: 16px;
  height: 16px;
}

.lend-intel-isolation-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.lend-intel-isolation-id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.lend-intel-isolation-kind {
  color: var(--amber);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lend-intel-isolation-figures {
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.lend-intel-isolation-track {
  grid-column: 1 / -1;
}

.fluid-vault-metrics {
  margin-top: 14px;
}

.detail-metric dd a.address-explorer-link,
.feather-meta-value a.address-explorer-link,
.detail-data-table a.address-explorer-link,
.provider-field dd a.address-explorer-link {
  color: var(--cobalt);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.detail-metric dd a.address-explorer-link:hover,
.feather-meta-value a.address-explorer-link:hover,
.detail-data-table a.address-explorer-link:hover,
.provider-field dd a.address-explorer-link:hover {
  color: var(--cobalt-strong);
}

.feather-meta-value a.address-explorer-link code,
a.address-explorer-link.feather-address code {
  font: inherit;
  color: inherit;
}

.fluid-rate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.fluid-rate-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
}

.fluid-rate-card h4 {
  margin: 0 0 8px;
  font-size: 0.86rem;
}

/* Venus protocol detail page */
.venus-params-grid {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.venus-params-card {
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-hover);
}

.venus-params-card h4 {
  margin: 0 0 8px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.venus-cap-meter {
  display: flex;
  min-width: 140px;
  flex-direction: column;
  gap: 4px;
}

.venus-cap-meter-bar {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

.venus-cap-meter-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--cobalt);
}

.venus-cap-meter-bar.is-caution span {
  background: var(--amber);
}

.venus-cap-meter-bar.is-critical span {
  background: var(--negative);
}

@media (max-width: 900px) {
  .venus-params-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Morpho detail workspace
 *
 * Preserve the shared YAM visual language while tightening information
 * hierarchy and moving historical intelligence ahead of technical mechanics.
 */
body.is-detail-view.is-morpho-workspace .detail-page-shell {
  width: min(1240px, 100%);
}

body.is-detail-view.is-morpho-workspace .detail-page-header {
  margin-bottom: 10px;
}

body.is-detail-view.is-morpho-workspace .detail-summary-slot {
  gap: 10px;
  margin-bottom: 12px;
}

body.is-detail-view.is-morpho-workspace .detail-summary.is-compact {
  gap: 0;
}

body.is-detail-view.is-morpho-workspace
  .detail-summary.is-compact
  .detail-summary-bar.is-primary {
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}

body.is-detail-view.is-morpho-workspace
  .detail-summary.is-compact
  .detail-summary-metric {
  min-height: 58px;
  padding: 8px 10px;
}

body.is-detail-view.is-morpho-workspace
  .detail-summary.is-compact
  .detail-summary-metric:first-child {
  border-top: 3px solid var(--cobalt);
  background: color-mix(in srgb, var(--cobalt-soft) 46%, var(--surface));
}

body.is-detail-view.is-morpho-workspace
  .detail-summary.is-compact
  .detail-summary-metric:first-child
  strong {
  font-size: 1.28rem;
}

body.is-detail-view.is-morpho-workspace
  .detail-summary.is-compact
  .detail-summary-metric.is-history {
  background: var(--surface-hover);
}

body.is-detail-view.is-morpho-workspace
  .detail-summary.is-compact
  .detail-summary-metric.is-history
  strong {
  color: var(--muted);
  font-size: 0.88rem;
}

body.is-detail-view.is-morpho-workspace
  .detail-summary.is-compact
  .detail-summary-metric.is-limit {
  min-height: 58px;
  background: color-mix(in srgb, var(--cobalt-soft) 28%, var(--surface));
}

body.is-detail-view.is-morpho-workspace
  .detail-summary.is-compact
  .detail-summary-metric.is-limit
  strong {
  font-size: 0.98rem;
}

body.is-detail-view.is-morpho-workspace .detail-decision-grid {
  margin-bottom: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.is-detail-view.is-morpho-workspace
  .detail-decision-grid
  .detail-section {
  min-width: 0;
  padding: 8px 10px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
}

body.is-detail-view.is-morpho-workspace
  .detail-decision-grid
  .detail-section-title {
  margin-bottom: 6px;
}

body.is-detail-view.is-morpho-workspace .detail-decision-grid .detail-depth {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

body.is-detail-view.is-morpho-workspace
  .detail-decision-grid
  .detail-depth
  .detail-metric {
  min-height: 52px;
  padding: 7px 8px;
}

body.is-detail-view.is-morpho-workspace
  .detail-decision-grid
  .detail-depth
  .detail-metric
  dd {
  font-size: 0.74rem;
}

body.is-detail-view.is-morpho-workspace .detail-risk-note {
  margin-top: 8px;
  font-size: 0.58rem;
  line-height: 1.4;
}

body.is-detail-view.is-morpho-workspace .detail-tabs {
  margin-top: 6px;
  margin-bottom: 12px;
}

body.is-detail-view.is-morpho-workspace .detail-tab-content {
  gap: 10px;
}

.detail-technical {
  display: grid;
  gap: 14px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.detail-technical[hidden],
.detail-technical:empty {
  display: none;
}

.morpho-context-grid,
.morpho-rate-grid {
  display: grid;
  align-items: start;
  gap: 14px;
}

.morpho-context-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(330px, 0.75fr);
}

.morpho-context-grid:has(> :only-child) {
  grid-template-columns: minmax(0, 1fr);
}

.morpho-rate-grid {
  align-items: stretch;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

/* The paired rate-curve and utilization-history sections must share one
   title style: the utilization section's detail-history-section class would
   otherwise render its title at 0.68rem with a 10px gap next to the IRM's
   0.62rem / 7px. */
.morpho-rate-grid .detail-section-title,
.loop-rate-grid .detail-section-title {
  margin-bottom: 7px;
  font-size: 0.62rem;
}

.morpho-rate-grid:has(> :only-child) {
  grid-template-columns: minmax(0, 1fr);
}

.morpho-rate-grid > .detail-exchange-rate-section {
  grid-column: 1 / -1;
}

.morpho-context-grid > .detail-section,
.morpho-rate-grid > .detail-section {
  min-width: 0;
  margin-bottom: 0;
}

.morpho-rate-grid > .detail-section {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

/* Utilization is a single figure inside the default two-up chart grid.
   Fill the paired card (the 920px cap is for full-width Trend pages) and
   grow the plot to the interest-rate curve's height. */
.morpho-rate-grid .detail-charts,
.loop-rate-grid .detail-charts {
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}

.morpho-rate-grid .detail-charts > .detail-chart:only-child,
.loop-rate-grid .detail-charts > .detail-chart:only-child {
  max-width: none;
}

.morpho-rate-grid .detail-utilization-history-section .detail-chart,
.loop-rate-grid .detail-utilization-history-section .detail-chart {
  display: flex;
  min-height: 280px;
  flex: 1 1 auto;
  flex-direction: column;
}

.morpho-rate-grid .detail-utilization-history-section .detail-chart-svg,
.loop-rate-grid .detail-utilization-history-section .detail-chart-svg {
  flex: 1 1 auto;
  width: 100%;
  min-height: 220px;
  max-height: 320px;
  aspect-ratio: auto;
}

.morpho-rate-grid .detail-chart-window-controls,
.loop-rate-grid .detail-chart-window-controls {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.morpho-context-grid .detail-oracle-section .oracle-detail-body.is-oracle-detail {
  max-width: none;
}

.morpho-context-grid .detail-yield-quote {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
}

.morpho-context-grid .detail-yield-history {
  border-top: 1px solid var(--line);
  border-left: 0;
}

.morpho-rate-grid .detail-irm-section .detail-irm-breakdown,
.loop-rate-grid .detail-irm-section .detail-irm-breakdown {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 14px;
}

.morpho-rate-grid .detail-irm-section .detail-irm-chart-wrap,
.loop-rate-grid .detail-irm-section .detail-irm-chart-wrap {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.morpho-rate-grid .detail-irm-section .detail-irm-chart,
.loop-rate-grid .detail-irm-section .detail-irm-chart {
  display: flex;
  min-height: 280px;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 14px 16px 10px;
}

.morpho-rate-grid .detail-chart {
  min-height: 250px;
}

.morpho-rate-grid .detail-chart-svg,
.morpho-rate-grid .detail-irm-section .detail-irm-plot,
.loop-rate-grid .detail-irm-section .detail-irm-plot {
  width: 100%;
  min-height: 240px;
  max-height: 320px;
  aspect-ratio: 16 / 10;
}

.morpho-rate-grid
  .detail-utilization-history-section
  .detail-charts
  > .detail-chart:only-child
  .detail-chart-svg,
.loop-rate-grid
  .detail-utilization-history-section
  .detail-charts
  > .detail-chart:only-child
  .detail-chart-svg {
  height: auto;
  min-height: 220px;
  max-height: 320px;
  aspect-ratio: auto;
}

.morpho-rate-grid .detail-chart-header h4,
.loop-rate-grid .detail-chart-header h4 {
  font-size: 0.92rem;
}

.morpho-rate-grid .detail-chart-legend-item,
.loop-rate-grid .detail-chart-legend-item {
  gap: 5px;
  padding: 4px 7px;
  font-size: 0.56rem;
}

.morpho-rate-grid .detail-chart-legend-item::before,
.loop-rate-grid .detail-chart-legend-item::before {
  width: 7px;
  height: 7px;
}

.morpho-rate-grid .detail-irm-legend .detail-chart-legend-item.is-anchor::before,
.loop-rate-grid .detail-irm-legend .detail-chart-legend-item.is-anchor::before {
  width: 2px;
  height: 11px;
}

@media (max-width: 1050px) {
  .morpho-context-grid,
  .morpho-rate-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .morpho-context-grid .detail-yield-quote {
    grid-template-columns: minmax(190px, 0.85fr) minmax(250px, 1.15fr);
  }

  .morpho-context-grid .detail-yield-history {
    border-top: 0;
    border-left: 1px solid var(--line);
  }
}

@media (max-width: 880px) {
  body.is-detail-view.is-morpho-workspace .detail-decision-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.is-detail-view.is-morpho-workspace .detail-decision-grid .detail-depth {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  body.is-detail-view.is-morpho-workspace .detail-summary.is-compact .detail-summary-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.is-detail-view.is-morpho-workspace
    .detail-summary.is-compact
    .detail-summary-metric {
    min-height: 68px;
  }

  body.is-detail-view.is-morpho-workspace
    .detail-decision-grid
    .detail-section {
    padding: 10px;
  }

  .detail-technical {
    margin-top: 16px;
    padding-top: 12px;
  }

  .morpho-context-grid .detail-yield-quote,
  .morpho-rate-grid .detail-irm-section .detail-irm-breakdown {
    grid-template-columns: minmax(0, 1fr);
  }

  .morpho-context-grid .detail-yield-history {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

/* Morpho mechanics refinements */
body.is-detail-view.is-morpho-workspace .morpho-context-grid {
  align-items: stretch;
}

body.is-detail-view.is-morpho-workspace
  .morpho-context-grid
  > .detail-section {
  height: 100%;
}

body.is-detail-view.is-morpho-workspace .detail-merkl-section {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

body.is-detail-view.is-morpho-workspace .detail-merkl-section .merkl-stack {
  display: grid;
  gap: 8px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.7rem;
}

body.is-detail-view.is-morpho-workspace
  .detail-merkl-section
  .detail-apy-breakdown,
body.is-detail-view.is-morpho-workspace
  .detail-merkl-section
  .merkl-campaign-list {
  display: grid;
}

body.is-detail-view.is-morpho-workspace .detail-merkl-section .merkl-campaign {
  gap: 4px 10px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--cobalt);
  border-radius: 6px;
  background: var(--surface);
}

body.is-detail-view.is-morpho-workspace .detail-apy-breakdown-item {
  min-width: 0;
  padding: 0;
  background: transparent;
}

body.is-detail-view.is-morpho-workspace
  .detail-apy-breakdown-item.is-total {
  border-left: 0;
  background: transparent;
}

body.is-detail-view.is-morpho-workspace
  .detail-apy-breakdown-item.is-total
  .apy-breakdown-value {
  color: var(--cobalt-strong);
  font-size: 0.92rem;
}

body.is-detail-view.is-morpho-workspace
  .detail-apy-breakdown-item.is-excluded {
  background: transparent;
}

body.is-detail-view.is-morpho-workspace
  .detail-apy-breakdown-item
  .apy-breakdown-line {
  align-items: baseline;
  padding: 0;
}

body.is-detail-view.is-morpho-workspace
  .detail-apy-breakdown-item
  .apy-breakdown-note,
body.is-detail-view.is-morpho-workspace
  .detail-apy-breakdown-item
  .apy-breakdown-meta {
  margin: 0;
  line-height: 1.25;
}

body.is-detail-view.is-morpho-workspace .morpho-rate-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

body.is-detail-view.is-morpho-workspace .morpho-rate-grid:has(> :only-child) {
  grid-template-columns: minmax(0, 1fr);
}

body.is-detail-view.is-morpho-workspace
  .morpho-rate-grid
  .detail-irm-section
  .detail-irm-breakdown {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

body.is-detail-view.is-morpho-workspace
  .morpho-rate-grid
  .detail-irm-metrics {
  align-self: stretch;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 12px 28px;
  padding: 10px 2px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

body.is-detail-view.is-morpho-workspace
  .morpho-rate-grid
  .detail-irm-metric-row {
  min-height: 0;
}

body.is-detail-view.is-morpho-workspace
  .morpho-rate-grid
  .detail-irm-chart {
  min-height: 280px;
  padding: 14px 16px 10px;
}

body.is-detail-view.is-morpho-workspace
  .morpho-rate-grid
  .detail-irm-plot,
body.is-detail-view.is-morpho-workspace
  .morpho-rate-grid
  .detail-irm-svg {
  width: 100%;
  min-height: 240px;
  max-height: 320px;
  aspect-ratio: 16 / 10;
}

body.is-detail-view.is-morpho-workspace
  .morpho-rate-grid
  .detail-utilization-history-section
  .detail-chart {
  min-height: 280px;
}

body.is-detail-view.is-morpho-workspace
  .morpho-rate-grid
  .detail-utilization-history-section
  .detail-chart-svg {
  min-height: 220px;
  max-height: 320px;
}

body.is-detail-view.is-morpho-workspace
  .morpho-rate-grid
  .detail-charts
  > .detail-chart:only-child {
  max-width: none;
}

body.is-detail-view.is-morpho-workspace
  .morpho-rate-grid
  .detail-exchange-rate-section
  .detail-charts {
  grid-template-columns: minmax(0, 1fr);
}

body.is-detail-view.is-morpho-workspace
  .morpho-rate-grid
  .detail-exchange-rate-section
  .detail-chart {
  min-height: 390px;
}

body.is-detail-view.is-morpho-workspace
  .morpho-rate-grid
  .detail-exchange-rate-section
  .detail-chart-svg {
  min-height: 320px;
  max-height: 420px;
  aspect-ratio: 16 / 6;
}

@media (min-width: 1100px) {
  body.is-detail-view.is-morpho-workspace
    .morpho-context-grid
    .detail-oracle-section {
    grid-column: span 8;
  }

  body.is-detail-view.is-morpho-workspace
    .morpho-context-grid
    .detail-merkl-section {
    grid-column: span 4;
  }

  body.is-detail-view.is-morpho-workspace
    .morpho-rate-grid
    .detail-irm-section,
  body.is-detail-view.is-morpho-workspace
    .morpho-rate-grid
    .detail-utilization-history-section {
    grid-column: auto;
  }

  body.is-detail-view.is-morpho-workspace
    .morpho-rate-grid
    > .detail-exchange-rate-section {
    grid-column: 1 / -1;
  }

  body.is-detail-view.is-morpho-workspace
    .morpho-rate-grid
    .detail-irm-section
    .detail-irm-breakdown {
    grid-template-columns: minmax(0, 1fr);
  }

  body.is-detail-view.is-morpho-workspace
    #detail-panel-trend
    .detail-charts:has(> :nth-child(3)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 880px) {
  body.is-detail-view.is-morpho-workspace
    .morpho-rate-grid
    .detail-irm-section
    .detail-irm-breakdown {
    grid-template-columns: minmax(0, 1fr);
  }

  body.is-detail-view.is-morpho-workspace
    .morpho-rate-grid
    .detail-irm-chart,
  body.is-detail-view.is-morpho-workspace
    .morpho-rate-grid
    .detail-exchange-rate-section
    .detail-chart {
    min-height: 300px;
  }

  body.is-detail-view.is-morpho-workspace
    .morpho-rate-grid
    .detail-irm-plot,
  body.is-detail-view.is-morpho-workspace
    .morpho-rate-grid
    .detail-irm-svg,
  body.is-detail-view.is-morpho-workspace
    .morpho-rate-grid
    .detail-exchange-rate-section
    .detail-chart-svg {
    min-height: 250px;
    aspect-ratio: 16 / 10;
  }
}

/* Image-led compact research workspace */
body.is-detail-view.is-morpho-workspace .market-detail-page {
  padding: 12px clamp(16px, 2vw, 28px) 42px;
}

body.is-detail-view.is-morpho-workspace .detail-page-shell {
  width: min(1380px, 100%);
}

body.is-detail-view.is-morpho-workspace .detail-breadcrumb {
  margin-bottom: 7px;
}

body.is-detail-view.is-morpho-workspace .detail-page-header {
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 10px;
}

body.is-detail-view.is-morpho-workspace .detail-page-title {
  font-size: clamp(1.45rem, 2.2vw, 2rem);
}

body.is-detail-view.is-morpho-workspace .detail-workspace-label {
  display: flex;
  min-height: 24px;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.57rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Numbered section titles on every detail kind so lend/borrow match
   Morpho loops (depth 2, oracle 3, merkl 6, IRM 7, util 8, exchange 9). */
body.is-detail-view
  .detail-depth-section
  .detail-section-title::before,
body.is-detail-view
  .detail-oracle-section
  .detail-section-title::before,
body.is-detail-view
  .detail-merkl-section
  .detail-section-title::before,
body.is-detail-view
  .detail-irm-section
  .detail-section-title::before,
body.is-detail-view
  .detail-utilization-history-section
  .detail-section-title::before,
body.is-detail-view
  .detail-exchange-rate-section
  .detail-section-title::before {
  display: inline-grid;
  min-width: 17px;
  height: 17px;
  place-items: center;
  flex: 0 0 auto;
  padding: 0 3px;
  border-radius: 1px;
  color: var(--cobalt-strong);
  background: var(--cobalt-soft);
  border: 1px solid color-mix(in srgb, var(--cobalt) 55%, transparent);
  font-family: var(--font-mono);
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

body.is-detail-view .detail-depth-section .detail-section-title::before {
  content: "2";
}

body.is-detail-view .detail-oracle-section .detail-section-title::before {
  content: "3";
}

body.is-detail-view .detail-merkl-section .detail-section-title::before {
  content: "6";
}

body.is-detail-view .detail-irm-section .detail-section-title::before {
  content: "7";
}

body.is-detail-view
  .detail-utilization-history-section
  .detail-section-title::before {
  content: "8";
}

body.is-detail-view .detail-exchange-rate-section .detail-section-title::before {
  content: "9";
}

body.is-detail-view.is-morpho-workspace .detail-workspace-index,
body.is-detail-view.is-morpho-workspace
  .detail-depth-section
  .detail-section-title::before,
body.is-detail-view.is-morpho-workspace
  .detail-risk-section
  .detail-section-title::before,
body.is-detail-view.is-morpho-workspace
  .detail-oracle-section
  .detail-section-title::before,
body.is-detail-view.is-morpho-workspace
  .detail-merkl-section
  .detail-section-title::before,
body.is-detail-view.is-morpho-workspace
  .detail-irm-section
  .detail-section-title::before,
body.is-detail-view.is-morpho-workspace
  .detail-utilization-history-section
  .detail-section-title::before,
body.is-detail-view.is-morpho-workspace
  .detail-exchange-rate-section
  .detail-section-title::before,
body.is-detail-view.is-morpho-workspace
  #detail-tab-trend::before,
body.is-detail-view.is-morpho-workspace
  #detail-panel-trend
  .detail-chart-header
  h4::before {
  display: inline-grid;
  min-width: 17px;
  height: 17px;
  place-items: center;
  flex: 0 0 auto;
  padding: 0 3px;
  border-radius: 1px;
  /* Dark filled square with cobalt text: the old light-blue fill + white
     digits blended into the white panel titles next to it. */
  color: var(--cobalt-strong);
  background: var(--cobalt-soft);
  border: 1px solid color-mix(in srgb, var(--cobalt) 55%, transparent);
  font-family: var(--font-mono);
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

body.is-detail-view.is-morpho-workspace
  .detail-depth-section
  .detail-section-title::before {
  content: "2";
}

body.is-detail-view.is-morpho-workspace
  .detail-risk-section
  .detail-section-title::before {
  display: none;
  content: none;
}

body.is-detail-view.is-morpho-workspace
  .detail-oracle-section
  .detail-section-title::before {
  content: "3";
}

body.is-detail-view.is-morpho-workspace
  .detail-merkl-section
  .detail-section-title::before {
  content: "6";
}

body.is-detail-view.is-morpho-workspace
  .detail-irm-section
  .detail-section-title::before {
  content: "7";
}

body.is-detail-view.is-morpho-workspace
  .detail-utilization-history-section
  .detail-section-title::before {
  content: "8";
}

body.is-detail-view.is-morpho-workspace
  .detail-exchange-rate-section
  .detail-section-title::before {
  content: "9";
}

body.is-detail-view.is-morpho-workspace #detail-tab-trend::before {
  margin-right: 5px;
  content: "4";
}

body.is-detail-view.is-morpho-workspace
  #detail-panel-trend
  .detail-charts
  > .detail-chart:nth-child(1)
  .detail-chart-header
  h4::before {
  margin-right: 6px;
  content: "4.1";
}

body.is-detail-view.is-morpho-workspace
  #detail-panel-trend
  .detail-charts
  > .detail-chart:nth-child(2)
  .detail-chart-header
  h4::before {
  margin-right: 6px;
  content: "4.2";
}

body.is-detail-view.is-morpho-workspace
  #detail-panel-trend
  .detail-charts
  > .detail-chart:nth-child(3)
  .detail-chart-header
  h4::before {
  margin-right: 6px;
  content: "4.3";
}

body.is-detail-view.is-morpho-workspace
  #detail-panel-trend
  .detail-chart-header
  h4 {
  display: flex;
  align-items: center;
}

body.is-detail-view.is-morpho-workspace
  .detail-summary.is-compact
  .detail-summary-bar {
  border-radius: 5px;
}

body.is-detail-view.is-morpho-workspace
  .detail-summary.is-compact
  .detail-summary-metric {
  min-height: 68px;
  padding: 9px 11px;
}

body.is-detail-view.is-morpho-workspace
  .detail-summary.is-compact
  .detail-summary-metric:first-child {
  border-top-width: 2px;
}

body.is-detail-view.is-morpho-workspace .detail-decision-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.is-detail-view.is-morpho-workspace
  .detail-decision-grid
  .detail-section {
  padding: 9px 10px 10px;
  border-radius: 5px;
}

body.is-detail-view.is-morpho-workspace
  .detail-decision-grid
  .detail-section-title {
  margin-bottom: 7px;
}

body.is-detail-view.is-morpho-workspace .detail-tabs {
  min-height: 36px;
  margin-top: 2px;
  margin-bottom: 8px;
}

body.is-detail-view.is-morpho-workspace .detail-tab-button {
  min-height: 36px;
}

body.is-detail-view.is-morpho-workspace .detail-trend-strip-metric {
  padding: 7px 10px;
}

body.is-detail-view.is-morpho-workspace
  #detail-panel-trend
  .detail-chart {
  min-height: 245px;
  padding: 10px;
  border-radius: 5px;
  box-shadow: none;
}

body.is-detail-view.is-morpho-workspace
  #detail-panel-trend
  .detail-chart-svg {
  min-height: 185px;
}

@media (min-width: 1100px) {
  body.is-detail-view.is-morpho-workspace .detail-technical {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
  }

  body.is-detail-view.is-morpho-workspace .morpho-context-grid {
    display: contents;
  }

  body.is-detail-view.is-morpho-workspace .morpho-rate-grid {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.is-detail-view.is-morpho-workspace
    .morpho-context-grid
    .detail-oracle-section {
    height: auto;
    grid-column: span 4;
  }

  body.is-detail-view.is-morpho-workspace
    .morpho-context-grid
    .detail-merkl-section {
    height: auto;
    grid-column: span 2;
  }

  body.is-detail-view.is-morpho-workspace
    .morpho-rate-grid
    .detail-irm-section,
  body.is-detail-view.is-morpho-workspace
    .morpho-rate-grid
    .detail-utilization-history-section {
    grid-column: auto;
  }

  body.is-detail-view.is-morpho-workspace
    .morpho-rate-grid
    .detail-exchange-rate-section {
    grid-column: 1 / -1;
  }

  body.is-detail-view.is-morpho-workspace
    .morpho-rate-grid
    .detail-irm-section
    .detail-irm-breakdown {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  body.is-detail-view.is-morpho-workspace
    .morpho-rate-grid
    .detail-irm-chart {
    min-height: 300px;
    padding: 10px;
  }

  body.is-detail-view.is-morpho-workspace
    .morpho-rate-grid
    .detail-irm-plot,
  body.is-detail-view.is-morpho-workspace
    .morpho-rate-grid
    .detail-irm-svg {
    min-height: 250px;
    max-height: 320px;
    aspect-ratio: 16 / 8;
  }

  body.is-detail-view.is-morpho-workspace
    .morpho-rate-grid
    .detail-exchange-rate-section
    .detail-chart {
    min-height: 310px;
    padding: 10px 12px;
    box-shadow: none;
  }

  body.is-detail-view.is-morpho-workspace
    .morpho-rate-grid
    .detail-exchange-rate-section
    .detail-chart-svg {
    min-height: 250px;
    max-height: 330px;
    aspect-ratio: 16 / 5;
  }
}

@media (max-width: 680px) {
  body.is-detail-view.is-morpho-workspace .market-detail-page {
    padding-right: 12px;
    padding-left: 12px;
  }

  body.is-detail-view.is-morpho-workspace .detail-workspace-label {
    min-height: 22px;
  }
}

/* Responsive ergonomics for the Morpho workspace */
@media (min-width: 681px) and (max-width: 1099px) {
  body.is-detail-view.is-morpho-workspace
    #detail-panel-trend
    .detail-charts:has(> :nth-child(3))
    > .detail-chart:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 880px) {
  body.is-detail-view.is-morpho-workspace
    .detail-header-actions
    .detail-action-link,
  body.is-detail-view.is-morpho-workspace
    .detail-header-actions
    button,
  body.is-detail-view.is-morpho-workspace
    .detail-header-actions
    .market-popout-link {
    min-height: 44px;
  }

  body.is-detail-view.is-morpho-workspace
    .detail-header-actions
    > .detail-star-button,
  body.is-detail-view.is-morpho-workspace
    .detail-header-actions
    > .detail-popout-link {
    min-width: 44px;
  }

  body.is-detail-view.is-morpho-workspace .detail-tab-button {
    min-height: 44px;
    padding-right: 10px;
    padding-left: 10px;
  }

  body.is-detail-view.is-morpho-workspace
    .detail-chart-window-controls
    button {
    min-width: 36px;
    min-height: 36px;
  }
}

@media (max-width: 680px) {
  body.is-detail-view.is-morpho-workspace .detail-page-header {
    gap: 0;
  }

  body.is-detail-view.is-morpho-workspace .detail-header-actions {
    display: grid;
    width: 100%;
    max-width: none;
    align-items: start;
    margin-top: 14px;
    grid-template-columns: 44px 44px minmax(0, 1fr);
    gap: 8px;
  }

  body.is-detail-view.is-morpho-workspace
    .detail-header-actions
    > .detail-star-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    grid-column: 1;
    grid-row: 1;
  }

  body.is-detail-view.is-morpho-workspace
    .detail-header-actions
    > .detail-popout-link {
    width: 44px;
    min-width: 44px;
    height: 44px;
    grid-column: 2;
    grid-row: 1;
  }

  body.is-detail-view.is-morpho-workspace
    .detail-header-actions
    .detail-action-links {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-column: 3;
    grid-row: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body.is-detail-view.is-morpho-workspace
    .detail-header-actions
    .detail-action-links
    > * {
    min-width: 0;
    min-height: 44px;
    justify-content: center;
    padding-right: 8px;
    padding-left: 8px;
    font-size: 0.6rem;
    text-align: center;
  }

  body.is-detail-view.is-morpho-workspace
    .detail-header-actions
    .detail-action-link.is-primary {
    grid-column: auto;
  }

  body.is-detail-view.is-morpho-workspace
    .detail-summary.is-compact
    .detail-summary-metric {
    min-width: 0;
    padding: 9px;
  }

  body.is-detail-view.is-morpho-workspace
    .detail-summary.is-compact
    .detail-summary-metric
    span {
    font-size: 0.5rem;
    letter-spacing: 0.04em;
  }

  body.is-detail-view.is-morpho-workspace
    .detail-summary.is-compact
    .detail-summary-metric
    strong {
    font-size: 0.82rem;
  }

  body.is-detail-view.is-morpho-workspace
    .detail-summary.is-compact
    .detail-summary-metric:first-child
    strong {
    font-size: 1.05rem;
  }

  body.is-detail-view.is-morpho-workspace
    .detail-decision-grid
    .detail-depth-value {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  body.is-detail-view.is-morpho-workspace
    .detail-decision-grid
    .detail-depth-asset {
    max-width: 100%;
  }

  body.is-detail-view.is-morpho-workspace .detail-tabs {
    margin-right: -12px;
    margin-left: -12px;
    padding: 0 12px;
    overscroll-behavior-inline: contain;
  }

  body.is-detail-view.is-morpho-workspace .detail-chart-header {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  body.is-detail-view.is-morpho-workspace
    .detail-chart-window-controls {
    margin-left: 0;
  }

  body.is-detail-view.is-morpho-workspace .detail-table-section {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.is-detail-view.is-morpho-workspace .detail-data-table {
    min-width: 520px;
  }
}

@media (max-width: 350px) {
  body.is-detail-view.is-morpho-workspace
    .detail-header-actions
    .detail-action-links {
    grid-template-columns: minmax(0, 1fr);
  }

  body.is-detail-view.is-morpho-workspace
    .detail-header-actions
    .detail-action-link.is-primary {
    grid-column: 1;
  }

  body.is-detail-view.is-morpho-workspace
    .detail-decision-grid
    .detail-metric {
    padding: 7px;
  }
}

/* Chart legibility takes priority over maximum dashboard density. */
body.is-detail-view.is-morpho-workspace .detail-chart-header h4 {
  font-size: 0.92rem;
}

body.is-detail-view.is-morpho-workspace .detail-chart-header > span,
body.is-detail-view.is-morpho-workspace .detail-chart-heading > span,
body.is-detail-view.is-morpho-workspace .detail-chart-range {
  color: var(--muted);
  font-size: 0.56rem;
}

body.is-detail-view.is-morpho-workspace .detail-chart-legend-item {
  gap: 5px;
  padding: 4px 7px;
  font-size: 0.56rem;
}

body.is-detail-view.is-morpho-workspace
  .detail-chart-legend-item::before {
  width: 7px;
  height: 7px;
}

body.is-detail-view.is-morpho-workspace .detail-chart-svg text,
body.is-detail-view.is-morpho-workspace
  .intel-trend-plot
  .detail-chart-svg
  text,
body.is-detail-view.is-morpho-workspace .intel-trend-flow-svg text,
body.is-detail-view.is-morpho-workspace .intel-analysis-axis,
body.is-detail-view.is-morpho-workspace .pendle-amm-curve-label,
body.is-detail-view.is-morpho-workspace .pendle-amm-curve-axis-title,
body.is-detail-view.is-morpho-workspace .chart-axis {
  fill: var(--chart-tick-fill);
  stroke: none;
  font-size: var(--chart-tick-size);
  font-weight: var(--chart-tick-weight);
  font-family: var(--chart-tick-font);
}

body.is-detail-view.is-morpho-workspace
  .detail-chart-svg
  text.detail-chart-axis-title {
  font-size: var(--chart-tick-size);
  font-weight: var(--chart-tick-weight);
}

@media (min-width: 1100px) {
  body.is-detail-view.is-morpho-workspace
    .morpho-context-grid
    .detail-oracle-section {
    grid-column: span 8;
  }

  body.is-detail-view.is-morpho-workspace
    .morpho-context-grid
    .detail-merkl-section {
    grid-column: span 4;
  }

  body.is-detail-view.is-morpho-workspace
    .morpho-rate-grid
    .detail-irm-section,
  body.is-detail-view.is-morpho-workspace
    .morpho-rate-grid
    .detail-utilization-history-section {
    grid-column: auto;
  }

  body.is-detail-view.is-morpho-workspace
    .morpho-rate-grid
    > .detail-exchange-rate-section {
    grid-column: 1 / -1;
  }

  body.is-detail-view.is-morpho-workspace
    .morpho-rate-grid
    .detail-irm-section
    .detail-irm-breakdown {
    grid-template-columns: minmax(0, 1fr);
  }

  body.is-detail-view.is-morpho-workspace
    #detail-panel-trend
    .detail-charts:has(> :nth-child(3)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.is-detail-view.is-morpho-workspace
    #detail-panel-trend
    .detail-charts:has(> :nth-child(3))
    > .detail-chart:last-child {
    min-height: 370px;
    grid-column: 1 / -1;
  }

  body.is-detail-view.is-morpho-workspace
    #detail-panel-trend
    .detail-charts:has(> :nth-child(3))
    > .detail-chart:not(:last-child) {
    min-height: 330px;
  }

  body.is-detail-view.is-morpho-workspace
    #detail-panel-trend
    .detail-charts:has(> :nth-child(3))
    > .detail-chart:last-child
    .detail-chart-svg {
    min-height: 300px;
  }

  body.is-detail-view.is-morpho-workspace
    #detail-panel-trend
    .detail-charts:has(> :nth-child(3))
    > .detail-chart:not(:last-child)
    .detail-chart-svg {
    min-height: 255px;
  }

  body.is-detail-view.is-morpho-workspace
    .morpho-rate-grid
    .detail-irm-chart,
  body.is-detail-view.is-morpho-workspace
    .morpho-rate-grid
    .detail-utilization-history-section
    .detail-chart {
    min-height: 300px;
  }

  body.is-detail-view.is-morpho-workspace
    .morpho-rate-grid
    .detail-irm-plot,
  body.is-detail-view.is-morpho-workspace
    .morpho-rate-grid
    .detail-irm-svg,
  body.is-detail-view.is-morpho-workspace
    .morpho-rate-grid
    .detail-utilization-history-section
    .detail-chart-svg {
    min-height: 240px;
    max-height: 320px;
  }

  body.is-detail-view.is-morpho-workspace
    .morpho-rate-grid
    .detail-exchange-rate-section
    .detail-chart {
    min-height: 400px;
  }

  body.is-detail-view.is-morpho-workspace
    .morpho-rate-grid
    .detail-exchange-rate-section
    .detail-chart-svg {
    min-height: 330px;
    max-height: 390px;
  }
}

@media (max-width: 680px) {
  body.is-detail-view.is-morpho-workspace .detail-chart-svg text,
  body.is-detail-view.is-morpho-workspace
    .detail-chart-svg
    text.detail-chart-axis-title {
    font-size: var(--chart-tick-size);
    font-weight: var(--chart-tick-weight);
  }

  body.is-detail-view.is-morpho-workspace
    #detail-panel-trend
    .detail-chart {
    min-height: 300px;
  }

  body.is-detail-view.is-morpho-workspace
    #detail-panel-trend
    .detail-chart-svg {
    min-height: 230px;
  }
}

body.is-detail-view.is-morpho-workspace .detail-chart-window-controls {
  flex-wrap: nowrap;
  white-space: nowrap;
}

body.is-detail-view.is-morpho-workspace
  #detail-panel-trend
  .detail-charts {
  grid-template-columns: minmax(0, 1fr);
}

body.is-detail-view.is-morpho-workspace
  #detail-panel-trend
  .detail-chart-svg,
body.is-detail-view.is-morpho-workspace
  #detail-panel-trend
  .intel-trend-flow-svg {
  height: 350px;
  min-height: 350px;
  max-height: none;
  aspect-ratio: auto;
}

@media (max-width: 900px) {
  body.is-detail-view.is-morpho-workspace
    #detail-panel-trend
    .intel-trend-plot
    .detail-chart-svg,
  body.is-detail-view.is-morpho-workspace
    #detail-panel-trend
    .intel-trend-flow-svg {
    height: 280px;
    min-height: 280px;
  }
}

@media (min-width: 1600px) {
  body.is-detail-view.is-morpho-workspace
    #detail-panel-trend
    .detail-charts:has(> :nth-child(2)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.is-detail-view.is-morpho-workspace
    #detail-panel-trend
    .detail-charts:has(> :nth-child(3))
    > .detail-chart:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  body.is-detail-view.is-morpho-workspace
    #detail-panel-trend
    .detail-chart-svg {
    height: 330px;
    min-height: 330px;
    max-height: 330px;
  }
}

/* Shared loop workspace: protocol renderers keep their own content while
 * using one hierarchy, density, and chart sizing model. */
body.is-detail-view.is-loop-workspace .market-detail-page {
  padding: 12px clamp(16px, 2vw, 28px) 42px;
}

body.is-detail-view.is-loop-workspace .detail-page-shell {
  width: min(1380px, 100%);
}

body.is-detail-view.is-loop-workspace .detail-breadcrumb {
  margin-bottom: 7px;
}

body.is-detail-view.is-loop-workspace .detail-page-header {
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 10px;
}

body.is-detail-view.is-loop-workspace .detail-page-title {
  font-size: clamp(1.45rem, 2.2vw, 2rem);
}

body.is-detail-view.is-loop-workspace .detail-summary-slot {
  gap: 10px;
  margin-bottom: 12px;
}

body.is-detail-view.is-loop-workspace .detail-summary.is-compact {
  gap: 0;
}

body.is-detail-view.is-loop-workspace
  .detail-summary.is-compact
  .detail-summary-bar.is-primary {
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}

body.is-detail-view.is-loop-workspace
  .detail-summary.is-compact
  .detail-summary-metric {
  min-height: 58px;
  padding: 8px 10px;
}

body.is-detail-view.is-loop-workspace
  .detail-summary.is-compact
  .detail-summary-metric:first-child {
  border-top: 3px solid var(--cobalt);
  background: color-mix(in srgb, var(--cobalt-soft) 46%, var(--surface));
}

body.is-detail-view.is-loop-workspace
  .detail-summary.is-compact
  .detail-summary-metric:first-child
  strong {
  font-size: 1.28rem;
}

body.is-detail-view.is-loop-workspace
  .detail-summary.is-compact
  .detail-summary-metric.is-history {
  background: var(--surface-hover);
}

body.is-detail-view.is-loop-workspace
  .detail-summary.is-compact
  .detail-summary-metric.is-history
  strong {
  color: var(--muted);
  font-size: 0.88rem;
}

body.is-detail-view.is-loop-workspace
  .detail-summary.is-compact
  .detail-summary-metric.is-limit {
  min-height: 58px;
  background: color-mix(in srgb, var(--cobalt-soft) 28%, var(--surface));
}

body.is-detail-view.is-loop-workspace
  .detail-summary.is-compact
  .detail-summary-metric.is-limit
  strong {
  font-size: 0.98rem;
}

body.is-detail-view.is-loop-workspace .detail-workspace-label {
  display: flex;
  min-height: 24px;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.57rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.is-detail-view.is-loop-workspace .detail-workspace-index {
  display: inline-grid;
  min-width: 17px;
  height: 17px;
  place-items: center;
  padding: 0 3px;
  border-radius: 1px;
  color: #fff;
  background: var(--cobalt-strong);
  font-size: 0.48rem;
  line-height: 1;
}

body.is-detail-view.is-loop-workspace .detail-decision-grid {
  margin-bottom: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.is-detail-view.is-loop-workspace
  .detail-decision-grid
  .detail-section {
  min-width: 0;
  padding: 8px 10px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
}

body.is-detail-view.is-loop-workspace
  .detail-decision-grid
  .detail-depth {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

body.is-detail-view.is-loop-workspace
  .detail-decision-grid
  .detail-depth
  .detail-metric {
  min-height: 52px;
  padding: 7px 8px;
}

body.is-detail-view.is-loop-workspace .detail-risk-note {
  margin-top: 8px;
  font-size: 0.58rem;
  line-height: 1.4;
}

body.is-detail-view.is-loop-workspace .detail-technical {
  grid-template-columns: minmax(0, 1fr);
}

body.is-detail-view.is-loop-workspace
  :is(.loop-context-grid, .loop-rate-grid) {
  display: grid;
  min-width: 0;
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

body.is-detail-view.is-loop-workspace
  .loop-rate-grid:has(> .detail-irm-section):has(> .detail-utilization-history-section) {
  align-items: stretch;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 1050px) {
  body.is-detail-view.is-morpho-workspace .morpho-rate-grid,
  body.is-detail-view.is-loop-workspace .loop-rate-grid,
  body.is-detail-view.is-loop-workspace
    .loop-rate-grid:has(> .detail-irm-section):has(> .detail-utilization-history-section) {
    grid-template-columns: minmax(0, 1fr);
  }
}

body.is-detail-view.is-loop-workspace
  :is(.loop-context-grid, .loop-rate-grid)
  > .detail-section {
  min-width: 0;
  margin-bottom: 0;
}

body.is-detail-view.is-loop-workspace .detail-chart-window-controls {
  flex-wrap: nowrap;
  white-space: nowrap;
}

body.is-detail-view.is-loop-workspace .detail-chart-header h4 {
  font-size: 0.92rem;
}

body.is-detail-view.is-loop-workspace .detail-chart-header > span,
body.is-detail-view.is-loop-workspace .detail-chart-heading > span,
body.is-detail-view.is-loop-workspace .detail-chart-range {
  color: var(--muted);
  font-size: 0.56rem;
}

body.is-detail-view.is-loop-workspace .detail-chart-legend-item {
  gap: 5px;
  padding: 4px 7px;
  font-size: 0.56rem;
}

body.is-detail-view.is-loop-workspace
  .detail-chart-legend-item::before {
  width: 7px;
  height: 7px;
}

body.is-detail-view.is-loop-workspace
  :is(.detail-history-section, .detail-tab-content)
  .detail-charts {
  grid-template-columns: minmax(0, 1fr) !important;
}

body.is-detail-view.is-loop-workspace
  :is(.detail-history-section, .detail-tab-content)
  .detail-chart-svg {
  height: 350px;
  min-height: 350px;
  max-height: none;
  aspect-ratio: auto;
}

@media (min-width: 1600px) {
  body.is-detail-view.is-loop-workspace
    :is(.detail-history-section, .detail-tab-content)
    .detail-charts:has(> :nth-child(2)) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.is-detail-view.is-loop-workspace
    :is(.detail-history-section, .detail-tab-content)
    .detail-charts
    > .detail-chart:last-child {
    grid-column: auto !important;
  }

  body.is-detail-view.is-loop-workspace
    :is(.detail-history-section, .detail-tab-content)
    .detail-charts:has(> .detail-chart:last-child:nth-child(odd))
    > .detail-chart:last-child {
    grid-column: 1 / -1 !important;
  }

  body.is-detail-view.is-loop-workspace .loop-context-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(330px, 0.75fr);
  }

  body.is-detail-view.is-loop-workspace
    .loop-context-grid:has(> :only-child) {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 880px) {
  body.is-detail-view.is-loop-workspace
    .detail-header-actions
    .detail-action-link,
  body.is-detail-view.is-loop-workspace
    .detail-header-actions
    button,
  body.is-detail-view.is-loop-workspace
    .detail-header-actions
    .market-popout-link {
    min-height: 44px;
  }

  body.is-detail-view.is-loop-workspace
    .detail-header-actions
    > .detail-star-button,
  body.is-detail-view.is-loop-workspace
    .detail-header-actions
    > .detail-popout-link {
    min-width: 44px;
  }

  body.is-detail-view.is-loop-workspace
    .detail-chart-window-controls
    button {
    min-width: 36px;
    min-height: 36px;
  }

  body.is-detail-view.is-loop-workspace .detail-decision-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.is-detail-view.is-loop-workspace
    .detail-decision-grid
    .detail-depth {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  body.is-detail-view.is-loop-workspace .detail-page-header {
    gap: 0;
  }

  body.is-detail-view.is-loop-workspace .detail-header-actions {
    display: grid;
    width: 100%;
    max-width: none;
    align-items: start;
    margin-top: 14px;
    grid-template-columns: 44px 44px minmax(0, 1fr);
    gap: 8px;
  }

  body.is-detail-view.is-loop-workspace
    .detail-header-actions
    > .detail-star-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    grid-column: 1;
    grid-row: 1;
  }

  body.is-detail-view.is-loop-workspace
    .detail-header-actions
    > .detail-popout-link {
    width: 44px;
    min-width: 44px;
    height: 44px;
    grid-column: 2;
    grid-row: 1;
  }

  body.is-detail-view.is-loop-workspace
    .detail-header-actions
    .detail-action-links {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-column: 3;
    grid-row: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body.is-detail-view.is-loop-workspace
    .detail-header-actions
    .detail-action-links
    > * {
    min-width: 0;
    min-height: 44px;
    justify-content: center;
    padding-right: 8px;
    padding-left: 8px;
    font-size: 0.6rem;
    text-align: center;
  }

  body.is-detail-view.is-loop-workspace
    .detail-header-actions
    .detail-action-link.is-primary {
    grid-column: auto;
  }

  body.is-detail-view.is-loop-workspace
    .detail-summary.is-compact
    .detail-summary-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.is-detail-view.is-loop-workspace
    .detail-summary.is-compact
    .detail-summary-metric {
    min-height: 68px;
  }

  body.is-detail-view.is-loop-workspace
    .detail-summary.is-compact
    .detail-summary-metric {
    min-width: 0;
    padding: 9px;
  }

  body.is-detail-view.is-loop-workspace
    .detail-decision-grid
    .detail-depth-value {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  body.is-detail-view.is-loop-workspace .detail-chart-header {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  body.is-detail-view.is-loop-workspace
    .detail-chart-window-controls {
    margin-left: 0;
  }

  body.is-detail-view.is-loop-workspace .detail-table-section {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.is-detail-view.is-loop-workspace .detail-data-table {
    min-width: 520px;
  }

  body.is-detail-view.is-loop-workspace
    :is(.detail-history-section, .detail-tab-content)
    .detail-chart-svg {
    height: 330px;
    min-height: 330px;
    max-height: 330px;
  }
}

/* Spot lend pages share the compact loop/borrow overview: one key-metrics
 * row, tight depth cards, and the same page density. */
body.is-detail-view.is-spot-workspace .market-detail-page {
  padding: 12px clamp(16px, 2vw, 28px) 42px;
}

body.is-detail-view.is-spot-workspace .detail-page-shell {
  width: min(1380px, 100%);
}

body.is-detail-view.is-spot-workspace .detail-breadcrumb {
  margin-bottom: 7px;
}

body.is-detail-view.is-spot-workspace .detail-page-header {
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 10px;
}

body.is-detail-view.is-spot-workspace .detail-page-title {
  font-size: clamp(1.45rem, 2.2vw, 2rem);
}

body.is-detail-view.is-spot-workspace .detail-summary-slot {
  gap: 10px;
  margin-bottom: 12px;
}

body.is-detail-view.is-spot-workspace .detail-summary.is-compact {
  gap: 0;
}

body.is-detail-view.is-spot-workspace
  .detail-summary.is-compact
  .detail-summary-bar.is-primary {
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}

body.is-detail-view.is-spot-workspace
  .detail-summary.is-compact
  .detail-summary-metric {
  min-height: 58px;
  padding: 8px 10px;
}

body.is-detail-view.is-spot-workspace
  .detail-summary.is-compact
  .detail-summary-metric:first-child {
  border-top: 3px solid var(--cobalt);
  background: color-mix(in srgb, var(--cobalt-soft) 46%, var(--surface));
}

body.is-detail-view.is-spot-workspace
  .detail-summary.is-compact
  .detail-summary-metric:first-child
  strong {
  font-size: 1.28rem;
}

body.is-detail-view.is-spot-workspace
  .detail-summary.is-compact
  .detail-summary-metric.is-history {
  background: var(--surface-hover);
}

body.is-detail-view.is-spot-workspace
  .detail-summary.is-compact
  .detail-summary-metric.is-history
  strong {
  color: var(--muted);
  font-size: 0.88rem;
}

body.is-detail-view.is-spot-workspace
  .detail-summary.is-compact
  .detail-summary-metric.is-limit {
  min-height: 58px;
  background: color-mix(in srgb, var(--cobalt-soft) 28%, var(--surface));
}

body.is-detail-view.is-spot-workspace
  .detail-summary.is-compact
  .detail-summary-metric.is-limit
  strong {
  font-size: 0.98rem;
}

body.is-detail-view.is-spot-workspace .detail-workspace-label {
  display: flex;
  min-height: 24px;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.57rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.is-detail-view.is-spot-workspace .detail-workspace-index {
  display: inline-grid;
  min-width: 17px;
  height: 17px;
  place-items: center;
  padding: 0 3px;
  border-radius: 1px;
  color: #fff;
  background: var(--cobalt-strong);
  font-size: 0.48rem;
  line-height: 1;
}

body.is-detail-view.is-spot-workspace .detail-workspace-meta {
  margin-left: auto;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: none;
}

body.is-detail-view.is-spot-workspace .detail-decision-grid {
  margin-bottom: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.is-detail-view.is-spot-workspace
  .detail-decision-grid
  .detail-section {
  min-width: 0;
  padding: 8px 10px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
}

body.is-detail-view.is-spot-workspace
  .detail-decision-grid
  .detail-depth {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

body.is-detail-view.is-spot-workspace
  .detail-decision-grid
  .detail-depth
  .detail-metric {
  min-height: 52px;
  padding: 7px 8px;
}

body.is-detail-view.is-spot-workspace
  :is(.detail-history-section, .detail-tab-content)
  .detail-charts {
  grid-template-columns: minmax(0, 1fr) !important;
}

body.is-detail-view.is-spot-workspace
  :is(.detail-history-section, .detail-tab-content)
  .detail-chart-svg {
  height: 350px;
  min-height: 350px;
  max-height: none;
  aspect-ratio: auto;
}

@media (min-width: 1600px) {
  body.is-detail-view.is-spot-workspace
    :is(.detail-history-section, .detail-tab-content)
    .detail-charts:has(> :nth-child(2)) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.is-detail-view.is-spot-workspace
    :is(.detail-history-section, .detail-tab-content)
    .detail-charts
    > .detail-chart:last-child {
    grid-column: auto !important;
  }

  body.is-detail-view.is-spot-workspace
    :is(.detail-history-section, .detail-tab-content)
    .detail-charts:has(> .detail-chart:last-child:nth-child(odd))
    > .detail-chart:last-child {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 880px) {
  body.is-detail-view.is-spot-workspace .detail-decision-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.is-detail-view.is-spot-workspace
    .detail-decision-grid
    .detail-depth {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  body.is-detail-view.is-spot-workspace
    .detail-summary.is-compact
    .detail-summary-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.is-detail-view.is-spot-workspace
    .detail-summary.is-compact
    .detail-summary-metric {
    min-width: 0;
    min-height: 68px;
    padding: 9px;
  }
}

/* The header action row (Feedback · AI console · avatar · admin buttons)
   is wider than a phone viewport and, being outside any scroller, inflates
   the layout viewport so the page renders zoomed-out. Tighten and let it
   wrap instead. */
@media (max-width: 680px) {
  .site-header {
    padding-right: max(12px, env(safe-area-inset-right));
    padding-left: max(12px, env(safe-area-inset-left));
  }

  .header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    row-gap: 4px;
    padding-block: 6px;
  }
}

@media (max-width: 520px) {
  .brand-name {
    display: none;
  }

  .site-header .brand {
    gap: 0;
  }
}

/* Below ~360px the four flexed tab buttons are narrower than their
   label + count-chip content, so adjacent tabs' contents paint over each
   other. Drop the secondary count chips there; labels alone fit. */
@media (max-width: 355px) {
  .tab-count {
    display: none;
  }

  .tab-button {
    gap: 0;
    padding: 0 4px;
  }
}