:root {
  /* Cor: azul é a cor de ação do sistema (avançar, enviar, criar do zero).
     Dourado aparece só nos elementos ligados ao modo "Cliente Salvo" (o
     mesmo tom do ícone de estrela), pra reforçar visualmente que aquele
     contexto veio de um perfil salvo, não de um formulário em branco. */
  --bg: #f5f5f7;
  --card-bg: #ffffff;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --muted-soft: #a1a1a6;
  --border: #d2d2d7;
  --border-soft: #e8e8ed;

  --primary: #0071e3;
  --primary-hover: #0077ed;
  --primary-active: #005bb5;
  --primary-soft: rgba(0, 113, 227, 0.08);

  --gold: #a86a1d;
  --gold-hover: #8f5a17;
  --gold-soft: rgba(168, 106, 29, 0.1);

  --success: #1e8e3e;
  --success-soft: rgba(30, 142, 62, 0.08);
  --error: #ff3b30;

  --admin: #6b21a8;
  --admin-soft: rgba(107, 33, 168, 0.08);

  --radius: 18px;
  --radius-sm: 12px;
  --radius-pill: 980px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-fast: cubic-bezier(0.4, 0, 0.2, 1);

  /* Escala tipográfica: cada tamanho tem um papel fixo, usado em todo o
     sistema (nada de valores soltos tipo 0.88rem, 0.92rem...). */
  --text-2xs: 0.75rem;    /* 12px — rótulos micro, categorias */
  --text-xs: 0.8125rem;   /* 13px — meta-informação, legendas de card */
  --text-sm: 0.875rem;    /* 14px — labels de campo, botões secundários */
  --text-base: 0.9375rem; /* 15px — corpo padrão, valores, inputs */
  --text-md: 1rem;        /* 16px — corpo com ênfase */
  --text-lg: 1.0625rem;   /* 17px — títulos de card */
  --text-xl: 1.25rem;     /* 20px — títulos de seção/etapa */
  --text-2xl: 1.625rem;   /* 26px — títulos de painel */
  --text-3xl: 2.5rem;     /* 40px — título da página */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
}

* { box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeScaleIn {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes checkPop {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button {
  cursor: pointer;
}

.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 20px 80px;
}

#view-start {
  max-width: 960px;
  margin: 0 auto;
}

/* O painel administrativo tem uma tabela com muitas colunas (cliente,
   cargo, cidade, dias, valor, preenchidas, ciclo, arte, data de envio) — o
   max-width padrão do site (1100px, ver .page) deixava ela espremida,
   cortando coluna e forçando rolagem o tempo todo. Aqui ele quebra pra fora
   do container central de propósito e usa quase a largura inteira da tela;
   o cálculo funciona porque o .page já é centralizado (margin:auto), então
   "50% do próprio elemento menos 50vw" cancela certinho o recuo do .page
   dos dois lados. */
#view-admin {
  max-width: 1800px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 32px;
  box-sizing: border-box;
}

#view-clients {
  max-width: 780px;
  margin: 0 auto;
}

/* Mesmo problema do #view-admin (comentário acima): a tabela do painel de
   Marketing tem 8 colunas e não cabia nos 1100px padrão do .page, forçando
   rolagem horizontal com scrollbar e setinhas o tempo todo. Mesmo truque de
   largura total aplicado aqui. */
#view-mkt {
  max-width: 1800px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 32px;
  box-sizing: border-box;
}

.view {
  animation: fadeSlideIn 0.5s var(--ease);
}

.submit-row {
  margin: 24px auto 0;
}

.page-header {
  position: relative;
  text-align: center;
  margin-bottom: 48px;
  padding-top: 8px;
}

.page-header h1 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.024em;
  margin: 0 0 14px;
  color: var(--text);
}

.page-header h1 .accent {
  color: var(--primary);
}

.page-subtitle {
  color: var(--muted);
  margin: 0 auto;
  max-width: 480px;
  font-size: var(--text-lg);
  letter-spacing: -0.006em;
  line-height: 1.5;
}

