:root {
  --cream:   #F3EAD9;
  --paper:   #FBF6EA;
  --sand:    #E2D4BA;
  --green:   #2D4A3A;
  --green-2: #3F6350;
  --leaf:    #5B7A4A;
  --red:     #D2492F;
  --red-dk:  #B23A24;
  --gold:    #E8A53A;
  --brown:   #2B1D14;
  --muted:   #7A6A55;
  --shadow:  rgba(43,29,20,.12);
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  text-transform:lowercase;
  font-family:'Montserrat',sans-serif; background:var(--cream); color:var(--brown); min-height:100vh;
  padding-bottom:0; overflow-x:hidden; display:flex; flex-direction:column; min-height:100vh; min-height:100dvh;
}

/* ─── HEADER ─── */
.header { position:relative; padding:22px 0 6px; text-align:center; }
.brand { display:flex; flex-direction:column; align-items:center; gap:1px; }
.header .logo { width:min(250px,64vw); display:block; }
.header .pat { position:absolute; top:22px; width:64px; opacity:.95; }
.header .pat.l { left:0; } .header .pat.r { right:0; }
.user-chip { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px; margin-top:8px; font-size:.78rem; font-weight:800; color:var(--green); min-height:20px; }
.user-chip button { background:none; border:none; color:var(--red); font:800 .68rem 'Montserrat',sans-serif; text-transform:lowercase; letter-spacing:.08em; cursor:pointer; }

/* ─── TABS ─── */
.tabs { width:100%; max-width:560px; margin:10px auto 0; display:flex; gap:6px; padding:0 14px; }
.tab-btn {
  flex:1; white-space:nowrap; min-height:42px; padding:10px 4px; border:2px solid var(--green); background:transparent; color:var(--green);
  font:800 .74rem 'Montserrat',sans-serif; text-transform:lowercase; letter-spacing:.06em; border-radius:999px; cursor:pointer; transition:.2s;
}
.tab-btn.active { background:var(--green); color:var(--cream); }

/* ─── PANEL ─── */
.panel {
  max-width:calc(100% - 28px); width:532px; margin:14px auto 0; background:var(--paper); border:2px solid var(--green);
  border-radius:26px; padding:22px 20px 26px; box-shadow:0 8px 0 var(--green), 0 14px 30px var(--shadow); display:none; position:relative;
}
.panel.active { display:block; animation:slideIn .3s ease; }
@keyframes slideIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

.sec-label {
  font:400 1.2rem 'Anton',sans-serif; letter-spacing:.06em; text-transform:lowercase; color:var(--green);
  margin-bottom:14px; display:flex; align-items:center; gap:10px;
}
.sec-label::after { content:''; flex:1; height:6px; background:
  linear-gradient(135deg,var(--red) 25%,transparent 25%) -3px 0/8px 6px,
  linear-gradient(225deg,var(--red) 25%,transparent 25%) -3px 0/8px 6px; opacity:.7; }

