:root{
  --cream:#F7F1E3; --paper:#FFFDF7; --cream2:#EDE4CF;
  --navy:#1F2A44; --navy2:rgba(31,42,68,.72); --navy3:rgba(31,42,68,.18);
  --bordo:#7A1E2C; --title:#7A1E2C; --on-accent:#F7F1E3;
  --slab:'Alfa Slab One', Rockwell, 'Roboto Slab', Georgia, serif;
  --sans:'Work Sans', 'Helvetica Neue', Helvetica, system-ui, sans-serif;
  color-scheme:only light; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
#app[data-bg="azul"]{--cream:#1F2A44;--paper:#27334F;--cream2:#2E3A58;--navy:#F7F1E3;--navy2:rgba(247,241,227,.78);--navy3:rgba(247,241,227,.22);--bordo:#7A1E2C;--title:#F7F1E3}
#app[data-bg="bordo"]{--cream:#7A1E2C;--paper:#852838;--cream2:#8E3142;--navy:#F7F1E3;--navy2:rgba(247,241,227,.8);--navy3:rgba(247,241,227,.25);--bordo:#1F2A44;--title:#F7F1E3}
/* estilos do app (Perfil) */
#app[data-st="classico"]{--slab:'Cormorant Garamond', Georgia, serif;--sans:'Jost','Helvetica Neue',Helvetica,system-ui,sans-serif}
#app[data-st="classico"][data-bg="creme"]{--cream:#FBF8F2;--cream2:#F1EBDD}
#app[data-st="minimal"]{--slab:'Manrope','Helvetica Neue',Helvetica,system-ui,sans-serif;--sans:'Manrope','Helvetica Neue',Helvetica,system-ui,sans-serif}
#app[data-st="minimal"][data-bg="creme"]{--cream:#FFFDF7;--cream2:#F4F1EA;--paper:#FFFFFF}
#app[data-st="noite"]{--slab:'Playfair Display', Georgia, serif;--sans:'Manrope','Helvetica Neue',Helvetica,system-ui,sans-serif;--cream:#1F2A44;--paper:#27334F;--cream2:#2E3A58;--navy:#F7F1E3;--navy2:rgba(247,241,227,.72);--navy3:rgba(247,241,227,.18);--bordo:#7A1E2C;--title:#F7F1E3}
#app[data-st="classico"] .title{font-weight:600;font-size:26px}
#app[data-st="classico"] .sec{font-weight:600;font-size:18px}
#app[data-st="minimal"] .title{font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.18em}
#app[data-st="minimal"] .sec{font-family:var(--sans);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.14em}
#app[data-st="noite"] .title{font-weight:500;font-size:24px}
#app[data-st="minimal"] .sec small{text-transform:none;letter-spacing:0;font-weight:500}
#app[data-st="noite"] .paybar{border-top:1px solid rgba(247,241,227,.18)!important}
#app[data-st="classico"] .hd,#app[data-st="minimal"] .hd,#app[data-st="noite"] .hd{border-bottom:1px solid var(--navy3)}
#app[data-st="classico"] .foot,#app[data-st="minimal"] .foot,#app[data-st="noite"] .foot{border-top:1px solid var(--navy3)}
#app[data-st="classico"] .btn,#app[data-st="minimal"] .btn,#app[data-st="noite"] .btn{font-family:var(--sans);font-weight:600;letter-spacing:.04em;font-size:15px;box-shadow:none}
#app[data-st="classico"] .seg,#app[data-st="minimal"] .seg{border:0;border-bottom:1px solid var(--navy3);border-radius:0;padding:0}
#app[data-st="classico"] .seg button,#app[data-st="minimal"] .seg button{border-radius:0;min-height:40px;color:var(--navy2)}
#app[data-st="classico"] .seg button[aria-pressed=true],#app[data-st="minimal"] .seg button[aria-pressed=true]{background:transparent;color:var(--navy);box-shadow:inset 0 -2px 0 var(--bordo);font-weight:600}
#app[data-st="minimal"] .seg button{font-size:11px;text-transform:uppercase;letter-spacing:.06em}
#app[data-st="noite"] .seg{border:1px solid var(--navy3);border-radius:22px;padding:3px}
#app[data-st="noite"] .seg button{border-radius:18px}
#app[data-st="noite"] .chip,#app[data-st="noite"] .btn2,#app[data-st="noite"] .field{border-radius:18px}
#app[data-st="classico"] .rbox,#app[data-st="minimal"] .rbox{border-width:1px}
.stylep{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.stylep button{border:1.5px solid var(--navy3);background:var(--paper);color:var(--navy);padding:6px 4px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:52px}
.stylep button[aria-pressed=true]{border:2px solid var(--navy)}
.stylep .aa{font-size:18px;line-height:1;color:var(--title)}
.stylep .nm{font-size:11px;font-weight:700}
.stylep .ds{display:none}
/* Boteco calmo: marca em poucos pontos, resto neutro */
#app[data-st="boteco"]{--sel:#44547A}
#app[data-st="boteco"][data-bg="azul"]{--sel:#F7F1E3}
#app[data-st="boteco"] .sec{font-family:var(--sans);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--navy2);margin:18px 0 6px}
#app[data-st="boteco"] .sec small{text-transform:none;letter-spacing:0;font-weight:500}
#app[data-st="boteco"] .hh{font-family:var(--sans);font-weight:700;font-size:12px;color:var(--navy2)}
#app[data-st="boteco"] .tag.bordo{background:transparent;border-color:var(--bordo);color:var(--title)}
#app[data-st="boteco"] .box,#app[data-st="boteco"] .sum3,#app[data-st="boteco"] .field,#app[data-st="boteco"] .mesa,#app[data-st="boteco"] .stepper,#app[data-st="boteco"] .pblock,#app[data-st="boteco"] .stylep button,#app[data-st="boteco"] .theme button{border:1px solid var(--navy3)}
#app[data-st="boteco"] .sum3>div+div{border-left:1px solid var(--navy3)}
#app[data-st="boteco"] .rbox{border:1px solid var(--navy3)}
#app[data-st="boteco"] .rbox.inv{background:#44547A;border-color:#44547A}
#app[data-st="boteco"][data-bg="azul"] .rbox.inv{background:#2E3A58;border-color:#2E3A58}
#app[data-st="boteco"] .mesa.ocupada{background:#44547A;border-color:#44547A}
#app[data-st="boteco"] .mesa.livre{border-style:dashed;border-color:rgba(31,42,68,.35)}
#app[data-st="boteco"][data-bg="azul"] .mesa.livre{border-color:rgba(247,241,227,.35)}
#app[data-st="boteco"] .mesa.reservada{border-color:var(--bordo)}
#app[data-st="boteco"] .seg{border:1px solid var(--navy3)}
#app[data-st="boteco"] .seg button{color:var(--navy2)}
#app[data-st="boteco"] .seg button[aria-pressed=true]{background:var(--sel);color:var(--cream);font-weight:700}
#app[data-st="boteco"] .mini{border:1px solid var(--navy3)}
#app[data-st="boteco"] .mini button[aria-pressed=true]{background:var(--sel);color:var(--cream)}
#app[data-st="boteco"] .sum3 .v,#app[data-st="boteco"] .tline b,#app[data-st="boteco"] .gband .n{font-family:var(--sans);font-weight:700}
#app[data-st="boteco"] .rrow .mn,#app[data-st="boteco"] .trow .q,#app[data-st="boteco"] .mesa .n,#app[data-st="boteco"] .pblock .ph .mn,#app[data-st="boteco"] .pblock .pi .q{font-family:var(--sans);font-weight:700}
#app[data-st="boteco"] .take{font-family:var(--sans);font-weight:700;font-size:14px;box-shadow:none}
#app[data-st="boteco"] .nt,#app[data-st="boteco"] .notice{border-width:1.5px}
#app[data-st="boteco"] .chip{border-width:1px;border-color:var(--navy3)}
#app[data-st="boteco"] .chip[aria-pressed=true]{background:var(--sel);border-color:var(--sel);color:var(--cream)}
#app[data-st="boteco"] .cd,#app[data-st="boteco"] .ib,#app[data-st="boteco"] .mini-ib,#app[data-st="boteco"] .more,#app[data-st="boteco"] .qs,#app[data-st="boteco"] .pdfbtn{border-width:1px;border-color:var(--navy3)}
#app[data-st="boteco"] .icon{border-width:1.5px}
#app[data-st="boteco"] .btn2.on,#app[data-st="boteco"] .nt button.on{background:var(--sel);border-color:var(--sel);color:var(--cream)}
#app[data-st="boteco"] .cd[aria-pressed=true]{background:var(--sel);border-color:var(--sel);color:var(--cream)}
#app[data-st="boteco"] .sw2[aria-checked=true] .tr{background:var(--sel)}
#app[data-st="boteco"] .tag.solid{background:var(--sel)}
.bimg{flex-shrink:0;border-radius:50%;background:var(--cream2);border:1.5px solid var(--navy3);display:inline-flex;align-items:center;justify-content:center;overflow:hidden;font-family:'Alfa Slab One',Georgia,serif;color:var(--title);line-height:1;position:relative}
.bimg::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.35),transparent 55%)}
.hd .bimg{margin-right:2px}
.srch{display:flex;align-items:center;gap:8px;border:1px solid var(--navy3);background:var(--paper);padding:0 12px;height:42px;margin-top:12px}
.srch input{flex:1;border:0;background:transparent;font:inherit;font-size:15px;color:var(--navy);outline:none;min-width:0}
.srch svg{flex-shrink:0;color:var(--navy2)}
.bphoto{display:block;width:calc(100% + 36px);margin:0 -18px;height:190px;object-fit:cover}
.hrs{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:14px}
.hrs .d{color:var(--navy2)}
.hrs .today{font-weight:700;color:var(--navy)}
.li .l1{line-height:22px}
.li .l1 .tag{vertical-align:middle!important;line-height:14px;padding:1px 6px}
#app{color-scheme:light}
select option{color:#1F2A44;background:#FFFDF7}
#app .sec.big,#app[data-st="boteco"] .sec.big{font-family:var(--slab);font-weight:400;font-size:22px;color:var(--title);text-transform:none;letter-spacing:0;margin:26px 0 4px;padding-bottom:6px;border-bottom:3px double var(--navy3)}
#app .sec.big small{font-family:var(--sans);font-size:12px;color:var(--navy2);text-transform:none;letter-spacing:0;margin-left:8px}
*,*::before,*::after{box-sizing:border-box}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px);background:var(--cream)}
body{height:100%;margin:0;background:#F7F1E3;color:var(--navy);font-family:var(--sans);font-size:15px;-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--bordo);outline-offset:2px}
input[type=radio],input[type=checkbox]{accent-color:var(--navy);width:22px;height:22px;margin:0;flex-shrink:0}
#app{font-family:var(--sans);color:var(--navy);height:100%;max-width:440px;margin:0 auto;display:flex;flex-direction:column;position:relative;overflow:hidden;background:var(--cream);color:var(--navy)}
@media (min-width:480px){#app{border-inline:1px solid var(--navy3)}}

/* estrutura */
.hd{flex-shrink:0;padding:12px 18px 10px;display:flex;align-items:center;gap:12px;border-bottom:3px double var(--navy)}
.hd .t{flex:1;min-width:0}
.title{margin:0;font-family:var(--slab);font-weight:400;font-size:22px;line-height:1.05;color:var(--title)}
.sub{font-size:12px;color:var(--navy2);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{flex-shrink:0;padding:10px 18px 0}
.main{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 18px 24px}
.foot{flex-shrink:0;padding:12px 18px 14px;border-top:3px double var(--navy);display:flex;flex-direction:column;gap:10px;background:var(--cream)}
.nav{flex-shrink:0;display:grid;border-top:2px solid var(--navy);background:var(--cream)}
.nav button{border:0;background:transparent;color:var(--navy2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:58px;font-size:11px;position:relative}
.nav button[aria-current=page]{color:var(--navy);font-weight:700}
.nav button[aria-current=page]::before{content:"";position:absolute;top:-2px;left:20%;right:20%;height:4px;background:var(--navy)}
.count{position:absolute;top:7px;left:calc(50% + 8px);min-width:18px;height:18px;padding:0 4px;background:var(--bordo);color:var(--on-accent);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* tipografia padrão */
.sec{margin:18px 0 6px;font-family:var(--slab);font-weight:400;font-size:16px;color:var(--title);display:flex;align-items:baseline;gap:8px}
.sec small{font-family:var(--sans);font-size:12px;color:var(--navy2);font-weight:500}
.p{margin:0;font-size:15px;line-height:1.5}
.hint{font-size:12px;line-height:1.45;color:var(--navy2)}
.b{font-weight:700}
.money{font-weight:700;white-space:nowrap}

/* componentes */
.icon{width:44px;height:44px;flex-shrink:0;border:2px solid var(--navy);background:transparent;color:var(--navy);display:flex;align-items:center;justify-content:center;padding:0}
.btn{height:54px;width:100%;border:0;padding:0 18px;background:var(--bordo);color:var(--on-accent);display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:4px 4px 0 var(--navy);font-family:var(--slab);font-size:17px;transition:transform .08s,box-shadow .08s}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--navy)}
.btn[disabled]{opacity:.4;cursor:not-allowed;box-shadow:none}
.btn .r{margin-left:auto;font-family:var(--sans);font-weight:700;font-size:15px}
.btn2{min-height:48px;width:100%;border:2px solid var(--navy);background:transparent;color:var(--navy);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 14px}
.btn2.sm{min-height:36px;width:auto;font-size:13px;padding:0 12px}
.btn2.on{background:var(--navy);color:var(--cream)}
.seg{display:grid;border:2px solid var(--navy)}
.seg button{min-height:40px;border:0;background:transparent;color:var(--navy);font-size:14px;padding:0 4px;position:relative}
.seg button[aria-pressed=true]{background:var(--navy);color:var(--cream);font-weight:700}
.seg.five button{font-size:12.5px;padding:0 2px}
.rbox{padding:2px 12px 12px;margin-top:12px;border:2px solid var(--navy);background:var(--paper)}
.rbox.alt{border-color:var(--cream2);background:var(--cream2)}
.rbox.inv{border-color:#1F2A44;background:#1F2A44;color:#F7F1E3;--navy:#F7F1E3;--navy2:rgba(247,241,227,.78);--navy3:rgba(247,241,227,.22);--title:#F7F1E3;--cream:#1F2A44;--cream2:#2E3A58;--paper:#27334F}
#app[data-bg="azul"] .rbox.inv,#app[data-bg="bordo"] .rbox.inv{border-color:#F7F1E3;background:#F7F1E3;color:#1F2A44;--navy:#1F2A44;--navy2:rgba(31,42,68,.72);--navy3:rgba(31,42,68,.18);--title:#7A1E2C;--cream:#F7F1E3;--cream2:#EDE4CF;--paper:#FFFDF7}
.paybar{background:#1F2A44;border-top-color:#1F2A44!important;color:#F7F1E3}
.paybar .hint{color:rgba(247,241,227,.8)}.paybar .val{color:#F7F1E3}.paybar .btn{box-shadow:4px 4px 0 #F7F1E3}
#app[data-bg="azul"] .paybar,#app[data-bg="bordo"] .paybar{background:#F7F1E3;border-top-color:#F7F1E3!important;color:#1F2A44}
#app[data-bg="azul"] .paybar .hint,#app[data-bg="bordo"] .paybar .hint{color:rgba(31,42,68,.72)}
#app[data-bg="azul"] .paybar .val,#app[data-bg="bordo"] .paybar .val{color:#7A1E2C}
#app[data-bg="azul"] .paybar .btn,#app[data-bg="bordo"] .paybar .btn{box-shadow:4px 4px 0 #1F2A44}
button.av{border:0;padding:0;cursor:pointer}
button.av:hover{outline:2px solid var(--title);outline-offset:2px}
.avbig{width:64px;height:64px;font-size:24px}
.rbox .sec{margin-top:12px}
.rbox .list{border-top-color:var(--navy3)}
.theme{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.theme button{border:1.5px solid var(--navy3);padding:0;background:transparent;color:var(--navy);display:flex;flex-direction:column;align-items:stretch;font-size:13px;font-weight:700}
.theme button[aria-pressed=true]{border:2px solid var(--navy)}
.theme .sw{height:30px;display:flex;align-items:center;justify-content:center;font-family:var(--slab);font-size:13px}
.theme .nm{padding:4px 0;text-align:center;font-size:11px}
.seg .count{top:3px;left:auto;right:4px}
.tabs{display:flex;gap:18px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--navy3);margin-top:12px}
.tabs::-webkit-scrollbar{display:none}
.tab{flex-shrink:0;height:42px;border:0;border-bottom:3px solid transparent;background:transparent;color:var(--navy2);font-size:15px;padding:0 2px}
.tab[aria-pressed=true]{border-bottom-color:var(--navy);color:var(--navy);font-weight:700}
.chip{min-height:36px;padding:0 12px;border:1.5px solid var(--navy);background:transparent;color:var(--navy);font-size:14px}
.chip[aria-pressed=true]{background:var(--navy);color:var(--cream);font-weight:700}

/* linhas padrão */
.list{border-top:1px solid var(--navy3)}
.li{display:flex;align-items:center;gap:12px;min-height:50px;padding:8px 0;border-bottom:1px solid var(--navy3);width:100%;text-align:left;background:transparent;border-left:0;border-right:0;border-top:0;color:var(--navy)}
button.li{cursor:pointer}
.li .main2{flex:1;min-width:0}
.li .l1{font-weight:700;font-size:15px}
.li .l2{font-size:12px;color:var(--navy2);margin-top:2px}
.li.nw .l1,.li.nw .l2,.nw1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .end{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0}
.chev{color:var(--navy2)}
.kv{display:flex;align-items:baseline;gap:8px;padding:6px 0}
.kv .dots{flex:1;border-bottom:2px dotted var(--navy3);transform:translateY(-4px);min-width:10px}
.av{width:30px;height:30px;flex-shrink:0;background:var(--navy);color:var(--cream);font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.av.me{background:var(--bordo);color:var(--on-accent)}
.tag{padding:3px 7px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;border:1.5px solid var(--navy);color:var(--navy)}
.tag.solid{background:var(--navy);color:var(--cream)}
.tag.bordo{background:var(--bordo);border-color:var(--bordo);color:var(--on-accent)}
.notice{border:2px solid var(--bordo);background:var(--paper);padding:12px 14px;display:flex;flex-direction:column;gap:10px;margin-top:10px}
.notice .acts{display:flex;gap:8px}
.nt{display:flex;align-items:center;gap:10px;border:2px solid var(--bordo);background:var(--paper);padding:8px 10px;margin-top:8px;font-size:13.5px;line-height:1.35}
.nt.new{animation:ntin .3s ease-out}
.nt .tx{flex:1;min-width:0}
.nt .bt{display:flex;gap:6px;flex-shrink:0}
.nt button{height:30px;padding:0 10px;font-size:12.5px;font-weight:700;border:1.5px solid var(--navy);background:transparent;color:var(--navy)}
.nt button.on{background:var(--navy);color:var(--cream)}
@keyframes ntin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.nt{animation:none}}
.hfil{display:flex;gap:8px;margin-top:12px}
.hfil label{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--navy2)}
.hfil select{height:36px;border:1.5px solid var(--navy);background:var(--paper);color:var(--navy);font:inherit;font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;padding:0 8px;border-radius:0}
.hh{display:flex;align-items:baseline;gap:8px;margin:18px 0 2px;font-family:var(--slab);font-size:15px;color:var(--title)}
.hh::after{content:"";flex:1;border-bottom:1px solid var(--navy3)}
.hr{display:grid;grid-template-columns:42px 86px minmax(0,1fr);gap:8px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--navy3);font-size:14px;line-height:1.4}
.hr .tm{color:var(--navy2);font-size:13px}
.hr .kd{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--navy2)}
.hr.ent{background:#1F2A44;color:#F7F1E3;margin:0 -18px;padding:8px 18px;border-bottom-color:#1F2A44}
.hr.ent .tm,.hr.ent .kd{color:rgba(247,241,227,.78)}
#app[data-bg="azul"] .hr.ent,#app[data-bg="bordo"] .hr.ent{background:#F7F1E3;color:#1F2A44}
#app[data-bg="azul"] .hr.ent .tm,#app[data-bg="azul"] .hr.ent .kd,#app[data-bg="bordo"] .hr.ent .tm,#app[data-bg="bordo"] .hr.ent .kd{color:rgba(31,42,68,.7)}
.box{border:1.5px solid var(--navy3);background:var(--paper);padding:14px}
.sum3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1.5px solid var(--navy3);background:var(--paper);margin-top:12px}
.sum3>div{padding:8px 10px}.sum3>div+div{border-left:1.5px solid var(--navy3)}
.sum3 .k{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--navy2)}
.sum3 .v{font-family:var(--slab);font-size:16px;margin-top:4px;white-space:nowrap}

/* tabela de extrato */
.tbl{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:8px}
.tbl th{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--navy2);text-align:left;padding:6px 7px 6px 0;border-bottom:2px solid var(--navy)}
.tbl td{padding:8px 7px 8px 0;border-bottom:1px solid var(--navy3);vertical-align:top;white-space:nowrap}
.tbl th{white-space:nowrap}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:8px}
.tblwrap .tbl{margin-top:0;min-width:100%}
.tbl .r{text-align:right;white-space:nowrap}
.tbl .x{text-decoration:line-through;color:var(--navy2)}
.tbl .neg{color:var(--title);font-weight:700}

