.performance-page {
  min-width: 0;
  padding-bottom: 88px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.performance-page [hidden] { display: none !important; }
.performance-page h2,
.performance-page h3,
.performance-page p,
.performance-page figure,
.performance-page dl { margin: 0; }

.performance-head { margin-bottom: 0; }
.performance-view-nav { width: min(340px, 100%); }
.performance-view-nav .ds-segmented-option { flex: 1; min-height: 34px; }

.performance-page [data-performance-view]:not([hidden]),
.performance-now,
.performance-indicators,
.performance-panorama,
.performance-discipline-section,
.performance-evolution {
  display: grid;
  min-width: 0;
  gap: var(--space-3);
}

.performance-line-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.performance-line-heading h2,
.performance-number-heading h2 {
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}

.performance-line-heading small {
  margin-left: auto;
  color: var(--text-secondary);
  font-size: 11px;
}

.performance-explanation {
  display: grid;
  /* Moment column: wide enough (316px = 18px padding + the 293px note + slack) for its one-line note; the story
     column takes the rest. */
  grid-template-columns: minmax(0, 1.7fr) minmax(316px, .75fr) minmax(235px, .68fr);
  min-block-size: 218px;
  min-width: 0;
  gap: 18px;
  overflow: hidden;
  padding: 22px 23px;
  border-color: rgba(139, 92, 246, 0.42);
  border-radius: var(--radius);
  background:
    radial-gradient(520px 200px at 7% 0%, rgba(139, 92, 246, .14), transparent 72%),
    linear-gradient(145deg, rgba(18, 22, 42, .98), rgba(7, 15, 30, .98));
}

.performance-explanation-copy {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 7px;
  padding: 0;
}
.performance-hero-story { grid-column: 1; align-self: start; }

.performance-explanation-copy > h3 {
  color: var(--ink);
  font-size: 20px;
  font-weight: 720;
  line-height: 1.27;
  letter-spacing: -.018em;
}

.performance-story-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #c084fc;
  font-size: 12px;
  font-weight: 700;
}
.performance-story-kicker .performance-icon { width: 15px; height: 15px; }
.performance-summary { max-width: 88ch; color: var(--text-secondary); font-size: 13.5px; line-height: 1.58; }
.performance-certainty { max-width: 78ch; margin-top: 4px; color: var(--muted); font-size: 12px; }
.performance-hero-freshness { color: var(--muted); font-size: 12px; }

.performance-explanation-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
}

/* No surface of its own: the single .hero-inline-box inside is the only box, styled exactly like the one that
   opens under "Entenda este índice". */
.performance-explanation-actions #performanceExplanationDetails {
  width: 100%;
  color: var(--text-secondary);
}

.performance-explanation-actions #performanceExplanationDetails p + p { margin-top: 7px; }
.performance-page .performance-explanation-actions .ds-action-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: var(--cyan);
  font-weight: 700;
}

.performance-moment {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--success) 24%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--success) 8%, transparent);
}

.performance-moment .performance-icon { color: var(--success); }
.performance-moment strong { color: var(--ink); font-size: 14px; font-weight: 650; line-height: 1.2; }
.performance-moment-label { color: var(--muted); font-size: 11.5px; font-weight: 650; }
.performance-moment-note { margin: 0; max-width: 300px; color: var(--muted); font-size: 10.8px; line-height: 1.42; }
/* The vertical dividers are these columns' left borders, so they stretch to the row height: when the story column
   grows (expanded explanation) the line follows it instead of stopping mid-card. Content stays top-aligned. */
.performance-hero-moment {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-self: stretch;
  justify-content: flex-start;
  gap: 7px;
  padding: 2px 0 0 18px;
  border-left: 1px solid rgba(255, 255, 255, .075);
}

/* .performance-hero-cp is the outer column (ring+copy row, then the disclosure below, top-aligned
   with its siblings); .performance-cp-main is just the ring+copy row. */
.performance-hero-cp {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-self: stretch;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 0 0 18px;
  border-left: 1px solid rgba(255, 255, 255, .075);
  grid-column: 3;
}
.performance-cp-main { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 14px; }

/* Two classes: the shared .ring-svg (styles.css, loaded later) would otherwise force 136px. */
.performance-cp-main .performance-cp-ring { width: 88px; height: 88px; margin: 0; }
.performance-cp-ring .ring-track { stroke: rgba(139, 92, 246, 0.2); }
.performance-cp-ring .ring-fill { stroke-width: 8; }
.performance-cp-ring .ring-content { gap: 3px; }
.performance-cp-ring .ring-content strong { font-size: 27px; font-weight: 650; }
.performance-cp-ring .ring-content span { color: var(--text-secondary); font-size: 11px; }
.performance-cp-ring-unavailable {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
}
.performance-cp-ring-unavailable .ring-content { display: grid; place-items: center; gap: 3px; }
.performance-cp-main h3 { font-size: 16px; font-weight: 600; }
.performance-cp-main p { margin-top: 6px; color: var(--text-secondary); font-size: 12px; }
.performance-cp-ring-unavailable .ring-content span { font-size: 10px; text-align: center; line-height: 1.2; }

/* "Para liberar o índice": one visible next step, one "later" line and a segmented 5-signal bar. */
.performance-cp-unlock { display: grid; gap: 6px; }
.performance-cp-unlock p { margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
.performance-cp-unlock-intro { font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.performance-cp-unlock-step strong { color: var(--ink); font-weight: 650; }
.performance-cp-unlock-later { color: var(--text-secondary); }
.performance-cp-unlock-progress { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.performance-cp-unlock-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; flex: 0 0 96px; }
.performance-cp-unlock-bar i { height: 6px; border-radius: 999px; background: rgba(139, 92, 246, 0.2); }
.performance-cp-unlock-bar i.is-ready { background: var(--magenta); }
.performance-cp-unlock-progress small { color: var(--text-secondary); font-size: 11px; }
html[data-theme="light"] .performance-cp-unlock-bar i { background: #e3dfe9; }
html[data-theme="light"] .performance-cp-unlock-bar i.is-ready { background: var(--magenta); }
/* A masked shape colored via currentColor, not a text glyph: the "⌄" character sits visibly low inside
   its own font em-box in most fonts, so even a perfectly flex-centered box still reads as "the chevron is
   below the text" — display:inline-flex + align-items:center only centers the box, not the ink inside a
   glyph. A fixed-size masked box has no such ambiguity: what you size is exactly what paints. */
.performance-cp-details summary { display: inline-flex; align-items: center; gap: 6px; color: var(--magenta); font-size: 12px; cursor: pointer; list-style: none; }
.performance-cp-details summary::-webkit-details-marker { display: none; }
.performance-cp-details summary::after,
.performance-explanation-actions [data-action="performance-toggle-disclosure"]::after {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.performance-cp-details[open] summary,
.performance-explanation-actions [aria-expanded="true"] { color: var(--ink); }
.performance-cp-details > .hero-inline-box { margin-top: 8px; }

/* Static "what this means / how to read it" boxes, shared by the hero and CP disclosures. Matches v26's
   .hero-inline-box exactly: a neutral (not purple-tinted) hairline border and a much rounder corner than
   the shared --line/--radius-md tokens gave it, which read as visibly off from the frozen reference. */
.hero-inline-box {
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 13px;
  background: rgba(255, 255, 255, .026);
}
.hero-inline-box + .hero-inline-box { margin-top: 8px; }
.hero-inline-box h5 { margin: 0 0 4px; color: var(--ink); font-size: 12px; font-weight: 650; }
.hero-inline-box p { margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.55; }
.evidence-row { margin-top: 8px; }
.evidence-chip {
  display: inline-flex;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 10.5px;
}
/* Convenção do app: fechado aponta para a direita (">"), expandido para baixo. A máscara é um chevron para baixo. */
.performance-cp-details summary::after,
.performance-explanation-actions [data-action="performance-toggle-disclosure"]::after { transform: rotate(-90deg); transition: transform .2s ease; }
.performance-cp-details[open] summary::after,
.performance-explanation-actions [aria-expanded="true"]::after { transform: rotate(0deg); }

.performance-number-heading { align-items: center; }
.performance-number-heading p,
.performance-discipline-section .performance-line-heading p { margin-top: 2px; color: var(--text-secondary); font-size: 12px; }

.performance-controls { display: flex; align-items: center; gap: 10px; }
.performance-period-tabs { white-space: nowrap; }
.performance-period-tabs .ds-segmented-option { min-height: 32px; padding-inline: 14px; }

.performance-page input,
.performance-page select,
.performance-page .ds-action-button {
  min-width: 0;
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
}
.performance-page input,
.performance-page select { width: 100%; }
.performance-page .ds-action-button { width: fit-content; cursor: pointer; }

.performance-number-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(184px, auto);
  align-items: stretch;
  gap: 10px;
}

.performance-indicator {
  --tone: var(--primary);
  position: relative;
  /* Four explicit rows — heading, a flexible middle row that centers the primary number, then secondary
     and complement each pinned to their own row at the bottom — instead of a flex column relying on
     margin:auto to redistribute space. The auto-margin approach only shifts a number by however much
     free space happens to be left after the rest of the content, which reads as "stuck near the top"
     whenever a card's own content is already close to the card's min-height; a dedicated 1fr row always
     leaves real space to center into and pins the footer to the bottom edge, deterministically. */
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  row-gap: 6px;
  min-width: 0;
  min-block-size: 184px;
  height: 100%;
  overflow: hidden;
  padding: 18px 16px 16px;
  border-bottom: 3px solid var(--tone);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--tone) 14%, transparent), transparent 42%),
    linear-gradient(145deg, rgba(13, 16, 32, 0.98), rgba(7, 10, 19, 0.98));
}
.performance-tone-purple { --tone: var(--primary); }
.performance-tone-blue { --tone: var(--blue); }
.performance-tone-cyan { --tone: var(--cyan); }
.performance-tone-magenta { --tone: var(--magenta); }
/* v26 uses two distinct tones here: #fb923c (orange, sessions) is NOT #fbbf24 (yellow, planning) — the
   two were incorrectly mapped to the same --warning token before. */
