/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
  /* superfícies — neutro frio, levemente azulado */
  --bg: oklch(15.5% 0.012 260);
  --panel: oklch(19.5% 0.014 260);
  --panel2: oklch(24% 0.016 260);
  --panel3: oklch(28% 0.018 260);
  --border: oklch(32% 0.02 260);
  --border-strong: oklch(40% 0.024 260);

  /* texto */
  --text: oklch(95% 0.008 260);
  --text-dim: oklch(80% 0.012 260);
  --muted: oklch(64% 0.02 260);
  --faint: oklch(48% 0.018 260);

  /* marca / ação primária -- azul da home (Live Flow Studio, ~#6199f6) */
  --accent: oklch(68% 0.15 262);
  --accent-hover: oklch(73% 0.15 262);
  --accent-dim: oklch(68% 0.15 262 / 0.15);
  --accent-text: oklch(97% 0.01 262);
  /* parceiro de gradiente (mesma familia azul, mais fundo) -- usado nos
     degrades da marca/avatar/barras no lugar do antigo magenta */
  --accent-deep: oklch(58% 0.15 255);

  /* status */
  --ok: oklch(74% 0.16 154);
  --ok-dim: oklch(74% 0.16 154 / 0.15);
  --warn: oklch(78% 0.15 80);
  --warn-dim: oklch(78% 0.15 80 / 0.15);
  --danger: oklch(66% 0.19 23);
  --danger-dim: oklch(66% 0.19 23 / 0.15);

  /* categorias de conteúdo (distintas de status) */
  --normal: oklch(74% 0.11 200);
  --normal-dim: oklch(74% 0.11 200 / 0.15);
  --acao: oklch(75% 0.15 55);
  --acao-dim: oklch(75% 0.15 55 / 0.15);

  /* forma */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /* elevação */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow: 0 4px 16px rgba(0,0,0,.35);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.5);

  /* tipografia */
  --font-display: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
  --font-body: "Plus Jakarta Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  font-family: var(--font-body);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); height: 100%; }
body {
  display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden;
  font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; margin: 0; }
code, .mono { font-family: var(--font-mono); }
a { color: var(--accent); }

::selection { background: var(--accent-dim); color: var(--text); }

/* barra de rolagem discreta */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--panel3); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* foco visível — teclado */
:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm);
}

svg.icon { width: 16px; height: 16px; flex-shrink: 0; display: block; }
svg.icon-sm { width: 14px; height: 14px; }
svg.icon-lg { width: 20px; height: 20px; }

/* ==========================================================================
   Shell / Sidebar
   ========================================================================== */
.shell { display: flex; height: 100vh; height: 100dvh; width: 100%; overflow: hidden; align-items: stretch; }

.brand {
  font-family: var(--font-display); font-weight: 700; font-size: 15px; white-space: nowrap;
  display: flex; align-items: center; gap: 9px; letter-spacing: -0.01em; overflow: hidden;
}
.brand-mark {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  display: flex; align-items: center; justify-content: center; color: white;
}
.brand-mark svg { width: 16px; height: 16px; }
.brand-sub { color: var(--muted); font-weight: 500; font-size: 12px; }
.admin-brand-badge {
  display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--accent); background: var(--accent-dim); padding: 3px 9px; border-radius: var(--radius-full);
}
.admin-brand-badge svg { width: 12px; height: 12px; }

.sidebar {
  width: 232px; flex-shrink: 0; background: var(--panel); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; height: 100vh; height: 100dvh; z-index: 30;
  transition: width .15s ease;
}
.sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.sidebar-collapse-btn {
  width: 26px; height: 26px; border-radius: var(--radius-sm); background: transparent; border: 1px solid var(--border);
  color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: all .12s;
}
.sidebar-collapse-btn:hover { color: var(--text); border-color: var(--border-strong); background: var(--panel2); }
.sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 10px 14px; display: flex; flex-direction: column; gap: 1px; }
.sidebar-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); padding: 14px 10px 6px; white-space: nowrap; }
.sidebar-section-label:first-child { padding-top: 6px; }
.sidebar-item {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: var(--radius); color: var(--text-dim);
  font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background .12s, color .12s; white-space: nowrap; overflow: hidden;
}
.sidebar-item:hover { background: var(--panel2); color: var(--text); }
.sidebar-item.active { background: var(--accent-dim); color: var(--accent); }
.sidebar-item svg { flex-shrink: 0; }
.sidebar-item .item-label { overflow: hidden; text-overflow: ellipsis; }
.sidebar-item .item-badge {
  margin-left: auto; background: var(--danger); color: white; font-size: 10px; font-weight: 700; padding: 1px 6px;
  border-radius: var(--radius-full); flex-shrink: 0;
}
.sidebar-item.sub { padding-left: 30px; }
.sidebar-bottom { border-top: 1px solid var(--border); padding: 12px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; flex-shrink: 0; }
.sidebar-user-row { display: flex; align-items: center; gap: 8px; }
.sidebar-user-row .user-email { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.sidebar-user-row .icon-btn { flex-shrink: 0; }
/* card de status do sistema (verde = online / roxo = processando) --
   inspirado na referencia ("IA Online"), mas honesto: reflete se ha job
   rodando de verdade, nunca um texto decorativo fixo */
.sidebar-status { display: flex; align-items: center; gap: 9px; padding: 8px 10px; background: var(--panel2); border: 1px solid var(--border); border-radius: var(--radius); }
.sidebar-status .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex-shrink: 0; box-shadow: 0 0 0 3px var(--ok-dim); }
.sidebar-status .status-dot.busy { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); animation: pulse-dot 1.6s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.sidebar-status .ss-text { min-width: 0; }
.sidebar-status .ss-title { font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.2; }
.sidebar-status .ss-sub { font-size: 10.5px; color: var(--muted); line-height: 1.2; margin-top: 1px; }
/* card de uso do plano da conta (referencia: barra de "Armazenamento") --
   mostra o consumo real do limite de produtos do plano (ou "ilimitado"
   pra conta admin) */
.sidebar-usage { padding: 10px; background: var(--panel2); border: 1px solid var(--border); border-radius: var(--radius); }
.sidebar-usage .su-head { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--text-dim); font-weight: 600; }
.sidebar-usage .su-head .su-pct { color: var(--muted); font-family: var(--font-mono); }
.sidebar-usage .su-head .su-inf { color: var(--accent); font-weight: 700; }
.sidebar-usage .su-bar { height: 6px; border-radius: var(--radius-full); background: var(--bg); overflow: hidden; margin: 7px 0 6px; }
.sidebar-usage .su-bar .fill { height: 100%; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--accent), var(--accent-deep)); }
.sidebar-usage .su-bar .fill.high { background: linear-gradient(90deg, var(--warn), var(--danger)); }
.sidebar-usage .su-detail { font-size: 10.5px; color: var(--muted); }
.user-role-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: var(--accent-dim); color: var(--accent); padding: 2px 7px; border-radius: var(--radius-full);
}

/* colapsado: so icones, com tooltip nativo (title) */
.sidebar.collapsed { width: 60px; }
.sidebar.collapsed .brand-label,
.sidebar.collapsed .sidebar-section-label,
.sidebar.collapsed .sidebar-item .item-label,
.sidebar.collapsed .sidebar-item .item-badge,
.sidebar.collapsed .sidebar-usage,
.sidebar.collapsed .sidebar-status .ss-text,
.sidebar.collapsed .sidebar-user-row .user-email { display: none; }
.sidebar.collapsed .sidebar-item { justify-content: center; padding: 9px; }
.sidebar.collapsed .sidebar-item.sub { padding-left: 9px; }
.sidebar.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }
.sidebar.collapsed .sidebar-top { justify-content: center; }
.sidebar.collapsed .sidebar-status { justify-content: center; padding: 8px; }
.sidebar.collapsed .sidebar-user-row { justify-content: center; }

.sidebar-scrim { display: none; }

.main-col {
  flex: 1; min-width: 0; min-height: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
}
.topbar-mini { display: none; }

/* ==========================================================================
   Layout geral
   ========================================================================== */
#app { flex: 1; padding: 24px 32px 60px; max-width: 1600px; margin: 0 auto; width: 100%; }
.spacer { flex: 1; }
.page-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { font-size: 21px; }
.page-sub { color: var(--muted); font-size: 13px; margin-top: 3px; }

