* { margin:0; padding:0; box-sizing:border-box; font-family:"Poppins",Arial,sans-serif; }
body { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:24px 20px; color:#fff; background:linear-gradient(#00000035,#00000060),url(images/1.png) center/cover fixed; }
.search-box { position:relative; order:1; width:min(100%,480px); height:58px; display:flex; align-items:center; border:1px solid #ffffff70; border-radius:14px; background:#14141eaa; backdrop-filter:blur(16px); z-index:10; }
.search-box>i { font-size:26px; padding-left:16px; flex-shrink:0; }
.search-box input { width:100%; min-width:0; height:100%; padding:0 10px; background:transparent; border:0; color:#fff; font-size:18px; outline:none; }
.search-box input::placeholder { color:#ffffffa0; }
.search-box:focus-within { border-color:white; box-shadow:0 0 0 3px #ffffff12; }
.search-box>button { width:52px; height:100%; flex-shrink:0; border:0; border-radius:0 14px 14px 0; background:transparent; color:#fff; font-size:26px; cursor:pointer; }
.search-box>button:hover { background:#ffffff15; }
.search-suggestions { position:absolute; top:calc(100% + 8px); left:0; width:100%; max-height:220px; overflow-y:auto; background:#161622f5; border:1px solid #ffffff40; border-radius:12px; box-shadow:0 12px 32px #00000050; display:none; }
.search-suggestions.active { display:block; }
.suggestion-item { width:100%; border:0; background:transparent; color:#fff; text-align:left; padding:12px 16px; cursor:pointer; display:flex; flex-direction:column; gap:4px; }
.suggestion-item:hover { background:#ffffff15; }
.suggestion-item+.suggestion-item { border-top:1px solid #ffffff15; }
.suggestion-city { font-size:14px; font-weight:600; }
.suggestion-meta { font-size:11px; color:#ffffffa0; }
.unit-toggle { order:0; display:flex; align-self:center; gap:8px; width:min(100%,480px); justify-content:flex-end; }
.unit-btn { background:#15151c99; border:1px solid #ffffff55; color:#fff; padding:8px 16px; border-radius:9px; cursor:pointer; font-size:13px; font-weight:600; backdrop-filter:blur(10px); }
.unit-btn:hover { background:#ffffff30; }
.unit-btn.active { background:#fff; color:#151515; }
.container { order:2; position:relative; display:none; width:min(100%,480px); height:auto; padding:24px; border:1px solid #ffffff50; border-radius:20px; background:#15151a80; backdrop-filter:blur(20px); box-shadow:0 16px 50px #00000040; }
.container.show { display:block; }
.city-hide { display:none; }
.last-updated { font-size:11px; color:#ffffffa0; text-align:center; margin:0 0 8px; }
.weather-box,.weather-details,.weather-extra-details,.weather-more-details,.not-found { display:none; }
.weather-box.active { display:block; }
.weather-box { text-align:center; margin:10px 0 28px; }
.weather-box img { width:180px; max-width:60%; display:block; margin:0 auto 10px; }
.weather-box .temp { font-size:64px; line-height:1.1; font-weight:600; letter-spacing:-3px; }
.weather-box .temp span { font-size:23px; letter-spacing:0; margin-left:6px; vertical-align:top; line-height:1.8; }
.weather-box .description { font-size:18px; text-transform:capitalize; margin-top:8px; }
.weather-details.active,.weather-extra-details.active,.weather-more-details.active { display:grid; }
.weather-details,.weather-extra-details { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:14px; }
.weather-more-details { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:14px; }
.weather-details>div,.weather-extra-details>div,.weather-more-details>div { min-width:0; display:flex; align-items:center; gap:10px; padding:16px 12px; border:1px solid #ffffff20; border-radius:12px; background:#00000025; }
.weather-details i,.weather-extra-details i { font-size:28px; color:#ffffffc0; flex-shrink:0; }
.weather-details .text,.weather-extra-details .text { min-width:0; }
.weather-details span,.weather-extra-details span { font-size:16px; font-weight:500; line-height:1.5; }
.weather-details p,.weather-extra-details p,.weather-more-details p { color:#ffffffa0; font-size:11px; line-height:1.5; margin-top:3px; }
.weather-more-details>div { flex-direction:column; justify-content:flex-start; text-align:center; gap:8px; padding:16px 6px; }
.weather-more-details i { font-size:26px; color:#ffffffc0; }
.weather-more-details span { font-size:13px; line-height:1.5; white-space:nowrap; }
.not-found.active { display:block; text-align:center; padding:20px 0; }
.not-found img { width:65%; max-width:240px; }
.not-found p { font-size:18px; line-height:1.5; margin-top:18px; }
.loading-indicator { display:none; position:absolute; top:16px; right:16px; }
.loading-indicator.active { display:block; }
.spinner { border:3px solid #ffffff30; border-top-color:#fff; border-radius:50%; width:24px; height:24px; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.recent-searches { order:3; display:none; width:min(100%,480px); background:#11111b99; backdrop-filter:blur(12px); border:1px solid #ffffff25; padding:18px; border-radius:14px; gap:12px; }
.recent-searches.show { display:flex; flex-direction:column; }
.recent-searches p { font-size:11px; color:#ffffffa0; }
.recent-list { display:flex; flex-wrap:wrap; gap:8px; }
.recent-btn { background:#ffffff12; border:1px solid #ffffff30; color:#fff; padding:8px 12px; border-radius:8px; cursor:pointer; font-size:12px; }
.recent-btn:hover { background:#ffffff25; }
.footer { order:4; width:min(100%,480px); text-align:center; padding:8px 0; color:#ffffff90; font-size:11px; line-height:1.7; }
button:focus-visible { outline:2px solid #fff; outline-offset:3px; }
@media(max-width:480px) { body { padding:20px 14px; gap:14px; } .container { padding:20px 16px; } .weather-details,.weather-extra-details { gap:10px; } .weather-details>div,.weather-extra-details>div { gap:8px; padding:14px 10px; } .weather-details i,.weather-extra-details i { font-size:24px; } .weather-details span,.weather-extra-details span { font-size:14px; } .weather-box .temp { font-size:58px; } .weather-box img { width:155px; } }
@media(max-width:350px) { .weather-details>div,.weather-extra-details>div { flex-direction:column; align-items:flex-start; } .weather-more-details { grid-template-columns:1fr; } .weather-more-details>div { flex-direction:row; justify-content:flex-start; text-align:left; padding:12px; } }
@media(prefers-reduced-motion:reduce) { .spinner { animation:none; } }

/* Subtle glass panels keep the Earth background visible. */
.search-box,.container,.recent-searches {
    background:rgba(15,15,22,.2);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    box-shadow:none;
}
.weather-details>div,.weather-extra-details>div,.weather-more-details>div {
    background:transparent;
}
.unit-btn,.recent-btn { background:transparent; backdrop-filter:none; }
.unit-btn.active { background:#ffffff20; color:#fff; }