.meeting-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0; }
.meeting-controls button, .donation-panel button, .donation-panel input, .donation-panel select { font: inherit; padding: 9px 12px; border: 1px solid #414957; border-radius: 7px; color: #edf0fa; background: #171c27; }
.meeting-controls button:disabled { opacity: .45; }
.meeting-permission { flex-basis: 100%; color: #b6bccc; font-size: 13px; }
.meeting-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.meeting-tile { position: relative; min-width: 0; background: black; border-radius: 10px; overflow: hidden; }
.meeting-tile[hidden] { display: none; }
.meeting-tile video { display: block; width: 100%; max-height: 320px; aspect-ratio: 16/9; object-fit: contain; }
.meeting-tile span { position: absolute; bottom: 5px; left: 8px; padding: 3px 6px; background: #000a; color: white; }
.meeting-alert { position: fixed; z-index: 100000; top: 12%; left: 50%; transform: translateX(-50%); max-width: 90vw; padding: 20px 28px; border: 1px solid #b38aff; border-radius: 18px; background: #291749f2; color: white; box-shadow: 0 0 70px #9755ff66; font-size: clamp(18px, 3vw, 32px); text-align: center; pointer-events: none; animation: donation-pop .3s ease-out; }
.meeting-alert[hidden] { display: none; }
@keyframes donation-pop { from { opacity: 0; top: 9%; } to { opacity: 1; top: 12%; } }
@media (prefers-reduced-motion: reduce) { .meeting-alert { animation: none; } }
.donation-panel { padding: 14px; border: 1px solid #38304e; border-radius: 12px; display: grid; gap: 10px; margin-top: 12px; }
.donation-panel label { display: grid; gap: 6px; font-size: 13px; }
.donation-panel input, .donation-panel select { width: 100%; min-width: 0; }
.donation-panel p { margin: 0; overflow-wrap: anywhere; }
.donation-panel[hidden] { display: none; }
#viewer-meeting { grid-column: 1 / -1; }