@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap";:root{--bg-color:#0f172a;--bg-gradient:linear-gradient(135deg, #0f172a 0%, #1e293b 100%);--text-primary:#f8fafc;--text-secondary:#94a3b8;--accent-color:#38bdf8;--accent-glow:#38bdf866;--glass-bg:#1e293b99;--glass-border:#ffffff1a;--widget-shadow:0 8px 32px 0 #0000005e;--danger-color:#ef4444;--success-color:#10b981}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-gradient);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-attachment:fixed;justify-content:center;align-items:center;min-height:100vh;padding:20px;font-family:Outfit,sans-serif;display:flex}#root{width:100%;max-width:1200px}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);box-shadow:var(--widget-shadow);border-radius:24px;padding:24px;transition:transform .3s,box-shadow .3s}.glass-panel:hover{border:1px solid #fff3;transform:translateY(-4px);box-shadow:0 12px 40px #00000080}.widget-title{color:var(--text-primary);align-items:center;gap:8px;margin-bottom:16px;font-size:1.25rem;font-weight:600;display:flex}.widget-title svg{color:var(--accent-color);filter:drop-shadow(0 0 8px var(--accent-glow))}.text-secondary{color:var(--text-secondary)}.trend-up{color:var(--success-color);align-items:center;gap:4px;display:inline-flex}.trend-down{color:var(--danger-color);align-items:center;gap:4px;display:inline-flex}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#0000001a;border-radius:4px}::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff4d}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:.5s forwards fadeIn}.last-updated{color:var(--text-secondary);opacity:.6;margin-left:auto;font-size:.75rem;font-weight:400}.weather-widget{flex-direction:column;display:flex}.weather-icon{filter:drop-shadow(0 4px 6px #0000004d);width:28px;height:28px}.text-yellow-blue{color:#fcd34d}.hourly-forecast{gap:16px;padding:16px 0 12px;display:flex;overflow-x:auto}.hourly-forecast::-webkit-scrollbar{height:6px}.hourly-forecast::-webkit-scrollbar-track{background:#ffffff0d;border-radius:4px}.hourly-forecast::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.hourly-forecast::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.forecast-item{background:#ffffff0d;border-radius:16px;flex-direction:column;align-items:center;min-width:60px;padding:12px;transition:background .3s;display:flex}.forecast-item:hover{background:#ffffff1a}.forecast-time{color:var(--text-secondary);margin-bottom:8px;font-size:.85rem}.forecast-icon-wrapper{justify-content:center;align-items:center;height:32px;margin-bottom:8px;display:flex}.forecast-temp{color:var(--text-primary);font-size:1.1rem;font-weight:600}.loading-state,.error-state{text-align:center;color:var(--text-secondary);padding:24px 0}.error-state{color:var(--danger-color)}.forecast-precip{color:var(--text-secondary);opacity:.5;margin-top:4px;font-size:.75rem}.forecast-precip.has-precip{color:var(--accent-color);opacity:1;font-weight:500}.finance-widget{flex-direction:column;display:flex}.finance-grid{grid-template-columns:1fr 1fr;gap:16px;margin-top:8px;display:grid}.finance-card{background:#ffffff08;border:1px solid #ffffff0d;border-radius:16px;flex-direction:column;padding:16px;transition:transform .2s,background .2s;display:flex}.finance-card:hover{background:#ffffff0f;transform:translateY(-2px)}.finance-card.full-width{grid-column:1/-1}.finance-header{align-items:center;gap:12px;margin-bottom:12px;display:flex}.finance-icon{color:#fff;border-radius:12px;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.finance-icon.green{background:linear-gradient(135deg,#10b981,#059669)}.finance-icon.black{background:linear-gradient(135deg,#475569,#1e293b)}.finance-icon.orange{background:linear-gradient(135deg,#f59e0b,#d97706)}.finance-label{color:var(--text-secondary);font-size:.95rem;font-weight:500}.finance-value-row{align-items:baseline;gap:8px;display:flex}.finance-value{color:var(--text-primary);font-size:1.5rem;font-weight:700}@media (width<=400px){.finance-grid{grid-template-columns:1fr}}.traffic-widget{flex-direction:column;display:flex}.traffic-content{flex-direction:column;gap:16px;margin-top:8px;display:flex}.route-card{background:#ffffff08;border:1px solid #ffffff0d;border-radius:16px;flex-direction:column;padding:16px;transition:transform .2s,background .2s;display:flex}.route-card:hover{background:#ffffff0f;transform:translateY(-2px)}.route-header{align-items:center;gap:12px;margin-bottom:12px;display:flex}.route-icon{color:#fff;background:linear-gradient(135deg,#3b82f6,#1d4ed8);border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;gap:4px;min-width:64px;height:44px;padding:0 10px;display:flex}.route-icon.home-work{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}.route-icon.work-home{background:linear-gradient(135deg,#f59e0b,#d97706)}.route-arrow{opacity:.6}.route-name{color:var(--text-secondary,#ffffffb3);font-size:.95rem;font-weight:500}.route-details{align-items:baseline;gap:8px;display:flex}.route-time{color:var(--text-primary,#fff);font-size:1.5rem;font-weight:700}.time-distance-group{align-items:baseline;gap:12px;display:flex}.route-distance{color:var(--text-secondary,#ffffff80);font-size:.9rem;font-weight:500}.route-error{color:#ef4444;font-size:.9rem;font-weight:500}.loading-spinner{border:3px solid #ffffff1a;border-top-color:#fff;border-radius:50%;width:24px;height:24px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.route-data-wrapper{flex-direction:column;width:100%;display:flex}.traffic-chart-container{opacity:.7;width:100%;height:36px;margin-top:8px}.recharts-wrapper{outline:none!important}.traffic-tooltip{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;background:#141419d9;border:1px solid #ffffff1a;border-radius:8px;flex-direction:column;gap:2px;padding:6px 10px;display:flex;box-shadow:0 4px 12px #0000004d}.tooltip-time{color:#ffffff80;font-size:.75rem;font-weight:500}.tooltip-duration{color:#fff;font-size:.9rem;font-weight:700}.map-widget{flex-direction:column;gap:12px;min-height:200px;display:flex;padding:16px!important}.map-container{filter:grayscale()opacity(.5)contrast(.8);border:1px solid #ffffff0d;border-radius:12px;width:100%;height:120px;transition:filter .3s;overflow:hidden}.map-container:hover{filter:grayscale(.5)opacity(.8)contrast()}.map-links{flex-direction:column;gap:4px;display:flex}.map-link{color:var(--text-secondary);opacity:.5;white-space:nowrap;text-overflow:ellipsis;font-size:.7rem;text-decoration:none;transition:opacity .2s,color .2s;overflow:hidden}.map-link:hover{opacity:1;color:var(--accent-color);text-decoration:underline}.map-loading{width:100%;height:100%;color:var(--text-secondary);background:#0003;justify-content:center;align-items:center;font-size:.8rem;display:flex}.bedroom-air-widget{flex-direction:column;gap:16px;min-height:200px;display:flex}.air-main-grid{flex:1;grid-template-columns:1fr 1fr;gap:16px;display:grid}.air-card{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;padding:16px;transition:transform .2s,background .2s;display:flex}.air-card:hover{background:#ffffff14;transform:translateY(-2px)}.air-card-label{color:var(--text-secondary);margin-bottom:4px;font-size:.85rem;font-weight:500}.air-card-value{align-items:baseline;gap:4px;font-size:2rem;font-weight:700;display:flex}.air-card-value .unit{color:var(--text-secondary);font-size:.9rem;font-weight:400}.air-card-status{background:#0003;border-radius:20px;align-items:center;gap:4px;margin-top:8px;padding:4px 8px;font-size:.8rem;display:flex}.air-secondary-grid{grid-template-columns:1fr;gap:12px;display:grid}.air-item{background:#ffffff08;border:1px solid #ffffff0d;border-radius:12px;align-items:center;gap:12px;padding:8px 12px;display:flex}.air-item-info{flex-direction:column;display:flex}.air-item-label{color:var(--text-secondary);font-size:.75rem}.air-item-value{font-size:.95rem;font-weight:600}.air-item-value .unit{opacity:.7;font-size:.75rem;font-weight:400}.text-green{color:#4ade80}.text-yellow{color:#facc15}.text-red{color:#f87171}.text-blue{color:#60a5fa}.text-white{color:#fff}.text-gray{color:#94a3b8}@media (width<=480px){.air-main-grid{grid-template-columns:1fr}}.air-waiting-state{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:10px;padding:24px 16px;display:flex}.air-waiting-icon{color:var(--text-secondary,#94a3b8);opacity:.6;margin-bottom:4px}.air-pulse{animation:1.8s ease-in-out infinite airPulse}@keyframes airPulse{0%,to{opacity:.4;transform:scale(1)}50%{opacity:.9;transform:scale(1.1)}}.air-waiting-title{color:var(--text-primary,#e2e8f0);margin:0;font-size:1rem;font-weight:600}.air-waiting-subtitle{color:var(--text-secondary,#94a3b8);white-space:pre-line;max-width:220px;margin:0;font-size:.8rem;line-height:1.5}.air-waiting-mac{color:var(--text-secondary,#94a3b8);opacity:.5;letter-spacing:.1em;margin-top:6px;font-family:monospace;font-size:.72rem}.dashboard-container{flex-direction:column;gap:24px;width:100%;display:flex}.dashboard-header{margin-bottom:8px}.header-content{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.dashboard-title{background:linear-gradient(90deg,#f8fafc,#94a3b8);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:4px;font-size:2rem;font-weight:700}.dashboard-subtitle{color:var(--text-secondary);font-size:1rem}.datetime-display{text-align:right;background:#0003;border:1px solid #ffffff0d;border-radius:16px;padding:12px 20px}.datetime-display .time{color:var(--accent-color);margin-bottom:4px;font-size:2rem;font-weight:700;line-height:1}.datetime-display .date{color:var(--text-secondary);text-transform:capitalize;font-size:.9rem}.widgets-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;width:100%;display:grid}.dashboard-footer{text-align:center;color:#94a3b880;margin-top:16px;font-size:.85rem}@media (width<=640px){.header-content{text-align:center;flex-direction:column;align-items:center}.datetime-display{text-align:center;width:100%}}.widget-wrapper{cursor:grab;flex-direction:column;height:100%;transition:opacity .2s,transform .2s;display:flex}.widget-wrapper>*{flex:1}.widget-wrapper:active{cursor:grabbing}.widget-wrapper.dragging{opacity:.4;transform:scale(.98)}