/* ==========================================================
   V.R.Sushi · Mesa em AR · estilos
   cores, fontes e controles iguais aos do site
   ========================================================== */
:root{
  --canvas:#0f0d0c;
  --panel:#181513;
  --panel-2:#211c19;
  --line:rgba(191,154,94,.22);
  --line-strong:rgba(191,154,94,.55);
  --accent:#d23a22;
  --accent-hover:#e5502f;
  --gold:#bf9a5e;
  --gold-soft:#e2c48c;
  --text-secondary:#b8ad9b;
  --text-primary:#f2eadb;
  --on-accent:#fffaf2;
  --glass:rgba(17,14,12,.72);
  --glass-strong:rgba(17,14,12,.9);
  --f-display:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",Georgia,serif;
  --f-body:"Zen Kaku Gothic New",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"DM Mono",ui-monospace,Consolas,monospace;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --st:env(safe-area-inset-top,0px);
  --sb:env(safe-area-inset-bottom,0px);
  --sl:env(safe-area-inset-left,0px);
  --sr:env(safe-area-inset-right,0px);
  --tshadow:0 1px 2px rgba(8,6,5,.95),0 2px 10px rgba(8,6,5,.7);
}
/* "html *" ganha do "* { box-sizing: inherit }" que o XRExtras (8th Wall) injeta na página */
html{box-sizing:border-box}
html *,html *::before,html *::after{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:var(--canvas)}
body{color:var(--text-primary);font:400 16px/1.5 var(--f-body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
input{-webkit-user-select:text;user-select:text}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--f-display);font-weight:700;margin:0;line-height:1.15}
p{margin:0}
a{color:inherit}
svg{display:block}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent-hover);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.kicker{font:400 11.5px/1.4 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}

/* ---------- botões (iguais aos do site) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:999px;border:1px solid transparent;background:var(--accent);color:var(--on-accent);font:700 15px/1.2 var(--f-body);letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:background-color .35s var(--ease-out),transform .35s var(--ease-out),border-color .35s var(--ease-out),opacity .35s var(--ease-out)}
.btn:hover{background:var(--accent-hover)}
.btn:active{transform:scale(.98)}
.btn.ghost{background:var(--glass);border-color:var(--line-strong);color:var(--text-primary);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.btn.ghost:hover{border-color:var(--gold)}
.btn svg{width:18px;height:18px;flex:none}
.btn-sm{min-height:44px;padding:8px 16px;font-size:14px}
.btn[aria-disabled=true]{opacity:.45;pointer-events:none}

/* ---------- palco: câmera e 3D ---------- */
#palco{position:fixed;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 45%,#211b17 0%,#0f0d0c 70%)}
#cam{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;background:#000}
.modo-camera #cam{display:block}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
#cv8{position:absolute;inset:0;width:100%;height:100%;display:none;touch-action:none;background:#000}
.modo-8w #cv8{display:block}
.modo-8w #gl{display:none}

/* ---------- camada da interface (no AR do Android ela fica por cima da câmera) ---------- */
#ui{position:fixed;inset:0;pointer-events:none;z-index:2}
.modo-xr #ui{pointer-events:auto;touch-action:none;background:transparent}
.hud,.sheet,.inicio,.legenda,.status,.toast,.rec,.guia,.confirma{pointer-events:auto}
/* enquanto escaneia e mede: só a câmera, o guia no rodapé e o × de sair no topo (o centro fica livre para a mira) */
.sem-hud #menuBtn,.sem-hud .hud-bottom{display:none}
.sem-hud .status:empty{visibility:hidden}
.sem-hud .toast{bottom:auto;top:calc(var(--st) + 124px)}
#sairTopo{display:none}
.sem-hud #sairTopo{display:grid}
.fab-sair{width:44px;height:44px;font:400 28px/1 var(--f-body)}

