:root{
  --bg:#f6f5f2; --panel:#fff; --ink:#16181c; --mut:#5d6470; --line:#e0ddd6;
  --accent:#8a5a1e; --accent2:#1f4f43; --warn:#a3341f; --ok:#1d6b45;
  --gold:#b8892b;
  --max:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:15.5px; line-height:1.75; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
code{background:#eceae4; padding:.1em .35em; border-radius:3px; font-size:.9em}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:50; background:#1b1d21; color:#f2f0ea;
  display:flex; align-items:center; gap:1rem; padding:0 1.1rem; flex-wrap:wrap;
  border-bottom:3px solid var(--gold);
}
.brand{color:#fff; font-weight:700; padding:.85rem 0; font-size:1.02rem; white-space:nowrap}
.brand span{display:block; font-size:.68rem; letter-spacing:.13em; color:#9aa0a8; font-weight:400; text-transform:uppercase}
.brand:hover{text-decoration:none}
.menubtn{display:none; margin-left:auto; background:none; border:1px solid #555; color:#eee; font-size:1.1rem; border-radius:4px; padding:.2rem .55rem; cursor:pointer}
.mainnav{display:flex; flex-wrap:wrap; gap:.1rem; margin-left:auto}
.mainnav a{color:#c9cdd3; font-size:.8rem; padding:.45rem .6rem; border-radius:4px; white-space:nowrap}
.mainnav a:hover{background:#2b2e34; color:#fff; text-decoration:none}
.mainnav a.cur{background:var(--gold); color:#1b1d21; font-weight:700}
@media(max-width:1080px){
  .menubtn{display:block}
  .mainnav{display:none; width:100%; margin:0; padding-bottom:.6rem}
  body.navopen .mainnav{display:flex; flex-direction:column}
  body.navopen .mainnav a{padding:.5rem .3rem}
}

main{max-width:var(--max); margin:0 auto; padding:1.6rem 1.1rem 3rem}
.pagehead{border-bottom:2px solid var(--ink); padding-bottom:.7rem; margin-bottom:1.6rem}
.pagehead h1{font-size:1.85rem; margin:0; letter-spacing:-.01em}
.pagehead .sub{margin:.35rem 0 0; color:var(--mut); font-size:.95rem}

.sec{background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:1.4rem 1.6rem; margin-bottom:1.6rem}
.sechead{
  font-size:1.28rem; margin:0 0 1rem; padding-bottom:.55rem;
  border-bottom:1px solid var(--line); color:var(--accent2);
}
.sec h3{font-size:1.08rem; margin:1.9rem 0 .6rem; color:var(--ink); border-left:4px solid var(--gold); padding-left:.6rem}
.sec h4{font-size:.98rem; margin:1.4rem 0 .5rem; color:var(--accent)}
.sec h2{font-size:1.15rem; margin:1.6rem 0 .6rem}
.sec > :first-child{margin-top:0}
p{margin:.6rem 0}
ul,ol{margin:.6rem 0 .6rem 1.3rem; padding:0}
li{margin:.25rem 0}
hr{border:0; border-top:1px dashed var(--line); margin:1.6rem 0}

/* ---------- tables ---------- */
.tw{overflow-x:auto; margin:.9rem 0; border:1px solid var(--line); border-radius:6px; background:#fff}
table{border-collapse:collapse; width:100%; font-size:.86rem; min-width:min(100%,540px)}
th,td{border-bottom:1px solid var(--line); padding:.5rem .65rem; text-align:left; vertical-align:top}
th{background:#f0eee8; font-weight:700; white-space:nowrap; position:sticky; top:0; font-size:.82rem}
tbody tr:hover{background:#fbfaf7}
tbody tr:last-child td{border-bottom:0}

/* ---------- callouts ---------- */
blockquote.callout{
  margin:1rem 0; padding:.85rem 1.1rem; background:#f4f2ec;
  border-left:4px solid var(--mut); border-radius:0 6px 6px 0; font-size:.93rem;
}
blockquote.callout p:first-child{margin-top:0}
blockquote.callout p:last-child{margin-bottom:0}
blockquote.callout h2,blockquote.callout h3,blockquote.callout h4{margin-top:.2rem; border:0; padding-left:0}
blockquote.warn{background:#fdf1ed; border-left-color:var(--warn)}
blockquote.go{background:#edf7f1; border-left-color:var(--ok)}
blockquote.go h2{color:var(--ok)}
blockquote.dd{background:#fdf7e8; border-left-color:var(--gold)}
blockquote.dd h2{color:#8a6a12}
blockquote.nogo{background:#f7eeee; border-left-color:var(--warn)}
pre.flow{
  background:#1f2227; color:#dfe3e8; padding:.9rem 1.1rem; border-radius:6px;
  overflow-x:auto; font-size:.82rem; line-height:1.6; margin:1rem 0;
}

/* ---------- map embed ---------- */
.mapembed{margin:0 0 1.6rem}
.mapembed iframe{width:100%; height:520px; border:1px solid var(--line); border-radius:8px; background:#dfe6ea; display:block}
.mapembed .cap{font-size:.82rem; color:var(--mut); margin:.4rem 0 0}

/* ---------- pager ---------- */
.pager{display:flex; justify-content:space-between; gap:1rem; margin-top:1.2rem}
.pager .pn{background:#fff; border:1px solid var(--line); border-radius:6px; padding:.55rem .9rem; font-size:.86rem}

footer{
  background:#1b1d21; color:#9aa0a8; font-size:.78rem; line-height:1.7;
  padding:1.6rem 1.1rem; text-align:center;
}
footer div{max-width:var(--max); margin:0 auto .3rem}
footer a{color:var(--gold)}

/* ---------- homepage ---------- */
.hero{
  background:linear-gradient(135deg,#1f4f43 0%,#123029 60%,#0e1f1b 100%);
  color:#f3f1ea; border-radius:10px; padding:2.2rem 2rem; margin-bottom:1.6rem;
}
.hero h1{margin:0 0 .3rem; font-size:2.1rem; letter-spacing:-.02em}
.hero .en{color:#a8c3b8; font-size:.95rem; margin:0 0 1.1rem; letter-spacing:.04em}
.hero .verdict{font-size:1.15rem; margin:1rem 0 .4rem}
.hero .verdict b{background:var(--gold); color:#14231f; padding:.15rem .55rem; border-radius:4px}
.hero p{color:#cfdcd6; font-size:.93rem; max-width:70ch}
.hero .meta{margin-top:1.2rem; font-size:.78rem; color:#8fa9a0; border-top:1px solid #2e4d44; padding-top:.8rem}

.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:.8rem; margin-bottom:1.6rem}
.kpi{background:#fff; border:1px solid var(--line); border-radius:8px; padding:.9rem 1rem}
.kpi .v{font-size:1.5rem; font-weight:700; color:var(--accent2); line-height:1.2}
.kpi .l{font-size:.76rem; color:var(--mut); margin-top:.25rem}
.kpi .s{font-size:.68rem; color:#8a919c; margin-top:.2rem}

.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:.9rem}
.card{
  background:#fff; border:1px solid var(--line); border-radius:8px; padding:1rem 1.1rem;
  display:block; color:inherit; transition:.15s; position:relative;
}
.card:hover{text-decoration:none; border-color:var(--gold); box-shadow:0 3px 14px rgba(0,0,0,.07); transform:translateY(-1px)}
.card .n{font-size:.7rem; letter-spacing:.14em; color:var(--gold); font-weight:700}
.card h3{margin:.2rem 0 .3rem; font-size:1.02rem; color:var(--accent2)}
.card .en{font-size:.7rem; color:#98a0ab; letter-spacing:.06em; text-transform:uppercase; margin-bottom:.4rem}
.card p{margin:0; font-size:.82rem; color:var(--mut); line-height:1.6}
.card.big{grid-column:span 2; background:linear-gradient(120deg,#fffdf6,#fff)}
@media(max-width:640px){.card.big{grid-column:span 1}}

.rank{width:100%; border-collapse:collapse; font-size:.87rem}
.rank th{background:#f0eee8}
.badge{display:inline-block; padding:.1rem .5rem; border-radius:99px; font-size:.72rem; font-weight:700; white-space:nowrap}
.b-go{background:#d8efe1; color:#14603c}
.b-dd{background:#fbeec9; color:#7d6110}
.b-no{background:#f3dcd8; color:#8f2d18}
.b-a{background:#1f4f43; color:#fff}
.b-b{background:#6f7f8a; color:#fff}
.b-c{background:#c2c7cc; color:#333}
.b-d{background:#e3e5e7; color:#666}

.note{background:#fdf7e8; border:1px solid #e8d9a8; border-radius:8px; padding:1rem 1.2rem; font-size:.87rem; margin:1.4rem 0}
.note b{color:#7d6110}

/* ---------- map page ---------- */
body.mappage{overflow:hidden}
body.mappage main{max-width:none; padding:0}
#map{position:absolute; inset:0; top:0}
.maplayout{position:fixed; inset:0; display:flex; flex-direction:column}
.mapwrap{flex:1; position:relative}
.ctrl{
  position:absolute; top:10px; left:10px; z-index:600; background:rgba(255,255,255,.96);
  border:1px solid var(--line); border-radius:8px; width:270px; max-height:calc(100% - 20px);
  overflow-y:auto; font-size:.8rem; box-shadow:0 3px 16px rgba(0,0,0,.16);
}
.ctrl h4{margin:0; padding:.6rem .8rem; background:#1b1d21; color:#fff; font-size:.82rem; border-radius:7px 7px 0 0}
.ctrl .grp{padding:.55rem .8rem; border-bottom:1px solid var(--line)}
.ctrl .grp:last-child{border-bottom:0}
.ctrl .gt{font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; color:var(--mut); margin-bottom:.35rem; font-weight:700}
.ctrl label{display:flex; align-items:center; gap:.45rem; padding:.16rem 0; cursor:pointer; line-height:1.4}
.ctrl input{margin:0; flex:none}
.sw{width:13px; height:13px; border-radius:3px; flex:none; border:1px solid rgba(0,0,0,.28)}
.swl{width:22px; height:0; border-top-width:3px; border-top-style:solid; flex:none}
.ctrl .sub-note{font-size:.68rem; color:var(--mut); line-height:1.5; margin-top:.35rem; padding-left:.1rem}
.ctrl .sub-note b{color:#7d4a12}
.ctrl .btns{display:flex; gap:.4rem; padding:.55rem .8rem}
.ctrl .btns button{flex:1; font-size:.72rem; padding:.3rem; border:1px solid var(--line); background:#fff; border-radius:5px; cursor:pointer}
.ctrl .btns button:hover{background:#f0eee8}
.mapnote{padding:.55rem .8rem; font-size:.7rem; color:var(--mut); line-height:1.5; background:#faf9f5}
.leaflet-popup-content{font-size:.82rem; line-height:1.6; margin:.7rem .85rem; max-height:340px; overflow-y:auto}
.leaflet-popup-content h4{margin:0 0 .35rem; font-size:.95rem; color:var(--accent2)}
.leaflet-popup-content table{font-size:.78rem; min-width:0}
.leaflet-popup-content th,.leaflet-popup-content td{padding:.22rem .4rem; white-space:normal}
.leaflet-popup-content .tag{display:inline-block; font-size:.66rem; padding:.05rem .4rem; border-radius:99px; background:#eee; margin-bottom:.4rem}
.mapbar{
  background:#1b1d21; color:#eee; padding:.5rem .9rem; font-size:.78rem;
  display:flex; gap:1rem; align-items:center; justify-content:space-between; border-bottom:3px solid var(--gold);
}
.mapbar a{color:var(--gold)}
.legend{
  position:absolute; right:10px; bottom:22px; z-index:600; background:rgba(255,255,255,.95);
  border:1px solid var(--line); border-radius:8px; padding:.6rem .8rem; font-size:.72rem; max-width:230px;
}
.legend b{display:block; margin-bottom:.3rem; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mut)}
.legend div{display:flex; align-items:center; gap:.4rem; padding:.08rem 0}
@media(max-width:700px){.ctrl{width:210px; font-size:.74rem} .legend{display:none}}