:root {
  --primary: #7c3aed;
  --primary-dark: #5b21b6;
  --primary-light: #f3ecfe;
  --ink: #1e1533;
  --muted: #6b6280;
  --bg: #f8f6fc;
  --card: #ffffff;
  --border: #ece4f9;
  --radius: 18px;
  --shadow: 0 12px 32px rgba(91, 33, 182, 0.08);
  --shadow-lg: 0 20px 60px rgba(91, 33, 182, 0.14);
  --error-bg: #fdecec;
  --error-text: #a3222d;
  --warning-bg: #fff6e0;
  --warning-text: #8a5a00;
  --success-bg: #e9f9ef;
  --success-text: #17703a;

  /* Paleta "Painel" (Admin + Revenda) - roxo/lilas um pouco mais vibrante
     que o --primary do site publico/conversor (mesma familia de cor, so
     um tom diferente de proposito: o Admin/Revenda e uso interno/parceiro,
     pode ter uma identidade propria mais "SaaS dashboard" sem precisar
     bater PIXEL A PIXEL com o site do cliente final - mas agora dentro da
     mesma identidade roxo/lilas em degrade de toda a marca). */
  --panel-bg: #f8f6fc;
  --panel-ink: #1e1533;
  --panel-muted: #6b6280;
  --panel-border: #ece4f9;
  --panel-card-radius: 16px;
  --panel-shadow: 0 1px 2px rgba(30, 21, 51, 0.04), 0 8px 24px rgba(30, 21, 51, 0.06);
  --accent: #a855f7;
  --accent-dark: #9333ea;
  --accent-light: #f5e8ff;
  --sidebar-bg-top: #1a1030;
  --sidebar-bg-bottom: #2d1650;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

/* ---------------------------------------------------------------------- */
/* Topbar                                                                  */
/* ---------------------------------------------------------------------- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  background: #1e1533;
  color: #fff;
}

.topbar-left { display: flex; align-items: center; gap: 18px; }

.brand { display: flex; align-items: center; gap: 10px; }
.brand:hover .brand-name { text-decoration: underline; }
.brand-mark {
  font-weight: 800;
  font-size: 13px;
  background: var(--primary);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-name { font-weight: 700; font-size: 15px; }
.brand-tag { color: #a898c4; font-size: 13px; margin-left: 8px; padding-left: 10px; border-left: 1px solid #4a3d63; }

.session-info { display: flex; gap: 10px; align-items: center; font-size: 13.5px; flex-wrap: wrap; justify-content: flex-end; }
.status-pill {
  display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1); padding: 6px 13px; border-radius: 999px;
  font-size: 12.5px; color: #e2e8f0;
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex: 0 0 auto; }

/* Botao "Minha conta" (so no app Desktop) - atalho moderno e compacto para
   o Painel do cliente, com avatar em degrade roxo/lilas da marca e um
   contorno sutil que "acende" no hover. Ver base.html. */
.account-btn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  padding: 4px 11px 4px 4px; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.16);
  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.account-btn:hover {
  background: linear-gradient(180deg, rgba(192,132,252,0.28), rgba(124,58,237,0.20));
  border-color: rgba(192,132,252,0.55);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.40);
}
.account-btn:active { transform: translateY(0); }
.account-btn-avatar {
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #c084fc 0%, #a855f7 45%, #7c3aed 100%);
  color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .01em;
  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.55), inset 0 0 0 1px rgba(255,255,255,0.18);
}
.account-btn-avatar svg { display: block; opacity: .95; }
.account-btn-label { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: .005em; }
.account-btn-chevron { display: flex; align-items: center; color: rgba(255,255,255,0.55); transition: transform .18s ease, color .18s ease; }
.account-btn:hover .account-btn-chevron { color: #fff; transform: translateX(2px); }
.status-dot.warn { background: #f59e0b; }

/* Pill-botao do "Teste gratis" na topbar, para visitantes que ainda nao
   se cadastraram (ver base.html) - vira um convite clicavel em vez de so
   texto informativo, levando direto para /teste-gratis. */
.trial-cta-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #a855f7, #5b21b6);
  color: #fff; text-decoration: none; font-weight: 700; font-size: 13px;
  padding: 7px 16px 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 8px 20px rgba(124, 58, 237,0.35);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.trial-cta-pill:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(124, 58, 237,0.48); filter: brightness(1.06); }
.trial-cta-pill:active { transform: translateY(0); }
.trial-cta-pill .pulse-ring {
  width: 7px; height: 7px; border-radius: 50%; background: #fff; position: relative; flex: 0 0 auto;
}
.trial-cta-pill .pulse-ring::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.65); animation: ssv-pulse-ring 1.8s ease-out infinite;
}
.trial-cta-pill .arrow { font-size: 13px; opacity: .85; transition: transform .15s ease; }
.trial-cta-pill:hover .arrow { transform: translateX(3px); }
@keyframes ssv-pulse-ring {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .trial-cta-pill .pulse-ring::after { animation: none; }
}

/* Botao "Voltar ao Início" (ou similar, ex: "Painel da Revenda") - mesmo
   estilo em pilula com gradiente do trial-cta-pill acima, usado em toda
   parte onde antes era so um link de texto sublinhado (topbar escura E
   dentro dos cards claros de login/cadastro tipo split-wrap). */
.btn-home-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, #a855f7, #5b21b6);
  color: #fff; text-decoration: none; font-weight: 700; font-size: 12.5px;
  padding: 7px 15px 7px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 6px 16px rgba(124, 58, 237,0.3); white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-home-pill:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(124, 58, 237,0.42); filter: brightness(1.06); }
.btn-home-pill:active { transform: translateY(0); }
.btn-home-pill .arrow { transition: transform .15s ease; }
.btn-home-pill:hover .arrow { transform: translateX(-3px); }
/* Dentro dos cards claros (split-wrap/form-side), afasta um pouco do
   titulo abaixo - nos lugares escuros (topbar) essa margem nao atrapalha. */
.form-side .btn-home-pill, .card-narrow > .btn-home-pill { margin-bottom: 18px; }

.link-muted { color: #d4c9ea; text-decoration: underline; }
.inline-form { display: inline; margin: 0; }
.link-button {
  background: none; border: none; padding: 0; margin: 0;
  color: #d4c9ea; text-decoration: underline; font-size: inherit;
  font-family: inherit; cursor: pointer;
}

/* ---------------------------------------------------------------------- */
/* Layout / cards                                                          */
/* ---------------------------------------------------------------------- */
.container { max-width: 960px; margin: 0 auto; padding: 40px 24px 64px 24px; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
  margin-bottom: 24px;
}
.card-narrow { max-width: 460px; margin: 48px auto; text-align: left; }

h1 { margin-top: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 1.05rem; margin: 0 0 4px 0; font-weight: 800; }
.card .desc { color: var(--muted); font-size: 13.5px; margin: 0 0 20px 0; }

.muted { color: var(--muted); }
.small { font-size: 0.85rem; }

.step { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); }
.step:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.hidden { display: none; }

