/* ==================================================================
 * app.css  -  GERADO, NAO EDITE A MAO.
 *
 * Este arquivo sai do mockup aprovado por verificador/extrair.js.
 * Editar aqui e desfeito na proxima extracao, e o conferir.js REPROVA
 * a entrega antes disso acontecer (P-529, P-530, ADR-0004).
 *
 * Para mudar uma cor, um espaco ou um componente: mude no MOCKUP,
 * registre o desvio em 00-MOCKUP/DESVIOS.md, e rode extrair.js.
 * ================================================================== */
/* ============================================================
   MOCKUP v1 - Gestao de Eventos XBee
   Este arquivo e a FONTE DA VERDADE do CSS do sistema (P-529).
   O app.css do sistema sai daqui por extrair.php, nunca a mao.
   Paleta fechada, contraste conferido (P-516, P-103).
   ============================================================ */

:root{
  --ground:#F5F4F0;
  --surface:#FFFFFF;
  --surface-2:#EDEBE4;
  --surface-3:#E3E0D6;
  --line:#DBD7CC;
  --line-strong:#B6B1A2;
  --ink:#1B1813;
  --ink-2:#57523F;
  --ink-3:#7B7563;
  --accent:#FFC400;
  --accent-ink:#1B1813;
  --accent-deep:#8A5E00;
  --ok:#1B6B45;
  --ok-bg:#DFF0E6;
  --warn:#96470A;
  --warn-bg:#FBEBDA;
  --crit:#A11F17;
  --crit-bg:#FBE3E1;
  --info:#255F92;
  --info-bg:#DDEAF5;

  --seat-livre-fill:#FFFFFF;
  --seat-livre-stroke:#B6B1A2;
  --seat-sel-fill:#FFC400;
  --seat-sel-stroke:#8A5E00;
  --seat-res-fill:#7FA8C9;
  --seat-res-stroke:#255F92;
  --seat-vend-fill:#B6B1A2;
  --seat-vend-stroke:#8A8474;
  --seat-blq-fill:#E3E0D6;
  --seat-blq-stroke:#B6B1A2;

  --mock-bar:#1B1813;
  --mock-bar-ink:#F2EFE6;

  --r-sm:4px; --r-md:8px; --r-lg:12px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --shadow:0 1px 2px rgba(27,24,19,.06), 0 4px 12px rgba(27,24,19,.05);

  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"IBM Plex Sans","Segoe UI",Roboto,Arial,sans-serif;
  --f-mono:"IBM Plex Mono","SF Mono",Consolas,monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#131209;
    --surface:#1D1B12;
    --surface-2:#26241A;
    --surface-3:#332F22;
    --line:#35311F;
    --line-strong:#544F3B;
    --ink:#F2EFE6;
    --ink-2:#BFB9A4;
    --ink-3:#948E7B;
    --accent:#FFC400;
    --accent-ink:#1B1813;
    --accent-deep:#FFD75E;
    --ok:#5EC98F;
    --ok-bg:#173226;
    --warn:#E9A45F;
    --warn-bg:#33260F;
    --crit:#F1918A;
    --crit-bg:#361C1A;
    --info:#82B7E4;
    --info-bg:#152836;

    --seat-livre-fill:#1D1B12;
    --seat-livre-stroke:#6E6752;
    --seat-sel-fill:#FFC400;
    --seat-sel-stroke:#FFE9A3;
    --seat-res-fill:#3D658A;
    --seat-res-stroke:#82B7E4;
    --seat-vend-fill:#4A4636;
    --seat-vend-stroke:#6E6752;
    --seat-blq-fill:#26241A;
    --seat-blq-stroke:#4A4636;

    --mock-bar:#0C0B06;
    --mock-bar-ink:#F2EFE6;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  }
}

