.navbar{background-color:#ffffffb3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.5);box-shadow:0 4px 30px #0000001a;position:sticky;top:0;z-index:1000;padding:15px 0}.navbar .navbar-container{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center;position:relative}.navbar .navbar-logo{font-size:24px;font-weight:800;color:#111;text-decoration:none;z-index:1002}.navbar .navbar-menu{position:absolute;left:50%;transform:translate(-50%);display:flex;justify-content:center;align-items:center;flex:1}.navbar .navbar-links{display:flex;gap:30px}.navbar .navbar-item{color:#444;text-decoration:none;font-weight:600;font-size:16px;transition:color .3s}.navbar .navbar-item:hover,.navbar .navbar-item.active{color:#111}.navbar .navbar-item.active{border-bottom:2px solid #111111;padding-bottom:4px}.navbar .menu-icon{display:none;flex-direction:column;justify-content:space-between;width:30px;height:21px;cursor:pointer;z-index:1002}.navbar .menu-icon .bar{width:100%;height:3px;background-color:#111;border-radius:3px;transition:all .3s ease-in-out}.navbar .menu-icon.open .bar:nth-child(1){transform:translateY(9px) rotate(45deg)}.navbar .menu-icon.open .bar:nth-child(2){opacity:0}.navbar .menu-icon.open .bar:nth-child(3){transform:translateY(-9px) rotate(-45deg)}@media(max-width:768px){.navbar .menu-icon{display:flex}.navbar .navbar-menu{position:fixed;left:auto;transform:none;top:0;right:-100%;width:280px;height:100vh;background-color:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);flex-direction:column;justify-content:flex-start;padding-top:80px;transition:right .3s ease-in-out;box-shadow:-5px 0 15px #0000001a;margin-left:0;z-index:1001}.navbar .navbar-menu.active{right:0}.navbar .navbar-links{flex-direction:column;width:100%;align-items:center;gap:25px;margin-bottom:30px}.navbar .navbar-item{font-size:18px}}.uv-awareness-container{max-width:1200px;margin:0 auto;padding:40px 20px}.uv-awareness-container h1{font-size:32px;font-weight:800;margin-bottom:40px;text-align:center}.uv-awareness-container .awareness-grid{display:flex;flex-direction:column;gap:40px;max-width:800px;margin:0 auto}.awareness-card{background-color:#ffffffa6;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.5);border-radius:32px;padding:30px;box-shadow:0 8px 32px #00000026}@media(max-width:480px){.awareness-card{padding:20px}}.awareness-card h2{font-size:24px;font-weight:800;margin-bottom:20px;border-bottom:2px solid rgba(0,0,0,.1);padding-bottom:10px}.awareness-card .chart-visual{margin:20px 0}.awareness-card .chart-visual .bar-chart{display:flex;flex-direction:column;gap:15px}.awareness-card .chart-visual .bar-chart .bar-item{display:flex;align-items:center;gap:10px}.awareness-card .chart-visual .bar-chart .bar-item .bar-label{width:100px;font-weight:600;font-size:14px;flex-shrink:0}.awareness-card .chart-visual .bar-chart .bar-item .bar-track{flex:1;height:24px;background-color:#ffffff80;border-radius:12px;overflow:hidden;position:relative}.awareness-card .chart-visual .bar-chart .bar-item .bar-track .bar-fill{height:100%;background-color:#ff9800;border-radius:12px;display:flex;align-items:center;justify-content:flex-end;padding-right:10px;color:#fff;font-size:12px;font-weight:700;transition:width 1s ease-out}.awareness-card .chart-visual .bar-chart .bar-item .bar-track .bar-fill.high{background-color:#f44336}.awareness-card .chart-visual .bar-chart .bar-item .bar-track .bar-fill.medium{background-color:#ff9800}.awareness-card .chart-visual .bar-chart .bar-item .bar-track .bar-fill.low{background-color:#4caf50}.awareness-card .impact-list{display:flex;flex-direction:column;gap:20px}.awareness-card .impact-list .impact-item{background:#ffffff80;padding:15px;border-radius:16px}.awareness-card .impact-list .impact-item h3{font-size:18px;font-weight:700;margin:0 0 10px;display:flex;align-items:center;gap:10px}.awareness-card .impact-list .impact-item p{margin:0;font-size:14px;line-height:1.5;color:#444}.awareness-card .impact-list .impact-item.short-term h3{color:#ff9800}.awareness-card .impact-list .impact-item.long-term h3{color:#f44336}.awareness-card .risk-visual{display:flex;justify-content:space-around;align-items:flex-end;height:200px;margin-top:30px;border-bottom:2px solid #111111;padding-bottom:10px;gap:5px}.awareness-card .risk-visual .risk-column{width:60px;flex:1;max-width:60px;min-width:40px;background-color:#ccc;border-radius:8px 8px 0 0;position:relative;transition:height .5s;cursor:pointer}.awareness-card .risk-visual .risk-column:hover{opacity:.8}.awareness-card .risk-visual .risk-column:hover .tooltip{opacity:1;visibility:visible}.awareness-card .risk-visual .risk-column .tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%);background-color:#333;color:#fff;padding:8px;border-radius:4px;font-size:12px;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .3s;margin-bottom:10px;z-index:10}.awareness-card .risk-visual .risk-column .tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:#333 transparent transparent transparent}.awareness-card .risk-visual .risk-column .label{position:absolute;bottom:-30px;width:100%;text-align:center;font-weight:600;font-size:12px}*{box-sizing:border-box}html{touch-action:pan-y;overflow-x:hidden;width:100%}body{margin:0;padding:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f7fa;color:#111;min-height:100vh;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);background-attachment:fixed;overflow-x:hidden;width:100%}.background-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;pointer-events:none}.content-overlay{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}.dashboard-container{max-width:1200px;margin:0 auto;padding:40px 20px}@media(max-width:768px){.dashboard-container{padding:20px 15px}}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px;gap:20px}.header .logo h1{font-size:24px;font-weight:800;margin:0;line-height:1.2}.header .search-container{flex:1;max-width:600px;position:relative;margin:0 auto}.header .search-container .search-input{width:100%;height:48px;padding:0 20px 0 45px;border-radius:24px;border:1px solid #dfe1e5;background-color:#fff;font-size:16px;box-shadow:0 1px 6px #20212447;transition:all .3s ease}.header .search-container .search-input:hover,.header .search-container .search-input:focus{outline:none;box-shadow:0 2px 8px 1px #20212447;border-color:transparent}.header .search-container .search-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#666}.header .location-btn{display:flex;align-items:center;gap:8px;background-color:#b0b0b0;color:#fff;border:none;padding:10px 20px;border-radius:32px;font-weight:700;cursor:pointer;box-shadow:0 8px 32px #00000026;white-space:nowrap}.header .location-btn svg{width:20px;height:20px}.dashboard-grid{display:grid;grid-template-columns:350px 1fr;grid-template-rows:auto auto;gap:30px}@media(max-width:992px){.dashboard-grid{grid-template-columns:1fr}}.card{background-color:#ffffffa6;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.5);border-radius:32px;padding:30px;box-shadow:0 8px 32px #00000026;display:flex;flex-direction:column;width:100%}@media(max-width:768px){.card{padding:20px;border-radius:16px}}.card.city-card{text-align:center;justify-content:center}.card.city-card .city-name{font-size:32px;font-weight:800;margin-bottom:10px}@media(max-width:480px){.card.city-card .city-name{font-size:24px}}.card.city-card .time{font-size:64px;font-weight:900;margin:10px 0}@media(max-width:480px){.card.city-card .time{font-size:48px}}.card.city-card .date{font-size:18px;color:#444;margin-top:20px}.card.uv-card{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}.card.uv-card .uv-index-section.uv-low .uv-value,.card.uv-card .uv-index-section.uv-low .uv-label{color:#2e7d32}.card.uv-card .uv-index-section.uv-moderate .uv-value,.card.uv-card .uv-index-section.uv-moderate .uv-label{color:#f57f17}.card.uv-card .uv-index-section.uv-high .uv-value,.card.uv-card .uv-index-section.uv-high .uv-label{color:#e65100}.card.uv-card .uv-index-section.uv-very-high .uv-value,.card.uv-card .uv-index-section.uv-very-high .uv-label{color:#c62828}.card.uv-card .uv-index-section.uv-extreme .uv-value,.card.uv-card .uv-index-section.uv-extreme .uv-label{color:#6a1b9a}.card.uv-card .uv-index-section .uv-value{font-size:72px;font-weight:900;margin:0}@media(max-width:480px){.card.uv-card .uv-index-section .uv-value{font-size:56px}}.card.uv-card .uv-index-section .uv-label{font-size:24px;font-weight:700;color:#444}.card.uv-card .uv-index-section .sun-times{margin-top:20px}.card.uv-card .uv-index-section .sun-times .sun-item{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:14px;font-weight:600}.card.uv-card .uv-index-section .sun-times .sun-item .sun-icon{width:32px;height:32px}.card.uv-card .weather-section{display:flex;flex-direction:column;align-items:center;justify-content:center}.card.uv-card .weather-section .weather-icon{width:120px;height:120px;margin-bottom:10px}.card.uv-card .weather-section .weather-desc{font-size:28px;font-weight:800}.card.uv-card .protection-section{display:flex;flex-direction:column;gap:20px}.card.uv-card .protection-section .warning{display:flex;gap:10px;color:#d32f2f;font-size:14px;font-weight:600}.card.uv-card .protection-section .warning.low-uv{color:#2e7d32}.card.uv-card .protection-section .warning.extreme-uv{color:#b71c1c;font-weight:800}.card.uv-card .protection-section .warning .warning-icon{font-size:24px}.card.uv-card .protection-section .protection-info-text{font-size:13px;line-height:1.4;color:#444;font-weight:600;margin-top:5px}.card.uv-card .protection-section .dosage-breakdown{background:#ffffff80;padding:12px;border-radius:16px;margin-top:5px}.card.uv-card .protection-section .dosage-breakdown .dosage-title{font-size:13px;font-weight:800;margin-bottom:8px;color:#333}.card.uv-card .protection-section .dosage-breakdown .dosage-grid{display:grid;grid-template-columns:1fr;gap:6px}.card.uv-card .protection-section .dosage-breakdown .dosage-grid .dosage-item{display:flex;justify-content:space-between;font-size:11px;font-weight:700;color:#444;border-bottom:1px solid rgba(0,0,0,.05);padding-bottom:2px}.card.uv-card .protection-section .protection-info{display:flex;gap:30px;margin-top:auto}.card.uv-card .protection-section .protection-info .info-item{display:flex;flex-direction:column;align-items:center;text-align:center;font-size:12px;font-weight:700}.card.uv-card .protection-section .protection-info .info-item .info-icon{width:40px;height:40px;margin-bottom:5px}.card.uv-card .protection-section .protection-info .info-item .info-label{margin-top:5px;color:#444}@media(max-width:768px){.card.uv-card{grid-template-columns:1fr;text-align:center}.card.uv-card .uv-index-section{display:flex;flex-direction:column;align-items:center}.card.uv-card .uv-index-section .sun-times{display:flex;gap:20px;justify-content:center;width:100%}.card.uv-card .protection-section .warning,.card.uv-card .protection-section .protection-info{justify-content:center}}.card.recommendation-card{grid-column:1/-1}.card.recommendation-card .recommendation-title{font-size:22px;font-weight:800;margin-bottom:25px}.card.recommendation-card .recommendation-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}@media(max-width:480px){.card.recommendation-card .recommendation-list{grid-template-columns:1fr}}.card.recommendation-card .recommendation-list .rec-item{display:flex;align-items:flex-start;gap:15px;background-color:#fff6;padding:20px;border-radius:16px;transition:transform .2s}.card.recommendation-card .recommendation-list .rec-item:hover{transform:translateY(-2px);background-color:#fff9}.card.recommendation-card .recommendation-list .rec-item .rec-icon-box{width:60px;height:60px;background-color:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:32px;flex-shrink:0;box-shadow:0 4px 6px #0000000d}.card.recommendation-card .recommendation-list .rec-item .rec-text-content{display:flex;flex-direction:column;padding-top:4px}.card.recommendation-card .recommendation-list .rec-item .rec-text-content .rec-main-text{font-size:18px;font-weight:800;margin-bottom:6px;color:#111}.card.recommendation-card .recommendation-list .rec-item .rec-text-content .rec-desc-text{font-size:14px;color:#444;line-height:1.5;font-weight:500}.card .loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#ffffffb3;display:flex;justify-content:center;align-items:center;z-index:1000;flex-direction:column}.card .loading-overlay .loading-spinner{width:50px;height:50px;border:5px solid #f3f3f3;border-top:5px solid #3498db;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}.card .loading-overlay .loading-text{font-size:18px;font-weight:700;color:#333}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}