/* MEU PROVADOR — creme, recorte e serifa.
   Referências: flat-lay editorial com peças recortadas em tamanhos diferentes,
   abas em pílula, cartão de clima no topo, gaveta horizontal por categoria.
   Nada de grade uniforme: um look bem montado não tem peças do mesmo tamanho. */

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

:root{
  --creme:#faf7f2; --papel:#fff; --areia:#f1ece3; --areia-2:#e5ded1;
  --tinta:#171512; --tinta-2:#57514a; --suave:#8f877c; --linha:#e6dfd3;

  /* acentos pastel, na temperatura das referências */
  --barro:#b9694a; --barro-claro:#f7e7dd;
  --azul:#8aa9c4;  --azul-claro:#e8f0f6;
  --sage:#9bb59c;  --sage-claro:#e9f0e8;
  --areia-q:#d8b98c; --areia-q-claro:#f7eddd;
  --rosa:#dba9a6;  --rosa-claro:#f9eae9;

  --erro:#b2402f; --erro-claro:#f9e6e2;

  --display:'Instrument Serif',Georgia,serif;
  --sans:'Manrope',system-ui,-apple-system,sans-serif;

  --s1:0 1px 2px rgba(23,21,18,.04), 0 6px 20px rgba(23,21,18,.05);
  --s2:0 2px 6px rgba(23,21,18,.06), 0 18px 44px rgba(23,21,18,.09);
  --r:18px; --r-s:12px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --creme:#131210; --papel:#1c1a17; --areia:#262320; --areia-2:#332f2a;
    --tinta:#f7f3ec; --tinta-2:#cdc5b9; --suave:#9c9488; --linha:#35312b;
    --barro:#e3a183; --barro-claro:#332119;
    --azul:#9dbcd6; --azul-claro:#1a242c;
    --sage:#aac7ab; --sage-claro:#1b241c;
    --areia-q:#e0c79f; --areia-q-claro:#2c2519;
    --rosa:#e6bdba; --rosa-claro:#2e1f1e;
    --erro:#f0a79a; --erro-claro:#331d19;
  }
}

html,body{min-height:100%}
body{
  background:var(--creme); color:var(--tinta);
  font-family:var(--sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(88px + env(safe-area-inset-bottom));
}

#app{max-width:760px;margin:0 auto;padding:0 18px}

/* ── Porta de entrada ────────────────────────────────────────────────────── */
.centro{min-height:100dvh;display:grid;place-content:center;text-align:center;gap:18px;padding:28px}
.porta h1{font-family:var(--display);font-weight:400;font-size:clamp(44px,11vw,64px);line-height:1;letter-spacing:-.02em}
.porta p{color:var(--tinta-2);max-width:32ch;margin-inline:auto}

/* ── Topo ────────────────────────────────────────────────────────────────── */
.topo{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:26px 0 14px;position:sticky;top:0;z-index:20;
  background:linear-gradient(var(--creme) 72%,transparent);
}
.topo h1{font-family:var(--display);font-weight:400;font-size:32px;letter-spacing:-.015em}
.topo .conta{font-size:13px;color:var(--suave)}

/* ── Navegação inferior, como app ────────────────────────────────────────── */
.nav{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;justify-content:space-around;gap:2px;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--papel) 92%, transparent);
  backdrop-filter:blur(14px);border-top:1px solid var(--linha);
}
.nav-item{
  flex:1;border:0;background:transparent;color:var(--suave);cursor:pointer;
  font:inherit;font-size:11px;font-weight:600;letter-spacing:.01em;
  display:grid;gap:3px;justify-items:center;padding:6px 2px;border-radius:12px;
}
.nav-item .glifo{font-size:19px;line-height:1}
.nav-item.ativo{color:var(--tinta)}
.nav-item.ativo .glifo{transform:translateY(-1px)}

.tela{display:grid;gap:18px;padding-bottom:24px}

