:root {
  --fundo: #0f1115; --cartao: #1a1d24; --texto: #f2f3f5; --fraco: #a3a8b3; --borda: #2a2f3a;
  --destaque: #f5b301; --bom: #2fbf71; --ruim: #ff5d5d; --aviso: #ffb547;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fundo); color: var(--texto); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
body { min-height: 100vh; }
main { max-width: 440px; margin: 0 auto; padding: 20px 16px 40px; }
h1 { font-size: 26px; margin: 8px 0 4px; }
h2 { font-size: 20px; margin: 0 0 8px; }
p { line-height: 1.45; margin: 8px 0; }
.fraco { color: var(--fraco); font-size: 15px; }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 16px; padding: 18px; margin: 14px 0; }
.porta { font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -1px; }
.preco { font-size: 30px; font-weight: 800; color: var(--destaque); }
button, .botao { display: block; width: 100%; font-size: 19px; font-weight: 700; padding: 16px; border-radius: 14px; border: 0; cursor: pointer;
  background: var(--destaque); color: #111; margin: 10px 0; text-align: center; text-decoration: none; }
button.secundario { background: transparent; color: var(--texto); border: 1px solid var(--borda); }
button.perigo { background: var(--ruim); color: #fff; }
button:disabled { opacity: .5; cursor: default; }
input { width: 100%; font-size: 28px; letter-spacing: 8px; text-align: center; padding: 14px; border-radius: 12px; border: 1px solid var(--borda);
  background: #0b0d10; color: var(--texto); }
.qr { display: block; width: 240px; height: 240px; margin: 8px auto; background: #fff; border-radius: 12px; image-rendering: pixelated; }
.copia { font-family: ui-monospace, monospace; font-size: 12px; word-break: break-all; background: #0b0d10; padding: 10px; border-radius: 10px; color: var(--fraco); max-height: 80px; overflow: hidden; }
.codigo { font-size: 44px; font-weight: 800; letter-spacing: 10px; text-align: center; color: var(--destaque); margin: 6px 0; }
.ok { color: var(--bom); } .erro { color: var(--ruim); } .alerta { color: var(--aviso); }
.grande { font-size: 22px; font-weight: 700; }
.girando { width: 42px; height: 42px; border: 4px solid var(--borda); border-top-color: var(--destaque); border-radius: 50%; margin: 18px auto; animation: g 1s linear infinite; }
@keyframes g { to { transform: rotate(360deg); } }
.escondido { display: none !important; }

/* painel */
.painel main { max-width: 980px; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.p { background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; padding: 12px; }
.p b { font-size: 28px; }
.etq { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: #2a2f3a; margin: 2px 0; }
.etq.livre { background: #17432c; color: #7fe3ad; } .etq.ocupada { background: #4a3a12; color: #ffd36b; }
.etq.reservada { background: #23324d; color: #9cc0ff; } .etq.bloqueada { background: #4d1f1f; color: #ff9c9c; }
.p button { font-size: 14px; padding: 9px; margin: 6px 0 0; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
td, th { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal .cartao { max-width: 400px; width: 100%; }
.modal input { font-size: 16px; letter-spacing: 0; text-align: left; }
@media (max-width: 480px) { .grade { grid-template-columns: repeat(2, 1fr); } }