/* ═══════════════════════════════════════════════════════════
   CREATOR HUB — Design System
   Base: paleta oficial Creator Hub — violeta · magenta · coral sobre preto arroxeado
   ═══════════════════════════════════════════════════════════ */

/* ── Tokens ───────────────────────────────────────────────── */
:root {
  /* superfícies */
  --bg:          #08070E;
  --bg-deep:     #050409;
  --nav:         rgba(15, 13, 26, 0.80);
  --card:        rgba(21, 18, 42, 0.60);
  --card-lift:   rgba(34, 28, 62, 0.80);
  --well:        rgba(5, 4, 10, 0.52);

  /* bordas */
  --line:        rgba(255, 255, 255, 0.07);
  --line-soft:   rgba(255, 255, 255, 0.045);
  --line-hard:   rgba(255, 255, 255, 0.13);

  /* tipografia */
  --ink:         #F4F3F8;
  --ink-2:       rgba(178, 174, 198, 0.66);
  --ink-3:       rgba(168, 164, 190, 0.42);
  --ink-4:       rgba(168, 164, 190, 0.22);

  /* acento — latão champanhe. Ouro sem polir, nunca amarelo. */
  --acc:         #9B3DFF;
  --acc-hi:      #C46BFF;
  --acc-deep:    #4A1A80;
  --acc-wash:    rgba(155, 61, 255, 0.14);
  --acc-edge:    rgba(155, 61, 255, 0.32);

  /* marca — as seis cores oficiais */
  --mag:         #E91E8C;
  --coral:       #FF5A5F;
  --tang:        #FF7A59;
  --gold:        #D4AF37;
  --lime:        #E5F95F;
  --grad:        linear-gradient(96deg, #9B3DFF 0%, #E91E8C 48%, #FF5A5F 78%, #FF7A59 100%);

  /* marinho — superfície e atmosfera. Nunca vira texto nem acento. */
  --deep:        #1E1838;
  --deep-hi:     #2C2350;
  --deep-low:    #100C22;
  --deep-wash:   rgba(124, 44, 200, 0.20);
  --deep-edge:   rgba(155, 61, 255, 0.30);

  /* sinal — champanhe claro para valor, cobre para processo */
  --up:          #D4AF37;
  --warm:        #FF7A59;

  /* sombras */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --sh-2: 0 14px 32px -18px rgba(0, 0, 0, 0.7);
  --sh-3: 0 32px 68px -30px rgba(0, 0, 0, 0.82);

  /* raios */
  --r-xs: 10px; --r-sm: 14px; --r-md: 19px;
  --r-lg: 26px; --r-xl: 34px; --r-pill: 100px;

  /* ritmo */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;

  /* movimento */
  --ez:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ez-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t1: 150ms; --t2: 250ms; --t3: 420ms;

  /* layout */
  --rail: 262px;
  --gut: 18px;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
/* sem fundo padrão do sistema: um <button> sem background explícito
   virava um retângulo branco que engolia o texto (Sair, segmentos) */
button { cursor: pointer; background: transparent; border: 0; }
svg { width: 100%; height: 100%; display: block; }
img { max-width: 100%; display: block; }

::selection { background: rgba(124, 44, 200, 0.55); }

:focus-visible {
  outline: 1px solid rgba(196, 107, 255, 0.75);
  outline-offset: 2px;
  border-radius: 6px;
}

* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.09);
  border-radius: 20px; border: 2.5px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.17); background-clip: content-box; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ═══ ILUMINAÇÃO ═══════════════════════════════════════════ */
.amb {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  background: linear-gradient(178deg, #14102A 0%, var(--bg) 32%, var(--bg-deep) 100%);
}

/* Retícula técnica — malha fina que some antes do rodapé */
.amb__grid {
  position: absolute; inset: 0; border-radius: 0;
  background-image:
    linear-gradient(rgba(158, 148, 200, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(158, 148, 200, .055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(128% 96% at 26% 0%, #000 14%, rgba(0,0,0,.46) 48%, transparent 84%);
  -webkit-mask-image: radial-gradient(128% 96% at 26% 0%, #000 14%, rgba(0,0,0,.46) 48%, transparent 84%);
}

/* Aurora: dois véus de luz que giram e respiram em ritmos diferentes.
   O deslocamento é lento de propósito — deve ser percebido, não notado. */
.amb__aur {
  border-radius: 46% 54% 58% 42% / 52% 46% 54% 48%;
  filter: blur(90px);
  mix-blend-mode: screen;
  will-change: transform;
}
.amb__aur--1 {
  width: 62vw; height: 62vw; min-width: 620px; min-height: 620px;
  top: -26vw; left: -12vw;
  background: radial-gradient(circle at 40% 40%, rgba(78, 32, 140, .30), transparent 66%);
  animation: aur1 34s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}
.amb__aur--2 {
  width: 54vw; height: 54vw; min-width: 520px; min-height: 520px;
  top: 22vh; right: -18vw;
  background: radial-gradient(circle at 55% 45%, rgba(122, 24, 92, .26), transparent 68%);
  animation: aur2 46s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}
@keyframes aur1 {
  0%   { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
  50%  { transform: translate3d(6vw, 5vh, 0) scale(1.14) rotate(28deg); }
  100% { transform: translate3d(-3vw, 9vh, 0) scale(.94) rotate(56deg); }
}
@keyframes aur2 {
  0%   { transform: translate3d(0,0,0) scale(1.06) rotate(0deg); }
  50%  { transform: translate3d(-7vw, -6vh, 0) scale(.9) rotate(-34deg); }
  100% { transform: translate3d(-2vw, 7vh, 0) scale(1.16) rotate(-62deg); }
}
  50%  { transform: translate3d(8vw, -7vh, 0) scale(1.2) rotate(22deg); }
  100% { transform: translate3d(-6vw, -3vh, 0) scale(1) rotate(44deg); }
}

.amb__top {
  width: 140%; height: 620px;
  top: -430px; left: 50%; transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
              rgba(88, 34, 150, .28), rgba(46, 20, 80, .10) 45%, transparent 72%);
  filter: blur(64px);
}
/* iluminação atrás da sidebar */
.amb__rail {
  width: 420px; height: 760px;
  top: 4%; left: -180px;
  background: radial-gradient(circle, rgba(112, 36, 184, .34), transparent 66%);
  filter: blur(80px);
}
/* reflexos desfocados de apoio */
.amb__r1 {
  width: 560px; height: 560px;
  top: 34%; right: -190px;
  background: radial-gradient(circle, rgba(150, 40, 112, .20), transparent 66%);
  filter: blur(96px);
}
.amb__r2 {
  width: 640px; height: 640px;
  bottom: -300px; left: 26%;
  background: radial-gradient(circle, rgba(96, 26, 112, .20), transparent 68%);
  filter: blur(104px);
}

/* textura — impede o fundo de parecer chapado */
.amb__grain {
  position: absolute; inset: -40%; border-radius: 0;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══ SIDEBAR ══════════════════════════════════════════════ */
.rail {
  position: fixed; z-index: 40;
  top: var(--gut); left: var(--gut); bottom: var(--gut);
  width: var(--rail);
  display: flex; flex-direction: column;
  padding: var(--s6) var(--s4) var(--s4);
  border-radius: var(--r-xl);
  border: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(rgba(246,240,255,.10), rgba(150,110,220,.06) 40%, rgba(42,26,78,.24) 76%, rgba(14,10,28,.34));
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
  box-shadow:
    inset 0 1px rgba(255,255,255,.22),
    inset 0 -1px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 24px 60px -24px rgba(0,0,0,.7);
  overflow: hidden;
}

/* glow sutil no topo da sidebar */
.rail::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(168, 156, 210, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 156, 210, .05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 55%, transparent 90%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 55%, transparent 90%);
}
.rail__head, .nav, .rail__ft { position: relative; z-index: 1; }

.rail::before {
  content: ""; position: absolute;
  top: -60px; left: 50%; transform: translateX(-50%);
  width: 240px; height: 150px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(155, 61, 255, 0.22), transparent 68%);
  filter: blur(26px); pointer-events: none;
}

.rail__head {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--s2) var(--s4); position: relative;
}
.rail__head .logo { grid-column: 2; }
.rail__head .rail__x { grid-column: 3; justify-self: end; }

.logo { display: flex; align-items: center; justify-content: center; }
.logo__m {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 14px; color: var(--acc-hi);
  background: linear-gradient(158deg, rgba(155, 61, 255, .22), rgba(155, 61, 255, .04));
  border: 1px solid var(--acc-edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.logo__m svg { width: 22px; height: 22px; }

.rail .rail__x { display: none; }

/* navegação */
.nav {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  margin: var(--s2) calc(var(--s2) * -1) 0;
  padding: 0 var(--s2);
}
.nav__grp + .nav__grp { margin-top: var(--s5); }
.nav__lb {
  font-size: 9.5px; letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--ink-4); padding: 0 var(--s3) var(--s2);
}
.nav__ul { display: flex; flex-direction: column; gap: 1px; }

.nav__a {
  position: relative; display: flex; align-items: center; gap: 11px;
  padding: 10px var(--s4); border-radius: var(--r-md);
  color: var(--ink-2); font-size: 13.5px; font-weight: 450;
  transition: color var(--t1) var(--ez), background var(--t1) var(--ez),
              transform var(--t2) var(--ez-out);
}
.nav__a svg { width: 17px; height: 17px; flex: none; opacity: .78; }
.nav__a span { flex: 1; min-width: 0; }
.nav__a:hover { color: var(--ink); background: rgba(255,255,255,.04); transform: translateX(2px); }

.nav__a.on {
  color: var(--ink);
  background: linear-gradient(96deg, rgba(124, 44, 200, .42), rgba(124, 44, 200, .05));
  box-shadow: inset 0 0 0 1px rgba(155, 61, 255, 0.13);
}
.nav__a.on svg { opacity: 1; color: var(--acc-hi); }
.nav__a.on::after {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 2px; height: 17px; transform: translateY(-50%);
  border-radius: 0 2px 2px 0; background: var(--acc-hi);
  box-shadow: 0 0 12px rgba(196, 107, 255, .55);
}

.pip {
  font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 1.5px 7px; border-radius: var(--r-pill);
  color: var(--acc-hi); background: var(--acc-wash);
  border: 1px solid var(--acc-edge);
}

/* rodapé */
.rail__ft { padding-top: var(--s4); }

.cred {
  padding: var(--s3) var(--s4); border-radius: var(--r-md);
  background: var(--well); border: 1px solid var(--line-soft);
}
.cred__t { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; color: var(--ink-3); }
.cred__t b { color: var(--ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cred__bar { height: 3px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden; margin-top: 9px; }
.cred__bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--acc-deep), var(--acc-hi)); }

.me {
  display: flex; align-items: center; gap: var(--s3);
  padding: 8px 9px; border-radius: var(--r-md);
  border: 1px solid var(--line-soft); background: rgba(255,255,255,.025);
  transition: background var(--t1) var(--ez), border-color var(--t1) var(--ez);
}
.me:hover { background: rgba(255,255,255,.055); border-color: var(--line); }
.me__av {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  border-radius: 9px; font-size: 11.5px; font-weight: 600;
  background: linear-gradient(150deg, rgba(155, 61, 255, .34), rgba(74, 26, 128, .2));
  border: 1px solid var(--acc-edge);
}
.me__i { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.me__i b { font-size: 13px; font-weight: 550; }
.me__i i { font-style: normal; font-size: 11px; color: var(--ink-3); }
.me svg { width: 14px; height: 14px; color: var(--ink-3); flex: none; }

/* ═══ SHELL ═══════════════════════════════════════════════ */
.shell {
  position: relative; z-index: 1; min-width: 0;
  margin-left: calc(var(--rail) + var(--gut) * 2);
  min-height: 100vh; display: flex; flex-direction: column;
}

/* botão de menu flutuante — só existe onde a sidebar vira gaveta */
.burger {
  position: fixed; z-index: 34; display: none;
  top: var(--gut); left: var(--gut);
  width: 42px; height: 42px; place-items: center;
  border-radius: var(--r-md); color: var(--ink);
  border: 1px solid var(--line); background: rgba(20, 21, 28, .82);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
  box-shadow: var(--sh-2);
  transition: transform var(--t1) var(--ez), background var(--t1) var(--ez);
}
.burger svg { width: 19px; height: 19px; }
.burger:active { transform: scale(.93); }

/* ações que moraram na topbar agora ficam no rodapé da sidebar */
.railacts { display: flex; gap: 4px; justify-content: center; }
body.mini .railacts { flex-direction: column; align-items: center; }

/* ═══ BOTÕES ═══════════════════════════════════════════════ */
.ib {
  position: relative; width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: var(--r-sm); border: 1px solid transparent;
  background: none; color: var(--ink-2);
  transition: color var(--t1) var(--ez), background var(--t1) var(--ez),
              border-color var(--t1) var(--ez), transform var(--t1) var(--ez);
}
.ib svg { width: 18px; height: 18px; }
.ib:hover { color: var(--ink); background: rgba(255,255,255,.05); border-color: var(--line-soft); }
.ib:active { transform: scale(.93); }
.ib.dot::after {
  content: ""; position: absolute; top: 8px; right: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--acc-hi);
  box-shadow: 0 0 0 2px #15122A;
}

.b {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 var(--s5); white-space: nowrap;
  border-radius: var(--r-pill); font-size: 13px; font-weight: 500;
  color: var(--ink-2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  background: linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,.02) 60%, rgba(0,0,0,.15));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 1px rgba(255,255,255,.2),
    inset 0 -1px rgba(0,0,0,.35),
    0 6px 14px -6px rgba(0,0,0,.5);
  transition: color .2s, border-color .2s, box-shadow .25s, transform .15s, background .2s;
}
.b svg { width: 15px; height: 15px; flex: none; }
.b:hover {
  color: var(--ink); border-color: rgba(255,255,255,.18);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px rgba(255,255,255,.26),
    inset 0 -1px rgba(0,0,0,.4),
    0 12px 24px -10px rgba(0,0,0,.6);
}
.b:active { transform: scale(.975); }

.b--p {
  color: #FFFFFF; font-weight: 600;
  border-color: rgba(196, 107, 255, .42);
  background: var(--grad);
  box-shadow:
    inset 0 1px rgba(255,255,255,.30),
    inset 0 -1px rgba(0,0,0,.26),
    0 8px 24px -8px rgba(155, 61, 255, .52),
    0 0 0 1px rgba(233, 30, 140, .18);
}
.b--p:hover {
  color: #FFFFFF; border-color: rgba(214, 154, 255, .58);
  background: linear-gradient(96deg, #AC5CFF 0%, #F53A9E 48%, #FF6E72 78%, #FF8C6E 100%);
  box-shadow:
    inset 0 1px rgba(255,255,255,.5),
    inset 0 -1px rgba(0,0,0,.2),
    0 14px 30px -10px rgba(155, 61, 255, .58),
    0 0 0 1px rgba(155, 61, 255, .22);
}

.b--gh { background: rgba(255,255,255,.02); }
.b--sm { height: 30px; padding: 0 12px; font-size: 12px; border-radius: var(--r-xs); }
.b--wide { width: 100%; }

.lk { border: 0; background: none; padding: 0; font-size: 12.5px; color: var(--ink-3);
      transition: color var(--t1) var(--ez); }
.lk:hover { color: var(--acc-hi); }

/* ═══ MAIN ═════════════════════════════════════════════════ */
.main {
  flex: 1; min-width: 0; width: 100%;
  max-width: 1140px; margin-inline: auto;
  padding: var(--gut) var(--s5) var(--s12);
  display: flex; flex-direction: column; gap: var(--s10);
}

.view { display: flex; flex-direction: column; gap: var(--s10); animation: rise 480ms var(--ez-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* cabeçalho de página */
.ph > div { min-width: 0; }
.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s6); flex-wrap: wrap; }
.ph__eb {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--acc-hi); margin-bottom: var(--s4);
  padding: 5px 12px 5px 9px; border-radius: var(--r-pill);
  background: var(--acc-wash); border: 1px solid var(--acc-edge);
}
.ph__eb svg { width: 13px; height: 13px; flex: none; opacity: .9; }
.ph h1 { font-size: clamp(25px, 3.2vw, 33px); font-weight: 600; letter-spacing: -.024em; line-height: 1.14; text-wrap: balance; }
.ph p { margin-top: 7px; font-size: 14px; color: var(--ink-2); max-width: min(58ch, 100%); }
.ph__act { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* cabeçalho de seção */
.sh > div { min-width: 0; }
.sh { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; margin-bottom: var(--s5); }
.sh h2 { font-size: 17px; font-weight: 550; letter-spacing: -.014em; }
.sh p { margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }

.sec { display: block; }

/* ═══ CARD + REFLEXO ═══════════════════════════════════════ */
.c {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(rgba(255,255,255,.058), rgba(255,255,255,.024), rgba(0,0,0,.12));
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow:
    inset 0 1px rgba(255,255,255,.18),
    inset 0 -1px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 1px rgba(255,255,255,.04),
    0 12px 28px -14px rgba(0,0,0,.55);
  transition: transform var(--t2) var(--ez-out), border-color var(--t2) var(--ez),
              background var(--t2) var(--ez), box-shadow var(--t2) var(--ez-out);
}
.c:hover, .c:focus-visible {
  border-color: rgba(255, 255, 255, .13);
  background: linear-gradient(rgba(255,255,255,.09), rgba(255,255,255,.04) 55%, rgba(0,0,0,.18));
  box-shadow:
    inset 0 1px rgba(255,255,255,.22),
    inset 0 -1px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 1px rgba(255,255,255,.05),
    0 24px 60px -24px rgba(0,0,0,.7);
}

/* luz deslizando sobre o vidro */
.gl::before {
  content: ""; position: absolute; z-index: 3; pointer-events: none;
  left: -12%; right: -12%; top: -58%; height: 52%;
  opacity: 0; transform: translateY(0) rotate(-7deg);
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255,255,255,.03) 32%,
    rgba(240, 230, 205, .095) 50%,
    rgba(255,255,255,.03) 68%,
    transparent 100%);
  filter: blur(.6px);
}
@keyframes glide {
  0%   { opacity: 0;   transform: translateY(0)    rotate(-7deg); }
  10%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { opacity: 0;   transform: translateY(330%) rotate(-7deg); }
}
.gl:hover::before, .gl:focus-visible::before, .gl.tap::before {
  animation: glide 1100ms var(--ez-out) forwards;
}

/* halo que segue o cursor */
.c::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity var(--t3) var(--ez);
  background: radial-gradient(320px circle at var(--mx,50%) var(--my,0%), rgba(155, 61, 255, .13), transparent 60%);
}
.c:hover::after, .c:focus-visible::after, .c.tap::after { opacity: 1; }

.c > * { position: relative; z-index: 2; }

/* ═══ ATALHOS (dashboard) ══════════════════════════════════ */
.ask { display: flex; flex-direction: column; gap: var(--s6); }
.ask h1 { font-size: clamp(27px, 3.8vw, 38px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; text-wrap: balance; }
.ask > p { font-size: 14.5px; color: var(--ink-2); margin-top: 9px; max-width: min(56ch, 100%); }

.jump { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.jump__c {
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s6); text-align: left; min-height: 150px;
}
.jump__c:hover { transform: translateY(-3px); }
.jump__i {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px;
  color: var(--acc-hi); background: linear-gradient(155deg, rgba(155, 61, 255, .17), rgba(155, 61, 255, .03));
  border: 1px solid var(--acc-edge); box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform var(--t2) var(--ez-out), border-color var(--t2) var(--ez);
}
.jump__i svg { width: 20px; height: 20px; }
.jump__c:hover .jump__i { transform: scale(1.06); border-color: rgba(155, 61, 255, .4); }
.jump__c b { font-size: 15.5px; font-weight: 550; letter-spacing: -.012em; margin-top: var(--s2); }
.jump__c span { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }

/* ═══ GRIDS ════════════════════════════════════════════════ */
.g { display: grid; gap: var(--s4); }
.g--4 { grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); }
.g--3 { grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); }
.g--2 { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }
.g--split { grid-template-columns: 1.4fr 1fr; align-items: start; }

/* ═══ CHIPS ════════════════════════════════════════════════ */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  flex: none; white-space: nowrap;
  height: 34px; padding: 0 16px; border-radius: var(--r-pill);
  font-size: 12.5px; color: var(--ink-2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  background: linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,.02) 60%, rgba(0,0,0,.15));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 1px rgba(255,255,255,.2),
    inset 0 -1px rgba(0,0,0,.35),
    0 1px rgba(255,255,255,.04),
    0 6px 14px -6px rgba(0,0,0,.5);
  transition: color .2s, border-color .2s, box-shadow .25s, transform .15s;
}
.chip:hover {
  color: var(--ink); border-color: rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px rgba(255,255,255,.26),
    inset 0 -1px rgba(0,0,0,.4),
    0 1px rgba(255,255,255,.06),
    0 10px 20px -8px rgba(0,0,0,.55);
  transform: translateY(-1px);
}
.chip:active { transform: scale(.955); }
.chip.on {
  color: var(--ink);
  background: linear-gradient(rgba(140, 58, 220, .40), rgba(80, 32, 130, .28) 60%, rgba(0,0,0,.22));
  border-color: rgba(196, 107, 255, .38);
  box-shadow:
    inset 0 1px rgba(240,232,255,.22),
    inset 0 -1px rgba(0,0,0,.38),
    0 6px 16px -8px rgba(80, 24, 140, .6);
}

/* ═══ TAGS / SELOS ═════════════════════════════════════════ */
.tg {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 11px; border-radius: var(--r-pill); color: var(--ink-3);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  background: linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.02) 60%, rgba(0,0,0,.16));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px rgba(255,255,255,.18), inset 0 -1px rgba(0,0,0,.3);
}
.tg--acc { color: var(--acc-hi); background: var(--acc-wash); border-color: var(--acc-edge); }
.tg--afil { color: var(--gold); background: rgba(212,175,55,.1); border-color: rgba(212,175,55,.32); }

/* link do Painel Admin dentro de Configurações */
.admlink {
  display: flex; align-items: center; gap: var(--s4); padding: var(--s4) var(--s5);
  border-radius: var(--r-md); border: 1px solid var(--acc-edge); background: var(--acc-wash);
  transition: transform var(--t2) var(--ez-out), border-color var(--t1) var(--ez), background var(--t1) var(--ez);
}
.admlink:hover { transform: translateY(-2px); background: rgba(155,61,255,.16); }
.admlink__i {
  flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--r-md);
  color: var(--acc-hi); background: rgba(155,61,255,.14); border: 1px solid var(--acc-edge);
}
.admlink__i svg { width: 20px; height: 20px; }
.admlink__t { flex: 1; min-width: 0; }
.admlink__t b { display: block; font-size: 14.5px; font-weight: 600; }
.admlink__t i { font-style: normal; font-size: 12px; color: var(--ink-2); }
.admlink__go { flex: none; color: var(--acc-hi); }
.admlink__go svg { width: 18px; height: 18px; }

/* Configurações — perfil / image coins / segurança / admin discreto */
.cfg { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--s4); }
.cfg__card { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s6); }
.cfg__topo { display: flex; align-items: center; gap: var(--s4); }
.cfg__foto { position: relative; flex: none; }
.cfg__av {
  width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center;
  font-size: 27px; font-weight: 650; color: var(--acc-hi);
  background: linear-gradient(150deg, var(--acc-wash), rgba(155,61,255,.3)); border: 1px solid var(--acc-edge);
}
.cfg__cam {
  position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; color: #fff; background: var(--acc); border: 2px solid var(--deep-low); cursor: pointer;
}
.cfg__cam svg { width: 15px; height: 15px; }
.cfg__fotoT b { display: block; font-size: 14px; font-weight: 600; }
.cfg__fotoT p { font-size: 12px; color: var(--ink-3); margin-top: 2px; line-height: 1.4; }
.cfg .fld label { display: inline-flex; align-items: center; gap: 6px; }
.cfg .fld label svg { width: 14px; height: 14px; color: var(--ink-3); }
.inat { position: relative; }
.inat > span { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: 14px; }
.inat .in { width: 100%; padding-left: 28px; }
.cfg__cont { align-self: flex-end; font-size: 11px; color: var(--ink-3); margin-top: -4px; }
.cfg__acao { display: flex; justify-content: flex-end; }
.cfg__coins {
  align-items: center; text-align: center; gap: var(--s2); padding: var(--s8) var(--s6);
  background: linear-gradient(160deg, var(--acc-wash), transparent 70%);
}
.cfg__coinsI {
  width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; margin-bottom: var(--s2);
  color: var(--acc-hi); background: var(--acc-wash); border: 1px solid var(--acc-edge);
}
.cfg__coinsI svg { width: 26px; height: 26px; }
.cfg__coins b { font-size: 17px; font-weight: 650; }
.cfg__coins p { font-size: 13px; color: var(--ink-2); }
.cfg__seg { display: flex; align-items: center; gap: var(--s3); }
.cfg__segI {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-md);
  color: var(--acc-hi); background: var(--acc-wash); border: 1px solid var(--acc-edge);
}
.cfg__segI svg { width: 19px; height: 19px; }
.cfg__seg b { display: block; font-size: 14.5px; font-weight: 600; }
.cfg__seg i { font-style: normal; font-size: 12px; color: var(--ink-3); }
.cfg__adm {
  align-self: center; display: inline-flex; align-items: center; gap: 7px; margin-top: var(--s1);
  font-size: 12.5px; color: var(--ink-3); padding: var(--s2) var(--s4); border-radius: var(--r-pill);
}
.cfg__adm:hover { color: var(--acc-hi); background: var(--acc-wash); }
.cfg__adm svg { width: 15px; height: 15px; }
.tg--up  { color: var(--up);   background: rgba(212, 175, 55, .1); border-color: rgba(212, 175, 55, .22); }
.tg--warm{ color: var(--warm); background: rgba(255, 122, 89, .1); border-color: rgba(255, 122, 89, .22); }

