.forecast-panel {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%) scale(0.9);width: 90%;max-width: 400px;max-height: 80vh;background: #fff;box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);border-radius: 16px;z-index: 1001;opacity: 0;visibility: hidden;transition: transform 0.3s ease-out, opacity 0.3s ease-out, visibility 0.3s;display: flex;flex-direction: column;overflow: hidden}
.forecast-panel.active {transform: translate(-50%, -50%) scale(1);opacity: 1;visibility: visible}
@media (max-width: 768px) {.forecast-panel {width: 95%;max-height: 85vh}}
.forecast-panel-overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.5);z-index: 1000;opacity: 1;transition: opacity 0.3s ease}
.forecast-panel-overlay.hidden {opacity: 0;pointer-events: none}
.forecast-panel-header {display: flex;justify-content: space-between;align-items: center;padding: 10px 14px;background: linear-gradient(135deg, #1976D2, #2196F3);color: #fff;flex-shrink: 0}
.forecast-panel-title {display: flex;align-items: center;gap: 6px;font-size: 14px;font-weight: bold}
.forecast-panel-icon {display: flex;align-items: center}
.forecast-panel-icon svg {width: 18px;height: 18px}
.forecast-panel-close {background: none;border: none;color: #fff;font-size: 24px;cursor: pointer;padding: 0;line-height: 1;opacity: 0.8;transition: opacity 0.2s}
.forecast-panel-close:hover {opacity: 1}
.forecast-panel-loading {display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 40px 20px;flex: 1}
.forecast-loading-spinner {width: 40px;height: 40px;border: 3px solid #e0e0e0;border-top-color: #1976D2;border-radius: 50%;animation: spin 1s linear infinite}
@keyframes spin {to {transform: rotate(360deg)}}
.forecast-panel-loading p {margin-top: 16px;color: #666;font-size: 14px}
.forecast-panel-error {display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 40px 20px;text-align: center;flex: 1}
.forecast-panel-error p {color: #d32f2f;margin-bottom: 16px;font-size: 14px}
.forecast-retry-btn {background: #1976D2;color: #fff;border: none;padding: 10px 24px;border-radius: 6px;cursor: pointer;font-size: 14px;transition: background 0.2s}
.forecast-retry-btn:hover {background: #1565C0}
.forecast-panel-content {flex: 1;overflow-y: auto;display: flex;flex-direction: column}
.forecast-station-info {display: flex;flex-wrap: wrap;gap: 6px;padding: 8px 12px;background: #f5f5f5;border-bottom: 1px solid #e0e0e0}
.station-badge {display: inline-flex;align-items: center;gap: 4px;padding: 3px 8px;background: #fff;border-radius: 12px;font-size: 11px;color: #555;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)}
.station-badge svg {flex-shrink: 0}
.station-badge--remaining {background: #e8f4fd;color: #1976D2;font-weight: 600}
.station-badge--remaining.station-badge--warning {background: #fef3cd;color: #d97706}
.forecast-favorite-area {background: #f5f5f5}
.forecast-favorite-area:empty,
.forecast-favorite-area.hidden {display: none}
.forecast-fav-bar {display: flex;align-items: center;justify-content: space-between;padding: 6px 14px;background: linear-gradient(90deg, #fffbeb 0%, #fef3c7 50%, #fffbeb 100%);border-bottom: 1px solid #fde68a;gap: 8px}
.forecast-fav-bar-left {display: flex;align-items: center;gap: 6px;flex: 1;min-width: 0}
.forecast-fav-bar-star {flex-shrink: 0;display: flex;align-items: center}
.forecast-fav-bar-star svg {width: 14px;height: 14px}
.forecast-fav-bar-name {font-size: 12px;font-weight: 600;color: #92400e;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
button.forecast-fav-bar--add {width: 100%;border: none;border-bottom: 1px solid #e5e7eb;background: linear-gradient(90deg, #f9fafb 0%, #f3f4f6 50%, #f9fafb 100%);cursor: pointer;transition: all 0.2s;text-align: left;font: inherit}
button.forecast-fav-bar--add:hover {background: linear-gradient(90deg, #fffbeb 0%, #fef3c7 50%, #fffbeb 100%);border-bottom-color: #fde68a}
.forecast-fav-bar-add-text {font-size: 12px;color: #6b7280;font-weight: 500;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.forecast-fav-bar-edit-btn {display: flex;align-items: center;justify-content: center;width: 26px;height: 26px;padding: 0;border-radius: 6px;background: none;color: #b45309;border: none;cursor: pointer;transition: background 0.2s, color 0.2s;flex-shrink: 0}
.forecast-fav-bar-edit-btn:hover {background: rgba(245, 158, 11, 0.2);color: #92400e}
.forecast-fav-bar-actions {display: flex;align-items: center;gap: 4px;flex-shrink: 0}
.forecast-fav-bar-delete-btn {display: flex;align-items: center;justify-content: center;width: 26px;height: 26px;padding: 0;border-radius: 6px;background: none;color: #9ca3af;border: none;cursor: pointer;transition: background 0.2s, color 0.2s;flex-shrink: 0}
.forecast-fav-bar-delete-btn:hover {color: var(--color-danger-dark);background: rgba(220, 38, 38, 0.08)}
.forecast-fav-bar-confirm {display: flex;align-items: center;justify-content: space-between;padding: 6px 14px;background: linear-gradient(90deg, #fef2f2 0%, #fee2e2 50%, #fef2f2 100%);border-bottom: 1px solid #fca5a5;gap: 8px;animation: favBarSlideDown 0.15s ease-out}
.forecast-fav-bar-confirm-left {display: flex;align-items: center;gap: 6px;flex: 1;min-width: 0}
.forecast-fav-bar-confirm-icon {flex-shrink: 0;display: flex;align-items: center;color: var(--color-danger-dark)}
.forecast-fav-bar-confirm-icon svg {width: 14px;height: 14px}
.forecast-fav-bar-confirm-text {font-size: 12px;color: #991b1b;font-weight: 500;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.forecast-fav-bar-confirm-actions {display: flex;gap: 6px;flex-shrink: 0}
.forecast-fav-bar-confirm-delete {padding: 3px 10px;border-radius: 6px;font-size: 11px;font-weight: 600;background: var(--color-danger-dark);color: #fff;border: none;cursor: pointer;white-space: nowrap;transition: background 0.2s}
.forecast-fav-bar-confirm-delete:hover {background: #b91c1c}
.forecast-fav-bar-confirm-delete:disabled {background: #f87171;cursor: not-allowed}
.forecast-fav-bar-confirm-cancel {padding: 3px 10px;border-radius: 6px;font-size: 11px;font-weight: 600;background: #fff;color: #6b7280;border: 1px solid #d1d5db;cursor: pointer;white-space: nowrap;transition: background 0.2s}
.forecast-fav-bar-confirm-cancel:hover {background: #f9fafb}
.forecast-fav-bar-add-btn {padding: 3px 10px;border-radius: 6px;font-size: 11px;font-weight: 600;white-space: nowrap;background: #1976D2;color: #fff;pointer-events: none}
.forecast-fav-bar-form {display: flex;align-items: center;padding: 6px 12px;background: #fffbeb;border-bottom: 1px solid #fde68a;gap: 6px;animation: favBarSlideDown 0.15s ease-out}
@keyframes favBarSlideDown {from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }}
.forecast-fav-bar-input {flex: 1;min-width: 0;max-width: 100%;box-sizing: border-box;padding: 5px 8px;border: 1.5px solid #fde68a;border-radius: 6px;font-size: 12px;background: #fff;outline: none;transition: border-color 0.2s}
.forecast-fav-bar-input:focus {border-color: var(--color-warning);box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.12)}
.forecast-fav-bar-save {padding: 5px 12px;background: var(--color-warning);color: #fff;border: none;border-radius: 6px;font-size: 11px;font-weight: 600;cursor: pointer;white-space: nowrap;min-width: 48px;text-align: center;transition: background 0.2s}
.forecast-fav-bar-save:hover {background: #d97706}
.forecast-fav-bar-save:disabled {background: #fcd34d;cursor: not-allowed}
.forecast-fav-bar-cancel {display: flex;align-items: center;justify-content: center;width: 24px;height: 24px;padding: 10px;margin: -10px;margin-left: -4px;background: none;border: none;color: #9ca3af;cursor: pointer;border-radius: 4px;transition: color 0.2s, background 0.2s}
.forecast-fav-bar-cancel:hover {color: #374151;background: #f3f4f6}
.forecast-tabs {display: flex;border-bottom: 1px solid #e0e0e0;flex-shrink: 0}
.forecast-tab {flex: 1;padding: 8px 12px;background: none;border: none;border-bottom: 2px solid transparent;cursor: pointer;font-size: 13px;font-weight: 500;color: #666;transition: all 0.2s}
.forecast-tab:hover {background: #f5f5f5;color: #333}
.forecast-tab.active {color: #1976D2;border-bottom-color: #1976D2}
.forecast-day-content {flex: 1;padding: 10px 12px;overflow-y: auto}
.forecast-section {margin-bottom: 12px;padding-bottom: 10px;border-bottom: 1px solid #eee}
.forecast-section:last-child {border-bottom: none;margin-bottom: 0}
.section-title {font-size: 12px;font-weight: bold;color: #333;margin-bottom: 8px}
.no-data {color: #999;font-size: 11px;text-align: center;padding: 8px}
.forecast-panel .weather-info-section {background: linear-gradient(135deg, #fef9e7 0%, #e0f2fe 50%, #fef9e7 100%);border-radius: 10px;padding: 10px;margin-bottom: 8px}
.forecast-panel .weather-main {display: flex;align-items: flex-start;gap: 8px}
.forecast-panel .weather-main-icon {width: 32px;height: 32px;display: flex;align-items: center;justify-content: center;flex-shrink: 0}
.forecast-panel .weather-main-icon svg {width: 28px;height: 28px}
.forecast-panel .weather-main-content {flex: 1;min-width: 0;display: flex;flex-direction: column;gap: 4px}
.forecast-panel .weather-main-category {font-size: 11px;font-weight: 500;color: #4b5563;line-height: 1.5}
.forecast-panel .weather-main-category .weather-sunny {color: #d97706}
.forecast-panel .weather-main-category .weather-cloudy {color: #6b7280}
.forecast-panel .weather-main-category .weather-rainy {color: var(--color-primary-dark)}
.forecast-panel .weather-main-category .weather-snowy {color: #0891b2}
.forecast-panel .weather-main-category .weather-thunder {color: var(--color-danger-dark)}
.forecast-panel .weather-main-category .weather-connector {color: #6b7280}
.forecast-panel .weather-temp-row {display: flex;align-items: center;gap: 8px}
.forecast-panel .weather-main-temp {font-size: 15px;font-weight: 700}
.forecast-panel .weather-temp-range {display: flex;align-items: baseline;gap: 3px;font-size: 15px;font-weight: 700}
.forecast-panel .weather-temp-range .temp-min {color: var(--color-primary)}
.forecast-panel .weather-temp-range .temp-separator {color: #9ca3af;font-weight: normal}
.forecast-panel .weather-temp-range .temp-max {color: var(--color-danger)}
.forecast-panel .weather-pop-item {display: flex;align-items: center;gap: 3px;background: rgba(255, 255, 255, 0.7);padding: 2px 6px;border-radius: 4px}
.forecast-panel .weather-pop-icon {display: flex;align-items: center;color: var(--color-primary)}
.forecast-panel .weather-pop-icon svg {width: 14px;height: 14px}
.forecast-panel .weather-pop-value {font-size: 11px;font-weight: 600;color: var(--color-primary)}
.forecast-panel .tide-graph-container svg {width: 100%;height: 100%}
.forecast-panel .tide-times-row {display: flex;justify-content: space-around;font-size: 10px;color: #666;flex-wrap: wrap;gap: 4px;padding: 6px;background: rgba(255, 255, 255, 0.5);border-radius: 6px}
.forecast-panel button.tide-times-row.tide-times-clickable {width: 100%;border: none;cursor: pointer;transition: background 0.2s}
.forecast-panel button.tide-times-row.tide-times-clickable:hover {background: rgba(255, 255, 255, 0.8)}
.forecast-panel button.tide-times-row.tide-times-clickable:active {background: rgba(255, 255, 255, 1)}
.forecast-panel .tide-time-item {display: flex;flex-direction: column;align-items: center;min-width: 50px}
.forecast-panel .tide-time-label {font-weight: 600;font-size: 9px}
.forecast-panel .tide-time-item.high-tide .tide-time-label {color: #1976D2}
.forecast-panel .tide-time-item.low-tide .tide-time-label {color: #e65100}
.forecast-panel .tide-time-value {font-size: 11px;color: #333;font-weight: 600}
.forecast-panel .tide-level-value {font-size: 9px;color: #666}
.forecast-panel .tide-info-block {background: linear-gradient(135deg, #e8f4fd 0%, #fef9e7 50%, #e8f4fd 100%);border-radius: 8px;padding: 8px;margin-bottom: 8px}
.forecast-panel .tide-info-block .tide-graph-section {background: transparent;padding: 0;margin-bottom: 0;border-radius: 0}
.forecast-panel .tide-info-block .tide-graph-container {position: relative;height: 40px;background: rgba(255, 255, 255, 0.5);border-radius: 6px;margin-bottom: 8px}
.forecast-panel .sun-tide-compact {padding: 0 0 6px 0}
.forecast-panel .sun-tide-row {display: flex;justify-content: space-between;align-items: center;gap: 6px}
.forecast-panel .sun-item,
.forecast-panel .tide-item {display: flex;flex-direction: column;align-items: center;gap: 1px;flex: 1;min-width: 0}
.forecast-panel .sun-item svg,
.forecast-panel .tide-item svg {width: 16px;height: 16px;flex-shrink: 0}
.forecast-panel .tide-trigger {display: flex;flex-direction: column;align-items: center;gap: 1px}
.forecast-panel .sun-tide-label {font-size: 9px;color: #6b7280;font-weight: 500}
.forecast-panel .sun-tide-value {font-size: 11px;font-weight: 600;color: #1f2937}
.forecast-panel .sun-item-clickable {background: none;border: none;padding: 4px;margin: -4px;border-radius: 8px;cursor: pointer;transition: background 0.2s}
.forecast-panel .sun-item-clickable:hover {background: rgba(0, 0, 0, 0.05)}
.forecast-panel .sun-item-clickable:active {background: rgba(0, 0, 0, 0.1)}
.forecast-panel .tide-item-clickable {background: none;border: none;padding: 4px;margin: -4px;border-radius: 8px;cursor: pointer;transition: background 0.2s}
.forecast-panel .tide-item-clickable:hover {background: rgba(0, 0, 0, 0.05)}
.forecast-panel .tide-item-clickable:active {background: rgba(0, 0, 0, 0.1)}
.forecast-panel .wind-info-section {background: linear-gradient(135deg, #e0f2fe 0%, #f0fdf4 50%, #e0f2fe 100%);border-radius: 10px;padding: 10px;margin-bottom: 8px}
.forecast-panel .wind-main-clickable {display: block;width: 100%;background: transparent;border: none;padding: 0;text-align: left;cursor: pointer;border-radius: 6px;transition: background 0.2s}
.forecast-panel .wind-main-clickable:hover {background: rgba(255, 255, 255, 0.5)}
.forecast-panel .wind-main-clickable:active {background: rgba(255, 255, 255, 0.8)}
.forecast-panel .wind-main {display: flex;align-items: center;gap: 8px}
.forecast-panel .wind-main-icon {width: 32px;height: 32px;display: flex;align-items: center;justify-content: center;border-radius: 8px;flex-shrink: 0}
.forecast-panel .wind-main-icon svg {width: 18px;height: 18px}
.forecast-panel .wind-main-text {display: flex;flex-direction: column;gap: 1px}
.forecast-panel .wind-main-value {font-size: 14px;font-weight: 700;display: flex;align-items: center;gap: 3px}
.forecast-panel .wind-main-label {font-size: 10px;color: #6b7280;font-weight: 500}
.forecast-panel .wind-direction-arrow {width: 14px;height: 14px;flex-shrink: 0}
.forecast-panel .wind-periods {display: flex;gap: 6px;margin-top: 8px;padding-top: 8px;border-top: 1px solid rgba(0, 0, 0, 0.06)}
.forecast-panel .wind-period-item {display: flex;align-items: center;gap: 6px;background: rgba(255, 255, 255, 0.7);padding: 5px 8px;border-radius: 6px;flex: 1}
.forecast-panel button.wind-period-item.wind-period-clickable {border: none;cursor: pointer;transition: background 0.2s}
.forecast-panel button.wind-period-item.wind-period-clickable:hover {background: rgba(255, 255, 255, 0.9)}
.forecast-panel button.wind-period-item.wind-period-clickable:active {background: rgba(255, 255, 255, 1)}
.forecast-panel .wind-period-label {font-size: 9px;color: #6b7280;font-weight: 600;text-transform: uppercase}
.forecast-panel .wind-period-value {font-size: 12px;font-weight: 600;display: flex;align-items: center;gap: 3px}
.forecast-panel .wind-period-value .wind-direction-arrow {width: 11px;height: 11px}
.upgrade-prompt-overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.6);display: flex;align-items: center;justify-content: center;z-index: 10000;padding: 20px}
.upgrade-prompt-content {background: white;border-radius: 16px;padding: 32px 24px;max-width: 320px;width: 100%;text-align: center;box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3)}
.upgrade-prompt-icon {color: var(--color-warning);margin-bottom: 16px}
.upgrade-prompt-icon svg {width: 48px;height: 48px}
.upgrade-prompt-title {font-size: 18px;font-weight: 700;color: #1f2937;margin: 0 0 12px 0}
.upgrade-prompt-message {font-size: 14px;color: #6b7280;line-height: 1.6;margin: 0 0 24px 0}
.upgrade-prompt-actions {display: flex;flex-direction: column;gap: 12px}
.upgrade-prompt-btn {display: block;padding: 12px 20px;border-radius: 8px;font-size: 14px;font-weight: 600;text-decoration: none;text-align: center;cursor: pointer;transition: all 0.2s;border: none}
.upgrade-prompt-btn-primary {background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));color: white}
.upgrade-prompt-btn-primary:hover {background: linear-gradient(135deg, var(--color-primary-dark), #1d4ed8);transform: translateY(-1px);box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3)}
.upgrade-prompt-btn-secondary {background: #f3f4f6;color: #6b7280}
.upgrade-prompt-btn-secondary:hover {background: #e5e7eb}
.forecast-panel .hourly-heatmap-container {padding: 8px 12px 12px}
.forecast-panel .heatmap-section-title {display: flex;align-items: center;gap: 6px;font-size: 11px;font-weight: 700;color: var(--color-text-secondary);margin-bottom: 6px}
.forecast-panel .heatmap-section-title svg {width: 14px;height: 14px;flex-shrink: 0}
.forecast-panel .heatmap-scroll-wrapper {position: relative;overflow: hidden;min-width: 0}
.forecast-panel .heatmap-scroll-wrapper.fade-left::before,
.forecast-panel .heatmap-scroll-wrapper.fade-right::after {content: "";position: absolute;top: 0;bottom: 0;width: 18px;pointer-events: none;z-index: 3}
.forecast-panel .heatmap-scroll-wrapper.fade-left::before {left: 0;background: linear-gradient(to right, rgba(255, 255, 255, 0.85), transparent)}
.forecast-panel .heatmap-scroll-wrapper.fade-right::after {right: 0;background: linear-gradient(to left, rgba(255, 255, 255, 0.85), transparent)}
.forecast-panel .heatmap-scroll {overflow-x: auto;-webkit-overflow-scrolling: touch;scrollbar-width: none;cursor: grab}
.forecast-panel .heatmap-scroll::-webkit-scrollbar {display: none}
.forecast-panel .heatmap-scroll-indicator {position: relative;height: 6px;margin: 6px 16px 0;background: var(--color-border);border-radius: 3px;cursor: pointer;padding: 2px 0;background-clip: content-box}
.forecast-panel .heatmap-scroll-indicator-thumb {position: absolute;top: 1px;left: 0;height: 4px;min-width: 24px;background: linear-gradient(90deg, var(--color-text-light), var(--color-text-muted));border-radius: 3px;transition: opacity 0.3s ease, height 0.15s ease, top 0.15s ease;opacity: 0.6;cursor: grab}
.forecast-panel .heatmap-scroll-indicator-thumb:active {cursor: grabbing}
.forecast-panel .heatmap-scroll:hover + .heatmap-scroll-indicator .heatmap-scroll-indicator-thumb,
.forecast-panel .heatmap-scroll-indicator:hover .heatmap-scroll-indicator-thumb,
.forecast-panel .heatmap-scroll-indicator-thumb.active {opacity: 1;height: 6px;top: 0}
.forecast-panel .heatmap-scroll-inner {--heatmap-columns: 24;--heatmap-cell-width: 30px;--heatmap-gap: 1px;min-width: calc(
var(--heatmap-columns) * var(--heatmap-cell-width) +
(var(--heatmap-columns) - 1) * var(--heatmap-gap)
)}
.forecast-panel .heatmap-label-row {display: flex;gap: var(--heatmap-gap);margin-bottom: 2px}
.forecast-panel .heatmap-label-row span {width: var(--heatmap-cell-width);height: 20px;flex-shrink: 0;display: flex;align-items: center;justify-content: center;font-size: 9px;font-weight: 600;color: var(--color-text-light)}
.forecast-panel .heatmap-now {border-left: 1.5px solid rgba(59, 130, 246, 0.35) !important;border-right: 1.5px solid rgba(59, 130, 246, 0.35) !important;position: relative;z-index: 2;box-shadow: inset 0 0 8px rgba(59, 130, 246, 0.15)}
.forecast-panel .heatmap-label-row span.heatmap-now {color: #fff;font-weight: 700;background: var(--color-primary);border-radius: 8px 8px 0 0;font-size: 8px;border-left-color: var(--color-primary) !important;border-right-color: var(--color-primary) !important;box-shadow: 0 0 10px rgba(59, 130, 246, 0.5)}
.forecast-panel .heatmap-label-row span.heatmap-now::after {content: "";position: absolute;bottom: -4px;left: 50%;transform: translateX(-50%);width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 4px solid var(--color-primary)}
.forecast-panel .heatmap-icon-row .heatmap-weather-icon.heatmap-now {border-radius: 0}
.forecast-panel .heatmap-cell.heatmap-now {border-radius: 0;box-shadow: inset 0 0 10px rgba(59, 130, 246, 0.2)}
.forecast-panel .heatmap-wind-dir-row span.heatmap-now {color: #1d4ed8;font-weight: 700;border-radius: 0 0 8px 8px}
.forecast-panel .heatmap-icon-row {display: flex;gap: var(--heatmap-gap, 1px);margin-bottom: 6px}
.forecast-panel .heatmap-icon-row .heatmap-weather-icon {width: var(--heatmap-cell-width, 30px);height: 20px;flex-shrink: 0;display: flex;align-items: center;justify-content: center;position: relative;cursor: pointer;background: none;border: none;padding: 0;margin: 0;font: inherit;color: inherit}
.forecast-panel .heatmap-strip button.heatmap-cell {border: none;padding: 0;margin: 0;font-size: 9px;font-family: inherit;font-weight: 700;line-height: normal;color: inherit;text-align: center;appearance: none}
.forecast-panel .heatmap-icon-row .heatmap-weather-icon svg {display: block;flex-shrink: 0}
.heatmap-weather-tooltip {position: fixed;white-space: nowrap;font-size: 10px;font-weight: 600;color: #fff;background: #334155;padding: 3px 8px;border-radius: 6px;z-index: 9999;pointer-events: none;animation: heatmap-tooltip-in 0.15s ease-out;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18)}
.heatmap-weather-tooltip::after {content: "";position: absolute;bottom: 100%;left: 50%;transform: translateX(-50%);border: 4px solid transparent;border-bottom-color: #334155}
.heatmap-weather-tooltip--above::after {bottom: auto;top: 100%;border-bottom-color: transparent;border-top-color: #334155}
@keyframes heatmap-tooltip-in {from { opacity: 0; transform: translateY(-2px); }
to   { opacity: 1; transform: translateY(0); }}
.forecast-panel .heatmap-row-label {display: inline-flex;align-items: center;gap: 5px;margin-bottom: 2px;font-size: 10px;font-weight: 600;color: var(--color-text-secondary);position: sticky;left: 0;z-index: 3;background: #fff;padding-right: 6px}
.forecast-panel .heatmap-row-label svg {width: 13px;height: 13px;flex-shrink: 0}
.forecast-panel .heatmap-strip {display: flex;gap: var(--heatmap-gap);margin-bottom: 4px;border-radius: 6px;overflow: hidden}
.forecast-panel .heatmap-cell {width: var(--heatmap-cell-width);flex-shrink: 0;height: 26px;display: flex;align-items: center;justify-content: center;font-size: 9px;font-weight: 700;color: #fff;position: relative;transition: transform 0.15s}
.forecast-panel .heatmap-cell:hover {transform: scaleY(1.15);z-index: 1}
.forecast-panel .heatmap-cell .cell-value {color: #fff;text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.3)}
.forecast-panel .heatmap-cell .cell-value--light {color: var(--color-text-primary);text-shadow: none}
.forecast-panel .heatmap-cell .cell-value--empty {color: var(--color-text-muted);text-shadow: none}
.forecast-panel .heatmap-wind-dir-row {display: flex;gap: var(--heatmap-gap);margin-top: 3px}
.forecast-panel .heatmap-wind-dir-row span {width: var(--heatmap-cell-width);flex-shrink: 0;text-align: center;font-size: 11px;color: var(--color-text-secondary)}
.forecast-panel .heatmap-row-group {margin-bottom: 6px}
.forecast-panel .heatmap-row-group:last-child {margin-bottom: 0}
.forecast-panel .heatmap-legend {display: flex;flex-wrap: wrap;gap: 8px;margin-top: 8px;padding: 0 2px;font-size: 9px;color: var(--color-text-muted)}
.forecast-panel .heatmap-legend-item {display: inline-flex;align-items: center;gap: 3px}
.forecast-panel .heatmap-legend-dot {display: inline-block;width: 8px;height: 8px;border-radius: 2px;flex-shrink: 0}
.forecast-attribution {margin-top: 16px;padding-top: 12px;border-top: 1px solid #e5e7eb;font-size: 11px;color: #9ca3af;text-align: center}
.hidden {display: none !important}