/* One restrained interface layer for the home, markets and market-detail routes. */
html { --sc-bg:#f6f7f5; --sc-surface:#fff; --sc-border:#d8ded8; --sc-text:#18221c; --sc-muted:#526258; --sc-accent:#285a40; --sc-success:#21613b; --sc-warning:#895c18; --sc-danger:#a13434; }
html[data-theme="dark"] { --sc-bg:#151a17; --sc-surface:#1e2520; --sc-border:#3a483e; --sc-text:#edf2ed; --sc-muted:#becbbf; --sc-accent:#9bd3ae; --sc-success:#a1d8a8; --sc-warning:#f0c174; --sc-danger:#faabab; }
body.app-mode { background:var(--sc-bg); color:var(--sc-text); font-family:Inter,Geist,"Segoe UI",Arial,sans-serif; font-variant-numeric:tabular-nums; }
body.app-mode :is(button,input,select,textarea) { font:inherit; }
body.app-mode :is(button,a,input,select):focus-visible { outline:2px solid var(--sc-accent); outline-offset:3px; }
body.app-mode .site-header { background:var(--sc-surface); border-bottom:1px solid var(--sc-border); }
body.app-mode .site-nav a { font-size:13px; }
html[data-nav-route="home"] body.app-mode .site-nav :is([data-route="markets"],[data-route="dashboard"],[data-route="learn"]),
html[data-nav-route="market"] body.app-mode .site-nav :is([data-route="markets"],[data-route="dashboard"],[data-route="learn"]),
html[data-nav-route="markets"] body.app-mode .site-nav :is([data-route="markets"],[data-route="dashboard"],[data-route="learn"]),
html[data-nav-route="dashboard"] body.app-mode .site-nav :is([data-route="markets"],[data-route="dashboard"],[data-route="learn"]),
html[data-nav-route="learn"] body.app-mode .site-nav :is([data-route="markets"],[data-route="dashboard"],[data-route="learn"]) { display:inline-flex; }
body.app-mode .network-badge { border:1px solid var(--sc-border); border-radius:6px; padding:7px 10px; color:var(--sc-muted); font-size:12px; }
body.app-mode .theme-toggle { width:35px; height:35px; min-height:35px; padding:0; display:grid; place-items:center; font-size:19px; border-color:var(--sc-border); border-radius:6px; color:var(--sc-text); }
body.app-mode .header-actions .wallet { border-radius:6px; min-height:35px; font-size:13px; }
body.app-mode .header-actions .wallet > span[aria-hidden="true"] { display:none; }
body.app-mode .wallet-control:has(.wallet-menu-toggle:not([hidden])) .wallet::before { content:""; display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#338751; }
body.app-mode .site-footer { border-top:1px solid var(--sc-border); }
body.app-mode .site-footer .visitor-count { display:none !important; }
body.app-mode .site-footer > span { font-size:0; }
body.app-mode .site-footer > span .footer-credits { font-size:12px; }
body.app-mode .site-footer .developer-x { display:none !important; }
body.app-mode .site-footer :is(p,a) { color:var(--sc-muted); font-size:13px; }
body.app-mode .site-footer .footer-brand b { color:var(--sc-text) !important; }

/* Home: quiet opening, data-dense markets, and a calculator that belongs to the table. */
html[data-site-route="home"] body.app-mode .home-shell { max-width:1560px; padding:0 clamp(20px,4vw,64px); }
html[data-site-route="home"] body.app-mode .home-lead { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(310px,.7fr); column-gap:clamp(34px,4.2vw,78px); align-items:center; min-height:0; padding:clamp(72px,10vh,132px) 0 66px; border-bottom:0; }
html[data-site-route="home"] body.app-mode .home-lead-copy { max-width:none; }
body.app-mode .home-kicker { font:600 12px/1.4 Inter,Geist,"Segoe UI",sans-serif; letter-spacing:0; text-transform:none; color:var(--sc-accent); }
html[data-site-route="home"] body.app-mode .home-lead h1 { max-width:700px; font:650 clamp(38px,4.2vw,56px)/1.13 Inter,Geist,"Segoe UI",sans-serif; letter-spacing:-.025em; color:var(--sc-text); }
html[data-site-route="home"] body.app-mode .home-intro { max-width:590px; margin-top:22px; color:var(--sc-muted); line-height:1.55; }
html[data-site-route="home"] body.app-mode .home-actions { margin-top:30px; }
body.app-mode .home-primary { justify-content:center; border-radius:6px; background:var(--sc-accent); border-color:var(--sc-accent); color:#fff; font-size:14px; min-height:46px; padding:10px 18px; }
html[data-theme="dark"] body.app-mode .home-primary { color:#122219; }
body.app-mode .home-secondary { font:600 14px Inter,Geist,"Segoe UI",sans-serif; color:var(--sc-text); text-decoration:none; }
body.app-mode .home-secondary:hover { text-decoration:underline; text-underline-offset:4px; }
body.app-mode .home-stat-strip { display:grid; grid-column:1/-1; grid-template-columns:repeat(4,minmax(0,1fr)); max-width:none; gap:28px; margin-top:clamp(70px,10vh,120px); padding-top:22px; border-top:1px solid var(--sc-border); }
body.app-mode .home-stat-strip > div { display:grid; gap:7px; align-content:start; }
body.app-mode .home-stat-strip span { color:var(--sc-muted); font-size:12px; }
body.app-mode .home-stat-strip strong { color:var(--sc-text); font-size:23px; font-weight:650; letter-spacing:-.025em; }
body.app-mode .home-stat-strip strong.is-loading { color:var(--sc-muted); }
body.app-mode .home-market-tape { min-width:0; width:100%; max-width:440px; justify-self:end; align-self:center; border-top:1px solid var(--sc-text); }
body.app-mode .home-market-tape-heading { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:13px 0 16px; }
body.app-mode .home-market-tape-heading span { color:var(--sc-muted); font-size:12px; }
body.app-mode .home-market-tape-heading strong { color:var(--sc-text); font-size:15px; font-weight:650; }
body.app-mode .home-market-tape-row { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:71px; border-top:1px solid var(--sc-border); color:var(--sc-text); text-decoration:none; transition:padding-left .15s ease,background .15s ease; }
body.app-mode .home-market-tape-row:hover { padding-left:6px; background:color-mix(in srgb,var(--sc-accent) 5%,transparent); }
body.app-mode .home-market-tape-asset { display:flex; align-items:center; gap:11px; min-width:0; }
body.app-mode .home-market-tape-mark { display:grid; place-items:center; position:relative; flex:0 0 32px; width:32px; height:32px; border:1px solid var(--sc-border); border-radius:5px; background:#fff; color:#24342a; font-size:12px; font-weight:700; }
body.app-mode .home-market-tape-mark img { position:absolute; inset:1px; width:28px; height:28px; object-fit:contain; background:#fff; }
body.app-mode .home-market-tape-asset :is(strong,small), body.app-mode .home-market-tape-quote :is(strong,small) { display:block; white-space:nowrap; }
body.app-mode .home-market-tape-asset strong { font-size:13px; font-weight:650; }
body.app-mode .home-market-tape-asset small, body.app-mode .home-market-tape-quote small { margin-top:3px; color:var(--sc-muted); font-size:11px; }
body.app-mode .home-market-tape-quote { flex:0 0 auto; text-align:right; }
body.app-mode .home-market-tape-quote strong { font-size:17px; font-weight:650; font-variant-numeric:tabular-nums; }
body.app-mode .home-market-tape-all { display:inline-flex; align-items:center; gap:7px; margin-top:16px; color:var(--sc-accent); font-size:13px; font-weight:600; text-decoration:none; }
body.app-mode .home-market-tape-all:hover { text-decoration:underline; text-underline-offset:4px; }
body.app-mode .home-market-tape-rows > p { padding:20px 0; color:var(--sc-muted); font-size:13px; line-height:1.5; }
body.app-mode .home-stocks { padding-top:46px; }
body.app-mode .home-stocks-heading { display:flex; align-items:end; gap:24px; justify-content:space-between; margin-bottom:20px; }
body.app-mode .home-stocks-heading h2, body.app-mode .home-risk h2, body.app-mode .home-lending h2 { font:650 26px/1.25 Inter,Geist,"Segoe UI",sans-serif !important; letter-spacing:-.02em; color:var(--sc-text) !important; font-style:normal; }
body.app-mode .home-stocks-heading .home-kicker { margin-bottom:5px; }
body.app-mode .home-table-tools { display:flex; gap:10px; align-items:center; }
body.app-mode .home-search-label { display:flex; align-items:center; gap:7px; height:38px; padding:0 10px; border:1px solid var(--sc-border); border-radius:6px; color:var(--sc-muted); background:var(--sc-surface); }
body.app-mode .home-search-label input { width:175px; border:0; outline:0; color:var(--sc-text); background:transparent; font-size:13px; }
body.app-mode .home-sort-label { color:var(--sc-muted); font-size:12px; }
body.app-mode .home-sort-label select { height:38px; border:1px solid var(--sc-border); background:var(--sc-surface); color:var(--sc-text); border-radius:6px; }
body.app-mode .home-market-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(310px,1fr); gap:28px; align-items:start; }
body.app-mode .home-market-scroll { min-width:0; overflow:visible; }
body.app-mode .home-market-table { width:100%; min-width:0; table-layout:fixed; }
body.app-mode .home-market-table th { color:var(--sc-muted); font-size:11px; font-weight:600; white-space:normal; line-height:1.3; }
body.app-mode .home-market-table th:first-child { width:27%; }
body.app-mode .home-market-table th:nth-child(3) { width:19%; }
body.app-mode .home-market-table th:last-child { width:13%; }
body.app-mode .home-market-table td { color:var(--sc-text); font-size:13px; border-bottom:1px solid var(--sc-border); padding:14px 7px; font-variant-numeric:tabular-nums; }
body.app-mode .home-market-table tbody tr { cursor:pointer; transition:background .12s ease; }
body.app-mode .home-market-table tbody tr:hover, body.app-mode .home-market-table tbody tr.is-selected { background:color-mix(in srgb,var(--sc-accent) 7%,transparent); }
body.app-mode .home-market-table .home-asset-logo { width:32px; height:32px; flex:0 0 32px; border:1px solid var(--sc-border); border-radius:5px; background:#fff; }
body.app-mode .home-market-table .home-asset-logo img { width:27px; height:27px; object-fit:contain; }
body.app-mode .home-market-table .home-asset strong { color:var(--sc-text); }
body.app-mode .home-market-table .home-asset small { color:var(--sc-muted); }
body.app-mode .home-market-table .home-utilization { height:3px; border-radius:3px; background:var(--sc-border); }
body.app-mode .home-market-table .home-utilization > span { background:var(--sc-accent); }
body.app-mode .home-low-liquidity { display:block; margin-top:4px; color:var(--sc-warning); font-size:11px; }
body.app-mode .home-borrow-link { display:inline-flex; justify-content:center; padding:7px 9px; min-width:55px; border:1px solid var(--sc-border); border-radius:5px; color:var(--sc-text); text-decoration:none; font-size:12px; font-weight:600; }
body.app-mode .home-borrow-link:hover { border-color:var(--sc-accent); color:var(--sc-accent); }
body.app-mode .home-borrow-link[aria-disabled="true"] { color:var(--sc-muted); background:var(--sc-bg); pointer-events:none; }
body.app-mode .home-coming-soon { display:flex; flex-wrap:wrap; align-items:center; gap:8px 25px; padding:18px 5px; font-size:13px; color:var(--sc-muted); }
body.app-mode .home-coming-soon[hidden] { display:none; }
body.app-mode .home-coming-item { display:flex; align-items:center; gap:10px; }
body.app-mode .home-coming-item .home-asset { gap:7px; }
body.app-mode .home-coming-item .home-asset-logo { width:25px; height:25px; border-radius:4px; background:#fff; }
body.app-mode .home-coming-item .home-asset-logo img { width:23px; height:23px; }
body.app-mode .home-coming-badge { color:var(--sc-muted); font-size:11px; }
body.app-mode .home-calculator { position:sticky; top:88px; width:auto; max-width:none; border:1px solid var(--sc-border); border-radius:12px; background:var(--sc-surface); box-shadow:none; padding:20px; }
body.app-mode .home-calculator :is(h2,dd) { color:var(--sc-text); }
body.app-mode .home-calculator :is(p,dt,label,small) { color:var(--sc-muted); }
body.app-mode .home-calculator :is(input,select) { color:var(--sc-text); background:var(--sc-bg); border-color:var(--sc-border); border-radius:6px; }
body.app-mode .home-calculator-results > div { border-color:var(--sc-border); }
body.app-mode .home-risk { display:grid; grid-template-columns:1fr 1fr; gap:22px 42px; max-width:none; overflow:hidden; margin-top:70px; padding:28px; border:1px solid var(--sc-border); border-radius:12px; background:var(--sc-surface); }
body.app-mode .home-risk > * { min-width:0; }
body.app-mode .home-risk p, body.app-mode .home-risk small { color:var(--sc-muted); font-size:13px; line-height:1.6; }
body.app-mode .home-risk-bars { max-width:380px; display:grid; gap:12px; margin-top:20px; }
body.app-mode .home-risk-bars > span { display:grid; grid-template-columns:115px 1fr; align-items:center; gap:12px; color:var(--sc-muted); font-size:12px; }
body.app-mode .home-risk-bars i { display:block; height:8px; border-radius:5px; background:var(--sc-border); }
body.app-mode .home-risk-bars > span:nth-child(2) i { width:60%; background:var(--sc-warning); }
body.app-mode .home-contracts { min-width:0; max-width:100%; overflow-wrap:anywhere; }
body.app-mode .home-lending { margin-top:60px; }

/* Motion is brief and structural: content settles in once, data never bounces. */
@keyframes sc-enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes sc-bar { from { transform:scaleX(0); } to { transform:scaleX(1); } }
html[data-production-route="home"] body.app-mode .home-lead h1 { animation:sc-enter .46s cubic-bezier(.2,.7,.2,1) both; }
html[data-production-route="home"] body.app-mode .home-intro { animation:sc-enter .46s .08s cubic-bezier(.2,.7,.2,1) both; }
html[data-production-route="home"] body.app-mode .home-actions { animation:sc-enter .46s .14s cubic-bezier(.2,.7,.2,1) both; }
html[data-production-route="home"] body.app-mode .home-stat-strip { animation:sc-enter .5s .22s cubic-bezier(.2,.7,.2,1) both; }
html[data-production-route="home"] body.app-mode .home-market-tape { animation:sc-enter .5s .18s cubic-bezier(.2,.7,.2,1) both; }
html[data-production-route="home"] body.app-mode .home-market-tape-row { animation:sc-enter .34s ease-out both; }
html[data-production-route="home"] body.app-mode .home-market-tape-row:nth-child(2) { animation-delay:.06s; }
html[data-production-route="home"] body.app-mode .home-market-tape-row:nth-child(3) { animation-delay:.12s; }
html[data-production-route="home"] body.app-mode .home-risk-bars i { transform-origin:left center; animation:sc-bar .65s .18s ease-out both; }
html[data-production-route="markets"] body.app-mode .app-heading { animation:sc-enter .34s ease-out both; }
html[data-production-route="markets"] body.app-mode #marketMetrics .market-metric { animation:sc-enter .34s ease-out both; }
html[data-production-route="markets"] body.app-mode #marketMetrics .market-metric:nth-child(2) { animation-delay:.045s; }
html[data-production-route="markets"] body.app-mode #marketMetrics .market-metric:nth-child(3) { animation-delay:.09s; }
html[data-production-route="markets"] body.app-mode #marketMetrics .market-metric:nth-child(4) { animation-delay:.135s; }
html[data-production-route="markets"] body.app-mode #marketlist .market-utilization-fill { transform-origin:left center; animation:sc-bar .42s ease-out both; }
@media (prefers-reduced-motion:reduce) {
  html[data-production-route="home"] body.app-mode :is(.home-lead h1,.home-intro,.home-actions,.home-stat-strip,.home-market-tape,.home-market-tape-row,.home-risk-bars i),
  html[data-production-route="markets"] body.app-mode :is(.app-heading,#marketMetrics .market-metric,#marketlist .market-utilization-fill) { animation:none !important; transition:none !important; }
}

/* Markets: four equal metrics, clear controls and dense, legible rows. */
html[data-production-route="markets"] body.app-mode .app-shell { max-width:1500px; }
html[data-production-route="markets"] body.app-mode:not(.stock-detail-mode) #appView .app-heading h1 { font:650 28px/1.25 Inter,Geist,"Segoe UI",sans-serif; letter-spacing:-.02em; color:var(--sc-text); }
html[data-production-route="markets"] body.app-mode .app-heading .section-label { display:none; }
html[data-production-route="markets"] body.app-mode:not(.stock-detail-mode) #marketMetrics { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; }
html[data-production-route="markets"] body.app-mode:not(.stock-detail-mode) #marketMetrics > .market-metric { display:grid; align-content:start; min-height:110px; gap:5px; padding:16px !important; border:1px solid var(--sc-border) !important; border-radius:10px; background:var(--sc-surface) !important; }
html[data-production-route="markets"] body.app-mode #marketMetrics .market-metric :is(span,small) { color:var(--sc-muted) !important; font-size:12px; }
html[data-production-route="markets"] body.app-mode #marketMetrics .market-metric strong { color:var(--sc-text) !important; font-size:24px !important; line-height:1.25; font-weight:650; }
html[data-production-route="markets"] body.app-mode .market-toolbar { border:0; }
html[data-production-route="markets"] body.app-mode .table :is(th,td) { border-color:var(--sc-border); }
html[data-production-route="markets"] body.app-mode .table tbody tr { transition:background .12s ease; }
html[data-production-route="markets"] body.app-mode .table tbody tr:hover { background:color-mix(in srgb,var(--sc-accent) 6%,transparent); }
html[data-production-route="markets"] body.app-mode .table .market-row-action { border-radius:5px; }
html[data-production-route="markets"] body.app-mode .table .market-full-pill { opacity:1; color:var(--sc-warning); }
html[data-production-route="markets"] body.app-mode .hide-full-control { display:inline-flex; align-items:center; gap:8px; margin:5px 0 10px; color:var(--sc-muted); font-size:13px; cursor:pointer; }
html[data-production-route="markets"] body.app-mode .hide-full-control input { accent-color:var(--sc-accent); }
html[data-production-route="markets"] body.app-mode .table .mode-hidden { display:none; }
html[data-production-route="markets"] body.app-mode #marketlist .table .mode-hidden { display:none !important; }
html[data-production-route="markets"] body.app-mode #marketlist .table :is(th,td):nth-child(5) { display:table-cell !important; }
html[data-production-route="markets"] body.app-mode .table td:not(:first-child), html[data-production-route="markets"] body.app-mode .table th:not(:first-child) { text-align:right; font-variant-numeric:tabular-nums; }
html[data-production-route="markets"] body.app-mode .table td { color:var(--sc-text); }
html[data-production-route="markets"] body.app-mode .table th { color:var(--sc-muted); font-size:12px; }
html[data-production-route="markets"] body.app-mode .table .rate-badge { display:block; color:var(--sc-accent); font-size:11px; font-weight:600; }
html[data-production-route="markets"] body.app-mode .table tr.is-lowest td::after { display:none !important; }
html[data-production-route="markets"] body.app-mode #marketlist .table tr[hidden] { display:none !important; }
html[data-production-route="markets"] body.app-mode #marketlist :is(.table,.pending-markets)[hidden] { display:none !important; }
html[data-production-route="markets"] body.app-mode .market-supply-link { display:block; margin-top:5px; color:var(--sc-accent); font-size:11px; text-decoration:underline; text-underline-offset:2px; }
html[data-production-route="markets"] body.app-mode .table .market-row-action[aria-disabled="true"] { color:var(--sc-muted); border-color:var(--sc-border); background:var(--sc-bg); pointer-events:none; }
html[data-production-route="markets"] body.app-mode .table tbody tr.is-full { opacity:1; }
html[data-production-route="markets"] body.app-mode .compact-market.is-full { opacity:1; }
html[data-production-route="markets"] body.app-mode .compact-market.is-full:hover, html[data-production-route="markets"] body.app-mode .compact-market.is-full:focus-visible { opacity:1; }
html[data-production-route="markets"] body.app-mode .compact-market.is-lowest .quote-primary-rate strong::after { content:"Lowest rate"; }
html[data-production-route="markets"] body.app-mode .pending-markets { margin-top:18px; border-top:1px solid var(--sc-border); }
html[data-production-route="markets"] body.app-mode .pending-markets .pending-market { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
html[data-production-route="markets"] body.app-mode .pending-market-request { font-size:12px; color:var(--sc-accent); }
html[data-production-route="markets"] body.app-mode .market-risk-note { border:1px solid var(--sc-border); background:var(--sc-surface); border-radius:6px; }
@media(min-width:769px) { html[data-production-route="markets"] body.app-mode #marketlist .table-scroll { display:block; overflow-x:auto; } html[data-production-route="markets"] body.app-mode #marketlist .table { display:table; min-width:760px; } html[data-production-route="markets"] body.app-mode #marketlist .compact-market-list { display:none; } }
html[data-production-route="home"] body.app-mode .site-nav [data-route="markets"] { border-bottom-color:transparent; }

/* Market detail: 65/35 information/action split, no nested dashboard cards. */
html[data-production-route="market"] body.app-mode .app-shell { width:min(1500px,calc(100% - 64px)); max-width:none; }
body.app-mode.stock-detail-mode .layout { grid-template-columns:minmax(0,1.85fr) minmax(340px,1fr); gap:36px; align-items:start; }
body.app-mode.stock-detail-mode .layout > aside { position:sticky; top:84px; align-self:start; }
body.app-mode.stock-detail-mode .back-markets { display:block; margin:28px 0 17px; font-size:13px; color:var(--sc-muted); }
body.app-mode.stock-detail-mode .market-overview { margin:0 0 24px; }
body.app-mode.stock-detail-mode .market-identity { display:flex; align-items:center; gap:18px; min-width:0; }
body.app-mode.stock-detail-mode .token-stack { display:flex; padding-left:9px; align-items:center; }
body.app-mode.stock-detail-mode .token-stack .coin { width:40px; height:40px; margin-left:-9px; border:2px solid var(--sc-bg); border-radius:50%; background:#fff; }
body.app-mode.stock-detail-mode .market-identity h1 { margin:0; font:650 clamp(25px,2.3vw,32px)/1.2 Inter,Geist,"Segoe UI",sans-serif; letter-spacing:-.02em; color:var(--sc-text); }
body.app-mode.stock-detail-mode .market-identity p { margin:4px 0 0; color:var(--sc-muted); font-size:13px; }
body.app-mode.stock-detail-mode .lltv-pill { margin-left:auto; flex:0 0 auto; padding:7px 9px; border:1px solid var(--sc-border); border-radius:5px; color:var(--sc-muted); font-size:12px; }
body.app-mode.stock-detail-mode .market-tvl { display:flex; align-items:baseline; gap:13px; margin-top:25px; color:var(--sc-muted); font-size:12px; }
body.app-mode.stock-detail-mode .market-tvl strong { color:var(--sc-text); font-size:22px; font-weight:650; }
body.app-mode.stock-detail-mode .overview-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:22px; }
body.app-mode.stock-detail-mode .overview-stats > div { min-width:0; padding:14px; border:1px solid var(--sc-border); border-radius:9px; background:var(--sc-surface); }
body.app-mode.stock-detail-mode .overview-stats span, body.app-mode.stock-detail-mode .rate-pair span { display:block; color:var(--sc-muted) !important; font-size:12px; line-height:1.4; }
body.app-mode.stock-detail-mode .overview-stats strong, body.app-mode.stock-detail-mode .rate-pair strong { display:block; margin-top:8px; color:var(--sc-text) !important; font-size:23px; font-weight:650; line-height:1.2; }
body.app-mode.stock-detail-mode .overview-stats small, body.app-mode.stock-detail-mode .rate-pair small { display:block; margin-top:5px; color:var(--sc-muted); font-size:12px; }
body.app-mode.stock-detail-mode .utilization-track { height:4px; margin-top:10px; border-radius:4px; background:var(--sc-border); }
body.app-mode.stock-detail-mode .utilization-track i { display:block; height:100%; border-radius:4px; background:var(--sc-accent); }
body.app-mode.stock-detail-mode .rate-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:10px; }
body.app-mode.stock-detail-mode .rate-pair > div { padding:14px; border:1px solid var(--sc-border); border-radius:9px; background:var(--sc-surface); }
body.app-mode.stock-detail-mode .detail-nav { margin:28px 0 20px; border-color:var(--sc-border); gap:23px; }
body.app-mode.stock-detail-mode .detail-nav button { min-height:38px; color:var(--sc-muted); font-size:13px; font-weight:550; }
body.app-mode.stock-detail-mode .detail-nav button.on { color:var(--sc-text); border-bottom:2px solid var(--sc-accent); }
body.app-mode.stock-detail-mode #marketInformation { color:var(--sc-text); font-size:14px; }
body.app-mode.stock-detail-mode #marketInformation :is(h2,h3) { font:650 18px Inter,Geist,"Segoe UI",sans-serif; color:var(--sc-text); }
body.app-mode.stock-detail-mode #marketInformation p { color:var(--sc-muted); line-height:1.6; }
body.app-mode.stock-detail-mode #marketInformation .attribute { border-color:var(--sc-border); }
body.app-mode.stock-detail-mode #marketInformation .attribute span { color:var(--sc-muted); }
body.app-mode.stock-detail-mode #marketInformation .attribute b { color:var(--sc-text); }
body.app-mode.stock-detail-mode .layout > aside > .panel { border:1px solid var(--sc-border); border-radius:12px; padding:19px; background:var(--sc-surface); box-shadow:none; }
body.app-mode.stock-detail-mode .layout > aside .ph { margin-bottom:15px; }
body.app-mode.stock-detail-mode .layout > aside .ph h2 { color:var(--sc-text); font-size:17px; }
body.app-mode.stock-detail-mode .layout > aside .ph .count { color:var(--sc-muted); font-size:12px; }
body.app-mode.stock-detail-mode .tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-bottom:1px solid var(--sc-border); margin-bottom:15px; }
body.app-mode.stock-detail-mode .tabs button { min-height:40px; padding:8px 3px; border-radius:0; color:var(--sc-muted); font-size:12px; }
body.app-mode.stock-detail-mode .tabs button.on { color:var(--sc-text); border-bottom:2px solid var(--sc-accent); }
body.app-mode.stock-detail-mode .field { padding:12px; margin-bottom:10px; border:1px solid var(--sc-border); border-radius:8px; background:var(--sc-bg); box-shadow:none; }
body.app-mode.stock-detail-mode .field:focus-within { border-color:var(--sc-accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--sc-accent) 15%,transparent); }
body.app-mode.stock-detail-mode .field .amount input { color:var(--sc-text); font-size:25px; }
body.app-mode.stock-detail-mode :is(.balance-row,.hint,.notice,.estimate,.position-metrics span) { color:var(--sc-muted); font-size:12px; }
body.app-mode.stock-detail-mode :is(.balance-row b,.position-metrics b) { color:var(--sc-text); }
body.app-mode.stock-detail-mode .projection-details { display:block; margin-top:16px; border-top:1px solid var(--sc-border); }
body.app-mode.stock-detail-mode .projection-details > summary { color:var(--sc-text); font-size:13px; font-weight:650; }
body.app-mode.stock-detail-mode .projection-details .position-metrics { display:grid; grid-template-columns:repeat(2,1fr); gap:0 14px; }
body.app-mode.stock-detail-mode #action { min-height:44px; border-radius:6px; background:var(--sc-accent); color:#fff; }
html[data-theme="dark"] body.app-mode.stock-detail-mode #action { color:#122219; }
body.app-mode.stock-detail-mode #action:disabled { background:var(--sc-border); color:var(--sc-muted); opacity:1; }
body.app-mode.stock-detail-mode .mobile-action-link { display:none; }
body.app-mode.stock-detail-mode .bottom { border-top:1px solid var(--sc-border); }
body.app-mode.stock-detail-mode .site-footer { grid-template-columns:1fr 2fr; }
body.app-mode.stock-detail-mode .site-footer > span { display:none; }
body.app-mode.stock-detail-mode .market-live-preview { margin:14px 0; padding:12px 0; border-block:1px solid var(--sc-border); }
body.app-mode.stock-detail-mode .market-live-preview > div:first-child { display:flex; align-items:baseline; justify-content:space-between; color:var(--sc-muted); font-size:12px; }
body.app-mode.stock-detail-mode .market-live-preview strong { color:var(--sc-text); font-size:17px; }
body.app-mode.stock-detail-mode .market-live-track, body.app-mode .home-ltv-track { height:5px; margin-top:10px; border-radius:5px; background:var(--sc-border); overflow:hidden; }
body.app-mode.stock-detail-mode .market-live-track i, body.app-mode .home-ltv-track i { display:block; height:100%; border-radius:5px; background:var(--sc-success); }
body.app-mode.stock-detail-mode .market-live-preview[data-risk="warning"] .market-live-track i, body.app-mode .home-ltv-track[data-risk="warning"] i { background:var(--sc-warning); }
body.app-mode.stock-detail-mode .market-live-preview[data-risk="danger"] .market-live-track i, body.app-mode .home-ltv-track[data-risk="danger"] i { background:var(--sc-danger); }
body.app-mode.stock-detail-mode .market-live-preview p, body.app-mode.stock-detail-mode .market-input-equivalent, body.app-mode .home-ltv-reading { margin:8px 0 0; color:var(--sc-muted); font-size:12px; line-height:1.5; }
body.app-mode.stock-detail-mode #marketInformation .chart-controls { display:flex; gap:6px; margin:20px 0 12px; }
body.app-mode.stock-detail-mode #marketInformation .chart-controls button, body.app-mode.stock-detail-mode #marketInformation .chart-retry { padding:6px 11px; color:var(--sc-muted); border:1px solid var(--sc-border); border-radius:5px; background:var(--sc-surface); font-size:12px; cursor:pointer; }
body.app-mode.stock-detail-mode #marketInformation .chart-controls button[aria-pressed="true"] { color:var(--sc-text); border-color:var(--sc-accent); }
body.app-mode.stock-detail-mode #marketInformation .market-rate-chart { min-height:245px; padding:12px; border:1px solid var(--sc-border); border-radius:9px; background:var(--sc-surface); }
body.app-mode.stock-detail-mode #marketInformation .market-rate-chart svg { display:block; width:100%; height:auto; }
body.app-mode.stock-detail-mode #marketInformation .chart-legend { color:var(--sc-text); font-size:12px; }
body.app-mode.stock-detail-mode #marketInformation .chart-range { color:var(--sc-muted); font-size:12px; }
body.app-mode.stock-detail-mode #marketInformation .chart-grid-line { stroke:var(--sc-border); stroke-width:1; vector-effect:non-scaling-stroke; }
body.app-mode.stock-detail-mode #marketInformation .chart-axis-label { fill:var(--sc-muted); font:11px var(--sc-font, Inter, sans-serif); }
body.app-mode.stock-detail-mode #marketInformation .chart-day-point { stroke:var(--sc-surface); stroke-width:1.5; vector-effect:non-scaling-stroke; }
body.app-mode.stock-detail-mode #marketInformation .chart-daily-heading { margin:23px 0 4px; color:var(--sc-text); font-size:16px; font-weight:650; }
body.app-mode.stock-detail-mode #marketInformation .chart-daily-note { margin:0 0 13px; color:var(--sc-muted); font-size:12px; line-height:1.5; }
body.app-mode.stock-detail-mode #marketInformation .chart-daily-table { width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
body.app-mode.stock-detail-mode #marketInformation .chart-daily-table th,
body.app-mode.stock-detail-mode #marketInformation .chart-daily-table td { padding:9px 2px; border-bottom:1px solid var(--sc-border); }
body.app-mode.stock-detail-mode #marketInformation .chart-daily-table thead th { color:var(--sc-muted); font-size:12px; font-weight:500; }
body.app-mode.stock-detail-mode #marketInformation .chart-daily-table tbody th { color:var(--sc-text); font-weight:500; }
body.app-mode.stock-detail-mode #marketInformation .chart-daily-table th:first-child { text-align:left; }
body.app-mode.stock-detail-mode #marketInformation .chart-daily-table th:not(:first-child),
body.app-mode.stock-detail-mode #marketInformation .chart-daily-table td { text-align:right; }
body.app-mode.stock-detail-mode #marketInformation .chart-daily-table tr[hidden] { display:none !important; }
body.app-mode.stock-detail-mode #marketInformation .chart-show-more { margin:12px 0 2px; padding:7px 0; border:0; background:transparent; color:var(--sc-accent); font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; }
body.app-mode.stock-detail-mode #marketInformation .chart-show-more:hover { text-decoration:underline; }
body.app-mode.stock-detail-mode #marketInformation .chart-show-more:focus-visible { outline:2px solid var(--sc-accent); outline-offset:3px; }
body.app-mode.stock-detail-mode #marketInformation .market-risk-note { padding:12px; border-left:3px solid var(--sc-warning); background:var(--sc-surface); }

@media(max-width:1100px) { body.app-mode .home-market-layout { grid-template-columns:minmax(0,1fr); } body.app-mode .home-calculator { position:static; max-width:600px; } body.app-mode .home-market-scroll { overflow-x:auto; } body.app-mode .home-market-table { min-width:680px; } }
@media(max-width:900px) { html[data-site-route="home"] body.app-mode .home-lead { grid-template-columns:minmax(0,1fr); } body.app-mode .home-market-tape { max-width:620px; justify-self:start; margin-top:36px; } body.app-mode .home-stat-strip { margin-top:55px; } body.app-mode.stock-detail-mode .layout { grid-template-columns:minmax(0,1fr); } body.app-mode.stock-detail-mode .layout > aside { position:static; max-width:620px; } }
@media(max-width:760px) { body.app-mode .site-header { flex-wrap:wrap; gap:8px; } body.app-mode .site-nav { gap:11px; } body.app-mode .site-nav a { font-size:12px; } body.app-mode .network-badge { font-size:11px; } html[data-site-route="home"] body.app-mode .home-lead { padding:55px 0 30px; } body.app-mode .home-stat-strip { grid-template-columns:repeat(2,1fr); gap:22px; margin-top:55px; } body.app-mode .home-stocks-heading { align-items:start; flex-direction:column; } body.app-mode .home-table-tools { width:100%; } body.app-mode .home-search-label { flex:1; } body.app-mode .home-search-label input { width:100%; } body.app-mode .home-risk { display:block; padding:20px; } body.app-mode .home-risk-copy { margin-top:20px; } html[data-production-route="markets"] body.app-mode:not(.stock-detail-mode) #marketMetrics { grid-template-columns:repeat(2,minmax(0,1fr)) !important; } html[data-production-route="market"] body.app-mode .app-shell { width:calc(100% - 32px); } body.app-mode.stock-detail-mode .overview-stats { grid-template-columns:repeat(2,1fr); } body.app-mode.stock-detail-mode .market-identity { flex-wrap:wrap; gap:12px; } body.app-mode.stock-detail-mode .lltv-pill { margin-left:0; } body.app-mode.stock-detail-mode .mobile-action-link { display:block; position:sticky; bottom:12px; z-index:20; width:100%; min-height:42px; border:0; border-radius:6px; background:var(--sc-accent); color:#fff; font-weight:650; } }
@media(max-width:430px) { body.app-mode .home-table-tools { flex-direction:column; align-items:stretch; } body.app-mode .home-stat-strip strong { font-size:20px; } body.app-mode.stock-detail-mode .overview-stats strong { font-size:20px; } body.app-mode.stock-detail-mode .market-identity h1 { font-size:24px; } }
