:root{
  --ink:#000;
  --muted:#666;
  --line:#ddd;
  --ok-bg:#e9f9ec;
  --ok-border:#cfeedd;
  --ok-ink:#1b6a2c;
  --accent:#000; /* barra de progresso */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:#fafafa;
  color:var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}

.wrap{ max-width:780px; margin:28px auto; padding:0 16px; }

.back{ display:inline-block; margin:10px 0 16px; color:var(--ink); text-decoration:none; }

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
h1{ margin:0 0 10px; font-size:28px; }
.muted{ color:var(--muted); font-size:12px; }

/* Botões pequenos do topo */
.btn{
  border:1px solid var(--ink);
  padding:8px 12px;
  border-radius:10px;
  background:#fff;
  font-weight:700;
  cursor:pointer;
}
.btn:hover{ background:#f0f0f0; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* Progresso */
.progress{ height:8px; background:#eee; border-radius:8px; overflow:hidden; margin-top:6px; }
.bar{ height:8px; background:var(--accent); width:0%; }

/* Linha de item */
.row{
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #eee;
  margin:8px 0;
  background:#fff;
  transition:background .12s ease, border-color .12s ease;
}
.row:hover{ background:#f7f7f7; }
.row input[type="checkbox"]{ transform:scale(1.2); }
.grow{ flex:1; }

.actions{ display:flex; gap:8px; align-items:center; }

.badge{
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--ok-border)