/*
 * Narwhal product UI rebuild — dense, calm, and decision-oriented.
 * Legacy component hooks remain as data/behavior contracts; this file owns
 * the visible system for the public product pages.
 */
:root,
body.app-shell {
  --bg: #0b1424;
  --surface: #111d30;
  --surface-hover: #17243a;
  --surface-subtle: #0e192b;
  --surface-elevated: #152238;
  --bg-input: #0d192b;
  --header-bg: rgba(11, 20, 36, .96);
  --text-primary: #e8eef7;
  --text-secondary: #c2ccda;
  --text-muted: #91a0b5;
  --text-dim: #75859c;
  --text: #c2ccda;
  --text-bright: #e8eef7;
  --border: #26364e;
  --border-strong: #38506f;
  --border-subtle: #1d2b40;
  --primary: #35bd83;
  --primary-hover: #2eaa75;
  --primary-active: #248b61;
  --primary-subtle: rgba(53, 189, 131, .12);
  --primary-border: rgba(53, 189, 131, .35);
  --home-action-text: #061a17;
  --success: #35bd83;
  --success-bg: rgba(53, 189, 131, .13);
  --success-border: rgba(53, 189, 131, .28);
  --warning: #e7ad3c;
  --danger: #e35d68;
  --info: #67a9ed;
  --cyan: #67a9ed;
  --accent-primary: #67a9ed;
  --font-sans: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font: var(--font-sans);
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.18);
  --shadow-md: 0 8px 24px rgba(0,0,0,.24);
  --header-height: 62px;
  color-scheme: dark;
}

[data-theme="light"] body.app-shell,
body.app-shell[data-theme="light"] {
  --bg: #f2f5f9;
  --surface: #fff;
  --surface-hover: #f6f9fc;
  --surface-subtle: #f7f9fc;
  --surface-elevated: #fff;
  --bg-input: #fff;
  --header-bg: rgba(255,255,255,.96);
  --text-primary: #172235;
  --text-secondary: #33445c;
  --text-muted: #64748b;
  --text-dim: #7b8798;
  --text: #33445c;
  --text-bright: #172235;
  --border: #d9e1eb;
  --border-strong: #b8c5d5;
  --border-subtle: #e7ecf2;
  --primary: #15845a;
  --primary-hover: #0f724d;
  --success: #15845a;
  --success-bg: #e8f6ef;
  --home-action-text: #fff;
  --warning: #9a6200;
  --danger: #c43e4b;
  --info: #2569ae;
  --cyan: #2569ae;
  color-scheme: light;
}

body.app-shell {
  min-height: 100vh;
  background: var(--bg) !important;
  color: var(--text-secondary);
  font: 14px/1.5 var(--font-sans);
  letter-spacing: 0;
}

body.app-shell::before,
body.app-shell::after,
body.app-shell .ambient-mesh-canvas,
body.app-shell .ambient-mesh-backdrop,
body.app-shell .crt-overlay,
body.app-shell .scanlines { display: none !important; }

body.app-shell :where(*, *::before, *::after) { box-sizing: border-box; }
body.app-shell :where(h1,h2,h3,h4,p) { text-wrap: pretty; }
body.app-shell :where(h1,h2,h3) { color: var(--text-primary); letter-spacing: -.025em; }
body.app-shell :where(a) { color: var(--info); text-decoration: none; }
body.app-shell :where(a:hover) { color: var(--text-primary); }
body.app-shell :where(button,input,select,textarea) { font: inherit; }
body.app-shell :where(button:not(:disabled),select,summary) { cursor: pointer; }
body.app-shell :where(button,a,input,select,textarea,summary,[tabindex]):focus-visible {
  outline: 2px solid var(--info); outline-offset: 2px; box-shadow: 0 0 0 3px rgba(103,169,237,.18);
}

.skip-link { z-index: 3000; }
.page-progress-bar { height: 2px; background: var(--primary); }
.header.app-header {
  position: sticky; inset: 0 0 auto; z-index: 1000; min-height: var(--header-height);
  padding: 0; background: var(--header-bg); border-bottom: 1px solid var(--border);
  box-shadow: 0 3px 14px rgba(0,0,0,.12); backdrop-filter: blur(12px);
}
.app-header__inner {
  width: min(100%, 1840px); min-height: var(--header-height); padding: 0 24px; margin: 0 auto;
  display: grid; grid-template-columns: 190px minmax(0,1fr); align-items: center; gap: 22px;
}
.app-brand { display: inline-flex; gap: 10px; align-items: center; min-width: 0; color: var(--text-primary); }
.app-brand:hover { color: var(--text-primary); transform: none; }
.app-brand__mark {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--primary);
  font-size: 16px; font-weight: 800; letter-spacing: -.08em;
}
.app-brand__text { display: grid; gap: 1px; line-height: 1.15; }
.app-brand__text strong { color: var(--text-primary); font-size: 14px; font-weight: 700; }
.app-brand__text small { color: var(--text-muted); font-size: 10px; }
.app-header__panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-width: 0; }
.app-primary-nav { display: flex; align-items: center; gap: 4px; min-width: max-content; }
.app-primary-nav .nav-link {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 11px; border: 0;
  border-radius: 6px; color: var(--text-muted); font-size: 12px; font-weight: 600; white-space: nowrap;
}
.app-primary-nav .nav-link:hover { color: var(--text-primary); background: var(--surface); }
.app-primary-nav .nav-link.active { color: var(--text-primary); background: var(--surface); box-shadow: inset 0 -2px var(--primary); }
.app-header__tools { display: flex; align-items: center; justify-content: flex-end; gap: 7px; min-width: 0; }
.app-global-search { width: clamp(190px, 24vw, 330px); flex: 0 1 330px; }
.app-global-search .search-input {
  height: 36px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-subtle);
  box-shadow: none; padding-right: 54px; color: var(--text-primary); font-size: 12px;
}
.app-global-search .search-input:focus { border-color: var(--info); box-shadow: 0 0 0 2px rgba(103,169,237,.15); background: var(--surface); }
.app-global-search .search-kbd-hint { right: 8px; }
.app-global-search kbd { border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text-muted); font-size: 9px; padding: 2px 4px; }
.app-tool-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; padding: 0 9px;
  border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text-secondary);
  font-size: 11px; white-space: nowrap;
}
.app-tool-button:hover { border-color: var(--border-strong); background: var(--surface); color: var(--text-primary); }
.app-tool-button .instock-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: none; }
.app-tool-button.is-active,.app-tool-button.active { border-color: var(--primary-border); background: var(--success-bg); color: var(--success); }
.app-tool-button .theme-icon { font-size: 15px; }
.app-tool-button .nav-count { margin-left: 0; }
.mobile-menu-toggle { display: none; }

.app-main.container {
  width: min(100%, 1840px); max-width: none; min-height: calc(100vh - var(--header-height) - 160px);
  margin: 0 auto; padding: 22px 24px 48px; z-index: 1;
}
.app-main > :first-child { margin-top: 0 !important; }
.footer.app-footer { border-top: 1px solid var(--border); background: var(--surface-subtle); }
.app-footer .footer-container { width: min(100%, 1840px); max-width: none; padding: 18px 24px; }
.app-footer .footer-top { align-items: center; padding-bottom: 12px; }
.app-footer .footer-brand { gap: 2px; }
.app-footer .footer-logo { font-size: 12px; }
.app-footer .footer-desc,.app-footer .footer-bottom { font-size: 10px; }
.app-footer .footer-links { gap: 10px; }
.app-footer .footer-link { font-size: 10px; }
.mobile-bottom-nav { display: none; }

