.mdash {
    --mdash-line: rgba(201, 168, 76, 0.25);
    --mdash-line-soft: rgba(201, 168, 76, 0.16);
    --mdash-gold: #c9a84c;
    --mdash-gold-light: #f3da9c;
    --mdash-text: #e8d8b8;
    --mdash-muted: rgba(232, 216, 184, 0.52);
    --mdash-panel: linear-gradient(180deg, rgba(40, 28, 16, 0.66), rgba(20, 14, 8, 0.66));
    display: grid;
    gap: 0;
    padding: 18px 0 28px;
    color: var(--mdash-text);
}

.mdash *,
.mdash *::before,
.mdash *::after {
    box-sizing: border-box;
}

.mdash button,
.mdash input,
.mdash select {
    font: inherit;
}

.mdash button:focus-visible,
.mdash input:focus-visible,
.mdash select:focus-visible {
    outline: 2px solid var(--gold-light, #e8d38a);
    outline-offset: 2px;
}

.mdash .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.mdash [hidden] {
    display: none !important;
}

/* Topo da tela: personagens à esquerda, Frentes à direita — as duas colunas
   fecham na mesma altura. */
.mdash-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 16px;
    margin-bottom: 18px;
    align-items: stretch;
}

/* A coluna das Frentes ocupa exatamente a área do card de personagens: os 3
   cards dividem a altura disponível. */
.mdash-fronts-column,
.mdash-fronts-section {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
}

.mdash-fronts-section {
    flex: 1 1 auto;
}

/* Bloco de personagens: casca da aba NPCs (.mestre-batalha-card-secreto — card
   de 880px centralizado). Aqui só o espaçamento interno, pra cabeçalho, filtros,
   grade e paginação respirarem igual. */
.mdash-picker-card {
    display: grid;
    gap: 9px;
    margin-bottom: 0;
}

/* O card do bestiário secreto vem com max-width de 880px + margem automática
   (ele é usado sozinho na aba NPCs). Aqui ele divide a linha com as Frentes,
   então ocupa a coluna inteira — assim as duas colunas do topo batem com a
   linha de baixo (gráfico + feed). */
