@import"https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{height:100vh;overflow:hidden;background:#293036}.day-mode{--text-primary: rgba(15, 20, 40, .95);--text-secondary: rgba(15, 20, 40, .55);--glass-bg: rgba(255, 255, 255, .18);--glass-border: rgba(255, 255, 255, .5)}.night-mode{--text-primary: rgba(240, 245, 255, .97);--text-secondary: rgba(200, 215, 255, .6);--glass-bg: rgba(10, 15, 40, .38);--glass-border: rgba(255, 255, 255, .12)}.app-container{width:100%;max-width:460px;margin:0 auto;padding:18px 16px;display:flex;flex-direction:column;align-items:center;gap:16px;font-family:DM Sans,sans-serif;animation:fadeUp .6s ease both;cursor:pointer}.search-wrapper{width:100%;display:flex;justify-content:center}.hero-section{width:100%;padding:28px 24px 22px;border-radius:24px;background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1.5px solid var(--glass-border);box-shadow:0 8px 32px #00000038;display:flex;flex-direction:column;align-items:center;gap:8px;animation:fadeUp .65s .1s ease both}.city-label{font-family:Bebas Neue,sans-serif;font-size:clamp(2.2rem,9vw,3.6rem);letter-spacing:.16em;color:var(--text-primary);line-height:1}.temp-card{width:100%;display:flex;justify-content:center;align-items:center}.temp-card .temp-ui{width:100%!important;background-color:transparent!important;display:flex;justify-content:center;align-items:center}.temp-card .temp-ui span{font-size:clamp(4.5rem,18vw,7rem)!important;font-family:Bebas Neue,sans-serif!important;color:var(--text-primary)!important;line-height:1!important;background:none!important}.datetime{font-size:.7rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);text-align:center}.stats-grid{width:100%;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(5,1fr);gap:12px}.stat-card{display:flex;align-items:center;height:auto;border-radius:20px;background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1.5px solid var(--glass-border);box-shadow:0 8px 32px #0000002e;transition:transform .2s ease,box-shadow .2s ease;overflow:hidden}.stat-card:hover{transform:translateY(-3px);box-shadow:0 14px 36px #00000042}.stat-card div{display:flex;gap:2px}.stat-card span{font-family:DM Sans,sans-serif;font-size:.88rem;font-weight:400;color:var(--text-primary)}.feels-like,.wind-ui,.humidity-ui,.precipitation-ui,.hour-forecast-ui{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;width:100%;height:100%;padding:.6em;box-sizing:border-box}.feels-like span,.wind-ui span,.humidity-ui span,.precipitation-ui span{font-size:2rem}.headline{display:flex;justify-content:flex-start;align-items:center;gap:6px;width:100%}.headline span{font-size:.8rem}.hourly-container{display:flex;gap:16px;overflow-x:auto;overflow-y:visible;flex-grow:1;align-items:stretch;padding-bottom:8px;scroll-behavior:smooth;margin-top:1em;max-height:500px}.hourly-container::-webkit-scrollbar{height:3.5px}.hourly-container::-webkit-scrollbar-thumb{background:#74747456;border-radius:25px}.hourly-weather{flex-shrink:0;display:flex;flex-direction:column;justify-content:center;align-items:center;width:60px;min-height:100%;padding:.5em;box-sizing:border-box;background:#ffffff1a;border-radius:8px}@keyframes fadeUp{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}.stats-grid .stat-card:nth-child(1){animation:fadeUp .55s .2s ease both}.stats-grid .stat-card:nth-child(2){animation:fadeUp .55s .28s ease both}.stats-grid .stat-card:nth-child(3){animation:fadeUp .55s .36s ease both}.stats-grid .stat-card:nth-child(4){animation:fadeUp .55s .44s ease both}.stats-grid .stat-card:nth-child(5){animation:fadeUp .55s .44s ease both;grid-column:span 2 / span 2}.loader-container{min-height:100vh;display:flex;justify-content:center;align-items:center}@media(max-width:360px){.stats-grid{grid-template-columns:1fr}}@media(max-width:600px){.hourly-weather{min-width:50px;padding:.4em;font-size:.75rem}}:root{--br-rad: 20px}.search-bar{display:flex;justify-content:center;align-items:center;width:100%;max-width:440px;height:48px;border-radius:50px;background-color:#97979743;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.3);overflow:hidden;margin:0 auto;box-shadow:0 4px 20px #00000026;transition:border-color .2s,box-shadow .2s}.search-bar:focus-within{border-color:#fff9;box-shadow:0 4px 24px #00000038}.search-bar form{display:flex;justify-content:space-between;align-items:center;width:100%;height:100%}.search-bar>form>input{background-color:transparent;border:none;outline:none;width:85%;height:100%;padding:0 1.2em;font-weight:400;font-size:.9rem;font-family:DM Sans,sans-serif;letter-spacing:.03em}.search-bar>form>input::placeholder{color:#a2a2a2}.search-bar>form>button{background-color:transparent;border:none;outline:none;width:15%;height:100%;display:flex;justify-content:center;align-items:center;cursor:pointer;opacity:.7;transition:opacity .2s}.search-bar>form>button:hover{opacity:1}.temp-ui{display:flex;justify-content:center;align-items:center;width:100%;background-color:transparent}:root{--blur: blur(3px);--bg: rgba(118, 118, 118, .449)}.loader{width:80px;height:40px;border-radius:100px 100px 0 0;position:relative;overflow:hidden}.loader:before{content:"";position:absolute;inset:0 0 -100%;background:radial-gradient(farthest-side,#ffd738 80%,#0000) left 70% top 20%/15px 15px,radial-gradient(farthest-side,#020308 92%,#0000) left 65% bottom 19%/12px 12px,radial-gradient(farthest-side,#ecfefe 92%,#0000) left 70% bottom 20%/15px 15px,linear-gradient(#9eddfe 50%,#020308 0);background-repeat:no-repeat;animation:l5 2s infinite}@keyframes l5{0%,20%{transform:rotate(0)}40%,60%{transform:rotate(.5turn)}80%,to{transform:rotate(1turn)}}.error-ui,.not-found{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:15px;height:25vh;width:30%;box-shadow:2px 2px 15px gray;border:2px solid gray;border-radius:20px;background:var(--bg);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}.not-found{width:100%;padding:1em}.error-ui p,.not-found p{font-size:1.5rem}.error-ui button{font-family:DM Sans,sans-serif;font-weight:500;padding:.7em;border:2px solid gray;border-radius:20px;background:#a0a0a05b;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}.error-ui button:hover{background:#a0a0a089}.alert{animation:alert .5s ease-in-out}@keyframes alert{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}