/* =============================================================================
   LANISTA — Tema Gladiatus (madeira + pergaminho + tinta + ouro)
   Base 1Core (tokens no :root) + camada premium no fim do arquivo.
   ============================================================================= */
/* Fontes: Outfit (variável, self-hosted em /fonts/outfit — licença SIL OFL, sem CDN). Fallback: system-ui. */
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/outfit/outfit-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/outfit/outfit-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Paleta ──────────────────────────────────────────────────────────────────── */
:root {
    /* ★ OURO — destaque / marca do Gladiatus (fundos de botão, ativo, marca) */
    --accent:         #BFAE54;
    --accent-hover:   #A98F2C;                    /* ouro escuro (hover de botão) */
    --accent-muted:   rgba(191, 174, 84, 0.16);

    /* ★ Fundos — MADEIRA (casca escura) + PERGAMINHO (cards claros), extraídos do jogo */
    --bg:             #191513;                     /* madeira funda — fundo da página */
    --surface:        #EDDAC4;                     /* pergaminho — cards */
    --surface-alt:    #E3D3B0;                     /* pergaminho alt — inputs/hover */
    --surface-border: #CDBB8E;                     /* borda no pergaminho */

    /* Texto — TINTA marrom sobre o pergaminho dos cards */
    --text:           #402F16;
    --text-muted:     #6E5C3D;
    --text-faint:     #93805A;

    /* Semânticas (no tom do jogo — legíveis sobre pergaminho) */
    --success:        #3E6B2C;                     /* louro */
    --warning:        #9A6E12;                     /* âmbar */
    --danger:         #8B2E2E;                     /* sangue */
    --info:           #6E5A1A;                     /* bronze */

    /* ★ CASCA (madeira) — sidebar / navbar / títulos de página (texto claro sobre madeira) */
    --shell:            #241C15;
    --shell-border:     #3A2C18;
    --shell-text:       #EDDAC4;
    --shell-text-muted: #C0AA78;

    /* Layout */
    --sidebar-width:  240px;
    --navbar-height:  56px;
    --radius:         8px;
    --radius-lg:      12px;
    --shadow:         0 6px 24px rgba(0, 0, 0, 0.45);
    --shadow-sm:      0 2px 10px rgba(0, 0, 0, 0.30);
    --transition:     0.2s ease;

    /* ★ Fontes — Cinzel (títulos/marca, serifa romana) + EB Garamond (corpo com clima) + Inter (UI densa) */
    --font:           'Inter', system-ui, -apple-system, sans-serif;
    --font-title:     'Cinzel', Georgia, 'Times New Roman', serif;
    --font-serif:     'EB Garamond', Georgia, serif;

    /* Metais / brilhos pro acabamento premium */
    --gold-grad:      linear-gradient(180deg, #E8C55A 0%, #BFAE54 45%, #8A6D1E 100%);
    --parchment-tex:  radial-gradient(120% 120% at 15% 0%, #F3E7CE 0%, #EDDAC4 45%, #E4D3AC 100%);
    --wood-tex:       linear-gradient(180deg, #2A2017 0%, #241C15 40%, #191513 100%);
}

/* ── Reset & Base ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 15px;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover { color: var(--accent-hover); }

/* ── Scrollbar ───────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--surface-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-muted); }

/* ============================================================================
   LAYOUT — Sidebar + Main
   ============================================================================ */

.app-wrapper {
    display: flex;
    min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────────── */
.sidebar {
    width: var(--sidebar-width);
    background: var(--surface);
    border-right: 1px solid var(--surface-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 100;
    transition: transform var(--transition);
}

.sidebar-brand {
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--surface-border);
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--navbar-height);
}

.sidebar-brand .brand-icon {
    width: 46px;
    height: 46px;
    background: var(--accent);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.sidebar-brand .brand-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0;
}

.nav-section-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-faint);
    padding: 15px 16px 6px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 2px 8px;
    padding: 10px 12px;
    color: var(--shell-text);
    font-size: 14.5px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: background .16s, color .16s, box-shadow .16s;
    position: relative;
}

.nav-item i {
    width: 20px;
    font-size: 15px;
    text-align: center;
    flex-shrink: 0;
    transition: transform .16s;
}

.nav-item:hover {
    color: var(--accent);
    background: var(--accent-muted);
}
.nav-item:hover i { transform: translateX(2px); }

.nav-item.active {
    color: #fff;
    background: var(--accent);
    box-shadow: 0 7px 18px -4px rgba(122,112,186,.6);
}
.nav-item.active i { color: inherit; }   /* segue a cor do texto: branco no escuro, accent no claro (não some) */

.sidebar-footer {
    padding: 12px 0;
    border-top: 1px solid var(--surface-border);
}

/* ── Conteúdo principal ──────────────────────────────────────────────────────── */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ── Navbar topo ─────────────────────────────────────────────────────────────── */
.topbar {
    height: var(--navbar-height);
    background: var(--surface);
    border-bottom: 1px solid var(--surface-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 50;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}
.btn-icon:hover { background: var(--surface-alt); color: var(--text); }

.avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--accent);
    color: #000;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

/* ── Área de conteúdo ────────────────────────────────────────────────────────── */
.page-body {
    flex: 1;
    padding: 28px 28px 40px;
}

.page-header {
    margin-bottom: 24px;
}

.page-header h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 4px;
}

.page-header p {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

/* ============================================================================
   CARDS
   ============================================================================ */

.card {
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--surface-border);
}

.card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

/* Info rows — usados nos cards de informação do dashboard */
.info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid var(--surface-border);
    font-size: 13px;
    gap: 12px;
}
.info-row:last-child { border-bottom: none; }

.info-label {
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}
.info-label i {
    width: 14px;
    text-align: center;
    opacity: 0.55;
}

.info-value {
    color: var(--text);
    font-weight: 500;
    font-size: 13px;
    text-align: right;
}

.info-section-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
    padding: 14px 0 2px;
}

/* Stat cards */
.stat-card {
    background: var(--parchment-tex);
    border: 1px solid #C7AF71;
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 8px 22px rgba(0,0,0,.35);
    transition: transform var(--transition), box-shadow var(--transition);
}
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gold-grad); opacity: .85; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 12px 28px rgba(0,0,0,.45); }

/* stat-icon vira medalhão cravado (respeita cor inline por card) */
.stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 26%, #F3DD8E 0%, #D8BE63 42%, #A9892F 100%);
    color: #4A3512;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
    border: 1px solid #6E5410;
    box-shadow: 0 0 0 3px rgba(237,218,164,.5), 0 3px 8px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.55) inset;
}

.stat-body { flex: 1; }

.stat-value {
    font-family: var(--font-title);
    font-size: 24px;
    font-weight: 700;
    color: #4A3010;
    line-height: 1.2;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

.stat-label {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ============================================================================
   FORMULÁRIOS & BOTÕES
   ============================================================================ */

.form-control, .form-select {
    background: var(--surface-alt) !important;
    border: 1px solid var(--surface-border) !important;
    color: var(--text) !important;
    border-radius: var(--radius) !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    transition: border-color var(--transition), box-shadow var(--transition) !important;
}

.form-control:focus, .form-select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-muted) !important;
    outline: none !important;
}

.form-control::placeholder { color: var(--text-faint) !important; }

.form-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* Botões */
.btn-primary, .btn-accent {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #000 !important;
    font-weight: 600 !important;
    border-radius: var(--radius) !important;
    padding: 10px 20px !important;
    transition: all var(--transition) !important;
}
.btn-primary:hover, .btn-accent:hover {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 201, 167, 0.3) !important;
}

.btn-outline {
    background: transparent !important;
    border: 1px solid var(--surface-border) !important;
    color: var(--text-muted) !important;
    border-radius: var(--radius) !important;
    padding: 9px 20px !important;
    transition: all var(--transition) !important;
}
.btn-outline:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}

.btn-danger-outline {
    background: transparent !important;
    border: 1px solid var(--danger) !important;
    color: var(--danger) !important;
    border-radius: var(--radius) !important;
    padding: 9px 20px !important;
    transition: all var(--transition) !important;
}
.btn-danger-outline:hover {
    background: var(--danger) !important;
    color: #fff !important;
}

/* ── Input Group ─────────────────────────────────────────────────────────────── */
.input-group-text {
    background: var(--surface-border) !important;
    border-color: var(--surface-border) !important;
    color: var(--text-muted) !important;
}

/* ── Alerts ──────────────────────────────────────────────────────────────────── */
.alert {
    border-radius: var(--radius) !important;
    border: none !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
}
.alert-danger  { background: rgba(234,84,85,0.12) !important; color: var(--danger) !important; }
.alert-success { background: rgba(40,199,111,0.12) !important; color: var(--success) !important; }
.alert-warning { background: rgba(255,159,67,0.12) !important; color: var(--warning) !important; }
.alert-info    { background: rgba(0,207,232,0.12) !important; color: var(--info) !important; }

/* ── Badges ──────────────────────────────────────────────────────────────────── */
.badge-accent  { background: var(--accent-muted); color: var(--accent); font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 20px; }
.badge-success { background: rgba(40,199,111,0.12); color: var(--success); font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 20px; }
.badge-danger  { background: rgba(234,84,85,0.12); color: var(--danger); font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 20px; }
.badge-warning { background: rgba(255,159,67,0.12); color: var(--warning); font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 20px; }
.badge-muted   { background: var(--surface-alt); color: var(--text-muted); font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 20px; }

/* ── Tabelas ─────────────────────────────────────────────────────────────────── */
.table {
    color: var(--text) !important;
    border-color: var(--surface-border) !important;
    font-size: 14px !important;
}
.table thead th {
    background: var(--surface-alt) !important;
    color: var(--text-muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    border-color: var(--surface-border) !important;
    padding: 10px 14px !important;
}
.table tbody td {
    border-color: var(--surface-border) !important;
    padding: 12px 14px !important;
    vertical-align: middle !important;
}
.table tbody tr:hover { background: var(--surface-alt) !important; }

/* ── Dropdown ────────────────────────────────────────────────────────────────── */
.dropdown-menu {
    background: var(--surface-alt) !important;
    border: 1px solid var(--surface-border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
    min-width: 180px !important;
}
.dropdown-item {
    color: var(--text-muted) !important;
    font-size: 14px !important;
    padding: 9px 16px !important;
    transition: all var(--transition) !important;
}
.dropdown-item:hover { background: var(--accent-muted) !important; color: var(--accent) !important; }
.dropdown-divider { border-color: var(--surface-border) !important; }

/* ── Modal ───────────────────────────────────────────────────────────────────── */
.modal-content {
    background: var(--surface) !important;
    border: 1px solid var(--surface-border) !important;
    border-radius: var(--radius-lg) !important;
}
.modal-header {
    border-color: var(--surface-border) !important;
    padding: 16px 20px !important;
}
.modal-footer {
    border-color: var(--surface-border) !important;
    padding: 14px 20px !important;
}
.modal-title { font-size: 16px !important; font-weight: 600 !important; color: var(--text) !important; }
.btn-close { filter: invert(1) !important; opacity: 0.6 !important; }
.btn-close:hover { opacity: 1 !important; }
.modal-backdrop { background: rgba(0,0,0,0.7) !important; }

/* ── Loading Overlay ─────────────────────────────────────────────────────────── */
#loading-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    opacity: 1;
    transition: opacity 0.3s ease;
}

#loading-overlay.fade-out { opacity: 0; pointer-events: none; }

.spinner-ring {
    width: 48px;
    height: 48px;
    border: 3px solid var(--surface-border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================================
   LOGIN
   ============================================================================ */

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background-color: var(--bg);
    background-image:
        radial-gradient(ellipse 640px 520px at 78% 8%,  rgba(0,201,167,0.08) 0%, transparent 65%),
        radial-gradient(ellipse 480px 400px at 12% 92%, rgba(99,102,241,0.06) 0%, transparent 65%);
}

@keyframes loginIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Seletor de tema pré-login (Automático / Claro / Escuro) — canto superior direito */
.login-theme {
    position: fixed; top: 16px; right: 16px; z-index: 20;
    display: flex; gap: 2px; padding: 4px;
    border-radius: 12px; background: var(--surface);
    border: 1px solid var(--surface-border); box-shadow: var(--shadow-sm);
}
.login-theme__opt {
    width: 34px; height: 34px; border: 0; border-radius: 9px;
    background: transparent; color: var(--text-muted); cursor: pointer;
    font-size: 14px; display: grid; place-items: center;
    transition: background .15s, color .15s;
}
.login-theme__opt:hover { background: var(--surface-alt); color: var(--text); }
.login-theme__opt.is-on { background: var(--accent); color: #fff; }

.login-box {
    width: 100%;
    max-width: 400px;
    background: var(--surface);
    border-radius: 16px;
    padding: 44px 40px;
    box-shadow:
        0 24px 64px rgba(0,0,0,0.5),
        0 0 0 1px rgba(0,201,167,0.1),
        inset 0 1px 0 rgba(255,255,255,0.04);
    animation: loginIn 0.35s ease both;
}

.login-logo {
    text-align: center;
    margin-bottom: 32px;
}

.login-logo .logo-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--accent) 0%, #8A6D1E 100%);
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 16px;
    box-shadow: 0 8px 28px rgba(0,201,167,0.35), 0 2px 8px rgba(0,0,0,0.4);
}

.login-logo h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 6px;
    letter-spacing: -0.3px;
}

.login-logo p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.login-box .btn-primary {
    width: 100%;
    padding: 13px !important;
    font-size: 15px !important;
    background: linear-gradient(135deg, var(--accent) 0%, #8A6D1E 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 20px rgba(0,201,167,0.28) !important;
    letter-spacing: 0.1px;
}
.login-box .btn-primary:hover {
    box-shadow: 0 6px 28px rgba(0,201,167,0.45) !important;
    transform: translateY(-1px);
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0;
    color: var(--text-faint);
    font-size: 12px;
}
.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--surface-border);
}

.btn-passkey {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(0,201,167,0.22);
    color: var(--accent);
    border-radius: var(--radius);
    padding: 12px 20px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    letter-spacing: 0.1px;
}
.btn-passkey:hover {
    background: var(--accent-muted);
    border-color: rgba(0,201,167,0.5);
    box-shadow: 0 0 24px rgba(0,201,167,0.1);
    color: var(--accent);
}
.btn-passkey i {
    font-size: 17px;
}

.login-footer {
    margin-top: 24px;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
}
.login-footer a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}
.login-footer a:hover {
    text-decoration: underline;
}

.login-link {
    display: block;
    text-align: right;
    font-size: 12px;
    color: var(--text-faint);
    text-decoration: none;
    margin-top: -1px;
    margin-bottom: 20px;
    transition: color var(--transition);
}
.login-link:hover {
    color: var(--accent);
}

/* ══════════ LOGIN PREMIUM — split-screen (marca escura fixa + formulário tema-aware) ══════════ */
.lgx { display: flex; min-height: 100vh; min-height: 100dvh; }
.lgx__form { flex: 1 1 54%; display: flex; align-items: center; justify-content: center; padding: 32px 24px; background: var(--bg); }
.lgx__card { width: 100%; max-width: 400px; animation: loginIn .4s ease both; }
.lgx__card .btn-primary { width: 100%; padding: 13px !important; font-size: 15px !important; margin-top: 4px; justify-content: center; }

/* Coluna da marca — SEMPRE escura (identidade Lanista), independente do tema claro/escuro */
.lgx__brand { flex: 1 1 46%; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
    padding: 56px 52px; color: #EEEAFB; background: linear-gradient(158deg, #16132a 0%, #211b40 52%, #2b2350 100%); }
.lgx__brand::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.06); }
.lgx__grain { position: absolute; inset: 0; opacity: .5; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000, transparent 75%); mask-image: radial-gradient(ellipse at 30% 40%, #000, transparent 75%); }
.lgx__glow { position: absolute; width: 520px; height: 520px; left: -150px; top: -130px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(122,112,186,.42) 0%, rgba(122,112,186,0) 68%); animation: lgxGlow 9s ease-in-out infinite alternate; }
@keyframes lgxGlow { from { transform: translate(0,0) scale(1); opacity: .75; } to { transform: translate(60px,44px) scale(1.16); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lgx__glow { animation: none; } }
.lgx__brandinner { position: relative; z-index: 1; max-width: 400px; }
.lgx__mark { width: 74px; height: 74px; border-radius: 20px; display: grid; place-items: center; margin-bottom: 26px;
    background: rgba(122,112,186,.16); border: 1px solid rgba(122,112,186,.35);
    box-shadow: 0 14px 44px -14px rgba(122,112,186,.75), inset 0 1px 0 rgba(255,255,255,.12); }
.lgx__mark img { width: 44px; height: 44px; object-fit: contain; }
.lgx__name { font-family: var(--font-title, inherit); font-size: 40px; font-weight: 800; letter-spacing: .02em; margin: 0 0 14px; color: #fff; line-height: 1; }
.lgx__tag { font-size: 15.5px; line-height: 1.6; color: #b9b1dd; margin: 0 0 30px; }
.lgx__tag b { color: #fff; font-weight: 600; }
.lgx__feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.lgx__feats li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #cfc8ea; }
.lgx__fic { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-size: 13px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); color: #c9bfff; }
.lgx__brandfoot { position: absolute; left: 52px; bottom: 28px; z-index: 1; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(238,234,251,.4); }

/* cabeçalho + marca compacta do formulário */
.lgx__head { margin-bottom: 26px; }
.lgx__head h2 { font-family: var(--font-title, inherit); font-size: 26px; font-weight: 800; color: var(--text); margin: 0 0 6px; letter-spacing: -.01em; }
.lgx__head p { font-size: 13.5px; color: var(--text-muted); margin: 0; }
.lgx__mmark { display: none; align-items: center; gap: 11px; margin-bottom: 24px; }
.lgx__mmark img { width: 40px; height: 40px; object-fit: contain; }
.lgx__mmark span { font-family: var(--font-title, inherit); font-size: 20px; font-weight: 800; letter-spacing: .06em; color: var(--text); }

@media (max-width: 880px) {
    .lgx { flex-direction: column; }
    .lgx__brand { display: none; }
    .lgx__mmark { display: flex; }
    .lgx__form { padding: 30px 20px; }
}

/* ============================================================================
   TOASTS / NOTIFICAÇÕES
   ============================================================================ */

.toast-container-fixed {
    position: fixed;
    top: calc(var(--navbar-height) + 16px);
    right: 20px;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.toast-item {
    background: var(--surface-alt);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius);
    padding: 12px 16px;
    font-size: 14px;
    color: var(--text);
    box-shadow: var(--shadow);
    pointer-events: all;
    max-width: 320px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    animation: toastIn 0.25s ease;
}
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } }

.toast-item.toast-success { border-left: 3px solid var(--success); }
.toast-item.toast-error   { border-left: 3px solid var(--danger); }
.toast-item.toast-warning { border-left: 3px solid var(--warning); }
.toast-item.toast-info    { border-left: 3px solid var(--info); }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
    }
    .sidebar.open {
        transform: translateX(0);
    }
    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 99;
    }
    .sidebar-backdrop.show { display: block; }

    .main-content {
        margin-left: 0;
    }
    .page-body {
        /* espaço extra para não ficar atrás da bottom-nav */
        padding: 20px 16px calc(68px + env(safe-area-inset-bottom));
    }
}

/* ── Bottom Navigation (mobile / PWA) ───────────────────────────────────────── */
.bottom-nav {
    display: none; /* escondida no desktop */
}

@media (max-width: 768px) {
    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: auto;
        background: var(--surface);
        border-top: 1px solid var(--surface-border);
        z-index: 100;
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
    }

    /* cada item ocupa espaço igual */
    .bottom-nav .nav-item {
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 8px 4px;
        font-size: 10px;
        border-radius: 0;
        min-height: 56px;
    }

    /* ícone maior que na sidebar */
    .bottom-nav .nav-item i {
        width: auto;
        font-size: 18px;
    }

    /* indicador lateral não faz sentido na bottom nav — usa fundo */
    .bottom-nav .nav-item.active::before {
        display: none;
    }

    .bottom-nav .nav-item.active {
        color: var(--accent);
        background: var(--accent-muted);
    }
}

/* ── Utilitários ─────────────────────────────────────────────────────────────── */
.text-accent   { color: var(--accent) !important; }
.text-muted-1c { color: var(--text-muted) !important; }
.text-faint    { color: var(--text-faint) !important; }
.bg-surface    { background: var(--surface) !important; }
.bg-surface-alt { background: var(--surface-alt) !important; }
.border-1c     { border-color: var(--surface-border) !important; }
.divider       { height: 1px; background: var(--surface-border); margin: 16px 0; }
.gap-1c { gap: 12px; }

/* Skeleton loader */
.skel {
    background: linear-gradient(90deg, var(--surface-alt) 25%, var(--surface-border) 50%, var(--surface-alt) 75%);
    background-size: 200% 100%;
    animation: skel 1.5s infinite;
    border-radius: var(--radius);
}
@keyframes skel { to { background-position: -200% 0; } }

/* ── Tabulator — integração com tema Nervo ───────────────────────────────────── */

/* Container principal */
.tabulator {
    background:    var(--surface) !important;
    border:        1px solid var(--surface-border) !important;
    border-radius: var(--radius) !important;
    font-family:   var(--font) !important;
    font-size:     14px !important;
    color:         var(--text) !important;
}

/* Cabeçalho */
.tabulator .tabulator-header {
    background:    var(--surface-alt) !important;
    border-bottom: 1px solid var(--surface-border) !important;
    color:         var(--text-muted) !important;
    font-weight:   600 !important;
    font-size:     12px !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}