/* ═══ CAPAS PROCEDURAIS ════════════════════════════════════ */
.thumb {
  position: relative; overflow: hidden; border-radius: var(--r-md);
  background:
    radial-gradient(120% 90% at 22% 12%, hsl(var(--h,38) 14% 26% / .95), transparent 62%),
    linear-gradient(152deg, hsl(var(--h,38) 12% 19%), hsl(calc(var(--h,38) + 10) 10% 10%));
  border: 1px solid var(--line-soft);
}
.thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 42%, rgba(0,0,0,.32));
}
.thumb svg {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 34%; height: auto; aspect-ratio: 1; opacity: .17; color: #E9D5FF;
}
.thumb--4x5 { aspect-ratio: 4/5; }
.thumb--16x9 { aspect-ratio: 16/9; }
.thumb--1x1 { aspect-ratio: 1/1; }

.thumb__ov {
  position: absolute; z-index: 2; inset: auto var(--s3) var(--s3) var(--s3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
}

/* ═══ CARD DE PRODUTO ══════════════════════════════════════ */
.pr { display: flex; flex-direction: column; padding: var(--s4); border-radius: var(--r-lg); }
.pr:hover { transform: translateY(-3px); }
.pr__b { padding: var(--s5) var(--s2) var(--s1); display: flex; flex-direction: column; gap: var(--s4); flex: 1; }
.pr__h { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.pr__h h3 { font-size: 14.5px; font-weight: 550; letter-spacing: -.012em; line-height: 1.35; }
.pr__h > div { min-height: 3.4em; }
.pr__cat { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }

.kv { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s4); padding: var(--s3) 0; border-block: 1px solid var(--line-soft); }
.kv div { display: flex; flex-direction: column; gap: 2px; }
.kv dt { font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-4); }
.kv dd { margin: 0; font-size: 13px; font-weight: 550; font-variant-numeric: tabular-nums; }
.kv dd.acc { color: var(--acc-hi); }
.kv dd.up { color: var(--up); }

.meter { height: 3px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; margin-top: 5px; }
.meter i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--acc-deep), var(--acc-hi)); }

.pr__f { margin-top: auto; padding-top: var(--s3); display: flex; align-items: center; gap: var(--s2); }
.pr__f .b { flex: 1; }

/* ═══ MÉTRICAS ═════════════════════════════════════════════ */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.st { padding: var(--s5); }
.st:hover { transform: translateY(-2px); }
.st__l { font-size: 11.5px; color: var(--ink-3); }
.st__v { margin-top: 6px; font-size: 26px; font-weight: 600; letter-spacing: -.028em; line-height: 1.08; font-variant-numeric: tabular-nums; }
.st__v i { font-style: normal; font-size: 14px; font-weight: 450; color: var(--ink-3); margin-left: 2px; }
.st__d { margin-top: var(--s3); font-size: 11px; color: var(--ink-3); display: flex; align-items: center; gap: 5px; }
.st__d.up { color: var(--up); }
.st__d svg { width: 12px; height: 12px; }

/* ═══ LISTAS ═══════════════════════════════════════════════ */
.pan { padding: var(--s6); }
.pan__h { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding-bottom: var(--s4); border-bottom: 1px solid var(--line-soft); }
.pan__h > * { min-width: 0; }
.pan__h h2 { font-size: 15px; font-weight: 550; letter-spacing: -.01em; }

.rowlist { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3) 0; border-bottom: 1px solid var(--line-soft);
}
.row:last-child { border-bottom: 0; padding-bottom: 0; }
.row__t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.4; }
.row__t b { font-size: 13.5px; font-weight: 500; }
.row__t span { font-size: 11.5px; color: var(--ink-3); }
.row__th { width: 44px; height: 44px; flex: none; border-radius: var(--r-sm); }

/* ═══ FORM ═════════════════════════════════════════════════ */
.fld { display: flex; flex-direction: column; gap: 7px; }
.fld > label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.in, .ta, .sel {
  width: 100%; padding: 10px var(--s4); font-size: 13.5px;
  border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--well); outline: none;
  transition: border-color var(--t2) var(--ez), background var(--t2) var(--ez);
}
.in:focus, .ta:focus, .sel:focus { border-color: var(--acc-edge); background: rgba(4,9,14,.6); }
.ta { min-height: 88px; resize: vertical; line-height: 1.6; }
.sel { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23949AA6' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 15px;
  padding-right: 36px;
}
.sel option { background: #1A1533; }

/* seleção em grade (avatar, estilos) */
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s2); }
.opt {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: var(--s3) var(--s2); border-radius: var(--r-md);
  border: 1px solid var(--line-soft); background: rgba(255,255,255,.022);
  font-size: 11.5px; color: var(--ink-2); text-align: center; line-height: 1.3;
  transition: all var(--t1) var(--ez);
}
.opt__g { width: 30px; height: 30px; color: var(--ink-3); transition: color var(--t1) var(--ez); }
.opt__sw { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); }
.opt:hover { color: var(--ink); border-color: var(--line); background: rgba(255,255,255,.05); transform: translateY(-1px); }
.opt.on {
  color: var(--ink); border-color: var(--acc-edge); background: var(--acc-wash);
  box-shadow: inset 0 0 0 1px rgba(155, 61, 255, .12);
}
.opt.on .opt__g { color: var(--acc-hi); }

/* pílulas de escolha */
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill {
  padding: 6px 13px; border-radius: var(--r-pill); font-size: 12.5px; color: var(--ink-2);
  border: 1px solid var(--line-soft); background: rgba(255,255,255,.022);
  transition: all var(--t1) var(--ez);
}
.pill:hover { color: var(--ink); border-color: var(--line); background: rgba(255,255,255,.055); }
.pill.on { color: var(--ink); background: var(--acc-wash); border-color: var(--acc-edge); }

/* ═══ ETAPAS ═══════════════════════════════════════════════ */
.steps { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.step { flex: none; white-space: nowrap; display: flex; align-items: center; gap: 9px; padding: 7px 14px 7px 8px; border-radius: var(--r-pill);
        border: 1px solid var(--line-soft); background: rgba(255,255,255,.02);
        font-size: 12.5px; color: var(--ink-3); transition: all var(--t2) var(--ez); }
.step__n {
  width: 22px; height: 22px; flex: none; display: grid; place-items: center;
  border-radius: 50%; font-size: 11px; font-weight: 600;
  background: rgba(255,255,255,.055); color: var(--ink-3);
  border: 1px solid var(--line-soft);
  transition: all var(--t2) var(--ez);
}
.step.on { color: var(--ink); border-color: var(--acc-edge); background: var(--acc-wash); }
.step.on .step__n { background: var(--acc-hi); color: #FFFFFF; border-color: transparent; }
.step.done { color: var(--ink-2); }
.step.done .step__n { background: rgba(155, 61, 255, .2); color: var(--acc-hi); border-color: var(--acc-edge); }
.step__ln { width: 18px; height: 1px; background: var(--line); flex: none; }

/* ═══ ESTADO VAZIO ═════════════════════════════════════════ */
.empty { padding: var(--s16) var(--s6); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.empty svg { width: 34px; height: 34px; color: var(--ink-4); }
.empty b { font-size: 15px; font-weight: 550; }
.empty p { font-size: 13px; color: var(--ink-3); max-width: 40ch; }

/* ═══ TOAST ════════════════════════════════════════════════ */
.toast {
  position: fixed; z-index: 90; bottom: 26px; left: 50%;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 9px;
  padding: 10px 18px; border-radius: var(--r-pill);
  font-size: 13px; color: var(--ink);
  border: 1px solid var(--line-hard); background: rgba(22, 24, 31, .94);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: var(--sh-3);
  transition: opacity var(--t2) var(--ez), transform var(--t2) var(--ez-out);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast svg { width: 15px; height: 15px; color: var(--acc-hi); }

/* ═══ SCRIM ════════════════════════════════════════════════ */
.scrim {
  position: fixed; inset: 0; z-index: 35; border: 0;
  background: rgba(3, 7, 12, .66);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity var(--t2) var(--ez);
  /* enquanto não está aberto, não intercepta clique nenhum:
     é o que impede um modal esquecido de travar a tela */
  pointer-events: none;
}
.modal.on { pointer-events: auto; }
.scrim.on { opacity: 1; }

/* rodapé */
.ft { display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
      padding-top: var(--s6); border-top: 1px solid var(--line-soft);
      font-size: 11px; color: var(--ink-4); }

/* ═══ RESPONSIVO ═══════════════════════════════════════════ */
@media (max-width: 1340px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .g--split { grid-template-columns: 1fr; }
}

@media (max-width: 1060px) {
  :root { --gut: 14px; }
  .rail { width: min(292px, 84vw); transform: translateX(calc(-100% - var(--gut) - 10px));
          transition: transform var(--t3) var(--ez-out); }
  .rail.open { transform: none; }
  .rail .rail__x { display: grid; }
  .shell { margin-left: 0; }
  .burger { display: grid; }
  .main { padding-inline: var(--gut); padding-top: calc(42px + var(--gut) * 2); }
  .jump { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body { font-size: 14.5px; }
  :root { --s10: 30px; --s12: 36px; }

  .main { gap: var(--s8); padding: calc(42px + var(--gut) * 2) var(--gut) var(--s10); }
  .stats { grid-template-columns: 1fr 1fr; gap: var(--s3); }
  .st { padding: var(--s4); }
  .st__v { font-size: 22px; }

  .g { gap: var(--s3); }
  .g--4, .g--3, .g--2 { grid-template-columns: 1fr; }
  .pan { padding: var(--s5); }

  .ph { align-items: flex-start; }
  .ph__act { width: 100%; }
  .ph__act .b { flex: 1; }

  .chips { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 3px; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .steps { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; }
  .steps::-webkit-scrollbar { display: none; }

  .opts { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .pr .thumb--4x5 { aspect-ratio: 16/10; }
}

/* telas pequenas: blur mais barato para a GPU */
@media (max-width: 760px) {
  .c, .burger, .rail { -webkit-backdrop-filter: blur(13px) saturate(120%); backdrop-filter: blur(13px) saturate(120%); }
}

/* ═══ MOVIMENTO REDUZIDO ═══════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .c:hover, .jump__c:hover, .st:hover, .pr:hover { transform: none; }
}

/* Palco: seções que pedem eixo central em vez de alinhamento à esquerda */
.palco { display: flex; flex-direction: column; align-items: center; gap: var(--s8); width: 100%; }
.palco .ph { flex-direction: column; align-items: center; text-align: center; }
.palco .ph h1 { font-size: clamp(29px, 3.8vw, 42px); line-height: 1.06; }
.palco .ph h1 em { font-style: normal; color: var(--acc-hi); }
.palco .ph p { margin-inline: auto; }
.palco .ph__eb { align-self: center; }

/* ═══════════════════════════════════════════════════════════
   MÍDIA — vídeo e imagem dentro dos cards
   ═══════════════════════════════════════════════════════════ */
.mv {
  position: relative; overflow: hidden;
  border-radius: var(--r-md);
  background: #0F0D1A;
  border: 1px solid var(--line-soft);
}
.mv video, .mv img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t3) var(--ez-out), opacity var(--t2) var(--ez);
}
.mv::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,10,15,.12) 0%, transparent 34%, rgba(6,10,15,.72) 100%);
}
.c:hover .mv video, .c:hover .mv img { transform: scale(1.045); }

.mv--3x4  { aspect-ratio: 3/4; }
.mv--9x16 { aspect-ratio: 9/16; }
.mv--16x9 { aspect-ratio: 16/9; }
.mv--1x1  { aspect-ratio: 1/1; }

.mv__ov .tg {
  background: rgba(8, 16, 24, .6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.mv__ov .tg--acc { border-color: rgba(196, 107, 255, .38); }
.mv__ov {
  position: absolute; z-index: 2; inset: auto var(--s3) var(--s3) var(--s3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
}

/* indicador de vídeo */
.mv__play {
  position: absolute; z-index: 2; top: var(--s3); right: var(--s3);
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; color: var(--ink);
  background: rgba(10, 11, 16, .58); border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: opacity var(--t2) var(--ez);
}
.mv__play svg { width: 13px; height: 13px; }
.c:hover .mv__play { opacity: 0; }

/* ═══ CARD DE FORMATO (Estúdio) ═════════════════════════════ */
.g--fmt {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4); width: 100%;
}
.fmt {
  position: relative; padding: 0; overflow: hidden; text-align: left;
  border-radius: var(--r-xl); cursor: pointer;
}
.fmt:hover { transform: translateY(-6px); }
.fmt__m { aspect-ratio: 3/4.4; border-radius: 0; border: 0; }
.fmt__m::after {
  background: linear-gradient(180deg, rgba(4,8,13,.26) 0%, transparent 18%,
              transparent 46%, rgba(4,8,13,.52) 66%, rgba(4,8,13,.86) 84%, rgba(3,6,10,.96) 100%);
  transition: opacity var(--t3) var(--ez);
}
.fmt__cap {
  position: absolute; z-index: 2; inset: auto 0 0 0;
  padding: var(--s6) var(--s5) var(--s5);
}
.fmt__go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s4);
  padding: 10px 18px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.05));
  border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 1px rgba(255,255,255,.3), inset 0 -1px rgba(0,0,0,.3);
  transition: background var(--t2) var(--ez), border-color var(--t2) var(--ez);
}
.fmt__go svg { width: 13px; height: 13px; flex: none; color: var(--acc-hi); }
.fmt:hover .fmt__go {
  background: linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.08));
  border-color: rgba(255,255,255,.32);
}
.fmt__cap h3 { font-size: 23px; font-weight: 600; letter-spacing: -.03em; line-height: 1.08; text-wrap: balance; }
.fmt__d {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 340ms var(--ez-out);
}
.fmt__d > p {
  overflow: hidden; min-height: 0;
  font-size: 12.5px; color: var(--ink-2); line-height: 1.5; max-width: 30ch;
  opacity: 0; transition: opacity 220ms var(--ez);
}
.fmt:hover .fmt__d, .fmt:focus-visible .fmt__d { grid-template-rows: 1fr; }
.fmt:hover .fmt__d > p, .fmt:focus-visible .fmt__d > p { opacity: 1; padding-top: 9px; }

/* ═══ OPÇÕES COM IMAGEM (Criar Avatar) ══════════════════════ */
.opts--img { grid-template-columns: repeat(auto-fill, minmax(114px, 1fr)); gap: var(--s3); }

.opti {
  position: relative; padding: 0; overflow: hidden; text-align: left;
  display: flex; flex-direction: column;
  border-radius: var(--r-md); border: 1px solid var(--line-soft);
  background: rgba(255,255,255,.022);
  transition: border-color var(--t2) var(--ez), transform var(--t2) var(--ez-out),
              box-shadow var(--t2) var(--ez);
}
.opti__m { display: block; flex: none; aspect-ratio: 3/4; position: relative; overflow: hidden; background: #0F0D1A; }
.opti__m img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t3) var(--ez-out), filter var(--t2) var(--ez);
  filter: saturate(.82) brightness(.86);
}
.opti__m::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(6,10,15,.86) 100%);
}
.opti b {
  flex: 1; display: flex; align-items: center;
  padding: 8px 10px 9px; font-size: 11.5px; font-weight: 500;
  color: var(--ink-2); line-height: 1.3;
  transition: color var(--t2) var(--ez);
}
.opti:hover { border-color: var(--line-hard); transform: translateY(-2px); }
.opti:hover img { transform: scale(1.05); filter: saturate(1) brightness(1); }
.opti:hover b { color: var(--ink); }

.opti.on {
  border-color: var(--acc-hi);
  box-shadow: 0 0 0 1px var(--acc-hi), 0 10px 26px -14px rgba(155, 61, 255, .6);
}
.opti.on img { filter: saturate(1) brightness(1); }
.opti.on b { color: var(--ink); font-weight: 600; }
.opti__ck {
  position: absolute; z-index: 3; top: 7px; right: 7px;
  width: 21px; height: 21px; display: grid; place-items: center;
  border-radius: 50%; color: #FFFFFF; background: var(--acc-hi);
  opacity: 0; transform: scale(.7);
  transition: opacity var(--t2) var(--ez), transform var(--t2) var(--ez-out);
}
.opti__ck svg { width: 12px; height: 12px; }
.opti.on .opti__ck { opacity: 1; transform: scale(1); }

/* ═══ CARD DE TEMPLATE (Biblioteca) ═════════════════════════ */
.tpl { padding: var(--s3); display: flex; flex-direction: column; gap: var(--s3); }
.tpl:hover { transform: translateY(-3px); }
.tpl__h { padding: 0 var(--s2); }
.tpl__h h3 { font-size: 14px; font-weight: 550; letter-spacing: -.012em; line-height: 1.35; }
.tpl__h p { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.tpl__p {
  margin: 0 var(--s2); padding: var(--s3);
  font-size: 11px; line-height: 1.55; color: var(--ink-3);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  border-radius: var(--r-sm); background: var(--well); border: 1px solid var(--line-soft);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  white-space: pre-wrap; word-break: break-word;
}
.tpl__f { margin-top: auto; padding: 0 var(--s2) var(--s1); display: flex; gap: 6px; align-items: center; }

/* ═══ MODAL DE PROMPT ═══════════════════════════════════════ */
.modal {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; padding: var(--s5);
  background: rgba(3, 7, 12, .74);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity var(--t2) var(--ez);
}
.modal.on { opacity: 1; }
.modal__c {
  width: min(920px, 100%); max-height: min(86vh, 820px);
  display: grid; grid-template-columns: 300px 1fr;
  border-radius: var(--r-xl); border: 1px solid var(--line-hard);
  background: rgba(20, 21, 28, .96);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: var(--sh-3);
  overflow: hidden;
  transform: translateY(12px) scale(.985);
  transition: transform var(--t3) var(--ez-out);
}
.modal.on .modal__c { transform: none; }
.modal__m { position: relative; background: #0F0D1A; }
.modal__m video, .modal__m img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.modal__b { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.modal__h {
  padding: var(--s5) var(--s6) var(--s4);
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4);
}
.modal__h h2 { font-size: 17px; font-weight: 600; letter-spacing: -.016em; }
.modal__h p { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.modal__t {
  flex: 1; overflow-y: auto; margin: 0; padding: var(--s5) var(--s6);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 11.5px; line-height: 1.7; color: var(--ink-2);
  white-space: pre-wrap; word-break: break-word;
}
.modal__f {
  padding: var(--s4) var(--s6); border-top: 1px solid var(--line-soft);
  display: flex; gap: var(--s2); justify-content: flex-end; flex-wrap: wrap;
}

@media (max-width: 760px) {
  .modal { padding: 0; align-items: stretch; }
  .modal__c { grid-template-columns: 1fr; max-height: 100vh; height: 100%; border-radius: 0; border: 0; }
  .modal__m { display: none; }
}

/* ═══ SIDEBAR RECOLHÍVEL ════════════════════════════════════ */
.rail__t {
  position: fixed; z-index: 41;
  top: calc(var(--gut) + 33px);
  left: calc(var(--gut) + var(--rail) - 13px);
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 8px; color: var(--ink-3);
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(21, 22, 29, .88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.8);
  transition: left var(--t3) var(--ez-out), color var(--t1) var(--ez),
              transform var(--t1) var(--ez), border-color var(--t1) var(--ez);
}
.rail__t svg { width: 13px; height: 13px; }
.rail__t:hover { color: var(--ink); border-color: rgba(255,255,255,.2); }
.rail__t:active { transform: scale(.9); }
.rail__t svg { width: 17px; height: 17px; }
.rail__t:hover { color: var(--ink); border-color: rgba(255,255,255,.2); }
.rail__t:active { transform: scale(.92); }

@media (min-width: 1061px) {
  :root { --rail-min: 78px; }

  .rail, .shell { transition: width var(--t3) var(--ez-out), margin-left var(--t3) var(--ez-out); }

  body.mini .rail { width: var(--rail-min); padding-inline: 13px; }
  body.mini .shell { margin-left: calc(var(--rail-min) + var(--gut) * 2); }

  /* o que some ao recolher */
  body.mini .logo__t,
  body.mini .nav__a span,
  body.mini .nav__count,
  body.mini .pip,
  body.mini .nav__lb,
  body.mini .cred,
  body.mini .me__i,
  body.mini .me > svg { display: none; }

  /* recolhida: logo em cima, botão de expandir logo abaixo — sem ele,
     só o atalho de teclado devolveria a barra ao tamanho normal */
  body.mini .rail__head { grid-template-columns: 1fr; padding-inline: 0; }
  body.mini .rail__head .logo { grid-column: 1; }
  body.mini .rail__t { left: calc(var(--gut) + var(--rail-min) - 13px); }

  /* separador no lugar do rótulo do grupo */
  body.mini .nav__grp + .nav__grp { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line-soft); }
  body.mini .nav__a { justify-content: center; padding-inline: 0; }
  body.mini .nav__a:hover { transform: none; }
  body.mini .me { justify-content: center; padding-inline: 0; }

  /* rótulo flutuante no hover */
  body.mini .nav__a::after { display: none; }
  body.mini .nav__a.on { box-shadow: inset 0 0 0 1px rgba(155, 61, 255, .28); }
  body.mini .nav__a[data-nome]:hover::before {
    content: attr(data-nome);
    position: absolute; left: calc(100% + 14px); top: 50%;
    transform: translateY(-50%);
    padding: 6px 11px; border-radius: var(--r-sm);
    font-size: 12.5px; white-space: nowrap; color: var(--ink);
    background: rgba(26, 28, 37, .97); border: 1px solid var(--line-hard);
    box-shadow: var(--sh-2); pointer-events: none; z-index: 50;
  }
}

/* o botão de recolher não faz sentido no drawer do mobile */
@media (max-width: 1060px) { .rail__t { display: none; } }

/* ═══════════════════════════════════════════════════════════
   GALERIA DE PROMPTS — 4 colunas, vídeo em preview contínuo
   ═══════════════════════════════════════════════════════════ */
.g--tpl { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

/* ── Galeria: espaçamento justo + card limpo (mídia em cima, info embaixo) ── */
.sec--gal { margin-top: var(--s3); }
.sec--gal .sh { margin-bottom: var(--s4); }

.tcard {
  position: relative; aspect-ratio: 3/4; overflow: hidden; cursor: pointer;
  border-radius: 22px; border: 1px solid var(--line); background: var(--well);
  transition: transform var(--t2) var(--ez-out), border-color var(--t1) var(--ez), box-shadow var(--t2) var(--ez);
}
.tcard:hover {
  transform: translateY(-4px); border-color: var(--acc-edge);
  box-shadow: 0 26px 56px -28px rgba(0,0,0,.82), 0 0 0 1px var(--acc-edge);
}
.tcard > video, .tcard > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t3) var(--ez-out);
}
.tcard:hover > video, .tcard:hover > img { transform: scale(1.05); }
.tcard__cat {
  position: absolute; z-index: 3; top: 12px; left: 12px;
  padding: 5px 11px; border-radius: var(--r-pill);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.9);
  background: rgba(10,8,16,.42); border: 1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.tcard__save {
  position: absolute; z-index: 3; top: 12px; right: 12px;
  width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; color: rgba(255,255,255,.92);
  background: rgba(10,8,16,.42); border: 1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: background var(--t1) var(--ez), color var(--t1) var(--ez), transform var(--t1) var(--ez-out);
}
.tcard__save:hover { background: rgba(24,18,38,.7); transform: translateY(-1px); }
.tcard__save svg { width: 17px; height: 17px; }
.tcard__save.on { color: var(--acc-hi); }
.tcard__save.on svg { fill: var(--acc-hi); }
.tcard__over {
  position: absolute; z-index: 2; inset: auto 0 0 0;
  padding: 64px 15px 15px; display: flex; flex-direction: column; gap: 12px;
  background: linear-gradient(transparent, rgba(6,5,12,.5) 42%, rgba(6,5,12,.9));
}
.tcard__t {
  font-size: 16px; font-weight: 600; line-height: 1.22; color: #fff;
  text-shadow: 0 1px 14px rgba(0,0,0,.55);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* usa a base .copy (onda de tinta + faíscas + check ao copiar); aqui só o
   visual glass sobre a imagem. Seletor com 2 classes para vencer o .copy. */
.tcard__copy.copy {
  height: 44px; margin: 0; font-size: 13.5px; font-weight: 550;
  color: rgba(255,255,255,.94);
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.tcard__copy.copy svg { width: 15px; height: 15px; }
.tcard__copy.copy:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.34); }

/* filtro em dropdown discreto */
.pfiltro { position: relative; }
.pfiltro__btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  height: 38px; padding: 0 15px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  transition: color var(--t1) var(--ez), border-color var(--t1) var(--ez), background var(--t1) var(--ez);
}
.pfiltro__btn:hover { color: var(--ink); border-color: var(--line-hard); }
.pfiltro__btn.on { color: var(--acc-hi); border-color: var(--acc-edge); background: var(--acc-wash); }
.pfiltro__btn svg { width: 16px; height: 16px; }
.pfiltro__menu {
  position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; min-width: 220px;
  max-height: 60vh; overflow: auto; padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--deep-hi); border: 1px solid var(--line-hard);
  border-radius: var(--r-md); box-shadow: var(--sh-3);
}
.pfiltro__op {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: var(--r-sm); cursor: pointer; text-align: left;
  font-size: 13px; color: var(--ink-2); background: transparent; border: 0;
  transition: background var(--t1) var(--ez), color var(--t1) var(--ez);
}
.pfiltro__op:hover { background: rgba(255,255,255,.05); color: var(--ink); }
.pfiltro__op.on { color: var(--acc-hi); background: var(--acc-wash); }
.pfiltro__op svg { width: 15px; height: 15px; flex: none; }

/* paginação da galeria — botões redondos, anel dourado no ativo */
.pag { display: flex; align-items: center; justify-content: center; gap: var(--s3);
  flex-wrap: wrap; margin-top: var(--s8); }
.pag__n, .pag__s {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line); background: transparent;
  color: var(--ink-2); font-size: 15px; font-weight: 550; cursor: pointer;
  transition: color var(--t1) var(--ez), border-color var(--t1) var(--ez),
              background var(--t1) var(--ez), transform var(--t1) var(--ez-out);
}
.pag__n:hover, .pag__s:not([disabled]):hover {
  color: var(--ink); border-color: var(--gold); transform: translateY(-1px); }