/* ── Cartão de clima ─────────────────────────────────────────────────────── */
.clima-cartao{
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--r);
  padding:14px 16px;display:flex;align-items:center;gap:14px;box-shadow:var(--s1);
}
.clima-icone{
  width:44px;height:44px;flex:0 0 auto;border-radius:14px;
  display:grid;place-content:center;font-size:21px;background:var(--azul-claro);
}
.clima-texto{display:grid;gap:1px;min-width:0}
.clima-dia{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--suave);font-weight:700}
.clima-temp{font-family:var(--display);font-size:25px;line-height:1.1;font-weight:400}
.clima-resumo{font-size:13px;color:var(--tinta-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Flat-lay: o coração visual ──────────────────────────────────────────── */
/* Composição editorial, não grade. Cada lugar do corpo tem tamanho próprio. */
.flatlay{
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--r);
  padding:14px;box-shadow:var(--s1);
  display:grid;gap:8px;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(4,1fr);
  aspect-ratio:1/1.06;
}
.fl-sobreposicao{grid-area:1/1/3/3}
.fl-cima        {grid-area:1/3/3/5}
.fl-baixo       {grid-area:3/1/5/3}
.fl-calcado     {grid-area:3/3/5/4}
.fl-acessorio   {grid-area:3/4/5/5}

/* Com peça única (vestido, macacão) a silhueta vira vertical. */
.flatlay.peca-unica .fl-corpo_inteiro{grid-area:1/1/5/3}
.flatlay.peca-unica .fl-sobreposicao {grid-area:1/3/3/5}
.flatlay.peca-unica .fl-calcado      {grid-area:3/3/5/4}
.flatlay.peca-unica .fl-acessorio    {grid-area:3/4/5/5}

.fl-item{
  position:relative;border:0;padding:0;background:transparent;cursor:pointer;
  border-radius:var(--r-s);overflow:hidden;display:grid;place-items:center;
}
.fl-item img{width:100%;height:100%;object-fit:contain;display:block;
  mix-blend-mode:multiply;filter:contrast(1.02)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .fl-item img{mix-blend-mode:normal}
}
.fl-item .fl-tirar{
  position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;
  border:0;background:var(--papel);color:var(--tinta-2);box-shadow:var(--s1);
  font-size:14px;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s;
}
.fl-item:hover .fl-tirar,.fl-item:focus-within .fl-tirar{opacity:1}

.fl-vazio{
  border:1.5px dashed var(--linha);border-radius:var(--r-s);background:transparent;
  color:var(--suave);cursor:pointer;font:inherit;font-size:11px;font-weight:600;
  display:grid;place-content:center;gap:4px;text-align:center;padding:6px;
  transition:border-color .15s,color .15s;
}
.fl-vazio:hover{border-color:var(--barro);color:var(--barro)}
.fl-vazio .glifo{font-size:17px;opacity:.55}
.fl-item.alvo,.fl-vazio.alvo{outline:2px solid var(--barro);outline-offset:2px}

.look-nota{display:grid;gap:6px;padding:0 2px}
.look-titulo{font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:-.01em}
.look-porque{font-size:14.5px;color:var(--tinta-2)}
.look-dica{
  font-size:13.5px;color:var(--barro);background:var(--barro-claro);
  padding:9px 12px;border-radius:var(--r-s);
}

/* ── Gaveta: fileira horizontal do slot ativo ────────────────────────────── */
.slots{display:flex;gap:7px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}
.slots::-webkit-scrollbar{display:none}
.slot-aba{
  flex:0 0 auto;border:1px solid var(--linha);background:var(--papel);
  color:var(--tinta-2);font:inherit;font-size:13px;font-weight:600;
  padding:8px 14px;border-radius:999px;cursor:pointer;
  display:flex;align-items:center;gap:6px;
}
.slot-aba.ativo{background:var(--tinta);color:var(--creme);border-color:var(--tinta)}
.slot-aba .ponto{width:6px;height:6px;border-radius:50%;background:var(--barro)}
.slot-aba.ativo .ponto{background:var(--creme)}

.gaveta{display:flex;gap:9px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none}
.gaveta::-webkit-scrollbar{display:none}
.gaveta-item{
  flex:0 0 78px;border:1px solid var(--linha);background:var(--papel);
  border-radius:var(--r-s);padding:0;cursor:pointer;overflow:hidden;
  display:grid;grid-template-rows:auto auto;font:inherit;color:var(--tinta);
  transition:border-color .15s,transform .08s;
}
.gaveta-item:active{transform:scale(.97)}
.gaveta-item img{width:100%;aspect-ratio:1/1;object-fit:contain;background:var(--papel);
  mix-blend-mode:multiply}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .gaveta-item img{mix-blend-mode:normal}
}
.gaveta-item .rotulo{
  font-size:10.5px;line-height:1.25;padding:4px 6px 6px;color:var(--tinta-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gaveta-item.posta{border-color:var(--tinta);border-width:1.5px}
.gaveta-item.posta .rotulo{color:var(--tinta);font-weight:700}
.gaveta-vazia{font-size:13.5px;color:var(--suave);padding:14px 2px}

/* ── Ações ───────────────────────────────────────────────────────────────── */
.pedir{display:grid;gap:8px}
.pedir .busca-linha .botao.icone{flex:0 0 auto;padding:11px 15px}

.acoes{display:flex;gap:8px;flex-wrap:wrap}
.botao{
  border:1px solid var(--linha);background:var(--papel);color:var(--tinta);
  font:inherit;font-weight:600;font-size:14.5px;padding:11px 18px;
  border-radius:999px;cursor:pointer;transition:transform .08s,opacity .15s;
  display:inline-flex;align-items:center;gap:7px;
}
.botao:active{transform:scale(.98)}
a.botao{text-decoration:none}
.botao:disabled{opacity:.4;cursor:not-allowed}
.botao.primario{background:var(--tinta);color:var(--creme);border-color:var(--tinta)}
.botao.cheio{flex:1;justify-content:center}
.botao.fantasma{background:transparent;font-size:13.5px;padding:8px 14px}
.botao.perigo{color:var(--erro);border-color:transparent}
.botao.icone{padding:11px 14px}

.mini{
  border:1px solid var(--linha);background:transparent;color:var(--tinta-2);
  font:inherit;font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;cursor:pointer;
}
.mini.perigo{color:var(--erro);border-color:transparent}

/* microfone: discreto, do tamanho de um botão, não um painel */
.botao.gravando{background:var(--barro-claro);border-color:var(--barro);color:var(--barro)}
.botao.gravando .glifo{animation:pulso 1.1s ease-in-out infinite}
@keyframes pulso{0%,100%{opacity:1}50%{opacity:.3}}

.transcricao{
  font-family:var(--display);font-size:19px;color:var(--tinta-2);
  padding:2px 2px 0;font-style:italic;
}

.pensando{display:flex;gap:6px;align-items:center;color:var(--suave);font-size:13.5px;padding:4px 2px}
.pensando i{width:6px;height:6px;border-radius:50%;background:var(--barro);animation:salto 1s infinite}
.pensando i:nth-child(2){animation-delay:.15s}
.pensando i:nth-child(3){animation-delay:.3s}
@keyframes salto{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* ── Alternativas da IA ──────────────────────────────────────────────────── */
.alternativas{display:grid;gap:10px}
.alternativas h2,.secao-titulo{
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--suave);font-weight:700;padding:0 2px;
}
.fita{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none}
.fita::-webkit-scrollbar{display:none}
.alt-cartao{
  flex:0 0 152px;border:1px solid var(--linha);background:var(--papel);
  border-radius:var(--r-s);padding:9px;cursor:pointer;text-align:left;
  font:inherit;color:var(--tinta);display:grid;gap:7px;
}
.alt-tiras{display:flex;gap:4px}
.alt-tiras img{
  flex:1;min-width:0;aspect-ratio:3/4;object-fit:contain;border-radius:7px;
  background:var(--areia);mix-blend-mode:multiply;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .alt-tiras img{mix-blend-mode:normal}
}
.alt-nome{font-size:13px;font-weight:600;line-height:1.25}

/* ── Abas em pílula ──────────────────────────────────────────────────────── */
.pilulas{display:flex;gap:7px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none}
.pilulas::-webkit-scrollbar{display:none}
.pilula{
  flex:0 0 auto;border:1px solid var(--linha);background:var(--papel);
  color:var(--tinta-2);font:inherit;font-size:13.5px;font-weight:600;
  padding:8px 15px;border-radius:999px;cursor:pointer;
}
.pilula.ativa{background:var(--tinta);color:var(--creme);border-color:var(--tinta)}
.pilula .n{opacity:.55;font-weight:600;margin-left:4px;font-size:12px}

/* ── Guarda-roupa ────────────────────────────────────────────────────────── */
.busca-linha{display:flex;gap:8px}
.busca{
  flex:1;min-width:0;border:1px solid var(--linha);background:var(--papel);
  color:var(--tinta);font:inherit;font-size:14.5px;padding:11px 16px;border-radius:999px;
}
.busca:focus,input:focus,select:focus,textarea:focus{outline:2px solid var(--barro);outline-offset:-1px}

.contagem{font-size:12.5px;color:var(--suave);padding:0 2px}

.grade{display:grid;gap:11px;grid-template-columns:repeat(auto-fill,minmax(108px,1fr))}
.cartao{
  border:1px solid var(--linha);background:var(--papel);border-radius:var(--r-s);
  overflow:hidden;cursor:pointer;padding:0;text-align:left;font:inherit;color:var(--tinta);
  display:grid;grid-template-rows:auto auto;transition:transform .08s;
}
.cartao:active{transform:scale(.98)}
.cartao img{width:100%;aspect-ratio:1/1;object-fit:contain;background:var(--papel);
  mix-blend-mode:multiply}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .cartao img{mix-blend-mode:normal}
}
.cartao-nome{padding:7px 9px 9px;font-size:12px;font-weight:600;line-height:1.3}

.sem-foto{
  aspect-ratio:1/1;display:grid;place-content:center;
  background:var(--areia);color:var(--suave);font-size:11px;
}

/* ── Looks salvos ────────────────────────────────────────────────────────── */
.lista-looks{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.look-cartao{
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--r);
  padding:12px;box-shadow:var(--s1);display:grid;gap:10px;
}
.look-cartao .flatlay{border:0;box-shadow:none;padding:0;background:transparent}
.look-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.look-topo h3{font-family:var(--display);font-weight:400;font-size:21px;line-height:1.15}
.coracao{
  border:0;background:transparent;cursor:pointer;font-size:19px;line-height:1;
  color:var(--linha);padding:2px;
}
.coracao.cheio{color:var(--rosa)}
.look-rodape{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}

.tag{
  display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;padding:4px 10px;border-radius:999px;
  color:var(--tinta-2);background:var(--areia);
}
.tag.trabalho{background:var(--azul-claro);color:#4a6b86}
.tag.terreiro{background:var(--areia-q-claro);color:#8a6a34}
.tag.pilates {background:var(--sage-claro);color:#4e6b50}
.tag.sair    {background:var(--rosa-claro);color:#96595a}
.tag.evento  {background:var(--barro-claro);color:var(--barro)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tag.trabalho{color:var(--azul)}
  :root:not([data-theme="light"]) .tag.terreiro{color:var(--areia-q)}
  :root:not([data-theme="light"]) .tag.pilates {color:var(--sage)}
  :root:not([data-theme="light"]) .tag.sair    {color:var(--rosa)}
}
.alerta{color:var(--erro);font-size:12.5px}

/* ── Histórico ───────────────────────────────────────────────────────────── */
.historico{display:grid;gap:12px}
.dia{background:var(--papel);border:1px solid var(--linha);border-radius:var(--r);padding:14px;display:grid;gap:10px}
.dia h3{font-size:12px;font-weight:700;color:var(--suave);letter-spacing:.07em;text-transform:uppercase}
.uso{display:flex;gap:10px;align-items:center;justify-content:space-between}
.mini-fotos{display:flex;gap:6px;flex-wrap:wrap}
.mini-foto{width:46px;height:46px;object-fit:contain;border-radius:8px;background:var(--areia);
  mix-blend-mode:multiply}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .mini-foto{mix-blend-mode:normal}
}

/* ── Ajustes ─────────────────────────────────────────────────────────────── */
.bloco{
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--r);
  padding:18px;display:grid;gap:12px;justify-items:start;
}
.bloco h3{font-family:var(--display);font-weight:400;font-size:21px}
.bloco label{display:grid;gap:5px;width:100%}
.bloco label>span{font-weight:700;font-size:13.5px}
.bloco small{color:var(--suave);font-size:12.5px;line-height:1.45}
.fraca{color:var(--suave);font-size:13.5px;line-height:1.5}
textarea,.bloco input{
  border:1px solid var(--linha);background:var(--creme);color:var(--tinta);
  font:inherit;font-size:14.5px;padding:12px;border-radius:var(--r-s);resize:vertical;width:100%;
}

/* ── Modais ──────────────────────────────────────────────────────────────── */
.modal-fundo{
  position:fixed;inset:0;background:rgba(23,21,18,.5);backdrop-filter:blur(4px);
  display:grid;place-items:end center;z-index:60;
}
@media (min-width:640px){.modal-fundo{place-items:center;padding:24px}}
.modal{
  background:var(--papel);width:100%;max-width:540px;max-height:93dvh;overflow-y:auto;
  border-radius:24px 24px 0 0;box-shadow:var(--s2);
}
@media (min-width:640px){.modal{border-radius:var(--r)}}
.modal.estreito{max-width:420px}
.modal-topo{
  position:sticky;top:0;background:var(--papel);z-index:1;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 18px 12px;border-bottom:1px solid var(--linha);
}
.modal-topo h2{font-family:var(--display);font-weight:400;font-size:24px}
.fechar{border:0;background:transparent;color:var(--suave);font-size:26px;line-height:1;cursor:pointer;padding:0 4px}
.modal-corpo{padding:18px;display:grid;gap:18px}

/* área de upload pontilhada, como nas referências */
.soltar{
  border:1.5px dashed var(--linha);border-radius:var(--r);background:var(--creme);
  aspect-ratio:1/1;display:grid;place-content:center;gap:8px;text-align:center;
  padding:20px;cursor:pointer;color:var(--suave);
}
.soltar:hover{border-color:var(--barro);color:var(--barro)}
.soltar .glifo{font-size:30px;opacity:.5}
.soltar strong{font-size:14px;color:var(--tinta-2);font-weight:600}

.previa{position:relative}
.previa img{width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:var(--r);background:var(--creme)}
.arquivo{display:block;text-align:center}

.form-peca{display:grid;gap:14px}
.form-peca label{display:grid;gap:4px}
.form-peca label>span{font-size:12.5px;font-weight:700;color:var(--tinta-2)}
.form-peca input,.form-peca select{
  border:1px solid var(--linha);background:var(--creme);color:var(--tinta);
  font:inherit;font-size:14.5px;padding:11px 12px;border-radius:var(--r-s);width:100%;
}
.par{display:grid;grid-template-columns:1fr 1fr;gap:10px}
fieldset{border:1px solid var(--linha);border-radius:var(--r-s);padding:12px}
legend{font-size:12.5px;font-weight:700;color:var(--tinta-2);padding:0 6px}
.checks{display:flex;flex-wrap:wrap;gap:7px}
.check{
  display:inline-flex;align-items:center;gap:6px;font-size:13.5px;
  border:1px solid var(--linha);padding:6px 12px;border-radius:999px;cursor:pointer;
}
.check:has(input:checked){background:var(--tinta);color:var(--creme);border-color:var(--tinta)}
.check input{width:auto;accent-color:var(--barro)}
.modal-acoes{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

.ficha{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px}
.ficha dt{color:var(--suave);font-weight:600}

/* ── Avisos e vazios ─────────────────────────────────────────────────────── */
.aviso{
  display:flex;gap:10px;align-items:center;justify-content:space-between;
  padding:12px 15px;border-radius:var(--r-s);font-size:14px;margin:0 0 6px;
  background:var(--erro-claro);color:var(--erro);
}
.aviso.ok{background:var(--sage-claro);color:#4e6b50}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .aviso.ok{color:var(--sage)}}
.aviso .fechar{color:inherit;font-size:20px}

.vazio{text-align:center;padding:44px 20px;color:var(--suave);display:grid;gap:14px;justify-items:center}
.vazio.grande{padding:72px 20px}
.vazio h2{font-family:var(--display);font-weight:400;font-size:29px;color:var(--tinta);line-height:1.15}
.vazio p{max-width:34ch;font-size:14.5px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}