.tabulator .tabulator-header .tabulator-col {
    background:    transparent !important;
    border-right:  1px solid var(--surface-border) !important;
    color:         var(--text-muted) !important;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
    color: var(--text-muted) !important;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
    background: var(--accent-muted) !important;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-sorter .tabulator-arrow {
    border-top-color:    var(--text-faint) !important;
    border-bottom-color: var(--text-faint) !important;
}

.tabulator .tabulator-header .tabulator-col.tabulator-col-sorter-element:hover .tabulator-col-sorter .tabulator-arrow {
    border-top-color:    var(--accent) !important;
    border-bottom-color: var(--accent) !important;
}

/* Linhas */
.tabulator-row {
    background:    var(--surface) !important;
    border-bottom: 1px solid var(--surface-border) !important;
    color:         var(--text) !important;
    transition:    background .15s !important;
}

.tabulator-row:last-child {
    border-bottom: none !important;
}

/* Redraw suave: com renderVertical:'basic' o Tabulator recria as linhas a cada página/ordem/filtro.
   Um fade curto (só quando as linhas nascem = troca de dados) evita o "pisca" que parecia reload da
   página. Não dispara em hover/scroll (linhas não são recriadas). Respeita reduced-motion. */
.tabulator-row { animation: gridRowIn .16s ease-out both; }
@keyframes gridRowIn { from { opacity: .25; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tabulator-row { animation: none !important; } }

.tabulator-row:hover,
.tabulator-row.tabulator-row-even:hover {
    background: var(--surface-alt) !important;
    cursor: default;
}

.tabulator-row.tabulator-row-even {
    background: var(--surface) !important;
}

/* Células */
.tabulator-row .tabulator-cell {
    color:         var(--text) !important;
    border-right:  1px solid var(--surface-border) !important;
    padding:       8px 12px !important;
}

.tabulator-row .tabulator-cell:last-child {
    border-right: none !important;
}

/* Botão collapse responsivo */
.tabulator-row .tabulator-cell.tabulator-responsive-collapse-toggle {
    color: var(--text-muted) !important;
}

.tabulator-row .tabulator-cell.tabulator-responsive-collapse-toggle:hover {
    color: var(--accent) !important;
}

/* Painel de collapse */
.tabulator-row .tabulator-responsive-collapse {
    background: var(--surface-alt) !important;
    border-top:  1px solid var(--surface-border) !important;
    padding:     10px 14px !important;
    color:       var(--text) !important;
}

.tabulator-row .tabulator-responsive-collapse table td {
    color:   var(--text) !important;
    padding: 4px 8px !important;
}

.tabulator-row .tabulator-responsive-collapse table td:first-child {
    color:       var(--text-muted) !important;
    font-weight: 600 !important;
    min-width:   120px !important;
}

/* Rodapé / paginação */
.tabulator .tabulator-footer {
    background:  var(--surface-alt) !important;
    border-top:  1px solid var(--surface-border) !important;
    color:       var(--text-muted) !important;
    font-size:   13px !important;
    padding:     8px 14px !important;
}

.tabulator .tabulator-footer .tabulator-footer-contents {
    color: var(--text-muted) !important;
}

.tabulator .tabulator-footer .tabulator-page-counter {
    color: var(--text-muted) !important;
}

.tabulator .tabulator-footer .tabulator-page-size {
    background:    var(--surface) !important;
    border:        1px solid var(--surface-border) !important;
    color:         var(--text) !important;
    border-radius: 6px !important;
    padding:       3px 6px !important;
    font-size:     13px !important;
}

.tabulator .tabulator-footer .tabulator-pages {
    gap: 4px !important;
}

.tabulator .tabulator-footer .tabulator-page {
    background:    transparent !important;
    border:        1px solid var(--surface-border) !important;
    color:         var(--text) !important;
    border-radius: 6px !important;
    padding:       3px 10px !important;
    font-size:     13px !important;
    cursor:        pointer !important;
    transition:    background .15s, color .15s, border-color .15s !important;
}

.tabulator .tabulator-footer .tabulator-page:hover:not([disabled]) {
    background:   var(--accent-muted) !important;
    color:        var(--accent) !important;
    border-color: var(--accent) !important;
}

.tabulator .tabulator-footer .tabulator-page.active {
    background:   var(--accent) !important;
    color:        #fff !important;
    border-color: var(--accent) !important;
    font-weight:  600 !important;
}

.tabulator .tabulator-footer .tabulator-page[disabled] {
    opacity: .35 !important;
    cursor:  not-allowed !important;
}

/* Loading overlay */
.tabulator .tabulator-loader {
    background: rgba(15, 17, 23, .7) !important;
}

.tabulator .tabulator-loader .tabulator-loader-msg {
    background:    var(--surface-alt) !important;
    border:        1px solid var(--surface-border) !important;
    border-radius: var(--radius) !important;
    color:         var(--text-muted) !important;
    font-size:     14px !important;
}

/* Placeholder (sem dados) */
.tabulator .tabulator-placeholder {
    background: transparent !important;
}

/* ============================================================================
   TEMA GLADIATUS — casca de madeira (shell) + pergaminho (cards)
   O :root já trocou os tokens; aqui só o que precisa de tratamento por CONTEXTO:
   componentes sobre a MADEIRA escura (sidebar/navbar/títulos) usam texto claro,
   e ajustes de legibilidade/selo sobre o PERGAMINHO.
   ============================================================================ */

/* — Sidebar / navbar / títulos de página: sobre a madeira escura — */
.sidebar        { background: var(--shell); border-right-color: var(--shell-border); color: var(--shell-text); }
.sidebar-brand  { border-bottom-color: var(--shell-border); }
.sidebar-brand .brand-name { color: var(--shell-text); }
.nav-section-label { color: var(--shell-text-muted); }
.nav-item       { color: var(--shell-text-muted); }
.nav-item:hover { color: var(--shell-text); background: var(--accent-muted); }
.nav-item.active{ color: var(--accent); background: var(--accent-muted); }
.sidebar-footer { border-top-color: var(--shell-border); }
.topbar         { background: var(--shell); border-bottom-color: var(--shell-border); }
.topbar-title   { color: var(--shell-text); }
.btn-icon       { color: var(--shell-text-muted); }
.btn-icon:hover { color: var(--shell-text); background: rgba(255, 255, 255, .06); }
.page-header h1 { color: var(--shell-text); }
.page-header p  { color: var(--shell-text-muted); }

/* — Legibilidade sobre o pergaminho — */
a               { color: #8A6D1E; }                 /* bronze: lê no pergaminho (ouro puro some) */
a:hover         { color: var(--text); }
.btn-primary, .btn-accent { color: #2B1E0A !important; }   /* tinta escura sobre o ouro */

/* — Selos/badges sólidos (legíveis no pergaminho) — */
.badge-accent   { background: var(--accent);  color: #2B1E0A; }
.badge-success  { background: var(--success); color: var(--surface); }
.badge-danger   { background: var(--danger);  color: var(--surface); }

/* — Alertas: banner ESCURO no tom da semântica + borda + texto claro (spec do doc: lê sobre
     madeira OU pergaminho; os rgba antigos eram translúcidos do tema teal) — */
.alert-success  { background: #2F5222 !important; color: #DDE8CF !important; border: 1px solid #4E7A3A !important; }
.alert-danger   { background: #3A1D1D !important; color: #F0D6D6 !important; border: 1px solid #8B2E2E !important; }
.alert-warning  { background: #3A2E12 !important; color: #F0E2B8 !important; border: 1px solid #9A6E12 !important; }
.alert-info     { background: #2E2810 !important; color: #E2D2A0 !important; border: 1px solid #6E5A1A !important; }

/* — Marca no login: gradiente ouro→bronze (era teal→ciano) — */
.login-logo .logo-icon,
.login-box .btn-primary { background: linear-gradient(135deg, var(--accent) 0%, #8A6D1E 100%) !important; }
.login-logo .logo-icon  { box-shadow: 0 8px 28px rgba(138, 109, 30, .35), 0 2px 8px rgba(0, 0, 0, .4); }

/* — Toggles (Bootstrap form-switch): ouro em vez do azul padrão — */
.form-check-input:checked { background-color: var(--accent) !important; border-color: var(--accent) !important; }
.form-check-input:focus   { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-muted) !important; }
.form-check-input         { border-color: var(--surface-border); }

.tabulator .tabulator-placeholder .tabulator-placeholder-contents {
    color: var(--text-faint) !important;
}

/* ============================================================================
   ✦ CAMADA PREMIUM — acabamento de jogo (Cinzel, pergaminho, metal, profundidade)
   Só realce visual sobre a estrutura que já existe (não muda HTML nem lógica).
   ============================================================================ */

/* — Fundo: madeira com leve vinheta dourada (profundidade) — */
body {
    background: var(--wood-tex) fixed;
    background-image: radial-gradient(130% 90% at 50% -15%, rgba(191,174,84,.07), transparent 55%), var(--wood-tex);
}

/* — Sidebar: veio de madeira + fio de ouro na borda + marca em Cinzel — */
.sidebar {
    background: var(--wood-tex);
    border-right: 1px solid var(--shell-border);
    box-shadow: inset -1px 0 0 rgba(191,174,84,.14), 3px 0 16px rgba(0,0,0,.45);
}
.sidebar-brand { position: relative; }
.sidebar-brand::after {
    content: ''; position: absolute; left: 18px; right: 18px; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(191,174,84,.45), transparent);
}
.sidebar-brand .brand-name {
    font-family: var(--font-title); font-weight: 700; letter-spacing: 2.5px;
    text-transform: uppercase; font-size: 17px; color: var(--shell-text);
    text-shadow: 0 1px 1px rgba(0,0,0,.5);
}
.sidebar-brand .brand-icon { box-shadow: 0 0 0 1px rgba(191,174,84,.35), 0 4px 12px rgba(0,0,0,.4); }
.nav-section-label { font-family: var(--font-title); font-weight: 600; letter-spacing: .14em; }
.nav-item {
    border-left: 3px solid transparent; font-weight: 500;
    transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.nav-item.active {
    border-left-color: var(--accent);
    background: linear-gradient(90deg, rgba(191,174,84,.20), rgba(191,174,84,.02) 70%, transparent);
    color: var(--gold-bright, #E8C55A);
}
.nav-item.active::before { display: none; }
.sidebar-footer a { font-weight: 600; }

/* — Topbar: madeira + fio de ouro embaixo — */
.topbar {
    background: var(--wood-tex);
    box-shadow: inset 0 -1px 0 rgba(191,174,84,.14), 0 2px 12px rgba(0,0,0,.35);
}
.topbar-title { font-family: var(--font-title); letter-spacing: 1.5px; text-transform: uppercase; font-size: 14px; }
.avatar {
    background: var(--gold-grad); color: #2B1E0A;
    box-shadow: 0 0 0 1px #6E5410, 0 2px 8px rgba(0,0,0,.4);
    font-family: var(--font-title);
}

/* — Título de página: Cinzel + filete de ouro ornamental — */
.page-header { position: relative; padding-bottom: 18px; margin-bottom: 26px; border-bottom: 1px solid var(--shell-border); }
.page-header h1 {
    font-family: var(--font-title); font-weight: 700; letter-spacing: 1px; font-size: 28px;
    color: var(--shell-text); text-shadow: 0 2px 2px rgba(0,0,0,.5), 0 0 22px rgba(191,174,84,.12);
}
.page-header p { font-family: var(--font-serif); font-size: 16px; }
.page-header::after {
    content: ''; position: absolute; left: 0; bottom: -1px; width: 88px; height: 2px;
    background: linear-gradient(90deg, var(--accent), transparent);
}

/* — Cards: pergaminho com textura, borda metálica dupla, brilho no topo e sombra funda — */
.card {
    background: var(--parchment-tex);
    border: 1px solid #C7AF71;
    border-radius: 12px;
    box-shadow: 0 1px 0 rgba(255,255,255,.55) inset,
                0 0 0 1px rgba(138,109,30,.14) inset,
                0 12px 34px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3);
    position: relative;
    overflow: hidden;
}
.card::before {   /* filete de ouro no topo do card */
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--gold-grad); opacity: .85;
}
.card-header { border-bottom: none; position: relative; padding-bottom: 15px; margin-bottom: 18px; }
.card-header::after {   /* rule ornamental sob o título */
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: linear-gradient(90deg, #8A6D1E, #BFAE54 25%, rgba(191,174,84,.15) 60%, transparent);
    opacity: .8;
}
.card-title {
    font-family: var(--font-title); font-weight: 600; letter-spacing: .6px;
    color: #5A3A12; font-size: 16px; text-transform: uppercase;
}
.card-title i, .card-header i { color: #8A6D1E; }

/* — Textos descritivos com clima de pergaminho (serifa) — */
.card-body .text-muted, .form-check + .text-muted, .card-body .small,
.d-flex .text-muted, label + .text-muted { font-family: var(--font-serif); font-size: 14px; }

/* — Inputs: pergaminho “imprensado” (sombra interna) + foco dourado — */
.form-control, .form-select {
    background: #E7D8B6 !important;
    border: 1px solid #C4AC72 !important;
    color: #3A2A12 !important;
    font-family: var(--font-serif) !important; font-size: 15.5px !important;
    box-shadow: 0 1px 2px rgba(74,54,17,.16) inset !important;
}
.form-control:focus, .form-select:focus {
    border-color: #BFAE54 !important;
    box-shadow: 0 0 0 3px rgba(191,174,84,.28), 0 1px 2px rgba(74,54,17,.16) inset !important;
}
.form-label { font-family: var(--font-title); font-weight: 600; letter-spacing: .3px; font-size: 12px; text-transform: uppercase; color: #6E5A33; }

/* — Botões: ouro metálico + relevo + Cinzel — */
.btn-primary, .btn-accent {
    background: var(--gold-grad) !important;
    border: 1px solid #6E5410 !important;
    color: #2B1E0A !important;
    font-family: var(--font-title) !important; font-weight: 700 !important;
    letter-spacing: .6px; text-transform: uppercase; font-size: 12.5px !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 5px 16px rgba(0,0,0,.35) !important;
    transition: filter var(--transition), transform var(--transition), box-shadow var(--transition) !important;
}
.btn-primary:hover, .btn-accent:hover {
    filter: brightness(1.07); transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 8px 22px rgba(0,0,0,.45) !important;
}

/* — Selos / badges: relevo metálico — */
.badge-accent, .badge-success, .badge-danger {
    font-family: var(--font-title); letter-spacing: .6px; text-transform: uppercase;
    border: 1px solid rgba(0,0,0,.2); box-shadow: 0 1px 3px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.15) inset;
}
.badge-accent { background: var(--gold-grad); color: #2B1E0A; }

/* — Alertas: banner com barra de acento à esquerda — */
.alert { border-radius: 10px; border-left-width: 4px !important; font-family: var(--font-serif); font-size: 15px; box-shadow: 0 6px 18px rgba(0,0,0,.3); }

/* — Card “Conta de jogo” (o campo readonly do topo) com cara de placa — */
.card-body > .form-control[readonly], .form-control[readonly] { font-family: var(--font-title); letter-spacing: .5px; }

/* ============================================================================
   ✦ COMPONENTES PREMIUM (modelo: página Combate) — plaque de conta, toggle
   dourado, campos grandes com nome+dica, hero. Reaproveitáveis em outras págs.
   ============================================================================ */

/* — Hero do topo da página (brasão + título) — */
.page-header--hero { display: flex; align-items: center; gap: 18px; }
.page-header--hero > div { min-width: 0; }
.page-header__crest {
    width: 58px; height: 58px; flex-shrink: 0; border-radius: 15px;
    background: var(--gold-grad); color: #2B1E0A; font-size: 27px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 1px #6E5410, 0 8px 20px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.45) inset;
}

/* — Plaque de conta de jogo (placa de bronze/madeira) — */
.account-plaque {
    display: flex; align-items: center; gap: 16px; position: relative; overflow: hidden;
    background: linear-gradient(180deg, #2E2419 0%, #241C15 100%);
    border: 1px solid var(--shell-border); border-radius: 13px;
    padding: 14px 18px 14px 20px; margin-bottom: 24px;
    box-shadow: 0 1px 0 rgba(191,174,84,.18) inset, 0 10px 26px rgba(0,0,0,.42);
}
.account-plaque::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold-grad); }
.account-plaque__crest {
    width: 46px; height: 46px; flex-shrink: 0; border-radius: 11px;
    background: radial-gradient(circle at 30% 22%, #3B2F1D, #201911);
    border: 1px solid #6E5410; color: #E8C55A; font-size: 21px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 14px rgba(191,174,84,.22) inset, 0 3px 8px rgba(0,0,0,.4);
}
.account-plaque__body { flex: 1; min-width: 0; }
.account-plaque__label { display: block; font-family: var(--font-title); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--shell-text-muted); margin-bottom: 3px; }
.account-plaque__select { position: relative; display: flex; align-items: center; }
.account-plaque__select select {
    width: 100%; appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background: transparent; border: none; outline: none; cursor: pointer;
    font-family: var(--font-title); font-size: 19px; font-weight: 700; letter-spacing: .6px;
    color: var(--shell-text); padding: 2px 26px 2px 0; text-shadow: 0 1px 1px rgba(0,0,0,.5);
}
.account-plaque__select select option { color: var(--text); background: var(--surface); font-weight: 600; }
.account-plaque__select i { position: absolute; right: 2px; color: var(--accent); pointer-events: none; font-size: 13px; }

/* — Card de recurso (feature) — usa o card premium + cabeçalho com toggle — */
.feature { padding: 26px 30px 30px; margin-bottom: 26px; }
.feature:last-of-type { margin-bottom: 0; }
.feature__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; position: relative; padding-bottom: 18px; margin-bottom: 4px; border-bottom: none; }
/* divisória ornamental: filete duplo com losango de ouro na origem */
.feature__head::after { content: ''; position: absolute; left: 20px; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, #B79637, #BFAE54 22%, rgba(191,174,84,.10) 60%, transparent); box-shadow: 0 1px 0 rgba(255,255,255,.4); }
.feature__head::before { content: ''; position: absolute; left: 4px; bottom: -4px; width: 9px; height: 9px; background: var(--gold-grad); border: 1px solid #6E5410; transform: rotate(45deg); box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.5) inset; }
.feature__title { font-family: var(--font-title); font-weight: 700; letter-spacing: .8px; text-transform: uppercase; font-size: 18px; color: #4A3010; display: flex; align-items: center; gap: 14px; text-shadow: 0 1px 0 rgba(255,255,255,.55); }
/* ícone vira medalhão de ouro cravado */
.feature__title i {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; color: #4A3512;
    background: radial-gradient(circle at 34% 26%, #F3DD8E 0%, #D8BE63 42%, #A9892F 100%);
    border: 1px solid #6E5410;
    box-shadow: 0 0 0 3px rgba(237,218,164,.5), 0 0 0 4px rgba(110,84,16,.35),
                0 3px 8px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.6) inset;
    text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.feature__desc { font-family: var(--font-serif); font-size: 15.5px; color: var(--text-muted); margin: 13px 0 20px; line-height: 1.5; }
.feature--locked { opacity: .72; }

/* — Toggle dourado premium (gswitch) — */
.gswitch { display: inline-flex; align-items: center; cursor: pointer; flex-shrink: 0; }
.gswitch input { position: absolute; opacity: 0; width: 0; height: 0; }
.gswitch__track {
    width: 56px; height: 30px; border-radius: 16px; position: relative;
    background: #CDBB90; border: 1px solid #B4A06E;
    box-shadow: 0 1px 3px rgba(74,54,17,.35) inset;
    transition: background .22s ease, border-color .22s ease;
}
.gswitch__thumb {
    position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #FFFBF0, #EAD9B4 60%, #CDB988);
    box-shadow: 0 2px 5px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(110,84,16,.25);
    transition: transform .24s cubic-bezier(.34,.1,.25,1), box-shadow .24s ease;
}
.gswitch input:checked + .gswitch__track { background: var(--gold-grad); border-color: #6E5410; box-shadow: 0 1px 3px rgba(74,54,17,.35) inset, 0 0 12px rgba(255,193,43,.4); }
.gswitch input:checked + .gswitch__track .gswitch__thumb { background: radial-gradient(circle at 34% 28%, #FFF7E0, #F0DCA6 60%, #D8BE72); box-shadow: 0 2px 5px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px #8A6D1E; }
.gswitch input:checked + .gswitch__track .gswitch__thumb { transform: translateX(26px); }
.gswitch input:focus-visible + .gswitch__track { box-shadow: 0 0 0 3px var(--accent-muted), 0 1px 3px rgba(74,54,17,.35) inset; }

/* — Grade de campos: nome (Cinzel) + input GRANDE + dica (serifa) — */
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px 26px; }
.field-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.field { display: flex; flex-direction: column; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
@media (min-width: 720px) { .field-grid .field--wide:not(:only-child) { grid-column: auto; } }
.field > label { font-family: var(--font-title); font-weight: 700; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: #5E4A28; margin-bottom: 9px; display: flex; align-items: center; gap: 8px; line-height: 1.3; }
/* losango de ouro antes do rótulo (inscrição gravada) */
.field > label::before { content: ''; width: 6px; height: 6px; flex-shrink: 0; background: var(--gold-grad); border: 1px solid #6E5410; transform: rotate(45deg); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset; }
.field > label i { color: #8A6D1E; font-size: 12px; }
.field small { font-family: var(--font-serif); font-size: 14.5px; font-style: italic; color: var(--text-muted); margin-top: 8px; line-height: 1.5; }
.field .form-control, .field .form-select, .field textarea { font-size: 16px !important; padding: 14px 16px !important; }
/* selects como placas gravadas: chevron de ouro à direita numa cela com filete */
.field .form-select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #8A6D1E 50%),
        linear-gradient(135deg, #8A6D1E 50%, transparent 50%),
        linear-gradient(180deg, rgba(110,84,16,.22), rgba(110,84,16,.22)) !important;
    background-position: calc(100% - 22px) center, calc(100% - 15px) center, calc(100% - 44px) top !important;
    background-size: 7px 7px, 7px 7px, 1px 100% !important;
    background-repeat: no-repeat !important;
    padding-right: 54px !important;
    cursor: pointer;
}
.field .form-select:hover { border-color: #B79637 !important; }

/* — Input com unidade (pts / % / ouro) — */
.field__num { display: flex; align-items: stretch; }
.field__num .form-control { flex: 1; }
.field__num .form-control:first-child { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.field__unit {
    display: inline-flex; align-items: center; padding: 0 16px; white-space: nowrap;
    background: linear-gradient(180deg, #D8C089, #C3A863); border: 1px solid #A9892F; border-left: none;
    border-radius: 0 8px 8px 0; font-family: var(--font-title); font-weight: 700; font-size: 12px;
    letter-spacing: .08em; text-transform: uppercase; color: #4A3512;
    box-shadow: 0 1px 0 rgba(255,255,255,.4) inset; text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.field__unit--pre { border-left: 1px solid #A9892F; border-right: none; border-radius: 8px 0 0 8px; }
.field__unit--pre + .form-control { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }

/* — Linha de liga/desliga com título + descrição — */
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px dashed rgba(138,109,30,.28); }
.toggle-row + .field-grid { margin-top: 18px; }
.toggle-row > div { display: flex; flex-direction: column; gap: 2px; }
.toggle-row strong { font-family: var(--font-title); font-size: 14px; letter-spacing: .3px; text-transform: uppercase; font-weight: 600; color: #4A3418; }
.toggle-row span { font-family: var(--font-serif); font-size: 14.5px; color: var(--text-muted); }

/* — Selo de plano no título do card — */
.badge-plano { font-family: var(--font-title); font-size: 10px; letter-spacing: .1em; padding: 3px 9px; border-radius: 6px; background: var(--success); color: #EDE7D0; border: 1px solid rgba(0,0,0,.22); box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.15) inset; vertical-align: middle; }
.badge-plano--lock { background: #8A6D1E; }

/* — Memória do bot (lista automática tpvp_lista) — */
.pvp-mem { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 16px; }
@media (max-width: 720px) { .pvp-mem { grid-template-columns: 1fr; } }
.pvp-mem__grupo { background: rgba(255,255,255,.28); border: 1px solid rgba(138,109,30,.28); border-radius: 12px; padding: 14px 16px 16px; }
.pvp-mem__titulo { display: flex; align-items: center; gap: 8px; font-family: var(--font-title); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #4A3418; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(138,109,30,.25); }
.pvp-mem__titulo i { color: var(--accent); }
.pvp-mem__lista { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; }
.pvp-mem__lista + .pvp-mem__lista { border-top: 1px dashed rgba(138,109,30,.22); }
.pvp-mem__rot { flex: 0 0 90px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-serif); font-size: 13.5px; font-weight: 600; padding-top: 4px; }
.pvp-mem__rot--mira { color: var(--success); }
.pvp-mem__rot--ign  { color: var(--danger); }
.pvp-chips { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 7px; flex: 1; min-height: 30px; max-height: 188px; overflow-y: auto; padding-right: 4px; }
.pvp-chips::-webkit-scrollbar { width: 8px; }
.pvp-chips::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 8px; }
/* memória do bot — cabeçalho (total), busca e contadores por lista */
.pvp-total { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 21px; padding: 0 8px; margin-left: 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0; }
.pvp-cont { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 17px; margin-left: 3px; padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,.12); color: var(--text-muted); font-size: 11px; font-weight: 700; }
.pvp-busca { position: relative; display: flex; align-items: center; margin-left: auto; }
.pvp-busca > i { position: absolute; left: 12px; color: var(--text-muted); font-size: 13px; pointer-events: none; }
.pvp-busca input { width: 210px; padding: 8px 30px 8px 32px; border-radius: 999px; border: 1px solid var(--surface-border); background: rgba(255,255,255,.05); color: var(--text); font-size: 13.5px; }
.pvp-busca input::placeholder { color: var(--text-muted); }
.pvp-busca input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(122,112,186,.18); }
.pvp-busca__x { position: absolute; right: 8px; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: rgba(255,255,255,.14); color: var(--text-muted); cursor: pointer; font-size: 14px; line-height: 1; }
.pvp-busca__x:hover { background: var(--rd, var(--danger)); color: #fff; }
.pvp-semfiltro { font-family: var(--font-serif); font-style: italic; color: var(--text-muted); text-align: center; padding: 12px 0 2px; margin: 0; }
@media (max-width: 560px) { #pvpMemCard .feature__head { flex-wrap: wrap; } .pvp-busca, .pvp-busca input { width: 100%; } }

/* Minhas contas de jogo (visão do cliente) — lista com status ON/OFF por licença + ativar por código */
.acct-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 6px; }
.acct-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--surface-border); background: rgba(255,255,255,.04); }
.acct-row--atual { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(122,112,186,.18); }
.acct-row__info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.acct-row__srv { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.acct-row__nome { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-row__nome em { font-weight: 600; font-style: normal; color: var(--accent); font-size: 12px; }
.acct-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.acct-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.acct-pill--on  { color: var(--gr, #0DA759); background: rgba(13,167,89,.12); }
.acct-pill--off { color: var(--text-muted); background: rgba(255,255,255,.08); }
.acct-pill--rev { color: var(--rd, #ff4133); background: rgba(255,65,51,.14); }
.btn-sm { padding: 5px 11px; font-size: 13px; }
.acct-ativar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.acct-ativar input { flex: 1; min-width: 150px; max-width: 220px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; text-align: center; }
@media (max-width: 560px) { .acct-row { flex-wrap: wrap; } .acct-ativar input { max-width: none; } }

/* Seletor GLOBAL de contas (topo da sidebar) — mostra quem você gerencia + troca de qualquer página */
.acctsw { position: relative; margin: 4px 12px 14px; }
.acctsw__btn { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 11px; border-radius: 12px;
    border: 1px solid var(--surface-border); background: rgba(255,255,255,.05); color: var(--text); cursor: pointer; text-align: left; }
.acctsw__btn:hover { border-color: var(--accent); background: rgba(122,112,186,.10); }
.acctsw__cor { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 4px; box-shadow: 0 0 0 2px rgba(0,0,0,.25) inset; }
.acctsw__lbl { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; font-weight: 700; font-size: 13.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acctsw__lbl small { font-weight: 600; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.acctsw__chev { color: var(--text-muted); font-size: 12px; transition: transform .18s; }
.acctsw.open .acctsw__chev { transform: rotate(180deg); }
.acctsw__pop { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; padding: 8px;
    border-radius: 14px; border: 1px solid var(--surface-border); background: var(--surface, #12151f); box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.acctsw.open .acctsw__pop { display: block; }
.acctsw__buscawrap { position: relative; margin-bottom: 6px; }
.acctsw__buscawrap i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 12px; }
.acctsw__busca { width: 100%; padding: 8px 10px 8px 30px; border-radius: 9px; border: 1px solid var(--surface-border);
    background: rgba(255,255,255,.05); color: var(--text); font-size: 13px; }
.acctsw__busca:focus { outline: none; border-color: var(--accent); }
.acctsw__list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.acctsw__item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; color: var(--text); text-decoration: none; }
.acctsw__item:hover { background: rgba(255,255,255,.07); }
.acctsw__item.is-sel { background: rgba(122,112,186,.16); box-shadow: inset 0 0 0 1px rgba(122,112,186,.4); }
.acctsw__nm { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; font-weight: 700; font-size: 13.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acctsw__nm small { font-weight: 600; font-size: 11px; color: var(--text-muted); }
.acctsw__st { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; }
.acctsw__ger { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 6px; padding: 8px; border-radius: 9px;
    border: 1px dashed var(--surface-border); color: var(--text-muted); text-decoration: none; font-size: 13px; font-weight: 600; }
.acctsw__ger:hover { color: var(--accent); border-color: var(--accent); }
.acctsw--vazio { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 12px; text-decoration: none;
    border: 1px dashed var(--accent); color: var(--accent); font-weight: 700; font-size: 13.5px; }

/* Hub de contas — grade de cartões (status/cor/ações), cor da conta na borda-esquerda */
.conta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 10px; }
.conta-card { position: relative; display: flex; flex-direction: column; padding: 20px 20px 18px; border-radius: 18px; border: 1px solid var(--surface-border);
    background: var(--surface); overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.03); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.conta-card:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -28px rgba(0,0,0,.34); border-color: color-mix(in srgb, var(--cc, #7A70BA) 38%, var(--surface-border)); }
.conta-card::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0; background: var(--cc, var(--accent)); }
.conta-card--atual { border-color: color-mix(in srgb, var(--cc, #7A70BA) 55%, var(--surface-border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cc, #7A70BA) 45%, transparent), 0 20px 44px -26px rgba(0,0,0,.3); }
.conta-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.conta-card__srv { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.conta-card__srv i { font-size: 9px; opacity: .6; }
.conta-card__st { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; white-space: nowrap; letter-spacing: .02em; }
.conta-card__dot { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); }
.conta-card__nome { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 14px; line-height: 1.1; letter-spacing: .005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conta-card__badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; min-height: 22px; }
.conta-card__cd { font-size: 11.5px; color: var(--warning); display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.conta-card__gerenciando { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--cc, var(--accent)); display: inline-flex; align-items: center; gap: 4px; }
.conta-card__acoes { display: flex; gap: 8px; margin-top: auto; }
.conta-card__acoes .btn { flex: 1; justify-content: center; }
.pvp-chip { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(180deg, #F6ECD5, #E4D3B0); border: 1px solid #C4AC72; border-radius: 999px; padding: 4px 5px 4px 12px; font-size: 13px; color: var(--text); box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.pvp-chip__nome { font-weight: 600; }
.pvp-chip__x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: none; border-radius: 50%; background: rgba(139,46,46,.14); color: var(--danger); font-size: 16px; line-height: 1; cursor: pointer; transition: background .15s, transform .15s; }
.pvp-chip__x:hover { background: var(--danger); color: #F3E7CE; transform: scale(1.1); }
.pvp-chip__x:disabled { opacity: .4; cursor: default; }
.pvp-vazio { font-family: var(--font-serif); font-size: 13.5px; font-style: italic; color: var(--text-muted); padding-top: 4px; }

/* ============================================================================
   ✦✦ ORNAMENTAÇÃO (v2) — moldura com cantos, vinheta de pergaminho, teto ultrawide
   ============================================================================ */

/* Moldura interna (filete de ouro recuado) + vinheta envelhecida nos cards de recurso */
.feature::after {
    content: ''; position: absolute; inset: 7px; border-radius: 8px; pointer-events: none;
    border: 1px solid rgba(138,109,30,.28);
    box-shadow: 0 0 26px rgba(120,86,20,.10) inset;
}
/* Cantos de ouro (esquadros) nos 4 vértices da moldura interna */
.feature > .feature__corner { position: absolute; width: 14px; height: 14px; pointer-events: none; z-index: 1; opacity: .9; }
.feature > .feature__corner::before, .feature > .feature__corner::after { content: ''; position: absolute; background: linear-gradient(90deg, #A9892F, #E8C55A); box-shadow: 0 0 3px rgba(255,193,43,.5); }
.feature > .feature__corner::before { width: 14px; height: 2px; top: 0; left: 0; }
.feature > .feature__corner::after  { width: 2px; height: 14px; top: 0; left: 0; }
.feature__corner--tl { top: 4px;    left: 4px;   }
.feature__corner--tr { top: 4px;    right: 4px;  transform: scaleX(-1); }
.feature__corner--bl { bottom: 4px; left: 4px;   transform: scaleY(-1); }
.feature__corner--br { bottom: 4px; right: 4px;  transform: scale(-1); }
/* conteúdo acima da moldura */
.feature > .feature__head, .feature > .feature__desc, .feature > .field-grid,
.feature > .toggle-row, .feature > .pvp-mem, .feature > .feature__subhead { position: relative; z-index: 1; }

/* subtítulo dentro de um card (separa blocos de campos) */
.feature__subhead { display: flex; align-items: center; gap: 8px; font-family: var(--font-serif); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin: 22px 0 12px; padding-top: 16px; border-top: 1px solid rgba(138,109,30,.2); }
.feature__subhead i { font-size: 12px; opacity: .8; }
/* checkbox em linha dentro de um .field (não é grade) */
.cat-check--inline { display: inline-flex; margin-top: 6px; }

/* Largura: as páginas de config preenchem o corpo inteiro, igual a de Relatórios (que o Wilton
   usa como referência de "normal"). Sem teto de 1400px — o cap antigo deixava as configs
   "espremidas" e centradas em tela larga, destoando do resto do painel. */

/* — Status da extensão (Minha conta) — */
.ext-status { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-serif); font-size: 15.5px; padding: 11px 16px; border-radius: 10px; border: 1px solid; }
.ext-status i { font-size: 15px; }
.ext-status--wait { color: #6E5A33; background: rgba(138,109,30,.08); border-color: rgba(138,109,30,.28); }
.ext-status--ok   { color: #3E6330; background: rgba(78,122,58,.12); border-color: rgba(78,122,58,.4); }
.ext-status--warn { color: #8B2E2E; background: rgba(139,46,46,.10); border-color: rgba(139,46,46,.38); }

/* — Placa de PIX (Minha conta) — */
.pix-box { background: rgba(255,255,255,.28); border: 1px solid rgba(138,109,30,.28); border-radius: 12px; padding: 6px 18px; margin-bottom: 4px; }
.pix-box__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
.pix-box__row + .pix-box__row { border-top: 1px dashed rgba(138,109,30,.24); }
.pix-box__row > span { font-family: var(--font-title); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #6E5A33; }
.pix-box__row code { font-family: var(--font-serif); font-size: 16px; color: var(--text); background: none; padding: 0; }
.pix-box__row strong { font-family: var(--font-title); font-size: 17px; color: #4A3010; }

/* ============================================================================
   ✦ HOME (dashboard do cliente) — resumo de hoje + cards de conta ao vivo
   ============================================================================ */
.live-badge { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; margin-left: 10px; font-family: var(--font-title); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #4E7A3A; background: rgba(78,122,58,.14); border: 1px solid rgba(78,122,58,.45); border-radius: 999px; padding: 4px 10px; }
.live-badge i { font-size: 7px; animation: pulseDot 1.6s ease-in-out infinite; }
.live-badge--tick { transition: none; box-shadow: 0 0 0 3px rgba(78,122,58,.25); }

.home-secline { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 12px 4px 4px; font-family: var(--font-serif); font-size: 15.5px; color: var(--shell-text-muted); }
.home-secline > span { display: inline-flex; align-items: center; gap: 7px; }
.home-secline i { color: var(--accent); }
.home-secline .vd-sep { font-family: var(--font-title); font-size: 11px; color: var(--accent); margin: 0 1px 0 3px; }
.home-verrel { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-title); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent) !important; text-decoration: none; }
.home-verrel:hover { color: #E8C55A !important; }

.home-sub { font-family: var(--font-title); font-size: 15px; letter-spacing: .05em; text-transform: uppercase; color: var(--shell-text); margin: 22px 2px 14px; display: flex; align-items: center; gap: 10px; }
.home-sub i { color: var(--accent); }

.acct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 22px; }
.acct-card { padding: 20px 22px 22px; }
.acct-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 14px; }
.acct-card__id { display: flex; align-items: center; gap: 13px; }
.acct-card__srv { display: block; font-family: var(--font-title); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.acct-card__nome { font-family: var(--font-title); font-size: 17px; color: #4A3010; }

.acct-state { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-title); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.acct-state i { font-size: 8px; }
.acct-state--on   { color: #3E6330; background: rgba(78,122,58,.14); border-color: rgba(78,122,58,.5); }
.acct-state--on i { animation: pulseDot 1.6s ease-in-out infinite; }
.acct-state--pause{ color: #8A6D1E; background: rgba(138,109,30,.12); border-color: rgba(138,109,30,.4); }
.acct-state--off  { color: #8B2E2E; background: rgba(139,46,46,.10); border-color: rgba(139,46,46,.34); }
@keyframes pulseDot { 0%,100%{opacity:1} 50%{opacity:.35} }

.acct-now { background: rgba(255,255,255,.30); border: 1px solid rgba(138,109,30,.22); border-radius: 11px; padding: 12px 15px; margin-bottom: 14px; }
.acct-now__label { display: block; font-family: var(--font-title); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.acct-now__acao { display: block; font-family: var(--font-title); font-size: 16px; color: #4A3010; margin: 3px 0 5px; }
.acct-now__meta { font-family: var(--font-serif); font-size: 13.5px; color: var(--text-muted); }
.acct-now__meta i { color: #8B2E2E; }

.live-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.live-pill { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(180deg, #F6ECD5, #E7D6B2); border: 1px solid #C9B27B; border-radius: 8px; padding: 4px 9px; font-size: 12.5px; }
.live-pill__n { font-family: var(--font-title); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: #6E5A33; }
.live-pill__v { font-family: var(--font-serif); font-weight: 600; color: var(--text); }
.live-pill--now { border-color: #4E7A3A; background: linear-gradient(180deg, #E7F0D8, #D3E4BE); }
.live-pill--now .live-pill__v { color: #3E6330; }
.live-pill--none { color: var(--text-muted); font-style: italic; }

.acct-today { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding-top: 15px; border-top: 1px dashed rgba(138,109,30,.28); }
.acct-stat { text-align: center; }
.acct-stat__v { display: block; font-family: var(--font-title); font-size: 18px; font-weight: 700; color: #4A3010; }
.acct-stat__l { display: block; font-family: var(--font-serif); font-size: 12.5px; color: var(--text-muted); margin-top: 1px; }

/* card com dado velho (jogo em 2º plano / bot sem ticar) — sinaliza honesto */
.acct-card--stale .live-pills, .acct-card--stale .acct-now__acao { opacity: .5; }
.acct-card--stale .acct-now__meta::after { content: ' · jogo em 2º plano'; color: #8A6D1E; font-style: italic; }

.empty-home { grid-column: 1/-1; text-align: center; padding: 46px 20px; color: var(--text-muted); font-family: var(--font-serif); }
.empty-home i { font-size: 36px; color: var(--accent); opacity: .5; display: block; margin-bottom: 12px; }
.empty-home p { font-size: 16px; }

/* — Grid de checkboxes (Vender tranqueira: categorias + mercadores) — */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 12px; margin-top: 2px; }
.cat-grid--merc { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.cat-check { display: flex; align-items: center; gap: 8px; font-family: var(--font-serif); font-size: 14.5px; color: var(--text); cursor: pointer; padding: 5px 8px; border: 1px solid rgba(138,109,30,.22); border-radius: 8px; background: rgba(255,255,255,.22); transition: border-color .15s, background .15s; }
.cat-check:hover { border-color: #C4AC72; background: rgba(255,255,255,.4); }
.cat-check input { width: 17px; height: 17px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
.cat-check:has(input:checked) { border-color: #B79637; background: linear-gradient(180deg, #F6ECD5, #E7D6B2); }

/* — Ações do form — */
.form-actions { margin-top: 8px; padding: 2px 0 10px; }
.form-actions .btn { font-size: 13.5px !important; padding: 13px 26px !important; }

/* ============================================================================
   ✦✦ HERO das páginas (config etc.) = BANDA DE MADEIRA igual à Home (.lux-hero)
   Restiliza .page-header--hero pra virar uma faixa escura com filete de ouro +
   crest + título Cinzel. Como TODAS as configs usam esse header, sobem juntas.
   ============================================================================ */
.page-header--hero {
    position: relative; overflow: hidden;
    padding: 22px 26px; margin-bottom: 22px;
    border: 1px solid #3A2C18; border-radius: 16px;
    background: linear-gradient(135deg, #241A11, #17110C 58%, #100B07);
    box-shadow: 0 12px 32px rgba(0,0,0,.42), inset 0 1px 0 rgba(232,205,122,.12);
}
.page-header--hero::before {   /* brilho + textura sutil */
    content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background:
        radial-gradient(120% 120% at 100% 0, rgba(200,169,78,.12), transparent 55%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 2px, transparent 2px 7px);
}
.page-header--hero::after {    /* filete de ouro no topo (substitui a rule do .page-header) */
    content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: auto; height: 2px; width: auto;
    background: linear-gradient(90deg, transparent, #E7CD7A, #C8A94E, transparent);
}
.page-header--hero > * { position: relative; z-index: 1; }
.page-header--hero h1 {
    font-family: var(--font-title); font-weight: 700; font-size: 26px; line-height: 1.08;
    color: #F4E7C9; margin: 0; border: 0; text-shadow: 0 1px 0 rgba(0,0,0,.6);
}
.page-header--hero p {
    font-family: var(--font-serif); font-size: 15px; color: #C1A878; margin: 7px 0 0;
}
.page-header--hero .page-header__crest {
    width: 60px; height: 60px; flex: 0 0 auto; border-radius: 14px;
    display: grid; place-items: center; font-size: 26px; color: #E7CD7A;
    background: radial-gradient(circle at 34% 28%, #3A2C18, #181109);
    border: 1px solid #8A6D1E;
    box-shadow: inset 0 1px 0 rgba(232,205,122,.25), 0 5px 14px rgba(0,0,0,.5);
}

/* ============================================================================
   ✦ LICENÇAS (admin) — trazida pro padrão Nervo (shell + app.css)
   ============================================================================ */
.lic-h2 { font-family: var(--font-title); font-size: 15px; letter-spacing: .05em; text-transform: uppercase; color: var(--shell-text); margin: 26px 2px 16px; display: flex; align-items: center; gap: 10px; }
.lic-h2 i { color: var(--accent); }
.lic-criar { display: flex; gap: 14px 16px; flex-wrap: wrap; align-items: flex-end; }
.lic-criar .field { min-width: 150px; flex: 1 1 150px; }
.lic-criar .lic-field--num { flex: 0 0 100px; min-width: 100px; }
.lic-criar .btn { flex: 0 0 auto; }
.lic-tok { display: inline-block; background: #120D07; border: 1px dashed var(--accent); border-radius: 8px; padding: 8px 11px; color: #E8C55A; font-family: ui-monospace, monospace; font-size: .82rem; word-break: break-all; }
.lic-cli { margin-bottom: 18px; }
.lic-cli .feature__head { margin-bottom: 4px; }
.lic-meta { display: flex; align-items: center; gap: 12px; font-size: .82rem; flex-wrap: wrap; }
.lic-sub { font-family: var(--font-serif); color: var(--text-muted); margin: -2px 0 14px; font-size: 15px; position: relative; z-index: 1; }
.lic-tok-row { display: flex; gap: 10px; align-items: center; margin: 4px 0 14px; flex-wrap: wrap; position: relative; z-index: 1; }
.lic-tok-row .lic-tok { flex: 1; min-width: 220px; font-size: .74rem; }
.lic-inline { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.lic-plano { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin: 2px 0 16px; padding-top: 14px; border-top: 1px dashed rgba(138,109,30,.28); position: relative; z-index: 1; }
.lic-plano .field { min-width: 180px; }
.lic-plano .field small { text-transform: none; font-weight: 400; font-style: normal; font-size: 12px; margin: 0 0 0 4px; }
.lic-pag { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: rgba(191,174,84,.12); border: 1px solid rgba(191,174,84,.5); border-radius: 10px; padding: 9px 13px; margin: 2px 0 14px; color: #6E5A2A; font-family: var(--font-serif); font-size: 14.5px; position: relative; z-index: 1; }
.lic-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.lic-dot.on { background: #3E6B2C; box-shadow: 0 0 6px rgba(62,107,44,.6); }
.lic-dot.off { background: #B4A06E; }
.lic-tablewrap { overflow-x: auto; margin-top: 4px; position: relative; z-index: 1; }
.lic-tbl { min-width: 640px; margin: 0; }
.lic-tbl td { vertical-align: middle; }
.lic-acoes { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
/* botões compactos dentro dos cards de cliente (vencem o padding !important dos .btn-*) */
.lic-cli .btn, .lic-tok-row .btn { padding: 7px 14px !important; font-size: 12.5px !important; }

/* ── Lista mestre de clientes: KPIs + toolbar + grid ── */
.lic-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 0 0 18px; }
.lic-kpi { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); padding: 14px 16px; box-shadow: var(--shadow-sm); }
.lic-kpi i { font-size: 20px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-muted); color: var(--accent); flex: 0 0 auto; }
.lic-kpi b { font-size: 22px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); }
.lic-kpi span { display: block; font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.lic-kpi--on i     { background: rgba(13,167,89,.13);  color: var(--success); }
.lic-kpi--warn i   { background: rgba(215,119,72,.14); color: var(--warning); }
.lic-kpi--danger i { background: rgba(228,65,65,.13);  color: var(--danger); }
.lic-kpi--ok i     { background: rgba(72,163,215,.14); color: var(--secondary); }

.lic-toolbar { display: flex; flex-direction: row; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 14px 16px; margin-bottom: 18px; }
.lic-search { position: relative; flex: 1 1 320px; display: flex; align-items: center; }
.lic-search i { position: absolute; left: 14px; color: var(--text-faint); pointer-events: none; }
.lic-search input { padding-left: 38px; }
.lic-filtro { flex: 0 0 200px; min-width: 160px; }
.lic-tb-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.lic-collapse { animation: licFade .18s ease; }
@keyframes licFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ── Modal de pagamento cripto (NOWPayments) ── */
.pay-modal { position: fixed; inset: 0; z-index: 9999; background: rgba(20,16,30,.62); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: payFade .16s ease; }
@keyframes payFade { from { opacity: 0; } to { opacity: 1; } }
.pay-box { position: relative; width: 100%; max-width: 400px; max-height: 92vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(0,0,0,.28); padding: 24px 22px; text-align: center; }
.pay-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: none; border-radius: 8px; background: var(--surface-alt); color: var(--text-muted); cursor: pointer; font-size: 15px; }
.pay-close:hover { background: var(--accent-muted); color: var(--accent); }
.pay-h { margin: 0 0 4px; font-size: 19px; font-weight: 800; color: var(--text); }
.pay-sub { margin: 0 0 16px; font-size: 13px; color: var(--text-muted); }
.pay-coins { display: flex; gap: 12px; }
.pay-coin { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 10px; border: 1.5px solid var(--surface-border); border-radius: var(--radius-lg); background: var(--surface-alt); cursor: pointer; transition: all .15s; }
.pay-coin:hover { border-color: var(--accent); background: var(--accent-muted); transform: translateY(-2px); }
.pay-coin i { font-size: 30px; color: var(--accent); }
.pay-coin--off { opacity: .45; cursor: not-allowed; filter: grayscale(1); }
.pay-coin--off:hover { border-color: var(--surface-border); background: var(--surface-alt); transform: none; }
.pay-coin span { font-weight: 700; color: var(--text); }
.pay-coin small { font-size: 11px; color: var(--text-muted); }
.pay-load, .pay-err { padding: 30px 10px; font-size: 15px; color: var(--text-muted); }
.pay-err { color: var(--danger); }
.pay-qr { display: block; margin: 4px auto 14px; border-radius: 10px; border: 4px solid #fff; background: #fff; }
.pay-lbl { display: block; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 0 0 5px; }
.pay-addr { display: flex; align-items: center; gap: 8px; background: var(--surface-alt); border: 1px solid var(--surface-border); border-radius: 10px; padding: 9px 10px; }
.pay-addr code { flex: 1; font-size: 12px; word-break: break-all; text-align: left; color: var(--text); font-family: ui-monospace, monospace; }
.pay-copy { flex: 0 0 auto; border: none; background: var(--accent); color: #fff; border-radius: 8px; width: 34px; height: 34px; cursor: pointer; }
.pay-copy:hover { background: var(--accent-hover); }
.pay-rede { margin-top: 12px; font-size: 12px; color: var(--warning); background: rgba(215,119,72,.1); border: 1px solid rgba(215,119,72,.3); border-radius: 8px; padding: 8px 10px; text-align: left; }
.pay-wait { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--surface-border); font-size: 13px; color: var(--text-muted); }
.pay-ok { padding: 26px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pay-ok i { font-size: 46px; color: var(--success); }
.pay-ok b { font-size: 18px; color: var(--text); }
.pay-ok span { font-size: 13px; color: var(--text-muted); }

/* ── Página de DETALHE do cliente ── */
.cli-hero { display: flex; align-items: center; gap: 18px; }
.cli-hero__main { flex: 1; min-width: 0; }
.cli-back { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; margin-bottom: 6px; }
.cli-back:hover { text-decoration: underline; }
.cli-hero__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: .82rem; white-space: nowrap; color: rgba(255,255,255,.9); }
.cli-hero__meta .text-muted { color: rgba(255,255,255,.72) !important; }

/* ============================================================================
   ✦✦✦ TEMA HOLO VIBRANTE — reskin futurista (vidro + neon + gradiente holográfico)
   Sobrepõe a camada pergaminho/ouro acima (não apaga → reversível). Redeclara os
   tokens (último :root vence) e reveste os componentes cravados em ouro.
   ============================================================================ */
:root{
  /* ═══ TEMA MOFI — canvas cinza-claro · primário ROXO #7A70BA · cards arredondados + sombra suave ═══
     Valores REAIS do Mofi (assets/scss/utils/_variables.scss). */
  --accent:#7A70BA; --accent-hover:#6a5fb0; --accent-muted:rgba(122,112,186,.12);
  --secondary:#48A3D7; --tertiary:#C95E9E;
  --bg:#f8f8f8;
  --surface:#ffffff; --surface-alt:#F9F9FB; --surface-border:#e3e3ec;
  --text:#333941; --text-muted:#586070; --text-faint:#93939c;
  --success:#0DA759; --warning:#D77748; --danger:#E44141; --info:#16C7F9;
  --shell:#ffffff; --shell-border:rgba(69,110,243,.10); --shell-text:#3D434A; --shell-text-muted:#6A7185;
  --radius:8px; --radius-lg:16px;
  --shadow:0 9px 20px rgba(46,35,94,.07); --shadow-sm:1px 2px 21px -2px rgba(214,214,227,.55);
  --font:'Outfit',system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-title:'Outfit',system-ui,"Segoe UI",Roboto,sans-serif; --font-serif:'Outfit',system-ui,sans-serif;
  --font-mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",monospace;
  --cy:#48A3D7; --vi:#7A70BA; --mg:#E44141; --co:#D77748; --panel:#ffffff; --gold-bright:#D77748;
  --am:#D77748; --gr:#0DA759; --rd:#E44141;                    /* semânticos Mofi */
  --holo:#7A70BA;                                              /* acento SÓLIDO roxo Mofi */
  --energy:linear-gradient(120deg,#7A70BA 0%,#a26cf8 100%);    /* barras: gradiente primário Mofi */
  --gold-grad:var(--holo);
  --parchment-tex:#ffffff;
  --wood-tex:#f8f8f8;
}

/* — Fundo: canvas cinza-claro Mofi, sem aurora/grade — */
body{background:var(--bg)!important;background-attachment:fixed!important;color:var(--text);
  background-image:none!important;font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:.005em}
body::before{display:none!important}
.app-wrapper{position:relative;z-index:1}   /* só o wrapper sobe acima do fundo; NÃO tocar em .sidebar(fixed)/.topbar(sticky) */

/* — Cards / painéis: branco, SEM borda, cantos arredondados (16px) + sombra suave (estilo Mofi) — */
.card,.account-plaque,.pvp-mem__grupo,.pix-box,.stat-card{
  background:var(--surface)!important;border:none!important;border-radius:var(--radius-lg)!important;
  box-shadow:var(--shadow)!important;backdrop-filter:none!important}
.card::before{display:none!important}
.card-header{border-bottom:1px solid var(--surface-border)}
.card-header::after{display:none!important}
.card-title{color:var(--text)!important;font-family:var(--font-title);letter-spacing:.02em}
.card-title i,.card-header i,.info-label i{color:var(--accent)!important}
.info-value{color:var(--text)}
a{color:var(--accent)}a:hover{color:var(--accent-hover)}

/* — Sidebar / topbar: claro, hairline, item ativo navy — */
.sidebar{background:var(--shell)!important;border-right:1px solid var(--shell-border)!important;box-shadow:none!important;backdrop-filter:none!important}
.sidebar-brand::after{background:var(--surface-border)!important}
.sidebar-brand .brand-name{color:var(--shell-text)!important;font-family:var(--font-title);letter-spacing:.14em;text-shadow:none}
.sidebar-brand .brand-icon{background:var(--accent);color:#fff;box-shadow:none}
.nav-item{color:var(--shell-text-muted)}
.nav-item:hover{color:var(--text)!important;background:var(--surface-alt)!important}
.nav-item.active{color:var(--accent)!important;background:var(--accent-muted)!important;border-left-color:transparent}
.nav-item.active::before{display:block!important;content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--accent);box-shadow:none}
.topbar{background:var(--shell)!important;border-bottom:1px solid var(--shell-border)!important;box-shadow:none!important;backdrop-filter:none!important}
.topbar-title{color:var(--shell-text)!important;font-family:var(--font-title);letter-spacing:.1em}
.avatar{background:var(--accent)!important;color:#fff;box-shadow:none}

/* — Hero do topo das páginas — */
.page-header h1{color:var(--shell-text)!important;font-family:var(--font-title);letter-spacing:-.01em;text-shadow:none}
.page-header p{color:var(--shell-text-muted)!important;font-family:var(--font)}
.page-header::after{background:var(--surface-border)!important}
.page-header--hero{border:1px solid var(--surface-border)!important;background:var(--surface)!important;
  box-shadow:var(--shadow-sm)!important}
.page-header--hero::before{display:none!important}
.page-header--hero::after{display:none!important}
.page-header--hero h1{color:var(--text)!important}
.page-header--hero p{color:var(--text-muted)!important}
.page-header--hero .page-header__crest,.page-header__crest{background:var(--accent)!important;color:#fff!important;border:none!important;box-shadow:none!important}

/* — Inputs: branco, hairline, foco navy — */
.form-control,.form-select,.field .form-control,.field .form-select,.field textarea{
  background:var(--surface)!important;border:1px solid var(--surface-border)!important;color:var(--text)!important;
  font-family:var(--font)!important;box-shadow:var(--shadow-sm)!important}
.form-control::placeholder{color:var(--text-faint)!important}
.form-control:focus,.form-select:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-muted)!important}
.form-label,.field>label{color:var(--text-muted)!important;font-family:var(--font-title)}
.field>label::before{background:var(--accent)!important;border:none!important}
.field>label i{color:var(--accent)!important}
.field small,.field__hint,.feature__desc,.toggle-row span{color:var(--text-muted)!important;font-family:var(--font)!important;font-style:normal!important}
.field .form-select{
  background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%),linear-gradient(180deg,var(--surface-border),var(--surface-border))!important;
  background-position:calc(100% - 22px) center,calc(100% - 15px) center,calc(100% - 44px) top!important;
  background-size:7px 7px,7px 7px,1px 100%!important;
  background-repeat:no-repeat!important;background-color:var(--surface)!important}
.field .form-select:hover{border-color:var(--accent)!important}
.field__unit{background:var(--surface-alt)!important;border:1px solid var(--surface-border)!important;color:var(--text-muted)!important;text-shadow:none!important}
.form-check-input:checked{background-color:var(--accent)!important;border-color:var(--accent)!important}

/* — Botões: navy sólido + texto branco (sem glow) — */
.btn-primary,.btn-accent,.login-box .btn-primary{background:var(--accent)!important;border:1px solid transparent!important;color:#fff!important;font-family:var(--font-title)!important;letter-spacing:.02em;box-shadow:var(--shadow-sm)!important}
.btn-primary:hover,.btn-accent:hover,.login-box .btn-primary:hover{background:var(--accent-hover)!important;box-shadow:var(--shadow)!important;transform:translateY(-1px)}
.btn-outline{border:1px solid var(--surface-border)!important;color:var(--text-muted)!important;background:var(--surface)!important}
.btn-outline:hover{border-color:var(--accent)!important;color:var(--accent)!important;background:var(--accent-muted)!important}

/* — Badges / selos / alertas (fundo tinto claro + texto na cor) — */
.badge-accent{background:var(--accent)!important;color:#fff!important;border:none!important;box-shadow:none!important}
.badge-success{background:rgba(13,167,89,.12)!important;color:var(--success)!important}
.badge-danger{background:rgba(228,65,65,.12)!important;color:var(--danger)!important}
.badge-warning{background:rgba(215,119,72,.12)!important;color:var(--warning)!important}
.badge-plano{background:rgba(13,167,89,.12)!important;color:var(--success)!important;border:1px solid rgba(13,167,89,.35)!important;box-shadow:none!important}
.badge-plano--lock{background:var(--accent-muted)!important;color:var(--accent)!important;border-color:rgba(122,112,186,.3)!important}
.alert-success{background:rgba(13,167,89,.09)!important;color:#2f6a49!important;border:1px solid rgba(13,167,89,.3)!important}
.alert-danger{background:rgba(228,65,65,.09)!important;color:#9c352c!important;border:1px solid rgba(228,65,65,.3)!important}
.alert-warning{background:rgba(215,119,72,.1)!important;color:#8a5a13!important;border:1px solid rgba(215,119,72,.3)!important}
.alert-info{background:rgba(72,163,215,.09)!important;color:#255a72!important;border:1px solid rgba(72,163,215,.3)!important}

/* — Login — */
.login-page{background:var(--bg)!important;background-image:none!important}
.login-box{background:var(--surface)!important;box-shadow:0 12px 40px rgba(20,30,50,.10),0 0 0 1px var(--surface-border)!important}
.login-logo .logo-icon{background:var(--accent)!important;color:#fff!important;box-shadow:none!important}
.login-logo h1{color:var(--text)!important}
.btn-passkey{border:1px solid var(--surface-border)!important;color:var(--accent)!important}
.btn-passkey:hover{background:var(--accent-muted)!important;border-color:var(--accent)!important}

/* — Feature cards: título tinta, medalhão navy, sem neon — */
.feature__title{color:var(--text)!important;font-family:var(--font-title);text-shadow:none}
.feature__title i{background:var(--accent)!important;color:#fff!important;border:none!important;box-shadow:none!important;text-shadow:none!important}
.feature__head::after{background:var(--surface-border)!important;box-shadow:none!important}
.feature__head::before{display:none!important}
.feature__subhead{color:var(--accent)!important;border-top-color:var(--surface-border)!important}
.feature::after{display:none!important}
.feature>.feature__corner::before,.feature>.feature__corner::after{display:none!important}
.toggle-row{border-bottom:1px solid var(--surface-border)!important}
.toggle-row strong{color:var(--text)!important;font-family:var(--font-title)}

/* — Toggle (gswitch): trilho claro, ligado verde — */
.gswitch__track{background:#dfe3ea!important;border:1px solid var(--surface-border)!important;box-shadow:none!important}
.gswitch input:checked + .gswitch__track{background:var(--success)!important;border-color:transparent!important;box-shadow:none!important}   /* LIGADO = verde */
.gswitch__thumb{background:#fff!important;box-shadow:0 1px 2px rgba(20,30,50,.25)!important}

/* — Stat cards / números em mono — */
.stat-icon,.feature__title i{background:var(--accent)}
.stat-card{border-radius:var(--radius-lg)!important}
.stat-icon{color:#fff!important;border:none!important;box-shadow:none!important}
.stat-value,.acct-stat__v,.acct-now__acao,.acct-card__nome,.pix-box__row strong{color:var(--text)!important;font-family:var(--font-mono)!important;text-shadow:none!important}

/* — Account plaque — */
.account-plaque__crest{background:var(--accent)!important;color:#fff!important;border:none!important;box-shadow:none!important}
.account-plaque__label{color:var(--text-muted)!important}
.account-plaque__select select{color:var(--text)!important;text-shadow:none!important;font-family:var(--font-title)}
.account-plaque__select select option{color:var(--text);background:#fff}
.account-plaque__select i{color:var(--text-muted)!important}

/* — Home dashboard — */
.acct-now{background:var(--surface-alt)!important;border:1px solid var(--surface-border)!important}
.acct-now__label,.acct-now__meta{color:var(--text-muted)!important}
.live-pill{background:var(--surface-alt)!important;border:1px solid var(--surface-border)!important}
.live-pill__n{color:var(--text-muted)!important}.live-pill__v{color:var(--text)!important}
.live-pill--now{border-color:rgba(13,167,89,.4)!important;background:rgba(13,167,89,.1)!important}
.live-pill--now .live-pill__v{color:var(--success)!important}
.acct-today{border-top:1px solid var(--surface-border)!important}
.acct-stat__l,.acct-card__srv{color:var(--text-muted)!important}
.home-sub,.home-secline{color:var(--shell-text)!important}.home-secline{color:var(--shell-text-muted)!important}
.home-sub i,.home-secline i,.home-secline .vd-sep,.home-verrel,.lic-h2 i,.pvp-mem__titulo i{color:var(--accent)!important}
.live-badge{color:var(--success)!important;background:rgba(13,167,89,.1)!important;border-color:rgba(13,167,89,.35)!important}

/* — PVP memória / chips / categorias — */
.pvp-mem__titulo{color:var(--text)!important;border-bottom-color:var(--surface-border)!important}
.pvp-chip{background:var(--surface-alt)!important;border:1px solid var(--surface-border)!important;color:var(--text)!important}
.cat-check{background:var(--surface-alt)!important;border:1px solid var(--surface-border)!important;color:var(--text)!important}
.cat-check:has(input:checked){border-color:var(--accent)!important;background:var(--accent-muted)!important}
.cat-check input{accent-color:var(--accent)}

/* — Licenças / PIX / status extensão — */
.lic-h2,.lic-tbl,.lic-meta{color:var(--shell-text)!important}
.lic-tok{background:var(--accent-muted)!important;border:1px dashed rgba(122,112,186,.4)!important;color:var(--accent)!important}
.lic-pag{background:var(--surface-alt)!important;border:1px solid var(--surface-border)!important;color:var(--text-muted)!important}
.pix-box__row{border-top-color:var(--surface-border)!important}
.pix-box__row>span{color:var(--text-muted)!important}.pix-box__row code{color:var(--text)!important}
.ext-status--wait{color:var(--text-muted)!important;background:var(--surface-alt)!important;border-color:var(--surface-border)!important}
.ext-status--ok{color:var(--success)!important;background:rgba(13,167,89,.1)!important;border-color:rgba(13,167,89,.35)!important}
.ext-status--warn{color:var(--danger)!important;background:rgba(228,65,65,.1)!important;border-color:rgba(228,65,65,.35)!important}

/* — Tabelas Bootstrap + dropdown/modal/toast herdam vars. Skeleton neutro claro — */
.skel{background:linear-gradient(90deg,rgba(20,30,50,.04) 25%,rgba(20,30,50,.08) 50%,rgba(20,30,50,.04) 75%);background-size:200% 100%}
.spinner-ring{border-color:var(--surface-border);border-top-color:var(--vi)}

@media (prefers-reduced-motion:reduce){body::before{animation:none}}

/* ============================================================================
   ✦ PÁGINAS COM ESTILO PRÓPRIO — centralizadas aqui (home, relatórios, mercado).
   Antes eram <style> inline nas templates; movidas pro app.css (um estilo só).
   ============================================================================ */
/* fix flexbox global: .main-content é flex:1 → sem min-width:0, conteúdo largo (grid) estoura */
.main-content,.page-body{min-width:0}

/* — Bloco .lux (home + relatórios) — claro/Marfim — */
.lux{--gold:#7A70BA;--gold2:#48A3D7;--goldd:#D77748;--laurel:#0DA759;--blood:#E44141;--panel:#ffffff;--holo:#7A70BA;font-feature-settings:"tnum"}
.lux *{box-sizing:border-box}
.lux-mono{font-family:var(--font-mono)}
.lux-hero{position:relative;border-radius:14px;overflow:hidden;padding:24px 28px;margin-bottom:20px;background:var(--surface);border:1px solid var(--surface-border);box-shadow:var(--shadow-sm)}
.lux-hero::before{display:none}
.lux-hero::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent)}
.lux-hero__row{position:relative;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.lux-crest{width:60px;height:60px;flex:0 0 auto;border-radius:13px;display:grid;place-items:center;font-size:27px;color:#fff;background:var(--accent);box-shadow:none}
.lux-eyebrow{font:600 11px/1 var(--font);letter-spacing:.16em;color:var(--text-muted);text-transform:uppercase;margin-bottom:7px}
.lux-title{font:750 25px/1.1 var(--font);color:var(--text);margin:0;letter-spacing:-.01em}
.lux-title b{color:var(--accent)}
.lux-sub{margin:7px 0 0;color:var(--text-muted);font-size:13px}
.lux-live{display:inline-flex;align-items:center;gap:6px;margin-left:10px;font:600 10px/1 var(--font);letter-spacing:.1em;color:var(--laurel);vertical-align:middle}
.lux-live i{font-size:8px;animation:luxpulse 1.7s ease-in-out infinite}
@keyframes luxpulse{0%,100%{opacity:1}50%{opacity:.22}}
.lux-hero__hi{margin-left:auto;text-align:right;padding-left:16px;border-left:1px solid var(--surface-border)}
.lux-hero__hi .v{font:700 32px/1 var(--font-mono);color:var(--text);letter-spacing:-.02em}
.lux-hero__hi .l{font-size:10.5px;color:var(--text-muted);letter-spacing:.06em;margin-top:4px;text-transform:uppercase}
.lux-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:13px}
.lux-tile{position:relative;border-radius:12px;padding:15px 17px;overflow:hidden;background:var(--surface);border:1px solid var(--surface-border);box-shadow:var(--shadow-sm)}
.lux-tile::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.lux-tile__ic{width:33px;height:33px;border-radius:9px;display:grid;place-items:center;font-size:15px;color:#fff;margin-bottom:9px;background:var(--accent);box-shadow:none}
.lux-tile__v{font:700 23px/1 var(--font-mono);color:var(--text);letter-spacing:-.02em}
.lux-tile__l{font-size:11.5px;color:var(--text-muted);margin-top:3px}
.lux-tile .vd-sep{font-size:9px;color:var(--text-faint);font-weight:700;margin:0 1px}
.lux-secline{display:flex;flex-wrap:wrap;gap:20px;align-items:center;padding:14px 4px 2px;color:var(--text-muted);font-size:13px}
.lux-secline>span i{color:var(--accent);margin-right:5px}.lux-secline>span b{color:var(--text)}
.lux-secline .win{color:var(--laurel);font-weight:600}
.lux-verrel{margin-left:auto;color:var(--accent);font-weight:600;text-decoration:none;white-space:nowrap}.lux-verrel:hover{color:var(--accent-hover)}
.lux-h2{font:700 13px/1 var(--font);letter-spacing:.09em;color:var(--text);margin:26px 0 14px;display:flex;align-items:center;gap:9px;text-transform:uppercase}
.lux-h2 i{color:var(--accent)}
.lux-h2::after{content:"";flex:1;height:1px;background:var(--surface-border)}

/* — Card do gladiador (home): claro/Marfim — */
.lux .acct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.lux .hud-card{background:var(--surface);border:1px solid var(--surface-border);border-radius:12px;overflow:hidden;color:var(--text);font-size:13px;box-shadow:var(--shadow-sm)}
.lux .hud-card.hud-stale{opacity:.62}
.lux .hud-top{display:flex;align-items:center;gap:8px;padding:10px 13px;background:var(--surface-alt);border-bottom:1px solid var(--surface-border)}
.lux .hud-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.lux .hud-dot--run{background:var(--success)}
.lux .hud-dot--idle{background:var(--warning)}
.lux .hud-dot--pause{background:var(--accent)}.lux .hud-dot--off{background:var(--danger)}
.lux .hud-name{font-weight:640;color:var(--text);letter-spacing:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lux .hud-since{font-size:10.5px;color:var(--text-muted);white-space:nowrap}
.lux .hud-plano{padding:5px 13px;font-size:10.5px;color:var(--text-muted);background:var(--surface-alt);border-bottom:1px solid var(--surface-border)}
.lux .hud-plano b{color:var(--text);font-weight:700}
/* painel de controle do card (parar/iniciar por conta) — igual o interruptor do HUD da extensão */
.lux .hud-ctrl{display:flex;gap:7px;padding:8px 12px;background:var(--surface-alt);border-bottom:1px solid var(--surface-border)}
.lux .hud-ctrl__cell{flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 11px;border-radius:9px;background:var(--surface);border:1px solid var(--surface-border);cursor:pointer;color:var(--text)}
.lux .hud-ctrl__cell:hover{border-color:var(--accent)}
.lux .hud-ctrl__lbl{font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:640;color:var(--text-muted)}
.lux .hud-sw{position:relative;width:36px;height:19px;border-radius:10px;background:#dfe3ea;flex:0 0 auto;transition:background .15s}
.lux .hud-sw--on{background:var(--success)}
.lux .hud-sw__thumb{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(20,30,50,.3);transition:left .15s}
.lux .hud-sw--on .hud-sw__thumb{left:19px}
.lux .hud-hero{padding:11px 13px 12px;border-left:3px solid var(--accent);background:var(--surface-alt)}
.lux .hud-card--idle .hud-hero{border-left-color:var(--warning)}
.lux .hud-card--off .hud-hero,.lux .hud-card--pause .hud-hero{border-left-color:#c3c9d3}
.lux .hud-hero__st{display:flex;align-items:center;gap:6px;font:700 9px/1 var(--font);letter-spacing:.1em;color:var(--accent);margin-bottom:6px}
.lux .hud-card--off .hud-hero__st,.lux .hud-card--pause .hud-hero__st{color:var(--text-muted)}
.lux .hud-hero__live{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:luxpulse 1.5s ease-in-out infinite}
.lux .hud-hero__vida{margin-left:auto;color:var(--danger);font-weight:600}
.lux .hud-hero__acao{font:700 14px/1.25 var(--font);color:var(--text);margin-bottom:8px}
.lux .hud-hero__metric{display:flex;align-items:baseline;justify-content:space-between}
.lux .hud-hero__lbl{font-size:9px;letter-spacing:.06em;color:var(--text-muted);text-transform:uppercase}
.lux .hud-cd{font:600 22px/1 var(--font-mono);color:var(--accent);letter-spacing:-.01em}
.lux .hud-bar{height:5px;border-radius:3px;background:#e5e8ee;margin-top:6px;overflow:hidden}
.lux .hud-bar__fill{display:block;height:100%;width:100%;border-radius:3px;background:var(--energy);box-shadow:none;transition:width 1s linear}
.lux .hud-sect{font:700 8.5px/1 var(--font);letter-spacing:.11em;color:var(--text-muted);text-transform:uppercase;padding:10px 13px 4px}
.lux .hud-acts{padding:0 13px}
.lux .hud-act{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px solid var(--surface-border)}
.lux .hud-act__n{display:flex;align-items:center;gap:7px;color:var(--text-muted);min-width:0}
.lux .hud-act__i{width:15px;text-align:center;font-size:12px;flex:0 0 auto}
.lux .hud-act__v{color:var(--text);font-weight:600;white-space:nowrap}
.lux .hud-act__v--now{color:var(--success)}.lux .hud-act__v--off{color:var(--text-faint)}
.lux .hud-act--off .hud-act__n{color:var(--text-faint)}
.lux .hud-modos{padding:6px 13px 2px;margin-top:5px;border-top:1px solid var(--surface-border)}
.lux .hud-modo{display:flex;justify-content:space-between;align-items:center;padding:3px 0}
.lux .hud-pill{font-size:9.5px;font-weight:700;padding:1px 8px;border-radius:8px}
.lux .hud-pill--on{background:rgba(13,167,89,.14);color:var(--success)}.lux .hud-pill--off{background:var(--surface-alt);color:var(--text-muted)}
.lux .hud-modo__v{color:var(--text)}
.lux .hud-today{display:flex;flex-wrap:wrap;gap:12px;padding:10px 13px;margin-top:7px;background:var(--surface-alt);border-top:1px solid var(--surface-border);font-size:11px;color:var(--text-muted)}
.lux .hud-today b{color:var(--text);font-family:var(--font-mono)}
/* ══ Card do gladiador = ESPELHO do HUD da extensão (obsidiana SEMPRE, nos dois temas) ══ */
@property --turn{syntax:'<number>';inherits:true;initial-value:1}
.lux .hud-card{background:linear-gradient(162deg,#191233,#221a45)!important;border:1px solid rgba(203,185,138,.16)!important;color:#e9e2f5!important;box-shadow:0 10px 30px -14px rgba(0,0,0,.5)!important}
.lux .hud-card .hud-name{color:#f2ecff!important}
.lux .hud-card .hud-since{color:#9a8fc4!important}
.lux .hud-card .hud-plano{color:#b8a888!important}
.lux .hud-card .hud-plano b{color:#e7cd7a!important}
.lux .hud-card .hud-ctrl__lbl{color:#cabfe8}
/* hero: medalhão + coluna */
.lux .hud-hero{display:flex!important;align-items:center;gap:12px;padding:13px 12px 14px!important;border-left:0!important;border-bottom:1px solid rgba(203,185,138,.14)!important}
.lux .hud-hero__col{flex:1 1 auto;min-width:0}
.lux .hud-medal{width:56px;height:56px;position:relative;flex:0 0 auto}
.lux .hud-medal__ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from -90deg,var(--rc,#7fe08a) calc(var(--turn,1)*1turn),rgba(255,255,255,.07) 0);-webkit-mask:radial-gradient(farthest-side,transparent 70%,#000 72%);mask:radial-gradient(farthest-side,transparent 70%,#000 72%);filter:drop-shadow(0 0 5px var(--rc,#7fe08a));transition:--turn .8s linear}
.lux .hud-medal__core{position:absolute;inset:7px;border-radius:50%;background:radial-gradient(120% 120% at 30% 25%,#2c2450,#171030);border:1px solid rgba(203,185,138,.18);display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:inset 0 3px 10px rgba(0,0,0,.5)}
.lux .hud-hero__st{display:flex;align-items:center;gap:6px;font:800 9px/1 var(--font)!important;letter-spacing:.14em!important;margin-bottom:4px!important;color:#4fd07a}
.lux .hud-hero__live{width:7px;height:7px;border-radius:50%;flex:0 0 auto;animation:luxpulse 1.5s ease-in-out infinite}
.lux .hud-hero__vida{margin-left:auto;color:#f19bb0!important;font-weight:700}
.lux .hud-hero__acao{font:800 15px/1.22 var(--font)!important;color:#f7ecd6!important;letter-spacing:.2px;margin-bottom:0!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lux .hud-hero__metric{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.lux .hud-hero__mlbl{font-size:9px;letter-spacing:.06em;color:#9a8fc4;text-transform:uppercase}
.lux .hud-card .hud-cd{margin-left:auto;font:700 15px/1 var(--font-mono)!important;color:#d8ccf5!important;letter-spacing:-.01em}
/* seções + atividades + hoje + rodapé (obsidiana/dourado/verde) */
.lux .hud-card .hud-sect{font:800 8.5px/1 var(--font)!important;letter-spacing:.2em!important;color:#cbb98a!important;opacity:.85;text-transform:uppercase}
.lux .hud-card .hud-act{border-bottom:1px solid rgba(203,185,138,.10)!important}
.lux .hud-card .hud-act__n{color:#d8ccf5!important}
.lux .hud-card .hud-act__v{color:#cabfe8!important;font-family:var(--font-mono)}
.lux .hud-card .hud-act__v--now{color:#7fe08a!important}
.lux .hud-card .hud-act--off .hud-act__n,.lux .hud-card .hud-act--off .hud-act__v{color:#6a6288!important}
.lux .hud-today{background:rgba(0,0,0,.18)!important;border-top:1px solid rgba(203,185,138,.12)!important;color:#9a8fc4!important}
.lux .hud-today b{color:#f2e2bd!important;font-family:var(--font-mono)}
.lux .hud-foot{display:flex;align-items:center;gap:7px;padding:9px 13px;border-top:1px solid rgba(203,185,138,.14);font-size:10px;color:#9a8fc4}
.lux .hud-foot__dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 6px currentColor}
.lux .hud-foot__lbl{letter-spacing:.05em;text-transform:uppercase;font-weight:700;color:#cbb98a}
.lux .hud-foot__aux{margin-left:auto;opacity:.55}
/* atividades agrupadas (task-manager): fileira de CHIPS com rótulo-pill (prontas/monitor/off) */
.lux .hud-chips{display:flex;align-items:center;gap:8px;padding:6px 13px}
.lux .hud-chips__tag{font-size:8px;letter-spacing:.06em;font-weight:800;text-transform:uppercase;padding:3px 8px;border-radius:6px;flex:0 0 auto}
.lux .hud-chips__tag--ok{color:#0f2a17;background:linear-gradient(180deg,#7fe08a,#4fb56a)}
.lux .hud-chips__tag--mon{color:#efe9ff;background:rgba(138,127,240,.22);border:1px solid rgba(138,127,240,.35)}
.lux .hud-chips__tag--off{color:#b0a288;background:rgba(60,52,90,.4)}
.lux .hud-chips__ics{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
.lux .hud-chip{width:25px;height:25px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;line-height:1;background:rgba(255,255,255,.05);border:1px solid rgba(203,185,138,.16);cursor:default}
.lux .hud-chip--ok{border-color:rgba(127,224,138,.45);background:rgba(79,208,122,.14)}
.lux .hud-chip--mon{border-color:rgba(138,127,240,.32);background:rgba(138,127,240,.10)}
.lux .hud-chip--off{opacity:.42;filter:grayscale(1)}
/* tooltip dos chips: div anexada ao BODY via JS (escapa o overflow:hidden do card, sobrevive re-render) */
.hud-tip{position:fixed;transform:translate(-50%,-100%);background:#0f0b1e;color:#efe9ff;border:1px solid rgba(203,185,138,.28);padding:4px 9px;border-radius:6px;font-size:11px;font-weight:600;white-space:nowrap;z-index:9999;pointer-events:none;box-shadow:0 8px 20px rgba(0,0,0,.55);display:none}
.hud-tip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#0f0b1e}
.lux .empty-home{grid-column:1/-1;text-align:center;padding:30px;color:var(--text-muted);background:var(--surface);border:1px dashed var(--surface-border);border-radius:12px}
.lux .empty-home i{font-size:30px;color:var(--accent);margin-bottom:10px;display:block}

/* — Relatórios: seletor de período, gráficos, diário de batalha — */
.lux-seg{display:inline-flex;background:var(--surface);border:1px solid var(--surface-border);border-radius:10px;padding:4px;gap:3px;margin:2px 0 18px}
.lux-seg button{border:0;cursor:pointer;background:transparent;color:var(--text-muted);font:640 12px/1 var(--font);letter-spacing:.02em;padding:8px 15px;border-radius:7px;transition:all .15s}
.lux-seg button:hover{color:var(--text)}
.lux-seg button.on{background:var(--accent);color:#fff;box-shadow:none}
.lux-charts{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.lux-chart{background:var(--surface);border:1px solid var(--surface-border);border-radius:12px;padding:15px 16px 12px;box-shadow:var(--shadow-sm)}
.lux-chart--wide{grid-column:1/-1}
.lux-chart__t{font:700 9px/1 var(--font);letter-spacing:.11em;color:var(--text-muted);text-transform:uppercase;margin-bottom:11px;display:flex;align-items:center;gap:7px}
.lux-chart__t i{color:var(--accent);font-size:12px}
.lux-chart__box{position:relative;height:210px}
.lux-chart--wide .lux-chart__box{height:250px}
.lux-diary{background:var(--surface);border:1px solid var(--surface-border);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm)}
.lux-ev{display:flex;align-items:center;gap:12px;padding:10px 15px;border-bottom:1px solid var(--surface-border)}
.lux-ev:last-child{border-bottom:0}
.lux-ev__i{width:30px;height:30px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center;font-size:15px;background:var(--surface-alt);border:1px solid var(--surface-border)}
.lux-ev__b{flex:1;min-width:0}
.lux-ev__t{color:var(--text);font-weight:600;font-size:13px}
.lux-ev__d{color:var(--text-muted);font-size:11.5px;margin-top:1px}
.lux-ev__w{color:var(--text-faint);font-size:10.5px;white-space:nowrap}
.lux-ev--ok .lux-ev__i{border-color:rgba(13,167,89,.45);color:var(--success)}
.lux-ev--bad .lux-ev__i{border-color:rgba(228,65,65,.45);color:var(--danger)}
.lux-ev--gold .lux-ev__i{border-color:rgba(215,119,72,.45);color:var(--warning)}
.lux-ev--lvl .lux-ev__i{border-color:rgba(122,112,186,.45);color:var(--accent);box-shadow:none}
.lux-empty{text-align:center;padding:34px;color:var(--text-muted);background:var(--surface);border:1px dashed var(--surface-border);border-radius:12px}
.lux-empty i{font-size:30px;color:var(--accent);margin-bottom:10px;display:block}
@media(max-width:720px){.lux-charts{grid-template-columns:1fr}.lux-chart--wide{grid-column:auto}}

/* — Mercado interno — */
.mi-cards{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 4px}
.mi-card{background:var(--surface);border:1px solid var(--surface-border);border-radius:12px;padding:10px 16px}
.mi-card b{display:block;font-size:22px;font-weight:700;color:var(--text)}
.mi-card span{font-size:12px;color:var(--text-muted)}
.mi-topo{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin:6px 0 2px}
.mi-topo .field{min-width:170px}
#tabela-mercado{width:100%}

/* ============================================================================
   ✦✦✦ MODO ESCURO (Mofi dark) + seletor de tema no topbar + micro-efeitos premium
   O tema é dirigido por variável; o dark só REDEFINE os tokens no <html data-tema>.
   Valores REAIS do Mofi: body #374462 · card #2A3650 · texto rgba(255,255,255,.7).
   ============================================================================ */
:root[data-tema="escuro"]{
  /* ROXO-ESCURO coeso com o HUD (fundo #14101f → cards #221b33 → alt #2a2340), primário #7A70BA.
     Antes era o cinza-azulado do Mofi (#374462/#2A3650); trocado pro tom do HUD (Wilton 2026-07-12). */
  --bg:#14101f;
  --surface:#241d3a; --surface-alt:#2e2648; --surface-border:rgba(138,126,230,.24);
  --text:rgba(244,239,255,.97); --text-muted:#c2b8ec; --text-faint:#8b80b2;
  --shell:#1a1530; --shell-border:rgba(138,126,230,.16); --shell-text:rgba(244,239,255,.95); --shell-text-muted:#c2b8ec;
  --accent-hover:#8b82c9; --accent-muted:rgba(122,112,186,.22);
  --panel:#221b33; --parchment-tex:#221b33; --wood-tex:#1a1530;
  --shadow:0 9px 22px rgba(0,0,0,.40); --shadow-sm:0 2px 12px rgba(0,0,0,.30);
  --shadow-lg:0 18px 42px rgba(0,0,0,.50);
  color-scheme:dark;
}
/* — Ajustes de componentes com valores CLAROS cravados (não pegam a var) — */
:root[data-tema="escuro"] .gswitch__track{background:rgba(255,255,255,.16)!important}
:root[data-tema="escuro"] .lux .hud-sw{background:rgba(255,255,255,.16)}
:root[data-tema="escuro"] .lux .hud-sw--on{background:var(--success)}   /* LIGADO = verde tbm no dark (meu override do track apagava o verde) */
:root[data-tema="escuro"] .lic-dot.on{background:var(--success);box-shadow:0 0 6px rgba(13,167,89,.6)}   /* status ligado vivo no dark (era #3E6B2C, apagava) */
:root[data-tema="escuro"] .lux .hud-bar{background:rgba(255,255,255,.10)}
:root[data-tema="escuro"] .account-plaque__select select option{background:var(--surface);color:var(--text)}
:root[data-tema="escuro"] .skel{background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.10) 50%,rgba(255,255,255,.05) 75%);background-size:200% 100%}
:root[data-tema="escuro"] .alert-success{background:rgba(13,167,89,.15)!important;color:#7ceab0!important;border-color:rgba(13,167,89,.35)!important}
:root[data-tema="escuro"] .alert-danger{background:rgba(228,65,65,.15)!important;color:#ffabab!important;border-color:rgba(228,65,65,.35)!important}
:root[data-tema="escuro"] .alert-warning{background:rgba(215,119,72,.16)!important;color:#f3b78d!important;border-color:rgba(215,119,72,.35)!important}
:root[data-tema="escuro"] .alert-info{background:rgba(72,163,215,.15)!important;color:#93ddff!important;border-color:rgba(72,163,215,.35)!important}
:root[data-tema="escuro"] .login-box{box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 0 1px var(--surface-border)!important}
:root[data-tema="escuro"] .lic-pag{background:rgba(122,112,186,.14);border-color:rgba(122,112,186,.4);color:#cfc7f0}

/* — Transição suave ao trocar de tema (premium, sem jank: só cores/sombra) — */
body,.card,.sidebar,.topbar,.account-plaque,.stat-card,.lux-hero,.lux-tile,.hud-card,.mi-card,
.form-control,.form-select,.field .form-control,.field .form-select,.btn-icon,.nav-item,.gswitch__track{
  transition:background-color .3s ease,border-color .3s ease,color .18s ease,box-shadow .3s ease;
}

/* ── Seletor de tema no topbar (abre no HOVER, igual submenu) ─────────────── */
/* ── Dropdowns do topbar (tema + perfil) — efeito HOVER REAL do Mofi ──────────
   Fiel ao %for-animated-hover do Mofi: base translateY(30px)/opacity0/hidden +
   sombra do header; no :hover → translateY(0)/opacity1/visible, all linear .3s,
   com seta triangular apontando pro ícone. Mesma mecânica no tema E no perfil. */
.tb-drop{position:relative;display:flex;align-items:center}
.tb-drop__btn .fa-sun{color:#e8a13a}
.tb-drop__btn .fa-moon{color:#8b82c9}
.tb-drop__pop{position:absolute;top:100%;right:0;margin-top:14px;min-width:210px;
  background:var(--surface);border-radius:12px;padding:7px;
  box-shadow:0 8px 26px rgba(89,102,122,.18);
  transform:translateY(30px);opacity:0;visibility:hidden;transition:all linear .3s;z-index:95}
.tb-drop:hover .tb-drop__pop,.tb-drop:focus-within .tb-drop__pop,.tb-drop.show .tb-drop__pop{
  transform:translateY(0);opacity:1;visibility:visible}
/* ponte invisível cobre o gap ícone→popup (o hover não fecha ao atravessar) */
.tb-drop__pop::after{content:'';position:absolute;top:-14px;left:0;right:0;height:14px}
/* seta triangular apontando pra cima (igual Mofi ::before) */
.tb-drop__pop::before{content:'';position:absolute;top:-6px;right:16px;width:0;height:0;
  border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid var(--surface);z-index:2}
.tb-drop__head{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);
  font-weight:700;padding:6px 10px 5px;font-family:var(--font-title)}

/* — opções do seletor de tema — */
.tb-theme__opt{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border:0;background:none;
  border-radius:9px;color:var(--text);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;text-align:left}
.tb-theme__opt>i:first-child{width:17px;text-align:center;color:var(--text-muted);font-size:14px;transition:color .15s}
.tb-theme__opt>span{flex:1}
.tb-theme__opt .tb-theme__chk{opacity:0;color:var(--accent);font-size:12px}
.tb-theme__opt:hover{background:var(--accent-muted)}
.tb-theme__opt:hover>i:first-child{color:var(--accent)}
.tb-theme__opt.is-sel{color:var(--accent)}
.tb-theme__opt.is-sel>i:first-child,.tb-theme__opt.is-sel .tb-theme__chk{color:var(--accent);opacity:1}

/* — dropdown do perfil — */
.tb-profile__pop{min-width:226px}
.tb-prof__top{display:flex;align-items:center;gap:11px;padding:8px 10px 11px;margin-bottom:5px;
  border-bottom:1px solid var(--surface-border)}
.tb-prof__av{width:38px;height:38px;font-size:15px;flex:0 0 auto}
.tb-prof__id{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.tb-prof__id strong{font-size:13.5px;color:var(--text);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:155px}
.tb-prof__id small{font-size:11px;color:var(--text-muted)}
.tb-prof__item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;color:var(--text);
  text-decoration:none;font-size:13.5px;font-weight:600;transition:background .15s,color .15s}
.tb-prof__item>i{width:17px;text-align:center;color:var(--text-muted);font-size:14px;transition:color .15s}
.tb-prof__item:hover{background:var(--accent-muted);color:var(--accent)}
.tb-prof__item:hover>i{color:var(--accent)}
.tb-prof__item--danger:hover{background:rgba(228,65,65,.12);color:var(--danger)}
.tb-prof__item--danger:hover>i{color:var(--danger)}

/* ── Micro-efeitos premium: ícone gira 360° no hover (assinatura Mofi) ─────── */
.topbar .btn-icon{transition:background-color .18s ease,color .18s ease}
.topbar .btn-icon:hover{background:var(--accent-muted);color:var(--accent)}
.topbar .btn-icon>i{transition:transform .6s ease-in-out}
.topbar .btn-icon:hover>i{transform:rotate(360deg)}
.topbar .avatar{transition:transform .18s ease,box-shadow .18s ease}
.tb-drop:hover .avatar,.topbar .avatar:hover,.tb-drop:focus-within .avatar{transform:translateY(-1px);box-shadow:0 4px 14px rgba(122,112,186,.45)}
/* foco de teclado */
.tb-theme__opt:focus-visible,.tb-prof__item:focus-visible,.btn-icon:focus-visible,.tb-drop__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  body,.card,.sidebar,.topbar,.btn-icon,.btn-icon>i,.avatar,.tb-drop__pop{transition:none!important}
}

/* ============================================================================
   ✦ SELECT FLUIDO (Tom Select) — efeito estilo Mofi, estilizado com nossas vars
   (claro/escuro seguem automático). Ativado em .field .form-select via app.js.
   ============================================================================ */
.field .ts-wrapper{width:100%}
.ts-control{
  background:var(--surface)!important;border:1px solid var(--surface-border)!important;
  border-radius:var(--radius)!important;color:var(--text)!important;
  min-height:44px!important;padding:6px 40px 6px 14px!important;
  font-family:var(--font)!important;font-size:14px!important;
  box-shadow:var(--shadow-sm)!important;cursor:pointer;
  transition:border-color .15s ease,box-shadow .15s ease}
.ts-wrapper.single .ts-control,.ts-control .item{color:var(--text)!important}
.ts-control>input{color:var(--text)!important;font-size:14px!important}
.ts-control>input::placeholder{color:var(--text-faint)!important}
.ts-wrapper.single:hover .ts-control{border-color:var(--accent)!important}
.ts-wrapper.focus .ts-control{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-muted)!important}
.ts-wrapper.disabled .ts-control{opacity:.6}
/* caret (chevron) — DEFINIDO por inteiro (o build do Tom Select não desenha); fica dentro do
   .ts-control, então clicar nele abre o dropdown */
.ts-wrapper.single .ts-control{position:relative}
.ts-wrapper.single .ts-control:after{content:'';position:absolute;top:50%;right:16px;margin-top:-3px;
  width:0;height:0;border-style:solid;border-width:6px 5px 0 5px;
  border-color:var(--text-muted) transparent transparent transparent!important;pointer-events:none;transition:transform .15s}
.ts-wrapper.single.dropdown-active .ts-control:after{border-width:0 5px 6px 5px;
  border-color:transparent transparent var(--accent) transparent!important;margin-top:-3px}

/* dropdown — card arredondado + sombra + animação de entrada (igual ao onhover do Mofi) */
.ts-dropdown{
  background:var(--surface)!important;border:1px solid var(--surface-border)!important;
  border-radius:12px!important;box-shadow:0 8px 26px rgba(89,102,122,.18)!important;
  margin-top:7px!important;padding:6px!important;overflow:hidden;z-index:120;
  animation:tsIn .16s ease}
@keyframes tsIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}
.ts-dropdown .ts-dropdown-content{max-height:260px}
.ts-dropdown .option{
  border-radius:8px!important;padding:9px 12px!important;color:var(--text)!important;
  font-size:13.5px!important;font-family:var(--font)!important;line-height:1.3;transition:background .12s,color .12s}
.ts-dropdown .option:hover,.ts-dropdown .option.active{background:var(--accent-muted)!important;color:var(--accent)!important}
.ts-dropdown .option.selected{color:var(--accent)!important;font-weight:600}   /* .selected = valor ESCOLHIDO (aria-selected é só o cursor) */
.ts-dropdown .option.selected:after{content:'\2713';float:right;color:var(--accent);font-weight:700;margin-left:8px}
.ts-dropdown .optgroup-header{color:var(--text-muted)!important;background:transparent!important;
  font-size:11px;text-transform:uppercase;letter-spacing:.05em;padding:6px 12px;font-family:var(--font-title)}
.ts-empty,.ts-dropdown .no-results{padding:10px 12px;color:var(--text-muted);font-size:13px}
/* esconde o <select> ORIGINAL de verdade (meu .field .form-select !important o forçava visível →
   aparecia uma "setinha solta" de ~70px que não abria nada) + limpa o .form-select herdado no wrapper */
.field select.form-select.ts-hidden-accessible,.field select.form-select.tomselected{
  position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;
  padding:0!important;margin:-1px!important;border:0!important;overflow:hidden!important;
  clip:rect(0 0 0 0)!important;white-space:nowrap!important;background:none!important;
  box-shadow:none!important;opacity:0!important;pointer-events:none!important}
.field .ts-wrapper.form-select{background:none!important;background-image:none!important;border:none!important;
  box-shadow:none!important;padding:0!important;min-height:0!important;height:auto!important}
/* caixa de busca dentro do dropdown (plugin dropdown_input — efeito Select2) */
.ts-dropdown .dropdown-input-wrap{position:relative;padding:4px 4px 8px;margin-bottom:2px;border-bottom:1px solid var(--surface-border)}
.ts-dropdown .dropdown-input-wrap::before{content:'\f002';font-family:'Font Awesome 6 Free';font-weight:900;
  position:absolute;left:16px;top:calc(50% - 2px);transform:translateY(-50%);color:var(--text-faint);font-size:12px;pointer-events:none}
.ts-dropdown .dropdown-input{width:100%;background:var(--surface-alt)!important;border:1px solid var(--surface-border)!important;
  border-radius:8px!important;padding:9px 12px 9px 34px!important;color:var(--text)!important;
  font-size:13.5px!important;font-family:var(--font)!important;box-shadow:none!important}
.ts-dropdown .dropdown-input:focus{border-color:var(--accent)!important;outline:none!important;box-shadow:0 0 0 3px var(--accent-muted)!important}
.ts-dropdown .dropdown-input::placeholder{color:var(--text-faint)!important}

/* ============================================================================
   ✦ CAMPOS DE VALOR "gaming" — steppers +/-, slider nos %, time picker.
   Vanilla (ativado por camposDeValor() no app.js), tudo com variáveis (dark auto).
   ============================================================================ */
/* esconde as setinhas nativas do type=number */
.field__num input[type=number]{-moz-appearance:textfield}
.field__num input[type=number]::-webkit-outer-spin-button,
.field__num input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* grupo com steppers: [−][ input ][ unidade ][+] conectados */
.field__num--stepper{align-items:stretch}
.field__num--stepper .step-btn{flex:0 0 auto;min-width:42px;border:1px solid var(--surface-border);
  background:var(--surface-alt);color:var(--text-muted);cursor:pointer;display:grid;place-items:center;
  font-size:12px;user-select:none;transition:background .13s,color .13s,border-color .13s}
.field__num--stepper .step-btn:hover{background:var(--accent-muted);color:var(--accent);border-color:var(--accent);position:relative;z-index:1}
.field__num--stepper .step-btn:active{background:var(--accent);color:#fff}
.field__num--stepper .step-btn--minus{border-radius:8px 0 0 8px}
.field__num--stepper .step-btn--plus{border-radius:0 8px 8px 0;margin-left:-1px}
.field__num--stepper .form-control{text-align:center;border-radius:0!important;margin-left:-1px}
.field__num--stepper .field__unit{border-radius:0!important;margin-left:-1px}
/* slider dos campos de % (acima da linha do stepper) */
.pct-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:5px;
  margin:0 0 13px;cursor:pointer;outline:none;
  background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--fill,50%),var(--surface-alt) var(--fill,50%),var(--surface-alt) 100%)}
.pct-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:#fff;border:2px solid var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.28);cursor:grab;transition:transform .1s}
.pct-slider::-webkit-slider-thumb:active{transform:scale(1.18);cursor:grabbing}
.pct-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--accent);cursor:grab}
.pct-slider:focus-visible{box-shadow:0 0 0 3px var(--accent-muted)}
/* time picker nativo (ícone de relógio legível no dark → branco puro) */
.field-time::-webkit-calendar-picker-indicator{filter:invert(.45);cursor:pointer;opacity:.9}
:root[data-tema="escuro"] .field-time::-webkit-calendar-picker-indicator{filter:brightness(0) invert(1);opacity:.95}

/* ── Ripple (onda tátil ao clicar) — cor = currentColor, adapta ao botão ─────── */
.ripple-ink{position:absolute;border-radius:50%;transform:scale(0);background:currentColor;opacity:.3;
  pointer-events:none;animation:rippleGo .6s ease-out}
@keyframes rippleGo{to{transform:scale(2.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.ripple-ink{display:none!important}}

/* ── Licenciamento (admin Licenças): box de assentos/pedidos + controles ─────── */
.lic-lic{margin-top:14px;padding:12px 14px;border:1px solid var(--surface-border);border-radius:12px;background:var(--surface-alt)}
.lic-lic__head{font-size:14px;margin-bottom:10px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.lic-ctrls{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;align-items:flex-end}
.lic-ctrls form.lic-inline{display:flex;gap:9px;align-items:flex-end;flex-wrap:wrap;background:var(--surface);
  padding:9px 11px;border-radius:10px;border:1px solid var(--surface-border)}
.lic-ctrls .field{margin:0}
.lic-ctrls .field .form-control{width:96px}

/* ── Hub Contas: linha de plano (cobertura + toggle no plano + cooldown) ─────── */
/* (conta-card__badges/__cd/__gerenciando definidos no bloco premium dos cards de conta) */

/* ── Hub Contas: comprar assentos (sandbox) + pedidos pendentes ─────────────── */
.lic-comprar{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin:6px 0 4px}
.lic-comprar .field{margin:0}
.lic-comprar .form-control{width:110px}
.lic-preco{display:flex;align-items:baseline;gap:8px}
.lic-preco__v{font-size:22px;font-weight:800;color:var(--text);font-family:var(--font-mono)}
.lic-preco__d{font-size:13px;color:var(--success);font-weight:700}
.lic-peds{margin-top:16px;border-top:1px solid var(--surface-border);padding-top:12px}
.lic-peds__t{font-size:13px;font-weight:700;color:var(--text-muted);margin-bottom:8px}
.lic-ped{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between;
  padding:9px 12px;border:1px solid var(--surface-border);border-radius:10px;margin-bottom:8px;background:var(--surface-alt)}

/* ── Página Planos & Licenças ────────────────────────────────────────────────── */
.page-header__hi{margin-left:auto;text-align:right;flex:0 0 auto}
.page-header__hi .v{white-space:nowrap}
.page-header__hi .v{font-size:34px;font-weight:800;color:var(--accent);line-height:1;font-family:var(--font-mono)}
.page-header__hi .l{font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}
.pl-como{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 16px}
.pl-step{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:none;border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow)}
.pl-step__n{flex:0 0 auto;width:30px;height:30px;border-radius:9px;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:800}
.pl-step b{display:block;font-size:14.5px;color:var(--text)}
.pl-step small{color:var(--text-muted);font-size:12.5px;line-height:1.35;display:block;margin-top:3px}
/* Mural — status atual do cliente (o "cartão de licença") */
.pl-mural{position:relative;background:linear-gradient(135deg,var(--surface),var(--accent-muted));border:1px solid var(--surface-border);border-radius:var(--radius-lg);padding:18px 20px;margin:0 0 16px;box-shadow:var(--shadow);overflow:hidden}
.pl-mural::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--accent),var(--accent-hover))}
.pl-mural__brand{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.pl-mural__chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.pl-mural__grid{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center}
.pl-mural__hero{display:flex;align-items:center;gap:12px}
.pl-mural__big{font-size:56px;font-weight:800;line-height:.9;color:var(--text);font-family:var(--font-mono)}
.pl-mural__cap{font-size:12.5px;color:var(--text-muted);line-height:1.25}
.pl-mural__meter{min-width:0}
.pl-mural__bar{height:10px;border-radius:6px;background:var(--surface-alt);overflow:hidden;border:1px solid var(--surface-border)}
.pl-mural__bar span{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--accent),var(--accent-hover));transition:width .5s ease;min-width:2px}
.pl-mural__legend{display:flex;gap:16px;margin:9px 0 12px;font-size:12.5px;color:var(--text-muted)}
.pl-mural__legend b{color:var(--text)}
.pl-dot{display:inline-block;width:9px;height:9px;border-radius:3px;vertical-align:middle;margin-right:3px}
.pl-dot--used{background:var(--accent)}
.pl-dot--free{background:var(--surface-alt);border:1px solid var(--surface-border)}
.pl-mural__stats{display:flex;gap:26px}
.pl-mural__stat small{display:block;font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.04em}
.pl-mural__stat b{font-size:15px;color:var(--text);font-weight:700}
.pl-mural__cta{display:flex;flex-direction:column;gap:8px}
.pl-mural__cta .btn{justify-content:flex-start;white-space:nowrap}

/* barra de contexto da Loja (ir pra Meus pedidos) */
.loja-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--surface-border);border-radius:var(--radius-lg);padding:11px 18px;margin:0 0 16px;box-shadow:var(--shadow-sm)}
.loja-bar__t{font-size:13px;color:var(--text-muted);display:inline-flex;align-items:center;gap:8px}
.loja-bar__t i{color:var(--accent)}
.loja-bar__t b{color:var(--text)}
@media(max-width:560px){.loja-bar__t{flex:1 1 100%}.loja-bar .btn{width:100%;justify-content:center}}
/* Compra — moldura premium (onde entra dinheiro) */
.pl-buy{margin:0 0 16px}
.pl-buy__frame{position:relative;border-radius:calc(var(--radius-lg) + 2px);padding:2px;background:linear-gradient(135deg,var(--accent),var(--accent-hover));box-shadow:0 14px 36px -16px rgba(122,112,186,.55)}
.pl-buy__head,.pl-buy__body{background:var(--surface);position:relative}
.pl-buy__head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.pl-buy__title{display:inline-flex;align-items:center;gap:9px;font-size:16px;font-weight:800;color:var(--text)}
.pl-buy__title i{color:var(--accent)}
.pl-buy__badge{font-size:20px;font-weight:800;color:var(--accent);font-family:var(--font-mono);white-space:nowrap}
.pl-buy__badge small{font-size:12px;color:var(--text-muted);font-weight:600;font-family:var(--font)}
/* corpo: escolhas | resumo */
.pl-buy__body{display:grid;grid-template-columns:1.15fr .85fr;gap:0;border-top:1px solid var(--surface-border);border-radius:0 0 var(--radius-lg) var(--radius-lg);overflow:hidden}
.pl-buy__choices{padding:20px;display:flex;flex-direction:column;gap:20px}
.pl-buy__field label{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--text);margin-bottom:10px}
.pl-buy__step{flex:0 0 auto;width:22px;height:22px;border-radius:7px;background:var(--accent-muted);color:var(--accent);display:grid;place-items:center;font-size:12px;font-weight:800}
.pl-buy__hint{display:block;font-size:11.5px;color:var(--text-faint);margin-top:9px;line-height:1.45}
.pl-buy__hint b{color:var(--text-muted)}
.pl-buy__go{width:100%;margin-top:14px;justify-content:center;font-size:15.5px;font-weight:800;padding:13px}
.pl-buy__nota{font-size:11.5px;color:var(--text-muted);text-align:center;margin:11px 0 0;line-height:1.45}
.pl-buy__nota i{color:var(--success)}
/* stepper +/- */
.pl-stepper{display:inline-flex;align-items:stretch;border:1px solid var(--surface-border);border-radius:12px;overflow:hidden;background:var(--surface)}
.pl-stepper__btn{width:46px;border:none;background:var(--surface-alt);color:var(--text);font-size:22px;font-weight:700;line-height:1;cursor:pointer;transition:background .15s,color .15s}
.pl-stepper__btn:hover{background:var(--accent);color:#fff}
.pl-stepper__in{width:72px;border:none;border-left:1px solid var(--surface-border);border-right:1px solid var(--surface-border);background:transparent;text-align:center;font-size:22px;font-weight:800;color:var(--text);font-family:var(--font-mono);-moz-appearance:textfield}
.pl-stepper__in::-webkit-outer-spin-button,.pl-stepper__in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pl-stepper__in:focus{outline:none}
/* resumo do pedido (coluna destaque) */
.pl-order{background:linear-gradient(180deg,var(--accent-muted),var(--surface-alt));padding:20px;display:flex;flex-direction:column;border-left:1px solid var(--surface-border)}
.pl-order__perc{text-align:center;margin-bottom:14px;line-height:1.05}
.pl-order__perc b{display:block;font-size:34px;font-weight:800;color:var(--accent);font-family:var(--font-mono)}
.pl-order__perc small{display:block;font-size:11.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
.pl-order__lines{border-top:1px dashed var(--surface-border);padding-top:12px}
.pl-order__row{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;color:var(--text-muted);padding:4px 0}
.pl-order__row--desc{color:var(--success);font-weight:600}
.pl-order__row--desc em{font-style:normal;font-weight:800}
.pl-order__total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--surface-border);margin-top:8px;padding-top:12px;font-size:14px;color:var(--text)}
.pl-order__total strong{font-size:26px;font-weight:800;color:var(--text);font-family:var(--font-mono)}
.pl-order__save{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--success) 14%,transparent);color:var(--success);font-size:12.5px;font-weight:600}
.pl-order__save b{font-weight:800}
/* modal de confirmação da Loja (carrinho) — reusa .pay-modal/.pay-box */
.lj-conf{text-align:left;max-width:420px}
.lj-conf__ic{width:52px;height:52px;margin:2px auto 12px;border-radius:15px;background:var(--accent-muted);color:var(--accent);display:grid;place-items:center;font-size:23px}
.lj-conf__ttl{text-align:center;font-size:19px;font-weight:800;color:var(--text);margin:0 0 5px}
.lj-conf__sub{text-align:center;font-size:12.5px;color:var(--text-muted);line-height:1.45;margin:0 0 16px}
.lj-conf__box{background:var(--surface-alt);border-radius:14px;padding:12px 16px;margin-bottom:12px}
.lj-conf__box .pl-order__row b,.lj-conf__box .pl-order__row--desc b{font-weight:800;color:var(--text)}
.lj-conf__box .pl-order__row--desc b{color:var(--success)}
.lj-conf__go{width:100%;justify-content:center;font-size:15px;font-weight:800;padding:12px;margin-top:2px}
.lj-conf__cancel{width:100%;justify-content:center;margin-top:8px}
/* "Seu plano" no Início — card premium (resumo; detalhe vive em Contas/Meus pedidos) */
.planbar{display:grid;grid-template-columns:auto 1fr auto auto;gap:26px;align-items:center;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--surface),var(--accent-muted));border:1px solid var(--surface-border);border-radius:var(--radius-lg);padding:16px 24px 16px 22px;margin:0 0 18px;box-shadow:var(--shadow)}
.planbar::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--accent),var(--accent-hover))}
.planbar__brand{display:flex;align-items:center;gap:14px;min-width:0}
.planbar__id{min-width:0}
.planbar__crest{flex:0 0 auto;width:46px;height:46px;border-radius:14px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:20px;box-shadow:0 6px 16px -6px var(--accent)}
.planbar__eyebrow{white-space:nowrap;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.planbar__big{white-space:nowrap;font-size:26px;font-weight:800;color:var(--text);font-family:var(--font-mono);line-height:1.15;margin-top:1px}
.planbar__big span{font-size:12.5px;font-weight:600;color:var(--text-muted);font-family:var(--font)}
.planbar__trial{margin-top:5px}
.planbar__trial:empty{display:none}
.planbar__meter{min-width:130px}
.planbar__bar{height:9px;border-radius:6px;background:var(--surface-alt);overflow:hidden;border:1px solid var(--surface-border)}
.planbar__bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-hover));border-radius:6px;min-width:2px;transition:width .5s ease}
.planbar__legend{display:flex;gap:16px;margin-top:8px;font-size:11.5px;color:var(--text-muted)}
.planbar__legend b{color:var(--text);font-weight:700}
.planbar__dot{display:inline-block;width:8px;height:8px;border-radius:3px;vertical-align:middle;margin-right:4px}
.planbar__dot--used{background:var(--accent)}
.planbar__dot--free{background:var(--surface-alt);border:1px solid var(--surface-border)}
.planbar__stats{display:flex;gap:28px}
.planbar__stats small{display:block;font-size:10.5px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.planbar__stats b{font-size:15px;color:var(--text);font-weight:700}
.planbar__cta{display:flex;gap:8px}
@media(max-width:900px){
  .planbar{grid-template-columns:1fr 1fr;gap:16px 22px}
  .planbar__brand{grid-column:1/-1}
  .planbar__cta{grid-column:1/-1}
  .planbar__cta .btn{flex:1}
}
@media(max-width:520px){.planbar{grid-template-columns:1fr}.planbar__stats{gap:22px}}
/* ══ Memórias — células do grid Tabulator (bolinha por categoria + texto) ══ */
.mem-g__when{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12px;color:var(--text-muted)}
.mem-g__cell{display:inline-flex;align-items:center;gap:10px;min-width:0}
.mem-g__dot{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--surface);border:2px solid var(--dot,#8a7ff0);color:var(--dot,#8a7ff0);display:grid;place-items:center;font-size:9px;box-shadow:0 0 8px -2px var(--dot,#8a7ff0)}
.mem-g__dot--emoji{font-size:12px}   /* diário usa emoji dentro do nó (maior que o ícone FA) */
.mem-g__txt{font-size:13.5px;color:var(--text)}
/* célula "Evento" do diário: título + detalhe */
.dia-g__txt b{font-weight:600;color:var(--text)}
.dia-g__txt small{color:var(--text-muted);font-size:12px}

/* Tiles de resumo — Meus pedidos */
.pd-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 16px}
.pd-tile{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--surface-border);border-radius:var(--radius-lg);padding:14px 16px;box-shadow:var(--shadow)}
.pd-tile>i{font-size:19px;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--accent-muted);color:var(--accent);flex:0 0 auto}
.pd-tile b{display:block;font-size:22px;font-weight:800;color:var(--text);font-family:var(--font-mono);line-height:1}
.pd-tile span{font-size:12px;color:var(--text-muted)}
.pd-tile--warn>i{color:var(--warning)}
.pd-tile--ok>i{color:var(--success)}
.pd-topo{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}

/* Menu — grupos colapsáveis */
.nav-group{display:flex;flex-direction:column}
.nav-group__head{display:flex;align-items:center;gap:10px;width:100%;padding:9px 20px;background:none;border:0;cursor:pointer;color:var(--shell-text-muted);font:inherit;font-size:14px;font-weight:600;transition:color .15s,background .15s}
.nav-group__head:hover{color:var(--shell-text);background:var(--accent-muted)}
.nav-group__head>i:first-child{width:18px;font-size:14px;text-align:center;flex:0 0 auto}
.nav-group__head span{flex:1;text-align:left}
.nav-group__caret{font-size:11px!important;width:auto!important;transition:transform .2s;opacity:.7}
.nav-group.is-open .nav-group__caret{transform:rotate(180deg)}
.nav-group__body{max-height:0;overflow:hidden;transition:max-height .28s ease}
.nav-group.is-open .nav-group__body{max-height:440px}
.nav-item--sub{padding-left:34px;font-size:13.5px}
.nav-item--sub i{font-size:12px}

/* Vagas de licença — painel de associação (ocupada / livre / em transição) */
.vagas{background:var(--surface-alt);border:1px solid var(--surface-border);border-radius:var(--radius-lg);padding:14px 16px;margin:0 0 16px}
.vagas__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.vagas__title{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:var(--text)}
.vagas__title i{color:var(--accent)}
.vagas__resumo{font-size:13px;color:var(--text-muted)}
.vagas__resumo b{color:var(--text);font-family:var(--font-mono)}
.vagas__head .btn{margin-left:auto}
.vagas__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.vaga{display:flex;align-items:center;gap:10px;min-height:58px;padding:10px 12px;border-radius:12px;border:1px solid var(--surface-border);background:var(--surface);text-align:left}
.vaga--cheia{border-left:3px solid var(--accent)}
.vaga__tag{flex:0 0 auto;font-size:10px}
.vaga__conta{flex:1;min-width:0}
.vaga__conta b{display:block;font-size:13.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vaga__conta small{color:var(--text-muted);font-size:11.5px}
.vaga__rm{flex:0 0 auto;background:none;border:0;cursor:pointer;color:var(--text-faint);font:inherit;font-size:12px;font-weight:600;padding:5px 7px;border-radius:8px;transition:color .15s,background .15s}
.vaga__rm:hover{color:var(--danger);background:var(--accent-muted)}
.vaga__lock{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;background:none;border:0;cursor:pointer;color:var(--warning);font:inherit;font-size:12px;font-weight:700;padding:5px 7px;border-radius:8px;transition:background .15s}
.vaga__lock:hover{background:var(--accent-muted)}
.vaga--locked{border-left-color:var(--warning)}
/* login+servidor dentro dos diálogos SweetAlert (evita tirar a conta errada) */
.vaga__srv-badge{display:inline-block;font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--accent);background:var(--accent-muted);border-radius:6px;padding:1px 7px;vertical-align:middle}
.vaga--livre{cursor:pointer;flex-direction:column;justify-content:center;gap:2px;border-style:dashed;color:var(--accent);transition:border-color .15s,background .15s}
.vaga--livre i{font-size:18px}
.vaga--livre span{font-size:13px;font-weight:700}
.vaga--livre em{font-style:normal;font-size:10.5px;color:var(--text-faint)}
.vaga--livre:hover{border-color:var(--accent);background:var(--accent-muted)}
.vagas__trans{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px dashed var(--surface-border)}
.vagas__trans-lbl{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--warning)}
.vaga-trans{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text-muted);background:var(--surface);border:1px solid var(--surface-border);border-radius:8px;padding:4px 9px}
.vaga-trans b{color:var(--text)}
.vaga-trans i{color:var(--warning);font-size:10px}
.vagas__dica{font-size:12px;color:var(--text-muted);margin:12px 0 0}
.vagas__dica i{color:var(--accent)}
.vagas__vazia{color:var(--text-muted);padding:14px;text-align:center}
.vpick{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:rgba(0,0,0,.45);padding:20px}
.vpick[hidden]{display:none}
.vpick__box{width:min(420px,100%);background:var(--surface);border:1px solid var(--surface-border);border-radius:var(--radius-lg);box-shadow:0 24px 60px -12px rgba(0,0,0,.5);padding:18px}
.vpick__head{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:800;color:var(--text);margin-bottom:14px}
.vpick__head i{color:var(--accent)}
.vpick__list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;max-height:50vh;overflow:auto}
.vpick__op{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;padding:11px 13px;border:1px solid var(--surface-border);border-radius:11px;background:var(--surface-alt);cursor:pointer;transition:border-color .15s,background .15s}
.vpick__op:hover{border-color:var(--accent);background:var(--accent-muted)}
.vpick__op b{font-size:14px;color:var(--text)}
.vpick__op small{font-size:12px;color:var(--text-muted)}
.vpick__vazio{color:var(--text-muted);font-size:13px;text-align:center;padding:10px}
.vpick__close{width:100%;justify-content:center}

/* ══════ Licenças — CARTEIRA DE MEMBRO (obsidiana + ametista, sem ouro) ══════ */
.member{position:relative;overflow:hidden;border-radius:22px;padding:28px 30px;margin:0 0 22px;color:#ECE9F6;
  background:radial-gradient(135% 155% at 6% -12%, #2b2249 0%, #1a1430 46%, #100c1e 100%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 36px 84px -36px rgba(14,9,28,.85), inset 0 1px 0 rgba(255,255,255,.055)}
.member__grain{position:absolute;inset:0;pointer-events:none;background:linear-gradient(122deg,transparent 40%,rgba(255,255,255,.05) 50%,transparent 60%)}
.member__head{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-bottom:24px}
.member__brand{display:flex;align-items:center;gap:15px}
.member__crest{flex:0 0 auto;width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-size:20px;color:#cabfff;
  background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.member__eyebrow{font-size:10px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:#9c93c8}
.member__tag{font-size:15.5px;font-weight:500;color:#F2EFFA;margin-top:6px;letter-spacing:.005em}
.member__cap{text-align:right;min-width:150px}
.member__num{font-size:48px;font-weight:300;line-height:.85;color:#fff;font-family:var(--font-mono);letter-spacing:-.02em}
.member__num span{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#9c93c8;margin-left:9px;vertical-align:middle}
.member__line{height:2px;border-radius:2px;background:rgba(255,255,255,.13);margin:14px 0 9px;overflow:hidden}
.member__line span{display:block;height:100%;background:linear-gradient(90deg,#8a7ee6,#cabfff)}
.member__free{font-size:11px;letter-spacing:.04em;color:#a79fca}

.member__seats{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:13px}
.seat{position:relative;border-radius:15px;padding:16px 17px;min-height:96px;display:flex;flex-direction:column;justify-content:center;gap:3px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.018));border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.seat__hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}
.seat__type{font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.seat__type--cort{color:#c1b6f5}
.seat__type--paid{color:#d9c9a6}
.seat__name{font-size:17.5px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em;line-height:1.1}
.seat__sub{font-size:11.5px;color:#a79fca;font-family:var(--font-mono);letter-spacing:.02em}
.seat__rm{background:none;cursor:pointer;color:#a79fca;font:inherit;font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:8px;border:1px solid rgba(255,255,255,.15);transition:.15s}
.seat__rm:hover{color:#fff;background:rgba(255,92,92,.16);border-color:rgba(255,92,92,.45)}
.seat__lock{background:none;border:1px solid rgba(217,201,166,.32);cursor:pointer;color:#d9c9a6;font:inherit;font-size:11px;font-weight:700;letter-spacing:.03em;padding:4px 9px;border-radius:8px;display:inline-flex;align-items:center;gap:5px;transition:.15s}
.seat__lock:hover{background:rgba(217,201,166,.12)}
.seat--empty{cursor:pointer;align-items:center;justify-content:center;text-align:center;gap:7px;background:transparent;border:1px dashed rgba(255,255,255,.22);transition:.18s}
.seat--empty:hover{border-color:rgba(202,191,255,.6);background:rgba(202,191,255,.05);transform:translateY(-2px)}
.seat__plus{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:13px;color:#cabfff;border:1px solid rgba(202,191,255,.42)}
.seat__empty-t{font-size:13.5px;font-weight:600;color:#ECE9F6}
.seat__empty-s{font-size:10px;color:#8f86b6;letter-spacing:.03em}

.member__trans{position:relative;margin-top:18px;padding-top:15px;border-top:1px solid rgba(255,255,255,.08);font-size:11.5px;color:#a79fca;letter-spacing:.02em}
.member__trans i{color:#d9c9a6;margin-right:6px}
.seat-trans{margin-right:14px}
.seat-trans b{color:#ECE9F6}
.member__buy{position:relative;display:inline-flex;align-items:center;gap:9px;margin-top:20px;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:#cabfff;text-decoration:none;transition:gap .18s,color .18s}
.member__buy:hover{gap:14px;color:#fff}
.member__empty{position:relative;color:#a79fca;padding:16px;text-align:center}
.member__empty a{color:#cabfff}
/* dark page: levanta a carteira do fundo com um leve halo */
:root[data-tema="escuro"] .member{box-shadow:0 30px 74px -34px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.05),inset 0 1px 0 rgba(255,255,255,.06)}

@media(max-width:820px){.member{padding:22px 20px}.member__head{gap:16px}.member__cap{text-align:left;min-width:0}}

/* ══════ Config pages — linguagem obsidiana (escopo .cfg-lux) ══════ */
.cfg-lux{--am:#8a7ee6;--am-lt:#cabfff}
.cfg-hero{position:relative;overflow:hidden;border-radius:22px;padding:26px 30px;margin:0 0 20px;color:#ECE9F6;
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  background:radial-gradient(135% 165% at 4% -22%, #2b2249 0%, #191330 48%, #100c1e 100%);
  border:1px solid rgba(255,255,255,.09);box-shadow:0 34px 80px -38px rgba(14,9,28,.85),inset 0 1px 0 rgba(255,255,255,.05)}
.cfg-hero__main{position:relative;display:flex;align-items:center;gap:18px}
.cfg-hero__crest{flex:0 0 auto;width:56px;height:56px;border-radius:15px;display:grid;place-items:center;font-size:23px;color:#cabfff;
  background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.cfg-hero__eyebrow{font-size:10px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:#9c93c8}
.cfg-hero__title{font-size:30px;font-weight:300;color:#fff;margin:4px 0 0;letter-spacing:.01em;line-height:1}
.cfg-hero__sub{font-size:13px;color:#a79fca;margin:9px 0 0;max-width:62ch;line-height:1.5}
.cfg-hero__acct{position:relative;text-align:right}
.cfg-hero__acctlbl{display:block;font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#8f86b6;margin-bottom:8px}
.cfg-hero__select{position:relative;display:inline-block}
.cfg-hero__select select{appearance:none;-webkit-appearance:none;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#fff;
  font:inherit;font-size:13.5px;font-weight:600;padding:11px 40px 11px 15px;border-radius:12px;cursor:pointer;min-width:200px;transition:border-color .15s,background .15s}
.cfg-hero__select select:hover{border-color:rgba(202,191,255,.5);background:rgba(255,255,255,.09)}
.cfg-hero__select select:focus{outline:none;border-color:var(--am-lt);box-shadow:0 0 0 3px rgba(138,126,230,.28)}
.cfg-hero__select select option{background:#1a1430;color:#fff}
.cfg-hero__select > i{position:absolute;right:15px;top:50%;transform:translateY(-50%);pointer-events:none;color:#9c93c8;font-size:12px}

/* seções refinadas (só nas configs) */
.cfg-lux .card.feature{border-radius:18px;padding:22px 24px;box-shadow:0 1px 2px rgba(0,0,0,.03);transition:box-shadow .18s,border-color .18s,transform .18s}
.cfg-lux .card.feature:hover{border-color:color-mix(in srgb,var(--am) 32%,var(--surface-border));box-shadow:0 20px 44px -28px rgba(0,0,0,.28)}
/* card envolto em <form> é :last-of-type do form -> perde o margin-bottom e cola no próximo card. Restaura o respiro. */
.cfg-lux form > .card.feature:last-of-type{margin-bottom:26px}
.cfg-lux .feature__title{font-weight:600;letter-spacing:.01em;font-size:16px}
.cfg-lux .feature__desc{color:var(--text-muted);letter-spacing:.004em}

/* barra de salvar — sticky obsidiana */
.cfg-lux .form-actions{position:sticky;bottom:16px;z-index:20;display:flex;gap:11px;align-items:center;justify-content:flex-end;flex-wrap:wrap;
  margin-top:24px;padding:14px 18px;border-radius:16px;color:#ECE9F6;
  background:radial-gradient(130% 240% at 100% 0%, #241c3d, #14101f);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 26px 54px -26px rgba(10,6,20,.72),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(6px)}
.cfg-lux .form-actions .btn-accent{background:linear-gradient(135deg,#8a7ee6,#6f61c8);border-color:#6f61c8;color:#fff}
.cfg-lux .form-actions .btn-accent:hover{background:linear-gradient(135deg,#9a8ff0,#7c6ed6)}
.cfg-lux .form-actions .btn-outline{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.22);color:#ECE9F6}
.cfg-lux .form-actions .btn-outline:hover{background:rgba(255,255,255,.11);border-color:rgba(202,191,255,.5)}

@media(max-width:820px){.cfg-hero{padding:22px 20px}.cfg-hero__acct{text-align:left}.cfg-hero__title{font-size:25px}}

/* Memória do bot — 2 colunas (Focar / Evitar) com add-input + grid Tabulator */
.pvp-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.pvp-col__t{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.pvp-col__t--foco{color:var(--success)}
.pvp-col__t--evitar{color:var(--danger)}
.pvp-add{display:flex;gap:8px;margin-bottom:12px}
.pvp-add__in{flex:1;min-width:0}
.pvp-add__btn{flex:0 0 auto;white-space:nowrap}
@media(max-width:820px){.pvp-cols{grid-template-columns:1fr}}

/* Mercado interno — painel de acesso (super) */
.mi-acesso{display:flex;gap:10px;align-items:flex-start}
.mi-acesso textarea{flex:1;min-height:92px;resize:vertical}
.mi-acesso .btn{flex:0 0 auto;white-space:nowrap}
@media(max-width:640px){.mi-acesso{flex-direction:column}.mi-acesso .btn{width:100%}}

/* Mercado interno — Pacotes em aberto (por tipo + por devedor + total) */
.pend__hd{font-size:12.5px;color:var(--text-muted)}
.pend__hd b{color:var(--text);font-family:var(--font-mono)}
.pend__ouro{color:var(--accent)!important}
.pend__alvo{color:var(--danger)}
.pend__sep{opacity:.4;margin:0 3px}
.pend__tipos{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;margin:14px 0 18px}
.pend-tipo{border:1px solid var(--surface-border);border-radius:12px;padding:12px 14px;background:var(--surface-alt);text-align:center}
.pend-tipo__lbl{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}
.pend-tipo b{display:block;font-size:24px;font-weight:800;font-family:var(--font-mono);color:var(--text);line-height:1.1;margin-top:4px}
.pend-tipo small{font-size:10.5px;color:var(--text-faint)}
.pend-tipo em{display:block;font-style:normal;font-size:10.5px;font-weight:700;color:var(--danger);margin-top:3px}
.pend-tipo--zero{opacity:.45}
.pend__lista{display:flex;flex-direction:column;gap:8px}
.pend-dev{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 14px;border-radius:12px;border:1px solid var(--surface-border);background:var(--surface);transition:border-color .15s}
.pend-dev:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--surface-border))}
.pend-dev--alvo{border-left:3px solid var(--danger)}
.pend-dev__id{min-width:168px;flex:0 0 auto}
.pend-dev__nome{display:block;font-size:15px;font-weight:700;color:var(--text)}
.pend-dev__flag{font-size:11px;font-weight:700;color:var(--danger)}
.pend-dev__ok{font-size:11px;color:var(--warning)}
.pend-dev__tipos{flex:1;display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.pend-chip{font-size:11.5px;font-weight:600;color:var(--text);background:var(--surface-alt);border:1px solid var(--surface-border);border-radius:7px;padding:2px 8px;white-space:nowrap;font-family:var(--font-mono)}
.pend-dev__tot{flex:0 0 auto;text-align:right;min-width:112px}
.pend-dev__tot b{display:block;font-size:17px;font-weight:800;font-family:var(--font-mono);color:var(--accent)}
.pend-dev__tot small{font-size:10.5px;color:var(--text-muted)}
.pend-vazio{color:var(--text-muted);text-align:center;padding:18px}
@media(max-width:720px){.pend-dev__id,.pend-dev__tot{min-width:0;width:100%;text-align:left}}

/* ══════ Hero unificado obsidiana — páginas com .page-header--hero ══════ */
/* (contas / planos / pedidos / mercado-interno / licenças) — vence o override claro do Mofi */
.page-header--hero{position:relative;overflow:hidden;color:#ECE9F6!important;
  border:1px solid rgba(255,255,255,.09)!important;border-radius:22px!important;padding:26px 30px!important;margin:0 0 20px!important;
  background:radial-gradient(135% 165% at 4% -22%, #2b2249 0%, #191330 48%, #100c1e 100%)!important;
  box-shadow:0 34px 80px -38px rgba(14,9,28,.85),inset 0 1px 0 rgba(255,255,255,.05)!important}
.page-header--hero::before{content:''!important;display:block!important;position:absolute;inset:0;z-index:0;background:linear-gradient(122deg,transparent 40%,rgba(255,255,255,.05) 50%,transparent 60%)}
.page-header--hero::after{display:none!important}
.page-header--hero > *{position:relative;z-index:1}
.page-header--hero h1{color:#fff!important;font-weight:300!important;letter-spacing:.01em!important}
.page-header--hero p{color:#a79fca!important}
.page-header--hero p a{color:#cabfff!important}
.page-header--hero .page-header__crest{color:#cabfff!important;border:1px solid rgba(255,255,255,.13)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
  background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.015))!important}
.page-header--hero .page-header__hi .v{color:#fff!important;font-weight:300!important}
.page-header--hero .page-header__hi .l{color:#9c93c8!important}

/* lux-hero (Início / Relatórios) → mesma obsidiana */
.lux-hero{color:#f3efff!important;border:1px solid rgba(138,126,230,.24)!important;border-radius:22px!important;padding:26px 30px!important;
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,#2c2448 0%,#1a1530 55%,#241d3c 100%)!important;
  box-shadow:0 34px 80px -38px rgba(20,12,44,.85),inset 0 1px 0 rgba(255,255,255,.05)!important}
.lux-hero::before{display:none!important}
.lux-hero::after{content:''!important;display:block!important;position:absolute;top:0;left:-60%;width:45%;height:100%;z-index:-1;
  transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);animation:galaSheen 7s ease-in-out 1.2s infinite}
.lux-hero__row{z-index:1}
.lux-title{color:#fff!important;font-weight:300!important}
.lux-title b{color:#cabfff!important;font-weight:500!important}
.lux-hero__hi{border-left-color:rgba(255,255,255,.12)!important}
.lux-hero__hi .v{color:#fff!important;font-weight:300!important}
.lux-hero__hi .l{color:#9c93c8!important}
/* halo no dark pra os heroes obsidiana levantarem do fundo navy */
:root[data-tema="escuro"] .cfg-hero,
:root[data-tema="escuro"] .page-header--hero,
:root[data-tema="escuro"] .lux-hero{box-shadow:0 30px 74px -34px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.055),inset 0 1px 0 rgba(255,255,255,.06)!important}

/* ══════════ ✦ PADRÃO GALA — banda joia + brasão luminoso + brilho deslizante. Definido 1× aqui (app.css,
   versionado/cacheado) e aplicado às classes que já existem (hero, tiles) + ao prompt de conexão. Reaproveita
   sem inchar as páginas. Tema-independente: a banda joia funciona no claro e no escuro. ✦ ══════════ */
@keyframes galaSheen{0%{left:-60%}26%,100%{left:135%}}
/* brasão/ícone LUMINOSO — compartilhado: hero (.lux-crest) + tiles (.lux-tile__ic) */
.lux-crest,.lux-tile__ic{background:linear-gradient(150deg,#9a8ff0,#6a5fb0)!important;color:#fff!important;
  box-shadow:0 10px 24px rgba(122,112,186,.5),0 0 0 1px rgba(255,255,255,.16) inset!important}
.lux-tile__ic{box-shadow:0 7px 16px rgba(122,112,186,.45),0 0 0 1px rgba(255,255,255,.14) inset!important}
/* HERO — eyebrow/sub claros na banda joia */
.lux-eyebrow{color:#bcb1f2!important}
.lux-sub{color:#a99fce!important}
/* TILES — mesma banda joia do hero (com hover-lift + trilho luminoso) */
.lux-tile{border-radius:14px!important;color:#f3efff!important;overflow:hidden;
  background:linear-gradient(150deg,#241d3c,#171227)!important;border:1px solid rgba(138,126,230,.2)!important;
  box-shadow:0 14px 32px -16px rgba(16,10,32,.72),0 0 0 1px rgba(138,126,230,.06) inset!important;
  transition:transform .16s,box-shadow .16s,border-color .16s}
.lux-tile::before{background:linear-gradient(180deg,#9a8ff0,#6a5fb0)!important;box-shadow:0 0 12px rgba(154,143,240,.55)}
.lux-tile:hover{transform:translateY(-3px);border-color:rgba(154,143,240,.4)!important;
  box-shadow:0 22px 44px -18px rgba(16,10,32,.82),0 0 0 1px rgba(154,143,240,.2) inset!important}
.lux-tile__v{color:#f3efff!important}
.lux-tile__l{color:#a99fce!important}
.lux-tile .vd-sep{color:#8a7fb0!important}
:root[data-tema="escuro"] .lux-tile{box-shadow:0 20px 44px -22px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.05) inset!important}

/* PROMPT DE CONEXÃO (#lanistaPend) — mesma linguagem gala, movido do inline do dashboard pra cá */
#lanistaPend{position:relative;overflow:hidden;margin:0 0 16px;border-radius:18px;padding:20px 24px;color:#f3efff;isolation:isolate;
  background:linear-gradient(135deg,#2c2448 0%,#1a1530 55%,#241d3c 100%);border:1px solid rgba(138,126,230,.3);
  box-shadow:0 18px 46px rgba(30,20,60,.42),0 2px 0 rgba(255,255,255,.04) inset,0 0 0 1px rgba(138,126,230,.08) inset;
  animation:galaIn .55s cubic-bezier(.16,1,.3,1) both}
@keyframes galaIn{from{opacity:0;transform:translateY(-10px) scale(.985)}to{opacity:1;transform:none}}
#lanistaPend::before{content:"";position:absolute;inset:-40% -10%;z-index:-1;
  background:radial-gradient(50% 60% at 12% 0%,rgba(138,126,230,.42),transparent 70%),radial-gradient(42% 55% at 100% 100%,rgba(201,94,158,.2),transparent 70%)}
#lanistaPend::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;z-index:-1;
  transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);animation:galaSheen 6s ease-in-out 1s infinite}
#lanistaPend .lp-inner{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
#lanistaPend .lp-crest{flex:0 0 auto;width:58px;height:58px;border-radius:16px;display:grid;place-items:center;font-size:25px;color:#fff;position:relative;background:linear-gradient(150deg,#9a8ff0,#6a5fb0);box-shadow:0 10px 24px rgba(122,112,186,.6),0 0 0 1px rgba(255,255,255,.16) inset}
#lanistaPend .lp-crest::after{content:"";position:absolute;inset:-6px;border-radius:21px;border:1.5px solid rgba(154,143,240,.55);animation:galaPulse 2.2s ease-out infinite}
@keyframes galaPulse{0%{transform:scale(.9);opacity:.85}100%{transform:scale(1.28);opacity:0}}
#lanistaPend .lp-main{flex:1 1 260px;min-width:0}
#lanistaPend .lp-eyebrow{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;color:#bcb1f2;margin-bottom:4px}
#lanistaPend .lp-live{width:7px;height:7px;border-radius:50%;background:#9a8ff0;box-shadow:0 0 9px #9a8ff0;animation:galaBlink 1.6s ease-in-out infinite}
@keyframes galaBlink{0%,100%{opacity:1}50%{opacity:.35}}
#lanistaPend .lp-title{font-size:19px;font-weight:800;line-height:1.2;letter-spacing:.2px;color:#fff;margin-bottom:12px;text-wrap:balance}
#lanistaPend .lp-title b{color:#d9cffb}
#lanistaPend .lp-accs{display:flex;flex-wrap:wrap;gap:8px}
#lanistaPend .lp-acc{position:relative;display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;padding:7px 14px 7px 9px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(138,126,230,.22);transition:.18s}
#lanistaPend .lp-acc:hover{background:rgba(255,255,255,.09);border-color:rgba(138,126,230,.45)}
#lanistaPend .lp-acc:has(.lp-ck:checked){background:rgba(138,126,230,.2);border-color:rgba(160,148,240,.6);box-shadow:0 0 0 1px rgba(160,148,240,.35),0 7px 18px rgba(122,112,186,.32)}
#lanistaPend .lp-ck{position:absolute;opacity:0;width:0;height:0}
#lanistaPend .lp-box{flex:0 0 auto;width:20px;height:20px;border-radius:7px;display:grid;place-items:center;font-size:11px;color:transparent;background:rgba(0,0,0,.25);border:1px solid rgba(138,126,230,.4);transition:.18s}
#lanistaPend .lp-acc:has(.lp-ck:checked) .lp-box{background:linear-gradient(150deg,#9a8ff0,#6a5fb0);border-color:transparent;color:#fff;box-shadow:0 3px 9px rgba(122,112,186,.6)}
#lanistaPend .lp-srv{font:800 10px/1 ui-monospace,monospace;letter-spacing:1px;text-transform:uppercase;color:#1a1530;background:#cabff2;padding:4px 7px;border-radius:6px}
#lanistaPend .lp-nm{font-size:13.5px;font-weight:700;color:#f3efff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
#lanistaPend .lp-cta{flex:0 0 auto;display:flex;flex-direction:column;align-items:stretch;gap:8px}
#lanistaPend .lp-btn{position:relative;overflow:hidden;cursor:pointer;border:0;border-radius:13px;padding:13px 26px;font-size:14.5px;font-weight:800;letter-spacing:.3px;color:#fff;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#9a8ff0,#6a5fb0);box-shadow:0 10px 26px rgba(122,112,186,.55),0 1px 0 rgba(255,255,255,.25) inset;transition:.16s}
#lanistaPend .lp-btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(122,112,186,.72),0 1px 0 rgba(255,255,255,.3) inset}
#lanistaPend .lp-btn:active{transform:translateY(0)}
#lanistaPend .lp-btn:disabled{opacity:.7;cursor:default;transform:none}
#lanistaPend .lp-skip{cursor:pointer;background:transparent;border:0;color:#9a8fc4;font-size:12px;font-weight:600;padding:5px;transition:.15s}
#lanistaPend .lp-skip:hover{color:#d9cffb}
@media (max-width:640px){#lanistaPend .lp-cta{flex-direction:row;width:100%}#lanistaPend .lp-btn{flex:1}}
@media (prefers-reduced-motion:reduce){.lux-hero::after,#lanistaPend,#lanistaPend::after,#lanistaPend .lp-crest::after,#lanistaPend .lp-live{animation:none!important}}

/* ✦ Página TREINO — tabelas de espelho (atributos+custos) e histórico */
.tr-wrap{overflow-x:auto}
.tr-tbl{width:100%;border-collapse:collapse;font-size:14px}
.tr-tbl th{text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);font-weight:700;padding:9px 12px;border-bottom:1px solid var(--surface-border);white-space:nowrap}
.tr-tbl td{padding:10px 12px;border-bottom:1px solid var(--surface-border);color:var(--text)}
.tr-tbl tbody tr:last-child td{border-bottom:0}
.tr-tbl tbody tr:hover td{background:var(--accent-muted)}
.tr-attr{font-weight:700;color:var(--text)}
.tr-val{font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;font-size:15px}
.tr-cost,.tr-r{font-variant-numeric:tabular-nums}
.tr-o{font-size:11px;color:var(--text-muted)}
.tr-r{text-align:right}
.tr-when{color:var(--text-muted);font-size:12.5px;white-space:nowrap}
.tr-yes{color:var(--success);font-weight:600;font-size:12.5px}
.tr-no{color:var(--text-faint);font-size:12.5px}
.tr-max{color:var(--text-muted);font-weight:600;font-size:12.5px}
.tr-extra{font-weight:600;color:var(--text-muted);font-size:12px}
.tm-max{font-size:12px}
.tr-empty{text-align:center;color:var(--text-muted);padding:22px 12px}
/* Metas por atributo (barra de progresso + alvo) */
.tm-list{display:flex;flex-direction:column;gap:10px}
.tm-row{display:grid;grid-template-columns:112px 104px 1fr 156px 22px;align-items:center;gap:12px}
.tm-nome{font-weight:700;color:var(--text)}
.tm-atual{font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.tm-alvo{font-weight:600;color:var(--text-muted);font-size:12px}
.tm-bar{height:9px;border-radius:5px;background:var(--surface-alt);overflow:hidden;border:1px solid var(--surface-border)}
.tm-bar span{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#9a8ff0,#6a5fb0);transition:width .4s ease}
.tm-bar span.tm-bar--done{background:linear-gradient(90deg,#0DA759,#0b8f4c)}
.tm-ok{color:var(--success);text-align:center;font-size:13px}
.tm-ok--off{opacity:0}
.tm-row .field__num{margin:0}
.tm-row .field__num .form-control{min-width:60px;padding-left:4px;padding-right:4px}
.tm-fin{margin-top:14px;padding-top:14px;border-top:1px dashed var(--surface-border)}
.tm-fin__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tm-fin__stat{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:15px;color:var(--text);padding:9px 0}
.tm-fin__stat b{color:var(--accent);font-variant-numeric:tabular-nums;font-size:18px}
.tm-fin__last{color:var(--text-muted);font-size:12px}
.tm-fin__aviso{margin:2px 0 10px;padding:11px 13px;border-radius:11px;font-size:12.5px;line-height:1.45;color:var(--text);
  background:color-mix(in srgb,#e8b64a 14%,var(--surface));border:1px solid color-mix(in srgb,#e8b64a 40%,var(--surface-border))}
.tm-fin__aviso i{color:#d99a2b;margin-right:6px}
@media(max-width:640px){.tm-row{grid-template-columns:1fr 66px 22px;gap:8px 10px}.tm-row .tm-bar,.tm-row .field__num{grid-column:1/-1}}

.pl-seg{display:flex;gap:7px;flex-wrap:wrap}
.pl-seg button{padding:9px 13px;border:1px solid var(--surface-border);background:var(--surface);border-radius:10px;cursor:pointer;font:inherit;font-size:13px;font-weight:600;color:var(--text);transition:border-color .15s,background .15s}
.pl-seg button em{color:var(--success);font-style:normal;font-weight:700;font-size:11.5px;margin-left:3px}
.pl-seg button:hover{border-color:var(--accent)}
.pl-seg button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.pl-seg button.on em{color:#fff}
/* variante em grade 2×2 com destaque "melhor valor" */
.pl-seg--grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pl-seg--grid button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:11px 13px;position:relative;overflow:visible}
.pl-seg--grid button b{font-size:14px;font-weight:800}
.pl-seg--grid button em{margin-left:0}
.pl-seg__best{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.pl-seg__ribbon{position:absolute;top:-9px;right:8px;background:var(--accent);color:#fff;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:20px;box-shadow:var(--shadow)}
.pl-seg--grid button.on .pl-seg__ribbon{background:#fff;color:var(--accent)}
.pl-preco{background:var(--surface-alt);border-radius:14px;padding:16px}
.pl-preco__row{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--text-muted);padding:5px 0}
.pl-preco__row--desc{color:var(--success)}
.pl-preco__row--total{border-top:1px solid var(--surface-border);margin-top:6px;padding-top:12px;font-size:20px;font-weight:800;color:var(--text)}
.pl-preco__row--total span:last-child{font-family:var(--font-mono);color:var(--accent)}
.pl-preco .btn{width:100%;margin-top:12px;justify-content:center}
.pl-preco__nota{font-size:12px;color:var(--text-muted);text-align:center;margin:9px 0 0}
@media(max-width:960px){.pd-tiles{grid-template-columns:1fr 1fr}}
@media(max-width:820px){
  .pl-como{grid-template-columns:1fr}
  .pl-mural__grid{grid-template-columns:1fr;gap:16px}
  .pl-mural__cta{flex-direction:row;flex-wrap:wrap}
  .pl-mural__cta .btn{flex:1}
  .pl-buy__body{grid-template-columns:1fr}
  .pl-order{border-left:none;border-top:1px solid var(--surface-border)}
}

/* ============================ Manual de uso ============================ */
.man section[id], .man h2[id]{scroll-margin-top:84px}
.man-sep{display:flex;align-items:center;gap:.55rem;margin:1.8rem .2rem .2rem;font-size:1.02rem;font-weight:700;color:var(--text);letter-spacing:.01em}
.man-sep i{color:var(--accent)}
.man-toc__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.4rem}
.man-toc__grid a{display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem;border-radius:var(--radius);background:var(--surface-alt);border:1px solid var(--surface-border);color:var(--text);text-decoration:none;font-size:.9rem;font-weight:600;transition:border-color .15s,transform .1s}
.man-toc__grid a:hover{border-color:var(--accent);transform:translateY(-1px)}
.man-toc__grid a i{color:var(--accent);width:1.1em;text-align:center}
.man-list{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.man-list li{position:relative;padding-left:1.1rem;color:var(--text-muted);line-height:1.5;font-size:.94rem}
.man-list li::before{content:'';position:absolute;left:0;top:.55em;width:.42rem;height:.42rem;border-radius:50%;background:var(--accent);opacity:.7}
.man-list li b{color:var(--text);font-weight:650}
.man-list code, .man-note code{background:var(--surface-alt);border:1px solid var(--surface-border);border-radius:6px;padding:.05rem .35rem;font-size:.86em}
.man-note{margin:.9rem 0 0;padding:.6rem .8rem;border-radius:var(--radius);background:var(--surface-alt);border:1px solid var(--surface-border);color:var(--text-muted);font-size:.9rem;display:flex;gap:.5rem;align-items:baseline}
.man-note i{color:var(--accent)}
.man-tag{display:inline-block;vertical-align:middle;margin-left:.35rem;padding:.05rem .4rem;border-radius:6px;background:var(--accent-muted);color:var(--accent);font-size:.62rem;font-weight:800;letter-spacing:.06em;border:1px solid var(--accent-muted)}
.man .feature__head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.man .feature__head .btn{flex:0 0 auto;padding:.32rem .7rem;font-size:.82rem}
.man-foot{margin:1.6rem .2rem 0;color:var(--text-faint);font-size:.9rem;display:flex;gap:.5rem;align-items:baseline}
.man-foot i{color:var(--accent)}

/* Manual — subtítulos de card, passos numerados e detalhes */
.man-sub{margin:1.1rem 0 .3rem;font-size:.98rem;font-weight:700;color:var(--text);display:flex;align-items:center;gap:.45rem}
.man-sub .man-tag{margin-left:0}
.man-sub--first{margin-top:.3rem}
.man-steps{list-style:none;counter-reset:mstep;margin:.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.man-steps>li{counter-increment:mstep;position:relative;padding:.1rem 0 .1rem 2.4rem;color:var(--text-muted);line-height:1.5}
.man-steps>li::before{content:counter(mstep);position:absolute;left:0;top:0;width:1.7rem;height:1.7rem;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;font-size:.85rem}
.man-steps>li b{color:var(--text)}
.man-hint{margin:.5rem 0 0;font-size:.86rem;color:var(--text-faint)}
.man-hint b{color:var(--text-muted)}
.man-list li .man-def{color:var(--text-faint);font-size:.86em}

/* Manual — "clicar pra copiar" (chrome:// não pode ser link direto) */
.man-copy{display:inline-flex;align-items:center;gap:.35rem;background:var(--surface-alt);border:1px solid var(--surface-border);border-radius:6px;padding:.06rem .45rem;font:600 .86em inherit;color:var(--accent);cursor:pointer;transition:border-color .15s,color .15s;vertical-align:baseline}
.man-copy:hover{border-color:var(--accent)}
.man-copy--ok{color:#4fd07a;border-color:#4fd07a}
.man-copy i{font-size:.85em}

/* ===== Página de cliente (admin): card de Licenciamento redesenhado ===== */
.lic-lic2 .feature__head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.lic-lic__badges{display:inline-flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.lic-sect{margin-top:1.1rem}
.lic-sect__t{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);font-weight:800;margin-bottom:.45rem}
.lic-sect__t small{text-transform:none;letter-spacing:0;font-weight:500}
.lic-acts{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.75rem}
.lic-act{display:flex;flex-direction:column;gap:.5rem;margin:0;background:var(--surface-alt);border:1px solid var(--surface-border);border-radius:12px;padding:.85rem .9rem;transition:border-color .15s}
.lic-act:hover{border-color:var(--accent)}
.lic-act__hd{display:flex;align-items:center;gap:.5rem;font-size:.95rem}
.lic-act__hd b{color:var(--text)}
.lic-act__ic{width:1.95rem;height:1.95rem;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:9px;background:var(--accent-muted);color:var(--accent);font-size:.9rem}
.lic-act__ic--grant{background:rgba(79,208,122,.16);color:#3fbf6c}
.lic-act__ic--gift{background:rgba(138,127,240,.16);color:#8a7ff0}
.lic-act__ic--trial{background:rgba(224,169,58,.18);color:#c98f1a}
.lic-act__tag{margin-left:auto;font-size:.58rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:.08rem .42rem;border-radius:6px;background:var(--surface-border);color:var(--text-muted)}
.lic-act__tag--free{background:rgba(79,208,122,.16);color:#3fbf6c}
.lic-act__desc{margin:0;font-size:.82rem;line-height:1.45;color:var(--text-muted)}
.lic-act__desc b{color:var(--text)}
.lic-act__row{display:flex;gap:.5rem;align-items:flex-end;flex-wrap:wrap;margin-top:auto;padding-top:.15rem}
.lic-act__row .field{margin:0}
.lic-act__row .field label{font-size:.72rem;color:var(--text-faint);margin:0 0 .2rem;display:block;text-transform:none;letter-spacing:0;font-weight:600}
.lic-act__row .field .form-control{width:82px}
.lic-act__row .btn{flex:0 0 auto}

/* Página de cliente (admin): menu ▾ por conta (dropdown nativo <details>, inline p/ não ser cortado) */
.lic-menu{display:inline-block;text-align:left}
.lic-menu>summary{list-style:none;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:.4rem}
.lic-menu>summary::-webkit-details-marker{display:none}
.lic-menu>summary::marker{content:''}
.lic-menu[open]>summary{margin-bottom:.45rem}
.lic-menu__pop{width:212px;background:var(--surface-alt);border:1px solid var(--surface-border);border-radius:10px;padding:.35rem;display:flex;flex-direction:column;gap:.05rem;box-shadow:0 10px 26px rgba(0,0,0,.2)}
.lic-menu__f{margin:0}
.lic-menu__i{display:flex;align-items:center;gap:.55rem;width:100%;text-align:left;background:none;border:0;border-radius:7px;padding:.45rem .55rem;font:600 .85rem/1.2 inherit;color:var(--text);cursor:pointer;text-decoration:none}
.lic-menu__i:hover{background:var(--surface)}
.lic-menu__i i{width:1.1em;text-align:center;color:var(--text-muted);flex:0 0 auto}
.lic-menu__i--danger{color:var(--danger)} .lic-menu__i--danger i{color:var(--danger)}
.lic-menu__i--warn{color:var(--warning)} .lic-menu__i--warn i{color:var(--warning)}
.lic-menu__sep{height:1px;background:var(--surface-border);margin:.25rem .15rem}

/* Dashboard: feed "Últimas ações" — barra de rolagem discreta (acompanha a altura do card ao lado via JS) */
.home-feed{scrollbar-width:thin;scrollbar-color:var(--surface-border) transparent}
.home-feed::-webkit-scrollbar{width:8px}
.home-feed::-webkit-scrollbar-thumb{background:var(--surface-border);border-radius:8px}
.home-feed::-webkit-scrollbar-track{background:transparent}

/* ===== Mercado interno: Monitor "a verificar" (conversão de faixa) ===== */
.mon__lista{display:flex;flex-direction:column;gap:.4rem;margin-top:.5rem}
.mon-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;padding:.55rem .7rem;border-radius:10px;background:var(--surface-alt);border:1px solid var(--surface-border)}
.mon-row--espetinho{border-color:rgba(228,65,65,.45);background:rgba(228,65,65,.06)}
.mon-row__id{display:flex;align-items:center;gap:.5rem;min-width:200px;flex:1 1 200px}
.mon-row__id b{color:var(--text)}
.mon-tag{font-size:.62rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:.1rem .45rem;border-radius:6px;white-space:nowrap}
.mon-tag--esp{background:rgba(228,65,65,.16);color:var(--danger)}
.mon-tag--ini{background:rgba(72,163,215,.16);color:var(--secondary)}
.mon-tag--seg{background:rgba(215,119,72,.16);color:var(--warning)}
.mon-row__fx{display:flex;flex-wrap:wrap;gap:.3rem;flex:2 1 260px;font-size:.8rem;color:var(--text-muted)}
.mon-fx{padding:.05rem .35rem;border-radius:5px;background:var(--surface);border:1px solid var(--surface-border)}
.mon-fx--dif{color:var(--text);border-color:var(--accent-muted)}
.mon-fx b{color:var(--text);font-variant-numeric:tabular-nums}
.mon-row__num{display:flex;align-items:center;gap:.6rem;margin-left:auto;font-size:.82rem;white-space:nowrap}
.mon-conv{font-weight:800;color:var(--danger)}
.mon-saldo--pos{color:var(--secondary)} .mon-saldo--neg{color:var(--warning)}
.mon-fx--orig{border-color:var(--danger)!important;color:var(--danger)!important;font-weight:600}
.mon-fx--orig b{color:var(--danger)}
.mon-x{margin-left:.25rem;width:16px;height:16px;line-height:14px;padding:0;border-radius:4px;border:1px solid var(--surface-border);background:var(--surface);color:var(--text-muted);cursor:pointer;font-size:11px;vertical-align:middle}
.mon-x:hover{border-color:var(--danger);color:var(--danger)}
.mon-x--undo:hover{border-color:var(--success);color:var(--success)}
.mon-fx--done{opacity:.45;text-decoration:line-through}
.mon-fx--done b{text-decoration:line-through}

/* ===== Mercado: babá (detalhe expansível) + monitor (eventos com data + botão) ===== */
details.pend-dev{background:var(--surface-alt);border:1px solid var(--surface-border);border-radius:10px;margin:.35rem 0;overflow:hidden}
details.pend-dev--alvo{border-color:rgba(228,65,65,.4)}
.pend-dev__sum{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.55rem .7rem}
.pend-dev__sum::-webkit-details-marker{display:none}
.pend-dev__sum::before{content:'\25B8';color:var(--text-faint);transition:transform .15s}
details[open]>.pend-dev__sum::before{transform:rotate(90deg)}
.pend-dev__nome{font-weight:700;color:var(--text)}
.pend-dev__flag{color:var(--danger);font-weight:700;font-size:.8rem}
.pend-dev__ok{color:var(--text-faint);font-size:.8rem}
.pend-dev__tot{margin-left:auto;font-size:.82rem;color:var(--text-muted)}
.pend-dev__detalhe{padding:.2rem .7rem .6rem;display:flex;flex-direction:column;gap:.25rem;border-top:1px solid var(--surface-border)}
.pend-pack{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.35rem .5rem;border-radius:7px;background:var(--surface);font-size:.85rem}
.pend-pack--nunca{border:1px solid rgba(228,65,65,.35)}
.pend-pack__it{font-weight:600;color:var(--text);min-width:110px}
.pend-pack__v{color:var(--accent);font-weight:700}
.pend-pack__t{color:var(--text-muted);font-size:.8rem}
.pend-pack__flag{color:var(--danger)}
.pend-pack .mon-x{margin-left:auto}
.mon-x--ok:hover{border-color:var(--success);color:var(--success)}
.mon-row{flex-direction:column;align-items:stretch}
.mon-row__sum{margin-left:auto;font-size:.82rem;color:var(--text-muted)}
.mon-row__evs{display:flex;flex-direction:column;gap:.3rem;margin-top:.4rem;width:100%}
.mon-ev{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.4rem .55rem;border-radius:8px;background:var(--surface);border:1px solid var(--surface-border);font-size:.85rem}
.mon-ev--orig{border-color:var(--danger)}
.mon-ev--done{opacity:.5}
.mon-ev--done .mon-ev__it,.mon-ev--done .mon-ev__val{text-decoration:line-through}
.mon-ev__it{font-weight:700;color:var(--text);min-width:90px}
.mon-ev__star{color:var(--danger);font-size:.72rem}
.mon-ev__val{color:var(--text-muted)} .mon-ev__val b{color:var(--text)}
.mon-ev__ganho{color:var(--danger)}
.mon-ev__dt{color:var(--text-faint);font-size:.78rem}
.mon-btn{margin-left:auto;padding:.22rem .55rem;border-radius:7px;border:1px solid var(--surface-border);background:var(--surface-alt);color:var(--text-muted);cursor:pointer;font:600 .78rem inherit;white-space:nowrap}
.mon-btn:hover{border-color:var(--danger);color:var(--danger)}
.mon-btn--undo:hover{border-color:var(--success);color:var(--success)}

/* ===== Mercado: card compacto clicável (abre modal com o detalhe) ===== */
.mkt-card{background:var(--surface-alt);border:1px solid var(--surface-border);border-radius:10px;margin:.35rem 0;padding:.6rem .75rem;cursor:pointer;transition:border-color .15s}
.mkt-card:hover{border-color:var(--accent)}
.mkt-card--esp,.mkt-card--alvo{border-color:rgba(228,65,65,.4)}
.mkt-card--esp:hover,.mkt-card--alvo:hover{border-color:var(--danger)}
.mkt-card__row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.mkt-card__nm{color:var(--text)}
.mkt-card__num{margin-left:auto;display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--text-muted)}
.mkt-card__arr{color:var(--text-faint);font-size:.75rem}
.mkt-modal{width:min(680px,94vw);max-height:82vh;border:1px solid var(--surface-border);border-radius:14px;background:var(--surface);color:var(--text);padding:0}
.mkt-modal::backdrop{background:rgba(0,0,0,.55)}
.mkt-modal__hd{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--surface-border)}
.mkt-modal__hd b{font-size:1rem}
.mkt-modal__x{width:30px;height:30px;border-radius:8px;border:1px solid var(--surface-border);background:var(--surface-alt);color:var(--text-muted);cursor:pointer;font-size:20px;line-height:1}
.mkt-modal__x:hover{border-color:var(--danger);color:var(--danger)}
.mkt-modal__body{padding:1rem 1.1rem;overflow-y:auto;max-height:calc(82vh - 62px);display:flex;flex-direction:column;gap:.4rem}

/* ===== Mercado: barra do seletor de servidor/aliança ===== */
.mkt-srvbar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.2rem 0 .9rem;padding:.55rem .8rem;background:var(--surface-alt);border:1px solid var(--surface-border);border-radius:10px}
.mkt-srvbar label{font-size:.82rem;color:var(--text-muted);font-weight:600;display:flex;align-items:center;gap:.4rem}
.mkt-srvbar .form-select{width:auto;min-width:220px}
.mkt-srvbar__now{margin-left:auto;font-size:.8rem;color:var(--text-muted)}
.mkt-srvbar__now b{color:var(--text)}