*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body { opacity: 0; transition: opacity 0.3s; }
.logged-in-only { display: none; }
.logged-out-only { display: block; }

/* ── Tokens de cor (light / dark) ── */
:root {
  --bg:        #f2f5fc;
  --surface:   #ffffff;
  --surface2:  #eaeff9;
  --border:    #d8e0f0;
  --text:      #0d1117;
  --text2:     #576075;
  --brand:     #1a52ff;
  --brand2:    #0035e6;
  --accent:    #ff6b35;
  --green:     #22c55e;
  --gold:      #f59e0b;
  --radius:    1.5rem;
  --sh:        0 2px 24px rgba(26,82,255,.09);
  --sh-lg:     0 8px 56px rgba(26,82,255,.16);
}
.dark {
  --bg:        #080c16;
  --surface:   #0f1525;
  --surface2:  #151d30;
  --border:    #1d2840;
  --text:      #edf2ff;
  --text2:     #7b8fb5;
  --sh:        0 2px 24px rgba(0,0,0,.4);
  --sh-lg:     0 8px 56px rgba(0,0,0,.65);
}

body { font-family:'DM Sans',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; transition:background .3s,color .3s; }
h1,h2,h3,h4 { font-family:'Syne',sans-serif; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:99px; }

/* ── Utilitários reutilizáveis ── */
.card  { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--sh); }
.input { width:100%; padding:.875rem 1.25rem; background:var(--surface2); border:1.5px solid var(--border); border-radius:1rem; color:var(--text); font-size:1rem; font-family:inherit; outline:none; transition:border .2s; }
.input:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(26,82,255,.1); }
.input::placeholder { color:var(--text2); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.75rem 1.75rem; border-radius:99px; font-weight:600; font-size:.875rem; cursor:pointer; border:none; outline:none; transition:all .2s; font-family:inherit; }
.btn-primary { background:var(--brand); color:#fff; box-shadow:0 4px 16px rgba(26,82,255,.32); }
.btn-primary:hover { background:var(--brand2); transform:translateY(-1px); box-shadow:0 6px 22px rgba(26,82,255,.42); }
.btn-ghost  { background:transparent; color:var(--text2); border:1.5px solid var(--border); }
.btn-ghost:hover { border-color:var(--brand); color:var(--brand); }
.btn-danger { background:#ef4444; color:#fff; }
.btn-danger:hover { background:#dc2626; }
.btn-success{ background:var(--green); color:#fff; }
.btn-success:hover { background:#16a34a; }
.btn-sm { padding:.5rem 1.2rem; font-size:.8rem; }

.pill { background:var(--surface); border:1.5px solid var(--border); color:var(--text2); padding:.45rem 1.3rem; border-radius:99px; font-size:.85rem; font-weight:600; cursor:pointer; white-space:nowrap; transition:all .2s; font-family:inherit; }
.pill:hover { border-color:var(--brand); color:var(--brand); }
.pill.active { background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 4px 14px rgba(26,82,255,.32); }

.badge { display:inline-flex; align-items:center; gap:.3rem; padding:.22rem .7rem; border-radius:99px; font-size:.72rem; font-weight:700; }
.badge-blue   { background:rgba(26,82,255,.11);  color:var(--brand); }
.badge-orange { background:rgba(255,107,53,.14); color:var(--accent); }
.badge-green  { background:rgba(34,197,94,.12);  color:#15803d; }
.badge-gold   { background:rgba(245,158,11,.14); color:#b45309; }

/* ── Header ── */
header { position:sticky; top:0; z-index:100; background:rgba(242,245,252,.88); backdrop-filter:blur(18px); border-bottom:1px solid var(--border); }
.dark header { background:rgba(8,12,22,.88); }

/* ── Assinatura digital / créditos ── */
.site-signature {
  border-top:1px solid var(--border);
  background:color-mix(in srgb, var(--surface2) 72%, var(--bg));
  color:var(--text);
}
.site-signature__inner {
  max-width:72rem;
  margin:0 auto;
  padding:2rem 1rem;
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, 1.75fr);
  gap:1.5rem;
  align-items:start;
}
.site-signature__label {
  display:block;
  color:var(--brand);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:.45rem;
}
.site-signature h2 {
  font-size:1.35rem;
  line-height:1.1;
  margin:0 0 .55rem;
}
.site-signature p {
  color:var(--text2);
  font-size:.9rem;
  line-height:1.55;
}
.site-signature__team {
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.75rem 1rem;
}
.site-signature__team li {
  min-width:0;
  padding:.75rem 0;
  border-top:1px solid var(--border);
}
.site-signature__team strong,
.site-signature__team span {
  display:block;
  overflow-wrap:anywhere;
}
.site-signature__team strong {
  font-size:.9rem;
}
.site-signature__team span {
  margin-top:.18rem;
  color:var(--text2);
  font-size:.78rem;
  line-height:1.35;
}
.site-signature__note {
  grid-column:1 / -1;
  padding-top:1rem;
  border-top:1px solid var(--border);
  color:var(--text2);
  font-size:.8rem;
}
.site-signature__bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.5rem .75rem;
}
.site-signature__bottom-links {
  display:flex;
  align-items:center;
  gap:.45rem;
  flex-shrink:0;
}
.site-signature__privacy-btn {
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  font-family:inherit;
  font-size:inherit;
  color:var(--brand);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:2px;
  transition:opacity .15s;
}
.site-signature__privacy-btn:hover { opacity:.75; }
.site-signature__dot { color:var(--border); }
.site-signature__lgpd { color:var(--text2); }

@media (max-width: 767px) {
  .site-signature__inner,
  .site-signature__team {
    grid-template-columns:1fr;
  }
  .site-signature__bottom {
    flex-direction:column;
    align-items:flex-start;
  }
}

.profile-nav-button {
  flex-shrink:0;
  position:relative;
}
.profile-nav-button #header-avatar {
  width:1.75rem;
  height:1.75rem;
  min-width:1.75rem;
  min-height:1.75rem;
  flex:0 0 1.75rem;
  aspect-ratio:1 / 1;
  object-fit:cover;
  object-position:center;
  display:block;
  overflow:hidden;
  vertical-align:middle;
  border-radius:999px;
  background:var(--surface2);
}
@media (max-width: 767px) {
  .profile-nav-button {
    position:relative !important;
    display:inline-block !important;
    width:2.75rem !important;
    height:2.75rem !important;
    min-width:2.75rem !important;
    min-height:2.75rem !important;
    max-width:2.75rem !important;
    max-height:2.75rem !important;
    flex:0 0 2.75rem !important;
    padding:0 !important;
    gap:0 !important;
    border:2px solid var(--brand) !important;
    border-radius:999px !important;
    background:var(--surface) !important;
    box-shadow:var(--sh);
    overflow:hidden;
    line-height:0 !important;
  }
  .profile-nav-button:hover {
    border-color:var(--brand2) !important;
    background:var(--surface) !important;
    color:inherit;
    transform:none;
  }
  .profile-nav-button #header-avatar {
    position:absolute !important;
    inset:3px !important;
    width:calc(100% - 6px) !important;
    height:calc(100% - 6px) !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:none !important;
    max-height:none !important;
    display:block !important;
    object-fit:cover !important;
    object-position:center !important;
    border:0 !important;
    border-radius:999px !important;
    background:var(--surface2) !important;
  }
  .profile-nav-button #profile-name {
    display:none !important;
  }
}

/* ── Mobile tab bar ── */
.mobile-tab-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: .5rem;
  padding: .45rem 1rem .55rem;
  overflow-x: auto;
  border-top: 1px solid var(--border);
  /* Esconde a scrollbar mantendo o scroll funcional */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.mobile-tab-bar::-webkit-scrollbar { display: none; }
.mobile-tab-bar .pill { flex-shrink: 0; }

/* Mobile: viewer menor para facilitar scroll */
@media (max-width: 767px) {
  .viewer-3d[style*="height:500px"] { height: 280px !important; }
}

/* ── Navegação por abas ── */
.tab-section { display:none; }
.tab-section.active { display:block; }

/* ── Visualizador 3D ── */
.viewer-3d {
  /* Fundo claro e suave para o Light Mode */
  background: linear-gradient(155deg, var(--surface2) 0%, var(--bg) 100%);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  min-height: 320px;
  border: 1px solid var(--border); /* Adiciona uma borda sutil para não sumir no fundo claro */
  touch-action: pan-y; /* Permite scroll vertical no mobile sem ser bloqueado pelo canvas */
}

/* Fundo para o Dark Mode (Escuro, mas não 100% preto) */
.dark .viewer-3d {
  background: radial-gradient(circle at 50% 50%, #3e5277 0%, var(--surface2) 100%);
}

.viewer-3d canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  position: relative;
  z-index: 1;
  touch-action: pan-y; /* Deixa o scroll vertical passar para o browser no mobile */
}

.viewer-label { 
  position: absolute; 
  bottom: 1rem; 
  left: 50%; 
  z-index: 20;
  transform: translateX(-50%); 
  background: rgba(0,0,0,.5); 
  color: #fff; 
  font-size: .72rem; 
  font-weight: 600; 
  padding: .3rem .9rem; 
  border-radius: 99px; 
  backdrop-filter: blur(6px); 
  pointer-events: none; 
  white-space: nowrap; 
}

/* ── Câmera e captura ── */
.camera-wrap {
  position: relative;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  width: 100%;
}

/* Vídeo preenche a largura e mantém proporção natural.
   Sem object-fit — height:auto já garante o aspect ratio sem letterboxing.
   O canvas de landmarks fica absoluto por cima com a mesma proporção. */
#input_video {
  display: block;
  width: 100%;
  height: auto;
  /* transform: scaleX(-1) ativado via JS (setLiveAvatarMirror) */
}

/* Canvas transparente — apenas landmarks, sem drawImage.
   Dimensões CSS (100%×100%) seguem o container que por sua vez
   segue o <video> (height:auto). As dimensões de atributo canvas.width/
   canvas.height são definidas em JS igual a video.videoWidth/Height,
   garantindo que drawConnectors/drawLandmarks mapeiem corretamente
   os landmarks [0,1] → pixels sem crop ou distorção. */
#output_canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 10;
  pointer-events: none;
}

#recorded_preview { 
  display: none; 
  position: absolute; 
  inset: 0; 
  z-index: 20; 
  background: #000;
  width: 100%;
  height: 100%;
  object-fit: contain; 
}

/* ── Cards de sinal ── */
.sign-card { background:var(--surface); border:1.5px solid var(--border); border-radius:1.25rem; padding:1.1rem 1.25rem; cursor:pointer; transition:all .2s; display:flex; align-items:center; gap:1rem; }
.sign-card:hover { border-color:var(--brand); box-shadow:var(--sh); transform:translateY(-2px); }

/* ── Cards de categoria ── */
.cat-card { background:var(--surface); border:2px solid var(--border); border-radius:var(--radius); padding:2rem 1.5rem; text-align:center; cursor:pointer; transition:all .22s; }
.cat-card:hover { border-color:var(--brand); transform:translateY(-3px); box-shadow:var(--sh-lg); }
.cat-card.open { border-color:var(--brand); background:rgba(26,82,255,.05); }

/* ── Achievements ── */
.ach-card { position:relative; overflow:hidden; background:var(--surface); border:1.5px solid var(--border); border-radius:1.25rem; padding:1.25rem; display:flex; align-items:center; gap:1rem; min-height:96px; cursor:pointer; transition:border-color .3s, box-shadow .3s; }

/* ── Navegação de páginas de conquistas ── */
.ach-page-nav { display:flex; align-items:center; gap:.2rem; }
.ach-page-arrow {
  background:none; border:1.5px solid var(--border); border-radius:.5rem;
  width:1.9rem; height:1.9rem; font-size:1.05rem; line-height:1;
  cursor:pointer; color:var(--text2); transition:border-color .2s, color .2s;
  display:flex; align-items:center; justify-content:center; padding:0;
}
.ach-page-arrow:hover:not(:disabled) { border-color:var(--brand); color:var(--brand); }
.ach-page-arrow:disabled { opacity:.32; cursor:default; }
.ach-page-indicator { font-size:.72rem; font-weight:700; color:var(--text2); min-width:2rem; text-align:center; letter-spacing:.03em; }
.ach-page { animation:ach-page-in .22s ease; }
@keyframes ach-page-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

/* ── Conquista Secreta: Pioneiro Exclusivo ── */
@keyframes ea-glow {
  0%,100% { box-shadow:0 0 0 3px rgba(220,38,38,.7), 0 4px 28px rgba(220,38,38,.35); border-color:#dc2626; }
  25%     { box-shadow:0 0 0 3px rgba(192,38,211,.7),0 4px 28px rgba(192,38,211,.35); border-color:#c026d3; }
  50%     { box-shadow:0 0 0 3px rgba(124,58,237,.7),0 4px 28px rgba(124,58,237,.35); border-color:#7c3aed; }
  75%     { box-shadow:0 0 0 3px rgba(219,39,119,.7),0 4px 28px rgba(219,39,119,.35); border-color:#db2777; }
}
@keyframes ea-icon-pulse {
  0%,100% { filter:drop-shadow(0 0 6px rgba(220,38,38,.9)); }
  25%     { filter:drop-shadow(0 0 6px rgba(192,38,211,.9)); }
  50%     { filter:drop-shadow(0 0 6px rgba(124,58,237,.9)); }
  75%     { filter:drop-shadow(0 0 6px rgba(219,39,119,.9)); }
}
@keyframes ea-bg-shift {
  0%,100% { background-position:0% 30%; }
  33%     { background-position:70% 80%; }
  66%     { background-position:100% 10%; }
}

/* Fundo sutil do card */
.ach-card.early-access-anim {
  border-width: 2px;
  background: linear-gradient(135deg,
    rgba(220,38,38,.13),
    var(--surface) 35%,
    rgba(124,58,237,.11) 65%,
    rgba(219,39,119,.1));
  background-size: 300% 300%;
  animation: ea-glow 4s ease-in-out infinite, ea-bg-shift 8s ease-in-out infinite;
}
.ach-card.early-access-anim .ea-icon {
  animation: ea-icon-pulse 4s ease-in-out infinite;
  display:inline-block;
}

/* Fundo sutil do painel de detalhe */
.achievement-detail-panel.early-access-detail {
  background: linear-gradient(135deg,
    rgba(220,38,38,.14) 0%,
    var(--surface) 32%,
    rgba(124,58,237,.12) 62%,
    rgba(219,39,119,.11) 100%);
  background-size: 300% 300%;
  border-color: rgba(124,58,237,.55);
  box-shadow: 0 0 0 3px rgba(124,58,237,.12);
  animation: ea-bg-shift 8s ease-in-out infinite;
}
.achievement-detail-panel.early-access-detail .achievement-detail-icon {
  background: linear-gradient(135deg, rgba(220,38,38,.28), rgba(124,58,237,.25));
  border-color: rgba(192,38,211,.45);
  animation: ea-icon-pulse 4s ease-in-out infinite;
}
.ach-card > * { position:relative; z-index:1; }
.ach-card.locked { opacity:.4; filter:grayscale(1); }
.ach-card.unlocked { border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,158,11,.15); }
.ach-card.selected { border-color:var(--brand); box-shadow:0 0 0 3px rgba(26,82,255,.14), var(--sh); }
.ach-card:focus-visible { outline:3px solid rgba(26,82,255,.28); outline-offset:3px; }
.ach-card.celebrating::before {
  content:"";
  position:absolute;
  inset:-35%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 28%, #f59e0b 0 3px, transparent 4px),
    radial-gradient(circle at 72% 18%, #22c55e 0 3px, transparent 4px),
    radial-gradient(circle at 38% 78%, #1a52ff 0 3px, transparent 4px),
    radial-gradient(circle at 84% 68%, #ff6b35 0 3px, transparent 4px);
  animation:achievement-sparkle 1.8s ease-out both;
}
.achievement-detail-panel {
  position:relative;
  overflow:hidden;
  margin-bottom:1rem;
  border:1.5px solid var(--border);
  border-radius:1.25rem;
  background:linear-gradient(135deg, rgba(245,158,11,.12), var(--surface) 52%, rgba(26,82,255,.08));
  min-height:172px;
  padding:1.1rem;
}
.achievement-detail-panel.locked {
  background:linear-gradient(135deg, rgba(87,96,117,.09), var(--surface));
}
.achievement-detail-panel.unlocked {
  border-color:rgba(245,158,11,.55);
  box-shadow:0 0 0 3px rgba(245,158,11,.1);
}
.achievement-detail-content { position:relative; z-index:2; display:grid; gap:.85rem; }
.achievement-detail-top { display:flex; align-items:center; gap:.9rem; min-width:0; }
.achievement-detail-icon {
  width:3.1rem;
  height:3.1rem;
  flex:0 0 3.1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:1rem;
  background:rgba(245,158,11,.18);
  border:1px solid rgba(245,158,11,.28);
  font-size:1.8rem;
}
.achievement-detail-copy { min-width:0; }
.achievement-detail-status {
  margin-bottom:.12rem;
  color:var(--gold);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.achievement-detail-panel.locked .achievement-detail-status { color:var(--text2); }
.achievement-detail-copy h5 {
  font-size:1.05rem;
  font-weight:900;
  line-height:1.2;
}
.achievement-detail-copy p:not(.achievement-detail-status),
.achievement-detail-done {
  color:var(--text2);
  font-size:.86rem;
  line-height:1.45;
}
.achievement-detail-meta {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.65rem;
}
.achievement-detail-meta div {
  min-width:0;
  border:1px solid var(--border);
  border-radius:.9rem;
  background:color-mix(in srgb, var(--surface) 78%, transparent);
  padding:.72rem .8rem;
}
.achievement-detail-meta span {
  display:block;
  margin-bottom:.18rem;
  color:var(--text2);
  font-size:.64rem;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.achievement-detail-meta strong {
  display:block;
  color:var(--text);
  font-size:.82rem;
  line-height:1.35;
  overflow-wrap:anywhere;
}
.achievement-confetti {
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.achievement-confetti-piece,
.toast-confetti-piece {
  position:absolute;
  width:6px;
  height:10px;
  border-radius:2px;
  opacity:0;
  animation:achievement-confetti-fall 3.5s ease-out forwards;
}
@keyframes achievement-sparkle {
  0% { transform:scale(.65) rotate(0); opacity:0; }
  18% { opacity:.95; }
  100% { transform:scale(1.25) rotate(18deg); opacity:0; }
}
@keyframes achievement-confetti-fall {
  0% { transform:translateY(-18px) rotate(0deg); opacity:0; }
  18% { opacity:1; }
  100% { transform:translateY(118px) rotate(280deg); opacity:0; }
}
@media (max-width: 640px) {
  .achievement-detail-meta { grid-template-columns:1fr; }
  .achievement-detail-top { align-items:flex-start; }
}

/* ── Progress bar ── */
.progress-bar  { height:6px; background:var(--border); border-radius:99px; overflow:hidden; }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--brand),#7ba0ff); border-radius:99px; transition:width .6s ease; }

/* ── Toast ── */
#toast-container { position:fixed; bottom:1.5rem; right:1.5rem; z-index:999; display:flex; flex-direction:column; gap:.6rem; pointer-events:none; }
.toast { position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--border); border-radius:1rem; padding:1rem 1.4rem; box-shadow:var(--sh-lg); display:flex; align-items:center; gap:.7rem; font-size:.88rem; font-weight:500; pointer-events:all; max-width:330px; animation:toast-in .3s ease; }
.toast.toast-out { opacity:0; transform:translateX(20px); transition:opacity .25s ease, transform .25s ease; }
.toast.achievement-toast { cursor:pointer; border-color:rgba(245,158,11,.5); background:linear-gradient(135deg, rgba(245,158,11,.14), var(--surface) 58%); min-width:min(330px, calc(100vw - 3rem)); }
.toast.achievement-toast:focus-visible { outline:3px solid rgba(245,158,11,.28); outline-offset:3px; }
.toast-content { position:relative; z-index:2; display:flex; align-items:center; gap:.7rem; min-width:0; }
.toast-copy { display:grid; gap:.08rem; min-width:0; }
.toast-title { font-weight:800; line-height:1.2; }
.toast-subtitle { color:var(--text2); font-size:.78rem; line-height:1.3; overflow-wrap:anywhere; }
.toast-confetti-layer { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.toast-confetti-piece { width:4px; height:7px; animation-duration:2.8s; }
@keyframes toast-in { from{transform:translateX(110%);opacity:0;}to{transform:translateX(0);opacity:1;} }
@media (prefers-reduced-motion: reduce) {
  .ach-card.celebrating::before,
  .achievement-confetti-piece,
  .toast-confetti-piece { animation:none; opacity:0; }
}

/* ── Modal ── */
.modal-bg { position:fixed; inset:0; background:rgba(6,10,18,.76); backdrop-filter:blur(8px); z-index:500; display:none; align-items:center; justify-content:center; padding:1rem; }
.modal-bg.open { display:flex; }
.modal-box { background:var(--surface); border:1px solid var(--border); border-radius:2rem; padding:2.25rem; width:100%; max-width:400px; box-shadow:var(--sh-lg); }

/* ── Perfil ── */
.avatar-circle {
  width:88px;
  height:88px;
  min-width:88px;
  min-height:88px;
  max-width:88px;
  max-height:88px;
  aspect-ratio:1 / 1;
  border-radius:50%;
  border:3px solid var(--brand);
  object-fit:cover;
  object-position:center;
  display:block;
  overflow:hidden;
  background:var(--surface2);
  cursor:pointer;
}
.avatar-options {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:.45rem;
  min-height:2.4rem;
}
.avatar-options:empty { display:none; }
.avatar-option-button {
  width:2.25rem;
  height:2.25rem;
  min-width:2.25rem;
  min-height:2.25rem;
  aspect-ratio:1 / 1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px;
  border:2px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  cursor:pointer;
  overflow:hidden;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.avatar-option-button:hover,
.avatar-option-button:focus-visible {
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(26,82,255,.12);
  outline:none;
}
.avatar-option-button.active {
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(26,82,255,.18);
}
.avatar-option-button img {
  width:100%;
  height:100%;
  display:block;
  border-radius:999px;
  object-fit:cover;
  object-position:center;
}
@media (max-width: 767px) {
  .avatar-options {
    gap:.4rem;
  }
  .avatar-option-button {
    width:2.15rem;
    height:2.15rem;
    min-width:2.15rem;
    min-height:2.15rem;
  }
}
.stat-box { background:var(--surface2); border-radius:1.2rem; padding:1.1rem; text-align:center; }

/* ── Alfabeto: grid de letras ── */
#letters-grid button:hover { border-color:var(--brand)!important; background:rgba(26,82,255,.08)!important; transform:translateY(-2px); box-shadow:var(--sh); }

/* ── Reconhecimento: câmera de sinais ──
   O <video> nativo renderiza o feed por baixo; o canvas é overlay
   TRANSPARENTE de landmarks por cima (mesmo padrão da aba Novo Sinal). */
#sign_video  { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; }
#sign_canvas { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:contain; z-index:10; pointer-events:none; }

/* ── Botão adicionar letra ── */
#add-letter-row { display:none; align-items:center; gap:.75rem; flex-wrap:wrap; }