/* Estilos do MyBinder — extraídos do index.html na v119.
Os dois blocos originais entraram NA MESMA ORDEM em que estavam:
a cascata do CSS depende da ordem, não da posição no documento. */
:root{
--ink:#13151C;--panel:#1C1F29;--sheet:#232733;
--pocket-bg:rgba(255,255,255,.028);--pocket-line:rgba(255,255,255,.09);
--text:#ECEEF2;--muted:#878D9E;--line:rgba(255,255,255,.09);
--accent:#6E7BFF;--accent-2:#35E0C8;--holo:linear-gradient(120deg,#35E0C8,#6E7BFF 42%,#FF6BC1 82%);
--display:'Space Grotesk',system-ui,sans-serif;--body:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--body);color:var(--text);
background:radial-gradient(1200px 700px at 78% -8%,#262b3a 0%,transparent 55%),radial-gradient(900px 600px at 8% 108%,#1b2130 0%,transparent 60%),var(--ink);
min-height:100%;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;align-items:center}
.wrap{width:100%;max-width:1140px;padding:24px 20px 64px;flex:1}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:6px;cursor:pointer;width:fit-content}
.brand-logo{height:30px;width:auto;display:block}
.lib-logo{height:46px;width:auto;display:block;cursor:pointer}
@media(max-width:520px){.lib-logo{height:38px}}
.brand:hover h1{opacity:.85}
.brand .dot{width:22px;height:22px;border-radius:6px;background:var(--holo);box-shadow:0 0 18px rgba(110,123,255,.5)}
.brand h1{font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:.2px;margin:0}
.brand span{color:var(--muted);font-size:12.5px;margin-left:2px}
/* LOGIN */
.login{max-width:380px;margin:8vh auto 0;text-align:center}
.login .bigdot{width:52px;height:52px;border-radius:15px;background:var(--holo);box-shadow:0 0 34px rgba(110,123,255,.5);margin:0 auto 22px}
.login h2{font-family:var(--display);font-weight:700;font-size:27px;margin:0 0 8px;letter-spacing:-.4px}
.login p{color:var(--muted);font-size:14px;line-height:1.55;margin:0 auto;max-width:30ch}
.login .btns{display:flex;flex-direction:column;gap:10px;margin-top:26px}
.login .btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:13px;border-radius:12px;font-family:var(--display);font-weight:600;font-size:14.5px;cursor:pointer;border:1px solid var(--line);transition:.15s}
.login .btn svg{width:17px;height:17px}
.login .btn.google{background:#fff;color:#1a1a1f;border-color:#fff}
.login .btn.google:hover{filter:brightness(.94)}
.login .btn.ghost{background:transparent;color:var(--text)}
.login .btn.ghost:hover{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.03)}
.login .mock{font-size:11px;color:var(--muted);margin-top:18px}
.login .lform{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.login .lform .nameinput{width:100%}
.login .lerr{font-size:12px;color:#ffb4b4;min-height:15px;text-align:center;line-height:1.35}
.login #authSwitch{font-size:12.5px;color:var(--muted);text-align:center;margin-top:4px}
.login #authSwitch button{background:none;border:0;color:var(--accent);cursor:pointer;font-family:var(--body);font-size:12.5px;padding:0}
.login .btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.login .btn.primary:hover{filter:brightness(1.07)}
.login .btn:disabled{opacity:.6;cursor:default}
/* LIBRARY */
.library{max-width:1000px;margin:16px auto 0}
/* A barra fica GRUDADA no topo e ACIMA dos painéis em tela cheia (122),
senão entrar no Cofre ou no PreGrade era um beco sem saída: a barra
sumia e não havia como ir para outra tela. Fica abaixo do toast (9000),
que precisa aparecer sobre tudo. */
.libhead{display:flex;justify-content:space-between;align-items:center;gap:16px;
margin-bottom:26px;flex-wrap:wrap;
position:sticky;top:0;z-index:8000;
padding:10px 0 12px;background:var(--ink);
box-shadow:0 10px 18px -12px rgba(0,0,0,.9);
transition:transform .26s cubic-bezier(.3,.8,.3,1)}
/* Rolando para BAIXO a barra sai do caminho; rolando para CIMA ela volta.
Só sumir seria voltar ao beco sem saída do v89: a pessoa teria que rolar
até o topo para achar o menu de novo. Perto do topo ela fica sempre. */
.libhead.recolhida{transform:translateY(-115%)}
@media(prefers-reduced-motion:reduce){.libhead{transition:none}}
/* Câmera e Scan são imersivos de propósito: ali a barra atrapalharia o
enquadramento, e as duas telas já têm o próprio botão de sair. */
/* `!important` é necessário: o app escreve `style.display` DIRETO no
#apphead (linha do `isContent`), e estilo inline vence regra de classe.
Sem isso a barra continuava aparecendo na câmera. */
body.imersivo .libhead{display:none !important}
.libhead h2{font-family:var(--display);font-weight:700;font-size:26px;margin:0;letter-spacing:-.4px}
.acct{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:5px 6px 5px 12px}
.acct .av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#6E7BFF,#35E0C8);display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:700;font-size:12px;border:0;cursor:pointer;overflow:hidden;padding:0}
.acct .av.has-img{background:none}
.acct .av img{width:100%;height:100%;object-fit:cover;display:block}
.pf-avatar-row{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.mbadges{display:inline-flex;gap:9px;flex-wrap:wrap;align-items:center;vertical-align:middle}
.mbadge{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;cursor:help;color:inherit}
.mbadge svg{width:100%;height:100%;display:block}
.mbadge.sm{width:20px;height:20px;gap:6px}
.mbadge.locked{opacity:.24}
.plan-row{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.plan-pill{font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:.5px;padding:4px 11px;border-radius:20px}
.plan-pill.free{background:rgba(255,255,255,.08);color:var(--muted);border:1px solid var(--line)}
.plan-pill.pro{background:linear-gradient(135deg,#6E7BFF,#35E0C8);color:#fff}
#mbTip{position:fixed;z-index:200;max-width:252px;background:linear-gradient(180deg,#20232f,#181b24);border:1px solid var(--line);border-radius:12px;padding:11px 13px;box-shadow:0 18px 44px -14px #000;display:none;pointer-events:none;font-size:12.5px;line-height:1.45}
.mbtip-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}
.mbtip-h b{font-family:var(--display);font-size:13.5px}
.mbtip-st{font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:20px;white-space:nowrap}
.mbtip-st.on{background:rgba(74,222,128,.16);color:#4ade80}
.mbtip-st.off{background:rgba(255,255,255,.08);color:var(--muted)}
.mbtip-w{color:var(--text);opacity:.85;margin-bottom:6px}
.mbtip-how{color:var(--muted)}
.mbtip-how b{color:var(--text)}
.panel-x{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--text);font-size:14px;cursor:pointer;z-index:5;display:flex;align-items:center;justify-content:center;line-height:1}
.panel-x:hover{background:rgba(255,255,255,.12)}
.trade-store{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:linear-gradient(155deg,rgba(110,123,255,.1),rgba(74,222,128,.05));border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:18px}
.ts-title{font-family:var(--display);font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px}
.ts-sub{font-size:12px;color:var(--muted);margin-top:4px}
.ts-link{font-size:12px;color:var(--accent);margin-top:4px;word-break:break-all}
.ts-dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none}
.ts-dot.on{background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.2)}
.ts-acts{display:flex;gap:8px;flex-wrap:wrap}
.pdex-count{font-family:var(--display);font-weight:700;font-size:14px;color:var(--muted);margin:2px 0 16px}
.pdex-count b{color:var(--accent)}
.pdex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px}
.pdex-cell{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 6px 9px;text-align:center;cursor:pointer;transition:.15s}
.pdex-cell:hover{border-color:var(--accent);transform:translateY(-2px)}
.pdex-img{position:relative;aspect-ratio:1;border-radius:9px;overflow:hidden;background:radial-gradient(circle at 50% 40%,#2b2f3d,#1a1d27)}
.pdex-img img{width:100%;height:100%;object-fit:contain;display:block;filter:grayscale(1) opacity(.32);transition:.2s}
.pdex-cell.owned .pdex-img img{filter:none}
.pdex-check{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:#22c55e;color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.pdex-num{font-size:10px;color:var(--muted);margin-top:6px;font-family:var(--display);font-weight:700}
.pdex-nm{font-size:12px;font-weight:600;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdex-cell:not(.owned) .pdex-nm{color:var(--muted)}
.pdex-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.pdex-head img{width:76px;height:76px;object-fit:contain;flex:none;background:radial-gradient(circle at 50% 40%,#2b2f3d,#1a1d27);border-radius:12px}
.pdex-d-nm{font-family:var(--display);font-weight:700;font-size:20px}
.pdex-d-num{font-size:12.5px;color:var(--muted);margin-top:2px}
.liga-link{display:inline-block;margin-top:9px;font-size:12px;font-family:var(--display);font-weight:700;color:var(--accent);text-decoration:none;background:rgba(110,123,255,.12);border:1px solid var(--line);padding:5px 11px;border-radius:9px}
.liga-link:hover{border-color:var(--accent)}
#lightboxBar{position:absolute;left:0;right:0;bottom:26px;display:none;gap:10px;justify-content:center;flex-wrap:wrap;padding:0 16px}
.lb-btn{background:var(--accent);color:#fff;font-family:var(--display);font-weight:700;font-size:13px;padding:11px 17px;border-radius:11px;border:0;cursor:pointer;text-decoration:none;box-shadow:0 8px 22px -6px rgba(0,0,0,.7)}
.lb-btn.alt{background:rgba(30,33,44,.92);border:1px solid rgba(255,255,255,.16)}
.lb-btn:hover{filter:brightness(1.08)}
#card3dStage{display:none;align-items:center;justify-content:center;width:100%;height:100%}
.c3d-wrap{perspective:1500px;width:min(80vw,430px);aspect-ratio:.716;position:relative}
.c3d{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .1s ease-out;cursor:pointer;will-change:transform}
.c3d-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:5.2% / 3.7%;overflow:hidden;box-shadow:0 34px 80px -22px rgba(0,0,0,.85)}
.c3d-front img{width:100%;height:100%;object-fit:contain;display:block;background:#0b0d12}
.c3d-holo{position:absolute;inset:0;pointer-events:none;opacity:.32;mix-blend-mode:overlay;transition:opacity .2s;background:
radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.85),transparent 42%),
linear-gradient(105deg,transparent 28%,rgba(120,220,255,.55) 44%,rgba(255,170,255,.45) 56%,transparent 72%)}
#pdexPanel{left:50%;right:auto;top:50%;width:min(1180px,calc(100vw - 40px));max-width:none;transform:translate(-50%,-50%) scale(.98)}
#pdexPanel.on{transform:translate(-50%,-50%) scale(1)}
#pdexDetail{max-height:86vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
#pdexDetail::-webkit-scrollbar{width:8px}
#pdexDetail::-webkit-scrollbar-track{background:transparent}
#pdexDetail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:20px;border:2px solid transparent;background-clip:padding-box}
#pdexDetail::-webkit-scrollbar-thumb:hover{background:rgba(110,123,255,.5);background-clip:padding-box}
@media(max-width:640px){#pdexPanel{width:calc(100vw - 20px)}#pdexDetail{max-height:88vh}}
.pdex-sale{position:absolute;bottom:5px;left:5px;background:var(--accent);color:#fff;font-family:var(--display);font-weight:700;font-size:9.5px;padding:2px 6px;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.45);white-space:nowrap;z-index:4}
.pdex-allc .wish-img{position:relative}
.pdex-allc:not(.owned) .wish-img img{opacity:.9}
@media(max-width:520px){.pdex-grid{grid-template-columns:repeat(3,1fr);gap:9px}}
.store-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
@media(max-width:1100px){.store-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){.store-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.store-grid{grid-template-columns:repeat(2,1fr);gap:12px}}
.hide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:8px;max-height:230px;overflow-y:auto;padding:2px}
.hide-card{cursor:pointer}
.hide-img{position:relative;aspect-ratio:.72;border-radius:7px;overflow:hidden;background:#2a2e3a}
.hide-img img{width:100%;height:100%;object-fit:cover;display:block;transition:.15s}
.hide-eye{position:absolute;top:3px;right:3px;font-size:11px;background:rgba(0,0,0,.55);border-radius:5px;padding:1px 3px;line-height:1}
.hide-card.off .hide-img img{filter:grayscale(1) brightness(.4)}
.hide-card.off .hide-img::after{content:"oculta";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:10px;color:#fff;letter-spacing:.5px}
.pf-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#6E7BFF,#35E0C8);display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:700;font-size:26px;overflow:hidden;flex:none}
.pf-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.acct button{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:12.5px;font-family:var(--body);padding:4px 8px;border-radius:14px}
.acct button:hover{color:var(--text);background:rgba(255,255,255,.05)}
/* ===== cartão do fichário =====
Em repouso a capa está fechada e limpa. No hover, três cartas escorregam
um pedaço pra fora, como quem levanta a capa de um fichário de verdade. */
.bwrap{position:relative;padding-top:22px}
.bwrap .bcover{z-index:1}
.bpeek{position:absolute;top:0;left:0;right:0;height:22px;z-index:0;pointer-events:none}
.bpeek i{position:absolute;bottom:0;width:33%;aspect-ratio:.716;border-radius:5px 5px 0 0;
overflow:hidden;background:#15161a;box-shadow:0 -3px 12px -5px #000;
transform:translateY(100%) rotate(var(--r,0deg));transform-origin:bottom center;
transition:transform .26s cubic-bezier(.2,.9,.25,1);transition-delay:var(--d,0s)}
.bpeek i img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.bcard:hover .bpeek i{transform:translateY(calc(100% - var(--out,20px))) rotate(var(--r,0deg))}
.bbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(0,0,0,.45)}
.bbar i{display:block;height:100%;width:0;background:var(--accent);transition:width .45s}
.bbar.full i{background:var(--accent-2)}
/* ===== fileira única, rolando na horizontal =====
Antes a grade quebrava em duas linhas e a segunda ficava perdida no meio
do vazio. Uma fileira só mantém a home com uma altura previsível. */
#bgrid{display:flex!important;gap:20px;overflow-x:auto;overflow-y:visible;
scroll-snap-type:x proximity;padding:2px 2px 10px;scroll-behavior:smooth;
scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
#bgrid::-webkit-scrollbar{height:6px}
#bgrid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:3px}
#bgrid::-webkit-scrollbar-track{background:transparent}
#bgrid>.bcard{flex:0 0 172px;scroll-snap-align:start}
#bgrid>.bcard.arrastando{opacity:.35}
#bgrid>.bcard.alvo{box-shadow:-3px 0 0 var(--accent)}
.browwrap{position:relative}
.browwrap.temmais::after{content:"";position:absolute;top:0;right:0;bottom:12px;width:56px;
background:linear-gradient(to left,var(--ink),transparent);pointer-events:none}
.browhint{font-size:12px;color:var(--muted);margin:2px 0 9px}
@media(max-width:520px){#bgrid>.bcard{flex:0 0 132px}#bgrid{gap:14px}}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:24px}
.bcard{cursor:pointer}
.bcover{position:relative;aspect-ratio:.76;border-radius:14px;overflow:hidden;box-shadow:0 24px 48px -22px #000,0 4px 12px -6px #000;transition:transform .18s,box-shadow .18s}
.bcard:hover .bcover{transform:translateY(-5px);box-shadow:0 34px 60px -22px #000,0 6px 14px -6px #000}
.bcover.newc{border:1.5px dashed var(--line);display:grid;place-items:center;color:var(--muted);font-size:38px;font-weight:200;background:rgba(255,255,255,.015);box-shadow:none}
.bcard:hover .bcover.newc{color:var(--text);border-color:rgba(255,255,255,.28);transform:translateY(-5px);box-shadow:none}
.bcap{margin-top:11px}
.bcap .bn{display:block;font-family:var(--display);font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bcap .bm{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.libempty{text-align:center;padding:8vh 20px}
.libempty .ic{width:64px;height:64px;border-radius:18px;border:1.5px dashed var(--line);display:grid;place-items:center;margin:0 auto 18px;color:var(--muted);font-size:30px;font-weight:200}
.libempty h3{font-family:var(--display);font-weight:600;font-size:19px;margin:0 0 6px}
.libempty p{color:var(--muted);font-size:14px;margin:0 auto 22px;max-width:34ch;line-height:1.5}
.binderart{position:absolute;inset:0;width:100%;height:100%;display:block}
/* SETUP (criação) */
.setup{max-width:900px;margin:34px auto 0;display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center}
.setup h2{font-family:var(--display);font-weight:700;font-size:32px;line-height:1.05;margin:0 0 12px;letter-spacing:-.5px}
.setup h2 em{font-style:normal;background:var(--holo);-webkit-background-clip:text;background-clip:text;color:transparent}
.setup p.lead{color:var(--muted);font-size:14.5px;line-height:1.55;margin:0 0 24px;max-width:40ch}
.field{margin-bottom:20px}
.field .lab{font-size:11.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:10px;font-weight:600}
.nameinput{width:100%;background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:11px;color:var(--text);font-family:var(--body);font-size:14.5px;padding:12px 14px;outline:none;transition:.15s}
.nameinput:focus{border-color:var(--accent)}
.layouts{display:flex;gap:12px}
.lay{flex:1;border:1px solid var(--line);background:rgba(255,255,255,.02);border-radius:12px;padding:14px 12px;cursor:pointer;text-align:center;transition:.18s;font-family:var(--display);font-weight:600;font-size:13px}
.lay .mini{display:grid;gap:3px;width:fit-content;margin:0 auto 9px}
.lay .mini i{width:9px;height:12px;border-radius:2px;background:var(--pocket-line);display:block}
.lay:hover{border-color:rgba(255,255,255,.22)}
.lay.on{border-color:var(--accent);background:rgba(110,123,255,.10);box-shadow:0 0 0 1px var(--accent) inset}
.lay.on .mini i{background:var(--accent)}
.stepper{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.stepper button{width:44px;height:44px;background:transparent;border:0;color:var(--text);font-size:20px;cursor:pointer;font-family:var(--display)}
.stepper button:hover{background:rgba(255,255,255,.05)}
.stepper .val{min-width:56px;text-align:center;font-family:var(--display);font-weight:600;font-size:17px}
.stepper .val small{display:block;font-family:var(--body);font-weight:400;font-size:10px;color:var(--muted);letter-spacing:.05em}
.setup .actions{display:flex;align-items:center;gap:14px;margin-top:6px}
.cta{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:#fff;border:0;font-family:var(--display);font-weight:600;font-size:15px;padding:14px 22px;border-radius:12px;cursor:pointer;box-shadow:0 8px 26px -10px rgba(110,123,255,.8);transition:.18s}
.cta:hover{transform:translateY(-1px);box-shadow:0 12px 30px -10px rgba(110,123,255,.9)}
.cta svg{width:16px;height:16px}
.lnk{background:transparent;border:0;color:var(--muted);cursor:pointer;font-family:var(--display);font-weight:600;font-size:13.5px}
.lnk:hover{color:var(--text)}
.preview{position:relative;aspect-ratio:.74;border-radius:18px;background:linear-gradient(160deg,#242835,#191c26);border:1px solid var(--line);box-shadow:0 30px 60px -30px #000,inset 0 1px 0 rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;padding:26px}
.preview::before{content:"";position:absolute;left:12px;top:16%;bottom:16%;width:8px;border-radius:6px;background:repeating-linear-gradient(#0d0f15,#0d0f15 8px,transparent 8px,transparent 20px)}
.pv-grid{display:grid;gap:8px;width:100%}
.pv-grid .pk{aspect-ratio:.72;border-radius:6px;background:var(--pocket-bg);border:1px solid var(--pocket-line);position:relative;overflow:hidden}
.pv-grid .pk::after{content:"";position:absolute;inset:0;background:linear-gradient(150deg,rgba(255,255,255,.10),transparent 42%)}
/* BINDER */
.bhead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:8px 0 20px;flex-wrap:wrap}
.btitle{font-family:var(--display);font-weight:600;font-size:19px;display:flex;align-items:center;gap:10px}
.btitle .back{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;font-size:16px;display:grid;place-items:center}
.btitle .back:hover{background:rgba(255,255,255,.05)}
.bright{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stats{display:flex;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);border:1px solid var(--line);padding:6px 11px;border-radius:20px;font-weight:500}
.chip b{color:var(--text);font-family:var(--display)}
.chip .sw{width:8px;height:8px;border-radius:50%}
.cfgwrap{position:relative}
.cfg{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);border:1px solid var(--line);background:transparent;padding:7px 11px;border-radius:20px;font-weight:500;cursor:pointer;font-family:var(--body);transition:.15s}
.cfg:hover{border-color:rgba(255,255,255,.25);color:var(--text)}
.cfg svg{width:13px;height:13px;opacity:.8}
.cfgpop{position:absolute;right:0;top:calc(100% + 8px);width:250px;background:linear-gradient(180deg,#20232f,#191c25);border:1px solid var(--line);border-radius:14px;box-shadow:0 30px 70px -30px #000;padding:15px;z-index:30;opacity:0;transform:translateY(-6px);pointer-events:none;transition:.16s}
.cfgpop.on{opacity:1;transform:none;pointer-events:auto}
.cfgpop .lab{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:0 0 8px;font-weight:600}
.cfgpop .nameinput{padding:9px 11px;font-size:13.5px;margin-bottom:14px}
.covswatches{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.covswatches button{width:26px;height:26px;border-radius:7px;border:2px solid transparent;background:var(--c);cursor:pointer;padding:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.covswatches button.on{border-color:var(--accent);box-shadow:0 0 0 2px rgba(110,123,255,.3)}
.visopts{display:flex;gap:6px;margin-bottom:14px}
.visopts button{flex:1;border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--muted);font-family:var(--display);font-weight:600;font-size:11.5px;padding:8px 4px;border-radius:9px;cursor:pointer;transition:.14s}
.visopts button.on{border-color:var(--accent);background:rgba(110,123,255,.12);color:#fff}
.binder.readonly.friendview #back{display:inline-flex}
.binder.readonly.friendview #roCta{display:none}
.friend-code{background:rgba(110,123,255,.08);border:1px solid rgba(110,123,255,.25);border-radius:14px;padding:14px 16px;margin-bottom:16px;max-width:520px}
.fc-lab{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600;margin-bottom:8px}
.fc-row{display:flex;align-items:center;gap:12px}
.fc-code{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.14em}
.fc-hint{font-size:11.5px;color:var(--muted);margin-top:8px}
.friend-add{display:flex;gap:8px;max-width:520px;margin-bottom:8px}
.friend-add .nameinput{flex:1}
.friend-add .cta{padding:0 18px;white-space:nowrap}
#friendResults,#friendList{max-width:520px}
.friend-row{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px}
.friend-av{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:14px;flex:none}
.friend-nm{flex:1;font-family:var(--display);font-weight:600;font-size:13.5px;min-width:0}
.friend-code2{font-family:var(--body);font-weight:400;font-size:11px;color:var(--muted);letter-spacing:.06em}
.friend-del{background:transparent;border:0;color:var(--muted);font-size:11.5px;cursor:pointer}
.friend-del:hover{color:#ff7a90}
.friend-add-btn{padding:7px 14px;font-size:12.5px}
.friend-pending{font-size:11.5px;color:var(--muted);font-family:var(--display);font-weight:600}
#notifList{max-width:560px}
.notif-item{display:flex;gap:14px;align-items:center;background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:10px}
.notif-thumb{width:44px;height:61px;border-radius:6px;overflow:hidden;background:#2a2e3a;flex:none;box-shadow:0 3px 8px -3px rgba(0,0,0,.7)}
.notif-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.notif-body{flex:1;min-width:0}
.notif-line{font-size:13.5px;line-height:1.4}
.notif-line b{font-family:var(--display)}
.notif-sub{font-size:12px;color:var(--muted);margin-top:3px}
.notif-sub b{color:#4ade80}
.cfg-del{width:100%;margin-top:12px;border:1px solid rgba(255,122,144,.3);background:transparent;color:#ff7a90;font-family:var(--display);font-weight:600;font-size:12.5px;padding:9px;border-radius:9px;cursor:pointer;transition:.14s}
.cfg-del:hover{background:rgba(255,122,144,.08)}
.mycontact{background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:18px;max-width:560px}
.mycontact .friend-add{margin-bottom:6px}
.prop-contact{margin-top:8px;font-size:12.5px;background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.28);border-radius:9px;padding:9px 11px;line-height:1.45}
.prop-contact b{font-family:var(--display)}
.prop-contact.muted{background:rgba(255,255,255,.03);border-color:var(--line);color:var(--muted)}
.pbtn{border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);font-family:var(--display);font-weight:600;font-size:12.5px;padding:8px 14px;border-radius:9px;cursor:pointer;transition:.14s}
.pbtn:hover{background:rgba(255,255,255,.07)}
.pbtn-go{border-color:rgba(74,222,128,.4);color:#4ade80;background:rgba(74,222,128,.08)}
.pbtn-go:hover{background:rgba(74,222,128,.16)}
.prop-status.s-trading{color:#ffb454}
.prop-item2{background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:10px}
.trade-cards{display:flex;align-items:center;gap:10px;margin:10px 0}
.tc{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;min-width:0}
.tc-lab{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.tc-img{width:64px;height:89px;border-radius:7px;overflow:hidden;background:#2a2e3a;box-shadow:0 4px 10px -4px rgba(0,0,0,.6)}
.tc-img img{width:100%;height:100%;object-fit:cover;display:block}
.tc-nm{font-size:11px;text-align:center;line-height:1.25;color:var(--text)}
.tc-arrow{font-size:20px;color:var(--accent);flex:none}
.card-meta{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:center}
.mini-cond{font-family:var(--display);font-weight:700;font-size:9.5px;color:var(--accent);background:rgba(110,123,255,.14);padding:1px 5px;border-radius:4px}
.mini-flag{width:15px;height:11px;object-fit:cover;border-radius:2px;display:inline-block;vertical-align:middle}
.mini-photo{font-size:9.5px;color:#4ade80}
.pl-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pl-info span{font-size:11.5px;line-height:1.2}
.tc-cell{display:flex;flex-direction:column;align-items:center;gap:3px}
.tc-img.has-photo{cursor:pointer;box-shadow:0 0 0 1.5px rgba(74,222,128,.6)}
.tc-stack{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.tc .tc-img{width:46px;height:64px;border-radius:6px}
.prop-cols{display:flex;align-items:flex-start;gap:10px}
.prop-col{flex:1;display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:12px;padding:12px 10px;background:rgba(255,255,255,.02)}
.prop-mid{font-size:22px;color:var(--accent);align-self:center;flex:none}
.prop-list{display:flex;flex-direction:column;gap:6px;min-height:40px}
.pl-card{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:8px;padding:5px 7px;position:relative}
.pl-card.pl-warn{border-color:rgba(255,180,84,.5)}
.pl-img{width:30px;height:42px;border-radius:4px;overflow:hidden;background:#2a2e3a;flex:none}
.pl-img img{width:100%;height:100%;object-fit:cover;display:block}
.pl-card span{font-size:11.5px;line-height:1.2;flex:1;min-width:0}
.pl-rm{background:none;border:0;color:var(--muted);cursor:pointer;font-size:13px;padding:2px}
.pl-empty{color:var(--muted);font-size:11.5px;text-align:center;padding:10px 0}
.prop-warn{margin-top:12px;font-size:12px;line-height:1.45;background:rgba(255,180,84,.1);border:1px solid rgba(255,180,84,.3);color:#ffb454;border-radius:9px;padding:9px 11px}
.prop-warn+.prop-warn{margin-top:8px}
#pickHint{font-size:12px;color:var(--muted)}
.pk-badge{position:absolute;top:3px;left:3px;font-size:8.5px;font-weight:700;padding:2px 5px;border-radius:20px;color:#fff}
.pk-badge.want{background:var(--accent)}
.pk-badge.trade{background:#4ade80;color:#0b0d12}
.pick-img{position:relative}
.prop-slots{display:flex;align-items:center;gap:10px}
.pslot{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;padding:14px 10px;background:rgba(255,255,255,.02)}
.pslot-lab{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.pslot-arrow{font-size:22px;color:var(--accent);flex:none}
.pslot-card{min-height:90px;display:flex;align-items:center;justify-content:center}
.mini-card{display:flex;flex-direction:column;align-items:center;gap:5px}
.mini-img{width:62px;height:86px;border-radius:7px;overflow:hidden;background:#2a2e3a}
.mini-img img{width:100%;height:100%;object-fit:cover;display:block}
.mini-card span{font-size:11px;text-align:center;line-height:1.2;max-width:80px}
.mini-empty{color:var(--muted);font-size:12px}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px;padding:4px 18px 18px;max-height:64vh;overflow-y:auto}
.pick-item{background:none;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;gap:5px;align-items:center}
.pick-img{width:100%;aspect-ratio:.72;border-radius:7px;overflow:hidden;background:#2a2e3a;transition:.15s}
.pick-item:hover .pick-img{outline:2px solid var(--accent);outline-offset:2px}
.pick-img img{width:100%;height:100%;object-fit:cover;display:block}
.pick-item span{font-size:10.5px;text-align:center;line-height:1.2;color:var(--text)}
.bcover.tradec{background:linear-gradient(155deg,#1c3a2a,#12261b);display:flex;align-items:center;justify-content:center}
.bcover.tradec span{font-size:52px}
.bcover.searchc{background:linear-gradient(155deg,#2a2440,#171528);display:flex;align-items:center;justify-content:center}
.bcover.searchc span{font-size:48px}
.bcover.dashc{background:linear-gradient(155deg,#123438,#0c2124);display:flex;align-items:center;justify-content:center}
.bcover.dashc span{font-size:48px}
.bcover.marketc{background:linear-gradient(155deg,#3a2a12,#241a0c);display:flex;align-items:center;justify-content:center}
.bcover.marketc span{font-size:48px}
.mkt-sort{background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--text);border-radius:20px;padding:6px 12px;font-size:12.5px;font-family:var(--display);cursor:pointer}
.mkt-photo{position:absolute;bottom:5px;right:5px;font-size:11px;background:rgba(15,16,20,.85);padding:1px 5px;border-radius:20px;z-index:3}
.listview{display:none;padding:0 4px}
.binder.listmode .stage,.binder.listmode .pagenav,.binder.listmode .bprog{display:none!important}
.binder.listmode .listview{display:block}
.lv-count{color:var(--muted);font-size:12.5px;font-family:var(--display);margin:6px 0 14px}
.lv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:14px;padding-bottom:40px}
/* no app as cartas soltas ficam GRANDES: é o motivo de existir essa
visão — ver a arte, não contar itens */
body.tem-tabbar .lv-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--e4)}
.lv-card{cursor:pointer;transition:.14s}
.lv-card:hover{transform:translateY(-2px)}
.lv-img{aspect-ratio:.72;border-radius:8px;overflow:hidden;background:#2a2e3a;position:relative;box-shadow:0 5px 14px -6px rgba(0,0,0,.6)}
.lv-img img{width:100%;height:100%;object-fit:cover;display:block}
.lv-pg{position:absolute;top:4px;left:4px;background:rgba(15,16,20,.82);color:#fff;font-size:9px;padding:1px 5px;border-radius:20px;z-index:2}
.lv-nm{font-size:11px;margin-top:5px;line-height:1.2}
.lv-card.lv-want .lv-img img{filter:grayscale(1) brightness(.62) contrast(.9);opacity:.62}
.lv-card.lv-tmpl .lv-img img{filter:grayscale(.25);opacity:.28}
.lv-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 14px;flex-wrap:wrap}
.lv-selbtn{font-size:12px;padding:6px 12px}
.lv-card.lv-sel .lv-img{box-shadow:0 0 0 2.5px var(--accent);outline:none}
.lv-check{position:absolute;top:5px;right:5px;width:20px;height:20px;border-radius:50%;background:rgba(15,16,20,.7);border:1.5px solid #fff;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;z-index:3}
.lv-card.lv-sel .lv-check{background:var(--accent);border-color:var(--accent)}
.bulkbar{position:fixed;left:50%;bottom:18px;transform:translate(-50%,140%);display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:center;max-width:94vw;background:rgba(20,22,28,.97);border:1px solid var(--line);border-radius:16px;padding:9px 12px;box-shadow:0 16px 40px -10px rgba(0,0,0,.7);z-index:90;transition:transform .25s;backdrop-filter:blur(8px)}
.bulkbar.on{transform:translate(-50%,0)}
.bb-n{font-size:12.5px;color:var(--muted);padding:0 4px}
.bb-n b{color:var(--text)}
.bb-act,.bb-chip,.bb-back{border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);font-family:var(--display);font-weight:600;font-size:12.5px;padding:7px 11px;border-radius:9px;cursor:pointer;transition:.14s;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.bb-act:hover,.bb-chip:hover{border-color:var(--accent);background:rgba(110,123,255,.12)}
.bb-del{color:#ff6b6b}
.bb-back{background:none;color:var(--muted)}
.bb-flag{padding:6px 8px}
.bb-flag img{width:22px;height:16px;object-fit:cover;border-radius:2px;display:block}
.dash-hero{background:linear-gradient(155deg,rgba(110,123,255,.12),rgba(74,222,128,.06));border:1px solid var(--line);border-radius:16px;padding:26px 22px;margin-bottom:22px;text-align:center}
.dash-total{font-family:var(--display);font-weight:700;font-size:38px;letter-spacing:-.5px}
.dash-sub{font-size:12.5px;color:var(--muted);margin-top:8px}
.dash-change{font-family:var(--display);font-weight:700;font-size:14px;margin-top:10px}
.dash-change.up{color:#4ade80}
.dash-change.down{color:#ff6b6b}
.val-chart{width:100%;height:auto;margin-top:16px;display:block}
.st-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:linear-gradient(155deg,rgba(110,123,255,.12),rgba(255,180,84,.06));border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin-bottom:22px}
.st-av{width:60px;height:60px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:26px;flex:none;overflow:hidden}
.st-av img{width:100%;height:100%;object-fit:cover;display:block}
.st-bio{font-size:12.5px;color:var(--text);opacity:.85;margin-top:8px;line-height:1.45;max-width:520px}
.st-contacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.st-cbtn,.sd-contact{display:inline-flex;align-items:center;gap:6px;justify-content:center;text-decoration:none;font-family:var(--display);font-weight:700;font-size:13px;padding:9px 15px;border-radius:10px;background:var(--accent);color:#fff;cursor:pointer;border:0}
.st-cbtn{background:rgba(110,123,255,.16);color:var(--text);border:1px solid var(--line)}
.st-cbtn:hover{border-color:var(--accent)}
.sd-contact{width:100%;box-sizing:border-box;margin-top:8px}
.sd-contact:first-of-type{margin-top:2px}
.st-info{flex:1;min-width:180px}
.st-info h1{font-family:var(--display);font-weight:700;font-size:22px;margin:0 0 6px}
.st-rep{font-size:13px;color:#ffd76a;font-weight:700}
.st-meta2{font-size:12px;color:var(--muted);margin-top:3px}
.st-contact{margin-top:8px;font-size:13px;background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.25);color:#4ade80;border-radius:9px;padding:6px 11px;display:inline-block}
.sd-main{position:relative;width:100%;max-width:260px;margin:0 auto 12px;aspect-ratio:.72;border-radius:12px;overflow:hidden;background:#2a2e3a}
.sd-price{position:absolute;bottom:12px;right:10px;background:#fff;color:#0b0d12;font-family:var(--display);font-weight:800;font-size:22px;line-height:1;letter-spacing:-.5px;padding:8px 13px;border-radius:7px;box-shadow:0 6px 16px -3px rgba(0,0,0,.6),inset 0 0 0 2px rgba(0,0,0,.06);transform:rotate(-4deg);z-index:3;white-space:nowrap}
.sd-main img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.sd-thumbs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:14px}
.sd-thumb{width:46px;height:64px;border-radius:6px;overflow:hidden;background:#2a2e3a;cursor:pointer;opacity:.6;border:2px solid transparent}
.sd-thumb.on{opacity:1;border-color:var(--accent)}
.sd-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sd-nm{font-family:var(--display);font-weight:700;font-size:17px;text-align:center}
.sd-sub{text-align:center;margin:6px 0 16px;display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}
.sd-contact{display:block;width:100%;text-align:center;text-decoration:none;box-sizing:border-box}
.dash-row{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:10px;margin-bottom:8px;font-size:13.5px}
.dash-row b{font-family:var(--display)}
.rep{font-size:11.5px;color:#ffd76a;font-weight:600;white-space:nowrap}
.rep .rep-n{color:var(--muted);font-weight:400}
.star-row{display:flex;gap:6px;justify-content:center;margin:6px 0 14px}
.star{background:none;border:0;font-size:34px;line-height:1;color:var(--line);cursor:pointer;transition:.1s;padding:0}
.star:hover,.star.on{color:#ffd76a}
.cs-filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}
.cs-f{border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--muted);font-family:var(--display);font-weight:600;font-size:12.5px;padding:7px 13px;border-radius:20px;cursor:pointer;transition:.14s}
.cs-f:hover{color:var(--text)}
.cs-f.on{background:rgba(110,123,255,.14);color:#fff;border-color:var(--accent)}
.det-fortrade{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;background:rgba(74,222,128,.06);border:1px solid rgba(74,222,128,.2);border-radius:11px;padding:11px 13px}
.ft-toggle{display:flex;align-items:center;gap:9px;font-size:13.5px;font-family:var(--display);font-weight:600;cursor:pointer}
.ft-toggle input{width:17px;height:17px;accent-color:#4ade80;cursor:pointer}
.ft-hint{font-size:16px}
.det-fortrade{display:block}
.ft-price{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.ft-price>span{font-size:13px;color:var(--muted);font-family:var(--display)}
.ft-price-in{display:flex;align-items:center;gap:4px;font-family:var(--display);font-weight:600}
.ft-price-in input{width:90px;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:8px;color:var(--text);padding:7px 9px;font-size:14px;font-family:var(--display)}
.pricetag{position:absolute;top:6px;left:-3px;background:#fff;color:#0b0d12;font-family:var(--display);font-weight:800;font-size:10px;line-height:1;letter-spacing:-.3px;padding:3px 7px;z-index:4;box-shadow:0 3px 8px -2px rgba(0,0,0,.55);transform:rotate(-4deg);pointer-events:none;white-space:nowrap;border-radius:4px}
.det-cond{margin-bottom:16px}
.cond-lab{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600;margin-bottom:8px}
.cond-row{display:flex;gap:6px;flex-wrap:wrap}
.cond-chip{position:relative;border:0;background:none;color:var(--muted);font-family:var(--display);font-weight:700;font-size:13px;padding:5px 9px;border-radius:7px;cursor:pointer;transition:.14s}
.cond-chip:hover{color:var(--text);background:rgba(255,255,255,.05)}
.cond-chip.on{color:var(--accent);background:rgba(110,123,255,.14)}
.cond-chip[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:max-content;max-width:180px;white-space:normal;text-align:center;background:#0b0d12;border:1px solid var(--line);color:var(--text);font-family:var(--body);font-weight:400;font-size:11px;line-height:1.35;padding:7px 10px;border-radius:8px;z-index:30;pointer-events:none;box-shadow:0 8px 20px -6px rgba(0,0,0,.75)}
.cond-desc{font-size:11.5px;color:var(--muted);margin-top:9px;min-height:14px}
.cond-flag-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.flag-row{display:flex;gap:6px;flex-wrap:wrap}
.flag-chip{position:relative;border:0;background:none;padding:3px;border-radius:5px;cursor:pointer;transition:.14s;line-height:0;opacity:.4}
.flag-chip img{width:28px;height:20px;object-fit:cover;display:block;border-radius:3px}
.flag-chip:hover{opacity:.8}
.flag-chip.on{opacity:1;transform:scale(1.06)}
.flag-chip[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:max-content;background:#0b0d12;border:1px solid var(--line);color:var(--text);font-family:var(--body);font-size:11px;line-height:1.3;padding:6px 9px;border-radius:8px;z-index:30;pointer-events:none;box-shadow:0 8px 20px -6px rgba(0,0,0,.75)}
.det-photos{margin-bottom:16px}
.photo-grid{display:flex;gap:8px;flex-wrap:wrap}
.photo-item{position:relative;width:64px;height:88px;border-radius:8px;overflow:hidden;background:#2a2e3a}
.photo-item img{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}
.photo-rm{position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;border:0;background:rgba(0,0,0,.75);color:#fff;font-size:11px;cursor:pointer;padding:0;line-height:1}
.photo-add{width:64px;height:88px;border:1.5px dashed var(--line);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;color:var(--muted);font-size:22px;transition:.14s}
.photo-add:hover{border-color:var(--accent);color:var(--accent)}
.photo-add span{font-size:9.5px}
.photo-add input{display:none}
#lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:120;display:none;align-items:center;justify-content:center;padding:20px;cursor:zoom-out}
#lightbox.on{display:flex}
#lightbox img{max-width:100%;max-height:100%;border-radius:10px;box-shadow:0 20px 60px -10px rgba(0,0,0,.8)}
.importta{width:100%;min-height:150px;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:11px;font-size:13px;font-family:var(--body);resize:vertical;line-height:1.6;box-sizing:border-box}
.imp-opt{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin-top:10px;cursor:pointer}
.imp-opt input{width:15px;height:15px;accent-color:var(--accent);flex:none}
.imp-status{font-size:12.5px;margin-top:10px;line-height:1.5;min-height:16px}
.imp-divider{height:1px;background:var(--line);margin:16px 0}
.chatpanel{display:flex;flex-direction:column;max-height:84vh;padding:0}
.chat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:16px 18px 12px;border-bottom:1px solid var(--line)}
.chat-head h3{font-family:var(--display);font-weight:600;font-size:15px}
.chat-head p{font-size:12px;color:var(--muted);margin-top:2px}
.chat-msgs{flex:1;overflow-y:auto;padding:14px 18px;display:flex;flex-direction:column;gap:8px;min-height:220px;max-height:54vh}
.chat-msg{max-width:80%;padding:9px 12px;border-radius:14px;font-size:13.5px;line-height:1.4;word-break:break-word}
.chat-msg.me{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:5px}
.chat-msg.them{align-self:flex-start;background:rgba(255,255,255,.05);border:1px solid var(--line);border-bottom-left-radius:5px}
.chat-time{font-size:9.5px;opacity:.6;margin-top:4px;display:block;text-align:right}
.chat-input{display:flex;gap:8px;padding:12px 18px 18px;border-top:1px solid var(--line)}
.chat-input .nameinput{flex:1}
.chat-input .cta{padding:0 18px}
.qtybadge{position:absolute;bottom:5px;right:5px;background:rgba(15,16,20,.92);border:1px solid var(--line);color:#fff;font-family:var(--display);font-weight:700;font-size:10.5px;padding:2px 6px;border-radius:20px;z-index:3;pointer-events:none}
.det-qty{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.qty-lab{font-size:13px;color:var(--muted);font-family:var(--display)}
.qty-step{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.qty-step button{width:36px;height:36px;background:transparent;border:0;color:var(--text);font-size:18px;cursor:pointer}
.qty-step button:hover{background:rgba(255,255,255,.05)}
.qty-val{min-width:36px;text-align:center;font-family:var(--display);font-weight:700;font-size:15px}
.cfgpop .opts{display:flex;gap:8px;margin-bottom:15px}
.cfgpop .opt{flex:1;border:1px solid var(--line);background:rgba(255,255,255,.02);border-radius:9px;padding:10px 8px;cursor:pointer;font-family:var(--display);font-weight:600;font-size:12.5px;text-align:center;transition:.15s;color:var(--muted)}
.cfgpop .opt:hover{border-color:rgba(255,255,255,.22)}
.cfgpop .opt.on{border-color:var(--accent);background:rgba(110,123,255,.10);color:#fff}
.cfgpop .row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cfgpop .mini2{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.cfgpop .mini2 button{width:34px;height:34px;background:transparent;border:0;color:var(--text);font-size:16px;cursor:pointer;font-family:var(--display)}
.cfgpop .mini2 button:hover:not(:disabled){background:rgba(255,255,255,.06)}
.cfgpop .mini2 button:disabled{opacity:.3;cursor:default}
.cfgpop .mini2 .v{min-width:34px;text-align:center;font-family:var(--display);font-weight:600;font-size:14px}
.cfgpop .warn{margin-top:12px;font-size:10.5px;color:var(--muted);line-height:1.45}
.stage{position:relative;perspective:2200px}
.sheet-wrap{position:relative;perspective:2200px;display:flex;justify-content:center;width:100%}
.binder:not(.opened):not(.opening) #sheetWrap{opacity:0;visibility:hidden}
.binder:not(.opened) .bright,.binder:not(.opened) .pagenav{display:none}
.cover-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:3;pointer-events:none}
.binder.opened .cover-layer{display:none}
.cover{pointer-events:auto;position:relative;width:min(400px,82vw);aspect-ratio:.76;border-radius:20px;cursor:pointer;transform-style:preserve-3d;transform-origin:left center;transition:transform .2s;overflow:hidden;box-shadow:0 55px 110px -34px #000,0 8px 22px -10px #000}
.cover:hover{transform:rotateY(-4deg)}
.cover:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cover .ohint{position:absolute;right:20px;bottom:15px;z-index:2;display:flex;align-items:center;gap:6px;color:#6c6d73;font-family:var(--display);font-weight:600;font-size:12px;transition:.15s}
.cover:hover .ohint{color:#c2c3c9;gap:9px}
.cover .ohint svg{width:14px;height:14px}
.binder.opening .cover{animation:coverOpen .72s ease forwards}
.binder.opening #sheetWrap{visibility:visible;animation:pagesIn .72s ease forwards}
@keyframes coverOpen{from{transform:rotateY(0);opacity:1}to{transform:rotateY(-158deg);opacity:0}}
@keyframes pagesIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.binder.opening .cover{animation:none;opacity:0}.binder.opening #sheetWrap{animation:none;opacity:1}}
.book{display:flex;justify-content:center;align-items:stretch;width:100%;max-width:1080px}
.leaf{position:relative;flex:1 1 0;min-width:0;padding:26px;background:linear-gradient(158deg,var(--sheet),#1b1e28);border:1px solid var(--line);box-shadow:0 40px 80px -40px #000,inset 0 1px 0 rgba(255,255,255,.045)}
.book.spread .leaf.l{border-radius:18px 0 0 18px;border-right:0}
.book.spread .leaf.r{border-radius:0 18px 18px 0;border-left:0}
.spine{flex:0 0 42px;position:relative;background:linear-gradient(#141824,#0d0f16);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:inset 0 0 22px rgba(0,0,0,.65)}
.spine i{position:absolute;left:50%;transform:translateX(-50%);width:17px;height:17px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#3c414f,#0b0d12);box-shadow:0 1px 2px rgba(0,0,0,.85),inset 0 1px 1px rgba(255,255,255,.18)}
.spine i:nth-child(1){top:18%}.spine i:nth-child(2){top:40%}.spine i:nth-child(3){top:62%}.spine i:nth-child(4){top:84%}
.book.single .leaf.l,.book.single .spine{display:none}
.book.single .leaf.r{border-radius:18px;padding-left:40px;max-width:520px;margin:0 auto}
.book.single .leaf.r::before{content:"";position:absolute;left:14px;top:8%;bottom:8%;width:9px;border-radius:6px;background:repeating-linear-gradient(#0c0e13,#0c0e13 10px,#181b24 10px,#181b24 26px)}
.grid{display:grid;gap:14px}
.grid.turning{animation:turn .42s ease}
@keyframes turn{from{opacity:.15;transform:rotateY(-6deg) translateX(-10px)}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.grid.turning{animation:none}}
.leaf.blank .grid{visibility:hidden}
.leaf.blank::after{content:"";position:absolute;inset:26px;border:1px dashed var(--line);border-radius:8px;opacity:.4}
.pocket{aspect-ratio:.72;border-radius:10px;background:var(--pocket-bg);border:1px solid var(--pocket-line);position:relative;cursor:pointer;overflow:hidden;transition:.16s}
.pocket .sheen{position:absolute;inset:0;pointer-events:none;z-index:3;background:linear-gradient(148deg,rgba(255,255,255,.11),transparent 40%),linear-gradient(320deg,rgba(255,255,255,.05),transparent 30%)}
.pocket:hover{border-color:rgba(255,255,255,.28)}
.criando{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
background:linear-gradient(160deg,rgba(53,224,200,.10),rgba(110,123,255,.10));
border-radius:7px;animation:pulsa 2.2s ease-in-out infinite}
.criando .cr-spin{width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.16);border-top-color:var(--accent-2);animation:sp .8s linear infinite}
.criando .cr-tx{font-size:10.5px;color:var(--muted);font-family:var(--display);letter-spacing:.3px;text-align:center;padding:0 6px}
.criando .cr-bar{width:62%;height:3px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.criando .cr-bar i{display:block;height:100%;background:var(--accent-2);border-radius:99px;transition:width .4s ease}
@keyframes pulsa{0%,100%{opacity:.75}50%{opacity:1}}
.pocket.criando-ativo{outline:1px dashed rgba(53,224,200,.4);outline-offset:2px}
.pocket .plus{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:26px;opacity:0;transition:.16s;font-weight:300;z-index:2}
.pocket .slotart{position:absolute;inset:0;background-repeat:no-repeat;filter:blur(1.5px) brightness(.66) saturate(1.15);transform:scale(1.06);z-index:0}
.pocket .slotart.gerada{filter:none;transform:none}
.pocket.empty:has(.slotart){border-color:rgba(255,255,255,.18)}
.artfill-row{display:flex;align-items:flex-start;gap:9px;margin:14px 0 4px;font-size:12.5px;color:var(--text);cursor:pointer;line-height:1.35}
.artfill-row input{margin-top:1px;accent-color:var(--accent);width:15px;height:15px;flex:0 0 auto;cursor:pointer}
.alert-box .alert-row{display:flex;align-items:center;gap:8px}
.alert-dir{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;flex:0 0 auto}
.alert-dir button{background:transparent;border:0;color:var(--muted);font-family:var(--display);font-weight:700;font-size:15px;padding:8px 11px;cursor:pointer}
.alert-dir button.on{background:var(--accent);color:#fff}
.alert-box .alert-row input{flex:1;min-width:0;margin:0}
.alert-box .cta{flex:0 0 auto;padding:9px 14px}
.alert-hint{font-size:11.5px;color:var(--muted);margin-top:8px}
.alert-quota{font-size:10.5px;color:var(--muted);opacity:.75;margin-top:6px}
.linkbtn{background:none;border:0;color:var(--accent);cursor:pointer;font-size:11.5px;padding:0;text-decoration:underline}
.alert-banner{background:linear-gradient(180deg,rgba(53,224,200,.1),rgba(110,123,255,.08));border:1px solid rgba(53,224,200,.35);border-radius:14px;padding:12px 14px;margin-bottom:16px}
.ab-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;font-size:14px}
.ab-x{background:none;border:0;color:var(--muted);font-size:16px;cursor:pointer;padding:2px 6px}
.ab-item{display:flex;align-items:center;gap:11px;padding:7px;border-radius:10px;cursor:pointer;transition:.14s}
.ab-item:hover{background:rgba(255,255,255,.05)}
.ab-item img{width:34px;height:47px;object-fit:contain;border-radius:4px;background:#0b0d12}
.ab-nm{font-weight:600;font-size:13px}
.ab-sub{font-size:11.5px;color:var(--muted)}
.liga-range{display:flex;gap:10px;margin-top:8px;font-size:11px;color:var(--muted);text-align:center}
.liga-range span{flex:1;line-height:1.5}
.liga-range b{color:var(--text);font-size:12.5px}
.det-price-box .val.small{font-size:18px;opacity:.9}
.stores-list{display:flex;flex-direction:column;gap:6px}
.store-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--text);transition:.14s;background:var(--card)}
.store-row:hover{border-color:var(--accent);background:rgba(255,255,255,.03)}
.store-logo{width:38px;height:38px;flex:0 0 auto;border-radius:8px;object-fit:contain;background:#fff}
.store-info{flex:1;min-width:0}
.store-nm{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.store-sub{font-size:11px;color:var(--muted);margin-top:1px}
.store-go{flex:0 0 auto;font-size:11.5px;color:var(--accent);font-weight:600}
.ou-arte{padding:4px 18px 18px}
.ou-linha{display:flex;align-items:center;gap:10px;margin:6px 0 12px;color:var(--muted);font-size:11.5px}
.ou-linha:before,.ou-linha:after{content:"";flex:1;height:1px;background:var(--line)}
.ou-sub{font-size:11.5px;color:var(--muted);margin-top:7px;line-height:1.4}
.pocket[draggable="true"]{cursor:grab}
.pocket[draggable="true"]:active{cursor:grabbing}
.pocket.arrastando{opacity:.35}
.pocket.alvo{outline:2px dashed var(--accent-2);outline-offset:3px;background:rgba(53,224,200,.07)}
.pocket.pegando{outline:2px solid var(--accent-2);outline-offset:3px;transform:scale(.96)}
.pocket.destino-livre{outline:1px dashed rgba(53,224,200,.45);outline-offset:2px}
.pocket.com-arte{cursor:pointer}
.pocket.com-arte:hover{outline:1px solid rgba(255,255,255,.25);outline-offset:2px}
.slot-wrap{padding:2px 18px 6px;position:relative}
.voto-flut{position:absolute;left:26px;bottom:14px;display:flex;align-items:center;gap:6px;
background:rgba(10,12,16,.72);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14);
border-radius:99px;padding:5px 8px 5px 11px}
.voto-flut .vf-tx{font-size:10.5px;color:#dfe4ee;font-family:var(--display);font-weight:600}
.voto-flut .vf{border:0;background:rgba(255,255,255,.10);border-radius:50%;width:26px;height:26px;
font-size:13px;line-height:1;cursor:pointer;transition:.14s;padding:0}
.voto-flut .vf:hover{background:rgba(255,255,255,.22);transform:scale(1.08)}
/* Depois de votar some o texto: ficam só os dois joinhas, com o escolhido
preenchido (verde para sim, vermelho para não) e o outro vazado. */
.voto-flut.votado .vf-tx{display:none}
.voto-flut.votado{padding:5px 8px}
.voto-flut .vf.sim.on{background:#2ecc71;box-shadow:0 0 0 1px rgba(46,204,113,.6)}
.voto-flut .vf.nao.on{background:#e74c3c;box-shadow:0 0 0 1px rgba(231,76,60,.6)}
.voto-flut .vf.off{background:transparent;border:1px solid rgba(255,255,255,.35);opacity:.75}
.voto-flut .vf.off:hover{opacity:1;background:rgba(255,255,255,.12)}
.slot-wrap img{width:100%;border-radius:10px;display:block;background:#20242e;aspect-ratio:.72;object-fit:cover}
.slot-acts{padding:8px 18px 20px;display:flex;flex-direction:column;gap:8px}
.slot-acts .pbtn{width:100%}
.nota-acts{padding:6px 18px 10px;display:flex;flex-direction:column;gap:8px}
.nota-acts .cta,.nota-acts .pbtn{width:100%}
.bib-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:2px 18px 8px;max-height:52vh;overflow:auto}
.bib-item{position:relative;border:1px solid var(--line);border-radius:11px;overflow:hidden;cursor:pointer;background:#20242e;transition:.14s}
.bib-item:hover{border-color:var(--accent-2);transform:translateY(-2px)}
.bib-item img{width:100%;aspect-ratio:.72;object-fit:cover;display:block}
.bib-item .bib-art{width:100%;aspect-ratio:.72;display:block;background-color:#20242e}
.bib-item .joia{position:absolute;bottom:6px;left:6px;background:rgba(0,0,0,.62);color:#fff;border-radius:99px;padding:2px 7px;font-size:10px;font-weight:700}
.bib-item .uso{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.62);color:#fff;border-radius:99px;padding:2px 7px;font-size:10px;font-weight:700}
/* Mostra como fica no fichário de verdade: bolsos separados pelo vão
escuro do plástico, cantos arredondados e fundo da pasta. */
.par-emenda{display:flex;align-items:stretch;gap:10px;padding:12px 18px;justify-content:center;
background:#12141b;border-radius:14px;margin:2px 18px 4px;border:1px solid var(--line)}
.par-emenda.vertical{flex-direction:column;align-items:center}
.pe-item{position:relative;flex:0 1 auto;min-width:0}
.pe-item img{display:block;width:100%;aspect-ratio:.72;object-fit:cover;background:#20242e;
border-radius:9px;box-shadow:0 4px 14px -6px rgba(0,0,0,.8)}
.par-emenda:not(.vertical) .pe-item{max-width:44%}
.par-emenda.vertical .pe-item{max-width:52%}
.pe-divisa{display:none}
.pe-tag{position:absolute;left:50%;transform:translateX(-50%);bottom:7px;white-space:nowrap;
font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
padding:4px 9px;border-radius:99px;background:rgba(0,0,0,.66);color:#fff;backdrop-filter:blur(3px)}
.pe-tag.gerada{background:rgba(53,224,200,.9);color:#07120f}
/* Destaque: a carta fica levemente apagada e a arte criada em destaque,
com brilho e etiqueta. Tocar no par tira o destaque, para comparar as
duas em pé de igualdade — é assim que se julga a emenda de verdade. */
.par-emenda .pe-item{transition:.25s}
.par-emenda.destacar .pe-item.carta img{opacity:.42;filter:saturate(.7)}
.par-emenda.destacar .pe-item.nova{z-index:2}
.par-emenda.destacar .pe-item.nova img{box-shadow:0 0 0 2px var(--accent-2),0 10px 30px -10px rgba(53,224,200,.55)}
.pe-novo{position:absolute;top:8px;left:50%;transform:translateX(-50%);white-space:nowrap;
font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
padding:4px 9px;border-radius:99px;background:var(--accent-2);color:#07120f;opacity:0;transition:.25s}
.pe-item.carta .pe-novo{display:none}
.par-emenda.destacar .pe-item.nova .pe-novo{opacity:1}
.par-emenda{cursor:pointer}
.pe-toque{text-align:center;font-size:10.5px;color:var(--muted);padding:6px 18px 0}
.pe-legenda{text-align:center;font-size:11px;color:var(--muted);padding:9px 18px 2px;line-height:1.4}
.par-emenda{cursor:pointer}
.previa-par{display:flex;gap:10px;padding:2px 18px 6px}
.previa-cel{flex:1;text-align:center}
.previa-cel img{width:100%;border-radius:10px;display:block;background:#20242e;aspect-ratio:.72;object-fit:cover}
.previa-cel span{display:block;font-size:10.5px;color:var(--muted);margin-top:5px}
.previa-voto{display:flex;align-items:center;gap:8px;padding:4px 18px 2px;flex-wrap:wrap}
.previa-voto .pv-tx{font-size:12px;font-family:var(--display);font-weight:700}
.previa-voto .pv{border:1px solid var(--line);background:transparent;border-radius:10px;
padding:5px 12px;font-size:15px;line-height:1;cursor:pointer;transition:.14s}
.previa-voto .pv:hover{border-color:var(--accent-2)}
.previa-voto .pv.on{border-color:var(--accent-2);background:rgba(53,224,200,.16)}
.previa-voto .pv-sub{font-size:10.5px;color:var(--muted);flex:1 1 100%}
.previa-acts{padding:8px 18px 20px;display:flex;flex-direction:column;gap:8px}
.previa-acts .cta,.previa-acts .pbtn{width:100%}
.art-voto{display:flex;align-items:center;gap:8px;padding:2px 4px 10px;font-size:11.5px;color:var(--muted)}
.art-voto .vt{border:1px solid var(--line);background:transparent;border-radius:9px;padding:4px 9px;font-size:14px;cursor:pointer;line-height:1;transition:.15s}
.art-voto .vt:hover{border-color:var(--accent-2)}
.art-voto .vt.on{border-color:var(--accent-2);background:rgba(53,224,200,.14)}
.art-voto .vt-sub{margin-left:auto;font-size:10.5px;opacity:.85}
.art-rodape{margin-top:6px;padding:14px 18px 18px;border-top:1px solid var(--line);background:rgba(255,255,255,.02)}
.art-rodape-tit{font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-bottom:9px;font-family:var(--display);font-weight:700}
.art-rodape-sub{font-size:11px;color:var(--muted);margin-top:8px;line-height:1.45}
/* ===== Valor em destaque + carrossel ===== */
.det-valor{background:linear-gradient(160deg,rgba(53,224,200,.12),rgba(53,224,200,.03));
border:1px solid rgba(53,224,200,.22);border-radius:14px;padding:14px;margin-bottom:10px}
.dv-topo{display:flex;justify-content:space-between;align-items:center;
font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.dv-moeda{border:1px solid var(--line);background:transparent;color:var(--text);
border-radius:99px;padding:3px 10px;font-size:11.5px;cursor:pointer}
.dv-num{font-size:30px;font-weight:800;line-height:1.15;margin-top:4px}
.dv-faixa{font-size:12.5px;color:var(--muted)}
.dv-tend{font-size:12.5px;margin-top:4px}
.dv-carrossel{display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px;scroll-snap-type:x proximity}
.dv-carrossel::-webkit-scrollbar{height:0}
.dv-card{flex:0 0 auto;min-width:132px;background:rgba(255,255,255,.04);border:1px solid var(--line);
border-radius:11px;padding:9px 11px;scroll-snap-align:start}
.dv-card b{display:block;font-size:11px;color:var(--muted);font-weight:600}
.dv-card span{display:block;font-size:16px;font-weight:700;margin:2px 0}
.dv-card small{display:block;font-size:11px;color:var(--muted)}
.dv-link{flex:0 0 auto;background:rgba(255,255,255,.05);border:1px solid var(--line);
border-radius:99px;padding:8px 14px;font-size:12.5px;text-decoration:none;color:var(--text)}
.dv-quando{font-size:11px;color:var(--muted);margin-bottom:6px}
/* estado discreto: some até a pessoa preencher ou tocar */
.det-cond-fold{border:1px solid var(--line);border-radius:11px;padding:9px 12px;margin-bottom:10px}
.det-cond-fold>summary{cursor:pointer;font-size:12.5px;color:var(--muted);list-style:none}
.det-cond-fold>summary::-webkit-details-marker{display:none}
.det-cond-fold[open]>summary{margin-bottom:8px}
/* Mantido no DOM, mas nunca desenhado: a detecção continua servindo para
decidir A HORA de ler, só deixou de virar contorno na tela. */
.sc-tracado{display:none}
.sc-guia{transition:opacity .18s}
.sc-guia.escondida{opacity:0}
/* chave da etiqueta de slab: fica visível porque custa crédito a mais */
.sc-slab{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.07);
border:1px solid var(--line);color:#c3c9d6;font-size:12px;font-family:var(--body);
padding:7px 11px;border-radius:20px;cursor:pointer}
.sc-slab i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25);transition:.2s}
.sc-slab.on{color:#ffd426;border-color:rgba(255,212,38,.45);background:rgba(255,212,38,.1)}
.sc-slab.on i{background:#ffd426;box-shadow:0 0 8px rgba(255,212,38,.8)}
.sc-menu{position:fixed;z-index:8500;min-width:178px;background:#1b1e27;border:1px solid var(--line);
border-radius:12px;padding:6px;box-shadow:0 12px 34px rgba(0,0,0,.55)}
.sc-menu button{display:flex;justify-content:space-between;align-items:center;width:100%;
background:transparent;border:0;color:var(--text);text-align:left;
padding:10px 12px;border-radius:8px;font-size:14px;cursor:pointer}
.sc-menu button:hover{background:rgba(255,255,255,.07)}
.sc-menu button.on{color:var(--accent-2);font-weight:700}
/* ===== espera da avaliação =====
Quarenta segundos de tela preta é tempo demais sem nada. Em vez de um
rodopio genérico, mostra A PRÓPRIA CARTA sendo varrida: é honesto (é
mesmo aquela imagem que está sendo analisada) e dá o que olhar.
NÃO simula progresso: a API não devolve porcentagem, e barra de progresso
inventada é mentira que a pessoa percebe quando ela trava em 90%. */
.esp{max-width:300px;margin:8px auto 0;text-align:center}
.esp-quadro{position:relative;border-radius:12px;overflow:hidden;
border:1px solid var(--line);background:#0b0d13;aspect-ratio:.716}
/* `contain`: a prévia já vem no formato da carta, e `cover` cortaria
justamente as bordas, que são o que a análise está medindo */
.esp-quadro img{width:100%;height:100%;object-fit:contain;display:block;
filter:brightness(.66) saturate(.95)}
/* o facho desce e sobe, como um scanner de mesa */
.esp-facho{position:absolute;left:-10%;right:-10%;height:16%;pointer-events:none;
background:linear-gradient(180deg,transparent,rgba(53,224,200,.16) 35%,
rgba(140,245,230,.5) 50%,rgba(53,224,200,.16) 65%,transparent);
box-shadow:0 0 26px 6px rgba(53,224,200,.28);
animation:espFacho 2.6s cubic-bezier(.5,0,.5,1) infinite}
@keyframes espFacho{0%{top:-16%}50%{top:100%}100%{top:-16%}}
/* cantoneiras piscando: é onde cantos e bordas são medidos */
.esp-cant{position:absolute;width:22px;height:22px;border:2px solid var(--accent-2);
opacity:.75;animation:espPisca 1.8s ease-in-out infinite}
.esp-cant.a{top:8px;left:8px;border-right:0;border-bottom:0;border-radius:5px 0 0 0}
.esp-cant.b{top:8px;right:8px;border-left:0;border-bottom:0;border-radius:0 5px 0 0;animation-delay:.45s}
.esp-cant.c{bottom:8px;right:8px;border-left:0;border-top:0;border-radius:0 0 5px 0;animation-delay:.9s}
.esp-cant.d{bottom:8px;left:8px;border-right:0;border-top:0;border-radius:0 0 0 5px;animation-delay:1.35s}
@keyframes espPisca{0%,100%{opacity:.25}50%{opacity:.95}}
.esp-olhando{margin-top:16px;font-size:13px;color:var(--muted);min-height:20px}
.esp-olhando b{color:var(--accent-2);font-weight:700}
.esp-crono{margin-top:8px;font-size:12px;color:rgba(255,255,255,.35);
font-variant-numeric:tabular-nums}
.esp-calma{margin-top:14px;font-size:12px;color:var(--muted);opacity:0;transition:opacity .5s}
.esp-calma.on{opacity:1}
@media(prefers-reduced-motion:reduce){
.esp-facho{animation:none;top:42%}
.esp-cant{animation:none;opacity:.7}}
/* Escolha do modo antes da câmera. Só na primeira vez: depois o app
lembra do último, e repetir a pergunta viraria pedágio. */
.escolha{position:fixed;inset:0;z-index:135;background:var(--ink);overflow:auto;display:none;
padding:calc(20px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom))}
.escolha.on{display:block}
.esc-in{max-width:420px;margin:0 auto}
.esc-op{display:block;width:100%;text-align:left;border:1px solid var(--line);border-radius:14px;
background:rgba(255,255,255,.03);color:var(--text);padding:15px 16px;margin-bottom:10px;cursor:pointer}
.esc-op b{display:block;font-family:var(--display);font-weight:700;font-size:15px;margin-bottom:4px}
.esc-op span{display:block;font-size:12.5px;color:var(--muted);line-height:1.4}
.esc-op.forte{border-color:rgba(53,224,200,.5);background:rgba(53,224,200,.1)}
.esc-op.forte b{color:var(--accent-2)}
/* Escolha de idioma no Scan. A bandeira já existia, mas só MOSTRAVA —
e é ela que define de que região a carta é dentro do fichário, então
precisava ser tocável. O chip era um EMOJI; virando imagem, ela precisa
de tamanho próprio, senão estoura os 38px do botão. */
.sc-lang{cursor:pointer;position:relative}
.sc-lang img{width:24px;height:17px;object-fit:cover;border-radius:3px;display:block}
/* ponto verde: sinaliza que a região está FIXA, não sendo detectada */
.sc-lang.fixo::after{content:"";position:absolute;top:5px;right:5px;width:7px;height:7px;
border-radius:50%;background:var(--accent-2);border:1.5px solid #0a0b0f}
.sc-lang i{display:none}
.sc-langmenu{position:fixed;z-index:8700;background:#1b1e27;border:1px solid var(--line);
border-radius:14px;padding:8px;box-shadow:0 20px 44px rgba(0,0,0,.6);
display:none;max-width:260px}
.sc-langmenu.on{display:block}
.sc-langmenu .tit{font-size:11px;color:var(--muted);padding:2px 6px 8px;line-height:1.4}
.sc-langgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.sc-langgrid button{background:transparent;border:1px solid transparent;border-radius:9px;
padding:7px 4px;cursor:pointer;display:grid;place-items:center;gap:3px}
.sc-langgrid button:hover{background:rgba(255,255,255,.07)}
.sc-langgrid button.on{border-color:var(--accent-2);background:rgba(53,224,200,.14)}
.sc-langgrid img{width:24px;height:17px;object-fit:cover;border-radius:3px;display:block}
.sc-langgrid small{font-size:8.5px;color:var(--muted);line-height:1}
.sc-langauto{width:100%;margin-top:6px;background:transparent;border:1px solid var(--line);
border-radius:9px;color:var(--text);font-size:12px;padding:7px;cursor:pointer}
.sc-langauto.on{border-color:var(--accent-2);color:var(--accent-2)}
/* seletor de período do acervo */
.ac-per{display:flex;gap:6px;justify-content:center;margin:10px 0 2px;flex-wrap:wrap}
.ac-per button{background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--muted);
font-family:var(--body);font-size:12px;font-weight:600;padding:5px 13px;border-radius:16px;cursor:pointer}
.ac-per button.on{background:rgba(53,224,200,.16);border-color:var(--accent-2);color:var(--accent-2)}
.ac-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:14px;
font-weight:700;font-size:13px}
.ac-pill.up{background:rgba(53,224,200,.14);color:var(--accent-2)}
.ac-pill.down{background:rgba(255,107,107,.14);color:#ff8a8a}
.dash-change small{color:var(--muted);font-size:12px;font-weight:500}
/* ===== saquinho para rasgar =====
Refeito a partir do vídeo de referência (quadros extraídos com ffmpeg).
O mecanismo NÃO é uma tira que descola: é uma LINHA DE CORTE que já
existe no saco, e um PONTO DE LUZ QUENTE que corre por ela conforme o
dedo anda. Quando o ponto chega ao fim, um clarão percorre a linha, a
tira voa inteira girando, e sai uma COLUNA DE LUZ PRISMÁTICA de dentro.
A embalagem é DA MYBINDER — copiar a arte de uma embalagem real seria
usar identidade visual de terceiro. */
.pk{position:relative;width:100%;max-width:300px;aspect-ratio:.66;z-index:2;
touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.pk.pegando{cursor:grabbing}
/* SEM filter no pai: `drop-shadow` num container com filhos animados
obriga o navegador a refazer o filtro inteiro a cada quadro. A sombra
virou box-shadow estático no corpo. */
.pk-saco{position:absolute;inset:0}
/* corpo: foil escuro com iridescência que anda sozinha */
/* Foil holográfico: três camadas empilhadas. Um arco-íris em conic (a
difração), riscos finíssimos na diagonal (o padrão gravado no plástico,
é ele que faz o olho ler "holo" e não "gradiente colorido") e uma base
escura para o brilho ter contra o que aparecer. */
.pk-corpo{position:absolute;left:0;right:0;top:15%;bottom:0;border-radius:3px 3px 12px 12px;
border:1px solid rgba(255,255,255,.22);overflow:hidden;
transform-origin:50% 0;
box-shadow:0 26px 46px -14px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.35);
background:
repeating-linear-gradient(72deg,rgba(255,255,255,.09) 0 1px,transparent 1px 4px),
conic-gradient(from 210deg at 30% 20%,
rgba(53,224,200,.55),rgba(110,160,255,.5) 14%,rgba(190,120,255,.5) 28%,
rgba(255,110,190,.5) 42%,rgba(255,190,60,.45) 56%,rgba(150,255,120,.45) 70%,
rgba(53,224,200,.55) 88%,rgba(110,160,255,.5)),
linear-gradient(158deg,#141a2a,#090b12 55%,#161d2e)}
.pk-tira{box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
/* o brilho anda por TRANSFORM de um elemento largo, não por
background-position — background-position repinta, transform não */
.pk-holo{position:absolute;top:0;bottom:0;left:-150%;width:250%;pointer-events:none;
opacity:.75;will-change:transform;
background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.5) 45%,
rgba(180,255,240,.55) 49%,rgba(255,255,255,.45) 53%,transparent 64%);
animation:pkHolo 4.2s linear infinite}
@keyframes pkHolo{from{transform:translate3d(0,0,0)}to{transform:translate3d(60%,0,0)}}
/* área fosca no meio: sem um trecho SEM brilho, o holo vira ruído e a
marca some. O contraste é o que faz o resto brilhar */
.pk-vulto{position:absolute;left:10%;right:10%;top:16%;bottom:7%;border-radius:6px;
background:linear-gradient(165deg,rgba(8,10,16,.72),rgba(8,10,16,.5));
border:1px solid rgba(255,255,255,.1);backdrop-filter:saturate(.5)}
.pk-vulto::after{content:"MB";position:absolute;inset:0;display:grid;place-items:center;
font-family:var(--display);font-weight:800;font-size:64px;
background:linear-gradient(120deg,#35E0C8,#8C78FF 40%,#FF6BC1 70%,#FFD426);
-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.5}
/* tira de cima, com a marca */
.pk-tira{position:absolute;left:0;right:0;top:0;height:15%;border-radius:12px 12px 2px 2px;
background:
repeating-linear-gradient(72deg,rgba(255,255,255,.08) 0 1px,transparent 1px 4px),
conic-gradient(from 30deg at 60% 50%,rgba(53,224,200,.45),rgba(190,120,255,.4) 30%,
rgba(255,110,190,.4) 55%,rgba(255,190,60,.35) 75%,rgba(53,224,200,.45)),
linear-gradient(180deg,#1c2233,#12172333);
border:1px solid rgba(255,255,255,.18);border-bottom:0;
display:flex;align-items:center;justify-content:center;flex-direction:column;
transform-origin:20% 120%}
.pk-tira b{font-family:var(--display);font-weight:800;font-size:14px;
letter-spacing:.22em;color:#fff;line-height:1}
.pk-tira small{font-size:7.5px;letter-spacing:.26em;color:var(--accent-2);margin-top:3px}
/* a linha de corte já existe: é ela que diz ONDE rasgar */
.pk-linha{position:absolute;left:0;right:0;top:15%;height:2px;pointer-events:none;
background:repeating-linear-gradient(90deg,rgba(255,110,220,.85) 0 7px,transparent 7px 12px)}
/* o ponto quente corre pela linha conforme o dedo anda */
/* Truque de desempenho: o elemento tem a LARGURA TODA e é movido por
translateX em %, que se refere à largura dele mesmo — então 100% é
exatamente uma travessia. Mover `left` custaria layout a cada quadro.
O brilho é um radial-gradient, não box-shadow gigante: sombra com 22px
de espalhamento é das coisas mais caras que existem para animar. */
.pk-ponto{position:absolute;top:15%;left:0;width:100%;height:0;pointer-events:none;
transform:translate3d(calc(var(--t,0)*100%),0,0);opacity:var(--vis,0);
will-change:transform}
.pk-ponto::before{content:"";position:absolute;left:-40px;top:-40px;width:80px;height:80px;
border-radius:50%;
background:radial-gradient(circle,#fff 0 6%,rgba(255,235,255,.95) 12%,
rgba(255,140,230,.55) 26%,rgba(120,220,255,.3) 45%,transparent 70%)}
.pk-ponto::after{content:"";position:absolute;left:-13px;top:-1.5px;width:26px;height:3px;
background:#fff;border-radius:3px}
/* rastro já cortado, atrás do ponto */
/* scaleX em vez de width: mexer na largura refaz o layout a cada quadro */
.pk-corte{position:absolute;left:0;top:15%;width:100%;height:3px;margin-top:-1px;
pointer-events:none;transform-origin:0 50%;transform:scaleX(var(--t,0));
will-change:transform;
background:linear-gradient(90deg,rgba(255,180,240,.3),rgba(255,255,255,.92));
box-shadow:0 0 14px 4px rgba(255,150,230,.5)}
/* clarão que percorre a linha quando o corte fecha */
.pk-flash{position:absolute;left:-6%;right:-6%;top:15%;height:5px;margin-top:-2px;
background:linear-gradient(90deg,transparent,#fff,#ffe89a,#fff,transparent);
opacity:0;pointer-events:none}
.pk.aberto .pk-flash{animation:pkFlash .45s ease-out forwards}
@keyframes pkFlash{0%{opacity:0;transform:scaleX(.2)}
25%{opacity:1;transform:scaleX(1);box-shadow:0 0 40px 16px rgba(255,240,200,.9)}
100%{opacity:0;transform:scaleX(1)}}
/* coluna de luz prismática saindo de dentro */
.pk-raios{position:absolute;left:-30%;right:-30%;bottom:85%;height:150%;pointer-events:none;
opacity:0;transform-origin:50% 100%;transform:scaleY(.05);
background:
linear-gradient(6deg,transparent 46%,rgba(120,255,225,.55) 50%,transparent 54%),
linear-gradient(-9deg,transparent 45%,rgba(190,150,255,.5) 50%,transparent 55%),
linear-gradient(17deg,transparent 47%,rgba(255,170,225,.45) 50%,transparent 53%),
linear-gradient(-2deg,transparent 44%,rgba(255,255,255,.6) 50%,transparent 56%);
-webkit-mask:linear-gradient(0deg,#000,rgba(0,0,0,.15) 60%,transparent);
mask:linear-gradient(0deg,#000,rgba(0,0,0,.15) 60%,transparent)}
.pk.aberto .pk-raios{animation:pkRaios 1.5s cubic-bezier(.15,.85,.3,1) forwards}
@keyframes pkRaios{0%{opacity:0;transform:scaleY(.05)}
18%{opacity:1;transform:scaleY(1.05)}
100%{opacity:0;transform:scaleY(1.15)}}
/* a tira voa inteira, girando, como no vídeo */
.pk.aberto .pk-tira{animation:pkVoa 1.1s cubic-bezier(.25,.7,.4,1) forwards}
@keyframes pkVoa{
0%{transform:translate(0,0) rotate(0)}
30%{transform:translate(14%,-58%) rotate(-24deg)}
100%{transform:translate(52%,-165%) rotate(-108deg);opacity:0}}
/* o saco abre a boca e depois cede */
.pk.aberto .pk-corpo{animation:pkAbre 1.25s cubic-bezier(.3,.8,.3,1) forwards}
@keyframes pkAbre{
0%{transform:none}
22%{transform:perspective(700px) rotateX(9deg) scaleX(1.03)}
100%{transform:perspective(700px) rotateX(26deg) translateY(26%) scale(.9);opacity:0}}
.pk.aberto .pk-linha,.pk.aberto .pk-ponto,.pk.aberto .pk-corte{opacity:0;transition:.2s}
/* faíscas subindo junto com a luz */
.pk-fai{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;
left:50%;top:15%;opacity:0;pointer-events:none;
box-shadow:0 0 10px 3px rgba(255,255,255,.9)}
.pk.aberto .pk-fai{animation:pkFai 1.3s ease-out forwards}
@keyframes pkFai{0%{opacity:0;transform:translate(0,0) scale(.4)}
15%{opacity:1}
100%{opacity:0;transform:translate(var(--dx,0),-190px) scale(.2)}}
.pk-dica{text-align:center;font-size:12.5px;color:var(--muted);margin-top:20px}
.pk-dica b{color:var(--accent-2)}
.pk-seta{display:inline-block;animation:pkSeta 1.6s ease-in-out infinite}
@keyframes pkSeta{0%,100%{transform:translateX(-6px)}50%{transform:translateX(8px)}}
@media(prefers-reduced-motion:reduce){
.pk-holo,.pk-seta{animation:none}
.rev-cena.saindo{animation-duration:.01s}
.pk.aberto .pk-tira,.pk.aberto .pk-corpo,.pk.aberto .pk-raios,
.pk.aberto .pk-fai,.pk.aberto .pk-flash{animation-duration:.01s}}
/* ===== revelação da nota =====
A emoção do reveal de PSA não vem da animação: vem de QUEM abre. Por
isso a nota nunca aparece sozinha — ela espera um toque. */
.rev{position:relative;text-align:center;padding:8px 0 4px;min-height:60vh;
display:flex;flex-direction:column;align-items:center;justify-content:center}
/* Palco: o saco e a carta ocupam O MESMO espaço. Antes eram irmãos no
fluxo, então quando a carta aparecia ela EMPURRAVA a página — parte da
sensação de travada vinha daí, não da animação. */
.rev-palco{position:relative;width:100%;max-width:300px;height:min(70vh,460px);
margin:0 auto;display:grid;place-items:center}
.rev-palco>*{grid-area:1/1}
.rev-cena{perspective:1200px;width:250px;height:417px;margin:0 auto;z-index:1}
/* a carta sobe DE DENTRO: começa afundada e atrás do corpo do saco */
.rev-cena.saindo{animation:revSobe .95s cubic-bezier(.18,.85,.25,1) forwards}
@keyframes revSobe{
0%{transform:translateY(30%) scale(.82);opacity:0}
35%{opacity:1}
100%{transform:none;opacity:1}}
.rev-cx{position:relative;width:100%;height:100%;transform-style:preserve-3d;
transition:transform .78s cubic-bezier(.3,.85,.25,1)}
.rev-cx.aberto{transform:rotateY(180deg)}
.rev-lado{position:absolute;inset:0;border-radius:14px;overflow:hidden;
backface-visibility:hidden;-webkit-backface-visibility:hidden}
.rev-costas{background:linear-gradient(155deg,#1b1f2a,#0d0f14 60%,#141821);
border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;
box-shadow:0 24px 60px -20px rgba(0,0,0,.9)}
.rev-costas span{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.18em;
color:rgba(255,255,255,.14)}
.rev-frente{transform:rotateY(180deg);
background:linear-gradient(155deg,#1b1f2a,#0d0f14 60%,#141821);
border:1px solid rgba(255,255,255,.14);
box-shadow:0 24px 60px -20px rgba(0,0,0,.9)}
.rev-carta{position:absolute;left:11%;right:11%;top:26%;bottom:7%;border-radius:5px;overflow:hidden}
.rev-carta img{width:100%;height:100%;object-fit:cover;display:block}
.rev-etq{position:absolute;top:0;left:0;right:0;height:23%;
background:linear-gradient(180deg,#10131a,#0b0d12);border-bottom:1px solid rgba(255,255,255,.12);
display:flex;align-items:center;gap:9px;padding:0 12px}
.rev-marca{font-family:var(--display);font-weight:800;font-size:10px;letter-spacing:.13em;color:var(--accent-2);line-height:1.25}
.rev-marca small{display:block;font-weight:600;font-size:7.5px;letter-spacing:.1em;color:var(--muted)}
.rev-nm{flex:1;min-width:0;font-family:var(--display);font-weight:700;font-size:10.5px;color:#fff;text-align:left}
.rev-num{flex:none;font-family:var(--display);font-weight:800;font-size:27px;line-height:1;
letter-spacing:-1.5px;color:#fff;min-width:62px;text-align:center;transition:transform .16s}
.rev-num.trava{animation:revPunch .42s cubic-bezier(.2,1.6,.35,1)}
@keyframes revPunch{0%{transform:scale(1)}38%{transform:scale(1.42)}100%{transform:scale(1)}}
/* a tarja que cobre a nota até o momento */
.rev-tarja{position:absolute;top:0;right:0;width:78px;height:23%;z-index:3;
background:linear-gradient(180deg,#2a2f3c,#1a1e28);border-left:1px solid rgba(255,255,255,.14);
transition:transform .45s cubic-bezier(.4,0,.2,1)}
.rev-tarja.fora{transform:translateY(-101%)}
/* explosão de luz, só nas notas altas */
.rev-luz{position:absolute;left:50%;top:34%;width:10px;height:10px;margin:-5px 0 0 -5px;
border-radius:50%;pointer-events:none;opacity:0;z-index:0}
.rev-luz.on{animation:revLuz 1.1s ease-out forwards}
@keyframes revLuz{
0%{opacity:.95;box-shadow:0 0 0 0 var(--luzc,#ffd426),0 0 40px 10px var(--luzc,#ffd426)}
100%{opacity:0;box-shadow:0 0 0 190px transparent,0 0 90px 40px transparent}}
.rev-tit{font-family:var(--display);font-weight:700;font-size:17px;margin:20px 0 4px}
.rev-sub{font-size:13px;color:var(--muted);margin-bottom:16px}
.rev-toque{animation:revPulsa 1.7s ease-in-out infinite}
@keyframes revPulsa{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@media(prefers-reduced-motion:reduce){
.rev-cx{transition:none}.rev-toque{animation:none}
.rev-luz.on{animation:none}.rev-num.trava{animation:none}}
/* ===== câmera guiada do PreGrade =====
Foto ruim aqui não dá erro: dá NOTA ERRADA, que é pior. Por isso o
obturador só libera com os quatro critérios verdes. */
.pgcam{position:fixed;inset:0;z-index:130;background:#000;display:none;overflow:hidden}
.pgcam.on{display:block}
.pgcam>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pgc-tit{position:absolute;top:calc(14px + env(safe-area-inset-top));left:0;right:0;text-align:center;z-index:5}
.pgc-tit span{background:rgba(10,11,15,.65);border:1px solid rgba(255,255,255,.12);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
color:#fff;font-family:var(--display);font-weight:600;font-size:13px;padding:8px 15px;border-radius:20px}
.pgc-guia{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
pointer-events:none;z-index:2;padding-bottom:26vh}
.pgc-guia i{display:block;width:78%;max-width:340px;aspect-ratio:.716;border:2px solid rgba(255,255,255,.5);
border-radius:10px;box-shadow:0 0 0 2000px rgba(0,0,0,.42);transition:border-color .2s}
.pgc-guia.ok i{border-color:var(--accent-2)}
/* nível de bolha: o telefone precisa estar paralelo à carta */
.pgc-nivel{position:absolute;right:14px;top:calc(64px + env(safe-area-inset-top));width:62px;height:62px;
border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(10,11,15,.55);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:5;display:none}
.pgc-nivel.on{display:block}
.pgc-nivel::before{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;
border:1px dashed rgba(255,255,255,.35);border-radius:50%}
.pgc-nivel span{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;
border-radius:50%;background:#ffd426;transition:transform .08s linear,background .2s}
.pgc-nivel.ok span{background:var(--accent-2)}
.pgc-lista{position:absolute;left:12px;right:12px;bottom:calc(112px + env(safe-area-inset-bottom));z-index:5;
display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.pgc-it{display:inline-flex;align-items:center;gap:6px;background:rgba(10,11,15,.66);
border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
color:#fff;font-size:12px;padding:6px 11px;border-radius:20px}
.pgc-it b{font-weight:600}
.pgc-it i{width:7px;height:7px;border-radius:50%;background:#ff6b7d;flex:none}
.pgc-it.ok i{background:var(--accent-2)}
.pgc-it small{color:var(--muted);font-size:11.5px}
.pgc-it.dica{border-color:rgba(255,212,38,.45);color:#ffd426}
.pgc-it.dica small{color:rgba(255,212,38,.75)}
.pgc-base{position:absolute;left:0;right:0;bottom:0;z-index:6;
padding:14px 18px calc(18px + env(safe-area-inset-bottom));
display:flex;align-items:center;justify-content:space-between;gap:12px;
background:linear-gradient(transparent,#000c 30%,#000f)}
.pgc-txt{background:none;border:0;color:#e6e8ee;font-size:13px;cursor:pointer;padding:8px;font-family:var(--body)}
/* O obturador virou MOSTRADOR: o app tira sozinho quando tudo está em
ordem e a cena para de se mexer. Tocar continua funcionando como atalho,
mas o toque é justamente a maior fonte de tremida — e a tremida entra na
medida de superfície e bordas, onde a nota se decide. */
.pgc-obt{width:72px;height:72px;border-radius:50%;border:0;flex:none;padding:0;cursor:pointer;
background:conic-gradient(var(--accent-2) calc(var(--p,0)*1%),rgba(255,255,255,.16) 0);
display:grid;place-items:center;transition:transform .15s}
.pgc-obt::after{content:"";width:56px;height:56px;border-radius:50%;
background:rgba(255,255,255,.9);transition:background .2s,transform .15s}
.pgc-obt:disabled{cursor:default}
.pgc-obt:disabled::after{background:rgba(255,255,255,.22)}
.pgc-obt.contando::after{background:var(--accent-2);transform:scale(.9)}
.pgc-obt.disparou{transform:scale(.92)}
.pgc-conta{position:absolute;left:0;right:0;top:44%;text-align:center;z-index:6;pointer-events:none}
.pgc-conta span{font-family:var(--display);font-weight:800;font-size:72px;color:#fff;
text-shadow:0 4px 22px rgba(0,0,0,.7);opacity:0}
.pgc-conta span.on{animation:pgConta .62s ease-out}
@keyframes pgConta{0%{opacity:0;transform:scale(1.5)}22%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.85)}}
.pgc-forcar{position:absolute;left:0;right:0;bottom:calc(88px + env(safe-area-inset-bottom));text-align:center;z-index:6}
.pgc-forcar button{background:none;border:0;color:#ffd426;font-size:12px;text-decoration:underline;cursor:pointer}
/* ===== Cofre ===== */
.cf-sec{margin-top:22px}
.cf-tit{display:flex;align-items:baseline;gap:9px;margin-bottom:4px}
.cf-tit h4{font-family:var(--display);font-weight:700;font-size:15px;margin:0}
.cf-tit span{font-size:12px;color:var(--muted)}
.cf-exp{font-size:12px;color:var(--muted);line-height:1.5;margin:0 0 11px}
.cf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:11px}
.cf-card{position:relative;cursor:pointer}
/* miniatura do slab: mesma estrutura da peça grande, em escala */
.cf-mini{position:relative;aspect-ratio:.597;border-radius:8px;overflow:hidden;padding:5.6%;
background:linear-gradient(157deg,rgba(255,255,255,.14),rgba(255,255,255,.035) 38%,
rgba(255,255,255,.02) 62%,rgba(255,255,255,.11));
border:1px solid rgba(255,255,255,.3);
box-shadow:0 8px 20px -8px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.5);
transition:transform .18s}
.cf-card{cursor:pointer}
.cf-card:hover .cf-mini{transform:translateY(-3px)}
.cf-mini-in{width:100%;height:100%;background:#000;border-radius:2px;
border:1px solid rgba(255,255,255,.45);display:flex;flex-direction:column;padding:4% 4% 3%}
.cf-mini-topo{flex:none;text-align:center;font-family:var(--display);font-weight:800;
font-size:6px;letter-spacing:.13em;color:#fff;padding-bottom:3px;
border-bottom:1px solid rgba(255,255,255,.45);white-space:nowrap;overflow:hidden}
.cf-mini-etq{flex:none;margin-top:3px;border:1px solid rgba(255,255,255,.45);border-radius:2px;
display:flex;align-items:center;justify-content:center;gap:4px;padding:2px 0}
.cf-mini-etq b{font-family:var(--display);font-weight:800;font-size:13px;line-height:1;color:#fff}
.cf-mini-etq i{font-style:normal;font-size:5px;letter-spacing:.1em;color:var(--accent-2)}
.cf-mini-carta{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:6% 3% 3%}
.cf-mini-carta img{max-width:100%;max-height:100%;display:block;
filter:drop-shadow(0 4px 8px rgba(0,0,0,.9))}
.cf-mini-luz{position:absolute;inset:0;pointer-events:none;border-radius:8px;
background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.16) 50%,transparent 60%)}
.cf-abrir{font-size:10px;color:var(--accent-2);margin-top:2px}
.cf-x{position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:50%;
border:1px solid var(--line);background:#1b1e27;color:#c3c9d6;font-size:15px;line-height:1;
cursor:pointer;display:grid;place-items:center;padding:0;opacity:0;transition:.15s;z-index:3}
.cf-card{position:relative}
.cf-card:hover .cf-x,.cf-x:focus{opacity:1}
.cf-x:hover{background:rgba(255,107,125,.2);border-color:rgba(255,107,125,.5);color:#ff9ba8}
@media(hover:none){.cf-x{opacity:1}} /* no celular não existe hover */
.cf-nm{font-size:11.5px;margin-top:5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-sel{position:absolute;top:4px;left:4px;right:4px;display:flex;align-items:center;justify-content:space-between;
gap:4px;background:rgba(8,9,12,.86);border-radius:6px;padding:2px 5px;
font-family:var(--display);font-weight:700;font-size:9.5px;letter-spacing:.03em}
.cf-sel.fisica{border:1px solid rgba(255,212,38,.5);color:#ffd426}
.cf-sel.digital{border:1px solid rgba(53,224,200,.5);color:var(--accent-2)}
.cf-sel b{color:#fff;font-size:11.5px}
.cf-vazio{border:1px dashed var(--line);border-radius:12px;padding:16px;font-size:12.5px;
color:var(--muted);line-height:1.55}
/* ===== slab em 3D =====
Caixa de verdade: seis faces com espessura, girada por rotateX/rotateY
que o dedo ou o mouse controlam. CSS puro — carregar uma biblioteca 3D
para girar um retângulo seria peso à toa no celular. */
.slab3d{--w:270px;--h:452px;--d:29px;
width:var(--w);height:var(--h);margin:6px auto 0;
perspective:900px;perspective-origin:50% 46%;
touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.slab3d.pegando{cursor:grabbing}
.slab3d-cx{position:relative;width:100%;height:100%;transform-style:preserve-3d;
transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
will-change:transform}
.slab3d-cx.entrando{animation:slab3dEntra 1.3s cubic-bezier(.2,.9,.25,1) 1.5s both}
@keyframes slab3dEntra{from{transform:rotateX(6deg) rotateY(-30deg)}to{transform:rotateX(0) rotateY(0)}}
.sf{position:absolute;top:50%;left:50%;overflow:hidden;
backface-visibility:hidden;-webkit-backface-visibility:hidden}
.sf-fr,.sf-vs{width:var(--w);height:var(--h);margin:calc(var(--h)/-2) 0 0 calc(var(--w)/-2);border-radius:19px}
.sf-fr{transform:translateZ(calc(var(--d)/2))}
.sf-vs{transform:rotateY(180deg) translateZ(calc(var(--d)/2));
background:linear-gradient(157deg,rgba(255,255,255,.14),rgba(255,255,255,.035) 38%,
rgba(255,255,255,.02) 62%,rgba(255,255,255,.11));
border:1px solid rgba(255,255,255,.34);padding:5.6% 5.6% 5%;
box-shadow:inset 0 1px 0 rgba(255,255,255,.62),inset 0 -1px 0 rgba(255,255,255,.24);
display:block}
.sf-vs .marca{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.16em;color:rgba(255,255,255,.14)}
.sf-vs .marca{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.16em;color:rgba(255,255,255,.13)}
/* cantos: a espessura do acrílico */
.sf-dr,.sf-es{width:var(--d);height:var(--h);margin:calc(var(--h)/-2) 0 0 calc(var(--d)/-2);
background:linear-gradient(90deg,rgba(255,255,255,.5),rgba(255,255,255,.30) 30%,
rgba(255,255,255,.24) 55%,rgba(255,255,255,.44)),
linear-gradient(180deg,rgba(255,255,255,.35),transparent 9%,
transparent 91%,rgba(255,255,255,.35))}
.sf-dr{transform:rotateY(90deg) translateZ(calc(var(--w)/2))}
.sf-es{transform:rotateY(-90deg) translateZ(calc(var(--w)/2))}
.sf-tp,.sf-bs{width:var(--w);height:var(--d);margin:calc(var(--d)/-2) 0 0 calc(var(--w)/-2);
background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.30) 30%,
rgba(255,255,255,.24) 55%,rgba(255,255,255,.44))}
.sf-tp{transform:rotateX(90deg) translateZ(calc(var(--h)/2))}
.sf-bs{transform:rotateX(-90deg) translateZ(calc(var(--h)/2))}
/* brilho que acompanha o ângulo: é o que faz ler como acrílico */
.sf-luz{position:absolute;inset:0;pointer-events:none;border-radius:19px;
background:linear-gradient(105deg,transparent calc(var(--gx,50%) - 26%),
rgba(255,255,255,.16) var(--gx,50%),
transparent calc(var(--gx,50%) + 26%))}
/* Vindo da revelação, a peça JÁ foi montada na frente da pessoa: repetir
etiqueta descendo e acrílico fechando seria contar a mesma coisa duas
vezes. O giro de entrada fica, porque é ele que ensina que dá para girar. */
.semmontagem .slab-etq,.semmontagem .slab-meia,
.semmontagem .slab-carta,.semmontagem .slab-brilho{animation:none !important}
.semmontagem .slab-etq,.semmontagem .slab-meia{transform:none !important}
.semmontagem .slab-carta{opacity:1 !important;transform:none !important}
.slab3d-dica{text-align:center;font-size:11.5px;color:var(--muted);margin-top:14px}
.slab3d-dica button{background:none;border:0;color:var(--accent-2);font-size:11.5px;cursor:pointer;
text-decoration:underline;padding:0 0 0 6px;font-family:var(--body)}
/* a face da frente hospeda o slab que já existia */
.sf-fr .slab{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;
aspect-ratio:auto;border-radius:5px}
@media(max-width:400px){.slab3d{--w:236px;--h:395px;--d:25px}}
@media(prefers-reduced-motion:reduce){.slab3d-cx.entrando{animation:none}}
/* ===== slab MyBinder =====
Estrutura da referência: casca de acrílico TRANSPARENTE com moldura
larga em volta, e dentro dela um CARTÃO PRETO inserido, com fio branco
de contorno. No topo do cartão vem a marca, e abaixo um quadro com
borda reunindo nome, selo e nota. A carta fica embaixo. */
.slab{position:relative;width:100%;max-width:300px;margin:6px auto 0;aspect-ratio:.597;
border-radius:19px;overflow:hidden;padding:5.6% 5.6% 5%;
background:linear-gradient(157deg,rgba(255,255,255,.14),rgba(255,255,255,.035) 38%,
rgba(255,255,255,.02) 62%,rgba(255,255,255,.11));
border:1px solid rgba(255,255,255,.34);
box-shadow:0 26px 64px -20px rgba(0,0,0,.9),
inset 0 1px 0 rgba(255,255,255,.62),
inset 0 -1px 0 rgba(255,255,255,.24),
inset 1px 0 0 rgba(255,255,255,.2),
inset -1px 0 0 rgba(255,255,255,.2)}
/* cartão preto inserido */
.slab-in{position:relative;width:100%;height:100%;background:#000;border-radius:3px;
border:1px solid rgba(255,255,255,.5);display:flex;flex-direction:column;
padding:3.5% 4% 2.6%;box-shadow:0 2px 10px rgba(0,0,0,.9)}
.slab-topo{flex:none;text-align:center;font-family:var(--display);font-weight:800;
font-size:11px;letter-spacing:.16em;color:#fff;line-height:1;padding-bottom:5px;
border-bottom:1px solid rgba(255,255,255,.5)}
/* quadro com borda: nome, selo e nota */
.slab-etq{flex:none;margin-top:5px;border:1px solid rgba(255,255,255,.5);border-radius:2px;
display:flex;align-items:stretch;gap:0;overflow:hidden;
transform:translateY(-102%);animation:slabEtq .5s cubic-bezier(.2,.9,.25,1) 1s forwards}
.slab-nm{flex:1;min-width:0;padding:5px 7px;font-family:var(--display);font-weight:700;
font-size:7.5px;color:#fff;line-height:1.62;text-align:left;letter-spacing:.04em;
display:flex;flex-direction:column;justify-content:center}
.slab-nm b{display:block;font-weight:700;font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slab-nm span{display:block;font-weight:500;color:#c9cfdb;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slab-selo{flex:none;width:17%;border-left:1px solid rgba(255,255,255,.35);
display:grid;place-items:center;padding:4px}
.slab-selo img{width:100%;display:block;border-radius:1px}
.slab-data{flex:none;width:11px;border-left:1px solid rgba(255,255,255,.35);
display:grid;place-items:center}
.slab-data i{font-style:normal;font-size:6px;letter-spacing:.1em;color:#8e97a8;
writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
.slab-nota{flex:none;width:23%;border-left:1px solid rgba(255,255,255,.5);
display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 2px}
.slab-nota b{font-family:var(--display);font-weight:800;font-size:23px;line-height:1;
letter-spacing:-1px;color:#fff}
.slab-nota i{font-style:normal;font-size:5.5px;letter-spacing:.1em;color:#fff;margin-top:2px;
white-space:nowrap}
.slab-janela{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:5% 2% 3%}
.slab-carta{max-width:100%;max-height:100%;display:block;background:none;
filter:drop-shadow(0 8px 16px rgba(0,0,0,.9));
opacity:0;transform:scale(.9);animation:slabCarta .55s ease-out .15s forwards}
/* espelha o bloco inteiro: é assim que um texto impresso na face da frente
aparece quando você olha a peça por trás */
.espelhado{transform:scaleX(-1)}
.slab-pe{flex:none;text-align:center;font-family:var(--display);font-weight:700;
font-size:5.5px;letter-spacing:.16em;color:rgba(255,255,255,.5)}
@keyframes slabEtq{to{transform:translateY(0)}}
@keyframes slabCarta{to{opacity:1;transform:scale(1)}}
/* as folhas de acrílico fechando, quase invisíveis */
.slab-meia{position:absolute;top:0;bottom:0;width:52%;z-index:2;pointer-events:none;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 45%,rgba(255,255,255,.06))}
.slab-meia.e{left:0;transform:translateX(-101%);animation:slabE .6s cubic-bezier(.2,.9,.25,1) .5s forwards}
.slab-meia.d{right:0;transform:translateX(101%);animation:slabD .6s cubic-bezier(.2,.9,.25,1) .5s forwards}
@keyframes slabE{to{transform:translateX(0)}}
@keyframes slabD{to{transform:translateX(0)}}
.slab-brilho{position:absolute;inset:0;z-index:4;pointer-events:none;
background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.26) 48%,rgba(255,255,255,.07) 54%,transparent 62%);
transform:translateX(-120%);animation:slabBri 1.5s ease-in-out 1.7s forwards}
@keyframes slabBri{to{transform:translateX(120%)}}
.slab-rod{text-align:center;font-size:11px;color:var(--muted);margin-top:12px;line-height:1.5}
@media(prefers-reduced-motion:reduce){
.slab-etq,.slab-carta,.slab-meia.e,.slab-meia.d,.slab-brilho{animation:none}
.slab-etq{transform:none}.slab-carta{opacity:1;transform:none}
.slab-meia.e,.slab-meia.d{transform:none}.slab-brilho{display:none}
}
/* ===== pré-graduação ===== */
.gradefull{position:fixed;inset:0;z-index:122;background:var(--ink);display:none;overflow:auto;
padding:calc(var(--barraH,0px) + 16px) 16px calc(24px + env(safe-area-inset-bottom))}
.gradefull.on{display:block}
.gr-wrap{max-width:520px;margin:0 auto}
.gr-slots{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.gr-slot{position:relative;aspect-ratio:.716;border:1px dashed var(--line);border-radius:14px;
background:rgba(255,255,255,.02);display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:7px;cursor:pointer;color:var(--muted);font-size:12.5px;
overflow:hidden;text-align:center;padding:10px}
.gr-slot svg{width:22px;height:22px}
.gr-slot.cheio{border-style:solid;border-color:var(--accent-2)}
.gr-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gr-slot .lab{position:absolute;left:0;right:0;bottom:0;background:rgba(8,9,12,.8);
color:#fff;font-size:11.5px;padding:5px}
.gr-nota{text-align:center;padding:20px 0 6px}
.gr-num{font-family:var(--display);font-weight:800;font-size:56px;line-height:1;letter-spacing:-2px}
.gr-cond{color:var(--muted);font-size:14px;margin-top:4px}
.gr-partes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0}
.gr-parte{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:10px 6px;text-align:center}
.gr-parte b{display:block;font-family:var(--display);font-weight:700;font-size:19px}
.gr-parte span{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.gr-porque{background:var(--panel);border:1px solid var(--line);border-radius:13px;
padding:14px 16px;margin:16px 0;font-size:13px;line-height:1.6}
.gr-porque h4{font-family:var(--display);font-weight:700;font-size:14.5px;margin:0 0 8px}
.gr-porque p{margin:0 0 10px}
.gr-porque ul{list-style:none;padding:0;margin:0 0 10px}
.gr-porque li{padding:5px 0;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.gr-porque li:last-child{border-bottom:0}
.gr-porque li b{color:var(--text)}
.gr-porque li i{float:right;font-style:normal;font-family:var(--display);font-weight:700;color:var(--text)}
.gr-nota-pe{color:var(--muted);font-size:12px;margin-bottom:0 !important}
.gr-viz{width:100%;border-radius:12px;display:block;margin:12px 0;border:1px solid var(--line)}
.gr-aviso{background:rgba(255,212,38,.1);border:1px solid rgba(255,212,38,.32);color:#FFE9A3;
border-radius:11px;padding:10px 13px;font-size:12.5px;line-height:1.5;margin:12px 0}
/* ===== Scan em tela cheia =====
Linguagem de leitor: cantos em colchete em vez de retângulo fechado, e a
COR carrega o estado (âmbar procurando, verde-água lendo, verde confirmou).
Quem alimenta cartas olha para as mãos, não para a tela — por isso o
estado também sai em som e vibração, não só em texto. */
.scanfull{position:fixed;inset:0;z-index:120;background:#000;display:none;overflow:hidden}
.scanfull.on{display:block}
.scanfull>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sc-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:8px;
padding:calc(12px + env(safe-area-inset-top)) 12px 30px;
background:linear-gradient(#000d,#0009 45%,transparent);z-index:5}
.sc-x,.sc-icon{width:38px;height:38px;flex:none;border-radius:12px;border:1px solid rgba(255,255,255,.14);
background:rgba(10,11,15,.55);color:#fff;cursor:pointer;padding:0;
display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sc-x svg,.sc-icon svg{width:18px;height:18px}
.sc-icon.on{color:#ffd426;border-color:rgba(255,212,38,.5);background:rgba(255,212,38,.14)}
.sc-jogo{border:1px solid rgba(255,255,255,.14);border-radius:20px;background:rgba(10,11,15,.55);color:#fff;
font-family:var(--display);font-weight:600;font-size:13px;padding:9px 14px;cursor:pointer;
display:flex;gap:6px;align-items:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sc-jogo span{opacity:.55;font-size:10px}
.sc-lang{width:38px;height:38px;flex:none;border-radius:12px;background:rgba(10,11,15,.55);
border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-size:17px}
.sc-espaco{flex:1}
/* Moldura FIXA, contínua, na proporção da carta. Antes o contorno
perseguia a carta na tela: tremia junto com a mão e virava ruído. Agora
o quadro não se mexe — quem se ajusta é a pessoa — e o estado aparece
só na cor e na espessura da borda. */
.sc-guia{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
pointer-events:none;z-index:2;padding-bottom:30vh;transition:opacity .18s}
.sc-guia i{position:relative;display:block;width:74%;max-width:330px;aspect-ratio:.716;
border:2px solid rgba(255,255,255,.55);border-radius:14px;
box-shadow:0 0 0 2000px rgba(0,0,0,.30);
transition:border-color .22s,border-width .12s}
.sc-guia.pronta i{border-color:#ffd426}
.sc-guia.lendo i{border-color:var(--accent-2);border-width:3px}
.sc-guia.lendo i{animation:scPulso 1.1s ease-in-out infinite}
@keyframes scPulso{0%,100%{opacity:1}50%{opacity:.62}}
.sc-tracado{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;opacity:0;transition:opacity .18s}
.sc-tracado.on{opacity:1}
.sc-tracado polygon{fill:rgba(255,212,38,.10);stroke:#ffd426;stroke-width:.8;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.sc-tracado.lendo polygon{fill:rgba(53,224,200,.16);stroke:#35e0c8}
/* confirmação: um lampejo curto na tela inteira, para ser visto de canto de olho */
.sc-flash{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;background:rgba(53,224,200,.3)}
.sc-flash.erro{background:rgba(255,107,125,.3)}
.sc-flash.on{animation:scFlash .42s ease-out}
@keyframes scFlash{0%{opacity:.85}100%{opacity:0}}
/* O botão de ler o texto fica acima da faixa de estado, na mesma coluna
dos outros avisos da câmera. Em fluxo normal ele cairia fora do lugar,
porque tudo aqui é posicionado sobre o vídeo. */
.sc-ocr{position:absolute;left:0;right:0;bottom:calc(32vh + 84px);text-align:center;
z-index:4;padding:0 20px;display:none}
.sc-ocr.on{display:block}
.sc-ocr button{background:rgba(53,224,200,.16);border:1px solid rgba(53,224,200,.5);
color:var(--accent-2);font-family:var(--body);font-size:13px;font-weight:600;
padding:9px 16px;border-radius:20px;cursor:pointer;
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sc-ocr button:disabled{opacity:.6}
.sc-estwrap{position:absolute;left:0;right:0;bottom:32vh;text-align:center;z-index:3;padding:0 20px}
.sc-est{display:inline-block;background:rgba(10,11,15,.62);border:1px solid rgba(255,255,255,.1);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
color:#fff;font-size:13px;padding:7px 14px;border-radius:20px;max-width:90%}
/* dica de luz e enquadramento: some sozinha quando a cena melhora */
.sc-dica{position:absolute;left:0;right:0;bottom:calc(32vh + 44px);text-align:center;z-index:3;
padding:0 20px;opacity:0;transition:opacity .25s;pointer-events:none}
.sc-dica.on{opacity:1}
.sc-dica>span{display:inline-block;background:rgba(255,212,38,.16);border:1px solid rgba(255,212,38,.4);
color:#FFE9A3;font-size:12px;padding:6px 13px;border-radius:20px;
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sc-base{position:absolute;left:0;right:0;bottom:0;z-index:4;
padding:10px 12px calc(10px + env(safe-area-inset-bottom));
background:linear-gradient(transparent,#000c 24%,#000f)}
.sc-tira{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;scroll-snap-type:x proximity}
.sc-tira::-webkit-scrollbar{height:0}
.sc-tira .it{position:relative;flex:0 0 auto;display:flex;gap:9px;align-items:center;cursor:pointer;scroll-snap-align:start;
background:rgba(22,24,31,.92);border:1px solid rgba(255,255,255,.08);
border-radius:12px;padding:8px 12px 8px 8px;max-width:76vw}
.sc-tira .it img{width:44px;border-radius:5px;display:block;flex:0 0 auto}
.sc-tira .it .tx{min-width:0}
.sc-tira .it b{display:block;font-size:12.5px;color:#fff;line-height:1.3;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.sc-tira .it small{display:block;font-size:11px;color:#9aa3b4;line-height:1.35;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.sc-tira .it span{font-size:12px;color:var(--accent-2);font-weight:700}
.sc-tira .it-x{position:absolute;top:-5px;right:-5px;width:21px;height:21px;border-radius:50%;
border:1px solid rgba(255,255,255,.22);background:#2a2f3c;color:#fff;
font-size:11px;line-height:1;cursor:pointer;padding:0;z-index:2;
display:flex;align-items:center;justify-content:center}
.sc-tira .it-x:hover{background:#c0392b;border-color:#c0392b}
/* linha da sessão: o que já entrou e o que já custou */
.sc-sessao{display:flex;align-items:center;gap:9px;margin:2px 0 8px;font-size:12px;color:#9aa3b4}
.sc-sessao .cr{margin-left:auto;white-space:nowrap}
.sc-desfazer{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#e6e8ee;
border-radius:16px;padding:5px 11px;font-size:11.5px;cursor:pointer;white-space:nowrap}
.sc-desfazer:disabled{opacity:.3;cursor:default}
.sc-rod{display:flex;align-items:center;gap:10px;margin-top:4px}
.sc-seguir{flex:1;border:0;border-radius:13px;padding:14px;font-family:var(--display);font-weight:700;font-size:14.5px;
background:var(--accent-2);color:#06231f;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.sc-seguir svg{width:17px;height:17px}
.sc-seguir:disabled{opacity:.35;cursor:default}
.sc-seguir.sec{flex:0 0 auto;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.16)}
/* modo foto: nada de moldura de leitura contínua — a tela é um visor */
.scanfull.foto .sc-guia,.scanfull.foto .sc-tracado{display:none}
.sc-total{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
border-radius:13px;padding:12px 14px;color:#fff;font-size:13.5px;white-space:nowrap}
.pg-grade{display:grid;gap:6px;margin:0 auto 14px;max-width:330px}
.pg-cel{aspect-ratio:.716;border-radius:7px;border:1px dashed rgba(255,255,255,.14);
background:rgba(255,255,255,.02);overflow:hidden}
/* selo da carta graduada: fica no alto do bolso, discreto */
.slabsel{position:absolute;top:5px;left:5px;z-index:3;display:flex;align-items:center;gap:4px;
background:rgba(8,9,12,.82);border:1px solid rgba(255,212,38,.55);color:#ffd426;
border-radius:7px;padding:2px 6px;font-family:var(--display);font-weight:700;font-size:10.5px;
letter-spacing:.02em;pointer-events:none}
.slabsel b{color:#fff;font-size:11.5px}
.pg-cel{position:relative}
.pg-cel.tem{border-style:solid;border-color:var(--accent-2)}
.pg-cel.fica{border-style:solid;border-color:rgba(255,255,255,.2)}
.pg-cel.sai{border-style:solid;border-color:#ff6b7d}
.pg-cel.sai img{opacity:.35}
.pg-cel.sai span{position:absolute;inset:auto 0 4px;text-align:center;font-size:10px;color:#ff9ba8}
.pg-opt{display:flex;gap:9px;align-items:flex-start;margin:14px 0 2px;font-size:13px;line-height:1.4;cursor:pointer}
.pg-opt input{margin-top:2px;flex:none}
.pg-opt small{display:block;color:var(--muted);font-size:11.5px}
.pg-cel img{width:100%;height:100%;object-fit:cover;display:block}
.pg-setas{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-width:330px;margin:0 auto}
.sc-sobre{position:absolute;inset:0;z-index:7;background:#12151c;overflow:auto;padding:18px;display:none}
.sc-sobre.on{display:block}
.art-grid{display:grid;gap:5px;padding:2px 4px 4px;margin:-4px 0 4px}
.art-cell{aspect-ratio:.72;border-radius:7px;border:1px dashed rgba(255,255,255,.16);background:rgba(255,255,255,.02);background-size:cover;background-position:center;background-repeat:no-repeat;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--accent-2);font-size:13px;transition:.12s}
.art-cell.on{border-style:solid;border-color:var(--accent-2);background:rgba(53,224,200,.12)}
.art-cell.carta{cursor:default;border:1px solid var(--line);opacity:.85}
.art-hint{font-size:11px;color:var(--muted);padding:0 4px 6px}
.art-list{padding:2px 18px 20px;display:flex;flex-direction:column;gap:9px;max-height:62vh;overflow:auto}
.art-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02);flex-wrap:wrap}
.art-row.vazia{opacity:.5}
.art-mini{width:44px;height:44px;border-radius:8px;flex:none;background:#2a2e3a;background-size:cover;background-position:center}
.art-info{flex:1 1 120px;min-width:0}
.art-nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.art-nm{font-family:var(--display);font-weight:700;font-size:13.5px}
.art-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.art-acts{display:flex;gap:6px;flex:0 0 auto;margin-left:auto}
@media(max-width:520px){.art-acts{width:100%;margin-left:0}.art-acts button{flex:1}}
.art-acts button{border:1px solid var(--line);background:transparent;color:var(--text);border-radius:9px;padding:7px 10px;white-space:nowrap;font-family:var(--display);font-weight:600;font-size:12px;cursor:pointer;transition:.15s}
.art-acts button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.art-acts button:disabled{opacity:.45;cursor:default}
.art-acts .ger{background:var(--accent-2);color:#0b0d12;border-color:transparent}
.card-liga-btn{display:block;width:100%;box-sizing:border-box;padding:13px 16px;margin-top:2px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--accent);font-size:14.5px;font-weight:700;text-align:center;text-decoration:none;cursor:pointer;transition:.14s}
.card-liga-btn:hover{border-color:var(--accent);background:rgba(255,255,255,.03)}
.card-liga-btn:active{transform:scale(.99)}
.price-spark{width:100%;height:70px;display:block}
.term{font-size:12px;font-weight:600;margin-top:6px}
.term.up{color:#35e0c8}.term.down{color:#ff6b6b}
.term.flat{color:var(--muted);font-weight:500;font-size:11.5px}
.notif-alert{cursor:pointer}
.notif-alert:hover{background:rgba(255,255,255,.04)}
.notif-alert .notif-thumb{display:flex;align-items:center;justify-content:center;font-size:20px}
.pocket.empty:hover .plus{opacity:.7}
.pocket:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card{position:absolute;inset:5px;border-radius:7px;overflow:hidden;transform-style:preserve-3d;box-shadow:0 6px 16px -6px rgba(0,0,0,.7);animation:seat .5s cubic-bezier(.2,.9,.25,1.1);transition:transform .12s ease-out}
@keyframes seat{0%{transform:translateY(-120%) scale(.9) rotate(-4deg);opacity:0}60%{transform:translateY(4%) scale(1.02)}100%{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.card{animation:none}}
.card img{width:100%;height:100%;object-fit:cover;display:block}
.card .ph{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:6px}
.card .ph .nm{font-family:var(--display);font-weight:600;font-size:9px;color:#fff;text-shadow:0 1px 2px #000}
.card .ph .nm small{display:block;color:#cfd3df;font-weight:400}
.card .fx{position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .25s;z-index:2;background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.5) 45%,transparent 62%),repeating-linear-gradient(0deg,rgba(255,0,150,.35),rgba(0,231,213,.35) 6px,rgba(110,123,255,.35) 12px,rgba(255,214,79,.35) 18px);background-size:200% 200%,180% 180%;background-position:var(--hx,50%) var(--hy,50%),var(--hx,50%) var(--hy,50%);mix-blend-mode:color-dodge;filter:brightness(1.05)}
.card.holo .fx{opacity:.32}
.card.holo:hover .fx{opacity:.6}
.flash{position:absolute;inset:5px;border-radius:7px;pointer-events:none;background:var(--holo);opacity:0;animation:flash .55s ease;z-index:4}
@keyframes flash{20%{opacity:.8}100%{opacity:0}}
.pocket.wanted .card{filter:grayscale(1) brightness(.62) contrast(.9);opacity:.62;animation:none}
.pocket.wanted .card .fx{opacity:0!important}
.pocket.wanted::after{content:"desejada";position:absolute;bottom:6px;left:50%;transform:translateX(-50%);z-index:5;font-size:8px;font-family:var(--display);font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:20px;color:#fff;background:var(--holo);box-shadow:0 2px 8px rgba(0,0,0,.5)}
.pocket.wanted{border-style:dashed;border-color:rgba(110,123,255,.5)}
.clear{position:absolute;top:3px;right:3px;z-index:9;width:18px;height:18px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:11px;cursor:pointer;opacity:0;transition:.15s;display:grid;place-items:center}
.pocket:hover .clear{opacity:1}
.pagenav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:22px}
.pagenav>button{width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;font-size:16px;transition:.15s}
.pagenav>button:hover:not(:disabled){background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.25)}
.pagenav>button:disabled{opacity:.3;cursor:default}
.pagenav .ind{font-family:var(--display);font-size:13.5px;color:var(--muted)}
.pagenav .ind b{color:var(--text)}
.pagenav .addpg{width:auto;padding:0 15px;height:40px;border:1px dashed var(--line);border-radius:11px;background:transparent;color:var(--muted);font-family:var(--display);font-weight:600;font-size:12.5px;cursor:pointer;display:none;align-items:center;gap:6px;transition:.15s}
.pagenav .addpg.show{display:inline-flex}
.pagenav .addpg:hover{color:var(--text);border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.04)}
/* SEARCH */
.scrim{position:fixed;inset:0;background:rgba(8,9,13,.6);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:.22s;z-index:40}
.scrim.on{opacity:1;pointer-events:auto}
.panel{position:fixed;z-index:50;right:22px;top:50%;transform:translateY(-50%) scale(.96);width:400px;max-width:calc(100vw - 32px);background:linear-gradient(180deg,#20232f,#191c25);border:1px solid var(--line);border-radius:18px;box-shadow:0 40px 90px -30px #000;opacity:0;pointer-events:none;transition:.22s;overflow:hidden}
.panel.on{opacity:1;pointer-events:auto;transform:translateY(-50%) scale(1)}
.panel .ph2{padding:16px 18px 0}
.panel .ph2 h3{margin:0 0 3px;font-family:var(--display);font-size:15px;font-weight:600}
.panel .ph2 p{margin:0 0 14px;font-size:12px;color:var(--muted)}
.toggle{display:flex;background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:11px;padding:4px;gap:4px}
.toggle button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;border:0;background:transparent;color:var(--muted);font-family:var(--display);font-weight:600;font-size:13px;padding:9px;border-radius:8px;cursor:pointer;transition:.16s}
.toggle button.on{background:var(--accent);color:#fff;box-shadow:0 4px 12px -4px rgba(110,123,255,.8)}
.toggle button svg{width:15px;height:15px}
.searchbox{margin:14px 18px 4px;position:relative}
.searchbox input{width:100%;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:11px;color:var(--text);font-family:var(--body);font-size:14px;padding:12px 14px 12px 40px;outline:none;transition:.16s}
.searchbox input:focus{border-color:var(--accent)}
.searchbox .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);width:16px;height:16px}
.hint{margin:8px 18px 4px;font-size:11.5px;color:var(--muted)}
.results{max-height:320px;overflow-y:auto;padding:6px 12px 14px;margin-top:6px}
.res{display:flex;align-items:center;gap:12px;padding:8px;border-radius:11px;transition:.13s}
.res:hover{background:rgba(255,255,255,.045)}
.res .thumb{width:40px;height:56px;border-radius:5px;flex:none;overflow:hidden;background:#2a2e3a;box-shadow:0 3px 8px -3px rgba(0,0,0,.7)}
.res .thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* verso do MyBinder: aparece atrás de qualquer imagem de carta.
Se a arte carregar, ela cobre; se não existir, o verso fica visível. */
.sem-arte{
background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20240%20336%22%3E%20%3Cdefs%3E%20%3ClinearGradient%20id%3D%22f%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2372CFDC%22%2F%3E%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%238979F8%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23E292D9%22%2F%3E%20%3C%2FlinearGradient%3E%20%3ClinearGradient%20id%3D%22b%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23232733%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23161922%22%2F%3E%20%3C%2FlinearGradient%3E%20%3ClinearGradient%20id%3D%22lgA%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%22.2%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2372CFDC%22%2F%3E%3Cstop%20offset%3D%22.52%22%20stop-color%3D%22%238979F8%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23E292D9%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22lgB%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23B77B93%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ABAA9B%22%2F%3E%3C%2FlinearGradient%3E%20%3C%2Fdefs%3E%20%3Crect%20width%3D%22240%22%20height%3D%22336%22%20rx%3D%2214%22%20fill%3D%22url%28%23b%29%22%2F%3E%20%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%22220%22%20height%3D%22316%22%20rx%3D%229%22%20fill%3D%22none%22%20stroke%3D%22rgba%28255%2C255%2C255%2C.10%29%22%20stroke-width%3D%222%22%2F%3E%20%3Crect%20x%3D%2220%22%20y%3D%2220%22%20width%3D%22200%22%20height%3D%22296%22%20rx%3D%226%22%20fill%3D%22none%22%20stroke%3D%22rgba%28255%2C255%2C255%2C.05%29%22%2F%3E%20%3Ccircle%20cx%3D%22120%22%20cy%3D%22152%22%20r%3D%2252%22%20fill%3D%22none%22%20stroke%3D%22url%28%23f%29%22%20stroke-width%3D%223%22%20opacity%3D%22.85%22%2F%3E%20%3Cg%20transform%3D%22translate%28120%2C152%29%20scale%280.10729%29%20translate%28-399.5%2C-399.5%29%22%3E%3Crect%20x%3D%22300%22%20y%3D%2272%22%20width%3D%22377%22%20height%3D%22657%22%20rx%3D%22163%22%20fill%3D%22url%28%23lgB%29%22%2F%3E%3Crect%20x%3D%22122%22%20y%3D%2246%22%20width%3D%22447%22%20height%3D%22707%22%20rx%3D%2280%22%20fill%3D%22url%28%23lgA%29%22%2F%3E%3C%2Fg%3E%20%3Ctext%20x%3D%22120%22%20y%3D%22246%22%20text-anchor%3D%22middle%22%20font-family%3D%22Space%20Grotesk%2Csystem-ui%2Csans-serif%22%20font-size%3D%2215%22%20font-weight%3D%22700%22%20letter-spacing%3D%223%22%20fill%3D%22rgba%28255%2C255%2C255%2C.42%29%22%3EMYBINDER%3C%2Ftext%3E%20%3Ctext%20x%3D%22120%22%20y%3D%22268%22%20text-anchor%3D%22middle%22%20font-family%3D%22Space%20Grotesk%2Csystem-ui%2Csans-serif%22%20font-size%3D%2210%22%20letter-spacing%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C.22%29%22%3ESEM%20ARTE%20NO%20CATALOGO%3C%2Ftext%3E%20%3C%2Fsvg%3E");
background-size:cover;background-position:center;background-repeat:no-repeat}
.res .thumb{position:relative}
.wish-img{position:relative}
.res .meta{flex:1;min-width:0}
.res .pop{margin-left:7px;font-size:10.5px;font-weight:700;color:var(--accent-2);vertical-align:middle}
.res .meta .nm{font-weight:600;font-size:13.5px;font-family:var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res .meta .st{font-size:11px;color:var(--muted);margin-top:1px}
.res .meta .st b{color:var(--accent-2);font-family:var(--display)}
.res .acts{display:flex;gap:6px}
.res .acts button{border:1px solid var(--line);background:transparent;color:var(--text);font-size:11.5px;padding:6px 10px;border-radius:8px;cursor:pointer;font-weight:600;font-family:var(--display);transition:.14s}
.res .acts .have{background:var(--accent);border-color:var(--accent);color:#fff}
.res .acts .have:hover{filter:brightness(1.1)}
.res .acts .want:hover{border-color:var(--accent);color:var(--accent-2)}
.state{padding:26px 18px;text-align:center;color:var(--muted);font-size:13px;line-height:1.5}
.state.err{color:#ffb4b4}
.spin{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.15);border-top-color:var(--accent);margin:0 auto 10px;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.robadge{font-size:12.5px;color:var(--muted);font-weight:500}
.binder:not(.readonly) .robadge{display:none}
.binder.readonly #back,.binder.readonly #shareBtn,.binder.readonly #valueBtn,.binder.readonly #suggestBtn,.binder.readonly #artBtn,.binder.readonly .cfgwrap,.binder.readonly .pagenav .addpg{display:none}
.binder:not(.readonly) #roCta{display:none}
.binder.readonly .pocket{cursor:default}
.sharelink{display:flex;gap:8px}
.sharelink .nameinput{flex:1;font-size:12.5px}
#shareBtn svg{width:13px;height:13px}
.detail{position:fixed;z-index:60;top:50%;left:50%;transform:translate(-50%,-48%) scale(.97);width:420px;max-width:calc(100vw - 28px);max-height:92vh;overflow-y:auto;background:linear-gradient(180deg,#1c1f29,#14151b);border:1px solid var(--line);border-radius:20px;box-shadow:0 50px 100px -30px #000;opacity:0;pointer-events:none;transition:.22s}
.detail.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.det-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;background:linear-gradient(#1c1f29,rgba(28,31,41,.9));backdrop-filter:blur(6px);z-index:2}
.det-close{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;font-size:16px;flex:none}
.det-close:hover{background:rgba(255,255,255,.05)}
.det-title{font-family:var(--display);font-weight:600;font-size:15px;text-align:center;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.det-body{padding:4px 18px 24px}
.det-card{display:flex;justify-content:center;margin:6px 0 14px}
.det-card img{width:62%;max-width:230px;border-radius:10px;box-shadow:0 22px 46px -18px #000;background:#22252f}
.det-sub{text-align:center;color:var(--muted);font-size:13px;margin-bottom:16px;font-family:var(--display)}
.det-variants{display:flex;gap:8px;justify-content:center;margin-bottom:18px;flex-wrap:wrap}
.det-variants button{border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--muted);font-family:var(--display);font-weight:600;font-size:12.5px;padding:8px 14px;border-radius:20px;cursor:pointer;transition:.15s}
.det-variants button.on{border-color:var(--accent);background:rgba(110,123,255,.12);color:#fff}
.det-variants button:disabled{cursor:default}
.det-sec-lab{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:600;margin:0 0 8px;display:flex;align-items:center;gap:8px}
.det-live{display:inline-flex;align-items:center;gap:5px;background:#3a1520;color:#ff6b81;font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:20px;letter-spacing:.05em;text-transform:uppercase}
.det-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#ff4d67;box-shadow:0 0 6px #ff4d67}
.det-price-box{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:16px}
.det-price-box .val{font-family:var(--display);font-weight:700;font-size:24px}
.det-price-box .chg{font-size:12.5px;font-weight:600;margin-top:4px}
.det-price-box .chg.up{color:#4ade80}.det-price-box .chg.down{color:#ff7a90}
.det-price-box .src{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.4}
.det-status{display:flex;gap:8px;margin-bottom:16px}
.det-status button{flex:1;border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--muted);font-family:var(--display);font-weight:600;font-size:13px;padding:10px;border-radius:11px;cursor:pointer;transition:.15s}
.det-status button.on{border-color:var(--accent);background:rgba(110,123,255,.12);color:#fff}
.det-actions{display:flex;gap:8px}
.det-actions button{flex:1;border:1px solid var(--line);background:transparent;color:var(--text);font-family:var(--display);font-weight:600;font-size:13px;padding:11px;border-radius:11px;cursor:pointer;transition:.15s}
.det-actions .danger{color:#ff7a90;border-color:rgba(255,122,144,.3)}
.det-actions button:hover{background:rgba(255,255,255,.05)}
.det-trade-note{font-size:12.5px;color:var(--muted);line-height:1.5;background:rgba(110,123,255,.08);border:1px solid rgba(110,123,255,.25);border-radius:11px;padding:12px 14px}
/* ===== barra de topo: 5 alvos, o resto em menus ===== */
/* ===== resumo da home: os quatro números que fazem abrir o app ===== */
.dash-falha{background:rgba(255,107,125,.1);border:1px solid rgba(255,107,125,.32);color:#FFB3BD;
border-radius:12px;padding:11px 14px;font-size:13px;line-height:1.5;margin-bottom:16px;text-align:left}
.resumo{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:26px}
.rcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:15px 16px;
cursor:pointer;transition:.15s;text-align:left;font-family:var(--body);color:var(--text)}
.rcard:hover{border-color:rgba(255,255,255,.2);background:var(--sheet)}
.rlab{font-size:12.5px;color:var(--muted);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.rlab svg{width:14px;height:14px;flex:none}
.rnum{font-family:var(--display);font-weight:700;font-size:25px;letter-spacing:-.5px;line-height:1.1}
.rsub{font-size:12.5px;color:var(--muted);margin-top:4px}
.rsub.up{color:#35E0C8}.rsub.down{color:#FF6B7D}.rsub.act{color:var(--accent)}
.rnum.dim{color:var(--muted);font-size:21px}
@media(max-width:520px){.resumo{grid-template-columns:1fr 1fr;gap:10px}.rcard{padding:13px}.rnum{font-size:21px}}
.topnav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.topnav svg{width:18px;height:18px;flex:none}
.navprimary{border:0;background:var(--accent);color:#fff;font-family:var(--display);font-weight:600;
font-size:13px;padding:9px 16px;border-radius:20px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:.15s}
.navprimary:hover{filter:brightness(1.12)}
.navmenu{position:relative;display:inline-flex}
.navtrigger{border:0;background:transparent;color:var(--muted);font-family:var(--display);font-weight:600;
font-size:13px;padding:9px 12px;border-radius:20px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:.15s}
.navtrigger svg{width:14px;height:14px;opacity:.7}
.navtrigger:hover,.navtrigger.on{color:var(--text);background:rgba(255,255,255,.06)}
/* z-index alto de propósito: a barra vive acima dos painéis em tela cheia,
e o menu precisa acompanhar. Com 60 ele ficava preso ao contexto antigo. */
.navdrop{position:absolute;top:calc(100% + 8px);left:0;z-index:8600;min-width:206px;padding:6px;
background:var(--sheet);border:1px solid var(--line);border-radius:14px;
box-shadow:0 18px 40px rgba(0,0,0,.5);display:none;flex-direction:column;gap:2px}
.navdrop.right{left:auto;right:0}
.navdrop.on{display:flex}
.navitem{border:0;background:transparent;color:var(--text);font-family:var(--body);font-size:13.5px;
padding:9px 11px;border-radius:9px;cursor:pointer;display:flex;align-items:center;gap:10px;width:100%;text-align:left;transition:.12s}
.navitem svg{color:var(--muted)}
.navitem:hover{background:rgba(255,255,255,.07)}
.navitem .propbadge{margin-left:auto}
.navsep{height:1px;background:var(--line);margin:5px 4px}
.navdot{width:7px;height:7px;border-radius:50%;background:#FF6BC1;display:none;margin-left:1px}
.navdot.on{display:inline-block}
.navspacer{flex:1;min-width:8px}
.navicon{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;background:transparent;
border:1px solid var(--line);border-radius:11px;color:var(--muted);cursor:pointer;transition:.15s;padding:0;position:relative}
.navicon:hover{color:var(--text);border-color:var(--muted);background:rgba(255,255,255,.05)}
.navicon .propbadge{position:absolute;top:-5px;right:-5px}
.navav{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#6E7BFF,#35E0C8);display:grid;
place-items:center;color:#fff;font-family:var(--display);font-weight:700;font-size:13px;border:0;cursor:pointer;overflow:hidden;padding:0}
.navav.has-img{background:none}
.navav img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:640px){
.topnav{gap:6px}
.navspacer{display:none;flex:0}
.navtrigger{padding:8px 9px}
}
.propsbtn{border:1px solid var(--line);background:transparent;color:var(--text);font-family:var(--display);font-weight:600;font-size:12.5px;padding:7px 13px;border-radius:20px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.15s}
.iconbtn{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);border-radius:11px;color:var(--muted);cursor:pointer;transition:.15s;padding:0}
.iconbtn svg{width:19px;height:19px}
.iconbtn:hover{color:var(--text);border-color:var(--muted);background:rgba(255,255,255,.05)}
.ico-sep{width:1px;height:22px;background:var(--line);margin:0 3px;display:inline-block}
.rd-card{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:12px}
.rd-img{width:66px;flex:none;aspect-ratio:.72;border-radius:8px;overflow:hidden;background:#2a2e3a}
.rd-img img{width:100%;height:100%;object-fit:cover;display:block}
.rd-body{flex:1;min-width:0}
.rd-nm{font-family:var(--display);font-weight:600;font-size:14px;margin-bottom:9px}
.rd-offers{display:flex;flex-direction:column;gap:6px}
.rd-offer{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:9px;padding:7px 10px;cursor:pointer;transition:.14s;text-align:left;width:100%}
.rd-offer:hover{border-color:var(--accent);background:rgba(110,123,255,.08)}
.rd-owner{font-size:12.5px;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-price{font-family:var(--display);font-weight:700;font-size:12.5px;color:#ffe14d}
.rd-trade{font-size:10.5px;font-weight:700;color:#4ade80;background:rgba(74,222,128,.12);padding:2px 8px;border-radius:20px}
.rd-has{font-size:10.5px;color:var(--muted)}
.sp-hero{background:linear-gradient(155deg,rgba(110,123,255,.12),rgba(74,222,128,.06));border:1px solid var(--line);border-radius:16px;padding:22px;margin-bottom:18px;text-align:center}
.sp-pctnum{font-family:var(--display);font-weight:700;font-size:40px;letter-spacing:-1px}
.sp-bar{height:10px;background:rgba(255,255,255,.08);border-radius:20px;overflow:hidden;margin:12px 0 8px}
.sp-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#4ade80);border-radius:20px;transition:width .5s}
.sp-count{font-size:12.5px;color:var(--muted)}
.sp-done{background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.3);color:#4ade80;border-radius:12px;padding:14px;text-align:center;font-weight:600;margin-bottom:18px}
.sp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:10px;padding-bottom:40px}
.sp-cell{position:relative;aspect-ratio:.72;border-radius:7px;overflow:hidden;background:#2a2e3a}
.sp-cell img{width:100%;height:100%;object-fit:cover;display:block}
.sp-miss img{filter:grayscale(1) brightness(.4)}
.sp-miss{opacity:.7}
.sp-tick{position:absolute;top:3px;right:3px;width:16px;height:16px;background:#4ade80;color:#0b0d12;border-radius:50%;font-size:10px;display:flex;align-items:center;justify-content:center;font-weight:800}
.propsbtn:hover{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.04)}
.propbadge{display:none;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--holo);color:#fff;font-size:11px;font-weight:700;align-items:center;justify-content:center}
#propList{max-width:640px}
.prop-lab{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:600;margin:18px 0 10px}
.prop-item{display:flex;gap:14px;align-items:center;background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:10px}
.prop-thumb{width:44px;height:61px;border-radius:6px;overflow:hidden;background:#2a2e3a;flex:none;box-shadow:0 3px 8px -3px rgba(0,0,0,.7)}
.prop-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.prop-body{flex:1;min-width:0}
.prop-line{font-size:13.5px;line-height:1.4}
.prop-line b{font-family:var(--display)}
.prop-sub{color:var(--muted);font-weight:400;font-size:12px}
.prop-acts{display:flex;gap:8px;margin-top:10px}
.prop-ok,.prop-no{border:1px solid var(--line);background:transparent;font-family:var(--display);font-weight:600;font-size:12.5px;padding:7px 14px;border-radius:9px;cursor:pointer;transition:.14s}
.prop-ok{background:var(--accent);border-color:var(--accent);color:#fff}
.prop-ok:hover{filter:brightness(1.1)}
.prop-no{color:var(--text)}
.prop-no:hover{border-color:#ff7a90;color:#ff7a90}
.prop-status{display:inline-block;margin-top:8px;font-size:12px;font-weight:600;font-family:var(--display)}
.prop-status.s-accepted{color:#4ade80}.prop-status.s-declined{color:#ff7a90}.prop-status.s-pending{color:var(--muted)}.prop-status.s-cancelled{color:var(--muted)}
.match-intro{max-width:640px;color:var(--muted);font-size:13.5px;line-height:1.5;margin:0 0 18px}
#matchList{max-width:640px}
.match-item{background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px}
.match-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.match-who{font-size:13.5px;line-height:1.45}
.match-who b{font-family:var(--display)}
.match-sub{color:var(--muted);font-size:12px;margin-top:2px}
.mut{color:#ffb454;font-weight:600;font-size:12px;white-space:nowrap}
.mt-open{flex:none;text-decoration:none;color:var(--accent);font-family:var(--display);font-weight:600;font-size:12.5px;border:1px solid var(--line);border-radius:9px;padding:7px 12px;transition:.15s}
.mt-open:hover{border-color:var(--accent);background:rgba(110,123,255,.08)}
.mt-thumbs{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap;align-items:center}
.mt-thumb{width:38px;height:53px;border-radius:5px;overflow:hidden;background:#2a2e3a;box-shadow:0 2px 6px -2px rgba(0,0,0,.7)}
.mt-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mt-more{color:var(--muted);font-size:12px;font-family:var(--display);font-weight:600;margin-left:2px}
.tmpl-lab{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:600;margin:12px 0 8px}
.tmpl-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--line);border-radius:11px;margin-bottom:8px;cursor:pointer;transition:.14s}
.tmpl-row:hover{border-color:var(--accent);background:rgba(110,123,255,.06)}
.tmpl-tabs{display:flex;gap:8px;margin-bottom:12px}
.tmpl-tab{flex:1;padding:9px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--muted);font-family:var(--display);font-weight:700;font-size:13px;cursor:pointer;transition:.14s}
.tmpl-tab.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.tmpl-mon-l{display:flex;align-items:center;gap:10px;min-width:0}
.tmpl-mon-l img{width:34px;height:34px;object-fit:contain;flex:none;background:radial-gradient(circle at 50% 40%,#2b2f3d,#1a1d27);border-radius:7px}
.tmpl-nm{font-family:var(--display);font-weight:600;font-size:13.5px}
.tmpl-n{color:var(--muted);font-size:12px;flex:none}
#tmplBody{max-height:50vh;overflow-y:auto}
.pocket.tmpl .card{opacity:.28;filter:grayscale(.25)}
.pocket.tmpl{outline:1px dashed rgba(255,255,255,.16);outline-offset:-4px}
.det-tmpl-hint{flex-basis:100%;font-size:12px;color:var(--muted);background:rgba(110,123,255,.08);border:1px solid rgba(110,123,255,.2);border-radius:10px;padding:9px 12px;margin-bottom:4px;line-height:1.4}
.startopts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.startopt{border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;transition:.15s}
.startopt.on{border-color:var(--accent);background:rgba(110,123,255,.08)}
.startopt b{display:block;font-family:var(--display);font-weight:600;font-size:13.5px;margin-bottom:3px}
.startopt span{font-size:11.5px;color:var(--muted);line-height:1.35}
.bprog{margin:2px 0 14px}
.bprog-top{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:6px;font-family:var(--display)}
.bprog-top b{color:var(--text)}
.bprog-bar{height:7px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden}
.bprog-bar div{height:100%;background:linear-gradient(90deg,var(--accent),#35E0C8);border-radius:6px;transition:width .4s}
#toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,20px);background:#1e212b;border:1px solid var(--line);border-radius:12px;padding:11px 15px;display:flex;align-items:center;gap:16px;box-shadow:0 20px 44px -16px #000;opacity:0;pointer-events:none;transition:.22s;
/* acima de TUDO: o Scan é 120, o PreGrade 122, a câmera guiada 130. Com
z-index 80 todo aviso caía atrás desses painéis e a tela parecia
simplesmente não responder. */
z-index:9000;max-width:calc(100vw - 32px)}
#toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#toast span{font-size:13.5px;line-height:1.45}
#toast{padding:13px 17px}
@media(min-width:700px){#toast{max-width:min(560px,calc(100vw - 32px))}}
#toast button{background:transparent;border:0;color:var(--accent);font-family:var(--display);font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap}
#savedFlag{position:fixed;bottom:20px;left:20px;background:rgba(30,33,43,.95);border:1px solid var(--line);color:var(--muted);font-size:12px;font-family:var(--display);padding:7px 12px;border-radius:20px;opacity:0;transform:translateY(6px);transition:.2s;pointer-events:none;z-index:70}
#savedFlag.on{opacity:1;transform:none}
/* O caminho rápido ganha destaque próprio: era ele que ninguém achava.
Ocupa a linha inteira, acima dos outros dois. */
.startopts{grid-template-columns:1fr 1fr}
.startopt.destaque{grid-column:1/-1;border-color:rgba(53,224,200,.45);
background:linear-gradient(120deg,rgba(53,224,200,.12),rgba(53,224,200,.04));position:relative}
.startopt.destaque.on{border-color:var(--accent-2);background:rgba(53,224,200,.16)}
.startopt.destaque i{position:absolute;top:10px;right:12px;font-style:normal;font-size:10px;
letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);font-weight:700}
@media(max-width:560px){.startopts{grid-template-columns:1fr}}
.asm{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);padding:0 4px 12px;cursor:pointer;user-select:none}
.asm input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex:none}
.asm #asmTarget{color:var(--accent);font-family:var(--display);font-weight:600;margin-left:auto}
.pocket.active{outline:2px solid var(--accent);outline-offset:2px;box-shadow:0 0 0 5px rgba(110,123,255,.14)}
.wish-count{color:var(--muted);font-size:12.5px;font-family:var(--display);margin-bottom:16px}
.wish-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:16px}
.wish-card{cursor:pointer;transition:.15s}
.wish-card:hover{transform:translateY(-3px)}
.wish-img{position:relative;aspect-ratio:.72;border-radius:8px;overflow:hidden;background:#2a2e3a;box-shadow:0 6px 16px -6px rgba(0,0,0,.6);margin-bottom:7px}
.wish-img .pricetag{left:4px;top:4px}
.wish-img img{width:100%;height:100%;object-fit:cover;display:block}
.wish-nm{font-family:var(--display);font-weight:600;font-size:12.5px;line-height:1.25}
.wish-sub{font-size:11px;color:var(--muted);margin-top:2px}
.wish-mult{display:inline-block;margin-top:4px;font-size:10px;color:var(--accent);background:rgba(110,123,255,.1);padding:2px 7px;border-radius:20px}
.val-total{font-family:var(--display);font-weight:700;font-size:30px;margin:6px 0 8px}
.val-sub{font-size:12.5px;color:var(--muted);line-height:1.45}
.val-note{font-size:11px;color:var(--muted);margin-top:12px;line-height:1.45}
.hist-box{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:16px}
.hist-svg{width:100%;height:78px;display:block}
.hist-row{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);margin-top:6px}
.hist-row.hist-v{font-family:var(--display);font-size:11px;margin-top:2px}
/* convite para instalar o app */
#pwaBar{position:fixed;left:12px;right:12px;bottom:12px;z-index:9999;display:none;
align-items:center;gap:12px;padding:12px 14px;border-radius:14px;
background:var(--sheet);border:1px solid var(--line);box-shadow:0 12px 34px rgba(0,0,0,.45)}
#pwaBar img{width:38px;height:38px;border-radius:9px;flex:0 0 auto}
#pwaBar .pwa-tx{flex:1;min-width:0}
#pwaBar .pwa-nm{font-family:var(--display);font-weight:700;font-size:13.5px}
#pwaBar .pwa-sub{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.35}
#pwaBar button{flex:0 0 auto;border:0;border-radius:10px;padding:9px 14px;cursor:pointer;
font-family:var(--display);font-weight:700;font-size:12.5px;color:#0b0d12;background:var(--accent-2)}
#pwaBar .pwa-x{background:transparent;color:var(--muted);padding:6px 8px;font-size:15px}
@media(max-width:380px){#pwaBar .pwa-sub{display:none}}
.hist-cols{display:flex;justify-content:space-between;margin-top:8px;gap:6px}
.hist-cols>div{display:flex;flex-direction:column;gap:2px;flex:1}
.hist-cols>div:nth-child(2){align-items:center;text-align:center}
.hist-cols>div:last-child{align-items:flex-end;text-align:right}
.hc-lab{font-size:10.5px;color:var(--muted)}
.hc-val{font-family:var(--display);font-size:12.5px;font-weight:700}
.hist-box .src{font-size:11px;color:var(--muted);margin-top:8px}
.det-grid{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:16px}
.det-row{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;font-size:13px}
.det-row:not(:last-child){border-bottom:1px solid var(--line)}
.det-en{display:inline-flex;align-items:center;gap:5px;font-size:12.5px}
.det-en::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--en);
box-shadow:0 0 0 1.5px rgba(255,255,255,.15) inset}
.det-k{color:var(--muted)}
.det-v{font-family:var(--display);font-weight:600;text-align:right}
@media(max-width:560px){
.detail{top:0;left:0;transform:none;width:100%;max-width:100%;height:100%;max-height:100%;border-radius:0;border:0}
.detail.on{transform:none}
.det-card img{width:70%;max-width:280px}
}
@media(max-width:820px){
.wrap{padding:16px 14px 56px}
.bhead{gap:10px}
.leaf{padding:18px}
.grid{gap:10px}
.book.single .leaf.r{padding:18px 18px 18px 32px;max-width:none}
}
@media(max-width:720px){
.setup{grid-template-columns:1fr;gap:20px}
.setup h2{font-size:27px}
.preview{max-width:240px;margin:0 auto;order:-1}
.panel{right:0;left:0;bottom:0;top:auto;transform:translateY(100%);width:100%;max-width:100%;border-radius:20px 20px 0 0;border-bottom:0}
.panel.on{transform:translateY(0)}
.results{max-height:44vh}
/* No celular a caixa de 250px presa a uma borda não cabe — saía da
tela dos dois lados. Vira painel de baixo, que é o padrão que
SEMPRE cabe: colado nas laterais com folga, altura limitada e
rolagem própria. Sobe acima da barra (8000) para não ficar por
baixo dela. */
.cfgpop{position:fixed;left:12px;right:12px;bottom:12px;top:auto;
width:auto;max-width:none;max-height:78vh;overflow:auto;
z-index:8600;transform:translateY(14px);
padding-bottom:calc(15px + env(safe-area-inset-bottom));
box-shadow:0 -20px 60px rgba(0,0,0,.7)}
.cfgpop.on{transform:none}
/* o menu da barra segue a mesma regra, pelo mesmo motivo */
.navdrop{position:fixed;left:12px;right:12px;top:auto;
bottom:calc(12px + env(safe-area-inset-bottom));
width:auto;min-width:0;max-height:70vh;overflow:auto}
.bgrid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:18px}
.libhead h2{font-size:22px}
}
@media(max-width:560px){
.wrap{padding:12px 10px 52px}
.bhead{gap:8px;margin:6px 0 14px}
.btitle{font-size:16px;gap:8px}
.btitle .back{width:32px;height:32px}
.bright{gap:6px;width:100%}
.chip{font-size:11.5px;padding:5px 9px;gap:5px}
.cfg{padding:8px}
#cfgLabel,#shareBtn span,#valueBtn span,#suggestBtn span{display:none}
.leaf{padding:12px}
.grid{gap:8px}
.book.single .leaf.r{padding:14px 12px 14px 26px}
.book.single .leaf.r::before{left:9px;width:7px}
.bgrid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:14px}
.bcap .bn{font-size:13px}
.login{margin-top:5vh}
.pagenav{gap:12px;margin-top:16px}
}
@media(hover:none){
.clear{opacity:.85}
.pocket.empty .plus{opacity:.35}
}
/* ————— segundo bloco ————— */
@page{size:A4 portrait;margin:10mm}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,sans-serif;color:#111}
.aviso{font-size:11px;color:#444;margin:0 0 6mm;line-height:1.5}
.aviso b{color:#000}
.folha{display:flex;flex-wrap:wrap;gap:6mm}
.peca{position:relative;width:${LW}mm;height:${LH}mm;page-break-inside:avoid}
.peca img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* marcas de corte: indicam os 63×88 mm dentro da sangria */
.m{position:absolute;width:4mm;height:4mm;pointer-events:none}
.m:before,.m:after{content:"";position:absolute;background:#000}
.m:before{width:4mm;height:.2mm}
.m:after{width:.2mm;height:4mm}
.tl{left:${SANGRIA}mm;top:${SANGRIA}mm;transform:translate(-4mm,-4mm)}
.tl:before{bottom:0;right:0}.tl:after{bottom:0;right:0}
.tr{right:${SANGRIA}mm;top:${SANGRIA}mm;transform:translate(4mm,-4mm)}
.tr:before{bottom:0;left:0}.tr:after{bottom:0;left:0}
.bl{left:${SANGRIA}mm;bottom:${SANGRIA}mm;transform:translate(-4mm,4mm)}
.bl:before{top:0;right:0}.bl:after{top:0;right:0}
.br{right:${SANGRIA}mm;bottom:${SANGRIA}mm;transform:translate(4mm,4mm)}
.br:before{top:0;left:0}.br:after{top:0;left:0}
@media print{.aviso{display:none}}
/* ===== tela de planos ===== */
.planos{position:fixed;inset:0;z-index:8800;background:rgba(6,7,10,.86);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
display:none;overflow:auto;
padding:calc(20px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom))}
.planos.on{display:block}
.planos-in{max-width:460px;margin:0 auto;position:relative}
.planos-x{position:absolute;right:0;top:-4px;width:34px;height:34px;border-radius:50%;
background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--text);
font-size:14px;cursor:pointer}
.planos-nota{text-align:center;font-size:11.5px;color:var(--muted);margin-top:16px;line-height:1.5}
.plano{background:var(--sheet);border:1px solid var(--line);border-radius:16px;
padding:16px;margin-bottom:12px}
/* o plano sugerido ganha destaque: a pessoa chegou aqui por um limite
específico, e é esse o plano que resolve o problema dela */
.plano.forte{border-color:var(--accent-2);box-shadow:0 0 0 1px rgba(53,224,200,.25)}
.plano.meu{opacity:.72}
.plano-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.plano-top b{font-family:var(--display);font-weight:700;font-size:17px}
.plano-top span{font-family:var(--display);font-weight:800;font-size:19px;color:var(--accent-2)}
.plano-top small{font-size:11px;font-weight:500;color:var(--muted);margin-left:2px}
.plano ul{list-style:none;margin:0 0 14px;padding:0}
.plano li{font-size:13px;color:var(--muted);padding:5px 0 5px 20px;position:relative;line-height:1.4}
.plano li::before{content:"\2713";position:absolute;left:0;color:var(--accent-2);font-weight:700}
.plano-meu{text-align:center;font-size:12.5px;color:var(--accent-2);font-weight:600;padding:8px 0}
.planos-teste{background:rgba(53,224,200,.1);border:1px solid rgba(53,224,200,.4);
border-radius:12px;padding:12px 14px;margin-bottom:14px;font-size:12.5px;
color:var(--accent-2);line-height:1.5}
/* ===== Bins ===== */
.bins-saldo{text-align:center;font-family:var(--display);font-size:15px;
color:var(--muted);margin-bottom:16px}
.bins-saldo b{font-size:26px;color:var(--accent-2);font-weight:800;
font-variant-numeric:tabular-nums}
.pacote{display:grid;grid-template-columns:1fr auto;gap:2px 12px;width:100%;
background:var(--sheet);border:1px solid var(--line);border-radius:14px;
padding:14px 16px;margin-bottom:10px;cursor:pointer;text-align:left;
color:var(--text);font-family:var(--body)}
.pacote:hover{border-color:rgba(53,224,200,.5)}
.pacote:disabled{opacity:.6;cursor:default}
.pacote b{font-family:var(--display);font-weight:700;font-size:16px}
.pacote span{font-family:var(--display);font-weight:800;font-size:17px;
color:var(--accent-2);grid-row:1/3;align-self:center}
.pacote small{font-size:11.5px;color:var(--muted)}
.planos-bin{background:rgba(255,255,255,.04);border:1px solid var(--line);
border-radius:12px;padding:13px 15px;font-size:12.5px;color:var(--muted);
line-height:1.5;margin-top:4px}
.planos-bin b{color:var(--accent-2)}
/* ===== pergunta do app, no lugar do confirm() do navegador ===== */
.pergunta{position:fixed;inset:0;z-index:9200;display:none;
align-items:flex-end;justify-content:center}
.pergunta.on{display:flex}
.pergunta-fundo{position:absolute;inset:0;background:rgba(6,7,10,.72);
-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
/* Painel de baixo no celular: é onde o polegar alcança, e é o formato que
sempre cabe. Em tela grande vai para o meio, que é onde o olho procura. */
.pergunta-cx{position:relative;width:100%;max-width:420px;margin:0 12px;
margin-bottom:calc(12px + env(safe-area-inset-bottom));
background:var(--sheet);border:1px solid var(--line);border-radius:18px;
padding:20px;box-shadow:0 -20px 60px rgba(0,0,0,.6);
animation:pergSobe .22s cubic-bezier(.2,.9,.3,1)}
@keyframes pergSobe{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}
.pergunta-cx h3{font-family:var(--display);font-weight:700;font-size:17px;
margin:0 0 8px;line-height:1.3}
.pergunta-cx p{font-size:13.5px;color:var(--muted);line-height:1.5;margin:0 0 18px}
.pergunta-bt{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pergunta-bt .pbtn{margin:0;max-width:none}
.pbtn.cinza{background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--text)}
/* vermelho só onde algo some para sempre */
.pbtn.perigo{background:rgba(255,107,107,.16);border:1px solid rgba(255,107,107,.5);
color:#ff8a8a}
@media(min-width:560px){
.pergunta{align-items:center}
.pergunta-cx{margin-bottom:0}
}
@media(prefers-reduced-motion:reduce){.pergunta-cx{animation:none}}
/* ===== BARRA DE BAIXO — menu principal no celular =====
Regra de tamanho: cada botão tem 56px de altura de toque. Abaixo disso
o dedo erra, e errar num menu é pior do que em qualquer outro lugar,
porque a pessoa vai para a tela errada e precisa voltar. */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:8300;display:none;
background:rgba(12,14,20,.94);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
border-top:1px solid var(--line);
padding-bottom:env(safe-area-inset-bottom);
grid-template-columns:repeat(5,1fr)}
body.tem-tabbar .tabbar{display:grid}
/* nas telas imersivas (câmera) a barra sai: ali o enquadramento é tudo */
body.imersivo .tabbar{display:none !important}
.tab{position:relative;background:none;border:0;cursor:pointer;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:4px;padding:9px 2px 7px;min-height:56px;
color:var(--muted);font-family:var(--body);font-size:10.5px;font-weight:600;
-webkit-tap-highlight-color:transparent}
.tab svg{width:23px;height:23px}
.tab.on{color:var(--accent-2)}
.tab:active{opacity:.6}
/* O Escanear sobe e ganha círculo: é a função central do app, e no menu
antigo ela era um item igual aos outros, perdido numa lista. */
.tab-meio{padding-top:0}
.tab-circulo{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
margin-top:-20px;margin-bottom:1px;
background:linear-gradient(150deg,var(--accent-2),#26b9a5);
color:#06231f;box-shadow:0 8px 20px -6px rgba(53,224,200,.7),
0 0 0 5px rgba(12,14,20,.94)}
.tab-circulo svg{width:26px;height:26px}
.tab-meio.on .tab-circulo{box-shadow:0 8px 26px -4px rgba(53,224,200,.9),
0 0 0 5px rgba(12,14,20,.94)}
/* pontinho de aviso, para propostas de troca esperando */
.tab-ponto{position:absolute;top:8px;right:calc(50% - 18px);width:8px;height:8px;
border-radius:50%;background:#ff6b6b;display:none}
.tab-ponto.on{display:block}
/* O conteúdo precisa de espaço, senão a barra cobre o fim de cada tela. */
body.tem-tabbar .wrap{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
body.tem-tabbar .gradefull,body.tem-tabbar .scanfull{
padding-bottom:calc(78px + env(safe-area-inset-bottom))}
/* No celular o menu de topo perde os itens de navegação: eles agora moram
embaixo. Ficam só a marca e o sino, que são estado, não caminho. */
@media(max-width:720px){
body.tem-tabbar .navmenu,
body.tem-tabbar #scanHome{display:none}
body.tem-tabbar .libhead{padding:8px 0 10px}
}
@media(prefers-reduced-motion:reduce){.tab:active{opacity:1}}
/* ===== TEXTO PRETO SOBRE FUNDO PRETO — correção de base =====
No navegador do computador, com o sistema em tema escuro, os elementos
sem cor declarada herdavam um padrão claro e tudo parecia certo. Dentro
do app Android o WebView usa o padrão CLARO: texto preto sobre o nosso
fundo escuro, invisível.
`color-scheme:dark` é a raiz do problema: ele avisa o navegador que a
página é escura, e todos os controles nativos (campos, listas, barras de
rolagem, seleção de texto) se ajustam sozinhos. */
:root{color-scheme:dark}
/* Elementos de formulário NÃO herdam cor sozinhos — precisam de declaração
explícita, senão voltam ao preto do sistema. `select`, `option` e
`textarea` não tinham NENHUMA regra no app. */
input,select,textarea,button,optgroup{
color:var(--text);
font-family:var(--body)}
select,option,optgroup{
background:var(--sheet);
color:var(--text)}
textarea{background:#0e1017;border:1px solid var(--line);border-radius:11px;padding:12px 14px}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
/* Rede de segurança: qualquer texto que ainda venha preto do padrão do
sistema passa a herdar a cor do app. Não sobrepõe nada que já declare
cor própria, porque é seletor de baixa força. */
h1,h2,h3,h4,h5,h6,p,li,td,th,label,span,div,a,small,b,strong,em{color:inherit}
body{color:var(--text)}
/* Datas e horas no Android abrem controle nativo com ícone escuro */
input[type=date],input[type=time],input[type=datetime-local]{color-scheme:dark}
/* ===== PAINÉIS: janela flutuante vira folha de baixo no app =====
O `.panel` nasceu como janela de 400px colada na direita da tela — jeito
de computador. No celular isso parece "abriu outra janela", que foi
exatamente a leitura de quem usou.
Já existia uma regra transformando em folha de baixo, mas só até 720px.
O Fold DESDOBRADO passa disso e caía na versão de desktop. Dentro do app
nativo o certo é folha de baixo SEMPRE, independentemente da largura —
quem está num aplicativo não espera janelas soltas. */
body.tem-tabbar .panel{
right:0; left:0; bottom:0; top:auto;
transform:translateY(100%);
width:100%; max-width:100%;
border-radius:20px 20px 0 0; border-bottom:0;
/* acima da barra de baixo (8300), abaixo do toast (9000) */
z-index:8400;
max-height:88vh; overflow:auto;
padding-bottom:env(safe-area-inset-bottom)}
body.tem-tabbar .panel.on{transform:translateY(0)}
/* O fundo escurecido tem que cobrir a barra de baixo também, senão a
pessoa toca numa aba achando que está fora do painel e navega sem
querer com o painel aberto por cima. */
body.tem-tabbar .scrim{z-index:8350}
/* Em tela larga de VERDADE (computador) nada muda: lá a janela flutuante
é o comportamento certo, e o app tambem roda no navegador. */
@media(min-width:900px) and (pointer:fine){
body.tem-tabbar .panel{
right:22px; left:auto; top:50%; bottom:auto;
transform:translateY(-50%) scale(.96);
width:400px; max-width:calc(100vw - 32px);
border-radius:18px; max-height:none}
body.tem-tabbar .panel.on{transform:translateY(-50%) scale(1)}
}
/* ===== ITEM 3: TEXTO LEGÍVEL NO CELULAR =====
Eram 113 lugares com fonte entre 10 e 11,5px — herança de tela de
computador, onde ela fica a 60cm dos olhos. No celular a distância cai
pela metade e os pixels são muito menores.
Piso de 12px, aplicado SÓ dentro do app (`body.tem-tabbar`), para não
mexer no visual de quem usa no computador. Gerado a partir das regras
existentes, então nenhuma foi esquecida.
*/
body.tem-tabbar #pwaBar .pwa-sub{font-size:12.9px}
body.tem-tabbar .ab-sub{font-size:12.9px}
body.tem-tabbar .alert-hint{font-size:12.9px}
body.tem-tabbar .alert-quota{font-size:12.0px}
body.tem-tabbar .art-hint{font-size:12.3px}
body.tem-tabbar .art-rodape-sub{font-size:12.3px}
body.tem-tabbar .art-rodape-tit{font-size:12.0px}
body.tem-tabbar .art-sub{font-size:12.9px}
body.tem-tabbar .art-voto .vt-sub{font-size:12.0px}
body.tem-tabbar .art-voto{font-size:12.9px}
body.tem-tabbar .aviso{font-size:12.3px}
body.tem-tabbar .bib-item .joia{font-size:12.0px}
body.tem-tabbar .bib-item .uso{font-size:12.0px}
body.tem-tabbar .card .ph .nm{font-size:12.0px}
body.tem-tabbar .cf-abrir{font-size:12.0px}
body.tem-tabbar .cf-mini-etq i{font-size:12.0px}
body.tem-tabbar .cf-mini-topo{font-size:12.0px}
body.tem-tabbar .cf-sel b{font-size:12.9px}
body.tem-tabbar .cf-sel{font-size:12.0px}
body.tem-tabbar .cfgpop .lab{font-size:12.0px}
body.tem-tabbar .cfgpop .warn{font-size:12.0px}
body.tem-tabbar .chat-time{font-size:12.0px}
body.tem-tabbar .clear{font-size:12.3px}
body.tem-tabbar .cond-chip[data-tip]:hover::after{font-size:12.3px}
body.tem-tabbar .cond-desc{font-size:12.9px}
body.tem-tabbar .cond-lab{font-size:12.3px}
body.tem-tabbar .criando .cr-tx{font-size:12.0px}
body.tem-tabbar .det-live{font-size:12.0px}
body.tem-tabbar .det-price-box .src{font-size:12.3px}
body.tem-tabbar .det-sec-lab{font-size:12.3px}
body.tem-tabbar .dv-card b{font-size:12.3px}
body.tem-tabbar .dv-card small{font-size:12.3px}
body.tem-tabbar .dv-moeda{font-size:12.9px}
body.tem-tabbar .dv-quando{font-size:12.3px}
body.tem-tabbar .dv-topo{font-size:12.9px}
body.tem-tabbar .fc-hint{font-size:12.9px}
body.tem-tabbar .fc-lab{font-size:12.3px}
body.tem-tabbar .field .lab{font-size:12.9px}
body.tem-tabbar .flag-chip[data-tip]:hover::after{font-size:12.3px}
body.tem-tabbar .friend-code2{font-size:12.3px}
body.tem-tabbar .friend-del{font-size:12.9px}
body.tem-tabbar .friend-pending{font-size:12.9px}
body.tem-tabbar .gr-parte span{font-size:12.3px}
body.tem-tabbar .gr-slot .lab{font-size:12.9px}
body.tem-tabbar .hc-lab{font-size:12.0px}
body.tem-tabbar .hide-card.off .hide-img::after{font-size:12.0px}
body.tem-tabbar .hide-eye{font-size:12.3px}
body.tem-tabbar .hint{font-size:12.9px}
body.tem-tabbar .hist-box .src{font-size:12.3px}
body.tem-tabbar .hist-row.hist-v{font-size:12.3px}
body.tem-tabbar .hist-row{font-size:12.0px}
body.tem-tabbar .liga-range{font-size:12.3px}
body.tem-tabbar .linkbtn{font-size:12.9px}
body.tem-tabbar .login .mock{font-size:12.3px}
body.tem-tabbar .lv-nm{font-size:12.3px}
body.tem-tabbar .lv-pg{font-size:12.0px}
body.tem-tabbar .mbtip-st{font-size:12.0px}
body.tem-tabbar .mini-card span{font-size:12.3px}
body.tem-tabbar .mini-cond{font-size:12.0px}
body.tem-tabbar .mini-photo{font-size:12.0px}
body.tem-tabbar .mkt-photo{font-size:12.3px}
body.tem-tabbar .ou-linha{font-size:12.9px}
body.tem-tabbar .ou-sub{font-size:12.9px}
body.tem-tabbar .pacote small{font-size:12.9px}
body.tem-tabbar .pdex-num{font-size:12.0px}
body.tem-tabbar .pe-legenda{font-size:12.3px}
body.tem-tabbar .pe-novo{font-size:12.0px}
body.tem-tabbar .pe-tag{font-size:12.0px}
body.tem-tabbar .pe-toque{font-size:12.0px}
body.tem-tabbar .pg-cel.sai span{font-size:12.0px}
body.tem-tabbar .pg-opt small{font-size:12.9px}
body.tem-tabbar .pgc-it small{font-size:12.9px}
body.tem-tabbar .photo-add span{font-size:12.0px}
body.tem-tabbar .photo-rm{font-size:12.3px}
body.tem-tabbar .pick-item span{font-size:12.0px}
body.tem-tabbar .pk-badge{font-size:12.0px}
body.tem-tabbar .pk-tira small{font-size:12.0px}
body.tem-tabbar .pl-card span{font-size:12.9px}
body.tem-tabbar .pl-empty{font-size:12.9px}
body.tem-tabbar .pl-info span{font-size:12.9px}
body.tem-tabbar .plan-pill{font-size:12.3px}
body.tem-tabbar .plano-top small{font-size:12.3px}
body.tem-tabbar .planos-nota{font-size:12.9px}
body.tem-tabbar .pocket.wanted::after{font-size:12.0px}
body.tem-tabbar .previa-cel span{font-size:12.0px}
body.tem-tabbar .previa-voto .pv-sub{font-size:12.0px}
body.tem-tabbar .pricetag{font-size:12.0px}
body.tem-tabbar .prop-lab{font-size:12.3px}
body.tem-tabbar .propbadge{font-size:12.3px}
body.tem-tabbar .pslot-lab{font-size:12.3px}
body.tem-tabbar .qtybadge{font-size:12.0px}
body.tem-tabbar .rd-has{font-size:12.0px}
body.tem-tabbar .rd-trade{font-size:12.0px}
body.tem-tabbar .rep{font-size:12.9px}
body.tem-tabbar .res .acts button{font-size:12.9px}
body.tem-tabbar .res .meta .st{font-size:12.3px}
body.tem-tabbar .res .pop{font-size:12.0px}
body.tem-tabbar .rev-marca small{font-size:12.0px}
body.tem-tabbar .rev-marca{font-size:12.0px}
body.tem-tabbar .rev-nm{font-size:12.0px}
body.tem-tabbar .sc-desfazer{font-size:12.9px}
body.tem-tabbar .sc-jogo span{font-size:12.0px}
body.tem-tabbar .sc-langgrid small{font-size:12.0px}
body.tem-tabbar .sc-langmenu .tit{font-size:12.3px}
body.tem-tabbar .sc-tira .it small{font-size:12.3px}
body.tem-tabbar .sc-tira .it-x{font-size:12.3px}
body.tem-tabbar .slab-data i{font-size:12.0px}
body.tem-tabbar .slab-nm b{font-size:12.0px}
body.tem-tabbar .slab-nm{font-size:12.0px}
body.tem-tabbar .slab-nota i{font-size:12.0px}
body.tem-tabbar .slab-pe{font-size:12.0px}
body.tem-tabbar .slab-rod{font-size:12.3px}
body.tem-tabbar .slab-topo{font-size:12.3px}
body.tem-tabbar .slab3d-dica button{font-size:12.9px}
body.tem-tabbar .slab3d-dica{font-size:12.9px}
body.tem-tabbar .slabsel b{font-size:12.9px}
body.tem-tabbar .sp-tick{font-size:12.0px}
body.tem-tabbar .startopt span{font-size:12.9px}
body.tem-tabbar .startopt.destaque i{font-size:12.0px}
body.tem-tabbar .stepper .val small{font-size:12.0px}
body.tem-tabbar .store-go{font-size:12.9px}
body.tem-tabbar .store-sub{font-size:12.3px}
body.tem-tabbar .tab{font-size:12.0px}
body.tem-tabbar .tc-lab{font-size:12.0px}
body.tem-tabbar .tc-nm{font-size:12.3px}
body.tem-tabbar .term.flat{font-size:12.9px}
body.tem-tabbar .tmpl-lab{font-size:12.0px}
body.tem-tabbar .val-note{font-size:12.3px}
body.tem-tabbar .visopts button{font-size:12.9px}
body.tem-tabbar .voto-flut .vf-tx{font-size:12.0px}
body.tem-tabbar .wish-mult{font-size:12.0px}
body.tem-tabbar .wish-sub{font-size:12.3px}
body.tem-tabbar /* selo da carta graduada: fica no alto do bolso,body.tem-tabbar discreto */
.slabsel{font-size:12.0px}
/* ===== ITEM 5: ESQUELETO NO LUGAR DA RODINHA =====
A rodinha diz "espere". O esqueleto diz "está vindo, e vai ser assim".
A mesma espera parece mais curta, porque a pessoa já entende a forma da
tela e não fica olhando para um símbolo abstrato.
Vale onde a estrutura é PREVISÍVEL — fichário, acervo, lista de cartas.
Onde não é, a rodinha continua sendo mais honesta. */
.esq{background:linear-gradient(100deg,
rgba(255,255,255,.045) 30%,
rgba(255,255,255,.10) 50%,
rgba(255,255,255,.045) 70%);
background-size:250% 100%;
border-radius:10px;
animation:esqBrilho 1.4s ease-in-out infinite}
@keyframes esqBrilho{to{background-position:-150% 0}}
/* grade de cartas: mesma proporção do bolso, para a tela não pular
quando o conteúdo real chegar */
.esq-grade{display:grid;gap:10px;padding:4px 0}
.esq-carta{aspect-ratio:.716;border-radius:10px}
.esq-linha{height:13px;margin:8px 0}
.esq-linha.curta{width:45%}
.esq-linha.media{width:70%}
.esq-cx{background:var(--sheet);border:1px solid var(--line);
border-radius:14px;padding:14px;margin-bottom:10px}
@media(prefers-reduced-motion:reduce){.esq{animation:none}}
/* ===== ITEM 4: puxar para atualizar ===== */
.puxar{position:fixed;left:50%;top:0;z-index:8250;pointer-events:none;
/* --p vai de 0 a 1 conforme o dedo desce */
transform:translate(-50%, calc(var(--p,0) * 62px - 40px));
opacity:var(--p,0);
transition:transform .18s ease-out, opacity .18s ease-out}
.puxar-roda{display:block;width:32px;height:32px;border-radius:50%;
background:var(--sheet);border:1px solid var(--line);
box-shadow:0 6px 18px rgba(0,0,0,.5);
position:relative}
.puxar-roda::after{content:"";position:absolute;inset:8px;border-radius:50%;
border:2px solid rgba(255,255,255,.18);border-top-color:var(--accent-2);
/* enquanto se puxa, a rodinha GIRA COM O DEDO: mostra que o gesto está
sendo entendido antes de soltar */
transform:rotate(calc(var(--p,0) * 300deg))}
.puxar.pronto .puxar-roda{border-color:var(--accent-2)}
.puxar.girando{transition:none}
.puxar.girando .puxar-roda::after{animation:sp .7s linear infinite;transform:none}
@media(prefers-reduced-motion:reduce){
.puxar{transition:none}
.puxar.girando .puxar-roda::after{animation:none}}
/* ===== ITEM 10: APROVEITAR A TELA DO DOBRÁVEL =====
Desdobrado, o Fold tem quase 8 polegadas e uma proporção quase
QUADRADA. Hoje o app só estica o layout de celular: colunas largas
demais, cartas gigantes, muito espaço morto.
O gatilho NÃO é largura — celular grande também é largo. É a PROPORÇÃO:
tela quase quadrada em aparelho de toque só existe em dobrável ou
tablet. Por isso `min-aspect-ratio` junto de `pointer:coarse`. */
@media (min-width:600px) and (min-aspect-ratio:3/4) and (pointer:coarse){
/* mais fichários por linha em vez de cartões enormes */
body.tem-tabbar .bgrid{
grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
gap:20px}
/* O painel continua FOLHA DE BAIXO mesmo no dobrável.
Eu tinha feito ele virar coluna lateral aqui, para aproveitar a tela —
e isso trouxe de volta exatamente o que ele recusou: painel que parece
janela. Num app, largura de tela não justifica janela solta.
A folha só fica mais estreita e centrada. */
body.tem-tabbar .panel{
left:50%; right:auto; transform:translate(-50%,100%);
width:min(560px,100%); max-width:none;
border-radius:20px 20px 0 0}
body.tem-tabbar .panel.on{transform:translate(-50%,0)}
/* a barra de baixo não precisa da largura toda; centrada fica no
alcance do polegar em vez de espalhada nas bordas */
body.tem-tabbar .tabbar{
left:50%; right:auto; transform:translateX(-50%);
width:min(520px,100%);
border-radius:20px 20px 0 0;
border-left:1px solid var(--line);
border-right:1px solid var(--line)}
/* a Pokédex cabe com mais colunas */
body.tem-tabbar #pdexGrid{
grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
/* texto pode respirar: a tela está mais longe dos olhos que um celular */
body.tem-tabbar .wrap{max-width:900px}
}
/* ===== TELA "MAIS" — tudo que não coube na barra =====
Ao mover a navegação para a barra de baixo, eu escondi os menus do topo
e deixei DE FORA Cofre, PreGrade, Pokédex, Desejadas, Loja e Descobrir.
Cinco lugares na barra não comportam onze destinos, e o que não coube
ficou inalcançável no celular.
Esta tela é o quinto lugar: ocupa a tela inteira (não é janela), agrupa
por assunto e inclui o Perfil. */
.mais{position:fixed;inset:0;z-index:8450;background:var(--ink);
display:none;overflow:auto;
padding:calc(18px + env(safe-area-inset-top)) 16px
calc(90px + env(safe-area-inset-bottom))}
.mais.on{display:block}
.mais-in{max-width:560px;margin:0 auto}
.mais-topo{display:flex;align-items:center;justify-content:space-between;
margin-bottom:20px}
.mais-topo h3{font-family:var(--display);font-weight:800;font-size:21px;margin:0}
.mais-x{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.07);
border:1px solid var(--line);color:var(--text);font-size:15px;cursor:pointer}
.mais-lab{font-family:var(--display);font-weight:700;font-size:12px;
letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
margin:22px 0 10px}
.mais-grade{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.mais-item{display:flex;align-items:center;gap:12px;width:100%;
background:var(--sheet);border:1px solid var(--line);border-radius:14px;
padding:15px 14px;cursor:pointer;color:var(--text);
font-family:var(--body);font-size:14px;font-weight:600;text-align:left;
/* alvo grande: é uma tela de navegação, errar aqui custa uma volta */
min-height:60px}
.mais-item:active{background:rgba(255,255,255,.06)}
.mais-item svg{width:22px;height:22px;flex:none;color:var(--accent-2)}
.mais-item .mais-pt{width:8px;height:8px;border-radius:50%;background:#ff6b6b;
margin-left:auto;display:none}
.mais-item .mais-pt.on{display:block}
/* ==========================================================
SISTEMA VISUAL — a camada que faltava
==========================================================
O app tinha 44 tamanhos de fonte, 7 pesos, 20 raios de canto e 103
cores escritas na mão. Nada disso é descuido: é acúmulo. Cada tela
nasceu resolvendo o próprio problema, e ninguém decidiu o conjunto.
O efeito é o que se sente sem saber nomear — hierarquia acidental,
alinhamento vago, peso visual inconsistente. A pessoa não consegue
APRENDER a interface, porque as mesmas coisas mudam de aparência
entre telas.
Esta camada não reescreve o CSS: ela mapeia o que existe para um
sistema pequeno. Foi GERADA a partir das regras reais, então nenhuma
escapou. E vale só dentro do app — no computador o visual antigo
segue intacto, o que torna tudo reversível.
========================================================== */
body.tem-tabbar{
/* Seis papéis de texto, não 44 números soltos. Nomear é o que permite
usar com intenção: "isto é apoio", não "isto é 11,5px". */
--t-titulao:30px; --t-titulo:22px; --t-destaque:17px;
--t-corpo:15px; --t-apoio:13px; --t-legenda:12px;
/* Três raios. Vinte era o que fazia o app parecer levemente
desalinhado sem ninguém saber por quê. */
--r-p:10px; --r-m:16px; --r-g:22px;
/* Grade de 4. O espaçamento em números arbitrários (2, 7, 9, 14) é o
que tira a calma de um layout. */
--e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px;
/* UMA curva de movimento para o app inteiro. A diferença entre as
animações passa a ser a DURAÇÃO, não o temperamento — é isso que
faz várias telas parecerem um produto só. */
--curva:cubic-bezier(.32,.72,0,1);
--rapido:.18s; --normal:.28s; --lento:.42s;
/* Área mínima de toque. Não é sobre o botão parecer grande: é sobre
o dedo acertar. */
--toque:44px;
}
/* ---- tipografia: 44 tamanhos viraram 6 papéis ---- */
body.tem-tabbar .brand h1,body.tem-tabbar .libempty h3,body.tem-tabbar .stepper .val,body.tem-tabbar .btitle,body.tem-tabbar .btitle .back,body.tem-tabbar .sd-nm,body.tem-tabbar .ft-hint,body.tem-tabbar .qty-step button,body.tem-tabbar .cfgpop .mini2 button,body.tem-tabbar .ab-x,body.tem-tabbar .det-price-box .val.small,body.tem-tabbar .dv-card span,body.tem-tabbar .rev-tit,body.tem-tabbar .gr-parte b,body.tem-tabbar .sc-lang,body.tem-tabbar .pagenav>button,body.tem-tabbar .det-close,body.tem-tabbar .plano-top b,body.tem-tabbar .plano-top span,body.tem-tabbar .pacote b,body.tem-tabbar .pacote span,body.tem-tabbar .pergunta-cx h3{font-size:var(--t-destaque)}
body.tem-tabbar .brand span,body.tem-tabbar .login #authSwitch,body.tem-tabbar .login #authSwitch button,body.tem-tabbar .acct,body.tem-tabbar #mbTip,body.tem-tabbar .mbtip-h b,body.tem-tabbar .pdex-d-num,body.tem-tabbar .lb-btn,body.tem-tabbar .acct button,body.tem-tabbar .lay,body.tem-tabbar .lnk,body.tem-tabbar .chip,body.tem-tabbar .cfgpop .nameinput,body.tem-tabbar .friend-nm,body.tem-tabbar .friend-add-btn,body.tem-tabbar .notif-line,body.tem-tabbar .cfg-del,body.tem-tabbar .prop-contact,body.tem-tabbar .pbtn,body.tem-tabbar .pl-rm,body.tem-tabbar .mkt-sort,body.tem-tabbar .lv-count,body.tem-tabbar .bb-n,body.tem-tabbar .bb-act,body.tem-tabbar .bb-chip,body.tem-tabbar .bb-back,body.tem-tabbar .dash-sub,body.tem-tabbar .st-bio,body.tem-tabbar .st-cbtn,body.tem-tabbar .sd-contact,body.tem-tabbar .st-rep,body.tem-tabbar .st-contact,body.tem-tabbar .dash-row,body.tem-tabbar .cs-f,body.tem-tabbar .ft-toggle,body.tem-tabbar .ft-price>span,body.tem-tabbar .cond-chip,body.tem-tabbar .importta,body.tem-tabbar .imp-opt,body.tem-tabbar .imp-status,body.tem-tabbar .chat-msg,body.tem-tabbar .qty-lab,body.tem-tabbar .cfgpop .opt{font-size:var(--t-apoio)}
body.tem-tabbar .artfill-row,body.tem-tabbar .ab-nm,body.tem-tabbar .liga-range b,body.tem-tabbar .store-nm,body.tem-tabbar .voto-flut .vf,body.tem-tabbar .dv-faixa,body.tem-tabbar .dv-tend,body.tem-tabbar .dv-link,body.tem-tabbar .det-cond-fold>summary,body.tem-tabbar .esp-olhando,body.tem-tabbar .esc-op span,body.tem-tabbar .ac-pill,body.tem-tabbar .pk-dica,body.tem-tabbar .rev-sub,body.tem-tabbar .pgc-tit span,body.tem-tabbar .pgc-txt,body.tem-tabbar .cf-mini-etq b,body.tem-tabbar .cf-vazio,body.tem-tabbar .sf-vs .marca,body.tem-tabbar .sf-vs .marca,body.tem-tabbar .gr-slot,body.tem-tabbar .gr-porque,body.tem-tabbar .gr-porque li,body.tem-tabbar .gr-aviso,body.tem-tabbar .sc-jogo,body.tem-tabbar .sc-ocr button,body.tem-tabbar .sc-est,body.tem-tabbar .sc-tira .it b,body.tem-tabbar .sc-total,body.tem-tabbar .pg-opt,body.tem-tabbar .art-cell,body.tem-tabbar .art-nm,body.tem-tabbar .pagenav .ind,body.tem-tabbar .pagenav .addpg,body.tem-tabbar .toggle button,body.tem-tabbar .res .meta .nm,body.tem-tabbar .state,body.tem-tabbar .robadge,body.tem-tabbar .sharelink .nameinput,body.tem-tabbar .det-sub{font-size:var(--t-apoio)}
body.tem-tabbar .det-variants button,body.tem-tabbar .det-price-box .chg,body.tem-tabbar .det-status button,body.tem-tabbar .det-actions button,body.tem-tabbar .det-trade-note,body.tem-tabbar /* ===== barra de topo: 5 alvos,body.tem-tabbar o resto em menus ===== */
/* ===== resumo da home: os quatro números que fazem abrir o app ===== */
.dash-falha,body.tem-tabbar .rlab,body.tem-tabbar .rsub,body.tem-tabbar .navprimary,body.tem-tabbar .navtrigger,body.tem-tabbar .navitem,body.tem-tabbar .navav,body.tem-tabbar .propsbtn,body.tem-tabbar .rd-owner,body.tem-tabbar .rd-price,body.tem-tabbar .sp-count,body.tem-tabbar .prop-line,body.tem-tabbar .prop-ok,body.tem-tabbar .prop-no,body.tem-tabbar .match-intro,body.tem-tabbar .match-who,body.tem-tabbar .mt-open,body.tem-tabbar .tmpl-tab,body.tem-tabbar .tmpl-nm,body.tem-tabbar .startopt b,body.tem-tabbar #toast span,body.tem-tabbar #toast button,body.tem-tabbar .asm,body.tem-tabbar .wish-count,body.tem-tabbar .wish-nm,body.tem-tabbar .val-sub,body.tem-tabbar #pwaBar .pwa-nm,body.tem-tabbar #pwaBar button,body.tem-tabbar .hc-val,body.tem-tabbar .det-row,body.tem-tabbar .det-en,body.tem-tabbar .plano li,body.tem-tabbar .plano-meu,body.tem-tabbar .planos-teste,body.tem-tabbar .planos-bin,body.tem-tabbar .pergunta-cx p{font-size:var(--t-apoio)}
body.tem-tabbar .login h2,body.tem-tabbar .libhead h2,body.tem-tabbar .pf-avatar,body.tem-tabbar .bcover.newc,body.tem-tabbar .libempty .ic,body.tem-tabbar .setup h2,body.tem-tabbar .bcover.tradec span,body.tem-tabbar .bcover.searchc span,body.tem-tabbar .bcover.dashc span,body.tem-tabbar .bcover.marketc span,body.tem-tabbar .dash-total,body.tem-tabbar .st-av,body.tem-tabbar .star,body.tem-tabbar .pocket .plus,body.tem-tabbar .dv-num,body.tem-tabbar .pk-vulto::after,body.tem-tabbar .rev-num,body.tem-tabbar .pgc-conta span,body.tem-tabbar .gr-num,body.tem-tabbar .sp-pctnum,body.tem-tabbar .val-total,body.tem-tabbar .bins-saldo b{font-size:var(--t-titulao)}
body.tem-tabbar .login p,body.tem-tabbar .login .btn,body.tem-tabbar .panel-x,body.tem-tabbar .ts-title,body.tem-tabbar .pdex-count,body.tem-tabbar .bcap .bn,body.tem-tabbar .libempty p,body.tem-tabbar .setup p.lead,body.tem-tabbar .nameinput,body.tem-tabbar .cta,body.tem-tabbar .friend-av,body.tem-tabbar .dash-change,body.tem-tabbar .ft-price-in input,body.tem-tabbar .chat-head h3,body.tem-tabbar .qty-val,body.tem-tabbar .cfgpop .mini2 .v,body.tem-tabbar .alert-dir button,body.tem-tabbar .ab-head,body.tem-tabbar .previa-voto .pv,body.tem-tabbar .art-voto .vt,body.tem-tabbar .sc-menu button,body.tem-tabbar .esc-op b,body.tem-tabbar .pk-tira b,body.tem-tabbar .rev-costas span,body.tem-tabbar .cf-tit h4,body.tem-tabbar .cf-x,body.tem-tabbar .gr-cond,body.tem-tabbar .gr-porque h4,body.tem-tabbar .sc-seguir,body.tem-tabbar .card-liga-btn,body.tem-tabbar .panel .ph2 h3,body.tem-tabbar .searchbox input,body.tem-tabbar .det-title,body.tem-tabbar .rd-nm,body.tem-tabbar #pwaBar .pwa-x,body.tem-tabbar .planos-x,body.tem-tabbar /* ===== Bins ===== */
.bins-saldo,body.tem-tabbar .mais-x,body.tem-tabbar .mais-item{font-size:var(--t-corpo)}
body.tem-tabbar .login .mock,body.tem-tabbar .login .lerr,body.tem-tabbar .acct .av,body.tem-tabbar .plan-pill,body.tem-tabbar .mbtip-st,body.tem-tabbar .ts-sub,body.tem-tabbar .ts-link,body.tem-tabbar .pdex-check,body.tem-tabbar .pdex-num,body.tem-tabbar .pdex-nm,body.tem-tabbar .liga-link,body.tem-tabbar .pdex-sale,body.tem-tabbar .hide-eye,body.tem-tabbar .hide-card.off .hide-img::after,body.tem-tabbar .browhint,body.tem-tabbar .bcap .bm,body.tem-tabbar .field .lab,body.tem-tabbar .stepper .val small,body.tem-tabbar .cfg,body.tem-tabbar .cfgpop .lab,body.tem-tabbar .visopts button,body.tem-tabbar .fc-lab,body.tem-tabbar .fc-hint,body.tem-tabbar .friend-code2,body.tem-tabbar .friend-del,body.tem-tabbar .friend-pending,body.tem-tabbar .notif-sub,body.tem-tabbar .tc-lab,body.tem-tabbar .tc-nm,body.tem-tabbar .mini-cond,body.tem-tabbar .mini-photo,body.tem-tabbar .pl-info span,body.tem-tabbar .pl-card span,body.tem-tabbar .pl-empty,body.tem-tabbar .prop-warn,body.tem-tabbar #pickHint,body.tem-tabbar .pk-badge,body.tem-tabbar .pslot-lab,body.tem-tabbar .mini-card span,body.tem-tabbar .mini-empty{font-size:var(--t-legenda)}
body.tem-tabbar .pick-item span,body.tem-tabbar .mkt-photo,body.tem-tabbar .lv-pg,body.tem-tabbar .lv-nm,body.tem-tabbar .lv-selbtn,body.tem-tabbar .lv-check,body.tem-tabbar .st-meta2,body.tem-tabbar .rep,body.tem-tabbar .pricetag,body.tem-tabbar .cond-lab,body.tem-tabbar .cond-chip[data-tip]:hover::after,body.tem-tabbar .cond-desc,body.tem-tabbar .flag-chip[data-tip]:hover::after,body.tem-tabbar .photo-rm,body.tem-tabbar .photo-add span,body.tem-tabbar .chat-head p,body.tem-tabbar .chat-time,body.tem-tabbar .qtybadge,body.tem-tabbar .cfgpop .warn,body.tem-tabbar .cover .ohint,body.tem-tabbar .criando .cr-tx,body.tem-tabbar .alert-hint,body.tem-tabbar .alert-quota,body.tem-tabbar .linkbtn,body.tem-tabbar .ab-sub,body.tem-tabbar .liga-range,body.tem-tabbar .store-sub,body.tem-tabbar .store-go,body.tem-tabbar .ou-linha,body.tem-tabbar .ou-sub,body.tem-tabbar .voto-flut .vf-tx,body.tem-tabbar .bib-item .joia,body.tem-tabbar .bib-item .uso,body.tem-tabbar .pe-tag,body.tem-tabbar .pe-novo,body.tem-tabbar .pe-toque,body.tem-tabbar .pe-legenda,body.tem-tabbar .previa-cel span,body.tem-tabbar .previa-voto .pv-tx,body.tem-tabbar .previa-voto .pv-sub{font-size:var(--t-legenda)}
body.tem-tabbar .art-voto,body.tem-tabbar .art-voto .vt-sub,body.tem-tabbar .art-rodape-tit,body.tem-tabbar .art-rodape-sub,body.tem-tabbar .dv-topo,body.tem-tabbar .dv-moeda,body.tem-tabbar .dv-card b,body.tem-tabbar .dv-card small,body.tem-tabbar .dv-quando,body.tem-tabbar /* chave da etiqueta de slab: fica visível porque custa crédito a mais */
.sc-slab,body.tem-tabbar .esp-crono,body.tem-tabbar .esp-calma,body.tem-tabbar .sc-langmenu .tit,body.tem-tabbar .sc-langgrid small,body.tem-tabbar .sc-langauto,body.tem-tabbar .ac-per button,body.tem-tabbar .dash-change small,body.tem-tabbar .pk-tira small,body.tem-tabbar .rev-marca,body.tem-tabbar .rev-marca small,body.tem-tabbar .rev-nm,body.tem-tabbar .pgc-it,body.tem-tabbar .pgc-it small,body.tem-tabbar .pgc-forcar button,body.tem-tabbar .cf-tit span,body.tem-tabbar .cf-exp,body.tem-tabbar .cf-mini-topo,body.tem-tabbar .cf-mini-etq i,body.tem-tabbar .cf-abrir,body.tem-tabbar /* no celular não existe hover */
.cf-nm,body.tem-tabbar .cf-sel,body.tem-tabbar .cf-sel b,body.tem-tabbar .slab3d-dica,body.tem-tabbar .slab3d-dica button,body.tem-tabbar .slab-topo,body.tem-tabbar .slab-nm,body.tem-tabbar .slab-nm b,body.tem-tabbar .slab-data i,body.tem-tabbar .slab-nota i,body.tem-tabbar .slab-pe{font-size:var(--t-legenda)}
body.tem-tabbar .slab-rod,body.tem-tabbar .gr-slot .lab,body.tem-tabbar .gr-parte span,body.tem-tabbar .gr-nota-pe,body.tem-tabbar .sc-jogo span,body.tem-tabbar .sc-dica>span,body.tem-tabbar .sc-tira .it small,body.tem-tabbar .sc-tira .it span,body.tem-tabbar .sc-tira .it-x,body.tem-tabbar /* linha da sessão: o que já entrou e o que já custou */
.sc-sessao,body.tem-tabbar .sc-desfazer,body.tem-tabbar /* selo da carta graduada: fica no alto do bolso,body.tem-tabbar discreto */
.slabsel,body.tem-tabbar .slabsel b,body.tem-tabbar .pg-cel.sai span,body.tem-tabbar .pg-opt small,body.tem-tabbar .art-hint,body.tem-tabbar .art-sub,body.tem-tabbar .art-acts button,body.tem-tabbar .term,body.tem-tabbar .term.flat,body.tem-tabbar .card .ph .nm,body.tem-tabbar .pocket.wanted::after,body.tem-tabbar .clear,body.tem-tabbar .panel .ph2 p,body.tem-tabbar .hint,body.tem-tabbar .res .pop,body.tem-tabbar .res .meta .st,body.tem-tabbar .res .acts button,body.tem-tabbar .det-sec-lab,body.tem-tabbar .det-live,body.tem-tabbar .det-price-box .src,body.tem-tabbar .rd-trade,body.tem-tabbar .rd-has,body.tem-tabbar .sp-tick,body.tem-tabbar .propbadge,body.tem-tabbar .prop-lab,body.tem-tabbar .prop-sub,body.tem-tabbar .prop-status,body.tem-tabbar .match-sub,body.tem-tabbar .mut{font-size:var(--t-legenda)}
body.tem-tabbar .mt-more,body.tem-tabbar .tmpl-lab,body.tem-tabbar .tmpl-n,body.tem-tabbar .det-tmpl-hint,body.tem-tabbar .startopt span,body.tem-tabbar .bprog-top,body.tem-tabbar #savedFlag,body.tem-tabbar .startopt.destaque i,body.tem-tabbar .wish-sub,body.tem-tabbar .wish-mult,body.tem-tabbar .val-note,body.tem-tabbar .hist-row,body.tem-tabbar .hist-row.hist-v,body.tem-tabbar #pwaBar .pwa-sub,body.tem-tabbar .hc-lab,body.tem-tabbar .hist-box .src,body.tem-tabbar .aviso,body.tem-tabbar .planos-nota,body.tem-tabbar .plano-top small,body.tem-tabbar .pacote small,body.tem-tabbar .tab,body.tem-tabbar .mais-lab{font-size:var(--t-legenda)}
body.tem-tabbar .pdex-d-nm,body.tem-tabbar .stepper button,body.tem-tabbar .fc-code,body.tem-tabbar .tc-arrow,body.tem-tabbar .prop-mid,body.tem-tabbar .pslot-arrow,body.tem-tabbar .st-info h1,body.tem-tabbar .sd-price,body.tem-tabbar .photo-add,body.tem-tabbar .slab-nota b,body.tem-tabbar .notif-alert .notif-thumb,body.tem-tabbar .det-price-box .val,body.tem-tabbar .rnum,body.tem-tabbar .rnum.dim,body.tem-tabbar .mais-topo h3{font-size:var(--t-titulo)}
/* ---- cantos: 20 raios viraram 3 ---- */
body.tem-tabbar .brand .dot,body.tem-tabbar .login .btn,body.tem-tabbar #mbTip,body.tem-tabbar .pdex-cell,body.tem-tabbar .pdex-img,body.tem-tabbar .pdex-head img,body.tem-tabbar .liga-link,body.tem-tabbar .lb-btn,body.tem-tabbar .pdex-sale,body.tem-tabbar .hide-img,body.tem-tabbar .hide-eye,body.tem-tabbar #bgrid::-webkit-scrollbar-thumb,body.tem-tabbar .nameinput,body.tem-tabbar .lay,body.tem-tabbar .lay .mini i,body.tem-tabbar .stepper,body.tem-tabbar .cta,body.tem-tabbar .preview::before,body.tem-tabbar .pv-grid .pk,body.tem-tabbar .btitle .back,body.tem-tabbar .covswatches button,body.tem-tabbar .visopts button,body.tem-tabbar .friend-row,body.tem-tabbar .notif-thumb,body.tem-tabbar .cfg-del,body.tem-tabbar .prop-contact,body.tem-tabbar .pbtn,body.tem-tabbar .tc-img,body.tem-tabbar .mini-cond,body.tem-tabbar .mini-flag,body.tem-tabbar .tc .tc-img,body.tem-tabbar .prop-col,body.tem-tabbar .pl-card,body.tem-tabbar .pl-img,body.tem-tabbar .prop-warn,body.tem-tabbar .pslot,body.tem-tabbar .mini-img,body.tem-tabbar .pick-img,body.tem-tabbar .lv-img,body.tem-tabbar .bb-act,body.tem-tabbar .bb-chip,body.tem-tabbar .bb-back{border-radius:var(--r-p)}
body.tem-tabbar .bb-flag img,body.tem-tabbar .st-cbtn,body.tem-tabbar .sd-contact,body.tem-tabbar .st-contact,body.tem-tabbar .sd-main,body.tem-tabbar .sd-price,body.tem-tabbar .sd-thumb,body.tem-tabbar .dash-row,body.tem-tabbar .det-fortrade,body.tem-tabbar .ft-price-in input,body.tem-tabbar .pricetag,body.tem-tabbar .cond-chip,body.tem-tabbar .cond-chip[data-tip]:hover::after,body.tem-tabbar .flag-chip,body.tem-tabbar .flag-chip img,body.tem-tabbar .flag-chip[data-tip]:hover::after,body.tem-tabbar .photo-item,body.tem-tabbar .photo-add,body.tem-tabbar #lightbox img,body.tem-tabbar .importta,body.tem-tabbar .qty-step,body.tem-tabbar .cfgpop .opt,body.tem-tabbar .cfgpop .mini2,body.tem-tabbar .book.single .leaf.r::before,body.tem-tabbar .leaf.blank::after,body.tem-tabbar .pocket,body.tem-tabbar .criando,body.tem-tabbar .alert-dir,body.tem-tabbar .ab-item,body.tem-tabbar .ab-item img,body.tem-tabbar .store-row,body.tem-tabbar .store-logo,body.tem-tabbar .slot-wrap img,body.tem-tabbar .bib-item,body.tem-tabbar .pe-item img,body.tem-tabbar .previa-cel img,body.tem-tabbar .previa-voto .pv,body.tem-tabbar .art-voto .vt,body.tem-tabbar .dv-card,body.tem-tabbar /* estado discreto: some até a pessoa preencher ou tocar */
.det-cond-fold,body.tem-tabbar .sc-menu{border-radius:var(--r-p)}
body.tem-tabbar .sc-menu button,body.tem-tabbar .esp-quadro,body.tem-tabbar .sc-lang img,body.tem-tabbar .sc-langgrid button,body.tem-tabbar .sc-langgrid img,body.tem-tabbar .sc-langauto,body.tem-tabbar /* área fosca no meio: sem um trecho SEM brilho,body.tem-tabbar o holo vira ruído e a
marca some. O contraste é o que faz o resto brilhar */
.pk-vulto,body.tem-tabbar .pk-ponto::after,body.tem-tabbar .rev-carta,body.tem-tabbar .pgc-guia i,body.tem-tabbar /* miniatura do slab: mesma estrutura da peça grande,body.tem-tabbar em escala */
.cf-mini,body.tem-tabbar .cf-mini-in,body.tem-tabbar .cf-mini-etq,body.tem-tabbar .cf-mini-luz,body.tem-tabbar .cf-sel,body.tem-tabbar .cf-vazio,body.tem-tabbar /* a face da frente hospeda o slab que já existia */
.sf-fr .slab,body.tem-tabbar /* cartão preto inserido */
.slab-in,body.tem-tabbar /* quadro com borda: nome,body.tem-tabbar selo e nota */
.slab-etq,body.tem-tabbar .slab-selo img,body.tem-tabbar .gr-parte,body.tem-tabbar .gr-porque,body.tem-tabbar .gr-viz,body.tem-tabbar .gr-aviso,body.tem-tabbar .sc-x,body.tem-tabbar .sc-icon,body.tem-tabbar .sc-lang,body.tem-tabbar .sc-tira .it,body.tem-tabbar .sc-tira .it img,body.tem-tabbar .sc-seguir,body.tem-tabbar .sc-total,body.tem-tabbar .pg-cel,body.tem-tabbar /* selo da carta graduada: fica no alto do bolso,body.tem-tabbar discreto */
.slabsel,body.tem-tabbar .art-cell,body.tem-tabbar .art-row,body.tem-tabbar .art-mini,body.tem-tabbar .art-acts button,body.tem-tabbar .card-liga-btn,body.tem-tabbar .card,body.tem-tabbar .flash,body.tem-tabbar .pagenav>button{border-radius:var(--r-p)}
body.tem-tabbar .pagenav .addpg,body.tem-tabbar .toggle,body.tem-tabbar .toggle button,body.tem-tabbar .searchbox input,body.tem-tabbar .res,body.tem-tabbar .res .thumb,body.tem-tabbar .res .acts button,body.tem-tabbar .det-close,body.tem-tabbar .det-card img,body.tem-tabbar .det-status button,body.tem-tabbar .det-actions button,body.tem-tabbar .det-trade-note,body.tem-tabbar /* ===== barra de topo: 5 alvos,body.tem-tabbar o resto em menus ===== */
/* ===== resumo da home: os quatro números que fazem abrir o app ===== */
.dash-falha,body.tem-tabbar .navitem,body.tem-tabbar .navicon,body.tem-tabbar .iconbtn,body.tem-tabbar .rd-img,body.tem-tabbar .rd-offer,body.tem-tabbar .sp-done,body.tem-tabbar .sp-cell,body.tem-tabbar .propbadge,body.tem-tabbar .prop-thumb,body.tem-tabbar .prop-ok,body.tem-tabbar .prop-no,body.tem-tabbar .mt-open,body.tem-tabbar .mt-thumb,body.tem-tabbar .tmpl-row,body.tem-tabbar .tmpl-tab,body.tem-tabbar .tmpl-mon-l img,body.tem-tabbar .det-tmpl-hint,body.tem-tabbar .startopt,body.tem-tabbar .bprog-bar,body.tem-tabbar .bprog-bar div,body.tem-tabbar #toast,body.tem-tabbar .wish-img,body.tem-tabbar #pwaBar img,body.tem-tabbar #pwaBar button,body.tem-tabbar .planos-teste,body.tem-tabbar .planos-bin,body.tem-tabbar textarea,body.tem-tabbar /* ===== ITEM 5: ESQUELETO NO LUGAR DA RODINHA =====
A rodinha diz "espere". O esqueleto diz "está vindo,body.tem-tabbar e vai ser assim".
A mesma espera parece mais curta,body.tem-tabbar porque a pessoa já entende a forma da
tela e não fica olhando para um símbolo abstrato.
Vale onde a estrutura é PREVISÍVEL — fichário,body.tem-tabbar acervo,body.tem-tabbar lista de cartas.
Onde não é,body.tem-tabbar a rodinha continua sendo mais honesta. */
.esq{border-radius:var(--r-p)}
body.tem-tabbar .esq-carta{border-radius:var(--r-p)}
body.tem-tabbar .login .bigdot,body.tem-tabbar .trade-store,body.tem-tabbar .acct button,body.tem-tabbar .bcover,body.tem-tabbar .libempty .ic,body.tem-tabbar .preview,body.tem-tabbar .cfgpop,body.tem-tabbar .friend-code,body.tem-tabbar .notif-item,body.tem-tabbar .mycontact,body.tem-tabbar .prop-item2,body.tem-tabbar .bulkbar,body.tem-tabbar .dash-hero,body.tem-tabbar .st-head,body.tem-tabbar .chat-msg,body.tem-tabbar .book.single .leaf.r,body.tem-tabbar .alert-banner,body.tem-tabbar /* Mostra como fica no fichário de verdade: bolsos separados pelo vão
escuro do plástico,body.tem-tabbar cantos arredondados e fundo da pasta. */
.par-emenda,body.tem-tabbar /* ===== Valor em destaque + carrossel ===== */
.det-valor,body.tem-tabbar .esc-op,body.tem-tabbar .sc-langmenu,body.tem-tabbar .ac-per button,body.tem-tabbar .ac-pill,body.tem-tabbar .rev-lado,body.tem-tabbar .sf-fr,body.tem-tabbar .sf-vs,body.tem-tabbar /* brilho que acompanha o ângulo: é o que faz ler como acrílico */
.sf-luz,body.tem-tabbar /* ===== slab MyBinder =====
Estrutura da referência: casca de acrílico TRANSPARENTE com moldura
larga em volta,body.tem-tabbar e dentro dela um CARTÃO PRETO inserido,body.tem-tabbar com fio branco
de contorno. No topo do cartão vem a marca,body.tem-tabbar e abaixo um quadro com
borda reunindo nome,body.tem-tabbar selo e nota. A carta fica embaixo. */
.slab,body.tem-tabbar .gr-slot,body.tem-tabbar .sc-guia i,body.tem-tabbar .sc-desfazer,body.tem-tabbar .panel,body.tem-tabbar .det-price-box,body.tem-tabbar .rcard,body.tem-tabbar /* z-index alto de propósito: a barra vive acima dos painéis em tela cheia,body.tem-tabbar e o menu precisa acompanhar. Com 60 ele ficava preso ao contexto antigo. */
.navdrop,body.tem-tabbar .rd-card,body.tem-tabbar .sp-hero,body.tem-tabbar .prop-item,body.tem-tabbar .match-item,body.tem-tabbar .hist-box,body.tem-tabbar /* convite para instalar o app */
#pwaBar{border-radius:var(--r-m)}
body.tem-tabbar .det-grid,body.tem-tabbar .plano,body.tem-tabbar .pacote,body.tem-tabbar /* Painel de baixo no celular: é onde o polegar alcança,body.tem-tabbar e é o formato que
sempre cabe. Em tela grande vai para o meio,body.tem-tabbar que é onde o olho procura. */
.pergunta-cx,body.tem-tabbar .esq-cx,body.tem-tabbar .mais-item{border-radius:var(--r-m)}
body.tem-tabbar .acct,body.tem-tabbar .plan-pill,body.tem-tabbar .mbtip-st,body.tem-tabbar #pdexDetail::-webkit-scrollbar-thumb,body.tem-tabbar .chip,body.tem-tabbar .cfg,body.tem-tabbar .pk-badge,body.tem-tabbar .mkt-sort,body.tem-tabbar .mkt-photo,body.tem-tabbar .lv-pg,body.tem-tabbar .cs-f,body.tem-tabbar .qtybadge,body.tem-tabbar .cover,body.tem-tabbar /* chave da etiqueta de slab: fica visível porque custa crédito a mais */
.sc-slab,body.tem-tabbar .pgc-tit span,body.tem-tabbar .pgc-it,body.tem-tabbar .sc-jogo,body.tem-tabbar .sc-ocr button,body.tem-tabbar .sc-est,body.tem-tabbar .sc-dica>span,body.tem-tabbar .pocket.wanted::after,body.tem-tabbar .detail,body.tem-tabbar .det-variants button,body.tem-tabbar .det-live,body.tem-tabbar .navprimary,body.tem-tabbar .navtrigger,body.tem-tabbar .propsbtn,body.tem-tabbar .rd-trade,body.tem-tabbar .sp-bar,body.tem-tabbar .sp-bar i,body.tem-tabbar #savedFlag,body.tem-tabbar .wish-mult{border-radius:var(--r-g)}
/* ---- pesos: sete viraram três ----
Peso é hierarquia. Sete níveis não criam sete graus de importância;
criam ruído que o olho não decodifica. */
body.tem-tabbar [style*="font-weight:200"],
body.tem-tabbar [style*="font-weight:300"]{font-weight:400 !important}
body.tem-tabbar b,body.tem-tabbar strong{font-weight:600}
/* ---- ALVO DE TOQUE ----
Eram 108 regras com menos de 10px de altura interna. O mínimo é 44px
de ÁREA TOCÁVEL — o desenho pode continuar pequeno, o alvo não.
`::after` invisível estende a área sem mexer no visual: é assim que se
corrige alvo pequeno sem redesenhar a tela inteira. */
body.tem-tabbar button,
body.tem-tabbar .navitem,
body.tem-tabbar [role="button"]{position:relative;touch-action:manipulation}
body.tem-tabbar button::after{
content:"";position:absolute;left:50%;top:50%;
width:max(100%,var(--toque));height:max(100%,var(--toque));
transform:translate(-50%,-50%);
/* não intercepta nada além do próprio botão */
pointer-events:none}
/* botões de verdade ganham altura real, não só área */
body.tem-tabbar .pbtn,
body.tem-tabbar .cta,
body.tem-tabbar .esc-op,
body.tem-tabbar .mais-item,
body.tem-tabbar .pergunta-bt .pbtn{min-height:var(--toque)}
/* os pequenos e redondos: alvo cresce, desenho fica */
body.tem-tabbar .planos-x,
body.tem-tabbar .mais-x,
body.tem-tabbar .cf-x,
body.tem-tabbar .navav{min-width:40px;min-height:40px}
/* ---- ESTADO DO TOQUE ----
Quase nenhum botão respondia ao ser pressionado. Sem isso o app parece
lento mesmo sendo rápido, porque a única confirmação vem DEPOIS do
resultado. A resposta imediata é o que dá a sensação de direto. */
body.tem-tabbar button:active,
body.tem-tabbar .mais-item:active,
body.tem-tabbar .esc-op:active,
body.tem-tabbar .pacote:active{
transform:scale(.97);
transition:transform .06s var(--curva)}
body.tem-tabbar button{transition:transform var(--rapido) var(--curva),
background var(--rapido) var(--curva),
opacity var(--rapido) var(--curva)}
/* o botão central não encolhe igual: ele é o maior alvo do app e
encolher demais faz parecer que escapou do dedo */
body.tem-tabbar .tab-meio:active{transform:none}
body.tem-tabbar .tab-meio:active .tab-circulo{transform:scale(.93)}
body.tem-tabbar .tab-circulo{transition:transform var(--rapido) var(--curva)}
/* ---- MENOS BORDA, MAIS RESPIRO ----
Borda é a forma mais barata de separar coisas e a mais pesada
visualmente. Cartão sobre fundo escuro se separa sozinho com um
contraste sutil de superfície. */
body.tem-tabbar .cx,
body.tem-tabbar .esq-cx,
body.tem-tabbar .plano,
body.tem-tabbar .pacote,
body.tem-tabbar .mais-item{
border-color:transparent;
background:rgba(255,255,255,.045)}
body.tem-tabbar .plano.forte,
body.tem-tabbar .mais-item:active{border-color:rgba(53,224,200,.45)}
/* ---- MOVIMENTO COM UMA LINGUAGEM SÓ ----
Cada animação foi feita à mão, com sua duração e sua curva. Aqui todas
passam a compartilhar a mesma curva; o que muda é só o tempo. */
body.tem-tabbar .panel,
body.tem-tabbar .pergunta-cx,
body.tem-tabbar .mais,
body.tem-tabbar .scrim,
body.tem-tabbar .tabbar{transition-timing-function:var(--curva)}
/* ---- CABEÇALHO DE TELA ----
Cada tela nomeava a si mesma de um jeito e num tamanho. O título
grande é uma âncora: você sempre sabe onde está. */
body.tem-tabbar .libhead h2,
body.tem-tabbar .mais-topo h3,
body.tem-tabbar .ph2 h3{
font-size:var(--t-titulo);
font-weight:700;
letter-spacing:-.02em;
line-height:1.15}
@media(prefers-reduced-motion:reduce){
body.tem-tabbar button:active,
body.tem-tabbar .tab-meio:active .tab-circulo{transform:none}
}
/* ===== APRESENTAÇÃO DE QUEM CHEGA =====
Nunca existiu. Quem abria o app pela primeira vez caía direto num
formulário de login, sem saber o que o MyBinder faz. Na loja isso é
fatal: quem baixa e não entende em trinta segundos desinstala.
São três telas, e a regra que segui é a de sempre por aqui: mostrar o
QUE ACONTECE, não adjetivos. Cada tela tem uma frase e uma imagem do
próprio app. */
.bv{position:fixed;inset:0;z-index:9600;background:var(--ink);display:none;
padding:calc(28px + env(safe-area-inset-top)) 20px
calc(24px + env(safe-area-inset-bottom))}
.bv.on{display:flex;align-items:center;justify-content:center}
.bv-in{width:100%;max-width:420px;display:flex;flex-direction:column;
height:100%;justify-content:space-between}
.bv-palco{flex:1;display:flex;flex-direction:column;align-items:center;
justify-content:center;text-align:center;gap:var(--e4)}
.bv-arte{width:132px;height:132px;border-radius:var(--r-g);display:grid;
place-items:center;background:rgba(53,224,200,.1);
border:1px solid rgba(53,224,200,.25);color:var(--accent-2)}
.bv-arte svg{width:62px;height:62px}
.bv-palco h2{font-family:var(--display);font-weight:800;font-size:26px;
line-height:1.15;letter-spacing:-.02em;margin:0}
.bv-palco p{font-size:15px;line-height:1.55;color:var(--muted);margin:0;
max-width:320px}
.bv-passo{animation:bvEntra .34s var(--curva)}
@keyframes bvEntra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.bv-pontos{display:flex;gap:7px;justify-content:center;margin:var(--e5) 0 var(--e4)}
.bv-pontos i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.2)}
.bv-pontos i.on{background:var(--accent-2);width:22px;border-radius:4px;
transition:width .28s var(--curva)}
.bv-bt{display:grid;grid-template-columns:auto 1fr;gap:10px}
.bv-bt .pbtn{margin:0;max-width:none}
@media(prefers-reduced-motion:reduce){.bv-passo{animation:none}}
/* ===== filtro da home: desejadas deixaram de ser uma tela ===== */
.libfiltro{display:flex;gap:8px;margin:0 0 var(--e4);flex-wrap:wrap}
.lf{background:rgba(255,255,255,.05);border:1px solid transparent;
color:var(--muted);font-family:var(--body);font-weight:600;
padding:9px 15px;border-radius:20px;cursor:pointer;min-height:40px}
.lf.on{background:rgba(53,224,200,.14);color:var(--accent-2)}
/* ===== A FICHA DA CARTA TINHA 19 BLOCOS =====
Preço, histórico, variantes, condição, quantidade, à venda, fotos,
status, ações, detalhes, extras — tudo aberto, numa tela de celular.
A maioria é de EDIÇÃO, e edição é uso raro: quem cataloga olha a carta
muito mais vezes do que a altera. Vender, então, é minoria dentro da
minoria.
Agora a ficha abre no que se OLHA — imagem, preço, dados da carta — e
o que se MEXE fica atrás de um botão. Nada foi removido; só deixou de
estar sempre na frente. */
.det-edicao{display:none}
.det-edicao.on{display:block;animation:bvEntra .24s var(--curva)}
.det-edbt{width:100%;background:rgba(255,255,255,.05);
border:1px solid var(--line);border-radius:var(--r-m);
color:var(--text);font-family:var(--body);font-weight:600;
padding:13px;margin:var(--e3) 0;cursor:pointer;min-height:var(--toque)}
.det-edbt.on{background:rgba(53,224,200,.12);color:var(--accent-2);
border-color:rgba(53,224,200,.4)}
/* ===== A ZONA PERIGOSA DA CONFIGURAÇÃO =====
"Excluir fichário" ficava no meio de ajustes rotineiros — disposição,
páginas, visibilidade. Ação que apaga tudo não mora junto de ajuste do
dia a dia; o dedo erra e não há volta. */
.cfg-perigo{margin-top:var(--e5);padding-top:var(--e4);
border-top:1px solid var(--line)}
.cfg-perigo .cfg-lab{color:#ff8a8a;font-size:var(--t-legenda);
font-weight:700;letter-spacing:.08em;text-transform:uppercase;
margin-bottom:var(--e2)}
/* ===== seletor de leitura do fichário ===== */
.vmodo{display:inline-flex;background:rgba(255,255,255,.05);
border-radius:20px;padding:3px;gap:2px}
.vmodo button{background:transparent;border:0;color:var(--muted);
font-family:var(--body);font-weight:600;font-size:var(--t-legenda);
padding:8px 14px;border-radius:18px;cursor:pointer;min-height:38px}
.vmodo button.on{background:rgba(53,224,200,.16);color:var(--accent-2)}
/* ===== CONVITE CONTEXTUAL DA HOME (v152) =====
As variáveis do sistema (--t-*, --r-*, --e*) só existem dentro do app
(`body.tem-tabbar`), então cada uma vai com valor de reserva — no
computador o cartão precisa aparecer igual, e sem a reserva ele herdaria
o padrão do navegador. */
.convite{
display:flex;align-items:center;gap:var(--e3,12px);
margin:var(--e5,24px) 0 0;padding:var(--e3,12px) var(--e4,16px);
background:var(--panel);border:1px solid var(--line);
border-radius:var(--r-m,16px);position:relative;overflow:hidden}
/* Filete do gradiente da marca: diz "isto é o app falando", não conteúdo
da coleção. Sem ele o cartão se confunde com um fichário. */
.convite::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
background:var(--holo)}
.cv-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cv-txt b{font-size:var(--t-corpo,15px);font-weight:600;line-height:1.3}
.cv-txt span{font-size:var(--t-apoio,13px);color:var(--muted);line-height:1.4}
.cv-ir{flex:none;background:var(--accent);color:#fff;border:0;cursor:pointer;
font-family:inherit;font-size:var(--t-apoio,13px);font-weight:600;
padding:0 var(--e4,16px);min-height:var(--toque,44px);
border-radius:var(--r-p,10px);transition:transform var(--rapido,.18s) var(--curva,ease)}
.cv-ir:active{transform:scale(.97)}
.cv-x{flex:none;background:none;border:0;color:var(--muted);cursor:pointer;
font-size:20px;line-height:1;width:28px;height:28px;border-radius:50%;
display:flex;align-items:center;justify-content:center;position:relative}
/* O × é pequeno de propósito — dispensar não deve competir com aceitar.
O ::after estende a ÁREA de toque para 44px sem mexer no desenho, que é
como a v145 corrigiu alvo pequeno no app inteiro. */
.cv-x::after{content:'';position:absolute;left:50%;top:50%;
width:var(--toque,44px);height:var(--toque,44px);transform:translate(-50%,-50%)}
.cv-x:hover{color:var(--text)}
/* Em tela estreita o botão desce para baixo do texto: lado a lado ele
espremeria o título em duas ou três linhas. */
@media(max-width:520px){
.convite{flex-wrap:wrap}
.cv-txt{flex:1 1 100%;order:1;padding-right:22px}
.cv-ir{order:2;flex:1 1 auto;margin-top:var(--e2,8px)}
.cv-x{order:0;position:absolute;right:8px;top:8px}
}