:root {
  --voice-bg: #f5f5f7;
  --voice-text: #1e293b;
  --voice-muted: #64748b;
  --voice-panel: rgba(255, 255, 255, .65);
  --voice-panel-strong: rgba(255, 255, 255, .82);
  --voice-border: rgba(255, 255, 255, .8);
  --voice-accent: #2563eb;
  --voice-accent-hover: #1d4ed8;
  --voice-danger: #dc2626;
  --voice-glass-shadow: 0 10px 40px -10px rgba(15, 23, 42, .10);
  --voice-modal-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
  --voice-radius-modal: 32px;
  --voice-radius-card: 24px;
}

html.dark,
body.dark {
  --voice-bg: #0f172a;
  --voice-text: #f8fafc;
  --voice-muted: #cbd5e1;
  --voice-panel: rgba(30, 41, 59, .65);
  --voice-panel-strong: rgba(30, 41, 59, .82);
  --voice-border: rgba(255, 255, 255, .1);
  --voice-accent: #60a5fa;
  --voice-accent-hover: #93c5fd;
  --voice-danger: #fda4af;
  --voice-glass-shadow: 0 10px 40px -10px rgba(0, 0, 0, .5);
}

html.dark body::before {
  opacity: 1;
}

.glass-panel,
.auth-modal-content,
.room-modal-content,
.admin-dialog-card {
  background: var(--voice-panel);
  border-color: var(--voice-border);
  box-shadow: var(--voice-glass-shadow);
}

.native-dialog,
.admin-dialog {
  color: var(--voice-text);
}

.native-dialog::backdrop,
.admin-dialog::backdrop {
  background: rgba(15, 23, 42, .30);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.admin-dialog[open] {
  animation: landingModalIn .40s cubic-bezier(.16, 1, .3, 1);
}

.admin-dialog.dialog-closing {
  animation: landingModalOut .24s ease-in forwards;
}

.admin-dialog[open]::backdrop {
  animation: backdropIn .24s ease-out;
}

.admin-dialog.dialog-closing::backdrop {
  animation: backdropOut .18s ease-in forwards;
}