/* Soldadura Visual: identidade do material (grafite + laranja + branco + cinza metálico).
   Carregado DEPOIS do app.css e do <style> da página, por isso sobrescreve. */
:root {
  --accent: #FF6A00;
  --accent-ring: rgba(255, 106, 0, .25);
  --graph: #141517;
  --graph-2: #1c1e21;
  --metal: #9aa0a6;
  --ink: #15171A;
  --head: "Bahnschrift", "Arial Narrow", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
html { background: #141517; }
body {
  background: #141517 radial-gradient(900px 520px at 50% -80px, #2a2c30 0%, rgba(20, 21, 23, 0) 72%);
  color: #e8e9eb;
  min-height: 100vh;
}
/* Faixas laranjas diagonais nos cantos, como no banner do material */
body::before, body::after {
  content: ""; position: fixed; width: 230px; height: 230px; pointer-events: none; z-index: 0;
  background: linear-gradient(135deg, var(--accent) 0 12px, transparent 12px 24px, var(--accent) 24px 32px, transparent 32px);
}
body::before { top: 0; left: 0; }
body::after { bottom: 0; right: 0; transform: rotate(180deg); }
.brandbar, .wrap { position: relative; z-index: 1; }
.brandbar { background: rgba(8, 8, 9, .92); }

/* Banner do produto */
.banner { border-radius: 10px; border: 1px solid #2f3236; box-shadow: 0 14px 34px rgba(0, 0, 0, .45); background: #141517; margin-bottom: 18px; }

/* Cartões: painéis brancos como as páginas do manual, com faixa preta no título */
.card { border-radius: 10px; overflow: hidden; border: 0; box-shadow: 0 10px 28px rgba(0, 0, 0, .35); color: var(--ink); }
.card .sec-title {
  background: #0c0c0d; color: #fff; margin: -20px -20px 18px; padding: 13px 20px;
  border-bottom: 3px solid var(--accent); text-transform: uppercase; letter-spacing: .07em;
  font-family: var(--head); font-size: 15px; font-weight: 800;
}
.card .sec-title .ic { background: var(--accent); color: #111; border-radius: 4px; width: 26px; height: 26px; }
label.f { text-transform: uppercase; letter-spacing: .06em; font-size: 12.5px; font-weight: 700; color: #3a3d42; }
.input { border: 1px solid #b6bbc1; border-radius: 6px; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

/* Produto: nome e preço no estilo das capas */
.product .name { font-family: var(--head); text-transform: uppercase; letter-spacing: .03em; font-weight: 800; font-size: 18px; color: #111; }
.product .price { color: var(--accent); font-family: var(--head); font-weight: 800; }
.thumb.cv { border-radius: 4px; box-shadow: 0 6px 14px rgba(0, 0, 0, .35); }
.lines .row.total { color: #111; }

/* Botão laranja */
.btn.buy {
  border-radius: 6px; font-family: var(--head); letter-spacing: .07em;
  background: linear-gradient(180deg, #FF8A2B, #FF6A00); color: #111; box-shadow: 0 10px 24px rgba(255, 106, 0, .28);
}
.go { border-radius: 6px !important; font-family: var(--head); letter-spacing: .07em; }

/* Textos fora dos cartões (fundo escuro) */
header.top .secure { color: var(--metal); }
.badges .l1 { color: var(--metal); }
.badges .l2 { color: #fff; }
.badge-i { background: #26292d; color: var(--accent); }
.pfoot, .pfoot a { color: var(--metal); }
.pfoot a:hover { color: #fff; }
.pfoot .powered img { filter: brightness(0) invert(1); opacity: .7; }
.pfoot .sep { background: #3a3d42; }
.legal { color: var(--metal); }
.legal a { color: #fff; }
.legal b { color: #fff; }

/* Aviso de ajuda: se a compra não passar, falar com o suporte */
.helpnote { margin: 14px 0 0; padding: 12px 14px; border-left: 4px solid var(--accent); background: #FFF3E8; color: #2b2e33; font-size: 14px; line-height: 1.5; border-radius: 0 8px 8px 0; }
.helpnote a, .errhelp a { color: #111; font-weight: 700; }
.errhelp { display: block; margin-top: 8px; color: #2b2e33; }

/* Página de agradecimento: o painel branco segue como "página do manual" */
.support { border-left-color: var(--accent); }

@media (max-width: 640px) {
  body::before, body::after { width: 120px; height: 120px; }
  .card .sec-title { font-size: 14px; }
}