@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;600;700;800&display=swap";:root{--font-heading: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;--font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--bg-gradient-start: #0f172a;--bg-gradient-end: #1e293b;--accent-color: #38bdf8;--accent-glow: rgba(56, 189, 248, .35);--glass-bg: rgba(30, 41, 59, .65);--glass-border: rgba(255, 255, 255, .12);--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, .37);--text-primary: #f8fafc;--text-secondary: #94a3b8;--text-muted: #64748b;--card-radius: 20px;--btn-radius: 12px}body.theme-clear-day{--bg-gradient-start: #0284c7;--bg-gradient-end: #0369a1;--accent-color: #fde047;--accent-glow: rgba(253, 224, 71, .4);--glass-bg: rgba(255, 255, 255, .18);--glass-border: rgba(255, 255, 255, .25)}body.theme-clear-night{--bg-gradient-start: #090d16;--bg-gradient-end: #111827;--accent-color: #818cf8;--accent-glow: rgba(129, 140, 248, .35);--glass-bg: rgba(17, 24, 39, .7);--glass-border: rgba(255, 255, 255, .1)}body.theme-rain{--bg-gradient-start: #1e293b;--bg-gradient-end: #0f172a;--accent-color: #60a5fa;--accent-glow: rgba(96, 165, 250, .35);--glass-bg: rgba(30, 41, 59, .7)}body.theme-thunderstorm{--bg-gradient-start: #0f172a;--bg-gradient-end: #2e1065;--accent-color: #c084fc;--accent-glow: rgba(192, 132, 252, .4);--glass-bg: rgba(15, 23, 42, .75)}body.theme-snow{--bg-gradient-start: #334155;--bg-gradient-end: #1e293b;--accent-color: #e0f2fe;--accent-glow: rgba(224, 242, 254, .4);--glass-bg: rgba(255, 255, 255, .15)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{overflow-x:hidden;width:100%;max-width:100vw}body{font-family:var(--font-body);background:linear-gradient(135deg,var(--bg-gradient-start),var(--bg-gradient-end));color:var(--text-primary);min-height:100vh;overflow-x:hidden;width:100%;max-width:100vw;transition:background .8s ease;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}#root{width:100%;max-width:100vw;overflow-x:hidden}.search-spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.2);border-top-color:var(--accent-color);border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:var(--card-radius);transition:all .3s cubic-bezier(.4,0,.2,1)}.glass-panel:hover{border-color:#ffffff40;box-shadow:0 12px 40px #00000073}.weather-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:0}::-webkit-scrollbar{height:6px;width:6px}::-webkit-scrollbar-track{background:#0000001a;border-radius:10px}::-webkit-scrollbar-thumb{background:#fff3;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#fff6}.app-container{position:relative;z-index:1;max-width:1380px;width:100%;margin:0 auto;padding:16px 24px 48px;display:flex;flex-direction:column;gap:20px;overflow-x:hidden}.navbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:20px;width:100%;overflow:hidden}.nav-brand{display:flex;align-items:center;gap:10px}.brand-logo{font-size:28px}.brand-text{display:flex;align-items:center;gap:6px}.brand-name{font-family:var(--font-heading);font-size:22px;font-weight:800;letter-spacing:-.5px;background:linear-gradient(135deg,#ffffff 0%,var(--accent-color) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.brand-tag{font-size:10px;font-weight:700;padding:2px 6px;border-radius:6px;background:var(--accent-color);color:#0f172a}.search-container{position:relative;flex:1;max-width:480px}.search-form{position:relative;display:flex;align-items:center}.search-icon{position:absolute;left:14px;color:var(--text-secondary)}.search-input{width:100%;padding:10px 36px 10px 42px;border-radius:12px;border:1px solid rgba(255,255,255,.15);background:#0003;color:#fff;font-size:14px;outline:none;transition:all .2s ease}.search-input:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px var(--accent-glow);background:#00000059}.clear-btn{position:absolute;right:12px;background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:14px}.suggestions-dropdown{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#1e293b;border:1px solid rgba(255,255,255,.15);border-radius:14px;list-style:none;overflow:hidden;z-index:100;box-shadow:0 10px 25px #00000080}.suggestion-item{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;transition:background .15s ease}.suggestion-item:hover{background:#ffffff1a}.suggestion-icon{color:var(--accent-color)}.suggestion-name{font-weight:600}.suggestion-sub{font-size:12px;color:var(--text-secondary)}.nav-actions{display:flex;align-items:center;gap:10px}.nav-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#ffffff0f;color:var(--text-primary);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease}.nav-btn:hover{background:#ffffff26;border-color:#ffffff40}.nav-btn.sound-btn.active{background:#10b98133;border-color:#10b981;color:#34d399}.favorites-btn{position:relative}.favorites-badge{background:#f59e0b;color:#000;font-size:11px;font-weight:700;padding:1px 6px;border-radius:10px}.unit-toggle{display:flex;background:#0000004d;border-radius:10px;padding:2px;border:1px solid rgba(255,255,255,.1);cursor:pointer}.unit-btn{border:none;background:none;color:var(--text-secondary);font-weight:600;padding:4px 10px;border-radius:8px;font-size:12px;cursor:pointer;transition:all .2s ease}.unit-btn.active{background:var(--accent-color);color:#0f172a}.weather-alert-banner{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-radius:14px;background:#ef444433;border:1px solid rgba(239,68,68,.4)}.alert-content{display:flex;align-items:center;gap:12px}.alert-icon{font-size:20px}.alert-desc{font-size:13px;color:#fca5a5}.alert-close{background:none;border:none;color:#fff;cursor:pointer}.dashboard-grid{display:grid;grid-template-columns:1fr 340px;gap:20px;width:100%;overflow:hidden}.main-column,.side-column{display:flex;flex-direction:column;gap:20px;min-width:0;overflow:hidden}.hero-card{padding:28px;display:flex;flex-direction:column;gap:20px;position:relative;overflow:hidden;background:linear-gradient(90deg,#0f172a73,#0f172a33 35%,#0f172a0a)!important;backdrop-filter:blur(4px)!important;-webkit-backdrop-filter:blur(4px)!important;border:1px solid rgba(255,255,255,.18)}.hero-header{display:flex;align-items:center;justify-content:space-between}.city-title-row{display:flex;align-items:center;gap:10px}.pin-icon{color:var(--accent-color)}.city-name{font-family:var(--font-heading);font-size:32px;font-weight:700;letter-spacing:-.5px}.favorite-star-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;transition:transform .2s ease,color .2s ease}.favorite-star-btn.is-favorite{color:#f59e0b}.favorite-star-btn:hover{transform:scale(1.15)}.hero-date{font-size:14px;color:var(--text-secondary);margin-top:4px}.back-hero-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:6px 14px;border-radius:10px;cursor:pointer;font-size:12px}.hero-main-row{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:24px}.temp-section{display:flex;flex-direction:column;gap:8px}.temp-num{font-family:var(--font-heading);font-size:72px;font-weight:800;line-height:1;letter-spacing:-2px}.condition-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:30px;background:#ffffff1a;border:1px solid rgba(255,255,255,.15);font-size:16px;font-weight:600;width:fit-content}.hero-quick-pills{display:flex;gap:14px;flex-wrap:wrap}.pill-item{display:flex;flex-direction:column;gap:4px;padding:12px 18px;border-radius:14px;background:#00000040;border:1px solid rgba(255,255,255,.08)}.pill-label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary)}.pill-value{font-size:16px;font-weight:700}.hourly-card{padding:24px;overflow:hidden}.card-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}.card-title{font-family:var(--font-heading);font-size:18px;font-weight:700}.card-subtitle{font-size:12px;color:var(--text-secondary)}.hourly-scroll-container{overflow-x:auto;overflow-y:hidden;padding-bottom:8px;-webkit-overflow-scrolling:touch;max-width:100%}.hourly-timeline{display:flex;gap:16px;min-width:max-content}.hourly-item{display:flex;flex-direction:column;align-items:center;gap:8px;width:60px}.hourly-time{font-size:12px;color:var(--text-secondary)}.hourly-bar-wrap{height:90px;display:flex;align-items:flex-end;justify-content:center;width:100%}.hourly-temp-pill{width:28px;background:linear-gradient(180deg,var(--accent-color) 0%,rgba(56,189,248,.2) 100%);border-radius:14px;display:flex;align-items:flex-start;justify-content:center;padding-top:4px;transition:height .5s ease}.hourly-temp-val{font-size:11px;font-weight:700;color:#0f172a}.hourly-pop{font-size:11px;color:#60a5fa;font-weight:600}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;width:100%}.metric-card{padding:20px;display:flex;flex-direction:column;gap:12px}.metric-header{display:flex;align-items:center;gap:8px}.metric-title{font-size:14px;font-weight:600;color:var(--text-secondary)}.aqi-number{font-size:24px;font-weight:800}.aqi-status{font-size:12px;font-weight:700;padding:2px 10px;border-radius:12px}.metric-desc{font-size:12px;color:var(--text-secondary);line-height:1.4}.uv-value-large{font-size:32px;font-weight:800}.uv-progress-bar{height:6px;background:#ffffff1a;border-radius:6px;width:120px;overflow:hidden;margin-top:4px}.uv-fill{height:100%;border-radius:6px}.compass-widget{display:flex;align-items:center;gap:14px}.compass-arrow{color:var(--accent-color);transition:transform .5s ease}.sun-body{display:flex;align-items:center;justify-content:space-around}.sun-item{display:flex;align-items:center;gap:10px}.sun-icon{font-size:24px}.sun-time{font-weight:700;font-size:16px}.progress-track{height:8px;background:#ffffff1a;border-radius:8px;overflow:hidden}.progress-fill{height:100%;background:#38bdf8;border-radius:8px}.split-body{display:flex;justify-content:space-around}.stat-box{display:flex;flex-direction:column;align-items:center}.stat-val{font-size:20px;font-weight:700}.stat-label{font-size:12px;color:var(--text-secondary)}.ai-companion-card{padding:24px}.ai-title-row{display:flex;align-items:center;gap:8px}.ai-sparkle{font-size:20px}.ai-badge{background:linear-gradient(135deg,#a855f7,#ec4899);color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;text-transform:uppercase}.ai-content-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:16px}.section-title{font-size:13px;color:var(--text-secondary);margin-bottom:10px}.clothing-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.clothing-chip{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#0003;border-radius:12px;border:1px solid rgba(255,255,255,.08)}.clothing-icon{font-size:22px}.clothing-title{display:block;font-size:13px;font-weight:600}.clothing-detail{font-size:11px;color:var(--text-secondary)}.activity-list{display:flex;flex-direction:column;gap:10px}.activity-item{display:flex;align-items:center;justify-content:space-between;gap:10px}.activity-info{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500}.activity-score-wrap{display:flex;align-items:center;gap:8px}.score-bar-bg{width:80px;height:6px;background:#ffffff1a;border-radius:6px;overflow:hidden}.score-bar-fill{height:100%;border-radius:6px}.score-num{font-size:12px;font-weight:700;width:32px;text-align:right}.forecast-panel{padding:24px}.forecast-list{display:flex;flex-direction:column;gap:12px;margin-top:14px}.forecast-row-item{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-radius:14px;background:#0003;border:1px solid rgba(255,255,255,.06);cursor:pointer;transition:all .2s ease}.forecast-row-item:hover,.forecast-row-item.selected{background:#ffffff1a;border-color:var(--accent-color);transform:translate(4px)}.day-col{display:flex;flex-direction:column;width:70px}.day-name{font-weight:700;font-size:14px}.day-date{font-size:11px;color:var(--text-secondary)}.condition-col{display:flex;align-items:center;gap:8px;flex:1}.condition-label{font-size:13px}.pop-chip{font-size:11px;color:#60a5fa;font-weight:600}.temp-range-col{display:flex;align-items:center;gap:8px;width:130px}.temp-bar-track{flex:1;height:4px;background:#ffffff26;border-radius:4px;position:relative}.temp-bar-fill{position:absolute;height:100%;background:linear-gradient(90deg,#38bdf8,#f59e0b);border-radius:4px}.temp-low{font-size:12px;color:var(--text-secondary);width:24px;text-align:right}.temp-high{font-size:13px;font-weight:700;width:24px}.drawer-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:200;display:flex;justify-content:flex-end}.drawer-content{width:360px;height:100%;border-radius:0;padding:24px;display:flex;flex-direction:column;gap:20px;border-left:1px solid rgba(255,255,255,.2)}.drawer-header{display:flex;align-items:center;justify-content:space-between}.drawer-title-row{display:flex;align-items:center;gap:8px}.close-drawer-btn{background:none;border:none;color:#fff;font-size:18px;cursor:pointer}.favorite-card-item{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:#00000040;border-radius:12px;margin-bottom:10px;cursor:pointer}.fav-info{display:flex;align-items:center;gap:10px}.remove-fav-btn{background:none;border:none;cursor:pointer}.map-modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}.map-modal-content{width:100%;max-width:900px;height:600px;display:flex;flex-direction:column;overflow:hidden}.map-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px}.map-container{flex:1}.map{width:100%;height:100%}.map-modal-footer{padding:16px 24px;display:flex;align-items:center;justify-content:space-between}.confirm-button{background:var(--accent-color);color:#0f172a;font-weight:700;border:none;padding:10px 20px;border-radius:12px;cursor:pointer}@media(max-width:1024px){.app-container{padding:12px 16px 40px}.dashboard-grid,.ai-content-grid{grid-template-columns:1fr}.metrics-grid{grid-template-columns:repeat(2,1fr)}.hero-quick-pills{flex-wrap:wrap}}@media(max-width:768px){.app-container{padding:10px 12px 32px;gap:14px}.navbar{flex-direction:column;align-items:stretch;gap:10px;padding:12px 14px;border-radius:16px;overflow:visible}.nav-brand{justify-content:center}.brand-name{font-size:18px}.search-container{max-width:100%;width:100%}.nav-actions{justify-content:center;flex-wrap:wrap;gap:6px;width:100%;overflow:hidden}.nav-btn{padding:6px 10px;font-size:12px;border-radius:10px}.nav-btn-label{display:none}.unit-toggle{padding:2px}.unit-btn{padding:4px 8px;font-size:11px}.hero-card{padding:20px 16px}.city-name{font-size:22px}.hero-date{font-size:12px}.hero-main-row{flex-direction:column;align-items:flex-start;gap:16px}.temp-num{font-size:52px}.hero-quick-pills{gap:8px;width:100%}.pill-item{padding:10px 12px;border-radius:12px;flex:1;min-width:80px}.pill-label{font-size:10px}.pill-value{font-size:14px}.hourly-card{padding:16px}.hourly-item{width:50px}.hourly-bar-wrap{height:70px}.metrics-grid{grid-template-columns:1fr 1fr;gap:10px}.metric-card{padding:14px}.uv-value-large{font-size:26px}.ai-companion-card{padding:16px}.ai-content-grid{grid-template-columns:1fr;gap:14px}.clothing-grid{grid-template-columns:1fr}.score-bar-bg{width:60px}.forecast-panel{padding:16px}.forecast-row-item{padding:10px 12px;flex-wrap:wrap;gap:8px}.condition-col{order:3;width:100%;padding-top:6px;border-top:1px solid rgba(255,255,255,.06)}.temp-range-col{width:auto;flex:1;justify-content:flex-end}.drawer-content{width:100%;max-width:320px;padding:16px}.map-modal-content{height:80vh;max-width:100%;border-radius:16px}.map-modal-header{padding:12px 16px}.map-modal-footer{padding:12px 16px;flex-direction:column;gap:10px;align-items:stretch}.confirm-button{text-align:center}.weather-alert-banner{padding:10px 14px;border-radius:12px}.alert-desc{font-size:12px}}@media(max-width:480px){.app-container{padding:8px 8px 24px;gap:10px;width:100%;max-width:100vw}.glass-panel,.hero-card,.hourly-card,.metric-card,.ai-companion-card,.forecast-panel{max-width:100%;overflow:hidden;word-break:break-word}.dashboard-grid,.main-column,.side-column{max-width:100%;overflow:hidden}.navbar{padding:10px;border-radius:14px;gap:8px}.brand-logo{font-size:22px}.brand-name{font-size:16px}.brand-tag{font-size:8px;padding:1px 4px}.search-input{padding:8px 32px 8px 36px;font-size:13px}.nav-actions{gap:4px}.nav-btn{padding:5px 8px;font-size:11px;border-radius:8px}.favorites-badge{font-size:9px;padding:0 4px}.hero-card{padding:16px 12px;border-radius:16px}.city-title-row{gap:6px;flex-wrap:wrap}.city-name{font-size:18px}.hero-date{font-size:11px}.temp-num{font-size:44px;letter-spacing:-1px}.condition-badge{padding:6px 12px;font-size:13px;gap:6px;border-radius:20px}.hero-quick-pills{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%}.pill-item{padding:8px 10px;border-radius:10px;min-width:0}.pill-label{font-size:9px}.pill-value{font-size:13px}.back-hero-btn{font-size:11px;padding:4px 10px}.hourly-card{padding:12px;border-radius:16px}.card-title{font-size:15px}.card-subtitle{font-size:10px}.hourly-timeline{gap:10px}.hourly-item{width:44px;gap:5px}.hourly-time{font-size:10px}.hourly-bar-wrap{height:55px}.hourly-temp-pill{width:24px;border-radius:12px}.hourly-temp-val,.hourly-pop{font-size:9px}.metrics-grid{grid-template-columns:1fr;gap:8px}.metric-card{padding:12px;border-radius:14px}.metric-icon{font-size:16px}.metric-title{font-size:12px}.aqi-number{font-size:20px}.uv-value-large{font-size:22px}.uv-progress-bar{width:90px}.sun-body{flex-direction:column;gap:12px;align-items:flex-start}.sun-time{font-size:14px}.stat-val{font-size:16px}.compass-widget{gap:8px}.ai-companion-card{padding:12px;border-radius:16px}.ai-content-grid{gap:10px}.clothing-chip{padding:8px 10px;gap:8px}.clothing-icon{font-size:18px}.clothing-title{font-size:12px}.clothing-detail{font-size:10px}.activity-info{font-size:12px;gap:5px}.score-bar-bg{width:50px}.score-num{font-size:11px;width:28px}.forecast-panel{padding:12px;border-radius:16px}.forecast-list{gap:8px}.forecast-row-item{padding:8px 10px;border-radius:12px;gap:6px}.day-col{width:55px}.day-name{font-size:13px}.day-date{font-size:10px}.condition-label{font-size:11px}.temp-range-col{gap:4px;width:auto}.temp-bar-track{min-width:30px}.temp-low,.temp-high{font-size:11px;width:22px}.drawer-content{width:100%;max-width:100%;padding:14px;border-radius:0}.favorite-card-item{padding:10px 12px;border-radius:10px}.map-modal-overlay{padding:8px}.map-modal-content{height:85vh;border-radius:14px}.map-modal-header h2{font-size:15px}.map-title-wrap{gap:6px}.suggestions-dropdown{border-radius:12px}.suggestion-item{padding:10px 12px;gap:8px}.suggestion-name{font-size:13px}.suggestion-sub{font-size:11px}}@media(max-width:360px){.app-container{padding:6px 6px 20px}.navbar{padding:8px}.brand-name{font-size:14px}.temp-num{font-size:38px}.city-name{font-size:16px}.hero-quick-pills{grid-template-columns:1fr 1fr}.pill-label{font-size:8px}.pill-value{font-size:12px}.hourly-item{width:38px}.hourly-time{font-size:9px}}