/* ---------------------------------------------------------------------- */
/* Stepper (topo da tela do conversor)                                     */
/* ---------------------------------------------------------------------- */
.stepper { display: flex; align-items: center; gap: 0; margin-bottom: 28px; }
.stepper .step-item { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.stepper .step-item.active { color: var(--primary); }
.stepper .step-item .num {
  width: 26px; height: 26px; border-radius: 50%; background: var(--border); color: var(--muted);
  display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; flex: 0 0 auto;
}
.stepper .step-item.active .num { background: var(--primary); color: #fff; }
.stepper .step-item.done .num { background: #16a34a; color: #fff; }
.stepper .step-line { flex: 1; height: 2px; background: var(--border); margin: 0 14px; }

/* ---------------------------------------------------------------------- */
/* Mode switch (Individual / Em lote)                                      */
/* ---------------------------------------------------------------------- */
.mode-switch { display: flex; gap: 6px; background: #efe7f9; border-radius: 12px; padding: 5px; margin-bottom: 24px; width: fit-content; }
.mode-btn {
  padding: 9px 18px; border-radius: 9px; font-size: 13.5px; font-weight: 700; color: var(--muted);
  cursor: pointer; border: none; background: transparent; font-family: inherit;
}
.mode-btn.active { background: #fff; color: var(--primary); box-shadow: 0 4px 12px rgba(91, 33, 182,0.12); }

/* ---------------------------------------------------------------------- */
/* Dropzone / upload                                                       */
/* ---------------------------------------------------------------------- */
.dropzone {
  border: 2px dashed #d9c9f0;
  border-radius: 16px;
  padding: 38px 20px;
  text-align: center;
  cursor: pointer;
  color: var(--muted);
  background: #faf8ff;
  transition: all .15s ease;
}
.dropzone.dragover { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
.dropzone .dz-icon {
  width: 48px; height: 48px; margin: 0 auto 12px auto; border-radius: 12px; background: var(--primary-light);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.dropzone strong { color: var(--ink); }
.dropzone .hint { font-size: 12.5px; margin-top: 6px; }

.file-list { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.file-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 12px; background: #faf9fd; }
.file-row.error { border-color: #f4b8b8; background: #fff6f6; }
.file-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 14px; flex: 0 0 auto; }
.file-row.error .file-icon { background: #fde3e3; color: #c0392b; }
.file-info { flex: 1; min-width: 0; }
.file-name { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.file-row.error .file-meta { color: #c0392b; }
.file-remove { width: 26px; height: 26px; border-radius: 8px; border: none; background: transparent; color: var(--muted); font-size: 15px; cursor: pointer; flex: 0 0 auto; }
.file-remove:hover { background: #f2ecf9; }

/* Reordenar arquivos (Juntar PDF / Imagens->PDF): arrastar ou setas ▲▼. */
.file-reorder-hint { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.file-row[draggable="true"] { cursor: grab; }
.file-row.dragging { opacity: .5; }
.file-row.drop-target { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
.file-drag { color: var(--muted); font-size: 16px; flex: 0 0 auto; cursor: grab; user-select: none; line-height: 1; }
.file-order {
  flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--primary);
  color: #fff; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}
.file-move { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.file-move button {
  width: 26px; height: 18px; border: 1px solid var(--border); background: #fff; color: var(--ink); border-radius: 6px;
  font-size: 9px; line-height: 1; cursor: pointer; padding: 0;
}
.file-move button:disabled { opacity: .35; cursor: default; }
.file-move button:not(:disabled):hover { background: var(--primary-light); border-color: var(--primary); }

.summary-strip { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding: 16px 18px; background: var(--primary-light); border-radius: 12px; flex-wrap: wrap; gap: 12px; }
.summary-strip .txt { font-size: 13.5px; color: var(--primary-dark); font-weight: 700; }
.summary-strip .sub { font-size: 12px; color: #6b21a8; font-weight: 500; margin-top: 2px; }

/* ---------------------------------------------------------------------- */
/* Rotation grid                                                           */
/* ---------------------------------------------------------------------- */
.rotation-grid { display: flex; gap: 14px; flex-wrap: wrap; }
.rotation-option { border: 2px solid var(--border); border-radius: 12px; padding: 8px; cursor: pointer; width: 160px; text-align: center; }
.rotation-option img { width: 100%; height: 110px; object-fit: contain; background: #faf9fc; }
.rotation-option.selected { border-color: var(--primary); background: var(--primary-light); box-shadow: 0 0 0 2px rgba(124, 58, 237,0.2); }
.rotation-label { font-size: 0.8rem; color: var(--muted); margin-top: 4px; }

/* ---------------------------------------------------------------------- */
/* Grade de ferramentas (hub /app - estilo iLovePDF)                       */
/* ---------------------------------------------------------------------- */
.tools-hub h1 { margin-bottom: 4px; }
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}
.tool-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 22px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tool-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: #d9c9f0; }
.tool-card h3 { margin: 0 0 6px 0; font-size: 15.5px; font-weight: 800; }
.tool-card p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.tool-card-icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; margin-bottom: 14px;
  background: var(--primary-light);
}
.tool-icon-merge::before { content: "🔗"; }
.tool-icon-split::before { content: "✂️"; }
.tool-icon-compress::before { content: "🗜️"; }
.tool-icon-rotate::before { content: "🔄"; }
.tool-icon-organize::before { content: "📑"; }
.tool-icon-protect::before { content: "🔒"; }
.tool-icon-unlock::before { content: "🔓"; }
.tool-icon-watermark::before { content: "💧"; }
.tool-icon-pagenum::before { content: "#️⃣"; }
.tool-icon-pdf2jpg::before { content: "🖼️"; }
.tool-icon-jpg2pdf::before { content: "📄"; }

/* Cabecalho simples da tela de cada ferramenta (/f/<slug>), com o botao de
   voltar para a grade de ferramentas. */
.tool-page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.tool-page-head .tool-card-icon { margin-bottom: 0; width: 40px; height: 40px; font-size: 18px; flex: 0 0 auto; }
.tool-page-head h1 { margin: 0; font-size: 1.3rem; }
.btn-back-tools {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 700;
  margin-bottom: 14px;
}
.btn-back-tools:hover { color: var(--primary); }

/* ---------------------------------------------------------------------- */
/* Forms                                                                   */
/* ---------------------------------------------------------------------- */
.options-form, form { display: flex; flex-direction: column; gap: 16px; }
.card form.options-form, .card-narrow form { max-width: 100%; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-row { display: flex; gap: 16px; }
.field-row .field { flex: 1; }
label { font-size: 0.85rem; font-weight: 700; color: #3d3550; }
label .req { color: var(--primary); font-weight: 400; }
label .opt { color: var(--muted); font-weight: 400; font-size: 12px; }
input, select {
  padding: 12px 13px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 0.95rem;
  font-family: inherit;
  background: #faf9fd;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-light); background: #fff; }

/* ---------------------------------------------------------------------- */
/* Buttons                                                                  */
/* ---------------------------------------------------------------------- */
.btn {
  display: inline-block;
  border: none;
  padding: 13px 24px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  font-family: inherit;
}
.btn-primary { background: linear-gradient(135deg, #7c3aed, #5b21b6); color: #fff; box-shadow: 0 10px 24px rgba(124, 58, 237,0.28); }
.btn-primary:hover { filter: brightness(1.05); }
.btn-secondary { background: #fff; color: var(--primary); border: 1.5px solid var(--primary); }
.btn-ghost { background: rgba(255,255,255,0.08); color: #fff; border: 1.5px solid rgba(255,255,255,0.35); }
.btn-small { padding: 6px 14px; font-size: 0.82rem; border-radius: 8px; }
.btn-block { width: 100%; }

/* ---------------------------------------------------------------------- */
/* Flash messages                                                          */
/* ---------------------------------------------------------------------- */
.flash { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 0.9rem; }
.flash-error { background: var(--error-bg); color: var(--error-text); }
/* Fase 04: destaque de campo com erro (ex: formato de e-mail invalido) -
   reaproveita as MESMAS cores de erro ja usadas acima, sem introduzir
   uma paleta nova. */
.field input.field-error { border-color: var(--error-text); }
.field-error-msg { color: var(--error-text); font-size: 13px; margin-top: 6px; }
.flash-warning { background: var(--warning-bg); color: var(--warning-text); }
.flash-success { background: var(--success-bg); color: var(--success-text); }

/* ---------------------------------------------------------------------- */
/* Resultado da conversao                                                   */
/* ---------------------------------------------------------------------- */
.result-grid { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; }
.final-preview { max-width: 320px; max-height: 480px; border: 1px solid var(--border); background: #faf9fc; border-radius: 10px; }

.result-card-flex { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.result-icon { width: 52px; height: 52px; border-radius: 14px; background: #e9f9ef; color: #16a34a; display: flex; align-items: center; justify-content: center; font-size: 22px; flex: 0 0 auto; }
.result-info { flex: 1; min-width: 200px; }
.result-info h4 { margin: 0 0 6px 0; font-size: 15px; }
.result-info .dims { color: var(--muted); font-size: 13.5px; }
.result-item-list { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.result-item-list .ok { color: #16a34a; }
.result-item-list .bad { color: #c0392b; }

/* ---------------------------------------------------------------------- */
/* Tela de cadastro inicial (split-hero)                                   */
/* ---------------------------------------------------------------------- */
.split-wrap { display: grid; grid-template-columns: 1fr 1.15fr; min-height: calc(100vh - 0px); }
@media (max-width: 860px) { .split-wrap { grid-template-columns: 1fr; } .split-panel { display: none; } }

.split-panel {
  background: linear-gradient(160deg, #5b21b6 0%, #7c3aed 55%, #c084fc 100%);
  color: #fff; padding: 56px 48px; display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.split-panel::after {
  content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.14), transparent 60%);
  right: -160px; bottom: -160px;
  /* Decoracao pura (bolha de luz de fundo) - SEM isto, por ser absolutamente
     posicionada sem z-index, ela pinta por cima de irmaos nao-posicionados
     (mesmo estando "atras" visualmente por causa da transparencia) e rouba
     cliques de qualquer link/botao que caia embaixo dela. Ver o mesmo bug,
     ja CONFIRMADO ao vivo, em .hero-site::after logo abaixo. */
  pointer-events: none;
}
.split-panel .panel-hero { position: relative; z-index: 1; }
.split-panel .panel-hero h1 { font-size: 30px; line-height: 1.25; margin: 0 0 16px 0; font-weight: 800; color: #fff; }
.split-panel .panel-hero p { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.85); max-width: 420px; margin: 0; }
.split-panel .benefits { list-style: none; margin: 32px 0 0 0; padding: 0; display: flex; flex-direction: column; gap: 15px; position: relative; z-index: 1; }
.split-panel .benefits li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: rgba(255,255,255,0.92); }
.split-panel .check { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.split-panel .panel-footer { font-size: 12px; color: rgba(255,255,255,0.6); position: relative; z-index: 1; }

.form-side { display: flex; align-items: center; justify-content: center; padding: 48px 32px; }
.form-side .card-narrow { margin: 0; }

/* ---------------------------------------------------------------------- */
/* Tela "Ativar" (minimalista)                                             */
/* ---------------------------------------------------------------------- */
.center-wrap { display: flex; align-items: center; justify-content: center; padding: 40px 24px 60px 24px; }
.ativar-card { max-width: 440px; width: 100%; text-align: center; box-shadow: var(--shadow-lg); border-radius: 22px; }
.icon-circle {
  width: 56px; height: 56px; border-radius: 50%; background: var(--primary-light); color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: 24px; margin: 0 auto 18px auto;
}
.ativar-card input#license_key { text-align: center; font-family: 'Courier New', monospace; letter-spacing: .02em; }
.divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--muted); font-size: 12.5px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ---------------------------------------------------------------------- */
/* Tela "Comprar" (planos)                                                 */
/* ---------------------------------------------------------------------- */
.plans-hero { text-align: center; padding: 8px 12px 20px 12px; }
.plans-hero .eyebrow { color: var(--primary); font-weight: 700; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }
.plans-hero h1 { font-size: 30px; margin: 0 0 12px 0; }
.plans-hero p { color: var(--muted); font-size: 15px; max-width: 480px; margin: 0 auto; line-height: 1.6; }

.plans-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 8px; }
@media (max-width: 780px) { .plans-grid { grid-template-columns: 1fr 1fr; } }

.plan-card {
  background: var(--card); border: 2px solid var(--border); border-radius: 16px; padding: 22px 16px;
  text-align: center; cursor: pointer; transition: border-color .15s, transform .15s; position: relative;
}
.plan-card:hover { transform: translateY(-2px); }
.plan-card.selected { border-color: var(--primary); box-shadow: 0 12px 28px rgba(124, 58, 237,0.16); }
.plan-badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg,#7c3aed,#5b21b6);
  color: #fff; font-size: 10.5px; font-weight: 800; padding: 4px 12px; border-radius: 999px; white-space: nowrap;
}
.plan-duration { font-size: 13.5px; font-weight: 700; color: var(--muted); margin-top: 6px; }
.plan-price { font-size: 24px; font-weight: 800; margin: 8px 0 2px 0; letter-spacing: -0.02em; }
.plan-permonth { font-size: 12px; color: var(--muted); }
.plan-quota {
  font-size: 11.5px; font-weight: 700; color: var(--primary); background: rgba(124, 58, 237,0.08);
  border-radius: 999px; padding: 4px 10px; margin-top: 10px; display: inline-block;
}

.qty-card {
  background: var(--card); border: 1.5px solid var(--border); border-radius: 16px; padding: 20px 24px; margin-top: 18px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
}
.qty-label { font-size: 14.5px; font-weight: 700; }
.qty-sub { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.qty-control { display: flex; align-items: center; gap: 14px; }
.qty-btn { width: 36px; height: 36px; border-radius: 10px; border: 1.5px solid var(--border); background: #fff; font-size: 18px; font-weight: 700; cursor: pointer; color: var(--primary); font-family: inherit; }
.qty-value { font-size: 18px; font-weight: 800; min-width: 24px; text-align: center; }

.summary-card {
  background: linear-gradient(160deg,#ffffff,#faf6ff); border: 1.5px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 28px 30px; margin-top: 18px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px;
}
.summary-left .row { display: flex; justify-content: space-between; gap: 40px; font-size: 13.5px; color: var(--muted); margin-bottom: 6px; }
.summary-left .row strong { color: var(--ink); }
.summary-total { font-size: 13px; color: var(--muted); text-align: right; }
.summary-total .value { font-size: 28px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }

.footer-note { text-align: center; padding: 20px 24px 8px 24px; color: var(--muted); font-size: 13.5px; }
.footer-note a { color: var(--primary); text-decoration: none; font-weight: 600; }

.footer {
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  padding: 30px 0;
}
.footer a { color: var(--primary); text-decoration: none; font-weight: 600; }
.footer a:hover { text-decoration: underline; }
/* Fase 04.1: links institucionais + identificacao empresarial - reaproveita
   as mesmas variaveis de cor (--muted, --primary) ja usadas acima, nenhuma
   cor nova. */
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 14px 0 10px; }
.footer-legal { color: var(--muted); font-size: 12.5px; line-height: 1.6; }

/* ---------------------------------------------------------------------- */
/* Site (pagina inicial / marketing) - so aparece na versao Web           */
/* ---------------------------------------------------------------------- */
.site-nav {
  display: flex; justify-content: space-between; align-items: center; padding: 18px 40px;
}
.site-nav .nav-links { display: flex; align-items: center; gap: 28px; }
.site-nav .nav-links a.nav-link { color: rgba(255,255,255,0.75); text-decoration: none; font-size: 13.5px; font-weight: 600; }
.site-nav .nav-links a.nav-link:hover { color: #fff; }
.site-nav .btn { padding: 10px 18px; font-size: 13.5px; }

.hero-site {
  background: linear-gradient(160deg, #1e1533 0%, #5b21b6 60%, #7c3aed 130%);
  color: #fff; padding-bottom: 70px; position: relative; overflow: hidden;
}
.hero-site::after {
  content: ""; position: absolute; width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.10), transparent 60%);
  right: -180px; top: -220px;
  /* CAUSA REAL do "os links do menu nao funcionam": esta bolha decorativa
     e absolutamente posicionada sem z-index, entao o navegador pinta ela
     POR CIMA do .site-nav (que nao e posicionado) na ordem de empilhamento
     - mesmo sendo semi-transparente e parecendo estar "atras" dos links
     visualmente. Resultado: o clique era capturado por esta bolha (que nao
     faz nada) em vez de chegar no <a> do menu, bem na regiao onde ficam
     "Planos"/"Ja tenho uma chave"/"Testar gratis" (o botao "Como funciona",
     mais a esquerda, ficava fora do raio da bolha - por isso so ele
     parecia funcionar). pointer-events:none faz cliques atravessarem esta
     decoracao direto para o que estiver embaixo, sem mudar nada visualmente. */
  pointer-events: none;
}
.hero-site-inner { max-width: 780px; margin: 0 auto; text-align: center; padding: 56px 24px 0 24px; position: relative; z-index: 1; }
.hero-site .eyebrow { color: #ddc4fb; font-weight: 700; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px; }
.hero-site h1 { font-size: 44px; line-height: 1.18; font-weight: 800; margin: 0 0 18px 0; letter-spacing: -0.02em; color: #fff; }
.hero-site p { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.85); max-width: 560px; margin: 0 auto 32px auto; }
.hero-site .hero-ctas { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.hero-site .hero-ctas .btn-primary { background: #fff; color: var(--primary-dark); box-shadow: 0 14px 34px rgba(0,0,0,0.22); }
.hero-site .hero-ctas .btn-primary:hover { filter: none; background: #f8f6fc; }
.hero-site .hero-ctas .btn-ghost { background: rgba(255,255,255,0.08); color: #fff; border: 1.5px solid rgba(255,255,255,0.35); }
.hero-site .hero-note { font-size: 12.5px; color: rgba(255,255,255,0.6); }

.hero-preview {
  max-width: 900px; margin: 44px auto 0 auto; padding: 0 24px; position: relative; z-index: 1;
}
.hero-preview-card {
  background: #fff; border-radius: 20px; box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  padding: 22px 26px; text-align: left; color: var(--ink);
}
.hero-preview-card .hp-row { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.hero-preview-card .hp-dot { width: 9px; height: 9px; border-radius: 50%; background: #e2554a; }
.hero-preview-card .hp-dot:nth-child(2) { background: #eab308; }
.hero-preview-card .hp-dot:nth-child(3) { background: #22c55e; }
.hero-preview-card .hp-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.hero-preview-card .hp-step { background: var(--bg); border-radius: 12px; padding: 16px; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.hero-preview-card .hp-step .hp-icon { font-size: 20px; margin-bottom: 8px; }

.site-section { max-width: 1040px; margin: 0 auto; padding: 80px 24px; }
.site-section.tight { padding-top: 50px; }
.section-head { text-align: center; max-width: 620px; margin: 0 auto 44px auto; }
.section-head .eyebrow { color: var(--primary); font-weight: 700; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }
.section-head h2 { font-size: 30px; font-weight: 800; margin: 0 0 12px 0; letter-spacing: -0.02em; }
.section-head p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0; }

.how-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 780px) { .how-steps { grid-template-columns: 1fr; } }
.how-step { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 26px 22px; text-align: left; box-shadow: var(--shadow); }
.how-step .how-num {
  width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg,#7c3aed,#5b21b6); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; margin-bottom: 14px;
}
.how-step h3 { font-size: 15.5px; margin: 0 0 6px 0; }
.how-step p { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin: 0; }

.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 780px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 24px; display: flex; gap: 16px; align-items: flex-start; }
.feature-card .f-icon {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; background: var(--primary-light); color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.feature-card h3 { font-size: 14.5px; margin: 0 0 6px 0; }
.feature-card p { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin: 0; }

.site-plans-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 780px) { .site-plans-grid { grid-template-columns: 1fr 1fr; } }
.site-plans-grid .plan-card { cursor: default; }
.site-plans-grid .plan-card:hover { transform: none; }
.site-plans-grid .plan-card a.btn { display: block; margin-top: 16px; }

.cta-banner {
  background: linear-gradient(135deg,#7c3aed,#5b21b6); border-radius: var(--radius); color: #fff;
  text-align: center; padding: 52px 32px; max-width: 1040px; margin: 0 auto 80px auto;
}
.cta-banner h2 { font-size: 26px; margin: 0 0 12px 0; color: #fff; }
.cta-banner p { color: rgba(255,255,255,0.85); font-size: 14.5px; margin: 0 0 26px 0; }
.cta-banner .btn-primary { background: #fff; color: var(--primary-dark); }

.site-footer {
  background: #1e1533; color: rgba(255,255,255,0.6); text-align: center; padding: 30px 24px; font-size: 12.5px;
}

/* ---------------------------------------------------------------------- */
/* Painel do cliente (conta com e-mail + senha)                            */
/* ---------------------------------------------------------------------- */
.painel-topbar {
  background: linear-gradient(135deg, #1e1533 0%, #5b21b6 60%, #7c3aed 130%);
  padding: 18px 40px; display: flex; justify-content: space-between; align-items: center; color: #fff;
}
.painel-topbar .brand { color: #fff; }
.painel-topbar .brand-mark { background: #fff; color: var(--primary-dark); }
.painel-topbar .brand-name { color: #fff; }
.painel-user { display: flex; align-items: center; gap: 16px; font-size: 13.5px; color: rgba(255,255,255,0.9); }
.painel-user .avatar {
  width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: 0 0 auto;
}
.painel-user a.link-muted { color: rgba(255,255,255,0.75); }
.painel-shell { max-width: 900px; margin: 0 auto; padding: 40px 24px 64px 24px; }
.painel-section-title {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 40px 0 14px 0;
}
.painel-section-title:first-child { margin-top: 0; }
/* Botao "Baixar o Software" (estado sem licenca, na Web) - destaque bonito,
   com gradiente roxo, icone de download e leve animacao no hover. */
.btn-baixar-software {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 26px; border-radius: 12px; text-decoration: none;
  font-weight: 800; font-size: 15px; color: #ffffff;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  box-shadow: 0 8px 20px rgba(124, 58, 237, .30);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-baixar-software:hover {
  transform: translateY(-1px); filter: brightness(1.04);
  box-shadow: 0 12px 26px rgba(124, 58, 237, .38);
}
.btn-baixar-software:active { transform: translateY(0); }
.btn-baixar-software svg { flex-shrink: 0; }
.license-card { margin-bottom: 18px; }
.license-card-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.license-badge {
  display: inline-flex; align-items: center; gap: 6px; background: var(--primary-light); color: var(--primary);
  font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; white-space: nowrap;
}
.license-badge.warn { background: var(--warning-bg); color: var(--warning-text); }
.license-badge.ok { background: var(--success-bg); color: var(--success-text); }
.license-badge.danger { background: var(--error-bg); color: var(--error-text); }
.license-stats { display: flex; gap: 30px; flex-wrap: wrap; margin-bottom: 20px; }
.license-stats .stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #9a90ad; margin: 0 0 4px 0; }
.license-stats .stat-value { font-size: 15px; font-weight: 700; margin: 0; }
.license-key-tag {
  font-family: 'Courier New', monospace; font-size: 12px; color: var(--muted); background: #f7f2fc;
  border-radius: 8px; padding: 4px 10px; word-break: break-all;
}
.device-row {
  background: #f7f2fc; border: 1px solid #e6dbf5; border-radius: 12px; padding: 12px 16px;
  margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 760px) { .settings-grid { grid-template-columns: 1fr; } }
.empty-state { text-align: center; padding: 40px 20px; color: var(--muted); }
.empty-state-cta { text-align: center; padding: 44px 32px; box-shadow: var(--shadow-lg); border-radius: 22px; }
.empty-state-cta .icon-circle { width: 64px; height: 64px; font-size: 28px; }
.empty-state-cta .divider { max-width: 420px; margin-left: auto; margin-right: auto; }
.empty-state-tip { text-align: left; max-width: 480px; margin: 0 auto 22px auto; }

/* ---------------------------------------------------------------------- */
/* Pop-up "teste grátis acabou" (individual + em lote) - no site (navegador
   cheio) fica mais decorado; dentro do programa Desktop (janela pequena,
   sensação de app nativo) fica mais discreto - ver body.is-desktop abaixo. */
/* ---------------------------------------------------------------------- */
.limit-modal-overlay {
  position: fixed; inset: 0; background: rgba(30, 21, 51,0.6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; z-index: 999; padding: 20px;
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s;
}
.limit-modal-overlay.open { opacity: 1; visibility: visible; transition: opacity .2s ease; }
.limit-modal {
  background: #fff; border-radius: 24px; max-width: 440px; width: 100%; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35); transform: translateY(16px) scale(.96); opacity: 0;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s ease;
}
.limit-modal-overlay.open .limit-modal { transform: translateY(0) scale(1); opacity: 1; }

.limit-modal-head {
  position: relative; padding: 36px 28px 24px 28px; text-align: center; color: #fff;
  background: linear-gradient(135deg, #7c3aed, #5b21b6); overflow: hidden;
}
.limit-modal-head::before, .limit-modal-head::after {
  content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,0.12);
}
.limit-modal-head::before { width: 190px; height: 190px; top: -100px; right: -60px; }
.limit-modal-head::after { width: 130px; height: 130px; bottom: -75px; left: -45px; }
.limit-modal-icon {
  width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center; font-size: 30px; margin: 0 auto 16px auto;
  position: relative; z-index: 1; box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}
.limit-modal-head h2 { margin: 0 0 6px 0; font-size: 21px; position: relative; z-index: 1; }
.limit-modal-head .limit-modal-sub { margin: 0; font-size: 13px; color: rgba(255,255,255,0.85); position: relative; z-index: 1; }
.limit-modal-close {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.18); color: #fff; border: none; font-size: 17px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .15s; z-index: 1;
}
.limit-modal-close:hover { background: rgba(255,255,255,0.32); }

.limit-modal-body { padding: 26px 28px 28px 28px; text-align: center; }
.limit-modal-body p { color: var(--muted); font-size: 14.5px; line-height: 1.65; margin: 0 0 22px 0; }
.limit-modal-actions { display: flex; flex-direction: column; gap: 10px; }
.limit-modal-actions .btn { width: 100%; }
.limit-modal-note { margin-top: 16px !important; font-size: 12.5px !important; color: #9a90ad !important; }

/* Modo Desktop: pop-up mais discreto/"nativo de programa" - sem gradiente
   decorado nem bolhas, cabeçalho mais curto e sóbrio. */
body.is-desktop .limit-modal-head { background: var(--primary-dark); padding: 26px 24px 18px 24px; }
body.is-desktop .limit-modal-head::before, body.is-desktop .limit-modal-head::after { display: none; }
body.is-desktop .limit-modal-icon { width: 50px; height: 50px; font-size: 22px; margin-bottom: 12px; background: rgba(255,255,255,0.14); }
body.is-desktop .limit-modal-head h2 { font-size: 17px; }
body.is-desktop .limit-modal { border-radius: 14px; max-width: 380px; }
body.is-desktop .limit-modal-body { padding: 20px 22px 22px 22px; }
body.is-desktop .limit-modal-body p { font-size: 13.5px; }

/* ---------------------------------------------------------------------- */
/* Pop-up de SUCESSO (cadastro feito / licenca ativada) - ver base.html e  */
/* _show_success_modal em web/app.py. Visual comemorativo com o degrade    */
/* roxo/lilas da marca e um check animado.                                 */
/* ---------------------------------------------------------------------- */
.success-modal-overlay {
  position: fixed; inset: 0; background: rgba(30, 21, 51, 0.55); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px;
  opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility 0s linear .22s;
}
.success-modal-overlay.open { opacity: 1; visibility: visible; transition: opacity .22s ease; }
.success-modal {
  background: #fff; border-radius: 24px; max-width: 440px; width: 100%; overflow: hidden; position: relative;
  box-shadow: 0 30px 90px rgba(30, 21, 51, 0.42);
  transform: translateY(20px) scale(.94); opacity: 0;
  transition: transform .34s cubic-bezier(.2,.9,.25,1.15), opacity .3s ease;
}
.success-modal-overlay.open .success-modal { transform: translateY(0) scale(1); opacity: 1; }

.success-modal-head {
  position: relative; padding: 40px 28px 26px 28px; text-align: center; color: #fff;
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 55%, #5b21b6 100%); overflow: hidden;
}
.success-modal-head::before, .success-modal-head::after {
  content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,0.12); pointer-events: none;
}
.success-modal-head::before { width: 200px; height: 200px; top: -110px; right: -60px; }
.success-modal-head::after { width: 140px; height: 140px; bottom: -80px; left: -50px; }
.success-modal-head h2 { margin: 16px 0 0 0; font-size: 22px; position: relative; z-index: 1; color: #fff; }

.success-check {
  width: 78px; height: 78px; border-radius: 50%; background: rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center; margin: 0 auto; position: relative; z-index: 1;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}
.success-check svg { display: block; }
.success-check-circle {
  stroke: #fff; stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; opacity: .55;
}
.success-check-mark {
  stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40;
}
.success-modal-overlay.open .success-check-circle { animation: ssv-draw-circle .5s ease-out .12s forwards; }
.success-modal-overlay.open .success-check-mark { animation: ssv-draw-mark .38s cubic-bezier(.65,0,.45,1) .5s forwards; }
@keyframes ssv-draw-circle { to { stroke-dashoffset: 0; opacity: .9; } }
@keyframes ssv-draw-mark { to { stroke-dashoffset: 0; } }

.success-modal-close {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.18); color: #fff; border: none; font-size: 19px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .15s; z-index: 2;
}
.success-modal-close:hover { background: rgba(255,255,255,0.34); }

.success-modal-body { padding: 26px 30px 30px 30px; text-align: center; }
.success-modal-msg { color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.5; margin: 0 0 8px 0; }
.success-modal-sub { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin: 0 0 22px 0; }
.success-modal-body .btn { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .success-modal-overlay.open .success-check-circle,
  .success-modal-overlay.open .success-check-mark { animation: none; stroke-dashoffset: 0; }
  .success-modal { transition: opacity .2s ease; transform: none; }
}

/* ---------------------------------------------------------------------- */
/* Pop-up de TROCA DE SENHA obrigatoria (revenda/cliente com senha          */
/* temporaria) - mesmo visual do pop-up de sucesso, mas com um formulario   */
/* dentro. Ver revenda_trocar_senha_obrigatoria.html / painel_...           */
/* ---------------------------------------------------------------------- */
.pwchange-overlay {
  position: fixed; inset: 0; background: rgba(30, 21, 51, 0.62); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px;
}
.pwchange-card {
  background: #fff; border-radius: 24px; max-width: 460px; width: 100%; overflow: hidden;
  box-shadow: 0 30px 90px rgba(30, 21, 51, 0.45);
  animation: pwchange-in .32s cubic-bezier(.2,.9,.25,1.15);
}
@keyframes pwchange-in { from { transform: translateY(18px) scale(.95); opacity: 0; } to { transform: none; opacity: 1; } }
.pwchange-head {
  position: relative; padding: 34px 30px 24px 30px; text-align: center; color: #fff; overflow: hidden;
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 55%, #5b21b6 100%);
}
.pwchange-head::before, .pwchange-head::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,0.12); pointer-events: none; }
.pwchange-head::before { width: 200px; height: 200px; top: -110px; right: -60px; }
.pwchange-head::after { width: 140px; height: 140px; bottom: -80px; left: -50px; }
.pwchange-icon {
  width: 66px; height: 66px; border-radius: 50%; background: rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center; font-size: 30px; margin: 0 auto 14px auto;
  position: relative; z-index: 1; box-shadow: 0 10px 26px rgba(0,0,0,0.18);
}
.pwchange-head h2 { margin: 0 0 6px 0; font-size: 22px; color: #fff; position: relative; z-index: 1; }
.pwchange-head p { margin: 0; font-size: 13.5px; color: rgba(255,255,255,0.9); position: relative; z-index: 1; line-height: 1.55; }
.pwchange-body { padding: 24px 30px 30px 30px; }
.pwchange-body .field { margin-bottom: 14px; }
.pwchange-body .btn { width: 100%; margin-top: 6px; }

/* Modo Desktop (janela do programa): um pouco mais compacto/sobrio. */
body.is-desktop .success-modal { border-radius: 16px; max-width: 390px; }
body.is-desktop .success-modal-head { padding: 30px 24px 20px 24px; }
body.is-desktop .success-modal-head h2 { font-size: 19px; }
body.is-desktop .success-check { width: 64px; height: 64px; }
body.is-desktop .success-modal-body { padding: 22px 24px 24px 24px; }

/* ---------------------------------------------------------------------- */
/* Painel Admin + Painel de Revenda - visual "SaaS moderno" proprio        */
/* (roxo/indigo, sidebar escura) - ver variaveis --panel-*/--accent-* no    */
/* :root acima. Compartilhado pelos dois paineis (classes .admin-* aqui    */
/* tambem sao usadas pelas telas de /revenda, ver revenda_dashboard.html). */
/* ---------------------------------------------------------------------- */
.admin-body { background: var(--panel-bg); }

.admin-shell { display: flex; min-height: 100vh; align-items: stretch; }

.admin-sidebar {
  width: 256px; flex: 0 0 256px; background: linear-gradient(180deg, var(--sidebar-bg-top) 0%, var(--sidebar-bg-bottom) 100%);
  color: #fff; display: flex; flex-direction: column; padding: 20px 14px; position: sticky; top: 0;
  height: 100vh; overflow-y: auto;
}
.admin-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: #fff; padding: 8px 8px 24px 8px; }
.admin-brand-mark {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #c084fc 0%, var(--accent) 100%); font-weight: 800; font-size: 13px; letter-spacing: .01em;
  box-shadow: 0 6px 14px rgba(168, 85, 247, 0.35);
}
.admin-brand-name { display: block; font-weight: 700; font-size: 15px; line-height: 1.25; }
.admin-brand-sub { display: block; font-size: 11px; color: rgba(255,255,255,0.55); }

.admin-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.admin-nav-section-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: rgba(255,255,255,0.35); padding: 18px 12px 6px 12px;
}
.admin-nav-link {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px;
  color: rgba(255,255,255,0.72); text-decoration: none; font-size: 13.5px; font-weight: 500;
  transition: background .15s, color .15s;
}
.admin-nav-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
.admin-nav-link.active { background: var(--accent); color: #fff; box-shadow: 0 6px 16px rgba(168, 85, 247, 0.45); }
.admin-nav-ico { width: 18px; text-align: center; font-size: 14px; opacity: .9; line-height: 1; }

.admin-sidebar-footer {
  display: flex; align-items: center; gap: 10px; padding: 14px 10px 6px 10px; margin-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.admin-sidebar-user-avatar {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: #fff;
}
.admin-sidebar-user-info { flex: 1; min-width: 0; }
.admin-sidebar-user-name { display: block; font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-sidebar-user-email { display: block; font-size: 11px; color: rgba(255,255,255,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-sidebar-links { display: flex; flex-direction: column; gap: 2px; padding: 6px 2px 2px 2px; }
.admin-sidebar-link {
  display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.6); text-decoration: none;
  font-size: 12.5px; padding: 7px 10px; border-radius: 8px;
}
.admin-sidebar-link:hover { color: #fff; background: rgba(255,255,255,0.06); }

.admin-main { flex: 1; padding: 34px 40px 60px 40px; max-width: 1240px; }
.admin-flashes { margin-bottom: 20px; }

.admin-header { margin-bottom: 26px; }
.admin-header h1 { margin: 0 0 4px 0; font-size: 25px; color: var(--panel-ink); letter-spacing: -.01em; }
.admin-header p.admin-subtitle { margin: 0; color: var(--panel-muted); font-size: 14px; }
.admin-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.admin-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 26px; }
@media (max-width: 900px) { .admin-stats-grid { grid-template-columns: repeat(2, 1fr); } }
.admin-stat-card {
  background: #fff; border-radius: var(--panel-card-radius); padding: 18px 20px; box-shadow: var(--panel-shadow);
  border: 1px solid var(--panel-border);
}
.admin-stat-card.admin-stat-warn { border-color: #f3c98b; background: #fffaf0; }
.admin-stat-value { font-size: 27px; font-weight: 800; color: var(--panel-ink); line-height: 1.15; }
.admin-stat-label {
  font-size: 11px; color: var(--panel-muted); margin-bottom: 8px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}

.admin-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 980px) { .admin-grid-2 { grid-template-columns: 1fr; } }

.admin-card {
  background: #fff; border-radius: var(--panel-card-radius); padding: 24px 26px; box-shadow: var(--panel-shadow);
  border: 1px solid var(--panel-border); margin-bottom: 20px;
}
.admin-card h2 { margin: 0 0 12px 0; font-size: 16.5px; color: var(--panel-ink); }
.admin-card p.admin-card-desc { margin: -8px 0 16px 0; color: var(--panel-muted); font-size: 13px; }
.admin-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 12px; flex-wrap: wrap; }
.admin-card-head h2 { margin: 0; }
.admin-card-highlight { border: 1.5px solid var(--accent); background: linear-gradient(180deg, var(--accent-light) 0%, #fff 45%); }

/* Fase 06.1 - painel "Ferramentas Web e Desktop" recolhível (item
   pedido pelo cliente: a página ficava enorme, rolando muito). Cada
   ferramenta é um <details> - fechado por padrão, só o resumo (título +
   badges + Desktop/Web) aparece até o Admin clicar para abrir. */
.admin-tool-card { padding: 0; overflow: hidden; }
.admin-tool-card > summary {
  list-style: none; cursor: pointer; padding: 16px 26px; display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap; user-select: none;
}
.admin-tool-card > summary::-webkit-details-marker { display: none; }
.admin-tool-card > summary::before {
  content: "▸"; display: inline-block; color: var(--panel-muted); font-size: 12px;
  transition: transform .15s ease; width: 12px;
}
.admin-tool-card[open] > summary::before { transform: rotate(90deg); }
.admin-tool-card > summary:hover { background: #fafafa; }
.admin-tool-summary-title { font-weight: 700; font-size: 15px; color: var(--panel-ink); }
.admin-tool-summary-quick { margin-left: auto; font-size: 12.5px; color: var(--panel-muted); white-space: nowrap; }
.admin-tool-body { padding: 6px 26px 24px 26px; border-top: 1px solid var(--panel-border); }
#ferr-sem-resultado.hidden { display: none; }

.admin-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.admin-table th {
  text-align: left; color: var(--panel-muted); font-weight: 700; font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; padding: 10px; border-bottom: 1.5px solid var(--panel-border);
}
.admin-table td { padding: 12px 10px; border-bottom: 1px solid var(--panel-border); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover { background: #fafafe; }

.admin-badge {
  display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 11px; font-weight: 700;
  letter-spacing: .02em;
}
.admin-badge-ok { background: var(--success-bg); color: var(--success-text); }
.admin-badge-warn { background: var(--warning-bg); color: var(--warning-text); }
.admin-badge-error { background: var(--error-bg); color: var(--error-text); }
.admin-badge-neutral { background: var(--accent-light); color: var(--accent-dark); }

.admin-mono { font-family: "SF Mono", Consolas, monospace; font-size: 12.5px; word-break: break-all; }

.admin-link { color: var(--accent); text-decoration: none; font-weight: 600; font-size: 13px; }
.admin-link:hover { text-decoration: underline; }
.admin-link-button {
  background: none; border: none; color: var(--accent); font-weight: 600; font-size: 12.5px;
  cursor: pointer; padding: 0; font-family: inherit; text-decoration: underline;
}
.admin-link-button:hover { color: var(--accent-dark); }

/* Botao "primario" do Admin/Revenda usa o roxo (--accent), separado do
   .btn-primary azul do site publico (ver .btn-admin abaixo). */
.btn-admin {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px; border-radius: 10px; font-size: 13.5px; font-weight: 700; text-decoration: none;
  border: none; cursor: pointer; font-family: inherit; transition: filter .15s, box-shadow .15s;
}
.btn-admin-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 18px rgba(168, 85, 247, 0.32); }
.btn-admin-primary:hover { filter: brightness(1.06); }
.btn-admin-secondary { background: #fff; color: var(--panel-ink); border: 1.5px solid var(--panel-border); }
.btn-admin-secondary:hover { border-color: #d6c9ec; }
.btn-admin-danger { background: #fff; color: #b91c1c; border: 1.5px solid #f3c6c6; }
.btn-admin-danger:hover { background: #fef2f2; }
.btn-admin-small { padding: 6px 13px; font-size: 12px; border-radius: 8px; }

/* Modal generico (Admin/Revenda) - overlay fixo + card centralizado,
   mesmo padrao ja usado pelo .limit-modal-overlay do site publico (ver
   acima), so que mais simples (sem cabecalho colorido/icone). Controlado
   por JS puro: adiciona/remove a classe "open" (ver bloco <script> em
   admin_base.html / revenda_dashboard.html). */
.admin-modal-overlay {
  position: fixed; inset: 0; background: rgba(26, 16, 48, 0.55); display: flex; align-items: center;
  justify-content: center; padding: 20px; z-index: 200; opacity: 0; visibility: hidden;
  transition: opacity .15s ease, visibility .15s ease;
}
.admin-modal-overlay.open { opacity: 1; visibility: visible; }
.admin-modal {
  background: #fff; border-radius: 18px; padding: 26px 28px; max-width: 440px; width: 100%;
  box-shadow: var(--shadow-lg); transform: translateY(8px) scale(.98); opacity: 0; transition: transform .18s ease, opacity .18s ease;
  max-height: 88vh; overflow-y: auto;
}
.admin-modal-overlay.open .admin-modal { transform: translateY(0) scale(1); opacity: 1; }
.admin-modal h2 { margin: 0 0 4px 0; font-size: 18px; color: var(--panel-ink); }
.admin-modal p.admin-modal-desc { margin: 0 0 18px 0; color: var(--panel-muted); font-size: 13px; }
.admin-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

.admin-mini-license { padding: 14px 0; border-bottom: 1px solid var(--panel-border); }
.admin-mini-license:last-child { border-bottom: none; }

/* flex-direction precisa ser explicito aqui - a regra generica "form {
   flex-direction: column }" (ver acima, usada pelos formularios normais
   do site) tem menos especificidade que .admin-search-form no "display",
   mas nenhuma das duas regras brigam por "flex-direction" especificamente
   - sem declarar de novo aqui, o valor column da regra generica "vence"
   por ser a unica que declara essa propriedade, e a busca (input + botao)
   empilha em vez de ficar lado a lado. */
.admin-search-form { display: flex; flex-direction: row; gap: 10px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.admin-search-form input[type="text"], .admin-search-form input[type="email"] {
  flex: 1; min-width: 220px; padding: 10px 14px; border-radius: 10px; border: 1.5px solid var(--panel-border); font-size: 14px;
}

.admin-form .field { margin-bottom: 16px; }
.admin-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Impede o estouro horizontal (aquela barra de rolagem feia no rodapé do
   modal): campos podem encolher abaixo do conteúdo e inputs/selects nunca
   passam da largura do container. */
.admin-form-row, .admin-form-row > .field, .admin-form .field { min-width: 0; }
.admin-modal input, .admin-modal select, .admin-modal textarea,
.admin-form input, .admin-form select, .admin-form textarea { width: 100%; max-width: 100%; }
.admin-modal select { text-overflow: ellipsis; }
.admin-checkbox { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--panel-muted); margin: 4px 0 18px 0; }
.admin-checkbox input { width: auto; margin-top: 3px; flex: 0 0 auto; }

.btn-danger { background: #dc2626; color: #fff; border: none; }
.btn-danger:hover { background: #b91c1c; }

.chave-box {
  background: #f7f2fc; border: 1px solid #e6dbf5; border-radius: 10px; padding: 14px 16px;
  word-break: break-all; font-family: "SF Mono", Consolas, monospace; font-size: 0.95em;
}

.admin-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--sidebar-bg-top) 0%, var(--sidebar-bg-bottom) 100%); padding: 20px; }
.admin-login-card { background: #fff; border-radius: 20px; padding: 40px 36px; max-width: 380px; width: 100%; text-align: center; box-shadow: var(--shadow-lg); }
.admin-login-icon { font-size: 34px; margin-bottom: 10px; }
.admin-login-card h1 { margin: 0 0 4px 0; font-size: 22px; }
.admin-login-card form { margin-top: 20px; text-align: left; }
.admin-login-hint { margin-top: 18px; }
.admin-login-hint code { background: #f3ecfa; padding: 1px 5px; border-radius: 4px; font-size: 11.5px; }

/* ======================================================================== */
/* RESPONSIVIDADE DOS PAINÉIS (Admin + Revenda)                             */
/* Reconhece o dispositivo pela largura da tela (media queries) e se ajusta */
/* do celular até TVs/monitores gigantes. Vem por ÚLTIMO no arquivo para    */
/* poder sobrescrever as regras acima quando necessário.                    */
/* ======================================================================== */

/* Barra superior + botão hambúrguer: só aparecem no celular/tablet (o CSS
   abaixo, dentro do @media, liga isto). No desktop ficam escondidos. */
.admin-topbar { display: none; }
.admin-sidebar-overlay { display: none; }
.admin-burger {
  width: 44px; height: 44px; border: none; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 10px; border-radius: 10px;
}
.admin-burger span { display: block; height: 2.5px; width: 100%; background: #fff; border-radius: 2px; transition: transform .2s; }
.admin-topbar-brand { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-size: 15px; }
.admin-topbar-brand .admin-brand-mark { width: 30px; height: 30px; flex: 0 0 30px; font-size: 11px; }
.admin-topbar-sub { font-size: 11px; color: rgba(255,255,255,0.6); }

/* Tipografia fluida: títulos crescem/encolhem suavemente com a tela. */
.admin-header h1 { font-size: clamp(20px, 2.2vw, 30px); }
.admin-stat-value { font-size: clamp(22px, 2vw, 30px); }

/* Telas MUITO grandes (monitores wide, TVs): centraliza e alarga o conteúdo
   para não ficar tudo espremido num canto, mantendo respiro dos lados. */
@media (min-width: 1700px) {
  .admin-main { max-width: 1560px; margin: 0 auto; padding: 44px 64px 90px; }
  .admin-stats-grid { gap: 22px; }
}
@media (min-width: 2400px) {
  .admin-main { max-width: 2000px; padding: 60px 90px 120px; }
  .admin-shell { font-size: 17px; }
}

/* CELULAR e TABLET (até 1024px): a sidebar vira uma GAVETA que desliza,
   aberta pelo botão de menu na barra superior. */
@media (max-width: 1024px) {
  .admin-topbar {
    display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 120;
    background: linear-gradient(180deg, var(--sidebar-bg-top) 0%, var(--sidebar-bg-bottom) 100%);
    padding: 8px 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  }
  .admin-shell { display: block; min-height: auto; }
  .admin-sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: 272px; max-width: 84vw;
    transform: translateX(-100%); transition: transform .25s ease; z-index: 300; box-shadow: 0 0 40px rgba(0,0,0,0.4);
  }
  .admin-shell.nav-open .admin-sidebar { transform: translateX(0); }
  .admin-shell.nav-open .admin-sidebar-overlay {
    display: block; position: fixed; inset: 0; background: rgba(20,12,38,0.55); z-index: 250;
  }
  .admin-main { max-width: 100%; padding: 20px 18px 56px; }
  .admin-header h1 { font-size: clamp(20px, 5vw, 26px); }
  /* Tabelas largas: rolam de lado dentro do cartão em vez de estourar a tela. */
  .admin-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin-table { min-width: 560px; }
}

/* CELULAR (até 640px): empilha tudo em 1 coluna e ajusta modais/formulários. */
@media (max-width: 640px) {
  .admin-main { padding: 16px 12px 48px; }
  .admin-card { padding: 16px 14px; }
  .admin-stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .admin-form-row { grid-template-columns: 1fr; }
  .admin-header-row { flex-direction: column; align-items: stretch; }
  .admin-header-row > .btn-admin, .admin-card-head .btn-admin { width: 100%; }
  .admin-card-head { flex-direction: column; align-items: stretch; }
  /* Modal quase tela cheia, colado no topo, rolando por dentro. */
  .admin-modal-overlay { padding: 10px; align-items: flex-start; }
  .admin-modal { max-width: 100%; width: 100%; padding: 20px 18px; border-radius: 16px; max-height: 94vh; }
  .admin-modal-actions { flex-direction: column-reverse; }
  .admin-modal-actions .btn-admin { width: 100%; }
  .admin-search-form { flex-direction: column; align-items: stretch; }
  .admin-search-form .btn-admin { width: 100%; }
  .admin-tabs .btn-admin { flex: 1 1 auto; text-align: center; }
}

@media (max-width: 400px) {
  .admin-stats-grid { grid-template-columns: 1fr; }
}

/* ======================================================================== */
/* MODAL "BONITO" (usado no Gerar NFR e afins): cabeçalho com ícone, corpo   */
/* que rola por dentro e rodapé fixo com os botões. Moderno e sem estouro.   */
/* ======================================================================== */
.admin-modal.ssv-modal-pretty {
  max-width: 500px; padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: 90vh;
}
.ssv-modal-hd {
  display: flex; align-items: center; gap: 14px; padding: 22px 26px 18px;
  background: linear-gradient(135deg, #f6f3ff 0%, #efe9fd 100%); border-bottom: 1px solid #ece6f8;
}
.ssv-modal-ico {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 14px;
  background: linear-gradient(135deg, #c084fc 0%, var(--accent) 100%); display: flex; align-items: center;
  justify-content: center; font-size: 22px; box-shadow: 0 8px 18px rgba(168, 85, 247, 0.35);
}
.ssv-modal-hd h2 { margin: 0; font-size: 18px; color: var(--panel-ink); }
.ssv-modal-hd p { margin: 3px 0 0; font-size: 12.5px; color: var(--panel-muted); line-height: 1.35; }
.ssv-modal-bd { padding: 20px 26px 6px; overflow-y: auto; }
.ssv-modal-pretty .admin-modal-actions {
  margin: 0; padding: 15px 26px; border-top: 1px solid var(--panel-border); background: #fcfbfe; flex: 0 0 auto;
}
.ssv-modal-bd label { display: block; margin-bottom: 2px; }
.ssv-modal-bd label .opt { color: var(--panel-muted); font-weight: 500; font-size: 11.5px; }
.ssv-modal-bd .field { margin-bottom: 15px; }
.ssv-modal-bd .admin-form-row { margin-bottom: 0; }
@media (max-width: 640px) {
  .admin-modal.ssv-modal-pretty { max-width: 100%; max-height: 94vh; }
  .ssv-modal-hd { padding: 18px 18px 14px; }
  .ssv-modal-bd { padding: 16px 18px 4px; }
  .ssv-modal-pretty .admin-modal-actions { padding: 12px 18px; }
}

/* Prévia organizada da ferramenta Juntar / Imagens->PDF. */
.merge-preview { margin: 4px 0 20px; }
.merge-preview-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 2px; }
.merge-preview-head strong { font-size: 14px; }
.merge-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-top: 10px; }
.mp-card {
  position: relative; border: 1.5px solid var(--border); border-radius: 12px; background: #fff; padding: 10px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: grab;
}
.mp-card.dragging { opacity: .5; }
.mp-card.drop-target { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
.mp-num {
  position: absolute; top: -8px; left: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--primary); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(124,58,237,.35);
}
.mp-thumb {
  width: 100%; aspect-ratio: 3/4; border-radius: 8px; background: #f4f2f9; display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
}
.mp-thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.mp-thumb .mp-fallback { position: absolute; font-size: 30px; color: var(--muted); z-index: 0; }
/* Fallback INFORMATIVO (Desbloquear PDF / Reparar PDF) - explica por que
   não há prévia, em vez de só um ícone genérico de "não carregou". */
.mp-thumb .mp-fallback-info {
  font-size: 12.5px; font-weight: 600; color: #92714f; text-align: center;
  line-height: 1.4; padding: 0 10px; background: #fef8ef; border-radius: 8px;
  padding: 8px 10px;
}
.mp-thumb img { position: relative; z-index: 1; }
.mp-name { font-size: 11.5px; font-weight: 600; text-align: center; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-meta { font-size: 10.5px; color: var(--muted); }
.mp-move { display: flex; gap: 4px; }
.mp-move button { width: 30px; height: 20px; border: 1px solid var(--border); background: #fff; border-radius: 6px; font-size: 10px; cursor: pointer; padding: 0; }
.mp-move button:disabled { opacity: .35; cursor: default; }
.mp-move button:not(:disabled):hover { background: var(--primary-light); border-color: var(--primary); }

/* Ícone do pop-up de AVISO (⚠️) - mesmo modal do sucesso, cor de alerta. */
.aviso-icon {
  width: 60px; height: 60px; margin: 0 auto; border-radius: 50%;
  background: #fff7ed; color: #d97706; display: flex; align-items: center; justify-content: center;
  font-size: 32px; border: 2px solid #fed7aa;
}

/* Cartão "para onde enviar sua chave" na página de compra (comprar sem
   cadastro prévio - coleta nome+e-mail no mesmo passo). */
.buyer-card { background:#fff; border:1.5px solid var(--border); border-radius:16px; padding:20px 22px; margin:0 auto 22px; max-width:760px; box-shadow:0 6px 20px rgba(0,0,0,.05); }
.buyer-head { display:flex; gap:14px; align-items:flex-start; margin-bottom:14px; }
.buyer-ico { width:44px; height:44px; flex:0 0 44px; border-radius:12px; background:var(--primary-light); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:22px; }
.buyer-head h3 { margin:0 0 3px; font-size:17px; color:var(--ink); }
.buyer-head p { margin:0; font-size:13.5px; color:var(--muted); line-height:1.5; }
.buyer-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.buyer-fields input { width:100%; padding:13px 14px; border:1.5px solid var(--border); border-radius:11px; font-size:15px; background:#faf9fd; }
.buyer-fields input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-light); background:#fff; }
.buyer-login-hint { margin-top:12px; font-size:13px; color:var(--muted); text-align:center; }
.buyer-login-hint a { color:var(--primary); font-weight:600; }
/* Fase 04.1: bloco de confianca + aviso de e-mail na compra - mesmas
   variaveis de cor ja usadas acima (--muted, --border, --primary),
   nenhuma cor nova. */
.trust-email-warning { font-size:13px; color:var(--muted); text-align:center; margin:14px 0 4px; line-height:1.5; }
.trust-block { margin-top:18px; padding-top:16px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px; }
.trust-item { font-size:13px; color:var(--muted); }
.trust-item-empresa { font-weight:600; color:var(--ink); }
@media (max-width:600px){ .buyer-fields { grid-template-columns:1fr; } }

/* Destaque "Baixar o Software" no painel do cliente. */
.painel-download-cta {
  display:flex; align-items:center; gap:16px; background:linear-gradient(135deg,#f5f3ff,#ede9fe);
  border:1.5px solid #ddd3f5; border-radius:16px; padding:16px 20px; margin:6px 0 18px; flex-wrap:wrap;
}
.painel-download-ico { font-size:30px; flex:0 0 auto; }
.painel-download-txt { flex:1; min-width:180px; display:flex; flex-direction:column; gap:2px; }
.painel-download-txt strong { font-size:16px; color:#3b2a63; }
.painel-download-txt span { font-size:13px; color:#6b5b8a; }
.painel-download-cta .btn { flex:0 0 auto; }
@media (max-width:560px){ .painel-download-cta .btn { width:100%; } }

/* ============================================================
   WhatsApp flutuante + banner LGPD + novas seções do site
   (adicionado nas melhorias de landing page / contato / LGPD)
   ============================================================ */

/* --- WhatsApp flutuante (canto inferior direito) --- */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 9000;
  display: inline-flex; align-items: center; gap: 0;
  background: #25d366; color: #fff; text-decoration: none;
  border-radius: 999px; padding: 0; height: 60px;
  box-shadow: 0 10px 30px rgba(37,211,102,.45), 0 4px 10px rgba(0,0,0,.12);
  transition: transform .2s ease, box-shadow .2s ease, padding .25s ease;
  overflow: hidden;
}
.wa-float:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 38px rgba(37,211,102,.55); }
.wa-float-icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; flex: 0 0 auto; }
.wa-float-text { font-weight: 700; font-size: 15px; white-space: nowrap; max-width: 0; opacity: 0; transition: max-width .25s ease, opacity .2s ease, padding .25s ease; padding: 0; }
.wa-float:hover .wa-float-text { max-width: 160px; opacity: 1; padding-right: 22px; }
/* leve pulsar para chamar atenção sem irritar */
.wa-float::after {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(37,211,102,.5); animation: waPulse 2.6s infinite;
}
@keyframes waPulse { 0%{box-shadow:0 0 0 0 rgba(37,211,102,.45);} 70%{box-shadow:0 0 0 16px rgba(37,211,102,0);} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0);} }
@media (max-width:560px){ .wa-float { right:16px; bottom:16px; height:56px; } .wa-float-icon{ width:56px; height:56px; } .wa-float:hover .wa-float-text{ max-width:0; opacity:0; padding:0; } }

/* --- Banner LGPD / cookies --- */
.lgpd-banner {
  position: fixed; left: 20px; bottom: 20px; z-index: 9500;
  width: min(400px, calc(100vw - 40px));
  background: #fff; border: 1px solid #ece7f6; border-radius: 18px;
  box-shadow: 0 20px 60px rgba(60,20,120,.22);
  transform: translateY(18px); opacity: 0; transition: transform .3s cubic-bezier(.2,.9,.3,1.2), opacity .3s ease;
}
.lgpd-banner.open { transform: translateY(0); opacity: 1; }
.lgpd-inner { padding: 20px 22px; }
.lgpd-head { display:flex; align-items:center; gap:9px; font-size:16px; color:#1e1033; margin-bottom:8px; }
.lgpd-ico { font-size:20px; }
.lgpd-text { font-size:13.5px; line-height:1.6; color:#5b5170; margin:0 0 16px; }
.lgpd-text a { color: var(--primary); font-weight:600; text-decoration:none; }
.lgpd-text a:hover { text-decoration:underline; }
.lgpd-actions { display:flex; gap:10px; flex-wrap:wrap; }
.lgpd-btn { border:0; border-radius:11px; padding:11px 18px; font-size:14px; font-weight:700; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.lgpd-btn-primary { background:linear-gradient(135deg,#7c3aed,#a855f7); color:#fff; box-shadow:0 8px 20px rgba(124,58,237,.3); flex:1; min-width:160px; }
.lgpd-btn-ghost { background:#f5f1ff; color:#6d28d9; }
@media (max-width:560px){ .lgpd-banner { left:12px; right:12px; bottom:12px; width:auto; } .lgpd-btn-primary{ min-width:0; } }

/* --- Abas de categoria (filtro estilo iLovePDF) --- */
.cat-tabs {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin: 0 auto 26px; max-width: 1000px;
}
.cat-tab {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1.5px solid #e6e1f0; background: #fff; color: #4b4466;
  border-radius: 999px; padding: 9px 18px; font-size: 14px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
.cat-tab:hover { border-color: #c9bdf0; color: #1e1033; transform: translateY(-1px); }
.cat-tab.active {
  background: #1e1033; border-color: #1e1033; color: #fff;
  box-shadow: 0 8px 20px rgba(30,16,51,.25);
}
.cat-tab-ico { font-size: 15px; line-height: 1; }
.apps-empty { text-align: center; color: #9a92b3; padding: 30px 0; font-size: 15px; }
/* rolagem horizontal das abas no celular (não quebram linha bagunçada) */
@media (max-width:640px){
  .cat-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .cat-tab { flex: 0 0 auto; }
}

/* --- Seção: Aplicativos / ferramentas (grade estilo iLovePDF) --- */
.apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
}
.app-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #eceaf3; border-radius: 14px;
  padding: 24px 20px 20px; text-decoration: none;
  position: relative; overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
/* faixa de cor sutil no topo do card, na cor da ferramenta */
.app-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--c, #7c3aed); opacity: 0; transition: opacity .18s ease;
}
.app-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(60,20,120,.14);
  border-color: #ddd3f5; /* fallback */
  border-color: color-mix(in srgb, var(--c, #7c3aed) 35%, #eceaf3);
}
.app-card:hover::before { opacity: 1; }
.app-card-ico {
  width: 56px; height: 56px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 15px;
  color: var(--c, #7c3aed);
  background: #f4f1fb; /* fallback p/ navegadores sem color-mix */
  background: color-mix(in srgb, var(--c, #7c3aed) 12%, #fff);
  transition: background .18s ease, transform .18s ease;
}
.app-card:hover .app-card-ico { transform: scale(1.06); background: color-mix(in srgb, var(--c, #7c3aed) 18%, #fff); }
.app-card h3 { margin: 0 0 6px; font-size: 16px; color: #1e1033; font-weight: 700; }
.app-card p { margin: 0; font-size: 13px; line-height: 1.5; color: #6b5b8a; flex: 1; }
.app-card-go {
  display: inline-block; margin-top: 14px;
  font-size: 13px; font-weight: 700; color: var(--c, #7c3aed);
  opacity: 0; transform: translateX(-4px);
  transition: opacity .18s ease, transform .18s ease;
}
.app-card:hover .app-card-go { opacity: 1; transform: translateX(0); }
/* Selo "Em breve" (ferramentas que ainda vão chegar) */
.app-soon-badge {
  position: absolute; top: 12px; right: 12px;
  background: #eef2ff; color: #4338ca; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; letter-spacing: .2px;
}
.app-card-soon { opacity: .82; }
.app-card-soon:hover { opacity: 1; }
.app-card-soon .app-card-ico { filter: grayscale(.15); }
@media (max-width:520px){
  .apps-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .app-card { padding: 18px 15px 16px; }
  .app-card-ico { width: 48px; height: 48px; border-radius: 13px; margin-bottom: 12px; }
  .app-card h3 { font-size: 14.5px; }
  .app-card p { font-size: 12px; }
  .app-card-go { opacity: 1; transform: none; }
}

/* --- Seção: regras / como funciona a licença --- */
.rules-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:18px; }
.rule-card { background:#fff; border:1px solid #ece7f6; border-radius:16px; padding:24px; }
.rule-card .rule-ico { font-size:28px; margin-bottom:12px; }
.rule-card h3 { margin:0 0 8px; font-size:17px; color:#1e1033; }
.rule-card p { margin:0; font-size:14px; line-height:1.6; color:#5b5170; }
.rule-card ul { margin:8px 0 0; padding-left:18px; font-size:13.5px; line-height:1.7; color:#5b5170; }

/* --- FAQ (acordeão simples) --- */
.faq-list { max-width:760px; margin:0 auto; }
.faq-item { border:1px solid #ece7f6; border-radius:14px; margin-bottom:12px; background:#fff; overflow:hidden; }
.faq-q { width:100%; text-align:left; border:0; background:transparent; padding:18px 22px; font-size:15.5px; font-weight:600; color:#1e1033; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq-q::after { content:"+"; font-size:22px; color:var(--primary); font-weight:400; transition:transform .2s ease; }
.faq-item.open .faq-q::after { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .28s ease; }
.faq-a-inner { padding:0 22px 18px; font-size:14px; line-height:1.65; color:#5b5170; }
.faq-item.open .faq-a { max-height:400px; }

/* --- Páginas institucionais (privacidade / termos / contato) --- */
.legal-wrap { max-width:820px; margin:0 auto; padding:8px 0 20px; }
.legal-wrap h1 { font-size:30px; color:#1e1033; margin:0 0 6px; }
.legal-updated { color:#9a92b3; font-size:13.5px; margin:0 0 28px; }
.legal-wrap h2 { font-size:19px; color:#3b2a63; margin:30px 0 10px; }
.legal-wrap p, .legal-wrap li { font-size:14.5px; line-height:1.7; color:#4b4466; }
.legal-wrap ul { padding-left:20px; }
.legal-wrap a { color:var(--primary); font-weight:600; }
.contact-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:16px; margin:8px 0 26px; }
.contact-card { background:#fff; border:1px solid #ece7f6; border-radius:16px; padding:22px; }
.contact-card .c-ico { font-size:26px; margin-bottom:10px; }
.contact-card h3 { margin:0 0 4px; font-size:16px; color:#1e1033; }
.contact-card p { margin:0 0 10px; font-size:13.5px; color:#6b5b8a; line-height:1.5; }
.contact-card a { font-size:14px; font-weight:700; color:var(--primary); text-decoration:none; word-break:break-word; }

/* rodapé com colunas (site público) */
.site-footer-rich { background:#1e1033; color:rgba(255,255,255,.75); padding:40px 24px 26px; }
.sf-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; }
.sf-inner h4 { color:#fff; font-size:15px; margin:0 0 12px; }
.sf-inner a { display:block; color:rgba(255,255,255,.72); text-decoration:none; font-size:13.5px; margin-bottom:8px; }
.sf-inner a:hover { color:#fff; }
.sf-brand-mark { font-weight:800; font-size:20px; color:#fff; }
.sf-bottom { max-width:1100px; margin:26px auto 0; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); font-size:12.5px; color:rgba(255,255,255,.5); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
@media (max-width:700px){ .sf-inner { grid-template-columns:1fr; gap:22px; } }

/* ============================================================
   Badge de eventos novos + toast "ao vivo" na barra do Admin
   (instalação/desinstalação/reinstalação sem precisar estar na
   página de Auditoria - ver _admin_live_events.html)
   ============================================================ */
.admin-nav-badge {
  margin-left: auto; background: #dc2626; color: #fff;
  font-size: 11.5px; font-weight: 800; line-height: 1;
  padding: 3px 7px; border-radius: 999px; min-width: 18px; text-align: center;
  animation: ssvBadgePulse 1.8s infinite;
}
@keyframes ssvBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.5); }
  50% { box-shadow: 0 0 0 5px rgba(220,38,38,0); }
}
.ssv-audit-toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 9999;
  width: 320px; background: #1e1033; color: #fff;
  border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.35);
  overflow: hidden;
  animation: ssvToastIn .28s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes ssvToastIn { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.ssv-audit-toast-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; font-weight: 800; font-size: 14px;
  background: rgba(255,255,255,.06);
}
.ssv-audit-toast-head button {
  background: none; border: 0; color: rgba(255,255,255,.6); font-size: 18px;
  cursor: pointer; line-height: 1;
}
.ssv-audit-toast-head button:hover { color: #fff; }
.ssv-audit-toast-body { padding: 4px 14px 8px; max-height: 220px; overflow-y: auto; }
.ssv-audit-toast-item { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 13px; line-height: 1.5; }
.ssv-audit-toast-item:last-child { border-bottom: 0; }
.ssv-audit-toast-item b { color: #c4b5fd; }
.ssv-audit-toast-link {
  display: block; text-align: center; padding: 11px; font-size: 13px; font-weight: 700;
  color: #fff; background: rgba(255,255,255,.08); text-decoration: none;
}
.ssv-audit-toast-link:hover { background: rgba(255,255,255,.14); }
@media (max-width: 480px) { .ssv-audit-toast { left: 12px; right: 12px; width: auto; bottom: 12px; } }

/* ============================================================
   Animação de "leitura" (documento + feixe de scanner) - aparece
   quando o programa está lendo/enviando ou processando um arquivo.
   Usa a cor de cada ferramenta (--tool-c, definida no <div class="card">
   de ferramenta.html) para o feixe combinar com o ícone da ferramenta.
   ============================================================ */
.ssv-reading {
  display: none; flex-direction: column; align-items: center; gap: 14px;
  padding: 26px 0 8px;
}
.ssv-reading.show { display: flex; animation: ssvReadingIn .25s ease; }
@keyframes ssvReadingIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.ssv-reading-page {
  position: relative; width: 108px; height: 136px; background: #fff;
  border-radius: 12px; border: 1px solid #ece7f6;
  box-shadow: 0 14px 34px rgba(60,20,120,.14);
  padding: 18px 16px; overflow: hidden;
  display: flex; flex-direction: column; gap: 11px; justify-content: center;
}
/* dobra de canto, como um "cantinho de página" - detalhe bonito */
.ssv-reading-page::before {
  content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0;
  border-style: solid; border-width: 0 16px 16px 0;
  border-color: transparent #f4f1fb transparent transparent;
}
.ssv-reading-line {
  height: 7px; border-radius: 4px;
  background: linear-gradient(90deg, #ece7f6, #f4f1fb);
}
.ssv-reading-scan {
  position: absolute; left: 0; right: 0; height: 30px; top: -30px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--tool-c, #7c3aed) 55%, transparent) 45%,
              color-mix(in srgb, var(--tool-c, #7c3aed) 55%, transparent) 55%, transparent);
  box-shadow: 0 0 18px 3px color-mix(in srgb, var(--tool-c, #7c3aed) 45%, transparent);
  animation: ssvScan 1.9s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes ssvScan {
  0%   { top: -30px; }
  50%  { top: 136px; }
  100% { top: -30px; }
}
.ssv-reading-label { font-size: 14px; font-weight: 700; color: #5b5170; }
.ssv-dot { display: inline-block; animation: ssvDotPulse 1.4s infinite; opacity: .2; color: var(--tool-c, #7c3aed); font-weight: 800; }
.ssv-dot:nth-child(2) { animation-delay: .2s; }
.ssv-dot:nth-child(3) { animation-delay: .4s; }
@keyframes ssvDotPulse { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ssv-reading-scan, .ssv-dot, .ssv-reading.show { animation: none; }
}

/* ============================================================
   Recortar PDF - seletor visual de área (arrastar retângulo),
   estilo iLovePDF.
   ============================================================ */
.crop-mode-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.crop-mode-btn {
  border: 1.5px solid #e6e1f0; background: #fff; color: #4b4466;
  border-radius: 999px; padding: 8px 16px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.crop-mode-btn:hover { border-color: #c9bdf0; }
.crop-mode-btn.active { background: #1e1033; border-color: #1e1033; color: #fff; }

.crop-page-nav {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.crop-page-arrow {
  width: 32px; height: 32px; border-radius: 999px; border: 1px solid #e6e1f0;
  background: #fff; font-size: 18px; cursor: pointer; color: #4b4466;
  display: flex; align-items: center; justify-content: center;
}
.crop-page-arrow:hover { border-color: #c9bdf0; }
.crop-page-arrow:disabled { opacity: .4; cursor: default; }

.crop-canvas-wrap {
  position: relative; display: inline-block; max-width: 100%;
  border-radius: 10px; overflow: hidden; background: #f4f1fb;
  box-shadow: 0 10px 30px rgba(60,20,120,.12); line-height: 0;
}
.crop-canvas-wrap img { display: block; max-width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.crop-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: #f4f1fb; color: #7c3aed; font-size: 13.5px; font-weight: 600;
}
.crop-loading.hidden { display: none; }

.crop-rect {
  position: absolute; border: 2px solid #7c3aed; background: rgba(124,58,237,.12);
  box-shadow: 0 0 0 4000px rgba(30,16,51,.35); cursor: move; touch-action: none;
}
.crop-handle {
  position: absolute; width: 16px; height: 16px; background: #fff; border: 2px solid #7c3aed;
  border-radius: 50%; touch-action: none;
}
.crop-handle[data-h="nw"] { top: -9px; left: -9px; cursor: nwse-resize; }
.crop-handle[data-h="ne"] { top: -9px; right: -9px; cursor: nesw-resize; }
.crop-handle[data-h="sw"] { bottom: -9px; left: -9px; cursor: nesw-resize; }
.crop-handle[data-h="se"] { bottom: -9px; right: -9px; cursor: nwse-resize; }

/* ============================================================
   Logomarca animada SSV PDF PRO (ícone "fita de transformação")
   - usada no cabeçalho (site inteiro), na home e no splash do
   programa Desktop. Duas variantes:
     .ssv-logo-anim          -> sempre "viva" (brilho fluindo +
                                 pontos pulsando), sem repetir a
                                 introdução - usada no cabeçalho,
                                 pra não cansar navegando entre paginas.
     .ssv-logo-anim.reveal   -> a introdução completa (selo aparece
                                 + traço se desenha sozinho + só
                                 então liga o brilho) - reservada para
                                 momentos de destaque (home, splash).
   ============================================================ */
.ssv-logo-anim {
  position: relative; display: inline-block;
  animation: ssvLogoGlow 3s ease-in-out infinite;
}
.ssv-logo-svg { width: var(--ssv-logo-size, 48px); height: var(--ssv-logo-size, 48px); display: block; overflow: visible; }
.ssv-logo-bg { transform-origin: 110px 110px; }
.ssv-logo-doc, .ssv-logo-fold { transform-origin: 110px 110px; }
.ssv-logo-ribbon-draw { stroke-dashoffset: 0; }
.ssv-logo-ribbon-flow {
  stroke-dasharray: 18 200; stroke-dashoffset: 0; opacity: 1;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.95)) drop-shadow(0 0 14px rgba(196,165,255,.85));
  animation: ssvLogoFlow 2.2s linear infinite;
}
.ssv-logo-dot { transform-origin: center; opacity: .55; animation: ssvLogoDotPulse 2s ease-in-out infinite; }

@keyframes ssvLogoGlow {
  0%, 100% { filter: drop-shadow(0 8px 20px rgba(124,58,237,.35)); }
  50% { filter: drop-shadow(0 8px 34px rgba(124,58,237,.62)); }
}
@keyframes ssvLogoFlow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -218; } }
@keyframes ssvLogoDotPulse { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } }

/* Variante "reveal" (introdução completa) - liga a sequência de entrada:
   fundo aparece -> folha do documento aparece -> o selo/anel de conversão
   se desenha por cima -> brilho ligado. */
.ssv-logo-anim.reveal .ssv-logo-bg {
  opacity: 0; transform: scale(.7);
  animation: ssvLogoPop .6s cubic-bezier(.2,.9,.3,1.2) .1s both;
}
.ssv-logo-anim.reveal .ssv-logo-doc,
.ssv-logo-anim.reveal .ssv-logo-fold {
  opacity: 0; transform: scale(.8);
  animation: ssvLogoDocIn .5s cubic-bezier(.2,.9,.3,1.2) .5s forwards;
}
.ssv-logo-anim.reveal .ssv-logo-fold { animation-delay: .55s; }
.ssv-logo-anim.reveal .ssv-logo-ribbon-draw {
  stroke-dasharray: 115; stroke-dashoffset: 115;
  animation: ssvLogoDraw .8s cubic-bezier(.4,0,.2,1) 1.05s forwards;
}
.ssv-logo-anim.reveal .ssv-logo-ribbon-flow {
  opacity: 0;
  animation: ssvLogoFlowIn .01s 1.9s forwards, ssvLogoFlow 2.2s linear 1.91s infinite;
}
.ssv-logo-anim.reveal .ssv-logo-dot {
  opacity: 0;
  animation: ssvLogoDotPulse 2s ease-in-out 1.95s infinite;
}
@keyframes ssvLogoPop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@keyframes ssvLogoDocIn { to { opacity: .95; transform: scale(1); } }
@keyframes ssvLogoFlowIn { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .ssv-logo-anim, .ssv-logo-bg, .ssv-logo-doc, .ssv-logo-fold, .ssv-logo-ribbon-draw, .ssv-logo-ribbon-flow, .ssv-logo-dot { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; transform: none !important; }
  .ssv-logo-doc, .ssv-logo-fold { opacity: .95 !important; }
}

/* ============================================================
   Marca visual em arquivos com o MESMO NOME escolhidos juntos na mesma
   leva (ex: dois arquivos "relatorio.pdf" no modo Em Lote) - sinal de que
   pode ter sido selecionado o mesmo arquivo duas vezes por engano. O
   aviso de "já usei este arquivo antes" agora é um pop-up de verdade (ver
   #dup-modal-overlay, mesmo estilo do .limit-modal-overlay).
   ============================================================ */
.file-row.file-dup .file-name::after {
  content: "mesmo nome de outro arquivo aqui"; display: block;
  font-size: 11px; font-weight: 700; color: #b45309; margin-top: 2px;
}

/* Evita cliques repetidos e múltiplas tarefas enquanto upload/processamento
   está em andamento. A animação existente permanece na mesma janela. */
.dropzone.ssv-busy {
  pointer-events: none;
  opacity: .58;
  filter: saturate(.75);
}
.btn[aria-busy="true"] {
  cursor: wait;
  opacity: .78;
  pointer-events: none;
}
.btn[aria-busy="true"]::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  animation: ssvButtonSpin .7s linear infinite;
}
@keyframes ssvButtonSpin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------- */
/* Sidebar Admin V6 - organização por contexto e acabamento moderno.       */
/* Apenas apresentação: rotas, permissões e lógica permanecem inalteradas. */
/* ---------------------------------------------------------------------- */
.admin-sidebar {
  width: 286px;
  flex-basis: 286px;
  padding: 18px 14px 14px;
  background:
    radial-gradient(circle at 12% 0%, rgba(124,58,237,.28), transparent 30%),
    linear-gradient(180deg, #17102f 0%, #23113f 55%, #1b1034 100%);
  border-right: 1px solid rgba(196,181,253,.12);
  box-shadow: 18px 0 48px rgba(24,12,49,.14);
  scrollbar-width: thin;
  scrollbar-color: rgba(167,139,250,.32) transparent;
}
.admin-sidebar::-webkit-scrollbar { width: 6px; }
.admin-sidebar::-webkit-scrollbar-thumb { background: rgba(167,139,250,.30); border-radius: 999px; }
.admin-brand {
  margin: 0 3px 8px;
  padding: 9px 10px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.admin-brand-name { font-size: 17px; letter-spacing: -.015em; }
.admin-brand-sub { margin-top: 2px; color: #a78bfa; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.admin-nav { gap: 3px; }
.admin-nav-section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 10px 7px;
  color: rgba(226,232,240,.56);
  font-size: 10px;
  letter-spacing: .09em;
}
.admin-nav-section-label::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, rgba(196,181,253,.22), transparent);
}
.admin-nav-section-label span { white-space: nowrap; }
.admin-nav-section-security::after { background: linear-gradient(90deg, rgba(244,114,182,.38), transparent); }
.admin-nav-link {
  position: relative;
  min-height: 45px;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: rgba(241,245,249,.76);
  font-size: 13px;
  line-height: 1.25;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.admin-nav-link:hover {
  transform: translateX(2px);
  background: rgba(255,255,255,.065);
  border-color: rgba(196,181,253,.10);
}
.admin-nav-link.active {
  background: linear-gradient(90deg, rgba(126,34,206,.92), rgba(109,40,217,.62));
  border-color: rgba(216,180,254,.34);
  box-shadow: 0 10px 24px rgba(88,28,135,.34), inset 0 1px rgba(255,255,255,.10);
}
.admin-nav-link.active::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 99px;
  background: #f472b6;
  box-shadow: 0 0 14px rgba(244,114,182,.9);
}
.admin-nav-ico {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.06);
  font-size: 14px;
  opacity: 1;
  box-shadow: inset 0 1px rgba(255,255,255,.05);
}
.admin-nav-link.active .admin-nav-ico { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.12); }
.admin-nav-text { flex: 1; min-width: 0; }
.admin-nav-badge {
  margin-left: auto;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(239,68,68,.35);
}
.admin-sidebar-footer {
  margin: 18px 3px 4px;
  padding: 12px;
  border: 1px solid rgba(196,181,253,.10);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  box-shadow: inset 0 1px rgba(255,255,255,.06);
}
.admin-sidebar-user-avatar {
  width: 39px;
  height: 39px;
  flex-basis: 39px;
  background: linear-gradient(135deg, #7c3aed, #9333ea);
  box-shadow: 0 8px 18px rgba(124,58,237,.32);
}
.admin-sidebar-user-name { font-size: 13px; }
.admin-sidebar-user-email { margin-top: 2px; }
.admin-sidebar-user-badge {
  display: inline-flex;
  margin-top: 5px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(74,222,128,.35);
  background: rgba(22,163,74,.15);
  color: #86efac;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .06em;
}
.admin-sidebar-user-arrow { color: rgba(255,255,255,.45); font-size: 22px; }
.admin-sidebar-links { gap: 3px; padding: 6px 4px 10px; }
.admin-sidebar-link { min-height: 38px; padding: 8px 10px; font-weight: 600; }
.admin-sidebar-link-ico { width: 22px; text-align: center; font-size: 15px; }
.admin-sidebar-link-danger { color: #fb7185; }
.admin-sidebar-link-danger:hover { color: #fecdd3; background: rgba(225,29,72,.10); }
.admin-sidebar-signature {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 -14px -14px;
  padding: 14px 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(226,232,240,.56);
}
.admin-sidebar-signature-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(139,92,246,.75), rgba(59,130,246,.42));
  color: #fff;
  font-weight: 800;
}
.admin-sidebar-signature strong { display: block; font-size: 10px; letter-spacing: .06em; }
.admin-sidebar-signature small { display: block; margin-top: 2px; font-size: 9px; }
@media (max-width: 1024px) {
  .admin-sidebar { width: 286px; max-width: 88vw; }
}

/* ========================================================================== */
/* SSV PDF Desktop — Light Moderno V7                                         */
/* Camada estritamente visual: não altera rotas, licenciamento ou segurança.  */
/* ========================================================================== */
body.is-desktop {
  --primary: #6657e8;
  --primary-dark: #4f46c8;
  --primary-light: #f0efff;
  --ink: #172033;
  --muted: #728096;
  --bg: #f5f7fb;
  --border: #e7eaf2;
  --shadow: 0 14px 36px rgba(42, 50, 83, .08);
  background:
    radial-gradient(circle at 12% -10%, rgba(108,92,231,.10), transparent 34%),
    linear-gradient(180deg, #fbfcff 0%, #f5f7fb 55%, #f3f5fa 100%);
  min-height: 100vh;
}
body.is-desktop .topbar {
  position: sticky; top: 0; z-index: 900;
  min-height: 68px; padding: 12px 28px;
  color: #20283a; background: rgba(255,255,255,.88);
  border-bottom: 1px solid rgba(221,225,236,.9);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 7px 24px rgba(25,31,55,.05);
}
body.is-desktop .brand-name { color:#20283a; font-size:16px; }
body.is-desktop .brand-tag { color:#8490a4; border-left-color:#e1e5ed; }
body.is-desktop .status-pill { color:#536076; background:#f7f8fc; border-color:#e5e8f0; }
body.is-desktop .account-btn { background:#f6f7fb; border-color:#e3e6ef; }
body.is-desktop .account-btn-label { color:#39445a; }
body.is-desktop .account-btn-chevron { color:#8b95a8; }
body.is-desktop .btn-home-pill { background:#f5f6fa; color:#4b566c; border-color:#e2e6ee; }
body.is-desktop main.container { width:min(1380px, calc(100% - 48px)); max-width:none; padding:30px 0 42px; }
body.is-desktop .footer { display:none; }

.ssv-app-intro { position:fixed; inset:0; z-index:999999; display:grid; place-items:center; background:#f8f9fd; pointer-events:none; animation:ssvIntroAway .72s ease .62s forwards; }
.ssv-app-intro-mark { width:72px; height:72px; border-radius:22px; display:grid; place-items:center; color:#fff; font-size:38px; font-weight:800; background:linear-gradient(145deg,#8b7df5,#5145d8); box-shadow:0 22px 55px rgba(84,70,220,.30); animation:ssvIntroMark .82s cubic-bezier(.2,.85,.2,1); }
.ssv-app-intro-ring { position:absolute; width:102px; height:102px; border:2px solid rgba(101,87,232,.16); border-radius:30px; animation:ssvIntroRing 1s ease-out; }
@keyframes ssvIntroMark { 0%{opacity:0;transform:translateY(16px) scale(.82) rotate(-4deg)} 65%{opacity:1;transform:translateY(0) scale(1.06)} 100%{transform:scale(1)} }
@keyframes ssvIntroRing { from{opacity:.9;transform:scale(.65)} to{opacity:0;transform:scale(1.4)} }
@keyframes ssvIntroAway { to{opacity:0;visibility:hidden} }

.desktop-modern-shell { animation:ssvPageIn .42s ease both; }
@keyframes ssvPageIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.desktop-hero { display:flex; justify-content:space-between; align-items:flex-end; gap:26px; margin:2px 0 22px; }
.desktop-eyebrow { display:block; margin-bottom:8px; color:#6c5ce7; font-size:11px; font-weight:800; letter-spacing:.14em; }
.desktop-hero h1 { margin:0; font-size:clamp(29px,3vw,43px); letter-spacing:-.035em; color:#172033; }
.desktop-hero p { margin:9px 0 0; color:#788499; font-size:15px; }
.desktop-search { width:min(390px,36vw); height:48px; display:flex; align-items:center; gap:10px; padding:0 14px; background:#fff; border:1px solid #e2e6ef; border-radius:14px; box-shadow:0 9px 25px rgba(40,48,76,.07); transition:.2s ease; }
.desktop-search:focus-within { border-color:#8b7df5; box-shadow:0 0 0 4px rgba(108,92,231,.10),0 12px 30px rgba(40,48,76,.08); }
.desktop-search svg { width:20px; fill:none; stroke:#7a8598; stroke-width:1.8; }
.desktop-search input { flex:1; border:0; outline:0; background:transparent; color:#252d3f; font-size:14px; }
.desktop-search kbd { color:#9099aa; background:#f2f4f8; border:1px solid #e4e7ee; border-radius:6px; padding:3px 7px; font:11px inherit; }
.desktop-quick-upload { position:relative; overflow:hidden; min-height:92px; display:flex; align-items:center; gap:16px; padding:20px 24px; margin-bottom:26px; color:#313a52; background:linear-gradient(110deg,#fff,#faf9ff); border:1px solid #e7e7f3; border-radius:20px; box-shadow:var(--shadow); }
.desktop-quick-upload::after { content:""; position:absolute; right:-30px; top:-60px; width:210px; height:210px; background:radial-gradient(circle,rgba(109,92,231,.15),transparent 65%); }
.desktop-quick-icon { width:52px;height:52px;display:grid;place-items:center;border-radius:16px;color:#fff;font-weight:800;font-size:24px;background:linear-gradient(145deg,#8b7df5,#584bd9);box-shadow:0 12px 25px rgba(88,75,217,.22); }
.desktop-quick-upload strong,.desktop-quick-upload span { display:block; }
.desktop-quick-upload strong { font-size:16px; margin-bottom:4px; }
.desktop-quick-upload span { color:#7c8799; font-size:13px; }
.desktop-motion-dots { margin-left:auto; display:flex; gap:6px; padding-right:20px; }
.desktop-motion-dots i { width:7px;height:7px;border-radius:50%;background:#7b6cf0;animation:ssvDots 1.25s infinite ease-in-out; }
.desktop-motion-dots i:nth-child(2){animation-delay:.14s}.desktop-motion-dots i:nth-child(3){animation-delay:.28s}
@keyframes ssvDots { 0%,60%,100%{opacity:.28;transform:translateY(0)} 30%{opacity:1;transform:translateY(-5px)} }
.desktop-tools-hub { padding:0; }
.desktop-section-title { display:flex; justify-content:space-between; align-items:end; margin-bottom:13px; }
.desktop-section-title h2 { margin:0; font-size:20px; color:#20283a; }
.desktop-section-title p { margin:4px 0 0; color:#8a94a6; font-size:13px; }
body.is-desktop .desktop-cat-tabs { justify-content:flex-start; gap:8px; margin:0 0 18px; padding-bottom:2px; overflow:auto; }
body.is-desktop .desktop-cat-tabs .cat-tab { min-height:38px; padding:8px 13px; background:#fff; border:1px solid #e4e7ef; color:#68758a; box-shadow:none; }
body.is-desktop .desktop-cat-tabs .cat-tab.active { color:#584bd6; background:#f1efff; border-color:#d9d4ff; box-shadow:0 7px 18px rgba(88,75,214,.10); }
body.is-desktop .desktop-apps-grid { grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }
body.is-desktop .desktop-apps-grid .app-card { min-height:176px; padding:20px; border:1px solid #e8eaf1; border-radius:18px; background:rgba(255,255,255,.94); box-shadow:0 8px 24px rgba(35,43,70,.055); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; animation:ssvCardIn .38s ease both; }
body.is-desktop .desktop-apps-grid .app-card:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--c) 32%,#e7e9f0); box-shadow:0 18px 38px rgba(35,43,70,.11); }
@keyframes ssvCardIn { from{opacity:0;transform:translateY(9px)} to{opacity:1;transform:none} }
body.is-desktop .desktop-apps-grid .app-card-ico { width:46px;height:46px;border-radius:14px;background:color-mix(in srgb,var(--c) 11%,white); }
body.is-desktop .desktop-apps-grid h3 { margin-top:15px; font-size:15px; color:#2d3548; }
body.is-desktop .desktop-apps-grid p { color:#8490a3; line-height:1.48; }
body.is-desktop .desktop-apps-grid .app-card-go { color:#6254df; font-weight:700; }
.desktop-status-grid { display:grid; grid-template-columns:1fr 1.25fr 1fr; gap:14px; margin-top:24px; }
.desktop-status-card { min-height:112px; display:flex; align-items:center; gap:14px; padding:20px; background:#fff; border:1px solid #e7eaf1; border-radius:18px; box-shadow:0 8px 24px rgba(35,43,70,.055); }
.desktop-status-icon { width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:13px;font-weight:800; }
.desktop-status-icon.is-green{color:#168757;background:#e9f8f1}.desktop-status-icon.is-blue{color:#3f69d8;background:#edf2ff}.desktop-status-icon.is-purple{color:#7157d9;background:#f0edff}
.desktop-status-card span,.desktop-status-card strong,.desktop-status-card small { display:block; }
.desktop-status-card span { color:#8993a5;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em; }
.desktop-status-card strong { margin-top:4px;color:#30384b;font-size:14px; }.desktop-status-card small{margin-top:3px;color:#8a94a6;font-size:11px}.desktop-status-card>a{margin-left:auto;color:#6557df;font-size:12px;font-weight:700;text-decoration:none}.desktop-status-grow{flex:1}.desktop-meter{height:5px;margin-top:11px;background:#edf0f5;border-radius:999px;overflow:hidden}.desktop-meter i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#6c5ce7,#8b7df5)}

/* Ferramentas: cards claros, dropzone moderna e animação leve do S. */
body.is-desktop .btn-back-tools { display:inline-flex; align-items:center; margin-bottom:15px; color:#657086; }
body.is-desktop main>.card { border:1px solid #e5e8ef; border-radius:22px; box-shadow:0 16px 45px rgba(34,42,68,.075); padding:28px; background:rgba(255,255,255,.96); animation:ssvPageIn .38s ease both; }
body.is-desktop .tool-page-head h1 { letter-spacing:-.025em; color:#20283a; }
body.is-desktop .step { padding:22px; border:1px solid #e7e9f1; border-radius:18px; background:#fbfcff; }
body.is-desktop .dropzone { position:relative; border:1.5px dashed #cfd5e2; border-radius:18px; background:linear-gradient(180deg,#fff,#f8f9fd); transition:.2s ease; }
body.is-desktop .dropzone:hover,body.is-desktop .dropzone.dragover { border-color:#7668eb;background:#f6f4ff;box-shadow:0 0 0 5px rgba(108,92,231,.08);transform:translateY(-1px); }
body.is-desktop .dropzone .dz-icon { width:58px;height:58px;margin:0 auto 12px;display:grid;place-items:center;border-radius:18px;background:#efedff; }
body.is-desktop .ssv-reading-page::before { content:"S"; position:absolute; inset:0; display:grid; place-items:center; color:#6c5ce7; font-size:24px; font-weight:800; opacity:.18; }
body.is-desktop .btn { border-radius:11px; transition:transform .16s ease,box-shadow .16s ease,background .16s ease; }
body.is-desktop .btn:hover { transform:translateY(-1px); }
body.is-desktop .btn-primary { background:linear-gradient(135deg,#6c5ce7,#5b4bd9); box-shadow:0 9px 20px rgba(91,75,217,.18); }

@media (max-width:900px){.desktop-hero{align-items:stretch;flex-direction:column}.desktop-search{width:100%}.desktop-status-grid{grid-template-columns:1fr}.desktop-motion-dots{display:none}}
@media (prefers-reduced-motion:reduce){.ssv-app-intro,.ssv-app-intro-mark,.ssv-app-intro-ring,.desktop-modern-shell,.app-card,.desktop-motion-dots i{animation:none!important}.ssv-app-intro{display:none}.app-card,.btn,.dropzone{transition:none!important}}

/* ============================================================
   V8 - Navegação instantânea e processamento sem janelas externas
   ============================================================ */
.ssv-fast-nav {
  position:fixed; inset:0; z-index:100000; display:grid; place-items:center;
  background:rgba(248,250,255,.72); backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .12s ease,visibility .12s ease;
}
.ssv-fast-nav.show { opacity:1; visibility:visible; pointer-events:auto; }
.ssv-fast-nav-card {
  width:min(390px,calc(100vw - 36px)); padding:22px 24px 20px;
  display:grid; grid-template-columns:54px 1fr; gap:15px; align-items:center;
  background:rgba(255,255,255,.96); border:1px solid #e4e8f2; border-radius:22px;
  box-shadow:0 22px 65px rgba(44,55,96,.16); transform:translateY(5px) scale(.985);
  transition:transform .14s ease;
}
.ssv-fast-nav.show .ssv-fast-nav-card { transform:none; }
.ssv-fast-nav-mark {
  width:54px;height:54px;border-radius:17px;display:grid;place-items:center;
  color:#fff;font-size:25px;font-weight:850;letter-spacing:-.04em;
  background:linear-gradient(145deg,#8d7cff,#4f7df3);
  box-shadow:0 12px 25px rgba(92,82,224,.27);
  animation:ssvFastMark 1s ease-in-out infinite alternate;
}
@keyframes ssvFastMark { to { transform:translateY(-2px); box-shadow:0 15px 30px rgba(92,82,224,.34); } }
.ssv-fast-nav-copy strong { display:block;color:#273047;font-size:15px; }
.ssv-fast-nav-copy span { display:block;margin-top:4px;color:#8490a3;font-size:12px; }
.ssv-fast-nav-line { grid-column:1/-1;height:4px;border-radius:999px;background:#edf0f7;overflow:hidden; }
.ssv-fast-nav-line i { display:block;width:42%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#8172ef,#4f7df3);animation:ssvFastLine .85s ease-in-out infinite; }
@keyframes ssvFastLine { from{transform:translateX(-110%)} to{transform:translateX(340%)} }
html.ssv-is-navigating main { opacity:.82; transition:opacity .1s ease; }

/* Animação leve do S durante importação e conversão. */
body.is-desktop .ssv-reading { padding:24px 0 10px; gap:10px; }
body.is-desktop .ssv-reading-page {
  width:92px;height:92px;padding:0;border-radius:28px;
  background:linear-gradient(145deg,#ffffff,#f0f2ff);
  border:1px solid #dfe4f2;box-shadow:0 18px 42px rgba(70,78,132,.14);
  display:grid;place-items:center;overflow:visible;
}
body.is-desktop .ssv-reading-page::before {
  content:"S";position:relative;inset:auto;width:58px;height:58px;
  display:grid;place-items:center;border-radius:19px;color:#fff;font-size:28px;font-weight:850;opacity:1;
  background:linear-gradient(145deg,#8d7cff,#4f7df3);
  box-shadow:0 11px 24px rgba(91,84,220,.27);
  animation:ssvWorkS 1.15s ease-in-out infinite;
}
body.is-desktop .ssv-reading-page::after {
  content:"";position:absolute;inset:-7px;border-radius:34px;border:2px solid transparent;
  border-top-color:var(--tool-c,#6c5ce7);border-right-color:color-mix(in srgb,var(--tool-c,#6c5ce7) 36%,transparent);
  animation:ssvWorkRing 1s linear infinite;
}
body.is-desktop .ssv-reading-line { display:none; }
body.is-desktop .ssv-reading-scan {
  left:50%;right:auto;top:auto;bottom:-15px;width:54px;height:5px;transform:translateX(-50%);
  border-radius:999px;background:linear-gradient(90deg,transparent,var(--tool-c,#6c5ce7),transparent);
  box-shadow:0 0 15px color-mix(in srgb,var(--tool-c,#6c5ce7) 45%,transparent);
  animation:ssvWorkGlow 1.15s ease-in-out infinite;
}
@keyframes ssvWorkS { 0%,100%{transform:scale(.96)} 50%{transform:scale(1.04)} }
@keyframes ssvWorkRing { to{transform:rotate(360deg)} }
@keyframes ssvWorkGlow { 0%,100%{opacity:.35;width:34px} 50%{opacity:1;width:66px} }
.ssv-reading-sub { color:#98a1b2;font-size:11.5px;text-align:center; }
@media (prefers-reduced-motion:reduce){.ssv-fast-nav-mark,.ssv-fast-nav-line i,body.is-desktop .ssv-reading-page::before,body.is-desktop .ssv-reading-page::after,body.is-desktop .ssv-reading-scan{animation:none!important}}

/* ========================================================================== 
   SSV PDF Desktop — V9 Premium (identidade visual do website)
   ========================================================================== */
:root {
  --ssv-site-purple:#7c3aed;
  --ssv-site-purple-dark:#5b21b6;
  --ssv-site-purple-soft:#f3e8ff;
  --ssv-site-ink:#140f23;
  --ssv-site-muted:#716a7d;
  --ssv-site-surface:#ffffff;
  --ssv-site-bg:#faf8ff;
}

/* Loader premium oficial: dois anéis, pulso e halo. */
.ssv-premium-loader,.ssv-fast-nav-loader,.ssv-login-loader{position:relative;display:grid;place-items:center;isolation:isolate}
.ssv-premium-halo,.ssv-premium-ring{position:absolute;border-radius:50%;pointer-events:none}
.ssv-premium-halo{inset:14%;background:radial-gradient(circle,rgba(124,58,237,.27),rgba(157,107,255,.10) 46%,transparent 72%);filter:blur(9px);animation:ssvPremiumHalo 1.65s ease-in-out infinite}
.ssv-premium-ring{inset:0;border:2.5px solid transparent}
.ssv-premium-ring-one{border-top-color:#7c3aed;border-right-color:#9d6bff;border-bottom-color:rgba(124,58,237,.13);animation:ssvPremiumSpin 1.75s linear infinite;box-shadow:0 0 17px rgba(124,58,237,.13)}
.ssv-premium-ring-two{inset:11%;border-bottom-color:#5b21b6;border-left-color:rgba(157,107,255,.55);animation:ssvPremiumSpinBack 2.45s linear infinite}
.ssv-premium-logo{position:relative;z-index:2;display:grid;place-items:center;animation:ssvPremiumFloat 1.55s ease-in-out infinite;filter:drop-shadow(0 10px 17px rgba(91,33,182,.20))}
@keyframes ssvPremiumSpin{to{transform:rotate(360deg)}}
@keyframes ssvPremiumSpinBack{to{transform:rotate(-360deg)}}
@keyframes ssvPremiumHalo{0%,100%{opacity:.48;transform:scale(.91)}50%{opacity:1;transform:scale(1.08)}}
@keyframes ssvPremiumFloat{0%,100%{transform:translateY(0) scale(.965)}50%{transform:translateY(-3px) scale(1)}}

/* Abertura do Desktop com a marca, sem o antigo S isolado. */
body.is-desktop .ssv-app-intro{width:126px;height:126px;border-radius:38px;background:rgba(255,255,255,.96);border:1px solid #eadfff;box-shadow:0 26px 70px rgba(91,33,182,.20)}
body.is-desktop .ssv-app-intro .ssv-premium-ring{inset:10px}
body.is-desktop .ssv-app-intro .ssv-premium-ring-two{inset:23px}
body.is-desktop .ssv-app-intro-mark,body.is-desktop .ssv-app-intro-ring{display:none!important}

/* Home / cards alinhados ao website: roxo principal, superfícies brancas. */
body.is-desktop{background:radial-gradient(circle at 10% 0%,#fff 0,#fbf8ff 34%,#f7f5fc 100%);color:var(--ssv-site-ink)}
body.is-desktop .desktop-eyebrow{color:var(--ssv-site-purple)}
body.is-desktop .desktop-hero h1,body.is-desktop .desktop-section-title h2{color:var(--ssv-site-ink)}
body.is-desktop .desktop-search:focus-within{border-color:#b99af8;box-shadow:0 0 0 4px rgba(124,58,237,.09)}
body.is-desktop .desktop-quick-upload{border-color:#e8dcfb;background:linear-gradient(100deg,#fff 0%,#fbf7ff 62%,#f3e8ff 100%)}
.desktop-quick-logo{background:transparent!important;box-shadow:none!important;width:56px!important;height:56px!important}
body.is-desktop .desktop-cat-tabs .cat-tab.active{color:#5b21b6;background:#f3e8ff;border-color:#d8b4fe;box-shadow:0 7px 18px rgba(124,58,237,.10)}
body.is-desktop .desktop-apps-grid .app-card{border-color:#ece7f2;box-shadow:0 9px 28px rgba(38,24,61,.055)}
body.is-desktop .desktop-apps-grid .app-card:hover{transform:translateY(-5px);border-color:#cdb6f7;box-shadow:0 20px 44px rgba(91,33,182,.12)}
body.is-desktop .desktop-apps-grid .app-card-go{color:#7c3aed}
body.is-desktop .desktop-meter i,body.is-desktop .btn-primary{background:linear-gradient(135deg,#9d6bff 0%,#7c3aed 55%,#5b21b6 100%)}
body.is-desktop .btn-primary{box-shadow:0 10px 24px rgba(91,33,182,.22)}
body.is-desktop .dropzone:hover,body.is-desktop .dropzone.dragover{border-color:#9d6bff;background:#fbf7ff;box-shadow:0 0 0 5px rgba(124,58,237,.08)}

/* Loader de importação, prévias e conversão — substitui o S antigo. */
body.is-desktop .ssv-reading{padding:22px 0 12px;gap:9px}
body.is-desktop .ssv-reading-page{width:116px;height:116px;border-radius:36px;background:rgba(255,255,255,.97);border:1px solid #e8dcfb;box-shadow:0 20px 48px rgba(91,33,182,.14);overflow:visible;padding:15px}
body.is-desktop .ssv-reading-page::before,body.is-desktop .ssv-reading-page::after,body.is-desktop .ssv-reading-scan,body.is-desktop .ssv-reading-line{display:none!important;content:none!important}
body.is-desktop .ssv-reading-label{color:#2d1f3f;font-weight:800}
body.is-desktop .ssv-reading-sub{color:#81788e;font-size:12px}

/* Retorno para Aplicativos: resposta instantânea, loader menor e elegante. */
.ssv-fast-nav{background:rgba(250,248,255,.68);backdrop-filter:blur(9px)}
.ssv-fast-nav-card.ssv-fast-nav-premium{grid-template-columns:72px 1fr;padding:18px 22px 17px;border-color:#e8dcfb;box-shadow:0 22px 62px rgba(91,33,182,.16)}
.ssv-fast-nav-loader{width:68px;height:68px}
.ssv-fast-nav-loader .ssv-premium-ring{inset:2px}.ssv-fast-nav-loader .ssv-premium-ring-two{inset:11px}
.ssv-fast-nav-mark{display:none!important}
.ssv-fast-nav-copy strong{color:#2b1d3d}.ssv-fast-nav-copy span{color:#81788e}
.ssv-fast-nav-line i{background:linear-gradient(90deg,#9d6bff,#7c3aed,#5b21b6);animation-duration:.68s}

/* Login completo nas cores e na linguagem visual do website. */
body.is-desktop .split-wrap{background:var(--ssv-site-bg)}
body.is-desktop .split-panel{position:relative;overflow:hidden;background:linear-gradient(145deg,#2b1247 0%,#5b21b6 54%,#7c3aed 100%)}
body.is-desktop .split-panel::before{content:"";position:absolute;width:390px;height:390px;right:-150px;top:-150px;border-radius:50%;background:rgba(255,255,255,.09)}
body.is-desktop .split-panel::after{content:"";position:absolute;width:330px;height:330px;left:-160px;bottom:-170px;border-radius:50%;background:rgba(157,107,255,.20)}
body.is-desktop .ssv-login-brand{position:relative;z-index:1;display:block;width:min(390px,82%);text-decoration:none}
body.is-desktop .ssv-login-brand img{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 24px rgba(20,15,35,.25))}
body.is-desktop .panel-hero,body.is-desktop .panel-footer{position:relative;z-index:1}
body.is-desktop .panel-hero h1{color:#fff;letter-spacing:-.03em}
body.is-desktop .panel-hero p,body.is-desktop .benefits,body.is-desktop .panel-footer{color:rgba(255,255,255,.80)}
body.is-desktop .benefits .check{background:rgba(255,255,255,.16);color:#fff}
body.is-desktop .form-side{background:radial-gradient(circle at 85% 10%,#f3e8ff 0,transparent 35%),#fbfaff}
body.is-desktop .ssv-login-card{border:1px solid #e8dcfb;border-radius:28px;box-shadow:0 28px 75px rgba(60,30,95,.14);padding:38px}
body.is-desktop .ssv-login-card h2{color:var(--ssv-site-ink);letter-spacing:-.025em}
body.is-desktop .ssv-login-card input:focus{border-color:#9d6bff;box-shadow:0 0 0 4px rgba(124,58,237,.09)}
.le-overlay{background:rgba(28,13,47,.56)!important;backdrop-filter:blur(8px)}
.le-card.ssv-login-premium-card{border:1px solid #eadfff;border-radius:28px!important;box-shadow:0 28px 80px rgba(52,24,88,.28)!important}
.ssv-login-loader{width:126px;height:126px;margin:0 auto}
.ssv-login-loader .ssv-premium-ring{inset:3px}.ssv-login-loader .ssv-premium-ring-two{inset:16px}
.le-txt{color:#5b21b6!important}.le-sub{color:#81788e!important}

@media (prefers-reduced-motion:reduce){.ssv-premium-halo,.ssv-premium-ring,.ssv-premium-logo{animation:none!important}}

/* Contraste da marca oficial no painel roxo do login. */
body.is-desktop .ssv-login-brand{background:rgba(255,255,255,.96);padding:12px 18px;border-radius:20px;box-shadow:0 16px 36px rgba(20,15,35,.22)}

/* ========================================================================== 
   SSV PDF Desktop — V9.2 Login Premium Compacto
   Ajuste solicitado: menos espaço vazio, marca animada e composição equilibrada.
   ========================================================================== */
@media (min-width: 861px) {
  body.is-desktop:has(.split-wrap) {
    min-height: 100vh;
    overflow: hidden;
    background:
      radial-gradient(circle at 82% 12%, rgba(157,107,255,.13), transparent 26%),
      linear-gradient(145deg,#f8f5ff 0%,#ffffff 52%,#f4efff 100%);
  }

  body.is-desktop:has(.split-wrap) main {
    width: 100%;
    min-height: 100vh;
    padding: 18px;
    display: grid;
    place-items: center;
  }

  body.is-desktop .split-wrap {
    width: min(1220px, calc(100vw - 36px));
    min-height: min(760px, calc(100vh - 36px));
    max-height: calc(100vh - 36px);
    grid-template-columns: minmax(390px, .88fr) minmax(480px, 1.12fr);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(91,33,182,.12);
    border-radius: 34px;
    background: #fff;
    box-shadow: 0 34px 90px rgba(50,24,82,.16);
  }

  body.is-desktop .split-panel {
    min-width: 0;
    padding: clamp(34px, 4.2vw, 58px);
    justify-content: center;
    gap: clamp(36px, 6vh, 70px);
    background:
      radial-gradient(circle at 100% 0%, rgba(255,255,255,.15), transparent 31%),
      radial-gradient(circle at 0% 100%, rgba(196,132,252,.23), transparent 34%),
      linear-gradient(150deg,#24103e 0%,#4c1d95 44%,#6d28d9 72%,#7c3aed 100%);
  }

  body.is-desktop .split-panel::before {
    width: 270px;
    height: 270px;
    right: -100px;
    top: -90px;
    background: rgba(255,255,255,.075);
  }

  body.is-desktop .split-panel::after {
    width: 250px;
    height: 250px;
    left: -115px;
    bottom: -115px;
    background: rgba(167,139,250,.17);
  }

  body.is-desktop .ssv-login-brand {
    width: min(330px, 88%);
    margin: 0 auto;
    padding: 18px 22px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.66);
    border-radius: 26px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 22px 56px rgba(16,7,30,.24);
    transform-origin: center;
    animation: ssvBrandBreath 3.6s ease-in-out infinite;
  }

  body.is-desktop .ssv-login-brand::before {
    content: "";
    position: absolute;
    inset: -45% auto -45% -32%;
    width: 30%;
    transform: skewX(-18deg);
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.76),transparent);
    animation: ssvBrandShine 4.8s ease-in-out infinite;
    pointer-events: none;
  }

  body.is-desktop .ssv-login-brand::after {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(124,58,237,.10);
    border-radius: 20px;
    pointer-events: none;
  }

  body.is-desktop .ssv-login-brand img {
    position: relative;
    z-index: 1;
    width: 100%;
    filter: drop-shadow(0 10px 18px rgba(91,33,182,.16));
    animation: ssvBrandFloat 3.2s ease-in-out infinite;
  }

  body.is-desktop .panel-hero {
    max-width: 440px;
    margin: 0 auto;
  }

  body.is-desktop .panel-hero h1 {
    margin-bottom: 14px;
    font-size: clamp(28px, 2.5vw, 38px);
    line-height: 1.12;
  }

  body.is-desktop .panel-hero p {
    font-size: 14px;
    line-height: 1.65;
  }

  body.is-desktop .benefits {
    margin-top: 24px;
    gap: 12px;
  }

  body.is-desktop .benefits li {
    font-size: 13px;
  }

  body.is-desktop .panel-footer {
    display: none;
  }

  body.is-desktop .form-side {
    min-width: 0;
    padding: clamp(34px, 5vw, 72px);
    background:
      radial-gradient(circle at 100% 0%,rgba(243,232,255,.9),transparent 34%),
      radial-gradient(circle at 0% 100%,rgba(237,233,254,.8),transparent 32%),
      #fcfbff;
  }

  body.is-desktop .ssv-login-card {
    width: min(430px, 100%);
    padding: 34px 36px;
    border-radius: 26px;
    border-color: rgba(124,58,237,.14);
    box-shadow: 0 26px 70px rgba(50,24,82,.13);
    animation: ssvLoginCardIn .55s cubic-bezier(.2,.8,.2,1) both;
  }

  body.is-desktop .ssv-login-card h2 {
    margin-bottom: 4px;
    font-size: 30px !important;
  }

  body.is-desktop .ssv-login-card .desc {
    margin-bottom: 20px;
  }

  body.is-desktop .ssv-login-card form {
    gap: 14px;
  }

  body.is-desktop .ssv-login-card input {
    min-height: 48px;
    border-radius: 12px;
    background: #fbfaff;
  }

  body.is-desktop .ssv-login-card .btn {
    min-height: 48px;
    border-radius: 12px;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
  }

  body.is-desktop .ssv-login-card .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(91,33,182,.26);
  }
}

@media (max-height: 700px) and (min-width: 861px) {
  body.is-desktop .split-wrap { min-height: calc(100vh - 24px); max-height: calc(100vh - 24px); }
  body.is-desktop:has(.split-wrap) main { padding: 12px; }
  body.is-desktop .split-panel { gap: 26px; padding: 30px 38px; }
  body.is-desktop .ssv-login-brand { width: 280px; padding: 12px 18px; }
  body.is-desktop .panel-hero h1 { font-size: 28px; }
  body.is-desktop .benefits { margin-top: 18px; gap: 9px; }
  body.is-desktop .form-side { padding: 24px 42px; }
  body.is-desktop .ssv-login-card { padding: 26px 30px; }
}

@keyframes ssvBrandBreath {
  0%,100% { transform: translateY(0) scale(.985); box-shadow:0 22px 56px rgba(16,7,30,.22); }
  50% { transform: translateY(-5px) scale(1); box-shadow:0 30px 68px rgba(16,7,30,.30); }
}
@keyframes ssvBrandFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes ssvBrandShine {
  0%,58% { left:-36%; opacity:0; }
  68% { opacity:.95; }
  82%,100% { left:116%; opacity:0; }
}
@keyframes ssvLoginCardIn {
  from { opacity:0; transform:translateY(16px) scale(.985); }
  to { opacity:1; transform:none; }
}

@media (prefers-reduced-motion: reduce) {
  body.is-desktop .ssv-login-brand,
  body.is-desktop .ssv-login-brand::before,
  body.is-desktop .ssv-login-brand img,
  body.is-desktop .ssv-login-card { animation:none!important; }
}

/* ========================================================================== 
   SSV PDF Desktop — V9.3 Responsividade Global
   Ocupa a janela do aplicativo, escala de notebook a telas ultrawide/4K e
   elimina grandes áreas vazias sem alterar regras de negócio.
   ========================================================================== */
body.is-desktop {
  --desktop-gutter: clamp(14px, 1.55vw, 42px);
  --desktop-radius: clamp(16px, 1.25vw, 30px);
  --desktop-max-readable: 2200px;
  overflow-x: hidden;
}

body.is-desktop main.container,
body.is-desktop .painel-shell,
body.is-desktop .site-section {
  width: calc(100% - (var(--desktop-gutter) * 2));
  max-width: var(--desktop-max-readable);
  margin-inline: auto;
  padding-inline: 0;
}

/* Login: tela inteira, sem “ilha” pequena no centro. */
@media (min-width: 861px) {
  body.is-desktop:has(.split-wrap) {
    overflow: hidden;
  }
  body.is-desktop:has(.split-wrap) main {
    width: 100%;
    min-height: 100vh;
    padding: 0;
    display: block;
  }
  body.is-desktop .split-wrap {
    width: 100%;
    min-height: 100vh;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    grid-template-columns: minmax(420px, 44%) minmax(520px, 56%);
  }
  body.is-desktop .split-panel {
    min-height: 100vh;
    padding: clamp(34px, 4.2vw, 92px);
    justify-content: center;
    gap: clamp(26px, 4.5vh, 64px);
  }
  body.is-desktop .form-side {
    min-height: 100vh;
    padding: clamp(28px, 5vw, 110px);
    display: grid;
    place-items: center;
  }
  body.is-desktop .ssv-login-brand {
    width: clamp(270px, 25vw, 480px);
    max-width: 88%;
  }
  body.is-desktop .panel-hero {
    width: min(100%, 620px);
    max-width: none;
  }
  body.is-desktop .panel-hero h1 {
    font-size: clamp(30px, 2.25vw, 58px);
  }
  body.is-desktop .panel-hero p,
  body.is-desktop .benefits li {
    font-size: clamp(13px, .85vw, 19px);
  }
  body.is-desktop .ssv-login-card {
    width: min(100%, clamp(410px, 31vw, 620px));
    max-width: none;
    margin: 0;
    padding: clamp(28px, 2.5vw, 54px);
  }
  body.is-desktop .ssv-login-card h2 {
    font-size: clamp(28px, 1.8vw, 42px) !important;
  }
  body.is-desktop .ssv-login-card input,
  body.is-desktop .ssv-login-card .btn {
    min-height: clamp(48px, 3.15vw, 62px);
    font-size: clamp(14px, .85vw, 18px);
  }
}

/* Notebook 15”: mantém tudo visível sem rolagem desnecessária. */
@media (min-width: 861px) and (max-height: 780px) {
  body.is-desktop .split-panel { padding: 24px clamp(30px, 4vw, 60px); gap: 18px; }
  body.is-desktop .ssv-login-brand { width: clamp(240px, 22vw, 330px); padding: 11px 16px; }
  body.is-desktop .panel-hero h1 { font-size: clamp(26px, 2.1vw, 38px); margin-bottom: 8px; }
  body.is-desktop .panel-hero p { line-height: 1.48; }
  body.is-desktop .benefits { margin-top: 14px; gap: 7px; }
  body.is-desktop .form-side { padding: 20px clamp(32px, 4vw, 70px); }
  body.is-desktop .ssv-login-card { padding: 24px 30px; }
  body.is-desktop .ssv-login-card .desc { margin-bottom: 12px; }
}

/* Telas grandes, 4K e painéis de apresentação: usa o espaço sem esticar textos. */
@media (min-width: 2200px) {
  body.is-desktop .split-wrap { grid-template-columns: 46% 54%; }
  body.is-desktop .split-panel { padding-inline: clamp(90px, 6vw, 180px); }
  body.is-desktop .form-side { padding-inline: clamp(100px, 8vw, 230px); }
  body.is-desktop main.container { max-width: 2200px; }
  body.is-desktop .desktop-apps-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

/* Grade e páginas de ferramentas responsivas em todo o Desktop. */
body.is-desktop .desktop-modern-shell,
body.is-desktop .desktop-tools-hub,
body.is-desktop main > .card,
body.is-desktop .tool-shell,
body.is-desktop .painel-shell {
  width: 100%;
  min-width: 0;
}
body.is-desktop .desktop-apps-grid,
body.is-desktop .apps-grid {
  grid-template-columns: repeat(auto-fit, minmax(clamp(190px, 16vw, 300px), 1fr));
  gap: clamp(12px, 1.2vw, 24px);
}
body.is-desktop .desktop-apps-grid .app-card {
  min-height: clamp(164px, 12vw, 230px);
  padding: clamp(18px, 1.45vw, 30px);
}
body.is-desktop .desktop-status-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.15vw, 22px);
}
body.is-desktop main > .card {
  padding: clamp(20px, 2vw, 42px);
}
body.is-desktop .step {
  padding: clamp(16px, 1.5vw, 30px);
}

@media (max-width: 1100px) {
  body.is-desktop .desktop-status-grid { grid-template-columns: 1fr; }
  body.is-desktop .desktop-apps-grid,
  body.is-desktop .apps-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
@media (max-width: 860px) {
  body.is-desktop .split-wrap { min-height: 100vh; }
  body.is-desktop .form-side { min-height: 100vh; padding: 22px; }
  body.is-desktop .ssv-login-card { width: min(100%, 520px); margin: 0; }
}

/* Feedback visual rápido: anima, mas não segura a navegação. */
.ssv-app-intro { animation-duration: .18s; animation-delay: .12s; }
.ssv-app-intro-mark { animation-duration: .28s; }
.ssv-app-intro-ring { animation-duration: .32s; }
.ssv-fast-nav { transition-duration: .06s; }
.ssv-fast-nav-card { transition-duration: .06s; }

/* ========================================================================== */
/* SSV PDF Desktop V9.5 — correção estrutural responsiva definitiva            */
/* Esta camada substitui as regras Desktop conflitantes acumuladas nas V7-V9. */
/* ========================================================================== */
body.is-desktop,
body.is-desktop * { box-sizing: border-box; }
html:has(body.is-desktop), body.is-desktop { width: 100%; min-width: 0; min-height: 100%; overflow-x: hidden; }
body.is-desktop { margin: 0; font-size: clamp(13px, .18vw + 12px, 16px); }

/* Cabeçalho compacto: uma faixa útil, sem altura sobrando. */
body.is-desktop .topbar {
  position: sticky;
  top: 0;
  z-index: 900;
  width: 100%;
  min-height: 56px;
  padding: clamp(8px, .65vw, 12px) clamp(14px, 1.5vw, 30px);
  display: grid;
  grid-template-columns: minmax(240px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 12px 20px;
}
body.is-desktop .topbar-left,
body.is-desktop .session-info { min-width: 0; }
body.is-desktop .topbar-left { gap: 10px; flex-wrap: nowrap; }
body.is-desktop .brand { min-width: 0; flex: 0 1 auto; }
body.is-desktop .brand svg { width: 34px !important; height: 34px !important; flex: 0 0 34px; }
body.is-desktop .brand-name { white-space: nowrap; }
body.is-desktop .brand-tag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.is-desktop .session-info {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}
body.is-desktop .status-pill,
body.is-desktop .account-btn,
body.is-desktop .btn-home-pill,
body.is-desktop .topbar .btn-small {
  min-height: 34px;
  padding: 6px 10px;
  line-height: 1.25;
  font-size: clamp(11px, .12vw + 10px, 13px);
}
body.is-desktop .status-pill { max-width: min(420px, 35vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Shell global: ocupa a janela inteira e só limita em resoluções realmente enormes. */
body.is-desktop main.container {
  width: 100%;
  max-width: 2400px;
  min-width: 0;
  margin: 0 auto;
  padding: clamp(14px, 1.55vw, 34px) clamp(14px, 2vw, 44px) clamp(28px, 3vw, 68px);
}
body.is-desktop main.container > * { min-width: 0; }
body.is-desktop main > .card,
body.is-desktop .desktop-modern-shell,
body.is-desktop .tools-hub { width: 100%; max-width: none; min-width: 0; }

/* A animação inicial do app já existe no splash nativo. Repeti-la em toda rota
   causava sensação de lentidão e cobria a interface após cada navegação. */
body.is-desktop .ssv-app-intro { display: none !important; }

/* Página de aplicativos: densidade ajustável por largura, sem cartões gigantes. */
body.is-desktop .desktop-hero {
  align-items: center;
  margin: 0 0 clamp(14px, 1.2vw, 24px);
  gap: clamp(14px, 2vw, 34px);
}
body.is-desktop .desktop-hero > div:first-child { min-width: 0; }
body.is-desktop .desktop-hero h1 { font-size: clamp(25px, 1.55vw + 13px, 48px); }
body.is-desktop .desktop-search { width: clamp(260px, 28vw, 560px); max-width: 100%; }
body.is-desktop .desktop-quick-upload { min-height: 76px; padding: clamp(14px, 1vw, 21px) clamp(16px, 1.4vw, 28px); margin-bottom: clamp(16px, 1.35vw, 28px); }
body.is-desktop .desktop-apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(190px, 15vw, 280px), 1fr));
  gap: clamp(10px, .9vw, 20px);
  align-items: stretch;
}
body.is-desktop .desktop-apps-grid .app-card {
  min-width: 0;
  min-height: clamp(152px, 11vw, 210px);
  padding: clamp(16px, 1.15vw, 25px);
}
body.is-desktop .desktop-status-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, .9vw, 20px);
  margin-top: clamp(16px, 1.5vw, 30px);
}
body.is-desktop .desktop-status-card { min-width: 0; min-height: 92px; padding: clamp(14px, 1vw, 22px); }

/* Ferramentas: conteúdo horizontalmente fluido e upload proporcional. */
body.is-desktop main > .card {
  padding: clamp(16px, 1.65vw, 36px);
  border-radius: clamp(16px, 1.2vw, 24px);
}
body.is-desktop .tool-page-head { min-width: 0; margin-bottom: clamp(13px, 1.1vw, 22px); }
body.is-desktop .tool-page-head h1 { font-size: clamp(20px, .9vw + 13px, 32px); overflow-wrap: anywhere; }
body.is-desktop .step { width: 100%; min-width: 0; padding: clamp(15px, 1.35vw, 28px); }
body.is-desktop .dropzone { min-height: clamp(180px, 25vh, 360px); display: flex; flex-direction: column; justify-content: center; padding: clamp(22px, 3vw, 58px); }
body.is-desktop .file-list,
body.is-desktop .merge-preview,
body.is-desktop .result-grid,
body.is-desktop .result-card-flex { min-width: 0; max-width: 100%; }
body.is-desktop img, body.is-desktop canvas, body.is-desktop svg { max-width: 100%; }
body.is-desktop input, body.is-desktop select, body.is-desktop textarea { min-width: 0; max-width: 100%; }

/* Login Desktop em tela inteira, equilibrado em qualquer proporção. */
body.is-desktop .split-wrap {
  width: 100%;
  min-height: 100vh;
  grid-template-columns: minmax(330px, 42%) minmax(440px, 58%);
  background: #f8f6fc;
}
body.is-desktop .split-panel {
  min-width: 0;
  padding: clamp(26px, 4vw, 76px);
  justify-content: center;
  gap: clamp(30px, 6vh, 84px);
}
body.is-desktop .split-panel .panel-hero { width: min(100%, 620px); }
body.is-desktop .split-panel .panel-hero h1 { font-size: clamp(28px, 2vw, 48px); }
body.is-desktop .split-panel .panel-hero p { max-width: 580px; font-size: clamp(14px, .35vw + 12px, 18px); }
body.is-desktop .ssv-login-brand img { width: clamp(150px, 13vw, 240px); max-height: 82px; object-fit: contain; }
body.is-desktop .form-side { min-width: 0; padding: clamp(22px, 4vw, 76px); }
body.is-desktop .form-side .card-narrow,
body.is-desktop .ssv-login-card { width: min(100%, 560px); max-width: 560px; padding: clamp(24px, 2.3vw, 44px); }

/* Breakpoints por largura e altura — importantes no Windows com escala 125–175%. */
@media (max-width: 1180px) {
  body.is-desktop .topbar { grid-template-columns: 1fr; gap: 7px; }
  body.is-desktop .session-info { justify-content: flex-start; }
  body.is-desktop .status-pill { max-width: min(560px, 72vw); }
  body.is-desktop .brand-tag { display: none; }
  body.is-desktop .desktop-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  body.is-desktop .topbar { position: relative; }
  body.is-desktop .session-info { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; scrollbar-width: thin; }
  body.is-desktop .status-pill { flex: 0 0 auto; max-width: 62vw; }
  body.is-desktop main.container { padding: 14px 12px 34px; }
  body.is-desktop .desktop-hero { flex-direction: column; align-items: stretch; }
  body.is-desktop .desktop-search { width: 100%; }
  body.is-desktop .desktop-status-grid { grid-template-columns: 1fr; }
  body.is-desktop .desktop-apps-grid { grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); }
  body.is-desktop .split-wrap { grid-template-columns: 1fr; }
  body.is-desktop .split-panel { display: flex; min-height: auto; padding: 24px; gap: 18px; justify-content: flex-start; }
  body.is-desktop .split-panel .benefits, body.is-desktop .split-panel .panel-footer { display: none; }
  body.is-desktop .split-panel .panel-hero h1 { font-size: 25px; margin-bottom: 8px; }
  body.is-desktop .split-panel .panel-hero p { line-height: 1.45; }
  body.is-desktop .form-side { padding: 20px 14px 32px; align-items: flex-start; }
}
@media (max-width: 560px) {
  body.is-desktop .topbar { padding: 8px 10px; }
  body.is-desktop .btn-home-pill { padding-inline: 8px; }
  body.is-desktop .account-btn-label { display: none; }
  body.is-desktop .desktop-apps-grid { grid-template-columns: 1fr; }
  body.is-desktop .desktop-quick-upload { align-items: flex-start; }
  body.is-desktop .desktop-motion-dots { display: none; }
  body.is-desktop .result-card-flex { align-items: stretch; gap: 14px; }
  body.is-desktop .result-card-flex .btn { width: 100%; }
}
@media (max-height: 720px) and (min-width: 861px) {
  body.is-desktop .split-panel { padding-block: 24px; gap: 20px; }
  body.is-desktop .split-panel .benefits { margin-top: 18px; gap: 9px; }
  body.is-desktop .form-side { padding-block: 20px; }
  body.is-desktop .ssv-login-card { padding-block: 22px; }
  body.is-desktop .desktop-quick-upload { min-height: 68px; }
  body.is-desktop .dropzone { min-height: 165px; }
}
@media (min-width: 2200px) {
  body.is-desktop main.container { max-width: 2800px; }
  body.is-desktop .desktop-apps-grid { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
}

/* ==========================================================
   V9.12 - Importação universal: Dropbox, Google Drive, OneDrive
   ========================================================== */
.ssv-cloud-import{margin-top:16px;padding:15px;border:1px solid #e6e0f3;border-radius:16px;background:linear-gradient(180deg,#fff,#fbf9ff)}
.ssv-cloud-divider{display:flex;align-items:center;gap:12px;color:#817796;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
.ssv-cloud-divider::before,.ssv-cloud-divider::after{content:"";height:1px;background:#e8e2f2;flex:1}
.ssv-cloud-actions{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:10px}
.ssv-cloud-btn{min-height:48px;border:1px solid #e2dbea;border-radius:13px;background:#fff;color:#241936;display:flex;align-items:center;justify-content:center;gap:9px;font-weight:800;font-size:14px;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.ssv-cloud-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(36,25,54,.08);border-color:#cfc3e5}
.ssv-cloud-btn:focus-visible{outline:3px solid rgba(124,58,237,.22);outline-offset:2px}
.ssv-cloud-mark{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;color:#fff;font-size:14px;font-weight:900}
.ssv-cloud-dropbox .ssv-cloud-mark{background:#0061ff}
.ssv-cloud-google .ssv-cloud-mark{background:linear-gradient(135deg,#4285f4 0 33%,#34a853 33% 66%,#fbbc04 66%)}
.ssv-cloud-onedrive .ssv-cloud-mark{background:linear-gradient(135deg,#0a6ed1,#25a7e8)}
.ssv-cloud-note{text-align:center;margin:10px 0 0}
.ssv-cloud-modal{max-width:620px}
.ssv-cloud-browser-actions{display:flex;justify-content:space-between;gap:10px;margin-bottom:12px}
.ssv-cloud-file-list{display:flex;flex-direction:column;gap:7px;max-height:420px;overflow:auto;padding-right:3px}
.ssv-cloud-file-row{width:100%;border:1px solid #e7e0f0;border-radius:12px;background:#fff;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:11px 12px;text-align:left;cursor:pointer;color:#2a1d3e}
.ssv-cloud-file-row:hover{background:#faf7ff;border-color:#d7c9eb}
.ssv-cloud-file-icon{font-size:20px}
.ssv-cloud-file-info{min-width:0;display:flex;flex-direction:column;gap:2px}
.ssv-cloud-file-info strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px}
.ssv-cloud-file-info small{color:#817796;font-size:11.5px}
@media (max-width:720px){.ssv-cloud-actions{grid-template-columns:1fr}.ssv-cloud-import{padding:12px}}
@media (prefers-reduced-motion:reduce){.ssv-cloud-btn{transition:none}}

/* V9.22.0 — revisão global de responsividade e consistência visual */
*,*::before,*::after{box-sizing:border-box}html{max-width:100%;overflow-x:hidden}body{max-width:100%;overflow-x:hidden}img,svg,video,canvas{max-width:100%;height:auto}input,select,textarea,button{max-width:100%}
.site-preview-notice{position:sticky;top:0;z-index:40;padding:9px 14px;text-align:center;background:#fff7d6;color:#6b4f00;border-bottom:1px solid #eedb8d;font-size:12px;font-weight:800}
.site-menu-toggle{display:none;align-items:center;gap:5px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.10);color:#fff;border-radius:10px;padding:9px 11px;font-weight:700}.site-menu-toggle span{display:block;width:17px;height:2px;background:currentColor;border-radius:2px}.site-menu-toggle b{margin-left:4px;font-size:12px}
@media(max-width:1180px) and (min-width:1025px){.admin-main{padding:28px 28px 60px;min-width:0}.admin-header{gap:16px}.admin-header>div:last-child{max-width:100%;flex-wrap:wrap}.admin-card{min-width:0}.admin-form-row{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-table-wrap{overflow-x:auto}.admin-table{min-width:760px}}
@media(max-width:1024px){.admin-topbar{display:flex}.admin-main{width:100%;min-width:0}.admin-header{align-items:flex-start;flex-direction:column}.admin-header>div:last-child,.admin-actions,.admin-toolbar{width:100%;justify-content:flex-start;flex-wrap:wrap}.admin-header .btn-admin,.admin-actions .btn-admin{flex:0 1 auto}.admin-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-form-row{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.admin-table{min-width:720px}.modal,.admin-modal,.modal-card{max-width:calc(100vw - 28px)!important}}
@media(max-width:900px){.site-nav{position:relative;gap:14px}.site-menu-toggle{display:inline-flex}.site-nav .nav-links{display:none;position:absolute;left:16px;right:16px;top:calc(100% + 8px);z-index:80;padding:14px;flex-direction:column;align-items:stretch;gap:4px;background:#fff;border:1px solid #e8e1f1;border-radius:16px;box-shadow:0 18px 50px rgba(27,18,43,.25)}.site-nav .nav-links.is-open{display:flex}.site-nav .nav-links a.nav-link{color:#3f3948;padding:10px 12px;border-radius:9px}.site-nav .nav-links a.nav-link:hover{color:#5b21b6;background:#f5f3ff}.site-nav .nav-links .btn{width:100%;justify-content:center;margin-top:4px}.hero-site-inner{padding-left:20px;padding-right:20px}.hero-site-inner h1{font-size:clamp(2rem,7vw,3.4rem);line-height:1.08}.hero-ctas{justify-content:center;gap:10px}.hero-ctas .btn{flex:1 1 210px}.site-section{padding-left:20px!important;padding-right:20px!important}.cat-tabs{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:8px}.cat-tab{flex:0 0 auto;scroll-snap-align:start}.apps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.site-plans-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){body{font-size:15px}.admin-main{padding:14px 10px 42px}.admin-stats-grid,.admin-form-row,.admin-grid-2{grid-template-columns:1fr!important}.admin-header h1{font-size:1.55rem}.admin-header .btn-admin,.admin-actions .btn-admin,.admin-toolbar .btn-admin{flex:1 1 100%;justify-content:center}.admin-card{padding:16px!important;border-radius:14px}.admin-table{min-width:640px}.hero-site{padding-bottom:30px}.site-nav{padding:14px 16px}.hero-site-inner{padding-top:42px}.hero-site-inner h1{font-size:clamp(1.9rem,10vw,2.65rem)}.hero-site-inner p{font-size:1rem}.hero-ctas{flex-direction:column}.hero-ctas .btn{width:100%;flex:0 0 auto}.hero-preview{padding:0 14px}.hp-steps{grid-template-columns:1fr!important}.site-section{padding:54px 16px!important}.section-head h2{font-size:clamp(1.55rem,8vw,2.2rem)}.how-steps,.feature-grid,.site-plans-grid{grid-template-columns:1fr!important}.apps-grid{grid-template-columns:1fr}.app-card{min-height:0}.cat-tabs{margin-left:-2px;margin-right:-2px}.cat-tab{padding:9px 12px;font-size:12px}.site-footer .sf-inner{grid-template-columns:1fr!important}.modal,.admin-modal,.modal-card{width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important;border-radius:16px!important}.modal-body,.admin-modal-body{overflow:auto}.modal-footer,.admin-modal-footer{position:sticky;bottom:0;background:#fff;z-index:2;flex-direction:column}.modal-footer .btn,.admin-modal-footer .btn-admin{width:100%}}
@media(max-width:390px){.admin-main{padding-inline:8px}.site-nav .brand-name{font-size:16px}.site-menu-toggle b{display:none}.site-section{padding-inline:12px!important}.cat-tab{padding-inline:10px}.admin-card{padding:14px!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* ====================================================================== */
/* V9.23.1 — Padronização estrutural da sidebar do Painel Administrativo  */
/* Escopo exclusivo: manter a lateral ocupando toda a altura visível e    */
/* preservar o fundo da coluna lateral em páginas administrativas longas. */
/* ====================================================================== */
@media (min-width: 1025px) {
  .admin-shell {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    background:
      linear-gradient(
        180deg,
        #17102f 0%,
        #23113f 55%,
        #1b1034 100%
      ) left top / 286px 100% no-repeat,
      var(--panel-bg);
  }

  .admin-sidebar {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    z-index: 2;
  }

  .admin-main {
    position: relative;
    z-index: 1;
    min-width: 0;
  }
}

/* ====================================================================== */
/* V9.23.3 — Correção responsiva exclusiva da sidebar administrativa      */
/* Escopo: fixação da lateral no desktop, rolagem somente no menu e        */
/* preservação da gaveta responsiva. Nenhuma regra visual/funcional muda.  */
/* ====================================================================== */

/* Estrutura interna comum ao desktop e à gaveta responsiva. */
.admin-sidebar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.admin-brand,
.admin-sidebar-footer,
.admin-sidebar-links,
.admin-sidebar-signature {
  flex: 0 0 auto;
}

.admin-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(167,139,250,.32) transparent;
}

.admin-nav::-webkit-scrollbar {
  width: 6px;
}

.admin-nav::-webkit-scrollbar-thumb {
  background: rgba(167,139,250,.30);
  border-radius: 999px;
}

/* Desktop/notebook: lateral presa à janela e conteúdo no espaço restante. */
@media (min-width: 1025px) {
  html,
  body.admin-body {
    min-width: 0;
    overflow-x: hidden;
  }

  .admin-shell {
    display: block;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    padding-left: 286px;
    background: var(--panel-bg);
  }

  .admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 286px;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    z-index: 100;
  }

  .admin-main {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-left: 0;
  }
}

/* Celular/tablet: mantém a gaveta existente e evita estouro horizontal. */
@media (max-width: 1024px) {
  html,
  body.admin-body,
  .admin-shell,
  .admin-main {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
  }

  .admin-shell {
    padding-left: 0;
  }

  .admin-sidebar {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
  }
}

/* ====================================================================== */
/* V9.23.4 — Correção estrutural responsiva do layout base administrativo */
/* Escopo exclusivo: largura fluida do conteúdo, grids sem compressão e   */
/* rolagem horizontal restrita ao componente administrativo que exceder.   */
/* ====================================================================== */

.admin-shell,
.admin-main,
.admin-main > *,
.admin-card,
.admin-card-head,
.admin-header,
.admin-header-row,
.admin-stats-grid,
.admin-grid-2,
.admin-form-row,
.admin-toolbar,
.admin-actions {
  min-width: 0;
  max-width: 100%;
}

.admin-main {
  box-sizing: border-box;
  overflow: visible;
}

.admin-main > * {
  width: auto;
}

.admin-stats-grid,
.admin-grid-2,
.admin-form-row {
  grid-auto-columns: minmax(0, 1fr);
}

.admin-stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-card {
  overflow: visible;
}

/* Criado automaticamente pelo layout base para cada tabela administrativa. */
.admin-component-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}

.admin-component-scroll > .admin-table {
  width: 100%;
  min-width: max-content;
}

/* Desktop/notebook: todo o espaço restante pertence ao conteúdo principal. */
@media (min-width: 1025px) {
  .admin-shell {
    width: 100%;
    max-width: none;
  }

  .admin-main {
    width: 100%;
    max-width: none;
    min-width: 0;
  }
}

/* Faixa intermediária de notebooks/janelas menores. */
@media (max-width: 1399px) and (min-width: 1025px) {
  .admin-main {
    padding-left: clamp(22px, 2.2vw, 34px);
    padding-right: clamp(22px, 2.2vw, 34px);
  }

  .admin-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Tablet/celular: a página permanece sem rolagem horizontal global. */
@media (max-width: 1024px) {
  .admin-main,
  .admin-main > *,
  .admin-card {
    width: 100%;
    max-width: 100%;
  }

  /* A rolagem deixa de pertencer ao cartão inteiro e fica só na tabela. */
  .admin-card {
    overflow-x: visible;
  }

  .admin-component-scroll > .admin-table {
    min-width: 720px;
  }
}

@media (max-width: 640px) {
  .admin-stats-grid,
  .admin-grid-2,
  .admin-form-row {
    grid-template-columns: 1fr;
  }

  .admin-component-scroll > .admin-table {
    min-width: 640px;
  }
}