/* Melaine — complementos do app sobre o ds.css (shell + componentes do protótipo).
   Cobre o que o protótipo não trouxe: layout de auth, formulários (vocabulário do
   design system), botões de conteúdo e alertas. Tudo via tokens do ds.css. */

/* ── Layout de autenticação (login, cadastro, bloqueado) ── */
html.auth, html.auth body { height: auto; min-height: 100%; overflow: auto; }
body.auth {
  background: var(--sb);
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; min-height: 100vh;
}
.auth-card {
  background: var(--card); color: var(--txt);
  border-radius: 14px; box-shadow: var(--shadow-m);
  width: 100%; max-width: 420px; padding: 36px 34px;
}
.auth-card.wide { max-width: 720px; }
.auth-logo { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.auth-logo-mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, var(--brand), var(--brand-d));
  display: flex; align-items: center; justify-content: center;
}
.auth-logo-text { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--txt); letter-spacing: -.02em; }
.auth-sub { font-size: .82rem; color: var(--txt2); margin-bottom: 24px; }
.auth-foot { margin-top: 20px; font-size: .82rem; color: var(--txt2); text-align: center; }
.auth-foot a { color: var(--brand-d); font-weight: 600; text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }

/* ── Formulários (vocabulário do design system: .field > label + .input) ── */
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 15px; }
.field > label { font-size: .78rem; font-weight: 600; color: var(--txt2); }
.input, .select, .textarea {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--border-2); border-radius: 8px;
  background: var(--card); color: var(--txt);
  font-size: .9rem; font-family: inherit; outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--sb-act);
}
.textarea { resize: vertical; min-height: 84px; }
.field.invalid .input, .field.invalid .select, .field.invalid .textarea { border-color: var(--red); }
.hint { font-size: .74rem; color: var(--txt3); }
.err  { font-size: .74rem; color: var(--red); font-weight: 500; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .field-row, .field-row-3 { grid-template-columns: 1fr; } }

/* ── Botões de conteúdo (.btn) — distintos do .tb-btn da topbar ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 15px; border: 1px solid var(--border-2); border-radius: 8px;
  background: var(--card); color: var(--txt);
  font-size: .86rem; font-weight: 600; font-family: inherit; cursor: pointer;
  text-decoration: none; transition: background .12s, border-color .12s, opacity .12s;
}
.btn:hover { background: var(--row-h); }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-fg); }
.btn.primary:hover { background: var(--brand-d); border-color: var(--brand-d); }
.btn.ghost { background: transparent; border-color: var(--border-2); color: var(--txt2); }
.btn.ghost:hover { background: var(--row-h); color: var(--txt); }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn.danger:hover { opacity: .9; }
.btn.block { width: 100%; }
.btn.sm { padding: 6px 10px; font-size: .8rem; }
.btn.lg { padding: 11px 18px; font-size: .92rem; }
.btn.sq { width: 34px; height: 34px; padding: 0; } /* kebab / ícone */
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ── Alertas / feedback ── */
.alert { border-radius: 8px; padding: 10px 13px; font-size: .84rem; margin-bottom: 16px; border: 1px solid transparent; }
.alert.info { background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--blue); border-color: color-mix(in srgb, var(--blue) 30%, transparent); }
.alert.ok   { background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.alert.warn { background: color-mix(in srgb, var(--amber) 12%, transparent); color: var(--amber); border-color: color-mix(in srgb, var(--amber) 30%, transparent); }
.alert.bad  { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); border-color: color-mix(in srgb, var(--red) 30%, transparent); }