:root[data-theme="dark"]{
  --ground:#131209;
  --surface:#1D1B12;
  --surface-2:#26241A;
  --surface-3:#332F22;
  --line:#35311F;
  --line-strong:#544F3B;
  --ink:#F2EFE6;
  --ink-2:#BFB9A4;
  --ink-3:#948E7B;
  --accent:#FFC400;
  --accent-ink:#1B1813;
  --accent-deep:#FFD75E;
  --ok:#5EC98F;
  --ok-bg:#173226;
  --warn:#E9A45F;
  --warn-bg:#33260F;
  --crit:#F1918A;
  --crit-bg:#361C1A;
  --info:#82B7E4;
  --info-bg:#152836;
  --seat-livre-fill:#1D1B12;
  --seat-livre-stroke:#6E6752;
  --seat-sel-fill:#FFC400;
  --seat-sel-stroke:#FFE9A3;
  --seat-res-fill:#3D658A;
  --seat-res-stroke:#82B7E4;
  --seat-vend-fill:#4A4636;
  --seat-vend-stroke:#6E6752;
  --seat-blq-fill:#26241A;
  --seat-blq-stroke:#4A4636;
  --mock-bar:#0C0B06;
  --mock-bar-ink:#F2EFE6;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--f-body); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--f-display); margin:0; text-wrap:balance; letter-spacing:-.01em}
h1{font-size:22px; font-weight:700}
h2{font-size:17px; font-weight:700}
h3{font-size:14px; font-weight:600}
p{margin:0}
a{color:var(--accent-deep)}
button{font-family:inherit; font-size:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--accent-deep); outline-offset:2px; border-radius:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ---------- CASCA DO SISTEMA ---------- */
.app{display:grid; grid-template-columns:236px 1fr; min-height:calc(100vh - 46px)}
.app--publico{grid-template-columns:1fr}

.side{
  background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-4) var(--sp-3);
}
.brand{display:flex; align-items:center; gap:var(--sp-3); padding:0 var(--sp-2) var(--sp-4)}
.brand__mark{
  width:30px; height:30px; border-radius:var(--r-md); background:var(--accent);
  display:grid; place-items:center; font-family:var(--f-display); font-weight:700;
  color:var(--accent-ink); font-size:15px; flex:none;
}
.brand__name{font-family:var(--f-display); font-weight:700; font-size:14px; line-height:1.15}
.brand__sub{font-size:11px; color:var(--ink-3)}
.navgrp{display:flex; flex-direction:column; gap:1px}
.navgrp__t{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); padding:var(--sp-3) var(--sp-2) var(--sp-1);
}
.navlink{
  display:flex; align-items:center; gap:var(--sp-3); width:100%; text-align:left;
  padding:7px var(--sp-2); border:0; background:none; color:var(--ink-2);
  border-radius:var(--r-sm); font-size:13px;
}
.navlink:hover{background:var(--surface-2); color:var(--ink)}
.navlink[aria-current="page"]{background:var(--surface-2); color:var(--ink); font-weight:600; box-shadow:inset 2px 0 0 var(--accent)}
.navlink__i{width:16px; flex:none; text-align:center; font-size:12px; color:var(--ink-3)}
.navlink[aria-current="page"] .navlink__i{color:var(--accent-deep)}

.main{padding:var(--sp-5) var(--sp-6) var(--sp-7); min-width:0}
.pagehead{
  display:flex; flex-wrap:wrap; gap:var(--sp-4); align-items:flex-start;
  justify-content:space-between; margin-bottom:var(--sp-5);
}
.pagehead__t{min-width:0}
.pagehead__sub{color:var(--ink-2); font-size:13px; margin-top:2px}
.pagehead__acts{display:flex; gap:var(--sp-2); flex-wrap:wrap; justify-content:flex-end}

.crumb{font-family:var(--f-mono); font-size:11px; color:var(--ink-3); margin-bottom:var(--sp-2); letter-spacing:.02em}

/* ---------- COMPONENTES ---------- */
.btn{
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  padding:7px 13px; border-radius:var(--r-sm); font-size:13px; font-weight:500; white-space:nowrap;
}
.btn:hover{background:var(--surface-2)}
.btn--pri{background:var(--accent); border-color:var(--accent-deep); color:var(--accent-ink); font-weight:600}
.btn--pri:hover{filter:brightness(.95); background:var(--accent)}
.btn--ghost{border-color:transparent; background:none; color:var(--ink-2)}
.btn--ghost:hover{background:var(--surface-2); color:var(--ink)}
.btn--danger{border-color:var(--crit); color:var(--crit); background:var(--surface)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn--sm{padding:4px 9px; font-size:12px}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-5)}
.card--flat{border-radius:var(--r-md); padding:var(--sp-4)}
.card__h{display:flex; justify-content:space-between; align-items:flex-start; gap:var(--sp-3); margin-bottom:var(--sp-4)}

.grid{display:grid; gap:var(--sp-4)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
.split{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:var(--sp-5); align-items:start}

.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-4)}
.stat__l{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); font-family:var(--f-mono)}
.stat__v{font-family:var(--f-mono); font-size:26px; font-weight:600; letter-spacing:-.02em; margin-top:6px; font-variant-numeric:tabular-nums}
.stat__f{font-size:11px; color:var(--ink-3); margin-top:4px; line-height:1.4}
.stat--accent{box-shadow:inset 0 -3px 0 var(--accent)}

