/* 版式：深色夜空底 + 高饱和霓虹色点缀，主按钮是蓝-青-粉-桃的渐变胶囊，卡片用虹彩细描边。整站单一深色主题。 */
:root{
  --bg:#07080f; --panel:#0f1220; --panel2:#151a2c; --line:#232a44; --ink:#eef0ff; --muted:#8e95b8;
  --blue:#3b7bff; --cyan:#6fe3ff; --pink:#ff9ecb; --peach:#ffd3a8; --lav:#b7a8f0; --mint:#5ef0b6;
  --tight:#ff5c7a; --watch:#ffc95c; --ok:#5ef0b6; --none:#5b6280; --empty:#7fb8ff; --ice1:#b98cff; --ice2:#ff4fd8;
  --grad:linear-gradient(110deg,#3b7bff 0%,#6fe3ff 42%,#ff9ecb 78%,#ffd3a8 100%);
  --iris:linear-gradient(120deg,#6fe3ff,#b7a8f0,#ff9ecb,#ffd3a8,#5ef0b6);
  --display:"Unbounded","Noto Sans SC",system-ui,sans-serif;
  --body:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.65 var(--body);
  background-image:radial-gradient(900px 500px at 85% -10%,rgba(59,123,255,.22),transparent 60%),radial-gradient(700px 420px at -5% 10%,rgba(255,158,203,.14),transparent 60%);background-repeat:no-repeat}
.wrap{max-width:1240px;margin:0 auto;padding-inline:16px;padding-block:18px 48px;display:flex;flex-direction:column;gap:22px}
a{color:var(--cyan)}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
h2{font:700 19px/1.3 var(--body);margin:0 0 12px;text-wrap:balance}

.demo{background:rgba(255,201,92,.12);border:1px dashed var(--watch);border-radius:10px;padding:8px 12px;font-size:13px}

/* 顶栏 */
.nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo .mark{width:38px;height:38px;border-radius:12px;background:var(--grad);display:grid;place-items:center;font:900 20px/1 var(--display);color:#07080f;box-shadow:0 0 24px rgba(111,227,255,.35)}
.logo .word{font:700 19px/1 var(--display);letter-spacing:.01em}
.logo .word i{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.maps{display:flex;gap:8px;flex-wrap:wrap}
.navright{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.langbtn{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:999px;padding:6px 14px;font:700 13px/1 var(--body);min-width:52px}
.langbtn:hover{border-color:var(--cyan);color:var(--cyan)}
.discord{display:inline-flex;align-items:center;gap:8px;margin-top:12px;background:#5865F2;color:#fff;text-decoration:none;font-weight:700;border-radius:999px;padding:10px 18px;box-shadow:0 6px 24px rgba(88,101,242,.35)}
.discord svg{width:20px;height:20px;fill:currentColor}
.discord.off{background:var(--panel2);color:var(--muted);box-shadow:none;cursor:default}
.join .disc-badge{width:120px;height:120px;border-radius:24px;display:grid;place-items:center;background:#5865F2}
.join .disc-badge svg{width:64px;height:64px;fill:#fff}
.maptab{text-decoration:none;border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:999px;padding:6px 14px;font-size:13.5px;display:inline-flex;gap:6px;align-items:center}
.maptab[aria-current="page"]{color:#07080f;background:var(--iris);border-color:transparent;font-weight:700}
.maptab.soon{border-style:dashed;cursor:default}

.hero{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px}
.hero .t{display:flex;flex-direction:column;gap:6px;min-width:0}
.updated{font-size:13px;color:var(--muted)}
.updated::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mint);margin-right:8px;box-shadow:0 0 10px var(--mint);vertical-align:1px}
h1{font:900 clamp(28px,5vw,48px)/1.08 var(--body);margin:0;letter-spacing:.01em;text-wrap:balance}
h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{font:500 12px/1 var(--display);color:var(--muted);letter-spacing:.14em;text-transform:uppercase}

.btn{border:0;border-radius:999px;padding:11px 20px;font-weight:700}
.btn.primary{background:var(--grad);color:#07080f;box-shadow:0 6px 28px rgba(59,123,255,.38),inset 0 1px 0 rgba(255,255,255,.5)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.stat{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:2px;text-align:left;color:var(--ink)}
.stat b{font:700 30px/1.1 var(--mono);font-variant-numeric:tabular-nums}
.stat span{font-size:13px;color:var(--muted)}
.stat.tight b{color:var(--tight)} .stat.watch b{color:var(--watch)} .stat.ok b{color:var(--ok)}
.stat[aria-pressed="true"]{border-color:transparent;background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--iris) border-box;border:1px solid transparent}
.window{font-size:13px;color:var(--muted);margin:8px 0}

.main{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;align-items:start}
#map{height:560px;border-radius:20px;border:1px solid var(--line);background:#0b0e18;z-index:0}
.side{background:var(--panel);border:1px solid var(--line);border-radius:20px;display:flex;flex-direction:column;max-height:560px;min-width:0;overflow:hidden}
.side .tools{padding:12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.side input{width:100%;padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);font:inherit}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:999px;padding:4px 12px;font-size:13px}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg);font-weight:700}
.portlist{overflow:auto;list-style:none;margin:0;padding:0}
.port{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border:0;border-bottom:1px solid var(--line);cursor:pointer;background:none;width:100%;text-align:left;color:var(--ink)}
.port:hover,.port.active{background:var(--panel2)}
.code{font:700 14px/1 var(--mono);letter-spacing:.06em;border-radius:8px;padding:6px 0;text-align:center;color:var(--cyan);background:rgba(111,227,255,.08);border:1px solid rgba(111,227,255,.35)}
.pname{min-width:0}
.pname b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pname small{color:var(--muted);font-size:12px}
.pill{font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px;white-space:nowrap}
.pill.tight{background:rgba(255,92,122,.16);color:var(--tight)}
.pill.watch{background:rgba(255,201,92,.15);color:var(--watch)}
.pill.ok{background:rgba(94,240,182,.14);color:var(--ok)}
.pill.ice1{background:rgba(185,140,255,.16);color:var(--ice1)}
.pill.ice2{background:rgba(255,79,216,.16);color:var(--ice2)}
.stat.ice b{color:var(--ice2)}
.layers{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--panel);border:1px solid var(--line);flex-wrap:wrap}
.layers button{border:0;background:transparent;color:var(--muted);border-radius:999px;padding:8px 16px;font-weight:700;font-size:14px}
.layers button[aria-pressed="true"]{background:var(--iris);color:#07080f}
.layers button[data-layer="ice"][aria-pressed="true"]{background:linear-gradient(110deg,#b98cff,#ff4fd8);color:#07080f}
.layertabs-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.f .seg{display:flex;gap:8px;flex-wrap:wrap}
.f .seg label{display:flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-weight:500;cursor:pointer}
.f .seg label:has(input:checked){border-color:var(--cyan);color:var(--cyan)}
.pill.none{background:rgba(142,149,184,.12);color:var(--muted)}

.detail{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:12px}
.detail .head{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.bars{display:flex;flex-direction:column;gap:7px}
.bar{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr) 34px;gap:8px;align-items:center;font-size:13px}
.bar .track{height:8px;border-radius:999px;background:var(--panel2);overflow:hidden}
.bar .fill{height:100%;background:var(--grad);border-radius:999px}
.bar em{font-style:normal;font-family:var(--mono);text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}

.feed{display:flex;flex-direction:column;gap:10px}
.report{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:7px;min-width:0}
.report .meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--muted)}
.report .meta .code{font-size:12px;padding:3px 7px}
.report p{margin:0;overflow-wrap:anywhere}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:12px;background:rgba(183,168,240,.14);color:var(--lav);border-radius:999px;padding:2px 9px}
.pending{font-size:12px;color:var(--muted);font-style:italic}
.srcbadge{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:0 8px}
.srcbadge.ext{border-color:rgba(255,158,203,.5);color:var(--pink)}
.src{font-size:12.5px;color:var(--muted)}

/* 官方提示 */
.tips{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.tip{border-radius:18px;padding:16px 18px;background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--iris) border-box;border:1px solid transparent;display:flex;flex-direction:column;gap:8px}
.tip h3{margin:0;font-size:15.5px}
.tip p{margin:0;font-size:14px;color:var(--ink)}
.tip blockquote{margin:0;font:12.5px/1.55 var(--body);color:var(--muted);border-left:2px solid var(--line);padding-left:10px}
.tip .from{font:500 11.5px/1 var(--mono);color:var(--cyan);text-decoration:none}
.tipnote{font-size:12.5px;color:var(--muted);margin:10px 0 0}

.join{display:flex;flex-wrap:wrap;gap:18px;align-items:center;border-radius:20px;padding:18px;background:linear-gradient(120deg,rgba(59,123,255,.18),rgba(255,158,203,.14)),var(--panel);border:1px solid var(--line)}
.join img{width:120px;height:120px;border-radius:12px;background:#fff}
.join .qr-empty{width:120px;height:120px;border:1px dashed var(--line);border-radius:12px;display:grid;place-items:center;font-size:12px;color:var(--muted);text-align:center;padding:8px}
.join > div{min-width:0;flex:1 1 240px}

footer{font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:18px;display:flex;flex-direction:column;gap:8px}
footer h2{font-size:14px;color:var(--ink);margin:0}
footer p{margin:0;max-width:880px}
footer .brandline{font:500 12px/1 var(--display);letter-spacing:.08em;color:var(--muted);margin-top:6px}

/* 提交表单 */
dialog{border:1px solid var(--line);border-radius:22px;padding:0;width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 32px);background:var(--panel);color:var(--ink)}
dialog::backdrop{background:rgba(3,4,10,.72);backdrop-filter:blur(3px)}
form.f{display:flex;flex-direction:column;gap:14px;padding:22px}
.f h2{margin:0;font:900 22px/1.3 var(--body)}
.f .hint{font-size:13px;color:var(--muted);margin:0}
.f label,.f legend{font-weight:700;font-size:14px}
.f fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.f select,.f input[type=date],.f textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);font:inherit}
.f textarea{min-height:100px;resize:vertical}
.f .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f .checks{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
.f .checks label{font-weight:400;display:flex;gap:6px;align-items:flex-start}
.f .field{display:flex;flex-direction:column;gap:6px;min-width:0}
.f .warn{background:rgba(111,227,255,.08);border:1px solid rgba(111,227,255,.25);border-radius:12px;padding:8px 12px;font-size:13px;margin:0}
.f .btns{display:flex;gap:10px;justify-content:flex-end}
.hp{position:absolute;left:-9999px}
.msg{font-size:14px;margin:0}
.msg.err{color:var(--tight)}

.leaflet-container{font:inherit;background:#0b0e18}
.legend{display:flex;gap:10px;flex-wrap:wrap;background:rgba(7,8,15,.78);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:12px;color:var(--ink)}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:9px;height:9px;border-radius:50%;display:inline-block;box-shadow:0 0 6px currentColor}
.dot{filter:drop-shadow(0 0 6px rgba(255,255,255,.35))}
.leaflet-popup-content-wrapper,.leaflet-popup-tip,.leaflet-tooltip{background:var(--panel2);color:var(--ink);border:1px solid var(--line)}
.leaflet-tooltip:before{display:none}
.leaflet-bar a{background:var(--panel);color:var(--ink);border-color:var(--line)}
.leaflet-control-attribution{background:rgba(7,8,15,.7)!important;color:var(--muted)}
.leaflet-control-attribution a{color:var(--muted)}

@media (max-width:860px){
  .main{grid-template-columns:1fr}
  #map{height:380px}
  .side{max-height:420px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .f .row,.f .checks{grid-template-columns:1fr}
  .bar{grid-template-columns:minmax(0,1fr) 80px 30px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}