.empty-state {
  text-align: center; color: var(--muted); padding: 30px 20px; font-size: 14px;
}
.empty-hero {
  text-align: center; padding: 72px 24px; max-width: 460px; margin: 40px auto;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.empty-hero .empty-icon {
  width: 64px; height: 64px; border-radius: 18px; background: var(--panel2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--muted); margin-bottom: 18px;
}
.empty-hero .empty-icon svg { width: 30px; height: 30px; }
.empty-hero h2 { font-size: 19px; margin-bottom: 6px; }
.empty-hero p { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin: 0 0 22px; }

.skeleton {
  background: linear-gradient(90deg, var(--panel2) 25%, var(--panel3) 37%, var(--panel2) 63%);
  background-size: 400% 100%; animation: skeleton-shine 1.4s ease infinite; border-radius: var(--radius);
}
@keyframes skeleton-shine { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.skeleton-card { aspect-ratio: 9/13; border-radius: var(--radius); }
.skeleton-card-wide { aspect-ratio: 16/7; border-radius: var(--radius); }

/* ==========================================================================
   Stepper de progresso (visão geral do produto)
   ========================================================================== */
.stepper { display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.step {
  flex: 1; min-width: 190px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 14px 16px; cursor: pointer; transition: border-color .12s, background .12s, transform .12s, box-shadow .12s;
  display: flex; flex-direction: column; gap: 8px; position: relative;
  font: inherit; text-align: left; color: inherit; -webkit-appearance: none;
}
.step:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.step:active { transform: translateY(0); }
.step.current { border-color: var(--accent); background: var(--accent-dim); }
/* "active" = e a secao que esta sendo vista agora (pode ser diferente de
   "current", que e so a sugestao de proxima etapa) -- anel proprio, nunca
   depende so de cor pra comunicar isso (soma-se ao done/current) */
.step.active { box-shadow: inset 0 0 0 2px var(--accent); }
.step-top { display: flex; align-items: center; gap: 8px; }
.step-index {
  width: 22px; height: 22px; border-radius: var(--radius-full); background: var(--panel3); color: var(--muted);
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-family: var(--font-display);
}
.step.done .step-index { background: var(--ok); color: oklch(20% 0.05 154); }
.step.done .step-index svg { width: 12px; height: 12px; }
.step.current .step-index { background: var(--accent); color: white; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; }
.step-title { font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
.step.current .step-title, .step.done .step-title { color: var(--text); }
.step-value { font-family: var(--font-display); font-size: 21px; font-weight: 700; }
.step-hint { font-size: 11.5px; color: var(--muted); }
.step-connector { width: 20px; align-self: center; color: var(--border-strong); flex: 0; display: flex; align-items: center; justify-content: center; }
@media (max-width: 900px) { .step-connector { display: none; } }

.stat-row { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.stat-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px;
  min-width: 120px;
}
.stat-card .num { font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.stat-card .label { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* ==========================================================================
   Páginas: Dashboard / Produtos / Processamentos / Vídeos finais
   ========================================================================== */
.dashboard-grid { display: flex; gap: 10px; margin-bottom: 26px; flex-wrap: wrap; }
.dashboard-grid .stat-card { flex: 1; min-width: 130px; }
.dashboard-section-title { font-size: 14px; margin: 26px 0 12px; display: flex; align-items: center; gap: 8px; }

/* KPIs ricos (Dashboard do usuario, Admin Visao geral) */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 10px; margin-bottom: 8px; }
.kpi-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px;
  display: flex; flex-direction: column; gap: 10px; min-height: 108px;
}
.kpi-top { display: flex; align-items: center; justify-content: space-between; }
.kpi-icon {
  width: 30px; height: 30px; border-radius: var(--radius); background: var(--panel2); color: var(--muted);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.kpi-card.warn .kpi-icon { background: var(--warn-dim); color: var(--warn); }
.kpi-card.danger .kpi-icon { background: var(--danger-dim); color: var(--danger); }
.kpi-card.ok .kpi-icon { background: var(--ok-dim); color: var(--ok); }
.kpi-num { font-family: var(--font-display); font-size: 25px; font-weight: 700; line-height: 1; }
.kpi-label { font-size: 12px; color: var(--muted); margin-top: 3px; }
.kpi-sub { font-size: 10.5px; color: var(--faint); margin-top: 1px; }
.kpi-link {
  font-size: 11.5px; font-weight: 600; color: var(--accent); background: none; border: none; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 3px; margin-top: auto; font-family: var(--font-body);
}
.kpi-link:hover { text-decoration: underline; }

/* wrapper de secao reutilizavel: titulo + subtitulo + acao "ver tudo" */
.dash-section { margin-bottom: 30px; }
.dash-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.dash-section-head h2 { font-size: 15px; display: flex; align-items: center; gap: 7px; }
.dash-section-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.see-all {
  font-size: 12.5px; font-weight: 600; color: var(--accent); background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; font-family: var(--font-body); flex-shrink: 0;
}
.see-all:hover { text-decoration: underline; }

/* listas de itens (Precisa de atencao, Continuar trabalhando, Solicitacoes recentes...) */
.item-list { display: flex; flex-direction: column; gap: 8px; }
.item-row {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 16px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.item-row .ir-body { flex: 1; min-width: 200px; }
.item-row .ir-name { font-weight: 600; font-size: 13.5px; margin-bottom: 4px; }
.item-row .ir-detail { font-size: 12px; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; }
.item-row .ir-detail span { display: flex; align-items: center; gap: 5px; }
.item-row .ir-detail .danger-text { color: var(--danger); }

.mini-bar { height: 5px; width: 100%; border-radius: var(--radius-full); background: var(--panel2); overflow: hidden; }
.mini-bar .fill { height: 100%; background: var(--accent); border-radius: var(--radius-full); }

/* resumo de producao agregada (Dashboard) */
.production-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.production-item { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.production-item .pi-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.production-item .pi-num { font-family: var(--font-display); font-size: 19px; font-weight: 700; }
.production-item .pi-label { font-size: 12px; color: var(--muted); }

.mini-stats { display: flex; gap: 22px; margin-bottom: 14px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.mini-stats strong { color: var(--text); font-family: var(--font-display); font-size: 16px; margin-right: 5px; }

.empty-block {
  text-align: center; padding: 26px 20px; color: var(--muted); font-size: 13px; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}

/* ==========================================================================
   Dashboard premium -- TUDO escopado em .dashboard-pro pra nao vazar pras
   outras telas (pedido do usuario: transformar SO o dashboard). Mantem a
   identidade da marca (accent roxo), so eleva o acabamento: cards maiores,
   gradiente interno sutil, icones em quadrado tintado, mais respiro.
   ========================================================================== */
.dashboard-pro .dash-date-chip {
  display: flex; align-items: center; gap: 10px; padding: 7px 13px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
}
.dashboard-pro .dash-date-chip svg { color: var(--muted); flex-shrink: 0; }
.dashboard-pro .ddc-date { font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.dashboard-pro .ddc-sub { font-size: 10.5px; color: var(--faint); line-height: 1.2; margin-top: 1px; }

.dashboard-pro .dash-kpi-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 30px; }
@media (max-width: 1180px) { .dashboard-pro .dash-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .dashboard-pro .dash-kpi-grid { grid-template-columns: 1fr; } }
.dashboard-pro .kpi-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .022), transparent 100px), var(--panel);
  border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; min-height: 124px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .20); gap: 16px; justify-content: space-between;
  transition: border-color .15s, transform .15s;
}
.dashboard-pro .kpi-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.dashboard-pro .kpi-icon { width: 40px; height: 40px; border-radius: 11px; background: var(--accent-dim); color: var(--accent); }
.dashboard-pro .kpi-icon svg { width: 19px; height: 19px; }
.dashboard-pro .kpi-card.warn .kpi-icon { background: var(--warn-dim); color: var(--warn); }
.dashboard-pro .kpi-card.ok .kpi-icon { background: var(--ok-dim); color: var(--ok); }
.dashboard-pro .kpi-card.danger .kpi-icon { background: var(--danger-dim); color: var(--danger); }
.dashboard-pro .kpi-num { font-size: 32px; }
.dashboard-pro .kpi-label { font-size: 13px; color: var(--text-dim); }
.dashboard-pro .kpi-sub { font-size: 10.5px; }

/* wrapper de secao com cara de painel */
.dashboard-pro .dash-section {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px 22px; margin-bottom: 18px;
}
.dashboard-pro .dash-section-head { margin-bottom: 14px; }
.dashboard-pro .dash-section-head h2 { font-size: 15.5px; }
.dashboard-pro .dash-section > .item-list + *,
.dashboard-pro .dash-section .empty-block { margin-top: 0; }
/* dentro do painel, os cards internos usam um tom levemente mais claro
   pra criar profundidade (referencia: painel externo + cards internos) */
.dashboard-pro .dash-section .empty-block,
.dashboard-pro .dash-section .item-row,
.dashboard-pro .dash-section .production-item { background: var(--panel2); }

/* estado vazio rico (icone + titulo + subtitulo), estilo referencia */
.dashboard-pro .dash-empty {
  display: flex; align-items: center; justify-content: center; gap: 14px; text-align: left;
  padding: 30px 22px; background: var(--panel2); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.dashboard-pro .dash-empty .de-icon {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--ok-dim); color: var(--ok);
}
.dashboard-pro .dash-empty .de-icon svg { width: 20px; height: 20px; }
.dashboard-pro .dash-empty .de-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.dashboard-pro .dash-empty .de-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* producao: barra teal/verde so no bucket "finalizados" (referencia) */
.dashboard-pro .production-item { padding: 16px 18px; }
.dashboard-pro .production-item .pi-num { font-size: 22px; }
.dashboard-pro .production-item.done .mini-bar .fill { background: var(--ok); }

/* botao pequeno "Ver todos (N)" no canto das secoes */
.dashboard-pro .see-all-btn {
  font-size: 12px; font-weight: 600; color: var(--text-dim); background: var(--panel2);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-family: var(--font-body); flex-shrink: 0;
}
.dashboard-pro .see-all-btn:hover { border-color: var(--border-strong); color: var(--text); }

.workspace-back {
  display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; font-weight: 600;
  cursor: pointer; margin-bottom: 10px; transition: color .12s; background: none; border: none; padding: 0; font-family: var(--font-body);
}
.workspace-back:hover { color: var(--text); }
.workspace-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.workspace-title-row h1 { font-size: 20px; }

.products-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.products-search {
  flex: 1; min-width: 200px; max-width: 340px; display: flex; align-items: center; gap: 8px;
  background: var(--panel2); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; color: var(--muted);
}
.products-search svg { flex-shrink: 0; }
.products-search input {
  flex: 1; background: transparent; border: none; color: var(--text); font-size: 13px; outline: none; font-family: var(--font-body);
  -webkit-appearance: none; appearance: none;
}
.products-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.product-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
  cursor: pointer; transition: border-color .12s, transform .12s; display: flex; flex-direction: column;
}
.product-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.product-card.needs-attention { border-color: var(--warn); }
.card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.pc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.pc-name { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; line-height: 1.3; word-break: break-word; }
/* cards de exemplo da HOME: nome numa linha so (sem quebrar e SEM "…"), pra os
   stats (clipes/revisados) e o selo ficarem alinhados entre os 3 cards. So na
   home -- a pagina de produtos do app continua podendo quebrar o nome. */
.home-mockup-products .pc-name { white-space: nowrap; word-break: normal; }
.home-mockup-products .pc-stats { flex-wrap: nowrap; white-space: nowrap; }
.pc-delete { flex-shrink: 0; opacity: 0; transition: opacity .12s; }
.product-card:hover .pc-delete { opacity: .6; }
.pc-delete:hover { opacity: 1 !important; }
.pc-stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.pc-stats span { display: flex; align-items: center; gap: 5px; }
.pc-stats svg { width: 13px; height: 13px; }
.pc-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.pc-attention { color: var(--warn); display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; }

/* capa do card (topo) -- thumbnail real do 1o clipe pra produto de video,
   forma de onda decorativa pra produto de audio (nunca uma foto inventada) */
.card-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--bg); flex-shrink: 0; }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-thumb.empty { display: flex; align-items: center; justify-content: center; color: var(--faint); }
.card-thumb.empty svg { width: 28px; height: 28px; }
.card-thumb .badge {
  position: absolute; top: 8px; right: 8px; background: oklch(0% 0 0 / .55); color: white; font-size: 10.5px;
  font-weight: 700; padding: 3px 8px; border-radius: var(--radius-full); display: flex; align-items: center; gap: 4px;
}
.card-thumb .play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .12s;
}
.product-card:hover .card-thumb .play { opacity: 1; }
.card-thumb .play-circle {
  width: 40px; height: 40px; border-radius: 50%; background: oklch(0% 0 0 / .45); border: 1.5px solid oklch(100% 0 0 / .5);
  display: flex; align-items: center; justify-content: center; color: white;
}
.card-thumb.audio { background: linear-gradient(135deg, var(--accent-dim), var(--bg) 75%); display: flex; align-items: center; justify-content: center; }
.card-thumb-cover-actions {
  position: absolute; bottom: 8px; right: 8px; display: flex; gap: 6px;
  opacity: 0; transition: opacity .12s;
}
.product-card:hover .card-thumb-cover-actions { opacity: 1; }
.card-thumb-cover-btn { background: oklch(0% 0 0 / .55); color: white; }
.hidden-file-input { display: none; }
.waveform { display: flex; align-items: center; gap: 3px; height: 44px; }
.waveform span { width: 4px; border-radius: 2px; background: oklch(97% 0.01 262 / .55); }

.finals-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.final-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; }
.final-card video { width: 100%; border-radius: var(--radius); background: black; margin-bottom: 10px; }
.final-card .fc-name { font-weight: 600; font-size: 13.5px; margin-bottom: 2px; }
.final-card .fc-meta { color: var(--muted); font-size: 11.5px; }

