*{box-sizing:border-box;margin:0;padding:0}body.light{--bg-gradient: linear-gradient(135deg, #E8E4FF, #D1C9FF);--text-primary: #2E335A;--text-secondary: #5A5F7A;--text-tertiary: #8B8FA3;--container-bg: rgba(255, 255, 255, .7);--container-border: rgba(46, 51, 90, .1);--card-bg-1: linear-gradient(135deg, #667BC6, #DA7BE8);--card-bg-2: linear-gradient(135deg, #8E7CC3, #6D5B97);--card-bg-3: linear-gradient(135deg, #A8C8EC, #7EA3D3);--card-bg-4: radial-gradient(circle, #F0C4F7, #C48ED1);--glass-bg: rgba(255, 255, 255, .2);--glass-border: rgba(46, 51, 90, .2);--button-bg: rgba(46, 51, 90, .1);--button-active: rgba(46, 51, 90, .2)}body.dark{--bg-gradient: linear-gradient(135deg, #1F1D47, #1C1B33);--text-primary: #FFFFFF;--text-secondary: #EBEBF5;--text-tertiary: #B8B8CC;--container-bg: rgba(255, 255, 255, .05);--container-border: rgba(255, 255, 255, .1);--card-bg-1: linear-gradient(135deg, #3658B1, #C159EC);--card-bg-2: linear-gradient(135deg, #5936B4, #362A84);--card-bg-3: linear-gradient(135deg, #AEC9FF, #083072);--card-bg-4: radial-gradient(circle, #F7CBFD, #7758D1);--glass-bg: rgba(255, 255, 255, .1);--glass-border: rgba(255, 255, 255, .2);--button-bg: rgba(255, 255, 255, .1);--button-active: rgba(255, 255, 255, .2)}body{font-family:Inter,sans-serif;background:var(--bg-gradient);color:var(--text-primary);min-height:100vh;padding:20px;transition:all .3s ease}#root>div{max-width:400px;margin:0 auto;padding:20px}.app-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}h1{font-size:24px;font-weight:300;margin:0;color:var(--text-primary)}.toggles-container{display:flex;flex-direction:column;gap:8px}.theme-toggle{display:flex;background:var(--button-bg);border-radius:8px;padding:2px;border:1px solid var(--glass-border)}.theme-button{background:transparent;border:none;padding:7px 12px;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease}.theme-button.active{background:var(--button-active)}.theme-button:hover{background:var(--glass-bg)}.unit-toggle{display:flex;background:var(--button-bg);border-radius:8px;padding:2px;border:1px solid var(--glass-border)}.unit-button{background:transparent;border:none;color:var(--text-secondary);padding:6px 12px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.unit-button.active{background:var(--button-active);color:var(--text-primary)}.unit-button:hover{background:var(--glass-bg)}form{margin-bottom:20px;display:flex;gap:10px}input[type=text]{flex:1;padding:12px 16px;border:1px solid var(--glass-border);border-radius:12px;background:var(--glass-bg);color:var(--text-primary);font-size:16px}input[type=text]::placeholder{color:var(--text-secondary);opacity:.7}button[type=submit]{padding:12px 20px;background:var(--card-bg-2);border:none;border-radius:12px;color:var(--text-primary);font-weight:500;cursor:pointer;transition:transform .2s ease}button[type=submit]:hover{transform:translateY(-2px)}.weather-container{background:var(--container-bg);border-radius:20px;padding:24px;border:1px solid var(--container-border);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.weather-header{text-align:center;margin-bottom:30px}.city-name{font-size:28px;font-weight:400;margin-bottom:16px;color:var(--text-primary)}.temperature{font-size:80px;font-weight:100;color:var(--text-primary);line-height:1;margin-bottom:8px}.description{color:var(--text-primary);font-size:18px;text-transform:capitalize;font-weight:400;margin-bottom:16px}.feels-like{color:var(--text-primary);font-size:16px;font-weight:400;opacity:.9;margin-bottom:8px}.daily-temps{color:var(--text-primary);font-size:16px;font-weight:400}.forecast-container{margin:0 auto 20px;max-width:fit-content}.forecast-header{margin-bottom:16px;text-align:center}.forecast-header h3{color:var(--text-primary);font-size:18px;font-weight:400}.forecast-scroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px}.forecast-scroll::-webkit-scrollbar{height:4px}.forecast-scroll::-webkit-scrollbar-track{background:var(--glass-bg);border-radius:4px}.forecast-scroll::-webkit-scrollbar-thumb{background:var(--button-active);border-radius:4px}.forecast-card{background:var(--glass-bg);border-radius:16px;padding:16px;min-width:120px;text-align:center;border:1px solid var(--glass-border);flex-shrink:0}.forecast-day{color:var(--text-primary);font-size:14px;font-weight:500;margin-bottom:4px}.forecast-date{color:var(--text-secondary);font-size:12px;margin-bottom:12px}.forecast-icon{margin-bottom:12px;display:flex;justify-content:center;align-items:center;height:50px}.weather-icon{width:50px;height:50px;object-fit:contain}.forecast-description{color:var(--text-secondary);font-size:12px;text-transform:capitalize;margin-bottom:8px}.forecast-temp-high{color:var(--text-primary);font-size:16px;font-weight:400;margin-bottom:4px}.forecast-temp-low{color:var(--text-secondary);font-size:16px;font-weight:400}.forecast-loading{color:var(--text-secondary);text-align:center;padding:20px;font-style:italic}.weather-cards-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.weather-card{padding:16px;border-radius:16px;border:1px solid var(--glass-border);display:flex;flex-direction:column;min-height:120px;transition:transform .3s ease}.weather-card:hover{transform:translateY(-4px)}.weather-card:nth-child(1){background:var(--card-bg-1)}.weather-card:nth-child(2){background:var(--card-bg-2)}.weather-card:nth-child(3){background:var(--card-bg-3)}.weather-card:nth-child(4){background:var(--card-bg-4)}.card-header{display:flex;align-items:center;gap:6px;margin-bottom:12px}.card-icon{font-size:16px;opacity:.9}.card-icon-img{width:16px;height:16px;object-fit:contain;opacity:.9}.card-title{font-size:11px;font-weight:600;letter-spacing:.5px;color:var(--text-secondary);text-transform:uppercase;opacity:.8}.card-main{flex:1;display:flex;flex-direction:column;justify-content:center;margin-bottom:8px}.card-value{font-size:32px;font-weight:300;color:var(--text-primary);line-height:1;margin-bottom:2px}.card-units{font-size:14px;color:var(--text-secondary);font-weight:400;opacity:.8}.card-subtitle{font-size:12px;color:var(--text-secondary);opacity:.7;margin-top:auto}.sun-times-container{display:flex;flex-direction:column;gap:16px;padding:8px 0;flex:1}.sun-time-item{display:flex;align-items:center;gap:12px}.sun-icon{width:24px;height:24px;object-fit:contain;opacity:.9}.sun-time-content{display:flex;flex-direction:column;gap:2px}.sun-time-label{font-size:14px;font-weight:500;color:var(--text-primary);opacity:.9}.sun-time-value{font-size:16px;font-weight:600;color:var(--text-primary)}@media (min-width: 768px){#root>div{max-width:600px;padding:30px}.app-header h1{font-size:28px}.toggles-container{flex-direction:row;gap:12px}.weather-cards-grid{grid-template-columns:repeat(2,1fr);gap:20px}.forecast-scroll{gap:20px}.forecast-card{min-width:140px;padding:16px}}@media (min-width: 1024px){#root>div{max-width:900px;padding:40px}.app-header h1{font-size:32px}.weather-container{padding:32px}.weather-cards-grid{grid-template-columns:repeat(4,1fr);gap:24px}.city-name{font-size:48px}.temperature{font-size:120px}.description{font-size:20px}.daily-temps{font-size:18px}.card-value{font-size:36px}.forecast-scroll{gap:24px}.forecast-card{min-width:160px;padding:20px}.weather-icon{width:60px;height:60px}}@media (max-width: 480px){body{padding:10px}#root>div{padding:15px}.weather-container{padding:20px}.app-header h1{font-size:20px}.city-name{font-size:24px}.temperature{font-size:64px}.weather-cards-grid{grid-template-columns:1fr;gap:12px}.forecast-card{min-width:100px;padding:12px}.weather-icon{width:40px;height:40px}.toggles-container{flex-direction:row;gap:8px}}