body{color:#eef2ff;background:radial-gradient(circle at 0 0,#1a1f2b 0%,#11141d 40%,#0b0d12 100%);min-height:100vh;margin:0;padding:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}.app{background:linear-gradient(#3f0c90f2,#0a143df2);border:1px solid #ffffff14;border-radius:32px;width:min(100%,760px);margin:40px auto;padding:28px 26px;box-shadow:0 32px 90px #00000059}.search-container{grid-template-columns:1fr auto;align-items:center;gap:16px;margin-bottom:28px;display:grid}.search-container input{color:#eef2ff;background:#ffffff0a;border:1px solid #ffffff24;border-radius:16px;outline:none;width:100%;min-height:52px;padding:0 18px;font-size:1rem;transition:border-color .18s,transform .18s,background-color .18s}.search-container input:focus{background:#ffffff14;border-color:#7ed5ff99;transform:translateY(-1px)}.search-container input::placeholder{color:#eef2ff99}.search-container button{color:#061420;cursor:pointer;background:linear-gradient(135deg,#7c4dff 0%,#5ec3ff 100%);border:none;border-radius:16px;min-height:52px;padding:0 22px;font-size:1rem;font-weight:700;transition:transform .18s,filter .18s,box-shadow .18s}.search-container button:hover{filter:brightness(1.05);transform:translateY(-2px);box-shadow:0 18px 40px #5ec3ff3d}.search-container button:active{transform:translateY(0)}.city-name{margin-top:10px}.city-name h2{letter-spacing:-.03em;margin:0;font-size:clamp(2rem,2.5vw,2.6rem)}.city-name span{color:#eef2ffb8}.loading{color:#b4f8c8;margin:60px 0;font-size:clamp(2.5rem,5vw,4rem);font-weight:800}.date{color:#eef2ffb8;margin-top:8px;font-size:1rem;font-style:italic;font-weight:500}.temp{color:#f8f5d4;text-align:center;margin:18px 0 0;font-size:clamp(3rem,6vw,5rem);font-weight:800}.description{color:#e4e9ff;max-width:520px;margin:14px auto 22px;font-size:clamp(1.2rem,2vw,1.5rem);font-weight:600}.weather-info{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:20px;padding:0 10px;display:grid}.weather-info>.column{background:#ffffff0f;border:1px solid #ffffff1a;border-radius:20px;padding:18px 16px;transition:transform .18s,background-color .18s,border-color .18s}.weather-info>.column:hover{background:#ffffff1a;border-color:#5ec3ff40;transform:translateY(-3px)}.column{flex-direction:column;align-items:center;gap:8px;display:flex}.column p{margin:0}.wind,.humidity{color:#f3f6ff;margin-bottom:4px;font-size:1.8rem;font-weight:700}@media (width<=680px){.app{margin:24px auto;padding:22px}.search-container{grid-template-columns:1fr}.search-container button{width:100%}.weather-info{grid-template-columns:1fr}.temp{font-size:clamp(2.4rem,9vw,3.8rem)}}@media (width<=420px){.app{border-radius:24px;padding:18px}.search-container input{min-height:48px;font-size:.97rem}.search-container button{padding:14px 16px;font-size:.97rem}.description{font-size:1.05rem}.weather-info{gap:14px}}