*,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 :root {
     --bg-from: #0a0e1a;
     --bg-to: #1a2340;
     --accent: #7eb8f7;
     --accent2: #c9e3ff;
     --text: #e8f0ff;
     --text-muted: rgba(200, 220, 255, 0.55);
     --card-bg: rgba(255, 255, 255, 0.05);
     --card-border: rgba(255, 255, 255, 0.1);
     --transition-speed: 1.2s;
 }

 body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
     background: linear-gradient(160deg, var(--bg-from) 0%, var(--bg-to) 100%);
     min-height: 100vh;
     color: var(--text);
     transition: background var(--transition-speed) ease;
     overflow-x: hidden;
 }

 /* DYNAMIC ATMOSPHERIC LAYERS */
 .atmo-layer {
     position: fixed;
     inset: 0;
     pointer-events: none;
     z-index: 0;
     transition: opacity 1.5s ease;
 }

 /* Sun layer for day */
 #sun-layer {
     position: fixed;
     inset: 0;
     pointer-events: none;
     z-index: 0;
     opacity: 0;
     transition: opacity 1.5s ease;
 }

 .sun-glow {
     position: absolute;
     top: 10%;
     right: 5%;
     width: 150px;
     height: 150px;
     background: radial-gradient(circle, rgba(255, 214, 94, 0.6) 0%, rgba(255, 214, 94, 0) 70%);
     border-radius: 50%;
     animation: pulse 4s ease-in-out infinite;
 }

 @keyframes pulse {

     0%,
     100% {
         transform: scale(1);
         opacity: 0.6;
     }

     50% {
         transform: scale(1.1);
         opacity: 0.8;
     }
 }

 /* Moon layer for night */
 #moon-layer {
     position: fixed;
     inset: 0;
     pointer-events: none;
     z-index: 0;
     opacity: 0;
     transition: opacity 1.5s ease;
 }

 .moon-glow {
     position: absolute;
     top: 10%;
     right: 5%;
     width: 120px;
     height: 120px;
     background: radial-gradient(circle, rgba(200, 210, 255, 0.5) 0%, rgba(200, 210, 255, 0) 70%);
     border-radius: 50%;
 }

 .moon-crater {
     position: absolute;
     background: rgba(180, 190, 220, 0.3);
     border-radius: 50%;
 }

 #stars-layer {
     opacity: 0;
 }

 #clouds-layer {
     opacity: 0;
 }

 #rain-layer {
     opacity: 0;
 }

 #snow-layer {
     opacity: 0;
 }

 #fog-layer {
     opacity: 0;
 }

 .star {
     position: absolute;
     border-radius: 50%;
     background: white;
     animation: twinkle var(--d, 3s) var(--delay, 0s) infinite alternate;
 }

 @keyframes twinkle {
     from {
         opacity: 0.2;
         transform: scale(1);
     }

     to {
         opacity: 0.9;
         transform: scale(1.3);
     }
 }

 .cloud-shape {
     position: absolute;
     background: rgba(255, 255, 255, 0.15);
     border-radius: 50px;
     filter: blur(12px);
     animation: drift var(--d, 40s) var(--delay, 0s) linear infinite;
 }

 @keyframes drift {
     from {
         transform: translateX(-200px);
     }

     to {
         transform: translateX(calc(100vw + 200px));
     }
 }

 .raindrop {
     position: absolute;
     width: 2px;
     background: linear-gradient(to bottom, transparent, rgba(150, 200, 255, 0.7));
     animation: fall var(--d, 0.8s) var(--delay, 0s) linear infinite;
     border-radius: 2px;
 }

 @keyframes fall {
     from {
         transform: translateY(-30px);
         opacity: 0;
     }

     10% {
         opacity: 1;
     }

     to {
         transform: translateY(110vh);
         opacity: 0.3;
     }
 }

 .snowflake {
     position: absolute;
     color: rgba(255, 255, 255, 0.9);
     font-size: var(--size, 14px);
     animation: snowfall var(--d, 6s) var(--delay, 0s) linear infinite;
     user-select: none;
 }

 @keyframes snowfall {
     0% {
         transform: translateY(-20px) translateX(0) rotate(0deg);
         opacity: 0;
     }

     10% {
         opacity: 1;
     }

     90% {
         opacity: 0.6;
     }

     100% {
         transform: translateY(110vh) translateX(var(--drift, 30px)) rotate(360deg);
         opacity: 0;
     }
 }

 .fog-cloud {
     position: absolute;
     background: rgba(180, 190, 200, 0.08);
     border-radius: 50%;
     filter: blur(20px);
     animation: fogFloat var(--d, 20s) var(--delay, 0s) ease-in-out infinite;
 }

 @keyframes fogFloat {

     0%,
     100% {
         transform: translateX(0) scale(1);
         opacity: 0.3;
     }

     50% {
         transform: translateX(50px) scale(1.2);
         opacity: 0.5;
     }
 }

 /* LAYOUT */
 .page-wrap {
     position: relative;
     z-index: 1;
     max-width: 1000px;
     margin: 0 auto;
     padding: 32px 24px 80px;
     min-height: 100vh;
 }

 header {
     text-align: center;
     margin-bottom: 42px;
 }

 .logo {
     font-family: 'Georgia', 'Times New Roman', serif;
     font-size: clamp(2.2rem, 5vw, 3.2rem);
     font-weight: 900;
     letter-spacing: -0.02em;
     background: linear-gradient(135deg, var(--accent2) 0%, var(--accent) 60%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     line-height: 1;
     margin-bottom: 6px;
 }

 .tagline {
     font-size: 0.78rem;
     letter-spacing: 0.25em;
     text-transform: uppercase;
     color: var(--text-muted);
 }

 /* SEARCH */
 .search-row {
     display: flex;
     gap: 12px;
     max-width: 560px;
     margin: 0 auto 16px;
 }

 .search-input {
     flex: 1;
     background: var(--card-bg);
     border: 1px solid var(--card-border);
     border-radius: 16px;
     padding: 14px 20px;
     font-family: inherit;
     font-size: 1rem;
     color: var(--text);
     outline: none;
     backdrop-filter: blur(10px);
     transition: border-color 0.3s, box-shadow 0.3s;
 }

 .search-input::placeholder {
     color: var(--text-muted);
 }

 .search-input:focus {
     border-color: var(--accent);
     box-shadow: 0 0 0 3px rgba(126, 184, 247, 0.2);
 }

 .search-btn {
     background: var(--accent);
     color: #071230;
     border: none;
     border-radius: 16px;
     padding: 14px 28px;
     font-family: inherit;
     font-size: 0.95rem;
     font-weight: 600;
     cursor: pointer;
     transition: transform 0.15s, box-shadow 0.2s;
     white-space: nowrap;
 }

 .search-btn:hover {
     transform: translateY(-1px);
     box-shadow: 0 8px 22px rgba(126, 184, 247, 0.4);
 }

 .search-btn:active {
     transform: translateY(1px);
 }

 .search-btn:disabled {
     opacity: 0.6;
     cursor: not-allowed;
     transform: none;
 }

 /* UNIT TOGGLE */
 .unit-toggle {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 14px;
     margin-bottom: 42px;
     font-size: 0.9rem;
     color: var(--text-muted);
 }

 .toggle-pill {
     position: relative;
     width: 56px;
     height: 30px;
     background: var(--card-bg);
     border: 1px solid var(--card-border);
     border-radius: 30px;
     cursor: pointer;
     transition: background 0.2s;
 }

 .toggle-pill.celsius {
     background: rgba(126, 184, 247, 0.25);
     border-color: var(--accent);
 }

 .toggle-knob {
     position: absolute;
     top: 3px;
     left: 3px;
     width: 22px;
     height: 22px;
     background: var(--accent);
     border-radius: 50%;
     transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 }

 .toggle-pill.celsius .toggle-knob {
     transform: translateX(26px);
 }

 .unit-label {
     font-weight: 500;
     transition: color 0.2s;
     cursor: pointer;
 }

 .unit-label.active {
     color: var(--accent);
     font-weight: 600;
 }

 /* LOADING & ERROR */
 #loading {
     display: none;
     flex-direction: column;
     align-items: center;
     gap: 16px;
     padding: 60px 0;
 }

 #loading.visible {
     display: flex;
 }

 .spinner {
     width: 44px;
     height: 44px;
     border: 3px solid var(--card-border);
     border-top-color: var(--accent);
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
 }

 @keyframes spin {
     to {
         transform: rotate(360deg);
     }
 }

 #error-msg {
     display: none;
     text-align: center;
     background: rgba(255, 90, 70, 0.15);
     border: 1px solid rgba(255, 110, 90, 0.4);
     border-radius: 20px;
     padding: 14px 20px;
     max-width: 500px;
     margin: 0 auto 28px;
     font-size: 0.9rem;
     color: #ffb4a2;
 }

 #error-msg.visible {
     display: block;
 }

 /* WEATHER CARD */
 #weather-display {
     display: none;
 }

 #weather-display.visible {
     display: block;
     animation: fadeUp 0.5s ease;
 }

 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(18px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .current-card {
     background: var(--card-bg);
     border: 1px solid var(--card-border);
     backdrop-filter: blur(18px);
     border-radius: 32px;
     padding: 32px 36px;
     margin-bottom: 28px;
     display: grid;
     grid-template-columns: 1fr auto;
     align-items: start;
     gap: 28px;
 }

 .current-location {
     font-family: 'Georgia', 'Times New Roman', serif;
     font-size: clamp(1.6rem, 4vw, 2.5rem);
     font-weight: 700;
     line-height: 1.2;
     margin-bottom: 6px;
 }

 .current-date {
     font-size: 0.7rem;
     letter-spacing: 0.2em;
     text-transform: uppercase;
     color: var(--text-muted);
     margin-bottom: 20px;
 }

 .current-condition {
     font-size: 1.2rem;
     font-weight: 500;
     color: var(--accent2);
     margin-bottom: 12px;
 }

 .current-details {
     display: flex;
     flex-wrap: wrap;
     gap: 22px;
     margin-top: 12px;
 }

 .detail-item {
     display: flex;
     flex-direction: column;
     gap: 3px;
 }

 .detail-label {
     font-size: 0.65rem;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     color: var(--text-muted);
 }

 .detail-value {
     font-size: 0.9rem;
     font-weight: 500;
 }

 .temp-display {
     text-align: right;
 }

 .temp-big {
     font-family: 'Georgia', 'Times New Roman', serif;
     font-size: clamp(4rem, 10vw, 7rem);
     font-weight: 900;
     line-height: 1;
     color: var(--accent);
     letter-spacing: -0.03em;
 }

 .temp-feels {
     font-size: 0.8rem;
     color: var(--text-muted);
     margin-top: 8px;
 }

 .weather-icon-main {
     font-size: 3.2rem;
     margin-top: 12px;
     text-align: right;
 }

 /* GIF SECTION */
 #gif-section {
     margin-bottom: 28px;
     border-radius: 24px;
     overflow: hidden;
     display: none;
     box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
 }

 #gif-section.visible {
     display: block;
 }

 #gif-section img {
     width: 100%;
     max-height: 210px;
     object-fit: cover;
     display: block;
 }

 /* FORECAST & HOURLY */
 .forecast-title {
     font-family: 'Georgia', 'Times New Roman', serif;
     font-size: 1rem;
     font-weight: 400;
     font-style: italic;
     color: var(--text-muted);
     margin-bottom: 14px;
     letter-spacing: 0.05em;
 }

 .forecast-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
     gap: 12px;
     margin-bottom: 36px;
 }

 .forecast-card {
     background: var(--card-bg);
     border: 1px solid var(--card-border);
     backdrop-filter: blur(8px);
     border-radius: 20px;
     padding: 14px 8px;
     text-align: center;
     transition: transform 0.2s, background 0.2s;
 }

 .forecast-card:hover {
     transform: translateY(-3px);
     background: rgba(255, 255, 255, 0.08);
 }

 .fc-day {
     font-size: 0.7rem;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     color: var(--text-muted);
     margin-bottom: 8px;
 }

 .fc-icon {
     font-size: 1.8rem;
     margin-bottom: 8px;
 }

 .fc-high {
     font-size: 1rem;
     font-weight: 700;
     color: var(--accent);
 }

 .fc-low {
     font-size: 0.8rem;
     color: var(--text-muted);
     margin-top: 3px;
 }

 .fc-precip {
     font-size: 0.7rem;
     color: #9ac9ff;
     margin-top: 6px;
 }

 .hourly-scroll {
     display: flex;
     gap: 10px;
     overflow-x: auto;
     padding-bottom: 12px;
     scrollbar-width: thin;
 }

 .hour-card {
     flex: 0 0 76px;
     background: var(--card-bg);
     border: 1px solid var(--card-border);
     backdrop-filter: blur(8px);
     border-radius: 18px;
     padding: 12px 6px;
     text-align: center;
 }

 .hc-time {
     font-size: 0.7rem;
     color: var(--text-muted);
     margin-bottom: 6px;
     font-weight: 500;
 }

 .hc-icon {
     font-size: 1.5rem;
     margin-bottom: 6px;
 }

 .hc-temp {
     font-size: 0.9rem;
     font-weight: 600;
 }

 @media (max-width: 620px) {
     .current-card {
         grid-template-columns: 1fr;
         padding: 24px;
     }

     .temp-display {
         text-align: left;
         margin-top: 8px;
     }

     .search-row {
         flex-direction: column;
     }
 }