.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  padding: 11px 14px; border-bottom: 1px solid var(--border-strong); font-weight: 700; white-space: nowrap;
  background: var(--panel2);
}
.data-table td { padding: 13px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text-dim); }
.data-table tbody tr:nth-child(even) td { background: oklch(100% 0 0 / 0.014); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--panel2); }
.data-table tbody tr.clickable { cursor: pointer; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); }
.table-wrap .data-table { min-width: 560px; }
.table-wrap .data-table th:first-child, .table-wrap .data-table td:first-child { padding-left: 18px; }
.table-wrap .data-table th:last-child, .table-wrap .data-table td:last-child { padding-right: 18px; }

/* utilitarios de texto/valor pra celulas de tabela */
.td-primary { color: var(--text); font-weight: 600; }
.td-muted { color: var(--muted); font-size: 12px; }
.td-num { font-family: var(--font-mono); font-size: 12.5px; }
.danger-text { color: var(--danger); }
.ok-text { color: var(--ok); }

/* variantes de status-pill pra status derivado de produto (tabelas admin) */
.status-pill.ps-done { background: var(--ok-dim); color: var(--ok); }
.status-pill.ps-review { background: var(--warn-dim); color: var(--warn); }
.status-pill.ps-error { background: var(--danger-dim); color: var(--danger); }
.status-pill.ps-processing { background: var(--accent-dim); color: var(--accent); }
.status-pill.ps-roteiro, .status-pill.ps-neutral { background: var(--panel3); color: var(--text-dim); }

.admin-user-card.clickable { cursor: pointer; transition: border-color .12s, transform .12s; }
.admin-user-card.clickable:hover { border-color: var(--accent); transform: translateY(-1px); }

/* ==========================================================================
   Navegação de seção
   ========================================================================== */
.section-tabs { display: flex; gap: 2px; margin-bottom: 22px; border-bottom: 1px solid var(--border); }
.section-tab {
  padding: 10px 14px; cursor: pointer; color: var(--muted); font-size: 13.5px; font-weight: 500;
  border-bottom: 2px solid transparent; display: flex; align-items: center; gap: 7px; transition: color .12s;
}
.section-tab:hover { color: var(--text-dim); }
.section-tab.active { color: var(--text); border-color: var(--accent); }
.section-tab .tab-count {
  font-size: 10.5px; font-weight: 700; background: var(--panel3); color: var(--muted); border-radius: var(--radius-full);
  padding: 1px 6px; min-width: 16px; text-align: center;
}
.section-tab.active .tab-count { background: var(--accent-dim); color: var(--accent); }

/* ==========================================================================
   Pastas / clipes
   ========================================================================== */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }

.legend { display: flex; gap: 18px; align-items: center; font-size: 12px; color: var(--muted); flex-wrap: wrap; margin-bottom: 14px; }
.legend-label { font-weight: 600; color: var(--text-dim); text-transform: uppercase; font-size: 10.5px; letter-spacing: .04em; }
.count-badge {
  background: oklch(0% 0 0 / .25); border-radius: var(--radius-full); padding: 1px 7px; font-size: 11px; font-weight: 700;
}
.legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legend .dot.NORMAL { background: var(--normal); }
.legend .dot.ACAO { background: var(--acao); }
.legend .dot.REJECTED { background: var(--danger); }

.filter-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.legend-filter-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.legend-filter-row .legend, .legend-filter-row .filter-bar { margin-bottom: 0; }

.clip-selection-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--accent-dim); border: 1px solid var(--accent); border-radius: var(--radius); padding: 10px 14px; margin: -8px 0 18px;
}
.clip-selection-bar.hidden { display: none; }
.clip-selection-bar span { font-size: 13px; font-weight: 600; color: var(--text); }
.clip-selection-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.batch-reject-row { display: flex; gap: 8px; align-items: flex-start; margin: -8px 0 18px; }
.batch-reject-row.hidden { display: none; }
.batch-reject-row textarea { flex: 1; min-height: 44px; }
.filter-label { font-size: 12px; color: var(--muted); margin-right: 2px; font-weight: 500; }
.filter-chip {
  background: var(--panel); border: 1px solid var(--border); color: var(--text-dim);
  border-radius: var(--radius-full); padding: 6px 13px; font-size: 12.5px; font-weight: 500; cursor: pointer;
  display: flex; align-items: center; gap: 7px; transition: border-color .12s, background .12s, color .12s;
}
.filter-chip:hover { border-color: var(--border-strong); color: var(--text); }
.filter-chip .count { background: var(--panel3); border-radius: var(--radius-full); padding: 1px 7px; font-size: 11px; color: var(--muted); }
.filter-chip.active { border-color: var(--accent); background: var(--accent-dim); color: var(--text); }
.filter-chip.active .count { background: var(--accent); color: white; }
.filter-chip.clear { color: var(--muted); border-style: dashed; }
.clip-card.filtered-out { display: none; }

.add-pasta-btn {
  background: transparent; border: 1px dashed var(--border-strong); color: var(--muted);
  border-radius: var(--radius); padding: 9px 16px; font-size: 13px; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; transition: border-color .12s, color .12s, background .12s;
}
.add-pasta-btn:hover { border-color: var(--accent); color: var(--text); background: var(--accent-dim); }

.pasta-group { margin-bottom: 30px; scroll-margin-top: 20px; }
.pasta-group.needs-config {
  border: 1px solid var(--acao); border-radius: var(--radius-lg); padding: 14px 16px; margin: -14px -16px 24px;
  background: var(--acao-dim);
}
/* destaque temporario quando "Ver todos na Revisão" traz o usuario direto
   pra uma pasta especifica -- nao depende so de scroll, pisca uma vez pra
   deixar claro qual pasta era */
.pasta-group.focus-flash { animation: focusFlash 1.6s ease; }
@keyframes focusFlash {
  0%, 100% { box-shadow: none; }
  15%, 55% { box-shadow: 0 0 0 3px var(--accent); }
}

/* ---- Vídeos (overview) ---- */
.pasta-overview-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px; margin-bottom: 14px;
}
.pasta-overview-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.pasta-overview-head h3 { font-size: 15px; }
.pasta-overview-head .pasta-count { font-size: 12px; color: var(--muted); }
.pasta-preview-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.preview-thumb {
  flex: 0 0 auto; width: 72px; aspect-ratio: 9/16; border-radius: var(--radius-sm); overflow: hidden;
  background: #05070a; border: 1px solid var(--border);
}
.preview-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.preview-thumb.approved { border-color: var(--ok); }
.preview-thumb.rejected { border-color: var(--danger); opacity: .6; }
.preview-more {
  flex: 0 0 auto; width: 72px; aspect-ratio: 9/16; border-radius: var(--radius-sm); border: 1px dashed var(--border-strong);
  background: var(--panel2); color: var(--text-dim); font-weight: 700; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.preview-more:hover { border-color: var(--accent); color: var(--text); }
.skeleton-row { display: flex; gap: 8px; }
.skeleton-thumb { width: 72px; aspect-ratio: 9/16; border-radius: var(--radius-sm); }
.pasta-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.pasta-header h3 { font-size: 15px; }
.cat-badge {
  font-size: 10.5px; padding: 3px 9px; border-radius: var(--radius-full); font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
}
.cat-badge.NORMAL { background: var(--normal-dim); color: var(--normal); }
.cat-badge.ACAO { background: var(--acao-dim); color: var(--acao); }
.pasta-count { color: var(--muted); font-size: 12px; }
.needs-config-badge {
  background: var(--acao); color: oklch(20% 0.05 55); border: none;
  border-radius: var(--radius-full); padding: 3px 10px; font-size: 10.5px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 5px;
}
.pasta-header-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }

.collapse-toggle .icon { transition: transform .15s ease; }
.pasta-group.collapsed .collapse-toggle .icon { transform: rotate(-90deg); }
.pasta-group.collapsed .clip-grid { display: none; }

.icon-btn {
  background: var(--panel2); border: 1px solid var(--border); color: var(--muted); border-radius: var(--radius-sm);
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.icon-btn:hover { border-color: var(--accent); color: var(--text); background: var(--accent-dim); }
.icon-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.icon-btn:disabled { opacity: .35; cursor: not-allowed; }
.icon-btn:disabled:hover { border-color: var(--border); color: var(--muted); background: var(--panel2); }

.icon-btn-xs { width: 22px; height: 14px; border-radius: 4px; }
.icon-btn-xs .icon { width: 13px; height: 13px; }
.pasta-reorder { display: flex; flex-direction: column; gap: 2px; margin-right: 2px; }

.pasta-edit-panel {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px;
  margin-bottom: 12px; display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
}
.pasta-edit-panel.hidden { display: none; }
.field-group { display: flex; flex-direction: column; gap: 5px; }
.field-group label { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }

.upload-trigger {
  background: var(--panel2); border: 1px solid var(--border); color: var(--text-dim); border-radius: var(--radius);
  padding: 7px 13px; font-size: 12.5px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  transition: border-color .12s, color .12s, background .12s;
}
.upload-trigger:hover { border-color: var(--accent); color: var(--text); }
.upload-trigger.active { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

.upload-panel {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px;
  margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px;
}
.upload-panel.hidden { display: none; }
.upload-panel-head { display: flex; align-items: center; justify-content: space-between; }
.upload-panel-head h4 { font-size: 13.5px; color: var(--text-dim); }
.dropzone {
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius); padding: 24px 16px; text-align: center;
  cursor: pointer; transition: border-color .12s, background .12s; color: var(--muted);
}
.dropzone:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dropzone:hover, .dropzone.dragover { border-color: var(--accent); background: var(--accent-dim); color: var(--text); }
.dropzone svg { width: 26px; height: 26px; margin-bottom: 8px; opacity: .7; }
.dropzone .dz-title { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.dropzone .dz-sub { font-size: 11.5px; margin-top: 3px; }
.upload-panel-divider { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 11px; }
.upload-panel-divider::before, .upload-panel-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.upload-status { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.upload-status.success { color: var(--ok); }
.upload-status.error { color: var(--danger); }

.clip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 12px; }
.clip-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  cursor: pointer; transition: transform .12s, border-color .12s, box-shadow .12s; position: relative;
}
.clip-card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow); }
.clip-card.approved { border-color: var(--ok); }
.clip-card.rejected { border-color: var(--danger); opacity: .65; }
.clip-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }

.clip-select-toggle {
  position: absolute; top: 7px; left: 7px; z-index: 2; width: 22px; height: 22px; border-radius: 6px;
  background: oklch(0% 0 0 / .55); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.clip-select-toggle input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); }