.mdash .mdash-top .mestre-batalha-card-secreto.mdash-picker-card {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.mdash-picker-card .bestiary-header,
.mdash-picker-card .bestiary-actions {
    margin-bottom: 0;
}

/* Título centralizado como nos demais cards; o contador vira legenda ao lado. */
.mdash-picker-card .bestiary-header {
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mdash-picker-card .bestiary-header h2 {
    margin: 0;
    font-size: 1.35rem;
}

.mdash-picker-note {
    margin: 0;
}

.mdash-picker-tools {
    align-items: center;
    flex-wrap: wrap;
}

.mdash-picker-search {
    flex: 1 1 220px;
    min-width: 0;
}

/* Filtros: rótulo em cima, campo embaixo (.item-field do painel). */
.mdash-filter-fields {
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

.mdash-filter-fields .item-field,
.mdash-filter-fields .hab-switch-field {
    width: auto;
    gap: 4px;
}

/* Conta é elástica: fica com toda a sobra da linha. */
.mdash-field-conta {
    flex: 1 1 200px;
    min-width: 0;
}

.mdash-field-conta .edit-input {
    width: 100%;
}

.mdash-field-datas {
    display: flex;
    flex: 0 0 auto;
    gap: 12px;
}

.mdash-field-auto {
    flex: 0 0 auto;
}

.mdash-field-date {
    flex: 0 0 auto;
}

/* O campo se mede pelo conteúdo (dd/mm/aaaa + ícone), e não por um número
   fixo: com fonte diferente da prevista, largura fixa cortava o ano. */
.mdash-field-date .edit-input {
    width: auto;
    min-width: max-content;
    color-scheme: dark;
}

/* Switch na mesma altura dos outros campos, pra linha ficar alinhada. */
.mdash-filter-fields .tt-seg-btn {
    min-height: 32px;
    font-size: 0.8rem;
}

/* Dropdown do botão de filtro (mesmo componente do bestiário). */
.mdash-filter-drop {
    display: grid;
    gap: 8px;
    min-width: 210px;
}

.mdash-drop-header-2 {
    margin-top: 4px;
}


.mdash-picker-search {
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid var(--mdash-line);
    border-radius: 6px;
    color: var(--mdash-text);
    background: rgba(0, 0, 0, 0.42);
    font-size: 0.76rem;
}

.mdash-picker-search::placeholder {
    color: var(--mdash-muted);
    font-style: italic;
}

.mdash-selection-count {
    flex: 0 0 auto;
    color: var(--mdash-text);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

.mdash-mini-btn,
.mdash-btn {
    border: 1px solid rgba(201, 168, 76, 0.3);
    border-radius: 999px;
    color: var(--mdash-gold-light);
    background: rgba(0, 0, 0, 0.42);
    font-family: "Cinzel", serif;
    cursor: pointer;
}

.mdash-mini-btn {
    padding: 4px 10px;
    font-size: 0.66rem;
}

.mdash-mini-btn:hover,
.mdash-btn:hover {
    border-color: var(--mdash-gold);
    background: rgba(201, 168, 76, 0.2);
}

.mdash-filter-error,
.mdash-picker-message {
    min-height: 0;
    color: var(--mdash-muted);
    font-size: 0.69rem;
    font-style: italic;
}

.mdash-filter-error:not(:empty),
.mdash-picker-message:not(:empty) {
    min-height: 1em;
}

.mdash-picker-message.is-error,
.mdash-filter-error {
    color: #f0a29a;
}

/* Moldura dourada — nasceu no retrato das Frentes e virou o padrao de toda
   imagem do dashboard (E4.1 item 5). */
.mdash-frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid var(--mdash-gold);
    background:
        radial-gradient(circle at 50% 75%, rgba(201, 168, 76, 0.25), transparent 44%),
        linear-gradient(135deg, rgba(91, 58, 23, 0.75), rgba(19, 14, 9, 0.92));
}

.mdash-img-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mdash-text);
    font-family: "Cinzel", serif;
    font-size: 1.35rem;
}

/* Picker de personagens: o MESMO componente da aba NPCs (.bestiary-grid +
   .bestiary-card + img-wrap + bottom + name), inclusive as regras de imagem
   (spinner enquanto carrega, arte em 80% do quadro). Card de leitura: nao tem
   botao de acao nem abre ficha — o clique so marca/desmarca o escopo. */
/* 5 por linha, como na aba NPCs, e centrado na div. O trilho tem teto de 159px
   (a largura do card lá) e encolhe se a coluna for estreita — o card nunca
   estica. O nome usa a fonte padrão do componente: quem dimensiona é o auto-fit
   global (`AlternartApp.fitCardNames`), por isso aqui NÃO se define
   `font-size`. */
.mdash-picker-grid {
    grid-template-columns: repeat(5, minmax(0, 159px));
    justify-content: center;
    margin-top: 2px;
}

/* O spinner de "carregando" do renderPaginated entra como card do grid. */
.mdash-picker-grid > .loading-inline {
    grid-column: 1 / -1;
}

.mdash-pick-card {
    min-width: 0;
}

.mdash-pick-card.is-selected {
    border-color: var(--mdash-gold);
    background: rgba(201, 168, 76, 0.1);
    box-shadow: 0 0 10px rgba(201, 168, 76, 0.35);
}

/* Retrato de personagem é informação, não colecionável: sem pulsar, sem
   levantar no hover. A neutralização da IMAGEM e o preenchimento do quadro
   (`object-fit: cover`) vêm da classe `.npc-card-novo`, que o card usa —
   duplicar aqui só criaria uma segunda fonte de verdade. Fica só o nível do
   card, que aquela classe não cobre. */
.mdash-pick-card,
.mdash-pick-card:hover {
    transform: none;
    animation: none;
}

/* Tag de nivel: canto inferior direito, SOBRE a imagem (z-index acima da arte
   e do overlay de carregamento, senao a arte cobre a tag). */
.mdash-card-level {
    position: absolute;
    z-index: 3;
    right: 5px;
    bottom: 5px;
    padding: 1px 7px;
    border: 1px solid rgba(201, 168, 76, 0.75);
    border-radius: 6px;
    color: var(--mdash-gold-light);
    background: rgba(10, 7, 4, 0.82);
    font-family: "Cinzel", serif;
    font-size: 0.6rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
}

.mdash-check {
    position: absolute;
    z-index: 4;
    top: 5px;
    left: 6px;
    display: none;
    color: var(--mdash-gold-light);
    font-size: 0.72rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

.mdash-pick-card.is-selected .mdash-check {
    display: block;
}

.mdash-pick-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-dark, rgba(0, 0, 0, 0.4));
    font-size: 2rem;
}

