:root{
  --fz-primary:#7A5FA7;
  --fz-accent:#8FCBFF;
  --fz-text:#1a1c22;
  --fz-bg:#F8F9FC;
  --fz-bg-dark:#0B0C10;
  --fz-card:#ffffff;
  --fz-card-dark:#10131A;
  --fz-border:rgba(0,0,0,.08);
  --fz-border-dark:rgba(255,255,255,.10);
}

html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--fz-bg);
  color:var(--fz-text);
  font:400 16px/1.55 Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif
}

/* Container base */
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.section{padding:40px 0}

/* Acessibilidade */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:static; width:auto; height:auto; padding:8px 12px; background:#fff; border:1px solid var(--fz-primary); border-radius:8px
}

/* HERO */
.page-hero{
  margin:24px 0 8px;
  border:1px solid var(--fz-border);
  border-radius:18px;
  overflow:hidden;
}
.page-hero-inner{
  padding:28px 24px 24px;
  background:linear-gradient(180deg, rgba(122,95,167,.18), rgba(122,95,167,0) 40%);
}
.page-hero h1{
  font:600 2rem/1.1 Poppins,Inter,sans-serif;
  margin:0 0 8px
}
.page-hero .subtitle{margin:0;color:#4b4f63}
.badge{
  display:inline-flex;gap:8px;align-items:center;
  background:#fff;border:1px solid var(--fz-border);
  padding:8px 12px;border-radius:999px;font:600 12px/1 Inter;letter-spacing:.02em;margin-top:12px
}

/* Tabs */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}
.tab-btn{
  appearance:none;cursor:pointer;
  border:1px solid var(--fz-border);
  background:#fff;color:#1b1f2a;
  padding:10px 14px;border-radius:10px;
  font:600 14px/1 Inter
}
.tab-btn[aria-selected="true"], .tab-btn:focus{
  outline:2px solid var(--fz-primary);
  border-color:var(--fz-primary)
}

/* Grid principal */
.grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}
@media (max-width:980px){.grid{grid-template-columns:1fr}}

/* Cards */
.card{
  background:var(--fz-card);
  border:1px solid var(--fz-border);
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.06)
}
.card h2{font:600 1.25rem/1.2 Poppins,Inter;margin:0 0 16px;color:inherit}
.card .body{padding:18px}

/* Form */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.form-row-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:720px){.form-row,.form-row-3,.form-row-4{grid-template-columns:1fr}}
label{font:600 13px/1 Inter;margin:6px 0;display:block}
input[type="text"], input[type="number"], input[type="email"], input[type="url"], textarea, select{
  width:100%;box-sizing:border-box;
  border:1px solid var(--fz-border);
  background:#fff;color:#1b1f2a;
  padding:10px 12px;border-radius:10px;
  font:500 14px/1.3 Inter
}
textarea{min-height:90px;resize:vertical}

