@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";:root{--bg-gradient:linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #fb923c 100%);--card-bg:#ffffff1f;--card-border:#fff3;--card-glow:#ffffff0d;--text-main:#fff;--text-sub:#ffffffbf;--accent-color:#fbbf24;--accent-light:#fbbf2433;--shadow:#00000026 0 8px 32px 0;--font-sans:"Outfit", system-ui, -apple-system, sans-serif;transition:all .5s ease-in-out}.theme-sunny{--bg-gradient:linear-gradient(135deg, #0284c7 0%, #38bdf8 50%, #f59e0b 100%);--card-bg:#ffffff1f;--card-border:#ffffff38;--card-glow:#fde0471a;--text-main:#fff;--text-sub:#ffffffbf;--accent-color:#f59e0b;--accent-light:#f59e0b33;--shadow:#0f172a26 0 12px 30px}.theme-night{--bg-gradient:linear-gradient(135deg, #020617 0%, #0f172a 60%, #1e1b4b 100%);--card-bg:#1e293b73;--card-border:#ffffff12;--card-glow:#6366f10d;--text-main:#f8fafc;--text-sub:#94a3b8;--accent-color:#818cf8;--accent-light:#818cf826;--shadow:#00000080 0 12px 30px}.theme-cloudy{--bg-gradient:linear-gradient(135deg, #1f2937 0%, #374151 50%, #6b7280 100%);--card-bg:#ffffff0f;--card-border:#ffffff1a;--card-glow:#ffffff05;--text-main:#f9fafb;--text-sub:#d1d5db;--accent-color:#9ca3af;--accent-light:#9ca3af26;--shadow:#00000040 0 12px 30px}.theme-rainy{--bg-gradient:linear-gradient(135deg, #0b1329 0%, #1e293b 50%, #334155 100%);--card-bg:#0f172a80;--card-border:#3b82f61f;--card-glow:#3b82f614;--text-main:#f8fafc;--text-sub:#94a3b8;--accent-color:#60a5fa;--accent-light:#60a5fa26;--shadow:#00000059 0 12px 30px}.theme-snowy{--bg-gradient:linear-gradient(135deg, #091e3a 0%, #1e3a5f 50%, #93c5fd 100%);--card-bg:#ffffff14;--card-border:#ffffff26;--card-glow:#93c5fd14;--text-main:#f8fafc;--text-sub:#cbd5e1;--accent-color:#93c5fd;--accent-light:#93c5fd33;--shadow:#0003 0 12px 30px}.theme-stormy{--bg-gradient:linear-gradient(135deg, #0c071a 0%, #1e1b4b 60%, #4c1d95 100%);--card-bg:#180f2e8c;--card-border:#a855f726;--card-glow:#a855f714;--text-main:#faf5ff;--text-sub:#c084fc;--accent-color:#d8b4fe;--accent-light:#d8b4fe26;--shadow:#00000073 0 12px 30px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{font-family:var(--font-sans);color:var(--text-main);background:var(--bg-gradient);background-attachment:fixed;justify-content:center;align-items:flex-start;min-height:100vh;display:flex;overflow-x:hidden}#root{background:0 0;flex-direction:column;width:100%;max-width:540px;min-height:100vh;padding:16px 16px 40px;display:flex;position:relative}@supports (padding-top:env(safe-area-inset-top)){#root{padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:calc(40px + env(safe-area-inset-bottom))}}.glass-card{background:var(--card-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--card-border);box-shadow:var(--shadow);border-radius:24px;margin-bottom:16px;padding:20px;position:relative;overflow:hidden}.glass-card:before{content:"";background:linear-gradient(180deg, var(--card-glow) 0%, transparent 100%);pointer-events:none;height:50%;position:absolute;top:0;left:0;right:0}.search-container{z-index:50;margin-bottom:20px;position:relative}.search-bar{background:var(--card-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--card-border);box-shadow:var(--shadow);border-radius:20px;align-items:center;gap:12px;padding:8px 16px;transition:border-color .3s;display:flex}.search-bar:focus-within{border-color:var(--accent-color)}.search-bar input{color:var(--text-main);font-family:var(--font-sans);background:0 0;border:none;outline:none;flex:1;padding:8px 0;font-size:16px;font-weight:400}.search-bar input::placeholder,.search-icon{color:var(--text-sub)}.search-results{-webkit-backdrop-filter:blur(24px);z-index:100;background:#0f172af2;border:1px solid #ffffff1a;border-radius:16px;max-height:280px;margin-top:8px;position:absolute;top:100%;left:0;right:0;overflow-y:auto;box-shadow:0 10px 25px #0006}.search-result-item{cursor:pointer;border-bottom:1px solid #ffffff0d;justify-content:space-between;align-items:center;padding:14px 18px;transition:background .2s;display:flex}.search-result-item:hover{background:#ffffff14}.search-result-item:last-child{border-bottom:none}.search-result-name{color:#fff;font-weight:500}.search-result-sub{color:#94a3b8;margin-top:2px;font-size:13px}.header-actions{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.favorites-pills{scrollbar-width:none;flex:1;gap:8px;padding-bottom:4px;display:flex;overflow-x:auto}.favorites-pills::-webkit-scrollbar{display:none}.favorite-pill{background:var(--card-bg);border:1px solid var(--card-border);color:var(--text-main);cursor:pointer;white-space:nowrap;border-radius:100px;align-items:center;gap:6px;padding:6px 12px;font-size:13px;font-weight:500;transition:all .2s;display:flex}.favorite-pill:hover,.favorite-pill.active{background:var(--text-main);color:#0f172a}.favorite-pill-add{border:1px dashed var(--card-border);background:0 0}.favorite-pill-add:hover{background:var(--card-bg);color:var(--text-main)}.btn-icon{background:var(--card-bg);border:1px solid var(--card-border);width:38px;height:38px;color:var(--text-main);cursor:pointer;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin-left:8px;transition:all .2s;display:flex}.btn-icon:hover{background:#fff3;transform:scale(1.05)}.btn-icon:active{transform:scale(.95)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spinning{animation:.8s linear infinite spin}.hero-weather{text-align:center;padding:16px 0 8px}.hero-city{letter-spacing:-.5px;justify-content:center;align-items:center;gap:8px;font-size:28px;font-weight:700;display:flex}.hero-date{color:var(--text-sub);margin-top:4px;font-size:14px;font-weight:400}.hero-main-row{justify-content:center;align-items:center;gap:16px;margin:16px 0;display:flex}.hero-temp-container{position:relative}.hero-temp{letter-spacing:-2px;font-size:72px;font-weight:700;line-height:1}.hero-temp-unit{color:var(--accent-color);font-size:32px;font-weight:400;position:absolute;top:4px;right:-24px}.hero-icon-container{color:var(--text-main);filter:drop-shadow(0 8px 16px #00000026);justify-content:center;align-items:center;font-size:64px;display:flex}.hero-condition{color:var(--text-main);font-size:18px;font-weight:600}.hero-range{color:var(--text-sub);margin-top:6px;font-size:14px}.metrics-grid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.metric-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:18px;align-items:center;gap:14px;padding:16px;display:flex}.metric-icon{background:var(--accent-light);color:var(--accent-color);border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;padding:10px;display:flex}.metric-info{flex-direction:column;display:flex}.metric-label{color:var(--text-sub);font-size:12px;font-weight:400}.metric-value{color:var(--text-main);margin-top:2px;font-size:16px;font-weight:600}.section-title{color:var(--text-main);align-items:center;gap:8px;margin-bottom:14px;font-size:16px;font-weight:600;display:flex}.hourly-scroll{scrollbar-width:thin;scrollbar-color:var(--card-border) transparent;gap:14px;padding-bottom:10px;display:flex;overflow-x:auto}.hourly-scroll::-webkit-scrollbar{height:4px}.hourly-scroll::-webkit-scrollbar-thumb{background:var(--card-border);border-radius:4px}.hourly-item{background:#ffffff08;border:1px solid #0000;border-radius:14px;flex-direction:column;align-items:center;min-width:60px;padding:12px 8px;transition:all .2s;display:flex}.hourly-item.active{background:var(--card-bg);border-color:var(--card-border)}.hourly-time{color:var(--text-sub);font-size:13px;font-weight:500}.hourly-icon{color:var(--text-main);margin:8px 0}.hourly-temp{font-size:15px;font-weight:600}.hourly-rain{color:#60a5fa;align-items:center;gap:2px;margin-top:4px;font-size:10px;font-weight:500;display:flex}.chart-container{background:#0000000d;border-radius:16px;margin:16px 0 8px;padding:10px 4px;position:relative}.chart-svg{width:100%;height:80px;overflow:visible}.chart-temp-text{fill:var(--text-main);text-anchor:middle;font-size:11px;font-weight:600}.chart-line{fill:none;stroke:var(--accent-color);stroke-width:3px;stroke-linecap:round}.chart-area{fill:url(#chartGrad);opacity:.15}.chart-point{fill:var(--accent-color);stroke:var(--text-main);stroke-width:2px;cursor:pointer;transition:r .2s}.chart-point:hover{r:6}.daily-list{flex-direction:column;gap:12px;display:flex}.daily-row{justify-content:space-between;align-items:center;padding:4px 0;display:flex}.daily-day{width:80px;font-size:14px;font-weight:500}.daily-rain-prob{color:#60a5fa;align-items:center;gap:4px;width:45px;font-size:12px;font-weight:500;display:flex}.daily-icon-col{justify-content:center;width:36px;display:flex}.daily-temp-bar-col{flex:1;align-items:center;gap:8px;margin:0 12px;display:flex}.daily-temp-bar-bg{background:#ffffff1a;border-radius:3px;flex:1;height:6px;position:relative}.daily-temp-bar-fill{background:linear-gradient(90deg, #60a5fa 0%, var(--accent-color) 100%);border-radius:3px;height:100%;position:absolute}.daily-temp-min,.daily-temp-max{width:28px;font-size:14px;font-weight:500}.daily-temp-min{text-align:right;color:var(--text-sub)}.daily-temp-max{text-align:left}.toast{-webkit-backdrop-filter:blur(16px);color:#fff;z-index:1000;white-space:nowrap;background:#0f172ad9;border:1px solid #ffffff1a;border-radius:100px;align-items:center;gap:8px;padding:12px 24px;font-size:14px;font-weight:500;transition:transform .4s cubic-bezier(.175,.885,.32,1.275);display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%)translateY(100px);box-shadow:0 10px 25px #0000004d}.toast.show{transform:translate(-50%)translateY(0)}.offline-banner{color:#fca5a5;background:#ef444433;border:1px solid #ef444466;border-radius:16px;align-items:center;gap:10px;margin-bottom:16px;padding:10px 14px;font-size:13px;font-weight:500;display:flex}.install-banner{background:linear-gradient(135deg,#ffffff26 0%,#ffffff0d 100%);border:1px solid #fff3;border-radius:20px;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;padding:16px;display:flex}.install-banner-text h4{margin-bottom:2px;font-size:15px;font-weight:600}.install-banner-text p{color:var(--text-sub);font-size:12px}.install-btn{color:#0f172a;cursor:pointer;background:#fff;border:none;border-radius:12px;padding:8px 16px;font-size:13px;font-weight:600;transition:all .2s}.install-btn:hover{transform:scale(1.03)}.shimmer{background:linear-gradient(90deg,#ffffff0d 25%,#ffffff1f 50%,#ffffff0d 75%) 0 0/200% 100%;border-radius:4px;animation:1.5s infinite loadingShimmer}@keyframes loadingShimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.shimmer-text{height:16px;margin-bottom:8px}