body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; margin: 0; background: #0f172a; color: #e2e8f0; }
header, footer { padding: 16px 20px; background: #111827; }
main { padding: 20px; display: grid; gap: 16px; max-width: 1080px; margin: 0 auto; }
.card { background: #1f2937; border: 1px solid #374151; border-radius: 10px; padding: 14px; box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset; }
.card h2 { margin: 0 0 10px; font-size: 1.05rem; }
.card ul li { line-height: 1.55; margin-bottom: 4px; }
.sticky-toolbar { position: sticky; top: 10px; z-index: 8; background: rgba(31,41,55,0.96); backdrop-filter: blur(4px); }
.weather-layout { display:grid; grid-template-columns: minmax(0, 1fr) 360px; gap:16px; align-items:start; }
.weather-main { display:grid; gap:16px; }
.weather-side { display:grid; gap:16px; }
.sticky-alert { position: sticky; top: 10px; z-index: 7; background: rgba(31,41,55,0.96); backdrop-filter: blur(4px); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 10px; }
a { color: #93c5fd; text-decoration: none; background:#0b1220; padding:10px; border-radius:8px; display:block; }
a:hover { background:#111827; }
input, select, button { background:#0b1220; color:#e2e8f0; border:1px solid #374151; border-radius:8px; padding:8px 10px; }
button { cursor:pointer; margin-left:8px; }
button.secondary { background:#111827; }
.toolbar { display:flex; align-items:center; gap:8px; }
.toolbar.wrap { flex-wrap:wrap; }
.hint, .muted { color:#94a3b8; font-size: 0.92rem; }
.alert-card { border-color: #7f1d1d; }
.badge { display:inline-block; margin-right:6px; margin-bottom:4px; padding:2px 8px; border-radius:999px; border:1px solid #374151; font-size:12px; color:#cbd5e1; }
.badge-danger { border-color:#ef4444; color:#fecaca; }
.badge-warn { border-color:#f59e0b; color:#fde68a; }
.tag-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.tag-pill { display:inline-flex; align-items:center; gap:6px; background:#0b1220; border:1px solid #374151; border-radius:999px; padding:4px 10px; }
.tag-x { margin-left:2px; padding:0 6px; border-radius:999px; }
.tw-map-wrap { display:grid; grid-template-columns: 1fr; gap:12px; align-items:start; }
.tw-map-svg { width:100%; max-width:340px; background:#0b1220; border:1px solid #334155; border-radius:12px; margin: 0 auto; display:block; }
.tw-map-label { fill:#e2e8f0; font-size:10px; }
.tw-map-label.big { font-size:13px; font-weight:700; fill:#f8fafc; }
.tw-map-temp { fill:#93c5fd; font-size:9px; }
.news-layout { display:grid; grid-template-columns: minmax(260px, 320px) 1fr; gap:16px; }
.side-panel { display:grid; gap:8px; align-content:start; }
.side-panel input, .side-panel select { width:100%; box-sizing:border-box; }
.check-list { display:grid; gap:6px; margin-top:4px; margin-bottom:4px; }
.check-list label { font-size: 0.92rem; color:#cbd5e1; }
.region-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.tab-btn { margin-left:0; }
.tab-btn.active { border-color:#38bdf8; color:#bae6fd; }
.monitor-panel { margin: 10px auto 0; padding:8px 10px; border:1px dashed #475569; border-radius:8px; background:#0b1220; max-width:1080px; }
.critic-box { margin-top:6px; padding:8px 10px; border:1px dashed #334155; border-radius:8px; background:#0b1220; }
.critic-head { margin-bottom:8px; color:#cbd5e1; }
.critic-row { display:flex; gap:8px; align-items:flex-start; padding:5px 6px; border-radius:6px; margin-bottom:4px; }
.critic-icon { width:20px; text-align:center; }
.critic-ok { background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.35); }
.critic-warn { background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.35); }
.critic-bad { background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.35); }
.news-list li { margin-bottom: 10px; }
.news-list a { display:inline-block; padding:0; background:transparent; }
.news-list a:hover { text-decoration: underline; background:transparent; }
ul { margin:0; padding-left:18px; }
code { color:#cbd5e1; }
small { color:#94a3b8; }
@media (max-width: 1080px) {
  .weather-layout { grid-template-columns: 1fr; }
}
.hazard-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.hazard-tabs.compact { align-items:center; }
.hazard-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:10px; }
.hazard-head h2 { margin-bottom:4px; }
.hazard-links { display:flex; gap:8px; flex-wrap:wrap; }
.hazard-links a { display:inline-block; padding:0; background:transparent; border-radius:0; }
.hazard-links a:hover { text-decoration:underline; background:transparent; }
.hazard-layout { display:grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr); gap:14px; align-items:start; }
.hazard-list { list-style:none; padding-left:0; display:grid; gap:10px; }
.hazard-item { padding:10px; border:1px solid #334155; border-radius:10px; background:#0b1220; }
.hazard-item-head { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.hazard-copy { margin-top:6px; margin-bottom:6px; line-height:1.6; }
.hazard-link-row a { display:inline-block; padding:0; margin-top:6px; background:transparent; }
.hazard-link-row a:hover { text-decoration:underline; background:transparent; }
.hazard-side { display:grid; gap:12px; }
.hazard-summary, .hazard-actions { padding:10px; border:1px solid #334155; border-radius:10px; background:#0b1220; }
.hazard-empty { padding:14px; border:1px dashed #475569; border-radius:10px; background:#0b1220; color:#94a3b8; }
.hazard-meta { display:flex; flex-wrap:wrap; gap:10px; margin:8px 0; }
.hazard-banner { margin-top:8px; padding:10px 12px; border:1px solid rgba(245,158,11,0.35); border-radius:10px; background:rgba(245,158,11,0.08); color:#fde68a; }
.hazard-hero { display:flex; justify-content:space-between; gap:12px; padding:12px; border:1px solid #334155; border-radius:12px; background:#0b1220; }
.hazard-hero.badge-danger { border-color:rgba(239,68,68,0.5); background:rgba(127,29,29,0.18); }
.hazard-hero.badge-warn { border-color:rgba(245,158,11,0.45); background:rgba(120,53,15,0.18); }
.hazard-hero-label { font-size:12px; color:#94a3b8; margin-bottom:4px; }
.hazard-hero-title { font-size:1rem; font-weight:700; color:#f8fafc; margin-bottom:4px; line-height:1.45; }
@media (max-width: 860px) {
  .tw-map-wrap, .news-layout, .hazard-layout { grid-template-columns: 1fr; }
  .sticky-toolbar, .sticky-alert { position: static; backdrop-filter: none; }
  .hazard-head { flex-direction:column; }
}