/* StoxCredit visual system. Presentation only: application and wallet logic are untouched. */
:root {
  --bg: #f5f5f1;
  --p: #ffffff;
  --ink: #182522;
  --muted: #62716b;
  --line: #d7ded7;
  --lime: #126b55;
  --sans: "DM Sans", Arial, sans-serif;
  --mono: "DM Mono", Consolas, monospace;
}

html { scrollbar-color: #b8c4ba #f5f5f1; }
body.app-mode {
  color: var(--ink);
  background: var(--bg);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
}
body.app-mode a { color: var(--lime); }
body.app-mode a:hover { color: #0a4b3a; }
body.app-mode [hidden] { display: none !important; }
body.app-mode button, body.app-mode input, body.app-mode select { font-family: inherit; }
body.app-mode :is(button, a, input, select, summary, tr):focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

/* Navigation is a quiet utility bar, not a marketing hero. */
body.app-mode .site-header {
  position: relative;
  z-index: 5;
  min-height: 68px;
  padding: 0 max(28px, calc((100vw - 1344px) / 2));
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  gap: 24px;
}
body.app-mode .header-left { gap: 46px; }
body.app-mode .brand-link { gap: 10px; color: var(--ink); text-decoration: none; }
body.app-mode .brand-logo { width: 38px; height: 38px; border: 1px solid #e6eae5; border-radius: 3px; background: #fff; }
body.app-mode .app-brand-name { color: var(--ink); font-size: 19px; font-weight: 700; letter-spacing: -.045em; }
body.app-mode .site-nav { display: flex; align-items: stretch; gap: 25px; align-self: stretch; }
body.app-mode .site-nav a {
  display: inline-flex;
  align-items: center;
  padding: 0 1px;
  color: #60706b;
  border-bottom: 2px solid transparent;
  background: none;
  border-radius: 0;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
body.app-mode .site-nav a:hover { color: var(--ink); }
body.app-mode .site-nav a.active { color: var(--ink); border-bottom-color: var(--lime); background: none; }
body.app-mode .header-actions { gap: 12px; }
body.app-mode .network-badge { padding: 0; color: #62716b; border: 0; border-radius: 0; background: none; font-size: 12px; margin-right: 4px; }
body.app-mode .network-badge i, body.app-mode .base-dot { background: var(--lime); }
body.app-mode .header-actions .wallet,
body.app-mode .disconnect-wallet {
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid var(--ink);
  border-radius: 3px;
  background: var(--ink);
  color: #fff !important;
  box-shadow: none;
  font-size: 12px;
  font-weight: 600;
  transition: background-color .15s ease;
}
body.app-mode .header-actions .wallet:hover,
body.app-mode .disconnect-wallet:hover { background: #31443d; }
body.app-mode .disconnect-wallet { background: transparent; color: var(--ink) !important; }

/* Market overview is editorial, with the numbers set into the page. */
body.app-mode .app-shell { max-width: 1400px; padding: 36px 28px 20px; }
body.app-mode .app-heading { padding: 0 0 30px; margin: 0; border-bottom: 1px solid var(--line); }
body.app-mode .app-heading .section-label {
  margin: 0 0 12px;
  color: var(--muted);
  font: 500 10px var(--mono);
  letter-spacing: .075em;
}
body.app-mode .app-heading .base-dot { width: 6px; height: 6px; }
body.app-mode .app-heading h1 {
  max-width: none;
  margin: 0;
  color: var(--ink);
  font-size: clamp(29px, 3.1vw, 41px);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -.045em;
}
body.app-mode .app-heading #appSubtitle {
  max-width: 720px;
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
body.app-mode .app-heading .feed-status {
  position: static;
  margin: 14px 0 0 !important;
  color: #708077 !important;
  font-size: 11px !important;
}
body.app-mode .market-metrics,
body.app-mode #marketMetrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 34px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
body.app-mode #marketMetrics .market-metric,
body.app-mode #marketMetrics #totalStockTvl,
body.app-mode #marketMetrics .trusted-by {
  padding: 20px 22px 21px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body.app-mode #marketMetrics > :first-child { padding-left: 0; }
body.app-mode #marketMetrics > :last-child { border-right: 0; }
body.app-mode #marketMetrics :is(.market-metric, #totalStockTvl) > span,
body.app-mode #marketMetrics .trusted-by span { color: var(--muted); font-size: 11px; letter-spacing: 0; }
body.app-mode #marketMetrics :is(.market-metric, #totalStockTvl) > strong {
  display: block;
  margin: 8px 0 2px;
  color: var(--ink);
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 650;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
body.app-mode #marketMetrics :is(.market-metric, #totalStockTvl) > small,
body.app-mode #marketMetrics .trusted-by strong { color: #75847b; font-size: 10px; font-weight: 400; }
body.app-mode #totalStockTvl::after { content: none; }

/* Market discovery: one continuous surface and a true data table. */
body.app-mode:not(.stock-detail-mode) .layout { display: block; margin: 0; }
body.app-mode .panel { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
body.app-mode #stockListPanel { width: 100%; }
body.app-mode .ph { padding: 0 0 17px; border-bottom: 1px solid var(--line); }
body.app-mode .ph h2 { color: var(--ink); font-size: 21px; font-weight: 650; letter-spacing: -.035em; }
body.app-mode .count { padding: 0; color: var(--muted); border: 0; background: none; border-radius: 0; font: 11px var(--sans); }
body.app-mode .market-toolbar { padding: 18px 0 14px; }
body.app-mode .explore-switch { gap: 20px; border: 0; background: transparent; padding: 0; }
body.app-mode .explore-switch button {
  padding: 6px 0 9px;
  color: var(--muted);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  font-size: 13px;
  font-weight: 600;
}
body.app-mode .explore-switch button.on { color: var(--ink); border-bottom-color: var(--lime); background: none; }
body.app-mode .toolbar { padding: 16px 0 0; gap: 10px; border: 0; }
body.app-mode .search-wrap { color: var(--muted); border: 1px solid #c7d1c8; border-radius: 3px; background: #fff; }
body.app-mode .search-wrap:focus-within { border-color: var(--lime); box-shadow: 0 0 0 2px #126b551a; }
body.app-mode .search-wrap .search { width: 100%; min-width: 0; border: 0; border-radius: 0; background: transparent; }
body.app-mode .search-wrap .search:focus { outline: 0; }
body.app-mode .search,
body.app-mode #marketSort,
body.app-mode .market-choice {
  min-height: 39px;
  padding: 8px 12px;
  color: var(--ink);
  border: 1px solid #c7d1c8;
  border-radius: 3px;
  background: #fff;
  box-shadow: none;
  font-size: 12px;
}
body.app-mode .search { max-width: none; }
body.app-mode .search::placeholder { color: #88958c; }
body.app-mode .refresh {
  min-height: 39px;
  padding: 0 14px;
  color: var(--ink);
  border: 1px solid #c7d1c8;
  border-radius: 3px;
  background: #fff;
  font-size: 12px;
}
body.app-mode .refresh:hover { background: #e9efea; color: var(--ink); }
body.app-mode .explore-caption { margin: 0 0 12px; color: var(--muted); font-size: 12px; }
body.app-mode .table { min-width: 760px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
body.app-mode .table th {
  padding: 11px 16px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  background: #e9eee9;
  font: 600 10px var(--sans);
  letter-spacing: .045em;
}
body.app-mode .table td {
  padding: 15px 16px;
  color: #304039;
  border-bottom: 1px solid #e1e6e0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
body.app-mode .table tbody tr { background: transparent; transition: background-color .13s ease; }
body.app-mode .table tbody tr:hover,
body.app-mode .table tbody tr.active { background: #e8f0e9; box-shadow: none; }
body.app-mode .table tbody tr.unavailable { opacity: .58; }
body.app-mode .table .asset strong { color: var(--ink); font-size: 13px; font-weight: 650; }
body.app-mode .table .asset small { color: var(--muted); font-size: 11px; }
body.app-mode .table .apy { color: var(--lime) !important; }
body.app-mode .table .coin,
body.app-mode .small-token { background: #fff; border: 1px solid var(--line); color: var(--ink); }
body.app-mode .row-arrow { color: var(--lime); border: 0; background: none; }
body.app-mode .empty { padding: 34px 18px; color: var(--muted); }
body.app-mode .empty h3 { color: var(--ink); font-size: 16px; }
body.app-mode .empty p { color: var(--muted); }
body.app-mode .empty .glyph { color: var(--lime); }

body.app-mode .bottom { padding: 16px 0 0; margin: 0; color: var(--muted); border: 0; font-size: 11px; }
body.app-mode .bottom a { color: var(--lime); }

/* Market detail: data on the left, transaction form on a separate work area. */
body.app-mode.stock-detail-mode .app-heading { display: none; }
body.app-mode.stock-detail-mode .app-shell { padding-top: 25px; }
body.app-mode.stock-detail-mode .back-markets { display: inline-block; margin: 0 0 24px; color: var(--muted); font-size: 12px; text-decoration: none; }
body.app-mode.stock-detail-mode .back-markets:hover { color: var(--lime); }
body.app-mode.stock-detail-mode .layout { grid-template-columns: minmax(0, 1fr) minmax(340px, 390px); gap: clamp(35px, 5vw, 75px); }
body.app-mode.stock-detail-mode .market-overview { margin: 0 0 27px; padding: 0; border: 0; border-radius: 0; background: transparent; }
body.app-mode.stock-detail-mode .overview-pair { gap: 10px; margin: 0 0 25px; }
body.app-mode.stock-detail-mode .overview-pair strong { color: var(--ink); font-size: clamp(26px, 3vw, 35px); font-weight: 650; letter-spacing: -.055em; }
body.app-mode.stock-detail-mode .overview-pair > span { color: var(--muted); }
body.app-mode.stock-detail-mode .overview-pair .coin { width: 38px; height: 38px; }
body.app-mode.stock-detail-mode .overview-pair small { padding: 4px 7px; color: var(--lime); border: 1px solid #b6d4c1; border-radius: 2px; background: transparent; font-size: 10px; }
body.app-mode.stock-detail-mode .stock-tvl-detail { margin: 0; padding: 18px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
body.app-mode.stock-detail-mode .stock-tvl-detail > span,
body.app-mode.stock-detail-mode .overview-stats span { color: var(--muted); font-size: 11px; }
body.app-mode.stock-detail-mode .stock-tvl-detail > strong { margin: 6px 0 2px; color: var(--ink); font-size: 32px; font-weight: 650; letter-spacing: -.04em; }
body.app-mode.stock-detail-mode .stock-tvl-detail > small,
body.app-mode.stock-detail-mode .overview-stats small { color: #7e8e83; font-size: 10px; }
body.app-mode.stock-detail-mode .overview-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
body.app-mode.stock-detail-mode .overview-stats > div { padding: 18px 20px 17px 0; border: 0; background: transparent; }
body.app-mode.stock-detail-mode .overview-stats > div:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--line); }
body.app-mode.stock-detail-mode .overview-stats > div:nth-child(n+3) { border-top: 1px solid var(--line); }
body.app-mode.stock-detail-mode .overview-stats strong { display: block; margin: 6px 0 1px; color: var(--ink); font-size: 23px; font-weight: 600; }
body.app-mode.stock-detail-mode .detail-nav { gap: 25px; margin: 0 0 25px; padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
body.app-mode .mobile-action-link { display: none; }
body.app-mode.stock-detail-mode .detail-nav button { padding: 11px 0; color: var(--muted); border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; font-size: 12px; }
body.app-mode.stock-detail-mode .detail-nav button.on { color: var(--ink); border-bottom-color: var(--lime); background: none; }
body.app-mode #marketInformation h2 { color: var(--ink); font-size: 20px; font-weight: 650; }
body.app-mode #marketInformation h3 { color: var(--ink); font-size: 14px; font-weight: 650; }
body.app-mode #marketInformation p { color: var(--muted); font-size: 13px; }
body.app-mode .attribute { border-bottom-color: var(--line); color: var(--ink); font-size: 12px; }
body.app-mode .attribute > span { color: var(--muted); }
body.app-mode .attribute a { color: var(--lime); }

body.app-mode.stock-detail-mode .layout > aside { position: sticky; top: 20px; }
body.app-mode.stock-detail-mode .layout > aside > .panel {
  padding: 21px 22px 23px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
  box-shadow: none;
}
body.app-mode.stock-detail-mode .layout > aside .ph { padding: 0 0 13px; margin-bottom: 13px; }
body.app-mode.stock-detail-mode .layout > aside .ph h2 { font-size: 17px; }
body.app-mode.stock-detail-mode .details { padding: 0; }
body.app-mode.stock-detail-mode .market-choice-label { color: var(--muted); font-size: 11px; }
body.app-mode.stock-detail-mode .market-choice { width: 100%; }
body.app-mode.stock-detail-mode .tabs {
  display: grid;
  gap: 0;
  margin: 11px 0 22px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
body.app-mode.stock-detail-mode .tabs button { padding: 10px 2px; color: var(--muted); border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; font-size: 11px; }
body.app-mode.stock-detail-mode .tabs button.on { color: var(--ink); border-bottom-color: var(--lime); background: none; }
body.app-mode.stock-detail-mode .field,
body.app-mode.stock-detail-mode .lend-card {
  margin: 0 0 15px;
  padding: 13px 14px;
  border: 1px solid #cbd5cb;
  border-radius: 3px;
  background: #fff;
  box-shadow: none;
}
body.app-mode.stock-detail-mode .field:focus-within,
body.app-mode.stock-detail-mode .lend-card:focus-within { border-color: var(--lime); box-shadow: 0 0 0 2px #126b551a; }
body.app-mode.stock-detail-mode .field label,
body.app-mode.stock-detail-mode .balance-row,
body.app-mode.stock-detail-mode .lend-label,
body.app-mode.stock-detail-mode .lend-balance { color: var(--muted); font-size: 11px; }
body.app-mode.stock-detail-mode .field .amount,
body.app-mode.stock-detail-mode .lend-card .lend-amount { border: 0; border-radius: 0; background: transparent; }
body.app-mode.stock-detail-mode .field .amount input,
body.app-mode.stock-detail-mode .lend-card .lend-amount input { padding: 8px 0; color: var(--ink); background: none; font-size: 26px; font-weight: 550; }
body.app-mode.stock-detail-mode .field .amount input::placeholder,
body.app-mode.stock-detail-mode .lend-card input::placeholder { color: #abb7ad; }
body.app-mode .max-btn { padding: 5px 7px; color: var(--lime); border: 1px solid #bbd6c5; border-radius: 2px; background: transparent !important; font-size: 10px; }
body.app-mode .max-btn:hover { background: #e9f1e9 !important; }
body.app-mode .estimate,
body.app-mode .position-summary,
body.app-mode .lend-summary,
body.app-mode .borrow-fee-summary {
  margin: 15px 0;
  padding: 14px 0;
  color: var(--muted);
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0 !important;
  background: transparent;
  box-shadow: none;
  font-size: 11px;
}
body.app-mode .estimate strong { margin: 4px 0; color: var(--ink); font-size: 25px; font-weight: 650; }
body.app-mode .estimate-note,
body.app-mode .fee-recipient { color: var(--muted); }
body.app-mode .position-summary span,
body.app-mode .lend-summary span { color: var(--muted); }
body.app-mode .position-summary b,
body.app-mode .lend-summary b,
body.app-mode .borrow-fee-summary b { color: var(--ink); }
body.app-mode .primary {
  min-height: 44px;
  padding: 11px 16px;
  color: #fff;
  border: 1px solid var(--lime);
  border-radius: 3px;
  background: var(--lime);
  box-shadow: none;
  font-size: 12px;
  font-weight: 650;
}
body.app-mode .primary:hover:not(:disabled) { background: #0e5845; }
body.app-mode .primary:disabled { opacity: .48; box-shadow: none; }
body.app-mode .notice,
body.app-mode .hint,
body.app-mode .status { color: var(--muted); font-size: 11px; }
body.app-mode .market-info,
body.app-mode .projection-details,
body.app-mode .contract-details { border-top-color: var(--line); }
body.app-mode .market-info summary,
body.app-mode .projection-details summary,
body.app-mode .contract-details summary { color: var(--muted); }
body.app-mode .market-info a,
body.app-mode .contract-line a,
body.app-mode .market-link { color: var(--lime); }

/* Education, footer, modal: the same typography and surface logic. */
body.app-mode .learn-shell { padding-top: 48px; }
body.app-mode .faq-layout { gap: clamp(30px, 6vw, 90px); }
body.app-mode .learn-shell h2 { margin: 0 0 17px; color: var(--ink); font-size: clamp(28px, 3.2vw, 39px); font-weight: 650; line-height: 1.15; letter-spacing: -.045em; }
body.app-mode .learn-shell .section-copy { color: var(--muted); font-size: 14px; line-height: 1.6; }
body.app-mode .learn-shell .faq details { padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
body.app-mode .learn-shell .faq summary { padding: 17px 0; color: var(--ink); font-size: 14px; font-weight: 600; }
body.app-mode .learn-shell .faq details p { padding: 0 20px 18px 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
body.app-mode .content-wrap { max-width: 1400px; padding: 0 28px; }
body.app-mode .site-footer { margin-top: 43px; padding: 25px 0 35px; border-top: 1px solid var(--line); color: var(--muted); }
body.app-mode .footer-brand { color: var(--ink); font-size: 16px; }
body.app-mode .footer-brand .brand-logo { width: 32px; height: 32px; border-radius: 2px; }
body.app-mode .site-footer p,
body.app-mode .site-footer > span { color: var(--muted); font-size: 11px; }
body.app-mode .site-footer .visitor-count { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
body.app-mode .site-footer .visitor-count strong { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
body.app-mode .footer-navigation a,
body.app-mode .footer-credits a,
body.app-mode .footer-credits .powered-by { color: #52685d !important; font-size: 11px; }
body.app-mode .footer-credits .developer-x svg { width: 15px; height: 15px; }
body.app-mode .veil { background: #182522bb; }
body.app-mode .modal { padding: 24px; color: var(--ink); border: 1px solid var(--line); border-radius: 3px; background: #fff; box-shadow: none; }
body.app-mode .modal h3 { color: var(--ink); }
body.app-mode .modal p { color: var(--muted); }
body.app-mode .modal button { border-radius: 3px; background: var(--lime); color: #fff; }

@media (max-width: 1000px) {
  body.app-mode .network-badge { display: none; }
  body.app-mode.stock-detail-mode .layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 350px); gap: 26px; }
}
@media (max-width: 760px) {
  body.app-mode .site-header { min-height: 0; padding: 11px 18px; gap: 12px; }
  body.app-mode .header-left { gap: 14px; }
  body.app-mode .brand-logo { width: 34px; height: 34px; }
  body.app-mode .app-brand-name { font-size: 17px; }
  body.app-mode .site-nav { gap: 14px; }
  body.app-mode .site-nav a { font-size: 12px; }
  body.app-mode .header-actions .wallet,
  body.app-mode .disconnect-wallet { min-height: 34px; padding: 7px 10px; font-size: 11px; }
  body.app-mode .app-shell { padding: 28px 18px 18px; }
  body.app-mode .app-heading { padding-bottom: 23px; }
  body.app-mode .app-heading h1 { font-size: 33px; }
  body.app-mode #marketMetrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.app-mode #marketMetrics > :nth-child(2n) { border-right: 0; }
  body.app-mode #marketMetrics > :nth-child(n+3) { border-top: 1px solid var(--line); }
  body.app-mode #marketMetrics > :nth-child(odd) { padding-left: 0; }
  body.app-mode .table-scroll { overflow-x: auto; }
  body.app-mode .table { min-width: 720px; }
  body.app-mode.stock-detail-mode .layout { display: flex; flex-direction: column; gap: 24px; }
  body.app-mode.stock-detail-mode .layout > aside { position: static; order: 1; width: 100%; }
  body.app-mode.stock-detail-mode #stockDetailContent { order: 0; width: 100%; padding-top: 0; border-top: 0; }
  body.app-mode.stock-detail-mode .mobile-action-link { display: block; width: fit-content; margin: -5px 0 21px; padding: 9px 12px; border: 1px solid var(--lime); border-radius: 2px; background: transparent; color: var(--lime); font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer; }
  body.app-mode.stock-detail-mode .mobile-action-link:hover { background: #e8f0e9; }
  body.app-mode.stock-detail-mode .layout > aside > .panel { padding: 18px; }
  body.app-mode .content-wrap { padding: 0 18px; }
}
@media (max-width: 540px) {
  body.app-mode .site-header { flex-wrap: wrap; }
  body.app-mode .header-left { width: 100%; justify-content: space-between; }
  body.app-mode .header-actions { width: 100%; justify-content: flex-end; }
  body.app-mode .app-heading h1 { font-size: 30px; }
  body.app-mode #marketMetrics .market-metric,
  body.app-mode #marketMetrics #totalStockTvl,
  body.app-mode #marketMetrics .trusted-by { padding: 14px 12px; }
  body.app-mode #marketMetrics > :nth-child(odd) { padding-left: 0; }
  body.app-mode #marketMetrics :is(.market-metric, #totalStockTvl) > strong { font-size: 21px; }
  body.app-mode .market-toolbar { padding-top: 14px; }
  body.app-mode .toolbar { display: grid; grid-template-columns: 1fr 1fr; }
  body.app-mode .search-wrap { grid-column: 1/-1; }
  body.app-mode #marketSort, body.app-mode .refresh { width: 100%; }
  body.app-mode .table, body.app-mode .table-scroll { min-width: 0; overflow: visible; }
  body.app-mode .table { display: block; padding: 0; border-top: 1px solid var(--line); }
  body.app-mode .table thead { display: none; }
  body.app-mode .table tbody { display: block; }
  body.app-mode .table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px 15px;
    padding: 15px 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
  }
  body.app-mode .table td { display: block !important; padding: 0 !important; border: 0; font-size: 12px; }
  body.app-mode .table td:first-child { grid-column: 1/-1; padding: 0 24px 3px 0 !important; }
  body.app-mode .table td[data-label]::before { color: var(--muted); font-size: 10px; }
  body.app-mode .table td:last-child { right: 0; top: 17px; }
  body.app-mode .table .asset strong { font-size: 14px; }
  body.app-mode .table .coin { width: 32px; height: 32px; }
  body.app-mode.stock-detail-mode .overview-pair strong { font-size: 25px; }
  body.app-mode.stock-detail-mode .overview-pair .coin { width: 30px; height: 30px; }
  body.app-mode.stock-detail-mode .overview-stats strong { font-size: 20px; }
  body.app-mode .site-footer { gap: 18px; }
  body.app-mode .site-footer > span { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  body.app-mode *, body.app-mode *::before, body.app-mode *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Second pass: market-screener composition and a quieter institutional identity. */
:root {
  --bg: #f6f5f0;
  --p: #fbfbf8;
  --ink: #202b25;
  --muted: #69766c;
  --line: #d9ded5;
  --lime: #2b634c;
}
body.app-mode { background: var(--bg); }
body.app-mode .site-header { min-height: 59px; background: #fbfbf8; border-bottom-color: #e3e5df; }
body.app-mode .brand-logo { width: 31px; height: 31px; border: 0; }
body.app-mode .app-brand-name { font-size: 17px; font-weight: 650; letter-spacing: -.035em; }
body.app-mode .header-left { gap: 48px; }
body.app-mode .site-nav { gap: 29px; }
body.app-mode .site-nav a { color: #69736a; font-size: 12px; transition: color .15s ease; }
body.app-mode .site-nav a.active { color: var(--lime); border-bottom-color: transparent; font-weight: 650; }
body.app-mode .header-actions .wallet { min-height: 33px; padding: 6px 13px; font-size: 11px; }
body.app-mode #wallet span[aria-hidden="true"] { display: none; }
body.app-mode .network-badge { color: #7a857b; font-size: 11px; }
body.app-mode .network-badge i { width: 5px; height: 5px; }

body.app-mode .app-shell { padding-top: 26px; }
body.app-mode .app-heading { padding-bottom: 18px; border-bottom: 0; }
body.app-mode .app-heading .section-label {
  margin-bottom: 5px;
  color: #7a857b;
  font: 500 11px var(--sans);
  letter-spacing: 0;
  text-transform: capitalize;
}
body.app-mode .app-heading .base-dot { display: none; }
body.app-mode .app-heading h1 { font-size: clamp(32px, 3.1vw, 39px); font-weight: 600; letter-spacing: -.047em; }
body.app-mode .app-heading #appSubtitle { margin-top: 5px; max-width: 570px; font-size: 14px; line-height: 1.48; }
body.app-mode .app-heading .feed-status { margin-top: 8px !important; color: #89938a !important; font-size: 11px !important; }

body.app-mode #marketMetrics {
  grid-template-columns: minmax(0, 1.65fr) repeat(3, minmax(0, 1fr));
  align-items: end;
  margin: 0 0 27px;
  padding: 15px 0 19px;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
body.app-mode #marketMetrics .market-metric,
body.app-mode #marketMetrics #totalStockTvl,
body.app-mode #marketMetrics .trusted-by {
  padding: 0 18px !important;
  border: 0 !important;
  background: none !important;
}
body.app-mode #marketMetrics > :first-child { padding-left: 0 !important; padding-right: 27px !important; }
body.app-mode #marketMetrics > :nth-child(2) { padding-left: 26px !important; border-left: 1px solid var(--line) !important; }
body.app-mode #marketMetrics :is(.market-metric, #totalStockTvl) > span { color: #5b6a5d; font-size: 12px; font-weight: 500; }
body.app-mode #marketMetrics :is(.market-metric, #totalStockTvl) > strong { margin: 7px 0 1px; color: var(--ink); font-size: 24px; font-weight: 600; line-height: 1.13; }
body.app-mode #marketMetrics #totalStockTvl > strong { font-size: 32px; letter-spacing: -.05em; }
body.app-mode #marketMetrics :is(.market-metric, #totalStockTvl) > small { color: #69766c; font-size: 11px; }

body.app-mode .ph { padding-bottom: 4px; border: 0; }
body.app-mode .ph h2 { font-size: 24px; font-weight: 600; letter-spacing: -.045em; }
body.app-mode .count { font-size: 11px; }
body.app-mode .market-toolbar { padding: 3px 0 7px; gap: 12px; }
body.app-mode .explore-switch { gap: 22px; }
body.app-mode .explore-switch button { padding: 8px 0 7px; color: #667267; font-size: 12px; font-weight: 500; transition: color .15s ease; }
body.app-mode .explore-switch button.on { color: var(--ink); border-bottom-color: var(--lime); font-weight: 650; }
body.app-mode .explore-switch button:hover { color: var(--ink); }
body.app-mode .toolbar { flex: 0 1 auto; padding: 0; gap: 8px; }
body.app-mode .search-wrap { flex: 0 1 260px; min-width: 175px; max-width: 260px; height: 36px; padding: 0 9px; border-color: #cdd4cb; background: #fbfbf8; }
body.app-mode .search-wrap > span { display: none; }
body.app-mode .search-wrap .search { min-height: 34px; padding: 5px 3px; font-size: 12px; }
body.app-mode #marketSort { width: 154px; max-width: 154px; min-height: 36px; padding: 7px 10px; border-color: #cdd4cb; background: #fbfbf8; font-size: 12px; }
body.app-mode .refresh { width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; border-color: #cdd4cb; background: #fbfbf8; color: #4b5b4e; font-size: 18px; line-height: 1; }
body.app-mode .refresh span { display: none; }
body.app-mode .explore-caption { margin: 0 0 7px; color: #7d897d; font-size: 11px; }

body.app-mode .table { border: 0; border-collapse: collapse; table-layout: fixed; }
body.app-mode .table th {
  padding: 9px 13px;
  color: #647367;
  border: 0;
  border-top: 1px solid #c5cfc4;
  border-bottom: 1px solid #d7ddd4;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
body.app-mode .table td {
  height: 61px;
  padding: 10px 13px;
  border-bottom: 1px solid #e3e7df;
  color: #28372d;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
body.app-mode .table :is(th, td):first-child { width: 29%; text-align: left; }
body.app-mode .table :is(th, td):last-child { width: 38px; text-align: right; }
body.app-mode .table :is(th, td):not(:first-child):not(:last-child) { text-align: right; }
body.app-mode .table tbody tr:hover,
body.app-mode .table tbody tr.active { background: #ecf0e9; box-shadow: none; }
body.app-mode .table .asset { gap: 12px; }
body.app-mode .table .coin { width: 32px; height: 32px; border-color: #e5e9e2; }
body.app-mode .table .asset strong { font-size: 13px; font-weight: 600; }
body.app-mode .table .asset small { margin-top: 2px; color: #7f8a7f; font-size: 10px; }
body.app-mode .table td.rate-focus { color: #1e3227; font-weight: 600; }
body.app-mode .table .apy { color: #356d53 !important; font-weight: 550; }
body.app-mode .row-arrow { color: #718476; opacity: .55; background: none; transition: opacity .15s ease, transform .15s ease; }
body.app-mode .table tbody tr:hover .row-arrow,
body.app-mode .table tbody tr:focus-within .row-arrow { opacity: 1; transform: translate(2px, -2px); }


body.app-mode.stock-detail-mode .layout > aside > .panel { padding: 0 0 0 24px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: transparent; }
body.app-mode.stock-detail-mode .field,
body.app-mode.stock-detail-mode .lend-card { border-color: #d2d9d0; background: #fbfbf8; }
body.app-mode.stock-detail-mode .overview-stats > div:nth-child(even) { border-left-color: #e2e5df; }
body.app-mode.stock-detail-mode .detail-nav { margin-bottom: 21px; }
body.app-mode .learn-shell .faq details { border-bottom-color: #e1e5dc; }
body.app-mode .learn-shell .section-label { color: #7a857b; font: 500 12px var(--sans); letter-spacing: 0; text-transform: none; }
body.app-mode .learn-shell .faq summary { padding: 14px 0; }
body.app-mode .learn-shell .faq details p { margin: 2px 0 0; padding-bottom: 16px; }
body.app-mode .table th { font-size: 12px; }
body.app-mode .table td { font-size: 14px; }
body.app-mode .table .asset strong { font-size: 14px; }
body.app-mode .table .asset small { font-size: 11px; }
body.app-mode .count,
body.app-mode .explore-caption { font-size: 12px; }
body.app-mode .empty { padding: 24px 18px; }
body.app-mode #marketlist .empty .glyph { display: none; }
body.app-mode.stock-detail-mode .market-choice-label,
body.app-mode.stock-detail-mode .field label,
body.app-mode.stock-detail-mode .balance-row,
body.app-mode.stock-detail-mode .lend-label,
body.app-mode.stock-detail-mode .lend-balance { font-size: 12px; color: #5f6c62; }
body.app-mode.stock-detail-mode .field .amount input,
body.app-mode.stock-detail-mode .lend-card .lend-amount input { font-size: 31px; line-height: 1.15; }
body.app-mode.stock-detail-mode .max-btn { font-size: 11px; }
body.app-mode.stock-detail-mode .position-summary,
body.app-mode.stock-detail-mode .lend-summary,
body.app-mode.stock-detail-mode .estimate,
body.app-mode.stock-detail-mode .notice,
body.app-mode.stock-detail-mode .hint,
body.app-mode.stock-detail-mode .status { font-size: 12px; line-height: 1.55; }
body.app-mode.stock-detail-mode .tabs button { font-size: 12px; }
body.app-mode .site-nav a,
body.app-mode .explore-switch button { font-size: 13px; }
body.app-mode .header-actions .wallet,
body.app-mode .disconnect-wallet,
body.app-mode .primary { font-size: 13px; }
body.app-mode.stock-detail-mode .market-choice-label,
body.app-mode.stock-detail-mode .field label,
body.app-mode.stock-detail-mode .balance-row,
body.app-mode.stock-detail-mode .lend-label,
body.app-mode.stock-detail-mode .lend-balance { font-size: 13px; }

@media (min-width: 1100px) {
  body.app-mode .table th:nth-child(5),
  body.app-mode .table td:nth-child(5) { display: table-cell !important; }
}
@media (max-width: 900px) {
  body.app-mode #marketMetrics { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
  body.app-mode #marketMetrics :is(.market-metric, #totalStockTvl) > strong { font-size: 21px; }
  body.app-mode #marketMetrics #totalStockTvl > strong { font-size: 27px; }
  body.app-mode .toolbar { flex: 1; }
  body.app-mode .search-wrap { flex: 1 1 190px; min-width: 140px; }
}
@media (max-width: 760px) {
  body.app-mode .site-header { padding: 10px 18px; }
  body.app-mode .header-left { gap: 17px; }
  body.app-mode .brand-logo { width: 29px; height: 29px; }
  body.app-mode .app-brand-name { font-size: 16px; }
  body.app-mode .app-heading { padding-bottom: 14px; }
  body.app-mode #marketMetrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; padding: 15px 0; margin-bottom: 23px; }
  body.app-mode #marketMetrics > :first-child { grid-column: 1/-1; padding: 0 0 13px !important; border-bottom: 1px solid #d3dbd0 !important; }
  body.app-mode #marketMetrics #totalStockTvl { grid-column: 1/-1 !important; grid-row: 1 !important; width: auto !important; max-width: none !important; }
  body.app-mode #marketMetrics > :nth-child(2) { padding-left: 0 !important; border-left: 0 !important; }
  body.app-mode #marketMetrics .market-metric,
  body.app-mode #marketMetrics #totalStockTvl { padding: 0 !important; border: 0 !important; }
  body.app-mode #marketMetrics #totalStockTvl { padding-bottom: 13px !important; border-bottom: 1px solid #d3dbd0 !important; }
  body.app-mode #marketMetrics :is(.market-metric, #totalStockTvl) > span { font-size: 10px; }
  body.app-mode #marketMetrics :is(.market-metric, #totalStockTvl) > small { font-size: 10px; line-height: 1.3; }
  body.app-mode #marketMetrics :is(.market-metric, #totalStockTvl) > strong { font-size: 19px; }
  body.app-mode #marketMetrics #totalStockTvl > strong { font-size: 27px; }
  body.app-mode .market-toolbar { padding-top: 0; }
  body.app-mode .search-wrap { max-width: none; }
  body.app-mode.stock-detail-mode .layout > aside > .panel { padding: 18px 0 0; border: 0; border-top: 1px solid var(--line); }
  body.app-mode .learn-shell .faq-layout { gap: 24px; }
}
@media (max-width: 540px) {
  body.app-mode .site-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; padding: 8px 16px 5px; }
  body.app-mode .header-left { display: contents; }
  body.app-mode .brand-link { grid-column: 1; grid-row: 1; align-self: center; }
  body.app-mode .header-actions { grid-column: 2; grid-row: 1; width: auto; justify-content: flex-end; }
  body.app-mode .site-nav { grid-column: 1/-1; grid-row: 2; gap: 23px; min-height: 29px; }
  body.app-mode .site-nav a { padding: 0; }
  body.app-mode .site-nav a.active { border-bottom-color: transparent; }
  body.app-mode .app-shell { padding: 23px 16px 16px; }
  body.app-mode .app-heading h1 { font-size: 30px; }
  body.app-mode .ph h2 { font-size: 22px; }
  body.app-mode .market-toolbar { gap: 3px; }
  body.app-mode .toolbar { gap: 7px; }
  body.app-mode .search-wrap { grid-column: 1/-1; width: 100%; }
  body.app-mode #marketSort { width: 100%; max-width: none; }
  body.app-mode .refresh { width: 36px; justify-self: end; }
  body.app-mode .table { border: 0; }
  body.app-mode .table tr { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; align-items: center; gap: 5px 10px; padding: 13px 0; }
  body.app-mode .table td { height: auto; font-size: 13px; }
  body.app-mode .table tbody tr td:first-child { grid-column: 1 !important; grid-row: 1/3; width: auto; padding: 0 !important; text-align: left; }
  body.app-mode .table tbody tr td:nth-child(2) { grid-column: 2; grid-row: 1; }
  body.app-mode .table tbody tr td:nth-child(3) { grid-column: 3; grid-row: 1; }
  body.app-mode .table tbody tr td:nth-child(4) { grid-column: 2; grid-row: 2; }
  body.app-mode .table tbody tr td:nth-child(6) { grid-column: 3; grid-row: 2; }
  body.app-mode .table tbody tr td:last-child { display: none !important; }
  body.app-mode .table td:last-child .row-arrow { display: none; }
  body.app-mode .table tbody tr td[data-label] { text-align: right; }
  body.app-mode .table td[data-label]::before { margin-bottom: 2px; font-size: 10px; white-space: normal; line-height: 1.15; }
}

/* Market quotes: desktop comparison table, compact links below 1120px. */
body.app-mode #marketlist .table { width: 100%; min-width: 0; }
body.app-mode .brand-mark { display: block; flex: 0 0 40px; width: 40px; height: 40px; overflow: hidden; background: #fff; border-radius: 3px; }
body.app-mode .brand-mark .brand-logo { display: block; width: 82px; height: 82px; max-width: none; transform: translate(-21px, -12px); border: 0; border-radius: 0; }
body.app-mode .app-brand-name { font-size: 20px; letter-spacing: -.045em; font-weight: 700; }
body.app-mode .site-header { min-height: 65px; }
body.app-mode .explore-switch { gap: 26px; }
body.app-mode .explore-switch button { min-height: 44px; font-size: 14px; padding: 9px 0; box-shadow: none; background: transparent; }
body.app-mode .explore-switch button.on { color: var(--ink); font-weight: 700; border-bottom: 3px solid var(--lime); }
body.app-mode .table td.rate-focus { color: var(--ink) !important; font-size: 15px; font-weight: 700; }
body.app-mode .table td.apy:not(.rate-focus) { color: var(--muted) !important; font-weight: 400; }
body.app-mode .table td.no-liquidity { color: #667168; font-size: 12px; white-space: normal; line-height: 1.35; }
body.app-mode .compact-market-list { display: none; }
body.app-mode #marketlist .coin { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border: 1px solid #e0e3db; border-radius: 4px; background: #fff; overflow: hidden; }
body.app-mode #marketlist .coin img { width: 26px; height: 26px; max-width: 26px; max-height: 26px; object-fit: contain; }
body.app-mode #marketlist .coin span { font-size: 9px; color: var(--ink); }
body.app-mode .pending-markets { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
body.app-mode .pending-markets h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
body.app-mode .pending-markets > p { margin: 4px 0 15px; color: var(--muted); font-size: 12px; }
body.app-mode .pending-market-list { display: flex; flex-wrap: wrap; gap: 18px 48px; }
body.app-mode .pending-market { min-width: 160px; }
body.app-mode .quote-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
body.app-mode .quote-name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 9px; min-width: 0; }
body.app-mode .quote-name strong { font-size: 15px; color: var(--ink); font-weight: 650; }
body.app-mode .quote-name small { color: #647167; font-size: 12px; }
body.app-mode .quote-name small::before { content: "·"; margin-right: 9px; }
body.app-mode .pending-market .quote-name { display: block; }
body.app-mode .pending-market .quote-name small { display: block; margin-top: 2px; }
body.app-mode .pending-market .quote-name small::before { content: none; }

@media (max-width: 1120px) {
  body.app-mode #marketlist .table-scroll { display: none; }
  body.app-mode .compact-market-list { display: grid; gap: 10px; }
  body.app-mode .compact-market { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 13px 24px; padding: 16px 18px; color: var(--ink); text-decoration: none; border: 1px solid #d8ded4; border-radius: 4px; background: #fbfbf8; transition: border-color .15s ease; }
  body.app-mode .compact-market:hover { border-color: #8a9e90; color: var(--ink); }
  body.app-mode .quote-rates { display: flex; align-items: baseline; gap: 24px; font-variant-numeric: tabular-nums; }
  body.app-mode .quote-primary-rate, body.app-mode .quote-secondary-rate { display: flex; flex-direction: column; gap: 3px; }
  body.app-mode .quote-rates small { font-size: 12px; color: var(--muted); }
  body.app-mode .quote-primary-rate strong { font-size: 22px; line-height: 1.15; font-weight: 650; letter-spacing: -.035em; }
  body.app-mode .quote-secondary-rate > span { font-size: 14px; color: #59685e; }
  body.app-mode .quote-footer { grid-column: 1/-1; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 10px; border-top: 1px solid #e8ebe4; font-size: 12px; }
  body.app-mode .quote-liquidity { color: #667168; }
  body.app-mode .quote-liquidity strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
  body.app-mode .quote-link { flex-shrink: 0; color: var(--lime); font-weight: 600; }
  body.app-mode #marketMetrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; }
  body.app-mode #marketMetrics #totalStockTvl { grid-column: 1/-1 !important; padding: 0 0 15px !important; border-bottom: 1px solid var(--line) !important; }
  body.app-mode #marketMetrics .market-metric { padding: 0 !important; border: 0 !important; }
  body.app-mode #marketMetrics #totalStockTvl > strong { font-size: 32px; }
  body.app-mode #marketMetrics .market-metric > strong { font-size: 20px; }
  body.app-mode #marketMetrics :is(.market-metric, #totalStockTvl) > span { font-size: 12px; }
  body.app-mode #marketMetrics :is(.market-metric, #totalStockTvl) > small { font-size: 11px; }
}
@media (max-width: 560px) {
  body.app-mode .app-brand-name { font-size: 19px; }
  body.app-mode .brand-mark { transform: scale(.9); transform-origin: left center; margin-right: -4px; }
  body.app-mode .compact-market { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px; }
  body.app-mode .quote-rates { gap: 25px; padding-left: 48px; }
  body.app-mode .quote-primary-rate, body.app-mode .quote-secondary-rate { flex-direction: row; align-items: baseline; gap: 6px; }
  body.app-mode .quote-primary-rate strong { font-size: 19px; }
  body.app-mode .quote-secondary-rate > span { font-size: 13px; }
  body.app-mode .quote-footer { gap: 10px; }
  body.app-mode .quote-liquidity > span:not(.no-liquidity) { display: block; margin-bottom: 2px; }
  body.app-mode .pending-market-list { gap: 18px 24px; }
  body.app-mode #marketMetrics { gap: 13px 12px; }
  body.app-mode #marketMetrics .market-metric > strong { font-size: 18px; }
  body.app-mode #marketMetrics .market-metric > small { font-size: 10px; }
}
@media (max-width: 380px) {
  body.app-mode .quote-rates { padding-left: 0; gap: 18px; }
}