.market-dashboard {
  --dash-bg: #050708;
  --dash-panel: #080b0d;
  --dash-panel-strong: #0c1013;
  --dash-ink: #f4f7f8;
  --dash-muted: #929ca3;
  --dash-faint: #5f6970;
  --dash-line: #262d32;
  --dash-blue: #1677ff;
  --dash-green: #39d375;
  --dash-amber: #e4b629;
  --dash-orange: #ff7043;
  --dash-silver: #909aa2;
  min-width: 320px;
  background: var(--dash-bg);
  color: var(--dash-ink);
  font-size: 14px;
}

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ui-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

html[data-theme="light"] .market-dashboard {
  --dash-bg: #f4f6f7;
  --dash-panel: #ffffff;
  --dash-panel-strong: #f7f9fa;
  --dash-ink: #11171b;
  --dash-muted: #66727a;
  --dash-faint: #8a969d;
  --dash-line: #d7dfe3;
  --dash-blue: #0869e7;
  --dash-green: #168755;
  --dash-amber: #986f00;
  --dash-orange: #c94d2a;
  --dash-silver: #748087;
  color-scheme: light;
}

html[data-theme="dark"] { color-scheme: dark; }
.market-dashboard button, .market-dashboard select { color: inherit; }
.market-dashboard button:focus-visible, .market-dashboard a:focus-visible, .market-dashboard select:focus-visible { outline-color: rgba(22, 119, 255, .58); }

 .core-mark img { width: 100%; height: 100%; display: block; object-fit: contain; }

.theme-toggle { justify-self: end; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--dash-ink); cursor: pointer; }
.theme-toggle:hover { background: var(--dash-panel-strong); }
.theme-toggle .ui-icon { grid-area: 1 / 1; width: 22px; height: 22px; }