.pill{
  display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:99px;
  font-size:11px; font-weight:600; white-space:nowrap; border:1px solid transparent;
}
.pill--ok{background:var(--ok-bg); color:var(--ok); border-color:currentColor}
.pill--warn{background:var(--warn-bg); color:var(--warn); border-color:currentColor}
.pill--crit{background:var(--crit-bg); color:var(--crit); border-color:currentColor}
.pill--info{background:var(--info-bg); color:var(--info); border-color:currentColor}
.pill--mute{background:var(--surface-2); color:var(--ink-2); border-color:var(--line)}

.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
.money{font-family:var(--f-mono); font-variant-numeric:tabular-nums; white-space:nowrap}
.muted{color:var(--ink-3)}
.small{font-size:12px}

.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface)}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:13px}
th{
  text-align:left; font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500; padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap;
}
td{padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
td.num,th.num{text-align:right; font-family:var(--f-mono); font-variant-numeric:tabular-nums}

.field{display:flex; flex-direction:column; gap:5px}
.field__l{font-size:12px; font-weight:600; color:var(--ink-2)}
.field__h{font-size:11px; color:var(--ink-3)}
.field input,.field select,.field textarea{
  font-family:var(--f-body); font-size:13px; padding:8px 10px; border:1px solid var(--line-strong);
  border-radius:var(--r-sm); background:var(--surface); color:var(--ink); width:100%;
}
.field--err input{border-color:var(--crit)}
.field__e{font-size:12px; color:var(--crit); font-weight:500}

.hole{
  display:flex; gap:var(--sp-3); align-items:flex-start; background:var(--warn-bg); color:var(--warn);
  border:1px dashed currentColor; border-radius:var(--r-md); padding:10px 12px; font-size:12px; line-height:1.45;
}
.hole__b{font-weight:600}
.note{
  background:var(--info-bg); color:var(--info); border:1px solid currentColor;
  border-radius:var(--r-md); padding:10px 12px; font-size:12px; line-height:1.45;
}
.rulebox{
  border-left:3px solid var(--accent); background:var(--surface-2); padding:10px 14px;
  border-radius:0 var(--r-md) var(--r-md) 0; font-size:12px; color:var(--ink-2); line-height:1.5;
}
.rulebox code{font-family:var(--f-mono); font-size:11px; color:var(--ink)}

.empty{
  text-align:center; padding:var(--sp-7) var(--sp-4); border:1px dashed var(--line-strong);
  border-radius:var(--r-md); color:var(--ink-2);
}
.empty h3{margin-bottom:6px}

/* ---------- MAPA DE LUGARES ---------- */
.mapwrap{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-4); overflow-x:auto}
.mapsvg{display:block; width:100%; min-width:620px; height:auto}
.seat{cursor:pointer}
.seat--vendido,.seat--bloq{cursor:not-allowed}
.stage{fill:var(--surface-3); stroke:var(--line-strong)}
.stagetx{fill:var(--ink-2); font-family:var(--f-mono); font-size:11px; letter-spacing:.14em}
.zonebg{fill:var(--surface-2); stroke:var(--line); stroke-dasharray:3 3}
.zonetx{fill:var(--ink-3); font-family:var(--f-mono); font-size:10px; letter-spacing:.1em}
.tabletop{fill:var(--surface-3); stroke:var(--line-strong)}
.tabletx{fill:var(--ink-2); font-family:var(--f-mono); font-size:9px}
.rowlab{fill:var(--ink-3); font-family:var(--f-mono); font-size:10px}

.legend{display:flex; flex-wrap:wrap; gap:var(--sp-4); margin-top:var(--sp-4); font-size:12px; color:var(--ink-2)}
.legend__i{display:flex; align-items:center; gap:6px}
.legend__s{width:14px; height:12px; border-radius:2px; border:1px solid; flex:none}

