:root { --laranja: #C3430E; --verde: #1B8A3C; --cinza: #6b6b6b; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; background: #faf7f4; color: #222; }
.oculto { display: none !important; }

#faixa-demo { background: #7a3df0; color: #fff; text-align: center; font-size: 12px; padding: 4px 8px; }

.tela { max-width: 380px; margin: 0 auto; padding: 48px 24px; display: flex; flex-direction: column; gap: 12px; }
.tela h1 { color: var(--laranja); text-align: center; margin-bottom: 8px; }
.sub { text-align: center; color: var(--cinza); font-size: 14px; }

input, select { padding: 14px; font-size: 17px; border: 1px solid #d9d2cb; border-radius: 10px; background: #fff; width: 100%; }
input:focus, select:focus { outline: 2px solid var(--laranja); border-color: transparent; }
label { font-size: 13px; color: var(--cinza); margin-top: 8px; display: block; }

.botao-principal { background: var(--laranja); color: #fff; border: 0; border-radius: 10px; padding: 16px; font-size: 17px; font-weight: 700; cursor: pointer; width: 100%; }
.botao-principal:active { opacity: .85; }
.botao-secundario { background: #fff; color: var(--laranja); border: 2px solid var(--laranja); border-radius: 10px; padding: 14px; font-size: 16px; font-weight: 700; cursor: pointer; width: 100%; }
.botao-whats { background: #25D366; color: #fff; border: 0; border-radius: 10px; padding: 16px; font-size: 17px; font-weight: 700; cursor: pointer; width: 100%; }
.botao-texto { background: none; border: 0; color: var(--cinza); padding: 12px; font-size: 15px; cursor: pointer; width: 100%; }
.erro { color: #c0272d; font-size: 14px; min-height: 18px; text-align: center; }

#tela-app { max-width: 440px; margin: 0 auto; }
header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: var(--laranja); color: #fff; font-weight: 700; }
#cab-usuario { font-weight: 400; font-size: 13px; opacity: .9; }
nav { display: flex; background: #fff; border-bottom: 1px solid #e6ded6; }
nav button { flex: 1; padding: 12px 4px; border: 0; background: none; font-size: 15px; color: var(--cinza); cursor: pointer; border-bottom: 3px solid transparent; }
nav button.ativa { color: var(--laranja); font-weight: 700; border-bottom-color: var(--laranja); }

.aba { padding: 20px 16px; display: flex; flex-direction: column; gap: 10px; }
.campo-valor { font-size: 34px; text-align: center; font-weight: 700; }

.qr-valor { font-size: 40px; font-weight: 800; text-align: center; }
.qr-nome { text-align: center; color: var(--cinza); margin-bottom: 4px; }
#qr-imagem-caixa { display: flex; flex-direction: column; align-items: center; gap: 6px; }
#qr-imagem { width: 240px; height: 240px; border: 1px solid #e6ded6; border-radius: 12px; background: #fff; }
#qr-demo-aviso { font-size: 13px; color: #7a3df0; font-weight: 700; }

.pill { text-align: center; padding: 12px; border-radius: 999px; font-weight: 700; }
.pill.aguardando { background: #fff3cd; color: #8a6d00; }
.pill.paga { background: #d9f2e0; color: var(--verde); font-size: 18px; }
.pill.mini { padding: 3px 10px; font-size: 12px; }

.total-caixa { background: #fff; border: 1px solid #e6ded6; border-radius: 12px; padding: 14px; font-size: 17px; font-weight: 700; }
.linha-cob { background: #fff; border: 1px solid #eee7e0; border-radius: 10px; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.linha-cob .info { display: flex; flex-direction: column; }
.linha-cob .nome { font-weight: 600; }
.linha-cob .meta { font-size: 12px; color: var(--cinza); }
.linha-cob .valor { font-weight: 800; white-space: nowrap; }

.linha-usuario { background: #fff; border: 1px solid #eee7e0; border-radius: 10px; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; }
.linha-usuario button { border: 1px solid #d9d2cb; background: #fff; border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 13px; margin-left: 6px; }
h3 { margin-top: 12px; color: var(--laranja); }