/*
 * Real Metrics — tema visual.
 * Decisão do cliente (2026-10-23): visual igual ao do Gestor Seller, exceto o logotipo.
 * Medidas tomadas no navegador e recriadas aqui do zero sobre o Bootstrap 5.
 * Regra: nenhuma cor fixa fora das variáveis; tudo funciona nos temas claro e escuro.
 */

/* ---------- Tokens ---------- */
:root {
    --mx-font-heading: 'Montserrat', sans-serif;
    --mx-font-body: 'Roboto', sans-serif;

    --mx-bg: #f0f0f0;
    --mx-surface: #ffffff;
    --mx-surface-2: #f5f6fa;
    --mx-text: #283252;
    --mx-text-soft: #424557;
    --mx-text-muted: #999999;
    --mx-border: #e6e6e6;
    --mx-border-control: #dbdbdb;

    --mx-primary: #41b983;
    --mx-primary-contrast: #ffffff;
    --mx-purple: #7367f0;
    --mx-blue: #0398e2;
    --mx-green: #41b983;
    --mx-green-2: #0dbf6f;
    --mx-orange: #faad42;
    --mx-danger: #e6491e;

    /* Selos de margem (faixas configuráveis do tenant) */
    --mx-margin-excellent: #94e189;
    --mx-margin-good: #ffd770;
    --mx-margin-bad: #ffa880;
    --mx-margin-negative: #e6491e;

    /* Selos de situação do pedido */
    --mx-status-pending-bg: #feeed7;  --mx-status-pending-bd: #fcd49c;  --mx-status-pending-fg: #9a5c04;
    --mx-status-paid-bg: #e4f7ee;     --mx-status-paid-bd: #ade3c8;     --mx-status-paid-fg: #1d7a50;
    --mx-status-cancel-bg: #f1f1f4;   --mx-status-cancel-bd: #dcdce3;   --mx-status-cancel-fg: #5e6278;
    --mx-status-refund-bg: #fde8e3;   --mx-status-refund-bd: #f8c3b5;   --mx-status-refund-fg: #b23a17;

    --mx-sidebar-width: 280px;
    --mx-radius-card: 16px;
    --mx-radius-box: 6px;
    --mx-radius-row: 8px;

    /* Bootstrap */
    --bs-body-font-family: var(--mx-font-body);
    --bs-body-font-size: 1rem;
    --bs-body-color: var(--mx-text);
    --bs-body-bg: var(--mx-bg);
    --bs-border-color: var(--mx-border);
    --bs-primary: var(--mx-primary);
    --bs-primary-rgb: 65, 185, 131;
    --bs-link-color: var(--mx-primary);
    --bs-link-color-rgb: 65, 185, 131;
    --bs-link-hover-color: #36a072;
    --bs-secondary-color: var(--mx-text-soft);
    --bs-tertiary-bg: var(--mx-surface-2);

    --margix-positive: var(--mx-green-2);
    --margix-negative: var(--mx-danger);
}

[data-bs-theme="dark"] {
    --mx-bg: #1c1c21;
    --mx-surface: #26262c;
    --mx-surface-2: #2f2f36;
    --mx-text: #eceef4;
    --mx-text-soft: #b8bccb;
    --mx-text-muted: #8a8f9e;
    --mx-border: #3a3a42;
    --mx-border-control: #4a4a53;

    --mx-status-pending-bg: #3d3122;  --mx-status-pending-bd: #6b5228;  --mx-status-pending-fg: #f6c77b;
    --mx-status-paid-bg: #1f3a2e;     --mx-status-paid-bd: #2f6a4e;     --mx-status-paid-fg: #8fe0b7;
    --mx-status-cancel-bg: #2f2f36;   --mx-status-cancel-bd: #4a4a53;   --mx-status-cancel-fg: #b8bccb;
    --mx-status-refund-bg: #3d2620;   --mx-status-refund-bd: #6e3a2c;   --mx-status-refund-fg: #f5a78f;

    --bs-body-color: var(--mx-text);
    --bs-body-bg: var(--mx-bg);
    --bs-border-color: var(--mx-border);
    --bs-tertiary-bg: var(--mx-surface-2);
    --bs-secondary-bg: var(--mx-surface-2);
}