/* Frentes */
.mdash-front-name i {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 2px;
    background: var(--char-color);
}

.mdash-section-hat {
    display: flex;
    margin: 0 0 10px;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    text-align: center;
}

.mdash-section-hat h4 {
    margin: 0;
    color: var(--mdash-gold-light);
    font-family: "Cinzel", serif;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mdash-section-hat span {
    color: var(--mdash-muted);
    font-size: 0.7rem;
    font-style: italic;
}

/* Uma frente por linha. Os cards têm altura natural e a coluna nunca passa da
   área do card de personagens (o que sobrar embaixo fica vazio — inflar o card
   pra preencher só deixava um vão dentro dele). */
.mdash-fronts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: minmax(124px, auto);
    flex: 1 1 auto;
    gap: 12px;
    align-content: start;
}

.mdash-front-card {
    display: flex;
    min-width: 0;
    min-height: 124px;
    padding: 10px 13px 12px;
    flex-direction: column;
    border: 1px solid rgba(201, 168, 76, 0.3);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(40, 28, 16, 0.95), rgba(20, 14, 8, 0.95));
}

.mdash-front-top {
    display: flex;
    margin-bottom: 10px;
    padding-bottom: 7px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-bottom: 1px solid rgba(201, 168, 76, 0.16);
}

.mdash-front-top h5 {
    margin: 0;
    color: var(--mdash-text);
    font-family: "Cinzel", serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mdash-info-btn {
    margin-left: 0;
    color: var(--mdash-gold-light);
}

.mdash-info-btn svg {
    width: 15px;
    height: 15px;
}

/* Corpo: retrato + líder centralizados na primeira linha, pódio ocupando a
   largura toda na segunda. */
.mdash-front-body {
    display: grid;
    grid-template-columns: auto auto;
    flex: 1 1 auto;
    gap: 8px 12px;
    align-items: center;
    justify-content: center;
}

.mdash-front-rank {
    grid-column: 1 / -1;
}

.mdash-front-portrait {
    position: relative;
    display: flex;
    width: 74px;
    height: 74px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid var(--mdash-gold);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 75%, rgba(201, 168, 76, 0.25), transparent 44%),
        linear-gradient(135deg, rgba(91, 58, 23, 0.75), rgba(19, 14, 9, 0.92));
}

/* O retrato preenche o círculo inteiro e é enquadrado pela CABEÇA, que numa foto
   de personagem fica no topo, não no centro. `cover` recorta o excedente sem
   deformar a proporção; a altura do corte vem de `--face-focus-y` (:root do
   style.css), a MESMA usada no card de personagem/NPC — calibrar lá vale aqui. */
.mdash-front-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% var(--face-focus-y);
}

.mdash-front-portrait .mdash-img-fallback {
    font-size: 1.05rem;
}

.mdash-front-info {
    min-width: 0;
    text-align: center;
}

.mdash-front-name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    overflow: hidden;
    color: var(--mdash-text);
    font-size: 0.86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mdash-front-name > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.mdash-front-crown {
    padding: 0 6px;
    flex: 0 0 auto;
    border-radius: 999px;
    color: #1a1410;
    background: var(--mdash-gold);
    font-family: "Cinzel", serif;
    font-size: 0.58rem;
    font-weight: 700;
}

