body {
    font-family: 'Inter', 'Noto Sans SC', sans-serif;
    color: #e0e0e0;
}
.tooltip {
    position: absolute;
    text-align: center;
    padding: 8px;
    font: 12px sans-serif;
    background: rgba(40, 40, 40, 0.9);
    border: 1px solid #666;
    border-radius: 8px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 10;
}
.graticule {
    fill: none;
    stroke: #4a5568;
    stroke-width: 0.5px;
    stroke-opacity: 0.7;
}
.land {
    fill: #3a4a31; /* Darker land */
    stroke: #65a30d; /* Brighter stroke */
    stroke-width: 0.5px;
}
.storm-track {
    fill: none;
    stroke-width: 2.5px;
}
.forecast-track {
     fill: none;
     stroke-width: 2.5px;
     stroke-opacity: 0.8;
     stroke-dasharray: 4 4;
}
.forecast-cone {
    fill: #3b82f6;
    stroke: none;
    fill-opacity: 0.25;
}
.forecast-point-label {
    fill: white;
    font-size: 10px;
    font-weight: bold;
    text-anchor: middle;
    paint-order: stroke;
    stroke: black;
    stroke-width: 2px;
    stroke-linecap: butt;
    stroke-linejoin: miter;
}
.wind-radii {
    stroke: #ffffff;
    stroke-width: 0.7px;
    stroke-opacity: 0.6;
    fill-opacity: 0.4;
}
.axis path, .axis line {
    stroke: #6b7280;
}
.axis text {
    fill: #d1d5db;
}
.isobar {
    fill: none;
    stroke: #fde047;
    stroke-width: 1px;
    stroke-opacity: 0.5;
}
.isobar-low {
     fill: none;
     stroke: #67e8f9;
     stroke-width: 1px;
     stroke-opacity: 0.5;
}
.control-btn {
    background-color: #4a5568;
    color: #cbd5e0;
}
.control-btn:disabled {
    background-color: #374151;
    color: #9ca3af;
    cursor: not-allowed;
}
.control-btn.active {
    background-color: #4299e1;
    color: white;
}