/* ── Status pill extra (reaproveita .pill do ds.css; variações de cor) ── */
.pill.trial   { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }
.pill.ativo   { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.pill.suspenso, .pill.cancelado { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }

/* ─── Tema "legacy": re-tematiza telas herdadas (SmartSeller) com tokens DS ───
   Escopado em .legacy para não afetar o shell. Cada tela migrada envolve seu
   conteúdo em <div class="legacy">. Ponte até o reskin fino de cada uma. */
.legacy { color: var(--txt); }
.legacy .wrap { max-width: 1400px; margin: 0 auto; padding: 0; }
.legacy h1 { font-family: 'Montserrat', sans-serif; font-size: 1.2rem; color: var(--txt); margin-bottom: 14px; }
.legacy h2 { font-family: 'Montserrat', sans-serif; color: var(--txt); }
.legacy a { color: var(--brand-d); }
/* filtros */
.legacy .filters { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; box-shadow: var(--shadow); margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.legacy .filters label { font-size: .78rem; font-weight: 600; color: var(--txt2); display: flex; flex-direction: column; gap: 4px; }
/* cards / sumário / kpi */
.legacy .card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; box-shadow: var(--shadow); }
.legacy .card-title { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--txt2); margin-bottom: 14px; }
.legacy .summary { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.legacy .sum-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 18px; box-shadow: var(--shadow); flex: 1; min-width: 130px; }
.legacy .sum-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--txt2); margin-bottom: 4px; }
.legacy .sum-val { font-family: 'Montserrat', sans-serif; font-size: 1.2rem; font-weight: 800; color: var(--txt); font-variant-numeric: tabular-nums; }
.legacy .sum-val.green, .legacy .green { color: var(--green); }
.legacy .sum-val.red, .legacy .red { color: var(--red); }
/* tabelas */
.legacy .tbl-wrap { background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); overflow-x: auto; }
.legacy table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.legacy thead th { padding: 10px 12px; text-align: left; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--txt2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.legacy thead th[onclick], .legacy thead th[style*="cursor"] { cursor: pointer; }
.legacy thead th:hover { color: var(--brand-d); }
.legacy thead th.sorted { color: var(--brand-d); }
.legacy thead th.sorted::after { content: attr(data-arrow); margin-left: 4px; }
.legacy tbody tr:hover { background: var(--row-h); }
.legacy td { padding: 8px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; color: var(--txt); }
.legacy td.sku, .legacy .sku { font-weight: 600; color: var(--brand-d); }
.legacy td.nome, .legacy .nome { color: var(--txt); }
.legacy td.num, .legacy .num, .legacy th.num { text-align: right; font-variant-numeric: tabular-nums; }
.legacy td.margem-pos { text-align: right; font-weight: 600; color: var(--green); }
.legacy td.margem-neg { text-align: right; font-weight: 600; color: var(--red); }
/* badges de canal */
.legacy .badge { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: .72rem; font-weight: 600; }
.legacy .badge-ml { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); }
.legacy .badge-tiny { background: color-mix(in srgb, var(--purple) 18%, transparent); color: var(--purple); }
.legacy .badge-shopee { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
/* paginação */
.legacy .pager { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 16px; font-size: .84rem; color: var(--txt2); }
.legacy .pager button { padding: 5px 12px; border: 1px solid var(--border-2); border-radius: 6px; background: var(--card); color: var(--txt); cursor: pointer; font-size: .82rem; }
.legacy .pager button:hover:not(:disabled) { background: var(--row-h); }
.legacy .pager button:disabled { opacity: .4; cursor: default; }
.legacy .pager button.act { background: var(--brand); color: var(--brand-fg); border-color: var(--brand); }
.legacy .loading, .legacy .empty, .legacy .empty-state { text-align: center; padding: 44px; color: var(--txt3); font-size: .9rem; }
/* botões e campos genéricos dentro de telas legacy */
.legacy button { padding: 8px 14px; border: 1px solid var(--brand); border-radius: 8px; cursor: pointer; font-size: .84rem; font-weight: 600; background: var(--brand); color: var(--brand-fg); }
.legacy button:hover { background: var(--brand-d); border-color: var(--brand-d); }
.legacy button.sec, .legacy button.secondary { background: transparent; border-color: var(--border-2); color: var(--txt2); }
.legacy button.danger { background: var(--red); border-color: var(--red); color: #fff; }
.legacy button.success { background: var(--green); border-color: var(--green); color: #fff; }
.legacy button.sm { padding: 3px 9px; font-size: .78rem; }
.legacy input, .legacy select, .legacy textarea { padding: 8px 10px; border: 1px solid var(--border-2); border-radius: 8px; font-size: .84rem; background: var(--card); color: var(--txt); outline: none; }
.legacy input:focus, .legacy select:focus, .legacy textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--sb-act); }
.legacy .ok { background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); }
.legacy .err { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }
.legacy .warn { background: color-mix(in srgb, var(--amber) 12%, transparent); color: var(--amber); }

