/* NEXA / Bitval direction — charcoal surfaces, silver controls, semantic trading colour. */
:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  --bg: #101214;
  --surface: #191d20;
  --raised: #23292e;
  --ink: #f2f5f6;
  --muted: #9ba4ac;
  --quiet: #74808a;
  --line: #2b3238;
  --accent: #e6ecef;
  --accent-ink: #11181c;
  --positive: #49c4a8;
  --negative: #e08a96;
  --buy: #36bd9f;
  --sell: #bb4d63;
  --nav-height: 76px;
  --trade-action-height: 74px;
  --page-gutter: 20px;
  --chart-height: clamp(250px, calc(100dvh - 410px), 400px);
}

/* Base and accessible controls. */
* { box-sizing:border-box; }
html { background:var(--bg); overflow-x:clip; scroll-padding-bottom:160px; }
body { min-width:280px; margin:0; background:var(--bg); color:var(--ink); overflow-x:clip; }
body:has(dialog[open]) { overflow:hidden; }
button, input, select, textarea { font:inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button { min-height:44px; padding:0; border:0; background:none; color:inherit; cursor:pointer; }
button:disabled { cursor:default; opacity:.42; }
button, a { -webkit-user-select:none; user-select:none; }
a { color:inherit; text-decoration:none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:2px solid #a3afb7;
  outline-offset:3px;
}
button:active:not(:disabled) { opacity:.75; }
svg { display:block; width:22px; height:22px; flex:none; }
h1, h2, h3, p { margin:0; }
strong, b { font-weight:600; }
small { font-size:12px; }
[hidden] { display:none !important; }
.visually-hidden {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0, 0, 0, 0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
label { display:block; margin-bottom:20px; color:var(--muted); font-size:13px; line-height:1.5; }
input, select, textarea {
  display:block;
  width:100%;
  min-width:0;
  min-height:48px;
  padding:12px 13px;
  border:1px solid #485158;
  border-radius:8px;
  background:var(--surface);
  color:var(--ink);
  outline:none;
  font-size:14px;
}
label > input, label > select, label > textarea { margin-top:8px; }
input::placeholder, textarea::placeholder { color:var(--muted); }
input:focus, select:focus, textarea:focus { border-color:#a3afb7; }
select { padding-right:24px; }
textarea { resize:vertical; line-height:1.7; }
.primary, .secondary {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  min-height:48px;
  padding:12px 16px;
  border-radius:9px;
  font-size:14px;
  font-weight:600;
  text-align:center;
}
.primary { color:var(--accent-ink); background:var(--accent); }
.secondary { border:1px solid #485158; background:var(--raised); color:var(--ink); }
.primary svg, .secondary svg { width:18px; height:18px; }
.full { width:100%; }
.icon-button { display:grid; place-items:center; width:44px; min-width:44px; min-height:44px; border-radius:50%; }
.icon-button:hover { background:var(--raised); }
.icon-button svg { width:22px; height:22px; }
.text-button { display:inline-flex; align-items:center; gap:6px; min-height:44px; color:var(--muted); font-size:13px; }
.text-button svg { width:15px; height:15px; }
.text-button:hover { color:#fff; }
.inline-icon { display:grid; place-items:center; width:44px; min-height:44px; margin-block:-8px; }
.inline-icon svg { width:18px; height:18px; }
.up { color:var(--positive); }
.down { color:var(--negative); }
.quiet { color:var(--muted); font-size:12px; }
.subtle-note { margin-top:20px; color:var(--muted); font-size:12px; line-height:1.8; overflow-wrap:anywhere; }

/* Application frame and persistent navigation. */
.demo-strip { display:flex; justify-content:space-between; align-items:center; gap:14px; min-height:43px; padding:9px 24px; border-bottom:1px solid var(--line); color:var(--muted); font-size:11px; }
.demo-strip a { color:var(--ink); }
.is-embedded .demo-strip { display:none; }
.loading { padding:60px 24px; color:var(--muted); font-size:14px; }
.app-header { display:flex; align-items:center; gap:10px; max-width:1040px; min-height:70px; margin:auto; padding:13px var(--page-gutter) 9px; }
.app-wordmark { display:flex; align-items:center; gap:9px; font-size:19px; font-weight:650; letter-spacing:.8px; }
.nexa-mark { display:grid; place-items:center; width:28px; height:28px; padding-right:2px; border-radius:7px; background:var(--accent); color:var(--accent-ink); font-size:21px; line-height:1; font-weight:800; letter-spacing:-2px; }
.account-badge { display:inline-flex; align-items:center; width:fit-content; padding:6px 10px; border:1px solid var(--line); border-radius:20px; background:var(--raised); color:var(--muted); font-size:11px; font-weight:500; white-space:nowrap; }
.app-header > .account-badge { margin-left:auto; }
.app-main { max-width:760px; min-height:calc(100dvh - 70px); margin:auto; padding:20px var(--page-gutter) calc(var(--nav-height) + 30px); transform-origin:top center; }
.app-main[data-view="home"], .app-main[data-view="assets"], .app-main[data-view="settings"], .app-main[data-view="market"], .app-main[data-view="orders"], .app-main[data-view="issue"], .app-main[data-view="admin"] { max-width:680px; }
body[data-view="trade"] .app-header { display:none; }
.app-main[data-view="trade"] { min-height:100dvh; padding-top:12px; padding-bottom:calc(var(--nav-height) + var(--trade-action-height) + 26px); }
.view-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:24px; }
.view-heading h1 { font-size:26px; font-weight:620; line-height:1.2; letter-spacing:-.6px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:28px 0 12px; }
.section-heading h2 { font-size:18px; font-weight:600; letter-spacing:-.3px; }
.bottom-nav {
  position:fixed;
  z-index:30;
  inset:auto 0 0;
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  min-height:var(--nav-height);
  padding:7px 10px max(11px, env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  background:var(--bg);
}
.bottom-nav button { position:relative; isolation:isolate; display:flex; justify-content:center; align-items:center; flex-direction:column; gap:6px; min-height:52px; color:var(--quiet); font-size:11px; line-height:1.15; }
.bottom-nav svg { width:22px; height:22px; }
.bottom-nav .active { color:var(--ink); }
.bottom-nav .active svg { stroke-width:2; }
.bottom-nav .active span { font-weight:600; }
.bottom-nav button:before { content:""; position:absolute; width:39px; height:31px; margin-top:-18px; border-radius:8px; background:transparent; z-index:-1; }
.bottom-nav .active:before { background:var(--raised); }

/* Home:asset number, four actions, then a dense market list. */
.account-overview { padding-top:3px; }
.balance-label { display:flex; align-items:center; gap:4px; min-height:28px; margin-bottom:13px; color:var(--muted); font-size:13px; }
.balance-value { font-size:clamp(36px, 10vw, 48px); line-height:1.12; font-weight:590; letter-spacing:-1.7px; overflow-wrap:anywhere; }
.balance-value small { margin-left:9px; color:var(--muted); font-size:12px; font-weight:500; letter-spacing:.1px; }
.balance-breakdown { display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:17px; color:var(--muted); font-size:12px; line-height:1.6; }
.balance-breakdown b { margin-left:5px; color:var(--ink); font-weight:500; }
.quick-actions { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; padding:24px 0 21px; border-bottom:1px solid var(--line); }
.quick-actions button { display:flex; align-items:center; flex-direction:column; gap:10px; min-height:75px; font-size:12px; white-space:nowrap; }
.quick-actions button > span { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--line); border-radius:12px; background:var(--raised); color:var(--ink); }
.quick-actions button:first-child > span { background:var(--accent); color:var(--accent-ink); border-color:#a3afb7; }
.quick-actions svg { width:21px; height:21px; }
.first-trade { display:flex; align-items:center; gap:13px; width:100%; margin-top:22px; padding:17px 0; border-bottom:1px solid var(--line); text-align:left; }
.first-trade-icon { display:grid; place-items:center; width:39px; height:39px; border:1px solid #485158; border-radius:50%; color:var(--ink); }
.first-trade-icon svg { width:19px; height:19px; }
.first-trade > svg { width:17px; height:17px; margin-left:auto; color:var(--muted); }
.first-trade strong { display:block; color:var(--ink); font-size:14px; font-weight:550; }
.first-trade small { display:block; margin-top:5px; color:var(--muted); font-size:12px; }
.markets-section .section-heading { margin-bottom:0; }
.account-footnote { margin-top:27px; color:var(--quiet); font-size:11px; line-height:1.7; text-align:center; }

/* Public data states. */
.feed-status { display:inline-flex; align-items:center; gap:5px; min-height:30px; color:var(--muted); font-size:11px; line-height:1.5; }
button.feed-status { min-height:44px; }
.feed-status i { width:5px; height:5px; margin-right:1px; border-radius:50%; background:var(--accent); }
.feed-status small { margin-left:3px; color:var(--quiet); font-size:11px; }
.feed-status svg { width:13px; height:13px; }
.feed-status.is-error { color:#e2a2aa; }
.feed-status.is-loading { color:var(--muted); }
.feed-status.is-live { color:var(--muted); }
.feed-status.is-live i { background:var(--accent); }
.network-message { display:flex; align-items:center; gap:12px; margin:12px 0; padding:9px 12px; border:1px solid #613d47; border-radius:8px; background:#291e23; color:#e4adb6; font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
.network-message span { min-width:0; flex:1; }
.network-message button { min-width:44px; color:#f1dce1; white-space:nowrap; }
.empty-state { display:flex; align-items:center; flex-direction:column; gap:9px; padding:42px 16px; color:var(--muted); text-align:center; }
.empty-state svg { width:30px; height:30px; margin-bottom:6px; color:var(--quiet); }
.empty-state p { color:var(--muted); font-size:14px; }
.empty-state small { max-width:250px; color:var(--quiet); font-size:12px; line-height:1.8; }
.empty-state.compact { padding:30px 14px; }

/* Market list and asset list. */
.search-field { position:relative; margin-bottom:19px; }
.search-field svg { position:absolute; top:15px; left:14px; width:18px; height:18px; color:var(--muted); }
.search-field input { min-height:48px; margin:0; padding-left:42px; border-color:var(--line); background:var(--surface); font-size:14px; }
.segmented { display:flex; gap:25px; }
.segmented button { min-height:46px; padding-inline:1px; border-bottom:2px solid transparent; color:var(--muted); font-size:15px; }
.segmented .active { border-bottom-color:#a3afb7; color:var(--ink); font-weight:550; }
.list-labels { display:flex; justify-content:space-between; gap:10px; padding:17px 0 11px; border-bottom:1px solid var(--line); color:var(--quiet); font-size:11px; }
.market-row { display:flex; align-items:center; min-height:79px; border-bottom:1px solid var(--line); }
.market-link { display:grid; grid-template-columns:32px minmax(48px, 1fr) minmax(78px, max-content) 68px; align-items:center; gap:9px; width:100%; min-width:0; min-height:78px; padding-block:14px; text-align:left; flex:1; }
.coin { display:grid; place-items:center; width:32px; height:32px; border:1px solid #485158; border-radius:50%; background:transparent; color:var(--ink); font-size:21px; font-weight:550; flex:none; }
.coin img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: contain; }
.coin-name { min-width:0; flex:1; text-align:left; }
.coin-name strong { display:block; color:var(--ink); font-size:14px; font-weight:600; white-space:nowrap; }
.coin-name strong small { margin-left:3px; color:var(--quiet); font-size:11px; font-weight:400; }
.coin-name em { display:block; max-width:115px; margin-top:6px; overflow:hidden; color:var(--muted); font-size:11px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.market-numbers { min-width:0; text-align:right; white-space:nowrap; }
.market-numbers strong { display:block; font-size:14px; font-weight:550; letter-spacing:-.3px; }
.market-numbers small { display:block; margin-top:6px; color:var(--muted); font-size:11px; }
.percent { display:grid; place-items:center; min-height:34px; padding:5px 4px; border-radius:6px; background:var(--raised); color:var(--muted); font-size:12px; font-weight:550; letter-spacing:-.25px; white-space:nowrap; }
.percent.up { background:#183930; color:#61cfb3; }
.percent.down { background:#3c262e; color:#e5a1ad; }
.favorite { display:grid; place-items:center; min-width:44px; width:44px; min-height:54px; margin-left:-8px; color:var(--quiet); flex:none; }
.favorite svg { width:18px; height:18px; }
.favorite.selected { color:var(--ink); }
.asset-overview { padding:3px 0 28px; }
.asset-tools { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.asset-tools button { display:flex; align-items:center; justify-content:center; gap:9px; min-height:44px; font-size:13px; }
.asset-tools button + button { border-left:1px solid var(--line); }
.asset-tools svg { width:20px; height:20px; color:var(--muted); }
.asset-row { display:flex; align-items:center; gap:13px; width:100%; min-height:82px; padding-block:19px; border-bottom:1px solid var(--line); text-align:left; }
.asset-values { min-width:0; margin-left:auto; text-align:right; overflow-wrap:anywhere; }
.asset-values strong { display:block; font-size:16px; font-weight:550; }
.asset-values small { display:block; margin-top:6px; color:var(--muted); font-size:11px; }

/* Market detail:chart first, trading controls remain at the bottom. */
.trade-detail { position:relative; min-width:0; }
.pair-heading { display:flex; align-items:center; gap:6px; min-height:44px; margin-bottom:8px; }
.pair-select-label { min-width:0; margin:0; flex:1; }
.pair-select-label select { min-height:44px; margin:0; padding:3px 24px 3px 0; border:0; border-radius:0; background:transparent; font-size:22px; font-weight:620; letter-spacing:-.55px; }
.pair-select-label option { background:var(--surface); font-size:16px; }
.spot-label { padding:4px 6px; border:1px solid #485158; border-radius:4px; color:var(--muted); font-size:11px; white-space:nowrap; }
.pair-heading > .icon-button { color:var(--muted); margin-left:auto; }
.trade-quote { display:flex; flex-direction:column; gap:13px; padding:4px 0 16px; }
.trade-quote > div:first-child { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.trade-price { display:block; font-size:31px; line-height:1.12; font-weight:610; letter-spacing:-.9px; }
.quote-change { color:var(--positive); font-size:13px; font-weight:550; white-space:nowrap; }
.quote-change.down { color:var(--negative); }
.quote-change small { margin-left:3px; color:var(--muted); font-size:11px; font-weight:400; }
.day-stats { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin:0; font-size:12px; }
.day-stats > div { min-width:0; }
.day-stats > div:last-child { text-align:right; }
.day-stats dt { margin-bottom:6px; color:var(--quiet); font-size:11px; }
.day-stats dd { margin:0; color:var(--muted); font-size:11px; font-weight:500; overflow-wrap:anywhere; }
.market-detail-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; min-height:44px; margin:2px 0 12px; padding:3px; border:1px solid var(--line); border-radius:9px; background:var(--surface); }
.market-detail-tabs button { min-height:44px; padding-inline:12px; border-radius:6px; color:var(--muted); font-size:13px; font-weight:500; }
.market-detail-tabs button.active, .market-detail-tabs button[aria-selected="true"], .market-detail-tabs button[aria-pressed="true"] { background:#30383e; color:var(--ink); }
#price-chart-panel, #market-depth-panel { min-width:0; }
.timeframes { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); align-items:center; gap:3px; padding:3px 0 8px; border-bottom:1px solid var(--line); }
.timeframes > button { min-width:0; min-height:44px; padding-inline:2px; border-radius:6px; color:var(--muted); font-size:12px; white-space:nowrap; }
.timeframes > button.active { background:var(--raised); color:var(--ink); font-weight:600; }
.timeframes > span { grid-column:1 / -1; }
.candles { display:block; width:100%; height:var(--chart-height); margin-top:10px; overflow:visible; }
.candles text { fill:var(--muted); font-size:12px; font-weight:400; }
.chart-grid { fill:none; stroke:var(--line); stroke-width:.6; opacity:.65; }
.candle-up { fill:#3fb79d; stroke:#3fb79d; }
.candle-down { fill:#ce687c; stroke:#ce687c; }
.candles .candle-body { transition:x .3s ease, y .3s ease, height .3s ease; }
.candle-volume { opacity:.42; stroke:none; }
.chart-last-price { transition:transform .3s ease; }
.chart-last-price path { fill:none; stroke-width:.75; stroke-dasharray:3 3; opacity:.85; }
.chart-last-price rect { stroke:none; }
.chart-last-price text { fill:var(--accent-ink); stroke:none; font-size:11px; font-weight:650; letter-spacing:-.25px; }
.chart-time-labels text { font-size:11px; }
.chart-loading, .chart-empty { display:flex; align-items:center; justify-content:center; gap:5px; min-height:var(--chart-height); color:var(--muted); font-size:13px; text-align:center; }
.chart-empty { flex-direction:column; }
.chart-loading span { width:4px; height:28px; background:var(--raised); animation:loading-bars 1s ease-in-out infinite; }
.chart-loading span:nth-child(2) { height:43px; animation-delay:.15s; }
.chart-loading span:nth-child(3) { height:21px; margin-right:12px; animation-delay:.3s; }
[data-detail-status] { display:flex; justify-content:flex-end; min-height:28px; }
.trade-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding-top: 4px; border-top: 1px solid var(--line); }
.trade-meta [data-detail-status] { min-width: 0; justify-content: flex-start; }
.trade-meta .text-button { flex: none; gap: 6px; font-size: 12px; }
.trade-meta .text-button > span { display: grid; place-items: center; min-width: 20px; height: 20px; padding-inline: 4px; border-radius: 5px; background: var(--raised); color: var(--ink); font-size: 11px; }
.pair-heading .pair-back { margin-left: -8px; }
.pair-heading .coin { flex: none; width: 28px; height: 28px; }
.trade-cta {
  position:fixed;
  z-index:25;
  inset:auto 0 var(--nav-height);
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:12px;
  min-height:var(--trade-action-height);
  padding:12px var(--page-gutter);
  border-top:1px solid var(--line);
  background:var(--surface);
}
.trade-cta .primary { min-height:48px; border-radius:10px; font-size:16px; }
.trade-buy, .primary.trade-buy { background:var(--buy); color:#092a23; }
.trade-sell, .primary.trade-sell { background:var(--sell); color:#fff3f6; }

/* Complete order book, also reused at a smaller size inside the order sheet. */
.order-book { min-width:0; }
.book-heading { display:flex; justify-content:space-between; gap:12px; min-height:40px; margin-bottom:7px; color:var(--muted); font-size:11px; line-height:1.65; }
.book-heading > span:last-child { text-align:right; }
.book-row { position:relative; display:flex; justify-content:space-between; gap:6px; min-height:29px; padding:8px 4px 8px 0; font-size:12px; line-height:1.2; }
.book-row:before { content:""; position:absolute; inset:2px 0 2px auto; width:var(--depth); background:#a7475c24; }
.book-row.bid:before { background:#289c7f20; }
.book-row span { position:relative; z-index:1; white-space:nowrap; }
.book-row.ask span:first-child { color:#dc8293; }
.book-row.bid span:first-child { color:#52bfa6; }
.book-row span:last-child { color:var(--muted); font-size:11px; }
.book-mid { padding:14px 0 13px; margin-block:8px; border-block:1px solid var(--line); color:var(--ink); font-size:18px; font-weight:600; letter-spacing:-.5px; overflow-wrap:anywhere; }
.book-mid small { display:block; margin-top:5px; color:var(--muted); font-size:11px; font-weight:400; letter-spacing:0; }
.book-caption { margin-top:13px; color:var(--quiet); font-size:11px; line-height:1.5; text-align:right; }
.depth-status { display:flex; flex-direction:column; gap:6px; padding-top:20px; color:var(--muted); font-size:12px; line-height:1.8; }
.depth-status button { align-self:flex-start; }
#market-depth-panel { padding-top:10px; }
#market-depth-panel .book-heading { font-size:12px; }
#market-depth-panel .book-row { min-height:35px; padding-block:10px; font-size:14px; }
#market-depth-panel .book-row span:last-child { font-size:13px; }
#market-depth-panel .book-mid { text-align:center; }
#market-depth-panel .book-mid small { display:inline; margin-left:6px; }

.full-book-labels, .full-book-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.full-book-labels { margin: 7px 0 12px; font-size: 14px; }
.book-side { min-width: 0; }
.book-side-heading { display: flex; justify-content: space-between; gap: 8px; min-height: 34px; color: var(--muted); font-size: 11px; }
#market-depth-panel .full-book-grid .book-row { min-height: 36px; gap: 5px; font-size: 12px; }
#market-depth-panel .full-book-grid .book-row span:last-child { font-size: 11px; }
.book-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 20px; padding: 20px 0; border-block: 1px solid var(--line); }
.book-summary > span { color: var(--muted); font-size: 12px; }
.book-summary > strong { color: var(--ink); font-size: 21px; letter-spacing: -.5px; }
.book-summary small { color: var(--muted); font-size: 11px; font-weight: 400; letter-spacing: 0; }

/* Native bottom sheet — entry and confirmation are separate, scrollable layers. */
dialog { color:var(--ink); overscroll-behavior:contain; }
dialog::backdrop { background:#060708ba; }
.order-entry-sheet {
  position:fixed;
  inset:auto 0 0;
  width:100%;
  max-width:none;
  max-height:calc(100dvh - 22px);
  margin:0;
  padding:10px var(--page-gutter) max(24px, env(safe-area-inset-bottom));
  overflow:auto;
  border:1px solid #485158;
  border-bottom:0;
  border-radius:22px 22px 0 0;
  background:var(--surface);
  scrollbar-width:thin;
  scrollbar-color:#5d5e5f transparent;
}
.order-entry-sheet:before { content:""; display:block; width:34px; height:4px; margin:0 auto 3px; border-radius:3px; background:var(--raised); }
.sheet-heading { position:sticky; z-index:3; top:-10px; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:61px; margin-bottom:16px; padding-block:9px; border-bottom:1px solid #485158; background:var(--surface); }
.sheet-heading > div > span { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
.sheet-heading h2 { font-size:21px; font-weight:600; letter-spacing:-.4px; }
.sheet-heading button { display:grid; place-items:center; min-width:44px; min-height:44px; color:var(--muted); }
.sheet-heading button svg { width:22px; height:22px; }
.trade-workspace { display:grid; grid-template-columns:minmax(0, 1.18fr) minmax(0, .82fr); gap:20px; align-items:start; min-width:0; padding-top:2px; }
.trade-workspace > * { min-width:0; }
.side-selector { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-bottom:15px; padding:3px; border-radius:8px; background:var(--raised); }
.side-selector button { min-height:44px; padding-inline:8px; border-radius:5px; color:var(--muted); font-size:14px; font-weight:550; }
.side-selector button.active { background:#37b697; color:#082a22; }
.side-selector button[data-side="sell"].active { background:#b94b62; color:#fff2f6; }
.compact-label { margin-bottom:13px; color:var(--muted); font-size:12px; }
.compact-label input, .compact-label select { min-height:48px; padding:12px 10px; border-color:#485158; border-radius:7px; background:var(--raised); font-size:14px; }
.order-type-label select { margin-top: 8px; }
.order-input-label { position:relative; }
.order-input-label input { margin-top: 8px; padding-right: 45px; }
.order-input-label .input-unit { position:absolute; top: auto; bottom: 18px; right: 10px; color: var(--muted); font-size: 11px; line-height: 12px; pointer-events: none; }
.market-price-note { min-height:61px; padding:10px 12px; margin-bottom:13px; border:1px solid #485158; border-radius:7px; background:var(--raised); color:var(--muted); font-size:11px; line-height:1.7; }
.market-price-note > span { display:block; margin-bottom:3px; }
.market-price-note strong { display:block; color:var(--ink); font-size:14px; font-weight:500; }
.amount-presets { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:3px; }
.amount-presets button { min-width:0; min-height:44px; padding-inline:1px; border:1px solid #485158; border-radius:5px; background:var(--raised); color:var(--muted); font-size:11px; }
.amount-presets button:hover { background:var(--raised); color:var(--ink); }
.available { margin-top:13px; color:var(--muted); font-size:11px; line-height:1.8; overflow-wrap:anywhere; }
.available strong { color:var(--ink); font-weight:500; }
.order-estimate { display:grid; gap:6px; min-height:56px; margin:17px 0 14px; font-size:12px; }
.order-estimate > span { color:var(--muted); }
.order-estimate > strong { color:var(--ink); font-size:20px; font-weight:600; overflow-wrap:anywhere; }
.order-estimate strong small { margin-left:3px; color:var(--muted); font-size:11px; font-weight:400; }
.order-estimate > small { color:var(--muted); font-size:11px; line-height:1.6; }
.order-submit { min-height:48px; border-radius:8px; background:var(--buy); color:#082c24; font-size:15px; }
.order-submit.sell { background:var(--sell); color:#fff1f4; }
.form-status { color:#edacb9; font-size:12px; line-height:1.75; overflow-wrap:anywhere; }
.form-status:not(:empty) { padding-top:12px; }
.confirmation-dialog { position:fixed; width:min(420px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); margin:auto; padding:30px 25px 24px; overflow:auto; border:1px solid #485158; border-radius:19px; background:var(--raised); box-shadow:0 20px 90px #0008; }
.confirmation-dialog[open] { animation:dialog-enter .2s cubic-bezier(.2, .75, .25, 1); }
.confirmation-dialog::backdrop { background:#000a; }
.dialog-close { position:absolute; top:8px; right:9px; display:grid; place-items:center; width:44px; min-height:44px; color:var(--muted); font-size:28px; line-height:1; }
.confirmation-icon { display:grid; place-items:center; width:46px; height:46px; margin-bottom:21px; border:1px solid #485158; border-radius:13px; background:var(--raised); color:var(--ink); }
.confirmation-icon svg { width:24px; height:24px; }
.eyebrow { margin-bottom:11px; color:var(--muted); font-size:11px; }
.confirmation-dialog h2 { color:var(--ink); font-size:23px; line-height:1.45; font-weight:600; letter-spacing:-.4px; overflow-wrap:anywhere; }
.confirmation-facts { display:grid; gap:19px; margin:23px 0 0; padding:23px 0; border-block:1px solid #485158; font-size:13px; }
.confirmation-facts > div { display:flex; justify-content:space-between; align-items:center; gap:15px; }
.confirmation-facts dt { color:var(--muted); }
.confirmation-facts dd { margin:0; color:var(--ink); text-align:right; overflow-wrap:anywhere; }
.confirmation-actions { display:grid; grid-template-columns:1fr 1.5fr; gap:11px; margin-top:25px; }
.confirmation-actions button { min-width:0; min-height:48px; padding-inline:9px; font-size:13px; }
.reset-copy { margin-top:16px; color:var(--muted); font-size:13px; line-height:1.9; }
#confirmation-error { margin-top:14px; color:var(--negative); font-size:13px; line-height:1.7; }

/* Orders and operational views. */
.order-tabs { display:flex; align-items:center; gap:26px; border-bottom:1px solid var(--line); }
.order-tabs button { min-height:49px; border-bottom:2px solid transparent; color:var(--muted); font-size:14px; }
.order-tabs button.active { border-color:#a3afb7; color:var(--ink); }
.order-tabs small { margin-left:4px; font-size:12px; }
.order-row { padding:23px 0; border-bottom:1px solid var(--line); }
.order-row-title { display:flex; align-items:center; gap:9px; }
.order-side { display:grid; place-items:center; width:25px; height:25px; border-radius:5px; background:#1a3b31; color:#61caae; font-size:12px; }
.order-side.down { background:#3d2630; color:#e49bab; }
.order-row-title strong { color:var(--ink); font-size:15px; }
.order-row-title strong small { color:var(--muted); font-size:11px; font-weight:400; }
.order-state { margin-left:auto; color:var(--muted); font-size:11px; white-space:nowrap; }
.cancel-order { min-width:52px; min-height:44px; margin-left:3px; padding-inline:9px; border:1px solid #485158; border-radius:6px; color:var(--ink); font-size:12px; }
.order-facts { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:11px; margin-top:17px; }
.order-facts > div span { display:block; color:var(--muted); font-size:11px; }
.order-facts b { display:block; margin-top:8px; color:var(--ink); font-size:12px; font-weight:500; overflow-wrap:anywhere; }
.order-facts > div:last-child { text-align:right; }
.order-meta { display:flex; justify-content:space-between; gap:12px; margin-top:16px; color:var(--quiet); font-size:11px; line-height:1.6; overflow-wrap:anywhere; }
.detail-heading { display:flex; align-items:center; gap:9px; min-height:44px; margin:-4px 0 24px -8px; }
.detail-heading h1 { color:var(--ink); font-size:23px; font-weight:600; letter-spacing:-.4px; }
.page-intro { margin-bottom:25px; color:var(--ink); font-size:16px; }
.form-columns { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-columns label { min-width:0; }
.token-result { padding:24px 0; border-top:1px solid var(--line); }
.token-top { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.token-top > span { color:var(--ink); font-size:23px; font-weight:550; letter-spacing:-.4px; }
.token-top small { color:var(--muted); font-size:11px; }
.token-result h3 { margin-top:11px; color:var(--muted); font-size:14px; font-weight:500; line-height:1.7; overflow-wrap:anywhere; }
.token-result dl { display:grid; gap:15px; margin:21px 0 6px; font-size:12px; }
.token-result dl > div { display:flex; justify-content:space-between; gap:14px; }
.token-result dt { color:var(--muted); }
.token-result dd { margin:0; color:var(--ink); text-align:right; overflow-wrap:anywhere; }
.admin-metrics { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); padding:5px 0 29px; }
.admin-metrics > div + div { padding-left:18px; border-left:1px solid var(--line); }
.admin-metrics span { color:var(--muted); font-size:11px; }
.admin-metrics strong { display:block; margin-top:13px; color:var(--ink); font-size:33px; font-weight:550; }
.ledger-summary { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:23px 0; margin-bottom:18px; border-block:1px solid var(--line); }
.ledger-summary > span { color:var(--muted); font-size:11px; }
.ledger-summary strong { display:block; margin-top:10px; color:var(--ink); font-size:19px; font-weight:550; }
.ledger-summary strong small { color:var(--muted); font-size:11px; font-weight:400; }

/* Account and settings. */
.profile-block { display:flex; align-items:center; flex-direction:column; padding:15px 0 31px; }
.profile-avatar { display:grid; place-items:center; width:68px; height:68px; margin-bottom:18px; padding-right:4px; border:1px solid #a3afb7; border-radius:50%; background:var(--raised); color:var(--ink); font-size:39px; font-weight:650; letter-spacing:-4px; }
.profile-block h1 { color:var(--ink); font-size:24px; font-weight:600; }
.profile-block p { margin-top:11px; color:var(--muted); font-size:12px; }
.profile-block .account-badge { margin-top:16px; }
.settings-list { border-top:1px solid var(--line); }
.setting-row { display:flex; align-items:center; gap:14px; width:100%; min-height:85px; padding:19px 0; border-bottom:1px solid var(--line); text-align:left; }
.setting-icon { display:grid; place-items:center; width:39px; height:39px; border:1px solid #485158; border-radius:11px; background:var(--raised); color:var(--muted); flex:none; }
.setting-icon svg { width:21px; height:21px; }
.setting-row > span:nth-child(2) { min-width:0; flex:1; }
.setting-row strong { display:block; color:var(--ink); font-size:15px; font-weight:550; }
.setting-row small { display:block; margin-top:6px; color:var(--muted); font-size:12px; line-height:1.6; }
.setting-row > svg { width:17px; height:17px; color:var(--quiet); }
.connection-detail { padding-top:27px; color:var(--muted); font-size:11px; text-align:center; }
.connection-detail .feed-status { justify-content:center; }
.connection-detail p { margin-top:5px; line-height:1.7; }
.product-return { display:flex; justify-content:center; align-items:center; gap:8px; min-height:44px; margin-top:22px; color:var(--muted); font-size:12px; }
.product-return svg { width:15px; height:15px; }
.toast { position:fixed; z-index:90; left:50%; bottom:calc(var(--nav-height) + 16px); width:max-content; max-width:calc(100vw - 32px); padding:13px 17px; border:1px solid #a3afb7; border-radius:10px; background:var(--accent); color:var(--accent-ink); font-size:12px; line-height:1.7; transform:translateX(-50%); }
body[data-view="trade"] .toast { bottom:calc(var(--nav-height) + var(--trade-action-height) + 10px); }

/* Larger screens keep the same mobile trading model, with a centred sheet. */
@media (min-width:760px) {
  :root { --page-gutter:30px; --chart-height:410px; }
  .app-header { padding-block:20px 11px; }
  .app-main { padding-top:27px; }
  .app-main[data-view="trade"] { max-width:820px; padding-top:22px; }
  .bottom-nav { width:min(760px, 100%); right:auto; left:50%; padding-inline:22px; border-inline:1px solid #485158; transform:translateX(-50%); }
  .trade-cta { width:min(760px, 100%); right:auto; left:50%; padding-inline:24px; border-inline:1px solid #485158; transform:translateX(-50%); }
  .trade-cta .primary { font-size:16px; }
  .balance-value { font-size:49px; }
  .market-link { grid-template-columns:36px minmax(80px, 1fr) minmax(100px, max-content) 82px; min-height:87px; gap:13px; }
  .market-numbers strong, .coin-name strong { font-size:16px; }
  .market-numbers small, .coin-name em { font-size:12px; }
  .coin { width:36px; height:36px; }
  .percent { min-height:36px; font-size:13px; }
  .pair-select-label { flex:0 1 250px; }
  .trade-quote { gap:17px; }
  .trade-price { font-size:36px; }
  .day-stats { max-width:520px; }
  .day-stats dt { font-size:12px; }
  .day-stats dd { font-size:14px; }
  .market-detail-tabs { width:360px; }
  .timeframes { max-width:480px; }
  .order-entry-sheet { inset:0; width:min(620px, calc(100vw - 40px)); max-width:620px; height:fit-content; max-height:calc(100dvh - 42px); margin:auto; padding:14px 26px 28px; border:1px solid #485158; border-radius:19px; }
  .order-entry-sheet:before { display:none; }
  .sheet-heading { top:-14px; }
  .trade-workspace { grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr); gap:28px; }
  .book-row { min-height:34px; font-size:13px; }
  .book-row span:last-child { font-size:12px; }
  .book-mid { font-size:22px; }
  .order-facts > div span { font-size:12px; }
  .order-facts b { font-size:14px; }
}

/* 320px phones:retain complete numeric prices and real 44px touch areas. */
@media (max-width: 359px) {
  :root { --page-gutter:14px; --nav-height:73px; --trade-action-height:72px; --chart-height:clamp(240px, calc(100dvh - 405px), 360px); }
  .app-header { gap:6px; }
  .app-wordmark { font-size:17px; gap:7px; }
  .account-badge { padding-inline:8px; font-size:11px; }
  .balance-value { font-size:35px; }
  .balance-value small { margin-left:6px; font-size:11px; }
  .balance-breakdown { gap:7px 16px; font-size:11px; }
  .quick-actions { gap:4px; }
  .quick-actions button { font-size:11px; }
  .quick-actions button > span { width:42px; height:42px; }
  .first-trade { gap:10px; }
  .first-trade strong { font-size:13px; }
  .first-trade small { font-size:11px; }
  .market-link { grid-template-columns:27px minmax(39px, 1fr) minmax(69px, max-content) 57px; gap:6px; }
  .coin { width:27px; height:27px; font-size:18px; }
  .coin-name strong { font-size:12px; }
  .coin-name strong small { display:none; }
  .coin-name em { max-width:71px; font-size:11px; }
  .market-numbers strong { font-size:12px; letter-spacing:-.35px; }
  .market-numbers small { font-size:11px; }
  .percent { font-size:11px; letter-spacing:-.4px; }
  .favorite { margin-left:-9px; }
  .pair-heading > .coin { display:none; }
  .pair-select-label select { font-size:18px; }
  .trade-price { font-size:28px; }
  .quote-change { font-size:12px; }
  .day-stats { gap:7px; }
  .day-stats dd { font-size:11px; }
  .market-detail-tabs button { font-size:12px; }
  .timeframes { gap:1px; }
  .timeframes > button { font-size:11px; }
  #market-depth-panel { padding-top:6px; }
  .full-book-labels { margin:2px 0 8px; }
  .book-side-heading { min-height:26px; }
  #market-depth-panel .full-book-grid .book-row { min-height:32px; padding-block:7px; }
  .book-summary { margin-top:12px; padding:12px 0; }
  .trade-workspace { grid-template-columns:minmax(0, 1.12fr) minmax(0, .88fr); gap:14px; }
  .side-selector { gap:2px; }
  .side-selector button { padding-inline:3px; font-size:13px; }
  .compact-label input, .compact-label select { padding-left:9px; font-size:12px; }
  .order-input-label input { padding-right:39px; }
  .order-input-label .input-unit { right:8px; font-size:11px; }
  .amount-presets { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:4px; }
  .available { font-size:11px; }
  .book-row { gap:3px; font-size:11px; }
  .book-row span:last-child { font-size:11px; }
  .book-heading { font-size:11px; }
  .book-mid { font-size:16px; }
  .book-caption { font-size:11px; }
  .order-estimate > strong { font-size:18px; }
  .order-row-title { gap:6px; }
  .order-row-title strong { font-size:13px; }
  .order-state { font-size:11px; }
  .order-facts { gap:7px; }
  .order-facts b { font-size:11px; }
  .order-facts > div span { font-size:11px; }
  .form-columns { gap:10px; }
  .form-columns select { font-size:12px; }
  .confirmation-dialog { padding-inline:20px; }
  .confirmation-dialog h2 { font-size:21px; }
  .confirmation-actions { gap:8px; }
  .confirmation-actions button { font-size:12px; }
}

@keyframes loading-bars { 50% { opacity:.35; transform:scaleY(.65); } }
@keyframes dialog-enter { from { opacity:.4; transform:translateY(9px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
@media (prefers-reduced-motion:reduce) {
  *, *:before, *:after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}