/* Stronger cartoon treatment for chart-heavy hubs. */
#page-graficos .graph-shell,
#page-graficos .graph-content,
#page-redacoes_enem #chartsRedEnemComp {
  gap: 22px !important;
}

#page-redacoes_enem .page-header {
  position: relative !important;
  overflow: hidden !important;
  min-height: 136px !important;
  padding: 26px 30px !important;
  margin-bottom: 22px !important;
  background: #fff7c7 !important;
  border: 5px solid var(--egg-line, #111111) !important;
  border-radius: 28px !important;
  box-shadow: 8px 8px 0 var(--egg-line, #111111) !important;
}

#page-graficos .page-header {
  background: #fff7c7 !important;
}

#page-graficos .page-header::after {
  display: none !important;
}

#page-redacoes_enem .page-header::after {
  content: "" !important;
  position: absolute !important;
  right: -38px !important;
  bottom: -50px !important;
  width: 170px !important;
  height: 170px !important;
  border-radius: 50% !important;
  background: rgba(255, 215, 51, .55) !important;
  border: 5px solid rgba(17, 17, 17, .18) !important;
  pointer-events: none !important;
}

#page-redacoes_enem .page-title,
#page-graficos .page-title {
  letter-spacing: .02em !important;
  text-shadow:
    3px 3px 0 #fff0a8,
    5px 5px 0 rgba(17, 17, 17, .18) !important;
}

#page-redacoes_enem .page-subtitle,
#page-graficos .page-subtitle {
  font-weight: 900 !important;
  color: var(--egg-muted, #6c675a) !important;
}

#page-graficos .graph-card,
#page-graficos .graph-chart-card,
#page-graficos .card:has(.chart-container),
#page-redacoes_enem #chartsRedEnemComp > .card {
  position: relative !important;
  overflow: hidden !important;
  background: var(--egg-paper, #fffdf4) !important;
  border: 6px solid var(--egg-line, #111111) !important;
  border-radius: 26px !important;
  box-shadow: 8px 8px 0 var(--egg-line, #111111) !important;
}

#page-graficos .graph-card::before,
#page-graficos .card:has(.chart-container)::before,
#page-redacoes_enem #chartsRedEnemComp > .card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 12px !important;
  background: #1e88ff !important;
  border-right: 4px solid var(--egg-line, #111111) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

#page-graficos .graph-card-header,
#page-graficos .card:has(.chart-container) .card-header,
#page-redacoes_enem #chartsRedEnemComp > .card > .card-header {
  position: relative !important;
  min-height: 64px !important;
  padding: 16px 20px 16px 28px !important;
  background: #ffd733 !important;
  border-bottom: 5px solid var(--egg-line, #111111) !important;
  gap: 12px !important;
}

#page-graficos .graph-card-header h3,
#page-graficos .card:has(.chart-container) .card-header h3,
#page-redacoes_enem #chartsRedEnemComp > .card > .card-header h3 {
  color: var(--egg-ink, #111111) !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  text-shadow:
    2px 2px 0 #fff7c7,
    3px 3px 0 rgba(17, 17, 17, .18) !important;
}

#page-graficos .graph-mode-control,
#page-graficos .graph-model-control {
  color: var(--egg-ink, #111111) !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
}

#page-graficos .graph-mode-control select,
#page-graficos .graph-model-control select {
  background: #fffdf4 !important;
  border: 4px solid var(--egg-line, #111111) !important;
  border-radius: 14px !important;
  color: var(--egg-ink, #111111) !important;
  font-weight: 950 !important;
  box-shadow: 3px 3px 0 rgba(17, 17, 17, .22) !important;
}

#page-graficos .graph-toolbar {
  background: #fff6c4 !important;
  border: 5px solid var(--egg-line, #111111) !important;
  border-radius: 22px !important;
  box-shadow: 6px 6px 0 var(--egg-line, #111111) !important;
}

#page-graficos .graph-count {
  background: #dff9ec !important;
  color: var(--egg-ink, #111111) !important;
  border: 4px solid var(--egg-line, #111111) !important;
  border-radius: 999px !important;
  padding: 8px 13px !important;
  font-weight: 950 !important;
  box-shadow: 3px 3px 0 rgba(17, 17, 17, .18) !important;
}

#page-graficos .graph-section-title {
  font-size: 18px !important;
  transform: rotate(-.5deg) !important;
}

#page-graficos .chart-container,
#page-redacoes_enem #chartsRedEnemComp .chart-container {
  height: 348px !important;
  min-height: 318px !important;
  margin: 18px !important;
  padding: 18px !important;
  background: #fffdf4 !important;
  border: 5px solid var(--egg-line, #111111) !important;
  border-radius: 22px !important;
  box-shadow:
    inset 0 0 0 5px rgba(255, 215, 51, .22),
    5px 5px 0 rgba(17, 17, 17, .20) !important;
}

#page-graficos .chart-container canvas,
#page-redacoes_enem #chartsRedEnemComp .chart-container canvas {
  filter: drop-shadow(1px 2px 0 rgba(17, 17, 17, .14)) !important;
}

#page-redacoes_enem #chartsRedEnemComp {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)) !important;
  margin-top: 18px !important;
}

#page-redacoes_enem #chartsRedEnemComp > .card:first-child {
  grid-column: 1 / -1 !important;
}

html[data-palette="noite"] #page-redacoes_enem .page-header,
html[data-palette="noite"] #page-graficos .graph-toolbar,
html[data-palette="noite"] #page-graficos .graph-card,
html[data-palette="noite"] #page-graficos .card:has(.chart-container),
html[data-palette="noite"] #page-redacoes_enem #chartsRedEnemComp > .card {
  background: #362617 !important;
  border-color: #050505 !important;
  color: #fff7d6 !important;
}

html[data-palette="noite"] #page-graficos .graph-card-header,
html[data-palette="noite"] #page-graficos .card:has(.chart-container) .card-header,
html[data-palette="noite"] #page-redacoes_enem #chartsRedEnemComp > .card > .card-header {
  background: #4b351d !important;
  border-color: #050505 !important;
}

html[data-palette="noite"] #page-redacoes_enem .page-title,
html[data-palette="noite"] #page-redacoes_enem .page-subtitle,
html[data-palette="noite"] #page-graficos .page-title,
html[data-palette="noite"] #page-graficos .page-subtitle,
html[data-palette="noite"] #page-graficos .graph-card-header h3,
html[data-palette="noite"] #page-redacoes_enem #chartsRedEnemComp > .card > .card-header h3 {
  color: #fff7d6 !important;
  text-shadow: 2px 2px 0 #050505 !important;
}

html[data-palette="noite"] #page-graficos .chart-container,
html[data-palette="noite"] #page-redacoes_enem #chartsRedEnemComp .chart-container {
  background: #fff7da !important;
  color: #111111 !important;
}

@media (max-width: 760px) {
  #page-redacoes_enem .page-header {
    min-height: 118px !important;
    padding: 22px 18px !important;
    border-radius: 22px !important;
  }

  #page-graficos .chart-container,
  #page-redacoes_enem #chartsRedEnemComp .chart-container {
    height: 292px !important;
    min-height: 270px !important;
    margin: 12px !important;
    padding: 12px !important;
  }

  #page-redacoes_enem #chartsRedEnemComp {
    grid-template-columns: 1fr !important;
  }
}