.clip-card.rejected:hover { opacity: 1; }
.clip-thumb-wrap { position: relative; background: #05070a; }
.clip-thumb { width: 100%; aspect-ratio: 9/16; background: #05070a; object-fit: cover; display: block; }
.approved-ribbon, .rejected-ribbon {
  position: absolute; top: 7px; right: 7px; font-size: 10px;
  font-weight: 700; padding: 3px 8px; border-radius: var(--radius-full); display: flex; align-items: center; gap: 4px;
  box-shadow: var(--shadow-sm);
}
.approved-ribbon { background: var(--ok); color: oklch(18% 0.04 154); }
.rejected-ribbon { background: var(--danger); color: oklch(18% 0.04 23); }
.approved-ribbon svg, .rejected-ribbon svg { width: 11px; height: 11px; }
.no-reverse-badge {
  position: absolute; bottom: 7px; left: 7px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  padding: 3px 7px; border-radius: var(--radius-full); background: oklch(0% 0 0 / .6); color: var(--text-dim);
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm);
}
.clip-info { padding: 8px 9px; font-size: 11px; color: var(--muted); }
.clip-info .fname { color: var(--text-dim); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }

/* ==========================================================================
   Anexar roteiro
   ========================================================================== */
.attach-panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 18px; }
.attach-panel.hidden { display: none; }
.attach-help { font-size: 13px; color: var(--text-dim); margin-bottom: 12px; }
.attach-help p { margin: 0 0 9px; color: var(--muted); line-height: 1.55; }
.attach-help code { background: var(--panel2); padding: 1px 6px; border-radius: var(--radius-sm); font-size: 12px; }
.prompt-map { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; font-size: 13px; }
.prompt-map-row { color: var(--text-dim); display: flex; align-items: center; gap: 8px; }
.format-example {
  background: var(--panel2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 11.5px; color: var(--muted); overflow-x: auto; font-family: var(--font-mono);
}
#attachText {
  width: 100%; min-height: 140px; background: var(--panel2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; font-size: 12.5px;
  font-family: var(--font-mono); resize: vertical;
}
#attachText:focus { border-color: var(--accent); }
.attach-errors, .attach-warnings {
  margin-top: 12px; padding: 12px 14px; border-radius: var(--radius); font-size: 13px;
}
.attach-errors { background: var(--danger-dim); border: 1px solid var(--danger); color: var(--text-dim); }
.attach-warnings { background: var(--acao-dim); border: 1px solid var(--acao); color: var(--text-dim); }
.attach-errors ul, .attach-warnings ul { margin: 8px 0 0; padding-left: 18px; }
.attach-errors li, .attach-warnings li { margin-bottom: 3px; }

/* ==========================================================================
   Novo produto (modal)
   ========================================================================== */
.newproduct-content { max-width: 500px; text-align: left; }
.newproduct-content h3 { margin: 0 0 4px; font-size: 18px; }
.newproduct-sub { color: var(--muted); font-size: 12.5px; margin: 0 0 18px; }
.field-label { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }

.mp-list { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.mp-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--panel2);
  border: 1px solid var(--border); border-radius: var(--radius); font-size: 12.5px;
}
.mp-row input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); flex-shrink: 0; }
.mp-row .mp-name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.mp-row .mp-size { color: var(--text-dim); font-family: var(--font-mono); white-space: nowrap; }
.mp-row .mp-date { color: var(--muted); white-space: nowrap; }
.mp-row.selected { border-color: var(--danger); background: var(--danger-dim); }
.field-hint { font-size: 12px; color: var(--muted); margin: 8px 0 12px; line-height: 1.55; }
#npName {
  width: 100%; background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px; font-size: 14px; margin-bottom: 16px; transition: border-color .12s;
}
#npName:focus { border-color: var(--accent); }
.np-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.np-tab {
  flex: 1; background: var(--panel2); border: 1px solid var(--border); color: var(--muted);
  border-radius: var(--radius); padding: 11px 10px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px; transition: all .12s;
}
.np-tab.active { border-color: var(--accent); color: var(--text); background: var(--accent-dim); }
.np-pane.hidden { display: none; }
#npProgress.hidden { display: none; }

.filedrop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius); padding: 22px 16px; text-align: center;
  cursor: pointer; transition: all .12s; color: var(--muted); position: relative;
}
.filedrop:hover, .filedrop.dragover { border-color: var(--accent); background: var(--accent-dim); color: var(--text); }
.filedrop svg { width: 24px; height: 24px; margin-bottom: 6px; opacity: .7; }
.filedrop .fd-name { font-size: 12.5px; font-weight: 600; color: var(--text-dim); word-break: break-all; }
.filedrop .fd-list { font-size: 12px; color: var(--text-dim); margin-top: 4px; text-align: left; width: 100%; }
.filedrop .fd-list div { padding: 1px 0; word-break: break-all; }
.filedrop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ==========================================================================
   Config pendente
   ========================================================================== */
.no-reverse-summary {
  background: var(--warn-dim); border: 1px solid var(--warn); border-radius: var(--radius-lg);
  padding: 11px 16px; margin-bottom: 14px; font-size: 12.5px; color: var(--text-dim);
  display: flex; align-items: center; gap: 8px;
}
.no-reverse-summary svg { color: var(--warn); flex-shrink: 0; }

/* selo inline "expira em N dias" -- video final/feed/audio (ver lib/plans.js),
   mesma paleta de aviso do .no-reverse-summary, so compacto o bastante pra
   caber numa linha de card junto com tamanho/botoes */
.expiry-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--warn-dim); color: var(--warn); border-radius: var(--radius-full);
  padding: 3px 9px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.expiry-badge svg { width: 12px; height: 12px; flex-shrink: 0; }

.pending-config-panel {
  background: var(--acao-dim); border: 1px solid var(--acao); border-radius: var(--radius-lg);
  padding: 16px 18px; margin-bottom: 18px;
}
.pending-config-panel h4 { margin: 0 0 12px; color: var(--acao); font-size: 14px; display: flex; align-items: center; gap: 8px; }
.pending-config-row {
  display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px;
}
.pending-config-row input[type="text"] { width: 220px; }
.pending-config-row .count { color: var(--muted); font-size: 12px; margin-left: auto; }

/* ==========================================================================
   Lixeira
   ========================================================================== */
.flag-list { display: flex; flex-direction: column; gap: 10px; }
.flag-item {
  display: flex; gap: 14px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px;
  align-items: center; transition: border-color .12s;
}
.flag-item:hover { border-color: var(--border-strong); }
.flag-item img { width: 64px; height: 114px; object-fit: cover; border-radius: var(--radius-sm); background: #000; cursor: pointer; flex-shrink: 0; }
.flag-item .meta { flex: 1; min-width: 0; }
.flag-item .fname { font-weight: 500; }
.flag-item .reason { color: var(--danger); font-size: 12.5px; margin-top: 4px; display: flex; align-items: flex-start; gap: 5px; }
.flag-item .sub { color: var(--muted); font-size: 11.5px; margin-top: 5px; }

/* ==========================================================================
   Botões
   ========================================================================== */
.btn {
  background: var(--accent); color: white; border: none; border-radius: var(--radius); padding: 9px 16px;
  cursor: pointer; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px;
  transition: background .12s, filter .12s, transform .05s; font-family: var(--font-body);
}
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: var(--panel2); border: 1px solid var(--border); color: var(--text); }
.btn.secondary:hover { border-color: var(--border-strong); background: var(--panel3); }
.btn.danger { background: var(--danger); }
.btn.danger:hover { filter: brightness(1.08); }
.btn.ok { background: var(--ok); color: oklch(18% 0.04 154); }
.btn.ok:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--text); background: var(--panel2); }
.btn.big { padding: 13px 24px; font-size: 14.5px; border-radius: var(--radius); }
.btn.btn-sm { padding: 7px 13px; font-size: 12.5px; }
.btn.secondary.active { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ==========================================================================
   Roteiro
   ========================================================================== */
.roteiro-summary { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.token-list {
  max-height: 340px; overflow-y: auto; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 12px; font-family: var(--font-mono); font-size: 11.5px; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr));
  gap: 5px;
}
.token-list .tok { padding: 4px 8px; border-radius: var(--radius-sm); }
.token-list .tok.NORMAL { background: var(--normal-dim); color: var(--normal); }
.token-list .tok.ACAO { background: var(--acao-dim); color: var(--acao); }
.source-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted);
  background: var(--panel); border: 1px solid var(--border); padding: 5px 10px; border-radius: var(--radius-full);
  margin-bottom: 14px;
}

/* ==========================================================================
   Pipeline
   ========================================================================== */
.pipeline-phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 14px; margin: 18px 0; }
.phase-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; transition: border-color .15s; }
.phase-card.is-running { border-color: var(--accent); }
.phase-card.is-done { border-color: var(--ok); }
.phase-card.is-error { border-color: var(--danger); }
.phase-card h4 { margin: 0 0 10px; display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; gap: 8px; }
.phase-status { font-size: 10.5px; padding: 3px 9px; border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: .03em; font-weight: 700; white-space: nowrap; }
.phase-status.pending { background: var(--panel2); color: var(--muted); }
.phase-status.running { background: var(--accent-dim); color: var(--accent); }
.phase-status.done { background: var(--ok-dim); color: var(--ok); }
.phase-status.error { background: var(--danger-dim); color: var(--danger); }
.phase-status.cancelled { background: var(--warn-dim); color: var(--warn); }

.progress-bar { height: 8px; background: var(--panel2); border-radius: var(--radius-full); overflow: hidden; margin: 10px 0; }
.progress-bar .fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); transition: width .3s ease; border-radius: var(--radius-full); }
.phase-numbers { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); }

.overall-bar { margin: 4px 0 22px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; }
.overall-bar .row strong { font-size: 13.5px; }
.overall-bar .progress-bar { height: 14px; margin: 10px 0 2px; }
#overallPct { font-family: var(--font-display); font-weight: 700; }

.log-panel {
  background: oklch(10% 0.01 260); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 14px;
  max-height: 220px; min-height: 90px; overflow-y: auto; font-family: var(--font-mono); font-size: 11.5px; color: oklch(78% 0.1 154);
  /* dentro de um container flex vertical (ex: .audio-side-scroll), um item
     com overflow-y proprio tem "min-height: auto" resolvido pra 0 por
     padrao -- o flexbox entao encolhia isso quase a zero quando faltava
     espaco, em vez de deixar o SCROLL DO PAI (que ja existe) lidar com o
     excesso. flex-shrink:0 mantem a altura minima sempre visivel. */
  flex-shrink: 0;
}
.log-panel div { padding: 2px 0; }
.log-panel:empty::before { content: "O log de execução aparece aqui quando a pipeline rodar."; color: var(--faint); font-family: var(--font-body); }

.output-box { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; margin-top: 20px; }
.output-box h4 { margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.output-box video { width: 220px; border-radius: var(--radius); background: black; }

/* lista de ate MAX_FINALS_PER_PRODUCT videos finais salvos (mais recente
   primeiro) -- gerar de novo apaga o mais antigo quando o limite e atingido */
.finals-list-head { display: flex; align-items: center; gap: 10px; margin: 20px 0 8px; }
.finals-list-head h4 { margin: 0; display: flex; align-items: center; gap: 8px; }
.finals-counter { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-full); background: var(--panel2); color: var(--muted); }
.finals-counter.at-limit { background: var(--warn-dim); color: var(--warn); }
.finals-list { display: flex; flex-wrap: wrap; gap: 16px; }
.finals-list .final-item { margin-top: 0; flex: 0 0 auto; }

/* ==========================================================================
   Modais
   ========================================================================== */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal.hidden { display: none; }
/* o modal de confirmacao pode ser aberto POR CIMA de outro modal (ex:
   excluir um video dentro do modal de "videos de feed gerados") -- sem um
   z-index maior ele abria ATRAS (mesmo z-index, e na ordem do HTML o outro
   modal fica na frente), e o usuario nao conseguia clicar em Excluir */
