@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ============================================================
   Paleta da marca Delfus (roxo)
   ============================================================ */
:root {
  --md-primary-fg-color: #9333ea;
  --md-primary-fg-color--light: #a78bfa;
  --md-primary-fg-color--dark: #7c3aed;
  --md-accent-fg-color: #a78bfa;

  --dx-purple: #9333ea;
  --dx-violet: #a78bfa;
  --dx-grad: linear-gradient(135deg, #a78bfa 0%, #9333ea 60%, #7c3aed 100%);
}

/* Fundo escuro da marca */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #15132b;
  --md-default-bg-color--light: #1a1a2e;
  --md-default-bg-color--lighter: #1f1d38;
  --md-code-bg-color: #1c1a35;
  --dx-card-bg: rgba(255, 255, 255, 0.03);
  --dx-card-border: rgba(167, 139, 250, 0.18);
}
[data-md-color-scheme="default"] {
  --dx-card-bg: #ffffff;
  --dx-card-border: rgba(147, 51, 234, 0.14);
}

/* ============================================================
   Header + tabs
   ============================================================ */
.md-header {
  height: 3.2rem;
}
/* Tema CLARO: header roxo da marca */
[data-md-color-scheme="default"] .md-header,
[data-md-color-scheme="default"] .md-tabs {
  background: linear-gradient(90deg, #6d28d9 0%, #9333ea 55%, #a855f7 100%);
}
[data-md-color-scheme="default"] .md-header {
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08), 0 6px 26px rgba(124, 58, 237, 0.32);
}
/* Tema ESCURO: header escuro de verdade, com acento roxo sutil */
[data-md-color-scheme="slate"] .md-header {
  background: #17152b;
  box-shadow: inset 0 -1px 0 rgba(167, 139, 250, 0.16), 0 4px 24px rgba(0, 0, 0, 0.45);
}
[data-md-color-scheme="slate"] .md-tabs {
  background: #17152b;
  box-shadow: inset 0 -1px 0 rgba(167, 139, 250, 0.12);
}
/* busca no dark: superfície escura discreta */
[data-md-color-scheme="slate"] .md-search__form {
  background: rgba(255, 255, 255, 0.06);
}
[data-md-color-scheme="slate"] .md-search__form:hover {
  background: rgba(255, 255, 255, 0.1);
}
/* tab ativa no dark: sublinhado roxo (acento da marca) */
[data-md-color-scheme="slate"] .md-tabs__item--active {
  border-bottom-color: var(--dx-violet);
}
.md-header__title {
  font-weight: 700;
  letter-spacing: -0.01em;
}
.md-header__topic .md-ellipsis {
  font-size: 1.12rem;
}
/* logo do header como avatar circular limpo da mascote */
.md-header__button.md-logo {
  padding: 0.35rem 0.4rem;
}
.md-header__button.md-logo img {
  height: 1.85rem;
  width: 1.85rem;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
}
/* busca arredondada e integrada */
.md-search__form {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}
.md-search__form:hover {
  background: rgba(255, 255, 255, 0.26);
}

/* Tab ativa com destaque */
.md-tabs__link {
  opacity: 0.82;
  transition: opacity 0.15s ease;
}
.md-tabs__link:hover,
.md-tabs__link--active {
  opacity: 1;
}
.md-tabs__item--active {
  border-bottom: 2px solid #fff;
}

