:root {
  --bg: #080F1D;
  --bg-surface: #0C1829;
  --bg-raised: #101F35;
  --text: #E6EFF8;
  --text-muted: #7B97BC;
  --text-dim: #415E7A;
  --border: #162840;
  --border-hover: #1e3a5f;
  --border-focus: #00C49A;
  --accent: #00C49A;
  --blue: #4A90F7;
  --amber: #F59E0B;
  --red: #F87171;
  --on-accent: #061510;
  --r: 9px;
  --r-sm: 6px;
}

* { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  margin: 0;
  padding: 24px 20px 48px;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1100px; margin: 0 auto; }

.topbar { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.topbar .spacer { margin-left: auto; }

button {
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  padding: 7px 15px;
  background: var(--accent);
  border: none;
  border-radius: var(--r-sm);
  color: var(--on-accent);
  cursor: pointer;
  letter-spacing: .1px;
  transition: filter 120ms ease-out, box-shadow 120ms ease-out, transform 100ms ease-out;
}
button:hover { filter: brightness(1.08); box-shadow: 0 0 12px rgba(0,196,154,.25); }
button:active { transform: scale(0.97); filter: brightness(.96); box-shadow: none; }
button:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; transform: none; }

.guide-btn {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-muted); padding: 6px 14px;
  cursor: pointer; font-size: 12px; font-weight: 600;
  font-family: inherit; border-radius: var(--r-sm);
  transition: background 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out, transform 100ms ease-out;
}
.guide-btn:hover { background: var(--bg-raised); color: var(--text); border-color: var(--border-hover); }
.guide-btn:active { transform: scale(0.97); }
.guide-btn.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

h1 { font-size: 22px; font-weight: 600; margin: 0; }
h3.cls-h { font-size: 14px; font-weight: 500; margin: 22px 0 8px; color: var(--accent); }

.desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin: 0 0 16px; }

