:root{--bg-color:#081726;--bg-highlight:#17496b;--bg-glow:#5fb4ff2e;--card-bg:#193246;--card-bg-strong:#23455f;--card-bg-soft:#1f3d54;--card-border:#a0c6e22e;--shadow:0 24px 50px #02121f4d;--shadow-soft:0 12px 32px #02121f29;--border-radius:24px;--border-radius-sm:16px;--card-width:100%;--content-width:min(100%, 380px);--spacing-sm:10px;--spacing-md:20px;--spacing-lg:30px;--text-primary:#f3f8fc;--text-muted:#bfd2e1;--text-soft:#92a9ba;--accent:#1378e8;--accent-soft:#1378e824;--success-soft:#10b98129;--surface-tint:#ffffff14}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);font-family:Inder,sans-serif}button,input,textarea{font:inherit}button{color:inherit;cursor:pointer}:focus-visible{outline-offset:3px;outline:2px solid #4db4ffe6}.weather-app-container{flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:32px 16px 48px;display:flex;position:relative;overflow:hidden}.weather-app-container:before,.weather-app-container:after{content:"";filter:blur(20px);pointer-events:none;border-radius:999px;position:fixed;inset:auto}.weather-app-container:before{background:var(--bg-glow);width:280px;height:280px;top:30px;left:-90px}.weather-app-container:after{background:#1378e833;width:360px;height:360px;bottom:20px;right:-140px}.weather-shell{width:var(--content-width);z-index:1;opacity:0;flex-direction:column;gap:24px;transition:opacity .55s,transform .55s;display:flex;position:relative;transform:translateY(18px)}.weather-app-container.app-ready .weather-shell{opacity:1;transform:translateY(0)}.app-intro{flex-direction:column;gap:24px;display:flex}.app-hero{text-align:left;color:#fff}.app-eyebrow{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);letter-spacing:.08em;text-transform:uppercase;background:#ffffff1f;border-radius:999px;align-items:center;gap:8px;padding:8px 12px;font-size:12px;display:inline-flex}.app-title{margin:14px 0 10px;font-size:clamp(32px,7vw,42px);font-weight:700;line-height:.95}.app-subtitle{color:#ffffffd6;max-width:36ch;font-size:15px;line-height:1.5}.weather-content{grid-template-columns:minmax(0,1fr);align-content:start;gap:18px;width:100%;display:grid}.weather-content>*{justify-self:stretch;width:100%;min-width:0;max-width:100%}.weather-content.content-ready>*{animation:.45s both contentReveal}.weather-content.content-ready>:nth-child(2){animation-delay:80ms}.loading-card{width:var(--card-width);border-radius:var(--border-radius);background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--shadow);align-items:center;gap:14px;padding:22px 20px;display:flex;position:relative;overflow:hidden}.loading-card:after{content:"";background:linear-gradient(90deg,#0000 0%,#ffffff0d 45%,#0000 100%);animation:1.5s ease-in-out infinite shimmer;position:absolute;inset:0;transform:translate(-100%)}@media (width<=480px){.weather-shell{gap:20px}.weather-content{gap:16px}}@media (width>=960px){.weather-app-container{padding:40px 28px 56px}.weather-shell{grid-template-columns:minmax(320px,420px) minmax(420px,620px);align-items:start;gap:28px;width:min(1120px,100%);display:grid}.app-intro{gap:22px;position:sticky;top:32px}.app-title{max-width:8ch;font-size:clamp(44px,4.6vw,64px)}.app-subtitle{max-width:34ch;font-size:16px}.weather-content{gap:20px}}.loading-spinner{border:3px solid #0f7fff26;border-top-color:var(--accent);border-radius:999px;flex-shrink:0;width:18px;height:18px;animation:.9s linear infinite spin}.loading-copy{color:var(--text-primary);flex-direction:column;gap:4px;display:flex}.loading-copy strong{font-size:15px}.loading-copy span{color:var(--text-muted);font-size:13px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes contentReveal{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media (prefers-reduced-motion:reduce){.weather-shell,.weather-content.content-ready>*,.loading-card:after,.loading-spinner{transition:none;animation:none;transform:none}.weather-shell{opacity:1}}#search{width:var(--card-width);background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--shadow-soft);border-radius:var(--border-radius);flex-direction:column;gap:10px;margin:0 auto;padding:14px;display:flex;position:relative}#searchForm{background:var(--card-bg-strong);border:1px solid #ffffff14;border-radius:18px;width:100%;min-height:52px;transition:border-color .2s,box-shadow .2s,transform .2s;display:flex;overflow:hidden;box-shadow:inset 0 1px #ffffff0a}#searchForm:focus-within{border-color:#4db4ff73;box-shadow:0 0 0 4px #4db4ff1f}#searchInput{color:#f3f8fc;caret-color:#7bc3ff;background:0 0;border:none;flex:1;padding:0 16px;font-size:15px}#searchInput::placeholder{color:#9fb5c7}#searchButton{cursor:pointer;background:linear-gradient(135deg,#1378e8,#4db4ff);border:none;place-items:center;width:54px;transition:filter .2s,transform .2s;display:grid}#searchButton:hover{filter:brightness(1.03)}#searchButton:active{transform:scale(.98)}#searchButton img{filter:brightness(0)invert()}.search-helper{color:var(--text-muted);padding-left:4px;font-size:12px;line-height:1.4}.suggestions-list{background:var(--card-bg-strong);border:1px solid var(--card-border);box-shadow:var(--shadow);z-index:1000;scrollbar-width:thin;scrollbar-color:#0000004d transparent;border-radius:20px;max-height:220px;padding:8px;position:absolute;top:calc(100% + 10px);left:0;right:0;overflow-y:auto}@media (width<=480px){#search{padding:12px}#searchForm{min-height:50px}}.suggestions-list::-webkit-scrollbar{width:6px}.suggestions-list::-webkit-scrollbar-track{background:0 0}.suggestions-list::-webkit-scrollbar-thumb{background-color:#0000004d;border-radius:3px}.suggestion-item{cursor:pointer;align-items:center;gap:var(--spacing-sm);text-align:left;background:0 0;border:none;border-radius:14px;width:100%;padding:12px;transition:background-color .18s,transform .18s;display:flex}.suggestion-item:hover{background:#1378e814;transform:translate(2px)}.suggestion-item.is-highlighted,.suggestion-item:focus-visible{background:#1378e81f}.suggestion-item:active{transform:scale(.99)}.suggestion-icon{width:16px;height:16px}.suggestion-info{flex-direction:column;display:flex}.suggestion-city{color:var(--text-primary);font-weight:500}.suggestion-country{color:var(--text-muted);font-size:.8em}.suggestions-feedback{color:var(--text-muted);text-align:left;padding:14px 12px;font-size:14px}#card{cursor:pointer;background:linear-gradient(180deg, #ffffff14, #ffffff05) 0 0 / 100% 100%, var(--card-bg);width:100%;min-width:0;max-width:100%;box-shadow:var(--shadow);border-radius:var(--border-radius);border:1px solid var(--card-border);text-align:left;appearance:none;box-sizing:border-box;margin:0;padding:20px;transition:transform .25s,box-shadow .25s;display:block;overflow:hidden}#card:hover{transform:translateY(-3px);box-shadow:0 26px 50px #010c1752}#card:focus-visible{transform:translateY(-3px)}#card:active{transform:translateY(-1px)}.card-topbar{justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;display:flex}.card-status-badge{color:#d1fae5;text-transform:uppercase;letter-spacing:.08em;background:#6ee7b729;border:1px solid #6ee7b73d;border-radius:999px;align-items:center;padding:7px 10px;font-size:11px;font-weight:700;display:inline-flex}.card-status-copy{color:var(--text-muted);font-size:12px;font-weight:600}.location-container{flex-direction:column;justify-content:center;align-items:center;gap:8px;margin-bottom:22px;display:flex}#location-icon{width:20px;height:20px}.temperature-container{text-align:center;contain:layout style;margin-bottom:22px}#weather-icon{filter:drop-shadow(0 8px 18px #1378e829);width:110px;height:110px;margin-bottom:-6px}#city{color:var(--text-primary);text-align:center;font-size:19px}#temperature{color:var(--text-primary);margin-bottom:8px;font-size:58px;font-weight:700;line-height:.95}#description{color:var(--text-muted);margin-bottom:0;font-size:16px}.weather-details{grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:22px;display:grid}.weather-detail-item{background:var(--card-bg-strong);border:1px solid #ffffff14;border-radius:18px;justify-content:flex-start;align-items:center;gap:10px;width:100%;padding:14px 12px;display:flex;box-shadow:inset 0 1px #ffffff0a}.img-infos{flex-shrink:0;width:20px;height:20px}.rain-icon{width:22px;height:22px}.detail-text{flex-direction:column;flex:1;align-items:flex-start;min-width:0;display:flex}.detail-value{color:var(--text-primary);font-size:15px;font-weight:700}.detail-label{color:var(--text-muted);white-space:nowrap;font-size:12px}.sun-times{border-top:1px solid #ffffff14;grid-template-columns:repeat(2,1fr);gap:12px;padding-top:18px;display:grid}.sun-time-item{background:var(--card-bg-soft);border:1px solid #ffffff14;border-radius:18px;justify-content:center;align-items:center;gap:10px;padding:12px;display:flex}.sun-time-text{color:var(--text-primary);font-size:14px}.more-info-hint{text-align:center;color:var(--text-muted);border-top:1px solid #ffffff14;margin-top:20px;padding-top:12px;font-size:12px}.update-time{color:var(--text-soft);margin-top:-2px;font-size:12px}@media (width<=480px){#card{padding:18px}#temperature{font-size:52px}}.hourly-forecast-card{width:var(--card-width);background:var(--card-bg);box-shadow:var(--shadow);border-radius:var(--border-radius);border:1px solid var(--card-border);margin:0 auto;padding:18px}.hourly-header{justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:16px;display:flex}.hourly-title{color:var(--text-primary);font-size:20px}.hourly-subtitle{color:var(--text-muted);font-size:12px}.hourly-list{scrollbar-width:thin;scrollbar-color:#0000004d transparent;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;will-change:transform;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:pan-x;gap:12px;padding-bottom:6px;display:flex;overflow-x:auto}.hourly-list:active{cursor:grabbing}.hourly-list:focus-visible{outline-offset:4px;border-radius:20px;outline:2px solid #4db4ff8c}.hourly-list::-webkit-scrollbar{height:6px}.hourly-list::-webkit-scrollbar-track{background:0 0}.hourly-list::-webkit-scrollbar-thumb{background-color:#0000004d;border-radius:3px}.hourly-item{background:var(--card-bg-strong);border:1px solid #ffffff14;border-radius:18px;flex-direction:column;align-items:center;min-width:86px;padding:12px 10px;display:flex}.hour{color:var(--text-muted);text-align:center;align-items:center;min-height:32px;font-size:13px;display:flex}.hourly-icon{width:40px;height:40px}.hourly-temp{color:var(--text-primary);font-size:16px;font-weight:700}@media (width<=480px){.hourly-header{flex-direction:column;align-items:flex-start}}.modal-overlay{z-index:9999;cursor:pointer;isolation:isolate;opacity:0;background:#020a13c7;justify-content:center;align-items:center;padding:20px;transition:opacity .18s;animation:.3s fadeIn;display:flex;position:fixed;inset:0}.modal-overlay.is-visible{opacity:1}.modal-content{background:var(--card-bg);border-radius:var(--border-radius);padding:var(--spacing-lg);width:90%;max-width:720px;max-height:min(88vh,760px);box-shadow:var(--shadow);border:1px solid var(--card-border);cursor:default;opacity:1;filter:none;isolation:isolate;opacity:0;transition:transform .22s,opacity .22s;animation:.3s slideUp;position:relative;overflow-y:auto;transform:translateY(18px)scale(.98)}.modal-overlay.is-visible .modal-content{opacity:1;transform:translate(0,0)scale(1)}.modal-close{right:var(--spacing-md);top:var(--spacing-md);cursor:pointer;color:var(--text-primary);background:#ffffff0f;border:1px solid #ffffff14;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:24px;transition:background-color .2s,transform .2s,border-color .2s;display:flex;position:absolute}.modal-close:hover{background-color:#ffffff1f;border-color:#ffffff29}.modal-close:active{transform:scale(.96)}.modal-content h3{color:var(--text-primary);text-align:left;margin-bottom:10px;font-size:30px}.modal-header{margin-bottom:26px;padding-right:52px}.modal-badge{color:#d9efff;letter-spacing:.08em;text-transform:uppercase;background:#4db4ff24;border:1px solid #4db4ff2e;border-radius:999px;align-items:center;margin-bottom:14px;padding:7px 10px;font-size:11px;font-weight:700;display:inline-flex}.modal-subtitle{color:var(--text-muted);max-width:52ch;margin:0;font-size:14px;line-height:1.5}.modal-details{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;display:grid}.detail-group{background:var(--card-bg-strong);border-radius:var(--border-radius);border:1px solid #ffffff14;padding:20px;transition:transform .2s;box-shadow:inset 0 1px #ffffff0a}.detail-group:hover{transform:translateY(-2px)}.detail-group h4{color:var(--text-primary);border-bottom:1px solid #ffffff14;margin-bottom:14px;padding-bottom:10px;font-size:18px}.detail-group p{color:var(--text-muted);border-bottom:1px solid #ffffff0f;justify-content:space-between;align-items:baseline;gap:12px;margin:0;padding:11px 0;font-size:15px;display:flex}.detail-group p:last-child{border-bottom:none;padding-bottom:0}.detail-group p span{max-width:65%}.detail-group p strong{color:var(--text-primary);font-size:15px}.modal-footer{color:var(--text-soft);text-align:center;border-top:1px solid #ffffff14;margin-top:18px;padding-top:14px;font-size:12px}.modal-content::-webkit-scrollbar{width:10px}.modal-content::-webkit-scrollbar-track{background:0 0}.modal-content::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:999px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (width<=480px){.modal-content{padding:var(--spacing-md);width:95%}.modal-content h3{font-size:24px}.modal-details{grid-template-columns:1fr}.detail-group{padding:var(--spacing-sm)}.detail-group p{flex-direction:column;align-items:flex-start;gap:4px}.detail-group p span{max-width:100%}}.location-prompt{width:var(--card-width);background:var(--card-bg);box-shadow:var(--shadow);border-radius:var(--border-radius);border:1px solid var(--card-border);margin:0 auto;padding:24px 20px}.location-prompt-content{align-items:center;gap:var(--spacing-sm);flex-direction:column;display:flex}.prompt-badge{background:var(--accent-soft);color:var(--accent);text-transform:uppercase;letter-spacing:.08em;border-radius:999px;padding:7px 10px;font-size:11px;font-weight:700;display:inline-flex}.location-prompt-content h2{margin-bottom:var(--spacing-sm);color:var(--text-primary);font-size:24px;font-weight:600}.location-prompt-content p{margin-bottom:var(--spacing-sm);color:var(--text-primary);text-align:center;font-size:18px}.location-prompt-content small{color:var(--text-muted);text-align:center;font-size:14px}.not-found-card{width:var(--card-width);background:var(--card-bg);box-shadow:var(--shadow);border-radius:var(--border-radius);text-align:center;border:1px solid var(--card-border);margin:0 auto;padding:24px 20px}.not-found-badge{color:#b42348;text-transform:uppercase;letter-spacing:.08em;background:#f43f5e1f;border-radius:999px;margin-bottom:10px;padding:7px 10px;font-size:11px;font-weight:700;display:inline-flex}.not-found-icon{width:150px;height:150px;margin-bottom:var(--spacing-md)}.not-found-title{margin-bottom:var(--spacing-sm);color:var(--text-primary);font-size:24px}.not-found-message{color:var(--text-muted);font-size:16px}.not-found-tip{color:var(--text-soft);margin-top:12px;font-size:13px}