.setorbar{display:flex; flex-direction:column; gap:var(--sp-3)}
.setorrow{
  display:grid; grid-template-columns:1fr auto; gap:var(--sp-2) var(--sp-4); align-items:center;
  padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface);
}
.setorrow__n{font-weight:600; display:flex; align-items:center; gap:8px}
.setorrow__dot{width:9px; height:9px; border-radius:2px; flex:none}
.setorrow__c{font-family:var(--f-mono); font-size:17px; font-weight:600; font-variant-numeric:tabular-nums}
.setorrow__f{grid-column:1/-1; font-size:11px; color:var(--ink-3); font-family:var(--f-mono)}
.bar{grid-column:1/-1; height:5px; border-radius:99px; background:var(--surface-3); overflow:hidden}
.bar__f{height:100%; background:var(--accent-deep); border-radius:99px}

.cart{position:sticky; top:60px; display:flex; flex-direction:column; gap:var(--sp-3)}
.cartline{
  display:grid; grid-template-columns:1fr auto auto; gap:var(--sp-3); align-items:center;
  padding:8px 0; border-bottom:1px solid var(--line); font-size:13px;
}
.cartline:last-of-type{border-bottom:0}
.cartline__x{border:0; background:none; color:var(--ink-3); font-size:15px; line-height:1; padding:2px 4px}
.cartline__x:hover{color:var(--crit)}
.carttot{display:flex; justify-content:space-between; align-items:baseline; padding-top:var(--sp-3); border-top:2px solid var(--ink); font-weight:600}
.carttot__v{font-family:var(--f-mono); font-size:19px; font-variant-numeric:tabular-nums}

.timer{
  display:flex; align-items:center; gap:8px; background:var(--info-bg); color:var(--info);
  border:1px solid currentColor; border-radius:var(--r-md); padding:8px 11px; font-size:12px; font-weight:500;
}
.timer__v{font-family:var(--f-mono); font-weight:600}

/* ---------- EDITOR DE LAYOUT ---------- */
.edtools{display:flex; flex-direction:column; gap:var(--sp-4)}
.edgrp{border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-4); background:var(--surface); display:flex; flex-direction:column; gap:var(--sp-3)}
.edrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(92px,1fr)); gap:var(--sp-3)}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-2);
  padding:5px 11px; border-radius:99px; font-size:12px;
}
.chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent-deep); color:var(--accent-ink); font-weight:600}

/* ---------- PUBLICO ---------- */
.pub{max-width:1080px; margin:0 auto; padding:var(--sp-5) var(--sp-5) var(--sp-7)}
.pubhead{display:flex; flex-wrap:wrap; gap:var(--sp-4); align-items:center; justify-content:space-between; padding-bottom:var(--sp-4); border-bottom:1px solid var(--line); margin-bottom:var(--sp-5)}
.pubhero{display:flex; flex-direction:column; gap:var(--sp-2); margin-bottom:var(--sp-5)}
.pubhero h1{font-size:30px}
.pubmeta{display:flex; flex-wrap:wrap; gap:var(--sp-4); font-size:13px; color:var(--ink-2); font-family:var(--f-mono)}

.steps{display:flex; gap:var(--sp-2); align-items:center; font-size:12px; color:var(--ink-3); flex-wrap:wrap; margin-bottom:var(--sp-5)}
.steps__i{display:flex; align-items:center; gap:6px}
.steps__n{width:19px; height:19px; border-radius:99px; border:1px solid var(--line-strong); display:grid; place-items:center; font-family:var(--f-mono); font-size:10px}
.steps__i--on{color:var(--ink); font-weight:600}
.steps__i--on .steps__n{background:var(--accent); border-color:var(--accent-deep); color:var(--accent-ink)}
.steps__sep{color:var(--line-strong)}

.tickets{display:flex; flex-direction:column; gap:var(--sp-3)}
.ticket{
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); padding:var(--sp-4);
  display:grid; grid-template-columns:1fr auto; gap:var(--sp-2) var(--sp-4); align-items:center;
}
.ticket__stub{
  border:1px dashed var(--line-strong); border-radius:var(--r-md); padding:var(--sp-4);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:var(--sp-4);
}

.waiting{display:flex; flex-direction:column; align-items:center; gap:var(--sp-4); padding:var(--sp-7) var(--sp-4); text-align:center}
.spin{width:34px; height:34px; border-radius:99px; border:3px solid var(--surface-3); border-top-color:var(--accent-deep); animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

.kv{display:grid; grid-template-columns:auto 1fr; gap:var(--sp-2) var(--sp-4); font-size:13px; align-items:baseline}
.kv dt{color:var(--ink-3); font-size:12px}
.kv dd{margin:0; font-weight:500}

.dre{display:flex; flex-direction:column; gap:2px}
.drerow{display:grid; grid-template-columns:1fr auto; gap:var(--sp-4); padding:9px 12px; border-radius:var(--r-sm); font-size:13px}
.drerow--h{font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); padding-bottom:2px}
.drerow--sum{background:var(--surface-2); font-weight:600}
.drerow--tot{background:var(--ink); color:var(--ground); font-weight:600; border-radius:var(--r-md)}
.drerow--neg{color:var(--crit)}
.drerow__n{padding-left:var(--sp-4)}

