:root {
  --tf-bg: #0c1118;
  --tf-panel: #111923;
  --tf-panel-2: #16202c;
  --tf-chip: #1a2633;
  --tf-line: #263444;
  --tf-line-strong: #34465a;
  --tf-text: #e7edf4;
  --tf-soft: #bdc8d4;
  --tf-muted: #8795a5;
  --tf-faint: #5f6d7d;
  --tf-blue: #6ab0e8;
  --tf-green: #56c58b;
  --tf-red: #e46f79;
  --tf-amber: #d8ab55;
  --tf-purple: #ad91df;
  --tf-header-height: 48px;
  --tf-tabs-height: 38px;
}

* { box-sizing: border-box; }

html,
body {
  min-height: 100%;
  margin: 0;
  background: var(--tf-bg);
  color: var(--tf-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

button,
input,
select { font: inherit; }

button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--tf-blue);
  outline-offset: 1px;
}

.tradfi-watch {
  width: 100%;
  min-height: 100vh;
  font-size: 11px;
}

.watch-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--tf-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 12px;
  border-bottom: 1px solid var(--tf-line);
  background: rgba(12, 17, 24, .97);
}

.watch-title,
.watch-title > div,
.watch-runtime,
.scope-line,
.scope-line > div,
.section-head,
.section-head > div,
.scope-stats {
  min-width: 0;
  display: flex;
  align-items: center;
}

.watch-title { gap: 9px; }

.watch-mark {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid #3e6d91;
  border-radius: 4px;
  background: #17324a;
  color: #a9d7f8;
  font: 750 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.watch-title > div { gap: 8px; }
.watch-title h1 { margin: 0; font-size: 14px; line-height: 1; }
.watch-title p { margin: 0; color: var(--tf-muted); font-size: 9px; white-space: nowrap; }

.watch-runtime { flex: 0 0 auto; gap: 9px; color: var(--tf-muted); }
.watch-runtime time { min-width: 96px; font-size: 9px; font-variant-numeric: tabular-nums; text-align: right; }

.watch-runtime button,
.pagination button,
.market-filters > button {
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--tf-line-strong);
  border-radius: 4px;
  background: var(--tf-chip);
  color: var(--tf-soft);
  cursor: pointer;
  font-size: 9px;
}

.watch-runtime button:hover,
.pagination button:hover:not(:disabled),
.market-filters > button:hover { border-color: #4b7597; color: var(--tf-text); }

.runtime-state {
  min-width: 105px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--tf-green);
  font-size: 9px;
  white-space: nowrap;
}

.runtime-state i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.runtime-state.is-loading { color: var(--tf-amber); }
.runtime-state.is-partial { color: var(--tf-amber); }
.runtime-state.is-unavailable { color: var(--tf-red); }

.exchange-tabs {
  position: sticky;
  top: var(--tf-header-height);
  z-index: 45;
  height: var(--tf-tabs-height);
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  border-bottom: 1px solid var(--tf-line);
  background: #101721;
  scrollbar-width: none;
}

.exchange-tabs::-webkit-scrollbar { display: none; }

.exchange-tabs button {
  min-width: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 0;
  border-right: 1px solid var(--tf-line);
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--tf-muted);
  cursor: pointer;
}