.val-controls { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.sim-status { font-size: 11px; color: var(--text-dim); font-style: italic; margin-left: auto; }

.logs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.logs-grid label { font-size: 12px; color: var(--text-muted); display: block; margin-bottom: 4px; }
textarea {
  width: 100%; height: 140px; background: var(--bg-surface);
  border: 0.5px solid var(--border); border-radius: 6px; padding: 10px;
  color: var(--text); font-family: 'Menlo', 'Consolas', monospace; font-size: 11px; resize: vertical;
}
textarea:focus { outline: none; border-color: var(--border-focus); }

.btn-blue { background: var(--blue); color: #fff; }

.cls-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cls-table th { text-align: left; color: var(--text-muted); font-weight: 500; padding: 5px 8px; border-bottom: 1px solid var(--border); }
.cls-table td { padding: 5px 8px; border-bottom: 0.5px solid var(--border); font-variant-numeric: tabular-nums; }
/* Só a tabela de rotação: larguras travadas pelo colgroup emitido em app.js. Sem isto,
   trocar Hits<->Turno altera o sufixo do cabeçalho de dano e reflui a tabela inteira. */
.cls-rotation-table { table-layout: fixed; }
.cls-rotation-table th, .cls-rotation-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A coluna de nome nunca trunca: com o min-width da tabela ela tem piso para caber numa
   linha, e um nome fora do comum quebra em duas em vez de virar reticências. */
.cls-rotation-table th:first-child, .cls-rotation-table td:first-child {
  white-space: normal; overflow: visible; text-overflow: clip;
}
/* Rede de segurança: nas larguras previstas a tabela cabe e a barra não aparece. */
.cls-table-scroll { overflow-x: auto; }
/* Cabeçalho numérico: rótulo livre para quebrar em duas linhas, com o slot da % ancorado
   ao lado dele e alinhado embaixo, no mesmo eixo dos números do corpo. É o que deixa as
   colunas serem dimensionadas pelo conteúdo em vez de pelo comprimento do rótulo. */
.cls-rotation-table th { vertical-align: bottom; }
.cls-th-inner { display: flex; align-items: flex-end; justify-content: flex-end; }
.cls-th-inner > span:first-child { white-space: normal; text-align: right; min-width: 0; }
/* O slot é item flex: sem isto ele encolhe quando o rótulo aperta e o cabeçalho
   escorrega alguns px para a direita, saindo do eixo dos números. */
.cls-th-inner > .cls-pct { flex: 0 0 auto; }

/* Slot de largura fixa para o percentual que acompanha um número na tabela de rotação.
   Sem largura fixa o número à esquerda termina num ponto diferente por linha (a % vai de
   "0,3%" a "100,0%") e a coluna fica serrilhada. O mesmo span, vazio, vai no <th> para o
   cabeçalho terminar no eixo dos NÚMEROS e não no do parêntese. */
.cls-pct {
  display: inline-block; width: 8ch; margin-left: 6px; text-align: right;
  color: var(--text-dim); font-size: 11px; font-variant-numeric: tabular-nums;
  /* peso fixo: `ch` é a largura do "0", e o <th> herda font-weight 500 enquanto o <td>
     usa 400 — sem isto o slot fica ~1px mais largo no cabeçalho e desalinha dele. */
  font-weight: 400;
}

/* Composição do dano efetivo: donut + ranking. Mesma ordem e mesma cor da tabela. */
.cls-share {
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px 16px; margin: 0 0 14px;
}
.cls-share-legend { flex: 1 1 380px; min-width: 300px; }
.cls-share-headline { font-size: 12.5px; color: var(--text-muted); margin: 0 0 8px; }
.cls-share-headline strong { color: var(--text); font-weight: 600; }
.cls-share-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 68px 14px 58px 96px;
  gap: 8px; align-items: center; padding: 2px 0; font-size: 12.4px;
}
.cls-share-row > .cls-share-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cls-share-turns, .cls-share-pct, .cls-share-total { text-align: right; font-variant-numeric: tabular-nums; }
.cls-share-turns { color: var(--text-muted); }
.cls-share-pct { font-weight: 600; }
.cls-share-total { color: var(--text-muted); font-size: 12px; }
.cls-share-arrow { text-align: center; color: var(--text-dim); font-size: 11px; }
.cls-share-head {
  font-size: 10.5px; color: var(--text-dim); text-transform: uppercase;
  letter-spacing: .06em; padding-bottom: 2px;
}
.cls-share-head > div { text-align: right; white-space: nowrap; }
.cls-share-head > div:first-child { text-align: left; }
.cls-share-bar {
  grid-column: 1 / -1; height: 4px; border-radius: 2px;
  background: rgba(27, 46, 72, .7); overflow: hidden; margin: -1px 0 3px;
}
.cls-share-bar > i { display: block; height: 100%; border-radius: 2px; }
.cls-share-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; vertical-align: -1px; }
.cls-share-note { font-size: 11px; color: var(--text-muted); margin: 6px 0 0; }

.cls-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 8px 0 14px; }
.cls-metric { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; }
.cls-metric-label { color: var(--text-muted); font-size: 11px; margin-bottom: 2px; }
.cls-metric-value { color: var(--text); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }

.cls-component-chart-tools { display: flex; justify-content: flex-end; margin: 0 0 6px; }
.cls-chart-metric {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-surface);
}
.cls-chart-metric button {
  min-width: 54px;
  padding: 6px 10px;
  border: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
}
.cls-chart-metric button:last-child { border-right: 0; }
.cls-chart-metric button.active {
  background: rgba(59, 130, 246, 0.18);
  color: var(--text);
}

.cls-hist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }

/* Faixa de turnos: overview da sessão inteira com uma janela arrastável. A janela
   governa o eixo X dos quatro gráficos de turno; o botão manda classificar só ela. */
/* Sem cartão: a faixa é do mesmo material dos gráficos, não um painel ao lado deles.
   Sem padding lateral, o canvas ocupa a MESMA caixa horizontal dos canvas dos gráficos,
   que é o que permite alinhar com o eixo. O recuo do cabeçalho é posto por app.js, na
   medida do eixo Y — número fixo aqui sairia de sincronia. */
.cls-brush { padding: 2px 0 6px; margin-bottom: 10px; }
.cls-brush-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 6px; }
.cls-brush-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-muted);
}
.cls-brush-range { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text); }
.cls-brush-unresolved { font-size: 11.5px; color: var(--red); }
.cls-brush-btn {
  padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent);
  font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.cls-brush-btn:hover:not(:disabled) { filter: brightness(1.08); }
