:root{--rosa:#e6007e;--rosa2:#c80070;--tx:#1f2430;--mut:#6b7280;--bg:#f6f7f9;--cd:#fff;--bd:#e5e7eb;--ok:#16a34a}
/* [hidden] TEM que vencer regras com display: (ex.: .carregando/.tela{display:flex}),
   senão o overlay do spinner nunca some e trava a tela girando. */
[hidden]{display:none!important}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.45 -apple-system,Segoe UI,Roboto,sans-serif}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;background:var(--rosa);color:#fff;padding:12px 14px;padding-top:max(12px,env(safe-area-inset-top))}
.top .marca{font-weight:800;font-size:18px;flex:1;text-align:center}
.top .voltar,.top .conta{background:rgba(255,255,255,.18);border:0;color:#fff;width:36px;height:36px;border-radius:10px;font-size:18px;cursor:pointer}
#app{max-width:560px;margin:0 auto;padding:16px}
.tela{animation:fade .15s ease}
@keyframes fade{from{opacity:.3}to{opacity:1}}
h1{font-size:22px;margin:4px 0 14px}h2{font-size:19px;margin:2px 0 8px}
.sub{color:var(--mut);margin:0 0 12px}
.abas{display:flex;gap:8px;margin-bottom:12px}
.aba{flex:1;padding:10px;border:1px solid var(--bd);background:#fff;border-radius:10px;font-weight:600;color:var(--mut);cursor:pointer}
.aba.ativa{background:var(--rosa);color:#fff;border-color:var(--rosa)}
.tipo{margin-bottom:12px}
label{display:block;font-size:13px;color:var(--mut);margin-bottom:10px}
label.full,label.check{display:block}
label.check{display:flex;gap:8px;align-items:flex-start;color:var(--tx);font-size:14px}
input,select{width:100%;font:16px inherit;padding:11px 12px;border:1px solid var(--bd);border-radius:10px;background:#fff;color:var(--tx);margin-top:4px}
label.check input{width:auto;margin-top:3px}
.cards{display:flex;flex-direction:column;gap:10px}
.card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;text-align:left;background:var(--cd);border:1px solid var(--bd);border-radius:12px;padding:14px;cursor:pointer}
.card:hover{border-color:var(--rosa)}
.card.estatico{cursor:default}
.card b{font-size:16px}
.tag{color:var(--mut);font-size:13px}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin-top:10px}
.slot{padding:12px 4px;border:1px solid var(--bd);background:#fff;border-radius:10px;font-weight:600;cursor:pointer}
.slot:hover{background:var(--rosa);color:#fff;border-color:var(--rosa)}
.primario{width:100%;background:var(--rosa);color:#fff;border:0;border-radius:12px;padding:14px;font-weight:700;font-size:16px;cursor:pointer;margin-top:8px}
.primario:active{background:var(--rosa2)}
.link{display:block;width:100%;background:none;border:0;color:var(--rosa);font-weight:600;padding:10px;cursor:pointer;margin-top:6px}
.resumo{background:#fff;border:1px solid var(--bd);border-radius:12px;padding:14px;margin-bottom:12px}
.msg{color:#b91c1c;font-size:14px;min-height:18px;margin-top:8px}
.vazio{color:var(--mut);text-align:center;padding:24px}
.ok{font-size:48px;text-align:center}
#tela-ok{text-align:center}
.status{font-size:12px;font-weight:700;color:var(--ok)}
.status.erro,.status.cancelado{color:#b91c1c}
.carregando{position:fixed;inset:0;background:rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;z-index:20}
.spinner{width:36px;height:36px;border:4px solid var(--bd);border-top-color:var(--rosa);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}