*{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,sans-serif;background:#111;color:#eee;min-height:100vh}button{cursor:pointer;padding:8px 16px;border-radius:6px;border:1px solid #444;background:#222;color:#eee;font-size:14px}button:hover{background:#333}button.active{background:#2563eb;border-color:#2563eb}button:disabled{opacity:.5;cursor:not-allowed}input{padding:8px 12px;border-radius:6px;border:1px solid #444;background:#222;color:#eee;font-size:14px}.page{max-width:1200px;margin:0 auto;padding:24px}.page h1{margin-bottom:16px}.meeting-id{font-family:monospace;background:#222;padding:4px 8px;border-radius:4px;-webkit-user-select:all;user-select:all}.controls{display:flex;gap:8px;margin:16px 0;flex-wrap:wrap}.video-grid{display:grid;gap:8px;margin-top:16px}.video-grid video{width:100%;border-radius:8px;background:#000}.video-tile{position:relative;border-radius:8px;overflow:hidden;background:#000}.video-tile video{width:100%;display:block}.video-tile .label{position:absolute;bottom:8px;left:8px;background:#000000b3;padding:2px 8px;border-radius:4px;font-size:12px}.stream-viewport{position:relative;width:100%;max-width:1920px;aspect-ratio:16 / 9;background:#000;border-radius:8px;overflow:hidden;margin-top:16px}.stream-viewport .stream-fill{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:0}.stream-viewport .stream-fill video{width:100%;height:100%;object-fit:contain}.stream-viewport .stream-pip-row{position:absolute;bottom:16px;right:16px;display:flex;gap:8px;z-index:10}.stream-viewport .stream-pip{width:240px;border-radius:8px;border:2px solid rgba(255,255,255,.2);box-shadow:0 4px 12px #00000080}.stream-viewport .stream-pip video{width:100%;height:auto;object-fit:cover;border-radius:6px}.stream-empty{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#666}.copy-link{display:inline-flex;align-items:center;gap:8px}.copy-link a{color:#60a5fa;text-decoration:none;font-family:monospace;font-size:13px}.copy-link a:hover{text-decoration:underline}.copy-link .copy-btn{background:none;border:none;color:#999;cursor:pointer;padding:2px 4px;font-size:16px;line-height:1}.copy-link .copy-btn:hover{color:#eee}.volume-control{display:flex;align-items:center;gap:8px}.volume-control label{font-size:13px;color:#999;white-space:nowrap;min-width:70px}.volume-control input[type=range]{width:120px;accent-color:#2563eb;cursor:pointer;padding:0;border:none;background:transparent}.build-hash{position:fixed;bottom:4px;right:8px;font-family:monospace;font-size:10px;color:#ffffff26;pointer-events:none;z-index:9999}.status{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:4px;font-size:13px}.status.live{background:#dc2626}.status.connecting{background:#d97706}.status.offline{background:#444}.error{color:#ef4444;padding:8px;border:1px solid #ef4444;border-radius:6px;margin:8px 0}.invite-link{margin-top:16px;padding:12px;background:#1a1a2e;border-radius:8px;border:1px solid #333}.invite-link input{width:100%;margin-top:8px}.vod-list{display:flex;flex-direction:column;gap:8px}.vod-card{display:flex;align-items:center;justify-content:space-between;padding:16px;background:#1a1a1a;border:1px solid #333;border-radius:8px}.vod-card h3{font-size:15px;font-weight:500;margin-bottom:4px}.vod-card-date{font-size:12px;color:#666}.vod-card-actions{display:flex;align-items:center;gap:12px}