@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap";:root{--font-sans: "Inter", system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, sfmono-regular, monospace;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--text-5xl: 3rem;--text-6xl: 3.75rem;--color-primary: #3b82f6;--color-primary-hover: #2563eb;--color-primary-light: #60a5fa;--color-surface-100: #0d1117;--color-surface-200: #161b22;--color-surface-300: #21262d;--color-surface-400: #30363d;--color-text-primary: #f0f6fc;--color-text-secondary: #8b949e;--color-text-tertiary: #6e7681;--color-accent-blue: #58a6ff;--color-accent-cyan: #39d5ff;--color-accent-green: #3fb950;--color-accent-yellow: #d29922;--color-accent-orange: #db6d28;--color-accent-red: #f85149;--color-accent-purple: #a371f7;--color-success: #3fb950;--color-warning: #d29922;--color-danger: #f85149;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgb(0 0 0 / .3);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .4);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .4);--transition-fast: .15s ease;--transition-normal: .2s ease}.light{--color-surface-100: #f6f8fa;--color-surface-200: #fff;--color-surface-300: #d0d7de;--color-surface-400: #afb8c1;--color-text-primary: #24292f;--color-text-secondary: #57606a;--color-text-tertiary: #6e7781;--shadow-sm: 0 1px 2px rgb(0 0 0 / .1);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-family:var(--font-sans);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background-color:var(--color-surface-100);color:var(--color-text-primary);min-height:100vh}a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer}img,svg{display:block;max-width:100%}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-surface-200)}::-webkit-scrollbar-thumb{background:var(--color-surface-400);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-text-tertiary)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap;border:0}.text-center{text-align:center}.text-primary{color:var(--color-text-primary)}.text-secondary{color:var(--color-text-secondary)}.text-tertiary{color:var(--color-text-tertiary)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:500;border:none;border-radius:var(--radius-lg);transition:all var(--transition-fast)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--color-primary);color:#fff}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-hover)}.btn-secondary{background-color:var(--color-surface-300);color:var(--color-text-primary)}.btn-secondary:hover:not(:disabled){background-color:var(--color-surface-400)}.btn-ghost{background-color:transparent;color:var(--color-text-secondary)}.btn-ghost:hover:not(:disabled){background-color:var(--color-surface-300);color:var(--color-text-primary)}.btn-success{background-color:var(--color-success);color:#fff}.btn-success:hover:not(:disabled){background-color:#2ea043}.input{width:100%;padding:var(--space-2) var(--space-4);font-family:var(--font-sans);font-size:var(--text-base);background-color:var(--color-surface-300);border:1px solid var(--color-surface-400);border-radius:var(--radius-lg);color:var(--color-text-primary);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #3b82f633;outline:none}.input::placeholder{color:var(--color-text-tertiary)}.card{background-color:var(--color-surface-200);border-radius:var(--radius-xl);padding:var(--space-6)}.card-hover{transition:transform var(--transition-normal),box-shadow var(--transition-normal)}.card-hover:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.tab-list{display:flex;gap:var(--space-2);padding:var(--space-1);background-color:var(--color-surface-300);border-radius:var(--radius-lg)}.tab{padding:var(--space-1) var(--space-4);font-size:var(--text-sm);font-weight:500;color:var(--color-text-secondary);background:transparent;border:none;border-radius:var(--radius-md);transition:all var(--transition-fast)}.tab:hover{color:var(--color-text-primary)}.tab.active{background-color:var(--color-surface-200);color:var(--color-text-primary)}.skeleton{background:linear-gradient(90deg,var(--color-surface-300) 25%,var(--color-surface-400) 50%,var(--color-surface-300) 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s ease-in-out infinite;border-radius:var(--radius-md)}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-down{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fade-in .2s ease-out}.animate-slide-down{animation:slide-down .2s ease-out}.animate-slide-up{animation:slide-up .2s ease-out}.page-loader{min-height:60vh;display:flex;align-items:center;justify-content:center}.page-loader-content{display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}.page-loader-icon{color:var(--color-primary);animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.page-loader-text{color:var(--color-text-secondary);font-size:var(--text-sm)}.header{position:-webkit-sticky;position:sticky;top:0;z-index:100;background-color:#0d1117f2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-surface-300)}.light .header{background-color:#f6f8faf2}.header-container{max-width:1280px;margin:0 auto;padding:0 var(--space-4)}.header-content{display:flex;align-items:center;justify-content:space-between;height:64px}.logo{display:flex;align-items:center;gap:var(--space-2);text-decoration:none}.logo-icon-wrapper{position:relative}.logo-icon{color:var(--color-primary);transition:transform var(--transition-fast)}.logo:hover .logo-icon{transform:scale(1.1)}.logo-accent{position:absolute;right:-4px;top:-4px;color:var(--color-accent-yellow)}.logo-text{font-size:var(--text-xl);font-weight:600;color:var(--color-text-primary)}.desktop-nav{display:none;align-items:center;gap:var(--space-1)}@media(min-width:768px){.desktop-nav{display:flex}}.nav-link{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-lg);font-size:var(--text-sm);font-weight:500;color:var(--color-text-secondary);text-decoration:none;transition:all var(--transition-fast)}.nav-link:hover{color:var(--color-text-primary);background-color:var(--color-surface-200)}.nav-link.active{color:var(--color-text-primary);background-color:var(--color-surface-300)}.header-actions{display:flex;align-items:center;gap:var(--space-2)}.unit-toggle{display:none;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);border-radius:var(--radius-lg);background-color:var(--color-surface-200);border:none;font-size:var(--text-sm);font-weight:500;color:var(--color-text-secondary);cursor:pointer;transition:background-color var(--transition-fast)}.unit-toggle:hover{background-color:var(--color-surface-300)}@media(min-width:640px){.unit-toggle{display:flex}}.icon-btn{display:flex;align-items:center;justify-content:center;padding:var(--space-2);border-radius:var(--radius-lg);background-color:var(--color-surface-200);border:none;cursor:pointer;transition:background-color var(--transition-fast)}.icon-btn:hover{background-color:var(--color-surface-300)}.icon-btn svg{color:var(--color-text-secondary)}.icon-btn-hidden-mobile{display:none}@media(min-width:640px){.icon-btn-hidden-mobile{display:flex}}.theme-icon-sun{color:var(--color-accent-yellow)}.theme-icon-moon{color:var(--color-accent-purple)}.user-menu{position:relative}.user-menu-trigger{display:flex;align-items:center;gap:var(--space-2);padding:6px;padding-right:var(--space-3);border-radius:var(--radius-lg);background-color:var(--color-surface-200);border:none;cursor:pointer;transition:background-color var(--transition-fast)}.user-menu-trigger:hover{background-color:var(--color-surface-300)}.user-avatar{width:28px;height:28px;border-radius:var(--radius-full);background-color:var(--color-primary);display:flex;align-items:center;justify-content:center}.user-avatar svg{color:#fff}.user-menu-chevron{color:var(--color-text-secondary)}.user-menu-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40}.user-menu-dropdown{position:absolute;right:0;margin-top:var(--space-2);width:192px;background-color:var(--color-surface-200);border:1px solid var(--color-surface-300);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);z-index:50;overflow:hidden;animation:slide-down .2s ease-out}.user-menu-header{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-surface-300)}.user-email{font-size:var(--text-sm);font-weight:500;color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-menu-items{padding:var(--space-1) 0}.user-menu-link{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-size:var(--text-sm);color:var(--color-text-secondary);text-decoration:none;transition:all var(--transition-fast)}.user-menu-link:hover{background-color:var(--color-surface-300);color:var(--color-text-primary)}.user-menu-btn{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-2) var(--space-4);font-size:var(--text-sm);color:var(--color-danger);background:none;border:none;cursor:pointer;transition:background-color var(--transition-fast)}.user-menu-btn:hover{background-color:var(--color-surface-300)}.sign-in-btn{display:none;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-lg);background-color:var(--color-primary);border:none;font-size:var(--text-sm);font-weight:500;color:#fff;text-decoration:none;cursor:pointer;transition:background-color var(--transition-fast)}.sign-in-btn:hover{background-color:var(--color-primary-hover)}@media(min-width:640px){.sign-in-btn{display:flex}}.mobile-menu-btn{display:flex;padding:var(--space-2);border-radius:var(--radius-lg);background-color:var(--color-surface-200);border:none;cursor:pointer;transition:background-color var(--transition-fast)}.mobile-menu-btn:hover{background-color:var(--color-surface-300)}.mobile-menu-btn svg{color:var(--color-text-primary)}@media(min-width:768px){.mobile-menu-btn{display:none}}.mobile-nav{display:block;padding:var(--space-4) 0;border-top:1px solid var(--color-surface-300);animation:slide-down .2s ease-out}@media(min-width:768px){.mobile-nav{display:none}}.mobile-nav-links{display:flex;flex-direction:column;gap:var(--space-1)}.mobile-nav-link{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);font-size:var(--text-sm);font-weight:500;color:var(--color-text-secondary);text-decoration:none;transition:all var(--transition-fast)}.mobile-nav-link:hover{color:var(--color-text-primary);background-color:var(--color-surface-200)}.mobile-nav-link.active{color:var(--color-text-primary);background-color:var(--color-surface-300)}.mobile-nav-actions{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);margin-top:var(--space-2);border-top:1px solid var(--color-surface-300)}.mobile-toggle-btn{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--space-2);border-radius:var(--radius-lg);background-color:var(--color-surface-200);border:none;font-size:var(--text-sm);font-weight:500;color:var(--color-text-secondary);cursor:pointer;transition:background-color var(--transition-fast)}.mobile-toggle-btn:hover{background-color:var(--color-surface-300)}.mobile-sign-in{display:flex;align-items:center;justify-content:center;gap:var(--space-2);margin:var(--space-2) var(--space-4) 0;padding:var(--space-3);border-radius:var(--radius-lg);background-color:var(--color-primary);font-size:var(--text-sm);font-weight:500;color:#fff;text-decoration:none;transition:background-color var(--transition-fast)}.mobile-sign-in:hover{background-color:var(--color-primary-hover)}.app-layout{min-height:100vh;background-color:var(--color-surface-100)}.dashboard{max-width:1280px;margin:0 auto;padding:var(--space-6) var(--space-4)}.dashboard-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6)}.location-display{display:flex;align-items:center;gap:var(--space-2);color:var(--color-text-secondary)}.location-display svg{flex-shrink:0}.location-name{font-weight:500;color:var(--color-text-primary)}.search-actions{display:flex;align-items:center;gap:var(--space-2)}.locate-btn{padding:var(--space-2)}.spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.search-container,.search-input-wrapper{position:relative}.search-icon{position:absolute;left:var(--space-3);top:50%;transform:translateY(-50%);color:var(--color-text-tertiary);pointer-events:none}.search-input{width:256px;padding-left:var(--space-10)}.search-dropdown{position:absolute;top:100%;left:0;right:0;margin-top:var(--space-2);background-color:var(--color-surface-200);border:1px solid var(--color-surface-300);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);overflow:hidden;z-index:50;animation:slide-down .2s ease-out}.search-result{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);text-align:left;background:none;border:none;color:var(--color-text-primary);font-size:var(--text-sm);cursor:pointer;transition:background-color var(--transition-fast)}.search-result:hover{background-color:var(--color-surface-300)}.search-result svg{color:var(--color-text-tertiary);flex-shrink:0}.time-tabs{display:flex;align-items:center;gap:var(--space-6);margin-bottom:var(--space-6)}.time-tab{background:none;border:none;font-size:var(--text-base);font-weight:500;color:var(--color-text-tertiary);cursor:pointer;transition:color var(--transition-fast)}.time-tab:hover{color:var(--color-text-secondary)}.time-tab.active{color:var(--color-text-primary)}.tab-spacer{margin-left:auto}.bento-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--space-4);animation:fade-in .3s ease-out}.col-3{grid-column:span 3}.col-6{grid-column:span 6}.col-12{grid-column:span 12}@media(max-width:768px){.col-3,.col-6{grid-column:span 12}}.current-weather{display:flex;flex-direction:column;min-height:320px}.current-weather-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-1)}.current-day{font-size:var(--text-sm);font-weight:500;color:var(--color-text-secondary)}.current-time{font-size:var(--text-sm);color:var(--color-text-tertiary)}.current-weather-main{display:flex;align-items:flex-start;justify-content:space-between;margin-top:var(--space-4)}.temperature-display{font-family:var(--font-mono);font-size:var(--text-6xl);font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--color-text-primary)}.conditions-text{margin-top:var(--space-2);color:var(--color-text-secondary)}.weather-icon-large{color:var(--color-accent-yellow)}.current-weather-details{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--color-surface-300)}.details-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}.detail-item{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm)}.detail-label{color:var(--color-text-tertiary)}.detail-value{font-family:var(--font-mono);font-weight:500;color:var(--color-text-primary)}.sun-times{display:flex;align-items:center;justify-content:space-between;margin-top:var(--space-4);font-size:var(--text-xs);gap:var(--space-2);flex-wrap:wrap}.sun-time{display:flex;align-items:center;gap:var(--space-1);white-space:nowrap}.sun-time svg{flex-shrink:0}.sun-time .detail-label{display:none}.sun-time .detail-value{font-size:var(--text-xs)}.forecast-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-3)}@media(max-width:640px){.forecast-grid{grid-template-columns:repeat(3,1fr)}}.forecast-card{text-align:center;padding:var(--space-4);cursor:pointer}.forecast-card.today{background-color:var(--color-surface-300);box-shadow:inset 0 0 0 1px #3b82f64d}.forecast-day{font-size:var(--text-xs);color:var(--color-text-tertiary);margin-bottom:var(--space-2)}.forecast-icon{display:flex;justify-content:center;margin:var(--space-3) 0}.forecast-high{font-family:var(--font-mono);font-weight:600;color:var(--color-text-primary)}.forecast-low{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text-tertiary)}.forecast-precip{display:flex;align-items:center;justify-content:center;gap:2px;margin-top:var(--space-2);font-size:10px;color:var(--color-accent-blue)}.radar-card{padding:var(--space-3);display:flex;flex-direction:column;min-height:320px}.radar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3)}.radar-header h3{font-size:var(--text-sm);font-weight:500;color:var(--color-text-secondary)}.radar-live{font-size:10px;font-weight:600;color:var(--color-accent-green);background-color:#22c55e26;padding:2px 6px;border-radius:var(--radius-sm);letter-spacing:.05em}.radar-map-container{flex:1;min-height:280px;border-radius:var(--radius-lg);overflow:hidden;background-color:var(--color-surface-300)}.precip-card h3{font-size:var(--text-sm);font-weight:500;color:var(--color-text-secondary);margin-bottom:var(--space-4)}.precip-labels{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--color-text-tertiary);margin-bottom:var(--space-2)}.precip-bars{display:flex;align-items:flex-end;justify-content:space-between;height:120px;gap:var(--space-1);padding-bottom:var(--space-6)}.precip-bar-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;position:relative}.precip-bar-wrapper{width:100%;height:80px;display:flex;align-items:flex-end;margin-bottom:var(--space-2)}.precip-bar{width:100%;background:linear-gradient(to top,var(--color-accent-blue),rgb(88 166 255 / .6));border-radius:var(--radius-sm) var(--radius-sm) 0 0;transition:height .3s ease;min-height:4px}.precip-time{font-size:10px;color:var(--color-text-tertiary);white-space:nowrap}.precip-legend{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--color-text-tertiary);margin-top:var(--space-2)}.section-header{grid-column:span 12;margin-top:var(--space-2)}.section-title{font-size:var(--text-base);font-weight:600;color:var(--color-text-primary);margin-bottom:var(--space-4)}.stat-card h3{font-size:var(--text-sm);color:var(--color-text-tertiary);margin-bottom:var(--space-4)}.stat-content{display:flex;align-items:flex-end;justify-content:space-between}.stat-value{font-family:var(--font-mono);font-size:var(--text-3xl);font-weight:600;color:var(--color-text-primary)}.stat-unit{font-size:var(--text-base);font-weight:400;color:var(--color-text-secondary);margin-left:var(--space-1)}.stat-secondary{font-size:var(--text-sm);color:var(--color-text-tertiary);text-align:right}.stat-bar{height:4px;background-color:var(--color-surface-300);border-radius:var(--radius-full);margin-top:var(--space-4);overflow:hidden}.stat-bar-fill{height:100%;background-color:var(--color-accent-blue);border-radius:var(--radius-full);transition:width .5s ease}.uv-gauge{display:flex;justify-content:center}.uv-gauge-container{position:relative;width:128px;height:80px}.uv-gauge-svg{width:100%;height:100%}.uv-gauge-value{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:var(--space-1)}.uv-number{font-family:var(--font-mono);font-size:var(--text-2xl);font-weight:600;color:var(--color-text-primary)}.uv-label{font-size:var(--text-xs);color:var(--color-text-tertiary)}.humidity-content{display:flex;align-items:center;gap:var(--space-4)}.humidity-icon{color:var(--color-accent-blue)}.humidity-dew{font-size:var(--text-sm);color:var(--color-text-tertiary);margin-top:var(--space-1)}.visibility-content{display:flex;align-items:center;gap:var(--space-4)}.visibility-icon{color:var(--color-text-secondary)}.visibility-warning{font-size:var(--text-sm);color:var(--color-accent-yellow);margin-top:var(--space-1)}.cities-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}.cities-title{font-weight:600;color:var(--color-text-primary)}.cities-see-all{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-sm);color:var(--color-text-tertiary);background:none;border:none;cursor:pointer;transition:color var(--transition-fast)}.cities-see-all:hover{color:var(--color-primary)}.cities-list{display:flex;flex-direction:column;gap:var(--space-3)}.city-card{display:flex;align-items:center;justify-content:space-between;cursor:pointer}.city-country{font-size:var(--text-xs);color:var(--color-text-tertiary)}.city-name{font-weight:500;color:var(--color-text-primary)}.city-condition{font-size:var(--text-sm);color:var(--color-text-secondary)}.promo-card{position:relative;background:linear-gradient(135deg,var(--color-surface-300),var(--color-surface-200));overflow:hidden}.promo-content{position:relative;z-index:1}.promo-title{font-size:var(--text-lg);font-weight:600;color:var(--color-text-primary);margin-bottom:var(--space-2)}.promo-text{font-size:var(--text-sm);color:var(--color-text-secondary);margin-bottom:var(--space-4)}.promo-bg{position:absolute;right:0;top:0;width:192px;height:192px;opacity:.2;color:var(--color-text-secondary)}.welcome-overview{animation:fade-in .4s ease-out}.welcome-hero{display:flex;align-items:center;justify-content:space-between;padding:var(--space-8) var(--space-6);background:linear-gradient(135deg,var(--color-surface-200),var(--color-surface-300));border-radius:var(--radius-2xl);margin-bottom:var(--space-6);position:relative;overflow:hidden}.welcome-hero-content{position:relative;z-index:1;max-width:500px}.welcome-title{font-size:var(--text-3xl);font-weight:700;color:var(--color-text-primary);margin-bottom:var(--space-2)}.welcome-subtitle{font-size:var(--text-base);color:var(--color-text-secondary);margin-bottom:var(--space-6);line-height:1.6}.welcome-hero-graphic{position:absolute;right:var(--space-8);top:50%;transform:translateY(-50%)}.btn-lg{padding:var(--space-3) var(--space-6);font-size:var(--text-base)}.city-overview-card{padding:var(--space-4);transition:transform var(--transition-base),box-shadow var(--transition-base)}.city-overview-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.city-overview-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:var(--space-2)}.city-overview-name{font-size:var(--text-lg);font-weight:600;color:var(--color-text-primary)}.city-overview-state{font-size:var(--text-xs);color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.05em}.city-overview-temp{font-family:var(--font-mono);font-size:var(--text-4xl);font-weight:700;color:var(--color-text-primary);line-height:1;margin-bottom:var(--space-1)}.city-overview-condition{font-size:var(--text-sm);color:var(--color-text-secondary);margin-bottom:var(--space-2)}.city-overview-range{display:flex;gap:var(--space-3);font-size:var(--text-sm);font-family:var(--font-mono)}.city-high{color:var(--color-text-secondary)}.city-low{color:var(--color-text-tertiary)}.welcome-tips{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-8)}@media(max-width:768px){.welcome-tips{grid-template-columns:1fr}.welcome-hero{flex-direction:column;text-align:center}.welcome-hero-graphic{position:relative;right:auto;top:auto;transform:none;margin-top:var(--space-4)}}.tip-card{text-align:center;padding:var(--space-6);background-color:var(--color-surface-200);border-radius:var(--radius-xl)}.tip-card h3{font-size:var(--text-base);font-weight:600;color:var(--color-text-primary);margin:var(--space-3) 0 var(--space-2)}.tip-card p{font-size:var(--text-sm);color:var(--color-text-tertiary)}.loading-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--space-4)}.loading-card{background-color:var(--color-surface-200);border-radius:var(--radius-xl);padding:var(--space-6)}.skeleton-line{height:var(--space-4);margin-bottom:var(--space-4)}.skeleton-line.w-24{width:96px}.skeleton-line.w-32{width:128px}.skeleton-line.w-40{width:160px}.skeleton-line.h-8{height:32px}.skeleton-line.h-20{height:80px}.skeleton-line.h-40{height:160px}.error-card{text-align:center;padding:var(--space-12) var(--space-4)}.error-icon{color:var(--color-text-tertiary);margin:0 auto var(--space-4)}.error-title{font-size:var(--text-xl);font-weight:600;color:var(--color-text-primary);margin-bottom:var(--space-2)}.error-text{color:var(--color-text-secondary)}