:root {
  --barro:#C2410C; --barro-fraco:#FDEBE0; --ceu:#1F6B8E; --ceu-fraco:#E2F0F6;
  --fundo:#F6F2EC; --painel:#FFF; --painel-2:#EFE9E0; --borda:#E0D7CA; --borda-forte:#CFC2B0;
  --texto:#221A14; --texto-2:#6B5D4F; --texto-3:#938575;
  --ok:#2F7D4F; --ok-fraco:#E4F1E8; --erro:#A32C2C;
  --num: ui-monospace,"SF Mono","Roboto Mono",Consolas,monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --barro:#F4762F; --barro-fraco:#3A1F11; --ceu:#6FB6D6; --ceu-fraco:#16303C;
    --fundo:#14100D; --painel:#1E1814; --painel-2:#29211B; --borda:#33291F; --borda-forte:#4A3B2E;
    --texto:#F4EDE4; --texto-2:#B6A797; --texto-3:#877A6C;
    --ok:#6BC48D; --ok-fraco:#122A1C; --erro:#F08A8A;
  }
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; }
body { margin:0; background:var(--fundo); color:var(--texto); font-size:16px; line-height:1.5;
  font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased; }
#app { max-width:560px; margin:0 auto; min-height:100%; display:flex; flex-direction:column; }
.topo { padding:16px 18px 12px; border-bottom:1px solid var(--borda);
  display:flex; justify-content:space-between; align-items:flex-end; gap:12px; }