.cls-brush-btn:disabled {
  background: var(--bg-surface); color: var(--text-dim);
  border-color: var(--border); cursor: default;
}
.cls-brush-btn.is-ghost {
  background: transparent; color: var(--text-muted); border-color: var(--border);
}
.cls-brush-btn.is-ghost:hover:not(:disabled) { color: var(--text); border-color: var(--border-hover); filter: none; }
.cls-brush-btn.is-ghost:disabled { color: var(--text-dim); border-color: var(--border); }
.cls-brush-hint { flex-basis: 100%; font-size: 11px; color: var(--text-dim); margin-top: 2px; }
#clsBrushCanvas { display: block; width: 100%; height: 46px; cursor: crosshair; }

/* Tooltip externo dos gráficos de turno (componentes/hits/dano/impact). É HTML, não o
   tooltip do canvas: com o hover em modo 'index' o gráfico de componentes lista todas as
   séries de uma vez, e o nativo fica grande e fora de ordem. */
.cls-chart-tip {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity .08s linear;
  background: rgba(12, 24, 41, 0.97);
  border: 1px solid var(--border-hover);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  font-size: 11.5px;
  color: var(--text);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .55);
  z-index: 20;
  min-width: 150px;
}
.cls-chart-tip .cls-chart-tip-title {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.cls-chart-tip .cls-chart-tip-row {
  display: flex;
  align-items: center;
  gap: 7px;
  line-height: 1.7;
  white-space: nowrap;
}
.cls-chart-tip .cls-chart-tip-sw { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.cls-chart-tip .cls-chart-tip-name { color: var(--text-muted); }
.cls-chart-tip .cls-chart-tip-val {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
}
.cls-chart-tip .is-total { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 5px; }

.cls-turn-detail {
  position: fixed;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  z-index: 30;
  width: min(720px, calc(100vw - 36px));
  height: min(620px, calc(100vh - 36px));
  overflow: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  padding: 14px;
}

.cls-turn-detail-head {
  position: sticky;
  top: -14px;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  background: var(--bg-surface);
  margin-bottom: 8px;
  padding: 14px 0 8px;
  cursor: move;
  user-select: none;
}

.cls-turn-detail.is-dragging {
  user-select: none;
}

.cls-turn-detail-head .cls-h {
  margin: 0;
}

.cls-turn-detail-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  cursor: auto;
}

.cls-turn-detail-nav button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 5px 9px;
}

.cls-turn-detail-nav button:hover:not(:disabled) {
  background: var(--bg-raised);
  color: var(--text);
  border-color: var(--border-hover);
}

.cls-turn-detail-index {
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
}

.cls-turn-detail-close {
  position: static;
  float: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  cursor: pointer;
  border-radius: var(--r-sm);
  background: var(--bg-raised);
  color: var(--text);
  line-height: 1;
}

.cls-turn-detail-block + .cls-turn-detail-block {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.cls-turn-detail-meta,
.cls-turn-detail-empty {
  color: var(--text-muted);
  font-size: 12px;
  margin: 0 0 8px;
}

.cls-turn-detail-table { margin-top: 8px; }

@media (max-width: 680px) {
  .logs-grid, .cls-hist-grid { grid-template-columns: 1fr; }
  .cls-metrics { grid-template-columns: 1fr 1fr; }
  .cls-turn-detail-head { grid-template-columns: 1fr auto; }
  .cls-turn-detail-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
  }
}

/* Tooltip "por criatura" da tabela de rotação: passar o mouse numa linha de componente
   mostra em quais criaturas os hits daquele componente caíram. Segue o cursor, então
   pointer-events: none — senão a camada rouba o mouse da linha e fica piscando. */
