*{box-sizing:border-box}:root{--red:#ff3333}body,html{height:100%}body{font-family:Arial,sans-serif;background:radial-gradient(circle at top,#000000,#200000,#400000);min-height:100vh;margin:0;color:#fff;display:flex;flex-direction:column}.container{width:100%;max-width:100%;padding:20px 16px;margin:0 auto;text-align:center}.title{font-size:32px;font-weight:800;margin:8px 0 16px;color:var(--red)}.search{display:flex;justify-content:center;align-items:center;gap:12px;margin-bottom:16px}.search input{width:220px;max-width:70%;padding:10px 12px}.search button{padding:10px 16px}input{border-radius:8px;border:1px solid #444;background:#111;font-size:16px}button,input{width:100%;padding:12px 14px;color:#fff}button{border:0;border-radius:8px;background:var(--red);cursor:pointer}.error{color:#ff9a9a;margin:6px 0 12px;font-size:14px}.card{background:#111;border:1px solid var(--red);border-radius:12px;padding:20px;margin:16px auto 24px;width:100%;max-width:420px;box-shadow:0 0 16px rgba(255,50,50,.35);transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}.card:hover{box-shadow:0 0 26px rgba(255,0,0,.7);transform:translateY(-3px);border-color:#ff0000}.today{margin-top:6px;font-weight:700}.time{margin:4px 0 10px;font-size:14px;color:#bbb}.temp{font-size:32px;font-weight:800;margin:8px 0 6px}.desc{font-size:16px;margin-bottom:14px}.details{margin-top:12px;text-align:left;display:grid;grid-template-columns:1fr;grid-gap:8px;gap:8px}.details div,.feels{display:flex;justify-content:space-between}.feels{margin-top:14px;padding:10px;background:#222;border-radius:8px;font-weight:700}.footer{margin-top:auto;width:100%;padding:12px 0;border-top:1px solid #333}.footer-text{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-family:Segoe UI,sans-serif}.footer-text .name{font-weight:700}.footer-text .copyright{color:#aaa}a,button{-webkit-tap-highlight-color:transparent}@media (min-width:480px){.title{font-size:36px}.card{max-width:520px;padding:24px}.temp{font-size:36px}}@media (min-width:768px){.container{max-width:960px}.title{font-size:42px}.search{grid-template-columns:1fr auto;align-items:center}button{width:auto;padding:12px 18px}.card{max-width:640px}.details{grid-template-columns:1fr}}@media (max-width:360px){.temp,.title{font-size:26px}.desc,button,input{font-size:14px}button,input{padding:10px}}