@font-face{font-family:OrbitronLocal;src:local('Orbitron');font-display:swap}
:root{
  --bg:#06101f;--panel:rgba(9,22,43,.72);--panel2:rgba(15,35,66,.88);--line:rgba(92,225,255,.24);
  --text:#eaf7ff;--muted:#86a7bd;--cyan:#51e6ff;--blue:#2f7dff;--gold:#ffd166;--green:#7cffc4;--red:#ff5d7a;
  --shadow:0 28px 90px rgba(0,0,0,.42);--radius:22px;
}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{
  font-family:"Microsoft YaHei UI","Microsoft YaHei","PingFang SC",sans-serif;color:var(--text);background:var(--bg);overflow:hidden;
  background-image:
    radial-gradient(circle at 18% 14%,rgba(47,125,255,.28),transparent 32%),
    radial-gradient(circle at 82% 18%,rgba(81,230,255,.16),transparent 28%),
    radial-gradient(circle at 78% 80%,rgba(124,255,196,.08),transparent 28%),
    linear-gradient(135deg,#030813 0%,#07172c 50%,#04111e 100%);
}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;background-image:linear-gradient(rgba(81,230,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(81,230,255,.12) 1px,transparent 1px);background-size:52px 52px;mask-image:radial-gradient(circle at center,#000 0%,transparent 78%)}
body:after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.08;background:repeating-linear-gradient(0deg,rgba(255,255,255,.8) 0 1px,transparent 1px 3px)}
.app{position:relative;height:100%;display:grid;grid-template-columns:330px minmax(400px,.75fr) minmax(560px,1fr);gap:18px;padding:18px;z-index:1}
.panel{background:linear-gradient(180deg,rgba(12,27,52,.88),rgba(7,18,35,.74));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(16px);position:relative;overflow:hidden}
.panel:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(81,230,255,.75),transparent 24%,transparent 70%,rgba(255,209,102,.35));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.left{padding:20px;overflow:hidden}.right{padding:18px 10px 18px 18px;overflow:hidden;display:flex;flex-direction:column;min-height:0}.map-shell{padding:18px;display:flex;flex-direction:column;min-width:0}.brand{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:22px}.brand h1{font-family:OrbitronLocal,"Microsoft YaHei UI",sans-serif;margin:0;font-size:24px;letter-spacing:.08em;line-height:1.05}.brand .sub{color:var(--muted);font-size:13px;margin-top:8px;line-height:1.5}.pulse{width:13px;height:13px;border-radius:50%;background:var(--green);box-shadow:0 0 0 8px rgba(124,255,196,.12),0 0 24px var(--green);margin-top:8px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}.stat{padding:14px;border:1px solid rgba(81,230,255,.14);border-radius:16px;background:rgba(4,16,32,.58)}.stat b{font-family:OrbitronLocal,monospace;color:var(--cyan);font-size:24px}.stat span{display:block;color:var(--muted);font-size:12px;margin-top:4px}.search-box{position:relative;margin:16px 0}.search-box input,.select{width:100%;height:46px;border:1px solid rgba(81,230,255,.28);background:rgba(4,13,27,.78);color:var(--text);border-radius:14px;padding:0 14px;font-size:14px;outline:none}.search-box input:focus,.select:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(81,230,255,.08)}.filters{display:grid;grid-template-columns:1fr;gap:10px}.section-title{display:flex;justify-content:space-between;align-items:center;margin:20px 0 12px;color:#c9ecff;font-weight:700}.section-title small{color:var(--muted);font-weight:400}.list{overflow:auto;max-height:calc(100vh - 430px);padding-right:6px}.list::-webkit-scrollbar,.detail-scroll::-webkit-scrollbar{width:6px}.list::-webkit-scrollbar-thumb,.detail-scroll::-webkit-scrollbar-thumb{background:rgba(81,230,255,.28);border-radius:10px}.item{display:flex;justify-content:space-between;gap:12px;padding:13px 14px;margin-bottom:9px;border-radius:15px;border:1px solid rgba(81,230,255,.12);background:rgba(6,18,36,.52);cursor:pointer;transition:.18s ease}.item:hover{transform:translateX(4px);border-color:rgba(81,230,255,.55);background:rgba(18,48,83,.72)}.item strong{font-size:15px;line-height:1.35}.item span{color:var(--muted);font-size:12px;line-height:1.45;white-space:normal;word-break:break-word}.tag{color:var(--gold)!important;border:1px solid rgba(255,209,102,.28);padding:3px 8px;border-radius:999px;background:rgba(255,209,102,.08);white-space:nowrap;align-self:flex-start}.topbar{height:62px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.crumb{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:13px}.crumb b{color:var(--text);font-size:18px}.btn{border:1px solid rgba(81,230,255,.25);background:rgba(6,18,36,.72);color:var(--text);height:38px;padding:0 14px;border-radius:12px;cursor:pointer;transition:.18s}.btn:hover{border-color:var(--cyan);box-shadow:0 0 20px rgba(81,230,255,.15);transform:translateY(-1px)}.btn.primary{background:linear-gradient(135deg,rgba(47,125,255,.92),rgba(81,230,255,.35));border-color:rgba(81,230,255,.6)}#map{flex:1;min-height:0;border-radius:18px;background:radial-gradient(circle at center,rgba(81,230,255,.08),transparent 50%)}.map-hint{position:absolute;left:34px;bottom:30px;color:var(--muted);font-size:12px;background:rgba(0,8,20,.5);border:1px solid rgba(81,230,255,.16);padding:9px 12px;border-radius:999px}.right h2{margin:0 0 8px;font-size:24px}.right .meta{color:var(--muted);font-size:13px;line-height:1.6}.city-card{padding:16px;border-radius:18px;background:rgba(2,12,26,.48);border:1px solid rgba(81,230,255,.14)}.kv{display:grid;grid-template-columns:78px 1fr;gap:9px;margin:9px 0;font-size:13px}.kv label{color:var(--muted)}.kv div{color:#eefbff}.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.chip{font-size:12px;color:#bdeeff;border:1px solid rgba(81,230,255,.2);background:rgba(81,230,255,.07);padding:6px 9px;border-radius:999px}.detail-scroll{flex:6 1 0;min-height:0;overflow:auto;width:100%;padding-right:6px;margin-top:12px}.detail-block{padding:15px 0;border-top:1px solid rgba(81,230,255,.12)}.detail-block h3{margin:0 0 9px;color:var(--cyan);font-size:15px}.detail-block p{margin:0;color:#c7dfec;line-height:1.8;font-size:13px}.empty{height:100%;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);line-height:1.8}.floating-title{position:absolute;right:38px;top:92px;font-family:OrbitronLocal,monospace;color:rgba(81,230,255,.12);font-size:76px;font-weight:900;letter-spacing:.08em;pointer-events:none}.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:rgba(5,16,31,.92);border:1px solid rgba(81,230,255,.4);box-shadow:var(--shadow);padding:12px 18px;border-radius:999px;color:var(--text);opacity:0;pointer-events:none;transition:.25s;z-index:10}.toast.show{opacity:1;bottom:40px}.loading{position:fixed;inset:0;z-index:99;background:#06101f;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px}.loader{width:72px;height:72px;border-radius:50%;border:2px solid rgba(81,230,255,.18);border-top-color:var(--cyan);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.fade-in{animation:fade .5s ease both}@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:1180px){body{overflow:auto}.app{height:auto;min-height:100%;grid-template-columns:1fr}.left,.right{min-height:auto}.map-shell{height:72vh}.list{max-height:320px}.detail-scroll{height:auto;max-height:520px}.floating-title{display:none}}

.map-tooltip{max-width:min(360px,calc(100vw - 48px));white-space:normal!important;word-break:break-word;overflow-wrap:anywhere;line-height:1.72;color:#eaf7ff;padding:8px 6px}.map-tooltip-title{font-size:18px;font-weight:800;color:#51e6ff;margin-bottom:8px}.map-tooltip-row{color:#bdd6e6;font-size:13px}.map-tooltip-row b{color:#f2fbff}.map-tooltip span{display:inline;white-space:normal}.item>div{min-width:0}.list .item{align-items:flex-start}.search-box input{white-space:nowrap;text-overflow:ellipsis}.right{min-width:0}.city-card,.detail-block p{word-break:break-word;overflow-wrap:anywhere}
@media(max-width:1380px){.app{grid-template-columns:300px minmax(360px,.75fr) minmax(500px,1fr)}.left{padding:18px}.right{padding:16px 8px 16px 16px}.brand h1{font-size:22px}}

.city-title{flex:0 0 auto;margin-bottom:10px}.city-title h2{margin:0 0 8px;font-size:24px}.overview-scroll{flex:4 1 0;min-height:0;overflow:auto;padding-right:4px;margin-bottom:12px;width:100%}.overview-scroll::-webkit-scrollbar{width:6px}.overview-scroll::-webkit-scrollbar-thumb{background:rgba(81,230,255,.28);border-radius:10px}.detail-scroll{border-top:1px solid rgba(81,230,255,.16);padding-top:4px}.detail-block:first-child{border-top:0}.chips:empty{display:none}.chip:empty{display:none}.detail-block p:empty{display:none}.overview-scroll,.detail-scroll{scrollbar-width:thin;scrollbar-color:rgba(81,230,255,.35) transparent}

.topbar{flex-wrap:nowrap;min-width:0}.crumb{min-width:0;flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.crumb span{font-size:clamp(10px,.72vw,13px);white-space:nowrap}.crumb b{font-size:clamp(12px,1vw,18px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar>div:last-child{flex:0 0 auto;display:flex;gap:8px;white-space:nowrap}.topbar .btn{font-size:clamp(11px,.78vw,14px);padding:0 clamp(8px,.8vw,14px);height:36px;white-space:nowrap}.map-shell{min-width:0}.city-card{width:100%}
@media(max-width:1280px){.topbar .btn{height:34px;padding:0 8px}.crumb{gap:6px}.topbar{gap:8px}}

/* 强制右侧详情内容吃满整个右侧面板宽度 */
#detailPanel.right{align-items:stretch!important;padding-right:8px!important}
#detailPanel.right>*{width:100%!important;max-width:none!important;align-self:stretch!important;box-sizing:border-box}
#detailPanel .city-title,#detailPanel .overview-scroll,#detailPanel .detail-scroll,#detailPanel .city-card,#detailPanel .detail-block{width:100%!important;max-width:none!important;align-self:stretch!important;box-sizing:border-box}
#detailPanel .overview-scroll,#detailPanel .detail-scroll{margin-left:0!important;margin-right:0!important;padding-left:0!important}
#detailPanel .city-card{margin-left:0!important;margin-right:0!important}
#detailPanel .kv{grid-template-columns:86px minmax(0,1fr);width:100%}
#detailPanel .kv div{min-width:0;word-break:break-word;overflow-wrap:anywhere}

/* 右侧详情下半部分：结构化层次展示 */
.structured-block{padding:14px 0 16px;border-top:1px solid rgba(81,230,255,.14)}
.structured-block:first-child{border-top:0}.block-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}.block-head h3{margin:0;color:var(--cyan);font-size:15px;letter-spacing:.04em}.block-head span{flex:0 0 auto;font-size:11px;color:var(--muted);border:1px solid rgba(81,230,255,.16);background:rgba(81,230,255,.06);padding:3px 8px;border-radius:999px}.block-lead{margin:0 0 10px!important;color:#e6f7ff!important;line-height:1.7!important;font-size:13px!important;background:rgba(81,230,255,.055);border-left:3px solid rgba(81,230,255,.55);padding:9px 11px;border-radius:0 12px 12px 0}.detail-points{list-style:none;margin:0;padding:0;display:grid;gap:8px}.detail-points li{position:relative;color:#c7dfec;line-height:1.65;font-size:13px;padding:8px 10px 8px 24px;border:1px solid rgba(81,230,255,.10);border-radius:12px;background:rgba(4,14,29,.36)}.detail-points li:before{content:"";position:absolute;left:10px;top:16px;width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px rgba(255,209,102,.8)}