.cls-row-targets { cursor: help; }
.cls-row-targets:hover > td { background: rgba(0, 196, 154, .07); }
#clsTargetTip {
  position: fixed; z-index: 60; pointer-events: none;
  background: var(--bg-raised); border: 1px solid var(--border-hover);
  border-radius: var(--r-sm); box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
  color: var(--text); font-size: 12px; padding: 10px 12px; max-width: 620px;
}
.cls-target-title {
  font-size: 11px; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 6px;
}
.cls-target-stack { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: rgba(27, 46, 72, .7); }
.cls-target-stack > i { display: block; height: 100%; }
.cls-target-table { border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; margin-top: 8px; }
.cls-target-table th {
  color: var(--text-dim); font-weight: 500; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .05em; padding: 2px 8px; text-align: right;
}
.cls-target-table td { padding: 2px 8px; text-align: right; border-top: 0.5px solid var(--border); white-space: nowrap; }
.cls-target-table th:first-child, .cls-target-table td:first-child { text-align: left; }
.cls-target-foot { color: var(--text-muted); font-size: 10.5px; margin-top: 8px; }
/* Selo do charm: Low Blow e Savage Blow ficam colados numa criatura do bestiário,
   então a informação é "qual bicho", não uma porcentagem de procs. */
.cls-target-badge {
  display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 4px;
  font-size: 9.5px; font-weight: 600; letter-spacing: .04em; vertical-align: 1px;
}
.cls-target-badge-lb { background: rgba(74, 144, 247, .18); color: #7fb2ff; border: 1px solid rgba(74, 144, 247, .45); }
.cls-target-badge-sb { background: rgba(245, 158, 11, .18); color: #f5b74a; border: 1px solid rgba(245, 158, 11, .45); }


/* ==========================================================================
   Resumo de sessão + dano de charm  (js/session-summary.js)
   ========================================================================== */

/* A cor do charm NÃO pode sair de CLS_COMP_PALETTE (js/app.js): aquela paleta já ocupa
   âmbar, verde, azul, VERMELHO #F87171, violeta, amarelo, menta, rosa, ciano #38BDF8,
   laranja e roxo, e o charm apareceria colado no componente de mesma cor. Ciano #22D3EE
   é bem mais saturado que o #38BDF8 da paleta (que só entra em sessão com 9+
   componentes), e a faixa de charm é a ÚNICA hachurada da tela — a listra é o desempate
   quando a cor sozinha não basta. */
:root {
  --cls-charm: #22D3EE;
  --cls-charm-dark: #0E7F92;
  --cls-life: #F87171;
  --cls-mana: #60A5FA;
}
.cls-life { color: var(--cls-life); }
.cls-mana { color: var(--cls-mana); }
.cls-charm { color: var(--cls-charm); }
.cls-dim { color: var(--text-dim); }
.cls-muted { color: var(--text-muted); }

.cls-summary-head {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 12px 16px; margin: 6px 0 10px;
}
.cls-summary-name { font-size: 17px; font-weight: 600; }
.cls-summary-sub { color: var(--text-muted); font-size: 12px; }
.cls-summary-spells { margin-left: auto; max-width: 62%; text-align: right; }
.cls-summary-spell-list { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.cls-summary-lab {
  font-size: 10px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-dim); margin-bottom: 8px;
}

/* Cards que se acomodam sozinhos em linha e têm a mesma altura: uma coluna alta ao lado
   de um card baixo abria um vazio grande à direita em qualquer sessão. */
.cls-summary-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px; align-items: stretch; margin-bottom: 10px;
}
.cls-summary-card {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 14px 16px;
}
.cls-summary-wide { margin-bottom: 18px; overflow-x: auto; }
.cls-summary-perks .cls-kv { display: grid; grid-template-columns: max-content 1fr; gap: 14px; }
.cls-summary-perks .cls-kv > * { white-space: nowrap; }
.cls-summary-perks .cls-kv b { text-align: right; }
.cls-summary-bounty-mobs {
  border-top: 1px solid var(--border); margin-top: 12px; padding-top: 10px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; font-size: 12px;
}
.cls-summary-bounty-mobs span { color: var(--text-muted); }
.cls-summary-bounty-mobs b { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; }
@media (max-width: 1000px) { .cls-summary-perks { grid-column: 1 / -1; } }
@media (max-width: 620px) {
  .cls-summary-perks .cls-kv { grid-template-columns: 1fr; gap: 4px; }
  .cls-summary-perks .cls-kv b { text-align: left; }
}
.cls-kv { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 13px; }
.cls-kv b { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-variant-numeric: tabular-nums; }
/* rótulo | taxa | total, com os números alinhados por coluna */
.cls-kv3, .cls-kv-head { display: grid; grid-template-columns: 1fr 5.5em 6.5em; gap: 10px; }
.cls-kv3 b { text-align: right; }
.cls-kv-head {
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-dim); padding-bottom: 2px;
}
.cls-kv-head b { font-family: inherit; font-weight: 600; text-align: right; }
.cls-kv-sum { border-top: 1px solid var(--border); margin-top: 7px; padding-top: 8px; }
.cls-charm-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; }

