:root{font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;color:#203331;background:#f3f5f1;font-synthesis:none}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,.map-viewport:focus-visible,.zone-item:focus-visible{outline:3px solid #e8a853;outline-offset:2px}
.app{display:flex;width:100%;height:100dvh;min-height:420px;overflow:hidden}
.sidebar{z-index:8;display:flex;flex-direction:column;flex:0 0 282px;min-width:0;background:#f9faf7;border-right:1px solid #dbe2dc;box-shadow:3px 0 18px #1b39310a}
.sidebar-head{display:flex;gap:13px;align-items:center;padding:27px 23px 24px}
.brand-mark{position:relative;display:grid;place-items:center;width:40px;height:40px;flex:none;background:#234c46;border-radius:6px;overflow:hidden}
.brand-mark span{position:absolute;bottom:7px;left:7px;width:25px;height:16px;border:1.8px solid #ffdd94;border-top:0;transform:rotate(-31deg);border-radius:2px}
.brand-mark span:nth-child(2){bottom:13px;left:16px;width:13px;height:18px;border-color:#fff4cb;transform:rotate(19deg)}
.brand-mark span:nth-child(3){bottom:28px;left:9px;width:4px;height:4px;border:none;border-radius:50%;background:#f6b663}
.eyebrow{margin:0 0 3px;font-size:9px;font-weight:800;color:#a36d48;letter-spacing:1.8px}
h1{margin:0;font-family:Georgia,"Songti SC","SimSun",serif;font-size:23px;line-height:1.2;font-weight:700;letter-spacing:0}
.sidebar-intro{margin:0 17px 22px;padding:16px 14px 15px;background:#eaf1ed;border-left:3px solid #3c7c69;border-radius:0 4px 4px 0}
.intro-line{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:750;color:#31544b}
.intro-signal,.foot-dot{width:7px;height:7px;flex:none;background:#6fae7e;border-radius:50%;box-shadow:0 0 0 3px #6fae7e22}
.intro-count{margin-left:auto;font-size:10px;color:#628177;font-weight:600;white-space:nowrap}
.sidebar-intro p{margin:8px 0 0 15px;font-size:11px;color:#688077;line-height:1.55}
.search-wrap{padding:0 17px}
.search-wrap label{display:block;margin:0 0 8px;color:#72817c;font-size:10px;font-weight:800;letter-spacing:1px}
.search-field{display:flex;align-items:center;height:38px;gap:8px;padding:0 10px;background:#fff;border:1px solid #d9e1db;border-radius:5px;transition:border-color .2s}
.search-field:focus-within{border-color:#668e7d}
.search-field svg{width:16px;height:16px;fill:none;stroke:#82958c;stroke-width:1.8;stroke-linecap:round}
.search-field input{min-width:0;width:100%;border:0;outline:0;color:#263d38;background:transparent;font-size:12px}
.search-field input::placeholder{color:#9baaa2}
.search-field kbd{padding:1px 5px;border:1px solid #e2e6e1;border-radius:3px;color:#9aa8a1;background:#f8faf7;font-size:10px}
.filters{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;padding:16px 17px 17px}
.filters::-webkit-scrollbar{display:none}
.filter{border:1px solid #e0e5df;border-radius:4px;padding:5px 8px;background:#fff;color:#71837b;white-space:nowrap;font-size:10px;transition:background .2s,color .2s,border-color .2s}
.filter:hover{border-color:#89a89a;color:#2e5d4d}
.filter.active{background:#315f51;border-color:#315f51;color:#fff}
.list-heading{display:flex;justify-content:space-between;padding:0 23px 11px;color:#65776e;font-size:10px;font-weight:800;letter-spacing:.6px}
.list-heading span:last-child{color:#a1aaa5;font-weight:600;letter-spacing:0}
.zone-list{min-height:0;flex:1;overflow-y:auto;scrollbar-color:#c9d4ca transparent;scrollbar-width:thin;padding-bottom:12px}
.zone-item{display:flex;align-items:center;gap:10px;width:100%;min-height:65px;padding:10px 20px;border:0;border-left:3px solid transparent;border-bottom:1px solid #e9eee8;text-align:left;background:transparent;color:#33443e;transition:background .18s,border-color .18s}
.zone-item:hover{background:#f0f5f0}
.zone-item.active{background:#e7f0ea;border-left-color:#d9984d}
.zone-number{display:grid;place-items:center;width:28px;height:28px;flex:none;border:1px solid #d9e3db;border-radius:4px;color:#6d8878;background:#fff;font-size:10px;font-weight:750}
.zone-item.active .zone-number{background:#315f51;border-color:#315f51;color:#fff}
.zone-copy{min-width:0;flex:1;display:grid;gap:3px}
.zone-copy strong{font-size:12px;font-weight:700;line-height:1.25}
.zone-copy small{font-size:10px;color:#93a29a}
.zone-arrow{color:#a4b6a9;font-size:17px;line-height:1}
.zone-item.active .zone-arrow{color:#b5783d}
.empty-list{padding:26px 22px;color:#819187;font-size:12px;line-height:1.6}
.sidebar-foot{display:flex;align-items:center;gap:9px;min-height:46px;padding:0 20px;border-top:1px solid #e5ebe4;color:#9aaa9e;font-size:9px;white-space:nowrap}
.foot-dot{width:5px;height:5px;box-shadow:none}
.mobile-only{display:none!important}
.map-stage{position:relative;flex:1;min-width:0;overflow:hidden;background-color:#e5ebe7;background-image:radial-gradient(#9fb6aa50 .7px,transparent .7px);background-size:17px 17px}
.stage-top{position:absolute;z-index:3;left:26px;right:26px;top:25px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;pointer-events:none}
.stage-caption{display:grid;grid-template-columns:3px auto;column-gap:10px;row-gap:3px;align-items:center;max-width:60%;padding:10px 14px 10px 0;background:#eff3eeeb;border-radius:4px;backdrop-filter:blur(6px);pointer-events:auto}
.caption-rule{grid-row:span 2;align-self:stretch;width:3px;background:#bf8955}
.stage-caption>span:nth-child(2){font-family:Georgia,"Songti SC",serif;font-size:16px;font-weight:700;white-space:nowrap}
.stage-caption small{grid-column:2;font-size:10px;color:#789084;white-space:nowrap}
.marker-toggle{display:flex;align-items:center;gap:7px;border:1px solid #cbdad0;border-radius:4px;padding:8px 10px;background:#f8faf6f2;color:#547266;font-size:11px;font-weight:650;box-shadow:0 3px 8px #31514316;pointer-events:auto}
.marker-toggle[aria-pressed="false"]{color:#93a49a}
.toggle-mark{width:7px;height:7px;border-radius:50%;background:#bd8050;box-shadow:0 0 0 3px #e8cdb5}
.marker-toggle[aria-pressed="false"] .toggle-mark{background:#a4b1a8;box-shadow:none}
.map-viewport{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;outline:0}
.map-viewport.dragging{cursor:grabbing}
.scene{position:absolute;left:0;top:0;width:1125px;height:2000px;transform-origin:0 0;will-change:transform;box-shadow:0 16px 50px #263e3890,0 0 0 1px #fff8}
.scene>img{display:block;width:100%;height:100%;user-select:none;pointer-events:none}
#zone-layer{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.zone-shape{fill:rgba(255,255,255,0);stroke:transparent;stroke-width:3;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill .2s,stroke .2s}
.zone-shape:hover,.zone-shape.is-hovered{fill:#fff2d421;stroke:#ffefd0d9;stroke-width:3}
.zone-shape.is-active{fill:#f6b45e1f;stroke:#f8d492;stroke-width:3.5}
.zone-marker{pointer-events:none;filter:drop-shadow(0 2px 5px #172f2b99)}
.marker-halo{fill:#d6a15e63;stroke:#fff9e0a6;stroke-width:2}
.marker-disc{fill:#315f51;stroke:#fff9e8;stroke-width:3.5;transition:fill .2s,transform .2s;transform-box:fill-box;transform-origin:center}
.zone-marker.is-hovered .marker-disc,.zone-marker.is-active .marker-disc{fill:#ba7945;transform:scale(1.16)}
.marker-text{fill:#fff;font-family:system-ui,sans-serif;font-size:16px;font-weight:800;text-anchor:middle;dominant-baseline:middle;pointer-events:none}
.markers-hidden .zone-marker{display:none}
.stage-bottom{position:absolute;z-index:3;left:22px;right:22px;bottom:22px;display:flex;justify-content:space-between;align-items:end;gap:16px;pointer-events:none}
.map-hint{padding:9px 11px;border:1px solid #d5e0d5;border-radius:4px;color:#607e6f;background:#f8faf6ed;font-size:10px;box-shadow:0 3px 10px #23413718}
.hint-icon{margin-right:5px;color:#c89754}
.map-controls{display:flex;align-items:center;gap:0;height:39px;border:1px solid #cbdad0;border-radius:5px;background:#f8faf6fa;box-shadow:0 5px 18px #2341372e;pointer-events:auto;overflow:hidden}
.map-controls button{width:39px;height:39px;border:0;background:transparent;color:#315f51;font-size:21px;line-height:1}
.map-controls button:hover{background:#e9f0e9}
.map-controls #reset-view{font-size:23px}
#zoom-level{min-width:40px;text-align:center;color:#63796e;font-size:10px;font-weight:750}
.control-divider{height:18px;width:1px;background:#dce4db;margin:0 3px}
.detail{z-index:5;flex:0 0 0;width:0;min-width:0;overflow:hidden;background:#fff;border-left:0 solid #dce3dc;transition:flex-basis .28s ease,width .28s ease,border-width .28s ease;display:flex;flex-direction:column}
.detail.open{flex-basis:324px;width:324px;border-left-width:1px}
.detail-head{height:60px;flex:none;display:flex;justify-content:space-between;align-items:center;padding:0 20px 0 23px;border-bottom:1px solid #e8eee7}
.detail-heading{color:#6c8375;font-size:10px;font-weight:800;letter-spacing:1px}
.icon-button{display:grid;place-items:center;flex:none;width:30px;height:30px;border:1px solid #dae4db;border-radius:4px;background:#fff;color:#62806e;font-size:21px;line-height:1}
.icon-button:hover{background:#eef4ed;color:#2f5e4e}
.detail-scroll{flex:1;overflow-y:auto;min-height:0}
.detail-image-wrap{position:relative;height:240px;overflow:hidden;background:#d9e5df}
.detail-image-wrap img{display:block;width:100%;height:100%;object-fit:cover}
.image-caption{position:absolute;left:14px;bottom:13px;padding:5px 8px;background:#203e36e0;border-radius:3px;color:#fff;font-size:9px}
.detail-body{padding:21px 23px 32px}
.detail-meta{display:flex;justify-content:space-between;color:#ab744c;font-size:10px;font-weight:750;letter-spacing:.6px}
.detail-meta span:last-child{color:#9aaa9f}
.detail h2{margin:12px 0 12px;font-family:Georgia,"Songti SC","SimSun",serif;color:#253c33;font-size:25px;line-height:1.35;letter-spacing:0}
.detail p{margin:0;color:#6a8073;font-size:12px;line-height:1.85}
.detail-section-title{margin-top:30px;padding-top:18px;border-top:1px solid #e7eee7;color:#8a9d8c;font-size:10px;font-weight:800;letter-spacing:.8px}
.feature-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.feature-list span{border:1px solid #dce7dd;border-radius:3px;padding:6px 9px;background:#f3f7f1;color:#557462;font-size:10px}
.locate-button{width:100%;margin-top:28px;border:1px solid #416c56;border-radius:4px;padding:10px;background:#315f51;color:#fff;font-size:11px;font-weight:700;transition:background .2s}
.locate-button:hover{background:#234b3f}
.locate-button span{margin-right:6px;font-size:16px;vertical-align:-1px}
.detail-foot{display:flex;align-items:center;justify-content:space-between;flex:none;height:55px;padding:0 17px;border-top:1px solid #e8eee7}
.detail-foot button{border:0;background:transparent;color:#4a7360;font-size:11px;font-weight:750}
.detail-foot button:hover{color:#a66a3c}
.detail-foot>span{color:#a2afa5;font-size:10px}
.mobile-scrim{display:none}
@media(max-width:1090px){.sidebar{flex-basis:248px}.detail.open{flex-basis:290px;width:290px}.detail-image-wrap{height:205px}.sidebar-head{padding-left:17px}.zone-item{padding-left:15px}}
@media(max-width:760px){
  .mobile-only{display:flex!important}
  .app{display:block}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:min(320px,86vw);z-index:15;transform:translateX(-104%);transition:transform .24s ease;box-shadow:8px 0 34px #12312640}
  .sidebar.open{transform:translateX(0)}
  .close-menu{margin-left:auto}
  .mobile-scrim:not([hidden]){display:block;position:fixed;inset:0;background:#12312877;z-index:14}
  .map-stage{width:100%;height:100dvh}
  .mobile-bar{position:absolute;z-index:4;top:0;left:0;right:0;height:59px;align-items:center;gap:11px;padding:0 14px;background:#f9faf7ed;border-bottom:1px solid #dce6dd;backdrop-filter:blur(10px)}
  .mobile-brand{display:grid;gap:1px;line-height:1.2}
  .mobile-brand strong{font-family:Georgia,"Songti SC",serif;font-size:16px}
  .mobile-brand span{color:#91a194;font-size:9px}
  .mobile-count{margin-left:auto;color:#91a094;font-size:10px}
  .stage-top{top:69px;left:14px;right:14px}
  .stage-caption{padding:6px 9px 6px 0;max-width:58%}
  .stage-caption>span:nth-child(2){font-size:13px}
  .stage-caption small{font-size:9px}
  .marker-toggle{padding:7px;font-size:10px}
  .stage-bottom{left:12px;right:12px;bottom:14px}
  .map-hint{font-size:9px;max-width:45%;line-height:1.3}
  .map-controls{height:36px}.map-controls button{width:34px;height:36px}
  .detail{position:fixed;left:0;right:0;bottom:0;z-index:10;width:100%;height:min(57dvh,490px);max-height:490px;flex-basis:auto!important;transform:translateY(105%);transition:transform .28s ease;box-shadow:0 -10px 38px #193a2c55;border-left:0;border-top:1px solid #dce3dc;border-radius:9px 9px 0 0}
  .detail.open{width:100%;transform:translateY(0)}
  .detail-head{height:45px;padding:0 16px}
  .detail-image-wrap{height:170px}
  .detail-body{padding:16px 19px 30px}
  .detail h2{font-size:23px;margin:8px 0}
  .detail-section-title{margin-top:17px;padding-top:14px}
  .locate-button{margin-top:17px}
  .detail-foot{height:47px}
}
@media(max-width:420px){.stage-caption small{display:none}.caption-rule{grid-row:1}.map-hint{display:none}.stage-bottom{justify-content:flex-end}.detail{height:min(60dvh,505px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ===== 嵌入模式（抽屉内嵌 / ?embed=1）：只留地图本体，导航类界面全隐 ===== */
html.embed-mode .sidebar,
html.embed-mode .mobile-bar,
html.embed-mode .mobile-scrim,
html.embed-mode .scene-hint { display: none !important; }
html.embed-mode .app { display: block; background: #10101c; }
html.embed-mode .map-stage { position: fixed; inset: 0; }
html.embed-mode .stage-top { top: 12px; left: 12px; right: 12px; }
html.embed-mode .detail { z-index: 60; }