/* ═══════════════════════════════════════════════════════════════
   TEMA DO SISTEMA
   ───────────────────────────────────────────────────────────────
   Arquivo único de estilo do sistema. A ideia é que nenhuma página
   precise de <style> próprio: tudo que for visual mora aqui.

   Como usar:
     1. O arquivo é carregado por partials/head-css.php, DEPOIS do
        app.min.css do template, para poder sobrescrever o que for
        preciso sem !important espalhado.
     2. As cores vêm das variáveis --highdmin-* que o title-meta.php
        já injeta a partir do .env. Aqui só as reempacotamos em nomes
        mais curtos (--c-*), então trocar a cor no .env muda tudo.

   ÍNDICE
     01. Tokens (cores, espaço, tipografia, raio, sombra)
     02. Reset e base
     03. Utilitários
     04. Tipografia
     05. Botões
     06. Formulários
     07. Cartões e superfícies
     08. Tabelas
     09. Badges e etiquetas
     10. Paginação
     11. Abas
     12. Slot de mídia
     13. Modal
     14. Tela de login
     15. Responsivo
   ═══════════════════════════════════════════════════════════════ */


/* ═══ 01. TOKENS ═══════════════════════════════════════════════ */
:root {
    /* ATENÇÃO: estes são apenas os valores de reserva.
       O que vale de verdade é o bloco injetado por
       partials/title-meta.php, montado a partir do .env.
       Editar aqui só muda o comportamento quando o PHP
       não injeta nada (ex.: preview estático). */
    --c-primary:      #1bdf60;
    --c-primary-rgb:  27, 223, 96;

    /* Camadas configuráveis (o PHP sobrescreve) */
    --c-bg-nav:       #0d0f12;
    --c-bg-top:       #0d0f12;
    --c-bg-card:      #111418;
    --c-bg-input:     #0d0f12;
    --c-bg-hover:     #161a1f;
    --c-text-strong:  #ffffff;
    --c-faint:        #5b6672;

    --c-nav-icon:     #b8c0c9;
    --c-nav-icon-bg:  #161a1f;
    --c-nav-label:    #b8c0c9;
    --c-nav-desc:     #5b6672;
    --c-nav-title:    #5b6672;
    --c-nav-hover-bg: #161a1f;
    --c-nav-active-bg: rgba(27, 223, 96, .12);
    --c-nav-active-ico: #ffffff;
    --c-nav-active-ico-bg: #1bdf60;
    --c-nav-active-label: #ffffff;
    --c-nav-bar:      #1bdf60;

    --c-top-icon:       #8b95a1;
    --c-top-icon-hover: #1bdf60;
    --c-top-hello:      #ffffff;
    --c-top-name:       #1bdf60;
    --c-support-bg:     #1bdf60;
    --c-support-text:   #08090b;

    --c-btn-bg:       #1bdf60;
    --c-btn-text:     #08090b;
    --c-avatar-bg:    #1bdf60;
    --c-avatar-text:  #ffffff;

    /* Tons de chumbo — base neutra da interface, independente da cor
       primária. Usados nas superfícies da tela de entrada. */
    --c-ink-950: #08090b;
    --c-ink-900: #0d0f12;
    --c-ink-850: #111418;
    --c-ink-800: #161a1f;
    --c-ink-700: #1e232a;
    --c-ink-600: #2a3038;
    --c-ink-500: #39414b;
    --c-ink-400: #5b6672;
    --c-ink-300: #8b95a1;
    --c-ink-200: #b8c0c9;
    --c-success:      var(--highdmin-success, #0acf97);
    --c-danger:       var(--highdmin-danger, #f1556c);
    --c-warning:      var(--highdmin-warning, #f9bc0b);
    --c-info:         #3b82f6;

    --c-bg:           var(--highdmin-body-bg, #17181e);
    --c-surface:      var(--highdmin-secondary-bg, #1e1f27);
    --c-text:         var(--highdmin-body-color, #aab8c5);
    --c-muted:        var(--highdmin-secondary-color, #8b95a5);
    --c-border:       var(--highdmin-border-color, #37394d);
    --c-bg-modal:     #0e0e14;   /* fundo unico de todos os modais */

    /* Camadas translúcidas — dão profundidade sem cor fixa */
    --c-layer-1:      rgba(var(--c-primary-rgb), .04);
    --c-layer-2:      rgba(var(--c-primary-rgb), .07);
    --c-layer-3:      rgba(var(--c-primary-rgb), .12);
    --c-layer-4:      rgba(var(--c-primary-rgb), .18);

    /* Espaçamento — escala de 4px */
    --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
    --sp-5: 20px;  --sp-6: 24px;  --sp-7: 32px;  --sp-8: 40px;
    --sp-9: 48px;  --sp-10: 64px;

    /* Tipografia */
    --fs-xs:  11px;   --fs-sm:  12.5px;  --fs-base: 14px;
    --fs-md:  15.5px; --fs-lg:  18px;    --fs-xl:   23px;
    --fs-2xl: 30px;   --fs-3xl: 40px;
    --fw-normal: 400; --fw-medium: 500;
    --fw-semi:   600; --fw-bold:   700;  --fw-black: 800;
    --lh-tight: 1.2;  --lh-base: 1.5;    --lh-loose: 1.7;
    --track-wide: .08em;

    /* Raio */
    --r-sm: 7px;   --r-md: 10px;  --r-lg: 13px;
    --r-xl: 18px;  --r-full: 999px;

    /* Sombra */
    --sh-sm: 0 2px 8px rgba(0,0,0,.16);
    --sh-md: 0 8px 24px rgba(0,0,0,.24);
    --sh-lg: 0 22px 60px rgba(0,0,0,.34);
    --sh-glow: 0 0 34px rgba(var(--c-primary-rgb), .45);

    /* Transição */
    --t-fast: .12s ease;
    --t-base: .2s ease;
}


/* ═══ 02. RESET E BASE ═════════════════════════════════════════ */
.mp *,
.mp *::before,
.mp *::after { box-sizing: border-box; }

.mp {
    color: var(--c-text);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
}

/* Barra de rolagem discreta, no tom do tema */
.mp-scroll::-webkit-scrollbar { width: 7px; height: 7px; }
.mp-scroll::-webkit-scrollbar-track { background: transparent; }
.mp-scroll::-webkit-scrollbar-thumb {
    background: var(--c-border);
    border-radius: var(--r-full);
}
.mp-scroll::-webkit-scrollbar-thumb:hover { background: var(--c-muted); }


/* ═══ 03. UTILITÁRIOS ══════════════════════════════════════════ */
.mp-stack   { display: flex; flex-direction: column; }
.mp-row     { display: flex; align-items: center; }
.mp-between { display: flex; align-items: center; justify-content: space-between; }
.mp-center  { display: flex; align-items: center; justify-content: center; }
.mp-wrap    { flex-wrap: wrap; }
.mp-fill    { flex: 1; min-width: 0; }

.mp-gap-1 { gap: var(--sp-1); }  .mp-gap-2 { gap: var(--sp-2); }
.mp-gap-3 { gap: var(--sp-3); }  .mp-gap-4 { gap: var(--sp-4); }
.mp-gap-5 { gap: var(--sp-5); }  .mp-gap-6 { gap: var(--sp-6); }

.mp-mt-1 { margin-top: var(--sp-1); }  .mp-mt-2 { margin-top: var(--sp-2); }
.mp-mt-3 { margin-top: var(--sp-3); }  .mp-mt-4 { margin-top: var(--sp-4); }
.mp-mt-5 { margin-top: var(--sp-5); }  .mp-mt-6 { margin-top: var(--sp-6); }
.mp-mb-1 { margin-bottom: var(--sp-1); } .mp-mb-2 { margin-bottom: var(--sp-2); }
.mp-mb-3 { margin-bottom: var(--sp-3); } .mp-mb-4 { margin-bottom: var(--sp-4); }
.mp-mb-5 { margin-bottom: var(--sp-5); } .mp-mb-6 { margin-bottom: var(--sp-6); }
.mp-mb-0 { margin-bottom: 0; }

.mp-hide { display: none !important; }
.mp-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-nowrap { white-space: nowrap; }

/* Esconde visualmente mas mantém para leitores de tela */
.mp-sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}


/* ═══ 04. TIPOGRAFIA ═══════════════════════════════════════════ */
.mp-title    { font-size: var(--fs-xl); font-weight: var(--fw-black); line-height: var(--lh-tight); }
.mp-subtitle { font-size: var(--fs-lg); font-weight: var(--fw-bold);  line-height: var(--lh-tight); }
.mp-text     { font-size: var(--fs-base); }
.mp-small    { font-size: var(--fs-sm); }
.mp-tiny     { font-size: var(--fs-xs); }
.mp-faint    { color: var(--c-faint); }
.mp-muted    { color: var(--c-muted); }
.mp-strong   { font-weight: var(--fw-bold); }

/* Rótulo pequeno em caixa alta, usado acima de blocos */
.mp-eyebrow {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c-primary);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.mp-eyebrow::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: var(--r-full);
    background: var(--c-primary);
}

/* Régua que separa o cabeçalho do conteúdo */
.mp-rule {
    height: 2px; width: 100%;
    margin: var(--sp-4) 0 var(--sp-6);
    border-radius: 2px;
    background: linear-gradient(90deg, var(--c-primary), transparent);
}

.mp-c-primary { color: var(--c-primary); }
.mp-c-success { color: var(--c-success); }
.mp-c-danger  { color: var(--c-danger); }
.mp-c-warning { color: var(--c-warning); }


/* ═══ 05. BOTÕES ═══════════════════════════════════════════════ */
.mp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    border: 1px solid transparent;
    border-radius: var(--r-md);
    padding: 11px 20px;
    font-size: var(--fs-base);
    font-weight: var(--fw-semi);
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: filter var(--t-fast), background var(--t-fast),
                border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
    white-space: nowrap;
}
.mp-btn:active { transform: translateY(1px); }
.mp-btn:disabled,
.mp-btn.is-disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* Preenchido — o texto usa a cor do fundo da página para contrastar */
.mp-btn-primary {
    background: var(--c-btn-bg);
    border-color: var(--c-btn-bg);
    color: var(--c-btn-text);
    font-weight: var(--fw-bold);
}
.mp-btn-primary:hover { filter: brightness(1.08); color: var(--c-bg); }

.mp-btn-danger  { background: var(--c-danger);  border-color: var(--c-danger);  color: #fff; }
.mp-btn-danger:hover { filter: brightness(1.08); color: #fff; }
.mp-btn-success { background: var(--c-success); border-color: var(--c-success); color: #fff; }
.mp-btn-success:hover { filter: brightness(1.08); color: #fff; }

/* Contornado — ação secundária */
.mp-btn-ghost {
    background: transparent;
    border-color: var(--c-border);
    color: var(--c-text);
}
.mp-btn-ghost:hover { border-color: var(--c-primary); color: var(--c-primary); }
.mp-btn-ghost.is-danger:hover { border-color: var(--c-danger); color: var(--c-danger); }

/* Suave — fundo translúcido na cor primária */
.mp-btn-soft {
    background: var(--c-layer-3);
    border-color: transparent;
    color: var(--c-primary);
}
.mp-btn-soft:hover { background: var(--c-layer-4); color: var(--c-primary); }

/* Tamanhos */
.mp-btn-sm  { padding: 7px 13px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.mp-btn-lg  { padding: 14px 26px; font-size: var(--fs-md); border-radius: var(--r-lg); }
.mp-btn-block { width: 100%; }

/* Só ícone, quadrado */
.mp-btn-icon {
    width: 34px; height: 34px;
    padding: 0;
    border-radius: var(--r-sm);
    border: 1px solid var(--c-border);
    background: transparent;
    color: var(--c-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color var(--t-fast), color var(--t-fast);
}
.mp-btn-icon:hover { border-color: var(--c-primary); color: var(--c-primary); }
.mp-btn-icon.is-danger:hover { border-color: var(--c-danger); color: var(--c-danger); }


/* ═══ 06. FORMULÁRIOS ══════════════════════════════════════════ */
.mp-label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    margin-bottom: 7px;
}
.mp-label-upper {
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    font-size: var(--fs-xs);
    color: var(--c-muted);
}

.mp-input,
.mp-select,
.mp-textarea {
    width: 100%;
    background: var(--c-bg-input);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 12px 15px;
    color: var(--c-text);
    font-size: var(--fs-base);
    font-family: inherit;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.mp-input::placeholder,
.mp-textarea::placeholder { color: var(--c-muted); opacity: .75; }

.mp-input:focus,
.mp-select:focus,
.mp-textarea:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb), .13);
}
.mp-input:disabled,
.mp-textarea:disabled { opacity: .55; cursor: not-allowed; }

.mp-textarea { min-height: 110px; resize: vertical; line-height: var(--lh-base); }

/* Select: a seta nativa some (vinha branca em vários navegadores)
   e desenhamos a nossa em SVG embutido. */
.mp-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 38px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b95a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}
/* A lista aberta é desenhada pelo sistema operacional: sem estas
   duas regras ela aparece com fundo branco no tema escuro. */
.mp-select option { background-color: #1c1f26; color: #e6e9ef; }
.mp-select option:checked { background-color: var(--c-primary); color: #fff; }

/* Campo com ícone à esquerda */
.mp-field { position: relative; }
.mp-field .mp-field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--c-muted);
    pointer-events: none;
    z-index: 2;
}
.mp-field .mp-input { padding-left: 42px; }

/* Botão dentro do campo (olho da senha) */
.mp-field-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    padding: 8px 10px;
    font-size: 17px;
    color: var(--c-muted);
    cursor: pointer;
    z-index: 2;
    line-height: 1;
}
.mp-field-btn:hover { color: var(--c-primary); }

.mp-help {
    font-size: var(--fs-xs);
    color: var(--c-muted);
    margin-top: 5px;
}

/* Caixa de seleção */
.mp-check {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--c-muted);
    cursor: pointer;
    user-select: none;
}
.mp-check input {
    width: 16px; height: 16px;
    accent-color: var(--c-primary);
    cursor: pointer;
    margin: 0;
}

/* Caixa de seleção desenhada (para listas customizadas) */
.mp-box-check {
    width: 20px; height: 20px;
    flex-shrink: 0;
    border: 2px solid var(--c-border);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: transparent;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.mp-box-check.is-on {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}


/* ═══ 07. CARTÕES E SUPERFÍCIES ════════════════════════════════ */
.mp-card {
    background: var(--c-layer-1);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
}
.mp-card-flush { padding: 0; overflow: hidden; }
.mp-card-raised { box-shadow: var(--sh-lg); border-radius: var(--r-xl); }

/* Cartão de número/indicador */
.mp-stat {
    background: var(--c-layer-1);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--sp-4) var(--sp-5);
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}
.mp-stat-icon {
    width: 46px; height: 46px;
    flex-shrink: 0;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    background: var(--c-layer-3);
    color: var(--c-primary);
}
.mp-stat-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--c-muted);
    margin-bottom: 3px;
}
.mp-stat-value {
    font-size: 26px;
    font-weight: var(--fw-black);
    line-height: var(--lh-tight);
}

/* Ícone quadrado, em variantes de cor */
.mp-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md);
    background: var(--c-layer-3);
    color: var(--c-primary);
    flex-shrink: 0;
}
.mp-icon-box.is-success { background: rgba(10,207,151,.14);  color: var(--c-success); }
.mp-icon-box.is-danger  { background: rgba(241,85,108,.14);  color: var(--c-danger); }
.mp-icon-box.is-warning { background: rgba(245,158,11,.14);  color: var(--c-warning); }
.mp-icon-box.is-info    { background: rgba(59,130,246,.14);  color: var(--c-info); }

/* Aviso/caixa informativa */
.mp-note {
    display: flex;
    gap: var(--sp-4);
    align-items: center;
    background: var(--c-layer-1);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--sp-4) var(--sp-5);
}
.mp-note-title {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--c-text);
    margin-bottom: 2px;
}
.mp-note-icon {
    width: 46px; height: 46px;
    flex-shrink: 0;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: var(--c-layer-3);
    color: var(--c-primary);
}

