@import url('https://fonts.googleapis.com/css2?family=Grenze+Gotisch:wght@500;600;700;800&family=Anton&family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
:root{
  /* ===== TEMA ESCURO — tema unico do app =====
     Os NOMES foram preservados de proposito: sao 200+ usos espalhados por este
     arquivo e renomear tudo so aumentaria o risco. O que mudou foram os VALORES.
     Dois tokens trocaram de papel:
       --ink    era o quase-preto do texto; agora e o texto claro.
       --white  era o branco do card; agora e a superficie elevada.
     E tres nasceram, porque um token nao pode ter dois papeis opostos:
       --ground   o chao do app (antes era o papel, cravado no #app)
       --green-on verde de TEXTO/icone/borda. O --green segue sendo fundo de
                  botao com texto branco (#1C7A4A da 5.34:1 com branco; se ele
                  fosse clareado para o verde de texto, esses botoes cairiam).
       --stamp    o que era fundo escuro sobre papel vira claro sobre escuro
                  (chip ativo, botao escuro, toast). */
  --ground:#0A100C;
  --ink:#E9EFE9;--ink-2:#C9D5CC;--surface:#1B2C22;--well:#22322A;--line:#2E3F35;--line-2:#293931;
  --green:#1C7A4A;--green-on:#33A863;--green-2:#33A863;--green-deep:#0C3F26;
  --flash:#F0552F;--acid:#25F708;--roxo:#6605AD;--roxo-lite:#B47AE8;
  --muted:#9AAB9F;--muted-2:#78887E;--white:#1F3128;
  --stamp:#E9EFE9;--stamp-tx:#142019;--deep:#0F1A14;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);
  background:radial-gradient(1000px 600px at 15% -10%,#123a26,transparent 55%),radial-gradient(900px 700px at 110% 10%,#0e3220,transparent 50%),#0a100c;
  display:flex;justify-content:center;min-height:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit}
a{color:var(--green-on);text-decoration:none}

#app{width:460px;max-width:100%;min-height:100vh;background:var(--ground);position:relative;isolation:isolate;
  display:flex;flex-direction:column;box-shadow:0 0 60px rgba(0,0,0,.4)}
/* A folha de flash no escuro (bg-flash-suave.webp).
   A arte ja vem no tom final: fundo quase preto texturizado com as linhas em
   verde — nada de filtro. O modo screen sobre o chao so SOMA luz (o preto da
   arte nao escurece nada), entao a textura e as linhas aparecem como gravacao.
   O tile e [arte + espelho vertical]: repete no repeat-y sem linha de emenda.
   Nas superficies secundarias a mesma arte entra com opacidade menor (.35). */
#app::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:url('/bg-flash-suave.webp') top center/100% auto repeat-y}
.view{flex:1;overflow-y:auto;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px));position:relative;z-index:1}
.pad{padding:20px 5px} /* laterais estreitas: cards ocupam quase toda a largura, igual ao feed */

/* ---- type ---- */
.eyebrow{font-family:'Oswald';text-transform:uppercase;letter-spacing:2.5px;font-size:11px;font-weight:600;color:var(--green-on)}
.h1{font-family:'Grenze Gotisch',serif;font-weight:700;font-size:36px;line-height:1.02;letter-spacing:.2px}
.h2{font-family:'Grenze Gotisch',serif;font-weight:700;font-size:26px;line-height:1.05;letter-spacing:.2px}
.muted{color:var(--muted)}

/* ---- topbar / nav ---- */
.topbar{background:linear-gradient(175deg,#183025,#0f1a13);color:#fff;padding:calc(env(safe-area-inset-top,0px) + 18px) 20px 18px;border-radius:0 0 24px 24px;position:relative;isolation:isolate;overflow:hidden}
/* Marca d'água — a mesma textura sutil dos cards, em TODA Hero (base, nao so
   .topbar-splash). As telas sem respingo de tinta (Postar, Artistas, Perfil,
   formularios, "Voltar") ficavam com o topo liso, sem nenhuma textura. Nas
   telas com .topbar-splash, essa camada fica atras do respingo — coexistem
   bem, sao efeitos visuais diferentes sobre o mesmo gradiente. */
.topbar::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('/bg-flash-suave.webp') top center/100% auto repeat-y;
  mix-blend-mode:screen;opacity:.35}
/* Respingo de tinta — só na Hero de verdade (Feed e Mercado, marcadas com
   .topbar-splash), não em toda tela que usa .topbar. Formulários, Perfil e
   telas de "Voltar" têm uma faixa de Hero bem menor, e o respingo nelas ficava
   desproporcional e competindo com o conteúdo funcional.
   O arquivo e verde sobre PRETO PURO — mix-blend-mode screen descarta o preto
   e so a tinta soma luz sobre o gradiente. O nucleo do arquivo esta a 61,8% da
   sua propria largura; a formula abaixo o posiciona a 90% da largura da Hero
   (a direita, atras do mascote). */
.topbar-splash::after{content:"";position:absolute;z-index:0;pointer-events:none;
  top:50%;transform:translateY(-50%);
  width:150%;aspect-ratio:1000/323;
  left:calc(90% - 150% * 0.618);
  background:url('/hero-splash.webp') center/contain no-repeat;
  mix-blend-mode:screen;opacity:.9}
.topbar>*{position:relative;z-index:1}
.brand{font-family:'Grenze Gotisch',serif;font-weight:700;font-size:27px;letter-spacing:.3px;line-height:1}
/* Wordmark oficial em imagem (900x119, proporcao ~7.56:1). Substitui o texto
   "Mercado<b>Ink</b>" nos 5 lugares onde ele e a MARCA (nao os titulos de tela
   que reaproveitam a classe .brand, como "Mercado de Usados" ou "Editar anúncio"
   — esses continuam texto). Preto do design ja convertido para branco: a franja
   de anti-aliasing virou alpha gradual (luminance-key), sem contorno visivel. */
/* a logo oficial já traz a assinatura embutida — por isso é mais alta que o
   wordmark antigo (os slogans de texto ao lado dela saíram) */
.brand-logo{height:44px;width:auto;display:block}
.brand-logo.lg{height:50px}
.brand-logo.xl{height:64px;margin:0 auto 34px}   /* respiro até os botões, como na tela do visitante */
.brand b{color:var(--acid)}
.topbar .loc{font-size:12px;color:#c7d2ca;display:flex;align-items:center;gap:5px;margin-top:4px}
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:460px;max-width:100%;height:calc(72px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:rgba(15,26,20,.94);
  backdrop-filter:blur(12px);border-top:1px solid var(--line-2);display:flex;justify-content:space-around;align-items:center;z-index:50;
  isolation:isolate}
/* Mesmo respingo da Hero (arquivo diferente, mesma tecnica): verde sobre preto
   puro, mix-blend-mode:screen descarta o preto e so a tinta soma luz. O arquivo
   ja e simetrico, entao o nucleo fica centralizado na barra.
   SEM overflow:hidden na .tabbar: o botao Postar sobe acima do fluxo normal
   (margin-top:-14px) para "flutuar" sobre a barra — overflow:hidden cortava
   esse topo. O respingo (aspect-ratio 1000/156, 100% de largura) ja cabe
   dentro da altura da barra sem vazar, entao o corte nao fazia falta. */
.tabbar::after{content:"";position:absolute;z-index:0;pointer-events:none;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:100%;aspect-ratio:1000/156;
  background:url('/menu-splash.webp') center/contain no-repeat;
  mix-blend-mode:screen;opacity:.9}
.tabbar>*{position:relative;z-index:1}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted-2);font-family:'Oswald';font-size:10px;text-transform:uppercase;letter-spacing:.3px;width:64px}
.tab svg{width:22px;height:22px;stroke:var(--muted-2);fill:none;stroke-width:1.9}
.tab.on{color:var(--green-on)} .tab.on svg{stroke:var(--green-on)}

/* ---- buttons ---- */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:15px;border-radius:13px;
  font-family:'Oswald';font-weight:600;font-size:15px;letter-spacing:.4px;text-transform:uppercase}
.btn-primary{background:var(--green);color:#fff}
.btn-dark{background:var(--stamp);color:var(--stamp-tx)}
.btn-flash{background:var(--flash);color:#fff}
.btn-ghost{background:var(--white);color:var(--ink);border:1px solid var(--line)}
.btn:disabled{opacity:.5}
.btn-sm{padding:11px 14px;font-size:13px;border-radius:11px;width:auto}
/* ícone dentro de botão: sem isso o SVG (que não tem width próprio) vira um
   item flex de 300px e estoura o botão inteiro no celular. */
.btn svg{width:18px;height:18px;flex:0 0 auto;stroke-width:2;fill:none}

/* ---- forms ---- */
.field{margin-bottom:14px}
.field label{display:block;font-family:'Oswald';font-weight:500;font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:14px;font-size:15px;color:var(--ink)}
.field textarea{min-height:84px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--green-on);border-color:var(--green-on)}
.err{background:rgba(240,85,47,.1);color:#b7381a;border-radius:11px;padding:11px 13px;font-size:13px;margin-bottom:12px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.two>*{min-width:0}
.two input,.two select{width:100%;box-sizing:border-box;max-width:100%}
input[type="date"]{-webkit-appearance:none;appearance:none;min-width:0;max-width:100%;box-sizing:border-box}

/* ---- chips ---- */
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;font-family:'Oswald';font-weight:500;font-size:13px;padding:8px 14px;border-radius:11px;background:var(--white);border:1px solid var(--line);white-space:nowrap}
.chip.on{background:var(--stamp);color:var(--stamp-tx);border-color:var(--stamp)}

/* ---- cards ---- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.card{background:var(--white);border:1px solid var(--line-2);border-radius:16px;overflow:hidden;text-align:left;width:100%;display:block;
  position:relative;isolation:isolate}
/* Textura sutil dentro do card — mesma tecnica do fundo do app (contraste alto +
   inversao + mix-blend-mode:screen), so que num padrao pequeno e repetido, quase
   invisivel. A cor solida (--white) continua sendo a base; isto e so uma camada
   por cima, para o card parecer flutuar no mesmo "infinito" do fundo. */
.card::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('/bg-flash-suave.webp') top center/100% auto repeat-y;
  mix-blend-mode:screen;opacity:.35}
