:root { font: 16px/1.4 system-ui, sans-serif; color-scheme: dark light; }
body { margin: 0; }
.container { max-width: 720px; margin: 4rem auto; padding: 0 1rem; }
.card { background: color-mix(in oklab, Canvas, CanvasText 3%); padding: 1rem; border-radius: 12px; margin: 1rem 0; }
.room { display: grid; grid-template-columns: 1fr 320px; gap: 1rem; padding: 1rem; }
.video-wrap { background: black; border-radius: 12px; overflow: hidden; }
video { width: 100%; height: auto; display: block; }
.sidebar .card { height: 50vh; display: flex; flex-direction: column; }
.chat-log { flex: 1; overflow: auto; border: 1px solid #3333; border-radius: 8px; padding: .5rem; background: #0002; }
.chat .line { margin: .2rem 0; }
.chat form input { width: 100%; padding: .6rem .8rem; }
.guests ul { list-style: none; padding-left: 1rem; margin: .5rem 0; line-height: 1.8; }
footer { position: fixed; inset: auto 0 0 0; display: flex; justify-content: space-between; align-items: center; padding: .5rem 1rem; background: color-mix(in oklab, Canvas, CanvasText 4%); gap: .5rem; }
footer .center { display: flex; align-items: center; gap: .6rem; }
.muted { opacity: .7; }
@media (max-width: 900px){ .room { grid-template-columns: 1fr; } }