/* Base do gráfico divergente CDI, absorvida do antigo protótipo local. */
.cdi-chart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.cdi-chart-header__left h3 {
  margin: 6px 0 0;
  font-family: Georgia, serif;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.05;
}

.cdi-chart-header__sub {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.cdi-chart-header__right {
  padding-top: 4px;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.cdi-group-select {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  padding: 0 10px;
  min-height: 34px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
}

.cdi-diverging-chart {
  width: 100%;
}

.cdi-diverging-chart__row {
  display: grid;
  grid-template-columns: minmax(80px, 140px) 1fr minmax(110px, 140px);
  gap: 12px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.cdi-diverging-chart__row:last-child {
  border-bottom: 0;
}

.cdi-diverging-chart__label {
  min-width: 80px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}

.cdi-diverging-chart__label-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cdi-diverging-chart__tickers {
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--muted);
}

.cdi-diverging-chart__ticker-sep {
  opacity: 0.65;
}

.cdi-diverging-chart__row--with-tickers {
  align-items: start;
}

.cdi-diverging-chart[data-cdi-chart-mode='sector'] .cdi-diverging-chart__row {
  grid-template-columns: minmax(120px, 200px) 1fr minmax(110px, 140px);
}

.cdi-diverging-chart__track {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  min-width: 0;
  gap: 0;
}

.cdi-diverging-chart__side--left {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
}

.cdi-diverging-chart__side--right {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-width: 0;
}

.cdi-diverging-chart__bar {
  height: 10px;
  max-width: 100%;
  flex-shrink: 0;
}

.cdi-diverging-chart__bar--neg {
  border-radius: 999px 0 0 999px;
  background: var(--red);
}

.cdi-diverging-chart__bar--pos {
  border-radius: 0 999px 999px 0;
  background: var(--green);
}

.cdi-diverging-chart__value {
  min-width: 110px;
  font-size: 0.9rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.cdi-diverging-chart__value--pos {
  color: var(--green);
}

.cdi-diverging-chart__value--neg {
  color: var(--red);
}

.cdi-diverging-chart__empty {
  margin: 0;
  padding: 24px 0;
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink);
  opacity: 0.72;
}

@media (max-width: 640px) {
  .cdi-diverging-chart__row {
    grid-template-columns: 1fr;
    gap: 8px 12px;
  }

  .cdi-diverging-chart__value {
    justify-self: end;
  }
}

/* Painel do gráfico CDI (app) */
.cdi-charts {
  margin-top: 18px;
}

.cdi-charts__panel {
  border: var(--panel-inset-border);
  border-radius: var(--panel-inset-radius);
  background: var(--panel-inset-bg);
  padding: 16px 16px 12px;
}

#view-cdi .cdi-charts__panel .cdi-chart-header {
  --line: var(--border);
  --ink: var(--text);
  --muted: var(--text-mid);
  --paper: var(--surface);
}

#view-cdi .cdi-charts__panel .cdi-chart-header .eyebrow {
  margin: 0;
  font-size: var(--ui-overline-size, 9px);
  font-weight: var(--ui-overline-weight, 700);
  letter-spacing: var(--ui-overline-tracking, 0.12em);
  text-transform: uppercase;
  color: var(--label-accent, var(--text-dim));
  font-family: 'Inter', sans-serif;
}

#view-cdi .cdi-card {
  overflow: visible;
}

#view-cdi .cdi-charts__panel {
  overflow: visible;
}

#view-cdi .cdi-chart-header {
  overflow: visible;
}

#view-cdi .cdi-chart-header__right {
  width: 100%;
  min-width: 0;
  flex: 1 1 100%;
}

#view-cdi .cdi-chart-header__right .radar-select-group {
  width: 100%;
  min-width: 0;
  max-width: none;
  flex: 1 1 auto;
}

#view-cdi .cdi-chart-header__right .radar-select-dropdown {
  left: auto;
  right: 0;
  min-width: min(12rem, 100%);
  max-width: min(22rem, calc(100vw - 32px));
}

.cdi-charts__bars-wrap {
  width: 100%;
  min-width: 0;
}

.cdi-charts__bars-wrap--collapsed .cdi-diverging-chart__row--preview-hidden {
  display: none;
}

.cdi-charts__more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 4px;
  padding: 10px 14px;
  border: 1px dashed color-mix(in srgb, var(--border2, var(--border)) 70%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface2, var(--surface)) 40%, transparent);
  color: var(--text-mid);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cdi-charts__more-btn:hover {
  background: color-mix(in srgb, var(--gold, var(--accent)) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--gold, var(--accent)) 35%, var(--border));
  color: var(--text);
}

.cdi-charts__more-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--gold, var(--accent)) 40%, transparent);
  outline-offset: 2px;
}

.cdi-charts__bars-wrap:not(.cdi-charts__bars-wrap--collapsed) .cdi-charts__more-btn {
  display: none;
}

#view-cdi .cdi-diverging-chart {
  --ink: var(--text);
  --line: var(--border);
  --line-strong: var(--border2, var(--border));
}

@media (max-width: 760px) {
  #view-cdi .cdi-chart-header {
    flex-direction: column;
    align-items: stretch;
  }

  #view-cdi .cdi-chart-header__right {
    width: 100%;
  }
}

/* === CDI — toolbar, título e dropdown no padrão Mesa/Radar === */
#view-cdi .cdi-card__title-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 0 10px !important;
}

#view-cdi .cdi-card__title-row .cdi-card__title{
  margin:0 !important;
  font-family:'Inter', sans-serif !important;
  font-size:16px !important;
  font-weight:800 !important;
  letter-spacing:0.02em !important;
  line-height:1.25 !important;
  color:var(--text) !important;
  text-transform:none !important;
}

#view-cdi .cdi-card__sub{
  margin-top:0 !important;
  font-family:'Inter', sans-serif !important;
  font-size:12px !important;
  line-height:1.45 !important;
  color:var(--text-mid) !important;
}

#view-cdi .cdi-card__title-row .refresh-btn.refresh-btn--patrimonio-toolbar{
  flex:0 0 auto !important;
  height:40px !important;
  min-height:40px !important;
  max-height:40px !important;
  min-width:178px !important;
  padding:0 18px !important;
  border:1px solid color-mix(in srgb, var(--text) 82%, transparent) !important;
  border-radius:10px !important;
  background:#151917 !important;
  color:#fff !important;
  box-shadow:0 8px 22px rgba(18, 24, 33, 0.16) !important;
  font-family:'Inter', sans-serif !important;
  font-size:12.5px !important;
  font-weight:800 !important;
  letter-spacing:0.01em !important;
  line-height:1 !important;
}

#view-cdi .cdi-card__title-row .refresh-btn.refresh-btn--patrimonio-toolbar:hover:not(:disabled){
  background:#111411 !important;
  color:#fff !important;
  border-color:#111411 !important;
  filter:none !important;
  transform:translateY(-1px);
}

#view-cdi .cdi-card__title-row .refresh-btn.refresh-btn--patrimonio-toolbar:disabled{
  opacity:0.68 !important;
  cursor:not-allowed !important;
  transform:none !important;
}

#view-cdi .cdi-charts__panel{
  padding:18px 18px 14px !important;
}

#view-cdi .cdi-chart-header{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) auto !important;
  align-items:end !important;
  gap:20px 28px !important;
  width:100% !important;
  margin:0 0 16px !important;
  padding:0 0 14px !important;
  overflow:visible !important;
  border-bottom:1px solid color-mix(in srgb, var(--border) 78%, transparent) !important;
}

#view-cdi .cdi-chart-header__left{
  min-width:0 !important;
}

#view-cdi .cdi-chart-header .eyebrow{
  margin:0 0 4px !important;
  font-family:'Inter', sans-serif !important;
  font-size:10.5px !important;
  font-weight:800 !important;
  letter-spacing:0.14em !important;
  line-height:1.2 !important;
  text-transform:uppercase !important;
  color:var(--text-dim) !important;
}

#view-cdi .cdi-chart-header h3{
  margin:0 !important;
  font-family:'Cormorant Garamond', Georgia, serif !important;
  font-size:28px !important;
  font-weight:700 !important;
  letter-spacing:0.01em !important;
  line-height:1.08 !important;
  color:var(--text) !important;
}

#view-cdi .cdi-chart-header__sub{
  margin:6px 0 0 !important;
  max-width:29rem !important;
  font-family:'Inter', sans-serif !important;
  font-size:12px !important;
  line-height:1.45 !important;
  color:var(--text-mid) !important;
}

#view-cdi .cdi-chart-header__right{
  width:auto !important;
  min-width:0 !important;
  max-width:100% !important;
  flex:0 0 auto !important;
  justify-self:end !important;
  align-self:end !important;
}

#view-cdi .cdi-chart-header__right .radar-select-group,
#view-cdi .cdi-charts__menu{
  width:220px !important;
  min-width:220px !important;
  max-width:220px !important;
  flex:0 0 220px !important;
}

#view-cdi .cdi-charts__menu-label,
#view-cdi .cdi-chart-header__right .radar-select-label{
  display:block !important;
  margin:0 0 5px !important;
  font-family:'Inter', sans-serif !important;
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:0.14em !important;
  line-height:1.2 !important;
  text-transform:uppercase !important;
  color:var(--text-dim) !important;
}

#view-cdi .cdi-charts__menu .radar-select{
  position:relative !important;
  width:100% !important;
  max-width:100% !important;
}

#view-cdi .cdi-charts__menu .radar-select-native{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  opacity:0 !important;
  pointer-events:none !important;
}

#view-cdi .cdi-charts__menu .radar-select-trigger{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100% !important;
  height:40px !important;
  min-height:40px !important;
  max-height:40px !important;
  padding:0 14px !important;
  gap:14px !important;
  border-radius:10px !important;
  border:1px solid color-mix(in srgb, var(--border2) 55%, var(--border)) !important;
  background:color-mix(in srgb, var(--surface2) 32%, var(--surface)) !important;
  box-shadow:0 1px 4px rgba(18, 24, 33, 0.04) !important;
  color:var(--text-mid) !important;
  font-family:'Inter', sans-serif !important;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:0.01em !important;
  line-height:1.2 !important;
  text-align:left !important;
}

