:root{
  --nevoa:#EAE7F0;
  --papel:#FFFFFF;
  --tinta:#2A2438;
  --tinta-media:#5B5470;
  --tinta-fraca:#8A85A0;
  --ameixa:#6B4E71;
  --ameixa-clara:#EFE6F1;
  --citrino:#B98F3C;
  --linha:#DAD5E4;
  --verde:#4E7A5E;
  --vermelho:#9B4A48;

  --display: "Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --corpo: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --numero: ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  --r:10px;
  --sombra:0 1px 2px rgba(42,36,56,.06),0 8px 24px -12px rgba(42,36,56,.18);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--nevoa);
  color:var(--tinta);
  font-family:var(--corpo);
  font-size:16px;
  line-height:1.5;
  -webkit-text-size-adjust:100%;
  padding:env(safe-area-inset-top) 0 calc(96px + env(safe-area-inset-bottom));
}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ameixa);outline-offset:2px;border-radius:4px}

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

/* ---------- cabeçalho ---------- */
header{padding:28px 0 18px}
.eyebrow{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-fraca);font-weight:600;margin:0 0 6px
}
#titulo{
  font-family:var(--display);
  font-size:clamp(26px,6vw,36px);
  font-weight:600;line-height:1.15;margin:0;
  letter-spacing:-.01em;
  border:1px dashed transparent;border-radius:6px;
  padding:2px 4px;margin-left:-4px;
  cursor:text;
}
#titulo:hover{border-color:var(--linha)}
#titulo:empty::before{content:"Tap to name your list";color:var(--tinta-fraca)}

.sync-estado{display:inline-flex;align-items:center;gap:6px;margin:6px 0 0;font-size:12px;color:var(--tinta-fraca)}
.sync-estado[hidden]{display:none}
.sync-estado .ponto{width:7px;height:7px;border-radius:50%;background:var(--tinta-fraca);flex:0 0 auto}
.sync-estado[data-estado="sincronizado"] .ponto{background:var(--verde)}
.sync-estado[data-estado="a-sincronizar"] .ponto{animation:pulsar 1s ease-in-out infinite;background:var(--citrino)}
.sync-estado[data-estado="offline"] .ponto{background:var(--vermelho)}
@keyframes pulsar{50%{opacity:.3}}

.painel{
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--r);
  box-shadow:var(--sombra);
}