/* ── Classes específicas de telas (CSS perdido no reskin em massa, re-tematizado) ── */
.legacy .page-title { font-family: 'Montserrat', sans-serif; font-size: 1.2rem; font-weight: 800; color: var(--txt); margin-bottom: 2px; }
.legacy .sub, .legacy .subtitle, .legacy .sec-desc, .legacy .rule-ref-sub, .legacy .cx-card-sub, .legacy .tiny-card-sub, .legacy .td-desc-sub { font-size: .82rem; color: var(--txt2); }
.legacy .section-title, .legacy .sec-title, .legacy .label, .legacy .lbl { font-size: .8rem; font-weight: 700; color: var(--txt2); }
.legacy .topo, .legacy .header, .legacy .cat-toolbar, .legacy .cal-nav, .legacy .vista-toggle, .legacy .actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.legacy .tip, .legacy .info-box { background: color-mix(in srgb, var(--blue) 10%, transparent); color: var(--blue); border: 1px solid color-mix(in srgb, var(--blue) 28%, transparent); border-radius: 8px; padding: 10px 13px; font-size: .84rem; margin-bottom: 14px; }
.legacy .msg { font-size: .82rem; padding: 4px 10px; border-radius: 6px; }
.legacy .error { color: var(--red); font-size: .85rem; }
.legacy .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--txt); color: #fff; padding: 10px 16px; border-radius: 8px; font-size: .85rem; box-shadow: var(--shadow-m); z-index: 200; }
/* badges de status */
.legacy .badge-ok, .legacy .badge-today, .legacy .badge-strong { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.legacy .badge-pend, .legacy .badge-soon, .legacy .badge-mid { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }
.legacy .badge-past, .legacy .badge-weak { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
.legacy .td-badge { font-size: .7rem; }
/* botões de conteúdo específicos */
.legacy .btn-save, .legacy .btn-add { background: var(--brand); border: 1px solid var(--brand); color: var(--brand-fg); padding: 7px 14px; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: .84rem; }
.legacy .btn-del { background: var(--red); border: 1px solid var(--red); color: #fff; padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: .82rem; }
.legacy .btn-eye, .legacy .btn-sm, .legacy .ofx-btn, .legacy .vista-btn, .legacy .cal-nav-btn, .legacy .back { background: var(--card); border: 1px solid var(--border-2); color: var(--txt2); padding: 6px 11px; border-radius: 8px; cursor: pointer; font-size: .8rem; text-decoration: none; }
.legacy .vista-btn.act, .legacy .vista-toggle .act { background: var(--brand); border-color: var(--brand); color: var(--brand-fg); }
.legacy .aliq-input { width: 90px; padding: 6px 8px; border: 1px solid var(--border-2); border-radius: 6px; background: var(--card); color: var(--txt); text-align: right; font-variant-numeric: tabular-nums; }
/* DRE */
.legacy .dre { width: 100%; border-collapse: collapse; }
.legacy .dre-row, .legacy .dre td, .legacy .dre tr > * { padding: 7px 12px; border-bottom: 1px solid var(--border); font-size: .86rem; }
.legacy .dre .grupo, .legacy .grupo { font-weight: 700; color: var(--txt); background: var(--card-2); }
.legacy .dre .subtotal, .legacy .subtotal { font-weight: 700; border-top: 1px solid var(--border-2); }
.legacy .dre-indent { padding-left: 28px; color: var(--txt2); }
.legacy .val { text-align: right; font-variant-numeric: tabular-nums; }
/* Margens — hierarquia/acordeão */
.legacy .section, .legacy .add-form, .legacy .loja-form, .legacy .rule-edit { background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); margin-bottom: 12px; }
.legacy .sec-header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; }
.legacy .sec-body { padding: 8px 16px 14px; }
.legacy .sec-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; background: var(--sb-act); color: var(--brand-d); }
.legacy .hier-item, .legacy .rule-row, .legacy .rule-ref { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.legacy .hier-item:last-child, .legacy .rule-row:last-child { border-bottom: none; }
.legacy .hier-chart { height: 8px; border-radius: 999px; background: var(--brand); }
.legacy .arrow { color: var(--txt3); transition: transform .15s; }
.legacy h1, .legacy .h1 { font-family: 'Montserrat', sans-serif; }
/* Caixa — cards e calendário */
.legacy .cx-cards, .legacy .tiny-cards, .legacy .fluxo-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; }
.legacy .cx-card, .legacy .tiny-card, .legacy .fluxo-card-pagar, .legacy .fluxo-card-receber { background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 12px 14px; }
.legacy .cx-card-wide { grid-column: span 2; }
.legacy .cx-card-label, .legacy .tiny-card-label { font-size: .7rem; color: var(--txt2); margin-bottom: 4px; }
.legacy .cx-card-value, .legacy .tiny-card-value, .legacy .saldo { font-family: 'Montserrat', sans-serif; font-size: 1.25rem; font-weight: 800; color: var(--txt); font-variant-numeric: tabular-nums; }
.legacy .fluxo-card-pagar { border-left: 3px solid var(--red); }
.legacy .fluxo-card-receber { border-left: 3px solid var(--green); }
.legacy .cal-mes { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.legacy .cal-item, .legacy .cal-sem { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 8px; min-height: 64px; }
.legacy .cal-dia-num { font-size: .72rem; color: var(--txt2); font-weight: 600; }
.legacy .cal-cel-acum, .legacy .cal-sem-acum { font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.legacy .outro-mes { opacity: .45; }
.legacy .cat-list { display: flex; flex-direction: column; gap: 4px; }
.legacy .cat-chk { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--txt); padding: 3px 0; }
.legacy .pagar, .legacy .lbl-pagar { color: var(--red); }
.legacy .receber, .legacy .lbl-receber { color: var(--green); }
.legacy .td-date { white-space: nowrap; color: var(--txt2); }
.legacy .td-num { text-align: right; font-variant-numeric: tabular-nums; }
.legacy .swatch, .legacy .cor-row span[style*="background"] { width: 16px; height: 16px; border-radius: 4px; display: inline-block; }
.legacy .cx-atualizado { font-size: .74rem; color: var(--txt3); }
/* Modais genéricos de telas (nomes variados) */
.legacy .modal-ov, .legacy .overlay, .legacy .cor-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 150; display: flex; align-items: center; justify-content: center; }
/* .overlay é alternado por classe .open (modal de usuários) — escondido por padrão */
.legacy .overlay { display: none; }
.legacy .overlay.open { display: flex; }
.legacy .modal-box, .legacy .modal, .legacy .cor-modal { background: var(--card); color: var(--txt); border-radius: 14px; box-shadow: var(--shadow-m); max-width: 90vw; width: 460px; overflow: hidden; }
.legacy .modal-head, .legacy .modal-header { padding: 14px 18px; border-bottom: 1px solid var(--border); font-weight: 700; display: flex; align-items: center; justify-content: space-between; }
.legacy .modal-body { padding: 16px 18px; }
.legacy .modal-foot, .legacy .modal-footer { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }
.legacy .modal-close { cursor: pointer; color: var(--txt3); background: none; border: none; font-size: 1.1rem; }
/* Admin / status misc */
.legacy .form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.legacy .sec { margin-bottom: 16px; }
.legacy .empty, .legacy .empty-state, .legacy .loading { text-align: center; color: var(--txt3); padding: 32px; }
.legacy .hidden { display: none; }

