@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";body[data-theme=light]{--bg: #F9F6EE;--card-bg: #f7fafc;--main-card: #f3f4f6;--text-color: #1a202c;--muted-text: #6b7280;--border-color: rgba(0, 0, 0, .5);--gradient-1: #38bdf8;--gradient-2: #818cf8;--gradient-3: #fcd34d}body[data-theme=dark]{--bg: #0d1219;--card-bg: #141b21;--main-card: #141b21;--text-color: #e3e9f4;--muted-text: #6b7280;--border-color: rgba(255, 255, 255, .05);--gradient-1: #38bdf8;--gradient-2: #818cf8;--gradient-3: #fcd34d}body{font-family:Inter,sans-serif;background-color:var(--bg);color:var(--text-color);max-width:1400px;margin:10px auto;padding:0;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.loading-container{display:flex;flex-direction:column;align-items:center;gap:20px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-body{color:#f7fafc;display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:sans-serif;margin:0}.spinner{width:80px;height:80px;border:4px solid rgba(255,255,255,.2);border-top:4px solid #3B82F6;border-radius:50%;animation:spin 1.2s linear infinite}.loading-text{margin-top:1rem;font-size:1.25rem;font-weight:500}.dashboard{width:100%;max-width:1600px;border-radius:20px;overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:var(--bg);border:1px solid var(--border-color)}.details-dashboard{max-width:1600px;border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border-color);background:var(--bg);margin:20px;padding:5px;color:var(--text-color)}.forecast-details-dashboard{max-width:1600px;border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:var(--bg);border:1px solid var(--border-color);margin:20px;padding:5px}.sidebar{background-color:var(--card-bg);padding:20px 0;display:flex;flex-direction:column;align-items:center;border-right:1px solid var(--border-color)}.logo{font-size:24px;font-weight:700;color:#fff;margin-bottom:20px}.nav-link{width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-bottom:15px;transition:background-color .2s ease}.nav-link.active{background:#ffffff0d}.nav-link:hover{background:#ffffff08}.nav-icon{width:24px;height:24px;color:var(--muted-text)}.nav-link.active .nav-icon{color:var(--text-color)}.content{padding:20px}.header{display:flex;justify-content:space-between;align-items:center}.main-content{display:grid;grid-template-columns:.75fr 1fr;gap:20px}.left-panel{display:grid;grid-template-rows:auto 1fr;gap:20px}.current-weather .weather-icon{font-size:70px}.location{margin-top:15px;font-size:14px;color:var(--text-color)}.alerts-section{background-color:var(--main-card);border-radius:15px;padding:20px;display:flex;flex-direction:column;border:1px solid var(--border-color);color:var(--text-color)}.right-panel{display:grid;grid-template-rows:auto auto 1fr;gap:20px}.gauges-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.gauge-card{background-color:var(--card-bg);border-radius:15px;padding:15px;display:flex;flex-direction:column;align-items:center;border:1px solid var(--border-color)}.gauge-container{position:relative;overflow:hidden;margin-bottom:10px}.uv-gauge .gauge-arc{background:conic-gradient(from 180deg at 50% 100%,#2ab7ff 0deg 60%,#ffffff1a 60% 180deg)}.sunrise-gauge .gauge-arc{background:conic-gradient(from 180deg at 50% 100%,#ffb86b 0deg 70%,#ffffff1a 70% 180deg)}.gauge-label{font-size:12px;color:var(--muted-text)}.map-section img{width:100%;height:100%;object-fit:cover;border-radius:10px;min-height:250px}.details{border:1px solid var(--border-color);border-radius:15px;background-color:var(--card-bg);padding:10px}.details-content{display:grid;grid-template-columns:3fr 1fr;gap:20px}.details-header{display:flex;justify-content:space-between;align-items:center;width:100%}.forecast-details-content{display:grid;grid-template-columns:1fr 2fr;gap:20px}.detail-item{display:flex;justify-content:space-between;gap:20px;margin-top:10px;border-bottom:1px solid var(--border-color)}.dial{text-align:center}.rain-gauge{display:flex;align-items:center;justify-content:center}.chart-container{height:550px;padding:10px;background-color:var(--card-bg);border-radius:15px;border:1px solid var(--border-color);margin:20px}.chart{height:450px}.bar-chart{height:375px}.green{color:#01e400}.yellow{color:#ff0}.orange{color:#ff7e00}.red{color:red}.purple{color:#8f3f97}.maroon{color:#7e0023}.good{color:#01e400}.info-container{padding:5px;display:flex;justify-content:space-between;flex-direction:row;gap:5px}.info-card{background-color:var(--card-bg);border-radius:15px;padding:10px 15px;display:flex;align-items:center;border:1px solid var(--border-color);color:var(--text-color);font-size:15px;cursor:pointer}.connected{color:#22c55e}.disconnected{color:#ef4444}.forecast-details{width:100%;max-width:1600px;border-radius:20px;overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#141b2180;border:1px solid var(--border-color)}.copyright{margin:20px;text-align:center;color:var(--muted-text)}.copyright a{color:orange}.dropdown-container{position:relative;display:inline-block;border-radius:10px;border:none}.dropdown-container button{background-color:var(--card-bg);color:var(--text-color);cursor:pointer;border:none}button:focus{outline:none;!important}.more-button{display:inline-flex;justify-content:center;align-items:center;width:100%;font-weight:500}.more-button svg{margin-left:.5rem;height:1.25rem;width:1.25rem}.more-button:focus{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px #1f2937,0 0 0 4px #3b82f6}.dropdown-menu{position:absolute;right:0;margin-top:.5rem;width:12rem;border-radius:.375rem;background-color:#1f2937;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;border:1px solid rgba(0,0,0,.05);transform-origin:top right;transition:opacity .2s ease-out,transform .2s ease-out;opacity:0;transform:scale(.95);pointer-events:none}.dropdown-menu.active{opacity:1;transform:scale(1);pointer-events:auto}.dropdown-menu-inner{padding-top:.25rem;padding-bottom:.25rem}.dropdown-menu a{color:#d1d5db;display:block;padding:.5rem 1rem;font-size:.875rem;text-decoration:none}.dropdown-menu a:hover{background-color:#374151}@media only screen and (max-width: 1200px){.dashboard,.main-content,.details-dashboard,.forecast-details-content{grid-template-columns:1fr}.details-header h1{font-size:22px}.details-content{display:block}.climate-details-content{grid-template-columns:1fr}.chart-container{display:none}.dial{margin-top:30px}}@media only screen and (max-width: 768px){.dashboard{width:100%;grid-template-columns:1fr}.sidebar{display:none}.header{flex-direction:column;gap:10px;align-items:flex-start}.main-content,.stats-grid,.gauges-grid,.forecast-details-content{grid-template-columns:1fr}.chart-container{display:none}}.current-weather{background-color:var(--main-card);border-radius:15px;padding:25px;display:flex;gap:25px;align-items:center;position:relative;overflow:hidden;border:1px solid var(--border-color)}.current-weather:before{content:"";position:absolute;top:-50px;left:-50px;width:200px;height:200px;background:radial-gradient(circle,rgba(62,149,237,.2) 0%,transparent 70%);border-radius:50%}.current-weather .weather-icon img{height:75px;width:75px}.current-weather .main-unit{font-size:.5em}.forecast-section .weather-icon{font-size:30px}.weather-info h1{font-size:50px;font-weight:700;margin:0}.weather-info p{margin:5px 0 0;font-size:18px;color:var(--muted-text)}.location{margin-top:15px;font-size:14px}.location span{color:var(--muted-text)}.forecast-section{background-color:var(--main-card);border-radius:15px;padding:20px;display:flex;flex-direction:column;border:1px solid var(--border-color)}.forecast-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;color:var(--text-color)}.forecast-header h2{font-size:16px;font-weight:500;margin:0}.forecast-header select{background:transparent;border:1px solid var(--border-color);color:var(--text-color);padding:5px 10px;border-radius:8px;outline:none}.forecast-section .weather-icon img{height:30px;width:30px}.forecast-day{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border-color);cursor:pointer}.forecast-day:last-child{border-bottom:none}.day-info{display:flex;align-items:center;gap:15px}.day-temp{display:flex;font-weight:600;font-size:18px;line-height:18px;width:250px}.day-date{font-size:14px;color:var(--muted-text)}.temp-bar-container{flex:2;height:6px;background-color:#eee;border-radius:3px;margin:5px 10px;position:relative}.temp-bar{height:100%;border-radius:3px}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.stat-card{background-color:var(--card-bg);border-radius:15px;padding:15px 20px;display:flex;flex-direction:column;gap:5px;border:1px solid var(--border-color)}.hasclick{cursor:pointer}.stat-card .value{font-size:24px;font-weight:600;margin:0}.stat-card .label{font-size:14px;color:var(--muted-text);margin:0}.stat-icon{font-size:20px;color:var(--text-color);margin-bottom:2px}.stat-value-unit{font-size:14px;color:var(--muted-text)}.alert-container{display:flex;flex-direction:column}.event{text-align:center;font-weight:700;font-size:1.5em;display:flex;align-items:center;justify-content:center}.event span{font-size:32px}.headline{margin-top:10px;font-size:18px;text-align:center}.no-alerts{font-size:18px}.starts,.ends{font-size:12px}.alert-box{font-size:14px}.uparrow,.downarrow{height:16px;font-size:16px;text-align:center;cursor:pointer}.tsunami-warning{color:#fd6347}.tornado-warning{color:red}.extreme-wind-warning{color:#ff8c00}.severe-thunderstorm-warning{color:orange}.flash-flood-warning,.flash-flood-statement{color:#8b0000}.severe-weather-statement{color:#0ff}.shelter-in-place-warning{color:salmon}.evacuation---immediate{color:#7fff00}.civil-danger-warning{color:#ffb6c1}.nuclear-power-plant-warning,.radiological-hazard-warning,.hazardous-materials-warning{color:indigo}.fire-warning{color:sienna}.civil-emergency-message{color:#ffb6c1}.law-enforcement-warning{color:silver}.storm-surge-warning{color:#b524f7}.hurricane-force-wind-warning{color:#cd5c5c}.hurricane-warning,.typhoon-warning{color:#dc143c}.special-marine-warning{color:orange}.blizzard-warning{color:#ff4500}.snow-squall-warning{color:#c71585}.ice-storm-warning{color:#8b008b}.winter-storm-warning{color:#ff69b4}.high-wind-warning{color:#daa520}.tropical-storm-warning{color:#b22222}.storm-warning{color:#9400d3}.tsunami-advisory{color:#d2691e}.tsunami-watch{color:#f0f}.avalanche-warning{color:#1e90ff}.earthquake-warning{color:#8b4513}.volcano-warning{color:#2f4f4f}.ashfall-warning{color:#a9a9a9}.coastal-flood-warning,.lakeshore-flood-warning{color:#228b22}.flood-warning{color:#0f0}.high-surf-warning{color:#228b22}.dust-storm-warning,.blowing-dust-warning{color:bisque}.lake-effect-snow-warning{color:#008b8b}.excessive-heat-warning{color:#c71585}.tornado-watch{color:#ff0}.severe-thunderstorm-watch{color:#db7093}.flash-flood-watch{color:#2e8b57}.gale-warning{color:plum}.flood-statement{color:#0f0}.wind-chill-warning{color:#b0c4de}.extreme-cold-warning{color:#00f}.hard-freeze-warning{color:#9400d3}.freeze-warning{color:#483d8b}.red-flag-warning{color:#ff1493}.storm-surge-watch{color:#db7ff7}.hurricane-watch{color:#f0f}.hurricane-force-wind-watch{color:#9932cc}.typhoon-watch{color:#f0f}.tropical-storm-watch{color:#f08080}.storm-watch,.hurricane-local-statement,.typhoon-local-statement,.tropical-storm-local-statement,.tropical-depression-local-statement{color:#ffe4b5}.avalanche-advisory{color:peru}.freezing-rain-advisory{color:orchid}.winter-weather-advisory{color:#7b68ee}.lake-effect-snow-advisory{color:#48d1cc}.wind-chill-advisory{color:#afeeee}.heat-advisory{color:coral}.urban-and-small-stream-flood-advisory,.small-stream-flood-advisory,.arroyo-and-small-stream-flood-advisory,.flood-advisory,.hydrologic-advisory{color:#00ff7f}.lakeshore-flood-advisory,.coastal-flood-advisory{color:#7cfc00}.high-surf-advisory{color:#ba55d3}.heavy-freezing-spray-warning{color:#00bfff}.dense-fog-advisory{color:#708090}.dense-smoke-advisory{color:khaki}.small-craft-advisory-for-hazardous-seas,.small-craft-advisory-for-rough-bar,.small-craft-advisory-for-winds,.small-craft-advisory,.brisk-wind-advisory,.hazardous-seas-warning{color:#d8bfd8}.dust-advisory,.blowing-dust-advisory{color:#bdb76b}.lake-wind-advisory,.wind-advisory{color:tan}.frost-advisory{color:#6495ed}.ashfall-advisory{color:#696969}.freezing-fog-advisory{color:teal}.freezing-spray-advisory{color:#00bfff}.low-water-advisory{color:brown}.local-area-emergency{color:silver}.child-abduction-emergency{color:gold}.avalanche-watch{color:#f4a460}.blizzard-watch{color:#adff2f}.rip-current-statement,.beach-hazards-statement{color:#40e0d0}.gale-watch{color:pink}.winter-storm-watch{color:#4682b4}.hazardous-seas-watch{color:#483d8b}.heavy-freezing-spray-watch{color:#bc8f8f}.coastal-flood-watch,.lakeshore-flood-watch{color:#66cdaa}.flood-watch{color:#2e8b57}.high-wind-watch{color:#b8860b}.excessive-heat-watch{color:maroon}.extreme-cold-watch{color:#00f}.wind-chill-watch{color:#5f9ea0}.lake-effect-snow-watch{color:#87cefa}.hard-freeze-watch{color:#4169e1}.freeze-watch{color:#0ff}.fire-weather-watch{color:#ffdead}.extreme-fire-danger{color:#e9967a}.telephone-outage-911{color:silver}.coastal-flood-statement,.lakeshore-flood-statement{color:#6b8e23}.special-weather-statement{color:#ffe4b5}.marine-weather-statement{color:#ffdab9}.air-quality-alert,.air-stagnation-advisory{color:gray}.hazardous-weather-outlook{color:#eee8aa}.hydrologic-outlook{color:#90ee90}.short-term-forecast{color:#98fb98}.administrative-message{color:silver}.test{color:azure}.stat-container{padding:5px;display:flex;flex-direction:row;gap:10px}.stat-box{background-color:var(--card-bg);border-radius:5px;padding:5px;border:1px solid var(--border-color)}.color-range-10-below{color:#1a237e}.color-range-10-to-19{color:#283593}.color-range-20-to-29{color:#3949ab}.color-range-30-to-39{color:#42a5f5}.color-range-40-to-49{color:#66bb6a}.color-range-50-to-59{color:#ffee58}.color-range-60-to-69{color:#ffa726}.color-range-70-to-79{color:#ef5350}.color-range-80-to-89{color:#e53935}.color-range-90-and-above{color:#c62828}.tempmodulehome-50-10c{color:#8781bd}.tempmodulehome-10-0c{color:#487ea9}.tempmodulehome0-5c{color:#3b9cac}.tempmodulehome5-10c{color:#9aba2f}.tempmodulehome10-15c,.tempmodulehome15-20c{color:#e6a141}.tempmodulehome20-25c{color:#ec5a34}.tempmodulehome25-30c{color:#d05f2d}.tempmodulehome30-35c{color:#d65b4a}.temphumcircle80-100{color:#4e95a0}.temphumcircle60-80{color:#e6a141}.temphumcircle35-60{color:#90b12a}.temphumcircle25-35{color:#d05f2d}.temphumcircle0-25{color:#d35d4e}.wind-container{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1.3fr .7fr;gap:0px 0px;grid-auto-flow:row;grid-template-areas:"current current current" "bft maxgust windrun"}.bft{grid-area:bft}.maxgust{grid-area:maxgust}.windrun{grid-area:windrun}.current{grid-area:current}.bft,.maxgust,.windrun{padding-top:20px;font-size:10px}.bft svg{vertical-align:middle}.current-wind{font-size:16px}.conditions{display:flex;justify-content:space-evenly}.bfttxt{font-size:.55rem}.beaufort1-3{color:#90b12a}.beaufort3-4{color:#e6a141}.beaufort4-5{color:#ff7c39}.beaufort6{color:#d35d4e}.windunitidspeed{color:#ff7c39}.current,.gusts{font-size:18px}.lightning-yellow{color:#daa520}.rain-blue{color:#3b9cac}.forecast-info .weather-icon img{height:120px;width:120px}.forecast-info{text-align:center;margin:20px auto;padding:5px;border:1px solid var(--border-color);background-color:var(--card-bg);border-radius:15px}.left{padding:0 10px}.right{margin-top:40px}.charts{display:flex;flex-direction:column;gap:50px;margin:20px auto}.about-dashboard{width:100%;max-width:1600px;border-radius:20px;overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#141b2180;border:1px solid var(--border-color)}.about-dashboard .main-content{display:grid;grid-template-columns:1fr;gap:20px}.about-dashboard .main-content a{color:orange}.list-container{padding:1.5rem;border-radius:.5rem;box-shadow:0 4px 6px #0000001a;max-width:64rem;margin-left:auto;margin-right:auto}.list-header{font-size:1.5rem;font-weight:700;margin-bottom:1rem;text-align:center;color:var(--text-color)}.list-wrapper{display:flex;gap:2rem}.sensor-list{list-style:none;padding:0;margin:0;flex:1 1 50%}.sensor-item{display:flex;align-items:center;margin-bottom:.5rem;color:var(--text-color)}.sensor-item:before{content:"✓";color:orange;font-size:1.25rem;font-weight:700;margin-right:.5rem;line-height:1}.climate-table-container{background-color:#1a202c;color:#e2e8f0;font-family:Inter,sans-serif;padding:2rem;border-radius:1rem;max-width:1200px;margin:2rem auto;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.climate-details-content{display:grid;grid-template-columns:2fr 2fr;gap:20px}.table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}.table-title{color:#fff;font-size:1.25rem;font-weight:600}.metric-selector{background-color:#2d3748;color:#e2e8f0;border:1px solid #4a5568;border-radius:.5rem;padding:.5rem 2rem .5rem .75rem;font-size:.875rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;cursor:pointer}.metric-selector:focus{outline:none;border-color:#63b3ed;box-shadow:0 0 0 2px #4299e1}.table-wrapper{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:center}th,td{padding:.75rem .5rem;font-size:.875rem;white-space:nowrap}thead{background-color:#2d3748}th{color:#a0aec0;font-weight:500;text-transform:uppercase;letter-spacing:.05em}thead th:first-child{border-top-left-radius:.5rem}thead th:last-child{border-top-right-radius:.5rem}tbody tr{border-bottom:1px solid #2d3748}tbody tr:last-child{border-bottom:none}tbody tr:hover{background-color:#2d3748}tbody td:first-child{font-weight:600;color:#cbd5e0}