:root{font-family:Inter,system-ui,sans-serif;color:#eef5fa;background:#0c1724;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 90% 10%,#18444888,transparent 55%);min-height:100vh}main{max-width:1040px;margin:auto;padding:32px 24px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:64px}.brand{font-size:14px;letter-spacing:3px;font-weight:800}.badge{font-size:12px;border:1px solid #41626a;padding:8px 12px;border-radius:30px;color:#96e1cd}.eyebrow{color:#91d8c5;font-size:13px;letter-spacing:1px}h1{font-size:clamp(42px,7vw,72px);line-height:1.05;letter-spacing:-2px;margin:20px 0}.intro{color:#a7b9c8;line-height:1.7;font-size:18px}form{max-width:420px;margin-top:32px}label{display:block;font-size:13px;color:#bed0dd;margin:20px 0}input{display:block;width:100%;border:1px solid #3b5061;background:#172737;border-radius:12px;padding:16px;margin-top:8px;font-size:16px;color:white}input:focus{outline:2px solid #8bdec7}button{border:0;background:#9fe9d3;color:#112c29;border-radius:12px;padding:15px 20px;font-size:15px;font-weight:700;cursor:pointer;min-height:48px}button:disabled{opacity:.5;cursor:wait}form button{width:100%;display:flex;justify-content:space-between}.hint,footer{font-size:12px;line-height:1.7;color:#8ea4b5}footer{margin-top:44px}#status{color:#a7d6db;font-size:14px;min-height:22px;margin-top:24px}.room-title{display:flex;align-items:center;justify-content:space-between}.room-title h1{font-size:40px}#people{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.person{position:relative;min-height:240px;border:1px solid #304653;background:#172a3a;border-radius:20px;overflow:hidden;display:flex;align-items:center;justify-content:center}.person.speaking{border:2px solid #9fe9d3}.avatar{font-size:52px;color:#a1ddce}.person video{width:100%;height:100%;position:absolute;object-fit:cover}.person .label{position:absolute;bottom:12px;left:12px;border-radius:8px;background:#0a1523c9;padding:8px 12px;font-size:13px}nav{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}nav button{background:#283e50;color:#eef5fa}nav .danger{background:#75383f}button:focus-visible{outline:3px solid white;outline-offset:3px}[hidden]{display:none!important}@media(min-width:800px){#welcome{position:relative}#welcome form{position:absolute;right:0;top:0;width:42%}#welcome{min-height:410px}}@media(max-width:480px){main{padding:24px 20px}header{margin-bottom:40px}.brand{font-size:12px}#people{grid-template-columns:1fr}.person{min-height:220px}nav button{flex:1 1 42%}}
body.in-call{background:#080d13;overflow:hidden}body.in-call main{max-width:none;padding:0}body.in-call header,body.in-call footer{display:none}body.in-call #call{position:fixed;inset:0;display:flex;flex-direction:column;height:100dvh;padding-top:env(safe-area-inset-top)}body.in-call .room-title{flex:none;padding:12px 20px;background:#101923;gap:16px}body.in-call .room-title h1{font-size:16px;letter-spacing:0;margin:0}body.in-call #count{font-size:12px;color:#a7b9c8}body.in-call #people{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex:1;min-height:0;padding:12px;overflow:auto}body.in-call .person{flex:0 0 100px;width:160px;min-height:0;border-radius:12px;z-index:2;cursor:pointer;box-shadow:0 3px 14px #0008}body.in-call .person.featured{position:absolute;inset:0;width:100%;height:100%;border-radius:0;z-index:1;box-shadow:none;border:0}body.in-call .person video{object-fit:contain;background:#080d13}body.in-call .person.camera-off video{visibility:hidden}body.in-call .person .label{font-size:11px;bottom:6px;left:6px;padding:5px 8px;max-width:95%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}body.in-call .person.featured .label{bottom:14px;left:14px;font-size:14px}body.in-call .person.speaking{outline:2px solid #9fe9d3;outline-offset:-2px}body.in-call nav{flex:none;justify-content:center;gap:8px;margin:0;padding:12px 12px calc(36px + env(safe-area-inset-bottom));background:#101923;z-index:3}body.in-call nav button{font-size:13px;padding:12px 15px;flex:0 1 auto}body.in-call #status{position:fixed;bottom:env(safe-area-inset-bottom);left:8px;right:8px;text-align:center;font-size:11px;margin:0;padding:6px;z-index:4;pointer-events:none;min-height:24px}body.in-call #people.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));grid-auto-rows:minmax(160px,1fr);overflow:auto;align-items:stretch}body.in-call #people.gallery .person{position:relative;inset:auto;width:100%;height:100%;min-height:160px;border-radius:12px}body.in-call .person:focus-visible{outline:3px solid white;outline-offset:-3px}@media(max-width:600px){body.in-call .person{width:104px;flex-basis:138px}body.in-call #people{gap:8px;padding:8px}body.in-call nav{gap:6px}body.in-call nav button{font-size:12px;padding:10px;min-height:44px}body.in-call #people.gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(180px,1fr)}}@media(max-height:500px) and (orientation:landscape){body.in-call .room-title{padding:6px 16px}body.in-call nav{padding-top:6px;padding-bottom:28px}body.in-call .person{width:130px;flex-basis:80px}}
/* Compact bottom dock and draggable self preview. */
body.in-call .room-title{position:absolute;top:0;left:0;right:0;z-index:3;padding:8px 14px;background:linear-gradient(#0009,transparent);pointer-events:none}body.in-call .room-title h1{font-size:12px}body.in-call #people{padding-top:32px;margin-bottom:calc(64px + env(safe-area-inset-bottom))}body.in-call nav{position:absolute;bottom:0;left:0;right:0;flex-wrap:nowrap;gap:6px;padding:8px 6px calc(8px + env(safe-area-inset-bottom));height:calc(64px + env(safe-area-inset-bottom));align-items:center}body.in-call nav button{padding:10px;width:44px;height:44px;min-width:36px;min-height:44px;flex:0 1 44px;border-radius:50%;display:flex;align-items:center;justify-content:center}nav button svg{width:22px;height:22px;flex-shrink:0}body.in-call nav button.off{background:#f3f5f8;color:#293240}body.in-call nav .danger{background:#d43d4f;color:white}body.in-call #people:not(.gallery) .person.self:not(.featured){position:absolute;z-index:4;width:110px;height:146px;flex:none;touch-action:none;user-select:none;cursor:grab}body.in-call #people:not(.gallery) .person.self:not(.featured):active{cursor:grabbing}body.in-call #status{bottom:calc(68px + env(safe-area-inset-bottom));left:8px;right:8px;color:white;text-shadow:0 1px 4px #000;pointer-events:none}body.in-call #status:empty{display:none}body.in-call .person .label{pointer-events:none}@media(min-width:700px){body.in-call #people:not(.gallery) .person.self:not(.featured){width:170px;height:120px}}@media(max-height:500px){body.in-call #people:not(.gallery) .person.self:not(.featured){width:120px;height:80px}}

body.in-call nav button.selected{background:#9fe9d3;color:#112c29}body.in-call nav{gap:3px}body.in-call nav button{min-width:32px;padding:8px}@media(max-width:360px){body.in-call nav{gap:2px;padding-left:2px;padding-right:2px}body.in-call nav button{min-width:30px;padding:5px}}

#welcome form{position:static;width:100%;max-width:440px;margin:24px 0}#welcome{min-height:0}#auth{display:flex;flex-wrap:wrap;gap:24px}#auth .hint{flex-basis:100%}#lobby{max-width:660px}select{display:block;width:100%;padding:16px;border:1px solid #3b5061;background:#172737;color:white;border-radius:12px;font-size:16px;margin-top:8px}details{margin:24px 0;border-top:1px solid #3b5061;padding-top:16px}summary{cursor:pointer}#room-owner button,#logout,#accept-invite{margin:6px 6px 6px 0}#account-status{color:#a7d6db}#invite-link{font-size:13px}

.member-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0}.member-row button{font-size:12px;flex-shrink:0}.member-row span{overflow-wrap:anywhere}