/* ── Anúncios ML / Promoções (client-rendered) — re-tematização ── */
.legacy .thumb, .legacy .thumb-ph { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); background: var(--card-2); flex-shrink: 0; }
.legacy .thumb-ph { display: inline-flex; align-items: center; justify-content: center; color: var(--txt3); font-size: .7rem; }
.legacy .badge-active, .legacy .badge-ativa, .legacy .badge-mini-green { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); padding: 1px 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; }
.legacy .badge-paused, .legacy .badge-mini-orange { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); padding: 1px 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; }
.legacy .badge-closed, .legacy .badge-none, .legacy .badge-mini-gray { background: var(--card-2); color: var(--txt2); padding: 1px 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; }
.legacy .badge-mini { padding: 1px 7px; border-radius: 999px; font-size: .68rem; font-weight: 700; }
.legacy .linked { color: var(--green); } .legacy .unlinked { color: var(--txt3); }
.legacy .link-btn, .legacy .unlink-btn, .legacy .cancel-btn, .legacy .sync-btn, .legacy .sync-drop-item, .legacy .btn-gray, .legacy .btn-dbg, .legacy .btn-dbg2, .legacy .btn-link, .legacy .btn-xs { background: var(--card); border: 1px solid var(--border-2); color: var(--txt2); padding: 5px 10px; border-radius: 7px; cursor: pointer; font-size: .78rem; text-decoration: none; }
.legacy .btn-blue { background: var(--blue); border: 1px solid var(--blue); color: #fff; padding: 6px 12px; border-radius: 7px; cursor: pointer; font-size: .8rem; }
.legacy .btn-green { background: var(--green); border: 1px solid var(--green); color: #fff; padding: 6px 12px; border-radius: 7px; cursor: pointer; font-size: .8rem; }
.legacy .btn-orange { background: var(--amber); border: 1px solid var(--amber); color: #fff; padding: 6px 12px; border-radius: 7px; cursor: pointer; font-size: .8rem; }
.legacy .count-bar, .legacy .toolbar, .legacy .card-head, .legacy .af-head, .legacy .analise-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.legacy .sel-count { font-weight: 700; color: var(--brand-d); }
.legacy .dash-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.legacy .dash-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 12px 14px; }
.legacy .dash-lbl, .legacy .lbl { font-size: .7rem; color: var(--txt2); margin-bottom: 4px; }
.legacy .dash-num, .legacy .sub-val, .legacy .memoria-total { font-family: 'Montserrat', sans-serif; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--txt); }
.legacy .analise-box, .legacy .memoria-calc, .legacy .preco-calc, .legacy .sem-custo-wrap, .legacy .sr-wrap, .legacy .ac-wrap { background: var(--card-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.legacy .analise-margem-ok { color: var(--green); font-weight: 700; }
.legacy .analise-oferta-invalida, .legacy .analise-err, .legacy .sc-aviso, .legacy .row-sem-custo { color: var(--red); }
.legacy .analise-sugerida, .legacy .sugerida-row { color: var(--brand-d); }
.legacy .sugerida-row-pendente { color: var(--amber); }
.legacy .ac-list, .legacy .af-lista, .legacy .sr-item { max-height: 240px; overflow-y: auto; }
.legacy .ac-item, .legacy .af-item { padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: .84rem; }
.legacy .ac-item:hover, .legacy .af-item:hover { background: var(--row-h); }
.legacy .ac-sku { font-weight: 600; color: var(--brand-d); }
.legacy .oferta-badge, .legacy .oferta-row { color: var(--brand-d); }
.legacy .alerta-frete { background: color-mix(in srgb, var(--amber) 12%, transparent); color: var(--amber); border-radius: 8px; padding: 8px 12px; }
.legacy .sc-titulo, .legacy .analise-outros-title { font-weight: 700; color: var(--txt); }
.legacy .pager { display: flex; gap: 6px; justify-content: center; padding: 14px; }
.legacy .pager button, .legacy .pager a { padding: 5px 11px; border: 1px solid var(--border-2); border-radius: 6px; background: var(--card); color: var(--txt); cursor: pointer; font-size: .8rem; text-decoration: none; }
.legacy .pager .act, .legacy .pager button.act { background: var(--brand); color: var(--brand-fg); border-color: var(--brand); }
.legacy .inline-form { background: var(--card-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-top: 8px; }