/* Estado vazio */
.mp-empty {
    text-align: center;
    padding: var(--sp-9) var(--sp-5);
}
.mp-empty-icon {
    font-size: 44px;
    opacity: .32;
    display: block;
    margin-bottom: var(--sp-3);
}


/* ═══ 08. TABELAS ══════════════════════════════════════════════ */
.mp-table-wrap {
    background: var(--c-layer-1);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.mp-table { width: 100%; border-collapse: collapse; }
.mp-table th {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--c-muted);
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--c-border);
}
.mp-table td {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-border);
    font-size: var(--fs-base);
    vertical-align: middle;
}
.mp-table tbody tr:last-child td { border-bottom: 0; }
.mp-table tbody tr:hover { background: var(--c-layer-1); }
.mp-table .mp-td-right { text-align: right; }

/* Avatar circular com inicial */
.mp-avatar {
    width: 36px; height: 36px;
    border-radius: var(--r-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-bold);
    font-size: var(--fs-md);
    text-transform: uppercase;
    background: var(--c-layer-3);
    color: var(--c-primary);
    flex-shrink: 0;
}
.mp-avatar-lg { width: 78px; height: 78px; font-size: var(--fs-xl); }


/* ═══ 09. BADGES ═══════════════════════════════════════════════ */
.mp-badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: var(--fw-bold);
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--r-sm);
    background: var(--c-layer-4);
    color: var(--c-primary);
    white-space: nowrap;
}
.mp-badge.is-success { background: rgba(10,207,151,.16); color: var(--c-success); }
.mp-badge.is-danger  { background: rgba(241,85,108,.16); color: var(--c-danger); }
.mp-badge.is-warning { background: rgba(245,158,11,.16); color: var(--c-warning); }
.mp-badge.is-info    { background: rgba(59,130,246,.16); color: var(--c-info); }
.mp-badge.is-muted   { background: var(--c-layer-2);     color: var(--c-muted); }

