:root{color-scheme:dark;--pink:#ea3167;--bg:#050505;--panel:#190710;--line:rgba(255,255,255,.12)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#fff;font-family:Arial,sans-serif}
main{min-height:100vh;padding:18px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
h1,h2,p{margin-top:0}h1{font-size:42px;margin-bottom:0}small{color:var(--pink);font-weight:900;letter-spacing:.15em}
#status,#count{padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:#ffffff0f}
#join{max-width:560px;margin:8vh auto;padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:20px}
form{display:grid;gap:14px}label{display:grid;gap:6px;font-weight:800;color:#ffffffb3}
input,button{font:inherit}input{padding:12px;border-radius:10px;border:1px solid var(--line);background:#0008;color:#fff}
button{padding:12px;border-radius:10px;border:1px solid var(--line);background:#ffffff14;color:#fff;font-weight:900;cursor:pointer}
form button{background:var(--pink);border:0}
#roomView{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(320px,.8fr);gap:14px;min-height:calc(100vh - 105px)}
.class,aside{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.class video{width:100%;height:100%;min-height:420px;background:#000;object-fit:contain}
aside{padding:14px;display:grid;grid-template-rows:auto 1fr auto}.asideHead{display:flex;justify-content:space-between;align-items:center}
#grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:center}
.tile{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#111;border:1px solid var(--line)}
.tile video{width:100%;height:100%;object-fit:cover}.tile.local video{transform:scaleX(-1)}
.name{position:absolute;left:7px;right:7px;bottom:7px;padding:5px 7px;border-radius:7px;background:#000b;font-weight:900;font-size:13px}
.controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}#leave{background:#7f1d1d}
#error{position:fixed;right:18px;bottom:18px;max-width:450px;padding:13px;background:#650000;border-radius:10px}
@media(max-width:900px){#roomView{grid-template-columns:1fr}.class{min-height:50vh}aside{min-height:42vh}}