/* ============================================================
   HOME estilo NETFLIX (roxo) — sobre a home atual, via CSS.
   Não mexe no home.js: tira a sidebar, hero full-bleed,
   converte "recentes" (colunas) em fileiras e hover Netflix.
   ============================================================ */

/* 1) Sem sidebar — conteúdo ocupa a tela toda (Netflix só tem a barra do topo). */
.home-wrap { grid-template-columns: 1fr !important; }
.home-side { display: none !important; }

/* ============================================================
   FUNDO EM ONDA ROXA (ambiente estilo PS3) — 100% CSS: dois blobs roxos
   suaves derivando devagar por TRANSFORM (acelerado por GPU, roda em batata;
   sem filter:blur nem canvas). Fica FIXO atrás de tudo; os cards flutuam por
   cima (a .home-below é transparente). Respeita prefers-reduced-motion.
   ============================================================ */
.home-aura {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: radial-gradient(125% 95% at 50% 118%, #130c28 0%, #0a0914 44%, #07080c 80%);
}
.home-aura i { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.home-aura i:nth-child(1) {
  width: 92vw; height: 64vh; left: -8vw; top: 20%;
  background: radial-gradient(ellipse at center, rgba(124,77,255,.30), rgba(124,77,255,0) 62%);
  animation: aura-a 10s ease-in-out infinite alternate;
}
.home-aura i:nth-child(2) {
  width: 82vw; height: 58vh; right: -12vw; top: 46%;
  background: radial-gradient(ellipse at center, rgba(96,58,190,.24), rgba(96,58,190,0) 60%);
  animation: aura-b 13s ease-in-out infinite alternate;
}
/* Amplitude MAIOR + mais rápido = dá pra ver a onda fluindo (rotação leve deixa
   orgânico, menos "bloco arrastando"). A COR continua sutil; só o movimento cresce. */
/* Pulinho do ícone da sidebar no hover (uma vez, com molejo). */
@keyframes ds-icon-hop {
  0%   { transform: translateY(0) scale(1); }
  45%  { transform: translateY(-5px) scale(1.1); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes aura-a { from { transform: translate3d(-13%,-9%,0) scale(1) rotate(-5deg); } to { transform: translate3d(15%,11%,0) scale(1.22) rotate(5deg); } }
@keyframes aura-b { from { transform: translate3d(12%,8%,0) scale(1.18) rotate(4deg); } to { transform: translate3d(-14%,-10%,0) scale(.94) rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .home-aura i { animation: none !important; } }

/* 2) Hero full-bleed: encosta nas bordas, mais alto, gradiente estilo Netflix. */
.hero-stage { margin: -18px calc(-1 * clamp(14px, 2.2vw, 28px)) 16px !important; }
.h2-feature {
  border-radius: 0 !important; border: 0 !important; box-shadow: none !important;
  height: clamp(440px, 76vh, 800px) !important; background-position: center 16% !important;
}
.h2-feature::after { display: none; }
.h2f-grad {
  background:
    linear-gradient(77deg, rgba(8,10,15,.96) 0%, rgba(8,10,15,.72) 28%, rgba(8,10,15,.08) 56%, transparent 74%),
    linear-gradient(0deg, #080a0f 1%, rgba(8,10,15,.55) 16%, transparent 42%) !important;
}
.h2f-body { width: min(620px, 54%) !important; padding: 0 0 7vh clamp(24px, 3.5vw, 54px) !important; }
.h2f-body h1 { font-size: clamp(34px, 4.2vw, 60px) !important; }
/* Telas mais BAIXAS (notebooks curtos): título/sinopse menores pra o corpo do
   hero caber sem encavalar na barra de busca. */
@media (max-height: 800px) {
  .h2f-body h1 { font-size: clamp(30px, 3.6vw, 46px) !important; line-height: 1.05 !important; }
  .h2-feature .h2f-body { animation-duration: .55s !important; }
}
@media (max-height: 680px) {
  .h2f-body h1 { font-size: clamp(26px, 3vw, 38px) !important; }
  .h2f-body p { -webkit-line-clamp: 2 !important; }
  .h2f-body { padding-bottom: 4vh !important; }
}

/* 3) "Recentes" (colunas) viram FILEIRAS horizontais full-width (Netflix). */
.recents { display: block !important; margin: 12px 0 !important; }
.rec-col {
  max-width: none !important; background: transparent !important; border: 0 !important;
  padding: 0 !important; margin-bottom: 6px !important; overflow: visible !important;
}
.rec-col .rec-head { padding: 0 clamp(14px, 3vw, 40px) !important; margin-bottom: 6px !important; }
.rec-col .rec-head h3 { font-size: clamp(16px, 1.5vw, 20px) !important; font-weight: 800 !important; }
.rec-col .track.rec-track {
  display: flex !important; grid-template-columns: none !important; gap: 10px !important;
  overflow-x: auto !important; padding: 18px clamp(14px, 3vw, 40px) !important;
  scroll-snap-type: x proximity !important;
}
.rec-col .rec-track > .card { max-width: none !important; width: var(--cw, 168px) !important; flex: 0 0 auto !important; }

/* 4) Hover Netflix: o card cresce e destaca (folga vertical na fileira p/ não cortar). */
.track { padding-top: 18px !important; padding-bottom: 18px !important; }
.track > .card:hover,
.rec-col .rec-track > .card:hover { transform: scale(1.08) !important; z-index: 6; }
.card:hover .poster { border-color: var(--accent) !important; box-shadow: 0 20px 46px rgba(0,0,0,.72) !important; }

/* 4b) Cara Netflix: bordas QUADRADAS no poster + sem botão de play no card (só o zoom). */
.card .poster { border-radius: 0 !important; }
.card .play-ico { display: none !important; }

/* 5) Barra do topo transparente sobre o hero (fica sólida ao rolar — .solid já existe). */
.appbar:not(.solid) {
  background: linear-gradient(180deg, rgba(8,10,15,.92), transparent) !important;
  border-bottom-color: transparent !important;
}
.appbar .brand b { font-weight: 800 !important; letter-spacing: -.02em !important; }

/* 6) Hero: crossfade SUAVE do backdrop (camadas .h2f-bg) em vez da troca seca. */
.h2-feature { background-image: none !important; }
.h2f-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center 16%;
  opacity: 0; transition: opacity 1s ease; will-change: opacity;
}
.h2f-bg.on { opacity: 1; }
.h2-feature .h2f-grad { z-index: 1; }
.h2-feature .h2f-body { z-index: 2 !important; }
/* Reveal do texto um tico mais suave (menos apressado). */
.h2-feature .h2f-body { animation-duration: .62s !important; }

/* ============================================================
   BUSCA — sem a "caixinha" de foco interna + sugestões estilo Netflix
   ============================================================ */
/* 1) O tema aplica box-shadow no input:focus, criando uma borda interna feia
      dentro da pílula. Removemos SÓ na barra de busca; feedback fica no
      contorno da própria pílula (:focus-within). */
.searchbox { position: relative; }
.searchbox input:focus,
.searchbox input:focus-visible {
  box-shadow: none !important;
  border-color: transparent !important;
  outline: none !important;
}
.searchbox input { -webkit-tap-highlight-color: transparent; }
.searchbox:focus-within { border-color: rgba(139, 92, 246, .55); }

/* 2) Dropdown de sugestões (ancorado sob a pílula) */
.search-suggest {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: max(100%, 340px); max-width: 92vw;
  background: rgba(16, 18, 26, .98);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .62);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  padding: 6px;
  z-index: 60;
  max-height: min(70vh, 520px); overflow-y: auto;
  overscroll-behavior: contain;
}
.search-suggest[hidden] { display: none; }
.search-suggest::-webkit-scrollbar { width: 8px; }
.search-suggest::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, .3); border-radius: 4px; }

.ss-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 10px; cursor: pointer;
  transition: background .12s ease;
}
.ss-item.active, .ss-item:hover { background: rgba(139, 92, 246, .16); }
.ss-thumb {
  width: 44px; height: 62px; flex: none;
  border-radius: 6px; overflow: hidden;
  background: #0a0a0f; display: grid; place-items: center;
}
.ss-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ss-thumb svg { width: 18px; height: 18px; fill: rgba(255, 255, 255, .3); }
.ss-info { min-width: 0; }
.ss-info b {
  display: block; font-size: 14px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ss-info small {
  display: block; font-size: 12px; color: rgba(255, 255, 255, .5); margin-top: 2px;
}

/* Mobile: a busca ocupa a largura toda, o dropdown acompanha */
@media (max-width: 759px) {
  .search-suggest { width: 100%; left: 0; right: 0; }
}

/* ============================================================
   DETALHE DO FILME — pôster contido no card (não vaza por cima)
   O app.css dá margin-top negativa (-70px desktop / -80px mobile) no
   pôster, fazendo ele "subir" e cobrir a borda superior da box da
   sinopse. Zeramos pra ele ficar dentro do card, alinhado ao título.
   ============================================================ */
.detail2 .d2-poster { margin-top: 0; }

/* ============================================================
   SIDEBAR LATERAL estilo DISNEY+ — rail translúcida que expande no hover.
   Some no mobile (lá vale a appbar + bottomnav). No desktop substitui a
   barra do topo: nav + busca + conta viram ícones na lateral esquerda.
   ============================================================ */
.dsidebar { display: none; }
.drawer-backdrop { display: none; }

@media (min-width: 760px) {
  /* Barra fixa no topo da ÁREA DE CONTEÚDO — só com a BUSCA centralizada (a nav
     foi pra rail lateral). Transparente sobre o hero; fica sólida ao rolar. */
  .appbar {
    display: flex !important;
    position: fixed; top: 0; left: 72px; right: 0; z-index: 40;
    height: 66px; padding: 0 24px; gap: 0;
    justify-content: center; align-items: center;
    background: transparent; border: 0;
    pointer-events: none;   /* transparente não bloqueia cliques no conteúdo */
    transition: background .25s ease, backdrop-filter .25s ease, box-shadow .25s ease;
  }
  .appbar.solid {
    background: linear-gradient(180deg, rgba(8,10,15,.94) 0%, rgba(8,10,15,.72) 68%, rgba(8,10,15,0) 100%);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  /* Marca / nav / avatar já estão na rail lateral — some no topo. */
  .appbar .brand, .appbar #topnav, .appbar .spacer, .appbar .avatar, .appbar .appbar-menu { display: none !important; }
  /* Caixa de busca: pílula translúcida centralizada, combinando com o site. */
  .appbar .searchbox {
    pointer-events: auto;
    width: min(540px, 44vw); gap: 10px;
    padding: 11px 20px; border-radius: 999px;
    background: rgba(20,24,33,.82); border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 34px rgba(0,0,0,.38);
    transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
  }
  .appbar .searchbox:focus-within {
    border-color: rgba(139,92,246,.6); background: rgba(22,26,36,.96);
    box-shadow: 0 10px 34px rgba(0,0,0,.42), 0 0 0 3px rgba(139,92,246,.18);
  }
  .appbar .searchbox input { flex: 1; font-size: 15px; color: var(--text); }
  .appbar .searchbox input::placeholder { color: var(--muted); }
  .appbar .searchbox svg { width: 18px; height: 18px; }
  /* Dropdown de sugestões centralizado sob a pílula. */
  .appbar .search-suggest { left: 0; right: 0; }
  /* Conteúdo abre espaço pra rail recolhida (72px) e pra barra fixa do topo (66px).
     A rail expande POR CIMA; a home puxa o hero de volta pra cima (full-bleed). */
  #view { padding-left: 72px; padding-top: 66px; }
  .hero-wrap { margin-top: -66px; }

  .dsidebar {
    display: flex; flex-direction: column;
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 60;
    width: 72px; padding: 16px 0 18px;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(7,9,14,.94) 0%, rgba(7,9,14,.62) 62%, transparent 100%);
    transition: width .28s cubic-bezier(.4,0,.2,1), background .28s ease, box-shadow .28s ease;
  }
  /* Expande SÓ no hover do mouse (sem :focus-within, senão clicar num item e
     tirar o mouse deixava a rail aberta porque o botão ficava focado). */
  .dsidebar:hover {
    width: 244px;
    background: linear-gradient(90deg, rgba(9,11,17,.99) 0%, rgba(9,11,17,.97) 74%, rgba(9,11,17,.82) 100%);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 26px 0 70px rgba(0,0,0,.55);
  }

  /* Itens: ícone fixo (área de 72px) + rótulo que aparece ao expandir. */
  .dsidebar .ds-brand,
  .dsidebar .ds-item {
    display: flex; align-items: center; gap: 2px;
    height: 50px; margin: 3px 10px; padding: 0;
    border: 0; background: none; cursor: pointer;
    color: #fff; white-space: nowrap;
    border-radius: 12px;
    transition: color .15s ease, background .15s ease;
  }
  .dsidebar .ds-ic {
    flex: 0 0 52px; display: grid; place-items: center;
  }
  .dsidebar .ds-ic svg { width: 24px; height: 24px;
    fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .dsidebar .ds-logo { width: 40px; height: 40px; object-fit: contain; display: block;
    filter: drop-shadow(0 0 8px rgba(139,92,246,.45)); }
  .dsidebar .ds-label {
    font-size: 16px; font-weight: 700; letter-spacing: -.01em;
    opacity: 0; transform: translateX(-6px);
    transition: opacity .18s ease, transform .22s ease;
  }
  .dsidebar:hover .ds-label { opacity: 1; transform: none; }

  .dsidebar .ds-item:hover { color: #fff; background: rgba(255,255,255,.07); }
  /* Micro-interação: o ícone dá UM pulinho com molejo ao passar o mouse (não em
     loop — só na entrada do hover). Dá vida sem distrair. */
  .dsidebar .ds-item:hover .ds-ic svg { animation: ds-icon-hop .42s cubic-bezier(.34, 1.56, .64, 1); }
  @media (prefers-reduced-motion: reduce) { .dsidebar .ds-item:hover .ds-ic svg { animation: none; } }
  .dsidebar .ds-item.active { color: #fff; }
  .dsidebar .ds-item.active .ds-ic::before {
    content: ""; position: absolute; left: 0; width: 3px; height: 26px;
    border-radius: 0 3px 3px 0; background: var(--accent, #8b5cf6);
    box-shadow: 0 0 12px rgba(139,92,246,.7);
  }
  .dsidebar .ds-item.active .ds-ic { position: relative; }

  /* Marca (logo) no topo, colada nas outras. */
  .dsidebar .ds-brand { height: 56px; margin-bottom: 10px; color: #fff; cursor: pointer; }
  .dsidebar .ds-brandname {
    background: var(--accent-grad); -webkit-background-clip: text; background-clip: text;
    color: transparent; font-weight: 900; font-size: 20px;
  }
  .dsidebar .ds-nav { display: flex; flex-direction: column; }
  .dsidebar .ds-spacer { flex: 1; }

  /* Avatar da conta na base. */
  .dsidebar .ds-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--accent-grad); color: #fff; font-weight: 800; font-size: 15px;
  }

  /* A home já é full-bleed; impede o hero de escorregar pra baixo da rail. */
  .hero-stage { margin-left: 0 !important; }
}

/* ============================================================
   PARALLAX da home (desktop): o hero fica FIXO e escurece conforme
   você rola, e os cards sobem por cima dele. --heroDim é setado pelo
   scroll em home.js (0 -> ~0.72).
   ============================================================ */
@media (min-width: 760px) {
  /* Hero SIMPLES e robusto: a imagem rola normalmente (nada de sticky) e o corpo
     fica ABSOLUTE no rodapé dela, rolando junto — sem position:fixed nem fade por
     JS, que viviam encavalando o texto nos cards em telas widescreen. */
  .hero-stage { position: relative; margin-top: 0 !important; }
  .h2f-body {
    position: absolute !important; left: 0; right: auto; top: auto; z-index: 5;
    bottom: clamp(44px, 8vh, 104px) !important;
    width: min(620px, 46vw) !important;
    padding: 0 0 0 clamp(30px, 4vw, 60px) !important;
    transform: none !important; opacity: 1 !important;
  }
  .home-below {
    position: relative; z-index: 2; background: transparent; /* deixa a aura roxa aparecer atrás */
    /* Estende até a borda direita igual o hero (senão o fundo do hero aparecia
       numa faixa de ~28px à direita, onde o home-below não chegava). */
    margin-right: calc(-1 * clamp(14px, 2.2vw, 28px));
  }
  /* Fade no topo do home-below: dissolve a emenda com o hero (sem borda dura).
     Mais alto e com curva gradual pra sumir mesmo em telas de brilho alto. */
  .home-below::before {
    content: ""; position: absolute; left: 0; right: 0; top: -240px; height: 240px;
    background: linear-gradient(to bottom,
      transparent 0%,
      rgba(8,10,15,.15) 30%,
      rgba(8,10,15,.5) 60%,
      rgba(8,10,15,.85) 82%,
      var(--bg) 100%);
    pointer-events: none;
  }
  /* Camada de escurecimento sobre TODO o hero (fundo + gradiente + texto). */
  .h2-feature::after {
    content: "" !important; display: block !important;
    position: absolute; inset: 0; z-index: 4;
    background: #04050a; opacity: var(--heroDim, 0);
    pointer-events: none;
  }
  /* Leve zoom no fundo conforme escurece — dá o toque "vivo" do parallax. */
  .h2-feature .h2f-bg { transform: scale(calc(1 + (var(--heroDim, 0) * 0.06))); transition: transform .1s linear; }
}

/* Wrapper do hero: contém o hero (fundo) + o corpo (que no desktop vira fixed
   pra escapar por cima dos cards; no mobile fica absoluto sobreposto ao hero). */
.hero-wrap { position: relative; }
@media (max-width: 759px) {
  /* ===== HERO MOBILE — IMAGEM no topo, CONTEÚDO (título/sinopse/botões) ABAIXO,
     em fluxo normal. Acaba com o overlay que cortava o texto: nada fica por cima
     da imagem, tudo se adapta a qualquer tela. ===== */
  .hero-stage { margin: 0 !important; position: relative; }
  .h2-feature {
    height: clamp(260px, 42vh, 420px) !important;
    background-position: center 22% !important;
    border-radius: 0 !important;
  }
  .h2f-grad {
    background: linear-gradient(0deg, var(--bg) 1%, rgba(8,10,15,.55) 34%, rgba(8,10,15,.05) 72%, transparent 100%) !important;
  }
  .hero-wrap { display: block; }
  .hero-wrap .h2f-body {
    position: static !important; width: auto !important; max-width: none !important;
    padding: 8px 20px 8px !important;
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
  .hero-wrap .h2f-kick { font-size: 10.5px !important; letter-spacing: .1em; margin-bottom: 3px; }
  .hero-wrap .h2f-kick svg { width: 13px; height: 13px; }
  .hero-wrap .h2f-body h1 {
    font-size: clamp(23px, 6.6vw, 34px) !important; line-height: 1.1 !important;
    margin: 4px 0 9px !important; max-width: 100% !important;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hero-wrap .h2f-meta { gap: 7px !important; margin-bottom: 11px !important; }
  .hero-wrap .h2f-meta span { font-size: 10.5px !important; padding: 4px 9px !important; }
  .hero-wrap .h2f-body p {
    font-size: 13.5px !important; line-height: 1.5 !important;
    -webkit-line-clamp: 3 !important; max-width: 100% !important; margin: 0 0 15px !important;
  }
  .hero-wrap .h2f-act { gap: 10px !important; }
  .hero-wrap .h2f-act .btn { flex: 1 1 100% !important; min-width: 0 !important; justify-content: center !important; min-height: 50px !important; font-size: 15px !important; }
  .hero-wrap .h2f-act .hero-list { display: none !important; }
  /* Dots sobre a base da imagem. */
  .h2-dots { left: 0 !important; right: 0 !important; bottom: 8px !important; top: auto !important; justify-content: center !important; z-index: 6; }

  /* ===== APPBAR: hambúrguer (abre o drawer) + busca + conta. Marca some (fica no drawer). */
  .appbar { gap: 8px !important; padding: 0 10px !important; }
  .appbar .brand { display: none !important; }
  .appbar .appbar-menu {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: none; border: 0; background: none; color: #fff;
    cursor: pointer; padding: 0;
  }
  .appbar .appbar-menu svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

  /* ===== MENU LATERAL DESLIZÁVEL (drawer) — reaproveita a .dsidebar. A bottomnav
     some; a navegação toda (inclusive a Party) vive aqui e cabe folgado. ===== */
  .bottomnav { display: none !important; }
  body.nav-open { overflow: hidden; }
  .drawer-backdrop {
    display: block; position: fixed; inset: 0; z-index: 59; background: rgba(0,0,0,.55);
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
  }
  body.nav-open .drawer-backdrop { opacity: 1; pointer-events: auto; }
  .dsidebar {
    display: flex !important; flex-direction: column;
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 60;
    width: min(82vw, 300px); padding: 16px 10px calc(16px + env(safe-area-inset-bottom));
    background: #0b0d13; box-shadow: 30px 0 80px rgba(0,0,0,.6);
    transform: translateX(-100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
  }
  body.nav-open .dsidebar { transform: translateX(0); }
  .dsidebar .ds-brand, .dsidebar .ds-item {
    display: flex; align-items: center; gap: 6px; width: 100%;
    height: 52px; margin: 2px 0; padding: 0 10px; border: 0; background: none;
    color: #fff; border-radius: 12px; cursor: pointer; white-space: nowrap; font: inherit; text-decoration: none;
  }
  .dsidebar .ds-ic { flex: 0 0 44px; display: grid; place-items: center; }
  .dsidebar .ds-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .dsidebar .ds-label { opacity: 1 !important; transform: none !important; font-size: 16px; font-weight: 700; }
  .dsidebar .ds-item:active { background: rgba(255,255,255,.08); }
  .dsidebar .ds-item.active { color: #a78bfa; }
  .dsidebar .ds-brand { height: 58px; margin-bottom: 6px; }
  .dsidebar .ds-brandname { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; font-size: 22px; }
  .dsidebar .ds-logo { width: 38px; height: 38px; object-fit: contain; }
  .dsidebar .ds-spacer { flex: 1; min-height: 8px; }
  .dsidebar .ds-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-grad); color: #fff; font-weight: 800; font-size: 14px; }
  .dsidebar .ds-party { color: #c4b5fd; }
}