:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;background-color:#1a1a1a;color:#fff;margin:0;padding:0}body{margin:0;min-height:100vh}.container{max-width:900px;margin:0 auto;padding:20px}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;background:#333;padding:15px 25px;border-radius:12px}.status-badge{padding:5px 12px;border-radius:20px;font-size:.85rem;font-weight:700;text-transform:uppercase}.status-badge.online{background:#00b894;color:#fff}.status-badge.offline{background:#d63031;color:#fff}.video-stage{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;margin-bottom:30px;border:1px solid #444}.remote-video-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.remote-video{width:100%;height:100%;object-fit:cover}.placeholder{color:#666;font-size:1.2rem;text-align:center}.local-video-container{position:absolute;bottom:20px;right:20px;width:160px;aspect-ratio:4/3;border:2px solid white;border-radius:8px;overflow:hidden;background:#222;box-shadow:0 4px 10px #00000080}.local-video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.device-section h3{border-bottom:1px solid #444;padding-bottom:10px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;margin-top:20px}.card{background:#2d2d2d;border-radius:10px;padding:15px;transition:transform .2s;border:1px solid #444}.card:hover{transform:translateY(-3px);border-color:#666}.card-header{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:1.1rem}.status-online{color:#00b894;font-size:.9rem;margin:0 0 15px}.btn-call{width:100%;background-color:#0984e3;color:#fff;border:none;padding:10px;border-radius:6px;font-weight:700;cursor:pointer;transition:background .2s}.btn-call:hover{background-color:#0769b5}.chat-section{margin-top:30px}.chat-box{background:#2d2d2d;padding:20px;border-radius:12px;border:1px solid #0984e3}.subtitle-input{width:100%;padding:15px;font-size:1.3rem;background:#ffeb3b;color:#000;border:none;border-radius:6px;box-sizing:border-box;font-weight:700}.subtitle-input::placeholder{color:#555}.hint{color:#aaa;font-size:.9rem;margin-top:10px}.btn-hangup{width:100%;background-color:#d63031;color:#fff;border:none;padding:10px;border-radius:6px;font-weight:700;cursor:pointer;margin-top:10px}.btn-hangup:hover{background-color:#b02526}.active-card{border:2px solid #0984e3;background-color:#2d2d2d}.status-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#000000b3;color:#fff;padding:10px 20px;border-radius:20px;font-weight:700}