#confirmModal { z-index: 80; }
.modal-backdrop { position: absolute; inset: 0; background: oklch(0% 0 0 / .7); backdrop-filter: blur(2px); }
.modal-content {
  position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px; max-width: 460px; width: 100%; max-height: 90vh; overflow-y: auto; z-index: 1; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; transition: opacity .13s ease;
}
.modal-content.fading { opacity: 0; }
.modal-content video {
  width: 100%; border-radius: var(--radius); background: black; object-fit: contain;
  flex-shrink: 1; min-height: 0; max-height: min(60vh, calc(100vh - 430px));
}
.modal-close {
  position: absolute; top: 12px; right: 12px; background: var(--panel2); border: 1px solid var(--border); color: var(--muted);
  border-radius: var(--radius-full); width: 30px; height: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.modal-close:hover { color: var(--text); border-color: var(--border-strong); }
.modal-meta { color: var(--muted); font-size: 12px; margin: 10px 0; }
.modal-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.modal-nav:empty { display: none; margin: 0; }
.modal-nav .btn { padding: 6px 12px; font-size: 12.5px; }
.modal-nav-pos { font-size: 12px; color: var(--muted); font-family: var(--font-mono); }
.modal-status {
  font-size: 12.5px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: var(--radius); background: var(--panel2);
}
.modal-status.approved { color: var(--ok); background: var(--ok-dim); }
.modal-status.pending { color: var(--muted); }
.modal-status.rejected { color: var(--danger); background: var(--danger-dim); }
.modal-actions { margin-top: 4px; display: flex; flex-direction: column; gap: 10px; }
.modal-actions textarea {
  width: 100%; min-height: 64px; background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px; font-size: 13px; resize: vertical; font-family: var(--font-body);
}
.modal-actions textarea:focus { border-color: var(--accent); }
.modal-actions hr { border: none; border-top: 1px solid var(--border); margin: 2px 0; width: 100%; }
.no-reverse-toggle {
  display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-dim); cursor: pointer;
}
.no-reverse-toggle input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); flex-shrink: 0; }

/* ==========================================================================
   Pagina "Meu perfil" (dados da conta + resumo + plano) + modal de
   solicitar upgrade
   ========================================================================== */
/* cabecalho premium: avatar com gradiente de marca (mesmo gradiente do
   logo em login.css), nome grande, e-mail, metadados em linha. Nunca usa
   o background verde/decorativo da referencia que o usuario mandou --
   pedido explicito ("nao precisa ter esse background... mas os elementos
   ali em si eu quero deixar um design premium") -- so os CARTOES/tipografia
   seguem a referencia, sempre dentro da paleta escura ja usada no resto
   do site. */
.profile-header {
  display: flex; align-items: center; gap: 20px; padding: 26px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
  margin-bottom: 28px; position: relative; overflow: hidden;
}
.profile-header::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(480px 200px at 0% 0%, var(--accent-dim), transparent 70%);
}
.profile-avatar {
  width: 68px; height: 68px; border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 27px; color: white;
  box-shadow: var(--shadow); text-transform: uppercase; position: relative;
}
.profile-header-info { position: relative; min-width: 0; }
.profile-header-name { margin: 0; font-family: var(--font-display); font-size: 23px; font-weight: 700; }
.profile-header-email { color: var(--muted); font-size: 13.5px; margin-top: 3px; word-break: break-all; }
.profile-header-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.profile-header-meta span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); }
.profile-header-meta .icon-sm { color: var(--muted); }

.profile-section-title {
  margin: 0 0 14px; font-family: var(--font-display); font-size: 15px; font-weight: 700;
  color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em;
}

/* ---- secao "Meu plano" -- design premium pedido pelo usuario com
   valores EXATOS (cores/medidas literais, nao os tokens do site) a
   partir de uma especificacao detalhada que ele mandou depois de duas
   tentativas anteriores nao terem acertado o visual. Escopado só aqui
   dentro (nunca mexe nos tokens globais em :root) -- o resto do site
   continua com a paleta de sempre. ---- */