/* Actions */
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.btn{
  appearance:none;cursor:pointer;border-radius:10px;
  border:1px solid var(--fz-border);
  padding:10px 14px;font:600 14px/1 Inter;background:#fff
}
.btn.primary{background:var(--fz-primary);border-color:var(--fz-primary);color:#fff}
.btn.outline{background:transparent;border-color:var(--fz-primary);color:var(--fz-primary)}
.btn.ghost{background:transparent}
.btn:focus{outline:2px solid var(--fz-primary)}

/* Preview */
.preview-wrap{display:grid;gap:12px}
.preview{
  display:grid;place-items:center;
  background:linear-gradient(180deg, rgba(143,203,255,.24), transparent 70%);
  border-radius:12px;padding:16px;border:1px dashed var(--fz-border)
}
.preview canvas, .preview svg{max-width:100%;height:auto}

.muted{color:#60657a}
.help{font-size:12px;color:#60657a;margin-top:4px}

/* Dropzone */
.dropzone{display:grid;place-items:center;border:1px dashed var(--fz-border);border-radius:10px;padding:14px;text-align:center}

/* Prose */
.prose{line-height:1.7}
.prose h3{font:600 1.05rem/1.2 Poppins,Inter;margin:16px 0 6px}

/* TABS behavior (sem JS): apenas visual; conteúdo real alternado via JS do app */
[role="tabpanel"][hidden]{display:none}

/* Dark mode base — compatível com sua estratégia atual */
html.dark body{background:var(--fz-bg-dark);color:#e8eaf3}
html.dark .page-hero{border-color:var(--fz-border-dark);background:none}
html.dark .page-hero-inner{background:linear-gradient(180deg, rgba(122,95,167,.12), transparent 50%)}
html.dark .badge{background:#0f121a;border-color:var(--fz-border-dark);color:#dfe3f2}
html.dark .tab-btn{background:#121725;border-color:var(--fz-border-dark);color:#e5e9f8}
html.dark .card{background:var(--fz-card-dark);border-color:var(--fz-border-dark);box-shadow:0 10px 30px rgba(0,0,0,.28)}
html.dark input, html.dark textarea, html.dark select{background:#0f1218;border-color:var(--fz-border-dark);color:#dfe3f2}
html.dark .preview{border-color:var(--fz-border-dark)}

/* === LAYOUT PREMIUM PARA GERADOR DE QR ========================== */

/* Grid mais elegante: 40/60 */
.grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px; /* mais respiro */
  align-items: stretch;
}
@media (max-width: 980px){
  .grid { grid-template-columns: 1fr; }
}

/* Cards mais altos e alinhados */
.card {
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}
.card .body { padding: 28px; }
.card h2 { font-size: 1.4rem; margin-bottom: 20px; }

/* Labels e inputs */
label { font:600 0.9rem/1.3 Inter; margin-bottom:6px; }
input, textarea, select {
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 0.95rem;
}

/* Ações principais */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 20px;
}
.btn.primary {
  flex: 1;
  padding: 14px 18px;
  font-size: 1rem;
  border-radius: 12px;
}

/* Área de preview premium */
.preview {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  border-radius: 16px;
  min-height: 420px;
  background: linear-gradient(180deg, rgba(122,95,167,.15), rgba(0,0,0,.1) 100%);
  border: 1px solid var(--fz-border-dark);
  box-shadow: 0 20px 40px rgba(0,0,0,.3);
}
.preview canvas, .preview svg {
  max-width: 100%;
  height: auto;
}

/* Grupo de botões de exportação */
.preview-wrap .actions {
  justify-content: center;
  margin-top: 16px;
}
.preview-wrap .btn {
  min-width: 120px;
  text-align: center;
}

/* Texto auxiliar */
.muted { text-align: center; margin-top: 8px; font-size: 0.85rem; }

/* === PATCH PREMIUM — LAYOUT, RESPIRO E PREVIEW ======================= */

/* 1) Grid com respiro e proporção melhor (40/60) */
.grid{
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;                 /* + respiro */
  align-items: stretch;      /* cards iguais em altura */
}

/* 2) Cards ocupam a altura total; conteúdo em coluna */
.grid > .card,
.grid > article.card,
.grid > aside.card{ display:flex }
.card .body{
  flex:1;
  display:flex;
  flex-direction:column;
  gap: 16px;                 /* espaçamento vertical interno */
  padding: 26px 24px;        /* um pouco mais de ar */
}

/* 3) Títulos + hierarquia */
.card h2{
  font: 600 1.5rem/1.2 Poppins,Inter,sans-serif;
  margin: 0 0 8px;
}

/* 4) Form mais confortável e alinhado */
.form-row, .form-row-3, .form-row-4{ gap: 16px }
label{ font-size: .92rem; margin: 6px 0 }
input[type="text"], input[type="number"], input[type="email"],
input[type="url"], textarea, select{
  padding: 12px 14px;
  border-radius: 12px;
}
input::placeholder, textarea::placeholder{ color:#9096aa }

/* 5) Botões: CTA em destaque, grupo “ancorado” no fim do card esquerdo */
.actions{ gap: 12px }
.card .actions:last-child{ margin-top: auto }  /* empurra pro rodapé do card */
.btn.primary{
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 1rem;
  min-width: 160px;
}

/* 6) Preview: foco visual, tamanho constante e centralizado */
.preview-wrap{ gap: 14px }
.preview{
  justify-content: center; align-items: center;
  padding: 28px;
  border-radius: 16px;
  border: 1px solid var(--fz-border);
  background:
    radial-gradient(900px 600px at 50% -200px, rgba(122,95,167,.18), transparent 60%),
    linear-gradient(180deg, rgba(122,95,167,.10), transparent 80%);
  box-shadow: 0 18px 48px rgba(0,0,0,.22);
}
.preview > #qr-target{
  width: min(520px, 92%);     /* limite visual */
  aspect-ratio: 1 / 1;        /* mantém o quadrado */
  display:grid; place-items:center;
  margin-inline:auto;
}
.preview canvas, .preview svg{
  width: 100%; height: auto;  /* escala suave */
}

/* 7) Botões sob o preview: alinhados e com toque “premium” */
.preview-wrap .actions{ justify-content: center }
.preview-wrap .btn{ min-width: 140px }

/* 8) Ajustes de contraste em dark */
html.dark .preview{ border-color: var(--fz-border-dark) }
html.dark input, html.dark textarea, html.dark select{
  background:#0f1218; border-color:var(--fz-border-dark); color:#e8eaf3;
}

/* 9) Responsivo — mantém respiro em telas menores */
@media (max-width: 980px){
  .grid{ grid-template-columns: 1fr; gap: 28px }
  .preview > #qr-target{ width: min(480px, 100%) }
  .card .body{ padding: 22px }
}

/* ===== Namespace da página QR para vencer o CSS global ===== */
body[data-page="qrcode"] .grid{
  grid-template-columns: 0.85fr 1.15fr !important;
  gap: 48px !important;
  align-items: stretch;
}
@media (max-width: 980px){
  body[data-page="qrcode"] .grid{ grid-template-columns: 1fr !important; gap: 28px !important; }
}

body[data-page="qrcode"] .card{
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}
body[data-page="qrcode"] .card .body{
  padding: 26px 24px; display:flex; flex-direction:column; gap:16px;
}
body[data-page="qrcode"] .card h2{
  font: 600 1.5rem/1.2 Poppins,Inter,sans-serif; margin:0 0 8px;
}

/* Inputs/labels da página */
body[data-page="qrcode"] label{ font-size:.92rem; margin:6px 0 }
body[data-page="qrcode"] input[type="text"],
body[data-page="qrcode"] input[type="number"],
body[data-page="qrcode"] input[type="email"],
body[data-page="qrcode"] input[type="url"],
body[data-page="qrcode"] textarea,
body[data-page="qrcode"] select{
  padding:12px 14px; border-radius:12px; font-size:.95rem;
}

/* CTA ancorado no fim do card esquerdo */
body[data-page="qrcode"] .actions{ gap:12px; margin-top:20px }
body[data-page="qrcode"] article.card .actions:last-child{ margin-top:auto }

/* Preview da página (não deixa o global alterar) */
body[data-page="qrcode"] .preview{
  display:flex; align-items:center; justify-content:center;
  padding:28px; border-radius:16px; min-height:420px;
  border:1px solid var(--fz-border);
  background:
    radial-gradient(900px 600px at 50% -200px, rgba(122,95,167,.18), transparent 60%),
    linear-gradient(180deg, rgba(122,95,167,.10), transparent 80%);
  box-shadow: 0 18px 48px rgba(0,0,0,.22);
}
body[data-page="qrcode"] .preview > #qr-target{
  width:min(520px,92%); aspect-ratio:1/1; display:grid; place-items:center; margin-inline:auto;
}
body[data-page="qrcode"] .preview canvas,
body[data-page="qrcode"] .preview svg{ width:100%; height:auto }

/* Botões sob o preview alinhados */
body[data-page="qrcode"] .preview-wrap .actions{ justify-content:center }
body[data-page="qrcode"] .preview-wrap .btn{ min-width:140px }

/* Dark: borda correta do preview */
html.dark body[data-page="qrcode"] .preview{ border-color: var(--fz-border-dark) }

/* ====== GRID BASE ====== */
#tab-criar .grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;  /* desktop */
  gap:24px;
}

/* ====== MOBILE FIRST ====== */
@media (max-width: 980px){
  #tab-criar .grid{
    grid-template-columns: 1fr;       /* empilha */
    gap:16px;
  }

  /* inputs em 1 coluna */
  .form-row,
  .form-row-3,
  .form-row-4{
    display:grid;
    grid-template-columns: 1fr !important;
    gap:12px;
  }

  /* espaço e toque melhores */
  .card .body{ padding:16px; }
  .actions .btn{ width:100%; }
  .preview-wrap .actions{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr; /* PNG / SVG / Copiar em grade */
    gap:8px;
  }

  /* preview respirando */
  .preview{ min-height:260px; }
  .qr-target{
    min-height:220px;
    display:grid; place-items:center;
  }
}

/* ====== OPCIONAL: colocar a prévia (Design/Exportação) acima no mobile ======
   Remova este bloco se preferir manter Conteúdo primeiro. */
@media (max-width: 640px){
  /* o aside é o 2º filho dentro de #tab-criar .grid */
  #tab-criar .grid > aside.card{ order: -1; }
}

/* === FIXES FINAIS PARA A ABA "CRIAR" DO QR ========================= */
/* Desktop: deixa claro que são 2 colunas (se algo global mexer em .grid) */
body[data-page="qrcode"] #tab-criar .grid{
  grid-template-columns: 1.05fr .95fr;
  gap: 24px;
}

/* Mobile (≤980px): empilha de verdade */
@media (max-width: 980px){
  body[data-page="qrcode"] #tab-criar .grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* inputs em 1 coluna */
  body[data-page="qrcode"] #tab-criar .form-row,
  body[data-page="qrcode"] #tab-criar .form-row-3,
  body[data-page="qrcode"] #tab-criar .form-row-4{
    display:grid;
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* botões mais “tocáveis” */
  body[data-page="qrcode"] #tab-criar .actions .btn{ width:100% }

  /* grupo de download em grade (vence o .actions { display:flex }) */
  body[data-page="qrcode"] #tab-criar .preview-wrap .actions{
    display:grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
  }

  /* opcional: subir o bloco de Design/Exportação acima no mobile */
  body[data-page="qrcode"] #tab-criar .grid > aside.card{ order: -1; }
}

