/* ==========================================
   SIN CITY - PALETA AVANCADA
   C6.2 - Primeiros controles independentes
   ========================================== */

:root {
  --custom-header-bg: var(--surface);
  --custom-sidebar-bg: var(--surface);
  --custom-card-bg: var(--surface);
  --custom-glow: var(--accent);
}

/* Cabecalho independente */
.topbar {
  background: color-mix(
    in srgb,
    color-mix(in srgb, var(--custom-header-bg) 55%, color-mix(in srgb,var(--surface) 93%,var(--accent))) 94%,
    transparent
  );
}

/* Menu lateral independente */
.sidebar {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--custom-sidebar-bg) 60%, color-mix(in srgb,var(--surface) 91%,var(--accent))),
    var(--custom-sidebar-bg)
  );
}

/* Cartoes de categorias */
.category-card {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--custom-card-bg) 86%, var(--accent)),
    var(--custom-card-bg)
  );
}

.category-card:hover {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--custom-card-bg) 75%, var(--accent)),
    var(--custom-card-bg)
  );
}

/* Cartoes de regras e atualizacoes */
.rule-card {
  background: color-mix(
    in srgb,
    var(--custom-card-bg) 95%,
    var(--accent)
  );
}

.update-card {
  background: color-mix(
    in srgb,
    var(--custom-card-bg) 70%,
    transparent
  );
}

.search-result,
.rule-toc {
  background: color-mix(
    in srgb,
    var(--custom-card-bg) 88%,
    transparent
  );
}

/* Brilhos independentes */
.category-card::before {
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--custom-glow) 24%, transparent),
    transparent 68%
  );
}

.category-hero::after {
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--custom-glow) 27%, transparent),
    transparent 68%
  );
}

.category-hero-icon {
  box-shadow: 0 0 45px
    color-mix(in srgb, var(--custom-glow) 16%, transparent);
}

/* ==========================================
   C6.3 - INDICADORES E ETIQUETAS
   Cores independentes com padrao automatico
   ========================================== */

/* Identidade e titulos pequenos */
.brand-copy small,
.side-eyebrow,
.eyebrow,
.toc-title {
  color: var(--custom-label-color, var(--accent-light));
}