#view-cdi .cdi-charts__menu .radar-select-trigger:hover:not(:disabled){
  border-color:color-mix(in srgb, var(--gold) 42%, var(--border)) !important;
  background:color-mix(in srgb, var(--surface2) 48%, var(--surface)) !important;
  color:var(--text-mid) !important;
  filter:brightness(1.04) !important;
}

#view-cdi .cdi-charts__menu .radar-select-trigger:focus-visible{
  outline:2px solid color-mix(in srgb, var(--gold) 40%, var(--border)) !important;
  outline-offset:2px !important;
}

#view-cdi .cdi-charts__menu .radar-select-value{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

#view-cdi .cdi-charts__menu .radar-select-chevron{
  flex:0 0 auto !important;
  width:8px !important;
  height:8px !important;
  border-right:1.5px solid var(--text-dim) !important;
  border-bottom:1.5px solid var(--text-dim) !important;
  transform:rotate(45deg) translateY(-2px) !important;
  opacity:0.75 !important;
}

#view-cdi .cdi-chart-header__right .radar-select-dropdown,
#view-cdi .cdi-charts__menu .radar-select-dropdown{
  z-index:160 !important;
  top:calc(100% + 6px) !important;
  left:auto !important;
  right:0 !important;
  transform:none !important;
  width:100% !important;
  min-width:100% !important;
  max-width:min(22rem, calc(100vw - 24px)) !important;
}

#view-cdi .cdi-charts__menu .radar-select-options{
  width:100% !important;
  min-width:100% !important;
  max-height:min(280px, 52vh) !important;
  padding:6px !important;
  border-radius:10px !important;
  border:1px solid color-mix(in srgb, var(--border2) 35%, var(--border)) !important;
  background:var(--surface) !important;
  box-shadow:var(--shadow-sm, 0 10px 28px rgba(18, 24, 33, 0.12)) !important;
  overflow:auto !important;
}

#view-cdi .cdi-charts__menu [role='option'],
#view-cdi .cdi-charts__menu .radar-select-option{
  min-height:34px !important;
  padding:7px 10px !important;
  border-radius:7px !important;
  font-family:'Inter', sans-serif !important;
  font-size:13px !important;
  font-weight:600 !important;
  letter-spacing:0.01em !important;
  line-height:1.25 !important;
  color:var(--text-mid) !important;
}

@media (max-width:760px){
  #view-cdi .cdi-card__title-row{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
  }

  #view-cdi .cdi-card__title-row .refresh-btn.refresh-btn--patrimonio-toolbar{
    width:100% !important;
    min-width:0 !important;
  }

  #view-cdi .cdi-chart-header{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:14px !important;
  }

  #view-cdi .cdi-chart-header__right,
  #view-cdi .cdi-chart-header__right .radar-select-group,
  #view-cdi .cdi-charts__menu{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    flex:1 1 auto !important;
  }

  #view-cdi .cdi-chart-header__right .radar-select-dropdown,
  #view-cdi .cdi-charts__menu .radar-select-dropdown{
    left:0 !important;
    right:auto !important;
    width:100% !important;
  }
}



/* ======================================================================
   CDI / Dropdowns — padrão final sem painel duplicado e sem marcação "✓" (v17)
   ====================================================================== */
#view-cdi .cdi-charts__menu .radar-select,
#view-cdi .cdi-chart-header__right .radar-select{
  position:relative !important;
  width:100% !important;
  max-width:100% !important;
}

/* O wrapper do dropdown posiciona; a superfície visual é só .radar-select-options. */
#view-cdi .cdi-chart-header__right .radar-select-dropdown,
#view-cdi .cdi-charts__menu .radar-select-dropdown{
  z-index:160 !important;
  top:calc(100% + 6px) !important;
  left:0 !important;
  right:auto !important;
  transform:none !important;
  width:100% !important;
  min-width:100% !important;
  max-width:min(22rem, calc(100vw - 24px)) !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}

#view-cdi .cdi-charts__menu .radar-select-options,
#view-cdi .cdi-chart-header__right .radar-select-options{
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  max-height:min(280px, 52vh) !important;
  padding:6px !important;
  margin:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:2px !important;
  border-radius:10px !important;
  border:1px solid color-mix(in srgb, var(--border2) 42%, var(--border)) !important;
  background:var(--surface) !important;
  box-shadow:0 12px 28px rgba(18, 24, 33, 0.10) !important;
  overflow:auto !important;
  box-sizing:border-box !important;
}

#view-cdi .cdi-charts__menu [role='option'],
#view-cdi .cdi-charts__menu .radar-select-option,
#view-cdi .cdi-chart-header__right [role='option'],
#view-cdi .cdi-chart-header__right .radar-select-option{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:100% !important;
  min-height:40px !important;
  height:40px !important;
  padding:0 12px !important;
  border:0 !important;
  border-radius:8px !important;
  background:transparent !important;
  color:var(--text-mid) !important;
  font-family:'Inter', sans-serif !important;
  font-size:12.5px !important;
  line-height:1.2 !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  text-align:left !important;
  box-shadow:none !important;
}

#view-cdi .cdi-charts__menu [role='option']:hover,
#view-cdi .cdi-charts__menu .radar-select-option:hover,
#view-cdi .cdi-chart-header__right [role='option']:hover,
#view-cdi .cdi-chart-header__right .radar-select-option:hover{
  background:color-mix(in srgb, var(--surface2) 34%, transparent) !important;
}

#view-cdi .cdi-charts__menu [aria-selected='true'],
#view-cdi .cdi-charts__menu .radar-select-option--selected,
#view-cdi .cdi-chart-header__right [aria-selected='true'],
#view-cdi .cdi-chart-header__right .radar-select-option--selected{
  background:color-mix(in srgb, var(--surface2) 44%, var(--surface)) !important;
  font-weight:600 !important;
}

/* Remove a marcação visual de seleção dentro dos menus customizados. */
.radar-select-option-check,
.mesa-select-menu__option-check,
.mesa-patrimonio-sort__option-check,
#view-cdi .cdi-charts__menu [role='option']::before,
#view-cdi .cdi-charts__menu .radar-select-option::before,
#view-cdi .cdi-chart-header__right [role='option']::before,
#view-cdi .cdi-chart-header__right .radar-select-option::before{
  display:none !important;
  content:none !important;
  width:0 !important;
  min-width:0 !important;
  max-width:0 !important;
  opacity:0 !important;
  visibility:hidden !important;
}

.radar-select-option,
.mesa-select-menu__option,
#view-summary .mesa-patrimonio-sort__option{
  grid-template-columns:minmax(0, 1fr) !important;
}

.radar-select-option-text,
.mesa-select-menu__option-text,
#view-summary .mesa-patrimonio-sort__option-text{
  grid-column:1 !important;
}

.radar-select-option-check::before,
.mesa-select-menu__option-check::before,
.mesa-patrimonio-sort__option-check::before,
.radar-select-option--selected .radar-select-option-check::before,
.mesa-select-menu__option--selected .mesa-select-menu__option-check::before,
#view-summary .mesa-patrimonio-sort__option--selected .mesa-patrimonio-sort__option-check::before,
#view-summary .mesa-patrimonio-sort__option[aria-checked='true'] .mesa-patrimonio-sort__option-check::before{
  content:none !important;
  display:none !important;
}

@media (max-width:760px){
  #view-cdi .cdi-chart-header__right .radar-select-dropdown,
  #view-cdi .cdi-charts__menu .radar-select-dropdown{
    left:0 !important;
    right:auto !important;
    width:100% !important;
  }
}


/* ======================================================================
   CDI / Dropdown — remover marcação visual interna do item selecionado (v18)
   Mantém a seta do trigger fechado e preserva o highlight do item ativo.
   ====================================================================== */
#view-cdi .cdi-charts__menu .radar-choice-option__check,
#view-cdi .cdi-chart-header__right .radar-choice-option__check,
#view-cdi .cdi-charts__menu .radar-select-option-check,
#view-cdi .cdi-chart-header__right .radar-select-option-check,
#view-cdi .cdi-charts__menu .radar-select-option__check,
#view-cdi .cdi-chart-header__right .radar-select-option__check{
  display:none !important;
  content:none !important;
  width:0 !important;
  min-width:0 !important;
  max-width:0 !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  opacity:0 !important;
  visibility:hidden !important;
  overflow:hidden !important;
}

#view-cdi .cdi-charts__menu .radar-choice-option__check::before,
#view-cdi .cdi-charts__menu .radar-choice-option__check::after,
#view-cdi .cdi-chart-header__right .radar-choice-option__check::before,
#view-cdi .cdi-chart-header__right .radar-choice-option__check::after,
#view-cdi .cdi-charts__menu .radar-select-option-check::before,
#view-cdi .cdi-charts__menu .radar-select-option-check::after,
#view-cdi .cdi-chart-header__right .radar-select-option-check::before,
#view-cdi .cdi-chart-header__right .radar-select-option-check::after{
  display:none !important;
  content:none !important;
}

#view-cdi .cdi-charts__menu .radar-choice-option,
#view-cdi .cdi-chart-header__right .radar-choice-option{
  display:flex !important;
  grid-template-columns:none !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:0 !important;
  padding-left:12px !important;
}

#view-cdi .cdi-charts__menu .radar-choice-option__text,
#view-cdi .cdi-chart-header__right .radar-choice-option__text,
#view-cdi .cdi-charts__menu .radar-select-option-text,
#view-cdi .cdi-chart-header__right .radar-select-option-text{
  display:block !important;
  min-width:0 !important;
  width:100% !important;
  grid-column:1 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}


