.guestJoin{max-width:720px;margin:40px auto;padding:20px;font:16px system-ui;color:#e8f3ef;background:#14201f;border-radius:16px}body:has(.guestJoin){background:#0b1211}.guestJoin a{color:#c9ef82}.guestJoin label{display:block;margin:16px 0}.guestJoin input,.guestJoin select{display:block;box-sizing:border-box;width:100%;padding:12px;margin-top:6px;border:1px solid #5a7069;background:#0b1211;color:white;border-radius:8px}.guestJoin button,.guestPanel button{padding:10px 14px;border-radius:8px;border:1px solid #567064;background:#c9ef82;color:#102015;cursor:pointer}.guestJoin button:disabled,.guestPanel button:disabled{opacity:.5}.guestJoin video{width:100%;max-height:320px;background:#000;border-radius:10px}.guestPanel{padding:14px;border:1px solid #53655f;border-radius:12px;margin:12px 0}.guestPanel summary{cursor:pointer;font-weight:bold}.guestCard{padding:12px;margin-top:12px;border:1px solid #53655f;border-radius:10px}.guestCard video{width:220px;max-width:100%;background:#000}.guestCard label{display:block;margin:8px 0}.guestCard button{margin:4px}.guestCode{font:700 28px monospace;letter-spacing:3px}.guestCard [data-state=onair]{color:#ff6666;font-weight:bold}.guestCard meter{width:160px;max-width:100%}

.guestCard{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:800px;background:#14201f;color:#e8f3ef}.guestCard h3,.guestCard [data-state],.guestCard>p{flex-basis:100%;margin:4px 0}.guestCard .guestCode{flex-basis:auto}.guestQR{margin-left:auto;background:white;max-width:150px}.guestQR svg{width:100%;height:auto;display:block}.guestCard label{flex-basis:45%}.guestCard input[type=range]{max-width:100%}.guestPanel select{max-width:100%;padding:8px;margin:8px}.guestCard video{width:100%;max-height:220px;object-fit:contain}.guestCard button{font:inherit}.guestJoin button{margin:4px 0}.guestJoin [hidden]{display:none}@media(max-width:500px){.guestJoin{margin:0;padding:14px}.guestCard label{flex-basis:100%}.guestPanel{padding:8px}.guestQR{max-width:110px}}

.guestQuick{position:relative;display:inline-block;margin:0 4px}.guestQuick>summary{cursor:pointer;padding:9px 12px;border:1px solid #53655f;border-radius:8px;background:#203330}.guestQuickBody{position:absolute;z-index:90;top:100%;left:0;width:230px;max-width:80vw;display:grid;gap:6px;padding:10px;background:#14201f;border:1px solid #53655f;border-radius:10px;box-shadow:0 8px 24px #0008}.guestQuickBody select,.guestQuickBody button{width:100%;margin:0;padding:8px}.guestQuickBody button{cursor:pointer}.guestQuick:not([open])>.guestQuickBody{display:none}