/* Shared typography, controls and flat panels */
.section-header { gap: 12px; margin: 0 0 14px !important; padding: 0 0 10px; border-bottom: 1px solid var(--border-subtle); }
.section-title { margin: 0; font-size: 21px !important; font-weight: 700; line-height: 1.25; }
.section-sub { margin-top: 3px; color: var(--text-muted); font-size: 11px; }
.prompt,.cmd-user,.cmd-path,.term-dots,.term-action-badge,.market-eyebrow,.home-eyebrow,.rankings-page-kicker { display: none !important; }
.card,.term-window,.filter-bar,.ranking-tabs-unified,.system-health-panel,.status-run-summary,
.watch-machine-panel,.offer-system-card,.machine-sla-card,.market-activity__panel {
  border: 1px solid var(--border) !important; border-radius: 9px !important; background: var(--surface) !important;
  box-shadow: none !important; color: var(--text-secondary);
}
.card,.term-window { margin-bottom: 12px; }
.app-main .card { padding: 12px !important; }
.term-body { padding: 12px !important; }
.term-window { margin-bottom: 12px !important; }
.card:hover,.term-window:hover,.market-card:hover,.stat-card:hover,.offer-system-card:hover { transform: none !important; box-shadow: none !important; }
.term-window { overflow: hidden; }
.term-header { display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-subtle); }
.term-title { color: var(--text-primary); font: 650 11px/1.3 var(--font-sans); }
.statistics-page .term-body > h3 { display: none !important; }
.methodology-body .term-header { display: none !important; }
.term-body { background: transparent !important; color: inherit; }
.stat-card { border: 1px solid var(--border) !important; border-radius: 8px !important; background: var(--surface) !important; box-shadow: none !important; }
.stat-card:hover { border-color: var(--border-strong) !important; }
.stat-label,.stat-sub { color: var(--text-muted) !important; }
.stat-value { color: var(--text-primary); font-size: 22px; }
.badge,.sla-badge,.tag-pill,.refund-pill,.heat-pill,.sellout-pill,.exist-pill,.network-sla-badge {
  border-radius: 5px !important; box-shadow: none !important; font-family: var(--font-sans) !important; font-size: 10px !important;
}
.btn,.market-card-action,.market-apply-button,.market-reset-link {
  min-height: 32px; border-radius: 6px !important; box-shadow: none !important; font-size: 11px !important;
  font-weight: 600; letter-spacing: 0; text-transform: none;
}
.btn-primary,.market-card-action--primary,.market-apply-button { background: #299f70 !important; border-color: #299f70 !important; color: #fff !important; }
.btn-primary:hover,.market-card-action--primary:hover,.market-apply-button:hover { background: #21875f !important; }
.btn-secondary,.btn-ghost,.market-card-action--secondary,.market-reset-link { background: var(--surface-subtle) !important; border: 1px solid var(--border) !important; color: var(--text-secondary) !important; }
.btn-secondary:hover,.btn-ghost:hover,.market-card-action--secondary:hover,.market-reset-link:hover { background: var(--surface-hover) !important; border-color: var(--border-strong) !important; }
input,select,textarea,.filter-input,.filter-select { border-radius: 6px !important; border-color: var(--border) !important; background: var(--surface-subtle) !important; color: var(--text-primary) !important; box-shadow: none !important; }
input::placeholder,textarea::placeholder { color: var(--text-dim) !important; }
table.data-table { border-collapse: separate; border-spacing: 0; font-size: 12px; }
table.data-table th { background: var(--surface-subtle); color: var(--text-muted); font-size: 10px; font-weight: 600; text-transform: none; }
table.data-table td { border-color: var(--border-subtle); color: var(--text-secondary); }
table.data-table tbody tr:hover { background: var(--surface-hover); }
.empty-state,.market-message,.rankings-explorer-empty { border: 1px dashed var(--border-strong); border-radius: 8px; background: var(--surface-subtle); }

/* Plan explorer — the reference interaction model: filters, dense rows, inspector. */
body.page-rankings .app-main { padding-top: 17px; }
body.page-rankings:has(.rankings-page-heading[data-rankings-mode="explorer"]) .app-global-search { display: none; }
.rankings-page-heading { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin-bottom: 13px !important; padding-bottom: 12px; }
.rankings-page-heading .section-title { font-size: 22px !important; }
.rankings-page-heading .section-sub { display: block; }
.rankings-page-tools { display: flex; align-items: center; gap: 12px; }
.rankings-page-meta { color: var(--text-muted); font-size: 10px; white-space: nowrap; }
.rankings-top-search { width: clamp(220px, 26vw, 340px); }
.rankings-top-search input { height: 34px; background: var(--surface-subtle); }
.rankings-explorer-layout {
  display: grid; grid-template-columns: 246px minmax(0,1fr) 304px; grid-template-rows: auto 1fr;
  align-items: start; gap: 12px; width: 100%;
}
.rankings-explorer-layout > * { min-width: 0; }
.rankings-filter-rail { grid-column: 1; grid-row: 1 / span 3; position: sticky; top: calc(var(--header-height) + 12px); max-height: calc(100vh - var(--header-height) - 24px); overflow: auto; scrollbar-width: thin; }
.rankings-filter-rail::before,.market-filters::before { display: block; margin-bottom: 9px; color: var(--text-primary); font-size: 12px; font-weight: 700; }
.rankings-filter-rail::before { content: "筛选与榜单"; padding: 1px 2px; }
.rankings-filter-rail .rankings-sticky-controls { position: static; display: flex; flex-direction: column; gap: 10px; padding: 0; background: transparent; border: 0; box-shadow: none; }
.rankings-filter-bar { display: block; margin: 0; padding: 14px; border-radius: 9px; background: var(--surface); }
.rankings-filter-bar .advanced-filter-fields { display: grid; grid-template-columns: minmax(0,1fr); gap: 11px; }
.rankings-filter-bar .filter-label { margin-bottom: 4px; color: var(--text-muted); font-size: 10px; font-weight: 600; }
.rankings-filter-bar .filter-select { width: 100%; min-height: 34px; padding: 0 9px; font-size: 11px; }
.rankings-filter-bar .filter-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 1px; }
.rankings-filter-bar .mobile-filter-toggle { display: none; }
.ranking-tabs-unified { padding: 12px !important; }
.ranking-primary-tabs { display: grid !important; grid-template-columns: 1fr 1fr; gap: 4px; padding: 0 !important; border: 0 !important; background: transparent !important; }
.rank-primary-tab { justify-content: flex-start; min-height: 32px; padding: 5px 8px !important; border: 0 !important; border-radius: 5px !important; background: transparent !important; color: var(--text-muted) !important; font-size: 10px !important; }
.rank-primary-tab.active { background: var(--surface-hover) !important; color: var(--text-primary) !important; box-shadow: inset 2px 0 var(--primary); }
.ranking-sub-tabs-scroller { padding: 9px 0 0 !important; border-top: 1px solid var(--border-subtle); }
.ranking-sub-tabs { display: grid !important; gap: 3px; }
.sub-tab-btn { justify-content: flex-start; min-height: 30px; padding: 4px 8px !important; border: 0 !important; border-radius: 5px !important; background: transparent !important; color: var(--text-muted) !important; font-size: 10px !important; }
.sub-tab-btn.active { background: var(--surface-subtle) !important; color: var(--info) !important; }
.rankings-explorer-layout > .qualification-box { grid-column: 2; grid-row: 1; margin: 0; padding: 10px 12px !important; border-radius: 8px; }
.rankings-explorer-results { grid-column: 2; margin: 0 !important; align-self: start; }
.rankings-results-shell { border: 1px solid var(--border) !important; border-radius: 9px !important; background: var(--surface) !important; }
.rankings-results-shell > .term-body { padding: 0 !important; }
.rankings-results-header { padding: 11px 14px; border-bottom: 1px solid var(--border); }
.rankings-results-header strong { color: var(--text-primary); font-size: 12px; }
.rankings-results-header span { color: var(--text-muted); font-size: 10px; }
.rankings-view-toolbar,.rankings-selection-bar { min-height: 38px; margin: 0; padding: 5px 10px; border: 0; border-bottom: 1px solid var(--border-subtle); border-radius: 0; background: var(--surface-subtle); }
.rankings-view-toolbar { display: none !important; }
.rankings-view-toolbar__actions { gap: 5px; }
.rankings-view-toolbar .btn,.rankings-selection-bar .btn { min-height: 27px; padding: 3px 8px; font-size: 10px !important; }
.rankings-explorer-table__header { display: grid; grid-template-columns: 28px minmax(170px,1.8fr) 82px 72px 78px 86px; gap: 8px; align-items: center; padding: 9px 11px; border-bottom: 1px solid var(--border); background: var(--surface-subtle); color: var(--text-muted); font-size: 10px; }
.rankings-explorer-list { overflow: hidden; border: 0 !important; border-radius: 0; background: transparent; }
.rankings-explorer-results .machine-plan-row {
  display: grid; grid-template-columns: 28px minmax(170px,1.8fr) 82px 72px 78px 86px; gap: 8px; align-items: center;
  min-height: 67px; padding: 8px 11px; border: 0; border-bottom: 1px solid var(--border-subtle); border-radius: 0;
  background: transparent; box-shadow: none;
}
.rankings-explorer-results .machine-plan-row:hover { background: var(--surface-hover); }
.rankings-explorer-results .machine-plan-row.is-inspected { background: rgba(103,169,237,.09); box-shadow: inset 2px 0 var(--info); }
.machine-plan-row__select input { width: 15px; height: 15px; accent-color: var(--primary); }
.rankings-explorer-results .machine-plan-row__main { min-width: 0; }
.rankings-explorer-results .machine-plan-row__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); font-size: 12px; font-weight: 650; white-space: nowrap; }
.rankings-explorer-results .machine-plan-row__location { margin-top: 1px; font-size: 9px; }
.rankings-explorer-results .machine-plan-row__specs { display: flex; flex-wrap: wrap; gap: 1px 7px; margin-top: 3px; color: var(--text-muted); font-size: 9px; }
.rankings-explorer-results .machine-plan-row__stock { justify-self: start; padding: 4px 6px; border-radius: 5px; font-size: 9px; white-space: nowrap; }
.rankings-explorer-results .machine-plan-row__price { display: flex; align-items: baseline; gap: 2px; white-space: nowrap; }
.rankings-explorer-results .machine-plan-row__price strong { color: var(--text-primary); font-size: 13px; font-variant-numeric: tabular-nums; }
.rankings-explorer-results .machine-plan-row__price span,.machine-plan-row__updated { color: var(--text-muted); font-size: 9px; }
.rankings-explorer-results .machine-plan-row__sla { justify-self: start; padding: 4px 6px; border: 1px solid var(--success-border); border-radius: 5px; background: var(--success-bg); color: var(--success); font-size: 9px; white-space: nowrap; }
.rankings-explorer-results .machine-plan-row__updated { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rankings-explorer-results .machine-plan-row__updated small { display: none; }
.rankings-explorer-results .machine-plan-row__actions,.rankings-explorer-results .offer-activity-timeline { display: none !important; }
.rankings-plan-inspector {
  grid-column: 3; grid-row: 1 / span 3; position: sticky; top: calc(var(--header-height) + 12px); align-self: start;
  max-height: calc(100vh - var(--header-height) - 24px); overflow: auto; padding: 0 14px 14px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface); box-shadow: none;
}
.rankings-plan-inspector__header { position: sticky; top: 0; z-index: 1; margin: 0 -14px 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--surface); }
.rankings-plan-inspector__eyebrow { display: none; }
.rankings-plan-inspector__header h2 { margin: 0; font-size: 13px; }
.rankings-plan-inspector__close { padding: 4px 7px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface-subtle); color: var(--text-muted); font-size: 10px; }
.rankings-plan-inspector__empty { min-height: 120px; align-content: center; text-align: center; }
.rankings-plan-inspector__empty strong { display: block; color: var(--text-primary); font-size: 12px; }
.rankings-plan-inspector__empty span { display: block; max-width: 220px; margin: 5px auto; color: var(--text-muted); font-size: 10px; }
.rankings-plan-inspector__identity { display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; align-items: center; }
.rankings-plan-inspector__context,.rankings-plan-inspector__updated { grid-column: 1 / -1; color: var(--text-muted); font-size: 10px; }
.rankings-plan-inspector__identity h3 { grid-column: 1 / -1; margin: 2px 0 0; color: var(--text-primary); font-size: 15px; }
.rankings-plan-inspector__stock { grid-column: 2; grid-row: 3; }
.rankings-plan-inspector__price { margin: 12px 0; padding: 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-subtle); }
.rankings-plan-inspector__price strong { color: var(--text-primary); font-size: 28px; line-height: 1; }
.rankings-plan-inspector__price span { color: var(--text-muted); font-size: 11px; }
.rankings-plan-inspector__primary-actions { display: grid; gap: 7px; }
.rankings-plan-inspector__primary-actions .btn { width: 100%; justify-content: center; }
.rankings-plan-inspector__quick-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin: 8px 0 14px; }
.rankings-plan-inspector__quick-actions .btn { min-width: 0; padding-inline: 4px; font-size: 9px !important; }
.rankings-plan-inspector__section { padding: 11px 0; border-top: 1px solid var(--border-subtle); }
.rankings-plan-inspector__section h3 { margin: 0 0 7px; font-size: 11px; }
.rankings-plan-inspector__section dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; }
.rankings-plan-inspector__section dl div { display: flex; justify-content: space-between; gap: 6px; padding: 5px 0; border-bottom: 1px solid var(--border-subtle); font-size: 10px; }
.rankings-plan-inspector__section dt { color: var(--text-muted); }
.rankings-plan-inspector__section dd { margin: 0; color: var(--text-primary); font-weight: 600; }
.rankings-plan-inspector__network > div { display: flex; justify-content: space-between; padding: 4px 0; color: var(--text-muted); font-size: 10px; }
.rankings-plan-inspector__network strong { color: var(--text-primary); }
.ranking-method-note { color: var(--text-muted) !important; }

/* Overview and market pages: condensed summaries and scannable listing units. */
.home-intro { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.home-intro__copy h1 { margin: 0; font-size: 20px; }
.home-intro__summary { margin: 4px 0 2px; color: var(--text-muted); font-size: 11px; }
.home-intro__meta { margin: 0; color: var(--text-dim); font-size: 10px; }
.home-intro__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.pulse-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-subtle); font-size: 10px; }
.pulse-title { color: var(--text-primary); font-weight: 650; white-space: nowrap; }
.pulse-items { display: flex; flex: 1; flex-wrap: wrap; gap: 6px 15px; color: var(--text-muted); }
.pulse-sync-time { color: var(--text-dim); font-size: 9px; white-space: nowrap; }
.stats-overview-block { margin-bottom: 14px; padding: 0; border: 0; background: transparent; }
.stats-grid--primary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.stats-grid--primary .stat-card { min-height: 90px; padding: 12px 14px; }
.stats-strip-secondary { display: flex; flex-wrap: wrap; gap: 8px 15px; margin-top: 7px; padding: 8px 10px; border: 1px solid var(--border-subtle); border-radius: 7px; background: var(--surface-subtle); }
.home-quick-filter-chips { gap: 6px; margin: 8px 0 12px; }
.quick-filter-chip { min-height: 30px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--text-secondary); font-size: 11px; }
.market-activity { border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.market-activity__tabs { min-height: 40px; padding: 4px 8px; border-bottom: 1px solid var(--border); }
.market-activity__tab { min-height: 32px; padding: 5px 10px; font-size: 10px; }
.market-activity__panels { padding: 8px; }
.market-activity__panel { padding: 10px !important; }
.market-activity__panel > h3 { margin: 0 0 8px !important; font-size: 12px !important; }
.market-page { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 12px; align-items: start; }
.market-page > :is(.market-hero,.market-quick-filter-chips,.market-health-warning,.market-results-heading,.market-message,.market-card-grid,.market-pagination,.market-disclaimer) { grid-column: 2; }
.market-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; margin: 0 0 1px; padding: 0 0 9px; border-bottom: 1px solid var(--border-subtle); }
.market-hero__copy h1 { margin: 0; font-size: 21px; }
.market-hero__copy p { margin: 3px 0 0; color: var(--text-muted); font-size: 11px; }
.market-hero__summary { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.market-hero__summary > div { display: flex; align-items: baseline; gap: 6px; }
.market-hero__summary strong { color: var(--text-primary); font-size: 18px; }
.market-hero__summary span,.market-official-link { color: var(--text-muted); font-size: 11px; }
.market-quick-filter-chips { display: none; }
.market-filters { grid-column: 1; grid-row: 1 / span 6; position: sticky; top: calc(var(--header-height) + 12px); display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; padding: 13px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.market-filters::before { content: "筛选条件"; grid-column: 1; margin: 0 0 1px; }
.market-filter label { display: block; margin-bottom: 4px; color: var(--text-muted); font-size: 11px; }
.market-filter input,.market-filter select { width: 100%; min-height: 34px; padding: 0 8px; font-size: 11px; }
.market-filter-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.market-results-heading { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 0; color: var(--text-muted); font-size: 11px; }
.market-card-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 7px; }
.market-card {
  display: grid; grid-template-columns: minmax(155px,.75fr) minmax(300px,1.7fr) minmax(190px,.8fr);
  grid-template-areas: "head commerce footer" "title commerce footer" "operations operations footer" "risk risk footer";
  align-items: start; gap: 5px 14px; padding: 11px 13px; border: 1px solid var(--border) !important;
  border-radius: 8px !important; background: var(--surface) !important; box-shadow: none !important;
}
.market-card__header { grid-area: head; align-items: center; gap: 5px; }
.market-card__badges { gap: 5px; }
.market-listing-age { color: var(--text-dim); font-size: 10px; }
.market-card__title { grid-area: title; padding: 0; }
.market-card__title h2 { margin: 0; font-size: 13px !important; line-height: 1.35; }
.market-card__title p { margin: 2px 0 0; color: var(--text-muted); font-size: 10px; }
.market-card__commerce { grid-area: commerce; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(165px,.9fr); gap: 12px; padding: 0; }
.market-pricing { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: center; gap: 7px 10px; }
.market-pricing > div { min-width: 0; }
.market-pricing > div:first-child strong { font-size: 16px; }
.market-pricing span,.market-pricing em { color: var(--text-muted); font-size: 10px; }
.market-premium { grid-column: 1 / -1; display: grid; grid-template-columns: auto auto minmax(0,1fr); align-items: center; gap: 3px 6px; min-width: 0; padding-top: 6px; border-top: 1px solid var(--border-subtle); }
.market-premium strong { display: block; width: fit-content; max-width: 100%; padding: 3px 5px; overflow: hidden; border-radius: 4px; text-overflow: ellipsis; white-space: nowrap; font-size: 10px !important; }
.market-premium em,.market-premium small { display: block; overflow: hidden; color: var(--text-muted); font-size: 9px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.market-specs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 3px 8px; margin: 0; padding: 0 0 0 10px; border-left: 1px solid var(--border-subtle); }
.market-specs div { display: flex; justify-content: space-between; gap: 4px; font-size: 10px; }
.market-specs dt { color: var(--text-muted); }
.market-specs dd { margin: 0; color: var(--text-primary); font-weight: 600; }
.market-card__operations { grid-area: operations; display: flex; align-items: center; gap: 12px; margin: 2px 0 0; }
.market-traffic { flex: 1; min-width: 120px; }
.market-traffic__heading { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; }
.market-traffic__heading span,.market-traffic small { color: var(--text-muted); }
.market-traffic__track { height: 4px; margin: 4px 0 2px; }
.market-lifecycle { display: flex; gap: 12px; margin: 0; }
.market-lifecycle dt,.market-lifecycle small { color: var(--text-muted); font-size: 9px; }
.market-lifecycle dd { margin: 0; color: var(--text-primary); font-size: 10px; }
.market-risk-list { grid-area: risk; display: flex; flex-wrap: wrap; gap: 4px; }
.market-risk-list span { padding: 2px 5px; border-radius: 4px; background: rgba(227,93,104,.1); color: var(--danger); font-size: 9px; }
.market-card__footer { grid-area: footer; display: flex; flex-direction: column; justify-content: flex-start; gap: 9px; min-height: 0; padding: 0 0 0 12px; border-top: 0; border-left: 1px solid var(--border-subtle); }
.market-trust-row { display: flex; flex-wrap: wrap; gap: 4px; }
.market-card__footer .market-trust-row { flex: 0 1 auto; min-width: 0; }
.market-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.market-card__actions .market-card-action { justify-content: center; min-height: 30px; padding: 4px 6px; font-size: 10px !important; }
.market-card__actions .market-card-action--primary { grid-column: 1 / -1; }
.market-pagination { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); font-size: 10px; }
.market-disclaimer { color: var(--text-muted); font-size: 10px; }