/* Contador redondo */
.mp-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px; height: 20px;
    padding: 0 6px;
    border-radius: var(--r-full);
    background: var(--c-primary);
    color: var(--c-bg);
    font-size: 10.5px;
    font-weight: var(--fw-bold);
}

/* Selo com contorno */
.mp-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    border: 1px solid rgba(var(--c-primary-rgb), .35);
    background: rgba(var(--c-primary-rgb), .09);
    color: var(--c-primary);
    border-radius: var(--r-full);
    padding: 8px 16px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: .09em;
    text-transform: uppercase;
}


/* ═══ 10. PAGINAÇÃO ════════════════════════════════════════════ */
.mp-pag {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
    flex-wrap: wrap;
}
.mp-pag-info { font-size: var(--fs-sm); color: var(--c-muted); }
.mp-pag-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.mp-pag-btn {
    min-width: 36px; height: 36px;
    padding: 0 11px;
    border-radius: var(--r-sm);
    border: 1px solid var(--c-border);
    background: var(--c-layer-1);
    color: var(--c-text);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.mp-pag-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.mp-pag-btn.is-active {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-bg);
}


/* ═══ 11. ABAS ═════════════════════════════════════════════════ */
/* Abas em pílula, dentro de uma caixa */
.mp-tabs {
    display: flex;
    gap: 6px;
    background: var(--c-layer-1);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 6px;
    width: fit-content;
    max-width: 100%;
    flex-wrap: wrap;
}
.mp-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    border: 0;
    background: transparent;
    border-radius: var(--r-md);
    padding: 9px 18px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    cursor: pointer;
    text-decoration: none;
    color: var(--c-text);
    transition: background var(--t-fast), color var(--t-fast);
}
.mp-tab:hover { color: var(--c-primary); }
/* O seletor repetido com <a> é necessário porque o CSS do template
   força a cor dos links e sobrescreveria a regra da aba ativa. */
a.mp-tab.is-active,
a.mp-tab.is-active:hover,
a.mp-tab.is-active:focus,
.mp-tab.is-active {
    background: var(--c-primary);
    color: var(--c-bg);
}
.mp-tab.is-active i { color: var(--c-bg); }

/* Abas em barra segmentada (ocupam a largura toda) */
.mp-segment {
    display: flex;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.mp-segment-item {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 13px 10px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--c-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background var(--t-fast), color var(--t-fast);
}
.mp-segment-item + .mp-segment-item { border-left: 1px solid var(--c-border); }
.mp-segment-item:hover { background: var(--c-layer-2); }
.mp-segment-item.is-active { background: var(--c-layer-3); color: var(--c-primary); }


/* ═══ 12. SLOT DE MÍDIA ════════════════════════════════════════ */
.mp-media {
    position: relative;
    width: 96px; height: 96px;
    border: 1px dashed var(--c-border);
    border-radius: var(--r-lg);
    background: var(--c-layer-1);
    color: var(--c-muted);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: var(--fs-xs);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--t-fast), color var(--t-fast);
}
.mp-media:hover { border-color: var(--c-primary); color: var(--c-primary); }
.mp-media i { font-size: 22px; }
.mp-media.has-thumb { border-style: solid; padding: 0; }
.mp-media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-md); }

/* Ícone de play sobre a miniatura de vídeo */
.mp-media-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff;
    background: rgba(0,0,0,.32);
    pointer-events: none;
}
/* Botão de remover, no canto superior direito */
.mp-media-rm {
    position: absolute;
    top: 3px; right: 3px;
    width: 20px; height: 20px;
    border-radius: var(--r-full);
    background: rgba(241,85,108,.92);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
}
.mp-media-rm:hover { background: var(--c-danger); }


/* ═══ 13. MODAL ════════════════════════════════════════════════ */
.mp-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(0,0,0,.66);
    backdrop-filter: blur(3px);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: var(--sp-5);
    /* Modal mais alto que a tela rolava para fora e ficava cortado no topo.
       Com o overlay rolando e o modal centrado por margem, ele nunca perde
       o cabecalho. */
    overflow-y: auto;
}
.mp-overlay.is-open { display: flex; }
.mp-overlay > .mp-modal { margin: auto; }
.mp-modal {
    width: 100%;
    max-width: 560px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    overflow: hidden;
}
.mp-modal-head {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}
.mp-modal-body { padding: var(--sp-5); }
.mp-modal-foot {
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--c-border);
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
}
.mp-modal-x {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--c-text);
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    opacity: .65;
}
.mp-modal-x:hover { opacity: 1; }


/* ═══ 14. TELA DE ENTRADA (login) ══════════════════════════════
   Estrutura: painel de apresentação à esquerda, divisória neon
   vertical no meio, formulário à direita. O fundo tem linhas
   verticais com um pulso de luz percorrendo cada uma.
   ═════════════════════════════════════════════════════════════ */
.mp-auth {
    min-height: 100vh;
    display: flex;
    background: var(--c-ink-950);
    position: relative;
    overflow: hidden;
}

/* ── Fundo animado: linhas verticais com pulso ── */
.mp-auth-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
/* Brilho difuso atrás de tudo */
.mp-auth-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 28% 42%, rgba(var(--c-primary-rgb), .13) 0%, transparent 62%),
        radial-gradient(ellipse 50% 45% at 78% 78%, rgba(var(--c-primary-rgb), .07) 0%, transparent 60%);
}
/* Trilhos verticais fixos, bem sutis */
.mp-auth-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 78px 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}

/* Cada risco é um elemento; o pulso desce em loop */
.mp-auth-beam {
    position: absolute;
    top: -35%;
    width: 1px;
    height: 35%;
    background: linear-gradient(180deg,
        transparent,
        rgba(var(--c-primary-rgb), .75) 45%,
        rgba(var(--c-primary-rgb), 1) 68%,
        rgba(var(--c-primary-rgb), .75) 82%,
        transparent);
    box-shadow: 0 0 12px 1px rgba(var(--c-primary-rgb), .55);
    animation: mp-beam 7s linear infinite;
    opacity: 0;
    will-change: transform;
}
@keyframes mp-beam {
    0%   { transform: translateY(0);     opacity: 0; }
    8%   { opacity: .9; }
    82%  { opacity: .9; }
    100% { transform: translateY(390vh); opacity: 0; }
}
/* Posições, atrasos e durações diferentes: o movimento não fica sincronizado */
.mp-auth-beam:nth-child(1) { left: 9%;  animation-duration: 6.5s;  animation-delay: 0s; }
.mp-auth-beam:nth-child(2) { left: 21%; animation-duration: 9s;    animation-delay: 2.4s; }
.mp-auth-beam:nth-child(3) { left: 33%; animation-duration: 7.4s;  animation-delay: 1.1s; }
.mp-auth-beam:nth-child(4) { left: 46%; animation-duration: 10.5s; animation-delay: 3.7s; }
.mp-auth-beam:nth-child(5) { left: 58%; animation-duration: 8s;    animation-delay: .6s; }
.mp-auth-beam:nth-child(6) { left: 70%; animation-duration: 11s;   animation-delay: 4.6s; }
.mp-auth-beam:nth-child(7) { left: 83%; animation-duration: 7s;    animation-delay: 1.9s; }
.mp-auth-beam:nth-child(8) { left: 93%; animation-duration: 9.6s;  animation-delay: 3.1s; }

/* Respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
    .mp-auth-beam { animation: none; opacity: .18; top: 0; height: 100%; }
}

/* ── Lado esquerdo: apresentação ── */
.mp-auth-side {
    flex: 1 1 auto;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--sp-9) 60px;
    min-width: 0;
}
.mp-auth-side-in { width: 100%; max-width: 660px; }

.mp-auth-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-8);
    text-decoration: none;
}
/* A logo do sistema vem de APP_LOGO_LIGHT (assets/images/logo.png).
   max-width evita que uma logo larga estoure o layout; o auto na
   altura preserva a proporção de qualquer arquivo. */
.mp-auth-logo img {
    height: 42px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
}

.mp-auth-title {
    font-size: clamp(32px, 3.9vw, 54px);
    font-weight: var(--fw-black);
    line-height: 1.03;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 var(--sp-5);
}
.mp-auth-title .hl {
    color: var(--c-primary);
    text-shadow: 0 0 38px rgba(var(--c-primary-rgb), .55);
}
.mp-auth-lead {
    font-size: var(--fs-md);
    line-height: 1.62;
    max-width: 560px;
    color: var(--c-ink-300);
    margin: 0 0 var(--sp-7);
}
.mp-auth-lead b { color: var(--c-primary); font-weight: var(--fw-semi); }

