body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#020617;color:#e5e7eb}.auth-layout{min-height:100vh;display:flex;align-items:center;justify-content:center}.auth-card{background:#020617;border-radius:12px;padding:24px;border:1px solid #1f2937;width:320px}.form{display:flex;flex-direction:column;gap:8px}.form input{padding:8px;border-radius:6px;border:1px solid #374151;background:#020617;color:#e5e7eb}.form button{margin-top:8px;padding:8px;border-radius:6px;border:none;background:#2563eb;color:#fff;cursor:pointer}.link-btn{margin-top:12px;background:none;border:none;color:#93c5fd;cursor:pointer}.error{color:#f87171;font-size:.875rem}.app-layout{min-height:100vh;display:flex;flex-direction:column}.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #1f2937;background:#020617}.topbar button{margin-left:12px}.app-body{flex:1;display:grid;grid-template-columns:2fr 1fr;gap:8px;padding:8px}.left-pane,.right-pane{padding:8px}.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}.video-tile{background:#020617;border-radius:8px;padding:4px;border:1px solid #1f2937}.chat-container{display:flex;flex-direction:column;height:100%}.chat-messages{flex:1;overflow-y:auto;background:#020617;border-radius:8px;border:1px solid #1f2937;padding:8px}.chat-input{display:flex;gap:6px;margin-top:8px}.chat-input input{flex:1;padding:8px;border-radius:6px;border:1px solid #374151;background:#020617;color:#e5e7eb}.chat-input button{padding:8px 12px;border-radius:6px;border:none;background:#22c55e;color:#fff;cursor:pointer}.room-join{display:flex;gap:16px;padding:24px}.room-card{background:#020617;border:1px solid #1f2937;border-radius:12px;padding:16px;flex:1}.room-card input{width:100%;margin-top:8px;margin-bottom:8px;padding:8px;border-radius:6px;border:1px solid #374151;background:#020617;color:#e5e7eb}.room-card button{padding:8px 12px;border-radius:6px;border:none;background:#22c55e;color:#fff;cursor:pointer}.video-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.video-header button{padding:6px 10px;border-radius:6px;border:none;background:#facc15;color:#111827;cursor:pointer}.full-pane{position:relative}.video-room{position:relative;height:100%;display:flex;flex-direction:column;gap:8px}.video-grid{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}.video-tile{position:relative;background:radial-gradient(circle at top,#020617,#020617);border-radius:12px;padding:4px;border:1px solid #1f2937;overflow:hidden}.video-tile video{border-radius:8px}.video-label{position:absolute;left:8px;bottom:8px;padding:2px 8px;border-radius:999px;background:#0f172acc;color:#e5e7eb;font-size:.75rem}.active-speaker{box-shadow:0 0 0 2px #22c55e,0 0 20px #22c55e99}.controls-bar{position:absolute;left:50%;bottom:8px;transform:translate(-50%);display:flex;align-items:center;justify-content:center;gap:16px;padding:8px 16px;border-radius:999px;background:#0f172ae6;border:1px solid #1f2937;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:20}.controls-left,.controls-center,.controls-right{display:flex;align-items:center;gap:8px}.controls-center{gap:10px}.control-btn{width:36px;height:36px;border-radius:999px;border:none;background:#111827;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:#e5e7eb;transition:transform .1s ease,background .15s ease}.control-btn:hover{transform:translateY(-1px);background:#1f2937}.control-btn-off{background:#7f1d1d}.control-btn-on{background:#15803d}.leave-btn{background:#b91c1c}.room-pill{padding:4px 10px;border-radius:999px;background:#0f172ae6;border:1px solid #1f2937;font-size:.75rem;color:#9ca3af}.chat-overlay{position:absolute;right:8px;bottom:56px;width:min(360px,90vw);max-height:70vh;display:flex;flex-direction:column;background:#020617;border-radius:12px;border:1px solid #1f2937;overflow:hidden;z-index:25}.chat-overlay-header{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border-bottom:1px solid #1f2937;background:#020617;font-size:.85rem}.chat-overlay-header button{border:none;background:transparent;color:#9ca3af;cursor:pointer}.chat-overlay-body{flex:1;min-height:0}.topbar-right{display:flex;align-items:center;gap:8px}@media (max-width: 768px){.controls-bar{bottom:4px;padding:6px 10px}.control-btn{width:32px;height:32px;font-size:16px}.chat-overlay{right:4px;left:4px;width:auto}}