.pag__n.on {
  color: var(--gold); border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 8px 22px -12px var(--gold);
  background: rgba(212, 175, 55, .06); cursor: default; }
.pag__s svg { width: 17px; height: 17px; }
.pag__s[disabled] { opacity: .32; cursor: not-allowed; }
.pag__gap { color: var(--ink-3); padding: 0 2px; letter-spacing: 1px; user-select: none; }
@media (max-width: 620px) {
  .pag { gap: var(--s2); }
  .pag__n, .pag__s { width: 40px; height: 40px; font-size: 14px; }
}

/* o vídeo É o card: sem moldura, sem botão, sem caixa por dentro */
.tplv {
  aspect-ratio: 9/16; border-radius: 18px; cursor: pointer;
  border: 1px solid var(--line);
  transition: transform var(--t2) var(--ez-out), box-shadow var(--t2) var(--ez),
              border-color var(--t1) var(--ez);
}
.tplv:hover, .tplv:focus-visible {
  transform: translateY(-4px); border-color: var(--acc-edge);
  box-shadow: 0 24px 54px -26px rgba(0,0,0,.82), 0 0 0 1px var(--acc-edge);
}
.tplv:hover video, .tplv:hover img { transform: scale(1.05); }

/* favoritar — coração no canto, aparece no hover (ou sempre se favoritado) */
.tplv__fav {
  position: absolute; z-index: 4; top: 9px; left: 9px;
  width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; color: var(--ink);
  background: rgba(10,8,16,.5); border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; transform: scale(.85);
  transition: opacity var(--t1) var(--ez), transform var(--t1) var(--ez-out),
              color var(--t1) var(--ez), background var(--t1) var(--ez);
}
.tplv:hover .tplv__fav, .tplv:focus-within .tplv__fav, .tplv__fav.on { opacity: 1; transform: none; }
@media (hover: none) { .tplv__fav { opacity: 1; transform: none; } }
.tplv__fav:hover { background: rgba(24,18,38,.85); }
.tplv__fav svg { width: 16px; height: 16px; }
.tplv__fav.on { color: var(--mag); }
.tplv__fav.on svg { fill: var(--mag); }

.tplv__cat {
  position: absolute; z-index: 2; top: 9px; right: 9px;
  padding: 4px 9px; border-radius: var(--r-pill);
  font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap;
  background: rgba(10, 8, 16, .6); border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
}
/* rodapé sempre visível: título + descrição + Copiar sobre um degradê */
.tplv__foot {
  position: absolute; z-index: 3; inset: auto 0 0 0; padding: 46px 11px 11px;
  display: flex; flex-direction: column; gap: 7px; text-align: left;
  background: linear-gradient(transparent, rgba(4,6,12,.62) 42%, rgba(4,6,12,.94));
}
.tplv__t {
  font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tplv__sub {
  font-size: 10.5px; color: rgba(255,255,255,.74); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* favoritar mora sobre a mídia para não competir com o botão de copiar */
.tpl__fav {
  position: absolute; z-index: 3; top: var(--s3); right: var(--s3);
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; color: var(--ink-2);
  background: rgba(8, 16, 24, .55); border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transform: scale(.9);
  transition: opacity var(--t2) var(--ez), transform var(--t2) var(--ez-out),
              color var(--t1) var(--ez), background var(--t1) var(--ez);
}
.tpl__fav svg { width: 15px; height: 15px; }
.tpl:hover .tpl__fav, .tpl:focus-within .tpl__fav { opacity: 1; transform: none; }
.tpl__fav:hover { color: var(--acc-hi); background: rgba(8, 16, 24, .78); }
.tpl__fav.on { opacity: 1; transform: none; color: var(--acc-hi); }
.tpl__fav.on svg { fill: currentColor; fill-opacity: .22; }

.tpl__cap {
  position: absolute; z-index: 2; inset: auto 10px 10px 10px;
  padding: var(--s4); border-radius: var(--r-md);
  background: rgba(6, 5, 4, .82);
  border: 1px solid rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  box-shadow: 0 10px 26px -14px rgba(0,0,0,.9);
  transition: background var(--t2) var(--ez), border-color var(--t2) var(--ez);
}
.c:hover .tpl__cap { background: rgba(12, 13, 18, .9); border-color: rgba(255,255,255,.12); }
.tpl__cap h3 { font-size: 15px; font-weight: 550; letter-spacing: -.014em; line-height: 1.3; }
.tpl__cap p {
  font-size: 12px; color: var(--ink-2); margin-top: 4px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Botão copiar ─────────────────────────────────────────── */
.copy {
  position: relative; overflow: hidden;
  width: 100%; height: 40px; margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--r-pill);
  font-size: 13px; font-weight: 500; letter-spacing: .005em;
  color: var(--ink); border: 1px solid var(--line-hard);
  background: rgba(255,255,255,.05);
  transition: color var(--t2) var(--ez), background var(--t2) var(--ez),
              border-color var(--t2) var(--ez), transform var(--t1) var(--ez);
}
.copy svg { width: 15px; height: 15px; flex: none; transition: transform var(--t2) var(--ez-out); }
.copy:hover { background: rgba(255,255,255,.085); border-color: rgba(255,255,255,.2); }
.copy:active { transform: scale(.975); }

/* onda de tinta que preenche o botão a partir do centro */
.copy::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; transform: scale(0); opacity: 0;
  background: linear-gradient(100deg, #C46BFF, #9B3DFF);
  transition: transform 520ms var(--ez-out), opacity 240ms var(--ez);
}
.copy > * { position: relative; z-index: 1; }

.copy.ok { color: #FFFFFF; border-color: transparent; }
.copy.ok::before { transform: scale(1); opacity: 1; }
.copy.ok svg { transform: scale(1.08); }

/* faísca que sobe ao copiar */
.copy .spark {
  position: absolute; z-index: 2; left: 50%; top: 50%;
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,.9); pointer-events: none;
  opacity: 0;
}
@keyframes spark-up {
  0%   { opacity: 0;  transform: translate(-50%, -50%) scale(.4); }
  22%  { opacity: .95; }
  100% { opacity: 0;  transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2); }
}
.copy.ok .spark { animation: spark-up 620ms var(--ez-out) forwards; }

@media (max-width: 1340px) { .g--tpl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1060px) { .g--tpl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); } }
@media (max-width: 620px)  { .g--tpl { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════
   CRIAR AVATAR — íris e ficha de prévia
   ═══════════════════════════════════════════════════════════ */
.opts--iris { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s3); }

.iri {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: var(--s4) var(--s2) var(--s3); border-radius: var(--r-md);
  border: 1px solid var(--line-soft); background: rgba(255,255,255,.022);
  font-size: 11.5px; color: var(--ink-2);
  transition: all var(--t2) var(--ez);
}
.iri__m {
  display: grid; place-items: center; border-radius: 50%;
  box-shadow: 0 4px 14px -6px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.08);
  transition: transform var(--t2) var(--ez-out), box-shadow var(--t2) var(--ez);
}
.iri:hover { color: var(--ink); border-color: var(--line); background: rgba(255,255,255,.05); }
.iri:hover .iri__m { transform: scale(1.08); }
.iri.on {
  color: var(--ink); border-color: var(--acc-edge); background: var(--acc-wash);
  box-shadow: inset 0 0 0 1px rgba(155, 61, 255, .16);
}
.iri.on .iri__m { box-shadow: 0 0 0 2px var(--acc-hi), 0 6px 18px -6px rgba(0,0,0,.7); }

/* ── Ficha de prévia ──────────────────────────────────────── */
.ficha { padding: var(--s3); }
.ficha__m {
  position: relative; overflow: hidden; border-radius: var(--r-md);
  aspect-ratio: 4/5; background: #0F0D1A; border: 1px solid var(--line-soft);
}
.ficha__base {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
}
.ficha__m::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,10,15,.5) 0%, transparent 24%,
              transparent 44%, rgba(6,10,15,.93) 82%);
}
/* retícula fina: dá leitura de "ficha técnica", não de foto de perfil */
.ficha__grade {
  position: absolute; inset: 0; opacity: .16;
  background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 34%, #000 24%, transparent 68%);
  -webkit-mask-image: radial-gradient(circle at 50% 34%, #000 24%, transparent 68%);
}
.ficha__id {
  position: absolute; z-index: 2; top: var(--s4); left: var(--s4);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-pill); color: var(--ink);
  background: rgba(8,16,24,.6); border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.ficha__olho {
  position: absolute; z-index: 2; top: var(--s4); right: var(--s4);
  border-radius: 50%;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.14);
}
.ficha__pecas {
  position: absolute; z-index: 2; inset: auto var(--s4) var(--s4) var(--s4);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2);
}
.ficha__pecas figure { margin: 0; }
.ficha__pecas img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,.14);
  filter: saturate(.9);
}
.ficha__pecas figcaption {
  margin-top: 5px; font-size: 10px; letter-spacing: .05em;
  color: var(--ink-3); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ficha__b {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s2) var(--s1);
}
.ficha__b > div { flex: 1; min-width: 0; }
.ficha__b b { font-size: 15px; font-weight: 600; letter-spacing: -.012em; }
.ficha__b p { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.45; }

/* ═══════════════════════════════════════════════════════════
   MEUS PROJETOS — acervo com prateleiras e índice
   ═══════════════════════════════════════════════════════════ */
.acervo { display: grid; grid-template-columns: 216px 1fr; gap: var(--s6); align-items: start; }

/* ── Prateleiras ──────────────────────────────────────────── */
.estante { position: sticky; top: var(--gut); display: flex; flex-direction: column; gap: 2px; }
.estante__t {
  font-size: 9.5px; letter-spacing: .19em; text-transform: uppercase;
  color: var(--ink-4); padding: 0 var(--s3) var(--s3);
}

.prat {
  position: relative; display: flex; align-items: center; gap: var(--s3);
  padding: 11px var(--s3); border-radius: var(--r-sm);
  border: 1px solid transparent; background: none; text-align: left;
  color: var(--ink-2); font-size: 13.5px;
  transition: color var(--t1) var(--ez), background var(--t1) var(--ez),
              transform var(--t2) var(--ez-out);
}
.prat__n {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--ink-4); font-variant-numeric: tabular-nums;
  transition: color var(--t1) var(--ez);
}
.prat__t { flex: 1; min-width: 0; }
/* lombada: a marca vertical que dá a leitura de estante */
.prat__s {
  width: 3px; height: 17px; border-radius: 2px;
  background: var(--line); transition: background var(--t2) var(--ez), height var(--t2) var(--ez-out);
}
.prat:hover { color: var(--ink); background: rgba(255,255,255,.04); transform: translateX(2px); }
.prat:hover .prat__s { background: var(--acc-deep); }
.prat.on {
  color: var(--ink); background: rgba(255,255,255,.05);
  border-color: var(--line-soft);
}
.prat.on .prat__n { color: var(--acc-hi); }
.prat.on .prat__s { background: var(--acc-hi); height: 22px; box-shadow: 0 0 10px rgba(196, 107, 255, .5); }

.estante__f {
  margin-top: var(--s4); padding: var(--s3);
  border-top: 1px solid var(--line-soft);
  font-size: 11px; color: var(--ink-4);
}

/* ── Índice do acervo ─────────────────────────────────────── */
.acv {
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: rgba(25, 28, 36, .5);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.045);
  overflow: hidden;
}

.acv__mes {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s5) var(--s3);
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); background: rgba(255,255,255,.018);
  border-bottom: 1px solid var(--line-soft);
}
.acv__mes i { flex: 1; height: 1px; background: var(--line-soft); }
.acv__mes em {
  font-style: normal; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; color: var(--ink-4);
}

.acv__l {
  position: relative; display: grid; align-items: center; gap: var(--s4);
  grid-template-columns: 34px 46px 1fr 128px auto;
  padding: 11px var(--s5);
  border-bottom: 1px solid var(--line-soft);
  transition: background var(--t1) var(--ez);
}
.acv__l:last-child { border-bottom: 0; }
.acv__l:hover, .acv__l:focus-visible { background: rgba(255,255,255,.035); }
/* filete de acento na linha ativa */
.acv__l::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--acc-hi); transform: scaleY(0); transform-origin: center;
  transition: transform var(--t2) var(--ez-out);
}
.acv__l:hover::before, .acv__l:focus-visible::before { transform: scaleY(.62); }