/* Cinco informativos numa linha só — sem quebrar */
.mp-auth-feats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--sp-2);
    margin-bottom: var(--sp-6);
    max-width: 660px;
}
.mp-auth-feat {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    background: rgba(255,255,255,.022);
    border: 1px solid var(--c-ink-700);
    border-radius: var(--r-md);
    padding: 11px 10px;
    min-width: 0;
    transition: border-color var(--t-base), background var(--t-base);
}
.mp-auth-feat:hover {
    border-color: rgba(var(--c-primary-rgb), .4);
    background: rgba(var(--c-primary-rgb), .05);
}
.mp-auth-feat > i {
    font-size: 17px;
    color: var(--c-primary);
    flex-shrink: 0;
}
.mp-auth-feat-txt { min-width: 0; }
.mp-auth-feat .t {
    font-size: 11.5px;
    font-weight: var(--fw-bold);
    line-height: 1.25;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mp-auth-feat .s {
    font-size: 10px;
    color: var(--c-ink-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bloco de destaque com lista */
.mp-auth-box {
    display: flex;
    gap: var(--sp-5);
    align-items: flex-start;
    background: rgba(255,255,255,.022);
    border: 1px solid var(--c-ink-700);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    max-width: 660px;
    margin-bottom: var(--sp-6);
}
.mp-auth-box-icon {
    width: 62px; height: 62px;
    flex-shrink: 0;
    border-radius: var(--r-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 29px;
    color: var(--c-primary);
    background: rgba(var(--c-primary-rgb), .1);
    border: 1px solid rgba(var(--c-primary-rgb), .26);
}
.mp-auth-box h5 {
    font-size: 16px;
    font-weight: var(--fw-bold);
    color: #fff;
    margin: 0 0 var(--sp-3);
}
.mp-auth-list { list-style: none; padding: 0; margin: 0; }
.mp-auth-list li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: var(--fs-sm);
    color: var(--c-ink-300);
    margin-bottom: 6px;
}
.mp-auth-list li:last-child { margin-bottom: 0; }
.mp-auth-list i { color: var(--c-primary); font-size: 15px; flex-shrink: 0; }

/* Prova social */
.mp-auth-proof {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    background: rgba(255,255,255,.022);
    border: 1px solid var(--c-ink-700);
    border-radius: var(--r-lg);
    padding: var(--sp-4) var(--sp-5);
    max-width: 660px;
    flex-wrap: wrap;
}
.mp-auth-dots { display: flex; }
.mp-auth-dots span {
    width: 32px; height: 32px;
    border-radius: var(--r-full);
    border: 2px solid var(--c-ink-900);
    margin-right: -10px;
    background: var(--c-ink-600);
}
.mp-auth-dots span:nth-child(1) { background: linear-gradient(135deg,#e8c07d,#c99a4e); }
.mp-auth-dots span:nth-child(2) { background: linear-gradient(135deg,#7dd8a0,#4aa872); }
.mp-auth-dots span:nth-child(3) { background: linear-gradient(135deg,#7dc5e8,#4a90b8); }
.mp-auth-dots span:nth-child(4) { background: linear-gradient(135deg,#a89ae8,#7566c4); }
.mp-auth-dots span:nth-child(5) { background: linear-gradient(135deg,#e89ab8,#c46689); margin-right: 0; }
.mp-auth-proof-sep { width: 1px; height: 34px; background: var(--c-ink-700); }
.mp-auth-stars { color: #f5b544; font-size: 14px; letter-spacing: 1px; }

/* ── Divisória neon vertical ── */
.mp-auth-divider {
    position: relative;
    z-index: 2;
    width: 1px;
    flex-shrink: 0;
    align-self: stretch;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(var(--c-primary-rgb), .28) 12%,
        rgba(var(--c-primary-rgb), .95) 50%,
        rgba(var(--c-primary-rgb), .28) 88%,
        transparent 100%);
    box-shadow:
        0 0 16px 1px rgba(var(--c-primary-rgb), .5),
        0 0 42px 4px rgba(var(--c-primary-rgb), .22);
}
/* Ponto de luz que sobe e desce sobre a divisória */
.mp-auth-divider::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 90px;
    border-radius: var(--r-full);
    background: linear-gradient(180deg, transparent, var(--c-primary), transparent);
    filter: blur(1px);
    animation: mp-divider-run 5.5s ease-in-out infinite;
}
@keyframes mp-divider-run {
    0%, 100% { top: 6%;  opacity: .25; }
    50%      { top: 82%; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .mp-auth-divider::after { animation: none; top: 45%; opacity: .6; }
}

/* ── Lado direito: formulário ── */
.mp-auth-main {
    flex: 0 0 560px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-8) var(--sp-7);
    background: rgba(0,0,0,.28);
}
.mp-auth-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 460px;
}
.mp-auth-card {
    width: 100%;
    background: var(--c-ink-850);
    border: 1px solid var(--c-ink-700);
    border-radius: var(--r-xl);
    padding: var(--sp-8) var(--sp-7);
    box-shadow: var(--sh-lg);
}
.mp-auth-avatar {
    width: 84px; height: 84px;
    margin: 0 auto var(--sp-5);
    border-radius: var(--r-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-ink-950);
    border: 1px solid rgba(var(--c-primary-rgb), .32);
    box-shadow: 0 0 30px rgba(var(--c-primary-rgb), .18);
}
.mp-auth-avatar img { height: 42px; }
.mp-auth-avatar i { font-size: 38px; color: var(--c-primary); }

.mp-auth-heading {
    text-align: center;
    font-size: 26px;
    font-weight: var(--fw-black);
    color: #fff;
    margin: 0 0 7px;
}
.mp-auth-sub {
    text-align: center;
    font-size: var(--fs-base);
    color: var(--c-ink-400);
    margin: 0 0 var(--sp-6);
}

/* Campos do formulário de entrada */
.mp-auth-card .mp-label { color: var(--c-ink-200); }
.mp-auth-card .mp-field { margin-bottom: 18px; }
.mp-auth-card .mp-input {
    background: var(--c-ink-900);
    border-color: var(--c-ink-700);
    color: #fff;
    padding-top: 14px;
    padding-bottom: 14px;
}
.mp-auth-card .mp-input::placeholder { color: var(--c-ink-500); }
.mp-auth-card .mp-input:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb), .14);
}

.mp-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
    flex-wrap: wrap;
}
.mp-auth-link {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--c-primary);
    text-decoration: none;
}
.mp-auth-link:hover { text-decoration: underline; }

/* Botão principal, com brilho */
.mp-auth-submit {
    width: 100%;
    border: 0;
    border-radius: var(--r-md);
    padding: 15px;
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    cursor: pointer;
    color: #05130a;
    background: linear-gradient(180deg,
        var(--c-primary),
        rgba(var(--c-primary-rgb), .82));
    box-shadow: 0 6px 22px rgba(var(--c-primary-rgb), .28);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: filter var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.mp-auth-submit:hover {
    filter: brightness(1.07);
    box-shadow: 0 8px 28px rgba(var(--c-primary-rgb), .38);
}
.mp-auth-submit:active { transform: translateY(1px); }

.mp-auth-foot {
    text-align: center;
    font-size: var(--fs-base);
    color: var(--c-ink-400);
    margin: var(--sp-5) 0 0;
}
.mp-auth-foot a { color: var(--c-primary); font-weight: var(--fw-bold); text-decoration: none; }
.mp-auth-foot a:hover { text-decoration: underline; }

.mp-auth-legal {
    text-align: center;
    font-size: var(--fs-xs);
    line-height: var(--lh-loose);
    color: var(--c-ink-500);
    margin: var(--sp-5) 0 0;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--c-ink-700);
}
.mp-auth-legal a { color: var(--c-ink-400); text-decoration: underline; }
.mp-auth-legal a:hover { color: var(--c-primary); }

/* Caixa abaixo do cartão de entrada */
.mp-auth-note {
    width: 100%;
    margin-top: var(--sp-4);
    display: flex;
    gap: var(--sp-4);
    align-items: center;
    background: var(--c-ink-850);
    border: 1px solid var(--c-ink-700);
    border-radius: var(--r-lg);
    padding: var(--sp-4) var(--sp-5);
}
.mp-auth-note-icon {
    width: 54px; height: 54px;
    flex-shrink: 0;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    color: var(--c-primary);
    background: rgba(var(--c-primary-rgb), .1);
    border: 1px solid rgba(var(--c-primary-rgb), .24);
}
.mp-auth-note-title {
    display: block;
    font-size: var(--fs-md);
    font-weight: var(--fw-black);
    text-transform: uppercase;
    color: var(--c-primary);
    line-height: var(--lh-tight);
    margin-bottom: 3px;
}
.mp-auth-note-text { font-size: var(--fs-sm); color: var(--c-ink-400); line-height: 1.45; }

/* ── Cadastro: indicador de etapas ── */
.mp-steps {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
}
.mp-step {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--c-ink-500);
    white-space: nowrap;
}
.mp-step-dot {
    width: 17px; height: 17px;
    border-radius: var(--r-full);
    border: 2px solid var(--c-ink-600);
    flex-shrink: 0;
    transition: background var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.mp-step.is-active { color: var(--c-primary); }
.mp-step.is-active .mp-step-dot {
    background: var(--c-primary);
    border-color: var(--c-primary);
    box-shadow: 0 0 12px rgba(var(--c-primary-rgb), .55);
}
.mp-step.is-done { color: var(--c-ink-300); }
.mp-step.is-done .mp-step-dot {
    background: var(--c-primary);
    border-color: var(--c-primary);
}
.mp-step-line {
    flex: 1;
    height: 1px;
    background: var(--c-ink-700);
    min-width: 18px;
}

/* Etapas do formulário: só a ativa aparece */
.mp-pane { display: none; }
.mp-pane.is-active { display: block; }

/* Divisor com texto ("ou preencha seus dados") */
.mp-divider-text {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: var(--sp-5) 0;
    font-size: var(--fs-xs);
    color: var(--c-ink-500);
    white-space: nowrap;
}
.mp-divider-text::before,
.mp-divider-text::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--c-ink-700);
}

/* Grade de benefícios dentro do cartão */
.mp-perks {
    background: var(--c-ink-900);
    border: 1px solid var(--c-ink-700);
    border-radius: var(--r-lg);
    padding: var(--sp-4) var(--sp-3);
    margin-bottom: var(--sp-5);
}
.mp-perks-title {
    text-align: center;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-ink-300);
    margin-bottom: var(--sp-4);
}
.mp-perks-title b { color: var(--c-primary); }
.mp-perks-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}
.mp-perk {
    text-align: center;
    padding: 0 var(--sp-2);
    border-right: 1px solid var(--c-ink-700);
}
.mp-perk:last-child { border-right: 0; }
.mp-perk i {
    font-size: 21px;
    color: var(--c-primary);
    display: block;
    margin-bottom: 6px;
}
.mp-perk span {
    font-size: 10.5px;
    font-weight: var(--fw-bold);
    color: var(--c-ink-200);
    line-height: 1.25;
    display: block;
}

/* Linha com dois campos lado a lado */
.mp-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
}

/* Link centralizado que revela um campo escondido */
.mp-reveal {
    display: block;
    width: 100%;
    text-align: center;
    background: none;
    border: 0;
    padding: var(--sp-1) 0;
    margin-bottom: var(--sp-4);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--c-primary);
    cursor: pointer;
}
.mp-reveal:hover { text-decoration: underline; }

