/* Identidade visual compartilhada com o site (mesmas cores e fontes) */
:root{
  --bg:#0c0c0b;
  --bg-2:#141413;
  --bg-3:#1d1d1b;
  --fg:#f2efe9;
  --fg-2:rgba(242,239,233,.70);
  --fg-3:rgba(242,239,233,.45);
  --line:rgba(242,239,233,.12);
  --accent:#e6d3ac;
  --ok:#9fd3a8;
  --erro:#f0a3a3;
  --radius:14px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--bg); color:var(--fg);
  font-family:'Inter', system-ui, sans-serif; font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; min-height:100vh;
}
img{display:block; max-width:100%;}
a{color:inherit;}
button, input, select, textarea{font:inherit; color:inherit;}
h1,h2,h3{font-family:'Instrument Serif', Georgia, serif; font-weight:400; line-height:1.05; letter-spacing:-.01em;}
h1 em, h2 em{font-style:italic; color:var(--accent);}
.wrap{max-width:1240px; margin:0 auto; padding:0 28px;}
@media (max-width:640px){ .wrap{padding:0 16px;} }
.muted{color:var(--fg-2);}
.dim{color:var(--fg-3);}
.kicker{font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3);}
[hidden]{display:none !important;}

/* botões */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:999px; border:1px solid transparent;
  font-size:14px; font-weight:500; cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background .2s, border-color .2s, color .2s, transform .2s var(--ease), opacity .2s;
}
.btn:active{transform:scale(.98);}
.btn:disabled{opacity:.4; cursor:not-allowed;}
.btn-light{background:var(--fg); color:var(--bg);}
.btn-light:hover:not(:disabled){background:var(--accent);}
.btn-outline{border-color:rgba(242,239,233,.28); background:transparent;}
.btn-outline:hover:not(:disabled){border-color:var(--fg); background:rgba(242,239,233,.05);}
.btn-ghost{background:transparent; color:var(--fg-2); padding:8px 12px;}
.btn-ghost:hover{color:var(--fg);}
.btn-perigo{background:transparent; border-color:rgba(240,163,163,.35); color:var(--erro);}
.btn-perigo:hover{background:rgba(240,163,163,.08);}
.btn-sm{padding:7px 14px; font-size:13px;}

/* formulários */
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:16px;}
.field label{font-size:13px; color:var(--fg-2);}
.field small{font-size:12px; color:var(--fg-3);}
.input, .field input, .field select, .field textarea{
  width:100%; background:var(--bg); border:1px solid var(--line); border-radius:10px;
  padding:11px 13px; font-size:15px; color:var(--fg); color-scheme:dark;
  transition:border-color .2s, box-shadow .2s;
}
.input:focus, .field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(230,211,172,.15);
}
.field textarea{resize:vertical; min-height:70px;}
.row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:560px){ .row{grid-template-columns:1fr;} }
.check{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--fg-2); margin-bottom:16px; cursor:pointer;}
.check input{width:18px; height:18px; accent-color:var(--accent);}

/* cartões e etiquetas */
.card{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); padding:24px;}
.pill{
  display:inline-flex; align-items:center; gap:7px; padding:4px 11px; border-radius:999px;
  font-size:12px; font-weight:500; border:1px solid var(--line); color:var(--fg-2); white-space:nowrap;
}
.pill::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor;}
.pill.aguardando{color:var(--fg-3);}
.pill.selecao{color:var(--accent); border-color:rgba(230,211,172,.35);}
.pill.recebida{color:var(--ok); border-color:rgba(159,211,168,.35);}

/* modal */
dialog.modal{
  margin:auto; border:1px solid var(--line); border-radius:18px; background:var(--bg-2); color:var(--fg);
  width:min(560px, calc(100vw - 32px)); max-height:calc(100vh - 32px); padding:0;
}
dialog.modal::backdrop{background:rgba(8,8,7,.75); backdrop-filter:blur(4px);}
.modal-head{display:flex; justify-content:space-between; align-items:center; padding:22px 24px 0;}
.modal-head h3{font-size:28px;}
.modal-body{padding:20px 24px;}
.modal-foot{display:flex; justify-content:flex-end; gap:10px; padding:0 24px 22px; flex-wrap:wrap;}
.x{background:none; border:0; width:36px; height:36px; border-radius:50%; cursor:pointer; color:var(--fg-2); font-size:18px;}
.x:hover{background:var(--bg-3); color:var(--fg);}

/* aviso flutuante */
.toast{
  position:fixed; left:50%; bottom:28px; translate:-50% 0; z-index:100;
  background:var(--fg); color:var(--bg); padding:12px 20px; border-radius:999px; font-size:14px; font-weight:500;
  box-shadow:0 10px 30px rgba(0,0,0,.4); opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .25s, transform .25s var(--ease); max-width:calc(100vw - 32px); text-align:center;
}
.toast.show{opacity:1; transform:none;}

/* coração de seleção */
.heart{
  width:40px; height:40px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(12,12,11,.55); backdrop-filter:blur(6px); display:grid; place-items:center;
  transition:background .2s, transform .2s var(--ease);
}
.heart svg{width:20px; height:20px; fill:none; stroke:#fff; stroke-width:2; transition:fill .2s, stroke .2s;}
.heart:hover{transform:scale(1.08);}
.heart[aria-pressed="true"]{background:var(--accent);}
.heart[aria-pressed="true"] svg{fill:var(--bg); stroke:var(--bg);}