:root{
  --rosa:#b4436c; --rosa-esc:#8e3054; --tinta:#221a1d; --tinta-fraca:#6b6167;
  --linha:#ead9e0; --fundo:#fdf9fa; --card:#fff; --erro:#c0392b;
  --sombra:0 2px 14px rgba(80,30,50,.07);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--fundo); color:var(--tinta);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
.screen{display:none}
.screen.active{display:block}

.box{max-width:400px;margin:0 auto;padding:48px 22px 40px}
.box.center{text-align:center}
.brand{
  font-size:12px;font-weight:800;letter-spacing:3px;color:var(--rosa);
  margin-bottom:26px;text-align:center;
}
h1{font-size:26px;line-height:1.2;font-weight:800;margin:0 0 10px}
.lede{font-size:15px;color:var(--tinta-fraca);margin:0 0 22px}
.footnote{font-size:13px;color:var(--tinta-fraca);margin-top:18px}
.footnote a{color:var(--rosa);font-weight:600}

input{
  width:100%;padding:15px 16px;font-size:16px;  /* 16px evita zoom no iOS */
  border:2px solid var(--linha);border-radius:12px;background:#fff;
  color:var(--tinta);outline:none;transition:border-color .15s;
}
input:focus{border-color:var(--rosa)}
input.codigo{
  text-align:center;font-size:30px;font-weight:800;letter-spacing:12px;
  padding:16px 8px;text-indent:12px;
}
.cta{
  width:100%;margin-top:12px;padding:16px;border:0;border-radius:12px;
  background:var(--rosa);color:#fff;font-size:15px;font-weight:800;letter-spacing:.4px;
  cursor:pointer;transition:background .15s,transform .05s;
}
.cta:hover{background:var(--rosa-esc)}
.cta:active{transform:translateY(1px)}
.cta[disabled]{opacity:.55;cursor:default}
.erro{color:var(--erro);font-size:14px;font-weight:600;margin:12px 0 0;min-height:20px}

.topo{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--linha);background:#fff;
}
.topo .brand{margin:0}
.sair{background:none;border:0;color:var(--tinta-fraca);font-size:13px;cursor:pointer;padding:6px}
.sair:hover{color:var(--rosa)}
.conteudo{max-width:620px;margin:0 auto;padding:30px 20px 60px}

.grade{display:grid;gap:14px;margin-top:22px}
.item{
  display:flex;gap:14px;align-items:flex-start;background:var(--card);
  border:1px solid var(--linha);border-radius:14px;padding:16px;
  box-shadow:var(--sombra);text-decoration:none;color:inherit;
}
.item.livre{cursor:pointer}
.item.livre:hover{border-color:var(--rosa)}
.item.travado{opacity:.62}
.capa{
  width:52px;height:68px;border-radius:6px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:22px;font-weight:800;
}
.item h2{font-size:16px;font-weight:800;margin:0 0 4px;line-height:1.25}
.item p{font-size:13.5px;color:var(--tinta-fraca);margin:0}
.tag{
  display:inline-block;margin-top:8px;font-size:11px;font-weight:800;
  letter-spacing:.5px;text-transform:uppercase;padding:3px 8px;border-radius:20px;
}
.tag.abrir{background:#f7e9ef;color:var(--rosa)}
.tag.travado{background:#efeaec;color:var(--tinta-fraca)}

.spinner{
  width:34px;height:34px;margin:30px auto 16px;border-radius:50%;
  border:3px solid var(--linha);border-top-color:var(--rosa);
  animation:gira .8s linear infinite;
}
@keyframes gira{to{transform:rotate(360deg)}}

@media (min-width:560px){
  .box{padding-top:70px}
  h1{font-size:30px}
}