/* Medidor de força da senha */
.mp-meter {
    display: flex;
    gap: 5px;
    margin: 9px 0 5px;
}
.mp-meter span {
    flex: 1;
    height: 4px;
    border-radius: var(--r-full);
    background: var(--c-ink-700);
    transition: background var(--t-base);
}
.mp-meter.lv-1 span:nth-child(1) { background: var(--c-danger); }
.mp-meter.lv-2 span:nth-child(-n+2) { background: var(--c-warning); }
.mp-meter.lv-3 span:nth-child(-n+3) { background: #8bd450; }
.mp-meter.lv-4 span { background: var(--c-primary); }

/* Aviso de campo (erro/ok) abaixo do input */
.mp-hint { font-size: var(--fs-xs); margin-top: 5px; }
.mp-hint.is-error { color: var(--c-danger); }
.mp-hint.is-ok    { color: var(--c-primary); }

/* Marca de obrigatório */
.mp-req { color: var(--c-danger); }

/* Termos de uso */
.mp-terms {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--c-ink-400);
    line-height: 1.5;
    margin-bottom: var(--sp-5);
    cursor: pointer;
}
.mp-terms input {
    width: 16px; height: 16px;
    accent-color: var(--c-primary);
    cursor: pointer;
    margin: 2px 0 0;
    flex-shrink: 0;
}
.mp-terms a { color: var(--c-primary); text-decoration: none; }
.mp-terms a:hover { text-decoration: underline; }

/* Botões de navegação entre etapas */
.mp-nav-btns { display: flex; gap: var(--sp-3); }
.mp-nav-btns .mp-auth-submit { flex: 1; }
.mp-btn-back {
    flex: 0 0 auto;
    border: 1px solid var(--c-ink-600);
    background: transparent;
    color: var(--c-ink-300);
    border-radius: var(--r-md);
    padding: 15px 20px;
    font-size: var(--fs-base);
    font-weight: var(--fw-semi);
    cursor: pointer;
    transition: border-color var(--t-fast), color var(--t-fast);
}
.mp-btn-back:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* ── Variante centrada (recuperar senha, mensagens simples) ── */
.mp-auth.is-center {
    align-items: center;
    justify-content: center;
    padding: var(--sp-6) var(--sp-5);
}
.mp-auth-solo {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
}
.mp-auth-solo .mp-auth-card { padding: var(--sp-8) var(--sp-7); }

/* Logo acima do cartão */
.mp-auth-solo-logo {
    display: block;
    text-align: center;
    margin-bottom: var(--sp-6);
}
.mp-auth-solo-logo img {
    height: 40px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
}

/* Ícone grande no topo do cartão */
.mp-auth-icon {
    width: 76px; height: 76px;
    margin: 0 auto var(--sp-5);
    border-radius: var(--r-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: var(--c-primary);
    background: rgba(var(--c-primary-rgb), .1);
    border: 1px solid rgba(var(--c-primary-rgb), .3);
    box-shadow: 0 0 30px rgba(var(--c-primary-rgb), .16);
}

/* Link de voltar, abaixo do cartão */
.mp-auth-back {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: var(--sp-5);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--c-ink-400);
    text-decoration: none;
}
.mp-auth-back:hover { color: var(--c-primary); }

/* Campo-armadilha: invisível para humanos, visível para robôs */
.mp-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ── Bloco "em breve" (painel sem dados ainda) ── */
.mp-soon {
    text-align: center;
    padding: var(--sp-10) var(--sp-6);
}
.mp-soon-icon {
    width: 88px; height: 88px;
    margin: 0 auto var(--sp-5);
    border-radius: var(--r-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: var(--c-primary);
    background: var(--c-layer-3);
    border: 1px solid rgba(var(--c-primary-rgb), .26);
}
.mp-soon-title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-black);
    margin: 0 0 var(--sp-3);
}
.mp-soon-text {
    font-size: var(--fs-base);
    color: var(--c-muted);
    max-width: 480px;
    margin: 0 auto var(--sp-6);
    line-height: var(--lh-loose);
}
.mp-soon-actions {
    display: flex;
    gap: var(--sp-3);
    justify-content: center;
    flex-wrap: wrap;
}

/* Texto explicativo com respiro maior entre as linhas */
.mp-prose { line-height: 1.75; }

/* ── Links de trackeamento ── */
.lk-card {
    background: var(--c-layer-1);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    height: 100%;
}
.lk-head {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}
.lk-name { font-size: var(--fs-lg); font-weight: var(--fw-bold); }

.lk-url {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    background: var(--c-layer-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 7px 11px;
    margin-bottom: var(--sp-4);
}
.lk-url > i { color: var(--c-muted); flex-shrink: 0; }
.lk-url input {
    flex: 1; min-width: 0;
    background: transparent;
    border: 0;
    color: var(--c-text);
    font-size: var(--fs-sm);
    font-family: monospace;
}
.lk-url input:focus { outline: none; }

.lk-bots, .lk-opts, .lk-params, .lk-stats {
    padding-top: var(--sp-4);
    border-top: 1px solid var(--c-border);
    margin-bottom: var(--sp-4);
}
.lk-stats { margin-bottom: 0; }

.lk-bot {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    background: var(--c-layer-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    padding: 8px 11px;
    margin-bottom: 6px;
    font-size: var(--fs-sm);
}
.lk-bot-dot {
    width: 7px; height: 7px;
    border-radius: var(--r-full);
    background: var(--c-primary);
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(var(--c-primary-rgb), .7);
}
.lk-pixel-on { color: var(--c-primary); font-size: 13px; margin-left: 4px; }

.lk-tabs {
    display: flex;
    gap: 4px;
    background: var(--c-layer-2);
    border-radius: var(--r-sm);
    padding: 3px;
}
.lk-tab {
    border: 0;
    background: transparent;
    color: var(--c-muted);
    border-radius: 5px;
    padding: 4px 11px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    cursor: pointer;
}
.lk-tab.is-active { background: var(--c-primary); color: var(--c-bg); }

.lk-param-box {
    font-family: monospace;
    font-size: 11.5px;
    min-height: 62px;
    line-height: 1.5;
}

.lk-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-2);
    text-align: center;
}
.lk-stat-v { font-size: var(--fs-lg); font-weight: var(--fw-black); line-height: 1.2; }
.lk-stat-l {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--c-muted);
    margin-top: 2px;
}