.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  padding: 8px 24px 24px;
  box-shadow: var(--shadow-sm);
}

fieldset {
  border: none;
  border-top: 1px solid var(--border-soft);
  padding: 22px 0;
  margin: 0;
  animation: fadeSlideIn 0.4s var(--ease);
}

fieldset:first-of-type {
  border-top: none;
}

legend {
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  letter-spacing: -0.012em;
  color: var(--text);
  padding: 0;
  margin-bottom: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.field:last-child {
  margin-bottom: 0;
}

label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  margin-bottom: 7px;
  color: var(--text);
}

input[type="text"],
input[type="number"],
select,
textarea {
  border: 1px solid transparent;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: var(--text-base);
  font-family: inherit;
  color: var(--text);
  width: 100%;
  transition: background-color 0.2s var(--ease-fast), box-shadow 0.2s var(--ease-fast), border-color 0.2s var(--ease-fast);
}

textarea {
  resize: vertical;
}

.field-locked-value {
  margin: 0;
  padding: 11px 14px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.field-locked-value svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--muted-soft);
}

input::placeholder,
textarea::placeholder {
  color: var(--muted-soft);
}

input:hover,
select:hover,
textarea:hover {
  background: var(--border-soft);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  background: var(--card-bg);
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}

.grid {
  display: grid;
  gap: 14px;
}

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

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 600px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

.checkboxes-inline {
  flex-direction: row;
  align-items: center;
  gap: 20px;
  justify-content: flex-start;
}

/* Coluna única, sempre — os grupos de checkbox aqui têm frases inteiras como
   rótulo ("Separação, conferência e embalagem de produtos"), não palavras
   curtas. Uma grade de várias colunas (grid-2/grid-3) espremia esses rótulos
   dentro da largura fixa do wizard-panel (340px) e forçava rolagem lateral,
   ruim pra usar — em coluna, cada opção cabe inteira e sem cortar. */
.checkboxes-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.checkboxes-grid .checkbox-label {
  align-items: flex-start;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: var(--weight-normal);
  font-size: var(--text-base);
  margin-bottom: 0;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  flex-shrink: 0;
  cursor: pointer;
}

.submit-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
}

.submit-row[hidden] {
  display: none;
}

.save-preset {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-right: auto;
}

.save-preset[hidden] {
  display: none;
}

.save-preset .checkbox-label {
  white-space: nowrap;
}

#save-preset-name {
  width: 220px;
}

#submit-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 13px 28px;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.006em;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-fast), transform 0.15s var(--ease-fast), box-shadow 0.2s var(--ease-fast);
}

#submit-btn:hover {
  background: var(--primary-hover);
  box-shadow: 0 4px 14px rgba(0, 113, 227, 0.3);
}

#submit-btn:active {
  background: var(--primary-active);
  transform: scale(0.97);
}

#submit-btn:disabled {
  background: var(--border);
  color: #86868b;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.submit-row.is-salvo #submit-btn {
  background: var(--gold);
}

.submit-row.is-salvo #submit-btn:hover {
  background: var(--gold-hover);
  box-shadow: 0 4px 14px rgba(168, 106, 29, 0.3);
}

.submit-row.is-salvo #submit-btn:active {
  background: var(--gold-hover);
}

/* ---------- Tela inicial ---------- */

.choice-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

@media (max-width: 860px) {
  .choice-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .choice-cards {
    grid-template-columns: 1fr;
  }
}

.choice-card[hidden] {
  display: none;
}

.choice-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 36px 24px 28px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
  font-family: inherit;
  box-shadow: var(--shadow-sm);
  animation: fadeSlideIn 0.5s var(--ease) backwards;
}

.choice-card:hover {
  border-color: transparent;
  transform: translateY(-4px);
}

.choice-card[data-action="novo"]:hover {
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--primary);
}

.choice-card[data-action="salvo"]:hover {
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--gold);
}

.choice-card[data-action="historico"]:hover {
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--success);
}

.choice-card[data-action="admin"]:hover {
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--admin);
}

.choice-card:active {
  transform: translateY(-1px) scale(0.99);
}

