:root{--bg: #faf7f2;--surface: #ffffff;--ink: #1a1a1a;--muted: #5a5a5a;--line: #e7e1d8;--brand: #b00020;--brand-ink: #ffffff;--accent: #ffd23f;--sev1: #f0a500;--sev2: #e2640d;--sev3: #b00020;--ok: #2e7d32;--tabbar-h: 64px;--maxw: 680px}*{box-sizing:border-box}html,body,#app{height:100%}body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}.app{min-height:100%;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;background:var(--brand);color:var(--brand-ink);position:sticky;top:0;z-index:10}.topbar .logo{width:34px;height:34px;border-radius:8px}.topbar h1{font-size:1.05rem;margin:0;font-weight:700}.topbar small{display:block;font-weight:400;opacity:.9;font-size:.72rem}.content{flex:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:.9rem 1rem calc(var(--tabbar-h) + 1rem)}.tabbar{position:fixed;bottom:0;left:0;right:0;height:var(--tabbar-h);display:flex;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:20}.tabbar a{flex:1;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;color:var(--muted);font-size:.72rem;font-weight:600}.tabbar a[aria-current=page]{color:var(--brand)}.tabbar a svg{width:24px;height:24px}.offline-banner{background:#333;color:#fff;text-align:center;font-size:.82rem;padding:.4rem 1rem}h2.section-title{font-size:1.15rem;margin:.3rem 0 .8rem}.muted{color:var(--muted)}.center{text-align:center}.list{list-style:none;margin:0;padding:0}.list-area{min-height:60vh}.install-reserve{height:112px}button.sismo{appearance:none;-webkit-appearance:none;width:100%;font:inherit;color:inherit;text-align:left}.sismo{display:flex;align-items:center;gap:.8rem;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem;margin-bottom:.55rem}.sismo.clickable{cursor:pointer;transition:border-color .15s ease}.sismo.clickable:hover{border-color:var(--brand)}.sismo.clickable:active{transform:scale(.995)}.mag{flex:0 0 auto;width:48px;height:48px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:1.1rem}.sismo .meta{min-width:0;display:flex;flex-direction:column;gap:2px}.sismo .place{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sismo .sub{font-size:.82rem;color:var(--muted)}.toggle{display:flex;gap:.5rem;margin-bottom:.8rem}.toggle button{flex:1;min-height:44px;border:1px solid var(--line);background:var(--surface);border-radius:10px;font-weight:600;color:var(--ink)}.toggle button[aria-pressed=true]{background:var(--brand);color:#fff;border-color:var(--brand)}.map-wrap{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}.map-canvas{width:100%;min-height:320px;height:calc(100vh - 15.5rem);height:calc(100dvh - 15.5rem)}.picker-canvas{width:100%;height:42vh;min-height:280px;border-radius:10px;overflow:hidden}.maplibregl-popup-content{font-family:inherit;font-size:.9rem}.sismo-marker{border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #00000040;cursor:pointer}.map-badge{position:relative;width:30px;height:30px;border-radius:8px;border:2px solid #fff;display:flex;align-items:center;justify-content:center;cursor:pointer}.map-badge.report{background:#b00020;box-shadow:0 0 0 9px #b0002029}.map-badge.collapsed{background:#b00020}.map-badge.shelter{background:#2e7d32}.map-badge.aid{background:#0e7490}.map-badge .zone-count{position:absolute;top:-8px;right:-8px;min-width:17px;height:17px;padding:0 3px;border-radius:999px;background:#fff;color:var(--brand);border:1.5px solid var(--brand);font-size:.62rem;font-weight:800;line-height:14px;text-align:center}.map-legend{position:absolute;left:8px;bottom:8px;z-index:5;background:#fffffff0;border:1px solid var(--line);border-radius:10px;padding:7px 9px;font-size:.72rem;line-height:1.2;box-shadow:0 1px 4px #00000026}.map-legend .legend-hint{font-size:.6rem;color:var(--muted);margin-bottom:2px}.map-legend .row{display:flex;align-items:center;gap:6px;margin:1px 0;width:100%;background:none;border:none;padding:3px 2px;font:inherit;font-size:.72rem;color:var(--ink);cursor:pointer;text-align:left;border-radius:6px}.map-legend .row:hover{background:#0000000d}.map-legend .row.off{opacity:.4;text-decoration:line-through}.map-legend .row.off .swatch{filter:grayscale(1)}.map-legend .swatch{width:20px;height:20px;border-radius:5px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}.map-legend .swatch svg{width:13px;height:13px}.map-legend .swatch.circle{border-radius:50%}.map-legend .swatch.report{background:#b00020}.map-legend .swatch.shelter{background:#2e7d32}.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:.8rem;margin-bottom:.6rem}.tag{display:inline-block;font-size:.7rem;font-weight:700;padding:.15rem .5rem;border-radius:999px;background:#eef6ee;color:var(--ok);margin-left:.4rem}.field{margin:.9rem 0}.field>label{display:block;font-weight:700;margin-bottom:.5rem}.chips{display:flex;flex-wrap:wrap;gap:.5rem}.chip{min-height:48px;padding:0 .9rem;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600;font-size:.95rem}.chip[aria-pressed=true]{background:var(--brand);color:#fff;border-color:var(--brand)}.btn{display:block;width:100%;min-height:54px;border:none;border-radius:12px;background:var(--brand);color:#fff;font-weight:800;font-size:1.05rem;margin-top:.6rem}.btn.secondary{background:var(--surface);color:var(--brand);border:1.5px solid var(--brand)}.btn:disabled{opacity:.5}.notice{background:#fff8e1;border:1px solid #f3e2a8;border-radius:12px;padding:.8rem;font-size:.9rem;margin:.8rem 0}.danger-note{background:#fdecee;border:1px solid #f3b8c1;border-radius:12px;padding:.8rem}:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--brand);margin:1.5rem auto;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