/* Details, watchlist and observability: compact headers, consistent data grids. */
.machine-detail-header,.offer-detail-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 15px 16px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.machine-detail-header h1,.offer-detail-hero h1 { margin: 0; font-size: 21px; }
.machine-detail-header p { margin: 4px 0 0; color: var(--text-muted); font-size: 11px; }
.machine-detail-header__actions { display: flex; align-items: center; gap: 8px; }
.share-actions { gap: 5px; }
.machine-sla-card { margin: 10px 0; overflow: hidden; }
.machine-sla-card__header { padding: 12px 14px; }
.machine-sla-card__network-summary { min-width: 205px; padding: 8px 10px; border-radius: 7px; background: var(--surface-subtle); }
.machine-sla-compact-strip { padding: 8px 12px; border-top: 1px solid var(--border-subtle); background: var(--surface-subtle); }
.machine-sla-compact-items { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.machine-sla-compact-item { font-size: 10px; }
.machine-sla-extended { padding: 12px; }
.machine-sla-metrics { gap: 7px; }
.machine-sla-metric { padding: 9px; border-radius: 6px; background: var(--surface-subtle); }
.machine-plan-list { padding: 0; }
.machine-plan-list__heading { padding: 10px 13px; }
.machine-plan-row { border-bottom-color: var(--border-subtle) !important; }
.machine-plan-row__actions { gap: 4px; }
.machine-plan-action { min-height: 27px; padding: 3px 7px; font-size: 9px; }
.machine-plan-list .offer-activity-timeline { display: none; }
.machine-detail-market { margin-top: 10px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.app-main .offer-detail-card { padding: 0 !important; overflow: hidden; }
.offer-detail-hero { border: 0; border-radius: 0; }
.offer-detail-hero__eyebrow { gap: 5px; }
.offer-detail-hero__plan { margin: 4px 0; color: var(--text-muted); font-size: 11px; }
.offer-detail-price strong { font-size: 30px; }
.offer-detail-actions { gap: 5px; }
.offer-config-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 0; margin: 0; padding: 0 15px 12px; }
.offer-config-grid > div { padding: 8px 10px; border-top: 1px solid var(--border-subtle); border-right: 1px solid var(--border-subtle); }
.offer-config-grid > div:last-child { border-right: 0; }
.offer-config-grid dt { color: var(--text-muted); font-size: 9px; }
.offer-config-grid dd { margin: 2px 0 0; color: var(--text-primary); font-size: 12px; font-weight: 650; }
.offer-technical-details { margin: 0 15px 12px; color: var(--text-muted); font-size: 10px; }
.offer-detail-page .card { padding: 13px !important; }
.offer-detail-page .grid-2col { gap: 10px; }
.watchlist-page__header { align-items: center; }
.watchlist-page__header .section-title { font-size: 19px !important; }
.watchlist-empty { min-height: 0; padding: 28px 16px !important; }
.watchlist-empty .empty-state-desc { margin-bottom: 10px; }
.watchlist-empty__hint { margin: 2px 0 0; font-size: 11px; }
.watchlist-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; margin: 10px 0; }
.watchlist-summary__item { padding: 9px 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); }
.watchlist-summary__item span { color: var(--text-muted); font-size: 9px; }
.watchlist-summary__item strong { display: block; color: var(--text-primary); font-size: 18px; }
.watch-machine-list { display: grid; gap: 8px; }
.watch-machine-panel { padding: 0 !important; overflow: hidden; }
.watch-machine-panel__header { min-height: 44px; padding: 9px 12px; border-bottom: 1px solid var(--border-subtle); }
.watch-machine-panel__plans { display: grid; gap: 0; }
.watch-plan-row {
  display: grid; grid-template-columns: minmax(170px,1.1fr) minmax(105px,.7fr) minmax(170px,1fr) minmax(240px,1.5fr);
  grid-template-areas: "main changes timeline footer"; gap: 10px; align-items: center; padding: 9px 12px;
  border-bottom: 1px solid var(--border-subtle); background: transparent;
}
.watch-plan-row:last-child { border-bottom: 0; }
.watch-plan-row:hover { background: var(--surface-hover); }
.watch-plan-row__main { grid-area: main; display: grid; gap: 5px; min-width: 0; }
.watch-plan-row__name { overflow: hidden; color: var(--text-primary); font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.watch-plan-row__state { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.watch-plan-row__state strong { color: var(--text-primary); font-size: 14px; font-variant-numeric: tabular-nums; }
.watch-plan-row__state strong small { margin-left: 2px; color: var(--text-muted); font-size: 9px; }
.watch-plan-row__changes { grid-area: changes; color: var(--text-muted); font-size: 9px; }
.watch-plan-row__timeline { grid-area: timeline; min-width: 0; }
.watch-plan-row__timeline-label { display: flex; justify-content: space-between; gap: 4px; margin-bottom: 4px; color: var(--text-muted); font-size: 8px; }
.watch-plan-row__timeline-label strong { color: var(--text-secondary); font-weight: 600; }
.watch-plan-row__footer { grid-area: footer; display: grid; gap: 5px; color: var(--text-muted); font-size: 8px; }
.watch-plan-row__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.watch-plan-row__actions .btn { min-height: 26px; padding: 3px 7px; font-size: 9px !important; }
.watch-activity-grid { display: grid; grid-template-columns: repeat(30,minmax(2px,1fr)); gap: 2px; }
.watch-activity-day { min-width: 2px; height: 8px; padding: 0; border-radius: 2px; font-size: 0; }
.watch-detail-page .section-header { align-items: center; }
.watch-detail-page .stats-grid { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 7px; }
.watch-detail-page .stats-grid .stat-card { min-height: 78px; padding: 10px !important; }
.watch-detail-page .stat-value { font-size: 18px; }
.watch-detail-page .grid-2col { gap: 9px; }
.watch-detail-page .card { margin: 0; }
.watch-activity-legend { padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); font-size: 9px; }
.statistics-page .stats-key-overview-bar { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 0; margin: 0 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.stats-key-item { padding: 10px 12px; border-right: 1px solid var(--border-subtle); }
.stats-key-item:last-child { border: 0; }
.stats-key-item small,.stats-key-item span { color: var(--text-muted); font-size: 9px; }
.stats-key-item strong { display: block; margin: 1px 0; color: var(--text-primary); font-size: 17px; }
.statistics-page .grid-2col { gap: 10px; }
.statistics-page .card,.statistics-page .term-window { margin: 0; }
.statistics-page .term-body { padding: 12px !important; }
.statistics-page .btn-range,.chart-range-buttons .btn { min-height: 28px; padding: 4px 8px !important; border-radius: 5px !important; font-size: 9px !important; }
.analysis-page-container { width: 100%; max-width: none !important; margin: 0 auto 24px !important; }
.analysis-page-container .section-header { padding-bottom: 10px; }
.analysis-page-container .section-title { font-size: 20px !important; }
.analysis-page-container .term-window { margin-bottom: 10px !important; }
.analysis-page-container .term-body { padding: 12px !important; }
.analysis-page-container #initialGuideState { padding: 24px 16px !important; }
.analysis-page-container #initialGuideState > div:first-child { margin-bottom: 8px !important; font-size: 30px !important; }
.analysis-page-container #initialGuideState p { margin-bottom: 12px !important; }
.analysis-page-container .stat-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 8px !important; }
.analysis-page-container .stat-grid .stat-card { min-height: 94px; padding: 11px !important; }
.analysis-page-container .rankings-comparison-grid,.analysis-page-container .charts-grid { gap: 9px !important; }
.methodology-container { width: 100%; max-width: none !important; margin-bottom: 24px !important; }
.methodology-grid { grid-template-columns: 205px minmax(0,1fr) !important; gap: 12px !important; }
.methodology-toc { position: sticky; top: calc(var(--header-height) + 10px); padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.methodology-toc nav { gap: 2px !important; }
.toc-link { padding: 6px 7px; border-radius: 5px; color: var(--text-muted); font-size: 10px; }
.toc-link:hover,.toc-link.active { background: var(--surface-hover); color: var(--text-primary); }
.methodology-body { max-width: none !important; }
.methodology-body .term-window { margin-bottom: 9px !important; }
.methodology-body .term-body { padding: 14px !important; }
.methodology-body h2 { margin: 0 0 8px !important; font-size: 15px !important; }
.methodology-body p,.methodology-body li { font-size: 12px !important; line-height: 1.65 !important; }
.methodology-body pre { overflow: auto; padding: 10px; border: 1px solid var(--border-subtle); border-radius: 6px; background: var(--surface-subtle); font-size: 11px !important; }
.status-page .section-header { margin-bottom: 10px !important; }
.system-health-panel { margin-bottom: 10px; overflow: hidden; }
.system-health-panel__header { min-height: 43px; padding: 9px 12px; border-bottom: 1px solid var(--border-subtle); }
.system-diagnostic-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; }
.system-diagnostic { padding: 11px 12px; border-right: 1px solid var(--border-subtle); }
.system-diagnostic:last-child { border: 0; }
.system-diagnostic > strong { font-size: 16px; }
.system-diagnostic dl { gap: 4px; }
.system-diagnostic dl div { font-size: 9px; }
.status-run-summary { position: static !important; display: flex; justify-content: space-between; gap: 10px; margin: 10px 0; padding: 9px 11px; }
.status-run-summary__metrics { display: flex; flex-wrap: wrap; gap: 16px; }
.status-run-summary__metrics span { display: grid; gap: 1px; }
.status-run-summary__metrics small { color: var(--text-muted); font-size: 9px; }
.status-run-summary__metrics strong { color: var(--text-primary); font-size: 15px; }
.status-page .term-body { padding: 0 !important; }
.status-table { min-width: 1040px; table-layout: fixed; }
.status-table th:first-child,.status-table td:first-child { width: 78px; min-width: 78px; white-space: nowrap; word-break: normal; }
.status-table th:nth-child(2),.status-table td:nth-child(2),
.status-table th:nth-child(3),.status-table td:nth-child(3) { width: 154px; }
.status-table th:nth-child(4),.status-table td:nth-child(4) { width: 212px; }
.status-table th:nth-child(5),.status-table td:nth-child(5),
.status-table th:nth-child(6),.status-table td:nth-child(6) { width: 150px; }
.status-table th:last-child,.status-table td:last-child { width: 142px; }
.status-table th { font-size: 11px !important; }
.status-table td { font-size: 12px !important; }

/* Dialogs and floating utilities follow the same restrained surface system. */
.modal-overlay { background: rgba(3,9,18,.68); backdrop-filter: blur(5px); }
.modal-content { max-width: min(920px,calc(100vw - 28px)); border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-md); }
.modal-header { border-bottom: 1px solid var(--border); }
.floating-compare-tray { border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); box-shadow: var(--shadow-md); }
.btn-back-to-top { border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text-primary); }
.ui-toast { border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface-elevated); box-shadow: var(--shadow-md); }