.choice-cards .choice-card:nth-child(1) { animation-delay: 0.05s; }
.choice-cards .choice-card:nth-child(2) { animation-delay: 0.12s; }
.choice-cards .choice-card:nth-child(3) { animation-delay: 0.19s; }
.choice-cards .choice-card:nth-child(4) { animation-delay: 0.26s; }

.choice-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: 14px;
  background: var(--primary-soft);
  color: var(--primary);
}

.choice-card[data-action="salvo"] .choice-icon {
  background: var(--gold-soft);
  color: var(--gold);
}

.choice-card[data-action="historico"] .choice-icon {
  background: var(--success-soft);
  color: var(--success);
}

.choice-card[data-action="admin"] .choice-icon {
  background: var(--admin-soft);
  color: var(--admin);
}

.choice-icon svg {
  width: 26px;
  height: 26px;
}

.choice-card h2 {
  margin: 0 0 8px;
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.012em;
  color: var(--text);
}

.choice-card p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.choice-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
  width: 100%;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  color: var(--primary);
}

.choice-card[data-action="salvo"] .choice-cta {
  color: var(--gold);
}

.choice-card[data-action="historico"] .choice-cta {
  color: var(--success);
}

.choice-card[data-action="admin"] .choice-cta {
  color: var(--admin);
}

.choice-cta svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s var(--ease-fast);
}

.choice-card:hover .choice-cta svg {
  transform: translateX(3px);
}

/* ---------- Link voltar ---------- */

.link-back {
  background: none;
  border: none;
  color: var(--primary);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  cursor: pointer;
  padding: 6px 0;
  margin-bottom: 18px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.link-back.is-salvo {
  color: var(--gold);
}

.link-back.is-salvo:hover {
  color: var(--gold-hover);
}

.link-back .link-back-arrow {
  display: inline-block;
  transition: transform 0.2s var(--ease-fast);
}

.link-back:hover .link-back-arrow {
  transform: translateX(-3px);
}

.link-back:hover {
  color: var(--primary-hover);
}

/* ---------- Lista de clientes salvos ---------- */

.client-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 700px) {
  .client-grid {
    grid-template-columns: 1fr;
  }
}

/* Igual ao .admin-user-item: um botão de excluir dentro do botão de
   selecionar não funciona (botão aninhado é inválido em HTML), então o
   card virou um <div> com dois <button> irmãos — um cobrindo o card
   inteiro pra selecionar, outro flutuando no canto pra excluir. */
.client-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
  animation: fadeSlideIn 0.5s var(--ease) backwards;
}

.client-card-select {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 22px 40px 22px 22px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.client-card-delete {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.15s var(--ease-fast), color 0.15s var(--ease-fast);
}

.client-card-delete svg {
  width: 15px;
  height: 15px;
}

.client-card-delete:hover {
  background: rgba(255, 59, 48, 0.08);
  color: var(--error);
}

.client-card:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.client-card:active {
  transform: translateY(-1px) scale(0.99);
}

.client-grid .client-card:nth-child(1) { animation-delay: 0.03s; }
.client-grid .client-card:nth-child(2) { animation-delay: 0.09s; }
.client-grid .client-card:nth-child(3) { animation-delay: 0.15s; }
.client-grid .client-card:nth-child(4) { animation-delay: 0.21s; }
.client-grid .client-card:nth-child(5) { animation-delay: 0.27s; }
.client-grid .client-card:nth-child(6) { animation-delay: 0.33s; }

.client-card h3 {
  margin: 0 0 4px;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
}

.client-card p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-xs);
}

/* ---------- Modo Cliente Salvo: layout dividido ---------- */

.split-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 20px;
  align-items: start;
}

.split-layout[hidden] {
  display: none;
}

@media (max-width: 800px) {
  .split-layout {
    grid-template-columns: 1fr;
  }
}

.bubble-panel {
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 20px;
  min-height: 120px;
  box-shadow: var(--shadow-sm);
}

.bubble-placeholder {
  color: var(--muted);
  font-size: var(--text-base);
  text-align: center;
  padding: 16px 4px;
}