html { font-size: 14px; }
body { background: var(--mx-bg); color: var(--mx-text); }
h1, h2, h3, h4, h5, h6, .mx-heading { font-family: var(--mx-font-heading); color: var(--mx-text); }
.font-monospace { font-size: .9em; }

/* ---------- Estrutura ---------- */
.mx-layout { display: flex; min-height: 100vh; }

.mx-sidebar {
    width: var(--mx-sidebar-width);
    min-width: var(--mx-sidebar-width);
    background: var(--mx-surface);
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 20;
}

.mx-sidebar-header {
    height: 60px;
    padding: 0 35px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--mx-text);
}

.mx-logo-full { display: inline-flex; align-items: center; line-height: 0; }
.mx-logo-full img { width: auto; }
.mx-logo-full .mx-logo-dark { display: none; }
[data-bs-theme="dark"] .mx-logo-full .mx-logo-light { display: none; }
[data-bs-theme="dark"] .mx-logo-full .mx-logo-dark { display: inline; }

.mx-sidebar-inner {
    flex: 1;
    overflow-y: auto;
    padding: 40px 28px 10px;
    scrollbar-width: thin;
}

.mx-sidebar-footer {
    height: 60px;
    padding: 0 35px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.mx-menu { list-style: none; margin: 0; padding: 0; }
.mx-menu-divider { height: 1px; background: var(--mx-border); margin: 10px 2px; }

.mx-menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11.9px;
    min-height: 45px;
    border-radius: 10px;
    font-family: var(--mx-font-heading);
    font-size: .9rem;            /* 12,6px */
    font-weight: 500;
    color: var(--mx-text-soft);
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
}

.mx-menu-link i { font-size: 1.15rem; width: 20px; text-align: center; flex-shrink: 0; }
.mx-menu-link .mx-chevron { margin-left: auto; font-size: .85rem; transition: transform .2s ease; }
.mx-menu-link:hover { color: var(--mx-text); }
.mx-menu-link.is-active, .mx-menu-link.is-active:hover { color: var(--mx-primary); }
.mx-menu-group.is-open > .mx-menu-link { background: var(--mx-surface-2); color: var(--mx-text); }
.mx-menu-group.is-open > .mx-menu-link .mx-chevron { transform: rotate(90deg); }

.mx-submenu { list-style: none; margin: 4px 0 6px; padding: 0; display: none; }
.mx-menu-group.is-open > .mx-submenu { display: block; }
.mx-submenu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 28px 7px 49px;
    font-family: var(--mx-font-body);
    font-size: .9rem;
    color: var(--mx-text-soft);
    text-decoration: none;
}
.mx-submenu a i { font-size: 1.2rem; width: 17px; text-align: center; flex-shrink: 0; }
.mx-submenu a:hover { color: var(--mx-text); }
.mx-submenu a.is-active { color: var(--mx-primary); font-weight: 500; }

.mx-badge-beta {
    font-size: 9px;
    font-weight: 800;
    padding: 1px 8px 0;
    border-radius: 9999px;
    background: var(--mx-orange);
    color: rgba(0, 0, 0, .7);
    margin-left: auto;
}

.mx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 0 40px 60px; }

