/*
 * Zeno Market visual system — derived from the supplied AI Zeno mockups.
 * This file is deliberately loaded after the legacy stylesheet so product
 * behavior can remain untouched while the visual hierarchy stays easy to edit.
 */

:root {
  --header: 76px;
  --subnav: 62px;
  --bg: #020912;
  --card: #06111e;
  --card2: #081625;
  --line: rgba(58, 104, 151, 0.28);
  --line-strong: rgba(40, 138, 247, 0.58);
  --text: #f7faff;
  --dim: #9aacc0;
  --accent: #0b72ff;
  --accent2: #14b9f4;
  --up: #26d69f;
  --down: #ff6681;
  --warn: #f0b451;
  --surface: linear-gradient(145deg, rgba(9, 26, 45, 0.96), rgba(3, 12, 22, 0.98));
  --surface-soft: linear-gradient(145deg, rgba(7, 21, 36, 0.96), rgba(3, 12, 21, 0.98));
  --surface-raised: linear-gradient(145deg, rgba(10, 31, 53, 0.98), rgba(4, 14, 25, 0.99));
  --zeno-blue: linear-gradient(112deg, #0757fa 0%, #008bfa 75%, #00b4ef 100%);
  --zeno-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 20px 50px rgba(0, 0, 0, 0.26);
}

html,
body,
button,
input,
select,
textarea {
  font-family: "Urbanist", "Avenir Next", "Segoe UI", sans-serif !important;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html { background: var(--bg); }

body {
  min-width: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.45;
  background:
    radial-gradient(circle at 14% -8%, rgba(4, 97, 211, 0.17), transparent 31rem),
    radial-gradient(circle at 88% 4%, rgba(25, 72, 167, 0.11), transparent 34rem),
    var(--bg);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(72, 131, 191, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(72, 131, 191, 0.018) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.45), transparent 62%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.45), transparent 62%);
  z-index: -1;
}

button,
input,
select { min-height: 42px; }

h1,
h2,
h3,
.mtitle,
.featured-card h2 { letter-spacing: -0.018em; }

/* Header and primary navigation */
header.app-header {
  height: 76px;
  padding: 0 max(28px, calc((100vw - 1740px) / 2));
  gap: 14px;
  border-bottom: 1px solid rgba(56, 104, 151, 0.22);
  background: rgba(2, 9, 18, 0.94);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

header.app-header > .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 210px;
  min-width: 210px;
  height: 50px;
  --brand-symbol-size: 38px;
  --brand-text-size: 17px;
  --brand-gap: 10px;
}

.market-route-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

.market-route-button {
  height: 44px;
  min-height: 44px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(55, 99, 143, 0.34);
  border-radius: 12px;
  color: #d9e6f5;
  background: rgba(3, 14, 25, 0.86);
  font-size: 13px;
  font-weight: 560;
  white-space: nowrap;
}

.market-route-button:hover,
.market-route-button:focus-visible {
  border-color: rgba(77, 155, 237, 0.64);
  background: rgba(8, 29, 48, 0.96);
  outline: none;
}

.market-route-button .ui-icon { width: 17px; height: 17px; }

.brand-logo-frame span {
  font-family: "Urbanist", sans-serif !important;
  font-weight: 650;
  letter-spacing: 0.045em;
}

.search { max-width: 780px; }