/* ---------- guia do AR: escanear e medir (caixa baixa, encostada no rodapé) ---------- */
.guia,.confirma{position:absolute;left:50%;bottom:calc(var(--sb) + 12px);transform:translateX(-50%);width:min(420px,calc(100% - 20px));padding:12px 14px;border-radius:18px;background:var(--glass-strong);border:1px solid var(--line-strong);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 18px 50px -18px rgba(0,0,0,.85);animation:sobe .4s var(--ease-out)}
.guia{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center}
.guia p{grid-column:2;font-size:13.5px;line-height:1.4;color:var(--text-secondary)}
.guia p b{font-weight:700;color:var(--text-primary)}
.guia p > b:first-child{display:block;font:700 15.5px/1.3 var(--f-display);margin-bottom:2px}
.confirma h2{display:block;color:var(--text-primary)}
.guia-ic{grid-row:span 2;position:relative;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center}
.guia-ic i{width:14px;height:22px;border:2px solid var(--gold-soft);border-radius:4px;animation:varre 2.4s var(--ease-io) infinite}
@keyframes varre{0%,100%{transform:translateX(-6px) rotate(-8deg)}50%{transform:translateX(6px) rotate(8deg)}}
.guia-barra{grid-column:2;height:3px;margin-top:6px;border-radius:3px;background:rgba(191,154,94,.22);overflow:hidden}
.guia-barra b{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--gold-soft),var(--accent));transform:scaleX(var(--p,0));transform-origin:left;transition:transform .4s var(--ease-out)}
/* medindo: sem o ícone, o título vira uma linha pequena ("Ponto 1 de 3") */
.guia.medir{grid-template-columns:1fr}
.guia.medir .guia-ic{display:none}
.guia.medir p{grid-column:1}
.guia.medir p > b:first-child{font:500 11px/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:1px}
.guia-acoes{grid-column:1/-1;display:grid;gap:8px;margin-top:8px}
.guia-op{display:flex;align-items:center;justify-content:space-between;gap:8px}
.guia-op .chips{gap:6px;flex-wrap:nowrap}
.guia-op .chip{min-height:34px;padding:6px 12px;font-size:13px}
.guia-acoes .linha{display:flex;gap:8px}
.guia-acoes .linha .btn:not(.desfaz){flex:1}
.guia.medir .guia-barra{grid-column:1}
.btn.desfaz{width:48px;padding:0;flex:none}
.btn.desfaz svg{width:20px;height:20px}
.btn:disabled{opacity:.45;pointer-events:none}
.mchip:disabled{opacity:.35}
.link{justify-self:start;padding:4px 0;border:0;background:none;color:var(--gold-soft);font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;white-space:nowrap}
.confirma h2{margin-top:2px;font-size:24px}
.confirma > p:not(.kicker){margin-top:6px;font-size:13.5px;line-height:1.4;color:var(--text-secondary)}
.confirma .link{margin-top:6px}
.corrige{display:grid;gap:8px;margin-top:6px}
.corrige .dupla{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.corrige .inp{width:100%}
.confirma .linha{display:flex;gap:8px;margin-top:12px}
.confirma .linha .btn:last-child{flex:1}
.hud{position:absolute;left:calc(var(--sl) + 14px);right:calc(var(--sr) + 14px);display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}
.hud > *{pointer-events:auto}
.hud-top{top:calc(var(--st) + 12px)}
.hud-bottom{bottom:calc(var(--sb) + 14px);align-items:flex-end}

.marca{display:flex;align-items:center;gap:10px;text-decoration:none;text-shadow:var(--tshadow)}
.marca svg{width:38px;height:38px;flex:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}
.marca b{display:block;font:700 16px/1.1 var(--f-display);letter-spacing:.02em}
.marca small{display:block;font:400 10.5px/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft)}
/* voltar ao site: na abertura, na mesa em 3D e no modo cartão (escondido com a câmera do AR aberta) */
.volta-site{display:none;gap:8px;margin-right:auto;margin-left:4px;background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);text-decoration:none;white-space:nowrap}
.modo-inicio .volta-site,.modo-preview .volta-site{display:inline-flex}
@media (max-width:480px){.volta-site .vs-txt{display:none}.volta-site{width:44px;min-height:44px;padding:0;justify-content:center;border-radius:50%;font-size:18px}}

