body{margin:0;font-family:Inter,sans-serif;color:#fff;background-color:#333;display:flex;flex-direction:column;align-items:center;min-height:100vh;overflow-x:hidden;padding:20px 0;box-sizing:border-box}.video-background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;overflow:hidden}#bgVideo{width:100%;height:100%;object-fit:cover}#root{width:100%;max-width:1200px;padding:0 15px;box-sizing:border-box}.app-container{display:flex;flex-direction:column;gap:20px}.card{background-color:#00000059;backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%);border-radius:15px;padding:20px;border:1px solid rgba(255,255,255,.1)}.app-header{text-align:center;margin-bottom:10px}.logo{font-size:2.8em;font-weight:300;letter-spacing:2px;color:#ffffffe6;text-shadow:0 0 10px rgba(255,255,255,.3)}.search-bar-container{display:flex;align-items:center;gap:10px;margin-bottom:20px}.search-input-wrapper{display:flex;align-items:center;background-color:#ffffff26;border-radius:25px;padding:0 15px;flex-grow:1}.search-input-wrapper svg{margin-right:10px;fill:#ffffffb3}.search-input{background:transparent;border:none;color:#fff;font-size:1em;padding:12px 0;outline:none;width:100%}.search-input::placeholder{color:#ffffffb3}.search-button{background-color:#ffffff26;border:none;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .3s}.search-button:hover{background-color:#ffffff40}.search-button svg{fill:#ffffffe6}.main-content{display:grid;grid-template-columns:1.5fr 1fr;gap:20px}.weather-info-card .location{font-size:1.2em;font-weight:500;color:#fffffff2}.weather-info-card .datetime{font-size:.9em;color:#ffffffb3;margin-bottom:15px}.current-weather{display:flex;align-items:center;gap:10px;margin-bottom:20px}.weather-description{font-size:.9em;color:#fffc}.weather-icon-main{width:70px;height:70px;object-fit:contain}.temperature{font-size:3.5em;font-weight:700;line-height:1}.temp-unit-toggle span{font-size:1.8em;font-weight:300;color:#ffffff80;cursor:pointer;padding:0 5px}.temp-unit-toggle span.active{color:#fff;font-weight:500}.sun-moon-cycle{margin-bottom:20px}.cycle-header{display:flex;justify-content:space-between;align-items:center;font-size:.9em;margin-bottom:8px;color:#ffffffd9}.cycle-header>span:first-child{display:flex;align-items:center}.cycle-header>span:first-child .cycle-icon{margin-right:8px}.cycle-icon{width:20px;height:20px;fill:gold}.cycle-arc-container{position:relative;height:70px;display:flex;justify-content:center;align-items:flex-end;margin-bottom:5px}.cycle-arc{width:140px;height:70px;border-top-left-radius:140px;border-top-right-radius:140px;border:2px solid rgba(255,255,255,.5);border-bottom:0;box-sizing:border-box;position:relative}.sun-arc{border-color:gold}.cycle-duration{text-align:center;font-size:.8em;color:#ffffffb3;margin-top:-18px;position:relative;z-index:1}.weather-details-card .detail-item{display:flex;align-items:center;margin-bottom:15px;font-size:.95em}.weather-details-card .detail-item:last-child{margin-bottom:0}.detail-icon{width:24px;height:24px;margin-right:12px;fill:#fffc}.detail-label{color:#ffffffb3;margin-right:auto}.detail-value{font-weight:500;font-size:1.1em}.hourly-forecast-container{padding-bottom:10px}.hourly-forecast-title{font-size:1.1em;font-weight:500;margin-bottom:15px;color:#ffffffe6}.hourly-forecast-scroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px}.hourly-forecast-scroll::-webkit-scrollbar{height:8px}.hourly-forecast-scroll::-webkit-scrollbar-track{background:#ffffff1a;border-radius:4px}.hourly-forecast-scroll::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:4px}.hourly-forecast-scroll::-webkit-scrollbar-thumb:hover{background:#ffffff80}.hourly-item{background-color:#0003;border-radius:10px;padding:15px;min-width:110px;text-align:center;border:1px solid rgba(255,255,255,.05)}.hourly-time{font-size:.85em;color:#ffffffb3;margin-bottom:8px}.hourly-weather-icon{width:40px;height:40px;margin-bottom:5px;object-fit:contain}.hourly-temp{font-size:1.3em;font-weight:500;margin-bottom:5px}.hourly-feels-like{font-size:.8em;color:#fff9}.loading-message,.error-message{text-align:center;font-size:1.1em;padding:20px}.error-message{color:#ffcdd2;background-color:#f003}@media (max-width: 900px){.main-content{grid-template-columns:1fr}.logo{font-size:2.2em}.temperature{font-size:3em}.temp-unit-toggle span{font-size:1.5em}}@media (max-width: 600px){body{padding:10px 0}#root{padding:0 10px}.card{padding:15px}.search-input-wrapper{padding:0 12px}.search-input{font-size:.9em;padding:10px 0}.search-button{width:40px;height:40px}.weather-icon-main{width:50px;height:50px}.temperature{font-size:2.5em}.temp-unit-toggle span{font-size:1.3em}.hourly-item{min-width:90px;padding:10px}.hourly-temp{font-size:1.1em}.hourly-weather-icon{width:35px;height:35px}}