:root{
  --bg:#0b1220;
  --panel:#111a2c;
  --panel2:#16213a;
  --line:#223052;
  --ink:#dbe4f5;
  --dim:#8b9bb9;
  --red:#ff5d5d;
  --amber:#ffb454;
  --blue:#5da8ff;
  --teal:#3fd0c9;
  --serif:"Source Han Serif SC","Noto Serif SC",STSong,SimSun,serif;
  --sans:"Source Han Sans SC","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6}
body{min-height:100vh}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
header.site{border-bottom:1px solid var(--line);padding:26px 0 18px;background:linear-gradient(180deg,#0d1526 0%,var(--bg) 100%)}
.brand{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.brand h1{font-family:var(--serif);font-size:27px;font-weight:700;letter-spacing:.06em}
.brand .en{color:var(--dim);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.lighthouse{width:14px;height:34px;position:relative;top:6px;flex:none}
.lighthouse i{position:absolute;left:6px;top:0;width:2px;height:26px;background:linear-gradient(180deg,var(--amber),transparent);animation:beam 3.2s ease-in-out infinite}
@keyframes beam{0%,100%{opacity:.25}50%{opacity:.95}}
header.site p.sub{margin-top:6px;color:var(--dim);font-size:13px}
.statusbar{display:flex;gap:26px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:var(--dim)}
.statusbar b{color:var(--ink);font-weight:600;font-family:var(--serif);font-size:16px}
.statusbar .lv-critical b{color:var(--red)}
.statusbar .lv-warning b{color:var(--amber)}
main{padding:26px 0 60px}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.filters button{background:var(--panel);border:1px solid var(--line);color:var(--ink);padding:6px 16px;font-size:13px;cursor:pointer;font-family:var(--sans);border-radius:2px}
.filters button:hover{border-color:var(--blue)}
.filters button.on{background:#1d2c4f;border-color:var(--blue);color:#cfe3ff}
/* 态势地图 */
.mapsec{margin-bottom:26px;border:1px solid var(--line);border-radius:2px;background:var(--panel);overflow:hidden}
.mapsec .maphead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid var(--line)}
.mapsec .maphead h2{font-family:var(--serif);font-size:17px;font-weight:600;letter-spacing:.04em}
.mapsec .maphead .sub{color:var(--dim);font-size:12px}
.maplegend{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--dim)}
.maplegend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}
.maplegend .lc-critical i{background:var(--red)}
.maplegend .lc-warning i{background:var(--amber)}
.maplegend .lc-advisory i{background:var(--blue)}
.maplegend .lc-info i{background:var(--teal)}
.maplegend .lc-choke i{background:none;border:1px solid var(--amber);border-radius:0;transform:rotate(45deg)}
#map-box{position:relative;height:520px;background:#081020}
#map-box .mapnote{position:absolute;left:14px;bottom:10px;z-index:900;color:rgba(139,155,185,.72);font-size:11.5px;pointer-events:none}
/* 等距圆柱投影：zoom1 时世界图幅约 512×404px，四周内衬与海洋同色，构图居中不铺满 */
#map-box .map-pad{position:absolute;inset:0;z-index:800;pointer-events:none}
@media(min-width:1152px){#map-box .map-pad{border-left:64px solid #081020;border-right:64px solid #081020;border-top:44px solid #081020;border-bottom:44px solid #081020}}
/* Leaflet 夜航主题 */
.leaflet-container{background:#081020;font-family:var(--sans);font-size:12px;outline:none}
.leaflet-container .leaflet-control-zoom{border:none;box-shadow:0 1px 6px rgba(0,0,0,.55)}
.leaflet-bar a{background:#111a2c;color:#dbe4f5;border-bottom:1px solid #223052}
.leaflet-bar a:hover{background:#1d2c4f;color:#fff}
.leaflet-bar a.leaflet-disabled{background:#111a2c;color:#5a6a88;cursor:default}
/* 咽喉要道十字标 */
.choke-ic{background:none;border:none}
.choke-ic i{position:absolute;left:6px;top:6px;width:3px;height:3px;display:block}
.choke-ic i::before,.choke-ic i::after{content:"";position:absolute;left:-4px;top:0;width:11px;height:1.5px;background:#ffd166;box-shadow:0 0 4px rgba(255,209,102,.7)}
.choke-ic i::before{transform:rotate(45deg)}
.choke-ic i::after{transform:rotate(-45deg)}
.choke-ic:hover i::before,.choke-ic:hover i::after{background:#ffe29a}
/* 紧急脉冲圈 */
.pulse-ring{animation:ringpulse 2.4s ease-out infinite}
@keyframes ringpulse{0%{stroke-opacity:.9;opacity:.9}70%{stroke-opacity:.25;opacity:.25}100%{stroke-opacity:.05;opacity:.05}}
/* 风险浮层 */
.leaflet-tooltip.rt{background:rgba(10,17,34,.96);border:1px solid #33507e;color:#dbe4f5;border-radius:3px;padding:12px 16px;white-space:normal;box-shadow:0 4px 16px rgba(0,0,0,.5);min-width:240px}
.leaflet-tooltip.rt::before{border-top-color:#33507e}
.leaflet-tooltip.rt.leaflet-tooltip-right::before{border-right-color:#33507e;border-left-color:transparent}
.leaflet-tooltip.rt.leaflet-tooltip-left::before{border-left-color:#33507e;border-right-color:transparent}
.leaflet-tooltip.rt .t{font-family:var(--serif);font-weight:600;font-size:13.5px;line-height:1.55;margin-bottom:6px;max-width:410px}
.leaflet-tooltip.rt .row{font-size:12.5px;margin-top:3px}
.leaflet-tooltip.rt .lv{font-weight:700;margin-right:10px;letter-spacing:.08em}
.leaflet-tooltip.rt .ty{color:#b9c6de}
.leaflet-tooltip.rt .dim{color:#8b9bb9;font-size:11.5px}
.leaflet-tooltip.rt .adv{margin-top:8px;padding-top:8px;border-top:1px dashed #223052;font-size:12.5px;color:#9fb4d8;line-height:1.6;max-width:410px}
.leaflet-tooltip.rt .adv::before{content:"建议 ";color:var(--amber);font-size:11px}
.leaflet-tooltip.rt .ck{margin-top:8px;font-size:12px;color:#ffd166;line-height:1.6;max-width:410px}
.leaflet-tooltip.rt.choke{text-align:left}
.leaflet-tooltip.rt.choke b{font-family:var(--serif);font-size:13px;color:#ffd166;display:block}
.leaflet-tooltip.rt.choke .ckm{display:block;color:#b9c6de;font-size:11.5px;white-space:normal;max-width:360px;margin-top:3px;line-height:1.6}
/* 风险构成摘要（velocity 服务端统计直出） */
.sumsec{margin-bottom:26px}
.sumgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.sumbox{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:14px 10px 11px;text-align:center}
.sumbox b{display:block;font-family:var(--serif);font-size:24px;font-weight:700;line-height:1.2;color:var(--ink)}
.sumbox span{display:block;margin-top:4px;font-size:12px;color:var(--dim)}
@media(max-width:900px){.sumgrid{grid-template-columns:repeat(3,1fr)}}
/* 筛选提示条 */
.notice{display:none;margin-bottom:18px;padding:10px 16px;border:1px dashed var(--line);color:var(--dim);font-size:13px;border-radius:2px}
.notice.on{display:block}
.notice a{margin-left:4px}
/* 风险列表 */
.feed{display:flex;flex-direction:column}
.item{border:1px solid var(--line);background:var(--panel);border-left:3px solid var(--line);padding:16px 20px;margin-bottom:12px;border-radius:2px}
.item.lv-critical{border-left-color:var(--red)}
.item.lv-warning{border-left-color:var(--amber)}
.item.lv-advisory{border-left-color:var(--blue)}
.item.lv-info{border-left-color:var(--teal)}
.item .head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.item .tag{font-size:11px;padding:1px 8px;border:1px solid;letter-spacing:.1em;flex:none}
.lv-critical .tag{color:var(--red);border-color:var(--red)}
.lv-warning .tag{color:var(--amber);border-color:var(--amber)}
.lv-advisory .tag{color:var(--blue);border-color:var(--blue)}
.lv-info .tag{color:var(--teal);border-color:var(--teal)}
.item h3{font-family:var(--serif);font-size:16.5px;font-weight:600;margin-top:6px;line-height:1.5}
.item .meta{color:var(--dim);font-size:12px;margin-top:4px}
.item .meta .region{color:var(--ink)}
.item p{margin-top:8px;font-size:13.5px;color:#b9c6de}
.item .advice{margin-top:8px;font-size:13px;color:#9fb4d8;border-top:1px dashed var(--line);padding-top:8px}
.item .advice::before{content:"建议 ";color:var(--amber);font-size:12px}
.item .src{margin-top:8px;font-size:12px;color:var(--dim)}
.item .coords{color:var(--dim);font-size:11px;letter-spacing:.02em}
.item.focus{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber)}
.empty{padding:48px 20px;text-align:center;color:var(--dim);border:1px dashed var(--line)}
.empty p{margin-bottom:12px}
footer.site{border-top:1px solid var(--line);padding:20px 0 34px;color:var(--dim);font-size:12.5px}
footer.site a{color:var(--dim);margin-right:18px}
@media(prefers-reduced-motion:reduce){.lighthouse i{animation:none}.pulse-ring{animation:none}}
@media(max-width:640px){
  .brand h1{font-size:21px}
  .wrap{padding:0 16px}
  .statusbar{gap:16px}
  .maplegend{margin-left:0}
  #map-box{height:380px}
  .leaflet-tooltip.rt{max-width:300px !important;min-width:0;padding:10px 12px}
  .leaflet-tooltip.rt .t,.leaflet-tooltip.rt .adv,.leaflet-tooltip.rt .ck{max-width:270px}
  .leaflet-tooltip.rt.choke .ckm{max-width:250px}
}