/* Final identity and theme layer. Product data and transaction logic stay unchanged. */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

body.app-mode .brand-mark,
body.app-mode .footer-mark {
  background: #142037;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
}
body.app-mode .brand-mark { width: 37px; height: 37px; flex-basis: 37px; }
body.app-mode .footer-mark { display: block; width: 33px; height: 33px; flex: 0 0 33px; }
body.app-mode .brand-mark .brand-logo,
body.app-mode .footer-mark .brand-logo {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  transform: scale(1.6);
  border: 0;
  object-fit: cover;
  object-position: center;
}
body.app-mode .app-brand-name { font-weight: 700; letter-spacing: -.04em; }

body.app-mode .theme-toggle {
  min-height: 33px;
  padding: 6px 10px;
  color: #4f6258;
  border: 1px solid #cdd4cb;
  border-radius: 3px;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
}
body.app-mode .theme-toggle:hover { color: #202b25; border-color: #889c8e; background: #f0f2ec; }
body.app-mode .theme-toggle:focus-visible { outline: 2px solid #2855a6; outline-offset: 2px; }

/* A compact footer with one clear brand line and no repeated slogan. */
body.app-mode .site-footer {
  display: grid;
  grid-template-columns: minmax(260px, 1.6fr) minmax(150px, .65fr) minmax(200px, .9fr);
  align-items: start;
  gap: 24px 36px;
  margin-top: 44px;
  padding: 26px 0 32px;
  line-height: 1.5;
}
body.app-mode .footer-brand { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 16px; text-decoration: none; }
body.app-mode .site-footer .footer-brand,
body.app-mode .site-footer .footer-brand b { color: var(--ink) !important; }
body.app-mode .footer-brand b { font-weight: 700; letter-spacing: -.03em; }
body.app-mode .site-footer p { margin: 7px 0 0; font-size: 12px; }
body.app-mode .site-footer .visitor-count { margin-top: 12px; }
body.app-mode .footer-navigation { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 4px; }
body.app-mode .footer-navigation a,
body.app-mode .footer-credits a,
body.app-mode .footer-credits .powered-by { font-size: 12px; text-decoration: none; }
body.app-mode .footer-navigation a:hover,
body.app-mode .footer-credits a:hover { text-decoration: underline; text-underline-offset: 3px; }
body.app-mode .site-footer > span { justify-self: end; text-align: right; padding-top: 4px; font-size: 12px; }
body.app-mode .footer-credits { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
body.app-mode .footer-credits .developer-x { display: inline-flex; align-items: center; gap: 5px; }

body.app-mode .pending-markets { margin-top: 31px; padding-top: 18px; }
body.app-mode .pending-markets h3 { font-size: 15px; }
body.app-mode .pending-markets > p { max-width: 55ch; margin-bottom: 16px; font-size: 12px; }
body.app-mode .pending-market-list { gap: 12px 34px; }
body.app-mode .pending-market { min-width: 178px; padding-right: 18px; }
body.app-mode .pending-market .quote-identity { gap: 10px; }
body.app-mode #marketlist .pending-market .coin { border: 0 !important; background: transparent !important; }
body.app-mode #marketlist .pending-market .coin img { width: 36px; height: 36px; max-width: 36px; max-height: 36px; object-fit: contain; }
body.app-mode #marketlist .pending-market .strategy-symbol img { transform: scale(1.9); }

@media (min-width: 1121px) {
  body.app-mode #marketlist .table-scroll { overflow-x: clip; }
}

@media (max-width: 760px) {
  body.app-mode .site-footer { grid-template-columns: minmax(0, 1fr) auto; gap: 17px 20px; }
  body.app-mode .site-footer > div:first-child { grid-column: 1; }
  body.app-mode .footer-navigation { grid-column: 2; grid-row: 1; }
  body.app-mode .site-footer > span { grid-column: 1/-1; justify-self: stretch; padding-top: 13px; border-top: 1px solid var(--line); text-align: left; }
  body.app-mode .footer-credits { justify-content: flex-start; }
}
@media (max-width: 540px) {
  body.app-mode .brand-mark { width: 34px; height: 34px; flex-basis: 34px; transform: none; margin-right: 0; }
  body.app-mode .brand-mark .brand-logo { width: 34px; height: 34px; max-width: 34px; }
  body.app-mode .theme-toggle { padding: 6px 8px; font-size: 11px; }
  body.app-mode .site-footer { grid-template-columns: 1fr; gap: 18px; }
  body.app-mode .footer-navigation { grid-column: 1; grid-row: 2; flex-direction: row; flex-wrap: wrap; gap: 10px 20px; }
  body.app-mode .site-footer > span { grid-column: 1; grid-row: 3; }
}
@media (max-width: 420px) {
  body.app-mode .header-actions { display: contents; }
  body.app-mode .header-actions .wallet,
  body.app-mode .header-actions .disconnect-wallet { grid-column: 2; grid-row: 1; justify-self: end; }
  body.app-mode .theme-toggle { grid-column: 2; grid-row: 2; justify-self: end; align-self: center; }
  body.app-mode .site-nav { grid-column: 1; grid-row: 2; gap: 16px; }
}

html[data-theme="dark"] {
  --bg: #111714;
  --p: #19211c;
  --ink: #e8eee8;
  --muted: #aab9ac;
  --line: #344137;
  --lime: #9acbad;
}
html[data-theme="dark"] body.app-mode { background: var(--bg); color: var(--ink); }
html[data-theme="dark"] body.app-mode a { color: #addbc0; }
html[data-theme="dark"] body.app-mode a:hover { color: #d7f1df; }
html[data-theme="dark"] body.app-mode .site-header { background: #171e19; border-bottom-color: var(--line); }
html[data-theme="dark"] body.app-mode .brand-link,
html[data-theme="dark"] body.app-mode .app-brand-name,
html[data-theme="dark"] body.app-mode .footer-brand { color: var(--ink); }
html[data-theme="dark"] body.app-mode .site-nav a,
html[data-theme="dark"] body.app-mode .network-badge { color: #adbdaf; }
html[data-theme="dark"] body.app-mode .site-nav a:hover,
html[data-theme="dark"] body.app-mode .site-nav a.active { color: #f1f7ef; }
html[data-theme="dark"] body.app-mode .theme-toggle { color: #d4dfd4; border-color: #4a5c4e; }
html[data-theme="dark"] body.app-mode .theme-toggle:hover { color: #fff; border-color: #92ad99; background: #263128; }
html[data-theme="dark"] body.app-mode .header-actions .wallet { color: #142119 !important; border-color: #bed5c2; background: #bed5c2; }
html[data-theme="dark"] body.app-mode .header-actions .wallet:hover { background: #d6e9d7; }
html[data-theme="dark"] body.app-mode .disconnect-wallet { color: #e8eee8 !important; border-color: #647868; }

html[data-theme="dark"] body.app-mode .app-heading h1,
html[data-theme="dark"] body.app-mode .ph h2,
html[data-theme="dark"] body.app-mode .pending-markets h3,
html[data-theme="dark"] body.app-mode .empty h3,
html[data-theme="dark"] body.app-mode .learn-shell h2,
html[data-theme="dark"] body.app-mode .learn-shell .faq summary,
html[data-theme="dark"] body.app-mode #marketInformation h2,
html[data-theme="dark"] body.app-mode #marketInformation h3 { color: var(--ink); }
html[data-theme="dark"] body.app-mode .app-heading #appSubtitle,
html[data-theme="dark"] body.app-mode .app-heading .feed-status,
html[data-theme="dark"] body.app-mode .pending-markets > p,
html[data-theme="dark"] body.app-mode .learn-shell .section-copy,
html[data-theme="dark"] body.app-mode .learn-shell .faq details p { color: var(--muted) !important; }
html[data-theme="dark"] body.app-mode #marketMetrics { border-color: var(--line); }
html[data-theme="dark"] body.app-mode #marketMetrics #totalStockTvl { border-bottom-color: var(--line) !important; }
html[data-theme="dark"] body.app-mode #marketMetrics :is(.market-metric, #totalStockTvl) > strong,
html[data-theme="dark"] body.app-mode #marketMetrics :is(.market-metric, #totalStockTvl) > span,
html[data-theme="dark"] body.app-mode .quote-name strong,
html[data-theme="dark"] body.app-mode .quote-primary-rate strong { color: var(--ink); }
html[data-theme="dark"] body.app-mode #marketMetrics :is(.market-metric, #totalStockTvl) > small,
html[data-theme="dark"] body.app-mode .quote-name small,
html[data-theme="dark"] body.app-mode .quote-rates small,
html[data-theme="dark"] body.app-mode .quote-secondary-rate > span,
html[data-theme="dark"] body.app-mode .quote-liquidity { color: var(--muted); }
html[data-theme="dark"] body.app-mode .explore-switch button { color: #aab9ac; }
html[data-theme="dark"] body.app-mode .explore-switch button.on { color: #edf5ec; }
html[data-theme="dark"] body.app-mode .search-wrap,
html[data-theme="dark"] body.app-mode .search,
html[data-theme="dark"] body.app-mode #marketSort,
html[data-theme="dark"] body.app-mode .refresh,
html[data-theme="dark"] body.app-mode .market-choice { color: var(--ink); border-color: #526258; background: #1b241e; }
html[data-theme="dark"] body.app-mode .search::placeholder,
html[data-theme="dark"] body.app-mode .field input::placeholder { color: #92a093; }
html[data-theme="dark"] body.app-mode .refresh:hover { color: #fff; background: #28342b; }
html[data-theme="dark"] body.app-mode .table th { color: #b1c2b1; border-color: var(--line); }
html[data-theme="dark"] body.app-mode .table td { color: #d4e0d3; border-color: #344137; }
html[data-theme="dark"] body.app-mode .table .asset strong,
html[data-theme="dark"] body.app-mode .table td.rate-focus { color: var(--ink) !important; }
html[data-theme="dark"] body.app-mode .table tbody tr:hover,
html[data-theme="dark"] body.app-mode .table tbody tr.active { background: #202d23; }
html[data-theme="dark"] body.app-mode .table tbody tr.unavailable { opacity: .7; }
html[data-theme="dark"] body.app-mode .table .coin,
html[data-theme="dark"] body.app-mode #marketlist .coin,
html[data-theme="dark"] body.app-mode .small-token { background: #f7faf7; border-color: #5a6b5d; }
html[data-theme="dark"] body.app-mode #marketlist .pending-market .coin { background: transparent; border-color: transparent; }
html[data-theme="dark"] body.app-mode .compact-market { color: var(--ink); border-color: #3a4b3e; background: #19221c; }
html[data-theme="dark"] body.app-mode .compact-market:hover { color: var(--ink); border-color: #80a487; background: #202c23; }
html[data-theme="dark"] body.app-mode .quote-footer { border-top-color: var(--line); }
html[data-theme="dark"] body.app-mode .quote-liquidity strong { color: var(--ink); }

html[data-theme="dark"] body.app-mode.stock-detail-mode .overview-pair strong,
html[data-theme="dark"] body.app-mode.stock-detail-mode .stock-tvl-detail > strong,
html[data-theme="dark"] body.app-mode.stock-detail-mode .overview-stats strong,
html[data-theme="dark"] body.app-mode .estimate strong,
html[data-theme="dark"] body.app-mode .position-summary b,
html[data-theme="dark"] body.app-mode .lend-summary b,
html[data-theme="dark"] body.app-mode .borrow-fee-summary b { color: var(--ink); }
html[data-theme="dark"] body.app-mode.stock-detail-mode .layout > aside > .panel { border-color: var(--line); }
html[data-theme="dark"] body.app-mode.stock-detail-mode .stock-tvl-detail > span,
html[data-theme="dark"] body.app-mode.stock-detail-mode .stock-tvl-detail > small,
html[data-theme="dark"] body.app-mode.stock-detail-mode .overview-stats span,
html[data-theme="dark"] body.app-mode.stock-detail-mode .overview-stats small,
html[data-theme="dark"] body.app-mode.stock-detail-mode .market-choice-label,
html[data-theme="dark"] body.app-mode.stock-detail-mode .field label,
html[data-theme="dark"] body.app-mode.stock-detail-mode .balance-row,
html[data-theme="dark"] body.app-mode.stock-detail-mode .lend-label,
html[data-theme="dark"] body.app-mode.stock-detail-mode .lend-balance,
html[data-theme="dark"] body.app-mode .estimate-note,
html[data-theme="dark"] body.app-mode .fee-recipient { color: #b1c3b4; }
html[data-theme="dark"] body.app-mode.stock-detail-mode .field,
html[data-theme="dark"] body.app-mode.stock-detail-mode .lend-card { border-color: #516354; background: #1a231d; }
html[data-theme="dark"] body.app-mode.stock-detail-mode .field .amount input,
html[data-theme="dark"] body.app-mode.stock-detail-mode .lend-card .lend-amount input { color: var(--ink); }
html[data-theme="dark"] body.app-mode.stock-detail-mode .detail-nav button,
html[data-theme="dark"] body.app-mode.stock-detail-mode .tabs button { color: #aabbac; }
html[data-theme="dark"] body.app-mode.stock-detail-mode .detail-nav button.on,
html[data-theme="dark"] body.app-mode.stock-detail-mode .tabs button.on { color: var(--ink); }
html[data-theme="dark"] body.app-mode .primary { color: #102017; border-color: #bedbc4; background: #bedbc4; }
html[data-theme="dark"] body.app-mode .primary:hover:not(:disabled) { background: #d6ead9; }
html[data-theme="dark"] body.app-mode .max-btn { color: #c8e7cb; border-color: #56705b; }
html[data-theme="dark"] body.app-mode .max-btn:hover { background: #2a382d !important; }
html[data-theme="dark"] body.app-mode .modal { color: var(--ink); border-color: var(--line); background: #1b261e; }
html[data-theme="dark"] body.app-mode .modal h3 { color: var(--ink); }
html[data-theme="dark"] body.app-mode .veil { background: #060b08d9; }
html[data-theme="dark"] body.app-mode .site-footer { border-top-color: var(--line); color: var(--muted); }
html[data-theme="dark"] body.app-mode .site-footer .visitor-count strong { color: var(--ink); }
html[data-theme="dark"] body.app-mode .footer-navigation a,
html[data-theme="dark"] body.app-mode .footer-credits a,
html[data-theme="dark"] body.app-mode .footer-credits .powered-by { color: #b0c4b3 !important; }

@media (prefers-reduced-motion: reduce) {
  body.app-mode .theme-toggle { transition: none; }
}