:root{--wd-blue:#365fff;--wd-navy:#243750;--wd-muted:#697f9b;--wd-border:#d7e5f7;--wd-pale:#eef4ff;--wd-bg:#f7faff}*{box-sizing:border-box}body.webcam-directory-page{margin:0;background:var(--wd-bg);color:var(--wd-navy);font-family:Montserrat,Arial,sans-serif}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.wd-header{height:86px;display:flex;align-items:center;gap:32px;padding:10px clamp(18px,4vw,72px);background:#fff;border-bottom:1px solid var(--wd-border);position:relative;z-index:2}.wd-logo{width:120px;display:flex;align-items:center}.wd-logo img{max-width:100%;height:62px;object-fit:contain}.wd-header nav{display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,46px);flex:1}.wd-header nav a,.wd-footer a{color:var(--wd-navy);font-size:14px;font-weight:800;text-decoration:none}.wd-header nav a:hover,.wd-header nav a[aria-current=page]{color:var(--wd-blue)}.wd-tools{display:flex;align-items:center;gap:12px}.wd-language select,.wd-menu{height:46px;border:1px solid var(--wd-border);border-radius:14px;background:#fff;color:var(--wd-navy);font:700 13px Montserrat,Arial;padding:0 13px}.wd-menu{width:46px;display:grid;place-items:center;text-decoration:none;font-size:22px}.wd-hero{padding:clamp(42px,7vw,94px) max(24px,calc((100vw - 1220px)/2));background:linear-gradient(120deg,#e8f1ff,#f7faff 55%,#eaf2ff);display:grid;grid-template-columns:1fr auto;align-items:end;gap:50px}.wd-eyebrow{color:var(--wd-blue);font-size:13px;font-weight:900;letter-spacing:.16em;margin:0 0 14px}.wd-hero h1{font-size:clamp(38px,5.6vw,72px);letter-spacing:-.055em;line-height:1.04;margin:0;max-width:850px}.wd-hero h1 span{color:var(--wd-blue)}.wd-lead{color:var(--wd-muted);font-size:clamp(16px,1.5vw,20px);line-height:1.7;max-width:770px;margin:24px 0 0}.wd-stats{display:flex;gap:12px}.wd-stats div{min-width:120px;padding:17px;background:#fff;border:1px solid var(--wd-border);border-radius:18px;display:flex;flex-direction:column;gap:7px}.wd-stats strong{font-size:27px;color:var(--wd-blue)}.wd-stats span{font-size:11px;line-height:1.45;color:var(--wd-muted);font-weight:700}.wd-content{max-width:1320px;padding:58px 28px 78px;margin:auto}.wd-section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px}.wd-section-heading h2{font-size:clamp(26px,3vw,40px);letter-spacing:-.04em;margin:0}.wd-search{display:flex;align-items:center;gap:10px;height:48px;padding:0 15px;border:1px solid var(--wd-border);border-radius:14px;background:#fff;color:var(--wd-blue)}.wd-search span{font-size:25px}.wd-search input{border:0;outline:0;width:min(300px,40vw);font:500 13px Montserrat,Arial;color:var(--wd-navy)}.wd-filters{display:flex;gap:9px;flex-wrap:wrap;margin:25px 0 16px}.wd-filter{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--wd-border);background:#fff;color:var(--wd-navy);border-radius:999px;padding:11px 17px;font:800 13px Montserrat,Arial;text-decoration:none;cursor:pointer}.wd-filter[aria-current=page]{background:var(--wd-blue);color:#fff;border-color:var(--wd-blue)}.wd-summary{color:var(--wd-muted);font-size:13px;margin:12px 0 18px}.wd-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.wd-card{overflow:hidden;background:#fff;border:1px solid var(--wd-border);border-radius:22px;box-shadow:0 8px 24px #263e5a0a;min-width:0}.wd-camera{width:100%;height:230px;border:0;padding:0;background:linear-gradient(145deg,#e8f0fb,#d8e7fa);display:block;position:relative;cursor:zoom-in;text-align:left}.wd-camera img{width:100%;height:100%;object-fit:cover;display:block}.wd-camera img.is-loading{opacity:0}.wd-camera .wd-camera-fallback{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:24px;color:var(--wd-muted);font-size:13px;line-height:1.6;font-weight:700}.wd-camera-loaded .wd-camera-fallback{display:none}.wd-zoom{position:absolute;right:14px;bottom:14px;border-radius:11px;background:#fff;color:var(--wd-blue);padding:9px 12px;font-size:12px;font-weight:900;box-shadow:0 4px 16px #152b4a30}.wd-card-body{padding:19px}.wd-card-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}.wd-card h3{font-size:19px;line-height:1.3;letter-spacing:-.035em;margin:0}.wd-range-tag{white-space:nowrap;border-radius:999px;background:var(--wd-pale);color:var(--wd-blue);padding:7px 9px;font-size:10px;font-weight:900}.wd-location{color:var(--wd-muted);font-size:12px;margin:8px 0 14px}.wd-report{padding:12px 13px;border-radius:14px;background:#f7faff;border:1px solid #e5edf8;min-height:96px}.wd-report-head{display:flex;align-items:center;gap:8px;color:var(--wd-navy);font-size:12px;font-weight:900}.wd-signal{width:10px;height:10px;border-radius:50%;background:#94a3b8;box-shadow:0 0 0 4px #e8edf3;flex:none}.wd-signal.green{background:#1ca66b;box-shadow:0 0 0 4px #e0f5eb}.wd-signal.yellow{background:#eab52b;box-shadow:0 0 0 4px #fcf4dc}.wd-signal.red{background:#e24c55;box-shadow:0 0 0 4px #fae5e6}.wd-report p{font-size:12px;line-height:1.55;color:#5f7590;margin:10px 0 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.wd-report-meta{margin-top:9px;display:flex;gap:12px;flex-wrap:wrap;color:#617994;font-size:10px;font-weight:700}.wd-no-report{color:#70839c;font-size:12px;line-height:1.5}.wd-links{display:flex;gap:9px;flex-wrap:wrap;margin-top:15px}.wd-links a{font-size:11px;font-weight:900;color:var(--wd-blue);text-decoration:none;border:1px solid var(--wd-border);border-radius:10px;padding:9px 11px}.wd-links a:hover{background:var(--wd-pale)}.wd-data-note{margin:26px 0 0;color:var(--wd-muted);font-size:12px;line-height:1.65}.wd-footer{background:#fff;border-top:1px solid var(--wd-border);padding:22px max(24px,calc((100vw - 1264px)/2));display:flex;justify-content:space-between;gap:20px;align-items:center}.wd-footer span{color:var(--wd-muted);font-size:12px}.wd-dialog{width:min(1160px,96vw);max-width:none;height:min(92vh,900px);max-height:92vh;padding:0;border:0;border-radius:22px;background:#0d1724;color:white;box-shadow:0 25px 90px #0008}.wd-dialog::backdrop{background:#07101dc9;backdrop-filter:blur(5px)}.wd-dialog-inner{height:100%;display:flex;flex-direction:column;padding:22px}.wd-dialog h2{font-size:21px;margin:0 50px 3px 0}.wd-camera-time{font-size:12px;color:#c5d1e2;margin:0 0 15px}.wd-camera-frame{position:relative;min-height:0;flex:1;display:grid;place-items:center;overflow:hidden;background:#05090f;border-radius:12px}.wd-camera-frame img{width:100%;height:100%;object-fit:contain}.wd-camera-frame iframe{width:100%;height:100%;border:0}.wd-dialog-inner>a{color:#bdd2ff;font-size:12px;font-weight:800;text-align:right;margin-top:12px}.wd-close{position:absolute;right:20px;top:16px;width:40px;height:40px;border:1px solid #ffffff40;border-radius:50%;background:#ffffff18;color:#fff;font-size:28px;cursor:pointer}.wd-loading,.wd-empty{grid-column:1/-1;border:1px dashed var(--wd-border);border-radius:18px;padding:32px;text-align:center;color:var(--wd-muted);background:#fff}
@media(max-width:1050px){.wd-header{gap:18px}.wd-header nav{gap:16px}.wd-header nav a{font-size:12px}.wd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wd-hero{grid-template-columns:1fr}.wd-stats{max-width:600px}}
@media(max-width:700px){.wd-header{height:70px;padding:8px 15px;gap:10px}.wd-logo{width:80px}.wd-logo img{height:50px}.wd-header nav{display:none}.wd-tools{margin-left:auto}.wd-language select{height:42px;max-width:135px;font-size:11px;padding:0 7px}.wd-menu{height:42px;width:42px}.wd-hero{padding:38px 21px 28px;gap:22px}.wd-eyebrow{font-size:10px}.wd-hero h1{font-size:42px}.wd-lead{font-size:15px;line-height:1.6;margin-top:17px}.wd-stats{gap:7px}.wd-stats div{min-width:0;flex:1;padding:11px;border-radius:14px}.wd-stats strong{font-size:22px}.wd-stats span{font-size:9px}.wd-content{padding:38px 15px 50px}.wd-section-heading{align-items:stretch;flex-direction:column}.wd-section-heading h2{font-size:27px}.wd-search{height:45px}.wd-search input{width:100%;font-size:12px}.wd-filters{flex-wrap:nowrap;overflow-x:auto;margin:19px -15px 12px;padding:0 15px 6px;scrollbar-width:thin}.wd-filter{padding:10px 14px;white-space:nowrap;font-size:11px}.wd-grid{grid-template-columns:1fr;gap:14px}.wd-camera{height:220px}.wd-card-body{padding:15px}.wd-card h3{font-size:17px}.wd-range-tag{font-size:9px;padding:6px 8px}.wd-footer{padding:20px 16px;flex-wrap:wrap;justify-content:center;text-align:center}.wd-footer span{width:100%;order:3}.wd-dialog{width:100vw;height:100dvh;max-height:100dvh;border-radius:0}.wd-dialog-inner{padding:17px}.wd-dialog h2{font-size:18px}.wd-close{right:14px;top:12px}}
.wd-mobile-nav{display:none}
@media(max-width:700px){.wd-mobile-nav:not([hidden]){display:flex;position:absolute;z-index:5;right:14px;top:64px;min-width:220px;flex-direction:column;padding:9px;background:#fff;border:1px solid var(--wd-border);border-radius:16px;box-shadow:0 15px 40px #263e5a24}.wd-mobile-nav a{padding:13px 12px;border-radius:10px;color:var(--wd-navy);font-size:13px;font-weight:800;text-decoration:none}.wd-mobile-nav a:hover,.wd-mobile-nav a[aria-current=page]{background:var(--wd-pale);color:var(--wd-blue)}}

.wd-hero h1 .wd-title-main{color:var(--wd-navy)}.wd-live-camera iframe{width:100%;height:100%;border:0;pointer-events:none}

.wd-no-feed{text-decoration:none}

/* Camera directory loading placeholders keep the layout stable while remote data arrives. */
.wd-skeleton{overflow:hidden}.wd-skeleton-camera{height:230px;background:linear-gradient(100deg,#e8eef7 25%,#f5f8fc 40%,#e8eef7 55%);background-size:220% 100%;animation:wd-shimmer 1.35s ease-in-out infinite}.wd-skeleton .wd-card-body{display:grid;gap:12px}.wd-skeleton-line,.wd-skeleton-report,.wd-skeleton-links i{display:block;border-radius:10px;background:linear-gradient(100deg,#edf2f9 25%,#f8faff 40%,#edf2f9 55%);background-size:220% 100%;animation:wd-shimmer 1.35s ease-in-out infinite}.wd-skeleton-title{height:22px;width:58%}.wd-skeleton-location{height:15px;width:38%}.wd-skeleton-report{height:96px;border:1px solid #e5edf8}.wd-skeleton-links{display:flex;gap:9px;margin-top:2px}.wd-skeleton-links i{height:34px;width:120px}@keyframes wd-shimmer{to{background-position-x:-220%}}#wd-centres{scroll-margin-top:16px}@media(max-width:700px){.wd-skeleton-camera{height:220px}}@media(prefers-reduced-motion:reduce){.wd-skeleton-camera,.wd-skeleton-line,.wd-skeleton-report,.wd-skeleton-links i{animation:none;background:#edf2f9}}
