:root{--background: #fafafa;--foreground: #2e2e4d;--card-bg: #f2f2f7;--primary: #4214c4;--matte-accent: #6b5b95;--matte-accent-dark: #58487e;--error: #8b3a3a;--disabled: #9ca3af}@media(prefers-color-scheme:dark){:root{--background: #fafafa;--foreground: #1f1f38;--card-bg: #fff;--primary: #5b21b6;--matte-accent: #7c3aed;--matte-accent-dark: #6d28d9;--error: #f87171;--disabled: #6b7280}}*,*:before,*:after{box-sizing:border-box}*{margin:0}html{-webkit-text-size-adjust:100%;tab-size:4}body{margin:0;background:var(--background);color:var(--foreground);font-family:Arial,Helvetica,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}img,svg,video{display:block;max-width:100%;height:auto}button,input,select{font:inherit;color:inherit}button{background:none;border:0;cursor:pointer}input,select{background-color:#fff}a{color:inherit;text-decoration:inherit}.view{display:none}.view.active{display:block}.app-shell{position:relative;min-height:100vh;background:var(--background)}.navbar{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;align-items:center;background:#fff;border-top:1px solid #e5e7eb;padding:.5rem 1rem;z-index:20;transition:transform .3s ease}.navbar.hide{transform:translateY(100%)}.navbar .nav-item{display:flex;flex-direction:column;align-items:center;gap:0;padding:.5rem;color:#4b5563;transition:color .2s}.navbar .nav-item:hover{color:#3b82f6}.navbar .nav-item.active{color:#2563eb}.navbar .nav-item span{font-size:.75rem;line-height:1rem;margin-top:.25rem}@media(min-width:48rem){.navbar{inset:0 auto auto 0;width:16rem;height:100vh;flex-direction:column;justify-content:flex-start;align-items:flex-start;border-top:0;border-right:1px solid #e5e7eb;padding:1rem}.navbar.hide{transform:translate(-100%)}.navbar .nav-item{flex-direction:row;align-items:center;width:100%}.navbar .nav-item span{font-size:1rem;margin-top:0;margin-left:.75rem}.content{padding-left:16rem}}.navbar-icon{width:1.5rem;height:1.5rem}.nav-footer{text-align:center;padding:1rem 0;font-size:.875rem;color:var(--foreground);opacity:.2}.page{display:flex;flex-direction:column;width:100%;min-height:calc(100vh - 4rem);padding:1rem;color:#000;background:var(--background)}@media(min-width:48rem){.page{min-height:100vh;padding-left:16rem}}.page-inner{width:100%;max-width:72rem;margin-inline:auto}.content-inner{display:flex;justify-content:center;min-height:100vh}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.italic{font-style:italic}.break-all{word-break:break-all}.text-center{text-align:center}.text-right{text-align:right}.text-black{color:#000}.text-white{color:#fff}.text-gray-400{color:#9ca3af}.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}.text-gray-800{color:#1f2937}.text-blue-500{color:#3b82f6}.text-blue-600{color:#2563eb}.text-blue-700{color:#1d4ed8}.text-blue-800{color:#1e40af}.text-blue-900{color:#1e3a8a}.text-green-600{color:#16a34a}.text-red-500{color:#ef4444}.text-red-600{color:#dc2626}.text-red-800{color:#991b1b}.text-green-800{color:#166534}.text-yellow-800{color:#854d0e}.text-orange-800{color:#9a3412}.text-\[var\(--error\)\]{color:var(--error)}.text-\[var\(--foreground\)\]{color:var(--foreground)}.text-\[var\(--primary\)\]{color:var(--primary)}.opacity-20{opacity:.2}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-80{opacity:.8}.hover\:text-blue-500:hover{color:#3b82f6}.hover\:text-blue-800:hover{color:#1e40af}.hover\:text-\[var\(--matte-accent\)\]:hover{color:var(--matte-accent)}.bg-white{background-color:#fff}.bg-gray-100{background-color:#f3f4f6}.bg-gray-300{background-color:#d1d5db}.bg-gray-500{background-color:#6b7280}.bg-blue-500{background-color:#3b82f6}.bg-green-100{background-color:#dcfce7}.bg-red-100{background-color:#fee2e2}.bg-yellow-100{background-color:#fef9c3}.bg-orange-100{background-color:#ffedd5}.bg-\[var\(--background\)\]{background-color:var(--background)}.bg-\[var\(--card-bg\)\]{background-color:var(--card-bg)}.bg-\[var\(--matte-accent\)\]{background-color:var(--matte-accent)}.bg-\[var\(--matte-accent-dark\)\]{background-color:var(--matte-accent-dark)}.bg-\[var\(--disabled\)\]{background-color:var(--disabled)}.hover\:bg-blue-600:hover{background-color:#2563eb}.hover\:bg-gray-400:hover{background-color:#9ca3af}.hover\:bg-gray-600:hover{background-color:#4b5563}.hover\:bg-\[var\(--matte-accent-dark\)\]:hover{background-color:var(--matte-accent-dark)}.hover\:bg-\[var\(--hover-bg\)\]:hover{background-color:var(--hover-bg, transparent)}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-blue-50{--tw-gradient-stops: #eff6ff, var(--tw-gradient-to, #eff6ff)}.to-indigo-50{--tw-gradient-to: #eef2ff}.bg-gradient-sales{background-image:linear-gradient(to right,#eff6ff,#e0e7ff)}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pl-8{padding-left:2rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-10{margin-top:2.5rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.ml-1{margin-left:.25rem}.ml-4{margin-left:1rem}.mx-auto{margin-left:auto;margin-right:auto}.gap-2{gap:.5rem}.gap-4{gap:1rem}.space-y-1>*+*{margin-top:.25rem}.space-y-2>*+*{margin-top:.5rem}.space-y-3>*+*{margin-top:.75rem}.space-y-4>*+*{margin-top:1rem}.space-x-2>*+*{margin-left:.5rem}.space-x-3>*+*{margin-left:.75rem}.space-x-4>*+*{margin-left:1rem}.w-full{width:100%}.w-5{width:1.25rem}.h-5{height:1.25rem}.w-6{width:1.5rem}.h-6{height:1.5rem}.w-8{width:2rem}.h-8{height:2rem}.max-w-6xl{max-width:72rem}.max-w-md{max-width:28rem}.min-h-screen{min-height:100vh}.min-h-\[calc\(100vh-4rem\)\]{min-height:calc(100vh - 4rem)}.min-w-0{min-width:0}.flex{display:flex}.flex-col{flex-direction:column}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-around{justify-content:space-around}.justify-start{justify-content:flex-start}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.inline-flex{display:inline-flex}.block{display:block}.hidden{display:none}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}.top-0{top:0}.left-0{left:0}.right-0{right:0}.bottom-0{bottom:0}.left-2{left:.5rem}.top-1\/2{top:50%}.-translate-y-1\/2{transform:translateY(-50%)}.translate-y-0{transform:translateY(0)}.translate-y-full{transform:translateY(100%)}.z-10{z-index:10}.z-20{z-index:20}.overflow-x-hidden{overflow-x:hidden}.cursor-pointer{cursor:pointer}.border{border-width:1px;border-style:solid;border-color:#d1d5db}.border-t{border-top-width:1px;border-top-style:solid}.border-l-4{border-left-width:4px;border-left-style:solid}.border-gray-200{border-color:#e5e7eb}.border-gray-300{border-color:#d1d5db}.border-blue-200{border-color:#bfdbfe}.border-l-green-500{border-left-color:#22c55e}.border-l-orange-500{border-left-color:#f97316}.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.rounded-full{border-radius:9999px}.shadow{box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a}.shadow-sm{box-shadow:0 1px 2px #0000000d}.shadow-md{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.hover\:shadow-md:hover{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.hover\:shadow-lg:hover{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.focus\:ring-blue-500{--ring-color: #3b82f6}.focus\:ring-\[var\(--matte-accent\)\]{--ring-color: var(--matte-accent)}.focus\:ring-2:focus{outline:none;box-shadow:0 0 0 2px var(--ring-color, #2563eb)}.focus\:ring-blue-500:focus{outline:none;box-shadow:0 0 0 2px #3b82f6}.focus\:ring-\[var\(--matte-accent\)\]:focus{outline:none;box-shadow:0 0 0 2px var(--matte-accent)}.focus\:ring-blue-500,.focus\:outline-none{outline:none}.focus\:border-blue-500:focus{border-color:#3b82f6}.focus\:border-blue-500{border-color:#3b82f6}.focus\:ring-blue-500{--tw-ring-color: #3b82f6}.focus\:ring-2:focus{box-shadow:0 0 0 2px var(--tw-ring-color, #2563eb)}.input{width:100%;padding:.5rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff}.input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f6}.select-native{width:100%;padding:.5rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff}.select-native:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 1px #2563eb}.btn-primary{width:100%;padding:.5rem;border-radius:.375rem;color:#fff;background:var(--matte-accent)}.btn-primary:hover:not(:disabled){background:var(--matte-accent-dark)}.btn:disabled{background:var(--disabled);cursor:not-allowed}.btn-restart{background:#6b7280;color:#fff}.btn-restart:hover:not(:disabled){background:#4b5563}.btn-small{padding:.25rem .75rem;border-radius:.25rem;font-size:.875rem}.card{background:var(--card-bg);padding:1rem;border-radius:.5rem;box-shadow:0 1px 3px #0000001a}.card-white{background:#fff;padding:1rem;border-radius:.5rem;box-shadow:0 1px 3px #0000001a}.card-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr))}#devices-view .page-inner,#remote-view .page-inner{max-width:96rem}.kpi-value{font-size:1.5rem;font-weight:600}.kpi-label{font-size:.875rem;opacity:.8}.kpi-sub{font-size:.75rem;opacity:.7;margin-top:.25rem}.pill{display:inline-flex;align-items:center;padding:.125rem .625rem;border-radius:9999px;font-size:.75rem;font-weight:500}.pill-green{background:#dcfce7;color:#166534}.pill-red{background:#fee2e2;color:#991b1b}.pill-yellow{background:#fef9c3;color:#854d0e}.pill-orange{background:#ffedd5;color:#9a3412}.transition-colors{transition-property:color,background-color,border-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.highlight-effect{animation:pulse 2s ease-in-out}@keyframes pulse{0%{box-shadow:0 0 #22c55eb3}50%{box-shadow:0 0 15px 8px #22c55eb3}to{box-shadow:0 0 #22c55e00}}@media(min-width:40rem){.sm\:flex-row{flex-direction:row}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:48rem){.md\:pl-64{padding-left:16rem}.md\:min-h-screen{min-height:100vh}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(min-width:64rem){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:bg-\[var\(--disabled\)\]:disabled{background-color:var(--disabled)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}#toast{position:fixed;left:50%;bottom:5rem;transform:translate(-50%) translateY(.5rem);background:#1e1e2eeb;color:#fff;padding:.5rem 1rem;border-radius:.5rem;font-size:.875rem;max-width:min(90vw,24rem);text-align:center;opacity:0;pointer-events:none;z-index:50;transition:opacity .2s ease,transform .2s ease}#toast.show{opacity:1;transform:translate(-50%) translateY(0)}#toast.err{background:var(--error)}.filters-grid{display:grid;grid-template-columns:1fr;gap:1rem}@media(min-width:40rem){.filters-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(min-width:64rem){.filters-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}.filters-grid .search-field{grid-column:1 / -1}@media(min-width:64rem){.filters-grid .search-field{grid-column:auto}}