u *{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #f8fafc;--bg-secondary: #ffffff;--text-primary: #0f172a;--text-secondary: #475569;--text-muted: #64748b;--accent-primary: #64748b;--accent-secondary: #94a3b8;--accent-hover: #475569;--border: #e2e8f0;--border-light: #f1f5f9;--shadow-sm: 0 1px 3px rgba(15, 23, 42, .05);--shadow-md: 0 4px 6px rgba(15, 23, 42, .05);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-full: 50px;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--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}:root.dark{--bg-primary: #000000;--bg-secondary: #0a0a0a;--text-primary: #f1f5f9;--text-secondary: #cbd5e1;--text-muted: #94a3b8;--accent-primary: #94a3b8;--accent-secondary: #cbd5e1;--accent-hover: #64748b;--border: #1a1a1a;--border-light: #0f0f0f;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px rgba(0, 0, 0, .3)}:root,:root.dark{transition:none!important}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;transition:background-color .2s ease,color .2s ease}#app{min-height:100vh;display:flex;flex-direction:column}.header{background:#fffffff2;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border);padding:var(--spacing-lg) var(--spacing-md);position:sticky;top:0;z-index:100;transition:background-color .2s ease,border-color .2s ease}:root.dark .header{background:#0a0a0af2}.header-content{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-lg)}.header-left{display:flex;align-items:center;gap:var(--spacing-md)}.logo{font-size:var(--text-4xl);line-height:1}.header-text{display:flex;flex-direction:column;gap:var(--spacing-xs)}.site-title{font-size:var(--text-2xl);font-weight:700;color:var(--text-primary);line-height:1.2}.subtitle{font-size:var(--text-sm);color:var(--text-muted);line-height:1.2}.theme-toggle{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-full);padding:.625rem 1rem;font-size:var(--text-xl);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;box-shadow:var(--shadow-sm)}.theme-toggle:hover{background:var(--bg-primary);border-color:var(--accent-primary);transform:scale(1.05)}.theme-toggle:active{transform:scale(.95)}.main-content{flex:1;max-width:1400px;width:100%;margin:0 auto;padding:var(--spacing-xl) var(--spacing-md)}.selectors-container{max-width:600px;margin:0 auto var(--spacing-xl)}.city-selector{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-full);padding:.875rem 3rem .875rem 1.5rem;font-size:var(--text-base);font-weight:600;color:var(--text-primary);width:100%;cursor:pointer;transition:all .2s ease;font-family:inherit;box-shadow:var(--shadow-sm);margin-bottom:var(--spacing-md);appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:20px}:root.dark .city-selector{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")}.city-selector:hover{border-color:var(--accent-primary);box-shadow:var(--shadow-md);transform:translateY(-1px)}.city-selector:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px #64748b1a;transform:translateY(-1px)}.city-selector option{background:var(--bg-secondary);color:var(--text-primary);padding:.5rem;font-weight:500}.period-selector{display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-full);padding:.75rem 1.25rem;box-shadow:var(--shadow-sm)}.nav-button{background:transparent;border:none;color:var(--accent-primary);font-size:var(--text-xl);cursor:pointer;padding:.375rem;border-radius:50%;transition:all .2s ease;display:flex;align-items:center;justify-content:center;min-width:36px;min-height:36px}.nav-button:hover:not(:disabled){background:var(--bg-primary);color:var(--accent-hover);transform:scale(1.1)}.nav-button:active:not(:disabled){transform:scale(.9)}.nav-button:disabled{opacity:.3;cursor:not-allowed}.period-display{font-size:var(--text-lg);font-weight:600;color:var(--text-primary);min-width:150px;text-align:center}.content-grid{display:grid;grid-template-columns:2fr 1fr;gap:var(--spacing-lg);align-items:start}.card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-sm);transition:all .2s ease}.card:hover{box-shadow:var(--shadow-md)}.card-title{font-size:var(--text-xl);font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-md);display:flex;align-items:center;gap:var(--spacing-sm)}.card-icon{font-size:var(--text-2xl)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.stat-item{display:flex;flex-direction:column;gap:var(--spacing-xs)}.stat-label{font-size:var(--text-sm);color:var(--text-muted);font-weight:500}.stat-value{font-size:var(--text-2xl);font-weight:700;color:var(--text-primary)}.stat-unit{font-size:var(--text-base);font-weight:400;color:var(--text-secondary)}.temp-display{display:flex;align-items:baseline;gap:var(--spacing-xs)}.temp-value{font-size:var(--text-4xl);font-weight:700;color:var(--text-primary)}.temp-unit{font-size:var(--text-xl);color:var(--text-secondary)}.daily-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:var(--spacing-sm);margin-top:var(--spacing-md)}.daily-item{background:var(--bg-primary);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:var(--spacing-sm);text-align:center;transition:all .2s ease}.daily-item:hover{border-color:var(--border);transform:translateY(-2px)}.daily-date{font-size:var(--text-xs);color:var(--text-muted);margin-bottom:var(--spacing-xs)}.daily-icon{font-size:var(--text-2xl);margin:var(--spacing-xs) 0}.daily-temp{font-size:var(--text-sm);font-weight:600;color:var(--text-primary)}.sidebar{position:sticky;top:1rem;max-height:calc(100vh - 2rem);overflow-y:auto;display:flex;flex-direction:column;gap:var(--spacing-lg)}.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-track{background:var(--bg-primary);border-radius:var(--radius-sm)}.sidebar::-webkit-scrollbar-thumb{background:var(--accent-primary);border-radius:var(--radius-sm)}.sidebar::-webkit-scrollbar-thumb:hover{background:var(--accent-hover)}.records-list{display:flex;flex-direction:column;gap:var(--spacing-md)}.record-item{display:flex;flex-direction:column;gap:var(--spacing-xs);padding:var(--spacing-md);background:var(--bg-primary);border:1px solid var(--border-light);border-radius:var(--radius-md);transition:all .2s ease}.record-item:hover{border-color:var(--border)}.record-label{font-size:var(--text-sm);color:var(--text-muted)}.record-value{font-size:var(--text-lg);font-weight:700;color:var(--text-primary)}.record-date{font-size:var(--text-xs);color:var(--text-muted)}.comparison-badge{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:.25rem .625rem;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;margin-top:var(--spacing-xs)}.comparison-badge.positive{color:#dc2626;border-color:#dc262633;background:#dc26260d}.comparison-badge.negative{color:#2563eb;border-color:#2563eb33;background:#2563eb0d}.footer{background:var(--bg-secondary);border-top:1px solid var(--border);padding:var(--spacing-xl) var(--spacing-md);text-align:center;margin-top:auto}.footer-content{max-width:1400px;margin:0 auto;color:var(--text-muted);font-size:var(--text-sm)}.footer-link{color:var(--accent-primary);text-decoration:none;transition:color .2s ease;font-weight:600}.footer-link:hover{color:var(--accent-hover);text-decoration:underline}@media(max-width:1200px){.content-grid{grid-template-columns:1fr}.sidebar{position:static;max-height:none;overflow-y:visible}:root{--radius-lg: 12px}}@media(max-width:768px){.header-content{flex-direction:column;align-items:flex-start;gap:var(--spacing-md)}.header-left{width:100%;justify-content:space-between}.site-title{font-size:var(--text-xl)}.subtitle{font-size:var(--text-xs)}.main-content{padding:var(--spacing-md) var(--spacing-sm)}.stats-grid{grid-template-columns:1fr}.daily-grid{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}.card{padding:var(--spacing-md)}.period-selector{padding:.625rem 1rem}.period-display{font-size:var(--text-base);min-width:130px}}@media(max-width:480px){:root{--radius-sm: 6px;--radius-md: 8px;--radius-lg: 10px}.logo{font-size:var(--text-3xl)}.site-title{font-size:var(--text-lg)}.subtitle{font-size:.6875rem}.card-title{font-size:var(--text-lg)}.temp-value{font-size:var(--text-3xl)}.stat-value{font-size:var(--text-xl)}.daily-grid{grid-template-columns:repeat(auto-fill,minmax(60px,1fr))}.daily-item{padding:var(--spacing-xs)}.city-selector,.period-selector{font-size:var(--text-sm)}}@media(max-width:360px){.header{padding:var(--spacing-md) var(--spacing-sm)}.main-content,.card{padding:var(--spacing-sm)}.period-display{min-width:110px;font-size:var(--text-sm)}.nav-button{font-size:var(--text-base);min-width:32px;min-height:32px}.theme-toggle{padding:.5rem .75rem;min-width:40px;min-height:40px}}.loading{display:flex;align-items:center;justify-content:center;padding:var(--spacing-xl);color:var(--text-muted);font-size:var(--text-lg)}.empty-state{text-align:center;padding:var(--spacing-xl);color:var(--text-muted)}.empty-state-icon{font-size:4rem;margin-bottom:var(--spacing-md)}.empty-state-text{font-size:var(--text-lg)}