.mx-page-header {
    height: 60px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.mx-page-header h1 {
    font-size: 1.5rem;          /* 21px */
    font-weight: 600;
    margin: 0;
}

.mx-page-header .mx-back { color: var(--mx-text-soft); font-size: 1.2rem; text-decoration: none; }

.mx-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.mx-toolbar .mx-toolbar-end { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.mx-icon-btn {
    border: 0;
    background: transparent;
    color: var(--mx-text-soft);
    width: 38px;
    height: 38px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mx-icon-btn:hover { background: var(--mx-surface); color: var(--mx-text); }

/* Mobile: barra lateral vira gaveta */
.mx-mobile-bar { display: none; }
@media (max-width: 991.98px) {
    .mx-sidebar { position: fixed; left: calc(-1 * var(--mx-sidebar-width)); transition: left .2s ease; box-shadow: 0 0 30px rgba(0,0,0,.15); }
    .mx-sidebar.is-open { left: 0; }
    .mx-main { padding: 0 16px 40px; }
    .mx-mobile-bar { display: flex; align-items: center; gap: 10px; height: 56px; }
}

/* ---------- Controles ---------- */
.form-control, .form-select {
    border-color: var(--mx-border-control);
    background-color: var(--mx-surface);
    color: var(--mx-text);
}

.mx-select-pill, .mx-input-pill {
    border-radius: 9999px !important;
    height: 35px;
    font-size: 1rem;
    padding-left: 16px;
}

.btn { font-family: var(--mx-font-body); }
.btn-primary, .btn-primary:disabled {
    --bs-btn-bg: var(--mx-primary);
    --bs-btn-border-color: var(--mx-primary);
    --bs-btn-hover-bg: #36a072;
    --bs-btn-hover-border-color: #36a072;
    --bs-btn-active-bg: #2f8c63;
    --bs-btn-active-border-color: #2f8c63;
    --bs-btn-disabled-bg: var(--mx-primary);
    --bs-btn-disabled-border-color: var(--mx-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--mx-primary);
    --bs-btn-border-color: var(--mx-primary);
    --bs-btn-hover-bg: var(--mx-primary);
    --bs-btn-hover-border-color: var(--mx-primary);
    --bs-btn-active-bg: var(--mx-primary);
}
.btn-pill { border-radius: 9999px; padding: 8px 22px; font-size: .95rem; }
.btn-alert-pill {
    border-radius: 9999px;
    background: var(--mx-danger);
    color: #fff;
    border: 0;
    padding: 8px 22px;
    font-size: .95rem;
}
.btn-alert-pill:hover { color: #fff; filter: brightness(.95); }

/* ---------- Cartões ---------- */
.l-card {
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-card);
    padding: 20px;
}

.mx-kpi { text-align: center; position: relative; min-height: 100px; }
.mx-kpi .mx-kpi-label { font-family: var(--mx-font-heading); font-size: 1.25rem; font-weight: 600; margin: 0 0 8px; }
.mx-kpi .mx-kpi-value { font-family: var(--mx-font-heading); font-size: 2rem; font-weight: 600; line-height: 1.15; }
.mx-kpi .mx-kpi-help { position: absolute; top: 14px; right: 16px; color: var(--mx-text-soft); font-size: 1.15rem; }
.mx-kpi.is-purple { border-color: var(--mx-purple); }
.mx-kpi.is-blue { border-color: var(--mx-blue); }
.mx-kpi.is-green { border-color: var(--mx-green); }
.mx-kpi.is-green-2 { border-color: var(--mx-green-2); }

.mx-box {
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-box);
    padding: 20px;
}
.mx-box-title { font-family: var(--mx-font-heading); font-size: 1rem; font-weight: 600; margin: 0 0 16px; }
.mx-section-title { font-family: var(--mx-font-heading); font-size: 1.1rem; font-weight: 700; margin: 28px 0 16px; }

/* Bootstrap .card no mesmo padrão */
.card { --bs-card-bg: var(--mx-surface); --bs-card-border-color: var(--mx-border); --bs-card-border-radius: var(--mx-radius-card); }
.card.border-0 { border: 1px solid var(--mx-border) !important; }
.card.shadow-sm { box-shadow: none !important; }

/* ---------- Tabela em linhas (flex-table) ---------- */
.mx-table-head, .mx-table-row {
    display: grid;
    align-items: center;
    column-gap: 10px;
}
.mx-table-head {
    padding: 0 8px 8px;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: .8rem;           /* 11,2px */
    font-weight: 600;
    text-transform: uppercase;
    color: var(--mx-text-muted);
}
.mx-table-row {
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-row);
    padding: 8px;
    min-height: 60px;
    margin-bottom: 6px;
    font-size: 1rem;
}
.mx-table-row .mx-strong { font-weight: 600; color: var(--mx-text); }
.mx-item-name { font-family: var(--mx-font-heading); font-size: .9rem; font-weight: 600; color: var(--mx-text); line-height: 1.25; }
.mx-item-sub { font-size: .9rem; color: var(--mx-text-soft); }
.mx-num { text-align: right; font-variant-numeric: tabular-nums; }
.mx-thumb {
    width: 40px; height: 40px; border-radius: 8px;
    background: var(--mx-surface-2); color: var(--mx-text-muted);
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* Tabelas Bootstrap no mesmo tom */
.table { --bs-table-bg: transparent; --bs-table-color: var(--mx-text); --bs-table-border-color: var(--mx-border); }
.table thead th, .table > thead { font-size: .8rem; font-weight: 600; text-transform: uppercase; color: var(--mx-text-muted); }
.table-numeric td, .table-numeric th { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Selos ---------- */
.mx-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 55px;
    height: 19px;
    padding: 0 10.5px;
    border-radius: 9999px;
    font-size: .75rem;          /* 10,5px */
    font-weight: 800;
    color: #fff;
    background: var(--mx-surface-2);
}
.mx-pill.is-excellent { background: var(--mx-margin-excellent); }
.mx-pill.is-good { background: var(--mx-margin-good); }
.mx-pill.is-bad { background: var(--mx-margin-bad); }
.mx-pill.is-negative { background: var(--mx-margin-negative); }
.mx-pill.is-empty { color: var(--mx-text-muted); }

.mx-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 12px 0 10px;
    border-radius: 9999px;
    border: 1px solid;
    font-family: var(--mx-font-heading);
    font-size: .75rem;
    font-weight: 600;
}
.mx-status.is-pending { background: var(--mx-status-pending-bg); border-color: var(--mx-status-pending-bd); color: var(--mx-status-pending-fg); }
.mx-status.is-paid { background: var(--mx-status-paid-bg); border-color: var(--mx-status-paid-bd); color: var(--mx-status-paid-fg); }
.mx-status.is-cancelled { background: var(--mx-status-cancel-bg); border-color: var(--mx-status-cancel-bd); color: var(--mx-status-cancel-fg); }
.mx-status.is-refunded { background: var(--mx-status-refund-bg); border-color: var(--mx-status-refund-bd); color: var(--mx-status-refund-fg); }

/* Compatibilidade com o selo de margem antigo */
.badge-margin-excellent { background: var(--mx-margin-excellent); color: #fff; }
.badge-margin-good { background: var(--mx-margin-good); color: #fff; }
.badge-margin-bad { background: var(--mx-margin-bad); color: #fff; }

/* ---------- Cartão de pedido (Vendas) ---------- */
.l-card-advanced {
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-card);
    margin-bottom: 20px;
    overflow: hidden;
}
.l-card-advanced .card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--mx-border);
    font-size: .9rem;
}
.l-card-advanced .card-body { padding: 14px 20px 6px; }
.l-card-advanced .card-foot { text-align: center; padding: 4px 0 8px; }
.l-card-advanced .card-foot button { border: 0; background: transparent; color: var(--mx-primary); }
.mx-order-grid {
    display: grid;
    grid-template-columns: minmax(260px, 3fr) repeat(9, minmax(70px, 1fr));
    column-gap: 10px;
    align-items: center;
}
.mx-order-grid .mx-col-head {
    font-size: .8rem; font-weight: 600; text-transform: uppercase; color: var(--mx-text-muted);
    text-align: center; line-height: 1.2;
}
.mx-order-grid .mx-col-head:first-child { text-align: left; }
.mx-order-grid .mx-cell { text-align: center; font-weight: 600; padding: 10px 0; }
.mx-order-grid .mx-cell:first-child { text-align: left; font-weight: 400; }
.mx-info-box {
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-row);
    padding: 12px;
    text-align: center;
}
.mx-statement-line { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.mx-statement-line .is-positive { color: var(--mx-green-2); }
.mx-statement-line .is-negative { color: var(--mx-danger); }

/* ---------- Diversos ---------- */
.text-margin-positive { color: var(--mx-green-2); }
.text-margin-negative { color: var(--mx-danger); }
.mx-empty { text-align: center; color: var(--mx-text-soft); padding: 48px 16px; }
.alert { border-radius: var(--mx-radius-box); }

/* Ocultar valores */
body.mx-values-hidden .mx-kpi-value, body.mx-values-hidden .mx-num, body.mx-values-hidden .mx-cell:not(:first-child) { filter: blur(7px); }

/* ======================================================================
 * Formulários, tabelas em caixa e acesso (medidas da referência, 2026-10-23)
 * ====================================================================== */

:root { --bs-border-radius: 4px; --mx-input-readonly: #f5f5f5; }
[data-bs-theme="dark"] { --mx-input-readonly: #2f2f36; }

.form-control, .form-select { min-height: 38px; border-radius: 4px; font-size: 1rem; }
.form-control[readonly], .form-control:disabled, .form-select:disabled { background-color: var(--mx-input-readonly); }
.form-control:focus, .form-select:focus { border-color: var(--mx-primary); box-shadow: 0 0 0 .2rem rgba(65, 185, 131, .2); }
.form-check-input:checked { background-color: var(--mx-primary); border-color: var(--mx-primary); }
.form-label { font-size: .9rem; color: var(--mx-text-soft); margin-bottom: 4px; }
.btn { border-radius: 4px; font-size: .95rem; }
.btn:not(.btn-sm):not(.btn-pill):not(.mx-icon-btn) { min-height: 38px; padding-left: 22px; padding-right: 22px; }

/* Campo com ícone à esquerda */
.mx-input-icon { position: relative; }
.mx-input-icon > i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--mx-text-muted); pointer-events: none; }
.mx-input-icon > .form-control, .mx-input-icon > .form-select { padding-left: 38px; }

/* Painel de formulário (Meu Perfil, cadastros) */
.mx-panel {
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    border-radius: 10px;
    padding: 20px;
}
.mx-form-col { max-width: 480px; margin: 20px auto; }
.mx-form-col.is-wide { max-width: 820px; }
.mx-form-section { font-family: var(--mx-font-heading); font-size: 1rem; font-weight: 600; margin: 0 0 16px; }
.mx-form-section + .mx-help { margin-top: -12px; }
.mx-help { font-size: .85rem; color: var(--mx-text-muted); }
.mx-form-divider { height: 1px; background: var(--mx-border); margin: 28px 0; }

/* Tabela em caixa: wrapper branco, cabeçalho centralizado, linhas separadas por traço */
.mx-wtable {
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    border-radius: 8px;
    padding: 20px;
}
.mx-wtable-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; }
.mx-wtable-toolbar .mx-wtable-end { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mx-wtable-search { position: relative; }
.mx-wtable-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--mx-text-muted); font-size: .85rem; }
.mx-wtable-search input { border-radius: 9999px; height: 38px; padding-left: 34px; width: 214px; }
.mx-wtable-head, .mx-wtable-row { display: grid; align-items: center; column-gap: 10px; padding: 0 10px; }
.mx-wtable-head > * {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: .8rem; font-weight: 600; text-transform: uppercase; color: var(--mx-text-muted);
    text-align: center; padding-bottom: 6px;
}
.mx-wtable-row { min-height: 60px; padding: 8px 10px; border-bottom: 1px solid var(--mx-border); border-radius: 8px; }
.mx-wtable-row:last-child { border-bottom: 0; }
.mx-wtable-row > * { text-align: center; font-size: 1rem; color: var(--mx-text); min-width: 0; }
.mx-wtable-head > .is-left, .mx-wtable-row > .is-left { text-align: left; }
.mx-wtable-head > .is-right, .mx-wtable-row > .is-right { text-align: right; }
.mx-wtable-empty { text-align: center; color: var(--mx-text-soft); padding: 48px 16px; }
.mx-wtable-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }

/* Botões circulares de ação */
.mx-circle-btn {
    width: 35px; height: 35px; border-radius: 9999px;
    border: 1px solid var(--mx-border-control);
    background: var(--mx-surface); color: var(--mx-text-soft);
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none; padding: 0;
}
.mx-circle-btn:hover { color: var(--mx-primary); border-color: var(--mx-primary); }
.mx-circle-btn.is-danger:hover { color: var(--mx-danger); border-color: var(--mx-danger); }

/* Paginação em círculos */
.pagination { --bs-pagination-border-radius: 9999px; gap: 6px; margin: 0; }
.pagination .page-link {
    width: 32px; height: 32px; padding: 0; border-radius: 9999px !important;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .9rem; color: var(--mx-text-soft); border-color: var(--mx-border-control); background: var(--mx-surface);
}
.pagination .page-item.active .page-link { background: var(--mx-primary); border-color: var(--mx-primary); color: #fff; }
.pagination .page-item.disabled .page-link { color: var(--mx-text-muted); background: var(--mx-surface); }

/* Marketplaces associados (ícones pequenos) */
.mx-mp { display: inline-flex; gap: 6px; font-size: 1rem; }
.mx-mp .is-off { opacity: .25; }

/* ---------- Telas de acesso (login, cadastro, recuperação) ---------- */
.mx-auth { display: flex; min-height: 100vh; }
.mx-auth-hero {
    flex: 2;
    background: var(--mx-bg);
    display: flex; align-items: center; justify-content: center;
    padding: 40px;
}
.mx-auth-side {
    flex: 1;
    min-width: 380px;
    background: var(--mx-surface);
    display: flex; flex-direction: column;
    padding: 42px;
}
.mx-auth-top { display: flex; align-items: center; justify-content: center; position: relative; min-height: 60px; }
.mx-auth-top .mx-theme-switch { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.mx-auth-body { flex: 1; display: flex; align-items: center; justify-content: center; }
.mx-auth-form { width: 100%; max-width: 320px; }
.mx-auth-form h2 { font-family: var(--mx-font-body); font-size: 2rem; font-weight: 400; margin: 0 0 2px; }
.mx-auth-form .mx-auth-sub { color: var(--mx-text-muted); margin-bottom: 10px; }
.mx-auth-form .mx-auth-link { font-family: var(--mx-font-heading); font-size: .9rem; font-weight: 500; color: var(--mx-text); text-decoration: none; }
.mx-auth-form .mx-auth-link:hover { color: var(--mx-primary); }
.mx-auth-form .btn-primary { min-height: 44px; font-weight: 500; width: 100%; box-shadow: 0 6px 14px -6px rgba(65, 185, 131, .6); }
.mx-auth-preview {
    width: 100%; max-width: 1080px;
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(40, 50, 82, .08);
    padding: 22px;
    pointer-events: none;
    user-select: none;
}
.mx-auth-preview .l-card { padding: 12px; }
.mx-auth-preview .mx-kpi { min-height: 70px; }
.mx-auth-preview .mx-kpi-label { font-size: .95rem; }
.mx-auth-preview .mx-kpi-value { font-size: 1.35rem; }
@media (max-width: 991.98px) {
    .mx-auth-hero { display: none; }
    .mx-auth-side { min-width: 0; padding: 24px 16px; }
}