/* Página de desempenho: só usa as variáveis de cor de /theme.css. */
.dp-title { font-weight: 600; color: var(--sub); padding-left: 14px; border-left: 1px solid var(--line3); }
.dp-back { font-size: 12px; color: var(--sub); border: 1px solid var(--line2); border-radius: 8px; padding: 7px 12px; background: #121418; }
.dp-back:hover { color: var(--text); border-color: var(--line3); }
.dp { display: flex; flex-direction: column; gap: 14px; }
.dim { color: var(--dim); }
.pos { color: var(--green); }
.neg { color: var(--red2); }

/* parâmetros */
.dp-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px 14px; border: 1px solid var(--line2); border-radius: 12px; background: var(--bar); }
.dp-ctl label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--sub); }
.dp-in { display: inline-flex; align-items: center; height: 32px; border: 1px solid var(--line2); border-radius: 8px; background: #121418; padding: 0 8px; }
.dp-in:focus-within { border-color: var(--accent-line); }
.dp-in input { width: 64px; background: transparent; border: 0; outline: none; color: var(--text); font-family: var(--mono); font-size: 13px; }
.dp-in i { font-style: normal; color: var(--dim); font-size: 11px; }
.dp-seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; }
.dp-seg button { border: 0; background: #121418; color: var(--sub); padding: 7px 12px; cursor: pointer; font-size: 12px; }
.dp-seg button + button { border-left: 1px solid var(--line2); }
.dp-seg button:hover { color: var(--text); }
.dp-seg button.on { background: var(--accent-bg); color: var(--accent); }
.dp-chk input { accent-color: var(--accent); }
.dp-upd { font-size: 11px; color: var(--dim); font-family: var(--mono); }
.dp-note { margin: -4px 2px 0; font-size: 12px; color: var(--dim); }

/* uma banca por metodologia */
.dp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.dp-card { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line2); background: var(--bar); cursor: pointer; color: var(--sub); }
.dp-card:hover { border-color: var(--line3); }
.dp-card.on { border-color: var(--accent-line); background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent-line); }
.dp-card-h { font-weight: 600; color: var(--text); }
.dp-card-v { font-size: 22px; font-weight: 600; color: var(--text); }
.dp-card-v i { font-style: normal; font-size: 12px; color: var(--dim); font-weight: 400; }
.dp-card-d { font-size: 12px; }
.dp-card-s { font-size: 11px; color: var(--dim); }
.dp-card-s em { font-style: normal; }

/* números da metodologia */
.dp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.dp-tile { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; border: 1px solid var(--line2); border-radius: 10px; background: var(--col); }
.dp-tile span { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; }
.dp-tile b { font-size: 17px; font-weight: 600; color: var(--text); }
.dp-tile b.pos { color: var(--green); }
.dp-tile b.neg { color: var(--red2); }
.dp-tile em { font-style: normal; font-size: 11px; color: var(--sub); }

.dp-box { border: 1px solid var(--line2); border-radius: 12px; background: var(--col); padding: 12px 14px; min-width: 0; }
.dp-box h3 { margin: 0 0 10px; font-size: 13px; font-weight: 600; }
.dp-box h3 em { font-style: normal; font-weight: 400; color: var(--dim); font-size: 12px; margin-left: 6px; }
.dp-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.dp-empty { padding: 30px 0; text-align: center; color: var(--dim); }

/* curva */
.dp-chart { width: 100%; }
.dp-svg { display: block; width: 100%; height: auto; }
.dp-svg .g { stroke: var(--line2); stroke-width: 1; }
.dp-svg .ax { fill: var(--dim); font: 10px var(--mono); }
.dp-svg .base { stroke: var(--gray); stroke-width: 1; stroke-dasharray: 4 4; opacity: .7; }
.dp-svg .ln { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.dp-svg .area { fill: var(--accent); opacity: .07; }
.dp-svg .end, .dp-svg .dot { fill: var(--accent); stroke: var(--col); stroke-width: 2; }
.dp-svg .xh { stroke: var(--sub); stroke-width: 1; stroke-dasharray: 2 3; }
.dp-svg .hit { fill: transparent; cursor: crosshair; }
.dp-tip { position: fixed; z-index: 50; pointer-events: none; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line3); background: var(--card2); box-shadow: 0 10px 24px rgba(0, 0, 0, .5); font-size: 12px; color: var(--sub); max-width: 280px; }
.dp-tip b { color: var(--text); font-weight: 600; }
.dp-tip b.pos { color: var(--green); }
.dp-tip b.neg { color: var(--red2); }

/* tabelas */
.dp-scroll { overflow-x: auto; }
.dp-t { width: 100%; border-collapse: collapse; font-size: 12px; }
.dp-t th { text-align: left; font-weight: 500; color: var(--dim); font-size: 11px; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line2); white-space: nowrap; }
.dp-t td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dp-t td.dim { white-space: normal; min-width: 140px; }
.dp-t tr.skip td { opacity: .55; }
.dp-t a { color: var(--text); font-weight: 600; }
.dp-t a:hover { color: var(--accent); }
.dp-t i { font-style: normal; font-size: 10px; }
.dp-t .tag { font-size: 11px; color: var(--sub); border: 1px solid var(--line3); border-radius: 5px; padding: 1px 6px; }
.dp-t .tag.acc { color: var(--accent); border-color: var(--accent-line); }

@media (max-width: 760px) {
  .dp-title { border-left: 0; padding-left: 0; }
  .dp-ctl { gap: 10px; }
}