/* ======================================================================
   CDI — dropdown compacto e sem marcação de seleção interna (v19)
   ====================================================================== */
@media (min-width:761px){
  #view-cdi .cdi-chart-header{
    grid-template-columns:minmax(0, 1fr) minmax(280px, 340px) !important;
    align-items:end !important;
  }

  #view-cdi .cdi-chart-header__right{
    width:clamp(280px, 22vw, 340px) !important;
    min-width:280px !important;
    max-width:340px !important;
    justify-self:end !important;
    flex:0 0 auto !important;
  }

  #view-cdi .cdi-chart-header__right .radar-select-group,
  #view-cdi .cdi-chart-header__right .cdi-charts__menu,
  #view-cdi .cdi-charts__menu{
    width:clamp(280px, 22vw, 340px) !important;
    min-width:280px !important;
    max-width:340px !important;
    flex:0 0 auto !important;
  }
}

#view-cdi .cdi-chart-header__right .radar-select-trigger,
#view-cdi .cdi-charts__menu .radar-select-trigger{
  height:40px !important;
  min-height:40px !important;
  max-height:40px !important;
  font-family:'Inter', sans-serif !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  letter-spacing:0.01em !important;
  line-height:1.2 !important;
}

#view-cdi .cdi-chart-header__right .radar-select-dropdown,
#view-cdi .cdi-charts__menu .radar-select-dropdown{
  right:0 !important;
  left:auto !important;
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
}

#view-cdi .cdi-chart-header__right .radar-select-options,
#view-cdi .cdi-charts__menu .radar-select-options{
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
}

#view-cdi .cdi-chart-header__right .radar-choice-option,
#view-cdi .cdi-charts__menu .radar-choice-option,
#view-cdi .cdi-chart-header__right [role='option'],
#view-cdi .cdi-charts__menu [role='option']{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  grid-template-columns:none !important;
  gap:0 !important;
  min-height:40px !important;
  height:40px !important;
  padding:0 12px !important;
  font-family:'Inter', sans-serif !important;
  font-size:12.5px !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  line-height:1.2 !important;
  text-align:left !important;
}

#view-cdi .cdi-chart-header__right .radar-choice-option__check,
#view-cdi .cdi-charts__menu .radar-choice-option__check,
#view-cdi .cdi-chart-header__right .radar-select-option-check,
#view-cdi .cdi-charts__menu .radar-select-option-check,
#view-cdi .cdi-chart-header__right .radar-select-option__check,
#view-cdi .cdi-charts__menu .radar-select-option__check,
#view-cdi .cdi-chart-header__right .radar-choice-option > span:first-child:not(.radar-choice-option__text),
#view-cdi .cdi-charts__menu .radar-choice-option > span:first-child:not(.radar-choice-option__text){
  display:none !important;
  content:none !important;
  width:0 !important;
  min-width:0 !important;
  max-width:0 !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  opacity:0 !important;
  visibility:hidden !important;
  overflow:hidden !important;
}

#view-cdi .cdi-chart-header__right .radar-choice-option__text,
#view-cdi .cdi-charts__menu .radar-choice-option__text,
#view-cdi .cdi-chart-header__right .radar-select-option-text,
#view-cdi .cdi-charts__menu .radar-select-option-text{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
}

@media (max-width:760px){
  #view-cdi .cdi-chart-header__right,
  #view-cdi .cdi-chart-header__right .radar-select-group,
  #view-cdi .cdi-charts__menu{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }
}

/* ======================================================================
   CDI — Por compra: ticker e data BR em colunas alinhadas (v20)
   ====================================================================== */
#view-cdi .cdi-diverging-chart[data-cdi-chart-mode='lot'] .cdi-diverging-chart__lot-label{
  display:grid !important;
  grid-template-columns:minmax(4.75rem, max-content) 6.75rem !important;
  align-items:baseline !important;
  column-gap:0.75rem !important;
  min-width:0 !important;
  max-width:100% !important;
  font-family:'Inter', sans-serif !important;
  line-height:1.2 !important;
}

#view-cdi .cdi-diverging-chart[data-cdi-chart-mode='lot'] .cdi-diverging-chart__lot-ticker{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  color:var(--text) !important;
  font-weight:800 !important;
  letter-spacing:0.01em !important;
}

#view-cdi .cdi-diverging-chart[data-cdi-chart-mode='lot'] .cdi-diverging-chart__lot-date{
  min-width:6.75rem !important;
  color:var(--text-mid) !important;
  font-weight:700 !important;
  font-variant-numeric:tabular-nums !important;
  text-align:left !important;
  white-space:nowrap !important;
}

@media (max-width:760px){
  #view-cdi .cdi-diverging-chart[data-cdi-chart-mode='lot'] .cdi-diverging-chart__lot-label{
    grid-template-columns:minmax(4.5rem, max-content) 6.25rem !important;
    column-gap:0.5rem !important;
  }

  #view-cdi .cdi-diverging-chart[data-cdi-chart-mode='lot'] .cdi-diverging-chart__lot-date{
    min-width:6.25rem !important;
  }
}


/* ======================================================================
   CDI — mobile sheet no padrão Mesa, sem check/borda pesada (v21)
   Contexto aplicado pelo app-cdi.js em body[data-mesa-choice-sheet-context="cdi"].
   ====================================================================== */
@media (max-width:760px){
  body[data-mesa-choice-sheet-context="cdi"] .radar-choice-sheet__panel{
    width:min(92vw, 430px) !important;
    max-width:calc(100vw - 32px) !important;
    border-radius:24px !important;
    border:1px solid color-mix(in srgb, var(--border2, var(--border)) 38%, var(--surface)) !important;
    background:var(--surface) !important;
    box-shadow:0 20px 48px rgba(18, 24, 33, 0.22) !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  body[data-mesa-choice-sheet-context="cdi"] .radar-choice-sheet__header{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:14px !important;
    min-height:68px !important;
    padding:20px 24px 14px !important;
    border-bottom:0 !important;
  }

  body[data-mesa-choice-sheet-context="cdi"] .radar-choice-sheet__title{
    margin:0 !important;
    font-family:'Inter', sans-serif !important;
    font-size:17px !important;
    line-height:1.2 !important;
    font-weight:800 !important;
    letter-spacing:0 !important;
    color:var(--text) !important;
  }

  body[data-mesa-choice-sheet-context="cdi"] .radar-choice-sheet__close{
    flex:0 0 auto !important;
    width:34px !important;
    height:34px !important;
    border-radius:10px !important;
    border:1px solid color-mix(in srgb, var(--border2, var(--border)) 44%, transparent) !important;
    background:color-mix(in srgb, var(--surface2, var(--surface)) 34%, transparent) !important;
    color:var(--text-mid) !important;
    font-size:24px !important;
    line-height:1 !important;
    font-weight:300 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-shadow:none !important;
  }

  body[data-mesa-choice-sheet-context="cdi"] .radar-choice-sheet__options{
    display:flex !important;
    flex-direction:column !important;
    gap:4px !important;
    padding:4px 18px 22px !important;
    max-height:min(60vh, 360px) !important;
    overflow:auto !important;
  }

  body[data-mesa-choice-sheet-context="cdi"] .radar-choice-sheet__options [role="option"],
  body[data-mesa-choice-sheet-context="cdi"] .radar-choice-sheet__options .radar-choice-option{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:100% !important;
    min-height:48px !important;
    padding:0 18px !important;
    border:0 !important;
    border-radius:14px !important;
    background:transparent !important;
    box-shadow:none !important;
    color:var(--text-mid) !important;
    font-family:'Inter', sans-serif !important;
    font-size:16px !important;
    line-height:1.2 !important;
    font-weight:650 !important;
    letter-spacing:0 !important;
    text-align:left !important;
  }

  body[data-mesa-choice-sheet-context="cdi"] .radar-choice-sheet__options [role="option"].is-selected,
  body[data-mesa-choice-sheet-context="cdi"] .radar-choice-sheet__options [role="option"][aria-selected="true"],
  body[data-mesa-choice-sheet-context="cdi"] .radar-choice-sheet__options .radar-choice-option.is-selected,
  body[data-mesa-choice-sheet-context="cdi"] .radar-choice-sheet__options .radar-choice-option[aria-selected="true"]{
    background:color-mix(in srgb, var(--surface2, var(--surface)) 58%, var(--surface)) !important;
    color:var(--text) !important;
    font-weight:800 !important;
    border:0 !important;
    outline:0 !important;
  }

  body[data-mesa-choice-sheet-context="cdi"] .radar-choice-sheet__options .radar-choice-option__check,
  body[data-mesa-choice-sheet-context="cdi"] .radar-choice-sheet__options .radar-select-option-check,
  body[data-mesa-choice-sheet-context="cdi"] .radar-choice-sheet__options [role="option"]::before{
    display:none !important;
    content:none !important;
    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;
    height:0 !important;
    margin:0 !important;
    padding:0 !important;
    opacity:0 !important;
    visibility:hidden !important;
  }

  body[data-mesa-choice-sheet-context="cdi"] .radar-choice-sheet__options .radar-choice-option__text{
    display:block !important;
    min-width:0 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
}


/* ======================================================================
   CDI — mobile: Agrupar volta a ser dropdown real, não sheet/modal (v22)
   ====================================================================== */
@media (max-width:760px){
  body[data-mesa-choice-sheet-context="cdi"] .radar-choice-sheet,
  body[data-mesa-choice-sheet-context="cdi"] .radar-choice-sheet__panel{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  #view-cdi .cdi-chart-header__right,
  #view-cdi .cdi-chart-header__right .radar-select-group,
  #view-cdi .cdi-charts__menu{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  #view-cdi .cdi-charts__menu .radar-select,
  #view-cdi .cdi-chart-header__right .radar-select{
    position:relative !important;
    width:100% !important;
    overflow:visible !important;
  }

  #view-cdi #cdiChartViewDropdown,
  #view-cdi .cdi-chart-header__right .radar-select-dropdown,
  #view-cdi .cdi-charts__menu .radar-select-dropdown{
    position:absolute !important;
    z-index:260 !important;
    top:calc(100% + 8px) !important;
    left:0 !important;
    right:auto !important;
    transform:none !important;
    width:100% !important;
    min-width:100% !important;
    max-width:100% !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  #view-cdi #cdiChartViewDropdown[hidden]{
    display:none !important;
  }

  #view-cdi #cdiChartViewMenu,
  #view-cdi .cdi-chart-header__right .radar-select-options,
  #view-cdi .cdi-charts__menu .radar-select-options{
    width:100% !important;
    min-width:100% !important;
    max-width:100% !important;
    max-height:min(280px, 46vh) !important;
    display:flex !important;
    flex-direction:column !important;
    gap:2px !important;
    padding:6px !important;
    border-radius:10px !important;
    border:1px solid color-mix(in srgb, var(--border2) 42%, var(--border)) !important;
    background:var(--surface) !important;
    box-shadow:0 12px 28px rgba(18, 24, 33, 0.10) !important;
    overflow:auto !important;
    box-sizing:border-box !important;
  }

  #view-cdi #cdiChartViewMenu .radar-choice-option,
  #view-cdi .cdi-chart-header__right .radar-choice-option,
  #view-cdi .cdi-charts__menu .radar-choice-option{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:100% !important;
    min-height:38px !important;
    height:38px !important;
    padding:0 12px !important;
    border:0 !important;
    border-radius:8px !important;
    background:transparent !important;
    color:var(--text-mid) !important;
    box-shadow:none !important;
    font-family:'Inter', sans-serif !important;
    font-size:12.5px !important;
    line-height:1.2 !important;
    font-weight:550 !important;
    letter-spacing:0 !important;
    text-align:left !important;
  }

  #view-cdi #cdiChartViewMenu .radar-choice-option.is-selected,
  #view-cdi #cdiChartViewMenu .radar-choice-option[aria-selected='true'],
  #view-cdi .cdi-chart-header__right .radar-choice-option.is-selected,
  #view-cdi .cdi-chart-header__right .radar-choice-option[aria-selected='true'],
  #view-cdi .cdi-charts__menu .radar-choice-option.is-selected,
  #view-cdi .cdi-charts__menu .radar-choice-option[aria-selected='true']{
    background:color-mix(in srgb, var(--surface2, var(--surface)) 42%, transparent) !important;
    color:var(--text) !important;
    font-weight:650 !important;
    outline:none !important;
  }

  #view-cdi #cdiChartViewMenu .radar-choice-option__check,
  #view-cdi .cdi-chart-header__right .radar-choice-option__check,
  #view-cdi .cdi-charts__menu .radar-choice-option__check{
    display:none !important;
    content:none !important;
    width:0 !important;
    height:0 !important;
    margin:0 !important;
    padding:0 !important;
    opacity:0 !important;
    visibility:hidden !important;
  }
}


