@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";:root{--primary:#0058bc;--primary-hover:#06c;--primary-container:#0070eb;--surface:#fcf8fb;--surface-container-lowest:#fff;--surface-container-low:#f2eff4;--surface-container:#ece9ef;--surface-container-high:#e6e3e9;--surface-container-highest:#e0dde3;--on-surface:#1b1b1d;--on-surface-variant:#47474a;--outline-variant:#47474a26;--status-online:#16a34a;--status-offline:#9ca3af;--status-alert:#dc2626;--status-warn:#d97706;--radius-sm:10px;--radius-md:12px;--radius-lg:16px;--radius-xl:1.5rem;--radius-full:9999px;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;--shadow-ambient:0 20px 60px #1b1b1d0f;--shadow-float:0 40px 80px #1b1b1d14;--shadow-card:0 8px 32px #1b1b1d0d;--glass-bg:#fcf8fbbf;--glass-blur:blur(20px);--font-family:"Inter", -apple-system, BlinkMacSystemFont, sans-serif}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;font-family:var(--font-family);background:var(--surface);color:var(--on-surface);-webkit-font-smoothing:antialiased}.display-lg{letter-spacing:-.03em;font-size:3.5rem;font-weight:700;line-height:1.1}.display-md{letter-spacing:-.02em;font-size:2.5rem;font-weight:700;line-height:1.15}.display-sm{letter-spacing:-.02em;font-size:2rem;font-weight:600;line-height:1.2}.headline{font-size:1.25rem;font-weight:600;line-height:1.35}.title{font-size:1rem;font-weight:600;line-height:1.4}.body{font-size:.9375rem;font-weight:400;line-height:1.6}.label-lg{font-size:.875rem;font-weight:500}.label-md{color:var(--on-surface-variant);font-size:.75rem;font-weight:500}.label-sm{color:var(--on-surface-variant);text-transform:uppercase;letter-spacing:.06em;font-size:.625rem;font-weight:500}.app-shell{grid-template-rows:auto 1fr;grid-template-columns:240px 1fr;min-height:100vh;display:grid}.sidebar-desktop{display:block}.hamburger-btn{display:none}.app-nav{z-index:100;background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);padding:var(--sp-4) var(--sp-6);box-shadow:0 1px 0 var(--outline-variant);grid-column:1/-1;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.app-sidebar{background:var(--surface-container-low);padding:var(--sp-6) var(--sp-4);border-right:none}.app-content{padding:var(--sp-8) var(--sp-10);overflow-y:auto}.btn{align-items:center;gap:var(--sp-2);font-family:var(--font-family);cursor:pointer;white-space:nowrap;border:none;font-size:.875rem;font-weight:500;transition:opacity .15s,transform .1s;display:inline-flex}.btn:active{transform:scale(.98)}.btn-primary{background:linear-gradient(135deg, var(--primary), var(--primary-container));color:#fff;padding:10px var(--sp-5);border-radius:var(--radius-sm);box-shadow:0 4px 16px #0058bc40}.btn-primary:hover{opacity:.92}.btn-secondary{background:var(--surface-container-highest);color:var(--on-surface);padding:10px var(--sp-5);border-radius:var(--radius-sm)}.btn-secondary:hover{background:var(--surface-container-high)}.btn-ghost{color:var(--primary);padding:8px var(--sp-3);border-radius:var(--radius-sm);background:0 0}.btn-ghost:hover{background:var(--surface-container-low)}.btn-sm{padding:6px var(--sp-3);font-size:.8125rem}.btn-icon{border-radius:var(--radius-md);padding:8px}.card{background:var(--surface-container-lowest);border-radius:var(--radius-xl);padding:var(--sp-6);box-shadow:var(--shadow-card)}.card-sm{background:var(--surface-container-low);border-radius:var(--radius-lg);padding:var(--sp-4) var(--sp-5)}.sensor-card{background:var(--surface-container-lowest);border-radius:var(--radius-xl);padding:var(--sp-5) var(--sp-6);box-shadow:var(--shadow-card);gap:var(--sp-4);flex-direction:column;transition:transform .25s,box-shadow .25s;animation:.4s cubic-bezier(.22,1,.36,1) both card-enter;display:flex}.sensor-card:hover{box-shadow:var(--shadow-ambient);transform:translateY(-3px)}.sensor-card__header{justify-content:space-between;align-items:center;display:flex}.sensor-card__icon{border-radius:var(--radius-full);background:var(--surface-container-highest);flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.sensor-card__value{letter-spacing:-.03em;color:var(--on-surface);font-variant-numeric:tabular-nums;font-size:2rem;font-weight:700;line-height:1}.sensor-card__unit{color:var(--on-surface-variant);margin-top:2px;font-size:.75rem;font-weight:500}.status-badge{border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.05em;background:var(--surface-container-highest);align-items:center;gap:5px;padding:4px 10px;font-size:.6875rem;font-weight:600;display:inline-flex}.status-badge--online{color:var(--status-online);background:#dcfce7}.status-badge--offline{color:var(--status-offline);background:var(--surface-container-highest)}.status-badge--alert{color:var(--status-alert);background:#fee2e2}.status-dot{border-radius:var(--radius-full);background:currentColor;width:6px;height:6px}.status-dot--pulse{animation:2s ease-in-out infinite pulse-dot}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.category-pill{align-items:center;gap:var(--sp-2);padding:8px var(--sp-4);border-radius:var(--radius-full);background:var(--surface-container-high);color:var(--on-surface-variant);cursor:pointer;font-size:.8125rem;font-weight:500;transition:background .15s,color .15s;display:inline-flex}.category-pill:hover,.category-pill--active{background:linear-gradient(135deg, var(--primary), var(--primary-container));color:#fff}.nav-item{align-items:center;gap:var(--sp-3);padding:10px var(--sp-4);border-radius:var(--radius-md);color:var(--on-surface-variant);cursor:pointer;font-size:.875rem;font-weight:500;text-decoration:none;transition:background .15s,color .15s;display:flex}.nav-item:hover{background:var(--surface-container);color:var(--on-surface)}.nav-item--active{background:var(--surface-container-highest);color:var(--primary);font-weight:600}.input{width:100%;padding:12px var(--sp-4);background:var(--surface-container-high);border-radius:var(--radius-sm);font-family:var(--font-family);color:var(--on-surface);border:none;outline:none;font-size:.9375rem;transition:background .15s,box-shadow .15s}.input::placeholder{color:var(--on-surface-variant)}.input:focus{background:var(--surface-container-lowest);box-shadow:0 0 0 2px var(--outline-variant)}.input-group{gap:var(--sp-2);flex-direction:column;display:flex}.input-label{color:var(--on-surface-variant);font-size:.8125rem;font-weight:500}select.input{cursor:pointer}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:200;padding:var(--sp-4);background:#1b1b1d59;justify-content:center;align-items:center;animation:.15s fade-in;display:flex;position:fixed;inset:0}.modal{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);border-radius:var(--radius-lg);padding:var(--sp-8);box-shadow:var(--shadow-float);width:100%;max-width:480px;animation:.2s slide-up}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes card-enter{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes value-pop{0%{opacity:.2;transform:translateY(-5px)scale(.95)}60%{opacity:1;transform:translateY(1px)scale(1.03)}to{opacity:1;transform:translateY(0)scale(1)}}.value-pop{animation:.35s cubic-bezier(.34,1.56,.64,1) both value-pop}.chart-container{background:var(--surface-container-lowest);border-radius:var(--radius-xl);padding:var(--sp-6);box-shadow:var(--shadow-ambient)}.flex{display:flex}.flex-col{flex-direction:column;display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:var(--sp-2)}.gap-3{gap:var(--sp-3)}.gap-4{gap:var(--sp-4)}.gap-5{gap:var(--sp-5)}.gap-6{gap:var(--sp-6)}.gap-8{gap:var(--sp-8)}.grid{display:grid}.text-muted{color:var(--on-surface-variant)}.w-full{width:100%}.section-gap{margin-top:var(--sp-10)}.page-title{margin-bottom:var(--sp-8)}@media (width<=768px){.app-shell{grid-template-columns:1fr}.sidebar-desktop{display:none}.hamburger-btn{display:flex}.app-content{padding:var(--sp-5)}.display-lg{font-size:2.25rem}}@keyframes slide-in-left{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton{background:linear-gradient(90deg, var(--surface-container) 25%, var(--surface-container-highest) 50%, var(--surface-container) 75%);border-radius:var(--radius-md);background-size:200% 100%;animation:1.4s ease-in-out infinite shimmer}@keyframes page-enter{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.page-transition{will-change:opacity, transform;animation:.35s cubic-bezier(.22,1,.36,1) both page-enter}.stagger-item{animation:.38s cubic-bezier(.22,1,.36,1) both card-enter;animation-delay:calc(var(--i,0) * 55ms)}