:root{--bg_main:#3b75d8;--bg_top:#5d8ee3;--bg_bottom:#2f63bd;--glow_1:#ffffff47;--glow_2:#a6ccff42;--text_light:#fff;--text_med:#000;--text_dark:#262a31;--surface_bg:#fff;--surface_border:#ffffffa6;--surface_shadow:0 18px 30px #08245a33;--surface_shadow_hover:0 24px 38px #08245a42;--red:#f03;--darkred:#500516;--orange:red;--card-bg:#ffffff1a;--card-shadow:0 8px 32px #0000001a;--detail-bg:#ffffff0d}a{color:inherit;text-decoration:none}*{box-sizing:border-box;margin:0;padding:0;font-weight:400}button{cursor:pointer}input{appearance:none}button,input{color:inherit;background:0 0;border:none;outline:none}img{max-width:100%;height:auto;display:block}ul{list-style:none}body{background:radial-gradient(circle at 18% 22%, var(--glow_1) 0, #fff0 35%), radial-gradient(circle at 82% 10%, var(--glow_2) 0, #fff0 40%), linear-gradient(160deg, var(--bg_top) 0%, var(--bg_main) 45%, var(--bg_bottom) 100%);color:var(--text_dark);min-height:100vh;padding:70px;font:1rem/1.3 Roboto,sans-serif;position:relative;overflow-x:hidden}body.theme-dark{--bg_main:#172744;--bg_top:#223a63;--bg_bottom:#0e1a31;--glow_1:#82b0ff33;--glow_2:#709ceb33;--text_med:#eef3ff;--text_dark:#eef3ff;--surface_bg:#182238e6;--surface_border:#fff3;--surface_shadow:0 16px 30px #00000059;--surface_shadow_hover:0 22px 36px #00000073}body:before,body:after{content:"";pointer-events:none;filter:blur(8px);z-index:0;border-radius:50%;position:fixed}body:before{background:#fff3;width:340px;height:340px;animation:14s ease-in-out infinite driftA;top:-90px;right:-110px}body:after{background:#c4e0ff38;width:280px;height:280px;animation:16s ease-in-out infinite driftB;bottom:-100px;left:-80px}@keyframes driftA{0%,to{transform:translateY(0)}50%{transform:translateY(16px)}}@keyframes driftB{0%,to{transform:translateY(0)}50%{transform:translateY(-14px)}}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 15px}.top-banner{color:var(--text_light);z-index:1;position:relative}.heading{letter-spacing:.02em;text-shadow:0 8px 24px #0b255447;padding:0 0 30px;font-size:4rem;font-weight:700}.top-banner form{align-items:center;gap:10px;width:fit-content;max-width:100%;display:flex;position:relative}.top-banner form input{border-bottom:1px solid #ffffffbf;flex:0 auto;width:clamp(220px,42vw,520px);height:40px;padding:5px 5px 10px;font-size:2rem}.top-banner form input::placeholder{color:currentColor}.top-banner form button{letter-spacing:.1em;background:var(--red);border-radius:5px;margin-left:0;padding:15px 20px;font-size:1rem;font-weight:700;transition:background .3s ease-in-out,transform .2s ease-in-out;box-shadow:0 10px 20px #5a041a47}.search-help{width:28px;height:28px;color:var(--text_light);cursor:help;background:#fff3;border:1px solid #fff9;border-radius:50%;justify-content:center;align-items:center;font-size:.9rem;font-weight:700;display:inline-flex;position:relative}.search-help-tip{color:var(--text_light);white-space:nowrap;opacity:0;pointer-events:none;z-index:4;background:#000000c7;border-radius:6px;padding:6px 8px;font-size:.78rem;transition:opacity .2s;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%)}.search-help:hover .search-help-tip,.search-help:focus-visible .search-help-tip{opacity:1}.top-banner form button:hover{background:var(--darkred);transform:translateY(-2px)}.top-banner form .msg{max-width:450px;min-height:40px;position:absolute;bottom:-40px;left:0}.controls-row{flex-wrap:wrap;gap:10px;margin-top:16px;display:flex}.control-btn{letter-spacing:.05em;background:var(--surface_bg);color:var(--text_dark);border:1px solid var(--surface_border);border-radius:5px;padding:10px 14px;font-size:.9rem;font-weight:700}.control-btn:disabled{opacity:.7;cursor:wait}.favorite-row{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.favorite-chip{color:var(--text_light);background:#ffffff40;border:1px solid #ffffff8c;border-radius:999px;padding:8px 12px;font-size:.85rem}.ajax-section{z-index:1;margin:48px 0 20px;position:relative}.ajax-section .cities{grid-gap:32px 20px;grid-template-columns:repeat(auto-fit,minmax(460px,1fr));justify-items:start;display:grid}.ajax-section .city{color:var(--text_med);box-shadow:none;background:0 0;border:none;border-radius:20px;width:min(100%,395px);padding:0;transition:transform .2s;position:relative}.city-layout{align-items:stretch;gap:0;display:flex}.city-main{background:var(--surface_bg);border:1px solid var(--surface_border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);min-width:0;box-shadow:var(--surface_shadow);border-right:none;border-radius:20px 0 0 20px;flex:0 210px;padding:11px 4%}.ajax-section .city:hover{transform:translateY(-4px)}.ajax-section .city:after{content:none}.ajax-section .city-name{margin-bottom:20px}.ajax-section .city-name span{color:var(--text_dark);font-size:2rem;font-weight:700}.favorite-toggle{color:var(--text_dark);margin-bottom:8px;font-size:.9rem;font-weight:700}.alert-stack{gap:8px;margin-bottom:12px;display:grid}.alert-banner{background:#ff000014;border:1px solid #f003;border-radius:10px;justify-content:space-between;gap:10px;padding:10px;display:flex}.alert-title{color:var(--text_dark);font-size:.9rem;font-weight:700}.alert-meta,.alert-desc{color:var(--text_dark);margin-top:4px;font-size:.8rem;line-height:1.3}.alert-dismiss{color:var(--red);white-space:nowrap;font-size:.8rem;font-weight:700}.forecast-section{background:var(--surface_bg);border:1px solid var(--surface_border);width:158px;box-shadow:var(--surface_shadow);border-radius:0 20px 20px 0;flex-shrink:0;margin-left:-1px;padding:13px 11px}.forecast-title{color:var(--text_dark);margin-bottom:8px;font-size:1.08rem;font-weight:700}.forecast-list{gap:6px;display:grid}.forecast-item{grid-template-columns:32px 18px auto;align-items:center;gap:5px;display:grid}.forecast-day,.forecast-temp{color:var(--text_dark);font-size:.98rem;font-weight:700}.forecast-day{min-width:36px}.forecast-temp{white-space:nowrap}.forecast-icon{width:18px;height:18px}.ajax-section figcaption{text-transform:uppercase;letter-spacing:.05em;margin-top:10px}.ajax-section .city-temp{color:var(--text_dark);margin-top:10px;font-size:5rem;font-weight:700}.ajax-section .detail,.detail-value,.sun-value,.detail-label,.sun-label{color:var(--text_dark);text-transform:capitalize;margin-top:10px;font-size:1.1rem;font-weight:700;line-height:1.5}.ajax-section .details{color:var(--text_dark);text-transform:capitalize;margin-top:10px;font-size:1.2rem;font-weight:700}.ajax-section .city sup{font-size:.5em}.ajax-section .city-name sup{color:var(--text_light);background:var(--orange);border-radius:30px;padding:.2em .6em}.ajax-section .city-icon{object-fit:contain;border-radius:0;width:150px;height:150px;margin-top:0;display:block}.weather-icon{background:var(--surface_bg);border-radius:0;place-items:center;width:150px;height:150px;display:grid}@media screen and (width<=1000px){body{padding:30px}.ajax-section .cities{grid-template-columns:1fr}}@media screen and (width<=700px){.heading,.ajax-section .city-temp{font-size:3rem}.ajax-section{margin-top:20px}.top-banner form{flex-direction:column;align-items:flex-start;gap:0}.top-banner form input,.top-banner form button{width:100%}.top-banner form button{margin:20px 0 0}.search-help{margin-top:10px}.controls-row,.control-btn{width:100%}.top-banner form .msg{max-width:none;min-height:0;margin-top:10px;position:static}.ajax-section .cities{grid-template-columns:repeat(2,1fr)}.city-layout{flex-direction:column;gap:12px}.city-main{border-right:1px solid var(--surface_border);border-radius:20px}.forecast-section{border-radius:20px;width:100%;padding:12px}}@media screen and (width<=500px){body{padding:15px}.ajax-section .cities{grid-template-columns:repeat(1,1fr)}}.page-footer{text-align:right;color:var(--text_light);z-index:3;align-self:auto;margin-top:0;font-size:1rem;position:fixed;bottom:14px;right:20px}.page-footer span{color:var(--red)}