/* formulário */
.lbl{display:block;font-size:14px;font-weight:700;margin-bottom:8px}
.field{display:block;width:100%;padding:12px 14px;border:2px solid var(--navy);border-radius:0;background:var(--paper);font-size:16px;resize:none}
input.field{height:52px;padding:0 14px}
.field[aria-invalid=true]{border-color:var(--bordo);border-width:3px}
.err{color:var(--title);font-size:13px;font-weight:700;margin-top:6px}
.code{letter-spacing:.5em;text-align:center;font-family:var(--slab);font-size:28px;height:64px!important}
.fgroup{display:flex;flex-direction:column;gap:16px;margin-top:16px}
.stepper{display:flex;align-items:center;height:54px;border:2px solid var(--navy);flex-shrink:0}
.stepper button{width:44px;height:50px;border:0;background:transparent;font-size:22px}
.stepper span{min-width:22px;text-align:center;font-weight:700;font-size:17px}

/* camadas */
.layer{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;background:var(--cream)}
.scrim{position:absolute;inset:0;z-index:30;background:rgba(31,42,68,.55);display:flex;align-items:flex-end}
.modal{width:100%;background:var(--cream);border-top:3px double var(--navy);padding:20px 18px 22px;display:flex;flex-direction:column;gap:14px;max-height:94%;overflow-y:auto;-webkit-overflow-scrolling:touch}.modal>*{flex-shrink:0}
.cam{height:220px;flex-shrink:0;background:var(--navy);position:relative;display:flex;align-items:flex-end;justify-content:center;padding-bottom:14px;color:var(--cream);font-size:13px}
.cam::before{content:"";position:absolute;top:30px;left:50%;margin-left:-75px;width:150px;height:150px;border:3px solid var(--cream);clip-path:polygon(0 0,30% 0,30% 6%,6% 6%,6% 30%,0 30%,0 70%,6% 70%,6% 94%,30% 94%,30% 100%,70% 100%,70% 94%,94% 94%,94% 70%,100% 70%,100% 30%,94% 30%,94% 6%,70% 6%,70% 0,100% 0,100% 100%,0 100%)}
.toast{position:absolute;left:16px;right:16px;bottom:148px;pointer-events:none;padding:13px 15px;background:var(--bordo);color:var(--on-accent);font-weight:700;font-size:14px;box-shadow:4px 4px 0 var(--navy);border:2px solid var(--on-accent);z-index:40}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0 4px}.chips::-webkit-scrollbar{display:none}.chips .chip{flex-shrink:0;white-space:nowrap}
.li.fade{opacity:.5}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ctl{display:flex;align-items:center;gap:10px;margin-top:10px}
.mini{display:inline-grid;grid-auto-flow:column;border:1.5px solid var(--navy)}
.mini button{height:30px;padding:0 12px;border:0;background:transparent;color:var(--navy);font-size:13px}
.mini button[aria-pressed=true]{background:var(--navy);color:var(--cream);font-weight:700}
.pdfbtn{margin-left:auto;height:30px;padding:0 10px;border:1.5px solid var(--navy3);background:transparent;color:var(--navy);font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:6px}
.crow{display:flex;align-items:center;gap:10px}
.crow .who{flex:1;min-width:0}
.crow .st{font-size:12px;line-height:1.35;color:var(--navy2);margin-top:2px}
.cd{width:30px;height:30px;border:1.5px solid var(--navy3);background:transparent;color:var(--navy);font-size:12px;font-weight:700;padding:0;flex-shrink:0}
.cd[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:var(--cream)}
.gband{margin:16px -18px 0;padding:9px 18px;display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;background:var(--navy);color:var(--cream)}
.gband.acc{background:var(--bordo);color:var(--on-accent)}
.gband .bm{width:52px;text-align:center;flex-shrink:0;margin-left:-0px;font-size:10.5px;opacity:.85}
.gband .n{margin-left:auto;font-family:var(--slab);font-size:16px;letter-spacing:0}
.rrow{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--navy3);width:100%;text-align:left;background:transparent;border-left:0;border-right:0;border-top:0;color:var(--navy)}
.rrow .mn{font-family:var(--slab);font-size:24px;line-height:1;text-align:center}
.rrow .mn small{display:block;font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--navy2);margin-top:3px}
.rrow .it{font-weight:700;font-size:15px;line-height:1.3;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rrow .mt{font-size:12.5px;color:var(--navy2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrow .mt .late{color:var(--title);font-weight:700}
.take{height:38px;padding:0 14px;border:0;background:var(--bordo);color:var(--on-accent);font-family:var(--slab);font-size:15px;box-shadow:3px 3px 0 var(--navy)}
.trow{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid var(--navy3);font-size:14px}
.trow .q{font-family:var(--slab);font-size:17px;min-width:34px}
.prow{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--navy3);font-size:14px;min-height:40px}
.prow .av{width:24px;height:24px;font-size:10px}
.prow .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow .nm small{color:var(--navy2);font-size:12px}
.ib{width:32px;height:32px;border:1.5px solid var(--navy3);background:transparent;color:var(--navy);display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:17px;flex-shrink:0}
.ib.x{border-color:var(--bordo);color:var(--title)}
.qs{display:inline-flex;align-items:center;border:1.5px solid var(--navy3)}
.qs button{width:30px;height:30px;border:0;background:transparent;color:var(--navy);font-size:17px;padding:0}
.qs span{min-width:22px;text-align:center;font-weight:700;font-size:14px}
.more{width:34px;height:34px;border:1.5px solid var(--navy3);background:transparent;color:var(--navy);font-size:18px;font-weight:700;padding:0;flex-shrink:0;line-height:1}
.divn{display:block;font-size:12px;margin-top:2px;color:var(--title);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.divn i{font-style:normal;display:inline-block;padding:0 5px;margin-right:5px;border:1.5px solid currentColor;font-size:11px}
.tline{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:8px 0 2px;font-size:13px;color:var(--navy2)}
.tline b{font-family:var(--slab);font-weight:400;font-size:17px;color:var(--navy)}
.tline .hot b{color:var(--title)}
.mesa.resp{box-shadow:inset 0 -6px 0 var(--bordo)}
.mesa.ocupada.resp{box-shadow:inset 0 -6px 0 var(--bordo),inset 0 -8px 0 #F7F1E3}
.mesa .s{font-size:10.5px;opacity:.85}
.sw2{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--navy2);font-size:12px;font-weight:700;padding:0;min-height:30px;flex-shrink:0}
.sw2 .tr{width:30px;height:17px;border-radius:9px;background:var(--navy3);position:relative;transition:background .15s}
.sw2 .tr::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--paper);transition:left .15s}
.sw2[aria-checked=true]{color:var(--navy)}
.sw2[aria-checked=true] .tr{background:var(--navy)}
.sw2[aria-checked=true] .tr::after{left:15px;background:var(--cream)}
@media (prefers-reduced-motion:reduce){.sw2 .tr,.sw2 .tr::after{transition:none}}
.cmt{font-size:12px;color:var(--navy2);padding:0 0 8px 52px;line-height:1.4}
.cmt b{color:var(--navy)}
.mini-ib{width:28px;height:28px;border:1.5px solid var(--navy3);background:transparent;color:var(--navy);display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:14px;flex-shrink:0}
.mini-ib.v{border-color:var(--bordo);color:var(--title)}
.vtag{display:inline-block;padding:1px 6px;margin-left:6px;border:1.5px solid var(--bordo);color:var(--title);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-decoration:none}
.fsel{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;font-weight:700;color:var(--navy2);letter-spacing:.04em;text-transform:uppercase}
.fsel select{height:32px;border:1.5px solid var(--navy);background:var(--paper);color:var(--navy);font:inherit;font-size:14px;font-weight:500;text-transform:none;letter-spacing:0;padding:0 8px;border-radius:0;min-width:130px}
.pblock{border:2px solid var(--navy);background:var(--paper);margin-top:12px}
.pblock .ph{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--navy3)}
.pblock .ph .mn{font-family:var(--slab);font-size:22px}
.pblock .pi{display:flex;gap:10px;padding:7px 12px;border-bottom:1px solid var(--navy3);font-size:15px;align-items:baseline}
.pblock .pi:last-of-type{border-bottom:0}
.pblock .pi .q{font-family:var(--slab);font-size:18px;min-width:32px}
.pblock .pi small{color:var(--navy2);font-size:12px}
.pblock.ready{opacity:.55;border-style:dashed}
.danfe{border:2px dashed var(--navy);background:var(--paper);padding:14px;font-size:13px;margin-top:14px}
.danfe h3{margin:0;text-align:center;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.danfe .c{text-align:center;color:var(--navy2);font-size:12px;margin:4px 0 10px}
.danfe .key{font-family:monospace;font-size:11.5px;word-break:break-all;text-align:center;margin-top:8px}
.kind{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--navy2)}
.li.blue .kind{color:rgba(247,241,227,.75)}
#app[data-bg="azul"] .li.blue .kind,#app[data-bg="bordo"] .li.blue .kind{color:rgba(31,42,68,.7)}
.fx{position:absolute;inset:0;z-index:45;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(31,42,68,.82);pointer-events:none;animation:fxin .25s ease-out}
.fx .t{font-family:var(--slab);font-size:28px;color:#F7F1E3;text-align:center;padding:0 24px}
@keyframes fxin{from{opacity:0}to{opacity:1}}
.beer .liq{transform-origin:50% 100%;animation:fill 1.1s ease-out both}
.beer .foam{animation:foam 1.1s ease-out both}
@keyframes fill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes foam{0%,70%{opacity:0;transform:translateY(40px)}100%{opacity:1;transform:translateY(0)}}
.clink{animation:clink .6s ease-in-out 2}
@keyframes clink{0%,100%{transform:rotate(0)}50%{transform:rotate(-12deg)}}
@media (prefers-reduced-motion:reduce){.beer .liq,.beer .foam,.clink,.fx{animation:none}}
.stamps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:12px}
.stampc{aspect-ratio:1;border:2px dashed var(--navy3);display:flex;align-items:center;justify-content:center;font-family:var(--slab);font-size:13px;color:var(--navy2);border-radius:50%}
.stampc.on{border:3px double var(--bordo);color:var(--title);transform:rotate(-12deg)}
.stampc.new{animation:stamp .5s cubic-bezier(.2,1.6,.4,1) both}
.recap{background:#1F2A44;color:#F7F1E3;padding:22px 20px;border:4px double #F7F1E3;outline:2px solid #1F2A44;margin-top:14px;text-align:center;display:flex;flex-direction:column;gap:12px}
.recap .big{font-family:var(--slab);font-size:30px;line-height:1.05}
.recap .row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(247,241,227,.3);border-bottom:1px solid rgba(247,241,227,.3);padding:10px 0}
.recap .k{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.recap .v{font-family:var(--slab);font-size:20px;margin-top:3px}
.recap .st{align-self:center;padding:6px 16px;border:4px double #F7F1E3;color:#F7F1E3;font-family:var(--slab);font-size:18px;transform:rotate(-5deg)}
.li.blue{cursor:pointer}
.li.blue.sel{outline:3px solid var(--bordo);outline-offset:-3px}
.li.blue{background:#1F2A44;color:#F7F1E3;padding-left:10px;padding-right:10px;border-bottom-color:#1F2A44;margin-top:2px}
.li.blue .tm{color:rgba(247,241,227,.8)!important}
#app[data-bg="azul"] .li.blue,#app[data-bg="bordo"] .li.blue{background:#F7F1E3;color:#1F2A44;border-bottom-color:#F7F1E3}
#app[data-bg="azul"] .li.blue .tm,#app[data-bg="bordo"] .li.blue .tm{color:rgba(31,42,68,.72)!important}
.photo{background:var(--cream2);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--navy2)}
.stamp{display:inline-block;padding:8px 22px;border:5px double var(--bordo);color:var(--title);font-family:var(--slab);font-size:38px;letter-spacing:.08em;transform:rotate(-6deg);animation:stamp .45s cubic-bezier(.2,1.6,.4,1) both}
@keyframes stamp{from{transform:rotate(-6deg) scale(1.8);opacity:0}to{transform:rotate(-6deg) scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.stamp{animation:none}.btn{transition:none}}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.mesa{min-height:62px;border:2px solid var(--navy);background:transparent;color:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px}
.mesa .n{font-family:var(--slab);font-size:20px}
.mesa.livre{border-style:dashed}
.mesa.ocupada{background:var(--navy);color:var(--cream)}
.mesa.reservada{border-color:var(--bordo);color:var(--title)}
.mesa.sua{background:var(--bordo);border-color:var(--bordo);color:var(--on-accent)}
.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--navy2);margin-top:10px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:14px;height:14px;display:inline-block;border:2px solid var(--navy)}

/* moldura de celular em telas grandes; no celular abre em tela cheia */
@media (min-width:640px) and (min-height:720px){
 html,body{background:#1d2333}
 body{display:flex;align-items:center;justify-content:center;min-height:100vh}
 #app{width:390px;max-width:390px;height:844px;max-height:calc(100vh - 32px);flex:none;margin:16px auto;border:11px solid #0e0e10;border-radius:46px;box-shadow:0 0 0 2px #3a3f4f,0 24px 60px rgba(0,0,0,.45);overflow:hidden}
 #app::before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:110px;height:28px;background:#0e0e10;border-radius:16px;z-index:9999;pointer-events:none}
}

.mgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:8px}
.mcard{background:var(--paper,#fff);border:1.5px solid var(--navy3);padding:0;text-align:left;cursor:pointer;color:inherit;font:inherit;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.mcard .mc-b{padding:8px 10px 10px;display:flex;flex-direction:column;gap:3px;min-width:0}
.mcard .mc-n{font-weight:700;font-size:14px;line-height:1.25}
.mcard .mc-p{font-size:13px;color:var(--navy2)}
.fisrow{border-bottom:1px solid var(--navy3);padding:10px 0}
.fisf{display:grid;gap:8px;margin-top:8px}
.fisf label{font-size:12px;font-weight:700;color:var(--navy2);display:flex;flex-direction:column;gap:3px}
.fisf .req::after{content:' *';color:var(--bordo)}
.fisf small{font-weight:500;color:var(--navy2)}
details.opt summary{cursor:pointer;font-weight:700;font-size:13px;margin-top:10px;color:var(--navy)}

.phw{display:flex;gap:6px;align-items:stretch;flex:1;min-width:0}
.phw .field{flex:1;min-width:0}
.ccb{flex-shrink:0;border:1.5px solid var(--navy);background:var(--paper,#fff);color:var(--navy);font:inherit;font-weight:700;font-size:14px;padding:0 10px;cursor:pointer;border-radius:0;min-height:40px;white-space:nowrap}
.estbar{flex-shrink:0;display:flex;align-items:center;gap:10px;padding:8px 18px;background:var(--navy);color:var(--cream)}.estbar label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;opacity:.85;white-space:nowrap}.estbar select{flex:1;min-width:0;height:36px;border:1px solid var(--cream);background:var(--navy);color:var(--cream);font:inherit;font-size:14px;font-weight:700;padding:0 8px;border-radius:0}.citysel{display:flex;align-items:center;gap:10px;margin-top:12px}.citysel label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--navy2);white-space:nowrap}.citysel select{flex:1;min-width:0;height:42px;border:1px solid var(--navy);background:var(--paper);color:var(--navy);font:inherit;font-size:15px;font-weight:700;padding:0 10px;border-radius:0}
.fselbtn{height:40px;padding:0 10px;border:1px solid var(--navy);background:var(--paper);color:var(--navy);font:inherit;font-size:13px;font-weight:700;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.mfchk{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px;border:1px solid var(--navy3);background:var(--paper);color:var(--navy);font:inherit;font-size:13px;font-weight:700;cursor:pointer;padding:4px}.mfchk small{font-size:10px;font-weight:400;color:var(--navy2)}.mfchk .bx{width:18px;height:18px;border:1.5px solid var(--navy);display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1}.mfchk[aria-pressed=true]{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}.mfchk[aria-pressed=true] .bx{background:var(--navy);color:var(--cream)}