:root{
    --livre:#ffffff; --livre-b:#cfd8dc;
    --sel:#1976d2;
    --reservado:#fff3cd; --reservado-b:#e0a800;
    --aguardando:#ffe0b2; --aguardando-b:#ef6c00;
    --confirmado:#c8e6c9; --confirmado-b:#2e7d32;
    --tinta:#263238; --suave:#607d8b;
  }
  *{box-sizing:border-box}
  body{margin:0;padding:16px 16px 100px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
       color:var(--tinta);background:#f5f7f8;-webkit-text-size-adjust:100%}
  .wrap{max-width:680px;margin:0 auto}
  header{text-align:center;margin-bottom:18px}
  h1{font-size:22px;margin:0 0 6px}
  .premio{font-size:15px;color:var(--suave);margin:0 0 10px}
  .destaque{display:inline-block;background:#263238;color:#fff;padding:7px 16px;
            border-radius:20px;font-size:15px;font-weight:600}
  .sorteio{font-size:13px;color:var(--suave);margin-top:8px}

  .legenda{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
           margin:18px 0;font-size:12px;color:var(--suave)}
  .legenda span{display:flex;align-items:center;gap:5px}
  .bolinha{width:12px;height:12px;border-radius:3px;border:1px solid}
  .b-livre{background:var(--livre);border-color:var(--livre-b)}
  .b-sel{background:var(--sel);border-color:var(--sel)}
  .b-res{background:var(--reservado);border-color:var(--reservado-b)}
  .b-agu{background:var(--aguardando);border-color:var(--aguardando-b)}
  .b-con{background:var(--confirmado);border-color:var(--confirmado-b)}

  .grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:8px}
  .num{aspect-ratio:1;border-radius:10px;border:1.5px solid var(--livre-b);
       background:var(--livre);display:flex;flex-direction:column;
       align-items:center;justify-content:center;font-weight:700;font-size:17px;
       cursor:pointer;transition:transform .08s,background .12s;user-select:none;
       font-family:inherit;color:inherit;padding:0}
  .num:focus-visible{outline:3px solid rgba(25,118,210,.35);outline-offset:2px}
  .num:active{transform:scale(.94)}
  .num small{font-size:9px;font-weight:500;opacity:.75;margin-top:2px;
             max-width:95%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .num.selecionado{background:var(--sel);border-color:var(--sel);color:#fff;
                   box-shadow:0 2px 8px rgba(25,118,210,.4)}
  .num.reservado{background:var(--reservado);border-color:var(--reservado-b);cursor:not-allowed;opacity:.75}
  .num.aguardando{background:var(--aguardando);border-color:var(--aguardando-b);cursor:not-allowed}
  .num.confirmado{background:var(--confirmado);border-color:var(--confirmado-b);cursor:not-allowed}
  .num.perdido{animation:piscar .5s 3}
  @keyframes piscar{50%{background:#ffcdd2;border-color:#c62828}}

  .aviso{margin-top:22px;font-size:12px;color:var(--suave);text-align:center;line-height:1.6}

  /* Barra flutuante do carrinho */
  .barra{position:fixed;left:0;right:0;bottom:0;background:#fff;
         box-shadow:0 -3px 16px rgba(0,0,0,.16);padding:12px 16px;
         display:none;z-index:40}
  .barra.on{display:block}
  .barra-in{max-width:680px;margin:0 auto;display:flex;align-items:center;gap:12px}
  .barra-txt{flex:1;line-height:1.35}
  .barra-txt b{display:block;font-size:17px}
  .barra-txt span{font-size:12.5px;color:var(--suave)}
  .barra button{padding:13px 22px;border:none;border-radius:10px;background:#2e7d32;
                color:#fff;font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap}
  .limpar{background:none;border:none;color:var(--suave);font-size:12.5px;
          text-decoration:underline;cursor:pointer;padding:0;margin-top:3px}

  /* Modal */
  .fundo{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;
         align-items:flex-end;justify-content:center;z-index:50}
  .fundo.on{display:flex}
  .modal{background:#fff;border-radius:16px 16px 0 0;padding:22px;width:100%;
         max-width:520px;max-height:92vh;overflow-y:auto}
  @media(min-width:560px){.fundo{align-items:center;padding:20px}.modal{border-radius:16px}}
  .modal h2{margin:0 0 4px;font-size:19px}
  .passo{font-size:12px;text-transform:uppercase;letter-spacing:.5px;
         color:var(--suave);font-weight:700;margin:18px 0 8px}
  .resumo{background:#eceff1;border-radius:10px;padding:14px;text-align:center}
  .resumo .nums{font-size:13.5px;color:var(--suave);margin-bottom:6px}
  .resumo .total{font-size:30px;font-weight:800;letter-spacing:-.5px}
  .resumo .conta{font-size:12.5px;color:var(--suave);margin-top:3px}
  .pix{background:#eceff1;border-radius:10px;padding:12px;font-family:monospace;
       font-size:14px;word-break:break-all;text-align:center}
  .copiar{width:100%;margin-top:8px;padding:11px;border:none;border-radius:9px;
          background:#455a64;color:#fff;font-size:14px;font-weight:600;cursor:pointer}
  .qr{display:block;max-width:200px;margin:12px auto 0;border-radius:8px}

  label{display:block;font-size:13px;font-weight:600;margin:12px 0 5px}
  input[type=text],input[type=tel]{width:100%;padding:11px;border:1.5px solid #cfd8dc;
       border-radius:9px;font-size:16px;font-family:inherit}
  input[type=file]{width:100%;font-size:13px;padding:10px;border:1.5px dashed #cfd8dc;
       border-radius:9px;background:#fafafa}
  .divergente{background:#fff8e1;border-left:3px solid #e0a800;padding:10px 12px;
              border-radius:0 8px 8px 0;font-size:13px;margin-top:8px;display:none;line-height:1.5}
  .enviar{width:100%;margin-top:18px;padding:14px;border:none;border-radius:10px;
          background:#2e7d32;color:#fff;font-size:16px;font-weight:700;cursor:pointer}
  .enviar:disabled{background:#b0bec5;cursor:wait}
  .cancelar{width:100%;margin-top:9px;padding:11px;border:none;border-radius:9px;
            background:transparent;color:var(--suave);font-size:14px;cursor:pointer}
  .cronometro{text-align:center;font-size:13px;color:#ef6c00;font-weight:600;margin-top:14px}
  .erro{background:#ffebee;color:#c62828;padding:11px;border-radius:9px;
        font-size:13.5px;margin-top:12px;display:none}
  .ok{text-align:center;padding:22px 10px}
  .ok .check{font-size:46px}
  .ok h2{margin:12px 0 8px}
  .ok p{color:var(--suave);font-size:14.5px;line-height:1.6;margin:0}
  .ok .lista{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:14px 0}
  .ok .lista i{background:#c8e6c9;color:#1b5e20;font-style:normal;font-weight:700;
               padding:6px 11px;border-radius:8px;font-size:15px}
  .carregando{text-align:center;padding:50px;color:var(--suave)}