*{box-sizing:border-box}body{margin:0;font:16px Arial,sans-serif;color:#112b4b;background:#edf6ff}.app,.gate{min-height:100vh}.app nav{height:78px;padding:22px max(24px,6vw);display:flex;justify-content:space-between;background:#fff;border-bottom:1px solid #dce8f5}.app nav b{font-size:24px}.app nav em{color:#1778e8;font-style:normal}.app nav span{color:#176bc5}.card,.room,.gate section{max-width:720px;margin:9vh auto;padding:32px;border-radius:22px;background:#fff;box-shadow:0 18px 55px #174d8030}.card h1{margin-top:0}.actions{display:flex;gap:12px;flex-wrap:wrap}.actions button,.room header button,.gate button{border:0;border-radius:10px;padding:14px 20px;background:#1478e8;color:#fff;font-weight:bold;font-size:16px}.actions button:disabled{opacity:.5}.actions button:nth-child(2){background:#16a7c4}.gate{display:grid;place-items:center;background:linear-gradient(135deg,#eef7ff,#dceeff)}.gate section{margin:0;width:min(92vw,430px)}.gate input{width:100%;margin:14px 0;padding:14px;border:1px solid #bdd4f0;border-radius:10px;font-size:16px}.gate small,#error{display:block;margin-top:14px;color:#bf3e3e}.room{max-width:1050px;margin:36px auto}.room header{display:flex;justify-content:space-between;gap:20px;align-items:center}.room h1{margin:6px 0}.videos{display:grid;grid-template-columns:1fr 240px;gap:14px;height:440px}.videos>div{background:#0c1f36;border-radius:16px;overflow:hidden;color:#fff}.videos #remote{display:grid;place-items:center}.videos #local{min-height:180px}.captions{margin-top:20px;padding:18px;background:#f5f9ff;border-radius:14px}.captions #caps{max-height:220px;overflow:auto}.captions p{padding:10px;background:#fff;border-radius:8px}.captions strong{color:#0879b5}@media(max-width:700px){.app nav{height:auto}.room,.card{margin:20px 12px;padding:20px}.videos{height:420px;grid-template-columns:1fr}.videos #local{position:absolute;width:130px;height:170px;right:32px;top:205px}.room header{display:block}.room header button{margin-top:12px}}

@media (max-width:700px){
  .room .actions{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    flex-wrap:nowrap;
  }
  .room .actions button{
    min-width:0;
    padding:13px 4px;
    font-size:14px;
    white-space:nowrap;
  }
}