.topo h1 { margin:0; font-size:23px; font-weight:900; text-transform:uppercase; letter-spacing:-.02em; line-height:1; }
.topo .oi { margin:0 0 3px; font-size:12px; color:var(--texto-2); }
.corpo { flex:1; padding:15px; display:flex; flex-direction:column; gap:13px; padding-bottom:80px; }
.cartao { background:var(--painel); border:1px solid var(--borda); border-radius:14px; padding:14px; }
.cartao.destaque { border-color:var(--barro); background:var(--barro-fraco); }
.rotulo { font-family:var(--num); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--texto-3); margin:0 0 8px; }
.linha { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pilha { display:flex; flex-direction:column; gap:3px; min-width:0; }
.grande { font-family:var(--num); font-variant-numeric:tabular-nums; font-size:33px; font-weight:700;
  line-height:1; letter-spacing:-.02em; }
.grande small { font-size:15px; font-weight:600; color:var(--texto-2); }
.turma { font-weight:650; font-size:15px; line-height:1.25; }
.menor { font-size:12.5px; color:var(--texto-2); }
.fita { display:inline-block; font-family:var(--num); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; padding:3px 8px; border-radius:6px; white-space:nowrap; }
.f-cohab { color:var(--barro); background:var(--barro-fraco); }
.f-oasis { color:var(--ceu); background:var(--ceu-fraco); }
.f-ok { color:var(--ok); background:var(--ok-fraco); }
.trilho { height:8px; border-radius:4px; background:var(--painel-2); margin-top:10px; display:flex; overflow:hidden; }
.trilho i { background:var(--barro); }
.bt { font:inherit; font-size:15px; font-weight:650; border-radius:11px; padding:12px 14px;
  border:1px solid transparent; cursor:pointer; width:100%;
  /* <a> tambem usa .bt: sem display de bloco ele fica inline e monta em cima do texto */
  display:block; text-align:center; text-decoration:none; box-sizing:border-box; }
.bt:active { transform:translateY(1px); }
.bt-cheio { background:var(--barro); color:#fff; }
.bt-vazio { background:transparent; color:var(--texto); border-color:var(--borda-forte); }
.bt-perigo { background:transparent; color:var(--erro); border-color:var(--borda-forte); }
.bt:disabled { opacity:.45; }
.bt-fino { width:auto; padding:8px 12px; font-size:13px; }
input { font:inherit; font-size:17px; width:100%; padding:13px 14px; border-radius:11px;
  border:1px solid var(--borda-forte); background:var(--painel); color:var(--texto); }
input:focus { outline:2px solid var(--barro); outline-offset:1px; }
.tira { display:flex; gap:7px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.tira::-webkit-scrollbar { display:none; }
.dia { flex:0 0 auto; width:54px; text-align:center; padding:8px 0; border:1px solid var(--borda);
  border-radius:12px; background:var(--painel); font-family:var(--num); cursor:pointer; color:inherit; }
.dia b { display:block; font-size:17px; }
.dia span { display:block; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-3); }
.dia[aria-selected="true"] { background:var(--barro); border-color:var(--barro); }
.dia[aria-selected="true"] b, .dia[aria-selected="true"] span { color:#fff; }
.dia i { display:block; width:5px; height:5px; border-radius:50%; background:var(--barro); margin:3px auto 0; }
.dia[aria-selected="true"] i { background:#fff; }
.aula { display:grid; grid-template-columns:54px 1fr auto; gap:11px; align-items:center;
  background:var(--painel); border:1px solid var(--borda); border-radius:14px; padding:12px; }
.aula.minha { border-color:var(--barro); background:var(--barro-fraco); }
.aula.travada { opacity:.6; }
.aula .h { font-family:var(--num); font-size:17px; font-weight:700; }
.vagas { font-family:var(--num); font-size:11px; color:var(--texto-2); }
.nota { font-size:12.5px; color:var(--texto-2); background:var(--painel-2); border-radius:10px; padding:9px 11px; }
.erro { font-size:13px; color:var(--erro); background:var(--barro-fraco); border-radius:10px; padding:10px 12px; }
.abas { position:fixed; bottom:0; left:0; right:0; max-width:560px; margin:0 auto;
  display:grid; grid-template-columns:repeat(5,1fr); background:var(--painel);
  border-top:1px solid var(--borda); padding-bottom:env(safe-area-inset-bottom); }
.aba { border:0; background:none; padding:11px 4px 13px; font-family:var(--num); font-size:9.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--texto-3); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:4px; }
.aba svg { width:20px; height:20px; }
.aba[aria-selected="true"] { color:var(--barro); }
.centro { flex:1; display:flex; flex-direction:column; justify-content:center; gap:14px; padding:24px 20px 60px; }
.marca { font-size:38px; font-weight:900; text-transform:uppercase; letter-spacing:-.03em; margin:0 0 4px; line-height:.95; }
.marca em { font-style:normal; color:var(--barro); }
.carregando { text-align:center; color:var(--texto-3); font-size:14px; padding:30px; }

/* ---------------- clube 22K points ---------------- */
.pontos-topo { display:flex; flex-direction:column; align-items:flex-end; gap:2px; cursor:pointer; }
.pontos-topo b { font-family:var(--num); font-size:19px; font-weight:700; color:var(--barro);
                 line-height:1; font-variant-numeric:tabular-nums; }
.pontos-topo span { font-family:var(--num); font-size:8.5px; letter-spacing:.1em;
                    text-transform:uppercase; color:var(--texto-3); }
.codigo { display:flex; align-items:center; justify-content:space-between; gap:10px;
          background:var(--painel-2); border-radius:11px; padding:11px 13px; margin-top:10px; }
.codigo b { font-family:var(--num); font-size:17px; letter-spacing:.06em; }
.brinde { display:grid; grid-template-columns:1fr auto; gap:11px; align-items:center;
          background:var(--painel); border:1px solid var(--borda); border-radius:14px;
          padding:12px; margin-bottom:9px; }
.brinde.perto { border-color:var(--barro); }
.barra-brinde { height:5px; border-radius:3px; background:var(--painel-2); margin-top:7px; overflow:hidden; }
.barra-brinde i { display:block; height:100%; background:var(--barro); }
.extrato-linha { display:flex; justify-content:space-between; align-items:baseline;
                 gap:10px; padding:6px 0; border-bottom:1px solid var(--borda); font-size:13.5px; }
.extrato-linha:last-child { border-bottom:0; }
.extrato-linha b { font-family:var(--num); font-variant-numeric:tabular-nums; }
.mais { color:var(--ok); }
.menos { color:var(--texto-3); }
.campo-app { display:flex; flex-direction:column; gap:4px; margin-bottom:11px; }
.campo-app label { font-family:var(--num); font-size:10px; letter-spacing:.1em;
                   text-transform:uppercase; color:var(--texto-3); }
.campo-app select { font:inherit; font-size:16px; padding:12px 13px; border-radius:11px;
                    border:1px solid var(--borda-forte); background:var(--painel); color:var(--texto); }


/* escolha de plano de quem esta entrando */
.opcao-plano { display:flex; align-items:center; justify-content:space-between;
  width:100%; gap:12px; margin:6px 0; padding:13px 15px;
  border:1px solid var(--borda); border-radius:14px;
  background:var(--painel); color:var(--texto); text-align:left;
  font:inherit; cursor:pointer; }
.opcao-plano:active { border-color:var(--barro); background:var(--barro-fraco); }
.opcao-plano .grande { font-size:21px; white-space:nowrap; }

/* aviso de "puxe pra atualizar" */
.puxar { position:fixed; top:-40px; left:0; right:0; margin:0 auto; width:max-content;
  padding:7px 14px; border-radius:999px; background:var(--painel); color:var(--texto-2);
  border:1px solid var(--borda); font-size:12.5px; opacity:0; pointer-events:none;
  z-index:50; transition:opacity .15s; }