.acv__n {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--ink-4); font-variant-numeric: tabular-nums;
}
.acv__c .thumb { width: 46px; border-radius: var(--r-xs); }
.acv__i { min-width: 0; display: flex; flex-direction: column; line-height: 1.4; }
.acv__i b { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acv__i span { font-size: 11.5px; color: var(--ink-3); }

.acv__e { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-3); }
.pt { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.pt--a { background: var(--acc-hi); box-shadow: 0 0 8px rgba(196, 107, 255, .5); }
.pt--w { background: var(--warm); animation: pulsa 1.8s ease-in-out infinite; }
.pt--n { background: var(--ink-4); }
@keyframes pulsa { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

.acv__a {
  display: flex; align-items: center; gap: 5px;
  opacity: 0; transform: translateX(6px);
  transition: opacity var(--t2) var(--ez), transform var(--t2) var(--ez-out);
}
.acv__l:hover .acv__a, .acv__l:focus-within .acv__a { opacity: 1; transform: none; }

@media (max-width: 1060px) {
  .acervo { grid-template-columns: 1fr; gap: var(--s4); }
  .estante {
    position: static; flex-direction: row; overflow-x: auto;
    gap: 6px; scrollbar-width: none;
  }
  .estante::-webkit-scrollbar { display: none; }
  .estante__t, .estante__f { display: none; }
  .prat { flex: none; border: 1px solid var(--line-soft); }
  .prat__s { display: none; }
}

@media (max-width: 760px) {
  .acv__l { grid-template-columns: 42px 1fr auto; gap: var(--s3); padding: var(--s3) var(--s4); }
  .acv__n, .acv__e { display: none; }
  .acv__a { opacity: 1; transform: none; }
  .acv__a .b { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   IMPULSIONE — formatos, tom e roteiro
   ═══════════════════════════════════════════════════════════ */
.g--vir {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s4); width: 100%;
}

.vir {
  position: relative; padding: 0; overflow: hidden; text-align: left;
  border-radius: var(--r-xl); cursor: pointer;
}
.vir:hover { transform: translateY(-6px); }
.vir__m { aspect-ratio: 3/4.2; border-radius: 0; border: 0; }
.vir__m::after {
  background: linear-gradient(180deg, rgba(4,8,13,.3) 0%, transparent 24%,
              transparent 42%, rgba(4,8,13,.76) 76%, rgba(3,6,10,.97) 100%);
}
.vir__dur {
  position: absolute; z-index: 2; top: 10px; left: 10px;
  font-size: 9.5px; color: var(--ink-2);
  background: rgba(6,5,4,.7); border-color: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.vir__cap { position: absolute; z-index: 2; inset: auto 0 0 0; padding: var(--s5) var(--s4) var(--s4); }
.vir__cap h3 { font-size: 15.5px; font-weight: 600; letter-spacing: -.016em; line-height: 1.2; }
.vir__cap p {
  font-size: 11.5px; color: var(--ink-2); margin-top: 5px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vir__go svg { width: 15px; height: 15px; }

/* ── Barra de contexto ────────────────────────────────────── */
.vir__bar {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3); border-radius: var(--r-lg);
}
.vir__mini { width: 62px; height: 62px; flex: none; border-radius: var(--r-md); }
.vir__bt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.4; }
.vir__bt b { font-size: 15px; font-weight: 600; letter-spacing: -.012em; }
.vir__bt span { font-size: 12px; color: var(--ink-3); }

/* ── Tom ──────────────────────────────────────────────────── */
.g--tom { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.tom {
  padding: var(--s5); display: flex; flex-direction: column; gap: 6px;
  text-align: left; cursor: pointer;
}
.tom:hover { transform: translateY(-2px); }
.tom__e { font-size: 22px; line-height: 1; margin-bottom: var(--s2); }
.tom b { font-size: 15px; font-weight: 550; letter-spacing: -.012em; }
.tom span { font-size: 12px; color: var(--ink-3); line-height: 1.45; }
.tom.on {
  border-color: var(--acc-edge); background: var(--acc-wash);
  box-shadow: inset 0 0 0 1px rgba(155, 61, 255, .18), var(--sh-2);
}

/* ── Roteiro ──────────────────────────────────────────────── */
.rot {
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: rgba(21, 22, 29, .5);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.045);
  overflow: hidden;
}
.rot__t {
  display: grid; grid-template-columns: 44px 1fr; gap: var(--s4);
  padding: var(--s5); border-bottom: 1px solid var(--line-soft);
  animation: rise 420ms var(--ez-out) both;
}
.rot__t:last-child { border-bottom: 0; }
.rot__t:nth-child(2) { animation-delay: 60ms; }
.rot__t:nth-child(3) { animation-delay: 120ms; }
.rot__t:nth-child(4) { animation-delay: 180ms; }
.rot__n {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; color: var(--acc-hi); font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.rot__b { min-width: 0; }
.rot__tm {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4);
}
.rot__f {
  font-size: 16px; line-height: 1.5; color: var(--ink);
  margin-top: 8px; letter-spacing: -.008em; text-wrap: pretty;
}
.rot__c {
  font-size: 12.5px; line-height: 1.6; color: var(--ink-3);
  margin-top: 9px; padding-left: var(--s4);
  border-left: 2px solid var(--line);
}

.rotp__p {
  margin: var(--s5) 0; padding: var(--s4);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; line-height: 1.65; color: var(--ink-2);
  white-space: pre-wrap; word-break: break-word;
  border-radius: var(--r-sm); background: var(--well); border: 1px solid var(--line-soft);
  max-height: 260px; overflow-y: auto;
}
.rotp .copy { margin-top: 0; }

.vir__nav { display: flex; gap: var(--s2); justify-content: flex-end; flex-wrap: wrap; }

@media (max-width: 1060px) {
  .g--vir { grid-template-columns: 1fr; }
  .g--tom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .g--tom { grid-template-columns: 1fr; }
  .rot__t { grid-template-columns: 30px 1fr; gap: var(--s3); padding: var(--s4); }
  .rot__f { font-size: 15px; }
  .vir__nav .b { flex: 1; }
}

/* ═══════════════════════════════════════════════════════════
   VITRINE — cartela de produto compacta
   ═══════════════════════════════════════════════════════════ */
.g--prod { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }

.pr { padding: var(--s3); display: flex; flex-direction: column; }
.pr__m { aspect-ratio: 1; background: #F1EFF4; border-radius: var(--r-md); }
.pr__m img { object-fit: contain; padding: var(--s3); }
.pr__m::after {
  background: linear-gradient(180deg, rgba(4,8,13,.24) 0%, transparent 26%,
              transparent 74%, rgba(4,8,13,.2) 100%);
}
.pr__sel {
  position: absolute; z-index: 2; top: 9px; left: 9px;
  background: rgba(6,5,4,.72); border-color: rgba(196, 107, 255, .4);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.pr__preco {
  position: absolute; z-index: 2; bottom: 9px; right: 9px;
  font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 600;
  color: var(--ink); background: rgba(6,5,4,.78); border-color: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.pr__b { padding: var(--s4) var(--s2) var(--s2); display: flex; flex-direction: column; gap: var(--s3); flex: 1; }
.pr__b > div:first-child { min-height: 4em; }
.pr__b h3 {
  font-size: 14px; font-weight: 550; letter-spacing: -.008em; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pr__cat { font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.pr__f { margin-top: auto; padding-top: var(--s3); display: flex; gap: 6px; align-items: center; }
.pr__f .b { height: 36px; font-size: 12.5px; padding: 0 13px; border-radius: var(--r-pill); }

/* ═══════════════════════════════════════════════════════════
   CRIAR AVATAR — filtro por atributo
   ═══════════════════════════════════════════════════════════ */
.avfil {
  display: flex; gap: 4px; flex-wrap: wrap;
  padding: 4px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: rgba(21, 22, 29, .5);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  align-self: flex-start; max-width: 100%;
}
.avfil__b {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--r-pill);
  border: 1px solid transparent; background: none;
  font-size: 12.5px; color: var(--ink-3); white-space: nowrap;
  transition: color var(--t1) var(--ez), background var(--t1) var(--ez);
}
.avfil__b i {
  font-style: normal; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; color: var(--ink-4); font-variant-numeric: tabular-nums;
}
.avfil__b:hover { color: var(--ink); background: rgba(255,255,255,.04); }
.avfil__b.on {
  color: var(--ink); background: var(--acc-wash); border-color: var(--acc-edge);
}
.avfil__b.on i { color: var(--acc-hi); }

/* ── Frases de abertura (roça) ─────────────────────────────── */
.frases { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s3); }
.frase {
  display: flex; flex-direction: column; gap: 5px; text-align: left;
  padding: var(--s4) var(--s5); border-radius: var(--r-md);
  border: 1px solid var(--line-soft); background: rgba(255,255,255,.022);
  transition: all var(--t1) var(--ez);
}
.frase b { font-size: 13.5px; font-weight: 550; color: var(--ink-2); }
.frase span { font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.frase:hover { border-color: var(--line); background: rgba(255,255,255,.05); transform: translateY(-1px); }
.frase:hover b { color: var(--ink); }
.frase.on {
  border-color: var(--acc-edge); background: var(--acc-wash);
  box-shadow: inset 0 0 0 1px rgba(155, 61, 255, .16);
}
.frase.on b { color: var(--ink); }

@media (max-width: 760px) { .avfil__b { min-width: 100px; padding: 8px 11px; } }

/* produto sem foto no catálogo: marca o vazio em vez de mostrar caixa branca */
.pr__m:has(.pr__sem) { background: rgba(255,255,255,.03); }
.pr__sem {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--ink-4);
}
.pr__sem svg { width: 40px; height: 40px; }

@media (max-width: 1340px) {
  .g--prod { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g--vir  { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 760px; }
}
@media (max-width: 1060px) {
  .g--fmt  { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 100%; gap: var(--s3); }
  .g--vir  { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 100%; }
  .fmt__cap h3 { font-size: 20px; }
  .fmt__cap { padding: var(--s5) var(--s4) var(--s4); }
}
@media (max-width: 760px) {
  .g--prod { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
  .g--fmt  { grid-template-columns: 1fr; }
  .g--vir  { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
}

.avnav {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s2) 0;
}
.avnav__c {
  flex: 1; text-align: center; font-size: 11.5px; color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) {
  .avfil { border-radius: var(--r-lg); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .avfil::-webkit-scrollbar { display: none; }
  .avfil__b { flex: none; }
}


/* ═══════════════════════════════════════════════════════════
   HOVER PREMIUM — halo de cor atrás do card
   O brilho vive num elemento próprio, fora do overflow do card,
   para poder vazar. Sobe devagar (420 ms) e desce mais devagar
   ainda (560 ms): sair do card não deve parecer um corte.
   ═══════════════════════════════════════════════════════════ */
.aura { position: relative; isolation: isolate; }
.aura::before {
  content: ""; position: absolute; z-index: 0;
  inset: 8% -6% -10% -6%;
  border-radius: var(--r-xl);
  background:
    radial-gradient(60% 60% at 30% 100%, rgba(155, 61, 255, .58), transparent 70%),
    radial-gradient(60% 60% at 72% 88%, rgba(233, 30, 140, .32), transparent 72%);
  filter: blur(30px);
  opacity: 0; transform: translateY(10px) scale(.94);
  transition: opacity 560ms var(--ez), transform 560ms var(--ez-out);
  pointer-events: none;
}
.aura:hover::before, .aura:focus-within::before {
  opacity: .85; transform: none;
  transition: opacity 420ms var(--ez), transform 420ms var(--ez-out);
}
.aura > .c { position: relative; z-index: 1; display: block; width: 100%; }

/* o card acompanha com uma borda que acende e uma subida curta */
.aura > .c {
  transition: transform 420ms var(--ez-out), border-color 420ms var(--ez),
              background 420ms var(--ez), box-shadow 420ms var(--ez-out);
}
.aura:hover > .c {
  transform: translateY(-6px);
  border-color: rgba(196, 107, 255, .3);
  box-shadow:
    inset 0 1px rgba(255,255,255,.26),
    inset 0 -1px rgba(0,0,0,.45),
    0 26px 60px -26px rgba(0,0,0,.78),
    0 12px 40px -20px rgba(120, 36, 190, .5);
}
/* a mídia respira junto, sem estourar o enquadramento */
.aura:hover .mv video, .aura:hover .mv img, .aura:hover .mv svg { transform: scale(1.035); }
.aura .mv video, .aura .mv img, .aura .mv svg { transition: transform 620ms var(--ez-out); }

/* sem sublevantamento duplo: quem tem aura não repete o translate */
.aura > .fmt:hover, .aura > .tpl:hover, .aura > .vir:hover { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .aura::before { display: none; }
  .aura:hover > .c { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   CRIAR AVATAR — seções com vários atributos
   ═══════════════════════════════════════════════════════════ */
.avgs { display: flex; flex-direction: column; gap: var(--s6); margin-top: var(--s5); }
.avg__h { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); }
.avg__h h3 { font-size: 13px; font-weight: 550; letter-spacing: .01em; color: var(--ink-2); }
.avg + .avg { padding-top: var(--s5); border-top: 1px solid var(--line-soft); }

/* prévia ainda não gerada */
.ficha--vazia { border-style: dashed; border-color: rgba(255,255,255,.12); }
.ficha__m--vazia { display: grid; place-items: center; background: rgba(255,255,255,.018); }
.vazio {
  position: relative; z-index: 2; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--s2);
  padding: var(--s6);
}
.vazio__i {
  width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: var(--s2);
  border-radius: 14px; color: var(--acc);
  background: var(--acc-wash); border: 1px solid var(--acc-edge);
}
.vazio__i svg { width: 21px; height: 21px; }
.vazio b { font-size: 14.5px; font-weight: 550; }
.vazio p { font-size: 12px; color: var(--ink-3); max-width: 26ch; line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════
   BIBLIOTECA — prateleiras em faixa e grade de itens
   ═══════════════════════════════════════════════════════════ */
.estantes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s3); }

.prat {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4); border-radius: var(--r-md); text-align: left;
  color: var(--ink-2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  background: linear-gradient(rgba(255,255,255,.055), rgba(255,255,255,.02) 60%, rgba(0,0,0,.14));
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 1px rgba(255,255,255,.16), inset 0 -1px rgba(0,0,0,.3);
  transition: all var(--t2) var(--ez);
}
.prat__i {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: 11px; color: var(--acc);
  background: var(--acc-wash); border: 1px solid var(--acc-edge);
}
.prat__i svg { width: 17px; height: 17px; }
.prat__t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.prat__t b { font-size: 13.5px; font-weight: 550; }
.prat__t em {
  font-style: normal; font-size: 10.5px; color: var(--ink-4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prat__n {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--ink-4); font-variant-numeric: tabular-nums;
}
.prat:hover { color: var(--ink); border-color: rgba(255,255,255,.15); transform: translateY(-2px); }
.prat.on {
  color: var(--ink); border-color: rgba(196, 107, 255, .34);
  background: linear-gradient(rgba(196, 107, 255, .18), rgba(155, 61, 255, .07) 60%, rgba(0,0,0,.14));
}
.prat.on .prat__n { color: var(--acc-hi); }

.g--acervo { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: var(--s4); }
.item { padding: var(--s3); display: flex; flex-direction: column; gap: var(--s3); }
.item__m { aspect-ratio: 1; }
.item__m--prod { background: #EAE8F0; }
.item__m--prod img { object-fit: contain; padding: var(--s3); }
.item__e {
  position: absolute; z-index: 2; top: 9px; left: 9px;
  font-size: 9.5px; color: var(--ink);
  background: rgba(10, 8, 16, .66); border-color: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.item__b { padding: 0 var(--s2); display: flex; flex-direction: column; gap: 3px; flex: 1; }
.item__b b {
  font-size: 13px; font-weight: 550; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.item__b span { font-size: 11px; color: var(--ink-3); }
.item__a { display: flex; gap: 5px; align-items: center; padding: 0 var(--s2) var(--s1); }
.item__a .b { flex: 1; height: 30px; font-size: 11.5px; }

@media (max-width: 1060px) { .estantes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .estantes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .prat { padding: var(--s3); }
  .prat__t em { display: none; }
  .g--acervo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
}

/* Card de produto: superfície própria, um pouco mais sólida que o vidro
   genérico — a foto do produto precisa de um fundo estável atrás. */
.pr {
  background: linear-gradient(rgba(255,255,255,.075), rgba(255,255,255,.035) 60%, rgba(25, 27, 35, .55));
  border-color: rgba(255,255,255,.09);
}
.pr:hover {
  background: linear-gradient(rgba(255,255,255,.105), rgba(255,255,255,.05) 60%, rgba(32, 35, 45, .62));
}
.pr__m { background: #EAE8F0; border-color: rgba(0,0,0,.14); }

/* ═══════════════════════════════════════════════════════════
   FLUXO UGC — opções, pílulas e revisão
   ═══════════════════════════════════════════════════════════ */
.uop {
  position: relative; display: flex; align-items: flex-start; gap: var(--s3);
  width: 100%; padding: var(--s4); text-align: left;
  border-radius: var(--r-md); color: var(--ink);
  background: rgba(255,255,255,.032);
  border: 1px solid var(--line);
  transition: background var(--t1) var(--ez), border-color var(--t1) var(--ez),
              transform var(--t1) var(--ez-out);
}
.uop:hover { background: rgba(255,255,255,.06); border-color: var(--line-hard); }
.uop:active { transform: scale(.99); }
.uop.on {
  background: linear-gradient(150deg, var(--acc-wash), rgba(255,255,255,.03));
  border-color: var(--acc-edge);
  box-shadow: inset 0 0 0 1px rgba(196, 107, 255, .12);
}
.uop__e { font-size: 17px; line-height: 1.2; flex: none; }
.uop__b { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.uop__b b { font-size: 13.5px; font-weight: 550; letter-spacing: -.01em; }
.uop__b i { font-style: normal; font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }
.uop__c { flex: none; width: 15px; height: 15px; color: var(--acc-hi); margin-top: 1px; }

.ulista { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s4); }

.upil { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; }
.upil--g { margin-top: 0; }
.upil__b {
  padding: 8px 15px; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 500; color: var(--ink-2);
  background: rgba(255,255,255,.045); border: 1px solid var(--line);
  transition: color var(--t1) var(--ez), background var(--t1) var(--ez),
              border-color var(--t1) var(--ez), transform var(--t1) var(--ez-out);
}
.upil__b:hover { color: var(--ink); background: rgba(255,255,255,.08); }
.upil__b:active { transform: scale(.96); }
.upil__b.on {
  color: var(--ink); background: var(--acc-wash);
  border-color: var(--acc-edge);
}

.ulbl {
  display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 2px;
}
.uvoz { display: flex; flex-direction: column; gap: var(--s4); margin-top: var(--s5); }

.g--cen { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: var(--s3); }
.ucen {
  position: relative; overflow: hidden; text-align: left;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: rgba(255,255,255,.035);
  transition: border-color var(--t1) var(--ez), transform var(--t2) var(--ez-out);
}
.ucen:hover { transform: translateY(-2px); border-color: var(--line-hard); }
.ucen.on { border-color: var(--acc-edge); box-shadow: 0 0 0 1px var(--acc-edge); }
.ucen__m { display: block; aspect-ratio: 3/4; overflow: hidden; background: var(--well); }
.ucen__m img, .ucen__m video {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  transition: transform var(--t3) var(--ez-out);
}
.ucen:hover .ucen__m img { transform: scale(1.05); }
.ucen b {
  display: block; padding: 9px 11px 10px;
  font-size: 12px; font-weight: 550; color: var(--ink);
}
.ucen__ck {
  position: absolute; top: 7px; right: 7px; z-index: 2;
  width: 21px; height: 21px; display: grid; place-items: center;
  border-radius: 50%; color: #0B0713; background: var(--acc-hi);
  opacity: 0; transform: scale(.7);
  transition: opacity var(--t1) var(--ez), transform var(--t1) var(--ez-out);
}
.ucen__ck svg { width: 12px; height: 12px; }
.ucen.on .ucen__ck { opacity: 1; transform: none; }

/* lixeira só nos cenários enviados pela pessoa */
.ucen__x {
  position: absolute; top: 7px; left: 7px; z-index: 3;
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; color: var(--ink); cursor: pointer;
  background: rgba(10,8,20,.6); border: 1px solid var(--line-soft);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity var(--t1) var(--ez), background var(--t1) var(--ez), color var(--t1) var(--ez);
}
.ucen:hover .ucen__x, .ucen:focus-within .ucen__x { opacity: 1; }
.ucen__x:hover { background: var(--coral); color: #fff; }
.ucen__x svg { width: 14px; height: 14px; }
@media (hover: none) { .ucen__x { opacity: 1; } }

.utakes { display: flex; flex-direction: column; gap: var(--s3); }
.utake {
  padding: var(--s4); border-radius: var(--r-md);
  background: rgba(255,255,255,.028); border: 1px solid var(--line-soft);
}
.utake__h { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.utake__h b { font-size: 12.5px; font-weight: 600; }
.utake__t { width: 100%; resize: vertical; min-height: 52px; line-height: 1.5; }

.udica { font-size: 11.5px; color: var(--ink-3); margin-top: var(--s4); }

.ures { display: flex; flex-direction: column; gap: 0; margin-top: var(--s4); }
.ures > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
  padding: 9px 0; border-bottom: 1px solid var(--line-soft);
}
.ures > div:last-child { border-bottom: 0; }
.ures dt { font-size: 12px; color: var(--ink-3); flex: none; }
.ures dd { margin: 0; font-size: 12.5px; font-weight: 500; text-align: right; min-width: 0; }

.urot { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s4); counter-reset: t; }
.urot li { display: flex; gap: var(--s4); align-items: baseline; }
.urot li span {
  flex: none; width: 128px; font-size: 9.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--acc-hi);
}
.urot li p { font-size: 13px; color: var(--ink-2); line-height: 1.5; min-width: 0; }

@media (max-width: 720px) {
  .urot li { flex-direction: column; gap: 3px; }
  .urot li span { width: auto; }
  .ures > div { flex-direction: column; gap: 2px; }
  .ures dd { text-align: left; }
}

/* ═══ AVATARES PRONTOS (Influencer Studio) ══════════════════ */
.modos { display: flex; gap: var(--s2); margin-bottom: var(--s5); flex-wrap: wrap; }
.modos__b {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 17px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  background: rgba(255,255,255,.045); border: 1px solid var(--line);
  transition: color var(--t1) var(--ez), background var(--t1) var(--ez),
              border-color var(--t1) var(--ez);
}
.modos__b svg { width: 15px; height: 15px; flex: none; }
.modos__b i {
  font-style: normal; font-size: 10.5px; font-weight: 600;
  padding: 1px 7px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.08); color: var(--ink-3);
}
.modos__b:hover { color: var(--ink); background: rgba(255,255,255,.08); }
.modos__b.on {
  color: var(--ink); background: var(--acc-wash); border-color: var(--acc-edge);
}
.modos__b.on i { background: var(--acc-edge); color: var(--ink); }

.g--inf { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--s3); }
.inf {
  position: relative; display: flex; flex-direction: column; gap: 0;
  border-radius: var(--r-md); overflow: hidden; text-align: left;
  background: rgba(255,255,255,.035); border: 1px solid var(--line);
  transition: border-color var(--t1) var(--ez), transform var(--t2) var(--ez-out),
              box-shadow var(--t2) var(--ez);
}
.inf:hover { transform: translateY(-3px); border-color: var(--line-hard); box-shadow: var(--sh-2); }
.inf.on { border-color: var(--acc-edge); box-shadow: 0 0 0 1px var(--acc-edge), var(--sh-2); }
.inf__m { display: block; aspect-ratio: 3/4; position: relative; overflow: hidden; background: var(--well); }
.inf__m img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t3) var(--ez-out); }
.inf:hover .inf__m img { transform: scale(1.05); }
.inf__ck {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; color: #0B0713; background: var(--acc-hi);
  opacity: 0; transform: scale(.7);
  transition: opacity var(--t1) var(--ez), transform var(--t1) var(--ez-out);
}
.inf__ck svg { width: 12px; height: 12px; }
.inf.on .inf__ck { opacity: 1; transform: none; }
.inf__b { display: flex; flex-direction: column; gap: 1px; padding: 10px 11px 11px; }
.inf__b b { font-size: 12.5px; font-weight: 550; }
.inf__b i { font-style: normal; font-size: 10.5px; color: var(--ink-3); }

/* barra de ação do avatar escolhido */
.barra {
  position: sticky; bottom: var(--s4); z-index: 5;
  display: flex; align-items: center; gap: var(--s4);
  margin-top: var(--s6); padding: var(--s3) var(--s4);
  border-radius: var(--r-lg); flex-wrap: wrap;
  background: rgba(21, 18, 42, .86);
  border: 1px solid var(--acc-edge);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: var(--sh-3);
}
.barra__m {
  width: 44px; height: 56px; flex: none; border-radius: var(--r-xs);
  overflow: hidden; background: var(--well);
}
.barra__m img { width: 100%; height: 100%; object-fit: cover; }
.barra__t { flex: 1; min-width: 140px; }
.barra__t b { font-size: 14px; font-weight: 550; }
.barra__t p { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════
   ESTÚDIO — origens, seletores e mesclagem
   ═══════════════════════════════════════════════════════════ */
.orig { display: flex; gap: 6px; flex-wrap: wrap; }
.orig__b {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 500; color: var(--ink-2);
  background: rgba(255,255,255,.045); border: 1px solid var(--line);
  transition: color var(--t1) var(--ez), background var(--t1) var(--ez),
              border-color var(--t1) var(--ez);
}
.orig__b svg { width: 14px; height: 14px; flex: none; }
.orig__b:hover { color: var(--ink); background: rgba(255,255,255,.08); }
.orig__b.on { color: var(--ink); background: var(--acc-wash); border-color: var(--acc-edge); }

.solte {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: var(--s12) var(--s5); text-align: center;
  border-radius: var(--r-lg);
  border: 1.5px dashed var(--line-hard);
  background: rgba(255,255,255,.022);
  transition: border-color var(--t2) var(--ez), background var(--t2) var(--ez);
}
.solte:hover { border-color: var(--acc-edge); background: var(--acc-wash); }
.solte__i { width: 26px; height: 26px; color: var(--ink-3); margin-bottom: 4px; }
.solte b { font-size: 14px; font-weight: 550; }
.solte p { font-size: 12px; color: var(--ink-3); }

/* seletor de produto compacto */
.g--5 { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: var(--s3); }
.pk {
  position: relative; display: flex; flex-direction: column; text-align: left;
  border-radius: var(--r-md); overflow: hidden;
  background: rgba(255,255,255,.035); border: 1px solid var(--line);
  transition: border-color var(--t1) var(--ez), transform var(--t2) var(--ez-out);
}
.pk:hover { transform: translateY(-2px); border-color: var(--line-hard); }
.pk.on { border-color: var(--acc-edge); box-shadow: 0 0 0 1px var(--acc-edge); }
.pk__m {
  display: block; aspect-ratio: 1/1; background: #EDEBE6;
  display: grid; place-items: center; overflow: hidden;
}
.pk__m img { width: 100%; height: 100%; object-fit: contain; }
.pk__ph { width: 26px; height: 26px; color: rgba(0,0,0,.25); }
.pk__ck {
  position: absolute; top: 7px; right: 7px; z-index: 2;
  width: 21px; height: 21px; display: grid; place-items: center;
  border-radius: 50%; color: #0B0713; background: var(--acc-hi);
  opacity: 0; transform: scale(.7);
  transition: opacity var(--t1) var(--ez), transform var(--t1) var(--ez-out);
}
.pk__ck svg { width: 12px; height: 12px; }
.pk.on .pk__ck { opacity: 1; transform: none; }
.pk__b { display: flex; flex-direction: column; gap: 1px; padding: 9px 10px 10px; }
.pk__b b {
  font-size: 11.5px; font-weight: 550; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pk__b i { font-style: normal; font-size: 10.5px; color: var(--up); font-weight: 600; }

/* templates de movimento */
.g--mov { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: var(--s3); }
.mov {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--well);
  transition: border-color var(--t1) var(--ez), transform var(--t2) var(--ez-out),
              box-shadow var(--t2) var(--ez);
}
.mov:hover { transform: translateY(-3px); border-color: var(--acc-edge); }
.mov.on {
  border-color: var(--acc);
  box-shadow: 0 0 0 2px var(--acc), 0 16px 40px -22px var(--acc);
}
.mov__m { display: block; aspect-ratio: 9/16; position: relative; overflow: hidden; }
.mov__m video, .mov__m img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mov__ck {
  position: absolute; top: 7px; right: 7px; z-index: 3;
  width: 21px; height: 21px; display: grid; place-items: center;
  border-radius: 50%; color: #0B0713; background: var(--acc-hi);
  opacity: 0; transform: scale(.7); transition: opacity var(--t1) var(--ez), transform var(--t1) var(--ez-out);
}
.mov__ck svg { width: 12px; height: 12px; }
.mov.on .mov__ck { opacity: 1; transform: none; }
.mov__t {
  position: absolute; z-index: 2; inset: auto 0 0 0; padding: 22px 10px 9px;
  font-size: 11px; font-weight: 500; line-height: 1.3; text-align: left;
  background: linear-gradient(transparent, rgba(4,6,12,.9));
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.mov__cat {
  position: absolute; z-index: 2; top: 8px; left: 8px;
  font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; font-weight: 600;
  padding: 3px 8px; border-radius: var(--r-pill);
  background: rgba(10,8,20,.62); color: var(--ink); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); border: 1px solid var(--line-soft);
}

.movres { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s4); }
.movres__m {
  width: 58px; height: 78px; flex: none; border-radius: var(--r-xs);
  overflow: hidden; background: var(--well); position: relative;
}
.movres__m video, .movres__m img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.movres b { font-size: 13.5px; font-weight: 550; }
.movres p { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* ── mesclagem ─────────────────────────────────────────────── */
.mesc {
  padding: var(--s6); border-radius: var(--r-lg);
  background: rgba(255,255,255,.028); border: 1px solid var(--line);
}

/* ── tela final dos formatos: prontos + prompts ──────────── */
.rgrid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s4); margin-top: var(--s4);
}
.rgrid--2 { grid-template-columns: repeat(2, 1fr); max-width: 720px; }
@media (max-width: 900px) { .rgrid, .rgrid--2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .rgrid, .rgrid--2 { grid-template-columns: 1fr; } }
.rcard {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: rgba(255,255,255,.028);
  transition: border-color var(--t1) var(--ez), transform var(--t2) var(--ez-out);
}
.rcard.ok:hover { transform: translateY(-2px); border-color: var(--acc-edge); }
.rcard__m {
  position: relative; aspect-ratio: 4/5; overflow: hidden;
  background: var(--well); display: grid; place-items: center;
}
.rcard__m img { width: 100%; height: 100%; object-fit: cover; }
.rcard__txt {
  padding: var(--s5); font-size: 13px; line-height: 1.5; color: var(--ink-2);
  text-align: center; overflow: auto; max-height: 100%;
}
.rcard__tag {
  position: absolute; top: var(--s3); left: var(--s3);
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(10,8,20,.6); color: var(--ink); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); border: 1px solid var(--line-soft);
}
.rcard__ft { padding: var(--s4); }
.rcard__ft b { display: block; font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* botão de download embutido na imagem */
.rcard__dl {
  position: absolute; top: var(--s3); right: var(--s3); z-index: 2;
  width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; color: var(--ink);
  background: rgba(10,8,20,.55); border: 1px solid var(--line-soft);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background var(--t1) var(--ez), color var(--t1) var(--ez), transform var(--t1) var(--ez-out);
}
.rcard__dl:hover { background: var(--acc); color: #fff; border-color: var(--acc); transform: translateY(-1px); }
.rcard__dl svg { width: 17px; height: 17px; }

.rprompts {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s5);
}
@media (max-width: 900px) { .rprompts { grid-template-columns: 1fr; } }
.rprompt {
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s5); border-radius: var(--r-lg);
  border: 1px solid var(--line); background: rgba(255,255,255,.028);
}
.rprompt__h { display: flex; align-items: center; gap: var(--s3); }
.rprompt__ic {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: var(--r-md); color: var(--acc-hi);
  background: var(--acc-wash); border: 1px solid var(--acc-edge);
}
.rprompt__ic svg { width: 19px; height: 19px; }
.rprompt__h > div { flex: 1; min-width: 0; }
.rprompt__h b { display: block; font-size: 14.5px; font-weight: 600; }
.rprompt__h i { font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.rprompt__cp { flex: none; font-size: 12.5px; padding: 7px 13px; }
.rprompt__pre {
  margin: 0; padding: var(--s4); border-radius: var(--r-md);
  background: var(--deep-low); border: 1px solid var(--line-soft);
  font-size: 12px; line-height: 1.6; color: var(--ink-2);
  white-space: pre-wrap; word-break: break-word;
  max-height: 340px; overflow: auto; font-family: var(--mono, ui-monospace, monospace);
}
.rtabs { display: flex; gap: var(--s2); flex-wrap: wrap; }
.rtab {
  padding: 6px 14px; border-radius: var(--r-pill); font-size: 12.5px;
  border: 1px solid var(--line); background: transparent; color: var(--ink-2);
  cursor: pointer; transition: all var(--t1) var(--ez);
}
.rtab.on { color: var(--acc-hi); border-color: var(--acc-edge); background: var(--acc-wash); }
.rtab:hover { color: var(--ink); }

.racoes { display: flex; gap: var(--s4); margin-top: var(--s6); flex-wrap: wrap; }
.racoes__b { flex: 1; min-width: 200px; justify-content: center; }
/* tela final: só o Flow, discreto e alinhado à direita */
.racoes--fim { justify-content: flex-end; }
.racoes__flow { font-size: 13px; padding: 10px 18px; }

/* ── seletor de modo de interação (Blogueirinha) ─────────── */
.ginter {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s3); margin-top: var(--s4);
}
@media (max-width: 1060px) { .ginter { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .ginter { grid-template-columns: 1fr; } }
.inter {
  display: flex; flex-direction: column; text-align: left; cursor: pointer;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: rgba(255,255,255,.028); overflow: hidden;
  transition: transform var(--t2) var(--ez-out), border-color var(--t1) var(--ez), box-shadow var(--t2) var(--ez);
}
.inter:hover { transform: translateY(-3px); border-color: var(--acc-edge); }
.inter.on { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc), 0 16px 40px -24px var(--acc); }
.inter__m {
  position: relative; aspect-ratio: 4/5; overflow: hidden;
  background: var(--well); display: grid; place-items: center;
}
.inter__m video { width: 100%; height: 100%; object-fit: cover; }
.inter__ph { width: 34px; height: 34px; color: var(--ink-4); }
.inter__ck {
  position: absolute; top: var(--s3); right: var(--s3);
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: var(--acc); color: #fff; opacity: 0; transform: scale(.6);
  transition: all var(--t1) var(--ez-out);
}
.inter__ck svg { width: 15px; height: 15px; }
.inter.on .inter__ck { opacity: 1; transform: scale(1); }
.inter__b { padding: var(--s4); display: flex; flex-direction: column; gap: 3px; }
.inter__b b { font-size: 14px; font-weight: 600; }
.inter__b i { font-style: normal; font-size: 11.5px; color: var(--ink-2); line-height: 1.4; }
.mesc__fita {
  display: flex; align-items: center; gap: var(--s3);
  overflow-x: auto; padding-bottom: var(--s2);
}
.mesc__p { margin: 0; flex: none; width: 132px; }
.mesc__m {
  display: grid; place-items: center; aspect-ratio: 3/4;
  border-radius: var(--r-md); overflow: hidden; position: relative;
  background: var(--well); border: 1.5px dashed var(--line-hard);
  transition: border-color var(--t2) var(--ez), background var(--t2) var(--ez);
}
.mesc__p.ok .mesc__m { border-style: solid; border-color: var(--acc-edge); background: rgba(255,255,255,.04); }
.mesc__m img { width: 100%; height: 100%; object-fit: cover; }
.mesc__vazio { width: 24px; height: 24px; color: var(--ink-4); }
.mesc__txt {
  padding: var(--s3); font-size: 11px; line-height: 1.45; color: var(--ink-2);
  text-align: center;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.mesc__done { display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--acc-hi); }
.mesc__done svg { width: 26px; height: 26px; }
.mesc__done b { font-size: 12px; font-weight: 550; color: var(--ink); }
.mesc__p figcaption {
  margin-top: 8px; font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); display: flex; flex-direction: column; gap: 2px; text-align: center;
}
.mesc__p figcaption i {
  font-style: normal; font-size: 11.5px; letter-spacing: 0; text-transform: none;
  color: var(--ink); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mesc__p--out .mesc__m { border-color: var(--acc-edge); }
.mesc__seta { flex: none; width: 15px; height: 15px; color: var(--ink-4); margin-bottom: 26px; }
.mesc__seta--f { color: var(--acc); }
.mesc__acao {
  display: flex; align-items: center; gap: var(--s4);
  margin-top: var(--s5); padding-top: var(--s5);
  border-top: 1px solid var(--line-soft); flex-wrap: wrap;
}
.mesc__falta { font-size: 11.5px; color: var(--ink-3); }

/* fileira de downloads */
.bx { display: flex; gap: 7px; flex-wrap: wrap; margin-top: var(--s5); }
.bx__b {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 500; color: var(--ink-2);
  background: rgba(255,255,255,.045); border: 1px solid var(--line);
  transition: color var(--t1) var(--ez), background var(--t1) var(--ez);
}
.bx__b svg { width: 14px; height: 14px; flex: none; }
.bx__b:hover { color: var(--ink); background: rgba(255,255,255,.085); }
.bx__b--p { color: var(--ink); background: var(--acc-wash); border-color: var(--acc-edge); }

.aviso {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 16px; border-radius: var(--r-md); margin-bottom: var(--s5);
  font-size: 12.5px; color: var(--ink-2);
  background: rgba(255,255,255,.035); border: 1px solid var(--line);
}
.aviso svg { width: 15px; height: 15px; flex: none; color: var(--warm); }

.promptbox {
  margin: var(--s4) 0 0; padding: var(--s4); border-radius: var(--r-md);
  background: var(--well); border: 1px solid var(--line-soft);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; line-height: 1.6; color: var(--ink-2);
  white-space: pre-wrap; word-break: break-word;
  max-height: 220px; overflow-y: auto;
}
.pk__alta {
  position: absolute; top: 7px; left: 7px; z-index: 2;
  width: 20px; height: 20px; display: grid; place-items: center;
  border-radius: 50%; color: var(--warm);
  background: rgba(10,8,16,.7); border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pk__alta svg { width: 11px; height: 11px; }

/* ═══ MODAL DA VITRINE — catálogo inteiro em um painel ══════ */
.modal__c--v {
  /* o .modal__c base é um grid de 2 colunas para o modal de prompt;
     aqui é coluna única: cabeçalho, filtros e a grade que rola */
  width: min(1040px, 100%); max-width: none;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: min(86vh, 860px); max-height: min(86vh, 860px);
  overflow: hidden;
}
.mv__h {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4);
  padding: var(--s6) var(--s6) var(--s4);
}
.mv__h h2 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.mv__h p { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }

.mv__f {
  display: flex; flex-direction: column; gap: var(--s3);
  padding: 0 var(--s6) var(--s4);
  border-bottom: 1px solid var(--line-soft);
}
.fld--busca { position: relative; }
.fld--busca .in { padding-left: 38px; }
.fld__i {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--ink-3); pointer-events: none;
}

.mv__g {
  min-height: 0; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  /* sem isto, o grid distribui as linhas na altura do painel e achata os cards */
  align-content: start;
  grid-auto-rows: max-content;
  gap: var(--s3); padding: var(--s5) var(--s6) var(--s6);
  overscroll-behavior: contain;
}
.mv__vazio {
  grid-column: 1 / -1; text-align: center; padding: var(--s12) 0;
  font-size: 13px; color: var(--ink-3);
}

@media (max-width: 640px) {
  .modal__c--v { max-height: 92vh; }
  .mv__h, .mv__f { padding-left: var(--s5); padding-right: var(--s5); }
  .mv__g { padding: var(--s4) var(--s5) var(--s5); grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}

/* ═══ SELETOR DE PRODUTO — cartão de escolha ════════════════ */
.prodsel {
  display: flex; gap: var(--s4); align-items: center;
  padding: 10px 12px; border-radius: var(--r-md);
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
  transition: border-color var(--t2) var(--ez), background var(--t2) var(--ez);
}
.prodsel.tem { border-color: var(--acc-edge); }
.prodsel__m {
  width: 52px; height: 52px; flex: none;
  display: grid; place-items: center; overflow: hidden;
  border-radius: var(--r-xs); background: #EDEBE6;
}
.prodsel__m img { width: 100%; height: 100%; object-fit: contain; }
.prodsel__ph { width: 20px; height: 20px; color: rgba(0,0,0,.22); }
.prodsel__t { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.prodsel__t b {
  font-size: 13.5px; font-weight: 550; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prodsel__t i { font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.prodsel__a { display: flex; gap: 6px; flex: none; flex-wrap: wrap; }
.prodsel__a .b { height: 34px; padding: 0 13px; font-size: 12.5px; }

.rapido { margin-top: var(--s5); }
.rapido__l {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--s3);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.rapido__l svg { width: 13px; height: 13px; color: var(--warm); }
.rapido__g { display: flex; gap: var(--s2); flex-wrap: wrap; }
.rap {
  position: relative; width: 74px; aspect-ratio: 1/1; flex: none;
  border-radius: var(--r-sm); overflow: hidden;
  background: #EDEBE6; border: 1px solid var(--line);
  transition: border-color var(--t1) var(--ez), transform var(--t1) var(--ez-out);
}
.rap img { width: 100%; height: 100%; object-fit: contain; }
.rap:hover { transform: translateY(-2px); border-color: var(--line-hard); }
.rap.on { border-color: var(--acc); box-shadow: 0 0 0 2px var(--acc-edge); }
.rap__ck {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(10,8,16,.55); color: var(--acc-hi);
  opacity: 0; transition: opacity var(--t1) var(--ez);
}
.rap__ck svg { width: 20px; height: 20px; }
.rap.on .rap__ck { opacity: 1; }

/* ═══ MESCLAGEM — peças maiores ═════════════════════════════ */
.mesc__p { width: 200px; }
.mesc__seta { width: 20px; height: 20px; margin-bottom: 34px; }
.mesc__vazio { width: 30px; height: 30px; }
.mesc__done svg { width: 40px; height: 40px; }
.mesc__done b { font-size: 14.5px; }
.mesc__p figcaption { font-size: 11px; }
.mesc__p figcaption i { font-size: 13.5px; }

.cmd {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap; margin-top: var(--s4);
}
.cmd p { font-size: 13px; color: var(--ink-2); }
.cmd p b { color: var(--ink); font-weight: 550; }

@media (max-width: 720px) {
  .prodsel { flex-direction: column; }
  .prodsel__m { width: 100%; aspect-ratio: 16/10; }
  .mesc__p { width: 150px; }
}

/* ═══ BLOGUERINHA — quatro colunas em uma tela ══════════════ */
.cols {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s5); align-items: start;
}
.col {
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s4); border-radius: var(--r-lg);
  background: rgba(255,255,255,.028); border: 1px solid var(--line);
  transition: border-color var(--t2) var(--ez), background var(--t2) var(--ez);
}
.col.tem { border-color: var(--acc-edge); background: var(--acc-wash); }
.col__h { display: flex; flex-direction: column; gap: 2px; }
.col__n {
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--acc-hi);
}
.col__h b { font-size: 16px; font-weight: 600; letter-spacing: -.018em; }
.col__h i { font-style: normal; font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }
.col__m {
  position: relative; aspect-ratio: 9/14; overflow: hidden;
  border-radius: var(--r-md); background: var(--well);
  display: grid; place-items: center;
  border: 1px solid var(--line-soft);
}
.col__m img, .col__m video { width: 100%; height: 100%; object-fit: cover; }
.col__vazio { width: 26px; height: 26px; color: var(--ink-4); }
.col__ck {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; color: #0B0713; background: var(--acc-hi);
}
.col__ck svg { width: 12px; height: 12px; }
.col__t {
  font-size: 12.5px; font-weight: 500; color: var(--ink-2); min-height: 18px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.col__b { width: 100%; margin-top: auto; }

.mv__g--9x16 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.mv__g--9x16 .ucen__m { aspect-ratio: 9/16; }
.mv__g--3x4 { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }

@media (max-width: 980px) { .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cols { grid-template-columns: 1fr; } }

/* ═══ TROCAR PESSOA — três etapas lado a lado ═══════════════ */
/* Três colunas centradas na largura útil. A moldura voltou, fina: só o
   suficiente para agrupar mídia e botões, sem virar uma caixa grossa. */
/* Os três cards e a faixa de conclusão dividem a mesma largura, senão a
   faixa fica visivelmente mais larga que eles e a página parece torta. */
:root { --trilho-troca: 1000px; }
.troca {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 320px));
  gap: var(--s5); align-items: start; justify-content: center;
  max-width: var(--trilho-troca); margin-inline: auto;
}
.fimcena--troca { max-width: var(--trilho-troca); margin-inline: auto; }
.tr {
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s3); border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, .018);
  transition: border-color var(--t2) var(--ez), background var(--t2) var(--ez);
}
.tr.tem {
  border-color: rgba(155, 61, 255, .22);
  background: rgba(155, 61, 255, .045);
}
.tr__h {
  display: flex; flex-direction: column; gap: 2px;
  padding: 3px var(--s2) 1px;
}
.tr__n {
  font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
.tr.tem .tr__n { color: var(--acc-hi); }
.tr__h i {
  font-style: normal; font-size: 12px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tr__m {
  position: relative; aspect-ratio: 9/16; overflow: hidden;
  border-radius: var(--r-lg); background: var(--well);
  display: grid; place-items: center;
  border: 1px solid var(--line-soft);
}
.tr__m img, .tr__m video { width: 100%; height: 100%; object-fit: cover; }
.tr__vazio { width: 32px; height: 32px; color: var(--ink-4); }
.tr__aviso {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: var(--s6); text-align: center;
}
.tr__aviso svg { width: 30px; height: 30px; color: var(--ink-4); }
.tr__aviso p { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.tr__ck {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 50%; color: #0B0713; background: var(--acc-hi);
}
.tr__ck svg { width: 13px; height: 13px; }
.tr__b { width: 100%; }
.tr__b + .tr__b { margin-top: -4px; }

@media (max-width: 900px) { .troca { grid-template-columns: 1fr; } }

/* ═══ ENTRADA — a tela anterior à sessão ════════════════════ */
body.sem-sessao .rail,
body.sem-sessao .rail__t,
body.sem-sessao .burger,
body.barrado .rail,
body.barrado .rail__t,
body.barrado .burger { display: none; }
body.sem-sessao .shell,
body.barrado .shell { margin-left: 0; }
body.sem-sessao .main,
body.barrado .main { max-width: none; padding: 0; }

/* tela de conta pendente/bloqueada — sem caixa, centralizada */
.barrada { min-height: 100vh; display: grid; place-items: center; padding: var(--s6); }
.barrada__c { text-align: center; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.barrada__i {
  width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%;
  color: var(--acc-hi); background: var(--acc-wash); border: 1px solid var(--acc-edge); margin-bottom: var(--s2);
}
.barrada__i svg { width: 27px; height: 27px; }
.barrada__c h1 { font-size: 22px; font-weight: 650; letter-spacing: -.01em; }
.barrada__c p { font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.barrada__c .b { margin-top: var(--s4); }
body.conferindo #app { opacity: 0; }

.entrada {
  display: grid; grid-template-columns: 1fr 460px;
  min-height: 100vh; align-items: stretch;
}
.entrada__art {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  padding: var(--s12);
  border-right: 1px solid var(--line);
}
.entrada__vd {
  position: absolute; inset: -8% -2%;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4);
  opacity: .3;
  mask-image: radial-gradient(125% 95% at 42% 30%, #000 22%, transparent 82%);
  -webkit-mask-image: radial-gradient(125% 95% at 42% 30%, #000 22%, transparent 82%);
}
/* véu que devolve o contraste ao texto */
.entrada__art::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,7,14,.80) 0%, rgba(8,7,14,.30) 50%, rgba(8,7,14,.88) 100%),
    linear-gradient(0deg, rgba(8,7,14,.94) 2%, transparent 46%);
}

.tr3 { overflow: hidden; }
.tr3__f {
  display: flex; flex-direction: column; gap: var(--s4);
  will-change: transform;
  /* a fita tem o dobro dos clipes: -50% recomeça no mesmo quadro */
  animation: sobe 42s linear infinite;
}
.tr3--1 .tr3__f { animation-duration: 56s; animation-direction: reverse; }
.tr3--2 .tr3__f { animation-duration: 48s; animation-delay: -14s; }

.tr3__v {
  display: block; aspect-ratio: 9/16; flex: none;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--well);
}
.tr3__v video { width: 100%; height: 100%; object-fit: cover; }

@keyframes sobe {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .tr3__f { animation: none; }
}

.entrada__frase { position: relative; z-index: 2; max-width: 30ch; }

.marca { display: inline-flex; align-items: center; gap: 11px; margin-bottom: var(--s6); }
.marca b {
  font-size: 19px; font-weight: 600; letter-spacing: -.022em; color: var(--ink);
}
.marca--sm { margin-bottom: var(--s8); }
.marca--sm .logo__m { width: 32px; height: 32px; border-radius: 10px; }
.marca--sm .logo__m svg { width: 17px; height: 17px; }
.marca--sm b { font-size: 15.5px; }
.entrada__frase h2 {
  font-size: clamp(28px, 3.4vw, 40px); font-weight: 600;
  letter-spacing: -.035em; line-height: 1.05; text-wrap: balance;
}
.entrada__frase p {
  margin-top: var(--s4); font-size: 14px; color: var(--ink-2);
  line-height: 1.6; max-width: 40ch;
}

.entrada__form {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--s8) var(--s10);
}
.ent { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: var(--s4); }
.ent__h { margin-bottom: var(--s2); }
.ent__h h1 { font-size: 26px; font-weight: 600; letter-spacing: -.03em; }
.ent__h p { font-size: 13.5px; color: var(--ink-3); margin-top: 5px; }
.ent__b { width: 100%; height: 46px; margin-top: var(--s2); }
.ent__erro {
  font-size: 12.5px; color: #F2B8B8; line-height: 1.45;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: rgba(190, 60, 70, .14); border: 1px solid rgba(210, 90, 100, .3);
}
.inpw { position: relative; }
.inpw .in { width: 100%; padding-right: 44px; }
.inpw__eye {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer;
  border-radius: 8px; color: var(--ink-3); background: transparent; border: 0;
  transition: color var(--t1) var(--ez), background var(--t1) var(--ez);
}
.inpw__eye:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.inpw__eye.on { color: var(--acc-hi); }
.inpw__eye svg { width: 18px; height: 18px; }
.ent__esqueci {
  align-self: flex-end; margin-top: 7px; font-size: 12px; color: var(--ink-3);
  background: 0; border: 0; cursor: pointer;
}
.ent__esqueci:hover { color: var(--acc-hi); text-decoration: underline; }
.ent__alt { font-size: 12.5px; color: var(--ink-3); text-align: center; margin-top: var(--s2); }
.ent__link {
  background: none; border: 0; padding: 0 0 0 4px;
  color: var(--acc-hi); font-size: 12.5px; font-weight: 550; cursor: pointer;
}
.ent__link:hover { text-decoration: underline; }

/* sair, ao lado do perfil */
/* rodapé em coluna: card de indicação, perfil e Sair como linha própria */
.rail__ft { display: flex; flex-direction: column; gap: var(--s3); }

/* Indique amigos e Promoção Dia dos Pais — dois cards distintos */
.promo {
  display: flex; align-items: center; gap: var(--s3); text-align: left;
  padding: 9px var(--s3); border-radius: var(--r-lg); border: 1px solid var(--line);
  background: rgba(255,255,255,.028);
  transition: background var(--t1) var(--ez), border-color var(--t1) var(--ez), transform var(--t1) var(--ez-out);
}
.promo:hover { transform: translateY(-1px); }
.promo:active { transform: scale(.99); }
.promo__t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.promo__t b { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.promo__t i {
  font-style: normal; font-size: 10.5px; color: var(--ink-2); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.promo__i {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 10px; background: rgba(8,7,14,.35);
}
.promo__i svg { width: 18px; height: 18px; }

/* Indique amigos — roxo da marca */
.promo--ind { border-color: var(--acc-edge); background: var(--acc-wash); }
.promo--ind:hover { background: rgba(155,61,255,.2); }
.promo--ind .promo__i { color: var(--acc-hi); border: 1px solid var(--acc-edge); }

/* Promoção Dia dos Pais — dourado do brinde */
.promo--pais { border-color: rgba(212,175,55,.32); background: rgba(212,175,55,.08); }
.promo--pais:hover { background: rgba(212,175,55,.14); }
.promo--pais .promo__i { color: var(--gold); border: 1px solid rgba(212,175,55,.34); }

/* divisor entre o card e o perfil */
.rail__div { height: 1px; background: var(--line-soft); margin: var(--s1) var(--s2); }

/* Sair — linha inteira, embaixo, não mais um botão ao lado */
.sairrow {
  display: flex; align-items: center; gap: var(--s3);
  padding: 10px var(--s4); border-radius: var(--r-md); color: var(--ink-2);
  transition: color var(--t1) var(--ez), background var(--t1) var(--ez);
}
.sairrow svg { width: 17px; height: 17px; flex: none; }
.sairrow span { font-size: 13.5px; font-weight: 500; }
.sairrow:hover { color: var(--ink); background: rgba(255,255,255,.05); }

/* recolhida: só os ícones */
body.mini .promo__t, body.mini .sairrow span, body.mini .me__i, body.mini .me > svg { display: none; }
body.mini .promo { justify-content: center; padding: 8px; }
body.mini .rail__div { display: none; }

@media (max-width: 900px) {
  .entrada { grid-template-columns: 1fr; }
  .entrada__art { display: none; }
  .entrada__form { padding: var(--s8) var(--s5); min-height: 100vh; }
}


/* ═══ MODAL DE PROMPT — texto longo rola, mídia não estica ══ */
.modal__c--p {
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  max-height: min(88vh, 780px);
}
.modal__c--p .modal__m {
  align-self: stretch; overflow: hidden;
  display: grid; place-items: center;
}
.modal__c--p .modal__m video,
.modal__c--p .modal__m img {
  width: 100%; height: 100%; object-fit: cover;
}
/* o corpo é grid de três linhas: cabeçalho, texto que rola, rodapé */
.modal__c--p .modal__b {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
}
.modal__c--p .modal__t {
  margin: 0; padding: var(--s5) var(--s6);
  overflow-y: auto; min-height: 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; line-height: 1.62; color: var(--ink-2);
  white-space: pre-wrap; word-break: break-word;
  overscroll-behavior: contain;
}
.modal__c--p .modal__f {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s4) var(--s6) var(--s5);
  border-top: 1px solid var(--line-soft);
}
.modal__acoes { display: flex; gap: 7px; margin-left: auto; flex-wrap: wrap; }
.copy--sm { width: auto; height: 34px; padding: 0 16px; margin: 0; font-size: 12.5px; }
.copy--sm svg { width: 14px; height: 14px; }

@media (max-width: 760px) {
  .modal__c--p { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .modal__c--p .modal__m { max-height: 34vh; }
  .modal__c--p .modal__t { padding: var(--s4) var(--s5); }
  .modal__c--p .modal__f { padding: var(--s3) var(--s5) var(--s4); }
  .modal__acoes { margin-left: 0; width: 100%; }
  .modal__acoes .b, .modal__acoes .copy { flex: 1; }
}

/* estados vazios do painel */
.row--vazia { opacity: .8; }
.row--vazia .row__t b { font-weight: 500; color: var(--ink-2); }
.pan--vazio {
  display: flex; flex-direction: column; align-items: center; gap: var(--s3);
  padding: var(--s12) var(--s6); text-align: center;
}
.pan--vazio .vazio__i { width: 30px; height: 30px; color: var(--ink-4); }
.pan--vazio b { font-size: 14.5px; font-weight: 550; }
.pan--vazio p { font-size: 12.5px; color: var(--ink-3); max-width: 40ch; }
.pan--vazio .b { margin-top: var(--s2); }

/* ═══ CONVITE — cadastrar produto próprio ═══════════════════ */
.convite {
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s5) var(--s6); border-radius: var(--r-lg);
  background: rgba(255,255,255,.028);
  border: 1px dashed var(--line-hard);
}
.convite__i {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-sm); color: var(--acc-hi);
  background: var(--acc-wash); border: 1px solid var(--acc-edge);
}
.convite__i svg { width: 19px; height: 19px; }
.convite__t { flex: 1; min-width: 0; }
.convite__t b { font-size: 14.5px; font-weight: 600; }
.convite__t p { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; max-width: 62ch; }

/* ═══ MODAL — cadastro de produto ═══════════════════════════ */
.modal__c--np {
  width: min(660px, 100%); max-width: none;
  grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr);
  max-height: min(88vh, 700px);
}
.np {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: var(--s5);
  padding: 0 var(--s6) var(--s6); overflow-y: auto; min-height: 0;
}
.np__foto {
  aspect-ratio: 1/1; border-radius: var(--r-md); overflow: hidden; cursor: pointer;
  display: grid; place-items: center; position: relative;
  background: var(--well); border: 1px dashed var(--line-hard);
  transition: border-color var(--t1) var(--ez), background var(--t1) var(--ez);
}
.np__foto:hover { border-color: var(--acc-edge); background: rgba(255,255,255,.05); }
.np__foto.tem { border-style: solid; border-color: var(--acc-edge); background: #EDEBE6; }
.np__foto img { width: 100%; height: 100%; object-fit: contain; }
.np__ph {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  text-align: center; padding: var(--s4);
}
.np__ph svg { width: 24px; height: 24px; color: var(--ink-4); }
.np__ph b { font-size: 13px; font-weight: 550; }
.np__ph i { font-style: normal; font-size: 11px; color: var(--ink-4); }
.np__campos { display: flex; flex-direction: column; gap: var(--s4); }
.np__campos .bx { margin-top: auto; }
.fld .op { font-style: normal; color: var(--ink-4); font-weight: 400; }

@media (max-width: 600px) {
  .convite { flex-direction: column; align-items: flex-start; }
  .convite .b { width: 100%; }
  .np { grid-template-columns: 1fr; }
  .np__foto { aspect-ratio: 16/10; }
}

/* três formatos do Impulsione, um pouco maiores que os cinco antigos */
.g--imp {
  /* cards de largura fixa, alinhados à esquerda: com poucos formatos
     uma grade elástica esticaria cada card até ficar gigante */
  grid-template-columns: repeat(auto-fill, minmax(230px, 264px));
  gap: var(--s5); width: 100%;
}
.g--imp .vir__m { aspect-ratio: 9/16; }
@media (max-width: 560px) { .g--imp { grid-template-columns: 1fr; } }



/* campo de texto dentro do construtor de avatar */
.avtxt { width: 100%; resize: vertical; min-height: 62px; line-height: 1.5; margin-top: var(--s3); }

/* ═══ ESCOLHA DE PRODUTO ════════════════════════════════════ */
.escolher { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.escolher__c {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: var(--s6); border-radius: var(--r-lg); text-align: left;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  transition: border-color var(--t2) var(--ez), background var(--t2) var(--ez),
              transform var(--t2) var(--ez-out);
}
.escolher__c:hover {
  border-color: var(--acc-edge); background: var(--acc-wash); transform: translateY(-3px);
}
.escolher__i {
  width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: var(--s3);
  border-radius: var(--r-md); color: var(--acc-hi);
  background: rgba(255,255,255,.05); border: 1px solid var(--line-hard);
  transition: background var(--t2) var(--ez), border-color var(--t2) var(--ez);
}
.escolher__i svg { width: 20px; height: 20px; }
.escolher__c:hover .escolher__i { background: var(--acc-wash); border-color: var(--acc-edge); }
.escolher__c b { font-size: 15.5px; font-weight: 600; letter-spacing: -.015em; }
.escolher__c i { font-style: normal; font-size: 12.5px; color: var(--ink-3); }

.escolhido {
  display: flex; align-items: center; gap: var(--s4);
  padding: 10px 12px; border-radius: var(--r-md);
  background: var(--acc-wash); border: 1px solid var(--acc-edge);
}
.escolhido__m {
  width: 54px; height: 54px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-xs); overflow: hidden; background: #EDEBE6;
}
.escolhido__m img { width: 100%; height: 100%; object-fit: contain; }
.escolhido__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.escolhido__t b {
  font-size: 14px; font-weight: 550; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch;
}
.escolhido__t p { font-size: 11.5px; color: var(--ink-3); }
.escolhido__t .tg { font-size: 9px; padding: 3px 8px; }
.escolhido .b { height: 34px; padding: 0 14px; font-size: 12.5px; }

@media (max-width: 640px) {
  .escolher { grid-template-columns: 1fr; }
  .escolhido { flex-direction: column; align-items: flex-start; }
  .escolhido .b { width: 100%; }
}

.tplv__b {
  width: 100%; min-width: 0; height: 34px; margin: 2px 0 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 10px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 500; color: var(--ink);
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(10, 8, 16, .58);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  transition: background var(--t1) var(--ez), border-color var(--t1) var(--ez);
}
.tplv__b svg { width: 13px; height: 13px; flex: none; }
.tplv__b .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tplv__b:hover { background: rgba(24, 18, 38, .82); border-color: rgba(255,255,255,.32); }
.tplv__b--p:hover { background: rgba(155, 61, 255, .55); border-color: transparent; }
/* o preenchimento do .copy vale aqui também, sem herdar a altura dele */
.tplv__b.copy { width: 100%; height: 36px; margin-top: 2px; font-weight: 550; }
.tplv__b.copy:hover {
  background: linear-gradient(120deg, var(--acc-hi), var(--acc));
  border-color: transparent; color: #fff;
}

/* o modal de escolha sem busca não precisa da faixa de filtro vazia */
.mv__f:empty { display: none; padding: 0; border: 0; }

/* ═══ RADAR — a mineração contínua da Vitrine ═══════════════ */
.radar {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 132px minmax(0, 1fr) auto;
  align-items: center; gap: var(--s6);
  padding: var(--s6) var(--s8) var(--s6) var(--s6);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 140% at 8% 50%, rgba(155, 61, 255, .16), transparent 58%),
    radial-gradient(90% 120% at 96% 20%, rgba(233, 30, 140, .10), transparent 62%),
    rgba(255,255,255,.028);
  border: 1px solid var(--line);
}

/* pulso: três anéis saindo do núcleo, defasados */
.radar__viz { position: relative; width: 132px; height: 132px; display: grid; place-items: center; }
.radar__anel {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--acc-edge);
  animation: pulsa 3.6s cubic-bezier(.22,.61,.36,1) infinite;
  opacity: 0;
}
.radar__anel:nth-child(2) { animation-delay: 1.2s; }
.radar__anel:nth-child(3) { animation-delay: 2.4s; }
@keyframes pulsa {
  0%   { transform: scale(.32); opacity: 0; }
  18%  { opacity: .85; }
  100% { transform: scale(1); opacity: 0; }
}
.radar__nucleo {
  position: relative; z-index: 2;
  width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 50%; color: var(--acc-hi);
  background: linear-gradient(150deg, rgba(155,61,255,.34), rgba(233,30,140,.18));
  border: 1px solid var(--acc-edge);
  box-shadow: 0 0 26px -6px rgba(155, 61, 255, .6);
}
.radar__nucleo svg { width: 22px; height: 22px; }
/* feixe que dá a volta — bordo forte com rastro que some, como um radar */
.radar__varre {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(196,107,255,.42) 0deg,
    rgba(196,107,255,.14) 34deg,
    transparent 96deg,
    transparent 360deg);
  transform-origin: 50% 50%;
  animation: varre 3.6s linear infinite;
  will-change: transform;
}
@keyframes varre { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.radar__txt { min-width: 0; }
.radar__live {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 9px;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--acc-hi);
}
.radar__live i {
  width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: bate 2s ease-out infinite;
}
@keyframes bate {
  0%   { box-shadow: 0 0 0 0 rgba(196,107,255,.7); }
  70%  { box-shadow: 0 0 0 9px rgba(196,107,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(196,107,255,0); }
}
.radar__txt h2 {
  font-size: clamp(17px, 2vw, 21px); font-weight: 600;
  letter-spacing: -.022em; line-height: 1.2; text-wrap: balance;
}
.radar__txt p {
  font-size: 12.5px; color: var(--ink-2); line-height: 1.55;
  margin-top: 7px; max-width: 62ch;
}

.radar__n { display: flex; gap: var(--s8); margin: 0; flex: none; }
.radar__n div { display: flex; flex-direction: column; gap: 2px; }
.radar__n dt {
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.radar__n dd {
  margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.03em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.radar__n .radar__ciclo { font-size: 14px; font-weight: 500; color: var(--acc-hi); }

@media (prefers-reduced-motion: reduce) {
  .radar__anel, .radar__live i { animation: none; }
  .radar__anel:first-child { opacity: .5; transform: scale(1); }
  /* sem giro: em vez do cone congelado, um brilho radial calmo e simétrico */
  .radar__varre {
    animation: none;
    background: radial-gradient(circle at center, transparent 52%, rgba(196,107,255,.16) 100%);
  }
}
@media (max-width: 1020px) {
  .radar { grid-template-columns: 100px minmax(0, 1fr); padding: var(--s5); gap: var(--s5); }
  .radar__viz { width: 100px; height: 100px; }
  .radar__n { grid-column: 1 / -1; gap: var(--s6); }
}
@media (max-width: 560px) {
  .radar { grid-template-columns: 1fr; text-align: left; }
  .radar__viz { display: none; }
  .radar__n { flex-wrap: wrap; }
}

/* produto recém-importado, ainda sem preço e comissão */
.pr__falta {
  font-size: 11.5px; color: var(--ink-4); font-style: italic;
  padding: var(--s3) 0;
}


/* ═══ FORÇA DO PRODUTO — posição no ranking ═════════════════ */
.forca { display: flex; flex-direction: column; gap: 7px; }
.forca__t { display: flex; align-items: baseline; justify-content: space-between; }
.forca__t b {
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.forca__t i {
  font-style: normal; font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--ink-2);
}
.forca__tr {
  height: 5px; border-radius: var(--r-pill); overflow: hidden;
  background: rgba(255,255,255,.07);
}
.forca__tr span {
  display: block; height: 100%; border-radius: inherit;
  transition: width 900ms var(--ez-out);
}
.forca--viral .forca__t b { color: #FF7A59; }
.forca--viral .forca__tr span { background: linear-gradient(90deg, #9B3DFF, #E91E8C 55%, #FF7A59); }
.forca--alta  .forca__t b { color: var(--acc-hi); }
.forca--alta  .forca__tr span { background: linear-gradient(90deg, #7C2CC8, #C46BFF); }
.forca--radar .forca__t b { color: var(--ink-3); }
.forca--radar .forca__tr span { background: linear-gradient(90deg, #4A4358, #6E6580); }

/* selo de posição no ranking, sobre a foto */
.pr__rank {
  position: absolute; z-index: 2; top: 9px; right: 9px;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: 9.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: #140A1E; background: linear-gradient(180deg, #F0D8FF, #C9A0FF);
  box-shadow: 0 4px 14px -6px rgba(155, 61, 255, .8);
}
.pr h3 { font-size: 14.5px; line-height: 1.32; }

/* SVG dentro de etiqueta precisa de tamanho: solto, ele ocupa o card inteiro */
.tg svg { width: 12px; height: 12px; flex: none; }
.pr__sel { max-width: calc(100% - 60px); }
.pr__rank {
  min-width: 34px; text-align: center;
  font-size: 11px; letter-spacing: 0; padding: 4px 9px;
}


@media (max-width: 1080px) { .g--prod { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .g--prod { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .g--prod { grid-template-columns: 1fr; } }

/* enquanto o melhor quadro é procurado */
.tr__lendo {
  display: flex; flex-direction: column; align-items: center; gap: var(--s4);
  padding: var(--s6); text-align: center;
}
.tr__lendo p { font-size: 12px; color: var(--ink-3); line-height: 1.45; }
.tr__spin {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--line-hard); border-top-color: var(--acc-hi);
  animation: gira 900ms linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tr__spin { animation-duration: 2.4s; } }

/* forja: a imagem de partida ao fundo, uma faixa de luz varrendo e
   uma malha fina por cima. Dá para acompanhar o que está sendo mexido. */
.tr__forja {
  position: absolute; inset: 0; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  background: #0F0D1A;
}
.tr__forja img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.5) brightness(.5) blur(1px);
  transform: scale(1.03);
  animation: forjaPulsa 3.2s var(--ez) infinite;
}
@keyframes forjaPulsa {
  50% { filter: saturate(.85) brightness(.72) blur(0); transform: scale(1); }
}

/* a varredura sobe e desce, deixando um rastro luminoso */
.tr__varre {
  position: absolute; left: 0; right: 0; height: 38%;
  background: linear-gradient(180deg,
    transparent, rgba(196, 107, 255, .16) 42%, rgba(233, 30, 140, .28) 68%,
    rgba(255, 255, 255, .5) 82%, transparent);
  filter: blur(1px);
  animation: varre 2.1s cubic-bezier(.66, 0, .34, 1) infinite;
}
@keyframes varre {
  0%   { top: -40%; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: 102%; opacity: 0; }
}

/* malha fina: a textura de "sendo processado", quase imperceptível */
.tr__malha {
  position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay; opacity: .7;
}

.tr__msg {
  position: relative; z-index: 2;
  margin: 0 var(--s4) var(--s5); padding: 9px var(--s4);
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11.5px; letter-spacing: .01em; color: var(--ink);
  border-radius: 999px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(10, 8, 16, .68);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.tr__msg i {
  width: 3px; height: 3px; border-radius: 50%; background: var(--acc-hi);
  animation: ponto 1.15s var(--ez) infinite;
}
.tr__msg i:first-of-type { margin-left: 4px; }
.tr__msg i:nth-of-type(2) { animation-delay: .16s; }
.tr__msg i:nth-of-type(3) { animation-delay: .32s; }
@keyframes ponto { 0%, 60%, 100% { opacity: .22; } 30% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .tr__varre { animation-duration: 5s; }
  .tr__forja img { animation: none; }
  .tr__msg i { animation-duration: 3s; }
}

/* ═══ MODAL DA MESCLAGEM ════════════════════════════════════ */
.modal__c--mx {
  width: min(1020px, 100%); max-width: none;
  grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr);
  max-height: min(90vh, 820px);
}
.mx {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s6);
  padding: 0 var(--s6) var(--s6); min-height: 0;
}
/* a imagem fica inteira no painel; quem rola é só a coluna do lado */
.mx__palco { align-self: start; }
.mx__palco {
  aspect-ratio: 9/16; max-height: 100%; border-radius: var(--r-lg); overflow: hidden;
  display: grid; place-items: center; position: relative;
  background: radial-gradient(120% 100% at 50% 0%, rgba(155,61,255,.16), rgba(10,8,16,.9));
  border: 1px solid var(--line);
}
.mx__palco img { width: 100%; height: 100%; object-fit: contain; }
.mx__palco.pronto { border-color: var(--acc-edge); }

/* as peças giram e se aproximam enquanto a composição é montada */
@keyframes funde {
  0%, 100% { transform: translate(var(--gx), var(--gy)) rotate(var(--gr)) scale(.82); opacity: .5; }
  50%      { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; }
}

.mx__lado {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--s4); min-width: 0; min-height: 0;
}
.mx__passos { display: flex; flex-direction: column; gap: var(--s4); margin-top: var(--s2); }
.mx__passos li {
  display: flex; align-items: center; gap: var(--s3);
  font-size: 13px; color: var(--ink-4);
  transition: color var(--t2) var(--ez);
}
.mx__passos li.agora { color: var(--ink); }
.mx__passos li.ok    { color: var(--ink-3); }
.mx__bola {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border-radius: 50%; font-size: 11.5px; font-weight: 600;
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
  transition: background var(--t2) var(--ez), border-color var(--t2) var(--ez);
}
.mx__bola svg { width: 12px; height: 12px; }
.mx__passos li.agora .mx__bola {
  background: var(--acc-wash); border-color: var(--acc-edge); color: var(--acc-hi);
  animation: bate 1.6s ease-out infinite;
}
.mx__passos li.ok .mx__bola { background: var(--acc-hi); border-color: transparent; color: #120A1C; }


/* miniatura do resultado na fita */
.mesc__m--btn { padding: 0; border: 1px dashed var(--line-hard); cursor: pointer; width: 100%; }
.mesc__m--btn:disabled { cursor: default; }
.mesc__p--out .mesc__m--btn { border-style: dashed; }
.mesc__p--out.ok .mesc__m--btn { border-style: solid; border-color: var(--acc-edge); }
.mesc__lupa {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(10,8,16,.55); color: var(--ink);
  opacity: 0; transition: opacity var(--t2) var(--ez);
}
.mesc__lupa svg { width: 22px; height: 22px; }
.mesc__m--btn:hover .mesc__lupa { opacity: 1; }

@media (max-width: 760px) {
  .mx { grid-template-columns: 1fr; }
  .mx__palco { max-height: 42vh; aspect-ratio: auto; }
}

.escolhido__a { display: flex; gap: 6px; flex: none; align-items: center; }
.ib--x { width: 34px; height: 34px; color: var(--ink-3); }
.ib--x:hover { color: #F2A8A8; background: rgba(190,70,80,.14); border-color: rgba(210,90,100,.3); }
.ib--x svg { width: 15px; height: 15px; }

/* enviar imagem dentro do modal de escolha */
.subir {
  display: flex; align-items: center; gap: var(--s4);
  padding: 11px 13px; border-radius: var(--r-md); cursor: pointer;
  background: rgba(255,255,255,.03); border: 1px dashed var(--line-hard);
  transition: border-color var(--t1) var(--ez), background var(--t1) var(--ez);
}
.subir:hover { border-color: var(--acc-edge); background: var(--acc-wash); }
.subir__i {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-xs); color: var(--acc-hi);
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
}
.subir__i svg { width: 17px; height: 17px; }
.subir > span:nth-child(2) { flex: 1; min-width: 0; }
.subir b { display: block; font-size: 13px; font-weight: 550; }
.subir i { font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.subir .b { flex: none; pointer-events: none; }


.b.off { opacity: .45; pointer-events: none; }
label.b { cursor: pointer; }


/* a lista de peças encolhe para o prompt ter espaço */
@media (max-width: 820px) {
  .mx { grid-template-columns: 1fr; overflow-y: auto; }
  .mx__lado { grid-template-rows: auto auto auto; }
}

/* faixa de conclusão: o convite à esquerda, as ações à direita.
   Um fio de luz no topo marca que ali a etapa termina. */
.fimcena {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s6); flex-wrap: wrap;
  padding: var(--s6) var(--s8); border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 180% at 0% 0%, rgba(155, 61, 255, .10), transparent 62%),
    radial-gradient(120% 180% at 100% 100%, rgba(233, 30, 140, .07), transparent 58%),
    rgba(255, 255, 255, .028);
}
.fimcena::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--acc-hi) 22%, var(--mag) 62%, transparent);
  opacity: .5;
}
.fimcena__t b {
  display: block; font-size: 16px; font-weight: 600; letter-spacing: -.02em;
}
.fimcena__t p {
  font-size: 12.5px; color: var(--ink-3); margin-top: 4px;
  line-height: 1.5; max-width: 52ch;
}
.fimcena__a { display: flex; gap: 8px; flex-wrap: wrap; }
.fimcena__a .b { height: 44px; padding-inline: var(--s6); }
@media (max-width: 640px) {
  .fimcena { flex-direction: column; align-items: stretch; }
  .fimcena__a .b { flex: 1; }
}


/* ═══ MODAL — prompt à direita, ações discretas ═════════════ */
.mx__lado { display: grid; grid-template-rows: minmax(0, 1fr); min-height: 0; }
.mx__prompt {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--s3);
  min-height: 0;
}
.mx__ph { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.mx__ph b { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.mx__ph i {
  font-style: normal; font-size: 11.5px; color: var(--acc-hi);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 18ch;
}
.mx__prompt pre {
  margin: 0; padding: var(--s5); border-radius: var(--r-md);
  background: var(--well); border: 1px solid var(--line-soft);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; line-height: 1.68; color: var(--ink-2);
  white-space: pre-wrap; word-break: break-word;
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
/* cursor piscando enquanto o texto chega */
.mx__prompt pre.escrevendo::after {
  content: ''; display: inline-block; width: 8px; height: 15px;
  margin-left: 2px; vertical-align: -3px;
  background: var(--acc-hi); animation: pisca 1s steps(2) infinite;
}
@keyframes pisca { 50% { opacity: 0; } }

.mx__vazio {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s4); padding: var(--s8) var(--s6); text-align: center;
  border-radius: var(--r-md); border: 1px dashed var(--line-hard);
  background: rgba(255,255,255,.02);
}
.mx__vazio span { width: 30px; height: 30px; color: var(--ink-4); }
.mx__vazio p { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; max-width: 34ch; }

.mx__redige {
  flex: 1; height: 42px; display: inline-flex; align-items: center; gap: 3px;
  padding: 0 var(--s5); border-radius: 999px;
  border: 1px solid var(--acc-edge); background: var(--acc-wash);
  font-size: 12.5px; color: var(--ink);
}
.mx__redige svg { width: 15px; height: 15px; color: var(--acc-hi); margin-right: 7px; }
.mx__redige b { font-weight: 500; }
.mx__redige i {
  width: 3px; height: 3px; border-radius: 50%; background: var(--acc-hi);
  animation: ponto 1.15s var(--ez) infinite;
}
.mx__redige i:first-of-type { margin-left: 4px; }
.mx__redige i:nth-of-type(2) { animation-delay: .16s; }
.mx__redige i:nth-of-type(3) { animation-delay: .32s; }

.mx__acoes { display: flex; gap: 7px; }
.mx__acoes .b, .mx__acoes .copy { flex: 1; margin: 0; }
.mx__acoes .copy { height: 42px; }

/* baixar e refazer sobre a imagem, discretos */
.mx__baixar, .mx__refazer {
  position: absolute; z-index: 3; top: 12px;
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50%; color: var(--ink);
  background: rgba(10, 8, 16, .62); border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  opacity: .55; transition: opacity var(--t1) var(--ez), background var(--t1) var(--ez);
}
.mx__baixar { right: 12px; }
.mx__refazer { right: 58px; }
.mx__baixar svg { width: 17px; height: 17px; transform: rotate(90deg); }
.mx__refazer svg { width: 16px; height: 16px; }
.mx__palco:hover .mx__baixar, .mx__palco:hover .mx__refazer { opacity: 1; }
.mx__baixar:hover, .mx__refazer:hover { background: rgba(155, 61, 255, .55); }

@media (max-width: 820px) {
  .mx { grid-template-columns: 1fr; overflow-y: auto; }
  .mx__prompt pre { max-height: 260px; }
}

/* a foto gerada ocupa a ficha inteira */
.ficha__m { position: relative; overflow: hidden; }
.ficha__foto { width: 100%; height: 100%; object-fit: cover; display: block; }
.ficha__m .tr__forja, .ficha__m .tr__aviso { position: absolute; inset: 0; }

/* a pílula da Biblioteca se separa das categorias da vitrine */
.upil__b--meus {
  display: inline-flex; align-items: center; gap: 6px;
  border-color: var(--acc-edge); color: var(--ink);
  margin-right: 5px; padding-right: 12px;
  position: relative;
}
.upil__b--meus::after {
  content: ''; position: absolute; right: -5px; top: 20%; bottom: 20%;
  width: 1px; background: var(--line-hard);
}
.upil__b--meus svg { width: 13px; height: 13px; color: var(--acc-hi); }
.upil__b--meus i {
  font-style: normal; font-size: 10px; padding: 1px 5px; border-radius: 999px;
  background: var(--acc-wash); color: var(--acc-hi);
}
.upil__b--meus.on svg, .upil__b--meus.on i { color: inherit; }

/* renomear no card do acervo */
.item__n { display: flex; align-items: flex-start; gap: 5px; }
.item__lp {
  flex: none; width: 20px; height: 20px; display: grid; place-items: center;
  border-radius: 6px; color: var(--ink-4); opacity: 0;
  transition: opacity var(--t1) var(--ez), color var(--t1) var(--ez);
}
.item__lp svg { width: 12px; height: 12px; }
.item:hover .item__lp, .item__lp:focus-visible { opacity: 1; }
.item__lp:hover { color: var(--acc-hi); background: var(--acc-wash); }
.item__ren { display: flex; align-items: center; gap: 5px; width: 100%; }
.item__ren .in--sm {
  flex: 1; min-width: 0; width: 100%;
  height: 30px; font-size: 12.5px; padding: 0 9px;
}
.ib--ok { width: 30px; height: 30px; flex: none; color: var(--acc-hi); }
.ib--ok svg { width: 15px; height: 15px; }

/* área de soltar: o input invisível cobre o bloco inteiro */
.solte { position: relative; cursor: pointer; }
.solte__in {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.solte:hover { border-color: var(--acc-edge); background: var(--acc-wash); }
.solte.ocupada { cursor: progress; border-color: var(--acc-edge); }
.solte__spin {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--line-hard); border-top-color: var(--acc-hi);
  animation: gira 900ms linear infinite;
}

/* Recomeçar é destrutivo: fica discreto e só ganha cor no hover */
.tr__b--x { color: var(--ink-3); }
.tr__b--x:hover { color: var(--coral); border-color: rgba(255, 90, 95, .38); }
.tr__b--x svg { width: 14px; height: 14px; }


/* ═══ CARREGAMENTO DA MESCLA ════════════════════════════════
   Nada do que foi escolhido aparece aqui: a cena está sendo feita, não
   pré-visualizada. O que se vê é o processo — grade, varredura, o que
   entrou e uma barra que anda. */
.mx__forja {
  position: absolute; inset: 0; overflow: hidden; border-radius: inherit;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(90% 60% at 50% 100%, rgba(155, 61, 255, .16), transparent 70%),
    #0A0814;
}

/* papel milimetrado: a mesa onde a cena é montada */
.mx__grade {
  position: absolute; inset: -1px;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(80% 70% at 50% 50%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 50%, #000 30%, transparent 100%);
  animation: gradeAnda 9s linear infinite;
}
@keyframes gradeAnda { to { background-position: 0 -34px, 34px 0; } }

/* a varredura sobe e deixa rastro */
.mx__linha {
  position: absolute; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--acc-hi) 30%, var(--mag) 70%, transparent);
  box-shadow: 0 0 26px 8px rgba(196, 107, 255, .3);
  animation: linhaSobe 2.6s cubic-bezier(.45, 0, .55, 1) infinite;
}
.mx__linha::after {
  content: ''; position: absolute; left: 0; right: 0; top: 2px; height: 90px;
  background: linear-gradient(180deg, rgba(155, 61, 255, .16), transparent);
}
@keyframes linhaSobe {
  0%   { top: 100%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: -4%; opacity: 0; }
}

/* o que entrou na cena, listado como um log */
.mx__log {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; gap: 7px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: .01em;
}
.mx__log p {
  display: flex; align-items: baseline; gap: 9px;
  opacity: 0; transform: translateY(5px);
  animation: logEntra .5s var(--ez-out) forwards;
}
.mx__log b {
  min-width: 74px; font-weight: 500; color: var(--acc-hi);
  text-transform: lowercase;
}
.mx__log b::before { content: '› '; color: var(--ink-4); }
.mx__log span { color: var(--ink-2); }
.mx__log--fim b { color: var(--mag); }
.mx__log--fim span { animation: pisca 1.2s var(--ez) infinite; }
@keyframes logEntra { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .mx__linha, .mx__grade { animation-duration: 6s; }
}

/* copiar discreto, no cabeçalho do prompt */
.mx__cp {
  width: auto; height: 26px; margin: 0; padding: 0 10px;
  font-size: 11px; gap: 5px;
  border-color: var(--line-soft); background: rgba(255,255,255,.04);
  color: var(--ink-2);
}
.mx__cp svg { width: 12px; height: 12px; }
.mx__cp:hover { color: var(--ink); background: rgba(255,255,255,.08); }

.mx__pisc {
  font-style: normal; font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--acc-hi);
  animation: pisca 1.4s var(--ez) infinite;
}

/* a cena não deu certo */
.mx__falhou {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--s4);
  padding: var(--s8); text-align: center;
}
.mx__falhou svg { width: 30px; height: 30px; color: var(--coral); }
.mx__falhou p { font-size: 13px; color: var(--ink-2); line-height: 1.55; max-width: 30ch; }

/* Abrir Flow é um link, mas se comporta como botão */
.mx__acoes a.b { text-decoration: none; }

/* botões finos sob a mídia, sem competir com ela */
.tr__b { height: 36px; font-size: 12px; }
.tr__b svg { width: 13px; height: 13px; }
@media (max-width: 1000px) {
  .troca { grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); justify-content: stretch; }
}

/* abas dos takes, acima do comando de vídeo */
.mx__abas {
  display: flex; gap: 5px; overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: none;
}
.mx__abas::-webkit-scrollbar { display: none; }
.mx__aba {
  flex: none; display: flex; flex-direction: column; gap: 1px;
  padding: 7px 12px; border-radius: var(--r-md);
  border: 1px solid var(--line-soft); background: rgba(255,255,255,.03);
  font-size: 12px; font-weight: 500; color: var(--ink-2);
  text-align: left; line-height: 1.2;
  transition: color var(--t1) var(--ez), border-color var(--t1) var(--ez),
              background var(--t1) var(--ez);
}
.mx__aba i {
  font-style: normal; font-size: 9.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-4);
}
.mx__aba:hover { color: var(--ink); border-color: var(--line-hard); }
.mx__aba.on {
  color: var(--ink); border-color: var(--acc-edge); background: var(--acc-wash);
}
.mx__aba.on i { color: var(--acc-hi); }

/* com abas, o prompt ocupa a linha do meio */
.mx__prompt:has(.mx__abas) { grid-template-rows: auto auto minmax(0, 1fr) auto; }

/* ═══════════════════════════════════════════════════════════
   POV — superfície vista de cima, mãos e as peças da foto

   As prévias das superfícies são desenhadas em CSS: o cenário
   POV é uma descrição, não um arquivo, e uma miniatura pintada
   com as mesmas cores que a mesclagem usa é mais honesta do que
   uma foto de banco de imagem que não vai aparecer no resultado.
   ═══════════════════════════════════════════════════════════ */
.g--pcen { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--s3); }

