*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:20px}.container{max-width:1200px;margin:0 auto}.header{text-align:center;color:#fff;margin-bottom:30px}.header h1{font-size:2.5em;margin-bottom:10px}.header p{font-size:1.1em;opacity:.9}.card{background:#fff;border-radius:12px;padding:25px;margin-bottom:20px;box-shadow:0 10px 30px #0003}.card h2{margin-bottom:15px;color:#333;font-size:1.5em}.connection-controls{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:15px}input{width:100%;padding:12px;border:2px solid #e0e0e0;border-radius:6px;font-size:14px;transition:border-color .3s}input:focus{outline:none;border-color:#667eea}button{padding:12px 24px;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s}.btn-primary{background:#667eea;color:#fff}.btn-primary:hover{background:#5568d3;transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.btn-secondary{background:#e0e0e0;color:#333}.btn-secondary:hover{background:#d0d0d0}.btn-danger{background:#ef4444;color:#fff}.btn-danger:hover{background:#dc2626}button:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.status-badge{display:inline-block;padding:6px 12px;border-radius:20px;font-size:13px;font-weight:600}.status-connected{background:#10b981;color:#fff}.status-disconnected{background:#ef4444;color:#fff}.log-container{height:250px;overflow-y:auto;background:#f9fafb;border-radius:6px;padding:15px;font-family:Monaco,Courier New,monospace;font-size:13px}.log-entry{padding:6px 10px;margin-bottom:4px;border-radius:4px;background:#64748b0d;line-height:1.5}.log-entry.success{color:#059669;background:#10b9811a}.log-entry.error{color:#dc2626;background:#ef44441a}.log-entry.info{color:#2563eb;background:#2563eb1a}.log-entry.warning{color:#d97706;background:#f59e0b1a}.peer-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}.peer-item{background:#f3f4f6;padding:8px 16px;border-radius:6px;font-size:13px;font-weight:500;color:#374151}.chat-controls{display:flex;gap:10px;margin-top:15px}.chat-controls input{flex:1}#chatContainer{height:300px;overflow-y:auto;background:#f9fafb;border-radius:6px;padding:15px;margin-bottom:15px}#chatContainer p{color:#64748b;text-align:center;padding:20px}