.market-shell { width: min(1760px, calc(100% - 48px)); margin: 0 auto; padding: 0 0 10px; }
#network, #model-ranking, #price-snapshot, #integrations { scroll-margin-top: 68px; }
.market-panel, .network-ribbon { border: 1px solid var(--dash-line); border-radius: 6px; background: var(--dash-panel); }
.network-ribbon { min-height: 68px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: hidden; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.network-stat { min-width: 0; display: flex; align-items: center; gap: 11px; padding: 11px 18px; border-right: 1px solid var(--dash-line); }
.network-stat:last-child { border-right: 0; }
.network-stat-icon { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; color: var(--dash-muted); }
.network-stat-icon .ui-icon { width: 27px; height: 27px; stroke-width: 1.65; }
.network-stat.tone-good .network-stat-icon { color: var(--dash-green); }
.network-stat.tone-warn .network-stat-icon { color: var(--dash-amber); }
.network-stat.tone-bad .network-stat-icon { color: var(--dash-orange); }
.network-stat-copy { min-width: 0; }
.network-stat span { display: block; color: var(--dash-muted); font-size: 11px; white-space: nowrap; }
.network-stat strong { display: block; margin-top: 3px; overflow: hidden; color: var(--dash-ink); font-size: 16px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.network-stat.state strong { font-size: 13px; }
.network-stat.state.tone-good strong { color: var(--dash-green); }
.network-stat.state.tone-warn strong { color: var(--dash-amber); }
.network-stat.state.tone-bad strong { color: var(--dash-orange); }

.market-primary { display: grid; grid-template-columns: minmax(0, 1fr) 318px; margin-top: 0; }
.market-primary > .market-panel { border-top: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.market-primary > .market-panel:first-child { border-top-left-radius: 0; border-top-right-radius: 0; }
.market-primary > .market-panel:last-child { border-left: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.market-panel-head { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--dash-line); }
.market-panel-head > div { min-width: 0; display: flex; align-items: center; gap: 8px; }
.market-panel-head h1, .market-panel-head h2 { margin: 0; color: var(--dash-ink); font-size: 15px; font-weight: 650; }
.market-panel-head p { margin: 3px 0 0; color: var(--dash-muted); font-size: 10px; }
.flow-panel > .market-panel-head, .price-panel > .market-panel-head { min-height: 42px; padding-top: 9px; padding-bottom: 9px; }
.flow-panel > .market-panel-head { border-bottom: 0; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dash-green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dash-green) 14%, transparent); }
.data-note { color: var(--dash-muted); font-size: 10px; white-space: nowrap; }
.info-button { width: 21px; height: 21px; border: 1px solid var(--dash-faint); border-radius: 50%; background: transparent; color: var(--dash-muted); cursor: help; font: 700 11px/1 ui-sans-serif, system-ui; }

.flow-stage { position: relative; min-height: 396px; display: grid; grid-template-columns: 180px 300px minmax(440px, 1fr); gap: 40px; padding: 15px 16px 11px; overflow: hidden; }
#flow-canvas { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.integration-stack, .route-core, .direction-area { position: relative; z-index: 1; }
.integration-stack { width: 166px; justify-self: center; display: grid; align-content: center; gap: 10px; }
.integration-node { height: 50px; display: grid; grid-template-columns: 44px 1fr; align-items: center; border: 1px solid var(--dash-line); border-radius: 6px; background: color-mix(in srgb, var(--dash-panel-strong) 72%, var(--dash-panel)); }
.integration-node strong { font-size: 12px; font-weight: 580; }
.integration-mark { display: grid; place-items: center; color: var(--dash-ink); }
.integration-mark .ui-icon { width: 21px; height: 21px; }
.route-core { display: grid; grid-template-columns: 84px 81px 124px; align-items: center; justify-content: start; transform: translateY(11px); }
.api-node { height: 90px; display: grid; place-items: center; align-content: center; border: 1px solid var(--dash-line); border-radius: 6px; background: var(--dash-panel-strong); text-align: center; }
.api-node .ui-icon { width: 27px; height: 27px; }
.api-node strong { margin-top: 5px; font-size: 12px; }
.api-node small { color: var(--dash-muted); font-size: 10px; }
.route-line { height: 2px; background: transparent; }
.route-line i { display: none; }
.ompera-core { position: relative; display: grid; place-items: center; }
.core-mark { width: 124px; height: 124px; display: grid; place-items: center; border: 1px solid var(--dash-line); border-radius: 8px; background: var(--dash-panel-strong); color: var(--dash-ink); box-shadow: 0 0 0 12px color-mix(in srgb, var(--dash-blue) 3%, transparent); }
.core-mark img { width: 112px; height: 112px; }
.ompera-core span { position: absolute; top: calc(100% + 8px); color: var(--dash-muted); font-size: 10px; white-space: nowrap; }
.direction-area { width: 510px; min-width: 0; margin-right: 18px; justify-self: end; display: grid; grid-template-rows: 22px 1fr; }
.direction-head, .direction-row { display: grid; grid-template-columns: minmax(140px, 1fr) 76px 96px 110px; gap: 8px; align-items: center; }
.direction-head { padding: 0 12px; color: var(--dash-muted); font-size: 9px; }
.direction-list { display: grid; align-content: center; gap: 9px; }
.direction-row { min-height: 56px; padding: 8px 12px; border: 1px solid var(--dash-line); border-radius: 6px; background: color-mix(in srgb, var(--dash-panel-strong) 76%, var(--dash-panel)); }
.direction-name { min-width: 0; display: flex; align-items: center; gap: 10px; }
.direction-icon { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--dash-blue); color: white; font-size: 9px; font-weight: 800; }
.direction-icon .ui-icon { width: 18px; height: 18px; stroke-width: 1.8; }
.direction-icon.direction-ocr { background: var(--dash-green); }
.direction-icon.direction-speech_to_text { background: var(--dash-amber); color: #11171b; }
.direction-icon.direction-embeddings { background: var(--dash-silver); }
.direction-name strong { overflow: hidden; font-size: 13px; font-weight: 590; text-overflow: ellipsis; white-space: nowrap; }
.direction-value { font-size: 18px; font-weight: 600; }
.direction-trend { display: flex; align-items: center; gap: 6px; color: var(--dash-blue); font-size: 11px; }
.direction-trend svg { width: 62px; height: 22px; overflow: visible; }
.direction-trend polyline { fill: none; stroke: currentColor; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.direction-status { font-size: 11px; font-weight: 650; }
a.direction-row { color: inherit; text-decoration: none; cursor: pointer; transition: border-color .15s, background-color .15s; }
a.direction-row:hover, a.direction-row:focus-visible { border-color: var(--dash-blue); outline: none; }
a.direction-row:hover .direction-name strong::after, a.direction-row:focus-visible .direction-name strong::after { content: " · How to use →"; color: var(--dash-blue); font-size: 12px; font-weight: 600; }
.direction-row[data-state="free_capacity"] .direction-status { color: var(--dash-green); }
.direction-row[data-state="balanced"] .direction-status { color: var(--dash-amber); }
.direction-row[data-state="need_providers"] .direction-status { color: var(--dash-orange); }
.direction-row[data-state="collecting_data"] .direction-status { color: var(--dash-silver); }
.flow-legend { min-height: 42px; display: flex; align-items: center; flex-wrap: wrap; gap: 18px; padding: 9px 16px; border-top: 1px solid var(--dash-line); color: var(--dash-muted); font-size: 10px; }
.flow-legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend-prefix { margin-right: 5px; font-weight: 500; }
.legend-line { width: 42px; height: 2px; background: var(--dash-blue); }
.legend-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--dash-silver); }.legend-dot.free { background: var(--dash-green); }.legend-dot.balanced { background: var(--dash-amber); }.legend-dot.need { background: var(--dash-orange); }