.bubble {
  animation: fadeScaleIn 0.3s var(--ease);
}

.bubble-title {
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  letter-spacing: -0.008em;
  margin-bottom: 12px;
  color: var(--text);
}

.bubble-control {
  width: 100%;
  margin-bottom: 14px;
}

.bubble-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.bubble-actions {
  display: flex;
  gap: 8px;
}

.bubble-apply,
.bubble-cancel {
  flex: 1;
  border-radius: var(--radius-pill);
  padding: 10px 12px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  border: 1px solid var(--border);
  font-family: inherit;
  transition: background-color 0.2s var(--ease-fast), transform 0.15s var(--ease-fast);
}

.bubble-apply {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}

.bubble-apply:hover {
  background: var(--gold-hover);
}

.bubble-apply:active,
.bubble-cancel:active {
  transform: scale(0.96);
}

.bubble-cancel {
  background: #fff;
  color: var(--text);
}

.bubble-cancel:hover {
  background: var(--bg);
}

.review-panel {
  padding: 8px 20px 20px;
}

.review-section {
  padding: 18px 0;
  border-top: 1px solid var(--border-soft);
  scroll-margin-top: 20px;
}

.review-section:first-child {
  border-top: none;
}

.review-section h3 {
  margin: 0 0 10px;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.review-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 4px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.2s var(--ease-fast), border-color 0.2s var(--ease-fast);
}

.review-row:hover {
  background: var(--bg);
}

.review-row.active {
  border-color: var(--gold);
  background: var(--gold-soft);
}

.review-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.review-label {
  font-size: var(--text-2xs);
  color: var(--muted);
}

.review-value {
  font-size: var(--text-base);
  color: var(--text);
  white-space: pre-line;
  word-break: break-word;
}

.review-value.empty {
  color: var(--muted-soft);
  font-style: italic;
}

.review-edit-icon {
  color: var(--muted);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.2s var(--ease-fast);
}

.review-row:hover .review-edit-icon {
  opacity: 1;
}

.review-panel-title {
  margin: 0 0 14px;
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.017em;
  color: var(--text);
}

#review-panel .review-panel-title {
  color: var(--gold);
}

.review-row.static {
  cursor: default;
}

.review-row.static:hover {
  background: none;
}

/* ---------- Modo Novo Cliente: assistente em etapas ---------- */

.wizard-panel {
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  border-top: 3px solid var(--primary);
}

.checkbox-group-title {
  margin: 14px 0 6px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--muted);
}

.checkbox-group-title:first-of-type {
  margin-top: 8px;
}

.checkbox-outros-toggle {
  margin-top: 14px;
}

.checkbox-outros-input {
  width: 100%;
  margin-top: 8px;
  resize: vertical;
}

.wizard-progress {
  font-size: var(--text-2xs);
  color: var(--muted);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.wizard-dots {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}

.wizard-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.wizard-dot.active {
  background: var(--primary);
  transform: scale(1.25);
}

.wizard-dot.done {
  background: var(--primary);
  opacity: 0.4;
}

.wizard-panel fieldset {
  border-top: none;
  padding-top: 0;
}

#wizard-message {
  min-height: 1.1em;
  margin-top: 4px;
}

.wizard-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}

.wizard-prev,
.wizard-next {
  border-radius: var(--radius-pill);
  padding: 11px 20px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  font-family: inherit;
  border: 1px solid var(--border);
  transition: background-color 0.2s var(--ease-fast), transform 0.15s var(--ease-fast), box-shadow 0.2s var(--ease-fast);
}

.wizard-prev {
  background: #fff;
  color: var(--text);
}

.wizard-prev:hover {
  background: var(--bg);
}

.wizard-prev:active,
.wizard-next:active {
  transform: scale(0.96);
}

.wizard-next {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  margin-left: auto;
}

.wizard-next:hover {
  background: var(--primary-hover);
  box-shadow: 0 4px 14px rgba(0, 113, 227, 0.3);
}

.form-message {
  font-size: var(--text-sm);
  transition: opacity 0.2s var(--ease-fast);
}

