/* Floating market map. Its scoped rules replace the previous grid view. */
:root { --bg: #151515; --header: #303030; --header-dark: #222222; }
html, body { background: #151515; }
.market-header { min-height: 64px; padding: 9px 12px; border-radius: 0; box-shadow: none; }
.brand-word { font-size: 1.9rem; }
.search-wrap { min-height: 42px; background: #191919; }
#asset-search { font-size: 1rem; }
.contact-link { padding: 10px 13px; font-size: 0.85rem; border-radius: 8px; }
.control-board { top: 64px; padding: 7px 10px; gap: 7px 12px; border-radius: 0 0 10px 10px; box-shadow: none; }
.control-button { min-height: 36px; padding: 0 12px; border-radius: 8px; font-size: 0.85rem; background: linear-gradient(#383838, #292929); }
.control-button.active { border-color: #9d7baf; background: #735680; color: #ffffff; box-shadow: none; }
.control-button:disabled { opacity: 0.35; cursor: default; }
.status-strip { grid-template-columns: minmax(250px, 1.5fr) repeat(4, minmax(100px, 0.55fr)); gap: 6px; margin-top: 7px; }
.status-strip .featured-card, .status-strip .stat-card { min-height: 68px; padding: 8px 12px; border-radius: 9px; box-shadow: none; background: #1c1c1c; }
.status-strip .featured-card { display: grid; grid-template-columns: auto 1fr; align-content: center; align-items: center; column-gap: 14px; grid-column: auto; }
.status-strip .featured-card .eyebrow { grid-column: 1 / -1; margin: 0 0 5px; font-size: 0.62rem; }
.status-strip .featured-card h1 { font-size: 1.55rem; letter-spacing: -0.03em; }
.status-strip .lead { display: none; }
.status-strip .quote-badges { gap: 5px; margin: 0; }
.status-strip .quote-badges span { padding: 4px 6px; font-size: 0.73rem; }
.status-strip .quote-badges span:last-child { display: none; }
.status-strip .stat-card p { margin: 0 0 5px; font-size: 0.59rem; }
.status-strip .stat-card strong { font-size: 1.3rem; line-height: 1; }
.status-strip .stat-card span { margin-top: 5px; font-size: 0.63rem; }
.status-strip .stat-card:last-child strong { font-size: 0.92rem; }
.status-strip .stat-card:last-child span { max-width: 170px; }
.status-strip .good-card { border-color: rgba(66, 214, 91, 0.25); }
.status-strip .bad-card { border-color: rgba(242, 97, 105, 0.25); }

.radar-shell { margin-top: 7px; border-radius: 10px; background: #141414; box-shadow: none; }
.radar-map-bar { min-height: 38px; padding: 6px 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 1px solid #292929; background: #1c1c1c; }
.radar-map-bar .radar-caption { position: static; gap: 12px; flex: 1; min-width: 0; }
.radar-map-bar .radar-caption span { padding: 0; border: 0; border-radius: 0; color: #c6c6c6; background: none; font-size: 0.72rem; white-space: nowrap; }
.radar-map-bar .radar-caption span:first-child { color: #eeeeee; }
.radar-map-actions { display: flex; gap: 6px; flex-shrink: 0; }
.map-button { padding: 4px 9px; min-height: 26px; border: 1px solid #464646; border-radius: 5px; background: #2d2d2d; color: #ececec; font: inherit; font-size: 0.7rem; cursor: pointer; }
.map-button:hover { border-color: #a3a3a3; }
.radar-shell .bubble-board { position: relative; display: block; width: 100%; height: 480px; min-height: 0; padding: 0; overflow: hidden; background: #141414; isolation: isolate; }
.radar-shell .market-bubble {
  --bubble-rgb: 66 214 91;
  position: absolute; top: 0; left: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--bubble-gap, 2px);
  width: 70px; height: 70px; min-width: 0; max-width: none; max-height: none; padding: 0;
  border: 1.5px solid rgb(var(--bubble-rgb) / 0.8); border-radius: 50%; container-type: inline-size;
  color: #ffffff; background: radial-gradient(circle at 46% 42%, rgb(var(--bubble-rgb) / 0.035) 35%, rgb(var(--bubble-rgb) / 0.12) 68%, rgb(var(--bubble-rgb) / 0.36) 92%, rgb(var(--bubble-rgb) / 0.48));
  box-shadow: inset 0 0 10px rgb(var(--bubble-rgb) / 0.28), 0 0 5px rgb(var(--bubble-rgb) / 0.13);
  animation: none; transition: filter 160ms ease, box-shadow 160ms ease; cursor: grab; touch-action: none; user-select: none;
}
.radar-shell .market-bubble.negative { --bubble-rgb: 242 97 105; }
.radar-shell .market-bubble.neutral { --bubble-rgb: 150 160 173; }
.radar-shell .market-bubble::before, .radar-shell .market-bubble::after { display: none; }
.radar-shell .market-bubble:hover, .radar-shell .market-bubble:focus-visible { z-index: 5; filter: brightness(1.18); box-shadow: inset 0 0 13px rgb(var(--bubble-rgb) / 0.5), 0 0 7px rgb(var(--bubble-rgb) / 0.4); }
.radar-shell .market-bubble.is-dragging { cursor: grabbing; z-index: 6; }
.radar-shell .market-bubble > * { position: relative; top: auto; bottom: auto; left: auto !important; transform: none; flex: 0 0 auto; margin: 0; pointer-events: none; }
.radar-shell .asset-logo { width: 21cqw; height: 21cqw; max-width: 36px; max-height: 36px; object-fit: contain; border-radius: 50%; filter: none; }
.radar-shell .bubble-symbol { display: block; width: 88%; max-width: 88%; min-height: 0; color: #ffffff; font-size: clamp(7px, 19cqw, 34px); font-weight: 500; line-height: 1.02; letter-spacing: -0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 4px #000000; }
.radar-shell .bubble-change { width: 90%; font-size: clamp(7px, 15cqw, 28px); font-weight: 450; line-height: 1.1; letter-spacing: -0.035em; text-shadow: 0 1px 4px #000000; }
.radar-shell .bubble-price { display: block; width: 84%; max-width: 84%; margin-top: 1cqw; padding: 0; border: 0; background: none; color: #c5c5c5; font-size: clamp(6px, 8cqw, 13px); font-weight: 500; line-height: 1.2; white-space: nowrap; text-shadow: none; }
.radar-shell .market-bubble.is-small .bubble-price, .radar-shell .market-bubble.is-tiny .asset-logo, .radar-shell .market-bubble.is-tiny .bubble-change { display: none; }
.radar-hint { margin: 0; padding: 7px 10px; border-top: 1px solid #292929; color: #929292; font-size: 0.66rem; text-align: center; }
.radar-shell .empty-state { height: 100%; min-height: 0; padding: 20px; }

@media (max-width: 1000px) {
  .status-strip { grid-template-columns: minmax(200px, 1.3fr) repeat(4, minmax(70px, 0.6fr)); }
  .status-strip .featured-card { display: block; }
  .status-strip .featured-card h1 { display: inline; font-size: 1.25rem; }
  .status-strip .quote-badges { display: inline-flex; margin-left: 6px; }
  .status-strip .quote-badges span { font-size: 0.6rem; }
}
@media (max-width: 820px) {
  .market-header { position: relative; min-height: 0; gap: 8px; padding: 9px; }
  .brand-word { font-size: 1.6rem; }
  .contact-link { padding: 8px 10px; font-size: 0.75rem; }
  .search-wrap { min-height: 38px; padding: 0 10px; }
  #asset-search { font-size: 0.86rem; }
  .control-board { top: 0; padding: 6px; }
  .control-board .control-button { min-height: 33px; padding: 0 10px; font-size: 0.75rem; }
  .status-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .status-strip .featured-card { display: none; }
  .status-strip .stat-card { min-height: 59px; padding: 8px; }
  .status-strip .stat-card strong { font-size: 1.1rem; }
  .status-strip .stat-card:last-child strong { font-size: 0.78rem; line-height: 1.15; }
  .status-strip .stat-card:last-child span { display: none; }
  .radar-map-bar { padding: 6px 8px; flex-wrap: wrap; }
  .radar-map-bar .radar-caption { gap: 7px; }
  .radar-map-bar .radar-caption span { font-size: 0.62rem; }
  .radar-map-actions { margin-left: auto; }
  .radar-hint { font-size: 0.59rem; }
}