/* Shekou's map-first introduction. All additions are scoped to this page. */
main.sk-site.shekou-street-page [data-sk-street],
main.sk-site.shekou-street-page [data-sk-street] *,
main.sk-site.shekou-street-page [data-sk-street] *::before,
main.sk-site.shekou-street-page [data-sk-street] *::after { box-sizing:border-box; }
main.sk-site.shekou-street-page [data-sk-street] [hidden] { display:none!important; }
main.sk-site.shekou-street-page [data-sk-street] :is(section,div,nav,form,label) { min-width:0; }
main.sk-site.shekou-street-page [data-sk-street] :is(a,button,input):focus-visible { outline:3px solid #d99000; outline-offset:3px; }

/* Match the area planner's pale geographic canvas and compact floating card. */
main.sk-site.shekou-street-page .sk-street-hero { position:relative; isolation:isolate; height:470px; min-height:470px; overflow:hidden; background:#e1f0f7; }
main.sk-site.shekou-street-page .sk-street-stage { position:absolute; z-index:0; inset:0; width:100%; height:100%; overflow:hidden; background:#e3f1f7; }
main.sk-site.shekou-street-page .sk-street-stage > :is([data-sk-street-fallback],[data-sk-street-leaflet]) { position:absolute; inset:0; width:100%; height:100%; margin:0; border:0; border-radius:0; }
main.sk-site.shekou-street-page [data-sk-street-fallback] > svg { display:block; width:100%; height:100%; max-width:none; }
@media (min-width:1001px) {
  main.sk-site.shekou-street-page [data-sk-street-fallback] { padding-left:400px; }
}
main.sk-site.shekou-street-page [data-sk-street-leaflet] { display:block; visibility:hidden; background:#e3f1f7; font-family:Arial,"Microsoft YaHei",sans-serif; }
main.sk-site.shekou-street-page [data-sk-street-mode="street-map"] [data-sk-street-leaflet],
main.sk-site.shekou-street-page[data-sk-street-mode="street-map"] [data-sk-street-leaflet] { visibility:visible; }
main.sk-site.shekou-street-page [data-sk-street-mode="street-map"] [data-sk-street-fallback],
main.sk-site.shekou-street-page[data-sk-street-mode="street-map"] [data-sk-street-fallback] { visibility:hidden; pointer-events:none; }
main.sk-site.shekou-street-page .sk-street-stage .leaflet-tile { max-width:none!important; max-height:none!important; }
main.sk-site.shekou-street-page .sk-street-stage .leaflet-pane svg { max-width:none!important; }
main.sk-site.shekou-street-page .sk-street-stage .leaflet-top.leaflet-left { left:auto; right:0; }
main.sk-site.shekou-street-page .sk-street-stage .leaflet-top.leaflet-left .leaflet-control { float:right; margin-right:12px; margin-left:0; }
main.sk-site.shekou-street-page .sk-street-stage .leaflet-top.leaflet-right .leaflet-control { margin-right:12px; }
main.sk-site.shekou-street-page .sk-street-stage .leaflet-control-zoom a { color:#19496f; }
main.sk-site.shekou-street-page .sk-street-stage .leaflet-control-attribution { max-width:calc(100vw - 18px); padding:2px 5px; color:#325b79; background:#fffffff0; font-size:10px; line-height:1.35; }
main.sk-site.shekou-street-page .sk-street-stage .leaflet-control-attribution a { color:#075cb1; }
main.sk-site.shekou-street-page .sk-street-stage svg a { cursor:pointer; }
main.sk-site.shekou-street-page .sk-street-stage svg a:focus-visible { outline:none; filter:drop-shadow(0 0 3px #005bdd); }

main.sk-site.shekou-street-page .sk-street-intro { position:relative; z-index:600; width:365px; max-width:calc(100% - 80px); margin:34px 0 24px max(28px,calc((100vw - 1370px)/2)); padding:21px 22px 16px; border:1px solid #d1e4f2; border-radius:7px; color:#0b276b; background:#f6fcfff2; box-shadow:0 5px 22px #1b5a8026; backdrop-filter:blur(4px); }
main.sk-site.shekou-street-page .sk-street-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:0 0 9px; color:#4e7094; font-size:11px; line-height:1.4; }
main.sk-site.shekou-street-page .sk-street-breadcrumb a { color:#315f92; }
main.sk-site.shekou-street-page .sk-street-intro h1 { margin:0; color:#072367; font-size:36px; font-weight:800; line-height:1.03; letter-spacing:-.045em; text-shadow:none; }
main.sk-site.shekou-street-page .sk-street-intro h1 span { display:block; }
main.sk-site.shekou-street-page .sk-street-intro .sk-street-subtitle { margin:7px 0 0!important; color:#0b2b6a; font-size:17px; font-weight:700; line-height:1.3; }
main.sk-site.shekou-street-page .sk-street-intro > p:not(.sk-street-subtitle) { margin:10px 0 0; color:#46668e; font-size:13px; line-height:1.45; }
main.sk-site.shekou-street-page .sk-street-actions { display:grid; grid-template-columns:1.1fr 1fr; gap:9px; margin-top:15px; }
main.sk-site.shekou-street-page .sk-street-actions .sk-button { width:100%; min-height:44px; min-width:0; gap:6px; padding:9px 8px; font-size:12px; }
main.sk-site.shekou-street-page .sk-street-actions .sk-button svg { flex-basis:17px; width:17px; height:17px; }
main.sk-site.shekou-street-page .sk-street-perks { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:15px 0 0!important; padding:0; list-style:none; }
main.sk-site.shekou-street-page .sk-street-perks > * { display:flex; flex-direction:column; gap:5px; min-width:0; color:#41648d; font-size:9px; line-height:1.35; }
main.sk-site.shekou-street-page .sk-street-perks strong { color:#0068cf; font-size:17px; line-height:1.2; font-weight:700; }
main.sk-site.shekou-street-page .sk-street-perks svg { width:21px; height:21px; color:#0075c9; }

main.sk-site.shekou-street-page .sk-street-legend { position:absolute; z-index:650; top:18px; right:66px; display:grid; gap:6px; max-width:220px; margin:0; padding:11px 12px; border:1px solid #d4e5ef; border-radius:6px; color:#2f537f; background:#ffffffed; box-shadow:0 2px 9px #285a761a; font-size:11px; line-height:1.3; list-style:none; }
main.sk-site.shekou-street-page .sk-street-legend > :is(span,li,div) { display:flex; align-items:center; gap:8px; }
main.sk-site.shekou-street-page .sk-street-legend i { display:inline-block; flex:none; width:22px; border-top:3px solid var(--sk-legend-color,#1aad95); border-radius:3px; }
main.sk-site.shekou-street-page .sk-street-legend .sk-line-2 { color:#f27924; border-color:#f27924; }
main.sk-site.shekou-street-page .sk-street-legend .sk-line-12 { color:#a486c7; border-color:#a486c7; }
main.sk-site.shekou-street-page .sk-street-legend .sk-line-5 { color:#9b3eae; border-color:#9b3eae; }
main.sk-site.shekou-street-page .sk-street-legend svg { flex:none; width:16px; height:16px; color:#1c4f8e; }
main.sk-site.shekou-street-page .sk-street-legend small { color:#5a7898; font-size:10px; }
main.sk-site.shekou-street-page .sk-street-views { position:absolute; z-index:650; right:26px; bottom:28px; display:flex; gap:4px; max-width:calc(100% - 28px); padding:4px; border:1px solid #d9e6f1; border-radius:6px; background:#fffffff2; box-shadow:0 2px 9px #285a761a; }
main.sk-site.shekou-street-page .sk-street-views button { display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; min-height:36px; padding:7px 13px; border:0; border-radius:4px; color:#0d4a9b; background:#fff; font-family:inherit; font-size:12px; line-height:1.25; cursor:pointer; }
main.sk-site.shekou-street-page .sk-street-views button:is(.is-active,[aria-pressed="true"],[aria-selected="true"]) { color:#fff; background:var(--sk-blue,#0068f5); }
main.sk-site.shekou-street-page .sk-street-views button:hover { box-shadow:inset 0 0 0 1px #7aaef4; }
main.sk-site.shekou-street-page .sk-street-views svg { flex:none; width:17px; height:17px; }

/* Marker pills retain readable guide names on the live street map. */
main.sk-site.shekou-street-page :is(.sk-street-area-marker,.sk-street-area-icon) { border:0; background:transparent; }
main.sk-site.shekou-street-page .sk-street-area-label { width:max-content; max-width:180px; padding:5px 8px; border:1px solid #fff; border-left:3px solid var(--sk-area-color,#0068f5); border-radius:6px; color:#173f70; background:#fffffff2; box-shadow:0 2px 7px #12445b33; font-family:Arial,"Microsoft YaHei",sans-serif; font-size:11px; font-weight:700; line-height:1.2; text-align:center; white-space:nowrap; }
main.sk-site.shekou-street-page .sk-street-area-label a { color:inherit; text-decoration:none; }
main.sk-site.shekou-street-page .sk-street-area-label a:hover { color:var(--sk-area-color,#0054dd); text-decoration:underline; }
main.sk-site.shekou-street-page .sk-street-area-label small { display:block; margin-top:2px; color:#50718e; font-size:10px; font-weight:400; }
main.sk-site.shekou-street-page .sk-street-area-label:has(button) { padding:0; }
main.sk-site.shekou-street-page .sk-street-area-label.is-selected { outline:2px solid #0054dd; outline-offset:2px; }
main.sk-site.shekou-street-page .sk-street-popup { color:#244a75; font-family:Arial,"Microsoft YaHei",sans-serif; font-size:12px; line-height:1.45; }
main.sk-site.shekou-street-page .sk-street-popup > strong { color:#12366d; font-size:15px; }
main.sk-site.shekou-street-page .sk-street-popup > p { margin:6px 0; }
main.sk-site.shekou-street-page .sk-street-popup > a { display:inline-flex; align-items:center; min-height:32px; color:#0054dd; }

/* The full-stage guide list remains usable without a map provider. */
main.sk-site.shekou-street-page [data-sk-street-list] { position:absolute; z-index:450; inset:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-content:center; gap:10px; padding:30px 80px 82px 425px; background:#eff7ff; }
main.sk-site.shekou-street-page [data-sk-street-list] > a { display:flex; flex-direction:column; justify-content:center; gap:5px; min-width:0; min-height:78px; padding:12px; border:1px solid #d7e6f5; border-left:3px solid var(--sk-area-color,#0068f5); border-radius:6px; color:#164a86; background:#fff; font-size:13px; line-height:1.3; text-decoration:none; }
main.sk-site.shekou-street-page [data-sk-street-list] > a:hover { border-color:#80b1f1; background:#f8fcff; text-decoration:none; }
main.sk-site.shekou-street-page [data-sk-street-list] :is(strong,h3) { color:#164a86; font-size:14px; line-height:1.2; }
main.sk-site.shekou-street-page [data-sk-street-list] :is(p,small,span) { margin:0; color:#56779b; font-size:11px; line-height:1.35; }
main.sk-site.shekou-street-page [data-sk-street-view="list"] .sk-street-legend,
main.sk-site.shekou-street-page .sk-street-hero.is-list-view .sk-street-legend { display:none; }
main.sk-site.shekou-street-page .sk-street-hero.is-list-view [data-sk-street-fallback],
main.sk-site.shekou-street-page .sk-street-hero.is-list-view [data-sk-street-leaflet] { visibility:hidden; pointer-events:none; }

/* A single planning band connects the map with the guide sections below. */
main.sk-site.shekou-street-page .sk-street-planning { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,300px); gap:11px 18px; width:min(1370px,calc(100% - 56px)); margin:13px auto 0; padding:14px; border:1px solid var(--sk-line,#dce9fa); border-radius:7px; background:#fff; }
main.sk-site.shekou-street-page .sk-street-planning-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 12px; grid-column:1 / -1; }
main.sk-site.shekou-street-page .sk-street-planning-head h2 { margin:0; color:#0031df; font-size:25px; line-height:1.12; }
main.sk-site.shekou-street-page .sk-street-planning-head p { margin:0; color:#557399; font-size:12px; line-height:1.4; }
main.sk-site.shekou-street-page .sk-street-planning :is(.sk-map-filters,.sk-filters) { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); align-items:stretch; gap:6px; width:100%; margin:0; padding:0; }
main.sk-site.shekou-street-page .sk-street-planning :is(.sk-map-filters,.sk-filters) a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-width:0; min-height:64px; padding:8px 4px; border:1px solid #d6e4f7; border-radius:5px; color:#18417e; background:#fff; font-size:12px; line-height:1.25; text-align:center; text-decoration:none; }
main.sk-site.shekou-street-page .sk-street-planning :is(.sk-map-filters,.sk-filters) a:hover { border-color:#79aef5; background:#f2f8ff; }
main.sk-site.shekou-street-page .sk-street-planning :is(.sk-map-filters,.sk-filters) a:is(.is-active,[aria-current="true"],[aria-current="page"],[aria-pressed="true"]) { color:#0052d6; border-color:#79aef5; background:#eaf3ff; box-shadow:inset 0 0 0 1px #bed7fa; }
main.sk-site.shekou-street-page .sk-street-planning :is(.sk-map-filters,.sk-filters) svg { width:22px; height:22px; color:#0069f3; }
main.sk-site.shekou-street-page .sk-street-search { display:flex; align-items:stretch; gap:6px; align-self:center; min-width:0; margin:0; }
main.sk-site.shekou-street-page .sk-street-search input { flex:1 1 0; width:100%; min-width:0; min-height:40px; padding:9px 10px; border:1px solid #cadcf5; border-radius:5px; color:#173c7a; background:#fff; font-family:inherit; font-size:12px; line-height:1.25; }
main.sk-site.shekou-street-page .sk-street-search button { display:flex; flex:none; align-items:center; justify-content:center; gap:5px; min-height:40px; padding:8px 12px; border:1px solid #0068f5; border-radius:5px; color:#fff; background:#0068f5; font-family:inherit; font-size:12px; line-height:1.25; cursor:pointer; }
main.sk-site.shekou-street-page .sk-street-search button:hover { border-color:#0057d2; background:#0057d2; }
main.sk-site.shekou-street-page .sk-street-search button svg { width:17px; height:17px; }
main.sk-site.shekou-street-page .sk-street-status { grid-column:1 / -1; margin:0; color:#557399; font-size:11px; line-height:1.4; }
main.sk-site.shekou-street-page .sk-street-status:empty { display:none; }
main.sk-site.shekou-street-page .sk-street-guide-list { display:flex; flex-wrap:wrap; gap:6px 16px; grid-column:1 / -1; margin:0; padding:9px 0 0; border-top:1px solid #e6effa; list-style:none; }
main.sk-site.shekou-street-page .sk-street-guide-list a { display:inline-flex; flex-wrap:wrap; gap:0 5px; max-width:100%; overflow-wrap:anywhere; align-items:center; min-height:28px; color:#0054dd; font-size:12px; line-height:1.35; }

@media (max-width:1200px) {
  main.sk-site.shekou-street-page .sk-street-planning { grid-template-columns:minmax(0,1fr); }
  main.sk-site.shekou-street-page .sk-street-search { width:min(430px,100%); }
  main.sk-site.shekou-street-page [data-sk-street-list] { gap:8px; padding-right:24px; padding-left:420px; }
}
@media (max-width:1000px) {
  main.sk-site.shekou-street-page .sk-street-hero { --sk-street-map-height:430px; display:flex; flex-direction:column; height:auto; min-height:0; }
  main.sk-site.shekou-street-page .sk-street-intro { order:0; flex:none; width:calc(100% - 48px); max-width:730px; margin:21px auto; padding:18px 20px; }
  main.sk-site.shekou-street-page .sk-street-stage { position:relative; order:1; flex:none; inset:auto; height:var(--sk-street-map-height); min-height:var(--sk-street-map-height); }
  main.sk-site.shekou-street-page .sk-street-actions { max-width:380px; }
  main.sk-site.shekou-street-page .sk-street-perks { max-width:440px; }
  main.sk-site.shekou-street-page .sk-street-legend { top:auto; right:58px; bottom:calc(var(--sk-street-map-height) - 111px); gap:5px; max-width:205px; padding:9px 10px; font-size:10px; }
  main.sk-site.shekou-street-page .sk-street-views { right:18px; bottom:25px; }
  main.sk-site.shekou-street-page [data-sk-street-list] { gap:10px; padding:24px 24px 78px; }
  main.sk-site.shekou-street-page .sk-street-planning { width:calc(100% - 40px); }
}
@media (max-width:650px) {
  main.sk-site.shekou-street-page .sk-street-hero { --sk-street-map-height:400px; }
  main.sk-site.shekou-street-page .sk-street-intro { width:calc(100% - 28px); margin:14px auto; padding:17px; }
  main.sk-site.shekou-street-page .sk-street-intro h1 { font-size:34px; }
  main.sk-site.shekou-street-page .sk-street-intro .sk-street-subtitle { font-size:16px; }
  main.sk-site.shekou-street-page .sk-street-actions { gap:8px; }
  main.sk-site.shekou-street-page .sk-street-actions .sk-button { padding-inline:6px; font-size:11px; }
  main.sk-site.shekou-street-page .sk-street-perks { gap:7px; }
  main.sk-site.shekou-street-page .sk-street-legend { top:auto; right:auto; left:10px; bottom:24px; max-width:175px; padding:8px; }
  main.sk-site.shekou-street-page .sk-street-legend > :not(:first-child) { display:none; }
  main.sk-site.shekou-street-page .sk-street-views { right:12px; bottom:27px; }
  main.sk-site.shekou-street-page .sk-street-views button { min-height:40px; padding:7px 10px; font-size:11px; }
  main.sk-site.shekou-street-page [data-sk-street-list] { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; padding:16px 12px 83px; }
  main.sk-site.shekou-street-page [data-sk-street-list] > a { gap:4px; min-height:85px; padding:8px 7px; font-size:11px; }
  main.sk-site.shekou-street-page [data-sk-street-list] :is(strong,h3) { font-size:12px; }
  main.sk-site.shekou-street-page [data-sk-street-list] :is(p,small,span) { font-size:10px; }
  main.sk-site.shekou-street-page .sk-street-area-label { max-width:145px; padding:4px 6px; font-size:10px; }
  main.sk-site.shekou-street-page .sk-street-area-label small { font-size:9px; }
  main.sk-site.shekou-street-page .sk-street-planning { width:calc(100% - 28px); gap:10px; padding:11px; }
  main.sk-site.shekou-street-page .sk-street-planning-head h2 { font-size:23px; }
  main.sk-site.shekou-street-page .sk-street-planning-head p { flex-basis:100%; font-size:12px; }
  main.sk-site.shekou-street-page .sk-street-planning :is(.sk-map-filters,.sk-filters) { grid-template-columns:repeat(4,minmax(0,1fr)); }
  main.sk-site.shekou-street-page .sk-street-planning :is(.sk-map-filters,.sk-filters) a { min-height:62px; padding:7px 3px; font-size:12px; }
  main.sk-site.shekou-street-page .sk-street-search { width:100%; }
  main.sk-site.shekou-street-page .sk-street-search input { font-size:16px; }
  main.sk-site.shekou-street-page .sk-street-guide-list { gap:4px 12px; }
}
@media (max-width:360px) {
  main.sk-site.shekou-street-page .sk-street-hero { --sk-street-map-height:430px; }
  main.sk-site.shekou-street-page .sk-street-intro { padding:15px; }
  main.sk-site.shekou-street-page .sk-street-intro h1 { font-size:32px; }
  main.sk-site.shekou-street-page .sk-street-actions .sk-button { gap:4px; font-size:10px; }
  main.sk-site.shekou-street-page .sk-street-actions .sk-button svg { flex-basis:15px; width:15px; height:15px; }
  main.sk-site.shekou-street-page .sk-street-legend { max-width:180px; }
  main.sk-site.shekou-street-page [data-sk-street-list] { gap:6px; padding-inline:10px; }
  main.sk-site.shekou-street-page [data-sk-street-list] > a { min-height:94px; padding:7px 5px; }
  main.sk-site.shekou-street-page .sk-street-planning-head h2 { font-size:21px; }
}
@media (prefers-reduced-motion:reduce) {
  main.sk-site.shekou-street-page [data-sk-street] *,
  main.sk-site.shekou-street-page [data-sk-street] *::before,
  main.sk-site.shekou-street-page [data-sk-street] *::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}
@media (forced-colors:active) {
  main.sk-site.shekou-street-page :is(.sk-street-intro,.sk-street-legend,.sk-street-views,.sk-street-planning,.sk-street-area-label) { border-color:CanvasText; color:CanvasText; background:Canvas; }
  main.sk-site.shekou-street-page .sk-street-views button:is(.is-active,[aria-pressed="true"]) { color:HighlightText; background:Highlight; }
}
@media print {
  main.sk-site.shekou-street-page .sk-street-hero { height:auto; min-height:0; overflow:visible; background:#fff; }
  main.sk-site.shekou-street-page .sk-street-intro { width:100%; max-width:none; margin:0; padding:12px 0; border:0; background:#fff; box-shadow:none; }
  main.sk-site.shekou-street-page :is(.sk-street-stage,.sk-street-actions,.sk-street-legend,.sk-street-views,.sk-street-search) { display:none!important; }
  main.sk-site.shekou-street-page .sk-street-planning { width:100%; margin:0; }
}