.price-panel { padding-bottom: 12px; }
.select-label { display: block; padding: 12px 14px 6px; color: var(--dash-muted); font-size: 10px; }
.price-panel select { width: calc(100% - 28px); height: 38px; margin: 0 14px; appearance: none; border: 1px solid var(--dash-line); border-radius: 5px; background-color: var(--dash-panel-strong); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23929ca3' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E"); background-position: right 14px center; background-repeat: no-repeat; background-size: 16px 16px; padding: 0 40px 0 10px; font-size: 12px; }
.price-panel select:disabled { color: var(--dash-muted); opacity: 1; }
.price-unit { margin: 14px 14px 0; color: var(--dash-muted); font-size: 10px; }
.price-columns { display: grid; grid-template-columns: 1fr 72px 78px; gap: 8px; margin: 7px 14px 0; padding-bottom: 8px; border-bottom: 1px solid var(--dash-line); color: var(--dash-muted); font-size: 9px; }
.price-columns span:not(:first-child) { text-align: right; }
.price-offers { min-height: 174px; margin: 0 14px; }
.panel-empty { min-height: 154px; display: grid; place-items: center; align-content: center; padding: 20px; color: var(--dash-muted); text-align: center; }
.panel-empty strong { color: var(--dash-ink); font-size: 12px; }
.panel-empty span { max-width: 220px; margin-top: 7px; font-size: 10px; line-height: 1.5; }
.savings-block { width: calc(100% - 28px); display: grid; gap: 6px; margin: 0 14px; border: 1px solid var(--dash-line); border-radius: 5px; padding: 10px 11px; background: var(--dash-panel-strong); text-align: left; }
.savings-block:disabled { opacity: 1; }
.savings-block span { display: grid; grid-template-columns: 1fr auto 12px; align-items: center; gap: 8px; }
.savings-block span:not(.saving) { grid-template-columns: 1fr auto; }
.savings-block em { color: var(--dash-muted); font-size: 11px; font-style: normal; }.savings-block strong { font-size: 11px; font-weight: 600; }.savings-block .saving { color: var(--dash-green); }.savings-block i { font-style: normal; font-size: 18px; }
.panel-source { margin: 8px 14px 0; color: var(--dash-muted); font-size: 9px; line-height: 1.35; }

.market-lower { display: grid; grid-template-columns: 34% minmax(0, 66%); }
.market-lower > .market-panel { border-top: 0; border-radius: 0 0 6px 6px; }
.market-lower > .market-panel:first-child { border-bottom-right-radius: 0; }
.market-lower > .market-panel + .market-panel { border-left: 0; border-bottom-left-radius: 0; }
.ranking-tabs { display: flex; gap: 2px; overflow-x: auto; padding: 0 12px; border-bottom: 1px solid var(--dash-line); scrollbar-width: none; }
.ranking-tabs::-webkit-scrollbar { display: none; }
.ranking-tabs button { position: relative; min-width: max-content; height: 40px; border: 0; padding: 0 8px; background: transparent; color: var(--dash-muted); cursor: pointer; font-size: 10px; }
.ranking-tabs button::after { position: absolute; right: 8px; bottom: -1px; left: 8px; height: 2px; background: var(--dash-blue); content: ""; opacity: 0; }
.ranking-tabs button.active { color: var(--dash-ink); }.ranking-tabs button.active::after { opacity: 1; }
.ranking-table { min-height: 250px; }
.rank-head, .rank-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 92px; align-items: center; }
.rank-head { height: 35px; padding: 0 16px; color: var(--dash-muted); font-size: 9px; }
.rank-row { min-height: 43px; padding: 0 16px; border-top: 1px solid var(--dash-line); }
.rank-position, .rank-value { color: var(--dash-green); font-variant-numeric: tabular-nums; }.rank-value { text-align: right; }
.align-right { text-align: right; }.align-center { text-align: center; }
.rank-model { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ranking-empty { min-height: 215px; display: grid; place-items: center; align-content: center; padding: 20px; text-align: center; }
.ranking-empty strong { font-size: 12px; }.ranking-empty span { max-width: 320px; margin-top: 6px; color: var(--dash-muted); font-size: 10px; line-height: 1.45; }

.speed-table { min-height: 290px; padding: 0 16px 10px; overflow-x: auto; }
.speed-head, .speed-row { min-width: 760px; display: grid; grid-template-columns: minmax(150px, 1.2fr) 48px 48px minmax(190px, 2fr) 48px 48px 70px; gap: 10px; align-items: center; }
.speed-head { height: 35px; color: var(--dash-muted); font-size: 9px; }
.speed-row { min-height: 46px; border-top: 1px solid var(--dash-line); font-size: 10px; }
.speed-model { min-width: 0; display: flex; align-items: center; gap: 8px; }.speed-model span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-tone { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--dash-green); }
.model-tone.tone-green { background: var(--dash-green); }.model-tone.tone-amber { background: var(--dash-amber); }.model-tone.tone-silver { background: var(--dash-silver); }
.speed-number { text-align: right; font-variant-numeric: tabular-nums; }
.quantile-track { width: 100%; height: 22px; overflow: visible; }
.quantile-base { stroke: color-mix(in srgb, var(--dash-blue) 45%, var(--dash-line)); stroke-width: 1; vector-effect: non-scaling-stroke; }
.quantile-range { stroke: color-mix(in srgb, var(--dash-blue) 38%, transparent); stroke-linecap: round; stroke-width: 5; vector-effect: non-scaling-stroke; }
.quantile-median { stroke: var(--dash-ink); stroke-linecap: round; stroke-width: 5; vector-effect: non-scaling-stroke; }
.insufficient { grid-column: 2 / -1; color: var(--dash-muted); text-align: center; }