.pcen {
  position: relative; overflow: hidden; text-align: left;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: rgba(255,255,255,.035);
  transition: border-color var(--t1) var(--ez), transform var(--t2) var(--ez-out);
}
.pcen:hover { transform: translateY(-2px); border-color: var(--line-hard); }
.pcen.on { border-color: var(--acc-edge); box-shadow: 0 0 0 1px var(--acc-edge); }

.pcen__m {
  position: relative; display: block; aspect-ratio: 4/5; overflow: hidden;
  background: linear-gradient(155deg, var(--a), var(--b));
}
/* a faixa do alto é o adereço: a manta, a prateleira, o cesto */
.pcen__m::after {
  content: ''; position: absolute; inset: 0 0 auto; height: 26%;
  background: linear-gradient(var(--c), color-mix(in srgb, var(--c) 70%, transparent));
  opacity: .82;
}
/* imagem real da superfície, quando existir, cobre o gradiente/textura */
.pcen__img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.pcen__tex { position: absolute; inset: 0; opacity: .5; }
.pcen__m--listrado .pcen__tex {
  background: repeating-linear-gradient(96deg,
    rgba(255,255,255,.55) 0 3px, transparent 3px 9px);
}
.pcen__m--madeira .pcen__tex {
  background: repeating-linear-gradient(4deg,
    rgba(0,0,0,.11) 0 1px, transparent 1px 17px);
}
.pcen__m--marmore .pcen__tex {
  background:
    linear-gradient(114deg, transparent 42%, rgba(120,118,116,.42) 43%, transparent 45%),
    linear-gradient(76deg, transparent 68%, rgba(120,118,116,.28) 69%, transparent 71%);
}
.pcen__m--felpudo .pcen__tex {
  background:
    radial-gradient(closest-side, rgba(255,255,255,.95) 60%,
                    rgba(255,255,255,.42) 86%, transparent)
      4% 64% / 74% 54% no-repeat,
    repeating-linear-gradient(4deg, rgba(0,0,0,.10) 0 1px, transparent 1px 16px);
  filter: blur(1px);
}
.pcen__m--trico .pcen__tex {
  background: repeating-linear-gradient(90deg,
    rgba(0,0,0,.09) 0 2px, transparent 2px 11px);
}
.pcen__m--liso .pcen__tex {
  background: radial-gradient(120% 80% at 18% 70%, rgba(255,255,255,.5), transparent 62%);
}
/* a luz entra de um lado só, como nas fotos de referência */
.pcen__luz {
  position: absolute; inset: 0;
  background: radial-gradient(88% 62% at 16% 26%, rgba(255,255,255,.34), transparent 68%),
              linear-gradient(200deg, transparent 52%, rgba(0,0,0,.20));
}