.form-message.success {
  color: var(--success);
  font-weight: var(--weight-medium);
}

.form-message.success::before {
  content: "✓";
  display: inline-block;
  margin-right: 6px;
  animation: checkPop 0.4s var(--ease);
}

.form-message.error {
  color: var(--error);
}

.hint {
  color: var(--muted);
  font-size: var(--text-sm);
  margin: 0 0 18px;
}

/* ---------- Modo Novo Cliente: colar texto da vaga (IA) ---------- */

.texto-livre-toggle {
  display: block;
  width: 100%;
  margin-bottom: 18px;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-fast), border-color 0.2s var(--ease-fast);
}

.texto-livre-toggle:hover {
  background: var(--gold-soft);
  border-color: var(--gold);
}

.texto-livre-avisos {
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gold);
  background: var(--gold-soft);
  font-size: var(--text-sm);
}

.texto-livre-avisos ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.texto-livre-avisos li {
  margin-bottom: 2px;
}

.texto-livre-back {
  margin-bottom: 16px;
}

.texto-livre-title {
  margin-bottom: 6px;
}

.texto-livre-textarea {
  width: 100%;
  min-height: 300px;
  resize: vertical;
  margin-bottom: 10px;
}

.texto-livre-process {
  margin-top: 4px;
}

.texto-apoio-usar {
  width: auto;
  margin-bottom: 14px;
}

.texto-apoio-modelo {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: var(--text-sm);
  line-height: 1.6;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin: 0;
  color: var(--text);
}

.btn-primary {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 13px 28px;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.006em;
  cursor: pointer;
  width: 100%;
  font-family: inherit;
  transition: background-color 0.2s var(--ease-fast), transform 0.15s var(--ease-fast), box-shadow 0.2s var(--ease-fast);
}

.btn-primary:hover {
  background: var(--primary-hover);
  box-shadow: 0 4px 14px rgba(0, 113, 227, 0.3);
}

.btn-primary:active {
  background: var(--primary-active);
  transform: scale(0.98);
}

.btn-primary:disabled {
  background: var(--border);
  color: #86868b;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ---------- Barra de conta (usuário logado) ---------- */

.account-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 780px;
  margin: 0 auto 8px;
  padding: 4px 2px;
  font-size: var(--text-sm);
  /* Some para dentro suavemente assim que loga, em vez de simplesmente
     "aparecer" — o [hidden] some/volta de verdade (display:none), então o
     navegador trata cada vez que ela aparece como uma entrada nova. */
  animation: fadeSlideIn 0.4s var(--ease);
}

/* Sem isso, o "display: flex" acima ganha do atributo [hidden] do HTML e a
   barra aparece mesmo antes do login — mesma classe de bug já vista em
   .submit-row e .split-layout neste arquivo. */
.account-bar[hidden] {
  display: none;
}

.account-bar-name {
  color: var(--muted);
  font-weight: var(--weight-medium);
}

.account-bar-name::before {
  content: "Olá, ";
  color: var(--muted-soft);
  font-weight: var(--weight-normal);
}

.account-bar-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.account-bar-link {
  background: none;
  border: none;
  color: var(--primary);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.2s var(--ease-fast);
}

.account-bar-link:hover {
  color: var(--primary-hover);
}

.account-bar-link.account-bar-logout {
  color: var(--muted);
}

.account-bar-link.account-bar-logout:hover {
  color: var(--error);
}

