.remote-computer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.remote-computer-card{overflow:hidden;background:#fff;border:1px solid #e1e6eb;border-radius:12px}
.remote-screen{height:126px;position:relative;display:grid;place-items:center;background:linear-gradient(145deg,#f4f6f9,#e8edf3)}
.remote-screen:after{content:"";position:absolute;bottom:15px;width:62%;height:5px;border-radius:9px;background:#cbd3dc}
.remote-screen-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:13px;background:#fff;color:#1769e0;font-size:18px;font-weight:700;box-shadow:0 7px 25px rgba(35,52,74,.1)}
.remote-live{position:absolute;right:12px;top:12px;border-radius:20px;padding:4px 8px;background:#eef1f4;color:#788491;font-size:9px}
.remote-live.online{background:#e6f6ee;color:#187c53}
.remote-card-body{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px}
.remote-card-body h3{margin:0;font-size:12px}.remote-card-body p{margin:4px 0 0;color:#8d97a3;font-size:9px}
.remote-modal{width:min(1500px,calc(100% - 24px));height:min(920px,calc(100% - 24px));padding:0;border:0;border-radius:13px;box-shadow:0 24px 80px rgba(20,30,44,.3);overflow:hidden}
.remote-modal::backdrop{background:rgba(18,27,39,.5)}
.remote-modal>header{height:64px;padding:10px 14px 10px 17px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e4e8ed;background:#fff}
.remote-modal>header>div:last-child{display:flex;gap:8px}.remote-modal h2{margin:0;font-size:14px}.remote-modal p{margin:4px 0 0;color:#8b95a2;font-size:9px}
.remote-modal iframe{width:100%;height:calc(100% - 64px);border:0;background:#f1f3f5}
@media(max-width:980px){.remote-computer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.remote-computer-grid{grid-template-columns:1fr}.remote-modal{width:100%;height:100%;max-width:none;max-height:none;border-radius:0}}