/* Pele v3 — vidro, pílulas e brilho roxo.

   Carregada DEPOIS de todos os outros CSS: as regras de cada tela pintam as
   superfícies com fundo opaco, e esta camada precisa vencer na mesma
   especificidade. Só aparência; nada de layout aqui. Os valores vêm de
   tokens.css. */

/* ------------------------------------------------------------- vidro */

.vidro,
.auth-card, .modal,
.wz-top, .wz-bottom, .e-top, .e-panel,
.wz-mode, .wz-pcard, .wz-res-card {
  background: var(--glass-bg-forte);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-line);
}

/* cartões e folhas flutuam; barras ficam rentes */
.vidro, .auth-card, .modal, .wz-mode, .wz-pcard, .wz-res-card {
  box-shadow: var(--glass-sombra);
}
.auth-card, .modal { border-radius: var(--r-2xl); }
.wz-mode, .wz-pcard, .wz-res-card { border-radius: var(--r-xl); }

/* cartão escolhido: borda e brilho roxos */
.wz-mode.on, .wz-mode:hover {
  border-color: var(--accent-wash-line);
  box-shadow: var(--glass-sombra), var(--accent-brilho);
}

/* -------------------------------------------------------------- botões */

.wz-btn, .e-btn { border-radius: var(--r-pill); }
.wz-btn.primary, .e-btn.accent {
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), .35);
  transition: background var(--t-fast) var(--t-ease),
              box-shadow var(--t-base) var(--t-ease),
              transform var(--t-fast) var(--t-ease);
}
.wz-btn.primary:hover:not(:disabled), .e-btn.accent:hover:not(:disabled) {
  box-shadow: 0 8px 28px rgba(var(--accent-rgb), .5);
}
.wz-btn:active:not(:disabled), .e-btn:active:not(:disabled) { transform: scale(.97); }
.wz-btn:disabled { box-shadow: none; }
/* a setinha "↩" do botão primário era âmbar escuro sobre âmbar */
.wz-ret { color: rgba(255, 255, 255, .75); }

/* ----------------------------------------------------- campos e seletores */

.auth-field input,
#wizardRoot input[type="text"], #wizardRoot input[type="search"],
#wizardRoot input[type="date"], #wizardRoot select, #wizardRoot textarea,
#editorRoot input[type="text"], #editorRoot select, #editorRoot textarea {
  border-radius: var(--r-lg);
  background: rgba(0, 0, 0, .28);
  border-color: var(--line-strong);
}

/* segmentado: trilho de vidro e pastilha roxa */
.seg { border-radius: var(--r-pill); background: rgba(0, 0, 0, .28); }
.seg .seg-thumb { border-radius: var(--r-pill); }

/* tags e chips em pílula */
.wz-tag, .wz-chip, .cut-step, .tl-chip { border-radius: var(--r-pill); }

/* toast de vidro */
.toast {
  background: var(--glass-bg-forte);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-pill);
  box-shadow: var(--glass-sombra);
}

/* prévia 9:16: cantos do vídeo acompanham o resto */
.frame { border-radius: var(--r-xl); }

/* tela única: barra de ação embaixo e selos por cima do vídeo */
.st-acao {
  background: var(--glass-bg-forte);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.st-carregando { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.st-menu { -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.st-tocar { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* Meus vídeos (acervo.css): fundo desfocado atrás do diálogo, selos e botão
   de tocar de vidro sobre o vídeo, brilho roxo no quadro e no ícone vazio. */
dialog.modal.ac::backdrop { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ac-selo, .ac-play { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ac-quadro {
  background: radial-gradient(120% 80% at 50% 0%, rgba(var(--accent-rgb), .14), transparent 60%),
              rgba(0, 0, 0, .45);
}
.ac-vazio-ico {
  background: radial-gradient(circle, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .04) 70%);
}

/* Capa de um vídeo do TikTok enquanto baixa: borrada; fica nítida quando o
   vídeo chega (studio.js tira a classe e a transição faz o resto). */
.st-capa { transition: filter .6s var(--t-ease), transform .6s var(--t-ease); }
.st-capa.borrada { filter: blur(10px) saturate(1.3); transform: scale(1.12); }
.st-fonte-origem { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* Navegador sem backdrop-filter (raro): o vidro vira painel quase opaco,
   para o texto nunca ficar sobre o fundo sem contraste. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vidro, .auth-card, .modal, .wz-top, .wz-bottom, .e-top, .e-panel,
  .wz-mode, .wz-pcard, .wz-res-card, .toast, .st-acao {
    background: rgba(20, 18, 30, .96);
  }
}

/* mini editor do vídeo enviado (fonte-editor.css): menu, aviso e abas de vidro */
.fe-menu, .fe-abas, .fe-aviso {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}