/* Menu lateral */
.side-label {
  color: var(--custom-label-color, #89759b);
}

.category-nav button .nav-number {
  color: var(--custom-label-color, #806a92);
}

.category-nav .nav-number {
  color: var(--custom-label-color, #806a92);
}

.category-nav button.active .nav-number {
  color: var(--custom-label-color, var(--accent-light));
}

.nav-rule-code {
  color: var(--custom-label-color, #a782c9);
}

.nav-no-rules {
  color: var(--custom-label-color, #84778d);
}

.side-version {
  color: var(--custom-label-color, #675672);
}

/* Indicadores da pagina inicial */
.section-index {
  color: var(--custom-label-color, #9c7ab8);
}

.card-index {
  color: var(--custom-label-color, #9272ae);
}

.card-bottom {
  color: var(--custom-label-color, #a78ac2);
}

.hero-bottom-note {
  color: var(--custom-label-color, #a995ba);
}

.hero-signature {
  color: var(--custom-label-color, rgba(227,203,255,.62));
}

.notice-mark {
  color: var(--custom-label-color, #715b82);
}

/* Etiquetas das regras e atualizacoes */
.rule-code {
  color: var(--custom-label-color, var(--accent-light));
}

.rule-tag {
  color: var(--custom-label-color, #bda1d9);
}

.update-meta,
.search-result-meta {
  color: var(--custom-label-color, var(--muted));
}

/* C6.3 - Setas do menu lateral */
.category-nav .nav-expand {
  color: var(--custom-label-color, #a58cbb);
}

/* ==========================================
   C6.4 - BRILHO DO CURSOR E DO RASTRO
   ========================================== */

/* Brilho do cursor ao passar sobre elementos */
html.sin-city-cursor-enabled .custom-cursor.hovering {
  filter: drop-shadow(
    0 0 10px
    color-mix(
      in srgb,
      var(--cursor-glow-color, #AF7AFF) 95%,
      transparent
    )
  );
}

/* Brilho do rastro acompanha sua própria cor */
.cursor-trail {
  box-shadow:
    0 0 7px
    color-mix(
      in srgb,
      var(--trail-color, #2D1243) 72%,
      transparent
    ),
    0 0 15px
    color-mix(
      in srgb,
      var(--trail-color, #2D1243) 42%,
      transparent
    );
}


/* ==========================================
   C6.6 - COR DA BARRA DE ROLAGEM LATERAL
   ========================================== */

/* Firefox e navegadores com suporte a scrollbar-color */
.sidebar {
  scrollbar-color: var(--custom-scrollbar-color, #4d3268) transparent;
}

/* Compatibilidade com navegadores WebKit antigos */
.sidebar::-webkit-scrollbar-thumb {
  background-color: var(--custom-scrollbar-color, #4d3268);
}


/* ==========================================
   C6.9 - RODAPE DO MENU LATERAL
   Cores independentes e automaticas
   ========================================== */
.side-bottom p {
  color: var(--custom-side-footer-top-color, var(--muted));
}
.side-bottom strong {
  color: var(--custom-side-footer-highlight-color, #e6d9f0);
}
.side-bottom .side-version {
  color: var(--custom-side-footer-bottom-color, var(--custom-label-color, #675672));
}

/* C6.11 - imagem opcional de fundo, por baixo de camada de contraste */
body.sin-city-custom-bg {
  background-image: linear-gradient(180deg,rgba(8,8,11,.84),rgba(8,8,11,.89)), var(--site-background-image);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* C6.12 — auditoria geral de cores: cor automática herdada do tema. */
:root {
  --custom-nav-text: color-mix(in srgb,var(--text) 68%,var(--muted));
  --custom-action-text:var(--text);
  --custom-content-text:color-mix(in srgb,var(--text) 78%,var(--muted));
  --custom-category-panel:color-mix(in srgb,var(--custom-card-bg) 84%,var(--accent));
  --custom-nav-button:color-mix(in srgb,var(--surface) 84%,var(--accent));
  --custom-search-panel:color-mix(in srgb,var(--surface) 88%,var(--accent));
  --custom-nav-highlight:var(--accent);
  --custom-edge-color:var(--accent-light);
  --line:color-mix(in srgb,var(--custom-edge-color) 18%,transparent);
}
.side-home,.category-nav .nav-category,.category-nav .nav-rule-link {
  color:var(--custom-nav-text);
}
.search-button,.search-button kbd,.back-button,
.category-navigation button,.category-navigation button span,
.search-modal-top button,.toc-items button,.toc-items button span,.search-modal-foot {
  color:var(--custom-action-text);
}
.rule-content,.rule-content em,.rule-content pre,.rule-content code,.md-table td,
.category-hero-text>p:last-child,.search-page-hero>p:not(.eyebrow) {
  color:var(--custom-content-text);
}
.category-hero {
  background:linear-gradient(105deg,
    color-mix(in srgb,var(--custom-category-panel) 94%,transparent),
    color-mix(in srgb,var(--custom-category-panel) 91%,transparent)),
    url("./assets/cemetery-halloween.svg") center/cover;
}
.category-navigation button {background:var(--custom-nav-button);}
.search-page-hero {
  background:linear-gradient(110deg,
    color-mix(in srgb,var(--custom-search-panel) 95%,transparent),
    color-mix(in srgb,var(--custom-search-panel) 92%,transparent)),
    url("./assets/cemetery-halloween.svg") center/cover;
}
.search-modal {background:var(--custom-search-panel);}
.big-search-wrap,.overlay-input-wrap {
  background:color-mix(in srgb,var(--custom-search-panel) 66%,transparent);
}
.topbar,.hero,.category-hero,.search-page-hero,.rule-card,
.category-navigation button,.search-button,.ghost-button,
.search-modal,.search-result,.big-search-wrap,.overlay-input-wrap {
  border-color:color-mix(in srgb,var(--custom-edge-color) 24%,transparent);
}
.nav-rule-list {border-left-color:color-mix(in srgb,var(--custom-edge-color) 28%,transparent);}
.side-home:hover,.category-nav .nav-category:hover,.nav-group.expanded .nav-category,
.category-nav .nav-rule-link:hover,.category-nav .nav-rule-link.active,
.category-nav .nav-expand:hover,.toc-items button:hover,.toc-items button.active {
  background:color-mix(in srgb,var(--custom-nav-highlight) 23%,transparent);
}
.side-home.active,.category-nav .nav-category.active {
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--custom-nav-highlight) 42%,transparent),
    color-mix(in srgb,var(--custom-nav-highlight) 8%,transparent));
  border-color:color-mix(in srgb,var(--custom-nav-highlight) 24%,transparent);
}
.category-navigation button:hover,.search-button:hover,.ghost-button:hover {
  background:color-mix(in srgb,var(--custom-nav-button) 80%,var(--custom-nav-highlight));
  border-color:color-mix(in srgb,var(--custom-nav-highlight) 52%,transparent);
}
.primary-button:hover {
  background:var(--custom-nav-highlight);
  box-shadow:0 9px 25px color-mix(in srgb,var(--custom-nav-highlight) 36%,transparent);
}

/* C6.13 — cor independente dos negritos nas regras.
   Automatico respeita o texto principal original; titulos e botoes nao sao afetados. */
.rule-content strong,
.rule-content b {
  color: var(--custom-rule-bold-color, var(--text));
}

/* C6.14 — assinatura da capa: cor opcional separada dos indicadores. */
.hero-signature {
  color: var(--custom-hero-signature-color, var(--custom-label-color, var(--accent-light)));
  max-width: min(46%, 320px);
}
.hero-signature > span,
.hero-signature > small {
  overflow-wrap: anywhere;
}

/* C7.1 — Clean remove ornamentos, mas não bloqueia nenhuma cor editável. */
body.sin-city-clean{background-image:none!important;}
body.sin-city-clean .ambient-noise{display:none;}
body.sin-city-clean .hero{box-shadow:none;}
body.sin-city-clean .hero-vignette{background:linear-gradient(90deg,color-mix(in srgb,var(--background) 94%,transparent),color-mix(in srgb,var(--background) 55%,transparent));}
body.sin-city-clean .notice,body.sin-city-clean .category-card{box-shadow:none;}

/* C7.2 — detalhes cartoon: somente quando Halloween está ativo.
   As cores continuam vindas do editor visual; nada fica travado. */
body.sin-city-halloween .hero{border-radius:19px;border-color:color-mix(in srgb,var(--accent-light) 44%,transparent);box-shadow:0 16px 38px color-mix(in srgb,var(--background) 75%,transparent);}
body.sin-city-halloween .hero-backdrop{background-position:center center;opacity:.98;}
body.sin-city-halloween .hero-vignette{background:linear-gradient(90deg,color-mix(in srgb,var(--background) 94%,transparent) 0%,color-mix(in srgb,var(--background) 85%,transparent) 30%,color-mix(in srgb,var(--background) 38%,transparent) 57%,transparent 82%),linear-gradient(0deg,color-mix(in srgb,var(--background) 38%,transparent),transparent 55%);}
body.sin-city-halloween .category-card,body.sin-city-halloween .rule-card,body.sin-city-halloween .update-card,body.sin-city-halloween .notice{border-radius:15px;}
body.sin-city-halloween .category-card::before{opacity:.55;}
body.sin-city-halloween .category-hero,body.sin-city-halloween .search-page-hero{background:linear-gradient(110deg,color-mix(in srgb,var(--custom-category-panel) 97%,transparent),color-mix(in srgb,var(--custom-category-panel) 89%,transparent)),url("./assets/themes/halloween/background.svg") center/cover;}
body.sin-city-halloween .category-hero{border-radius:15px;}
@media(max-width:620px){body.sin-city-halloween .hero{border-radius:14px;}body.sin-city-halloween .hero-backdrop{background-position:58% center;}body.sin-city-halloween .hero-vignette{background:linear-gradient(90deg,color-mix(in srgb,var(--background) 97%,transparent),color-mix(in srgb,var(--background) 70%,transparent) 68%,color-mix(in srgb,var(--background) 20%,transparent));}}

/* C7.3 — Natal cartoon: detalhes decorativos apenas no tema Natal.
   Todas as cores continuam controladas pelo editor. */
body.sin-city-natal .hero{border-radius:19px;border-color:color-mix(in srgb,var(--accent-light) 44%,transparent);box-shadow:0 18px 44px color-mix(in srgb,var(--background) 76%,transparent);}
body.sin-city-natal .hero-backdrop{background-position:center center;opacity:.98;}
body.sin-city-natal .hero-vignette{background:linear-gradient(90deg,color-mix(in srgb,var(--background) 95%,transparent) 0%,color-mix(in srgb,var(--background) 86%,transparent) 30%,color-mix(in srgb,var(--background) 42%,transparent) 56%,transparent 83%),linear-gradient(0deg,color-mix(in srgb,var(--background) 35%,transparent),transparent 58%);}
body.sin-city-natal .category-card,body.sin-city-natal .rule-card,body.sin-city-natal .update-card,body.sin-city-natal .notice{border-radius:15px;}
body.sin-city-natal .category-card::before{opacity:.48;}
body.sin-city-natal .category-hero,body.sin-city-natal .search-page-hero{background:linear-gradient(110deg,color-mix(in srgb,var(--custom-category-panel) 97%,transparent),color-mix(in srgb,var(--custom-category-panel) 89%,transparent)),url("./assets/themes/natal/background.svg") center/cover;}
body.sin-city-natal .category-hero{border-radius:15px;}
@media(max-width:620px){body.sin-city-natal .hero{border-radius:14px;}body.sin-city-natal .hero-backdrop{background-position:60% center;}body.sin-city-natal .hero-vignette{background:linear-gradient(90deg,color-mix(in srgb,var(--background) 97%,transparent),color-mix(in srgb,var(--background) 70%,transparent) 66%,color-mix(in srgb,var(--background) 20%,transparent));}}

/* C7.4 — Páscoa cartoon: somente em modo Páscoa.
   Controles do editor continuam livres para definir cores. */
body.sin-city-pascoa .hero{border-radius:19px;border-color:color-mix(in srgb,var(--accent-light) 44%,transparent);box-shadow:0 18px 44px color-mix(in srgb,var(--background) 76%,transparent);}
body.sin-city-pascoa .hero-backdrop{background-position:center center;opacity:.98;}
body.sin-city-pascoa .hero-vignette{background:linear-gradient(90deg,color-mix(in srgb,var(--background) 95%,transparent) 0%,color-mix(in srgb,var(--background) 86%,transparent) 30%,color-mix(in srgb,var(--background) 40%,transparent) 56%,transparent 83%),linear-gradient(0deg,color-mix(in srgb,var(--background) 32%,transparent),transparent 58%);}
body.sin-city-pascoa .category-card,body.sin-city-pascoa .rule-card,body.sin-city-pascoa .update-card,body.sin-city-pascoa .notice{border-radius:15px;}
body.sin-city-pascoa .category-card::before{opacity:.45;}
body.sin-city-pascoa .category-hero,body.sin-city-pascoa .search-page-hero{background:linear-gradient(110deg,color-mix(in srgb,var(--custom-category-panel) 97%,transparent),color-mix(in srgb,var(--custom-category-panel) 89%,transparent)),url("./assets/themes/pascoa/background.svg") center/cover;}
body.sin-city-pascoa .category-hero{border-radius:15px;}
@media(max-width:620px){body.sin-city-pascoa .hero{border-radius:14px;}body.sin-city-pascoa .hero-backdrop{background-position:62% center;}body.sin-city-pascoa .hero-vignette{background:linear-gradient(90deg,color-mix(in srgb,var(--background) 97%,transparent),color-mix(in srgb,var(--background) 70%,transparent) 66%,color-mix(in srgb,var(--background) 20%,transparent));}}

/* C7.5 — Carnaval brasileiro cartoon. CSS restrito ao modo Carnaval.
   A cor de todos os elementos permanece editável pelo painel. */
body.sin-city-carnaval .hero{border-radius:19px;border-color:color-mix(in srgb,var(--accent-light) 40%,transparent);box-shadow:0 18px 44px color-mix(in srgb,var(--background) 75%,transparent);}
body.sin-city-carnaval .hero-backdrop{background-position:center center;opacity:.99;}
body.sin-city-carnaval .hero-vignette{background:linear-gradient(90deg,color-mix(in srgb,var(--background) 97%,transparent) 0%,color-mix(in srgb,var(--background) 90%,transparent) 33%,color-mix(in srgb,var(--background) 52%,transparent) 50%,color-mix(in srgb,var(--background) 5%,transparent) 72%,transparent 100%),linear-gradient(0deg,color-mix(in srgb,var(--background) 25%,transparent),transparent 60%);}
body.sin-city-carnaval .category-card,body.sin-city-carnaval .rule-card,body.sin-city-carnaval .update-card,body.sin-city-carnaval .notice{border-radius:15px;}
body.sin-city-carnaval .category-card::before{opacity:.52;}
body.sin-city-carnaval .category-hero,body.sin-city-carnaval .search-page-hero{background:linear-gradient(110deg,color-mix(in srgb,var(--custom-category-panel) 98%,transparent),color-mix(in srgb,var(--custom-category-panel) 91%,transparent)),url("./assets/themes/carnaval-brasil/background.svg") center/cover;}
body.sin-city-carnaval .category-hero{border-radius:15px;}
@media(max-width:620px){body.sin-city-carnaval .hero{border-radius:14px;}body.sin-city-carnaval .hero-backdrop{background-position:68% center;}body.sin-city-carnaval .hero-vignette{background:linear-gradient(90deg,color-mix(in srgb,var(--background) 98%,transparent),color-mix(in srgb,var(--background) 76%,transparent) 68%,color-mix(in srgb,var(--background) 25%,transparent));}}

/* C7.6 — Dia dos Namorados cartoon: CSS exclusivo do modo Namorados.
   As cores editáveis continuam vindo das variáveis CSS aplicadas pelo editor. */
body.sin-city-namorados .hero{border-radius:19px;border-color:color-mix(in srgb,var(--accent-light) 43%,transparent);box-shadow:0 18px 44px color-mix(in srgb,var(--background) 76%,transparent);}
body.sin-city-namorados .hero-backdrop{background-position:center center;opacity:.99;}
body.sin-city-namorados .hero-vignette{background:linear-gradient(90deg,color-mix(in srgb,var(--background) 98%,transparent) 0%,color-mix(in srgb,var(--background) 88%,transparent) 32%,color-mix(in srgb,var(--background) 38%,transparent) 53%,transparent 76%),linear-gradient(0deg,color-mix(in srgb,var(--background) 15%,transparent),transparent 64%);}
body.sin-city-namorados .category-card,body.sin-city-namorados .rule-card,body.sin-city-namorados .update-card,body.sin-city-namorados .notice{border-radius:15px;}
body.sin-city-namorados .category-card::before{opacity:.48;}
body.sin-city-namorados .category-hero,body.sin-city-namorados .search-page-hero{background:linear-gradient(110deg,color-mix(in srgb,var(--custom-category-panel) 98%,transparent),color-mix(in srgb,var(--custom-category-panel) 90%,transparent)),url("./assets/themes/namorados/background.svg") center/cover;}
body.sin-city-namorados .category-hero{border-radius:15px;}
@media(max-width:620px){body.sin-city-namorados .hero{border-radius:14px;}body.sin-city-namorados .hero-backdrop{background-position:66% center;}body.sin-city-namorados .hero-vignette{background:linear-gradient(90deg,color-mix(in srgb,var(--background) 98%,transparent),color-mix(in srgb,var(--background) 73%,transparent) 65%,color-mix(in srgb,var(--background) 16%,transparent));}}

/* C7.7 — Tema LGBTQIA+ com estilos isolados */
body.sin-city-lgbtqia .hero{border-radius:19px;border-color:color-mix(in srgb,var(--accent-light) 44%,transparent);box-shadow:0 18px 46px color-mix(in srgb,var(--background) 78%,transparent);}
body.sin-city-lgbtqia .hero-backdrop{background-position:center center;opacity:.99;}
body.sin-city-lgbtqia .hero-vignette{background:linear-gradient(90deg,color-mix(in srgb,var(--background) 97%,transparent) 0%,color-mix(in srgb,var(--background) 84%,transparent) 33%,color-mix(in srgb,var(--background) 34%,transparent) 54%,transparent 78%);}
body.sin-city-lgbtqia .category-card,body.sin-city-lgbtqia .rule-card,body.sin-city-lgbtqia .update-card,body.sin-city-lgbtqia .notice{border-radius:15px;}
body.sin-city-lgbtqia .category-card::before{opacity:.48;}
body.sin-city-lgbtqia .category-hero,body.sin-city-lgbtqia .search-page-hero{background:linear-gradient(110deg,color-mix(in srgb,var(--custom-category-panel) 98%,transparent),color-mix(in srgb,var(--custom-category-panel) 90%,transparent)),url("./assets/themes/lgbtqia/background.svg") center/cover;}
body.sin-city-lgbtqia .category-hero{border-radius:15px;}
@media(max-width:620px){body.sin-city-lgbtqia .hero{border-radius:14px;}body.sin-city-lgbtqia .hero-backdrop{background-position:66% center;}body.sin-city-lgbtqia .hero-vignette{background:linear-gradient(90deg,color-mix(in srgb,var(--background) 98%,transparent),color-mix(in srgb,var(--background) 72%,transparent) 64%,color-mix(in srgb,var(--background) 16%,transparent));}}