/* Preview com altura confortável no mobile */
@media (max-width: 980px){
  body[data-page="qrcode"] #tab-criar .preview{ min-height: 260px }
  body[data-page="qrcode"] #tab-criar .qr-target{
    min-height: 220px; display:grid; place-items:center;
  }
}
/* === QR: Empilhar mais cedo e reordenar corretamente no Grid === */

/* 1) Empilha em telas <= 1200px */
@media (max-width: 1200px){
  body[data-page="qrcode"] #tab-criar .grid{
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* inputs: 1 coluna quando empilhado */
  body[data-page="qrcode"] #tab-criar .form-row,
  body[data-page="qrcode"] #tab-criar .form-row-3,
  body[data-page="qrcode"] #tab-criar .form-row-4{
    grid-template-columns: 1fr !important;
  }

  /* botões: largura total no mobile/tablet */
  body[data-page="qrcode"] #tab-criar .actions .btn{ width:100% }
  body[data-page="qrcode"] #tab-criar .preview-wrap .actions{
    display:grid !important; grid-template-columns:1fr 1fr 1fr; gap:8px;
  }
}

/* 2) (Opcional) Colocar o bloco da direita ACIMA no mobile/tablet
      Em Grid, usa-se grid-row (order não funciona). */
@media (max-width: 1200px){
  body[data-page="qrcode"] #tab-criar .grid > aside.card{ grid-row: 1; }
  body[data-page="qrcode"] #tab-criar .grid > article.card{ grid-row: 2; }
}