/* ─── FORM ─── */
.field { margin-bottom:14px; }
label.field-lbl { display:block; font-size:.72rem; font-weight:800; color:var(--green); text-transform:lowercase; letter-spacing:.06em; margin-bottom:5px; }
input[type=number], input[type=text], input[type=password], input[type=tel], input[type=file] {
  width:100%; background:var(--cream); border:2px solid var(--sand); border-radius:14px; padding:11px 16px;
  font:700 16px 'Montserrat',sans-serif; color:var(--brown); outline:none; transition:.2s; -webkit-appearance:none;
}
input:focus { border-color:var(--red); box-shadow:0 0 0 3px rgba(210,73,47,.18); }
button { text-transform:lowercase; }
input::placeholder { text-transform:lowercase; color:#BCAA8C; font-weight:600; }
.cur-wrap { display:flex; background:var(--cream); border:2px solid var(--sand); border-radius:14px; overflow:hidden; }
.cur-wrap:focus-within { border-color:var(--red); box-shadow:0 0 0 3px rgba(210,73,47,.18); }
.cur-prefix { padding:0 14px; display:flex; align-items:center; font-weight:900; color:var(--red); border-right:2px solid var(--sand); }
.cur-wrap input { border:none; background:transparent; box-shadow:none !important; border-radius:0; flex:1; }

.calc-btn {
  width:100%; background:var(--red); color:#fff; border:none; border-radius:16px; padding:14px;
  font:400 1.05rem 'Anton',sans-serif; letter-spacing:.08em; text-transform:lowercase; cursor:pointer;
  box-shadow:0 4px 0 var(--red-dk); transition:.15s; display:flex; align-items:center; justify-content:center; gap:8px;
}
.calc-btn:hover { transform:translateY(-1px); }
.calc-btn:active { transform:translateY(3px); box-shadow:0 1px 0 var(--red-dk); }
.link { background:none; border:none; color:var(--green); font:800 .78rem 'Montserrat',sans-serif; cursor:pointer; text-decoration:underline; margin-top:14px; width:100%; }
.status { font-size:.78rem; color:var(--green); text-align:center; min-height:18px; margin:8px 0 0; font-weight:700; }
.status.err { color:var(--red); font-weight:800; }
.drop { position:relative; display:block; cursor:pointer; border:2px dashed var(--green-2); border-radius:18px; background:var(--cream); overflow:hidden; transition:.2s; }
.drop:hover { border-color:var(--red); background:#f7efdf; }
.drop input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.drop-empty { display:flex; flex-direction:column; align-items:center; gap:4px; padding:22px 14px; color:var(--green); text-align:center; }
.drop-empty b { font-size:.82rem; font-weight:800; }
.drop-empty span { font-size:.7rem; color:var(--muted); font-weight:600; }
.drop img { display:none; width:100%; max-height:220px; object-fit:cover; }
.drop-change { display:none; position:absolute; right:10px; bottom:10px; background:var(--green); color:var(--cream); font:800 .7rem 'Montserrat',sans-serif; padding:7px 12px; border-radius:999px; box-shadow:0 2px 8px rgba(43,29,20,.35); }
.drop.has { border-style:solid; }
.drop.has img, .drop.has .drop-change { display:block; }
.drop.has .drop-empty { display:none; }
.thumb { width:100%; max-height:160px; object-fit:cover; border-radius:12px; margin-top:8px; }

/* ─── CARDÁPIO ─── */
.grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.card { background:#fff; border:2px solid var(--green); border-radius:20px; overflow:hidden; display:flex; flex-direction:column; }
.card .ph { aspect-ratio:1; background:var(--cream) center/cover; display:flex; align-items:center; justify-content:center; font-size:2.6rem; border-bottom:2px solid var(--green); }
.card .info { padding:10px 12px 12px; display:flex; flex-direction:column; gap:6px; flex:1; }
.card .nm { font:400 1.05rem 'Anton',sans-serif; letter-spacing:.03em; text-transform:lowercase; color:var(--green); line-height:1.15; }
.card .pr { font:900 1.05rem 'Montserrat',sans-serif; color:var(--red); }
.qty { display:flex; align-items:center; gap:8px; }
.qty button { width:36px; height:36px; font-size:1.1rem; border-radius:50%; border:2px solid var(--green); background:transparent; font-weight:900; color:var(--green); cursor:pointer; }
.qty span { min-width:18px; text-align:center; font-weight:900; }
.card .ph { position:relative; }
.card.out .ph::before { content:''; position:absolute; inset:0; background:rgba(243,234,217,.45); }
.card .sold {
  z-index:1; position:absolute; left:-6%; right:-6%; top:50%; transform:translateY(-50%) rotate(-7deg);
  background:var(--red); color:var(--cream); text-align:center; font:400 1.25rem 'Anton',sans-serif; letter-spacing:.18em;
  padding:7px 0; border-top:2px solid var(--cream); border-bottom:2px solid var(--cream);
  box-shadow:0 0 0 3px var(--red), 0 8px 14px rgba(43,29,20,.35);
}
.card .left { font-size:.7rem; font-weight:700; color:var(--red); min-height:1em; }
.calc-btn:disabled { background:var(--sand); color:var(--muted); box-shadow:0 4px 0 #c9b998; cursor:not-allowed; transform:none; }
.card .calc-btn { padding:9px; font-size:.88rem; border-radius:12px; margin-top:auto; }
.empty { text-align:center; color:var(--muted); font-weight:700; padding:30px 0; font-size:.88rem; }

/* ─── RESERVAS ─── */
.resv { background:#fff; border:2px solid var(--sand); border-left:7px solid var(--gold); border-radius:18px; padding:14px 14px 12px; margin-bottom:14px; }
.resv.paga { border-left-color:var(--leaf); } .resv.cancelada { border-left-color:var(--muted); opacity:.8; }
.resv .top { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.resv .cust { font:400 1.35rem 'Anton',sans-serif; letter-spacing:.02em; color:var(--green); line-height:1.1; }
.resv .phone { font-size:.78rem; font-weight:700; color:var(--muted); margin-top:3px; }
.resv .item { display:flex; align-items:center; gap:12px; margin-top:12px; padding:10px 0; border-top:2px dashed var(--sand); border-bottom:2px dashed var(--sand); }
.thumb-s { width:48px; height:48px; flex-shrink:0; border-radius:12px; background:var(--cream) center/cover; border:2px solid var(--green); }
.resv .desc { flex:1; min-width:0; }
.resv .nm2 { font-weight:800; color:var(--brown); font-size:.92rem; overflow-wrap:anywhere; }
.resv .sub { font-size:.74rem; color:var(--muted); font-weight:600; margin-top:2px; }
.resv .total { font:400 1.25rem 'Anton',sans-serif; color:var(--red); white-space:nowrap; }
.resv .meta { font-size:.72rem; color:var(--muted); font-weight:600; margin-top:9px; }
.resv .acts { display:flex; flex-wrap:wrap; gap:8px; }
.resv .acts .mini { margin:10px 0 0; }
.badge { font-size:.62rem; font-weight:800; letter-spacing:.05em; padding:5px 11px; border-radius:20px; color:#fff; white-space:nowrap; }
.badge.pendente { background:var(--gold); color:var(--brown); } .badge.paga { background:var(--leaf); } .badge.cancelada { background:var(--muted); }
.mini { border:none; border-radius:10px; padding:10px 14px; font:800 .72rem 'Montserrat',sans-serif; cursor:pointer; background:var(--green); color:var(--cream); margin:8px 6px 0 0; }
.mini.refund { background:var(--red); box-shadow:0 3px 0 var(--red-dk); }
.mini.alt { background:transparent; border:2px solid var(--sand); color:var(--muted); }

.pix { margin-top:10px; text-align:center; }
.pix-frame { position:relative; width:min(330px,100%); margin:0 auto; aspect-ratio:1112/1047; }
.pix-frame > img.frame { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.pix-frame .qr { position:absolute; left:21.94%; top:28.65%; width:57.91%; height:61.51%; background:#fff; z-index:1; display:flex; align-items:center; justify-content:center; }
.pix-frame .qr { padding:2.5%; }
.pix-frame .qr svg { width:100%; height:100%; display:block; shape-rendering:crispEdges; }
.pix-frame .qr img { width:100%; height:100%; display:block; }
.pix .code { font-size:.62rem; word-break:break-all; color:var(--muted); margin:6px 0; max-height:36px; overflow:hidden; }
.pix .note { font-size:.7rem; color:var(--muted); font-style:italic; margin-top:6px; }

/* ─── RODAPÉ ─── */
.foot { margin-top:auto; padding-top:26px; width:100%; }
.foot .jag { display:block; width:min(320px,78%); margin:0 auto; }

@media(max-width:480px){
  .header { padding-top:16px; }
  .header .logo { width:54vw; }
  .header .pat { width:42px; top:16px; }
  .panel { padding:18px 14px 22px; }
  .grid { gap:10px; }
  .card .nm { font-size:.95rem; }
  .tab-btn { font-size:.68rem; letter-spacing:.03em; }
  .foot { padding-top:18px; }
  }
@media(max-width:340px){ .grid{ grid-template-columns:1fr; } }

/* ─── MODAL ─── */
.modal { position:fixed; inset:0; z-index:50; background:rgba(43,29,20,.55); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; padding:20px; }
.modal.show { display:flex; animation:fade .2s ease; }
@keyframes fade { from{opacity:0} to{opacity:1} }
.modal-box { position:relative; width:100%; max-width:340px; background:var(--paper); border:2px solid var(--green); border-radius:24px; padding:28px 22px 20px; text-align:center; box-shadow:0 8px 0 var(--green), 0 20px 40px rgba(43,29,20,.4); animation:pop .25s cubic-bezier(.34,1.56,.64,1); overflow:hidden; }
@keyframes pop { from{transform:scale(.88) translateY(10px);opacity:0} to{transform:none;opacity:1} }
.modal-box::before { content:''; position:absolute; left:0; right:0; top:0; height:8px; background:
  linear-gradient(135deg,var(--red) 25%,transparent 25%) 0 0/16px 8px, linear-gradient(225deg,var(--red) 25%,transparent 25%) 0 0/16px 8px; }
.modal-leaf { position:absolute; right:-14px; bottom:-14px; width:64px; opacity:.18; transform:rotate(-20deg); pointer-events:none; }
.modal-box h3 { font:400 1.5rem 'Anton',sans-serif; letter-spacing:.03em; color:var(--green); margin-top:6px; }
.modal-box p { font-size:.86rem; font-weight:600; color:var(--muted); margin:10px 0 20px; line-height:1.45; }
.modal-acts { display:flex; gap:10px; justify-content:center; }
.modal-acts .mini { margin:0; flex:1; padding:12px 10px; font-size:.78rem; }
.mini.danger { background:var(--red); box-shadow:0 3px 0 var(--red-dk); }

/* ─── TOASTS ─── */
.toasts { position:fixed; top:12px; left:0; right:0; z-index:60; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; padding:0 14px; }
.toast { background:var(--green); color:var(--cream); border:2px solid var(--cream); box-shadow:0 6px 18px rgba(43,29,20,.35); border-radius:16px; padding:11px 18px; font:700 .82rem 'Montserrat',sans-serif; max-width:420px; text-align:center; animation:toastIn .35s cubic-bezier(.34,1.56,.64,1); }
.toast.bye { opacity:0; transform:translateY(-10px); transition:.3s; }
@keyframes toastIn { from{opacity:0;transform:translateY(-16px) scale(.95)} to{opacity:1;transform:none} }

a.tab-btn { text-decoration:none; display:flex; align-items:center; justify-content:center; gap:6px; }
a.tab-btn.ig { border-color:var(--red); color:var(--red); }
a.tab-btn.ig:hover { background:var(--red); color:var(--cream); }

.user-chip .chip-btn { align-items:center; gap:6px; background:var(--paper); color:var(--green); border:2px solid var(--green); border-radius:999px; padding:7px 14px; font:800 .76rem 'Montserrat',sans-serif; text-transform:lowercase; letter-spacing:.02em; cursor:pointer; transition:.15s; }
.user-chip .chip-btn:hover { background:var(--green); color:var(--cream); }
.user-chip .chip-btn.out { color:var(--red); border-color:var(--red); }
.user-chip .chip-btn.out:hover { background:var(--red); color:var(--cream); }

/* ─── pix indisponível / estado vazio ─── */
.pix-off { margin-top:12px; display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:14px 16px; border-radius:16px;
           background:rgba(232,165,58,.14); border:2px dashed var(--gold); color:var(--brown); }
.pix-off b { font:400 1.05rem 'Anton',sans-serif; letter-spacing:.03em; color:var(--green); }
.pix-off span { font-size:.8rem; font-weight:600; color:var(--muted); }
.pix-off-acts { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px; }
.pix-off .retry { font:800 .76rem 'Montserrat',sans-serif; color:var(--cream); background:var(--green); border:0; padding:8px 16px; border-radius:999px; cursor:pointer; }
.pix-off a { margin-top:0; font:800 .76rem 'Montserrat',sans-serif; color:#fff; background:var(--red); text-decoration:none; padding:8px 16px; border-radius:999px; box-shadow:0 3px 0 var(--red-dk); }
.btn-soft { display:block; margin:16px auto 0; border:2px solid var(--green); background:transparent; color:var(--green); border-radius:999px; padding:10px 24px; font:800 .8rem 'Montserrat',sans-serif; cursor:pointer; }
.btn-soft:hover { background:var(--green); color:var(--cream); }

/* ═══════════ TABLET ═══════════ */
@media (min-width:720px) {
  .header .logo { width:300px; }
  .header .pat { width:96px; top:26px; }
  .tabs { max-width:760px; justify-content:center; gap:10px; }
  .tab-btn { flex:0 0 auto; min-width:150px; padding:11px 24px; font-size:.8rem; }
  .panel { width:min(760px, calc(100% - 64px)); max-width:none; padding:30px 32px 34px; }
  .grid { grid-template-columns:repeat(3,1fr); gap:18px; }
  .foot .jag { width:400px; }
  .toasts { align-items:flex-end; padding:0 24px; top:18px; }
  #tab-auth { width:min(460px, calc(100% - 64px)); }
}

/* ═══════════ DESKTOP ═══════════
   Layout próprio: barra de navegação, destaque com a onça, vitrine de produtos,
   pedidos em tabela e login em tela dividida. */
.hero, .stats, .resv-head, .auth-art, .foot-desk { display:none; }

@media (min-width:1024px) {
  /* ── barra de navegação ── */
  .header { position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:28px; height:86px; padding:0 56px;
            background:rgba(243,234,217,.95); backdrop-filter:blur(10px); text-align:left; }
  .header::after { content:''; position:absolute; left:0; right:0; bottom:-9px; height:9px; pointer-events:none; background:
    linear-gradient(135deg,var(--red) 25%,transparent 25%) -5px 0/10px 9px, linear-gradient(225deg,var(--red) 25%,transparent 25%) -5px 0/10px 9px; }
  .header .pat { display:none; }
  .header .brand { order:1; align-items:flex-start; flex-shrink:0; gap:0; }
  .header .logo { width:138px; }
  .tabs { order:2; flex:1; width:auto; max-width:none; margin:0; padding:0; justify-content:center; gap:4px; }
  .user-chip { order:3; margin:0; font-size:.86rem; flex-wrap:nowrap; flex-shrink:0; }
  .tab-btn { flex:0 0 auto; min-width:0; min-height:0; position:relative; border:0; border-radius:12px; background:transparent; color:var(--green);
             padding:11px 20px; font-size:.88rem; }
  .tab-btn:hover { background:rgba(45,74,58,.08); }
  .tab-btn.active { background:transparent; color:var(--red); }
  .tab-btn.active::after { content:''; position:absolute; left:20px; right:20px; bottom:3px; height:3px; border-radius:3px; background:var(--red); }
  a.tab-btn.ig { border:2px solid var(--red); border-radius:999px; padding:9px 18px; margin-left:8px; }
  .tab-btn.cta { background:var(--red); color:#fff; border-radius:999px; padding:11px 28px; box-shadow:0 3px 0 var(--red-dk); }
  .tab-btn.cta:hover { background:var(--red-dk); }
  .tab-btn.cta.active::after { display:none; }
  .toasts { top:104px; align-items:flex-end; padding:0 40px; }

  /* ── destaque ── */
  .hero.show { display:block; position:relative; overflow:hidden; margin-top:9px; background:var(--green);
               background-image:radial-gradient(circle at 78% 40%, rgba(91,122,74,.55), transparent 55%); }
  .hero-leaf { position:absolute; right:-70px; top:-90px; width:560px; opacity:.22; filter:brightness(1.7) saturate(.85); transform:rotate(16deg); pointer-events:none; }
  .hero-in { position:relative; width:min(1240px, calc(100% - 112px)); margin:0 auto; padding:0; min-height:440px; display:grid; grid-template-columns:1fr 1fr; align-items:end; }
  .hero-text { align-self:center; padding:56px 0; z-index:2; }
  .hero .tag { display:inline-flex; align-items:center; gap:10px; color:var(--cream); font:700 .8rem 'Montserrat',sans-serif; letter-spacing:.04em;
               border:1.5px solid rgba(243,234,217,.4); border-radius:999px; padding:8px 18px; }
  .hero .tag i { width:9px; height:9px; background:var(--red); transform:rotate(45deg); }
  .hero h1 { font:400 4.6rem/1 'Anton',sans-serif; color:var(--cream); letter-spacing:.01em; margin:22px 0 18px; text-transform:lowercase; }
  .hero h1 em { font-style:normal; color:var(--gold); }
  .hero p { color:rgba(243,234,217,.82); font:500 1.05rem/1.65 'Montserrat',sans-serif; max-width:470px; }
  .cta-row { display:flex; gap:14px; margin-top:32px; }
  .btn-hero { display:inline-flex; align-items:center; border:0; cursor:pointer; text-decoration:none; background:var(--red); color:#fff; border-radius:999px;
              padding:15px 32px; font:400 1.05rem 'Anton',sans-serif; letter-spacing:.07em; text-transform:lowercase; box-shadow:0 4px 0 var(--red-dk); transition:.15s; }
  .btn-hero:hover { transform:translateY(-2px); }
  .btn-hero.ghost { background:transparent; color:var(--cream); border:2px solid rgba(243,234,217,.5); box-shadow:none; font:800 .9rem 'Montserrat',sans-serif; letter-spacing:.02em; }
  .btn-hero.ghost:hover { background:rgba(243,234,217,.12); }
  .hero-art { position:relative; align-self:end; justify-self:end; width:100%; max-width:600px; }
  .hero-jag { display:block; width:100%; position:relative; z-index:2; filter:drop-shadow(0 18px 20px rgba(0,0,0,.25)); }
  .hero-berries { position:absolute; left:-84px; bottom:10px; width:78px; z-index:3; transform:rotate(-8deg); }

  /* ── seções ── */
  .panel { width:min(1240px, calc(100% - 112px)); max-width:none; margin:0 auto; padding:64px 0 28px; background:transparent; border:0; box-shadow:none; border-radius:0; }
  .panel.active { animation:none; }
  .sec-label { font-size:2.4rem; margin-bottom:28px; }

  /* ── vitrine ── */
  .grid { grid-template-columns:repeat(4,1fr); gap:30px; }
  .card { position:relative; border-radius:28px; box-shadow:0 7px 0 var(--green); transition:transform .22s ease, box-shadow .22s ease; }
  .card:not(.out):hover { transform:translateY(-7px); box-shadow:0 14px 0 var(--green); }
  .card .info { padding:16px 18px 18px; gap:8px; }
  .card .nm { font-size:1.3rem; }
  .card .pr { position:absolute; z-index:3; top:14px; right:14px; background:var(--red); color:#fff; font:400 1.25rem 'Anton',sans-serif; letter-spacing:.03em;
              padding:5px 15px; border-radius:999px; box-shadow:0 3px 0 var(--red-dk); transform:rotate(4deg); }
  .card .left { font-size:.78rem; }
  .card .calc-btn { padding:12px; font-size:1rem; }
  .card .sold { font-size:1.5rem; }
  .empty { font-size:1rem; padding:80px 0; }

  /* ── pedidos: tabela ── */
  #tab-resv { --cols:1.1fr 56px 1.4fr 100px 1.25fr 150px auto; }
  .stats { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:34px; }
  .stat { background:var(--paper); border:2px solid var(--green); border-radius:24px; padding:22px 26px; box-shadow:0 6px 0 var(--green); display:flex; flex-direction:column; gap:2px; }
  .stat b { font:400 2.8rem/1 'Anton',sans-serif; color:var(--green); }
  .stat.ok b { color:var(--leaf); } .stat.money b { color:var(--red); }
  .stat span { font-weight:800; font-size:.8rem; color:var(--muted); text-transform:lowercase; letter-spacing:.04em; }
  .resv-head { display:grid; grid-template-columns:var(--cols); gap:0 18px; padding:0 22px 10px 29px; font:800 .72rem 'Montserrat',sans-serif; color:var(--muted); letter-spacing:.1em; text-transform:lowercase; }
  .resv-head .r { text-align:right; }
  #resvList { display:block; }
  #tab-resv .resv { display:grid; grid-template-columns:var(--cols); gap:0 18px; align-items:center; padding:14px 22px; border-radius:20px; margin-bottom:12px; transition:box-shadow .2s; }
  #tab-resv .resv:hover { box-shadow:0 6px 18px rgba(43,29,20,.1); }
  .resv .who, .resv .thumb-s, .resv .desc, .resv .total, .resv .meta, .resv .badge, .resv .acts { grid-row:1; }
  .resv .top, .resv .item { display:contents; }
  .resv .who { grid-column:1; min-width:0; }
  .resv .cust { font-size:1.3rem; }
  .resv .thumb-s { grid-column:2; }
  .resv .desc { grid-column:3; }
  .resv .total { grid-column:4; text-align:right; }
  .resv .meta { grid-column:5; margin:0; }
  .resv .badge { grid-column:6; justify-self:start; }
  .resv .acts { grid-column:7; margin-left:auto; flex-wrap:nowrap; }
  .resv .acts .mini { margin:0; white-space:nowrap; }
  #tab-resv .resv .pix, #tab-resv .resv > .empty { grid-column:1/-1; grid-row:2; margin-top:14px; }

  /* ── reservas do cliente: cartões ── */
  #tab-resv.cust .resv-head { display:none; }
  #tab-resv.cust #resvList { display:grid; grid-template-columns:repeat(auto-fill, minmax(500px, 1fr)); gap:28px; align-items:start; }
  #tab-resv.cust .resv { grid-template-columns:116px 1fr auto; grid-template-areas:"thumb who badge" "thumb desc total" "thumb meta acts" "pix pix pix";
                         gap:4px 20px; padding:22px 24px; margin:0; border-radius:26px; border-width:2px; box-shadow:0 6px 0 var(--sand); align-items:center; }
  #tab-resv.cust .resv.pendente { box-shadow:0 6px 0 var(--gold); } #tab-resv.cust .resv.paga { box-shadow:0 6px 0 var(--leaf); }
  #tab-resv.cust .resv .thumb-s { grid-area:thumb; width:116px; height:116px; border-radius:20px; align-self:center; }
  #tab-resv.cust .resv .who { grid-area:who; } #tab-resv.cust .resv .badge { grid-area:badge; justify-self:end; }
  #tab-resv.cust .resv .desc { grid-area:desc; } #tab-resv.cust .resv .total { grid-area:total; font-size:2rem; align-self:end; }
  #tab-resv.cust .resv .meta { grid-area:meta; } #tab-resv.cust .resv .acts { grid-area:acts; justify-self:end; margin:0; }
  #tab-resv.cust .resv .cust { font-size:1.7rem; }
  #tab-resv.cust .resv .nm2 { font-size:1.05rem; } #tab-resv.cust .resv .sub { font-size:.82rem; }
  #tab-resv.cust .resv .pix-off { border:2px dashed var(--gold); padding:16px 20px; }
  #tab-resv.cust .resv .pix-frame { width:300px; }
  #tab-resv.cust .resv .pix .code { max-width:420px; margin:6px auto; }
  #tab-resv > .empty, #tab-resv #resvList > .empty { grid-column:1/-1; padding:90px 0; font:400 1.8rem 'Anton',sans-serif; color:var(--green); text-align:center; letter-spacing:.03em; }
  #tab-resv .btn-soft { font-size:.9rem; padding:12px 30px; }

  /* ── admin ── */
  #tab-admin.active { display:grid; grid-template-columns:430px 1fr; gap:56px; align-items:start; }
  .adm-form { position:sticky; top:118px; background:var(--paper); border:2px solid var(--green); border-radius:28px; padding:30px 30px 26px; box-shadow:0 8px 0 var(--green); }
  .adm-form .sec-label { font-size:1.6rem; margin-bottom:20px; }
  .adm-list #stockList { display:block; }
  .adm-list .resv { display:grid; grid-template-columns:56px 1fr 110px auto; gap:0 18px; align-items:center; padding:12px 20px; border-radius:20px; margin-bottom:12px; }
  .adm-list .resv .thumb-s { grid-column:1; } .adm-list .resv .desc { grid-column:2; }
  .adm-list .resv .total { grid-column:3; } .adm-list .resv .acts { grid-column:4; }

  /* ── login: tela dividida ── */
  #tab-auth.active { display:grid; grid-template-columns:1fr 1fr; width:min(980px, calc(100% - 112px)); margin:64px auto 0; padding:0; overflow:hidden;
                     background:var(--paper); border:2px solid var(--green); border-radius:34px; box-shadow:0 10px 0 var(--green), 0 26px 50px var(--shadow); }
  .auth-art { display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; background:var(--green);
              background-image:radial-gradient(circle at 70% 30%, rgba(91,122,74,.5), transparent 60%); padding:48px 40px 0; }
  .auth-art h2 { font:400 2.9rem/1.05 'Anton',sans-serif; color:var(--cream); text-transform:lowercase; }
  .auth-art p { color:rgba(243,234,217,.8); font:500 .98rem/1.6 'Montserrat',sans-serif; margin-top:16px; max-width:300px; }
  .auth-art img { width:118%; margin:30px 0 0 -6%; align-self:flex-end; display:block; }
  .auth-form { padding:60px 54px; align-self:center; }
  .auth-form .sec-label { font-size:2rem; }

  /* ── rodapé ── */
  .foot { padding:0; margin-top:auto; }
  .foot .jag { display:none; }
  .foot-desk { display:flex; align-items:center; justify-content:space-between; gap:24px; position:relative; margin-top:80px; padding:40px 56px; background:var(--green); color:var(--cream); }
  .foot-desk::before { content:''; position:absolute; left:0; right:0; top:-9px; height:9px; background:
    linear-gradient(45deg,var(--green) 25%,transparent 25%) -5px 0/10px 9px, linear-gradient(315deg,var(--green) 25%,transparent 25%) -5px 0/10px 9px; }
  .fd-brand b { display:block; font:400 2.2rem/1 'Anton',sans-serif; letter-spacing:.04em; text-transform:lowercase; }
  .fd-brand span { font:700 .8rem 'Montserrat',sans-serif; color:var(--gold); letter-spacing:.08em; }
  .foot-desk p { font:500 .92rem 'Montserrat',sans-serif; color:rgba(243,234,217,.75); }
  .foot-desk a { color:var(--cream); text-decoration:none; font:800 .88rem 'Montserrat',sans-serif; border:2px solid rgba(243,234,217,.5); padding:10px 22px; border-radius:999px; transition:.15s; }
  .foot-desk a:hover { background:var(--red); border-color:var(--red); }
  .modal-box { max-width:410px; }
}

@media (min-width:1500px) {
  .panel, .hero-in { width:min(1360px, calc(100% - 160px)); }
  .grid { grid-template-columns:repeat(5,1fr); }
  .hero h1 { font-size:5.4rem; }
  #tab-resv { --cols:1.1fr 56px 1.5fr 110px 1.2fr 160px auto; }
}

/* lista de brownies do admin: sem a barra colorida lateral */
.adm-list .resv, .adm-list .resv.paga, .adm-list .resv.cancelada { border-left:2px solid var(--sand); }

/* ═══════════ PAINEL (DASHBOARD) ═══════════ */
.dash-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.dash-head .sec-label { margin:0; flex:1 1 220px; }
.seg { display:inline-flex; border:2px solid var(--green); border-radius:999px; padding:3px; background:var(--paper); }
.seg button { border:0; background:transparent; color:var(--green); font:800 .74rem 'Montserrat',sans-serif; padding:7px 14px; border-radius:999px; cursor:pointer; }
.seg button.on { background:var(--green); color:var(--cream); }
#dashBody { transition:opacity .2s; margin-top:18px; }


.kpis { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:22px; }
.kpi-hero { grid-column:1/-1; background:var(--paper); border:2px solid var(--green); border-radius:24px; padding:20px 22px; box-shadow:0 6px 0 var(--green); display:flex; flex-direction:column; gap:6px; }
.kpi-hero span { font:800 .74rem 'Montserrat',sans-serif; color:var(--muted); letter-spacing:.06em; }
.kpi-hero b { font:800 3.2rem/1 'Montserrat',sans-serif; color:var(--green); letter-spacing:-.02em; white-space:nowrap; }
.delta { font:800 .8rem 'Montserrat',sans-serif; } .delta i { font-style:normal; font-weight:600; color:var(--muted); }
.delta.up { color:var(--leaf); } .delta.down { color:var(--red); } .delta.flat { color:var(--muted); font-weight:600; }
.tile { background:#fff; border:2px solid var(--sand); border-radius:20px; padding:14px 16px; display:flex; flex-direction:column; gap:3px; }
.tile span { font:700 .7rem 'Montserrat',sans-serif; color:var(--muted); letter-spacing:.04em; }
.tile b { font:800 1.55rem/1.1 'Montserrat',sans-serif; color:var(--brown); letter-spacing:-.01em; }
.tile small { font:500 .72rem/1.35 'Montserrat',sans-serif; color:var(--muted); }

.dgrid { display:grid; grid-template-columns:1fr; gap:16px; }
.dcard { background:#fff; border:2px solid var(--sand); border-radius:24px; padding:18px 18px 14px; min-width:0; }
.dcard > header { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:10px; }
.dcard h3 { font:400 1.25rem 'Anton',sans-serif; letter-spacing:.03em; color:var(--green); }
.dcard header p { font:500 .74rem 'Montserrat',sans-serif; color:var(--muted); margin-top:2px; }
.dcard .count { font:400 1.8rem 'Anton',sans-serif; color:var(--red); }
.seg-mini { display:inline-flex; flex-shrink:0; border:1.5px solid var(--sand); border-radius:999px; padding:2px; }
.seg-mini button { border:0; background:transparent; color:var(--muted); font:800 .66rem 'Montserrat',sans-serif; padding:5px 10px; border-radius:999px; cursor:pointer; }
.seg-mini button.on { background:var(--green); color:var(--cream); }
.dcard .tbl { display:none; max-height:340px; overflow:auto; }
.dcard.tv .tbl { display:block; } .dcard.tv .chart, .dcard.tv .legend { display:none; }
.dcard table { width:100%; border-collapse:collapse; font:600 .78rem 'Montserrat',sans-serif; }
.dcard th { text-align:left; color:var(--muted); font-weight:800; font-size:.68rem; letter-spacing:.06em; padding:6px 8px; border-bottom:1.5px solid var(--sand); position:sticky; top:0; background:#fff; }
.dcard td { padding:7px 8px; border-bottom:1px solid #F1E8D6; }
.dcard .r { text-align:right; font-variant-numeric:tabular-nums; }
.legend { display:flex; gap:16px; margin:2px 0 6px; font:700 .74rem 'Montserrat',sans-serif; color:var(--brown); }
.legend span { display:inline-flex; align-items:center; gap:7px; } .legend i { width:12px; height:12px; border-radius:3px; display:inline-block; }
.chart { min-height:40px; } .chart svg { display:block; max-width:100%; }
.chart .ax { font:600 11px 'Montserrat',sans-serif; fill:#7A6A55; }
.chart .dl { font:800 12px 'Montserrat',sans-serif; fill:#2B1D14; }
.chart .lb { font:700 12.5px 'Montserrat',sans-serif; fill:#2B1D14; }
.chart .vl { font:700 12px 'Montserrat',sans-serif; fill:#7A6A55; }
.hit { outline:none; cursor:default; }
.hit .m { transition:filter .15s; }
.hit:hover .m, .hit:focus .m { filter:brightness(1.18); }
.hit:focus-visible rect { stroke:var(--green); stroke-width:1.5; rx:6; }
.empty-s { padding:26px 6px; text-align:center; color:var(--muted); font:600 .84rem 'Montserrat',sans-serif; }

.funbar { display:flex; gap:2px; height:44px; margin:10px 0 16px; }
.funbar .fseg { flex-basis:0; min-width:34px; border:0; border-radius:0; padding:0; display:flex; align-items:center; justify-content:center; color:#fff; font:800 .9rem 'Montserrat',sans-serif; outline:none; transition:filter .15s; }
.funbar .fseg:first-child { border-radius:12px 0 0 12px; } .funbar .fseg:last-child { border-radius:0 12px 12px 0; } .funbar .fseg:only-child { border-radius:12px; }
.funbar .fseg:hover, .funbar .fseg:focus { filter:brightness(1.12); }
.funlist { list-style:none; display:grid; gap:10px; }
.funlist li { display:grid; grid-template-columns:14px auto 1fr; gap:4px 10px; align-items:baseline; font:600 .8rem 'Montserrat',sans-serif; }
.funlist i { width:12px; height:12px; border-radius:3px; display:inline-block; align-self:center; }
.funlist span { color:var(--muted); text-align:right; }

.rows { list-style:none; display:grid; }
.rows li { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 2px; border-top:1px solid #F1E8D6; }
.rows li:first-child { border-top:0; }
.rows b { font:800 .86rem 'Montserrat',sans-serif; color:var(--brown); display:block; }
.rows small { font:500 .72rem 'Montserrat',sans-serif; color:var(--muted); }
.rows a { flex-shrink:0; font:800 .74rem 'Montserrat',sans-serif; color:#fff; background:var(--red); text-decoration:none; padding:8px 16px; border-radius:999px; box-shadow:0 3px 0 var(--red-dk); }
.rows.plain li { justify-content:flex-start; } .rows.plain b { display:inline; } .rows.plain small { margin-left:auto; }
.tag { font:800 .62rem 'Montserrat',sans-serif; letter-spacing:.05em; padding:4px 10px; border-radius:999px; color:#fff; flex-shrink:0; }
.tag.red { background:var(--red); } .tag.gold { background:var(--gold); color:var(--brown); } .tag.gray { background:#A99B86; }
.more { font:600 .74rem 'Montserrat',sans-serif; color:var(--muted); padding:8px 2px 4px; }

#dtip { position:fixed; display:none; z-index:90; pointer-events:none; background:#2B1D14; color:var(--cream); border-radius:12px; padding:10px 14px; box-shadow:0 10px 24px rgba(43,29,20,.35); font-family:'Montserrat',sans-serif; max-width:260px; }
#dtip .th { font-weight:600; font-size:.7rem; color:rgba(243,234,217,.65); margin-bottom:6px; text-transform:lowercase; }
#dtip .tr { display:flex; align-items:center; gap:8px; padding:2px 0; }
#dtip .tr i { width:10px; height:3px; border-radius:2px; flex-shrink:0; }
#dtip .tr b { font-weight:800; font-size:.9rem; } #dtip .tr span { font-size:.72rem; color:rgba(243,234,217,.7); }

@media (min-width:720px) {
    .kpis { grid-template-columns:repeat(4,1fr); }
}
@media (min-width:1024px) {
  #tab-dash { padding-top:48px; }
  .kpis { grid-template-columns:1.35fr repeat(4,1fr); gap:16px; }
  .kpi-hero { grid-column:1; grid-row:1 / span 2; justify-content:center; padding:28px; }
  .kpi-hero b { font-size:clamp(2.4rem, 3.4vw, 3.6rem); }
  .tile { padding:18px 20px; } .tile b { font-size:1.8rem; }
    .dgrid { grid-template-columns:repeat(12,1fr); gap:24px; }
  .span12 { grid-column:span 12; } .span6 { grid-column:span 6; }
  .dcard { padding:24px 26px 18px; border-radius:28px; } .dcard h3 { font-size:1.45rem; } .dcard header p { font-size:.8rem; }
}
@media (max-width:480px) {
  .tab-btn { font-size:.64rem; letter-spacing:.01em; padding:10px 2px; }
  .kpi-hero b { font-size:2.8rem; }
}


/* ═══════════ PAGAMENTO COM CARTÃO ═══════════ */
.paybox { margin-top:4px; }
.alt-pay { margin-top:14px; display:flex; flex-direction:column; gap:8px; align-items:stretch; }
.alt-pay > span { font:800 .68rem 'Montserrat',sans-serif; color:var(--muted); letter-spacing:.08em; text-align:center; display:flex; align-items:center; gap:10px; }
.alt-pay > span::before, .alt-pay > span::after { content:''; flex:1; height:1px; background:var(--sand); }
.card-btn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; border:2px solid var(--green); background:var(--green); color:var(--cream); border-radius:16px; padding:13px 16px; font:800 .86rem 'Montserrat',sans-serif; cursor:pointer; box-shadow:0 4px 0 #1d3327; transition:.15s; }
.card-btn:hover { transform:translateY(-1px); }
.card-btn:active { transform:translateY(3px); box-shadow:0 1px 0 #1d3327; }
.card-wait { margin-top:12px; padding:14px 16px; border-radius:16px; background:rgba(232,165,58,.14); border:2px dashed var(--gold); display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.card-wait b { font:400 1.05rem 'Anton',sans-serif; letter-spacing:.03em; color:var(--green); }
.card-wait span { font-size:.8rem; font-weight:600; color:var(--muted); }
.card-wait .mini { margin:8px 0 0; }

.pay-modal .modal-box { max-width:440px; max-height:92vh; overflow-y:auto; text-align:left; }
.pay-total { display:flex; justify-content:space-between; align-items:baseline; margin:14px 0 16px; padding:12px 16px; border-radius:14px; background:var(--cream); border:2px solid var(--sand); }
.pay-total span { font:700 .76rem 'Montserrat',sans-serif; color:var(--muted); }
.pay-total b { font:400 1.7rem 'Anton',sans-serif; color:var(--red); }
.sf { height:46px; background:var(--cream); border:2px solid var(--sand); border-radius:14px; padding:0 14px; display:flex; align-items:center; overflow:hidden; transition:.2s; }
.sf:focus-within { border-color:var(--red); box-shadow:0 0 0 3px rgba(210,73,47,.18); }
.sf iframe { height:100% !important; width:100% !important; border:0; }
.row2f { display:grid; grid-template-columns:1fr 1fr; gap:0 10px; }
.pm-brand { font:700 .7rem 'Montserrat',sans-serif; color:var(--leaf); text-transform:lowercase; letter-spacing:0; margin-left:6px; }
.chk { display:flex; align-items:center; gap:10px; font:700 .8rem 'Montserrat',sans-serif; color:var(--brown); margin:2px 0 14px; cursor:pointer; }
.chk input { width:18px; height:18px; accent-color:var(--green); }
.pay-secure { display:flex; gap:8px; align-items:flex-start; margin:14px 0 4px; font:500 .7rem/1.45 'Montserrat',sans-serif; color:var(--muted); }
.pay-secure svg { flex-shrink:0; margin-top:1px; color:var(--leaf); }
.pay-note { font:500 .76rem/1.5 'Montserrat',sans-serif; color:var(--muted); margin:10px 0; }
.calc-btn:disabled { opacity:.7; cursor:wait; }
#payStatus { margin:2px 0 10px; min-height:0; }
#payStatus:empty { display:none; }

.saved-list { margin-bottom:14px; }
.sc { display:flex; align-items:center; gap:10px; padding:12px 14px; border:2px solid var(--sand); border-radius:14px; margin-bottom:8px; background:#fff; cursor:pointer; font:700 .86rem 'Montserrat',sans-serif; transition:.15s; }
.sc.on { border-color:var(--green); background:var(--cream); }
.sc.old { opacity:.55; }
.sc input[type=radio] { accent-color:var(--green); width:18px; height:18px; flex-shrink:0; }
.sc small { color:var(--muted); font-weight:600; }
.sc .rm { margin-left:auto; border:0; background:none; color:var(--red); font:800 .7rem 'Montserrat',sans-serif; cursor:pointer; text-decoration:underline; padding:4px; }
.brandtag { font:800 .66rem 'Montserrat',sans-serif; background:var(--green); color:var(--cream); padding:3px 9px; border-radius:6px; letter-spacing:.04em; }

.ch-box { max-width:520px; }
.ch-box iframe { width:100%; height:460px; border:2px solid var(--sand); border-radius:14px; background:#fff; margin-top:10px; }
@media (max-width:480px) { .ch-box iframe { height:70vh; } .row2f { grid-template-columns:1fr; } }
@media (min-width:1024px) { #tab-resv.cust .resv .paybox { grid-area:pix; margin-top:18px; padding-top:18px; border-top:2px dashed var(--sand); } }