@media (max-width: 1320px) {
  .app-header__inner { grid-template-columns: 165px minmax(0,1fr); gap: 12px; padding-inline: 16px; }
  .app-header__panel { gap: 8px; }
  .app-primary-nav { gap: 1px; }
  .app-primary-nav .nav-link { padding-inline: 8px; }
  .app-global-search { width: clamp(165px,20vw,260px); }
  .rankings-explorer-layout { grid-template-columns: 220px minmax(0,1fr) 280px; gap: 9px; }
  .rankings-explorer-table__header,.rankings-explorer-results .machine-plan-row { grid-template-columns: 25px minmax(150px,1.5fr) 72px 67px 70px 74px; gap: 6px; }
}
@media (max-width: 1120px) {
  .app-header__inner { display: flex; justify-content: space-between; }
  .mobile-menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 36px; height: 34px; padding: 7px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
  .mobile-menu-toggle__line { width: 100%; height: 2px; border-radius: 2px; background: var(--text-secondary); }
  .app-header__panel { display: none; position: absolute; top: calc(100% + 1px); left: 0; right: 0; max-height: calc(100vh - var(--header-height)); overflow: auto; padding: 13px 16px 16px; border-bottom: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-md); }
  .header.menu-open .app-header__panel { display: flex; flex-direction: column; align-items: stretch; }
  .app-primary-nav { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); width: 100%; }
  .app-primary-nav .nav-link { justify-content: center; }
  .app-header__tools { display: grid; grid-template-columns: minmax(0,1fr) auto auto auto; width: 100%; }
  .app-global-search { width: 100%; }
  .rankings-explorer-layout { grid-template-columns: 220px minmax(0,1fr); }
  .rankings-filter-rail { grid-row: auto; position: static; max-height: none; }
  .rankings-plan-inspector { grid-column: 1 / -1; grid-row: auto; position: static; max-height: none; }
  .market-page { grid-template-columns: 220px minmax(0,1fr); }
  .market-card { grid-template-columns: minmax(140px,.7fr) minmax(265px,1.4fr) minmax(165px,.8fr); gap: 5px 10px; }
  .market-card__commerce { grid-template-columns: 1fr; gap: 7px; }
  .market-pricing { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .market-specs { grid-template-columns: repeat(4,minmax(0,1fr)); padding: 5px 0 0; border: 0; border-top: 1px solid var(--border-subtle); }
}
@media (max-width: 1020px) {
  .rankings-plan-inspector { display: none !important; position: fixed !important; inset: auto 0 0 !important; z-index: 1300 !important; width: min(100%,720px) !important; max-height: min(78vh,680px) !important; margin: 0 auto !important; padding-bottom: max(12px,env(safe-area-inset-bottom)) !important; overflow: auto !important; border-radius: 12px 12px 0 0 !important; box-shadow: 0 -12px 42px rgba(0,0,0,.45) !important; }
  .rankings-plan-inspector.is-open { display: block !important; }
  .rankings-plan-inspector__body { max-height: calc(78vh - 60px); overflow: auto; }
  .rankings-plan-inspector__close { display: inline-flex; align-items: center; }
}
@media (min-width: 761px) and (max-width: 1020px) {
  .market-card { grid-template-columns: minmax(140px,.65fr) minmax(0,1.35fr); grid-template-areas: "head footer" "title footer" "commerce commerce" "operations operations" "risk risk"; }
  .market-card__commerce { grid-template-columns: minmax(0,1.1fr) minmax(165px,.9fr); }
  .market-card__footer { min-height: 0; }
}
@media (max-width: 760px) {
  :root,body.app-shell { --header-height: 54px; }
  .app-header__inner { min-height: var(--header-height); padding-inline: 12px; }
  .app-brand__mark { width: 30px; height: 30px; }
  .app-brand__text small { display: none; }
  .app-main.container { padding: 14px 11px 84px; }
  .app-primary-nav { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .app-header__tools { grid-template-columns: minmax(0,1fr) repeat(3,auto); gap: 5px; }
  .app-tool-button { min-width: 34px; padding-inline: 7px; }
  .app-tool-button > span:not(.nav-count):not(.instock-dot):not(.theme-icon) { display: none; }
  .app-global-search { grid-column: 1 / -1; grid-row: 1; }
  .app-global-search .search-input { height: 38px; }
  .mobile-bottom-nav { position: fixed; inset: auto 0 0; z-index: 1200; display: grid; grid-template-columns: repeat(4,1fr); padding: 6px 6px max(6px,env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--header-bg); backdrop-filter: blur(12px); }
  .mobile-bottom-link { display: grid; place-items: center; gap: 2px; min-height: 44px; color: var(--text-muted); font-size: 9px; }
  .mobile-bottom-link svg { width: 17px; height: 17px; }
  .mobile-bottom-link.active { color: var(--primary); }
  .app-footer .footer-container { padding: 13px 12px; }
  .app-footer .footer-links { display: none; }
  .section-header { align-items: flex-start; flex-direction: column; }
  .section-title { font-size: 18px !important; }
  .home-intro { align-items: flex-start; flex-direction: column; padding: 12px; }
  .home-intro__actions { width: 100%; }
  .home-intro__actions .btn { flex: 1; justify-content: center; }
  .pulse-banner { align-items: flex-start; flex-direction: column; gap: 4px; }
  .pulse-items { gap: 4px 10px; }
  .pulse-sync-time { display: none; }
  .stats-grid--primary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .stats-grid--primary .stat-card { min-height: 78px; padding: 9px; }
  .stats-grid--primary .stat-value { font-size: 18px; }
  .stats-strip-secondary { gap: 6px 10px; padding: 7px; font-size: 9px; }
  .market-activity__tabs { overflow-x: auto; }
  .rankings-page-heading { align-items: stretch; flex-direction: column; gap: 8px; }
  .rankings-page-tools { align-items: stretch; flex-direction: column; }
  .rankings-top-search { width: 100%; }
  .rankings-explorer-layout { display: flex; flex-direction: column; gap: 8px; }
  .rankings-filter-rail { position: static; width: 100%; max-height: none; overflow: visible; }
  .rankings-filter-rail .rankings-sticky-controls { gap: 7px; }
  .rankings-filter-bar { padding: 9px; }
  .rankings-filter-bar .mobile-filter-toggle { display: flex; width: 100%; min-height: 34px; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-subtle); color: var(--text-secondary); font-size: 10px; }
  .rankings-filter-bar .advanced-filter-fields { display: none; padding-top: 9px; }
  .rankings-filter-bar .advanced-filter-fields.is-open { display: grid; }
  .ranking-tabs-unified { padding: 8px !important; }
  .ranking-primary-tabs { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .rank-primary-tab { justify-content: center; padding: 5px 3px !important; font-size: 9px !important; }
  .rank-primary-tab .tab-icon { display: none; }
  .ranking-sub-tabs { display: flex !important; overflow-x: auto; }
  .sub-tab-btn { flex: 0 0 auto; }
  .rankings-explorer-table__header { display: none; }
  .rankings-explorer-results { width: 100%; }
  .rankings-explorer-results .machine-plan-row { grid-template-columns: 22px minmax(0,1fr) auto; gap: 3px 8px; min-height: 68px; padding: 9px 8px; }
  .rankings-explorer-results .machine-plan-row__select { grid-column: 1; grid-row: 1 / span 2; }
  .rankings-explorer-results .machine-plan-row__main { grid-column: 2; grid-row: 1 / span 2; }
  .rankings-explorer-results .machine-plan-row__stock { grid-column: 3; grid-row: 1; }
  .rankings-explorer-results .machine-plan-row__price { grid-column: 3; grid-row: 2; justify-self: end; }
  .rankings-explorer-results .machine-plan-row__sla,.rankings-explorer-results .machine-plan-row__updated { display: none; }
  .rankings-explorer-results .machine-plan-row__name { white-space: normal; line-height: 1.25; }
  .rankings-explorer-results .machine-plan-row__specs { line-height: 1.3; }
  .rankings-plan-inspector { width: 100%; }
  .rankings-plan-inspector__quick-actions { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .market-page { display: flex; flex-direction: column; gap: 8px; }
  .market-page > * { width: 100%; }
  .market-hero { align-items: flex-start; }
  .market-hero__copy h1 { font-size: 18px; }
  .market-filters { position: static; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 9px; }
  .market-filter--search { grid-column: 1 / -1; }
  .market-filter-actions { grid-column: 1 / -1; }
  .market-card { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "head head" "title title" "commerce commerce" "operations operations" "risk risk" "footer footer"; gap: 7px; padding: 10px; }
  .market-card__header { justify-content: space-between; }
  .market-card__commerce { grid-template-columns: minmax(0,1fr); align-items: center; gap: 7px; }
  .market-pricing { gap: 5px; }
  .market-pricing > div:first-child strong { font-size: 15px; }
  .market-specs { grid-template-columns: repeat(4,minmax(0,1fr)); padding: 5px 0 0; border: 0; border-top: 1px solid var(--border-subtle); }
  .market-card__operations { align-items: flex-start; flex-direction: column; gap: 5px; }
  .market-lifecycle { gap: 15px; }
  .market-card__footer { min-height: 0; padding: 7px 0 0; border-top: 1px solid var(--border-subtle); border-left: 0; }
  .market-card__actions { grid-template-columns: 1fr 1fr 1.2fr; }
  .market-card__actions .market-card-action--primary { grid-column: auto; }
  .machine-detail-header,.offer-detail-hero { flex-direction: column; padding: 12px; }
  .machine-detail-header__actions { width: 100%; align-items: flex-start; flex-direction: column; }
  .offer-detail-hero__commerce { width: 100%; }
  .offer-detail-actions { display: flex; flex-wrap: wrap; }
  .offer-config-grid { grid-template-columns: repeat(2,minmax(0,1fr)); padding-inline: 10px; }
  .offer-config-grid > div { border-right: 0; }
  .offer-config-grid > div:nth-child(odd) { border-right: 1px solid var(--border-subtle); }
  .watchlist-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .watch-plan-row { grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "main main" "changes changes" "timeline timeline" "footer footer"; gap: 7px; padding: 9px; }
  .watch-plan-row__main { grid-template-columns: minmax(0,1fr) auto; align-items: center; }
  .watch-plan-row__name { white-space: normal; }
  .watch-plan-row__footer { grid-template-columns: 1fr; }
  .watch-plan-row__actions { justify-content: flex-start; }
  .statistics-page .stats-key-overview-bar { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .stats-key-item { border-bottom: 1px solid var(--border-subtle); }
  .stats-key-item:nth-child(even) { border-right: 0; }
  .statistics-page .grid-2col,.analysis-page-container .rankings-comparison-grid,.analysis-page-container .charts-grid { grid-template-columns: 1fr !important; }
  .analysis-page-container .stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .watch-detail-page .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .methodology-grid { display: flex !important; flex-direction: column; }
  .methodology-toc { position: static; width: 100%; }
  .methodology-toc nav { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .system-diagnostic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .system-diagnostic:nth-child(2) { border-right: 0; }
  .status-run-summary { align-items: flex-start; flex-direction: column; }
  .status-run-summary__metrics { gap: 10px 15px; }
  .status-run-summary__actions { width: 100%; }
  .status-run-summary__actions .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  body.app-shell *,body.app-shell *::before,body.app-shell *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Four primary destinations: compact operational summaries with explicit hierarchy. */
.region-globe-grid { grid-template-columns: minmax(215px,.72fr) minmax(0,1.55fr); gap: 12px; align-items: start; }
.region-globe-card { padding: 12px !important; margin-bottom: 12px !important; border: 1px solid var(--border) !important; border-radius: 9px !important; background: var(--surface) !important; }
.region-map-disclosure { min-width: 0; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 7px; background: var(--surface-subtle); }
.region-map-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding: 7px 10px; color: var(--text-primary); cursor: pointer; list-style: none; font-size: 11px; font-weight: 650; }
.region-map-disclosure > summary::-webkit-details-marker { display: none; }
.region-map-disclosure > summary::after { content: "+"; color: var(--text-muted); font-size: 16px; line-height: 1; }
.region-map-disclosure[open] > summary::after { content: "−"; }
.region-map-disclosure > summary small { margin-left: auto; color: var(--text-muted); font-size: 9px; font-weight: 450; }
.region-map-disclosure .globe-container,.region-map-disclosure #globe3DContainer { height: 320px !important; max-height: 360px; }
.region-map-disclosure .globe-container { padding: 0 8px 8px; }
.region-chips-wrapper { min-width: 0; padding: 0 !important; border: 0 !important; background: transparent !important; }
.region-chips-title { margin: 0 0 7px !important; font-size: 11px !important; }
.region-chips-list { grid-template-columns: repeat(auto-fit,minmax(132px,1fr)) !important; gap: 6px !important; }
.region-chip-item { min-height: 0 !important; padding: 7px 8px !important; border-radius: 6px !important; }
.region-chip-metrics { gap: 3px 6px !important; font-size: 9px !important; }
.btn-region-expand { min-height: 30px !important; margin-top: 7px !important; font-size: 10px !important; }
.tg-hub-disclosure { margin: 12px 0 0; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.tg-hub-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 12px; cursor: pointer; list-style: none; }
.tg-hub-summary::-webkit-details-marker { display: none; }
.tg-hub-summary > span:first-child { display: grid; gap: 2px; }
.tg-hub-summary strong { color: var(--text-primary); font-size: 11px; }
.tg-hub-summary small,.tg-hub-summary__action { color: var(--text-muted); font-size: 9px; }
.tg-hub-summary__action { white-space: nowrap; }
.tg-hub-disclosure[open] .tg-hub-grid { margin: 0; padding: 10px; border-top: 1px solid var(--border-subtle); gap: 9px; }
.tg-hub-disclosure .tg-hub-card { min-width: 0; padding: 12px; border-radius: 8px; box-shadow: none; }
.tg-hub-disclosure .tg-hub-features { gap: 7px; }

.rankings-filter-bar,.rankings-plan-inspector,.rankings-results-shell { border-radius: 8px !important; }
.rankings-explorer-results .machine-plan-row { min-height: 62px; }
.rankings-plan-inspector__empty { min-height: 88px; }
.market-filters { border-radius: 8px; }
.market-card { gap: 4px 11px; padding: 9px 11px; }
.market-card__footer { gap: 6px; }
.market-card__actions .market-card-action { min-height: 28px; }

.statistics-heading { align-items: center; margin: 0 0 10px !important; padding-bottom: 9px; }
.statistics-heading .section-title { font-size: 20px !important; }
.statistics-back-link { min-height: 30px; padding: 4px 9px; font-size: 10px !important; text-decoration: none; }
.statistics-page .stats-key-overview-bar { margin-bottom: 9px; }
.statistics-page .stats-key-item { padding: 8px 10px; }
.statistics-page .stats-key-item strong { font-size: 16px; }
.statistics-page .stats-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); }
.stats-toolbar__copy { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; min-width: 0; }
.stats-toolbar__copy strong { color: var(--text-primary); font-size: 11px; }
.stats-toolbar__copy span { color: var(--text-muted); font-size: 9px; }
.stats-range-switch { display: inline-flex; flex: 0 0 auto; gap: 3px; padding: 3px; border: 1px solid var(--border-subtle); border-radius: 6px; background: var(--surface-subtle); }
.statistics-page .stats-range-switch .btn-range { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 26px; padding: 3px 7px !important; border: 1px solid transparent; border-radius: 4px !important; background: transparent; color: var(--text-muted); font-size: 9px !important; text-decoration: none; }
.statistics-page .stats-range-switch .btn-range.active { border-color: var(--border); background: var(--surface); color: var(--text-primary); }
.stats-chart-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-bottom: 9px; }
.stats-panel { min-width: 0; margin: 0 0 9px; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.stats-chart-grid .stats-panel { margin: 0; }
.stats-panel__header { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 8px 11px; border-bottom: 1px solid var(--border-subtle); }
.stats-panel__header h2 { margin: 0; color: var(--text-primary); font-size: 11px; font-weight: 650; }
.stats-panel__header p { margin: 2px 0 0; color: var(--text-muted); font-size: 9px; }
.stats-panel__unit { flex: 0 0 auto; padding: 3px 6px; border: 1px solid var(--border-subtle); border-radius: 4px; color: var(--text-muted); font-size: 9px; font-variant-numeric: tabular-nums; }
.stats-chart-canvas { width: 100%; height: 238px; }
.stats-chart-canvas--events { height: 220px; }
.stats-chart-canvas .empty-chart-state { display: flex; min-height: inherit; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 16px; text-align: center; }
.stats-chart-canvas .empty-state-title { color: var(--text-primary); font-size: 11px; font-weight: 600; }
.stats-chart-canvas .empty-state-desc { max-width: 460px; color: var(--text-muted); font-size: 9px; line-height: 1.6; }
.stats-panel__header--regions { min-height: 54px; }
.stats-region-search { width: min(240px,45%); }
.stats-region-search input { width: 100%; min-height: 30px; padding: 4px 8px; font-size: 10px; }
.region-breakdown-table { min-width: 820px !important; }
.region-breakdown-table th { padding: 5px 10px !important; white-space: nowrap; }
.region-breakdown-table th:not(:first-child),.region-breakdown-table td:not(:first-child) { text-align: right; }
.stats-sort-button { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 2px 0; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; }
.region-breakdown-table th:not(:first-child) .stats-sort-button { justify-content: flex-end; }
.region-breakdown-table th span { color: var(--text-dim); font-size: 9px; }
.stats-sort-button:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.region-breakdown-table td { padding: 7px 10px !important; font-size: 10px; }
.region-breakdown-table .region-name-cell { color: var(--text-primary); font-weight: 600; text-align: left !important; white-space: nowrap; }
.region-breakdown-table .region-code { margin-left: 4px; color: var(--text-muted); font-size: 9px; font-weight: 450; }
.region-breakdown-table .region-instock { color: var(--success); font-weight: 600; }
.region-breakdown-table .region-soldout { color: var(--danger); }
.region-breakdown-table .region-value { color: var(--warning); font-weight: 600; }
.region-ratio-track { display: inline-block; width: 42px; height: 5px; margin-right: 5px; overflow: hidden; border-radius: 4px; background: var(--border-subtle); vertical-align: middle; }
.region-ratio-track > div { height: 100%; background: var(--primary); }
.region-empty-state { padding: 22px !important; color: var(--text-muted) !important; text-align: center !important; }
.statistics-page .table-responsive { overflow: auto; }

@media (max-width: 1020px) {
  .region-globe-grid { grid-template-columns: minmax(0,1fr); }
  .region-map-disclosure .globe-container,.region-map-disclosure #globe3DContainer { height: 300px !important; }
  .statistics-page .stats-key-overview-bar { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .statistics-page .stats-key-item:nth-child(3) { border-right: 0; }
  .statistics-page .stats-key-item:nth-child(n+4) { border-top: 1px solid var(--border-subtle); }
}
@media (max-width: 760px) {
  .region-globe-grid { gap: 8px; }
  .region-chips-list { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .tg-hub-summary { min-height: 44px; padding-inline: 9px; }
  .tg-hub-summary__action { max-width: 86px; text-align: right; }
  .tg-hub-disclosure[open] .tg-hub-grid { grid-template-columns: 1fr; padding: 8px; }
  .statistics-heading { flex-direction: row !important; align-items: center !important; }
  .statistics-heading .section-title { font-size: 17px !important; }
  .statistics-back-link { flex: 0 0 auto; }
  .statistics-page .stats-key-overview-bar { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .statistics-page .stats-key-item { border-top: 0 !important; }
  .statistics-page .stats-key-item:nth-child(even) { border-right: 0; }
  .statistics-page .stats-key-item:nth-child(3) { border-right: 1px solid var(--border-subtle); }
  .statistics-page .stats-key-item:last-child { grid-column: 1 / -1; }
  .statistics-page .stats-toolbar { align-items: flex-start; flex-direction: column; gap: 7px; }
  .stats-toolbar__copy { gap: 3px 7px; }
  .stats-range-switch { width: 100%; }
  .statistics-page .stats-range-switch .btn-range { flex: 1; }
  .stats-chart-grid { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .stats-chart-canvas { height: 220px; }
  .stats-chart-canvas--events { height: 205px; }
  .stats-region-search { width: 48%; }
  .stats-panel__header--regions { align-items: center; }
}

/* Visual QA iteration: keep mobile controls in view and bring listing cards into one scan path. */
.rankings-filter-rail .filter-label { font-size: 12px; }
.rankings-filter-rail .filter-select { min-height: 37px; font-size: 12px; }
.rankings-filter-rail .ranking-range-fields { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: end; gap: 6px; }
.rankings-filter-rail .ranking-range-fields label { display: grid; gap: 3px; min-width: 0; color: var(--text-muted); font-size: 10px; }
.rankings-filter-rail .ranking-range-fields input { width: 100%; min-width: 0; min-height: 34px; padding: 0 7px; font-size: 12px; font-variant-numeric: tabular-nums; }
.ranking-range-separator { padding-bottom: 8px; color: var(--text-dim); }
.rankings-explorer-table__header { font-size: 12px; }
.rankings-explorer-results .machine-plan-row__name { font-size: 14px; }
.rankings-explorer-results .machine-plan-row__location { font-size: 11px; }
.rankings-explorer-results .machine-plan-row__specs { font-size: 11px; }
.rankings-explorer-results .machine-plan-row__stock { font-size: 10px; }

@media (max-width: 760px) {
  .rankings-filter-rail .ranking-range-fields input { min-height: 36px; }
}

.market-card {
  grid-template-columns: minmax(190px,.82fr) minmax(0,1.9fr) minmax(174px,.72fr);
  grid-template-areas: "identity commerce footer" "operations operations footer" "risk risk risk";
  gap: 8px 13px;
  padding: 10px 12px;
}
.market-card__identity { grid-area: identity; display: grid; align-content: start; gap: 7px; min-width: 0; }
.market-card__header { grid-area: auto; align-items: center; padding: 0; }
.market-card__title { grid-area: auto; min-width: 0; padding: 0; }
.market-card__title h2 { font-size: 14px !important; }
.market-card__title p { font-size: 10px; }
.market-card__commerce { grid-area: commerce; align-content: start; grid-template-columns: minmax(0,1.15fr) minmax(175px,.85fr); gap: 9px; padding: 0; border: 0; background: transparent; }
.market-pricing { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px 8px; padding: 0; border: 0; }
.market-pricing > div:first-child { margin: 0; padding: 5px 7px; border-left-width: 2px; }
.market-pricing > div:first-child strong { font-size: 17px; }
.market-pricing span,.market-pricing em { font-size: 10px; }
.market-premium { padding-top: 4px; }
.market-specs { grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; gap: 3px 8px; padding: 3px 0 3px 9px; border-top: 0; border-left: 1px solid var(--border-subtle); }
.market-specs > div { padding: 2px 0; }
.market-specs div { font-size: 10px; }
.market-card__operations { grid-area: operations; align-items: center; gap: 14px; margin: 0; padding-top: 7px; border-top: 1px solid var(--border-subtle); }
.market-traffic { min-width: 0; padding: 0; border: 0; }
.market-lifecycle { flex: 0 0 auto; grid-template-columns: repeat(2,minmax(86px,1fr)); gap: 9px; margin: 0; border: 0; }
.market-lifecycle > div,.market-lifecycle > div + div { padding: 0; border: 0; }
.market-lifecycle dt,.market-lifecycle small { font-size: 9px; }
.market-lifecycle dd { font-size: 11px; }
.market-risk-list { grid-area: risk; }
.market-card__footer { grid-area: footer; gap: 7px; padding: 0 0 0 11px; }
.market-card__actions .market-card-action { min-height: 29px; }
.market-filter-toggle { display: none; }
.market-filter-fields { display: contents; }

.statistics-page .stats-key-item small { font-size: 10px; }
.statistics-page .stats-key-item span { font-size: 10px; }
.statistics-page .stats-toolbar__copy strong { font-size: 12px; }
.statistics-page .stats-toolbar__copy span { font-size: 10px; }
.statistics-page .stats-range-switch .btn-range { font-size: 10px !important; }
.stats-panel__header h2 { font-size: 13px; }
.stats-panel__header p,.stats-panel__unit { font-size: 10px; }
.region-breakdown-table td { font-size: 11px; }

@media (max-width: 760px) {
  body.app-shell { width: 100%; max-width: 100%; overflow-x: clip; }
  .app-main.container { width: 100%; max-width: 100vw; min-width: 0; }
  .app-main.container > * { min-width: 0; max-width: 100%; }
  .rankings-page-heading,.rankings-explorer-layout,.rankings-filter-rail,.rankings-sticky-controls,
  .rankings-filter-bar,.rankings-filter-bar .advanced-filter-fields,.ranking-tabs-unified,
  .rankings-explorer-results,.rankings-results-shell,.market-page,.market-page > *,
  .market-filters,.market-filter-fields,.market-card-grid,.market-card,.statistics-page,
  .stats-chart-grid,.stats-panel,.stats-chart-canvas { min-width: 0; max-width: 100%; }
  .rankings-explorer-layout,.rankings-filter-rail,.rankings-sticky-controls,.rankings-filter-bar,
  .ranking-tabs-unified,.rankings-explorer-results,.market-page,.market-filters,.market-card-grid,
  .statistics-page,.stats-chart-grid { width: 100%; }
  .ranking-tabs-unified { overflow: hidden; }
  .ranking-sub-tabs-scroller { min-width: 0; max-width: 100%; overflow-x: auto; }
  .rankings-filter-bar .filter-select,.ranking-range-fields input { min-width: 0; }
  .market-hero__copy,.market-hero__summary,.market-card__identity,.market-card__commerce,
  .market-card__operations,.market-card__footer,.market-specs,.market-lifecycle { min-width: 0; }
  .statistics-page .table-responsive { max-width: 100%; overflow-x: auto; }

  .section-title[data-mobile-title] { font-size: 0 !important; }
  .home-quick-filter-chips { display: flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
  .home-quick-filter-chips::-webkit-scrollbar,.rankings-filter-rail .ranking-primary-tabs::-webkit-scrollbar,.rankings-filter-rail .ranking-sub-tabs::-webkit-scrollbar { display: none; }
  .home-quick-filter-chips .quick-filter-chip,.market-quick-filter-chips .quick-filter-chip { flex: 0 0 auto; white-space: nowrap; }
  .home-quick-filter-chips .quick-filter-chip span,.market-quick-filter-chips .quick-filter-chip span { white-space: nowrap; }
  .rankings-filter-rail .ranking-primary-tabs { display: flex !important; flex-wrap: nowrap; gap: 5px; overflow-x: auto; }
  .rankings-filter-rail .rank-primary-tab { flex: 0 0 auto; justify-content: center; min-width: max-content; padding-inline: 10px !important; }
  .rankings-filter-rail .ranking-sub-tabs { display: flex !important; flex-wrap: nowrap; gap: 4px; overflow-x: auto; }
  .rankings-filter-rail .sub-tab-btn { flex: 0 0 auto; min-width: max-content; }

  .market-page,.market-page > *,.market-hero,.market-card-grid,.market-card { min-width: 0; max-width: 100%; }
  .market-page > * { width: 100%; }
  .market-hero { flex-direction: column; align-items: stretch; gap: 7px; }
  .market-hero__copy p { max-width: 100%; }
  .market-hero__summary { justify-content: space-between; gap: 8px; white-space: normal; }
  .market-hero__summary strong { font-size: 16px; }
  .market-quick-filter-chips { display: flex; flex-wrap: nowrap; gap: 6px; max-width: 100%; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .market-filters { display: block; width: 100%; padding: 8px; }
  .market-filters::before { display: none; }
  .market-filter-toggle { display: flex; width: 100%; min-height: 38px; align-items: center; justify-content: space-between; padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-subtle); color: var(--text-primary); font: inherit; font-size: 11px; font-weight: 650; cursor: pointer; }
  .market-filter-toggle:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
  .market-filter-toggle[aria-expanded="true"] { border-color: var(--border-strong); }
  .market-filter-fields { display: none; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 8px; }
  .market-filter-fields.is-open { display: grid; }
  .market-filter-fields .market-filter--search,.market-filter-fields .market-filter-actions { grid-column: 1 / -1; }

  .market-card { grid-template-columns: minmax(0,1fr); grid-template-areas: "identity" "commerce" "operations" "risk" "footer"; gap: 9px; padding: 10px; }
  .market-card__identity { gap: 5px; }
  .market-card__header { flex-wrap: wrap; }
  .market-card__title h2 { font-size: 15px !important; }
  .market-card__commerce { grid-template-columns: minmax(0,1fr); gap: 7px; }
  .market-pricing { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .market-specs { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2px 10px; padding: 6px 0 0; border: 0; border-top: 1px solid var(--border-subtle); }
  .market-specs > div:nth-child(odd) { padding-right: 8px; }
  .market-specs > div:nth-child(even) { padding-left: 8px; border-left: 1px solid var(--border-subtle); }
  .market-card__operations { align-items: stretch; flex-direction: column; gap: 8px; }
  .market-lifecycle { width: 100%; justify-content: flex-start; }
  .market-card__footer { padding: 7px 0 0; border-top: 1px solid var(--border-subtle); border-left: 0; }
  .market-card__actions { grid-template-columns: 1fr 1fr 1.2fr; }
  .market-card__actions .market-card-action--primary { grid-column: auto; }

  .statistics-page,.stats-chart-grid,.stats-panel,.stats-panel__header,.stats-chart-canvas { min-width: 0; max-width: 100%; }
  .statistics-page .stats-chart-canvas { height: 225px; }
  .statistics-page .stats-chart-canvas--events { height: 210px; }
}

/* v3.18.4: product-first overview and explicit bulk-selection workflow. */
.home-intro {
  align-items: center; gap: 18px; margin: 0 0 12px; padding: 12px 2px 14px;
  border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; box-shadow: none;
}
.home-intro .home-eyebrow { margin: 0 0 4px; color: var(--text-muted); font-size: 11px; letter-spacing: .09em; }
.home-intro h1 { font-size: clamp(23px, 2.2vw, 28px); line-height: 1.2; letter-spacing: -.025em; }
.home-intro__summary { margin-top: 5px; color: var(--text-secondary); font-size: 14px; }
.home-intro__meta { margin-top: 4px; font-size: 12px; }
.home-intro__actions { gap: 7px; }
.home-intro__actions .btn { min-height: 36px; padding: 7px 12px; font-size: 13px; }

.pulse-banner {
  display: grid; grid-template-columns: auto repeat(4, minmax(100px, 1fr)) auto; align-items: center; gap: 0;
  margin: 0 0 10px; padding: 0 12px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface-subtle); box-shadow: none; font-size: 12px;
}
.pulse-title { padding: 10px 14px 10px 0; color: var(--text-primary); font-size: 12px; font-weight: 650; white-space: nowrap; }
.pulse-items { display: contents; }
.pulse-items > span { padding: 10px 12px; border-left: 1px solid var(--border-subtle); white-space: nowrap; }
.pulse-sync-time { padding: 10px 0 10px 12px; border-left: 1px solid var(--border-subtle); color: var(--text-muted); font-size: 11px; white-space: nowrap; }
.pulse-val { font-variant-numeric: tabular-nums; font-weight: 700; }

.stats-overview-block { margin: 0 0 14px; padding: 0; border: 0; background: transparent; }
.stats-grid--primary {
  gap: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
}
.stats-grid--primary .stat-card,
.stats-grid--primary .stat-card:nth-child(n + 3) {
  display: grid; min-height: 0; align-content: center; gap: 3px; padding: 12px 15px;
  border: 0; border-right: 1px solid var(--border-subtle); border-radius: 0; background: transparent; box-shadow: none;
}
.stats-grid--primary .stat-card:last-child { border-right: 0; }
.stats-grid--primary .stat-label { font-size: 12px; }
.stats-grid--primary .stat-value { margin: 0; font-size: clamp(23px, 2vw, 29px); line-height: 1.15; font-variant-numeric: tabular-nums; }
.stats-grid--primary .stat-sub { margin: 0; font-size: 11px; }
.stats-grid--primary .stat-card:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--info); outline-offset: -3px; }
.stats-strip-secondary { gap: 10px; margin: 0; padding: 8px 2px 0; border: 0; }
.stats-secondary-label,.stats-secondary-note,.stat-secondary-label,.stat-secondary-note { font-size: 12px; }
.stat-secondary-value { font-size: 13px; }

.home-leaderboards .section-header { margin: 22px 0 9px !important; }
.home-leaderboards .section-title { font-size: 20px; }
.home-leaderboards__panels { display: grid; grid-template-columns: minmax(0,1fr); min-width: 0; }
.home-leaderboards .leaderboard-panel[hidden] { display: none !important; }
.home-leaderboards .leaderboard-panel[data-home-board-panel] {
  display: block; grid-column: 1 / -1; margin: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); box-shadow: none;
}
.home-leaderboards .leaderboard-panel[data-home-board-panel][hidden] { display: none !important; }
.home-leaderboards__tabs {
  display: flex; align-items: stretch; gap: 3px; max-width: 100%; margin: 0 0 8px;
  overflow-x: auto; border-bottom: 1px solid var(--border); scrollbar-width: thin;
}
.home-leaderboards__tab {
  flex: 0 0 auto; min-height: 40px; padding: 8px 13px; border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.home-leaderboards__tab:hover { color: var(--text-primary); background: var(--surface-hover); }
.home-leaderboards__tab.active { border-bottom-color: var(--success); color: var(--text-primary); }
.home-leaderboards__tab:focus-visible,.market-activity__tab:focus-visible { outline: 2px solid var(--info); outline-offset: -2px; }
.home-leaderboards .leaderboard-card-header { align-items: center; margin-bottom: 8px; padding: 0 0 8px; border-bottom: 1px solid var(--border-subtle); }
.home-leaderboards .leaderboard-card-title { font-size: 16px; }
.home-leaderboards .leaderboard-card-kicker { font-size: 10px; }
.home-leaderboards .leaderboard-card-sub { font-size: 12px; }
.home-leaderboards .leaderboard-card-header .btn { min-height: 32px; font-size: 12px !important; }
.home-leaderboards .leaderboard-table th { font-size: 11px; }
.home-leaderboards .leaderboard-table td { padding-block: 8px; font-size: 12px; }

.market-activity { margin: 0; border-radius: 8px; background: var(--surface); box-shadow: none; }
.market-activity__tabs { min-height: 42px; padding: 3px 8px; }
.market-activity__tab { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.market-activity__tab span { font-size: 11px; }
.home-quick-filter-chips .quick-filter-chip { min-height: 34px; padding: 6px 10px; font-size: 12px; }
.section-header .section-sub { font-size: 12px; }
.market-activity__panels { padding: 0 12px; }
.market-activity__panel { padding: 0 !important; border: 0; border-radius: 0; background: transparent; }
.market-activity__panel > h3.sr-only { 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; }
.market-activity__list { display: flex; flex-direction: column; gap: 0 !important; }
.market-activity__list > .home-action-card + .home-action-card { border-top: 1px solid var(--border-subtle); }
.market-activity__list > :last-child { margin-bottom: 0; }

.home-action-card {
  display: grid !important; grid-template-columns: minmax(190px, .92fr) minmax(245px, 1.05fr) minmax(330px, 1.45fr) !important;
  grid-template-areas: "identity specs footer" "signals specs footer" !important;
  align-items: center !important; gap: 5px 17px !important; min-height: 0 !important; margin: 0 !important; padding: 12px 3px !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
}
.home-action-card .action-card-header { grid-area: identity; display: flex; align-items: flex-start !important; flex-direction: column; gap: 6px; min-height: 0 !important; padding: 0 !important; border: 0 !important; }
.home-action-card__identity { display: grid; gap: 4px; min-width: 0; }
.home-action-card__primary-title { gap: 6px; }
.home-action-card__region { font-size: 11px; }
.home-action-card__host { font-size: 14px !important; line-height: 1.3; }
.home-action-card__plan { font-size: 14px !important; line-height: 1.35; }
.home-action-card__badges { display: flex; align-items: center; justify-content: flex-start !important; flex-wrap: wrap; gap: 5px; }
.home-action-card__badges .badge { min-height: 22px; padding: 3px 7px; font-size: 11px; }
.home-action-card .home-action-card__signals { grid-area: signals; min-width: 0; margin: 0; padding: 0; border: 0; }
.home-action-card__signal-line { display: flex; flex-wrap: wrap; gap: 5px 9px; font-size: 11px; }
.home-action-card .action-card-specs {
  grid-area: specs; display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); align-content: center; gap: 8px 10px;
  min-width: 0; margin: 0; padding: 8px 0 8px 15px; border: 0; border-left: 1px solid var(--border-subtle);
}
.home-action-card .action-card-specs .spec-item { min-width: 0; padding: 0 !important; border: 0 !important; color: var(--text-primary); font-size: 12px !important; line-height: 1.3; white-space: nowrap; }
.home-action-card .action-card-specs .spec-item::before { display: block; margin-bottom: 2px; color: var(--text-muted); font-size: 11px; font-weight: 500; }
.home-action-card .action-card-specs .spec-dot { display: none !important; }
.home-action-card .action-card-footer { grid-area: footer; display: grid !important; grid-template-columns: 1fr; align-content: center; gap: 7px; min-width: 0; margin: 0; padding: 0 0 0 14px; border: 0; border-left: 1px solid var(--border-subtle); }
.home-action-card__price { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.home-action-card__price .price-display { font-size: 20px !important; line-height: 1.1; }
.home-action-card__price .price-display small,.home-action-card__price .time-relative { font-size: 11px !important; }
.home-action-card__actions { display: grid !important; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 7px; min-width: 0; }
.home-action-card__secondary-actions { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
.home-action-card__secondary-actions .btn,.home-action-card__primary-action { min-width: 0; min-height: 34px !important; padding: 5px 8px !important; font-size: 12px !important; white-space: nowrap; }
.home-action-card__primary-action { min-width: 82px; }
.home-action-card .card-action-menu__panel { z-index: 30; }

.region-section-header { margin: 22px 0 8px !important; }
.region-globe-card { margin: 0 0 14px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.region-chips-wrapper { padding: 12px !important; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.tg-hub-disclosure { margin-top: 12px; }
.home-leaderboards { margin-top: 18px; }

.rankings-explorer-results .rankings-view-toolbar {
  display: flex !important; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px;
  padding: 7px 12px; border-bottom: 1px solid var(--border-subtle); background: var(--surface);
}
.rankings-selection-hint { max-width: 62ch; color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
.rankings-explorer-results .rankings-view-toolbar__actions { flex: 0 0 auto; align-items: center; gap: 6px; }
.rankings-explorer-results .rankings-view-toolbar__actions .btn { min-height: 34px; padding: 6px 10px; font-size: 12px !important; }
.rankings-selection-bar { align-items: center; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--surface-subtle); }
.rankings-selection-bar[hidden] { display: none !important; }
.rankings-selection-bar__summary { color: var(--text-primary); font-size: 13px; }
.rankings-selection-bar__summary strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.rankings-selection-bar__summary span { margin-left: 5px; font-size: 11px; }
.rankings-selection-bar__actions { gap: 6px; }
.rankings-selection-bar .btn { min-height: 34px; padding: 6px 10px; font-size: 12px !important; }
.rankings-selection-feedback { flex: 1 1 100%; color: var(--success); font-size: 12px; }
.rankings-explorer-table__header { font-size: 12px; }
.rankings-explorer-table__header > [role="columnheader"] { font-size: 11px; }
.rankings-explorer-results .machine-plan-row__select input { width: 19px; height: 19px; }
.rankings-explorer-results .machine-plan-row__name { font-size: 14px; }
.rankings-explorer-results .machine-plan-row__location { font-size: 12px; }
.rankings-explorer-results .machine-plan-row__specs { font-size: 11px; line-height: 1.45; }
.rankings-explorer-results .machine-plan-row__stock { font-size: 11px; }
.rankings-explorer-results .machine-plan-row__price strong { font-size: 16px; }
.rankings-explorer-results .machine-plan-row__price span,.rankings-explorer-results .machine-plan-row__updated { font-size: 11px; }
.rankings-explorer-results .machine-plan-row__sla { font-size: 11px; }
.rankings-filter-rail .filter-label,.rankings-filter-rail .ranking-range-fields label { font-size: 12px; }
.rankings-filter-rail .filter-select,.rankings-filter-rail .ranking-range-fields input { min-height: 38px; font-size: 13px; }
.rankings-plan-inspector__section h3 { font-size: 13px; }
.rankings-plan-inspector__section dl div,.rankings-plan-inspector__network > div { font-size: 12px; }

@media (max-width: 1100px) and (min-width: 761px) {
  .home-action-card {
    grid-template-columns: minmax(190px, 1fr) minmax(260px, 1.2fr) !important;
    grid-template-areas: "identity specs" "signals specs" "footer footer" !important;
  }
  .home-action-card .action-card-footer { grid-template-columns: minmax(120px,.65fr) minmax(0,1.8fr); align-items: center; padding: 8px 0 0; border-top: 1px solid var(--border-subtle); border-left: 0; }
  .rankings-explorer-results .rankings-view-toolbar { align-items: flex-start; flex-direction: column; }
  .rankings-explorer-results .rankings-view-toolbar__actions { width: 100%; justify-content: flex-end; }
}

@media (max-width: 760px) {
  .home-intro { align-items: flex-start; flex-direction: column; gap: 10px; margin-bottom: 8px; padding: 10px 0 12px; }
  .home-intro h1 { font-size: 23px; }
  .home-intro__summary { font-size: 13px; }
  .home-intro__actions { width: 100%; }
  .home-intro__actions .btn { flex: 1 1 140px; }
  .pulse-banner { grid-template-columns: minmax(0,1fr); gap: 0; padding: 0 10px; }
  .pulse-title { padding: 9px 0 5px; }
  .pulse-items { display: flex; flex-wrap: wrap; gap: 0 12px; }
  .pulse-items > span { padding: 5px 0; border: 0; font-size: 11px; }
  .pulse-sync-time { padding: 6px 0 9px; border: 0; font-size: 10px; }
  .stats-grid--primary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .stats-grid--primary .stat-card,.stats-grid--primary .stat-card:nth-child(n + 3) { min-height: 76px; padding: 10px 11px; border-right: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
  .stats-grid--primary .stat-card:nth-child(even) { border-right: 0; }
  .stats-grid--primary .stat-card:nth-last-child(-n + 2) { border-bottom: 0; }
  .stats-grid--primary .stat-value { font-size: 23px; }
  .stats-grid--primary .stat-sub { font-size: 10px; }
  .stats-strip-secondary { display: flex; flex-wrap: wrap; gap: 5px 9px; }
  .stats-secondary-sep { display: none; }
  .home-leaderboards__tabs { margin-inline: -2px; }
  .home-leaderboards__tab { min-height: 38px; padding-inline: 10px; font-size: 12px; }
  .home-leaderboards .leaderboard-panel[data-home-board-panel] { padding: 10px 8px; }
  .home-leaderboards .leaderboard-card-header { align-items: flex-start; gap: 8px; }
  .home-leaderboards .leaderboard-card-title { font-size: 15px; }
  .home-leaderboards .leaderboard-card-sub { font-size: 11px; }
  .home-action-card {
    grid-template-columns: minmax(0,1fr) !important; grid-template-areas: "identity" "signals" "specs" "footer" !important;
    gap: 6px !important; padding: 11px 0 !important;
  }
  .home-action-card .action-card-header { align-items: flex-start !important; flex-direction: row; justify-content: space-between; gap: 7px; }
  .home-action-card__identity { flex: 1 1 auto; }
  .home-action-card__badges { flex: 0 1 auto; justify-content: flex-end !important; }
  .home-action-card .action-card-specs { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; padding: 7px 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); border-left: 0; }
  .home-action-card .action-card-specs .spec-item { white-space: normal; font-size: 11px !important; }
  .home-action-card .action-card-specs .spec-item::before { font-size: 10px; }
  .home-action-card .action-card-footer { grid-template-columns: minmax(88px,.65fr) minmax(0,1.5fr); align-items: center; gap: 8px; padding: 0; border: 0; }
  .home-action-card__price { align-items: flex-start; flex-direction: column; gap: 2px; }
  .home-action-card__price .price-display { font-size: 18px !important; }
  .home-action-card__actions { grid-template-columns: minmax(0,1fr); gap: 5px; }
  .home-action-card__secondary-actions { gap: 4px; }
  .home-action-card__secondary-actions .btn,.home-action-card__primary-action { min-height: 34px !important; padding: 5px 4px !important; font-size: 11px !important; }
  .home-action-card__primary-action { width: 100%; }
  .rankings-explorer-results .rankings-view-toolbar { align-items: stretch; flex-direction: column; gap: 7px; padding: 9px; }
  .rankings-selection-hint { max-width: none; font-size: 12px; }
  .rankings-explorer-results .rankings-view-toolbar__actions { display: flex; flex-wrap: wrap; justify-content: stretch; }
  .rankings-explorer-results .rankings-view-toolbar__actions .btn { flex: 1 1 112px; min-height: 36px; }
  .rankings-selection-bar { align-items: stretch; flex-direction: column; gap: 7px; padding: 9px; }
  .rankings-selection-bar__summary span { display: block; margin: 3px 0 0; }
  .rankings-selection-bar__actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .rankings-selection-bar__actions #rankingsClearSelection { grid-column: 1 / -1; }
  .rankings-explorer-results .machine-plan-row__location { font-size: 11px; }
  .rankings-explorer-results .machine-plan-row__specs { font-size: 11px; }
}

/* Homepage redesign v5: a map-led market atlas, not a stack of dashboard cards. */
.page-home .app-main {
  width: min(1512px, calc(100% - 64px));
  max-width: none;
  padding: 0 0 42px;
}
.home-overview {
  --home-rule: rgba(135, 163, 194, .18);
  --home-map-bg: #0b1627;
  --home-map-text: #e7f0fb;
  --home-map-muted: #93a8c1;
  color: var(--text-primary);
}
[data-theme="light"] .page-home .home-overview {
  --home-rule: rgba(48, 73, 99, .20);
  --home-map-bg: #e7eef4;
  --home-map-text: #17283a;
  --home-map-muted: #53677b;
}
.home-overview__metrics {
  display: grid;
  grid-template-columns: minmax(205px, 1.18fr) repeat(4, minmax(0, 1fr));
  align-items: center;
  min-height: 102px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--home-rule);
}
.home-overview__date { display: grid; gap: 3px; padding: 12px 20px 12px 0; color: var(--home-map-muted); }
.home-overview__date > time { color: var(--text-primary); font: 500 15px/1.3 var(--font-mono); }
.home-overview__date > span { font: 600 10px/1.3 var(--font-mono); letter-spacing: .12em; }
.home-overview__date small { font-size: 12px; }
.home-metric {
  display: flex;
  min-width: 0;
  min-height: 58px;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 0 22px;
  border-left: 1px solid var(--home-rule);
  color: var(--text-primary);
  text-decoration: none;
  transition: color 160ms ease, background-color 160ms ease;
}
.home-metric:hover { color: var(--info); background: color-mix(in srgb, var(--surface) 50%, transparent); }
.home-metric__label { color: var(--text-muted); font-size: 13px; }
.home-metric strong { font: 650 clamp(25px, 2.35vw, 35px)/1.08 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.home-metric--live strong { color: var(--success); }
.home-metric--change strong { color: var(--info); }
.home-map-hero {
  position: relative;
  min-height: 456px;
  overflow: hidden;
  border-bottom: 1px solid var(--home-rule);
  isolation: isolate;
}
.home-map-hero__copy {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 0;
  width: min(31%, 390px);
  padding: 22px 12px 24px 0;
  transform: translateY(-50%);
}
.home-map-hero__eyebrow,.home-section-heading__eyebrow {
  margin: 0 0 10px;
  color: var(--info);
  font: 600 10px/1.4 var(--font-mono);
  letter-spacing: .15em;
}
.home-map-hero h1 { margin: 0; font-size: clamp(29px, 3vw, 42px); font-weight: 700; line-height: 1.14; letter-spacing: -.045em; }
.home-map-hero__summary { max-width: 310px; margin: 13px 0 20px; color: var(--text-secondary); font-size: 16px; line-height: 1.65; }
.home-map-hero__action {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border: 1px solid var(--primary-border);
  border-radius: 5px;
  background: var(--primary);
  color: #061a17;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 160ms ease, background-color 160ms ease;
}
body.app-shell .home-map-hero__action { color: var(--home-action-text); }
body.app-shell .home-map-hero__action:hover { transform: translateY(-1px); background: var(--primary-hover); color: var(--home-action-text); }
.home-map-hero__action span { font-size: 18px; }
.home-map-hero__note { max-width: 290px; margin: 13px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.55; }
.home-world-map {
  position: absolute;
  z-index: 1;
  inset: 0 0 0 19%;
  overflow: hidden;
  background-color: var(--home-map-bg);
  background-image: radial-gradient(ellipse at 64% 48%, rgba(15, 104, 112, .12), transparent 58%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
[data-theme="light"] .page-home .home-world-map {
  background-image: radial-gradient(ellipse at 64% 48%, rgba(30, 126, 138, .14), transparent 58%), linear-gradient(135deg, rgba(255,255,255,.22), transparent 58%);
}
.home-world-map canvas { position: relative; z-index: 1; display: block; }
.home-world-map__loading {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 57%;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 300px;
  padding: 12px 15px;
  border: 1px solid var(--home-rule);
  border-radius: 4px;
  background: color-mix(in srgb, var(--home-map-bg) 90%, transparent);
  color: var(--home-map-text);
  font-size: 13px;
  line-height: 1.5;
  transform: translate(-50%, -50%);
}
.home-world-map__loading[hidden] { display: none; }
.home-world-map__loading.is-error { max-width: 340px; border-color: var(--warning-border); }
.home-world-map__loading-mark {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 14px var(--success);
}
.home-map-legend {
  position: absolute;
  z-index: 3;
  right: 14px;
  bottom: 17px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 18px;
  color: var(--home-map-muted);
  font-size: 12px;
  pointer-events: none;
}
.home-map-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.home-map-legend__dot { width: 8px; height: 8px; border-radius: 50%; background: #5a7799; }
.home-map-legend__dot--stock { background: #36d9b3; box-shadow: 0 0 10px rgba(54,217,179,.6); }
.home-map-legend__hint { padding-left: 12px; border-left: 1px solid var(--home-rule); }
.home-overview__bottom { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 27px; }
.home-region-section,.home-activity { min-width: 0; }
.home-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; min-height: 69px; margin-bottom: 10px; }
.home-section-heading__eyebrow { margin-bottom: 4px; font-size: 10px; }
.home-section-heading h2 { margin: 0; font-size: 23px; font-weight: 680; line-height: 1.25; letter-spacing: -.025em; }
.home-section-heading p:not(.home-section-heading__eyebrow) { margin: 5px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.45; }
.home-section-heading__link { display: inline-flex; min-height: 40px; flex: 0 0 auto; align-items: center; gap: 7px; color: var(--info); font-size: 13px; font-weight: 600; text-decoration: none; }
.home-section-heading__link:hover { color: var(--text-primary); }
.home-region-table-wrap { overflow-x: auto; border-top: 1px solid var(--home-rule); border-bottom: 1px solid var(--home-rule); scrollbar-width: thin; }
.home-region-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.home-region-table th,.home-region-table td { padding: 10px 8px; border-bottom: 1px solid var(--home-rule); text-align: left; vertical-align: middle; }
.home-region-table thead th { padding-top: 11px; padding-bottom: 10px; color: var(--text-muted); font-size: 12px; font-weight: 550; white-space: nowrap; }
.home-region-table tbody tr:last-child > * { border-bottom: 0; }
.home-region-table tbody th { min-width: 110px; font-weight: 500; }
.home-region-table .home-region-table__numeric { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.home-region-table__name { display: inline-flex; align-items: center; gap: 7px; color: var(--text-primary); text-decoration: none; white-space: nowrap; }
.home-region-table__name:hover { color: var(--info); }
.home-region-table__name small { color: var(--text-muted); font: 500 12px/1.4 var(--font-mono); }
.home-region-table__available { color: var(--success); font-weight: 650; }
.home-region-table__ratio { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.home-region-table__ratio > span:last-child { min-width: 34px; color: var(--text-secondary); font: 500 12px/1.3 var(--font-mono); text-align: right; }
.home-region-table__track { display: inline-block; width: clamp(34px, 5vw, 70px); height: 5px; overflow: hidden; border-radius: 8px; background: var(--border-subtle); }
.home-region-table__track i { display: block; height: 100%; border-radius: inherit; background: var(--success); }
.home-region-table__empty { padding: 24px 8px !important; color: var(--text-muted); text-align: center !important; }
.home-region-section__expand { display: inline-flex; min-height: 44px; align-items: center; gap: 7px; padding: 0 3px; border: 0; background: transparent; color: var(--info); font: inherit; font-size: 13px; cursor: pointer; }
.home-region-section__expand:hover { color: var(--text-primary); }
.home-activity__tabs { display: flex; min-height: 46px; gap: 5px; overflow-x: auto; border-bottom: 1px solid var(--home-rule); scrollbar-width: thin; }
.home-activity__tab { display: inline-flex; min-height: 44px; flex: 0 0 auto; align-items: center; gap: 7px; padding: 0 11px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-muted); font: inherit; font-size: 13px; cursor: pointer; transition: color 160ms ease, border-color 160ms ease; }
.home-activity__tab:hover { color: var(--text-primary); }
.home-activity__tab.is-active { border-bottom-color: var(--success); color: var(--text-primary); }
.home-activity__tab > span { color: var(--text-muted); font: 500 11px/1 var(--font-mono); }
.home-activity__tab:focus-visible,.home-region-section__expand:focus-visible,.home-map-hero__action:focus-visible,.home-section-heading__link:focus-visible,.home-overview a:focus-visible { outline: 2px solid var(--info); outline-offset: 3px; }
.home-activity__panel[hidden] { display: none !important; }
.home-activity__list { border-bottom: 1px solid var(--home-rule); }
.home-activity-row { display: grid; grid-template-columns: 63px 50px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 53px; border-bottom: 1px solid var(--home-rule); color: var(--text-primary); text-decoration: none; }
.home-activity-row:last-child { border-bottom: 0; }
.home-activity-row:hover { background: color-mix(in srgb, var(--surface) 46%, transparent); }
.home-activity-row__time { color: var(--text-muted); font: 500 12px/1.3 var(--font-mono); white-space: nowrap; }
.home-activity-row__type { display: inline-flex; min-height: 23px; align-items: center; justify-content: center; padding: 2px 5px; border-radius: 3px; background: var(--success-bg); color: var(--success); font-size: 12px; font-weight: 650; }
.home-activity-row__type--low_stock { background: var(--warning-bg); color: var(--warning); }
.home-activity-row__type--price_change { background: var(--info-bg); color: var(--info); }
.home-activity-row__identity { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.home-activity-row__identity strong,.home-activity-row__identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-activity-row__identity strong { font-size: 13px; font-weight: 620; }
.home-activity-row__identity small { color: var(--text-muted); font-size: 12px; }
.home-activity-row__detail { color: var(--text-secondary); font: 500 12px/1.35 var(--font-mono); text-align: right; white-space: nowrap; }
.home-activity__empty { margin: 0; padding: 25px 4px; color: var(--text-muted); font-size: 13px; }
.home-overview__links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 27px; padding-top: 13px; border-top: 1px solid var(--home-rule); }
.home-overview__links a { min-height: 36px; display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); font-size: 12px; text-decoration: none; }
.home-overview__links a:hover { color: var(--info); }

@media (max-width: 1080px) {
  .page-home .app-main { width: calc(100% - 40px); }
  .home-overview__metrics { grid-template-columns: minmax(155px, 1fr) repeat(4, minmax(0, 1fr)); }
  .home-metric { padding-inline: 15px; }
  .home-map-hero { min-height: 420px; }
  .home-map-hero__copy { width: 32%; }
  .home-world-map { left: 22%; }
  .home-overview__bottom { gap: 28px; }
}
@media (max-width: 760px) {
  .page-home .app-main { width: calc(100% - 32px); padding-bottom: 28px; }
  .home-overview__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; padding: 7px 0; }
  .home-overview__date { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; padding: 7px 0 10px; }
  .home-overview__date > time { grid-column: 1; font-size: 13px; }
  .home-overview__date > span { grid-column: 1; grid-row: 2; font-size: 10px; }
  .home-overview__date small { grid-column: 2; grid-row: 1 / span 2; font-size: 11px; text-align: right; }
  .home-metric { min-height: 64px; padding: 7px 12px; border-top: 1px solid var(--home-rule); }
  .home-metric:nth-of-type(odd) { border-left: 0; }
  .home-metric__label { font-size: 13px; }
  .home-metric strong { font-size: 24px; }
  .home-map-hero { display: flex; min-height: 0; flex-direction: column; overflow: visible; padding-top: 19px; }
  .home-map-hero__copy { position: relative; top: auto; left: auto; width: auto; padding: 0; transform: none; }
  .home-map-hero__eyebrow { margin-bottom: 7px; }
  .home-map-hero h1 { font-size: 30px; }
  .home-map-hero__summary { max-width: none; margin: 8px 0 12px; font-size: 14px; }
  .home-map-hero__action { min-height: 44px; }
  .home-map-hero__note { max-width: none; margin-top: 9px; font-size: 11px; }
  .home-world-map { position: relative; inset: auto; width: 100%; height: 300px; margin-top: 8px; background-size: auto 100%; }
  .home-world-map__loading { left: 50%; max-width: 260px; font-size: 12px; }
  .home-map-legend { position: relative; right: auto; bottom: auto; justify-content: flex-start; gap: 7px 13px; min-height: 37px; padding: 0 0 8px; font-size: 11px; }
  .home-map-legend__hint { padding-left: 0; border-left: 0; }
  .home-overview__bottom { gap: 25px; padding-top: 20px; }
  .home-section-heading { min-height: 63px; gap: 8px; }
  .home-section-heading h2 { font-size: 21px; }
  .home-section-heading p:not(.home-section-heading__eyebrow) { font-size: 13px; }
  .home-section-heading__link { min-height: 44px; font-size: 13px; }
  .home-region-table thead { display: none; }
  .home-region-table,.home-region-table tbody { display: block; }
  .home-region-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; padding: 7px 0; border-bottom: 1px solid var(--home-rule); }
  .home-region-table tbody tr:last-child { border-bottom: 0; }
  .home-region-table tbody th { grid-column: 1 / -1; min-width: 0; padding: 5px 2px 7px; border: 0; }
  .home-region-table tbody td { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 2px; border: 0; font-size: 14px; }
  .home-region-table tbody td::before { content: attr(data-label); color: var(--text-muted); font: 450 12px/1.35 var(--font-sans); white-space: nowrap; }
  .home-region-table tbody td[data-label="现货比例"] { grid-column: 1 / -1; }
  .home-region-table__ratio { gap: 7px; }
  .home-region-table__track { width: 76px; }
  .home-activity__tabs { gap: 1px; }
  .home-activity__tab { padding-inline: 8px; font-size: 12px; }
  .home-activity-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "identity type" "time detail";
    gap: 4px 9px;
    min-height: 0;
    padding: 9px 0;
  }
  .home-activity-row__identity { grid-area: identity; }
  .home-activity-row__type { grid-area: type; justify-self: end; }
  .home-activity-row__time { grid-area: time; min-width: 0; font-size: 11px; }
  .home-activity-row__detail {
    grid-area: detail;
    max-width: 150px;
    overflow: hidden;
    margin: 0;
    color: var(--text-muted);
    font-size: 11px;
    text-align: right;
    text-overflow: ellipsis;
  }
  .home-overview__links { gap: 2px 15px; margin-top: 20px; }
}
@media (max-width: 380px) {
  .page-home .app-main { width: calc(100% - 24px); }
  .home-metric { padding-inline: 8px; }
  .home-map-hero h1 { font-size: 27px; }
  .home-activity__tab { padding-inline: 6px; font-size: 12px; }
  .home-activity-row { gap: 4px 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-overview *, .home-overview *::before, .home-overview *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Prototype alignment: map, compact node scan, live activity, then the full regional table. */
.home-world-map__loading { flex-wrap: wrap; justify-content: center; }
.home-world-map__retry {
  min-height: 34px;
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--surface-subtle);
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.home-world-map__retry[hidden] { display: none; }
.home-world-map__retry:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.home-map-legend__line--border { width: 16px; height: 0; border-top: 1px solid #6b94b8; }

.home-overview__insights {
  display: grid;
  grid-template-columns: minmax(260px,.82fr) minmax(0,1.18fr);
  gap: clamp(22px,3vw,42px);
  padding-top: 21px;
}
.home-node-overview,.home-activity,.home-region-section { min-width: 0; }
.home-node-list { margin: 0; padding: 0; border-top: 1px solid var(--home-rule); list-style: none; }
.home-node-list > li { margin: 0; padding: 0; border-bottom: 1px solid var(--home-rule); }
.home-node-row {
  display: grid;
  grid-template-columns: 32px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 55px;
  color: var(--text-primary);
  text-decoration: none;
}
.home-node-row:hover { background: color-mix(in srgb, var(--surface) 46%, transparent); }
.home-node-row__flag { display: inline-flex; width: 28px; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 21px; line-height: 1; text-align: center; }
.home-node-row__flag img,.home-region-table__flag img { display: block; width: 24px; height: 16px; border: 1px solid color-mix(in srgb, var(--border-subtle) 72%, transparent); border-radius: 3px; object-fit: cover; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.home-node-row__identity { display: grid; min-width: 0; gap: 3px; }
.home-node-row__identity strong,.home-node-row__identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-node-row__identity strong { font-size: 14px; font-weight: 620; }
.home-node-row__identity small { color: var(--text-muted); font-size: 11px; }
.home-node-row__stock { display: grid; gap: 1px; min-width: 60px; text-align: right; }
.home-node-row__stock strong { color: var(--success); font: 650 17px/1.2 var(--font-mono); font-variant-numeric: tabular-nums; }
.home-node-row__stock small { color: var(--text-muted); font-size: 10px; white-space: nowrap; }
.home-node-row__stock.is-empty strong { color: var(--text-muted); }
.home-node-list__empty { padding: 20px 0 !important; color: var(--text-muted); font-size: 13px; }
.home-region-section { margin-top: 30px; }
.home-region-table__flag { display: inline-flex; width: 24px; align-items: center; justify-content: center; font-size: 17px; line-height: 1; }
.home-activity-row {
  grid-template-columns: minmax(70px,max-content) max-content minmax(0,1fr) max-content;
  gap: 8px;
  min-width: 0;
}
.home-activity-row__time { min-width: 0; font-size: 11px; }
.home-activity-row__type { flex: 0 0 auto; padding-inline: 6px; font-size: 11px; }
.home-activity-row__identity { min-width: 0; }
.home-activity-row__detail { max-width: 128px; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }

/* Used listings use the same compact, ruled scan path as plan rows while retaining market data. */
.market-card-grid { gap: 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.market-card {
  align-items: center;
  gap: 7px 13px;
  padding: 9px 12px;
  border: 0 !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.market-card:last-child { border-bottom: 0 !important; }
.market-card:hover { background: color-mix(in srgb, var(--surface) 65%, transparent) !important; }
.market-card--attention { box-shadow: inset 3px 0 var(--warning) !important; }
.market-card__title h2 { font-size: 14px !important; }
.market-pricing > div:first-child strong { font-size: 18px; }
.market-card__footer { gap: 6px; }

@media (max-width: 1080px) {
  .home-overview__insights { grid-template-columns: minmax(235px,.85fr) minmax(0,1.15fr); gap: 22px; }
  .home-activity-row {
    grid-template-columns: minmax(64px,max-content) max-content minmax(0,1fr);
    grid-template-areas: "time type identity" "time type detail";
  }
  .home-activity-row__time { grid-area: time; }
  .home-activity-row__type { grid-area: type; align-self: start; margin-top: 1px; }
  .home-activity-row__identity { grid-area: identity; }
  .home-activity-row__detail { grid-area: detail; max-width: 100%; text-align: left; }
}
@media (max-width: 760px) {
  .home-overview__insights { grid-template-columns: minmax(0,1fr); gap: 24px; padding-top: 14px; }
  .home-node-row { min-height: 54px; }
  .home-region-section { margin-top: 24px; }
  .home-activity-row {
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas: "identity type" "time detail";
    gap: 4px 9px;
    padding-block: 9px;
  }
  .home-activity-row__identity { grid-area: identity; }
  .home-activity-row__type { grid-area: type; justify-self: end; }
  .home-activity-row__time { grid-area: time; font-size: 11px; }
  .home-activity-row__detail { grid-area: detail; max-width: min(48vw,190px); text-align: right; }
  .market-card-grid { border: 0; }
  .market-card { border: 1px solid var(--border) !important; border-radius: 7px !important; background: var(--surface) !important; }
  .market-card--attention { box-shadow: inset 3px 0 var(--warning) !important; }
}
@media (max-width: 380px) {
  .home-node-row { grid-template-columns: 27px minmax(0,1fr) auto; gap: 7px; }
  .home-node-row__flag { width: 25px; font-size: 19px; }
  .home-node-row__identity small { font-size: 10px; }
  .home-node-row__stock { min-width: 54px; }
}