.dashboard-footnote { min-height: 36px; display: flex; align-items: center; gap: 18px; padding: 7px 14px; color: var(--dash-muted); font-size: 9px; }
.dashboard-footnote span:nth-child(2) { flex: 1; text-align: center; }.dashboard-footnote a { color: var(--dash-blue); text-decoration: none; }
.market-skeleton { min-height: 70px; border: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--dash-panel-strong) 85%, var(--dash-ink)), transparent); background-size: 200% 100%; animation: marketShimmer 1.4s infinite; }
.network-ribbon > .market-skeleton { grid-column: 1 / -1; }

@keyframes routePulse { from { left: 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } to { left: 100%; opacity: 0; } }
@keyframes marketShimmer { to { background-position: -200% 0; } }

@media (max-width: 1360px) {
  .market-primary { grid-template-columns: 1fr; }
  .market-primary > .market-panel:last-child { border-top: 0; border-left: 1px solid var(--dash-line); }
  .price-offers { min-height: 110px; }.panel-empty { min-height: 105px; }
}

@media (max-width: 1100px) {
  
  .network-stat { gap: 8px; padding: 10px 12px; }.network-stat strong { font-size: 14px; }
  .flow-stage { grid-template-columns: 150px 250px minmax(360px, 1fr); gap: 24px; }
  .integration-stack { width: 138px; }.integration-node { grid-template-columns: 36px 1fr; }.integration-node strong { font-size: 10px; }
  .route-core { grid-template-columns: 70px 60px 104px; transform: translateY(11px); }.core-mark { width: 92px; height: 92px; }.core-mark img { width: 84px; height: 84px; }
  .direction-area { width: min(100%, 430px); margin-right: 0; }
  .direction-head, .direction-row { grid-template-columns: minmax(150px, 1fr) 56px 70px minmax(90px, .8fr); gap: 8px; }
}