/* 3) Alturas da prévia quando empilhado */
@media (max-width: 1200px){
  body[data-page="qrcode"] #tab-criar .preview{ min-height: 280px }
  body[data-page="qrcode"] #tab-criar .qr-target{
    min-height: 240px; display:grid; place-items:center;
  }
}
/* =========================================================
   LAYOUT DO CRIAR (QR CODE)
   ========================================================= */

/* Desktop padrão: duas colunas lado a lado */
body[data-page="qrcode"] #tab-criar .grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 32px;
  align-items: start;
}

/* Cards internos */
body[data-page="qrcode"] #tab-criar .card {
  background: var(--fz-surface);
  border: 1px solid var(--fz-border);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* ===================== RESPONSIVO ====================== */

/* Em telas <=1200px, empilha um sobre o outro */
@media (max-width: 1200px) {
  body[data-page="qrcode"] #tab-criar .grid {
    display: block !important;      /* <<< desliga o grid */
  }

  /* Margem entre os blocos empilhados */
  body[data-page="qrcode"] #tab-criar .grid > .card {
    margin-bottom: 24px;
  }

  /* Remove margem do último card */
  body[data-page="qrcode"] #tab-criar .grid > .card:last-child {
    margin-bottom: 0;
  }

  /* Inputs em uma coluna */
  body[data-page="qrcode"] #tab-criar .form-row,
  body[data-page="qrcode"] #tab-criar .form-row-3,
  body[data-page="qrcode"] #tab-criar .form-row-4 {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* Botões full-width */
  body[data-page="qrcode"] #tab-criar .actions .btn {
    width: 100%;
  }

  /* Ações de exportação em grade (3 botões) */
  body[data-page="qrcode"] #tab-criar .preview-wrap .actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
  }

  /* Preview com altura confortável */
  body[data-page="qrcode"] #tab-criar .preview {
    min-height: 280px;
  }

  body[data-page="qrcode"] #tab-criar #qr-target {
    width: min(480px, 100%);
    aspect-ratio: 1/1;
    display: grid;
    place-items: center;
    margin: 0 auto;
  }
}
/* =========================================================
   BOTÕES (CRIAR) — estilo premium: CTA roxo + outline degradê
   ========================================================= */