/* ======================================================================
   CDI — dropdown inline real no mobile/desktop + preview 5 por modo (v23)
   ====================================================================== */
#view-cdi .cdi-chart-select-group,
#view-cdi .cdi-charts__menu{
  width:220px !important;
  min-width:220px !important;
  max-width:220px !important;
  flex:0 0 220px !important;
}

#view-cdi .cdi-chart-select{
  position:relative !important;
  width:100% !important;
  max-width:100% !important;
  overflow:visible !important;
}

#view-cdi .cdi-chart-select__native{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  opacity:0 !important;
  pointer-events:none !important;
}

#view-cdi .cdi-chart-select__trigger{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100% !important;
  height:40px !important;
  min-height:40px !important;
  max-height:40px !important;
  padding:0 14px !important;
  gap:14px !important;
  border-radius:10px !important;
  border:1px solid color-mix(in srgb, var(--border2) 55%, var(--border)) !important;
  background:color-mix(in srgb, var(--surface2) 32%, var(--surface)) !important;
  box-shadow:0 1px 4px rgba(18, 24, 33, 0.04) !important;
  color:var(--text-mid) !important;
  font-family:'Inter', sans-serif !important;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:0.01em !important;
  line-height:1.2 !important;
  text-align:left !important;
  cursor:pointer !important;
  appearance:none !important;
  -webkit-appearance:none !important;
}

#view-cdi .cdi-chart-select__trigger:hover:not(:disabled),
#view-cdi .cdi-chart-select__trigger--open{
  border-color:color-mix(in srgb, var(--gold) 42%, var(--border)) !important;
  background:color-mix(in srgb, var(--surface2) 48%, var(--surface)) !important;
  color:var(--text-mid) !important;
  filter:brightness(1.04) !important;
}

#view-cdi .cdi-chart-select__trigger:focus-visible{
  outline:2px solid color-mix(in srgb, var(--gold) 40%, var(--border)) !important;
  outline-offset:2px !important;
}

#view-cdi .cdi-chart-select__value{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

#view-cdi .cdi-chart-select__chevron{
  flex:0 0 auto !important;
  width:8px !important;
  height:8px !important;
  border-right:1.5px solid var(--text-dim) !important;
  border-bottom:1.5px solid var(--text-dim) !important;
  transform:rotate(45deg) translateY(-2px) !important;
  opacity:0.75 !important;
}

#view-cdi .cdi-chart-select__dropdown{
  position:absolute !important;
  z-index:320 !important;
  top:calc(100% + 6px) !important;
  left:0 !important;
  right:auto !important;
  transform:none !important;
  width:100% !important;
  min-width:100% !important;
  max-width:min(22rem, calc(100vw - 24px)) !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}

#view-cdi .cdi-chart-select__dropdown[hidden]{
  display:none !important;
}

#view-cdi .cdi-chart-select__options{
  width:100% !important;
  min-width:100% !important;
  max-height:min(280px, 52vh) !important;
  display:flex !important;
  flex-direction:column !important;
  gap:2px !important;
  padding:6px !important;
  border-radius:10px !important;
  border:1px solid color-mix(in srgb, var(--border2) 42%, var(--border)) !important;
  background:var(--surface) !important;
  box-shadow:0 12px 28px rgba(18, 24, 33, 0.10) !important;
  overflow:auto !important;
  box-sizing:border-box !important;
}

#view-cdi .cdi-chart-select__option{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:100% !important;
  min-height:38px !important;
  height:38px !important;
  padding:0 12px !important;
  border:0 !important;
  border-radius:8px !important;
  background:transparent !important;
  color:var(--text-mid) !important;
  box-shadow:none !important;
  font-family:'Inter', sans-serif !important;
  font-size:12.5px !important;
  line-height:1.2 !important;
  font-weight:550 !important;
  letter-spacing:0 !important;
  text-align:left !important;
  cursor:pointer !important;
}

#view-cdi .cdi-chart-select__option:hover,
#view-cdi .cdi-chart-select__option:focus-visible{
  background:color-mix(in srgb, var(--surface2, var(--surface)) 34%, transparent) !important;
  outline:none !important;
}

#view-cdi .cdi-chart-select__option.is-selected,
#view-cdi .cdi-chart-select__option[aria-selected='true']{
  background:color-mix(in srgb, var(--surface2, var(--surface)) 42%, transparent) !important;
  color:var(--text) !important;
  font-weight:650 !important;
}

#view-cdi .cdi-chart-select__option-text{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

@media (max-width:760px){
  body[data-mesa-choice-sheet-context="cdi"] .radar-choice-sheet,
  body[data-mesa-choice-sheet-context="cdi"] .radar-choice-sheet__panel{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  #view-cdi .cdi-chart-header__right,
  #view-cdi .cdi-chart-select-group,
  #view-cdi .cdi-charts__menu{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    flex:1 1 auto !important;
  }

  #view-cdi .cdi-chart-select__dropdown{
    top:calc(100% + 8px) !important;
    left:0 !important;
    right:auto !important;
    width:100% !important;
    min-width:100% !important;
    max-width:100% !important;
  }

  #view-cdi .cdi-chart-select__options{
    max-height:min(280px, 46vh) !important;
  }
}


/* ======================================================================
   CDI — typography system adoption (micropasso 2)
   ----------------------------------------------------------------------
   Este bloco aplica os tokens/classes de mesa-typography.css apenas no
   dropdown e cabeçalho do Comparativo CDI. Não altera o comportamento.
   ====================================================================== */
#view-cdi .cdi-chart-header .eyebrow,
#view-cdi .cdi-charts__menu-label,
#view-cdi .cdi-chart-select__label{
  font-family:var(--mesa-type-font-ui) !important;
  font-size:var(--mesa-type-size-overline) !important;
  font-weight:var(--mesa-type-weight-bold) !important;
  letter-spacing:var(--mesa-type-tracking-overline) !important;
  line-height:var(--mesa-type-line-compact) !important;
}

#view-cdi .cdi-chart-header__sub{
  font-family:var(--mesa-type-font-ui) !important;
  font-size:var(--mesa-type-size-helper) !important;
  font-weight:var(--mesa-type-weight-regular) !important;
  letter-spacing:var(--mesa-type-tracking-none) !important;
  line-height:var(--mesa-type-line-copy) !important;
}

#view-cdi .cdi-chart-select__trigger{
  font-family:var(--mesa-type-font-ui) !important;
  font-size:var(--mesa-type-size-control) !important;
  font-weight:var(--mesa-type-weight-semibold) !important;
  letter-spacing:var(--mesa-type-tracking-tight) !important;
  line-height:var(--mesa-type-line-compact) !important;
}

#view-cdi .cdi-chart-select__option{
  font-family:var(--mesa-type-font-ui) !important;
  font-size:var(--mesa-type-size-control) !important;
  font-weight:var(--mesa-type-weight-medium) !important;
  letter-spacing:var(--mesa-type-tracking-none) !important;
  line-height:var(--mesa-type-line-compact) !important;
}