/* ============================================================
   Tipografia
   ============================================================ */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-header__title {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Divisórias mais nítidas entre seções */
.md-typeset h2 {
  margin-top: 2.6em;
  padding-top: 1.2rem;
  border-top: 1px solid var(--dx-card-border);
}
.md-typeset h2:first-of-type {
  border-top: 0;
  padding-top: 0;
}

/* ============================================================
   HERO da home (padrão PatternCraft: radial glow + grid)
   ============================================================ */
.dx-hero {
  position: relative;
  margin: -1.2rem -.8rem 2.5rem;
  padding: 5.5rem 1.5rem 5rem;
  text-align: center;
  border-radius: 1rem;
  overflow: hidden;
  background-color: #15132b;
  background-image:
    radial-gradient(circle at 50% -15%, rgba(147, 51, 234, 0.48), transparent 60%),
    radial-gradient(circle at 12% 95%, rgba(124, 58, 237, 0.22), transparent 45%),
    linear-gradient(rgba(167, 139, 250, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167, 139, 250, 0.05) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
  border: 1px solid var(--dx-card-border);
}
.dx-hero__eyebrow {
  display: inline-block;
  margin: 0 0 .5rem;
  padding: .25rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--dx-card-border);
  background: rgba(167, 139, 250, 0.08);
  color: #cabff3 !important;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
}
/* esconde o ¶ (permalink) no hero */
.dx-hero .headerlink {
  display: none !important;
}
.dx-hero .md-typeset h1,
.dx-hero h1 {
  font-size: 3.7rem;
  line-height: 1.02;
  margin: .3rem 0 .3rem;
  font-weight: 700;
  background: linear-gradient(135deg, #c4b5fd 0%, #a855f7 50%, #7c3aed 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  border: 0;
}
.dx-hero p {
  max-width: 34rem;
  margin: .5rem auto 1.9rem;
  color: #cfc9e6;
  font-size: .95rem;
  line-height: 1.6;
}
.dx-hero .md-button {
  margin: .25rem .3rem;
}

/* Botão primário com gradiente da marca */
.md-typeset .md-button--primary {
  background: var(--dx-grad);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0 6px 20px rgba(147, 51, 234, 0.4);
}
.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus {
  background: linear-gradient(135deg, #b69bff 0%, #9f43f0 60%, #8b46f5 100%);
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(147, 51, 234, 0.5);
}
/* Botão secundário (contornado) — texto e borda nítidos no tema escuro */
[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary) {
  color: #ede9ff;
  border-color: rgba(167, 139, 250, 0.5);
}
[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary):hover {
  background: rgba(167, 139, 250, 0.12);
  border-color: var(--dx-violet);
  color: #fff;
}
.md-typeset .md-button {
  font-weight: 600;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

/* ============================================================
   Cards (grid cards do Material) — bordas, hover, ícone roxo
   ============================================================ */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > :is(ul, ol) > li {
  border: 1px solid var(--dx-card-border);
  border-radius: .8rem;
  background: var(--dx-card-bg);
  padding: 1.1rem 1.2rem;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--dx-violet);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(147, 51, 234, 0.22);
}
.md-typeset .grid.cards .twemoji,
.md-typeset .grid.cards :is(.lg, .xl) {
  color: var(--dx-violet);
}

/* ============================================================
   Admonitions — destaque sutil
   ============================================================ */
.md-typeset .admonition,
.md-typeset details {
  border-radius: .6rem;
  border-left-width: 3px;
}
.md-typeset .admonition.tip > .admonition-title,
.md-typeset .admonition.tip {
  border-color: var(--dx-violet);
}

/* Faixa de comunidade com banner (home) */
.dx-band {
  position: relative;
  margin: 3.5rem -.8rem 0;
  padding: 3.8rem 1.5rem;
  text-align: center;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--dx-card-border);
  background-image:
    linear-gradient(rgba(21, 19, 43, 0.55), rgba(21, 19, 43, 0.82)),
    url("../assets/banner.jpg");
  background-size: cover;
  background-position: center 30%;
}
.dx-band .md-typeset h2,
.dx-band h2 {
  border: 0;
  margin: 0 0 .4rem;
  padding: 0;
  color: #fff;
}
.dx-band .headerlink {
  display: none !important;
}
.dx-band p {
  max-width: 34rem;
  margin: 0 auto 1.4rem;
  color: #e7e3f7;
}
.dx-band .md-button {
  margin: .3rem;
}

/* Screenshots do painel */
.md-typeset img.dx-shot {
  border-radius: .6rem;
  border: 1px solid var(--dx-card-border);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.28);
  margin: .4rem 0;
  width: 100%;
}

/* Tabela e código com cantos arredondados */
.md-typeset table:not([class]) {
  border-radius: .5rem;
  overflow: hidden;
}

/* Links com cor da marca no tema escuro — exceto botões */
[data-md-color-scheme="slate"] .md-typeset a:not(.md-button) {
  color: var(--dx-violet);
}

/* ============================================================
   Home estilo "central de documentação" (.dxh-*)
   ============================================================ */
.dx-home .headerlink { display: none !important; }

.dxh-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: "Space Mono", monospace; font-size: .66rem; letter-spacing: .13em;
  text-transform: uppercase; color: #c4b5fd;
  border: 1px solid var(--dx-card-border); padding: .35rem .7rem; border-radius: 99px;
}
.dxh-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--dx-violet); }

