*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:#1a1f2e;justify-content:center;align-items:center;min-height:100dvh;padding:2rem;font-family:system-ui,-apple-system,sans-serif;display:flex}.shell{background:#fff;border-radius:1.25rem;width:100%;max-width:1100px;padding:1rem;box-shadow:0 24px 80px #00000073}.toolbar{align-items:center;gap:.625rem;margin-bottom:.875rem;display:flex}.toolbar-checkbox{color:#374151;white-space:nowrap;align-items:center;gap:.4rem;font-size:.8125rem;display:flex}.toolbar-checkbox input[type=checkbox]{accent-color:#4f46e5;cursor:pointer;width:1rem;height:1rem}.btn{cursor:pointer;white-space:nowrap;border:none;border-radius:.5rem;align-items:center;gap:.375rem;padding:.4rem .75rem;font-size:.8125rem;font-weight:500;transition:opacity .15s;display:inline-flex}.btn:hover{opacity:.85}.btn-actions{color:#fff;background:#4f46e5}.btn-secondary{color:#374151;background:#f3f4f6;border:1px solid #e5e7eb}.btn-primary{color:#fff;background:#111827;margin-left:auto}.search-wrap{flex:1;position:relative}.search-wrap svg{color:#9ca3af;position:absolute;top:50%;left:.625rem;transform:translateY(-50%)}.search-wrap input{color:#374151;background:#fff;border:1px solid #e5e7eb;border-radius:.5rem;outline:none;width:100%;padding:.4rem .625rem .4rem 2rem;font-size:.8125rem}.search-wrap input::placeholder{color:#9ca3af}.search-wrap input:focus{border-color:#4f46e5}.btn-icon{color:#374151;cursor:pointer;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:.5rem;justify-content:center;align-items:center;padding:.4rem .5rem;transition:opacity .15s;display:flex}.btn-icon:hover{opacity:.75}.device-grid{grid-template-columns:repeat(3,1fr);gap:.5rem;display:grid}.device-card{aspect-ratio:4/3;cursor:pointer;background:#111;border-radius:.75rem;position:relative;overflow:hidden}.device-card img{object-fit:cover;width:100%;height:100%;display:block}.device-card:before,.device-card:after{content:"";pointer-events:none;z-index:1;position:absolute;left:0;right:0}.device-card:before{background:linear-gradient(#0009,#0000);height:3.5rem;top:0}.device-card:after{background:linear-gradient(#0000,#000000a6);height:4rem;bottom:0}.card-header{z-index:2;align-items:center;gap:.375rem;padding:.5rem;display:flex;position:absolute;top:0;left:0;right:0}.card-checkbox{accent-color:#4f46e5;cursor:pointer;flex-shrink:0;width:.9rem;height:.9rem}.status-dot{border-radius:50%;flex-shrink:0;width:.5rem;height:.5rem}.status-dot.online{background:#22c55e}.status-dot.offline{background:#6b7280}.card-label{color:#fff;white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:.75rem;font-weight:500;overflow:hidden}.card-close{color:#fff;cursor:pointer;background:#ffffff26;border:none;border-radius:.25rem;flex-shrink:0;justify-content:center;align-items:center;width:1.25rem;height:1.25rem;transition:background .15s;display:flex}.card-close:hover{background:#ffffff4d}.card-controls{z-index:2;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;background:#1e1e28b8;border-radius:9999px;align-items:center;gap:.25rem;padding:.35rem .6rem;transition:opacity .4s;display:flex;position:absolute;bottom:.5rem;left:50%;transform:translate(-50%)}.device-card:hover .card-controls{opacity:.45}.device-card.active .card-controls{opacity:1;transition:opacity .15s}.ctrl-btn{color:#fff;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:1.75rem;height:1.75rem;transition:background .15s;display:flex}.ctrl-btn:hover{background:#ffffff26}.ctrl-btn svg{width:1rem;height:1rem}