.map-section { background: radial-gradient(circle at 12% 16%, #27453d50, transparent 34%), #09191f; }
.atlas-shell { overflow: hidden; border: 1px solid #d7b88677; background: #10262b; box-shadow: 0 30px 110px #020b1099, inset 0 1px #f7deb626; }
.atlas-command { display: flex; justify-content: space-between; align-items: center; gap: 26px; padding: 24px 28px; background: linear-gradient(110deg, #203a39, #14292e 68%, #20332f); border-bottom: 1px solid #d7bb8d38; }
.atlas-title { display: grid; gap: 5px; }
.atlas-title strong { color: #f1e3c8; font-size: 22px; letter-spacing: .025em; }
.atlas-title small { color: #88aa9b; font-size: 10px; letter-spacing: .07em; }
.atlas-live { color: #e6bb83; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.atlas-live i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #f4bc72; box-shadow: 0 0 14px #f4bc72; }
.atlas-search { display: flex; align-items: center; gap: 8px; }
.atlas-search label { color: #a8bbaf; font-size: 10px; white-space: nowrap; }
.atlas-search select, .atlas-search input { height: 38px; padding: 0 11px; border: 1px solid #c8ab7b66; border-radius: 0; color: #f6e7d0; background: #0e2428; font-size: 11px; }
.atlas-search select { width: 112px; }
.atlas-search input { width: 168px; }
.atlas-search input::placeholder { color: #78948a; }
.atlas-search button { height: 38px; padding: 0 15px; border: 1px solid #edc68e; color: #182b2b; background: #edc68e; font-size: 11px; font-weight: 800; white-space: nowrap; }
.atlas-search button:hover { background: #f8dcae; }
.atlas-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 52px; padding: 7px 24px; border-bottom: 1px solid #d7bb8d29; }
.atlas-layers, .atlas-tools { display: flex; align-items: center; gap: 7px; }
.atlas-layers button { padding: 8px 13px; border: 1px solid transparent; background: transparent; color: #8fa99e; font-size: 11px; }
.atlas-layers button.active { color: #f1d5a7; background: #d2b07e18; border-color: #d2b07e4f; }
.atlas-tools > span { color: #89a89b; font-size: 10px; margin-right: 8px; white-space: nowrap; }
.atlas-tools button { min-width: 29px; height: 29px; border: 1px solid #c5aa7b55; background: #1a3336; color: #f1d6a9; font-size: 16px; }
.atlas-tools #atlas-reset { padding: 0 9px; font-size: 10px; }
.atlas-tools button:hover { background: #d8b681; color: #172c2e; }
.atlas-workspace { display: grid; grid-template-columns: minmax(0, 1.86fr) minmax(310px, .78fr); min-height: 630px; }
.atlas-map-wrap { position: relative; min-width: 0; min-height: 630px; overflow: hidden; background: radial-gradient(circle at 58% 43%, #21413d 0, #102a30 47%, #0c2028 100%); }
.atlas-map-wrap::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(90deg, #081a2180, transparent 16%, transparent 84%, #081a2160), linear-gradient(0deg, #081a2170, transparent 23%); }
#atlas-svg { width: 100%; height: 100%; position: absolute; inset: 0; display: block; touch-action: pan-y; }
#atlas-pan-zoom { transform-origin: 0 0; transition: transform .52s cubic-bezier(.2,.65,.2,1); }
.atlas-province { fill: url(#atlas-land); stroke: #c3bc9d; stroke-opacity: .57; stroke-width: 1.05; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .2s, stroke .2s, filter .2s; }
.atlas-province.is-known { fill: #375d51; stroke: #d8c796; stroke-opacity: .8; }
.atlas-province[data-province="山西"] { fill: #856b4b; }
.atlas-province[data-province="贵州"] { fill: #715a53; }
.atlas-province[data-province="四川"] { fill: #656d4c; }
.atlas-province[data-province="浙江"] { fill: #496e68; }
.atlas-province[data-province="宁夏"] { fill: #54746b; }
.atlas-province:hover, .atlas-province:focus-visible { fill: #bd8d63; stroke: #ffe4b2; stroke-width: 2; outline: none; filter: url(#atlas-glow); }
.atlas-province.is-selected { fill: #a87a56; stroke: #f8d6a0; stroke-width: 2.4; filter: drop-shadow(0 0 8px #f5be7e7a); }
.atlas-shell[data-layer="scene"] .atlas-province.is-known { fill: #6e6551; }
.atlas-shell[data-layer="scene"] .atlas-province.is-selected { fill: #bd7d59; }
#atlas-counties { stroke: #a6d1be; stroke-opacity: .23; stroke-width: .65; vector-effect: non-scaling-stroke; pointer-events: none; }
.atlas-shell.is-zoomed #atlas-counties { stroke-opacity: .45; }
.atlas-province-label { fill: #e3ddc2b8; font-size: 11px; font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: #14302d9c; stroke-width: 3px; pointer-events: none; }
.atlas-shell.is-zoomed .atlas-province-label { opacity: 0; }
.atlas-marker { cursor: pointer; }
.atlas-marker .marker-halo { fill: #f2b87430; stroke: #f3c38b6e; stroke-width: 1; filter: url(#atlas-glow); }
.atlas-marker .marker-core { fill: #fbd49c; stroke: #fff4d9; stroke-width: 1.5; }
.atlas-marker text { fill: #fff3d7; font-size: 11px; font-weight: 800; paint-order: stroke; stroke: #16322cbf; stroke-width: 3; }
.atlas-marker:hover .marker-halo, .atlas-marker.is-current .marker-halo { fill: #f6c1837a; stroke: #fff3cd; }
.atlas-marker:hover text, .atlas-marker.is-current text { fill: #ffe0a7; }
.atlas-compass { position: absolute; z-index: 2; right: 20px; top: 21px; display: grid; justify-items: center; color: #dbceaa; font-size: 10px; letter-spacing: .13em; }
.atlas-compass i { font-size: 23px; font-style: normal; line-height: 1; color: #edc88d; }
.atlas-compass small { font-size: 8px; color: #789b8f; }
.atlas-map-caption { position: absolute; z-index: 2; left: 25px; bottom: 20px; display: grid; gap: 4px; }
.atlas-map-caption b { color: #dbbb86; font-size: 10px; letter-spacing: .19em; }
.atlas-map-caption span { color: #789b8d; font-size: 9px; }
.atlas-tooltip { position: absolute; z-index: 4; padding: 8px 10px; min-width: 113px; background: #0c2429ee; border: 1px solid #d9ba857d; color: #ead9b9; pointer-events: none; box-shadow: 0 10px 27px #0008; }
.atlas-tooltip b, .atlas-tooltip small { display: block; }
.atlas-tooltip b { font-size: 13px; }
.atlas-tooltip small { margin-top: 3px; color: #9eb8a9; font-size: 9px; }
.atlas-region-panel { overflow-y: auto; max-height: 630px; padding: 28px; border-left: 1px solid #d2bc9148; background: linear-gradient(155deg, #213b3a, #142a2d 72%); }
.atlas-panel-top { display: flex; justify-content: space-between; gap: 8px; }
.atlas-panel-counter { color: #a7aa8b; font-size: 10px; }
.atlas-region-panel .region-title { display: flex; align-items: baseline; gap: 8px; margin: 15px 0 14px; font-size: 41px; }
.atlas-region-panel .region-title small { color: #a4baab; font-size: 11px; font-weight: 500; }
.atlas-panel-pills { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 23px; }
.atlas-panel-pills span { border: 1px solid #dec48a67; padding: 6px 8px; color: #e4d0a7; font-size: 10px; }
.atlas-panel-block { border-top: 1px solid #d5bd8b38; padding: 16px 0 15px; }
.atlas-panel-block > b { color: #e1c99d; font-size: 10px; letter-spacing: .1em; }
.atlas-panel-block p { margin: 9px 0; color: #b3c8b9; font-size: 11px; line-height: 1.8; }
.atlas-panel-block a { color: #e6c18c; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }
.atlas-city-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.atlas-city-chips button { padding: 7px 10px; border: 1px solid #a8b8a54c; background: #132d30; color: #a8bfae; font-size: 10px; }
.atlas-city-chips button.active, .atlas-city-chips button:hover { border-color: #e4bd86; color: #182b2d; background: #e3bd86; }
.atlas-city-brief { border: 1px solid #d8b98555; background: #ffffff09; padding: 16px; }
.atlas-city-brief > span { color: #edc891; font-size: 10px; letter-spacing: .1em; }
.atlas-city-brief h4 { margin: 8px 0 12px; font-size: 17px; }
.atlas-city-brief ol { margin: 0; padding-left: 18px; color: #bbcebb; font-size: 10px; line-height: 1.75; }
.atlas-city-brief li + li { margin-top: 6px; }
.atlas-city-brief small { display: block; margin-top: 11px; color: #819d91; font-size: 9px; line-height: 1.5; }
.atlas-region-panel .region-actions { margin-top: 20px; }
.atlas-region-panel .region-actions button { font-size: 10px; }
.atlas-footer { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 13px 24px; border-top: 1px solid #d4b78332; background: #102329; }
.atlas-legend { display: flex; flex-wrap: wrap; gap: 18px; }
.atlas-legend span { display: flex; align-items: center; gap: 6px; color: #92ae9f; font-size: 10px; }
.atlas-legend i { width: 7px; height: 7px; border-radius: 50%; }
.atlas-key-known { background: #e9bd80; }.atlas-key-research { background: #628779; }.atlas-key-city { background: #f6d5a1; box-shadow: 0 0 9px #f6d5a1; }
.atlas-footer a { color: #b6ad92; font-size: 9px; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.atlas-disclaimer { color: #78948a; font-size: 10px; line-height: 1.8; margin: 13px 0 0; }
@media(max-width:1050px) { .atlas-command { display: grid; }.atlas-search { flex-wrap: wrap; }.atlas-workspace { grid-template-columns: minmax(0,1.35fr) minmax(290px,.8fr); } }
@media(max-width:800px) { .atlas-workspace { grid-template-columns: 1fr; }.atlas-map-wrap { min-height: 520px; }.atlas-region-panel { max-height: none; border-left: 0; border-top: 1px solid #d2bc9148; }.atlas-footer { flex-wrap: wrap; } }
@media(max-width:620px) {
  .atlas-command { padding: 20px 17px; gap: 20px; }.atlas-title strong { font-size: 20px; }.atlas-search { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 7px; }.atlas-search label { grid-column: 1; }.atlas-search select, .atlas-search input { width: 100%; grid-column: 2 / 4; }.atlas-search button { grid-column: 1 / 4; }
  .atlas-toolbar { padding: 9px 13px; flex-wrap: wrap; gap: 7px; }.atlas-layers button { padding: 7px 8px; font-size: 10px; }.atlas-tools { margin-left: auto; }.atlas-tools > span { display: none; }
  .atlas-map-wrap { min-height: 395px; }.atlas-map-caption { left: 12px; bottom: 12px; }.atlas-map-caption b { font-size: 8px; }.atlas-map-caption span { font-size: 7px; }.atlas-compass { top: 12px; right: 12px; }
  .atlas-province-label { display: none; }.atlas-marker text { font-size: 16px; }.atlas-region-panel { padding: 23px 18px; }.atlas-footer { padding: 13px 15px; }.atlas-legend { gap: 9px; }.atlas-legend span { font-size: 9px; }
}