.china-ports-shell{--cp-ink:#07101d;--cp-ink2:#0b1525;--cp-panel:#0e1a2c;--cp-panel2:#101f35;--cp-line:#263854;--cp-line2:#38567d;--cp-text:#e7eef8;--cp-muted:#94a8c2;--cp-dim:#647c9b;--cp-blue:#4c7fd4;--cp-blue2:#78a8f5;--cp-cyan:#6dc6ee;--cp-orange:#f0a340;--cp-green:#49c58b;--cp-shadow:0 26px 80px rgba(0,0,0,.30)}
*{box-sizing:border-box}html{background:#07101d}body.china-ports-page{margin:0;background:radial-gradient(circle at 52% -10%,rgba(76,127,212,.16),transparent 31%),linear-gradient(180deg,#0a1424 0,#07101d 55%,#060d18 100%);color:#e7eef8;font-family:Inter,Geist,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}.china-ports-shell{width:min(1460px,calc(100% - 34px));margin:0 auto}.hero{padding:38px 0 22px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:end}.eyebrow{color:#6f9eea;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.hero h1{margin:9px 0 10px;color:#fff;font:400 clamp(38px,4.3vw,66px)/1.01 Georgia,"Times New Roman",serif;max-width:920px}.hero p{max-width:760px;margin:0;color:#9fb1c8;line-height:1.65;font-size:15px}.hero-badge{align-self:center;border:1px solid #2a3c58;border-radius:999px;padding:9px 13px;color:#8ea4bf;background:rgba(8,22,38,.62);font-size:11px}.locator{position:relative;z-index:30;margin:0 0 14px;padding:13px;border:1px solid #283b59;border-radius:15px;background:linear-gradient(180deg,rgba(15,30,51,.95),rgba(10,23,40,.96));box-shadow:var(--cp-shadow)}.locator-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}.search-wrap{position:relative}.search-label{display:block;margin:0 0 8px;color:#6f88a8;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.searchbox{display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;border:1px solid #314968;border-radius:10px;background:#091525}.searchbox:focus-within{border-color:#4c7fd4;box-shadow:0 0 0 3px rgba(76,127,212,.10)}.searchbox svg{width:18px;color:#6f89a9}.searchbox input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:#fff;font-size:15px}.searchbox input::placeholder{color:#607691}.reset-btn{align-self:end;height:48px;padding:0 18px;border:1px solid #314968;border-radius:10px;background:#0d1c30;color:#afc1d7;cursor:pointer;font-weight:700}.reset-btn:hover{border-color:#4c7fd4;color:#fff}.suggestions{position:absolute;left:0;right:0;top:74px;z-index:60;display:none;max-height:330px;overflow:auto;border:1px solid #345074;border-radius:12px;background:#0a1728;box-shadow:0 22px 50px rgba(0,0,0,.4)}.suggestions.show{display:block}.suggestion{width:100%;display:grid;grid-template-columns:1fr auto;gap:15px;text-align:left;padding:12px 14px;border:0;border-bottom:1px solid rgba(54,79,113,.55);background:transparent;color:#fff;cursor:pointer}.suggestion:last-child{border-bottom:0}.suggestion:hover,.suggestion.is-active{background:#10243e}.suggestion strong{display:block;font-size:13px}.suggestion small{display:block;margin-top:3px;color:#7189a8}.suggestion code{align-self:center;color:#79a7f3;font:700 10px ui-monospace,monospace}.app{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:stretch}.map-card,.detail-card{border:1px solid #273a57;border-radius:18px;background:linear-gradient(180deg,rgba(12,27,46,.94),rgba(7,18,32,.97));box-shadow:var(--cp-shadow)}.map-card{position:relative;min-height:710px;overflow:hidden}.map-top{position:absolute;z-index:20;left:15px;right:15px;top:15px;display:flex;justify-content:space-between;gap:12px;pointer-events:none}.map-state,.map-controls{pointer-events:auto}.map-state{display:flex;align-items:center;gap:9px;padding:8px 11px;border:1px solid rgba(65,91,127,.75);border-radius:999px;background:rgba(5,16,29,.74);backdrop-filter:blur(12px);color:#9db0c7;font-size:11px}.map-state i{width:7px;height:7px;border-radius:50%;background:#4fc58e;box-shadow:0 0 13px #4fc58e}.map-controls{display:flex;gap:7px}.map-controls button{width:37px;height:37px;border:1px solid #334a69;border-radius:9px;background:rgba(7,20,34,.78);color:#b7c8dc;font-size:17px;cursor:pointer}.map-controls button:hover{border-color:#4c7fd4;color:#fff}.map-stage{position:absolute;inset:0;background:radial-gradient(circle at 76% 47%,rgba(61,120,201,.11),transparent 26%),linear-gradient(rgba(68,100,145,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(68,100,145,.035) 1px,transparent 1px),#071525;background-size:auto,34px 34px,34px 34px,auto}.map-stage svg{width:100%;height:100%;display:block;touch-action:none;overscroll-behavior:contain;user-select:none;cursor:grab}.map-stage svg.dragging{cursor:grabbing}.china-province{fill:#142238;stroke:#304563;stroke-width:.9;vector-effect:non-scaling-stroke;transition:fill .18s,opacity .18s,stroke .18s;cursor:pointer}.china-province:nth-child(3n){fill:#132036}.china-province:nth-child(4n){fill:#15253c}.china-province:hover,.china-province.is-hovered{fill:#1b3150;stroke:#5377a8}.china-province.is-active{fill:#1e3c64;stroke:#79a7f3;opacity:1}.china-province.is-dimmed{opacity:.38}.china-province.is-dimmed:hover,.china-province.is-dimmed.is-hovered{opacity:1;fill:#1b3150;stroke:#79a7f3;stroke-width:1.35}.china-province.is-related{fill:#1a2e49;opacity:.82}.port-marker{cursor:pointer}.port-marker .hit{fill:transparent;stroke:none;pointer-events:all}.port-marker .halo{fill:rgba(76,127,212,.12);stroke:#4c7fd4;stroke-width:1.2;opacity:0;vector-effect:non-scaling-stroke}.port-marker .dot{fill:#78a8f5;stroke:#eaf3ff;stroke-width:1.6;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px rgba(76,127,212,.8))}.port-marker.regional .dot{fill:#79a9c8;stroke:#b6cada}.port-marker.river .dot{fill:#e5a04b;stroke:#ffd39d}.port-marker text{font-size:11px;font-weight:750;fill:#e8f1fc;paint-order:stroke;stroke:#071525;stroke-width:3px;stroke-linejoin:round;pointer-events:auto;cursor:pointer}.port-marker .code-label{font-size:8px;fill:#879fbd;font-weight:600}.port-marker .label{opacity:0;transition:opacity .15s}.port-marker.major .label,.port-marker.is-near .label,.port-marker.is-selected .label{opacity:1}.port-marker.is-dimmed{opacity:.18}.port-marker.is-selected .halo{opacity:1}.port-marker.is-selected .dot{fill:#fff;stroke:#4c7fd4}.port-marker.is-selected .halo{animation:pulse 1.8s ease-out infinite}@keyframes pulse{0%{r:10;opacity:.85}70%{r:24;opacity:.08}100%{r:25;opacity:0}}.province-tip{position:absolute;z-index:35;display:none;pointer-events:none;padding:7px 9px;border:1px solid #3c587d;border-radius:8px;background:rgba(5,17,31,.93);color:#dce8f7;font-size:10px;box-shadow:0 10px 30px rgba(0,0,0,.3)}.province-tip.show{display:block}.map-legend{position:absolute;z-index:19;left:16px;bottom:15px;display:flex;gap:12px;flex-wrap:wrap;padding:8px 10px;border:1px solid rgba(54,77,108,.72);border-radius:9px;background:rgba(5,17,30,.75);color:#768da9;font-size:9px}.map-legend span{display:flex;align-items:center;gap:6px}.map-legend i{width:7px;height:7px;border-radius:50%;background:#78a8f5}.map-legend .river i{background:#e5a04b}.detail-card{min-height:710px;padding:20px;display:flex;flex-direction:column}.detail-kicker{display:flex;justify-content:space-between;gap:10px;color:#6f8eb7;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.detail-kicker code{color:#79a7f3}.detail-name{margin:13px 0 7px;color:#fff;font:400 31px/1.03 Georgia,"Times New Roman",serif}.detail-sub{color:#8ba1bb;font-size:12px}.where-box{margin:18px 0 0;padding:15px;border:1px solid #2a405f;border-radius:12px;background:linear-gradient(145deg,rgba(76,127,212,.11),rgba(13,29,49,.3))}.where-box small{display:block;color:#6791d6;font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.where-box strong{display:block;margin:7px 0 5px;color:#f0f6ff;font-size:14px}.where-box p{margin:0;color:#93a9c2;font-size:12px;line-height:1.6}.fact-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:11px}.fact{min-height:76px;padding:11px;border:1px solid #263c59;border-radius:11px;background:#0b1a2d}.fact span{display:block;color:#657e9d;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.fact strong{display:block;margin-top:6px;color:#dce8f6;font-size:12px;line-height:1.35}.nearby{margin-top:17px;padding-top:15px;border-top:1px solid #263a55}.nearby-head{display:flex;justify-content:space-between;gap:10px;align-items:end}.nearby h3{margin:0;color:#dbe7f5;font-size:12px}.nearby small{color:#617a99;font-size:9px}.near-list{display:flex;flex-direction:column;margin-top:7px}.near-item{width:100%;display:grid;grid-template-columns:18px 1fr auto;gap:8px;align-items:center;padding:9px 0;border:0;border-bottom:1px solid rgba(46,68,96,.55);background:transparent;color:#a8bbd0;font-size:11px;text-align:left;cursor:pointer}.near-item:hover{background:rgba(24,55,92,.28)}.near-item b{color:#e5effa}.near-index{display:grid;place-items:center;width:18px;height:18px;border:1px solid #2e4b71;border-radius:5px;color:#78a8f5;font-size:8px}.near-dist{color:#647e9f}.near-cities{margin-top:15px}.nearby.hidden{display:none}.province-port-list{display:flex;flex-direction:column;margin-top:8px}.province-port-btn{width:100%;display:flex;justify-content:space-between;gap:12px;padding:10px 0;border:0;border-bottom:1px solid rgba(46,68,96,.55);background:transparent;color:#dce8f6;text-align:left;cursor:pointer}.province-port-btn:hover{color:#78a8f5}.province-port-btn small{color:#647e9f}.near-cities span{display:inline-block;margin:6px 5px 0 0;padding:6px 8px;border:1px solid #29415f;border-radius:999px;color:#839bb8;font-size:9px;background:#0a1728}.detail-actions{margin-top:auto;padding-top:18px}.primary-btn{width:100%;height:43px;border:1px solid #456da8;border-radius:9px;background:#183b6b;color:#fff;font-weight:800;cursor:pointer}.primary-btn:hover{background:#204b84}.note{margin:14px 0 34px;padding:12px 14px;border:1px solid #22344e;border-radius:12px;color:#667e9c;background:#091523;font-size:10px;line-height:1.55}.note strong{color:#8ca4c1}.province-strip{display:flex;gap:8px;overflow:auto;margin-top:14px;padding-bottom:3px}.province-chip{flex:0 0 auto;border:1px solid #293f5e;border-radius:999px;background:#0a182a;color:#8198b3;padding:7px 10px;font-size:9px;cursor:pointer}.province-chip:hover,.province-chip.active{border-color:#4c7fd4;color:#e6effb;background:#112744}
@media(max-width:1100px){.app{grid-template-columns:1fr}.detail-card{min-height:auto}.map-card{min-height:660px}.detail-actions{margin-top:18px}}
@media(max-width:760px){.china-ports-shell{width:min(100% - 20px,1460px)}.hero{grid-template-columns:1fr;padding:26px 0 18px}.hero h1{font-size:38px}.hero p{font-size:13px}.hero-badge{justify-self:start}.locator-row{grid-template-columns:1fr}.reset-btn{width:100%}.suggestions{top:74px}.map-card{min-height:520px;border-radius:14px}.map-top{left:10px;right:10px;top:10px}.map-state{font-size:9px;padding:7px 9px}.map-controls button{width:34px;height:34px}.map-legend{left:10px;right:10px;bottom:10px;justify-content:center}.port-marker .label{opacity:0!important}.port-marker.is-selected .label{opacity:1!important}.detail-card{border-radius:14px;padding:17px}.detail-name{font-size:27px}.fact-grid{grid-template-columns:1fr 1fr}.province-strip{margin-top:10px}}
@media(max-width:430px){.hero h1{font-size:34px}.map-card{min-height:460px}.fact-grid{grid-template-columns:1fr}.map-legend{font-size:8px;gap:8px}.map-state span{display:none}}


/* Locator 2.1 — wyszukiwarka nad dużą mapą, detale obok */
body.china-ports-page .china-ports-shell{padding-top:14px;padding-bottom:72px}
.hero{padding:34px 0 20px}
.hero h1{max-width:980px}
.hero p{max-width:860px}
.locator{margin-bottom:16px}
.app{grid-template-columns:minmax(0,1fr) 370px;gap:18px;align-items:stretch}
.map-card{min-height:760px}
.detail-card{min-height:760px;max-height:760px;overflow:auto;scrollbar-width:thin;scrollbar-color:#2b4669 transparent}
.gateway-fact{grid-column:1/-1;min-height:auto;background:linear-gradient(145deg,rgba(76,127,212,.12),rgba(11,26,45,.8))}
.gateway-fact small{display:block;margin-top:5px;color:#6f89a9;font-size:9px;line-height:1.4}
.route-chip{position:absolute;z-index:21;left:16px;top:62px;max-width:min(460px,calc(100% - 32px));padding:9px 12px;border:1px solid rgba(76,127,212,.55);border-radius:10px;background:rgba(6,20,36,.88);backdrop-filter:blur(10px);color:#a9bdd6;font-size:10px;line-height:1.35;box-shadow:0 12px 30px rgba(0,0,0,.22)}
.route-chip strong{color:#eaf3ff}.route-chip em{font-style:normal;color:#78a8f5}
.gateway-route{fill:none;stroke:#78a8f5;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:7 6;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 4px rgba(76,127,212,.55));pointer-events:none}
.gateway-route-halo{fill:none;stroke:rgba(76,127,212,.16);stroke-width:8;vector-effect:non-scaling-stroke;pointer-events:none}
.gateway-end{fill:#eaf3ff;stroke:#4c7fd4;stroke-width:2;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px rgba(76,127,212,.75));pointer-events:none}
.port-marker.is-gateway .dot{fill:#fff;stroke:#4c7fd4}.port-marker.is-gateway .label{opacity:1}
.province-label{opacity:0;pointer-events:none;transition:opacity .16s ease}.province-label.visible{opacity:1;pointer-events:auto}.province-label text{font-size:12px;font-weight:800;letter-spacing:.02em;fill:#dce8f8;paint-order:stroke;stroke:#071525;stroke-width:4px;stroke-linejoin:round}.province-label .bg{fill:rgba(7,21,37,.62);stroke:rgba(86,120,166,.46);stroke-width:1.1;rx:7;ry:7}.province-label.active text{fill:#fff}.province-label.active .bg{fill:rgba(23,58,106,.72);stroke:#79a7f3}
.port-marker.is-visible .label{opacity:1}
.mini-locator{position:absolute;right:16px;bottom:56px;z-index:20;width:158px;padding:10px 10px 9px;border:1px solid rgba(57,84,121,.74);border-radius:12px;background:rgba(6,17,30,.78);backdrop-filter:blur(10px);box-shadow:0 14px 40px rgba(0,0,0,.24)}.mini-locator-title{margin:0 0 7px;color:#89a5c8;font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.mini-locator svg{display:block;width:100%;height:auto}.mini-province{fill:#122036;stroke:#32496a;stroke-width:2}.mini-province.active{fill:#1b3961;stroke:#79a7f3}.mini-province.related{fill:#17304f}.mini-viewport{fill:rgba(76,127,212,.12);stroke:#79a7f3;stroke-width:2;vector-effect:non-scaling-stroke}.mini-focus{fill:#fff;stroke:#79a7f3;stroke-width:2;filter:drop-shadow(0 0 6px rgba(120,168,245,.75))}
.suggestion .tag{align-self:center;justify-self:end;display:inline-flex;align-items:center;height:22px;padding:0 8px;border:1px solid #345074;border-radius:999px;color:#9ab2cf;font:700 9px/1 Inter,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.08em}.suggestion.province-result strong{color:#eef5ff}.suggestion.province-result small{color:#88a3c4}.note strong{display:block;margin-bottom:5px}
@media(max-width:1180px){.app{grid-template-columns:minmax(0,1fr) 340px}.map-card,.detail-card{min-height:700px;max-height:700px}}
@media(max-width:1000px){.app{grid-template-columns:1fr}.detail-card{min-height:auto;max-height:none;overflow:visible}.map-card{min-height:650px}}
@media(max-width:760px){.hero{padding-top:24px}.map-card{min-height:540px}.detail-card{margin-top:0}.route-chip{left:10px;top:52px;max-width:calc(100% - 20px)}.mini-locator{right:10px;bottom:53px;width:126px;padding:8px}.mini-locator-title{font-size:8px}.province-label text{font-size:11px}}
@media(max-width:430px){.map-card{min-height:480px}.route-chip{font-size:9px}}

/* Locator 2.3 — production hardening */
.map-card{contain:layout paint}
.searchbox input:focus-visible,.reset-btn:focus-visible,.map-controls button:focus-visible,.primary-btn:focus-visible,.province-chip:focus-visible,.suggestion:focus-visible,.near-item:focus-visible,.province-port-btn:focus-visible{outline:2px solid #78a8f5;outline-offset:2px}
.map-controls button{min-width:42px;min-height:42px}
.map-noscript{margin:14px 0 34px;padding:14px 16px;border:1px solid #7c5a24;border-radius:12px;background:#1a160e;color:#d6c6a7;font-size:12px;line-height:1.55}.map-noscript strong,.map-noscript span{display:block}.map-noscript strong{color:#f4d48e;margin-bottom:3px}
@media(max-width:760px){.map-controls button{width:42px;height:42px}.map-stage svg{-webkit-user-select:none;-webkit-touch-callout:none}}
@media(prefers-reduced-motion:reduce){.china-province,.port-marker .label,.province-label{transition:none!important}.port-marker.is-selected .halo{animation:none!important}}

/* =========================================================
   Locator 2.4 — SEO + UX hardening
   ========================================================= */
.locator{position:sticky;top:68px;z-index:55;margin-bottom:16px;box-shadow:0 18px 50px rgba(0,0,0,.28)}
.hero-badge{display:flex;flex-direction:column;gap:2px}.hero-badge strong{color:#dce8f8;font-size:11px}.hero-badge span{font-size:9px;color:#7088a8}
.map-state{gap:0;background:rgba(7,20,34,.88);border-color:#38567d}.map-state i{display:none!important}
.map-controls button{border-color:#48668e;background:#112744;color:#e4eefb;box-shadow:0 7px 18px rgba(0,0,0,.18)}
.map-controls button:hover{background:#1b3b68;border-color:#78a8f5;color:#fff;transform:translateY(-1px)}

/* Wyraźnie różne markery: koło / kwadrat / romb. */
.port-marker .dot{fill:#8cc1ff;stroke:#f2f7ff;stroke-width:1.7;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px rgba(76,127,212,.72))}
.port-marker.regional .dot{fill:#65758b;stroke:#c9d5e4}
.port-marker.river .dot{fill:#e5a04b;stroke:#ffe0b8}
.port-marker.major .label{opacity:0}
.port-marker.is-visible .label,.port-marker.is-selected .label,.port-marker.is-gateway .label,.port-marker:hover .label{opacity:1}
.port-marker:hover .label{pointer-events:none}

.map-legend{gap:14px;font-size:9px}.map-legend i{display:inline-block;width:9px;height:9px;border:1px solid rgba(255,255,255,.65);background:#8cc1ff}.map-legend .legend-main i{border-radius:50%}.map-legend .legend-regional i{border-radius:2px;background:#65758b}.map-legend .legend-river i{width:8px;height:8px;border-radius:1px;background:#e5a04b;transform:rotate(45deg)}

/* Typ trasy jest widoczny również w linii. */
.gateway-route.route-sea{stroke:#7fc5ff;stroke-dasharray:8 6}.gateway-route.route-barge{stroke:#64d2c2;stroke-dasharray:4 5}.gateway-route.route-road-barge{stroke:#76d0ae;stroke-dasharray:11 4 2 4}.gateway-route.route-rail{stroke:#f0a340;stroke-dasharray:10 4 2 4}.gateway-route.route-via{stroke:#9d8cff;stroke-dasharray:7 6}
.gateway-route-halo.route-sea,.gateway-route-halo.route-barge,.gateway-route-halo.route-road-barge,.gateway-route-halo.route-rail,.gateway-route-halo.route-via{stroke:rgba(76,127,212,.18)}

/* Prowincje nie konkurują z etykietami portów po dużym zoomie; logika JS steruje visible. */
.province-label{transition:opacity .12s ease}.province-label .bg{fill:rgba(6,17,30,.72);stroke:rgba(89,124,172,.55)}

/* Locator aktualnego wycinka — większy i bardziej jednoznaczny. */
.mini-locator{width:198px;right:16px;bottom:58px;padding:11px;border:1px solid #496b98;background:rgba(5,16,29,.91);box-shadow:0 16px 45px rgba(0,0,0,.38),inset 0 0 0 1px rgba(120,168,245,.06)}
.mini-locator-title{margin-bottom:2px;color:#d3e3f7;font-size:9px}.mini-locator-sub{margin-bottom:7px;color:#6f89a9;font-size:8px}.mini-viewport{fill:rgba(120,168,245,.16);stroke:#9ac3ff;stroke-width:3}.mini-focus{r:9;fill:#fff;stroke:#4c7fd4;stroke-width:3}

/* Pusty stan ma być zaproszeniem, nie niedokończonym formularzem. */
.detail-card{position:relative}.detail-empty{display:flex;min-height:100%;flex-direction:column;justify-content:center;padding:6px 2px}.detail-empty[hidden],.detail-content[hidden]{display:none!important}.detail-empty-icon{width:48px;height:48px;display:grid;place-items:center;margin-bottom:17px;border:1px solid #36537b;border-radius:50%;background:#10223b;color:#78a8f5;font-size:23px}.detail-empty h2{margin:10px 0 9px;color:#fff;font:400 28px/1.12 Georgia,"Times New Roman",serif}.detail-empty>p{margin:0;color:#91a6c0;font-size:12px;line-height:1.7}.result-disclaimer{margin-top:18px;padding:12px 13px;border:1px solid #725f38;border-left:3px solid #d0a353;border-radius:9px;background:#15160f;color:#b8aa8d;font-size:10px;line-height:1.55}.result-disclaimer strong,.result-disclaimer span{display:block}.result-disclaimer strong{margin-bottom:4px;color:#e4c886}.result-disclaimer.compact{margin:14px 0 0}.quick-groups{display:grid;gap:16px;margin-top:22px;padding-top:17px;border-top:1px solid #263a55}.quick-group>strong{display:block;margin-bottom:8px;color:#7793b5;font-size:9px;letter-spacing:.09em;text-transform:uppercase}.quick-group>div{display:flex;flex-wrap:wrap;gap:7px}.quick-group button{padding:7px 9px;border:1px solid #304867;border-radius:999px;background:#0a182a;color:#a5bad1;font-size:9px;cursor:pointer}.quick-group button:hover{border-color:#78a8f5;color:#fff;background:#112744}
.detail-content{display:flex;min-height:100%;flex-direction:column}.port-description{margin-top:16px;padding-top:15px;border-top:1px solid #263a55}.port-description h3{margin:0 0 8px;color:#dce8f6;font-size:12px}.port-description p{margin:0;color:#91a6c0;font-size:11px;line-height:1.65}.port-description dl{display:grid;gap:8px;margin:12px 0 0}.port-description dl>div{padding:9px 10px;border:1px solid #263c59;border-radius:9px;background:#0a182a}.port-description dt{color:#657e9d;font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.port-description dd{margin:4px 0 0;color:#cbd9ea;font-size:10px;line-height:1.45}

/* Statyczna baza portów: fallback bez JS i treść indeksowalna. */
.port-directory{margin:34px 0 54px;padding-top:30px;border-top:1px solid #263a55}.directory-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:18px}.directory-head h2{max-width:880px;margin:8px 0 7px;color:#fff;font:400 clamp(28px,3vw,42px)/1.12 Georgia,"Times New Roman",serif}.directory-head p{max-width:860px;margin:0;color:#8fa4bd;font-size:12px;line-height:1.65}.directory-head>span{flex:0 0 auto;padding:8px 10px;border:1px solid #355174;border-radius:999px;color:#8fa7c3;background:#0b1829;font-size:9px}.port-directory-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.port-directory-card{padding:18px;border:1px solid #263a55;border-radius:14px;background:linear-gradient(180deg,#0d1a2c,#091522)}.port-directory-card.is-selected{border-color:#4c7fd4;box-shadow:0 0 0 2px rgba(76,127,212,.10)}.port-directory-top{display:flex;justify-content:space-between;gap:18px;align-items:start}.port-directory-top span{color:#6f88a8;font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.port-directory-top h3{margin:5px 0 0;color:#fff;font:400 22px/1.1 Georgia,"Times New Roman",serif}.port-directory-top code{color:#79a7f3;font:700 10px ui-monospace,monospace}.port-directory-card>p{margin:13px 0 0;color:#91a5bd;font-size:11px;line-height:1.7}.port-directory-card dl{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:13px 0}.port-directory-card dl>div{padding:9px;border:1px solid #243750;border-radius:9px;background:#0a1626}.port-directory-card dt{color:#617b9a;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.port-directory-card dd{margin:4px 0 0;color:#bdcce0;font-size:9px;line-height:1.45}.directory-route{margin:12px 0;padding:10px 11px;border-left:3px solid #78a8f5;background:#0b1b30}.directory-route strong,.directory-route span{display:block}.directory-route strong{color:#dce9f8;font-size:10px}.directory-route span{margin-top:4px;color:#7f97b4;font-size:9px;line-height:1.5}.port-directory-card>a{display:inline-block;margin-top:3px;color:#79a7f3;font-size:10px;font-weight:800}.port-directory-card>a:hover{color:#fff}.noscript-selected{margin:12px 0;padding:14px 16px;border:1px solid #355174;border-radius:12px;background:#0b1829}.noscript-selected strong{color:#fff}.noscript-selected p{margin:7px 0 0;color:#9ab0c9;line-height:1.6}

.map-noscript{margin:18px 0}.map-noscript strong{font-size:12px}

@media(max-width:1000px){.locator{top:68px}.port-directory-grid{grid-template-columns:1fr}.directory-head{align-items:start;flex-direction:column}.mini-locator{width:174px}}
@media(max-width:760px){.locator{top:68px;margin-left:-2px;margin-right:-2px;border-radius:12px}.mini-locator{width:148px;right:10px;bottom:58px;padding:9px}.mini-locator-sub{font-size:7px}.map-controls button{background:#173257;border-color:#5b79a2}.detail-empty{min-height:320px}.port-directory{margin-top:26px}.port-directory-card dl{grid-template-columns:1fr}.map-legend{justify-content:flex-start;right:168px}.map-legend span{white-space:nowrap}}
@media(max-width:520px){.map-legend{right:10px;max-width:calc(100% - 20px);padding-right:150px}.mini-locator{bottom:12px}.locator{top:68px}.detail-empty h2{font-size:25px}}

/* =========================================================
   Locator 2.5 — live search + label collision + port navigation
   ========================================================= */
.locator{overflow:visible}
.search-wrap{z-index:4}
.suggestions{top:calc(100% + 8px);z-index:120;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.suggestion:focus-visible{background:#10243e;outline:2px solid #78a8f5;outline-offset:-2px}
.province-chip.is-preview{border-color:#678dbf;background:#102744;color:#d8e7f8;box-shadow:inset 0 0 0 1px rgba(120,168,245,.08)}
.port-marker.is-search-preview .halo{opacity:.9;stroke:#a8d0ff;stroke-dasharray:3 3;animation:pulse 1.5s ease-out infinite}
.port-marker.is-search-preview .dot{fill:#fff;stroke:#78a8f5}
.port-marker.is-search-preview .label{opacity:1}

/* Przy gęstych klastrach JS ukrywa kolidujące etykiety prowincji. */
.province-label{will-change:opacity}

/* Dla portu głównego pole gateway jest całkowicie usuwane z layoutu. */
.gateway-fact[hidden]{display:none!important}

/* Nawigacja między portami bez powrotu do widoku ogólnego. */
.port-nav{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:stretch;margin-top:18px;padding-top:16px;border-top:1px solid #263a55}
.port-nav-btn,.port-nav-list{min-height:50px;border:1px solid #304867;border-radius:10px;background:#0a182a;color:#a9bdd4;text-decoration:none;cursor:pointer}
.port-nav-btn{display:flex;min-width:0;flex-direction:column;justify-content:center;align-items:flex-start;padding:8px 10px;text-align:left}
.port-nav-btn.next{align-items:flex-end;text-align:right}
.port-nav-btn span{color:#6f88a8;font-size:8px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.port-nav-btn strong{max-width:100%;margin-top:3px;overflow:hidden;color:#dce8f7;font-size:10px;text-overflow:ellipsis;white-space:nowrap}
.port-nav-btn:hover,.port-nav-list:hover{border-color:#78a8f5;background:#112744;color:#fff}
.port-nav-list{display:grid;place-items:center;padding:8px 10px;color:#7fa2d1;font-size:9px;font-weight:800;text-align:center}

/* Locator mini-mapki ma być czytelny także przy jasności ekranu telefonu. */
.mini-locator{width:210px;border-color:#6388b8;box-shadow:0 16px 45px rgba(0,0,0,.42),inset 0 0 0 1px rgba(154,195,255,.10)}
.mini-viewport{fill:rgba(120,168,245,.28);stroke:#b5d3ff;stroke-width:5;filter:drop-shadow(0 0 5px rgba(120,168,245,.55))}
.mini-focus{stroke-width:4;filter:drop-shadow(0 0 7px rgba(120,168,245,.9))}

@media(max-width:1000px){.mini-locator{width:184px}}
@media(max-width:760px){.mini-locator{width:156px}.port-nav{grid-template-columns:1fr 1fr}.port-nav-list{grid-column:1 / -1;grid-row:2}}
@media(max-width:430px){.port-nav-btn strong{font-size:9px}.port-nav-list{min-height:42px}}

/* =========================================================
   KONTENEROLOGIA CHINA PORT LOCATOR 2.6
   DETAIL PANEL — INFORMATION HIERARCHY / SCANABILITY
   ========================================================= */
.china-ports-page .detail-card{
  --detail-blue:#79a7f3;
  --detail-cyan:#72d2dc;
  --detail-green:#78cda3;
  --detail-amber:#e0ad55;
  --detail-violet:#a999ff;
  --detail-surface:#0a1728;
  --detail-surface-2:#0d1d31;
  --detail-border:#29415f;
  scrollbar-color:#3f628f transparent;
}
.china-ports-page .detail-content{
  gap:0;
  padding:0;
}
.china-ports-page .detail-port-head{
  position:relative;
  padding:1px 0 17px;
  border-bottom:1px solid rgba(57,83,118,.62);
}
.china-ports-page .detail-kicker{
  align-items:center;
  color:#718aa8;
  font:800 9px/1.25 "IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.12em;
}
.china-ports-page .detail-kicker code{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 8px;
  border:1px solid rgba(121,167,243,.42);
  border-radius:6px;
  background:rgba(36,74,126,.22);
  color:#a9c9ff;
  font:800 10px/1 "IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.04em;
}
.china-ports-page .detail-name{
  margin:11px 0 6px;
  color:#fff;
  font:500 32px/1.02 Georgia,"Times New Roman",serif;
  letter-spacing:-.025em;
}
.china-ports-page .detail-sub{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  color:#8fa7c3;
  font-size:11px;
}
.china-ports-page .detail-sub i{
  width:3px;height:3px;border-radius:50%;background:#486481;
}
.china-ports-page .detail-symbol,
.china-ports-page .gateway-symbol,
.china-ports-page .notice-symbol{
  flex:0 0 auto;
  display:grid;
  place-items:center;
}
.china-ports-page .detail-symbol{
  width:31px;height:31px;
  border:1px solid #365376;
  border-radius:8px;
  background:#10223a;
  color:#7eaaf0;
}
.china-ports-page .detail-symbol svg,
.china-ports-page .gateway-symbol svg,
.china-ports-page .notice-symbol svg,
.china-ports-page .detail-empty-icon svg{
  width:17px;height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Three quick facts — intentionally different from long-form copy. */
.china-ports-page .detail-snapshot{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:14px;
}
.china-ports-page .snapshot-card{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  padding:10px;
  border:1px solid var(--detail-border);
  border-radius:10px;
  background:linear-gradient(145deg,#0b1a2d,#091523);
}
.china-ports-page .snapshot-card:first-child{
  grid-column:1/-1;
  background:linear-gradient(135deg,rgba(36,74,126,.36),rgba(9,23,39,.92));
  border-color:#365a86;
}
.china-ports-page .snapshot-card small,
.china-ports-page .location-card small,
.china-ports-page .gateway-card small,
.china-ports-page .section-title-row small,
.china-ports-page .port-meta-card small{
  display:block;
  margin:0 0 4px;
  color:#637e9e;
  font:800 8px/1.2 "IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.china-ports-page .snapshot-card strong{
  display:block;
  color:#dce9f8;
  font-size:10.5px;
  line-height:1.35;
}
.china-ports-page .detail-card[data-port-kind="major"] .snapshot-type .detail-symbol{color:#9ec1ff;border-color:#537eb7;background:#12305a}
.china-ports-page .detail-card[data-port-kind="regional"] .snapshot-type .detail-symbol{color:#b6c4d5;border-color:#52637a;background:#162333}
.china-ports-page .detail-card[data-port-kind="river"] .snapshot-type .detail-symbol{color:#f0bd69;border-color:#85652f;background:#2b2417}

.china-ports-page .location-card{
  margin-top:9px;
  padding:12px 13px;
  border:1px solid #27415f;
  border-radius:11px;
  background:rgba(9,25,43,.75);
}
.china-ports-page .section-title-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.china-ports-page .section-title-row strong,
.china-ports-page .section-title-row h3{
  display:block;
  margin:0;
  color:#e9f1fb;
  font-size:11px;
  font-weight:800;
  line-height:1.25;
}
.china-ports-page .location-card>p{
  margin:9px 0 0;
  color:#99adc5;
  font-size:10.5px;
  line-height:1.58;
}

/* Gateway becomes the strongest operational signal in the panel. */
.china-ports-page .gateway-card{
  position:relative;
  display:flex;
  gap:11px;
  align-items:flex-start;
  margin-top:9px;
  padding:12px 13px;
  overflow:hidden;
  border:1px solid #39618f;
  border-left:3px solid var(--detail-blue);
  border-radius:11px;
  background:linear-gradient(135deg,rgba(32,67,115,.40),rgba(9,24,42,.96));
}
.china-ports-page .gateway-card::after{
  content:"";
  position:absolute;
  right:-24px;top:-34px;
  width:96px;height:96px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(121,167,243,.15),transparent 70%);
  pointer-events:none;
}
.china-ports-page .gateway-symbol{
  width:34px;height:34px;
  border:1px solid #4c74a5;
  border-radius:9px;
  background:#12305a;
  color:#9ec1ff;
}
.china-ports-page .gateway-copy{min-width:0;position:relative;z-index:1}
.china-ports-page .gateway-copy strong{
  display:block;
  color:#fff;
  font-size:15px;
  line-height:1.12;
}
.china-ports-page .gateway-copy span{
  display:block;
  margin-top:4px;
  color:#90a9c8;
  font-size:9.5px;
  line-height:1.45;
}
.china-ports-page .gateway-card[data-route-mode="barge"]{border-left-color:#64d2c2;border-color:rgba(100,210,194,.45)}
.china-ports-page .gateway-card[data-route-mode="barge"] .gateway-symbol{color:#77dfd0;border-color:#4a9e93;background:#103733}
.china-ports-page .gateway-card[data-route-mode="road-barge"]{border-left-color:#76d0ae;border-color:rgba(118,208,174,.46)}
.china-ports-page .gateway-card[data-route-mode="road-barge"] .gateway-symbol{color:#8de0c0;border-color:#4f9f80;background:#10352a}
.china-ports-page .gateway-card[data-route-mode="rail"]{border-left-color:#f0a340;border-color:rgba(240,163,64,.45)}
.china-ports-page .gateway-card[data-route-mode="rail"] .gateway-symbol{color:#f4b966;border-color:#94662d;background:#382611}
.china-ports-page .gateway-card[data-route-mode="sea"]{border-left-color:#7fc5ff}

.china-ports-page .port-description{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(45,67,96,.72);
}
.china-ports-page .port-description>p{
  margin:10px 0 0;
  color:#9eb1c7;
  font-size:10.5px;
  line-height:1.62;
}
.china-ports-page .port-meta-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:10px;
}
.china-ports-page .port-meta-card{
  display:flex;
  gap:8px;
  align-items:flex-start;
  min-width:0;
  padding:10px;
  border:1px solid #263d59;
  border-radius:9px;
  background:#091725;
}
.china-ports-page .port-meta-card .detail-symbol{
  width:28px;height:28px;border-radius:7px;
}
.china-ports-page .cargo-meta .detail-symbol{color:#74c8e8;border-color:#37677b;background:#0e2b36}
.china-ports-page .season-meta .detail-symbol{color:#d6a7ff;border-color:#66507c;background:#251d31}
.china-ports-page .port-meta-card strong{
  display:block;
  color:#cbd9e9;
  font-size:9.5px;
  font-weight:650;
  line-height:1.42;
}

.china-ports-page .result-disclaimer{
  display:flex;
  gap:9px;
  align-items:flex-start;
  margin-top:14px;
  padding:10px 11px;
  border:1px solid rgba(190,145,71,.42);
  border-left:3px solid var(--detail-amber);
  background:linear-gradient(135deg,#1b190f,#121710);
  color:#bba988;
}
.china-ports-page .result-disclaimer .notice-symbol{
  width:26px;height:26px;
  border:1px solid #80662e;
  border-radius:50%;
  color:#e0ad55;
}
.china-ports-page .result-disclaimer .notice-symbol svg{width:14px;height:14px}
.china-ports-page .result-disclaimer strong{color:#efd18e;font:800 9px/1.2 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.05em;text-transform:uppercase}
.china-ports-page .result-disclaimer span{font-size:9px;line-height:1.48}

.china-ports-page .near-cities,
.china-ports-page .nearby{
  margin-top:14px;
  padding-top:13px;
  border-top:1px solid rgba(45,67,96,.70);
}
.china-ports-page .nearby-head{align-items:center}
.china-ports-page .near-cities>div:last-child{margin-top:5px}
.china-ports-page .near-cities>div:last-child>span{
  margin:5px 4px 0 0;
  padding:5px 7px;
  border-color:#315071;
  background:#0b1b2e;
  color:#9eb4cd;
}
.china-ports-page .near-list{margin-top:5px}
.china-ports-page .near-item{
  padding:8px 6px;
  border-radius:7px;
}
.china-ports-page .near-item:hover{background:#10223a}
.china-ports-page .near-index{
  border-color:#436995;
  background:#10223a;
  color:#91b7ef;
}
.china-ports-page .near-dist{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:8.5px;color:#6e8aaa}

.china-ports-page .port-nav{
  margin-top:14px;
  padding-top:13px;
  border-top:1px solid rgba(45,67,96,.70);
}
.china-ports-page .port-nav[hidden]{display:none!important}
.china-ports-page .detail-actions{padding-top:10px}

/* Empty state uses the same visual grammar as selected ports. */
.china-ports-page .detail-empty-icon{
  width:46px;height:46px;
  color:#89b5f6;
}
.china-ports-page .detail-empty h2{font-size:27px;line-height:1.08}
.china-ports-page .detail-empty>p{color:#93a8c1;line-height:1.62}

@media(max-width:430px){
  .china-ports-page .detail-snapshot{grid-template-columns:1fr}
  .china-ports-page .snapshot-card:first-child{grid-column:auto}
  .china-ports-page .port-meta-grid{grid-template-columns:1fr}
  .china-ports-page .detail-name{font-size:29px}
}

/* Karta wybranego portu jest osobnym, spokojnym widokiem do druku/PDF. */
.map-port-print{display:none}
.detail-context-actions button:disabled{opacity:.45;cursor:not-allowed}
@media print{
  @page{size:A4;margin:14mm}
  body>*:not(main){display:none!important}
  main>*:not(.map-port-print){display:none!important}
  .map-port-print{display:block!important;color:#142235;background:#fff;font-family:Arial,sans-serif}
  .map-port-print-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding-bottom:18px;border-bottom:3px solid #173f69}
  .map-port-print-head span{font-size:10px;font-weight:800;letter-spacing:.13em;color:#56728f}
  .map-port-print-head h1{margin:7px 0 0;font-size:30px;line-height:1.1;color:#102a47}
  .map-port-print-head>strong{padding:8px 11px;border:1px solid #b8c7d6;border-radius:7px;font-size:13px;color:#173f69}
  .map-port-print-lead{margin:18px 0;color:#344d66;font-size:12px;line-height:1.6}
  .map-port-print-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 16px}
  .map-port-print-grid>div{min-height:58px;padding:11px;border:1px solid #d9e2eb;border-radius:8px;background:#f7f9fb;break-inside:avoid}
  .map-port-print-grid dt{margin-bottom:5px;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#698096}
  .map-port-print-grid dd{margin:0;font-size:11px;line-height:1.45;font-weight:700;color:#172b40}
  .map-port-print-note{margin:0 0 14px;padding:10px 12px;border-left:3px solid #d5a23c;background:#fffaf0;color:#594b2f;font-size:9.5px;line-height:1.45}
  .map-port-print .k-pdf-cta{margin-top:14px}
}

/* ===== KONTENEROLOGIA PORT MAP 2.7 — scanability / expert mode / compare ===== */
.china-ports-page .detail-status-row{margin-top:12px}
.china-ports-page .detail-context-actions{margin:12px 0 2px}
.china-ports-page .detail-context-actions button{flex:1 1 145px}
.china-ports-page .port-compare-card{margin-top:12px;padding:14px;border:1px solid #2d4667;border-radius:11px;background:linear-gradient(180deg,#0d1b2e,#091625)}
.china-ports-page .port-compare-card label{display:block;margin:12px 0 6px;color:#6983a4;font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.china-ports-page .port-compare-card select{width:100%;height:40px;border:1px solid #345276;border-radius:7px;background:#081522;color:#dce8f6;padding:0 11px;font-size:10px;outline:none}
.china-ports-page .port-compare-card select:focus{border-color:#79a7f3;box-shadow:0 0 0 3px rgba(76,127,212,.1)}
.china-ports-page .port-compare-output{display:grid;gap:1px;margin-top:10px;border:1px solid #253c58;border-radius:8px;overflow:hidden;background:#253c58}
.china-ports-page .port-compare-output>div{display:grid;grid-template-columns:90px 1fr 1fr;gap:8px;align-items:center;padding:9px 10px;background:#0a1728}
.china-ports-page .port-compare-output span{color:#607b9c;font-size:8px;text-transform:uppercase;letter-spacing:.06em}
.china-ports-page .port-compare-output strong{color:#cbd9ea;font-size:9px;line-height:1.35}
.china-ports-page .port-compare-output strong:last-child{color:#91b7ee}
.china-ports-page .detail-verified{margin:14px 0 0}
.china-ports-page .expert-only[hidden]{display:none!important}
.china-ports-page .gateway-card{position:relative;overflow:hidden}
.china-ports-page .gateway-card::after{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:#4c7fd4}
.china-ports-page .detail-card[data-port-kind="river"] .gateway-card::after{background:#e5a04b}
.china-ports-page .detail-card[data-port-kind="major"] .gateway-card::after{background:#5fd2a0}
.china-ports-page .detail-card.ktlg-tool-flash{animation:ktlgToolFlash .55s ease}
.china-ports-page .snapshot-card{transition:border-color .18s ease,background .18s ease,transform .18s ease}
.china-ports-page .snapshot-card:hover{border-color:#3a5d87;background:#10243b;transform:translateY(-1px)}
.china-ports-page .route-chip{transition:opacity .18s ease,transform .18s ease}
.china-ports-page .route-chip:not([hidden]){animation:cpRouteIn .42s ease}
@keyframes cpRouteIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.china-ports-page .detail-name{letter-spacing:-.025em}
.china-ports-page .detail-port-head{padding-bottom:13px;border-bottom:1px solid rgba(45,67,95,.7)}
.china-ports-page .detail-content>section,.china-ports-page .detail-content>.result-disclaimer,.china-ports-page .detail-content>.ktlg-tool-verified{scroll-margin-top:110px}
@media(max-width:820px){
  .china-ports-page .detail-context-actions{display:grid;grid-template-columns:1fr 1fr}
  .china-ports-page .detail-context-actions .ktlg-tool-expert-toggle{grid-column:1/-1}
  .china-ports-page .port-compare-output>div{grid-template-columns:72px 1fr 1fr}
}
@media(max-width:560px){
  .china-ports-page .detail-context-actions{grid-template-columns:1fr}
  .china-ports-page .detail-context-actions .ktlg-tool-expert-toggle{grid-column:auto}
  .china-ports-page .port-compare-output>div{grid-template-columns:1fr 1fr}
  .china-ports-page .port-compare-output span{grid-column:1/-1}
}

/* =========================================================
   KONTENEROLOGIA · PORT MAP 2.8
   province main POL visibility + simplified actions
   ========================================================= */
.china-ports-page .province-port-btn.is-main-pol{
  border:1px solid rgba(76,127,212,.62);
  border-radius:8px;
  padding:10px 11px;
  margin:4px 0;
  background:linear-gradient(135deg,rgba(28,64,111,.55),rgba(10,27,47,.62));
}
.china-ports-page .province-port-btn.is-main-pol span{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.china-ports-page .province-port-btn.is-main-pol em{
  display:inline-flex;
  align-items:center;
  min-height:18px;
  padding:0 6px;
  border:1px solid #4c7fd4;
  border-radius:999px;
  color:#9fc1f6;
  font:800 7px/1 Geist,system-ui,sans-serif;
  font-style:normal;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.china-ports-page .port-marker.is-province-main .dot{filter:drop-shadow(0 0 8px rgba(120,168,245,.95))}
.china-ports-page .detail-context-actions{grid-template-columns:minmax(0,1fr) auto}
@media(max-width:560px){
  .china-ports-page .detail-context-actions{grid-template-columns:1fr}
}
.china-ports-page .detail-context-actions{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important}
@media(max-width:560px){.china-ports-page .detail-context-actions{grid-template-columns:1fr!important}}

/* HOTFIX 2.8.1 — province POL card must never render as a clipped empty shell */
.china-ports-page .gateway-card[hidden]{display:none!important}
.china-ports-page .gateway-card[data-route-mode="province-main"]{
  display:flex;
  min-height:82px;
  align-items:center;
  border-color:rgba(95,210,160,.48);
  border-left-color:#5fd2a0;
  background:linear-gradient(135deg,rgba(24,74,62,.42),rgba(9,24,42,.96));
}
.china-ports-page .gateway-card[data-route-mode="province-main"] .gateway-symbol{
  color:#86e3b9;border-color:#4f9f80;background:#10352a;
}
.china-ports-page .gateway-card[data-route-mode="province-main"] .gateway-copy{width:100%;overflow:visible}
.china-ports-page .gateway-card[data-route-mode="province-main"] .gateway-copy strong{white-space:normal;overflow:visible;text-overflow:clip}
.china-ports-page [hidden]{display:none!important}
.directory-route.is-direct{border-left-color:#4ade80;background:#0d211b}.directory-route.is-direct strong{color:#8be9ad}
.china-ports-page .gateway-card[data-route-mode="direct"]{border-left-color:#4ade80;border-color:rgba(74,222,128,.42)}


/* === 2.9.3 · Deep local focus ===
   Przy dużym zoomie mapa pokazuje tylko kontekst wybranego portu:
   wybrany port, główny POL oraz 3 najbliższe lokalizacje. */
.china-ports-page .port-marker .label-bg{
  fill:rgba(5,17,30,.94);
  stroke:#355174;
  stroke-width:1;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.32));
}
.china-ports-page .port-marker .label-leader{
  opacity:0;
  stroke:#5d789b;
  stroke-width:1;
  vector-effect:non-scaling-stroke;
  pointer-events:none;
}
.china-ports-page .port-marker.is-visible .label-leader,
.china-ports-page .port-marker.is-selected .label-leader,
.china-ports-page .port-marker.is-gateway .label-leader{opacity:.78}
.china-ports-page .port-marker .code-label{
  font-size:7px;
  fill:#7f99ba;
  font-weight:800;
  letter-spacing:.04em;
}
.china-ports-page .port-marker.major .label-bg{stroke:#4c7fd4}
.china-ports-page .port-marker.river .label-bg{stroke:#9a6b2c}
.china-ports-page .port-marker.regional .label-bg{stroke:#536a83}

/* Wybrany port i POL mają dwie różne role wizualne. */
.china-ports-page .port-marker.is-selected .halo{
  opacity:1;
  stroke:#f0b34f;
  fill:rgba(240,179,79,.10);
}
.china-ports-page .port-marker.is-selected .dot{
  fill:#fff;
  stroke:#f0b34f;
  stroke-width:2.2;
}
.china-ports-page .port-marker.is-selected .label-bg{
  stroke:#f0b34f;
  stroke-width:1.4;
  fill:rgba(30,25,13,.96);
}
.china-ports-page .port-marker.is-selected .label-leader{stroke:#f0b34f;opacity:1}
.china-ports-page .port-marker.is-gateway .halo{
  opacity:.82;
  stroke:#78a8f5;
  fill:rgba(76,127,212,.12);
}
.china-ports-page .port-marker.is-gateway .dot{
  fill:#ddecff;
  stroke:#4c7fd4;
  stroke-width:2.1;
}
.china-ports-page .port-marker.is-gateway .label-bg{
  stroke:#4c7fd4;
  stroke-width:1.4;
  fill:rgba(10,28,51,.96);
}
.china-ports-page .port-marker.is-gateway .label-leader{stroke:#78a8f5;opacity:1}

/* Pozostałe punkty zostają jako geograficzny kontekst, ale nie konkurują z relacją wybrany port -> POL. */
.china-ports-page .port-marker.is-context-dimmed{opacity:.28}
.china-ports-page .port-marker.is-context-dimmed:hover{opacity:1}
.china-ports-page svg.port-focus-mode .port-marker.is-near{opacity:.72}
.china-ports-page svg.port-focus-mode .port-marker.is-near .label-bg{fill:rgba(5,17,30,.90)}
.china-ports-page svg.port-focus-mode .port-marker:not(.is-selected):not(.is-gateway):not(.is-near) .label{opacity:0!important}

/* Przy deep zoomie granice prowincji i linia brzegowa są mocniejsze. */
.china-ports-page svg.port-focus-mode .china-province{
  stroke:#55749d;
  stroke-width:1.35;
}
.china-ports-page svg.port-focus-mode .china-province.is-active{
  fill:#203f68;
  stroke:#9ac3ff;
  stroke-width:1.6;
}
.china-ports-page svg.port-focus-mode .gateway-route-halo{stroke-width:11}
.china-ports-page svg.port-focus-mode .gateway-route{stroke-width:2.8}

@media(max-width:760px){
  .china-ports-page svg.port-focus-mode .port-marker.is-gateway .label,
  .china-ports-page svg.port-focus-mode .port-marker.is-selected .label{opacity:1!important}
  .china-ports-page svg.port-focus-mode .port-marker.is-near .label{opacity:0!important}
}


/* === 2.9.4 · Mobile touch + strong focus === */
@media(max-width:760px){
  .china-ports-page .map-card{min-height:600px}
  .china-ports-page .map-stage svg{touch-action:none!important;overscroll-behavior:contain;-webkit-user-select:none;user-select:none}
  .china-ports-page .map-controls{gap:8px}
  .china-ports-page .map-controls button{width:48px;height:48px;border-radius:12px;font-size:21px;background:rgba(12,35,61,.94);box-shadow:0 7px 18px rgba(0,0,0,.28)}
  .china-ports-page .port-marker.is-selected .label text:first-of-type,
  .china-ports-page .port-marker.is-gateway .label text:first-of-type{font-size:12px;font-weight:900}
  .china-ports-page .port-marker.is-selected .code-label,
  .china-ports-page .port-marker.is-gateway .code-label{font-size:8px}
  .china-ports-page svg.port-focus-mode .china-province{stroke-width:1.65}
  .china-ports-page svg.port-focus-mode .china-province.is-active{stroke-width:2}
}
@media(max-width:430px){
  .china-ports-page .map-card{min-height:560px}
  .china-ports-page .map-controls button{width:50px;height:50px}
}

/* =========================================================
   KONTENEROLOGIA · PORT MAP 3.0
   marker hierarchy + low-zoom clustering + prefecture LOD
   ========================================================= */

/* Domyślnie mapa pokazuje punkty. Etykieta jest informacją na żądanie:
   hover, aktywny port albo podpowiedź wyszukiwarki. */
.china-ports-page .port-marker .label,
.china-ports-page .port-marker .label-leader{opacity:0!important;pointer-events:none}
.china-ports-page .port-marker:hover .label,
.china-ports-page .port-marker.is-selected .label,
.china-ports-page .port-marker.is-search-preview .label{opacity:1!important}
.china-ports-page .port-marker:hover .label-leader,
.china-ports-page .port-marker.is-selected .label-leader,
.china-ports-page .port-marker.is-search-preview .label-leader{opacity:.82!important}
.china-ports-page .port-marker.is-gateway:not(:hover):not(.is-selected) .label,
.china-ports-page .port-marker.is-near:not(:hover):not(.is-selected) .label,
.china-ports-page .port-marker.is-province-main:not(:hover):not(.is-selected) .label{opacity:0!important}

/* Hierarchia punktów: 6 / 4 / ok. 2.5 px. Lokalny/rzeczny pozostaje diamentem. */
.china-ports-page .port-marker.major .dot{filter:drop-shadow(0 0 6px rgba(76,127,212,.78))}
.china-ports-page .port-marker.regional .dot{filter:drop-shadow(0 0 3px rgba(121,169,200,.42))}
.china-ports-page .port-marker.river .dot{filter:drop-shadow(0 0 3px rgba(229,160,75,.52))}
.china-ports-page .port-marker.is-clustered{opacity:0!important;pointer-events:none!important}

/* Klastry istnieją wyłącznie na niskim zoomie. Są UI-em, więc zachowują stały rozmiar. */
.china-ports-page .port-cluster{cursor:pointer;outline:none}
.china-ports-page .port-cluster .cluster-halo{fill:rgba(76,127,212,.10);stroke:rgba(120,168,245,.34);stroke-width:1;vector-effect:non-scaling-stroke}
.china-ports-page .port-cluster .cluster-core{fill:#123766;stroke:#78a8f5;stroke-width:1.4;vector-effect:non-scaling-stroke;filter:drop-shadow(0 6px 12px rgba(0,0,0,.34))}
.china-ports-page .port-cluster text{fill:#fff;font:900 11px/1 Inter,Geist,system-ui,sans-serif;pointer-events:none}
.china-ports-page .port-cluster .cluster-caption{fill:#9fb8d7;font-size:8px;font-weight:800;paint-order:stroke;stroke:#071525;stroke-width:3px;letter-spacing:.03em}
.china-ports-page .port-cluster:hover .cluster-core,
.china-ports-page .port-cluster:focus .cluster-core{fill:#1e508e;stroke:#c8ddff}

/* Regionalny LOD: powyżej 3× dochodzą granice prefektur/miast.
   Warstwa jest ładowana dopiero przy pierwszym użyciu. */
.china-ports-page #provinceLayer{transition:opacity .22s ease}
.china-ports-page .prefecture-layer{opacity:0;pointer-events:none;transition:opacity .22s ease}
.china-ports-page .prefecture-layer.is-visible{opacity:1;pointer-events:visiblePainted}
.china-ports-page .china-prefecture{fill:rgba(19,36,60,.18);stroke:#4a6282;stroke-width:.72;vector-effect:non-scaling-stroke;stroke-linejoin:round;transition:fill .12s ease,stroke .12s ease;cursor:crosshair}
.china-ports-page .china-prefecture:hover{fill:rgba(76,127,212,.13);stroke:#79a7f3;stroke-width:1.05}
.china-ports-page svg.prefecture-lod-active #provinceLayer{opacity:.68}
.china-ports-page svg.prefecture-lod-active .province-label:not(.active){opacity:0!important;pointer-events:none!important}

@media(max-width:760px){
  .china-ports-page .port-marker .label{opacity:0!important}
  .china-ports-page .port-marker.is-selected .label{opacity:1!important}
  .china-ports-page .port-marker:hover .label{opacity:0!important}
  .china-ports-page .port-cluster .cluster-caption{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  .china-ports-page #provinceLayer,.china-ports-page .prefecture-layer{transition:none!important}
}

/* 3.0.1 — prefektura jako pełnoprawny, klikalny poziom nawigacji */
.china-ports-page .china-prefecture{cursor:pointer}
.china-ports-page .china-prefecture.is-selected{fill:rgba(58,132,255,.22);stroke:#7eb2ff;stroke-width:1.45;opacity:1}
.china-ports-page .china-prefecture.is-related{fill:rgba(31,66,108,.16);stroke:#506b8d;opacity:.74}
.china-ports-page .china-prefecture.is-dimmed{fill:rgba(10,19,32,.08);stroke:#293c56;opacity:.24}
.china-ports-page .china-prefecture:focus-visible{outline:none;filter:drop-shadow(0 0 4px rgba(89,156,255,.85));stroke:#9bc3ff;stroke-width:1.6}

/* 3.0.2 — nawigacja prowincja / prefektura i czytelny kontekst geograficzny */
.china-ports-page .map-context-stack{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}
.china-ports-page .map-geo-context{display:flex;align-items:center;gap:7px;max-width:min(520px,70vw);padding:7px 10px;border:1px solid rgba(76,127,212,.62);border-radius:8px;background:rgba(6,18,33,.9);backdrop-filter:blur(12px);box-shadow:0 8px 24px rgba(0,0,0,.18);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.china-ports-page .map-geo-context[hidden]{display:none}
.china-ports-page .map-geo-context span{color:#6f8eb7;font:800 8px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em}
.china-ports-page .map-geo-context strong{color:#fff;font-size:11px}
.china-ports-page .map-geo-context em{min-width:0;overflow:hidden;text-overflow:ellipsis;color:#90a9c8;font-size:10px;font-style:normal}

/* Prefektura ma być subtelnym wypełnieniem, nie wielką ramką/focus-ringiem. */
.china-ports-page .china-prefecture,
.china-ports-page .china-prefecture:focus,
.china-ports-page .china-prefecture:focus-visible{outline:none!important;filter:none!important}
.china-ports-page .china-prefecture.is-selected{fill:rgba(76,127,212,.16);stroke:#77a9ef;stroke-width:1.05;opacity:1}
.china-ports-page .china-prefecture.is-related{fill:rgba(31,66,108,.10);stroke:#4a6383;stroke-width:.72;opacity:.62}
.china-ports-page .china-prefecture.is-dimmed{fill:rgba(10,19,32,.04);stroke:#293c56;stroke-width:.6;opacity:.18}

/* Przy dużym zoomie nadal musi być jasne, w jakiej prowincji jesteśmy. */
.china-ports-page svg.prefecture-lod-active .china-province.is-active{opacity:1!important;fill:rgba(35,72,116,.28)!important;stroke:#6d9de0!important;stroke-width:1.8!important}
.china-ports-page svg.prefecture-lod-active .china-province.is-related{opacity:.34}

@media(max-width:760px){
  .china-ports-page .map-geo-context{max-width:72vw;padding:6px 8px}
  .china-ports-page .map-geo-context span{display:none}
  .china-ports-page .map-geo-context strong{font-size:10px}
  .china-ports-page .map-geo-context em{font-size:9px}
}


/* === 3.0.3 · Labels/context/POL visibility hotfix === */
/* routeChip pozostaje w DOM dla kompatybilności, ale wybrany port używa jednego kontekstu w map-state. */
.china-ports-page .route-chip{display:none!important}

/* POL ma być widoczny od razu po wyborze portu zależnego, bez przewijania karty. */
.china-ports-page .detail-content>.gateway-card{order:1;margin-top:12px;min-height:72px;overflow:visible}
.china-ports-page .detail-content>.detail-snapshot{order:0}
.china-ports-page .detail-content>.location-card{order:2}
.china-ports-page .detail-content>.detail-context-actions{order:3}
.china-ports-page .detail-content>.port-description{order:4}
.china-ports-page .detail-content>.result-disclaimer{order:5}
.china-ports-page .detail-content>.near-cities{order:6}
.china-ports-page .detail-content>.nearby{order:7}
.china-ports-page .detail-content>.detail-verified{order:8}
.china-ports-page .detail-content>.port-nav{order:9}
.china-ports-page .detail-content>.detail-actions{order:10}
.china-ports-page .gateway-copy strong{white-space:normal;overflow:visible;text-overflow:clip}

/* Końcówka relacji via ma być pierścieniem, a nie dużą białą tarczą przy deep zoomie. */
.china-ports-page .gateway-end{fill:rgba(7,21,37,.9);stroke:#78a8f5;stroke-width:1.6;filter:drop-shadow(0 0 3px rgba(76,127,212,.55))}

/* === 3.0.3 · Warstwy i filtry mapy === */
.china-ports-page .map-filter-panel{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;margin-top:11px;padding-top:11px;border-top:1px solid rgba(49,73,104,.58)}
.china-ports-page .map-filter-group{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.china-ports-page .map-filter-label{margin-right:2px;color:#6f88a8;font-size:9px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}
.china-ports-page .map-filter-chip{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:5px 9px;border:1px solid #293f5e;border-radius:999px;background:#091727;color:#748aa6;font:700 9px/1 Inter,system-ui,sans-serif;cursor:pointer;transition:border-color .15s,background .15s,color .15s,opacity .15s}
.china-ports-page .map-filter-chip b{display:grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:rgba(76,127,212,.12);color:#7791b2;font-size:8px}
.china-ports-page .map-filter-chip[aria-pressed="true"]{border-color:#456da8;background:#112744;color:#e7effa}
.china-ports-page .map-filter-chip[aria-pressed="true"] b{background:#21477b;color:#dcecff}
.china-ports-page .map-filter-chip:hover{border-color:#78a8f5;color:#fff}
.china-ports-page .map-filter-chip:focus-visible,.china-ports-page #resetMapFilters:focus-visible{outline:2px solid #78a8f5;outline-offset:2px}
.china-ports-page .map-filter-summary{display:flex;align-items:center;gap:8px;margin-left:auto;color:#6f88a8;font-size:9px}
.china-ports-page #resetMapFilters{border:0;background:transparent;color:#8eb7f2;font:750 9px/1 Inter,system-ui,sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.china-ports-page #resetMapFilters:disabled{color:#536b88;cursor:default;opacity:.62;text-decoration:none}
.china-ports-page .port-marker.is-filtered-out{display:none!important}
@media(max-width:900px){.china-ports-page .map-filter-panel{align-items:flex-start}.china-ports-page .map-filter-group{width:100%}.china-ports-page .map-filter-label{width:100%;margin-bottom:1px}.china-ports-page .map-filter-summary{width:100%;margin-left:0;justify-content:space-between}}
@media(max-width:520px){.china-ports-page .map-filter-chip{min-height:34px;padding:7px 9px}.china-ports-page .map-filter-panel{gap:9px}.china-ports-page .map-filter-group{gap:6px}}
\n\n/* === 3.0.4 · POL card flow/layout hotfix ===\n   Karta głównego POL rośnie razem z treścią i nigdy nie nachodzi na kolejną sekcję. */\n.china-ports-page .detail-content>.gateway-card{\n  height:auto!important;\n  min-height:0!important;\n  flex:0 0 auto;\n  align-items:flex-start;\n  margin-top:12px;\n  margin-bottom:3px;\n  padding:12px 13px 13px;\n  overflow:hidden!important;\n}\n.china-ports-page .gateway-copy{\n  width:100%;\n  min-width:0;\n  overflow:hidden;\n}\n.china-ports-page .gateway-copy strong{\n  white-space:normal;\n  overflow:visible;\n  text-overflow:clip;\n}\n.china-ports-page .gateway-copy span{\n  display:-webkit-box;\n  margin-top:4px;\n  max-width:100%;\n  overflow:hidden;\n  overflow-wrap:anywhere;\n  -webkit-box-orient:vertical;\n  -webkit-line-clamp:2;\n  line-clamp:2;\n  white-space:normal;\n}\n.china-ports-page .detail-content>.location-card{\n  margin-top:9px;\n}\n

/* === 3.1.1 · główny port wyjścia + alternatywy === */
.china-ports-page .gateway-alternatives{
  margin-top:9px;
  padding-top:8px;
  border-top:1px solid rgba(126,164,214,.16);
}
.china-ports-page .gateway-alternatives[hidden]{display:none!important}
.china-ports-page .gateway-alternatives>small{
  display:block;
  margin:0 0 6px;
  color:#7390b4;
  font-size:8.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.china-ports-page .gateway-alternative-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.china-ports-page .gateway-alt-chip{
  appearance:none;
  border:1px solid rgba(93,139,197,.38);
  border-radius:999px;
  background:rgba(17,43,73,.78);
  color:#cbdcf2;
  padding:5px 8px;
  font:inherit;
  font-size:9px;
  line-height:1.2;
  cursor:pointer;
}
.china-ports-page .gateway-alt-chip:hover,
.china-ports-page .gateway-alt-chip:focus-visible{
  border-color:#6fa4e7;
  color:#fff;
  outline:none;
}
.china-ports-page .gateway-copy strong{
  font-size:14.5px;
  line-height:1.18;
}