/* Título de seção que hospeda o switch à direita. */
.cls-h.cls-h-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cls-headtools { margin-left: auto; font-weight: 400; text-transform: none; letter-spacing: 0; }

.cls-switch {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 13px 5px 9px;
  transition: border-color 120ms ease-out, background 120ms ease-out;
}
.cls-switch:hover { border-color: var(--border-hover); }
.cls-switch-input { position: absolute; opacity: 0; width: 0; height: 0; }
.cls-switch-track {
  width: 32px; height: 18px; border-radius: 999px; background: #22364f;
  position: relative; flex: 0 0 auto; transition: background 140ms ease-out;
}
.cls-switch-knob {
  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #8fa8c4;
  transition: transform 140ms cubic-bezier(.3, .8, .4, 1), background 140ms ease-out;
}
.cls-switch-input:checked + .cls-switch-track { background: var(--accent); }
.cls-switch-input:checked + .cls-switch-track .cls-switch-knob { transform: translateX(14px); background: var(--on-accent); }
.cls-switch-input:focus-visible + .cls-switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.cls-switch-text { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.cls-switch-text b { font-family: 'JetBrains Mono', monospace; color: var(--cls-charm); font-weight: 500; }
.cls-switch-input:checked ~ .cls-switch-text { color: var(--text); }

/* REGRA DE LAYOUT: ligar/desligar o switch não pode mover NADA de posição. O slot do
   "+N" tem largura fixa (como .cls-pct) e é emitido sempre, vazio quando não há
   acréscimo; a variante em bloco reserva a segunda linha da célula de dano total.
   Sem isso o número da coluna (alinhada à direita) era empurrado ao aparecer o span, e
   a linha da tabela mudava de altura. Coberto por tests/ui-session-summary.test.mjs. */
.cls-charm-plus {
  display: inline-block; width: 7ch; margin-left: 6px; text-align: left;
  color: var(--cls-charm); font-size: 11px; font-variant-numeric: tabular-nums; font-weight: 500;
}
.cls-charm-plus-block { display: block; width: auto; margin-left: 0; text-align: right; min-height: 1.25em; line-height: 1.25; }
.cls-charm-note { min-height: 1.35em; }

/* Faixa de charm na barra da composição: hachurada, para não se confundir com a cor de
   nenhum componente. */
.cls-share-bar { display: flex; }
.cls-share-bar > i { flex: 0 0 auto; border-radius: 0; }
.cls-share-bar > i:first-child { border-radius: 2px 0 0 2px; }
.cls-share-bar > .cls-share-charm {
  background: repeating-linear-gradient(135deg, var(--cls-charm) 0 3px, var(--cls-charm-dark) 3px 6px);
  border-radius: 0 2px 2px 0;
}

@media (max-width: 760px) {
  .cls-summary-spells { margin-left: 0; max-width: 100%; text-align: left; }
}

/* grav san: fúcsia, fora de CLS_COMP_PALETTE (js/app.js) */
.cls-gs-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 6px 0 10px;
  font-size: 12px; color: var(--text-muted); }