.pcen__t { display: block; padding: 9px 11px 11px; }
.pcen__t b { display: block; font-size: 12.5px; font-weight: 550; color: var(--ink); }
.pcen__t i {
  display: block; font-style: normal; font-size: 10.5px; color: var(--ink-3);
  margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pcen__ck {
  position: absolute; top: 7px; right: 7px; z-index: 2;
  width: 21px; height: 21px; display: grid; place-items: center;
  border-radius: 50%; color: #0B0713; background: var(--acc-hi);
  opacity: 0; transform: scale(.7);
  transition: opacity var(--t1) var(--ez), transform var(--t1) var(--ez-out);
}
.pcen__ck svg { width: 12px; height: 12px; }
.pcen.on .pcen__ck { opacity: 1; transform: none; }

/* ── configuração das mãos ───────────────────────────────── */
.pmao__h {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  flex-wrap: wrap; padding-bottom: var(--s4); border-bottom: 1px solid var(--line-soft);
}
.pmao__ht { min-width: 0; }
.pmao__ht h2 { font-size: 15px; font-weight: 550; letter-spacing: -.01em; }
.pmao__ht p { font-size: 12px; color: var(--ink-3); margin-top: 3px; }

/* interruptor com/sem mãos — um trilho, duas metades */
.seg {
  flex: none; display: inline-flex; padding: 3px; gap: 2px;
  border-radius: var(--r-pill); border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
}
.seg__b {
  padding: 7px 15px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 500; color: var(--ink-2);
  transition: color var(--t1) var(--ez), background var(--t1) var(--ez);
}
.seg__b:hover { color: var(--ink); }
.seg__b.on { color: var(--ink); background: var(--acc-wash); box-shadow: inset 0 0 0 1px var(--acc-edge); }

/* cada atributo num bloco contido: as contagens desiguais de pílulas
   deixam de deixar a grade torta */
.pmao__grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s3); margin-top: var(--s5); align-items: start;
}
.pmao__g {
  padding: var(--s4); border-radius: var(--r-md);
  border: 1px solid var(--line-soft); background: rgba(255,255,255,.022);
}
.pmao__g--larga { grid-column: 1 / -1; }
.pmao__hint { font-style: normal; text-transform: none; letter-spacing: 0;
  color: var(--ink-4); margin-left: 6px; }
