:root{--bg-color:#0a0a0c;--card-bg:#ffffff0d;--accent-color:#3b82f6;--accent-hover:#2563eb;--text-main:#f8fafc;--text-dim:#94a3b8;--glass-border:#ffffff1a}body{color:var(--text-main);background:var(--bg-color);margin:0;padding:0;font-family:-apple-system,sans-serif;overflow:hidden}.app-header{z-index:10;background:var(--card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:100px;align-items:center;gap:2rem;padding-left:6px;padding-right:6px;display:flex;position:fixed;top:20px;left:50%;transform:translate(-50%);box-shadow:0 8px 32px #0006}@media screen and (width<=500px){.app-header{border-radius:12px;flex-direction:column;gap:10px;padding:1rem}}.status-group{color:var(--text-dim);align-items:center;font-size:.9rem;display:flex}#peer_id{color:var(--text-main);font-family:monospace;font-weight:600}.connect-form{gap:.5rem;display:flex}input[type=text]{border:1px solid var(--glass-border);color:#fff;background:#0000004d;border-radius:20px;outline:none;padding:.5rem 1rem;transition:border .2s}input[type=text]:focus{border-color:var(--accent-color)}button{cursor:pointer;border:none;border-radius:20px;padding:.5rem 1.25rem;font-weight:600;transition:all .2s}.primary-btn{background:var(--accent-color);color:#fff}.primary-btn:hover{background:var(--accent-hover);transform:translateY(-1px)}.secondary-btn{color:var(--text-dim);border:1px solid var(--glass-border);background:0 0;font-size:.75rem}#video_container{background:radial-gradient(circle,#111,#000);justify-content:center;align-items:center;width:100vw;height:100vh;display:flex}video{object-fit:contain;max-width:100%;max-height:100%}