/* Os tokens do :root da "Bancada" (app do Clube), iguais ao esboço aprovado. Sem fonte de fora. */
:root {
  --ground: #15120E; --surface: #1E1B16; --raised: #262119; --line: #342D22;
  --text: #ECE2D6; --text-dim: #A69C8B; --text-mute: #8E8474;
  --accent: #EE9712; --accent-dim: #C97F10; --accent-wash: rgba(238,151,18,.12); --accent-deep: rgba(238,151,18,.06);
  --brand-red: #CA0114; --alert: #F0503C;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--ground); color: var(--text); font: 15px/1.5 var(--ui); -webkit-font-smoothing: antialiased; }
.pagina { max-width: 440px; margin: 0 auto; padding: 18px 16px 40px; }

.marca { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.marca svg { width: 20px; height: 20px; color: var(--brand-red); }
h1 { font-size: 24px; line-height: 1.2; font-weight: 700; margin: 18px 0 6px; letter-spacing: -0.01em; }
.aviso { margin: 0 0 20px; color: var(--text-dim); font-size: 14px; }
.aviso b { color: var(--accent); font-weight: 600; }

/* Carregando e falha. */
.estado { margin: 0 0 16px; color: var(--text-dim); font-size: 14px; }
.estado p { margin: 0 0 10px; }
.estado.falha p { color: var(--alert); }
button.tentar { width: auto; min-height: 44px; padding: 0 18px; background: transparent; color: var(--accent);
  border: 1px solid var(--accent-dim); font-size: 15px; }

/* O cupom: um canhoto com picote entre o codigo e o botao. */
/* O degrade dourado do canto e o mesmo do .cupom.lido do Clube atual (Estilo.html). */
.cupom { position: relative; border: 1px solid var(--accent-dim); border-radius: 10px; margin-bottom: 16px;
  background: radial-gradient(120% 140% at 0% 0%, var(--accent-deep) 0%, transparent 62%), var(--surface); }
.topo { padding: 14px 16px 16px; }
.meta { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--text-mute); }
.meta span:first-child { font-weight: 700; color: var(--text); }
/* Vermelho de alerta da Bancada: o vermelho do cadeado (#CA0114) some no fundo escuro. */
.meta span:last-child { color: var(--alert); }
.codigo { font: 700 34px/1.1 var(--mono); letter-spacing: .04em; color: var(--accent); margin: 10px 0 6px;
  word-break: break-all; user-select: all; -webkit-user-select: all; }
.regra { font-size: 14px; color: var(--text-dim); margin: 0; }
.picote { position: relative; height: 0; border-top: 2px dashed var(--line); margin: 0 14px; }
/* O recorte: o circulo inteiro, da cor do fundo, cobre a borda do card; so a metade de dentro tem linha
   (duas bordas vizinhas giradas 45 graus viram meia-volta). */
.picote::before, .picote::after { content: ""; position: absolute; top: -10px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--ground); border: 1px solid transparent; transform: rotate(45deg); }
.picote::before { left: -25px; border-top-color: var(--accent-dim); border-right-color: var(--accent-dim); }
.picote::after { right: -25px; border-bottom-color: var(--accent-dim); border-left-color: var(--accent-dim); }
.canhoto { padding: 14px 16px 16px; }
button { width: 100%; min-height: 50px; border: 0; border-radius: 8px; background: var(--accent); color: #1a1209;
  font: 700 17px/1 var(--ui); cursor: pointer; }
button:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
button.copiado { background: var(--text); }
.falha-copia { margin: 10px 0 0; font-size: 14px; color: var(--alert); }

/* Pagina vazia: um tiquete sem codigo, com o carimbo por cima. */
.cupom.vazio .codigo { color: var(--line); user-select: none; -webkit-user-select: none; }
.cupom.vazio .regra { color: var(--text); font-weight: 600; }
.cupom.vazio .canhoto { padding: 10px 16px; }
.carimbo { position: absolute; top: 26px; right: 18px; transform: rotate(-12deg); padding: 4px 12px;
  border: 3px double var(--alert); border-radius: 6px; color: var(--alert); font: 800 24px/1.1 var(--ui);
  letter-spacing: .12em; opacity: .9; pointer-events: none; }

footer { margin-top: 24px; font-size: 13px; color: var(--text-mute); }