.market-overview-root[hidden] { display: none; }
.market-overview-state {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 360px; margin-top: 8px; padding: 28px;
  color: var(--text-sub); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.market-overview-state.is-error { flex-direction: column; color: var(--danger-text); }
.market-overview-state.is-error span { color: var(--text-sub); }
.market-overview-state .btn { margin-top: 8px; }
.market-overview-card {
  margin-top: 8px; overflow: hidden; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.market-overview-title {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
}
.market-overview-title h1 { margin: 0; font-size: 20px; line-height: 1.25; }
.market-overview-title p { margin: 4px 0 0; color: var(--text-sub); font-size: 12px; }
.market-live-badge {
  flex: 0 0 auto; padding: 4px 9px; color: var(--down); background: var(--down-bg);
  border: 1px solid color-mix(in srgb, var(--down) 26%, transparent); border-radius: 999px;
  font-size: 11px; font-weight: 700;
}
.market-live-badge::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: currentColor; }
.market-overview-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr); }
.market-focus-panel, .market-temperature-panel { min-width: 0; padding: 20px 22px 24px; }
.market-focus-panel { border-right: 1px solid var(--border); }
.market-section-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.market-section-head h2 { margin: 0; font-size: 15px; }
.market-section-head span { margin-left: auto; color: var(--text-weak); font-size: 11px; font-variant-numeric: tabular-nums; }
.market-focus-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.market-focus-item {
  display: grid; grid-template-columns: 24px minmax(0,1fr) auto auto; grid-template-rows:auto auto; align-items: center; gap: 7px;
  width: 100%; min-height: 40px; padding: 7px 8px; overflow: hidden;
  color: var(--text); background: var(--surface-2); border: 1px solid transparent; border-radius: 8px;
  text-align: left; transition: border-color .15s, background-color .15s, transform .15s;
}
.market-focus-item:hover { color: var(--brand); background: var(--brand-weak); border-color: var(--info-border); transform: translateY(-1px); }
.market-focus-item:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.market-focus-rank {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px;
  color: var(--text-sub); background: var(--surface); font-size: 11px; font-weight: 800;
}
.market-focus-name { overflow: hidden; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.market-focus-score { color: var(--text); font-size: 12px; font-variant-numeric: tabular-nums; }
.market-focus-score.is-hot, .market-focus-score.is-warm { color: #f4d51f; font-weight: 850; }
.market-focus-score.is-neutral { color: var(--text); }
.market-focus-delta { grid-column: 4; grid-row: 1; font-size: 11px; font-weight: 850; font-variant-numeric: tabular-nums; white-space: nowrap; }
.market-focus-delta.is-up { color: var(--up); }
.market-focus-delta.is-down { color: var(--down); }
.market-focus-item small { grid-column: 2 / -1; margin-top: -4px; color: var(--text-weak); font-size: 10px; }
.market-temperature-visual { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 22px; }
.market-temperature-ring {
  position: relative; width: 210px; height: 210px; margin: 0 auto; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(127,127,127,.16), 0 12px 30px rgba(20,30,50,.12);
  transform: rotate(-90deg);
}
.market-temperature-core {
  position: absolute; inset: 27px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 50%; background: var(--surface);
  box-shadow: 0 5px 20px rgba(20,30,50,.18); transform: rotate(90deg);
}
.market-weather { min-height: 24px; font-size: 18px; letter-spacing: 2px; }
.market-temperature-core strong { font-size: 34px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.market-temperature-core small { margin-top: 4px; color: var(--text-sub); font-size: 10px; }
.market-band-grid { display: grid; grid-template-columns: repeat(9, minmax(20px,1fr)); align-items: end; gap: 4px; min-width: 0; }
.market-band { min-width: 0; color: var(--text-sub); text-align: center; font-size: 9px; }
.market-band > strong { display: block; margin-bottom: 4px; color: var(--text); font-size: 10px; font-variant-numeric: tabular-nums; }
.market-band-track { display: flex; align-items: flex-end; justify-content: center; height: 78px; }
.market-band-bar { display: block; width: min(18px, 80%); min-height: 4px; border-radius: 3px 3px 1px 1px; }
.market-band > span:last-child { display: block; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.market-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
.market-summary-item { padding: 9px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; }
.market-summary-item span { display: block; color: var(--text-sub); font-size: 10px; }
.market-summary-item strong { display: block; margin-top: 2px; font-size: 16px; font-variant-numeric: tabular-nums; }
.market-summary-item.is-up strong { color: var(--up); }
.market-summary-item.is-down strong { color: var(--down); }
.market-summary-item.is-flat strong { color: var(--flat); }
.market-suggestion { display: flex; align-items: baseline; gap: 9px; margin: 10px 0 0; padding: 10px 12px; background: var(--brand-weak); border-radius: 8px; }
.market-suggestion span { flex: 0 0 auto; color: var(--brand); font-size: 10px; }
.market-suggestion strong { font-size: 12px; }
.market-overview-disclaimer { margin: 0; padding: 10px 22px; color: var(--text-weak); border-top: 1px solid var(--border); font-size: 10px; text-align: center; }

@media (max-width: 1040px) {
  .market-overview-layout { grid-template-columns: 1fr; }
  .market-focus-panel { border-right: 0; border-bottom: 1px solid var(--border); }
  .market-temperature-visual { grid-template-columns: minmax(200px,.7fr) minmax(320px,1.3fr); }
}
@media (max-width: 680px) {
  .market-overview-title { padding: 15px 14px; }
  .market-focus-panel, .market-temperature-panel { padding: 16px 14px 19px; }
  .market-focus-grid { grid-template-columns: 1fr; }
  .market-temperature-visual { grid-template-columns: 1fr; gap: 16px; }
  .market-temperature-ring { width: min(210px, 62vw); height: min(210px, 62vw); }
  .market-band-grid { width: 100%; gap: 2px; }
  .market-band-bar { width: min(13px, 78%); }
  .market-band > span:last-child { font-size: 8px; }
  .market-summary-grid { grid-template-columns: repeat(2, 1fr); }
  .market-section-head { align-items: flex-start; flex-direction: column; gap: 3px; }
  .market-section-head span { margin-left: 0; }
}