.search input,
.wallet-head,
.profile-head,
.notification-head,
.deposit-head {
  height: 44px;
  min-height: 44px;
  border: 1px solid rgba(55, 99, 143, 0.3);
  border-radius: 12px;
  background: rgba(3, 14, 25, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.search input { padding-left: 44px; font-size: 15px; }
.search > .ui-icon { left: 15px; width: 18px; height: 18px; }

#pillTrading,
#pillBuilder,
#pillData { display: none !important; }

.status-pill {
  color: #91a1b7;
  border: 1px solid rgba(54, 101, 145, 0.26);
  border-radius: 999px;
  background: rgba(5, 17, 29, 0.68);
}

.deposit-head {
  background: var(--zeno-blue);
  border-color: rgba(69, 161, 255, 0.65);
  box-shadow: 0 12px 28px rgba(8, 108, 255, 0.2), inset 0 1px rgba(255,255,255,.2);
}

nav.tabs {
  top: 76px;
  width: 100%;
  height: 62px;
  padding: 0 max(28px, calc((100vw - 1740px) / 2));
  gap: 12px;
  border-bottom: 1px solid rgba(56, 104, 151, 0.22);
  background: rgba(2, 9, 18, 0.93);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

nav.tabs::before { display: none; }

nav.tabs button {
  min-height: 62px;
  padding: 0 18px;
  gap: 9px;
  color: #9aa9bd;
  font-size: 15px;
  font-weight: 600;
  border-bottom-width: 2px;
}

nav.tabs button .ui-icon { width: 19px; height: 19px; }

nav.tabs button.active {
  color: #3f96ff;
  border-bottom-color: #2a8cff;
  background: transparent;
}

/* Working surface */
main {
  width: 100%;
  max-width: 1796px;
  padding: 38px 36px 104px;
}

.grid { grid-template-columns: minmax(0, 1fr) 390px; gap: 24px; }
.panel { top: 154px; }

.crypto-explore-hero {
  display: flex !important;
  align-items: center;
  margin: 0 0 28px;
  padding: 0;
}

.crypto-heading { display: flex; align-items: center; gap: 18px; min-width: 0; }

.crypto-heading-icon {
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 174, 43, 0.65);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #ff9e19, #ff7208);
  box-shadow: inset 0 1px rgba(255,255,255,.35), 0 12px 28px rgba(255, 118, 0, .14);
  font-size: 39px;
  font-weight: 700;
}

.crypto-explore-hero .eyebrow {
  margin-bottom: 4px;
  color: #77869a;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.crypto-explore-hero h1 {
  margin: 0 0 4px;
  font-size: clamp(30px, 2.5vw, 42px);
  font-weight: 650;
  line-height: 1.08;
}

.crypto-explore-hero p { color: #8593a6; font-size: 15px; }

.market-summary {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  overflow: visible;
  display: grid;
  grid-template-columns: repeat(3, minmax(126px, 1fr));
  gap: 12px;
}

.market-summary div {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  column-gap: 12px;
  min-width: 126px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(7, 23, 40, .92), rgba(3, 13, 24, .96));
  box-shadow: inset 0 1px rgba(255,255,255,.035);
  text-align: left;
}

.market-summary div:first-child { border-left: 1px solid var(--line); }
.market-summary small { font-size: 12px; letter-spacing: 0; text-transform: none; }
.market-summary strong { margin-top: 4px; font-size: 21px; font-weight: 650; }
.market-summary .summary-icon { grid-row: 1 / 3; width: 30px; height: 30px; color: #009cfa; align-self: center; }

.featured-news-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(330px, .72fr);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 30px;
}

.featured-market-block,
.featured-news-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(4, 15, 27, 0.66);
  box-shadow: var(--zeno-shadow);
}

.featured-market-block { padding: 20px 18px 14px; }
.featured-news-panel { padding: 20px; }

.section-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.section-kicker h2,
.market-list-title h2 {
  margin: 0;
  color: #f2f6fc;
  font-size: 17px;
  font-weight: 650;
}

.section-kicker span,
.text-action {
  color: #368ee9;
  font-size: 13px;
  font-weight: 600;
}

.text-action { min-height: 32px; padding: 0 4px; }

.featured-rail { margin: 0; padding: 0 0 32px; }
.featured-track, .featured-track.sparse-one { min-height: 292px; grid-template-columns: minmax(0,1fr); gap: 0; }

.featured-card,
.featured-card.featured-main {
  border: 1px solid rgba(55, 107, 158, .32);
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(7, 22, 38, .98), rgba(3, 12, 22, .99));
  box-shadow: inset 0 1px rgba(255,255,255,.045);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.featured-card.featured-main {
  padding: 12px 6px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.featured-card:hover { transform: none; }
.featured-title { display: flex; align-items: center; gap: 18px; text-align: left; width: 100%; padding: 16px 0 22px; }
.featured-title h2 { flex: 1; margin: 0; max-width: none; text-transform: none; letter-spacing: -.025em; font-size: clamp(22px,2vw,30px); line-height: 1.25; }
.featured-title .asset-art { width: 62px; height: 62px; font-size: 24px; }
.featured-title .asset-art svg { width: 39px; height: 39px; }
.featured-odds { margin-top: 8px; }
.featured-odd { min-height: 70px; flex-direction: column; gap: 2px; justify-content: center; font-size: 14px; }
.featured-odd b { font-size: 27px; }
.featured-main .featured-odd:first-child { background: var(--zeno-blue); color: white; }
.featured-live-bars { gap: 12px; margin-bottom: 16px; }
.featured-live-bar { font-size: 12px; }
.featured-live-bar i { height: 6px; }
.featured-footer > span { display: inline-flex; align-items: center; gap: 7px; }
.featured-footer .ui-icon { width: 15px; height: 15px; }
.featured-arrow { top: auto; bottom: -7px; min-height: 30px; width: 30px; height: 30px; }
.featured-prev { left: 0; }
.featured-next { right: 0; }
.featured-dots { bottom: 0; }
.featured-dots button { min-height: 6px; }

.featured-card h2 { color: #f8fbff; font-size: 17px; font-weight: 600; }
.featured-main h2 { font-size: 22px; }

.featured-odd,
.market-outcomes .obtn {
  border-color: rgba(55, 100, 144, .36);
  background: rgba(3, 13, 23, .72);
}

.featured-main .featured-odd:first-child,
.market-outcomes .obtn:first-child {
  border-color: rgba(22, 131, 250, .68);
  background: linear-gradient(145deg, rgba(5, 67, 135, .46), rgba(4, 29, 55, .82));
}
.featured-main .featured-odd:first-child { color: white; background: var(--zeno-blue); }

.featured-arrow {
  border-radius: 50%;
  border-color: rgba(77, 122, 169, .38);
  background: rgba(4, 16, 28, .96);
}

.featured-news-panel .news-grid { display: grid; grid-template-columns: 1fr; gap: 0; }

.featured-news-panel .news-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 14px 10px 13px 16px;
  border: 0;
  border-top: 1px solid rgba(56, 100, 143, .22);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.featured-news-panel .news-card b { color: #dfe7f1; font-size: 14px; font-weight: 600; }
.featured-news-panel .news-card small { padding-top: 7px; color: #68778c; font-size: 12px; }
.featured-news-panel .news-card:first-child { border-top: 0; }
.news-copy { min-width: 0; flex: 1; }
.news-copy small { display: block; }
.asset-art { display: inline-flex; flex: 0 0 auto; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 50%; color: #b8dcff; font-weight: 700; font-size: 13px; background: #123652; border: 1px solid #244e71; }
.asset-art svg { width: 25px; height: 25px; }
.asset-btc { color: white; background: linear-gradient(140deg,#ffad24,#ff8500); border-color: #ffac30; }
.asset-eth { color: #d0e5ff; background: #183865; border-color: #27518a; }
.asset-sol { color: #6ce5d3; background: #192438; border-color: #374463; }
.asset-xrp { color: white; background: #181f2c; border-color: #384352; }
.asset-doge { color: #fff1c2; background: #9f7b24; border-color: #c4a651; font-size: 25px; }
.asset-hype { color: #82f7d5; background: #103f36; border-color: #236d58; }
.mcard .coin-icon, #detailCoin { padding: 0; border: 0; background: transparent; overflow: visible; }

.explore-toolbar {
  min-height: 62px;
  align-items: flex-end;
  padding-bottom: 10px;
  border-bottom-color: rgba(60, 108, 153, .28);
}

.market-list-title { display: flex; align-items: flex-end; gap: 28px; min-width: 0; }
.market-list-title h2 { padding-bottom: 11px; font-size: 24px; text-transform: none; white-space: nowrap; }
.explore-toolbar .explore-tabs { gap: 18px; }
.explore-toolbar .explore-tabs button { min-height: 44px; font-size: 14px; }

.market-view-controls button {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border-color: rgba(60, 108, 153, .28);
  background: rgba(5, 16, 28, .7);
}

.filter-toggle { width: auto !important; min-width: 88px !important; }

.market-filter-bands { padding: 18px 0 11px; }
.chips button, .filterbar button, .filterbar select {
  min-height: 38px;
  padding: 8px 16px;
  border-color: rgba(54, 101, 147, .34);
  border-radius: 11px;
  background: rgba(3, 14, 25, .7);
  color: #91a0b4;
  font-size: 13px;
}

.chips button.active,
.asset-chips button.active,
.filterbar button.active {
  color: #fff;
  border-color: rgba(37, 142, 255, .7);
  background: var(--zeno-blue);
  box-shadow: 0 10px 24px rgba(8, 108, 255, .17), inset 0 1px rgba(255,255,255,.16);
}

.data-provenance {
  margin: 2px 0 18px;
  padding: 12px 15px;
  border-color: rgba(54, 101, 147, .25);
  border-radius: 12px;
  background: rgba(5, 17, 30, .66);
  font-size: 12px;
}

.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.mcard {
  min-height: 218px;
  padding: 18px;
  border: 1px solid rgba(54, 101, 147, .31);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(6, 20, 34, .97), rgba(3, 13, 23, .99));
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 12px 30px rgba(0,0,0,.2);
}

.mcard-head { gap: 12px; margin-bottom: 14px; }
.mcard .coin-icon {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  border-radius: 50%;
  color: #dcecff;
  background: radial-gradient(circle at 35% 25%, rgba(70, 159, 255, .52), rgba(8, 50, 104, .88));
  border-color: rgba(67, 145, 228, .5);
  font-size: 10px;
}

.mtitle { min-height: 42px; color: #f6f9fe; font-size: 15px; font-weight: 600; line-height: 1.35; }
.market-meta { color: #7e91aa; font-size: 11px; }
.source-tag { color: #8abfff; }

.market-outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.market-outcomes .obtn { min-height: 58px; padding: 10px 12px; border-radius: 11px; font-size: 12px; }
.market-outcomes .obtn b { font-size: 17px; }
.mfoot { margin-top: 15px; padding-top: 13px; color: #8594a8; font-size: 11px; }
.favourite-btn, .details-link { color: #aab9cc; }

/* Market detail and checkout */
#tab-trade.event-open { grid-template-columns: minmax(0, 1fr) minmax(360px, 410px); gap: 22px; }

.detail-card,
.panel,
.orderbook-card,
.orders-card,
.activity-card {
  border-color: rgba(55, 104, 151, .34);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(7, 23, 40, .98), rgba(3, 13, 23, .99));
  box-shadow: var(--zeno-shadow);
}

.detail-cover {
  padding: 28px;
  background:
    radial-gradient(circle at 92% 3%, rgba(14, 105, 255, .22), transparent 23rem),
    linear-gradient(145deg, rgba(6, 33, 63, .88), rgba(3, 14, 25, .94));
}

.detail-top h2 { color: #f8fbff; font-size: clamp(22px, 2vw, 31px); font-weight: 650; }
.detail-top { flex-wrap: wrap; align-items: center; gap: 16px; }
.detail-top > div:not(.share-actions) { flex: 1; min-width: 220px; }
.share-actions { flex: 0 0 auto; align-items: center; gap: 7px; }
.detail-share { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-height: 36px; flex-shrink: 0; }
.detail-share.event-info-trigger { width: auto; padding: 0 12px; white-space: nowrap; font-size: 12px; }
#chartName { max-width: 70%; overflow-wrap: anywhere; }
#chart .chart-empty-label { fill: #95abc3; font-size: 11px; }
.detail-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.detail-stats > div { border-left-color: rgba(57, 102, 145, .28); }
.venue-compare { border-color: rgba(55, 104, 151, .3); background: rgba(3, 13, 23, .7); }
#chartWrap { border: 1px solid rgba(55, 104, 151, .25); border-radius: 14px; background: rgba(2, 11, 20, .58); }

.panel { padding: 22px; }
.panel-headline { margin-bottom: 16px; }
.segbar,
.trade-wallet,
.slippagebox,
.amtin,
.limitrow input { border-color: rgba(55, 104, 151, .32); background: rgba(3, 14, 25, .74); }
.segbar { padding: 4px; }
.segbar button { min-height: 40px; }
.segbar button.active { color: #fff; background: var(--zeno-blue); box-shadow: inset 0 1px rgba(255,255,255,.14); }
.bigbtn.buy, .confirmgo { color: #fff; background: var(--zeno-blue); }

/* Account, confirmation and setup surfaces */
.confirmback,
.trader-modal,
.drawer-backdrop { background: rgba(1, 6, 12, .84); }

.confirmbox,
.trader-dialog,
.profile-drawer,
.mobile-menu {
  border-color: rgba(63, 121, 177, .42);
  background: linear-gradient(145deg, rgba(7, 24, 42, .995), rgba(2, 11, 20, .998));
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 34px 100px rgba(0,0,0,.68);
}

/* Login follows the supplied centered AI Zeno account surface. */
#loginView {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: center;
  place-items: center;
  padding: 36px 18px;
  overflow: hidden;
}

#loginView::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 36%, rgba(10, 104, 235, .17), transparent 28rem),
    linear-gradient(rgba(1, 7, 14, .58), rgba(1, 7, 14, .9));
  pointer-events: none;
}

#loginView .auth-intro { display: none; }

#loginView .card {
  position: relative;
  z-index: 1;
  width: min(650px, 100%);
  margin: 0;
  padding: 34px 48px 36px;
  border: 1px solid rgba(27, 132, 247, .7);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% -15%, rgba(21, 101, 219, .18), transparent 25rem),
    linear-gradient(145deg, rgba(7, 25, 44, .99), rgba(3, 13, 24, .995));
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 34px 100px rgba(0,0,0,.68), 0 0 70px rgba(8,108,255,.08);
}

.auth-card-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
  color: #f7f9fc;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: .045em;
}

.auth-card-brand img { width: 42px; height: 42px; object-fit: contain; }
#loginView .card h2 { margin: 0 0 7px; text-align: center; font-size: 30px; font-weight: 650; color: #f7faff; text-transform: none; letter-spacing: -.02em; }
.authcopy { text-align: center; color: #94a2b5; font-size: 15px; }
.authswitch { margin-top: 22px; border-color: rgba(55, 104, 151, .34); background: rgba(2, 11, 20, .7); }
.authswitch button { min-height: 48px; }
.authswitch button.active { color: #fff; background: var(--zeno-blue); }
#loginView .authswitch button.active, #loginView .bigbtn.buy { color: #fff; background: var(--zeno-blue); }
.auth-field { display: block; margin: 17px 0 0; font-size: 14px; color: #d4deed; }
.auth-field > span:first-child { display: block; margin-bottom: 7px; }
.auth-input-wrap { display: block; position: relative; }
.auth-input-wrap > .ui-icon { position: absolute; top: 16px; left: 15px; width: 18px; height: 18px; color: #7f97b4; }
#loginView .auth-input-wrap input { margin: 0; padding: 13px 46px; width: 100%; background: #04101d; }
.password-toggle { position: absolute; right: 5px; top: 4px; height: 42px; width: 38px; display: grid; place-items: center; color: #90a8c2; }
.password-toggle .ui-icon { width: 19px; height: 19px; }
#loginView .authcopy { margin: 16px 0 20px; }
#loginView #authSubmit { margin-top: 22px; }
#loginView .authprovider { display: flex; align-items: center; justify-content: center; gap: 10px; background: transparent; }
#googleLogin::before { content: "G"; font-family: Arial,sans-serif; color: #70adff; font-size: 20px; font-weight: 700; }
#walletLogin::before { content: ""; width: 20px; height: 16px; border: 1.5px solid currentColor; border-radius: 3px; box-shadow: inset 0 4px 0 #0c2238; }
.profile-drawer:not(.open) { visibility: hidden; }
.drawer-backdrop:not(.open) { visibility: hidden; backdrop-filter: none; -webkit-backdrop-filter: none; }
.profile-drawer.open { visibility: visible; }
#loginView input, .authprovider { min-height: 50px; border-color: rgba(62, 112, 162, .4); border-radius: 11px; font-size: 15px; }
#loginView .bigbtn { min-height: 52px; }
.auth-legal { color: #76859a; font-size: 12px; line-height: 1.55; }
.market-summary > div:nth-child(2) { display: grid; }

@media (max-width: 1400px) {
  header.app-header { padding: 0 22px; }
  nav.tabs { padding: 0 22px; }
  main { padding: 30px 24px 92px; }
  .featured-news-layout { grid-template-columns: minmax(0, 1.65fr) minmax(300px, .7fr); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1120px) {
  .money, .status-pill, .wallet-head { display: none; }
  .featured-news-layout { grid-template-columns: 1fr; }
  .featured-news-panel .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .featured-news-panel .news-card { border: 1px solid var(--line); border-radius: 12px; }
  .market-summary { grid-template-columns: repeat(3, minmax(108px, 1fr)); }
  .market-summary div { min-width: 108px; padding: 13px; }
}

@media (max-width: 820px) {
  .crypto-explore-hero { align-items: flex-start; flex-direction: column; gap: 20px; }
  .market-summary { width: 100%; }
  .market-list-title { align-items: flex-start; flex-direction: column; gap: 0; }
  .explore-toolbar { align-items: flex-end; }
  .cards { grid-template-columns: 1fr; }
  #tab-trade.event-open { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  :root { --header: 62px; }
  body { font-size: 15px; padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  header.app-header { height: 62px; padding: 0 12px; gap: 8px; }
  header.app-header > .brand,
  header.app-header > .mobile-brand { display: none; }
  .market-route-actions { gap: 5px; }
  .market-route-button { width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 11px; }
  .market-route-button > span { display: none; }
  header.app-header .search { max-width: none; min-width: 0; }
  header.app-header .search input { height: 40px; min-height: 40px; font-size: 14px; }
  .header-actions { gap: 6px; }
  .profile-head { width: 40px; min-width: 40px; height: 40px; padding: 0; }
  .profile-head .account-copy { display: none; }
  .notification-head, .deposit-head { display: none; }

  nav.tabs {
    top: auto;
    height: calc(68px + env(safe-area-inset-bottom));
    padding: 6px 7px calc(6px + env(safe-area-inset-bottom));
    gap: 0;
    background: rgba(2, 9, 18, .985);
  }
  nav.tabs button { min-height: 54px; padding: 5px 2px; gap: 3px; font-size: 10px; }
  nav.tabs button .ui-icon { width: 19px; height: 19px; }
  nav.tabs button.active { border: 0; border-radius: 10px; background: rgba(10, 111, 244, .13); }

  main { padding: 22px 14px calc(104px + env(safe-area-inset-bottom)); }
  #exploreView { display: flex; flex-direction: column; }
  .featured-news-layout { display: contents; }
  .featured-market-block { margin-bottom: 22px; }
  .featured-news-panel { order: 10; margin-top: 24px; }
  .crypto-heading { gap: 13px; }
  .crypto-heading-icon { width: 50px; height: 50px; flex-basis: 50px; font-size: 29px; }
  .crypto-explore-hero { margin-bottom: 20px; gap: 17px; }
  .crypto-explore-hero h1 { font-size: 28px; }
  .crypto-explore-hero p { max-width: none; font-size: 14px; }
  .market-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .market-summary div { min-width: 0; padding: 11px 9px; border-radius: 11px; grid-template-columns: minmax(0,1fr); }
  .market-summary .summary-icon { display: none; }
  .market-summary small { font-size: 10px; }
  .market-summary strong { font-size: 16px; }
  .market-summary > div, .market-summary > div:nth-child(2) { display: grid; }

  .featured-market-block, .featured-news-panel { border-radius: 15px; }
  .featured-market-block { padding: 16px 12px 11px; }
  .featured-news-panel { padding: 16px 12px; }
  .section-kicker h2 { font-size: 16px; }
  .section-kicker span { display: none; }
  .featured-rail { padding: 0 0 24px; }
  .featured-track { min-height: 270px; }
  .featured-card.featured-main { min-height: 270px; padding: 6px 0 0; }
  .featured-title { gap: 12px; padding-bottom: 18px; }
  .featured-title .asset-art { width: 46px; height: 46px; }
  .featured-title .asset-art svg { width: 28px; height: 28px; }
  .featured-title h2 { font-size: 21px; }
  .featured-main h2 { font-size: 20px; }
  .featured-news-panel .news-grid { display: grid; grid-template-columns: 1fr; }
  .featured-news-panel .news-card { min-height: 74px; border-width: 1px 0 0; border-radius: 0; }
  .featured-news-panel .news-card:first-child { border-top: 0; }

  .market-list-title h2 { padding-bottom: 0; font-size: 21px; }
  .explore-toolbar { min-height: 86px; gap: 8px; }
  .explore-toolbar .explore-tabs { gap: 14px; }
  .market-view-controls .filter-toggle { height: 40px; min-height: 40px; }
  .market-filter-bands { gap: 10px; }
  .chips button { min-height: 36px; padding: 7px 13px; }
  .data-provenance { align-items: flex-start; flex-direction: column; gap: 5px; }
  .data-provenance .freshness { margin-left: 0; }
  .mcard { min-height: 0; padding: 16px; }

  .detail-cover { padding: 20px; }
  #chartCard { scroll-margin-top: 76px; }
  #chart .axis { font-size: 18px; }
  #chart .chart-empty-label { font-size: 18px; }
  .detail-top { gap: 12px; }
  .detail-top > div:not(.share-actions) { min-width: 0; }
  .share-actions { flex-basis: 100%; margin-top: 6px; }
  .detail-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-stats > div:nth-child(3) { border-left: 0; }
  .panel { padding: 18px; }

  #loginView { padding: 18px 12px; }
  #loginView .card { width: 100%; padding: 27px 20px 25px; border-radius: 16px; }
  #loginView .card h2 { font-size: 25px; }
  .auth-card-brand { margin-bottom: 14px; font-size: 17px; }
  .auth-card-brand img { width: 36px; height: 36px; }
}

@media (max-width: 430px) {
  .market-summary { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .market-summary div:last-child { grid-column: auto; }
  .featured-news-layout { gap: 13px; }
  .mfoot { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Reference composition: Crypto Selected Page / Crypto Internal Page.
   Keep this layout independent of the venue/account execution implementation. */
:root { --bg: #030c11; --card: #04121d; --line: #102637; --dim: #7d8b9e; --zeno-blue: linear-gradient(112deg,#0058ff,#009cec); }
body { background: var(--bg); }
body::before { display: none; }
header.app-header, nav.tabs { background: #040d14; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
main { max-width: 1920px; padding: 24px 3.6vw 80px; }
header.app-header, nav.tabs { padding-left: 3.6vw; padding-right: 3.6vw; }
header.app-header > .brand { width: 184px; min-width: 184px; --brand-text-size: 18px; }
header.app-header .search { max-width: none; flex: 1; }
.search input { border-radius: 9px; }
.brand-logo-frame span { letter-spacing: .015em; }
.status-pill { display: none; }
#exploreView { display: flex; flex-direction: column; }
.market-filter-bands { order: -1; margin: 0 0 22px; padding: 0; border: 0; gap: 18px; }
.market-filter-band { min-width: max-content; flex: 0 0 auto; }
.chips { gap: 8px; }
.chips button { border-radius: 8px; background: #04111a; min-height: 38px; font-size: 13px; padding: 6px 17px; }
.chips button.active { color: white; background: var(--zeno-blue); border-color: #007cfc; }
.crypto-explore-hero { justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.crypto-heading { flex: 1 1 auto; gap: 17px; }
.crypto-heading-icon { background: #ff9314; box-shadow: none; width: 62px; height: 62px; flex-basis: 62px; font-family: Arial,sans-serif; transform: rotate(12deg); }
.crypto-explore-hero h1 { font-size: clamp(27px,2.1vw,38px); letter-spacing: -.015em; font-weight: 700; }
.crypto-explore-hero p { font-size: 14px; margin: 0; }
.market-summary { display: grid !important; flex: 0 1 45%; gap: 12px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.market-summary > div { min-width: 0; padding: 13px 12px; border-radius: 5px; background: #04111a; grid-template-columns: 35px minmax(0,1fr); gap: 0 10px; }
.market-summary > div:nth-child(2) { display: grid; }
.market-summary small { white-space: nowrap; font-size: 11px; }
.market-summary strong { font-size: 20px; }
.market-summary .summary-icon { display: block; padding: 7px; width: 35px; height: 43px; border: 1px solid #073866; border-radius: 10px; }
.featured-news-layout { grid-template-columns: minmax(0,1.93fr) minmax(290px,1fr); gap: 14px; margin-bottom: 18px; }
.featured-market-block, .featured-news-panel { background: #021420; border-radius: 6px; box-shadow: none; padding: 16px 18px; }
.featured-market-block { border-color: #073154; }
.section-kicker { margin-bottom: 12px; }
.section-kicker h2 { font-size: 17px; font-weight: 700; color: #bac4d0; }
.section-kicker > span { display: none; }
.featured-rail { padding: 0 0 14px; }
.featured-track, .featured-track.sparse-one { min-height: 0; }
.featured-card.featured-main { display: block; min-height: 0; padding: 0; border-radius: 0; background: none; border: 0; box-shadow: none; }
.featured-heading { display: flex; align-items: flex-start; gap: 12px; }
.featured-title { flex: 1; width: auto; min-width: 0; gap: 18px; padding: 4px 0 0; align-items: center; }
.featured-title h2, .featured-main h2 { font-size: clamp(19px,1.55vw,28px); line-height: 1.25; font-weight: 700; letter-spacing: -.01em; margin: 0; color: #d4dce7; }
.featured-title .asset-art { width: 66px; height: 66px; flex-basis: 66px; }
.featured-save { color: #c9dbee; width: 30px; min-width: 30px; font-size: 29px; padding: 0; line-height: 1; }
.featured-metadata { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; color: #8298ae; margin: 0 0 14px 84px; font-size: 12px; }
.featured-metadata .featured-ending { display:inline-flex;align-items:center;padding:3px 7px;border:1px solid #28527c;border-radius:7px;
  background:rgba(20,62,105,.28);color:#9acbff;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap; }
.featured-metadata .ui-icon { width: 17px; height: 17px; }
.featured-title > .featured-copy { display: block; flex: 1; min-width: 0; color: inherit; }
.featured-copy .featured-metadata { margin: 10px 0 0; }
.featured-heading { margin-bottom: 14px; }
.featured-analysis { display: grid; grid-template-columns: minmax(120px,.8fr) minmax(0,1.65fr); gap: 18px; align-items: center; }
.featured-probability { border: 1px solid #082b47; border-radius: 4px; padding: 14px; text-align: center; display: flex; flex-direction: column; gap: 3px; }
.featured-probability strong { color: #c1d1e4; font-size: 32px; line-height: 1.1; font-weight: 700; }
.featured-probability b { font-size: 14px; color: #acb7c8; }
.featured-probability small { font-size: 11px; color: #728499; }
.featured-history { min-width: 0; }
.featured-history .featured-history-source { display:block;margin-top:2px;color:#8298ae;font-size:10px;line-height:1.3;text-align:right; }
.featured-history svg { display: block; width: 100%; min-height: 120px; overflow: visible; }
.featured-history line { stroke: #133044; stroke-width: 1; }
.featured-history .featured-history-fill { fill: rgba(35, 139, 242, .12); stroke: none; }
.featured-history .featured-history-line { fill: none; stroke: #278ff8; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: none; }
.featured-history .featured-history-last { fill: #eef8ff; stroke: #278ff8; stroke-width: 1.7; }
.featured-history text { fill: #79899b; font: 12px Urbanist,sans-serif; }
.featured-bottom { display: grid; grid-template-columns: minmax(210px,1fr) minmax(0,1.15fr); gap: 18px; align-items: end; margin-top: 12px; }
.featured-odds { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 0; }
.featured-main .featured-odd { min-height: 64px; border-radius: 6px; padding: 8px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; }
.featured-odd span { font-size: 13px; }
.featured-odd b { font-size: 25px; line-height: 1.15; }
.featured-footer { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 0 0 6px; margin: 0; border: 0; justify-content: flex-start; font-size: 11px; color: #95abc3; }
.featured-footer > span:last-child { color: #159cdf; }
.featured-arrow { bottom: -21px; width: 24px; height: 24px; min-height: 24px; padding: 0; box-sizing: border-box; }
.featured-arrow .ui-icon { display: block; margin: 0; pointer-events: none; }
.featured-market-block, .featured-rail { overflow-x: hidden; overflow-x: clip; }
.featured-track { touch-action: pan-y; overflow-x: hidden; overflow-x: clip; min-width: 0; max-width: 100%; }
.featured-track, .mcard { overscroll-behavior-x: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.featured-card, .mcard { contain: paint; touch-action: pan-y; overflow: hidden; }
.featured-card *, .mcard * { -webkit-user-drag: none; }
.featured-card, .featured-title, .featured-copy, .mcard, .market-copy { min-width: 0; }
.featured-title h2, .mtitle { overflow-wrap: anywhere; }
.featured-track.featured-dragging, .featured-track.featured-dragging * { user-select: none; -webkit-user-select: none; cursor: grabbing; }
.featured-dots { bottom: -12px; gap: 6px; }
.featured-dots button { width: 5px; height: 5px; min-height: 5px; }
.featured-news-panel .news-card { padding: 10px 0; min-height: 72px; gap: 14px; align-items: center; }
.featured-news-panel .news-card .asset-art { width: 56px; height: 56px; flex-basis: 56px; }
.news-copy b { font-size: 13px; font-weight: 650; line-height: 1.3; }
.news-copy small { margin-top: 5px; font-size: 12px; color: #72869c; }
.featured-news-panel .news-card .news-copy { display: flex; flex-direction: column; gap: 4px; }
.featured-news-panel .news-card .news-copy b { display: block; margin: 0; font-size: 13px; line-height: 1.35; }
.featured-news-panel .news-card .news-copy small { display: block; margin: 0; padding: 0; font-size: 11px; line-height: 1.4; }
.featured-news-panel .news-card { content-visibility: visible; contain-intrinsic-size: none; }
.news-artwork { width: 61px; height: 61px; flex: 0 0 61px; display: block; overflow: hidden; border-radius: 8px; }
.news-artwork svg { width: 100%; height: 100%; display: block; }
.asset-art.original-art { border: 0; background: transparent; box-shadow: none; padding: 0; overflow: hidden; border-radius: 50%; }
.asset-art.original-art svg { width: 100%; height: 100%; display: block; }
.mcard { border-radius: 9px; padding: 14px 16px; background: #05121a; box-shadow: none; border-color: #12232f; min-height: 0; }
.cards { gap: 10px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.mcard-head { margin-bottom: 10px; gap: 12px; }
.mcard .coin-icon, .mcard .asset-art { width: 42px; height: 42px; flex-basis: 42px; }
.mcard .coin-icon { background: none; border: 0; padding: 0; }
.mtitle { font-size: 14px; font-weight: 650; line-height: 1.28; min-height: 36px; }
.mcard .mtitle { min-height: 36px; margin: 0; }
.market-meta { color:#a9bed2;font-size: 11px;font-weight:650; margin-bottom: 5px; }
.market-outcomes .obtn { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 49px; padding: 6px; gap: 0; border-radius: 6px; font-size: 12px; }
.market-outcomes .obtn small { display:block;margin-top:2px;color:#b1c9dc;font-size:10px;font-weight:620;line-height:1.1; }
.market-outcomes .obtn b { font-size: 17px; }
.mfoot { margin-top: 10px; padding: 0; border: 0; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; }
.mfoot-group { gap: 12px; }
.favourite-btn { font-size: 24px; }
.explore-toolbar { border: 0; align-items: center; min-height: 42px; padding: 0; margin-bottom: 14px; gap: 18px; }
.market-list-title { gap: 20px; align-items: center; }
.market-list-title h2 { font-size: 21px; padding: 0; }
.market-search { display: flex; align-items: center; position: relative; max-width: 240px; }
.market-search .ui-icon { position: absolute; left: 12px; width: 18px; height: 18px; color: #abc5df; }
.market-search input { width: 100%; min-width: 0; height: 38px; min-height: 38px; padding: 7px 12px 7px 39px; background: #03111a; border: 1px solid #112938; border-radius: 5px; color: #b5c8d9; font-size: 13px; }
.market-view-controls #screenSort { width: 138px; min-height: 38px; background: #03111a; border: 1px solid #112938; border-radius: 5px; color: #aabdcf; padding: 6px 10px; font-size: 12px; }
.explore-tabs button { font-size: 12px; }
.data-provenance { border: 0; padding: 0; margin: 0 0 12px; background: none; font-size: 10px; }
#tab-trade.event-open { grid-template-columns: minmax(0,2.2fr) minmax(300px,1fr); gap: 18px; }
.detail-card, .panel, .orderbook-card, .orders-card { background: #021420; border-radius: 6px; box-shadow: none; border-color: #08283e; }
.detail-cover { padding: 18px 20px 8px; background: none; }
.detail-top { gap: 16px; }
.detail-top #detailCoin, #detailCoin .asset-art { width: 74px; height: 74px; flex-basis: 74px; }
.detail-top h2 { font-size: clamp(22px,1.65vw,31px); font-weight: 700; margin: 0 0 10px; }
.detail-top .eyebrow { color: #6e90ac; font-size: 10px; margin-bottom: 6px; }
.share-actions { gap: 4px; }
.detail-share { border: 0; border-radius: 4px; }
.detail-share.event-info-trigger { font-size: 11px; padding: 0 7px; }
.venue-compare { margin: 6px 20px 18px; background: none; border: 0; padding: 0; }
.venue-line { grid-template-columns: minmax(90px,.6fr) repeat(2,minmax(0,1fr)); gap: 12px; padding: 8px 0; }
.venue-state { grid-column: 1 / -1; text-align: right; font-size: 10px; }
.venue-compare-head { display: none; }
.venue-price { min-height: 64px; border-radius: 4px; background: #04111e; flex-direction: column; gap: 2px; }
.venue-price b { font-size: 27px; }
.venue-price.selected-outcome { border-color: #0089ce; background: #032440; }
.best-badge { font-size: 8px; margin-left: 6px; }
.chart-section-label { color: #abbccc; padding: 0; margin: 0 20px; }
.chart-section-label b { font-size: 20px; text-transform: none; letter-spacing: 0; font-weight: 700; }
#chartWrap { margin: 0 20px; border-radius: 0; border: 0; background: none; }
#chartCard .chead { margin: 10px 20px; }
#chartName { font-size: 11px; }
.ivals button { min-height: 29px; border-radius: 4px; }
.ivals button.active { color: white; background: var(--zeno-blue); }
.detail-stats { margin: 22px 20px; gap: 0; }
.detail-stats > div { position: relative; padding: 0 12px 0 43px; min-width: 0; }
.detail-stats .ui-icon { position: absolute; left: 12px; top: 8px; width: 23px; height: 27px; color: #a7c4df; }
.detail-stats small { font-size: 11px; text-transform: none; }
.detail-stats b { font-size: 20px; }
.detail-tabs { background: var(--bg); padding: 0; margin: 0; gap: 22px; overflow-x: auto; }
.detail-tabs button { min-height: 48px; flex: 0 0 auto; font-size: 13px; }
.detail-body { background: var(--bg); padding: 12px 0 0; }
.overview-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 12px; }
.overview-panel { padding: 16px; background: #021420; border: 1px solid #102a40; border-radius: 3px; min-width: 0; }
.overview-panel h3 { color: #aebfce; font-size: 16px; margin: 0 0 14px; }
.overview-panel p { color: #8497ad; font-size: 12px; line-height: 1.55; margin: 0 0 12px; }
.resolution-source { border-top: 1px solid #1b344a; padding-top: 12px; }
.resolution-source small { color: #8fa4b9; font-size: 11px; }
.overview-panel .insight-unavailable { color: #139dda; font-weight: 600; }
.insight-metrics { display: flex; flex-wrap: wrap; gap: 8px; }
.insight-metrics span { border: 1px solid #073a60; color: #7793b0; font-size: 11px; padding: 7px; }
.insight-metrics b { color: #029bdf; margin-left: 12px; }
.panel { padding: 18px; }
.panel-headline .eyebrow { font-size: 21px; font-weight: 700; color: #b5c6d6; letter-spacing: 0; text-transform: none; }
.panel .segbar { border-radius: 5px; padding: 0; min-height: 42px; }
.panel .segbar button { border-radius: 5px; min-height: 42px; font-size: 16px; }
.trade-wallet { padding: 8px 0; margin-bottom: 10px; border: 0; background: none; box-shadow: none; font-size: 10px; }
.panel #selTitle { font-size: 12px; line-height: 1.4; margin-bottom: 3px; }
.panel #selSub { font-size: 11px; margin-bottom: 12px; }
.panel .obtn { border-radius: 4px; min-height: 60px; align-items: center; flex-direction: column; }
.panel .obtn b { font-size: 25px; }
.panel .obtn { display: flex; justify-content: center; align-items: center; gap: 0; }
.panel .obtn.up.sel, .panel .obtn.down.sel { border-color: #0094d7; background: #032440; color: #c7e4ff; }
.panel #selTitle { display: none; }
.panel #selSub { margin: 10px 0; color: #96acc1; }
.trade-account-details { color: #8495aa; font-size: 11px; margin: 0 0 12px; }
.trade-account-details summary { cursor: pointer; }
.panel .order-type-field { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin: 18px 0 12px; color: #97a9bd; font-size: 14px; }
.order-type-field select { min-width: 0; width: 66%; min-height: 38px; padding: 6px 12px; color: #c2cede; background: #04131f; border: 1px solid #0e304a; border-radius: 4px; font-size: 15px; }
.amount-label { display: block; margin-bottom: 6px; color: #97a9bd; font-size: 14px; }
.panel .amtin { font-size: 23px; min-height: 48px; font-weight: 650; }
.panel .amts { margin-top: 9px; gap: 8px; }
.panel .amts button { min-height: 35px; padding: 4px; font-size: 13px; }
.panel .sell-available { margin-top: -1px; color: var(--dim); font-size: 11px; line-height: 1.3; }
.panel .slippagebox { margin-top: 14px; }
#chart .grid { stroke: #14344b; }
.amtin, .slippagebox, .amts button { border-radius: 4px; }
.bigbtn.buy { border-radius: 5px; }
.auth-backdrop { position: fixed; inset: 0; background: #030c11 url('assets/design/market-backdrop.png') center top / cover no-repeat; opacity: .55; pointer-events: none; }
#loginView::before { position: fixed; z-index: 1; background: rgba(0,5,10,.48); }
#loginView { min-height: 100dvh; padding: 94px 20px 36px; overflow: visible; }
#loginView .card { z-index: 3; width: min(560px,100%); padding: 28px 44px 30px; border-radius: 14px; background: linear-gradient(130deg,rgba(3,21,39,.99),rgba(2,14,25,.99)); box-shadow: 0 20px 70px #0009; }
#loginView .card h2 { font-size: 27px; letter-spacing: -.02em; margin-bottom: 5px; }
.auth-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; min-height: 32px; border: 1px solid #355977; border-radius: 50%; background: #10263b; color: #c4d7eb; font-size: 24px; }
#loginView .authcopy { margin: 0 0 18px; font-size: 15px; color: #a9bbd2; }
.auth-card-brand { margin-bottom: 16px; font-size: 22px; }
.auth-card-brand img { width: 40px; height: 40px; }
.authswitch { margin: 0 0 18px; border-radius: 8px; }
.authswitch button { min-height: 42px; font-size: 17px; }
.auth-field { margin-top: 14px; font-size: 14px; }
#loginView .auth-input-wrap input { border: 1px solid #345671; border-radius: 7px; min-height: 46px; padding: 10px 43px; font-size: 15px; }
.auth-input-wrap > .ui-icon { top: 13px; }
.password-toggle { top: 2px; }
#loginView #authSubmit { margin-top: 20px; min-height: 47px; font-size: 18px; }
.authdivider { margin: 18px 0; }
#loginView .authprovider { border: 1px solid #006fac; border-radius: 7px; min-height: 44px; font-size: 15px; }
.auth-legal { font-size: 11px; margin: 16px 0 0; }
.auth-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: #bdcddd; margin-top: 17px; }
#loginView .auth-consent input { width: 17px; min-height: 17px; height: 17px; margin: 2px 0 0; flex: 0 0 17px; accent-color: #008bff; }
.auth-consent a { color: #009dec; }
.auth-landing-header { position: absolute; top: 0; left: 0; right: 0; z-index: 2; height: 72px; padding: 12px 3.6vw; display: flex; align-items: center; justify-content: space-between; background: #030c11; }
.auth-landing-header .auth-card-brand { margin: 0; font-size: 20px; }
.auth-landing-header > div { display: flex; gap: 10px; }
.auth-landing-header button { padding: 7px 22px; border: 1px solid #0b5793; border-radius: 8px; }
.auth-landing-signup { background: var(--zeno-blue); }
.auth-backdrop-note { position: fixed; bottom: 8px; left: 12px; z-index: 2; font-size: 10px; color: #9eb3c8; }
#loginView.auth-dismissed .card, #loginView.auth-dismissed::before { display: none; }
@media (max-width: 1120px) {
  .crypto-explore-hero { flex-direction: column; align-items: stretch; }
  .market-filter-bands { flex-direction: column; overflow: visible; gap: 8px; }
  .market-filter-band { width: 100%; min-width: 0; padding: 0; gap: 8px; }
  .market-filter-band + .market-filter-band { padding: 0; border: 0; }
  .market-filter-band .filter-label { display: block; width: 46px; flex: 0 0 46px; font-size: 9px; }
  .market-filter-band .chips { flex: 1; min-width: 0; overflow-x: auto; }
  .market-summary { width: 100%; flex: auto; }
  .featured-news-layout { grid-template-columns: minmax(0,1.7fr) minmax(245px,1fr); }
  .featured-news-panel .news-grid { grid-template-columns: 1fr; gap: 0; }
  .featured-news-panel .news-card { border-width: 1px 0 0; border-radius: 0; }
  .featured-title h2 { font-size: 19px; }
  .featured-bottom { grid-template-columns: 1fr; gap: 12px; }
  .featured-news-panel .news-card .asset-art { width: 42px; height: 42px; flex-basis: 42px; }
  .market-list-title { align-items: flex-start; flex-direction: column; gap: 4px; }
  .market-search { max-width: 170px; }
  .cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 820px) {
  #tab-trade.event-open { grid-template-columns: 1fr; }
  .featured-news-layout { grid-template-columns: 1fr; }
  .featured-news-panel .news-grid { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 20px; }
}
@media (max-width: 720px) {
  main { padding: 18px 14px 106px; }
  header.app-header { padding: 0 12px; }
  nav.tabs { padding-left: 6px; padding-right: 6px; }
  .market-filter-bands { order: -1; gap: 8px; margin-bottom: 20px; }
  .market-filter-bands { flex-direction: column; overflow: visible; }
  .market-filter-band { width: 100%; min-width: 0; padding: 0; gap: 8px; }
  .market-filter-band + .market-filter-band { padding: 0; border: 0; }
  .market-filter-band .filter-label { display: block; width: 46px; flex: 0 0 46px; font-size: 9px; }
  .market-filter-band .chips { flex: 1; min-width: 0; overflow-x: auto; }
  .chips button { min-height: 34px; padding: 5px 13px; font-size: 12px; }
  .crypto-explore-hero { gap: 16px; margin-bottom: 18px; }
  .crypto-heading-icon { width: 48px; height: 48px; flex-basis: 48px; font-size: 32px; }
  .crypto-explore-hero h1 { font-size: 25px; }
  .crypto-explore-hero p { font-size: 12px; }
  .market-summary { gap: 6px; }
  .market-summary > div { padding: 10px 8px; grid-template-columns: minmax(0,1fr); }
  .market-summary .summary-icon { display: none; }
  .market-summary small { font-size: 10px; }
  .market-summary strong { font-size: 17px; }
  .featured-market-block { padding: 16px 14px; }
  .featured-title { gap: 12px; }
  .featured-title .asset-art { width: 48px; height: 48px; flex-basis: 48px; }
  .featured-title h2 { font-size: 18px; }
  .featured-metadata { margin: 10px 0 14px; gap: 10px; font-size: 10px; }
  .featured-analysis { grid-template-columns: minmax(75px,.65fr) minmax(0,1.6fr); gap: 8px; }
  .featured-probability { padding: 10px 4px; }
  .featured-probability strong { font-size: 26px; }
  .featured-probability small { font-size: 9px; }
  .featured-history svg { min-height: 108px; }
  .featured-history text { font-size: 11px; }
  .featured-bottom { gap: 12px; }
  .featured-footer { font-size: 10px; }
  .featured-news-panel .news-grid { grid-template-columns: 1fr; }
  .featured-news-panel .news-card .asset-art { width: 50px; height: 50px; flex-basis: 50px; }
  .cards { grid-template-columns: 1fr; }
  .mcard { padding: 14px; }
  .mtitle { font-size: 15px; }
  .market-outcomes .obtn { min-height: 54px; }
  .market-outcomes .obtn b { font-size: 20px; }
  .mfoot { flex-direction: row; font-size: 11px; }
  .explore-toolbar { margin: 10px 0; }
  .market-list-title h2 { font-size: 18px; }
  .market-view-controls { gap: 4px; }
  .explore-toolbar { flex-wrap: wrap; }
  .market-view-controls { flex-wrap: wrap; width: 100%; justify-content: flex-start; }
  .market-search { flex: 1; max-width: none; min-width: 120px; }
  .market-view-controls #screenSort { width: 107px; font-size: 11px; }
  .market-view-controls .filter-toggle { min-width: 40px; }
  .market-view-controls .view-button { display: none; }
  .detail-cover { padding: 18px 14px 8px; }
  .detail-top #detailCoin, #detailCoin .asset-art { width: 50px; height: 50px; flex-basis: 50px; }
  .detail-top h2 { font-size: 21px; }
  .venue-compare { margin: 8px 14px 16px; }
  .venue-line { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .venue-main { grid-column: 1 / -1; }
  .venue-state { text-align: left; }
  #chartWrap, #chartCard .chead, .chart-section-label { margin-left: 14px; margin-right: 14px; }
  .chart-section-label { flex-direction: column; align-items: flex-start; gap: 4px; }
  .chart-section-label b { font-size: 19px; }
  .detail-stats { margin: 18px 10px; row-gap: 16px; }
  .detail-stats b { font-size: 18px; }
  .detail-stats small { font-size: 10px; }
  .overview-grid { grid-template-columns: 1fr; }
  .detail-tabs { gap: 16px; }
  #loginView { padding: 88px 12px 34px; align-items: start; }
  #loginView .card { padding: 28px 22px; }
  #loginView .card h2 { font-size: 23px; }
  .auth-landing-header .auth-card-brand { font-size: 12px; gap: 5px; }
  .auth-landing-header .auth-card-brand img { width: 28px; height: 28px; }
  .auth-landing-header button { padding: 6px 10px; font-size: 12px; }
  .auth-card-brand { font-size: 19px; }
  .auth-close { top: 9px; right: 9px; }
}
@media (max-width: 430px) {
  .featured-analysis { grid-template-columns: 1fr; gap: 12px; }
  .featured-probability { flex-direction: row; align-items: center; justify-content: center; gap: 10px; padding: 12px 8px; }
  .featured-probability small { font-size: 10px; }
  .featured-history svg { min-height: 0; width: 100%; }
  .featured-history text { font-size: 11px; }
  .featured-history { padding-left: 0; }
  .featured-history .minor-time-tick { display: none; }
}
@media (min-width: 1441px) {
  .section-kicker h2 { font-size: 21px; }
  .market-summary > div { padding: 18px; grid-template-columns: 52px minmax(0,1fr); gap: 0 14px; }
  .market-summary .summary-icon { width: 52px; height: 56px; padding: 10px; }
  .market-summary small { font-size: 14px; }
  .market-summary strong { font-size: 26px; }
  .crypto-explore-hero p { font-size: 17px; }
  .featured-title .asset-art { width: 80px; height: 80px; flex-basis: 80px; }
  .featured-title h2 { font-size: 25px; max-width: 580px; }
  .featured-metadata { font-size: 14px; }
  .featured-probability strong { font-size: 38px; }
  .featured-footer { font-size: 14px; }
  .featured-odd span { font-size: 16px; }
  .featured-odd b { font-size: 30px; }
  .featured-news-panel .news-card { min-height: 90px; gap: 20px; }
  .featured-news-panel .news-card .news-copy b { font-size: 17px; }
  .featured-news-panel .news-card .news-copy small { font-size: 14px; }
  .news-artwork { width: 82px; height: 70px; flex-basis: 82px; }
  .mcard .asset-art { width: 50px; height: 50px; flex-basis: 50px; }
  .mcard .mtitle { font-size: 18px; min-height: 42px; }
  .market-outcomes .obtn { font-size: 15px; }
  .market-outcomes .obtn b { font-size: 22px; }
  .mfoot { font-size: 13px; }
}

/* Detail composition from Crypto - Internal Page. Existing trade controls and
   venue routing remain in place; supplementary execution data stays labelled. */
.event-breadcrumb { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; min-height: 24px; color: #7892ab; font-size: 13px; }
.event-breadcrumb button { padding: 0; border: 0; min-height: 24px; background: none; font-size: inherit; color: #a3b6c9; }
.event-breadcrumb .event-back { margin: 0; }
.detail-card { border: 0; overflow: visible; }
.detail-cover { padding: 18px 18px 8px; }
.detail-heading-copy { flex: 1; min-width: 0; }
.detail-top { align-items: flex-start; flex-wrap: wrap; gap: 12px 16px; }
.detail-top h2 { margin-bottom: 7px; font-size: clamp(22px,1.65vw,32px); font-weight: 720; line-height: 1.2; }
.detail-top .eyebrow { color:#9fc6e8;font-size: 10px;font-weight:750;letter-spacing:.09em;margin-bottom: 6px; }
.detail-metadata { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; color: #bdd1e3; font-size: 12px;font-weight:600; }
.detail-metadata > span { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.detail-metadata .ui-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.detail-market-state { color: #00bd9a; }
.detail-market-state::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.detail-market-state.is-closed { color: #98a6b5; }
.share-actions { flex-wrap: wrap; justify-content: flex-end; max-width: 130px; }
.detail-secondary-actions { max-width:none;margin:3px 18px 10px; }
.detail-share.event-info-trigger { width:32px;padding:0;font-size:18px; }
.detail-inline-insight { flex:0 1 310px;min-width:240px;display:grid;gap:5px;padding:10px 12px;
  border:1px solid #275178;border-radius:10px;background:linear-gradient(120deg,#0c2137,#081725);
  box-shadow:inset 0 1px #ffffff12; }
.detail-insight-head { display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap; }
.detail-insight-head strong { color:#92c9ff;font-size:12px;font-weight:760;white-space:nowrap; }
.detail-inline-insight p { margin:0;color:#f3f8ff;font-size:13px;font-weight:580;line-height:1.4; }
.detail-inline-insight small { color:#bfcee0;font-size:11px;font-weight:530;line-height:1.38; }
.detail-inline-insight small[hidden] { display:none; }
.detail-venue-tabs { display:none; }
.market-inline-insight { display:flex;align-items:baseline;gap:7px;margin:7px 0 9px;padding:7px 9px;
  border-left:2px solid #378fe8;border-radius:0 6px 6px 0;background:#0b2034;min-width:0; }
.market-inline-insight strong { flex:none;color:#9bcfff;font-size:11px;font-weight:760;white-space:nowrap; }
.market-inline-insight span { min-width:0;color:#d9e7f5;font-size:12px;font-weight:560;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.market-inline-insight[hidden] { display:none; }
.featured-inline-insight { margin:0 0 8px; }
#appView .mcard .market-inline-insight { margin:8px 0 10px; }
body.light .detail-inline-insight,body.light .market-inline-insight { background:#ecf5ff;border-color:#9ec7ef; }
body.light .detail-insight-head strong,body.light .market-inline-insight strong { color:#075aab; }
body.light .detail-inline-insight p,body.light .market-inline-insight span { color:#153551; }
body.light .detail-inline-insight small { color:#3b5976; }
.venue-compare { margin: 0 18px 14px; }
.venue-line { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px 14px; padding: 8px 0 0; }
.venue-line + .venue-line { margin-top: 8px; }
.venue-main { grid-column: 1; display: flex; align-items: center; gap: 7px; }
.venue-main > span:last-child { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.venue-main .venue-source { font-size: 10px; }
.venue-main .venue-logo { width: 20px; height: 20px; min-width: 20px; font-size: 8px; }
.venue-state { position: static; margin: 0; grid-column: 2; align-self: center; font-size: 10px; text-align: right; white-space: normal; }
.venue-price { flex-direction: row; min-height: 68px; gap: 0; padding: 8px 4px; }
.trade-rail > .panel { position: relative; top: auto; z-index: auto; }
.venue-price-value { display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; }
.venue-price-value b { font-size: 29px; line-height: 1.15; }
.venue-probability { display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: center; gap: 5px; border-left: 1px solid #13374f; color: #90acc4; }
.venue-probability b { font-size: 17px; }
.venue-probability small { font-size: 11px; }
.chart-section-label { flex-direction: row; align-items: center; justify-content: space-between; margin: 0 18px; padding: 14px 0 0; border-top: 1px solid #123049; gap: 12px; }
.chart-section-label .ivals { margin: 0; flex: 0 0 auto; }
.chart-section-label .ivals button { min-width: 37px; font-size: 12px; }
.chart-section-heading { display:grid;gap:5px;min-width:0; }
.chart-mode-switch { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin:16px 18px 0;padding:4px;
  border:1px solid #29425b;border-radius:11px;background:#071522; }
.chart-mode-switch button { min-height:38px;border:1px solid transparent;border-radius:8px;background:transparent;
  color:#9cb4ca;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:background .15s,color .15s,border-color .15s; }
.chart-mode-switch button.active { border-color:#3675b9;background:linear-gradient(110deg,#104482,#0876b7);color:#fff; }
.chart-mode-switch button:focus-visible { outline:2px solid #7cc9ff;outline-offset:2px; }
.chart-mode-panel[hidden] { display:none!important; }
#probabilityPanel { padding-top:8px; }
.asset-price-panel { margin:8px 18px 0;padding:10px 0 20px;border:0;border-radius:0;
  background:transparent;min-width:0; }
.asset-price-head { display:grid;gap:10px; }
#assetPriceStatus { color:#ffd38a;font-size:11px;white-space:nowrap;font-weight:760;letter-spacing:.05em; }
.asset-price-head-actions { grid-row:1;display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0; }
#assetPriceEnding { color:#c3d8ea;font-size:11px;font-weight:600;white-space:nowrap; }
.asset-price-metrics { grid-row:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  margin:0 0 3px;padding-bottom:12px;border-bottom:1px solid #273441; }
.asset-price-metrics>div { min-width:0; }
.asset-price-metrics>div:first-child { padding-right:12px;border-right:1px solid #273441; }
.asset-price-metrics>div:nth-child(2) { padding-left:12px; }
.asset-price-metrics small { display:block;color:#bfd0e1;font-size:12px;font-weight:590;line-height:1.3; }
.asset-price-metrics b { display:block;margin-top:3px;color:#f2f7ff;font-size:14px;font-variant-numeric:tabular-nums;letter-spacing:-.015em; }
#assetLivePrice { color:#ffc879;font-size:clamp(21px,2.1vw,28px);font-weight:750;letter-spacing:-.035em; }
#assetLivePrice,#tradeAssetLivePrice { font-variant-numeric:tabular-nums;white-space:nowrap; }
.price-digit { display:inline-block;position:relative;min-width:0;line-height:1.12;vertical-align:baseline; }
.price-digit.is-changing,.price-digit.is-entering { overflow:hidden;vertical-align:-.13em;height:1.12em; }
.price-digit.is-changing::before { content:attr(data-old);position:absolute;inset:0;animation:price-digit-out .38s cubic-bezier(.28,.8,.23,1) both!important; }
.price-digit.is-changing>span,.price-digit.is-entering>span { display:block;animation:price-digit-in .38s cubic-bezier(.28,.8,.23,1) both!important; }
@keyframes price-digit-out { from { transform:translateY(0);opacity:1; } to { transform:translateY(-105%);opacity:.45; } }
@keyframes price-digit-in { from { transform:translateY(105%);opacity:.45; } to { transform:translateY(0);opacity:1; } }
@media (prefers-reduced-motion:reduce) { .price-digit.is-changing::before { content:none;animation:none!important; } .price-digit.is-changing>span,.price-digit.is-entering>span { animation:none!important; } }
#assetTargetPrice { color:#e7edf5;font-size:clamp(19px,1.8vw,25px);font-weight:710; }
#assetPriceDifference { display:inline-block;margin-top:3px;font-size:11px;font-variant-numeric:tabular-nums; }
#assetPriceDifference.pos { color:#43d6aa; } #assetPriceDifference.neg { color:#f98698; }
.withdrawal-consent { width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 40px);box-sizing:border-box;overflow:auto;
  padding:24px;border:1px solid #254b63;border-radius:22px;background:#07131e;color:#edf6fa;
  font-family:Urbanist,system-ui,sans-serif;box-shadow:0 20px 80px #0009; }
.withdrawal-consent::backdrop { background:rgba(0,6,12,.78); }
.withdrawal-consent h2 { font-size:24px;line-height:1.25;margin:0 0 24px; }
.withdrawal-consent-route { display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:16px 12px;background:#0b2131;border:1px solid #245069;border-radius:14px;text-align:center; }
.withdrawal-consent-route strong { font-size:18px;line-height:1.3;overflow-wrap:anywhere; }
.withdrawal-consent-route>span { color:#1cd3dc;font-size:22px; }
.withdrawal-consent-amounts { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:18px 12px;margin:24px 0;font-variant-numeric:tabular-nums; }
.withdrawal-consent-amounts dt { color:#9db5c6;align-self:center; }
.withdrawal-consent-amounts dd { margin:0;text-align:right;font-size:19px;font-weight:750;overflow-wrap:anywhere; }
.withdrawal-consent-scope { color:#a7bdca;font-size:13px;line-height:1.5;margin:16px 0; }
.withdrawal-consent-details { border-top:1px solid #244152;padding-top:16px;margin:20px 0;color:#a7bdca;font-size:13px;line-height:1.5; }
.withdrawal-consent-details summary { cursor:pointer;min-height:28px; }
.withdrawal-consent-details p { overflow-wrap:anywhere;margin:8px 0; }
.withdrawal-consent-actions { display:grid;grid-template-columns:1fr 1.35fr;gap:10px;margin-top:24px; }
.withdrawal-consent-actions button { border-radius:12px;min-height:48px;padding:12px;font:700 15px/1.25 Urbanist,system-ui,sans-serif;cursor:pointer;touch-action:manipulation; }
.withdrawal-consent-cancel { border:1px solid #a34255;background:#301821;color:#ffb4c2; }
.withdrawal-consent-confirm { border:1px solid #1ad3dd;background:linear-gradient(100deg,#0e8daa,#18c9d0);color:#04131d; }
.withdrawal-consent-actions button:focus-visible,.withdrawal-consent-details summary:focus-visible { outline:2px solid #dcefff;outline-offset:3px; }
.transfer-dialog .withdrawal-consent-amounts dd { font-size:16px;line-height:1.45; }
.transfer-dialog .transfer-success-status { color:#43d6aa; }
.transfer-receipt-balance-title { font-size:14px;letter-spacing:.04em;color:#9db5c6;margin:24px 0 0; }
.transfer-receipt-actions { grid-template-columns:1fr; }
@media(max-width:380px){
  .withdrawal-consent { padding:18px 14px; }
  .withdrawal-consent h2 { font-size:22px;margin-bottom:16px; }
  .withdrawal-consent-route { gap:6px;padding:12px 8px; }
  .withdrawal-consent-route strong { font-size:14px; }
  .withdrawal-consent-amounts { gap:12px 8px;margin:16px 0; }
  .withdrawal-consent-amounts dt { font-size:14px; }
  .withdrawal-consent-amounts dd,.transfer-dialog .withdrawal-consent-amounts dd { font-size:14px; }
  .withdrawal-consent-scope { font-size:12px;margin:12px 0; }
  .withdrawal-consent-details { margin:14px 0;padding-top:12px; }
  .withdrawal-consent-actions { margin-top:16px; }
}
.asset-price-chart-wrap { --asset-price-axis-width:92px;padding:0;border:0;border-radius:0;
  background:transparent;overflow:hidden; }
.asset-chart-legend { display:none; }
.asset-chart-legend>span { display:inline-flex;align-items:center;gap:6px;white-space:nowrap; }
.asset-chart-key { display:inline-block;width:15px;border-top:2px solid #ffc879;border-radius:2px; }
.asset-chart-key.target { border-color:#acb8c8; }
.asset-chart-plot { position:relative;display:block;min-width:0; }
#assetPriceChart { display:block;width:100%;height:clamp(225px,20vw,270px); }
.asset-chart-y-axis { position:absolute;inset:4.4444% 0 5% auto;display:flex;flex-direction:column;justify-content:space-between;
  width:var(--asset-price-axis-width);color:#b6c8d8;font-size:10px;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;pointer-events:none; }
.asset-chart-y-axis>span:first-child { transform:translateY(-50%); }
.asset-chart-y-axis>span:last-child { transform:translateY(50%); }
.asset-chart-times { display:flex;justify-content:space-between;margin:5px var(--asset-price-axis-width) 0 0;color:#b0c3d4;font-size:10px;font-weight:600;font-variant-numeric:tabular-nums; }
.asset-chart-empty { position:absolute;inset:0 var(--asset-price-axis-width) 0 0;display:grid;place-items:center;color:#97adbe;font-size:12px;text-align:center;pointer-events:none; }
.asset-chart-empty[hidden] { display:none; }
.asset-chart-target-note { position:absolute;top:50%;right:calc(var(--asset-price-axis-width) + 6px);z-index:1;padding:2px 5px;border:1px solid #394654;
  max-width:calc(100% - var(--asset-price-axis-width) - 10px);box-sizing:border-box;transform:translateY(-50%);
  border-radius:5px;background:rgba(8,15,24,.92);color:#dce5ee;font-size:10px;line-height:1.25;font-weight:700;white-space:normal;overflow-wrap:anywhere;pointer-events:none; }
.asset-chart-target-note[hidden] { display:none; }
.price-grid { stroke:#263341;stroke-width:.8;vector-effect:non-scaling-stroke; }
.price-target { stroke:#acb8c8;stroke-width:1.25;stroke-dasharray:4 4;opacity:.86;vector-effect:non-scaling-stroke; }
.price-up { stroke:#42cfa7;fill:#42cfa7; }
.price-down { stroke:#f47b91;fill:#f47b91; }
.price-flat { stroke:#9ec6ed;fill:#9ec6ed; }
.price-area { stroke:none; }
.price-live-line { fill:none;stroke:#ffc879;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke; }
.price-last-halo { fill:#ffc879;opacity:.2; }
.price-last { fill:#fff2d7;stroke:#65461f;stroke-width:1.5;vector-effect:non-scaling-stroke; }
.asset-price-panel.is-live .price-last-halo { animation:asset-price-pulse 1.7s ease-in-out infinite!important;transform-origin:center;transform-box:fill-box; }
@keyframes asset-price-pulse { 0%,100% { opacity:.12;transform:scale(.85); } 50% { opacity:.38;transform:scale(1.35); } }
@media (prefers-reduced-motion:reduce) { .asset-price-panel.is-live .price-last-halo { animation:none!important; } }
.asset-price-source { margin:9px 1px 0;color:#adc1d3;font-size:11px;font-weight:560;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.trade-asset-price { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 12px; }
.trade-asset-price>span { min-width:0;border:1px solid #21415d;border-radius:7px;padding:8px;color:#9bb5c9;font-size:11px; }
.trade-asset-price b { display:block;color:#f0f7ff;font-size:14px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere; }
.trade-underlying-chart { margin:0 0 12px;padding:10px;border:1px solid #2a3c4c;border-radius:9px;background:#0d171f; }
.trade-underlying-chart .trade-chart-heading { display:flex;justify-content:space-between;gap:8px;margin-bottom:7px;color:#dcebf8;font-size:12px; }
.trade-underlying-chart .trade-chart-heading small,.trade-underlying-chart>small { color:#8da8bd;font-size:10px; }
@media (max-width:430px) {
  .detail-inline-insight { flex:1 0 100%;min-width:0; }
  .market-inline-insight { align-items:flex-start;flex-wrap:wrap;gap:2px 7px; }
  .market-inline-insight span { flex:1 0 100%; }
  .chart-mode-switch { margin:12px 12px 0; }
  .asset-price-panel { margin:8px 12px 0;padding:10px 0 20px; }
  .asset-price-metrics>div:first-child { padding-right:8px; }
  .asset-price-metrics>div:nth-child(2) { padding-left:8px; }
  .asset-price-metrics b { font-size:14px;letter-spacing:-.02em; }
  #assetLivePrice { font-size:20px; }
  #assetTargetPrice { font-size:19px; }
  .asset-price-chart-wrap { --asset-price-axis-width:84px; }
  .asset-chart-y-axis { font-size:10px; }
  #assetPriceChart { height:218px; }
}
.chart-section-label .detail-ending-time { display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px;
  color:#a8bed2;font-size:11px;line-height:1.3; }
.chart-section-label .detail-ending-label { color:#d2e4f6;font-weight:700; }
.detail-ending-time time,.trade-ending-time time { font-variant-numeric:tabular-nums; }
.chart-section-label .detail-ending-countdown,.trade-ending-time #tradeEndingCountdown {
  padding:2px 6px;border:1px solid #28527c;border-radius:6px;background:rgba(20,62,105,.28);
  color:#9acbff;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap; }
.trade-ending-time { display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px;margin:0 0 12px;
  padding:8px 10px;border:1px solid #214460;border-radius:7px;background:rgba(8,34,55,.6);
  color:#c3d7e9;font-size:11px;line-height:1.35; }
.trade-ending-time>span:first-child { color:#e0efff;font-weight:700; }
#chartCard .chead { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 6px 18px 8px; padding: 0; border: 0; min-height: 22px; }
#chartName { max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: #7d96ae; }
#chartCard .cprice { font-size: 15px; }
#chartCard .cdelta { font-size: 11px; }
#chartSource { margin-left: auto; font-size: 10px; color: #7891a9; }
#chartWrap { margin: 0 18px; padding: 0; }
#chart { height: clamp(170px,13.5vw,240px); min-height: 0; }
#chart .axis { font-size: 11px; }
.detail-stats { margin: 17px 18px 20px; }
.detail-stats > div { padding-left: 40px; }
.detail-tabs { gap: 24px; }
.detail-tabs button { font-size: 14px; font-weight: 650; }
.overview-panel { padding: 14px 16px; }
.overview-panel h3 { font-size: 16px; }
.overview-panel p { font-size: 13px; }
.panel .trade-account-details { margin: 8px 0; }
.panel #selSub { font-size: 10px; margin: 0 0 10px; }
.trade-outcome-label { font-size: 14px; color: #a7bace; font-weight: 650; margin: 14px 0 7px; }
.trade-amount-input { position: relative; }
.trade-amount-input .amtin { padding-right: 75px; width: 100%; }
.trade-amount-input > span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 15px; color: #9db4ca; pointer-events: none; }
.trade-quote-hint { font-size: 11px; line-height: 1.5; margin: 8px 0; }
.trade-estimate { margin: 14px 0; padding: 12px; background: #03121d; border: 1px solid #0e2c42; border-radius: 3px; }
.reference-price-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: #8fa7bd; }
.reference-price-row b { color: #c1d1e2; }
.trade-estimate .payout { margin: 8px 0 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 7px; font-size: 12px; line-height: 1.5; }
.trade-estimate .payout > * { min-width: 0; overflow-wrap: anywhere; }
.trade-estimate .payout b { margin-left: auto; }
.trade-rules-note { color: #728ba3; font-size: 11px; text-align: center; margin: 10px 0 0; }
.trade-rules-note button { display: inline; border: 0; background: none; padding: 0; min-height: 0; font-size: inherit; color: #079be4; }
.market-position-card { padding: 16px 18px; border-radius: 5px; background: #021420; border-color: #0e2c42; }
.market-position-card > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.market-position-card h2 { margin: 0; font-size: 17px; letter-spacing: 0; text-transform: none; }
.market-position-card p { font-size: 12px; color: #829ab0; margin: 10px 0 0; line-height: 1.5; }
@media (min-width: 1600px) {
  .detail-top #detailCoin, #detailCoin .asset-art { width: 96px; height: 96px; flex-basis: 96px; }
  .detail-metadata { font-size: 15px; }
  .venue-price { min-height: 82px; }
  .venue-price-value b { font-size: 34px; }
  .venue-probability b { font-size: 21px; }
  .venue-probability small { font-size: 13px; }
  .detail-stats small, .overview-panel p { font-size: 14px; }
}
@media (max-width: 720px) {
  #appView.has-wallet-balance-dock:has(#eventView:not(.hidden)) .wallet-balance-dock {
    height:44px;padding:2px 8px;
  }
  #appView.has-wallet-balance-dock:has(#eventView:not(.hidden)) #chartCard {
    scroll-margin-top:calc(var(--header) + 46px);
  }
  #appView.has-wallet-balance-dock:has(#eventView:not(.hidden)) .wallet-balance-dock button { padding:2px 6px; }
  #appView.has-wallet-balance-dock:has(#eventView:not(.hidden)) .wallet-balance-dock span { font-size:9px; }
  #appView.has-wallet-balance-dock:has(#eventView:not(.hidden)) .wallet-balance-dock b { margin-top:1px;font-size:11px; }
  .event-breadcrumb { gap: 10px; margin-bottom: 10px; }
  .detail-cover { padding: 8px 12px 2px; }
  .detail-top { display:grid;grid-template-columns:42px minmax(0,1fr) 27px;gap:5px 9px;align-items:start; }
  .detail-top #detailCoin,.detail-top #detailCoin .asset-art { width:42px;height:42px;flex-basis:42px; }
  .detail-heading-copy { grid-column:2;min-width:0!important; }
  .detail-heading-copy h2 { margin:0 0 3px;font-size:17px;line-height:1.16; }
  .detail-top .eyebrow { margin-bottom:2px;font-size:9px; }
  .detail-close { grid-column:3;grid-row:1; }
  .detail-inline-insight { grid-column:1/-1;min-width:0;grid-template-columns:72px minmax(0,1fr);gap:2px 6px;padding:6px 9px; }
  .detail-insight-head { grid-column:1;grid-row:1;align-self:start; }
  .detail-insight-head strong { white-space:normal;line-height:1.2; }
  .detail-inline-insight p { grid-column:2;grid-row:1;font-size:12px;line-height:1.28;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
  .detail-inline-insight small { grid-column:1/-1;font-size:11px;line-height:1.23;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden; }
  .detail-insight-head strong { font-size:11px; }
  .detail-metadata { font-size: 11px; gap: 7px 10px; }
  .share-actions { grid-column:1/-1;display:flex;max-width:none;width:100%;justify-content:flex-end;gap:5px;margin:0; }
  .share-actions .detail-share { width:25px;height:25px;min-width:25px;min-height:25px;padding:0; }
  .chart-mode-switch { margin:6px 12px 0;padding:2px; }
  .chart-mode-switch button { min-height:28px;font-size:11px; }
  .asset-price-panel { margin:3px 12px 0;padding:4px 0 6px; }
  .asset-price-head { gap:4px; }
  .asset-price-metrics { padding-bottom:4px;margin-bottom:0; }
  .asset-price-metrics>div:nth-child(2) { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline; }
  .asset-price-metrics>div:nth-child(2)>small { grid-column:1;grid-row:1; }
  #assetLivePrice { grid-column:1/-1;grid-row:2; }
  #assetPriceDifference { grid-column:2;grid-row:1;margin:0 0 0 4px; }
  .asset-price-metrics small { font-size:10px; }
  #assetLivePrice { font-size:19px; }
  #assetTargetPrice { font-size:17px; }
  #assetPriceDifference { margin-top:0;font-size:10px; }
  #assetPriceChart { height:clamp(124px,18dvh,166px); }
  .asset-chart-times { margin-top:1px; }
  .asset-price-source { margin-top:3px;font-size:9px; }
  .venue-compare { margin:5px 12px 0;padding:5px 8px 7px;border:1px solid #294561;border-radius:9px;background:#0a1d2f; }
  .detail-venue-tabs { display:flex;gap:5px;margin:0 0 5px;overflow-x:auto;scrollbar-width:none; }
  .detail-venue-tab { flex:none;min-height:20px;padding:1px 7px;border:1px solid transparent;border-radius:5px;
    background:transparent;color:#a9bfd5;font-size:10px;font-weight:700;white-space:nowrap; }
  .detail-venue-tab.active { border-color:#3675b9;background:#123d66;color:#f4faff; }
  .venue-compare .venue-line { display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:0;border:0; }
  .venue-compare .venue-line.mobile-selected { display:grid; }
  .venue-compare .venue-main,.venue-compare .venue-state { display:none; }
  .venue-compare .venue-price { min-height:37px;padding:3px 4px;border-radius:6px; }
  .venue-compare .venue-price-value { gap:1px;font-size:10px; }
  .venue-compare .venue-price-value b { font-size:17px; }
  .venue-compare .venue-probability,.venue-compare .best-badge { display:none; }
  body.light .venue-compare { background:#eef6ff;border-color:#a6c4df; }
  .detail-secondary-actions { margin:2px 12px 8px; }
  .venue-main > span:last-child { gap: 2px; flex-direction: column; align-items: flex-start; }
  .venue-price-value b { font-size: 24px; }
  .venue-probability b { font-size: 15px; }
  .venue-probability small { font-size: 9px; }
  .venue-line { gap: 8px; }
  .chart-section-label { margin: 0 12px; flex-wrap: wrap; }
  .chart-section-label b { font-size: 19px; }
  .chart-section-label .ivals { width: 100%; justify-content: flex-start; gap: 5px; }
  #chartCard .chead { margin: 8px 12px; gap: 6px; }
  #chartName { max-width: 55%; }
  #chartSource { width: 100%; margin: 0; }
  #chartWrap { margin: 0 10px; }
  #chart { height: 180px; }
  #chart .axis { font-size: 11px; }
  #chart .chart-interior-time { display: none; }
  #chart .chart-last-price text { font-size: 12px; }
  .detail-stats { margin: 15px 10px; }
  .detail-tabs { gap: 16px; }
  .detail-tabs button { font-size: 13px; }
  .trade-estimate { margin: 12px 0; }
}
@media (max-width:720px) and (max-height:760px) {
  .detail-metadata { display:none; }
  .detail-inline-insight p { font-size:12px;line-height:1.26;-webkit-line-clamp:3; }
  .detail-inline-insight small { font-size:10px;line-height:1.22; }
  .detail-insight-head strong { font-size:10px; }
  #detailInsightWatch,#detailInsightUncertainty { display:none; }
  #assetPriceChart { height:84px; }
  .asset-price-source { display:none; }
}
@media (max-width:360px) and (min-height:761px) {
  #assetPriceChart { height:132px; }
}
@media (max-width:720px) and (min-height:761px) {
  #detailInsightWatch { -webkit-line-clamp:2; }
}
@media (max-width:360px) and (max-height:760px) {
  .detail-inline-insight p { -webkit-line-clamp:4; }
  .venue-compare { padding:3px 7px 4px; }
  .detail-venue-tabs { margin-bottom:2px; }
  .venue-compare .venue-price { min-height:32px; }
  .share-actions .detail-share { width:21px;height:21px;min-width:21px;min-height:21px; }
  #assetPriceDifference { display:none; }
  #assetPriceChart { height:78px; }
}
/* Direct bridge layout, expressed entirely in the existing Zeno Market theme. */
#walletFundsNav { display: flex; gap: 8px; padding: 12px 20px 0; border-bottom: 1px solid var(--line); }
#walletFundsNav button { min-height: 44px; padding: 10px 18px; color: var(--dim); background: transparent; border: 0; border-bottom: 2px solid transparent; font-size: 15px; }
#walletFundsNav button[aria-pressed="true"] { color: var(--text); border-bottom-color: var(--accent2); }
#profileDrawer.deposit-mode #pmTransferBack { margin: 0; padding: 20px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#pmTransferBack .deposit-panel-head { margin-bottom: 16px; }
#pmTransferBack h3 { margin: 0; font-size: 22px; }
#pmTransferBack .transfer-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#pmTransferBack .deposit-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }
#pmTransferBack .deposit-field { min-width: 0; }
#pmTransferBack .deposit-field label, #pmTransferBack .transfer-label { display: block; margin-bottom: 8px; color: var(--dim); font-size: 14px; }
#pmTransferBack .transfer-route { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
#pmTransferBack .transfer-route b, #pmTransferBack .transfer-route small { display: block; overflow-wrap: anywhere; }
#pmTransferBack .transfer-route b { font-size: 16px; }
#pmTransferBack .transfer-route small { margin-top: 4px; font-size: 13px; color: var(--dim); }
#pmTransferBack .deposit-selection-summary { padding: 10px 0; margin: 0; background: transparent; border: 0; }
#pmTransferBack .deposit-selection-summary span, #pmTransferBack .deposit-selection-summary b { font-size: 14px; }
#pmTransferBack .transfer-amount { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--card2); }
#pmTransferBack .transfer-amount input { flex: 1; min-width: 0; width: 100%; min-height: 48px; border: 0; background: transparent; font-size: 18px; padding: 12px; }
#pmTransferBack .transfer-amount button { flex: 0 0 auto; min-height: 44px; padding: 10px 14px; color: var(--accent2); font-size: 14px; }
#pmTransferBack .deposit-receive-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 20px; color: var(--dim); font-size: 14px; }
#pmTransferBack .deposit-receive-summary b { color: var(--text); font-size: 20px; overflow-wrap: anywhere; }
#pmTransferBack .deposit-note { margin: 12px 0; font-size: 14px; line-height: 1.5; color: var(--dim); }
#pmTransferBack .deposit-note:empty { display: none; }
#pmTransferBack .deposit-details summary { min-height: 44px; padding: 12px 0; cursor: pointer; color: var(--dim); font-size: 14px; }
#pmTransferBack .transfer-protection { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; }
#pmTransferBack .transfer-protection input { flex: 0 0 auto; width: 18px; height: 18px; }
#pmTransferBack .transfer-addresses { white-space: pre-line; overflow-wrap: anywhere; }
#pmTransferBack .deposit-copy-primary { min-height: 48px; font-size: 16px; border-radius: 12px; background: var(--zeno-blue); border: 1px solid var(--line-strong); color: var(--text); box-shadow: var(--zeno-shadow); }
#pmTransferBack .deposit-status-action { min-height: 44px; font-size: 14px; background: var(--surface-soft); color: var(--text); border-color: var(--line); }
#pmTransferBack button:focus-visible, #pmTransferBack input:focus-visible, #pmTransferBack summary:focus-visible, #walletFundsNav button:focus-visible { outline: 2px solid var(--accent2); outline-offset: 3px; }
#pmTransferBack button:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 430px) { #profileDrawer.deposit-mode #pmTransferBack { padding: 16px; } #walletFundsNav { padding: 8px 16px 0; } }

/* One wallet surface: every venue route uses the same From / To controls. */
#profileDrawer.deposit-mode #walletUnifiedCard{margin:0;padding:20px;border:0;border-radius:0;background:transparent;box-shadow:none}
.wallet-unified-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}
.wallet-unified-head h3{margin:7px 0 0;font-size:22px;line-height:1.2}
.wallet-unified-head .wallet-flow-back{width:auto;margin:0;padding:8px 0;background:none;border:0;color:var(--dim);font-size:14px}
.wallet-route-grid{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);align-items:end;gap:10px}
.wallet-route-grid label,.wallet-add-grid label{min-width:0}
.wallet-route-grid label>span,.wallet-add-grid label>span,.wallet-amount-label{display:block;margin:0 0 8px;color:var(--dim);font-size:13px}
.wallet-route-grid select,.wallet-add-grid select{width:100%;min-width:0;min-height:52px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card2);color:var(--text);font-size:14px}
#walletRouteSwap{width:40px;height:40px;margin-bottom:6px;border:1px solid var(--line);border-radius:50%;background:var(--surface-soft);color:var(--accent2);font-size:19px}
.wallet-balance-line,.wallet-receive-line{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;color:var(--dim);font-size:14px}
.wallet-balance-line b,.wallet-receive-line b{color:var(--text);font-size:15px;text-align:right;overflow-wrap:anywhere}
.wallet-amount-control{display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;background:var(--card2);overflow:hidden}
.wallet-amount-control input{flex:1;min-width:0;min-height:54px;padding:12px 14px;border:0;background:transparent;color:var(--text);font-size:20px}
.wallet-amount-control button{min-height:50px;padding:10px 16px;border:0;background:transparent;color:var(--accent2);font-weight:650}
.wallet-unified-card>.deposit-copy-primary{width:100%;min-height:50px;margin-top:6px;border-radius:12px}
.wallet-unified-card>.deposit-status-action{width:100%;min-height:44px;margin-top:10px}
.wallet-add-funds{margin-top:22px;padding-top:4px;border-top:1px solid var(--line)}
.wallet-add-funds>summary{min-height:48px;padding:16px 0;cursor:pointer;color:var(--text);font-size:15px;font-weight:600}
.wallet-add-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:2px 0 14px}
.wallet-deposit-address{padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft)}
.wallet-deposit-address>span{display:block;color:var(--dim);font-size:13px}
.wallet-deposit-address code{display:block;padding:10px 0;overflow-wrap:anywhere;font-family:inherit;font-size:14px}
.wallet-deposit-address button{width:100%;min-height:42px;border:1px solid var(--line-strong);border-radius:10px;background:var(--zeno-blue);color:var(--text)}
.wallet-unified-card button:focus-visible,.wallet-unified-card input:focus-visible,.wallet-unified-card select:focus-visible,.wallet-unified-card summary:focus-visible{outline:2px solid var(--accent2);outline-offset:3px}
@media(max-width:430px){#profileDrawer.deposit-mode #walletUnifiedCard{padding:16px}.wallet-route-grid{grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr);gap:7px}.wallet-route-grid select{min-height:58px;padding:8px;font-size:13px}.wallet-add-grid{grid-template-columns:1fr 1fr}}
#profileDrawer.deposit-mode { background: var(--surface); color: var(--text); box-shadow: var(--zeno-shadow); }
#profileDrawer.deposit-mode .drawer-head { background: var(--bg); border-color: var(--line); }
#profileDrawer.deposit-mode #depositAddressesCard { padding: 20px; border: 0; border-radius: 0; background: transparent; }
#depositAddressesCard .deposit-panel-head { align-items: flex-start; border-bottom: 1px solid var(--line); padding-bottom: 18px; }
#depositAddressesCard .deposit-panel-head h3 { color: var(--text); font-size: 22px; font-weight: 650; letter-spacing: -.018em; text-transform: none; margin: 8px 0; }
#depositAddressesCard .deposit-panel-head p { color: var(--dim); font-size: 14px; line-height: 1.5; }
#depositAddressesCard .deposit-balance { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-width: 100px; }
#depositAddressesCard .deposit-balance span, #depositAddressesCard .deposit-balance small { color: var(--dim); font-size: 13px; }
#depositAddressesCard .deposit-route-choice { display: flex; gap: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 4px; margin-bottom: 20px; }
#depositAddressesCard .deposit-route-choice button { flex: 1; background: transparent; color: var(--dim); padding: 10px 8px; border: 1px solid transparent; border-radius: 9px; font-size: 14px; font-weight: 600; cursor: pointer; }
#depositAddressesCard .deposit-route-choice button[aria-pressed="true"] { color: var(--text); border-color: var(--line-strong); background: var(--surface-raised); }
#depositAddressesCard .deposit-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }
#depositAddressesCard .deposit-field { min-width: 0; }
#depositAddressesCard .deposit-field label { display: block; font-size: 14px; color: var(--dim); margin: 0 0 8px; }
#depositAddressesCard .deposit-field select, #depositAddressesCard .deposit-field input { width: 100%; min-width: 0; min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--card2); color: var(--text); font-size: 16px; padding: 10px 12px; }
#depositAddressesCard .deposit-selection-summary { font-size: 13px; padding: 10px 0; margin: 0 0 8px; background: transparent; border: 0; }
#depositAddressesCard .deposit-selection-summary span, #depositAddressesCard .deposit-selection-summary b, #depositAddressesCard .deposit-address-head span { font-size: 14px; }
#depositAddressesCard .deposit-quote-refresh { display: block; margin: -4px 0 14px auto; padding: 8px 0; color: var(--accent2); background: none; border: 0; font-size: 14px; text-decoration: underline; cursor: pointer; }
#depositAddressesCard .deposit-quote-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; border: 0; background: transparent; padding: 0; margin-top: 16px; }
#depositAddressesCard .deposit-quote-grid > div { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
#depositAddressesCard .deposit-quote-grid span { display: block; color: var(--dim); font-size: 13px; margin-bottom: 8px; }
#depositAddressesCard .deposit-quote-grid b { display: block; color: var(--text); font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
#depositAddressesCard .deposit-address-block { border: 1px solid var(--line); border-radius: 16px; background: var(--surface-raised); padding: 16px; }
#depositAddressesCard .deposit-address-head, #depositAddressesCard .deposit-address-head span { font-size: 14px; color: var(--dim); }
#depositAddressesCard .deposit-address-block code { font-family: inherit; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; padding: 8px 0; }
#depositAddressesCard .deposit-copy-primary { min-height: 44px; border-radius: 12px; background: var(--zeno-blue); border: 1px solid var(--line-strong); color: var(--text); font-size: 15px; box-shadow: var(--zeno-shadow); }
#depositAddressesCard .deposit-copy-primary:disabled { opacity: .45; cursor: not-allowed; }
#depositAddressesCard .deposit-note { color: var(--dim); font-size: 14px; line-height: 1.5; margin: 14px 0; }
#depositAddressesCard .deposit-warning { border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); border-radius: 12px; color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, var(--card)); padding: 12px; font-size: 14px; line-height: 1.5; }
#depositAddressesCard .deposit-warning .ui-icon { color: var(--warn); }
#depositAddressesCard .deposit-status-action { font-size: 14px; min-height: 44px; border-radius: 12px; background: var(--surface-soft); border-color: var(--line); color: var(--text); }
#depositAddressesCard button:focus-visible, #depositAddressesCard input:focus-visible, #depositAddressesCard select:focus-visible { outline: 2px solid var(--accent2); outline-offset: 3px; }
#depositAddressesCard .hidden { display: none !important; }
#depositAddressesCard .deposit-note:empty { display: none; }
#depositAddressesCard .deposit-receive-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 14px 0; font-size: 14px; color: var(--dim); }
#depositAddressesCard .deposit-receive-summary b { color: var(--text); font-size: 18px; overflow-wrap: anywhere; }
#depositAddressesCard .deposit-receive-summary .deposit-quote-refresh { margin: 0 0 0 auto; padding: 8px 0; min-height: 44px; }
#depositAddressesCard .deposit-details { margin: 12px 0; border: 0; background: transparent; }
#depositAddressesCard .deposit-details summary { padding: 10px 0; min-height: 44px; cursor: pointer; font-size: 14px; color: var(--dim); }
#depositAddressesCard .deposit-details summary:focus-visible { outline: 2px solid var(--accent2); outline-offset: 3px; }
#depositAddressesCard .deposit-details .deposit-quote-grid { display: block; margin: 0; }
#depositAddressesCard .deposit-details .deposit-quote-grid > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border: 0; background: transparent; }
#depositAddressesCard .deposit-details .deposit-quote-grid span { margin: 0; font-size: 14px; }
#depositAddressesCard .deposit-details .deposit-quote-grid b { font-size: 14px; }

/* Wallet swap: keep the consumer decision to From → To → amount → review.
   Venue custody, bridge addresses and recovery controls remain available, but
   never compete with the primary action. */
#depositAddressesCard .deposit-loading {
  min-height: 108px;
  justify-content: flex-start;
  padding: 22px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(14,31,50,.9), rgba(5,13,23,.92));
}
#depositAddressesCard .deposit-loading small { margin-top: 4px; color: var(--dim); font-size: 12px; }
#depositAddressesCard .trading-destination-choice {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 6px;
  margin: 0 0 18px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(2,8,15,.64);
}
#depositAddressesCard .trading-destination-choice button {
  min-height: 58px;
  padding: 10px 13px;
  border: 1px solid transparent;
  border-radius: 10px;
  text-align: left;
}
#depositAddressesCard .trading-destination-choice button b { display: block; font-size: 16px; color: var(--text); }
#depositAddressesCard .trading-destination-choice button small { display: block; margin-top: 2px; font-size: 12px; color: var(--dim); }
#depositAddressesCard .trading-destination-choice button.active {
  border-color: rgba(71,167,255,.48);
  background: linear-gradient(135deg,rgba(15,100,218,.27),rgba(24,174,207,.09));
  box-shadow: inset 0 1px rgba(255,255,255,.06);
}
#embeddedFundingFields { display: grid; gap: 0; }
#embeddedFundingFields.hidden { display: none !important; }
.swap-route-card {
  padding: 16px;
  border: 1px solid #183650;
  border-radius: 16px;
  background: linear-gradient(145deg,rgba(7,24,39,.98),rgba(4,13,23,.98));
  box-shadow: inset 0 1px rgba(255,255,255,.045);
}
.swap-route-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.swap-route-head > div > span,.swap-amount-label,.swap-receive > span {
  display: block;
  color: #7890a7;
  font-size: 12px;
  font-weight: 600;
}
.swap-route-head strong { display: block; margin-top: 3px; font-size: 17px; font-weight: 650; color: var(--text); }
.swap-route-head > b { max-width: 48%; color: #d7e5f3; font-size: 14px; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.swap-asset-controls { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 9px; margin-top: 15px; }
.swap-asset-controls label { display: block; min-width: 0; }
.swap-asset-controls label > span { display: block; margin: 0 0 6px; color: #70889f; font-size: 11px; }
#depositAddressesCard .swap-asset-controls select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 32px 10px 11px;
  border: 1px solid #1d3b55;
  border-radius: 10px;
  background: #061622;
  color: #e8f1fb;
  font-size: 14px;
}
.swap-amount-label { margin: 15px 0 7px; }
.swap-amount-control { display: flex; align-items: center; gap: 8px; padding: 4px 5px 4px 13px; border: 1px solid #25516f; border-radius: 12px; background: #020d16; }
#depositAddressesCard .swap-amount-control input {
  flex: 1;
  min-width: 0;
  min-height: 50px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.025em;
}
.swap-amount-control button { flex: 0 0 auto; min-height: 40px; padding: 0 13px; border-radius: 9px; background: rgba(23,109,230,.18); color: #70b8ff; font-size: 13px; font-weight: 750; }
.swap-direction { position: relative; z-index: 1; width: 38px; height: 38px; margin: -7px auto; display: grid; place-items: center; border: 5px solid var(--surface); border-radius: 50%; background: #0e6bd8; color: #fff; font-size: 17px; box-sizing: content-box; }
.swap-route-to { padding-top: 20px; }
.swap-receive { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: 18px; }
.swap-receive b { color: #68e2bc; font-size: 20px; font-weight: 650; text-align: right; }
.swap-quick-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 7px 18px; padding: 12px 3px 2px; color: #6f879e; font-size: 12px; }
.swap-quick-meta b { color: #aabdd0; font-weight: 600; }
.swap-review { margin-top: 13px; padding: 12px 14px; border: 1px solid rgba(50,153,255,.24); border-radius: 12px; background: rgba(9,38,62,.55); }
.swap-review > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 7px 0; color: var(--dim); font-size: 13px; }
.swap-review > div + div { border-top: 1px solid rgba(115,151,184,.12); }
.swap-review b { color: var(--text); font-size: 14px; }
#embeddedFundingFields > .err { margin: 10px 2px 0; min-height: 0; }
#embeddedFundingFields > .err:empty { display: none; }
#embeddedFundingFields > .deposit-copy-primary { margin-top: 13px; min-height: 50px; font-size: 16px; }
#embeddedFundingFields .swap-secondary { border: 1px solid #27435d; background: #0b1c2a; box-shadow: none; color: #d9e9f8; }
.swap-details { margin-top: 13px !important; border-top: 1px solid var(--line) !important; }
.swap-details > summary { display: flex; align-items: center; justify-content: space-between; }
.swap-details > summary::after { content: "+"; color: #7e9bb7; font-size: 18px; }
.swap-details[open] > summary::after { content: "−"; }
.swap-details .deposit-address-block { margin-top: 10px; }
.swap-technical-route { margin-top: 10px; }
.swap-technical-route .deposit-address-head:not(:first-child) { margin-top: 14px; }
#fundingPending { margin-top: 13px; padding: 13px; border: 1px solid rgba(71,167,255,.26); border-radius: 12px; background: rgba(8,34,55,.55); }
#fundingPending p { margin: 0 0 9px; color: #c6d8e9; font-size: 13px; }
#fundingPending a { color: #6bb7ff; }
.funding-swap-box { width: min(520px,calc(100vw - 28px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 22px; }
.funding-swap-box > .eyebrow { color: #73b9ff; font-size: 10px; letter-spacing: .13em; }
.funding-swap-box > h2 { margin: 5px 0 16px; font-size: 24px; font-weight: 650; letter-spacing: -.025em; }
.funding-swap-box #predictTransferFields { display: grid; gap: 0; }
.funding-swap-box #predictTransferFields.hidden { display: none !important; }
.funding-swap-box .swap-amount-control input { flex: 1; min-width: 0; width: 100%; min-height: 50px; padding: 0; border: 0; background: transparent; color: var(--text); font-size: 28px; font-weight: 600; }
.funding-swap-box #predictTransferSummary { min-height: 0; margin: 12px 2px 0; color: #9fb3c7; font-size: 13px; line-height: 1.5; }
.funding-swap-box #predictTransferSummary:empty { display: none; }
.funding-swap-actions { margin: 13px 0 0; }
.funding-swap-actions button { width: 100%; min-height: 50px; border-radius: 12px; font-size: 16px; }
.funding-swap-details { margin: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.funding-swap-details > summary { min-height: 46px; padding: 13px 2px; cursor: pointer; color: var(--dim); font-size: 13px; list-style: none; }
.funding-swap-details > summary::after { content: "+"; float: right; color: #7e9bb7; font-size: 18px; }
.funding-swap-details[open] > summary::after { content: "−"; }
.funding-swap-details .confirmgrid { margin: 0 0 10px; }
.funding-swap-footer { margin-top: 14px; }
.funding-swap-footer .confirmcancel { min-height: 44px; }
@media (max-width: 520px) {
  #profileDrawer.deposit-mode #depositAddressesCard { padding: 16px; }
  #depositAddressesCard .deposit-panel-head { gap: 12px; }
  #depositAddressesCard .deposit-quote-grid > div { padding: 10px 8px; }
  #depositAddressesCard .deposit-panel-head .deposit-balance { display: none; }
  .swap-asset-controls { grid-template-columns: 1fr; }
  .swap-route-head > b { max-width: 54%; font-size: 13px; }
  .swap-receive { align-items: flex-start; }
  .swap-receive b { font-size: 17px; }
  .funding-swap-back { padding: 0; align-items: stretch; }
  .funding-swap-box { width: 100%; min-height: 100dvh; max-height: 100dvh; padding: 20px 16px calc(24px + env(safe-area-inset-bottom)); border: 0; border-radius: 0; }
}

/* The three account-scoped balances stay visible while browsing markets. */
.wallet-balance-dock {
  position: sticky;
  top: var(--header);
  z-index: 19;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  height: 60px;
  padding: 4px max(28px,calc((100vw - 1740px) / 2));
  border-bottom: 1px solid rgba(56,104,151,.3);
  background: rgba(3,10,18,.97);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.wallet-balance-dock button {
  min-width: 0;
  min-height: 0;
  padding: 3px 15px;
  border-right: 1px solid rgba(73,115,159,.26);
  text-align: left;
}
.wallet-balance-dock button:last-child { border-right: 0; }
.wallet-balance-dock button:hover,
.wallet-balance-dock button:focus-visible { background: rgba(31,104,190,.14); }
.wallet-balance-dock span,
.wallet-balance-dock b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallet-balance-dock span { color: #8fa9c5; font-size: 11px; line-height: 1.25; }
.wallet-balance-dock b { margin-top: 3px; color: #f0f7ff; font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.25; }
#appView.has-wallet-balance-dock nav.tabs { top: calc(var(--header) + 60px); }

.trade-available-balance {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 2px 0 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(83,133,181,.18);
  font-size: 12px;
}
.trade-available-balance span { min-width: 0; color: #91a9c0; }
.trade-available-balance b { flex: 0 0 auto; color: #81c5ff; font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .wallet-balance-dock { height: 58px; padding: 3px 8px; }
  .wallet-balance-dock button { padding: 5px 7px; }
  .wallet-balance-dock span { font-size: 10px; }
  .wallet-balance-dock b { font-size: 12px; }
}

/* Crisp-inspired wallet information architecture, rendered in AIZENO's own
   blue-black material system: destination strip → Overview/Deposit → one
   compact transfer surface. Technical addresses stay available on demand. */
.wallet-account-strip {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 0;
  padding: 8px 0 0;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #03080e;
  scrollbar-width: none;
}
.wallet-account-strip::-webkit-scrollbar { display: none; }
.wallet-account-strip button {
  position: relative;
  min-width: 0;
  min-height: 80px;
  padding: 12px 12px 13px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.wallet-account-strip button:last-child { border-right: 0; }
.wallet-account-strip button::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: transparent;
}
.wallet-account-strip button[aria-selected="true"] {
  background: linear-gradient(145deg,rgba(13,87,163,.34),rgba(14,169,215,.10));
}
.wallet-account-strip button[aria-selected="true"]::after { background: linear-gradient(90deg,#1976ff,#22c7ff); }
.wallet-account-strip b,.wallet-account-strip span,.wallet-account-strip small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallet-account-strip b { color: #dbeaff; font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.wallet-account-strip span { margin-top: 3px; color: #94a9bd; font-size: 11px; }
.wallet-account-strip small { margin-top: 5px; color: #647b91; font-size: 11px; }
.wallet-account-strip button[aria-selected="true"] b { color: #7fc4ff; }
#walletFundsNav { gap: 22px; padding: 0 20px; background: #03080e; }
#walletFundsNav button { flex: 0 0 auto; min-height: 48px; padding: 12px 2px 10px; font-size: 14px; }
#walletFundsNav button[aria-pressed="true"] { color: #dcecff; border-bottom-color: #28b7ff; }
.wallet-flow-back {
  min-height: 44px;
  margin: 4px 0 6px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: #a6bacd;
  font-size: 14px;
  cursor: pointer;
}
.wallet-flow-kicker { margin: 10px 0 12px; color: #7f96ad; font-size: 10px; font-weight: 700; letter-spacing: .18em; }
#mainWalletDepositCard .deposit-panel-head,#depositAddressesCard .deposit-panel-head { margin-bottom: 0; }
#mainWalletDepositCard .deposit-panel-head p,#depositAddressesCard .deposit-panel-head p { max-width: 34ch; }
.transfer-crypto-card {
  padding: 16px;
  border: 1px solid #183650;
  border-radius: 14px;
  background: linear-gradient(145deg,rgba(7,24,39,.98),rgba(4,13,23,.98));
  box-shadow: inset 0 1px rgba(255,255,255,.045);
}
.transfer-balance-row,.venue-balance-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.transfer-balance-row { padding-bottom: 13px; border-bottom: 1px solid rgba(103,146,183,.16); }
.transfer-balance-row span,.venue-balance-line span { color: #7890a7; font-size: 12px; }
.transfer-balance-row b,.venue-balance-line b { color: #dcecff; font-size: 14px; text-align: right; }
.venue-balance-line { margin: 2px 0 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(4,17,28,.68); }
.transfer-route-summary {
  display: grid;
  grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(103,146,183,.16);
}
.transfer-route-end { min-width: 0; }
.transfer-route-end small,.transfer-route-end b,.transfer-route-end span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transfer-route-end small { color: #69839a; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.transfer-route-end b { margin-top: 4px; color: #edf6ff; font-size: 15px; font-weight: 700; }
.transfer-route-end span { margin-top: 4px; color: #8fa7bc; font-size: 12px; }
.transfer-route-destination { text-align: right; }
.transfer-route-arrow { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid #214764; border-radius: 50%; background: #071a29; color: #68b7ff; font-size: 15px; }
.transfer-asset-line { display: flex; align-items: center; gap: 8px; margin-top: 13px; color: #8fa6bb; font-size: 12px; }
.transfer-asset-line i { width: 3px; height: 3px; border-radius: 50%; background: #4f718d; }
.transfer-receive-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(103,146,183,.16); }
.transfer-receive-row span { color: #7890a7; font-size: 12px; }
.transfer-receive-row b { color: #65dfbd; font-size: 15px; font-weight: 700; text-align: right; }
.transfer-quote-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1px;
  margin-top: 12px;
  padding: 1px;
  border: 1px solid #17384e;
  border-radius: 12px;
  overflow: hidden;
  background: #17384e;
}
.transfer-quote-grid > div { min-width: 0; padding: 13px 14px; background: #061720; }
.transfer-quote-grid span,.transfer-quote-grid b { display: block; overflow-wrap: anywhere; }
.transfer-quote-grid span { color: #70889f; font-size: 11px; }
.transfer-quote-grid b { margin-top: 6px; color: #e6f1fb; font-size: 14px; font-weight: 650; }
.transfer-quote-grid > div:nth-child(3) b { color: #65dfbd; }
.transfer-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; margin: 0 0 12px; overflow: hidden; border: 1px solid #17384e; border-radius: 10px; background: #17384e; }
.transfer-detail-grid > div { min-width: 0; padding: 11px 12px; background: #061720; }
.transfer-detail-grid span,.transfer-detail-grid b { display: block; overflow-wrap: anywhere; }
.transfer-detail-grid span { color: #70889f; font-size: 10px; }
.transfer-detail-grid b { margin-top: 5px; color: #dce9f5; font-size: 12px; font-weight: 650; }
.predict-static-assets label > b {
  display: block;
  min-height: 44px;
  padding: 11px 12px;
  border: 1px solid #1d3b55;
  border-radius: 10px;
  background: #061622;
  color: #e8f1fb;
  font-size: 14px;
}
.funding-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.funding-modal-head h2 { margin: 5px 0 8px; font-size: 24px; font-weight: 650; letter-spacing: -.025em; }
.funding-modal-head .drawer-close { flex: 0 0 auto; }
.funding-swap-box > .confirmmarket:empty { display: none; }
.funding-swap-box #predictTransferFields { gap: 0; }
.funding-swap-box #predictTransferFields > .transfer-crypto-card { margin-top: 6px; }
.predict-transfer-details { margin-top: 12px !important; }
.funding-swap-footer { justify-content: flex-start; margin-top: 4px; }
.funding-swap-footer .confirmcancel { width: auto; min-height: 36px; padding: 7px 2px; border: 0; background: transparent; color: #7690a7; font-size: 12px; }
#mainWalletDepositCard .deposit-status-action { width: 100%; margin-top: 12px; }
#mainWalletDepositCard .deposit-address-block { margin-top: 14px; }
#mainWalletDepositCard .main-wallet-balance-grid { margin-top: 4px; }
#mainWalletDepositCard .deposit-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }

@media (max-width: 520px) {
  .wallet-account-strip { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .wallet-account-strip button { min-height: 72px; padding: 10px 8px 11px; }
  .wallet-account-strip b { font-size: 11px; }
  .wallet-account-strip span { font-size: 10px; }
  .wallet-account-strip small { margin-top: 4px; font-size: 10px; }
  #walletFundsNav { padding: 0 16px; }
  #profileDrawer.deposit-mode #mainWalletDepositCard,#profileDrawer.deposit-mode #depositAddressesCard { padding: 16px; }
  #mainWalletDepositCard .deposit-panel-head,#depositAddressesCard .deposit-panel-head { display: block; }
  #depositAddressesCard .deposit-panel-head .deposit-balance { display: flex; align-items: baseline; gap: 5px; width: fit-content; margin-top: 12px; }
  .swap-asset-controls { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .transfer-crypto-card { padding: 14px; }
  .transfer-quote-grid > div { padding: 12px 10px; }
  .transfer-route-summary { grid-template-columns: minmax(0,1fr) 26px minmax(0,1fr); gap: 6px; }
  .transfer-route-arrow { width: 26px; height: 26px; }
  .transfer-route-end b { font-size: 14px; }
  .transfer-route-end span { font-size: 11px; }
  .funding-swap-back { padding: 0; align-items: stretch; }
  .funding-swap-box { min-height: 100dvh; max-height: 100dvh; padding-top: 16px; }
  .funding-modal-head h2 { font-size: 22px; }
}

/* AI Zeno reference set (Landing 1–3 and campaign states, September 2026).
   Keep Market's own information architecture and live data, but share the
   reference's material, typography, sizing and desktop navigation rhythm. */
:root {
  --bg: #010509;
  --card: #060b10;
  --card2: #090f18;
  --line: #20262d;
  --line-strong: #1762cb;
  --text: #f5f6fa;
  --dim: #939aa5;
  --accent: #237cf4;
  --accent2: #10b4e9;
  --surface: #060b10;
  --surface-soft: #060b10;
  --surface-raised: #0a101a;
  --zeno-blue: linear-gradient(105deg, #1047da 0%, #0872e7 58%, #0b9ad7 100%);
  --zeno-shadow: none;
}

html, body { background: var(--bg); }
body { color: var(--text); background: var(--bg); font-size: 16px; line-height: 1.48; }
body::before { display: none; }
html, body, button, input, select, textarea {
  font-family: "Urbanist", "Avenir Next", "Segoe UI", sans-serif !important;
}
h1, h2, h3 { font-weight: 680; letter-spacing: -0.02em; }
button, input, select, textarea { letter-spacing: 0; }

/* The source mockups use a nearly black canvas, cool grey hairlines and
   restrained blue only for selection or an action. */
#appView .card,
#appView .mcard,
#appView .panel,
#appView .detail-card,
#appView .orderbook-card,
#appView .orders-card,
#appView .featured-market-block,
#appView .featured-news-panel,
#appView .overview-panel,
#appView .portfolio-hero,
#appView .portfolio-stat,
#appView .portfolio-position-card,
#appView .portfolio-history-card,
#appView .portfolio-summary,
#appView .pulse-card,
#appView .market-summary > div,
#appView .data-provenance,
.confirmbox,
.funding-swap-box,
.embedded-auth-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 17px;
  box-shadow: none;
}
#appView .mcard:hover,
#appView .featured-market-block:hover { border-color: #34506e; }
#appView .mcard { padding: 20px; }
#appView .panel { padding: 22px; }
#appView .featured-market-block,
#appView .featured-news-panel { padding: 22px 24px; }
#appView .cards { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
#appView .featured-news-layout { gap: 14px; }
#appView .market-summary { gap: 14px; }
#appView .market-summary > div { min-height: 100px; padding: 17px; }
#appView .market-summary strong { color: var(--text); }
#appView .market-summary small,
#appView .mfoot,
#appView .featured-footer,
#appView .featured-metadata,
#appView .market-meta,
#appView .data-provenance,
#appView .overview-panel p { color: var(--dim); }
#appView .section-kicker h2,
#appView .market-list-title h2,
#appView .overview-panel h3 { color: var(--text); font-weight: 670; }
#appView .featured-title h2,
#appView .featured-main h2 { color: var(--text); }

/* Shared input and button geometry from the campaign listing/form mockups. */
#appView .search input,
#appView .market-search input,
#appView select,
#appView input[type="text"],
#appView input[type="number"],
#appView .amtin,
#appView .order-type-field select,
.confirmbox input,
.funding-swap-box input {
  background: #080e17;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  box-shadow: none;
}
#appView input::placeholder { color: #747b86; }
#appView .chips button,
#appView .explore-tabs button,
#appView .filter-toggle,
#appView .view-button,
#appView .obtn,
#appView .venueodd,
#appView .venue-price,
#appView .market-route-button,
#appView .amts button,
.confirmcancel {
  background: #080e17;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: #b9bdc6;
  box-shadow: none;
}
#appView .chips button.active,
#appView .explore-tabs button.active,
#appView .view-button.active,
#appView .obtn.sel,
#appView .venue-price.selected-outcome {
  border-color: #257be6;
  background: #0c2853;
  color: #f5f8ff;
}
#appView .deposit-head,
#appView .bigbtn.buy,
.confirmgo,
#appView .featured-odd.active {
  border: 1px solid #167bec;
  border-radius: 11px;
  background: var(--zeno-blue);
  color: white;
  box-shadow: none;
}
#appView .bigbtn.sell { border-radius: 11px; }
#appView .data-provenance { padding: 12px 16px; margin: 0 0 14px; }
#appView .featured-probability,
#appView .featured-main .featured-odd,
#appView .trade-wallet,
#appView .segbar,
#appView .slippagebox { border-color: var(--line); border-radius: 12px; background: #080f18; }
#appView .featured-history line { stroke: #27313d; }
#appView .featured-history text { fill: #89919d; }
#appView .featured-probability strong { color: var(--text); }
#appView .product-card,
#appView .metric-card,
#appView .profile-card,
#appView .referral-box,
#appView .finder-box,
#appView .trader-row,
#appView .activity-card,
#appView .notice,
.profile-drawer,
.trader-dialog,
.mobile-menu {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 17px;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#appView .filterbar button,
#appView .copy-nav button { border-radius: 11px; }
#appView .filterbar button.active,
#appView .copy-nav button.active {
  border-color: #267cef;
  background: #0d2a55;
  color: white;
}
#appView .asset-price-metrics > div,
#appView .trade-available-balance,
#appView .portfolio-source-summary { border-color: var(--line); }

/* The comparison contains only platform odds. The chart and AI analysis belong
   to the selected platform detail, one Back away from the comparison. */
#tab-trade.event-open.comparison-stage { grid-template-columns:minmax(0,1fr); }
#tab-trade.event-open.view-only-stage { grid-template-columns:minmax(0,1fr); }
#tab-trade:not(.compact-trade-stage) .trade-rail { display:none; }
#tab-trade.event-open.compact-trade-stage { grid-template-columns:minmax(0,1fr);gap:0;max-width:900px;margin-inline:auto; }
#chartCard.comparison-stage .chart-mode-switch,
#chartCard.comparison-stage .chart-mode-panel,
#chartCard.comparison-stage .detail-inline-insight,
#chartCard.comparison-stage .detail-heading-copy .eyebrow,
#chartCard.comparison-stage .detail-metadata,
#chartCard.comparison-stage .detail-secondary-actions,
#chartCard.comparison-stage .detail-stats,
#chartCard.comparison-stage .detail-tabs,
#chartCard.comparison-stage .detail-body { display:none !important; }
#chartCard .venue-compare .venue-source,
#chartCard .venue-compare .venue-state { display:none; }
#chartCard:not(.comparison-stage) #venueCompare .venue-line:not(.selected-venue-row) { display:none; }
#chartCard:not(.comparison-stage) #venueCompare .venue-line.selected-venue-row { display:grid; }
#chartCard:not(.comparison-stage) #venueCompare .venue-probability { display:none; }
#chartCard:not(.comparison-stage) #venueCompare .venue-compare-title { display:none; }
.venue-compare-title { margin:2px 0 9px;color:var(--text);font-size:15px;font-weight:720;letter-spacing:-.02em; }
.selected-venue-back { display:inline-flex;align-items:center;gap:5px;margin:8px 18px 5px;padding:6px 0;
  border:0;background:transparent;color:#82bdff;font-size:12px;font-weight:680; }
.selected-venue-back:hover,.selected-venue-back:focus-visible { color:#c5e3ff;text-decoration:underline; }
#tradeRail .trade-available-balance { margin:5px 0 12px;padding:10px 12px;border:1px solid #245078;
  border-radius:9px;background:#0b2035; }
#tradeRail .trade-available-balance span { color:#a8c9e8;font-size:12px;font-weight:620; }
#tradeRail .trade-available-balance b { color:#f5faff;font-size:15px;font-weight:740; }
@media (max-width:720px) {
  #chartCard.comparison-stage .venue-compare { margin:10px 12px 15px;padding:10px 11px; }
  #chartCard.comparison-stage .venue-compare-title { margin:0 0 3px;font-size:14px; }
  #chartCard.comparison-stage .venue-compare .venue-line,
  #chartCard.comparison-stage .venue-compare .venue-line.mobile-selected { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;
    padding:8px 0;border:0;border-top:1px solid rgba(116,157,197,.2); }
  #chartCard.comparison-stage .venue-compare .venue-main { display:flex;grid-column:1/-1;min-width:0; }
  #chartCard:not(.comparison-stage) .venue-compare .venue-line.selected-venue-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #chartCard:not(.comparison-stage) .venue-compare .venue-main { display:flex;grid-column:1/-1; }
  #chartCard.comparison-stage .venue-compare .venue-price { min-height:45px;padding:5px 7px; }
  #chartCard.comparison-stage .venue-compare .venue-price-value b { font-size:19px; }
  #chartCard.comparison-stage .venue-compare .venue-source { display:none; }
  .selected-venue-back { margin:5px 12px 0; }
}
@media (max-width:720px) and (max-height:760px) {
  #chartCard:not(.comparison-stage) .venue-compare { margin-top:2px;margin-bottom:0;padding:2px 7px; }
  #chartCard:not(.comparison-stage) .venue-compare .venue-main { display:none; }
  #chartCard:not(.comparison-stage) .venue-compare .venue-line.selected-venue-row { gap:4px;border:0; }
  #chartCard:not(.comparison-stage) .venue-compare .venue-price { min-height:28px; }
  #chartCard:not(.comparison-stage) .chart-mode-switch { margin-top:3px; }
}

/* Selected venue: one chart, one set of odds, one inline order ticket. The
   comparison stage stays a plain venue list. Keep the raw price and ending
   time outside the switchable chart panels so both views retain context. */
#tab-trade.compact-trade-stage #chartCard { display:flex;flex-direction:column; }
#tab-trade.compact-trade-stage #chartCard .detail-cover { order:0; }
#tab-trade.compact-trade-stage #selectedVenueBack { order:1; }
#tab-trade.compact-trade-stage #detailVenueBalance { order:2; }
#tab-trade.compact-trade-stage #chartCard .detail-price-overview { order:3; }
#tab-trade.compact-trade-stage #chartCard .chart-mode-switch { order:4; }
#tab-trade.compact-trade-stage #chartCard .chart-mode-panel { order:5; }
#tab-trade.compact-trade-stage #venueCompare { order:6; }
#tab-trade.compact-trade-stage #chartCard .detail-secondary-actions,
#tab-trade.compact-trade-stage #chartCard .detail-stats,
#tab-trade.compact-trade-stage #chartCard .detail-tabs,
#tab-trade.compact-trade-stage #chartCard .detail-body { display:none; }
#chartCard.comparison-stage .detail-price-overview,
#chartCard.comparison-stage .detail-venue-balance { display:none!important; }
.detail-venue-balance { display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin:5px 18px 0;padding:7px 10px;border:1px solid #245078;border-radius:8px;
  background:#0b2035;color:#d7ecff;font-size:12px; }
.detail-venue-balance b { color:#fff;font-size:14px;font-variant-numeric:tabular-nums; }
.detail-venue-balance { display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:6px; }
.detail-venue-balance time { color:#9abbd4;font-size:10px;font-variant-numeric:tabular-nums; }
.detail-venue-balance button { min-height:28px;padding:3px 8px;border:1px solid #416489;border-radius:6px;
  background:#123352;color:#e4f3ff;font-size:11px;font-weight:650;cursor:pointer; }
.detail-venue-balance button:hover { background:#1a466e; }
.detail-venue-balance button:focus-visible { outline:2px solid #69b6ff;outline-offset:2px; }
.detail-venue-balance button:disabled { opacity:.6;cursor:wait; }
.detail-venue-balance [hidden] { display:none!important; }
.detail-venue-balance[data-balance-state="error"] b { color:#ffcda0;font-size:12px; }
.wallet-balance-dock [data-balance-state="error"] { color:#ffcda0; }
.market-readonly-notice { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px; }
.market-readonly-notice>div:first-child { display:grid;gap:4px;min-width:0;line-height:1.45; }
.market-readonly-notice strong { color:#e8f1ff; }
.market-readonly-notice span { color:#9eafc4;font-size:12px; }
.market-readonly-actions { display:flex;gap:8px;flex-shrink:0; }
.market-readonly-actions select,.market-readonly-actions button { min-height:44px; }
.market-browse-only .status-pill { visibility:hidden; }
.market-browse-only #headAvatar { background:#112234;color:#91a4bb; }
.market-browse-only #featuredTrack .empty { width:100%;min-height:140px;display:grid;place-items:center; }
@media(max-width:720px) {
  .market-readonly-notice { align-items:stretch;flex-direction:column;gap:8px; }
  .market-readonly-actions { justify-content:space-between; }
  .market-readonly-actions select { min-width:0;flex:1; }
}
.detail-price-overview { margin:8px 18px 0; }
.detail-price-overview .asset-price-metrics { border:0;padding:0;margin:0; }
.detail-price-overview .asset-price-head-actions { margin-top:5px;grid-row:auto; }
#tab-trade.compact-trade-stage #venueCompare { margin-bottom:8px; }
#tab-trade.compact-trade-stage #tradeRail { position:static;inset:auto;z-index:auto;display:block;overflow:visible;
  transform:none;transition:none;background:transparent;padding:0;margin:0; }
#tab-trade.compact-trade-stage #tradeRail .panel { display:flex;flex-direction:column;border-radius:0 0 9px 9px;border-top:0; }
#tab-trade.compact-trade-stage #tradeRail .trade-amount-input { max-width:none; }
#tab-trade.compact-trade-stage #outcomes,
#tab-trade.compact-trade-stage .trade-outcome-label,
#tab-trade.compact-trade-stage .trade-asset-price,
#tab-trade.compact-trade-stage .trade-ending-time,
#tab-trade.compact-trade-stage #selTitle,
#tab-trade.compact-trade-stage #selSub,
#tab-trade.compact-trade-stage .panel-headline,
#tab-trade.compact-trade-stage .trade-account-details,
#tab-trade.compact-trade-stage #tradeAvailableBalance { display:none!important; }
.trade-market-about { margin-top:10px;padding:8px 0;border-top:1px solid #28415a;color:#aec8df;font-size:12px; }
.trade-market-about summary { cursor:pointer;color:#e3f0fc;font-weight:680; }
.trade-market-about p { margin:8px 0;line-height:1.45; }

@media (max-width:720px) {
  #tab-trade.compact-trade-stage { display:block; }
  #appView:has(#tab-trade.compact-trade-stage:not(.hidden)) main { padding-top:4px; }
  /* Header Back already returns to the platform comparison. Removing its
     duplicate row reserves room for the complete inline analysis instead. */
  #tab-trade.compact-trade-stage #selectedVenueBack { display:none; }
  #tab-trade.compact-trade-stage .detail-inline-insight p { -webkit-line-clamp:3; }
  #tab-trade.compact-trade-stage .event-breadcrumb { display:none; }
  #tab-trade.compact-trade-stage #chartCard { border-bottom:0;border-radius:9px 9px 0 0; }
  #tab-trade.compact-trade-stage #detailVenueBalance { margin:3px 11px 0;padding:4px 8px;font-size:11px; }
  #tab-trade.compact-trade-stage #detailVenueBalance b { font-size:12px; }
  #tab-trade.compact-trade-stage .detail-price-overview { margin:4px 12px 0; }
  #tab-trade.compact-trade-stage .asset-price-metrics { min-height:38px; }
  #tab-trade.compact-trade-stage .asset-price-metrics>div:first-child { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline; }
  #tab-trade.compact-trade-stage .asset-price-metrics>div:first-child>small { grid-column:1/-1;grid-row:1; }
  #tab-trade.compact-trade-stage #assetLivePrice { grid-column:1;grid-row:2; }
  #tab-trade.compact-trade-stage #assetPriceDifference { grid-column:2;grid-row:2;margin:0 0 0 3px; }
  #tab-trade.compact-trade-stage .asset-price-metrics>div:nth-child(2) { display:block; }
  #tab-trade.compact-trade-stage .asset-price-metrics small { font-size:10px; }
  #tab-trade.compact-trade-stage .asset-price-metrics b { margin-top:1px; }
  #tab-trade.compact-trade-stage .asset-price-head-actions { margin-top:3px; }
  #tab-trade.compact-trade-stage #assetPriceStatus,
  #tab-trade.compact-trade-stage #assetPriceEnding { font-size:10px; }
  #tab-trade.compact-trade-stage .chart-mode-switch { margin:4px 12px 0; }
  #tab-trade.compact-trade-stage .asset-price-panel { padding:1px 0 0; }
  #tab-trade.compact-trade-stage #assetPriceChart { height:clamp(88px,12.5dvh,116px); }
  #tab-trade.compact-trade-stage .asset-price-source { display:none; }
  #tab-trade.compact-trade-stage #chart { height:clamp(88px,12.5dvh,116px); }
  #tab-trade.compact-trade-stage #probabilityPanel .chart-section-label,
  #tab-trade.compact-trade-stage #probabilityPanel .chead { display:none; }
  #tab-trade.compact-trade-stage #probabilityPanel { padding-top:2px; }
  #tab-trade.compact-trade-stage #venueCompare { margin:3px 11px 0;padding:3px 7px;border-radius:7px; }
  #tab-trade.compact-trade-stage #venueCompare .venue-main { display:none; }
  #tab-trade.compact-trade-stage #venueCompare .venue-line.selected-venue-row { gap:5px; }
  #tab-trade.compact-trade-stage #venueCompare .venue-price { min-height:37px; }
  #tab-trade.compact-trade-stage #tradeRail { padding-bottom:84px; }
  #tab-trade.compact-trade-stage #tradeRail .panel { padding:4px 11px 10px; }
  #tab-trade.compact-trade-stage #tradeRail .segbar { margin:0 0 4px;padding:2px; }
  #tab-trade.compact-trade-stage #tradeRail .segbar button { min-height:32px;font-size:12px; }
  #tab-trade.compact-trade-stage #tradeRail .order-type-field { margin:0 0 4px;font-size:11px; }
  #tab-trade.compact-trade-stage #tradeRail .order-type-field { order:3;margin-top:8px; }
  #tab-trade.compact-trade-stage #tradeRail .order-type-field select { min-height:28px;padding:2px 8px;font-size:11px; }
  #tab-trade.compact-trade-stage #tradeRail .amount-label { display:block;margin:2px 0 3px;font-size:11px; }
  #tab-trade.compact-trade-stage #tradeRail .trade-amount-input .amtin { min-height:37px;height:37px;padding:4px 55px 4px 10px;font-size:17px; }
  #tab-trade.compact-trade-stage #tradeRail .trade-amount-input>span { font-size:11px; }
  #tab-trade.compact-trade-stage #tradeRail .trade-quote-hint,
  #tab-trade.compact-trade-stage #tradeRail .trade-estimate { display:none; }
  #tab-trade.compact-trade-stage #tradeRail .amts { display:flex;gap:6px;margin:4px 0; }
  #tab-trade.compact-trade-stage #tradeRail .amts button { min-height:32px;padding:3px 4px;font-size:12px; }
  #tab-trade.compact-trade-stage #btnTrade { min-height:41px;margin-top:0;font-size:14px; }
  #tab-trade.compact-trade-stage #btnTrade { order:1; }
  #tab-trade.compact-trade-stage .trade-market-about { order:2; }
  #tab-trade.compact-trade-stage .slippagebox { order:4; }
  #tab-trade.compact-trade-stage .trade-rules-note { order:5; }
  #tab-trade.compact-trade-stage .market-position-card,
  #tab-trade.compact-trade-stage .orderbook-card,
  #tab-trade.compact-trade-stage .orders-card,
  #tab-trade.compact-trade-stage .activity-card { display:none!important; }
  #tab-trade.compact-trade-stage .slippagebox { margin-top:5px; }
  #tab-trade.compact-trade-stage .trade-rules-note { margin:5px 0 0;font-size:10px; }
}
@media (max-width:720px) and (max-height:760px) {
  #tab-trade.compact-trade-stage .detail-cover { padding:5px 11px 0; }
  #tab-trade.compact-trade-stage .detail-top #detailCoin,
  #tab-trade.compact-trade-stage .detail-top #detailCoin .asset-art { width:31px;height:31px;flex-basis:31px; }
  #tab-trade.compact-trade-stage .detail-top { grid-template-columns:31px minmax(0,1fr) 22px;gap:3px 6px; }
  #tab-trade.compact-trade-stage .detail-heading-copy h2 { font-size:14px;line-height:1.1; }
  #tab-trade.compact-trade-stage .detail-inline-insight { padding:3px 6px; }
  #tab-trade.compact-trade-stage .selected-venue-back { margin:2px 11px 0;padding:1px 0; }
  #tab-trade.compact-trade-stage .selected-venue-back { min-height:30px;height:30px; }
  #tab-trade.compact-trade-stage #assetPriceChart { height:96px; }
  #tab-trade.compact-trade-stage #chart { height:96px; }
  #tab-trade.compact-trade-stage .asset-chart-times { display:none; }
}
@media (max-width:720px) and (max-height:700px) {
  /* On short browser viewports the permanent header Back returns to the venue
     comparison, so the second Back row is redundant. */
  #tab-trade.compact-trade-stage #selectedVenueBack { display:none; }
  #tab-trade.compact-trade-stage #detailVenueBalance { padding:2px 7px; }
  #tab-trade.compact-trade-stage .asset-price-metrics { min-height:35px; }
  #tab-trade.compact-trade-stage .asset-price-head-actions { margin-top:0; }
  #tab-trade.compact-trade-stage .chart-mode-switch { padding:1px;margin-top:2px; }
  #tab-trade.compact-trade-stage .chart-mode-switch button { height:25px;min-height:25px; }
  #tab-trade.compact-trade-stage #assetPriceChart,
  #tab-trade.compact-trade-stage #chart { height:96px; }
  #tab-trade.compact-trade-stage #venueCompare { margin-top:1px;padding:1px 5px; }
  #tab-trade.compact-trade-stage #venueCompare .venue-price { min-height:33px;height:33px; }
  #tab-trade.compact-trade-stage #tradeRail { margin-top:0; }
  #tab-trade.compact-trade-stage #tradeRail .segbar { padding:1px;margin-bottom:3px; }
  #tab-trade.compact-trade-stage #tradeRail .segbar button { height:32px;min-height:32px;padding:2px 7px; }
  #tab-trade.compact-trade-stage #tradeRail .amount-label { position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap; }
  #tab-trade.compact-trade-stage #tradeRail .trade-amount-input .amtin { height:35px;min-height:35px; }
  #tab-trade.compact-trade-stage #btnTrade { height:42px;min-height:42px;padding:6px 10px; }
}

/* The reference is a desktop-first dashboard: a 15%-width fixed navigation
   rail, a shallow utility/balance band, and an unconstrained content canvas. */
@media (min-width: 1180px) {
  #appView { --market-rail-width: clamp(228px, 14.8vw, 304px); }
  #appView header.app-header {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--market-rail-width);
    height: 100dvh;
    display: block;
    padding: 34px 25px;
    border: 0;
    border-right: 1px solid #121a23;
    background: #070d14;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    z-index: 31;
  }
  #appView header.app-header > .brand {
    display: flex;
    width: 100%;
    min-width: 0;
    height: 50px;
    margin: 0;
    --brand-symbol-size: clamp(36px, 2vw, 42px);
    --brand-text-size: clamp(18px, 1.1vw, 22px);
    --brand-gap: 11px;
  }
  #appView header.app-header > .mobile-brand { display: none; }
  #appView .brand-logo-frame span { color: #f5f6fa; letter-spacing: .035em; }
  #appView nav.tabs,
  #appView.has-wallet-balance-dock nav.tabs {
    position: fixed;
    inset: 124px auto 176px 0;
    top: 124px;
    left: 0;
    width: var(--market-rail-width);
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    overflow-y: auto;
    padding: 0 25px 12px;
    border: 0;
    background: transparent;
    box-shadow: none;
    z-index: 32;
  }
  #appView nav.tabs button {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-start;
    width: 100%;
    min-height: 61px;
    padding: 0 16px;
    gap: 11px;
    border: 1px solid transparent;
    border-radius: 16px;
    color: #aaadb5;
    font-size: clamp(15px, .85vw, 17px);
    font-weight: 590;
    text-align: left;
    background: transparent;
  }
  #appView nav.tabs button[data-tab]:not(.hidden) { display: flex !important; }
  #appView nav.tabs .mobile-more-nav { display: none !important; }
  #appView nav.tabs button::before { display: none; }
  #appView nav.tabs::after { display: none; }
  #appView nav.tabs button .ui-icon { display: block; width: 25px; height: 25px; }
  #appView nav.tabs button:hover { color: white; background: #111a27; }
  #appView nav.tabs button.active {
    color: white;
    border-color: #267cef;
    background: linear-gradient(100deg, #0d4dc5 0%, #0b377d 51%, #0a192d 100%);
  }
  #appView .market-route-actions {
    position: fixed;
    left: 25px;
    bottom: 112px;
    width: calc(var(--market-rail-width) - 50px);
  }
  #appView .market-route-button { width: 100%; justify-content: flex-start; padding: 0 20px; }
  #appView header.app-header .search {
    position: fixed;
    top: 23px;
    right: 228px;
    width: min(410px, calc((100vw - var(--market-rail-width)) * .38));
    max-width: none;
    z-index: 34;
  }
  #appView header.app-header .search input { height: 51px; min-height: 51px; }
  #appView .header-actions { display: contents; }
  #appView .header-actions .wallet-head,
  #appView .header-actions .money,
  #appView .header-actions .status-pill { display: none; }
  #appView .header-actions .notification-head,
  #appView .header-actions .deposit-head { position: fixed; top: 27px; z-index: 34; height: 44px; }
  #appView .header-actions .notification-head { right: 35px; width: 44px; }
  #appView .header-actions .deposit-head { right: 91px; padding: 0 15px; }
  #appView .header-actions .profile-head {
    position: fixed;
    left: 25px;
    bottom: 24px;
    width: calc(var(--market-rail-width) - 50px);
    min-width: 0;
    height: 78px;
    padding: 10px 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #10171d;
    z-index: 35;
  }
  #appView .profile-head .account-copy { max-width: calc(100% - 58px); }
  #appView .profile-head .account-copy b { font-size: 16px; }
  #appView .profile-head .account-copy small { font-size: 13px; }
  #appView .profile-head .avatar { width: 45px; height: 45px; min-width: 45px; }
  #appView .wallet-balance-dock {
    position: sticky;
    top: 0;
    width: calc(100% - var(--market-rail-width));
    height: 123px;
    margin-left: var(--market-rail-width);
    padding: 78px 36px 9px;
    border-color: #182029;
    background: #010509;
    z-index: 22;
  }
  #appView .wallet-balance-dock button { padding: 2px 18px; border-color: #242a32; }
  #appView .wallet-balance-dock button:first-child { padding-left: 0; }
  #appView .wallet-balance-dock span { color: #969eab; font-size: 12px; }
  #appView .wallet-balance-dock b { color: var(--text); font-size: 16px; }
  #appView main {
    width: calc(100% - var(--market-rail-width));
    max-width: none;
    min-width: 0;
    margin: 0 0 0 var(--market-rail-width);
    padding: 31px 36px 90px;
  }
  #appView .panel { top: 116px; }
  #appView .crypto-explore-hero h1 { font-size: clamp(32px, 2.4vw, 40px); }
  #appView .market-summary > div { min-height: 115px; }
  #appView .featured-news-layout { grid-template-columns: minmax(0, 1.65fr) minmax(290px, 1fr); }
  #appView table th { color: #9299a4; font-size: 14px; font-weight: 560; }
  #appView table td { color: #d8dbe2; font-size: 15px; }
  #appView table th,
  #appView table td { padding: 13px 15px; border-bottom: 1px solid #232a31; }
}

/* On narrower screens preserve Market's accessible mobile navigation and
   account-balance strip; only the reference material and spacing change. */
@media (max-width: 1179px) {
  #appView header.app-header,
  #appView nav.tabs,
  #appView .wallet-balance-dock { background: #070d14; border-color: #20262d; box-shadow: none; }
  #appView .wallet-balance-dock button { border-color: #252b32; }
  #appView .search input { background: #080e17; }
  #appView main { max-width: none; }
  #appView .market-summary > div { min-height: 84px; }
}
@media (max-width: 720px) {
  #appView main { padding: 18px 14px calc(100px + env(safe-area-inset-bottom)); }
  #appView nav.tabs button.active { color: #70a9ff; }
  #appView .mcard,
  #appView .featured-market-block,
  #appView .featured-news-panel,
  #appView .panel { padding: 16px; border-radius: 15px; }
  #appView .market-summary { gap: 7px; }
  #appView .market-summary > div { min-height: 68px; padding: 10px 8px; border-radius: 12px; }
  #appView .market-summary strong { font-size: 17px; }
  #appView .featured-news-layout { grid-template-columns: 1fr; }
  #appView .cards { grid-template-columns: 1fr; }
}

/* Bring account and order dialogs into the same restrained, navy modal
   system as the campaign builder reference. Keep their trading controls and
   confirmation sequence intact. */
.confirmback,
.trader-modal,
.drawer-backdrop { background: rgba(0, 2, 6, .88); }
.confirmbox,
.trader-dialog,
.profile-drawer,
.funding-swap-box,
.mobile-menu {
  background: #090f1a;
  border: 1px solid #254571;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.confirmbox { width: min(620px, 100%); padding: clamp(22px, 3vw, 36px); border-radius: 18px; }
.confirmbox h2,
.trader-dialog h2 { color: #f5f6fa; font-size: clamp(22px, 2vw, 28px); line-height: 1.2; font-weight: 680; }
.confirmmarket { color: #a4aab4; font-size: 14px; line-height: 1.5; margin: 9px 0 20px; }
.confirmgrid {
  gap: 12px 20px;
  padding: 18px;
  border: 1px solid #242b36;
  border-radius: 12px;
  background: #0b121e;
  font-size: 14px;
}
.confirmgrid span:nth-child(odd) { color: #9da5b2; }
.confirmactions { gap: 12px; margin-top: 22px; }
.confirmactions button { min-height: 50px; padding: 10px 18px; border-radius: 11px; font-size: 15px; font-weight: 650; }
.confirmcancel { color: #c8cbd2; background: #0c111a; border: 1px solid #31507d; }
.confirmcancel:hover { color: white; border-color: #3988ee; }
.confirmgo { background: var(--zeno-blue); color: #fff; border: 1px solid #147cec; }
.confirmgo:hover:not(:disabled) { filter: brightness(1.12); }
.funding-swap-box { width: min(600px, calc(100vw - 28px)); border-radius: 18px; }
.profile-drawer { background: #090f1a; border-left-color: #254571; }
#appView .profile-card,
#appView .setupstep,
.funding-swap-box .confirmgrid { background: #0b121e; border-color: #242b36; box-shadow: none; }

/* Portfolio mirrors the reference dashboard's compact KPI-and-data rhythm.
   It must still leave the category history visible on first entry. */
#appView .portfolio-hero { gap: 13px; margin-bottom: 14px; }
#appView .portfolio-hero .card { min-height: 108px; padding: 18px 20px; }
#appView .portfolio-hero .eyebrow { color: #a4a9b2; font-size: 13px; letter-spacing: 0; text-transform: none; }
#appView .portfolio-hero .value { margin-top: 4px; color: #f5f6fa; font-size: clamp(24px, 2vw, 30px); font-weight: 700; line-height: 1.12; }
#appView .portfolio-hero .portfolio-sources { color: #9199a5; font-size: 11px; }
#appView .portfolio-filterbar { gap: 9px; margin-bottom: 14px; }
#appView .portfolio-filterbar button { min-height: 45px; padding: 0 17px; font-size: 14px; border: 1px solid #252c35; background: #0b1016; }
#appView .portfolio-filterbar button.active { border-color: #2b86fb; color: #fff; background: #103369; }
#appView .portfolio-positions-table,
#appView .portfolio-results,
#appView #portfolioActivityView,
#appView #portfolioOrdersView,
#appView #portfolioWalletView { padding: 22px 26px; }
#appView .portfolio-positions-table h2,
#appView .portfolio-results h2,
#appView #portfolioActivityView h2,
#appView #portfolioOrdersView h2,
#appView #portfolioWalletView h2 { color: #f5f6fa; font-size: 19px; font-weight: 670; letter-spacing: -.015em; }
#appView .portfolio-positions-table table { margin-top: 11px; }
#appView .portfolio-inline-row,
#appView .wallet-transfer-history-row { padding: 15px 18px; border-color: #252c35; border-radius: 11px; background: #0b111a; }
#appView .portfolio-inline-row strong,
#appView .wallet-transfer-history-row strong { color: #e9edf4; }

/* Reference empty screens are intentional, centered states, not tiny status
   text stranded inside a large card. No market values are fabricated. */
#appView .featured-loading,
#appView .featured-news-panel .empty,
#appView .product-list > .empty,
#appView .activity-feed > .empty {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 28px;
  color: #a0a8b4;
  font-size: 14px;
  text-align: center;
  line-height: 1.5;
}
#appView .featured-loading { min-height: 300px; border: 1px solid #252c35; border-radius: 17px; background: radial-gradient(circle at 50% 43%, #0c1e36 0%, #080e16 44%, #060b10 100%); }
#appView .featured-news-panel .empty { min-height: 260px; }
#appView #markets > .empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 340px;
  padding: 32px;
  border: 1px solid #202a37;
  border-radius: 17px;
  background: radial-gradient(circle at 50% 30%, rgba(24, 91, 174, .13), transparent 220px), #060b10;
  color: #c1c7d1;
  font-size: 17px;
  font-weight: 590;
  line-height: 1.5;
  text-align: center;
}
#appView #markets > .empty::before {
  content: "";
  display: block;
  width: 82px;
  height: 82px;
  border: 1px solid #1d5ba5;
  border-radius: 50%;
  background: #0b2039 url("assets/brand/zeno-symbol-cutout.png") center / 43px no-repeat;
  box-shadow: 0 0 0 11px rgba(20, 82, 161, .08), 0 0 35px rgba(28, 113, 238, .16);
}

@media (max-width: 720px) {
  .confirmbox { width: 100%; padding: 22px 18px; border-radius: 15px; }
  .confirmbox h2,
  .trader-dialog h2 { font-size: 22px; }
  .confirmgrid { padding: 14px; font-size: 13px; }
  .confirmactions button { min-height: 48px; font-size: 14px; }
  .funding-swap-box { width: 100%; min-height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  #appView .portfolio-hero { gap: 7px; margin-bottom: 9px; }
  #appView .portfolio-hero .card { min-height: 0; padding: 10px 11px; }
  #appView .portfolio-hero .eyebrow { font-size: 10px; }
  #appView .portfolio-hero .value { margin-top: 3px; font-size: 17px; }
  #appView .portfolio-hero .primary .value { font-size: 22px; }
  #appView .portfolio-filterbar { gap: 6px; }
  #appView .portfolio-filterbar button { min-height: 40px; padding: 0 9px; font-size: 12px; }
  #appView .portfolio-positions-table,
  #appView .portfolio-results,
  #appView #portfolioActivityView,
  #appView #portfolioOrdersView,
  #appView #portfolioWalletView { padding: 16px; }
  #appView .featured-loading { min-height: 210px; }
  #appView .featured-news-panel .empty { min-height: 140px; }
  #appView #markets > .empty { min-height: 280px; padding: 25px; font-size: 15px; }
  #appView #markets > .empty::before { width: 70px; height: 70px; background-size: 38px; }
}

#appView .featured-heading .featured-title { min-width: 0; flex: 1; }
.search-market-row, .related-market-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.search-market-row .search-item, .related-market-row .activity-line { flex: 1; width: auto; min-width: 0; }
@media (max-width: 720px) {
  #appView .featured-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 8px; }
  #appView .featured-heading .featured-title { grid-column: 1; grid-row: 1; }
  #appView .featured-heading .featured-save { grid-column: 2; grid-row: 1; }
}

/* A venue with no published probability series should not reserve a full
   chart-sized black rectangle or render a tiny SVG disclaimer. */
#probabilityPanel.is-empty #chart { display:none; }
#probabilityPanel.is-empty #chartWrap {
  display:flex;align-items:center;justify-content:center;min-height:86px;
  border:1px solid #26435d;border-radius:10px;
  background:linear-gradient(115deg,rgba(13,36,60,.88),rgba(5,20,34,.9));
}
#probabilityPanel .probability-empty-state {
  max-width:34ch;padding:12px;color:#d3e5f7;text-align:center;
  font-size:13px;font-weight:600;line-height:1.35;
}
#probabilityPanel .probability-empty-state[hidden] { display:none; }
@media (max-width:720px) {
  #tab-trade.compact-trade-stage #probabilityPanel.is-empty #chartWrap {
    min-height:62px;margin:5px 12px 2px;padding:2px 7px;
  }
  #tab-trade.compact-trade-stage #probabilityPanel .probability-empty-state {
    padding:7px;font-size:12px;line-height:1.3;
  }
}

/* No verified price ticks: keep the target and status visible without an
   empty price plot or dash-only axis. Real ticks restore the full live chart. */
#assetPricePanel.is-empty #assetPriceChart,
#assetPricePanel.is-empty .asset-chart-y-axis,
#assetPricePanel.is-empty .asset-chart-times { display:none; }
#assetPricePanel.is-empty .asset-chart-plot {
  display:grid;place-items:center;min-height:86px;
  border:1px solid #26435d;border-radius:10px;
  background:linear-gradient(115deg,rgba(13,36,60,.88),rgba(5,20,34,.9));
}
#assetPricePanel.is-empty .asset-chart-empty {
  position:static;inset:auto;max-width:34ch;padding:12px;
  color:#d3e5f7;font-size:13px;font-weight:600;line-height:1.35;
}

/* Insight is scoped to the executable ticket; never leak it into previews. */
#detailInlineInsight[hidden] { display:none!important; }
#detailInlineInsight .detail-insight-head { display:flex;align-items:center;gap:8px;justify-content:space-between;flex-wrap:nowrap; }
#detailInlineInsight .insight-direction { flex:0 0 auto;font-size:12px;line-height:1.25;padding:3px 7px;border-radius:6px;
  color:#b8c7d8;background:rgba(122,155,188,.12);font-weight:750;white-space:nowrap; }
#detailInlineInsight .insight-direction[data-direction="yes"] { color:#70e2b7;background:rgba(29,178,124,.13); }
#detailInlineInsight .insight-direction[data-direction="no"] { color:#ffaaaa;background:rgba(229,85,107,.13); }
#detailInsightBasis { display:block;flex:1;min-width:0;font-size:10px;line-height:1.3;color:#97acc2;margin:0;text-align:right;-webkit-line-clamp:unset;overflow:visible; }
#detailInlineInsight :is(#detailInsightWatch,#detailInsightUncertainty) { display:none; }

/* Checkout owns one selected-platform balance. Hide only the duplicate
   presentation, not the dock's read state: its verified values still feed
   the ticket and reappear unchanged on Explore/platform comparison. */
#appView:has(#tab-trade.compact-trade-stage:not(.hidden)) :is(#walletBalanceDock,.wallet-head,.money) { display:none!important; }
#appView:has(#tab-trade.compact-trade-stage:not(.hidden)) #chartCard { scroll-margin-top:var(--header); }
#tab-trade.compact-trade-stage #detailVenueBalance {
  grid-template-columns:minmax(0,1fr) auto auto;margin:8px 18px 0;padding:6px 0;
  border:0;border-bottom:1px solid rgba(122,155,188,.18);border-radius:0;
  background:transparent;color:#9db1c7;
}
#tab-trade.compact-trade-stage #detailBalanceUpdated { display:none; }
#tab-trade.compact-trade-stage #detailBalanceValue { color:#f4f8fc; }
#tab-trade.compact-trade-stage #chartCard { margin-bottom:0; }
.trade-inline-error { margin:5px 0 7px;padding:7px 9px;border-left:2px solid #f29794;
  border-radius:4px;background:rgba(169,54,54,.12);color:#ffb7b3;
  font-size:12px;line-height:1.35;overflow-wrap:anywhere; }
#tab-trade.compact-trade-stage #tradeInlineError { order:0; }
@media(min-width:721px) and (max-width:1179px) {
  #appView.has-wallet-balance-dock:has(#tab-trade.compact-trade-stage:not(.hidden)) nav.tabs { top:var(--header); }
}
@media(max-width:720px) {
  #tab-trade.compact-trade-stage #chartCard { border-radius:12px 12px 0 0; }
  #tab-trade.compact-trade-stage .detail-cover { padding:10px 12px 0; }
  #tab-trade.compact-trade-stage .detail-heading-copy h2 { font-size:15px;line-height:1.25;letter-spacing:-.015em; }
  #tab-trade.compact-trade-stage .detail-inline-insight { margin-top:7px;padding:7px 8px;
    border-color:rgba(89,138,185,.3);background:rgba(18,43,68,.45);border-radius:8px; }
  #tab-trade.compact-trade-stage .detail-inline-insight { grid-template-columns:minmax(0,1fr);gap:2px; }
  #tab-trade.compact-trade-stage .detail-inline-insight .detail-insight-head { grid-column:1;grid-row:1; }
  #tab-trade.compact-trade-stage .detail-inline-insight p { grid-column:1;grid-row:2; }
  #tab-trade.compact-trade-stage #detailInsightBasis { font-size:9px;line-height:1.2;margin:0; }
  #tab-trade.compact-trade-stage :is(#detailInsightWatch,#detailInsightUncertainty) { display:none; }
  #tab-trade.compact-trade-stage .detail-inline-insight p { font-size:12px;line-height:1.35; }
  #tab-trade.compact-trade-stage #detailVenueBalance { margin:5px 12px 0;padding:5px 0;font-size:12px; }
  #tab-trade.compact-trade-stage #detailVenueBalance b { font-size:13px; }
  #tab-trade.compact-trade-stage .detail-price-overview { margin:7px 12px 0; }
  #tab-trade.compact-trade-stage .chart-mode-switch { margin:6px 12px 0; }
  #tab-trade.compact-trade-stage .chart-mode-switch button { min-height:28px;height:28px; }
  #tab-trade.compact-trade-stage #assetPriceChart,
  #tab-trade.compact-trade-stage #chart { height:clamp(100px,15dvh,128px); }
  #tab-trade.compact-trade-stage #venueCompare { margin:6px 12px 0;padding:0;border:0;background:transparent; }
  #tab-trade.compact-trade-stage #venueCompare .venue-line.selected-venue-row { padding:0;gap:7px; }
  #tab-trade.compact-trade-stage #venueCompare .venue-price { min-height:40px;height:40px;border-radius:9px; }
  #tab-trade.compact-trade-stage #tradeRail { margin-top:0; }
  #tab-trade.compact-trade-stage #tradeRail .panel { padding:7px 12px 12px;border-radius:0 0 12px 12px; }
  #tab-trade.compact-trade-stage #tradeRail .segbar { margin-bottom:6px; }
  #tab-trade.compact-trade-stage #tradeRail .segbar button { min-height:33px;height:33px; }
  #tab-trade.compact-trade-stage #tradeRail .trade-amount-input .amtin { min-height:38px;height:38px;font-size:17px; }
  #tab-trade.compact-trade-stage #btnTrade { margin-top:6px;min-height:43px;height:43px;border-radius:9px; }
  #tab-trade.compact-trade-stage #tradeInlineError { margin:3px 0 0;padding:3px 8px;font-size:11px;line-height:1.3; }
}
@media(max-width:720px) and (max-height:700px) {
  #tab-trade.compact-trade-stage .detail-cover { padding-top:6px; }
  #tab-trade.compact-trade-stage .detail-heading-copy h2 { margin:0; }
  #tab-trade.compact-trade-stage .detail-top .eyebrow { margin-bottom:2px; }
  #tab-trade.compact-trade-stage .detail-inline-insight { margin-top:4px;padding:4px 7px; }
  #tab-trade.compact-trade-stage .detail-inline-insight { grid-template-columns:minmax(0,1fr);gap:1px;padding-top:3px;padding-bottom:3px; }
  #tab-trade.compact-trade-stage .detail-inline-insight .detail-insight-head { grid-column:1;grid-row:1; }
  #tab-trade.compact-trade-stage .detail-inline-insight .insight-direction { font-size:11px;padding:1px 6px; }
  #tab-trade.compact-trade-stage .detail-inline-insight p { grid-column:1;grid-row:2;display:block;-webkit-line-clamp:unset;overflow:visible; }
  #tab-trade.compact-trade-stage #detailVenueBalance { margin-top:3px;padding:3px 0; }
  #tab-trade.compact-trade-stage .detail-price-overview { margin-top:5px; }
  #tab-trade.compact-trade-stage .chart-mode-switch { margin-top:3px; }
  #tab-trade.compact-trade-stage .asset-price-panel { margin-top:3px; }
  #tab-trade.compact-trade-stage #assetPriceChart,
  #tab-trade.compact-trade-stage #chart { height:90px; }
  #tab-trade.compact-trade-stage #tradeRail .panel { padding-top:5px; }
  #tab-trade.compact-trade-stage #venueCompare { margin-top:4px; }
  #tab-trade.compact-trade-stage #venueCompare .venue-price { min-height:38px;height:38px; }
  #tab-trade.compact-trade-stage #btnTrade { margin-top:3px; }
  #tab-trade.compact-trade-stage .trade-amount-controls { display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:6px;align-items:center; }
  #tab-trade.compact-trade-stage .trade-amount-controls .trade-amount-input { min-width:0;margin:0; }
  #tab-trade.compact-trade-stage #tradeRail .amts { margin:0;gap:4px; }
  #tab-trade.compact-trade-stage #tradeRail .amts button { min-width:0;min-height:38px;padding:2px;font-size:11px; }
}
@media (max-width:720px) {
  #tab-trade.compact-trade-stage #assetPricePanel.is-empty .asset-chart-plot {
    min-height:62px;margin:5px 12px 2px;padding:2px 7px;
  }
  #tab-trade.compact-trade-stage #assetPricePanel.is-empty .asset-chart-empty {
    padding:7px;font-size:12px;line-height:1.3;
  }
}

/* Selected-platform checkout only: keep the chart/odds and the order action
   visible together on a desktop. Explore and the venue comparison are intact. */
@media (min-width:721px) {
  #tab-trade.compact-trade-stage .event-breadcrumb,
  #tab-trade.compact-trade-stage #selectedVenueBack,
  #tab-trade.compact-trade-stage .detail-metadata { display:none; }
  #tab-trade.compact-trade-stage .detail-cover { padding:14px 18px 0; }
  #tab-trade.compact-trade-stage .detail-top { display:grid;grid-template-columns:42px minmax(0,1fr) 24px;gap:7px 10px; }
  #tab-trade.compact-trade-stage .detail-top #detailCoin,
  #tab-trade.compact-trade-stage .detail-top #detailCoin .asset-art { width:42px;height:42px;flex-basis:42px; }
  #tab-trade.compact-trade-stage .detail-heading-copy h2 { margin:0;font-size:20px;line-height:1.25; }
  #tab-trade.compact-trade-stage .detail-heading-copy .eyebrow { margin-bottom:3px; }
  #tab-trade.compact-trade-stage .detail-inline-insight { grid-column:1/-1;min-width:0;padding:9px 11px; }
  #tab-trade.compact-trade-stage .detail-inline-insight p { font-size:13px;line-height:1.4; }
  #tab-trade.compact-trade-stage .detail-price-overview { margin-top:9px; }
  #tab-trade.compact-trade-stage .chart-mode-switch { margin-top:8px; }
  #tab-trade.compact-trade-stage .chart-mode-switch button { min-height:34px; }
  #tab-trade.compact-trade-stage .asset-price-panel { margin-top:3px;padding:3px 0 8px; }
  #tab-trade.compact-trade-stage #assetPriceChart,
  #tab-trade.compact-trade-stage #chart { height:clamp(132px,22dvh,185px); }
  #tab-trade.compact-trade-stage .asset-price-source,
  #tab-trade.compact-trade-stage #probabilityPanel .chart-section-label,
  #tab-trade.compact-trade-stage #probabilityPanel .chead { display:none; }
  #tab-trade.compact-trade-stage #venueCompare { margin:5px 18px 14px;padding:0;border:0;background:transparent; }
  #tab-trade.compact-trade-stage #venueCompare .venue-main { display:none; }
  #tab-trade.compact-trade-stage #venueCompare .venue-line.selected-venue-row { padding:0;gap:8px; }
  #tab-trade.compact-trade-stage #venueCompare .venue-price { min-height:48px;height:48px;padding:5px; }
  #tab-trade.compact-trade-stage #venueCompare .venue-price-value b { font-size:23px; }
  #tab-trade.compact-trade-stage #tradeRail .panel { padding:16px;border:1px solid var(--line);border-radius:12px; }
  #tab-trade.compact-trade-stage #tradeRail .segbar { margin:0 0 10px; }
  #tab-trade.compact-trade-stage #tradeRail .segbar button { min-height:40px; }
  #tab-trade.compact-trade-stage #tradeRail .amount-label { margin:0 0 5px;font-size:12px; }
  #tab-trade.compact-trade-stage #tradeRail .trade-amount-input .amtin { min-height:44px;height:44px;margin:0;font-size:19px; }
  #tab-trade.compact-trade-stage #tradeRail .trade-estimate { margin:9px 0;padding:8px 10px;border-radius:8px; }
  #tab-trade.compact-trade-stage #tradeRail .trade-quote-hint,
  #tab-trade.compact-trade-stage .market-position-card,
  #tab-trade.compact-trade-stage .orderbook-card,
  #tab-trade.compact-trade-stage .orders-card,
  #tab-trade.compact-trade-stage .activity-card { display:none!important; }
  #tab-trade.compact-trade-stage #tradeRail .amts { display:flex;gap:7px;margin:6px 0; }
  #tab-trade.compact-trade-stage #tradeRail .amts button { min-height:35px;padding:4px;font-size:13px; }
  #tab-trade.compact-trade-stage #btnTrade { order:1;min-height:46px;margin:0;border-radius:9px; }
  #tab-trade.compact-trade-stage .trade-market-about { order:2; }
  #tab-trade.compact-trade-stage .order-type-field { order:3;margin-top:8px; }
  #tab-trade.compact-trade-stage .slippagebox { order:4;margin-top:8px; }
  #tab-trade.compact-trade-stage .trade-rules-note { order:5; }
}

/* Keep one mobile checkout anchor, including short/zoomed phones. */
@media (max-width:720px) {
  #tab-trade.compact-trade-stage .trade-amount-controls,
  #tab-trade.compact-trade-stage #limitRow {
    scroll-margin-bottom:calc(146px + env(safe-area-inset-bottom));
  }
  #appView #tab-trade.compact-trade-stage #btnTrade:disabled {
    opacity:1;filter:brightness(.65) saturate(.65);
    box-shadow:0 -9px 0 10px #070d14,0 8px 22px rgba(0,0,0,.38);
  }
}
@media (min-width:1180px) {
  #appView:has(#tab-trade.compact-trade-stage:not(.hidden)) main { padding:92px 28px 32px; }
  #tab-trade.event-open.compact-trade-stage {
    grid-template-columns:minmax(0,1fr) 310px;align-items:start;gap:16px;max-width:1120px;
  }
  #tab-trade.compact-trade-stage #chartCard { border:1px solid var(--line);border-radius:12px; }
}
@media (min-width:721px) and (max-height:780px) {
  /* A populated live feed needs slightly less plot height on short desktops;
     balance, Insight, the full price line, odds and Place Order stay in view. */
  #tab-trade.compact-trade-stage #assetPriceChart,
  #tab-trade.compact-trade-stage #chart { height:clamp(112px,16dvh,124px); }
}

/* Give the selected market's live chart room to breathe. Keep the comparison
   page unchanged: its only job is choosing a venue. */
#tab-trade.compact-trade-stage #chartCard #detailInlineInsight {
  order:7;flex:none;min-width:0;width:auto;margin:9px 18px 0;
}
#tab-trade.compact-trade-stage #chartCard #venueCompare { order:6; }

@media (max-width:720px) {
  #tab-trade.compact-trade-stage #chartCard {
    border:1px solid #203246;border-radius:13px;
    background:linear-gradient(165deg,#081522 0%,#050d17 100%);
  }
  #tab-trade.compact-trade-stage .detail-cover { padding:12px 14px 0; }
  #tab-trade.compact-trade-stage .detail-heading-copy h2 {
    font-size:16px;line-height:1.22;
  }
  #tab-trade.compact-trade-stage .detail-metadata { display:none; }
  #tab-trade.compact-trade-stage #detailVenueBalance {
    margin:8px 14px 0;padding:5px 0;
  }
  #tab-trade.compact-trade-stage .detail-price-overview { margin:8px 14px 0; }
  #tab-trade.compact-trade-stage .chart-mode-switch { margin:9px 14px 0; }
  #tab-trade.compact-trade-stage #assetPricePanel {
    margin:7px 14px 0;padding:6px 6px 5px;
    border:1px solid rgba(95,133,169,.2);border-radius:10px;
    background:linear-gradient(160deg,rgba(12,31,48,.68),rgba(4,14,25,.32));
  }
  #tab-trade.compact-trade-stage #assetPriceChart,
  #tab-trade.compact-trade-stage #chart {
    height:clamp(130px,20.5dvh,180px);
  }
  #tab-trade.compact-trade-stage #probabilityPanel { margin-top:7px; }
  #tab-trade.compact-trade-stage #venueCompare {
    margin:9px 14px 0;padding:0;
  }
  #tab-trade.compact-trade-stage #venueCompare .venue-price {
    min-height:42px;height:42px;
  }
  #tab-trade.compact-trade-stage #chartCard #detailInlineInsight {
    margin:10px 14px 12px;padding:8px 10px;
    border-color:rgba(77,124,172,.3);
  }
  #tab-trade.compact-trade-stage #tradeRail .panel {
    margin-top:8px;padding:9px 14px 12px;
    border:1px solid #203246;border-radius:12px;
    background:#07121e;backdrop-filter:none;
  }
  #appView:has(#tab-trade.compact-trade-stage:not(.hidden)) nav.tabs { display:flex; }
  #tab-trade.compact-trade-stage #tradeRail .segbar {
    margin-bottom:8px;
  }
  #tab-trade.compact-trade-stage .trade-amount-controls {
    display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:6px;align-items:center;
  }
  #tab-trade.compact-trade-stage .trade-amount-controls .trade-amount-input { min-width:0;margin:0; }
  #tab-trade.compact-trade-stage #tradeRail .amts { margin:0;gap:4px; }
  #tab-trade.compact-trade-stage #tradeRail .amts button {
    min-width:0;min-height:38px;padding:2px;font-size:11px;
  }
  #tab-trade.compact-trade-stage #btnTrade {
    position:fixed;left:14px;right:14px;bottom:calc(80px + env(safe-area-inset-bottom));
    z-index:45;width:calc(100vw - 28px);height:46px;min-height:46px;
    margin:0;border-radius:10px;
    box-shadow:0 -9px 0 10px #070d14,0 8px 22px rgba(0,0,0,.38);
  }
  #tab-trade.compact-trade-stage .trade-market-about { margin-top:16px; }
  #tab-trade.compact-trade-stage #tradeInlineError { scroll-margin-bottom:142px; }
  #tab-trade.compact-trade-stage #tradeRail { padding-bottom:116px; }
}

@media (max-width:720px) and (max-height:700px) {
  #tab-trade.compact-trade-stage .detail-cover { padding-top:8px; }
  #tab-trade.compact-trade-stage #detailVenueBalance { margin-top:5px;padding:3px 0; }
  #tab-trade.compact-trade-stage .detail-price-overview { margin-top:6px; }
  #tab-trade.compact-trade-stage .chart-mode-switch { margin-top:6px; }
  #tab-trade.compact-trade-stage #assetPricePanel { margin-top:5px;padding-top:4px; }
  #tab-trade.compact-trade-stage #assetPriceChart,
  #tab-trade.compact-trade-stage #chart { height:clamp(126px,19dvh,138px); }
  #tab-trade.compact-trade-stage #venueCompare { margin-top:7px; }
  #tab-trade.compact-trade-stage #chartCard #detailInlineInsight {
    margin-top:7px;margin-bottom:4px;padding:6px 8px;
  }
  #tab-trade.compact-trade-stage #tradeRail .panel { margin-top:0;padding-top:6px; }
}
@media (max-width:340px) and (max-height:700px) {
  #tab-trade.compact-trade-stage #detailInsightBasis {
    font-size:8px;white-space:nowrap;letter-spacing:-.25px;
  }
  #tab-trade.compact-trade-stage #assetPriceChart,
  #tab-trade.compact-trade-stage #chart { height:126px; }
  #tab-trade.compact-trade-stage #tradeRail .trade-amount-input .amtin {
    padding:4px 40px 4px 7px;font-size:15px;
  }
  #tab-trade.compact-trade-stage #tradeRail .trade-amount-input>span {
    right:6px;font-size:10px;
  }
}

/* Mockup 2: restore the two-level Market header and its near-black / navy
   surfaces. Keep all existing live balances and venue-specific trade states. */
:root {
  --bg:#02080f;
  --card:#041525;
  --card2:#071b2e;
  --line:rgba(39,92,142,.48);
  --line-strong:rgba(29,136,255,.76);
  --dim:#8a9db4;
  --surface:linear-gradient(150deg,#061c31 0%,#030e1b 100%);
  --surface-soft:linear-gradient(155deg,#071a2d 0%,#030d18 100%);
  --surface-raised:linear-gradient(145deg,#0a2948 0%,#041425 100%);
  --zeno-blue:linear-gradient(105deg,#0646e7 0%,#0878f8 60%,#0aa8e9 100%);
}
html,body { background:#02080f; }
body::before { display:none; }
#appView .card,#appView .panel,#appView .mcard,#appView .featured-card,
#appView .featured-market-block,#appView .featured-news-panel,
#appView .product-card,#appView .profile-card {
  border-color:var(--line);
  background:var(--surface-soft);
  box-shadow:inset 0 1px 0 rgba(127,187,255,.055),0 15px 38px rgba(0,0,0,.18);
}
#appView :is(button,input,select,textarea):focus-visible {
  outline:2px solid #2998ff;
  outline-offset:2px;
}
#appView .bigbtn.buy,#appView .deposit-head,#appView #btnTrade {
  border-color:#0e87fb;
  background:var(--zeno-blue);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 22px rgba(0,94,241,.15);
}
#appView .market-summary > div {
  border-color:var(--line);
  background:linear-gradient(150deg,#071e33,#04111f);
  box-shadow:inset 0 1px 0 rgba(136,189,255,.06);
}
#appView .market-summary .summary-icon { color:#1a9bff; }
#appView .featured-market-block,#appView .featured-news-panel { background:#04121f; }
#appView .text-action { color:#3299ff; }
#appView .market-page-heading {
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin:0 0 22px;
}
#appView .market-page-heading h1 { margin:0;font-size:clamp(28px,2.1vw,38px);line-height:1.15; }
#appView .market-page-heading p { margin:5px 0 0;color:var(--dim);font-size:15px; }
#appView .market-page-wallet-action {
  min-width:116px;min-height:42px;padding:0 18px;border:1px solid #197edf;
  border-radius:10px;color:#eaf5ff;background:#071d34;font-weight:650;
}
#appView .market-page-wallet-action:hover { background:#0c3258; }
#appView :is(#leaderboardFilters,.portfolio-filterbar) { gap:8px;margin:0 0 20px; }
#appView :is(#leaderboardFilters,.portfolio-filterbar) button {
  min-height:42px;padding:0 17px;border:1px solid #193a5b;border-radius:10px;
  color:#a0b2c7;background:#051624;box-shadow:none;font-size:14px;
}
#appView :is(#leaderboardFilters,.portfolio-filterbar) button.active {
  color:#fff;border-color:#168efc;background:var(--zeno-blue);
}
#appView .leaderboard-highlights-section { margin:12px 0 20px; }
#appView .leaderboard-highlights-section h2,#appView .leaderboard-ranking h2 {
  margin:0 0 12px;font-size:21px;line-height:1.2;color:#f5faff;
}
#appView .leaderboard-highlights {
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
}
#appView .leaderboard-highlight {
  position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;
  min-height:211px;padding:20px 18px 15px;border:1px solid #21537f;border-radius:14px;
  background:linear-gradient(150deg,#071c30,#03111e);color:#f5faff;text-align:center;
}
#appView .leaderboard-highlight-1 {
  grid-column:2;grid-row:1;margin-top:-9px;
  border-color:#a97712;background:linear-gradient(150deg,#2a2110,#151a1c);
}
#appView .leaderboard-highlight-1::before {
  content:"♛";position:absolute;left:calc(50% - 16px);top:-18px;
  width:32px;height:32px;display:grid;place-items:center;
  border:1px solid #ad801e;border-radius:50%;background:#2b210c;
  color:#ffc247;font-size:22px;line-height:1;
}
#appView .leaderboard-highlight-2 { grid-column:1;grid-row:1; }
#appView .leaderboard-highlight-3 {
  grid-column:3;grid-row:1;border-color:#604da2;background:linear-gradient(150deg,#181429,#0b1020);
}
#appView .highlight-rank {
  position:absolute;top:14px;left:14px;padding:3px 9px;border:1px solid currentColor;
  border-radius:7px;color:#439dff;background:#09233d;font-weight:750;
}
#appView .leaderboard-highlight-1 .highlight-rank { color:#f3b73e;background:#392c0d; }
#appView .leaderboard-highlight-3 .highlight-rank { color:#b399ff;background:#211a39; }
#appView .highlight-avatar {
  width:51px;height:51px;display:grid;place-items:center;margin:3px 0 8px;
  border-radius:50%;border:1px solid #69b4ff;background:linear-gradient(145deg,#327ff5,#1750b5);
  font-size:21px;font-weight:650;
}
#appView .leaderboard-highlight-1 .highlight-avatar { border-color:#ffcb67;background:linear-gradient(145deg,#fbd469,#d68a24);color:#261b0b; }
#appView .leaderboard-highlight-3 .highlight-avatar { border-color:#a991ff;background:linear-gradient(145deg,#9871f3,#5c40ac); }
#appView .leaderboard-highlight > strong { max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px; }
#appView .leaderboard-highlight > small { color:#8195aa;font-size:11px; }
#appView .highlight-metrics {
  width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 12px;text-align:left;
}
#appView .highlight-metrics > span+span { border-left:1px solid #284058;padding-left:10px; }
#appView .highlight-metrics small { display:block;color:#8397ad;font-size:11px; }
#appView .highlight-metrics b { display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px; }
#appView .highlight-action {
  width:100%;margin-top:auto;padding:5px 10px;border:1px solid currentColor;border-radius:7px;
  color:#66b6ff;font-size:12px;font-weight:650;
}
#appView .leaderboard-highlight-1 .highlight-action { color:#ecb43f; }
#appView .leaderboard-highlight-3 .highlight-action { color:#a68bf0; }
#appView .leaderboard-ranking {
  padding:20px;border:1px solid var(--line);border-radius:15px;background:#041526;
}
#appView .leaderboard-ranking .product-list { gap:0; }
#appView .leaderboard-ranking .trader-row {
  border:0;border-bottom:1px solid #183553;border-radius:0;background:transparent;
  box-shadow:none;
}
#appView .leaderboard-ranking .trader-row:hover { background:#0b2943; }
#appView #smartSummary .metric-card,#appView #tab-smart .product-card,
#appView #tab-smart .netflow-card,#appView #tab-smart .activity-line {
  border-color:var(--line);background:#061a2b;
}
#appView .portfolio-hero .card { border-color:var(--line);background:#041a2d; }
#appView .portfolio-hero .card.primary { background:linear-gradient(145deg,#092a4b,#051a2d); }
#appView .portfolio-hero .card {
  display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;
  align-content:center;column-gap:13px;
}
#appView .portfolio-hero .portfolio-kpi-icon {
  grid-column:1;grid-row:1/3;align-self:center;width:36px;height:36px;
  color:#3296ff;stroke-width:1.75;
}
#appView .portfolio-hero .eyebrow,#appView .portfolio-hero .value { grid-column:2; }
#appView .portfolio-hero .value { margin-top:3px; }
#appView .portfolio-hero .portfolio-sources { grid-column:1/-1;margin-top:8px; }
#appView .portfolio-positions-table { background:#041526; }
@media (max-width:720px) {
  #appView .leaderboard-highlights { grid-template-columns:1fr;gap:8px; }
  #appView .leaderboard-highlight { min-height:0;align-items:flex-start;padding:13px 14px 12px 70px;text-align:left; }
  #appView :is(.leaderboard-highlight-1,.leaderboard-highlight-2,.leaderboard-highlight-3) { grid-column:auto;grid-row:auto;margin-top:0; }
  #appView .leaderboard-highlight-1::before { display:none; }
  #appView .highlight-rank { top:12px;right:12px;left:auto; }
  #appView .highlight-avatar { position:absolute;left:13px;top:14px;width:45px;height:45px;margin:0;font-size:18px; }
  #appView .highlight-metrics { margin:10px 0 8px; }
  #appView .leaderboard-ranking { padding:14px 10px; }
  #appView :is(#leaderboardFilters,.portfolio-filterbar) button { padding:0 11px;font-size:12px; }
  #appView .portfolio-hero .card { grid-template-columns:20px minmax(0,1fr);column-gap:5px; }
  #appView .portfolio-hero .portfolio-kpi-icon { width:17px;height:17px; }
}

@media (min-width:1180px) {
  #appView { --market-rail-width:0px; }
  #appView header.app-header {
    position:sticky;inset:auto;top:0;left:auto;right:auto;
    width:100%;height:76px;display:flex;align-items:center;gap:18px;
    padding:0 clamp(28px,3.55vw,70px);border:0;border-bottom:1px solid #12304d;
    background:#020b14;box-shadow:none;z-index:35;
  }
  #appView header.app-header > .brand {
    width:220px;min-width:220px;height:54px;margin:0;
    --brand-symbol-size:39px;--brand-text-size:19px;--brand-gap:10px;
  }
  #appView .market-route-actions { position:static;width:auto;flex:0 0 auto; }
  #appView .market-route-button {
    width:40px;min-width:40px;height:40px;min-height:40px;padding:0;
    justify-content:center;border-radius:11px;
  }
  #appView .market-route-button > span { display:none; }
  #appView header.app-header .search {
    position:relative;top:auto;right:auto;width:auto;max-width:740px;
    flex:1 1 450px;min-width:180px;margin:0;z-index:36;
  }
  #appView header.app-header .search input {
    width:100%;height:47px;min-height:47px;border:1px solid #1a3b5c;
    border-radius:11px;background:#051522;color:#eef6ff;
  }
  #appView header.app-header .search input::placeholder { color:#7890a9;opacity:1; }
  #appView .header-actions { display:flex;align-items:center;justify-content:flex-end;gap:10px;flex:0 0 auto;min-width:0; }
  #appView .header-actions .wallet-head,#appView .header-actions .money,
  #appView .header-actions .status-pill { display:none; }
  #appView .header-actions .notification-head,#appView .header-actions .deposit-head {
    position:static;top:auto;right:auto;width:44px;height:44px;min-height:44px;
    border:1px solid #183c5f;border-radius:11px;background:#071a2b;
  }
  #appView .header-actions .deposit-head:not(.hidden) {
    width:auto;padding:0 16px;background:var(--zeno-blue);border-color:#0e86fb;
  }
  #appView .header-actions .profile-head {
    position:static;left:auto;bottom:auto;width:auto;min-width:0;height:46px;
    padding:2px;border:0;border-radius:50%;background:transparent;box-shadow:none;
  }
  #appView .header-actions .profile-head .avatar { width:42px;height:42px;min-width:42px; }
  #appView .header-actions .profile-head .account-copy { display:none; }
  #appView .wallet-balance-dock {
    position:sticky;top:76px;width:100%;height:47px;margin:0;
    padding:4px clamp(28px,3.55vw,70px);border:0;border-bottom:1px solid #12304d;
    background:#030e19;z-index:30;
  }
  #appView .wallet-balance-dock button {
    width:auto;min-width:172px;min-height:36px;padding:0 20px;
    border:0;border-right:1px solid #173b59;border-radius:0;background:transparent;
    display:flex;align-items:center;gap:10px;
  }
  #appView .wallet-balance-dock button:first-child { padding-left:0; }
  #appView .wallet-balance-dock button:last-child { border-right:0; }
  #appView .wallet-balance-dock span { color:#8198ae;font-size:12px; }
  #appView .wallet-balance-dock b { color:#e8f4ff;font-size:14px;white-space:nowrap; }
  #appView nav.tabs,#appView.has-wallet-balance-dock nav.tabs {
    position:sticky;inset:auto;top:123px;left:auto;width:100%;height:63px;
    display:flex;flex-direction:row;align-items:center;gap:6px;overflow:visible;
    padding:0 clamp(28px,3.55vw,70px);border:0;border-bottom:1px solid #12304d;
    background:#020b14;box-shadow:none;z-index:29;
  }
  #appView:not(.has-wallet-balance-dock) nav.tabs { top:76px; }
  #appView nav.tabs button {
    width:auto;min-width:0;height:63px;min-height:63px;padding:0 17px;
    display:flex;justify-content:center;gap:9px;
    border:0;border-bottom:2px solid transparent;border-radius:0;
    color:#8fa3ba;background:transparent;font-size:15px;font-weight:620;
  }
  #appView nav.tabs button[data-tab]:not(.hidden) { display:flex !important; }
  #appView nav.tabs button[data-tab="following"]:not(.hidden),
  #appView nav.tabs button[data-tab="copytrade"]:not(.hidden),
  #appView nav.tabs button[data-tab="positions"]:not(.hidden),
  #appView nav.tabs button[data-tab="history"]:not(.hidden),
  #appView nav.tabs button[data-tab="referrals"]:not(.hidden),
  #appView nav.tabs button[data-tab="admin"]:not(.hidden),
  #appView nav.tabs button[data-tab="mm"]:not(.hidden) { display:none !important; }
  #appView nav.tabs button .ui-icon { display:block;width:18px;height:18px; }
  #appView nav.tabs button:hover { color:#eff7ff;background:#071a2e; }
  #appView nav.tabs button.active {
    color:#43a2ff;border-bottom-color:#138dff;background:transparent;
  }
  #appView nav.tabs .mobile-more-nav { display:flex !important;margin-left:auto; }
  #appView nav.tabs .mobile-more-nav::after { display:none; }
  #appView main {
    width:100%;max-width:1920px;min-width:0;margin:0 auto;
    padding:30px clamp(28px,3.55vw,70px) 90px;
  }
  #appView .panel { top:202px; }
  #appView .crypto-explore-hero h1 { font-size:clamp(31px,2.2vw,42px); }
  #appView .featured-news-layout { grid-template-columns:minmax(0,1.9fr) minmax(300px,.82fr);gap:18px; }
  #appView .market-summary > div { min-height:100px; }
  #appView table th,#appView table td { border-bottom-color:#17324c; }
  #appView:has(#tab-trade.compact-trade-stage:not(.hidden)) nav.tabs { display:flex; }
  #appView:has(#tab-trade.compact-trade-stage:not(.hidden)) main {
    padding:12px clamp(20px,3.55vw,70px) 32px;
  }
}
@media (min-width:1180px) and (max-width:1450px) {
  #appView header.app-header > .brand { width:176px;min-width:176px;--brand-text-size:16px; }
  #appView nav.tabs button { padding:0 11px;font-size:13px; }
  #appView nav.tabs button .ui-icon { width:16px;height:16px; }
}
@media (max-width:1179px) {
  #appView header.app-header,#appView nav.tabs,#appView .wallet-balance-dock {
    background:#030c16;border-color:#17324d;box-shadow:none;
  }
  #appView .search input { border-color:#173a59;background:#061726; }
  #appView .market-page-heading { margin-bottom:14px; }
  #appView .market-page-heading h1 { font-size:25px; }
  #appView .market-page-heading p { font-size:12px; }
}
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine) {
  #appView :is(.mcard,.featured-card,.market-summary > div,.market-page-wallet-action) {
    transition:border-color .18s ease,background-color .18s ease,transform .18s ease;
  }
  #appView :is(.mcard,.featured-card):hover { transform:translateY(-2px);border-color:#277fca; }
}

/* Wallet/market touch controls: expand targets without changing text sizes. */
#appView button,.profile-drawer button { touch-action:manipulation; }
.profile-drawer .drawer-close { min-width:44px;min-height:44px; }
#appView :is(.favourite-btn,.details-link,.featured-save,.featured-arrow) {
  min-width:44px;min-height:44px;flex-shrink:0;
}
@media (hover:none),(pointer:coarse) {
  #appView :is(.mcard,.featured-card):hover { transform:none !important; }
}

/* Mockup 2 finishing pass: one outcome language across cards, venue choices
   and checkout. Cyan is affirmative/primary; red is negative/close. */
#appView {
  --market-cyan:#13cfe0;
  --market-cyan-soft:#062d39;
  --market-red:#f05a67;
  --market-red-soft:#35141d;
  --market-action:linear-gradient(105deg,#087fa3 0%,#0ab8cd 58%,#23dce3 100%);
}
:root {
  --zeno-blue:linear-gradient(105deg,#087fa3 0%,#0ab8cd 58%,#23dce3 100%);
}
#appView :is(button,input,select,textarea):focus-visible {
  outline-color:#76ebf2;
}
#appView :is(.mcard,.featured-market-block,.panel,#chartCard) {
  border-color:#1b4465;
}
#appView :is(.featured-title h2,.mcard .mtitle,.detail-heading-copy h2) {
  color:#f4f9ff;
  font-weight:720;
  letter-spacing:-.018em;
}
#appView :is(.market-meta,.featured-metadata,.featured-footer,.detail-metadata) {
  color:#a3b5c7;
}
#appView :is(.featured-main .featured-odd,.market-outcomes .obtn,.venue-price,#outcomes .obtn) {
  border-radius:10px;
  transition:background-color .17s ease,border-color .17s ease,box-shadow .17s ease;
}
#appView :is(.featured-main .featured-odd.up:not(:disabled),.market-outcomes .obtn.up:not(:disabled),.venue-price.up:not(:disabled),#outcomes .obtn.up:not(:disabled)) {
  color:#acf5f7;
  border-color:rgba(19,207,224,.6);
  background:var(--market-cyan-soft);
}
#appView :is(.featured-main .featured-odd.down:not(:disabled),.market-outcomes .obtn.down:not(:disabled),.venue-price.down:not(:disabled),#outcomes .obtn.down:not(:disabled)) {
  color:#ffbdc2;
  border-color:rgba(240,90,103,.55);
  background:var(--market-red-soft);
}
#appView :is(.featured-main .featured-odd.up:not(:disabled),.market-outcomes .obtn.up:not(:disabled),.venue-price.up:not(:disabled),#outcomes .obtn.up:not(:disabled)) b,
#appView :is(.featured-main .featured-odd.down:not(:disabled),.market-outcomes .obtn.down:not(:disabled),.venue-price.down:not(:disabled),#outcomes .obtn.down:not(:disabled)) b {
  color:#f6fbff;
}
#appView :is(.featured-main .featured-odd.up:hover:not(:disabled),.market-outcomes .obtn.up:hover:not(:disabled),.venue-price.up:hover:not(:disabled),#outcomes .obtn.up:hover:not(:disabled),.venue-price.up.selected-outcome:not(:disabled),#outcomes .obtn.up.sel) {
  border-color:var(--market-cyan);
  background:#075063;
  box-shadow:inset 0 0 0 1px rgba(19,207,224,.18);
}
#appView :is(.featured-main .featured-odd.down:hover:not(:disabled),.market-outcomes .obtn.down:hover:not(:disabled),.venue-price.down:hover:not(:disabled),#outcomes .obtn.down:hover:not(:disabled),.venue-price.down.selected-outcome:not(:disabled),#outcomes .obtn.down.sel) {
  border-color:var(--market-red);
  background:#6a1d2b;
  box-shadow:inset 0 0 0 1px rgba(240,90,103,.16);
}
#appView :is(.featured-main .featured-odd.up:not(:disabled),.market-outcomes .obtn.up:not(:disabled),.venue-price.up:not(:disabled),#outcomes .obtn.up:not(:disabled)) > span:first-child,
#appView :is(.featured-main .featured-odd.up:not(:disabled),.market-outcomes .obtn.up:not(:disabled),.venue-price.up:not(:disabled),#outcomes .obtn.up:not(:disabled)) > .venue-price-value > span:first-child {
  color:#6eeaf0;
}
#appView :is(.featured-main .featured-odd.down:not(:disabled),.market-outcomes .obtn.down:not(:disabled),.venue-price.down:not(:disabled),#outcomes .obtn.down:not(:disabled)) > span:first-child,
#appView :is(.featured-main .featured-odd.down:not(:disabled),.market-outcomes .obtn.down:not(:disabled),.venue-price.down:not(:disabled),#outcomes .obtn.down:not(:disabled)) > .venue-price-value > span:first-child {
  color:#ff9da7;
}
#appView .featured-main .featured-odd:disabled,
#appView .venue-price:disabled { opacity:.58;filter:saturate(.4); }
#appView :is(.chips button.active,.explore-tabs button.active,.view-button.active,#leaderboardFilters button.active,.portfolio-filterbar button.active,.chart-mode-switch button.active,#segBuy.active) {
  border-color:#14b9ce;
  background:var(--market-action);
  color:#03212c;
  font-weight:760;
}
#appView #segSell.active {
  border-color:#f05a67;
  background:linear-gradient(105deg,#b83345,#ec5260);
  color:#fff;
  font-weight:760;
}
#appView :is(.bigbtn.buy,.deposit-head,#btnTrade,.confirmgo) {
  border-color:#16c7d7;
  background:var(--market-action);
  color:#031c26;
  font-weight:760;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 22px rgba(0,180,198,.13);
}
.confirmgo,
#appView .deposit-copy-primary:not(.swap-secondary),
#appView .market-page-wallet-action,
#appView .wallet-deposit-address button {
  border-color:#16c7d7;
  background:var(--zeno-blue);
  color:#031c26;
  font-weight:760;
}
.confirmgo:disabled,
#appView .deposit-copy-primary:disabled { opacity:.5;box-shadow:none; }
#appView #tab-trade:has(#segSell.active) #btnTrade:not(:disabled) {
  border-color:#f05a67;
  background:linear-gradient(105deg,#b83345,#ec5260);
  color:#fff;
}
#appView #btnTrade:disabled { opacity:.55;box-shadow:none; }
#appView #detailInlineInsight .insight-direction[data-direction="yes"] {
  color:#6eeaf0;background:#083742;
}
#appView #detailInlineInsight .insight-direction[data-direction="no"] {
  color:#ffabb3;background:#471924;
}
#appView .market-outcomes .obtn { min-height:58px; }
#appView .market-outcomes .obtn b { font-size:20px;line-height:1.1; }
#appView .mcard .mtitle { font-size:17px;line-height:1.25; }
#appView .featured-title h2 { line-height:1.2; }
#tab-trade.compact-trade-stage .detail-heading-copy h2 { font-size:21px;line-height:1.18; }
#tab-trade.compact-trade-stage #venueCompare .venue-price-value b { font-size:25px; }
#tab-trade.compact-trade-stage #detailInlineInsight { color:#d9e9f7;line-height:1.35; }
#tab-trade.compact-trade-stage #detailInlineInsight .detail-insight-head { color:#aee9ff; }
@media (max-width:720px) {
  #appView .mcard .mtitle { font-size:16px; }
  #appView .market-outcomes .obtn { min-height:50px; }
  #appView .market-outcomes .obtn b { font-size:18px; }
  #tab-trade.compact-trade-stage .detail-heading-copy h2 { font-size:17px;line-height:1.2; }
  #tab-trade.compact-trade-stage #venueCompare .venue-price-value b { font-size:21px; }
  #tab-trade.compact-trade-stage #tradeRail .segbar button { font-size:13px; }
  #tab-trade.compact-trade-stage #btnTrade { font-size:15px; }
}

/* A platform expands in place: its chart, selected odds, Insight and order
   ticket stay above the still-available alternative platform odds. */
#venueSwitchPanel.hidden,#selectedVenueOddsMount.hidden { display:none!important; }
#tab-trade.event-open #venueSwitchPanel { grid-column:1/-1;min-width:0; }
#tab-trade.compact-trade-stage #tradeRail > .panel {
  position:static;top:auto;
}
#tab-trade.event-open #venueSwitchPanel:not(.hidden) {
  margin-top:14px;padding:17px 18px;border:1px solid #1b4465;border-radius:13px;
  background:var(--surface-soft);
}
#tab-trade.compact-trade-stage #chartCard #selectedVenueOddsMount {
  order:6;margin:9px 18px 0;
}
#tab-trade.compact-trade-stage #chartCard #detailInlineInsight { order:7; }
#tab-trade.compact-trade-stage #selectedVenueOddsMount #outcomes {
  display:flex!important;gap:9px;margin:0;
}
#tab-trade.compact-trade-stage #selectedVenueOddsMount #outcomes .obtn {
  display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;
  min-height:46px;padding:5px 8px;font-size:12px;line-height:1.1;
}
#tab-trade.compact-trade-stage #selectedVenueOddsMount #outcomes .obtn b {
  float:none;margin:2px 0 0;font-size:21px;
}
#tab-trade.compact-trade-stage #venueCompareHome { display:none; }
#tab-trade.compact-trade-stage #venueSwitchPanel #venueCompare {
  width:100%;margin:0;padding:0;border:0;background:transparent;
}
#tab-trade.compact-trade-stage #venueSwitchPanel #venueCompare .venue-compare-title {
  display:block;margin:0 0 9px;font-size:16px;
}
#tab-trade.compact-trade-stage #venueSwitchPanel #venueCompare .venue-line {
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 10px;padding:11px 2px;border:0;border-top:1px solid rgba(116,157,197,.2);
  cursor:pointer;
}
#tab-trade.compact-trade-stage #venueSwitchPanel #venueCompare .venue-line + .venue-line { margin-top:0; }
#tab-trade.compact-trade-stage #venueSwitchPanel #venueCompare .venue-line:hover {
  background:rgba(13,66,84,.22);
}
#tab-trade.compact-trade-stage #venueSwitchPanel #venueCompare .venue-line:focus-visible {
  outline:2px solid #76ebf2;outline-offset:-2px;border-radius:8px;
}
#tab-trade.compact-trade-stage #venueSwitchPanel #venueCompare .venue-main {
  display:flex;grid-column:1/-1;min-width:0;
}
#tab-trade.compact-trade-stage #venueSwitchPanel #venueCompare .venue-price {
  min-height:53px;height:auto;padding:5px;
}
#tab-trade.compact-trade-stage #venueSwitchPanel #venueCompare .venue-price-value b { font-size:20px; }
#tab-trade.compact-trade-stage #venueSwitchPanel #venueCompare .venue-source,
#tab-trade.compact-trade-stage #venueSwitchPanel #venueCompare .venue-state,
#tab-trade.compact-trade-stage #venueSwitchPanel #venueCompare .venue-compare-head { display:none; }
@media (max-width:720px) {
  #tab-trade.event-open #venueSwitchPanel:not(.hidden) {
    margin:9px 0 0;padding:13px 14px 16px;
    border-radius:12px;
  }
  #tab-trade.compact-trade-stage #chartCard #selectedVenueOddsMount { margin:9px 14px 0; }
  #tab-trade.compact-trade-stage #selectedVenueOddsMount #outcomes .obtn { min-height:42px; }
  #tab-trade.compact-trade-stage #selectedVenueOddsMount #outcomes .obtn b { font-size:20px; }
  #tab-trade.compact-trade-stage #chartCard #detailInlineInsight { margin-top:8px; }
  #tab-trade.compact-trade-stage #tradeRail { padding-bottom:0!important; }
  /* The fixed action is outside flow; do not leave a second button-sized gap. */
  #tab-trade.compact-trade-stage .trade-market-about { margin-top:16px!important; }
  #tab-trade.compact-trade-stage #venueSwitchPanel {
    padding-bottom:16px!important;margin-bottom:calc(78px + env(safe-area-inset-bottom));
  }
  #tab-trade.compact-trade-stage #venueSwitchPanel #venueCompare .venue-price { min-height:47px; }
}
@media (max-width:720px) and (max-height:700px) {
  #tab-trade.compact-trade-stage #chartCard #selectedVenueOddsMount { margin-top:4px; }
  #tab-trade.compact-trade-stage #selectedVenueOddsMount #outcomes .obtn { min-height:35px;padding:3px 6px; }
  #tab-trade.compact-trade-stage #selectedVenueOddsMount #outcomes .obtn b { font-size:18px; }
}

/* Keep the market discovery header short enough to expose featured questions
   on a phone. Venue counts remain on each card; unavailable volume is not a
   useful third metric. */
#appView .market-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:720px) {
  #appView .market-summary { display:none!important; }
  #appView .crypto-explore-hero { margin-bottom:12px; }
  #appView .crypto-explore-hero p { display:none; }
}

/* Compact platform choices show the actual ask/bid only. Probability history
   remains in the chart, not as a second row inside each price button. */
#appView #venueCompare .venue-line { grid-template-columns:repeat(2,minmax(0,1fr)); }
#appView #venueCompare .venue-main { grid-column:1/-1; }
#appView #venueCompare .venue-state { grid-column:1/-1;text-align:left; }
#appView #venueCompare .venue-price {
  display:flex;flex-direction:column;justify-content:center;gap:0;min-height:68px;height:auto;
  padding:6px 7px;white-space:normal;min-width:0;
}
#appView #venueCompare .venue-price-value { flex:none;gap:2px;width:100%; }
#appView #venueCompare .venue-price-value > span:first-child { font-size:12px;line-height:1.2; }
#appView #venueCompare .venue-price-value > b { font-size:22px;line-height:1.1; }
#appView .venue-price-label { display:block;font-size:10px;line-height:1.3;font-weight:500;opacity:.85; }
#appView .venue-price-explanation { margin:0 0 9px;color:#9cb3c9;font-size:12px;line-height:1.45; }
#appView #selectedVenueOddsMount #outcomes .obtn { min-height:60px; }
@media (max-width:720px) {
  #appView #venueCompare .venue-price { min-height:64px; }
  /* Do not let the desktop price minimum override the compact phone ticket:
     it otherwise pushes the amount field behind the fixed confirmation. */
  #appView #selectedVenueOddsMount #outcomes .obtn { min-height:42px; }
  #appView .venue-price-explanation { font-size:11px; }
}
@media (max-width:720px) and (max-height:700px) {
  #appView #selectedVenueOddsMount #outcomes .obtn { min-height:35px; }
  #tab-trade.compact-trade-stage #chartCard #detailInlineInsight { margin-top:5px;padding-block:4px; }
}
@media (max-width:360px) {
  #appView #venueCompare .venue-price { padding-block:4px; }
  #appView #venueCompare .venue-price-label { font-size:9px;line-height:1.25; }
}

/* Navigation alignment is independent of the label's language and length.
   Keep this after the legacy desktop/mobile layers and reserve two text lines
   on phones, so a translated label cannot move its icon or its neighbours. */
#appView nav.tabs > button { align-items:center; }
#appView nav.tabs > button > .ui-icon { display:block;vertical-align:initial; }
@media (min-width:721px) {
  /* Active tabs must reserve the same underline space as inactive tabs. */
  #appView nav.tabs > button { border-bottom-width:2px;border-bottom-style:solid; }
}
@media (max-width:720px) {
  #appView nav.tabs { align-items:stretch;gap:0; }
  #appView nav.tabs > button:not(.hidden) {
    flex:1 1 0;
    width:0;
    min-width:0;
    height:100%;
    min-height:54px;
    margin:0;
    padding:2px;
    display:grid;
    grid-template-rows:20px 28px;
    justify-content:stretch;
    align-content:center;
    justify-items:center;
    gap:2px;
    font-size:10px;
    line-height:14px;
    white-space:normal;
  }
  #appView nav.tabs > .mobile-more-nav { display:grid!important;margin:0; }
  #appView nav.tabs > button > .ui-icon { width:20px;height:20px; }
  #appView nav.tabs > button > span {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-width:0;
    height:28px;
    margin:0;
    text-align:center;
    white-space:normal;
    word-break:normal;
    overflow-wrap:normal;
    hyphens:auto;
  }
}

/* The category heading represents all markets, not a particular coin. */
#appView .crypto-heading-icon {
  color:#45cbd3;background:linear-gradient(145deg,#0b2733,#071820);
  border:1px solid rgba(69,203,211,.28);box-shadow:none;transform:none;
}
#appView .crypto-heading-icon > .ui-icon { width:28px;height:28px;display:block; }

/* One square logo slot per surface; nested artwork cannot outgrow its wrapper. */
#appView .asset-art.coin-logo {
  display:grid;place-items:center;width:var(--coin-size,42px);height:var(--coin-size,42px);
  min-width:var(--coin-size,42px);flex:0 0 var(--coin-size,42px);align-self:center;
  padding:0;margin:0;border:0;border-radius:50%;background:transparent;box-shadow:none;
  line-height:0;overflow:hidden;transform:none;
}
#appView .asset-art.coin-logo > img {
  display:block;width:100%;height:100%;max-width:none;object-fit:contain;object-position:center;
  margin:0;padding:0;border:0;transform:none;pointer-events:none;user-select:none;-webkit-user-drag:none;
}
#appView :is(.mcard .coin-icon,.search-item .coin-icon,#detailCoin) {
  --coin-size:42px;display:grid;place-items:center;width:var(--coin-size);height:var(--coin-size);
  min-width:var(--coin-size);flex:0 0 var(--coin-size);align-self:center;
  padding:0;margin:0;border:0;background:transparent;box-shadow:none;line-height:0;overflow:hidden;
}
#appView :is(.mcard .coin-icon,.search-item .coin-icon,#detailCoin) > .coin-logo {
  width:100%;height:100%;min-width:0;flex-basis:auto;
}
#appView .featured-title > .coin-logo { --coin-size:62px; }
#appView .detail-top #detailCoin { --coin-size:62px; }
#appView #tab-trade .detail-top #detailCoin {
  width:var(--coin-size);height:var(--coin-size);min-width:var(--coin-size);flex-basis:var(--coin-size);
}
#appView #tab-trade .detail-top #detailCoin > .coin-logo {
  width:100%;height:100%;min-width:0;flex-basis:auto;
}
#appView :is(.mcard-head,.featured-title) { align-items:center; }
#appView .detail-top #detailCoin { grid-column:1;grid-row:1; }
#appView #tab-trade .detail-top { --detail-coin-size:62px; }
#appView #tab-trade.compact-trade-stage .detail-top {
  grid-template-columns:var(--detail-coin-size) minmax(0,1fr) 24px;
}
@media (max-width:720px) {
  #appView .featured-title > .coin-logo { --coin-size:44px; }
  #appView .mcard .coin-icon { --coin-size:36px; }
  #appView .search-item .coin-icon { --coin-size:32px; }
  #appView #tab-trade .detail-top { --detail-coin-size:42px;grid-template-columns:42px minmax(0,1fr) 24px; }
  #appView #tab-trade .detail-top #detailCoin { --coin-size:42px; }
}

/* Featured and the selected venue share plot proportions. Keep chart axes
   pixel-sized, and provenance below the plot rather than inside its labels. */
:root { --market-plot-height:clamp(170px,13.5vw,240px); }
@media (min-width:721px) and (max-height:780px) {
  :root { --market-plot-height:clamp(112px,16dvh,124px); }
}
@media (max-width:720px) {
  :root { --market-plot-height:clamp(130px,20.5dvh,180px); }
}
@media (max-width:720px) and (max-height:700px) {
  :root { --market-plot-height:clamp(126px,19dvh,138px); }
}
@media (max-width:340px) and (max-height:700px) {
  :root { --market-plot-height:126px; }
}
#appView .featured-history svg,
#tab-trade.compact-trade-stage #chart,
#tab-trade.compact-trade-stage #assetPriceChart {
  width:100%;height:var(--market-plot-height);min-height:0;
}
.asset-price-chart-wrap #assetPriceChart,
#tab-trade.compact-trade-stage #assetPriceChart {
  width:calc(100% - var(--asset-price-axis-width,92px));
}
#appView .featured-history { min-width:0;padding:0; }
#appView .featured-history svg { overflow:hidden; }
#appView .featured-history text { fill:var(--dim);font-size:11px; }
#appView .featured-history .chart-empty-label { font-size:12px; }
#appView .featured-history line { stroke:var(--line);stroke-width:1; }
#appView .featured-history .featured-history-fill { fill:url(#featuredProbabilityFill); }
#appView .featured-history .featured-history-line { stroke:#258fff;stroke-width:2.5; }
#appView .featured-history .featured-history-last { fill:#e8f5ff;stroke:#258fff;stroke-width:2; }
#appView .featured-history .featured-history-source {
  margin:6px 0 8px;font-size:10px;line-height:1.4;text-align:left;overflow-wrap:anywhere;
}
/* Both chart locations use the same outcome colours and plot dimensions. */
.probability-legend { display:flex;flex-wrap:wrap;gap:6px 18px;margin:8px 0;font-size:12px;line-height:1.5; }
.probability-legend span { display:inline-flex;align-items:center;gap:5px;min-width:0; }
.probability-legend b { font-weight:600; }
.probability-legend i { width:8px;height:8px;flex:none;border-radius:50%;background:currentColor; }
.probability-yes { color:#23d4cc; }
.probability-no { color:#fa647f; }
#chart .chart-grid { stroke:var(--line);stroke-width:1; }
#chart text { fill:var(--dim);font:11px Urbanist,sans-serif; }
#chart .probability-line.probability-yes,#appView .featured-history .probability-yes { stroke:#23d4cc; }
#chart .probability-line.probability-no,#appView .featured-history .probability-no { stroke:#fa647f; }
#chart circle.probability-yes,#appView .featured-history circle.probability-yes { fill:#23d4cc;stroke:#23d4cc; }
#chart circle.probability-no,#appView .featured-history circle.probability-no { fill:#fa647f;stroke:#fa647f; }
#chart .probability-line,#appView .featured-history .probability-line {
  stroke-width:2.75;vector-effect:non-scaling-stroke;
}
#chart circle.probability-last,#appView .featured-history circle.probability-last {
  stroke:var(--card);stroke-width:1.5;vector-effect:non-scaling-stroke;
}
#featuredAssetPricePanel[hidden],#featuredHistory[hidden] { display:none!important; }
#featuredAssetPricePanel { padding:0;border:0;background:none;min-width:0; }
.featured-price-summary { display:flex;gap:12px;margin:8px 0 12px; }
.featured-price-summary > span { flex:1;min-width:0;color:var(--dim);font-size:11px; }
.featured-price-summary b { display:block;margin-top:4px;color:var(--txt);font-size:clamp(17px,4.5vw,23px);overflow-wrap:anywhere; }
#featuredAssetPriceChart { display:block;height:var(--market-plot-height);width:calc(100% - var(--asset-price-axis-width,92px)); }
#featuredAssetPricePanel .asset-price-source { display:block;margin:8px 0;font-size:10px;overflow-wrap:anywhere; }
#featuredAssetPricePanel .asset-chart-empty { max-width:calc(100% - var(--asset-price-axis-width,92px));font-size:12px; }
/* Both modes occupy the full plot row. The older desktop two-column layout
   must not squeeze a newly inserted Live panel into the probability badge slot. */
#appView .featured-analysis > :is(#featuredAssetPricePanel,#featuredHistory) {
  grid-column:1 / -1;min-width:0;width:100%;box-sizing:border-box;
}
#appView .featured-analysis .chart-mode-switch { margin:10px 0; }
/* One two-tab component, not a separate Featured-sized control. */
#appView .featured-analysis .chart-mode-switch,
#tab-trade.compact-trade-stage #chartCard .chart-mode-switch {
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:4px;
  border:1px solid #29425b;border-radius:11px;background:#071522;
}
#appView .featured-analysis .chart-mode-switch button,
#tab-trade.compact-trade-stage #chartCard .chart-mode-switch button {
  height:40px;min-height:40px;padding:6px 8px;font-size:13px;line-height:1.2;
  font-weight:700;border-radius:8px;touch-action:manipulation;
}
#appView .featured-analysis .chart-mode-switch button.active,
#tab-trade.compact-trade-stage #chartCard .chart-mode-switch button.active {
  border-color:#19c5d4;background:linear-gradient(110deg,#078aaa,#17cbd1);color:#031b25;
}
#appView #featuredAssetPricePanel,
#tab-trade.compact-trade-stage #assetPricePanel {
  padding:6px 6px 5px;border:1px solid rgba(95,133,169,.2);border-radius:10px;
  background:linear-gradient(160deg,rgba(12,31,48,.68),rgba(4,14,25,.32));
}

/* Card odds show only the outcome and price. Platform identity stays in the
   footer; stale display-only quotes must still be visibly labelled. */
#appView .market-outcomes .obtn { text-align:center;gap:2px; }
#appView .market-outcomes .obtn > span { width:100%;text-align:center; }
#appView .market-outcomes .odds-stale-label[hidden] { display:none; }

/* Keep carousel navigation in normal flow. Negative bottom offsets combined
   with 44px touch targets previously crossed the card border on phones. */
#appView #featuredRail {
  display:grid;grid-template-columns:44px minmax(0,1fr) 44px;
  column-gap:8px;row-gap:12px;align-items:center;padding:0;margin-bottom:0;
}
#appView #featuredTrack { grid-column:1 / -1;grid-row:1; }
#appView #featuredRail > .featured-arrow {
  position:static;inset:auto;transform:none;margin:0;padding:0;
  width:44px;height:44px;min-width:44px;min-height:44px;box-sizing:border-box;
  grid-row:2;align-self:center;justify-self:center;
}
#appView #featuredRail > .featured-prev { grid-column:1; }
#appView #featuredRail > .featured-next { grid-column:3; }
#appView #featuredDots {
  position:static;inset:auto;transform:none;margin:0;
  grid-column:2;grid-row:2;min-width:0;max-width:100%;
  flex-wrap:wrap;align-items:center;justify-content:center;justify-self:center;
}

/* Reserve the same two-line label area in all three portfolio KPIs so a
   wrapped heading never pushes only one amount lower than its neighbours. */
#appView .portfolio-hero > .card:not(.primary) {
  grid-template-rows:auto minmax(0,1fr);align-content:stretch;row-gap:4px;
}
#appView .portfolio-hero > .card:not(.primary) > .eyebrow {
  display:flex;align-items:center;min-height:2.6em;line-height:1.3;
}
#appView .portfolio-hero > .card:not(.primary) > .value {
  margin-top:0;align-self:start;
}
@media (max-width:720px) {
  #appView .portfolio-hero > .card:not(.primary) > .value {
    font-size:clamp(14px,4.36vw,17px);
  }
}

/* Following tabs keep identical touch targets and match the 7px spacing of
   the feed filter buttons below; preserve colours and the separator. */
#appView #followingTabs { align-items:stretch;gap:7px; }
#appView #followingTabs > button {
  flex:0 0 96px;width:96px;min-width:0;height:44px;min-height:44px;
  box-sizing:border-box;margin:0;padding:10px 12px;line-height:1.2;
  display:inline-flex;align-items:center;justify-content:center;
}

/* Equal listing-tab geometry regardless of label length or selected state. */
#appView .market-list-title .explore-tabs { align-items:stretch;gap:8px; }
#appView .market-list-title .explore-tabs > :is(#exploreAll,#exploreFavourites) {
  flex:0 0 104px;width:104px;min-width:0;height:44px;min-height:44px;
  box-sizing:border-box;margin:0;padding:0 12px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:650;line-height:1.2;text-align:center;white-space:nowrap;
}

/* Portfolio navigation uses four equal columns, independent of label length. */
#appView #portfolioViews.portfolio-filterbar {
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:stretch;gap:8px;width:100%;overflow:visible;
  position:relative;z-index:1;
}
#appView #portfolioViews.portfolio-filterbar > button {
  width:100%;min-width:0;height:44px;min-height:44px;
  box-sizing:border-box;margin:0;padding:4px 6px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:650;line-height:1.2;text-align:center;white-space:normal;
}
@media (max-width:720px) {
  #appView #portfolioViews.portfolio-filterbar > button { font-size:12px; }
}

/* Read-only Main Wallet receiving panel, below Wallet details. */
#profileDrawer #profileAddFunds { scroll-margin-top:16px;margin-top:18px; }
#profileAddFunds .main-deposit-instructions { margin:0 0 14px;color:var(--dim);font-size:13px;line-height:1.5; }
#profileAddFunds .main-deposit-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
#profileAddFunds .main-deposit-grid > div { min-width:0; }
#profileAddFunds .main-deposit-grid span,#profileAddFunds .main-deposit-address > span { display:block;font-size:12px;color:var(--dim);margin-bottom:7px; }
#profileAddFunds .main-deposit-grid b { display:flex;align-items:center;min-height:52px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--card2);font-size:13px;font-weight:600;line-height:1.3; }
#profileAddFunds .main-deposit-address { margin:14px 0 8px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft);min-width:0; }
#profileAddFunds .main-deposit-address code { display:block;white-space:normal;overflow-wrap:anywhere;word-break:break-all;font:500 13px/1.5 "Urbanist",sans-serif;color:var(--text); }
#profileAddFunds .deposit-copy-primary { display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:44px;margin-top:12px;padding:10px;font-size:14px;font-weight:650; }
#profileAddFunds .main-deposit-balance { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;font-size:13px; }
#profileAddFunds .main-deposit-balance > span { color:var(--dim); }
#profileAddFunds .main-deposit-balance > b { font-size:14px;font-weight:650;text-align:right;overflow-wrap:anywhere; }
#profileAddFunds .main-deposit-gas { margin-top:8px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-soft);font-size:13px;line-height:1.5; }
#profileAddFunds .main-deposit-gas strong { color:#1ac9d4;font-weight:650; }
#profileAddFunds .main-deposit-gas p { margin:5px 0 0;color:var(--dim); }
#profileAddFunds #profileDepositStatus { font-size:12px;margin:10px 0 0; }
#profileAddFunds #profileDepositRefresh { display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;width:100%;margin-top:10px;font-size:13px; }

/* Transfer confirmation actions have equal geometry without changing colours. */
:is(#walletTransferConsent,#walletTransferPreparing,#withdrawalConsent) .withdrawal-consent-actions {
  grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:10px;
}
:is(#walletTransferConsent,#walletTransferPreparing,#withdrawalConsent) .withdrawal-consent-actions > button {
  width:100%;min-width:0;height:48px;min-height:48px;box-sizing:border-box;
  margin:0;padding:10px 12px;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;line-height:1.25;text-align:center;
}

/* Shared wallet frame: switching Overview / Transfer never changes geometry. */
#profileDrawer.wallet-shell {
  inset:50% auto auto 50%;width:min(680px,calc(100% - 36px));
  height:min(760px,calc(100dvh - 40px));max-height:calc(100dvh - 40px);
  box-sizing:border-box;padding:0 0 20px;border:1px solid var(--line);
  border-radius:22px;background:var(--surface);color:var(--text);
  overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;
  transform:translate(-50%,-50%);transition:opacity .18s ease;
}
#profileDrawer.wallet-shell.open { transform:translate(-50%,-50%); }
#profileDrawer.wallet-shell .drawer-head {
  position:sticky;top:0;z-index:2;min-height:76px;box-sizing:border-box;
  margin:0;padding:16px 20px;border-bottom:1px solid var(--line);
  background:var(--bg);backdrop-filter:none;
}
#profileDrawer.wallet-shell .drawer-head h2 { font-size:18px;line-height:1.25; }
#profileDrawer.wallet-shell .drawer-close { width:44px;height:44px;min-width:44px;min-height:44px; }
#profileDrawer.wallet-shell #walletAccountStrip { margin:0;padding:0;width:100%; }
#profileDrawer.wallet-shell #walletAccountStrip button { min-height:80px; }
#profileDrawer.wallet-shell #walletFundsNav { margin:0;padding:0 20px;min-height:48px;box-sizing:border-box; }
#profileDrawer.wallet-shell > .profile-card:not(.deposit-workspace) { margin:16px 20px;padding:16px; }
#profileDrawer.wallet-shell > .section-title { margin:20px 20px 8px; }
#profileDrawer.wallet-shell > .drawer-logout { width:calc(100% - 40px);margin-left:20px;margin-right:20px; }
#profileDrawer.wallet-shell #walletUnifiedCard { margin:0;padding:20px;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none; }
@media (max-width:720px) {
  #profileDrawer.wallet-shell {
    inset:0;width:100%;height:100dvh;max-height:100dvh;
    padding:0 0 calc(20px + env(safe-area-inset-bottom));border:0;border-radius:0;
    transform:none;scrollbar-gutter:auto;scrollbar-width:none;
  }
  #profileDrawer.wallet-shell.open { transform:none; }
  #profileDrawer.wallet-shell::-webkit-scrollbar { display:none; }
  #profileDrawer.wallet-shell .drawer-head { min-height:72px;padding:14px 16px; }
  #profileDrawer.wallet-shell #walletFundsNav { padding:0 16px; }
  #profileDrawer.wallet-shell > .profile-card:not(.deposit-workspace) { margin:16px;padding:16px; }
  #profileDrawer.wallet-shell > .section-title { margin:20px 16px 8px; }
  #profileDrawer.wallet-shell > .drawer-logout { width:calc(100% - 32px);margin-left:16px;margin-right:16px; }
  #profileDrawer.wallet-shell #walletUnifiedCard { padding:20px 16px; }
}
/* End shared wallet frame. */

/* Restore existing brand gradient on recently added blue wallet/history actions.
   Do not restyle outcomes, Sell, Cancel, status badges, navigation or filters. */
#profileDrawer .deposit-copy-primary,
#profileDrawer .deposit-status-action,
#profileDrawer .wallet-deposit-address button,
#profileDrawer #depositAddressBtn,
#profileDrawer #moveToTradingBtn,
#profileDrawer #profilePolymarketSetup,
#profileDrawer #walletTransferHistory .btn,
#walletSetup .bigbtn.buy,
#walletSetup #walletSetupCheck,
#appView #portfolioActivityView > h2 > button,
#appView #portfolioOrdersView > h2 > button,
#appView #portfolioWalletView > h2 > button,
#appView #portfolioWalletRows .portfolio-transfer-actions .btn,
#appView #portfolioWalletRows .portfolio-transfer-detail-actions .btn,
#orderResultBack .confirmactions .confirmcancel,
.sell-consent .sell-consent-refresh {
  background:var(--zeno-blue);color:#031c26;border-color:#16c7d7;box-shadow:none;
}
/* End targeted brand button correction. */

/* Compact Portfolio refresh visuals; preserve a 44px pointer target. */
#appView :is(#portfolioActivityView,#portfolioOrdersView,#portfolioWalletView) > h2 > button {
  position:relative;min-width:32px;min-height:32px;box-sizing:border-box;flex:0 0 32px;border-radius:8px;
}
#appView :is(#portfolioActivityView,#portfolioOrdersView,#portfolioWalletView) > h2 > button::after {
  content:"";position:absolute;inset:-6px;
}
/* End compact Portfolio refresh. */

/* Desktop checkout: its wallet dock is hidden, so the sticky navigation must
   sit directly below the header, not leave the hidden dock's 47px offset.
   Explore and comparison retain their visible dock and existing offsets. */
@media (min-width:1180px) {
  #appView.has-wallet-balance-dock:has(#tab-trade.compact-trade-stage:not(.hidden)) nav.tabs {
    top:var(--header);
  }
  #appView:has(#tab-trade.compact-trade-stage:not(.hidden)) #chartCard {
    scroll-margin-top:calc(var(--header) + 63px + 12px);
  }
}
/* End desktop checkout navigation offset. */

/* One refresh glyph and geometry everywhere; existing handlers own the reads. */
button.zeno-refresh {
  position:relative !important;box-sizing:border-box !important;
  width:36px !important;height:36px !important;min-width:36px !important;min-height:36px !important;
  max-width:36px !important;flex:0 0 36px !important;padding:0 !important;
  margin:0 !important;border-radius:8px !important;vertical-align:middle !important;
  align-items:center !important;justify-content:center !important;gap:0 !important;
  text-decoration:none !important;line-height:1 !important;
}
button.zeno-refresh:not([hidden]):not(.hidden) { display:inline-flex !important; }
button.zeno-refresh > .ui-icon { width:16px !important;height:16px !important;flex:none !important; }
button.zeno-refresh > span {
  position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;
  margin:-1px !important;overflow:hidden !important;clip-path:inset(50%) !important;white-space:nowrap !important;
}
/* Preserve a 44px touch target without growing the visible button. */
button.zeno-refresh::before { content:"";position:absolute;inset:-4px; }
/* The existing centered read spinner overrides Portfolio's expanded ::after. */
button.zeno-refresh.ux-reading::after {
  inset:auto !important;left:calc(50% - 8px) !important;top:calc(50% - 8px) !important;
  width:16px !important;height:16px !important;
}
button.zeno-refresh:focus-visible { outline:2px solid #dcefff;outline-offset:3px; }
/* End unified refresh controls. */