.performance-tone-orange { --tone: #fb923c; }
.performance-tone-amber { --tone: var(--warning); }
.performance-indicator .ds-card-heading { grid-row: 1; color: var(--text-secondary); font-size: 11.5px; font-weight: 650; line-height: 1.2; letter-spacing: .045em; text-transform: uppercase; }
.performance-indicator .performance-icon { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: color-mix(in srgb, var(--tone) 14%, transparent); color: var(--tone); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 18%, transparent); }
/* Row 2 is the only flexible (1fr) row: the primary number centers inside whatever space is actually
   free, instead of drifting toward the top when the card's other content is short. */
[data-performance-kpi-slot="primary"] { grid-row: 2; align-self: center; margin: 0; color: var(--ink); font-size: 24px; font-weight: 760; line-height: 1.1; letter-spacing: -.028em; font-variant-numeric: tabular-nums; }
.performance-kpi-planning { font-size: 15px; line-height: 1.35; }
/* Rows 3 and 4 are fixed-height (auto): secondary and complement (the progress bar, when present) always
   land as the last two rows, flush against the card's bottom edge — never pulled up next to the icon. */
[data-performance-kpi-slot="secondary"] { grid-row: 3; align-self: end; margin: 0; color: var(--text-secondary); font-size: 11.5px; line-height: 1.5; }
[data-performance-kpi-slot="complement"] { grid-row: 4; align-self: end; margin: 0; color: var(--text-secondary); font-size: 11.5px; line-height: 1.5; }
.performance-kpi-substate { color: var(--muted); font-size: 11px; font-weight: 400; }
/* Compact density (no value at all) reads as a dense info block, not a centered number: keep it pinned
   near the top instead of using the flexible middle row. */
.performance-indicator[data-performance-kpi-density="compact"] [data-performance-kpi-slot="primary"] { align-self: start; margin-top: 8px; margin-bottom: 2px; line-height: 1; }
.performance-kpi-compact-state { min-width: 0; font-size: 10px; line-height: 1.2; white-space: nowrap; }
.performance-kpi-compact-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
  gap: 5px;
  margin: 0;
  color: var(--text-secondary);
}
.performance-kpi-compact-facts > div { display: grid; min-width: 0; gap: 1px; }
.performance-kpi-compact-facts dt { overflow: hidden; font-size: 9px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.performance-kpi-compact-facts dd { margin: 0; color: var(--ink); font-size: 10.5px; line-height: 1.2; }
.performance-kpi-progress { width: 100%; height: 6px; align-self: end; }
.performance-accuracy-share .ds-progress-fill { background: var(--cyan); }
.performance-planning-progress .ds-progress-fill { background: var(--warning); }
.performance-session-progress .ds-progress-fill { background: var(--warning); }
.performance-indicator-unavailable { margin-top: 10px; }

.performance-panorama-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--page-gap);
}

.performance-panorama-card {
  display: flex;
  min-width: 0;
  min-height: 260px;
  flex-direction: column;
  gap: 15px;
  padding: 16px 18px;
}
.performance-accuracy-card { min-height: 260px; }
.performance-accuracy-list { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.performance-accuracy-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 40px; align-items: center; gap: 12px; color: var(--ink); font-size: 12.5px; }
.performance-accuracy-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.performance-accuracy-row strong { color: var(--text-secondary); font-size: 12px; font-weight: 520; text-align: right; font-variant-numeric: tabular-nums; }
/* The "X de Y" denominator stays in the DOM for assistive technology; the row is name, bar, percent. */
.performance-accuracy-row small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.performance-accuracy-row .performance-accuracy-bar { grid-column: auto; height: 7px; }
.performance-accuracy-bar i { background: linear-gradient(90deg, var(--primary), var(--magenta)); }
.performance-card-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.performance-card-title h3,
.performance-panorama-card > h3 { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 600; }
.performance-card-title h3 .performance-icon,
.performance-panorama-card > h3 .performance-icon { color: var(--magenta); }
.performance-card-title small { color: var(--text-secondary); font-size: 11px; }

