.dialog-backdrop{position:fixed;inset:0;background:#0000008c;display:flex;align-items:center;justify-content:center;z-index:1000}.dialog{width:100%;max-width:420px;margin:1rem;background:#3e3e3e;border-radius:1rem;padding:1rem;animation:dialogIn .2s ease;color:#fff}@keyframes dialogIn{0%{opacity:0;transform:scale(.95)}}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:#f5f5f5}.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:.5rem;font-weight:500;line-height:1;cursor:pointer;transition:background .15s ease,color .15s ease,border .15s ease;border:1px solid transparent;-webkit-user-select:none;user-select:none}.btn:disabled{opacity:.6;cursor:not-allowed}.btn.md{height:40px;padding:0 1rem;font-size:.95rem}.btn.sm{height:32px;padding:0 .75rem;font-size:.85rem}.btn.lg{height:48px;padding:0 1.25rem;font-size:1rem}.btn.primary{background:#2563eb;color:#fff}.btn.primary:hover:not(:disabled){background:#1e4ed8}.btn.secondary{background:#1f2937;color:#e5e7eb;border-color:#374151}.btn.secondary:hover:not(:disabled){background:#374151}.btn.danger{background:#dc2626;color:#fff}.btn.danger:hover:not(:disabled){background:#b91c1c}.btn.ghost{background:transparent;color:#9ca3af}.btn.ghost:hover:not(:disabled){background:#ffffff0d;color:#fff}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.analytics-card{background:#1e1e1ee6;border-radius:.75rem;padding:.75rem}@media (max-width: 768px){.analytics-card{grid-column:span 4!important}}.analytics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}@media (max-width: 768px){.analytics-grid{grid-template-columns:repeat(1,1fr)}}.analytics-panel{width:100%;margin-top:20px;background:#0f0f0fd9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top-left-radius:1.25rem;border-top-right-radius:1.25rem;display:flex;flex-direction:column;will-change:transform;touch-action:none;z-index:20}.content{flex:1;overflow-y:auto;padding:1rem}.chart-wrapper{display:flex;flex-direction:column;height:100%}.title{font-size:.85rem;font-weight:500;color:#e5e7eb;margin-bottom:.5rem}.placeholder{flex:1;display:flex;align-items:center;justify-content:center;color:#9ca3af;font-size:.85rem}.data-panel{display:flex;gap:1rem;padding:.75rem 1rem;border-radius:1rem}.item{display:flex;flex-direction:column;align-items:center;min-width:60px}.label{font-size:.75rem;color:#9ca3af}.value{font-size:1.1rem;font-weight:600;color:#fff}.room{position:relative;width:100%;height:calc(100dvh - 200px);background:#000;overflow:hidden}.video-layer{position:absolute;inset:0}.remote-video{width:100%;height:100%;display:flex}.remote-video video{width:100%!important;height:100%!important;object-fit:contain}.local-video{position:absolute;bottom:90px;right:12px;width:120px;aspect-ratio:3/4;border-radius:.75rem;overflow:hidden;background:#111;box-shadow:0 0 10px #00000080}.local-video video{width:100%!important;height:100%!important;object-fit:contain}.ui-layer{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:1rem;pointer-events:none}.ui-layer>*{pointer-events:auto}.breakpoint-btn{align-self:start;width:100%;max-width:280px}@media (min-width: 768px){.local-video{width:200px;bottom:20px;right:20px}.ui-layer{padding:1.5rem}.breakpoint-btn{width:auto}}.preview{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1rem}.preview p{font-size:.9rem;text-align:center;color:#aaa}.preview__video{width:100%;border-radius:.75rem;overflow:hidden}.preview__video video{width:100%;height:auto;max-height:60vh;object-fit:cover}@media (min-width: 768px){.preview{gap:1.25rem}.preview p{font-size:1rem}.preview__video{max-width:640px}.preview__video video{max-height:80vh}}.conference{min-height:calc(100vh - 80px);background:#0e0e0e;color:#f0f0f0;padding:40px;font-family:Segoe UI,Roboto,sans-serif;display:flex;flex-direction:column;align-items:center}.conference h1{font-size:2rem;margin-bottom:2rem;color:#fff;text-shadow:0 0 8px rgba(0,255,231,.1)}.conference .connected-msg{color:#00ffae;font-weight:700;margin-top:2rem;font-size:1.1rem;text-shadow:0 0 4px rgba(0,255,174,.5)}
