:root {
  --bg: #030b17;
  --bg2: #071426;
  --bg3: #0c1d35;
  --brd: rgba(72, 139, 237, .25);
  --gn: #16d6a3;
  --rd: #ff5874;
  --bl: #2f7dff;
  --t1: #f2f6ff;
  --t2: #9fb0cb;
  --t3: #6f83a2;
}

body {
  display: block;
  min-height: 100vh;
  padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(circle at 50% -8%, rgba(30, 110, 225, .19), transparent 28rem),
    linear-gradient(180deg, #04101f 0%, #030a15 48%, #020914 100%);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .24;
  background-image:
    linear-gradient(rgba(65, 119, 197, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(65, 119, 197, .12) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(to bottom, #000, transparent 52%);
}

.top-nav {
  height: calc(62px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 16px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(77, 126, 194, .18);
  background: rgba(3, 14, 29, .94);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.tn-copy { display: flex; flex-direction: column; justify-content: center; }
.top-nav .tn-eyebrow { color: #438dff; font-size: 8px; font-weight: 850; line-height: 1; letter-spacing: .18em; }
.top-nav .tn-title { margin-top: 5px; color: #fff; font-size: 22px; line-height: 1; font-weight: 850; letter-spacing: -.5px; }
.top-nav .tn-search {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(92, 149, 230, .28);
  border-radius: 50%;
  color: #c3d1e5;
  background: rgba(16, 43, 79, .48);
  font-size: 16px;
}
.top-nav .tn-search:active { color: #fff; border-color: #3b86f4; background: rgba(47, 125, 255, .2); }

.search-bar {
  margin: 10px 14px 0;
  padding: 7px 8px 7px 13px;
  border: 1px solid rgba(78, 137, 219, .3);
  border-radius: 13px;
  background: rgba(9, 27, 52, .96);
  box-shadow: 0 12px 34px rgba(0, 8, 25, .22);
}
.search-bar.show { display: flex; }
.search-bar::before { content: '\f002'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: #5d8fcf; font-size: 13px; }
.search-bar input { height: 34px; padding: 0; border: 0; background: transparent; font-size: 13px; }
.search-bar input:focus { border: 0; }
.search-bar .sb-close { width: 30px; height: 30px; color: #7f93b0; }
.pull-indicator { color: #7893b8; }
.pull-indicator.show { height: 30px; padding: 6px 0; }

.market-page {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 14px 14px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.market-overview,
.market-list-card {
  border: 1px solid rgba(69, 128, 213, .28);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(10, 30, 57, .97), rgba(5, 19, 39, .98));
  box-shadow: 0 18px 48px rgba(0, 8, 24, .24), inset 0 1px rgba(255, 255, 255, .025);
}

.market-overview { padding: 10px 10px 12px; overflow: hidden; }
.cat-tabs { margin: 0; padding: 3px; gap: 3px; border: 0; border-radius: 12px; background: rgba(2, 12, 27, .72); }
.cat-tab { min-height: 40px; padding: 0 12px; border: 1px solid transparent; border-radius: 10px; color: #7188a9; font-size: 13px; font-weight: 700; }
.cat-tab.active { border-color: rgba(65, 137, 244, .35); color: #fff; background: linear-gradient(135deg, rgba(36, 111, 229, .36), rgba(21, 72, 151, .24)); box-shadow: inset 0 1px rgba(255, 255, 255, .045); }
.stock-feed-status { margin: 9px 2px 0; border-radius: 10px; background: rgba(14, 203, 129, .055); }
.market-overview-head { padding: 14px 4px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.market-overview-head h2 { flex: 1; min-width: 0; margin: 0; color: #f3f7ff; font-size: 17px; font-weight: 800; line-height: 1.25; }
.market-live { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; color: #7f96b6; font-size: 10px; white-space: nowrap; }
.market-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gn); box-shadow: 0 0 10px rgba(22, 214, 163, .72); }

.market-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  overflow: visible;
  padding: 0 2px 3px;
  scrollbar-width: none;
}
.market-highlights::-webkit-scrollbar,
.market-filter-tabs::-webkit-scrollbar { display: none; }
.highlight-card { min-width: 0; min-height: 114px; overflow: hidden; padding: 12px; border: 1px solid rgba(74, 137, 226, .22); border-radius: 14px; background: linear-gradient(145deg, rgba(17, 48, 91, .68), rgba(7, 24, 49, .88)); cursor: pointer; }
.highlight-card:active { border-color: #357fe9; background: rgba(25, 72, 143, .4); }
.highlight-top { display: flex; align-items: center; gap: 8px; }
.highlight-name { min-width: 0; display: flex; flex-direction: column; }
.highlight-name strong { overflow: hidden; color: #eef4ff; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.highlight-name strong em { margin-left: 6px; padding: 2px 4px; border: 1px solid rgba(69,139,238,.32); border-radius: 3px; color: #74aaff; background: rgba(48,117,221,.09); font: 700 7px/1 'SF Mono','Consolas',monospace; font-style: normal; vertical-align: 1px; }
.highlight-name span { color: #7189aa; font-size: 9px; }
.highlight-price { display: block; min-width: 0; overflow: hidden; margin-top: 13px; color: #f5f8ff; font: 750 15px/1.1 'SF Mono', 'Consolas', monospace; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.highlight-change { display: inline-flex; margin-top: 7px; padding: 3px 7px; border-radius: 6px; font-size: 10px; font-weight: 750; }
.highlight-change.up { color: var(--gn); background: rgba(22, 214, 163, .1); }
.highlight-change.down { color: var(--rd); background: rgba(255, 88, 116, .1); }
.highlight-change.neutral { color: #8293ac; background: rgba(130, 147, 172, .08); }

.market-list-card { overflow: hidden; }
.market-section-head { padding: 15px 14px 10px; display: flex; align-items: center; justify-content: space-between; }
.market-section-head h2 { margin: 0; color: #f3f7ff; font-size: 17px; font-weight: 800; }
.market-count { min-width: 28px; padding: 3px 8px; border: 1px solid rgba(74, 133, 215, .22); border-radius: 999px; color: #7891b4; background: rgba(17, 43, 78, .55); font-size: 9px; text-align: center; }
.market-filter-tabs { display: flex; gap: 7px; padding: 0 14px 11px; overflow-x: auto; scrollbar-width: none; }
.market-filter { min-width: max-content; padding: 7px 12px; border: 1px solid rgba(75, 126, 196, .18); border-radius: 999px; color: #7890b1; background: rgba(5, 20, 41, .7); font-size: 11px; font-weight: 650; }
.market-filter.active { border-color: rgba(60, 136, 248, .45); color: #dceaff; background: rgba(41, 111, 220, .22); }

.list-wrap { padding: 0; overflow: visible; }
.list-header,
.list-item { display: grid; grid-template-columns: minmax(0, 1fr) 94px 72px; column-gap: 8px; align-items: center; }
.list-header { height: 36px; padding: 0 14px; border-top: 1px solid rgba(64, 111, 178, .17); border-bottom: 1px solid rgba(64, 111, 178, .2); color: #6780a4; font-size: 9px; font-weight: 650; }
.list-header .lh-name { padding: 0; }
.list-header .lh-price,
.list-header .lh-change { width: auto; min-width: 0; line-height: 1.15; text-align: right; }
.list-item { min-height: 70px; padding: 10px 14px; border-bottom: 1px solid rgba(52, 93, 150, .18); }
.list-item:last-child { border-bottom: 0; }
.list-item:active { background: rgba(45, 112, 212, .08); }
.li-market { min-width: 0; display: flex; align-items: center; gap: 10px; }
.li-name { min-width: 0; padding: 0; }
.li-sym { overflow: hidden; color: #eef3fd; font-size: 13px; font-weight: 750; letter-spacing: -.15px; text-overflow: ellipsis; white-space: nowrap; }
.li-full { overflow: hidden; margin-top: 3px; color: #7186a6; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.li-price { width: auto; overflow: hidden; color: #eaf1fc; font-size: 12px; font-weight: 700; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.stock-usd-price { color: #f2f6ff; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stock-dollar { margin-right: 1px; color: #6ea7ff; font-size: .82em; font-weight: 800; }
.li-change { width: auto; min-width: 64px; padding: 6px 5px; border-radius: 7px; font-size: 10.5px; font-weight: 750; text-align: center; }
.li-change.up { color: var(--gn); background: rgba(22, 214, 163, .105); }
.li-change.down { color: var(--rd); background: rgba(255, 88, 116, .105); }
.li-change.neutral { color: #8392a9; background: rgba(94, 102, 115, .1); }
.empty-state { padding: 54px 20px; color: #6f84a3; }
.empty-state i { color: #3d73b9; }

@media (max-width: 390px) {
  .market-page { padding-inline: 10px; }
  .market-highlights { gap: 7px; }
  .highlight-card { min-height: 108px; padding: 10px; }
  .highlight-top { gap: 6px; }
  .highlight-price { font-size: clamp(11px, 3.8vw, 15px); }
  .highlight-change { padding-inline: 6px; font-size: 9px; }
  .list-header,
  .list-item { grid-template-columns: minmax(0, 1fr) 86px 72px; column-gap: 5px; }
  .list-item { padding-inline: 11px; }
  .li-market { gap: 8px; }
  .li-sym { font-size: 12px; }
  .li-price { font-size: 11px; }
  .li-change { min-width: 60px; padding-inline: 4px; }
}

/* Rounded market workspace. Dynamic quotes keep their existing DOM and handlers;
   this layer only restores visual grouping and touch-friendly controls. */
.top-nav .tn-search { border-radius: 50%; }
.search-bar { margin-inline: 14px; border-radius: 13px; box-shadow: 0 12px 30px rgba(0, 8, 25, .18); }
.search-bar input { border-radius: 8px; }
.search-bar .sb-close { border: 0; border-radius: 50%; background: transparent; }
.market-page { width: min(100%, 760px); padding: 14px 14px 24px; gap: 12px; }
.market-overview,
.market-list-card {
  border: 1px solid rgba(69, 128, 213, .28);
  border-radius: 16px;
  background: #07172d;
  box-shadow: 0 12px 32px rgba(0, 8, 24, .2);
}
.market-overview { padding: 10px 10px 12px; }
.cat-tabs { padding: 3px; gap: 3px; border: 1px solid rgba(69, 128, 213, .14); border-radius: 12px; background: rgba(2, 12, 27, .72); }
.cat-tab { flex: 1; min-height: 40px; padding: 0 12px; border: 1px solid transparent; border-radius: 10px; background: transparent; }
.cat-tab.active { border-color: rgba(65, 137, 244, .35); color: #fff; background: rgba(41, 111, 220, .25); box-shadow: none; }
.stock-feed-status { margin-left: 2px; margin-right: 2px; border-radius: 10px; }
.market-overview-head { padding-left: 4px; padding-right: 4px; }
.market-highlights { gap: 9px; padding: 0 2px 3px; background: transparent; }
.highlight-card { border: 1px solid rgba(74, 137, 226, .22); border-radius: 13px; background: rgba(11, 34, 65, .9); }
.highlight-card:first-child { border-left: 1px solid rgba(74, 137, 226, .22); }
.highlight-card:active { background: rgba(25, 72, 143, .34); }
.highlight-change { padding: 3px 7px; border-radius: 999px; }
.market-count { padding: 3px 8px; border: 1px solid rgba(74, 133, 215, .22); border-radius: 999px; background: rgba(17, 43, 78, .55); font-size: 9px; }
.market-filter-tabs { gap: 7px; padding: 0 14px 11px; border-bottom: 0; }
.market-filter { min-width: max-content; padding: 7px 12px; border: 1px solid rgba(75, 126, 196, .18); border-radius: 999px; background: rgba(5, 20, 41, .7); }
.market-filter.active { border-color: rgba(60, 136, 248, .45); color: #dceaff; background: rgba(41, 111, 220, .22); }
.list-header { background: rgba(2, 12, 27, .28); }
.li-change { border-radius: 8px; text-align: center; }
.li-change.up { background: rgba(22, 214, 163, .105); }
.li-change.down { background: rgba(255, 88, 116, .105); }
.li-change.neutral { background: rgba(94, 102, 115, .1); }
.stock-market-active .market-overview-head h2::after{content:'USD';display:inline-flex;align-items:center;height:16px;margin-left:7px;padding:0 5px;border:1px solid rgba(61,136,244,.35);color:#71a9ff;background:rgba(47,125,255,.08);font:700 8px/1 'SF Mono','Consolas',monospace;vertical-align:3px}
.stock-market-active .market-highlights{background:transparent}
.stock-market-active .stock-highlight{min-height:118px;border-color:rgba(74,137,226,.27)}
.stock-market-active .stock-highlight .highlight-price{font-size:16px;font-variant-numeric:tabular-nums;letter-spacing:-.035em}
.stock-market-active .stock-highlight .highlight-name span{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:390px){
  .market-page{padding-left:10px;padding-right:10px}
  .market-highlights{gap:7px}
  .stock-market-active .stock-highlight .highlight-price{font-size:clamp(11px,3.8vw,15px)}
}
@media(max-width:359px){
  .highlight-card{padding:8px}
  .highlight-top{gap:4px}
  .highlight-card .coin-icon-wrap{--ecx-coin-size:26px!important}
  .highlight-price{font-size:11px}
  .stock-market-active .stock-highlight .highlight-price{font-size:11px}
}

/* Complete daylight market terminal. Market data colours remain semantic,
   while navigation, overview and list surfaces follow the selected theme. */
html.light-mode body {
  background: #f6f8fb;
  color: #172033;
}
html.light-mode body::before { opacity: .08; }
html.light-mode .top-nav {
  background: rgba(255,255,255,.97);
  border-bottom-color: #d8e0ea;
}
html.light-mode .top-nav .tn-title,
html.light-mode .market-overview-head h2,
html.light-mode .market-section-head h2 { color: #172033; }
html.light-mode .top-nav .tn-search {
  color: #3f4b5f;
  border-color: #cdd8e7;
  background: #f1f5fa;
}
html.light-mode .search-bar {
  border-color: #d8e0ea;
  background: #fff;
}
html.light-mode .market-overview,
html.light-mode .market-list-card {
  border-color: #d8e0ea;
  background: #fff;
  box-shadow: 0 10px 28px rgba(30, 53, 84, .07);
}
html.light-mode .cat-tabs {
  border-color: #e1e7ef;
  background: #f7f9fc;
}
html.light-mode .cat-tab { color: #657289; }
html.light-mode .cat-tab.active { color: #1f64cc; border-color: #c9daf4; background: #eaf2ff; }
html.light-mode .stock-feed-status {
  color: #3f4b5f;
  background: #effaf6;
  border-color: #bfe8d8;
}
html.light-mode .market-live,
html.light-mode .highlight-name span,
html.light-mode .li-full,
html.light-mode .market-count,
html.light-mode .market-filter,
html.light-mode .list-header { color: #667386; }
html.light-mode .market-highlights { background: transparent; }
html.light-mode .highlight-card {
  border-color: #d8e0ea;
  background: #f9fbfd;
}
html.light-mode .highlight-card:first-child { border-left-color: #d8e0ea; }
html.light-mode .highlight-card:active,
html.light-mode .list-item:active { background: #eef4ff; }
html.light-mode .highlight-name strong,
html.light-mode .highlight-price,
html.light-mode .li-sym,
html.light-mode .li-price,
html.light-mode .stock-usd-price { color: #172033; }
html.light-mode .market-filter-tabs,
html.light-mode .list-header,
html.light-mode .list-item { border-color: #e2e8f0; }
html.light-mode .list-header { background: #f8fafc; }
html.light-mode .market-count { border-color: #e1e7ef; background: #f4f7fb; }
html.light-mode .market-filter { border-color: #e2e8f0; background: #f7f9fc; }
html.light-mode .market-filter.active {
  color: #1f64cc;
  border-color: #bfd2ef;
  background: #eef4ff;
}
html.light-mode .li-change.up { background: #eafaf5; }
html.light-mode .li-change.down { background: #fff0f3; }
html.light-mode .li-change.neutral { background: #f2f4f7; }
html.light-mode .highlight-change.up,
html.light-mode .li-change.up { color: #078a63; }
html.light-mode .highlight-change.down,
html.light-mode .li-change.down { color: #d53b55; }
html.light-mode .stock-market-active .market-overview-head h2::after {
  color: #1f64cc;
  border-color: #b8cff4;
  background: #eef4ff;
}
html.light-mode .stock-market-active .market-highlights {
  background: transparent;
}