.pmao__vazio {
  display: flex; align-items: center; gap: var(--s3);
  margin-top: var(--s5); padding: var(--s4) var(--s5);
  border-radius: var(--r-md); border: 1px dashed var(--line-hard);
  background: rgba(255,255,255,.02); font-size: 12.5px; color: var(--ink-2);
}
.pmao__vazio svg { width: 18px; height: 18px; flex: none; color: var(--ink-3); }

/* prévia da superfície dentro da fita de mesclagem */
.pcen__m--fita { position: absolute; inset: 0; aspect-ratio: auto; }

/* ── slots das peças ─────────────────────────────────────── */
/* três colunas e ponto final: esticadas na largura toda, as fotos
   das peças ficam maiores que o resto da tela e roubam a atenção */
.pslots {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4); margin-top: var(--s4); max-width: 660px;
}
@media (max-width: 620px) { .pslots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pslot {
  position: relative; display: flex; flex-direction: column; gap: var(--s3);
  margin: 0; padding: var(--s3); text-align: left;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  transition: border-color var(--t1) var(--ez), background var(--t1) var(--ez),
              transform var(--t2) var(--ez-out);
}
.pslot.tem { border-color: var(--acc-edge); }
.pslot--vazio { border-style: dashed; border-color: var(--line-hard); }
.pslot--vazio.proximo:hover { transform: translateY(-2px); border-color: var(--acc-edge); background: var(--acc-wash); }
.pslot--vazio:not(.proximo) { opacity: .5; }

.pslot__m {
  display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 3/4; border-radius: var(--r-sm); background: var(--well);
}
.pslot__m img { width: 100%; height: 100%; object-fit: cover; }
.pslot__i { width: 22px; height: 22px; color: var(--ink-3); }
.pslot--vazio.proximo .pslot__i { color: var(--acc-hi); }

/* o número diz a ordem em que as peças entram na foto */
.pslot__n {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  width: 21px; height: 21px; display: grid; place-items: center;
  border-radius: 50%; font-size: 10.5px; font-weight: 600;
  color: var(--ink-2); background: rgba(8,7,14,.72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--line);
}
.pslot.tem .pslot__n { color: #0B0713; background: var(--acc-hi); border-color: transparent; }

.pslot figcaption { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.pslot figcaption b {
  font-size: 12.5px; font-weight: 550; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pslot figcaption i { font-style: normal; font-size: 11px; color: var(--ink-3); line-height: 1.4; }
.pslot__a { display: flex; align-items: center; gap: var(--s2); }
.pslot__a .b { padding: 6px 11px; font-size: 11.5px; }

/* ═══════════════════════════════════════════════════════════
   NOVELINHA VIRAL — elenco, ficha e roteiro
   ═══════════════════════════════════════════════════════════ */

/* Full Auto — caixa de opção com respiro */
.nvauto {
  display: flex; align-items: flex-start; gap: var(--s3); cursor: pointer;
  margin-top: var(--s4); padding: var(--s4) var(--s5);
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: rgba(255,255,255,.028);
}
.nvauto input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--acc-hi); flex: none; }
.nvauto b { font-size: 13.5px; font-weight: 550; }
.nvauto i { display: block; font-style: normal; font-size: 12px; color: var(--ink-3); margin-top: 2px; }

/* lista de personagens */
.casts { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s4); }
.cast {
  display: flex; align-items: center; gap: var(--s4); margin: 0;
  padding: var(--s3) var(--s4); border-radius: var(--r-md);
  border: 1px solid var(--line); background: rgba(255,255,255,.028);
}
.cast__av {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 50%; background: var(--acc-wash); border: 1px solid var(--acc-edge);
}
.cast__av b { font-size: 20px; font-weight: 600; color: var(--acc-hi); font-style: normal; }
.cast--obj .cast__av b { font-size: 24px; }
.cast__b { flex: 1; min-width: 0; }
.cast__b > b { font-size: 14px; font-weight: 600; }
.cast__b > i { display: block; font-style: normal; font-size: 12px; color: var(--ink-3); margin: 1px 0 6px; }
.cast__tags { display: flex; gap: 5px; flex-wrap: wrap; }
.cast__a { display: flex; align-items: center; gap: var(--s2); flex: none; }
.cast__a .b { padding: 6px 11px; font-size: 11.5px; }

/* grade de campos do enredo */
.nvgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s4); margin-top: var(--s4);
}

/* modal da ficha (identidade) */
.modal--f .modal__c--f {
  width: min(560px, 100%); grid-template-columns: 1fr;
  max-height: min(90vh, 860px);
}
.npd { padding: var(--s5) var(--s6); overflow-y: auto; display: flex; flex-direction: column; gap: var(--s4); }
.npd__row { display: grid; grid-template-columns: 1fr 96px; gap: var(--s3); }
.npd__g { display: flex; flex-direction: column; gap: 2px; }
.npd__foot {
  padding: var(--s4) var(--s6); border-top: 1px solid var(--line-soft);
  display: flex; gap: var(--s2); justify-content: flex-end;
}

/* Indique e Ganhe — modal slim */
.modal__c--indg {
  position: relative; width: min(430px, 100%); grid-template-columns: 1fr;
  max-height: min(92vh, 900px); overflow: auto; padding: 0;
}
.indg__x {
  position: absolute; z-index: 4; top: 14px; right: 14px;
  width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; color: rgba(255,255,255,.85);
  background: rgba(10,8,20,.35); border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.indg__x:hover { background: rgba(10,8,20,.6); color: #fff; }
.indg__x svg { width: 16px; height: 16px; }
.indg__hero {
  padding: var(--s8) var(--s6) var(--s6); color: #fff;
  background: linear-gradient(150deg, var(--acc) 0%, var(--acc-deep) 62%, #2A1350 100%);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.indg__pill {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--s4);
  padding: 5px 11px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600;
  color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.24);
}
.indg__pill svg { width: 13px; height: 13px; }
.indg__hero h2 { font-size: 27px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.indg__hero h2 b { font-weight: 800; }
.indg__hero p { font-size: 13.5px; color: rgba(255,255,255,.82); margin-top: 6px; }
.indg__body { padding: var(--s6); display: flex; flex-direction: column; gap: var(--s5); }
.indg__lbl {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.indg__passos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s4); }
.indg__passos li { display: flex; align-items: center; gap: var(--s3); font-size: 13px; color: var(--ink); line-height: 1.4; }
.indg__ic {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; color: var(--acc-hi);
  background: var(--acc-wash); border: 1px solid var(--acc-edge);
}
.indg__ic svg { width: 16px; height: 16px; }
.indg__cupom {
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s4); border-radius: var(--r-md);
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
}
.indg__ct { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.indg__ct svg { width: 14px; height: 14px; color: var(--acc-hi); }
.indg__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.indg__row--link { padding-top: var(--s3); border-top: 1px solid var(--line-soft); }
.indg__info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.indg__meta { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.indg__info b { font-size: 18px; font-weight: 700; letter-spacing: .02em; color: var(--acc-hi); }
.indg__info i { font-style: normal; font-size: 12px; color: var(--ink-2); }
.indg__cp.copy { width: auto; height: 36px; margin: 0; padding: 0 14px; flex: none; font-size: 12.5px; }

/* modal de confirmação */
.modal__c--ask {
  width: min(420px, 100%); grid-template-columns: 1fr;
  padding: var(--s8) var(--s6) var(--s6); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--s3);
}
.ask__ic {
  width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%;
  color: var(--acc-hi); background: var(--acc-wash); border: 1px solid var(--acc-edge);
}
.ask__ic--perigo { color: var(--coral); background: rgba(255,90,95,.12); border-color: rgba(255,90,95,.34); }
.ask__ic svg { width: 26px; height: 26px; }
.modal__c--ask h2 { font-size: 18px; font-weight: 650; }
.modal__c--ask p { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; max-width: 34ch; }
.ask__foot { display: flex; gap: var(--s3); margin-top: var(--s4); width: 100%; }
.ask__foot .b { flex: 1; justify-content: center; }
.b--perigo { color: #fff; background: linear-gradient(120deg, #FF7A59, var(--coral)); border: 0; }
.b--perigo:hover { filter: brightness(1.06); }

/* roteiro por take */
.nvtake { margin-top: var(--s4); }
.nvfalas { display: flex; flex-direction: column; gap: var(--s3); margin: var(--s5) 0; }
.nvfala {
  position: relative; padding: var(--s3) var(--s4); border-radius: var(--r-md);
  background: rgba(255,255,255,.03); border: 1px solid var(--line-soft);
}
.nvfala__q {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--acc-hi);
}
.nvfala p { font-size: 14px; color: var(--ink); margin-top: 3px; line-height: 1.45; }
.nvfala__e {
  position: absolute; top: var(--s3); right: var(--s4);
  font-style: normal; font-size: 10.5px; color: var(--ink-3);
}

/* blocos de prompt (imagem / animação / flow) */
.nvout { margin-top: var(--s4); border-radius: var(--r-md); border: 1px solid var(--line-soft); overflow: hidden; }
.nvout__h {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: 9px var(--s4); background: rgba(255,255,255,.035);
}
.nvout__h b { font-size: 12px; font-weight: 600; }
.nvout pre {
  margin: 0; padding: var(--s4); max-height: 220px; overflow: auto;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 11px; line-height: 1.6; color: var(--ink-2);
  white-space: pre-wrap; word-break: break-word;
}
.nvmeta { margin-top: var(--s4); font-size: 12.5px; color: var(--ink-2); }
.nvmeta p { margin-top: 4px; }
.nvtags { color: var(--acc-hi); }

/* barra de trava (cenário/avatar fixos da Menina da Roça) */
.lockbar {
  display: flex; align-items: center; gap: var(--s3);
  margin-top: var(--s4); padding: var(--s3) var(--s4);
  border-radius: var(--r-md); border: 1px solid var(--acc-edge);
  background: var(--acc-wash);
}
.lockbar__i { flex: none; width: 20px; height: 20px; color: var(--acc-hi); }
.lockbar b { font-size: 12.5px; font-weight: 600; }
.lockbar i { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-2); margin-top: 1px; }

/* ═══════════════════════════════════════════════════════════
   CRIAR AVATAR — painel do prompt (sem imagem)
   ═══════════════════════════════════════════════════════════ */
.avprompt { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s5); }
.avprompt__h {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding-bottom: var(--s4); border-bottom: 1px solid var(--line-soft);
}
.avprompt__h b { font-size: 14px; font-weight: 600; }
.avprompt__h p { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

.avprompt__pre {
  margin: 0; padding: var(--s4); border-radius: var(--r-md);
  background: var(--well); border: 1px solid var(--line-soft);
  min-height: 260px; max-height: 52vh; overflow: auto;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 11.5px; line-height: 1.7; color: var(--ink-2);
  white-space: pre-wrap; word-break: break-word;
}
/* cursor piscando enquanto digita */
.avprompt__pre.escrevendo::after {
  content: '▋'; color: var(--acc-hi); animation: avcursor 1s steps(2) infinite;
}
@keyframes avcursor { 50% { opacity: 0; } }

.avprompt__vazio {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s3); text-align: center; min-height: 260px; padding: var(--s6);
  border-radius: var(--r-md); border: 1px dashed var(--line-hard); background: rgba(255,255,255,.02);
}
.avprompt__vazio .vazio__i { width: 30px; height: 30px; color: var(--ink-4); }
.avprompt__vazio b { font-size: 14.5px; font-weight: 550; }
.avprompt__vazio p { font-size: 12.5px; color: var(--ink-3); max-width: 42ch; }

.avprompt__a { display: flex; justify-content: flex-end; }
@media (prefers-reduced-motion: reduce) { .avprompt__pre.escrevendo::after { animation: none; } }

/* ═══════════════════════════════════════════════════════════
   PAINEL ADMIN — abas, lista de usuários, badges de status
   ═══════════════════════════════════════════════════════════ */
.admtabs { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s5); }
.admtab {
  padding: 9px 16px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  transition: color var(--t1) var(--ez), background var(--t1) var(--ez), border-color var(--t1) var(--ez);
}
.admtab:hover { color: var(--ink); }
.admtab.on { color: var(--ink); background: var(--acc-wash); border-color: var(--acc-edge); }

.urows { display: flex; flex-direction: column; gap: var(--s2); }
.urow {
  display: flex; align-items: center; gap: var(--s4); margin: 0;
  padding: var(--s3) var(--s4); border-radius: var(--r-md);
  border: 1px solid var(--line-soft); background: rgba(255,255,255,.025);
}
.urow__av {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 10px; font-size: 12px; font-weight: 600;
  background: linear-gradient(150deg, rgba(155,61,255,.34), rgba(74,26,128,.2));
  border: 1px solid var(--acc-edge);
}
.urow__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.urow__id b { font-size: 13.5px; font-weight: 550; }
.urow__id i { font-style: normal; font-size: 12px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.urow__motivo { font-size: 11px; color: var(--warm); margin-top: 2px; }
.urow__badges { display: flex; align-items: center; gap: 6px; flex: none; }
.urow__acoes { display: flex; align-items: center; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.urow__acoes .b { padding: 6px 11px; font-size: 11.5px; }
.urow__blk { color: var(--coral); }
.urow__blk:hover { color: #fff; background: rgba(255,90,95,.16); border-color: rgba(255,90,95,.4); }
.urow__trava { font-size: 11px; color: var(--ink-4); font-style: italic; }

/* badges de status */
.badge {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 600; letter-spacing: .03em;
}
.badge--up   { color: var(--up);    background: rgba(212,175,55,.12);  border: 1px solid rgba(212,175,55,.3); }
.badge--warm { color: var(--warm);  background: rgba(255,122,89,.12);  border: 1px solid rgba(255,122,89,.3); }
.badge--blk  { color: var(--coral); background: rgba(255,90,95,.12);   border: 1px solid rgba(255,90,95,.34); }

@media (max-width: 720px) {
  .urow { flex-wrap: wrap; }
  .urow__acoes { width: 100%; justify-content: flex-start; }
}

/* ═══════════════════════════════════════════════════════════
   INDIQUE AMIGOS — modal Lucrar × Presentear
   ═══════════════════════════════════════════════════════════ */
.modal__c--ind { width: min(880px, 100%); grid-template-columns: 1fr; max-height: min(90vh, 900px); overflow-y: auto; }
.ind__h { align-items: flex-start; }
.ind__voltar { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); margin-bottom: 8px; }
.ind__voltar svg { width: 14px; height: 14px; transform: rotate(180deg); }
.ind__voltar:hover { color: var(--ink); }
.ind__eb { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold); }
.ind__eb svg { width: 13px; height: 13px; }
.ind__h h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px; }
.ind__h p { font-size: 13px; color: var(--ink-2); margin-top: 5px; max-width: 60ch; }

.ind__cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); padding: 0 var(--s6) var(--s6); }
@media (max-width: 680px) { .ind__cards { grid-template-columns: 1fr; } }
.indc {
  position: relative; text-align: left; display: flex; flex-direction: column; gap: 7px;
  padding: var(--s5); border-radius: var(--r-lg); border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  transition: border-color var(--t1) var(--ez), background var(--t1) var(--ez), transform var(--t2) var(--ez-out);
}
.indc:hover { transform: translateY(-3px); border-color: var(--line-hard); }
.indc--lucrar:hover { border-color: var(--acc-edge); }
.indc--presente:hover { border-color: rgba(212,175,55,.4); }
.indc__selo {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; letter-spacing: .07em; text-transform: uppercase; font-weight: 600;
  padding: 4px 10px; border-radius: var(--r-pill); margin-bottom: 4px;
}
.indc--lucrar .indc__selo { color: var(--gold); background: rgba(212,175,55,.12); }
.indc--presente .indc__selo { color: var(--acc-hi); background: var(--acc-wash); }
.indc__selo svg, .indc__i svg { width: 13px; height: 13px; }
.indc__i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px;
  background: rgba(255,255,255,.05); color: var(--ink); margin-bottom: 4px; }
.indc__i svg { width: 20px; height: 20px; }
.indc > b { font-size: 17px; font-weight: 700; }
.indc > i { font-style: normal; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--gold); }
.indc > p { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin-top: 4px; }
.indc ul { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.indc li { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; color: var(--ink); }
.indc li svg { width: 13px; height: 13px; color: var(--acc-hi); flex: none; margin-top: 2px; }
.indc__rod { margin-top: auto; padding-top: var(--s3); font-size: 12px; font-weight: 600;
  color: var(--ink); border-top: 1px solid var(--line-soft); }

.ind__body { padding: 0 var(--s6) var(--s5); display: flex; flex-direction: column; gap: var(--s4); }
.ind__bloco { padding: var(--s4); border-radius: var(--r-md); border: 1px solid var(--line-soft); background: rgba(255,255,255,.022); }
.ind__bloco h3 { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; margin-bottom: var(--s3); }
.ind__bloco h3 svg { width: 15px; height: 15px; color: var(--acc-hi); }
.ind__bloco--dica { border-color: rgba(212,175,55,.28); background: rgba(212,175,55,.06); }
.ind__bloco--dica b { font-size: 13px; }
.ind__bloco--dica p { font-size: 12px; color: var(--ink-2); margin-top: 3px; }
.ind__passos { display: flex; flex-direction: column; gap: 9px; counter-reset: ip; }
.ind__passos li { display: flex; gap: 10px; font-size: 12.5px; color: var(--ink); line-height: 1.5; counter-increment: ip; }
.ind__passos li::before { content: counter(ip); flex: none; width: 20px; height: 20px; display: grid;
  place-items: center; border-radius: 50%; background: var(--acc-wash); color: var(--acc-hi);
  font-size: 11px; font-weight: 600; }
.ind__lista { display: flex; flex-direction: column; gap: 7px; margin-top: var(--s3); }
.ind__lista li { display: flex; gap: 8px; font-size: 12.5px; }
.ind__lista li svg { width: 14px; height: 14px; color: var(--acc-hi); flex: none; margin-top: 2px; }
.ind__slid { display: flex; align-items: center; justify-content: space-between; }
.ind__slid span { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 550; }
.ind__slid span svg { width: 15px; height: 15px; color: var(--acc-hi); }
.ind__slid b { font-size: 22px; font-weight: 700; color: var(--gold); }
.ind__range { width: 100%; margin: var(--s3) 0 4px; accent-color: var(--acc-hi); }
.ind__slidfoot { display: flex; justify-content: space-between; }
.ind__slidfoot i { font-style: normal; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

/* caixa de cupom (modal e página) */
.cupombox {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s3) var(--s4); border-radius: var(--r-md);
  border: 1px solid var(--acc-edge); background: var(--acc-wash); margin-top: var(--s3);
}
.cupombox--link { border-color: var(--line); background: rgba(255,255,255,.03); }
.cupombox__sel { display: block; font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.cupombox b { font-size: 18px; font-weight: 700; letter-spacing: .04em; }
.cupombox i { font-style: normal; font-size: 12.5px; color: var(--ink-2); word-break: break-all; }
.cupombox--link i { font-size: 12px; }

/* ═══════════════════════════════════════════════════════════
   PROMOÇÃO DIA DOS PAIS — página
   ═══════════════════════════════════════════════════════════ */
.ppaviso { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5);
  border-radius: var(--r-md); border: 1px solid rgba(212,175,55,.28); background: rgba(212,175,55,.07); }
.ppaviso svg { width: 18px; height: 18px; color: var(--gold); flex: none; }
.ppaviso p { font-size: 13px; color: var(--ink-2); }

.bcard { padding: var(--s5); display: flex; flex-direction: column; gap: 7px; }
.bcard__i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px;
  background: var(--acc-wash); color: var(--acc-hi); }
.bcard__i svg { width: 20px; height: 20px; }
.bcard b { font-size: 15px; font-weight: 600; margin-top: 4px; }
.bcard p { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }

.planos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
@media (max-width: 680px) { .planos { grid-template-columns: 1fr; } }
.plano { padding: var(--s5); display: flex; flex-direction: column; gap: 6px; }
.plano--pop { border-color: var(--acc-edge); box-shadow: 0 0 0 1px var(--acc-edge); }
.plano__h { display: flex; align-items: center; justify-content: space-between; }
.plano__h b { font-size: 15px; font-weight: 600; }
.plano__de { font-size: 13px; color: var(--ink-4); text-decoration: line-through; }
.plano__por { font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.plano__por i { font-style: normal; font-size: 14px; font-weight: 500; color: var(--ink-3); margin-left: 6px; letter-spacing: 0; }
.plano__eco { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s3);
  font-size: 12.5px; color: var(--up); }
.plano__eco svg { width: 14px; height: 14px; }

.cupompan { padding: var(--s6); margin-top: var(--s5); }
.cupompan .pan__h h2 { display: flex; align-items: center; gap: 8px; }
.cupompan .pan__h svg { width: 18px; height: 18px; color: var(--gold); flex: none; }
.cupompan__t { font-size: 13px; color: var(--ink-2); margin-top: var(--s3); max-width: 70ch; }
.cupompan__pts { display: flex; flex-direction: column; gap: 8px; margin-top: var(--s5);
  padding-top: var(--s4); border-top: 1px solid var(--line-soft); }
.cupompan__pts li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.cupompan__pts li svg { width: 14px; height: 14px; color: var(--acc-hi); flex: none; margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════
   Menu do perfil (Configurações / Painel Admin abrem por aqui)
   ═══════════════════════════════════════════════════════════ */
.perfilwrap { position: relative; }
.me { width: 100%; text-align: left; }
.me__chev { transition: transform var(--t1) var(--ez); }
.perfilwrap.on .me__chev { transform: rotate(180deg); }

.pmenu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 5;
  display: flex; flex-direction: column; gap: 2px; padding: 5px;
  border-radius: var(--r-md); border: 1px solid var(--line-hard);
  background: rgba(20,21,28,.98); box-shadow: var(--sh-3);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  animation: pmenu-in var(--t1) var(--ez-out);
}
@keyframes pmenu-in { from { opacity: 0; transform: translateY(6px); } }
.pmenu__i {
  display: flex; align-items: center; gap: var(--s3);
  padding: 9px var(--s3); border-radius: var(--r-xs);
  font-size: 13px; color: var(--ink-2);
  transition: color var(--t1) var(--ez), background var(--t1) var(--ez);
}
.pmenu__i svg { width: 16px; height: 16px; flex: none; }
.pmenu__i:hover { color: var(--ink); background: rgba(255,255,255,.06); }
body.mini .pmenu { left: auto; width: 190px; }

/* link para a promoção dentro do modal Indique */
.ind__promo { padding: 0 var(--s6) var(--s6); text-align: center; }
.ind__promobtn {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px;
  border-radius: var(--r-pill); font-size: 12.5px; font-weight: 500; color: var(--gold);
  border: 1px solid rgba(212,175,55,.3); background: rgba(212,175,55,.08);
  transition: background var(--t1) var(--ez);
}
.ind__promobtn svg { width: 15px; height: 15px; }
.ind__promobtn:hover { background: rgba(212,175,55,.16); }

/* ═══════════════════════════════════════════════════════════
   PROMOÇÃO DIA DOS PAIS — coluna centralizada e compacta
   ═══════════════════════════════════════════════════════════ */
.promopage {
  max-width: 720px; margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--s4);
}
.promopage__voltar {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--ink-3);
}
.promopage__voltar svg { width: 15px; height: 15px; transform: rotate(180deg); }
.promopage__voltar:hover { color: var(--ink); }

/* topo dentro de um card, como a referência — compacto */
.ppahero { padding: var(--s5) var(--s5) var(--s5); display: flex; flex-direction: column; gap: var(--s2);
  background: linear-gradient(150deg, var(--acc-wash), transparent 70%); }
.ppahero__eb {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-pill); margin-bottom: 4px;
  font-size: 11.5px; color: var(--acc-hi);
  border: 1px solid var(--acc-edge); background: var(--acc-wash);
}
.ppahero__eb svg { width: 13px; height: 13px; }
.ppahero h1 { font-size: clamp(21px, 2.4vw, 27px); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; }
.ppahero > p { font-size: 13.5px; color: var(--ink-2); max-width: 54ch; line-height: 1.5; }
.ppaviso { padding: var(--s3) var(--s4); margin-top: var(--s2); }
.ppaviso svg { width: 16px; height: 16px; }
.ppaviso p { font-size: 12px; }