#view-cdi .cdi-chart-select__option.is-selected,
#view-cdi .cdi-chart-select__option[aria-selected='true']{
  font-weight:var(--mesa-type-weight-semibold) !important;
}

@media (max-width:760px){
  #view-cdi .cdi-chart-select__option{
    font-size:var(--mesa-type-size-control) !important;
  }
}

/* ======================================================================
   CDI — dropdown acima dos blocos seguintes (stacking fix)
   ----------------------------------------------------------------------
   Corrige o menu do Agrupar quando ele abre sobre a lista/tabela abaixo.
   Mantém o dropdown real e não altera tipografia nem comportamento.
   ====================================================================== */
#view-cdi,
#view-cdi .cdi-section,
#view-cdi .cdi-card,
#view-cdi .cdi-charts,
#view-cdi .cdi-charts__panel,
#view-cdi .cdi-chart-header,
#view-cdi .cdi-chart-header__right,
#view-cdi .cdi-chart-select-group,
#view-cdi .cdi-charts__menu,
#view-cdi .cdi-chart-select{
  overflow:visible !important;
}

#view-cdi .cdi-card,
#view-cdi .cdi-charts,
#view-cdi .cdi-charts__panel{
  position:relative !important;
  z-index:20 !important;
}

#view-cdi .cdi-chart-header{
  position:relative !important;
  z-index:80 !important;
}

#view-cdi .cdi-chart-header__right,
#view-cdi .cdi-chart-select-group,
#view-cdi .cdi-charts__menu,
#view-cdi .cdi-chart-select{
  position:relative !important;
  z-index:120 !important;
}

#view-cdi .cdi-chart-select:focus-within,
#view-cdi .cdi-chart-select:has(.cdi-chart-select__dropdown:not([hidden])){
  z-index:420 !important;
}

#view-cdi .cdi-chart-select__dropdown,
#view-cdi #cdiChartViewDropdown,
#view-cdi .cdi-chart-header__right .radar-select-dropdown,
#view-cdi .cdi-charts__menu .radar-select-dropdown{
  z-index:999 !important;
}

#view-cdi .cdi-chart-select__options,
#view-cdi #cdiChartViewMenu,
#view-cdi .cdi-chart-header__right .radar-select-options,
#view-cdi .cdi-charts__menu .radar-select-options{
  position:relative !important;
  z-index:1000 !important;
}

/* ======================================================================
   Comparativo CDI - contrato aprovado de controles, hierarquia e ajuda
   ====================================================================== */
#view-cdi .cdi-card{
  border-radius:var(--ui-radius-panel, 20px) !important;
  padding:var(--ui-panel-padding-y, 24px) var(--ui-panel-padding-x, 28px) !important;
}

#view-cdi .cdi-card__head{
  margin-bottom:16px;
}

#view-cdi .cdi-card__title-row{
  align-items:flex-start !important;
  margin:0 !important;
}

#view-cdi .cdi-card__heading-wrap{
  min-width:0;
  flex:1 1 auto;
}

#view-cdi .cdi-card__heading{
  min-width:0;
  margin:0 !important;
  padding:0 !important;
}

#view-cdi .cdi-card__heading-wrap > .mesa-panel-heading-divider,
#view-cdi .cdi-config-panel > .mesa-panel-heading-divider{
  --mesa-panel-heading-divider-gap-bottom:0;
}

#view-cdi .cdi-chart-header{
  padding-bottom:0 !important;
  border-bottom:0 !important;
}

#view-cdi .cdi-chart-header::after{
  display:none !important;
  content:none !important;
}

#view-cdi .cdi-card__title-row .cdi-card__title{
  margin:0 !important;
  font-family:'DM Serif Display', 'Cormorant Garamond', Georgia, serif !important;
  font-size:24px !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  line-height:1.15 !important;
}

#view-cdi .cdi-card__sub{
  max-width:none !important;
  margin:6px 0 0 !important;
  font-size:13px !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  line-height:1.45 !important;
}

#view-cdi .cdi-config-panel,
#view-cdi .cdi-grid,
#view-cdi .cdi-list,
#view-cdi .cdi-charts__panel{
  border-radius:var(--ui-radius-card, 14px) !important;
}

#view-cdi .cdi-config-panel{
  gap:20px;
  padding:var(--ui-panel-padding-y, 24px);
}

#view-cdi .cdi-config-panel__heading{
  max-width:680px;
  margin:0 !important;
  padding:0 !important;
}

#view-cdi .cdi-config{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px 16px;
  align-items:end;
}

#view-cdi .cdi-config .field{
  display:grid;
  gap:var(--ui-label-gap, 6px);
  min-width:0;
}

#view-cdi .cdi-config .field label{
  margin:0 !important;
  color:var(--ui-field-label-color, var(--label-accent)) !important;
  font-family:'Inter','DM Sans',system-ui,sans-serif !important;
  font-size:var(--ui-field-label-size, 10.5px) !important;
  font-weight:var(--ui-field-label-weight, 600) !important;
  letter-spacing:var(--ui-field-label-tracking, 0.1em) !important;
  line-height:var(--ui-field-label-line-height, 1.1) !important;
  text-transform:uppercase !important;
}

#view-cdi .cdi-config .field input[type="number"],
#view-cdi .cdi-mode-toggle{
  height:var(--ui-control-height-compact, 36px) !important;
  min-height:var(--ui-control-height-compact, 36px) !important;
  max-height:var(--ui-control-height-compact, 36px) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--ui-radius-control, 12px) !important;
  /* Campo BRANCO sobre o painel creme, igual aos controles da Renda.
     Não usar --input-bg aqui: ele é creme (--bg-subtle) e sumiria no painel creme. */
  background:var(--bg-surface) !important;
  box-shadow:none !important;
}

#view-cdi .cdi-config .field input[type="number"]{
  padding:0 14px !important;
  color:var(--text) !important;
  font-size:13px !important;
  font-weight:600 !important;
}

/* Foco dourado do campo (border --focus/--gold + ring), conforme o shell. */
#view-cdi .cdi-config .field input[type="number"]:focus{
  outline:none !important;
  border-color:var(--gold) !important;
  box-shadow:0 0 0 3px var(--gold-dim) !important;
}

#view-cdi .cdi-mode-toggle button{
  min-height:0 !important;
  padding:0 12px !important;
  border-radius:var(--ui-radius-compact, 8px) !important;
  font-size:12px !important;
  letter-spacing:0 !important;
}

#view-cdi .cdi-mode-toggle button.active{
  background:var(--text, #1d1c19) !important;
  color:var(--bg-surface, #fff) !important;
  box-shadow:none !important;
}

#view-cdi .cdi-config-note.mesa-help{
  background:var(--mesa-help-bg) !important;
  border-color:var(--mesa-help-border-soft) !important;
}

#view-cdi .cdi-config-facts{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px 20px;
  margin:0;
}

#view-cdi .cdi-config-facts > div{
  min-width:0;
}

#view-cdi .cdi-config-facts dt{
  margin:0 0 3px;
  color:var(--text-dim);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:0.1em;
  line-height:1.1;
  text-transform:uppercase;
}

#view-cdi .cdi-config-facts dd{
  margin:0;
  color:var(--text-mid);
  font-size:12.5px;
  line-height:1.5;
}

#view-cdi .cdi-how-to-read.mesa-help{
  margin-top:16px !important;
}

#view-cdi .cdi-how-to-read__body{
  display:grid;
  gap:18px;
}

#view-cdi .cdi-help-lead{
  max-width:none;
}

#view-cdi .cdi-help-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px 24px;
  margin:0;
}

#view-cdi .cdi-help-item{
  min-width:0;
  padding-left:14px;
  border-left:2px solid var(--mesa-help-border-soft, var(--border));
}

#view-cdi .cdi-help-item__term{
  display:block;
  margin-bottom:4px;
  color:var(--text);
  font-size:11px;
  font-weight:700;
  letter-spacing:0;
  line-height:1.25;
}

#view-cdi .cdi-help-item p,
#view-cdi .cdi-help-caveat{
  margin:0 !important;
}

#view-cdi .cdi-help-caveat{
  max-width:none;
}

#view-cdi .cdi-metric{
  border-radius:var(--ui-radius-card, 14px) !important;
}

#view-cdi .cdi-chart-header{
  align-items:end !important;
  margin-bottom:16px !important;
  padding:0 !important;
  border-bottom:0 !important;
}

#view-cdi .cdi-chart-header__right{
  display:flex !important;
  align-items:flex-end !important;
  justify-content:flex-end !important;
  gap:8px !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
}

#view-cdi .cdi-chart-header__right .cdi-chart-select-group{
  flex:0 0 220px !important;
  width:220px !important;
  min-width:220px !important;
  max-width:220px !important;
}

#view-cdi .cdi-chart-header__right .ui-label{
  margin:0 !important;
  color:var(--ui-field-label-color, var(--label-accent)) !important;
  font-family:'Inter','DM Sans',system-ui,sans-serif !important;
  font-size:var(--ui-field-label-size, 10.5px) !important;
  font-weight:var(--ui-field-label-weight, 600) !important;
  letter-spacing:var(--ui-field-label-tracking, 0.1em) !important;
  line-height:var(--ui-field-label-line-height, 1.1) !important;
  text-transform:uppercase !important;
}

#view-cdi .cdi-chart-header .eyebrow{
  margin:0 !important;
  font-size:10.5px !important;
  font-weight:700 !important;
  letter-spacing:0.1em !important;
  line-height:1.1 !important;
}

#view-cdi .cdi-chart-header h3{
  margin:7px 0 0 !important;
  font-family:'Inter', sans-serif !important;
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:0 !important;
  line-height:1.2 !important;
}

#view-cdi .cdi-chart-header__sub{
  max-width:640px !important;
  margin:7px 0 0 !important;
  font-size:12.5px !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  line-height:1.5 !important;
}