/* ═══ 16. NAVEGAÇÃO (menu lateral + topo) ══════════════════════
   O menu vive contraído (72px) e expande no hover (272px).
   O botão de fixar trava no estado expandido.
   Nada aqui usa JavaScript para a animação: só CSS.
   ═════════════════════════════════════════════════════════════ */
:root {
    --nav-w:      252px;   /* largura expandida */
    --nav-w-mini:  68px;   /* largura contraída */
    --top-h:       62px;   /* altura da barra superior */
}

/* ── Casca ── */
.mp-shell { min-height: 100vh; background: var(--c-bg); }

/* ── Menu lateral ── */
.mp-nav {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 1040;
    width: var(--nav-w-mini);
    background: var(--c-bg-nav);
    border-right: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
    transition: width .22s cubic-bezier(.4, 0, .2, 1);
    overflow: hidden;
}
.mp-nav:hover,
.mp-nav.is-pinned { width: var(--nav-w); }

/* Ao expandir por hover o conteúdo NÃO se move: o menu passa por
   cima. Isso evita a página "pular" toda vez que o mouse encosta. */
.mp-nav:hover { box-shadow: 8px 0 32px rgba(0,0,0,.45); }

/* O conteúdo que só aparece expandido */
.mp-nav-txt {
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .16s, transform .16s;
    white-space: nowrap;
    pointer-events: none;
}
.mp-nav:hover .mp-nav-txt,
.mp-nav.is-pinned .mp-nav-txt {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: .06s;
}

/* ── Logo ── */
.mp-nav-brand {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    height: var(--top-h);
    padding: 0 16px;
    flex-shrink: 0;
    text-decoration: none;
    border-bottom: 1px solid var(--c-border);
}
.mp-nav-brand img { height: 30px; width: auto; max-width: 150px; object-fit: contain; }
/* Marca contraída: usa o logo-sm (o mesmo ícone do site) */
.mp-nav-brand .mark {
    width: 36px; height: 36px;
    flex-shrink: 0;
    border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    /* Mesmo degradê do avatar: os dois ícones ficam com a
       identidade da marca, um embaixo do outro. */
    background: linear-gradient(135deg,
        var(--c-avatar-bg),
        rgba(var(--c-primary-rgb), .62));
}
.mp-nav-brand .mark img { padding: 5px; }
.mp-nav-brand .mark img {
    width: 100%; height: 100%;
    object-fit: contain;
}

/* ── Bloco da conta ── */
.mp-nav-acc {
    margin: var(--sp-3) 12px;
    padding: 3px;
    border-radius: var(--r-lg);
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
}
.mp-nav-acc-av {
    width: 36px; height: 36px;
    flex-shrink: 0;
    border-radius: var(--r-full);
    display: flex; align-items: center; justify-content: center;
    /* Degradê na cor do tema com a letra em branco: fica mais
       legível do que o fundo translúcido com texto colorido. */
    background: linear-gradient(135deg,
        var(--c-avatar-bg),
        rgba(var(--c-primary-rgb), .62));
    color: var(--c-avatar-text);
    font-weight: var(--fw-black);
    font-size: 15px;
    line-height: 1;
    text-transform: uppercase;
    /* inset: o anel fica DENTRO dos 36px. Com box-shadow normal
       ele somava 4px ao redor e o círculo saía do bloco. */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.mp-nav-acc-name {
    font-size: 12.5px;
    font-weight: var(--fw-bold);
    color: #fff;
    line-height: 1.2;
    max-width: 108px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mp-nav-acc-sub { font-size: 10.5px; color: var(--c-muted); }
.mp-nav-acc-out {
    width: 29px; height: 29px;
    flex-shrink: 0;
    margin-left: auto;
    border-radius: var(--r-sm);
    border: 1px solid rgba(241, 85, 108, .3);
    background: rgba(241, 85, 108, .08);
    color: var(--c-danger);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    transition: background var(--t-fast);
}
.mp-nav-acc-out:hover { background: rgba(241, 85, 108, .2); }

/* ── Lista de itens ── */
.mp-nav-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 12px var(--sp-3);
}
/* Barra de rolagem discreta, some quando contraído */
/* O menu rola sem barra visivel: ela e estreita, fica colada no
   conteudo e polui mais do que ajuda. A rolagem continua funcionando
   por roda e por toque. */
.mp-nav-scroll::-webkit-scrollbar { width: 0; height: 0; }
.mp-nav-scroll { scrollbar-width: none; -ms-overflow-style: none; }

/* ── Barra de rolagem da PAGINA, na cor do tema ─────────────────
   Precisa estar no html e no body: o Chrome usa a do html, e alguns
   navegadores so aplicam quando a regra existe nos dois. */
html::-webkit-scrollbar,
body::-webkit-scrollbar { width: 11px; height: 11px; }

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track { background: var(--c-bg); }

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background: var(--c-primary);
    border-radius: 8px;
    /* A borda da mesma cor do fundo cria uma folga em volta do polegar,
       sem precisar de outro elemento. */
    border: 3px solid var(--c-bg);
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover { background: var(--c-primary); filter: brightness(1.15); }

/* Firefox nao tem ::-webkit-scrollbar; usa esta propriedade propria. */
html { scrollbar-width: thin; scrollbar-color: var(--c-primary) var(--c-bg); }
.mp-nav-scroll::-webkit-scrollbar-track { background: transparent; }

.mp-nav-title {
    font-size: 9.5px;
    font-weight: var(--fw-bold);
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--c-nav-title);
    padding: 0 8px;
    margin: var(--sp-4) 0 6px;
    height: 12px;
}

.mp-nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 6px 8px;
    border-radius: var(--r-md);
    margin-bottom: 1px;
    text-decoration: none;
    color: var(--c-text);
    position: relative;
    transition: background var(--t-fast), color var(--t-fast);
}
.mp-nav-item:hover { background: var(--c-nav-hover-bg); color: var(--c-text-strong); }
.mp-nav-item.is-active { background: var(--c-nav-active-bg); color: var(--c-text-strong); }
/* Marca vertical do item ativo */
.mp-nav-item.is-active::before {
    content: '';
    position: absolute;
    left: -12px; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 20px;
    border-radius: 0 3px 3px 0;
    background: var(--c-nav-bar);
    box-shadow: 0 0 12px rgba(var(--c-primary-rgb), .8);
}
.mp-nav-ico {
    width: 30px; height: 30px;
    flex-shrink: 0;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    background: var(--c-nav-icon-bg);
    color: var(--c-nav-icon);
    transition: background var(--t-fast), color var(--t-fast);
}
.mp-nav-item:hover .mp-nav-ico { background: var(--c-bg-hover); }
.mp-nav-item.is-active .mp-nav-ico {
    background: var(--c-nav-active-ico-bg);
    color: var(--c-nav-active-ico);
}
/* display:block é o que coloca a descrição embaixo do título:
   <span> é inline por padrão e ficaria ao lado. */
.mp-nav-label {
    display: block;
    font-size: 13px;
    font-weight: var(--fw-semi);
    line-height: 1.3;
    color: var(--c-nav-label);
}
.mp-nav-desc {
    display: block;
    font-size: 10.5px;
    line-height: 1.3;
    color: var(--c-nav-desc);
    margin-top: 1px;
}
.mp-nav-item.is-active .mp-nav-label { color: var(--c-nav-active-label); }
.mp-nav-item.is-active .mp-nav-desc  { color: var(--c-text); }
.mp-nav-item:hover .mp-nav-label { color: var(--c-text-strong); }

/* Selo "novo" ao lado do item */
.mp-nav-tag {
    background: var(--c-primary);
    color: var(--c-bg);
    font-size: 8.5px;
    font-weight: var(--fw-black);
    letter-spacing: .06em;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

/* Selo amarelo do que ainda vai chegar. Cor diferente do NOVO de
   proposito: um convida a clicar, o outro avisa que nao adianta. */
.mp-nav-tag.soon {
    background: rgba(249, 188, 11, .16);
    color: #f9bc0b;
    border: 1px solid rgba(249, 188, 11, .35);
    padding: 1px 5px;
}

/* Item ainda sem página */
.mp-nav-item.is-soon { opacity: .45; cursor: default; }
.mp-nav-item.is-soon .mp-nav-tag.soon { opacity: 1; }
.mp-nav-item.is-soon:hover { background: transparent; color: var(--c-text); }

/* ── Divisória com luz correndo ── */
.mp-nav-sep {
    position: relative;
    height: 1px;
    margin: var(--sp-3) 8px;
    background: var(--c-border);
    overflow: hidden;
    flex-shrink: 0;
}
.mp-nav-sep::after {
    content: '';
    position: absolute;
    top: 0; left: -40%;
    width: 40%; height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--c-primary-rgb), .9),
        transparent);
    animation: mp-sep-run 3.2s ease-in-out infinite;
}
@keyframes mp-sep-run {
    0%   { left: -40%; }
    100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .mp-nav-sep::after { animation: none; left: 30%; opacity: .5; }
}

