* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg: #1a1a2e;
    --bg2: #16213e;
    --surface: #0f3460;
    --accent: #e94560;
    --text: #eee;
    --text2: #aab;
    --cold: #4fc3f7;
    --cool: #81d4fa;
    --mild: #fff176;
    --warm: #ffb74d;
    --hot: #ef5350;
    --frost: #90caf9;
}

html, body { height: 100%; overflow: hidden; font-family: -apple-system, system-ui, sans-serif; background: var(--bg); color: var(--text); }

#app { display: flex; flex-direction: column; height: 100%; }

/* Top bar */
#topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; background: var(--bg2); z-index: 1000;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    min-height: 44px;
}
#topbar-left { display: flex; align-items: center; gap: 8px; }
.app-title { font-size: 16px; font-weight: 600; letter-spacing: 0.5px; }
#topbar-right { display: flex; gap: 4px; }
#topbar button {
    background: none; border: none; color: var(--text); padding: 6px;
    border-radius: 8px; cursor: pointer; display: flex; align-items: center;
}
#topbar button:active { background: rgba(255,255,255,0.1); }

/* Map */
#map-container { flex: 1; position: relative; }
#map { width: 100%; height: 100%; }

/* List view */
#list-container { flex: 1; overflow-y: auto; padding: 8px; }
.hidden { display: none !important; }

.station-card {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; margin-bottom: 6px;
    background: var(--bg2); border-radius: 12px;
    cursor: pointer; transition: background 0.15s;
}
.station-card:active { background: var(--surface); }
.station-info { flex: 1; }
.station-name { font-size: 15px; font-weight: 500; }
.station-dist { font-size: 12px; color: var(--text2); margin-top: 2px; }
.station-temp {
    font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums;
    min-width: 70px; text-align: right;
}
.station-time { font-size: 11px; color: var(--text2); text-align: right; }

/* Detail panel */
#detail-panel {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--bg2); border-radius: 16px 16px 0 0;
    padding: 16px 16px 24px; z-index: 2000;
    max-height: 70vh; overflow-y: auto;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.5);
    transition: transform 0.25s ease;
}
#detail-header { display: flex; justify-content: space-between; align-items: flex-start; }
#detail-name { font-size: 18px; font-weight: 600; }
#detail-meta { font-size: 12px; color: var(--text2); margin-top: 2px; }
#detail-close {
    background: none; border: none; color: var(--text2); font-size: 20px;
    padding: 4px 8px; cursor: pointer;
}
#detail-temp-big {
    font-size: 48px; font-weight: 700; text-align: center;
    margin: 12px 0; font-variant-numeric: tabular-nums;
}
#detail-chart-controls { display: flex; gap: 6px; margin-bottom: 12px; }
.chart-btn {
    padding: 6px 14px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.15);
    background: none; color: var(--text2); font-size: 13px; cursor: pointer;
}
.chart-btn.active { background: var(--surface); color: var(--text); border-color: var(--accent); }
#detail-chart { width: 100%; height: 180px; }

/* Leaflet marker overrides */
.temp-marker {
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    border-radius: 50%; border: 2px solid rgba(255,255,255,0.3);
    width: 40px; height: 40px;
    font-variant-numeric: tabular-nums;
}

/* Leaflet popup overrides */
.leaflet-popup-content-wrapper { background: var(--bg2); color: var(--text); border-radius: 12px; }
.leaflet-popup-tip { background: var(--bg2); }
.leaflet-popup-content { margin: 10px 14px; font-size: 14px; }