.exchange-tabs button:first-child { min-width: 94px; }
.exchange-tabs button:hover { background: #151e29; color: var(--tf-soft); }
.exchange-tabs button.active { border-bottom-color: var(--tf-blue); background: #182536; color: var(--tf-text); }
.exchange-tabs b { font-size: 10px; }
.exchange-tabs span { min-width: 31px; color: var(--tf-faint); font-size: 9px; font-variant-numeric: tabular-nums; text-align: right; }
.exchange-tabs button.active span { color: var(--tf-blue); }

.module-error {
  margin: 8px 10px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(228, 111, 121, .36);
  border-radius: 5px;
  background: rgba(228, 111, 121, .08);
  color: var(--tf-red);
}

.module-error[hidden] { display: none; }
.module-error span { color: #c99ba0; }

.watch-view { padding: 8px 10px 20px; }

.scope-line {
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  padding: 0 2px 5px;
}

.scope-line > div:first-child { gap: 8px; }
.scope-line h2 { margin: 0; font-size: 13px; }
.scope-line span,
.scope-line small { color: var(--tf-muted); font-size: 9px; }
.scope-line small { flex: 0 0 auto; }

.overview-kpis {
  display: grid;
  grid-template-columns: 1.2fr repeat(4, minmax(130px, 1fr));
  gap: 5px;
  margin-bottom: 7px;
}

.overview-kpis article {
  min-width: 0;
  min-height: 78px;
  height: auto;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid var(--tf-line);
  border-radius: 5px;
  background: var(--tf-panel);
}

.overview-kpis article.kpi-primary { border-color: #31597b; background: #122133; }
.overview-kpis span { color: var(--tf-muted); font-size: 8px; }
.overview-kpis b { overflow: hidden; color: var(--tf-text); font: 720 16px/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.overview-kpis .kpi-primary b { color: #a9d7f8; }
.overview-kpis small { overflow: hidden; color: var(--tf-faint); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }

.overview-search {
  margin: 7px 0;
  overflow: hidden;
  border: 1px solid var(--tf-line);
  border-radius: 5px;
  background: var(--tf-panel);
}
.overview-search-form {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 72px 58px;
  gap: 6px;
  align-items: end;
  padding: 6px 8px;
  border-bottom: 1px solid var(--tf-line);
  background: var(--tf-panel-2);
}
.overview-search-form label { min-width: 0; display: grid; gap: 3px; }
.overview-search-form label > span { color: var(--tf-muted); font-size: 8px; }
.overview-search-form input[type="search"] {
  width: 100%;
  height: 27px;
  padding: 0 7px;
  border: 1px solid var(--tf-line-strong);
  border-radius: 4px;
  background: var(--tf-chip);
  color: var(--tf-text);
  font-size: 9px;
}
.overview-search-form input::placeholder { color: var(--tf-faint); }
.overview-search-form button {
  height: 27px;
  border: 1px solid var(--tf-line-strong);
  border-radius: 4px;
  background: var(--tf-chip);
  color: var(--tf-muted);
  cursor: pointer;
  font-size: 9px;
}
.overview-search-form button:hover { border-color: #4b7597; color: var(--tf-text); }
.overview-search-form button[type="submit"] { border-color: #31597b; color: var(--tf-blue); }
.overview-search-empty { padding: 18px 8px; color: var(--tf-muted); font-size: 9px; text-align: center; }
.overview-search-scroll { max-height: 320px; }
.overview-search-table { width: 100%; min-width: 900px; border-collapse: collapse; table-layout: fixed; }
.overview-search-table th,
.overview-search-table td {
  height: 29px;
  padding: 3px 7px;
  border-bottom: 1px solid rgba(38, 52, 68, .72);
  overflow: hidden;
  color: var(--tf-soft);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overview-search-table th { position: sticky; top: 0; z-index: 2; height: 27px; background: #182330; color: var(--tf-muted); font-size: 8px; font-weight: 600; text-align: left; }
.overview-search-table tr:last-child td { border-bottom: 0; }
.overview-search-table tr:hover td { background: #131e29; }
.overview-search-table th:nth-child(1) { width: 78px; }
.overview-search-table th:nth-child(2) { width: 130px; }
.overview-search-table th:nth-child(3) { width: 180px; }
.overview-search-table th:nth-child(4) { width: 120px; }
.overview-search-table th:nth-child(5) { width: 105px; }
.overview-search-table th:nth-child(6) { width: 105px; }
.overview-search-table th:nth-child(7) { width: 95px; }
.overview-search-table th:nth-child(8) { width: 135px; }
.overview-search-symbol { padding: 0; border: 0; background: transparent; color: var(--tf-blue); cursor: pointer; font-weight: 700; }
.overview-search-symbol:hover { text-decoration: underline; }
.overview-search-snapshot { color: var(--tf-muted); cursor: help; }

.exchange-dashboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.loading-line {
  grid-column: 1 / -1;
  min-height: 180px;
  display: grid;
  place-items: center;
  border: 1px solid var(--tf-line);
  border-radius: 5px;
  color: var(--tf-muted);
}

.exchange-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--tf-line);
  border-radius: 5px;
  background: var(--tf-panel);
}

.exchange-panel-head {
  min-height: 46px;
  display: grid;
  grid-template-columns: minmax(100px, .8fr) repeat(2, minmax(90px, .65fr)) minmax(125px, 1fr);
  gap: 7px;
  align-items: center;
  padding: 5px 8px;
  border-bottom: 1px solid var(--tf-line);
  background: var(--tf-panel-2);
}

.exchange-panel-head button {
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tf-blue);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exchange-panel-head button:hover { text-decoration: underline; }
.exchange-panel-stat { min-width: 0; display: grid; gap: 2px; }
.exchange-panel-stat span { color: var(--tf-faint); font-size: 7px; }
.exchange-panel-stat b { overflow: hidden; color: var(--tf-soft); font: 650 10px/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.exchange-panel-stat.total b { color: var(--tf-green); }

.product-breakdown { width: 100%; border-collapse: collapse; table-layout: fixed; }
.product-breakdown th,
.product-breakdown td {
  height: 29px;
  padding: 3px 7px;
  border-bottom: 1px solid rgba(38, 52, 68, .72);
  overflow: hidden;
  color: var(--tf-soft);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-breakdown tr:last-child td { border-bottom: 0; }
.product-breakdown th { height: 25px; background: #131d28; color: var(--tf-faint); font-size: 7px; font-weight: 600; text-align: left; }
.product-breakdown th:nth-child(1) { width: 39%; }
.product-breakdown th:nth-child(2) { width: 12%; }
.product-breakdown th:nth-child(3) { width: 25%; }
.product-breakdown th:nth-child(4) { width: 24%; }
.product-breakdown .num { text-align: right; font-variant-numeric: tabular-nums; }
.product-breakdown .excluded-value { color: var(--tf-amber); }
.product-breakdown .missing-value { color: var(--tf-faint); }
.product-breakdown .product-warning { margin-left: 4px; color: var(--tf-amber); cursor: help; }

.overview-note {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 2px 0;
  color: var(--tf-muted);
  font-size: 8px;
}

.overview-note > span { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; }
.overview-note p { min-width: 0; margin: 0 0 0 auto; overflow: hidden; color: var(--tf-faint); text-overflow: ellipsis; white-space: nowrap; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tf-muted); }
.dot.direct { background: var(--tf-green); }
.dot.derived { background: var(--tf-blue); }
.dot.excluded { background: var(--tf-amber); }

.scope-stats { flex: 0 0 auto; gap: 5px; }
.scope-stats b { min-width: 54px; color: var(--tf-text); font: 680 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; text-align: right; }
.scope-stats span { margin-right: 7px; }

.dense-section,
.change-strip {
  overflow: hidden;
  border: 1px solid var(--tf-line);
  border-radius: 5px;
  background: var(--tf-panel);
}

.dense-section { margin-bottom: 7px; }
.section-head {
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--tf-line);
  background: var(--tf-panel-2);
}
.section-head > div { gap: 7px; }
.section-head h3 { margin: 0; font-size: 11px; }
.section-head span,
.section-head small { color: var(--tf-muted); font-size: 8px; }
.section-head small { flex: 0 0 auto; }
.section-head small b { color: var(--tf-soft); font-variant-numeric: tabular-nums; }

.table-scroll { width: 100%; overflow: auto; }
.product-scroll { max-height: 290px; }
.product-table { width: 100%; min-width: 1100px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.product-table th,
.product-table td {
  height: 31px;
  padding: 3px 7px;
  border-bottom: 1px solid rgba(38, 52, 68, .72);
  overflow: hidden;
  color: var(--tf-soft);
  font-size: 9px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-table th { position: sticky; top: 0; z-index: 2; height: 28px; background: #182330; color: var(--tf-muted); font-size: 8px; font-weight: 600; }
.product-table th:nth-child(1) { width: 190px; }
.product-table th:nth-child(2) { width: 60px; }
.product-table th:nth-child(3) { width: 125px; }
.product-table th:nth-child(4) { width: 125px; }
.product-table th:nth-child(n+5):nth-child(-n+9) { width: 68px; }
.product-table th:nth-child(10) { width: 130px; }
.product-table th:nth-child(11) { width: 80px; }
.product-table tr:last-child td { border-bottom: 0; }
.product-table tbody tr:hover td { background: #131e29; }
.num { text-align: right !important; font-variant-numeric: tabular-nums; }
.live-cell { font-variant-numeric: tabular-nums; }
.live-value {
  display: inline-block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  color: var(--tf-soft);
  font-variant-numeric: tabular-nums;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-price { min-width: 72px; }
.live-change { min-width: 66px; }
.live-turnover { min-width: 102px; }
.live-time { min-width: 62px; color: var(--tf-muted); font-style: normal; }
.empty-cell { height: 54px !important; color: var(--tf-muted) !important; text-align: center !important; }

.capability {
  min-width: 34px;
  height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: var(--tf-chip);
  color: var(--tf-muted);
  font-size: 8px;
  cursor: help;
}
.capability.supported,
.capability.verified { border-color: rgba(86, 197, 139, .25); color: var(--tf-green); }
.capability.partial,
.capability.documented { border-color: rgba(106, 176, 232, .22); color: var(--tf-blue); }
.capability.restricted,
.capability.account_required { border-color: rgba(173, 145, 223, .22); color: var(--tf-purple); }
.capability.unknown,
.capability.not_documented { border-style: dashed; border-color: rgba(216, 171, 85, .28); color: var(--tf-amber); }
.capability.unavailable,
.capability.not_available,
.capability.not_provided,
.capability.not_applicable { color: var(--tf-faint); }

.product-exclusion {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--tf-amber);
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.change-strip { margin-bottom: 7px; }
.change-strip summary {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px;
  cursor: pointer;
  list-style: none;
}
.change-strip summary::-webkit-details-marker { display: none; }
.change-strip summary strong { font-size: 10px; }
.change-count { padding: 2px 5px; border-radius: 3px; background: var(--tf-chip); color: var(--tf-muted); font-size: 8px; }
.change-count.added { color: var(--tf-green); }
.change-count.removed { color: var(--tf-red); }
.change-headline { min-width: 0; overflow: hidden; color: var(--tf-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.change-strip summary small { flex: 0 0 auto; margin-left: auto; color: var(--tf-blue); font-size: 8px; }
.change-strip[open] summary { border-bottom: 1px solid var(--tf-line); }
.change-rows { max-height: 260px; overflow: auto; }
.change-row {
  min-height: 29px;
  display: grid;
  grid-template-columns: 20px minmax(125px, .7fr) minmax(210px, 1.4fr) 92px 52px;
  gap: 7px;
  align-items: center;
  padding: 3px 8px;
  border-bottom: 1px solid rgba(38, 52, 68, .72);
  color: var(--tf-muted);
  font-size: 8px;
}
.change-row:last-child { border-bottom: 0; }
.change-row b,
.change-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.change-row b { color: var(--tf-soft); }
.change-row time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.change-row em { color: var(--tf-green); font-style: normal; }
.change-mark { width: 17px; height: 17px; display: grid; place-items: center; border-radius: 3px; background: var(--tf-chip); font-weight: 800; }
.change-mark.added { color: var(--tf-green); }
.change-mark.removed { color: var(--tf-red); }
.change-mark.modified { color: var(--tf-blue); }
.empty-change { min-height: 43px; display: grid; place-items: center; color: var(--tf-muted); }

.market-filters {
  position: sticky;
  top: calc(var(--tf-header-height) + var(--tf-tabs-height));
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(230px, 1.4fr) minmax(180px, .9fr) minmax(170px, .8fr) auto 82px 48px;
  gap: 6px;
  align-items: end;
  padding: 6px 8px;
  border-bottom: 1px solid var(--tf-line);
  background: rgba(17, 25, 35, .98);
}
.market-filters label { min-width: 0; display: grid; gap: 3px; }
.market-filters label > span { color: var(--tf-muted); font-size: 8px; }
.market-filters input[type="search"],
.market-filters select {
  width: 100%;
  height: 27px;
  padding: 0 7px;
  border: 1px solid var(--tf-line-strong);
  border-radius: 4px;
  background: var(--tf-chip);
  color: var(--tf-text);
  font-size: 9px;
}
.market-filters input::placeholder { color: var(--tf-faint); }
.venue-filter-control { min-width: 0; display: grid; gap: 3px; position: relative; }
.venue-filter-control > .filter-label { color: var(--tf-muted); font-size: 11px; }
.venue-filter-control > .filter-label small { font-size: 10px; }
.venue-multi-select { position: relative; min-width: 0; }
.venue-multi-select summary {
  width: 100%;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 7px;
  border: 1px solid var(--tf-line-strong);
  border-radius: 4px;
  background: var(--tf-chip);
  color: var(--tf-text);
  cursor: pointer;
  font-size: 12px;
  list-style: none;
  white-space: nowrap;
}
.venue-multi-select summary::-webkit-details-marker { display: none; }
.venue-multi-select summary::after { content: "▾"; color: var(--tf-muted); font-size: 11px; }
.venue-multi-select[open] summary { border-color: var(--tf-blue); }
.venue-multi-select[open] summary::after { content: "▴"; }
.venue-options {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 60;
  min-width: 220px;
  max-height: 224px;
  overflow: auto;
  padding: 4px;
  border: 1px solid var(--tf-line-strong);
  border-radius: 5px;
  background: #182330;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .42);
}
.venue-option {
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 6px;
  border-radius: 3px;
  color: var(--tf-soft);
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
}
.venue-option:hover { background: #223244; color: var(--tf-text); }
.venue-option input { width: 15px; height: 15px; margin: 0; accent-color: var(--tf-blue); }
.venue-option span { overflow: hidden; text-overflow: ellipsis; }
.filter-checks { min-width: 150px; display: grid; align-content: center; gap: 2px; min-height: 27px; }
.filter-checks label { display: flex; align-items: center; gap: 4px; color: var(--tf-muted); font-size: 8px; white-space: nowrap; }
.filter-checks input { width: 12px; height: 12px; margin: 0; accent-color: var(--tf-blue); }
.filter-state { height: 27px; display: grid; place-items: center; color: var(--tf-green); font-size: 8px; white-space: nowrap; }
.filter-state.loading { color: var(--tf-amber); }

.directory-error { padding: 6px 8px; border-bottom: 1px solid rgba(228, 111, 121, .25); background: rgba(228, 111, 121, .08); color: var(--tf-red); font-size: 9px; }
.directory-error[hidden] { display: none; }

.market-scroll {
  /* Sticky filters sit above this scrollport; reserve their visual height so
     the table header and a one-row search result cannot be covered. */
  margin-top: var(--tradfi-market-filter-reserve, 54px);
  max-height: calc(100vh - 178px);
  min-height: 330px;
  background: var(--tf-bg);
}
.market-table { width: 100%; min-width: 1790px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.market-table th,
.market-table td {
  height: 33px;
  padding: 3px 7px;
  border-bottom: 1px solid rgba(38, 52, 68, .72);
  overflow: hidden;
  color: var(--tf-soft);
  font-size: 9px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.market-table th { position: sticky; top: 0; z-index: 4; height: 29px; background: #182330; color: var(--tf-muted); font-size: 8px; font-weight: 600; }
.market-table tbody tr:hover td { background: #111b26; }
.market-table tbody tr:last-child td { border-bottom: 0; }
.market-table th:nth-child(1) { width: 72px; }
.market-table th:nth-child(2) { width: 145px; }
.market-table th:nth-child(3) { width: 125px; }
.market-table th:nth-child(4) { width: 118px; }
.market-table th:nth-child(5) { width: 118px; }
.market-table th:nth-child(6) { width: 112px; }
.market-table th:nth-child(n+7):nth-child(-n+10) { width: 88px; }
.market-table th:nth-child(n+11):nth-child(-n+13) { width: 78px; }
.market-table th:nth-child(14) { width: 130px; }
.market-table th:nth-child(15) { width: 80px; }
.market-table th:nth-child(16) { width: 68px; }
.market-table th:nth-child(17) { width: 76px; }
.market-table th:nth-child(1),
.market-table td:nth-child(1) { position: sticky; left: 0; z-index: 3; background: var(--tf-bg); }
.market-table th:nth-child(2),
.market-table td:nth-child(2) { position: sticky; left: 72px; z-index: 3; background: var(--tf-bg); }
.market-table th:nth-child(3),
.market-table td:nth-child(3) { position: sticky; left: 217px; z-index: 3; background: var(--tf-bg); box-shadow: 1px 0 var(--tf-line); }
.market-table thead th:nth-child(-n+3) { z-index: 7; background: #182330; }
.market-table tbody tr:hover td:nth-child(-n+3) { background: #111b26; }
.market-table th button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: inherit;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  font-weight: inherit;
  white-space: nowrap;
}
.market-table th.num button { justify-content: flex-end; }
.market-table th button i { color: var(--tf-faint); font-style: normal; }
.market-table th button.active { color: var(--tf-blue); }
.market-symbol {
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tf-blue);
  cursor: pointer;
  font: 650 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.market-symbol:hover { text-decoration: underline; }
.missing-cell { color: var(--tf-amber) !important; }
.up { color: var(--tf-green) !important; }
.down { color: var(--tf-red) !important; }
.turnover-excluded { color: var(--tf-amber) !important; }
.turnover-derived { color: var(--tf-blue) !important; }
.market-status { display: inline-flex; align-items: center; min-height: 18px; padding: 1px 5px; border-radius: 3px; background: var(--tf-chip); color: var(--tf-muted); font-size: 8px; }
.market-status.active { color: var(--tf-green); }
.market-status.missing_candidate { color: var(--tf-amber); }
.market-status.delisted { color: var(--tf-red); }

.mobile-market-list { display: none; }
.market-empty { min-height: 160px; display: grid; place-items: center; align-content: center; gap: 5px; color: var(--tf-muted); }
.market-empty[hidden] { display: none; }
.market-empty strong { color: var(--tf-soft); }
.market-empty span { font-size: 9px; }
.pagination { min-height: 36px; display: flex; align-items: center; justify-content: flex-end; gap: 7px; padding: 4px 8px; border-top: 1px solid var(--tf-line); color: var(--tf-muted); font-size: 9px; }
.pagination button:disabled { cursor: not-allowed; opacity: .38; }

@media (max-width: 1180px) {
  .overview-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .exchange-dashboard { grid-template-columns: 1fr; }
  .market-filters { grid-template-columns: minmax(210px, 1.3fr) minmax(160px, .8fr) minmax(150px, .7fr) auto 80px; }
  .filter-state { display: none; }
}

@media (max-width: 760px) {
  :root { --tf-header-height: 43px; --tf-tabs-height: 37px; }
  .watch-header { padding: 0 7px; }
  .watch-title p,
  .watch-runtime time,
  .watch-runtime button { display: none; }
  .watch-title h1 { font-size: 12px; }
  .watch-mark { width: 27px; height: 27px; }
  .runtime-state { min-width: 0; font-size: 8px; }
  .exchange-tabs button { min-width: 84px; padding: 0 8px; }
  .watch-view { padding: 6px 6px 14px; }
  .scope-line { align-items: flex-start; }
  .scope-line > div:first-child { display: grid; gap: 2px; }
  .scope-line small { display: none; }
  .overview-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .overview-kpis article { min-height: 76px; height: auto; padding: 8px 7px; }
  .overview-kpis article.kpi-primary { grid-column: 1 / -1; }
  .overview-kpis b { font-size: 14px; }
  .overview-search-form { grid-template-columns: minmax(0, 1fr) 64px 54px; }
  .exchange-panel-head { grid-template-columns: 1fr 82px 105px; }
  .exchange-panel-head .exchange-panel-stat.products { display: none; }
  .product-breakdown th:nth-child(1) { width: 42%; }
  .overview-note { flex-wrap: wrap; }
  .overview-note p { flex-basis: 100%; margin-left: 0; white-space: normal; }
  .product-scroll { max-height: 250px; }
  .change-headline { display: none; }
  .change-row { grid-template-columns: 20px minmax(0, 1fr) 82px; }
  .change-row > span:not(.change-mark),
  .change-row em { display: none; }
  .market-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 6px; }
  .search-filter,
  .filter-checks { grid-column: 1 / -1; }
  .filter-checks { min-width: 0; display: flex; gap: 14px; }
  .filter-state { display: none; }
  .desktop-market-list { display: none; }
  .market-scroll { margin-top: 0; }
  .mobile-market-list { display: grid; gap: 5px; padding: 6px; background: var(--tf-bg); }
  .mobile-market-card { width: 100%; min-width: 0; display: grid; gap: 6px; padding: 8px; border: 1px solid var(--tf-line); border-radius: 5px; background: var(--tf-panel); color: var(--tf-text); cursor: pointer; text-align: left; }
  .mobile-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
  .mobile-card-head > span { min-width: 0; display: flex; align-items: baseline; gap: 6px; }
  .mobile-card-head b { color: var(--tf-blue); font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
  .mobile-card-head strong { overflow: hidden; color: var(--tf-soft); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-card-head em { flex: 0 0 auto; color: var(--tf-muted); font-size: 7px; font-style: normal; }
  .mobile-card-meta { display: flex; flex-wrap: wrap; gap: 4px; }
  .mobile-card-meta span { padding: 2px 4px; border-radius: 3px; background: var(--tf-chip); color: var(--tf-muted); font-size: 7px; }
  .mobile-card-numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .mobile-card-numbers span { min-width: 0; display: grid; gap: 2px; padding: 5px; border-radius: 3px; background: var(--tf-chip); }
  .mobile-card-numbers small { color: var(--tf-muted); font-size: 7px; }
  .mobile-card-numbers b,
  .mobile-card-numbers time { width: 100%; min-width: 0; overflow: hidden; color: var(--tf-soft); font-size: 8px; font-variant-numeric: tabular-nums; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
  .pagination { justify-content: space-between; }
}

@media (max-width: 440px) {
  .overview-kpis span { font-size: 7px; }
  .overview-kpis small { font-size: 6px; }
  .exchange-panel-head { grid-template-columns: 1fr 100px; }
  .exchange-panel-head .exchange-panel-stat.markets { display: none; }
  .product-breakdown th:nth-child(4),
  .product-breakdown td:nth-child(4) { display: none; }
  .product-breakdown th:nth-child(1) { width: 52%; }
  .product-breakdown th:nth-child(2) { width: 18%; }
  .product-breakdown th:nth-child(3) { width: 30%; }
  .change-count.removed { display: none; }
  .mobile-card-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

/* TradFi Watch readability baseline: keep dense data usable at normal zoom. */
.tradfi-watch { font-size: 13px; }
.watch-title h1 { font-size: 16px; }
.watch-title p { font-size: 11px; }
.watch-runtime time { font-size: 11px; }
.watch-runtime button,
.pagination button,
.market-filters > button { font-size: 12px; }
.runtime-state { font-size: 11px; }
.exchange-tabs b { font-size: 12px; }
.exchange-tabs span { font-size: 11px; }
.scope-line h2 { font-size: 16px; }
.scope-line span,
.scope-line small { font-size: 11px; }
.overview-kpis span { font-size: 10px; }
.overview-kpis small { font-size: 9px; }
.product-breakdown th,
.product-breakdown td { font-size: 11px; }
.product-breakdown th { font-size: 10px; }
.section-head h3 { font-size: 14px; }
.section-head span,
.section-head small { font-size: 11px; }
.product-table th,
.product-table td { font-size: 12px; }
.product-table th { font-size: 11px; }
.capability { font-size: 10px; }
.change-row { font-size: 11px; }
.market-filters label > span { font-size: 11px; }
.market-filters label > span small { font-size: 10px; }
.market-filters input[type="search"],
.market-filters select { font-size: 12px; }
.filter-checks label { font-size: 11px; }
.filter-state { font-size: 11px; }
.directory-error { font-size: 11px; }
.market-table th,
.market-table td { font-size: 12px; }
.market-table th { font-size: 11px; }
.market-symbol { font-size: 12px; }
.market-status { font-size: 11px; }
.market-empty span,
.pagination { font-size: 11px; }

@media (max-width: 760px) {
  .watch-title h1 { font-size: 14px; }
  .mobile-card-head b { font-size: 12px; }
  .mobile-card-head strong { font-size: 11px; }
  .mobile-card-head em { font-size: 10px; }
  .mobile-card-meta span,
  .mobile-card-numbers small { font-size: 10px; }
  .mobile-card-numbers b,
  .mobile-card-numbers time { font-size: 11px; }
}

/* Symbol navigation and compact, non-modal details. */
.market-symbol, .overview-search-symbol { text-decoration: none; }
.market-symbol:hover, .overview-search-symbol:hover { text-decoration: underline; }
.market-symbol:focus-visible, .overview-search-symbol:focus-visible { outline: 2px solid var(--tf-blue); outline-offset: 3px; }
.market-info-button { border: 1px solid var(--tf-line-strong); border-radius: 4px; background: var(--tf-chip); color: var(--tf-blue); padding: 4px 8px; font-size: 11px; cursor: pointer; }
.market-hover-card { position: fixed; z-index: 6000; width: min(460px, calc(100vw - 16px)); max-height: min(620px, calc(100vh - 16px)); overflow: auto; padding: 14px; border: 1px solid var(--tf-line-strong); border-radius: 8px; background: var(--tf-panel); color: var(--tf-text); box-shadow: 0 12px 38px rgba(0,0,0,.5); font-size: 12px; line-height: 1.5; }
.market-hover-card[hidden] { display: none; }
.market-hover-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.market-hover-card header small { color: var(--tf-blue); font-size: 11px; }
.market-hover-card h2 { margin: 3px 0 10px; font-size: 15px; overflow-wrap: anywhere; }
.market-hover-card header button { flex: 0 0 28px; border: 0; border-radius: 4px; background: var(--tf-chip); color: var(--tf-soft); font-size: 20px; cursor: pointer; }
.market-hover-card h3 { margin: 14px 0 4px; padding-top: 10px; border-top: 1px solid var(--tf-line); font-size: 13px; }
.market-card-identity { display: grid; gap: 5px; margin: 0; }
.market-card-identity > div { display: flex; justify-content: space-between; gap: 12px; }
.market-card-identity dt { color: var(--tf-muted); flex-shrink: 0; }
.market-card-identity dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.card-note { margin: 5px 0 8px; color: var(--tf-muted); font-size: 11px; }
.related-exchange { display: grid; grid-template-columns: 82px minmax(0,1fr); gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--tf-line); }
.related-exchange h4 { margin: 0; color: var(--tf-soft); font-size: 12px; }
.related-exchange ul { display: grid; gap: 5px; list-style: none; padding: 0; margin: 0; }
.related-exchange li { display: flex; flex-wrap: wrap; gap: 3px 8px; align-items: baseline; }
.related-exchange li > span:first-child { color: var(--tf-muted); font-size: 11px; }
.related-exchange a { color: var(--tf-blue); text-decoration: none; overflow-wrap: anywhere; }
.related-exchange a:hover { text-decoration: underline; }
.related-exchange small { color: var(--tf-amber); font-size: 10px; }

/* Overview: one size larger, including the previously tiny exchange summaries. */
#overviewView .scope-line h2 { font-size: 17px; }
#overviewView .scope-line span, #overviewView .scope-line small { font-size: 12px; }
#overviewView .overview-kpis span { font-size: 12px; }
#overviewView .overview-kpis small { font-size: 11px; }
#overviewView .overview-kpis b { font-size: 19px; }
#overviewView .overview-kpis article { min-height: 88px; height: auto; }
#overviewView .exchange-panel-head button { font-size: 14px; }
#overviewView .exchange-panel-stat span { font-size: 11px; }
#overviewView .exchange-panel-stat b { font-size: 13px; }
#overviewView .product-breakdown td { font-size: 12px; height: 34px; }
#overviewView .product-breakdown th { font-size: 11px; height: 30px; }
#overviewView .overview-search-form label > span { font-size: 11px; }
#overviewView .overview-search-form input, #overviewView .overview-search-form button { font-size: 12px; height: 34px; }
#overviewView .overview-search-table td { font-size: 12px; height: 34px; }
#overviewView .overview-search-table th { font-size: 11px; height: 30px; }
#overviewView .overview-search-empty, #overviewView .overview-note { font-size: 11px; }
#overviewView .overview-note { flex-wrap: wrap; line-height: 1.5; }
#overviewView .overview-note p { white-space: normal; }