/* ---------- Modal (trocar senha) ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(29, 29, 31, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
  animation: fadeSlideIn 0.2s var(--ease);
}

.modal-overlay[hidden] {
  display: none;
}

.admin-team-emails-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 14px;
}

.admin-team-emails-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.admin-team-emails-remove {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.15s var(--ease-fast), color 0.15s var(--ease-fast);
}

.admin-team-emails-remove svg {
  width: 14px;
  height: 14px;
}

.admin-team-emails-remove:hover:not(:disabled) {
  background: rgba(255, 59, 48, 0.08);
  color: var(--error);
}

.admin-team-emails-form {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.admin-team-emails-form input {
  flex: 1;
  margin: 0;
}

.admin-team-emails-form .btn-primary {
  width: auto;
  flex-shrink: 0;
  padding: 11px 18px;
}

.settings-push-block {
  padding: 14px 0 6px;
  border-top: 1px solid var(--border-soft);
  margin-top: 4px;
}

.settings-push-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  margin: 0 0 4px;
}

.settings-push-block .btn-secondary {
  padding: 9px 16px;
  font-size: var(--text-sm);
  margin-top: 4px;
}

.settings-push-status {
  margin: 8px 0 0;
}

.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.modal-actions .btn-primary {
  width: auto;
  flex: 1;
}

.btn-secondary {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 13px 20px;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.2s var(--ease-fast);
}

.btn-secondary:hover {
  background: var(--border-soft);
}

/* ---------- Tela de login ---------- */

.login-wrap {
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  width: 100%;
  max-width: 380px;
  padding-top: 28px;
  animation: fadeScaleIn 0.4s var(--ease);
}

.login-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.018em;
  margin: 0 0 8px;
}

/* ---------- Minhas vagas (histórico) ---------- */

.section-heading {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.012em;
  margin: 0 0 20px;
}

/* Mesma receita do .split-layout (usado no modo Cliente Salvo): grid com
   align-items:start + painel esquerdo sticky/overflow próprio é o que já
   resolveu o bug de scroll deste projeto antes — reaproveitando de propósito
   em vez de inventar um jeito novo de dividir a tela. */
.history-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 800px) {
  .history-layout {
    grid-template-columns: 1fr;
  }
}

.history-sidebar {
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--success);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.history-filters {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--card-bg);
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.history-filters input[type="search"] {
  margin: 0;
}

.history-filters-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.history-filters-row select,
.history-filters > select {
  padding: 9px 10px;
  font-size: var(--text-sm);
}

/* Precisa vir DEPOIS das regras base acima — mesma especificidade
   (uma classe só), então quem ganha é quem vem por último no arquivo, não
   quem "parece" mais específico por estar dentro de uma @media. */
@media (max-width: 800px) {
  /* Em tela estreita a lista e o detalhe empilham em vez de dividir a tela
     (ver .history-layout acima). Uma caixa com scroll próprio dentro de uma
     coluna que já rola com a página inteira é receita pronta de bug: duas
     áreas de rolagem uma dentro da outra brigam pelo gesto de scroll. Por
     isso aqui a lista NÃO tem altura travada nem scroll próprio — ela só
     flui como o resto da página, que é a única coisa que rola. */
  .history-sidebar {
    position: static;
    max-height: none;
    overflow-y: visible;
  }

  /* Pelo mesmo motivo, os filtros não ficam mais "grudados" no topo do
     próprio painel (isso só faz sentido quando o painel tem scroll interno
     — sem ele, "sticky" gruda no topo da PÁGINA, ficando por cima do
     cabeçalho de um jeito estranho). */
  .history-filters {
    position: static;
  }
}

.history-list {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.history-empty {
  color: var(--muted);
  font-size: var(--text-sm);
  text-align: center;
  padding: 24px 12px;
}

.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.15s var(--ease-fast), border-color 0.15s var(--ease-fast);
}

.history-item:hover {
  background: var(--bg);
}

.history-item.active {
  background: var(--primary-soft);
  border-color: var(--primary);
}