#view-cdi .cdi-chart-header__right .radar-select-trigger,
#view-cdi .cdi-charts__menu .radar-select-trigger,
#view-cdi .cdi-chart-select__trigger{
  height:var(--ui-control-height-compact, 36px) !important;
  min-height:var(--ui-control-height-compact, 36px) !important;
  max-height:var(--ui-control-height-compact, 36px) !important;
  border-radius:var(--ui-radius-control, 12px) !important;
}

#view-cdi .cdi-chart-refresh{
  align-self:flex-end;
  flex:0 0 220px;
  width:220px;
  min-width:220px;
  max-width:220px;
  height:var(--ui-control-height-compact, 36px);
  min-height:var(--ui-control-height-compact, 36px);
  white-space:nowrap;
}

#view-cdi .cdi-actions .refresh-btn,
#view-cdi .cdi-actions .btn-seleto-ghost{
  min-height:var(--ui-control-height-default, 40px);
  border-radius:var(--ui-radius-control, 12px);
}

@media (max-width:760px){
  #view-cdi .cdi-card{
    padding:var(--ui-panel-padding-mobile, 18px) !important;
  }

  #view-cdi .cdi-card__title-row{
    gap:14px !important;
  }

  #view-cdi .cdi-config-panel{
    padding:var(--ui-panel-padding-mobile, 18px);
  }

  #view-cdi .cdi-config{
    grid-template-columns:1fr;
  }

  #view-cdi .cdi-config .field{
    gap:6px;
  }

  #view-cdi .cdi-config .field input[type="number"],
  #view-cdi .cdi-mode-toggle,
  #view-cdi .cdi-chart-header__right .radar-select-trigger,
  #view-cdi .cdi-charts__menu .radar-select-trigger,
  #view-cdi .cdi-chart-select__trigger{
    height:var(--ui-control-height-default, 40px) !important;
    min-height:var(--ui-control-height-default, 40px) !important;
    max-height:var(--ui-control-height-default, 40px) !important;
  }

  #view-cdi .cdi-config-facts,
  #view-cdi .cdi-help-grid{
    grid-template-columns:1fr;
  }

  #view-cdi .cdi-chart-header{
    gap:16px !important;
  }

  #view-cdi .cdi-chart-header__right{
    align-items:stretch !important;
    flex-direction:column !important;
    width:100% !important;
  }

  #view-cdi .cdi-chart-header__right .cdi-chart-select-group{
    flex:1 1 auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }

  #view-cdi .cdi-chart-refresh{
    flex:0 0 auto;
    width:100%;
    min-width:0;
    max-width:none;
    min-height:var(--ui-control-height-default, 40px);
    height:var(--ui-control-height-default, 40px);
  }
}

/* Comparativo CDI — correção das linhas/divisórias antigas.
   Remove linhas longas vindas de bordas legadas e força o divisor curto
   institucional logo abaixo de título/subtítulo, como nos demais painéis. */
#view-cdi .cdi-card__head,
#view-cdi .cdi-card__head-text,
#view-cdi .cdi-card__title-row,
#view-cdi .cdi-card__heading-wrap,
#view-cdi .cdi-card__heading,
#view-cdi .cdi-card__sub,
#view-cdi .cdi-config-panel,
#view-cdi .cdi-config-panel__heading,
#view-cdi .cdi-config-panel__heading .mesa-ui-content-subtitle,
#view-cdi .cdi-chart-header{
  border-top:0 !important;
  border-bottom:0 !important;
  box-shadow:none;
  text-decoration:none !important;
  background-image:none !important;
}

#view-cdi .cdi-card__heading-wrap > .mesa-panel-heading-divider,
#view-cdi .cdi-config-panel > .mesa-panel-heading-divider{
  --mesa-panel-heading-divider-width:var(--mesa-type-panel-heading-divider-width, 266px);
  --mesa-panel-heading-divider-gap-top:18px;
  --mesa-panel-heading-divider-gap-bottom:24px;
  display:block !important;
  width:min(var(--mesa-panel-heading-divider-width), 100%) !important;
  max-width:var(--mesa-panel-heading-divider-width) !important;
  margin:
    var(--mesa-panel-heading-divider-gap-top)
    0
    var(--mesa-panel-heading-divider-gap-bottom) !important;
  background:var(--mesa-panel-heading-divider-gradient) !important;
}

#view-cdi .cdi-config-panel{
  gap:0 !important;
}

#view-cdi .cdi-config{
  margin:0 !important;
}


/* Comparativo CDI — os cabeçalhos usam <header>, mas não devem herdar o
   underline global de header do shell. O divisor correto já é o elemento
   .mesa-panel-heading-divider; por isso removemos o ::after legado para não
   renderizar duas linhas. */
#view-cdi .cdi-card__heading::after,
#view-cdi .cdi-config-panel__heading::after{
  content:none !important;
  display:none !important;
}

#view-cdi .cdi-card__heading,
#view-cdi .cdi-config-panel__heading{
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}


/* Comparativo CDI — cabeçalho principal no mesmo padrão visual dos demais painéis.
   Ajusta ritmo, largura de leitura e tipografia do título/subtítulo para bater
   com Radar, Patrimônio e Registrar operação. */
#view-cdi .cdi-card{
  padding:28px 28px 24px !important;
}

#view-cdi .cdi-card__head{
  margin-bottom:18px !important;
}

#view-cdi .cdi-card__heading-wrap{
  max-width:760px !important;
}

#view-cdi .cdi-card__title-row .cdi-card__title{
  font-family:var(--mesa-type-font-display, "DM Serif Display", Georgia, serif) !important;
  font-size:var(--mesa-type-panel-heading-title-size, 24px) !important;
  font-weight:var(--mesa-type-weight-regular, 400) !important;
  line-height:var(--mesa-type-line-compact, 1.12) !important;
  letter-spacing:var(--mesa-type-tracking-none, 0) !important;
  text-transform:none !important;
}

#view-cdi .cdi-card__sub{
  max-width:var(--mesa-type-panel-heading-copy-max, 760px) !important;
  margin:4px 0 0 !important;
  color:var(--text-mid) !important;
  font-family:var(--mesa-type-font-ui, "Inter", -apple-system, system-ui, sans-serif) !important;
  font-size:var(--mesa-type-panel-heading-subtitle-size, 13px) !important;
  font-weight:var(--mesa-type-weight-regular, 400) !important;
  line-height:1.5 !important;
  letter-spacing:var(--mesa-type-tracking-none, 0) !important;
}


/* Comparativo CDI — aproxima o painel da Mesa de Decisão.
   O bloco herdava margin-top de `.cdi-section`, deixando o card um pouco mais
   baixo que os demais painéis. */
#view-cdi > .cdi-section{
  margin-top:4px !important;
}


/* Comparativo CDI — reduz o espaço excessivo entre a divisória do cabeçalho
   e o accordion "Como interpretar o resultado". O divisor já entrega o respiro
   correto; não precisamos somar margem do head e do accordion. */
#view-cdi .cdi-card__head{
  margin-bottom:0 !important;
}

#view-cdi .cdi-how-to-read.mesa-help,
#view-cdi .cdi-how-to-read{
  margin-top:0 !important;
}


/* Comparativo CDI — accordion de ajuda 20% menor na horizontal quando fechado.
   Quando aberto, ele volta a ocupar toda a largura para acomodar o conteúdo. */
#view-cdi .cdi-how-to-read:not([open]).mesa-help,
#view-cdi .cdi-how-to-read:not([open]){
  width:80% !important;
  max-width:80% !important;
}

#view-cdi .cdi-how-to-read[open].mesa-help,
#view-cdi .cdi-how-to-read[open]{
  width:100% !important;
  max-width:100% !important;
}

#view-cdi .cdi-how-to-read__summary{
  width:100% !important;
}

@media (max-width: 960px){
  #view-cdi .cdi-how-to-read:not([open]).mesa-help,
  #view-cdi .cdi-how-to-read:not([open]){
    width:100% !important;
    max-width:100% !important;
  }
}


/* Comparativo CDI — correção do accordion de ajuda.
   Reverte a redução horizontal e aplica a redução vertical quando fechado. */
#view-cdi .cdi-how-to-read.mesa-help,
#view-cdi .cdi-how-to-read,
#view-cdi .cdi-how-to-read:not([open]).mesa-help,
#view-cdi .cdi-how-to-read:not([open]),
#view-cdi .cdi-how-to-read[open].mesa-help,
#view-cdi .cdi-how-to-read[open]{
  width:100% !important;
  max-width:100% !important;
}

#view-cdi .cdi-how-to-read:not([open]) .cdi-how-to-read__summary,
#view-cdi .cdi-how-to-read:not([open]) > .mesa-help__head{
  padding-top:8px !important;
  padding-bottom:8px !important;
}

#view-cdi .cdi-how-to-read[open] .cdi-how-to-read__summary,
#view-cdi .cdi-how-to-read[open] > .mesa-help__head{
  padding-top:10px !important;
  padding-bottom:10px !important;
}


/* Comparativo CDI — ajuste final do accordion de ajuda.
   O pedido correto é 20% menor na vertical quando fechado. Para isso, o painel
   volta a 100% da largura e o resumo deixa de ganhar padding extra; a redução
   acontece no container fechado, com padding vertical ~20% menor que o padrão. */
#view-cdi details.cdi-how-to-read.mesa-help,
#view-cdi .cdi-how-to-read,
#view-cdi .cdi-how-to-read:not([open]).mesa-help,
#view-cdi .cdi-how-to-read[open].mesa-help{
  width:100% !important;
  max-width:100% !important;
}

#view-cdi .cdi-how-to-read__summary,
#view-cdi .cdi-how-to-read:not([open]) .cdi-how-to-read__summary,
#view-cdi .cdi-how-to-read[open] .cdi-how-to-read__summary,
#view-cdi .cdi-how-to-read:not([open]) > .mesa-help__head,
#view-cdi .cdi-how-to-read[open] > .mesa-help__head{
  padding:0 !important;
}

