body{margin:0}.app-container{background:url(/weather-checker/background.jpg) 50%/cover;justify-content:center;align-items:center;min-height:100vh;padding-top:20px;font-family:Arial,Helvetica,sans-serif;display:flex}.weather-app{background:#fff;border-radius:16px;width:440px;padding:35px;box-shadow:0 12px 35px #0000002e}.app-header{text-align:center;margin-bottom:25px}.app-title{margin:0;font-size:32px;font-weight:600}.search-bar{gap:12px;display:flex}.city-input{background:#f5f7f9;border:1px solid #ccc;border-radius:8px;outline:none;flex:1;padding:12px;font-size:15px}.city-input:focus{background:#fff;border:1px solid #4facfe}.search-button{color:#fff;cursor:pointer;background:#4facfe;border:none;border-radius:8px;padding:12px 16px;font-weight:500}.search-button:hover{background:#3c96e8}.recent-section{margin-top:25px}.recent-title{margin-bottom:12px;font-size:20px}.recent-list{flex-wrap:wrap;gap:10px;display:flex}.recent-city-btn{cursor:pointer;background:#ececec;border:none;border-radius:6px;padding:7px 12px;font-size:14px}.recent-city-btn:hover{background:#e2e2e2}.unit-toggle-section{margin-top:25px}.unit-toggle-btn{color:#fff;cursor:pointer;background:#222;border:none;border-radius:8px;width:100%;padding:12px;font-weight:500}.unit-toggle-btn:hover{background:#333}.status-section{margin-top:15px}.loading-text{color:#666}.error-text{color:red}.weather-card{text-align:center;background:#f6f7f9;border-radius:12px;margin-top:30px;padding:22px;transition:transform .15s}.weather-card:hover{transform:translateY(-2px)}.city-name{margin-bottom:10px;font-size:28px}.weather-icon-container{margin:12px 0}.weather-icon{width:90px}.weather-details{font-size:17px}.temperature{margin-bottom:6px;font-weight:600}.condition{color:#555}.humidity{color:#444;margin-bottom:6px;font-size:16px}.site-navbar{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;background:#ffffff40;border-bottom:1px solid #fff6;width:100%;position:fixed;top:0;left:0}.nav-container{justify-content:space-between;align-items:center;max-width:1100px;margin:auto;padding:14px 20px;display:flex}.nav-logo{letter-spacing:.5px;font-size:20px;font-weight:600}.nav-links{gap:24px;display:flex}.nav-links a{color:#222;font-size:15px;font-weight:500;text-decoration:none;transition:color .2s}.nav-links a:hover{color:#4facfe}body{margin:0;font-family:Arial,Helvetica,sans-serif}