.connect-world { margin-top: 28px; padding: 24px 28px 18px; border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(140deg, #142b3b, #102230); }
.connect-world-header { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.connect-world-header h2 { margin: 0; font-size: 20px; }
.connect-world-header p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.connect-world-clear { display: inline-flex; gap: 12px; align-items: center; flex-shrink: 0; padding: 9px 12px; color: var(--teal); border: 1px solid #72b5c32f; border-radius: 9px; font-size: 12px; text-decoration: none; }
.connect-world-clear:hover { background: #72b5c30c; }
.connect-world-canvas { position: relative; margin: 20px auto 8px; max-width: 1120px; overflow: hidden; border-radius: 12px; background: radial-gradient(ellipse at center, #23435142, transparent 70%); }
.connect-world-canvas svg { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 420; touch-action: pan-y; }
.connect-world.is-zoomed svg { touch-action: none; cursor: grab; }
.connect-world.is-zoomed svg:active { cursor: grabbing; }
.connect-world-controls button:disabled { opacity: .35; cursor: default; }
.connect-world-country { fill: #2c4352; stroke: #132b3c; stroke-width: .65; vector-effect: non-scaling-stroke; transition: fill .12s; }
.connect-world-country.is-covered { fill: #3e87b5; cursor: pointer; }
.connect-world-country.is-covered:hover, .connect-world-country.is-covered:focus { fill: #85d9dc; outline: none; stroke: #ddf8f6; stroke-width: 1.4; }
.connect-world-country.is-selected { fill: #8de0ce; stroke: #d7f8eb; stroke-width: 1; }
.connect-world-country.is-small { stroke-width: 1; }
.connect-world-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.connect-world-controls { display: flex; flex-shrink: 0; border: 1px solid #416175; border-radius: 9px; overflow: hidden; background: #152e40; }
.connect-world-controls button { width: 34px; height: 33px; border: 0; background: transparent; color: #c9e3ed; font-size: 21px; line-height: 1; cursor: pointer; }
.connect-world-controls button + button { border-inline-start: 1px solid #41617560; }
.connect-world-controls button:hover { background: #2c4d60; }
.connect-world-controls button:focus-visible, .connect-world-clear:focus-visible { outline: 2px solid #8de0ce; outline-offset: -3px; }
.connect-world-tooltip { position: absolute; z-index: 2; pointer-events: none; white-space: nowrap; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; padding: 8px 11px; border: 1px solid #5b7a8e; border-radius: 8px; background: #091d2fee; box-shadow: 0 6px 20px #0003; color: #edf6fa; font-size: 12px; }
.connect-world-tooltip[hidden], .connect-world-status[hidden] { display: none; }
.connect-world-status { position: absolute; top: 40%; width: 100%; text-align: center; color: var(--muted); font-size: 13px; }
.connect-world-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); }
.connect-world-legend { display: flex; gap: 18px; font-size: 11px; }
.connect-world-legend span { display: inline-flex; align-items: center; gap: 7px; }
.connect-world-legend span::before { content: ''; width: 8px; height: 8px; background: #3e87b5; border-radius: 2px; }
.connect-world-legend span + span::before { background: #2c4352; }
.connect-world-footer small, .connect-world-footer a { color: #839faf; font-size: 10px; text-decoration: none; }
.connect-world-footer a:hover { text-decoration: underline; }
.connect-map-credits { position: relative; margin-inline-start: auto; }
.connect-map-credits summary { display: inline-flex; align-items: center; gap: 5px; padding: 4px 0; color: #9bb5c6; font-size: 11px; cursor: pointer; list-style: none; }
.connect-map-credits summary::-webkit-details-marker { display: none; }
.connect-map-credits summary svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.3; }
.connect-map-credits summary:hover, .connect-map-credits[open] summary { color: var(--teal); }
.connect-map-credits summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 3px; }
.connect-map-credits-panel { position: absolute; z-index: 4; inset-inline-end: 0; bottom: calc(100% + 10px); width: min(320px, calc(100vw - 68px)); padding: 18px; border: 1px solid #416175; border-radius: 13px; color: #b4c7d6; background: #102331; box-shadow: 0 12px 36px #0005; font-size: 12px; line-height: 1.7; text-align: start; }
.connect-map-credits-panel h3 { margin: 0 0 10px; color: var(--ink); font-size: 14px; font-weight: 600; }
.connect-map-credits-panel p { margin: 0 0 10px; }
.connect-world-footer .connect-map-credits-panel a { color: var(--teal); font-size: inherit; text-decoration: underline; text-underline-offset: 3px; }
.connect-map-license { display: inline-block; margin-top: 2px; }
@media (max-width: 700px) {
    .connect-world { padding: 20px 16px 15px; border-radius: 16px; }
    .connect-world-header { flex-wrap: wrap; gap: 12px; }
    .connect-world-header p { font-size: 12px; }
    .connect-world-canvas { margin-top: 16px; }
    .connect-world-canvas svg { aspect-ratio: 1000 / 560; }
    .connect-world-footer { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .connect-world-country { transition: none; } }