.card>*{position:relative;z-index:1}
.card:active{transform:scale(.99)}
.ph{aspect-ratio:1/1;display:grid;place-items:center;background:linear-gradient(140deg,#1E8A52,#0C3F26)}
.ph.b{background:linear-gradient(140deg,#155E4A,#1E8A52)} .ph.c{background:linear-gradient(140deg,#1F3A1E,#2E7A2A)}
.ph svg{width:38%;height:38%;stroke:rgba(255,255,255,.9);fill:none;stroke-width:1.5}
.card .body{padding:11px}
.price{font-family:'Oswald';font-weight:700;font-size:17px}.price small{color:var(--flash)}
.card .t{font-size:12.5px;margin-top:3px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .m{font-size:11px;color:var(--muted);margin-top:7px;display:flex;align-items:center;gap:4px}
.badge{display:inline-block;font-family:'Oswald';font-weight:600;font-size:10px;letter-spacing:.5px;text-transform:uppercase;padding:4px 8px;border-radius:7px;background:var(--well)}
.badge.acid{background:var(--acid);color:var(--stamp-tx)}

.row-card{background:var(--white);border:1px solid var(--line-2);border-radius:16px;padding:15px;margin-bottom:12px;
  position:relative;isolation:isolate;overflow:hidden}
.row-card::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('/bg-flash-suave.webp') top center/100% auto repeat-y;
  mix-blend-mode:screen;opacity:.35}
.row-card>*{position:relative;z-index:1}

.avatar{width:46px;height:46px;border-radius:13px;overflow:hidden;flex-shrink:0}
.avatar .ph{aspect-ratio:auto;height:100%}
.style-tag{font-family:'Oswald';font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.3px;color:var(--green-on);background:rgba(28,122,74,.1);padding:3px 8px;border-radius:6px}

/* ---- section ---- */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin:22px 0 12px}
.link{font-family:'Oswald';font-size:12.5px;text-transform:uppercase;color:var(--green-on);letter-spacing:.4px}
.rail{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.rail::-webkit-scrollbar{display:none}
.rail .card{width:150px;flex-shrink:0}

/* ===== HOME caprichada ===== */
.hero-eyebrow{font-family:'Oswald';text-transform:uppercase;letter-spacing:2px;font-size:11px;font-weight:600;color:var(--green-on);margin-bottom:5px}
.hero-title{font-family:'Grenze Gotisch',serif;font-weight:700;font-size:34px;line-height:1.02;letter-spacing:.2px;margin-bottom:16px}
/* atalhos rápidos do Mercado, logo abaixo da Hero */
.shortcut-rail{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:1px 1px 6px;margin-bottom:14px}
.shortcut-rail::-webkit-scrollbar{display:none}
.shortcut-chip{flex:0 0 auto;width:68px;display:flex;flex-direction:column;align-items:center;gap:7px;background:none;border:none;cursor:pointer;padding:0}
.shortcut-chip .sc-ic{width:52px;height:52px;border-radius:16px;background:var(--surface);border:1px solid var(--line-2);display:grid;place-items:center;transition:transform .1s}
.shortcut-chip .sc-ic svg{width:22px;height:22px;stroke:var(--green-on);fill:none;stroke-width:1.8}
.shortcut-chip .sc-t{font-family:'Oswald',sans-serif;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.2px;color:var(--muted);text-align:center;line-height:1.2}
.shortcut-chip:active .sc-ic{transform:scale(.92)}
.mode-card{position:relative;border-radius:18px;overflow:hidden;padding:18px;margin-bottom:12px;color:#fff;display:block;width:100%;text-align:left}
.mode-card.buy{background:linear-gradient(135deg,#1E8A52,#0C3F26)}
.mode-card.discover{background:linear-gradient(135deg,#183025,#0f1a13);border:1px solid rgba(255,255,255,.08)}
.mode-card .ribbon{display:inline-block;background:var(--acid);color:var(--stamp-tx);font-family:'Oswald';font-weight:700;font-size:10px;letter-spacing:.5px;text-transform:uppercase;padding:5px 10px;border-radius:8px;margin-bottom:12px}
.mode-card h3{font-family:'Grenze Gotisch',serif;font-weight:700;font-size:23px;line-height:1;margin-bottom:6px}
.mode-card p{font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.8);max-width:92%}
.mode-card .go{position:absolute;right:16px;bottom:16px;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.14);display:grid;place-items:center}
.mode-card .go svg{width:20px;height:20px;stroke:#fff;stroke-width:2.4;fill:none}
.mode-card.buy .go{background:var(--acid)}.mode-card.buy .go svg{stroke:#142019}

.loja-banner{position:relative;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#155E4A,#0C3F26);padding:20px;color:#fff;margin-top:4px}
.loja-banner .lb-eyebrow{font-family:'Oswald';font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--acid)}
.loja-banner h3{font-family:'Grenze Gotisch',serif;font-weight:700;font-size:24px;margin-top:6px;line-height:1}
.loja-banner p{font-size:12.5px;color:rgba(255,255,255,.78);margin-top:7px;max-width:80%;line-height:1.4}
.loja-banner .lb-brands{display:flex;gap:7px;margin-top:13px;flex-wrap:wrap}
.loja-banner .lb-brands span{font-family:'Oswald';font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.3px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);padding:5px 10px;border-radius:8px}

.soon-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:12px}
.soon-item{background:var(--white);border:1px solid var(--line-2);border-radius:14px;padding:14px;
  position:relative;isolation:isolate;overflow:hidden}
.soon-item::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('/bg-flash-suave.webp') top center/100% auto repeat-y;
  mix-blend-mode:screen;opacity:.35}
.soon-item>*{position:relative;z-index:1}

.soon-item .si-ic{width:36px;height:36px;border-radius:10px;background:rgba(28,122,74,.1);display:grid;place-items:center;margin-bottom:9px}
.soon-item .si-ic svg{width:19px;height:19px;stroke:var(--green-on);fill:none;stroke-width:1.9}
.soon-item .si-t{font-weight:700;font-size:12.5px;line-height:1.15}
.soon-item .badge{margin-top:9px}
.partner-banner{border-radius:18px;padding:20px;color:#fff;background:linear-gradient(135deg,#123d28,#0b120d);position:relative;overflow:hidden;margin-top:2px}
.partner-banner h3{font-family:'Grenze Gotisch',serif;font-weight:700;font-size:22px;line-height:1.05}
.partner-banner p{font-size:12.5px;color:rgba(255,255,255,.72);margin-top:8px;line-height:1.45;max-width:88%}
.partner-banner .pb-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:13px}
.partner-banner .pb-tags span{font-family:'Oswald';font-weight:500;font-size:10.5px;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);padding:4px 9px;border-radius:7px}

/* ---- onboarding ---- */
.onb{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:32px 24px;color:#fff;
  background:radial-gradient(900px 500px at 20% -10%,#123a26,transparent 55%),radial-gradient(700px 500px at 100% 10%,#0e3220,transparent 50%),#0a100c}
.onb .logo{font-family:'Grenze Gotisch',serif;font-weight:700;font-size:44px;text-align:center;letter-spacing:.3px;line-height:1}
.onb .logo b{color:var(--acid)}
.onb .tag{text-align:center;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:2.5px;font-size:11px;font-weight:500;color:#9aa7a0;margin-top:2px;margin-bottom:34px}
.onb .tag .p{color:var(--roxo-lite);font-weight:700}
.onb h2{font-family:'Grenze Gotisch',serif;font-weight:700;font-size:28px;line-height:1.05;margin-bottom:6px}
.onb p.sub{color:#a9b6ac;font-size:13.5px;margin-bottom:22px}
.pick{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:20px;display:flex;align-items:center;gap:15px;margin-bottom:13px;width:100%;text-align:left;color:#fff}
.pick.on{border-color:var(--acid);background:rgba(37,247,8,.08)}
.pick .ic{width:48px;height:48px;border-radius:14px;background:linear-gradient(150deg,#1E8A52,#0C3F26);display:grid;place-items:center;flex-shrink:0}
.pick .ic svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.8}
.pick .tt{font-family:'Grenze Gotisch',serif;font-weight:700;font-size:22px;line-height:1.05}
.pick .ss{font-size:12px;color:#a9b6ac;margin-top:5px}
.onb .field label{color:#a9b6ac}
.onb .field input,.onb .field select{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);color:#fff}
.onb .field select option{color:#111}
.steps{display:flex;gap:6px;justify-content:center;margin-top:20px}
.steps i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25)}
.steps i.on{background:var(--acid);width:20px;border-radius:4px}
.authtabs{display:flex;gap:8px;margin-bottom:18px}
.authtabs button{flex:1;padding:11px;border-radius:11px;font-family:'Oswald';font-weight:600;text-transform:uppercase;font-size:13px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#a9b6ac}
.authtabs button.on{background:var(--stamp);color:var(--stamp-tx)}
.textlink{color:var(--acid);font-size:13px;text-align:center;margin-top:16px;cursor:pointer}

/* ---- conversa com a equipe (Contato MercadoInk) ---- */
.ct-thread{margin-bottom:16px}
.ct-mine,.ct-reply{border-radius:14px;padding:12px 14px;font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.ct-mine{background:var(--well);border:1px solid var(--line);color:var(--ink)}
.ct-reply{background:rgba(51,168,99,.12);border:1px solid var(--green-on);color:var(--ink);margin-top:7px}
.ct-reply.nova{box-shadow:0 0 0 2px rgba(37,247,8,.25)}
.ct-when{font-family:'Oswald';font-weight:500;font-size:11px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--muted);margin-bottom:5px}
.ct-reply .ct-when{color:var(--green-on)}
.ct-wait{display:flex;align-items:center;gap:8px;margin-top:7px;padding:10px 14px;font-size:12.5px;color:var(--muted)}
.ct-wait svg{stroke:var(--muted);fill:none;stroke-width:1.8}
/* pontinho no menu quando a equipe respondeu */
.tab .tab-dot{position:absolute;top:5px;right:calc(50% - 15px);width:8px;height:8px;border-radius:50%;
  background:var(--acid);box-shadow:0 0 0 2px var(--ground)}

/* ---- HOT TIPS ---- */
.ft-tips{position:relative}
.ft-opt.on.ft-tips{background:var(--acid);border-color:var(--acid);color:var(--stamp-tx);
  box-shadow:0 2px 10px rgba(37,247,8,.35)}
.tip-intro{background:var(--well);border:1px solid var(--line);border-radius:16px;padding:15px;margin-bottom:16px}
.tip-intro p{color:var(--muted);font-size:13.5px;line-height:1.55;margin-top:8px}
.ti-badge{display:inline-flex;align-items:center;gap:7px;background:var(--acid);color:var(--stamp-tx);
  font-family:'Oswald';font-weight:600;font-size:12px;letter-spacing:.6px;text-transform:uppercase;
  padding:5px 11px;border-radius:20px}
.ti-badge svg{width:13px;height:13px;stroke:var(--stamp-tx);fill:var(--stamp-tx)}
/* grade de capas — o vídeo só é baixado quando a pessoa toca no play */
.tip-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
/* na aba Hot Tips o vídeo ocupa a largura toda, como um post do feed: é onde a
   pessoa está ali pra assistir. No perfil do tatuador segue em duas colunas,
   porque ali funciona como galeria ao lado do portfólio. */
.tip-grid.larga{grid-template-columns:1fr;gap:14px}
.tip-grid.larga .tc-thumb{aspect-ratio:4/5}
.tip-grid.larga .tc-t{font-size:16px;-webkit-line-clamp:3}
.tip-grid.larga .tc-meta{font-size:12.5px}
.tip-grid.larga .tc-body{padding:13px 14px 15px}
.tip-grid.larga .tc-play{width:58px;height:58px}
.tip-grid.larga .tc-play svg{width:22px;height:22px}
.tip-card{background:var(--white);border:1px solid var(--line-2);border-radius:16px;overflow:hidden;
  text-align:left;width:100%;display:block;cursor:pointer;padding:0}
.tc-thumb{position:relative;aspect-ratio:9/13;background:var(--well);overflow:hidden}
.tc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tc-ph{width:100%;height:100%;display:grid;place-items:center}
.tc-ph svg{width:34px;height:34px;stroke:var(--muted-2);fill:var(--muted-2)}
.tc-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;
  background:rgba(10,16,12,.6);backdrop-filter:blur(3px);border:1px solid rgba(255,255,255,.2);display:grid;place-items:center}
.tc-play svg{width:17px;height:17px;stroke:#fff;fill:#fff;margin-left:2px}
.tc-dur{position:absolute;right:8px;bottom:8px;background:rgba(10,16,12,.72);color:#fff;font-family:'Oswald';
  font-size:11px;font-weight:600;padding:3px 7px;border-radius:6px}
.tc-body{padding:10px 11px 12px}
.tc-t{font-weight:700;font-size:13.5px;line-height:1.35;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tc-meta{color:var(--muted);font-size:11.5px;margin-top:4px}
/* player */
.tip-player{background:#000;border-radius:16px;overflow:hidden;margin-top:4px}
.tip-player video{width:100%;max-height:70vh;display:block;background:#000}
.tip-title{font-family:'Grenze Gotisch',serif;font-size:23px;color:var(--ink);margin-top:14px;line-height:1.2}
.tip-sub{color:var(--muted);font-size:12.5px;margin-top:5px}
.tip-author{display:flex;align-items:center;gap:12px;width:100%;margin-top:14px;padding:11px;
  background:var(--well);border:1px solid var(--line);border-radius:14px;color:var(--ink);text-align:left;cursor:pointer}
/* reações — só positivas, de propósito: um placar de "não curti" numa cena
   pequena desestimula quem está começando a postar */
.tip-reacts{display:flex;gap:9px;margin-top:14px}
.tr-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px;border-radius:13px;
  background:var(--well);border:1px solid var(--line);cursor:pointer}
.tr-btn.on{border-color:var(--acid);background:rgba(37,247,8,.10)}
.tr-e{font-size:19px;line-height:1}
.tr-n{font-family:'Oswald';font-size:12px;font-weight:600;color:var(--muted)}
.tr-btn.on .tr-n{color:var(--acid)}
.tip-foot{margin-top:18px;text-align:center}
.tip-del{background:none;border:none;color:var(--muted);font-size:12.5px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px}
.tip-del:hover{color:var(--flash)}
.tip-del svg{stroke:currentColor;fill:none}
/* publicar */
.tip-guia{background:var(--well);border:1px solid var(--line);border-left:3px solid var(--acid);
  border-radius:14px;padding:14px 15px;margin-bottom:18px}
.tg-h{display:flex;align-items:center;gap:8px;font-family:'Oswald';font-weight:600;font-size:14px;
  text-transform:uppercase;letter-spacing:.4px;color:var(--ink)}
.tg-h svg{stroke:var(--acid);fill:none}
.tg-chamada{margin-top:10px;color:var(--ink);font-size:13.5px;line-height:1.55}
.tip-guia ul{margin:10px 0 0;padding-left:18px;color:var(--muted);font-size:13.5px;line-height:1.7}
.tg-p{color:var(--muted-2);font-size:12.5px;line-height:1.5;margin-top:11px;font-style:italic}
.tip-escolha{display:flex;gap:11px}
.te-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:20px 12px;border-radius:16px;
  background:var(--well);border:1px solid var(--line);color:var(--ink);cursor:pointer;text-align:center}
.te-btn svg{width:26px;height:26px;stroke:var(--green-on);fill:none;stroke-width:1.7}
.te-btn span{font-family:'Oswald';font-weight:600;font-size:13.5px}
.te-btn small{color:var(--muted);font-size:11.5px;font-weight:400}
/* aviso de escopo do Hot Tips */
.tip-aviso{display:flex;gap:9px;align-items:flex-start;margin-top:12px;padding:11px 13px;border-radius:12px;
  background:rgba(240,85,47,.10);border:1px solid rgba(240,85,47,.32);color:var(--ink-2);
  font-size:12.5px;line-height:1.5}
.tip-aviso b{color:var(--flash)}
.tip-aviso svg{stroke:var(--flash);fill:none;stroke-width:2;margin-top:2px;flex:0 0 auto}
.tip-aviso.mini{margin-top:10px;padding:9px 11px;font-size:11.5px}

/* escolher o frame da capa */
.capa-box{background:var(--well);border:1px solid var(--line);border-radius:14px;padding:14px;margin-top:12px}
.capa-h{display:flex;align-items:center;gap:12px;justify-content:space-between}
.capa-h b{display:block;font-family:'Oswald';font-weight:600;font-size:14px;color:var(--ink)}
.capa-h small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.capa-mini{width:46px;height:62px;border-radius:8px;overflow:hidden;background:var(--ground);
  border:1px solid var(--line);flex:0 0 auto}
.capa-mini img{width:100%;height:100%;object-fit:cover;display:block}
.capa-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:4px;
  background:var(--ground);margin-top:14px;outline:none}
.capa-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--acid);border:3px solid var(--surface);cursor:pointer}
.capa-slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--acid);
  border:3px solid var(--surface);cursor:pointer}
.capa-tempo{display:flex;justify-content:space-between;align-items:baseline;margin-top:7px;font-size:12px}
.capa-tempo span:first-child{font-family:'Oswald';font-weight:600;color:var(--acid)}
.capa-tempo .muted{font-size:11.5px}

.tip-prog{background:var(--well);border:1px solid var(--line);border-radius:16px;padding:20px}
.tp-h{font-family:'Oswald';font-weight:600;font-size:15px;color:var(--ink)}
.tp-bar{height:8px;background:var(--ground);border-radius:6px;overflow:hidden;margin:13px 0 10px}
.tp-bar span{display:block;height:100%;width:0;background:var(--acid);transition:width .25s ease}
.tp-s{color:var(--muted);font-size:12.5px;line-height:1.5}

/* ---- salvar / compartilhar ---- */
.item-acts{display:flex;gap:9px;margin-top:12px}
.ia-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:12px;border-radius:12px;
  background:var(--well);border:1px solid var(--line);color:var(--ink);cursor:pointer;
  font-family:'Oswald';font-weight:500;font-size:12.5px;letter-spacing:.4px;text-transform:uppercase}
.ia-btn svg{width:17px;height:17px;stroke:var(--muted);fill:none;stroke-width:1.9;flex:0 0 auto}
.ia-btn:active{transform:scale(.97)}
.ia-btn.on{border-color:var(--green-on);color:var(--green-on)}
.ia-btn.on svg{stroke:var(--green-on);fill:var(--green-on)}
.copy-url{width:100%;padding:13px;border-radius:11px;background:var(--well);border:1px solid var(--line);
  color:var(--ink);font-size:13px;font-family:inherit}
/* marcador de salvar sobre a foto do card (listas) */
.save-pin{position:absolute;top:9px;right:9px;z-index:3;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(10,16,12,.62);backdrop-filter:blur(3px);border:1px solid rgba(255,255,255,.14);cursor:pointer}
.save-pin svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:1.9}
.save-pin.on{background:var(--green);border-color:var(--green)}
.save-pin.on svg{stroke:#fff;fill:#fff}
/* item salvo que saiu do ar */
.saved-gone{display:flex;align-items:center;gap:11px;background:var(--well);border:1px dashed var(--line);
  border-radius:14px;padding:14px;margin-bottom:9px;color:var(--muted);font-size:13px}
.saved-gone svg{width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:1.8;flex:0 0 auto}
.saved-gone button{margin-left:auto;flex:0 0 auto;background:none;border:1px solid var(--line);color:var(--muted);
  font-size:11px;font-weight:600;padding:6px 11px;border-radius:9px;cursor:pointer}

/* aviso explicativo dentro de um setor (ex.: "sua conta entra por código") */
.soft-note{display:flex;gap:11px;align-items:flex-start;background:var(--well);border:1px solid var(--line);
  border-left:3px solid var(--green-on);border-radius:13px;padding:13px 14px;color:var(--muted);
  font-size:13.5px;line-height:1.5}
.soft-note b{color:var(--ink);font-family:'Oswald';font-weight:600;font-size:14px}
.soft-note svg{stroke:var(--green-on);margin-top:2px}

/* ---- misc ---- */
.empty{text-align:center;color:var(--muted);padding:50px 20px}
.empty svg{width:44px;height:44px;stroke:var(--muted-2);fill:none;stroke-width:1.5;margin-bottom:12px}
.loading{text-align:center;color:var(--muted);padding:40px}
.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--stamp);color:var(--stamp-tx);
  padding:12px 18px;border-radius:12px;font-size:13px;z-index:100;opacity:0;transition:.3s;pointer-events:none;max-width:90%}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.back{display:inline-flex;align-items:center;gap:6px;color:#fff;font-size:14px;margin-bottom:12px}
.back svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2}
.detail-hero{aspect-ratio:4/3;background:linear-gradient(140deg,#1E8A52,#0C3F26);display:grid;place-items:center}
.detail-hero>svg{width:64px;height:64px;max-width:30%;max-height:30%;stroke:rgba(255,255,255,.9);fill:none;stroke-width:1.4}
.detail-hero>svg.ph-ic{color:rgba(255,255,255,.65)}
.pill{display:inline-flex;align-items:center;gap:6px;font-family:'Oswald';font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.3px;padding:7px 12px;border-radius:10px;background:var(--well);margin:4px 6px 0 0}
.pill.g{background:rgba(28,122,74,.11);color:var(--green-on)}
.contact{display:flex;gap:10px;margin-top:20px}
.divider{height:1px;background:var(--line-2);margin:18px 0}
.match{border:1px solid rgba(28,122,74,.25);border-radius:16px;overflow:hidden;margin-top:16px}
.match .mh{background:linear-gradient(135deg,#1E8A52,#0C3F26);color:#fff;padding:13px 15px;font-family:'Oswald';font-weight:600;text-transform:uppercase;font-size:13px;display:flex;gap:8px;align-items:center}
.match .mh svg{width:18px;height:18px;stroke:var(--acid);fill:none;stroke-width:2}
.match .mb{background:linear-gradient(160deg,#F2FBEF,#E9F5E5);padding:8px 15px 14px}
.mstop{padding:11px 0;border-bottom:1px solid rgba(28,122,74,.12)}.mstop:last-child{border:none}
.mstop .city{font-weight:700;font-size:14px}.mstop .role{font-family:'Oswald';font-size:10px;text-transform:uppercase;color:var(--muted);background:rgba(34,50,42,.85);padding:2px 7px;border-radius:6px;margin-left:7px}
.mstop .s{font-size:12.5px;color:#33463b;margin-top:5px}.mstop .none{font-size:12px;color:var(--muted);font-style:italic;margin-top:5px}

/* ===== Painel do tatuador (cards) ===== */
.ppill{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;padding:11px 14px;border-radius:12px;margin-bottom:16px}
.ppill svg{width:16px;height:16px;fill:none;stroke-width:2;flex-shrink:0}
.ppill.done{background:rgba(28,122,74,.12);color:var(--green-on)}
.ppill.done svg{stroke:var(--green-on)}
.ppill.todo{background:rgba(240,85,47,.1);color:var(--flash)}
.ppill.todo svg{stroke:var(--flash)}
.mcard{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:var(--white);border:1px solid var(--line-2);border-radius:16px;padding:15px;margin-bottom:11px;
  position:relative;isolation:isolate;overflow:hidden}
.mcard::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('/bg-flash-suave.webp') top center/100% auto repeat-y;
  mix-blend-mode:screen;opacity:.35}
.mcard>*{position:relative;z-index:1}
.mcard.hot{border-color:rgba(240,85,47,.4);background:linear-gradient(135deg,#22322A,#2C231F)}
.mcard.ok{border-color:rgba(28,122,74,.35)}
.mcard.locked{opacity:.6}
.mc-ic{width:44px;height:44px;border-radius:13px;background:linear-gradient(150deg,#1E8A52,#0C3F26);display:grid;place-items:center;flex-shrink:0}
.mcard.hot .mc-ic{background:linear-gradient(150deg,#F0552F,#c23d1c)}
.mcard.locked .mc-ic{background:var(--well)}
.mc-ic svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.9}
.mcard.locked .mc-ic svg{stroke:var(--muted-2)}
.mc-body{flex:1;min-width:0}
.mc-t{font-weight:700;font-size:14px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.mc-s{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.4}
.mc-tag{font-family:'Oswald';font-size:9px;font-weight:600;text-transform:uppercase;padding:3px 7px;border-radius:6px}
.mc-tag.hot{background:var(--flash);color:#fff}.mc-tag.ok{background:var(--green);color:#fff}.mc-tag.soon{background:var(--well);color:var(--muted)}
.mc-go{flex-shrink:0}.mc-go svg{width:20px;height:20px;stroke:var(--muted-2);fill:none;stroke-width:2}
.mc-lock{font-family:'Oswald';font-size:10px;text-transform:uppercase;color:var(--muted-2);background:var(--well);padding:5px 9px;border-radius:8px;flex-shrink:0}

/* ===== Recortador de foto ===== */
.cropwrap{display:flex;flex-direction:column;align-items:center}
.cropframe{position:relative;width:230px;height:230px;border-radius:24px;overflow:hidden;background:var(--well);border:2px solid var(--line)}
.cropframe canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.cropframe canvas:active{cursor:grabbing}
.crophint{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted-2);pointer-events:none}
.crophint svg{width:40px;height:40px;stroke:var(--muted-2);fill:none;stroke-width:1.4}
.crophint span{font-size:12px}
#cropctrl{width:230px;margin-top:12px}
#cropzoom{width:100%;accent-color:var(--green-on)}
.check{display:flex;gap:10px;align-items:flex-start;margin-top:14px;cursor:pointer;font-size:13px;line-height:1.45;color:var(--ink)}
.check input{width:20px;height:20px;flex-shrink:0;accent-color:var(--green-on);margin-top:1px}

/* ===== Erros/validação de campo ===== */
.field input.invalid{border-color:var(--flash);background:rgba(240,85,47,.09)}
.field-msg{font-size:12px;margin-top:6px;line-height:1.35}
.field-msg.err-msg{color:#b7381a}
.field-msg.ok-msg{color:var(--green-on)}

/* ===== Pino do topo: tamanho fixo (evita ícone gigante) ===== */
.topbar .loc svg{width:14px;height:14px;flex:0 0 auto}
/* Desktop/notebook: mesmo layout do mobile, apenas centralizado (body já centraliza; tabbar centralizada na regra base). */

/* ===== Logo MonsterInk no topo da home ===== */
.mi-logo{position:absolute;right:20px;top:50%;transform:translateY(-50%);height:84px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.42))}

/* ===== Hero: título + botão Entrar ao lado ===== */
.hero-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.hero-txt{flex:1;min-width:0}
.hero-entrar{flex:0 0 auto;display:inline-flex;flex-direction:column;align-items:center;gap:4px;
  background:var(--acid);color:#10221a;border:none;cursor:pointer;
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.5px;font-weight:700;font-size:12px;
  padding:12px 16px;border-radius:16px;box-shadow:0 6px 16px rgba(37,247,8,.35);transition:transform .12s,box-shadow .12s}
.hero-entrar svg{width:20px;height:20px}
.hero-entrar:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(37,247,8,.45)}
.hero-entrar:active{transform:translateY(0)}

/* ===== Segmentação: card de escolha ===== */
.seg-gate{padding:calc(env(safe-area-inset-top,0px) + 30px) 22px 40px;min-height:100vh;display:flex;flex-direction:column}
.seg-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}
.seg-eyebrow{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:3px;font-size:11px;font-weight:600;color:var(--green-on)}
.seg-title{font-family:'Grenze Gotisch',serif;font-weight:700;font-size:33px;line-height:1.05;color:var(--ink);margin:8px 0 10px}
.seg-sub{font-size:13.5px;color:var(--muted);line-height:1.5;margin-bottom:24px;max-width:340px}
.seg-card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:rgba(31,49,40,.94);border:1px solid var(--line);border-radius:18px;padding:18px;margin-bottom:14px;cursor:pointer;transition:transform .12s,box-shadow .12s,border-color .12s;backdrop-filter:blur(2px);
  position:relative;isolation:isolate;overflow:hidden}
.seg-card::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('/bg-flash-suave.webp') top center/100% auto repeat-y;
  mix-blend-mode:screen;opacity:.35}
.seg-card>*{position:relative;z-index:1}

.seg-card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.14)}
.seg-card.tat{border-color:rgba(28,122,74,.4)}
.seg-card.cli{border-color:rgba(240,85,47,.4)}
.seg-ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;color:#fff;flex:0 0 auto}
.seg-card.tat .seg-ic{background:linear-gradient(150deg,#1E8A52,#0C3F26)}
.seg-card.cli .seg-ic{background:linear-gradient(150deg,#F0552F,#c23d1c)}
.seg-ic svg{width:26px;height:26px}
.seg-info{flex:1}
.seg-info h3{font-family:'Grenze Gotisch',serif;font-weight:700;font-size:20px;color:var(--ink);margin-bottom:3px}
.seg-info p{font-size:12.5px;color:var(--muted);line-height:1.4}
.seg-card .go{width:34px;height:34px;border-radius:11px;background:var(--well);display:grid;place-items:center;color:var(--ink);flex:0 0 auto}
.seg-card .go svg{width:18px;height:18px}
.seg-skip{text-align:center;font-size:13px;color:var(--muted);margin-top:10px;cursor:pointer;padding:8px}
.seg-skip:hover{color:var(--ink)}

/* ===== Location clicável + switch de segmento ===== */
.loc-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.loc-btn{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);color:#eaf3ec;font-size:12px;font-weight:600;padding:5px 11px;border-radius:20px;cursor:pointer}
.loc-btn svg{width:13px;height:13px}
.loc-btn:hover{background:rgba(255,255,255,.22)}
.seg-switch{background:transparent;border:1px dashed rgba(255,255,255,.3);color:#cfe0d4;font-size:11px;font-weight:600;padding:5px 10px;border-radius:20px;cursor:pointer}
.seg-switch:hover{background:rgba(255,255,255,.1)}

/* ===== Toggle On/Off Tatuador | Cliente ===== */
.seg-toggle{position:relative;display:inline-flex;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:3px;user-select:none}
.st-knob{position:absolute;top:3px;left:3px;bottom:3px;width:calc(50% - 3px);border-radius:16px;background:var(--acid);
  box-shadow:0 2px 6px rgba(0,0,0,.28);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.seg-toggle[data-seg="cliente"] .st-knob{transform:translateX(100%)}
.st-opt{position:relative;z-index:1;border:none;background:none;cursor:pointer;font-family:'Oswald',sans-serif;text-transform:uppercase;
  letter-spacing:.5px;font-size:11px;font-weight:600;padding:5px 14px;color:rgba(255,255,255,.72);transition:color .18s;white-space:nowrap}
.seg-toggle[data-seg="tatuador"] .st-opt:nth-of-type(1){color:#10221a}
.seg-toggle[data-seg="cliente"] .st-opt:nth-of-type(2){color:#10221a}

/* ===== Seletor de região (bottom sheet) ===== */
.region-overlay{position:fixed;inset:0;background:rgba(10,16,12,.55);backdrop-filter:blur(3px);z-index:200;display:flex;align-items:flex-end;justify-content:center;animation:fadein .15s ease}
.region-sheet{width:460px;max-width:100%;background:var(--surface);border-radius:22px 22px 0 0;padding:20px 20px calc(env(safe-area-inset-bottom,0px) + 24px);animation:slideup .22s cubic-bezier(.2,.8,.2,1);
  position:relative;isolation:isolate}
.region-sheet::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('/bg-flash-suave.webp') top center/100% auto repeat-y;
  mix-blend-mode:screen;opacity:.35}
.region-sheet>*{position:relative;z-index:1}

.rs-handle{width:42px;height:4px;border-radius:3px;background:var(--line);margin:0 auto 16px}
.region-sheet h3{font-family:'Grenze Gotisch',serif;font-weight:700;font-size:22px;color:var(--ink)}
.rs-sub{font-size:13px;color:var(--muted);margin:3px 0 16px}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes slideup{from{transform:translateY(30px);opacity:.6}to{transform:translateY(0);opacity:1}}

/* ===== Card "em breve" (Gestão) ===== */
.mcard.soon{opacity:.72;cursor:default}
.mcard.soon .mc-ic{background:#e5ddcb;color:#9a8b6e}
.section-head .mc-tag.soon{margin-left:auto}

/* ===== Linhas de gerenciamento (promoções/eventos no perfil) ===== */
.mine-row{display:flex;align-items:center;gap:12px;background:rgba(31,49,40,.94);border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:9px;backdrop-filter:blur(2px);
  position:relative;isolation:isolate;overflow:hidden}
.mine-row::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('/bg-flash-suave.webp') top center/100% auto repeat-y;
  mix-blend-mode:screen;opacity:.35}
.mine-row>*{position:relative;z-index:1}

.mr-ic{width:40px;height:40px;border-radius:11px;background:linear-gradient(150deg,#1E8A52,#0C3F26);color:#fff;display:grid;place-items:center;flex:0 0 auto;overflow:hidden}
.mr-ic img{width:100%;height:100%;object-fit:cover;display:block}
.mr-ic.flash{background:linear-gradient(150deg,#F0552F,#c23d1c)}
.mr-ic svg{width:19px;height:19px}
.mr-body{flex:1;min-width:0}
.mr-t{font-weight:700;font-size:13.5px;color:var(--ink)}
.mr-s{font-size:11.5px;color:var(--muted);margin-top:2px}
.mr-del{flex:0 0 auto;background:none;border:1px solid var(--line);color:var(--muted);font-size:11px;font-weight:600;padding:6px 11px;border-radius:9px;cursor:pointer}
.mr-del:hover{border-color:var(--flash);color:var(--flash)}

/* ===== Card de promoção (home) ===== */
.card.promo .ph.promo{background:linear-gradient(140deg,#F0552F,#c23d1c);position:relative}
.promo-badge{position:absolute;top:8px;left:8px;background:var(--acid);color:#10221a;font-family:'Oswald';font-weight:700;font-size:10px;text-transform:uppercase;padding:3px 8px;border-radius:7px;max-width:85%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card.promo .body .m{display:flex;align-items:center;gap:4px}
.card.promo .body .m svg{width:12px;height:12px;flex:0 0 auto}

/* ===== Cadastro cliente: opção de notificação ===== */
.notify-opt{display:flex;gap:10px;align-items:flex-start;background:rgba(34,50,42,.6);border:1px solid var(--line);border-radius:12px;padding:12px;margin:14px 0;cursor:pointer}
.notify-opt input{margin-top:2px;width:18px;height:18px;accent-color:var(--green-on);flex:0 0 auto}
.notify-opt span{font-size:12.5px;line-height:1.45;color:var(--ink)}
.notify-opt b{color:var(--ink)}
.onb .notify-opt{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.onb .notify-opt span{color:#e8efe9}

/* ===== Botão Seguir ===== */
.follow-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;background:var(--acid);color:#10221a;border:none;font-family:'Oswald';font-weight:700;font-size:11px;text-transform:uppercase;padding:8px 12px;border-radius:20px;cursor:pointer}
.follow-btn svg{width:13px;height:13px}
.follow-btn.on{background:transparent;border:1px solid var(--green-on);color:var(--green-on)}

/* ===================================================================
   NOTIFICAÇÃO MONSTERINK — mãozinha eletrificada pulsante (marca registrada)
   =================================================================== */
.mi-notify-pop{
  position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 14px);transform:translate(-50%,-140%);
  z-index:300;display:flex;align-items:center;gap:13px;
  background:linear-gradient(135deg,#1a1030,#0d0820);border:1px solid rgba(52,226,7,.45);
  border-radius:18px;padding:12px 18px 12px 12px;max-width:min(92vw,420px);
  box-shadow:0 12px 40px rgba(0,0,0,.5), 0 0 22px rgba(52,226,7,.25);
  opacity:0;transition:transform .38s cubic-bezier(.2,1.2,.3,1), opacity .3s}
.mi-notify-pop.show{transform:translate(-50%,0);opacity:1}

.mi-hand-wrap{position:relative;width:52px;height:52px;flex:0 0 auto;display:grid;place-items:center}
.mi-hand{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 0 5px rgba(52,226,7,.9)) drop-shadow(0 0 12px rgba(52,226,7,.55));
  animation:mi-buzz .5s ease-in-out infinite, mi-pulse 1.1s ease-in-out infinite}
/* anel de energia que expande */
.mi-ring{position:absolute;inset:2px;border-radius:50%;border:2px solid rgba(52,226,7,.75);
  animation:mi-ripple 1.3s ease-out infinite;pointer-events:none}
/* faíscas elétricas */
.spark{position:absolute;width:3px;height:3px;border-radius:50%;background:#7dff3a;
  box-shadow:0 0 6px 2px rgba(125,255,58,.9);opacity:0}
.spark.s1{top:-2px;left:44%;animation:mi-spark .9s ease-out infinite}
.spark.s2{top:40%;right:-3px;animation:mi-spark .9s ease-out .25s infinite}
.spark.s3{bottom:-2px;left:38%;animation:mi-spark .9s ease-out .5s infinite}
.spark.s4{top:36%;left:-3px;animation:mi-spark .9s ease-out .72s infinite}

.mi-notify-text{min-width:0}
.mi-notify-title{font-family:'Grenze Gotisch',serif;font-weight:700;font-size:15px;color:var(--acid);line-height:1}
.mi-notify-msg{font-size:12.5px;color:#e8efe9;margin-top:4px;line-height:1.35;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

@keyframes mi-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes mi-buzz{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(.6px,-.6px) rotate(1.5deg)}
  50%{transform:translate(-.5px,.5px) rotate(-1.5deg)}75%{transform:translate(.5px,.4px) rotate(1deg)}100%{transform:translate(0,0) rotate(0)}}
@keyframes mi-ripple{0%{transform:scale(.7);opacity:.85}100%{transform:scale(1.5);opacity:0}}
@keyframes mi-spark{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1.3)}100%{opacity:0;transform:scale(.5) translateY(-6px)}}

/* respeita quem prefere menos animação */
@media (prefers-reduced-motion:reduce){
  .mi-hand,.mi-ring,.spark{animation:none}
  .mi-hand{filter:drop-shadow(0 0 6px rgba(52,226,7,.7))}
}

/* ===== Sino de notificações + badge contador ===== */
/* ===== Logo MonsterInk como botão de Alertas ===== */
/* Centralizado na altura da Hero, não ancorado no topo: a Hero muda de altura
   por tela (78/118/170px) e um "top" fixo deixava o mascote sempre puxado para
   cima, com um vão vazio embaixo. */
/* top:0;bottom:0;margin:auto 0 em vez de top:50%+translateY: a topbar tem altura
   auto (definida pelo conteudo em fluxo), e top:50% num filho absolute de pai com
   altura auto resolve de forma ambigua (o navegador usa a altura calculada ANTES
   do conteudo estabilizar). O truque top/bottom:0 + margin:auto nao tem essa
   ambiguidade e centraliza de verdade. A altura e fixa: padding 4px*2 + imagem 72px.
   top:env(safe-area-inset-top) em vez de top:0: a topbar tem padding-top de
   safe-area+18px, mas padding-bottom fixo de so 18px — em aparelho com notch, o
   "vao" de cima e bem maior que o de baixo. Centralizar na altura TOTAL (que
   inclui esse vao desigual) empurrava o mascote pra cima do meio visual real.
   Pulando a safe-area no top, o espaco de centralizacao passa a ser simetrico
   (18px em cima, conteudo, 18px embaixo) independente do tamanho do notch. */
.mi-logo-btn{position:absolute;top:env(safe-area-inset-top,0px);bottom:0;margin:auto 0;height:80px;right:16px;
  background:none;border:none;padding:4px;cursor:pointer;line-height:0;
  -webkit-tap-highlight-color:transparent;transition:transform .12s}
.mi-logo-btn:active{transform:scale(.92)}
.mi-logo-btn .mi-logo{position:static;transform:none;height:72px;width:auto;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.42))}
.mi-logo-btn.has-unread .mi-logo{animation:mi-logo-glow 1.6s ease-in-out infinite}
@keyframes mi-logo-glow{
  0%,100%{filter:drop-shadow(0 2px 6px rgba(0,0,0,.42)) drop-shadow(0 0 3px rgba(240,85,47,.55))}
  50%{filter:drop-shadow(0 2px 6px rgba(0,0,0,.42)) drop-shadow(0 0 12px rgba(240,85,47,.95)) drop-shadow(0 0 20px rgba(240,85,47,.6))}
}
.mi-logo-badge{position:absolute;bottom:2px;left:2px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;
  background:var(--flash);color:#fff;font-family:'Oswald',sans-serif;font-weight:700;font-size:11.5px;
  display:none;place-items:center;box-shadow:0 0 0 2.5px #14251c;line-height:1;z-index:2}

/* ===== Central de notificações (sheet) ===== */
.ntf-sheet{max-height:78vh;display:flex;flex-direction:column}
.ntf-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.ntf-readall{background:none;border:none;color:var(--green-on);font-weight:600;font-size:12.5px;cursor:pointer}
.ntf-list{overflow-y:auto;margin:0 -4px;padding:0 4px}
.ntf-item{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:14px;margin-bottom:8px;background:var(--well);position:relative}
.ntf-item.unread{background:rgba(37,247,8,.09);border:1px solid rgba(37,247,8,.28)}
.ntf-item.unread::before{content:"";position:absolute;top:14px;right:12px;width:8px;height:8px;border-radius:50%;background:var(--flash)}
.ntf-hand{width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;
  filter:drop-shadow(0 0 4px rgba(52,226,7,.55))}
.ntf-hand img{width:100%;height:100%;object-fit:contain}
.ntf-item.unread .ntf-hand img{animation:mi-pulse 1.3s ease-in-out infinite}
.ntf-body{flex:1;min-width:0}
.ntf-title{font-family:'Grenze Gotisch',serif;font-weight:700;font-size:15px;color:var(--ink)}
.ntf-msg{font-size:13px;color:var(--muted);margin-top:2px;line-height:1.4}
.ntf-time{font-size:11px;color:var(--muted);opacity:.7;margin-top:5px}
.ntf-empty{text-align:center;padding:30px 16px;color:var(--ink)}

/* ===== Notificação/itens clicáveis ===== */
.mi-notify-pop.clickable{cursor:pointer}
.ntf-item.clickable{cursor:pointer}
.ntf-item.clickable:active{transform:scale(.98)}
.ntf-go{flex:0 0 auto;color:var(--muted);display:grid;place-items:center;align-self:center}
.ntf-go svg{width:16px;height:16px}
.event-card{cursor:pointer}

/* ===== Detalhe de promoção/evento (página cheia, mesmo padrão de anúncio/loja) ===== */
.dt-badge{display:inline-flex;align-items:center;gap:6px;background:var(--green);color:#fff;font-family:'Oswald';text-transform:uppercase;font-weight:700;font-size:11px;letter-spacing:.5px;padding:5px 11px;border-radius:20px;margin-bottom:12px}
.dt-badge.flash{background:var(--flash)}
.dt-badge svg{width:14px;height:14px}
.dt-title{font-family:'Grenze Gotisch',serif;font-weight:700;font-size:25px;color:var(--ink);line-height:1.1}
.dt-deal{display:inline-block;background:var(--acid);color:#10221a;font-family:'Oswald';font-weight:700;font-size:16px;padding:6px 14px;border-radius:10px;margin-top:12px}
.dt-meta{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-top:12px}
.dt-meta svg{width:14px;height:14px;flex:0 0 auto}
.dt-desc{font-size:14px;color:var(--ink);line-height:1.55;margin-top:14px;white-space:pre-wrap}

/* ===== Slogan compondo a logomarca (topbar da home) ===== */
.brand-slogan{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:1.8px;font-size:9.5px;font-weight:500;color:#9aa7a0;margin-top:1px}
.brand-slogan .p{color:var(--roxo-lite);font-weight:700}

/* ===================================================================
   FEED — tela principal
   =================================================================== */
.feed-scope{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;align-items:center}
.fs-opt{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);color:#dfe8e1;font-family:'Oswald';font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;padding:7px 13px;border-radius:20px;cursor:pointer}
.fs-opt svg{width:13px;height:13px}
.fs-opt.on{background:var(--acid);color:#10221a;border-color:var(--acid)}
.feed-pad{padding-top:0;padding-left:5px;padding-right:5px}

/* barra de compor (topo do feed) — o principal convite pra postar agora que
   o Postar saiu da tabbar: anel pulsante + badge "+" no avatar e frases que
   revezam sozinhas, pra chamar mais atenção sem precisar de um botão novo */
.compose-bar{display:flex;align-items:center;gap:11px;width:100%;background:rgba(31,49,40,.94);
  border:1px solid rgba(37,247,8,.3);box-shadow:0 0 18px -6px rgba(37,247,8,.3);
  border-radius:16px;padding:11px 14px;margin-bottom:16px;cursor:pointer;backdrop-filter:blur(2px);
  position:relative;isolation:isolate;overflow:hidden}
.compose-bar::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('/bg-flash-suave.webp') top center/100% auto repeat-y;
  mix-blend-mode:screen;opacity:.35}
.compose-bar>*{position:relative;z-index:1}

.cb-av-wrap{position:relative;flex:0 0 auto}
.cb-ring{position:absolute;inset:-4px;border-radius:14px;border:2px solid var(--acid);opacity:.6;pointer-events:none;animation:cbPulse 2.4s ease-out infinite}
@keyframes cbPulse{0%{transform:scale(.88);opacity:.65}70%,100%{transform:scale(1.42);opacity:0}}
.cb-av{width:38px;height:38px;border-radius:11px;overflow:hidden;background:var(--green-deep);color:#4FC24B;display:grid;place-items:center;flex:0 0 auto}
.cb-av img{width:100%;height:100%;object-fit:cover}
.cb-av svg{width:20px;height:20px}
.cb-badge{position:absolute;bottom:-4px;right:-4px;width:17px;height:17px;border-radius:50%;background:var(--acid);
  display:grid;place-items:center;box-shadow:0 0 0 2px rgba(31,49,40,1)}
.cb-badge svg{width:11px;height:11px;stroke:var(--stamp-tx);stroke-width:3}
.compose-bar>span{flex:1;text-align:left;color:var(--muted);font-size:13.5px;transition:opacity .25s ease}
.compose-bar>span.cb-fade{opacity:0}
.compose-bar>svg{width:20px;height:20px;color:var(--green-on);flex:0 0 auto}

/* card de post */
.post{background:rgba(31,49,40,.96);border:1px solid var(--line);border-radius:18px;margin-bottom:10px;overflow:hidden;backdrop-filter:blur(2px);
  position:relative;isolation:isolate}
.post::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('/bg-flash-suave.webp') top center/100% auto repeat-y;
  mix-blend-mode:screen;opacity:.35}
.post>*{position:relative;z-index:1}
.post-head{display:flex;align-items:center;gap:11px;padding:13px 14px}
.post-av{width:42px;height:42px;border-radius:12px;overflow:hidden;background:var(--green-deep);color:#4FC24B;display:grid;place-items:center;flex:0 0 auto}
.post-av img{width:100%;height:100%;object-fit:cover}
.post-av svg{width:22px;height:22px}
.post-id{flex:1;min-width:0}
.post-name{font-weight:700;font-size:14px;color:var(--ink);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.post-meta{font-size:11.5px;color:var(--muted);margin-top:1px}
/* ações do post, sempre visíveis na base do card */
.post-acts{display:flex;gap:6px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line-2)}
.pa-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 4px;border-radius:10px;
  background:none;border:none;color:var(--muted);cursor:pointer;
  font-family:'Oswald';font-weight:500;font-size:11.5px;letter-spacing:.3px;text-transform:uppercase}
.pa-btn svg{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:1.9;flex:0 0 auto}
.pa-btn:active{background:var(--well)}
.pa-btn.on{color:var(--green-on)}
.pa-btn.on svg{stroke:var(--green-on);fill:var(--green-on)}
@media(max-width:360px){.pa-btn span{display:none}}
.role-badge{font-family:'Oswald';font-weight:600;font-size:9px;text-transform:uppercase;letter-spacing:.5px;padding:2px 7px;border-radius:6px}
.role-badge.art{background:rgba(37,247,8,.16);color:#5BE84A}
.role-badge.cli{background:rgba(240,85,47,.14);color:#FF8A6A}
.role-badge.adm{background:var(--deep);color:var(--acid)}
.post-text{padding:0 14px 12px;font-size:14.5px;line-height:1.5;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.post-photo{width:100%;background:#000}
.post-photo img{width:100%;display:block;max-height:520px;object-fit:cover}

/* ===== Link colado numa publicação ===== */
/* --green-on e a cor de texto verde (o --green so vale como fundo); sublinhado
   discreto porque no meio de um paragrafo a cor sozinha nao basta pra dizer que
   e clicavel. */
.post-link{color:var(--green-on);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:rgba(51,168,99,.45);word-break:break-all}
.post-link:active{opacity:.6}

/* o card de capa: mesma largura do texto, colado abaixo dele */
.lp{display:block;margin:0 14px 12px;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--well);cursor:pointer;text-align:left;transition:border-color .15s}
.lp:active{border-color:var(--green-on)}
.lp-capa{position:relative;background:#000;line-height:0}
.lp-capa img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
/* botao de play sobre a capa do video */
.lp-play{position:absolute;inset:0;margin:auto;width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(19,30,24,.72);
  border:1.5px solid rgba(233,239,233,.35);backdrop-filter:blur(2px)}
.lp-play svg{width:22px;height:22px;color:#fff;margin-left:2px}
.lp-body{padding:11px 13px}
.lp-site{font-family:'Oswald',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.7px;
  text-transform:uppercase;color:var(--green-on);margin-bottom:4px}
.lp-t{font-size:14px;font-weight:600;color:var(--ink);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lp-d{font-size:12.5px;color:var(--muted);line-height:1.4;margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lp-d:empty{display:none}
/* o player entra no lugar da capa, no mesmo card */
.lp-video{position:relative;aspect-ratio:16/9;background:#000}
.lp-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* menu / linhas de ação */
.menu-row{display:flex;align-items:center;gap:11px;width:100%;background:none;border:none;border-radius:12px;padding:14px;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer;text-align:left}
.menu-row svg{width:19px;height:19px}
.menu-row:hover{background:var(--well)}
.menu-row.danger{color:var(--flash)}

/* compositor */
.compose-head{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.compose-text{width:100%;min-height:130px;border:1px solid var(--line);border-radius:14px;padding:14px;font-family:'Inter',sans-serif;font-size:15px;line-height:1.5;color:var(--ink);resize:vertical;background:var(--surface)}
.compose-text:focus{outline:none;border-color:var(--green-on)}
.compose-count{text-align:right;font-size:11.5px;color:var(--muted);margin-top:5px}
.compose-photo{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--well);border:1px dashed var(--line);border-radius:14px;padding:13px;font-family:'Oswald';font-weight:600;text-transform:uppercase;font-size:12.5px;letter-spacing:.5px;color:var(--green-on);cursor:pointer;margin-top:12px}
.compose-photo svg{width:17px;height:17px}
.compose-preview{position:relative;margin-top:12px;border-radius:14px;overflow:hidden}
.compose-preview img{width:100%;display:block;max-height:340px;object-fit:cover}
.cp-remove{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;border:none;font-size:15px;cursor:pointer}

/* vazio */
.feed-empty{text-align:center;padding:36px 20px;color:var(--ink)}
.feed-empty h3{font-family:'Grenze Gotisch',serif;font-weight:700;font-size:21px;margin-bottom:8px}
.feed-empty p{font-size:13.5px;color:var(--muted);line-height:1.5;max-width:320px;margin:0 auto}

/* ===================================================================
   NUDGE — balão instigador (incentiva a postar)
   =================================================================== */
.mi-nudge{
  position:fixed;left:12px;right:12px;bottom:calc(72px + env(safe-area-inset-bottom,0px));
  max-width:440px;margin:0 auto;z-index:250;
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(135deg,#1a1030,#0d0820);border:1px solid rgba(37,247,8,.4);
  border-radius:18px;padding:12px 40px 12px 12px;
  box-shadow:0 12px 34px rgba(0,0,0,.5), 0 0 18px rgba(37,247,8,.18);
  transform:translateY(160%);opacity:0;transition:transform .42s cubic-bezier(.2,1.1,.3,1),opacity .3s}
.mi-nudge.show{transform:translateY(0);opacity:1}
.nudge-hand{width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;
  filter:drop-shadow(0 0 5px rgba(37,247,8,.8));animation:mi-pulse 1.5s ease-in-out infinite}
.nudge-hand img{width:100%;height:100%;object-fit:contain}
.nudge-body{flex:1;min-width:0}
.nudge-msg{color:#eef5ef;font-size:13.5px;line-height:1.35;font-weight:500}
.nudge-cta{margin-top:8px;display:inline-flex;align-items:center;gap:5px;background:var(--acid);color:#10221a;
  border:none;font-family:'Oswald';font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.5px;
  padding:7px 13px;border-radius:11px;cursor:pointer}
.nudge-cta svg{width:14px;height:14px}
.nudge-x{position:absolute;top:8px;right:10px;background:none;border:none;color:#8a94a0;font-size:16px;cursor:pointer;padding:4px;line-height:1}
.nudge-x:hover{color:#fff}
@media (prefers-reduced-motion:reduce){ .nudge-hand{animation:none} .mi-nudge{transition:opacity .3s} }

/* ===== Aviso de moderação ===== */
.mw-ic{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;margin:6px auto 0}
.mw-ic.warn{background:rgba(240,85,47,.14);color:var(--flash)}
.mw-ic.ban{background:rgba(20,32,25,.9);color:#fff}
.mw-ic svg{width:30px;height:30px}

/* ===== Avatar editável do cliente ===== */
.cli-avatar{position:relative;width:88px;height:88px;margin:0 auto 12px;border-radius:24px;overflow:hidden;background:var(--green-deep);color:#4FC24B;display:grid;place-items:center;border:none;cursor:pointer;padding:0}
.cli-avatar img{width:100%;height:100%;object-fit:cover}
.cli-avatar>svg{width:38px;height:38px}
.cli-av-edit{position:absolute;bottom:0;right:0;width:30px;height:30px;background:var(--acid);color:#10221a;display:grid;place-items:center;border-top-left-radius:12px}
.cli-av-edit svg{width:16px;height:16px}

/* ===================================================================
   PORTFÓLIO — edição
   =================================================================== */
.pf-head{text-align:center;padding-top:8px}
.pf-head .cli-avatar{margin:0 auto}
/* especialidades */
.spec-wrap{display:flex;flex-wrap:wrap;gap:8px}
.spec-chip{background:rgba(34,50,42,.85);border:1px solid var(--line);color:var(--ink);font-family:'Oswald';font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.4px;padding:8px 13px;border-radius:20px;cursor:pointer;transition:all .12s}
.spec-chip.on{background:var(--acid);color:#10221a;border-color:var(--acid);font-weight:700}
.spec-chip.custom{background:var(--roxo-lite);color:#fff;border-color:var(--roxo-lite)}
.pf-input{flex:1;border:1px solid var(--line);border-radius:12px;padding:11px 13px;font-family:'Inter',sans-serif;font-size:14px;color:var(--ink);background:var(--surface)}
.pf-input:focus{outline:none;border-color:var(--green-on)}
.pf-insta{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0 13px}
.pf-insta span{color:var(--muted);font-size:15px;font-weight:600}
.pf-insta .pf-input{border:none;background:none;padding:12px 0}
/* galerias */
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pf-thumb{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--well)}
.pf-thumb img{width:100%;height:100%;object-fit:cover}
.pf-del{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;border:none;font-size:12px;cursor:pointer;display:grid;place-items:center}
.pf-add{aspect-ratio:1;border-radius:12px;border:1.5px dashed var(--line);background:var(--well);color:var(--green-on);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;font-family:'Oswald';font-size:11px;text-transform:uppercase;font-weight:600}
.pf-add svg{width:22px;height:22px}

/* ===== Especialidades: select + tags ===== */
.pf-select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;font-family:'Inter',sans-serif;font-size:14px;color:var(--ink);background:var(--surface);cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239AAB9F' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:38px}
.pf-select:focus{outline:none;border-color:var(--green-on)}
.spec-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.spec-tag{display:inline-flex;align-items:center;gap:7px;background:var(--acid);color:#10221a;font-family:'Oswald';font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.4px;padding:7px 8px 7px 13px;border-radius:20px}
.spec-tag button{background:rgba(16,34,26,.25);color:#10221a;border:none;width:18px;height:18px;border-radius:50%;font-size:11px;cursor:pointer;display:grid;place-items:center;line-height:1}

/* ===== Escolha de notificação no cadastro do cliente (2 opções) ===== */
.notify-radios{display:flex;flex-direction:column;gap:10px;margin:4px 0 4px}
.notify-radio{display:flex;align-items:flex-start;gap:11px;background:var(--white);border:1.5px solid var(--line);border-radius:14px;padding:13px 14px;cursor:pointer;transition:border-color .15s,background .15s;
  position:relative;isolation:isolate;overflow:hidden}
.notify-radio::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('/bg-flash-suave.webp') top center/100% auto repeat-y;
  mix-blend-mode:screen;opacity:.35}
.notify-radio>*{position:relative;z-index:1}

.notify-radio input{position:absolute;opacity:0;pointer-events:none}
.notify-radio .nr-box{flex-shrink:0;width:20px;height:20px;border-radius:50%;border:2px solid #6b7a70;margin-top:1px;position:relative;transition:border-color .15s}
.notify-radio .nr-txt{font-size:13.5px;line-height:1.45;color:var(--ink)}
.notify-radio .nr-txt b{color:#fff;font-weight:700}
/* selecionado: fundo verde sólido + texto escuro (alto contraste, legível) */
.notify-radio:has(input:checked){border-color:var(--green);background:var(--green)}
.notify-radio input:checked ~ .nr-txt{color:#0d2b10}
.notify-radio input:checked ~ .nr-txt b{color:#052905}
.notify-radio input:checked ~ .nr-box{border-color:#0d2b10;background:#E9EFE9}
.notify-radio input:checked ~ .nr-box::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#0d2b10}

/* ===== Barra de busca (usados) ===== */
.search-bar{display:flex;align-items:center;gap:9px;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:0 13px;margin-bottom:12px}
.search-bar svg{width:18px;height:18px;color:var(--muted);flex-shrink:0}
.search-bar input{flex:1;border:none;background:none;padding:13px 0;font-family:'Inter',sans-serif;font-size:14.5px;color:var(--ink)}
.search-bar input:focus{outline:none}
.search-bar input::placeholder{color:var(--muted)}
.sb-clear{background:var(--well);border:none;color:var(--muted);width:24px;height:24px;border-radius:50%;font-size:12px;cursor:pointer;flex-shrink:0}

/* ===== Botão remover produto da loja ===== */
.mc-del{display:inline-flex;align-items:center;gap:5px;background:none;border:none;color:var(--flash);font-size:12px;font-weight:600;cursor:pointer;margin-top:6px;padding:0}
.mc-del svg{width:13px;height:13px}

/* ===== Página pública do tatuador ===== */
.ap-head{text-align:center;padding:8px 0 4px}
.ap-avatar{width:96px;height:96px;border-radius:26px;overflow:hidden;margin:0 auto 12px;background:var(--well);display:grid;place-items:center;color:var(--green-on);border:2px solid var(--line)}
.ap-avatar img{width:100%;height:100%;object-fit:cover}
.ap-avatar>svg{width:42px;height:42px}
.ap-name{font-family:'Grenze Gotisch',serif;font-size:26px;line-height:1;color:var(--ink)}
.ap-loc{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:13px;margin-top:8px}
.ap-loc svg{width:13px;height:13px}
.ap-actions{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.ap-insta{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(45deg,#f09433,#dc2743,#bc1888);border:none;color:#fff;font-weight:700;font-size:13px;padding:10px 17px;border-radius:22px;cursor:pointer;box-shadow:0 2px 8px rgba(188,24,136,.35)}
.ap-insta svg{width:16px;height:16px;stroke:#fff;fill:none}
.ap-insta:active{transform:scale(.96)}
.ap-wa{display:inline-flex;align-items:center;gap:6px;background:#25D366;border:none;color:#fff;font-weight:700;font-size:13px;padding:10px 17px;border-radius:22px;cursor:pointer;box-shadow:0 2px 8px rgba(37,211,102,.35)}
.ap-wa svg{width:16px;height:16px;stroke:#fff;fill:none}
.ap-wa:active{transform:scale(.96)}
.ap-share{display:inline-flex;align-items:center;gap:6px;background:var(--well);border:1px solid var(--line);color:var(--ink);
  font-weight:600;font-size:13px;padding:10px 17px;border-radius:22px;cursor:pointer}
.ap-share svg{width:16px;height:16px;stroke:var(--green-on);fill:none;stroke-width:1.9}
.ap-share:active{transform:scale(.96)}
/* pedir orçamento direto a este tatuador, sem passar pelo WhatsApp */
.ap-orcar{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;margin-top:14px;padding:14px;
  border-radius:15px;background:var(--roxo);border:1px solid var(--roxo-lite);color:#fff;cursor:pointer}
.ap-orcar svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:1.8;margin-bottom:3px}
.ap-orcar span{font-family:'Oswald';font-weight:600;font-size:14.5px;letter-spacing:.3px}
.ap-orcar small{font-size:11.5px;color:rgba(255,255,255,.75)}
.ap-orcar:active{transform:scale(.98)}
/* pedido que chegou direto pra este tatuador */
.budget-card.direto{border-color:var(--roxo-lite);background:rgba(102,5,173,.10)}
.bg-direto{display:flex;align-items:center;gap:7px;font-family:'Oswald';font-weight:500;font-size:11.5px;
  letter-spacing:.4px;text-transform:uppercase;color:var(--roxo-lite);margin-bottom:10px}
.bg-direto svg{stroke:var(--roxo-lite);fill:none;stroke-width:2}
.ap-bio{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;font-size:14px;line-height:1.55;color:var(--ink);margin-top:18px;white-space:pre-wrap;
  position:relative;isolation:isolate;overflow:hidden}
.ap-bio::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('/bg-flash-suave.webp') top center/100% auto repeat-y;
  mix-blend-mode:screen;opacity:.35}
.ap-bio>*{position:relative;z-index:1}

.ap-specs{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.ap-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:6px}
.ap-shot{aspect-ratio:1;border-radius:12px;overflow:hidden;border:none;padding:0;cursor:pointer;background:var(--well)}
.ap-shot img{width:100%;height:100%;object-fit:cover;display:block}
/* pílula "Novas publicações" do Feed */
.feed-new-btn{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));left:50%;
  transform:translateX(-50%) translateY(-70px);display:flex;align-items:center;gap:7px;
  background:var(--acid);color:var(--stamp-tx);font-family:'Oswald',sans-serif;font-weight:700;
  font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;padding:11px 20px;border-radius:30px;
  border:none;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.4);z-index:60;opacity:0;pointer-events:none;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .25s ease}
.feed-new-btn svg{width:15px;height:15px;stroke:var(--stamp-tx)}
.feed-new-btn.show{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
.feed-new-btn:active{transform:translateX(-50%) translateY(0) scale(.95)}
/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:500;display:grid;place-items:center;padding:20px;animation:fadeIn .15s}
.lightbox img{max-width:100%;max-height:90vh;border-radius:8px}
.lb-close{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));right:16px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.22);color:#fff;border:none;font-size:18px;cursor:pointer;z-index:1}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ===== Tamanhos de ícone controlados (evita SVG gigante) ===== */
.ic-xs{width:13px;height:13px;display:inline-block;vertical-align:middle;flex-shrink:0}
.ic-sm{width:18px;height:18px;display:inline-block;vertical-align:middle;flex-shrink:0}
.ph-ic{width:56px;height:56px;color:rgba(255,255,255,.55)}   /* placeholder de card sem foto: ícone médio, não gigante */
.avatar .ph svg,.avatar .ph .ic-sm{width:40%;height:40%}

/* ===== Card de artista com miniaturas do portfólio ===== */
.artist-row .ac-top{display:flex;gap:12px;align-items:center}
.ac-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.ac-shot{aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--well)}
.ac-shot img{width:100%;height:100%;object-fit:cover;display:block}
.ac-shot.empty{background:repeating-linear-gradient(45deg,var(--well),var(--well) 6px,transparent 6px,transparent 12px);opacity:.5}
.ac-noshots{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;padding:14px;background:var(--well);border-radius:12px;color:var(--muted);font-size:12.5px}
.ac-chev{color:var(--muted);flex-shrink:0}

/* ===== Fotos no detalhe do anúncio (strip horizontal) ===== */
.detail-hero.has-photo{height:auto;aspect-ratio:auto;background:#0e0f0e;padding:0;display:block}
.dh-strip{display:flex;width:100%;overflow-x:auto;scroll-snap-type:x mandatory;gap:2px;-webkit-overflow-scrolling:touch}
.dh-img{width:100%;flex:0 0 100%;aspect-ratio:1;object-fit:cover;scroll-snap-align:center;cursor:pointer}
.dh-count{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));right:16px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;padding:5px 11px;border-radius:20px;display:flex;align-items:center;gap:5px;backdrop-filter:blur(3px);z-index:3}
/* botão voltar sobre a foto */
.dh-back{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));left:16px;background:rgba(0,0,0,.45);border-radius:50%;width:38px;height:38px;padding:0;justify-content:center;margin:0;backdrop-filter:blur(3px)}
/* setas de navegação — bem visíveis */
.dh-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.5);border:1.5px solid rgba(255,255,255,.5);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(4px);transition:opacity .15s,transform .1s;z-index:3}
.dh-nav:active{transform:translateY(-50%) scale(.9)}
.dh-nav svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2.4}
.dh-prev{left:12px}
.dh-next{right:12px}
/* bolinhas indicadoras */
.dh-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:3;background:rgba(0,0,0,.3);padding:6px 10px;border-radius:20px;backdrop-filter:blur(3px)}
.dh-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);transition:all .2s}
.dh-dot.on{background:var(--green);width:22px;border-radius:4px}

/* ===== Ações (editar/remover) nas linhas de promo/evento no perfil ===== */
.mr-actions{display:flex;gap:6px;flex-shrink:0}
.mr-edit{background:var(--surface);border:1.5px solid var(--line);color:var(--ink);font-size:12px;font-weight:600;padding:6px 12px;border-radius:18px;cursor:pointer}
.mr-edit:active{background:var(--well)}

/* ===== Convite para ativar notificações (após seguir) ===== */
.push-invite{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:400;display:flex;align-items:flex-end;justify-content:center;padding:0;animation:fadeIn .2s}
.pi-card{background:var(--paper,#F5F5F0);border-radius:22px 22px 0 0;padding:26px 22px calc(26px + env(safe-area-inset-bottom,0px));width:100%;max-width:480px;text-align:center;animation:slideUp .25s}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.pi-ic{width:56px;height:56px;border-radius:50%;background:var(--green);display:grid;place-items:center;margin:0 auto 14px;color:#0d2b10}
.pi-ic svg{width:28px;height:28px}
.pi-title{font-family:'Grenze Gotisch',serif;font-size:24px;color:var(--ink);line-height:1}
.pi-txt{color:var(--muted);font-size:13.5px;line-height:1.5;margin:10px 0 18px}

/* ===== Card do feed clicável ===== */
.post-clickable{cursor:pointer;transition:transform .1s,box-shadow .15s}
.post-clickable:active{transform:scale(.988)}
.post-cta{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);color:var(--green-on);font-family:'Oswald',sans-serif;font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.4px}
.post-cta svg{width:13px;height:13px}

/* ===== Abas do feed (Feed / Hot Tips) ===== */
/* As duas abas sao destinos diferentes (posts e videos), nao um seletor de um
   valor so. Por isso cada uma e um botao proprio, com borda e respiro entre
   elas, em vez de fatias dentro de uma pilula unica — que fazia parecer um
   controle so. Ja "Todos / Seguindo" (.feed-sub) e um filtro do que esta na
   aba, entao vem menor e logo abaixo: hierarquia visual em vez de tres botoes
   iguais disputando a mesma linha. */
/* Com 4 abas a fileira não cabe em 375px: rola na horizontal, sem barra
   aparente. As pontas "vazam" de leve — é a deixa visual de que tem mais. */
.feed-tabs{display:flex;gap:8px;margin:0 0 14px;background:none;padding:0;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.feed-tabs::-webkit-scrollbar{display:none}
.feed-tabs .ft-opt{flex:1 0 auto;white-space:nowrap;padding-left:16px;padding-right:16px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px}
.feed-tabs .ft-opt svg{width:14px;height:14px;stroke-width:1.8}
/* logo abaixo da Hero, encostado mas sem sobrepor */
.feed-tabs-hero{margin-top:8px;margin-bottom:10px}
/* Aba NÃO selecionada precisa parecer clicável: texto claro (--muted sumia no
   fundo) e borda verde forte, fixa — o pulso animado chegou a existir mas
   cansava; a borda parada já diz "dá pra tocar". A selecionada é sólida. */
.ft-opt{flex:1;padding:11px 4px;border:1.5px solid var(--line);background:var(--well);border-radius:13px;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:12.5px;color:var(--ink);cursor:pointer;
  transition:all .15s;text-transform:uppercase;letter-spacing:.4px}
.ft-opt:not(.on){border-color:rgba(51,168,99,.85)}
.ft-opt:active{transform:scale(.97)}
/* --surface sobre --well dava 1,09:1 — praticamente a mesma cor. O carimbo
   claro (branco) resolvia o contraste mas destoava da identidade verde do
   app. Verde institucional como fundo + texto branco: a mesma regra ja
   documentada pro --green (so como fundo, nunca como texto) — 5,34:1. */
.ft-opt.on{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 2px 10px rgba(28,122,74,.45)}

/* filtro interno da aba: Todos | Seguindo */
.feed-sub{display:flex;gap:6px;margin:0 0 14px}
/* mesmo tratamento das abas: opção não escolhida fica clara, com borda verde */
.fs-opt{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--line);background:transparent;color:var(--ink);
  font-family:'Oswald',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.4px;text-transform:uppercase;
  transition:all .15s}
.fs-opt:not(.on){border-color:rgba(51,168,99,.85)}
.fs-opt svg{width:13px;height:13px}
.fs-opt:active{transform:scale(.96)}
.fs-opt.on{border-color:var(--green-on);color:var(--green-on);background:rgba(51,168,99,.12)}

/* ===== Opções de notificação (radio cards) no perfil do cliente ===== */
.notify-choice{display:flex;align-items:flex-start;gap:11px;background:var(--white);border:1.5px solid var(--line);border-radius:14px;padding:13px 14px;cursor:pointer;margin-bottom:10px;transition:border-color .15s,background .15s;
  position:relative;isolation:isolate;overflow:hidden}
.notify-choice::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('/bg-flash-suave.webp') top center/100% auto repeat-y;
  mix-blend-mode:screen;opacity:.35}
.notify-choice>*{position:relative;z-index:1}

.notify-choice input{position:absolute;opacity:0;pointer-events:none}
.notify-choice.on{border-color:var(--green-on);background:rgba(51,168,99,.14)}
.notify-choice .nc-box{width:34px;height:34px;border-radius:10px;background:var(--well);display:grid;place-items:center;color:var(--muted);flex-shrink:0;transition:all .15s}
.notify-choice .nc-box svg{width:17px;height:17px}
.notify-choice.on .nc-box{background:var(--green);color:#fff}
.notify-choice .nc-txt{font-size:13px;line-height:1.4;color:var(--ink);padding-top:2px}
.notify-choice .nc-txt b{font-weight:700}

/* ===== Botão contornado + divisor "ou" (login evidente) ===== */
.btn-outline{background:transparent;border:1.5px solid var(--green-on);color:var(--green-on);border-radius:14px;padding:13px;width:100%;font-family:'Oswald',sans-serif;font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:background .15s}
.btn-outline:active{background:#eef7f0}
.btn-outline svg{width:17px;height:17px}
.or-divider{display:flex;align-items:center;gap:12px;margin:18px 0 12px;color:var(--muted-2)}
.or-divider::before,.or-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.or-divider span{font-family:'Oswald',sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:1px}

/* ===== Fluxo de código de acesso ===== */
.code-steps{margin:18px 0 16px}
.cs-item{display:flex;align-items:center;gap:12px;padding:10px 0;font-size:13.5px;color:var(--ink)}
.cs-n{width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;font-family:'Oswald',sans-serif;font-weight:700;font-size:13px;display:grid;place-items:center;flex-shrink:0}
.code-input-wrap{margin:6px 0 14px}
.code-input-wrap input{width:100%;text-align:center;font-family:'Oswald',sans-serif;font-size:34px;font-weight:700;letter-spacing:12px;padding:16px 0;border:2px solid var(--line);border-radius:16px;color:var(--ink);background:var(--white)}
.code-input-wrap input:focus{outline:none;border-color:var(--green-on)}
.code-input-wrap input::placeholder{color:#cfd3c9;letter-spacing:12px}

/* ===== Card de sugestão de instalação (pós-login) ===== */
.pi-overlay{position:fixed;inset:0;z-index:200;background:rgba(6,10,7,.72);backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center;animation:fadein .2s}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.pi-card{background:linear-gradient(165deg,#183a28,#0e2419 70%);border:1px solid rgba(37,247,8,.18);border-radius:24px 24px 0 0;padding:28px 22px calc(24px + env(safe-area-inset-bottom,0px));width:100%;max-width:480px;position:relative;animation:slideup .28s cubic-bezier(.2,.8,.2,1);box-shadow:0 -8px 40px rgba(0,0,0,.5)}
@keyframes slideup{from{transform:translateY(100%)}to{transform:translateY(0)}}
.pi-card .h2{color:#fff}
.pi-card .pi-lead{text-align:center;color:#c7d4c9;font-size:14px;line-height:1.55;margin:10px 4px 4px}
.pi-card .pi-lead b{color:var(--acid);font-weight:700}
.pi-x{position:absolute;top:16px;right:16px;width:32px;height:32px;border:none;background:rgba(255,255,255,.12);border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#dfe8e1}
.pi-x svg{width:16px;height:16px}
.pi-steps{margin-top:20px;display:flex;flex-direction:column;gap:14px}
.pi-step{display:flex;align-items:center;gap:13px;font-size:14px;color:#eaf2ec}
.pi-step svg{width:22px;height:22px;color:var(--acid);flex-shrink:0}
.pi-step b{font-weight:700;color:#fff}
.pi-card .textlink{color:#9fb0a3}

/* ===== Itens "Em breve" com descrição (features de destaque) ===== */
/* margin-top dá o mesmo respiro que um .section-head daria: sem isso um bloco
   "em breve" sem título cola no rail de cima e parece parte dele. Quando vem
   logo depois de um título, o próprio título já separa — daí o reset abaixo. */
.soon-bigs{display:flex;flex-direction:column;gap:11px;margin-top:26px;margin-bottom:6px}
.section-head + .soon-bigs{margin-top:0}
.soon-big{display:flex;gap:13px;align-items:flex-start;background:var(--white);border:1px solid var(--line-2);border-radius:16px;padding:15px;
  position:relative;isolation:isolate;overflow:hidden}
.soon-big::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('/bg-flash-suave.webp') top center/100% auto repeat-y;
  mix-blend-mode:screen;opacity:.35}
.soon-big>*{position:relative;z-index:1}

.soon-big .sb-ic{width:44px;height:44px;border-radius:12px;background:rgba(28,122,74,.1);display:grid;place-items:center;flex-shrink:0}
.soon-big .sb-ic svg{width:23px;height:23px;stroke:var(--green-on);fill:none;stroke-width:1.8}
.soon-big .sb-t{font-family:'Grenze Gotisch',serif;font-weight:700;font-size:17px;line-height:1.15;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.soon-big .sb-d{font-size:13px;line-height:1.45;color:var(--muted);margin-top:5px}
.soon-big .badge.acid{font-size:9px;padding:2px 7px}

/* ===== ORÇAMENTOS ===== */
/* sheet genérico (reaproveita padrão do region-sheet) */
.sheet-overlay{position:fixed;inset:0;background:rgba(10,16,12,.55);backdrop-filter:blur(3px);z-index:200;display:flex;align-items:flex-end;justify-content:center;animation:fadein .15s ease;overflow-y:auto}
.sheet{width:460px;max-width:100%;background:var(--surface);border-radius:22px 22px 0 0;padding:20px 20px calc(env(safe-area-inset-bottom,0px) + 24px);animation:slideup .22s cubic-bezier(.2,.8,.2,1);max-height:92vh;overflow-y:auto;
  position:relative;isolation:isolate}
.sheet::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('/bg-flash-suave.webp') top center/100% auto repeat-y;
  mix-blend-mode:screen;opacity:.35}
.sheet>*{position:relative;z-index:1}

.sheet h3{font-family:'Grenze Gotisch',serif;font-weight:700;font-size:22px;color:var(--ink)}
.sheet textarea{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px;font-family:'Inter',sans-serif;font-size:14px;color:var(--ink);background:var(--white);resize:vertical}

/* CTA solicitar orçamento (perfil cliente) */
.budget-cta{display:flex;align-items:center;gap:13px;background:linear-gradient(135deg,#6605AD,#8b3ff0);color:#fff;border-radius:16px;padding:16px;margin-top:22px;cursor:pointer;box-shadow:0 6px 20px rgba(102,5,173,.3)}
.budget-cta .bc-ic{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.18);display:grid;place-items:center;flex-shrink:0}
.budget-cta .bc-ic svg{width:23px;height:23px;stroke:#fff}
.budget-cta .bc-t{font-family:'Grenze Gotisch',serif;font-weight:700;font-size:18px}
.budget-cta .bc-d{font-size:12.5px;opacity:.92;line-height:1.35;margin-top:2px}
.budget-cta > svg{width:20px;height:20px;stroke:#fff;flex-shrink:0;opacity:.8}

/* galeria de fotos no formulário */
.photo-gallery{display:flex;flex-wrap:wrap;gap:8px}
.pg-thumb{position:relative;width:64px;height:64px;border-radius:10px;overflow:hidden}
.pg-thumb img{width:100%;height:100%;object-fit:cover}
.pg-thumb button{position:absolute;top:2px;right:2px;width:20px;height:20px;border:none;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:11px;cursor:pointer;line-height:1}

/* checkbox de compartilhar whatsapp */
.share-check{display:flex;align-items:flex-start;gap:10px;background:rgba(28,122,74,.08);border:1px solid rgba(28,122,74,.2);border-radius:12px;padding:12px;margin-top:6px;font-size:12.5px;line-height:1.4;color:var(--ink);cursor:pointer}
.share-check input{margin-top:2px;flex-shrink:0}

/* cards de orçamento */
.budget-card{background:var(--white);border:1px solid var(--line-2);border-radius:16px;padding:15px;margin-bottom:12px;
  position:relative;isolation:isolate;overflow:hidden}
.budget-card::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('/bg-flash-suave.webp') top center/100% auto repeat-y;
  mix-blend-mode:screen;opacity:.35}
.budget-card>*{position:relative;z-index:1}

.budget-card.inbox{border-color:rgba(102,5,173,.25)}
.bg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.bg-idea{font-weight:600;font-size:14px;color:var(--ink);line-height:1.35;flex:1}
.bg-idea-full{font-size:14.5px;color:var(--ink);line-height:1.45;margin:10px 0 8px}
.bg-meta{font-size:12px;color:var(--muted);margin-top:5px}
.bg-client{display:flex;align-items:center;gap:11px;margin-bottom:4px}
.bg-client .ba-av{width:40px;height:40px;border-radius:11px;overflow:hidden;background:var(--well);display:grid;place-items:center;flex-shrink:0}
.bg-client .ba-av img{width:100%;height:100%;object-fit:cover}
.bg-client .ba-nm{font-weight:700;font-size:14px;color:var(--ink)}
.bg-photos{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0}
.bg-photos img{width:66px;height:66px;object-fit:cover;border-radius:10px;cursor:pointer}
.bg-actions{display:flex;gap:10px;margin-top:12px}
.bg-accept{flex:1;background:var(--green);color:#fff;border:none;border-radius:12px;padding:12px;font-family:'Oswald',sans-serif;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.5px;cursor:pointer}
.bg-decline{flex:1;background:var(--well);color:var(--muted);border:none;border-radius:12px;padding:12px;font-family:'Oswald',sans-serif;font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.5px;cursor:pointer}
.bg-accepted{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.bg-artist{display:flex;align-items:center;gap:9px;background:var(--surface);border-radius:11px;padding:8px 10px;cursor:pointer;
  position:relative;isolation:isolate;overflow:hidden}
.bg-artist::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('/bg-flash-suave.webp') top center/100% auto repeat-y;
  mix-blend-mode:screen;opacity:.35}
.bg-artist>*{position:relative;z-index:1}

.bg-artist .ba-av{width:32px;height:32px;border-radius:9px;overflow:hidden;background:var(--well);display:grid;place-items:center;flex-shrink:0}
.bg-artist .ba-av img{width:100%;height:100%;object-fit:cover}
.bg-artist .ba-nm{flex:1;font-weight:600;font-size:13px;color:var(--ink)}
.bg-waiting{margin-top:8px;font-size:12.5px;color:var(--muted);font-style:italic}
.bg-cancel{width:100%;margin-top:10px;background:none;border:none;color:var(--flash);font-size:12.5px;font-weight:600;cursor:pointer;padding:6px}
.accepted-ic{width:56px;height:56px;border-radius:50%;background:rgba(28,122,74,.12);display:grid;place-items:center;margin:0 auto 12px}
.accepted-ic svg{width:30px;height:30px;stroke:var(--green-on)}

/* ===== Orçamento: preview clicável + detalhe ===== */
.budget-card.preview{cursor:pointer;transition:transform .1s,box-shadow .15s}
.budget-card.preview:active{transform:scale(.99)}
.bg-thumb{position:relative;width:52px;height:52px;border-radius:11px;overflow:hidden;flex-shrink:0}
.bg-thumb img{width:100%;height:100%;object-fit:cover}
.bg-thumb-n{position:absolute;right:0;bottom:0;background:rgba(0,0,0,.68);color:#fff;font-size:10px;font-weight:700;padding:1px 5px;border-top-left-radius:7px}
.bg-idea-preview{font-size:14px;color:var(--ink);line-height:1.4;margin:10px 0 6px}
.bg-tapcta{display:flex;align-items:center;gap:5px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);color:var(--roxo);font-family:'Oswald',sans-serif;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.4px}
.bg-tapcta svg{width:14px;height:14px}
/* detalhe do orçamento */
.bd-section{margin-bottom:14px}
.bd-label{font-family:'Oswald',sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:600;margin-bottom:6px}
.bd-idea{font-size:15px;line-height:1.5;color:var(--ink)}
.bd-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.bd-chip{display:inline-flex;align-items:center;gap:5px;background:var(--well);border-radius:20px;padding:7px 13px;font-size:13px;font-weight:600;color:var(--ink)}
.bd-chip svg{width:14px;height:14px}

/* ===== Contato dos tatuadores que aceitaram o orçamento (lado cliente) ===== */
.ba-contact-list{display:flex;flex-direction:column;gap:9px;margin-top:8px}
.ba-contact{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:10px 12px;
  position:relative;isolation:isolate;overflow:hidden}
.ba-contact::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('/bg-flash-suave.webp') top center/100% auto repeat-y;
  mix-blend-mode:screen;opacity:.35}
.ba-contact>*{position:relative;z-index:1}

.ba-contact .ba-av{width:42px;height:42px;border-radius:11px;overflow:hidden;background:var(--well);display:grid;place-items:center;flex-shrink:0;cursor:pointer}
.ba-contact .ba-av img{width:100%;height:100%;object-fit:cover}
.ba-contact .ba-info{flex:1;cursor:pointer;min-width:0}
.ba-contact .ba-nm{font-weight:700;font-size:14px;color:var(--ink)}
.ba-wa{width:42px;height:42px;border-radius:12px;background:var(--green);display:grid;place-items:center;flex-shrink:0;text-decoration:none}
.ba-wa svg{width:22px;height:22px;stroke:#fff}
.ba-wa.insta{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888)}
.bg-contact-cta{width:100%;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--green);color:#fff;border:none;border-radius:12px;padding:12px;font-family:'Oswald',sans-serif;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.5px;cursor:pointer}
.bg-contact-cta svg{width:18px;height:18px;stroke:#fff}

/* ===== Estado "processando" das fotos do orçamento ===== */
.pg-thumb.pg-loading{display:grid;place-items:center;background:var(--well);border:1px dashed var(--line)}
.pg-spin{width:22px;height:22px;border:2.5px solid rgba(28,122,74,.25);border-top-color:var(--green-on);border-radius:50%;animation:pg-rot .7s linear infinite}
@keyframes pg-rot{to{transform:rotate(360deg)}}

/* ===== Modal de ajuste de foto de perfil (cliente e tatuador) ===== */
.sheet.avatar-adjust{max-width:420px}
.aa-title{font-family:'Grenze Gotisch',serif;font-weight:700;font-size:20px;color:var(--ink);display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:16px}
.aa-title svg{width:20px;height:20px;stroke:var(--green-on)}
.aa-actions{display:flex;gap:10px;margin-top:18px}
.aa-actions .btn{flex:1}
#aaErr{margin-top:10px}

/* ===== Card de orçamentos aceitos (acompanhamento do tatuador) ===== */
.budget-card.accepted{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:10px}
.budget-card.accepted.done{opacity:.72;border-style:dashed}
.ab-done-tag{font-size:10px;font-weight:700;background:var(--green-deep);color:#fff;padding:2px 8px;border-radius:20px;margin-left:6px;vertical-align:middle}
.ab-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.ab-wa,.ab-btn{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:8px 13px;border-radius:20px;cursor:pointer;border:none}
.ab-wa{background:#25D366;color:#fff;text-decoration:none}
.ab-wa svg{width:15px;height:15px;stroke:#fff;fill:none}
.ab-done{background:var(--green);color:#0b0c0a}
.ab-done svg{width:14px;height:14px;stroke:#0b0c0a;fill:none}
.ab-del{background:transparent;border:1.5px solid var(--line);color:var(--muted)}
.ab-del svg{width:14px;height:14px;stroke:currentColor;fill:none}
.ab-del:active{border-color:var(--flash);color:var(--flash)}

/* ===== Mini-perfil de cliente (aberto pelo feed) ===== */
.cm-av{width:80px;height:80px;border-radius:22px;overflow:hidden;margin:0 auto 12px;background:var(--well);display:grid;place-items:center;border:2px solid var(--line)}
.cm-av img{width:100%;height:100%;object-fit:cover}
.cm-av svg{width:38px;height:38px;stroke:var(--muted-2);fill:none}
.cm-name{font-family:'Grenze Gotisch',serif;font-weight:700;font-size:20px;color:var(--ink)}

/* ===== Menções (@) ===== */
.mention{background:none;border:none;color:var(--roxo-lite);font-weight:700;cursor:pointer;padding:0;font-size:inherit;font-family:inherit}
.mention:active{opacity:.6}
.mention-box{background:var(--surface);border:1px solid var(--line);border-radius:12px;margin-top:6px;overflow:hidden;max-height:240px;overflow-y:auto;box-shadow:0 6px 20px rgba(0,0,0,.12)}
.mention-opt{display:flex;align-items:center;gap:9px;width:100%;background:none;border:none;border-bottom:1px solid var(--line);padding:10px 12px;cursor:pointer;text-align:left;font-size:14px;color:var(--ink)}
.mention-opt:last-child{border-bottom:none}
.mention-opt:active{background:var(--well)}
.mo-av{width:30px;height:30px;border-radius:8px;overflow:hidden;background:var(--well);display:grid;place-items:center;flex:0 0 auto}
.mo-av img{width:100%;height:100%;object-fit:cover}
.mo-av svg{width:15px;height:15px;stroke:var(--muted-2);fill:none}

/* ===== Guest: ações e conexões ===== */
.guest-actions{display:flex;gap:10px;margin-bottom:16px}
.guest-actions .btn{flex:1;margin:0}
.conn-tag{font-size:10px;font-weight:700;background:var(--roxo);color:#fff;padding:2px 8px;border-radius:20px;margin-left:4px;vertical-align:middle}

/* ===== Seletor Rota / Destino único ===== */
.rm-toggle{display:flex;gap:8px;margin-bottom:16px;background:var(--well);padding:4px;border-radius:14px}
.rm-opt{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 8px;border:none;background:transparent;border-radius:11px;font-family:'Oswald',sans-serif;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .15s}
.rm-opt svg{width:15px;height:15px}
.rm-opt.on{background:var(--green);color:#fff;box-shadow:0 2px 8px rgba(28,122,74,.35)}

/* contador nos cards de setor do Perfil — some quando não há nada a contar */
.mc-tag.mc-count{background:var(--green);color:#fff}
.mc-tag.mc-count:empty{display:none}

/* Central de alertas: foto de quem enviou no lugar da marca.
   Sem avatar, o .ntf-hand original (logo com brilho verde) continua valendo. */
.ntf-hand.has-avatar{border-radius:12px;overflow:hidden;filter:none;background:var(--white);
  border:2px solid rgba(28,122,74,.35)}
.ntf-hand.has-avatar img{object-fit:cover}
.ntf-item.unread .ntf-hand.has-avatar{border-color:var(--acid);box-shadow:0 0 6px rgba(37,247,8,.45)}
.ntf-item.unread .ntf-hand.has-avatar img{animation:none}

/* aviso de vídeo enviado sem compressão (aparelhos onde o navegador não deixa) */
.tip-nota{margin-top:10px;padding:10px 12px;border-radius:11px;background:var(--well);
  border:1px solid var(--line);color:var(--muted);font-size:12.5px;line-height:1.5}

/* cadastrar um tema fora da lista, no Hot Tips */
.chip-novo{display:inline-flex;align-items:center;gap:6px;border-style:dashed !important}
.chip-novo svg{stroke:currentColor;fill:none;stroke-width:2.2}
#tipTemaNovo input{width:100%;padding:12px;border-radius:11px;background:var(--well);
  border:1px solid var(--green-on);color:var(--ink);font:inherit;font-size:15px}
#tipTemaNovo input:focus{outline:none}

/* ver o próprio perfil como o cliente vê */
.ver-cliente{display:flex;align-items:center;gap:13px;width:100%;margin-top:16px;padding:14px;
  border-radius:15px;background:var(--well);border:1px solid var(--green-on);color:var(--ink);
  text-align:left;cursor:pointer}
.ver-cliente>svg{width:22px;height:22px;stroke:var(--green-on);fill:none;stroke-width:1.8;flex:0 0 auto}
.ver-cliente>svg:last-child{width:17px;height:17px;stroke:var(--muted);margin-left:auto}
.ver-cliente div{flex:1}
.ver-cliente b{display:block;font-family:'Oswald';font-weight:600;font-size:14.5px}
.ver-cliente small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.ver-cliente:active{transform:scale(.99)}
.previa-bar{display:flex;align-items:center;gap:9px;padding:11px 14px;background:var(--roxo);color:#fff;
  font-size:12.5px;line-height:1.35}
.previa-bar svg{stroke:#fff;fill:none;stroke-width:2;flex:0 0 auto}
.previa-bar span{flex:1}
.previa-bar button{flex:0 0 auto;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);
  color:#fff;font-family:'Oswald';font-weight:600;font-size:11px;text-transform:uppercase;
  padding:7px 11px;border-radius:9px;cursor:pointer}

/* resumo e lista dos meus Hot Tips */
.tips-resumo{display:flex;gap:9px;margin-bottom:14px}
.tips-resumo div{flex:1;background:var(--well);border:1px solid var(--line);border-radius:13px;
  padding:12px 8px;text-align:center}
.tips-resumo b{display:block;font-family:'Grenze Gotisch',serif;font-size:24px;color:var(--acid);line-height:1}
.tips-resumo span{display:block;color:var(--muted);font-size:11px;margin-top:4px}
.tips-reacts{display:flex;gap:9px;margin-top:5px;font-size:12px;color:var(--muted)}

/* bio e especialidades agora vêm logo abaixo de um título próprio — sem isto a
   margem deles somava com a do título e abria um vão */
.section-head + .ap-bio{margin-top:0}
.section-head + .ap-specs{margin-top:0}

/* aviso de que o post do feed dura 72h — o feed é efêmero de propósito, e quem
   publica precisa saber disso ANTES, não depois de o post sumir */
.post-efemero{display:flex;gap:9px;align-items:flex-start;margin-top:14px;padding:11px 13px;
  border-radius:12px;background:var(--well);border:1px solid var(--line);
  color:var(--muted);font-size:12.5px;line-height:1.5}
.post-efemero b{color:var(--ink)}
.post-efemero svg{stroke:var(--green-on);fill:none;stroke-width:1.9;margin-top:2px;flex:0 0 auto}

/* player do Cloudflare Stream (iframe) — mesma caixa do player nativo */
.tip-player iframe{width:100%;aspect-ratio:9/16;max-height:70vh;border:none;display:block;background:#000}

/* ===== Abas Notícias e Bombando (curadoria automática) ===== */
.nw-intro{color:var(--muted);font-size:13px;line-height:1.5;margin:2px 2px 14px}
/* notícia: card tipográfico — a fonte da matéria em Oswald verde, título em
   destaque. Sem foto de propósito: o link do Google News é criptografado e não
   entrega a imagem da matéria; melhor uma lista limpa que um card com buraco. */
.nw-row{display:block;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:14px 15px;margin-bottom:10px;text-decoration:none;transition:border-color .15s}
.nw-row:active{border-color:var(--green-on)}
.nw-t{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.4}
.nw-meta{margin-top:7px;font-size:12px;color:var(--muted)}
.nw-fonte{font-family:'Oswald',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.6px;
  text-transform:uppercase;color:var(--green-on)}

/* bombando: thumb 16:9 + play (reusa o .lp-play do preview de link) */
.bb-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  margin-bottom:12px;cursor:pointer;transition:border-color .15s}
.bb-card:active{border-color:var(--green-on)}
.bb-thumb{position:relative;background:#000;line-height:0}
.bb-thumb img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.bb-body{padding:11px 13px}
.bb-t{font-size:14px;font-weight:600;color:var(--ink);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bb-meta{margin-top:5px;font-size:12px;color:var(--muted)}
/* quando o play troca o card pelo iframe, o vídeo herda o 16:9 do .lp-video */
.bb-card .lp-video{border-radius:0}

/* ===== Bombando: prateleiras Vídeos / Shorts ===== */
.bb-tabs{display:flex;gap:6px;margin:0 0 14px}
.bb-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bb-card-s{margin-bottom:0}
.bb-thumb-s{position:relative;background:#000;line-height:0}
.bb-thumb-s img{width:100%;aspect-ratio:9/16;object-fit:cover;display:block}
.bb-card-s .lp-play{width:44px;height:44px}
.bb-card-s .bb-body{padding:9px 11px}
.bb-card-s .bb-t{font-size:12.5px}
.bb-card-s .bb-meta{font-size:11px}
/* ===== Feed de Shorts em tela cheia (um player persistente; deslizar,
   roda do mouse ou setas trocam o vídeo) ===== */
.shorts-feed{position:fixed;inset:0;z-index:500;background:#000;animation:fadeIn .15s}
.sf-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.sf-stage iframe{height:100%;aspect-ratio:9/16;max-width:100vw;border:0}
.sf-info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 84px calc(20px + env(safe-area-inset-bottom,0px)) 16px;
  background:linear-gradient(transparent,rgba(0,0,0,.75));pointer-events:none}
.sf-pos{color:var(--acid);font-family:'Oswald',sans-serif;font-size:11px;font-weight:600;letter-spacing:.6px}
.sf-t{color:#fff;font-size:14px;font-weight:600;line-height:1.35;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sf-c{color:rgba(255,255,255,.75);font-size:12px;margin-top:4px}
.sf-close{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:14px;z-index:3;
  width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.14);border:none;color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(4px)}
.sf-close svg{width:20px;height:20px}
.sf-close:active{background:rgba(255,255,255,.28)}
/* setas de navegação (desktop/TV; no celular o deslizar resolve) */
.sf-nav{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));left:14px;z-index:3;display:flex;gap:8px}
.sf-seta{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.14);border:none;color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(4px)}
.sf-seta svg{width:18px;height:18px;transform:rotate(90deg)}
.sf-seta:active{background:rgba(255,255,255,.28)}
/* botão de som: canto inferior direito, só o ícone, bem visível sobre o vídeo */
.sf-som{position:absolute;bottom:calc(26px + env(safe-area-inset-bottom,0px));right:14px;z-index:3;
  width:54px;height:54px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);cursor:pointer;
  background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px)}
.sf-som svg{width:26px;height:26px}
.sf-som.on{background:var(--acid);border-color:var(--acid);color:var(--stamp-tx)}
.sf-som:active{transform:scale(.94)}

/* ===== TV Ink ===== */
.tv-grid{display:grid;grid-template-columns:1fr;gap:10px}
.tv-card{text-align:left;background:var(--surface);border:1.5px solid rgba(51,168,99,.4);border-radius:16px;
  padding:16px;cursor:pointer;transition:border-color .15s}
.tv-card:active{border-color:var(--acid);transform:scale(.99)}
.tvc-nome{font-family:'Grenze Gotisch',serif;font-size:21px;color:var(--ink)}
.tvc-desc{color:var(--muted);font-size:13px;line-height:1.5;margin-top:4px}
.tvc-meta{display:inline-flex;align-items:center;gap:6px;margin-top:10px;color:var(--green-on);
  font-family:'Oswald',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.tv-player{position:relative;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden}
.tv-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tv-agora{margin-top:12px}
.tva-est{color:var(--acid);font-family:'Oswald',sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.7px;text-transform:uppercase}
.tva-t{color:var(--ink);font-weight:700;font-size:15px;line-height:1.35;margin-top:3px}
.tva-c{color:var(--muted);font-size:12.5px;margin-top:2px}
.tv-tocando{border-color:var(--green-on);background:rgba(51,168,99,.08)}
.tv-dica{display:flex;align-items:center;gap:9px;background:rgba(37,247,8,.08);border:1px solid rgba(37,247,8,.25);
  border-radius:12px;padding:10px 13px;margin:0 0 14px;color:var(--ink);font-size:12.5px;line-height:1.45}
.tv-dica svg{width:16px;height:16px;color:var(--acid);flex-shrink:0}
.tvc-cont{display:inline-block;background:var(--acid);color:var(--stamp-tx);font-family:'Oswald',sans-serif;
  font-size:10.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;border-radius:8px;
  padding:2px 8px;vertical-align:middle;margin-left:6px}
.tv-card-fav{border-color:var(--acid)}
/* convite ao toque quando o autoplay foi bloqueado (Modo Pouca Energia):
   pointer-events:none deixa o toque atravessar direto pro player */
.sf-toque{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:26vh;pointer-events:none;animation:fadeIn .3s}
.sf-toque span{background:rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.3);color:#fff;
  font-family:'Oswald',sans-serif;font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;
  padding:10px 18px;border-radius:22px;backdrop-filter:blur(4px)}

/* ===== TV Ink: carrossel de Shorts (topo) ===== */
.tvs-rail{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;margin:0 -18px;padding-left:18px;padding-right:18px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tvs-rail::-webkit-scrollbar{display:none}
.tvs-card{flex:0 0 138px;cursor:pointer}
.tvs-thumb{position:relative;border-radius:14px;overflow:hidden;background:#000;line-height:0;border:1px solid var(--line)}
.tvs-thumb img{width:100%;aspect-ratio:9/16;object-fit:cover;display:block}
.tvs-thumb .lp-play{width:38px;height:38px}
.tvs-thumb .lp-play svg{width:16px;height:16px}
.tvs-t{color:var(--ink);font-size:12px;font-weight:600;line-height:1.3;margin-top:7px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tvs-c{color:var(--muted);font-size:11px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== TV Ink: barra de busca ===== */
.tv-busca{display:flex;gap:8px;margin:2px 0 14px}
.tv-busca input{flex:1;background:var(--well);border:1.5px solid rgba(51,168,99,.4);border-radius:13px;
  padding:12px 14px;color:var(--ink);font-size:14.5px;font-family:'Inter',sans-serif}
.tv-busca input:focus{outline:none;border-color:var(--green-on)}
.tv-busca input::placeholder{color:var(--muted)}
.tvb-btn{width:46px;border-radius:13px;border:1.5px solid rgba(51,168,99,.4);background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.tvb-btn svg{width:19px;height:19px}
.tvb-btn:active{transform:scale(.95)}

/* ===== Mercado do tatuador: card de secao (mesmo padrao dos cards do Perfil,
   com um respiro extra entre a vitrine anterior e o proximo card) ===== */
.mk-card{margin-top:18px}
.mk-card:first-child{margin-top:4px}
/* foto do evento na lista completa (padroniza com promos/usados) */
.event-card .ev-foto{margin:-3px 0 11px;border-radius:12px;overflow:hidden;background:#000;line-height:0}
.event-card .ev-foto img{width:100%;height:150px;object-fit:cover}

/* indicador "tem mais estilos" na fileira de chips (some ao rolar) */
.chips-wrap{position:relative}
.chips-mais{position:absolute;top:0;bottom:4px;right:-18px;display:flex;align-items:center;
  padding:0 4px 0 30px;pointer-events:none;color:var(--green-on);
  background:linear-gradient(90deg,transparent,#12211a 70%);transition:opacity .25s}
.chips-mais svg{width:16px;height:16px;animation:chipNudge 1.6s ease-in-out infinite}
@keyframes chipNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}

/* ===== tela de escolha do visitante: logo oficial + rodape MonsterInk ===== */
.seg-logo{display:block;width:min(86%,340px);margin:10px auto 22px}
.seg-roxo{color:var(--roxo-lite)}
.seg-rodape{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:26px;
  padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:12.5px}
.seg-rodape b{color:var(--ink)}

/* ===== Cards de vidro =====
   A gravação fixa DENTRO de cada card sai de cena; o fundo do card vira
   translúcido e o padrão da página atravessa — ao rolar, o desenho desliza
   por baixo do card (o fundo não acompanha a rolagem). Botões, abas e chips
   continuam sólidos. Sheets/modais ficam sólidos de propósito: vidro neles
   deixaria o conteúdo de trás vazar no meio de um formulário. */
.card::before,.row-card::before,.soon-item::before,.mcard::before,.seg-card::before,
.mine-row::before,.compose-bar::before,.post::before,.notify-radio::before,
.ap-bio::before,.notify-choice::before,.soon-big::before,.budget-card::before,
.bg-artist::before,.ba-contact::before{background:none}
.card,.row-card,.soon-item,.mcard,.seg-card,.mine-row,.compose-bar,.post,
.notify-radio,.ap-bio,.notify-choice,.soon-big,.budget-card,.bg-artist,
.ba-contact{background:rgba(31,49,40,.55)}

/* ===== Botões definitivos: ativo J2 "tinta escorrendo", inativos N4 "eco da
   tinta" =====
   O ativo é a aurora vertical da marca: verde institucional no topo escorrendo
   para o ácido na base, como tinta pingando. Os inativos carregam a MESMA
   aurora quase apagada (~10%) — todos são visivelmente o mesmo botão, em doses
   diferentes de tinta: nada precisa explicar que é clicável, e a cor cheia é
   exclusiva do selecionado. */
.ft-opt,.fs-opt,.chip{color:#C9D5CB;border:1px solid rgba(174,196,181,.18);
  background:linear-gradient(180deg,rgba(28,122,74,.14),rgba(42,163,95,.08) 52%,rgba(37,247,8,.10)),rgba(18,29,22,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.ft-opt:not(.on){border-color:rgba(174,196,181,.18)}
.fs-opt:not(.on){border-color:rgba(174,196,181,.18)}
/* ATIVO — opção R3: aurora ROXA do slogan (#7922FD, extraído do "TATUAGEM" da
   logo). Roxo profundo no topo escorrendo para o roxo vivo na base, texto
   branco; os inativos seguem no eco verde acima — contraste máximo.
   >>> Para VOLTAR ao verde (J2), troque as duas regras abaixo por esta guardada:
   .ft-opt.on,.fs-opt.on,.chip.on,.ft-opt.on.ft-tips{
     background:linear-gradient(180deg,#1C7A4A,#2AA35F 52%,#54CC33 84%,#25F708);
     border:1px solid rgba(255,255,255,.25);color:#08130C;font-weight:600;
     box-shadow:0 5px 16px rgba(37,247,8,.28), inset 0 1px 0 rgba(255,255,255,.3)}
*/
.ft-opt.on,.fs-opt.on,.chip.on{
  background:linear-gradient(180deg,#4C0D85,#6605AD 48%,#7922FD 86%,#8F45FF);
  border:1px solid rgba(255,255,255,.28);color:#fff;font-weight:600;
  text-shadow:0 1px 2px rgba(0,0,0,.3);
  box-shadow:0 5px 16px rgba(121,34,253,.35), inset 0 1px 0 rgba(255,255,255,.28)}
.ft-opt.on.ft-tips{background:linear-gradient(180deg,#4C0D85,#6605AD 48%,#7922FD 86%,#8F45FF);
  border-color:rgba(255,255,255,.28);color:#fff;
  box-shadow:0 5px 16px rgba(121,34,253,.35), inset 0 1px 0 rgba(255,255,255,.28)}

/* ===== Nova identidade (fal.ai): hero do aperto de maos, tabbar de batoques,
   mascote em disco de vidro =====
   Topbar: a cena "negocio fechado" (braco do Freak x braco da Gabi no estudio)
   como fundo fotografico; um veu escuro a esquerda garante a leitura da logo.
   Tabbar: pincelada sumi-e roxa atras; cada aba e um batoque visto de cima —
   vazio (inativa) ou cheio de tinta roxa (ativa). O mascote dos alertas flutua
   num disco de vidro escuro para nao se misturar com a foto atras. */
.topbar{background:#0F1A13 url('/topbar-aperto-4.webp') center 58%/cover no-repeat}
.topbar::before{background:linear-gradient(90deg,rgba(10,16,12,.88) 16%,rgba(10,16,12,.38) 55%,rgba(10,16,12,.14));
  filter:none;mix-blend-mode:normal;opacity:1}
.topbar-splash::after{display:none}

.tabbar{background:#0D110E url('/tabbar-sumie-3.webp') top center/100% 80px no-repeat;
  height:calc(80px + env(safe-area-inset-bottom,0px))}
.tabbar::after{display:none}
.tab{gap:4px;font-size:8.5px;color:#B9C6BC;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.tab .copo{width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:url('/batoque-vazio-2.webp') center/cover;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 8px rgba(0,0,0,.55)}
.tab .copo svg{width:19px;height:19px;stroke:#E4EBE5;stroke-width:1.9;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.75))}
.tab.on{color:#E9D8FF}
.tab.on .copo{background-image:url('/batoque-roxo-2.webp');
  box-shadow:0 3px 12px rgba(121,34,253,.55)}
.tab.on svg{stroke:#fff}
.tab .tab-dot{top:-1px;right:calc(50% - 21px)}

/* mascote sem disco: profundidade só por sombreamento em camadas —
   uma sombra curta e densa (contato) + uma longa e difusa (elevação),
   ambas seguindo a silhueta do próprio mascote */
.mi-logo-btn .mi-logo{height:68px;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.9)) drop-shadow(0 8px 14px rgba(0,0,0,.65))}
.mi-logo-btn.has-unread .mi-logo{animation:none;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.9)) drop-shadow(0 8px 14px rgba(0,0,0,.65))
         drop-shadow(0 0 5px rgba(240,85,47,.6))}
.mi-logo-badge{border:1.5px solid rgba(10,16,12,.9);box-shadow:0 2px 5px rgba(0,0,0,.55)}

/* A mesma profundidade do mascote para TUDO que flutua sobre a foto da hero:
   sombra curta e densa (contato) + longa e difusa (elevacao).
   Imagens/icones: drop-shadow na silhueta. Textos: text-shadow.
   Pilulas e controles com fundo: box-shadow. */
.topbar .brand-logo{
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.9)) drop-shadow(0 8px 14px rgba(0,0,0,.65))}
.topbar .brand{text-shadow:0 2px 3px rgba(0,0,0,.9), 0 8px 14px rgba(0,0,0,.65)}
.topbar .brand svg{filter:drop-shadow(0 2px 3px rgba(0,0,0,.9))}
.topbar .back{text-shadow:0 2px 3px rgba(0,0,0,.9), 0 8px 14px rgba(0,0,0,.65)}
.topbar .back svg{filter:drop-shadow(0 2px 3px rgba(0,0,0,.9))}
.topbar .loc-btn,.topbar .loc{
  box-shadow:0 2px 3px rgba(0,0,0,.55), 0 8px 14px rgba(0,0,0,.4)}
.topbar .seg-toggle{
  box-shadow:0 2px 3px rgba(0,0,0,.55), 0 8px 14px rgba(0,0,0,.4)}

/* ===== Parcerias na tela de login (marcas/lojas/supplies) ===== */
.parceria-card{margin-top:26px;border-radius:16px;padding:18px 20px;text-align:left;position:relative;
  background:linear-gradient(160deg,rgba(28,122,74,.22),rgba(19,30,24,.9));
  border:1px solid rgba(51,168,99,.45)}
.parceria-card .parceria-tag{position:absolute;top:-10px;left:16px;font-family:Oswald,sans-serif;font-size:10px;
  letter-spacing:1.5px;text-transform:uppercase;color:#142019;background:linear-gradient(90deg,#54CC33,#25F708);
  padding:3px 10px;border-radius:999px}
.parceria-card>b{display:block;font-size:15px;margin:6px 0 4px;color:var(--ink)}
.parceria-card>p{font-size:13px;color:var(--muted);margin:0 0 12px}
.parceria-card .field{margin-bottom:10px}
.parceria-card .btn{width:100%}

/* ===== Botão flutuante de atualizar (todas as abas principais) =====
   Discreto no canto, acima da barra de batoques; quando o feed detecta posts
   novos ele acende: borda ácida + ponto pulsando. Girar ao clicar dá o feedback
   de "buscando de novo". */
.refresh-fab{position:fixed;right:14px;bottom:calc(96px + env(safe-area-inset-bottom,0px));
  width:46px;height:46px;border-radius:50%;z-index:49;
  display:flex;align-items:center;justify-content:center;
  background:rgba(15,26,20,.82);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);color:#C9D5CB;cursor:pointer;
  box-shadow:0 2px 3px rgba(0,0,0,.55), 0 8px 14px rgba(0,0,0,.4);
  opacity:0;pointer-events:none;transform:translateY(14px);
  transition:opacity .25s ease, transform .25s ease, border-color .25s ease}
.refresh-fab.show{opacity:1;pointer-events:auto;transform:none}
.refresh-fab:active{transform:scale(.92)}
.refresh-fab svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.9;fill:none;
  transition:transform .65s cubic-bezier(.3,.7,.3,1)}
.refresh-fab.girando svg{transform:rotate(360deg)}
.refresh-fab .rf-dot{position:absolute;top:2px;right:3px;width:12px;height:12px;border-radius:50%;
  background:var(--acid);border:2px solid #0F1A14;opacity:0;transform:scale(.4);transition:.25s}
.refresh-fab.novas{border-color:rgba(37,247,8,.65);color:#25F708;
  box-shadow:0 2px 3px rgba(0,0,0,.55), 0 8px 18px rgba(37,247,8,.3)}
.refresh-fab.novas .rf-dot{opacity:1;transform:none;animation:rf-pulse 1.6s ease-in-out infinite}
@keyframes rf-pulse{0%,100%{box-shadow:0 0 0 0 rgba(37,247,8,.5)}55%{box-shadow:0 0 0 7px rgba(37,247,8,0)}}

/* ===== Botões padronizados no app INTEIRO: primário ROXO (aurora), secundário
   VERDE (tinta escorrendo) — sem laranja e sem branco (Saulo, 12/09).
   O laranja --flash segue vivo só como cor de AVISO (badges, alertas). ===== */
.btn-flash{
  background:linear-gradient(180deg,#4C0D85,#6605AD 48%,#7922FD 86%,#8F45FF);color:#fff;
  border:1px solid rgba(255,255,255,.25);text-shadow:0 1px 2px rgba(0,0,0,.3);
  box-shadow:0 5px 16px rgba(121,34,253,.3), inset 0 1px 0 rgba(255,255,255,.25)}
.btn-dark{
  background:linear-gradient(180deg,#1C7A4A,#2AA35F 52%,#54CC33 84%,#25F708);color:#08130C;
  border:1px solid rgba(255,255,255,.25);text-shadow:none;
  box-shadow:0 5px 16px rgba(37,247,8,.2), inset 0 1px 0 rgba(255,255,255,.3)}
.btn-dark svg{stroke:#08130C}
/* conserto do "preso na tela": centralizar com espaçadores flex em vez de
   justify-content:center — conteúdo maior que a tela rola normalmente,
   sem transbordar para uma área inacessível acima */
.onb{justify-content:flex-start}
.onb::before,.onb::after{content:"";flex:1 0 0}
.parceria-fechar{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:#C9D5CB;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.parceria-fechar svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none}
/* gate: o card do cliente troca o laranja pelo roxo do slogan */
.seg-card.cli{border-color:rgba(121,34,253,.45)}
.seg-card.cli .seg-ic{background:linear-gradient(150deg,#6605AD,#4C0D85)}

/* A tela nunca desloca na horizontal (TV Ink deslizava por um carrossel que
   vazava a largura). Os rails internos seguem com o scroll proprio (overflow-x
   deles e auto); so o scroller da tela fica travado no eixo X. */
.view{overflow-x:hidden}
body{overflow-x:hidden}
/* raiz do vazamento: as margens negativas do rail eram do tempo do .pad de
   20px; com laterais de 5px, o rail estourava 13px de cada lado */
.tvs-rail{margin:0 -5px;padding-left:5px;padding-right:5px}