:root{--color-bg:#f8fafc;--color-bg-card:rgba(255,255,255,.95);--color-border:rgba(0,0,0,.1);--color-text:#1e293b;--color-text-dim:#64748b;--color-primary:#2563eb;--color-pm25:#3b82f6;--color-aqi:#fb923c;--color-success:#10b981;--color-warning:#f59e0b;--spacing-xs:.5rem;--spacing-sm:1rem;--spacing-md:1.5rem;--spacing-lg:2rem;--spacing-xl:3rem;--radius:12px;--shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{color:var(--color-text);background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.6;overflow-x:hidden}.header{padding:var(--spacing-lg)var(--spacing-md);text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-border);z-index:100;background:rgba(255,255,255,.8);position:-webkit-sticky;position:sticky;top:0}.header h1{background:linear-gradient(135deg,#2563eb 0%,#7c3aed 100%);-webkit-text-fill-color:transparent;margin-bottom:var(--spacing-xs);-webkit-background-clip:text;background-clip:text;font-size:2rem;font-weight:700}.header p{color:var(--color-text-dim);font-size:.95rem}.time-range-selector{gap:var(--spacing-xs);margin-top:var(--spacing-md);flex-wrap:wrap;justify-content:center;display:flex}.time-range-btn{padding:var(--spacing-xs)var(--spacing-md);border:2px solid var(--color-border);cursor:pointer;color:var(--color-text);background:#fff;border-radius:6px;font-size:.875rem;font-weight:500;transition:all .2s}.time-range-btn:hover{border-color:var(--color-primary);background:rgba(37,99,235,.05)}.time-range-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff;font-weight:600}@media (max-width:768px){.time-range-selector{margin-top:var(--spacing-sm);gap:.25rem}.time-range-btn{padding:.375rem .625rem;font-size:.75rem}}.container{max-width:1400px;padding:var(--spacing-lg);margin:0 auto}.loading,.error{text-align:center;padding:var(--spacing-xl);font-size:1.1rem}.loading{color:var(--color-primary)}.error{color:#ef4444;border-radius:var(--radius);margin:var(--spacing-md);background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3)}.sensors-grid{gap:var(--spacing-lg);margin-top:var(--spacing-lg);grid-template-columns:repeat(auto-fit,minmax(500px,1fr));display:grid}@media (max-width:768px){.sensors-grid{grid-template-columns:1fr}}.sensor-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--spacing-md);box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}.sensor-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.sensor-card-header{margin-bottom:var(--spacing-md);justify-content:space-between;align-items:center;gap:var(--spacing-sm);flex-wrap:wrap;display:flex}.sensor-title{color:var(--color-text);font-size:1.25rem;font-weight:600}.toggle-controls{gap:var(--spacing-xs);display:flex}.toggle-btn{padding:var(--spacing-xs)var(--spacing-sm);cursor:pointer;color:var(--color-text-dim);background:rgba(0,0,0,.05);border:2px solid transparent;border-radius:6px;font-size:.875rem;font-weight:500;transition:all .2s}.toggle-btn:hover{background:rgba(0,0,0,.1)}.toggle-btn.active{color:#fff;font-weight:600}.toggle-btn.pm25.active{background:var(--color-pm25);border-color:var(--color-pm25)}.toggle-btn.aqi.active{background:var(--color-aqi);border-color:var(--color-aqi)}.chart-container{width:100%;height:350px;margin-top:var(--spacing-md);position:relative;overflow-x:auto;overflow-y:hidden}@media (max-width:768px){.chart-container{-webkit-overflow-scrolling:touch;min-width:600px;height:400px;overflow-x:scroll}.sensor-card{overflow-x:auto}}.chart-loading,.chart-error,.chart-empty{height:100%;color:var(--color-text-dim);justify-content:center;align-items:center;font-size:.95rem;display:flex}.chart-error{color:#ef4444}@media (max-width:640px){.header h1{font-size:1.5rem}.sensor-card{padding:var(--spacing-sm)}.sensor-title{font-size:1.1rem}.chart-container{height:300px}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.sensor-card{animation:.4s ease-out fadeIn}.footer{text-align:center;padding:var(--spacing-lg)var(--spacing-md);color:var(--color-text-dim);border-top:1px solid var(--color-border);margin-top:var(--spacing-xl);font-size:.875rem}.footer p{margin:0}.footer-link{color:var(--color-primary);font-weight:500;text-decoration:none;transition:color .2s}.footer-link:hover{color:#1d4ed8;text-decoration:underline}