#view-cdi details.cdi-how-to-read.mesa-help:not([open]){
  padding-top:11px !important;
  padding-bottom:11px !important;
}

#view-cdi details.cdi-how-to-read.mesa-help[open]{
  padding-top:14px !important;
  padding-bottom:14px !important;
}

/* Mobile: Comparativo CDI no mesmo contrato visual dos painéis recentes. */
@media (max-width: 767px){
  #mesaAppShell #view-cdi.active{
    box-sizing:border-box !important;
    width:auto !important;
    max-width:none !important;
    margin-left:-10px !important;
    margin-right:-10px !important;
    padding-bottom:calc(112px + env(safe-area-inset-bottom, 0px)) !important;
    overflow:visible !important;
  }

  #mesaAppShell #view-cdi > .cdi-section{
    display:grid !important;
    gap:16px !important;
    margin:0 !important;
    width:100% !important;
    max-width:none !important;
  }

  #mesaAppShell #view-cdi .cdi-card{
    overflow:visible !important;
    border:1px solid color-mix(in srgb, var(--border) 84%, transparent) !important;
    border-radius:var(--mesa-mobile-panel-radius, 18px) !important;
    background:var(--bg-surface) !important;
    box-shadow:var(--mesa-mobile-panel-shadow, 0 6px 20px rgba(26, 26, 24, 0.07)) !important;
    padding:var(--mesa-mobile-panel-inset, 20px) !important;
  }

  #mesaAppShell #view-cdi .cdi-card__head{
    margin:0 !important;
  }

  #mesaAppShell #view-cdi .cdi-card__title-row,
  #mesaAppShell #view-cdi .cdi-card__heading-wrap,
  #mesaAppShell #view-cdi .cdi-card__heading{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
  }

  #mesaAppShell #view-cdi .cdi-card__title-row .cdi-card__title{
    margin:0 !important;
    font-size:clamp(30px, 8.1vw, 36px) !important;
    line-height:1.04 !important;
  }

  #mesaAppShell #view-cdi .cdi-card__sub{
    max-width:100% !important;
    margin:8px 0 0 !important;
    font-size:15px !important;
    line-height:1.42 !important;
  }

  #mesaAppShell #view-cdi .cdi-card__heading-wrap > .mesa-panel-heading-divider,
  #mesaAppShell #view-cdi .cdi-config-panel > .mesa-panel-heading-divider{
    width:100% !important;
    max-width:100% !important;
    margin:18px 0 24px !important;
  }

  #mesaAppShell #view-cdi details.cdi-how-to-read.mesa-help{
    overflow:visible !important;
    margin:0 0 14px !important;
    padding:0 !important;
    border:1px solid color-mix(in srgb, var(--border) 88%, transparent) !important;
    border-radius:var(--ui-radius-card, 14px) !important;
    background:var(--bg-subtle) !important;
    box-shadow:0 4px 14px color-mix(in srgb, var(--text) 5%, transparent) !important;
  }

  #mesaAppShell #view-cdi details.cdi-how-to-read.mesa-help[open]{
    padding:0 !important;
  }

  #mesaAppShell #view-cdi .cdi-how-to-read__summary{
    min-height:var(--ui-control-height-default, 40px) !important;
    padding:0 14px !important;
    display:grid !important;
    grid-template-columns:auto minmax(0, 1fr) auto !important;
    align-items:center !important;
    gap:12px !important;
  }

  #mesaAppShell #view-cdi .cdi-how-to-read__summary .mesa-help__label{
    min-width:0 !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    font-size:12px !important;
    line-height:1.1 !important;
    letter-spacing:.12em !important;
  }

  #mesaAppShell #view-cdi .cdi-how-to-read__body{
    grid-template-columns:1fr !important;
    gap:14px !important;
    padding:0 14px 14px !important;
  }

  #mesaAppShell #view-cdi .cdi-help-grid{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  #mesaAppShell #view-cdi .cdi-help-item{
    border-radius:var(--ui-radius-card, 14px) !important;
    background:var(--bg-surface) !important;
  }

  #mesaAppShell #view-cdi .cdi-config-panel{
    overflow:visible !important;
    margin:0 !important;
    padding:var(--mesa-mobile-panel-inset, 20px) !important;
    border:1px solid color-mix(in srgb, var(--border) 84%, transparent) !important;
    border-radius:var(--mesa-mobile-panel-radius, 18px) !important;
    background:var(--bg-surface) !important;
    box-shadow:none !important;
  }

  #mesaAppShell #view-cdi .cdi-config-panel__heading{
    display:block !important;
  }

  #mesaAppShell #view-cdi .cdi-config-panel__heading .mesa-ui-content-kicker{
    margin:0 0 8px !important;
    color:var(--text-muted) !important;
    font-size:11px !important;
    font-weight:800 !important;
    letter-spacing:.14em !important;
  }

  #mesaAppShell #view-cdi .cdi-config-panel__heading .mesa-ui-content-title{
    margin:0 !important;
    font-family:var(--mesa-type-font-display, "DM Serif Display", Georgia, serif) !important;
    font-size:clamp(26px, 7.2vw, 32px) !important;
    font-weight:400 !important;
    line-height:1.05 !important;
    letter-spacing:0 !important;
  }

  #mesaAppShell #view-cdi .cdi-config-panel__heading .mesa-ui-content-subtitle{
    margin:8px 0 0 !important;
    font-size:14.5px !important;
    line-height:1.42 !important;
    color:var(--text-mid) !important;
  }

  #mesaAppShell #view-cdi .cdi-config{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
    width:100% !important;
  }

  #mesaAppShell #view-cdi .cdi-config .field{
    display:grid !important;
    gap:6px !important;
    width:100% !important;
    min-width:0 !important;
  }

  #mesaAppShell #view-cdi .cdi-config .field label{
    color:var(--text-mid) !important;
    font-size:11px !important;
    font-weight:800 !important;
    line-height:1.1 !important;
    letter-spacing:.12em !important;
  }

  #mesaAppShell #view-cdi .cdi-config .field input[type="number"],
  #mesaAppShell #view-cdi .cdi-mode-toggle,
  #mesaAppShell #view-cdi .cdi-chart-header__right .radar-select-trigger,
  #mesaAppShell #view-cdi .cdi-charts__menu .radar-select-trigger,
  #mesaAppShell #view-cdi .cdi-chart-select__trigger{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:var(--ui-control-height-default, 40px) !important;
    min-height:var(--ui-control-height-default, 40px) !important;
    max-height:var(--ui-control-height-default, 40px) !important;
    border:1px solid color-mix(in srgb, var(--border) 84%, transparent) !important;
    border-radius:var(--ui-radius-card, 14px) !important;
    background:var(--bg-subtle) !important;
    color:var(--text) !important;
    box-shadow:none !important;
  }

  #mesaAppShell #view-cdi .cdi-mode-toggle{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    align-items:center !important;
    gap:0 !important;
    padding:3px !important;
  }

  #mesaAppShell #view-cdi .cdi-mode-toggle button{
    height:100% !important;
    min-width:0 !important;
    border-radius:calc(var(--ui-radius-card, 14px) - 3px) !important;
    white-space:nowrap !important;
  }

  #mesaAppShell #view-cdi .cdi-config-facts{
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin-top:14px !important;
  }

  #mesaAppShell #view-cdi .cdi-config-note.mesa-help,
  #mesaAppShell #view-cdi .cdi-grid,
  #mesaAppShell #view-cdi .cdi-list,
  #mesaAppShell #view-cdi .cdi-charts__panel{
    border:1px solid color-mix(in srgb, var(--border) 84%, transparent) !important;
    border-radius:var(--mesa-mobile-panel-radius, 18px) !important;
    background:var(--bg-surface) !important;
  }

  #mesaAppShell #view-cdi .cdi-chart-header{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
    padding:0 !important;
  }

  #mesaAppShell #view-cdi .cdi-chart-header__right{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    width:100% !important;
  }

  #mesaAppShell #view-cdi .cdi-chart-refresh{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:var(--ui-control-height-default, 40px) !important;
    min-height:var(--ui-control-height-default, 40px) !important;
  }
}

/* Mobile: CDI sem painel dentro de painel. O card principal vira apenas o
   empilhador; cabecalho, configuracao e resultados ficam em paineis proprios. */