:root{
  --btn-radius: 12px;
  --btn-h: 44px;
  --cta-1: #7A5FA7;   /* roxo FlowZenHub */
  --cta-2: #9A68F0;   /* roxo claro */
  --cta-3: #5E3EBB;   /* roxo escuro */
}

/* base */
#tab-criar .actions{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
}
#tab-criar .actions .btn{
  position:relative;
  display:inline-grid; place-items:center;
  min-height:var(--btn-h);
  padding:0 18px;
  border-radius:var(--btn-radius);
  font:600 .95rem/1 Inter,system-ui,sans-serif;
  letter-spacing:.2px;
  user-select:none;
  transition:transform .12s ease, box-shadow .18s ease, filter .18s ease;
}

/* ===== PRIMÁRIO (GERAR) ==================================== */
#tab-criar .actions .btn.primary{
  color:#fff;
  border:0; /* a borda vem do glow/sombra */
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 45%) padding-box,
    linear-gradient(90deg, var(--cta-1), var(--cta-2)) border-box;
  box-shadow:
    0 8px 24px color-mix(in oklab, var(--cta-2) 28%, black),
    inset 0 1px 0 rgba(255,255,255,.24);
}
@media (hover:hover){
  #tab-criar .actions .btn.primary:hover{
    transform: translateY(-1px);
    box-shadow:
      0 12px 28px color-mix(in oklab, var(--cta-2) 34%, black),
      inset 0 1px 0 rgba(255,255,255,.28);
    filter: saturate(1.05);
  }
}
#tab-criar .actions .btn.primary:active{
  transform: translateY(0) scale(.99);
  filter: brightness(.98);
}