.plan-premium-section {
  position: relative; overflow: hidden; isolation: isolate; max-width: 1400px; margin: 0 auto;
  background: linear-gradient(180deg, #050a0f, #071019);
  border: 1px solid #182530; border-radius: 20px;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 4vw, 56px);
  /* container query (nao media query) pro grid de cards abaixo -- reage
     a largura DISPONIVEL de verdade (depois da sidebar/padding), nunca a
     largura crua da viewport, que ficaria errada com a sidebar
     colapsada/expandida ou em telas medias tipo notebook. */
  container-type: inline-size;
}
/* glow verde discreto, cantos superior-direito e inferior-esquerdo */
.plan-premium-section::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(560px 380px at 100% 0%, rgba(34, 197, 94, .10), transparent 62%),
    radial-gradient(560px 380px at 0% 100%, rgba(34, 197, 94, .07), transparent 62%);
}
/* texturinha de pontos, so no canto superior direito */
.plan-premium-dots {
  position: absolute; top: 0; right: 0; width: 280px; height: 280px; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(circle at 100% 0%, black, transparent 68%);
  mask-image: radial-gradient(circle at 100% 0%, black, transparent 68%);
}
.plan-premium-head { position: relative; z-index: 1; margin-bottom: 36px; }
.plan-premium-dash { width: 40px; height: 4px; border-radius: 2px; background: #22c55e; margin-bottom: 18px; }
.plan-premium-title { margin: 0; font-family: var(--font-body); font-size: clamp(28px, 4vw, 40px); font-weight: 800; color: #fff; }
.plan-premium-sub { margin: 10px 0 0; font-size: 18px; color: #93a4b8; }

/* grid (nao flex-wrap): 3 colunas iguais sempre que houver espaco --
   "layout horizontal com tres cards alinhados numa linha" e um requisito
   explicito do usuario. flex-wrap com largura fixa de card quebrava pra
   2-por-linha em resolucoes comuns de notebook (1440px) por causa da
   sidebar do proprio app -- grid com 1fr reparte o espaco disponivel de
   verdade entre as 3 colunas em vez de exigir uma largura minima fixa. */
.plan-cards-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@container (max-width: 760px) {
  .plan-cards-grid { grid-template-columns: 1fr; }
}
@container (min-width: 761px) and (max-width: 980px) {
  .plan-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
.plan-card {
  min-height: 520px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 120px), #0e1620;
  border: 1px solid #2a3a4a; border-radius: 17px; padding: 34px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .05);
  display: flex; flex-direction: column; gap: 26px; transition: border-color .15s, box-shadow .15s;
}
.plan-card.current { border-color: #22c55e; box-shadow: 0 20px 50px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 1px #22c55e; }
.plan-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.plan-card-title { display: flex; align-items: center; gap: 14px; }
.plan-card-head h3 { margin: 0; font-size: 24px; font-weight: 700; color: #fff; font-family: var(--font-body); }
.plan-tier-icon {
  width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
  background: #16222d; border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  display: flex; align-items: center; justify-content: center;
}
.plan-tier-icon svg { width: 22px; height: 22px; }
.plan-tier-icon.gray { color: #93a4b8; }
.plan-tier-icon.green { color: #4ade80; }
.plan-badge {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  background: rgba(34, 197, 94, .15); color: #4ade80; border-radius: var(--radius-full); padding: 4px 11px;
  flex-shrink: 0;
}
.plan-limit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; flex: 1; }
.plan-limit-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 16px; color: #8ea0b5; padding: 14px 0; border-bottom: 1px solid rgba(148, 163, 184, .10);
}
.plan-limit-list li:last-child { border-bottom: none; }
.plan-limit-list li strong { color: #f8fafc; font-weight: 700; }
.plan-card-action { display: flex; }
.plan-card-action .btn { width: 100%; justify-content: center; }
.plan-card-action .status-pill.active {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center; width: 100%; height: 44px;
  background: rgba(22, 163, 74, .18); border: 1px solid rgba(34, 197, 94, .25); border-radius: 999px;
  color: #4ade80; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
@media (max-width: 560px) {
  .profile-header { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ==========================================================================
   Modal de geracao/resultados do vídeo pro feed
   ========================================================================== */
.feed-gen-content { max-width: min(980px, 94vw); text-align: left; }
.feed-settings-grid { display: flex; gap: 24px; flex-wrap: wrap-reverse; }
.feed-settings-main { flex: 1 1 300px; min-width: 0; }
.feed-settings-preview { flex: 0 0 260px; position: sticky; top: 0; align-self: flex-start; }
.feed-settings-divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
/* acima de ~640px os dois viram colunas lado a lado -- so a coluna da
   esquerda (configuracoes) ganha scroll proprio, a da direita (previa do
   vídeo) fica sempre estatica na tela, nunca "cai" enquanto o usuario
   mexe nas opcoes (pedido explicito do usuario). Abaixo disso as colunas
   empilham (wrap-reverse: previa em cima, config embaixo) e a pagina
   toda rola normalmente, sem precisar de scroll interno. */
@media (min-width: 640px) {
  .feed-settings-main { max-height: min(58vh, 520px); overflow-y: auto; padding-right: 10px; }
}
.feed-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; max-height: 60vh; overflow-y: auto; padding-right: 4px; }
.feed-result-card { display: flex; flex-direction: column; gap: 8px; }
.feed-result-thumb {
  position: relative; aspect-ratio: 9/16; border-radius: var(--radius); overflow: hidden; background: black;
  cursor: pointer; border: 1px solid var(--border);
}
.feed-result-thumb img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; display: block; }
.feed-result-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: oklch(0% 0 0 / .25); color: white; opacity: 0; transition: opacity .12s;
}
.feed-result-thumb:hover .feed-result-play { opacity: 1; }
.feed-result-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* botao de excluir video de feed -- canto superior direito da thumbnail,
   aparece no hover (mesmo padrao do lixo no card de produto) */
.feed-result-del {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: var(--radius-sm);
  background: oklch(0% 0 0 / .55); color: white; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .12s, background .12s; z-index: 2;
}
.feed-result-thumb:hover .feed-result-del { opacity: 1; }
.feed-result-del:hover { background: var(--danger); }
.feed-result-del svg { width: 15px; height: 15px; }

/* agrupamento por DATA de geracao (pedido do usuario) -- cada data e um
   bloco com cabecalho (a data) + os videos daquele dia */
.feed-date-group { margin-bottom: 22px; }
.feed-date-group:last-child { margin-bottom: 0; }
.feed-date-head {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.feed-date-head .fdh-title { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text); }
.feed-date-head .fdh-title svg { color: var(--muted); width: 15px; height: 15px; }
.feed-date-head .fdh-count { font-size: 12px; color: var(--muted); }
/* dentro de um grupo por data, o grid nao rola sozinho (o modal inteiro ja
   rola) -- senao cada dia teria sua propria barra de rolagem a 60vh */
.feed-date-group .feed-results-grid { max-height: none; overflow: visible; padding-right: 0; }

/* sub-bloco de GERAÇÃO (lote) dentro de um dia -- cada rodada de "gerar" vira
   seu proprio bloco, com contagem e botao de baixar so aquela geracao. */
.feed-gen-group { margin: 12px 0 0; padding: 12px 12px 4px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel2); }
.feed-gen-group:first-child { margin-top: 0; }
.feed-gen-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.feed-gen-head .fgh-title { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--text); }
.feed-gen-head .fgh-title svg { color: var(--accent); width: 14px; height: 14px; }
.feed-gen-head .fgh-count { font-size: 11.5px; color: var(--muted); background: var(--panel3); border-radius: 999px; padding: 2px 9px; }
.feed-gen-head .spacer { flex: 1; }

/* "big numbers" do ciclo de nao-repeticao (sacola) na pagina de feed do
   produto -- torna visivel que clipes usados sao reservados */
.feed-bag-stats { margin: 6px 0 18px; }
.fbs-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fbs-card {
  display: flex; align-items: center; gap: 11px; padding: 13px 15px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.fbs-icon {
  width: 34px; height: 34px; border-radius: var(--radius); flex-shrink: 0;
  background: var(--panel2); color: var(--muted); display: flex; align-items: center; justify-content: center;
}
.fbs-card.ok .fbs-icon { background: var(--ok-dim); color: var(--ok); }
.fbs-card.used .fbs-icon { background: var(--warn-dim); color: var(--warn); }
.fbs-num { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1; }
.fbs-label { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
@media (max-width: 560px) { .fbs-cards { grid-template-columns: 1fr; } }

/* badge "ja usado" em cada clipe da lista de elegibilidade -- mesmo peso
   visual das pills de status (aprovado/reprovado) da revisao */
.feed-used-badge, .feed-avail-badge {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  border-radius: var(--radius-full); padding: 3px 8px; white-space: nowrap;
}
.feed-used-badge { color: var(--warn); background: var(--warn-dim); }
.feed-avail-badge { color: var(--ok); background: var(--ok-dim); }
.feed-used-badge svg, .feed-avail-badge svg { width: 12px; height: 12px; }

/* grade de clipes elegiveis do feed (em vez de lista vertical -- fica
   compacta mesmo com 200 clipes). Cada card: miniatura + checkbox +
   duracao + pedaco do nome + badge disponivel/ja usado. */
/* no maximo 5 por linha (pedido do usuario -- fica num tamanho bom), mas
   sem espremer em tela estreita: o minmax usa o MAIOR entre 104px (piso
   pra nao virar miniatura minuscula) e 1/5 da largura disponivel (menos os
   4 gaps). Assim, em tela larga cabem exatamente 5; em telas menores o
   piso de 104px reduz pra 4/3/2 colunas naturalmente. */
.feed-clip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(104px, calc((100% - 40px) / 5)), 1fr));
  gap: 10px;
}
.feed-clip-card { display: flex; flex-direction: column; gap: 7px; cursor: pointer; margin: 0; }
.feed-clip-card.is-used { opacity: .55; cursor: default; }
.feed-clip-card.is-off { opacity: .5; } /* excluido manualmente pelo usuario */
.fcc-thumb {
  position: relative; aspect-ratio: 9 / 16; border-radius: var(--radius); overflow: hidden;
  background: #000; border: 1px solid var(--border); transition: border-color .12s;
}
.feed-clip-card:not(.is-used):not(.is-off) .fcc-thumb { border-color: color-mix(in srgb, var(--ok) 55%, var(--border)); }
.fcc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fcc-thumb input[type="checkbox"] {
  position: absolute; top: 6px; left: 6px; z-index: 3; width: 16px; height: 16px; cursor: pointer;
  accent-color: var(--accent); border-radius: 4px; box-shadow: 0 0 0 2px oklch(0% 0 0 / .45);
}
.fcc-thumb input[type="checkbox"]:disabled { cursor: default; }
.fcc-dur {
  position: absolute; bottom: 6px; right: 6px; background: oklch(0% 0 0 / .62); color: #fff;
  font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: var(--radius-full);
}
/* ribbon sobre o video, canto superior direito -- mesmo padrao/posicao do
   approved-ribbon da revisao (fundo solido, texto escuro, pill) */
.fcc-ribbon {
  position: absolute; top: 6px; right: 6px; z-index: 2; font-size: 8px; font-weight: 700;
  padding: 2px 5px; border-radius: var(--radius-full); display: flex; align-items: center; gap: 2px;
  box-shadow: var(--shadow-sm); white-space: nowrap; max-width: calc(100% - 30px);
}
.fcc-ribbon svg { width: 9px; height: 9px; flex-shrink: 0; }
.fcc-ribbon.avail { background: var(--ok); color: oklch(18% 0.04 154); }
.fcc-ribbon.used { background: var(--warn); color: oklch(20% 0.05 80); }
.fcc-meta { display: flex; flex-direction: column; min-width: 0; }
.fcc-name { font-size: 11px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* previa ao vivo da edicao automatica (headline + seta CTA sobre um frame
   real de um clipe elegivel) -- puramente CSS, nunca chama o servidor/ffmpeg
   a cada ajuste, so quando o usuario troca de clipe/produto */
.feed-preview-box {
  position: relative; aspect-ratio: 9/16; width: 100%; max-width: 220px; margin: 0 auto;
  border-radius: var(--radius); overflow: hidden; background: var(--panel2); border: 1px solid var(--border);
}
.feed-preview-box img#feedPreviewImg { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .1s; }
.feed-preview-headline {
  /* left/top setados ao vivo via JS (updateFeedPreview) -- X ancora pelo
     centro do texto (translateX-50%), Y pelo topo, mesma convencao do
     filtro ffmpeg real */
  position: absolute; transform: translateX(-50%); max-width: 92%;
  font-family: var(--font-body); font-weight: 800; text-align: center; color: #fff; white-space: nowrap;
  text-shadow: 0 0 3px #000, 0 0 3px #000, 0 1px 2px #000; pointer-events: none;
}
/* left/top tambem setados ao vivo via JS -- ancoram o canto superior
   esquerdo, mesma convencao do banner/overlay real */
.feed-preview-cta { position: absolute; pointer-events: none; }
.feed-preview-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 16px; color: var(--muted); font-size: 12.5px;
}

/* previa dos overlays do vídeo final (banner/contador/ticker) -- mesma
   caixa e mesma logica de fracao de tela do preview do feed acima, valores
   de posicao/tamanho setados ao vivo via JS (updateOverlaysPreview) */
.ov-preview-banner { position: absolute; pointer-events: none; border-radius: 2px; }
/* widget do contador na previa -- x/y ancoram o canto superior esquerdo
   (mesma convencao do real), largura setada via JS (fracao do video),
   altura segue via aspect-ratio a mesma proporcao do canvas real
   (280x360). Sem anel/gauge (removido a pedido do usuario) -- so uma
   borda simples e estatica ao redor do gif, espessura setada via JS
   (0 = sem borda). "--cd-text"/"--cd-accent" setadas via JS a partir dos
   color pickers, mesma logica do real em pipelineOverlay.js. */
.ov-preview-countdown {
  position: absolute; pointer-events: none; aspect-ratio: 280 / 360;
  display: flex; flex-direction: column; align-items: center; font-family: var(--font-body);
  --cd-text: #fff; --cd-accent: #fff;
}
.ov-preview-countdown-clockwrap {
  width: 44%; aspect-ratio: 1 / 1; margin-top: 3%;
  display: flex; align-items: center; justify-content: center;
}
.ov-preview-countdown-clock { width: 100%; height: 100%; object-fit: contain; }
.ov-preview-countdown-title { font-weight: 800; margin-top: 4%; text-align: center; white-space: nowrap; color: var(--cd-text); }
.ov-preview-countdown-digital { font-weight: 800; margin-top: 2%; color: var(--cd-text); }
.ov-preview-countdown-bar { width: 80%; height: 4%; background: #3c3c3c; border-radius: 2px; margin-top: 4%; overflow: hidden; }
.ov-preview-countdown-bar-fill { width: 80%; height: 100%; background: var(--cd-accent); }
/* palavra/emoji e imagem do anti-frame -- posicao FIXA de exemplo na
   previa (o real flutua/deriva aleatorio a cada geracao) */
.ov-preview-af-word {
  position: absolute; top: 12%; right: 8%; font-weight: 800; pointer-events: none;
  text-shadow: 0 0 3px #000, 0 1px 2px #000;
}
.ov-preview-af-image {
  position: absolute; top: 30%; left: 10%; border-radius: 4px; pointer-events: none;
}
/* pilula do ticker na previa -- x/y/width/height setados via JS (fracoes
   INDEPENDENTES, mesma logica do real -- nunca aspect-ratio fixo) */
.ov-preview-ticker {
  position: absolute; border-radius: 999px; overflow: hidden; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--ov-ticker-color, #075f42) 82%, white), var(--ov-ticker-color, #075f42) 45%, color-mix(in srgb, var(--ov-ticker-color, #075f42) 78%, black));
  border: 2px solid #79a58f; box-sizing: border-box; align-items: center; padding: 0 6%;
}
.ov-preview-ticker-text {
  white-space: nowrap; color: #fff; font-weight: 700; font-family: var(--font-body);
  padding-left: 100%; display: inline-block; animation: ov-ticker-scroll 6s linear infinite;
}
@keyframes ov-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }

.plan-upgrade-content { max-width: 480px; text-align: left; }
.plan-upgrade-content h3 { margin: 0 0 6px; font-size: 18px; }
.plan-compare-table { margin-top: 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.plan-compare-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; padding: 9px 12px; font-size: 13px; }
.plan-compare-row:nth-child(even) { background: var(--panel2); }
.plan-compare-row.plan-compare-head { font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); background: transparent; }
.plan-compare-row span:first-child { color: var(--muted); }
.plan-compare-row .better { color: var(--ok); font-weight: 700; }

.confirm-content { max-width: 420px; text-align: center; }
.confirm-icon {
  width: 46px; height: 46px; border-radius: var(--radius-full); background: var(--danger-dim); color: var(--danger);
  display: flex; align-items: center; justify-content: center; margin: 4px auto 14px;
}
/* variante informativa/amigavel -- usada quando o modal generico de
   confirmacao nao esta avisando de um risco/acao destrutiva, so
   convidando/perguntando algo (ex: convite pra gerar videos de feed).
   Sem isso, todo showConfirm() saia sempre vermelho feito erro, mesmo
   quando a pergunta em si nao tem nada de perigoso. */
.confirm-icon.info { background: var(--accent-dim); color: var(--accent); }
.confirm-message { font-size: 14px; line-height: 1.6; margin: 0 0 20px; white-space: pre-line; color: var(--text-dim); }
.confirm-buttons { display: flex; gap: 10px; justify-content: center; }

/* ==========================================================================
   Toasts
   ========================================================================== */
.toasts { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 100; max-width: 340px; }
.toast {
  background: var(--panel2); border: 1px solid var(--border); padding: 11px 14px; border-radius: var(--radius);
  font-size: 13px; box-shadow: var(--shadow-lg); display: flex; align-items: flex-start; gap: 9px;
  animation: toast-in .18s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.toast svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.toast.error { border-color: var(--danger); }
.toast.error svg { color: var(--danger); }
.toast.success { border-color: var(--ok); }
.toast.success svg { color: var(--ok); }

/* ==========================================================================
   Utilitários
   ========================================================================== */
.row { display: flex; align-items: center; gap: 10px; }

/* ==========================================================================
   Admin
   ========================================================================== */
.admin-header { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.admin-header h2 { font-size: 19px; }
.admin-back-btn { flex-shrink: 0; }

.admin-users-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-bottom: 30px; }
.admin-user-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; }
.admin-user-card .auc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.admin-user-avatar {
  width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--panel3); color: var(--muted);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 14px;
  flex-shrink: 0; text-transform: uppercase;
}
.admin-user-card .auc-email { font-weight: 600; font-size: 13.5px; word-break: break-all; }
.admin-user-card .auc-meta { font-size: 11.5px; color: var(--muted); margin: 2px 0 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.status-pill { border-radius: var(--radius-full); padding: 2px 9px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.status-pill.active { background: var(--ok-dim); color: var(--ok); }
.status-pill.pending { background: var(--warn-dim); color: var(--warn); }
.status-pill.disabled { background: var(--danger-dim); color: var(--danger); }
.admin-user-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-user-actions .btn { padding: 6px 11px; font-size: 11.5px; }
.resetpw-row { display: flex; gap: 6px; margin-top: 10px; }
.resetpw-row.hidden { display: none; }
.resetpw-row input { flex: 1; min-width: 0; }

/* barra de acoes em lote (admin usuarios) -- mesmo espirito visual do
   .mini-stats/.filter-bar ja usados no resto do painel */
.bulk-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--accent-dim);
  border: 1px solid var(--accent); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; font-size: 13px;
}
.bulk-bar.hidden { display: none; }
.bulk-bar .btn { padding: 6px 11px; font-size: 12px; }

/* paginacao */
.pagination-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 13px; }
.pagination-row .btn { padding: 6px 11px; font-size: 12.5px; }

