*{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}body{margin:0;padding:0;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}.page-container{padding:40px 20px;max-width:900px;margin:0 auto}.panel-card{background:#fff;border-radius:20px;box-shadow:0 10px 30px #0003;padding:30px;margin-bottom:20px}h1{color:#333;margin-top:0}.panel-card h2{margin-top:0;color:#555;font-size:1.2em}.form-group{margin-bottom:15px}label{display:block;margin-bottom:5px;font-weight:500;color:#555}input[type=text],input[type=url]{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;font-size:14px}button{padding:10px 20px;background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;margin-right:10px}button:hover{background:#0056b3}button:disabled{background:#ccc;cursor:not-allowed}button.danger{background:#dc3545}button.danger:hover{background:#c82333}button.success{background:#28a745}.status{display:inline-block;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:500}.status.connected{background:#d4edda;color:#155724}.status.disconnected{background:#f8d7da;color:#721c24}.peers-list{list-style:none;padding:0;margin:0}.peers-list li{display:flex;align-items:center;justify-content:space-between;padding:10px;background:#f8f9fa;margin-bottom:5px;border-radius:4px}.peers-list .peer-id{font-family:monospace;font-size:13px}.peers-list .peer-status{font-size:12px}.messages{height:300px;overflow-y:auto;border:1px solid #ddd;border-radius:4px;padding:10px;background:#fafafa;font-family:monospace;font-size:13px}.messages .msg{margin-bottom:8px;padding:8px;border-radius:4px}.messages .msg.sent{background:#cce5ff;text-align:right}.messages .msg.received{background:#e2e3e5}.messages .msg.system{background:#fff3cd;font-style:italic}.messages .msg .meta{font-size:11px;color:#666;margin-bottom:4px}.send-form{display:flex;gap:10px;margin-top:15px}.send-form input{flex:1}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:15px}.stat-box{text-align:center;padding:15px;background:#f8f9fa;border-radius:4px}.stat-box .value{font-size:24px;font-weight:700;color:#007bff}.stat-box .label{font-size:12px;color:#666;margin-top:5px}#connectionLog{max-height:150px;overflow-y:auto;font-size:12px;background:#2d2d2d;color:#f8f8f2;padding:10px;border-radius:4px;font-family:monospace}#connectionLog .log-entry{margin-bottom:3px}#connectionLog .log-entry.info{color:#8be9fd}#connectionLog .log-entry.success{color:#50fa7b}#connectionLog .log-entry.error{color:#f55}#connectionLog .log-entry.warn{color:#f1fa8c}.transport-badge{display:inline-block;padding:2px 6px;border-radius:3px;font-size:10px;font-weight:700;margin-left:8px;text-transform:uppercase}.transport-badge.webrtc{background:#28a745;color:#fff}.transport-badge.signaling{background:#6c757d;color:#fff}.room-info{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;background:#e7f3ff;border-radius:4px;font-size:14px}.room-info .room-stat{display:flex;align-items:center;gap:5px}.room-info .room-stat .icon{font-size:16px}.room-info .room-stat .count{font-weight:700;color:#007bff}