:root{
  --bg:#080d17;
  --panel:#0e1726;
  --panel2:#142238;
  --line:rgba(148,190,255,.13);
  --line2:rgba(148,190,255,.22);
  --text:#f0f6ff;
  --text2:#b6c8df;
  --text3:#7d94b2;
  --accent:#5ee7ff;
  --accent2:#8daeff;
  --ok:#5cc98b;
  --warn:#e8b84b;
  --danger:#e55353;
  --shadow:0 24px 70px rgba(0,0,0,.48);
  --radius:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;overflow:hidden;color:var(--text);
  background:radial-gradient(ellipse at 75% -15%,rgba(38,105,190,.18),transparent 42%),var(--bg);
  font:13px/1.5 "Segoe UI Variable Text","Segoe UI",system-ui,"Yu Gothic UI","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
svg{display:block}
.hidden{display:none!important}
.mono{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid rgba(127,178,217,.85);outline-offset:2px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#28344a;border-radius:8px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#3a4a66;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

#app{display:flex;flex-direction:column;height:100vh;height:100dvh;min-height:0}

/* ---------- top bar ---------- */
.topbar{
  flex:none;height:64px;display:flex;align-items:center;gap:14px;padding:0 20px;
  background:linear-gradient(100deg,rgba(12,23,39,.98),rgba(10,17,29,.92));
  border-bottom:1px solid var(--line);box-shadow:0 8px 30px rgba(0,0,0,.18);position:relative;z-index:30;
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.logo{
  width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;color:#75f0ff;
  background:linear-gradient(145deg,#173c5b,#15253d);border:1px solid rgba(94,231,255,.28);box-shadow:0 0 22px rgba(44,190,255,.1);
}
.logo svg{width:19px;height:19px}
.brand-text{min-width:0}
.brand h1{
  margin:0;font-size:17px;font-weight:800;letter-spacing:.025em;line-height:1.15;
  display:flex;gap:6px;align-items:baseline;white-space:nowrap;
}
.brand h1 span{color:var(--accent)}
.brand p{margin:3px 0 0;font-size:10.5px;color:#88a9cb;letter-spacing:.035em;white-space:nowrap}
.top-right{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none}
.conn{
  flex:none;display:flex;align-items:center;gap:6px;height:28px;padding:0 9px;
  border-radius:5px;background:rgba(23,39,59,.78);border:1px solid rgba(127,169,217,.2);
  font-size:10.5px;font-weight:600;color:var(--text2);white-space:nowrap;
}
.conn i{width:6px;height:6px;border-radius:50%;background:var(--warn);flex:none}
.conn[data-state="live"] i{background:var(--ok);animation:livePulse 2.4s ease-out infinite}
.conn[data-state="live"]{color:#a8e4bd}
.conn[data-state="polling"] i{background:var(--warn)}
.conn[data-state="offline"] i{background:var(--danger)}
.conn[data-state="offline"]{color:#f0b4b4}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(92,201,139,.45)}
  70%{box-shadow:0 0 0 6px rgba(92,201,139,0)}
  100%{box-shadow:0 0 0 0 rgba(92,201,139,0)}
}
.icon-btn{
  flex:none;width:32px;height:32px;border-radius:6px;display:grid;place-items:center;color:var(--text2);
  border:1px solid transparent;transition:background .15s,color .15s,border-color .15s;
}
.icon-btn:hover{background:#1a212b;color:#fff;border-color:#2a3442}
.icon-btn[data-on="false"]{color:var(--text3)}
.icon-btn svg{width:16px;height:16px}
.icon-btn .ic-off{display:none}
.icon-btn[data-on="false"] .ic-on{display:none}
.icon-btn[data-on="false"] .ic-off{display:block}
.icon-btn.spinning svg{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- layout ---------- */
.layout{flex:1;min-height:0;display:flex}
.sidebar{
  width:clamp(340px,33vw,400px);flex:none;min-height:0;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(13,23,38,.98),rgba(8,14,24,.98));
  border-right:1px solid var(--line);position:relative;z-index:10;
}
.side-pad{padding:14px 14px 0;flex:none}
.map-wrap{flex:1;min-width:0;position:relative;overflow:hidden}
#map{position:absolute;inset:0;background:#080c12}
.leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.88) contrast(.92) saturate(.65)}
.map-fallback{
  position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;text-align:center;padding:24px;background:rgba(7,10,17,.92);color:var(--text2);font-size:12.5px;
}
.map-fallback strong{color:var(--text);font-size:15px}

/* ---------- hero ---------- */
.hero{
  position:relative;border-radius:15px;padding:16px 16px 13px;overflow:hidden;
  border:1px solid rgba(112,173,233,.22);border-left:3px solid var(--c,#3b4a5c);
  background:radial-gradient(ellipse at 100% 0%,rgba(65,151,255,.13),transparent 55%),linear-gradient(145deg,#14243a,#101a2a);
  box-shadow:0 12px 34px rgba(0,0,0,.2);cursor:pointer;transition:transform .18s,border-color .18s,background .18s;
}
.hero:hover{transform:translateY(-1px);border-color:rgba(94,231,255,.4);border-left-color:var(--c,#5b7088);background:radial-gradient(ellipse at 100% 0%,rgba(65,151,255,.2),transparent 55%),linear-gradient(145deg,#172b45,#111d30)}
.hero:active{background:#121821}
.hero[data-scale="45"],.hero[data-scale="50"],.hero[data-scale="55"],.hero[data-scale="60"],.hero[data-scale="70"]{
  background:#1a1517;border-color:#3d2a2c;border-left-color:var(--c);
}
.hero-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.kicker{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.12em;color:#91a9c7}
.kicker i{width:5px;height:5px;border-radius:50%;background:var(--accent)}
.ago{font-size:10.5px;color:var(--text3);font-variant-numeric:tabular-nums;white-space:nowrap}
.hero-main{display:flex;align-items:center;gap:13px;min-width:0}
.hero-info{min-width:0;flex:1}
.hero-info h2{
  margin:0;font-size:17px;line-height:1.3;font-weight:700;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hero-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:6px;font-size:11.5px;color:var(--text2)}
.hero-meta .dot-sep{width:2px;height:2px;border-radius:50%;background:var(--text3)}
.tsu-mini{
  display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border-radius:4px;
  font-size:10px;font-weight:700;letter-spacing:.01em;
}
.tsu-mini::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor}
.tsu-mini.ok{color:#8ce8a9;background:rgba(74,222,128,.1)}
.tsu-mini.dim{color:var(--text3);background:rgba(255,255,255,.05)}
.tsu-mini.warn{color:#ffd073;background:rgba(251,191,36,.12)}
.tsu-mini.danger{color:#ff9ca0;background:rgba(255,90,95,.14)}
.hero-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:13px;
  padding-top:10px;border-top:1px solid rgba(255,255,255,.06);font-size:10.5px;color:var(--text3);
}
.hero-cta{display:flex;align-items:center;gap:3px;color:var(--accent);font-weight:600}
.hero-cta svg{width:12px;height:12px}
.hero-empty{padding:22px 4px;text-align:center;color:var(--text3);font-size:12px}

/* ---------- badges ---------- */
.badge{
  --c:#64748b;--t:#fff;
  width:38px;height:38px;flex:none;border-radius:6px;display:grid;place-items:center;
  background:var(--c);color:var(--t);font-size:18px;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.badge.big{width:56px;height:56px;border-radius:8px;font-size:26px}
.badge.small{width:27px;height:27px;border-radius:4px;font-size:13px}
.badge.tiny{width:17px;height:17px;border-radius:3px;font-size:9.5px}
.badge.b2{font-size:14px;letter-spacing:-.04em}
.badge.big.b2{font-size:20px}
.badge.small.b2{font-size:10.5px}
.badge.tiny.b2{font-size:8px}

/* ---------- list header / chips ---------- */
.list-head{
  display:flex;align-items:center;justify-content:space-between;padding:16px 4px 8px;
  font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--text3);
}
.list-count{font-size:10.5px;letter-spacing:0;font-weight:600;color:var(--text3);font-variant-numeric:tabular-nums}
.chips{display:flex;gap:6px;overflow-x:auto;padding:0 0 12px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none;height:28px;padding:0 10px;border-radius:999px;border:1px solid rgba(125,165,212,.22);
  background:rgba(19,34,53,.85);color:var(--text2);font-size:11px;font-weight:600;
  transition:background .15s,color .15s,border-color .15s;
}
.chip:hover{color:var(--text);border-color:#3b4a5c;background:#171f2a}
.chip.on{background:linear-gradient(100deg,#164b67,#263d72);border-color:rgba(94,231,255,.52);color:#f1fdff;box-shadow:0 0 18px rgba(54,190,255,.12)}

/* ---------- list ---------- */
.list-wrap{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 10px 14px}
.list{display:flex;flex-direction:column;gap:2px}
.item{
  display:flex;align-items:center;gap:11px;width:100%;padding:10px 9px;border-radius:9px;
  text-align:left;border:1px solid transparent;position:relative;
  transition:background .13s,border-color .13s;
}
.item:hover{background:rgba(28,53,81,.65);border-color:rgba(125,175,230,.12)}
.item.sel{background:linear-gradient(100deg,rgba(31,75,111,.68),rgba(30,47,78,.65));border-color:rgba(94,231,255,.24)}
.item.sel::before{
  content:"";position:absolute;left:-1px;top:9px;bottom:9px;width:3px;border-radius:2px;
  background:var(--accent);
}
.item-main{min-width:0;flex:1}
.item-name{
  display:block;font-size:13px;font-weight:600;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.item-meta{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:10.5px;color:var(--text3);font-variant-numeric:tabular-nums}
.item-meta .dot-sep{width:2px;height:2px;border-radius:50%;background:var(--text3)}
.item-time{flex:none;text-align:right;font-size:10px;color:var(--text3);line-height:1.35;font-variant-numeric:tabular-nums}
.item-time b{display:block;font-size:12px;font-weight:600;color:var(--text2)}
.item-new{
  flex:none;width:5px;height:5px;border-radius:50%;background:var(--accent);
}

/* ---------- notices / skeleton ---------- */
.notice{
  display:flex;align-items:center;gap:8px;padding:9px 11px;margin-bottom:10px;border-radius:9px;
  font-size:11.5px;background:rgba(255,90,95,.08);border:1px solid rgba(255,90,95,.22);color:#ffc2c4;
}
.notice button{margin-left:auto;font-weight:700;color:#fff;text-decoration:underline;font-size:11px}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:55px 20px;text-align:center;color:var(--text3);font-size:12px}
.empty svg{width:30px;height:30px;opacity:.5}
.sk{background:linear-gradient(90deg,#131b28 25%,#1a2638 37%,#131b28 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:5px}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.sk-hero{display:flex;gap:13px;align-items:center;padding:5px 0}
.sk-badge{width:56px;height:56px;border-radius:13px;flex:none}
.sk-lines{flex:1;display:flex;flex-direction:column;gap:8px}
.sk-line{height:10px}
.sk-line.w70{width:70%}
.sk-line.w45{width:45%}
.sk-row{display:flex;align-items:center;gap:11px;padding:11px 8px}
.sk-row .sk-badge{width:38px;height:38px;border-radius:9px}
.sk-row .sk-line{height:8px}

/* ---------- sidebar footer ---------- */
.side-foot{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 14px;
  border-top:1px solid var(--line);font-size:10px;color:var(--text3);background:rgba(0,0,0,.16);
}

/* ---------- map ---------- */
.map-ui{position:absolute;top:14px;left:14px;z-index:1200;display:flex;gap:8px}
.map-btn{
  display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:5px;
  background:rgba(14,18,24,.94);border:1px solid #2b3542;color:var(--text2);
  font-size:11px;font-weight:600;
  transition:color .15s,border-color .15s,background .15s;
}
.map-btn:hover{color:#fff;border-color:#4a5c70;background:#171f2a}
.map-btn svg{width:14px;height:14px}
.legend{
  position:absolute;left:14px;bottom:14px;z-index:1200;display:flex;align-items:center;gap:6px;
  padding:6px 9px;border-radius:5px;background:rgba(11,22,37,.92);border:1px solid rgba(125,175,230,.22);backdrop-filter:blur(12px);
  font-size:10px;color:var(--text2);flex-wrap:wrap;max-width:360px;
}
.lg-title{font-weight:700;color:var(--text3);letter-spacing:.08em;margin-right:1px}
.lg-item{display:flex;align-items:center;gap:3px;line-height:1}
.lg-item i{width:13px;height:13px;border-radius:3px;display:block;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.leaflet-container{font:inherit;background:transparent}
.leaflet-control-zoom{border:0!important;box-shadow:none!important}
.leaflet-control-zoom a{
  width:32px!important;height:32px!important;line-height:31px!important;
  background:rgba(14,18,24,.94)!important;color:#cfd9e8!important;border-color:#2b3542!important;
  font-size:18px!important;
}
.leaflet-control-zoom a:first-child{border-radius:5px 5px 0 0!important}
.leaflet-control-zoom a:last-child{border-radius:0 0 5px 5px!important}
.leaflet-control-zoom a:hover{background:#1c2531!important;color:#fff!important}
.leaflet-control-attribution{
  background:rgba(7,10,17,.72)!important;color:#66768c!important;font-size:9.5px!important;
  padding:2px 6px!important;border-radius:5px 0 0 0;
}
.leaflet-control-attribution a{color:#8fa6c6!important}
.leaflet-control-scale-line{background:rgba(7,10,17,.6);border-color:rgba(255,255,255,.25);color:#8fa6c6}
.quake-marker{background:none;border:0}
.qm{
  position:relative;display:grid;place-items:center;border-radius:50%;background:var(--c);
  box-shadow:0 0 0 2px rgba(255,255,255,.92),0 3px 10px rgba(0,0,0,.55);
  transition:transform .15s;
}
.qm::after{content:"";width:30%;height:30%;border-radius:50%;background:rgba(255,255,255,.9)}
.qm.fresh::before{
  content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--c);
  animation:markerPulse 2.1s ease-out infinite;
}
@keyframes markerPulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.9);opacity:0}}
.qx{position:relative;width:100%;height:100%;filter:drop-shadow(0 3px 5px rgba(0,0,0,.6))}
.qx svg{width:100%;height:100%;display:block}
.qx-ring{
  position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(226,59,59,.55);
  animation:markerPulse 2s ease-out infinite;
}
.q-tip-sel{color:#ff9b9b!important;font-weight:700}
.q-tip{
  background:rgba(10,15,24,.97)!important;border:1px solid var(--line2)!important;color:var(--text)!important;
  border-radius:9px!important;box-shadow:0 12px 30px rgba(0,0,0,.55)!important;padding:7px 10px!important;
  font-size:11px!important;
}
.q-tip::before{border-top-color:rgba(10,15,24,.97)!important}
.q-tip b{display:block;font-size:12px;margin-bottom:2px;color:#fff}
.q-tip span{display:block;color:var(--text2);font-size:10.5px;line-height:1.45}

/* ---------- detail ---------- */
.detail{
  position:absolute;top:14px;right:14px;width:372px;max-height:calc(100% - 28px);z-index:1300;
  overflow-y:auto;overscroll-behavior:contain;padding:18px;border-radius:8px;
  background:#111720;border:1px solid #2a3442;
  box-shadow:var(--shadow);
  animation:detailIn .18s ease;
}
.detail::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--c,#64748b)}
@keyframes detailIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.d-close{
  position:absolute;top:9px;right:9px;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  color:var(--text3);font-size:19px;line-height:1;transition:background .15s,color .15s;
}
.d-close:hover{background:rgba(255,255,255,.08);color:#fff}
.d-hero{display:flex;align-items:center;gap:13px;padding-right:22px}
.d-kicker{font-size:9.5px;font-weight:700;letter-spacing:.16em;color:var(--text3);margin-bottom:3px}
.d-hero h2{margin:0;font-size:17px;line-height:1.3;letter-spacing:-.01em}
.d-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:5px;font-size:11.5px;color:var(--text2);font-variant-numeric:tabular-nums}
.d-meta .dot-sep{width:2px;height:2px;border-radius:50%;background:var(--text3)}
.d-row{display:flex;align-items:center;gap:7px;margin-top:14px;font-size:11.5px;color:var(--text2);font-variant-numeric:tabular-nums}
.d-row svg{width:13px;height:13px;color:var(--text3);flex:none}
.d-row .ago{margin-left:auto;color:var(--text3)}
.tsu{display:flex;align-items:flex-start;gap:8px;margin-top:13px;padding:9px 11px;border-radius:9px;font-size:11.5px;line-height:1.5}
.tsu svg{width:14px;height:14px;flex:none;margin-top:1px}
.tsu.ok{background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.2);color:#9cebb3}
.tsu.dim{background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--text2)}
.tsu.warn{background:rgba(251,191,36,.09);border:1px solid rgba(251,191,36,.24);color:#ffd57e}
.tsu.danger{background:rgba(255,90,95,.1);border:1px solid rgba(255,90,95,.3);color:#ffb1b4}
.d-sec{margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07)}
.d-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:5px}
.d-sec-head h3{margin:0;font-size:10.5px;font-weight:700;letter-spacing:.12em;color:var(--text3)}
.d-sec-head span{font-size:10px;color:var(--text3);font-variant-numeric:tabular-nums}
.d-empty{margin:8px 0 2px;font-size:11.5px;color:var(--text3);line-height:1.6}
.pref{border-bottom:1px solid rgba(255,255,255,.05)}
.pref summary{display:flex;align-items:center;gap:9px;padding:6px 0;cursor:pointer;list-style:none}
.pref summary::-webkit-details-marker{display:none}
.pref summary:hover .pname{color:#fff}
.pref .pname{flex:1;font-size:12px;color:var(--text2);transition:color .13s}
.pref .pcnt{font-size:10px;color:var(--text3)}
.pref .chev{width:11px;height:11px;color:var(--text3);transition:transform .15s;flex:none}
.pref[open] .chev{transform:rotate(90deg)}
.stations{display:flex;flex-wrap:wrap;gap:4px;padding:1px 0 9px 36px}
.station{
  display:flex;align-items:center;gap:4px;padding:2px 5px;border-radius:5px;
  background:rgba(255,255,255,.035);border:1px solid var(--line);font-size:10px;color:var(--text2);
}
.station .badge.tiny{box-shadow:none}
.d-comment{margin-top:10px;padding:8px 10px;border-radius:7px;background:rgba(255,255,255,.035);border-left:2px solid var(--accent);font-size:11px;color:var(--text2);line-height:1.55}
.d-foot{
  margin-top:13px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06);
  font-size:10px;line-height:1.65;color:var(--text3);
}

/* ---------- toasts ---------- */
.toasts{
  position:fixed;top:74px;right:16px;z-index:2000;display:flex;flex-direction:column;gap:9px;
  width:min(360px,calc(100vw - 32px));pointer-events:none;
}
.toast{
  pointer-events:auto;display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:6px;
  background:#131a24;border:1px solid #2b3542;border-left:3px solid var(--c,#64748b);
  box-shadow:0 10px 28px rgba(0,0,0,.5);cursor:pointer;
  animation:toastIn .2s ease;
}
.toast.out{opacity:0;transform:translateX(14px);transition:opacity .25s,transform .25s}
.toast:hover{background:#18212c}
.toast-main{min-width:0;flex:1}
.toast-kicker{font-size:9px;font-weight:800;letter-spacing:.14em;color:var(--text3)}
.toast-title{font-size:12.5px;font-weight:700;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toast-meta{font-size:10.5px;color:var(--text2);margin-top:1px;font-variant-numeric:tabular-nums}
.toast-x{width:22px;height:22px;flex:none;border-radius:6px;display:grid;place-items:center;color:var(--text3);font-size:15px;line-height:1}
.toast-x:hover{background:rgba(255,255,255,.07);color:#fff}
@keyframes toastIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}

/* ---------- EEW ---------- */
.eew{
  position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,4vw,48px);
  background:#a50d1f;color:#fff;overflow-y:auto;
  animation:eewIn .16s ease;
}
.eew::before,.eew::after{
  content:"";position:fixed;left:0;right:0;height:12px;z-index:2;
  background:repeating-linear-gradient(135deg,#ffd400 0 14px,#151515 14px 28px);
}
.eew::before{top:0}
.eew::after{bottom:0}
.eew-card{
  position:relative;z-index:3;width:min(980px,100%);
  background:#b30f24;border:2px solid rgba(255,255,255,.9);
  box-shadow:0 24px 80px rgba(0,0,0,.45);
  animation:eewCardIn .2s ease;
}
.eew-head{
  display:flex;align-items:center;gap:14px;padding:16px 20px;
  background:rgba(0,0,0,.14);border-bottom:2px solid rgba(255,255,255,.3);
}
.eew-flag{
  display:flex;align-items:center;gap:10px;padding:8px 14px;
  background:#fff;color:#b30f24;font-size:clamp(20px,3vw,32px);font-weight:900;
  letter-spacing:.04em;line-height:1;white-space:nowrap;
  animation:eewFlag 1.8s ease-in-out infinite;
}
@keyframes eewFlag{0%,100%{background:#fff}50%{background:#ffd400}}
.eew-dot{width:11px;height:11px;border-radius:50%;background:#c00;flex:none;animation:eewBlink 1s steps(2,end) infinite}
@keyframes eewBlink{50%{opacity:.15}}
.eew-warning{margin-left:auto;color:#ffd400;font-size:clamp(13px,1.8vw,20px);font-weight:800;letter-spacing:.06em;white-space:nowrap}
.eew-close{
  flex:none;width:34px;height:34px;display:grid;place-items:center;
  color:rgba(255,255,255,.85);font-size:24px;line-height:1;
  border:1px solid rgba(255,255,255,.4);border-radius:3px;
}
.eew-close:hover{background:rgba(0,0,0,.2);color:#fff}
.eew-main{
  display:flex;align-items:center;gap:clamp(18px,4vw,48px);flex-wrap:wrap;
  padding:clamp(18px,3vw,30px) 20px;
}
.eew-scale-box{display:flex;align-items:baseline;gap:10px;flex:none}
.eew-scale-cap{font-size:13px;font-weight:700;color:rgba(255,255,255,.8);letter-spacing:.06em}
.eew-scale{
  font-size:clamp(64px,9vw,118px);font-weight:900;line-height:.85;color:#ffd400;
  font-variant-numeric:tabular-nums;letter-spacing:-.04em;
}
.eew-scale.unknown{font-size:clamp(40px,6vw,64px)}
.eew-scale-suffix{font-size:14px;font-weight:700;color:rgba(255,255,255,.9)}
.eew-detail{min-width:0;flex:1}
.eew-place{font-size:clamp(24px,3.6vw,44px);font-weight:900;line-height:1.2;letter-spacing:.02em}
.eew-meta{
  display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;
  font-size:13px;font-weight:600;color:rgba(255,255,255,.86);font-variant-numeric:tabular-nums;
}
.eew-note{margin-top:12px;font-size:14px;font-weight:700;line-height:1.5;color:#fff}
.eew-areas{
  display:flex;flex-wrap:wrap;gap:6px;padding:0 20px 18px;
  max-height:28vh;overflow-y:auto;overscroll-behavior:contain;
}
.eew-area{
  display:inline-flex;align-items:center;gap:6px;padding:3px 8px 3px 3px;
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.2);
  font-size:12px;font-weight:600;line-height:1.3;
}
.eew-area b{
  display:grid;place-items:center;min-width:30px;height:24px;padding:0 5px;
  background:var(--c);color:var(--t);font-size:12px;font-weight:800;border-radius:2px;
}
.eew-area span{white-space:nowrap}
.eew-area-empty{font-size:12.5px;color:rgba(255,255,255,.8);padding:2px 0}
.eew-foot{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 20px;background:rgba(0,0,0,.14);border-top:1px solid rgba(255,255,255,.28);
}
.eew-help{flex:1;min-width:200px;font-size:12px;line-height:1.5;color:rgba(255,255,255,.8)}
.eew-btn{
  flex:none;height:38px;padding:0 16px;border-radius:3px;
  background:#fff;color:#a50d1f;font-size:12.5px;font-weight:800;white-space:nowrap;
}
.eew-btn:hover{background:#ffe9a8}
.eew-btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
.eew-btn.ghost:hover{background:rgba(0,0,0,.18)}
.eew.test{background:#4d3a00}
.eew.test .eew-card{background:#5a4500;border-color:#ffd400}
.eew.test .eew-flag{background:#ffd400;color:#151515;animation:none}
.eew.test .eew-dot{background:#151515;animation:none}
.eew.test .eew-warning,.eew.test .eew-scale{color:#ffd400}
@keyframes eewIn{from{opacity:0}to{opacity:1}}
@keyframes eewCardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.noscript{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);color:var(--text);font-size:14px;z-index:999}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .layout{flex-direction:column}
  .map-wrap{order:-1;flex:none;height:40vh;min-height:230px;border-bottom:1px solid var(--line)}
  .sidebar{width:100%;flex:1;min-height:0;border-right:0}
  .side-pad{padding:12px 12px 0}
  .list-wrap{padding:0 8px 12px}
  .hero{padding:12px 13px 11px}
  .hero-info h2{font-size:15.5px}
  .detail{position:fixed;top:auto;left:10px;right:10px;bottom:10px;width:auto;max-height:68vh;z-index:60}
  .toasts{top:auto;bottom:16px;right:12px;left:12px;width:auto}
  .legend{bottom:10px;left:10px;max-width:250px}
  .map-ui{top:10px;left:10px}
}
@media (max-width:600px){
  .topbar{height:56px;padding:0 12px;gap:8px}
  .logo{width:32px;height:32px;border-radius:6px}
  .logo svg{width:19px;height:19px}
  .brand h1{font-size:14px}
  .brand p{display:none}
  .conn{height:28px;padding:0 8px;font-size:10px}
  .conn span{display:none}
  .icon-btn{width:31px;height:31px}
  .map-wrap{height:37vh;min-height:205px}
  .map-btn{padding:0 9px;font-size:10px;height:30px}
  .map-btn svg{width:13px;height:13px}
  .legend{display:none}
  .hero-meta{gap:5px;font-size:10.5px}
  .hero-foot{font-size:10px}
  .list-head{padding-top:13px}
  .eew{padding:10px;align-items:flex-start}
  .eew::before,.eew::after{height:8px}
  .eew-card{margin:auto 0}
  .eew-head{padding:10px 12px;gap:8px;flex-wrap:wrap}
  .eew-flag{font-size:19px;padding:7px 10px;gap:7px}
  .eew-dot{width:8px;height:8px}
  .eew-warning{font-size:12px;margin-left:0;order:3;width:100%;letter-spacing:.04em}
  .eew-close{width:30px;height:30px;font-size:20px;margin-left:auto;order:2}
  .eew-main{padding:14px 12px;gap:8px}
  .eew-scale-cap{font-size:11px}
  .eew-scale{font-size:60px}
  .eew-scale.unknown{font-size:36px}
  .eew-scale-suffix{font-size:11px}
  .eew-place{font-size:22px}
  .eew-meta{font-size:11px;gap:3px 10px;margin-top:6px}
  .eew-note{font-size:12px;margin-top:8px}
  .eew-areas{padding:0 12px 12px;max-height:24vh;gap:4px}
  .eew-area{font-size:11px;padding:2px 6px 2px 2px}
  .eew-area b{min-width:26px;height:21px;font-size:11px}
  .eew-foot{padding:10px 12px;gap:8px}
  .eew-help{min-width:100%;font-size:11px}
  .eew-btn{height:34px;padding:0 12px;font-size:11.5px}
  .detail{padding:16px}
}
@media (max-height:620px) and (min-width:981px){
  .brand p{display:none}
  .hero{padding:11px 13px 10px}
  .hero-top{margin-bottom:9px}
  .hero-foot{margin-top:10px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}


/* Strya Earthquake visual refresh */
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(94,231,255,.38),rgba(141,174,255,.22),transparent);pointer-events:none}
.hero::after{content:"";position:absolute;right:-45px;top:-58px;width:150px;height:150px;border-radius:50%;border:1px solid rgba(94,231,255,.08);box-shadow:0 0 0 18px rgba(94,231,255,.025),0 0 0 38px rgba(94,231,255,.018);pointer-events:none}
.logo{position:relative;overflow:hidden}
.logo::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(94,231,255,.12),transparent 58%);pointer-events:none}
.list-head{color:#8ca6c7}
.side-foot{background:linear-gradient(90deg,rgba(10,18,30,.7),rgba(15,27,43,.85))}
.conn[data-state="live"]{background:rgba(21,71,59,.45);border-color:rgba(92,201,139,.25)}
.conn[data-state="offline"]{background:rgba(86,29,39,.35);border-color:rgba(229,83,83,.25)}
.icon-btn:hover{background:rgba(49,82,119,.35);color:#e9fbff;border-color:rgba(94,231,255,.18)}
@media (max-width:600px){.topbar{padding:0 10px}.logo{border-radius:11px}.hero{border-radius:13px}}


/* Explicitly labeled tsunami training overlay */
.tsunami-test-banner{position:fixed;z-index:1600;top:16px;left:50%;transform:translateX(-50%);width:min(620px,calc(100vw - 28px));padding:16px 18px 14px;background:#fffdf8;border:2px solid #f47721;border-radius:18px;box-shadow:0 14px 45px #11182740;color:#202124}
.tsunami-test-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:800;letter-spacing:.08em;color:#9a3412}.tsunami-test-head button{font-size:24px;line-height:1;background:transparent;color:inherit;padding:0 4px}.tsunami-test-banner>strong{display:block;font-size:25px;line-height:1.2;margin:7px 0}.tsunami-test-region{font-size:17px;font-weight:750}.tsunami-test-meta{margin-top:7px;font-size:13px}.tsunami-test-banner small{display:block;margin-top:9px;color:#8a3412;font-weight:650}


/* TV-style tsunami information panel: sequentially reveals each line at bottom-right. */
.tsunami-tv-panel{position:fixed;z-index:1700;right:18px;bottom:18px;width:min(390px,calc(100vw - 28px));max-height:min(48vh,390px);overflow:auto;background:rgba(8,18,38,.96);color:#fff;border:1px solid #f97316;border-top:5px solid #f97316;border-radius:5px;box-shadow:0 12px 38px #0008;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;padding:0 14px 10px;backdrop-filter:blur(8px)}
.tsunami-tv-row{padding:9px 4px;border-bottom:1px solid #ffffff25;font-size:13px;line-height:1.45;animation:tsunamiTvReveal .25s ease-out both}
.tsunami-tv-head{margin:0 -14px 5px;padding:10px 14px;background:#b91c1c;font-size:15px;font-weight:900;letter-spacing:.04em}
.tsunami-tv-level{border-left:5px solid #f97316;padding-left:9px;font-size:19px;font-weight:900;color:#fff}
.tsunami-tv-region{font-size:16px;font-weight:800}
.tsunami-tv-arrival,.tsunami-tv-height{font-size:14px;font-weight:700}
.tsunami-tv-advice{background:#fef3c7;color:#7f1d1d;margin:7px -5px 0;padding:10px;font-weight:900;border-radius:3px}
.tsunami-tv-foot{color:#fecaca;font-size:10px;border-bottom:0;padding-bottom:0}
@keyframes tsunamiTvReveal{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:600px){.tsunami-tv-panel{right:10px;bottom:10px;width:calc(100vw - 20px);max-height:42vh}.tsunami-tv-row{padding:7px 3px}.tsunami-test-banner{top:10px;left:10px;transform:none;width:calc(100vw - 20px)}}


/* Reference-inspired information tabs and focused views */
.view-tabs{
  height:46px;flex:none;display:flex;align-items:stretch;gap:4px;padding:0 18px;
  background:linear-gradient(180deg,#101b2b,#0c1522);border-bottom:1px solid var(--line);
  box-shadow:0 5px 18px rgba(0,0,0,.14);z-index:25;overflow-x:auto;scrollbar-width:none
}
.view-tabs::-webkit-scrollbar{display:none}
.view-tab{
  position:relative;flex:none;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 17px;
  color:#8da4c0;font-size:12px;font-weight:750;white-space:nowrap;border-bottom:2px solid transparent;transition:color .16s,background .16s,border-color .16s
}
.view-tab:hover{color:#e9f7ff;background:rgba(94,231,255,.045)}
.view-tab.active{color:#eafaff;border-bottom-color:var(--accent);background:linear-gradient(180deg,rgba(94,231,255,.075),rgba(94,231,255,0))}
.view-tab-icon{font-size:18px;line-height:1;color:#6b9bbd}
.view-tab.active .view-tab-icon{color:var(--accent)}
.view-panel{flex:1;min-height:0;overflow:auto;padding:18px 15px 22px;background:linear-gradient(180deg,rgba(15,27,44,.98),rgba(8,14,24,.98));display:flex;flex-direction:column;gap:12px}
.view-panel.hidden{display:none!important}
.view-panel-title{margin:0 0 2px;font-size:16px;font-weight:800;letter-spacing:.01em;color:#eff8ff}
.view-panel-subtitle{margin:0;color:#8da6c2;font-size:11px}
.view-card{padding:14px;border:1px solid rgba(127,178,217,.17);border-radius:12px;background:linear-gradient(145deg,rgba(22,39,61,.92),rgba(13,23,38,.94));box-shadow:0 9px 24px rgba(0,0,0,.13)}
.view-card-label{display:flex;align-items:center;gap:7px;color:#90abc8;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:9px}
.view-card-label i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(94,231,255,.4)}
.view-card strong{font-size:15px;line-height:1.4;color:#f5f9ff}
.view-card p{margin:7px 0 0;color:#a9bed6;font-size:11.5px;line-height:1.75}
.view-stat-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.view-stat{padding:12px;border:1px solid rgba(127,178,217,.13);border-radius:10px;background:rgba(8,15,26,.55)}
.view-stat span{display:block;color:#819bb8;font-size:10px;margin-bottom:5px}
.view-stat b{display:block;font-size:17px;color:#eaf7ff;font-variant-numeric:tabular-nums}
.view-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:6px;border:1px solid rgba(94,231,255,.2);background:rgba(94,231,255,.07);color:#9eeeff;font-size:10px;font-weight:800}
.view-pill.warn{border-color:rgba(244,119,33,.28);background:rgba(244,119,33,.08);color:#ffc08e}
.view-empty{padding:18px 13px;text-align:center;border:1px dashed rgba(127,178,217,.22);border-radius:11px;color:#91a7c1;font-size:11.5px;line-height:1.8}
.view-empty b{display:block;color:#e5effa;font-size:13px;margin-bottom:4px}
body[data-view="realtime"] #hero,body[data-view="realtime"] .list-head,body[data-view="realtime"] #chips,body[data-view="realtime"] #notice,
body[data-view="tsunami"] #hero,body[data-view="tsunami"] .list-head,body[data-view="tsunami"] #chips,body[data-view="tsunami"] #notice{display:none}
body[data-view="realtime"] .view-panel,body[data-view="tsunami"] .view-panel{display:flex!important}
body[data-view="realtime"] #listWrap,body[data-view="tsunami"] #listWrap{display:none}
body[data-view="realtime"] .side-pad,body[data-view="tsunami"] .side-pad{padding:0}
body[data-view="realtime"] .side-foot,body[data-view="tsunami"] .side-foot{margin-top:auto}
@media(max-width:760px){
 .view-tabs{height:42px;padding:0 8px;gap:0}
 .view-tab{padding:0 12px;font-size:11px;gap:6px}
 .view-tab-icon{font-size:16px}
 .view-panel{padding:12px;gap:9px}
}
@media(max-width:420px){.view-tab{padding:0 9px;font-size:10px}.view-tab-icon{display:none}}

/* v11 — operational monitoring UI: less decorative, stronger hierarchy and legibility */
:root{
  --bg:#0a0c0f;--panel:#11161c;--panel2:#171e26;--line:rgba(214,226,240,.13);--line2:rgba(214,226,240,.24);
  --text:#f4f6f8;--text2:#c4ccd5;--text3:#8793a1;--accent:#55d6ee;--accent2:#a4c9ff;
  --ok:#56d69a;--warn:#ffbd4a;--danger:#ff4d58;--shadow:0 14px 36px rgba(0,0,0,.42);--radius:8px;
}
body{background:#0a0c0f;font-size:13px;letter-spacing:.005em}
.topbar{height:58px;padding:0 18px;background:#101419;border-bottom:1px solid #303943;box-shadow:none}
.topbar::after{display:none}
.logo{width:34px;height:34px;border-radius:6px;background:#1b2832;border:1px solid #3a5663;box-shadow:none;color:#7deaff}
.logo::after{display:none}
.brand h1{font-size:16px;letter-spacing:.01em}
.brand p{font-size:10px;color:#9ba8b5;letter-spacing:.02em}
.conn{height:29px;border-radius:4px;background:#151b22;border-color:#35404c;font-size:11px}
.icon-btn{border-radius:4px;width:32px;height:32px;background:#151b22;border-color:#35404c}
.view-tabs{height:48px;padding:0 18px;background:#101419;border-bottom:1px solid #38414b;box-shadow:none;gap:0}
.view-tab{padding:0 20px;border-bottom-width:3px;color:#9aa5b1;font-size:12px;letter-spacing:.015em}
.view-tab.active{background:#1a222a;color:#fff;border-bottom-color:#55d6ee}
.view-tab-icon{font-size:16px;color:#82919e}
.layout{background:#0a0c0f}
.sidebar{width:clamp(340px,30vw,390px);background:#101419;border-right:1px solid #303943}
.side-pad{padding:12px 12px 0}
.hero{border-radius:6px;padding:13px 13px 11px;background:#171e26;border:1px solid #303b46;border-left:4px solid var(--c,#566574);box-shadow:none;transition:background .15s,border-color .15s}
.hero::after{display:none}
.hero:hover{transform:none;background:#1c2630;border-color:#4b5d6c;border-left-color:var(--c,#566574)}
.hero-top{margin-bottom:9px}
.kicker{font-size:10px;letter-spacing:.1em;color:#aebbc8}
.hero-info h2{font-size:16px;font-weight:750}
.hero-meta{font-size:11px}
.hero-foot{margin-top:10px;padding-top:8px;border-top:1px solid #303943}
.list-head{padding:14px 3px 7px;color:#c0cad4;font-size:11px;letter-spacing:.04em}
.chips{gap:5px;padding-bottom:9px}
.chip{border-radius:4px;height:27px;background:#171e26;border-color:#38434e;color:#c4ccd5}
.chip.on{background:#18313b;border-color:#55d6ee;color:#e8fcff;box-shadow:none}
.list-wrap{padding:0 7px 10px}
.item{padding:9px 8px;border-radius:4px;gap:9px}
.item:hover{background:#1b242d;border-color:#303c47}
.item.sel{background:#1b2d37;border-color:#315866}
.item.sel::before{top:5px;bottom:5px;background:#55d6ee}
.item-name{font-size:12.5px}
.item-meta{font-size:10px}
.side-foot{background:#0d1116;border-top-color:#303943;font-size:9.5px}
.map-wrap{background:#090c10}
#map{background:#0b1015}
.leaflet-tile-pane{filter:grayscale(.75) invert(1) hue-rotate(180deg) brightness(.78) contrast(1.03) saturate(.42)}
.map-btn{border-radius:4px;background:#111820;border-color:#3b4652;color:#e0e6ec;box-shadow:0 3px 12px #0006}
.map-btn:hover{background:#202a34;border-color:#647483}
.legend{border-radius:4px;background:#111820;border-color:#3b4652;box-shadow:0 3px 12px #0006}
.view-panel{padding:14px 12px 20px;gap:10px;background:#101419}
.view-panel-title{font-size:17px;font-weight:800;letter-spacing:0}
.view-panel-subtitle{font-size:11px;color:#9ba8b5}
.view-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:3px 2px 8px;border-bottom:1px solid #303943}
.view-eyebrow{margin:0 0 4px;color:#7b9aaa;font-size:9px;font-weight:800;letter-spacing:.13em}
.view-card{padding:12px;border-radius:5px;border:1px solid #303943;background:#151b22;box-shadow:none}
.view-card-label{font-size:10px;letter-spacing:.07em;color:#a8b5c1;margin-bottom:8px}
.view-card-label i{width:6px;height:6px;box-shadow:none}
.view-card strong{font-size:14px;line-height:1.4}
.view-card p{font-size:11px;line-height:1.65;color:#aab5c0}
.view-pill{border-radius:3px;padding:4px 7px;font-size:10px;background:#182d34;border-color:#28505c;color:#a6f0ff;white-space:nowrap}
.view-pill.warn{background:#342619;border-color:#684720;color:#ffd18b}
.view-pill.ok{background:#163127;border-color:#285c45;color:#a9f1cb}
.view-stat-row{gap:7px}
.view-stat{border-radius:4px;padding:10px;background:#0e1318;border-color:#303943}
.view-stat span{font-size:10px;color:#9aa8b5}
.view-stat b{font-size:17px}
.view-empty{border-radius:4px;padding:15px 12px;border-color:#46515c;background:#141a20;color:#a8b4c0}
.view-empty b{font-size:12px;color:#f2f5f7}
.view-alert-card{border-color:#9c3138;border-left:4px solid #ff4d58;background:#27171a}
.view-alert-card .view-card-label{color:#ffb5b9}
.view-alert-metrics{display:flex;gap:12px;flex-wrap:wrap;margin-top:9px;font-size:11px;color:#d8c9ca}
.view-alert-metrics b{font-size:16px;color:#fff;margin-left:4px}
.view-section-head{display:flex;align-items:center;justify-content:space-between;margin:4px 2px 0;color:#a9b5c1}
.view-section-head h3{font-size:11px;margin:0;color:#dfe5eb;letter-spacing:.04em}
.view-section-head span{font-size:9px;letter-spacing:.1em;color:#7d8a97}
.view-data-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid #2a323b;font-size:11px;color:#b6c0ca}
.view-data-row:last-child{border-bottom:0;padding-bottom:0}
.view-data-row b{max-width:58%;text-align:right;color:#e7edf2;font-size:11px;font-weight:700;overflow-wrap:anywhere}
.view-state.ok{color:#79e1ac}.view-state.warn{color:#ffc96b}.view-state.muted{color:#8e9aa6}
.view-event-row{display:flex;align-items:center;gap:9px;padding:8px 7px;border-bottom:1px solid #252e37;background:#12171d}
.view-event-badge{flex:none;min-width:34px;padding:5px 3px;text-align:center;background:var(--scale-color);color:#101317;font-weight:900;font-size:10px;border-radius:2px}
.view-event-main{min-width:0;flex:1}.view-event-main b{display:block;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#edf1f4}.view-event-main small{display:block;margin-top:2px;font-size:9px;color:#8e9ba8}
.view-event-mag{font-size:10px;color:#c3ccd5;font-weight:700;font-variant-numeric:tabular-nums}
.view-caution{padding:10px 11px;border-left:3px solid #b98337;background:#2a2115;color:#d9c7a9;font-size:10px;line-height:1.65}
.view-caution b{color:#ffd18b;margin-right:5px}
.view-caution-danger{border-left-color:#ff4d58;background:#2b171a;color:#e5c4c6}
.view-caution-danger b{color:#ff9da3}
/* Emergency alert should be unmistakable and high contrast. */
.eew{background:#a10f1c;animation:eewIn .12s ease}
.eew-card{width:min(1080px,100%);border:3px solid #fff;box-shadow:0 0 0 4px #5b0810,0 28px 100px #000b}
.eew-head{padding:17px 20px;background:#850d18;border-bottom:2px solid #f4c8cb}
.eew-flag{border-radius:2px;animation:eewFlag .65s steps(2,end) infinite}
.eew-main{padding:clamp(20px,4vw,36px) 24px}
.eew-scale{color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 2px 0 #710a14}
.eew-place{font-weight:900}
.eew-note{font-weight:800}
.eew-areas{gap:5px}
.tsunami-tv-panel{border-radius:3px;border:2px solid #f4b942;border-top:7px solid #e6323b;background:#11161c;box-shadow:0 8px 32px #000b}
.tsunami-tv-head{background:#d8212f;letter-spacing:.08em}
.tsunami-tv-advice{border-radius:2px}
.toast{border-radius:4px;background:#151b22;border-color:#3b4652}
@media(max-width:760px){
 .topbar{height:54px;padding:0 10px}.view-tabs{height:43px;padding:0 5px}.view-tab{padding:0 12px;font-size:11px}
 .sidebar{border-top:1px solid #303943}.map-wrap{border-bottom-color:#303943}
 .view-panel{padding:10px;gap:8px}.view-card{padding:10px}.view-data-row{font-size:10.5px}
}
@media(max-width:420px){.view-tab{padding:0 9px}.view-tab-icon{display:none}.view-panel-title{font-size:15px}.view-pill{font-size:9px}}


/* Material 3 / Android-inspired redesign (v12) */
:root{
 --bg:#111318;--surface:#191b22;--surface-1:#20232b;--surface-2:#252833;--surface-3:#303440;
 --line:#3c404c;--text:#e4e2eb;--muted:#bfc2cf;--primary:#b8c5ff;--primary-container:#35466f;
 --accent:#a6d8ff;--danger:#ffb4ab;--shape:18px;
}
html,body{background:var(--bg);color:var(--text);font-family:Roboto,"Noto Sans JP","Yu Gothic UI",system-ui,sans-serif;letter-spacing:0}
.topbar{height:68px;padding:0 22px;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:none}
.logo{width:40px;height:40px;border-radius:14px;background:var(--primary-container);border:0;color:var(--primary);box-shadow:none}
.brand h1{font-size:17px;font-weight:750;letter-spacing:-.02em}.brand h1 span{color:var(--muted);font-weight:500}.brand p{font-size:11px;color:var(--muted)}
.conn{height:34px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);padding:0 12px;font-size:11px;color:var(--text)}
.icon-btn{width:40px;height:40px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);color:var(--text);transition:background .16s,transform .16s,border-color .16s}
.icon-btn:hover{background:var(--surface-3);border-color:#66708a;transform:translateY(-1px)}
.view-tabs{height:58px;padding:0 22px;background:var(--surface);border-bottom:1px solid var(--line);gap:8px;box-shadow:none}
.view-tab{height:42px;align-self:center;border:0;border-radius:999px;padding:0 20px;color:var(--muted);font-size:13px;font-weight:650;transition:background .18s,color .18s}
.view-tab.active{background:var(--primary-container);color:#e1e7ff;border:0;box-shadow:inset 0 0 0 1px #667db4}
.view-tab:hover:not(.active){background:var(--surface-2);color:var(--text)}.view-tab-icon{font-size:16px;color:inherit}
.layout{background:var(--bg);gap:0}.sidebar{width:clamp(350px,32vw,430px);background:var(--surface);border-right:1px solid var(--line)}
.side-pad{padding:16px 14px 0}.hero{border-radius:var(--shape);padding:16px;background:linear-gradient(135deg,#232833,#1a1d25);border:1px solid #414858;border-left:4px solid var(--c,#8da8ff);box-shadow:none}
.hero:hover{transform:translateY(-1px);background:linear-gradient(135deg,#292f3b,#1d2029);border-color:#68728a;border-left-color:var(--c,#8da8ff)}
.hero-top{margin-bottom:12px}.kicker{font-size:10px;letter-spacing:.12em;color:#c3c8d8}.hero-info h2{font-size:18px;font-weight:760}.hero-meta{font-size:12px;color:var(--muted)}.hero-foot{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.list-head{padding:18px 4px 8px;color:var(--text);font-size:12px;letter-spacing:.02em}.list-count{border-radius:999px;background:var(--surface-2);padding:3px 8px;color:var(--muted)}
.chips{gap:6px;padding-bottom:12px}.chip{height:32px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);padding:0 13px;font-size:11px}.chip.on{background:var(--primary-container);border-color:#6078b2;color:#edf0ff;box-shadow:none}
.list-wrap{padding:0 8px 12px}.item{padding:12px 10px;border-radius:14px;gap:10px;border-color:transparent;transition:background .15s,border-color .15s}.item:hover{background:var(--surface-2);border-color:var(--line)}.item.sel{background:#29344b;border-color:#586e9e}.item.sel::before{top:10px;bottom:10px;background:var(--primary);border-radius:999px}
.item-name{font-size:13px}.item-meta{font-size:11px;color:var(--muted)}.side-foot{background:var(--surface);border-top:1px solid var(--line);font-size:10px;color:var(--muted)}
.map-wrap{background:#101319}#map{background:#111721}.leaflet-tile-pane{filter:grayscale(.45) invert(1) hue-rotate(180deg) brightness(.82) contrast(1.02) saturate(.62)}
.map-btn{border-radius:14px;background:var(--surface);border:1px solid var(--line);color:var(--text);box-shadow:0 4px 16px #0005;padding:10px 14px}.map-btn:hover{background:var(--surface-2);border-color:#707b96}.legend{border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:0 4px 16px #0005}
.view-panel{padding:16px 14px 22px;gap:12px;background:var(--surface)}.view-panel-title{font-size:18px;font-weight:780;letter-spacing:-.02em}.view-panel-subtitle{font-size:12px;color:var(--muted)}.view-heading{padding:4px 2px 12px;border-bottom:1px solid var(--line)}.view-eyebrow{margin:0 0 5px;color:var(--primary);font-size:10px;font-weight:800;letter-spacing:.12em}
.view-card{padding:16px;border-radius:18px;border:1px solid var(--line);background:var(--surface-1);box-shadow:none}.view-card-label{font-size:11px;letter-spacing:.04em;color:var(--muted);margin-bottom:10px}.view-card-label i{width:7px;height:7px}.view-card strong{font-size:15px;line-height:1.5}.view-card p{font-size:12px;line-height:1.7;color:var(--muted)}.view-pill{border-radius:999px;padding:5px 10px;font-size:10px;background:#263753;border-color:#526e9b;color:#dce7ff;white-space:nowrap}.view-pill.warn{background:#4a3820;border-color:#80643a;color:#ffdfa8}.view-pill.ok{background:#1c4035;border-color:#3a806b;color:#b5f1d6}
.view-stat-row{gap:8px}.view-stat{border-radius:14px;padding:12px;background:var(--surface-2);border-color:var(--line)}.view-stat span{font-size:11px;color:var(--muted)}.view-stat b{font-size:19px}.view-empty{border-radius:16px;padding:18px 14px;border-color:var(--line);background:var(--surface-1);color:var(--muted)}.view-empty b{font-size:13px;color:var(--text)}
.view-alert-card{border-color:#9b444b;border-left:4px solid #ff6b73;background:#351e24}.view-alert-card .view-card-label{color:#ffc0c4}.view-alert-metrics{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:#e4cdd0}.view-alert-metrics b{font-size:17px;color:#fff;margin-left:4px}
.view-section-head{display:flex;align-items:center;justify-content:space-between;margin:5px 2px 0;color:var(--muted)}.view-section-head h3{font-size:12px;margin:0;color:var(--text);letter-spacing:.01em}.view-section-head span{font-size:10px;letter-spacing:.08em;color:var(--muted)}
.view-data-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}.view-data-row:last-child{border-bottom:0;padding-bottom:0}.view-data-row b{max-width:58%;text-align:right;color:var(--text);font-size:12px;font-weight:700;overflow-wrap:anywhere}
.view-state.ok{color:#8de4ba}.view-state.warn{color:#ffd18b}.view-state.muted{color:#a9afbf}.view-event-row{display:flex;align-items:center;gap:10px;padding:10px;border-bottom:1px solid var(--line);background:transparent}.view-event-badge{flex:none;min-width:38px;padding:6px 4px;text-align:center;background:var(--scale-color);color:#171920;font-weight:900;font-size:10px;border-radius:9px}.view-event-main{min-width:0;flex:1}.view-event-main b{display:block;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}.view-event-main small{display:block;margin-top:3px;font-size:10px;color:var(--muted)}.view-event-mag{font-size:11px;color:var(--text);font-weight:750;font-variant-numeric:tabular-nums}
.view-caution{padding:12px 13px;border-radius:14px;border-left:3px solid #e8b55c;background:#3a3020;color:#f0d9af;font-size:11px;line-height:1.7}.view-caution b{color:#ffdda0;margin-right:5px}.view-caution-danger{border-left-color:#ff7a81;background:#3b2025;color:#f1c8ca}.view-caution-danger b{color:#ffb6bb}
.eew{background:#a40018;animation:eewIn .12s ease}.eew-card{width:min(1080px,100%);border:3px solid #fff;border-radius:22px;overflow:hidden;box-shadow:0 0 0 4px #5b0810,0 28px 100px #000b}.eew-head{padding:18px 22px;background:#850d18;border-bottom:2px solid #f4c8cb}.eew-flag{border-radius:8px;animation:eewFlag .65s steps(2,end) infinite}.eew-main{padding:clamp(22px,4vw,38px) 26px}.eew-scale{color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 2px 0 #710a14}.eew-place{font-weight:900}.eew-note{font-weight:800}.eew-areas{gap:6px}.tsunami-tv-panel{border-radius:18px;border:2px solid #f4b942;border-top:7px solid #e6323b;background:#171b23;box-shadow:0 8px 32px #000b;overflow:hidden}.tsunami-tv-head{background:#d8212f;letter-spacing:.08em}.tsunami-tv-advice{border-radius:12px}.toast{border-radius:14px;background:var(--surface-2);border-color:var(--line)}
button,a{ -webkit-tap-highlight-color:transparent }button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #9cb2ff;outline-offset:2px}
@media(max-width:760px){.topbar{height:60px;padding:0 12px}.view-tabs{height:54px;padding:0 8px;gap:3px}.view-tab{height:38px;padding:0 12px;font-size:11px}.sidebar{border-top:1px solid var(--line)}.map-wrap{border-bottom-color:var(--line)}.view-panel{padding:12px;gap:10px}.view-card{padding:13px}.view-data-row{font-size:11px}}
@media(max-width:420px){.view-tab{padding:0 10px}.view-tab-icon{display:none}.view-panel-title{font-size:16px}.view-pill{font-size:9px}.brand h1{font-size:14px}.brand h1 span{display:none}.conn{padding:0 8px}}