@media (max-width: 980px) {
  .market-lower { grid-template-columns: 1fr; }
  .market-lower > .market-panel + .market-panel { border-left: 1px solid var(--dash-line); }
  .network-ribbon { grid-template-columns: repeat(3, 1fr); }
  .network-stat:nth-child(3) { border-right: 0; }.network-stat:nth-child(-n+3) { border-bottom: 1px solid var(--dash-line); }
}

@media (max-width: 760px) {
  
  
  .market-shell { width: calc(100% - 12px); }
  .network-ribbon { grid-template-columns: repeat(2, 1fr); }
  .network-stat { min-height: 62px; padding: 9px 11px; border-bottom: 1px solid var(--dash-line); }.network-stat:nth-child(odd) { border-right: 1px solid var(--dash-line); }.network-stat:nth-child(even) { border-right: 0; }.network-stat:nth-last-child(-n+2) { border-bottom: 0; }
  .network-stat strong { font-size: 14px; }
  .flow-stage { min-height: auto; display: grid; grid-template-columns: 1fr; gap: 12px; padding: 12px; }
  #flow-canvas { display: none; }.integration-stack { width: 100%; grid-template-columns: repeat(3, 1fr); order: 1; }.integration-node { width: 100%; height: 42px; }.integration-node strong { font-size: 9px; }
  .route-core { width: 100%; order: 2; min-height: 100px; grid-template-columns: 72px 1fr 84px; transform: none; }.api-node { height: 72px; }.core-mark { width: 76px; height: 76px; }.core-mark img { width: 58px; height: 58px; }.ompera-core span { display: none; }
  .route-line { background: var(--dash-blue); }
  .direction-area { width: 100%; margin-right: 0; order: 3; grid-template-rows: auto; }.direction-head { display: none; }.direction-list { align-content: start; gap: 6px; }
  .direction-row { grid-template-columns: minmax(120px, 1fr) 56px 70px; min-height: 54px; }.direction-status { grid-column: 1 / -1; padding-left: 42px; }
  .direction-trend svg { display: none; }.flow-legend { gap: 10px; }
  .dashboard-footnote { display: grid; gap: 6px; }.dashboard-footnote span:nth-child(2) { text-align: left; }
}

@media (max-width: 460px) {
  
  .network-stat span { font-size: 9px; }
  .integration-stack { grid-template-columns: repeat(2, 1fr); }
  .direction-row { padding: 7px 8px; }.direction-icon { width: 28px; height: 28px; }.direction-value { font-size: 15px; }
  .flow-legend span:first-child { width: 100%; }
  .ranking-panel, .speed-panel { min-width: 0; }
}

@media (max-width: 340px) {
  .network-stat-icon { display: none; }
}
.market-dashboard .market-shell { padding-top: 16px; }
a.integration-node, a.api-node { color: inherit; text-decoration: none; transition: border-color .15s; }
a.integration-node:hover, a.integration-node:focus-visible, a.api-node:hover, a.api-node:focus-visible { border-color: var(--dash-blue); outline: none; }