.performance-donut-layout {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  /* start, not center: the list column's height varies with how many rows the current filter/discipline
     set reveals (and whether "Ver todas" is open), and align-items:center re-centered the donut against
     that height — visibly shifting it up or down whenever a quick filter changed the row count. Anchoring
     both columns to the top keeps the donut's position fixed regardless of how tall the list gets. */
  align-items: start;
  gap: 18px;
}
.performance-donut {
  position: relative;
  display: grid;
  width: 150px;
  height: 150px;
  place-items: center;
  justify-self: center;
  border-radius: 50%;
  background: var(--performance-donut);
  box-shadow: 0 0 24px rgba(6, 182, 212, 0.12);
}
.performance-donut::after { content: ""; position: absolute; width: 100px; height: 100px; border-radius: 50%; background: var(--bg); }
.performance-donut > span { position: relative; z-index: 1; display: grid; justify-items: center; gap: 2px; }
.performance-donut strong { font-size: 20px; font-weight: 620; font-variant-numeric: tabular-nums; }
.performance-donut small { color: var(--text-secondary); font-size: 11px; }
.performance-donut-list { display: grid; min-width: 0; gap: 4px; }
.performance-donut-list > div { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 0; }
.performance-donut-list dt { display: flex; min-width: 0; align-items: center; gap: 8px; color: var(--text-secondary); }
.performance-donut-list dt > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.performance-donut-list i,
.performance-discipline-dot { display: inline-block; width: 10px; height: 10px; margin-right: 9px; vertical-align: middle; flex: 0 0 auto; border-radius: 50%; background: var(--item-color); box-shadow: 0 0 9px color-mix(in srgb, var(--item-color) 58%, transparent); }
.performance-donut-list dd { display: grid; grid-template-columns: auto 40px; gap: 9px; margin: 0; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.performance-donut-list dd strong { font-size: 12px; font-weight: 520; }
.performance-donut-list dd span { color: var(--text-secondary); font-size: 11px; }
.performance-distribution-tabs .ds-segmented-option { min-height: 26px; padding-inline: 10px; font-size: 11px; }
.performance-panorama-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; overflow-wrap: anywhere; }
.performance-panorama-list details > ul { display: grid; gap: 7px; margin: 7px 0 0; padding: 0; list-style: none; }
.performance-panorama-list summary { color: var(--text-secondary); cursor: pointer; font-size: 12px; }
.performance-panorama-list-item { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; color: var(--text-secondary); font-size: 12px; }
.performance-panorama-list-item > span:first-child { display: flex; min-width: 0; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.performance-panorama-list-item > span:first-child > i { display: inline-block; width: 8px; height: 8px; flex: 0 0 auto; margin: 0; border-radius: 50%; background: var(--item-color); box-shadow: 0 0 8px color-mix(in srgb, var(--item-color) 55%, transparent); }
.performance-inline-bar { grid-column: 1 / -1; display: block; position: relative; min-width: 0; height: 4px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.performance-inline-bar i { display: block; height: 100%; border-radius: inherit; background: var(--item-color, var(--primary)); }
.performance-inline-bar b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* Progress list: name | short bar | percent, one line per discipline. */
.performance-progress-item { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 40px; gap: 12px; padding: 5px 0; color: var(--ink); }
.performance-progress-item .performance-inline-bar { grid-column: auto; }
.performance-progress-item > span:last-child { color: var(--text-secondary); font-variant-numeric: tabular-nums; text-align: right; }

/* v26 frozen tones from here down: the exact colors/backgrounds/borders of .data-table, .chevron-btn,
   .progress-track, .detail-stat and .subject-close-btn, not the shared ds-* card tones. */
.performance-discipline-card { min-width: 0; overflow: hidden; }
.performance-table-scroll { max-width: 100%; overflow-x: auto; }
.performance-discipline-table { min-width: 760px; font-variant-numeric: tabular-nums; }
/* Child combinators: the topic/subtopic tables nested in the detail row must keep the shared table style.
   height:46px is scoped to the SUMMARY row's own th/td only — applying it to the detail row's single
   colspan cell forced that cell's box to 46px regardless of its (much taller) real content: with
   overflow:visible the content still painted, but the element's own layout height stayed pinned at
   46px, which the card-mode mobile layout (a plain block flow) has no clipping to hide. */
/* rgba(255,255,255,.04) matches v26's own .data-table td exactly, but at that opacity a 1px rule landing
   on the sub-pixel row heights this layout produces anti-aliases unevenly — some rows show a hairline,
   others next to nothing, which reads as a broken/inconsistent divider rather than a uniform one. .07
   keeps the same subtle, neutral intent while staying visible regardless of sub-pixel placement. */
.performance-discipline-table > thead > tr > th,
.performance-discipline-table > tbody > tr.performance-discipline-summary > th,
.performance-discipline-table > tbody > tr.performance-discipline-summary > td { height: 46px; padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, .14); color: #e7e4f2; text-align: left; font-size: 12.5px; font-weight: 400; white-space: nowrap; }
.performance-discipline-table > thead > tr > th { height: 40px; background: rgba(255, 255, 255, .018); color: #a29bb7; font-size: 10px; font-weight: 560; letter-spacing: .025em; text-transform: uppercase; }
/* A real table-cell (not display:flex): a flex th leaves the table's row layout, so its border-bottom stopped a few
   px above the other cells' and the row divider broke at the Tempo column. The dot and name align inline instead. */
.performance-discipline-table > tbody > tr.performance-discipline-summary > th { min-width: 190px; vertical-align: middle; color: var(--ink); font-weight: 700; }
.performance-discipline-table > tbody > tr.performance-discipline-summary > th > span { vertical-align: middle; }
.performance-discipline-table > tbody > tr.performance-discipline-summary:hover { background: rgba(255, 255, 255, .025); }
/* Names read as names, not as column headings (the shared table style uppercases every th). */
.performance-discipline-table tbody th { text-transform: none; letter-spacing: 0; }
.performance-discipline-table > tbody > tr.performance-discipline-summary > td,
.performance-topic-table td,
.performance-topic-table tbody th { vertical-align: middle; }
/* v26 never stretches a progress bar to fill its column — .progress-track is a fixed 110px everywhere,
   main row or topic/subtopic. minmax(0, 150px) mirrors that: bounded, but free to shrink on narrow cards. */
.performance-progress-cell { display: grid; grid-template-columns: minmax(0, 150px) 38px; justify-content: start; align-items: center; gap: 8px; }
.performance-discipline-progress { height: 7px; background: #25283f; }
.performance-discipline-progress .ds-progress-fill { background: linear-gradient(90deg, #8b5cf6, #22d3ee); }
.performance-discipline-detail > td { padding: 0; background: transparent; }
.performance-topic-detail > td { padding: 0; border-bottom: 7px solid transparent; background-clip: padding-box; background: linear-gradient(180deg, rgba(139, 92, 246, .05), rgba(20, 18, 45, .32)); }
/* The subtopic panel of an OPEN topic attaches directly under it: same purple frame on the sides and
   bottom, no top line (the topic box above already closed its own bottom), rounded only at the bottom —
   together they read as one expanded container, not two separate floating boxes. */
.performance-topic-row:has(.performance-discipline-chevron[aria-expanded="true"]) + .performance-topic-detail > td {
  padding-bottom: 8px;
  border-bottom-width: 7px;
  background: rgba(139, 92, 246, .035);
  box-shadow: inset 1px 0 0 rgba(139, 92, 246, .18), inset -1px 0 0 rgba(139, 92, 246, .18), inset 0 -1px 0 rgba(139, 92, 246, .18);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
/* Matches v26's .subject-detail-row.open .inline-detail: the expanded panel reads as one bordered
   purple-tinted card floating inside the row, not a full-bleed gradient with no outline. */
.performance-inline-detail {
  display: grid;
  gap: 12px;
  margin: 8px 10px 12px;
  padding: 15px 16px 16px;
  border: 1px solid rgba(139, 92, 246, .24);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(139, 92, 246, .035), rgba(255, 255, 255, .012));
  box-shadow: 0 0 0 1px rgba(139, 92, 246, .02);
}
.performance-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.performance-detail-head h4 { margin: 0 0 3px; color: var(--ink); font-size: 14.5px; font-weight: 700; }
.performance-detail-head p { margin: 0; color: #9891ad; font-size: 11.5px; }
.performance-detail-close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  padding: 5px 2px;
  border: 0;
  background: transparent;
  color: #b99aff;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.performance-detail-close:hover { color: #d8c8ff; }
.performance-detail-close span { font-size: 14px; font-weight: 500; line-height: 1; }
/* Number first, label after, on one line — matches v26's .detail-stat exactly. */
.performance-inline-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 4px 0; }
.performance-inline-facts div { display: flex; min-width: 0; min-height: 54px; align-items: baseline; gap: 7px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .045); border-radius: 10px; background: rgba(6, 7, 20, .48); }
.performance-inline-facts dt { order: 1; color: #9891ad; font-size: 11px; font-weight: 650; }
.performance-inline-facts dd { order: 0; margin: 0; color: #f2effa; font-size: 18px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.performance-topic-detail .ds-data-table { min-width: 0; }
.performance-residual-row th { color: var(--text-secondary) !important; font-style: italic; }

.performance-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.performance-topics { display: grid; gap: var(--space-2); }
.performance-topics h4 { margin: 0; color: var(--ink); font-size: 13px; font-weight: 600; }
.performance-topic-table,
.performance-topic-detail .ds-data-table { width: 100%; table-layout: fixed; font-variant-numeric: tabular-nums; }
/* v26's .topic-item: each topic reads as its own bordered, rounded card in the list, tinted purple while
   its subtopics are open — not a plain table row with no visual separation at all. The visible outline is
   drawn with an inset box-shadow (not a real border), which never occupies layout space; a real, fully
   transparent border-bottom does that job instead, purely as spacing. Decoupling the two lets an OPEN
   topic drop its spacer and bottom line so its box sits flush against its own subtopic panel below,
   reading as one continuous, expanded container instead of two disconnected floating pieces. */
.performance-topic-table { border-collapse: separate; border-spacing: 0; }
.performance-topic-row > th,
.performance-topic-row > td {
  padding: 9px 10px;
  border-bottom: 7px solid transparent;
  background: rgba(255, 255, 255, .018);
  background-clip: padding-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), inset 0 -1px 0 rgba(255, 255, 255, .055);
}
.performance-topic-row > th:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .055), inset 0 -1px 0 rgba(255, 255, 255, .055); }
.performance-topic-row > td:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; box-shadow: inset -1px 1px 0 rgba(255, 255, 255, .055), inset 0 -1px 0 rgba(255, 255, 255, .055); }
.performance-topic-row:has(.performance-discipline-chevron[aria-expanded="true"]) > th,
.performance-topic-row:has(.performance-discipline-chevron[aria-expanded="true"]) > td {
  border-bottom-width: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: rgba(139, 92, 246, .035);
  box-shadow: inset 0 1px 0 rgba(139, 92, 246, .18);
}
.performance-topic-row:has(.performance-discipline-chevron[aria-expanded="true"]) > th:first-child { box-shadow: inset 1px 1px 0 rgba(139, 92, 246, .18); }
.performance-topic-row:has(.performance-discipline-chevron[aria-expanded="true"]) > td:last-child { box-shadow: inset -1px 1px 0 rgba(139, 92, 246, .18); }
/* Same column geometry in the preview table, the "more" table and the nested subtopic table:
   Tópico | Questões | Taxa de acerto | Progresso no edital | (chevron, topics only). */
.performance-topic-table th:first-child,
.performance-topic-table td:first-child,
.performance-topic-detail .ds-data-table th:first-child { width: 34%; text-align: left; }
.performance-topic-table th:nth-child(2),
.performance-topic-table td:nth-child(2),
.performance-topic-detail .ds-data-table th:nth-child(2),
.performance-topic-detail .ds-data-table td:nth-child(2) { width: 14%; }
.performance-topic-table th:nth-child(3),
.performance-topic-table td:nth-child(3),
.performance-topic-detail .ds-data-table th:nth-child(3),
.performance-topic-detail .ds-data-table td:nth-child(3) { width: 18%; }
.performance-topic-table tbody th { color: var(--ink); }
.performance-topic-detail caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.performance-topic-table .performance-topic-action { width: 132px; text-align: right; }
.performance-topic-table .ds-action-button { min-height: 28px; padding: 4px 12px; font-size: 11.5px; }
/* The bar takes the discipline's own color here (set via --topic-color inline), not the generic gradient. */
.performance-topic-progress.ds-progress-track { background: #25263e; }
.performance-topic-progress .ds-progress-fill { background: var(--topic-color, var(--primary)); }

/* Matches v26's .subtopic-inner exactly: the whole subtopic list sits behind ONE dotted purple rule as
   a single indented unit, rather than repeating a dotted mark on every row — plus a dimmer, subtly
   darker row background, the contrast/indent cue the topic rows themselves don't carry. */
.performance-topic-detail .performance-table-scroll { margin-left: 14px; padding-left: 12px; border-left: 1px dotted rgba(139, 92, 246, .3); }
.performance-subtopic-table { background: rgba(6, 7, 20, .22); }
.performance-subtopic-row > th,
.performance-subtopic-row > td { padding-top: 8px; padding-bottom: 8px; border-bottom-color: rgba(255, 255, 255, .03); background: rgba(6, 7, 20, .22); }
.performance-subtopic-row > th { color: #bbb5ce; font-weight: 650; }
.performance-subtopic-row > td { color: #9891ad; font-size: 11.5px; }
.performance-residual-row.performance-subtopic-row > th { font-style: italic; }
/* Plain block, state-driven by expandedTopicGroups (not a native <details>): the extra rows and the
   toggle button are both always in the DOM, so the button sits after them and opening never has to
   relocate it, and the open/closed state survives any re-render — a bare <details open> would not. */
.performance-topic-more { display: block; }
/* Matches v26's .more-topics: a small centered pill under the topic list. */
.performance-topic-more-toggle {
  display: block;
  width: fit-content;
  margin: 9px auto 0;
  padding: 7px 11px;
  border: 1px solid rgba(139, 92, 246, .18);
  border-radius: 8px;
  background: rgba(139, 92, 246, .055);
  color: #bda3ff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}
.performance-topic-more-toggle:hover { background: rgba(139, 92, 246, .095); }

.performance-evolution { align-content: start; }
.performance-evolution > h2 { font-size: 18px; }
.performance-evolution > p { color: var(--text-secondary); font-size: 12px; }
.performance-evolution-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
/* v26's .compare-card tones exactly: icon+label, prev → current flow, neutral delta line. */
.performance-evolution-metric { display: block; min-width: 0; min-height: 108px; padding: 14px 16px 13px; overflow: hidden; }
.performance-compare-label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: #cfc9df; font-size: 11.5px; font-weight: 700; line-height: 1.25; }
.performance-compare-label .performance-icon { width: 15px; height: 15px; flex: 0 0 auto; padding: 0; background: none; box-shadow: none; color: #b99aff; }
.performance-compare-flow { display: flex; min-width: 0; align-items: baseline; gap: 9px; font-variant-numeric: tabular-nums; }
.performance-compare-prev { overflow: hidden; color: #79728f; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.performance-compare-arrow { color: #706988; font-size: 12px; }
.performance-compare-current { overflow: hidden; color: #f7f5ff; font-size: 20px; font-weight: 800; line-height: 1; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.performance-compare-denominator { color: var(--muted); font-size: 10.5px; }
.performance-neutral-delta { display: block; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .055); color: #b7afd0; font-size: 10.5px; }
.performance-compare-unavailable .performance-compare-current { overflow: visible; font-size: 14px; line-height: 1.3; color: #d9d4e7; white-space: normal; }
.performance-compare-unavailable .performance-neutral-delta { color: #8f88a6; }
.performance-compare-unavailable .performance-compare-flow:empty { display: none; }

.performance-series-current { color: var(--primary); fill: currentColor; stroke: currentColor; }
.performance-page :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* V26 keeps filters local to this surface: anchored on desktop, modal-sheet on mobile. */
.performance-filter-anchor { position: relative; }
.performance-filter-trigger { display: inline-flex; align-items: center; gap: 7px; }
.performance-filter-trigger b { display: grid; min-width: 18px; min-height: 18px; place-items: center; border-radius: 999px; background: var(--primary); color: var(--ink); font-size: 10px; }
.performance-filter-backdrop { position: fixed; z-index: 48; inset: 0; background: rgba(2, 6, 23, .58); }
.performance-filter-popover { position: absolute; z-index: 49; top: calc(100% + 8px); right: 0; display: grid; width: min(620px, calc(100vw - 32px)); gap: 16px; padding: 18px; border-color: rgba(139, 92, 246, .48); box-shadow: var(--shadow); }
.performance-filter-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.performance-filter-head strong { display: block; color: var(--ink); font-size: 15px; }
.performance-filter-head span { display: block; margin-top: 3px; color: var(--text-secondary); font-size: 12px; }
.performance-filter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.performance-filter-grid label { display: grid; gap: 5px; color: var(--text-secondary); font-size: 11px; }
.performance-filter-actions { display: flex; justify-content: flex-end; gap: 8px; }
.performance-filter-actions .primary { border-color: var(--primary); background: var(--primary); color: var(--ink); }

@media (max-width: 1050px) {
  .performance-donut-layout { grid-template-columns: 132px minmax(0, 1fr); }
  .performance-donut { width: 132px; height: 132px; }
  .performance-donut::after { width: 82px; height: 82px; }
}

@media (max-width: 840px) {
  .performance-number-heading { align-items: stretch; flex-direction: column; }
  .performance-controls { justify-content: space-between; }
  .performance-period-tabs { align-self: flex-start; max-width: 100%; overflow-x: auto; }
  .performance-panorama-grid { grid-template-columns: minmax(0, 1fr); }
  .performance-filter-popover { position: fixed; right: 16px; bottom: 16px; left: 16px; top: auto; width: auto; max-height: calc(100dvh - 32px); overflow: auto; }
}

@media (max-width: 760px) {
  .performance-panorama-grid { grid-template-columns: 1fr; }
  .performance-panorama-card { min-height: 0; }
  .performance-panorama-list-item { grid-template-columns: minmax(0, 1fr) auto; }
  .performance-panorama-list-item:not(.performance-distribution-row) > span:last-of-type { grid-column: 2; grid-row: 1; }
  /* Distribution rows are name | value | share (v26: minmax(0,1fr) 44px 36px). Their only <span> is the name, so the
     rule above would push it into the value column and truncate it to a few letters. */
  .performance-distribution-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  /* The legend column is only ~200px next to the donut: let long discipline names wrap instead of ellipsizing. */
  .performance-distribution-row > span:first-child { align-items: flex-start; overflow: visible; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
  .performance-distribution-row > span:first-child > i { margin-top: 4px; }
}

@media (max-width: 620px) {
  .performance-line-heading { align-items: flex-start; flex-wrap: wrap; }
  .performance-line-heading small { width: 100%; margin-left: 44px; }
  /* Períodos rápidos e botão de filtros na mesma linha (a coluna deixava o botão sozinho numa linha). Se os períodos não
     couberem, eles rolam na horizontal e o botão continua visível. */
  .performance-controls.performance-controls { align-items: center; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; gap: 8px; }
  .performance-controls .performance-period-tabs { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .performance-controls .performance-period-tabs .ds-segmented-option { padding-inline: 8px; font-size: 12px; }
  .performance-controls .performance-filter-anchor { flex: 0 0 auto; }
  .performance-filter-grid { grid-template-columns: 1fr; }
  .performance-filter-actions { position: sticky; bottom: 0; padding-top: 8px; background: var(--panel); }
  .performance-accuracy-row { grid-template-columns: minmax(100px, 1fr) minmax(76px, 1fr) auto; gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .performance-page *,
  .performance-page *::before,
  .performance-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* V26 composition: stable zones, factual depth on demand, no legacy canvas. */

/* This one card is genuinely 2D (title on top, then a stats-pair beside the donut), so it keeps its own
   grid instead of the flex column the other five cards use. */
.performance-indicator[data-performance-indicator="sessions"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px;
  grid-template-rows: auto 1fr;
  row-gap: 0;
}
.performance-indicator[data-performance-indicator="sessions"][data-performance-kpi-density="compact"] { grid-template-columns: minmax(0, 1fr); }
.performance-indicator[data-performance-indicator="sessions"] .ds-card-heading { grid-column: 1 / -1; }
.performance-session-summary { display: flex; grid-column: 1; grid-row: 2; align-self: center; gap: 18px; }
.performance-session-stat { display: flex; flex-direction: column; gap: 4px; }
.performance-session-stat > span { color: var(--muted); font-size: 10.5px; font-weight: 650; }
.performance-session-stat > strong { color: var(--ink); font-size: 22px; font-weight: 760; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.performance-session-stat-missed > strong { color: #fb923c; }
.performance-session-donut {
  --performance-session-completion: 0;
  grid-column: 2;
  grid-row: 2;
  display: grid;
  align-self: center;
  justify-self: end;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#fb923c calc(var(--performance-session-completion) * 1%), rgba(255,255,255,.1) 0);
}
.performance-session-donut::before { content: ""; position: absolute; width: 43px; height: 43px; border-radius: 50%; background: var(--panel); }
.performance-session-donut { position: relative; }
.performance-session-donut > span { position: relative; z-index: 1; display: grid; place-items: center; line-height: 1; }
.performance-session-donut strong { font-size: 11px; font-variant-numeric: tabular-nums; }
.performance-session-donut small { margin-top: 2px; color: var(--text-secondary); font-size: 8px; }
.performance-session-donut-unavailable { background: rgba(255,255,255,.08); color: var(--muted); }

.performance-panorama-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.performance-number-grid,
.performance-panorama-grid,
.performance-controls,
.performance-filter-anchor { min-width: 0; width: 100%; }
.performance-filter-anchor { width: auto; flex: 0 0 auto; }
.performance-number-heading { justify-content: space-between; }
.performance-number-heading > div:first-child { flex: 0 0 auto; }
.performance-number-heading h2 { white-space: nowrap; }
.performance-controls { width: auto; flex: 0 1 auto; justify-content: flex-end; }
.performance-now,
.performance-indicators,
.performance-panorama,
.performance-discipline-section,
.performance-evolution { grid-template-columns: minmax(0, 1fr); }
.performance-panorama-card,
.performance-accuracy-card { min-height: 0; }
/* Matches v26's .disclosure: a full-width pill pinned to the card's bottom via margin-top:auto on the
   whole wrapper (the card itself is a column flex container — see .performance-panorama-card). */
.performance-panorama-disclosure { display: contents; }
.performance-panorama-disclosure > ul { margin: 10px 0 0; }
/* The distribution card nests its disclosure inside the donut+list grid (so the revealed rows land right
   after the visible ones), unlike edital/accuracy, which append theirs below the whole card. display:
   contents would otherwise hand the disclosure's children to the GRID for placement, which auto-flows
   the revealed <ul> under the donut column instead of under the list — pinning it to column 2 as one
   normal block keeps the extra rows aligned under the visible ones instead of drifting to the card edge. */
.performance-donut-layout .performance-panorama-disclosure { display: block; grid-column: 2; }
.performance-panorama-more-toggle {
  width: 100%;
  margin-top: auto;
  padding: 8px 10px;
  border: 1px solid rgba(139, 92, 246, .16);
  border-radius: var(--radius-md);
  background: rgba(139, 92, 246, .055);
  color: #bda3ff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  transition: background-color .14s ease-out;
}
.performance-panorama-more-toggle:hover { background: rgba(139, 92, 246, .095); }
.performance-distribution-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
/* Dots only, no bars: name | value | percent — matches v26's .legend-row.distribution-row exactly. */
.performance-distribution-row { display: grid; grid-template-columns: minmax(0, 1fr) 58px 44px; align-items: center; gap: 10px; min-height: 31px; padding: 3px 0; font-size: 12px; }
.performance-distribution-row > span:first-child { display: flex; min-width: 0; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.performance-distribution-row > span:first-child > i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--item-color); box-shadow: 0 0 8px color-mix(in srgb, var(--item-color) 46%, transparent); }
.performance-distribution-row strong { color: var(--ink); font-size: 11.5px; font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.performance-distribution-row em { color: var(--text-secondary); font-size: 11px; font-style: normal; text-align: right; white-space: nowrap; }
.performance-accuracy-bar i { background: var(--primary); }
/* The leading dot reuses the same disciplineId → color mapping as the other two Panorama cards, so
   the name column starts at the same x and a discipline reads as one consistent color everywhere. */
.performance-accuracy-row > span:first-child { display: flex; min-width: 0; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.performance-accuracy-row > span:first-child > i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--item-color); box-shadow: 0 0 8px color-mix(in srgb, var(--item-color) 46%, transparent); }

.performance-discipline-table { min-width: 720px; }
/* Two-word headers ("Sessões perdidas", "Taxa de acerto") may wrap so the extra column does not widen the table. */
.performance-discipline-table > thead > tr > th { white-space: normal; line-height: 1.25; }
.performance-discipline-table > tbody > tr > th { min-width: 175px; }
/* v26's .chevron-btn: a transparent, rounded-square icon button (not a bordered circle). */
.performance-discipline-chevron {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #b8b1cf;
  cursor: pointer;
  transition: transform .17s ease-out, color .14s ease-out, background-color .14s ease-out;
}
.performance-discipline-chevron:hover { background: rgba(139, 92, 246, .12); color: #fff; }
/* Row toggles follow the app-wide convention (v26 "directional chevrons"): closed points right, expanded points down,
   never up. The glyph is drawn pointing down, so the closed state rotates it a quarter turn and the button itself
   stays put. */
/* The chevron is a masked shape, not the "⌄" text glyph: the glyph sits low inside its own font box, so it never
   looked centered in the square. A fixed-size box centered by the button's grid has no such offset. */
.performance-discipline-chevron > span {
  display: block;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(-90deg);
  transition: transform .28s cubic-bezier(.2, .72, .2, 1);
}
.performance-discipline-chevron[aria-expanded="true"] > span { transform: rotate(0deg); }
/* v26's .chevron-btn.active: a diagonal purple gradient with a soft glow, not a flat tint. */
.performance-discipline-chevron[aria-expanded="true"] {
  background: linear-gradient(135deg, rgba(139, 92, 246, .64), rgba(99, 62, 199, .52));
  color: #fff;
  box-shadow: 0 0 14px rgba(139, 92, 246, .15), inset 0 0 0 1px rgba(255, 255, 255, .045);
}
.performance-topic-action .performance-discipline-chevron { width: 34px; height: 34px; }
.performance-discipline-disclosure { width: 48px; }
.performance-discipline-summary > td:nth-child(6) { font-variant-numeric: tabular-nums; }
/* Lost sessions: a warm tone only when there is something to scan for, the same orange as the Sessões KPI. */
.performance-discipline-table > tbody > tr.performance-discipline-summary > td.has-lost { color: #fb923c; font-weight: 650; }
html[data-theme="light"] .performance-discipline-table > tbody > tr.performance-discipline-summary > td.has-lost { color: #c2560c; }

.performance-evolution { gap: var(--space-4); }
/* Matches v26's .evo-header: two colored-dot period chips, then a copy line filling the rest. */
.performance-evolution-periods {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  padding: 16px 20px;
}
.performance-period-inline { display: flex; min-width: 210px; align-items: center; gap: 9px; }
.performance-period-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 3px; background: #77739a; }
.performance-period-current .performance-period-dot { background: #a855f7; box-shadow: 0 0 11px rgba(168, 85, 247, .32); }
.performance-period-inline span { display: block; color: #817a9d; font-size: 10.5px; }
.performance-period-inline strong { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.performance-period-compare-copy { justify-self: end; margin: 0; color: #817a9d; font-size: 11.5px; text-align: right; }
.performance-evolution-chart { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: var(--space-3); padding: 18px; }
.performance-evolution-chart > * { min-width: 0; }
.performance-chart-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.performance-chart-toolbar h3 { font-size: 16px; }
.performance-chart-toolbar p { margin-top: 3px; color: var(--text-secondary); font-size: 11px; }
.performance-evolution-metric-tabs .ds-segmented-option { min-height: 30px; padding-inline: 10px; font-size: 11px; }
.performance-evolution-metric-tabs .ds-segmented-option:disabled { opacity: .58; cursor: not-allowed; }
/* HTML bar chart: text keeps its real size at any width (an SVG viewBox would scale labels with the card). */
.performance-evolution-series { --series-previous: #646183; --series-current: #8b5cf6; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; height: 250px; padding-top: 22px; }
.performance-chart-axis { position: relative; margin-bottom: 26px; }
.performance-chart-axis span { position: absolute; right: 0; bottom: calc(var(--tick) * 100%); transform: translateY(50%); color: var(--text-secondary); font-size: 11px; font-variant-numeric: tabular-nums; }
.performance-chart-plot { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); min-width: 0; }
.performance-chart-grid { position: absolute; inset: 0 0 26px; pointer-events: none; }
.performance-chart-grid i { position: absolute; right: 0; bottom: calc(var(--tick) * 100%); left: 0; border-top: 1px solid rgba(139, 92, 246, .14); }
.performance-chart-group { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) 26px; min-width: 0; }
.performance-chart-bars { display: flex; align-items: flex-end; justify-content: center; gap: 6px; min-height: 0; }
.performance-chart-bar { position: relative; width: min(34px, 32%); height: var(--bar-height); min-height: 2px; border-radius: 6px 6px 2px 2px; }
.performance-chart-bar b { position: absolute; bottom: 100%; left: 50%; padding-bottom: 3px; transform: translateX(-50%); color: var(--text-secondary); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.performance-chart-bar.performance-series-current b { color: var(--ink); }
.performance-chart-label { align-self: end; color: var(--text-secondary); font-size: 11px; text-align: center; white-space: nowrap; }
.performance-chart-bar.performance-series-previous { background: var(--series-previous); }
.performance-chart-bar.performance-series-current { background: linear-gradient(180deg, #8b5cf6, #6d4cf3); }
.performance-evolution-legend { display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted); font-size: 10.5px; }
.performance-evolution-legend span { display: inline-flex; align-items: center; gap: 6px; }
.performance-evolution-legend i { width: 8px; height: 8px; border-radius: 3px; }
.performance-evolution-legend .performance-series-previous { background: #646183; }
.performance-evolution-legend .performance-series-current { background: #8b5cf6; }
.performance-evolution-discipline { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.performance-evolution-discipline > * { min-width: 0; }
.performance-evolution-discipline-table { min-width: 640px; font-variant-numeric: tabular-nums; }
.performance-evolution-discipline-table tbody th { display: flex; align-items: center; gap: 8px; color: var(--ink); text-align: left; text-transform: none; letter-spacing: 0; }
.performance-evolution-discipline-table th,
.performance-evolution-discipline-table td { text-align: left; }
.performance-evolution-discipline .performance-line-heading p { margin-top: 2px; color: var(--text-secondary); font-size: 12px; }
.performance-evolution > .performance-line-heading p { margin-top: 2px; color: var(--text-secondary); font-size: 12px; }
.performance-evolution-chart .performance-table-disclosure { order: 2; }
/* Was an unstyled bare <details>/<summary> — visually indistinguishable from plain text, easy to miss
   as a control. Same pill treatment as the other "show more" toggles in this module. */
.performance-table-disclosure > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--primary);
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
  list-style: none;
}
.performance-table-disclosure > summary::-webkit-details-marker { display: none; }
/* Masked shape, not the "⌄" text glyph — see the .performance-cp-details summary comment above. */
.performance-table-disclosure > summary::after {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.performance-table-disclosure > summary::after { transform: rotate(-90deg); transition: transform .2s ease; }
.performance-table-disclosure[open] > summary::after { transform: rotate(0deg); }
.performance-table-disclosure > summary:hover { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.performance-table-disclosure > .performance-table-scroll { margin-top: 10px; }

@media (max-width: 1280px) {
  .performance-number-heading { align-items: flex-end; }
  .performance-explanation { grid-template-columns: minmax(0, 1.45fr) minmax(225px, .75fr); }
  .performance-hero-story { grid-column: 1; }
  .performance-hero-moment { grid-column: 2; }
  .performance-hero-cp {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-content: start;
    padding: 14px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .075);
    border-left: 0;
  }
  .performance-number-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .performance-evolution-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .performance-panorama-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .performance-panorama-card:last-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .performance-explanation { grid-template-columns: 1fr; }
  .performance-hero-story,
  .performance-hero-moment,
  .performance-hero-cp { grid-column: auto; grid-row: auto; }
  .performance-hero-moment,
  .performance-hero-cp {
    padding: 14px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .075);
    border-left: 0;
  }
  /* Declared after the 1280px rule on purpose: same specificity, so order decides and one column must win here. */
  .performance-number-heading { align-items: stretch; flex-direction: column; }
  .performance-controls { justify-content: space-between; flex-wrap: wrap; }
  .performance-panorama-grid { grid-template-columns: minmax(0, 1fr); }
  .performance-panorama-card:last-child { grid-column: auto; }
  .performance-evolution-periods { grid-template-columns: 1fr 1fr; gap: 12px; }
  .performance-period-compare-copy { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .performance-chart-toolbar { align-items: stretch; flex-direction: column; }
  .performance-evolution-metric-tabs { max-width: 100%; overflow-x: auto; }
  .performance-evolution-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .performance-chart-label { font-size: 9.5px; white-space: normal; line-height: 1.1; }
  .performance-discipline-table,
  .performance-evolution-discipline-table { min-width: 0; }
  /* Card mode. Child combinators keep the nested topic tables (inside the detail row) as real tables. */
  .performance-discipline-table > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .performance-discipline-table,
  .performance-discipline-table > tbody,
  .performance-discipline-table > tbody > tr,
  .performance-discipline-table > tbody > tr > th,
  .performance-discipline-table > tbody > tr > td { display: block; width: 100%; }
  /* The open discipline's detail always renders as the last row of the table, whichever row was clicked. */
  .performance-discipline-table > tbody { display: flex; flex-direction: column; }
  .performance-discipline-table > tbody > .performance-discipline-summary { order: 0; }
  .performance-discipline-table > tbody > .performance-discipline-detail { order: 1; }
  /* v26's compact mobile row: two lines and the toggle beside them.
       line 1: discipline · accuracy · lost sessions      line 2: time · questions · edital progress */
  .performance-discipline-table > tbody > .performance-discipline-summary {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, .82fr) minmax(0, 1fr) 40px;
    grid-template-areas:
      "subject rate missed action"
      "time questions progress action";
    column-gap: 12px;
    row-gap: 10px;
    padding: 12px 10px;
    border-bottom: 1px solid rgba(139,92,246,.16);
  }
  /* Repeat the desktop selector's tr.performance-discipline-summary so this beats its per-cell border-bottom. */
  .performance-discipline-table > tbody > tr.performance-discipline-summary > th,
  .performance-discipline-table > tbody > tr.performance-discipline-summary > td { height: auto; min-width: 0; padding: 0; border: 0; text-align: left; white-space: normal; }
  /* Hanging layout: when the name wraps, the second line aligns with the first line's text, never under the dot. */
  .performance-discipline-table > tbody > .performance-discipline-summary > th { grid-area: subject; display: flex; align-items: flex-start; gap: 9px; }
  .performance-discipline-table > tbody > .performance-discipline-summary > th > .performance-discipline-dot { flex: 0 0 auto; margin: 4px 0 0; }
  .performance-discipline-table > tbody > .performance-discipline-summary > th > span { flex: 1 1 auto; min-width: 0; }
  .performance-discipline-table > tbody > .performance-discipline-summary > td:nth-child(2) { grid-area: time; }
  .performance-discipline-table > tbody > .performance-discipline-summary > td:nth-child(3) { grid-area: questions; }
  .performance-discipline-table > tbody > .performance-discipline-summary > td:nth-child(4) { grid-area: rate; }
  .performance-discipline-table > tbody > .performance-discipline-summary > td:nth-child(5) { grid-area: missed; }
  .performance-discipline-table > tbody > .performance-discipline-summary > td:nth-child(6) { grid-area: progress; }
  /* Short labels (Taxa, Perdidas, Progresso) keep each label on one line so the compact row stays two lines tall;
     the full label stays in the attribute for the desktop table and for assistive text. */
  .performance-discipline-table > tbody > .performance-discipline-summary > td::before { content: attr(data-performance-short-label); display: block; margin-bottom: 2px; color: var(--muted); font-size: 10px; text-transform: uppercase; white-space: nowrap; }
  .performance-discipline-table > tbody > .performance-discipline-summary > .performance-discipline-disclosure { grid-area: action; align-self: center; justify-self: end; width: auto; }
  .performance-discipline-table > tbody > .performance-discipline-summary > .performance-discipline-disclosure::before { content: none; }
  .performance-discipline-table > tbody > .performance-discipline-detail > td { padding: 0; }
  .performance-discipline-table .performance-inline-detail { padding: 12px; }
  .performance-topic-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .performance-topic-table,
  .performance-topic-table tbody { display: block; width: 100%; }
  .performance-topic-table .performance-topic-row,
  .performance-topic-table .performance-subtopic-row { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid rgba(139, 92, 246, .13); }
  /* box-shadow: none: desktop cells draw their pill outline with inset shadows, which show as stray lines once the row is a grid. */
  .performance-topic-table .performance-topic-row > th,
  .performance-topic-table .performance-subtopic-row > th { grid-column: 1 / -1; width: auto; padding: 0; border: 0; background: none; border-radius: 0; box-shadow: none; }
  /* The desktop column widths (.performance-topic-detail .ds-data-table td:nth-child(n) { width: 14% … }) outrank the
     rules above and squeezed subtopic cells to ~20px; grid tracks size them here, so the width must be auto. */
  .performance-topic-detail .ds-data-table .performance-subtopic-row > th,
  .performance-topic-detail .ds-data-table .performance-subtopic-row > td { width: auto; }
  /* Only topic rows carry the toggle, so only they reserve room for it beside the name. */
  .performance-topic-table .performance-topic-row > th { padding-right: 44px; }
  /* The expanded-topic outline (inset shadows on the desktop cells) would draw half a frame around the grid row. */
  .performance-topic-table .performance-topic-row:has(.performance-discipline-chevron[aria-expanded="true"]) > th,
  .performance-topic-table .performance-topic-row:has(.performance-discipline-chevron[aria-expanded="true"]) > td { background: none; box-shadow: none; }
  /* Light theme re-adds a per-cell tint and inset lines with a more specific selector; repeat the reset for it. */
  html[data-theme="light"] .performance-topic-table .performance-topic-row > th,
  html[data-theme="light"] .performance-topic-table .performance-topic-row > td,
  html[data-theme="light"] .performance-topic-table .performance-topic-row > th:first-child,
  html[data-theme="light"] .performance-topic-table .performance-topic-row > td:last-child,
  html[data-theme="light"] .performance-topic-table .performance-subtopic-row > th,
  html[data-theme="light"] .performance-topic-table .performance-subtopic-row > td { background: none; box-shadow: none; }
  .performance-topic-table .performance-topic-row > td,
  .performance-topic-table .performance-subtopic-row > td { width: auto; padding: 2px 0; border: 0; background: none; border-radius: 0; box-shadow: none; }
  .performance-topic-table .performance-topic-row > td[data-performance-cell-label]::before,
  .performance-topic-table .performance-subtopic-row > td[data-performance-cell-label]::before { content: attr(data-performance-cell-label); display: block; margin-bottom: 2px; color: var(--muted); font-size: 10px; text-transform: uppercase; }
  /* Toggle sits top-right beside the topic name (like the discipline card) instead of on a row of its own, where it read as a stray glyph. */
  .performance-topic-table .performance-topic-row > .performance-topic-action { position: absolute; top: 4px; right: 0; grid-column: auto; width: auto; padding: 0; text-align: right; }
  .performance-discipline-chevron { width: 36px; height: 36px; border: 1px solid rgba(139, 92, 246, .3); background: rgba(139, 92, 246, .08); }
  .performance-discipline-chevron > span { width: 14px; height: 14px; }
  /* The container-level dotted rule (.performance-topic-detail .performance-table-scroll) already
     indents the whole subtopic list at every viewport width, matching v26 — no extra per-row rule needed. */
  .performance-topic-detail .performance-table-scroll { margin-left: 10px; padding-left: 9px; border-left-color: rgba(139, 92, 246, .14); }
}

@media (max-width: 620px) {
  .performance-number-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .performance-explanation { gap: 14px; padding: 16px; }
  .performance-cp-main { grid-template-columns: 86px minmax(0, 1fr); }
  .performance-hero-cp .performance-cp-ring { width: 86px; height: 86px; }
  .performance-evolution-periods { grid-template-columns: 1fr; gap: 10px; padding: 13px 14px; }
  .performance-period-inline { min-width: 0; }
  .performance-period-compare-copy { grid-column: auto; }
}

/* Evolution discipline comparison becomes stacked cards on phones (v26: evo-subject-row). Cell labels are CSS-only on
   purpose: the presenter renders bare <td>s (its tests pin that markup) and the header row is hidden in card mode. */
@media (max-width: 620px) {
  .performance-evolution-discipline-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .performance-evolution-discipline-table,
  .performance-evolution-discipline-table > tbody { display: block; width: 100%; }
  .performance-evolution-discipline-table > tbody > tr {
    display: grid;
    grid-template-columns: 1.45fr 1fr 1fr;
    grid-template-areas: "subject subject subject" "prevq currq progress" "prevr currate progress";
    gap: 8px 10px;
    padding: 11px 10px;
    border-bottom: 1px solid rgba(139, 92, 246, .16);
  }
  .performance-evolution-discipline-table > tbody > tr > th,
  .performance-evolution-discipline-table > tbody > tr > td { min-width: 0; padding: 0; border: 0; font-size: 11.5px; }
  .performance-evolution-discipline-table > tbody > tr > th { grid-area: subject; }
  .performance-evolution-discipline-table > tbody > tr > td { display: block; }
  .performance-evolution-discipline-table > tbody > tr > td::before { display: block; margin-bottom: 2px; color: var(--muted); font-size: 10px; text-transform: uppercase; }
  .performance-evolution-discipline-table > tbody > tr > td:nth-child(2) { grid-area: prevq; }
  .performance-evolution-discipline-table > tbody > tr > td:nth-child(2)::before { content: "Questões anteriores"; }
  .performance-evolution-discipline-table > tbody > tr > td:nth-child(3) { grid-area: currq; }
  .performance-evolution-discipline-table > tbody > tr > td:nth-child(3)::before { content: "Questões atuais"; }
  .performance-evolution-discipline-table > tbody > tr > td:nth-child(4) { grid-area: prevr; }
  .performance-evolution-discipline-table > tbody > tr > td:nth-child(4)::before { content: "Taxa anterior"; }
  .performance-evolution-discipline-table > tbody > tr > td:nth-child(5) { grid-area: currate; }
  .performance-evolution-discipline-table > tbody > tr > td:nth-child(5)::before { content: "Taxa atual"; }
  .performance-evolution-discipline-table > tbody > tr > td:nth-child(6) { grid-area: progress; text-align: right; }
  .performance-evolution-discipline-table > tbody > tr > td:nth-child(6)::before { content: "Progresso no edital"; }
  .performance-evolution-discipline-table .performance-progress-cell { grid-template-columns: minmax(0, 1fr); justify-items: end; gap: 5px; }
  .performance-evolution-discipline-table .performance-progress-cell > :first-child { width: 100%; }
}

/* v26 frozen keeps donut and legend side by side on phones (132px, then 124px/116px at 390px) instead of stacking. */
@media (max-width: 390px) {
  .performance-donut-layout { grid-template-columns: 124px minmax(0, 1fr); gap: 10px; }
  .performance-donut { width: 116px; height: 116px; }
  .performance-donut::after { width: 72px; height: 72px; }
}

/* Narrow charts: labels would collide, so bar values keep only the current period (all values stay in the table and tooltip). */
@media (max-width: 620px) {
  .performance-chart-bar.performance-series-previous b { display: none; }
  .performance-chart-bar b { font-size: 9.5px; }
  .performance-chart-label { overflow-wrap: anywhere; font-size: 9px; }
  .performance-chart-group { grid-template-rows: minmax(0, 1fr) 24px; }
}

@media (max-width: 520px) {
  .performance-indicator[data-performance-indicator="sessions"] { grid-template-columns: minmax(0, 1fr) 54px; }
  .performance-session-donut { width: 52px; height: 52px; }
  .performance-session-donut::before { width: 39px; height: 39px; }
  /* Two-column compare cards are ~170px wide: let "prev → current (n/d)" wrap instead of ellipsizing the value. */
  .performance-compare-flow { flex-wrap: wrap; row-gap: 2px; }
  .performance-compare-prev,
  .performance-compare-current { overflow: visible; text-overflow: clip; }
}

/* ==========================================================================
   Tema claro — Desempenho
   Escopado em html[data-theme="light"]; o tema escuro não é afetado. Só cor.
   Valores portados do tema claro do protótipo frozen (estuda-ai-desempenho-v26-frozen.html) onde ele define um.
   ========================================================================== */
html[data-theme="light"] .performance-explanation {
  border-color: rgba(139, 92, 246, 0.16);
  background:
    radial-gradient(520px 200px at 7% 0%, rgba(139, 92, 246, .075), transparent 72%),
    linear-gradient(145deg, #fff, #f7f4fc);
}
html[data-theme="light"] .performance-story-kicker { color: var(--primary); }
html[data-theme="light"] .performance-hero-moment,
html[data-theme="light"] .performance-hero-cp { border-color: rgba(63, 48, 91, .10); }
html[data-theme="light"] .performance-cp-ring .ring-track { stroke: #e3dfe9; }
html[data-theme="light"] .hero-inline-box { border-color: rgba(68, 51, 96, .085); background: rgba(112, 90, 153, .035); }
html[data-theme="light"] .performance-moment strong { color: #176b53; }

/* Cartões de indicador */
html[data-theme="light"] .performance-indicator {
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--tone) 10%, transparent), transparent 42%),
    linear-gradient(145deg, var(--card-1), var(--card-2));
}
html[data-theme="light"] .performance-tone-orange { --tone: #ea580c; }
html[data-theme="light"] .performance-inline-bar { background: #e9e5ef; }
html[data-theme="light"] .performance-donut { box-shadow: inset 0 0 20px rgba(90, 74, 119, .035); }
html[data-theme="light"] .performance-session-stat-missed > strong { color: #ea580c; }
html[data-theme="light"] .performance-session-donut { background: conic-gradient(#ea580c calc(var(--performance-session-completion) * 1%), #e9e5ef 0); }
html[data-theme="light"] .performance-session-donut-unavailable { background: #e9e5ef; }

/* Tabela por disciplina e detalhes */
html[data-theme="light"] .performance-discipline-table > thead > tr > th,
html[data-theme="light"] .performance-discipline-table > tbody > tr.performance-discipline-summary > th,
html[data-theme="light"] .performance-discipline-table > tbody > tr.performance-discipline-summary > td { border-bottom-color: rgba(67, 49, 93, .08); color: #342b45; }
html[data-theme="light"] .performance-discipline-table > thead > tr > th { background: rgba(83, 62, 116, .028); color: #786f88; }
html[data-theme="light"] .performance-discipline-table > tbody > tr.performance-discipline-summary:hover { background: rgba(139, 92, 246, .04); }
html[data-theme="light"] .performance-discipline-progress,
html[data-theme="light"] .performance-topic-progress { background: #e9e5ef; }
html[data-theme="light"] .performance-topic-detail > td { background: linear-gradient(180deg, rgba(139, 92, 246, .035), rgba(249, 247, 252, .72)); }
html[data-theme="light"] .performance-detail-head p,
html[data-theme="light"] .performance-inline-facts dt,
html[data-theme="light"] .performance-subtopic-row > td { color: #7c748b; }
html[data-theme="light"] .performance-detail-close { color: #6f45aa; }
html[data-theme="light"] .performance-detail-close:hover { color: #4f2d86; }
html[data-theme="light"] .performance-inline-facts div { border-color: rgba(67, 49, 93, .07); background: #f6f3fa; }
html[data-theme="light"] .performance-inline-facts dd { color: #2b223b; }
html[data-theme="light"] .performance-topic-row > th,
html[data-theme="light"] .performance-topic-row > td { background: rgba(94, 75, 126, .025); box-shadow: inset 0 1px 0 rgba(67, 49, 93, .06), inset 0 -1px 0 rgba(67, 49, 93, .06); }
html[data-theme="light"] .performance-topic-row > th:first-child { box-shadow: inset 1px 1px 0 rgba(67, 49, 93, .06), inset 0 -1px 0 rgba(67, 49, 93, .06); }
html[data-theme="light"] .performance-topic-row > td:last-child { box-shadow: inset -1px 1px 0 rgba(67, 49, 93, .06), inset 0 -1px 0 rgba(67, 49, 93, .06); }
html[data-theme="light"] .performance-subtopic-table { background: rgba(85, 68, 116, .025); }
html[data-theme="light"] .performance-subtopic-row > th,
html[data-theme="light"] .performance-subtopic-row > td { border-bottom-color: rgba(67, 49, 93, .05); background: rgba(85, 68, 116, .025); }
html[data-theme="light"] .performance-subtopic-row > th { color: #40364f; }
html[data-theme="light"] .performance-topic-more-toggle,
html[data-theme="light"] .performance-panorama-more-toggle { border-color: rgba(139, 92, 246, .14); background: rgba(139, 92, 246, .055); color: #6f45aa; }
html[data-theme="light"] .performance-discipline-chevron { color: #766d87; }
html[data-theme="light"] .performance-discipline-chevron:hover { background: rgba(139, 92, 246, .105); color: #4f2d86; }
html[data-theme="light"] .performance-discipline-chevron[aria-expanded="true"] { color: #fff; }

/* Evolução: comparação de períodos e gráfico de barras */
html[data-theme="light"] .performance-compare-label { color: #51485f; }
html[data-theme="light"] .performance-compare-label .performance-icon { color: #6f45aa; }
html[data-theme="light"] .performance-compare-prev { color: #8a8197; }
html[data-theme="light"] .performance-compare-arrow { color: #958ca3; }
html[data-theme="light"] .performance-compare-current { color: #211a33; }
html[data-theme="light"] .performance-neutral-delta { border-top-color: rgba(67, 49, 93, .07); color: #6f667f; }
html[data-theme="light"] .performance-compare-unavailable .performance-compare-current { color: #554c64; }
html[data-theme="light"] .performance-compare-unavailable .performance-neutral-delta { color: #8d849a; }
html[data-theme="light"] .performance-period-dot { background: #aaa3ba; }
html[data-theme="light"] .performance-period-inline span,
html[data-theme="light"] .performance-period-compare-copy { color: #7b738c; }
html[data-theme="light"] .performance-evolution,
html[data-theme="light"] .performance-evolution-chart { --series-previous: #c4b5fd; --series-current: #8b5cf6; }
html[data-theme="light"] .performance-chart-grid i { border-top-color: rgba(58, 43, 82, .085); }
html[data-theme="light"] .performance-evolution-legend .performance-series-previous { background: #c4b5fd; }

/* Filtros */
html[data-theme="light"] .performance-filter-backdrop { background: rgba(39, 30, 57, .28); }

@media (max-width: 380px) {
  .performance-controls .performance-period-tabs .ds-segmented-option { padding-inline: 6px; }
}

/* Diagnosis snapshot: generated on request, like a report. The bar sits in the "Agora" heading. */
.performance-diagnosis-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 12px; margin-left: auto; }
.performance-diagnosis-bar small { color: var(--muted); font-size: 12px; }
.performance-diagnosis-bar .performance-diagnosis-stale { color: #fb923c; font-weight: 600; }
html[data-theme="light"] .performance-diagnosis-bar .performance-diagnosis-stale { color: #c2560c; }
.performance-diagnosis-bar .ds-action-button { min-height: 30px; padding: 4px 12px; font-size: 12px; }
.performance-explanation.performance-explanation-request { grid-template-columns: minmax(0, 1fr); min-block-size: 0; }
.performance-explanation-request .performance-summary { max-width: 72ch; }
@media (max-width: 620px) {
  .performance-diagnosis-bar { justify-content: flex-start; margin-left: 0; width: 100%; }
}
.performance-diagnosis-generate { margin-top: 6px; }

/* Diagnosis progress drawer: painted before the ~0.6 s of blocking work, so it only animates with transform/opacity. */
.diagnosis-progress-backdrop {
  position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 16px;
  background: rgba(3, 6, 14, .62); backdrop-filter: blur(6px);
  animation: diagnosisProgressFade 160ms ease-out both;
}
.diagnosis-progress-panel {
  display: grid; justify-items: center; width: min(440px, 100%); padding: 30px 28px 26px; text-align: center;
  border: 1px solid rgba(139, 92, 246, .42); border-radius: 14px; color: #f8fafc;
  background: radial-gradient(circle at 24% 0%, rgba(139, 92, 246, .14), transparent 40%), linear-gradient(155deg, rgba(13, 16, 32, .99), rgba(5, 8, 17, .99));
  box-shadow: 0 0 34px rgba(139, 92, 246, .16), 0 30px 90px rgba(0, 0, 0, .58);
  animation: diagnosisProgressRise 240ms cubic-bezier(.22, .75, .2, 1) both;
}
.diagnosis-progress-orbit { position: relative; display: grid; width: 96px; height: 96px; place-items: center; border: 1px solid rgba(139, 92, 246, .22); border-radius: 50%; background: radial-gradient(circle, rgba(139, 92, 246, .12), transparent 68%); }
.diagnosis-progress-orbit i { position: absolute; inset: 8px; border: 1.5px solid transparent; border-top-color: #8b5cf6; border-right-color: rgba(6, 182, 212, .7); border-radius: 50%; animation: diagnosisProgressSpin 1.6s linear infinite; }
.diagnosis-progress-core { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #8b5cf6, #22d3ee); box-shadow: 0 0 22px rgba(139, 92, 246, .6); animation: diagnosisProgressPulse 1.3s ease-in-out infinite alternate; }
.diagnosis-progress-panel h2 { margin: 18px 0 4px; font-size: 20px; font-weight: 540; }
.diagnosis-progress-panel > p { margin: 0 0 18px; color: #94a3b8; font-size: 13px; }
.diagnosis-progress-panel ul { display: grid; width: min(330px, 100%); gap: 9px; margin: 0; padding: 0; list-style: none; text-align: left; }
.diagnosis-progress-panel li { display: flex; align-items: center; gap: 9px; color: #64748b; font-size: 12.5px; transition: color 200ms ease; }
.diagnosis-progress-panel li > i { display: grid; width: 18px; height: 18px; flex: none; place-items: center; border: 1px solid rgba(100, 116, 139, .3); border-radius: 50%; transition: background 200ms ease, border-color 200ms ease; }
.diagnosis-progress-panel li > i svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.4); transition: opacity 180ms ease, transform 180ms ease; }
.diagnosis-progress-panel li.active { color: #d8b4fe; }
.diagnosis-progress-panel li.active > i { border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139, 92, 246, .18); }
.diagnosis-progress-panel li.done { color: #86efac; }
.diagnosis-progress-panel li.done > i { border-color: rgba(134, 239, 172, .55); background: rgba(34, 197, 94, .14); }
.diagnosis-progress-panel li.done > i svg { opacity: 1; transform: scale(1); }
@keyframes diagnosisProgressFade { from { opacity: 0; } }
@keyframes diagnosisProgressRise { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes diagnosisProgressSpin { to { transform: rotate(360deg); } }
@keyframes diagnosisProgressPulse { from { transform: scale(.82); opacity: .8; } to { transform: scale(1.12); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .diagnosis-progress-orbit i, .diagnosis-progress-core { animation-duration: 3.2s; }
  .diagnosis-progress-backdrop, .diagnosis-progress-panel { animation: none; }
}