.cls-gs-legend b { color: var(--text); font-weight: 600; }
.cls-gs-legend .cls-gs-title { color: #E879F9; }
.cls-gs-sw { display: inline-block; width: 14px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-right: 5px; }
.cls-gs-sw.is-on { background: rgba(232,121,249,.16); border: 1px solid rgba(232,121,249,.55); }
.cls-gs-sw.is-off { background: repeating-linear-gradient(135deg, rgba(232,121,249,.35) 0 2px, transparent 2px 5px);
  border: 1px dashed rgba(232,121,249,.55); }
.cls-gs-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.cls-gs-pill.is-on { background: #E879F9; color: #2B0730; }
.cls-gs-pill.is-off { border: 1px dashed rgba(232,121,249,.55); color: #E879F9; }
/* M-043: conversao elemental do sorcerer, no molde da marcacao do grav san. */
.cls-conv-legend .cls-conv-title, .cls-conv-title { color: #34D399; }
.cls-conv-sw { display: inline-block; width: 14px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-right: 5px; }
.cls-conv-sw.is-used { background: rgba(52,211,153,.22); border: 1px solid rgba(52,211,153,.7); }
.cls-conv-sw.is-used-weak { background: rgba(52,211,153,.08); border: 1px dashed rgba(52,211,153,.45); }
.cls-conv-sw.is-lost { background: repeating-linear-gradient(135deg, rgba(248,113,113,.55) 0 2px, transparent 2px 5px);
  border: 1px dashed rgba(248,113,113,.7); }
.cls-conv-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.cls-conv-pill.is-used { background: #34D399; color: #052E1F; }
.cls-conv-pill.is-used.is-weak { background: transparent; border: 1px dashed #34D399; color: #34D399; }
.cls-conv-pill.is-lost { border: 1px dashed rgba(248,113,113,.8); color: #F87171; }
.cls-turn-detail-table tr.cls-conv-row-used td:first-child { box-shadow: inset 3px 0 0 #34D399; }
.cls-turn-detail-table tr.cls-conv-row-lost td:first-child { box-shadow: inset 3px 0 0 rgba(248,113,113,.7); }
.cls-conv-section { margin: 16px 0; padding: 12px 14px; border: 1px solid rgba(52,211,153,.25); border-radius: 8px; }
.cls-conv-section h4 { margin: 0 0 8px; color: #34D399; font-size: 14px; }
.cls-conv-kpis { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 10px; font-size: 12.5px; color: var(--text-muted); }
.cls-conv-kpis b { display: block; font-size: 18px; color: var(--text); }
.cls-conv-used { color: #34D399 !important; }
.cls-conv-lost { color: #F87171 !important; }
.cls-conv-muted { color: var(--text-muted); }
.cls-conv-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.cls-conv-chips button { border: 1px dashed rgba(248,113,113,.8); background: transparent; color: #F87171;
  border-radius: 999px; padding: 2px 9px; font-size: 11.5px; cursor: pointer; }
.cls-turn-detail-table tr.cls-gs-on td:first-child { box-shadow: inset 3px 0 0 #E879F9; }
.cls-turn-detail-table tr.cls-gs-off td:first-child { box-shadow: inset 3px 0 0 rgba(232,121,249,.3); }

/* Reflect da armadura: fora da rotação, hachurado em âmbar para não se confundir com a paleta
   de componentes nem com o ciano do charm (js/session-summary.js, clsArmorReflect). */
.cls-reflect-dot { background: repeating-linear-gradient(45deg, var(--amber) 0 2px, transparent 2px 4px); border: 1px solid var(--amber); }
.cls-share-bar > .cls-reflect-bar { background: repeating-linear-gradient(45deg, var(--amber) 0 3px, rgba(245, 158, 11, .35) 3px 6px); border-radius: 2px; }
.cls-reflect-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid rgba(245, 158, 11, .5); border-radius: 4px; color: #f5b74a; font-size: 10px; font-weight: 600; letter-spacing: .03em; vertical-align: 1px; }
.cls-reflect-row > td { border-top: 1px dashed rgba(245, 158, 11, .5); color: var(--text-muted); }
.cls-reflect-share .cls-share-name, .cls-reflect-cell { color: #f5b74a; }

/* Dano médio efetivo / turno (dano da linha ÷ todos os turnos da sessão) e rodapé que o soma. */
.cls-session-turn, .cls-reflect-row > td.cls-session-turn { color: #7edcc0; }
.cls-rotation-foot > td { border-top: 1px solid var(--border-hover); font-weight: 600; color: var(--text); }

/* Tooltip explicativo de cabeçalho (data-cls-tip), na camada #clsTargetTip. */
[data-cls-tip] { cursor: help; }
th[data-cls-tip] > .cls-th-inner > span:first-child, th[data-cls-tip]:not(:has(.cls-th-inner)), .cls-share-head > [data-cls-tip] {
  text-decoration: underline dotted rgba(140, 170, 200, .55); text-underline-offset: 3px;
}
.cls-head-tip { max-width: 340px; line-height: 1.5; text-transform: none; letter-spacing: normal; font-weight: 400; }