:root{--color-sunny-primary: #FF8C42;--color-sunny-secondary: #FFB562;--color-sunny-bg: linear-gradient(135deg, #FFE5B4 0%, #FFD4A3 100%);--color-rainy-primary: #5B9BD5;--color-rainy-secondary: #7FB3D5;--color-rainy-bg: linear-gradient(135deg, #C5E1F5 0%, #B4D7F5 100%);--color-cloudy-primary: #9E9E9E;--color-cloudy-secondary: #BDBDBD;--color-cloudy-bg: linear-gradient(135deg, #E0E0E0 0%, #CFCFCF 100%);--color-snowy-primary: #81C7D4;--color-snowy-secondary: #9FD9E5;--color-snowy-bg: linear-gradient(135deg, #E8F5F7 0%, #D4EEF3 100%);--color-bg: #F9FAFB;--color-surface: #FFFFFF;--color-border: rgba(0, 0, 0, .08);--color-text-primary: #1F2937;--color-text-secondary: #6B7280;--color-text-tertiary: #9CA3AF;--color-accent: #6366F1;--color-success: #10B981;--color-warning: #F59E0B;--color-danger: #EF4444;--font-family: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 2rem;--font-size-4xl: 3rem;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .35s cubic-bezier(.4, 0, .2, 1);--glass-bg: rgba(255, 255, 255, .75);--glass-border: rgba(255, 255, 255, .3);--glass-blur: 20px;--theme-primary: var(--color-sunny-primary);--theme-secondary: var(--color-sunny-secondary);--theme-bg: var(--color-sunny-bg)}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family);background:var(--theme-bg);color:var(--color-text-primary);line-height:1.6;min-height:100vh;transition:background var(--transition-slow)}.container{max-width:1200px;margin:0 auto;padding:var(--spacing-lg)}.warning-banner{background:linear-gradient(135deg,#fef3c7,#fde68a);border-left:4px solid var(--color-warning);padding:var(--spacing-md) var(--spacing-lg);display:flex;align-items:center;gap:var(--spacing-md);box-shadow:var(--shadow-md);animation:slideDown var(--transition-base)}.warning-banner.hidden{display:none}.warning-icon{width:24px;height:24px;color:var(--color-warning);stroke-width:2;flex-shrink:0}.warning-banner span{font-size:var(--font-size-sm);font-weight:500;color:#92400e}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xl);flex-wrap:wrap;gap:var(--spacing-md)}.app-title{display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--font-size-2xl);font-weight:700;color:var(--color-text-primary)}.title-icon{width:32px;height:32px;color:var(--theme-primary);stroke-width:2;animation:rotate 20s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.gender-selector{display:flex;gap:var(--spacing-sm);background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));padding:var(--spacing-xs);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);border:1px solid var(--glass-border)}.gender-btn{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);border:none;background:transparent;border-radius:var(--radius-lg);font-family:var(--font-family);font-size:var(--font-size-base);font-weight:500;color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast)}.gender-btn svg{width:20px;height:20px;stroke-width:2}.gender-btn:hover{background:#ffffff80;color:var(--color-text-primary)}.gender-btn.active{background:var(--theme-primary);color:#fff;box-shadow:var(--shadow-md)}.city-selector{display:flex;align-items:center;gap:var(--spacing-sm);background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));padding:var(--spacing-md);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);border:1px solid var(--glass-border);margin-bottom:var(--spacing-xl)}.location-icon{width:20px;height:20px;color:var(--theme-primary);stroke-width:2;flex-shrink:0}#city-input{flex:1;border:none;background:transparent;font-family:var(--font-family);font-size:var(--font-size-base);color:var(--color-text-primary);outline:none}#city-input::placeholder{color:var(--color-text-tertiary)}.icon-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:none;background:var(--theme-primary);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.icon-btn svg{width:18px;height:18px;color:#fff;stroke-width:2}.icon-btn:hover{transform:scale(1.05);box-shadow:var(--shadow-md)}.icon-btn:active{transform:scale(.95)}.day-selector{display:flex;gap:var(--spacing-sm);background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));padding:var(--spacing-xs);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);border:1px solid var(--glass-border);margin-bottom:var(--spacing-xl);justify-content:center}.day-btn{flex:1;max-width:150px;display:flex;align-items:center;justify-content:center;padding:var(--spacing-sm) var(--spacing-lg);border:none;background:transparent;border-radius:var(--radius-lg);font-family:var(--font-family);font-size:var(--font-size-base);font-weight:500;color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast)}.day-btn:hover{background:#ffffff80;color:var(--color-text-primary)}.day-btn.active{background:var(--theme-primary);color:#fff;box-shadow:var(--shadow-md)}.main-content{display:grid;gap:var(--spacing-xl)}.weather-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border-radius:var(--radius-xl);padding:var(--spacing-xl);box-shadow:var(--shadow-lg);border:1px solid var(--glass-border);display:grid;gap:var(--spacing-xl)}.weather-info{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--spacing-lg)}.temperature-display{display:flex;align-items:baseline;gap:var(--spacing-xs)}.temperature{font-size:var(--font-size-4xl);font-weight:700;color:var(--theme-primary);line-height:1}.temperature-unit{font-size:var(--font-size-2xl);color:var(--color-text-secondary)}.weather-icon-large{font-size:var(--font-size-3xl)}.weather-description{font-size:var(--font-size-lg);font-weight:500;color:var(--color-text-secondary)}.weather-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--spacing-lg)}.detail-item{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md);background:#ffffff80;border-radius:var(--radius-lg)}.detail-item svg{width:24px;height:24px;color:var(--theme-primary);stroke-width:2}.detail-item span{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.detail-item strong{font-size:var(--font-size-lg);color:var(--color-text-primary)}.outfit-section{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-xl);background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border-radius:var(--radius-xl);padding:var(--spacing-xl);box-shadow:var(--shadow-lg);border:1px solid var(--glass-border)}.avatar-display{display:flex;align-items:center;justify-content:center}.avatar-container{width:100%;max-width:300px;aspect-ratio:2/3;background:linear-gradient(135deg,#ffffffe6,#fff9);border-radius:var(--radius-xl);padding:var(--spacing-lg);box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center}.avatar-placeholder,.avatar-svg{width:100%;height:100%}.outfit-recommendations{display:flex;flex-direction:column;gap:var(--spacing-lg)}.section-title{display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--font-size-xl);font-weight:600;color:var(--color-text-primary)}.section-title svg{width:24px;height:24px;color:var(--theme-primary);stroke-width:2}.outfit-list{display:flex;flex-direction:column;gap:var(--spacing-md)}.outfit-item{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);background:#fff9;border-radius:var(--radius-lg);transition:all var(--transition-fast);cursor:pointer}.outfit-item:hover{background:#ffffffe6;transform:translate(4px);box-shadow:var(--shadow-md)}.outfit-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--theme-primary);border-radius:var(--radius-md);font-size:var(--font-size-xl);flex-shrink:0}.outfit-info{flex:1}.outfit-name{font-weight:600;color:var(--color-text-primary);margin-bottom:var(--spacing-xs)}.outfit-suggestion{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.outfit-reason{padding:var(--spacing-md);background:linear-gradient(135deg,#6366f11a,#8b5cf61a);border-left:3px solid var(--color-accent);border-radius:var(--radius-md);font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:1.8}.color-indicator{display:inline-block;width:20px;height:20px;border-radius:var(--radius-sm);margin-left:var(--spacing-sm);vertical-align:middle;border:2px solid rgba(255,255,255,.8);box-shadow:var(--shadow-sm)}.outfit-name{display:flex;align-items:center}.forecast-section{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border-radius:var(--radius-xl);padding:var(--spacing-xl);box-shadow:var(--shadow-lg);border:1px solid var(--glass-border)}.forecast-scroll{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--spacing-md);margin-top:var(--spacing-lg)}.forecast-day{background:#fff9;border-radius:var(--radius-lg);padding:var(--spacing-md);text-align:center;transition:all var(--transition-fast)}.forecast-day:hover{background:#ffffffe6;transform:translateY(-4px);box-shadow:var(--shadow-md)}.forecast-date{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--spacing-sm)}.forecast-icon{font-size:var(--font-size-2xl);margin:var(--spacing-sm) 0}.forecast-temp{font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin-bottom:var(--spacing-xs)}.forecast-outfit{font-size:var(--font-size-xs);color:var(--color-text-tertiary)}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn var(--transition-base)}@media(max-width:768px){.container{padding:var(--spacing-md)}.header{flex-direction:column;align-items:stretch}.app-title,.gender-selector{justify-content:center}.outfit-section{grid-template-columns:1fr}.avatar-container{max-width:250px}.forecast-scroll{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));overflow-x:auto;-webkit-overflow-scrolling:touch}.temperature{font-size:var(--font-size-3xl)}}@media(max-width:480px){html{font-size:14px}.weather-details{grid-template-columns:1fr}}.hidden{display:none!important}.text-center{text-align:center}.mt-lg{margin-top:var(--spacing-lg)}