* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.4 system-ui, sans-serif; background: #f4f5f7; color: #1d2129; }

.topo { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: #161b22; color: #fff; }
.topo form { margin: 0; }
.topo button { background: none; border: 1px solid #8b949e; border-radius: 6px; color: #fff; padding: 4px 12px; cursor: pointer; }

main { padding: 16px; }
.lido { margin: 0 0 10px; color: #5f6b7a; }

.quadro { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 12px; overflow-x: auto; }
.coluna { background: #e9ecf0; border-radius: 8px; padding: 8px; min-height: 60vh; }
.coluna h2 { display: flex; justify-content: space-between; margin: 4px 4px 10px; font-size: 14px; }
.qtd { background: #fff; border-radius: 10px; padding: 0 8px; }

.cartao { background: #fff; border: 1px solid #d0d4da; border-radius: 6px; padding: 8px; margin-bottom: 8px; }
.cartao small { color: #5f6b7a; }
.cartao .linha { display: flex; justify-content: space-between; color: #5f6b7a; white-space: nowrap; }
.vazio { color: #5f6b7a; text-align: center; }

.tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.tag { background: #e9ecf0; border-radius: 10px; padding: 0 8px; font-size: 12px; }
.via-aguardando-pagamento, .via-falha-na-tentativa-de-pagamento { background: #fff3cd; }
.via-pagamento-autorizado-aguardando-envio { background: #d1e7dd; }
.tag-transacao { background: #cfe2ff; }
.cartao summary { cursor: pointer; color: #0969da; font-size: 12px; margin-top: 4px; }
.tudo { max-height: 50vh; overflow: auto; font-size: 12px; }
.tudo h3 { font-size: 12px; margin: 8px 0 4px; }
.tudo dt { color: #5f6b7a; }
.tudo dd { margin: 0 0 4px; overflow-wrap: anywhere; }

.login { max-width: 320px; margin: 10vh auto; background: #fff; padding: 24px; border-radius: 8px; }
.login input { width: 100%; padding: 8px; }
.login button { width: 100%; padding: 8px; }