:root{--cloudy-blue: #17274f;--cloudy-yellow: #f6b91a;--cloudy-blue-100: #243a6d;--cloudy-blue-200: #1e325f}.cloudy-layout{height:100vh;width:100vw;display:flex;flex-direction:column;overflow:hidden}.cloudy-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.1);z-index:10}.dark .cloudy-header{background:rgba(23,39,79,.7)}.header-brand{display:flex;align-items:center;gap:.5rem;font-size:1.25rem;font-weight:700;color:var(--cloudy-blue)}.header-brand .brand-sky{color:#0074e0}.dark .header-brand{color:var(--cloudy-yellow)}.dark .header-brand .brand-sky{color:#64b5f6}.header-nav{display:flex;gap:1rem}.header-nav-item{padding:.5rem 1rem;border-radius:.5rem;color:var(--cloudy-blue);transition:all .2s;cursor:pointer}.dark .header-nav-item{color:#fff}.header-nav-item:hover{background:rgba(23,39,79,.1)}.dark .header-nav-item:hover{background:rgba(255,255,255,.1)}.header-nav-item.active{background:var(--cloudy-blue);color:#fff}.dark .header-nav-item.active{background:var(--cloudy-yellow);color:var(--cloudy-blue)}.cloudy-sidebar{position:fixed;top:4rem;right:1rem;width:300px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:1rem;box-shadow:0 4px 30px #0000001a;transform:translate(100%);transition:transform .3s ease;z-index:20}.dark .cloudy-sidebar{background:rgba(23,39,79,.8)}.cloudy-sidebar.open{transform:translate(0)}.sidebar-menu{padding:1rem}.sidebar-menu-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;border-radius:.5rem;color:var(--cloudy-blue);cursor:pointer;transition:all .2s}.dark .sidebar-menu-item{color:#fff}.sidebar-menu-item:hover{background:rgba(23,39,79,.1)}.dark .sidebar-menu-item:hover{background:rgba(255,255,255,.1)}.weather-card{background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:1rem;padding:1.5rem;margin:1rem;border:1px solid rgba(255,255,255,.2);transition:transform .2s}.dark .weather-card{background:rgba(23,39,79,.8);border-color:#ffffff1a}.weather-card:hover{transform:translateY(-2px)}.alert-banner{padding:1rem;margin:1rem;border-radius:.5rem;display:flex;align-items:center;gap:1rem}.alert-banner.extreme{background:rgba(220,38,38,.9);color:#fff}.alert-banner.severe{background:rgba(234,88,12,.9);color:#fff}.alert-banner.moderate{background:rgba(234,179,8,.9);color:#fff}.mobile-drawer{position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top-left-radius:1rem;border-top-right-radius:1rem;transform:translateY(100%);transition:transform .3s ease;z-index:30;box-shadow:0 -4px 20px #0000001a;max-height:80vh;overflow-y:auto}.dark .mobile-drawer{background:rgba(23,39,79,.9)}.mobile-drawer.open{transform:translateY(0)}.drawer-handle{width:40px;height:4px;background:rgba(0,0,0,.2);border-radius:2px;margin:.75rem auto}.dark .drawer-handle{background:rgba(255,255,255,.2)}.drawer-content{padding:1rem}.mobile-nav{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.5rem}.mobile-nav-item{padding:1rem;border-radius:.5rem;background:rgba(255,255,255,.5);color:var(--cloudy-blue);text-align:center;font-weight:500;transition:all .2s;cursor:pointer}.dark .mobile-nav-item{background:rgba(255,255,255,.1);color:#fff}.mobile-nav-item:hover{background:rgba(23,39,79,.1)}.dark .mobile-nav-item:hover{background:rgba(255,255,255,.2)}.mobile-nav-item.active{background:var(--cloudy-blue);color:#fff}.dark .mobile-nav-item.active{background:var(--cloudy-yellow);color:var(--cloudy-blue)}.cloudy-map-container{flex:1;position:relative;overflow:hidden;height:calc(100vh - 60px);min-height:500px}.static-map-container{width:100%;height:100%;position:relative;overflow:hidden}.static-map-container iframe{width:100%;height:calc(100% + 120px);border:none;position:absolute;top:-60px;left:0;clip-path:inset(60px 0 60px 0)}.map-controls{position:absolute;bottom:20px;right:20px;z-index:10;display:flex;gap:8px;background:rgba(255,255,255,.7);padding:8px;border-radius:8px;box-shadow:0 2px 10px #0000001a;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.map-control-button{background:var(--cloudy-blue);color:#fff;border:none;border-radius:4px;padding:8px 12px;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;min-width:70px}.map-control-button:hover{background:var(--cloudy-blue-100);transform:translateY(-1px)}.map-control-button:active{transform:translateY(1px)}.dark .map-controls{background:rgba(23,39,79,.7)}.dark .map-control-button{background:var(--cloudy-yellow);color:var(--cloudy-blue)}.dark .map-control-button:hover{background:#ffc93c}.header-actions{display:flex;gap:.5rem}.header-button{background:none;border:none;padding:.5rem;border-radius:.5rem;cursor:pointer;color:var(--cloudy-blue);transition:all .2s}.dark .header-button{color:var(--cloudy-yellow)}.header-button:hover{background:rgba(23,39,79,.1)}.dark .header-button:hover{background:rgba(255,255,255,.1)}@media (max-width: 768px){.cloudy-sidebar{display:none}.header-nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:.5rem;z-index:100;box-shadow:0 -2px 10px #0000001a}.dark .header-nav{background:rgba(23,39,79,.9)}.header-nav-item{padding:.5rem;font-size:.9rem}.cloudy-map-container{height:calc(100vh - 110px)}}.header-button.mobile-toggle{display:none}.meteorologist-container{padding:1.5rem;max-width:1200px;margin:0 auto}.meteorologist-title{font-size:1.75rem;color:var(--cloudy-blue);margin-bottom:1.5rem;text-align:center}.dark .meteorologist-title{color:var(--cloudy-yellow)}.meteorologist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}.meteorologist-card{background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:1rem;overflow:hidden;box-shadow:0 4px 15px #0000001a;transition:transform .2s,box-shadow .2s;border:1px solid rgba(255,255,255,.2)}.dark .meteorologist-card{background:rgba(23,39,79,.8);border-color:#ffffff1a}.meteorologist-card:hover{transform:translateY(-5px);box-shadow:0 8px 25px #00000026}.meteorologist-card-header{background:var(--cloudy-blue);color:#fff;padding:1rem}.dark .meteorologist-card-header{background:var(--cloudy-yellow);color:var(--cloudy-blue)}.meteorologist-card-header h3{margin:0;font-size:1.25rem}.meteorologist-card-body{padding:1.25rem;color:var(--cloudy-blue)}.dark .meteorologist-card-body{color:#fff}.meteorologist-link{display:inline-block;margin-top:1rem;padding:.5rem 1rem;background:var(--cloudy-blue);color:#fff;text-decoration:none;border-radius:.5rem;font-weight:500;transition:all .2s}.dark .meteorologist-link{background:var(--cloudy-yellow);color:var(--cloudy-blue)}.meteorologist-link:hover{background:var(--cloudy-blue-100);transform:translateY(-2px)}.dark .meteorologist-link:hover{background:#ffc93c}@media (max-width: 768px){.meteorologist-container{padding:1rem}.meteorologist-grid{grid-template-columns:1fr}.meteorologist-title{font-size:1.5rem}}.cameras-container{padding:1.5rem;max-width:1200px;margin:0 auto}.cameras-title{font-size:1.75rem;color:var(--cloudy-blue);margin-bottom:1.5rem;text-align:center}.dark .cameras-title{color:var(--cloudy-yellow)}.cameras-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}.camera-card{background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:1rem;overflow:hidden;box-shadow:0 4px 15px #0000001a;transition:transform .2s,box-shadow .2s;border:1px solid rgba(255,255,255,.2)}.dark .camera-card{background:rgba(23,39,79,.8);border-color:#ffffff1a}.camera-card:hover{transform:translateY(-5px);box-shadow:0 8px 25px #00000026}.camera-card-header{background:var(--cloudy-blue);color:#fff;padding:1rem}.dark .camera-card-header{background:var(--cloudy-yellow);color:var(--cloudy-blue)}.camera-card-header h3{margin:0;font-size:1.25rem}.camera-card-body{padding:1.25rem;color:var(--cloudy-blue)}.dark .camera-card-body{color:#fff}.camera-info{margin-bottom:1rem}.camera-preview{margin-bottom:1rem;border-radius:.5rem;overflow:hidden}.camera-image{width:100%;height:auto;display:block}.camera-link{display:inline-block;margin-top:.5rem;padding:.5rem 1rem;background:var(--cloudy-blue);color:#fff;text-decoration:none;border-radius:.5rem;font-weight:500;transition:all .2s}.dark .camera-link{background:var(--cloudy-yellow);color:var(--cloudy-blue)}.camera-link:hover{background:var(--cloudy-blue-100);transform:translateY(-2px)}.dark .camera-link:hover{background:#ffc93c}@media (max-width: 768px){.cameras-container{padding:1rem}.cameras-grid{grid-template-columns:1fr}.cameras-title{font-size:1.5rem}}