/* drawer de detalhes do usuario admin */
.drawer-field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 20px; }
.drawer-field-grid .field-label { display: block; margin-bottom: 3px; }
.drawer-field-grid > div > div:last-child { font-size: 13.5px; color: var(--text); }

.admin-product-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px; margin-bottom: 10px; cursor: pointer; transition: border-color .12s, transform .12s;
  display: flex; align-items: center; gap: 14px;
}
.admin-product-card:hover { border-color: var(--accent); transform: translateX(2px); }
.admin-product-card .apc-icon {
  width: 38px; height: 38px; border-radius: var(--radius); background: var(--panel2); color: var(--muted);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.admin-product-card .apc-body { min-width: 0; flex: 1; }
.admin-product-card .apc-meta { color: var(--muted); font-size: 12px; margin-top: 3px; }

/* inputs de texto/senha/select genéricos */
input[type="text"], input[type="email"], input[type="password"], select {
  background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 7px 10px; font-size: 13px; font-family: var(--font-body); transition: border-color .12s;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, select:focus { border-color: var(--accent); }
input[type="file"] { color: var(--muted); font-size: 12px; }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 760px) {
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: -240px; width: 240px;
    transition: left .18s ease; box-shadow: var(--shadow-lg);
  }
  .sidebar.mobile-open { left: 0; }
  .sidebar.collapsed { width: 240px; } /* colapso nao se aplica no mobile -- e off-canvas */
  .sidebar.collapsed .brand-label, .sidebar.collapsed .sidebar-section-label,
  .sidebar.collapsed .sidebar-item .item-label, .sidebar.collapsed .sidebar-item .item-badge,
  .sidebar.collapsed .sidebar-usage, .sidebar.collapsed .sidebar-status .ss-text,
  .sidebar.collapsed .sidebar-user-row .user-email { display: revert; }
  .sidebar.collapsed .sidebar-item { justify-content: flex-start; padding: 8px 10px; }
  .sidebar.collapsed .sidebar-status { justify-content: flex-start; }
  .sidebar.collapsed .sidebar-user-row { justify-content: flex-start; }
  .sidebar-collapse-btn { display: none; }
  .sidebar-scrim.show {
    display: block; position: fixed; inset: 0; background: oklch(0% 0 0 / .5); z-index: 25;
  }
  .topbar-mini {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--panel);
    border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10;
    /* safe-area: em celular com notch (viewport-fit=cover) o topo do
       viewport fica ATRAS do notch -- empurra o botao de menu pra baixo dele.
       Sem isso o menu ficava colado no topo e inclicavel. */
    padding-top: calc(12px + env(safe-area-inset-top));
  }
  .mobile-menu-btn {
    /* alvo de toque confortavel (min 44px recomendado no mobile) */
    width: 40px; height: 40px; border-radius: var(--radius-sm); background: transparent; border: 1px solid var(--border);
    color: var(--text-dim); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
  }
  /* o drawer tambem respeita o notch e a barra inferior de gestos */
  .sidebar { padding-top: env(safe-area-inset-top); }
  .sidebar-bottom { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  #app { padding: 16px 14px calc(40px + env(safe-area-inset-bottom)); }
  #app { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .stepper { flex-direction: column; }
  .step { min-width: 0; }
  .clip-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
  .pasta-config, .pasta-header-actions { width: 100%; }
  .admin-users-grid, .products-grid { grid-template-columns: 1fr; }
  .page-head { align-items: flex-start; }

  /* ---- DESTRAVA o scroll do body no mobile ----
     O app foi desenhado como shell de desktop (body travado em 100vh +
     scroll DENTRO de .main-col). No iOS a barra inferior do Safari so
     recolhe quando a PAGINA rola -- com o scroll numa div interna ela fica
     permanente e o conteudo final fica cortado embaixo dela (acontecia em
     TODAS as paginas). Deixando o body rolar, a barra recolhe sozinha e
     nada mais fica cortado. */
  html, body { height: auto; min-height: 100dvh; overflow: visible; }
  body { display: block; }
  .shell { display: block; height: auto; min-height: 100dvh; overflow: visible; }
  .main-col { height: auto; min-height: 100dvh; overflow: visible; }

  /* ---- Modais FULL-SCREEN de verdade no mobile ----
     Ocupam a tela toda e ROLAM como pagina (o modal inteiro rola, nao uma
     caixinha interna) -- o topo nunca fica cortado sob a barra de URL e
     nenhuma opcao fica escondida atras de video/preview. X fixo, sempre
     alcancavel. */
  .modal { display: block; padding: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal-backdrop { position: fixed; }
  .modal-content {
    /* !important pra vencer os max-width inline (ex: style="max-width:380px")
       que varios modais tem no index.html -- sem isso, em iPhone de 390px+
       sobrava uma faixa lateral e o modal nao ficava full-screen de verdade */
    max-width: none !important; width: 100%; min-height: 100dvh; max-height: none; height: auto;
    border-radius: 0; margin: 0; overflow: visible;
    padding: 16px;
    padding-top: calc(58px + env(safe-area-inset-top)); /* espaco pro X fixo */
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .modal-close {
    position: fixed; top: calc(10px + env(safe-area-inset-top)); right: 12px;
    width: 40px; height: 40px; z-index: 5; background: var(--panel2);
  }
  /* video/preview nao domina a tela -- as opcoes ficam alcancaveis rolando */
  .modal-content video { max-height: 46dvh; }
  .feed-results-grid { max-height: none; }

  /* config de geracao (feed) e de overlay (pipeline) compartilham esse grid:
     no mobile as OPCOES vem primeiro e a preview fica pequena embaixo (antes
     a preview alta vinha em cima via wrap-reverse e cobria as opcoes) */
  .feed-settings-grid { flex-direction: column; flex-wrap: nowrap; gap: 16px; }
  .feed-settings-preview { position: static; flex: none; width: 100%; }
  .feed-settings-main { max-height: none; overflow: visible; padding-right: 0; }
  .feed-preview-box { max-width: 140px; }

  /* iOS Safari da ZOOM automatico ao focar um campo com fonte < 16px (e
     desalinha a tela toda). Forca 16px em todos os campos no mobile. */
  input, textarea, select { font-size: 16px; }
  /* linhas de botoes dentro de modal quebram em vez de espremer no touch */
  .modal-content .row { flex-wrap: wrap; }
}

/* ==========================================================================
   Tour de onboarding (1o acesso) -- overlay em 4 paineis (nunca cobre o
   elemento em destaque, entao o clique passa direto pra ele sem truque
   nenhum), anel de destaque, e o card explicativo
   ========================================================================== */
#tourChrome { position: fixed; inset: 0; z-index: 500; }
.tour-panel {
  position: fixed; background: oklch(0% 0 0 / .7); pointer-events: auto;
  transition: top .28s ease, left .28s ease, right .28s ease, bottom .28s ease, width .28s ease, height .28s ease;
}
.tour-highlight-ring {
  position: fixed; pointer-events: none; border-radius: 12px;
  box-shadow: 0 0 0 3px var(--accent), 0 0 0 8px oklch(68% 0.15 262 / .18), 0 8px 30px oklch(0% 0 0 / .35);
  transition: top .28s ease, left .28s ease, width .28s ease, height .28s ease;
}
.tour-card {
  position: fixed; background: var(--panel); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); padding: 18px 20px; width: min(320px, calc(100vw - 32px));
  box-shadow: 0 16px 44px oklch(0% 0 0 / .5);
  transition: top .28s ease, left .28s ease;
}
.tour-card:focus { outline: none; }
.tour-step-count { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.tour-card h4 { margin: 0 0 8px; font-size: 16px; color: var(--text); padding-right: 20px; }
.tour-card p { margin: 0 0 18px; font-size: 13.5px; color: var(--text-dim); line-height: 1.55; }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-actions-right { display: flex; gap: 8px; }
.tour-skip {
  background: none; border: none; color: var(--muted); font-size: 12.5px; cursor: pointer; padding: 6px 2px;
  border-radius: var(--radius-sm);
}
.tour-skip:hover { color: var(--text); }
.tour-close {
  position: absolute; top: 12px; right: 12px; background: none; border: none; color: var(--muted);
  cursor: pointer; padding: 5px; border-radius: 6px; display: flex;
}
.tour-close:hover { background: var(--panel2); color: var(--text); }
.tour-actions .btn[disabled] { opacity: .6; cursor: default; }

/* ==========================================================================
   Áudio -- painel de edições finais (velocidade/volume/fade/normalização)
   ========================================================================== */
.audio-settings-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px;
}
.audio-settings-card h4 { margin: 0 0 4px; font-size: 13.5px; }
.audio-settings-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 10px;
}
.audio-settings-grid input[type="range"] { width: 100%; }
#asSpeedVal { text-transform: none; font-weight: 400; color: var(--text-dim); letter-spacing: 0; }
.audio-file-row-name { display: flex; align-items: center; gap: 8px; }