/* HERO */
.dxh-hero {
  position: relative; overflow: hidden; border-radius: 1.2rem;
  margin: 0 0 3rem; padding: clamp(2.6rem, 5vw, 4rem) clamp(1.6rem, 4vw, 3rem);
  background-color: #0f0d1c;
  background-image:
    radial-gradient(circle at 12% 0%, rgba(124, 58, 237, .38), transparent 55%),
    radial-gradient(circle at 82% 18%, rgba(167, 139, 250, .16), transparent 45%);
  border: 1px solid var(--dx-card-border);
  display: flex; gap: 2.6rem; align-items: center;
}
.dxh-hero__text { flex: 1; min-width: 0; }
.dxh-title {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: 2.9rem; line-height: 1.03; letter-spacing: -.03em; margin: .8rem 0 .6rem;
  background: linear-gradient(135deg, #ffffff 35%, #a78bfa);
  -webkit-background-clip: text; background-clip: text; color: transparent; border: 0;
}
.dxh-sub { font-size: 1rem; line-height: 1.55; color: #b6afc6; margin: 0 0 1.4rem; max-width: 32rem; }
.dxh-search {
  display: flex; align-items: center; gap: .7rem; max-width: 34rem; height: 3.1rem;
  padding: 0 1rem; border-radius: .9rem; cursor: pointer;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--dx-card-border);
  box-shadow: 0 16px 40px -18px rgba(124, 58, 237, .7);
  transition: border-color .15s ease, background .15s ease;
}
.dxh-search:hover { border-color: var(--dx-violet); background: rgba(255, 255, 255, .08); }
.dxh-search__icon { display: inline-flex; align-items: center; color: #8b8398; flex: none; }
.dxh-search__ph { color: #857e96; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dxh-kbd {
  margin-left: auto; font-family: "Space Mono", monospace; font-size: .72rem; color: #857e96;
  border: 1px solid var(--dx-card-border); padding: .1rem .5rem; border-radius: .35rem; flex: none;
}
.dxh-pop { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1rem; }
.dxh-pop__label { font-size: .75rem; color: #857e96; }
.dxh-pop a {
  font-size: .75rem; color: #c4b5fd !important; text-decoration: none;
  border: 1px solid var(--dx-card-border); padding: .2rem .65rem; border-radius: 99px;
}
.dxh-pop a:hover { background: rgba(139, 92, 246, .14); }
/* mascote recortada flutuando, com glow (spotlight) atrás */
.dxh-hero__art {
  flex: none; width: 17rem; height: 17rem; position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  animation: dxhFloat 6s ease-in-out infinite;
}
.dxh-hero__art::before {
  content: ""; position: absolute; inset: -8% 0 -2%;
  background: radial-gradient(closest-side at 50% 45%, rgba(124, 58, 237, .55), rgba(124, 58, 237, .12) 58%, transparent 75%);
  filter: blur(4px);
}
.dxh-hero__art img {
  position: relative; width: 100%; height: 100%; object-fit: contain;
  transform: scaleX(-1); /* aponta para o conteúdo */
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .5));
}
@keyframes dxhFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* seções */
.dxh-section { margin-bottom: 3rem; }
.dxh-seclabel {
  font-family: "Space Mono", monospace; font-size: .7rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--dx-violet); margin: 0 0 .7rem;
}
.dxh-sechead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.1rem; gap: 1rem; }
.dxh-sechead h2 {
  font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.5rem;
  letter-spacing: -.02em; margin: 0; border: 0; padding: 0;
}
.dxh-sechead a { color: #c4b5fd !important; font-size: .85rem; font-weight: 500; text-decoration: none; white-space: nowrap; }

/* passos numerados */
.dxh-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.dxh-step {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--dx-card-border); border-radius: .9rem; padding: 1.3rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent);
  transition: transform .15s ease, border-color .15s ease;
}
.dxh-step:hover { border-color: var(--dx-violet); transform: translateY(-3px); }
.dxh-step__n { font-family: "Space Mono", monospace; font-size: 1.3rem; font-weight: 700; color: rgba(167, 139, 250, .55); margin-bottom: .8rem; }
.dxh-step__t { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1rem; margin-bottom: .35rem; }
.dxh-step__d { font-size: .8rem; line-height: 1.5; color: #857e96; }

/* categorias */
.dxh-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.dxh-cat {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--dx-card-border); border-radius: .9rem; padding: 1.4rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.dxh-cat:hover { border-color: var(--dx-violet); transform: translateY(-3px); background: rgba(255, 255, 255, .03); }
.dxh-cat__ic {
  width: 2.5rem; height: 2.5rem; border-radius: .7rem; background: rgba(139, 92, 246, .16);
  display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;
  color: var(--dx-violet);
}
.dxh-cat__t { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.05rem; margin-bottom: .35rem; }
.dxh-cat__d { font-size: .8rem; line-height: 1.5; color: #857e96; margin-bottom: 1rem; }
.dxh-cat__n { font-family: "Space Mono", monospace; font-size: .68rem; color: #6f6884; }

/* mais acessados + suporte */
.dxh-bottom { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.3rem; }
.dxh-list { border: 1px solid var(--dx-card-border); border-radius: .9rem; overflow: hidden; }
.dxh-list a {
  display: flex; align-items: center; gap: .9rem; padding: 1rem 1.2rem; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--dx-card-border);
}
.dxh-list a:last-child { border-bottom: 0; }
.dxh-list a:hover { background: rgba(255, 255, 255, .025); }
.dxh-list__arrow { display: inline-flex; align-items: center; color: #6f6884; flex: none; }
.dxh-list__t { flex: 1; font-size: .88rem; font-weight: 500; }
.dxh-list__tag { font-family: "Space Mono", monospace; font-size: .68rem; color: #6f6884; }
.dxh-support {
  position: relative; overflow: hidden; border-radius: .9rem; border: 1px solid var(--dx-card-border);
  background-color: #14122a;
  background-image: radial-gradient(circle at 50% 18%, rgba(124, 58, 237, .32), transparent 65%);
  padding: 1.5rem; display: flex; flex-direction: column;
}
.dxh-support__ic {
  width: 2.5rem; height: 2.5rem; border-radius: .7rem; background: var(--dx-grad);
  display: flex; align-items: center; justify-content: center;
  font-family: "Space Grotesk", sans-serif; font-weight: 700; color: #fff; margin-bottom: 1rem;
}
.dxh-support h3 { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.1rem; margin: 0 0 .5rem; border: 0; padding: 0; }
.dxh-support p { font-size: .82rem; line-height: 1.55; color: #b6afc6; margin: 0 0 1.1rem; }
.dxh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 2.6rem; padding: 0 1.1rem;
  border-radius: .7rem; font-weight: 600; font-size: .85rem; text-decoration: none;
  color: #160f24 !important; background: var(--dx-grad);
  box-shadow: 0 10px 24px -10px rgba(139, 92, 246, .6); transition: transform .15s ease;
}
.dxh-support .dxh-btn { margin-top: auto; }
.dxh-btn:hover { transform: translateY(-1px); }

@media screen and (max-width: 860px) {
  .dxh-hero { flex-direction: column; align-items: stretch; }
  .dxh-hero__art { width: 100%; height: 12rem; }
  .dxh-steps { grid-template-columns: repeat(2, 1fr); }
  .dxh-cats { grid-template-columns: repeat(2, 1fr); }
  .dxh-bottom { grid-template-columns: 1fr; }
}
@media screen and (max-width: 520px) {
  .dxh-steps, .dxh-cats { grid-template-columns: 1fr; }
}

/* Home: legibilidade no tema claro (hero e card de suporte seguem escuros de propósito) */
[data-md-color-scheme="default"] .dxh-step__t,
[data-md-color-scheme="default"] .dxh-cat__t,
[data-md-color-scheme="default"] .dxh-list__t { color: #1b1726; }
[data-md-color-scheme="default"] .dxh-sub,
[data-md-color-scheme="default"] .dxh-step__d,
[data-md-color-scheme="default"] .dxh-cat__d { color: #5b556e; }
[data-md-color-scheme="default"] .dxh-step,
[data-md-color-scheme="default"] .dxh-cat { background: #fff; }
[data-md-color-scheme="default"] .dxh-list a { color: #1b1726; }