.togglebar{display:flex; gap:2px; background:var(--surface-2); padding:3px; border-radius:var(--r-md); width:fit-content}
.togglebar button{border:0; background:none; padding:5px 12px; border-radius:var(--r-sm); font-size:12px; color:var(--ink-2)}
.togglebar button[aria-pressed="true"]{background:var(--surface); color:var(--ink); font-weight:600; box-shadow:var(--shadow)}


/* ---------- UTILITARIOS DE ESPACO E FLUXO ----------
   Existem para que NENHUMA tela monte na mao (P-543).
   Sem margem negativa em nenhum deles (P-527, P-544). */
.mb-1{margin-bottom:8px}  .mb-2{margin-bottom:12px} .mb-3{margin-bottom:16px}
.mb-4{margin-bottom:20px} .mb-5{margin-bottom:24px}
.mt-1{margin-top:8px}     .mt-2{margin-top:12px}    .mt-3{margin-top:16px}
.mt-4{margin-top:20px}    .mt-5{margin-top:24px}
.col{display:flex; flex-direction:column}
.gap-2{gap:10px} .gap-3{gap:16px} .gap-4{gap:20px} .gap-5{gap:24px}
.rowc{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.between{display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center}
.wfull{width:100%}
.pad-btn{padding:11px 18px}
.pad-in{padding:12px; font-size:16px}
.prose{color:var(--ink-2); line-height:1.6}
.narrow{max-width:44ch}
.dim{opacity:.6}
.brk{word-break:break-all}
.w-380{max-width:380px; margin-inline:auto}
.w-560{max-width:560px; margin-inline:auto}
.w-600{max-width:600px; margin-inline:auto}
.w-720{max-width:720px; margin-inline:auto}
.topsp{padding-top:52px}
.big{font-size:20px}
.qrbox{width:104px; height:104px; background:var(--ink); border-radius:8px; display:grid; place-items:center; flex:none}
.qrbox span{color:var(--ground); font-size:10px}
.flex1{flex:1 1 180px; min-width:0}
.codebox{background:var(--surface-2); padding:9px; border-radius:6px}
.divtop{padding-top:20px; border-top:1px solid var(--line)}
.notop{border-top:0; padding-top:0}
.chkline{display:flex; gap:10px; align-items:flex-start; font-size:13px; cursor:pointer}
.chkline input{margin-top:3px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.printonly{display:none}
@media print{
  .side,.pagehead__acts,.sidedrawer,.legend{display:none!important}
  .printonly{display:block}
  .app{grid-template-columns:1fr}
  .main{padding:0}
  body{background:#fff; color:#000}
  .card{border:1px solid #999; break-inside:avoid}
  table{font-size:11px}
}

.fs-15{font-size:15px; font-weight:600; margin-top:5px}
.fs-16{font-size:16px}
.fs-20{font-size:20px}
.fs-21{font-size:21px}
.fs-24{font-size:24px; font-weight:600}
.center{text-align:center}
.empty-sm{padding:32px 16px}
.pad-cta{padding:13px; font-size:15px}
.pad-10{padding:10px}
.rowc-lg{display:flex; gap:20px; align-items:center; flex-wrap:wrap}
.warntx{color:var(--warn)}
.mx-auto{margin-inline:auto}
.jc{justify-content:center}
.sidedrawer{display:none}

@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{
    position:fixed; inset:46px auto 0 0; width:250px; z-index:50; transform:translateX(-100%);
    transition:transform .2s ease; overflow-y:auto; box-shadow:var(--shadow);
  }
  .side[data-open="true"]{transform:none}
  .sidedrawer{display:inline-flex; align-items:center; gap:7px}
  .main{padding:var(--sp-4) var(--sp-4) var(--sp-7)}
  .split{grid-template-columns:1fr}
  .cart{position:static}
}
@media (max-width:420px){
  h1{font-size:19px}
  .pubhero h1{font-size:23px}
  .main{padding:var(--sp-4) var(--sp-3) var(--sp-6)}
  .stat__v{font-size:22px}
}