.resumo{margin-top:18px;padding:18px 18px 16px}
.resumo-topo{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:flex-end}
.metrica .rot{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-fraca);font-weight:600}
.metrica .val{font-family:var(--numero);font-size:15px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.metrica.grande .val{font-size:clamp(28px,7vw,38px);line-height:1.1}
.metrica .sub{font-size:12px;color:var(--tinta-fraca);font-family:var(--corpo)}

.barra{margin-top:16px;height:8px;border-radius:99px;background:var(--nevoa);overflow:hidden;display:flex}
.barra i{display:block;height:100%;background:var(--ameixa);transition:width .35s ease}
.barra-leg{margin-top:8px;font-size:12px;color:var(--tinta-media)}

/* ---------- barra de ações ---------- */
.acoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:18px 0 10px}
.btn{
  border:1px solid var(--linha);background:var(--papel);border-radius:99px;
  padding:9px 15px;font-size:14px;cursor:pointer;font-weight:500;
  display:inline-flex;align-items:center;gap:7px;
  transition:border-color .15s,background .15s;
}
.btn:hover{border-color:var(--ameixa);background:var(--ameixa-clara)}
.btn.principal{background:var(--ameixa);color:#fff;border-color:var(--ameixa)}
.btn.principal:hover{background:#5A3F60}
.btn.mini{padding:5px 10px;font-size:13px}
.btn.discreto{border-color:transparent;background:transparent;color:var(--tinta-media)}
.btn.discreto:hover{background:var(--ameixa-clara);color:var(--tinta)}

.abas{display:flex;gap:4px;background:var(--papel);border:1px solid var(--linha);border-radius:99px;padding:3px}
.abas button{border:0;background:transparent;border-radius:99px;padding:7px 16px;cursor:pointer;font-size:14px;font-weight:500;color:var(--tinta-media)}
.abas button[aria-selected="true"]{background:var(--tinta);color:#fff}

.filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.filtros input,.filtros select{
  border:1px solid var(--linha);background:var(--papel);border-radius:8px;
  padding:9px 11px;font-size:14px;min-width:0;
}
.filtros input{flex:1 1 190px}

/* ---------- lista ---------- */
.grupo{margin-bottom:14px;overflow:hidden}
.grupo-cab{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:13px 16px;background:#FBFAFC;border-bottom:1px solid var(--linha);
}
.grupo-cab h2{
  font-family:var(--display);font-size:17px;font-weight:600;margin:0;letter-spacing:-.01em;flex:1 1 auto
}
.grupo-cab .cont{font-size:12px;color:var(--tinta-fraca)}
.grupo-cab .sub{font-family:var(--numero);font-size:14px;font-variant-numeric:tabular-nums}

.item{display:flex;gap:12px;padding:13px 16px;border-bottom:1px solid var(--linha);align-items:flex-start}
.item:last-child{border-bottom:0}
.item.feito .nome{text-decoration:line-through;text-decoration-color:var(--tinta-fraca);color:var(--tinta-fraca)}
.item.feito .preco{color:var(--tinta-fraca)}

.check{
  flex:0 0 auto;width:22px;height:22px;margin-top:2px;border-radius:6px;
  border:1.5px solid var(--linha);background:var(--papel);cursor:pointer;
  display:grid;place-items:center;padding:0;color:transparent;
}
.check:hover{border-color:var(--ameixa)}
.check[aria-pressed="true"]{background:var(--verde);border-color:var(--verde);color:#fff}
.check svg{width:13px;height:13px}

.corpo{flex:1 1 auto;min-width:0}
.nome{font-weight:550;font-size:15px;word-break:break-word}
.nome a{color:inherit;text-decoration:none;border-bottom:1px solid var(--linha)}
.nome a:hover{border-color:var(--ameixa);color:var(--ameixa)}
.meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:5px;font-size:12px;color:var(--tinta-fraca)}
.tag{
  border-radius:99px;padding:2px 9px;font-size:11px;font-weight:600;
  letter-spacing:.03em;border:1px solid var(--linha);
}
.tag.Essential{background:#F6ECEC;border-color:#E7D3D3;color:var(--vermelho)}
.tag.Desirable{background:#F5EFE2;border-color:#E7DBC2;color:var(--citrino)}
.tag.Extra{background:#EDF1EE;border-color:#D7E1DA;color:var(--verde)}
.notas{margin-top:5px;font-size:13px;color:var(--tinta-media);font-style:italic;word-break:break-word}

.direita{flex:0 0 auto;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.preco{font-family:var(--numero);font-variant-numeric:tabular-nums;font-size:15px;white-space:nowrap}
.preco small{display:block;font-size:11px;color:var(--tinta-fraca);font-weight:400}
.item-btns{display:flex;gap:2px}
.icone{
  border:0;background:transparent;padding:5px;border-radius:6px;cursor:pointer;
  color:var(--tinta-fraca);line-height:0
}
.icone:hover{background:var(--ameixa-clara);color:var(--ameixa)}
.icone svg{width:15px;height:15px}

/* ---------- resumo por categoria ---------- */
.tabela{width:100%;border-collapse:collapse}
.tabela th,.tabela td{padding:11px 16px;border-bottom:1px solid var(--linha);text-align:right}
.tabela th{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-fraca);
  font-weight:600;background:#FBFAFC
}
.tabela th:first-child,.tabela td:first-child{text-align:left}
.tabela td.num{font-family:var(--numero);font-variant-numeric:tabular-nums;font-size:14px}
.tabela tr:last-child td{border-bottom:0}
.tabela tfoot td{font-weight:700;background:#FBFAFC;border-top:2px solid var(--tinta)}
.mini-barra{height:5px;border-radius:99px;background:var(--nevoa);overflow:hidden;margin-top:5px;width:100%}
.mini-barra i{display:block;height:100%;background:var(--ameixa)}
.cat-nome{font-weight:550}

/* ---------- vazio ---------- */
.vazio{padding:52px 24px;text-align:center}
.vazio h3{font-family:var(--display);font-size:20px;margin:0 0 8px;font-weight:600}
.vazio p{margin:0 auto 20px;color:var(--tinta-media);max-width:36ch;font-size:14px}

/* ---------- formulário ---------- */
dialog{
  border:0;padding:0;background:transparent;max-width:520px;width:calc(100% - 24px);
}
dialog::backdrop{background:rgba(42,36,56,.45)}
.form{background:var(--papel);border-radius:14px;padding:22px;box-shadow:0 24px 60px -20px rgba(42,36,56,.5)}
.form h2{font-family:var(--display);font-size:21px;margin:0 0 16px;font-weight:600}
.campo{margin-bottom:13px}
.campo label{display:block;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--tinta-media);margin-bottom:5px}
.campo input,.campo select,.campo textarea{
  width:100%;border:1px solid var(--linha);border-radius:8px;padding:10px 12px;
  font-size:15px;background:var(--papel)
}
.campo textarea{resize:vertical;min-height:58px}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--ameixa);outline:none;box-shadow:0 0 0 3px var(--ameixa-clara)}
.linha2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.linha3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px}
.total-previsto{
  font-family:var(--numero);font-size:14px;color:var(--tinta-media);
  padding:9px 12px;background:var(--nevoa);border-radius:8px;margin-bottom:14px;
  display:flex;justify-content:space-between
}
.form-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}

/* ---------- avisos ---------- */
#aviso{
  position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom));z-index:50;
  background:var(--tinta);color:#fff;padding:11px 16px;border-radius:10px;
  font-size:14px;display:none;align-items:center;gap:14px;
  box-shadow:0 12px 30px -10px rgba(42,36,56,.6);max-width:calc(100% - 32px)
}
#aviso button{background:transparent;border:0;color:#C9B6D0;font-weight:700;cursor:pointer;text-decoration:underline}
#semGuardar{
  background:#F5EFE2;border:1px solid #E7DBC2;color:#6B5220;border-radius:8px;
  padding:10px 14px;font-size:13px;margin-top:14px;display:none
}
.rodape{margin-top:26px;font-size:12px;color:var(--tinta-fraca);text-align:center;line-height:1.7}

@media (max-width:560px){
  .item{gap:10px;padding:12px}
  .grupo-cab{padding:11px 12px}
  .linha3{grid-template-columns:1fr 1fr}
  .linha3 .campo:last-child{grid-column:span 2}
  .tabela th,.tabela td{padding:10px 11px;font-size:13px}
  .tabela .esconde-mob{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}