/* topo do projeto (nome editavel + menu) */
.audio-project-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.audio-project-title-wrap { flex: 1; min-width: 0; }
.audio-project-title {
  font-size: 22px; font-weight: 700; cursor: text; display: inline-block; padding: 2px 6px; margin: -2px 0 -2px -6px;
  border-radius: var(--radius-sm); border: 1px solid transparent; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.audio-project-title:hover { border-color: var(--border); background: var(--panel2); }
.audio-project-title-input {
  font-size: 22px; font-weight: 700; background: var(--panel2); border: 1px solid var(--accent); border-radius: var(--radius-sm);
  padding: 2px 6px; color: var(--text); font-family: inherit; max-width: 100%;
}
.audio-project-sub { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.audio-project-menu-wrap { position: relative; flex-shrink: 0; }

/* menu "..." generico -- reaproveitado no topo do projeto e em cada linha */
.menu-dropdown {
  /* position:fixed (nao absolute) de proposito -- top/left sao calculados
     em JS (wireDropdownMenu) a partir do botao que abriu, na hora de abrir.
     Isso escapa do clipping de qualquer ancestral com overflow (ex:
     .table-wrap, que tem overflow-x:auto -- e por especificacao do CSS,
     isso forca overflow-y a virar "auto" tambem, cortando um dropdown
     absolute que passasse do fundo da tabela). Fixed nao sofre esse corte. */
  position: fixed; min-width: 190px; background: var(--panel);
  border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 45;
  padding: 6px; display: flex; flex-direction: column; gap: 1px; max-height: 70vh; overflow-y: auto;
}
.menu-dropdown.hidden { display: none; }
.menu-dropdown button {
  background: none; border: none; text-align: left; padding: 8px 10px; border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-dim); cursor: pointer; display: flex; align-items: center; gap: 8px; width: 100%;
}
.menu-dropdown button:hover:not(:disabled) { background: var(--panel2); color: var(--text); }
.menu-dropdown button:disabled { opacity: .4; cursor: not-allowed; }
.menu-dropdown button.danger { color: var(--danger); }
.menu-dropdown hr { border: none; border-top: 1px solid var(--border); margin: 4px 2px; }

/* ==========================================================================
   Arquitetura de scroll do workspace de audio -- #app.app-fill trava a
   altura no viewport (so nesta pagina; toda outra pagina continua com o
   scroll normal do .main-col, controlado pelo toggle em renderMain()) e
   delega o scroll pra dentro: playlist rola por conta propria, painel
   lateral rola por conta propria, a PAGINA em si nunca precisa rolar so
   porque a lista tem 60 itens.
   ========================================================================== */
#app.app-fill {
  display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden;
  padding-bottom: 20px;
}
#app.app-fill > .workspace-back { flex-shrink: 0; }
.audio-workspace-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.audio-project-head { flex-shrink: 0; }
.audio-workspace-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 20px;
  flex: 1; min-height: 0;
}
@media (max-width: 900px) {
  /* telas estreitas: volta a ser 2 secoes empilhadas com o scroll normal da
     pagina -- independent-scroll so faz sentido com colunas lado a lado */
  #app.app-fill { display: block; height: auto; min-height: 100%; overflow: visible; }
  .audio-workspace-body { display: block; }
  .audio-workspace-grid { display: block; }
}

/* mobile: na pagina de feed, o painel de gerar (config + botao "Configurar e
   gerar") sobe PRA CIMA da lista de clipes. Antes o usuario tinha que rolar
   dezenas de clipes so pra achar o botao la no fim (e ainda coberto pela
   barra do Safari). So no feed -- a pagina de audio segue na ordem normal.
   #id + depois do bloco de 900px pra vencer o `display:block` acima. */
@media (max-width: 760px) {
  #feedWorkspaceBody .audio-workspace-grid { display: flex; flex-direction: column; }
  #feedWorkspaceBody .audio-side-panel { order: -1; }
}

.audio-playlist-col { min-height: 0; display: flex; flex-direction: column; }
.audio-playlist-toolbar { flex-shrink: 0; }
.playlist-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 900px) { .playlist-scroll { overflow: visible; } }

.audio-side-panel {
  min-height: 0; display: flex; flex-direction: column;
  background: var(--panel2); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
@media (min-width: 901px) { .audio-side-panel { height: 100%; overflow: hidden; } }
.audio-side-scroll {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 0;
}
/* dentro do painel lateral o espaco ja vem do gap -- zera as margens
   proprias dessas classes (compartilhadas com a pipeline de video) pra nao
   somar espaco duplicado */
.audio-side-scroll .overall-bar { margin: 0; }
.audio-side-scroll .output-box { margin: 0; }
@media (max-width: 900px) { .audio-side-scroll { overflow: visible; } }

/* scrollbar discreta, consistente com o tema escuro */
.playlist-scroll, .audio-side-scroll {
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.playlist-scroll::-webkit-scrollbar, .audio-side-scroll::-webkit-scrollbar { width: 8px; }
.playlist-scroll::-webkit-scrollbar-thumb, .audio-side-scroll::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 4px;
}
.playlist-scroll::-webkit-scrollbar-track, .audio-side-scroll::-webkit-scrollbar-track { background: transparent; }

/* busca */
.playlist-search { display: flex; align-items: center; gap: 8px; background: var(--panel2); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; margin-bottom: 12px; }
.playlist-search input { flex: 1; background: none; border: none; color: var(--text); font-size: 13px; }
.playlist-search input:focus { outline: none; }
.playlist-search .icon { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; }

/* linhas da playlist (arrastavel) */
.playlist-rows { display: flex; flex-direction: column; gap: 6px; padding-bottom: 4px; }
.playlist-row {
  display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px; transition: border-color .12s ease, background .12s ease, opacity .12s ease;
}
.playlist-row:hover { border-color: var(--border-strong); }
.playlist-row.dragging { opacity: .35; }
.playlist-row.drag-over { border-color: var(--accent); background: var(--accent-dim); }
.playlist-row-handle { cursor: grab; color: var(--faint); flex-shrink: 0; display: flex; }
.playlist-row-handle:active { cursor: grabbing; }
.playlist-row-index { width: 20px; flex-shrink: 0; text-align: center; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.playlist-row-play { flex-shrink: 0; }
.playlist-row-names { flex: 1; min-width: 0; }
.playlist-row-display, .playlist-row-display-input {
  font-size: 13.5px; font-weight: 600; color: var(--text); border-radius: 4px; padding: 1px 4px; margin: -1px -4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%;
}
.playlist-row-display { cursor: text; }
.playlist-row-display:hover { background: var(--panel2); }
.playlist-row-display-input { background: var(--panel2); border: 1px solid var(--accent); font-family: inherit; }
.playlist-row-original { font-size: 11px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.playlist-row-duration { flex-shrink: 0; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; width: 40px; text-align: right; }
.playlist-row-menu-wrap { position: relative; flex-shrink: 0; }

/* player de sequencia (previa instantanea da montagem) */
.seq-player { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 16px; flex-shrink: 0; }
.seq-player-controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 8px; }
.seq-player-playbtn {
  width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.seq-player-playbtn .icon { width: 16px; height: 16px; }
.seq-player-skipbtn { background: none; border: none; color: var(--text-dim); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 10px; }
.seq-player-skipbtn .icon { width: 16px; height: 16px; }
.seq-player-progress-row { display: flex; align-items: center; gap: 8px; }
.seq-player-time { font-size: 11px; color: var(--muted); width: 36px; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.seq-player-time:last-child { text-align: right; }
.seq-player-seek { flex: 1; height: 4px; border-radius: 2px; appearance: none; background: var(--border-strong); cursor: pointer; }
.seq-player-seek::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); cursor: pointer; }
.seq-player-seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: none; cursor: pointer; }
.seq-player-current { margin-top: 6px; text-align: center; }
.seq-player-current-name { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seq-player-current-sub { font-size: 10.5px; color: var(--muted); margin-top: 1px; }

/* autosave */
.autosave-status { font-size: 11px; color: var(--muted); white-space: nowrap; }
.autosave-status.saved { color: var(--ok); }
.autosave-status.error { color: var(--danger); }

/* exportacao: qualidade em radio-rows compactas */
.quality-options { display: flex; flex-direction: column; gap: 4px; }
.quality-option { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.quality-option:hover { border-color: var(--border-strong); }
.quality-option.selected { border-color: var(--accent); background: var(--accent-dim); }
.quality-option input { width: auto; flex-shrink: 0; }
.quality-option-label { font-size: 12.5px; color: var(--text); font-weight: 600; }
.quality-option-sub { font-size: 10.5px; color: var(--muted); }

/* CTA final -- rodape FIXO do painel lateral (nao rola junto com o
   conteudo acima; sempre visivel, nunca exige rolar 60 audios pra achar) */
.cta-summary {
  flex-shrink: 0; background: var(--panel2); border-top: 1px solid var(--border); padding: 14px 16px;
  box-shadow: 0 -6px 12px -8px oklch(0% 0 0 / .3);
}
.cta-summary-title { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 700; margin-bottom: 6px; }
.cta-summary-line { font-size: 13px; color: var(--text-dim); }
.cta-warning { display: flex; align-items: flex-start; gap: 8px; color: var(--warn); font-size: 12.5px; margin-top: 8px; }
.as-field { display: flex; flex-direction: column; gap: 6px; }
.as-test-btn {
  align-self: flex-start; display: flex; align-items: center; gap: 4px; background: none; border: none;
  color: var(--accent); font-size: 11px; cursor: pointer; padding: 2px 0; margin-top: -2px;
}
.as-test-btn:hover { text-decoration: underline; }
.as-test-btn .icon { width: 11px; height: 11px; }
.as-checkbox-field { justify-content: flex-end; }
.as-checkbox-label { display: flex !important; align-items: center; gap: 8px; text-transform: none; font-weight: 500; font-size: 13px; color: var(--text-dim); cursor: pointer; }
.as-checkbox-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }

/* ==========================================================================
   Barra de áudio global (footer, estilo player) -- unica instancia pra
   pagina inteira, toca tanto arquivos de origem (pre-ouvir) quanto o audio
   final gerado. Fica fixa no rodape, acima da sidebar, abaixo dos modais.
   ========================================================================== */
.audio-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  background: var(--panel); border-top: 1px solid var(--border-strong);
  padding: 10px 20px; box-shadow: 0 -8px 24px oklch(0% 0 0 / .25);
}
.audio-bar.hidden { display: none; }
.audio-bar-playbtn {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: none;
  background: var(--accent); color: white; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform .12s ease;
}
.audio-bar-playbtn:hover { transform: scale(1.05); }
.audio-bar-playbtn .icon { width: 18px; height: 18px; }
.audio-bar-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.audio-bar-title { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audio-bar-progress-row { display: flex; align-items: center; gap: 10px; }
.audio-bar-time { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0; width: 34px; }
.audio-bar-time:last-child { text-align: right; }
.audio-bar-seek {
  flex: 1; height: 4px; border-radius: 2px; appearance: none; background: var(--border-strong); cursor: pointer;
}
.audio-bar-seek::-webkit-slider-thumb {
  appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); cursor: pointer;
  box-shadow: 0 0 0 3px oklch(68% 0.15 262 / .18);
}
.audio-bar-seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: none; cursor: pointer; }
.audio-bar-speed {
  flex-shrink: 0; background: var(--panel2); border: 1px solid var(--border); color: var(--text-dim);
  border-radius: var(--radius-sm); padding: 5px 8px; font-size: 11.5px; cursor: pointer;
}
.audio-bar-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
body.has-audio-bar #app { padding-bottom: 90px; }
@media (max-width: 720px) {
  .audio-bar {
    padding: 8px 12px; gap: 10px;
    /* nao colar na barra de gestos do iPhone */
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
  .audio-bar-speed { display: none; }
  .audio-bar-title { font-size: 11.5px; }
  body.has-audio-bar #app { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
}