.history-item-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.history-item-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-item-sub {
  font-size: var(--text-2xs);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-item-meta {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.history-item-date {
  font-size: var(--text-2xs);
  color: var(--muted-soft);
  white-space: nowrap;
}

.history-item-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 2px 7px;
  white-space: nowrap;
}

.status-pill-ciclo-rodando {
  color: var(--success);
  background: var(--success-soft);
}

.status-pill-ciclo-pausada {
  color: var(--gold);
  background: var(--gold-soft);
}

.status-pill-ciclo-concluida {
  color: var(--muted);
  background: rgba(110, 110, 115, 0.1);
}

.status-pill-ciclo-nao_iniciada {
  color: var(--muted);
  background: rgba(110, 110, 115, 0.1);
}

.status-pill-ciclo-aguardando_divulgacao {
  color: var(--gold);
  background: var(--gold-soft);
}

.status-pill-arte-aguardando {
  color: var(--muted);
  background: rgba(110, 110, 115, 0.1);
}

.status-pill-arte-imagem_enviada {
  color: var(--primary);
  background: var(--primary-soft);
}

.status-pill-arte-aprovada {
  color: var(--success);
  background: var(--success-soft);
}

.history-detail-badges {
  display: flex;
  gap: 6px;
  margin: 0 0 20px;
}

.history-detail-badges .status-pill {
  font-size: 11px;
  padding: 4px 10px;
}

#history-detail {
  min-height: 200px;
}

/* Entrada suave ao trocar de vaga selecionada, aprovar a arte ou salvar
   "vagas preenchidas" — sem isso o painel inteiro trocava de conteúdo sem
   transição nenhuma, destoando do resto do app. Escopado só pra cá (não em
   .review-section direto): essa mesma classe também é usada na
   pré-visualização ao vivo do assistente, que re-renderiza a cada tecla
   digitada — animar ali causaria piscada em vez de polimento. */
#history-detail .review-section {
  animation: fadeSlideIn 0.3s var(--ease);
}

.history-detail-placeholder {
  color: var(--muted);
  font-size: var(--text-base);
  text-align: center;
  padding: 60px 16px;
}

.history-detail-meta {
  margin-bottom: 8px;
}

.history-detail-image {
  width: 100%;
  max-width: 320px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  display: block;
  margin-bottom: 12px;
  cursor: zoom-in;
  transition: opacity 0.15s var(--ease-fast);
}

.history-detail-image:hover {
  opacity: 0.9;
}

.image-lightbox {
  background: rgba(0, 0, 0, 0.85);
  cursor: zoom-out;
}

.image-lightbox-img {
  max-width: min(90vw, 700px);
  max-height: 90vh;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  cursor: default;
}

.image-lightbox-close {
  position: fixed;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s var(--ease-fast);
}

.image-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.history-approved {
  color: var(--success) !important;
  border-color: var(--success) !important;
  cursor: default !important;
}

.history-vagas-form {
  display: flex;
  gap: 10px;
  align-items: center;
  max-width: 320px;
}

.history-vagas-input {
  flex: 1;
  min-width: 0;
}

.history-vagas-form .btn-primary {
  width: auto;
  flex-shrink: 0;
  padding: 11px 18px;
}

.history-vagas-feedback {
  margin: 10px 0 0;
}

.history-delete-block {
  padding-top: 20px;
}

.history-delete-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--error);
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.2s var(--ease-fast), border-color 0.2s var(--ease-fast);
}

.history-delete-btn:hover:not(:disabled) {
  background: rgba(255, 59, 48, 0.08);
  border-color: var(--error);
}

.history-delete-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---------- Detalhes completos da vaga (sanfona) ---------- */

.history-details-block {
  padding-top: 4px;
  padding-bottom: 4px;
}

.history-details-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  padding: 10px 2px;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--primary);
  cursor: pointer;
}

.history-details-toggle svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.2s var(--ease-fast);
}

.history-details-toggle.is-open svg {
  transform: rotate(180deg);
}

.history-details-content {
  margin-top: 4px;
}

.history-details-content .review-section:first-child {
  border-top: 1px solid var(--border-soft);
}

/* ---------- Painel administrativo ---------- */

.admin-sidebar {
  border-top-color: var(--admin);
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border-soft);
}

.admin-actions .btn-secondary {
  flex: 1;
  padding: 10px 14px;
  font-size: var(--text-sm);
  white-space: nowrap;
}

.admin-user-item-role {
  text-transform: none;
}

.admin-role-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--admin-soft);
  color: var(--admin);
}

.admin-role-badge-solicitante {
  background: var(--border-soft);
  color: var(--muted);
}