.g--3.benefs { grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
@media (max-width: 760px) { .g--3.benefs { grid-template-columns: 1fr; } }
.bcard { padding: var(--s4); gap: 4px; }
.bcard__i { width: 30px; height: 30px; border-radius: 9px; }
.bcard__i svg { width: 16px; height: 16px; }
.bcard b { font-size: 13.5px; margin-top: 2px; }
.bcard p { font-size: 11.5px; line-height: 1.45; }

.planos { gap: var(--s3); }
.plano { padding: var(--s4); gap: 4px; }
.plano__h b { font-size: 13.5px; }
.plano__de { font-size: 12px; }
.plano__por { font-size: 24px; }
.plano__por i { font-size: 12.5px; }
.plano__eco { margin-top: var(--s2); font-size: 11.5px; }

.cupompan { padding: var(--s5); margin-top: var(--s4); }
.cupompan .pan__h h2 { font-size: 14px; }
.cupompan__t { font-size: 12px; }
.cupombox { padding: var(--s3) var(--s4); }
.cupombox b { font-size: 16px; }
.cupompan__pts li { font-size: 11.5px; }

/* ═══════════════════════════════════════════════════════════
   IMPULSIONE — por personagem. Azul-petróleo escuro + glass.
   ═══════════════════════════════════════════════════════════ */
.imp {
  --teal:      var(--acc);
  --teal-hi:   var(--acc-hi);
  --teal-deep: var(--acc-deep);
  --teal-wash: var(--acc-wash);
  --teal-edge: var(--acc-edge);
  --teal-glass: rgba(44, 35, 80, .5);
}
.tg--teal { color: var(--teal-hi); background: var(--teal-wash); border-color: var(--teal-edge); }
.b--teal { color: #fff; background: linear-gradient(120deg, var(--teal-hi), var(--teal)); border: 0; }
.b--teal:hover { filter: brightness(1.06); }
.bx__b--teal { color: #fff; background: linear-gradient(120deg, var(--teal-hi), var(--teal)); border: 0; }
.bx__b--teal:hover { filter: brightness(1.06); color: #fff; }

/* stepper */
.isteps { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin: var(--s5) 0 var(--s2); }
.istep { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
.istep b { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
  font-size: 11px; font-weight: 600; background: rgba(255,255,255,.05); color: var(--ink-2); font-style: normal; }
.istep.on { color: var(--ink); }
.istep.on b { background: var(--teal); color: #fff; }
.istep.done b { background: var(--teal-wash); color: var(--teal-hi); }
.istep__ln { width: 26px; height: 1px; background: var(--line-hard); }

/* ── cards largos de categoria ───────────────────────────── */
.icats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); margin-top: var(--s4); }
@media (max-width: 820px) { .icats { grid-template-columns: 1fr; } }
.icat {
  display: flex; align-items: center; gap: var(--s4); text-align: left;
  padding: var(--s4) var(--s5); border-radius: var(--r-lg);
  border: 1px solid var(--teal-edge); background: var(--teal-glass);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transition: transform var(--t2) var(--ez-out), border-color var(--t1) var(--ez), box-shadow var(--t2) var(--ez);
}
.icat:hover { transform: translateY(-3px); border-color: var(--teal); box-shadow: 0 16px 40px -22px var(--teal); }
.icat__emoji {
  flex: none; width: 56px; height: 56px; display: grid; place-items: center; font-size: 28px;
  border-radius: var(--r-md); background: rgba(155,61,255,.1); border: 1px solid var(--teal-edge);
}
.icat__b { flex: 1; min-width: 0; }
.icat__b b { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.icat__b p { font-size: 12.5px; color: var(--ink-2); margin: 3px 0 8px; line-height: 1.45; }
.icat__meta { display: flex; gap: 6px; flex-wrap: wrap; }
.icat__go { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  color: var(--teal-hi); background: rgba(155,61,255,.1); transition: transform var(--t1) var(--ez-out); }
.icat__go svg { width: 15px; height: 15px; }
.icat:hover .icat__go { transform: translateX(3px); }

/* ── cards de personagem ─────────────────────────────────── */
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s4); margin-top: var(--s4); }
.pcard {
  display: flex; flex-direction: column; margin: 0; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--teal-glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: transform var(--t2) var(--ez-out), border-color var(--t1) var(--ez), box-shadow var(--t2) var(--ez);
}
.pcard:hover { transform: translateY(-4px); border-color: var(--teal-edge); box-shadow: 0 18px 44px -24px var(--teal); }
.pcard__m { display: block; aspect-ratio: 4/5; overflow: hidden; background: var(--well); }
.pcard__m img { width: 100%; height: 100%; object-fit: cover; }
.pcard__ph { width: 100%; height: 100%; display: grid; place-items: center;
  background: linear-gradient(155deg, hsl(var(--ph) 40% 22%), hsl(var(--ph) 45% 10%)); }
.pcard__ph b { font-size: 54px; filter: saturate(1.1); }
.pcard__b { padding: var(--s4); display: flex; flex-direction: column; gap: 6px; }
.pcard__h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.pcard__h b { font-size: 15px; font-weight: 650; }
.pcard__h i { font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.pcard__p { font-size: 12px; color: var(--ink-2); line-height: 1.45; min-height: 34px; }
.pcard__btn { width: 100%; margin-top: 6px; }

/* ── painéis de configuração/resultado ───────────────────── */
.ipan { padding: var(--s5); margin-top: var(--s4);
  border-color: var(--teal-edge); background: var(--teal-glass);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.ipan__h { display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  flex-wrap: wrap; padding-bottom: var(--s3); border-bottom: 1px solid var(--line-soft); margin-bottom: var(--s4); }
.ipan__h h3 { font-size: 14.5px; font-weight: 600; }
.ipan__h p { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.ipan .uop.on { border-color: var(--teal-edge);
  background: linear-gradient(150deg, var(--teal-wash), rgba(255,255,255,.03)); }
.ipan .uop__c { color: var(--teal-hi); }
.ipan .seg__b.on { background: var(--teal-wash); box-shadow: inset 0 0 0 1px var(--teal-edge); color: var(--teal-hi); }

.iex { margin-top: var(--s4); }
.iex__lb { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.iex__l { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.iex__b { text-align: left; padding: 9px var(--s4); border-radius: var(--r-md);
  border: 1px solid var(--line-soft); background: rgba(255,255,255,.02);
  font-size: 12.5px; color: var(--ink-2); transition: color var(--t1) var(--ez), border-color var(--t1) var(--ez); }
.iex__b:hover { color: var(--ink); border-color: var(--teal-edge); }

/* resultado */
.ires { display: grid; grid-template-columns: 300px 1fr; gap: var(--s4); margin-top: var(--s4); align-items: start; }
@media (max-width: 900px) { .ires { grid-template-columns: 1fr; } }
.ires__perso { padding: 0; overflow: hidden; border-color: var(--teal-edge); background: var(--teal-glass); }
.ires__m { display: block; aspect-ratio: 4/5; overflow: hidden; background: var(--well); }
.ires__m img { width: 100%; height: 100%; object-fit: cover; }
.ires__pb { padding: var(--s4); display: flex; flex-direction: column; gap: 5px; }
.ires__pb b { font-size: 16px; font-weight: 650; }
.ires__pb i { font-style: normal; font-size: 12px; color: var(--ink-3); }
.ires__pb p { font-size: 12.5px; color: var(--ink-2); margin: 3px 0 6px; }
.ires__baixar { margin-top: 8px; }
.ires__col { display: flex; flex-direction: column; gap: var(--s4); }
.ires__col .ipan { margin-top: 0; }
.iprompt { margin: 0; padding: var(--s4); border-radius: var(--r-md);
  background: var(--well); border: 1px solid var(--line-soft); max-height: 260px; overflow: auto;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 11.5px; line-height: 1.6; color: var(--ink-2); white-space: pre-wrap; word-break: break-word; }

/* ═══════════════════════════════════════════════════════════
   IMPULSIONE v2 — por personagem (sobrescreve o layout anterior)
   ═══════════════════════════════════════════════════════════ */
.imp__wrap { max-width: 1120px; margin: 0 auto; }

/* stepper clicável */
.isteps { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin: var(--s5) 0 var(--s2); }
.istep { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
.istep b { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
  font-size: 11px; font-weight: 600; background: rgba(255,255,255,.05); color: var(--ink-2); font-style: normal; }
.istep.on { color: var(--ink); } .istep.on b { background: var(--teal); color: #fff; }
.istep.done { color: var(--ink-2); } .istep.done b { background: var(--teal-wash); color: var(--teal-hi); }
.istep.done:hover { color: var(--ink); }
.istep__ln { width: 24px; height: 1px; background: var(--line-hard); }

/* ETAPA 1 — cards de categoria, imagem dominante */
.icats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4);
  margin-top: var(--s5); max-width: 900px; margin-left: 0; margin-right: auto;
}
@media (max-width: 820px) { .icats { grid-template-columns: 1fr; max-width: 420px; } }
.icat {
  position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--teal-edge); background: var(--well); text-align: left;
  transition: transform var(--t2) var(--ez-out), box-shadow var(--t2) var(--ez), border-color var(--t1) var(--ez);
}
.icat:hover { transform: translateY(-4px) scale(1.01); border-color: var(--teal); box-shadow: 0 22px 50px -26px var(--teal); }
.icat__m { position: absolute; inset: 0; }
.icat__m img { width: 100%; height: 100%; object-fit: cover; }
.icat__ov {
  position: absolute; inset: auto 0 0 0; z-index: 2; padding: var(--s5) var(--s4) var(--s4);
  display: flex; flex-direction: column; gap: 5px;
  background: linear-gradient(to top, rgba(4,10,14,.94), rgba(4,10,14,.6) 55%, transparent);
}
.icat__ov b { font-size: 17px; font-weight: 650; }
.icat__ov p { font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.icat__ov .tg { align-self: flex-start; margin-top: 4px; }
.icat__shine {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.14) 50%, transparent 60%);
  transform: translateX(-120%); transition: transform .7s var(--ez);
}
.icat:hover .icat__shine { transform: translateX(120%); }

/* pôster de reserva */
.pph { width: 100%; height: 100%; display: grid; place-items: center;
  background: linear-gradient(155deg, hsl(var(--ph) 38% 24%), hsl(var(--ph) 42% 11%)); }
.pph b { font-size: 46px; }

/* ETAPA 2 — cards de avatar */
.acards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s4); margin-top: var(--s4); }
@media (min-width: 1100px) { .acards { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 720px) { .acards { grid-template-columns: repeat(2, 1fr); } }
.acard {
  position: relative; display: flex; flex-direction: column; margin: 0; overflow: hidden; text-align: left;
  border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--teal-glass);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: transform var(--t2) var(--ez-out), border-color var(--t1) var(--ez), box-shadow var(--t2) var(--ez);
}
.acard:hover { transform: translateY(-3px); border-color: var(--teal-edge); box-shadow: 0 16px 40px -24px var(--teal); }
.acard.on { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
.acard__m { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--well); }
.acard__m img { width: 100%; height: 100%; object-fit: cover; }
.acard__ck { position: absolute; top: 8px; right: 8px; z-index: 2; width: 22px; height: 22px;
  display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--teal-hi);
  opacity: 0; transform: scale(.7); transition: opacity var(--t1) var(--ez), transform var(--t1) var(--ez-out); }
.acard__ck svg { width: 12px; height: 12px; }
.acard.on .acard__ck { opacity: 1; transform: none; }
.acard__b { padding: var(--s3) var(--s4) var(--s4); display: flex; flex-direction: column; gap: 2px; }
.acard__b b { font-size: 14px; font-weight: 600; }
.acard__b i { font-style: normal; font-size: 11px; color: var(--ink-3); }
.acard__b p { font-size: 11.5px; color: var(--ink-2); line-height: 1.4; margin-top: 3px; }
.acard--up { border-style: dashed; border-color: var(--line-hard); cursor: pointer; position: relative; }
.acard--up:hover { border-color: var(--teal-edge); background: var(--acc-wash); }
.acard__m--up { display: grid; place-items: center; }
.acard__upi { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  color: var(--teal-hi); background: rgba(155,61,255,.12); }
.acard__upi svg { width: 16px; height: 16px; }
.acard--up .solte__in { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ETAPA 3/4 — duas colunas */
.iconf { display: grid; grid-template-columns: 300px 1fr; gap: var(--s5); margin-top: var(--s4); align-items: start; }
@media (max-width: 900px) { .iconf { grid-template-columns: 1fr; } }
.iconf__side { position: sticky; top: var(--gut); display: flex; flex-direction: column; gap: var(--s3); }
@media (max-width: 900px) { .iconf__side { position: static; } }
.iperso { padding: 0; overflow: hidden; border-color: var(--teal-edge); background: var(--teal-glass); }
.iperso__m { display: block; aspect-ratio: 4/5; overflow: hidden; background: var(--well); }
.iperso__m img { width: 100%; height: 100%; object-fit: cover; }
.iperso__b { padding: var(--s4); display: flex; flex-direction: column; gap: 4px; }
.iperso__b b { font-size: 15px; font-weight: 650; }
.iperso__b i { font-style: normal; font-size: 12px; color: var(--ink-3); }
.iperso__b p { font-size: 12px; color: var(--ink-2); margin: 2px 0 4px; }
.iperso__nota { display: flex; gap: 8px; font-size: 11.5px; color: var(--ink-3); line-height: 1.5;
  padding: var(--s3) var(--s4); border-radius: var(--r-md); border: 1px solid var(--line-soft); background: rgba(255,255,255,.02); }
.iperso__nota svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--teal-hi); }
.iconf__main { display: flex; flex-direction: column; gap: var(--s4); }
.iconf__main .ipan { margin-top: 0; }

/* chips de configuração */
.ichips { display: flex; flex-wrap: wrap; gap: 8px; }
.ichip { display: inline-flex; flex-direction: column; gap: 2px; padding: 9px 14px; border-radius: var(--r-md);
  font-size: 12.5px; font-weight: 500; color: var(--ink-2); text-align: left;
  border: 1px solid var(--line); background: rgba(255,255,255,.03);
  transition: color var(--t1) var(--ez), border-color var(--t1) var(--ez), background var(--t1) var(--ez); }
.ichip i { font-style: normal; font-size: 10.5px; color: var(--ink-4); }
.ichip:hover { color: var(--ink); border-color: var(--teal-edge); }
.ichip.on { color: var(--teal-hi); background: var(--teal-wash); border-color: var(--teal-edge); }
.ichip.on i { color: var(--teal-hi); opacity: .8; }
.ichip--sm { padding: 6px 11px; font-size: 11.5px; }

/* fala */
.ifala { margin-top: var(--s4); padding: var(--s4); border-radius: var(--r-md);
  border: 1px solid var(--teal-edge); background: var(--teal-wash); }
.ifala__lb { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-hi); }
.ifala p { font-size: 13.5px; color: var(--ink); margin-top: 4px; line-height: 1.5; }
.ifala__meta { display: flex; justify-content: space-between; gap: var(--s3); margin-top: 6px; }
.ifala__meta span { font-size: 11px; color: var(--ink-3); }
.ifala__meta i { font-style: normal; font-size: 11px; color: var(--ink-4); }

/* ═══════════════════════════════════════════════════════════
   IMPULSIONE v3 — cabeçalho, avatares maiores, config 2 colunas
   ═══════════════════════════════════════════════════════════ */
.imp__head { margin-bottom: var(--s2); }
.imp__eb { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--teal-hi);
  padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid var(--teal-edge); background: var(--teal-wash); }
.imp__eb svg { width: 13px; height: 13px; }
.imp__head h1 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 700; letter-spacing: -.025em; margin-top: var(--s4); line-height: 1.08; }
.imp__head p { font-size: 14px; color: var(--ink-2); margin-top: 8px; max-width: 60ch; }

/* stepper mais leve */
.isteps { margin: var(--s6) 0 var(--s3); padding-bottom: var(--s5); border-bottom: 1px solid var(--line-soft); }

/* ETAPA 2 — cards de avatar maiores, continuar dentro do card */
.acards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; }
@media (min-width: 1100px) { .acards { grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 720px) { .acards { grid-template-columns: repeat(2, 1fr) !important; } }
.acard { padding: 0; }
.acard__pick { display: flex; flex-direction: column; text-align: left; width: 100%; background: transparent; }
.acard__m { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--well); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.acard__b { padding: var(--s4) var(--s4) var(--s3); display: flex; flex-direction: column; gap: 4px; }
.acard__b b { font-size: 15.5px; font-weight: 650; display: flex; align-items: baseline; gap: 8px; }
.acard__b b i { font-style: normal; font-size: 11.5px; font-weight: 400; color: var(--ink-3); }
.acard__b p { font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.acard__go { margin: 0 var(--s4) var(--s4); }
.acard.on { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal), 0 18px 44px -24px var(--teal); }

/* ETAPA 3 — config em duas colunas, menos scroll */
.iconf__main { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-content: start; }
@media (max-width: 1180px) { .iconf__main { grid-template-columns: 1fr; } }
.ipan--wide { grid-column: 1 / -1; }
.iconf__main .bx { margin-top: 0; }
.ipan__h { margin-bottom: var(--s3); }

/* falas por take (revisão dentro do bloco roteiro) */
.itakes { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s4); }
.itake { padding: var(--s3) var(--s4); border-radius: var(--r-md); border: 1px solid var(--teal-edge); background: var(--teal-wash); }
.itake__n { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-hi); }
.itake p { font-size: 13px; color: var(--ink); margin-top: 3px; line-height: 1.5; }

/* ETAPA 4 — resultado com loading dentro do card */
.iout { padding: var(--s5); min-height: 260px; }
.iout__load { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s3); text-align: center; min-height: 220px; padding: var(--s6); }
.iout__load b { font-size: 15px; font-weight: 600; }
.iout__load p { font-size: 12.5px; color: var(--ink-3); max-width: 44ch; }
.iout__load .vazio__i { width: 30px; height: 30px; color: var(--teal-hi); }
.iout__ph { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s4); }
.iout__ph b { font-size: 13px; font-weight: 600; }
.itabs { display: flex; gap: 6px; }
.itab { padding: 7px 15px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 500; color: var(--ink-2);
  border: 1px solid var(--line); background: rgba(255,255,255,.03); transition: color var(--t1) var(--ez), background var(--t1) var(--ez); }
.itab:hover { color: var(--ink); }
.itab.on { color: var(--teal-hi); background: var(--teal-wash); border-color: var(--teal-edge); }

/* ═══════════════════════════════════════════════════════════
   IMPULSIONE v4 — cabeçalho com reset, config por etapas, resultado grande
   ═══════════════════════════════════════════════════════════ */
.imp__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; }
.imp__reset { flex: none; margin-top: var(--s3); }

/* botão continuar dentro do card do avatar — enxuto */
.acard__go { margin: 0 var(--s4) var(--s4); align-self: stretch; padding: 9px 14px; font-size: 12.5px; }

/* chips em grade quando são muitos (objetivo, ambiente, comportamento) */
.ichips--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.ichips--grid .ichip { align-items: flex-start; }

/* config por etapas — painel focado */
.iconf__panel { padding: var(--s5) var(--s6) var(--s6); }
.iconf__top { padding-bottom: var(--s4); border-bottom: 1px solid var(--line-soft); margin-bottom: var(--s5); }
.iconf__count { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-hi); }
.iconf__top h3 { font-size: 18px; font-weight: 650; letter-spacing: -.015em; margin-top: 5px; }
.iconf__top p { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.iconf__bar { display: block; height: 3px; border-radius: 3px; background: rgba(255,255,255,.06); margin-top: var(--s4); overflow: hidden; }
.iconf__bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--teal-deep), var(--teal-hi)); transition: width var(--t2) var(--ez); }
.iconf__body { min-height: 120px; }
.iconf__nav { display: flex; justify-content: space-between; gap: var(--s3); margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line-soft); }
.iconf__nav .b--gh svg { transform: rotate(180deg); }

/* ── resultado: card grande em duas colunas ─────────────── */
.iresult { display: grid; grid-template-columns: 340px 1fr; gap: 0; overflow: hidden; padding: 0;
  border-color: var(--teal-edge); background: var(--teal-glass); }
@media (max-width: 900px) { .iresult { grid-template-columns: 1fr; } }
.iresult__perso { display: flex; flex-direction: column; border-right: 1px solid var(--line-soft); }
@media (max-width: 900px) { .iresult__perso { border-right: 0; border-bottom: 1px solid var(--line-soft); } }
.iresult__m { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--well); }
.iresult__m img { width: 100%; height: 100%; object-fit: cover; }
.iresult__pb { padding: var(--s5); display: flex; flex-direction: column; gap: 5px; }
.iresult__pb b { font-size: 17px; font-weight: 650; }
.iresult__pb i { font-style: normal; font-size: 12px; color: var(--ink-3); }
.iresult__pb p { font-size: 12.5px; color: var(--ink-2); margin: 3px 0 8px; }
.iresult__main { display: flex; flex-direction: column; min-width: 0; }
.iresult__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s5) var(--s6); border-bottom: 1px solid var(--line-soft); }
.iresult__head h3 { font-size: 15px; font-weight: 600; }
.iresult__body { padding: var(--s5) var(--s6) var(--s6); min-height: 300px; display: flex; flex-direction: column; }
.iout__acts { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s4); }
.iout__load { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s3); text-align: center; padding: var(--s8) var(--s6); }
.iout__load b { font-size: 15px; font-weight: 600; }
.iout__load p { font-size: 12.5px; color: var(--ink-3); max-width: 44ch; }
.iout__load .vazio__i { width: 30px; height: 30px; color: var(--teal-hi); }
.iout__ph { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin: var(--s4) 0 var(--s2); }
.iout__ph b { font-size: 13px; font-weight: 600; }
.iresult .itabs { margin-bottom: var(--s3); }
.iresult .iprompt { flex: 1; }

/* ═══════════════════════════════════════════════════════════
   IMPULSIONE v5 — largura da config, takes editáveis, barra do resultado
   ═══════════════════════════════════════════════════════════ */
/* container um pouco mais largo e proporção avatar/painel ~30/70 */
.imp__wrap { max-width: 1240px; }
.iconf { grid-template-columns: minmax(280px, 30%) 1fr; gap: var(--s5); }
/* o painel de config é UM card só — desfaz o grid de 2 colunas antigo que
   deixava o painel na metade e um vazião à direita */
.iconf__main { display: block; }
.iconf__panel { width: 100%; }
.iconf__body { min-height: 160px; }

/* campos de IA lado a lado quando cabe */
.ifields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
@media (max-width: 640px) { .ifields { grid-template-columns: 1fr; } }

/* chips distribuídos na largura do painel */
.ichips--grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

/* campos de take (editáveis) */
.itakes { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s4); }
.itakef { padding: var(--s4); border-radius: var(--r-md); border: 1px solid var(--teal-edge); background: rgba(155,61,255,.05); }
.itakef__h { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: 8px; }
.itakef__n { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-hi); font-weight: 600; }
.itakef__meta { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-3); }
.itakef__c { font-style: normal; }
.itakef__x { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; color: var(--ink-3); }
.itakef__x svg { width: 13px; height: 13px; }
.itakef__x:hover { color: var(--coral); background: rgba(255,90,95,.12); }
.itakef__t { width: 100%; resize: vertical; min-height: 54px; line-height: 1.5; }

.ifalaerro { display: flex; align-items: center; gap: 8px; margin-top: var(--s3); font-size: 12px;
  color: var(--warm); padding: 9px var(--s4); border-radius: var(--r-md);
  border: 1px solid rgba(255,122,89,.3); background: rgba(255,122,89,.08); }
.ifalaerro svg { width: 15px; height: 15px; flex: none; }

/* ── resultado: fala e prompt crescem, nada de corte ─────── */
.iresult__body { display: flex; flex-direction: column; gap: var(--s4); }
.iout__scroll { display: flex; flex-direction: column; gap: var(--s3); }
.ifala p, .itake p, .iprompt { overflow: visible; -webkit-line-clamp: none; text-overflow: clip; }
.iprompt { max-height: 340px; overflow: auto; }   /* rola, mas não corta a frase */

/* barra de ações alinhada, botões da mesma altura */
.iout__bar { display: flex; flex-direction: column; gap: var(--s2); margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--line-soft); }
.iout__row { display: flex; gap: var(--s2); flex-wrap: wrap; }
.iout__row .b { flex: 1 1 200px; justify-content: center; height: 44px; border-radius: var(--r-md); }
@media (max-width: 560px) { .iout__row .b { flex-basis: 100%; } }

/* Baixar imagem: embaixo da foto, alinhado com a linha Copiar/Abrir da direita */
.iresult__perso { display: flex; flex-direction: column; }
.iresult__perso-acao { margin-top: auto; padding: var(--s4) var(--s5) var(--s6);
  border-top: 1px solid var(--line-soft); }
.iresult__perso-acao .b { width: 100%; height: 44px; justify-content: center; border-radius: var(--r-md); }
.iresult__body { padding-bottom: var(--s6); }
.iout__bar { padding-bottom: 0; }

/* ═══════════════════════════════════════════════════════════
   IMPULSIONE — skeleton de carregamento do resultado
   ═══════════════════════════════════════════════════════════ */
.iskel { display: flex; flex-direction: column; gap: var(--s4); }
.iskel__status { display: flex; align-items: flex-start; gap: var(--s3); }
.iskel__status b { font-size: 14.5px; font-weight: 600; }
.iskel__status p { font-size: 12px; color: var(--ink-3); margin-top: 3px; max-width: 46ch; }
.iskel__pulse {
  flex: none; width: 26px; height: 26px; border-radius: 50%; margin-top: 1px;
  background: radial-gradient(circle, var(--teal-hi), var(--teal) 60%, transparent 70%);
  animation: iskel-pulse 1.3s var(--ez) infinite;
}
@keyframes iskel-pulse { 0%,100% { transform: scale(.7); opacity: .55; } 50% { transform: scale(1); opacity: 1; } }

.iskel__tabs { display: flex; gap: 6px; }
.iskel__tabs span { width: 92px; height: 30px; border-radius: var(--r-pill); }
.iskel__fala { padding: var(--s4); border-radius: var(--r-md); border: 1px solid var(--teal-edge);
  background: rgba(155,61,255,.05); display: flex; flex-direction: column; gap: 10px; }
.iskel__lbl { width: 90px; height: 9px; border-radius: 5px; }
.iskel__prompt { padding: var(--s4); border-radius: var(--r-md); border: 1px solid var(--line-soft);
  background: var(--well); display: flex; flex-direction: column; gap: 11px; }
.iskel__l { height: 11px; border-radius: 5px; }

/* brilho que varre — dá a sensação de montar em tempo real */
.iskel__tabs span, .iskel__lbl, .iskel__l {
  background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(155,61,255,.22) 50%, rgba(255,255,255,.05) 75%);
  background-size: 200% 100%; animation: iskel-shine 1.4s linear infinite;
}
@keyframes iskel-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .iskel__pulse, .iskel__tabs span, .iskel__lbl, .iskel__l { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   CRIAR AVATAR — tudo mais junto do topo e cards maiores
   ═══════════════════════════════════════════════════════════ */
/* container próprio: gap menor que os 40px globais do .view */
.avwrap { display: flex; flex-direction: column; gap: var(--s5); }
.avwrap .modos { margin-bottom: 0; }       /* o gap do avwrap já cuida do espaço */
.avwrap .ph { margin-bottom: 0; }
/* filtros colados logo abaixo do toggle */
.avwrap .avfil { margin-top: 0; }

/* cards de seleção (feminino, masculino, pele, etc.) um pouco maiores */
.opts--img { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }