:root{
    --void:#090d11;
    --surface:#121a20;
    --surface-hi:#1a252c;
    --glass:rgba(16,23,28,0.58);
    --glass-hi:rgba(23,32,38,0.62);
    --glass-border:rgba(201,166,255,0.14);
    --line:#263139;
    --lilac:#c9a6ff;
    --lilac-deep:#7f77dd;
    --gold:#eac769;
    --gold-hi:#f6dfa0;
    --dendro:#93b06a;
    --echo:#5fd0c0;
    --astral:#7c92e0;
    --ink-1:#f2f0ea;
    --ink-2:#c7cdd1;
    --ink-3:#8a969c;
    --shadow:rgba(0,0,0,0.5);
    --sky-top:#0a0e18;
    --sky-mid:#131a2c;
    --sky-horizon:#2c2547;
    --peak-far:#352d54;
    --peak-near:#0a0d14;
    --danger:#e0728a;
    --panel-inset:rgba(0,0,0,0.18);
    --on-accent:#100c1e;                  /* texto sobre o gradiente lilás (botão primário, aba ativa...) */
    --nav-bg:rgba(9,13,17,0.5);
    --tint:rgba(255,255,255,0.04);        /* preenchimento sutil de botão/pílula em repouso */
    --tint-hover:rgba(255,255,255,0.08);  /* mesmo preenchimento no hover */
    --field-bg:rgba(0,0,0,0.25);          /* fundo de input/select/textarea */
    --row-bg:rgba(0,0,0,0.15);            /* fundo de linha/bloco dentro de card */
    --ok:#57F287;
    --ok-bg:rgba(87,242,135,0.1);
    --ok-border:rgba(87,242,135,0.3);
    color-scheme:dark;
  }

  /* ---------- Tema claro ----------
     O tema escuro é o padrão do :root. O claro entra quando o <html> recebe data-theme="light", o que o
     theme.js decide a partir da preferência do usuário (Claro / Escuro / Sistema). Vale pro site inteiro,
     incluindo admin e a visão da equipe em Mensagens. */
  html[data-theme="light"]{
    color-scheme:light;
    --void:#f5f1fc;
    --surface:#ffffff;
    --surface-hi:#ffffff;
    --glass:rgba(255,255,255,0.72);
    --glass-hi:rgba(255,255,255,0.94);
    --glass-border:rgba(124,92,255,0.16);
    --line:#e7e1f7;
    --lilac:#7c5cff;
    --lilac-deep:#5636c9;
    --gold:#d79a2c;
    --gold-hi:#b9791f;
    --dendro:#3f8a4f;
    --echo:#1f8f82;
    --astral:#4a5fc9;
    --ink-1:#241c3d;
    --ink-2:#4d456a;
    --ink-3:#8b84a6;
    --shadow:rgba(124,92,255,0.14);
    --danger:#c93a56;
    --panel-inset:rgba(124,92,255,0.06);
    --on-accent:#ffffff;
    --nav-bg:rgba(255,255,255,0.78);
    --tint:rgba(124,92,255,0.06);
    --tint-hover:rgba(124,92,255,0.12);
    --field-bg:#ffffff;
    --row-bg:rgba(124,92,255,0.04);
    --ok:#1b8a4a;
    --ok-bg:rgba(27,138,74,0.1);
    --ok-border:rgba(27,138,74,0.3);
  }
  html[data-theme="light"] .scene-stars,
  html[data-theme="light"] .scene-aurora,
  html[data-theme="light"] .scene-antlers,
  html[data-theme="light"] .scene-fireflies,
  html[data-theme="light"] .scene-strands,
  html[data-theme="light"] .scene-vignette{ display:none; }
  html[data-theme="light"] .scene-sky{ background:linear-gradient(180deg, #f8f5fd 0%, #f0e9fb 55%, #e8defa 100%); }
  html[data-theme="light"] .scene-glow.a{ background:radial-gradient(circle, rgba(124,92,255,0.20), transparent 70%); }
  html[data-theme="light"] .scene-glow.b{ background:radial-gradient(circle, rgba(31,143,130,0.14), transparent 70%); }
  html[data-theme="light"] .scene-glow.c{ background:radial-gradient(circle, rgba(215,154,44,0.14), transparent 70%); }
  html[data-theme="light"] .hero h1{ text-shadow:none; }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
  html,body{ margin:0; padding:0; }
  body{
    background:var(--void);
    color:var(--ink-2);
    font-family:'Work Sans', 'Segoe UI', sans-serif;
    line-height:1.65;
    overflow-x:hidden;
  }

  /* ---------- Fixed background scene ---------- */
  .scene{
    position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  }
  .scene-sky{
    position:absolute; inset:0;
    background:linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 42%, var(--sky-horizon) 76%, var(--void) 100%);
  }
  .scene-stars{
    position:absolute; inset:0; opacity:0.8;
    background-image:
      radial-gradient(1.4px 1.4px at 8% 12%, #fff, transparent 60%),
      radial-gradient(1px 1px at 22% 28%, #fff, transparent 60%),
      radial-gradient(1.6px 1.6px at 38% 8%, #fff, transparent 60%),
      radial-gradient(1px 1px at 52% 34%, #fff, transparent 60%),
      radial-gradient(1.2px 1.2px at 68% 14%, #fff, transparent 60%),
      radial-gradient(1px 1px at 81% 30%, #fff, transparent 60%),
      radial-gradient(1.6px 1.6px at 92% 10%, #fff, transparent 60%),
      radial-gradient(1px 1px at 14% 45%, #fff, transparent 60%),
      radial-gradient(1.2px 1.2px at 46% 50%, #fff, transparent 60%),
      radial-gradient(1px 1px at 74% 46%, #fff, transparent 60%);
    background-repeat:repeat; background-size:600px 500px;
  }
  @media (prefers-reduced-motion: no-preference){
    .scene-stars{ animation:twinkle 7s ease-in-out infinite alternate; }
  }
  @keyframes twinkle{ from{ opacity:0.55; } to{ opacity:0.95; } }
  .scene-aurora{
    position:absolute; inset:-15% -10% auto -10%; height:60%;
    background:
      radial-gradient(ellipse 40% 60% at 20% 15%, rgba(111,143,201,0.18), transparent 60%),
      radial-gradient(ellipse 45% 50% at 75% 8%, rgba(143,217,211,0.16), transparent 60%),
      radial-gradient(ellipse 35% 40% at 50% 0%, rgba(201,217,232,0.12), transparent 65%);
    filter:blur(10px);
  }
  @media (prefers-reduced-motion: no-preference){
    .scene-aurora{ animation:aurora-drift 30s ease-in-out infinite alternate; }
  }
  @keyframes aurora-drift{
    0%{ transform:translateX(-3%) translateY(0); }
    100%{ transform:translateX(3%) translateY(-2%); }
  }

  /* Ambiente inspirado na Lauma — usado no fundo fixo (aparece atrás de toda a página, não só do hero) */
  .scene-glow{ position:absolute; border-radius:50%; filter:blur(90px); }
  .scene-glow.a{
    width:480px; height:480px; top:-10%; left:-6%;
    background:radial-gradient(circle, rgba(74,111,165,0.4), transparent 70%);
  }
  .scene-glow.b{
    width:440px; height:440px; top:8%; right:-8%;
    background:radial-gradient(circle, rgba(143,217,211,0.32), transparent 70%);
  }
  .scene-glow.c{
    width:380px; height:380px; top:55%; left:38%;
    background:radial-gradient(circle, rgba(199,217,232,0.24), transparent 70%);
  }
  @media (prefers-reduced-motion: no-preference){
    .scene-glow.a{ animation:lauma-drift-a 26s ease-in-out infinite alternate; }
    .scene-glow.b{ animation:lauma-drift-b 30s ease-in-out infinite alternate; }
    .scene-glow.c{ animation:lauma-pulse 10s ease-in-out infinite; }
  }
  @keyframes lauma-drift-a{ 0%{ transform:translate(0,0) scale(1); } 100%{ transform:translate(30px,40px) scale(1.1); } }
  @keyframes lauma-drift-b{ 0%{ transform:translate(0,0) scale(1); } 100%{ transform:translate(-25px,30px) scale(1.08); } }
  @keyframes lauma-pulse{ 0%,100%{ opacity:0.6; transform:scale(1); } 50%{ opacity:0.9; transform:scale(1.08); } }

  .scene-strands{ position:absolute; inset:0; width:100%; height:100%; opacity:0.5; }
  .scene-strand{ fill:none; stroke:url(#sceneStrandGrad); stroke-width:2.5; stroke-linecap:round; }
  @media (prefers-reduced-motion: no-preference){
    .scene-strand-group path:nth-child(1){ animation:strand-sway 12s ease-in-out infinite alternate; transform-origin:top center; }
    .scene-strand-group path:nth-child(2){ animation:strand-sway 15s ease-in-out infinite alternate; animation-delay:-5s; transform-origin:top center; }
  }
  @keyframes strand-sway{
    0%{ transform:rotate(-1.2deg) translateX(-3px); }
    100%{ transform:rotate(1.2deg) translateX(3px); }
  }

  .scene-antlers{ position:absolute; top:2%; left:50%; transform:translateX(-50%); width:min(760px,85%); height:auto; opacity:0.14; }
  @media (prefers-reduced-motion: no-preference){
    .scene-antlers{ animation:antler-glow 8s ease-in-out infinite; }
  }
  @keyframes antler-glow{ 0%,100%{ opacity:0.1; } 50%{ opacity:0.22; } }

  .scene-fireflies span{
    position:absolute; width:3px; height:3px; border-radius:50%;
    background:#dff1ee; box-shadow:0 0 7px 2px rgba(143,217,211,0.6);
    opacity:0;
  }
  @media (prefers-reduced-motion: no-preference){
    .scene-fireflies span{ animation:drift-up linear infinite; }
  }
  @keyframes drift-up{
    0%{ opacity:0; transform:translateY(0) translateX(0); }
    10%{ opacity:0.9; }
    90%{ opacity:0.5; }
    100%{ opacity:0; transform:translateY(-140px) translateX(18px); }
  }
  .scene-vignette{
    position:absolute; inset:0;
    background:radial-gradient(ellipse 80% 65% at 50% 30%, transparent 45%, rgba(5,7,10,0.6) 100%);
  }
  .page{ position:relative; z-index:1; }
  ::selection{ background:var(--lilac); color:var(--void); }
  a{ color:inherit; text-decoration:none; }
  img,svg{ display:block; max-width:100%; }

  h1,h2,h3{
    font-family:'Cinzel', Georgia, serif;
    color:var(--ink-1);
    margin:0;
    text-wrap:balance;
  }

  .wrap{ max-width:1120px; margin:0 auto; padding:0 clamp(20px,5vw,56px); }

  .btn{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Work Sans', sans-serif; font-weight:600; font-size:0.92rem;
    padding:13px 26px; border-radius:10px;
    cursor:pointer; border:1px solid transparent;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  }
  .btn:hover{ transform:translateY(-2px); }
  .btn:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:3px; }
  .btn-primary{
    background:linear-gradient(135deg, var(--lilac), var(--lilac-deep));
    color:var(--on-accent);
    box-shadow:0 10px 30px rgba(127,119,221,0.35);
  }
  .btn-primary:hover{ box-shadow:0 14px 36px rgba(127,119,221,0.5); }
  .btn-ghost{
    background:var(--tint);
    border-color:var(--line);
    color:var(--ink-1);
  }
  .btn-ghost:hover{ border-color:var(--lilac); }
  .btn-small{ padding:8px 16px; font-size:0.82rem; }
  .btn-danger{ background:rgba(224,114,138,0.12); border-color:rgba(224,114,138,0.4); color:var(--danger); }
  .btn-danger:hover{ border-color:var(--danger); }
  .btn:disabled{ opacity:0.5; cursor:not-allowed; transform:none; }

  /* ---------- Nav ---------- */
  nav{
    position:sticky; top:0; z-index:40;
    background:var(--nav-bg);
    backdrop-filter:blur(14px) saturate(120%);
    border-bottom:1px solid var(--glass-border);
  }
  /* Marca / links / botões: o gap garante um respiro mínimo entre os três blocos (antes, logado, somavam 1119px numa
     linha de 1120px e ficavam colados). max-width = 1120px de conteúdo + 24px de padding de cada lado, então o alinhamento
     com o resto da página não muda e, em telas menores que isso, a barra deixa de encostar na borda da janela. */
  .nav-row{ display:flex; align-items:center; justify-content:space-between; gap:24px; max-width:1168px; padding:14px 24px; }
  .brand{ display:flex; align-items:center; gap:10px; }
  /* no celular a marca PRECISA poder encolher (o nome quebra em 2 linhas), senão empurra os botões pra fora da tela */
  @media (min-width:561px){ .brand{ flex-shrink:0; } }
  .brand svg{ width:26px; height:26px; }
  .brand-avatar{ width:38px; height:38px; border-radius:50%; object-fit:cover; border:1px solid var(--glass-border); }
  .brand-lockup{ display:flex; flex-direction:column; line-height:1.25; }
  .brand-word{ font-family:'Cinzel', serif; font-weight:600; letter-spacing:0.04em; color:var(--ink-1); font-size:0.96rem; }
  .brand-word span{ color:var(--lilac); }
  .brand-handle{ font-family:'JetBrains Mono', monospace; font-size:0.68rem; color:var(--ink-3); }
  .nav-cta{ padding:10px 16px; font-size:0.85rem; white-space:nowrap; flex-shrink:0; }
  .nav-ctas{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
  /* Botão só com o logo (Discord): quadrado, o ícone herda a cor do botão. */
  .nav-cta-icon{ padding:10px 12px; }
  .nav-cta-icon svg{ width:18px; height:18px; display:block; }
  .nav-links{ display:flex; gap:18px; font-size:0.86rem; color:var(--ink-2); white-space:nowrap; justify-content:flex-end; }
  .nav-links a:hover{ color:var(--lilac); }
  /* Logado a barra tem um link e um botão a mais (Minha Conta / Mensagens). Abaixo de 1200px o botão Mensagens vira só
     o ícone (o rótulo fica no title/aria-label) e abaixo de 1100px os links de seção somem — antes disso eles colidiam
     com a marca e os botões. (Eram escondidos só abaixo de 900px.) */
  @media (max-width:1200px){ .nav-cta-label{ display:none; } }
  @media (max-width:1100px){ .nav-links{ display:none; } }
  /* Celular: sem o @handle e com botões mais compactos pra sobrar espaço pra marca. */
  @media (max-width:560px){
    .nav-row{ padding-left:16px; padding-right:16px; gap:12px; }
    .nav-cta{ padding:9px 14px; font-size:0.8rem; }
    .brand-handle{ display:none; }
  }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    padding:96px 0 72px;
    overflow:hidden;
  }
  .hero-grid{
    display:grid; grid-template-columns:1.05fr 0.95fr; align-items:center; gap:56px;
    text-align:left;
    position:relative; z-index:2;
  }
  .hero-copy{ max-width:560px; }
  @media (max-width:900px){
    .hero-grid{ grid-template-columns:1fr; text-align:center; gap:44px; }
    .hero-copy{ max-width:none; margin:0 auto; }
  }

  .eyebrow{
    display:inline-flex; align-items:center; gap:9px;
    font-family:'JetBrains Mono', monospace; font-size:0.7rem;
    letter-spacing:0.16em; text-transform:uppercase; color:var(--gold-hi);
    border:1px solid rgba(234,199,105,0.35); background:rgba(234,199,105,0.06);
    padding:7px 14px; border-radius:999px;
  }
  .eyebrow .dot{ width:5px; height:5px; border-radius:50%; background:var(--gold-hi); box-shadow:0 0 6px var(--gold-hi); }

  .hero h1{
    font-family:'Cinzel Decorative', serif; font-weight:700;
    font-size:clamp(2.6rem, 6vw, 3.9rem);
    margin:20px 0 6px;
    text-shadow:0 0 46px rgba(201,166,255,0.25);
  }
  .hero h1 span{ color:var(--lilac); }
  .hero .subline{
    font-family:'Cinzel', serif; font-style:italic; color:var(--gold-hi);
    font-size:1.05rem; margin-bottom:18px;
  }
  .hero .dek{ max-width:52ch; color:var(--ink-2); font-size:1rem; margin:0 0 30px; }
  .hero .actions{ display:flex; justify-content:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:26px; }
  .hero .trust-line{
    font-family:'JetBrains Mono', monospace; font-size:0.76rem; color:var(--ink-3);
    display:flex; justify-content:flex-start; align-items:center; gap:8px;
  }
  .hero .trust-line .stars{ color:var(--gold-hi); letter-spacing:0.05em; }
  @media (max-width:900px){
    .hero .dek{ margin:0 auto 30px; }
    .hero .actions{ justify-content:center; }
    .hero .trust-line{ justify-content:center; }
  }

  .hero-badges{ display:grid; grid-template-columns:repeat(2,auto); gap:10px 24px; margin-bottom:22px; }
  .hero-badge{ display:flex; align-items:center; gap:8px; font-size:0.8rem; color:var(--ink-2); }
  .hero-badge svg{ width:16px; height:16px; color:var(--lilac); flex-shrink:0; }
  @media (max-width:900px){ .hero-badges{ justify-content:center; grid-template-columns:auto; justify-items:center; } }

  /* ---------- Hero illustration card ---------- */
  .hero-art{ position:relative; display:flex; flex-direction:column; align-items:center; }
  .hero-art-quote{
    position:relative; align-self:flex-start; margin-left:6%; margin-bottom:-18px;
    background:var(--glass-hi); backdrop-filter:blur(14px) saturate(120%);
    border:1px solid var(--glass-border); border-radius:14px;
    padding:12px 16px; font-family:'Cinzel', serif; font-style:italic; font-size:0.86rem;
    color:var(--ink-1); max-width:78%; box-shadow:0 14px 34px var(--shadow); z-index:2;
  }
  .hero-art-quote::after{
    content:""; position:absolute; bottom:-7px; left:32px; width:14px; height:14px;
    background:var(--glass-hi); border-right:1px solid var(--glass-border); border-bottom:1px solid var(--glass-border);
    transform:rotate(45deg);
  }
  .hero-art-frame{
    position:relative; width:100%; max-width:360px; aspect-ratio:12/7;
    background:linear-gradient(165deg, var(--glass-hi), var(--glass));
    border:1px solid var(--glass-border); border-radius:22px; overflow:hidden;
    box-shadow:0 24px 60px var(--shadow);
  }
  .hero-art-illustration{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block; }
  .hero-art-caption{
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; max-width:340px; margin-top:14px;
    background:var(--glass); backdrop-filter:blur(14px) saturate(120%);
    border:1px solid var(--glass-border); border-radius:999px;
    padding:10px 16px; font-family:'JetBrains Mono', monospace; font-size:0.62rem;
    letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-2); text-align:center;
  }
  .hero-art-caption svg{ width:14px; height:14px; color:var(--gold-hi); flex-shrink:0; }
  @media (max-width:900px){ .hero-art{ margin:0 auto; } }

  /* splash */
  .splash{ position:relative; display:flex; justify-content:center; }
  .splash .rays{
    position:absolute; inset:-10%; border-radius:50%;
    background:conic-gradient(from 0deg, rgba(234,199,105,0.16), transparent 12%, transparent 88%, rgba(234,199,105,0.16));
  }
  @media (prefers-reduced-motion: no-preference){
    .splash .rays{ animation:spin 40s linear infinite; }
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .splash .tag{
    position:absolute; top:8px; right:8px; z-index:3;
    font-family:'JetBrains Mono', monospace; font-size:0.65rem; letter-spacing:0.12em;
    background:linear-gradient(135deg, var(--gold), var(--gold-hi)); color:#241a04;
    padding:5px 11px; border-radius:999px; font-weight:600;
  }
  .splash svg{ position:relative; z-index:2; width:min(320px,70vw); }

  /* ---------- Stat strip ---------- */
  .stat-bar{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:1px; background:var(--glass-border); border:1px solid var(--glass-border); border-radius:14px;
    overflow:hidden; position:relative; z-index:3; box-shadow:0 20px 50px var(--shadow);
    margin-top:-6px;
  }
  .stat{ background:var(--glass); backdrop-filter:blur(14px) saturate(120%); padding:18px 18px; display:flex; flex-direction:column; gap:6px; }
  .stat svg{ width:18px; height:18px; color:var(--lilac); }
  .stat .k{ font-family:'JetBrains Mono', monospace; font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3); }
  .stat .v{ color:var(--ink-1); font-weight:600; font-size:0.98rem; }

  /* ---------- Sections ---------- */
  section{ padding:100px 0; }
  .section-head{ max-width:64ch; margin-bottom:44px; }
  .section-head .tag{
    font-family:'JetBrains Mono', monospace; font-size:0.68rem; letter-spacing:0.18em;
    text-transform:uppercase; color:var(--lilac); display:block; margin-bottom:10px;
  }
  .section-head h2{ font-size:clamp(1.7rem,3.4vw,2.25rem); margin-bottom:12px; }
  .section-head p{ color:var(--ink-3); font-size:0.98rem; }

  /* Services grid (category cards, section #servicos) */
  .service-switch{ display:flex; flex-direction:column; gap:10px; margin-bottom:28px; }
  .games{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  @media (max-width:900px){ .games{ grid-template-columns:1fr; } }
  @media (min-width:901px) and (max-width:1150px){ .games{ grid-template-columns:repeat(2,1fr); } }
  .service-card{
    background:linear-gradient(165deg, var(--glass-hi), var(--glass));
    backdrop-filter:blur(14px) saturate(120%);
    border:1px dashed var(--glass-border); border-radius:16px; padding:24px;
    display:flex; flex-direction:column; align-items:flex-start; gap:10px;
    transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .service-card:hover{ transform:translateY(-4px); border-color:var(--lilac); box-shadow:0 16px 40px var(--shadow); }
  .service-card .icon-badge{
    width:52px; height:52px; border-radius:50%; flex-shrink:0;
    background:rgba(124,92,255,0.1); border:1px solid var(--glass-border);
    display:flex; align-items:center; justify-content:center;
  }
  .service-card .icon-badge .icon-inline{ width:24px; height:24px; color:var(--lilac); }
  .service-card h3{ font-family:'Work Sans',sans-serif; font-weight:700; font-size:1.05rem; color:var(--ink-1); }
  .service-card p{ margin:0; font-size:0.86rem; color:var(--ink-3); }
  .service-cta{ margin-top:auto; align-self:stretch; }

  .icon-inline{ width:14px; height:14px; flex-shrink:0; }
  .icon-inline-lg{ width:30px; height:30px; flex-shrink:0; }
  img.icon-img{ object-fit:contain; display:inline-block; vertical-align:middle; }
  .service-card .icon-badge img.icon-inline{ width:34px; height:34px; }
  .tab-pill img.icon-inline{ width:20px; height:20px; }
  .tab-pill img.icon-inline-lg{ width:26px; height:26px; border-radius:50%; }

  /* ---------- Pricing preview (section #precos) ---------- */
  .price-preview{ display:grid; grid-template-columns:1.6fr 1fr; gap:22px; align-items:stretch; }
  @media (max-width:860px){ .price-preview{ grid-template-columns:1fr; } }
  .price-preview-card{
    background:linear-gradient(165deg, var(--glass-hi), var(--glass));
    backdrop-filter:blur(14px) saturate(120%);
    border:1px solid var(--glass-border); border-radius:18px; padding:26px;
  }
  .price-preview-head{ display:flex; flex-direction:column; gap:10px; margin-bottom:6px; }
  .price-preview-aside{
    background:var(--glass); backdrop-filter:blur(14px) saturate(120%);
    border:1px solid var(--glass-border); border-radius:18px; padding:26px;
    display:flex; flex-direction:column; justify-content:center; gap:14px;
  }
  .price-preview-aside h3{ font-family:'Work Sans',sans-serif; font-weight:600; font-size:1.05rem; color:var(--ink-1); }
  .price-preview-aside p{ margin:0; font-size:0.88rem; color:var(--ink-3); }
  .price-preview-aside .btn{ align-self:flex-start; }
  .price-preview-note{ margin-top:18px; font-size:0.78rem; color:var(--ink-3); }

  .card-cta-row{ display:flex; gap:8px; margin-top:4px; }
  .card-cta{
    display:flex; flex:1; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    padding:10px 10px; border-radius:9px;
    background:var(--tint); border:1px solid var(--glass-border);
    color:var(--ink-1); font-family:'Work Sans', sans-serif; font-weight:600; font-size:0.78rem;
    cursor:pointer; text-align:center; transition:background .2s ease, border-color .2s ease, transform .2s ease;
  }
  .card-cta .icon-inline{ color:var(--accent, var(--lilac)); }
  .card-cta:hover{ background:var(--tint-hover); border-color:var(--accent, var(--lilac)); transform:translateY(-1px); }
  .card-cta:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:2px; }
  .card-cta.is-off{ opacity:0.55; }
  .card-cta.is-off .icon-inline{ color:var(--ink-3); }
  .card-cta.is-off::after{
    content:"Fora do ar"; display:block; margin-top:2px;
    font-family:'JetBrains Mono', monospace; font-size:0.6rem; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--danger);
  }

  .offline-notice{
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
    padding:20px 10px; color:var(--ink-3);
  }
  .offline-notice svg{ width:32px; height:32px; color:var(--danger); }
  .offline-notice strong{ color:var(--ink-1); }

  /* ---------- Service modal ---------- */
  .modal-overlay{
    position:fixed; inset:0; z-index:100;
    background:rgba(5,7,10,0.72); backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center; padding:20px;
  }
  .modal-overlay[hidden]{ display:none; }
  .modal{
    position:relative; width:100%; max-width:600px; max-height:85vh; overflow-y:auto;
    background:linear-gradient(165deg, var(--glass-hi), var(--surface));
    backdrop-filter:blur(18px) saturate(130%);
    border:1px solid var(--glass-border); border-radius:18px;
    padding:28px 26px 26px;
    box-shadow:0 30px 80px var(--shadow), 0 0 0 1px rgba(201,166,255,0.08);
  }
  .modal-close{
    position:absolute; top:16px; right:16px;
    width:32px; height:32px; border-radius:50%;
    background:var(--tint); border:1px solid var(--glass-border);
    color:var(--ink-2); font-size:0.9rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .2s ease, color .2s ease;
  }
  .modal-close:hover{ background:var(--tint-hover); color:var(--ink-1); }
  .modal-close:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:2px; }
  .modal-head{ display:flex; align-items:center; gap:12px; margin-bottom:20px; padding-right:36px; }
  .modal-icon{ font-size:1.8rem; line-height:1; }
  .modal-head h3{ font-size:1.3rem; }
  .modal-head-text{ display:flex; flex-direction:column; gap:4px; }
  .method-badge{
    display:inline-flex; align-items:center; gap:5px; align-self:flex-start;
    font-family:'JetBrains Mono', monospace; font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase;
    padding:3px 10px; border-radius:999px;
    background:rgba(201,166,255,0.12); border:1px solid rgba(201,166,255,0.3); color:var(--lilac);
  }
  .method-badge.script{ background:rgba(234,199,105,0.12); border-color:rgba(234,199,105,0.32); color:var(--gold-hi); }
  .modal-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
  .tab-pill{
    display:inline-flex; align-items:center; gap:6px;
    padding:9px 15px; border-radius:999px;
    background:var(--tint); border:1px solid var(--glass-border);
    color:var(--ink-2); font-family:'Work Sans', sans-serif; font-weight:600; font-size:0.82rem;
    cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease;
  }
  .tab-pill:hover{ background:var(--tint-hover); color:var(--ink-1); }
  .tab-pill:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:2px; }
  .tab-pill.active{
    background:linear-gradient(135deg, var(--lilac), var(--lilac-deep));
    border-color:transparent; color:var(--on-accent);
  }
  .modal-content{
    background:var(--panel-inset); border:1px solid var(--glass-border); border-radius:12px;
    padding:18px 20px; font-size:0.92rem; color:var(--ink-2); line-height:1.7;
    min-height:96px;
  }
  .modal-content em{ color:var(--ink-3); font-style:italic; }

  /* Price tables inside modal content */
  .price-tiers{ display:flex; flex-direction:column; gap:18px; }
  .price-tier + .price-tier{ padding-top:18px; border-top:1px solid var(--glass-border); }
  .price-tier h4{
    display:flex; align-items:baseline; gap:8px; margin:0 0 10px;
    font-family:'Work Sans', sans-serif; font-size:0.94rem;
  }
  .price-tier .tier-name{ color:var(--ink-1); font-weight:700; }
  .price-tier .tier-range{ color:var(--ink-3); font-size:0.78rem; font-weight:400; }
  .price-table{ display:flex; flex-direction:column; gap:0; }
  .price-row{
    display:grid; grid-template-columns:1fr auto auto; gap:14px;
    padding:7px 0; border-top:1px dashed var(--glass-border);
    font-size:0.86rem; align-items:center;
  }
  .price-row:first-child{ border-top:none; }
  .price-row.price-head{
    font-family:'JetBrains Mono', monospace; font-size:0.62rem; letter-spacing:0.1em;
    text-transform:uppercase; color:var(--ink-3); padding-bottom:8px;
  }
  .price-row span:nth-child(2){ text-align:right; min-width:76px; }
  .price-row span:nth-child(3){ text-align:right; min-width:60px; color:var(--ink-3); }
  .price-row .price{
    color:var(--gold-hi); font-weight:600;
    font-variant-numeric:tabular-nums;
  }
  .price-notes{ margin-top:16px; padding-top:14px; border-top:1px solid var(--glass-border); }
  .price-notes p{ margin:0 0 6px; font-size:0.82rem; color:var(--ink-3); }
  .price-notes p:last-child{ margin-bottom:0; }
  .price-notes strong{ color:var(--ink-1); }

  /* Timeline */
  .timeline{ display:flex; flex-direction:column; gap:0; }
  .step{
    display:grid; grid-template-columns:56px 1fr; gap:20px;
    padding:26px 0; border-top:1px solid var(--line);
  }
  .step:last-child{ border-bottom:1px solid var(--line); }
  .step .n{
    font-family:'Cinzel', serif; font-weight:700; font-size:1.4rem; color:var(--lilac);
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; border:1px solid rgba(201,166,255,0.35); border-radius:50%;
  }
  .step h3{ font-family:'Work Sans',sans-serif; font-weight:600; font-size:1.02rem; color:var(--ink-1); margin-bottom:5px; }
  .step p{ margin:0; font-size:0.9rem; color:var(--ink-3); max-width:60ch; }

  /* Trust grid */
  .trust-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
  @media (max-width:760px){ .trust-grid{ grid-template-columns:1fr; } }
  .trust-card{
    background:var(--glass); backdrop-filter:blur(14px) saturate(120%);
    border:1px solid var(--glass-border); border-radius:14px; padding:22px 24px;
    display:flex; gap:14px;
  }
  .trust-card .icon{
    flex-shrink:0; width:36px; height:36px; border-radius:10px;
    background:rgba(201,166,255,0.1); border:1px solid rgba(201,166,255,0.28);
    display:flex; align-items:center; justify-content:center;
  }
  .trust-card .icon svg{ width:18px; height:18px; color:var(--lilac); }
  .trust-card h3{ font-family:'Work Sans',sans-serif; font-weight:600; font-size:0.98rem; color:var(--ink-1); margin-bottom:5px; }
  .trust-card p{ margin:0; font-size:0.85rem; color:var(--ink-3); }

  /* ---------- Reviews feed (section #avaliacoes) ---------- */
  .reviews-live-badge{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'JetBrains Mono', monospace; font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--ink-3); margin-bottom:24px;
  }
  .reviews-live-badge .dot{
    width:7px; height:7px; border-radius:50%; background:var(--dendro);
    box-shadow:0 0 6px var(--dendro); animation:reviewsPulse 1.8s ease-in-out infinite;
  }
  @keyframes reviewsPulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }
  .reviews-feed{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; }
  .review-card{
    background:var(--glass); backdrop-filter:blur(14px) saturate(120%);
    border:1px solid var(--glass-border); border-radius:14px; padding:20px 22px;
    display:flex; flex-direction:column; gap:10px;
  }
  .review-stars{ color:var(--gold-hi); font-size:1rem; letter-spacing:0.08em; }
  .review-text{ margin:0; font-size:0.88rem; color:var(--ink-2); line-height:1.6; flex-grow:1; overflow-wrap:break-word; }
  .review-text em{ color:var(--ink-3); font-style:italic; }
  .review-date{ font-family:'JetBrains Mono', monospace; font-size:0.66rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-3); }
  .reviews-empty{ color:var(--ink-3); font-size:0.9rem; grid-column:1/-1; }

  /* TikTok follow promo (between #avaliacoes and the final CTA band) */
  .tiktok-promo{ padding:0 0 60px; }
  .tiktok-promo-card{
    display:flex; align-items:center; gap:24px; flex-wrap:wrap;
    background:linear-gradient(135deg, rgba(124,92,255,0.08), rgba(234,199,105,0.08)), var(--glass);
    backdrop-filter:blur(14px) saturate(120%);
    border:1px solid var(--glass-border); border-radius:20px;
    padding:30px 34px;
  }
  .tiktok-promo-icon{
    flex-shrink:0; width:54px; height:54px; border-radius:50%;
    background:rgba(124,92,255,0.12); border:1px solid rgba(124,92,255,0.28);
    display:flex; align-items:center; justify-content:center;
  }
  .tiktok-promo-icon svg{ width:26px; height:26px; color:var(--lilac); }
  .tiktok-promo-text{ flex:1; min-width:220px; }
  .tiktok-promo-text h3{ font-family:'Work Sans',sans-serif; font-weight:700; font-size:1.12rem; color:var(--ink-1); margin-bottom:5px; }
  .tiktok-promo-text p{ margin:0; font-size:0.9rem; color:var(--ink-3); }
  @media (max-width:640px){ .tiktok-promo-card{ flex-direction:column; text-align:center; padding:28px 24px; } }

  /* CTA band */
  .cta-band{
    background:
      radial-gradient(ellipse 60% 120% at 20% 50%, rgba(201,166,255,0.14), transparent 60%),
      radial-gradient(ellipse 60% 120% at 80% 50%, rgba(234,199,105,0.10), transparent 60%),
      var(--glass);
    backdrop-filter:blur(14px) saturate(120%);
    border-top:1px solid var(--glass-border); border-bottom:1px solid var(--glass-border);
    text-align:center; padding:90px 0;
  }
  .cta-band h2{ font-size:clamp(1.8rem,4vw,2.5rem); margin-bottom:14px; }
  .cta-band p{ color:var(--ink-3); max-width:48ch; margin:0 auto 32px; }
  .cta-band .actions{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }

  /* Footer */
  footer{ padding:44px 0 60px; }
  .foot-stat-bar{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px;
    background:var(--glass-border); border:1px solid var(--glass-border); border-radius:14px;
    overflow:hidden; margin-bottom:36px;
  }
  .foot-stat{ background:var(--glass); backdrop-filter:blur(14px) saturate(120%); padding:16px 18px; display:flex; align-items:center; gap:12px; }
  .foot-stat svg{ width:20px; height:20px; color:var(--lilac); flex-shrink:0; }
  .foot-stat span{ display:flex; flex-direction:column; font-size:0.82rem; color:var(--ink-3); }
  .foot-stat strong{ color:var(--ink-1); font-size:0.88rem; font-weight:600; }
  .foot-row{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:flex-start; }
  .foot-brand{ font-family:'Cinzel', serif; letter-spacing:0.08em; color:var(--ink-1); font-size:0.85rem; }
  .foot-brand span{ color:var(--lilac); }
  .foot-nav{ display:flex; gap:20px; font-size:0.85rem; }
  .foot-nav a:hover{ color:var(--lilac); }
  .foot-social{ display:flex; gap:10px; margin-top:16px; }
  .foot-social a{
    width:34px; height:34px; border-radius:50%;
    background:var(--tint); border:1px solid var(--glass-border);
    display:flex; align-items:center; justify-content:center;
    color:var(--ink-2); transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
  }
  .foot-social a:hover{ background:var(--tint-hover); border-color:var(--lilac); color:var(--lilac); transform:translateY(-2px); }
  .foot-social svg{ width:16px; height:16px; }
  .disclaimer{ max-width:60ch; font-size:0.76rem; color:var(--ink-3); line-height:1.7; margin-top:22px; }

  /* ---------- Seletor de tema (Claro / Escuro / Sistema) ----------
     Montado por theme.js dentro de qualquer [data-theme-toggle]. */
  .theme-toggle{ position:relative; display:flex; align-items:center; }
  .theme-toggle-btn{
    width:32px; height:32px; border-radius:50%; cursor:pointer; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:var(--tint); border:1px solid var(--glass-border); color:var(--ink-2);
    transition:background .2s ease, color .2s ease, border-color .2s ease;
  }
  .theme-toggle-btn:hover{ background:var(--tint-hover); color:var(--ink-1); border-color:var(--lilac); }
  .theme-toggle-btn:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:2px; }
  .theme-toggle-btn svg{ width:17px; height:17px; }
  .theme-menu{
    position:absolute; top:calc(100% + 8px); right:0; z-index:300; min-width:150px; padding:6px;
    display:flex; flex-direction:column; gap:2px;
    background:var(--surface-hi); border:1px solid var(--glass-border); border-radius:10px;
    box-shadow:0 12px 30px var(--shadow);
  }
  .theme-menu[hidden]{ display:none; }
  .theme-menu-item{
    display:flex; align-items:center; gap:9px; width:100%; padding:8px 10px; border-radius:6px;
    background:none; border:none; color:var(--ink-2); font-family:inherit; font-size:0.86rem; text-align:left; cursor:pointer;
  }
  .theme-menu-item svg{ width:16px; height:16px; flex-shrink:0; }
  .theme-menu-item:hover{ background:var(--tint-hover); color:var(--ink-1); }
  .theme-menu-item:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:-2px; }
  .theme-menu-item[aria-pressed="true"]{ color:var(--lilac); font-weight:600; }
  /* login/cadastro não têm barra no topo — o seletor fica solto no canto */
  .theme-corner{ position:fixed; top:16px; right:16px; z-index:5; }
  /* Marca do site (link pro início) no canto superior esquerdo de toda página fora da home: solta no canto em login/cadastro
     (.brand-corner, espelho do .theme-corner), e à esquerda do título na .dm-topbar das demais (.dm-topbar-left). */
  .site-brand{ font-family:'Cinzel', serif; font-weight:600; letter-spacing:0.04em; color:var(--ink-1); font-size:0.95rem; white-space:nowrap; }
  .site-brand:hover{ color:var(--lilac); }
  .site-brand:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:3px; border-radius:4px; }
  .brand-corner{ position:fixed; top:16px; left:16px; z-index:5; height:32px; display:flex; align-items:center; }
  /* admin.html: a marca solta só vale na tela de senha; com o painel aberto quem mostra a marca é a .dm-topbar
     (a #acessoScreen — aviso de "só admin" — fica com style="display:none" até ser mostrada, e o seletor acompanha isso). */
  #acessoScreen[style*="none"] ~ .brand-corner{ display:none; }
  /* ligada pelo theme.js só durante a troca de tema, pra tudo mudar de uma vez em vez de uns fazerem fade e outros não */
  html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after{ transition:none !important; }

  /* ================= Mensagens (canal estilo Discord) ================= */
  /* z-index 5 (não 1): o menu do seletor de tema abre pra baixo da barra e precisa ficar por cima do .dm-shell,
     que vem depois no DOM e, com o mesmo z-index, cobriria o menu. Altura total continua 53px (ver .dm-shell). */
  .dm-topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 24px; border-bottom:1px solid var(--glass-border); position:relative; z-index:5; }
  .dm-topbar h1{ font-size:1.05rem; }
  .dm-topbar a{ font-size:0.85rem; color:var(--ink-3); }
  .dm-topbar a:hover{ color:var(--lilac); }
  .dm-topbar-actions{ display:flex; align-items:center; gap:16px; }
  /* marca + título à esquerda; o título pode encurtar (…) antes de empurrar os botões da direita pra fora */
  .dm-topbar-left{ display:flex; align-items:center; gap:14px; min-width:0; }
  .dm-topbar .site-brand{ flex-shrink:0; font-size:0.95rem; color:var(--ink-1); }
  .dm-topbar .site-brand:hover{ color:var(--lilac); }
  .dm-topbar-left h1{ padding-left:14px; border-left:1px solid var(--glass-border); min-width:0; overflow:hidden; text-overflow:ellipsis; }
  /* sem quebra de linha: com "Entrar em Contato" no título, no celular o topo virava 2 linhas e passava dos 53px */
  .dm-topbar h1, .dm-topbar a, .dm-main-header .btn{ white-space:nowrap; }
  @media (max-width:480px){
    .dm-topbar{ padding-left:16px; padding-right:16px; }
    .dm-topbar-actions{ gap:10px; }
    .dm-topbar h1{ font-size:0.8rem; }
    .dm-topbar a{ font-size:0.78rem; }
    /* Com a marca à esquerda a barra não cabe mais com tudo em 375 px (e passava dos 53px): os links "← Voltar…/← Minha Conta"
       (.hide-sm) somem — a marca leva ao início e o menu do painel do usuário leva à conta — e o botão de avisos fica só com o ícone. */
    .dm-topbar .site-brand{ font-size:0.82rem; letter-spacing:0.02em; }
    .dm-topbar-left{ gap:10px; }
    .dm-topbar-left h1{ padding-left:10px; }
    .dm-topbar .avisos-rotulo{ display:none; }
    .dm-topbar [data-avisos-toggle]{ padding-left:10px; padding-right:10px; }
    .hide-sm{ display:none; }
  }

  .dm-shell{ display:flex; height:calc(100vh - 53px); position:relative; z-index:1; }
  .dm-sidebar{ display:flex; flex-direction:column; width:260px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--glass-border); overflow-y:auto; padding:14px 8px 0; }
  .dm-sidebar-label{ font-family:'JetBrains Mono', monospace; font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-3); padding:10px 10px 6px; }
  .dm-channel{ display:flex; align-items:center; gap:7px; padding:8px 10px; border-radius:6px; color:var(--ink-2); cursor:pointer; font-size:0.9rem; width:100%; text-align:left; background:none; border:none; font-family:inherit; }
  .dm-channel:hover{ background:var(--tint-hover); color:var(--ink-1); }
  .dm-channel.active{ background:rgba(124,92,255,0.22); color:var(--ink-1); }
  .dm-channel .hash{ color:var(--ink-3); font-weight:600; flex-shrink:0; }
  .dm-channel-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
  .dm-channel-resp{ color:var(--ink-3); font-weight:400; }
  .dm-channel-empty{ padding:12px 10px; font-size:0.82rem; color:var(--ink-3); }
  /* Canais internos (só equipe): rótulo da seção com o "+" de criar (admin) e o # em lilás pra não confundir com conversa de cliente */
  .dm-label-row{ display:flex; align-items:center; justify-content:space-between; }
  .dm-label-add{ background:none; border:none; color:var(--ink-3); cursor:pointer; font-size:1.15rem; line-height:1; padding:2px 7px; border-radius:6px; }
  .dm-label-add:hover{ background:var(--tint-hover); color:var(--ink-1); }
  .dm-channel.is-internal .hash{ color:var(--lilac); }
  /* Tickets: botões "Novo pedido / Preciso de ajuda" da barra do cliente, selo de status no fim do item, busca + filtro da equipe */
  .dm-new-actions{ display:flex; gap:6px; flex-wrap:wrap; padding:4px 8px 8px; }
  .dm-channel-emoji{ flex-shrink:0; font-size:0.8rem; }
  .dm-ticket-filtros{ display:flex; flex-direction:column; gap:6px; padding:0 8px 8px; }
  .dm-ticket-filtros input, .dm-ticket-filtros select{ width:100%; background:var(--field-bg); border:1px solid var(--glass-border); border-radius:8px; padding:7px 9px; color:var(--ink-1); font-size:0.82rem; font-family:'Work Sans', sans-serif; }
  .dm-ticket-filtros input:focus, .dm-ticket-filtros select:focus{ outline:none; border-color:var(--lilac); }
  .dm-main-header .pedido-estado{ flex-shrink:0; }
  .pedido-estado{ white-space:nowrap; }
  /* Telas médias: o cabeçalho da equipe tem muitos botões (concluir, urgente, encerrar, cobrar, menu) — o título com os selos ganha a 1ª linha inteira em vez de ser cortado */
  @media (max-width:1100px){
    #staffView .dm-main-header{ flex-wrap:wrap; row-gap:8px; }
    #staffView .dm-main-header-title{ flex:1 1 100%; white-space:normal; overflow:visible; }
    #staffView .dm-header-actions{ margin-left:auto; flex-wrap:wrap; }
  }
  .dm-back-btn{ display:none; flex-shrink:0; }
  /* Cobrança cancelada/expirada some o QR e esmaece; ações do admin lado a lado */
  .dm-payment-card.is-morta{ opacity:0.6; }
  .dm-payment-acoes{ display:flex; gap:6px; flex-wrap:wrap; }
  /* Cartão de entrega e avaliação dentro do ticket */
  .dm-entrega-card{ max-width:420px; padding:14px 16px; border:1px solid var(--ok-border); border-radius:12px; background:var(--ok-bg); display:flex; flex-direction:column; gap:8px; }
  .dm-entrega-title{ font-weight:600; color:var(--ok); }
  .dm-entrega-card p{ margin:0; font-size:0.88rem; line-height:1.55; color:var(--ink-1); }
  .dm-entrega-resp, .dm-entrega-dica{ font-size:0.78rem; color:var(--ink-3); }
  .dm-avaliacao-card{ max-width:420px; padding:10px 14px; border:1px solid rgba(234,199,105,0.4); border-radius:12px; background:rgba(234,199,105,0.08); }
  .dm-estrelas{ color:var(--gold-hi); font-size:1.15rem; letter-spacing:2px; }
  .dm-estrelas .vazia{ opacity:0.25; }
  /* Caixa de avaliação do cliente (entre as mensagens e o campo de texto) */
  .dm-rating{ flex-shrink:0; margin:0 20px 8px; padding:12px 14px; border:1px solid rgba(234,199,105,0.45); border-radius:12px; background:rgba(234,199,105,0.07); display:flex; flex-direction:column; gap:8px; }
  .dm-rating-title{ font-weight:600; font-size:0.9rem; color:var(--ink-1); }
  .dm-stars{ display:flex; gap:2px; }
  .dm-stars button{ background:none; border:none; cursor:pointer; font-size:1.7rem; line-height:1; padding:0 3px; color:var(--ink-3); opacity:0.5; transition:transform .12s, opacity .12s; }
  .dm-stars button.on{ color:var(--gold-hi); opacity:1; }
  .dm-stars button:hover{ transform:scale(1.15); }
  .dm-rating textarea{ width:100%; resize:none; background:var(--field-bg); border:1px solid var(--glass-border); border-radius:8px; padding:8px 10px; color:var(--ink-1); font-family:'Work Sans', sans-serif; font-size:0.88rem; }
  .dm-rating textarea:focus{ outline:none; border-color:var(--lilac); }
  .dm-rating-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
  .dm-rating-actions .pedido-erro{ margin:0; }
  /* Dados de acesso da conta do jogo (cofre): barra acima do campo de texto, cartões no chat e os dois modais */
  .dm-acesso-bar{ flex-shrink:0; align-items:center; justify-content:space-between; gap:8px 14px; flex-wrap:wrap; margin:0 20px 8px; padding:10px 14px; border:1px solid var(--glass-border); border-radius:12px; background:var(--glass-hi); font-size:0.84rem; color:var(--ink-2); }
  .dm-acesso-texto{ flex:1 1 220px; min-width:0; overflow-wrap:anywhere; }
  .dm-acesso-texto strong{ color:var(--ink-1); }
  .dm-acesso-texto.is-off{ color:var(--ink-3); font-size:0.78rem; }
  .dm-acesso-botoes{ display:flex; gap:8px; flex-wrap:wrap; }
  .dm-acesso-card{ max-width:420px; padding:12px 14px; border:1px solid rgba(124,92,255,0.4); border-radius:12px; background:rgba(124,92,255,0.08); display:flex; flex-direction:column; gap:8px; }
  .dm-acesso-card.is-ok{ border-color:var(--ok-border); background:var(--ok-bg); }
  .dm-acesso-title{ font-weight:600; color:var(--ink-1); }
  .dm-acesso-card p{ margin:0; font-size:0.86rem; line-height:1.5; color:var(--ink-2); }
  .dm-acesso-card .btn{ align-self:flex-start; }
  .dm-acesso-status{ font-size:0.78rem; color:var(--ink-3); }
  .acesso-aviso{ margin:0 0 14px; padding:10px 12px; border-radius:10px; background:var(--tint); border:1px solid var(--glass-border); font-size:0.8rem; line-height:1.5; color:var(--ink-2); }
  .acesso-aviso:empty{ display:none; }
  .acesso-senha-row{ display:flex; gap:8px; }
  .acesso-senha-row input{ flex:1; min-width:0; }
  .acesso-timer{ align-self:center; font-family:'JetBrains Mono', monospace; font-size:0.74rem; color:var(--ink-3); }
  .cofre-campo{ margin-bottom:12px; }
  .cofre-rotulo{ margin-bottom:4px; font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3); }
  .cofre-linha{ display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--glass-border); border-radius:10px; background:var(--field-bg); }
  .cofre-valor{ flex:1; min-width:0; font-family:'JetBrains Mono', monospace; font-size:0.86rem; color:var(--ink-1); overflow-wrap:anywhere; user-select:text; }
  .cofre-valor.is-mask{ letter-spacing:0.15em; color:var(--ink-3); }
  .cofre-valor.is-vazio{ font-family:inherit; font-style:italic; color:var(--ink-3); }
  .cofre-valor.is-obs{ white-space:pre-wrap; }
  .cofre-botoes{ display:flex; gap:6px; flex-shrink:0; }
  /* Formulário do cliente: Rank e Servidor ficam LADO A LADO mesmo no celular (o grid do pedido empilha em ≤560 px; aqui a 2ª linha inteira sumia abaixo da dobra) */
  .pedido-form-grid.acesso-grid{ grid-template-columns:1fr 1fr; gap:0 10px; align-items:end; } /* o rótulo de um quebra em 2 linhas: alinha os campos pela base */
  @media (max-width:560px){ .acesso-aviso{ margin-bottom:10px; padding:8px 10px; font-size:0.74rem; line-height:1.4; } }
  @media (max-width:700px){ .dm-acesso-bar{ margin:0 12px 8px; } }
  .btn[hidden]{ display:none; } /* .btn define display e anularia o atributo hidden (ex.: "Ativar avisos", só da equipe) */
  /* Termos no formulário de pedido, respostas rápidas (⚡) e o painel admin delas */
  .termos-aceite{ display:flex; align-items:flex-start; gap:8px; margin:0 0 12px; font-size:0.86rem; color:var(--ink-2); cursor:pointer; line-height:1.45; }
  .termos-aceite[hidden]{ display:none; }
  .termos-aceite input{ margin-top:3px; flex-shrink:0; accent-color:var(--lilac); }
  .termos-aceite a{ color:var(--lilac); }
  .termos-card h3{ font-size:1rem; margin:22px 0 6px; color:var(--ink-1); }
  .termos-card p, .termos-card li{ font-size:0.9rem; line-height:1.65; color:var(--ink-2); }
  .termos-card ul{ margin:6px 0; padding-left:20px; }
  .termos-versao{ margin:-6px 0 6px; font-family:'JetBrains Mono', monospace; font-size:0.74rem; color:var(--ink-3); }
  .termos-intro{ margin:0 0 4px; }
  .termos-rodape{ margin-top:26px; padding-top:14px; border-top:1px solid var(--glass-border); font-size:0.82rem !important; color:var(--ink-3) !important; }
  #staffComposer{ position:relative; }
  .dm-respostas{ position:absolute; left:20px; right:20px; bottom:calc(100% - 8px); max-height:280px; overflow-y:auto; padding:6px; background:var(--surface-hi); border:1px solid var(--glass-border); border-radius:12px; box-shadow:0 12px 30px var(--shadow); z-index:30; }
  .dm-respostas[hidden]{ display:none; }
  .dm-respostas .dm-resposta{ display:flex; flex-direction:column; gap:2px; width:100%; text-align:left; padding:8px 10px; border:none; border-radius:8px; background:none; color:var(--ink-2); cursor:pointer; font-family:inherit; }
  .dm-respostas .dm-resposta:hover{ background:var(--tint-hover); }
  .dm-respostas .dm-resposta strong{ font-size:0.88rem; color:var(--ink-1); }
  .dm-respostas .dm-resposta span{ font-size:0.76rem; color:var(--ink-3); overflow-wrap:anywhere; }
  .resp-novo{ display:flex; flex-direction:column; gap:8px; }
  .resp-novo input, .resp-novo textarea, .resp-item input, .resp-item textarea{ background:var(--field-bg); border:1px solid var(--glass-border); border-radius:8px; padding:8px 10px; color:var(--ink-1); font-family:inherit; font-size:0.88rem; width:100%; box-sizing:border-box; resize:vertical; }
  .resp-novo .btn{ align-self:flex-start; }
  .resp-item{ display:flex; flex-direction:column; gap:8px; padding:12px 0; border-bottom:1px solid var(--glass-border); }
  .resp-acoes{ display:flex; gap:8px; flex-wrap:wrap; }
  /* Desempenho e Relatório (admin) + "Meu desempenho" (Minha Conta) */
  .desemp-card{ margin-bottom:14px; padding:14px 16px; border:1px solid var(--glass-border); border-radius:12px; background:var(--row-bg); }
  .desemp-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; font-size:1rem; }
  .desemp-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
  .desemp-metrica{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:10px; background:var(--tint); border:1px solid var(--glass-border); min-width:0; }
  .desemp-metrica strong{ font-size:1.15rem; color:var(--ink-1); overflow-wrap:anywhere; }
  .desemp-rotulo{ font-size:0.72rem; color:var(--ink-3); letter-spacing:0.03em; }
  .desemp-detalhe{ font-size:0.72rem; color:var(--ink-3); }
  .desemp-vazio{ font-size:0.85rem; color:var(--ink-3); }
  .ajuste-form{ display:grid; grid-template-columns:minmax(120px, 1fr) 130px minmax(160px, 2fr) auto; gap:8px; margin-bottom:12px; }
  .ajuste-form select, .ajuste-form input{ min-width:0; background:var(--field-bg); border:1px solid var(--glass-border); border-radius:8px; padding:8px 10px; color:var(--ink-1); font-family:inherit; font-size:0.85rem; }
  .ajuste-linha{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 4px; border-bottom:1px solid var(--glass-border); font-size:0.84rem; color:var(--ink-2); }
  .rel-resumo{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px; margin-bottom:12px; }
  .rel-card{ display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:12px; background:var(--tint); border:1px solid var(--glass-border); }
  .rel-card strong{ font-size:1.25rem; color:var(--ink-1); }
  .rel-linha{ margin:6px 0; font-size:0.84rem; color:var(--ink-2); display:flex; gap:6px 10px; flex-wrap:wrap; align-items:center; }
  .rel-chip{ padding:3px 10px; border-radius:999px; background:var(--tint); border:1px solid var(--glass-border); font-size:0.8rem; }
  .com-linha{ display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; padding:10px 4px; border-bottom:1px solid var(--glass-border); font-size:0.88rem; color:var(--ink-2); }
  .com-valores{ display:flex; align-items:center; gap:6px 14px; flex-wrap:wrap; }
  .audit-row.rel-pag{ grid-template-columns:130px minmax(0, 1.4fr) 80px minmax(0, 1fr); }
  .rel-export{ display:flex; gap:10px; flex-wrap:wrap; }
  .grafico-wrap{ width:100%; overflow-x:auto; }
  .grafico{ display:block; width:100%; height:auto; min-width:320px; max-width:640px; }
  .chart-grid{ stroke:var(--glass-border); stroke-width:1; }
  .chart-txt{ fill:var(--ink-3); font-family:'JetBrains Mono', monospace; font-size:10px; }
  .chart-bar{ fill:var(--lilac); }
  .chart-bar-2{ fill:var(--gold-hi); }
  .chart-legenda{ font-size:0.72rem; font-weight:400; color:var(--ink-3); margin-left:10px; }
  .chart-bar-sw, .chart-bar2-sw{ display:inline-block; width:10px; height:10px; border-radius:2px; margin:0 3px 0 8px; vertical-align:middle; }
  .chart-bar-sw{ background:var(--lilac); }
  .chart-bar2-sw{ background:var(--gold-hi); }
  @media (max-width:700px){
    .ajuste-form{ grid-template-columns:1fr 1fr; }
    .ajuste-form input[type="text"], .ajuste-form button{ grid-column:1 / -1; }
    .audit-row.rel-pag{ grid-template-columns:1fr 1fr; }
  }
  /* Não lidas: ticket com novidade fica em negrito e ganha o selo com a contagem (.nav-badge) */
  .dm-channel.has-unread .dm-channel-name{ font-weight:700; color:var(--ink-1); }
  .dm-unread{ flex-shrink:0; }
  /* Anexos (prints e comprovantes): botão 📎, prévia antes de enviar, miniatura no chat e imagem ampliada */
  .dm-attach-btn{ flex-shrink:0; align-self:center; background:none; border:1px solid transparent; border-radius:8px; padding:4px 7px; cursor:pointer; font-size:1rem; line-height:1; opacity:0.6; }
  .dm-attach-btn:hover{ opacity:1; background:var(--tint-hover); }
  .dm-anexos-previa{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 8px; }
  .dm-anexos-previa[hidden]{ display:none; }
  .dm-previa-item{ position:relative; width:64px; height:64px; border-radius:10px; overflow:hidden; border:1px solid var(--glass-border); background:var(--tint); }
  .dm-previa-item img{ width:100%; height:100%; object-fit:cover; display:block; }
  .dm-previa-x{ position:absolute; top:2px; right:2px; width:20px; height:20px; padding:0; border-radius:50%; border:none; background:rgba(0,0,0,0.7); color:#fff; font-size:0.68rem; line-height:1; cursor:pointer; }
  .is-dragover{ outline:2px dashed var(--lilac); outline-offset:-8px; }
  .dm-anexo{ display:flex; flex-direction:column; gap:6px; max-width:320px; }
  .dm-anexo-thumb{ display:block; padding:0; line-height:0; border:1px solid var(--glass-border); border-radius:12px; overflow:hidden; background:var(--tint); cursor:zoom-in; }
  .dm-anexo-thumb img{ display:block; max-width:100%; max-height:240px; min-width:80px; min-height:60px; object-fit:contain; }
  .dm-anexo-meta{ font-size:0.72rem; color:var(--ink-3); overflow-wrap:anywhere; }
  .lightbox{ position:fixed; inset:0; z-index:150; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:16px; background:rgba(5,8,12,0.9); }
  .lightbox[hidden]{ display:none; }
  .lightbox img{ max-width:96vw; max-height:82vh; object-fit:contain; border-radius:8px; background:#0b0f14; }
  .lightbox-barra{ display:flex; align-items:center; gap:10px; max-width:96vw; font-size:0.85rem; color:#e8e6f2; }
  .lightbox-barra span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* Arquivos que não são imagem: vídeo e áudio tocam na conversa; PDF/texto/compactados viram um botão de baixar */
  .dm-previa-item.is-arquivo{ width:auto; max-width:180px; height:auto; min-height:44px; padding:6px 28px 6px 8px; display:flex; align-items:center; }
  .dm-previa-arq{ display:flex; align-items:center; gap:6px; min-width:0; }
  .dm-previa-arq b{ font-size:1.15rem; font-weight:400; flex-shrink:0; }
  .dm-previa-arq em{ font-style:normal; font-size:0.75rem; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dm-anexo-midia{ max-width:360px; }
  .dm-anexo-midia video{ display:block; width:100%; max-height:300px; border:1px solid var(--glass-border); border-radius:12px; background:#000; }
  .dm-anexo-midia audio{ display:block; width:100%; min-width:220px; }
  .dm-anexo-baixar{ font-size:0.74rem; color:var(--lilac); text-decoration:none; align-self:flex-start; }
  .dm-anexo-baixar:hover{ text-decoration:underline; }
  .dm-anexo-arquivo{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--glass-border); border-radius:12px; background:var(--tint); color:var(--ink-1); text-decoration:none; min-width:0; }
  .dm-anexo-arquivo:hover{ background:var(--tint-hover); }
  .dm-anexo-arquivo-ic{ font-size:1.6rem; line-height:1; flex-shrink:0; }
  .dm-anexo-arquivo-tx{ display:flex; flex-direction:column; min-width:0; }
  .dm-anexo-arquivo-tx strong{ font-size:0.84rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dm-anexo-arquivo-tx small{ font-size:0.72rem; color:var(--ink-3); }
  .dm-anexo-aviso{ font-size:0.68rem; color:var(--ink-3); }
  /* Links na conversa e o cartão de pré-visualização (nome do site, título, trecho e capa) */
  .dm-link{ color:var(--lilac); text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere; }
  .dm-previas{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
  .dm-previa-card{ display:flex; flex-direction:column; gap:3px; max-width:420px; padding:10px 12px; border:1px solid var(--glass-border); border-left:3px solid var(--lilac); border-radius:10px; background:var(--tint); color:var(--ink-1); text-decoration:none; overflow:hidden; }
  .dm-previa-card:hover{ background:var(--tint-hover); }
  .dm-previa-card.is-imagem{ padding:0; border-left-width:1px; }
  .dm-previa-site{ font-size:0.7rem; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dm-previa-titulo{ font-size:0.88rem; font-weight:600; color:var(--lilac); overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .dm-previa-desc{ font-size:0.78rem; color:var(--ink-2); overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .dm-previa-capa{ display:block; width:100%; max-height:220px; margin-top:6px; border-radius:8px; object-fit:cover; background:var(--tint); }
  .dm-previa-card.is-imagem .dm-previa-capa{ margin-top:0; border-radius:10px; object-fit:contain; }
  /* Fila de pedidos pagos (equipe): cartão compacto com o resumo e o botão Assumir */
  .dm-fila-item{ margin:0 8px 8px; padding:10px 12px; border:1px solid var(--glass-border); border-radius:10px; background:var(--row-bg); display:flex; flex-direction:column; gap:6px; }
  .dm-fila-item.is-urgente{ border-color:rgba(255,107,107,0.55); }
  .dm-fila-top{ font-size:0.84rem; color:var(--ink-1); overflow-wrap:anywhere; }
  .dm-fila-meta{ font-size:0.74rem; color:var(--ink-3); }
  .dm-fila-item .btn{ align-self:flex-start; }
  /* Serviços anunciados (release S): mesmo cartão da fila + cargo/tipo, observações, link da imagem e as ações */
  .dm-label-acoes{ display:flex; align-items:center; gap:4px; }
  .dm-carga{ margin:8px 10px 0; padding:6px 10px; border-radius:8px; font-size:0.74rem; color:var(--ink-2); background:var(--tint); border:1px solid var(--glass-border); }
  .dm-carga[hidden]{ display:none; }
  .dm-carga.is-limite{ color:var(--danger); border-color:rgba(224,114,138,0.45); }
  .dm-anuncio.is-assumido{ opacity:0.82; }
  .dm-anuncio.is-novo{ border-color:var(--lilac); box-shadow:0 0 0 2px var(--lilac); }
  .dm-anuncio-obs{ font-size:0.76rem; color:var(--ink-2); white-space:pre-line; overflow-wrap:anywhere; max-height:7.5em; overflow:auto; }
  .dm-anuncio-img{ font-size:0.76rem; color:var(--lilac); }
  .dm-anuncio-frase{ font-size:0.7rem; color:var(--ink-3); font-style:italic; }
  .dm-anuncio-acoes{ display:flex; flex-wrap:wrap; gap:6px; }
  .dm-anuncio-acoes .btn{ align-self:auto; }
  /* Anúncio a partir de um atendimento (release T): número do atendimento, miniaturas no cartão e a escolha das imagens no modal */
  .field[hidden]{ display:none; } /* .field define display:flex e anularia o atributo hidden (as imagens/detalhes do atendimento no modal de anúncio) */
  .dm-anuncio-ticket{ color:var(--lilac); font-weight:600; }
  .dm-anuncio-thumbs{ display:flex; flex-wrap:wrap; gap:6px; }
  .dm-anuncio-thumbs .dm-anexo-thumb{ border-radius:8px; }
  .dm-anuncio-thumbs .dm-anexo-thumb img{ max-width:96px; max-height:72px; min-width:48px; min-height:48px; }
  .dm-anuncio-imgs{ display:flex; flex-wrap:wrap; gap:8px; }
  .dm-anuncio-img-opt{ position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; padding:4px; border:1px solid var(--glass-border); border-radius:10px; background:var(--tint); cursor:pointer; }
  .dm-anuncio-img-opt input{ position:absolute; top:8px; left:8px; z-index:1; width:16px; height:16px; accent-color:var(--lilac); cursor:pointer; }
  .dm-anuncio-img-opt img{ display:block; width:96px; height:72px; object-fit:cover; border-radius:7px; }
  .dm-anuncio-img-opt em{ font-size:0.68rem; font-style:normal; color:var(--ink-3); }
  .dm-anuncio-img-opt:has(input:not(:checked)) img{ opacity:0.4; }
  .dm-check{ display:flex; gap:8px; align-items:flex-start; font-size:0.82rem; cursor:pointer; line-height:1.4; }
  .dm-check input{ margin-top:3px; accent-color:var(--lilac); }
  .anuncio-ticket-info{ margin:-2px 0 12px; padding:8px 10px; border-radius:10px; background:var(--tint); border:1px solid var(--glass-border); }
  /* Nota interna: mensagem em amarelo (só a equipe vê) e o botão 📝 do campo de texto */
  .dm-message.is-nota .dm-message-body{ background:rgba(234,199,105,0.10); border:1px solid rgba(234,199,105,0.35); border-radius:10px; padding:6px 12px 8px; }
  .dm-nota-tag{ font-family:'JetBrains Mono', monospace; font-size:0.6rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-hi); }
  .dm-note-toggle{ flex-shrink:0; align-self:center; background:none; border:1px solid transparent; border-radius:8px; padding:4px 7px; cursor:pointer; font-size:1rem; line-height:1; opacity:0.55; }
  .dm-note-toggle:hover{ opacity:1; background:var(--tint-hover); }
  .dm-note-toggle[aria-pressed="true"]{ opacity:1; border-color:rgba(234,199,105,0.6); background:rgba(234,199,105,0.14); }
  .dm-composer-box.is-nota{ border-color:rgba(234,199,105,0.6); background:rgba(234,199,105,0.07); }
  /* Tempo de espera do cliente: borda na lista (âmbar > 30 min, vermelha > 2 h) e selo no cabeçalho */
  .dm-channel.sla-warn{ box-shadow:inset 3px 0 0 var(--gold-hi); }
  .dm-channel.sla-crit{ box-shadow:inset 3px 0 0 var(--danger); }
  .dm-sla{ font-weight:500; font-size:0.72rem; padding:2px 8px; border-radius:999px; border:1px solid var(--glass-border); color:var(--ink-2); white-space:nowrap; }
  .dm-sla.sla-warn{ color:var(--gold-hi); border-color:rgba(234,199,105,0.45); }
  .dm-sla.sla-crit{ color:var(--danger); border-color:rgba(255,107,107,0.5); }
  #urgenteBtn.is-on{ color:var(--danger); border-color:rgba(255,107,107,0.55); }
  .dm-new-actions .btn{ white-space:nowrap; }
  /* Celular: o título do ticket ocupa a 1ª linha do cabeçalho; selo de status e botões descem pra 2ª (antes o selo espremia o título até sumir) */
  @media (max-width:700px){
    #customerChat .dm-main-header, #staffView .dm-main-header{ flex-wrap:wrap; padding:12px 16px; row-gap:8px; }
    #customerChat .dm-main-header-title{ flex:1 1 calc(100% - 30px); }
    #staffView .dm-main-header-title{ flex:1 1 calc(100% - 70px); white-space:normal; }
    /* Equipe no celular: tela cheia pra lista OU pro ticket aberto, com "←" no cabeçalho pra voltar */
    #staffView.dm-shell{ flex-direction:column; }
    #staffView .dm-sidebar{ width:100%; flex:1; min-height:0; border-right:none; }
    #staffView .dm-main{ display:none; flex:1; min-height:0; }
    #staffView.staff-chat-open .dm-sidebar{ display:none; }
    #staffView.staff-chat-open .dm-main{ display:flex; }
    #staffView .dm-back-btn{ display:inline-flex; }
    /* os botões do cabeçalho do atendimento (transcrição, assumir, concluir, urgente, anunciar, encerrar, cobrar, menu) quebram em linhas em vez de estourar a tela */
    #staffView .dm-header-actions{ margin-left:auto; max-width:100%; flex-wrap:wrap; justify-content:flex-end; }
  }

  .dm-main{ flex:1; display:flex; flex-direction:column; min-width:0; }
  .dm-main-header{ display:flex; align-items:center; gap:8px; padding:14px 20px; border-bottom:1px solid var(--glass-border); font-weight:600; color:var(--ink-1); flex-shrink:0; }
  .dm-main-header .hash{ color:var(--ink-3); }
  .dm-main-header-title{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dm-assigned-badge{ font-weight:400; font-size:0.78rem; color:var(--ink-3); margin-left:6px; }

  .dm-header-actions{ display:flex; gap:4px; flex-shrink:0; }
  .dm-header-action{ position:relative; }
  .dm-kebab-btn{ background:none; border:none; color:var(--ink-3); cursor:pointer; font-size:1.2rem; line-height:1; padding:6px 10px; border-radius:6px; }
  .dm-kebab-btn:hover{ background:var(--tint-hover); color:var(--ink-1); }
  .dm-dropdown{ position:absolute; top:100%; right:0; margin-top:6px; background:var(--glass-hi); border:1px solid var(--glass-border); border-radius:10px; padding:6px; min-width:220px; max-height:280px; overflow-y:auto; box-shadow:0 12px 30px var(--shadow); z-index:20; }
  .dm-dropdown-label{ font-family:'JetBrains Mono', monospace; font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-3); padding:6px 10px 4px; }
  .dm-dropdown-sep{ margin-top:6px; padding-top:10px; border-top:1px solid var(--glass-border); }
  .dm-dropdown-item{ display:block; width:100%; text-align:left; padding:8px 10px; border-radius:6px; background:none; border:none; color:var(--ink-2); font-size:0.86rem; cursor:pointer; font-family:inherit; }
  .dm-dropdown-item:hover{ background:rgba(124,92,255,0.14); color:var(--ink-1); }
  .dm-dropdown-item.danger{ color:var(--danger); }
  .dm-dropdown-item.active{ color:var(--lilac); font-weight:600; }
  .dm-main-empty{ flex:1; display:flex; align-items:center; justify-content:center; color:var(--ink-3); font-size:0.9rem; text-align:center; padding:20px; }

  .dm-messages{ will-change:scroll-position; flex:1; overflow-y:auto; padding:18px 22px; display:flex; flex-direction:column; gap:16px; }
  .dm-message{ display:flex; gap:12px; }
  .dm-avatar{ width:38px; height:38px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.9rem; color:var(--on-accent); background:linear-gradient(135deg, var(--lilac), var(--lilac-deep)); }
  .dm-message-body{ min-width:0; }
  .dm-message-head{ display:flex; align-items:baseline; gap:8px; margin-bottom:2px; }
  .dm-message-author{ font-weight:600; font-size:0.9rem; color:var(--ink-1); }
  .dm-message-time{ font-size:0.7rem; color:var(--ink-3); }
  .dm-message-text{ font-size:0.92rem; color:var(--ink-2); white-space:pre-wrap; line-height:1.5; word-break:break-word; }

  .dm-composer{ padding:14px 20px 20px; flex-shrink:0; }
  .dm-composer-box{ display:flex; align-items:flex-end; gap:10px; background:var(--glass-hi); border:1px solid var(--glass-border); border-radius:12px; padding:10px 14px; }
  .dm-composer-box textarea{ flex:1; background:none; border:none; outline:none; resize:none; color:var(--ink-1); font-family:'Work Sans', sans-serif; font-size:0.92rem; max-height:140px; }
  .dm-composer-send{ flex-shrink:0; width:34px; height:34px; border-radius:8px; border:none; background:var(--lilac); color:var(--on-accent); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1rem; }
  .dm-composer-send:hover{ background:var(--lilac-deep); }
  .dm-composer-send:disabled{ opacity:0.5; cursor:not-allowed; }

  .dm-payment-card{ background:var(--glass-hi); border:1px solid var(--glass-border); border-radius:12px; padding:14px 16px; max-width:280px; display:flex; flex-direction:column; gap:8px; }
  .dm-payment-title{ font-weight:600; font-size:0.88rem; color:var(--ink-1); }
  .dm-payment-valor{ font-size:1.3rem; font-weight:700; color:var(--lilac); font-family:'JetBrains Mono', monospace; }
  .dm-payment-cupom{ font-size:0.78rem; color:var(--gold-hi); line-height:1.4; }
  /* Cupons (release AH): aviso do campo no pedido, linha do cupom na cobrança do admin e o painel "🎟️ Cupons" */
  .cupom-msg{ margin-top:6px; font-size:0.8rem; line-height:1.4; }
  .cupom-msg[hidden]{ display:none; }
  .cupom-msg.is-ok{ color:var(--ok); }
  .cupom-msg.is-erro{ color:var(--danger); }
  .charge-cupom[hidden]{ display:none; }
  .charge-cupom-check{ display:flex; gap:8px; align-items:flex-start; font-size:0.82rem; line-height:1.4; cursor:pointer; }
  .charge-cupom-check input{ margin-top:3px; flex-shrink:0; }
  .charge-cupom-previa{ margin-top:6px; font-size:0.78rem; color:var(--ink-3); line-height:1.4; }
  .cp-lista{ display:flex; flex-direction:column; gap:10px; }
  .cp-linha{ display:flex; flex-direction:column; gap:6px; padding:12px 14px; border:1px solid var(--glass-border); border-radius:12px; background:var(--tint); }
  .cp-linha.is-inativo{ opacity:0.7; }
  .cp-topo{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
  .cp-codigo{ font-family:'JetBrains Mono', monospace; font-weight:700; color:var(--ink-1); letter-spacing:0.04em; overflow-wrap:anywhere; }
  .cp-desc{ color:var(--lilac); font-weight:600; }
  .cp-chip{ margin-left:auto; padding:2px 10px; border-radius:999px; border:1px solid var(--glass-border); font-size:0.7rem; font-weight:600; white-space:nowrap; }
  .cp-chip.s-ok{ color:var(--ok); border-color:var(--ok-border); background:var(--ok-bg); }
  .cp-chip.s-info{ color:var(--gold-hi); }
  .cp-chip.s-off{ color:var(--ink-3); }
  .cp-meta{ display:flex; flex-wrap:wrap; gap:4px 16px; font-size:0.8rem; color:var(--ink-2); }
  .cp-regras{ font-size:0.76rem; color:var(--ink-3); line-height:1.45; overflow-wrap:anywhere; }
  .cp-acoes{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
  .cp-vazio{ margin:0; font-size:0.86rem; color:var(--ink-3); }
  .cp-aviso{ margin:0 0 12px; padding:10px 12px; border-radius:10px; background:var(--tint); border:1px solid var(--glass-border); font-size:0.8rem; line-height:1.5; color:var(--ink-2); }
  .cp-codigo-row{ display:flex; gap:8px; }
  .cp-codigo-row input{ flex:1; min-width:0; }
  .ins-form .cp-largo{ grid-column:1 / -1; }
  .cp-marcas{ display:flex; flex-wrap:wrap; gap:6px 16px; }
  .cp-marca{ display:inline-flex; align-items:center; gap:7px; font-size:0.84rem; color:var(--ink-2); cursor:pointer; }
  @media (max-width:560px){ .cp-chip{ margin-left:0; } #cupomEditor input, #cupomEditor select{ font-size:16px; } }
  /* Programas automáticos de cupom (release AI): indicação e fidelidade no painel do admin e os créditos no formulário do pedido */
  .pg-card{ margin-top:14px; }
  .pg-liga{ display:flex; align-items:center; gap:8px; font-size:0.85rem; cursor:pointer; margin-left:auto; }
  .pg-ajuda{ font-size:0.82rem; color:var(--ink-3); line-height:1.55; margin:-8px 0 12px; }
  .pg-ajuda code{ font-family:'JetBrains Mono', monospace; color:var(--ink-1); }
  .pg-card .pg-desconto{ display:flex; gap:8px; align-items:stretch; }
  .pg-card .pg-desconto select{ width:84px; flex:0 0 84px; }
  .pg-card .pg-desconto input{ width:auto; flex:1 1 0; min-width:0; }
  .pg-numeros{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:12px; font-size:0.8rem; color:var(--ink-2); }
  .pg-top{ margin:4px 0 0; padding-left:18px; font-size:0.82rem; color:var(--ink-2); line-height:1.6; }
  @media (max-width:560px){ .pg-card input, .pg-card select{ font-size:16px; } }
  .cupom-creditos{ margin-top:8px; display:flex; flex-direction:column; gap:8px; font-size:0.82rem; line-height:1.45; color:var(--ink-2); }
  .cupom-creditos[hidden]{ display:none; }
  .cr-chip{ align-self:flex-start; padding:8px 14px; border-radius:999px; border:1px solid var(--ok-border); background:var(--ok-bg); color:var(--ok); font:inherit; font-weight:600; cursor:pointer; text-align:left; }
  .cr-chip:hover{ filter:brightness(1.1); }
  .cr-codigo{ font-family:'JetBrains Mono', monospace; letter-spacing:0.04em; color:var(--ink-1); overflow-wrap:anywhere; }
  .cr-copiar{ margin-left:6px; padding:2px 10px; border-radius:999px; border:1px solid var(--glass-border); background:var(--tint); color:var(--ink-2); font:inherit; font-size:0.74rem; cursor:pointer; }
  .cr-ajuda{ display:block; margin-top:2px; color:var(--ink-3); font-size:0.78rem; }
  /* Barra do assistente automático (pedido de ajuda): fica no fim do chat do cliente enquanto a IA responde */
  .dm-assistente-barra{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:14px 0 4px; padding:10px 14px; border:1px solid var(--glass-border); border-radius:12px; background:var(--tint); font-size:0.82rem; color:var(--ink-2); line-height:1.45; }
  .dm-assistente-barra span{ flex:1 1 220px; }
  @media (max-width:560px){ .dm-assistente-btn{ width:100%; } }
  /* Botões de atalho na resposta do assistente (Termos, Novo pedido, Preços…) */
  .dm-assistente-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
  .dm-assistente-link{ text-decoration:none; white-space:normal; }
  @media (max-width:560px){ .dm-assistente-link{ flex:1 1 100%; justify-content:center; text-align:center; } }
  .dm-payment-qr{ width:160px; height:160px; border-radius:8px; align-self:center; background:#fff; padding:6px; }
  .dm-payment-copiacola{ width:100%; font-family:'JetBrains Mono', monospace; font-size:0.68rem; background:var(--field-bg); border:1px solid var(--glass-border); border-radius:6px; padding:6px 8px; resize:none; color:var(--ink-1); height:50px; }
  .dm-payment-status{ font-size:0.78rem; color:var(--ink-3); }
  .dm-payment-status.ok{ color:var(--ok); font-weight:600; }
  .dm-payment-approved{ padding:10px 14px; background:var(--ok-bg); border:1px solid var(--ok-border); border-radius:10px; color:var(--ok); font-weight:600; font-size:0.88rem; max-width:320px; }
  .dm-charge-form{ padding:4px 10px 8px; }
  .dm-charge-form .field{ margin-bottom:10px; }
  .dm-charge-form .field label{ font-size:0.6rem; }

  /* Pedido do cliente: cartão dentro da conversa (type:"pedido") + formulário em modal ("Entrar em Contato") */
  .dm-pedido-card{ background:var(--glass-hi); border:1px solid var(--glass-border); border-radius:12px; padding:14px 16px; max-width:420px; display:flex; flex-direction:column; gap:10px; }
  .dm-pedido-title{ font-weight:600; font-size:0.88rem; color:var(--ink-1); }
  .dm-pedido-list{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:0.86rem; align-items:baseline; }
  .dm-pedido-list dt{ font-family:'JetBrains Mono', monospace; font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-3); }
  .dm-pedido-list dd{ margin:0; color:var(--ink-1); overflow-wrap:anywhere; white-space:pre-wrap; }
  .pedido-sub{ font-size:0.82rem; color:var(--ink-3); }
  .pedido-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
  @media (max-width:560px){ .pedido-form-grid{ grid-template-columns:1fr; } }
  .field textarea.pedido-detalhes{ font-family:'Work Sans', sans-serif; font-size:0.9rem; line-height:1.5; }
  .pedido-erro{ color:var(--danger); font-size:0.82rem; margin:0 0 12px; }
  .pedido-erro[hidden]{ display:none; }
  .pedido-actions{ display:flex; gap:10px; flex-wrap:wrap; }

  /* Encerrar atendimento: linha de sistema no histórico, barra "encerrado" no lugar do campo de texto, conversa
     encerrada na lista da equipe e o texto do modal de confirmação */
  .dm-system-line{ display:flex; align-items:center; gap:12px; font-size:0.78rem; color:var(--ink-3); }
  .dm-system-line::before, .dm-system-line::after{ content:""; flex:1; height:1px; background:var(--glass-border); }
  .dm-closed-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; flex-shrink:0; margin:0 20px 20px; padding:12px 16px; background:var(--glass-hi); border:1px solid var(--glass-border); border-radius:12px; font-size:0.88rem; color:var(--ink-2); }
  .dm-closed-bar strong{ color:var(--ink-1); }
  .dm-closed-actions{ display:flex; gap:8px; flex-wrap:wrap; }
  .dm-channel.is-closed{ opacity:0.6; }
  .dm-channel.is-closed.active{ opacity:1; }
  .dm-channel .lock{ flex-shrink:0; font-size:0.8rem; }
  .confirm-text{ margin:0 0 20px; font-size:0.92rem; line-height:1.6; color:var(--ink-2); }

  @media (max-width:768px){ .dm-sidebar{ width:180px; } .dm-channel-name{ font-size:0.82rem; } }

  /* ================= Minha Conta ================= */
  .account-wrap{ position:relative; z-index:1; max-width:640px; margin:0 auto; padding:40px clamp(20px,5vw,40px) 80px; display:flex; flex-direction:column; gap:20px; }

  .account-header{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
  .account-identity{ display:flex; align-items:center; gap:14px; min-width:0; }
  .account-avatar{
    width:56px; height:56px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:1.3rem; color:var(--on-accent);
    background:linear-gradient(135deg, var(--lilac), var(--lilac-deep));
  }
  .account-header-text{ min-width:0; }
  .account-header-text h2{ font-family:'Cinzel', serif; font-size:1.2rem; margin-bottom:4px; }
  .account-header-text p{ margin:0 0 8px; font-size:0.85rem; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  .account-shortcuts{ display:flex; flex-wrap:wrap; gap:10px; }
  .account-header-acoes{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

  /* Abas da conta: uma seção por vez (Perfil · Desempenho · Insígnias · Discord · Administração). No celular a barra rola de lado em vez de quebrar. */
  .conta-abas{ display:flex; gap:8px; overflow-x:auto; padding:2px 0 6px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .conta-abas::-webkit-scrollbar{ display:none; }
  .conta-abas .tab-pill{ flex:0 0 auto; white-space:nowrap; }
  .conta-abas .tab-pill[hidden]{ display:none; }
  .conta-oculto{ display:none !important; }

  /* ================= Novidades e ofertas (página inicial) ================= */
  #novidades{ padding:56px 0 16px; }
  #novidades[hidden]{ display:none; }
  .nv-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:16px; }
  .nv-card{ position:relative; display:flex; flex-direction:column; gap:10px; padding:20px; border-radius:16px; border:1px solid var(--glass-border); background:var(--tint); backdrop-filter:blur(6px); transition:transform .18s ease, border-color .18s ease; }
  .nv-card:hover{ transform:translateY(-2px); border-color:var(--lilac); }
  .nv-card::before{ content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0; background:var(--lilac); opacity:.7; }
  .nv-card.nv-t-cupom::before{ background:var(--gold-hi); }
  .nv-card.nv-t-servico::before{ background:#57f287; }
  .nv-card.nv-t-aviso::before{ background:#f0b232; }
  .nv-topo{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
  .nv-tag{ font-family:'JetBrains Mono', monospace; font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3); }
  .nv-ate{ font-size:0.72rem; color:var(--ink-3); }
  .nv-titulo{ margin:0; font-family:'Cinzel', serif; font-size:1.08rem; line-height:1.3; color:var(--ink-1); }
  .nv-texto{ margin:0; font-size:0.9rem; line-height:1.55; color:var(--ink-2); overflow-wrap:anywhere; }
  .nv-cupom-linha{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .nv-codigo{ font-family:'JetBrains Mono', monospace; font-size:1rem; letter-spacing:0.08em; padding:6px 12px; border-radius:10px; border:1px dashed var(--gold-hi); color:var(--gold-hi); background:var(--tint); }
  .nv-cupom-desc{ margin:0; font-size:0.8rem; color:var(--ink-3); }
  .nv-link{ align-self:flex-start; margin-top:auto; text-decoration:none; }
  /* faixa fina no topo da página: um aviso de uma linha, dispensável */
  .nv-faixa{ position:relative; z-index:5; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; padding:8px 44px 8px 16px; font-size:0.85rem; color:var(--ink-1); background:linear-gradient(90deg, rgba(124,92,255,0.22), rgba(201,166,255,0.18)); border-bottom:1px solid var(--glass-border); }
  .nv-faixa[hidden]{ display:none; }
  .nv-faixa-texto{ font-weight:600; }
  .nv-faixa-cod{ font-family:'JetBrains Mono', monospace; font-size:0.8rem; letter-spacing:0.06em; padding:2px 10px; border-radius:8px; border:1px dashed var(--gold-hi); color:var(--gold-hi); background:transparent; cursor:pointer; }
  .nv-faixa-link{ color:var(--ink-1); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
  .nv-faixa-x{ position:absolute; right:10px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; border:0; background:transparent; color:var(--ink-2); font-size:1.2rem; line-height:1; cursor:pointer; }
  .nv-faixa-x:hover{ background:var(--tint-hover); color:var(--ink-1); }
  @media (max-width:640px){
    /* celular: os cartões viram uma fileira que desliza de lado, cada um com quase a largura da tela */
    .nv-grid{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; padding-bottom:6px; scrollbar-width:none; }
    .nv-grid::-webkit-scrollbar{ display:none; }
    .nv-card{ flex:0 0 82%; scroll-snap-align:start; }
    #novidades{ padding:40px 0 8px; }
  }

  .profile-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; margin-bottom:4px; }
  @media (max-width:560px){ .profile-grid{ grid-template-columns:1fr; } }

  /* ================= Admin panel ================= */
  .admin-body{ min-height:100vh; }

  /* Barra lateral de categorias (Valores/Atendimento/Contas/Status) — reaproveita o shell de
     mensagens.html (.dm-topbar/.dm-shell/.dm-sidebar/.dm-channel) em vez de inventar layout novo. */
  .admin-main{ overflow-y:auto; padding:28px clamp(20px,4vw,40px) 60px; }
  /* padding:0 anula o `section{ padding:100px 0 }` do site público, que vazava pros painéis (são <section>) */
  .admin-panel{ max-width:760px; padding:0; }
  /* Celular: a barra lateral fixa de 180px deixava ~195px pro conteúdo (o cartão de pedido virava uma letra por linha).
     No admin, abaixo de 700px o menu vira uma faixa de abas rolável no topo e o conteúdo usa a largura toda. */
  @media (max-width:700px){
    .admin-body .dm-shell{ flex-direction:column; height:auto; min-height:calc(100vh - 53px); }
    .admin-body .dm-sidebar, #customerView .dm-sidebar{ flex-direction:row; align-items:center; gap:6px; width:100%; padding:8px 12px; overflow-x:auto; overflow-y:hidden; border-right:none; border-bottom:1px solid var(--glass-border); }
    .admin-body .dm-sidebar .dm-sidebar-label, #customerView .dm-sidebar .dm-sidebar-label{ display:none; }
    .admin-body .dm-sidebar .dm-channel, #customerView .dm-sidebar .dm-channel{ width:auto; flex-shrink:0; white-space:nowrap; }
    .admin-body .dm-sidebar .nav-badge, #customerView .dm-sidebar .nav-badge{ margin-left:6px; }
    #customerTicketList, #customerView .dm-new-actions{ display:flex; gap:6px; flex-wrap:nowrap; padding:0; }
    #customerView .dm-sidebar > .dm-channel-empty{ display:none; }
    .admin-body .admin-main{ overflow-y:visible; padding:20px 16px 60px; }
    /* cliente: a faixa fica no topo e o chat ocupa o resto da altura (o scroll continua dentro das mensagens) */
    #customerView.dm-shell{ flex-direction:column; }
    #customerView .dm-main{ min-height:0; }
    /* painel do usuário na faixa: só o avatar, empurrado pra direita */
    .admin-body .user-panel-host, #customerView .user-panel-host{ position:static; margin:0 0 0 auto; flex-shrink:0; }
    .admin-body .user-panel, #customerView .user-panel{ padding:0; background:none; border-top:none; }
    .admin-body .user-info, #customerView .user-info, .admin-body .user-gear, #customerView .user-gear{ display:none; }
    .admin-body .user-panel-btn, #customerView .user-panel-btn{ width:auto; padding:2px; }
  }

  .categoria-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
  .categoria-row{ display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--glass-border); border-radius:8px; background:var(--row-bg); }
  .categoria-row .categoria-nome-input{ flex:1; background:var(--field-bg); border:1px solid var(--glass-border); border-radius:6px; padding:7px 9px; color:var(--ink-1); font-size:0.85rem; font-family:'Work Sans', sans-serif; }
  .categoria-row .categoria-nome-input:focus{ outline:none; border-color:var(--lilac); }
  .categoria-add-row{ display:flex; gap:8px; }
  .categoria-add-row input{ flex:1; min-width:0; }
  /* Auditoria: uma linha por evento (data · pessoa · ação · detalhe); no celular as colunas empilham */
  .audit-row{ display:grid; grid-template-columns:120px 170px 160px 1fr; gap:4px 10px; padding:7px 10px; border-bottom:1px solid var(--glass-border); font-size:0.78rem; color:var(--ink-2); align-items:baseline; }
  .audit-row:hover{ background:var(--tint-hover); }
  .audit-hora{ font-family:'JetBrains Mono', monospace; font-size:0.72rem; color:var(--ink-3); }
  .audit-acao{ font-family:'JetBrains Mono', monospace; font-size:0.74rem; color:var(--lilac); }
  .audit-detalhe{ overflow-wrap:anywhere; }
  @media (max-width:700px){ .audit-row{ grid-template-columns:1fr; } }
  .categoria-add-row input{ flex:1; background:var(--field-bg); border:1px solid var(--glass-border); border-radius:8px; padding:9px 12px; color:var(--ink-1); font-size:0.88rem; font-family:'Work Sans', sans-serif; }
  .categoria-add-row input:focus{ outline:none; border-color:var(--lilac); }

  /* Painel de pedidos (admin): cada pedido no mesmo cartão do chat + estado + botão que abre a conversa */
  .nav-badge{ margin-left:auto; min-width:20px; padding:0 7px; border-radius:999px; background:var(--lilac); color:var(--on-accent); font-size:0.7rem; font-weight:700; line-height:20px; text-align:center; }
  .nav-badge[hidden]{ display:none; }
  .pedido-item{ display:flex; flex-direction:column; gap:12px; margin-bottom:16px; padding:16px; border:1px solid var(--glass-border); border-radius:14px; background:linear-gradient(165deg, var(--glass-hi), var(--glass)); }
  .pedido-item-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .pedido-item-cliente{ font-weight:600; font-size:0.92rem; color:var(--ink-1); }
  .pedido-item-hora{ margin-right:auto; font-size:0.75rem; color:var(--ink-3); }
  .pedido-estado{ padding:3px 10px; border-radius:999px; border:1px solid; font-family:'JetBrains Mono', monospace; font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase; }
  .pedido-estado.aguardando{ color:var(--gold-hi); border-color:rgba(234,199,105,0.4); background:rgba(234,199,105,0.1); }
  .pedido-estado.atendimento{ color:var(--ok); border-color:var(--ok-border); background:var(--ok-bg); }
  .pedido-estado.encerrado{ color:var(--ink-3); border-color:var(--glass-border); background:var(--tint); }
  .pedido-item-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
  .pedido-item-info{ font-size:0.8rem; color:var(--ink-3); }
  .pedido-item.is-encerrado{ opacity:0.7; }

  /* Painel do usuário: canto inferior esquerdo da barra lateral (userpanel.js) */
  .user-panel-host{ position:sticky; bottom:0; margin:auto -8px 0; }
  .user-panel{ padding:8px; background:var(--surface); border-top:1px solid var(--glass-border); }
  .user-panel-btn{ display:flex; align-items:center; gap:10px; width:100%; padding:6px 8px; border-radius:8px; background:none; border:none; color:inherit; font-family:inherit; text-align:left; cursor:pointer; }
  .user-panel-btn:hover, .user-panel-btn[aria-expanded="true"]{ background:var(--tint-hover); }
  .user-panel-btn:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:2px; }
  .user-avatar{ width:34px; height:34px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.9rem; color:var(--on-accent); background:linear-gradient(135deg, var(--lilac), var(--lilac-deep)); }
  .user-info{ display:flex; flex-direction:column; flex:1; min-width:0; line-height:1.25; }
  .user-name{ font-weight:600; font-size:0.86rem; color:var(--ink-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .user-role{ font-size:0.7rem; color:var(--ink-3); }
  .user-gear{ flex-shrink:0; color:var(--ink-3); display:flex; }
  .user-gear svg{ width:18px; height:18px; }
  .user-panel-btn:hover .user-gear{ color:var(--ink-1); }
  .user-menu{ position:fixed; z-index:300; width:296px; max-width:calc(100vw - 16px); min-width:230px; padding:6px; background:var(--surface-hi); border:1px solid var(--glass-border); border-radius:10px; box-shadow:0 12px 30px var(--shadow); }
  .user-menu[hidden]{ display:none; }
  .user-menu-head{ display:flex; flex-direction:column; gap:2px; padding:8px 10px 10px; margin-bottom:4px; border-bottom:1px solid var(--glass-border); font-size:0.78rem; color:var(--ink-3); overflow-wrap:anywhere; }
  .user-menu-head strong{ color:var(--ink-1); font-size:0.9rem; }
  .user-menu-item{ display:flex; align-items:center; gap:9px; width:100%; padding:8px 10px; border-radius:6px; background:none; border:none; color:var(--ink-2); font-family:inherit; font-size:0.86rem; text-align:left; text-decoration:none; cursor:pointer; }
  .user-menu-item:hover{ background:var(--tint-hover); color:var(--ink-1); }
  .user-menu-item:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:-2px; }
  .user-menu-item.danger{ color:var(--danger); }
  .user-menu-icon{ width:18px; text-align:center; flex-shrink:0; }
  .user-menu-sep{ height:1px; margin:6px 0; background:var(--glass-border); }
  /* Disponibilidade da equipe (Disponível / Ocupado / Invisível) no topo do menu do perfil */
  .user-menu-status{ display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; padding:2px 4px 6px; }
  .user-menu-status button{ padding:7px 2px; border-radius:7px; border:1px solid var(--glass-border); background:none; color:var(--ink-2); font:inherit; font-size:0.72rem; text-align:center; cursor:pointer; white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .user-menu-status button:hover{ background:var(--tint-hover); color:var(--ink-1); }
  .user-menu-status button.on{ border-color:var(--gold-hi); color:var(--ink-1); background:var(--tint-hover); font-weight:600; }
  .user-menu-status button:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:1px; }
  .user-menu-status-nota{ margin:0 4px 6px; padding:6px 8px; border-radius:6px; background:var(--tint-hover); color:var(--ink-3); font-size:0.74rem; line-height:1.4; }
  .user-menu-status-nota[hidden]{ display:none; }
  .pedido-erro.ok{ color:var(--ok); }

  /* "Meus pedidos" (visão do cliente em mensagens.html) */
  .meus-pedidos{ flex:1; min-height:0; overflow-y:auto; padding:18px 22px 30px; }
  .meus-pedidos .pedido-item{ max-width:640px; }
  .dm-message-flash{ animation:msgFlash 1.8s ease-out; }
  @keyframes msgFlash{ 0%, 35%{ background:rgba(124,92,255,0.22); } 100%{ background:transparent; } }

  .conversa-list{ display:flex; flex-direction:column; gap:8px; }
  .conversa-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; border:1px solid var(--glass-border); border-radius:10px; background:var(--row-bg); }
  .conversa-row .conversa-nome{ font-weight:600; color:var(--ink-1); font-size:0.88rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .conversa-categoria-select{ background:var(--field-bg); border:1px solid var(--glass-border); border-radius:6px; padding:6px 10px; color:var(--ink-1); font-size:0.82rem; font-family:'Work Sans', sans-serif; flex-shrink:0; }

  .login-card{
    max-width:380px; margin:14vh auto 0; padding:32px 28px;
    background:linear-gradient(165deg, var(--glass-hi), var(--glass));
    backdrop-filter:blur(16px) saturate(120%);
    border:1px solid var(--glass-border); border-radius:16px;
    position:relative; z-index:1;
    text-align:center;
  }
  .login-card h1{ font-size:1.3rem; margin-bottom:6px; }
  .login-card p{ color:var(--ink-3); font-size:0.85rem; margin-bottom:22px; }
  .field{ display:flex; flex-direction:column; gap:6px; text-align:left; margin-bottom:14px; }
  .field label{ font-family:'JetBrains Mono', monospace; font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-3); }
  .field input, .field select, .field textarea{
    background:var(--field-bg); border:1px solid var(--glass-border); border-radius:8px;
    padding:10px 12px; color:var(--ink-1); font-family:'Work Sans', sans-serif; font-size:0.9rem;
    width:100%;
  }
  .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--lilac); }
  /* Campo de senha com o botão de olhinho (mostrar/ocultar) dentro, à direita. */
  .pw-wrap{ position:relative; display:flex; }
  .pw-wrap input{ padding-right:46px; }
  .pw-eye{ position:absolute; right:5px; top:50%; transform:translateY(-50%); width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:none; border:none; border-radius:8px; color:var(--ink-3); cursor:pointer; padding:0; }
  .pw-eye:hover{ color:var(--lilac); background:var(--tint-hover); }
  .pw-eye:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:1px; }
  .pw-eye svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .pw-eye .pw-eye-fechado{ display:none; }
  .pw-eye[aria-pressed="true"] .pw-eye-aberto{ display:none; }
  .pw-eye[aria-pressed="true"] .pw-eye-fechado{ display:block; }
  .field textarea{ font-family:'JetBrains Mono', monospace; font-size:0.82rem; line-height:1.6; resize:vertical; min-height:90px; }

  .selectors{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:28px; }
  @media (max-width:640px){ .selectors{ grid-template-columns:1fr; } }

  .editor-card{
    background:linear-gradient(165deg, var(--glass-hi), var(--glass));
    backdrop-filter:blur(16px) saturate(120%);
    border:1px solid var(--glass-border); border-radius:16px;
    padding:26px; margin-bottom:24px;
  }
  .editor-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
  .editor-head h2{ font-size:1.05rem; }
  .type-toggle{ display:flex; gap:6px; }
  .type-toggle button{
    padding:7px 13px; border-radius:8px; font-size:0.78rem; font-weight:600;
    background:var(--tint); border:1px solid var(--glass-border); color:var(--ink-2); cursor:pointer;
  }
  .type-toggle button.active{ background:linear-gradient(135deg, var(--lilac), var(--lilac-deep)); color:var(--on-accent); border-color:transparent; }

  .tier-block{
    border:1px solid var(--glass-border); border-radius:12px; padding:16px; margin-bottom:14px;
    background:var(--row-bg);
  }
  .tier-block-head{ display:grid; grid-template-columns:1fr 1fr auto; gap:10px; margin-bottom:12px; align-items:end; }
  @media (max-width:640px){ .tier-block-head{ grid-template-columns:1fr; } }
  .row-grid{ display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:8px; margin-bottom:6px; align-items:center; }
  @media (max-width:640px){ .row-grid{ grid-template-columns:1fr; } }
  .row-grid input{ background:var(--field-bg); border:1px solid var(--glass-border); border-radius:6px; padding:7px 9px; color:var(--ink-1); font-size:0.82rem; font-family:'JetBrains Mono', monospace; }
  .row-grid input:focus{ outline:none; border-color:var(--lilac); }
  .icon-btn{
    width:30px; height:30px; border-radius:7px; flex-shrink:0;
    background:rgba(224,114,138,0.12); border:1px solid rgba(224,114,138,0.35); color:var(--danger);
    cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:0.9rem;
  }
  .icon-btn:hover{ background:rgba(224,114,138,0.22); }
  .notes-list{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
  .note-row{ display:flex; gap:8px; align-items:center; }
  .note-row input{ flex:1; background:var(--field-bg); border:1px solid var(--glass-border); border-radius:6px; padding:8px 10px; color:var(--ink-1); font-size:0.82rem; }

  .preview-card{
    background:var(--surface); border:1px solid var(--glass-border); border-radius:16px; padding:22px;
  }
  .preview-card .tag{ font-family:'JetBrains Mono', monospace; font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:12px; }

  .status-banner{
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
    padding:12px 20px; border-radius:10px; font-size:0.85rem; font-weight:600;
    background:var(--surface-hi); border:1px solid var(--glass-border); color:var(--ink-1);
    box-shadow:0 12px 30px var(--shadow); z-index:200;
    opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
  }
  .status-banner.show{ opacity:1; transform:translateX(-50%) translateY(0); }
  .status-banner.ok{ border-color:rgba(147,176,106,0.5); }
  .status-banner.err{ border-color:rgba(224,114,138,0.5); color:var(--danger); }

  .service-status-grid{ display:flex; flex-direction:column; gap:10px; }
  .service-status-row{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:12px 16px; border:1px solid var(--glass-border); border-radius:10px;
    background:var(--row-bg);
  }
  .service-status-row .game-label{ display:flex; align-items:center; gap:10px; font-weight:600; color:var(--ink-1); }
  .service-status-row .game-label svg{ width:22px; height:22px; }
  .method-switches{ display:flex; gap:18px; }
  .switch-field{ display:flex; align-items:center; gap:8px; }
  .switch-field .method-label{ font-size:0.78rem; color:var(--ink-3); }
  .switch{ position:relative; display:inline-block; width:40px; height:22px; flex-shrink:0; }
  .switch input{ opacity:0; width:0; height:0; }
  .switch .track{
    position:absolute; inset:0; background:var(--tint-hover); border:1px solid var(--glass-border);
    border-radius:999px; cursor:pointer; transition:background .2s ease;
  }
  .switch .track::before{
    content:""; position:absolute; width:16px; height:16px; left:2px; top:2px;
    background:var(--ink-3); border-radius:50%; transition:transform .2s ease, background .2s ease;
  }
  .switch input:checked + .track{ background:rgba(147,176,106,0.25); border-color:rgba(147,176,106,0.5); }
  .switch input:checked + .track::before{ transform:translateX(18px); background:#93b06a; }
  .switch input:focus-visible + .track{ outline:2px solid var(--gold-hi); outline-offset:2px; }

  /* ================= Foto de perfil (avatar-ui.js) ================= */
  /* Com foto, o círculo some o degradê da inicial e a imagem preenche tudo (recorte já é quadrado; cover cobre foto de fora do padrão). */
  .dm-avatar.has-foto, .user-avatar.has-foto, .account-avatar.has-foto, .avatar-editor-img.has-foto, .conta-avatar.has-foto{ background:var(--surface-hi); overflow:hidden; }
  .has-foto img{ display:block; width:100%; height:100%; object-fit:cover; }
  .avatar-editor{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:18px; }
  .avatar-editor-foto{ flex-shrink:0; }
  .avatar-editor-img{ width:88px; height:88px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:2rem; color:var(--on-accent); background:linear-gradient(135deg, var(--lilac), var(--lilac-deep)); border:2px solid var(--glass-border); }
  .avatar-editor-lado{ flex:1; min-width:200px; }
  .avatar-editor-acoes{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
  .avatar-editor-dica{ margin:0 0 6px; font-size:0.76rem; color:var(--ink-3); line-height:1.45; }
  .avatar-editor-msg{ margin:0; }

  /* ================= Painel Contas do admin: tabela de contas ================= */
  .contas-tabela-wrap{ overflow-x:auto; }
  .contas-tabela{ width:100%; border-collapse:collapse; font-size:0.84rem; }
  .contas-tabela th{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--glass-border); font-family:'JetBrains Mono', monospace; font-size:0.64rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-3); font-weight:500; }
  .contas-tabela td{ padding:10px; border-bottom:1px solid var(--glass-border); vertical-align:middle; color:var(--ink-2); }
  .contas-tabela tbody tr:hover td{ background:var(--tint-hover); }
  .conta-id{ display:flex; align-items:center; gap:10px; min-width:0; }
  .conta-id-texto{ min-width:0; }
  .conta-avatar{ width:34px; height:34px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.85rem; color:var(--on-accent); background:linear-gradient(135deg, var(--lilac), var(--lilac-deep)); }
  .conta-nome{ font-weight:600; color:var(--ink-1); overflow-wrap:anywhere; }
  .conta-email{ font-size:0.76rem; color:var(--ink-3); overflow-wrap:anywhere; }
  .method-badge.cliente{ background:var(--tint-hover); border-color:var(--glass-border); color:var(--ink-3); }
  .conta-ativos{ display:block; margin-top:4px; font-size:0.7rem; color:var(--ink-3); }
  .conta-acoes{ display:flex; flex-wrap:wrap; gap:6px; }
  .conta-voce{ font-size:0.76rem; color:var(--ink-3); font-style:italic; }
  /* conta bloqueada: linha esmaecida + selo vermelho ao lado do tipo */
  .conta-suspensa-selo{ display:inline-block; margin-left:6px; font-size:0.7rem; font-weight:600; color:var(--danger); }
  .contas-tabela tr.conta-suspensa .conta-id{ opacity:0.55; }
  .contas-paginas{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:14px; font-size:0.8rem; color:var(--ink-3); }
  .contas-paginas[hidden]{ display:none; }
  @media (max-width:700px){
    .contas-tabela thead{ display:none; }
    .contas-tabela, .contas-tabela tbody, .contas-tabela tr, .contas-tabela td{ display:block; width:100%; }
    .contas-tabela tr{ padding:10px 0; border-bottom:1px solid var(--glass-border); }
    .contas-tabela td{ border:none; padding:4px 10px; }
    .contas-tabela td[data-rotulo]:not([data-rotulo="Conta"])::before{ content:attr(data-rotulo) ": "; font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3); margin-right:6px; }
    .contas-tabela tbody tr:hover td{ background:none; }
  }

  /* ================= Editar e apagar mensagens (mensagens.js) ================= */
  .dm-message{ position:relative; }
  .dm-msg-acoes{ position:absolute; top:-12px; right:6px; display:flex; gap:2px; padding:2px; border-radius:8px; background:var(--surface-hi); border:1px solid var(--glass-border); box-shadow:0 4px 12px var(--shadow); opacity:0; transition:opacity .12s ease; z-index:2; }
  .dm-message:hover .dm-msg-acoes, .dm-message:focus-within .dm-msg-acoes, .dm-msg-acoes.fixa{ opacity:1; }
  /* No toque não existe hover: os botões ficam SEMPRE à vista, numa linha própria logo abaixo da mensagem (flutuando em cima, cobririam o "(editada)"). */
  @media (hover:none){
    .dm-message{ flex-wrap:wrap; row-gap:2px; }
    .dm-message-body{ flex:1 1 0; }
    .dm-msg-acoes{ position:static; opacity:1; flex:0 0 100%; justify-content:flex-end; padding:0; background:none; border:none; box-shadow:none; }
  }
  .dm-msg-acoes button{ background:none; border:none; cursor:pointer; padding:3px 8px; border-radius:6px; font-size:0.8rem; color:var(--ink-2); font-family:inherit; line-height:1.3; }
  .dm-msg-acoes button:hover{ background:var(--tint-hover); }
  .dm-msg-acoes button.armado{ background:var(--danger); color:#fff; font-weight:600; }
  .dm-msg-acoes button:disabled{ opacity:0.5; cursor:default; }
  .dm-editada{ font-size:0.68rem; color:var(--ink-3); }
  .dm-editada-btn{ background:none; border:none; padding:0; cursor:pointer; font-family:inherit; text-decoration:underline dotted; }
  .dm-editada-btn:hover{ color:var(--ink-1); }
  .dm-apagada{ color:var(--ink-3); font-style:italic; }
  .dm-apagada-por{ font-size:0.72rem; }
  .dm-message.is-apagada .dm-avatar{ opacity:0.5; }
  .dm-versoes{ margin-top:6px; padding:8px 10px; border-left:3px solid var(--glass-border); background:var(--tint-hover); border-radius:6px; font-size:0.8rem; color:var(--ink-2); }
  .dm-versoes-titulo{ font-family:'JetBrains Mono', monospace; font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:4px; }
  .dm-versao{ white-space:pre-wrap; word-break:break-word; margin-bottom:4px; }
  .dm-versao-hora{ color:var(--ink-3); font-size:0.7rem; margin-right:8px; }
  .dm-edicao{ display:flex; flex-direction:column; gap:8px; }
  .dm-edicao-texto{ width:100%; min-height:60px; resize:vertical; background:var(--field-bg); border:1px solid var(--glass-border); border-radius:8px; padding:8px 10px; color:var(--ink-1); font-family:'Work Sans', sans-serif; font-size:0.92rem; line-height:1.5; }
  .dm-edicao-texto:focus{ outline:none; border-color:var(--lilac); }
  .dm-edicao-acoes{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
  .dm-edicao-dica{ font-size:0.7rem; color:var(--ink-3); }

  /* ================= Insígnias (insignias-ui.js) ================= */
  @property --giro{ syntax:'<angle>'; inherits:false; initial-value:0deg; } /* borda animada: anima o ângulo do conic-gradient */
  .insignia{
    --c1:#c9a6ff; --c2:#7c5cff; --ang:90deg; --vel:2.4s; --bg:rgba(201,166,255,0.14); --bd:rgba(201,166,255,0.5);
    --bg1:rgba(201,166,255,0.32); --bg2:rgba(124,92,255,0.32); --anim:none; --anim-txt:none;
    display:inline-flex; align-items:center; gap:4px; padding:1px 8px; border-radius:999px;
    font-size:0.7rem; font-weight:600; line-height:1.55; letter-spacing:0.01em; white-space:nowrap; vertical-align:middle;
    color:var(--c1); background:var(--bg); border:1px solid var(--bd); position:relative; overflow:hidden; animation:var(--anim);
  }
  .insignia-ic{ line-height:1; }
  .insignia-txt{ animation:var(--anim-txt); }
  .insignia-nv{ margin-left:2px; padding-left:5px; border-left:1px solid var(--bd); font-weight:500; opacity:0.85; }
  .insignia.bloqueada{ opacity:0.55; filter:grayscale(1); }
  /* automáticas: a cor vem do nível */
  .insignia.t-bronze{ --c1:#d9955a; --bg:rgba(217,149,90,0.14); --bd:rgba(217,149,90,0.55); }
  .insignia.t-prata{ --c1:#cdd5e0; --bg:rgba(205,213,224,0.14); --bd:rgba(205,213,224,0.5); }
  .insignia.t-ouro{ --c1:#f5c451; --bg:rgba(245,196,81,0.15); --bd:rgba(245,196,81,0.6); }
  .insignia.t-especial{ --c1:#c9a6ff; --bg:rgba(201,166,255,0.14); --bd:rgba(201,166,255,0.5); }
  html[data-theme="light"] .insignia.t-bronze{ --c1:#9a5a1f; --bg:rgba(154,90,31,0.1); --bd:rgba(154,90,31,0.45); }
  html[data-theme="light"] .insignia.t-prata{ --c1:#5f6b7c; --bg:rgba(95,107,124,0.1); --bd:rgba(95,107,124,0.4); }
  html[data-theme="light"] .insignia.t-ouro{ --c1:#a66f00; --bg:rgba(166,111,0,0.1); --bd:rgba(166,111,0,0.45); }
  html[data-theme="light"] .insignia.t-especial{ --c1:#6b3fd6; --bg:rgba(107,63,214,0.1); --bd:rgba(107,63,214,0.4); }
  /* personalizadas: tamanho, formato, fonte */
  .insignia.sz-p{ font-size:0.62rem; padding:0 6px; }
  .insignia.sz-g{ font-size:0.88rem; padding:3px 12px; }
  .insignia.fm-retangulo{ border-radius:5px; }
  .insignia.f-cinzel{ font-family:'Cinzel', serif; }
  .insignia.f-work{ font-family:'Work Sans', sans-serif; }
  .insignia.f-mono{ font-family:'JetBrains Mono', monospace; font-weight:500; }
  .insignia.f-orbitron{ font-family:'Orbitron', sans-serif; letter-spacing:0.05em; }
  .insignia.f-pacifico{ font-family:'Pacifico', cursive; font-weight:400; }
  .insignia.f-pixel{ font-family:'Press Start 2P', monospace; font-weight:400; font-size:0.5rem; letter-spacing:0.02em; }
  .insignia.f-pixel.sz-p{ font-size:0.42rem; }
  .insignia.f-pixel.sz-g{ font-size:0.66rem; }
  .insignia.f-playfair{ font-family:'Playfair Display', serif; }
  /* personalizadas: modo de cor */
  .insignia.m-gradiente{
    background:linear-gradient(var(--surface-hi), var(--surface-hi)) padding-box, linear-gradient(var(--ang), var(--c1), var(--c2)) border-box;
    border:1px solid transparent;
  }
  .insignia.m-gradiente .insignia-txt{ background:linear-gradient(var(--ang), var(--c1), var(--c2)); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
  /* personalizadas: efeitos (até 3 por insígnia; as animações entram juntas na variável --anim, montada em insignias-ui.js) */
  .insignia.e-brilho{ text-shadow:0 0 6px var(--c1), 0 0 14px var(--c1); box-shadow:0 0 10px var(--bd), inset 0 0 8px var(--bg); }
  .insignia.m-solida.e-gradiente, .insignia.m-rgb.e-gradiente{ background-image:linear-gradient(var(--ang), var(--bg1), var(--bg2), var(--bg1)); background-size:200% 200%; }
  .insignia.m-gradiente.e-gradiente{ background-size:200% 200%; }
  .insignia.m-gradiente.e-gradiente .insignia-txt{ background-size:200% 200%; }
  .insignia.e-borda{
    background:linear-gradient(var(--surface-hi), var(--surface-hi)) padding-box, conic-gradient(from var(--giro), var(--c1), var(--c2), var(--c1)) border-box;
    border:1.5px solid transparent;
  }
  .insignia.e-reflexo::after{
    content:""; position:absolute; top:0; bottom:0; width:40%; left:-60%; pointer-events:none;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,0.6), transparent); transform:skewX(-20deg);
    animation:ins-brilho var(--vel) ease-in-out infinite;
  }
  .insignia.e-faiscas::before{
    content:"✦"; position:absolute; top:-2px; right:3px; font-size:0.62em; color:var(--c1); pointer-events:none;
    animation:ins-pisca calc(var(--vel) * 0.7) ease-in-out infinite;
  }
  @keyframes ins-hue{ to{ filter:hue-rotate(360deg); } }
  @keyframes ins-pulso{ 0%, 100%{ transform:scale(1); opacity:0.88; } 50%{ transform:scale(1.07); opacity:1; } }
  @keyframes ins-flutua{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } }
  @keyframes ins-giro{ to{ --giro:360deg; } }
  @keyframes ins-fundo{ 0%, 100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
  @keyframes ins-brilho{ 0%{ left:-60%; } 60%, 100%{ left:130%; } }
  @keyframes ins-pisca{ 0%, 100%{ opacity:0.15; transform:scale(0.6); } 50%{ opacity:1; transform:scale(1.15); } }
  @media (prefers-reduced-motion: reduce){
    .insignia, .insignia-txt, .insignia::before, .insignia::after{ animation:none !important; }
  }

  /* no chat: selos ao lado do nome, e foto/nome clicáveis (abre o cartão de perfil) */
  .dm-message-head{ flex-wrap:wrap; }
  .dm-insignias{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px; }
  .dm-message[data-autor-id^="usr_"] .dm-avatar, .dm-message[data-autor-id^="usr_"] .dm-message-author{ cursor:pointer; }
  .dm-message[data-autor-id^="usr_"] .dm-message-author:hover{ text-decoration:underline; }
  .dm-atendente-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:8px 22px; border-bottom:1px solid var(--glass-border); font-size:0.8rem; color:var(--ink-2); }
  .dm-atendente-bar[hidden]{ display:none; }

  /* cartão de perfil */
  .perfil-cartao{ position:fixed; z-index:400; width:min(320px, calc(100vw - 16px)); padding:14px; border-radius:12px; background:var(--surface-hi); border:1px solid var(--glass-border); box-shadow:0 14px 34px var(--shadow); color:var(--ink-1); }
  .perfil-topo{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
  .perfil-avatar{ width:52px; height:52px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.2rem; color:var(--on-accent); background:linear-gradient(135deg, var(--lilac), var(--lilac-deep)); }
  .perfil-avatar.has-foto{ background:var(--surface-hi); overflow:hidden; }
  .perfil-quem{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  .perfil-nome{ font-weight:700; overflow-wrap:anywhere; }
  .perfil-papel{ font-size:0.72rem; color:var(--ink-3); }
  .perfil-stats{ margin:0 0 10px; padding:6px 10px; border-radius:8px; background:var(--tint); font-size:0.82rem; }
  .perfil-selos{ display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
  .perfil-selo-linha{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
  .perfil-selo-desc{ font-size:0.74rem; color:var(--ink-3); }
  .perfil-vazio, .perfil-aviso, .perfil-desde{ margin:6px 0; font-size:0.78rem; color:var(--ink-3); }
  .perfil-link{ font-size:0.8rem; color:var(--lilac); }

  /* "Minhas insígnias" (Minha Conta) */
  .vit-topo{ margin:0 0 12px; font-size:0.86rem; color:var(--ink-1); }
  .vit-regra{ margin:4px 0 0; font-size:0.74rem; line-height:1.4; color:var(--ink-3); }
  .vit-sub{ margin:20px 0 10px; font-family:'Cinzel', serif; font-size:0.95rem; color:var(--ink-1); }
  .vit-stats{ display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; padding:10px 12px; border:1px solid var(--glass-border); border-radius:10px; background:var(--tint); font-size:0.84rem; color:var(--ink-1); cursor:pointer; }
  .vit-grade{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px; }
  .vit-card{ display:flex; flex-direction:column; gap:6px; padding:12px; border:1px solid var(--glass-border); border-radius:12px; background:var(--row-bg); }
  .vit-card.on{ border-color:var(--lilac); }
  .vit-selo{ min-height:24px; display:flex; align-items:center; }
  .vit-desc{ margin:0; font-size:0.8rem; color:var(--ink-2); }
  .vit-prog{ margin:0; font-size:0.76rem; color:var(--ink-2); }
  .vit-barra{ display:block; height:6px; margin-bottom:4px; border-radius:99px; background:var(--tint-hover); overflow:hidden; }
  .vit-barra span{ display:block; height:100%; background:linear-gradient(90deg, var(--lilac), var(--gold)); }
  .vit-toggle{ display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:4px; font-size:0.78rem; color:var(--ink-1); cursor:pointer; }

  /* painel de Insígnias do admin + modal de concessão */
  .ins-item{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:10px 12px; border-bottom:1px solid var(--glass-border); }
  .ins-item-selo{ min-width:150px; }
  .ins-item-info{ flex:1; min-width:180px; display:flex; flex-direction:column; gap:2px; }
  .ins-item-desc, .ins-item-uso{ font-size:0.76rem; color:var(--ink-3); }
  .ins-item-acoes{ display:flex; gap:6px; }
  .ins-form{ display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; }
  .ins-largo{ grid-column:1 / -1; }
  @media (max-width:560px){ .ins-form{ grid-template-columns:1fr; } }
  .ins-form input[type=color]{ width:100%; height:38px; padding:2px; }
  .ins-form input[type=range]{ width:100%; padding:0; }
  .ins-efeitos{ display:flex; flex-wrap:wrap; gap:8px 16px; }
  .field .ins-efeito{ display:flex; align-items:center; gap:6px; font-family:'Work Sans', sans-serif; font-size:0.84rem; letter-spacing:0; text-transform:none; color:var(--ink-1); cursor:pointer; }
  .field .ins-efeito input{ width:auto; }
  .ins-previas{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0; }
  .ins-previa{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:14px; border:1px solid var(--glass-border); border-radius:10px; }
  .ins-previa.escuro{ background:#121a20; --surface-hi:#1a252c; }
  .ins-previa.claro{ background:#ffffff; --surface-hi:#ffffff; }
  .ins-previa-rotulo{ font-family:'JetBrains Mono', monospace; font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:#8b84a6; }
  .ins-acoes{ display:flex; gap:10px; }
  .im-linha{ display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--glass-border); }
  .im-val{ flex:1; font-size:0.76rem; color:var(--ink-3); }
  .im-val.venc{ color:var(--danger); }
  .im-form{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
  .im-form select, .im-form input{ background:var(--field-bg); border:1px solid var(--glass-border); border-radius:8px; padding:8px 10px; color:var(--ink-1); font-family:'Work Sans', sans-serif; font-size:0.84rem; }
  .im-form select{ flex:1; min-width:160px; }
  .im-form input{ width:170px; }
  .conta-insignias-btn{ white-space:nowrap; }

  /* aviso "nova insígnia" */
  .insignia-toast{ position:fixed; right:16px; bottom:16px; z-index:500; display:flex; flex-direction:column; gap:3px; max-width:min(320px, calc(100vw - 32px)); padding:12px 16px; border-radius:12px; background:var(--surface-hi); border:1px solid var(--lilac); box-shadow:0 12px 30px var(--shadow); color:var(--ink-1); text-decoration:none; font-size:0.86rem; animation:ins-toast 0.35s ease; }
  @keyframes ins-toast{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

  /* ================= Celular (release V) ================= */
  /* ALTURA DA TELA: no celular 100vh inclui a área atrás da barra de endereço/ferramentas do navegador — o campo de resposta (embaixo) ficava escondido.
     dvh é a altura que se VÊ agora; quem não conhece dvh ignora a linha e fica com a de cima (vh). */
  .dm-shell{ height:calc(100dvh - 53px); }
  .modal{ max-height:85dvh; }
  .lightbox img{ max-height:82dvh; }

  /* Alvos de toque: dedo precisa de ~40 px. Só em tela de toque (o mouse continua com os botões compactos). */
  @media (pointer:coarse){
    .dm-attach-btn, .dm-note-toggle, .dm-kebab-btn, .icon-btn, .dm-label-add, .modal-close{ min-width:42px; min-height:42px; display:inline-flex; align-items:center; justify-content:center; }
    .dm-msg-acoes button{ min-height:36px; padding:6px 12px; }
    .btn-small{ min-height:40px; }
    .dm-composer-send{ width:42px; height:42px; }
    select{ min-height:42px; }
    .user-menu-item{ min-height:44px; }
    .dm-stars button{ min-width:46px; min-height:44px; }
    .tab-pill, .type-toggle button{ min-height:40px; }
  }

  @media (max-width:700px){
    /* iPhone dá zoom na página inteira quando o campo tem fonte menor que 16 px (e não volta sozinho) */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea{ font-size:16px !important; }
    .admin-body .dm-shell{ min-height:calc(100dvh - 53px); }

    /* Rodapé: os links quebram de linha em vez de empurrar a página pra além da tela */
    .foot-nav{ flex-wrap:wrap; gap:10px 18px; }

    /* Menu do usuário (Editar perfil / Sair) na faixa do topo: fica COLADO na borda direita, em vez de lá no fim da faixa rolável */
    .admin-body .user-panel-host, #customerView .user-panel-host{ position:sticky; right:0; z-index:2; padding-left:14px; background:linear-gradient(90deg, transparent, var(--surface) 38%); }

    /* Menus ("⋮", cobrança, transferir): folha opaca colada embaixo, com o resto da tela escurecido — antes abriam translúcidos em cima do chat */
    .dm-dropdown{ position:fixed; left:10px; right:10px; top:auto; bottom:10px; margin:0; min-width:0; max-height:70dvh; background:var(--surface-hi); box-shadow:0 0 0 100vmax rgba(0,0,0,0.55); z-index:60; }
    .dm-dropdown-item{ min-height:44px; display:flex; align-items:center; }
    .modal{ padding:22px 18px 20px; }

    /* Atendimento da equipe: cabeçalho mais enxuto e campo de resposta em linha própria (antes os 3 botões deixavam o texto com ~110 px) */
    #staffView .dm-main-header{ padding:10px 12px; row-gap:6px; }
    #staffView .dm-main-header-title{ font-size:0.95rem; line-height:1.3; display:flex; flex-wrap:wrap; align-items:center; gap:3px 6px; }
    #staffView .dm-main-header-title .dm-assigned-badge{ margin-left:0; font-size:0.74rem; }
    /* "jogo · serviço" numa linha só (com reticências) em vez de comer 2 linhas do cabeçalho; o estado fica logo ao lado do número */
    #staffView .dm-main-header-title .dm-assigned-badge:has(+ .pedido-estado){ order:9; flex:1 1 100%; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    #staffView .dm-main-header-title .pedido-estado{ order:1; }
    #staffView .dm-main-header-title .dm-assigned-badge{ order:2; }
    #staffView .dm-main-header-title .dm-sla{ order:3; margin-left:0; }
    #staffView .dm-header-actions .btn{ padding:7px 11px; }
    .dm-composer{ padding:8px 10px 10px; }
    .dm-composer-box textarea{ scrollbar-width:none; min-height:26px; }
    #staffComposerBox{ flex-wrap:wrap; row-gap:4px; padding:8px 10px; }
    #staffComposerBox textarea{ order:-1; flex:1 1 100%; width:100%; min-height:44px; }
    #customerInput{ min-height:44px; }
    #staffComposerBox .dm-composer-send{ margin-left:auto; }
    .dm-acesso-bar{ padding:8px 10px; font-size:0.82rem; }
    .dm-rating{ margin:0 10px 8px; padding:10px 12px; }
    .dm-messages{ padding:12px 12px; }

    /* Painel admin: o interruptor Manual/Script quebra linha em vez de estourar a tela */
    .method-switches{ flex-wrap:wrap; gap:10px 18px; }

    /* Lista da equipe: abas Atendimentos / Fila / Anúncios / Canais (antes tudo empilhado e os atendimentos lá no fim). Cada aba mostra só a sua seção. */
    #staffView .dm-mtabs{ display:flex; flex-shrink:0; gap:6px; position:sticky; top:-14px; z-index:3; margin:-14px -8px 8px; padding:10px 8px 8px; background:var(--surface); border-bottom:1px solid var(--glass-border); overflow-x:auto; scrollbar-width:none; }
    #staffView .dm-mtabs::-webkit-scrollbar{ display:none; }
    /* ícone em cima, nome embaixo: as 4 abas cabem lado a lado em 360 px (em linha somavam 480 px e a última ficava fora da tela) */
    #staffView .dm-mtab{ position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-height:50px; padding:5px 2px; border-radius:10px; border:1px solid var(--glass-border); background:var(--tint); color:var(--ink-2); font-family:inherit; font-size:0.68rem; white-space:nowrap; cursor:pointer; }
    #staffView .dm-mtab .ic{ font-size:1.1rem; line-height:1.2; }
    #staffView .dm-mtab.active{ background:rgba(124,92,255,0.24); border-color:var(--lilac); color:var(--ink-1); font-weight:600; }
    #staffView .dm-mtab .nav-badge{ position:absolute; top:2px; right:4px; margin:0; min-width:18px; padding:0 5px; font-size:0.62rem; line-height:18px; }
    #staffView[data-mtab="atend"] :is(#internalSection, #anunciosSection, #filaSection, #desempSection, #cargaInfo, .dm-mtab-vazio){ display:none !important; }
    #staffView[data-mtab="fila"] :is(#internalSection, #anunciosSection, #atendSection, #desempSection, .dm-mtab-vazio){ display:none !important; }
    #staffView[data-mtab="anuncios"] :is(#internalSection, #filaSection, #atendSection, #desempSection, .dm-mtab-vazio){ display:none !important; }
    #staffView[data-mtab="canais"] :is(#anunciosSection, #filaSection, #atendSection, #desempSection, #cargaInfo, .dm-mtab-vazio){ display:none !important; }
    #staffView[data-mtab="fila"][data-fila-vazia] #vazioFila, #staffView[data-mtab="anuncios"][data-anuncios-vazios] #vazioAnuncios{ display:block !important; }
  }
  /* as abas e o botão ☰ só existem no celular */
  .dm-mtabs{ display:none; }
  .nav-menu-btn{ display:none; }
  @media (max-width:1100px){
    .nav-menu-btn{ display:inline-flex; position:relative; align-items:center; justify-content:center; width:42px; height:42px; padding:0; border-radius:12px; border:1px solid var(--glass-border); background:var(--tint); color:var(--ink-1); cursor:pointer; }
    .nav-menu-btn svg{ width:20px; height:20px; }
    .nav-menu-btn .nav-menu-dot{ position:absolute; top:-6px; right:-6px; margin:0; }
    .nav-menu-btn .nav-badge{ margin-left:0; }
    /* os links de seção viram um painel logo abaixo da barra (a mesma lista: o "Entrar / Minha Conta" e o selo continuam funcionando) */
    nav .nav-links{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0; padding:4px 16px 12px; white-space:normal; background:var(--surface-hi); border-bottom:1px solid var(--glass-border); box-shadow:0 14px 30px var(--shadow); }
    nav.menu-aberto .nav-links{ display:flex; }
    nav .nav-links a{ display:flex; align-items:center; min-height:48px; padding:0 4px; font-size:1rem; border-bottom:1px solid var(--glass-border); }
    nav .nav-links a:last-child{ border-bottom:none; }
    nav .nav-links #navAuthLink .nav-badge{ display:none; }
  }
  @media (min-width:1101px){ .nav-so-celular{ display:none !important; } }
  .dm-mtab-vazio{ display:none; }
  /* barra da home no celular: com o ☰ a mais, a marca quebrava em 3 linhas — botões e marca ficam mais compactos pra ela caber em 2 */
  @media (max-width:560px){
    .nav-row{ gap:8px; }
    .nav-ctas{ gap:5px; }
    .nav-cta.nav-cta-icon{ padding:9px 11px; }
    .nav-menu-btn{ width:38px; height:38px; }
    .brand{ gap:8px; }
    .brand-avatar{ width:34px; height:34px; }
    .brand-word{ font-size:0.84rem; }
  }

  /* ================= Presença da equipe (release W) ================= */
  /* bolinha de estado: ativo (verde), ocioso/ausente (âmbar), aba escondida (cinza), offline (vazada) */
  .pres-dot{ display:inline-block; flex-shrink:0; width:9px; height:9px; border-radius:50%; background:var(--ink-3); }
  .pres-dot.ativo{ background:var(--ok); box-shadow:0 0 0 3px var(--ok-bg); }
  .pres-dot.ocioso, .pres-dot.ausente{ background:var(--gold-hi); }
  .pres-dot.oculto{ background:var(--ink-3); }
  .pres-dot.ocupado{ background:var(--danger); box-shadow:0 0 0 3px rgba(224,114,138,0.2); }
  .pres-dot.off{ background:transparent; border:2px solid var(--ink-3); width:9px; height:9px; box-sizing:border-box; }
  /* "Equipe online" na barra lateral das mensagens (colegas: só nome e estado) */
  .dm-equipe-item{ display:flex; align-items:center; gap:9px; padding:6px 12px; font-size:0.86rem; color:var(--ink-2); }
  .dm-equipe-nome{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dm-equipe-nota{ margin:6px 12px 10px; font-size:0.7rem; line-height:1.45; color:var(--ink-3); }
  /* Etiqueta ao lado do nome da equipe (release AG): o texto é do admin ("Admin", "Equipe", "Suporte"…), mostrado como foi escrito — sem caixa alta forçada */
  .dm-tag{ display:inline-flex; align-items:center; flex-shrink:0; margin-right:6px; padding:1px 8px; border-radius:999px; border:1px solid var(--glass-border); font-size:0.68rem; font-weight:600; letter-spacing:0.03em; line-height:1.55; white-space:nowrap; vertical-align:middle; }
  .dm-tag.t-admin{ color:var(--lilac); border-color:rgba(201,166,255,0.45); background:rgba(124,92,255,0.14); }
  .dm-tag.t-funcionario{ color:var(--ink-2); background:var(--tint); }
  .dm-equipe-item .dm-tag, .dm-membro .dm-tag{ margin-right:0; }
  /* "🟢 N online" no topo da página: abre uma janelinha rolável por cima do conteúdo (não ocupa a barra lateral, não importa quantos estejam online) */
  .equipe-chip-wrap{ position:relative; }
  .equipe-chip-wrap[hidden]{ display:none; }
  .equipe-chip{ display:inline-flex; align-items:center; gap:7px; }
  .equipe-chip-rotulo{ font-size:0.78rem; }
  .equipe-pop{ position:absolute; right:0; top:calc(100% + 8px); z-index:60; width:min(320px, calc(100vw - 24px)); max-height:min(60vh, 380px); overflow-y:auto; padding:8px 0; background:var(--surface-hi); border:1px solid var(--glass-border); border-radius:12px; box-shadow:0 14px 36px rgba(0,0,0,0.45); }
  .equipe-pop[hidden]{ display:none; }
  .equipe-pop-head{ padding:6px 14px 8px; font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3); }
  @media (max-width:700px){
    .equipe-chip-rotulo{ display:none; }
    .equipe-pop{ position:fixed; top:56px; left:12px; right:12px; width:auto; }
  }
  /* admin: card "Etiqueta ao lado do nome" (por cargo) e a janela da etiqueta de uma pessoa */
  .et-lista{ display:flex; flex-direction:column; gap:10px; }
  .et-linha{ display:grid; grid-template-columns:150px 1fr; gap:10px 16px; align-items:center; padding:12px 14px; border:1px solid var(--glass-border); border-radius:12px; background:var(--tint); }
  .et-cargo{ display:flex; flex-direction:column; gap:2px; }
  .et-situacao{ font-size:0.74rem; color:var(--ink-3); }
  .et-previa{ display:flex; align-items:center; gap:6px; font-size:0.9rem; min-width:0; }
  .et-nome{ color:var(--ink-1); }
  .et-sem{ font-size:0.78rem; color:var(--ink-3); }
  .et-edicao{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
  .et-edicao input{ flex:1 1 160px; min-width:0; padding:8px 10px; border-radius:10px; border:1px solid var(--glass-border); background:var(--field-bg); color:var(--ink-1); font:inherit; font-size:0.9rem; }
  .et-modal-previa{ display:flex; align-items:center; gap:6px; margin:0 0 14px; padding:10px 12px; border-radius:10px; background:var(--tint); border:1px solid var(--glass-border); font-size:0.95rem; }
  .et-modal-nota{ margin:-4px 0 12px; font-size:0.78rem; color:var(--ink-3); }
  @media (max-width:560px){ .et-linha{ grid-template-columns:1fr; } .et-edicao input{ font-size:16px; } }
  /* painel "Online" do admin */
  .pres-nota{ margin:-8px 0 14px; font-size:0.82rem; line-height:1.6; color:var(--ink-3); }
  .pres-atualizado{ font-size:0.72rem; color:var(--ink-3); font-weight:400; }
  .pres-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
  .pres-chip{ display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border:1px solid var(--glass-border); border-radius:999px; background:var(--tint); font-size:0.82rem; color:var(--ink-2); }
  .pres-chip strong{ color:var(--ink-1); }
  .pres-lista{ display:flex; flex-direction:column; border:1px solid var(--glass-border); border-radius:12px; overflow:hidden; }
  .pres-linha{ display:grid; grid-template-columns:minmax(150px, 1.3fr) minmax(130px, 1fr) minmax(170px, 1.5fr) minmax(120px, 1fr); gap:6px 14px; align-items:center; padding:11px 14px; border-bottom:1px solid var(--glass-border); font-size:0.84rem; color:var(--ink-2); }
  .pres-linha:last-child{ border-bottom:none; }
  .pres-linha.is-off{ opacity:0.62; }
  .pres-quem{ display:flex; align-items:center; gap:10px; min-width:0; }
  .pres-avatar{ flex-shrink:0; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.8rem; color:var(--on-accent); background:linear-gradient(135deg, var(--lilac), var(--lilac-deep)); }
  .pres-avatar.has-foto{ background:var(--surface-hi); overflow:hidden; }
  .pres-nome{ font-weight:600; color:var(--ink-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pres-papel{ font-family:'JetBrains Mono', monospace; font-size:0.58rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--lilac); }
  .pres-estado{ display:flex; align-items:center; gap:8px; }
  .pres-onde small, .pres-extra small{ color:var(--ink-3); }
  .pres-sub{ margin:22px 0 10px; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; font-family:'JetBrains Mono', monospace; color:var(--ink-3); font-weight:500; }
  .pres-tabela{ display:flex; flex-direction:column; border:1px solid var(--glass-border); border-radius:12px; overflow:hidden; }
  .pres-pessoa{ display:grid; grid-template-columns:minmax(110px, 1fr) minmax(150px, 1.5fr) minmax(140px, 1.3fr) auto; gap:6px 14px; align-items:center; padding:11px 14px; border-bottom:1px solid var(--glass-border); font-size:0.82rem; color:var(--ink-2); }
  .pres-pessoa:last-child{ border-bottom:none; }
  .pres-bar{ height:8px; border-radius:4px; background:var(--tint); overflow:hidden; margin-top:5px; }
  .pres-bar > i{ display:block; height:100%; background:var(--lilac); border-radius:4px; }
  .pres-bar > i.ativo{ background:var(--ok); }
  .pres-hist{ display:flex; align-items:flex-end; gap:3px; height:120px; padding:6px 4px 0; border:1px solid var(--glass-border); border-radius:12px; background:var(--tint); }
  .pres-col{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; }
  .pres-col i{ display:block; width:100%; min-height:1px; border-radius:3px 3px 0 0; background:var(--lilac); }
  .pres-col span{ margin-top:3px; font-size:0.56rem; color:var(--ink-3); line-height:1; }
  .pres-paginas{ display:flex; flex-direction:column; gap:10px; }
  .pres-pagina-linha{ display:grid; grid-template-columns:minmax(150px, 1fr) minmax(120px, 2fr) 90px; gap:10px; align-items:center; font-size:0.82rem; color:var(--ink-2); }
  .pres-detalhe{ grid-column:1 / -1; margin-top:6px; padding:10px 12px; border-radius:10px; background:var(--tint); font-size:0.78rem; color:var(--ink-2); }
  .pres-detalhe table{ width:100%; border-collapse:collapse; }
  .pres-detalhe th{ text-align:left; font-weight:500; font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3); padding:4px 8px 6px 0; }
  .pres-detalhe td{ padding:5px 8px 5px 0; border-top:1px solid var(--glass-border); vertical-align:top; }
  .pres-vazio{ padding:16px; font-size:0.84rem; color:var(--ink-3); }
  /* ---------- Painel 🟢 Online em cartões (release AP) ----------
     Só aparência: a estrutura (.pres-linha, .pres-quem, .pres-estado, .pres-dot…) é a mesma de antes; aqui cada pessoa vira um cartão com anel de estado no avatar,
     o painel ganha números grandes no topo, filtro e busca, e a parte de comportamento ganha cartões e barras com degradê. Tudo por variáveis (vale no tema claro). */
  #panelOnline.admin-panel{ max-width:1180px; } /* os painéis do admin têm 760 px; este usa a tela (cartões em grade) */
  .pres-hero{ position:relative; overflow:hidden; }
  .pres-hero::before{ content:""; position:absolute; top:-140px; right:-120px; width:380px; height:380px; background:radial-gradient(closest-side, rgba(124,92,255,0.20), transparent); pointer-events:none; }
  .pres-hero > *{ position:relative; }
  .pres-aovivo{ display:inline-flex; align-items:center; gap:7px; margin-right:auto; padding:3px 11px 3px 9px; border-radius:999px; font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:600; color:var(--ok); background:var(--ok-bg); border:1px solid var(--ok-border); }
  .pres-aovivo i{ width:7px; height:7px; border-radius:50%; background:var(--ok); animation:presPulso 1.9s ease-out infinite; }
  @keyframes presPulso{ 0%{ box-shadow:0 0 0 0 var(--ok-border); } 70%{ box-shadow:0 0 0 7px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }
  .pres-kpis{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin:2px 0 18px; }
  .pres-kpi{ padding:14px 16px 13px; border-radius:14px; border:1px solid var(--glass-border); background:linear-gradient(135deg, var(--tint), transparent 80%); transition:transform .18s ease, border-color .18s ease; }
  .pres-kpi:hover{ transform:translateY(-2px); border-color:var(--lilac); }
  .pres-kpi .num{ font-size:2rem; font-weight:700; line-height:1; color:var(--ink-1); font-variant-numeric:tabular-nums; }
  .pres-kpi .num small{ font-size:0.82rem; font-weight:500; color:var(--ink-3); }
  .pres-kpi .rot{ display:flex; align-items:center; gap:7px; margin-top:9px; font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3); }
  .pres-kpi.k-online{ border-color:var(--ok-border); background:linear-gradient(135deg, var(--ok-bg), transparent 80%); }
  .pres-kpi.k-online .num{ color:var(--ok); }
  .pres-kpi.k-ausente .num{ color:var(--gold-hi); }
  .pres-barra{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
  .pres-barra .modal-tabs{ margin:0; }
  .pres-busca{ flex:0 1 240px; min-width:150px; padding:8px 14px; border-radius:999px; border:1px solid var(--glass-border); background:var(--field-bg); color:var(--ink-1); font:inherit; font-size:0.84rem; }
  .pres-busca:focus{ outline:none; border-color:var(--lilac); box-shadow:0 0 0 3px var(--tint-hover); }
  .pres-lista{ display:block; border:0; border-radius:0; overflow:visible; }
  .pres-grupo{ margin:0 0 22px; }
  .pres-grupo-titulo{ display:flex; align-items:center; gap:10px; margin:0 0 12px; font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; font-family:'JetBrains Mono', monospace; color:var(--ink-3); font-weight:500; }
  .pres-grupo-titulo::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, var(--glass-border), transparent); }
  .pres-grupo-n{ padding:1px 8px; border-radius:999px; background:var(--tint); color:var(--ink-2); letter-spacing:0; }
  .pres-grade{ display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:12px; }
  .pres-grade.compacta{ grid-template-columns:repeat(auto-fill, minmax(215px, 1fr)); gap:8px; }
  .pres-linha.pres-card{ display:flex; flex-direction:column; align-items:stretch; gap:10px; padding:15px 16px; border:1px solid var(--glass-border); border-radius:14px; background:linear-gradient(160deg, var(--tint), transparent 75%); transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
  .pres-card:hover{ transform:translateY(-2px); border-color:var(--lilac); box-shadow:0 10px 26px var(--shadow); }
  .pres-card .pres-quem{ gap:12px; }
  .pres-card .pres-avatar{ width:44px; height:44px; font-size:1.05rem; box-shadow:0 0 0 2px var(--surface, #11191f), 0 0 0 4px var(--ink-3); }
  .pres-card .pres-nome{ font-size:0.98rem; }
  .pres-card .pres-papel{ margin-left:auto; padding:2px 8px; border-radius:999px; background:var(--tint); border:1px solid var(--glass-border); }
  .pres-card.est-ativo .pres-avatar{ box-shadow:0 0 0 2px var(--surface, #11191f), 0 0 0 4px var(--ok); animation:presAnel 2.6s ease-out infinite; }
  .pres-card.est-ocioso .pres-avatar{ box-shadow:0 0 0 2px var(--surface, #11191f), 0 0 0 4px var(--gold-hi); }
  .pres-card.est-oculto .pres-avatar{ box-shadow:0 0 0 2px var(--surface, #11191f), 0 0 0 4px var(--ink-3); }
  @keyframes presAnel{ 0%{ box-shadow:0 0 0 2px var(--surface, #11191f), 0 0 0 4px var(--ok), 0 0 0 4px var(--ok-border); } 70%{ box-shadow:0 0 0 2px var(--surface, #11191f), 0 0 0 4px var(--ok), 0 0 0 11px transparent; } 100%{ box-shadow:0 0 0 2px var(--surface, #11191f), 0 0 0 4px var(--ok), 0 0 0 4px transparent; } }
  .pres-card .pres-estado{ font-size:0.84rem; font-weight:600; color:var(--ink-2); }
  .pres-card.est-ativo .pres-estado{ color:var(--ok); }
  .pres-card.est-ocioso .pres-estado{ color:var(--gold-hi); }
  .pres-card .pres-onde{ align-self:flex-start; max-width:100%; padding:5px 11px; border-radius:999px; background:var(--tint); font-size:0.78rem; color:var(--ink-1); }
  .pres-card .pres-onde::before{ content:"📍 "; }
  .pres-card .pres-extra{ font-size:0.76rem; color:var(--ink-2); }
  .pres-card.is-off{ opacity:0.78; padding:10px 12px; gap:6px; }
  .pres-card.is-off .pres-avatar{ width:34px; height:34px; font-size:0.9rem; filter:grayscale(0.7); box-shadow:0 0 0 2px var(--surface, #11191f), 0 0 0 3px var(--glass-border); }
  .pres-card.is-off .pres-nome{ font-size:0.9rem; }
  .pres-card.is-off .pres-onde, .pres-card.is-off .pres-extra{ display:none; }
  .pres-card.is-off .pres-estado{ font-size:0.76rem; font-weight:400; color:var(--ink-3); padding-left:46px; margin-top:-2px; }
  .pres-entra .pres-card{ animation:presEntra .45s ease both; }
  .pres-entra .pres-card:nth-child(2){ animation-delay:.04s; } .pres-entra .pres-card:nth-child(3){ animation-delay:.08s; } .pres-entra .pres-card:nth-child(4){ animation-delay:.12s; }
  .pres-entra .pres-card:nth-child(5){ animation-delay:.16s; } .pres-entra .pres-card:nth-child(n+6){ animation-delay:.2s; }
  @keyframes presEntra{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
  .pres-vazio-grande{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:34px 16px; border:1px dashed var(--glass-border); border-radius:14px; text-align:center; }
  .pres-vazio-grande span{ font-size:1.8rem; }
  .pres-info{ margin-top:6px; font-size:0.8rem; color:var(--ink-3); }
  .pres-info summary{ cursor:pointer; width:max-content; padding:4px 0; }
  .pres-info .pres-nota{ margin:8px 0 0; }
  /* parte "Comportamento da equipe": mesmos cartões e degradês */
  .pres-chips .pres-chip{ padding:8px 14px; background:linear-gradient(135deg, var(--tint), transparent 90%); }
  .pres-tabela{ border:0; overflow:visible; gap:10px; }
  .pres-pessoa{ border:1px solid var(--glass-border); border-radius:14px; background:linear-gradient(160deg, var(--tint), transparent 75%); transition:border-color .18s ease; }
  .pres-pessoa:hover{ border-color:var(--lilac); }
  .pres-bar{ height:10px; border-radius:999px; }
  .pres-bar > i{ background:linear-gradient(90deg, var(--lilac-deep), var(--lilac)); border-radius:999px; transition:width .6s ease; }
  .pres-bar > i.ativo{ background:linear-gradient(90deg, var(--ok-border), var(--ok)); }
  .pres-hist{ border-radius:14px; gap:4px; padding:10px 8px 0; }
  .pres-col i{ background:linear-gradient(180deg, var(--lilac), var(--lilac-deep)); border-radius:5px 5px 0 0; transition:filter .15s ease; }
  .pres-col:hover i{ filter:brightness(1.3); }
  @media (max-width:700px){
    .pres-kpis{ grid-template-columns:repeat(2, 1fr); }
    .pres-kpi .num{ font-size:1.65rem; }
    .pres-grade, .pres-grade.compacta{ grid-template-columns:1fr; }
    .pres-busca{ flex:1 1 100%; }
    .pres-aovivo{ margin-right:0; }
  }
  @media (prefers-reduced-motion:reduce){
    .pres-aovivo i, .pres-card.est-ativo .pres-avatar, .pres-entra .pres-card{ animation:none; }
    .pres-card, .pres-kpi, .pres-bar > i{ transition:none; }
  }
  @media (max-width:700px){
    .pres-linha{ grid-template-columns:1fr; gap:4px; padding:12px; }
    .pres-pessoa{ grid-template-columns:1fr; padding:12px; }
    .pres-pagina-linha{ grid-template-columns:1fr 70px; }
    .pres-pagina-linha .pres-bar{ grid-column:1 / -1; order:3; margin-top:0; }
    .pres-detalhe{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .pres-detalhe table{ min-width:440px; }
    .pres-detalhe td, .pres-detalhe th{ white-space:nowrap; }
    .pres-detalhe td:nth-child(4){ white-space:normal; min-width:150px; }
  }

  /* ---------- Barra de membros do canal / atendimento (estilo Discord) — release X ----------
     Só aparece pra equipe, dentro de um canal interno ou de um atendimento aberto. No computador é uma coluna fixa à direita; no celular, uma folha opaca
     colada embaixo (com a tela escurecida atrás) aberta pelo botão 👥 do cabeçalho. */
  .dm-body{ flex:1; display:flex; min-height:0; min-width:0; }
  .dm-body > #staffMessagesWrap{ min-width:0; }
  .dm-members{ width:236px; flex-shrink:0; border-left:1px solid var(--glass-border); overflow-y:auto; padding:6px 0 16px; background:var(--tint); }
  .dm-members[hidden]{ display:none; }
  .dm-members-head{ display:none; align-items:center; justify-content:space-between; padding:12px 16px 4px; font-weight:600; color:var(--ink-1); }
  .dm-members-close{ width:44px; height:44px; margin:-8px -10px -8px 0; border:0; background:transparent; color:var(--ink-2); font-size:1rem; cursor:pointer; }
  .dm-membros-grupo{ padding:14px 16px 4px; font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-3); font-weight:600; }
  .dm-membro{ display:flex; align-items:center; gap:10px; padding:5px 10px; margin:1px 6px; border-radius:8px; color:var(--ink-1); font-size:0.88rem; }
  .dm-membro:hover{ background:var(--tint-hover); }
  .dm-membro.offline{ opacity:0.5; }
  .dm-membro-av{ position:relative; width:32px; height:32px; flex-shrink:0; }
  .dm-membro-av .dm-avatar{ width:32px; height:32px; font-size:0.78rem; }
  .dm-membro-av .pres-dot{ position:absolute; right:-3px; bottom:-3px; width:12px; height:12px; box-sizing:border-box; border:3px solid var(--surface, #11191f); box-shadow:none; }
  .dm-membro-av .pres-dot.off{ background:var(--ink-3); border-color:var(--surface, #11191f); }
  .dm-membro-nome{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dm-membro-tag{ font-family:'JetBrains Mono', monospace; font-size:0.58rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--lilac); white-space:nowrap; }
  .dm-members-toggle[aria-pressed="true"]{ background:var(--tint-hover); border-color:var(--lilac); }
  .dm-members-count:empty{ display:none; }
  @media (max-width:700px){
    .dm-members{ position:fixed; left:0; right:0; bottom:0; width:auto; max-height:70vh; max-height:70dvh; z-index:60; border-left:0; border-top:1px solid var(--glass-border); border-radius:16px 16px 0 0; background:var(--surface-hi); box-shadow:0 0 0 100vmax rgba(0,0,0,0.5); padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
    .dm-members-head{ display:flex; }
    .dm-membro{ min-height:44px; }
  }

  /* ---------- Estilo do NOME por cargo (admin / funcionário) — release Y ----------
     As regras de `html .nm-admin` e `html .nm-funcionario` (cor, fonte, efeitos) NÃO estão aqui: o insignias-ui.js as gera a partir do que o admin definiu
     e injeta numa <style id="kuutar-estilos-nome">. Aqui ficam só as animações que elas usam e a tabela do painel. */
  @keyframes nm-refl{ from{ background-position:150% 0, 0 0; } to{ background-position:-50% 0, 0 0; } }
  @keyframes nm-hue-brilho{ from{ filter:drop-shadow(0 0 4px #ff4d4d) drop-shadow(0 0 10px #ff4d4d) hue-rotate(0deg); } to{ filter:drop-shadow(0 0 4px #ff4d4d) drop-shadow(0 0 10px #ff4d4d) hue-rotate(360deg); } }
  @keyframes nm-pisca{ 0%, 100%{ opacity:0.35; transform:scale(0.8); } 50%{ opacity:1; transform:scale(1.15); } }
  @media (prefers-reduced-motion:reduce){
    html .nm-admin, html .nm-funcionario, html .nm-previa, html .nm-admin::after, html .nm-funcionario::after, html .nm-previa::after{ animation:none !important; }
  }
  .nm-tabela{ display:flex; flex-direction:column; border:1px solid var(--glass-border); border-radius:12px; overflow:hidden; }
  .nm-linha{ display:grid; grid-template-columns:minmax(120px, 1fr) minmax(170px, 1.6fr) minmax(120px, 1fr) auto; gap:8px 16px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--glass-border); font-size:0.86rem; color:var(--ink-2); }
  .nm-linha:last-child{ border-bottom:none; }
  .nm-linha.nm-cabeca{ padding-top:9px; padding-bottom:9px; background:var(--tint); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3); font-family:'JetBrains Mono', monospace; }
  .nm-col-acoes{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
  .nm-exemplo, .nm-previa-txt{ font-weight:600; font-size:0.98rem; color:var(--ink-1); }
  @media (max-width:700px){
    .nm-linha{ grid-template-columns:1fr; }
    .nm-linha.nm-cabeca{ display:none; }
    .nm-col-acoes{ justify-content:flex-start; }
  }

  /* ---------- Menções, respostas e reações — release Z ----------
     Tudo que a tela mostra aqui vem do servidor (lib/mensagensExtras.js); o CSS só desenha. */
  .dm-composer{ position:relative; }
  .dm-mencao{ padding:0 3px; border-radius:4px; background:rgba(201,166,255,0.18); color:var(--lilac); font-weight:600; }
  .dm-mencao.eu{ background:rgba(245,196,81,0.24); color:var(--gold-hi); }
  .dm-message.is-mencao{ background:rgba(245,196,81,0.07); box-shadow:inset 3px 0 0 var(--gold-hi); }
  .dm-message.flash{ animation:dm-flash 1.6s ease; }
  @keyframes dm-flash{ 0%, 60%{ background:rgba(201,166,255,0.22); } 100%{ background:transparent; } }
  /* Citação de resposta: em LINHA e dentro da largura da mensagem. Antes a classe .dm-resposta também era a das respostas rápidas (flex-direction:column) e a citação herdava isso: o texto longo não encolhia e escapava pros lados. */
  .dm-message .dm-resposta{ display:flex; flex-direction:row; align-items:baseline; gap:6px; max-width:100%; min-width:0; box-sizing:border-box; overflow:hidden; margin:0 0 3px; padding:2px 8px; border:0; border-left:2px solid var(--glass-border); background:none; font:inherit; font-size:0.78rem; color:var(--ink-3); text-align:left; cursor:pointer; }
  .dm-message .dm-resposta.sem-alvo{ cursor:default; font-style:italic; }
  .dm-resposta-quem{ flex-shrink:0; font-weight:600; color:var(--ink-2); }
  .dm-resposta-txt{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dm-reacoes{ display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
  .dm-reacao{ display:inline-flex; align-items:center; gap:4px; padding:1px 8px; border-radius:999px; border:1px solid var(--glass-border); background:var(--tint); color:var(--ink-2); font:inherit; font-size:0.78rem; cursor:pointer; }
  .dm-reacao.eu{ border-color:var(--lilac); background:rgba(201,166,255,0.16); color:var(--ink-1); }
  .dm-reacao:disabled{ cursor:default; opacity:0.7; }
  .dm-reacao-menu{ position:fixed; z-index:400; display:flex; gap:2px; padding:4px; border-radius:12px; background:var(--surface-hi); border:1px solid var(--glass-border); box-shadow:0 8px 24px rgba(0,0,0,0.35); }
  .dm-reacao-menu button{ width:36px; height:36px; border:0; border-radius:8px; background:none; font-size:1.15rem; cursor:pointer; }
  .dm-reacao-menu button:hover{ background:var(--tint-hover); }
  .dm-respondendo{ display:flex; align-items:center; gap:8px; margin-bottom:6px; padding:6px 12px; border-radius:8px; border-left:3px solid var(--lilac); background:var(--tint); font-size:0.8rem; color:var(--ink-2); }
  .dm-respondendo[hidden]{ display:none; }
  .dm-respondendo-txt{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dm-respondendo-x{ padding:4px 8px; border:0; background:none; color:var(--ink-3); font-size:0.95rem; cursor:pointer; }
  .dm-mencoes-menu{ position:absolute; left:12px; bottom:100%; z-index:50; width:min(360px, calc(100% - 24px)); display:flex; flex-direction:column; padding:4px; border-radius:12px; background:var(--surface-hi); border:1px solid var(--glass-border); box-shadow:0 8px 24px rgba(0,0,0,0.35); }
  .dm-mencoes-menu[hidden]{ display:none; }
  .dm-mencao-item{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:8px 10px; border:0; border-radius:8px; background:none; color:var(--ink-1); font:inherit; text-align:left; cursor:pointer; }
  .dm-mencao-item.ativo, .dm-mencao-item:hover{ background:var(--tint-hover); }
  .dm-mencao-item small{ color:var(--ink-3); }
  .dm-arroba{ flex-shrink:0; margin-left:auto; background:var(--gold-hi); color:#241a00; }
  .aviso-toasts{ position:fixed; right:16px; bottom:76px; z-index:500; display:flex; flex-direction:column-reverse; align-items:flex-end; gap:8px; max-width:min(340px, calc(100vw - 32px)); pointer-events:none; }
  .aviso-toasts > *{ pointer-events:auto; }
  .mencao-toast.aviso-msg{ border-color:var(--lilac); }
  .aviso-toast-texto{ flex:1; min-width:0; overflow-wrap:anywhere; }
  .aviso-toast-x{ flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; margin:-6px -8px -6px 0; border-radius:50%; color:var(--ink-3); font-size:1.2rem; line-height:1; cursor:pointer; }
  .aviso-toast-x:hover{ background:var(--tint-hover); color:var(--ink-1); }
  @media (pointer:coarse){ .aviso-toast-x{ width:40px; height:40px; margin:-10px -12px -10px 0; } }
  @media (prefers-reduced-motion:no-preference){ .aviso-toasts > *{ animation:aviso-entra .22s ease-out; } }
  @keyframes aviso-entra{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
  .mencao-toast{ display:flex; align-items:center; gap:10px; max-width:min(340px, calc(100vw - 32px)); padding:12px 16px; border-radius:12px; background:var(--surface-hi); border:1px solid var(--gold-hi); box-shadow:0 10px 30px rgba(0,0,0,0.4); color:var(--ink-1); font-size:0.88rem; text-decoration:none; }
  @media (prefers-reduced-motion:reduce){ .dm-message.flash{ animation:none; } }
  @media (pointer:coarse){
    .dm-reacao{ min-height:34px; padding:2px 10px; }
    .dm-reacao-menu button{ width:42px; height:42px; }
    .dm-respondendo-x{ min-width:44px; min-height:44px; }
    .dm-mencao-item{ min-height:44px; }
  }

  /* ---------- "Digitando…" e "visto pela equipe" — release AA ---------- */
  .dm-digitando{ display:flex; align-items:center; gap:7px; width:fit-content; max-width:calc(100% - 24px); margin:0 12px 6px; padding:4px 11px 4px 9px; border-radius:999px; font-size:0.78rem; font-weight:600; color:var(--ink-1);
    background:rgba(157,123,255,0.16); background:color-mix(in srgb, var(--lilac) 16%, transparent); border:1px solid rgba(157,123,255,0.5); border:1px solid color-mix(in srgb, var(--lilac) 50%, transparent);
    box-shadow:0 0 0 2px rgba(157,123,255,0.10), 0 3px 10px rgba(124,92,255,0.2); }
  .dm-dig-txt{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dm-dig-pontos{ display:inline-flex; align-items:center; gap:3px; flex:none; }
  .dm-dig-pontos i{ display:block; width:5px; height:5px; border-radius:50%; background:var(--lilac); }
  @media (prefers-reduced-motion: no-preference){
    .dm-digitando{ animation:dm-dig-entra .22s ease-out; }
    .dm-dig-pontos i{ animation:dm-dig-pulo 1.1s ease-in-out infinite; }
    .dm-dig-pontos i:nth-child(2){ animation-delay:.16s; }
    .dm-dig-pontos i:nth-child(3){ animation-delay:.32s; }
  }
  @keyframes dm-dig-entra{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
  @keyframes dm-dig-pulo{ 0%,70%,100%{ transform:translateY(0); opacity:.55; } 35%{ transform:translateY(-3px); opacity:1; } }
  .dm-digitando[hidden]{ display:none; }
  .dm-entrega{ align-self:flex-end; margin:2px 4px 8px; font-size:0.72rem; color:var(--ink-3); text-align:right; }
  .dm-entrega.visto{ color:var(--ok); }

  /* ---------- Ficha do cliente (equipe) — release AB ---------- */
  .ficha-modal{ max-width:560px; max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px); overflow-y:auto; }
  .ficha-nome{ margin:0 0 4px; font-size:1.1rem; }
  .ficha-nome small{ font-weight:400; font-size:0.75rem; color:var(--ink-3); }
  .ficha-sub{ margin:0 0 12px; font-size:0.82rem; color:var(--ink-3); }
  .ficha-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
  .ficha-chip{ padding:3px 10px; border-radius:999px; border:1px solid var(--glass-border); background:var(--tint); font-size:0.78rem; color:var(--ink-2); }
  .ficha-chip strong{ color:var(--ink-1); }
  .ficha-sec{ margin:16px 0 6px; font-size:0.74rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-3); }
  .ficha-sec small{ margin-left:6px; font-weight:400; letter-spacing:0; text-transform:none; }
  .ficha-lista{ display:flex; flex-direction:column; border:1px solid var(--glass-border); border-radius:10px; overflow:hidden; }
  .ficha-linha{ display:grid; grid-template-columns:48px minmax(0, 1fr) auto auto auto; gap:10px; align-items:baseline; padding:7px 10px; border-bottom:1px solid var(--glass-border); font-size:0.8rem; color:var(--ink-2); }
  .ficha-linha:last-child{ border-bottom:0; }
  .ficha-linha.atual{ background:rgba(201,166,255,0.1); }
  .ficha-num{ font-family:'JetBrains Mono', monospace; color:var(--ink-3); }
  .ficha-tit{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ficha-st, .ficha-dia, .ficha-val{ white-space:nowrap; color:var(--ink-3); }
  .ficha-vazio{ margin:4px 0; font-size:0.82rem; color:var(--ink-3); }
  .ficha-notas{ display:flex; flex-direction:column; gap:8px; max-height:220px; overflow-y:auto; }
  .ficha-nota{ padding:8px 10px; border-radius:10px; border-left:3px solid var(--gold-hi); background:var(--tint); }
  .ficha-nota-cab{ display:flex; align-items:center; gap:8px; font-size:0.75rem; color:var(--ink-3); }
  .ficha-nota-cab strong{ color:var(--ink-2); }
  .ficha-nota-cab span{ flex:1; }
  .ficha-nota p{ margin:4px 0 0; font-size:0.85rem; color:var(--ink-1); white-space:pre-wrap; overflow-wrap:anywhere; }
  .ficha-nota-x{ padding:2px 8px; border:0; border-radius:6px; background:none; font-size:0.8rem; color:var(--ink-2); cursor:pointer; }
  .ficha-nota-x:hover{ background:var(--tint-hover); }
  .ficha-nota-x.armado{ background:var(--danger); color:#fff; font-weight:600; }
  .ficha-nova{ margin-top:10px; }
  .ficha-nova textarea{ width:100%; box-sizing:border-box; padding:8px 10px; border:1px solid var(--glass-border); border-radius:10px; background:var(--tint); color:var(--ink-1); font:inherit; font-size:0.88rem; resize:vertical; }
  .ficha-nova-rodape{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
  .ficha-contador{ font-size:0.72rem; color:var(--ink-3); }
  @media (max-width:700px){
    .ficha-linha{ grid-template-columns:44px minmax(0, 1fr) auto; }
    .ficha-dia, .ficha-val{ grid-column:2 / -1; }
    .ficha-nova textarea{ font-size:16px; }
    .ficha-nota-x{ min-width:44px; min-height:40px; }
  }

  /* ---------- Painel admin mais fluido (release AQ) ----------
     Só aparência e movimento (nenhuma regra mudou). O menu lateral ganha realce animado, ícone que reage e barrinha de destaque; cada painel entra com um fade
     suave e os cartões, botões, campos e linhas respondem ao mouse. Tudo escopado ao admin (.admin-nav-item, #editorScreen, .admin-panel) — a lista de canais de
     Mensagens usa o mesmo .dm-channel e NÃO muda. Por variáveis (vale no tema claro). Quem pede "reduzir movimento" no sistema fica sem animação. */
  #editorScreen .dm-sidebar{ gap:3px; padding-top:16px; background:linear-gradient(180deg, var(--surface), transparent 160%); }
  .admin-nav-item{ position:relative; gap:10px; padding:10px 12px; border-radius:10px; font-weight:500; transition:background .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease; }
  .admin-nav-item::before{ content:""; position:absolute; left:0; top:50%; width:3px; height:0; border-radius:3px; background:linear-gradient(180deg, var(--lilac), var(--lilac-deep)); transform:translateY(-50%); transition:height .24s ease; }
  .admin-nav-item .nav-ico{ display:inline-block; width:1.5em; text-align:center; flex-shrink:0; font-size:1.05rem; transition:transform .28s cubic-bezier(.34,1.56,.64,1); }
  .admin-nav-item:hover{ background:var(--tint-hover); color:var(--ink-1); }
  .admin-nav-item:hover::before{ height:52%; }
  .admin-nav-item:active{ transform:scale(.97); }
  .admin-nav-item:focus-visible{ outline:2px solid var(--lilac); outline-offset:1px; }
  .admin-nav-item.active{ background:linear-gradient(90deg, rgba(124,92,255,0.30), rgba(124,92,255,0.05)); box-shadow:inset 0 0 0 1px var(--glass-border); color:var(--ink-1); font-weight:600; }
  .admin-nav-item.active::before{ height:72%; }
  .admin-nav-item.active .nav-ico{ transform:scale(1.12); }
  .admin-nav-item .nav-badge{ transition:transform .25s cubic-bezier(.34,1.56,.64,1); }
  @media (hover:hover) and (min-width:701px){
    .admin-nav-item:hover{ transform:translateX(4px); }
    .admin-nav-item:hover .nav-ico{ transform:scale(1.28) rotate(-8deg); }
    .admin-nav-item:hover .nav-badge{ transform:scale(1.12); }
  }
  /* cada painel entra suave, e os cartões dele entram em sequência */
  .admin-panel{ animation:adminPainelEntra .36s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes adminPainelEntra{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
  .admin-panel .editor-card{ animation:adminCartaoEntra .5s cubic-bezier(.2,.7,.2,1) both; transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
  .admin-panel .editor-card:nth-of-type(2){ animation-delay:.06s; }
  .admin-panel .editor-card:nth-of-type(3){ animation-delay:.12s; }
  .admin-panel .editor-card:nth-of-type(n+4){ animation-delay:.18s; }
  @keyframes adminCartaoEntra{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
  .admin-panel .editor-card:hover{ border-color:rgba(124,92,255,0.40); box-shadow:0 14px 36px var(--shadow); }
  /* botões, abas e campos */
  .admin-panel .btn{ transition:transform .18s ease, box-shadow .22s ease, border-color .2s ease, background .2s ease, color .2s ease; }
  .admin-panel .btn:active{ transform:scale(.97); }
  .admin-panel .tab-pill{ transition:transform .18s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; }
  .admin-panel .tab-pill:hover{ transform:translateY(-1px); }
  .admin-panel input, .admin-panel select, .admin-panel textarea{ transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; }
  .admin-panel input:focus, .admin-panel select:focus, .admin-panel textarea:focus{ border-color:var(--lilac); box-shadow:0 0 0 3px var(--tint-hover); outline:none; }
  /* listas e linhas de cada painel */
  .pedido-item, .resp-item, .ins-item, .nm-linha, .rel-card, .vit-card, .et-linha, .im-linha, .rel-linha, .service-status-row, .note-row, .audit-row{ transition:background .18s ease, border-color .18s ease, box-shadow .2s ease, transform .2s ease; }
  .pedido-item:hover, .resp-item:hover, .ins-item:hover, .nm-linha:not(.nm-cabeca):hover, .rel-card:hover{ background:var(--tint-hover); border-color:rgba(124,92,255,0.35); transform:translateY(-1px); box-shadow:0 8px 22px var(--shadow); }
  .et-linha:hover, .im-linha:hover, .rel-linha:hover, .service-status-row:hover, .note-row:hover{ background:var(--tint-hover); }
  .admin-panel table tbody tr{ transition:background .15s ease; }
  .admin-panel table tbody tr:hover{ background:var(--tint-hover); }
  @media (prefers-reduced-motion:reduce){
    .admin-panel, .admin-panel .editor-card{ animation:none; }
    .admin-nav-item, .admin-nav-item::before, .admin-nav-item .nav-ico, .admin-panel .btn, .admin-panel .editor-card, .pedido-item, .resp-item, .ins-item, .nm-linha, .rel-card{ transition:none; }
    .admin-nav-item:hover, .admin-nav-item:hover .nav-ico{ transform:none; }
  }

  /* ---------- Polimento do site todo (release AR) ----------
     Só aparência e movimento (nenhuma regra mudou): o mesmo "fluido" do painel admin levado pra home, Mensagens, Minha Conta, entrar/cadastro, Termos e janelas.
     Tudo por variáveis (vale no tema claro). Hover de movimento só com mouse; quem pede "reduzir movimento" no sistema fica sem animação (bloco no fim).
     Aparecer ao rolar: fluido.js (classes .rv/.rv-in, que saem depois da entrada). */
  /* links e marca */
  .nav-links a{ position:relative; transition:color .2s ease; }
  .nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:-5px; height:2px; border-radius:2px; background:linear-gradient(90deg, var(--lilac), var(--lilac-deep)); transform:scaleX(0); transition:transform .26s ease; }
  .nav-links a:hover::after, .nav-links a:focus-visible::after{ transform:scaleX(1); }
  .site-brand{ transition:color .2s ease, opacity .2s ease; }
  .site-brand:hover{ color:var(--lilac); }
  /* botões: brilho que passa no principal, "afundar" ao clicar, fantasma que acende */
  .btn-primary{ position:relative; overflow:hidden; isolation:isolate; }
  .btn-primary::after{ content:""; position:absolute; top:0; bottom:0; left:-70%; width:46%; background:linear-gradient(100deg, transparent, rgba(255,255,255,0.34), transparent); transform:skewX(-20deg); transition:left .65s ease; pointer-events:none; }
  .btn-primary:hover::after{ left:135%; }
  .btn:active{ transform:scale(0.97); }
  .btn-ghost:hover{ background:var(--tint-hover); }
  /* cartões e blocos da home */
  .trust-card, .tiktok-promo-card, .step, .stat{ transition:transform .24s ease, border-color .24s ease, box-shadow .24s ease, background .24s ease; }
  .service-card .icon-badge, .trust-card .icon, .step .n{ transition:transform .32s cubic-bezier(.34,1.56,.64,1); }
  .stat:hover{ background:var(--glass-hi); }
  .step:hover{ background:var(--tint); }
  @media (hover:hover){
    .trust-card:hover, .tiktok-promo-card:hover{ transform:translateY(-3px); border-color:var(--lilac); box-shadow:0 14px 34px var(--shadow); }
    .service-card:hover .icon-badge, .trust-card:hover .icon{ transform:scale(1.12) rotate(-6deg); }
    .step:hover .n{ transform:scale(1.12); }
  }
  /* aparecer ao rolar (fluido.js) */
  .rv{ opacity:0; transform:translateY(18px); transition:opacity .6s ease var(--rv-d, 0ms), transform .6s cubic-bezier(.2,.7,.2,1) var(--rv-d, 0ms); }
  .rv.rv-in{ opacity:1; transform:none; }
  /* campos de formulário (site todo) */
  .field input, .field select, .field textarea{ transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; }
  .field input:hover, .field select:hover, .field textarea:hover{ border-color:rgba(124,92,255,0.35); }
  .field input:focus, .field select:focus, .field textarea:focus{ box-shadow:0 0 0 3px var(--tint-hover); }
  .pw-eye{ transition:transform .2s ease, color .2s ease; }
  .pw-eye:hover{ transform:scale(1.12); }
  /* entradas de página: cartão de entrar/cadastro/recuperar, Minha Conta, Termos */
  .login-card, .termos-card{ animation:siteEntra .5s cubic-bezier(.2,.7,.2,1) both; }
  .account-wrap .editor-card[data-aba]{ animation:adminCartaoEntra .42s cubic-bezier(.2,.7,.2,1) both; transition:border-color .25s ease, box-shadow .25s ease; }
  .account-wrap .editor-card:hover{ border-color:rgba(124,92,255,0.40); box-shadow:0 14px 36px var(--shadow); }
  .account-avatar{ transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
  .account-avatar:hover{ transform:scale(1.06) rotate(-2deg); }
  @keyframes siteEntra{ from{ opacity:0; transform:translateY(16px) scale(0.985); } to{ opacity:1; transform:none; } }
  /* janelas (modais) e menus suspensos */
  .modal-overlay:not([hidden]){ animation:modalFundo .22s ease both; }
  .modal-overlay:not([hidden]) .modal{ animation:modalEntra .3s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes modalFundo{ from{ opacity:0; } to{ opacity:1; } }
  @keyframes modalEntra{ from{ opacity:0; transform:translateY(16px) scale(0.97); } to{ opacity:1; transform:none; } }
  .dm-dropdown{ animation:menuEntra .18s ease both; }
  @keyframes menuEntra{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
  .dm-dropdown-item{ transition:background .15s ease, color .15s ease; }
  .modal-close{ transition:background .2s ease, color .2s ease, transform .2s ease; }
  .modal-close:hover{ transform:rotate(90deg); }
  /* Mensagens (equipe e cliente): a lista de canais/atendimentos ganha o mesmo realce do menu do admin; as mensagens em si NÃO animam (a lista se redesenha) */
  .dm-channel{ position:relative; transition:background .2s ease, color .2s ease, transform .2s ease; }
  .dm-channel::before{ content:""; position:absolute; left:0; top:50%; width:3px; height:0; border-radius:3px; background:linear-gradient(180deg, var(--lilac), var(--lilac-deep)); transform:translateY(-50%); transition:height .22s ease; }
  .dm-channel:hover::before{ height:50%; }
  .dm-channel.active{ background:linear-gradient(90deg, rgba(124,92,255,0.28), rgba(124,92,255,0.05)); }
  .dm-channel.active::before{ height:70%; }
  .dm-channel:active{ transform:scale(0.985); }
  .dm-channel:focus-visible{ outline:2px solid var(--lilac); outline-offset:1px; }
  @media (hover:hover) and (min-width:701px){
    .dm-channel:hover{ transform:translateX(3px); }
  }
  .dm-mtab, .dm-header-action, .dm-kebab-btn, .dm-attach-btn{ transition:background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease; }
  .dm-kebab-btn:hover, .dm-attach-btn:hover{ transform:scale(1.08); }
  /* O "aperto" vale só nos botões: .dm-header-action também CONTÉM o painel suspenso (💳 cobrar, ⋮ mais opções) e, com transform, ele viraria o bloco de
     referência do painel (position:fixed no celular) — tocar no campo de valor fazia o painel pular e o clique cair fora, fechando tudo. */
  .dm-mtab:active, .dm-header-action > .dm-kebab-btn:active{ transform:scale(0.96); }
  .nav-badge{ transition:transform .25s cubic-bezier(.34,1.56,.64,1); }
  @media (prefers-reduced-motion:reduce){
    .login-card, .termos-card, .account-wrap .editor-card[data-aba], .modal-overlay:not([hidden]), .modal-overlay:not([hidden]) .modal, .dm-dropdown{ animation:none; }
    .btn-primary::after{ display:none; }
    .nav-links a::after, .trust-card, .tiktok-promo-card, .step, .stat, .service-card .icon-badge, .trust-card .icon, .step .n, .dm-channel, .dm-channel::before, .modal-close, .pw-eye, .account-avatar{ transition:none; }
    .trust-card:hover, .tiktok-promo-card:hover, .dm-channel:hover, .modal-close:hover, .account-avatar:hover{ transform:none; }
  }

  /* ---------- Histórico de "visto por último" do cliente (release AS) ----------
     Na barra de membros do atendimento (equipe): embaixo do cliente, o "visto por último" e o botão que abre a lista das visitas dele a este atendimento.
     No celular a barra é a folha de baixo (já tem rolagem). O aviso discreto pro CLIENTE fica embaixo do campo de texto da conversa dele. */
  .dm-cli-visto{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px 8px; margin:0 6px 4px; padding:2px 10px 6px 10px; font-size:0.74rem; color:var(--ink-3); }
  .dm-cli-visto span{ min-width:0; flex:1 1 auto; line-height:1.35; }
  .dm-cli-hist-btn{ flex-shrink:0; padding:3px 9px; border-radius:999px; border:1px solid var(--glass-border); background:var(--tint); color:var(--ink-2); font:inherit; font-size:0.72rem; cursor:pointer; transition:background .2s ease, border-color .2s ease, color .2s ease; }
  .dm-cli-hist-btn:hover, .dm-cli-hist-btn[aria-expanded="true"]{ background:var(--tint-hover); border-color:var(--lilac); color:var(--ink-1); }
  .dm-cli-hist{ margin:0 12px 8px; padding:10px 12px; border-radius:10px; background:var(--row-bg); border:1px solid var(--glass-border); font-size:0.78rem; color:var(--ink-2); }
  .dm-cli-hist[hidden]{ display:none; }
  .dm-cli-hist-topo{ font-weight:600; color:var(--ink-1); margin-bottom:6px; }
  .dm-cli-hist-sub{ margin:8px 0 4px; font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3); }
  .dm-cli-hist-item{ display:flex; justify-content:space-between; gap:8px; padding:3px 0; border-top:1px solid var(--glass-border); font-variant-numeric:tabular-nums; }
  .dm-cli-hist-item:first-of-type{ border-top:none; }
  .dm-cli-hist-item.agora{ color:var(--ok); font-weight:600; }
  .dm-cli-hist-vazio{ color:var(--ink-3); }
  .dm-cli-hist-rodape{ margin-top:8px; font-size:0.68rem; color:var(--ink-3); line-height:1.4; }
  .dm-visto-aviso{ margin:4px 4px 0; text-align:center; font-size:0.7rem; color:var(--ink-3); }

  /* ===== Dados de acesso mais bem encaixados (release AV) =====
     Antes: uma barra FIXA entre a conversa e o campo de texto (quebrava em 3-4 linhas no celular e comia a conversa).
     Equipe: botão 🔐 no cabeçalho + menu (no celular, a folha de baixo, como o 💳); o pontinho mostra o estado sem abrir o menu.
     Cliente: faixa fina de uma linha logo abaixo do cabeçalho (o texto longo vira dica e some no celular). */
  .dm-acesso-btn{ position:relative; }
  .dm-acesso-dot{ position:absolute; top:2px; right:2px; width:9px; height:9px; border-radius:50%; border:2px solid var(--surface); box-sizing:border-box; }
  .dm-acesso-dot[hidden]{ display:none; }
  .dm-acesso-dot.is-ok{ background:var(--ok); }
  .dm-acesso-dot.is-wait{ background:var(--gold); }
  .dm-acesso-dropdown{ min-width:260px; max-width:320px; }
  .dm-acesso-dropdown .dm-acesso-bar{ display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; flex-wrap:nowrap; gap:10px; margin:0; padding:2px 6px 8px; border:0; background:none; }
  .dm-acesso-dropdown .dm-acesso-texto{ flex:0 0 auto; }
  .dm-acesso-dropdown .dm-acesso-botoes{ flex-direction:column; }
  .dm-acesso-dropdown .dm-acesso-botoes .btn{ width:100%; justify-content:center; }
  .dm-acesso-bar.is-topo{ flex-wrap:nowrap; gap:10px; margin:8px 20px 0; padding:6px 8px 6px 12px; font-size:0.8rem; }
  .dm-acesso-bar.is-topo .dm-acesso-texto{ flex:1 1 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dm-acesso-bar.is-topo .btn{ flex-shrink:0; padding:5px 12px; }
  @media (max-width:700px){ .dm-acesso-bar.is-topo{ margin:6px 10px 0; padding:5px 6px 5px 10px; } }
  .so-sm{ display:none; } /* "só no celular": a versão curta do texto (o par do .hide-sm, que esconde a longa em ≤ 480 px) */
  @media (max-width:480px){ .so-sm{ display:inline; } }
  @media (max-width:700px){ .dm-acesso-dropdown{ max-width:none; } } /* no celular a folha ocupa a largura toda, como os outros menus */

  /* ===== Links de pedido (release AW) =====
     Admin: o endereço do link numa linha com o botão de copiar (quebra em qualquer largura, sem rolagem de lado).
     Cliente: aviso discreto no topo do formulário quando o link trouxe algo que não está mais disponível (ex.: método fora do ar). */
  .lk-url{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
  .lk-url code{ flex:1 1 220px; min-width:0; padding:6px 10px; border:1px solid var(--glass-border); border-radius:8px; background:var(--surface); font-size:0.78rem; overflow-wrap:anywhere; user-select:all; }
  .pedido-aviso{ margin:0 0 12px; padding:8px 12px; border:1px solid var(--glass-border); border-radius:10px; background:var(--tint); color:var(--ink-2); font-size:0.8rem; line-height:1.45; }
  .pedido-aviso[hidden]{ display:none; }

  /* ===== Ferramentas grátis (release AX) — ferramentas.html =====
     Cartões com campos em grade (1 coluna no celular), resultado em linhas e botões de jogo em "chips". Só variáveis do tema (claro/escuro). */
  .ft-jogos{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
  .ft-jogo{ padding:9px 16px; border-radius:999px; border:1px solid var(--glass-border); background:var(--tint); color:var(--ink-2); font:inherit; font-size:0.86rem; cursor:pointer; transition:background .15s, border-color .15s, color .15s; }
  .ft-jogo:hover{ border-color:var(--accent, var(--ink-3)); color:var(--ink-1); }
  .ft-jogo.is-ativo{ background:var(--accent, #7c5cff); border-color:var(--accent, #7c5cff); color:#fff; font-weight:600; }
  .ft-ajuda{ margin:-6px 0 14px; font-size:0.84rem; line-height:1.55; color:var(--ink-3); }
  .ft-grade{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:0 16px; }
  .ft-check{ margin:2px 0 12px; }
  .ft-avancado{ margin:4px 0 14px; padding:10px 12px; border:1px solid var(--glass-border); border-radius:12px; background:var(--tint); }
  .ft-avancado summary{ cursor:pointer; font-size:0.84rem; color:var(--ink-2); }
  .ft-avancado[open] summary{ margin-bottom:10px; }
  .ft-resultado{ display:flex; flex-direction:column; gap:2px; margin-top:6px; padding:6px 14px; border:1px solid var(--glass-border); border-radius:12px; background:var(--tint); }
  .ft-res-linha{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:2px 14px; padding:9px 0; border-top:1px solid var(--glass-border); font-size:0.88rem; }
  .ft-res-linha:first-child{ border-top:0; }
  .ft-res-rot{ color:var(--ink-3); }
  .ft-res-val{ color:var(--ink-1); font-variant-numeric:tabular-nums; text-align:right; overflow-wrap:anywhere; }
  .ft-res-linha.is-destaque .ft-res-val{ color:var(--ok); font-size:0.98rem; }
  .ft-nota{ margin:10px 2px 0; font-size:0.74rem; line-height:1.5; color:var(--ink-3); }
  .ft-cta .btn{ margin:4px 8px 4px 0; }
  .ft-intro .termos-intro, .ft-cta .termos-intro{ font-size:0.92rem; line-height:1.6; color:var(--ink-2); }
  @media (max-width:480px){ .ft-grade{ grid-template-columns:1fr; } .ft-res-linha{ flex-direction:column; align-items:flex-start; } .ft-res-val{ text-align:left; } }


  /* ===== Campanhas de e-mail e convite de novidades (release AY) =====
     Convite único em "Meus pedidos" (texto + dois botões, quebra no celular) e a prévia do e-mail no admin (iframe sandbox, largura toda). */
  .mk-convite{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 14px; margin-bottom:14px; padding:12px 14px; border:1px solid var(--glass-border); border-radius:12px; background:var(--tint); font-size:0.86rem; line-height:1.5; color:var(--ink-2); }
  .mk-convite[hidden]{ display:none; }
  .mk-convite-acoes{ display:flex; flex-wrap:wrap; gap:8px; }
  .cmp-previa{ width:100%; height:420px; border:1px solid var(--glass-border); border-radius:12px; background:#f3f0ff; }

  /* ===== Release BC — aba de Mensagens: lista com prévia, chips, mensagens agrupadas, ir pro fim, progresso, esqueletos, atalhos, modo compacto ===== */
  /* Lista de conversas: avatar de inicial + nome/hora em cima, prévia da última mensagem embaixo */
  .dm-channel.dm-conv{ align-items:flex-start; gap:10px; padding:9px 10px; }
  .dm-conv-av{ flex-shrink:0; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.85rem; color:var(--on-accent); background:var(--lilac); }
  .dm-conv-av.av-0{ background:linear-gradient(135deg,#7c5cff,#5b3fd6); }
  .dm-conv-av.av-1{ background:linear-gradient(135deg,#2ea97c,#1d7d5a); }
  .dm-conv-av.av-2{ background:linear-gradient(135deg,#e0794a,#b9532a); }
  .dm-conv-av.av-3{ background:linear-gradient(135deg,#3a8fd6,#2468a8); }
  .dm-conv-av.av-4{ background:linear-gradient(135deg,#c9559f,#963b78); }
  .dm-conv-av.av-5{ background:linear-gradient(135deg,#b08a1f,#876a14); }
  .dm-conv-av.av-tipo{ background:var(--tint-hover); color:var(--ink-1); font-size:1rem; }
  .dm-conv-corpo{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .dm-conv-linha1, .dm-conv-linha2{ display:flex; align-items:baseline; gap:8px; min-width:0; }
  .dm-conv-linha1 .dm-channel-name{ font-weight:600; color:var(--ink-1); }
  .dm-conv-hora{ flex-shrink:0; margin-left:auto; font-size:0.68rem; color:var(--ink-3); }
  .dm-conv-previa{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:0.78rem; color:var(--ink-3); }
  .dm-channel.has-unread .dm-conv-previa{ color:var(--ink-2); font-weight:600; }
  .dm-channel.has-unread .dm-conv-hora{ color:var(--lilac); font-weight:700; }
  .dm-channel.dm-conv > .dm-unread{ align-self:center; margin-left:4px; }
  .dm-channel.dm-conv.active .dm-conv-av{ box-shadow:0 0 0 2px var(--lilac); }

  /* Chips de filtro (equipe): uma faixa rolável, sempre à vista */
  .dm-chips-wrap{ display:flex; align-items:center; gap:4px; min-width:0; }
  .dm-chips{ flex:1; min-width:0; display:flex; gap:6px; overflow-x:auto; padding:2px 0 4px; scrollbar-width:none; scroll-behavior:smooth; }
  .dm-chips-seta{ flex:0 0 auto; width:26px; height:26px; margin-bottom:2px; border-radius:50%; border:1px solid var(--glass-border); background:var(--field-bg); color:var(--ink-1); font-size:1.05rem; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0 0 2px; }
  .dm-chips-seta:hover{ background:var(--tint-hover); border-color:var(--lilac); }
  .dm-chips-seta[hidden]{ display:none; }
  .dm-chips::-webkit-scrollbar{ display:none; }
  .dm-chip{ flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:999px; border:1px solid var(--glass-border); background:var(--field-bg); color:var(--ink-2); font-family:inherit; font-size:0.76rem; cursor:pointer; white-space:nowrap; }
  .dm-chip:hover{ background:var(--tint-hover); color:var(--ink-1); }
  .dm-chip.active{ background:rgba(124,92,255,0.22); border-color:var(--lilac); color:var(--ink-1); font-weight:600; }
  .dm-chip-n{ font-family:'JetBrains Mono', monospace; font-size:0.68rem; color:var(--ink-3); }
  .dm-chip-n:empty{ display:none; }
  .dm-chip.active .dm-chip-n{ color:var(--ink-1); }

  /* Mensagens seguidas do mesmo autor: sem repetir avatar e nome; a hora aparece ao passar o mouse */
  .dm-message.is-seguida{ margin-top:0; }
  .dm-seg-hora{ width:38px; flex-shrink:0; padding-top:3px; text-align:center; font-size:0.64rem; color:var(--ink-3); opacity:0; transition:opacity .15s; }
  .dm-message.is-seguida:hover .dm-seg-hora{ opacity:1; }
  .dm-message.is-seguida .dm-message-head{ display:none; }
  .dm-dia{ margin:6px 0; }
  .dm-dia span{ font-weight:600; letter-spacing:0.02em; }
  @media (hover:none){ .dm-seg-hora{ visibility:hidden; } }

  /* Botão "ir para o fim" (flutua sobre a lista de mensagens, sem ocupar espaço) */
  .dm-ir-fim-wrap{ position:sticky; bottom:8px; height:0; margin-top:-16px; display:flex; justify-content:center; overflow:visible; pointer-events:none; z-index:3; }
  .dm-ir-fim{ transform:translateY(-100%); min-width:38px; height:34px; padding:0 14px; border-radius:999px; border:1px solid var(--glass-border); background:var(--surface-hi, var(--surface)); color:var(--ink-1); font-family:inherit; font-size:0.82rem; font-weight:600; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,0.28); opacity:0; pointer-events:none; transition:opacity .18s; }
  .dm-ir-fim.visivel{ opacity:1; pointer-events:auto; }
  .dm-ir-fim:hover{ border-color:var(--lilac); }

  /* Andamento do pedido (cliente e equipe) */
  .dm-progresso{ flex-shrink:0; padding:10px 20px; border-bottom:1px solid var(--glass-border); }
  .dm-progresso[hidden]{ display:none; }
  .dm-prog{ list-style:none; display:flex; align-items:center; margin:0; padding:0; }
  .dm-prog li{ display:flex; align-items:center; gap:7px; flex:1 1 0; min-width:0; font-size:0.76rem; color:var(--ink-3); }
  .dm-prog li:last-child{ flex:0 0 auto; }
  .dm-prog li::after{ content:""; flex:1; height:2px; margin:0 8px; border-radius:2px; background:var(--glass-border); }
  .dm-prog li:last-child::after{ display:none; }
  .dm-prog li.feito::after{ background:var(--lilac); }
  .dm-prog-bola{ flex-shrink:0; width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:700; border:2px solid var(--glass-border); color:var(--ink-3); }
  .dm-prog li.feito .dm-prog-bola{ background:var(--lilac); border-color:var(--lilac); color:var(--on-accent); }
  .dm-prog li.atual .dm-prog-bola{ border-color:var(--lilac); color:var(--ink-1); box-shadow:0 0 0 3px rgba(124,92,255,0.25); }
  .dm-prog li.atual, .dm-prog li.feito{ color:var(--ink-1); }
  .dm-prog li.atual .dm-prog-nome{ font-weight:700; }
  .dm-prog-nome{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  @media (max-width:560px){ .dm-progresso{ padding:8px 12px; } .dm-prog li:not(.atual) .dm-prog-nome{ display:none; } .dm-prog li.atual{ flex:0 0 auto; } .dm-prog li::after{ margin:0 5px; } }

  /* Esqueletos de carregamento */
  .dm-skel{ display:block; border-radius:8px; background:linear-gradient(90deg, var(--tint) 25%, var(--tint-hover) 50%, var(--tint) 75%); background-size:200% 100%; animation:dmSkel 1.3s ease-in-out infinite; }
  @keyframes dmSkel{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }
  .dm-skel-item, .dm-skel-msg{ display:flex; gap:10px; align-items:center; padding:9px 10px; }
  .dm-skel-av{ width:34px; height:34px; border-radius:50%; flex-shrink:0; }
  .dm-skel-col{ flex:1; display:flex; flex-direction:column; gap:7px; min-width:0; }
  .dm-skel-l1{ height:11px; width:55%; }
  .dm-skel-l2{ height:9px; width:80%; }
  .dm-skel-l3{ height:12px; width:70%; }
  .dm-skel-l3.curta{ width:38%; }
  .dm-skel-wrap{ display:flex; flex-direction:column; gap:14px; }
  @media (prefers-reduced-motion:reduce){ .dm-skel{ animation:none; } }

  /* Tela sem conversa aberta */
  .dm-vazio-card{ display:flex; flex-direction:column; align-items:center; gap:8px; max-width:360px; }
  .dm-vazio-ic{ font-size:2.2rem; width:68px; height:68px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--tint); margin-bottom:4px; }
  .dm-vazio-card strong{ color:var(--ink-1); font-size:1.05rem; }
  .dm-atalhos{ margin-top:6px; font-size:0.76rem; color:var(--ink-3); }
  .dm-atalhos kbd{ font-family:'JetBrains Mono', monospace; font-size:0.7rem; padding:1px 6px; border-radius:5px; border:1px solid var(--glass-border); background:var(--field-bg); color:var(--ink-2); }

  /* Modo compacto (botão ☰ no topo; preferência só deste navegador) */
  .dm-compacto .dm-channel.dm-conv{ align-items:center; padding:5px 8px; gap:8px; }
  .dm-compacto .dm-conv-linha2{ display:none; }
  .dm-compacto .dm-conv-av{ width:24px; height:24px; font-size:0.72rem; }
  .dm-compacto .dm-conv-linha1 .dm-channel-name{ font-weight:500; }
  .dm-compacto .dm-sidebar-label{ padding-top:6px; padding-bottom:3px; }
  .dm-compacto .dm-messages{ gap:9px; padding-top:12px; }
  .dm-compacto .dm-message{ gap:9px; }
  .dm-compacto .dm-avatar{ width:30px; height:30px; font-size:0.8rem; }
  .dm-compacto .dm-seg-hora{ width:30px; }
  .dm-compacto .dm-message.is-seguida{ margin-top:0; }
  .dm-compacto .dm-message-text{ font-size:0.88rem; line-height:1.4; }
  .dm-compacto .dm-progresso{ padding-top:6px; padding-bottom:6px; }

  #densBtn{ font-size:0.95rem; line-height:1; }
  @media (max-width:700px){ #densBtn{ display:none; } } /* no celular a lista já ocupa a tela toda: o topo não comporta mais um botão */

  /* Faixa do cliente no celular (abas horizontais): sem prévia nem avatar, só o nome do atendimento */
  @media (max-width:700px){
    #customerView .dm-sidebar .dm-conv-av, #customerView .dm-sidebar .dm-conv-hora, #customerView .dm-sidebar .dm-conv-linha2 .dm-conv-previa{ display:none; }
    #customerView .dm-sidebar .dm-channel.dm-conv{ align-items:center; }
    #customerView .dm-sidebar .dm-conv-corpo, #customerView .dm-sidebar .dm-conv-linha1, #customerView .dm-sidebar .dm-conv-linha2{ flex-direction:row; align-items:center; gap:6px; }
  }

  /* ===== Release BD — Mensagens: qualidade visual (barra de ícones, lista, cabeçalho, balões, cartões, composer, micro-animações) ===== */
  :root{ --bd-r-sm:8px; --bd-r-md:12px; --bd-r-lg:16px; --st-azul:#6db3ff; --st-laranja:#ffa45c; --st-roxo:#b9a2ff; --st-vermelho:#ff7b7b; }
  html[data-theme="light"]{ --st-azul:#1d63b8; --st-laranja:#a85208; --st-roxo:#5b3fd6; --st-vermelho:#c0392b; }

  /* Cabeçalho da lista (equipe): título + contagem, busca com lupa e atalho */
  .dm-side-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:2px 6px 10px; }
  .dm-side-head h2{ margin:0; font-family:'Work Sans', sans-serif; font-size:1.1rem; font-weight:700; letter-spacing:0; text-transform:none; color:var(--ink-1); }
  .dm-side-count{ font-size:0.72rem; font-weight:700; color:var(--ink-2); background:var(--tint-hover); padding:2px 10px; border-radius:999px; }
  .dm-side-count:empty{ display:none; }
  .dm-busca{ position:relative; display:flex; align-items:center; }
  .dm-busca-ic{ display:none; }
  .dm-ticket-filtros .dm-busca input{ padding:9px 62px 9px 34px; border-radius:var(--bd-r-md); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b8aa0' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:11px center; background-size:15px; }
  .dm-busca-kbd{ position:absolute; right:9px; font-family:'JetBrains Mono', monospace; font-size:0.62rem; padding:2px 6px; border-radius:6px; border:1px solid var(--glass-border); color:var(--ink-3); background:var(--tint); pointer-events:none; transition:opacity .15s; }
  .dm-busca input:focus ~ .dm-busca-kbd{ opacity:0; }

  /* Linhas da lista: cantos maiores, faixa lilás na ativa */
  .dm-channel.dm-conv{ border-radius:var(--bd-r-md); position:relative; transition:background .15s ease; }
  .dm-channel.dm-conv.active{ background:rgba(124,92,255,0.16); }
  .dm-channel.dm-conv.active::before{ content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; height:auto; transform:none; border-radius:0 3px 3px 0; background:var(--lilac); }
  .dm-sidebar-label{ font-family:'Work Sans', sans-serif; font-weight:700; letter-spacing:0.06em; }

  /* Desktop: barra de ícones à esquerda (as abas Atendimentos/Fila/Anúncios/Canais) + a lista ao lado; no celular continua como antes */
  .dm-side-body{ display:contents; }
  @media (min-width:701px){
    #staffView .dm-sidebar{ flex-direction:row; width:var(--dm-side-w, 350px); padding:0; overflow:hidden; background:var(--surface); }
    #staffView .dm-mtabs{ display:flex; flex-direction:column; gap:4px; flex:0 0 74px; width:74px; padding:10px 7px; border-right:1px solid var(--glass-border); background:var(--tint); overflow-y:auto; overflow-x:hidden; scrollbar-width:none; }
    #staffView .dm-mtabs::-webkit-scrollbar{ display:none; }
    #staffView .dm-mtab{ position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 2px 8px; border-radius:var(--bd-r-md); border:none; background:none; color:var(--ink-3); font-family:inherit; font-size:0.6rem; letter-spacing:-0.01em; cursor:pointer; transition:background .15s ease, color .15s ease; }
    #staffView .dm-mtab .ic{ font-size:1.35rem; line-height:1.1; }
    #staffView .dm-mtab:hover{ background:var(--tint-hover); color:var(--ink-1); }
    #staffView .dm-mtab.active{ background:rgba(124,92,255,0.22); color:var(--ink-1); font-weight:600; }
    #staffView .dm-mtab.active::before{ content:""; position:absolute; left:-7px; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0; background:var(--lilac); }
    #staffView .dm-mtab .nav-badge{ position:absolute; top:3px; right:5px; margin:0; min-width:17px; padding:0 5px; font-size:0.6rem; line-height:17px; }
    #staffView .dm-side-body{ display:flex; flex-direction:column; flex:1; min-width:0; overflow-y:auto; padding:14px 8px 0; }
    #staffView[data-mtab="atend"] :is(#internalSection, #anunciosSection, #filaSection, #desempSection, #cargaInfo, .dm-mtab-vazio){ display:none !important; }
    #staffView[data-mtab="fila"] :is(#internalSection, #anunciosSection, #atendSection, #desempSection, .dm-mtab-vazio){ display:none !important; }
    #staffView[data-mtab="anuncios"] :is(#internalSection, #filaSection, #atendSection, #desempSection, .dm-mtab-vazio){ display:none !important; }
    #staffView[data-mtab="canais"] :is(#anunciosSection, #filaSection, #atendSection, #desempSection, #cargaInfo, .dm-mtab-vazio){ display:none !important; }
    #staffView[data-mtab="fila"][data-fila-vazia] #vazioFila, #staffView[data-mtab="anuncios"][data-anuncios-vazios] #vazioAnuncios{ display:block !important; }
  }
  @media (max-width:700px){ .dm-side-body{ display:contents; } .dm-busca-kbd{ display:none; } .dm-side-head{ padding-top:0; } }

  /* Cabeçalho da conversa: nome grande + número, serviço embaixo; status colorido por etapa */
  .dm-main-header{ min-height:66px; padding:12px 20px; }
  .dm-tit{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 100%; }
  .dm-tit-l1{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; }
  .dm-tit-nome{ font-size:1.08rem; font-weight:700; color:var(--ink-1); }
  .dm-tit-num{ font-family:'JetBrains Mono', monospace; font-size:0.74rem; font-weight:500; color:var(--ink-3); }
  .dm-tit-l2{ display:flex; align-items:center; flex-wrap:wrap; gap:2px 6px; font-size:0.8rem; font-weight:400; color:var(--ink-3); }
  .dm-tit-l2 .dm-assigned-badge{ margin:0; }
  .dm-tit-l2 > * + *::before{ content:"·"; margin-right:6px; color:var(--ink-3); }
  .dm-tit-serv{ color:var(--ink-2); }
  .pedido-estado{ font-family:'Work Sans', sans-serif; font-size:0.7rem; font-weight:600; letter-spacing:0.02em; text-transform:none; }
  .pedido-estado.st-atendimento{ color:var(--st-azul); border-color:color-mix(in srgb, var(--st-azul) 45%, transparent); background:color-mix(in srgb, var(--st-azul) 13%, transparent); }
  .pedido-estado.st-aguardando_pagamento{ color:var(--st-laranja); border-color:color-mix(in srgb, var(--st-laranja) 45%, transparent); background:color-mix(in srgb, var(--st-laranja) 13%, transparent); }
  .pedido-estado.st-em_execucao{ color:var(--st-roxo); border-color:color-mix(in srgb, var(--st-roxo) 45%, transparent); background:color-mix(in srgb, var(--st-roxo) 14%, transparent); }
  .pedido-estado.st-cancelado{ color:var(--st-vermelho); border-color:color-mix(in srgb, var(--st-vermelho) 45%, transparent); background:color-mix(in srgb, var(--st-vermelho) 12%, transparent); }
  .pedido-estado.st-concluido{ color:var(--ok); border-color:var(--ok-border); background:var(--ok-bg); }
  .dm-mais-dropdown{ min-width:230px; }
  .dm-mais-dropdown .dm-dropdown-item{ text-decoration:none; }
  .dm-header-actions .btn{ border-radius:var(--bd-r-sm); }

  /* Mensagens em balões: a SUA mensagem à direita (lilás), as dos outros à esquerda (neutro); cartões e linhas de sistema seguem largos */
  .dm-messages{ gap:6px; padding:20px 26px; }
  .dm-message{ gap:10px; }
  .dm-message:not(.is-seguida){ margin-top:8px; }
  .dm-avatar{ width:36px; height:36px; }
  .dm-message.is-balao .dm-message-body{ flex:0 1 auto; max-width:min(78%, 640px); background:var(--tint-hover); border:1px solid var(--glass-border); border-radius:4px 16px 16px 16px; padding:8px 13px 10px; }
  .dm-message.is-balao.is-seguida .dm-message-body{ border-radius:16px; }
  .dm-message.is-balao.is-meu{ flex-direction:row-reverse; }
  .dm-message.is-balao.is-meu .dm-message-body{ background:rgba(124,92,255,0.20); border-color:rgba(124,92,255,0.42); border-radius:16px 4px 16px 16px; }
  .dm-message.is-balao.is-meu.is-seguida .dm-message-body{ border-radius:16px; }
  .dm-message.is-balao.is-meu .dm-message-head{ justify-content:flex-end; }
  .dm-message.is-balao.is-nota .dm-message-body{ background:rgba(234,199,105,0.10); border-color:rgba(234,199,105,0.38); }
  .dm-message.is-balao .dm-message-text{ color:var(--ink-1); }
  html[data-theme="light"] .dm-message.is-balao .dm-message-body{ background:#f4f1ff; border-color:rgba(124,92,255,0.18); }
  html[data-theme="light"] .dm-message.is-balao.is-meu .dm-message-body{ background:#e6deff; border-color:rgba(124,92,255,0.38); }
  .dm-seg-hora{ flex:0 0 36px; width:36px; }
  @keyframes dmEntra{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } }
  @media (prefers-reduced-motion:reduce){ .dm-message{ animation:none; } }
  @media (hover:none){ .dm-message.is-balao.is-meu .dm-msg-acoes{ justify-content:flex-start; } .dm-message.is-balao .dm-message-body{ max-width:calc(100% - 50px); } }
  @media (max-width:700px){ .dm-messages{ padding:14px 12px; } .dm-message.is-balao .dm-message-body{ max-width:calc(100% - 48px); } }
  .dm-dia{ margin:10px 0 4px; }
  .dm-dia span{ background:var(--tint-hover); padding:3px 13px; border-radius:999px; font-size:0.72rem; font-weight:600; color:var(--ink-2); }

  /* Cartões (pedido, cobrança, entrega, avaliação): mais presença, ícone/valor em destaque */
  .dm-pedido-card, .dm-payment-card{ border-radius:var(--bd-r-lg); border-color:rgba(124,92,255,0.30); background:linear-gradient(160deg, rgba(124,92,255,0.13), var(--glass-hi) 70%); box-shadow:0 8px 24px var(--shadow); }
  .dm-payment-valor{ font-size:1.6rem; letter-spacing:-0.01em; }
  .dm-entrega-card{ border-radius:var(--bd-r-lg); box-shadow:0 8px 24px var(--shadow); }
  .dm-avaliacao-card{ border-radius:var(--bd-r-lg); }
  .dm-anexo-thumb{ border-radius:var(--bd-r-lg); box-shadow:0 6px 18px var(--shadow); }

  /* Campo de escrever: respiro, foco em lilás, botão de enviar redondo */
  .dm-composer{ padding:12px 22px 20px; }
  .dm-composer-box{ border-radius:var(--bd-r-lg); padding:10px 12px 10px 14px; transition:border-color .15s ease, box-shadow .15s ease; }
  .dm-composer-box:focus-within{ border-color:var(--lilac); box-shadow:0 0 0 3px rgba(124,92,255,0.18); }
  .dm-composer-send{ width:38px; height:38px; border-radius:50%; box-shadow:0 4px 12px rgba(124,92,255,0.35); transition:transform .15s ease, background .15s ease; }
  .dm-composer-send:hover:not(:disabled){ transform:scale(1.06); }
  @media (max-width:700px){ .dm-composer{ padding:8px 10px 10px; } }

  /* Rodapé do usuário e lista: contraste e cantos */
  .dm-chip{ border-radius:999px; }
  .dm-chips-seta{ box-shadow:0 2px 8px var(--shadow); }
  .dm-dropdown{ border-radius:var(--bd-r-md); }
  .dm-dropdown-item{ border-radius:var(--bd-r-sm); }

  /* Modo compacto continua valendo por cima de tudo isto */
  .dm-compacto .dm-message.is-balao .dm-message-body{ padding:5px 11px 7px; }
  .dm-compacto .dm-message:not(.is-seguida){ margin-top:4px; }
  .dm-compacto .dm-side-head{ padding-bottom:6px; }
  .dm-dropdown{ background:var(--surface-hi); }

  .dm-message.is-balao.is-seguida{ margin-top:2px; }

  /* Alça pra ajustar a largura da lista (release BE): fica entre a lista e a conversa, só no desktop */
  .dm-resize{ flex:0 0 6px; width:6px; margin:0 -3px; position:relative; z-index:6; cursor:col-resize; touch-action:none; background:transparent; transition:background .15s ease; }
  .dm-resize::after{ content:""; position:absolute; left:2px; top:50%; width:2px; height:38px; margin-top:-19px; border-radius:2px; background:var(--glass-border); transition:background .15s ease, height .15s ease; }
  .dm-resize:hover, .dm-resize.ativa{ background:rgba(124,92,255,0.14); }
  .dm-resize:hover::after, .dm-resize.ativa::after, .dm-resize:focus-visible::after{ background:var(--lilac); height:56px; margin-top:-28px; }
  .dm-resize:focus-visible{ outline:none; background:rgba(124,92,255,0.14); }
  body.dm-arrastando{ cursor:col-resize; user-select:none; -webkit-user-select:none; }
  body.dm-arrastando iframe{ pointer-events:none; }
  @media (min-width:701px){ #customerView .dm-sidebar{ width:var(--dm-side-w-cli, 260px); } }
  @media (max-width:700px){ .dm-resize{ display:none; } }

  /* ===== Release BF — painel 🎖️ Cargos (admin) e botão de cargo nas Contas ===== */
  .cg-lista{ display:flex; flex-direction:column; gap:8px; }
  .cg-linha{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1.6fr) 196px; gap:12px; align-items:center; padding:12px 14px; border:1px solid var(--glass-border); border-radius:12px; background:var(--tint); }
  .cg-linha.cg-cabeca{ padding:2px 14px; border:none; background:none; font-family:'JetBrains Mono', monospace; font-size:0.64rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3); }
  .cg-linha.cg-fixo{ background:transparent; border-style:dashed; }
  .cg-col-nome{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; min-width:0; }
  .cg-nome{ font-weight:700; color:var(--ink-1); font-size:1rem; }
  .cg-sub{ flex:1 1 100%; font-size:0.74rem; color:var(--ink-3); font-weight:400; }
  .cg-col-perm{ font-size:0.82rem; color:var(--ink-2); line-height:1.45; min-width:0; }
  .cg-col-acoes{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
  .cg-form{ display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; margin-bottom:6px; }
  .cg-h3{ margin:18px 0 8px; font-size:0.95rem; font-weight:700; color:var(--ink-1); }
  .cg-check{ display:flex; align-items:center; gap:8px; margin:8px 0; font-size:0.84rem; color:var(--ink-2); cursor:pointer; }
  .cg-atalhos{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
  .cg-grupo{ margin:0 0 12px; padding:10px 12px 4px; border:1px solid var(--glass-border); border-radius:12px; }
  .cg-grupo legend{ padding:0 8px; font-family:'JetBrains Mono', monospace; font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3); }
  .cg-perm{ display:flex; align-items:flex-start; gap:10px; padding:8px 4px; cursor:pointer; border-radius:8px; }
  .cg-perm:hover{ background:var(--tint-hover); }
  .cg-perm input{ margin-top:3px; flex-shrink:0; width:17px; height:17px; accent-color:var(--lilac); }
  .cg-perm-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  .cg-perm-txt strong{ font-size:0.9rem; color:var(--ink-1); }
  .cg-perm-txt span{ font-size:0.78rem; color:var(--ink-3); line-height:1.45; }
  .cg-cuidado{ font-style:normal; font-size:0.74rem; color:var(--gold-hi); line-height:1.4; }
  .cg-nota{ margin:10px 0 0; font-size:0.78rem; color:var(--ink-3); line-height:1.55; }
  .cg-modal-lista{ display:flex; flex-direction:column; gap:6px; max-height:46vh; overflow-y:auto; margin:4px 0 12px; }
  .cg-modal-op{ display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid var(--glass-border); border-radius:12px; cursor:pointer; background:var(--tint); }
  .cg-modal-op:hover{ background:var(--tint-hover); }
  .cg-modal-op input{ margin-top:3px; accent-color:var(--lilac); }
  .cg-modal-op strong{ display:block; font-size:0.92rem; color:var(--ink-1); }
  .conta-cargo-btn{ white-space:nowrap; }
  @media (max-width:700px){
    .cg-linha{ grid-template-columns:1fr; gap:6px; }
    .cg-linha.cg-cabeca{ display:none; }
    .cg-col-acoes{ justify-content:flex-start; }
    .cg-form{ grid-template-columns:1fr; }
  }

/* ===== Release BH — aba de Mensagens: cabeçalho mais limpo (pedido do dono; reversível: backup em scratchpad/backup_antes_ui) ===== */
/* Um menu só: o ⋮ de "transferir / categoria" saiu do cabeçalho — vira o item "🔁 Transferir / categoria…" dentro do ⋯ Mais. O painel (#kebabDropdown) é o mesmo e abre ancorado no próprio contêiner. */
#transferAction > #kebabBtn{ display:none; }
/* Linha de etapas: o nome só aparece na etapa atual quando a COLUNA da conversa é estreita (antes só valia pela largura da janela, e em janela média a última etapa era cortada). */
.dm-progresso{ container-type:inline-size; }
@container (max-width:640px){
  .dm-prog li:not(.atual) .dm-prog-nome{ display:none; }
  .dm-prog li.atual{ flex:0 0 auto; }
  .dm-prog li::after{ margin:0 6px; }
}
/* Avisos ligados: o botão vira só o 🔔 (o texto "Ativar avisos" só aparece enquanto falta ativar). */
[data-avisos-toggle][aria-pressed="true"] .avisos-rotulo{ display:none; }

/* ===== Release BJ — Mensagens: barra lateral no mesmo tom da tela (pedido do dono; experimento LOCAL, backup em scratchpad/backup_antes_sidebar) =====
   A lista lateral era o ÚNICO bloco sólido e azul-esverdeado (--surface #121a20) numa tela translúcida e arroxeada (céu/aurora). Agora ela é translúcida e levemente arroxeada
   como o resto, só no tema escuro (o claro já tem a sua cor). */
html:not([data-theme="light"]) #staffView .dm-sidebar,
html:not([data-theme="light"]) #customerView .dm-sidebar{ background:rgba(20,16,36,0.42); border-right-color:rgba(201,166,255,0.10); }

/* ===== Release BK — Mensagens: fundo novo, malha de degradê + granulado (pedido do dono; experimento LOCAL e reversível: backup em scratchpad/backup_antes_fundo) =====
   Só na página de Mensagens (body.pg-fundo-malha) e só no tema escuro. Troca o céu/estrelas/aurora (.scene) por: manchas de cor grandes e desfocadas que derivam bem devagar
   (::before) + uma textura fina de granulado por cima (::after). Sem imagem: o ruído é um SVG embutido. Parado no celular e com "reduzir movimento". */
html:not([data-theme="light"]) body.pg-fundo-malha{ background:#0a0a12; }
html:not([data-theme="light"]) body.pg-fundo-malha .scene{ display:none; }
html:not([data-theme="light"]) body.pg-fundo-malha::before{
  content:""; position:fixed; inset:-20%; z-index:0; pointer-events:none;
  background:
    radial-gradient(50% 55% at 20% 24%, rgba(124,92,255,0.40), transparent 70%),
    radial-gradient(44% 50% at 80% 20%, rgba(56,189,172,0.24), transparent 70%),
    radial-gradient(50% 52% at 68% 80%, rgba(190,80,160,0.26), transparent 70%),
    radial-gradient(46% 50% at 16% 84%, rgba(70,90,220,0.30), transparent 70%);
  animation:fundoDeriva 42s ease-in-out infinite alternate;
}
html:not([data-theme="light"]) body.pg-fundo-malha::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.07; mix-blend-mode:overlay;
  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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes fundoDeriva{
  0%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(-3%,2%,0) scale(1.06); }
  100%{ transform:translate3d(3%,-2%,0) scale(1.02); }
}
@media (max-width:700px), (prefers-reduced-motion:reduce){
  html:not([data-theme="light"]) body.pg-fundo-malha::before{ animation:none; }
}

/* ===== Release BK (2) — fundo "orbes" (segunda ideia; a "malha" acima fica guardada) =====
   Mais vivo e quente: poucas luzes redondas e bem definidas (coral, dourado, violeta, ciano) que flutuam em ritmos diferentes, em dois planos que andam em sentidos opostos.
   Mesmas regras de cuidado: só Mensagens, só tema escuro, parado no celular e com "reduzir movimento". */
html:not([data-theme="light"]) body.pg-fundo-orbes{ background:#090912; }
html:not([data-theme="light"]) body.pg-fundo-orbes .scene{ display:none; }
html:not([data-theme="light"]) body.pg-fundo-orbes::before,
html:not([data-theme="light"]) body.pg-fundo-orbes::after{ content:""; position:fixed; inset:-15%; z-index:0; pointer-events:none; }
html:not([data-theme="light"]) body.pg-fundo-orbes::before{
  background:
    radial-gradient(circle at 22% 30%, rgba(255,120,100,0.34), transparent 22%),
    radial-gradient(circle at 78% 24%, rgba(110,80,255,0.40), transparent 26%),
    radial-gradient(circle at 60% 78%, rgba(60,200,230,0.26), transparent 24%);
  filter:blur(28px); animation:orbesA 34s ease-in-out infinite alternate;
}
html:not([data-theme="light"]) body.pg-fundo-orbes::after{
  background:
    radial-gradient(circle at 36% 72%, rgba(240,190,90,0.22), transparent 20%),
    radial-gradient(circle at 88% 66%, rgba(200,90,200,0.26), transparent 22%),
    radial-gradient(circle at 10% 56%, rgba(80,110,255,0.24), transparent 20%);
  filter:blur(34px); animation:orbesB 46s ease-in-out infinite alternate;
}
@keyframes orbesA{ 0%{ transform:translate3d(0,0,0) scale(1); } 100%{ transform:translate3d(6%,-5%,0) scale(1.12); } }
@keyframes orbesB{ 0%{ transform:translate3d(0,0,0) scale(1.05); } 100%{ transform:translate3d(-7%,5%,0) scale(0.95); } }
@media (max-width:700px), (prefers-reduced-motion:reduce){
  html:not([data-theme="light"]) body.pg-fundo-orbes::before,
  html:not([data-theme="light"]) body.pg-fundo-orbes::after{ animation:none; }
}

/* ===== Release BK (3) — fundo "aurora" (terceira ideia) =====
   Faixas de luz verde-água, azul e violeta que ondulam devagar no alto e somem para o escuro embaixo (máscara), com estrelinhas discretas por cima.
   Mesmas regras de cuidado: só Mensagens, só tema escuro, parado no celular e com "reduzir movimento". */
html:not([data-theme="light"]) body.pg-fundo-aurora{ background:#070b12; }
html:not([data-theme="light"]) body.pg-fundo-aurora .scene{ display:none; }
html:not([data-theme="light"]) body.pg-fundo-aurora::before,
html:not([data-theme="light"]) body.pg-fundo-aurora::after{ content:""; position:fixed; z-index:0; pointer-events:none; }
html:not([data-theme="light"]) body.pg-fundo-aurora::before{
  inset:-12% -12% 15% -12%; transform-origin:50% 0;
  background:linear-gradient(100deg, transparent 4%, rgba(90,120,255,0.50) 20%, rgba(170,110,255,0.44) 38%, transparent 52%, rgba(232,100,190,0.46) 66%, rgba(120,90,255,0.38) 82%, transparent 96%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.78) 50%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.78) 50%, transparent 100%);
  filter:blur(38px); animation:auroraOnda 30s ease-in-out infinite alternate;
}
html:not([data-theme="light"]) body.pg-fundo-aurora::after{
  inset:0;
  background:
    radial-gradient(1.4px 1.4px at 9% 14%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(1px 1px at 21% 31%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1.6px 1.6px at 34% 9%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(1px 1px at 47% 24%, rgba(255,255,255,0.65), transparent 60%),
    radial-gradient(1.2px 1.2px at 58% 12%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 69% 33%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1.6px 1.6px at 83% 11%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(1px 1px at 92% 27%, rgba(255,255,255,0.65), transparent 60%),
    radial-gradient(1.2px 1.2px at 14% 52%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(1px 1px at 76% 58%, rgba(255,255,255,0.55), transparent 60%);
  animation:auroraBrilha 9s ease-in-out infinite alternate;
}
@keyframes auroraOnda{
  0%{ transform:translateX(-6%) skewX(-8deg) scaleY(1); }
  100%{ transform:translateX(6%) skewX(8deg) scaleY(1.22); }
}
@keyframes auroraBrilha{ 0%{ opacity:0.55; } 100%{ opacity:1; } }
@media (max-width:700px), (prefers-reduced-motion:reduce){
  html:not([data-theme="light"]) body.pg-fundo-aurora::before,
  html:not([data-theme="light"]) body.pg-fundo-aurora::after{ animation:none; }
}

/* ===== Release BK (4) — fundo "cadentes" (quarta ideia) =====
   Céu noturno em degradê vertical (índigo no alto, lilás escuro embaixo), estrelinhas que pulsam, névoa lilás que passa devagar embaixo e, de vez em quando, uma estrela cadente.
   Mesmas regras de cuidado: só Mensagens, só tema escuro, parado no celular e com "reduzir movimento". */
html:not([data-theme="light"]) body.pg-fundo-cadentes{ background:linear-gradient(180deg, #080a1c 0%, #100d28 55%, #1a1233 100%) fixed; }
html:not([data-theme="light"]) body.pg-fundo-cadentes .scene{ display:none; }
html:not([data-theme="light"]) body.pg-fundo-cadentes::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1.4px 1.4px at 7% 12%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(1px 1px at 16% 33%, rgba(220,210,255,0.75), transparent 60%),
    radial-gradient(1.6px 1.6px at 27% 8%, rgba(255,255,255,0.95), transparent 60%),
    radial-gradient(1px 1px at 38% 26%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1.2px 1.2px at 49% 14%, rgba(220,210,255,0.85), transparent 60%),
    radial-gradient(1px 1px at 58% 38%, rgba(255,255,255,0.65), transparent 60%),
    radial-gradient(1.6px 1.6px at 69% 10%, rgba(255,255,255,0.95), transparent 60%),
    radial-gradient(1px 1px at 78% 29%, rgba(220,210,255,0.75), transparent 60%),
    radial-gradient(1.2px 1.2px at 88% 16%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(1px 1px at 94% 42%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(1px 1px at 11% 55%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 63% 60%, rgba(220,210,255,0.6), transparent 60%),
    radial-gradient(70% 38% at 25% 100%, rgba(150,110,235,0.30), transparent 70%),
    radial-gradient(70% 34% at 78% 100%, rgba(120,90,220,0.26), transparent 70%);
  animation:cadentesBrilha 8s ease-in-out infinite alternate;
}
html:not([data-theme="light"]) body.pg-fundo-cadentes::after{
  content:""; position:fixed; z-index:0; pointer-events:none; top:0; left:0; width:280px; height:3px; border-radius:3px;
  background:linear-gradient(90deg, transparent, rgba(215,205,255,0.7) 55%, #fff);
  box-shadow:0 0 10px 2px rgba(200,185,255,0.65);
  opacity:0; visibility:hidden; transform:translate3d(-10vw,6vh,0) rotate(24deg); will-change:transform, opacity;
  animation:cadentesRisca 14s linear infinite;
}
@keyframes cadentesBrilha{ 0%{ opacity:0.7; } 100%{ opacity:1; } }
/* Duas passagens por ciclo (14 s). Como na 1ª versão, a estrela ENTRA de fora da tela (esquerda) e atravessa até sair pelo outro lado — nada de aparecer no meio da tela. */
@keyframes cadentesRisca{
  0%{ opacity:0; visibility:hidden; transform:translate3d(-22vw,5vh,0) rotate(24deg); }
  3%{ opacity:1; visibility:visible; }
  12%{ opacity:1; visibility:visible; }
  14%{ opacity:0; visibility:hidden; transform:translate3d(108vw,calc(5vh + 54vw),0) rotate(24deg); }
  50%{ opacity:0; visibility:hidden; transform:translate3d(-22vw,24vh,0) rotate(24deg); }
  53%{ opacity:1; visibility:visible; }
  62%{ opacity:1; visibility:visible; }
  64%{ opacity:0; visibility:hidden; transform:translate3d(108vw,calc(24vh + 54vw),0) rotate(24deg); }
  100%{ opacity:0; visibility:hidden; transform:translate3d(108vw,calc(24vh + 54vw),0) rotate(24deg); }
}
@media (max-width:700px), (prefers-reduced-motion:reduce){
  html:not([data-theme="light"]) body.pg-fundo-cadentes::before,
  html:not([data-theme="light"]) body.pg-fundo-cadentes::after{ animation:none; }
  html:not([data-theme="light"]) body.pg-fundo-cadentes::after{ display:none; }
}

/* ===== Release BJ (2) — o bloco do usuário no pé da barra lateral acompanha o tom da barra (era sólido --surface, um retângulo preto destoando) =====
   Fica translúcido e levemente arroxeado como a lista, com um desfoque leve para os atendimentos que rolam por baixo dele não atrapalharem a leitura. Só tema escuro, só Mensagens. */
html:not([data-theme="light"]) #staffView .user-panel,
html:not([data-theme="light"]) #customerView .user-panel{ background:rgba(20,16,36,0.50); border-top-color:rgba(201,166,255,0.10); position:relative; z-index:0; }
/* O desfoque fica num pseudo-elemento: backdrop-filter no próprio painel o tornaria o "pai" do menu position:fixed e o menu abriria fora da tela (bug corrigido, BQ). */
html:not([data-theme="light"]) #staffView .user-panel::before,
html:not([data-theme="light"]) #customerView .user-panel::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }

/* ===== Release BL (variante "suave", só com body.pg-bolha-suave) — balão da mensagem mais limpo (pedido do dono; experimento LOCAL e reversível: backup em scratchpad/backup_antes_balao) =====
   Hierarquia: a MENSAGEM manda; o nome é firme mas sem competir; a hora vira detalhe pequeno e apagado. Balão sem borda, um tom mais claro, cantos mais redondos e a pontinha
   (canto reto) do lado do avatar; as mensagens do próprio usuário ganham um degradê lilás suave em vez de borda. A etiqueta/estilo do cargo não muda. */
body.pg-bolha-suave .dm-message.is-balao .dm-message-body{ border:none; background:rgba(255,255,255,0.075); border-radius:5px 18px 18px 18px; padding:10px 15px 11px; box-shadow:0 1px 0 rgba(255,255,255,0.04) inset; }
body.pg-bolha-suave .dm-message.is-balao.is-seguida .dm-message-body{ border-radius:18px; }
body.pg-bolha-suave .dm-message.is-balao.is-meu .dm-message-body{ border:none; background:linear-gradient(135deg, rgba(124,92,255,0.36), rgba(124,92,255,0.22)); border-radius:18px 5px 18px 18px; box-shadow:0 1px 0 rgba(255,255,255,0.06) inset; }
body.pg-bolha-suave .dm-message.is-balao.is-meu.is-seguida .dm-message-body{ border-radius:18px; }
body.pg-bolha-suave .dm-message.is-balao .dm-message-head{ gap:10px; margin-bottom:4px; }
body.pg-bolha-suave .dm-message.is-balao .dm-message-time{ font-size:0.66rem; opacity:0.75; letter-spacing:0.01em; }
body.pg-bolha-suave .dm-message.is-balao .dm-message-text{ font-size:0.97rem; line-height:1.55; color:#f3f1fb; }
html[data-theme="light"] body.pg-bolha-suave .dm-message.is-balao .dm-message-body{ background:#f1edff; border:none; box-shadow:none; }
html[data-theme="light"] body.pg-bolha-suave .dm-message.is-balao.is-meu .dm-message-body{ background:linear-gradient(135deg, #ddd2ff, #e9e2ff); border:none; box-shadow:none; }
html[data-theme="light"] body.pg-bolha-suave .dm-message.is-balao .dm-message-text{ color:var(--ink-1); }

/* ===== Release BL (2) — mensagens SEM balão, estilo Discord (variante "flat", a nova padrão do experimento) =====
   Cada mensagem é uma linha: avatar à esquerda, nome + hora em cima, texto embaixo, sem caixa. Ao passar o mouse a linha ganha um fundo leve. As mensagens do próprio usuário
   ganham só uma linha lilás à esquerda (todas alinhadas à esquerda, como no Discord). Notas internas mantêm o tom dourado. Cartões (cobrança, sistema) não mudam. */
body.pg-bolha-flat .dm-message.is-balao{ padding:5px 10px; border-radius:8px; transition:background .15s ease; }
body.pg-bolha-flat .dm-message.is-balao:hover{ background:rgba(255,255,255,0.04); }
body.pg-bolha-flat .dm-message.is-balao .dm-message-body,
body.pg-bolha-flat .dm-message.is-balao.is-meu .dm-message-body,
body.pg-bolha-flat .dm-message.is-balao.is-seguida .dm-message-body,
body.pg-bolha-flat .dm-message.is-balao.is-meu.is-seguida .dm-message-body{ flex:1 1 0; max-width:none; min-width:0; background:none; border:none; border-radius:0; padding:0; box-shadow:none; }
body.pg-bolha-flat .dm-message.is-balao.is-meu{ flex-direction:row; box-shadow:inset 2px 0 0 rgba(124,92,255,0.65); }
body.pg-bolha-flat .dm-message.is-balao.is-meu .dm-message-head{ justify-content:flex-start; }
body.pg-bolha-flat .dm-message.is-balao .dm-message-head{ gap:9px; margin-bottom:2px; }
body.pg-bolha-flat .dm-message.is-balao .dm-message-time{ font-size:0.68rem; opacity:0.7; }
body.pg-bolha-flat .dm-message.is-balao .dm-message-text{ font-size:0.95rem; line-height:1.55; color:var(--ink-1); }
body.pg-bolha-flat .dm-message.is-balao.is-nota{ background:rgba(234,199,105,0.07); box-shadow:inset 3px 0 0 rgba(234,199,105,0.55); }
body.pg-bolha-flat .dm-message.is-balao.is-nota .dm-message-body{ background:none; border:none; }
html[data-theme="light"] body.pg-bolha-flat .dm-message.is-balao:hover{ background:rgba(124,92,255,0.06); }

/* ===== Release BL (3) — barrinha lateral em TODAS as mensagens (estilo flat) =====
   O dono gostou da barrinha lilás que dá a ideia de balão e ela só aparecia nas mensagens do próprio usuário. Agora toda mensagem leva a barrinha: mais suave nas dos outros,
   mais forte (lilás) nas do próprio usuário (regra já existente, mais específica). Notas internas continuam douradas. */
body.pg-bolha-flat .dm-message.is-balao{ box-shadow:inset 2px 0 0 rgba(201,166,255,0.30); }
body.pg-bolha-flat .dm-message.is-balao.is-meu{ box-shadow:inset 2px 0 0 rgba(124,92,255,0.80); }

/* ===== Release BM — Mensagens no celular (print do dono no iPhone: avatar sozinho numa linha, buracos enormes, botões de ação gigantes, topo apertado) =====
   Causa principal: no estilo flat o corpo da mensagem tinha flex-basis "auto" e, no toque (hover:none) a linha é flex-wrap, então o texto longo não cabia ao lado do avatar e pulava
   para baixo (agora flex-basis 0, como o resto do site). Aqui: botões de ação pequenos e discretos, sem "hover grudado" no toque, topo sem o título cortado e ações do cabeçalho em fileira. */
@media (hover:none){
  body.pg-bolha-flat .dm-message.is-balao:hover{ background:none; }
  .dm-message .dm-msg-acoes{ justify-content:flex-end; gap:0; margin-top:0; }
  .dm-message .dm-msg-acoes button{ min-height:30px; min-width:34px; padding:3px 8px; font-size:0.8rem; opacity:0.7; }
  body.pg-bolha-flat .dm-message.is-balao.is-meu .dm-msg-acoes{ justify-content:flex-end; }
}
@media (max-width:700px){
  .dm-topbar-left h1{ display:none; }
  body.pg-bolha-flat .dm-message.is-balao{ padding:4px 8px; }
  #staffView .dm-header-actions{ width:100%; margin-left:0; justify-content:space-between; gap:6px; }
  #staffView .dm-header-actions #concluirBtn, #staffView .dm-header-actions #assumirAtendBtn{ flex:1 1 auto; }
}

/* ===== Release BN — mensagens seguidas do mesmo autor viram UM bloco só (estilo flat) =====
   Antes cada linha tinha a sua barrinha e um espaço de 8 px entre elas (parecia "dois balões"). Agora as linhas do mesmo grupo encostam umas nas outras e a barrinha é contínua:
   a primeira tem só o canto de cima arredondado, as do meio nenhum, a última só o de baixo. (:has() — Safari 15.4+/Chrome 105+; onde não existir, só os cantos ficam arredondados em cada linha.) */
body.pg-bolha-flat .dm-message.is-balao.is-seguida{ margin-top:-6px; padding-top:1px; border-top-left-radius:0; border-top-right-radius:0; }
body.pg-bolha-flat .dm-message.is-balao:has(+ .dm-message.is-balao.is-seguida){ padding-bottom:1px; border-bottom-left-radius:0; border-bottom-right-radius:0; }


/* ===== Release BP — galeria de GIFs (Klipy) ===== */
.dm-gif-btn{ font-size:0.72rem; font-weight:800; letter-spacing:0.03em; min-width:42px; }
/* o GIF dentro da mensagem: tamanho de miniatura grande, nunca passa da coluna */
.dm-gif{ display:block; max-width:280px; }
.dm-gif img{ display:block; max-width:100%; max-height:300px; width:auto; height:auto; border-radius:10px; background:var(--tint); }
/* seletor: popover sobre o campo de mensagem (desktop) / folha de baixo (celular) */
.gif-painel{ position:fixed; z-index:90; width:360px; max-width:calc(100vw - 16px); height:min(480px, 62vh); display:flex; flex-direction:column; background:var(--surface-hi); border:1px solid var(--glass-border); border-radius:14px; box-shadow:0 18px 50px var(--shadow); overflow:hidden; }
.gif-topo{ display:flex; gap:8px; align-items:center; padding:10px 10px 6px; }
.gif-busca{ flex:1; min-width:0; background:var(--field-bg); border:1px solid var(--glass-border); border-radius:10px; padding:9px 12px; color:var(--ink-1); font-family:inherit; font-size:0.92rem; }
.gif-busca:focus{ outline:none; border-color:var(--lilac); }
.gif-fechar{ background:none; border:none; color:var(--ink-3); cursor:pointer; font-size:1rem; width:34px; height:34px; border-radius:8px; }
.gif-fechar:hover{ background:var(--tint-hover); color:var(--ink-1); }
.gif-cats{ display:flex; gap:6px; overflow-x:auto; padding:2px 10px 8px; scrollbar-width:none; flex-shrink:0; }
.gif-cats::-webkit-scrollbar{ display:none; }
.gif-cat{ flex-shrink:0; background:var(--tint); border:1px solid var(--glass-border); color:var(--ink-2); border-radius:999px; padding:5px 12px; font-size:0.78rem; font-family:inherit; cursor:pointer; white-space:nowrap; }
.gif-cat:hover{ background:var(--tint-hover); }
.gif-cat.ativa{ background:rgba(124,92,255,0.22); border-color:rgba(124,92,255,0.5); color:var(--ink-1); }
.gif-grade{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:2px 10px 8px; }
.gif-colunas{ column-count:2; column-gap:8px; }
.gif-item{ display:block; width:100%; margin:0 0 8px; padding:0; border:none; border-radius:10px; overflow:hidden; background:var(--tint); cursor:pointer; break-inside:avoid; position:relative; }
.gif-item img{ display:block; width:100%; height:auto; }
.gif-item:hover, .gif-item:focus-visible{ outline:2px solid var(--lilac); outline-offset:-2px; }
.gif-esq{ cursor:default; animation:gifPulsa 1.2s ease-in-out infinite alternate; }
@keyframes gifPulsa{ from{ opacity:0.45; } to{ opacity:0.9; } }
.gif-aviso{ column-span:all; text-align:center; color:var(--ink-3); font-size:0.88rem; padding:36px 12px; line-height:1.6; }
.gif-rodape{ flex-shrink:0; padding:6px 12px 8px; text-align:right; font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3); border-top:1px solid var(--glass-border); }
@media (max-width:700px){
  .gif-painel{ left:8px !important; right:8px; bottom:8px !important; top:auto !important; width:auto; max-width:none; height:62dvh; }
  .dm-gif{ max-width:min(280px, 70vw); }
}
@media (prefers-reduced-motion:reduce){ .gif-esq{ animation:none; } }

/* ===== Release BQ (2) — arrastar um atendimento para uma categoria (Mensagens, só mouse) ===== */
body.dm-arrastando, body.dm-arrastando *{ cursor:grabbing !important; user-select:none; -webkit-user-select:none; }
.dm-channel.dm-arrastado{ opacity:0.45; }
.dm-drag-fantasma{ position:fixed; z-index:400; pointer-events:none; padding:6px 12px; border-radius:8px; font-size:0.82rem; font-weight:600; color:var(--ink-1); background:var(--surface-hi); border:1px solid var(--gold-hi); box-shadow:0 10px 26px var(--shadow); max-width:260px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.dm-arrastando .dm-sidebar-label[data-cat]{ border-radius:8px; outline:1px dashed var(--glass-border); outline-offset:-2px; transition:background .12s; }
body.dm-arrastando .dm-sidebar-label.dm-drop-alvo{ background:var(--tint-hover); outline:2px solid var(--gold-hi); color:var(--ink-1); }

/* ===== Release BS — a estrela cadente do fundo "cadentes" leva a PRIMOGEMA na ponta (pedido do dono; sobrescreve só o ::after do bloco BK (4)) =====
   O risco continua entrando de fora da tela e atravessando em diagonal, só que agora a cabeça é a primogema (SVG embutido, sem arquivo extra) e a cauda vai do lilás ao ciano até ela.
   Para desfazer: apague este bloco (o risco original do BK volta). Só Mensagens, só tema escuro, parado no celular e com "reduzir movimento" (as regras do BK já escondem o ::after). */
html:not([data-theme="light"]) body.pg-fundo-cadentes::after{
  width:310px; height:44px; border-radius:0; box-shadow:none;
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%27-215%20-215%20430%20430%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27c%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%270%27%20y1%3D%27-200%27%20x2%3D%270%27%20y2%3D%27200%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23d9b4dd%27%2F%3E%3Cstop%20offset%3D%27.5%27%20stop-color%3D%27%23a9a6d8%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%236f97d6%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27r%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%270%27%20y1%3D%27-197%27%20x2%3D%270%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23fde0d2%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23f6c3dc%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27l%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%270%27%20y1%3D%27-197%27%20x2%3D%270%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23f7c6dc%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23c6b9e6%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27e%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%27-185%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23f7c8dd%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23c2b8e4%27%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%27k%27%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%20185%2C3%2070%2C68%200%2C203%20-70%2C68%20-185%2C3%20-70%2C-67%27%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%20185%2C3%2070%2C68%200%2C203%20-70%2C68%20-185%2C3%20-70%2C-67%27%20fill%3D%27none%27%20stroke%3D%27url(%23c)%27%20stroke-width%3D%2724%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%20185%2C3%2070%2C68%200%2C203%20-70%2C68%20-185%2C3%20-70%2C-67%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%2715%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cg%20clip-path%3D%27url(%23k)%27%3E%3Cpolygon%20points%3D%270%2C-197%20-70%2C-67%200%2C0%27%20fill%3D%27url(%23r)%27%2F%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%200%2C0%27%20fill%3D%27url(%23l)%27%2F%3E%3Cpolygon%20points%3D%27-35%2C-92%20-18%2C-122%208%2C-38%20-4%2C-10%27%20fill%3D%27%23fffdf0%27%2F%3E%3Cpolygon%20points%3D%27-70%2C-67%20-185%2C3%200%2C0%27%20fill%3D%27url(%23e)%27%2F%3E%3Cpolygon%20points%3D%2770%2C-67%20185%2C3%200%2C0%27%20fill%3D%27%23c6e4f6%27%2F%3E%3Cpolygon%20points%3D%2770%2C-67%20185%2C3%20112%2C0%2072%2C-40%27%20fill%3D%27%234cc3ee%27%2F%3E%3Cpolygon%20points%3D%27185%2C3%2070%2C68%200%2C0%27%20fill%3D%27%235a8fd1%27%2F%3E%3Cpolygon%20points%3D%2740%2C22%20185%2C3%2070%2C68%2030%2C110%27%20fill%3D%27%234ac0ec%27%2F%3E%3Cpolygon%20points%3D%270%2C0%2070%2C68%200%2C203%27%20fill%3D%27%234cc1ee%27%2F%3E%3Cpolygon%20points%3D%278%2C30%2058%2C66%208%2C195%27%20fill%3D%27%237bd0f4%27%2F%3E%3Cpolygon%20points%3D%270%2C0%20-70%2C68%200%2C203%27%20fill%3D%27%237fb3dd%27%2F%3E%3Cpolygon%20points%3D%27-6%2C20%20-62%2C66%20-6%2C190%27%20fill%3D%27%23d2ebf9%27%2F%3E%3Cpolygon%20points%3D%27-70%2C68%20-185%2C3%200%2C0%27%20fill%3D%27%2370a9dc%27%2F%3E%3Cpolygon%20points%3D%27-150%2C8%20-48%2C6%20-62%2C32%20-118%2C24%27%20fill%3D%27%237fd2f5%27%2F%3E%3Cpath%20d%3D%27M0%20-197V203M-185%203H185%27%20stroke%3D%27%23fff%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") right center / 44px 44px no-repeat,
    linear-gradient(90deg, transparent, rgba(201,166,255,0.45) 45%, rgba(150,215,255,0.85)) left center / calc(100% - 20px) 3px no-repeat;
  filter:drop-shadow(0 0 7px rgba(150,210,255,0.75));
}

/* ===== Release BS (2) — cauda da estrela cadente com mais efeito (pedido do dono) =====
   Camadas, de cima pra baixo: a primogema; um brilho suave em leque que cobre a cauda e afina até sumir; o núcleo fino e forte; duas fibras finas paralelas; e uma poeira de
   estrelinhas espalhada ao longo da cauda (acompanha a estrela, porque tudo vive no mesmo ::after). A gema pulsa (drop-shadow) enquanto cruza. Para voltar ao visual do BS (1),
   apague este bloco. Mesmas regras de sempre: só Mensagens, só escuro, escondida no celular, parada com "reduzir movimento". */
html:not([data-theme="light"]) body.pg-fundo-cadentes::after{
  width:440px; height:52px;
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%27-215%20-215%20430%20430%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27c%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%270%27%20y1%3D%27-200%27%20x2%3D%270%27%20y2%3D%27200%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23d9b4dd%27%2F%3E%3Cstop%20offset%3D%27.5%27%20stop-color%3D%27%23a9a6d8%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%236f97d6%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27r%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%270%27%20y1%3D%27-197%27%20x2%3D%270%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23fde0d2%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23f6c3dc%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27l%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%270%27%20y1%3D%27-197%27%20x2%3D%270%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23f7c6dc%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23c6b9e6%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27e%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%27-185%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23f7c8dd%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23c2b8e4%27%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%27k%27%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%20185%2C3%2070%2C68%200%2C203%20-70%2C68%20-185%2C3%20-70%2C-67%27%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%20185%2C3%2070%2C68%200%2C203%20-70%2C68%20-185%2C3%20-70%2C-67%27%20fill%3D%27none%27%20stroke%3D%27url(%23c)%27%20stroke-width%3D%2724%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%20185%2C3%2070%2C68%200%2C203%20-70%2C68%20-185%2C3%20-70%2C-67%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%2715%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cg%20clip-path%3D%27url(%23k)%27%3E%3Cpolygon%20points%3D%270%2C-197%20-70%2C-67%200%2C0%27%20fill%3D%27url(%23r)%27%2F%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%200%2C0%27%20fill%3D%27url(%23l)%27%2F%3E%3Cpolygon%20points%3D%27-35%2C-92%20-18%2C-122%208%2C-38%20-4%2C-10%27%20fill%3D%27%23fffdf0%27%2F%3E%3Cpolygon%20points%3D%27-70%2C-67%20-185%2C3%200%2C0%27%20fill%3D%27url(%23e)%27%2F%3E%3Cpolygon%20points%3D%2770%2C-67%20185%2C3%200%2C0%27%20fill%3D%27%23c6e4f6%27%2F%3E%3Cpolygon%20points%3D%2770%2C-67%20185%2C3%20112%2C0%2072%2C-40%27%20fill%3D%27%234cc3ee%27%2F%3E%3Cpolygon%20points%3D%27185%2C3%2070%2C68%200%2C0%27%20fill%3D%27%235a8fd1%27%2F%3E%3Cpolygon%20points%3D%2740%2C22%20185%2C3%2070%2C68%2030%2C110%27%20fill%3D%27%234ac0ec%27%2F%3E%3Cpolygon%20points%3D%270%2C0%2070%2C68%200%2C203%27%20fill%3D%27%234cc1ee%27%2F%3E%3Cpolygon%20points%3D%278%2C30%2058%2C66%208%2C195%27%20fill%3D%27%237bd0f4%27%2F%3E%3Cpolygon%20points%3D%270%2C0%20-70%2C68%200%2C203%27%20fill%3D%27%237fb3dd%27%2F%3E%3Cpolygon%20points%3D%27-6%2C20%20-62%2C66%20-6%2C190%27%20fill%3D%27%23d2ebf9%27%2F%3E%3Cpolygon%20points%3D%27-70%2C68%20-185%2C3%200%2C0%27%20fill%3D%27%2370a9dc%27%2F%3E%3Cpolygon%20points%3D%27-150%2C8%20-48%2C6%20-62%2C32%20-118%2C24%27%20fill%3D%27%237fd2f5%27%2F%3E%3Cpath%20d%3D%27M0%20-197V203M-185%203H185%27%20stroke%3D%27%23fff%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") right center / 44px 44px no-repeat,
    radial-gradient(ellipse 100% 46% at 100% 50%, rgba(160,220,255,0.40), rgba(185,150,255,0.16) 42%, transparent 74%),
    linear-gradient(90deg, transparent, rgba(201,166,255,0.55) 38%, rgba(170,225,255,0.98)) left center / calc(100% - 24px) 3px no-repeat,
    linear-gradient(90deg, transparent, rgba(205,230,255,0.55)) 0 calc(50% - 9px) / 72% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(215,190,255,0.5)) 0 calc(50% + 9px) / 64% 1px no-repeat,
    radial-gradient(2.2px 2.2px at 84% 26%, #ffffff, transparent 70%),
    radial-gradient(1.6px 1.6px at 71% 70%, rgba(190,235,255,0.95), transparent 70%),
    radial-gradient(2px 2px at 58% 18%, rgba(255,255,255,0.9), transparent 70%),
    radial-gradient(1.4px 1.4px at 49% 76%, rgba(220,200,255,0.9), transparent 70%),
    radial-gradient(2px 2px at 37% 34%, rgba(190,235,255,0.85), transparent 70%),
    radial-gradient(1.3px 1.3px at 27% 68%, rgba(255,255,255,0.8), transparent 70%),
    radial-gradient(1.6px 1.6px at 17% 30%, rgba(220,200,255,0.75), transparent 70%),
    radial-gradient(1.2px 1.2px at 9% 58%, rgba(255,255,255,0.7), transparent 70%);
  filter:drop-shadow(0 0 8px rgba(150,210,255,0.8));
  animation:cadentesRisca 14s linear infinite; /* sem a pulsação do filtro (cadentesGema): animar o drop-shadow repintava a camada inteira a cada quadro e deixava listras da cauda no chat do app */
}
@keyframes cadentesGema{
  0%{ filter:drop-shadow(0 0 5px rgba(150,210,255,0.65)); }
  100%{ filter:drop-shadow(0 0 14px rgba(185,225,255,0.95)) drop-shadow(0 0 4px rgba(215,190,255,0.7)); }
}

/* ===== Release BT — o fundo "cadentes" também no Painel Admin (pedido do dono) =====
   A página admin.html ganhou body.pg-fundo-cadentes (céu, estrelas, névoa e a cadente com a primogema do BK/BS). Aqui a barra lateral e o bloco do usuário ficam translúcidos e
   arroxeados como na aba Mensagens (BJ). O desfoque do bloco do usuário fica num ::before (backdrop-filter no próprio bloco quebraria o menu position:fixed — ver BQ). Só tema escuro. */
html:not([data-theme="light"]) .admin-body.pg-fundo-cadentes .dm-sidebar{ background:rgba(20,16,36,0.42); border-right-color:rgba(201,166,255,0.10); }
html:not([data-theme="light"]) .admin-body.pg-fundo-cadentes .user-panel{ background:rgba(20,16,36,0.50); border-top-color:rgba(201,166,255,0.10); position:relative; z-index:0; }
html:not([data-theme="light"]) .admin-body.pg-fundo-cadentes .user-panel::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }

/* ===== Release BU — pacote de toques visuais (pedido do dono: "faz tudo"): brilho que segue o mouse nos cartões, borda em gradiente nos cartões de vidro, carregando com a primogema,
   primogema no contador da home, personagem da home que respira e a estrela cadente também na home. Tudo respeita "reduzir movimento"; o que depende de mouse só vale com mouse. ===== */

/* 1) Brilho que segue o mouse (efeitos.js põe .spot-ativo e --mx/--my no cartão sob o cursor; fora do Painel Admin) */
.spot-ativo{ --spot: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(201,166,255,0.17), transparent 70%); border-color:rgba(201,166,255,0.34); }
html[data-theme="light"] .spot-ativo{ --spot: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(124,92,255,0.11), transparent 70%); }
.stat.spot-ativo, .trust-card.spot-ativo, .review-card.spot-ativo, .step.spot-ativo, [data-spot].spot-ativo{ background-image:var(--spot); }
.service-card.spot-ativo, .price-preview-card.spot-ativo, .editor-card.spot-ativo{ background-image:var(--spot), linear-gradient(165deg, var(--glass-hi), var(--glass)); }
.tiktok-promo-card.spot-ativo{ background-image:var(--spot), linear-gradient(135deg, rgba(124,92,255,0.08), rgba(234,199,105,0.08)); }

/* 2) Borda em gradiente que gira devagar nos cartões de vidro (Minha Conta e Ferramentas; o admin fica de fora) */
@property --ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes bordaGira{ to{ --ang:360deg; } }
body:not(.admin-body) .editor-card{ position:relative; }
body:not(.admin-body) .editor-card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none; opacity:0.6;
  background:conic-gradient(from var(--ang), transparent 0 52%, rgba(201,166,255,0.85), rgba(120,215,255,0.85) 72%, transparent 88%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
}
@media (prefers-reduced-motion:no-preference){ body:not(.admin-body) .editor-card::before{ animation:bordaGira 10s linear infinite; } }

/* 3) Carregando com a primogema (use <span class="ld-estrela"></span> antes do texto) */
.ld-estrela{ display:inline-block; width:20px; height:20px; vertical-align:-5px; margin-right:8px; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%27-215%20-215%20430%20430%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27c%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%270%27%20y1%3D%27-200%27%20x2%3D%270%27%20y2%3D%27200%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23d9b4dd%27%2F%3E%3Cstop%20offset%3D%27.5%27%20stop-color%3D%27%23a9a6d8%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%236f97d6%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27r%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%270%27%20y1%3D%27-197%27%20x2%3D%270%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23fde0d2%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23f6c3dc%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27l%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%270%27%20y1%3D%27-197%27%20x2%3D%270%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23f7c6dc%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23c6b9e6%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27e%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%27-185%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23f7c8dd%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23c2b8e4%27%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%27k%27%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%20185%2C3%2070%2C68%200%2C203%20-70%2C68%20-185%2C3%20-70%2C-67%27%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%20185%2C3%2070%2C68%200%2C203%20-70%2C68%20-185%2C3%20-70%2C-67%27%20fill%3D%27none%27%20stroke%3D%27url(%23c)%27%20stroke-width%3D%2724%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%20185%2C3%2070%2C68%200%2C203%20-70%2C68%20-185%2C3%20-70%2C-67%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%2715%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cg%20clip-path%3D%27url(%23k)%27%3E%3Cpolygon%20points%3D%270%2C-197%20-70%2C-67%200%2C0%27%20fill%3D%27url(%23r)%27%2F%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%200%2C0%27%20fill%3D%27url(%23l)%27%2F%3E%3Cpolygon%20points%3D%27-35%2C-92%20-18%2C-122%208%2C-38%20-4%2C-10%27%20fill%3D%27%23fffdf0%27%2F%3E%3Cpolygon%20points%3D%27-70%2C-67%20-185%2C3%200%2C0%27%20fill%3D%27url(%23e)%27%2F%3E%3Cpolygon%20points%3D%2770%2C-67%20185%2C3%200%2C0%27%20fill%3D%27%23c6e4f6%27%2F%3E%3Cpolygon%20points%3D%2770%2C-67%20185%2C3%20112%2C0%2072%2C-40%27%20fill%3D%27%234cc3ee%27%2F%3E%3Cpolygon%20points%3D%27185%2C3%2070%2C68%200%2C0%27%20fill%3D%27%235a8fd1%27%2F%3E%3Cpolygon%20points%3D%2740%2C22%20185%2C3%2070%2C68%2030%2C110%27%20fill%3D%27%234ac0ec%27%2F%3E%3Cpolygon%20points%3D%270%2C0%2070%2C68%200%2C203%27%20fill%3D%27%234cc1ee%27%2F%3E%3Cpolygon%20points%3D%278%2C30%2058%2C66%208%2C195%27%20fill%3D%27%237bd0f4%27%2F%3E%3Cpolygon%20points%3D%270%2C0%20-70%2C68%200%2C203%27%20fill%3D%27%237fb3dd%27%2F%3E%3Cpolygon%20points%3D%27-6%2C20%20-62%2C66%20-6%2C190%27%20fill%3D%27%23d2ebf9%27%2F%3E%3Cpolygon%20points%3D%27-70%2C68%20-185%2C3%200%2C0%27%20fill%3D%27%2370a9dc%27%2F%3E%3Cpolygon%20points%3D%27-150%2C8%20-48%2C6%20-62%2C32%20-118%2C24%27%20fill%3D%27%237fd2f5%27%2F%3E%3Cpath%20d%3D%27M0%20-197V203M-185%203H185%27%20stroke%3D%27%23fff%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; filter:drop-shadow(0 0 5px rgba(150,210,255,0.7)); }
@keyframes ldGira{ 0%{ transform:rotate(0) scale(0.9); } 50%{ transform:rotate(180deg) scale(1.15); } 100%{ transform:rotate(360deg) scale(0.9); } }
@media (prefers-reduced-motion:no-preference){ .ld-estrela{ animation:ldGira 1.5s ease-in-out infinite; } }

/* 4) Primogema no contador "Pedidos Realizados" da home */
.stat-gema{ display:inline-block; width:22px; height:22px; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%27-215%20-215%20430%20430%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27c%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%270%27%20y1%3D%27-200%27%20x2%3D%270%27%20y2%3D%27200%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23d9b4dd%27%2F%3E%3Cstop%20offset%3D%27.5%27%20stop-color%3D%27%23a9a6d8%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%236f97d6%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27r%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%270%27%20y1%3D%27-197%27%20x2%3D%270%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23fde0d2%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23f6c3dc%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27l%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%270%27%20y1%3D%27-197%27%20x2%3D%270%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23f7c6dc%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23c6b9e6%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27e%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%27-185%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23f7c8dd%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23c2b8e4%27%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%27k%27%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%20185%2C3%2070%2C68%200%2C203%20-70%2C68%20-185%2C3%20-70%2C-67%27%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%20185%2C3%2070%2C68%200%2C203%20-70%2C68%20-185%2C3%20-70%2C-67%27%20fill%3D%27none%27%20stroke%3D%27url(%23c)%27%20stroke-width%3D%2724%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%20185%2C3%2070%2C68%200%2C203%20-70%2C68%20-185%2C3%20-70%2C-67%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%2715%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cg%20clip-path%3D%27url(%23k)%27%3E%3Cpolygon%20points%3D%270%2C-197%20-70%2C-67%200%2C0%27%20fill%3D%27url(%23r)%27%2F%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%200%2C0%27%20fill%3D%27url(%23l)%27%2F%3E%3Cpolygon%20points%3D%27-35%2C-92%20-18%2C-122%208%2C-38%20-4%2C-10%27%20fill%3D%27%23fffdf0%27%2F%3E%3Cpolygon%20points%3D%27-70%2C-67%20-185%2C3%200%2C0%27%20fill%3D%27url(%23e)%27%2F%3E%3Cpolygon%20points%3D%2770%2C-67%20185%2C3%200%2C0%27%20fill%3D%27%23c6e4f6%27%2F%3E%3Cpolygon%20points%3D%2770%2C-67%20185%2C3%20112%2C0%2072%2C-40%27%20fill%3D%27%234cc3ee%27%2F%3E%3Cpolygon%20points%3D%27185%2C3%2070%2C68%200%2C0%27%20fill%3D%27%235a8fd1%27%2F%3E%3Cpolygon%20points%3D%2740%2C22%20185%2C3%2070%2C68%2030%2C110%27%20fill%3D%27%234ac0ec%27%2F%3E%3Cpolygon%20points%3D%270%2C0%2070%2C68%200%2C203%27%20fill%3D%27%234cc1ee%27%2F%3E%3Cpolygon%20points%3D%278%2C30%2058%2C66%208%2C195%27%20fill%3D%27%237bd0f4%27%2F%3E%3Cpolygon%20points%3D%270%2C0%20-70%2C68%200%2C203%27%20fill%3D%27%237fb3dd%27%2F%3E%3Cpolygon%20points%3D%27-6%2C20%20-62%2C66%20-6%2C190%27%20fill%3D%27%23d2ebf9%27%2F%3E%3Cpolygon%20points%3D%27-70%2C68%20-185%2C3%200%2C0%27%20fill%3D%27%2370a9dc%27%2F%3E%3Cpolygon%20points%3D%27-150%2C8%20-48%2C6%20-62%2C32%20-118%2C24%27%20fill%3D%27%237fd2f5%27%2F%3E%3Cpath%20d%3D%27M0%20-197V203M-185%203H185%27%20stroke%3D%27%23fff%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; filter:drop-shadow(0 0 6px rgba(150,210,255,0.7)); }
@keyframes gemaBalanca{ 0%,100%{ transform:rotate(-12deg) scale(1); } 50%{ transform:rotate(12deg) scale(1.12); } }
@media (prefers-reduced-motion:no-preference){ .stat-gema{ animation:gemaBalanca 3.4s ease-in-out infinite; } }

/* 5) A ilustração do topo da home respira (zoom lento dentro da moldura) */
@keyframes heroRespira{ 0%,100%{ transform:scale(1) translateY(0); } 50%{ transform:scale(1.045) translateY(-5px); } }
/* (BW) a respiração agora é do .hero-art-stage — ver Release BW no fim do arquivo */

/* 6) A estrela cadente com a primogema também na home (por cima do cenário que já existe; mesma animação e mesmas regras do fundo das Mensagens) */
html:not([data-theme="light"]) body.pg-cadente-home::after{
  content:""; position:fixed; z-index:0; pointer-events:none; top:0; left:0; width:440px; height:52px;
  opacity:0; transform:translate3d(-10vw,6vh,0) rotate(24deg);
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%27-215%20-215%20430%20430%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27c%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%270%27%20y1%3D%27-200%27%20x2%3D%270%27%20y2%3D%27200%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23d9b4dd%27%2F%3E%3Cstop%20offset%3D%27.5%27%20stop-color%3D%27%23a9a6d8%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%236f97d6%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27r%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%270%27%20y1%3D%27-197%27%20x2%3D%270%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23fde0d2%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23f6c3dc%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27l%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%270%27%20y1%3D%27-197%27%20x2%3D%270%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23f7c6dc%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23c6b9e6%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27e%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%27-185%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23f7c8dd%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23c2b8e4%27%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%27k%27%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%20185%2C3%2070%2C68%200%2C203%20-70%2C68%20-185%2C3%20-70%2C-67%27%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%20185%2C3%2070%2C68%200%2C203%20-70%2C68%20-185%2C3%20-70%2C-67%27%20fill%3D%27none%27%20stroke%3D%27url(%23c)%27%20stroke-width%3D%2724%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%20185%2C3%2070%2C68%200%2C203%20-70%2C68%20-185%2C3%20-70%2C-67%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%2715%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cg%20clip-path%3D%27url(%23k)%27%3E%3Cpolygon%20points%3D%270%2C-197%20-70%2C-67%200%2C0%27%20fill%3D%27url(%23r)%27%2F%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%200%2C0%27%20fill%3D%27url(%23l)%27%2F%3E%3Cpolygon%20points%3D%27-35%2C-92%20-18%2C-122%208%2C-38%20-4%2C-10%27%20fill%3D%27%23fffdf0%27%2F%3E%3Cpolygon%20points%3D%27-70%2C-67%20-185%2C3%200%2C0%27%20fill%3D%27url(%23e)%27%2F%3E%3Cpolygon%20points%3D%2770%2C-67%20185%2C3%200%2C0%27%20fill%3D%27%23c6e4f6%27%2F%3E%3Cpolygon%20points%3D%2770%2C-67%20185%2C3%20112%2C0%2072%2C-40%27%20fill%3D%27%234cc3ee%27%2F%3E%3Cpolygon%20points%3D%27185%2C3%2070%2C68%200%2C0%27%20fill%3D%27%235a8fd1%27%2F%3E%3Cpolygon%20points%3D%2740%2C22%20185%2C3%2070%2C68%2030%2C110%27%20fill%3D%27%234ac0ec%27%2F%3E%3Cpolygon%20points%3D%270%2C0%2070%2C68%200%2C203%27%20fill%3D%27%234cc1ee%27%2F%3E%3Cpolygon%20points%3D%278%2C30%2058%2C66%208%2C195%27%20fill%3D%27%237bd0f4%27%2F%3E%3Cpolygon%20points%3D%270%2C0%20-70%2C68%200%2C203%27%20fill%3D%27%237fb3dd%27%2F%3E%3Cpolygon%20points%3D%27-6%2C20%20-62%2C66%20-6%2C190%27%20fill%3D%27%23d2ebf9%27%2F%3E%3Cpolygon%20points%3D%27-70%2C68%20-185%2C3%200%2C0%27%20fill%3D%27%2370a9dc%27%2F%3E%3Cpolygon%20points%3D%27-150%2C8%20-48%2C6%20-62%2C32%20-118%2C24%27%20fill%3D%27%237fd2f5%27%2F%3E%3Cpath%20d%3D%27M0%20-197V203M-185%203H185%27%20stroke%3D%27%23fff%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") right center / 44px 44px no-repeat,
    radial-gradient(ellipse 100% 46% at 100% 50%, rgba(160,220,255,0.40), rgba(185,150,255,0.16) 42%, transparent 74%),
    linear-gradient(90deg, transparent, rgba(201,166,255,0.55) 38%, rgba(170,225,255,0.98)) left center / calc(100% - 24px) 3px no-repeat,
    linear-gradient(90deg, transparent, rgba(205,230,255,0.55)) 0 calc(50% - 9px) / 72% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(215,190,255,0.5)) 0 calc(50% + 9px) / 64% 1px no-repeat,
    radial-gradient(2.2px 2.2px at 84% 26%, #ffffff, transparent 70%),
    radial-gradient(1.6px 1.6px at 71% 70%, rgba(190,235,255,0.95), transparent 70%),
    radial-gradient(2px 2px at 58% 18%, rgba(255,255,255,0.9), transparent 70%),
    radial-gradient(1.4px 1.4px at 49% 76%, rgba(220,200,255,0.9), transparent 70%),
    radial-gradient(2px 2px at 37% 34%, rgba(190,235,255,0.85), transparent 70%),
    radial-gradient(1.3px 1.3px at 27% 68%, rgba(255,255,255,0.8), transparent 70%),
    radial-gradient(1.6px 1.6px at 17% 30%, rgba(220,200,255,0.75), transparent 70%);
  filter:drop-shadow(0 0 8px rgba(150,210,255,0.8));
  animation:cadentesRisca 14s linear infinite, cadentesGema 1.1s ease-in-out infinite alternate;
}
@media (max-width:700px), (prefers-reduced-motion:reduce){ html:not([data-theme="light"]) body.pg-cadente-home::after{ display:none; } }

/* 7) Aparência (Minha Conta): escolha do fundo e do rastro */
.aparencia-grade{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.aparencia-op{ padding:9px 15px; border-radius:10px; font-size:0.86rem; font-weight:600; cursor:pointer; background:var(--tint); border:1px solid var(--glass-border); color:var(--ink-2); font-family:inherit; }
.aparencia-op:hover{ background:var(--tint-hover); color:var(--ink-1); }
.aparencia-op.on{ background:linear-gradient(135deg, var(--lilac), var(--lilac-deep)); color:var(--on-accent); border-color:transparent; }
.aparencia-nota{ font-size:0.82rem; color:var(--ink-3); margin:0; }

/* ===== Release BV — cursor personalizado (pedido do dono): seta lilás no lugar da padrão e a PRIMOGEMA sobre tudo que é clicável =====
   Só com mouse de verdade (hover + pointer fino); desligável em Minha Conta → Aparência (localStorage 'kuutar-cursor'='off' → o efeitos.js não põe a classe .cursor-gema).
   A primogema (.cursor-clicavel) é decidida pelo efeitos.js: onde o navegador usaria a mãozinha (cursor:pointer computado) ela entra no lugar — vale para todo botão/link, mesmo os de classes
   próprias. Campos de texto mantêm o cursor de texto; arrastar/redimensionar (cursores próprios do site) continuam como estão. Imagens de 32 px (limite seguro entre navegadores). */
@media (hover:hover) and (pointer:fine){
  html.cursor-gema, html.cursor-gema body{ cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2732%27%20height%3D%2732%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23d8c2ff%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%238a6ae8%27%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%27s%27%20x%3D%27-30%25%27%20y%3D%27-30%25%27%20width%3D%27160%25%27%20height%3D%27170%25%27%3E%3CfeDropShadow%20dx%3D%270%27%20dy%3D%271.2%27%20stdDeviation%3D%271.1%27%20flood-color%3D%27%23000%27%20flood-opacity%3D%27.55%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20d%3D%27M5%203%20L5%2025%20L10.6%2019.8%20L14.4%2028.4%20L18.3%2026.7%20L14.5%2018.3%20L22.2%2018.3%20Z%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%23fff%27%20stroke-width%3D%271.7%27%20stroke-linejoin%3D%27round%27%20filter%3D%27url(%23s)%27%2F%3E%3C%2Fsvg%3E") 5 3, auto; }
  html.cursor-gema input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]), html.cursor-gema textarea, html.cursor-gema [contenteditable="true"]{ cursor:text; }
  html.cursor-gema.cursor-clicavel, html.cursor-gema.cursor-clicavel *{ cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2732%27%20height%3D%2732%27%20viewBox%3D%27-215%20-215%20430%20430%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27c%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%270%27%20y1%3D%27-200%27%20x2%3D%270%27%20y2%3D%27200%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23d9b4dd%27%2F%3E%3Cstop%20offset%3D%27.5%27%20stop-color%3D%27%23a9a6d8%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%236f97d6%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27r%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%270%27%20y1%3D%27-197%27%20x2%3D%270%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23fde0d2%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23f6c3dc%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27l%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%270%27%20y1%3D%27-197%27%20x2%3D%270%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23f7c6dc%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23c6b9e6%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27e%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%27-185%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23f7c8dd%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23c2b8e4%27%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%27k%27%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%20185%2C3%2070%2C68%200%2C203%20-70%2C68%20-185%2C3%20-70%2C-67%27%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%20185%2C3%2070%2C68%200%2C203%20-70%2C68%20-185%2C3%20-70%2C-67%27%20fill%3D%27none%27%20stroke%3D%27url(%23c)%27%20stroke-width%3D%2724%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%20185%2C3%2070%2C68%200%2C203%20-70%2C68%20-185%2C3%20-70%2C-67%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%2715%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cg%20clip-path%3D%27url(%23k)%27%3E%3Cpolygon%20points%3D%270%2C-197%20-70%2C-67%200%2C0%27%20fill%3D%27url(%23r)%27%2F%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%200%2C0%27%20fill%3D%27url(%23l)%27%2F%3E%3Cpolygon%20points%3D%27-35%2C-92%20-18%2C-122%208%2C-38%20-4%2C-10%27%20fill%3D%27%23fffdf0%27%2F%3E%3Cpolygon%20points%3D%27-70%2C-67%20-185%2C3%200%2C0%27%20fill%3D%27url(%23e)%27%2F%3E%3Cpolygon%20points%3D%2770%2C-67%20185%2C3%200%2C0%27%20fill%3D%27%23c6e4f6%27%2F%3E%3Cpolygon%20points%3D%2770%2C-67%20185%2C3%20112%2C0%2072%2C-40%27%20fill%3D%27%234cc3ee%27%2F%3E%3Cpolygon%20points%3D%27185%2C3%2070%2C68%200%2C0%27%20fill%3D%27%235a8fd1%27%2F%3E%3Cpolygon%20points%3D%2740%2C22%20185%2C3%2070%2C68%2030%2C110%27%20fill%3D%27%234ac0ec%27%2F%3E%3Cpolygon%20points%3D%270%2C0%2070%2C68%200%2C203%27%20fill%3D%27%234cc1ee%27%2F%3E%3Cpolygon%20points%3D%278%2C30%2058%2C66%208%2C195%27%20fill%3D%27%237bd0f4%27%2F%3E%3Cpolygon%20points%3D%270%2C0%20-70%2C68%200%2C203%27%20fill%3D%27%237fb3dd%27%2F%3E%3Cpolygon%20points%3D%27-6%2C20%20-62%2C66%20-6%2C190%27%20fill%3D%27%23d2ebf9%27%2F%3E%3Cpolygon%20points%3D%27-70%2C68%20-185%2C3%200%2C0%27%20fill%3D%27%2370a9dc%27%2F%3E%3Cpolygon%20points%3D%27-150%2C8%20-48%2C6%20-62%2C32%20-118%2C24%27%20fill%3D%27%237fd2f5%27%2F%3E%3Cpath%20d%3D%27M0%20-197V203M-185%203H185%27%20stroke%3D%27%23fff%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 16 16, pointer !important; }
}

/* ===== Release BW — ilustração da home: sem as sobras da arte original + cabelo e céu com movimento (pedido do dono) =====
   1) hero-character-2.webp = a mesma arte recortada (tirei a faixa lilás e as linhas de borda que vinham na imagem original; a original fica guardada no rollback).
   2) O cabelo "balança": uma 2ª cópia da imagem fica por cima, mascarada só nas duas massas de cabelo (rosto e corpo ficam parados), com um filtro SVG (feTurbulence + feDisplacementMap,
      definido inline no index.html) que ondula devagar. 3) Estrelinhas piscam no céu. 4) O conjunto respira (zoom lento). Tudo some com "reduzir movimento"; o filtro só roda com a moldura
      na tela (efeitos.js põe .em-tela). */
.hero-art-stage{ position:absolute; inset:0; transform-origin:50% 30%; }
.hero-art-cabelo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:none; pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 25% 47% at 19% 68%, #000 52%, transparent 100%), radial-gradient(ellipse 21% 46% at 71% 56%, #000 52%, transparent 100%);
  mask-image:radial-gradient(ellipse 25% 47% at 19% 68%, #000 52%, transparent 100%), radial-gradient(ellipse 21% 46% at 71% 56%, #000 52%, transparent 100%);
}
.hero-brilho{ position:absolute; width:3px; height:3px; margin:-1.5px 0 0 -1.5px; border-radius:50%; background:#fff; box-shadow:0 0 5px 1px rgba(200,185,255,0.9), 0 0 11px 3px rgba(150,210,255,0.45); opacity:0; pointer-events:none; }
@keyframes heroPisca{ 0%,100%{ opacity:0; transform:scale(0.5); } 45%,55%{ opacity:1; transform:scale(1.25); } }
@keyframes heroRespira{ 0%,100%{ transform:scale(1) translateY(0); } 50%{ transform:scale(1.045) translateY(-5px); } }
@media (prefers-reduced-motion:no-preference){
  .hero-art-stage{ animation:heroRespira 11s ease-in-out infinite; }
  .hero-art-frame.em-tela .hero-art-cabelo{ display:block; filter:url(#heroCabelo); }
  .hero-brilho{ animation:heroPisca 3.6s ease-in-out var(--d, 0s) infinite; }
}

/* ===== Release BX — pacote estético 2 (pedido do dono: "faz tudo"): telas de entrada com o céu, 404 temática, aparecer ao rolar + parallax, cartões que inclinam, abertura da home,
   luzes/neve de fim de ano. (E-mails e favicon não passam por aqui.) Tudo respeita "reduzir movimento". ===== */

/* 404 */
.nf-wrap{ position:relative; z-index:2; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:90px 24px 60px; gap:14px; }
.nf-gema{ width:96px; height:96px; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%27-215%20-215%20430%20430%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27c%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%270%27%20y1%3D%27-200%27%20x2%3D%270%27%20y2%3D%27200%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23d9b4dd%27%2F%3E%3Cstop%20offset%3D%27.5%27%20stop-color%3D%27%23a9a6d8%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%236f97d6%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27r%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%270%27%20y1%3D%27-197%27%20x2%3D%270%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23fde0d2%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23f6c3dc%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27l%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%270%27%20y1%3D%27-197%27%20x2%3D%270%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23f7c6dc%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23c6b9e6%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27e%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%27-185%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23f7c8dd%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23c2b8e4%27%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%27k%27%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%20185%2C3%2070%2C68%200%2C203%20-70%2C68%20-185%2C3%20-70%2C-67%27%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%20185%2C3%2070%2C68%200%2C203%20-70%2C68%20-185%2C3%20-70%2C-67%27%20fill%3D%27none%27%20stroke%3D%27url(%23c)%27%20stroke-width%3D%2724%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%20185%2C3%2070%2C68%200%2C203%20-70%2C68%20-185%2C3%20-70%2C-67%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%2715%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cg%20clip-path%3D%27url(%23k)%27%3E%3Cpolygon%20points%3D%270%2C-197%20-70%2C-67%200%2C0%27%20fill%3D%27url(%23r)%27%2F%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%200%2C0%27%20fill%3D%27url(%23l)%27%2F%3E%3Cpolygon%20points%3D%27-35%2C-92%20-18%2C-122%208%2C-38%20-4%2C-10%27%20fill%3D%27%23fffdf0%27%2F%3E%3Cpolygon%20points%3D%27-70%2C-67%20-185%2C3%200%2C0%27%20fill%3D%27url(%23e)%27%2F%3E%3Cpolygon%20points%3D%2770%2C-67%20185%2C3%200%2C0%27%20fill%3D%27%23c6e4f6%27%2F%3E%3Cpolygon%20points%3D%2770%2C-67%20185%2C3%20112%2C0%2072%2C-40%27%20fill%3D%27%234cc3ee%27%2F%3E%3Cpolygon%20points%3D%27185%2C3%2070%2C68%200%2C0%27%20fill%3D%27%235a8fd1%27%2F%3E%3Cpolygon%20points%3D%2740%2C22%20185%2C3%2070%2C68%2030%2C110%27%20fill%3D%27%234ac0ec%27%2F%3E%3Cpolygon%20points%3D%270%2C0%2070%2C68%200%2C203%27%20fill%3D%27%234cc1ee%27%2F%3E%3Cpolygon%20points%3D%278%2C30%2058%2C66%208%2C195%27%20fill%3D%27%237bd0f4%27%2F%3E%3Cpolygon%20points%3D%270%2C0%20-70%2C68%200%2C203%27%20fill%3D%27%237fb3dd%27%2F%3E%3Cpolygon%20points%3D%27-6%2C20%20-62%2C66%20-6%2C190%27%20fill%3D%27%23d2ebf9%27%2F%3E%3Cpolygon%20points%3D%27-70%2C68%20-185%2C3%200%2C0%27%20fill%3D%27%2370a9dc%27%2F%3E%3Cpolygon%20points%3D%27-150%2C8%20-48%2C6%20-62%2C32%20-118%2C24%27%20fill%3D%27%237fd2f5%27%2F%3E%3Cpath%20d%3D%27M0%20-197V203M-185%203H185%27%20stroke%3D%27%23fff%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; filter:drop-shadow(0 0 16px rgba(150,210,255,0.8)); }
.nf-codigo{ font-family:'Cinzel Decorative', 'Cinzel', serif; font-weight:900; font-size:clamp(4rem, 14vw, 8rem); line-height:1; margin:6px 0 0; background:linear-gradient(135deg, #d9c2ff, #9fd8ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nf-titulo{ font-size:clamp(1.3rem, 3.2vw, 1.8rem); margin:0; }
.nf-texto{ max-width:46ch; color:var(--ink-2); margin:0 0 10px; }
.nf-botoes{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
@keyframes nfFlutua{ 0%,100%{ transform:translateY(0) rotate(-6deg); } 50%{ transform:translateY(-12px) rotate(6deg); } }
@media (prefers-reduced-motion:no-preference){ .nf-gema{ animation:nfFlutua 5s ease-in-out infinite; } }
/* a estrela cadente do fundo também na 404 e nas telas de entrada vem da classe pg-fundo-cadentes (BK/BS), nada a repetir aqui */

/* Aparecer ao rolar (home) — efeitos.js põe .revela só nos blocos que ainda estão abaixo da dobra, então nada pisca nem some se o JS falhar */
.revela{ opacity:0; transform:translateY(24px); transition:opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1) !important; }
.revela.revela-ok{ opacity:1; transform:none; }
html.paralaxe .scene-stars{ top:-130px; bottom:-130px; will-change:transform; }

/* Cartões de serviço e de preço que inclinam em 3D acompanhando o mouse (junto com o brilho do BU) */
.service-card.spot-ativo, .price-preview-card.spot-ativo, [data-tilt].spot-ativo{
  transform:perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-3px); transition:transform .12s ease-out, border-color .24s ease, box-shadow .24s ease; will-change:transform;
}
.service-card, .price-preview-card{ transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .24s ease, box-shadow .24s ease; }

/* Abertura da home: a primogema surge, o nome aparece e a cortina sobe sozinha em ~2 s (só CSS: se o JS falhar ela some do mesmo jeito; 1× por sessão; nunca com "reduzir movimento") */
#abertura{
  position:fixed; inset:0; z-index:2147483600; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; pointer-events:none;
  background:radial-gradient(ellipse at 50% 55%, #1d1442 0%, #0a0b22 62%, #06071a 100%);
  animation:aberturaSai .7s ease 1.55s forwards;
}
.abertura-gema{ width:120px; height:120px; background:url(/lua-fundo.svg) center/contain no-repeat; animation:aberturaGema 1.1s cubic-bezier(.2,.8,.2,1) both; filter:drop-shadow(0 0 22px rgba(157,123,255,.55)); }
.abertura-nome small{ font-size:0.55em; letter-spacing:0.5em; color:#9d7bff; margin-left:4px; }
.abertura-nome{ font-family:'Cinzel', serif; font-weight:700; font-size:1.7rem; letter-spacing:0.14em; color:#efe6ff; animation:aberturaNome 1s ease .5s both; }
@keyframes aberturaGema{ 0%{ transform:scale(0.2) rotate(-120deg); opacity:0; } 60%{ opacity:1; } 100%{ transform:scale(1) rotate(0); opacity:1; } }
@keyframes aberturaNome{ from{ opacity:0; transform:translateY(10px); letter-spacing:0.4em; } to{ opacity:1; transform:none; letter-spacing:0.14em; } }
@keyframes aberturaSai{ to{ opacity:0; visibility:hidden; } }
html.abertura-vista #abertura{ display:none; }
@media (prefers-reduced-motion:reduce){ #abertura{ display:none; } }

/* Fim de ano (1º/dez a 2/jan, ou ?natal=1): pisca-pisca no topo (a neve é desenhada pelo efeitos.js) */
.natal-luzes{ position:fixed; left:0; right:0; top:0; height:16px; z-index:2147482500; pointer-events:none;
  background:
    radial-gradient(circle at 12px 5px, #ff5a6a 0 3.2px, transparent 4px) 0 0 / 52px 16px repeat-x,
    radial-gradient(circle at 38px 8px, #ffd86b 0 3.2px, transparent 4px) 0 0 / 52px 16px repeat-x;
  filter:drop-shadow(0 0 4px rgba(255,255,255,0.55)); opacity:0.95; }
.natal-luzes::after{ content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 25px 6px, #6be3a1 0 3.2px, transparent 4px) 0 0 / 52px 16px repeat-x,
    radial-gradient(circle at 50px 9px, #7cc4ff 0 3.2px, transparent 4px) 0 0 / 52px 16px repeat-x; }
@keyframes natalPisca{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }
@media (prefers-reduced-motion:no-preference){ .natal-luzes{ animation:natalPisca 1.8s ease-in-out infinite; } .natal-luzes::after{ animation:natalPisca 1.8s ease-in-out .9s infinite; } }

/* ===== Release BY — pacote estético 3 (pedido do dono): Termos, Ferramentas, Minha Conta, carrossel de avaliações, rodapé, janelas de serviços, Mensagens e KPIs do admin ===== */

/* Termos: cartões numerados + índice lateral + barra de progresso */
.account-wrap.termos-wrap{ max-width:1080px; }
.termos-card.termos-pronto{ max-width:none; width:100%; }
.termos-corpo{ display:grid; grid-template-columns:230px minmax(0,1fr); gap:28px; align-items:start; margin-top:18px; }
.termos-secoes{ counter-reset:termo; display:flex; flex-direction:column; gap:14px; min-width:0; }
.termos-secoes .termos-sec{ counter-increment:termo; scroll-margin-top:92px; position:relative; padding:18px 22px 16px; border:1px solid var(--glass-border); border-radius:16px; background:linear-gradient(165deg, var(--glass-hi), var(--glass)); transition:border-color .24s ease, box-shadow .24s ease; }
.termos-secoes .termos-sec:hover{ border-color:rgba(201,166,255,0.4); box-shadow:0 12px 30px var(--shadow); }
.termos-secoes .termos-sec h3{ margin:0 0 8px; display:flex; align-items:center; gap:12px; }
.termos-secoes .termos-sec h3::before{ content:counter(termo, decimal-leading-zero); flex-shrink:0; font-family:'JetBrains Mono', monospace; font-size:0.72rem; letter-spacing:0.06em; padding:5px 9px; border-radius:999px; color:var(--on-accent); background:linear-gradient(135deg, var(--lilac), var(--lilac-deep)); }
.termos-indice{ position:sticky; top:90px; padding:16px 14px; border:1px solid var(--glass-border); border-radius:16px; background:var(--glass); backdrop-filter:blur(14px) saturate(120%); }
.termos-indice-titulo{ margin:0 0 10px !important; font-family:'JetBrains Mono', monospace; font-size:0.66rem !important; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-3) !important; }
.termos-indice ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.termos-indice a{ display:block; padding:7px 10px; border-radius:9px; font-size:0.84rem; color:var(--ink-2); border-left:2px solid transparent; transition:background .18s ease, color .18s ease, border-color .18s ease; }
.termos-indice a:hover{ background:var(--tint-hover); color:var(--ink-1); }
.termos-indice a.ativo{ background:var(--tint-hover); color:var(--ink-1); border-left-color:var(--lilac); font-weight:600; }
.termos-progresso{ position:fixed; left:0; right:0; top:0; height:3px; z-index:2147482600; background:transparent; pointer-events:none; }
.termos-progresso span{ display:block; height:100%; width:0; background:linear-gradient(90deg, #c9a6ff, #7cd2ff); box-shadow:0 0 10px rgba(150,210,255,0.7); transition:width .1s linear; }
@media (max-width:900px){
  .termos-corpo{ grid-template-columns:1fr; gap:16px; }
  .termos-indice{ position:static; padding:12px; }
  .termos-indice ol{ flex-direction:row; overflow-x:auto; gap:6px; padding-bottom:4px; }
  .termos-indice a{ white-space:nowrap; border-left:0; border:1px solid var(--glass-border); }
  .termos-indice a.ativo{ border-color:var(--lilac); }
}

/* Ferramentas: cor por jogo, barras e brilho */
#ftRoot[data-jogo="genshin"]{ --accent:#4fa8ff; }
#ftRoot[data-jogo="wuwa"]{ --accent:#2fd4b8; }
#ftRoot[data-jogo="hsr"]{ --accent:#b08cff; }
.ft-resultado{ position:relative; }
.ft-barra{ padding:10px 0 6px; }
.ft-barra + .ft-barra{ padding-top:2px; }
.ft-barra-topo{ display:flex; justify-content:space-between; gap:12px; font-size:0.78rem; color:var(--ink-3); margin-bottom:6px; }
.ft-barra-topo span:last-child{ color:var(--ink-1); font-variant-numeric:tabular-nums; font-weight:600; }
.ft-barra-trilho{ height:9px; border-radius:999px; background:var(--tint); border:1px solid var(--glass-border); overflow:hidden; }
.ft-barra-trilho span{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--accent, #7c5cff), #9fd8ff); box-shadow:0 0 10px color-mix(in srgb, var(--accent, #7c5cff) 70%, transparent); transition:width .6s cubic-bezier(.2,.7,.2,1); }
.ft-barra-trilho span.cheia{ background:linear-gradient(90deg, #5be3a0, #9fd8ff); }
.ft-resultado.ft-ok{ border-color:var(--ok-border); box-shadow:0 0 0 1px var(--ok-border), 0 10px 30px rgba(91,227,160,0.12); }
.faisca{ position:absolute; width:6px; height:6px; margin:-3px 0 0 -3px; background:#fff; border-radius:50%; box-shadow:0 0 8px 2px rgba(180,230,255,0.9); pointer-events:none; opacity:0; animation:faiscaVoa .95s ease-out forwards; }
@keyframes faiscaVoa{ 0%{ opacity:1; transform:translate(0,0) scale(1.2); } 100%{ opacity:0; transform:translate(var(--dx), var(--dy)) scale(0.2); } }

/* Minha Conta: capa no cabeçalho + anel do avatar por papel */
.account-header{ position:relative; overflow:hidden; padding-top:84px; }
.account-header::after{ content:""; position:absolute; z-index:0; left:0; right:0; top:0; height:70px; pointer-events:none;
  background:
    radial-gradient(1.6px 1.6px at 12% 30%, #fff, transparent 60%), radial-gradient(1.2px 1.2px at 28% 60%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1.6px 1.6px at 47% 22%, #fff, transparent 60%), radial-gradient(1.2px 1.2px at 63% 55%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1.6px 1.6px at 81% 28%, #fff, transparent 60%), radial-gradient(1.2px 1.2px at 92% 62%, rgba(255,255,255,0.8), transparent 60%),
    linear-gradient(115deg, rgba(124,92,255,0.55), rgba(70,120,230,0.38) 55%, rgba(190,100,200,0.32));
  border-bottom:1px solid var(--glass-border); }
.account-header > *{ position:relative; z-index:1; }
.account-header[data-papel="admin"]{ --anel:#f6dfa0; --anel2:#ffb866; }
.account-header[data-papel="funcionario"]{ --anel:#c9a6ff; --anel2:#7cd2ff; }
.account-header[data-papel="user"]{ --anel:#7cd2ff; --anel2:#9fb4ff; }
.account-avatar{ box-shadow:0 0 0 3px var(--surface, #11191f), 0 0 0 5px var(--anel, #c9a6ff), 0 6px 20px var(--shadow); }
@property --anelAng{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes anelGira{ to{ --anelAng:360deg; } }
@media (prefers-reduced-motion:no-preference){
  #accountAvatarWrap{ position:relative; border-radius:50%; }
  #accountAvatarWrap::after{ content:""; position:absolute; inset:-6px; border-radius:50%; padding:2px; pointer-events:none; opacity:0.9;
    background:conic-gradient(from var(--anelAng), transparent 0 60%, var(--anel, #c9a6ff), var(--anel2, #7cd2ff) 80%, transparent 95%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:anelGira 6s linear infinite; }
}

/* Avaliações: carrossel que desliza sozinho (home) */
.reviews-feed.reviews-carrossel{ display:block; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); padding:6px 0 10px; }
.reviews-pista{ display:flex; width:max-content; }
.reviews-conjunto{ display:flex; gap:18px; padding-right:18px; }
.reviews-carrossel .review-card{ width:310px; flex:0 0 auto; }
@keyframes revDesliza{ to{ transform:translateX(-50%); } }
@keyframes estrelaBrilha{ 0%,100%{ text-shadow:0 0 0 rgba(246,223,160,0); } 50%{ text-shadow:0 0 10px rgba(246,223,160,0.75); } }
@media (prefers-reduced-motion:no-preference){
  .reviews-pista{ animation:revDesliza var(--dur, 40s) linear infinite; }
  .reviews-feed.reviews-carrossel:hover .reviews-pista, .reviews-feed.reviews-carrossel:focus-within .reviews-pista{ animation-play-state:paused; }
  .reviews-carrossel .review-stars{ animation:estrelaBrilha 3.4s ease-in-out infinite; }
  .reviews-carrossel .review-card:nth-child(3n) .review-stars{ animation-delay:1.1s; }
  .reviews-carrossel .review-card:nth-child(3n+1) .review-stars{ animation-delay:2.2s; }
}
@media (prefers-reduced-motion:reduce){
  .reviews-feed.reviews-carrossel{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .reviews-conjunto[aria-hidden="true"]{ display:none; }
}

/* Rodapé: linha de luz no topo, marca com a primogema, links que acendem */
footer{ position:relative; }
footer::before{ content:""; position:absolute; left:6%; right:6%; top:0; height:1px; background:linear-gradient(90deg, transparent, rgba(201,166,255,0.7) 30%, rgba(124,210,255,0.7) 70%, transparent); box-shadow:0 0 14px rgba(150,210,255,0.45); }
.foot-brand{ display:flex; align-items:center; gap:10px; }
.foot-brand::before{ content:""; width:26px; height:26px; flex-shrink:0; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%27-215%20-215%20430%20430%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27c%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%270%27%20y1%3D%27-200%27%20x2%3D%270%27%20y2%3D%27200%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23d9b4dd%27%2F%3E%3Cstop%20offset%3D%27.5%27%20stop-color%3D%27%23a9a6d8%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%236f97d6%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27r%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%270%27%20y1%3D%27-197%27%20x2%3D%270%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23fde0d2%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23f6c3dc%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27l%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%270%27%20y1%3D%27-197%27%20x2%3D%270%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23f7c6dc%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23c6b9e6%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27e%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%27-185%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23f7c8dd%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23c2b8e4%27%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%27k%27%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%20185%2C3%2070%2C68%200%2C203%20-70%2C68%20-185%2C3%20-70%2C-67%27%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%20185%2C3%2070%2C68%200%2C203%20-70%2C68%20-185%2C3%20-70%2C-67%27%20fill%3D%27none%27%20stroke%3D%27url(%23c)%27%20stroke-width%3D%2724%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%20185%2C3%2070%2C68%200%2C203%20-70%2C68%20-185%2C3%20-70%2C-67%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%2715%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cg%20clip-path%3D%27url(%23k)%27%3E%3Cpolygon%20points%3D%270%2C-197%20-70%2C-67%200%2C0%27%20fill%3D%27url(%23r)%27%2F%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%200%2C0%27%20fill%3D%27url(%23l)%27%2F%3E%3Cpolygon%20points%3D%27-35%2C-92%20-18%2C-122%208%2C-38%20-4%2C-10%27%20fill%3D%27%23fffdf0%27%2F%3E%3Cpolygon%20points%3D%27-70%2C-67%20-185%2C3%200%2C0%27%20fill%3D%27url(%23e)%27%2F%3E%3Cpolygon%20points%3D%2770%2C-67%20185%2C3%200%2C0%27%20fill%3D%27%23c6e4f6%27%2F%3E%3Cpolygon%20points%3D%2770%2C-67%20185%2C3%20112%2C0%2072%2C-40%27%20fill%3D%27%234cc3ee%27%2F%3E%3Cpolygon%20points%3D%27185%2C3%2070%2C68%200%2C0%27%20fill%3D%27%235a8fd1%27%2F%3E%3Cpolygon%20points%3D%2740%2C22%20185%2C3%2070%2C68%2030%2C110%27%20fill%3D%27%234ac0ec%27%2F%3E%3Cpolygon%20points%3D%270%2C0%2070%2C68%200%2C203%27%20fill%3D%27%234cc1ee%27%2F%3E%3Cpolygon%20points%3D%278%2C30%2058%2C66%208%2C195%27%20fill%3D%27%237bd0f4%27%2F%3E%3Cpolygon%20points%3D%270%2C0%20-70%2C68%200%2C203%27%20fill%3D%27%237fb3dd%27%2F%3E%3Cpolygon%20points%3D%27-6%2C20%20-62%2C66%20-6%2C190%27%20fill%3D%27%23d2ebf9%27%2F%3E%3Cpolygon%20points%3D%27-70%2C68%20-185%2C3%200%2C0%27%20fill%3D%27%2370a9dc%27%2F%3E%3Cpolygon%20points%3D%27-150%2C8%20-48%2C6%20-62%2C32%20-118%2C24%27%20fill%3D%27%237fd2f5%27%2F%3E%3Cpath%20d%3D%27M0%20-197V203M-185%203H185%27%20stroke%3D%27%23fff%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; filter:drop-shadow(0 0 6px rgba(150,210,255,0.7)); }
.foot-nav a{ position:relative; transition:color .2s ease; }
.foot-nav a::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; border-radius:2px; background:linear-gradient(90deg, var(--lilac), #7cd2ff); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.foot-nav a:hover::after{ transform:scaleX(1); }

/* Janelas de serviços/preços: o conteúdo que troca entra com um deslize */
@keyframes conteudoEntra{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.conteudo-entra{ animation:conteudoEntra .38s cubic-bezier(.2,.7,.2,1); }

/* Mensagens: cartão de pagamento aprovado com brilho e cartão de entrega com selo de estrela */
.dm-payment-approved{ position:relative; overflow:hidden; }
.dm-payment-approved::after{ content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%; background:linear-gradient(100deg, transparent, rgba(255,255,255,0.32), transparent); transform:skewX(-20deg); pointer-events:none; }
@media (prefers-reduced-motion:no-preference){ .dm-payment-approved::after{ animation:pagBrilho 3.4s ease-in-out 0.4s 2; } }
@keyframes pagBrilho{ 0%{ left:-60%; } 55%,100%{ left:140%; } }
.dm-entrega-card{ position:relative; overflow:hidden; padding-right:62px; background:linear-gradient(135deg, var(--ok-bg), rgba(124,92,255,0.10)); }
.dm-entrega-card::before{ content:""; position:absolute; right:12px; top:12px; width:40px; height:40px; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%27-215%20-215%20430%20430%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27c%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%270%27%20y1%3D%27-200%27%20x2%3D%270%27%20y2%3D%27200%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23d9b4dd%27%2F%3E%3Cstop%20offset%3D%27.5%27%20stop-color%3D%27%23a9a6d8%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%236f97d6%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27r%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%270%27%20y1%3D%27-197%27%20x2%3D%270%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23fde0d2%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23f6c3dc%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27l%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%270%27%20y1%3D%27-197%27%20x2%3D%270%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23f7c6dc%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23c6b9e6%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27e%27%20gradientUnits%3D%27userSpaceOnUse%27%20x1%3D%27-185%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23f7c8dd%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23c2b8e4%27%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%27k%27%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%20185%2C3%2070%2C68%200%2C203%20-70%2C68%20-185%2C3%20-70%2C-67%27%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%20185%2C3%2070%2C68%200%2C203%20-70%2C68%20-185%2C3%20-70%2C-67%27%20fill%3D%27none%27%20stroke%3D%27url(%23c)%27%20stroke-width%3D%2724%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%20185%2C3%2070%2C68%200%2C203%20-70%2C68%20-185%2C3%20-70%2C-67%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%2715%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cg%20clip-path%3D%27url(%23k)%27%3E%3Cpolygon%20points%3D%270%2C-197%20-70%2C-67%200%2C0%27%20fill%3D%27url(%23r)%27%2F%3E%3Cpolygon%20points%3D%270%2C-197%2070%2C-67%200%2C0%27%20fill%3D%27url(%23l)%27%2F%3E%3Cpolygon%20points%3D%27-35%2C-92%20-18%2C-122%208%2C-38%20-4%2C-10%27%20fill%3D%27%23fffdf0%27%2F%3E%3Cpolygon%20points%3D%27-70%2C-67%20-185%2C3%200%2C0%27%20fill%3D%27url(%23e)%27%2F%3E%3Cpolygon%20points%3D%2770%2C-67%20185%2C3%200%2C0%27%20fill%3D%27%23c6e4f6%27%2F%3E%3Cpolygon%20points%3D%2770%2C-67%20185%2C3%20112%2C0%2072%2C-40%27%20fill%3D%27%234cc3ee%27%2F%3E%3Cpolygon%20points%3D%27185%2C3%2070%2C68%200%2C0%27%20fill%3D%27%235a8fd1%27%2F%3E%3Cpolygon%20points%3D%2740%2C22%20185%2C3%2070%2C68%2030%2C110%27%20fill%3D%27%234ac0ec%27%2F%3E%3Cpolygon%20points%3D%270%2C0%2070%2C68%200%2C203%27%20fill%3D%27%234cc1ee%27%2F%3E%3Cpolygon%20points%3D%278%2C30%2058%2C66%208%2C195%27%20fill%3D%27%237bd0f4%27%2F%3E%3Cpolygon%20points%3D%270%2C0%20-70%2C68%200%2C203%27%20fill%3D%27%237fb3dd%27%2F%3E%3Cpolygon%20points%3D%27-6%2C20%20-62%2C66%20-6%2C190%27%20fill%3D%27%23d2ebf9%27%2F%3E%3Cpolygon%20points%3D%27-70%2C68%20-185%2C3%200%2C0%27%20fill%3D%27%2370a9dc%27%2F%3E%3Cpolygon%20points%3D%27-150%2C8%20-48%2C6%20-62%2C32%20-118%2C24%27%20fill%3D%27%237fd2f5%27%2F%3E%3Cpath%20d%3D%27M0%20-197V203M-185%203H185%27%20stroke%3D%27%23fff%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; filter:drop-shadow(0 0 8px rgba(150,210,255,0.85)); }
.dm-entrega-card::after{ content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; background:linear-gradient(100deg, transparent, rgba(255,255,255,0.22), transparent); transform:skewX(-20deg); pointer-events:none; }
@keyframes gemaFlutuaMsg{ 0%,100%{ transform:translateY(0) rotate(-6deg); } 50%{ transform:translateY(-4px) rotate(6deg); } }
@media (prefers-reduced-motion:no-preference){ .dm-entrega-card::before{ animation:gemaFlutuaMsg 4s ease-in-out infinite; } .dm-entrega-card::after{ animation:pagBrilho 4.2s ease-in-out 0.6s 2; } }

/* ===== Status no rodapé da home (site + bot do Discord) ===== */
.foot-status{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:12px; font-size:0.78rem; color:var(--ink-3); }
.foot-status[hidden]{ display:none; }
.fs-item{ display:inline-flex; align-items:center; gap:7px; }
.fs-led{ width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; }
.fs-led.ok{ background:var(--ok, #57f287); box-shadow:0 0 7px var(--ok, #57f287); }
.fs-led.alerta{ background:#f0b232; box-shadow:0 0 7px #f0b232; }
@keyframes fsPulsa{ 0%,100%{ opacity:1; } 50%{ opacity:0.45; } }
@media (prefers-reduced-motion:no-preference){ .fs-led.ok{ animation:fsPulsa 2.6s ease-in-out infinite; } }

  /* ---------- Fixadas, "novas mensagens", busca na conversa e menu do botão direito (release BZ) ---------- */
  .dm-fixadas{ position:sticky; top:-18px; z-index:4; margin:-18px -22px 2px; padding:8px 22px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; background:var(--surface-hi); border-bottom:1px solid var(--glass-border); box-shadow:0 6px 14px -10px var(--shadow); }
  .dm-fixadas-ico{ font-size:0.95rem; }
  .dm-fixada{ display:flex; align-items:center; gap:4px; min-width:0; flex:1 1 220px; }
  .dm-fixada-ir{ display:flex; align-items:baseline; gap:8px; min-width:0; flex:1; text-align:left; background:none; border:none; cursor:pointer; padding:4px 8px; border-radius:8px; color:var(--ink-1); font-family:inherit; font-size:0.84rem; }
  .dm-fixada-ir:hover{ background:var(--tint-hover); }
  .dm-fixada-quem{ font-weight:600; color:var(--lilac); white-space:nowrap; }
  .dm-fixada-txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2); min-width:0; }
  .dm-fixada-x{ background:none; border:none; cursor:pointer; color:var(--ink-3); padding:4px 7px; border-radius:6px; font-size:0.8rem; }
  .dm-fixada-x:hover{ background:var(--tint-hover); color:var(--ink-1); }
  .dm-fixadas-topo{ display:flex; align-items:center; gap:8px; width:100%; background:none; border:none; cursor:pointer; padding:2px 0; color:var(--ink-1); font-family:inherit; font-size:0.86rem; text-align:left; }
  .dm-fixadas-seta{ margin-left:auto; color:var(--ink-3); transition:transform .15s ease; }
  .dm-fixadas.is-aberta .dm-fixadas-seta{ transform:rotate(180deg); }
  .dm-fixadas-lista{ display:none; flex:1 1 100%; flex-direction:column; gap:2px; }
  .dm-fixadas.is-aberta .dm-fixadas-lista{ display:flex; }
  .dm-message.is-fixada{ box-shadow:inset 3px 0 0 var(--lilac); }
  .dm-fixada-tag{ font-size:0.75rem; margin-left:4px; }
  .dm-msg-acoes button[data-ma="fixar"][data-fixar="0"]{ background:var(--tint-hover); }

  .dm-novas-sep{ contain:paint; display:flex; align-items:center; gap:12px; font-size:0.74rem; font-weight:700; letter-spacing:0.03em; color:var(--danger); }
  .dm-novas-sep::before, .dm-novas-sep::after{ content:""; flex:1; height:1px; background:var(--danger); background:color-mix(in srgb, var(--danger) 55%, transparent); } /* sem opacity: cada linha translúcida virava uma camada própria e deixava listras na tela do app ao rolar */
  .dm-novas-sep span{ padding:2px 10px; border-radius:999px; border:1px solid var(--danger); background:var(--panel-inset); }

  .dm-busca-conv{ display:flex; align-items:center; gap:6px; padding:8px 14px; background:var(--surface-hi); border-bottom:1px solid var(--glass-border); }
  .dm-busca-conv[hidden]{ display:none; }
  .dm-busca-conv-in{ flex:1; min-width:0; padding:7px 11px; border-radius:9px; border:1px solid var(--glass-border); background:var(--field-bg); color:var(--ink-1); font-family:inherit; font-size:0.88rem; }
  .dm-busca-conv-in:focus{ outline:none; border-color:var(--lilac); }
  .dm-busca-cont{ font-size:0.78rem; color:var(--ink-3); white-space:nowrap; min-width:70px; text-align:right; }
  .dm-busca-conv button{ background:var(--tint); border:1px solid var(--glass-border); color:var(--ink-2); border-radius:8px; padding:5px 9px; cursor:pointer; font-family:inherit; }
  .dm-busca-conv button:hover{ background:var(--tint-hover); }
  mark.dm-busca-hit{ background:rgba(234,199,105,0.4); color:inherit; border-radius:3px; padding:0 1px; }
  mark.dm-busca-hit.is-atual{ background:var(--gold); color:#1a1405; }

  .dm-ctx{ position:fixed; z-index:9000; min-width:268px; max-width:300px; padding:5px; border-radius:12px; background:var(--surface-hi); border:1px solid var(--glass-border); box-shadow:0 12px 32px var(--shadow); font-size:0.88rem; }
  .dm-ctx-item{ display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border:none; border-radius:8px; background:none; color:var(--ink-1); font-family:inherit; font-size:inherit; cursor:pointer; text-align:left; }
  .dm-ctx-item:hover, .dm-ctx-item:focus-visible, .dm-ctx-emojis button:hover, .dm-ctx-emojis button:focus-visible{ background:var(--tint-hover); outline:none; }
  .dm-ctx-item.perigo{ color:var(--danger); }
  .dm-ctx-ico{ width:1.3em; text-align:center; }
  .dm-ctx-emojis{ display:flex; flex-wrap:wrap; gap:2px; padding:3px 3px 6px; border-bottom:1px solid var(--glass-border); margin-bottom:4px; }
  .dm-ctx-emojis button{ background:none; border:none; cursor:pointer; font-size:1.15rem; padding:4px 6px; border-radius:8px; }
  .dm-ctx-sep{ height:1px; background:var(--glass-border); margin:4px 2px; }
  @media (prefers-reduced-motion:reduce){ .dm-fixadas-seta{ transition:none; } }

  /* ---------- Desempenho do funcionário na barra lateral de Mensagens (release BZ) ---------- */
  #desempSection{ display:none; }
  #staffView[data-mtab="desemp"] #desempSection{ display:block !important; }
  #staffView[data-mtab="desemp"] :is(#internalSection, #anunciosSection, #filaSection, #atendSection, #cargaInfo, .dm-mtab-vazio){ display:none !important; }
  .dm-desemp-periodos{ display:flex; flex-wrap:wrap; gap:6px; padding:4px 10px 10px; }
  #desempSection #desempAlvo{ padding:0 10px; }
  #desempSection .desemp-grid{ grid-template-columns:1fr 1fr; gap:8px; }
  #desempSection .desemp-metrica{ min-width:0; }
  .dm-desemp-nota{ font-size:0.76rem; color:var(--ink-3); margin:12px 10px 0; line-height:1.45; }
  @media (max-width:700px){
    /* 5 abas no celular (entrou Desempenho): rótulo menor pra "Atendimentos" e "Desempenho" caberem inteiros */
    #staffView .dm-mtabs .dm-mtab{ padding-left:2px; padding-right:2px; }
    #staffView .dm-mtabs .dm-mtab .tx{ font-size:0.66rem; letter-spacing:-0.01em; white-space:nowrap; }
  }

  /* Desempenho no centro da tela (desktop); no celular segue na barra lateral (release BZ) */
  .dm-desemp-painel{ display:none; flex-direction:column; flex:1; min-height:0; }
  .dm-desemp-corpo{ flex:1; overflow-y:auto; padding:22px 26px; width:100%; max-width:980px; margin:0 auto; box-sizing:border-box; }
  .dm-desemp-corpo .dm-desemp-periodos{ padding:0 0 14px; }
  .dm-desemp-corpo .desemp-grid{ grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px; }
  .dm-desemp-corpo .dm-desemp-nota{ margin:16px 2px 0; }
  .inicio-tit{ font-size:1rem; margin:0 0 10px; color:var(--ink-1); }
  .dm-desemp-corpo .inicio-tit ~ .inicio-tit{ margin-top:22px; }
  #inicioAgora{ padding:0 10px 10px; }
  #inicioAgora .desemp-grid{ grid-template-columns:1fr 1fr; gap:8px; }
  #inicioAgora2{ margin-bottom:4px; }
  .dm-desemp-dica{ display:none; font-size:0.84rem; color:var(--ink-3); margin:6px 10px; }
  @media (min-width:701px){
    #staffView[data-mtab="desemp"] .dm-main > :not(#desempPainel){ display:none !important; }
    #staffView[data-mtab="desemp"] #desempPainel{ display:flex; }
    #desempSection :is(#desempPeriodos, #desempAlvo, #inicioAgora, .dm-desemp-nota){ display:none; }
    #desempSection .dm-desemp-dica{ display:block; }
  }
  @media (max-width:700px){ .dm-desemp-painel{ display:none !important; } }

  /* Avaliações recebidas no painel "Meu desempenho" (release BZ) */
  .desemp-aval-tit{ font-size:1rem; margin:22px 0 10px; color:var(--ink-1); }
  .desemp-aval-tit span{ color:var(--ink-3); font-weight:400; font-size:0.85rem; }
  .desemp-aval-lista{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:10px; }
  .desemp-aval{ background:var(--row-bg); border:1px solid var(--glass-border); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; min-width:0; }
  .desemp-aval-topo{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .desemp-aval-estrelas{ color:var(--gold); letter-spacing:2px; font-size:1rem; }
  .desemp-aval.nota-1 .desemp-aval-estrelas, .desemp-aval.nota-2 .desemp-aval-estrelas{ color:var(--danger); }
  .desemp-aval-data{ font-size:0.74rem; color:var(--ink-3); }
  .desemp-aval-texto{ margin:0; font-size:0.9rem; color:var(--ink-1); line-height:1.45; overflow-wrap:anywhere; }
  .desemp-aval-texto.sem{ color:var(--ink-3); font-style:italic; }
  .desemp-aval-rodape{ font-size:0.76rem; color:var(--ink-3); margin-top:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .desemp-aval-vazio{ font-size:0.86rem; color:var(--ink-3); margin:6px 0 0; }


/* ---------- Identidade visual nova (2026-10-20): lua + gema ---------- */
.site-brand{ display:inline-flex; align-items:center; gap:9px; font-weight:700; letter-spacing:0.14em; }
.site-brand .sb-logo{ width:26px; height:26px; flex:none; border-radius:7px; background:url(/nav-avatar.png) center/cover no-repeat; }
.site-brand .sb-store{ font-size:0.62em; letter-spacing:0.3em; color:var(--lilac); font-weight:600; }
.brand-word{ letter-spacing:0.14em; font-weight:700; }
.brand-word span{ font-size:0.62em; letter-spacing:0.3em; font-weight:600; }
.foot-brand::before{ background:url(/nav-avatar.png) center/cover no-repeat !important; border-radius:7px; }
@media (max-width:420px){ .site-brand .sb-store{ display:none; } }
/* Fundo do tema escuro nas cores da marca (Noite / Violeta / Lilás): céu arroxeado, brilhos violeta-cristal e a lua como marca d'água no lugar da galhada */
:root{ --sky-top:#0a0c24; --sky-mid:#15163f; --sky-horizon:#30265f; --peak-far:#3e3270; }
.scene-aurora{ background:
  radial-gradient(ellipse 40% 60% at 20% 15%, rgba(125,92,255,0.22), transparent 60%),
  radial-gradient(ellipse 45% 50% at 75% 8%, rgba(76,195,238,0.14), transparent 60%),
  radial-gradient(ellipse 35% 40% at 50% 0%, rgba(185,160,255,0.14), transparent 65%); }
.scene-glow.a{ background:radial-gradient(circle, rgba(110,78,235,0.42), transparent 70%); }
.scene-glow.b{ background:radial-gradient(circle, rgba(76,195,238,0.24), transparent 70%); }
.scene-glow.c{ background:radial-gradient(circle, rgba(185,160,255,0.24), transparent 70%); }
.scene-fireflies span{ background:#efe6ff; box-shadow:0 0 7px 2px rgba(185,160,255,0.6); }
.scene-antlers{ display:none; }
.scene-sky::after{ content:""; position:absolute; top:6%; right:7%; width:min(36vw,460px); aspect-ratio:1; background:url(/lua-fundo.svg) center/contain no-repeat; opacity:0.11; }
@media (prefers-reduced-motion: no-preference){ .scene-sky::after{ animation:lua-respira 9s ease-in-out infinite; } }
@keyframes lua-respira{ 0%,100%{ opacity:0.10; } 50%{ opacity:0.17; } }
@media (max-width:700px){ .scene-sky::after{ width:70vw; right:-12%; top:3%; } }
html[data-theme="light"] .scene-sky::after{ display:none; }

/* ---------- Aviso de cookies + "Excluir minha conta" (LGPD) ---------- */
.aviso-cookies{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:9000; max-width:760px; margin:0 auto;
  display:flex; align-items:center; gap:16px; padding:14px 18px;
  background:linear-gradient(165deg, var(--glass-hi), var(--glass)); backdrop-filter:blur(16px) saturate(120%);
  border:1px solid var(--glass-border); border-radius:14px; box-shadow:0 10px 36px var(--shadow);
  animation:cookiesEntra .35s cubic-bezier(.2,.7,.2,1) both;
}
.aviso-cookies-texto{ flex:1; min-width:0; font-size:0.82rem; color:var(--ink-2); line-height:1.5; }
.aviso-cookies-texto > strong:first-child{ display:block; color:var(--ink-1); font-size:0.9rem; margin-bottom:2px; }
.aviso-cookies-texto p{ margin:0; }
.aviso-cookies-texto a{ color:var(--lilac); text-decoration:underline; text-underline-offset:2px; }
.aviso-cookies .btn{ flex:none; }
.aviso-cookies.saindo{ opacity:0; transform:translateY(10px); transition:opacity .25s ease, transform .25s ease; }
@keyframes cookiesEntra{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media (max-width:560px){ .aviso-cookies{ flex-direction:column; align-items:stretch; gap:10px; left:12px; right:12px; bottom:12px; } .aviso-cookies .btn{ width:100%; } }
@media (prefers-reduced-motion: reduce){ .aviso-cookies{ animation:none; } .aviso-cookies.saindo{ transition:none; } }

.conta-perigo{ border-color:rgba(224,114,138,0.35); }
.conta-perigo .editor-head h2{ color:var(--danger); }
.conta-perigo-det{ margin:0 0 16px; font-size:0.84rem; color:var(--ink-2); }
.conta-perigo-det summary{ cursor:pointer; color:var(--ink-1); font-weight:500; }
.conta-perigo-det ul{ margin:10px 0 0; padding-left:20px; line-height:1.6; }
.conta-perigo-det li{ margin-bottom:4px; }
.conta-perigo .btn-danger:disabled{ opacity:0.45; cursor:not-allowed; }

/* ---------- Contador de visitas (home) e painel "Visitas" do admin ---------- */
.vis-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin-bottom:18px; }
.vis-card{ background:var(--row-bg); border:1px solid var(--glass-border); border-radius:12px; padding:14px 16px; }
.vis-card .vis-num{ font-size:1.55rem; font-weight:600; color:var(--ink-1); font-variant-numeric:tabular-nums; line-height:1.15; }
.vis-card .vis-rot{ font-size:0.76rem; color:var(--ink-3); margin-top:2px; }
.vis-card .vis-sub{ font-size:0.74rem; color:var(--ink-3); margin-top:6px; }
.vis-graf{ display:flex; align-items:flex-end; gap:3px; height:120px; padding:8px 4px 0; border-bottom:1px solid var(--glass-border); }
.vis-graf .vis-barra{ flex:1; min-width:4px; background:linear-gradient(180deg, var(--lilac), var(--lilac-deep)); border-radius:3px 3px 0 0; min-height:2px; opacity:0.9; }
.vis-graf .vis-barra.zero{ opacity:0.25; }
.vis-eixo{ display:flex; justify-content:space-between; font-size:0.72rem; color:var(--ink-3); margin:4px 4px 0; }
.vis-paginas{ width:100%; border-collapse:collapse; font-size:0.84rem; margin-top:6px; }
.vis-paginas td{ padding:7px 6px; border-bottom:1px solid var(--glass-border); color:var(--ink-2); }
.vis-paginas td:last-child{ text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-1); }
.nav-visitas .vis-ico{ width:17px; height:17px; flex:none; filter:drop-shadow(0 0 5px rgba(157,123,255,0.45)); }
.nav-visitas .vis-gema{ transform-box:fill-box; transform-origin:center; }
@media (prefers-reduced-motion:no-preference){ .nav-visitas .vis-gema{ animation:visBrilha 3.2s ease-in-out infinite; } }
@keyframes visBrilha{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:0.55; transform:scale(0.72); } }

/* Contador de visitas no topo da home (pílula ao lado do Discord e do TikTok) */
.nav-visitas{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 10px 0 8px; border-radius:12px; border:1px solid var(--glass-border); background:var(--tint); color:var(--ink-1); flex-shrink:0; cursor:default; transition:border-color .2s ease, background .2s ease; }
.nav-visitas[hidden]{ display:none; }
.nav-visitas:hover{ border-color:var(--lilac); background:var(--tint-hover); }
.nav-visitas-ico{ display:inline-flex; }
.nav-visitas-txt{ display:flex; flex-direction:column; line-height:1.05; }
.nav-visitas-txt strong{ font-size:0.8rem; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink-1); }
.nav-visitas-txt small{ font-size:0.54rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3); margin-top:1px; }
@media (max-width:560px){ .nav-visitas-txt small{ display:none; } }
/* celular estreito: a pílula fica só com o ícone e o número, os botões encolhem um pouco e o "STORE" da marca sai (fica "KUUTAR") — sem isso o nome da loja era espremido e batia no botão de tema */
@media (max-width:480px){
  .nav-visitas{ height:30px; padding:0 7px 0 6px; gap:5px; }
  .nav-visitas .vis-ico{ width:15px; height:15px; }
  .nav-visitas-txt strong{ font-size:0.74rem; }
  .nav-row{ gap:6px; }
  .nav-ctas{ gap:4px; }
  .nav-cta.nav-cta-icon{ padding:8px 9px; }
  .nav-menu-btn{ width:34px; height:34px; }
  .brand-word span{ display:none; }
}

.nav-visitas .vis-pisca{ transform-box:fill-box; transform-origin:center; }
@media (prefers-reduced-motion:no-preference){
  .nav-visitas .vis-pisca{ animation:visPisca 6s ease-in-out infinite; }
  .nav-visitas:hover .vis-pisca{ animation:visPiscaDuplo .7s ease-in-out 1; }
}
@keyframes visPisca{ 0%,90%,100%{ transform:scaleY(1); } 93%{ transform:scaleY(0.08); } 96%{ transform:scaleY(1); } }
@keyframes visPiscaDuplo{ 0%,100%{ transform:scaleY(1); } 18%{ transform:scaleY(0.08); } 36%{ transform:scaleY(1); } 54%{ transform:scaleY(0.08); } 72%{ transform:scaleY(1); } }

/* ---------- Fila offline (fila-offline.js): "N mensagens aguardando conexão" ---------- */
.fila-offline-pilula{position:fixed;bottom:104px;left:0;right:0;margin:0 auto;width:fit-content;z-index:60;max-width:calc(100vw - 32px);padding:9px 14px;border-radius:999px;border:1px solid var(--glass-border);background:var(--surface-hi);color:var(--ink-1);font:600 13px/1.3 inherit;font-family:inherit;cursor:pointer;box-shadow:0 6px 22px var(--shadow)}
.fila-offline-pilula:hover{background:var(--tint-hover)}

/* ---------- Diagnóstico (diagnostico.html) ---------- */
.diag-wrap{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:96px 16px 56px}
.diag-wrap h1{font-size:1.6rem;margin:0 0 6px}
.diag-sub{color:var(--ink-3);margin:0 0 22px;font-size:.95rem}
.diag-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:16px;padding:16px 18px;margin-bottom:14px}
.diag-card h2{font-size:1rem;margin:0 0 10px;color:var(--lilac)}
.diag-lista{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.diag-lista li{display:flex;gap:10px;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:7px;font-size:.92rem}
.diag-lista li:last-child{border-bottom:0;padding-bottom:0}
.diag-lista .k{color:var(--ink-3);flex:0 0 auto}
.diag-lista .v{text-align:right;word-break:break-word;min-width:0}
.diag-ok{color:var(--ok)}.diag-atencao{color:var(--gold)}.diag-ruim{color:var(--danger)}
.diag-acoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.diag-btn{padding:9px 14px;border-radius:10px;border:1px solid var(--glass-border);background:var(--tint);color:var(--ink-1);font:600 .88rem inherit;font-family:inherit;cursor:pointer}
.diag-btn:hover{background:var(--tint-hover)}
.diag-btn.primario{background:linear-gradient(135deg,var(--lilac),var(--lilac-deep));color:var(--on-accent);border-color:transparent}
.diag-check{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;cursor:pointer}
.diag-check input{margin-top:3px}
.diag-nota{color:var(--ink-3);font-size:.82rem;margin:8px 0 0}
.diag-msg{min-height:1.2em;margin-top:8px;font-size:.88rem;color:var(--ink-2)}

/* ===== Molduras da foto de perfil (anel em volta do avatar; a lista vive em avatar-ui.js e lib/usersManager.js) =====
   Um pseudo-elemento por cima: anel por máscara (só a borda aparece), cor/animação por classe .mold-<id>. Não muda o tamanho do avatar. */
@property --mang{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
.mold{ position:relative; overflow:visible !important; }
.mold.has-foto img{ border-radius:50%; }
.mold::after{
  content:""; position:absolute; inset:-6px; border-radius:50%; padding:4px; pointer-events:none;
  background:var(--mold-g, linear-gradient(135deg,#c9a6ff,#7c5cd6));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.mold-lua{ --mold-g:linear-gradient(135deg,#efe6ff,#9d7bff 55%,#4a3b9a); --mold-c:rgba(157,123,255,.8); }
.mold-ouro{ --mold-g:linear-gradient(135deg,#fff3b0,#e8b84a 45%,#9a6a14 70%,#f6d77a); --mold-c:rgba(232,184,74,.8); }
.mold-cristal{ --mold-g:linear-gradient(135deg,#e9fbff,#7fd8f5 40%,#c9a6ff 75%,#e9fbff); --mold-c:rgba(127,216,245,.8); }
.mold-rubi{ --mold-g:linear-gradient(135deg,#ffc2cf,#e0314f 50%,#7a0f26); --mold-c:rgba(224,49,79,.75); }
.mold-neve{ --mold-g:repeating-conic-gradient(from 0deg,#ffffff 0 12deg,#a9d8f5 12deg 24deg); --mold-c:rgba(190,225,250,.8); }
.mold-aurora{ --mold-g:conic-gradient(from var(--mang),#3ee6b4,#7c5cd6,#ff7ac6,#3ee6b4); --mold-c:rgba(62,230,180,.7); }
.mold-nebulosa{ --mold-g:conic-gradient(from var(--mang),#9d7bff,#4cc3ee,#2a1f6b,#ff7ac6,#9d7bff); --mold-c:rgba(157,123,255,.75); }
.mold-abobora{ --mold-g:conic-gradient(from var(--mang),#ff8a1f,#5b2a86,#ffb347,#2b1442,#ff8a1f); --mold-c:rgba(255,138,31,.75); }
@media (prefers-reduced-motion: no-preference){
  .mold-aurora::after, .mold-nebulosa::after, .mold-abobora::after{ animation:moldGira 6s linear infinite; }
  .mold-ouro::after, .mold-cristal::after{ background-size:200% 200%; animation:moldBrilho 4s ease-in-out infinite alternate; }
}
@keyframes moldGira{ to{ transform:rotate(360deg); } }
@keyframes moldBrilho{ from{ background-position:0% 0%; } to{ background-position:100% 100%; } }

.mold-grade{ display:flex; flex-wrap:wrap; gap:10px 12px; margin:12px 0 8px; }
.mold-opc{ background:none; border:1px solid transparent; border-radius:12px; padding:6px 6px 4px; cursor:pointer; color:var(--ink-3); font:inherit; display:flex; flex-direction:column; align-items:center; gap:7px; }
.mold-opc em{ font-style:normal; font-size:0.68rem; }
.mold-opc:hover{ background:var(--surface-hi); }
.mold-opc.is-sel{ border-color:var(--lilac); color:var(--ink-1, inherit); background:var(--surface-hi); }
.mold-amostra{ width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg, var(--lilac), var(--lilac-deep)); display:block; }
.mold-amostra.mold-nenhuma{ background:none; border:2px dashed var(--glass-border); box-sizing:border-box; }

/* ===== Efeitos em volta do avatar (.fx-<id>, estilo "decoração" do Discord) + moldura "suas cores" =====
   ::before do avatar (o anel usa o ::after). Cor: --c1 do usuário (cor 1) ou o padrão de cada efeito. */
.fx{ position:relative; overflow:visible !important; }
.fx.has-foto img{ border-radius:50%; }
.fx::before{ content:""; position:absolute; pointer-events:none; z-index:2; --fxc:var(--c1, #ffd86b); color:var(--fxc); }
.mold-personalizada{ --mold-g:conic-gradient(from var(--mang),var(--c1,#c9a6ff),var(--c2,#4cc3ee),var(--c1,#c9a6ff)); --mold-c:var(--c1,rgba(201,166,255,.7)); }
.fx-faiscas::before{ inset:-10px; border-radius:50%; --fxc:var(--c1,#fff3b0);
  background:
    radial-gradient(circle at 10% 24%, var(--fxc) 0 1.6px, transparent 2.6px),
    radial-gradient(circle at 90% 18%, var(--fxc) 0 2.1px, transparent 3.2px),
    radial-gradient(circle at 96% 72%, var(--fxc) 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 18% 88%, var(--fxc) 0 2px, transparent 3px),
    radial-gradient(circle at 54% 2%, var(--fxc) 0 1.5px, transparent 2.5px);
  }
.fx-orbita::before{ inset:-9px; border-radius:50%; --fxc:var(--c1,#9fe9ff);
  background:radial-gradient(circle at 50% 0, var(--fxc) 0 3px, transparent 4.5px); }
.fx-halo::before{ top:-16%; left:17%; width:66%; height:24%; border:2.5px solid var(--fxc); border-radius:50%; --fxc:var(--c1,#ffd86b); box-shadow:0 0 8px var(--fxc), inset 0 0 6px var(--fxc); }
.fx-orelhas::before{ left:0; top:-22%; width:100%; height:60%; --fxc:var(--c1,#ffb3d9);
  background:radial-gradient(ellipse at 17% 55%,rgba(255,255,255,.55),transparent 32%),radial-gradient(ellipse at 83% 55%,rgba(255,255,255,.55),transparent 32%),linear-gradient(180deg,color-mix(in srgb,var(--fxc) 70%,#fff),var(--fxc) 60%,color-mix(in srgb,var(--fxc) 60%,#000));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M10 4Q23 12 29 44.5L5 85Q0 40 10 4Z M90 4Q77 12 71 44.5L95 85Q100 40 90 4Z'/%3E%3C/svg%3E") center/100% 100% no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M10 4Q23 12 29 44.5L5 85Q0 40 10 4Z M90 4Q77 12 71 44.5L95 85Q100 40 90 4Z'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
.fx-coroa::before{ left:14%; top:-30%; width:72%; height:52%; --fxc:var(--c1,#ffd86b);
  background:linear-gradient(180deg,#fff7c2,var(--fxc) 40%,color-mix(in srgb,var(--fxc) 55%,#5a3a00));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 87L2 28L26 44L50 4L74 44L98 28L100 87Q50 28 0 87Z'/%3E%3Ccircle cx='2' cy='26' r='5'/%3E%3Ccircle cx='50' cy='5' r='6'/%3E%3Ccircle cx='98' cy='26' r='5'/%3E%3C/svg%3E") center/100% 100% no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 87L2 28L26 44L50 4L74 44L98 28L100 87Q50 28 0 87Z'/%3E%3Ccircle cx='2' cy='26' r='5'/%3E%3Ccircle cx='50' cy='5' r='6'/%3E%3Ccircle cx='98' cy='26' r='5'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
.fx-chamas::before{ inset:0; border-radius:50%; --fxc:var(--c1,#ff7a18);
  box-shadow:0 0 6px 1px var(--fxc), 0 -4px 14px 4px color-mix(in srgb,var(--fxc) 60%,#f00), 0 -10px 22px 6px color-mix(in srgb,var(--fxc) 30%,#f00); }
.fx-coracoes::before{ content:"\2665\00a0\2665"; right:-10px; top:-12px; font-size:11px; line-height:1; --fxc:var(--c1,#ff6fa5); text-shadow:0 0 5px var(--fxc); }
.fx-estrelas::before{ content:"\2726\00a0\2727"; left:-10px; top:-10px; font-size:11px; line-height:1; --fxc:var(--c1,#fff3b0); text-shadow:0 0 5px var(--fxc); }
@media (prefers-reduced-motion: no-preference){
  .mold-personalizada::after{ animation:moldGira 6s linear infinite; }
  .fx-faiscas::before{ animation:fxPisca 2.4s ease-in-out infinite alternate, fxGira 16s linear infinite; }
  .fx-orbita::before{ animation:fxGira 3.2s linear infinite; }
  .fx-halo::before{ animation:fxFlutua 2.6s ease-in-out infinite alternate; }
  .fx-orelhas::before{ animation:fxOrelha 4s ease-in-out infinite; transform-origin:50% 100%; }
  .fx-coroa::before{ animation:fxFlutua 3s ease-in-out infinite alternate; }
  .fx-chamas::before{ animation:fxChama .9s ease-in-out infinite alternate; }
  .fx-coracoes::before{ animation:fxSobe 2.8s ease-in infinite; }
  .fx-estrelas::before{ animation:fxPisca 1.6s ease-in-out infinite alternate; }
}
@keyframes fxGira{ to{ transform:rotate(360deg); } }
@keyframes fxPisca{ from{ opacity:.35; } to{ opacity:1; } }
@keyframes fxFlutua{ from{ transform:translateY(0); } to{ transform:translateY(-2px); } }
@keyframes fxOrelha{ 0%,86%,100%{ transform:rotate(0); } 90%{ transform:rotate(-3deg) scaleY(.94); } 94%{ transform:rotate(2deg); } }
@keyframes fxChama{ from{ opacity:.7; transform:scale(.98); } to{ opacity:1; transform:scale(1.04); } }
@keyframes fxSobe{ 0%{ opacity:0; transform:translateY(6px); } 25%{ opacity:1; } 100%{ opacity:0; transform:translateY(-8px); } }
.mold-titulo{ margin:10px 0 0; font-size:0.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.mold-cores{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:6px 0; font-size:0.8rem; color:var(--ink-3); }
.mold-cores input[type=color]{ width:34px; height:26px; padding:0; border:1px solid var(--glass-border); border-radius:6px; background:none; vertical-align:middle; cursor:pointer; }
.fx-grade .mold-amostra{ margin:6px; }

/* leve: as amostras da grade ficam paradas (só mexem ao passar o mouse/selecionar); a prévia grande é que anima */
.mold-opc .mold-amostra::before, .mold-opc .mold-amostra::after{ animation-play-state:paused !important; }
.mold-opc:hover .mold-amostra::before, .mold-opc:hover .mold-amostra::after, .mold-opc.is-sel .mold-amostra::before, .mold-opc.is-sel .mold-amostra::after{ animation-play-state:running !important; }
.mold-previa{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding:16px 18px; border-radius:14px; background:var(--surface-hi); border:1px solid var(--glass-border); margin:6px 0 4px; }
.mold-previa-msg{ display:flex; align-items:center; gap:10px; min-width:0; }
.mold-previa-msg b{ display:block; font-size:0.86rem; }
.mold-previa-msg span{ font-size:0.78rem; color:var(--ink-3); }
.mold-previa-grande{ padding:8px; }
.mold-acoes{ margin-top:10px; }
.mold-previa .dm-avatar{ width:38px; height:38px; }

/* Cartão da comunidade do Discord na barra de números da home (2026-10-29) */
a.stat-discord{ text-decoration:none; color:inherit; }
.stat[hidden]{ display:none; }
.stat-discord .v{ color:var(--lilac); }