.fab{position:relative;display:grid;place-items:center;width:52px;height:52px;padding:0;border-radius:50%;border:1px solid var(--line-strong);background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);cursor:pointer;color:var(--text-primary);box-shadow:0 8px 28px -10px rgba(0,0,0,.7);transition:border-color .3s var(--ease-out),background-color .3s var(--ease-out),transform .3s var(--ease-out)}
.fab:active{transform:scale(.95)}
.fab svg{width:22px;height:22px}
.fab[aria-expanded=true]{border-color:var(--accent);background:rgba(60,20,12,.8)}
.fab-orc{width:auto;height:56px;display:flex;align-items:center;gap:10px;padding:0 18px 0 14px;border-radius:999px;background:var(--accent);border-color:transparent;color:var(--on-accent)}
.fab-orc[aria-expanded=true]{background:#a92b17;border-color:var(--gold)}
.fab-orc svg{width:22px;height:22px}
.fab-orc span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05}
.fab-orc b{font:700 19px/1 var(--f-display)}
.fab-orc small{font:500 10.5px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;opacity:.92}

.acoes{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.acoes .linha{display:flex;flex-wrap:wrap;gap:8px}

.status{position:absolute;top:calc(var(--st) + 76px);left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);padding:8px 14px;border-radius:999px;background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:13.5px;line-height:1.35;text-align:center;transition:opacity .4s var(--ease-out)}
.status:empty{opacity:0;pointer-events:none}
/* selo da âncora: a mesa presa nas bordas da mesa real, ou procurando uma borda */
.trava{position:absolute;top:calc(var(--st) + 72px);left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:12.5px;line-height:1.3;color:var(--text-secondary);pointer-events:none}
.trava::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--gold-soft)}
.trava.presa{color:var(--text-primary)}
.trava.presa::before{background:#8fd19b}
.trava.busca::before{animation:pisca 1.2s infinite}
.trava.perdida{border-color:rgba(226,85,63,.6)}
.trava.perdida::before{background:#e2553f;animation:pisca .8s infinite}
.trava:not([hidden]) + .status{top:calc(var(--st) + 112px)}
.status .ok{color:#8fd19b}

.toast{position:absolute;left:50%;bottom:calc(var(--sb) + 92px);transform:translate(-50%,10px);max-width:calc(100% - 32px);padding:10px 16px;border-radius:14px;background:var(--glass-strong);border:1px solid var(--line-strong);font-size:14px;opacity:0;pointer-events:none;transition:opacity .35s var(--ease-out),transform .35s var(--ease-out)}
.toast.on{opacity:1;transform:translate(-50%,0)}

.rec{position:absolute;top:calc(var(--st) + 76px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:999px;background:rgba(120,16,8,.86);font:500 14px/1 var(--f-mono)}
.rec i{width:10px;height:10px;border-radius:50%;background:#ff5a45;animation:pisca 1s infinite}
.rec button{border:0;border-radius:999px;padding:8px 12px;background:#fffaf2;color:#2a0e08;font:700 13px/1 var(--f-body);cursor:pointer}
@keyframes pisca{50%{opacity:.25}}
.flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:5}
.flash.on{animation:flash .45s ease-out}
@keyframes flash{0%{opacity:.85}100%{opacity:0}}

/* mira: aponte para uma peça e chegue perto para ver a legenda */
.mira{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:1.5px solid rgba(242,234,219,.85);box-shadow:0 0 0 1px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.25);pointer-events:none;transition:transform .3s var(--ease-out),border-color .3s var(--ease-out)}
.mira::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:#f2eadb}
.mira.on{transform:scale(1.35);border-color:var(--gold-soft)}

/* ---------- legenda da peça ---------- */
.legenda{position:absolute;left:50%;bottom:calc(var(--sb) + 88px);width:min(380px,calc(100% - 28px));transform:translateX(-50%);padding:14px 16px 12px;border-radius:18px;background:var(--glass-strong);border:1px solid var(--line-strong);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 18px 50px -18px rgba(0,0,0,.8);animation:sobe .35s var(--ease-out)}
@keyframes sobe{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
.leg-h{display:flex;align-items:center;gap:12px;padding-right:38px}
#legIc{width:52px;height:52px;flex:none}
.leg-h h3{font-size:18px}
.leg-h p{margin-top:2px;font-size:13px;line-height:1.35;color:var(--text-secondary)}
.leg-n{margin-top:10px;font:400 11.5px/1.4 var(--f-mono);letter-spacing:.06em;color:var(--gold-soft);text-transform:uppercase}
.legenda ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:2px}
.legenda li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline;padding:6px 0;border-top:1px dashed var(--line);font-size:14px}
.legenda li b{font-weight:500}
.legenda li span{font:400 12.5px/1.3 var(--f-mono);color:var(--text-secondary);text-align:right}
.legenda li span em{font-style:normal;color:var(--text-primary)}
.leg-obs{margin-top:6px;font:400 10.5px/1.4 var(--f-mono);color:var(--text-secondary);letter-spacing:.04em}
.legenda .x{position:absolute;top:8px;right:8px}

/* ---------- painéis (menu de edição e orçamento) ---------- */
.sheet{position:absolute;right:calc(var(--sr) + 12px);width:min(430px,calc(100% - 24px));display:flex;flex-direction:column;border-radius:20px;background:var(--glass-strong);border:1px solid var(--line-strong);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 24px 70px -20px rgba(0,0,0,.85);overflow:hidden;animation:abre .35s var(--ease-out)}
#menu{top:calc(var(--st) + 74px);max-height:min(calc(100% - var(--st) - var(--sb) - 160px),62vh);transform-origin:top right}
@media (min-height:900px){#menu{max-height:calc(100% - var(--st) - var(--sb) - 160px)}}
#orc{bottom:calc(var(--sb) + 82px);max-height:calc(100% - var(--st) - var(--sb) - 160px);transform-origin:bottom right}
@keyframes abre{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.sheet-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 12px 20px;border-bottom:1px solid var(--line)}
.sheet-h h2{font-size:21px}
.sheet-h .kicker{margin-bottom:2px}
.sheet-b{padding:4px 18px 20px;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.x{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;border:1px solid var(--line-strong);background:transparent;cursor:pointer;font-size:22px;line-height:1}
.x:hover{border-color:var(--gold)}
.bloco{margin-top:26px}
.bloco > h3{font:400 11.5px/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.lbl{display:block;font-size:13.5px;color:var(--text-secondary);margin-bottom:6px}
.inp{width:100%;min-height:44px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:12px;background:#0f0d0c;font-size:16px}
.inp:focus{border-color:var(--gold);outline:none}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.medida-x{font:400 12.5px/1.4 var(--f-mono);color:var(--gold-soft);margin-top:10px}
.medida-x.aviso{color:#ff9d84}
.chave{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px dashed var(--line);font-size:14.5px;cursor:pointer}
.chave small{display:block;font-size:12.5px;color:var(--text-secondary)}
.chave input{appearance:none;-webkit-appearance:none;flex:none;width:46px;height:28px;border-radius:999px;background:rgba(191,154,94,.25);position:relative;cursor:pointer;transition:background-color .3s var(--ease-out)}
.chave input::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#f2eadb;transition:transform .3s var(--ease-out)}
.chave input:checked{background:var(--accent)}
.chave input:checked::after{transform:translateX(18px)}

/* orçamento */
.orc-total{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-top:14px}
.orc-total strong{font:700 48px/1 var(--f-display)}
.orc-total span{font-size:16px;color:var(--text-secondary)}
.orc-total .t-extra{flex-basis:100%;font:500 14.5px/1.4 var(--f-body);color:var(--gold-soft)}
.orc-lista{list-style:none;margin:14px 0 0;padding:0}
.orc-lista li{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;padding:9px 0;border-top:1px dashed var(--line)}
.orc-lista li svg{width:24px;height:24px;grid-row:span 2}
.orc-lista b{font-size:14.5px}
.orc-lista small{font:400 11px/1.4 var(--f-mono);color:var(--text-secondary)}
.orc-mesa{margin-top:10px;font-size:13.5px;color:var(--text-secondary)}
.caps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.caps .cap b{font-size:13px}
.caps .cap small{font-size:9.5px}
.cap{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:0 0 10px;border:1px solid var(--line-strong);border-radius:14px;background:rgba(15,13,12,.6);cursor:pointer;text-align:center;overflow:hidden}
.cap:hover{border-color:var(--gold)}
.cap .th{display:grid;place-items:center;aspect-ratio:1;margin-bottom:6px;background:#0b0908 center/cover no-repeat;color:var(--gold-soft)}
.cap .th svg{width:26px;height:26px}
.cap.ok .th svg{display:none}
.cap.ok::after{content:"✓";position:absolute;top:6px;right:6px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#2f7d43;color:#fff;font-size:13px;font-weight:700}
.cap b{font-size:14px}
.cap small{font:400 10.5px/1.25 var(--f-mono);color:var(--text-secondary)}
.cap.busy .th{animation:pulsa 1.1s ease-in-out infinite}
@keyframes pulsa{50%{opacity:.4}}
.cap-nota{margin-top:10px;font-size:13px;line-height:1.45;color:var(--text-secondary)}
.passos{display:grid;gap:10px;margin-top:18px}
.passos .btn{width:100%}
.b-note{margin-top:14px;font-size:13px;color:var(--text-secondary)}

/* prévia */
.previa{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:calc(var(--st) + 16px) 16px calc(var(--sb) + 16px);background:rgba(10,8,7,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:auto;animation:abre .3s var(--ease-out)}
.previa-in{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(560px,100%);max-height:100%}
.previa-m{min-height:0;display:grid;place-items:center;width:100%}
.previa-m img,.previa-m video{display:block;max-width:100%;max-height:calc(100vh - var(--st) - var(--sb) - 150px);border-radius:14px;border:1px solid var(--line-strong);background:#000}
.previa-a{display:flex;gap:10px}

/* ---------- abertura ---------- */
/* AR do iPhone com cartão: o painel e a câmera para fotografar o cartão */
.painel-ct{width:min(440px,100%);max-height:100%;overflow:auto;display:grid;gap:12px;text-align:left;padding:18px 18px 16px;border-radius:20px;background:var(--panel);border:1px solid var(--line-strong);box-shadow:0 24px 70px -20px rgba(0,0,0,.85)}
#cartaoPainel{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,8,7,.94)}
.painel-ct .sheet-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.painel-ct h2{font-size:22px;margin-top:4px}
.ct-passos{margin:0;padding-left:20px;display:grid;gap:12px}
.ct-passos li{display:grid;gap:6px;font-size:14px;line-height:1.4}
.ct-passos li::marker{color:var(--gold);font:500 13px var(--f-mono)}
.ct-passos span{color:var(--text-secondary);font-size:13px}
.ct-passos .dupla{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ct-passos .inp{width:100%}
.ct-extra{display:grid;gap:6px;padding:12px 14px;border-radius:14px;border:1px dashed var(--line-strong);font-size:14px;line-height:1.4}
.ct-extra b{color:var(--gold-soft);font-weight:500}
.ct-extra span{color:var(--text-secondary);font-size:13px}
.ct-extra[hidden]{display:none}
.ct-foto .link{margin-left:4px}
.ct-volta{display:inline-block;margin-top:8px;padding:4px 0;font-size:14px;color:var(--gold-soft);text-decoration:none}
.ct-volta:hover{text-decoration:underline;text-underline-offset:3px}
.ct-foto{display:flex;align-items:center;gap:10px}
.ct-foto img{width:86px;height:54px;object-fit:cover;border-radius:6px;border:1px solid var(--line-strong)}
.ct-nota{font-size:12.5px;line-height:1.45;color:var(--text-secondary)}
/* modo cartão: em cima, "Cartão e medida" e "Editar mesa"; embaixo, "Abrir no AR do iPhone" e o orçamento */
.ct-topo,.ct-info{display:none}
.modo-cartao .ct-topo{display:inline-flex}
.modo-cartao .marca,.modo-cartao #menuBtn{display:none}
.ct-topo svg{width:16px;height:16px}
.ct-info{position:absolute;top:calc(var(--st) + 66px);left:50%;transform:translateX(-50%);max-width:calc(100% - 28px);padding:6px 12px;border-radius:999px;background:var(--glass);border:1px solid var(--line);font-size:12.5px;line-height:1.35;text-align:center;color:var(--text-secondary);pointer-events:none}
.modo-cartao .ct-info:not(:empty){display:block}
.ct-info b{color:var(--text-primary);font-weight:500}
.ct-info.passa,.ct-limite.passa{color:#f0a08f}
.ct-limite{font-size:12.5px;color:var(--gold-soft)}
/* com o menu de edição aberto no modo cartão: o menu na tela toda e sem botões por cima */
.modo-cartao.menu-aberto .hud,.modo-cartao.menu-aberto .ct-info{display:none}
.modo-cartao.menu-aberto #menu{top:0;right:0;bottom:0;left:0;width:auto;max-height:none;border-radius:0;border:0;padding-top:var(--st);padding-bottom:var(--sb);background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none;animation:none}
.ct-linha{display:flex;gap:8px}
.ct-linha .btn{flex:1;padding-left:12px;padding-right:12px}
.cap-ct{position:absolute;inset:0;z-index:5;background:#000;pointer-events:auto}
.cap-ct video,.cap-previa{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cap-previa{object-fit:contain;background:#000}
.cap-moldura{position:absolute;left:50%;top:44%;width:86vw;max-width:520px;aspect-ratio:85.6/53.98;transform:translate(-50%,-50%);border:2px solid var(--gold-soft);border-radius:12px;box-shadow:0 0 0 100vmax rgba(0,0,0,.45)}
.cap-dica{position:absolute;left:16px;right:16px;top:calc(var(--st) + 24px);text-align:center;font-size:14px;color:var(--text-primary);text-shadow:var(--tshadow)}
.cap-acoes{position:absolute;left:16px;right:16px;bottom:calc(var(--sb) + 20px);display:flex;gap:10px}
.cap-acoes .btn{flex:1}
.inicio{position:absolute;left:50%;bottom:calc(var(--sb) + 18px);transform:translateX(-50%);width:min(460px,calc(100% - 24px));padding:24px 22px 20px;border-radius:24px;background:var(--glass-strong);border:1px solid var(--line-strong);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 30px 80px -24px rgba(0,0,0,.9);animation:sobe .6s var(--ease-out)}
.inicio h1{margin-top:8px;font-size:clamp(26px,7vw,34px)}
.inicio > p{margin-top:10px;font-size:15px;color:var(--text-secondary)}
.ini-acoes{display:grid;gap:10px;margin-top:20px}
.ini-acoes .btn{width:100%}
.ini-nota{margin-top:14px;font-size:12.5px;line-height:1.45;color:var(--text-secondary)}
.ini-nota b{color:var(--text-primary);font-weight:500}
.ini-guia{display:inline-block;margin-top:10px;font-size:14px;color:var(--gold-soft);text-underline-offset:3px}
.modo-inicio .hud-bottom,.modo-inicio .status{visibility:hidden}

@media (min-width:900px){
  .inicio{left:auto;right:calc(var(--sr) + 28px);bottom:auto;top:50%;transform:translateY(-50%);animation:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- controles do simulador (copiados do site, linhas 278-379) ---------- */
.field{margin-top:34px}
.field-label{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--text-secondary)}
.field-label output{font:700 30px/1 var(--f-display);color:var(--text-primary)}
.stepper{display:flex;align-items:center;gap:12px;margin-top:14px}
.stepper button{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);background:transparent;font-size:20px;cursor:pointer;transition:border-color .3s var(--ease-out),background-color .3s var(--ease-out)}
.stepper button:hover{border-color:var(--gold);background:rgba(191,154,94,.1)}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:44px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent) var(--fill,15%),rgba(191,154,94,.28) var(--fill,15%))}
input[type=range]::-moz-range-track{height:3px;border-radius:3px;background:rgba(191,154,94,.28)}
input[type=range]::-moz-range-progress{height:3px;border-radius:3px;background:var(--accent)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9.5px;border-radius:50%;background:var(--text-primary);border:4px solid var(--accent);box-shadow:0 0 0 6px rgba(210,58,34,.18)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--text-primary);border:4px solid var(--accent)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{display:flex;flex-direction:column;justify-content:center;min-height:56px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;cursor:pointer;font-size:15px;transition:border-color .3s var(--ease-out),background-color .3s var(--ease-out)}
.seg label small{font:400 11.5px/1.3 var(--f-mono);color:var(--text-secondary);letter-spacing:.04em;margin-top:3px}
.seg input:checked + label{border-color:var(--accent);background:rgba(210,58,34,.12)}
.seg input:focus-visible + label{outline:2px solid var(--accent-hover);outline-offset:2px}
.b-note{margin-top:28px;font-size:14px;color:var(--text-secondary);max-width:36ch}
.b-stage{position:relative;padding:clamp(24px,3.5vw,48px);display:flex;flex-direction:column;justify-content:center;gap:26px;overflow:hidden}
.b-total{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.b-total strong{font:700 clamp(54px,6vw,88px)/1 var(--f-display)}
.b-total span{font-size:18px;color:var(--text-secondary)}
.seg3{grid-template-columns:1fr}
.seg3 label{flex-direction:row;justify-content:space-between;align-items:baseline;gap:12px;min-height:50px}
.seg3 label small{margin-top:0;text-align:right}
.sugg{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-top:22px;padding:14px 16px;border:1px dashed var(--line-strong);border-radius:12px;font-size:14.5px;color:var(--text-secondary)}
.sugg b{color:var(--text-primary);font:700 18px/1 var(--f-display)}
.sugg button{border:0;background:none;padding:6px 0;cursor:pointer;color:var(--gold-soft);font-size:14px;text-decoration:underline;text-underline-offset:4px}
.sugg button:hover{color:var(--text-primary)}
.b-head{display:flex;flex-wrap:wrap;align-items:center;gap:18px 24px}
.b-head .b-total{flex:1 1 240px}
.st-wrap{flex:1 1 260px;max-width:360px}
.st-wrap[hidden]{display:none}
.only-t .st-wrap{flex-basis:100%;max-width:none}
.only-t .canvas-wrap{display:none}
#stationCanvas{display:block;width:100%;height:auto;aspect-ratio:340/144}
.canvas-wrap{position:relative}
#tableCanvas{display:block;width:100%;height:auto;aspect-ratio:660/300}
.ill{margin-top:-14px;font:400 12px/1.5 var(--f-mono);letter-spacing:.04em;color:var(--text-secondary)}
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:14px}
.tri input{position:absolute;opacity:0;pointer-events:none}
.tri label{display:flex;align-items:center;justify-content:center;text-align:center;min-height:48px;padding:8px 6px;border:1px solid var(--line);border-radius:12px;cursor:pointer;font-size:14px;line-height:1.25;transition:border-color .3s var(--ease-out),background-color .3s var(--ease-out)}
.tri input:checked + label{border-color:var(--accent);background:rgba(210,58,34,.12)}
.tri input:focus-visible + label{outline:2px solid var(--accent-hover);outline-offset:2px}
.tri-note{margin-top:10px;font-size:13.5px;color:var(--text-secondary);min-height:2.6em}
.t-extra{flex-basis:100%;margin-top:4px;font:500 15px/1.4 var(--f-body);color:var(--gold-soft)}
.t-extra[hidden],.cat[hidden],.design[hidden],#pppField[hidden]{display:none}
.cats{display:grid;gap:10px}
.cat{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(15,13,12,.45)}
.cat-h{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.cat-tg{flex:1 1 150px;min-width:0;display:flex;align-items:center;gap:12px;padding:4px 0;border:0;background:none;color:inherit;font:inherit;text-align:left}
button.cat-tg{cursor:pointer;border-radius:10px}
button.cat-tg:focus-visible{outline:2px solid var(--accent-hover);outline-offset:4px}
.cat-tg > svg{flex:none;width:28px;height:28px}
.cat-n{min-width:0}
.cat-n b{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700}
.cat-n small{display:block;margin-top:3px;font:400 11px/1.35 var(--f-mono);color:var(--text-secondary)}
.seta{flex:none;display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--line-strong);border-radius:50%;transition:transform .35s var(--ease-out),border-color .3s var(--ease-out),background-color .3s var(--ease-out)}
.seta::before{content:"";width:6px;height:6px;margin-top:-3px;border-right:1.5px solid var(--gold-soft);border-bottom:1.5px solid var(--gold-soft);transform:rotate(45deg)}
button.cat-tg:hover .seta{border-color:var(--gold);background:rgba(191,154,94,.1)}
.cat-tg[aria-expanded=true] .seta{transform:rotate(180deg);border-color:var(--accent)}
.det{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease-out)}
.cat.open .det{grid-template-rows:1fr}
.det-in{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s .45s}
.cat.open .det-in{visibility:visible;transition-delay:0s}
.cat .qty{display:flex;align-items:center;gap:6px}
.cat-h .qty{flex:0 0 190px;margin-left:auto}
.cat .qty button{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-strong);background:transparent;cursor:pointer;font-size:18px;transition:border-color .3s var(--ease-out),background-color .3s var(--ease-out),opacity .3s var(--ease-out)}
.cat .qty button:hover:not(:disabled){border-color:var(--gold);background:rgba(191,154,94,.1)}
.cat .qty button:disabled{opacity:.3;cursor:default}
.cat .qty input{flex:1;min-width:0;height:40px;padding:0 6px;text-align:center;border:1px solid var(--line-strong);border-radius:10px;background:#0f0d0c;font:700 19px/1 var(--f-display);-moz-appearance:textfield;appearance:textfield}
.cat .qty input::-webkit-inner-spin-button,.cat .qty input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.cat .qty input:focus{border-color:var(--gold);outline:none}
.cat .qty.sm{flex:none;width:132px}
.cat .qty.sm button,.cat .qty.fl button{width:32px;height:32px;font-size:16px}
.cat .qty.sm input{height:34px;font-size:16px}
.cat .qty output{min-width:26px;text-align:center;font:700 17px/1 var(--f-display)}
.subs{display:grid;grid-template-columns:minmax(0,max-content) max-content 1fr;align-items:center;gap:10px 14px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.sub-n{grid-column:1;display:flex;align-items:center;gap:8px;min-width:0;font-size:14px;line-height:1.25}
.subs > .qty{grid-column:2}
.pc-ic{flex:none;width:24px;height:24px}
.fills{grid-column:1/-1;width:0;min-width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:-2px 0 6px}
.sopt-l{font:400 11px/1.3 var(--f-mono);letter-spacing:.04em;color:var(--text-secondary);margin-right:4px}
.sopt-x{font-size:12.5px;line-height:1.4;color:var(--gold-soft)}
.tg{display:inline-flex;align-items:baseline;gap:5px;min-height:34px;padding:6px 13px;border:1px solid var(--line-strong);border-radius:999px;background:transparent;cursor:pointer;font-size:13.5px;transition:border-color .3s var(--ease-out),background-color .3s var(--ease-out)}
.tg small{font:400 10.5px/1 var(--f-mono);color:var(--gold);letter-spacing:.04em}
.tg:hover{border-color:var(--gold)}
.tg[aria-pressed=true]{border-color:var(--accent);background:rgba(210,58,34,.15)}
@media (pointer:coarse){.cat .qty button{width:44px;height:44px}.cat .qty input{height:44px}.cat .qty.sm{width:150px}.cat .qty.sm button,.cat .qty.fl button{width:40px;height:40px}.cat .qty.sm input{height:40px}.tg{min-height:44px}}
.design-panel{margin-top:16px;padding:18px;border:1px solid var(--line);border-radius:16px;background:rgba(15,13,12,.5)}
.design-panel[hidden]{display:none}
#designBtn[aria-expanded=true]{border-color:var(--accent);background:rgba(210,58,34,.12)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:baseline;gap:7px;min-height:40px;padding:9px 14px;border:1px solid var(--line-strong);border-radius:999px;background:transparent;cursor:pointer;font-size:14px;transition:border-color .3s var(--ease-out),background-color .3s var(--ease-out)}
.chip small{font:400 10.5px/1 var(--f-mono);color:var(--gold);letter-spacing:.04em}
.chip:hover{border-color:var(--gold)}
.chip[aria-checked=true]{border-color:var(--accent);background:rgba(210,58,34,.15)}
@media (pointer:coarse){.chip{min-height:44px}}
.write{margin-top:6px}
.write[hidden]{display:none}
.design-hint{margin-top:12px;font-size:13.5px;color:var(--text-secondary);min-height:1.4em}

/* ---------- ajustes dos controles dentro do painel ---------- */
.sheet .field{margin-top:22px}
.sheet .field-label output{font-size:26px}
.sheet .cats{margin-top:6px}
.sheet .cat{background:rgba(15,13,12,.55)}
.sheet .cat-h .qty{flex:0 0 172px}
.sheet .sugg{margin-top:18px}
.sheet .chips{gap:7px}
.sheet .write{margin-top:12px}
.sheet .design-hint{font-size:13px}
@media (max-width:380px){.sheet .cat-h .qty{flex-basis:100%}}
