*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}:root{--bg:#0f1011;--card:#1b1d1e;--card-border:#ffffff12;--text-primary:#ffffffeb;--text-secondary:#ffffff73;--text-tertiary:#ffffff40;--accent:#ffffffb3}body{background:var(--bg);min-height:100vh;color:var(--text-primary);overflow-x:unset;font-family:Outfit,-apple-system,BlinkMacSystemFont,sans-serif;height:unset!important;width:unset!important}::-webkit-scrollbar{-webkit-appearance:none;z-index:1000000;width:7.5px;height:7.5px}::-webkit-scrollbar-thumb{background-color:#0000;border-radius:4px;-webkit-box-shadow:0 0 1px #ffffff80}::-webkit-scrollbar-track{background:0 0;border-top-right-radius:5px;border-bottom-right-radius:5px}::-webkit-scrollbar-thumb{background:#707070}::-webkit-scrollbar-thumb:hover{background:#a0a0a0}.settings-open,.settings-open>body,.settings-open #app{overflow:hidden!important}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-overlay{z-index:200;background:var(--bg);justify-content:center;align-items:center;transition:opacity .5s;display:flex;position:fixed;inset:0}.loading-inner{flex-direction:column;align-items:center;gap:16px;display:flex}.loading-spinner{border:2px solid var(--card-border);border-top-color:var(--text-secondary);border-radius:50%;width:36px;height:36px;animation:.8s linear infinite spin}.loading-text{letter-spacing:.12em;color:var(--text-secondary);font-size:11px;font-weight:600}.settings-overlay{z-index:99;opacity:0;pointer-events:none;background:#0009;transition:opacity .3s;position:fixed;inset:0}.settings-overlay.open{opacity:1;pointer-events:all}.app-settings-panel{border-left:1px solid var(--card-border);background:#181a1b;width:min(340px,92vw);transition:transform .35s cubic-bezier(.4,0,.2,1);position:fixed;top:0;bottom:0;right:0;overflow-y:auto;transform:translate(100%)}.app-settings-panel.open{z-index:101;transform:translate(0)}.settings-inner{padding:24px 20px;padding-top:max(env(safe-area-inset-top), 48px)}.settings-header{justify-content:space-between;align-items:center;margin-bottom:28px;display:flex}.settings-title{color:var(--text-primary);font-size:18px;font-weight:600}.settings-section{margin-bottom:28px}.section-label{letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:12px;font-size:10px;font-weight:700}.field-group{flex-direction:column;gap:10px;display:flex}.field{flex-direction:column;gap:4px;display:flex}.field-label{color:var(--text-secondary);font-size:11px}input[type=number],input[type=text]{background:var(--card);border:1px solid var(--card-border);color:var(--text-primary);appearance:none;border-radius:6px;outline:none;width:100%;padding:10px 12px;font-family:inherit;font-size:14px;transition:border-color .2s}input[type=number]:focus,input[type=text]:focus{border-color:#ffffff4d}input[type=number]::-webkit-inner-spin-button{appearance:none}input[type=number]::-webkit-outer-spin-button{appearance:none}.btn--primary{background:var(--text-primary);color:#0f1011;cursor:pointer;border:none;border-radius:6px;width:100%;padding:11px 16px;font-family:inherit;font-size:13px;font-weight:600;transition:opacity .2s}.btn--primary:hover{opacity:.85}.btn--secondary{background:var(--card);color:var(--text-primary);border:1px solid var(--card-border);cursor:pointer;border-radius:6px;width:100%;padding:11px 16px;font-family:inherit;font-size:13px;font-weight:500;transition:border-color .2s}.btn--secondary:hover{border-color:#fff3}.icon-btn{background:var(--card);border:1px solid var(--card-border);cursor:pointer;width:36px;height:36px;color:var(--text-secondary);border-radius:6px;justify-content:center;align-items:center;font-size:12px;transition:color .2s,border-color .2s;display:flex}.icon-btn:hover{color:var(--text-primary);border-color:#fff3}.icon-btn.spinning i{animation:.7s linear infinite spin}.burger-btn{flex-direction:column;gap:4px;width:40px;height:36px}.burger-line{background:var(--text-secondary);border-radius:1px;width:18px;height:2px;display:block}.burger-line.short{width:12px}#app{padding:0 16px;padding-top:max(env(safe-area-inset-top), 20px);margin:0 auto;padding-bottom:48px;animation:.5s forwards fadeInUp}#app>div,#app>section{max-width:440px;margin-left:auto;margin-right:auto}.app-header{border-bottom:1.75px solid var(--card-border);width:100%;max-width:472px;padding:max(env(safe-area-inset-top), 20px) 16px 12px;z-index:50;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:var(--surface);justify-content:space-between;align-items:center;display:flex;position:fixed;top:0;left:50%;transform:translate(-50%)}.location-name{color:var(--text-primary);font-size:20px;font-weight:600;line-height:1.2}.location-coords{color:var(--text-tertiary);letter-spacing:.04em;font-variant-numeric:tabular-nums;margin-top:2px;font-size:11px}.header-actions{align-items:center;gap:8px;margin-top:2px;display:flex}.hero-section{text-align:center;margin:100px 0 12px}.hero-icon{justify-content:center;margin-bottom:8px;display:flex}.hero-temp{letter-spacing:-4px;color:var(--text-primary);margin-bottom:6px;font-size:80px;font-weight:200;line-height:1}.hero-desc{color:var(--text-secondary);margin-bottom:4px;font-size:16px;font-weight:500}.hero-feels{color:var(--text-tertiary);font-size:13px}.hero-highlow{color:var(--text-tertiary);margin-top:2px;font-size:13px}.hero-time{color:var(--text-tertiary);letter-spacing:.04em;margin-top:8px;font-size:11px}.card{background:var(--card);border:1px solid var(--card-border);border-radius:24px}.hourly-card{margin-bottom:12px;padding:12px}.hourly-scroll{gap:4px;padding-bottom:12px;display:flex;overflow-x:auto}.hourly-item{border-radius:18px;flex-direction:column;flex-shrink:0;align-items:center;gap:6px;min-width:60px;padding:10px 12px;transition:background .2s;display:flex}.hourly-item.active{background:#ffffff14}.hourly-item:hover{background:#ffffff0d}.hourly-time{color:var(--text-secondary);font-size:11px;font-weight:600}.hourly-temp{color:var(--text-primary);font-size:13px;font-weight:500}.detail-grid{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px;display:grid}.detail-card{aspect-ratio:1;flex-direction:column;padding:14px;display:flex}.card-header{flex:1;gap:8px;margin-bottom:10px;font-size:11px;display:flex}.card-header i{transform:translateY(2px)}.card-icon{color:var(--text-secondary);flex-shrink:0}.sun-rise{color:#c8963c}.sun-set{color:#b05a32}.card-label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);font-size:11px;font-weight:700}.card-value{color:var(--text-primary);font-size:38px;font-weight:300;line-height:1.1}.card-value-sm{font-size:20px}.card-sub{color:var(--text-secondary);margin-top:3px;font-size:13px}.forecast-card{margin-bottom:8px;padding:16px}.forecast-row{border-bottom:1px solid var(--card-border);align-items:center;padding:12px 0;display:flex}.forecast-row:last-child{border-bottom:none;padding-bottom:0}.forecast-row:first-child{padding-top:0}.forecast-day{color:var(--text-primary);flex-shrink:0;width:36px;font-size:13px;font-weight:500}.forecast-icon{flex-shrink:0;width:28px;height:28px;margin:0 10px}.temp-bar-container{flex:1;align-items:center;gap:8px;display:flex}.temp-min{color:var(--text-secondary);text-align:right;flex-shrink:0;width:26px;font-size:12px}.temp-max{color:var(--text-primary);flex-shrink:0;width:26px;font-size:12px;font-weight:500}.temp-bar-track{background:#ffffff1a;border-radius:2px;flex:1;height:3px;overflow:hidden}.temp-bar-fill{background:#ffffff80;border-radius:2px;height:100%}.footer-text{text-align:center;color:var(--text-tertiary);letter-spacing:.04em;margin-top:24px;font-size:11px}.api-banner{background:#ffb43214;border:1px solid #ffb43233;border-radius:8px;align-items:center;gap:10px;margin-bottom:12px;padding:10px 14px;display:flex}.api-banner i{color:#c8963c;flex-shrink:0;font-size:13px}.api-banner span{color:var(--text-secondary);font-size:12px;line-height:1.4}.view-toggle{background:var(--card);border:1px solid var(--card-border);border-radius:8px;margin-right:8px;display:flex;overflow:hidden}.toggle-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;padding:8px 14px;font-family:inherit;font-size:12px;font-weight:600;transition:all .2s}.toggle-btn.active{background:var(--text-primary);color:#0f1011}.toggle-btn:not(.active):hover{color:var(--text-primary);background:#ffffff0d}.rain-status-container{text-align:center;margin:32px 0 24px;animation:.5s fadeInUp}.rain-status-icon{color:#3b82f6;margin-bottom:12px;font-size:48px}.rain-status-text{color:var(--text-primary);letter-spacing:-.3px;font-size:24px;font-weight:500;line-height:1.3}.rain-chart-card{margin-bottom:16px;padding:18px}.rain-chart-container{margin:16px 0 12px;position:relative}#precipChart{background:#0003;border-radius:12px;width:100%;height:auto;animation:2s ease-in-out infinite pulseBlue;display:block}@keyframes pulseBlue{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 8px #3b82f600}to{box-shadow:0 0 #3b82f600}}.rain-intensity-labels{color:var(--text-tertiary);justify-content:space-between;margin-top:8px;padding:0 8px;font-size:11px;display:flex}.rain-detail-card{padding:16px}.rain-legend{color:var(--text-secondary);justify-content:space-between;gap:12px;font-size:13px;display:flex}.rain-legend i{width:20px;color:var(--text-primary);margin-right:6px}@media (max-width:480px){.rain-status-text{font-size:20px}.toggle-btn{padding:6px 10px;font-size:11px}.rain-legend{flex-direction:column;gap:8px}}@media (max-width:360px){.hero-temp{font-size:68px}.card-value{font-size:22px}}