/* ── Rodapé: fixar ── */
.mp-nav-foot {
    flex-shrink: 0;
    padding: 10px 12px;
    border-top: 1px solid var(--c-border);
}
.mp-nav-pin {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 8px;
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--c-muted);
    cursor: pointer;
    font-size: 13px;
    font-weight: var(--fw-semi);
    transition: background var(--t-fast), color var(--t-fast);
}
.mp-nav-pin:hover { background: var(--c-bg-hover); color: var(--c-text-strong); }
.mp-nav.is-pinned .mp-nav-pin { color: var(--c-primary); }
.mp-nav-pin i { font-size: 16px; width: 30px; flex-shrink: 0; text-align: center; }

/* ── Barra superior ── */
.mp-top {
    position: fixed;
    top: 0; right: 0;
    left: var(--nav-w-mini);
    height: var(--top-h);
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: 0 var(--sp-5);
    background: var(--c-bg-top);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--c-border);
    transition: left .22s cubic-bezier(.4, 0, .2, 1);
}
body.mp-pinned .mp-top { left: var(--nav-w); }

/* Faturamento à esquerda */
.mp-top-goal {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-left: 6px;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: var(--r-full);
    padding: 8px 20px 8px 8px;
    flex-shrink: 0;
}
.mp-top-goal-ico {
    width: 36px; height: 36px;
    border-radius: var(--r-full);
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg,
        var(--c-primary),
        rgba(var(--c-primary-rgb), .62));
    color: #fff;
    font-size: 17px;
    flex-shrink: 0;
}
.mp-top-goal-lbl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    font-size: 9.5px;
    font-weight: var(--fw-bold);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-faint);
}
.mp-top-goal-pct { color: var(--c-primary); }
.mp-top-goal-bar {
    height: 3px;
    border-radius: var(--r-full);
    background: var(--c-border);
    margin: 4px 0 3px;
    overflow: hidden;
}
.mp-top-goal-bar span {
    display: block;
    height: 100%;
    border-radius: var(--r-full);
    background: var(--c-primary);
    box-shadow: 0 0 8px rgba(var(--c-primary-rgb), .7);
}
.mp-top-goal-val { font-size: 13.5px; font-weight: var(--fw-black); color: #fff; }
.mp-top-goal-val small { font-size: 10.5px; font-weight: var(--fw-normal); color: var(--c-faint); }

/* Saudação central */
.mp-top-hello { flex: 1; text-align: center; min-width: 0; }
.mp-top-hello-t { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--c-top-hello); }
.mp-top-hello-t b { color: var(--c-top-name); font-weight: var(--fw-bold); }
.mp-top-hello-d {
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c-faint);
    margin-top: 1px;
}

