@font-face { font-family: "Raleway"; src: url('/fonts/raleway/regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url('/fonts/playfair/bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
* { box-sizing: border-box; }
body { margin: 0; color: #2a2a2a; background: #f8f9fa; font-family: Raleway, Arial, sans-serif; }
.weather-shell { width: min(820px, calc(100% - 40px)); margin: 0 auto; padding: 48px 0 80px; }
.weather-logo { display: block; width: 120px; height: auto; margin: 0 auto 35px; }
h1 { margin: 0; color: #002d68; font-family: "Playfair Display", Georgia, serif; font-size: clamp(32px, 6vw, 52px); text-align: center; }
.weather-intro { max-width: 650px; margin: 18px auto 40px; line-height: 1.6; text-align: center; }
.weather-card, .admin-card { margin: 18px 0; padding: 26px; border-left: 5px solid #1760b7; background: #fff; box-shadow: 0 8px 28px rgba(42,42,42,.08); }
.weather-card-alert { border-left-color: #da4444; }
.weather-card-clear { border-left-color: #3e8d63; }
.weather-card h2, .admin-card h2 { margin: 0 0 12px; color: #002d68; font-family: "Playfair Display", Georgia, serif; font-size: 24px; }
.weather-card p, .admin-card p { margin: 8px 0; line-height: 1.55; }
.weather-meta { margin-top: 28px; color: #707070; font-size: 13px; text-align: center; }
.weather-links { margin-top: 32px; text-align: center; }
.weather-links a { color: #1760b7; }
.admin-help { margin: 26px 0; padding: 18px; background: #edf4f7; line-height: 1.55; }
.pin-label, .admin-card label { display: grid; gap: 8px; font-weight: 600; }
input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #c9cdd2; border-radius: 4px; font: inherit; }
.admin-card label { margin-top: 18px; font-size: 14px; }
.admin-actions { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
button { min-height: 44px; padding: 10px 16px; border: 0; border-radius: 4px; background: #1760b7; color: #fff; cursor: pointer; font: inherit; font-weight: 600; }
button.secondary { background: #e7e9ec; color: #2a2a2a; }
button:disabled { opacity: .55; cursor: wait; }
.admin-state { color: #3e8d63; font-weight: 700; }
.admin-state.is-alert { color: #b33636; }
#admin-notice { min-height: 24px; margin: 18px 0; color: #2f3896; font-weight: 700; }
@media (max-width: 560px) { .weather-shell { width: min(100% - 28px, 820px); padding-top: 28px; } .weather-card, .admin-card { padding: 20px; } .admin-actions button { width: 100%; } }