/* ===== SECUNDÁRIO (LIMPAR) — OUTLINE COM BORDA EM DEGRADÊ === */
#tab-criar .actions .btn:not(.primary){
  color: color-mix(in oklab, var(--fz-text) 92%, #fff 0%);
  border:1px solid transparent;
  background:
    linear-gradient(var(--fz-surface), var(--fz-surface)) padding-box,
    linear-gradient(90deg, var(--cta-2), var(--cta-3)) border-box; /* borda degradê */
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
}
@media (hover:hover){
  #tab-criar .actions .btn:not(.primary):hover{
    transform: translateY(-1px);
    box-shadow:
      0 8px 22px rgba(0,0,0,.28),
      0 1px 0 rgba(255,255,255,.08) inset;
  }
}
#tab-criar .actions .btn:not(.primary):active{
  transform: translateY(0) scale(.99);
}

/* ===== Foco acessível (ambos) ============================== */
#tab-criar .actions .btn:focus-visible{
  outline:0;
  box-shadow:
    0 0 0 2px color-mix(in oklab, var(--cta-2) 70%, #fff 0%),
    0 0 0 6px color-mix(in oklab, var(--cta-2) 22%, transparent);
}

/* ===== Estados desabilitado (se usar disabled no HTML/JS) === */
#tab-criar .actions .btn:disabled,
#tab-criar .actions .btn[aria-busy="true"]{
  opacity:.65; pointer-events:none; filter:grayscale(.1);
}

/* ===== Layout mobile: CTA ocupa a linha toda ================= */
@media (max-width: 980px){
  #tab-criar .actions{
    display:grid; grid-template-columns:1fr auto; gap:10px;
  }
  #tab-criar .actions .btn.primary{ grid-column:1 / -1; }
}

/* ==== Compat: alias p/ superfícies do tema (se não existir) ==== */
:root{ --fz-surface: var(--fz-card); }
html.dark{ --fz-surface: var(--fz-card-dark); }

/* ===== BOTÕES (Criar) — override com alta especificidade ===== */
body[data-page="qrcode"] #tab-criar .actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* Reset local antes de aplicar o estilo premium */
body[data-page="qrcode"] #tab-criar .actions .btn{
  all: unset;                            /* zera interferências globais */
  position: relative;
  display: inline-grid;
  place-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  font: 600 .95rem/1 Inter,system-ui,sans-serif;
  letter-spacing: .2px;
  cursor: pointer;
  user-select: none;
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease;
}

/* PRIMÁRIO – “Gerar QR” (degradê roxo) */
body[data-page="qrcode"] #tab-criar .actions .btn.primary{
  color: #fff !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 45%) padding-box,
    linear-gradient(90deg, #6c26db, #7532e0) border-box !important;
  border: 1px solid transparent !important;
  box-shadow:
    0 8px 24px color-mix(in oklab, #9A68F0 28%, black),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
}
@media (hover:hover){
  body[data-page="qrcode"] #tab-criar .actions .btn.primary:hover{
    transform: translateY(-1px);
    box-shadow:
      0 12px 28px color-mix(in oklab, #9A68F0 34%, black),
      inset 0 1px 0 rgba(255,255,255,.28) !important;
    filter: saturate(1.05);
  }
}
body[data-page="qrcode"] #tab-criar .actions .btn.primary:active{
  transform: translateY(0) scale(.99);
  filter: brightness(.98);
}

