:root { --arwin-accent: #635bff; }
body { min-height: 100vh; background: radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--arwin-accent) 10%, transparent), transparent 35%), var(--bs-body-bg); }
.text-primary { color: var(--arwin-accent) !important; }
.btn-primary { --bs-btn-bg: var(--arwin-accent); --bs-btn-border-color: var(--arwin-accent); --bs-btn-hover-bg: #5148ed; --bs-btn-hover-border-color: #5148ed; }
.card { border-color: var(--bs-border-color-translucent); }
.feature-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .75rem; background: color-mix(in srgb, var(--arwin-accent) 14%, transparent); color: var(--arwin-accent); font-size: 1.25rem; font-weight: 700; }
.border-dashed { border-style: dashed; }
.preserve-lines { white-space: pre-wrap; }
audio { height: 2.5rem; }
.alert-card { border-left-width: .35rem; }
.severity-extreme { border-left-color: #7f1d1d; }
.severity-severe { border-left-color: #dc3545; }
.severity-moderate { border-left-color: #fd7e14; }
.severity-minor { border-left-color: #ffc107; }
.severity-unknown { border-left-color: var(--bs-secondary); }
.severity-badge.severity-extreme { background: #7f1d1d; color: white; }
.severity-badge.severity-severe { background: #dc3545; color: white; }
.severity-badge.severity-moderate { background: #fd7e14; color: #111; }
.severity-badge.severity-minor { background: #ffc107; color: #111; }
.severity-badge.severity-unknown { background: var(--bs-secondary); color: white; }
.alert-times { min-width: 11rem; display: grid; gap: .75rem; }
.alert-times div { display: grid; }
.alert-times span { color: var(--bs-secondary-color); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.alert-geometry-map { width: 100%; height: 22rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; overflow: hidden; background: var(--bs-tertiary-bg); }
.alert-revision-map { height: 14rem; }
details > summary.btn { display: inline-block; list-style: none; }
details > summary.btn::-webkit-details-marker { display: none; }
.map-workspace { display: grid; grid-template-columns: 340px minmax(0, 1fr); height: calc(100vh - 58px); }
.map-sidebar { overflow-y: auto; z-index: 2; }
.map-canvas-wrap, #map { position: relative; width: 100%; height: 100%; }
.map-status { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .5rem .75rem; font-size: .875rem; }
.county-selection-panel { border: 1px dashed var(--bs-border-color); background: var(--bs-tertiary-bg); transition: border-color .15s ease, box-shadow .15s ease; }
.county-selection-panel.is-selected { border: 2px solid #ff7a00; background: color-mix(in srgb, #ff8a00 12%, var(--bs-body-bg)); box-shadow: 0 0 0 .2rem color-mix(in srgb, #ff8a00 18%, transparent); }
.forecast-detail > summary { cursor: pointer; list-style: none; }
.forecast-detail > summary::-webkit-details-marker { display: none; }
.forecast-detail[open] { border-color: color-mix(in srgb, var(--arwin-accent) 45%, var(--bs-border-color)); }
.forecast-status-dot { width: .7rem; height: .7rem; border-radius: 50%; flex: 0 0 auto; }
.forecast-status-dot.status-available { background: var(--bs-success); }
.forecast-status-dot.status-pending { background: var(--bs-info); }
.forecast-status-dot.status-stale { background: var(--bs-warning); }
.forecast-status-dot.status-error { background: var(--bs-danger); }
.forecast-summary-condition { display: grid; min-width: 13rem; max-width: 21rem; }
.forecast-summary-condition span { color: var(--bs-secondary-color); font-size: .875rem; }
.forecast-summary-temp, .forecast-period-temp { font-size: 1.65rem; line-height: 1; font-weight: 700; }
.forecast-period-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: .75rem; }
.forecast-period { overflow: hidden; }
.forecast-period.forecast-day { border-top: .25rem solid #f0ad4e; }
.forecast-period.forecast-night { border-top: .25rem solid #4455a5; }
.narrative-card { border-left: .3rem solid color-mix(in srgb, var(--arwin-accent) 70%, var(--bs-border-color)); }
.narrative-copy { font-size: 1.05rem; line-height: 1.7; }
@media (max-width: 767.98px) { .map-workspace { grid-template-columns: 1fr; grid-template-rows: auto 65vh; height: auto; } }