/* A linha do usuário virou um <div> com dois <button> irmãos dentro (não dá
   pra aninhar um botão de excluir dentro do botão de selecionar) — o div
   fica sem padding próprio, quem cuida do espaçamento é o botão de
   selecionar, que ocupa o espaço todo que sobra. */
.admin-user-item {
  padding: 0;
  cursor: default;
}

.admin-user-item-select {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: none;
  border: none;
  padding: 10px 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.admin-user-delete {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: 6px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.15s var(--ease-fast), color 0.15s var(--ease-fast);
}

.admin-user-delete svg {
  width: 16px;
  height: 16px;
}

.admin-user-delete:hover {
  background: rgba(255, 59, 48, 0.08);
  color: var(--error);
}

/* Resumo das vagas de um usuário, no painel administrativo — tabela "de
   verdade" mesmo (não cards), porque o pedido foi "bem tipo a planilha",
   pra bater o olho e comparar linha a linha. */
.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  white-space: nowrap;
}

.admin-table th,
.admin-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
}

.admin-table th {
  background: var(--bg);
  color: var(--muted);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  position: sticky;
  top: 0;
}

.admin-table tbody tr:last-child td {
  border-bottom: none;
}

.admin-table tbody tr:hover {
  background: var(--bg);
}

/* ---------- Painel de Marketing ---------- */

.mkt-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
}

.mkt-filters input {
  flex: 1;
  min-width: 220px;
  margin: 0;
}

.mkt-filters select {
  padding: 9px 10px;
  font-size: var(--text-sm);
}

.mkt-confirm-btn {
  white-space: nowrap;
}

.mkt-budget-container {
  margin-bottom: 8px;
}

.mkt-budget-title {
  margin: 0 0 12px;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text);
}

.mkt-budget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.mkt-budget-card {
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}

.mkt-budget-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.mkt-budget-nome {
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--text);
}

.mkt-budget-valores {
  font-size: var(--text-xs);
  color: var(--muted);
  white-space: nowrap;
}

.mkt-budget-de {
  font-style: italic;
}

.mkt-budget-bar-track {
  width: 100%;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--border-soft);
  overflow: hidden;
}

.mkt-budget-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--success);
  transition: width 0.3s var(--ease);
}

.mkt-budget-card-warn .mkt-budget-bar-fill {
  background: var(--gold);
}

.mkt-budget-card-over .mkt-budget-bar-fill {
  background: var(--error);
}

.mkt-budget-card-over {
  border-color: var(--error);
}

.mkt-budget-aviso {
  margin: 8px 0 0;
  font-size: var(--text-xs);
  color: var(--error);
  font-weight: var(--weight-semibold);
}

.mkt-budget-nota {
  margin: 8px 0 0;
  font-size: var(--text-xs);
  color: var(--gold);
}

.mkt-budget-ajustar-btn {
  margin-top: 12px;
  width: 100%;
  font-size: var(--text-xs);
  padding: 8px 12px;
}

.admin-reset-password-btn {
  margin: -8px 0 16px;
}

/* A tabela do painel administrativo (.admin-table sozinha) é de propósito
   "bem tipo a planilha", sem quebrar linha. Aqui na de Marketing preferimos
   deixar cada célula quebrar — nome de solicitante longo ou cidade comprida
   viram 2 linhas em vez de empurrar a tabela pra fora da tela e forçar
   rolagem horizontal, que era exatamente a reclamação. */
.mkt-table {
  white-space: normal;
}
.mkt-table th,
.mkt-table td {
  white-space: normal;
}

/* ---------- Foco visível (acessibilidade) ---------- */

.choice-card:focus-visible,
.client-card-select:focus-visible,
.client-card-delete:focus-visible,
.review-row:focus-visible,
.link-back:focus-visible,
#submit-btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.account-bar-link:focus-visible,
.wizard-prev:focus-visible,
.wizard-next:focus-visible,
.bubble-apply:focus-visible,
.bubble-cancel:focus-visible,
.admin-user-item-select:focus-visible,
.admin-user-delete:focus-visible,
.history-details-toggle:focus-visible,
.admin-team-emails-remove:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}