.sector-heatmap-card {
  position: relative; margin: 1.4rem 0 1rem; padding: 1.1rem; overflow: visible;
  border: 1px solid rgba(32,215,243,.18); border-radius: 20px;
  background: linear-gradient(145deg, rgba(20,27,36,.98), rgba(14,21,29,.98));
  box-shadow: 0 30px 80px rgba(0,0,0,.25);
}
.sector-heatmap-card__header { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; padding: .25rem .2rem 1rem; }
.sector-heatmap-card__header h2 { margin: .3rem 0 .45rem; color: #fff; font-size: clamp(1.35rem, 3vw, 2rem); letter-spacing: -.03em; }
.sector-heatmap-card__header p { max-width: 720px; margin: 0; color: var(--app-muted); font-size: .72rem; line-height: 1.6; }
.sector-heatmap-summary { display: flex; gap: .45rem; flex-wrap: wrap; justify-content: flex-end; }
.sector-heatmap-summary span { display: inline-flex; align-items: center; gap: .3rem; padding: .38rem .55rem; border: 1px solid var(--app-border); border-radius: 8px; color: var(--app-muted); font-size: .58rem; white-space: nowrap; }
.sector-heatmap-summary b { color: #fff; }.sector-heatmap-summary .is-cheap b { color: var(--app-green); }.sector-heatmap-summary .is-expensive b { color: var(--app-red); }
.sector-heatmap-legend { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: .55rem; padding: 0 .15rem .7rem; color: var(--app-muted); font-size: .56rem; }
.sector-heatmap-legend i { height: 3px; border-radius: 99px; }.sector-heatmap-legend i:first-of-type { background: linear-gradient(90deg, #22c55e, #64748b); }.sector-heatmap-legend i:last-of-type { background: linear-gradient(90deg, #64748b, #ef4444); }
.sector-heatmap-stage { position: relative; height: clamp(430px, 52vw, 620px); overflow: hidden; border: 1px solid rgba(255,255,255,.06); border-radius: 14px; background: #0b1118; }
.sector-heatmap-tile { position: absolute; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; min-width: 0; min-height: 0; padding: .85rem; overflow: hidden; border: 2px solid #0b1118; border-radius: 6px; color: #fff; font: inherit; text-align: left; cursor: pointer; transition: filter .15s, transform .15s, box-shadow .15s; }
.sector-heatmap-tile:hover, .sector-heatmap-tile:focus-visible { z-index: 2; outline: none; filter: brightness(1.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 8px 24px rgba(0,0,0,.3); }
.sector-heatmap-tile:focus-visible { outline: 2px solid var(--app-cyan); outline-offset: -4px; }
.sector-heatmap-tile__head { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; }
.sector-heatmap-tile__head strong { max-width: 75%; font-size: clamp(.68rem, 1.2vw, .95rem); line-height: 1.2; text-shadow: 0 1px 5px rgba(0,0,0,.3); }
.sector-heatmap-tile__head b { padding: .18rem .35rem; border: 1px solid rgba(255,255,255,.16); border-radius: 6px; background: rgba(7,12,17,.2); font-size: .62rem; white-space: nowrap; }
.sector-heatmap-tile__metrics { display: flex; gap: .65rem; align-items: flex-end; }
.sector-heatmap-tile__metrics span { display: block; color: rgba(255,255,255,.72); font-size: .55rem; }.sector-heatmap-tile__metrics b { display: block; margin-top: .1rem; color: #fff; font-size: .72rem; }
.sector-heatmap-tile.is-compact { padding: .6rem; }.sector-heatmap-tile.is-compact .sector-heatmap-tile__metrics span:last-child { display: none; }.sector-heatmap-tile.is-compact .sector-heatmap-tile__head strong { max-width: 100%; font-size: .66rem; }.sector-heatmap-tile.is-compact .sector-heatmap-tile__head b { font-size: .52rem; }
.sector-heatmap-tile.is-micro { justify-content: center; padding: .4rem; }.sector-heatmap-tile.is-micro .sector-heatmap-tile__metrics, .sector-heatmap-tile.is-micro .sector-heatmap-tile__head b { display: none; }.sector-heatmap-tile.is-micro .sector-heatmap-tile__head strong { max-width: 100%; font-size: .58rem; }
.sector-heatmap-tooltip { position: fixed; z-index: 2400; width: min(270px, calc(100vw - 1rem)); box-sizing: border-box; padding: .85rem; pointer-events: none; border: 1px solid rgba(32,215,243,.22); border-radius: 12px; background: rgba(14,21,29,.98); box-shadow: 0 18px 50px rgba(0,0,0,.45); color: var(--app-muted); }
.sector-heatmap-tooltip h3 { margin: 0 0 .2rem; color: #fff; font-size: .85rem; }.sector-heatmap-tooltip > p { margin: 0 0 .7rem; font-size: .58rem; }
.sector-tooltip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }.sector-tooltip-grid span { padding: .45rem; border-radius: 7px; background: rgba(255,255,255,.03); font-size: .54rem; }.sector-tooltip-grid b { display: block; margin-top: .12rem; color: #fff; font-size: .65rem; }
.sector-heatmap-card > footer { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem .15rem 0; color: rgba(145,165,178,.68); font-size: .56rem; }.sector-heatmap-card > footer i { margin-right: .3rem; color: var(--app-cyan); }
.sector-detail-table { margin-top: 1rem; border: 1px solid var(--app-border); border-radius: 14px; background: rgba(20,27,36,.5); }
.sector-detail-table > summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 1rem; color: #fff; font-size: .72rem; font-weight: 700; cursor: pointer; list-style: none; }.sector-detail-table > summary::-webkit-details-marker { display: none; }.sector-detail-table > summary i { margin-right: .45rem; color: var(--app-cyan); }.sector-detail-table > summary small { color: var(--app-muted); font-size: .58rem; font-weight: 500; }.sector-detail-table[open] > summary { border-bottom: 1px solid var(--app-border); }.sector-detail-table .sc-table-wrap { border-radius: 0 0 13px 13px; }

@media (max-width: 700px) {
  .sector-heatmap-card { padding: .7rem; }.sector-heatmap-card__header { align-items: flex-start; flex-direction: column; gap: .8rem; }.sector-heatmap-summary { justify-content: flex-start; }
  .sector-heatmap-legend { grid-template-columns: auto 1fr auto; }.sector-heatmap-legend i:last-of-type, .sector-heatmap-legend span:nth-of-type(2) { display: none; }
  .sector-heatmap-stage.is-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); height: auto; min-height: 0; gap: .4rem; padding: .4rem; }
  .sector-heatmap-stage.is-list .sector-heatmap-tile { position: relative; inset: auto !important; width: 100% !important; min-height: 112px !important; border-width: 0; border-radius: 9px; }
  .sector-heatmap-stage.is-list .sector-heatmap-tile__metrics { display: flex; }.sector-heatmap-stage.is-list .sector-heatmap-tile__head b { display: block; }
  .sector-heatmap-stage.is-list .sector-heatmap-tile__head { flex-direction: column; }
  .sector-heatmap-stage.is-list .sector-heatmap-tile__head strong { max-width: 100%; font-size: .72rem; }
  .sector-heatmap-stage.is-list .sector-heatmap-tile__head b { font-size: .58rem; }
  .sector-heatmap-stage.is-list .sector-heatmap-tile__metrics span { font-size: .55rem; }
  .sector-heatmap-stage.is-list .sector-heatmap-tile__metrics b { font-size: .68rem; }
  .sector-detail-table > summary small { display: none; }
}

@media (max-width: 340px) {
  .sector-heatmap-stage.is-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) { .sector-heatmap-tile { transition: none; } }