:root{--max-width:1200px;--border-radius:16px;--card-border-radius:24px;--font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;--foreground-rgb:20,20,20;--background-rgb:245,245,247;--card-background:255,255,255;--primary-gradient:linear-gradient(135deg,#0a84ff,#5e5ce6);--secondary-gradient:linear-gradient(135deg,#5e5ce6,#bf5af2);--success-gradient:linear-gradient(135deg,#30d158,#34c759);--warning-gradient:linear-gradient(135deg,#ff9f0a,#fc0);--danger-gradient:linear-gradient(135deg,#ff453a,#ff3b30);--primary-color:#0a84ff;--primary-dark:#0062cc;--secondary-color:#5e5ce6;--primary-rgb:10,132,255;--shadow-sm:0 2px 8px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.1);--shadow-md:0 8px 16px rgba(0,0,0,.08),0 4px 8px rgba(0,0,0,.06);--shadow-lg:0 20px 30px rgba(0,0,0,.1),0 10px 15px rgba(0,0,0,.07);--card-border:1px solid hsla(0,0%,100%,.15);--card-backdrop:blur(12px);--spacing-xs:6px;--spacing-sm:12px;--spacing-md:20px;--spacing-lg:28px;--spacing-xl:36px;--custom-background:#f5f5f7;--custom-title-bar:#0a84ff;--custom-subtitle:#666;--custom-bg-transparency:85%;--custom-title-transparency:90%;--accent-color:#0a84ff;--background-color:var(--custom-background,#f5f5f7);--title-bar-color:var(--custom-title-bar,#0a84ff);--subtitle-color:var(--custom-subtitle,#666);--bg-transparency:var(--custom-bg-transparency,85%);--title-transparency:var(--custom-title-transparency,90%);--text-primary:#000;--text-secondary:#666;--divider-color:#e1e1e1;--toggle-bg:#e9e9e9;--card-bg:hsla(0,0%,100%,.8);--aqi-good-color:#00e400;--aqi-moderate-color:#ff0;--aqi-unhealthy-sensitive-color:#ff7e00;--aqi-unhealthy-color:red;--aqi-very-unhealthy-color:#8f3f97;--aqi-hazardous-color:#7e0023}.dark-mode{--foreground-rgb:245,245,247;--background-rgb:20,20,20;--card-background:38,38,40;--card-border:1px solid hsla(0,0%,100%,.08);--shadow-sm:0 2px 8px rgba(0,0,0,.2),0 1px 4px rgba(0,0,0,.3);--shadow-md:0 8px 16px rgba(0,0,0,.2),0 4px 12px rgba(0,0,0,.25);--shadow-lg:0 20px 30px rgba(0,0,0,.25),0 10px 20px rgba(0,0,0,.2);--text-primary:#fff;--text-secondary:#a0a0a0;--divider-color:#393939;--toggle-bg:#333;--card-bg:rgba(35,35,35,.8)}.dark-mode .navBar{background-color:rgba(38,38,40,.9);border-top:1px solid #2d3748}.dark-mode .header{background-color:rgba(38,38,40,.9);border-bottom:1px solid #2d3748}.dark-mode input,.dark-mode select{background-color:rgba(55,65,81,.8);border-color:#4b5563;color:rgb(var(--foreground-rgb))}.dark-mode .alert,.dark-mode .aqiCard,.dark-mode .card,.dark-mode .moreMenu,.dark-mode .noAlerts,.dark-mode .section,.dark-mode .settingSection,.dark-mode .sunCard,.dark-mode .surfCard,.dark-mode .tideCard,.dark-mode .weatherCard{background-color:rgba(55,65,81,.8)}.dark-mode .pollutantCard,.dark-mode .tideTime,.dark-mode .twilightBlock{background-color:rgba(75,85,99,.5)}*{box-sizing:border-box;padding:0;margin:0}body,html{max-width:100vw;overflow-x:hidden;font-family:var(--font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{color:var(--text-primary);background-color:var(--background-color);padding-bottom:90px;line-height:1.6}a{color:var(--primary-color);text-decoration:none;transition:color .2s ease}a:hover{color:var(--primary-dark)}button{font-family:var(--font-family);font-weight:600;cursor:pointer;border:none;background:var(--primary-color);color:#fff;padding:var(--spacing-sm) var(--spacing-md);border-radius:12px;transition:all .2s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 8px rgba(10,132,255,.3)}button:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(10,132,255,.4);background:var(--primary-dark)}button:active{transform:translateY(1px);box-shadow:0 1px 3px rgba(10,132,255,.2)}input,select{font-family:var(--font-family);border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:var(--spacing-md) var(--spacing-md);font-size:16px;transition:all .2s ease;background:rgb(var(--card-background));box-shadow:inset 0 2px 4px rgba(0,0,0,.02)}input:focus,select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(10,132,255,.15),inset 0 2px 4px rgba(0,0,0,.02)}.loader{border:3px solid rgba(0,0,0,.1);border-radius:50%;border-top:3px solid var(--primary-color);width:24px;height:24px;animation:spin 1s linear infinite;margin:0 auto}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.card{background-color:rgba(var(--card-background),.8);backdrop-filter:var(--card-backdrop);-webkit-backdrop-filter:var(--card-backdrop);border-radius:var(--card-border-radius);box-shadow:var(--shadow-md);border:var(--card-border);padding:var(--spacing-md);transition:all .3s cubic-bezier(.25,.46,.45,.94);overflow:hidden;position:relative}.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-gap:var(--spacing-md);gap:var(--spacing-md);margin-bottom:var(--spacing-xl)}.widgetCard{height:180px;display:flex;flex-direction:column;position:relative;overflow:hidden;cursor:pointer}.widgetCard .cardIcon{font-size:26px;margin-bottom:var(--spacing-xs)}.widgetCard h2{font-size:18px;font-weight:700;margin-bottom:var(--spacing-xs)}.widgetCard p{font-size:14px;color:rgba(var(--foreground-rgb),.8);line-height:1.4}.widgetPreview{margin-top:auto;padding-top:var(--spacing-sm);font-size:14px}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,59,48,.4)}70%{box-shadow:0 0 0 10px rgba(255,59,48,0)}to{box-shadow:0 0 0 0 rgba(255,59,48,0)}}.urgentWidget{animation:pulse 2s infinite}.header{background-color:rgba(var(--custom-title-bar),var(--custom-title-transparency));border-bottom:1px solid rgba(0,0,0,.05);position:-webkit-sticky;position:sticky;top:0}.header,.navBar{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:var(--spacing-sm) var(--spacing-md);z-index:100}.navBar{background-color:rgba(var(--card-background),.85);border-top:1px solid rgba(0,0,0,.05);border-radius:24px 24px 0 0;box-shadow:0 -5px 20px rgba(0,0,0,.08);padding-bottom:max(var(--spacing-sm),env(safe-area-inset-bottom));position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around}.navItem{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:rgba(var(--foreground-rgb),.6);font-size:12px;padding:var(--spacing-xs);border-radius:12px;transition:all .2s ease}.navItem.active{color:var(--primary-color);background:rgba(var(--foreground-rgb),.05)}.navIcon{font-size:22px;margin-bottom:4px}.segmentedControl{background:rgba(var(--foreground-rgb),.06);border-radius:12px;padding:4px;display:flex}.segmentedControl button{background:transparent;color:rgba(var(--foreground-rgb),.7);box-shadow:none;border-radius:10px;font-weight:500;font-size:14px}.segmentedControl button.active{background:rgb(var(--card-background));color:var(--primary-color);box-shadow:var(--shadow-sm)}.moreMenu{background-color:rgba(var(--card-background),.98);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border-radius:24px;box-shadow:var(--shadow-lg);width:85%;max-width:360px;max-height:80vh;overflow-y:auto;padding:var(--spacing-md)}.weatherWidget{display:flex;justify-content:space-between;align-items:center}.weatherTemp{font-size:28px;font-weight:600}.weatherCondition{font-size:14px;color:rgba(var(--foreground-rgb),.7)}.alertWidget{background:linear-gradient(135deg,rgba(255,59,48,.1),rgba(255,45,85,.2));border-left:3px solid var(--danger-red)}.alertWidget .alertCount{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);background:var(--danger-red);color:#fff;border-radius:12px;padding:2px 8px;font-size:12px;font-weight:600}.earthquakeWidget .lastQuake{display:flex;align-items:baseline}.earthquakeWidget .magnitude{font-size:20px;font-weight:700;margin-right:var(--spacing-xs)}.earthquakeWidget .location{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sectionTitle{margin:var(--spacing-lg) 0 var(--spacing-sm) 0;font-size:20px;font-weight:700;padding-bottom:var(--spacing-xs);color:rgb(var(--foreground-rgb));letter-spacing:-.5px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.main{animation:fadeIn .3s ease-out}.hero{background:var(--primary-gradient);margin:-20px -20px 20px;padding:var(--spacing-xl) var(--spacing-md);border-radius:0 0 30px 30px;color:#fff;text-align:center;box-shadow:0 4px 20px rgba(10,132,255,.3)}.hero h2{font-size:24px;font-weight:800;margin-bottom:var(--spacing-xs);letter-spacing:-.5px}.hero p{font-size:16px;opacity:.9}