.heatmap-container{position:relative;overflow:auto;background-color:white;border-radius:8px;border:1px solid #e5e7eb;min-height:400px}.heatmap-cell{position:absolute;transition:background-color .3s ease,transform .2s ease,box-shadow .2s ease;border-radius:2px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px;box-sizing:border-box;user-select:none}.heatmap-cell:hover{transform:scale(1.02);box-shadow:0 4px 12px rgba(0,0,0,.15);z-index:10}.heatmap-cell:active{transform:scale(.98)}.heatmap-cell:hover .hover-overlay{opacity:1}.sector-boundary{position:absolute;border:2px solid rgba(100,116,139,.3);border-radius:4px;pointer-events:none;z-index:1;transition:border-color .3s ease}.sector-boundary:hover{border-color:rgba(100,116,139,.6)}.sector-label{position:absolute;top:8px;left:8px;font-size:14px;font-weight:600;color:#374151;text-shadow:0 1px 2px rgba(255,255,255,.8);z-index:2;pointer-events:none;background:rgba(255,255,255,.8);padding:2px 6px;border-radius:4px;backdrop-filter:blur(4px)}.heatmap-cell .logo-container{display:flex;align-items:center;justify-content:center;margin-bottom:4px;transition:transform .2s ease}.heatmap-cell:hover .logo-container{transform:scale(1.05)}.heatmap-cell .symbol-text{font-weight:700;color:#111827;margin-bottom:2px}.heatmap-cell .percentage-text,.heatmap-cell .symbol-text{text-align:center;text-shadow:0 1px 2px rgba(255,255,255,.8);line-height:1;transition:all .2s ease}.heatmap-cell .percentage-text{font-weight:600}.heatmap-cell .percentage-text.positive{color:#059669}.heatmap-cell .percentage-text.negative{color:#dc2626}.heatmap-cell .percentage-text.neutral{color:#6b7280}.hover-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,.1);opacity:0;transition:opacity .2s ease;pointer-events:none}.connection-status{position:absolute;top:8px;right:8px;z-index:20;display:inline-flex;align-items:center;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:500}.connection-status.connected{background-color:#dcfce7;color:#166534}.connection-status.disconnected{background-color:#fee2e2;color:#991b1b}.connection-status-dot{width:8px;height:8px;border-radius:50%;margin-right:4px}.connection-status-dot.connected{background-color:#22c55e}.connection-status-dot.disconnected{background-color:#ef4444}.heatmap-tooltip{position:absolute;background-color:#1f2937;color:white;padding:12px;border-radius:8px;box-shadow:0 10px 25px rgba(0,0,0,.3);font-size:14px;pointer-events:none;z-index:30;max-width:250px}.heatmap-tooltip .tooltip-title{font-weight:600;margin-bottom:4px}.heatmap-tooltip .tooltip-symbol{color:#d1d5db;margin-bottom:8px}.heatmap-tooltip .tooltip-details{display:flex;flex-direction:column;gap:2px}.heatmap-tooltip .tooltip-price{color:white}.heatmap-tooltip .tooltip-change.positive{color:#10b981}.heatmap-tooltip .tooltip-change.negative{color:#f87171}.heatmap-tooltip .tooltip-market-cap{color:#9ca3af}.heatmap-legend{display:flex;justify-content:center;padding:12px;border-top:1px solid #e5e7eb;background-color:#f9fafb}@media (max-width:768px){.sector-label{font-size:12px;padding:1px 4px}.heatmap-tooltip{font-size:12px;padding:8px;max-width:200px}.connection-status{font-size:10px;padding:2px 6px}}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.heatmap-cell{animation:fadeIn .3s ease-out}.heatmap-cell:focus{outline:2px solid #3b82f6;outline-offset:2px}@media (prefers-contrast:high){.heatmap-cell{border:1px solid #000}.sector-boundary{border-width:3px;border-color:#000}.heatmap-tooltip{border:1px solid #fff}}@media (prefers-reduced-motion:reduce){.heatmap-cell,.hover-overlay,.logo-container,.sector-boundary{transition:none}.heatmap-cell:hover{transform:none}}