/* Ações à direita */
.mp-top-acts { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.mp-top-btn {
    width: 38px; height: 38px;
    border-radius: var(--r-full);
    border: 1px solid var(--c-border);
    background: var(--c-bg-card);
    /* Cinza fixo, e nao var(--c-top-icon): essa variavel pode estar
       configurada com a cor da marca no .env, e ai TODOS os icones
       ficariam coloridos. */
    color: var(--c-muted);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    position: relative;
    text-decoration: none;
    transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
/* Em repouso os icones sao cinzas — coloridos todos ao mesmo tempo,
   nenhum se destaca e a barra vira um arco-iris. A cor do tema fica
   reservada para o que esta ativo ou sob o mouse, que e onde ela
   carrega significado. */
.mp-top-btn:hover,
.mp-top-btn.is-active {
    border-color: var(--c-primary);
    color: var(--c-primary);
}
.mp-top-btn.is-active { background: rgba(var(--c-primary-rgb), .10); }
.mp-top-btn.is-danger:hover { border-color: var(--c-danger); color: var(--c-danger); }
/* Bolinha de aviso */
.mp-top-btn .dot {
    position: absolute;
    top: 7px; right: 8px;
    width: 7px; height: 7px;
    border-radius: var(--r-full);
    background: var(--c-danger);
    border: 2px solid var(--c-bg-nav);
}

/* Botão de suporte, em destaque */
.mp-top-support {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 17px;
    border: 0;
    border-radius: var(--r-md);
    background: var(--c-support-bg);
    color: var(--c-support-text);
    font-size: 13px;
    font-weight: var(--fw-bold);
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(var(--c-primary-rgb), .26);
    transition: filter var(--t-fast), transform var(--t-fast);
}
.mp-top-support:hover { filter: brightness(1.08); color: var(--c-support-text); }
.mp-top-support:active { transform: translateY(1px); }
.mp-top-support i { font-size: 16px; }

/* ── Área de conteúdo ──
   As páginas do painel usam .page-content (herdado do template).
   O tema reconhece os dois nomes para não precisar reescrever
   todas as telas de uma vez. */
.mp-main,
.page-content {
    margin-left: var(--nav-w-mini);
    padding: calc(var(--top-h) + var(--sp-6)) var(--sp-6) var(--sp-8);
    transition: margin-left .22s cubic-bezier(.4, 0, .2, 1);
    min-height: 100vh;
}
body.mp-pinned .mp-main,
body.mp-pinned .page-content { margin-left: var(--nav-w); }

/* O wrapper do template não deve criar espaçamento próprio */
.wrapper { display: block; }
.page-container { max-width: 100%; padding: 0; }

/* ── Botão de menu no celular ── */
.mp-nav-toggle {
    display: none;
    width: 38px; height: 38px;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    background: var(--c-bg-card);
    color: var(--c-text);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
}
.mp-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1035;
    background: rgba(0, 0, 0, .6);
}
.mp-nav-backdrop.is-open { display: block; }


/* ── Página de perfil ── */
.pf-card { text-align: center; }
.pf-avatar {
    width: 84px; height: 84px;
    margin: 0 auto var(--sp-4);
    border-radius: var(--r-full);
    display: flex; align-items: center; justify-content: center;
    font-size: 30px;
    font-weight: var(--fw-black);
    color: var(--c-avatar-text);
    background: linear-gradient(135deg,
        var(--c-avatar-bg),
        rgba(var(--c-primary-rgb), .62));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.pf-name  { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.pf-email { font-size: var(--fs-sm); color: var(--c-muted); margin-top: 2px; }
.pf-badges {
    display: flex;
    gap: var(--sp-2);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--sp-4);
}

/* Linha de informação (rótulo à esquerda, valor à direita) */
.pf-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 9px 0;
    border-bottom: 1px solid var(--c-border);
    font-size: var(--fs-sm);
}
.pf-row:last-child { border-bottom: 0; padding-bottom: 0; }
.pf-row-l {
    color: var(--c-muted);
    display: flex;
    align-items: center;
    gap: 7px;
}
.pf-row-l i { font-size: 15px; }
.pf-row-v { font-weight: var(--fw-semi); text-align: right; }

/* Cabeçalho de cada bloco */
.pf-head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding-bottom: var(--sp-4);
    margin-bottom: var(--sp-4);
    border-bottom: 1px solid var(--c-border);
}
.pf-head-ico {
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 19px;
    background: var(--c-layer-3);
    color: var(--c-primary);
}
.pf-head-t { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.pf-head-s { font-size: var(--fs-sm); color: var(--c-muted); margin-top: 1px; }

/* ═══ 15. RESPONSIVO ═══════════════════════════════════════════ */
@media (max-width: 1399px) {
    .mp-auth-side { padding: var(--sp-8) 44px; }
    .mp-auth-main { flex: 0 0 480px; }
}

@media (max-width: 1199px) {
    .mp-auth-side  { padding: var(--sp-7) 32px; }
    .mp-auth-main  { flex: 0 0 420px; padding: var(--sp-7) var(--sp-5); }
    /* 5 em linha ficaria apertado: passa para 3 + 2 */
    .mp-auth-feats { grid-template-columns: repeat(3, 1fr); }
    .mp-auth-title { font-size: 38px; }
}

@media (max-width: 1199px) {
    /* Espaço menor: a saudação central sai para não espremer o resto */
    .mp-top-hello { display: none; }
    .mp-top-acts  { margin-left: auto; }
}

@media (max-width: 991px) {
    /* O menu vira gaveta: escondido por padrão, abre por cima */
    .mp-nav {
        width: var(--nav-w);
        transform: translateX(-100%);
        transition: transform .24s cubic-bezier(.4, 0, .2, 1);
    }
    .mp-nav.is-open { transform: none; }
    .mp-nav:hover { width: var(--nav-w); }
    .mp-nav .mp-nav-txt { opacity: 1; transform: none; pointer-events: auto; }
    .mp-nav-foot { display: none; }   /* fixar não faz sentido em gaveta */

    .mp-top  { left: 0; }
    body.mp-pinned .mp-top { left: 0; }
    .mp-main,
    .page-content { margin-left: 0; padding-left: var(--sp-4); padding-right: var(--sp-4); }
    body.mp-pinned .mp-main,
    body.mp-pinned .page-content { margin-left: 0; }

    .mp-nav-toggle { display: flex; }
    .mp-top-goal   { display: none; }

    .mp-auth          { flex-direction: column; }
    .mp-auth-side     { flex: none; padding: 40px 24px 16px; text-align: center; }
    .mp-auth-side-in  { margin: 0 auto; }
    .mp-auth-logo     { justify-content: center; }
    .mp-auth-lead,
    .mp-auth-box,
    .mp-auth-proof,
    .mp-auth-feats    { margin-left: auto; margin-right: auto; }
    .mp-auth-box,
    .mp-auth-proof    { text-align: left; justify-content: center; }
    /* A divisória vira horizontal entre as duas partes */
    .mp-auth-divider  {
        width: 100%;
        height: 1px;
        align-self: auto;
        margin: var(--sp-6) 0 0;
        background: linear-gradient(90deg,
            transparent 0%,
            rgba(var(--c-primary-rgb), .28) 12%,
            rgba(var(--c-primary-rgb), .95) 50%,
            rgba(var(--c-primary-rgb), .28) 88%,
            transparent 100%);
    }
    .mp-auth-divider::after {
        left: auto; top: 50%;
        transform: translateY(-50%);
        width: 90px; height: 3px;
        background: linear-gradient(90deg, transparent, var(--c-primary), transparent);
        animation: mp-divider-run-h 5.5s ease-in-out infinite;
    }
    @keyframes mp-divider-run-h {
        0%, 100% { left: 4%;  opacity: .25; }
        50%      { left: 84%; opacity: 1; }
    }
    .mp-auth-main { flex: none; width: 100%; padding: var(--sp-6) 22px 46px; background: transparent; }
    .mp-hide-md   { display: none !important; }
}

@media (max-width: 767px) {
    .mp-auth-feats { grid-template-columns: repeat(2, 1fr); }
    .mp-hide-sm    { display: none !important; }
}

@media (max-width: 575px) {
    .mp-top-support span { display: none; }
    .mp-top-support { padding: 0 12px; }
    .mp-top { padding: 0 var(--sp-3); gap: var(--sp-2); }

    .mp-auth-side   { padding: 30px 18px 8px; }
    .mp-grid-2      { grid-template-columns: 1fr; }
    .lk-stat-grid   { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-3); }
    .mp-perks-grid  { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-4); }
    .mp-perk:nth-child(2n) { border-right: 0; }
    .mp-steps       { justify-content: center; }
    .mp-auth-card   { padding: var(--sp-6) var(--sp-5); }
    .mp-auth-title  { font-size: 30px; }
    .mp-auth-box    { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
    .mp-auth-proof  { justify-content: center; }
    .mp-auth-proof-sep { display: none; }
    .mp-hide-xs     { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   MODAIS E CAMPOS — padrao unico do painel

   Vale para os componentes proprios (.mp-*) e para os do Bootstrap
   que o template Highdmin usa, para nao ficar cada tela com um tom.
   ══════════════════════════════════════════════════════════════ */

/* Borda suave: a --highdmin-border-color do template (#37394d) fica
   berrante contra o fundo escuro do modal. */
.mp-modal,
.modal-content {
    background: var(--c-bg-modal) !important;
    border: 1px solid #222229 !important;
}

/* Fundo dos campos: a cor primaria a 2%. Como e quase transparente,
   ele acompanha o tom de onde o campo estiver — card, modal ou pagina. */
.mp-input,
.mp-select,
.mp-textarea,
.form-control,
.form-select,
.be-input,
.bot-search,
.bot-token-input { background: rgba(var(--c-primary-rgb), .02) !important; }

.mp-input:focus,
.mp-select:focus,
.mp-textarea:focus,
.form-control:focus,
.form-select:focus,
.be-input:focus,
.bot-search:focus,
.bot-token-input:focus { background: rgba(var(--c-primary-rgb), .05) !important; }

/* ══════════════════════════════════════════════════════════════
   .mp-cta — BOTAO CHEIO NA COR PRIMARIA

   Use SEMPRE esta classe para botao/pilula/aba com fundo colorido.
   Nao invente regra nova por pagina: foi assim que o mesmo bug de
   "texto invisivel" apareceu tres vezes seguidas.

   REGRA DE USO — o rotulo vai SEMPRE dentro de um <span>:

       <a class="mp-cta"><i class="ri-x"></i><span>Rotulo</span></a>
       <button class="mp-cta"><span>Rotulo</span></button>

   Por que o <span>: texto solto dentro de um <a> herda a cor do link
   do template. Quando essa cor bate com o fundo do botao, o rotulo
   some — mas o <i> continua aparecendo, porque ele e um elemento e
   pega a regra de filho. Foi exatamente esse o sintoma.

   As tres travas abaixo cobrem o problema por completo:
     1. seletor com a tag junto da classe, em todos os estados de link
     2. cor e tamanho forcados em TODOS os descendentes (*)
     3. cor de texto fixa (#121519), nunca variavel de tema — variavel
        pode cair perto da cor de fundo e o rotulo desaparece de novo
   ══════════════════════════════════════════════════════════════ */

.mp-cta,
a.mp-cta, a.mp-cta:link, a.mp-cta:visited,
a.mp-cta:hover, a.mp-cta:focus, a.mp-cta:active,
button.mp-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: var(--c-primary) !important;
    border: 1px solid var(--c-primary) !important;
    color: #121519 !important;
    font-size: 13px !important;
    font-weight: 700;
    line-height: 1.4;
    border-radius: 5px;
    padding: 8px 16px;
    white-space: nowrap;
    text-decoration: none !important;
    cursor: pointer;
    transition: filter .15s, box-shadow .15s;
}

/* Vale para o <span> do rotulo, o <i> do icone e o que mais vier */
.mp-cta *,
a.mp-cta * ,
button.mp-cta * { color: #121519 !important; font-size: inherit !important; }
.mp-cta i { font-size: 15px !important; }

.mp-cta:hover { filter: brightness(1.08); box-shadow: 0 4px 14px rgba(var(--c-primary-rgb), .35); }
.mp-cta:disabled, .mp-cta.is-disabled { opacity: .45; cursor: not-allowed; filter: none; box-shadow: none; }

/* Versao vazada, para o par "inativo" do mesmo grupo de botoes */
.mp-cta-ghost,
a.mp-cta-ghost, a.mp-cta-ghost:link, a.mp-cta-ghost:visited,
button.mp-cta-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--c-muted) !important;
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 5px;
    padding: 8px 16px;
    white-space: nowrap;
    text-decoration: none !important;
    cursor: pointer;
    transition: color .15s, background .15s;
}
.mp-cta-ghost * { color: inherit !important; font-size: inherit !important; }
.mp-cta-ghost i { font-size: 15px !important; }
.mp-cta-ghost:hover { color: var(--c-primary) !important; background: rgba(var(--c-primary-rgb), .07); }

/* ── ui-modal sempre por cima ──────────────────────────────────
   Os .mp-overlay do painel ficam em z-index 1080+, acima do 1055
   padrao do modal do Bootstrap. Sem isto, um uiOk/uiConfirm aberto
   por cima de um overlay apareceria atras dele. */
#uiModal { z-index: 2000; }

/* ══════════════════════════════════════════════════════════════
   LISTA ABERTA DOS <select>

   O <option> nao herda o estilo do <select>: o navegador desenha a
   lista com o tema do SISTEMA OPERACIONAL. Num Windows claro ela sai
   branca, mesmo com o painel todo escuro.

   Estas duas regras sao o unico jeito de pintar a lista sem trocar o
   <select> por um componente proprio. Precisam ficar aqui, no tema, e
   nao em cada pagina.
   ══════════════════════════════════════════════════════════════ */
select,
select.form-select,
select.mp-select,
select.an-sel,
select.fi-sel,
select.cli-select {
    color-scheme: dark;                 /* pede a lista escura ao navegador */
}

select option,
select optgroup {
    background-color: #16171c !important;
    color: #e6e9ee !important;
}
select option:checked,
select option:hover {
    background-color: #22242b !important;
    color: #ffffff !important;
}
select option:disabled { color: #6b7076 !important; }