.mdash-front-info strong {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: var(--mdash-gold-light);
    font-family: "Cinzel", serif;
    font-size: 1.3rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pódio: posição + nome, barra ocupando o que sobra e o valor no fim. */
.mdash-front-rank {
    display: grid;
    min-width: 0;
    gap: 5px;
}

.mdash-front-row {
    display: grid;
    grid-template-columns: auto minmax(48px, 108px) minmax(40px, 1fr) auto;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
}

.mdash-front-pos {
    color: var(--mdash-muted);
    font-family: "Cinzel", serif;
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
}

.mdash-front-row-name {
    overflow: hidden;
    color: var(--mdash-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mdash-front-row em {
    color: var(--mdash-gold-light);
    font-size: 0.68rem;
    font-style: normal;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mdash-front-track {
    display: block;
    height: 7px;
    min-width: 0;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(201, 168, 76, 0.1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}

.mdash-front-track b {
    display: block;
    width: var(--pct, 0%);
    height: 100%;
    min-width: 3px;
    border-radius: 4px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(0, 0, 0, 0.18)),
        var(--char-color, var(--mdash-gold));
    box-shadow: 0 0 8px -2px var(--char-color, var(--mdash-gold));
    transform-origin: left;
    animation: mdashGrow 0.45s ease-out;
}

/* O líder abre o ranking com a barra cheia, então ganha um pouco mais de peso. */
.mdash-front-row:first-child .mdash-front-pos,
.mdash-front-row:first-child .mdash-front-row-name {
    color: var(--mdash-gold-light);
}

.mdash-front-more {
    margin: 0;
    color: var(--mdash-muted);
    font-size: 0.62rem;
    font-style: italic;
    text-align: right;
}

/* Miolo do dashboard. Sem `align-items: start`: o feed estica e ocupa a altura
   das duas linhas da esquerda (gráfico + atividade). */
.mdash-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 16px;
}

.mdash-main-column {
    display: grid;
    min-width: 0;
    gap: 16px;
}

.mdash-panel {
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--mdash-line);
    border-radius: 10px;
    background: var(--mdash-panel);
}

/* Cabeçalho de card do dashboard: título (e subtítulo) SEMPRE centralizados; a
   ação da direita — ⊞ tabela, total de pontos — sai do fluxo pra não empurrar o
   título pro canto. */
.mdash-section-head {
    position: relative;
    display: flex;
    margin-bottom: 10px;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    text-align: center;
}

.mdash-section-head:has(.mdash-tgl),
.mdash-section-head:has(.mdash-potential-total) {
    padding: 0 100px;
}

.mdash-section-head > .mdash-tgl,
.mdash-section-head > .mdash-potential-total {
    position: absolute;
    top: 50%;
    right: 0;
    margin: 0;
    transform: translateY(-50%);
}

.mdash-section-head h4 {
    margin: 0;
    color: var(--mdash-gold-light);
    font-family: "Cinzel", serif;
    font-size: 1rem;
    letter-spacing: 0.06em;
}

.mdash-section-head > span {
    color: var(--mdash-muted);
    font-size: 0.69rem;
    font-style: italic;
}

.mdash-btn {
    padding: 3px 10px;
    font-size: 0.7rem;
}

/* Progressao (XP acumulado) — portado do mock aprovado. */
.mdash-kicker {
    margin: 0 0 1px;
    color: var(--mdash-muted);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mdash-chart-sub {
    flex: 1 1 auto;
    color: var(--mdash-muted);
    font-size: 0.69rem;
    font-style: italic;
}

.mdash-tgl {
    flex: 0 0 auto;
}

.mdash-tgl[aria-pressed="true"] {
    border-color: var(--mdash-gold-light);
    color: #1a1410;
    background: var(--mdash-gold);
}

.mdash-chart-kb {
    outline-offset: 2px;
}

.mdash-chart {
    display: block;
    width: 100%;
    height: auto;
}

.mdash-chart-grid-line {
    stroke: #2e2419;
    stroke-width: 1;
}

.mdash-chart-cross {
    stroke: #a09080;
    stroke-width: 1;
    opacity: 0.55;
}

/* Series: a cor vem do personagem via --series; o resto e' CSS. */
.mdash-chart-line {
    fill: none;
    stroke: var(--series, #c9a84c);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke-dashoffset 0.45s ease-out;
}

.mdash-chart-end,
.mdash-chart-dot {
    fill: var(--series, #c9a84c);
    stroke: #1a1410;
    stroke-width: 2;
}

.mdash-chart-swatch {
    fill: var(--series, #c9a84c);
}

.mdash-chart-overlay {
    fill: transparent;
}

.mdash-chart-axis {
    fill: #a09080;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.mdash-chart-label {
    fill: #f0e6d2;
    font-size: 12px;
}

.mdash-chart-label-sub {
    fill: #a09080;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

.mdash-chart-empty {
    padding: 44px 0;
    color: var(--mdash-muted);
    font-size: 0.8rem;
    font-style: italic;
    text-align: center;
}

.mdash-chart-legend {
    display: flex;
    margin-top: 8px;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mdash-legend-btn {
    display: inline-flex;
    padding: 3px 10px;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--mdash-line);
    border-radius: 999px;
    color: var(--mdash-text);
    background: rgba(0, 0, 0, 0.35);
    font-size: 0.72rem;
    cursor: pointer;
}

.mdash-legend-btn:hover {
    border-color: var(--mdash-gold);
}

.mdash-legend-btn[aria-pressed="false"] {
    opacity: 0.45;
}

.mdash-legend-sw {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    border: 2px solid var(--series, var(--mdash-gold));
    border-radius: 2px;
    background: transparent;
}

.mdash-legend-btn[aria-pressed="true"] .mdash-legend-sw {
    background: var(--series, var(--mdash-gold));
}

.mdash-legend-hint {
    color: var(--mdash-muted);
    font-size: 0.69rem;
    font-style: italic;
}

/* Tooltip do grafico (vive no <body> pra nao ser cortado pelos paineis). */
.mdash-tip {
    position: fixed;
    z-index: 12000;
    max-width: 280px;
    padding: 8px 11px;
    border: 1px solid rgba(201, 168, 76, 0.42);
    border-radius: 8px;
    color: #e8d8b8;
    background: rgba(18, 13, 8, 0.96);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
    font-size: 0.72rem;
    pointer-events: none;
}

.mdash-tip[hidden] {
    display: none;
}

.mdash-tip-head {
    margin-bottom: 4px;
    color: #f3da9c;
    font-family: "Cinzel", serif;
    font-size: 0.78rem;
}

.mdash-tip-row {
    display: flex;
    margin-top: 2px;
    align-items: center;
    gap: 6px;
}

.mdash-tip-sw {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 2px;
    background: var(--series, var(--mdash-gold));
}

.mdash-tip-sub {
    color: rgba(232, 216, 184, 0.52);
}

.mdash-chart-table,
.mdash-heat-scroll {
    overflow-x: auto;
}

.mdash-chart-table {
    margin-top: 10px;
}

.mdash-chart-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

.mdash-chart-table th,
.mdash-chart-table td {
    padding: 5px 8px;
    border-bottom: 1px solid rgba(201, 168, 76, 0.12);
    text-align: right;
    white-space: nowrap;
}

.mdash-chart-table th:first-child,
.mdash-chart-table td:first-child {
    color: var(--mdash-muted);
    text-align: left;
}

.mdash-chart-table thead th {
    color: var(--mdash-text);
    font-size: 0.64rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Atividade diaria: matriz personagem × dia, celula QUADRADA. O lado do
   quadrado (--hm-cell) e o numero de dias (--hm-days) vem do JS; o grid, as
   cores e a escala moram aqui. */
.mdash-heat-scroll {
    padding-bottom: 4px;
}

.mdash-heat-grid {
    display: grid;
    width: max-content;
    /* Teto da coluna de rotulo subiu de 140px pra 172px: o selo "∞ N" (runs de
       infinita, spec-energia-modos) divide esse espaco com o nome, e no teto antigo
       um nome medio ja truncava so' por causa do selo. */
    grid-template-columns: minmax(104px, 172px) repeat(var(--hm-days, 30), var(--hm-cell, 22px));
    gap: 2px;
    align-items: center;
}

.mdash-heat-corner {
    align-self: end;
    padding-bottom: 2px;
    color: var(--mdash-muted);
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mdash-heat-day {
    align-self: end;
    padding-bottom: 2px;
    overflow: hidden;
    color: var(--mdash-muted);
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.mdash-heat-day.is-monday {
    border-bottom: 2px solid rgba(201, 168, 76, 0.55);
    color: var(--mdash-gold-light);
}

.mdash-heat-label {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow: hidden;
    padding-right: 8px;
    color: var(--mdash-text);
    font-size: 0.72rem;
    white-space: nowrap;
}

.mdash-heat-label i {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 2px;
    background: var(--char-color);
}

.mdash-heat-label b {
    overflow: hidden;
    font-weight: 400;
    text-overflow: ellipsis;
}

.mdash-heat-cell,
.mdash-heat-key {
    display: block;
    width: var(--hm-cell, 22px);
    height: var(--hm-cell, 22px);
    border-radius: 3px;
    background: transparent;
}

.mdash-heat-cell:not(.h0) {
    cursor: pointer;
    transition: transform 0.12s, filter 0.12s;
}

.mdash-heat-cell.h0,
.mdash-heat-key.h0 {
    border: 1px solid rgba(201, 168, 76, 0.14);
}

/* Rampa: comeca acima do preto pro primeiro nivel nao sumir no fundo do
   painel (o degrade do mock era escuro demais nesta superficie). */
.mdash-heat-cell.h1, .mdash-heat-key.h1 { background: #4a3a1f; }
.mdash-heat-cell.h2, .mdash-heat-key.h2 { background: #6b5426; }
.mdash-heat-cell.h3, .mdash-heat-key.h3 { background: #8d6f24; }
.mdash-heat-cell.h4, .mdash-heat-key.h4 { background: #b08a35; }
.mdash-heat-cell.h5, .mdash-heat-key.h5 { background: #d4af52; }
.mdash-heat-cell.h6, .mdash-heat-key.h6 { background: #e8cd7e; }
.mdash-heat-cell.h7, .mdash-heat-key.h7 { background: #f3da9c; }

.mdash-heat-cell:not(.h0):hover {
    filter: brightness(1.25);
    transform: translateY(-1px);
}

.mdash-heat-legend {
    display: flex;
    margin-top: 10px;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    color: var(--mdash-muted);
    font-size: 0.68rem;
}

.mdash-heat-key {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.mdash-heat-note {
    margin-left: 10px;
    font-style: italic;
}

.mdash-note,
.mdash-data-note {
    color: var(--mdash-muted);
    font-size: 0.68rem;
    font-style: italic;
}

/* container-type habilita `cqi` nos filhos: a linha do feed encolhe conforme a
   LARGURA DO PAINEL, não da janela. */
/* `height: 0` + `min-height: 100%`: o feed NÃO empurra a altura da linha (quem
   manda é a coluna da esquerda) e ainda assim estica até ela — a lista rola
   dentro. Sem isso, 40 movimentações esticavam o grid inteiro. */
.mdash-feed {
    display: flex;
    height: 0;
    min-height: 100%;
    flex-direction: column;
    container-type: inline-size;
}

/* Scroll no padrão do sistema (a barra global de style.css). */
.mdash-feed-list {
    display: grid;
    min-height: 120px;
    padding-right: 6px;
    overflow-y: auto;
    flex: 1 1 auto;
    gap: 8px;
    align-content: start;
}

.mdash-feed .mdash-section-head {
    justify-content: center;
    text-align: center;
}

/* Feed: 3 colunas por movimentacao — retrato | nome sobre a movimentacao |
   data sobre a hora. A coluna do meio e' a unica elastica (1fr) e a unica que
   pode encolher; retrato e carimbo de tempo tem largura propria. O texto
   inteiro fica no title do article. */
.mdash-feed-list article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-width: 0;          /* item de grid nao encolhe sozinho: sem isso a
                              linha vaza o painel e o horario some */
    padding: 6px 9px;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(201, 168, 76, 0.14);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.28);
}

.mdash-feed-avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 50%;
}

/* Mesmo enquadramento por cabeça do retrato das Frentes — é a mesma pergunta
   visual ("quem é este personagem"), num círculo menor. */
.mdash-feed-avatar .mdash-feed-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% var(--face-focus-y);
}

.mdash-feed-avatar .mdash-img-fallback {
    font-size: 0.72rem;
}

/* Coluna 2: nome em cima, movimentacao embaixo. `min-width: 0` no container e
   nas duas linhas — sem isso o texto longo empurra a coluna e o carimbo de
   tempo some pra fora do painel. */
.mdash-feed-body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.mdash-feed-nome,
.mdash-feed-dado {
    min-width: 0;
    overflow: hidden;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mdash-feed-nome {
    color: var(--mdash-gold-light);
    font-size: clamp(0.56rem, 2.45cqi, 0.78rem);
    font-weight: 600;
}

.mdash-feed-dado {
    color: var(--mdash-muted);
    font-size: clamp(0.52rem, 2.2cqi, 0.7rem);
    font-style: normal;
    font-variant-numeric: tabular-nums;
}

/* Coluna 3: data em cima, hora embaixo, alinhadas a direita. */
.mdash-feed-when {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    color: var(--mdash-muted);
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
    text-align: right;
    white-space: nowrap;
}

.mdash-feed-when b {
    color: var(--mdash-text);
    font-weight: 600;
}

/* Rodapé de potencial: um card por tipo (icone + nome + valor + barra
   proporcional ao maior tipo, via --pct). */
.mdash-potential {
    margin-top: 16px;
}

.mdash-potential-total {
    padding: 2px 10px;
    flex: 0 0 auto;
    border: 1px solid var(--mdash-line);
    border-radius: 999px;
    color: var(--mdash-gold-light);
    background: rgba(0, 0, 0, 0.35);
    font-family: "Cinzel", serif;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
}

/* 10 tipos por linha (até 30 no total): card compacto e centrado. */
.mdash-potential-grid {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 8px;
}

.mdash-potential-card {
    display: grid;
    padding: 7px 6px 8px;
    justify-items: center;
    gap: 2px;
    border: 1px solid var(--mdash-line-soft);
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.3);
    text-align: center;
}

.mdash-potential-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.mdash-potential-img {
    width: 76%;
    height: 76%;
    object-fit: contain;
}

.mdash-potential-icon .mdash-img-fallback {
    font-size: 0.75rem;
}

.mdash-potential-name {
    max-width: 100%;
    overflow: hidden;
    color: var(--mdash-text);
    font-size: 0.62rem;
    text-overflow: ellipsis;
    text-transform: capitalize;
    white-space: nowrap;
}

.mdash-potential-value {
    color: var(--mdash-gold-light);
    font-family: "Cinzel", serif;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.mdash-potential-bar {
    display: block;
    width: 100%;
    height: 5px;
    margin-top: 2px;
    overflow: hidden;
    border-radius: 3px;
    background: rgba(201, 168, 76, 0.12);
}

.mdash-potential-bar i {
    display: block;
    width: var(--pct, 0%);
    height: 100%;
    min-width: 2px;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(201, 168, 76, 0.65), var(--mdash-gold-light));
    transform-origin: left;
    animation: mdashGrow 0.4s ease-out;
}

.mdash-data-note {
    margin: 12px 0 0;
    text-align: center;
}

.mdash-state {
    grid-column: 1 / -1;
    display: flex;
    min-height: 88px;
    padding: 20px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--mdash-muted);
    font-size: 0.78rem;
    font-style: italic;
    text-align: center;
}

.mdash-state strong,
.mdash-state span {
    display: block;
}

.mdash-state-error {
    color: #f0a29a;
}

.mdash-spinner {
    display: inline-block !important;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(201, 168, 76, 0.22);
    border-top-color: var(--mdash-gold);
    border-radius: 50%;
    animation: mdashSpin 0.75s linear infinite;
}

@keyframes mdashSpin {
    to { transform: rotate(360deg); }
}

@keyframes mdashGrow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    .mdash-spinner,
    .mdash-front-track b,
    .mdash-potential-bar i {
        animation: none;
    }

    .mdash-chart-line {
        transition: none;
    }

    .mdash-heat-cell:not(.h0):hover {
        transform: none;
    }
}

@media (max-width: 1100px) {
    .mdash-top,
    .mdash-main-grid {
        grid-template-columns: 1fr;
    }

    /* Empilhado, as frentes voltam a caber lado a lado e soltam a altura. */
    .mdash-fronts {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-auto-rows: auto;
    }

    .mdash-feed-list {
        max-height: 420px;
    }
}

@media (max-width: 820px) {
    .mdash-fronts {
        grid-template-columns: 1fr;
    }

    .mdash-front-body {
        grid-template-columns: auto minmax(84px, 1fr);
    }

    .mdash-front-rank {
        grid-column: 1 / -1;
    }

    .mdash-picker-grid {
        grid-template-columns: repeat(3, minmax(0, 159px));
    }

    .mdash-potential-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .mdash {
        padding-top: 10px;
    }

    .mdash-picker-card {
        padding: 12px;
    }

    .mdash-picker-grid {
        grid-template-columns: repeat(2, minmax(0, 159px));
    }

    .mdash-potential-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .mdash-filter-fields .item-field,
    .mdash-field-date .edit-input {
        width: 100%;
        max-width: none;
    }

    .mdash-panel,
    .mdash-front-card {
        padding: 12px;
    }
}

/* spec-energia-modos D4 — runs de batalha infinita.
   Sem teto no servidor, o freio e' o narrador ENXERGAR o volume: por isso o numero
   fica no rotulo da linha (por personagem) e no cabecalho (total do periodo), e nao
   so' no tooltip da celula. Cinza de proposito: e' informacao, nao alarme. */
.mdash-heat-inf {
    flex: 0 0 auto;
    font-style: normal;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 1px 5px;
    border-radius: 999px;
    color: #cfcfcf;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    cursor: help;
}

.mdash-heat-inf-total {
    color: #dcdcdc;
    font-weight: 700;
    white-space: nowrap;
}