body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;margin:0;padding:0;overflow-x:hidden}*{margin:0;padding:0;box-sizing:border-box}*{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}input,textarea{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}html,body{margin:0;padding:0;overflow-x:hidden;min-height:100vh;min-height:100dvh;width:100vw;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}.app{width:100vw;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;transition:background-image .5s ease-in-out;overflow-x:hidden;padding:1vh;box-sizing:border-box}.container{width:96vw;min-height:96vh;min-height:96dvh;padding:1vh;display:flex;flex-direction:column;justify-content:center;gap:1vh;overflow-x:hidden;max-width:1200px}.search-form{display:flex;gap:1vw;justify-content:center;width:100%;max-width:70vw;margin:0 auto;margin-bottom:1vh;flex-wrap:wrap}.search-input{flex:1;min-width:200px;padding:2vh 3vw;border:none;border-radius:30px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-size:clamp(16px,1.2vw,20px);outline:none;transition:all .3s ease;-webkit-appearance:none;appearance:none}.day-mode .search-input{background:#0006;border:1px solid rgba(255,255,255,.4)}.day-mode .search-input:focus{background:#00000080;border-color:#fff9;transform:scale(1.02)}.night-mode .search-input{background:#fff3;border:1px solid rgba(255,255,255,.3)}.night-mode .search-input:focus{background:#ffffff4d;border-color:#ffffff80;transform:scale(1.02)}.search-input{background:#fff3;border:1px solid rgba(255,255,255,.3)}.search-input::placeholder{color:#ffffffb3}.search-button{padding:2vh 4vw;min-height:44px;border:none;border-radius:30px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-size:clamp(16px,1.2vw,20px);cursor:pointer;transition:all .3s ease;font-weight:500;white-space:nowrap}.day-mode .search-button{background:#0006;border:1px solid rgba(255,255,255,.4)}.day-mode .search-button:hover:not(:disabled){background:#00000080;transform:translateY(-2px);box-shadow:0 5px 15px #0006}.night-mode .search-button{background:#fff3;border:1px solid rgba(255,255,255,.3)}.night-mode .search-button:hover:not(:disabled){background:#ffffff4d;transform:translateY(-2px);box-shadow:0 5px 15px #0003}.search-button{background:#fff3;border:1px solid rgba(255,255,255,.3)}.search-button:disabled{opacity:.6;cursor:not-allowed}.location-button{padding:2vh;border:none;border-radius:50%;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-size:clamp(18px,1.5vw,24px);cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;width:max(44px,8vh);height:max(44px,8vh);min-width:44px;min-height:44px}.day-mode .location-button{background:#0006;border:1px solid rgba(255,255,255,.4)}.day-mode .location-button:hover:not(:disabled){background:#00000080;transform:translateY(-2px) scale(1.05);box-shadow:0 5px 15px #0006}.night-mode .location-button{background:#fff3;border:1px solid rgba(255,255,255,.3)}.night-mode .location-button:hover:not(:disabled){background:#ffffff4d;transform:translateY(-2px) scale(1.05);box-shadow:0 5px 15px #0003}.location-button{background:#fff3;border:1px solid rgba(255,255,255,.3)}.location-button:disabled{opacity:.6;cursor:not-allowed}.error{background:#f003;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,0,0,.3);color:#fff;padding:2vh;border-radius:0;text-align:center;width:80%;max-width:80vw;margin:0 auto;font-size:clamp(12px,1vw,16px)}.main-content{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:0;padding:2vh 2vw;color:#fff;animation:slideUp .5s ease-out;display:grid;grid-template-columns:1fr 1fr;gap:2vw;width:min(70vw,1000px);height:70vh;margin:0 auto;overflow-x:hidden;overflow-y:auto;transition:all .3s ease}.main-content.day-mode{background:#0006;border:1px solid rgba(255,255,255,.3);box-shadow:0 8px 32px #0000004d}.main-content.night-mode{background:#ffffff26;border:1px solid rgba(255,255,255,.2);box-shadow:0 8px 32px #0000001a}.weather-card{display:flex;flex-direction:column;justify-content:space-between;height:100%;overflow:hidden}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.weather-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2vh;flex-wrap:wrap;gap:2vw}.weather-header h2{font-size:clamp(16px,1.5vw,24px);font-weight:400}.unit-toggle{padding:1vh 2vw;min-height:44px;border:none;border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;cursor:pointer;transition:all .3s ease;font-size:clamp(14px,1vw,16px);white-space:nowrap}.day-mode .unit-toggle{background:#0006;border:1px solid rgba(255,255,255,.4)}.day-mode .unit-toggle:hover{background:#00000080;transform:scale(1.05)}.night-mode .unit-toggle{background:#fff3;border:1px solid rgba(255,255,255,.3)}.night-mode .unit-toggle:hover{background:#ffffff4d;transform:scale(1.05)}.unit-toggle{background:#fff3;border:1px solid rgba(255,255,255,.3)}.unit-toggle:hover{background:#ffffff4d;transform:scale(1.05)}.weather-main{text-align:center;margin-bottom:2vh;display:flex;flex-direction:column;align-items:center;gap:.5vh}.weather-icon-main{display:flex;justify-content:center;align-items:center}.main-weather-emoji{font-size:6vh;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));line-height:1}.temperature{font-size:clamp(24px,4vw,48px);font-weight:200;margin-bottom:1vh;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.weather-description{font-size:clamp(14px,1.5vw,20px);text-transform:capitalize;opacity:.9}.weather-separator{width:100%;height:1px;background:#ffffff4d;margin:1.5vh 0;border:none}.weather-details{display:grid;grid-template-columns:1fr 1fr;gap:.5vh}.detail-item{display:flex;justify-content:space-between;align-items:center;padding:.8vh 1vw;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:0;transition:all .3s ease}.day-mode .detail-item{background:#0000004d;border:1px solid rgba(255,255,255,.4)}.day-mode .detail-item:hover{background:#0006}.night-mode .detail-item{background:#ffffff1a;border:1px solid rgba(255,255,255,.2)}.night-mode .detail-item:hover{background:#fff3}.detail-item span:first-child{opacity:.8;font-size:clamp(11px,1vw,14px)}.detail-item span:last-child{font-weight:500;font-size:clamp(11px,1vw,14px)}.forecast-card{display:flex;flex-direction:column;height:100%;overflow:hidden}.forecast-title{text-align:center;font-size:clamp(16px,1.5vw,24px);font-weight:400;margin-bottom:1vh;opacity:.9}.forecast-grid{display:flex;flex-direction:column;gap:.3vh;flex:1;overflow:hidden;width:100%;height:100%}.forecast-item{margin-top:1.3vh;display:grid;grid-template-columns:1fr auto auto 2fr;align-items:center;padding:1.5vh 1.5vw;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:0;transition:all .3s ease;gap:1.5vw;width:100%;flex:1;min-height:calc((100% - 6 * .8vh - 6 * 1.3vh) / 7)}.day-mode .forecast-item{background:#0000004d;border:1px solid rgba(255,255,255,.4)}.day-mode .forecast-item:hover{background:#0006;transform:translate(5px);box-shadow:0 5px 15px #0006}.night-mode .forecast-item{background:#ffffff1a;border:1px solid rgba(255,255,255,.2)}.night-mode .forecast-item:hover{background:#fff3;transform:translate(5px);box-shadow:0 5px 15px #0003}.forecast-day{font-size:clamp(12px,1.2vw,18px);font-weight:500;opacity:.9;min-width:15%}.forecast-icon{display:flex;align-items:center;justify-content:center}.forecast-emoji{font-size:3vh;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));line-height:1}.forecast-temps{display:flex;gap:1vw;font-weight:500;align-items:center;min-width:15%;justify-content:center}.temp-high{color:#fff;font-size:clamp(12px,1.2vw,18px)}.temp-low{color:#ffffffb3;font-size:clamp(12px,1.2vw,18px)}.forecast-desc{font-size:clamp(11px,1vw,14px);opacity:.8;text-transform:capitalize;line-height:1.2;text-align:left}@media (max-width: 1024px){.main-content{grid-template-columns:1fr;gap:2vh;width:96vw;padding:1.5vh 2vw;height:85vh}.forecast-grid{gap:.6vh}.search-form{max-width:90vw;gap:2vw}.weather-details{grid-template-columns:1fr 1fr;gap:1vh}}@media (max-width: 900px){.container{width:98vw;padding:.5vh}.main-content{width:98vw;padding:1vh 1.5vw;height:80vh}.search-form{max-width:95vw}}@media (max-width: 768px){.container{padding:.5vh;min-height:98vh;min-height:98dvh}.search-form{flex-direction:row;flex-wrap:wrap;width:100%;margin-bottom:2vh;gap:1vh;max-width:100%}.search-input{flex:1;min-width:calc(100% - 60px);padding:2vh 4vw;font-size:clamp(16px,4vw,20px);margin-bottom:1vh}.search-button{flex:1;min-width:calc(50% - .5vh);padding:2vh 4vw;font-size:clamp(16px,4vw,20px);min-height:50px}.location-button{padding:2vh;font-size:clamp(20px,5vw,24px);width:max(50px,12vw);height:max(50px,12vw);min-width:50px;min-height:50px;flex-shrink:0}.main-content{grid-template-columns:1fr;gap:2vh;padding:1.5vh 2vw;height:auto;min-height:80vh;width:98vw}.weather-header{flex-direction:column;text-align:center;margin-bottom:2vh;gap:1vh}.weather-header h2{font-size:clamp(18px,4vw,24px);line-height:1.2}.temperature{font-size:clamp(32px,8vw,48px);margin-bottom:1vh}.main-weather-emoji{font-size:clamp(60px,12vh,80px)}.weather-description{font-size:clamp(16px,3vw,20px)}.weather-details{grid-template-columns:1fr;gap:1vh}.detail-item{padding:1.5vh 3vw}.detail-item span:first-child,.detail-item span:last-child{font-size:clamp(14px,3vw,18px)}.forecast-item{grid-template-columns:1fr auto auto 1.5fr;padding:2vh 3vw;gap:2vw;margin-top:1vh;min-height:auto}.forecast-emoji{font-size:clamp(24px,6vh,32px)}.forecast-day{font-size:clamp(14px,3vw,18px);min-width:25%}.temp-high,.temp-low{font-size:clamp(14px,3vw,18px)}.forecast-desc{font-size:clamp(12px,2.5vw,16px);line-height:1.3}.forecast-temps{min-width:25%;gap:.5vw}.unit-toggle{font-size:clamp(14px,3vw,18px);padding:1.5vh 3vw}.forecast-title{font-size:clamp(16px,3vw,20px);margin-bottom:1.5vh}}@media (max-width: 480px){.container{padding:.25vh;width:100vw}.search-form{flex-direction:column;gap:1.5vh;margin-bottom:1.5vh}.search-input{min-width:100%;padding:2.5vh 5vw;font-size:16px;margin-bottom:0}.search-button{min-width:100%;padding:2.5vh 5vw;font-size:16px}.location-button{align-self:center;width:60px;height:60px;font-size:24px}.main-content{width:100vw;padding:1vh 2vw;gap:1.5vh;height:auto;min-height:75vh}.weather-header h2{font-size:18px;text-align:center}.temperature{font-size:36px}.main-weather-emoji{font-size:60px}.weather-description{font-size:16px}.detail-item{padding:2vh 4vw}.detail-item span:first-child,.detail-item span:last-child{font-size:14px}.forecast-item{grid-template-columns:1fr auto auto 1fr;padding:2vh 4vw;gap:2vw}.forecast-day{font-size:14px;min-width:30%}.forecast-emoji{font-size:28px}.temp-high,.temp-low{font-size:14px}.forecast-desc{font-size:12px}.forecast-temps{min-width:30%}.unit-toggle{font-size:14px;padding:2vh 4vw}}@media (max-width: 360px){.search-input,.search-button{padding:3vh 6vw}.main-content{padding:.5vh 1vw}.forecast-item{grid-template-columns:1fr;text-align:center;gap:1vh;padding:1.5vh 2vw}.forecast-day,.forecast-temps,.forecast-desc{min-width:100%}.forecast-temps{justify-content:center}}@media (hover: none) and (pointer: coarse){.search-button:hover,.location-button:hover,.unit-toggle:hover,.detail-item:hover,.forecast-item:hover{transform:none!important;box-shadow:none!important}.search-button:active,.location-button:active,.unit-toggle:active{transform:scale(.95);opacity:.8}.detail-item:active,.forecast-item:active{opacity:.8}}.search-input:focus,.search-button:focus,.location-button:focus,.unit-toggle:focus{outline:2px solid rgba(255,255,255,.8);outline-offset:2px}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.main-content,.weather-card,.forecast-card{will-change:transform;transform:translateZ(0)}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}@media screen and (max-width: 768px){input[type=text],input[type=email],input[type=tel],input[type=password],textarea,select{font-size:16px!important}}