:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#2f303a80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}#social .button-icon{filter:invert()brightness(2)}}body{margin:0}#root{text-align:center;border-inline:1px solid var(--border);box-sizing:border-box;flex-direction:column;width:1126px;max-width:100%;min-height:100svh;margin:0 auto;display:flex}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}*{box-sizing:border-box}:root{color:#f8fafc;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0f172a;font-family:Tahoma,Arial,sans-serif}body{color:#f8fafc;background:radial-gradient(at 0 0,#1e40af66,#0000 45%),radial-gradient(at 100% 100%,#7c3aed55,#0000 45%),linear-gradient(135deg,#0f172a,#172554 55%,#1e1b4b);min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}.app{text-align:center;width:min(100% - 32px,650px);margin:0 auto;padding:48px 0 24px}.app h1{letter-spacing:-.5px;margin:0 0 10px;font-size:clamp(26px,5vw,36px)}.subtitle{color:#cbd5e1;margin:0 0 32px;font-size:16px}.city-search{gap:10px;width:100%;margin:0 auto 28px;display:flex}.city-search input{color:#fff;background:#ffffff12;border:1px solid #ffffff2b;border-radius:14px;outline:none;flex:1;min-width:0;padding:14px 16px;transition:border-color .2s,box-shadow .2s}.city-search input::placeholder{color:#cbd5e1aa}.city-search input:focus{border-color:#93c5fd;box-shadow:0 0 0 3px #60a5fa30}.city-search button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#3b82f6,#6366f1);border:none;border-radius:14px;padding:12px 20px;font-weight:700;transition:transform .2s,filter .2s,opacity .2s}.city-search button:hover:not(:disabled){filter:brightness(1.12);transform:translateY(-1px)}.city-search button:active:not(:disabled){transform:scale(.97)}.city-search button:disabled{cursor:wait;opacity:.6}.weather-card{isolation:isolate;background:radial-gradient(circle at 15% 10%,#ffffff30,#0000 35%),linear-gradient(145deg,#2563eb,#4f46e5 55%,#6d28d9);border:1px solid #ffffff40;border-radius:28px;padding:30px 22px 22px;transition:box-shadow .35s,border-color .35s,background .5s,transform .35s;animation:.45s ease-out card-appear;position:relative;overflow:hidden;box-shadow:0 24px 60px #00000035,0 0 25px #6366f155,inset 0 1px #ffffff35}.weather-card:before{content:"";z-index:-1;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,#0000 20%,#ffffff08 35%,#ffffff35 50%,#ffffff08 65%,#0000 80%) 100% 0/250% 100%;animation:7s ease-in-out infinite weather-light-move;position:absolute;inset:0}@keyframes weather-light-move{0%{background-position:100% 0}50%{background-position:0 0}to{background-position:100% 0}}@media (hover:hover){.weather-card:hover{border-color:#ffffff65;transform:translateY(-3px);box-shadow:0 30px 70px #00000040,0 0 20px #818cf855,0 0 40px #6366f133,inset 0 1px #ffffff45}.weather-card:hover:before{opacity:1}}.weather-card h2{margin:0;font-size:24px;font-weight:700}.weather-icon{filter:drop-shadow(0 8px 12px #00000020);margin-top:18px;font-size:72px;line-height:1.3}.temperature{letter-spacing:-2px;margin:8px 0;font-size:clamp(48px,10vw,64px);font-weight:700;line-height:1.2}.description{color:#ffffffdf;margin:8px 0 28px;font-size:18px}.weather-details{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.detail{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff16;border:1px solid #ffffff20;border-radius:16px;flex-direction:column;justify-content:center;gap:12px;min-width:0;padding:16px 8px;display:flex}.detail span{color:#ffffffdf;font-size:13px;line-height:1.7}.detail strong{overflow-wrap:anywhere;font-size:16px}.message,.error-message{border-radius:14px;padding:14px 16px;line-height:1.8}.message{color:#e2e8f0;background:#ffffff12;border:1px solid #ffffff20}.error-message{color:#fecaca;background:#7f1d1d55;border:1px solid #fca5a555}.error-message p{margin-top:0}.error-message button{color:#fff;cursor:pointer;background:#ffffff12;border:1px solid #fecaca66;border-radius:10px;padding:10px 16px}.error-message button:hover{background:#ffffff25}.footer{color:#94a3b8;margin-top:28px;font-size:12px}@keyframes card-appear{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (width<=480px){.app{width:min(100% - 24px,650px);padding-top:30px}.subtitle{margin-bottom:24px}.city-search{gap:8px}.city-search input{padding:12px 10px;font-size:14px}.city-search button{padding:12px;font-size:14px}.weather-card{border-radius:22px;padding:26px 14px 16px}.weather-details{grid-template-columns:1fr;gap:10px}.detail{text-align:right;flex-direction:row;justify-content:space-between;align-items:center;gap:12px;padding:14px}.detail span{font-size:13px}.detail strong{text-align:left}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.forecast-temperatures{white-space:nowrap;gap:10px;display:flex}@media (width<=480px){.forecast-day{grid-template-columns:1fr auto auto;gap:8px;padding:12px 10px}.forecast-description{display:none}.forecast-section h2{font-size:19px}}@media (width<=480px){.forecast-day{grid-template-columns:1fr auto auto;gap:8px;padding:12px 10px}.forecast-description{display:none}.forecast-section h2{font-size:19px}}.forecast-section{text-align:right;margin-top:32px}.forecast-section h2{margin-bottom:16px;font-size:22px}.forecast-list{gap:10px;display:grid}.forecast-day{background:#ffffff12;border:1px solid #ffffff20;border-radius:14px;grid-template-columns:1fr auto 1.5fr auto;align-items:center;gap:12px;padding:14px;display:grid}.forecast-date{font-weight:700}.forecast-icon{font-size:26px}.forecast-description{color:#cbd5e1;font-size:13px}.forecast-temperatures{white-space:nowrap;align-items:center;gap:10px;display:flex}.forecast-temperatures span{color:#cbd5e1}@media (width<=480px){.forecast-day{grid-template-columns:1fr auto auto;gap:8px;padding:12px 10px}.forecast-description{display:none}.forecast-section h2{font-size:19px}}.favorite-button{color:#ffffffa6;cursor:pointer;background:#ffffff2e;border:none;border-radius:50%;justify-content:center;align-items:center;width:42px;height:42px;font-size:29px;transition:transform .2s,color .2s,background .2s;display:flex;position:absolute;top:16px;right:16px}.favorite-button.is-favorite{color:#ffd54a}.favorite-button:hover{background:#ffffff4d;transform:scale(1.12)}.forecast-list button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#7c83fd,#a78bfa);border:1px solid #ffffff40;border-radius:25px;padding:10px 20px;font-size:15px;font-weight:600;transition:all .25s}.forecast-list button:hover{background:linear-gradient(135deg,#a78bfa,#c4b5fd);transform:translateY(-3px);box-shadow:0 5px 15px #7c83fd4d}.app{transition:background .5s}.app.default-weather{background:linear-gradient(135deg,#1e1b4b,#312e81)!important}.weather-card{transition:background .5s,box-shadow .5s}.weather-card.sunny{background:linear-gradient(135deg,#f59e0b,#b45309);box-shadow:0 12px 35px #f59e0b38}.weather-card.cloudy{background:linear-gradient(135deg,#64748b,#334155);box-shadow:0 12px 35px #64748b38}.weather-card.rainy{background:linear-gradient(135deg,#2563eb,#172554);box-shadow:0 12px 35px #2563eb40}.weather-card.snowy{background:linear-gradient(135deg,#647fbd,#334155);box-shadow:0 12px 35px #93c5fd33}.weather-card.stormy{background:linear-gradient(135deg,#4c1d95,#1e1b4b);box-shadow:0 12px 35px #4c1d954d}.weather-card.default-weather{background:linear-gradient(135deg,#4338ca,#1e1b4b)}.app{isolation:isolate;position:relative;background:0 0!important}.app:before{content:"";z-index:-1;pointer-events:none;background:linear-gradient(135deg,#1e1b4b,#312e81);transition:background .6s;position:fixed;inset:0}.app.sunny:before{background:linear-gradient(135deg,#f6bd60,#f7ede2)}.app.cloudy:before{background:linear-gradient(135deg,#64748b,#cbd5e1)}.app.rainy:before{background:linear-gradient(135deg,#1e3a5f,#526d82)}.app.snowy:before{background:linear-gradient(135deg,#dbeafe,#93c5fd)}.app.stormy:before{background:linear-gradient(135deg,#312e81,#475569)}.app.default-weather:before{background:linear-gradient(135deg,#1e1b4b,#312e81)}.theme-toggle{color:#fff;cursor:pointer;background:#6366f1;border:1px solid #ffffff40;border-radius:25px;margin:15px auto 22px;padding:10px 20px;font-size:15px;transition:background .3s,transform .3s;display:block}.app.day-mode:before{background:linear-gradient(135deg,#dbeafe,#fef3c7)}.app.night-mode:before{background:linear-gradient(135deg,#0f172a,#312e81)}.app.day-mode{color:#172033}.app.day-mode .subtitle,.app.day-mode .footer{color:#334155}.theme-toggle{color:#fff;cursor:pointer;background:#6366f1;border:1px solid #ffffff40;border-radius:25px;margin:15px auto 22px;padding:10px 20px;font-size:15px;display:block}.app.sunny.day-mode:before{background:linear-gradient(135deg,#f6bd60,#f7ede2)}.app.cloudy.day-mode:before{background:linear-gradient(135deg,#e2e8f0,#94a3b8)}.app.rainy.day-mode:before{background:linear-gradient(135deg,#93c5fd,#dbeafe)}.app.snowy.day-mode:before{background:linear-gradient(135deg,#eff6ff,#93c5fd)}.app.stormy.day-mode:before{background:linear-gradient(135deg,#c4b5fd,#94a3b8)}.app.default-weather.day-mode:before{background:linear-gradient(135deg,#dbeafe,#fef3c7)}.app.sunny.night-mode:before{background:linear-gradient(135deg,#78350f,#1e1b4b)}.app.cloudy.night-mode:before{background:linear-gradient(135deg,#334155,#0f172a)}.app.rainy.night-mode:before{background:linear-gradient(135deg,#1e3a5f,#0f172a)}.app.snowy.night-mode:before{background:linear-gradient(135deg,#334155,#172554)}.app.stormy.night-mode:before{background:linear-gradient(135deg,#312e81,#0f172a)}.app.default-weather.night-mode:before{background:linear-gradient(135deg,#0f172a,#312e81)}.theme-toggle{z-index:9999;color:#fff;cursor:pointer;background:#6366f1;border:1px solid #ffffff4d;border-radius:25px;justify-content:center;align-items:center;margin:0;padding:11px 18px;font-size:14px;font-weight:600;transition:background .3s,transform .3s;display:inline-flex;top:18px;right:18px;box-shadow:0 4px 14px #0003;position:fixed!important}.theme-toggle:hover{background:#818cf8;transform:translateY(-2px)}@media (width<=480px){.theme-toggle{padding:8px 12px;font-size:12px;top:10px;right:10px}}.favorite-city-item{align-items:center;gap:8px;display:flex}.favorite-city-name{cursor:pointer;flex:1}.favorite-city-remove{color:#fff;cursor:pointer;background:#dc2626;border:none;border-radius:10px;padding:10px 14px;font-size:16px;transition:background .2s}.favorite-city-remove:hover{background:#991b1b}.success-message{color:#22c55e;text-align:center;text-align:center;background:#22c55e26;border-radius:12px;max-width:420px;margin:12px auto;padding:10px 16px;font-weight:600;animation:.35s ease-out message-appear}@keyframes message-appear{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.unit-toggle-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#6366f1,#7c3aed);border:1px solid #ffffff4d;border-radius:25px;justify-content:center;align-items:center;gap:6px;margin:10px auto 16px;padding:9px 18px;font-size:14px;font-weight:600;transition:background .3s,transform .2s,box-shadow .3s;display:inline-flex;box-shadow:0 4px 14px #00000026}@media (width<=480px){.unit-toggle-button{padding:8px 15px;font-size:13px}}.weather-card{position:relative}.unit-toggle-button{z-index:5;color:#fff;cursor:pointer;background:linear-gradient(135deg,#6366f1,#7c3aed);border:1px solid #ffffff4d;border-radius:25px;justify-content:center;align-items:center;margin:0;padding:9px 14px;font-size:14px;font-weight:600;transition:background .3s,transform .2s,box-shadow .3s;display:inline-flex;position:absolute;top:16px;left:16px;box-shadow:0 4px 14px #00000026}.unit-toggle-button:hover{background:linear-gradient(135deg,#818cf8,#a78bfa);transform:translateY(-2px);box-shadow:0 6px 16px #7c3aed40}.unit-toggle-button:active{transform:scale(.97)}.unit-toggle-button:focus-visible{outline-offset:3px;outline:2px solid #fff}@media (width<=480px){.unit-toggle-button{padding:8px 11px;font-size:12px;top:12px;left:12px}}.local-clock{box-sizing:border-box;color:#fff;text-align:center;-webkit-backdrop-filter:blur(14px);direction:rtl;background:linear-gradient(135deg,#82beff47,#6464dc1f);border:1px solid #ffffff59;border-radius:20px;justify-content:center;align-items:center;gap:10px;width:100%;margin:16px auto 22px;padding:18px 24px;font-size:1.05rem;font-weight:700;transition:transform .3s,box-shadow .3s;display:flex;position:relative;transform:perspective(800px)rotateX(5deg);box-shadow:0 12px #1e32642e,0 20px 30px #00000038,inset 0 1px 2px #ffffff59}.local-clock{isolation:isolate;overflow:hidden;box-shadow:0 5px #4664a038,0 14px 25px #00000038,0 25px 40px #0000001f,inset 0 2px 2px #ffffff59}.local-clock:before{content:"";pointer-events:none;z-index:-1;background:linear-gradient(90deg,#0000,#ffffff38,#0000);width:45%;height:200%;animation:5s ease-in-out infinite clockShine;position:absolute;top:-50%;left:-75%;transform:rotate(25deg)}.local-clock:hover{transform:perspective(800px)rotateX(0)translateY(-7px)scale(1.02);box-shadow:0 4px #4664a033,0 24px 35px #00000040,0 0 28px #82beff40,inset 0 2px 3px #fff6}@keyframes clockShine{0%,15%{left:-75%}65%,to{left:135%}}.local-clock{letter-spacing:.5px;font-family:Segoe UI,Tahoma,Arial,sans-serif;font-size:.95rem;font-weight:500;line-height:1.8}.local-clock time{font-variant-numeric:tabular-nums;letter-spacing:1px;direction:ltr;unicode-bidi:isolate;font-size:1.15rem;font-weight:700;display:inline-block}.local-clock:hover{transform:perspective(800px)rotateX(0)translateY(-4px)}.local-clock{box-sizing:border-box;gap:14px;min-width:220px;max-width:100%;padding:16px 22px}.local-clock span{opacity:.85;letter-spacing:0;font-size:.85rem;font-weight:500}.local-clock time{letter-spacing:1.5px;text-shadow:0 2px 8px #00000026;font-size:clamp(1.15rem,3vw,1.45rem);font-weight:700}@media (width<=480px){.local-clock{flex-wrap:wrap;gap:8px;padding:13px 15px}}.local-clock-info{flex-direction:column;align-items:center;gap:8px;display:flex}.local-date{opacity:.85;margin-top:4px;font-size:.8rem}.weather-details .weather-detail{isolation:isolate;-webkit-backdrop-filter:blur(14px);background:linear-gradient(145deg,#ffffff38,#ffffff12);border:1px solid #ffffff47;border-radius:18px;padding:16px 18px;transition:transform .3s,box-shadow .3s,border-color .3s;position:relative;overflow:hidden;transform:perspective(700px)translateY(0);box-shadow:0 8px #00000014,0 13px 24px #00000026,inset 0 1px 1px #ffffff4d}.weather-details .weather-detail:before{content:"";z-index:-1;background:linear-gradient(110deg,#0000,#fff3,#0000);width:70%;height:100%;transition:left .6s;position:absolute;top:0;left:-120%;transform:skew(-20deg)}.weather-details .weather-detail:hover{border-color:#ffffff80;transform:perspective(700px)translateY(-5px)rotateX(3deg);box-shadow:0 12px #0000000f,0 20px 30px #0003,inset 0 1px 2px #fff6}.weather-details .weather-detail:hover:before{left:140%}.weather-details .weather-detail strong{letter-spacing:1px;text-shadow:0 2px 8px #0000001f;margin-top:8px;font-size:1.2rem;font-weight:800;display:inline-block}@media (width<=480px){.weather-details .weather-detail{border-radius:14px;padding:12px}.weather-details .weather-detail strong{font-size:1.05rem}}.weather-card>.weather-detail{isolation:isolate;box-sizing:border-box;-webkit-backdrop-filter:blur(14px);background:linear-gradient(145deg,#ffffff3d,#ffffff12);border:1px solid #ffffff4d;border-radius:18px;flex-direction:column;align-items:center;gap:8px;width:min(100%,320px);margin:12px auto;padding:16px 20px;transition:transform .3s,box-shadow .3s,border-color .3s;display:flex;position:relative;overflow:hidden;box-shadow:0 7px #00000014,0 14px 24px #00000029,inset 0 1px 1px #ffffff59}.weather-card>.weather-detail:hover{border-color:#ffffff8c;transform:perspective(700px)translateY(-5px)rotateX(3deg);box-shadow:0 10px #0000000f,0 20px 30px #0003,inset 0 1px 2px #fff6}.weather-card>.weather-detail span{font-size:.95rem}.weather-card>.weather-detail strong{letter-spacing:1px;text-shadow:0 2px 8px #0000001f;font-size:1.25rem;font-weight:800}@media (prefers-reduced-motion:reduce){.weather-card>.weather-detail{transition:none}.weather-card>.weather-detail:hover{transform:none}}.weather-card{flex-direction:column;align-items:center;display:flex}.weather-card>.weather-detail{width:calc(50% - 8px);max-width:220px;margin:12px 4px}.weather-card>.weather-detail:first-of-type,.weather-card>.weather-detail:nth-of-type(2){align-self:auto}@media (width>=400px){.weather-card{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.weather-card>h2,.weather-card>.local-clock,.weather-card>.favorite-button,.weather-card>.weather-icon,.weather-card>.temperature,.weather-card>.unit-toggle-button,.weather-card>.description,.weather-card>.weather-details{grid-column:1/-1}.weather-card>.weather-detail{width:100%;max-width:none;margin:0}}.temperature-chart{background:#ffffff14;border:1px solid #ffffff2e;border-radius:18px;justify-content:space-around;align-items:flex-end;gap:12px;margin-top:20px;padding:24px 12px;display:flex;overflow-x:auto}.chart-max{color:#ffca72;font-weight:800}.chart-min{opacity:.85;font-size:.9rem}.chart-date{white-space:nowrap;font-size:.8rem}.temperature-chart{background:#ffffff14;border:1px solid #ffffff24;border-radius:20px;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:12px;padding:24px 16px;display:flex;overflow-x:auto;box-shadow:0 8px 24px #0000001f}.chart-day{flex-direction:column;flex:1;justify-content:flex-end;align-items:center;gap:10px;min-width:48px;display:flex}.chart-bars{justify-content:center;align-items:flex-end;gap:5px;height:110px;display:flex}.chart-bar{border-radius:8px 8px 4px 4px;width:17px;min-height:10px;max-height:100px;transition:height .3s,opacity .3s}.chart-bar-max{background:linear-gradient(#ffd166,#ff7043);box-shadow:0 3px 10px #ff8c4233}.chart-bar-min{background:linear-gradient(#4cc9f0,#1677ff);box-shadow:0 3px 10px #1677ff33}.chart-max{color:#ffca72;font-size:.9rem;font-weight:800}.chart-min{color:#79c9ff;font-size:.85rem;font-weight:600}.chart-date{white-space:nowrap;opacity:.9;font-size:.8rem}.legend-max{background:#ff9b45}.legend-min{background:#2699ff}.chart-legend{flex-wrap:wrap;width:100%;margin:18px auto 22px;direction:rtl!important;flex-direction:row!important;justify-content:center!important;align-items:center!important;gap:24px!important;display:flex!important}.chart-legend .legend-item{white-space:nowrap;font-size:.95rem;flex-direction:row!important;justify-content:center!important;align-items:center!important;gap:8px!important;display:inline-flex!important}.chart-legend .legend-color{border-radius:50%!important;flex:0 0 12px!important;width:12px!important;height:12px!important;display:inline-block!important}.chart-legend .legend-max{background-color:#ff9b45!important}.chart-legend .legend-min{background-color:#2699ff!important}.chart-legend .legend-item:first-child span:last-child{color:#ffb45e!important}.chart-legend .legend-item:last-child span:last-child{color:#65c5ff!important}