/* Peças próprias de cada ferramenta grátis (WEB-08, onda 4). Saíram do <style> de cada página para cá,
   com as cores trocadas pelos tokens da Aurora, para seguirem o tema claro e o escuro. */

/* Calculadora de Desconto */
.disc-table { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 14px; }
.disc-table th, .disc-table td { padding: 10px 12px; border-bottom: 1px solid var(--lp-line); text-align: left; }
.disc-table th { color: var(--lp-muted); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.disc-table td { color: var(--lp-ink); }
.disc-table .gain { color: var(--lp-ok); font-weight: 700; }
.disc-table .loss { color: var(--lp-danger); font-weight: 700; }
.disc-phrase { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 14px 16px; border: 1px solid var(--lp-line); border-radius: 16px; background: var(--lp-chip); }
.disc-phrase span { color: var(--lp-ink); font-size: 15px; font-weight: 700; }

/* Botões pequenos de copiar e de abrir no WhatsApp (desconto, bio, cobrança). */
.disc-copy, .bio-copy, .msg-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1px solid var(--lp-line); border-radius: 999px; background: var(--lp-glass); color: var(--lp-ink); font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
.disc-copy:hover, .bio-copy:hover, .msg-btn:hover { background: var(--lp-chip); }
.msg-btn-wa { border-color: rgba(37, 211, 102, 0.45); }

/* Calculadora MEI */
.mei-progress-track { height: 12px; margin-top: 14px; overflow: hidden; border: 1px solid var(--lp-line); border-radius: 999px; background: var(--lp-chip); }
.mei-progress-fill { width: 0; height: 100%; border-radius: 999px; background: #10b981; transition: width 0.3s, background 0.3s; }
.mei-progress-fill.warn { background: #f59e0b; }
.mei-progress-fill.alert { background: #ef4444; }
.mei-status { margin: 12px 0 0; color: var(--lp-soft); font-size: 14px; line-height: 1.6; }
.mei-status strong { color: var(--lp-ink); }
.mei-status.ok strong { color: var(--lp-ok); }
.mei-status.warn strong { color: var(--lp-warn); }
.mei-status.alert strong { color: var(--lp-danger); }
.mei-note { margin: 12px 0 0; color: var(--lp-muted); font-size: 12px; font-style: italic; }

/* Cartão de Visita Digital */
.card-colors { display: flex; flex-wrap: wrap; gap: 10px; }
.card-color { width: 44px; height: 44px; border: 2px solid transparent; border-radius: 50%; cursor: pointer; transition: transform 0.15s, border-color 0.2s; }
.card-color:hover { transform: scale(1.06); }
.card-color.active { border-color: var(--lp-ink); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.45); }
.card-preview-box { display: flex; align-items: center; justify-content: center; padding: 16px; border: 1px dashed var(--lp-line); border-radius: 18px; background: var(--lp-chip); }
.card-preview-box canvas { max-width: 100%; border-radius: 16px; box-shadow: var(--lp-shadow); }

/* Datas que Vendem */
.date-month { margin: 22px 0 10px; background: var(--lp-brand); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.date-month:first-child { margin-top: 0; }
.date-card { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; padding: 12px 14px; border: 1px solid var(--lp-line); border-radius: 18px; background: var(--lp-chip); }
.date-card.past { opacity: 0.55; }
.date-badge { flex-shrink: 0; width: 58px; padding: 7px 4px; border-radius: 14px; background: #2563eb; color: #fff; text-align: center; }
.date-badge strong { display: block; font-size: 20px; line-height: 1.1; }
.date-badge span { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.date-info { flex: 1; min-width: 0; }
.date-info h3 { margin: 0 0 3px; font-size: 16px; }
.date-info p { margin: 0; color: var(--lp-soft); font-size: 13px; line-height: 1.45; }
.date-countdown { color: var(--lp-ok); font-size: 12px; font-weight: 700; white-space: nowrap; }
.date-countdown.past-label { color: var(--lp-muted); }
.date-ics { flex-shrink: 0; width: 44px; height: 44px; border: 1px solid var(--lp-line); border-radius: 50%; background: var(--lp-glass); color: var(--lp-ink); cursor: pointer; }
.date-ics:hover { background: var(--lp-chip); }

/* Bio para Instagram e Mensagem de Cobrança */
.bio-card, .msg-card { margin-bottom: 12px; padding: 16px; border: 1px solid var(--lp-line); border-radius: 18px; background: var(--lp-chip); }
.bio-text, .msg-text { margin-bottom: 12px; color: var(--lp-ink); font-size: 15px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.bio-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.bio-count { color: var(--lp-ok); font-size: 12px; font-weight: 700; }
.bio-count.over { color: var(--lp-danger); }
.msg-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* Gerador de Nome */
.name-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.name-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 4px 6px 4px 16px; border: 1px solid var(--lp-line); border-radius: 16px; background: var(--lp-chip); }
.name-card span { color: var(--lp-ink); font-size: 15px; font-weight: 700; }
.name-card button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--lp-muted); cursor: pointer; }
.name-card button:hover { color: var(--lp-info); background: var(--lp-glass); }
.name-card button.copied { color: var(--lp-ok); }

/* Orçamento em PDF */
.quote-items-header { display: grid; grid-template-columns: 1fr 64px 110px 44px; gap: 8px; margin-bottom: 8px; color: var(--lp-muted); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.quote-item { display: grid; grid-template-columns: 1fr 64px 110px 44px; gap: 8px; margin-bottom: 8px; }
.quote-item input { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--lp-line); border-radius: 12px; background: var(--lp-field); color: var(--lp-ink); font: inherit; font-size: 14px; outline: none; }
.quote-item input:focus { border-color: #3b82f6; }
.quote-item button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--lp-muted); cursor: pointer; }
.quote-item button:hover { color: var(--lp-danger); }
.quote-add { width: 100%; min-height: 44px; margin-top: 4px; padding: 0 16px; border: 1px dashed var(--lp-line); border-radius: 999px; background: transparent; color: var(--lp-ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.quote-add:hover { background: var(--lp-chip); }

/* Precisa de um Site? */
.quiz-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.quiz-progress span { color: var(--lp-muted); font-size: 13px; font-weight: 700; white-space: nowrap; }
.quiz-progress-track { flex: 1; height: 8px; overflow: hidden; border-radius: 999px; background: var(--lp-line); }
.quiz-progress-fill { width: 0; height: 100%; border-radius: 999px; background: #2563eb; transition: width 0.3s; }
.quiz-question-text { margin: 0 0 16px; font-size: 22px; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; }
.quiz-options { display: grid; gap: 10px; }
.quiz-option { min-height: 52px; padding: 12px 16px; border: 1px solid var(--lp-line); border-radius: 16px; background: var(--lp-glass); color: var(--lp-ink); font: inherit; font-size: 15px; line-height: 1.4; text-align: left; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.quiz-option:hover { border-color: #3b82f6; background: var(--lp-chip); }
.quiz-back { min-height: 44px; margin-top: 12px; padding: 0 4px; border: 0; background: none; color: var(--lp-muted); font: inherit; font-size: 14px; cursor: pointer; }
.quiz-back:hover { color: var(--lp-ink); }
.quiz-intro-icon { margin-bottom: 12px; font-size: 40px; }
.quiz-result-score { margin-bottom: 10px; color: var(--lp-muted); font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.quiz-result-title { margin-bottom: 12px; font-size: 24px; font-weight: 800; line-height: 1.25; }
.quiz-result-title.tier-ok { color: var(--lp-ok); }
.quiz-result-title.tier-warn { color: var(--lp-warn); }
.quiz-result-title.tier-alert { color: var(--lp-danger); }
.quiz-result-text { margin-bottom: 18px; color: var(--lp-soft); font-size: 15px; line-height: 1.7; }
.quiz-recommendations { display: grid; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
.quiz-recommendations li { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--lp-line); border-radius: 16px; background: var(--lp-chip); color: var(--lp-soft); font-size: 14px; line-height: 1.5; }
.quiz-recommendations li i { flex-shrink: 0; margin-top: 3px; color: var(--lp-info); }
.quiz-share { margin-top: 12px; }

/* Redimensionar Imagens */
.resizer-drop { padding: 32px 20px; border: 2px dashed var(--lp-line); border-radius: 20px; background: var(--lp-chip); text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.resizer-drop:hover, .resizer-drop.dragover { border-color: #3b82f6; background: rgba(59, 130, 246, 0.08); }
.resizer-drop i { display: block; margin-bottom: 10px; color: var(--lp-info); font-size: 28px; }
.resizer-drop p { margin: 0; color: var(--lp-soft); font-size: 15px; }
.resizer-drop p strong { color: var(--lp-ink); }
.resizer-drop small { display: block; margin-top: 8px; color: var(--lp-muted); font-size: 12px; }
.resizer-file-info { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--lp-soft); font-size: 14px; }
.resizer-file-info i { color: var(--lp-ok); }
.resizer-file-info button { min-height: 44px; border: 0; background: none; color: var(--lp-info); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.resizer-preview-box { display: flex; align-items: center; justify-content: center; min-height: 200px; padding: 16px; border: 1px dashed var(--lp-line); border-radius: 18px; background: var(--lp-chip); }
.resizer-preview-box canvas { max-width: 100%; max-height: 340px; border-radius: 12px; box-shadow: var(--lp-shadow); }
.resizer-dims { margin-top: 8px; color: var(--lp-muted); font-size: 12px; text-align: center; }

@media (max-width: 767px) {
  .name-grid { grid-template-columns: 1fr; }
  .quote-items-header { display: none; }
  .quote-item { grid-template-columns: 1fr 56px 96px 44px; }
  .date-countdown { display: none; }
  .msg-actions .msg-btn { flex: 1 1 140px; justify-content: center; }
}