:root{color-scheme:light}body{margin:0}img{max-width:100%}[hidden]{display:none!important}
/* Layout: envelope de carta aérea. Faixa listrada no topo, painel de embarque com a contagem, cômodos como etiquetas de bagagem, grade de itens com etiqueta de preço pendurada. */
:root{
  --bg:#EAF0F6; --card:#FFFFFF; --ink:#14213D; --muted:#56617A; --line:#CBD5E3;
  --red:#C8323C; --blue:#2547A8; --kraft:#D9B98A; --kraft-ink:#3B2A12;
  --board:#14213D; --board-ink:#F4F6FA; --ok:#1E7A4F;
  --f-display:"Young Serif",Georgia,"Times New Roman",serif;
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --stripe:repeating-linear-gradient(-45deg,var(--red) 0 14px,transparent 14px 22px,var(--blue) 22px 36px,transparent 36px 44px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0D1524; --card:#152036; --ink:#E8EDF5; --muted:#9AA6BC; --line:#26324A;
  --red:#E4555E; --blue:#7090F2; --kraft:#C9A574; --kraft-ink:#2A1C08;
  --board:#060B15; --board-ink:#F4F6FA; --ok:#4CC08A; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0D1524; --card:#152036; --ink:#E8EDF5; --muted:#9AA6BC; --line:#26324A;
  --red:#E4555E; --blue:#7090F2; --kraft:#C9A574; --kraft-ink:#2A1C08;
  --board:#060B15; --board-ink:#F4F6FA; --ok:#4CC08A; color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:16px/1.5 var(--f-body);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.airmail{height:12px;background:var(--stripe)}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* AVISO DE RETIRADA */
.pickup{background:var(--kraft);color:var(--kraft-ink);padding-block:12px}
.pickup .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;text-align:center}
.pickup .stamp{font:600 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;border:1.5px solid currentColor;padding:5px 8px;border-radius:3px;transform:rotate(-2deg)}
.pickup b{font:400 clamp(20px,3vw,26px)/1.15 var(--f-display)}
.pickup span:last-child{font-size:15px;font-weight:500}

/* HERO */
.hero{padding-block:36px 8px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px;align-items:end}
.eyebrow{font:600 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.eyebrow .stamp{border:1.5px solid currentColor;padding:5px 8px;border-radius:3px;transform:rotate(-2deg)}
h1{font:400 clamp(48px,9vw,108px)/.9 var(--f-display);margin:14px 0 18px;letter-spacing:-.02em;text-wrap:balance}
h1 em{font-style:normal;color:var(--blue)}
.lede{font-size:18px;max-width:34em;color:var(--muted);margin:0}
.lede strong{color:var(--ink)}

/* BOARD */
.board{background:var(--board);color:var(--board-ink);border-radius:10px;padding:18px 18px 16px;position:relative;overflow:hidden}
.board-head{display:flex;justify-content:space-between;gap:8px;font:600 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;opacity:.75;margin-bottom:14px}
.flaps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.flap{text-align:center}
.flap b{display:block;font:600 clamp(30px,5vw,44px)/1 var(--f-mono);font-variant-numeric:tabular-nums;background:linear-gradient(#1F2D4D 50%,#18243F 50%);border-radius:6px;padding:12px 0 10px;position:relative}
.flap b::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#060B15}
.flap span{display:block;font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;margin-top:8px;opacity:.7}
.board-foot{display:flex;justify-content:space-between;gap:12px;margin-top:16px;font:500 13px/1.3 var(--f-mono);flex-wrap:wrap}
.board-foot .gate{color:#FFC94D}
.progress{height:6px;border-radius:3px;background:#24345A;margin-top:12px;overflow:hidden}
.progress i{display:block;height:100%;background:linear-gradient(90deg,#FFC94D,#FF8A3D);width:0;transition:width 1s ease}

/* STEPS */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-block:28px 8px;padding:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-top:1.5px dashed var(--line);font-size:15px;color:var(--muted);min-width:0}
.steps li::before{content:counter(s);font:400 30px/1 var(--f-display);color:var(--red);min-width:22px}
.steps li b{color:var(--ink);display:block;font-weight:600}

/* NAV */
.toolbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);padding-block:14px 12px;border-bottom:1px solid var(--line)}
.rooms{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.rooms::-webkit-scrollbar{display:none}
.room{flex:none;display:flex;align-items:center;gap:8px;border:1.5px solid var(--ink);background:transparent;border-radius:6px 999px 999px 6px;padding:8px 16px 8px 12px;cursor:pointer;font-weight:600;font-size:15px;position:relative}
.room::before{content:"";width:7px;height:7px;border-radius:50%;border:1.5px solid currentColor}
.room small{font:500 12px var(--f-mono);opacity:.65}
.room[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.filters{display:flex;gap:14px;align-items:center;justify-content:space-between;margin-top:12px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.filters label{display:flex;align-items:center;gap:8px;cursor:pointer}
.filters input{accent-color:var(--blue);width:18px;height:18px}
.filters select{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:6px;padding:6px 8px}
.count{font:500 13px var(--f-mono)}

/* GRID */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:28px 20px;padding-block:24px 40px}
.sep{grid-column:1/-1;text-align:center;padding:40px 16px 12px;margin-top:12px;position:relative}
.sep::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--stripe);border-radius:2px}
.sep .stamp{display:inline-block;font:600 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red);border:1.5px solid currentColor;padding:5px 8px;border-radius:3px;transform:rotate(-2deg)}
.sep h2{font:400 clamp(32px,5vw,52px)/1 var(--f-display);margin:14px 0 8px;text-wrap:balance}
.sep p{margin:0 auto;max-width:46ch;color:var(--muted)}
.empty{grid-column:1/-1;text-align:center;padding:60px 16px;color:var(--muted)}
.empty h3{font:400 30px/1.1 var(--f-display);color:var(--ink);margin:0 0 8px}
.card{display:flex;flex-direction:column;min-width:0;animation:rise .5s ease both;animation-delay:calc(var(--i,0) * 35ms)}
@keyframes rise{from{transform:translateY(10px);opacity:.01}to{transform:none;opacity:1}}
.photo{position:relative;aspect-ratio:4/5;max-width:100%;border-radius:8px;overflow:hidden;background:var(--line);cursor:zoom-in;border:0;padding:0;display:block;width:100%}
.photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease,filter .3s}
.card:hover .photo img{transform:scale(1.04)}
.photo.contain{background:#0B1120}
.photo.contain::before{content:"";position:absolute;inset:-24px;background:var(--bgimg) center/cover no-repeat;filter:blur(20px) brightness(.75);transform:scale(1.1)}
.photo.contain img{position:relative;object-fit:contain}
.card:hover .photo.contain img{transform:scale(1.02)}
.nphotos{position:absolute;right:8px;top:8px;font:600 11px var(--f-mono);background:rgba(10,16,30,.62);color:#fff;padding:4px 7px;border-radius:4px}
.tag{position:absolute;left:-2px;bottom:14px;background:var(--kraft);color:var(--kraft-ink);font:600 17px/1 var(--f-mono);font-variant-numeric:tabular-nums;padding:9px 12px 9px 24px;clip-path:polygon(12px 0,100% 0,100% 100%,12px 100%,0 50%);transform:rotate(-3deg);transform-origin:left center;box-shadow:0 2px 0 rgba(0,0,0,.08)}
.tag::before{content:"";position:absolute;left:10px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--bg)}
.tape{position:absolute;left:-20%;right:-20%;top:42%;transform:rotate(-14deg);padding:9px 0;color:#fff;font:600 15px/1 var(--f-mono);letter-spacing:.2em;white-space:nowrap;overflow:hidden;text-align:center;box-shadow:0 3px 10px rgba(0,0,0,.25);opacity:.95}
.late{position:absolute;left:8px;top:8px;background:var(--card);color:var(--blue);border:1.5px solid var(--blue);font:600 10.5px/1.15 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:5px 7px;border-radius:3px;transform:rotate(-2deg);text-align:left;max-width:calc(100% - 70px)}
.late-note{margin-top:6px;font-size:13px;color:var(--blue);font-weight:600}
.tape.vendido{background:var(--red)}
.tape.reservado{background:var(--blue)}
.card[data-status="vendido"] .photo img{filter:grayscale(.85) brightness(.9)}
.card[data-status="vendido"] .tag{text-decoration:line-through;opacity:.8}
.card h3{font:600 17px/1.25 var(--f-body);margin:12px 0 4px;text-wrap:balance}
.card p{margin:0;color:var(--muted);font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.want{margin-top:12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:10px 16px;background:var(--ink);color:var(--bg);font-weight:600;font-size:15px;text-decoration:none;cursor:pointer;align-self:flex-start;transition:transform .15s}
.want:hover{transform:translateY(-2px)}
.want svg{width:18px;height:18px}
.want.off{background:transparent;color:var(--muted);border:1.5px dashed var(--line);cursor:default;transform:none}

/* ADMIN in card */
.adm{margin-top:12px;display:none;flex-direction:column;gap:8px;padding:10px;border:1.5px dashed var(--blue);border-radius:8px}
body.admin .adm{display:flex}
body.admin .want{display:none}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.seg button{border:1px solid var(--line);background:var(--card);border-radius:5px;padding:7px 2px;font-size:12px;font-weight:600;cursor:pointer}
.seg button[aria-pressed="true"][data-v="disponivel"]{background:var(--ok);color:#fff;border-color:var(--ok)}
.seg button[aria-pressed="true"][data-v="reservado"]{background:var(--blue);color:#fff;border-color:var(--blue)}
.seg button[aria-pressed="true"][data-v="vendido"]{background:var(--red);color:#fff;border-color:var(--red)}
.adm label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.adm .chk input{width:18px;height:18px;flex:none;accent-color:var(--blue)}
.adm input{width:100%;min-width:0;font:600 15px var(--f-mono);color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:5px;padding:6px 8px}
.card.changed .adm{border-style:solid;background:color-mix(in srgb,var(--blue) 8%,transparent)}

/* ADMIN bar */
.fab{display:flex;gap:8px;align-items:center;flex-wrap:wrap;width:100%;justify-content:flex-end}
.fab.floating{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:20;width:auto;max-width:calc(100vw - 32px)}
.fab button{border:0;border-radius:999px;padding:12px 18px;font-weight:700;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.2)}
.fab .toggle{background:var(--card);color:var(--ink);border:1.5px solid var(--ink)}
.fab:not(.floating) .toggle{box-shadow:none;background:transparent;border:1px dashed var(--line);color:var(--muted);font-weight:600;padding:8px 14px}
.fab .save{background:var(--red);color:#fff}
.login{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;justify-content:flex-end;width:100%}
.login label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);min-width:0;flex:1 1 180px;max-width:260px}
.login input{font:500 15px var(--f-body);color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:6px;padding:9px 10px;min-width:0}
.login .err{width:100%;text-align:right;color:var(--red);font-size:13px;font-weight:600}
.fab .save:disabled{opacity:.5;cursor:default}
.config{display:none;margin-block:16px 0;padding:16px;border:1.5px dashed var(--blue);border-radius:10px;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
body.admin .config{display:grid}
.config h4{grid-column:1/-1;margin:0;font:400 22px var(--f-display)}
.config label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);min-width:0}
.config input{font:500 15px var(--f-body);color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:6px;padding:9px 10px;min-width:0}

/* DIALOG */
dialog{border:0;padding:0;border-radius:14px;max-width:min(980px,calc(100vw - 24px));width:100%;background:var(--card);color:var(--ink);max-height:calc(100dvh - 24px)}
dialog::backdrop{background:rgba(8,12,24,.7);backdrop-filter:blur(3px)}
.dlg{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.gal{position:relative;background:#0B1120;min-width:0}
.slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;height:min(72dvh,640px)}
.slides::-webkit-scrollbar{display:none}
.slides img{flex:none;width:100%;height:100%;object-fit:contain;scroll-snap-align:center}
.dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:6px}
.dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.4);cursor:pointer}
.dots button[aria-current="true"]{background:#fff}
.nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.85);color:#14213D;font-size:20px;cursor:pointer}
.nav.prev{left:10px}.nav.next{right:10px}
.info{padding:28px 24px;display:flex;flex-direction:column;gap:12px;min-width:0;overflow:auto}
.info .eyebrow{color:var(--muted)}
.info h2{font:400 34px/1.05 var(--f-display);margin:0;text-wrap:balance}
.info .price{font:600 30px var(--f-mono);font-variant-numeric:tabular-nums}
.info .price s{opacity:.5}
.info p{margin:0;color:var(--muted);font-size:16px}
.pill{align-self:flex-start;font:600 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;padding:7px 10px;border-radius:4px;color:#fff}
.pill.disponivel{background:var(--ok)}.pill.reservado{background:var(--blue)}.pill.vendido{background:var(--red)}
.close{position:absolute;top:10px;right:10px;z-index:2;width:40px;height:40px;border-radius:50%;border:0;background:var(--card);color:var(--ink);font-size:22px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.fine{font-size:13px;color:var(--muted);border-top:1px dashed var(--line);padding-top:12px;margin-top:auto}

footer{padding-block:36px 90px;color:var(--muted);font-size:14px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer b{font:400 24px var(--f-display);color:var(--ink);display:block}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:8px;font-weight:600;z-index:30;max-width:calc(100vw - 32px)}

@media (max-width:820px){
  .hero{grid-template-columns:minmax(0,1fr);gap:22px;padding-top:24px}
  .steps{grid-template-columns:minmax(0,1fr);gap:0}
  .dlg{grid-template-columns:minmax(0,1fr)}
  .slides{height:52dvh}
  .info{padding:20px 18px 24px}
}
@media (max-width:520px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
  .card h3{font-size:15px}
  .card p{display:none}
  .tag{font-size:14px;padding:7px 9px 7px 20px}
  .want{padding:9px 12px;font-size:14px;width:100%}
  .tape{font-size:12px;padding:7px 0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ÁREA DA DONA: janelas de login e de edição */
#lg,#ed{max-width:min(560px,calc(100vw - 24px));overflow:auto}
.panel{display:flex;flex-direction:column;gap:12px;padding:22px}
.panel h3{font:400 28px/1.1 var(--f-display);margin:0}
.panel label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);min-width:0}
.panel input,.panel textarea,.panel select{font:500 16px var(--f-body);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:9px 10px;min-width:0;width:100%}
.panel-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.panel .err{margin:0;color:var(--red);font-size:14px;font-weight:600}
.panel-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:4px}
.panel button,.file-btn{border-radius:999px;padding:10px 16px;font-weight:700;font-size:15px;cursor:pointer}
.panel .primary{border:0;background:var(--red);color:#fff}
.panel .ghost,.panel .file-btn{border:1.5px solid var(--ink);background:transparent;color:var(--ink)}
.panel .danger{border:1.5px solid var(--red);background:transparent;color:var(--red);margin-right:auto}
.panel .file-btn{display:inline-flex;flex-direction:row;align-self:flex-start;font-size:15px;color:var(--ink)}
.file-btn input{position:absolute;width:1px;height:1px;opacity:0;padding:0;border:0}
.ed-label{font-size:13px;color:var(--muted)}
.ed-label small{font-size:12px;opacity:.8}
.ed-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.ed-photo{display:flex;flex-direction:column;gap:4px;min-width:0}
.ed-photo img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;background:var(--line)}
.panel .ed-photo button{border:1px solid var(--line);background:transparent;color:var(--ink);padding:5px 6px;font-size:12px;font-weight:600;border-radius:5px}
.ed-cover{font:600 11px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;text-align:center;padding:7px 6px;border-radius:5px;background:var(--kraft);color:var(--kraft-ink)}
.adm .edit-btn{border:1.5px solid var(--ink);background:transparent;color:var(--ink);border-radius:5px;padding:7px 8px;font-size:13px;font-weight:600;cursor:pointer}
@media (max-width:640px){
  .fab.floating{left:0;right:0;bottom:0;width:100%;max-width:none;justify-content:center;gap:6px;background:var(--card);border-top:1px solid var(--line);padding:8px max(8px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px))}
  .fab.floating button{padding:9px 12px;font-size:14px;box-shadow:none}
  .panel{padding:18px}
  .fab .wide{display:none}
  body.admin footer{padding-bottom:80px}
  body.admin .toast{bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}