.water-area-card{margin:24px 0 32px;border:1px solid var(--color-gold-light,#F5EFE4);border-radius:20px;overflow:hidden;background:var(--color-cream,#FAF7F2)}
.water-area-preview{display:block;position:relative;line-height:0;background:#0B192C;color:#0B192C}
.water-area-preview img{display:block;width:100%;height:auto}
.water-area-preview:focus-visible{outline:3px solid var(--color-gold,#C5A880);outline-offset:-4px}
.water-area-enlarge{position:absolute;right:16px;bottom:16px;padding:12px 16px;line-height:1.2;background:#FAF7F2;color:#0B192C;border-radius:999px;font:600 13px var(--font-sans,Arial,sans-serif);box-shadow:0 4px 18px #0002}
.water-area-caption{padding:20px 24px}
.water-area-caption h3{font-family:var(--font-serif,Georgia,serif);font-size:26px;color:var(--color-primary,#0B192C);margin:0 0 6px}
.water-area-caption p{font-size:14px;margin:0;color:var(--color-text-light,#64748B);line-height:1.6}
.water-map-dialog{margin:auto;padding:0;border:0;border-radius:20px;width:min(1200px,calc(100vw - 48px));height:min(900px,calc(100dvh - 48px));max-width:none;max-height:none;background:#0B192C;color:#FAF7F2;overflow:hidden}
.water-map-dialog[open]{display:flex;flex-direction:column}
.water-map-dialog::backdrop{background:rgba(11,25,44,.85)}
.water-map-toolbar{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:16px 20px;flex-shrink:0;background:#0B192C;z-index:1}
.water-map-toolbar h2{font:500 25px var(--font-serif,Georgia,serif);margin:0;line-height:1.2}
.water-map-actions{display:flex;gap:8px;flex-shrink:0}
.water-map-actions button{border:1px solid #C5A88080;background:#1E2A38;color:#FAF7F2;border-radius:10px;min-width:44px;min-height:44px;padding:8px 12px;font:500 16px var(--font-sans,Arial,sans-serif);cursor:pointer}
.water-map-actions button:hover{background:#C5A880;color:#0B192C}
.water-map-actions button:disabled{opacity:.4;cursor:default}
.water-map-actions button:focus-visible,.water-map-viewport:focus-visible{outline:2px solid #C5A880;outline-offset:2px}
.water-map-viewport{overflow:auto;flex:1;min-height:0;overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom;background:#0B192C}
.water-map-viewport img{display:block;max-width:none;height:auto;user-select:none;margin:0 auto}
.water-map-viewport.is-draggable{cursor:grab}
.water-map-viewport.is-dragging{cursor:grabbing}
.water-map-hint{margin:0;padding:10px 20px;font:400 12px var(--font-sans,Arial,sans-serif);line-height:1.5;color:#C9D0D8;flex-shrink:0}
@media(max-width:600px){
 .water-area-card{margin:20px 0 24px;border-radius:14px}
 .water-area-caption{padding:16px}
 .water-area-caption h3{font-size:23px}
 .water-area-enlarge{right:10px;bottom:10px;padding:12px 14px;font-size:12px}
 .water-map-dialog{width:100vw;height:100dvh;border-radius:0;margin:0}
 .water-map-toolbar{flex-wrap:wrap;padding:12px 16px;gap:12px;padding-top:max(12px,env(safe-area-inset-top))}
 .water-map-toolbar h2{width:100%;font-size:24px}
 .water-map-actions{width:100%}
 .water-map-actions [data-water-map-close]{margin-left:auto}
 .water-map-hint{padding:10px 16px max(10px,env(safe-area-inset-bottom))}
}