@media (max-width: 767px){
  #mesaAppShell #view-cdi.active{
    box-sizing:border-box !important;
    width:auto !important;
    max-width:none !important;
    margin-left:-10px !important;
    margin-right:-10px !important;
    padding-bottom:calc(112px + env(safe-area-inset-bottom, 0px)) !important;
    overflow:visible !important;
  }

  #mesaAppShell #view-cdi > .cdi-section{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }

  #mesaAppShell #view-cdi .cdi-card{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
    gap:16px !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  #mesaAppShell #view-cdi .cdi-card__head,
  #mesaAppShell #view-cdi .cdi-config-panel,
  #mesaAppShell #view-cdi .cdi-grid,
  #mesaAppShell #view-cdi .cdi-charts__panel,
  #mesaAppShell #view-cdi .cdi-list{
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:var(--mesa-mobile-panel-inset, 20px) !important;
    border:1px solid color-mix(in srgb, var(--border) 84%, transparent) !important;
    border-radius:var(--mesa-mobile-panel-radius, 18px) !important;
    background:var(--bg-surface) !important;
    box-shadow:var(--mesa-mobile-panel-shadow, 0 6px 20px rgba(26, 26, 24, 0.07)) !important;
    overflow:visible !important;
  }

  #mesaAppShell #view-cdi #cdiResultsHost{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
    gap:16px !important;
    width:100% !important;
    min-width:0 !important;
  }

  #mesaAppShell #view-cdi .cdi-card__head-text,
  #mesaAppShell #view-cdi .cdi-card__title-row,
  #mesaAppShell #view-cdi .cdi-card__heading-wrap,
  #mesaAppShell #view-cdi .cdi-card__heading,
  #mesaAppShell #view-cdi .cdi-config-panel__heading{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  #mesaAppShell #view-cdi .cdi-card__title-row .cdi-card__title{
    max-width:100% !important;
    margin:0 !important;
    overflow-wrap:normal !important;
    color:var(--text) !important;
    font-family:var(--mesa-type-font-display, "DM Serif Display", Georgia, serif) !important;
    font-size:clamp(28px, 7.5vw, 34px) !important;
    font-weight:400 !important;
    line-height:1.08 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
  }

  #mesaAppShell #view-cdi .cdi-card__sub{
    max-width:100% !important;
    margin:8px 0 0 !important;
    overflow-wrap:break-word !important;
    color:var(--text-mid) !important;
    font-size:14.5px !important;
    font-weight:400 !important;
    line-height:1.42 !important;
    letter-spacing:0 !important;
  }

  #mesaAppShell #view-cdi .cdi-card__heading-wrap > .mesa-panel-heading-divider,
  #mesaAppShell #view-cdi .cdi-config-panel > .mesa-panel-heading-divider{
    --mesa-panel-heading-divider-gap-top:18px;
    --mesa-panel-heading-divider-gap-bottom:22px;
    display:block !important;
    width:min(var(--mesa-panel-heading-divider-width, 266px), 100%) !important;
    max-width:min(var(--mesa-panel-heading-divider-width, 266px), 100%) !important;
    height:1.5px !important;
    margin:
      var(--mesa-panel-heading-divider-gap-top)
      0
      var(--mesa-panel-heading-divider-gap-bottom) !important;
    background:var(--mesa-panel-heading-divider-gradient) !important;
  }

  #mesaAppShell #view-cdi details.cdi-how-to-read.mesa-help{
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    border:1px solid color-mix(in srgb, var(--border) 84%, transparent) !important;
    border-radius:var(--ui-radius-control, 12px) !important;
    background:var(--bg-subtle) !important;
    box-shadow:none !important;
    overflow:hidden !important;
  }

  #mesaAppShell #view-cdi details.cdi-how-to-read.mesa-help[open]{
    overflow:visible !important;
  }

  #mesaAppShell #view-cdi .cdi-how-to-read__summary{
    display:grid !important;
    grid-template-columns:auto minmax(0, 1fr) auto !important;
    align-items:center !important;
    gap:12px !important;
    min-height:var(--ui-control-height-default, 40px) !important;
    height:var(--ui-control-height-default, 40px) !important;
    padding:0 14px !important;
  }

  #mesaAppShell #view-cdi .cdi-how-to-read__summary .mesa-help__label{
    min-width:0 !important;
    overflow:hidden !important;
    color:var(--text) !important;
    font-size:10.5px !important;
    font-weight:850 !important;
    letter-spacing:.1em !important;
    line-height:1.1 !important;
    text-overflow:ellipsis !important;
    text-transform:uppercase !important;
    white-space:nowrap !important;
  }

  #mesaAppShell #view-cdi .cdi-how-to-read__body{
    position:relative !important;
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
    gap:0 !important;
    margin:0 !important;
    padding:13px 14px 14px !important;
    border-top:0 !important;
    background:transparent !important;
  }

  #mesaAppShell #view-cdi .cdi-how-to-read__body::before{
    content:'' !important;
    position:absolute !important;
    top:0 !important;
    right:14px !important;
    left:14px !important;
    height:1px !important;
    background:color-mix(in srgb, var(--border) 76%, transparent) !important;
    pointer-events:none !important;
  }

  #mesaAppShell #view-cdi .cdi-help-lead,
  #mesaAppShell #view-cdi .cdi-help-caveat,
  #mesaAppShell #view-cdi .cdi-help-item p{
    max-width:100% !important;
    margin:0 !important;
    overflow-wrap:break-word !important;
    font-size:12.5px !important;
    line-height:1.45 !important;
  }

  #mesaAppShell #view-cdi .cdi-help-lead{
    padding:0 0 12px !important;
    border-bottom:1px solid color-mix(in srgb, var(--border) 72%, transparent) !important;
  }

  #mesaAppShell #view-cdi .cdi-help-grid{
    grid-template-columns:minmax(0, 1fr) !important;
    gap:0 !important;
    margin:0 !important;
  }

  #mesaAppShell #view-cdi .cdi-help-item{
    min-width:0 !important;
    margin:0 !important;
    padding:12px 0 !important;
    border-left:0 !important;
    border-top:0 !important;
    border-bottom:1px solid color-mix(in srgb, var(--border) 72%, transparent) !important;
    border-radius:0 !important;
    background:transparent !important;
  }

  #mesaAppShell #view-cdi .cdi-help-item__term{
    display:block !important;
    margin:0 0 5px !important;
  }

  #mesaAppShell #view-cdi .cdi-help-caveat{
    padding:12px 0 0 !important;
  }

  #mesaAppShell #view-cdi .cdi-config-panel{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
    gap:0 !important;
  }

  #mesaAppShell #view-cdi .cdi-config-panel__heading .mesa-ui-content-kicker{
    margin:0 0 8px !important;
    color:var(--text-muted) !important;
    font-size:10.5px !important;
    font-weight:800 !important;
    letter-spacing:.13em !important;
    line-height:1.1 !important;
    text-transform:uppercase !important;
  }

  #mesaAppShell #view-cdi .cdi-config-panel__heading .mesa-ui-content-title{
    margin:0 !important;
    overflow-wrap:break-word !important;
    color:var(--text) !important;
    font-family:var(--mesa-type-font-display, "DM Serif Display", Georgia, serif) !important;
    font-size:clamp(24px, 6.4vw, 30px) !important;
    font-weight:400 !important;
    line-height:1.1 !important;
    letter-spacing:0 !important;
  }

  #mesaAppShell #view-cdi .cdi-config-panel__heading .mesa-ui-content-subtitle{
    max-width:100% !important;
    margin:8px 0 0 !important;
    overflow-wrap:break-word !important;
    color:var(--text-mid) !important;
    font-size:13.5px !important;
    line-height:1.42 !important;
  }

  #mesaAppShell #view-cdi .cdi-config{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
    gap:14px !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
  }

  #mesaAppShell #view-cdi .cdi-config .field{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
    gap:6px !important;
    width:100% !important;
    min-width:0 !important;
  }

  #mesaAppShell #view-cdi .cdi-config .field label{
    margin:0 !important;
    color:var(--text-mid) !important;
    font-size:10.5px !important;
    font-weight:800 !important;
    letter-spacing:.12em !important;
    line-height:1.1 !important;
    text-transform:uppercase !important;
  }

  #mesaAppShell #view-cdi .cdi-config .field input[type="number"],
  #mesaAppShell #view-cdi .cdi-mode-toggle,
  #mesaAppShell #view-cdi .cdi-chart-header__right .radar-select-trigger,
  #mesaAppShell #view-cdi .cdi-charts__menu .radar-select-trigger,
  #mesaAppShell #view-cdi .cdi-chart-select__trigger{
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:var(--ui-control-height-default, 40px) !important;
    min-height:var(--ui-control-height-default, 40px) !important;
    max-height:var(--ui-control-height-default, 40px) !important;
    border:1px solid color-mix(in srgb, var(--border) 84%, transparent) !important;
    border-radius:var(--ui-radius-control, 12px) !important;
    background:var(--bg-subtle) !important;
    box-shadow:none !important;
  }

  #mesaAppShell #view-cdi .cdi-config .field input[type="number"]{
    padding:0 14px !important;
    color:var(--text) !important;
    font-size:13px !important;
    font-weight:650 !important;
  }

  #mesaAppShell #view-cdi .cdi-config .field input[type="number"]::-webkit-outer-spin-button,
  #mesaAppShell #view-cdi .cdi-config .field input[type="number"]::-webkit-inner-spin-button{
    margin:0 !important;
  }

  #mesaAppShell #view-cdi .cdi-mode-toggle{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:3px !important;
    padding:3px !important;
  }

  #mesaAppShell #view-cdi .cdi-mode-toggle button{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:0 !important;
    height:100% !important;
    padding:0 8px !important;
    border-radius:calc(var(--ui-radius-control, 12px) - 4px) !important;
    overflow:hidden !important;
    font-size:11.5px !important;
    font-weight:800 !important;
    letter-spacing:.01em !important;
    line-height:1.1 !important;
    text-align:center !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  #mesaAppShell #view-cdi .cdi-config-note.mesa-help{
    box-sizing:border-box !important;
    width:100% !important;
    margin:14px 0 0 !important;
    padding:14px !important;
    border:1px solid color-mix(in srgb, var(--border) 82%, transparent) !important;
    border-radius:var(--ui-radius-card, 14px) !important;
    background:var(--bg-subtle) !important;
    box-shadow:none !important;
  }

  #mesaAppShell #view-cdi .cdi-config-note .mesa-help__body{
    position:relative !important;
    margin:12px 0 0 !important;
    padding:13px 0 0 !important;
  }

  #mesaAppShell #view-cdi .cdi-config-note .mesa-help__body::before{
    content:'' !important;
    position:absolute !important;
    top:0 !important;
    right:0 !important;
    left:0 !important;
    height:1.5px !important;
    background:color-mix(in srgb, var(--border) 76%, transparent) !important;
    pointer-events:none !important;
  }

  #mesaAppShell #view-cdi .cdi-config-facts{
    grid-template-columns:minmax(0, 1fr) !important;
    gap:13px !important;
    margin:0 !important;
  }

  #mesaAppShell #view-cdi .cdi-config-facts > div{
    min-width:0 !important;
  }

  #mesaAppShell #view-cdi .cdi-config-facts dt{
    margin:0 0 5px !important;
  }

  #mesaAppShell #view-cdi .cdi-config-facts dd{
    margin:0 !important;
    overflow-wrap:break-word !important;
    font-size:12.5px !important;
    line-height:1.45 !important;
  }
}