/* SECUNDÁRIO – “Limpar” (outline com borda degradê) */
body[data-page="qrcode"] #tab-criar .actions .btn:not(.primary){
  color: color-mix(in oklab, var(--fz-text) 92%, #fff 0%) !important;
  background:
    linear-gradient(var(--fz-surface), var(--fz-surface)) padding-box,
    linear-gradient(90deg, #7025f1, #5E3EBB) border-box !important;
  border: 1px solid transparent !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset !important;
}
@media (hover:hover){
  body[data-page="qrcode"] #tab-criar .actions .btn:not(.primary):hover{
    transform: translateY(-1px);
    box-shadow:
      0 8px 22px rgba(0,0,0,.28),
      0 1px 0 rgba(255,255,255,.08) inset !important;
  }
}
body[data-page="qrcode"] #tab-criar .actions .btn:not(.primary):active{
  transform: translateY(0) scale(.99);
}

/* Foco acessível (ambos) */
body[data-page="qrcode"] #tab-criar .actions .btn:focus-visible{
  outline: 0;
  box-shadow:
    0 0 0 2px color-mix(in oklab, #590ddb 70%, #fff 0%),
    0 0 0 6px color-mix(in oklab, #5c13db 22%, transparent) !important;
}

/* Estados desabilitados */
body[data-page="qrcode"] #tab-criar .actions .btn:disabled,
body[data-page="qrcode"] #tab-criar .actions .btn[aria-busy="true"]{
  opacity: .55 !important;
  pointer-events: none !important;
  filter: grayscale(.1);
}

/* Mobile: CTA ocupa a linha toda */
@media (max-width: 980px){
  body[data-page="qrcode"] #tab-criar .actions{
    display:grid; grid-template-columns:1fr auto; gap:10px;
  }
  body[data-page="qrcode"] #tab-criar .actions .btn.primary{ grid-column:1 / -1; }
}
/* ===================== Color pickers premium (Cor / Fundo) ===================== */
body[data-page="qrcode"] #tab-criar input[type="color"]{
  -webkit-appearance: none;
  appearance: none;
  width: 64px;              /* maior e fácil de tocar */
  height: 40px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--fz-border);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.08)) padding-box; /* brilho sutil */
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 8px 18px rgba(0,0,0,.22);                 /* elevação premium */
  cursor: pointer;
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}

/* remove a borda “cinza” padrão do swatch e arredonda por dentro */
body[data-page="qrcode"] #tab-criar input[type="color"]::-webkit-color-swatch-wrapper{ padding: 0; }
body[data-page="qrcode"] #tab-criar input[type="color"]::-webkit-color-swatch{
  border: none; border-radius: 10px;
}
body[data-page="qrcode"] #tab-criar input[type="color"]::-moz-color-swatch{
  border: none; border-radius: 10px;
}

/* estado hover/active */
@media (hover:hover){
  body[data-page="qrcode"] #tab-criar input[type="color"]:hover{
    transform: translateY(-1px);
    box-shadow:
      0 12px 22px rgba(0,0,0,.28),
      0 1px 0 rgba(255,255,255,.08) inset;
  }
}
body[data-page="qrcode"] #tab-criar input[type="color"]:active{
  transform: translateY(0) scale(.99);
}

/* foco acessível */
body[data-page="qrcode"] #tab-criar input[type="color"]:focus-visible{
  outline: 0;
  border-color: color-mix(in oklab, var(--fz-primary) 70%, #fff 0%);
  box-shadow:
    0 0 0 2px color-mix(in oklab, var(--fz-primary) 55%, #fff 0%),
    0 0 0 6px color-mix(in oklab, var(--fz-primary) 20%, transparent);
}

/* layout: deixa o picker alinhado e com respiro nos campos Cor/Fundo */
body[data-page="qrcode"] #tab-criar label[for="qr-color"],
body[data-page="qrcode"] #tab-criar label[for="qr-bg"]{
  display:block; margin-bottom:6px;
}
body[data-page="qrcode"] #tab-criar #qr-color,
body[data-page="qrcode"] #tab-criar #qr-bg{
  display:inline-block; vertical-align:middle;
}

/* opção estética: aro/“ring” sutil para destacar o swatch no dark */
html.dark body[data-page="qrcode"] #tab-criar input[type="color"]{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 10px 22px rgba(0,0,0,.34);
}