/* ==========================================================================
   PREMIUM THEME — Mídia Play / WHMCS 9 · Twenty-One
   --------------------------------------------------------------------------
   Tema CLARO e a base (:root). O escuro entra por prefers-color-scheme e a
   escolha manual (data-theme no <html>, gravada em localStorage) vence ambos.
   Everything is driven by the custom properties in the token block below —
   change a token, the whole surface follows.

   Load order matters: this file MUST come after theme.min.css.
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
    /* --- Surfaces --- */
    --pt-bg:              #e9eef5;
    --pt-bg-deep:         #dde4ee;
    --pt-bg-elev:         #ffffff;
    --pt-card:            #ffffff;
    --pt-card-hover:      #f8fafc;
    --pt-card-inset:      #f4f7fb;

    /* --- Lines --- */
    --pt-border:          rgba(15, 23, 42, .10);
    --pt-border-strong:   rgba(15, 23, 42, .18);
    --pt-divider:         rgba(15, 23, 42, .07);

    /* --- Type --- */
    --pt-text:            #1e293b;
    --pt-text-strong:     #0f172a;
    --pt-text-dim:        #475569;
    --pt-text-mute:       #5b6a80;

    /* --- Brand --- */
    --pt-brand:           #047857;
    --pt-brand-hover:     #036b4d;
    --pt-brand-active:    #025c42;
    --pt-brand-soft:      rgba(16, 185, 129, .10);
    --pt-brand-ring:      rgba(16, 185, 129, .28);
    --pt-on-brand:        #ffffff;
    --pt-on-danger:       #ffffff;

    /* --- Semantic --- */
    --pt-amber:           #a1490a;
    --pt-amber-soft:      rgba(245, 158, 11, .10);
    --pt-amber-ring:      rgba(245, 158, 11, .30);
    --pt-red:             #b91c1c;
    --pt-red-surface:     #b91c1c;
    --pt-red-soft:        rgba(239, 68, 68, .09);
    --pt-red-ring:        rgba(239, 68, 68, .28);
    --pt-blue:            #2563eb;
    --pt-blue-soft:       rgba(59, 130, 246, .09);
    --pt-violet:          #7c3aed;
    --pt-violet-soft:     rgba(139, 92, 246, .09);

    /* --- Elevation --- */
    --pt-shadow-sm:       0 1px 2px rgba(15, 23, 42, .05),
                          0 10px 28px -14px rgba(15, 23, 42, .20);
    --pt-shadow:          0 2px 4px rgba(15, 23, 42, .05),
                          0 18px 44px -16px rgba(15, 23, 42, .24);
    --pt-shadow-lg:       0 28px 68px -20px rgba(15, 23, 42, .26);
    --pt-shadow-xl:       0 44px 96px -28px rgba(15, 23, 42, .30);
    --pt-shadow-card:     0 0 0 1px var(--pt-border),
                          0 24px 64px -26px rgba(15, 23, 42, .28),
                          0 2px 8px -3px rgba(15, 23, 42, .14);
    --pt-glow-brand:      0 0 0 1px var(--pt-brand-ring), 0 16px 40px -14px rgba(16, 185, 129, .40);
    --pt-glow-brand-xl:   0 0 0 1px rgba(16, 185, 129, .40),
                          0 0 28px -6px rgba(16, 185, 129, .35),
                          0 22px 60px -20px rgba(16, 185, 129, .45);

    /* --- Tokens de componente (evitam seletores de tema espalhados) --- */
    --pt-inset-translucent: rgba(255, 255, 255, .72);
    --pt-auth-glow-a:     rgba(16, 185, 129, .12);
    --pt-auth-glow-b:     rgba(59, 130, 246, .10);
    --pt-alert-bg:        linear-gradient(120deg, #fff5f5, #fff9f2 62%);
    --pt-alert-icon-bg:   rgba(239, 68, 68, .10);
    --pt-alert-icon-fg:   #dc2626;
    --pt-alert-title:     #991b1b;
    --pt-alert-sub:       #b45309;

    /* --- Geometry --- */
    --pt-radius-sm:       12px;
    --pt-radius:          20px;
    --pt-radius-lg:       28px;
    --pt-radius-xl:       36px;
    --pt-radius-card:     16px;
    --pt-radius-pill:     999px;

    /* --- Motion --- */
    --pt-ease:            cubic-bezier(.4, 0, .2, 1);
    --pt-speed:           .22s;

    /* --- Type scale --- */
    --pt-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Camada 2 — automatico: obedece o sistema operacional do usuario.
   O :not([data-theme="light"]) garante que a escolha manual por Claro nao
   seja atropelada quando o SO esta em escuro.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
    --pt-bg:              #0a1020;
    --pt-bg-deep:         #0b1120;
    --pt-bg-elev:         #131f38;
    --pt-card:            #1e293b;
    --pt-card-hover:      #24334a;
    --pt-card-inset:      #17233a;

    --pt-border:          rgba(148, 163, 184, .14);
    --pt-border-strong:   rgba(148, 163, 184, .28);
    --pt-divider:         rgba(148, 163, 184, .10);

    --pt-text:            #e2e8f0;
    --pt-text-strong:     #f8fafc;
    --pt-text-dim:        #cbd5e1;
    --pt-text-mute:       #94a3b8;

    --pt-brand:           #10B981;
    --pt-brand-hover:     #34d399;
    --pt-brand-active:    #059669;
    --pt-brand-soft:      rgba(16, 185, 129, .12);
    --pt-brand-ring:      rgba(16, 185, 129, .32);
    --pt-on-brand:        #05261b;
    --pt-on-danger:       #ffffff;

    --pt-amber:           #f59e0b;
    --pt-amber-soft:      rgba(245, 158, 11, .12);
    --pt-amber-ring:      rgba(245, 158, 11, .30);
    --pt-red:             #f87171;
    --pt-red-surface:     #dc2626;
    --pt-red-soft:        rgba(239, 68, 68, .12);
    --pt-red-ring:        rgba(239, 68, 68, .30);
    --pt-blue:            #3b82f6;
    --pt-blue-soft:       rgba(59, 130, 246, .12);
    --pt-violet:          #8b5cf6;
    --pt-violet-soft:     rgba(139, 92, 246, .12);

    --pt-shadow-sm:       0 1px 2px rgba(0, 0, 0, .40),
                          0 10px 28px -14px rgba(0, 0, 0, .55);
    --pt-shadow:          0 10px 30px -8px rgba(0, 0, 0, .55);
    --pt-shadow-lg:       0 28px 68px -16px rgba(0, 0, 0, .70);
    --pt-shadow-xl:       0 44px 96px -24px rgba(0, 0, 0, .78);
    --pt-shadow-card:     0 0 0 1px var(--pt-border),
                          0 24px 64px -20px rgba(0, 0, 0, .75),
                          0 2px 8px -2px rgba(0, 0, 0, .4);
    --pt-glow-brand:      0 0 0 1px var(--pt-brand-ring), 0 16px 40px -12px rgba(16, 185, 129, .55);
    --pt-glow-brand-xl:   0 0 0 1px rgba(16, 185, 129, .45),
                          0 0 28px -4px rgba(16, 185, 129, .45),
                          0 22px 60px -18px rgba(16, 185, 129, .70);

    --pt-inset-translucent: rgba(15, 23, 42, .38);
    --pt-auth-glow-a:     rgba(16, 185, 129, .16);
    --pt-auth-glow-b:     rgba(59, 130, 246, .12);
    --pt-alert-bg:        radial-gradient(32rem 16rem at 4% -40%, rgba(239, 68, 68, .22), transparent 64%),
                          linear-gradient(120deg, #2a1416, #1e1113 62%);
    --pt-alert-icon-bg:   rgba(239, 68, 68, .16);
    --pt-alert-icon-fg:   #fca5a5;
    --pt-alert-title:     #fecaca;
    --pt-alert-sub:       rgba(254, 202, 202, .72);
    }
}

/* --------------------------------------------------------------------------
   Camada 3 — manual: o atributo posto pelo JS sempre vence.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
    --pt-bg:              #0a1020;
    --pt-bg-deep:         #0b1120;
    --pt-bg-elev:         #131f38;
    --pt-card:            #1e293b;
    --pt-card-hover:      #24334a;
    --pt-card-inset:      #17233a;

    --pt-border:          rgba(148, 163, 184, .14);
    --pt-border-strong:   rgba(148, 163, 184, .28);
    --pt-divider:         rgba(148, 163, 184, .10);

    --pt-text:            #e2e8f0;
    --pt-text-strong:     #f8fafc;
    --pt-text-dim:        #cbd5e1;
    --pt-text-mute:       #94a3b8;

    --pt-brand:           #10B981;
    --pt-brand-hover:     #34d399;
    --pt-brand-active:    #059669;
    --pt-brand-soft:      rgba(16, 185, 129, .12);
    --pt-brand-ring:      rgba(16, 185, 129, .32);
    --pt-on-brand:        #05261b;
    --pt-on-danger:       #ffffff;

    --pt-amber:           #f59e0b;
    --pt-amber-soft:      rgba(245, 158, 11, .12);
    --pt-amber-ring:      rgba(245, 158, 11, .30);
    --pt-red:             #f87171;
    --pt-red-surface:     #dc2626;
    --pt-red-soft:        rgba(239, 68, 68, .12);
    --pt-red-ring:        rgba(239, 68, 68, .30);
    --pt-blue:            #3b82f6;
    --pt-blue-soft:       rgba(59, 130, 246, .12);
    --pt-violet:          #8b5cf6;
    --pt-violet-soft:     rgba(139, 92, 246, .12);

    --pt-shadow-sm:       0 1px 2px rgba(0, 0, 0, .40),
                          0 10px 28px -14px rgba(0, 0, 0, .55);
    --pt-shadow:          0 10px 30px -8px rgba(0, 0, 0, .55);
    --pt-shadow-lg:       0 28px 68px -16px rgba(0, 0, 0, .70);
    --pt-shadow-xl:       0 44px 96px -24px rgba(0, 0, 0, .78);
    --pt-shadow-card:     0 0 0 1px var(--pt-border),
                          0 24px 64px -20px rgba(0, 0, 0, .75),
                          0 2px 8px -2px rgba(0, 0, 0, .4);
    --pt-glow-brand:      0 0 0 1px var(--pt-brand-ring), 0 16px 40px -12px rgba(16, 185, 129, .55);
    --pt-glow-brand-xl:   0 0 0 1px rgba(16, 185, 129, .45),
                          0 0 28px -4px rgba(16, 185, 129, .45),
                          0 22px 60px -18px rgba(16, 185, 129, .70);

    --pt-inset-translucent: rgba(15, 23, 42, .38);
    --pt-auth-glow-a:     rgba(16, 185, 129, .16);
    --pt-auth-glow-b:     rgba(59, 130, 246, .12);
    --pt-alert-bg:        radial-gradient(32rem 16rem at 4% -40%, rgba(239, 68, 68, .22), transparent 64%),
                          linear-gradient(120deg, #2a1416, #1e1113 62%);
    --pt-alert-icon-bg:   rgba(239, 68, 68, .16);
    --pt-alert-icon-fg:   #fca5a5;
    --pt-alert-title:     #fecaca;
    --pt-alert-sub:       rgba(254, 202, 202, .72);
}

:root[data-theme="light"] {
    /* --- Surfaces --- */
    --pt-bg:              #e9eef5;
    --pt-bg-deep:         #dde4ee;
    --pt-bg-elev:         #ffffff;
    --pt-card:            #ffffff;
    --pt-card-hover:      #f8fafc;
    --pt-card-inset:      #f4f7fb;

    /* --- Lines --- */
    --pt-border:          rgba(15, 23, 42, .10);
    --pt-border-strong:   rgba(15, 23, 42, .18);
    --pt-divider:         rgba(15, 23, 42, .07);

    /* --- Type --- */
    --pt-text:            #1e293b;
    --pt-text-strong:     #0f172a;
    --pt-text-dim:        #475569;
    --pt-text-mute:       #5b6a80;

    /* --- Brand --- */
    --pt-brand:           #047857;
    --pt-brand-hover:     #036b4d;
    --pt-brand-active:    #025c42;
    --pt-brand-soft:      rgba(16, 185, 129, .10);
    --pt-brand-ring:      rgba(16, 185, 129, .28);
    --pt-on-brand:        #ffffff;
    --pt-on-danger:       #ffffff;

    /* --- Semantic --- */
    --pt-amber:           #a1490a;
    --pt-amber-soft:      rgba(245, 158, 11, .10);
    --pt-amber-ring:      rgba(245, 158, 11, .30);
    --pt-red:             #b91c1c;
    --pt-red-surface:     #b91c1c;
    --pt-red-soft:        rgba(239, 68, 68, .09);
    --pt-red-ring:        rgba(239, 68, 68, .28);
    --pt-blue:            #2563eb;
    --pt-blue-soft:       rgba(59, 130, 246, .09);
    --pt-violet:          #7c3aed;
    --pt-violet-soft:     rgba(139, 92, 246, .09);

    /* --- Elevation --- */
    --pt-shadow-sm:       0 1px 2px rgba(15, 23, 42, .05),
                          0 10px 28px -14px rgba(15, 23, 42, .20);
    --pt-shadow:          0 2px 4px rgba(15, 23, 42, .05),
                          0 18px 44px -16px rgba(15, 23, 42, .24);
    --pt-shadow-lg:       0 28px 68px -20px rgba(15, 23, 42, .26);
    --pt-shadow-xl:       0 44px 96px -28px rgba(15, 23, 42, .30);
    --pt-shadow-card:     0 0 0 1px var(--pt-border),
                          0 24px 64px -26px rgba(15, 23, 42, .28),
                          0 2px 8px -3px rgba(15, 23, 42, .14);
    --pt-glow-brand:      0 0 0 1px var(--pt-brand-ring), 0 16px 40px -14px rgba(16, 185, 129, .40);
    --pt-glow-brand-xl:   0 0 0 1px rgba(16, 185, 129, .40),
                          0 0 28px -6px rgba(16, 185, 129, .35),
                          0 22px 60px -20px rgba(16, 185, 129, .45);

    /* --- Tokens de componente (evitam seletores de tema espalhados) --- */
    --pt-inset-translucent: rgba(255, 255, 255, .72);
    --pt-auth-glow-a:     rgba(16, 185, 129, .12);
    --pt-auth-glow-b:     rgba(59, 130, 246, .10);
    --pt-alert-bg:        linear-gradient(120deg, #fff5f5, #fff9f2 62%);
    --pt-alert-icon-bg:   rgba(239, 68, 68, .10);
    --pt-alert-icon-fg:   #dc2626;
    --pt-alert-title:     #991b1b;
    --pt-alert-sub:       #b45309;
}

/* ==========================================================================
   2. GLOBAL SHELL
   The two redesigned pages live inside the stock header/footer, so the shell
   has to follow them into dark mode or the result reads as broken.
   ========================================================================== */

html { color-scheme: light; }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) { color-scheme: dark; }
}
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

body.primary-bg-color,
body {
    background: var(--pt-bg) !important;
    color: var(--pt-text);
    font-family: var(--pt-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Ambient depth — two very soft brand washes behind the content. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(60rem 30rem at 12% -8%, rgba(16, 185, 129, .10), transparent 60%),
        radial-gradient(50rem 28rem at 92% 4%, rgba(59, 130, 246, .08), transparent 62%);
}
/* Camadas explicitas. A regra generica antiga (body > * { z-index: 1 })
   colocava o header e o #main-body no mesmo nivel - e como o #main-body vem
   depois no DOM, ele pintava por cima dos dropdowns do menu. */
body > * { position: relative; }
#header                 { position: relative; z-index: 9999; }
.master-breadcrumb      { position: relative; z-index: 9990; }
/* #main-body NAO pode ter z-index: isso cria um contexto de empilhamento, e
   o modal que vive dentro dele passa a competir com o .modal-backdrop pelo
   z-index do PROPRIO #main-body, nao pelo seu. Era o que deixava o fundo
   escuro por cima do modal de remover item do carrinho, engolindo o clique.
   O header ja fica por cima com o 9999 acima - nao precisa de nada aqui. */
#main-body              { position: relative; }
#footer, .footer        { position: relative; }

#main-body {
    background: transparent !important;
    padding-top: 28px;
    padding-bottom: 56px;
}

/* --- Header / navigation --- */
#header .topbar {
    background: var(--pt-bg-deep) !important;
    border-bottom: 1px solid var(--pt-divider);
}
#header .navbar,
#header .navbar.navbar-light {
    background: var(--pt-bg-deep) !important;
    border-bottom: 1px solid var(--pt-border);
}
#header .navbar .nav-link,
#header .topbar .btn,
#header .navbar-nav > li > a {
    color: var(--pt-text-dim) !important;
    transition: color var(--pt-speed) var(--pt-ease);
}
#header .navbar .nav-link:hover,
#header .navbar .nav-link:focus,
#header .navbar-nav > li > a:hover,
#header .topbar .btn:hover {
    color: var(--pt-text-strong) !important;
}
#header .navbar .nav-item.active > .nav-link {
    color: var(--pt-brand) !important;
}
.btn-active-client,
.active-client .input-group-text {
    background: var(--pt-card) !important;
    border-color: var(--pt-border) !important;
    color: var(--pt-text) !important;
}

/* --- Sidebars --- */
.panel.panel-sidebar,
.card.card-sidebar,
#main-body .panel,
#secondary-sidebar .panel {
    background: var(--pt-card);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    box-shadow: var(--pt-shadow-sm);
    color: var(--pt-text);
    overflow: hidden;
}
.panel-sidebar .panel-heading,
.card-sidebar .card-header {
    background: var(--pt-card-inset) !important;
    border-bottom: 1px solid var(--pt-divider) !important;
    color: var(--pt-text-strong) !important;
}
.list-group-item {
    background: transparent !important;
    border-color: var(--pt-divider) !important;
    color: var(--pt-text-dim) !important;
    transition: background var(--pt-speed) var(--pt-ease), color var(--pt-speed) var(--pt-ease);
}
.list-group-item:hover,
.list-group-item-action:hover {
    background: var(--pt-card-hover) !important;
    color: var(--pt-text-strong) !important;
}
.list-group-item.active {
    background: var(--pt-brand-soft) !important;
    color: var(--pt-brand) !important;
    border-color: var(--pt-border) !important;
}

/* --- Footer --- */
#footer,
.footer {
    background: var(--pt-bg-deep) !important;
    border-top: 1px solid var(--pt-border);
    color: var(--pt-text-mute);
}
#footer a { color: var(--pt-text-dim); }
#footer a:hover { color: var(--pt-brand); }

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 { color: var(--pt-text-strong); }
a { color: var(--pt-brand); transition: color var(--pt-speed) var(--pt-ease); }
a:hover, a:focus { color: var(--pt-brand-hover); text-decoration: none; }
hr { border-top-color: var(--pt-divider); }
.text-muted { color: var(--pt-text-mute) !important; }

/* --- Focus ring (accessibility) --- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--pt-brand);
    outline-offset: 2px;
    border-radius: var(--pt-radius-sm);
}


/* ==========================================================================
   3. PRIMITIVES — buttons, alerts, badges, forms, dropdowns
   ========================================================================== */

/* --- Buttons --- */
.pt-scope .btn,
.btn {
    border-radius: var(--pt-radius-sm);
    font-weight: 600;
    letter-spacing: .01em;
    transition: background var(--pt-speed) var(--pt-ease),
                border-color var(--pt-speed) var(--pt-ease),
                color var(--pt-speed) var(--pt-ease),
                transform var(--pt-speed) var(--pt-ease),
                box-shadow var(--pt-speed) var(--pt-ease);
}
.pt-scope .btn:active { transform: translateY(1px); }

.pt-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .68rem 1.15rem;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: var(--pt-radius-sm);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--pt-speed) var(--pt-ease);
}
.pt-btn i { font-size: .95em; }
.pt-btn--block { width: 100%; }
.pt-btn--sm { padding: .45rem .8rem; font-size: .8rem; }
.pt-btn--lg { padding: .85rem 1.6rem; font-size: .95rem; }

.pt-btn--primary {
    background: var(--pt-brand);
    border-color: var(--pt-brand);
    color: var(--pt-on-brand);
    box-shadow: 0 6px 18px -8px var(--pt-brand-ring);
}
.pt-btn--primary:hover,
.pt-btn--primary:focus {
    background: var(--pt-brand-hover);
    border-color: var(--pt-brand-hover);
    color: var(--pt-on-brand);
    transform: translateY(-1px);
    box-shadow: var(--pt-glow-brand);
}
.pt-btn--primary:active { transform: translateY(0); background: var(--pt-brand-active); }

.pt-btn--ghost {
    background: transparent;
    border-color: var(--pt-border-strong);
    color: var(--pt-text-dim);
}
.pt-btn--ghost:hover {
    background: var(--pt-card-hover);
    border-color: var(--pt-brand);
    color: var(--pt-text-strong);
}

.pt-btn--soft {
    background: var(--pt-brand-soft);
    border-color: var(--pt-brand-ring);
    color: var(--pt-brand);
}
.pt-btn--soft:hover { background: var(--pt-brand); color: var(--pt-on-brand); }

.pt-btn--amber {
    background: var(--pt-amber);
    border-color: var(--pt-amber);
    color: #2b1a00;
}
.pt-btn--amber:hover { filter: brightness(1.08); color: #2b1a00; transform: translateY(-1px); }

.pt-btn--danger {
    background: transparent;
    border-color: var(--pt-red-ring);
    color: var(--pt-red);
}
.pt-btn--danger:hover { background: var(--pt-red); border-color: var(--pt-red); color: var(--pt-on-danger); }

.pt-btn.disabled,
.pt-btn[disabled] { opacity: .5; pointer-events: none; }

/* --- Alerts --- */
.pt-scope .alert,
#main-body .alert {
    border-radius: var(--pt-radius);
    border: 1px solid var(--pt-border);
    background: var(--pt-card);
    color: var(--pt-text);
    box-shadow: var(--pt-shadow-sm);
    padding: 1rem 1.15rem;
}
#main-body .alert-success { border-left: 3px solid var(--pt-brand); background: var(--pt-brand-soft); color: var(--pt-text); }
#main-body .alert-info    { border-left: 3px solid var(--pt-blue);  background: var(--pt-blue-soft);  color: var(--pt-text); }
#main-body .alert-warning { border-left: 3px solid var(--pt-amber); background: var(--pt-amber-soft); color: var(--pt-text); }
#main-body .alert-danger,
#main-body .alert-error   { border-left: 3px solid var(--pt-red);   background: var(--pt-red-soft);   color: var(--pt-text); }

/* --- Badges --- */
.pt-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .22rem .6rem;
    border-radius: var(--pt-radius-pill);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.5;
}
.pt-badge--brand  { background: var(--pt-brand-soft);  color: var(--pt-brand);  border: 1px solid var(--pt-brand-ring); }
.pt-badge--amber  { background: var(--pt-amber-soft);  color: var(--pt-amber);  border: 1px solid var(--pt-amber-ring); }
.pt-badge--red    { background: var(--pt-red-soft);    color: var(--pt-red);    border: 1px solid var(--pt-red-ring); }
.pt-badge--blue   { background: var(--pt-blue-soft);   color: var(--pt-blue);   border: 1px solid var(--pt-border-strong); }
.pt-badge--muted  { background: var(--pt-card-inset);  color: var(--pt-text-mute); border: 1px solid var(--pt-border); }

/* --- Forms --- */
#main-body .form-control,
#main-body .custom-select {
    background: var(--pt-card-inset);
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius-sm);
    color: var(--pt-text);
    transition: border-color var(--pt-speed) var(--pt-ease), box-shadow var(--pt-speed) var(--pt-ease);
}
#main-body .form-control:focus {
    background: var(--pt-card-inset);
    border-color: var(--pt-brand);
    box-shadow: 0 0 0 3px var(--pt-brand-ring);
    color: var(--pt-text);
}
#main-body .form-control::placeholder { color: var(--pt-text-mute); }
#main-body label,
#main-body .col-form-label { color: var(--pt-text-dim); }

/* --- Tables --- */
#main-body .table { color: var(--pt-text); }
#main-body .table th {
    border-color: var(--pt-divider) !important;
    color: var(--pt-text-mute);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
#main-body .table td { border-color: var(--pt-divider) !important; }
#main-body .table-hover tbody tr:hover { background: var(--pt-card-hover); color: var(--pt-text-strong); }

/* --- Dropdowns (used for the retention menu) --- */
.pt-scope .dropdown-menu {
    background: var(--pt-bg-elev);
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius);
    box-shadow: var(--pt-shadow-lg);
    padding: .4rem;
    min-width: 230px;
    animation: ptFadeSlide .18s var(--pt-ease);
}
.pt-scope .dropdown-item {
    border-radius: var(--pt-radius-sm);
    color: var(--pt-text-dim);
    font-size: .85rem;
    font-weight: 500;
    padding: .58rem .7rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    transition: background var(--pt-speed) var(--pt-ease), color var(--pt-speed) var(--pt-ease);
}
.pt-scope .dropdown-item:hover,
.pt-scope .dropdown-item:focus {
    background: var(--pt-card-hover);
    color: var(--pt-text-strong);
}
.pt-scope .dropdown-item--danger { color: var(--pt-text-mute); }
.pt-scope .dropdown-item--danger:hover,
.pt-scope .dropdown-item--danger:focus {
    background: var(--pt-red-soft);
    color: var(--pt-red);
}
.pt-scope .dropdown-item.disabled { opacity: .45; pointer-events: none; }
.pt-scope .dropdown-header {
    color: var(--pt-text-mute);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .55rem .7rem .3rem;
}
.pt-scope .dropdown-divider { border-top-color: var(--pt-divider); margin: .35rem .2rem; }

@keyframes ptFadeSlide {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ==========================================================================
   4. PAGE HEADER + THEME TOGGLE
   ========================================================================== */

.pt-pagehead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}
.pt-pagehead__eyebrow {
    display: block;
    color: var(--pt-brand);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: .4rem;
}
.pt-pagehead__title {
    margin: 0;
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--pt-text-strong);
    line-height: 1.15;
}
.pt-pagehead__sub {
    margin: .45rem 0 0;
    color: var(--pt-text-dim);
    font-size: .92rem;
}
.pt-pagehead__actions { display: flex; align-items: center; gap: .6rem; }

/* --- Toggle --- */
.pt-themetoggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 40px;
    padding: 0 .95rem;
    background: var(--pt-card);
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius-pill);
    color: var(--pt-text-dim);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--pt-speed) var(--pt-ease);
}
.pt-themetoggle:hover {
    color: var(--pt-text-strong);
    border-color: var(--pt-brand);
    background: var(--pt-card-hover);
}
.pt-themetoggle i { font-size: .95rem; }
/* O rotulo mostra o tema para o qual o clique VAI mudar, nao o atual.
   Precisa das tres camadas: base clara, automatico do SO, escolha manual. */
.pt-themetoggle .pt-themetoggle__dark,
.pt-themetoggle .pt-themetoggle__light { display: none; }

/* base = claro -> oferece escuro */
.pt-themetoggle .pt-themetoggle__dark { display: inline-flex; align-items: center; gap: .5rem; }

/* SO escuro (sem escolha manual por claro) -> oferece claro */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .pt-themetoggle .pt-themetoggle__dark { display: none; }
    html:not([data-theme="light"]) .pt-themetoggle .pt-themetoggle__light { display: inline-flex; align-items: center; gap: .5rem; }
}

/* escolha manual vence os dois de cima */
html[data-theme="dark"] .pt-themetoggle .pt-themetoggle__dark { display: none; }
html[data-theme="dark"] .pt-themetoggle .pt-themetoggle__light { display: inline-flex; align-items: center; gap: .5rem; }
html[data-theme="light"] .pt-themetoggle .pt-themetoggle__light { display: none; }
html[data-theme="light"] .pt-themetoggle .pt-themetoggle__dark { display: inline-flex; align-items: center; gap: .5rem; }


/* ==========================================================================
   5. DASHBOARD — stat tiles
   ========================================================================== */

.pt-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}
@media (max-width: 991px) { .pt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } }
@media (max-width: 575px) {
    .pt-stat { padding: 1.05rem 1.05rem .95rem; }
    .pt-stat__icon { width: 34px; height: 34px; margin-bottom: .7rem; font-size: .9rem; }
    .pt-stat__value { font-size: 1.7rem; }
}
@media (max-width: 359px) { .pt-stats { grid-template-columns: 1fr; } }

.pt-stat {
    position: relative;
    display: block;
    padding: 1.35rem 1.4rem 1.25rem;
    background: var(--pt-card);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    box-shadow: var(--pt-shadow-sm);
    overflow: hidden;
    text-decoration: none;
    isolation: isolate;
    transition: transform var(--pt-speed) var(--pt-ease),
                border-color var(--pt-speed) var(--pt-ease),
                box-shadow var(--pt-speed) var(--pt-ease),
                background var(--pt-speed) var(--pt-ease);
}
.pt-stat::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    background: radial-gradient(22rem 12rem at 100% 0%, var(--pt-stat-tint, var(--pt-brand-soft)), transparent 70%);
    transition: opacity var(--pt-speed) var(--pt-ease);
}
.pt-stat:hover {
    transform: translateY(-3px);
    border-color: var(--pt-stat-accent, var(--pt-brand));
    box-shadow: var(--pt-shadow-lg);
    text-decoration: none;
}
.pt-stat:hover::after { opacity: 1; }

.pt-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: .95rem;
    border-radius: var(--pt-radius-sm);
    background: var(--pt-stat-tint, var(--pt-brand-soft));
    color: var(--pt-stat-accent, var(--pt-brand));
    font-size: 1rem;
}
.pt-stat__value {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--pt-text-strong);
    font-variant-numeric: tabular-nums;
}
.pt-stat__label {
    margin-top: .4rem;
    color: var(--pt-text-dim);
    font-size: .82rem;
    font-weight: 500;
}
.pt-stat__bar {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: var(--pt-stat-accent, var(--pt-brand));
    opacity: .55;
    transition: opacity var(--pt-speed) var(--pt-ease);
}
.pt-stat:hover .pt-stat__bar { opacity: 1; }

.pt-stat--services { --pt-stat-accent: var(--pt-brand);  --pt-stat-tint: var(--pt-brand-soft); }
.pt-stat--domains  { --pt-stat-accent: var(--pt-blue);   --pt-stat-tint: var(--pt-blue-soft); }
.pt-stat--quotes   { --pt-stat-accent: var(--pt-violet); --pt-stat-tint: var(--pt-violet-soft); }
.pt-stat--tickets  { --pt-stat-accent: var(--pt-violet); --pt-stat-tint: var(--pt-violet-soft); }
.pt-stat--invoices { --pt-stat-accent: var(--pt-amber);  --pt-stat-tint: var(--pt-amber-soft); }

/* Services tile is the hero of the dashboard. */
.pt-stat--services {
    background: linear-gradient(150deg, var(--pt-brand-soft), var(--pt-card) 46%);
    border-color: var(--pt-brand-ring);
}
.pt-stat--services .pt-stat__value { color: var(--pt-brand); }
.pt-stat--services .pt-stat__bar { opacity: 1; }

/* Unpaid invoices demand attention only when there actually are any. */
.pt-stat--invoices.is-due {
    background: linear-gradient(150deg, var(--pt-amber-soft), var(--pt-card) 46%);
    border-color: var(--pt-amber-ring);
}
.pt-stat--invoices.is-due .pt-stat__value { color: var(--pt-amber); }
.pt-stat--invoices.is-due .pt-stat__icon {
    background: var(--pt-amber);
    color: #2b1a00;
}


/* ==========================================================================
   6. DASHBOARD — home panel cards
   The $panels output is untouched; only the shell around it changed.
   ========================================================================== */

.pt-panels { display: block; }
.pt-panels__full { display: block; }

.pt-panels__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 991px) { .pt-panels__grid { grid-template-columns: 1fr; gap: 1rem; } }

.pt-panels__col { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
@media (max-width: 991px) { .pt-panels__col { gap: 1rem; } }

/* --- The card itself --- */
.pt-panels .card,
.pt-panel {
    position: relative;
    background: var(--pt-card);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    box-shadow: var(--pt-shadow-sm);
    color: var(--pt-text);
    overflow: hidden;
    margin: 0;
    transition: transform var(--pt-speed) var(--pt-ease),
                border-color var(--pt-speed) var(--pt-ease),
                box-shadow var(--pt-speed) var(--pt-ease);
}
.pt-panels__full .pt-panel { margin-bottom: 1.25rem; }
.pt-panel:hover {
    border-color: var(--pt-border-strong);
    box-shadow: var(--pt-shadow);
}

/* Accent rail — colour comes from the panel's own getExtra('color'). */
.pt-panel::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--pt-panel-accent, var(--pt-border-strong));
    opacity: .85;
}
.pt-panel.card-accent-green  { --pt-panel-accent: var(--pt-brand); }
.pt-panel.card-accent-blue   { --pt-panel-accent: var(--pt-blue); }
.pt-panel.card-accent-red    { --pt-panel-accent: var(--pt-red); }
.pt-panel.card-accent-gold,
.pt-panel.card-accent-orange { --pt-panel-accent: var(--pt-amber); }
.pt-panel.card-accent-purple { --pt-panel-accent: var(--pt-violet); }

.pt-panel .card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--pt-divider) !important;
    padding: 1.05rem 1.3rem;
}
.pt-panel .card-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--pt-text-strong);
    margin: 0;
}
.pt-panel .card-title > i {
    color: var(--pt-panel-accent, var(--pt-brand));
    font-size: .95rem;
    width: 1.1em;
    text-align: center;
}
.pt-panel .card-title .badge {
    background: var(--pt-card-inset);
    color: var(--pt-text-dim);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-pill);
    font-size: .68rem;
    font-weight: 700;
    padding: .22rem .55rem;
}
.pt-panel .card-title .float-right {
    order: 1;            /* button is first in WHMCS markup - push it past the label */
    margin-left: auto;
    float: none;
}
.pt-panel .card-title .float-right .btn {
    text-decoration: none;
    background: var(--pt-brand-soft) !important;
    border: 1px solid var(--pt-brand-ring) !important;
    color: var(--pt-brand) !important;
    border-radius: var(--pt-radius-pill);
    font-size: .72rem;
    font-weight: 600;
    padding: .3rem .75rem;
}
.pt-panel .card-title .float-right .btn:hover {
    background: var(--pt-brand) !important;
    color: var(--pt-on-brand) !important;
}

.pt-panel .card-body { padding: 1.15rem 1.3rem; color: var(--pt-text-dim); font-size: .88rem; }
.pt-panel .card-body a { color: var(--pt-brand); }
.pt-panel .card-body p:last-child { margin-bottom: 0; }

.pt-panel .list-group { border-radius: 0; }
.pt-panel .list-group-item {
    display: block;
    text-decoration: none;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--pt-divider) !important;
    padding: .8rem 1.3rem;
    font-size: .86rem;
    color: var(--pt-text-dim) !important;
}
.pt-panel .list-group-item:first-child { border-top: 0 !important; }
.pt-panel .list-group-item i { color: var(--pt-text-mute); width: 1.1em; text-align: center; }
.pt-panel .list-group-item:hover i { color: var(--pt-panel-accent, var(--pt-brand)); }
.pt-panel .list-group-item .badge {
    float: right;
    background: var(--pt-card-inset);
    border: 1px solid var(--pt-border);
    color: var(--pt-text-dim);
    border-radius: var(--pt-radius-pill);
    padding: .2rem .55rem;
    font-size: .68rem;
}

.pt-panel .card-footer {
    background: var(--pt-card-inset) !important;
    border-top: 1px solid var(--pt-divider) !important;
    padding: .85rem 1.3rem;
    font-size: .82rem;
    color: var(--pt-text-mute);
}
/* WHMCS always emits the footer div; collapse it when it has nothing in it. */
.pt-panel .card-footer:empty { display: none; }

/* --- Emphasis: Active Services --- */
.pt-panel--services {
    border-color: var(--pt-brand-ring);
    box-shadow: 0 0 0 1px var(--pt-brand-ring), var(--pt-shadow);
    background:
        linear-gradient(160deg, var(--pt-brand-soft), transparent 38%),
        var(--pt-card);
}
.pt-panel--services::before { background: var(--pt-brand); opacity: 1; height: 3px; }
.pt-panel--services .card-title,
.pt-panel--services .card-title > i { color: var(--pt-brand); }
.pt-panel--services .list-group-item:hover { background: var(--pt-brand-soft) !important; }

/* --- Emphasis: Unpaid Invoices (amber alert, red when overdue) --- */
.pt-panel--invoices {
    border-color: var(--pt-amber-ring);
    box-shadow: 0 0 0 1px var(--pt-amber-ring), var(--pt-shadow);
    background:
        linear-gradient(160deg, var(--pt-amber-soft), transparent 38%),
        var(--pt-card);
}
.pt-panel--invoices::before { background: var(--pt-amber); opacity: 1; height: 3px; }
.pt-panel--invoices .card-title,
.pt-panel--invoices .card-title > i { color: var(--pt-amber); }
.pt-panel--invoices .card-title .badge {
    background: var(--pt-amber);
    border-color: var(--pt-amber);
    color: #2b1a00;
}
.pt-panel--invoices .card-title .float-right .btn {
    background: var(--pt-amber) !important;
    border-color: var(--pt-amber) !important;
    color: #2b1a00 !important;
}
.pt-panel--invoices .card-title .float-right .btn:hover { filter: brightness(1.1); }
.pt-panel--invoices .list-group-item:hover { background: var(--pt-amber-soft) !important; }
.pt-panel--invoices .list-group-item .badge {
    background: var(--pt-amber-soft);
    border-color: var(--pt-amber-ring);
    color: var(--pt-amber);
}

.pt-panel--invoices.is-overdue {
    border-color: var(--pt-red-ring);
    box-shadow: 0 0 0 1px var(--pt-red-ring), var(--pt-shadow);
    background: linear-gradient(160deg, var(--pt-red-soft), transparent 38%), var(--pt-card);
}
.pt-panel--invoices.is-overdue::before { background: var(--pt-red); }
.pt-panel--invoices.is-overdue .card-title,
.pt-panel--invoices.is-overdue .card-title > i { color: var(--pt-red); }

/* --- Addon / hook output --- */
.pt-addons > div + div { margin-top: 1.25rem; }
.pt-addons .card,
.pt-addons .panel {
    background: var(--pt-card);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    color: var(--pt-text);
}


/* ==========================================================================
   7. PRODUCT DETAILS — hero
   ========================================================================== */

.pt-service { display: block; }

.pt-hero {
    position: relative;
    padding: 1.75rem;
    margin-bottom: 1.5rem;
    background:
        radial-gradient(38rem 20rem at 88% -30%, var(--pt-brand-soft), transparent 62%),
        var(--pt-card);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-lg);
    box-shadow: var(--pt-shadow);
    overflow: hidden;
}
.pt-hero::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--pt-brand), transparent 65%);
}
@media (max-width: 575px) { .pt-hero { padding: 1.25rem; } }

.pt-hero__top {
    display: flex;
    align-items: flex-start;
    gap: 1.15rem;
    flex-wrap: wrap;
}
.pt-hero__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: var(--pt-radius);
    background: var(--pt-brand-soft);
    border: 1px solid var(--pt-brand-ring);
    color: var(--pt-brand);
    font-size: 1.4rem;
}
.pt-hero__id { flex: 1 1 260px; min-width: 0; }
.pt-hero__group {
    display: block;
    color: var(--pt-text-mute);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: .3rem;
}
.pt-hero__name {
    margin: 0;
    font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--pt-text-strong);
    line-height: 1.2;
    word-break: break-word;
}
.pt-hero__meta {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: .65rem;
}
.pt-hero__domain {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--pt-text-dim);
    font-size: .85rem;
}
.pt-hero__actions {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    margin-left: auto;
}
@media (max-width: 767px) { .pt-hero__actions { margin-left: 0; width: 100%; } }

/* --- Status pill --- */
.pt-status {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .75rem;
    border-radius: var(--pt-radius-pill);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: var(--pt-card-inset);
    border: 1px solid var(--pt-border);
    color: var(--pt-text-dim);
}
.pt-status__dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}
.pt-status--active {
    background: var(--pt-brand-soft);
    border-color: var(--pt-brand-ring);
    color: var(--pt-brand);
}
.pt-status--active .pt-status__dot {
    box-shadow: 0 0 0 0 var(--pt-brand-ring);
    animation: ptPulse 2.4s infinite;
}
.pt-status--pending {
    background: var(--pt-blue-soft);
    border-color: var(--pt-border-strong);
    color: var(--pt-blue);
}
.pt-status--suspended {
    background: var(--pt-amber-soft);
    border-color: var(--pt-amber-ring);
    color: var(--pt-amber);
}
.pt-status--terminated,
.pt-status--cancelled,
.pt-status--fraud {
    background: var(--pt-red-soft);
    border-color: var(--pt-red-ring);
    color: var(--pt-red);
}

@keyframes ptPulse {
    0%   { box-shadow: 0 0 0 0 var(--pt-brand-ring); }
    70%  { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* --- Discrete "Ações" gear --- */
.pt-gear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    height: 40px;
    min-width: 40px;
    padding: 0 .8rem;
    background: transparent;
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius-sm);
    color: var(--pt-text-mute);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--pt-speed) var(--pt-ease);
}
.pt-gear:hover,
.pt-gear:focus,
.show > .pt-gear {
    background: var(--pt-card-hover);
    border-color: var(--pt-border-strong);
    color: var(--pt-text-strong);
}
.pt-gear::after { display: none; }   /* kill Bootstrap's caret */
.pt-gear__label { display: inline; }
@media (max-width: 575px) { .pt-gear__label { display: none; } }


/* --- Hero compacto: usado quando o spotlight do app ja abriu a pagina --- */
.pt-hero--compact {
    padding: 1.35rem 1.5rem;
    border-radius: var(--pt-radius);
    background: var(--pt-card);
    box-shadow: var(--pt-shadow-sm);
}
.pt-hero--compact::before { opacity: .35; }
.pt-hero--compact .pt-hero__icon {
    width: 42px;
    height: 42px;
    font-size: 1.05rem;
    border-radius: var(--pt-radius-sm);
}
.pt-hero--compact .pt-hero__name { font-size: clamp(1.1rem, .95rem + .7vw, 1.35rem); }
.pt-hero--compact .pt-meta { margin-top: 1.15rem; }
@media (max-width: 575px) { .pt-hero--compact { padding: 1.1rem; } }


/* ==========================================================================
   8. PRODUCT DETAILS — billing meta grid
   ========================================================================== */

.pt-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
    margin-top: 1.6rem;
    background: var(--pt-border);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    overflow: hidden;
}
.pt-meta__cell {
    background: var(--pt-card);
    padding: .95rem 1.05rem;
    min-width: 0;
}
.pt-meta__label {
    display: block;
    color: var(--pt-text-mute);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .38rem;
}
.pt-meta__value {
    color: var(--pt-text-strong);
    font-size: .95rem;
    font-weight: 600;
    word-break: break-word;
}
.pt-meta__value--brand { color: var(--pt-brand); }
.pt-meta__value--amber { color: var(--pt-amber); }
.pt-meta__cell--warn { background: var(--pt-amber-soft); }
.pt-meta__cell--warn .pt-meta__value { color: var(--pt-amber); }


/* ==========================================================================
   9. SYNCBOX SPOTLIGHT
   The module's own client area output is the point of this page — it gets
   the largest, brightest surface and sits above everything else.
   ========================================================================== */

.pt-spotlight {
    position: relative;
    margin-bottom: 1.5rem;
    background:
        radial-gradient(46rem 24rem at 14% -20%, rgba(16, 185, 129, .16), transparent 60%),
        radial-gradient(38rem 22rem at 92% 120%, rgba(59, 130, 246, .10), transparent 62%),
        var(--pt-card);
    border: 1px solid var(--pt-brand-ring);
    border-radius: var(--pt-radius-lg);
    box-shadow: var(--pt-glow-brand), var(--pt-shadow-lg);
    overflow: hidden;
}
.pt-spotlight::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--pt-brand), var(--pt-blue));
}

.pt-spotlight__head {
    display: flex;
    align-items: center;
    gap: .85rem;
    flex-wrap: wrap;
    padding: 1.4rem 1.75rem;
    border-bottom: 1px solid var(--pt-divider);
}
.pt-spotlight__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--pt-radius-sm);
    background: var(--pt-brand);
    color: var(--pt-on-brand);
    font-size: 1.05rem;
    box-shadow: 0 8px 22px -8px var(--pt-brand-ring);
}
.pt-spotlight__titles { min-width: 0; }
.pt-spotlight__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--pt-text-strong);
}
.pt-spotlight__sub {
    margin: .18rem 0 0;
    color: var(--pt-text-dim);
    font-size: .84rem;
}
.pt-spotlight__badge { margin-left: auto; }
@media (max-width: 767px) { .pt-spotlight__badge { margin-left: 0; } }

.pt-spotlight__body { padding: 1.75rem; }
@media (max-width: 575px) {
    .pt-spotlight__head { padding: 1.1rem 1.15rem; }
    .pt-spotlight__body { padding: 1.15rem; }
}

/* --- Taming whatever markup the module prints --- */
.pt-modulearea { color: var(--pt-text); text-align: left; font-size: .92rem; }
.pt-modulearea h1,
.pt-modulearea h2,
.pt-modulearea h3,
.pt-modulearea h4,
.pt-modulearea h5 { color: var(--pt-text-strong); letter-spacing: -.01em; }
.pt-modulearea hr { border-top-color: var(--pt-divider); }
.pt-modulearea code,
.pt-modulearea kbd,
.pt-modulearea pre {
    background: var(--pt-card-inset);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
    color: var(--pt-brand);
    padding: .18rem .45rem;
    font-size: .88em;
}
.pt-modulearea pre { padding: .9rem 1rem; overflow-x: auto; }
.pt-modulearea .well,
.pt-modulearea .panel,
.pt-modulearea .card {
    background: var(--pt-card-inset);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    box-shadow: none;
    color: var(--pt-text);
}
.pt-modulearea .table { color: var(--pt-text); margin-bottom: 0; }
.pt-modulearea .table th,
.pt-modulearea .table td { border-color: var(--pt-divider) !important; padding: .7rem .85rem; }
.pt-modulearea .form-control {
    background: var(--pt-card-inset);
    border-color: var(--pt-border-strong);
    color: var(--pt-text);
}
.pt-modulearea .input-group-text {
    background: var(--pt-card-inset);
    border-color: var(--pt-border-strong);
    color: var(--pt-text-dim);
}

/* The module's own primary action (SSO) inherits the brand. */
.pt-modulearea .btn-primary,
.pt-modulearea .btn-success {
    background: var(--pt-brand) !important;
    border-color: var(--pt-brand) !important;
    color: var(--pt-on-brand) !important;
    font-weight: 600;
    border-radius: var(--pt-radius-sm);
    padding: .7rem 1.4rem;
    box-shadow: 0 8px 22px -10px var(--pt-brand-ring);
    transition: all var(--pt-speed) var(--pt-ease);
}
.pt-modulearea .btn-primary:hover,
.pt-modulearea .btn-success:hover {
    background: var(--pt-brand-hover) !important;
    border-color: var(--pt-brand-hover) !important;
    transform: translateY(-1px);
    box-shadow: var(--pt-glow-brand);
}
.pt-modulearea .btn-default,
.pt-modulearea .btn-secondary {
    background: transparent !important;
    border: 1px solid var(--pt-border-strong) !important;
    color: var(--pt-text-dim) !important;
    border-radius: var(--pt-radius-sm);
}
.pt-modulearea .btn-default:hover,
.pt-modulearea .btn-secondary:hover {
    background: var(--pt-card-hover) !important;
    color: var(--pt-text-strong) !important;
}
.pt-modulearea .btn-lg { font-size: 1rem; padding: .85rem 1.8rem; }


/* ==========================================================================
   10. PRODUCT DETAILS — cards, tabs, info rows
   ========================================================================== */

.pt-card {
    background: var(--pt-card);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    box-shadow: var(--pt-shadow-sm);
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.pt-card__head {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1rem 1.4rem;
    border-bottom: 1px solid var(--pt-divider);
}
.pt-card__head i { color: var(--pt-brand); }
.pt-card__title {
    margin: 0;
    font-size: .92rem;
    font-weight: 700;
    color: var(--pt-text-strong);
    letter-spacing: -.01em;
}
.pt-card__body { padding: 1.4rem; }
@media (max-width: 575px) {
    .pt-card__head { padding: .9rem 1.1rem; }
    .pt-card__body { padding: 1.1rem; }
}

/* --- Tabs --- */
.pt-tabs.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding-left: 0;
    border: 0;
    gap: .35rem;
    margin: 0 0 1.15rem;
}
.pt-tabs.nav-tabs .nav-item { margin: 0; }
.pt-tabs.nav-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid transparent;
    border-radius: var(--pt-radius-pill);
    padding: .55rem 1.05rem;
    font-size: .84rem;
    font-weight: 600;
    color: var(--pt-text-mute);
    background: transparent;
    transition: all var(--pt-speed) var(--pt-ease);
}
.pt-tabs.nav-tabs .nav-link:hover {
    color: var(--pt-text-strong);
    background: var(--pt-card-hover);
    border-color: var(--pt-border);
}
.pt-tabs.nav-tabs .nav-link.active {
    background: var(--pt-brand-soft) !important;
    border-color: var(--pt-brand-ring) !important;
    color: var(--pt-brand) !important;
}

.pt-tabpanes {
    background: var(--pt-card) !important;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    box-shadow: var(--pt-shadow-sm);
    padding: 1.4rem;
}
@media (max-width: 575px) { .pt-tabpanes { padding: 1.1rem; } }

/* --- Definition rows (domain, config options, custom fields) --- */
.pt-rows { display: block; }
.pt-row {
    display: grid;
    grid-template-columns: minmax(140px, 34%) 1fr;
    gap: 1rem;
    padding: .8rem 0;
    border-bottom: 1px solid var(--pt-divider);
    text-align: left;
}
.pt-row:last-child { border-bottom: 0; }
.pt-row__label {
    color: var(--pt-text-mute);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding-top: .1rem;
}
.pt-row__value { color: var(--pt-text); font-size: .9rem; word-break: break-word; min-width: 0; }
@media (max-width: 575px) {
    .pt-row { grid-template-columns: 1fr; gap: .25rem; }
}

.pt-linkrow {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: 1.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--pt-divider);
}

/* --- Downloads / addons / password tabs --- */
.pt-section-title {
    margin: 0 0 1.25rem;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--pt-text-strong);
}
.pt-download {
    padding: 1.15rem 1.3rem;
    background: var(--pt-card);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    margin-bottom: 1rem;
    transition: border-color var(--pt-speed) var(--pt-ease);
}
.pt-download:hover { border-color: var(--pt-brand-ring); }
.pt-download h4 { font-size: .95rem; font-weight: 700; margin: 0 0 .35rem; }
.pt-download p { color: var(--pt-text-dim); font-size: .86rem; }

.pt-addon { margin-bottom: 1.15rem; }
.pt-addon .card,
.pt-addon.pt-card { border-radius: var(--pt-radius); }
.pt-addon .status-active { color: var(--pt-brand); }
.pt-addon .status-suspended { color: var(--pt-amber); }
.pt-addon .status-terminated,
.pt-addon .status-cancelled { color: var(--pt-red); }

/* --- Resource usage dials --- */
.pt-usage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    text-align: center;
}
.pt-usage h4 {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pt-text-mute);
    margin-bottom: .9rem;
}
.pt-usage p { color: var(--pt-text-dim); font-size: .85rem; margin-top: .6rem; }


/* ==========================================================================
   11. UTILITIES + ACCESSIBILITY
   ========================================================================== */

.pt-hide { display: none !important; }
.pt-mt-0 { margin-top: 0 !important; }
.pt-mb-0 { margin-bottom: 0 !important; }

.pt-empty {
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--pt-text-mute);
    font-size: .9rem;
}
.pt-empty i { display: block; font-size: 1.8rem; margin-bottom: .75rem; opacity: .45; }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .pt-stat:hover,
    .pt-btn:hover { transform: none; }
}

@media print {
    body::before,
    .pt-themetoggle,
    .pt-gear,
    .pt-hero__actions { display: none !important; }
    .pt-hero,
    .pt-card,
    .pt-spotlight,
    .pt-panel { box-shadow: none; border-color: #ccc; }
}


/* --- Page toolbar (back link + theme switch) --- */
.pt-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}


/* ==========================================================================
   12. FULL-WIDTH MODE (syncbox)
   Mata a sidebar do WHMCS e devolve 100% da largura ao conteudo.
   Dois mecanismos: :has() para navegadores modernos (sem flash) e a classe
   .pt-fullwidth no <body>, aplicada por script, como garantia universal.
   ========================================================================== */

/* IMPORTANTE: as regras :has() ficam SEPARADAS das regras de fallback.
   Num navegador sem suporte a :has(), o seletor invalido derrubaria a lista
   inteira - inclusive o fallback - e a sidebar continuaria aparecendo. */

body.pt-fullwidth #main-body .row > .col-lg-4.col-xl-3 { display: none !important; }
#main-body .row:has(.pt-fullwidth-flag) > .col-lg-4.col-xl-3 { display: none !important; }

body.pt-fullwidth #main-body .primary-content {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}
#main-body .primary-content:has(.pt-fullwidth-flag) {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

/* Conteudo centralizado, com uma medida confortavel em telas grandes. */
body.pt-fullwidth .pt-service {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
}
.primary-content:has(.pt-fullwidth-flag) .pt-service {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
}

.pt-fullwidth-flag { display: none !important; }


/* ==========================================================================
   13. BOTAO "APP" - o elemento mais luminoso da tela
   ========================================================================== */

.pt-btn--app,
.pt-modulearea .btn-primary,
.pt-modulearea .btn-success,
.pt-modulearea a.btn-lg {
    box-sizing: border-box;
    max-width: 100%;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    padding: 1.1rem 2.4rem !important;
    font-size: 1.06rem !important;
    font-weight: 700 !important;
    letter-spacing: -.01em;
    line-height: 1.2;
    text-decoration: none !important;
    border: 0 !important;
    border-radius: var(--pt-radius) !important;
    color: #04241a !important;
    background: linear-gradient(135deg, #34d399 0%, #10B981 45%, #059669 100%) !important;
    box-shadow: var(--pt-glow-brand-xl) !important;
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
    animation: ptBreathe 3.6s var(--pt-ease) infinite;
    transition: transform var(--pt-speed) var(--pt-ease),
                box-shadow var(--pt-speed) var(--pt-ease),
                filter var(--pt-speed) var(--pt-ease);
}

/* Brilho que atravessa o botao. */
.pt-btn--app::after,
.pt-modulearea .btn-primary::after,
.pt-modulearea .btn-success::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    z-index: -1;
    transform: skewX(-22deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
    animation: ptSheen 4.2s var(--pt-ease) infinite;
}

.pt-btn--app:hover,
.pt-modulearea .btn-primary:hover,
.pt-modulearea .btn-success:hover {
    transform: translateY(-3px) scale(1.015);
    filter: brightness(1.06);
    box-shadow: 0 0 0 1px rgba(16, 185, 129, .6),
                0 0 40px -2px rgba(16, 185, 129, .6),
                0 30px 74px -20px rgba(16, 185, 129, .85) !important;
    color: #04241a !important;
    animation-play-state: paused;
}
.pt-btn--app:active,
.pt-modulearea .btn-primary:active { transform: translateY(-1px) scale(1); }

.pt-btn--app i,
.pt-modulearea .btn-primary i { font-size: 1.05em; }

@keyframes ptBreathe {
    0%, 100% { box-shadow: var(--pt-glow-brand-xl); }
    50%      { box-shadow: 0 0 0 1px rgba(16, 185, 129, .5),
                           0 0 36px 0 rgba(16, 185, 129, .55),
                           0 26px 66px -18px rgba(16, 185, 129, .78); }
}
@keyframes ptSheen {
    0%, 62% { left: -60%; }
    92%, 100% { left: 130%; }
}


/* ==========================================================================
   14. DASHBOARD HERO BANNER - servicos ativos em destaque total
   ========================================================================== */

.pt-herobanner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 2rem;
    align-items: center;
    padding: 2.4rem 2.6rem;
    margin-bottom: 1.75rem;
    border: 1px solid var(--pt-brand-ring);
    border-radius: var(--pt-radius-lg);
    background:
        radial-gradient(48rem 26rem at 6% -30%, rgba(16, 185, 129, .22), transparent 62%),
        radial-gradient(40rem 24rem at 96% 130%, rgba(59, 130, 246, .16), transparent 64%),
        linear-gradient(140deg, var(--pt-bg-elev), var(--pt-card) 70%);
    box-shadow: var(--pt-shadow-lg), 0 0 0 1px rgba(16, 185, 129, .10);
    overflow: hidden;
}
.pt-herobanner::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--pt-brand), var(--pt-blue) 70%, transparent);
}
@media (max-width: 991px) {
    .pt-herobanner { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.75rem; }
}
@media (max-width: 575px) {
    .pt-herobanner { padding: 1.35rem; border-radius: var(--pt-radius); }
}

.pt-herobanner__main { min-width: 0; }

.pt-herobanner__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--pt-brand);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: .8rem;
}
.pt-herobanner__eyebrow .pt-status__dot { animation: ptPulse 2.4s infinite; }

.pt-herobanner__title {
    margin: 0;
    font-size: clamp(1.65rem, 1.15rem + 2.1vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.08;
    color: var(--pt-text-strong);
    word-break: break-word;
}
.pt-herobanner__sub {
    margin: .7rem 0 0;
    color: var(--pt-text-dim);
    font-size: .98rem;
    max-width: 46ch;
}
.pt-herobanner__cta {
    display: flex;
    align-items: center;
    gap: .8rem;
    flex-wrap: wrap;
    margin-top: 1.6rem;
}
/* No celular a acao principal ocupa a linha toda - alvo de toque generoso. */
@media (max-width: 575px) {
    .pt-herobanner__cta { flex-direction: column; align-items: stretch; gap: .6rem; }
    .pt-herobanner__cta .pt-btn { width: 100%; }
    .pt-btn--app { padding: 1.05rem 1.5rem !important; }
}

/* Coluna direita: os demais servicos, acesso em 1 clique. */
.pt-herobanner__list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    min-width: 0;
}
.pt-svc {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1.05rem;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
    background: var(--pt-inset-translucent);
    color: var(--pt-text-dim);
    text-decoration: none;
    transition: all var(--pt-speed) var(--pt-ease);
}
.pt-svc:hover {
    border-color: var(--pt-brand);
    background: var(--pt-brand-soft);
    color: var(--pt-text-strong);
    transform: translateX(3px);
    text-decoration: none;
}
.pt-svc__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px; height: 34px;
    border-radius: 10px;
    background: var(--pt-brand-soft);
    color: var(--pt-brand);
    font-size: .85rem;
}
.pt-svc__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .89rem;
    font-weight: 600;
    color: var(--pt-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pt-svc__go { color: var(--pt-text-mute); font-size: .8rem; transition: color var(--pt-speed) var(--pt-ease); }
.pt-svc:hover .pt-svc__go { color: var(--pt-brand); }
.pt-svc .badge {
    background: var(--pt-brand-soft);
    border: 1px solid var(--pt-brand-ring);
    color: var(--pt-brand);
    border-radius: var(--pt-radius-pill);
    font-size: .66rem;
    font-weight: 700;
    padding: .18rem .5rem;
    flex: 0 0 auto;
}
.pt-herobanner__more {
    margin-top: .3rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--pt-text-mute);
    text-align: center;
}


/* ==========================================================================
   15. ENGRENAGEM DISCRETA (retencao)
   ========================================================================== */

.pt-gear--bare {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
    border-color: transparent;
    background: transparent;
    color: var(--pt-text-mute);
    opacity: .5;
    border-radius: 10px;
}
.pt-gear--bare:hover,
.pt-gear--bare:focus,
.show > .pt-gear--bare {
    opacity: 1;
    background: var(--pt-card-hover);
    border-color: var(--pt-border);
    color: var(--pt-text-dim);
}
.pt-gear--bare .pt-gear__label { display: none; }


/* ==========================================================================
   16. CORRECOES CRITICAS — header, dropdowns, breadcrumb
   ========================================================================== */

/* --- Dropdowns do menu por cima de tudo --- */
#header .dropdown,
#header .nav-item.dropdown { position: relative; }

#header .dropdown-menu,
#header .collapsable-dropdown-menu,
.navbar .dropdown-menu {
    z-index: 10050 !important;
    background: var(--pt-bg-elev) !important;
    border: 1px solid var(--pt-border-strong) !important;
    border-radius: var(--pt-radius) !important;
    box-shadow: var(--pt-shadow-lg) !important;
    padding: .4rem !important;
    margin-top: .5rem;
    color: var(--pt-text);
}

/* O markup do twenty-one usa <li class="dropdown-item"> com um <a class="dropdown-item">
   dentro. Neutraliza o item externo e estiliza o link de verdade. */
#header .dropdown-menu > li.dropdown-item {
    background: transparent !important;
    padding: 0 !important;
    border: 0;
    list-style: none;
}
#header .dropdown-menu a.dropdown-item,
#header .dropdown-menu > li > a {
    display: flex !important;
    align-items: center;
    gap: .6rem;
    padding: .6rem .75rem !important;
    border-radius: var(--pt-radius-sm);
    background: transparent !important;
    color: var(--pt-text-dim) !important;
    font-size: .86rem;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--pt-speed) var(--pt-ease), color var(--pt-speed) var(--pt-ease);
}
#header .dropdown-menu a.dropdown-item:hover,
#header .dropdown-menu a.dropdown-item:focus,
#header .dropdown-menu > li > a:hover {
    background: var(--pt-card-hover) !important;
    color: var(--pt-text-strong) !important;
}
#header .dropdown-menu .dropdown-divider {
    border-top: 1px solid var(--pt-divider);
    margin: .35rem .2rem;
}
#header .dropdown-menu i { color: var(--pt-text-mute); width: 1.1em; text-align: center; }

/* Popover de notificacoes do topo tambem precisa acompanhar o dark. */
.popover {
    z-index: 10050 !important;
    background: var(--pt-bg-elev) !important;
    border: 1px solid var(--pt-border-strong) !important;
    border-radius: var(--pt-radius) !important;
    box-shadow: var(--pt-shadow-lg) !important;
}
.popover .popover-header {
    background: var(--pt-card-inset) !important;
    border-bottom: 1px solid var(--pt-divider) !important;
    color: var(--pt-text-strong) !important;
}
.popover .popover-body { color: var(--pt-text-dim) !important; }
.popover .arrow::after { border-bottom-color: var(--pt-bg-elev) !important;
                         border-top-color: var(--pt-bg-elev) !important; }
.client-alerts a { color: var(--pt-text-dim); }
.client-alerts a:hover { color: var(--pt-brand); }

/* --- Breadcrumb: o #e9ecef do theme.css quebrava o dark inteiro --- */
.master-breadcrumb {
    background-color: transparent !important;
    background: transparent !important;
    border-bottom: 1px solid var(--pt-divider);
}
.master-breadcrumb .breadcrumb,
#main-body .breadcrumb,
.breadcrumb {
    background-color: transparent !important;
    background: transparent !important;
    border-radius: 0;
    margin-bottom: 0;
    padding: .85rem 0;
}
.breadcrumb-item,
.breadcrumb-item a { color: var(--pt-text-mute) !important; font-size: .82rem; }
.breadcrumb-item a:hover { color: var(--pt-brand) !important; }
.breadcrumb-item.active { color: var(--pt-text-dim) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--pt-text-mute) !important; opacity: .5; }

/* Faixa de busca de dominio da home, quando aparece. */
.domain-search-container,
#domain-search { background: transparent !important; }


/* ==========================================================================
   17. DASHBOARD SEM CARA DE WHMCS
   ========================================================================== */

/* --- Hero limpo, centralizado, muito respiro --- */
.pt-launch {
    position: relative;
    text-align: center;
    padding: 4.5rem 2rem 4rem;
    margin-bottom: 2.5rem;
    overflow: hidden;
    isolation: isolate;
}
.pt-launch::before {
    content: "";
    position: absolute;
    inset: -30% -10% auto -10%;
    height: 130%;
    z-index: -1;
    background:
        radial-gradient(38rem 20rem at 50% 18%, rgba(16, 185, 129, .20), transparent 66%),
        radial-gradient(30rem 18rem at 82% 88%, rgba(59, 130, 246, .12), transparent 68%);
    pointer-events: none;
}
@media (max-width: 767px) { .pt-launch { padding: 3rem 1rem 2.75rem; margin-bottom: 1.75rem; } }

.pt-launch__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--pt-brand-ring);
    border-radius: var(--pt-radius-pill);
    background: var(--pt-brand-soft);
    color: var(--pt-brand);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.pt-launch__eyebrow .pt-status__dot { animation: ptPulse 2.4s infinite; }

.pt-launch__title {
    margin: 0 auto;
    max-width: 18ch;
    font-size: clamp(32px, 22px + 2.6vw, 54px);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1.04;
    color: var(--pt-text-strong);
}
.pt-launch__sub {
    margin: 1.1rem auto 0;
    max-width: 44ch;
    color: var(--pt-text-dim);
    font-size: 16px;
    line-height: 1.6;
}

/* --- O botao gigante --- */
.pt-launch__action { margin-top: 2.5rem; }

.pt-megabtn {
    box-sizing: border-box;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    max-width: 100%;
    padding: 22px 56px;
    border: 0;
    border-radius: var(--pt-radius-lg);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.15;
    text-decoration: none !important;
    color: #04241a !important;
    background: linear-gradient(135deg, #34d399 0%, #10B981 45%, #059669 100%);
    box-shadow: var(--pt-glow-brand-xl);
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    animation: ptBreathe 3.6s var(--pt-ease) infinite;
    transition: transform var(--pt-speed) var(--pt-ease),
                box-shadow var(--pt-speed) var(--pt-ease),
                filter var(--pt-speed) var(--pt-ease);
}
.pt-megabtn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    z-index: -1;
    transform: skewX(-22deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
    animation: ptSheen 4.2s var(--pt-ease) infinite;
}
.pt-megabtn:hover,
.pt-megabtn:focus {
    transform: translateY(-4px) scale(1.02);
    filter: brightness(1.07);
    color: #04241a !important;
    box-shadow: 0 0 0 1px rgba(16, 185, 129, .65),
                0 0 52px 0 rgba(16, 185, 129, .62),
                0 38px 88px -22px rgba(16, 185, 129, .9);
    animation-play-state: paused;
}
.pt-megabtn:active { transform: translateY(-1px) scale(1); }
.pt-megabtn i { font-size: 1.15em; }

@media (max-width: 575px) {
    .pt-megabtn { width: 100%; padding: 19px 20px; font-size: 18px; }
}

.pt-launch__secondary {
    display: block;
    margin-top: 1.4rem;
    color: var(--pt-text-mute);
    font-size: .85rem;
    font-weight: 600;
}
.pt-launch__secondary a { color: var(--pt-text-dim); border-bottom: 1px solid var(--pt-border-strong); }
.pt-launch__secondary a:hover { color: var(--pt-brand); border-bottom-color: var(--pt-brand); }


/* --- Banner de alerta de pagamento --- */
.pt-alertbar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.35rem;
    flex-wrap: wrap;
    padding: 1.5rem 1.85rem;
    margin-bottom: 2.5rem;
    border: 1px solid rgba(239, 68, 68, .32);
    border-radius: var(--pt-radius);
    background: var(--pt-alert-bg);
    box-shadow: 0 18px 46px -18px rgba(239, 68, 68, .45);
    overflow: hidden;
}
.pt-alertbar::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 3px;
    background: linear-gradient(180deg, #f59e0b, #ef4444);
}

.pt-alertbar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: var(--pt-radius-sm);
    background: var(--pt-alert-icon-bg);
    border: 1px solid var(--pt-red-ring);
    color: var(--pt-alert-icon-fg);
    font-size: 1.25rem;
}

.pt-alertbar__text { flex: 1 1 260px; min-width: 0; }
.pt-alertbar__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--pt-alert-title);
}
.pt-alertbar__sub {
    margin: .3rem 0 0;
    font-size: .89rem;
    color: var(--pt-alert-sub);
}

.pt-alertbar__cta { margin-left: auto; }
@media (max-width: 767px) { .pt-alertbar__cta { margin-left: 0; width: 100%; } }

.pt-btn--pay {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .95rem 1.9rem;
    border: 0;
    border-radius: var(--pt-radius-sm);
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: var(--pt-on-danger) !important;
    font-size: .98rem;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: 0 12px 30px -12px rgba(239, 68, 68, .8);
    transition: all var(--pt-speed) var(--pt-ease);
}
.pt-btn--pay:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 20px 44px -14px rgba(239, 68, 68, .95);
    color: var(--pt-on-danger) !important;
}
@media (max-width: 767px) { .pt-btn--pay { width: 100%; } }


/* --- Faixa de estatisticas sem caixinhas --- */
.pt-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0;
    margin-bottom: 3rem;
    border-top: 1px solid var(--pt-divider);
    border-bottom: 1px solid var(--pt-divider);
}
.pt-strip__item {
    display: block;
    padding: 1.6rem 1.5rem;
    border-left: 1px solid var(--pt-divider);
    text-decoration: none;
    transition: background var(--pt-speed) var(--pt-ease);
}
.pt-strip__item:first-child { border-left: 0; }
.pt-strip__item:hover { background: rgba(148, 163, 184, .05); text-decoration: none; }
@media (max-width: 575px) {
    .pt-strip__item { padding: 1.2rem 1rem; }
    .pt-strip__item:nth-child(odd) { border-left: 0; }
}

.pt-strip__value {
    display: block;
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.045em;
    color: var(--pt-text-strong);
    font-variant-numeric: tabular-nums;
}
.pt-strip__label {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-top: .55rem;
    color: var(--pt-text-mute);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.pt-strip__item--brand .pt-strip__value { color: var(--pt-brand); }
.pt-strip__item--amber .pt-strip__value { color: var(--pt-amber); }


/* --- Paineis achatados: sem caixa, so tipografia e respiro --- */
.pt-flatgrid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: 3rem;
    align-items: start;
}
@media (max-width: 991px) { .pt-flatgrid { grid-template-columns: 1fr; gap: 2.25rem; } }
.pt-flatcol { display: flex; flex-direction: column; gap: 2.5rem; min-width: 0; }

.pt-flatgrid .pt-panel,
.pt-panels__full .pt-panel.pt-panel--flat,
.pt-panel--flat {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible;
}
.pt-panel--flat::before { display: none; }
.pt-panel--flat .card-header {
    padding: 0 0 .9rem 0 !important;
    border-bottom: 1px solid var(--pt-divider) !important;
    background: transparent !important;
}
.pt-panel--flat .card-title {
    font-size: .76rem !important;
    font-weight: 800 !important;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--pt-text-mute) !important;
}
.pt-panel--flat .card-title > i { color: var(--pt-text-mute); }
.pt-panel--flat .card-body { padding: 1.1rem 0 0 0 !important; }
.pt-panel--flat .list-group { margin-top: .3rem; }
.pt-panel--flat .list-group-item {
    padding: .95rem 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--pt-divider) !important;
    font-size: .9rem;
}
.pt-panel--flat .list-group-item:last-child { border-bottom: 0 !important; }
.pt-panel--flat .list-group-item:hover {
    background: transparent !important;
    color: var(--pt-brand) !important;
    padding-left: .35rem !important;
}
.pt-panel--flat .card-footer {
    background: transparent !important;
    border-top: 1px solid var(--pt-divider) !important;
    padding: .9rem 0 0 0 !important;
}
.pt-panel--flat .card-footer:empty { display: none; }
.pt-panel--flat .card-title .float-right .btn {
    background: transparent !important;
    border: 0 !important;
    color: var(--pt-brand) !important;
    padding: 0 !important;
    font-size: .74rem;
    letter-spacing: .04em;
}


/* ==========================================================================
   18. PAGINAS DE FATURA / ORCAMENTO (documentos standalone)
   viewinvoice.tpl, viewquote.tpl e viewbillingnote.tpl NAO incluem head.tpl:
   sao documentos HTML proprios. O link do premium-theme.css foi adicionado
   dentro deles. As regras abaixo cobrem o invoice.css, que pinta tudo claro.
   ========================================================================== */

.invoice-container {
    background-color: var(--pt-card) !important;
    border: 1px solid var(--pt-border) !important;
    border-radius: var(--pt-radius-lg) !important;
    box-shadow: var(--pt-shadow-lg);
    color: var(--pt-text);
    padding: 56px !important;
}
@media (max-width: 767px) { .invoice-container { padding: 28px !important; } }

.invoice-container h1,
.invoice-container h2,
.invoice-container h3,
.invoice-container h4,
.invoice-container h5,
.invoice-container strong,
.invoice-container b { color: var(--pt-text-strong); }
.invoice-container p,
.invoice-container td,
.invoice-container div { color: var(--pt-text); }
.invoice-container a { color: var(--pt-brand); }
.invoice-container hr { border-top-color: var(--pt-divider); }
.invoice-container .small-text { color: var(--pt-text-dim); }

/* Cores de status: as originais sao escuras demais para fundo escuro. */
.invoice-container .invoice-status .unpaid,
.invoice-container .unpaid { color: #f87171 !important; }
.invoice-container .invoice-status .paid,
.invoice-container .paid { color: var(--pt-brand) !important; }
.invoice-container .invoice-status .draft,
.invoice-container .draft,
.invoice-container .cancelled { color: var(--pt-text-mute) !important; }
.invoice-container .refunded { color: #60a5fa !important; }
.invoice-container .collections { color: var(--pt-amber) !important; }

/* Tabela de itens */
.invoice-container .table { color: var(--pt-text); }
.invoice-container .table th {
    color: var(--pt-text-mute);
    border-color: var(--pt-divider) !important;
    background: transparent;
}
.invoice-container .table td { border-color: var(--pt-divider) !important; }
.invoice-container td.total-row {
    background-color: var(--pt-card-inset) !important;
    color: var(--pt-text-strong);
    font-weight: 600;
}
.invoice-container td.no-line { border: 0 !important; }

/* Cabecalhos de painel (Itens da fatura, Livro contabil) */
.invoice-container .panel,
.invoice-container .card {
    background: var(--pt-card-inset) !important;
    border: 1px solid var(--pt-border) !important;
    border-radius: var(--pt-radius) !important;
    box-shadow: none !important;
    overflow: hidden;
}
.invoice-container .panel-heading,
.invoice-container .card-header {
    background: var(--pt-bg-elev) !important;
    border-bottom: 1px solid var(--pt-divider) !important;
    color: var(--pt-text-strong) !important;
}
.invoice-container .panel-title,
.invoice-container .card-title { color: var(--pt-text-strong) !important; }
.invoice-container .panel-body,
.invoice-container .card-body { background: transparent !important; }

/* Selecao de forma de pagamento e botoes do rodape */
.invoice-container select,
.invoice-container .form-control,
.invoice-container .custom-select {
    background: var(--pt-card-inset) !important;
    border: 1px solid var(--pt-border-strong) !important;
    color: var(--pt-text) !important;
    border-radius: var(--pt-radius-sm) !important;
}
.invoice-container .btn-default,
.invoice-container .btn-secondary {
    background: transparent !important;
    border: 1px solid var(--pt-border-strong) !important;
    color: var(--pt-text-dim) !important;
    border-radius: var(--pt-radius-sm) !important;
}
.invoice-container .btn-default:hover,
.invoice-container .btn-secondary:hover {
    background: var(--pt-card-hover) !important;
    color: var(--pt-text-strong) !important;
}
.invoice-container .btn-primary,
.invoice-container .btn-success {
    background: var(--pt-brand) !important;
    border-color: var(--pt-brand) !important;
    color: var(--pt-on-brand) !important;
    border-radius: var(--pt-radius-sm) !important;
    font-weight: 600;
}

/* Avisos do corpo da fatura. Observacao: se o texto foi colado no admin com
   style="background:#ffc" inline, o inline vence - trocar la, nao aqui. */
.invoice-container .alert { border-radius: var(--pt-radius) !important; }
.invoice-container .alert-warning {
    background: var(--pt-amber-soft) !important;
    border: 1px solid var(--pt-amber-ring) !important;
    color: #fcd34d !important;
}
.invoice-container .alert-warning strong,
.invoice-container .alert-warning b { color: #fde68a !important; }
.invoice-container .alert-danger {
    background: var(--pt-red-soft) !important;
    border: 1px solid var(--pt-red-ring) !important;
    color: #fca5a5 !important;
}
.invoice-container .alert-info {
    background: var(--pt-blue-soft) !important;
    border: 1px solid var(--pt-border-strong) !important;
    color: #93c5fd !important;
}
.invoice-container .alert-success {
    background: var(--pt-brand-soft) !important;
    border: 1px solid var(--pt-brand-ring) !important;
    color: var(--pt-brand-hover) !important;
}

/* Logo do PIX e imagens sobre fundo escuro */
.invoice-container .invoice-header img { max-width: 100%; }

@media print {
    /* Papel e branco: aqui o #fff e intencional, nao vazamento de tema. */
    .invoice-container {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none;
        border-color: #ccc !important;
    }
    .invoice-container * { color: #000 !important; }
}


/* ==========================================================================
   19. TABELAS DE LISTAGEM / DATATABLES
   A lista de faturas vinha com texto quase invisivel sobre o fundo escuro.
   ========================================================================== */

table.dataTable,
.table-container .table,
#tableInvoicesList,
.table-list {
    color: var(--pt-text) !important;
    border-color: var(--pt-divider) !important;
}

table.dataTable thead th,
.table-list thead th {
    background: var(--pt-card-inset) !important;
    border-bottom: 1px solid var(--pt-border-strong) !important;
    color: var(--pt-text-dim) !important;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
table.dataTable tbody td,
.table-list tbody td {
    background: transparent !important;
    border-color: var(--pt-divider) !important;
    color: var(--pt-text) !important;
}
table.dataTable tbody tr,
.table-list tbody tr { background: transparent !important; }
table.dataTable tbody tr:hover td,
.table-list tbody tr:hover td {
    background: var(--pt-card-hover) !important;
    color: var(--pt-text-strong) !important;
}
table.dataTable tbody tr.odd td,
table.dataTable tbody tr.even td { background: transparent !important; }
table.dataTable tbody td a,
.table-list tbody td a { color: var(--pt-brand) !important; }

/* O WHMCS marca a linha inteira como clicavel; garante o cursor. */
table.dataTable tbody tr[onclick],
.table-list tbody tr[onclick] { cursor: pointer; }

/* Controles do DataTables */
.dataTables_wrapper,
.dataTables_info,
.dataTables_length,
.dataTables_filter { color: var(--pt-text-dim) !important; }

.dataTables_filter input,
.dataTables_length select,
.dataTables_wrapper input[type="search"],
.dataTables_wrapper select {
    background: var(--pt-card-inset) !important;
    border: 1px solid var(--pt-border-strong) !important;
    border-radius: var(--pt-radius-sm) !important;
    color: var(--pt-text) !important;
    padding: .4rem .7rem;
}
.dataTables_filter input:focus,
.dataTables_wrapper select:focus {
    border-color: var(--pt-brand) !important;
    box-shadow: 0 0 0 3px var(--pt-brand-ring);
    outline: none;
}

.dataTables_paginate .paginate_button,
.dataTables_paginate .page-link {
    background: transparent !important;
    border: 1px solid var(--pt-border) !important;
    color: var(--pt-text-dim) !important;
    border-radius: var(--pt-radius-sm) !important;
    margin: 0 2px;
}
.dataTables_paginate .paginate_button:hover,
.dataTables_paginate .page-link:hover {
    background: var(--pt-card-hover) !important;
    border-color: var(--pt-border-strong) !important;
    color: var(--pt-text-strong) !important;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .page-item.active .page-link {
    background: var(--pt-brand-soft) !important;
    border-color: var(--pt-brand-ring) !important;
    color: var(--pt-brand) !important;
}
.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .page-item.disabled .page-link { opacity: .4; }

/* Selos de status nas listagens */
.label, .status {
    border-radius: var(--pt-radius-pill) !important;
    font-weight: 700;
    font-size: .7rem;
    letter-spacing: .03em;
    padding: .25rem .65rem;
}
.status-active, .label-success, .badge-success {
    background: var(--pt-brand-soft) !important;
    color: var(--pt-brand) !important;
    border: 1px solid var(--pt-brand-ring) !important;
}
.status-unpaid, .status-overdue, .label-danger, .badge-danger {
    background: var(--pt-red-soft) !important;
    color: #f87171 !important;
    border: 1px solid var(--pt-red-ring) !important;
}
.status-pending, .label-warning, .badge-warning {
    background: var(--pt-amber-soft) !important;
    color: var(--pt-amber) !important;
    border: 1px solid var(--pt-amber-ring) !important;
}
.status-cancelled, .status-terminated, .label-default, .badge-secondary {
    background: var(--pt-card-inset) !important;
    color: var(--pt-text-mute) !important;
    border: 1px solid var(--pt-border) !important;
}

/* Rodape e seletor de idioma/moeda */
#footer .btn,
.footer .btn {
    background: var(--pt-card) !important;
    border: 1px solid var(--pt-border) !important;
    color: var(--pt-text-dim) !important;
    border-radius: var(--pt-radius-pill) !important;
}
#footer .btn:hover { color: var(--pt-text-strong) !important; }

/* Modais (usados em varias telas do sistema) */
.modal-content {
    background: var(--pt-bg-elev) !important;
    border: 1px solid var(--pt-border-strong) !important;
    border-radius: var(--pt-radius) !important;
    color: var(--pt-text);
}
.modal-header, .modal-footer { border-color: var(--pt-divider) !important; }
.modal-title { color: var(--pt-text-strong) !important; }
.modal-backdrop.show { opacity: .7; }

/* Abas genericas do sistema */
.nav-tabs { border-bottom-color: var(--pt-divider) !important; }
.nav-tabs .nav-link {
    color: var(--pt-text-mute) !important;
    border-color: transparent !important;
}
.nav-tabs .nav-link:hover { color: var(--pt-text-strong) !important; }
.nav-tabs .nav-link.active {
    background: var(--pt-card) !important;
    border-color: var(--pt-border) var(--pt-border) var(--pt-card) !important;
    color: var(--pt-brand) !important;
}

/* Caixa de busca da base de conhecimento no topo */
#header .search .form-control,
#header input[type="text"] {
    background: var(--pt-card-inset) !important;
    border-color: var(--pt-border-strong) !important;
    color: var(--pt-text) !important;
}
#header .search .form-control::placeholder { color: var(--pt-text-mute) !important; }


/* ==========================================================================
   20. PORTA DE ENTRADA — login e recuperacao de senha (split screen)
   O conteudo do login nasce dentro de #main-body > .container > .primary-content.
   A classe .pt-authpage no <body> neutraliza esses wrappers e apaga o cromo do
   WHMCS para a tela virar um documento de pagina inteira.
   ========================================================================== */

/* --- Limpeza do cromo --- */
body.pt-authpage #header,
body.pt-authpage .master-breadcrumb,
body.pt-authpage #footer,
body.pt-authpage .footer,
body.pt-authpage .domain-search-container,
body.pt-authpage #main-body .row > .col-lg-4.col-xl-3 { display: none !important; }

body.pt-authpage { overflow-x: hidden; }
body.pt-authpage::before { display: none; }   /* o wash do fundo sai; o brand ja tem o seu */

body.pt-authpage #main-body {
    padding: 0 !important;
    margin: 0 !important;
    background: var(--pt-bg) !important;
}
body.pt-authpage #main-body > .container,
body.pt-authpage #main-body > div {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.pt-authpage #main-body .row { margin: 0 !important; width: 100% !important; }
body.pt-authpage .primary-content {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}
.pt-auth-flag { display: none !important; }

.pt-auth__card {
    width: 100%;
    max-width: 420px;
    padding: 2.5rem;
    background: var(--pt-card);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-card);
    box-shadow: var(--pt-shadow-lg);
}
@media (max-width: 575px) { .pt-auth__card { padding: 1.75rem 1.35rem; } }

.pt-auth__title {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--pt-text-strong);
}
.pt-auth__subtitle {
    margin: .5rem 0 2rem;
    font-size: 14px;
    color: var(--pt-text-dim);
}

/* --- Campos com floating label --- */
.pt-field { position: relative; margin-bottom: 1.1rem; }

#main-body .pt-field__input,
.pt-field__input {
    box-sizing: border-box;
    width: 100%;
    height: 64px;
    padding: 26px 16px 8px 46px;
    background: var(--pt-card-inset);
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius-sm);
    color: var(--pt-text);
    font-size: 15px;
    font-family: inherit;
    line-height: 1.2;
    transition: border-color var(--pt-speed) var(--pt-ease),
                box-shadow var(--pt-speed) var(--pt-ease),
                background var(--pt-speed) var(--pt-ease);
}
#main-body .pt-field__input:focus,
.pt-field__input:focus {
    outline: none;
    background: var(--pt-card);
    border-color: var(--pt-brand);
    box-shadow: 0 0 0 4px var(--pt-brand-ring);
}
#main-body .pt-field--pw .pt-field__input,
.pt-field--pw .pt-field__input { padding-right: 52px; }

#main-body .pt-field__label,
.pt-field__label {
    position: absolute;
    left: 46px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pt-text-mute);
    font-size: 15px;
    /* line-height normal daria uma caixa de 16px no estado flutuado, e ela
       encostaria em onde o texto do campo comeca. Com 1, a caixa acompanha a
       fonte e sobra ar entre o rotulo e o valor. */
    line-height: 1;
    pointer-events: none;
    transition: all .16s var(--pt-ease);
}
/* placeholder=" " (um espaco) faz :placeholder-shown valer como "vazio" */
#main-body .pt-field__input:focus + .pt-field__label,
#main-body .pt-field__input:not(:placeholder-shown) + .pt-field__label,
.pt-field__input:focus + .pt-field__label,
.pt-field__input:not(:placeholder-shown) + .pt-field__label {
    top: 10px;
    transform: none;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pt-brand);
}
#main-body .pt-field__input:not(:focus):not(:placeholder-shown) + .pt-field__label,
.pt-field__input:not(:focus):not(:placeholder-shown) + .pt-field__label { color: var(--pt-text-mute); }

.pt-field__icon {
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pt-text-mute);
    font-size: .9rem;
    pointer-events: none;
    transition: color var(--pt-speed) var(--pt-ease);
}
.pt-field__input:focus ~ .pt-field__icon { color: var(--pt-brand); }

.pt-field__reveal {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--pt-text-mute);
    cursor: pointer;
    transition: all var(--pt-speed) var(--pt-ease);
}
.pt-field__reveal:hover { background: var(--pt-card-hover); color: var(--pt-text-strong); }

/* O autofill do Chrome pinta o campo de amarelo e ignora o dark. */
.pt-field__input:-webkit-autofill,
.pt-field__input:-webkit-autofill:hover,
.pt-field__input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--pt-text);
    -webkit-box-shadow: 0 0 0 1000px var(--pt-card-inset) inset;
    box-shadow: 0 0 0 1000px var(--pt-card-inset) inset;
    caret-color: var(--pt-text);
    transition: background-color 9999s ease-in-out 0s;
}

/* --- Linha de opcoes --- */
.pt-auth__options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: -.15rem 0 1.6rem;
}
#main-body label.pt-check,
.pt-check {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 13px;
    color: var(--pt-text-dim);
    cursor: pointer;
    margin: 0;
}
.pt-check input {
    width: 17px; height: 17px;
    accent-color: var(--pt-brand);
    cursor: pointer;
}
.pt-auth__forgot {
    font-size: 13px;
    font-weight: 600;
    color: var(--pt-text-dim);
}
.pt-auth__forgot:hover { color: var(--pt-brand); }

/* --- Botao principal --- */
.pt-authbtn {
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    width: 100%;
    padding: 18px 24px;
    border: 0;
    border-radius: var(--pt-radius-sm);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
    font-family: inherit;
    color: #04241a;
    background: linear-gradient(135deg, #34d399 0%, #10B981 45%, #059669 100%);
    box-shadow: var(--pt-glow-brand-xl);
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    animation: ptBreathe 3.6s var(--pt-ease) infinite;
    transition: transform var(--pt-speed) var(--pt-ease),
                box-shadow var(--pt-speed) var(--pt-ease),
                filter var(--pt-speed) var(--pt-ease);
}
.pt-authbtn::after {
    content: "";
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    z-index: -1;
    transform: skewX(-22deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
    animation: ptSheen 4.2s var(--pt-ease) infinite;
}
.pt-authbtn:hover,
.pt-authbtn:focus {
    transform: translateY(-2px);
    filter: brightness(1.06);
    color: #04241a;
    box-shadow: 0 0 0 1px rgba(16, 185, 129, .6),
                0 0 44px -2px rgba(16, 185, 129, .6),
                0 30px 74px -20px rgba(16, 185, 129, .85);
    animation-play-state: paused;
}
.pt-authbtn:active { transform: translateY(0); }

/* --- Rodape do card --- */
.pt-auth__sep {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: 1.75rem 0 1.35rem;
    color: var(--pt-text-mute);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.pt-auth__sep::before,
.pt-auth__sep::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--pt-divider);
}

.pt-auth__foot {
    margin: 1.6rem 0 0;
    text-align: center;
    font-size: 13.5px;
    color: var(--pt-text-mute);
}
.pt-auth__foot a { font-weight: 700; color: var(--pt-brand); }
.pt-auth__foot a:hover { color: var(--pt-brand-hover); }

.pt-auth__back {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: 1.5rem;
    font-size: 13px;
    font-weight: 600;
    color: var(--pt-text-mute);
}
.pt-auth__back:hover { color: var(--pt-brand); }

/* --- Alertas e captcha dentro do card --- */
#main-body .pt-auth__card .alert,
.pt-auth__card .alert {
    border-radius: var(--pt-radius-sm) !important;
    font-size: 13.5px;
    padding: .85rem 1rem;
    margin-bottom: 1.25rem;
}
.pt-auth__card .g-recaptcha,
.pt-auth__card .h-captcha { margin-bottom: 1.25rem; }
.pt-auth__card .pwstrength_viewport_progress { margin-top: .6rem; }

/* Botoes de login social do linkedaccounts.tpl */
.pt-auth__social .btn,
.pt-auth__social a[class*="btn-"] {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    margin-bottom: .6rem;
    padding: .85rem 1rem !important;
    background: var(--pt-card-inset) !important;
    border: 1px solid var(--pt-border-strong) !important;
    border-radius: var(--pt-radius-sm) !important;
    color: var(--pt-text-dim) !important;
    font-size: 14px;
    font-weight: 600;
    transition: all var(--pt-speed) var(--pt-ease);
}
.pt-auth__social .btn:hover {
    background: var(--pt-card-hover) !important;
    border-color: var(--pt-brand) !important;
    color: var(--pt-text-strong) !important;
}

/* --- Modo claro --- */


/* ==========================================================================
   21. PENTE FINO ANTI-BRANCO
   Varredura das superficies que o WHMCS/Bootstrap pinta de branco e que
   vazavam no dark: editores, textareas, paineis, wells, popovers, modais.
   ========================================================================== */

/* --- Superficies genericas --- */
/* Os :not() protegem os componentes proprios do tema. Sem eles, este bloco
   (que vem depois no arquivo) apagaria os paineis achatados do dashboard e o
   fundo das abas da pagina de servico. So negacoes SIMPLES aqui: :not() com
   seletor descendente e Selectors 4 e, se nao houver suporte, invalida a lista
   inteira. O que depende de descendencia e reafirmado no fim da secao. */
.bg-white,
.bg-light,
.jumbotron,
.well,
.panel:not(.pt-panel),
.panel-default:not(.pt-panel),
.card:not(.pt-panel):not(.pt-card):not(.pt-auth__card),
.popover,
.tooltip-inner,
.toast,
.accordion,
.pagination,
.page-link,
.input-group-text,
.custom-file-label,
.dropdown-menu,
.modal-content {
    background-color: var(--pt-card) !important;
    color: var(--pt-text);
    border-color: var(--pt-border) !important;
}
.list-group { background-color: transparent !important; }
.tab-content:not(.pt-tabpanes) { background-color: transparent !important; }

.panel-heading,
.card-header:not(.pt-card__head),
.modal-header,
.modal-footer,
.card-footer,
.panel-footer {
    background-color: var(--pt-card-inset) !important;
    border-color: var(--pt-divider) !important;
    color: var(--pt-text-strong);
}
.panel-body, .card-body { background-color: transparent !important; }

/* --- Campos de formulario em todo o sistema --- */
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
select,
.form-control,
.custom-select,
.custom-file-input {
    background-color: var(--pt-card-inset) !important;
    border-color: var(--pt-border-strong) !important;
    color: var(--pt-text) !important;
}
textarea:focus,
input:focus,
select:focus,
.form-control:focus {
    background-color: var(--pt-card-inset) !important;
    border-color: var(--pt-brand) !important;
    box-shadow: 0 0 0 3px var(--pt-brand-ring) !important;
    color: var(--pt-text) !important;
}
::placeholder { color: var(--pt-text-mute) !important; opacity: 1; }
select option { background-color: var(--pt-bg-elev); color: var(--pt-text); }

/* Autofill do Chrome em qualquer campo do sistema. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--pt-text) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--pt-card-inset) inset !important;
    caret-color: var(--pt-text);
    transition: background-color 9999s ease-in-out 0s;
}


/* ==========================================================================
   22. TICKETS — editor de mensagem e conversa
   O textarea .markdown-editor vira um EasyMDE por JS depois do load, entao
   as duas formas precisam estar cobertas.
   ========================================================================== */

textarea.markdown-editor,
#inputMessage {
    background-color: var(--pt-card-inset) !important;
    border: 1px solid var(--pt-border-strong) !important;
    border-radius: var(--pt-radius-sm) !important;
    color: var(--pt-text) !important;
    min-height: 220px;
    font-family: inherit;
}

/* --- EasyMDE / CodeMirror (renderizados por JS) --- */
.EasyMDEContainer,
.EasyMDEContainer .CodeMirror,
.CodeMirror,
.CodeMirror-scroll,
.editor-preview,
.editor-preview-side,
.editor-statusbar {
    background-color: var(--pt-card-inset) !important;
    color: var(--pt-text) !important;
    border-color: var(--pt-border-strong) !important;
}
.CodeMirror { border-radius: var(--pt-radius-sm) !important; }
.CodeMirror-cursor { border-left-color: var(--pt-brand) !important; }
.CodeMirror-selected,
.CodeMirror-line::selection,
.CodeMirror-line > span::selection { background: var(--pt-brand-soft) !important; }
.CodeMirror-placeholder { color: var(--pt-text-mute) !important; }
/* Fatias internas do CodeMirror que nascem brancas e aparecem como frestas. */
.CodeMirror-gutters,
.CodeMirror-gutter,
.CodeMirror-scrollbar-filler,
.CodeMirror-gutter-filler,
.CodeMirror-linenumber {
    background-color: var(--pt-card-inset) !important;
    border-color: var(--pt-divider) !important;
    color: var(--pt-text-mute) !important;
}
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar { background-color: transparent !important; }
.CodeMirror-fullscreen, .editor-preview-active, .editor-preview-active-side {
    background-color: var(--pt-card-inset) !important;
}
.CodeMirror .cm-header,
.CodeMirror .cm-strong { color: var(--pt-text-strong) !important; }
.CodeMirror .cm-link,
.CodeMirror .cm-url { color: var(--pt-brand) !important; }
.CodeMirror .cm-comment { color: var(--pt-text-mute) !important; }
.CodeMirror .cm-quote { color: var(--pt-text-dim) !important; }

.editor-toolbar {
    background-color: var(--pt-bg-elev) !important;
    border: 1px solid var(--pt-border-strong) !important;
    border-bottom: 0 !important;
    border-radius: var(--pt-radius-sm) var(--pt-radius-sm) 0 0 !important;
    opacity: 1 !important;
}
.editor-toolbar a,
.editor-toolbar button,
.editor-toolbar i.separator {
    color: var(--pt-text-dim) !important;
    border-color: transparent !important;
    background: transparent !important;
    border-radius: 6px;
}
.editor-toolbar a:hover,
.editor-toolbar button:hover,
.editor-toolbar a.active,
.editor-toolbar button.active {
    background: var(--pt-card-hover) !important;
    border-color: var(--pt-border) !important;
    color: var(--pt-text-strong) !important;
}
.editor-statusbar { color: var(--pt-text-mute) !important; border: 0 !important; }
.editor-preview, .editor-preview-side { padding: 1rem; }
.editor-preview a { color: var(--pt-brand) !important; }
.editor-preview code, .editor-preview pre {
    background: var(--pt-bg-deep) !important;
    color: var(--pt-brand) !important;
    border: 1px solid var(--pt-border) !important;
    border-radius: 6px;
}

/* --- Conversa do ticket --- */
.ticket-reply,
.markdown-content {
    background-color: var(--pt-card) !important;
    border: 1px solid var(--pt-border) !important;
    border-radius: var(--pt-radius) !important;
    color: var(--pt-text) !important;
}
.ticket-reply.staff {
    background: linear-gradient(150deg, var(--pt-brand-soft), var(--pt-card) 42%) !important;
    border-color: var(--pt-brand-ring) !important;
}
.ticket-reply .ticket-reply-header,
.ticket-reply h4 { color: var(--pt-text-strong) !important; }
.markdown-content blockquote {
    border-left: 3px solid var(--pt-border-strong);
    background: var(--pt-card-inset);
    color: var(--pt-text-dim);
    padding: .75rem 1rem;
    border-radius: 0 var(--pt-radius-sm) var(--pt-radius-sm) 0;
}
.markdown-content code, .markdown-content pre {
    background: var(--pt-bg-deep) !important;
    color: var(--pt-brand) !important;
    border: 1px solid var(--pt-border) !important;
    border-radius: 6px;
}
.markdown-content table td,
.markdown-content table th { border-color: var(--pt-divider) !important; }

/* Anexos e area de upload */
.dropzone, .file-upload, .attachment-list {
    background: var(--pt-card-inset) !important;
    border: 1px dashed var(--pt-border-strong) !important;
    border-radius: var(--pt-radius-sm) !important;
    color: var(--pt-text-dim) !important;
}


/* ==========================================================================
   23. LOGIN — reforco da limpeza do cromo
   Nomes extras cobrindo variacoes de tema; o twenty-one usa #nav e .navbar,
   mas outros temas/versoes usam #main-menu e #secondary-menu.
   ========================================================================== */

body.pt-authpage #header,
body.pt-authpage header.header,
body.pt-authpage #main-menu,
body.pt-authpage #secondary-menu,
body.pt-authpage #nav,
body.pt-authpage .navbar,
body.pt-authpage .main-navbar-wrapper,
body.pt-authpage .topbar,
body.pt-authpage .master-breadcrumb,
body.pt-authpage nav[aria-label="breadcrumb"],
body.pt-authpage .breadcrumb,
body.pt-authpage #footer,
body.pt-authpage footer,
body.pt-authpage .footer,
body.pt-authpage .domain-search-container,
body.pt-authpage #top-affiliate-bar,
body.pt-authpage .announcement-bar { display: none !important; }

/* Se por algum motivo o wrapper .pt-auth nao existir, o body ainda entrega
   uma tela cheia centralizada em vez de conteudo empilhado no topo. */
body.pt-authpage {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--pt-bg) !important;
}
body.pt-authpage #main-body {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
}
body.pt-authpage #main-body > .container,
body.pt-authpage #main-body > div {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
}
body.pt-authpage #main-body .row {
    flex: 1 1 auto;
    align-items: stretch;
}
body.pt-authpage .primary-content { display: flex; align-items: stretch; }
body.pt-authpage .pt-auth { flex: 1 1 auto; }


/* --- Reafirmacao: os componentes do tema que a varredura acima tocaria.
       Vem depois no arquivo, entao vencem por ordem de origem. --- */
.pt-panel--flat,
.pt-panel--flat .card-header,
.pt-panel--flat .card-body,
.pt-panel--flat .card-footer { background-color: transparent !important; }
.pt-panel .card-header { background-color: transparent !important; }
.pt-panel .card-footer { background-color: var(--pt-card-inset) !important; }
.pt-panel { background-color: var(--pt-card) !important; }
.pt-panel--flat { background-color: transparent !important; }
.pt-tabpanes { background-color: var(--pt-card) !important; }
.pt-scope .dropdown-menu,
#header .dropdown-menu { background-color: var(--pt-bg-elev) !important; }
.pt-card__head { background-color: transparent !important; }
.pt-hero, .pt-card { background-color: var(--pt-card) !important; }
.pt-auth__card { background-color: var(--pt-card) !important; }
.pt-field__input { background-color: var(--pt-card-inset) !important; }
#main-body .pt-field__input:focus { background-color: var(--pt-card) !important; }


/* ==========================================================================
   24. DASHBOARD — banner de boas-vindas corporativo
   Substitui o hero centralizado gigante. Referencia de tom: Stripe/Vercel —
   horizontal, contido, sem animacao chamando atencao.
   ========================================================================== */

/* Desliga o respiro e o brilho varrendo nos botoes do dashboard: era o que
   dava o ar de propaganda. O verde continua forte, so que parado. */
.pt-welcome .pt-btn--app,
.pt-btn--calm {
    animation: none !important;
}
.pt-welcome .pt-btn--app::after,
.pt-btn--calm::after { display: none !important; }

.pt-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    padding: 1.85rem 2rem;
    margin-bottom: 1.25rem;
    background: var(--pt-card);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    box-shadow: var(--pt-shadow-sm);
}
@media (max-width: 767px) { .pt-welcome { padding: 1.35rem; gap: 1.25rem; } }

.pt-welcome__text { min-width: 0; flex: 1 1 320px; }

.pt-welcome__hello {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--pt-text-strong);
    line-height: 1.25;
}
.pt-welcome__sub {
    margin: .35rem 0 0;
    font-size: 14px;
    color: var(--pt-text-dim);
}
.pt-welcome__status {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .6rem;
    padding: .2rem .6rem;
    border-radius: var(--pt-radius-pill);
    background: var(--pt-brand-soft);
    border: 1px solid var(--pt-brand-ring);
    color: var(--pt-brand);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pt-welcome__actions {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
}
@media (max-width: 575px) {
    .pt-welcome__actions { width: 100%; }
    .pt-welcome__actions .pt-btn--calm { width: 100%; }
}

/* Botao principal: verde solido, legivel, sem espalhafato. */
.pt-btn--calm {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 14px 26px;
    border: 0;
    border-radius: var(--pt-radius-sm);
    /* Texto branco, como pedido. Para isso o verde precisou descer um tom:
       o botao tem 15px em negrito, que pelo WCAG conta como texto normal e
       exige 4.5:1. Medido - branco sobre var(--pt-brand) dava 3.77:1 no tema
       claro e 2.54:1 no escuro, os dois reprovando. Sobre #047857 da 5.48:1.
       Valor fixo nos dois temas de proposito: e a acao principal da tela e
       nao pode depender do tema para continuar legivel. */
    background: #047857;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.005em;
    line-height: 1.2;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: 0 6px 18px -8px rgba(16, 185, 129, .55);
    transition: background var(--pt-speed) var(--pt-ease),
                box-shadow var(--pt-speed) var(--pt-ease),
                transform var(--pt-speed) var(--pt-ease);
}
.pt-btn--calm:hover,
.pt-btn--calm:focus {
    /* Aprofunda em vez de clarear: mantem o branco em 7.68:1 no hover. */
    background: #065f46;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -10px rgba(16, 185, 129, .7);
}
.pt-btn--calm:active { transform: translateY(0); }

.pt-btn--quiet {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 14px 20px;
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius-sm);
    background: transparent;
    color: var(--pt-text-dim);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    transition: all var(--pt-speed) var(--pt-ease);
}
.pt-btn--quiet:hover {
    background: var(--pt-card-hover);
    border-color: var(--pt-brand);
    color: var(--pt-text-strong);
}


/* ==========================================================================
   25. BASE DE CONHECIMENTO — autoatendimento no dashboard
   ========================================================================== */

.pt-help {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 1.25rem;
    align-items: center;
    padding: 1.5rem 2rem;
    margin-bottom: 2.5rem;
    background: var(--pt-card-inset);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
}
@media (max-width: 991px) {
    .pt-help { grid-template-columns: 1fr; padding: 1.35rem; gap: 1rem; }
}

.pt-help__intro { min-width: 0; }
.pt-help__title {
    margin: 0 0 .9rem;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pt-text-mute);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.pt-help__title i { color: var(--pt-brand); }

.pt-help__search { position: relative; display: block; }
.pt-help__search input {
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    padding: 0 46px 0 44px;
    background: var(--pt-card) !important;
    border: 1px solid var(--pt-border-strong) !important;
    border-radius: var(--pt-radius-sm) !important;
    color: var(--pt-text) !important;
    font-size: 14px;
    transition: border-color var(--pt-speed) var(--pt-ease),
                box-shadow var(--pt-speed) var(--pt-ease);
}
.pt-help__search input:focus {
    outline: none;
    border-color: var(--pt-brand) !important;
    box-shadow: 0 0 0 3px var(--pt-brand-ring) !important;
}
.pt-help__search .pt-help__icon {
    position: absolute;
    left: 16px; top: 50%;
    transform: translateY(-50%);
    color: var(--pt-text-mute);
    font-size: 14px;
    pointer-events: none;
}
.pt-help__search button {
    position: absolute;
    right: 6px; top: 50%;
    transform: translateY(-50%);
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: var(--pt-brand-soft);
    color: var(--pt-brand);
    cursor: pointer;
    transition: all var(--pt-speed) var(--pt-ease);
}
.pt-help__search button:hover { background: var(--pt-brand); color: var(--pt-on-brand); }

.pt-help__links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
}
@media (max-width: 991px) { .pt-help__links { justify-content: flex-start; } }

.pt-help__link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .95rem;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-pill);
    background: var(--pt-card);
    color: var(--pt-text-dim);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--pt-speed) var(--pt-ease);
}
.pt-help__link i { color: var(--pt-text-mute); font-size: 12px; }
.pt-help__link:hover {
    border-color: var(--pt-brand);
    background: var(--pt-brand-soft);
    color: var(--pt-brand);
    text-decoration: none;
}
.pt-help__link:hover i { color: var(--pt-brand); }


/* ==========================================================================
   26. WHITE SPOTS — cobertura dos seletores do theme.css do WHMCS
   Levantados por varredura do proprio theme.css: 77 regras pintam fundo
   branco/claro. As que sobreviviam ao dark estao todas aqui, em tokens.
   ========================================================================== */

/* --- O pior deles: o WHMCS pinta CADA celula de tabela de branco com
       !important. Era a origem das "tabelas brancas". --- */
.table td,
.table th,
.table tbody td,
.table thead th,
.table tfoot td {
    background-color: transparent !important;
    color: var(--pt-text);
    border-color: var(--pt-divider) !important;
}
.table thead th,
.table .thead-light th,
.table .thead-dark th {
    background-color: var(--pt-card-inset) !important;
    color: var(--pt-text-dim) !important;
    border-color: var(--pt-border-strong) !important;
}
.table-striped tbody tr:nth-of-type(odd) td { background-color: rgba(148, 163, 184, .04) !important; }
.table-hover tbody tr:hover td { background-color: var(--pt-card-hover) !important; color: var(--pt-text-strong); }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--pt-divider) !important; }
.table-active td, .table-active th, tr.table-active { background-color: var(--pt-brand-soft) !important; }

/* --- Botoes e selos claros do Bootstrap --- */
.btn-light,
.btn-light.disabled,
.btn-light:disabled,
.btn-outline-light,
.btn-outline-light:hover,
.badge-light,
.btn-secondary {
    background-color: var(--pt-card-inset) !important;
    border-color: var(--pt-border-strong) !important;
    color: var(--pt-text-dim) !important;
}
.btn-light:hover, .btn-outline-light:hover, .btn-secondary:hover {
    background-color: var(--pt-card-hover) !important;
    color: var(--pt-text-strong) !important;
}
.btn-white, .btn-default {
    background-color: transparent !important;
    border-color: var(--pt-border-strong) !important;
    color: var(--pt-text-dim) !important;
}
.btn-default:hover {
    background-color: var(--pt-card-hover) !important;
    color: var(--pt-text-strong) !important;
}

/* --- Estados desabilitado / somente leitura --- */
.form-control:disabled,
.form-control[readonly],
.custom-select:disabled,
.custom-file-input[disabled] ~ .custom-file-label,
.custom-file-input:disabled ~ .custom-file-label {
    background-color: var(--pt-bg-deep) !important;
    color: var(--pt-text-mute) !important;
    border-color: var(--pt-border) !important;
    opacity: 1;
}

/* --- Checkbox / radio / switch customizados --- */
.custom-control-label::before {
    background-color: var(--pt-card-inset) !important;
    border-color: var(--pt-border-strong) !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--pt-brand) !important;
    border-color: var(--pt-brand) !important;
}
.custom-control-input[disabled] ~ .custom-control-label::before,
.custom-control-input:disabled ~ .custom-control-label::before {
    background-color: var(--pt-bg-deep) !important;
}
.custom-control-label { color: var(--pt-text-dim); }
/* A bolinha do switch fica clara de proposito: e o "pino" sobre a trilha. */
.custom-switch .custom-control-label::after { background-color: var(--pt-text-dim) !important; }
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: var(--pt-on-brand) !important;
}

/* --- Select e file input customizados --- */
.custom-select,
.custom-file-label {
    background-color: var(--pt-card-inset) !important;
    border-color: var(--pt-border-strong) !important;
    color: var(--pt-text) !important;
}
.custom-file-label::after {
    background-color: var(--pt-bg-elev) !important;
    border-color: var(--pt-border-strong) !important;
    color: var(--pt-text-dim) !important;
}

/* --- Paginacao --- */
.page-link,
.page-item.disabled .page-link,
.page-item .page-link {
    background-color: transparent !important;
    border-color: var(--pt-border) !important;
    color: var(--pt-text-dim) !important;
}
.page-link:hover {
    background-color: var(--pt-card-hover) !important;
    border-color: var(--pt-border-strong) !important;
    color: var(--pt-text-strong) !important;
}
.page-item.active .page-link {
    background-color: var(--pt-brand-soft) !important;
    border-color: var(--pt-brand-ring) !important;
    color: var(--pt-brand) !important;
}

/* --- Abas ativas, progresso, miniaturas, dropdown hover --- */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background-color: var(--pt-card) !important;
    border-color: var(--pt-border) var(--pt-border) var(--pt-card) !important;
    color: var(--pt-brand) !important;
}
.progress { background-color: var(--pt-bg-deep) !important; }
.progress-bar { background-color: var(--pt-brand) !important; }
.img-thumbnail {
    background-color: var(--pt-card-inset) !important;
    border-color: var(--pt-border) !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--pt-card-hover) !important;
    color: var(--pt-text-strong) !important;
}
.dropdown-divider { border-top-color: var(--pt-divider) !important; }
.popover-header { background-color: var(--pt-card-inset) !important; color: var(--pt-text-strong) !important; }
.popover-body { color: var(--pt-text-dim) !important; }
.list-group-item.disabled,
.list-group-item:disabled {
    background-color: transparent !important;
    color: var(--pt-text-mute) !important;
}
.carousel-indicators li { background-color: var(--pt-text-mute) !important; }
.close, .close:hover { color: var(--pt-text-dim) !important; text-shadow: none !important; opacity: .8; }

/* --- Tooltips --- */
.tooltip-inner {
    background-color: var(--pt-bg-elev) !important;
    color: var(--pt-text) !important;
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius-sm) !important;
}
.tooltip .arrow::before,
.bs-tooltip-top .arrow::before { border-top-color: var(--pt-bg-elev) !important; }
.bs-tooltip-bottom .arrow::before { border-bottom-color: var(--pt-bg-elev) !important; }
.bs-tooltip-left .arrow::before { border-left-color: var(--pt-bg-elev) !important; }
.bs-tooltip-right .arrow::before { border-right-color: var(--pt-bg-elev) !important; }

/* --- Utilitarios de fundo do Bootstrap --- */
.bg-white { background-color: var(--pt-card) !important; }
.bg-light { background-color: var(--pt-card-inset) !important; }
.bg-secondary { background-color: var(--pt-card-inset) !important; }
.text-dark { color: var(--pt-text-strong) !important; }
.text-black-50 { color: var(--pt-text-mute) !important; }
.border, .border-top, .border-bottom, .border-left, .border-right {
    border-color: var(--pt-border) !important;
}

/* --- O body do proprio theme.css --- */
body { background-color: var(--pt-bg) !important; }


/* ==========================================================================
   27. LOGIN CENTRADO — card flutuando sobre fundo escuro
   Substitui o split-screen. Referencia de tom: Stripe / Vercel.
   ========================================================================== */

.pt-authpanel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    padding: 3rem 1.5rem;
    overflow: hidden;
    isolation: isolate;
    background: var(--pt-bg);
}
@media (max-width: 575px) { .pt-authpanel { padding: 2rem 1.15rem; } }

/* Atmosfera: dois halos suaves e uma malha discreta, tudo atras do card. */
.pt-authpanel::before {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: -2;
    background:
        radial-gradient(42rem 26rem at 22% 12%, var(--pt-auth-glow-a), transparent 62%),
        radial-gradient(38rem 24rem at 80% 88%, var(--pt-auth-glow-b), transparent 64%);
    filter: blur(28px);
    pointer-events: none;
}
.pt-authpanel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .45;
    background-image:
        linear-gradient(rgba(148, 163, 184, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, .05) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 80%);
    -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 80%);
    pointer-events: none;
}

/* Alternador de tema no canto (o header esta oculto nesta pagina). */
.pt-authpanel__toggle {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    z-index: 5;
}
@media (max-width: 575px) { .pt-authpanel__toggle { top: .75rem; right: 1rem; } }

/* --- A coluna central --- */
.pt-authbox {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 424px;
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* O card em si reaproveita .pt-auth__card, com sombra mais generosa. */
.pt-authbox .pt-auth__card {
    max-width: none;
    width: 100%;
    padding: 2.5rem;
    border-radius: var(--pt-radius-card);
    box-shadow: var(--pt-shadow-card);
}
@media (max-width: 575px) {
    .pt-authbox .pt-auth__card { padding: 1.75rem 1.35rem; }
}

.pt-authbox .pt-auth__title { font-size: 24px; }
.pt-authbox .pt-auth__subtitle { margin-bottom: 1.85rem; }

.pt-authbox__legal {
    margin: 1.25rem 0 0;
    font-size: 12px;
    color: var(--pt-text-mute);
    text-align: center;
}

/* --- O split antigo continua servindo a recuperacao de senha --- */

/* ==========================================================================
   28. TOGGLE NO HEADER — variante compacta
   O botao mora na topbar (ao lado das notificacoes / conta), entao precisa
   de uma altura menor que a versao solta usada no login.
   ========================================================================== */

.pt-toggle-slot { margin-right: .65rem; display: inline-flex; align-items: center; }

.pt-toggle-slot .pt-themetoggle {
    height: 30px;
    padding: 0 .7rem;
    font-size: 12px;
    background: transparent;
    border-color: var(--pt-border);
    color: var(--pt-text-mute);
}
.pt-toggle-slot .pt-themetoggle:hover {
    background: var(--pt-card);
    border-color: var(--pt-border-strong);
    color: var(--pt-text-strong);
}
.pt-toggle-slot .pt-themetoggle i { font-size: 12px; }

/* Em tela estreita a topbar fica apertada: fica so o icone. */
@media (max-width: 767px) {
    .pt-toggle-slot .pt-themetoggle { padding: 0; width: 30px; justify-content: center; }
    .pt-toggle-slot .pt-themetoggle__light,
    .pt-toggle-slot .pt-themetoggle__dark { font-size: 0; gap: 0; }
    .pt-toggle-slot .pt-themetoggle i { font-size: 13px; }
}

/* --- Logomarca no topo do card de autenticacao --- */
.pt-auth__logoslot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    margin-bottom: 1.6rem;
    min-height: 44px;
}
.pt-auth__logoslot img { max-height: 44px; max-width: 220px; width: auto; }
.pt-auth__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #34d399, #059669);
    color: #04241a;
    font-size: 1.05rem;
    box-shadow: 0 8px 22px -10px rgba(16, 185, 129, .8);
}

/* O titulo e o subtitulo ficam centrados junto com a marca. */
.pt-authbox .pt-auth__title,
.pt-authbox .pt-auth__subtitle { text-align: center; }
.pt-authbox .pt-auth__subtitle { margin-bottom: 1.85rem; }

/* ==========================================================================
   30. BREADCRUMB FORA + SHELL DE AUTENTICACAO SERVIDO PELO SERVIDOR
   ========================================================================== */

/* O breadcrumb ("Pagina inicial do portal / Area do Cliente") sai de todas as
   telas. O <nav> ja nao e renderizado nas paginas de auth (header.tpl); aqui
   ele some tambem no resto do sistema. */
.master-breadcrumb,
nav[aria-label="breadcrumb"],
.breadcrumb { display: none !important; }

/* Sem a faixa do breadcrumb, o conteudo precisa do respiro de volta. */
#main-body { padding-top: 32px; }

/* --- Shell de autenticacao ---
   .pt-authshell vem do header.tpl ({if $ptAuthPage}), entao nao depende de JS.
   A classe .pt-authpage no <body> tambem vem do servidor; o script inline do
   login.tpl continua como rede de seguranca caso o hook nao esteja instalado. */
#main-body.pt-authshell,
body.pt-authpage #main-body {
    padding: 0 !important;
    margin: 0 !important;
    background: var(--pt-bg) !important;
    display: flex;
    align-items: stretch;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Neutraliza a grade do WHMCS: container, row, colunas e o padding delas.
   Sem isto o card fica preso na coluna e encosta na esquerda. */
#main-body.pt-authshell > .container,
#main-body.pt-authshell > div,
body.pt-authpage #main-body > .container,
body.pt-authpage #main-body > div {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    flex: 1 1 auto !important;
}
#main-body.pt-authshell .row,
body.pt-authpage #main-body .row {
    width: 100% !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    align-items: stretch !important;
}
#main-body.pt-authshell .primary-content,
body.pt-authpage #main-body .primary-content {
    flex: 1 1 auto !important;
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    float: none !important;
}
/* A sidebar nao existe no login, mas se algum hook injetar uma, ela sai. */
#main-body.pt-authshell .row > .col-lg-4.col-xl-3,
body.pt-authpage #main-body .row > .col-lg-4.col-xl-3 { display: none !important; }

/* O painel toma a largura toda do que sobrou. */
#main-body.pt-authshell .pt-authpanel,
body.pt-authpage .pt-authpanel { flex: 1 1 auto; width: 100%; }

/* ==========================================================================
   31. LOGIN — fuga definitiva da grade do WHMCS
   O painel deixa de depender de .pt-authshell / .pt-authpage (que vem do hook)
   para se centralizar. Com position:fixed ele ignora .container, .row,
   .primary-content e qualquer coluna que o WHMCS coloque em volta - o card
   fica no centro da viewport mesmo se o hook nao estiver instalado.
   ========================================================================== */

.pt-authpanel {
    position: fixed;
    inset: 0;
    z-index: 2000;
    width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;          /* card alto continua rolavel */
    /* Sem isto, a barra de rolagem interna aparece so de um lado e desloca o
       card ~7px do centro. O gutter simetrico mantem a centralizacao exata
       com ou sem barra. */
    scrollbar-gutter: stable both-edges;
    overscroll-behavior: contain;
    background: var(--pt-bg);
    box-sizing: border-box;
}

/* Some com o cromo mesmo sem o hook: a presenca do painel ja e o sinal.
   O :has() cobre navegadores modernos; o body.pt-authpage (script do
   login.tpl) e a classe do header.tpl cobrem o resto. */
body:has(.pt-authpanel) #header,
body:has(.pt-authpanel) .master-breadcrumb,
body:has(.pt-authpanel) #footer,
body:has(.pt-authpanel) .footer { display: none !important; }
body:has(.pt-authpanel) { overflow: hidden; }

/* Em tela baixa o card precisa de ar em cima e embaixo. */
@media (max-height: 720px) {
    .pt-authpanel { align-items: flex-start; padding-top: 3rem; padding-bottom: 3rem; }
}

/* ==========================================================================
   33. REAFIRMACAO DOS CAMPOS DE AUTENTICACAO
   As regras genericas da secao 32 usam #main-body e vem depois das do login.
   Aqui a geometria do campo com floating label e restabelecida por ultimo.
   ========================================================================== */

#main-body .pt-field__input,
.pt-field__input {
    height: 64px;
    min-height: 64px;
    padding: 26px 16px 8px 46px !important;
    border-radius: var(--pt-radius-sm) !important;
    font-size: 15px;
    line-height: 1.2;
}
#main-body .pt-field--pw .pt-field__input,
.pt-field--pw .pt-field__input { padding-right: 52px !important; }

/* Label e icone acompanham o mesmo recuo do texto. */
#main-body .pt-field__label,
.pt-field__label { left: 46px; }
#main-body .pt-field__icon,
.pt-field__icon { left: 17px; }

/* O olho nao herda o raio/padding generico de botao. */
#main-body .pt-field__reveal,
.pt-field__reveal {
    border-radius: 8px !important;
    padding: 0 !important;
    min-height: 0 !important;
    width: 36px;
    height: 36px;
}

/* Pilulas que a secao 32 arredondaria para 12px. */
#main-body .pt-badge,
#main-body .pt-status,
#main-body .pt-help__link,
#main-body .pt-welcome__status,
#main-body .pt-launch__eyebrow,
#main-body .pt-themetoggle,
#main-body .pt-panel .card-title .float-right .btn,
#main-body .pt-tabs .nav-link,
#main-body .nav-tabs.pt-tabs .nav-link { border-radius: var(--pt-radius-pill) !important; }

/* Botoes proprios mantem o proprio raio. */
#main-body .pt-authbtn { border-radius: var(--pt-radius-sm) !important; }
#main-body .pt-megabtn { border-radius: var(--pt-radius-lg) !important; }
#main-body .pt-btn--app { border-radius: var(--pt-radius) !important; }

/* ==========================================================================
   34. ICONE NAS LINHAS DE LISTAGEM (servicos, faturas)
   ========================================================================== */

.pt-rowitem {
    display: flex;
    align-items: center;
    gap: .8rem;
    text-align: left;
}
.pt-rowitem__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--pt-brand-soft);
    border: 1px solid var(--pt-brand-ring);
    color: var(--pt-brand);
    font-size: .9rem;
}
.pt-rowitem__icon--doc {
    background: var(--pt-blue-soft);
    border-color: var(--pt-border-strong);
    color: var(--pt-blue);
}
.pt-rowitem__text { min-width: 0; line-height: 1.35; }
.pt-rowitem__text strong { color: var(--pt-text-strong); }
.pt-rowitem__text a { font-size: .85em; }

@media (max-width: 575px) {
    .pt-rowitem { gap: .6rem; }
    .pt-rowitem__icon { width: 32px; height: 32px; font-size: .8rem; }
}

/* A primeira coluna da lista de servicos e o selo de SSL - fica estreita e
   sem o padding generoso da secao 32, para nao abrir um vao vazio. */
#main-body #tableServicesList td:first-child,
#main-body #tableServicesList th:first-child {
    width: 44px;
    padding-left: 10px !important;
    padding-right: 0 !important;
}

/* ==========================================================================
   35. VAZAMENTOS RESTANTES DO TEMA CLARO
   Tres superficies que escaparam das varreduras anteriores porque nao usam
   .card/.panel: o corpo do anuncio, o card de produto da loja e a barra de
   ferramentas do editor de tickets.
   ========================================================================== */

/* --- Anuncios ---
   theme.css: .announcements .announcement article { background-color:#f5f5f5 }
   Caixa clara com texto escuro = texto invisivel no dark. */
.announcements .announcement article,
.announcement article,
article.announcement-body {
    background-color: var(--pt-card-inset) !important;
    border-left: 3px solid var(--pt-brand) !important;
    border-radius: 0 var(--pt-radius-ui, 12px) var(--pt-radius-ui, 12px) 0;
    color: var(--pt-text) !important;
    padding: 1.15rem 1.35rem !important;
}
.announcements .announcement article p,
.announcement article p,
.announcement article span,
.announcement article div { color: var(--pt-text) !important; }
.announcements .announcement h3,
.announcements .announcement a { color: var(--pt-brand); }
.announcements .announcement ul.list-inline,
.announcement .text-muted { color: var(--pt-text-mute) !important; }

/* --- Card de produto da loja ---
   O markup e <div class="product"> com <header>/<footer> - nao passa por
   .card nem .panel, entao ficou branco. */
.products .product,
.product.clearfix,
#products .product {
    background-color: var(--pt-card) !important;
    border: 1px solid var(--pt-border) !important;
    border-radius: var(--pt-radius-ui, 12px) !important;
    box-shadow: var(--pt-shadow-sm) !important;
    color: var(--pt-text) !important;
    overflow: hidden;
}
.products .product > header,
.product.clearfix > header {
    background-color: var(--pt-card-inset) !important;
    border-bottom: 1px solid var(--pt-divider) !important;
    color: var(--pt-text-strong) !important;
    padding: 1.05rem 1.35rem !important;
    font-weight: 700;
}
.products .product > header span,
.products .product header a { color: var(--pt-text-strong) !important; }
.products .product .product-desc,
.products .product > footer {
    background-color: transparent !important;
    color: var(--pt-text-dim) !important;
    padding: 1.15rem 1.35rem !important;
}
.products .product .product-desc ul { color: var(--pt-text-dim) !important; }
.products .product .product-pricing,
.product-pricing { color: var(--pt-text-strong) !important; }
.products .product .price,
.product-pricing .price {
    color: var(--pt-brand) !important;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.02em;
}
.products .product .product-pricing small,
.product-pricing .cycle { color: var(--pt-text-mute) !important; }
.product-recommendations,
.product-recommendations-container,
.product-recommendation {
    background-color: var(--pt-card-inset) !important;
    border-color: var(--pt-border) !important;
    color: var(--pt-text) !important;
}
/* Faixa de categorias e cabecalhos da loja */
.store-header, .store-nav, .category-header {
    background-color: transparent !important;
    color: var(--pt-text) !important;
}

/* --- Barra de ferramentas do editor de tickets ---
   O CSS do EasyMDE e injetado por JS, entao entra DEPOIS deste arquivo.
   O !important resolve a ordem; o `inherit` no <i> resolve o icone, que tem
   cor propria e por isso continuava azul. */
.editor-toolbar a,
.editor-toolbar button,
.editor-toolbar .easymde-dropdown {
    color: var(--pt-text-dim) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.editor-toolbar a i,
.editor-toolbar button i,
.editor-toolbar a::before,
.editor-toolbar button::before,
.editor-toolbar a svg,
.editor-toolbar button svg { color: inherit !important; fill: currentColor !important; }

.editor-toolbar a:hover,
.editor-toolbar button:hover,
.editor-toolbar a.active,
.editor-toolbar button.active,
.editor-toolbar a.enabled,
.editor-toolbar button.enabled {
    background: var(--pt-card-hover) !important;
    border-color: var(--pt-border) !important;
    color: var(--pt-text-strong) !important;
}
.editor-toolbar i.separator {
    border-left-color: var(--pt-divider) !important;
    border-right-color: transparent !important;
}
/* O botao Preview vinha com destaque azul do EasyMDE. */
.editor-toolbar button.preview,
.editor-toolbar a.preview,
.editor-toolbar button[title*="Preview"],
.editor-toolbar a[title*="Preview"] {
    background: transparent !important;
    color: var(--pt-text-dim) !important;
}
.editor-toolbar button.preview.active,
.editor-toolbar a.preview.active {
    background: var(--pt-brand-soft) !important;
    color: var(--pt-brand) !important;
    border-color: var(--pt-brand-ring) !important;
}

/* --- Selo neutro: usado quando o cliente nao tem servico ativo.
       Verde ali seria uma mentira visual. --- */
.pt-welcome__status--neutro {
    background: var(--pt-card-inset);
    border-color: var(--pt-border-strong);
    color: var(--pt-text-mute);
}
.pt-welcome__sub strong { color: var(--pt-text-strong); font-weight: 700; }

/* ==========================================================================
   37. CAMPO DE SENHA E "LEMBRE DE MIM"
   ========================================================================== */

/* --- Label flutuante quando o Chrome autopreenche ---
   O Chrome preenche a senha mas esconde o valor do DOM ate haver interacao do
   usuario (protecao de credencial). Para o CSS o campo continua vazio, entao
   :placeholder-shown segue verdadeiro e o label nao sobe - ficando em cima
   dos pontinhos que o navegador desenha.

   Cada pseudo-classe fica em regra SEPARADA de proposito: numa lista unica,
   um seletor nao suportado invalidaria a regra inteira e levaria junto os
   outros. */
#main-body .pt-field__input:-webkit-autofill + .pt-field__label {
    top: 10px;
    transform: none;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pt-text-mute);
}
#main-body .pt-field__input:autofill + .pt-field__label {
    top: 10px;
    transform: none;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pt-text-mute);
}
/* Com o foco no campo autopreenchido, o label fica verde como nos demais. */
#main-body .pt-field__input:-webkit-autofill:focus + .pt-field__label { color: var(--pt-brand); }
#main-body .pt-field__input:autofill:focus + .pt-field__label { color: var(--pt-brand); }

/* --- "Lembre de mim" ---
   theme.css: .form-check-input { position:absolute; margin-left:-1.25rem }
   Absoluto e com margem negativa, o checkbox sai do fluxo e o gap do flex
   deixa de valer - por isso ele encostava no texto. */
#main-body label.pt-check,
label.pt-check {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    position: relative;
    padding-left: 0;
    margin: 0;
    cursor: pointer;
}
#main-body label.pt-check .form-check-input,
#main-body label.pt-check input[type="checkbox"],
label.pt-check input[type="checkbox"] {
    position: static !important;
    margin: 0 !important;
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    accent-color: var(--pt-brand);
    cursor: pointer;
}

/* --- Valor em formato de data na faixa de numeros.
       36px seria grande demais para "24/08/2026"; o ano fica menor para o
       dia/mes continuar sendo o que se le primeiro. --- */
.pt-strip__value--data {
    font-size: 30px;
    letter-spacing: -.03em;
    white-space: nowrap;
}
.pt-strip__value--data small {
    font-size: .55em;
    font-weight: 700;
    color: var(--pt-text-mute);
    letter-spacing: 0;
}
@media (max-width: 575px) {
    .pt-strip__value--data { font-size: 24px; }
}


/* ==========================================================================
   39. SAAS 2026 — REESCRITA VISUAL GLOBAL
   ==========================================================================
   Esta secao SUBSTITUI a antiga "32. Upgrade global", que foi removida. Ali
   eram remendos sobre o visual do WHMCS; aqui e um sistema fechado.

   Ordem de leitura: superficie -> tabelas -> formularios -> abas -> cards.
   Tudo em tokens, entao acompanha claro e escuro sem regra duplicada.
   ========================================================================== */

:root {
    --pt-r-card:   16px;   /* cartoes e paineis        */
    --pt-r-field:   8px;   /* inputs, selects, botoes  */
    --pt-r-pill:  999px;   /* abas, selos, paginacao   */
    --pt-lift:    0 4px 6px -1px rgba(15, 23, 42, .05),
                  0 2px 4px -2px rgba(15, 23, 42, .05);
    --pt-lift-2:  0 10px 24px -8px rgba(15, 23, 42, .10),
                  0 2px 6px -2px rgba(15, 23, 42, .06);
    --pt-linha:   rgba(15, 23, 42, .06);
    --pt-hover:   #f1f5f9;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --pt-lift:   0 4px 6px -1px rgba(0, 0, 0, .30), 0 2px 4px -2px rgba(0, 0, 0, .25);
        --pt-lift-2: 0 10px 24px -8px rgba(0, 0, 0, .45), 0 2px 6px -2px rgba(0, 0, 0, .35);
        --pt-linha:  rgba(148, 163, 184, .10);
        --pt-hover:  #24334a;
    }
}
:root[data-theme="dark"] {
    --pt-lift:   0 4px 6px -1px rgba(0, 0, 0, .30), 0 2px 4px -2px rgba(0, 0, 0, .25);
    --pt-lift-2: 0 10px 24px -8px rgba(0, 0, 0, .45), 0 2px 6px -2px rgba(0, 0, 0, .35);
    --pt-linha:  rgba(148, 163, 184, .10);
    --pt-hover:  #24334a;
}
:root[data-theme="light"] {
    --pt-lift:   0 4px 6px -1px rgba(15, 23, 42, .05), 0 2px 4px -2px rgba(15, 23, 42, .05);
    --pt-lift-2: 0 10px 24px -8px rgba(15, 23, 42, .10), 0 2px 6px -2px rgba(15, 23, 42, .06);
    --pt-linha:  rgba(15, 23, 42, .06);
    --pt-hover:  #f1f5f9;
}


/* --------------------------------------------------------------------------
   39.1  SUPERFICIE — o conteudo flutua sobre um fundo gelo
   -------------------------------------------------------------------------- */

body,
body.primary-bg-color { background: var(--pt-bg) !important; }

#main-body {
    background: transparent !important;
    padding-top: 32px;
    padding-bottom: 64px;
}

/* Cada bloco de pagina interna vira uma superficie flutuante. */
#main-body .primary-content > .card,
#main-body .primary-content > .panel,
#main-body .table-container,
#main-body .tab-content:not(.pt-tabpanes):not(.margin-bottom) {
    background: var(--pt-card);
    border: 0;
    border-radius: var(--pt-r-card);
    box-shadow: var(--pt-lift);
}

/* Sidebar tambem deixa de ser caixa com borda dura. */
#main-body .sidebar .panel,
#main-body .sidebar .card,
.panel-sidebar, .card-sidebar {
    background: var(--pt-card) !important;
    border: 0 !important;
    border-radius: var(--pt-r-card) !important;
    box-shadow: var(--pt-lift) !important;
    overflow: hidden;
}
.panel-sidebar .panel-heading,
.card-sidebar .card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--pt-linha) !important;
    padding: 1rem 1.25rem !important;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: -.01em;
}
#main-body .sidebar .list-group-item {
    border: 0 !important;
    border-top: 1px solid var(--pt-linha) !important;
    padding: .85rem 1.25rem !important;
    font-size: .87rem;
}
#main-body .sidebar .list-group-item:first-child { border-top: 0 !important; }


/* --------------------------------------------------------------------------
   39.2  TABELAS — sem grade, linha como cartao horizontal
   -------------------------------------------------------------------------- */

#main-body .table,
#main-body table.dataTable,
#main-body .table-list {
    width: 100%;
    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* Cabecalho: sem fundo, texto pequeno em caixa alta. */
#main-body .table thead th,
#main-body table.dataTable thead th,
#main-body .table .thead-light th {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--pt-linha) !important;
    padding: 0 20px 12px !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pt-text-mute) !important;
    white-space: nowrap;
}

/* Celulas: unica linha divisoria, muito sutil. */
#main-body .table tbody td,
#main-body table.dataTable tbody td,
#main-body .table-list tbody td {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--pt-linha) !important;
    padding: 18px 20px !important;
    vertical-align: middle;
    color: var(--pt-text) !important;
    font-size: .9rem;
}
#main-body .table tbody tr:last-child td,
#main-body table.dataTable tbody tr:last-child td { border-bottom: 0 !important; }

/* Zera o listrado ANTES do hover. Se vier depois, .odd/.even tem
   especificidade maior (mais elementos no seletor) e mata o hover em metade
   das linhas - foi exatamente o que aconteceu na primeira versao. */
#main-body table.dataTable tbody tr.odd td,
#main-body table.dataTable tbody tr.even td,
#main-body .table-striped tbody tr:nth-of-type(odd) td { background: transparent !important; }

/* A linha inteira reage ao ponteiro. Os seletores com .odd/.even estao
   explicitos para empatar em especificidade e vencer por ordem. */
#main-body .table tbody tr,
#main-body table.dataTable tbody tr { transition: background var(--pt-speed) var(--pt-ease); }
#main-body .table tbody tr:hover td,
#main-body .table-hover tbody tr:hover td,
#main-body table.dataTable tbody tr:hover td,
#main-body table.dataTable tbody tr.odd:hover td,
#main-body table.dataTable tbody tr.even:hover td,
#main-body .table-striped tbody tr:nth-of-type(odd):hover td {
    background: var(--pt-hover) !important;
    color: var(--pt-text-strong) !important;
}
#main-body .table-bordered,
#main-body .table-bordered td,
#main-body .table-bordered th { border: 0 !important; border-bottom: 1px solid var(--pt-linha) !important; }

/* O container da tabela e quem carrega o cartao. */
#main-body .table-container {
    padding: 20px 4px 8px;
    overflow-x: auto;
}

/* Setas de ordenacao discretas. */
#main-body table.dataTable thead .sorting,
#main-body table.dataTable thead .sorting_asc,
#main-body table.dataTable thead .sorting_desc { cursor: pointer; }
#main-body table.dataTable thead .sorting::after,
#main-body table.dataTable thead .sorting_asc::after,
#main-body table.dataTable thead .sorting_desc::after { opacity: .35; font-size: .8em; }
#main-body table.dataTable thead .sorting_asc::after,
#main-body table.dataTable thead .sorting_desc::after { opacity: .9; color: var(--pt-brand); }

/* --- Controles do DataTables --- */
#main-body .dataTables_wrapper { padding: 4px 20px 16px; }
#main-body .dataTables_length,
#main-body .dataTables_filter,
#main-body .dataTables_info { color: var(--pt-text-mute) !important; font-size: .82rem; }
#main-body .dataTables_length { padding-top: 8px; }

#main-body .dataTables_filter input,
#main-body .dataTables_length select {
    background: var(--pt-card-inset) !important;
    border: 1px solid var(--pt-border) !important;
    border-radius: var(--pt-r-field) !important;
    padding: 8px 12px !important;
    margin-left: 8px;
    color: var(--pt-text) !important;
    font-size: .85rem;
    box-shadow: none !important;
}
#main-body .dataTables_filter input:focus,
#main-body .dataTables_length select:focus {
    border-color: var(--pt-brand) !important;
    box-shadow: 0 0 0 3px var(--pt-brand-ring) !important;
    outline: none;
}

#main-body .dataTables_paginate { padding-top: 12px; }
#main-body .dataTables_paginate .paginate_button,
#main-body .pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    margin: 0 2px !important;
    padding: 0 10px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--pt-r-pill) !important;
    color: var(--pt-text-dim) !important;
    font-size: .84rem;
    font-weight: 600;
    box-shadow: none !important;
    transition: all var(--pt-speed) var(--pt-ease);
}
#main-body .dataTables_paginate .paginate_button:hover,
#main-body .pagination .page-link:hover {
    background: var(--pt-hover) !important;
    border-color: transparent !important;
    color: var(--pt-text-strong) !important;
}
#main-body .dataTables_paginate .paginate_button.current,
#main-body .pagination .page-item.active .page-link {
    background: var(--pt-brand) !important;
    border-color: var(--pt-brand) !important;
    color: var(--pt-on-brand) !important;
}
#main-body .dataTables_paginate .paginate_button.disabled,
#main-body .pagination .page-item.disabled .page-link {
    opacity: .35;
    pointer-events: none;
}


/* --------------------------------------------------------------------------
   39.3  FORMULARIOS
   -------------------------------------------------------------------------- */

#main-body .form-control:not(.pt-field__input),
#main-body .custom-select,
#main-body select,
#main-body textarea,
/* A guarda :not(.pt-field__input) precisa estar em CADA seletor. Sem ela,
   #main-body input[type=email] (1,1,1) vence #main-body .pt-field__input
   (1,1,0) e apaga o recuo que abre espaco para o icone do login. */
#main-body input[type="text"]:not(.pt-field__input),
#main-body input[type="email"]:not(.pt-field__input),
#main-body input[type="password"]:not(.pt-field__input),
#main-body input[type="tel"]:not(.pt-field__input),
#main-body input[type="url"]:not(.pt-field__input),
#main-body input[type="number"]:not(.pt-field__input),
#main-body input[type="search"]:not(.pt-field__input),
#main-body input[type="date"]:not(.pt-field__input) {
    background-color: var(--pt-card) !important;
    border: 1px solid var(--pt-border-strong) !important;
    border-radius: var(--pt-r-field) !important;
    padding: 12px 16px !important;
    min-height: 46px;
    color: var(--pt-text) !important;
    font-size: .92rem;
    line-height: 1.4;
    box-shadow: none !important;
    transition: border-color var(--pt-speed) var(--pt-ease),
                box-shadow var(--pt-speed) var(--pt-ease);
}
#main-body .form-control:not(.pt-field__input):focus,
#main-body .custom-select:focus,
#main-body select:focus,
#main-body textarea:focus,
#main-body input:not(.pt-field__input):focus {
    outline: 0 !important;
    border-color: var(--pt-brand) !important;
    box-shadow: 0 0 0 3px var(--pt-brand-ring) !important;
}
#main-body textarea { min-height: 120px; resize: vertical; }
#main-body .form-control::placeholder { color: var(--pt-text-mute) !important; }

#main-body label,
#main-body .control-label,
#main-body .col-form-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--pt-text-dim) !important;
    margin-bottom: 6px;
}
#main-body .form-group { margin-bottom: 20px; }
#main-body .input-group-text {
    background: var(--pt-card-inset) !important;
    border: 1px solid var(--pt-border-strong) !important;
    border-radius: var(--pt-r-field) 0 0 var(--pt-r-field) !important;
    color: var(--pt-text-mute) !important;
}
#main-body .form-text, #main-body .help-block {
    font-size: .8rem;
    color: var(--pt-text-mute) !important;
    margin-top: 6px;
}

/* Botoes gerais do sistema. */
#main-body .btn {
    border-radius: var(--pt-r-field) !important;
    padding: 11px 20px;
    font-size: .88rem;
    font-weight: 600;
    box-shadow: none !important;
    transition: all var(--pt-speed) var(--pt-ease);
}
#main-body .btn-primary,
#main-body .btn-success {
    background: var(--pt-brand) !important;
    border-color: var(--pt-brand) !important;
    color: var(--pt-on-brand) !important;
}
#main-body .btn-primary:hover,
#main-body .btn-success:hover {
    background: var(--pt-brand-hover) !important;
    border-color: var(--pt-brand-hover) !important;
    transform: translateY(-1px);
}


/* --------------------------------------------------------------------------
   39.4  ABAS — sem caixa, pilula suave na ativa
   -------------------------------------------------------------------------- */

#main-body .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border: 0 !important;
    border-bottom: 1px solid var(--pt-linha) !important;
    padding: 0 0 10px;
    margin-bottom: 24px;
}
#main-body .nav-tabs .nav-item { margin: 0 !important; }
#main-body .nav-tabs .nav-link {
    border: 0 !important;
    border-radius: var(--pt-r-pill) !important;
    padding: 8px 16px !important;
    font-size: .86rem;
    font-weight: 600;
    color: var(--pt-text-mute) !important;
    background: transparent !important;
    transition: all var(--pt-speed) var(--pt-ease);
}
#main-body .nav-tabs .nav-link:hover {
    background: var(--pt-hover) !important;
    color: var(--pt-text-strong) !important;
}
#main-body .nav-tabs .nav-link.active,
#main-body .nav-tabs .nav-item.show .nav-link {
    background: var(--pt-brand-soft) !important;
    color: var(--pt-brand) !important;
    border: 0 !important;
}
#main-body .nav-pills .nav-link.active { background: var(--pt-brand) !important; color: var(--pt-on-brand) !important; }


/* --------------------------------------------------------------------------
   39.5  CARTOES E PAINEIS
   -------------------------------------------------------------------------- */

#main-body .panel:not(.pt-panel),
#main-body .card:not(.pt-panel):not(.pt-card):not(.pt-auth__card),
#main-body .panel-default:not(.pt-panel),
#main-body .well {
    background: var(--pt-card) !important;
    border: 0 !important;
    border-radius: var(--pt-r-card) !important;
    box-shadow: var(--pt-lift) !important;
    margin-bottom: 24px;
    overflow: hidden;
}
#main-body .panel:not(.pt-panel) > .panel-heading,
#main-body .card:not(.pt-panel) > .card-header {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--pt-linha) !important;
    padding: 18px 24px !important;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--pt-text-strong) !important;
}
#main-body .panel:not(.pt-panel) > .panel-body,
#main-body .card:not(.pt-panel) > .card-body { padding: 24px !important; background: transparent !important; }
#main-body .panel:not(.pt-panel) > .panel-footer,
#main-body .card:not(.pt-panel) > .card-footer {
    background: var(--pt-card-inset) !important;
    border: 0 !important;
    border-top: 1px solid var(--pt-linha) !important;
    padding: 16px 24px !important;
}
#main-body .panel-title, #main-body .card-title { margin: 0; font-size: inherit; font-weight: inherit; }

/* Alertas e selos acompanham o mesmo raio. */
#main-body .alert {
    border: 0 !important;
    border-left: 3px solid transparent !important;
    border-radius: var(--pt-r-field) !important;
    padding: 16px 20px !important;
    box-shadow: var(--pt-lift) !important;
}
#main-body .badge, #main-body .label {
    border-radius: var(--pt-r-pill) !important;
    padding: .3rem .7rem !important;
    font-size: .72rem;
    font-weight: 700;
}

/* Titulos de pagina interna. */
#main-body h1, #main-body h2, #main-body h3 {
    letter-spacing: -.025em;
    color: var(--pt-text-strong);
}
#main-body hr { border-color: var(--pt-linha); }

/* --------------------------------------------------------------------------
   39.6  HEADER UNICO — 70px, uma barra so
   -------------------------------------------------------------------------- */

/* #header{position:relative} da secao 2 tem especificidade de ID e vencia o
   sticky. Prefixo aqui para a barra grudar no topo ao rolar. */
#header.pt-header,
.pt-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: var(--pt-card);
    border-bottom: 1px solid var(--pt-linha);
    /* vidro: so onde o navegador suporta, senao fica o fundo solido acima */
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
}
@supports (backdrop-filter: blur(12px)) {
    html[data-theme="light"] .pt-header { background: rgba(255, 255, 255, .82); }
    html[data-theme="dark"]  .pt-header { background: rgba(30, 41, 59, .82); }
}

.pt-header__bar {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    height: 70px;
}

.pt-header__brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--pt-text-strong) !important;
    white-space: nowrap;
}
.pt-header__brand .logo-img { max-height: 36px; width: auto; }

/* --- Menu principal --- */
.pt-header__nav {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
.pt-header__nav .navbar-collapse { padding: 0; }

/* --- Lado direito --- */
.pt-header__actions {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex: 0 0 auto;
    margin-left: auto;
}


.pt-header__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--pt-r-pill);
    color: var(--pt-text-dim);
    font-size: .95rem;
    cursor: pointer;
    transition: all var(--pt-speed) var(--pt-ease);
}
.pt-header__icon:hover { background: var(--pt-hover); color: var(--pt-text-strong); }

.pt-header__dot {
    position: absolute;
    top: 4px; right: 2px;
    min-width: 17px; height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border-radius: var(--pt-r-pill);
    background: var(--pt-brand);
    color: var(--pt-on-brand);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}
.pt-header__dot.is-zero { display: none; }

/* Conta: o dropdown do secondaryNavbar vira um item so. */
.pt-header__account { display: flex; margin: 0; padding: 0; list-style: none; }
#header .pt-header__account > li > a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 38px;
    padding: 0 14px !important;
    border-radius: var(--pt-r-pill);
    background: var(--pt-card-inset);
    color: var(--pt-text) !important;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
}
#header .pt-header__account > li > a:hover { background: var(--pt-hover); }

/* O toggle de tema no header fica do tamanho dos outros icones. */
.pt-header__actions .pt-toggle-slot { margin: 0; }
.pt-header__actions .pt-themetoggle { height: 38px; border-radius: var(--pt-r-pill); }

/* --- Telas estreitas: o menu vira painel suspenso --- */
@media (max-width: 1199.98px) {
    .pt-header__nav {
        position: static;
        flex: 0 0 auto;
    }
    .pt-header__nav .navbar-collapse {
        position: absolute;
        left: 0; right: 0; top: 70px;
        padding: 1rem 1.25rem 1.25rem;
        background: var(--pt-card);
        border-bottom: 1px solid var(--pt-linha);
        box-shadow: var(--pt-lift-2);
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }
}
@media (max-width: 575px) {
    .pt-header__bar { gap: .6rem; }
    .pt-header__actions { gap: .15rem; }
    .pt-header__brand { font-size: .95rem; }
}


/* ==========================================================================
   40. CAMPOS COM ICONE — o texto nunca atropela a lupa
   ==========================================================================
   A regra global de .form-control da secao 39.3 usa
   `padding: 12px 16px !important`. Onde existe um icone posicionado por cima
   do campo, esse padding apaga o recuo que abria espaco para ele e o texto
   passa por baixo do icone.

   Esta secao vem depois e devolve o recuo em cada um desses casos.
   Todas as regras usam #main-body para empatar em especificidade e vencer
   por ordem de origem.
   ========================================================================== */

/* --- 1. Busca da Central de Ajuda (dashboard) --- */
/* Este input NAO tem a classe .form-control no template, entao
   #main-body .pt-help__search input daria so (1,1,1) e perderia para a regra
   global (1,2,1). O .pt-help a mais leva para (1,2,1) e o [type] para
   (1,3,1) - vence sem depender de ordem. */
#main-body .pt-help .pt-help__search input,
#main-body .pt-help .pt-help__search input[type="text"],
#main-body .pt-help__search input.form-control {
    padding: 0 46px 0 44px !important;
    height: 48px;
    min-height: 48px;
}
#main-body .pt-help__search .pt-help__icon { left: 16px; }


/* --- 3. Checkout e cadastro: .form-group.prepend-icon ---
   O tema so da o recuo dentro de #registration; o carrinho vive em
   #order-standard_cart e ficava sem recuo nenhum. Aqui vale nos dois. */
.prepend-icon { position: relative; }

/* ESPECIFICIDADE, com cuidado: a regra global e
   #main-body input[type=text]:not(.pt-field__input) = (1,2,1) - o :not()
   soma a especificidade do argumento. Por isso aqui usamos
   .form-group.prepend-icon > input.form-control = (1,3,1), que vence sem
   depender da ordem do arquivo. */
#main-body .form-group.prepend-icon > input.form-control,
#main-body .form-group.prepend-icon > input.field,
#main-body .form-group.prepend-icon > select.form-control,
#main-body .form-group.prepend-icon .input-group > input.form-control,
#main-body .form-group.prepend-icon .input-group > input.field,
#registration .form-group.prepend-icon > input.form-control,
#registration .form-group.prepend-icon > input.field,
#order-standard_cart .form-group.prepend-icon > input.form-control,
#order-standard_cart .form-group.prepend-icon > input.field {
    padding-left: 44px !important;
}

/* O icone acompanha a altura nova do campo (46px), senao fica alto demais. */
.prepend-icon > .field-icon,
#main-body .prepend-icon > .field-icon,
#registration .prepend-icon .field-icon {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    width: 44px;
    height: 46px;
    line-height: 46px;
    margin: 0;
    padding: 0;
    text-align: center;
    color: var(--pt-text-mute) !important;
    pointer-events: none;
}
.prepend-icon > .field-icon i,
#main-body .prepend-icon > .field-icon i { font-size: 14px; line-height: inherit; }

/* Quando o campo esta em foco, o icone acompanha a cor da marca. */
.prepend-icon > .form-control:focus ~ .field-icon,
.prepend-icon > .field:focus ~ .field-icon { color: var(--pt-brand) !important; }

/* A mensagem de erro do checkout nao pode colar no campo. */
#main-body .field-error-msg,
.field-error-msg {
    display: block;
    margin-top: 6px;
    font-size: .78rem;
    color: var(--pt-red);
}

/* --- 4. Grupos de campo: o raio so nas pontas --- */
#main-body .input-group { flex-wrap: nowrap; }
#main-body .input-group > .form-control {
    border-radius: 0 !important;
    min-width: 0;
}
#main-body .input-group > .form-control:first-child,
#main-body .input-group > .input-group-prepend + .form-control {
    border-top-left-radius: var(--pt-r-field) !important;
    border-bottom-left-radius: var(--pt-r-field) !important;
}
#main-body .input-group > .form-control:last-child {
    border-top-right-radius: var(--pt-r-field) !important;
    border-bottom-right-radius: var(--pt-r-field) !important;
}
#main-body .input-group-prepend > .btn,
#main-body .input-group-prepend > .input-group-text {
    border-radius: var(--pt-r-field) 0 0 var(--pt-r-field) !important;
    border-right: 0 !important;
}
#main-body .input-group-append > .btn,
#main-body .input-group-append > .input-group-text,
#main-body .input-group-btn > .btn {
    border-radius: 0 var(--pt-r-field) var(--pt-r-field) 0 !important;
    border-left: 0 !important;
}
/* Um input-group dentro de .prepend-icon ja tem o recuo do icone; a ponta
   esquerda continua arredondada. */
.prepend-icon .input-group > .form-control:first-child {
    border-top-left-radius: var(--pt-r-field) !important;
    border-bottom-left-radius: var(--pt-r-field) !important;
}


/* ==========================================================================
   41. CHECKOUT — altura e alinhamento
   ========================================================================== */

#order-standard_cart .form-control,
#order-standard_cart .field,
#registration .form-control,
#registration .field {
    height: 46px;
    min-height: 46px;
    line-height: 1.4 !important;
    padding: 12px 16px !important;
    border-radius: var(--pt-r-field) !important;
    background: var(--pt-card) !important;
    border: 1px solid var(--pt-border-strong) !important;
    color: var(--pt-text) !important;
    box-shadow: none !important;
}
#order-standard_cart textarea.form-control,
#registration textarea.form-control { height: auto; min-height: 110px; }
#order-standard_cart select.form-control,
#registration select.form-control { padding-right: 34px !important; }

/* Reforco com a mesma especificidade alta usada na secao 40. */
#order-standard_cart .form-group.prepend-icon > input.form-control,
#order-standard_cart .form-group.prepend-icon > input.field,
#registration .form-group.prepend-icon > input.form-control,
#registration .form-group.prepend-icon > input.field { padding-left: 44px !important; }

#order-standard_cart label,
#registration label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--pt-text-dim);
    margin-bottom: 6px;
}
#order-standard_cart .form-group,
#registration .form-group { margin-bottom: 18px; }

/* Os blocos do carrinho seguem o mesmo cartao das demais paginas. */
#order-standard_cart .panel,
#order-standard_cart .card,
#order-standard_cart .sidebar {
    background: var(--pt-card) !important;
    border: 0 !important;
    border-radius: var(--pt-r-card) !important;
    box-shadow: var(--pt-lift) !important;
}
#order-standard_cart .panel-heading,
#order-standard_cart .card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--pt-linha) !important;
    padding: 18px 24px !important;
}
#order-standard_cart .panel-body,
#order-standard_cart .card-body { padding: 24px !important; }


/* ==========================================================================
   43. CAMPO DE TELEFONE (intl-tel-input)
   ==========================================================================
   O WHMCS empacota o plugin dentro do scripts.min.js, numa versao ANTIGA que
   usa as classes SEM o prefixo iti__:

       wrapper  .intl-tel-input   (nas versoes novas: .iti)
       bandeira .flag-container   (nas novas: .iti__flag-container)
       modifier .separate-dial-code

   As regras abaixo cobrem as duas nomenclaturas, para continuarem valendo se
   um dia o WHMCS atualizar o plugin.

   O motivo do bug: o plugin calcula o padding-left do input e aplica INLINE,
   mas a regra global de .form-control usa !important, que vence style inline.
   ========================================================================== */

#main-body .intl-tel-input,
#main-body .iti { display: block !important; width: 100%; position: relative; }

/* Só a bandeira à esquerda. */
#main-body .intl-tel-input > input,
#main-body .intl-tel-input > input.form-control,
#main-body .intl-tel-input > input[type="tel"],
#main-body .iti > input,
#main-body .iti > input.form-control,
#main-body .iti > input[type="tel"] { padding-left: 52px !important; }

/* Bandeira + código do país (+55): faixa bem mais larga. */
#main-body .intl-tel-input.separate-dial-code > input.form-control,
#main-body .intl-tel-input.separate-dial-code > input.field,
#main-body .intl-tel-input.separate-dial-code > input[type="tel"],
#main-body .iti--separate-dial-code > input.form-control,
#main-body .iti--separate-dial-code > input.field,
#main-body .iti--separate-dial-code > input[type="tel"] { padding-left: 94px !important; }

/* A faixa acompanha a altura do campo (46px). */
#main-body .intl-tel-input .flag-container,
#main-body .iti__flag-container { height: 100%; z-index: 6; }
/* Sem mexer no display: o plugin legado monta o codigo do pais com
   display:table/table-cell, e forcar flex aqui cortava o "+55" em "5". */
#main-body .intl-tel-input .selected-flag,
#main-body .iti__selected-flag {
    height: 100%;
    background: var(--pt-card) !important;
    border-radius: var(--pt-r-field) 0 0 var(--pt-r-field);
}
#main-body .intl-tel-input .flag-container:hover .selected-flag,
#main-body .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
    background: var(--pt-hover) !important;
}
#main-body .selected-dial-code,
#main-body .iti__selected-dial-code {
    color: var(--pt-text-dim) !important;
    font-size: 13.5px;
    padding-left: 6px;
}
#main-body .intl-tel-input .iti-arrow,
#main-body .intl-tel-input .arrow,
#main-body .iti__arrow { border-top-color: var(--pt-text-mute); margin-left: 6px; }

/* O ícone de telefone do tema fica embaixo da bandeira: sai de cena.
   Regra isolada — :has() sem suporte não derruba as de cima. */
#main-body .prepend-icon:has(.intl-tel-input) > .field-icon,
#main-body .prepend-icon:has(.iti) > .field-icon { display: none !important; }

/* Lista de países no tema. */
#main-body .country-list,
#main-body .iti__country-list,
.country-list, .iti__country-list {
    background: var(--pt-bg-elev) !important;
    border: 1px solid var(--pt-border-strong) !important;
    border-radius: var(--pt-r-field) !important;
    box-shadow: var(--pt-lift-2) !important;
    color: var(--pt-text) !important;
    max-height: 240px;
}
.country-list .country, .iti__country { padding: 8px 12px; }
.country-list .country.highlight, .country-list .country:hover,
.iti__country.iti__highlight, .iti__country:hover { background: var(--pt-hover) !important; }
.country-list .country-name, .iti__country-name { color: var(--pt-text) !important; }
.country-list .dial-code, .iti__dial-code { color: var(--pt-text-mute) !important; }
.country-list .divider, .iti__divider { border-bottom-color: var(--pt-divider) !important; }


/* ==========================================================================
   44. MODAIS — o de remover item do carrinho e todos os outros
   ==========================================================================
   O header do tema tem z-index 9999 e ficava por cima do modal (Bootstrap usa
   1050 para o modal e 1040 para o fundo). O botao "Sim" chegava a ficar
   inalcancavel dependendo da rolagem.
   ========================================================================== */

.modal { z-index: 10600 !important; }
.modal-backdrop { z-index: 10500 !important; }
.modal-open .pt-header,
.modal-open #header { z-index: 10400 !important; }

.modal-dialog { margin: 2rem auto; }
.modal-content {
    background: var(--pt-card) !important;
    border: 0 !important;
    border-radius: var(--pt-r-card) !important;
    box-shadow: var(--pt-lift-2), 0 0 0 1px var(--pt-linha) !important;
    color: var(--pt-text) !important;
}
.modal-header, .modal-footer {
    background: transparent !important;
    border-color: var(--pt-linha) !important;
    padding: 18px 24px !important;
}
.modal-body { padding: 24px !important; color: var(--pt-text) !important; }
.modal-title { color: var(--pt-text-strong) !important; font-weight: 700; letter-spacing: -.015em; }

/* O X estava enorme e centralizado: volta a ser um botao discreto no canto. */
.modal .close,
.modal-content .close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px !important;
    line-height: 1;
    font-weight: 400;
    border: 0;
    border-radius: var(--pt-r-pill);
    background: transparent;
    color: var(--pt-text-mute) !important;
    text-shadow: none !important;
    opacity: 1;
    z-index: 2;
}
.modal .close:hover { background: var(--pt-hover); color: var(--pt-text-strong) !important; }

.modal-footer.justify-content-center { justify-content: center !important; gap: .6rem; }
.modal-footer .btn { min-width: 110px; }


/* ==========================================================================
   45. POLIMENTO FINAL — respiro, hover e tipografia
   ==========================================================================
   CIRURGICO DE PROPOSITO. Os componentes ja aprovados (pt-btn--calm,
   pt-authbtn, pt-megabtn, pt-btn--pay, pt-help__link, pt-strip, pt-svc,
   pt-field) NAO sao tocados aqui - eles ja tem geometria propria e medida.
   ========================================================================== */

/* --------------------------------------------------------------------------
   45.1  LINKS DE ACAO NOS PAINEIS
   "Ver Todos", "Abrir Novo Ticket", "Pagar Agora" tinham padding: 0 e
   display: inline. Qualquer fundo no hover encostava nas letras.
   -------------------------------------------------------------------------- */

#main-body .pt-panel .card-title .float-right .btn,
#main-body .pt-panel--flat .card-title .float-right .btn,
.pt-panel .card-title .float-right .btn,
.pt-panel--flat .card-title .float-right .btn {
    display: inline-flex !important;
    align-items: center;
    gap: .4rem;
    padding: 6px 12px !important;
    margin: -6px -6px -6px 0;      /* compensa o padding novo: a linha do
                                      titulo nao muda de altura */
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--pt-brand) !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.2;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease !important;
}
#main-body .pt-panel .card-title .float-right .btn:hover,
#main-body .pt-panel--flat .card-title .float-right .btn:hover,
.pt-panel .card-title .float-right .btn:hover,
.pt-panel--flat .card-title .float-right .btn:hover {
    background: var(--pt-brand-soft) !important;
    color: var(--pt-brand-hover) !important;
}

/* Links soltos dentro do corpo dos paineis achatados. */
#main-body .pt-panel--flat .card-body a:not(.btn),
#main-body .pt-panel .card-body a:not(.btn) {
    border-radius: 6px;
    transition: color .2s ease;
}

/* --------------------------------------------------------------------------
   45.3  BOTOES NATIVOS — cor solida, sem gradiente nem borda dura
   -------------------------------------------------------------------------- */

#main-body .btn,
#order-standard_cart .btn,
#registration .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 11px 22px;
    border-radius: 8px !important;
    border-width: 1px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.005em;
    line-height: 1.2;
    background-image: none !important;   /* mata gradiente do Bootstrap */
    text-shadow: none !important;
    box-shadow: none !important;
    transition: background .2s ease, border-color .2s ease,
                box-shadow .2s ease, transform .2s ease !important;
}
#main-body .btn-sm, #main-body .btn-xs { padding: 7px 14px; font-size: 12.5px; }
#main-body .btn-lg { padding: 14px 28px; font-size: 15px; }

#main-body .btn-primary,
#main-body .btn-success,
#order-standard_cart .btn-primary,
#registration .btn-primary {
    background-color: var(--pt-brand) !important;
    border-color: var(--pt-brand) !important;
    color: var(--pt-on-brand) !important;
}
#main-body .btn-primary:hover,
#main-body .btn-success:hover,
#order-standard_cart .btn-primary:hover,
#registration .btn-primary:hover {
    background-color: var(--pt-brand-hover) !important;
    border-color: var(--pt-brand-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -6px var(--pt-brand-ring) !important;
}
#main-body .btn-danger {
    background-color: var(--pt-red) !important;
    border-color: var(--pt-red) !important;
    color: var(--pt-on-danger) !important;
}
#main-body .btn-danger:hover { filter: brightness(1.07); transform: translateY(-1px); }

/* Botao neutro: contorno leve, preenche no hover. */
#main-body .btn-default,
#main-body .btn-secondary,
#main-body .btn-light {
    background-color: transparent !important;
    border-color: var(--pt-border-strong) !important;
    color: var(--pt-text-dim) !important;
}
#main-body .btn-default:hover,
#main-body .btn-secondary:hover,
#main-body .btn-light:hover {
    background-color: var(--pt-hover) !important;
    border-color: var(--pt-border-strong) !important;
    color: var(--pt-text-strong) !important;
}
#main-body .btn:focus,
#main-body .btn:active { box-shadow: 0 0 0 3px var(--pt-brand-ring) !important; }

/* --------------------------------------------------------------------------
   45.4  RESPIRO E TIPOGRAFIA
   -------------------------------------------------------------------------- */

/* Cartoes e paineis genericos com mais ar. */
#main-body .panel:not(.pt-panel) > .panel-body,
#main-body .card:not(.pt-panel):not(.pt-card):not(.pt-auth__card) > .card-body { padding: 28px !important; }
#main-body .panel:not(.pt-panel) > .panel-heading,
#main-body .card:not(.pt-panel) > .card-header { padding: 20px 28px !important; }
#main-body .panel:not(.pt-panel) > .panel-footer,
#main-body .card:not(.pt-panel) > .card-footer { padding: 18px 28px !important; }

/* Titulos: peso moderno e contraste elegante. */
#main-body .panel-title,
#main-body .card-title,
#main-body .panel-heading,
#main-body .card-header {
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--pt-text-strong);
}
/* NAO forcar font-size em h1..h4 aqui: #main-body h1 tem especificidade de
   ID e atropelaria os titulos dos componentes proprios (o "Ola, Roberto" do
   banner encolheu de 22px para 28px e o banner cresceu 12px de altura na
   primeira versao desta secao). Peso e cor bastam para o efeito pedido. */
#main-body h1, #main-body h2, #main-body h3, #main-body h4 {
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--pt-text-strong);
}
/* line-height so no texto corrido, sem tocar nos subtitulos dos componentes. */
#main-body .panel-body p, #main-body .card-body p,
#main-body .panel-body li, #main-body .card-body li { line-height: 1.65; }
#main-body .text-muted, #main-body small { color: var(--pt-text-mute) !important; }

/* Itens de lista com mais respiro. */
#main-body .list-group-item { padding: 14px 20px !important; }
#main-body .pt-panel .list-group-item { padding: .8rem 1.3rem !important; }
#main-body .pt-panel--flat .list-group-item { padding: .95rem 0 !important; }

/* Alertas com ar. */
#main-body .alert { padding: 18px 22px !important; }


/* ==========================================================================
   46. NAVBAR — redesenho
   ==========================================================================
   ESCOPO FECHADO: tudo aqui esta preso a #header. Nenhuma regra alcanca
   #main-body, paineis, tabelas, modais ou o resto do layout.

   As regras de link do menu que existiam nas secoes 39.6, 42 e 45.2 foram
   REMOVIDAS. Este e o unico lugar que estiliza a navegacao agora - sem
   camadas competindo por especificidade.

   Conceito: barra de vidro, links sem caixa, e um traco que cresce do centro.
   O traco carrega o estado; a cor do texto carrega a resposta ao ponteiro.
   ========================================================================== */

/* --------------------------------------------------------------------------
   46.0  TOKENS DA NAVBAR
   Definidos DENTRO de #header de proposito: nao existem fora dele, entao nao
   ha risco de vazar para painel, tabela ou modal.
   -------------------------------------------------------------------------- */

#header {
    --pt-nav-repouso: #64748b;              /* slate-500: neutro elegante   */
    --pt-nav-ativo:   #111827;              /* gray-900: escurece no hover  */
    --pt-nav-veu:     rgba(15, 23, 42, .04);/* veu translucido, sem cinza   */
}
html[data-theme="dark"] #header {
    --pt-nav-repouso: #94a3b8;
    --pt-nav-ativo:   #f8fafc;
    --pt-nav-veu:     rgba(255, 255, 255, .06);
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) #header {
        --pt-nav-repouso: #94a3b8;
        --pt-nav-ativo:   #f8fafc;
        --pt-nav-veu:     rgba(255, 255, 255, .06);
    }
}

/* --------------------------------------------------------------------------
   46.1  A BARRA — vidro fosco
   -------------------------------------------------------------------------- */

#header.pt-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    border-bottom: 1px solid var(--pt-linha);
    background: var(--pt-card);
    transition: box-shadow .25s ease, background .25s ease;
}
@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
    #header.pt-header {
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        background: rgba(255, 255, 255, .72);
    }
    html[data-theme="dark"] #header.pt-header { background: rgba(15, 23, 42, .72); }
    @media (prefers-color-scheme: dark) {
        html:not([data-theme="light"]) #header.pt-header { background: rgba(15, 23, 42, .72); }
    }
}

/* --------------------------------------------------------------------------
   46.2  ALINHAMENTO — flex de ponta a ponta
   -------------------------------------------------------------------------- */

#header .pt-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    height: 70px;
}
#header .pt-header__nav {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
#header .pt-header__nav .navbar-collapse { padding: 0; align-items: center; }

#header #nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;          /* respiro entre os links, nao padding neles */
    margin: 0;
    padding: 0;
    list-style: none;
    height: 100%;
}
#header #nav > li {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
}

/* --------------------------------------------------------------------------
   46.3  OS LINKS — sem caixa, com traco
   -------------------------------------------------------------------------- */

#header #nav > li > a,
#header .pt-header__nav .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 70px;          /* alvo de clique cheio, sem fundo aparente */
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -.006em;
    line-height: 1;
    white-space: nowrap;
    color: var(--pt-nav-repouso) !important;
    transition: color .22s cubic-bezier(.4, 0, .2, 1);
}

/* O traco. Nasce do centro e abre. */
#header #nav > li > a::after,
#header .pt-header__nav .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0;
    transition: left .26s cubic-bezier(.4, 0, .2, 1),
                right .26s cubic-bezier(.4, 0, .2, 1),
                opacity .26s ease;
}

#header #nav > li > a:hover,
#header #nav > li > a:focus,
#header .pt-header__nav .nav-link:hover,
#header .pt-header__nav .nav-link:focus {
    color: var(--pt-nav-ativo) !important;
    background: none !important;
    background-color: transparent !important;
    outline: none;
}
#header #nav > li > a:hover::after,
#header #nav > li > a:focus-visible::after,
#header .pt-header__nav .nav-link:hover::after {
    left: 0; right: 0;
    opacity: .32;
}

/* Estado atual: o traco fica, na cor da marca. */
#header #nav > li.active > a,
#header #nav > li.open > a,
#header .pt-header__nav .nav-item.active > .nav-link,
#header .pt-header__nav .nav-item.show > .nav-link {
    color: var(--pt-nav-ativo) !important;
    font-weight: 600;
    background: none !important;
    background-color: transparent !important;
}
#header #nav > li.active > a::after,
#header #nav > li.open > a::after,
#header .pt-header__nav .nav-item.active > .nav-link::after,
#header .pt-header__nav .nav-item.show > .nav-link::after {
    left: 0; right: 0;
    opacity: 1;
    background: var(--pt-brand);
}

/* Mata qualquer resquicio de caixa do Bootstrap/WHMCS na navegacao. */
#header #nav > li > a:active,
#header #nav .nav-link:active,
#header #nav .nav-link.active,
#header #nav .dropdown-toggle:focus,
#header #nav .show > .nav-link {
    background: none !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* A setinha do dropdown, discreta. */
#header #nav .dropdown-toggle::after {
    margin-left: .1rem;
    border-top-width: .28em;
    border-right-width: .28em;
    border-left-width: .28em;
    opacity: .45;
    transition: opacity .2s ease, transform .2s ease;
}
#header #nav > li:hover .dropdown-toggle::after,
#header #nav > li.show .dropdown-toggle::after { opacity: .9; }
#header #nav > li.show .dropdown-toggle::after { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   46.4  DROPDOWNS — flutuam, nao encaixam
   -------------------------------------------------------------------------- */

#header #nav .dropdown-menu,
#header .pt-header__account .dropdown-menu {
    margin-top: -6px !important;
    padding: 6px !important;
    min-width: 224px;
    border: 1px solid var(--pt-linha) !important;
    border-radius: 14px !important;
    background: var(--pt-bg-elev) !important;
    box-shadow:
        0 12px 32px -8px rgba(15, 23, 42, .18),
        0 4px 10px -4px rgba(15, 23, 42, .10) !important;
    animation: ptNavDrop .2s cubic-bezier(.4, 0, .2, 1);
}
html[data-theme="dark"] #header #nav .dropdown-menu,
html[data-theme="dark"] #header .pt-header__account .dropdown-menu {
    box-shadow:
        0 12px 32px -8px rgba(0, 0, 0, .55),
        0 4px 10px -4px rgba(0, 0, 0, .40) !important;
}
/* A animacao usa 'translate', NAO 'transform'.
   O Bootstrap posiciona o dropdown com transform inline (translate3d) via
   Popper. Uma animacao que mexa em 'transform' sobrescreve esse valor
   enquanto roda - o menu aparecia no canto superior direito e so pulava para
   o lugar quando a animacao terminava. Medido: Popper pedia translate3d(-74px,
   38px, 0) e o computado ficava matrix(.98,0,0,.98,0,-6), ignorando os 74px.
   'translate' e uma propriedade separada, que COMPOE com transform em vez de
   substituir. Navegador sem suporte simplesmente ignora e faz so o fade. */
@keyframes ptNavDrop {
    from { opacity: 0; translate: 0 -6px; }
    to   { opacity: 1; translate: 0 0; }
}

#header #nav .dropdown-menu a.dropdown-item,
#header #nav .dropdown-menu > li > a {
    border-radius: 9px !important;
    padding: 9px 12px !important;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--pt-nav-repouso) !important;
    transition: background .16s ease, color .16s ease;
}
#header #nav .dropdown-menu a.dropdown-item:hover,
#header #nav .dropdown-menu > li > a:hover {
    background: var(--pt-nav-veu) !important;
    color: var(--pt-nav-ativo) !important;
}

/* --------------------------------------------------------------------------
   46.5  LADO DIREITO — pilula translucida, sem cinza chapado
   -------------------------------------------------------------------------- */

#header .pt-header__icon,
#header .pt-header__account > li > a,
#header .pt-header__actions .pt-themetoggle {
    background: transparent !important;
    border-color: transparent !important;
    border-radius: 50px !important;
    color: var(--pt-nav-repouso) !important;
    transition: background .2s ease, color .2s ease;
}
#header .pt-header__icon:hover,
#header .pt-header__account > li > a:hover,
#header .pt-header__actions .pt-themetoggle:hover {
    background: var(--pt-nav-veu) !important;
    color: var(--pt-nav-ativo) !important;
}
#header .pt-header__account > li > a { height: 38px; padding: 0 14px !important; font-weight: 500; }


#header .pt-header__brand {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.028em;
    color: var(--pt-nav-ativo) !important;
    margin-right: .5rem !important;
}

/* --------------------------------------------------------------------------
   46.6  TELA ESTREITA — o traco vira barra lateral
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
    #header .pt-header__bar { gap: .75rem; }
    #header .pt-header__nav .navbar-collapse {
        position: absolute;
        left: 0; right: 0; top: 70px;
        padding: 10px 14px 16px;
        background: var(--pt-card);
        border-bottom: 1px solid var(--pt-linha);
        box-shadow: 0 16px 32px -12px rgba(15, 23, 42, .18);
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }
    #header #nav { flex-direction: column; align-items: stretch; width: 100%; gap: 2px; height: auto; }
    #header #nav > li { height: auto; }
    #header #nav > li > a,
    #header .pt-header__nav .nav-link {
        height: auto;
        padding: 12px 14px !important;
        border-radius: 10px !important;
        width: 100%;
    }
    /* O traco horizontal nao faz sentido empilhado: vira marca a esquerda. */
    #header #nav > li > a::after,
    #header .pt-header__nav .nav-link::after {
        left: 0; right: auto;
        top: 8px; bottom: 8px;
        width: 3px; height: auto;
        border-radius: 3px;
        transition: opacity .2s ease;
    }
    #header #nav > li > a:hover::after { left: 0; right: auto; opacity: .3; }
    #header #nav > li.active > a::after { left: 0; right: auto; opacity: 1; }
    #header #nav > li > a:hover,
    #header #nav > li.active > a { background: var(--pt-nav-veu) !important; }
}


/* ==========================================================================
   47. DUAS CORRECOES CIRURGICAS
   ==========================================================================
   Escopo fechado: 47.1 so toca #header, 47.2 so toca o campo de telefone.
   Nada aqui alcanca paineis, tabelas, modais ou o layout geral.
   ========================================================================== */

/* --------------------------------------------------------------------------
   47.1  O MENU "MAIS" ESTAVA COMENDO A NAVEGACAO
   --------------------------------------------------------------------------
   O "Mais" nao e item de menu: e o .collapsable-dropdown do navbar.tpl, um
   transbordo automatico. O scripts.min.js roda, no ready e a cada resize:

       autoCollapse("#nav", 30)

   A funcao le jQuery("#nav").innerHeight(). Se for >= 30px ela conclui que a
   barra quebrou em duas linhas e passa a empurrar itens para dentro do "Mais",
   um a um, ate caber.

   O redesenho da navbar deu 70px de altura ao #nav (link de altura cheia, para
   o alvo de clique e para o traco embaixo). 70 >= 30, e a altura NAO diminui
   quando um item sai - entao o laco so parava no ultimo item. Resultado
   medido: "Central de Ajuda" e "Entre em Contato" engolidos, sobrando
   "Inicio - Mais".

   A correcao devolve ao #nav uma caixa baixa (26px). Os <li> e <a> continuam
   com 70px e transbordam para fora dela - visualmente nada muda, porque a
   navegacao nao tem fundo proprio. O que muda e a medida que o JS le.

   Por que 26px no <ul> e 70px no <li>:
     - innerHeight do #nav = 26 < 30  -> o JS nunca colapsa;
     - o <li> segue com 70px, entao os dropdowns (top: 100% do li) continuam
       abrindo na base da barra, exatamente onde estavam.

   Consequencia: com o "Mais" vazio, o proprio WHMCS lhe aplica d-none. Ele
   some sozinho, e a rede de seguranca do transbordo continua existindo para
   telas realmente estreitas.

   Restrito a >= 1200px de proposito: abaixo disso a navegacao empilha com
   height auto (secao 46.6), e o autoCollapse nem roda - o JS o pula quando o
   botao do hamburguer esta visivel.
   -------------------------------------------------------------------------- */

@media (min-width: 1200px) {
    #header #nav      { height: 26px; }   /* a medida que o autoCollapse le  */
    #header #nav > li { height: 70px; }   /* ancora dos dropdowns, intacta   */
}

/* --------------------------------------------------------------------------
   47.2  TELEFONE: O RECUO PASSA A SEGUIR O CODIGO DO PAIS
   --------------------------------------------------------------------------
   A secao 43 usava um padding-left fixo de 94px, calibrado no "+55". Medido no
   servidor, a caixa da bandeira cresce junto com o codigo:

       +1     iti-sdc-2    70px
       +55    iti-sdc-3    78px
       +351   iti-sdc-4    86px
       +1684  iti-sdc-5    94px   <- 94 de recuo = folga -1px, sobrepunha

   O proprio plugin marca a largura no wrapper (iti-sdc-N), entao da para
   seguir esse sinal em vez de adivinhar um numero. A conta e largura + 16.

   O caso brasileiro continua em 94px: o que ja foi aprovado nao muda um pixel.
   -------------------------------------------------------------------------- */

#main-body .intl-tel-input.separate-dial-code.iti-sdc-2 > input,
#main-body .iti--separate-dial-code.iti.iti-sdc-2 > input { padding-left: 86px !important; }

#main-body .intl-tel-input.separate-dial-code.iti-sdc-3 > input,
#main-body .iti--separate-dial-code.iti.iti-sdc-3 > input { padding-left: 94px !important; }

#main-body .intl-tel-input.separate-dial-code.iti-sdc-4 > input,
#main-body .iti--separate-dial-code.iti.iti-sdc-4 > input { padding-left: 102px !important; }

#main-body .intl-tel-input.separate-dial-code.iti-sdc-5 > input,
#main-body .iti--separate-dial-code.iti.iti-sdc-5 > input { padding-left: 110px !important; }

#main-body .intl-tel-input.separate-dial-code.iti-sdc-6 > input,
#main-body .iti--separate-dial-code.iti.iti-sdc-6 > input { padding-left: 118px !important; }


/* ==========================================================================
   48. A CAIXA DA BANDEIRA  (bug do WHMCS + acabamento)
   ==========================================================================
   Duas coisas foram consertadas aqui, em rodadas diferentes.

   -- 1. O DEFEITO DE ORIGEM, que e do WHMCS --------------------------------

   Sintoma: o campo mostrava "5" no lugar de "+55". Medido na pagina real com
   o premium-theme.css DESABILITADO, o defeito aparecia igual - logo, nao era
   nosso:

       .iti-flag           position: absolute   x: 799 -> 819
       .selected-dial-code display: table-cell  x: 799 -> 869
                                                  ^ mesmo ponto de partida
       20px do codigo cobertos pela bandeira = exatamente a largura do "+5"

   O plugin legado tem dois modos. No normal, a bandeira e absoluta e flutua
   sobre o input. No separate-dial-code, ela precisa dividir a linha com o
   codigo. O all.min.css do WHMCS traz a regra do primeiro modo e esqueceu a
   do segundo, entao a bandeira continua absoluta e cai sobre o texto.

   -- 2. O ERRO DA PRIMEIRA CORRECAO ----------------------------------------

   A primeira tentativa transformou a bandeira em display:table-cell. Resolveu
   a sobreposicao e criou outro problema: celula de tabela ESTICA ate a altura
   da linha. O <div> da bandeira foi de 14px para 44px, o sprite ficou ancorado
   no topo e o fundo cinza do sprite (rgb 219,219,219) apareceu embaixo dele.

   A caixa agora e flex. A bandeira volta a ter a altura natural de cada pais
   (14px BR, 11px US, 10px AS) e fica centrada de verdade - align-items faz
   isso sem esticar nada.

   -- MEDIDO DEPOIS, na pagina real -----------------------------------------

       pais    codigo   caixa   folga   bandeira   centrada
       US      +1        70px    15px    20x11     sim
       BR      +55       78px    15px    20x14     sim
       PT      +351      86px    15px    20x14     sim
       AS      +1684     94px    15px    20x10     sim

   A largura TOTAL da caixa nao mudou em nenhum caso, entao os recuos da secao
   47.2 continuam valendo sem reajuste. O dropdown abre com os 246 paises,
   marca o ativo e fecha. Claro e escuro conferidos.

   A divisoria usa inset box-shadow, e nao border-right, de proposito: sombra
   nao entra no calculo de largura, entao a caixa nao cresce 1px e a folga de
   15px fica intacta.
   ========================================================================== */

#main-body .intl-tel-input.separate-dial-code .selected-flag,
#main-body .iti--separate-dial-code .iti__selected-flag {
    /* inline-flex, e nao flex: encolhe ate o conteudo. Com 'flex' a caixa
       preencheria a largura do pai, e se o .flag-container um dia deixar de
       ter right:auto ela cobriria o campo inteiro. O display:table original
       tambem encolhia - trocar por 'flex' teria mudado esse comportamento. */
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 0 11px !important;
    box-shadow: inset -1px 0 0 var(--pt-linha) !important;
}

/* A bandeira volta a ser um bloco comum, com a altura que o sprite pede. */
#main-body .intl-tel-input.separate-dial-code .selected-flag .iti-flag,
#main-body .iti--separate-dial-code .iti__selected-flag .iti__flag {
    position: relative !important;
    display: block !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    border-radius: 2px !important;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .12) !important;
}
html[data-theme="dark"] #main-body .intl-tel-input.separate-dial-code .selected-flag .iti-flag,
html[data-theme="dark"] #main-body .iti--separate-dial-code .iti__selected-flag .iti__flag {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .16) !important;
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) #main-body .intl-tel-input.separate-dial-code .selected-flag .iti-flag,
    html:not([data-theme="light"]) #main-body .iti--separate-dial-code .iti__selected-flag .iti__flag {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .16) !important;
    }
}

/* O gap do flex ja separa: o padding-left legado viraria espaco dobrado. */
#main-body .intl-tel-input.separate-dial-code .selected-dial-code,
#main-body .iti--separate-dial-code .iti__selected-dial-code {
    display: block !important;
    padding-left: 0 !important;
    font-weight: 500 !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: .01em !important;
}

#main-body .intl-tel-input.separate-dial-code .selected-flag .iti-arrow,
#main-body .iti--separate-dial-code .iti__selected-flag .iti__arrow {
    position: relative !important;
    display: block !important;
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

/* ==========================================================================
   49. DROPDOWNS DO CABECALHO — assentar abaixo da barra
   ==========================================================================
   Com margin-top: -6px os menus comecavam DENTRO da barra de 70px e cruzavam
   a linha de baixo: o do perfil abria em y=42 e o do menu em y=58.

   Os dois numeros diferem porque os gatilhos tem alturas diferentes - o link
   do menu principal ocupa os 70px inteiros, o do perfil so 38px. Por isso cada
   um recebe seu proprio valor, medido em vez de estimado.

   Resultado: ambos em y=78, ou seja 8px abaixo da barra.

   So em telas largas. Abaixo de 1200px a navegacao empilha e o menu do perfil
   nem e renderizado, entao la vale o -6px original.
   ========================================================================== */

@media (min-width: 1200px) {
    #header #nav .dropdown-menu                 { margin-top: 14px !important; }
    #header .pt-header__account .dropdown-menu  { margin-top: 30px !important; }
}

/* ==========================================================================
   50. BOTAO DE AUTENTICACAO — mesma linguagem do "Baixar Conteudos"
   ==========================================================================
   O login tinha gradiente com texto escuro; o dashboard, verde solido com
   texto branco. Sao a mesma coisa na hierarquia - a acao principal da tela -
   e agora tem a mesma cara. So o tamanho muda com o contexto: 17px/800 aqui,
   15px/700 la.

   O texto tem 17px em negrito. O limite de "texto grande" no WCAG e 18.66px,
   entao por 1.66px ele conta como texto NORMAL e precisa de 4.5:1. Medido no
   gradiente antigo, o texto escuro caia para 4.38:1 justamente na ponta mais
   escura - que e onde a palavra "Entrar" ficava. Branco sobre #047857 da
   5.48:1, e 7.68:1 no hover.

   Vale tambem para o botao "Enviar" da redefinicao de senha, que usa a mesma
   classe.

   -- O QUE SAIU E POR QUE ---------------------------------------------------

   ptBreathe: o botao pulsava sem parar. A tela de login tem esse unico botao;
   pulsar para disputar atencao com nada e ruido. ptSheen: um brilho varria a
   superficie a cada 4s - tem cara de promocao, nao de portal seguro, e
   destoava do "Gerencie seus servicos com seguranca e rapidez" logo acima.

   -- O QUE ENTROU NO LUGAR --------------------------------------------------

   Um filete de luz de 1px no topo (inset box-shadow branco a 16%). E o que faz
   um verde chapado parecer uma superficie captando luz, em vez de um retangulo
   pintado - sem gradiente e sem nenhuma animacao em repouso.

   E a seta anda 3px no hover. Movimento na intencao, nao no ocio: so acontece
   quando a pessoa mira o botao.
   ========================================================================== */

.pt-authbtn {
    color: #ffffff;
    background: #047857;
    box-shadow:
        0 10px 26px -12px rgba(4, 120, 87, .70),
        inset 0 1px 0 rgba(255, 255, 255, .16);
    animation: none;
    transition: background .22s var(--pt-ease),
                box-shadow .22s var(--pt-ease),
                transform .22s var(--pt-ease);
}

/* Mata a varredura de brilho. */
.pt-authbtn::after { content: none; }

.pt-authbtn i {
    transition: transform .22s var(--pt-ease);
}

.pt-authbtn:hover,
.pt-authbtn:focus {
    /* Aprofunda em vez de clarear - e o que segura o branco em 7.68:1. */
    background: #065f46;
    color: #ffffff;
    filter: none;
    transform: translateY(-2px);
    box-shadow:
        0 18px 38px -14px rgba(4, 120, 87, .85),
        inset 0 1px 0 rgba(255, 255, 255, .18);
}
.pt-authbtn:hover i { transform: translateX(3px); }

.pt-authbtn:active {
    transform: translateY(0);
    box-shadow:
        0 4px 12px -6px rgba(4, 120, 87, .60),
        inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* Anel de foco para quem navega pelo teclado. */
.pt-authbtn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(4, 120, 87, .32),
        0 10px 26px -12px rgba(4, 120, 87, .70),
        inset 0 1px 0 rgba(255, 255, 255, .16);
}

/* --------------------------------------------------------------------------
   50.1  LINKS VERDES DO CARD
   --------------------------------------------------------------------------
   "Criar conta" e o hover de "Esqueceu a senha?" usavam var(--pt-brand), que
   no tema claro e #059669: 3.77:1 sobre o card branco, abaixo dos 4.5:1.

   No tema ESCURO o verde ja passa com folga (5.77:1 sobre o card #1e293b),
   entao so o claro muda.

   As cores estao escritas direto, sem token intermediario. Sao quatro links e
   dois temas: a indireccao nao pagaria o custo de ler o arquivo.
   -------------------------------------------------------------------------- */

.pt-auth__card .pt-auth__foot a       { color: #047857; }
.pt-auth__card .pt-auth__foot a:hover { color: #065f46; text-decoration: underline; }
.pt-auth__card .pt-auth__forgot:hover { color: #047857; }
.pt-auth__card .pt-auth__back:hover   { color: #047857; }

html[data-theme="dark"] .pt-auth__card .pt-auth__foot a       { color: #10B981; }
html[data-theme="dark"] .pt-auth__card .pt-auth__foot a:hover { color: #34d399; }
html[data-theme="dark"] .pt-auth__card .pt-auth__forgot:hover { color: #10B981; }
html[data-theme="dark"] .pt-auth__card .pt-auth__back:hover   { color: #10B981; }

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .pt-auth__card .pt-auth__foot a       { color: #10B981; }
    html:not([data-theme="light"]) .pt-auth__card .pt-auth__foot a:hover { color: #34d399; }
    html:not([data-theme="light"]) .pt-auth__card .pt-auth__forgot:hover { color: #10B981; }
    html:not([data-theme="light"]) .pt-auth__card .pt-auth__back:hover   { color: #10B981; }
}

/* ==========================================================================
   51. "PAGAR AGORA" — o branco precisava de um fundo que o sustentasse
   ==========================================================================
   O botao ja era branco, e foi ele que definiu o padrao dos outros dois. Só
   que o branco nao tinha contraste nenhum ali. Medido sobre o gradiente
   antigo, num texto de ~13.7px em negrito (texto normal pelo WCAG, exige
   4.5:1):

       #f59e0b  ambar      2.15:1   reprovava
       #ef4444  vermelho   3.76:1   reprovava

   A palavra "Pagar" caia justamente sobre a ponta ambar, a pior das duas. Era
   o pior contraste do tema inteiro - e no botao que traz dinheiro, dentro de
   um banner de alerta, muitas vezes lido no celular sob sol.

   Mesma receita do verde: descer o tom ate o branco se sustentar. Continua
   quente, continua lendo como urgencia, continua se distinguindo do verde -
   so sai da faixa de neon, onde o branco morre.

       repouso  #c2410c -> #b91c1c    5.18:1  e  6.47:1
       hover    #9a3412 -> #991b1b    7.31:1  e  8.31:1

   O hover aprofunda em vez de clarear, como no verde. O brightness(1.08) que
   estava la clareava o fundo e derrubava o contraste justo na hora em que a
   pessoa esta mirando o botao.

   Ganha tambem o filete de luz de 1px no topo, que e o que amarra a gramatica
   dos tres botoes: branco sobre cor, mesma profundidade, hue diferente so por
   funcao.
   ========================================================================== */

.pt-btn--pay {
    background: linear-gradient(135deg, #c2410c, #b91c1c);
    box-shadow:
        0 12px 30px -12px rgba(185, 28, 28, .70),
        inset 0 1px 0 rgba(255, 255, 255, .16);
}

.pt-btn--pay:hover,
.pt-btn--pay:focus {
    background: linear-gradient(135deg, #9a3412, #991b1b);
    filter: none;
    box-shadow:
        0 20px 44px -14px rgba(185, 28, 28, .85),
        inset 0 1px 0 rgba(255, 255, 255, .18);
}

.pt-btn--pay:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(185, 28, 28, .32),
        0 12px 30px -12px rgba(185, 28, 28, .70),
        inset 0 1px 0 rgba(255, 255, 255, .16);
}

/* ==========================================================================
   52. AUDITORIA DE CONTRASTE — correcoes pontuais
   ==========================================================================
   Apenas cor. Nenhuma regra aqui toca largura, altura, padding, margin,
   display, posicionamento ou classe estrutural.

   A maior parte da auditoria foi resolvida nos tokens (secao 1). Sobraram
   quatro pontos que os tokens nao alcancavam.

   -- COMO OS NUMEROS FORAM OBTIDOS -----------------------------------------

   Medido no navegador, com a pagina carregada LIMPA em cada tema - nao por
   alternancia em tempo de execucao. Alternar data-theme deixa o valor de
   var() desatualizado no estilo computado: o btn-primary no escuro aparecia
   com 4.29:1 na alternancia e da 6.37:1 em carregamento limpo. Metade das
   "falhas" do tema escuro era esse artefato.

   O fundo de cada elemento e o resultado da COMPOSICAO das camadas
   translucidas ate a primeira camada opaca - selo sobre card sobre pagina.
   Ler so o background-color do proprio selo daria um fundo que nao existe.
   ========================================================================== */

/* --------------------------------------------------------------------------
   52.1  O SELO "SUSPENSO" NAO EXISTIA
   --------------------------------------------------------------------------
   O bloco de selos cobria ativo, pago, vencido, pendente, cancelado e
   encerrado - e esquecia suspended. Sem regra, ele herdava o branco do
   .label do WHMCS e ficava texto branco sobre fundo claro: 1.05:1, o pior
   numero do tema inteiro. Suspensao e um aviso, entao entra no grupo ambar.
   -------------------------------------------------------------------------- */

.status-suspended {
    background: var(--pt-amber-soft) !important;
    color: var(--pt-amber) !important;
    border: 1px solid var(--pt-amber-ring) !important;
}

/* --------------------------------------------------------------------------
   52.2  O VERMELHO DO SELO ESTAVA FIXO NO TOM DO TEMA ESCURO
   --------------------------------------------------------------------------
   A regra trazia color: #f87171 fixo. E um vermelho claro: funciona sobre
   fundo escuro (4.77:1) e desaparece sobre fundo claro (2.36:1). Passa a
   seguir o token, que agora tem um tom por tema.
   -------------------------------------------------------------------------- */

.status-unpaid,
.status-overdue,
.label-danger,
.badge-danger { color: var(--pt-red) !important; }

/* --------------------------------------------------------------------------
   52.3  VERMELHO COMO SUPERFICIE x VERMELHO COMO TINTA
   --------------------------------------------------------------------------
   No tema escuro nenhum vermelho unico serve para os dois papeis:

       #ef4444   branco sobre ele 3.76  |  ele como texto no card 3.89
       #dc2626   branco sobre ele 4.83  |  ele como texto no card 3.03

   Subir um resolve o outro. Por isso o vermelho virou dois tokens:
   --pt-red e a TINTA (texto de selo, botao fantasma) e --pt-red-surface e a
   SUPERFICIE (fundo solido com texto branco). O btn-danger usa a superficie.
   -------------------------------------------------------------------------- */

#main-body .btn-danger,
#order-standard_cart .btn-danger,
#registration .btn-danger {
    background-color: var(--pt-red-surface) !important;
    border-color: var(--pt-red-surface) !important;
    color: var(--pt-on-danger) !important;
}
/* Aprofunda no hover em vez de clarear - o brightness anterior subia o fundo
   e derrubava o contraste justo quando a pessoa mira o botao. */
#main-body .btn-danger:hover,
#order-standard_cart .btn-danger:hover,
#registration .btn-danger:hover {
    background-color: #991b1b !important;
    border-color: #991b1b !important;
    color: var(--pt-on-danger) !important;
    filter: none;
}

/* --------------------------------------------------------------------------
   52.4  DOIS BOTOES DO BOOTSTRAP QUE O TEMA NUNCA PINTOU
   --------------------------------------------------------------------------
   .btn-info ficava no ciano de fabrica (#17a2b8): branco em cima da 3.04:1,
   nos dois temas. #0e7490 leva a 5.36:1 e continua lendo como "informacao".

   .btn-outline era pior: mantinha o texto quase preto do Bootstrap (#212529).
   Sobre a pagina escura isso da 1.05:1 - praticamente invisivel. Passa a usar
   a cor de texto do tema, que acompanha claro e escuro.
   -------------------------------------------------------------------------- */

#main-body .btn-info,
#order-standard_cart .btn-info,
#registration .btn-info {
    background-color: #0e7490 !important;
    border-color: #0e7490 !important;
    color: #ffffff !important;
}
#main-body .btn-info:hover {
    background-color: #155e75 !important;
    border-color: #155e75 !important;
    color: #ffffff !important;
    filter: none;
}

#main-body .btn-outline,
#main-body .btn-white {
    color: var(--pt-text) !important;
    border-color: var(--pt-border-strong) !important;
}
#main-body .btn-outline:hover,
#main-body .btn-white:hover {
    background-color: var(--pt-hover) !important;
    color: var(--pt-text-strong) !important;
}

/* --------------------------------------------------------------------------
   52.5  BOTAO AMBAR — entra na mesma gramatica
   --------------------------------------------------------------------------
   Ele usava tinta escura (#2b1a00) sobre var(--pt-amber). Funcionava enquanto
   o ambar era claro (#f59e0b). Com o ambar aprofundado para 5.37:1 como
   texto, a tinta escura caiu para 2.78:1 - o conserto de um quebrou o outro.

   Em vez de manter dois tons de ambar, o botao passa a seguir a regra dos
   outros: branco sobre cor solida, com o hue marcando a funcao. Fundo fixo
   nos dois temas, como o "Pagar Agora", porque e uma acao e nao pode depender
   do tema para continuar legivel.

       repouso  #a1490a   branco 6.05:1
       hover    #92400e   branco 7.09:1
   -------------------------------------------------------------------------- */

.pt-btn--amber {
    background: #a1490a;
    border-color: #a1490a;
    color: #ffffff;
}
.pt-btn--amber:hover {
    background: #92400e;
    border-color: #92400e;
    color: #ffffff;
    filter: none;
}

/* --------------------------------------------------------------------------
   52.6  HOVER DO BOTAO FANTASMA DE PERIGO
   --------------------------------------------------------------------------
   Ele preenche com vermelho no hover e escreve em branco. Como --pt-red agora
   e a TINTA (clara no tema escuro), preencher com ela dava branco sobre
   #f87171: 2.77:1. O preenchimento e superficie, entao usa --pt-red-surface.
   -------------------------------------------------------------------------- */

.pt-btn--danger:hover,
.pt-btn--danger:focus {
    background: var(--pt-red-surface);
    border-color: var(--pt-red-surface);
    color: var(--pt-on-danger);
    filter: none;
}

/* --------------------------------------------------------------------------
   52.7  SELO DENTRO DE LINHA COM HOVER
   --------------------------------------------------------------------------
   Os selos tem fundo translucido. Numa tabela, o hover da linha passa por
   baixo e muda o fundo efetivo do selo - medido, "Ativo" caia de 4.6:1 para
   4.16:1 quando o ponteiro passava pela linha.

   A correcao empilha uma camada opaca do card por baixo do tint, usando a
   sintaxe de multiplas camadas de background. O selo passa a carregar o
   proprio fundo e para de depender do que esta atras dele.

   E mudanca de COR apenas: nenhuma geometria, nenhuma caixa nova.
   -------------------------------------------------------------------------- */

.status-active, .label-success, .badge-success {
    background:
        linear-gradient(var(--pt-brand-soft), var(--pt-brand-soft)),
        var(--pt-card) !important;
}
.status-unpaid, .status-overdue, .label-danger, .badge-danger {
    background:
        linear-gradient(var(--pt-red-soft), var(--pt-red-soft)),
        var(--pt-card) !important;
}
.status-pending, .status-suspended, .label-warning, .badge-warning {
    background:
        linear-gradient(var(--pt-amber-soft), var(--pt-amber-soft)),
        var(--pt-card) !important;
}
.status-cancelled, .status-terminated, .label-default, .badge-secondary {
    background: var(--pt-card-inset) !important;
}

/* ==========================================================================
   53. BANNER POR SITUACAO DO SERVICO
   ==========================================================================
   Apenas cor. Mesma caixa, mesmo espacamento, mesma altura - so o tom muda.
   A geometria aprovada do .pt-welcome (136px) nao e tocada.

   A borda esquerda grossa e o unico acento: da o recado periferico sem
   precisar de fundo chapado, que roubaria a atencao do botao de acao.
   ========================================================================== */

.pt-welcome--suspenso {
    border-color: var(--pt-amber-ring) !important;
    box-shadow: inset 4px 0 0 var(--pt-amber), var(--pt-shadow-sm) !important;
}
.pt-welcome--encerrado {
    border-color: var(--pt-border-strong) !important;
    box-shadow: inset 4px 0 0 var(--pt-text-mute), var(--pt-shadow-sm) !important;
}
.pt-welcome--pendente {
    border-color: var(--pt-blue-soft) !important;
    box-shadow: inset 4px 0 0 var(--pt-blue), var(--pt-shadow-sm) !important;
}

/* Pilula de alerta. O --neutro ja existia (secao 39); faltava o ambar.
   Usa as mesmas tres cores do selo "Pendente" das tabelas, entao ja tem
   contraste medido: 5.37:1 no claro. */
.pt-welcome__status--alerta {
    background: var(--pt-amber-soft) !important;
    border-color: var(--pt-amber-ring) !important;
    color: var(--pt-amber) !important;
}

/* --------------------------------------------------------------------------
   53.1  AVISO DE SUSPENSAO PARCIAL
   --------------------------------------------------------------------------
   Uma linha, nao um painel. O cliente tem servico funcionando; o recado e
   informativo e nao pode competir com o botao principal logo acima.

   Herda o tom ambar dos selos de "Pendente", que ja tem contraste medido.
   -------------------------------------------------------------------------- */

.pt-aviso {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem 1.1rem;
    margin: -.4rem 0 1.25rem;
    border: 1px solid var(--pt-amber-ring);
    border-left: 3px solid var(--pt-amber);
    border-radius: var(--pt-radius-sm);
    background: var(--pt-amber-soft);
}
.pt-aviso__icone {
    flex: 0 0 auto;
    font-size: 1rem;
    color: var(--pt-amber);
}
.pt-aviso__texto {
    flex: 1 1 auto;
    margin: 0;
    font-size: .88rem;
    line-height: 1.45;
    color: var(--pt-text);
}
.pt-aviso__texto strong { color: var(--pt-text-strong); font-weight: 700; }
.pt-aviso__link {
    flex: 0 0 auto;
    font-size: .82rem;
    font-weight: 700;
    color: var(--pt-amber);
    white-space: nowrap;
    text-decoration: none;
}
.pt-aviso__link:hover { color: var(--pt-amber); text-decoration: underline; }

@media (max-width: 575px) {
    .pt-aviso { flex-wrap: wrap; }
    .pt-aviso__texto { flex: 1 1 100%; }
}

/* Variante fria do aviso: encerrado e pendente nao sao alerta, sao estado. */
.pt-aviso--frio {
    border-color: var(--pt-border-strong);
    border-left-color: var(--pt-text-mute);
    background: var(--pt-card-inset);
}
.pt-aviso--frio .pt-aviso__icone,
.pt-aviso--frio .pt-aviso__link { color: var(--pt-text-dim); }


/* ==========================================================================
   54. CAMADA UI/UX "ULTRA PREMIUM"
   ==========================================================================
   Tres frentes, todas puramente visuais: o avatar de iniciais, o refinamento
   da navegacao e o polimento de cards e botoes.

   Fica no fim do arquivo de proposito. Todas as regras daqui repetem o
   seletor original da secao que sobrescrevem - mesma especificidade, ordem
   decidindo. Nenhum !important novo foi criado onde ja nao existia um.
   ========================================================================== */

/* --------------------------------------------------------------------------
   54.1  AVATAR DE INICIAIS
   --------------------------------------------------------------------------
   Marcacao em includes/premium-avatar.tpl. O tom sai do ID do cliente, no
   servidor - entao nao pisca e nao muda a cada F5.

   PALETA: cinco tons frios e corporativos. Nenhum quente. Todos foram
   escolhidos por contraste com o texto branco em negrito (minimo WCAG AA de
   4.5:1 para texto normal):

       t0  slate    #475569   7.4:1
       t1  navy     #1E3A8A  11.5:1
       t2  emerald  #047857   5.5:1   (o mesmo verde da marca)
       t3  teal     #0F766E   5.6:1
       t4  indigo   #4338CA   8.1:1

   Os cinco valem nos dois temas. Trocar o tom no escuro mudaria o contraste
   medido; a separacao do card vem de um anel fino, nao de outra cor.
   -------------------------------------------------------------------------- */

.pt-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--pt-avatar-bg, #475569);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    text-transform: uppercase;
    user-select: none;
    box-shadow: 0 4px 10px -3px rgba(15, 23, 42, .28);
}
.pt-avatar i { font-size: 15px; opacity: .9; }

.pt-avatar--t0 { --pt-avatar-bg: #475569; }  /* slate   */
.pt-avatar--t1 { --pt-avatar-bg: #1E3A8A; }  /* navy    */
.pt-avatar--t2 { --pt-avatar-bg: #047857; }  /* emerald */
.pt-avatar--t3 { --pt-avatar-bg: #0F766E; }  /* teal    */
.pt-avatar--t4 { --pt-avatar-bg: #4338CA; }  /* indigo  */

/* No escuro o circulo escuro encosta no card escuro. Um anel de 1px resolve
   sem mexer na cor de fundo - e portanto sem mexer no contraste do texto. */
html[data-theme="dark"] .pt-avatar {
    box-shadow: 0 0 0 1px rgba(148, 163, 184, .32),
                0 4px 10px -3px rgba(0, 0, 0, .5);
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .pt-avatar {
        box-shadow: 0 0 0 1px rgba(148, 163, 184, .32),
                    0 4px 10px -3px rgba(0, 0, 0, .5);
    }
}

/* A linha "avatar + Ola, Nome". O <h1> continua sendo o <h1>: so ganhou um
   irmao a esquerda. A geometria do .pt-welcome nao foi tocada. */
.pt-welcome__hi {
    display: flex;
    align-items: center;
    gap: .8rem;
}

@media (max-width: 575px) {
    .pt-avatar { width: 36px; height: 36px; font-size: 13px; }
    .pt-welcome__hi { gap: .65rem; }
}


/* --------------------------------------------------------------------------
   54.2  NAVEGACAO — o traco vira pilula
   --------------------------------------------------------------------------
   A secao 46 desenhou os links sem caixa, com um traco que crescia do centro.
   O pedido agora e outro: texto mais solido em repouso e, no ponteiro, uma
   pilula cinza suave com o texto na cor da marca.

   O QUE NAO PODE MUDAR (e nao mudou):

     - #nav continua com 26px em telas >= 1200px. Esse numero e a correcao da
       secao 47.1: o autoCollapse("#nav", 30) do scripts.min.js le
       innerHeight e, acima de 30px, come os itens do menu para dentro do
       "Mais". Mexer nele traz o bug de volta.
     - O <li> continua com 70px. Ele e a ancora dos dropdowns; encurtar faria
       o menu abrir no meio da barra.

   Muda so o <a>: de 70px de altura para 40px com recuo lateral, centrado
   dentro do <li>. O alvo de clique encolhe de 70 para 40px de altura, que
   segue bem acima do minimo de 24px do WCAG 2.2 e e o tamanho usual de item
   de menu em SaaS.
   -------------------------------------------------------------------------- */

/* Tokens: o repouso fica mais solido (#334155 em vez de #64748b) e ganha um
   token proprio para o veu da pilula. */
#header {
    --pt-nav-repouso: #334155;                  /* slate-700, pedido        */
    --pt-nav-pilula:  rgba(15, 23, 42, .055);   /* cinza ultra-suave        */
}
html[data-theme="dark"] #header {
    --pt-nav-repouso: #cbd5e1;                  /* equivalente no escuro    */
    --pt-nav-pilula:  rgba(255, 255, 255, .08);
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) #header {
        --pt-nav-repouso: #cbd5e1;
        --pt-nav-pilula:  rgba(255, 255, 255, .08);
    }
}

/* A barra descola do fundo. Sombra minima: o suficiente para separar quando a
   pagina rola por baixo, sem virar "caixa flutuante". */
#header.pt-header {
    box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}
html[data-theme="dark"] #header.pt-header {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .38);
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) #header.pt-header {
        box-shadow: 0 1px 3px rgba(0, 0, 0, .38);
    }
}

@media (min-width: 1200px) {

    /* O <li> intacto: 70px, ancora do dropdown. O <a> agora e a pilula. */
    #header #nav > li { height: 70px; align-items: center; }

    #header #nav > li > a,
    #header .pt-header__nav .nav-link {
        height: 40px;
        padding: 0 14px !important;
        border-radius: var(--pt-radius-pill) !important;
        font-weight: 500;
        transition: color .2s var(--pt-ease),
                    background-color .2s var(--pt-ease);
    }

    /* Hover e teclado tem o mesmo tratamento: quem navega por Tab enxerga
       exatamente o que quem usa mouse enxerga. */
    #header #nav > li > a:hover,
    #header #nav > li > a:focus,
    #header #nav > li > a:focus-visible,
    #header .pt-header__nav .nav-link:hover,
    #header .pt-header__nav .nav-link:focus,
    #header .pt-header__nav .nav-link:focus-visible {
        color: var(--pt-brand) !important;
        background: var(--pt-nav-pilula) !important;
        background-color: var(--pt-nav-pilula) !important;
    }

    /* Estado atual: mesma pilula, no verde da marca. */
    #header #nav > li.active > a,
    #header #nav > li.open > a,
    #header .pt-header__nav .nav-item.active > .nav-link,
    #header .pt-header__nav .nav-item.show > .nav-link {
        color: var(--pt-brand) !important;
        background: var(--pt-brand-soft) !important;
        background-color: var(--pt-brand-soft) !important;
        font-weight: 600;
    }

    /* O traco da secao 46 sai de cena no desktop: com a pilula carregando os
       dois estados, ele viraria um segundo sublinhado solto embaixo dela.
       Para trazer de volta, apague este bloco e devolva bottom: -8px ao
       ::after do item ativo. */
    #header #nav > li > a::after,
    #header .pt-header__nav .nav-link::after,
    #header #nav > li > a:hover::after,
    #header #nav > li.active > a::after,
    #header #nav > li.open > a::after,
    #header .pt-header__nav .nav-item.active > .nav-link::after,
    #header .pt-header__nav .nav-item.show > .nav-link::after {
        opacity: 0;
    }
}

/* Empilhado (< 1200px) a navegacao ja era uma lista de blocos com fundo no
   hover. So o tom do texto acompanha a mudanca do desktop. */
@media (max-width: 1199.98px) {
    #header #nav > li > a:hover,
    #header #nav > li.active > a {
        color: var(--pt-brand) !important;
        background: var(--pt-nav-pilula) !important;
    }
}


/* --------------------------------------------------------------------------
   54.3  CARDS E BOTOES — elevacao e respiro
   --------------------------------------------------------------------------
   O raio (--pt-radius, 20px) e a sombra difusa (--pt-shadow) ja vinham da
   secao 12. O que faltava era o movimento: o card subia de sombra no hover,
   mas nao subia de posicao.
   -------------------------------------------------------------------------- */

/* Elevacao do card. A transicao ja listava 'transform' desde a secao 12,
   entao nao ha propriedade nova animando aqui. */
.pt-panels .card:hover,
.pt-panel:hover {
    transform: translateY(-2px);
    border-color: var(--pt-border-strong);
    box-shadow: var(--pt-shadow);
}

/* Respiro interno. 1.5rem no eixo horizontal alinha cabecalho, corpo e itens
   de lista na mesma coluna - antes o corpo tinha 1.3rem e a lista tambem,
   mas o cabecalho ficava com 1.3rem contra um corpo mais apertado. */
.pt-panel .card-header { padding: 1.15rem 1.5rem; }
.pt-panel .card-body   { padding: 1.35rem 1.5rem; }

/* O :not() e proposital: .pt-panel--flat existe justamente para NAO ter recuo
   lateral, e ele tem a mesma especificidade da regra generica. */
#main-body .pt-panel:not(.pt-panel--flat) .list-group-item {
    padding: .85rem 1.5rem !important;
}

/* Botoes: o -1px vira -2px e a sombra acompanha o movimento.
   .pt-btn--pay ja subia 2px desde a secao 30 e nao foi tocado. */
.pt-btn--calm:hover,
.pt-btn--calm:focus {
    transform: translateY(-2px);
}

.pt-btn--quiet:hover,
.pt-btn--quiet:focus {
    transform: translateY(-2px);
    box-shadow: var(--pt-shadow-sm);
}

#main-body .btn-primary:hover,
#main-body .btn-success:hover,
#order-standard_cart .btn-primary:hover,
#registration .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -8px var(--pt-brand-ring) !important;
}

/* Ao pressionar, o botao volta ao chao: o clique precisa ter peso. */
.pt-btn--calm:active,
.pt-btn--quiet:active,
#main-body .btn-primary:active,
#main-body .btn-success:active {
    transform: translateY(0);
}

/* Cartao clicavel inteiro (o <a> que embrulha o painel), quando existir. */
a.pt-panel:hover,
a > .pt-panel:hover {
    text-decoration: none;
}


/* --------------------------------------------------------------------------
   54.4  QUEM PEDIU MENOS MOVIMENTO, RECEBE MENOS MOVIMENTO
   --------------------------------------------------------------------------
   A secao 21 ja zerava duracoes globalmente e anulava o transform de .pt-stat
   e .pt-btn. Os alvos novos desta secao entram na mesma lista.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .pt-panels .card:hover,
    .pt-panel:hover,
    .pt-btn--calm:hover,
    .pt-btn--calm:focus,
    .pt-btn--quiet:hover,
    .pt-btn--quiet:focus,
    .pt-btn--pay:hover,
    #main-body .btn-primary:hover,
    #main-body .btn-success:hover,
    #order-standard_cart .btn-primary:hover,
    #registration .btn-primary:hover {
        transform: none;
    }
}

/* ==========================================================================
   55. MENU SUPERIOR — alinhamento, setinha e pilula
   ==========================================================================
   Tres defeitos que apareceram quando a secao 54 encolheu o link de 70px para
   40px. Todos medidos na pagina real antes de escrever uma linha.
   ========================================================================== */

@media (min-width: 1200px) {

/* --------------------------------------------------------------------------
   55.1  O LINK ESTAVA COLADO NO TOPO
   --------------------------------------------------------------------------
   Medido: folga de 0px acima e 30px abaixo, dentro da barra de 70px.

   Causa: o <li> do navbar.tpl carrega a classe d-block do WHMCS, e o
   theme.min.css declara

       .d-block { display: block !important }

   O !important vence a especificidade de #header #nav > li { display: flex }
   da secao 46.2. Com o <li> em block, o align-items: center nao tem efeito
   nenhum - e um alinhamento de flex container.

   O defeito estava latente desde a secao 46: enquanto o link tinha os 70px
   inteiros ele preenchia a barra e o alinhamento nao importava. Ao virar
   pilula de 40px, o problema apareceu.
   -------------------------------------------------------------------------- */

    /* O :not(.d-none) NAO e decoracao - e o que impede esta regra de
       ressuscitar o item "Mais".

       O <li> do transbordo nasce com class="d-none", e o Bootstrap o esconde
       com .d-none { display: none !important }, que tem especificidade (0,1,0).
       A primeira versao desta regra era #header #nav > li, ou seja (2,0,2):
       ganhava do d-none mesmo com os dois !important, e o "Mais" voltava a
       aparecer atropelando o botao de tema.

       Com o :not(.d-none), quando a classe esta presente a regra simplesmente
       NAO casa, e o display:none do Bootstrap prevalece. Quando o JS tira a
       classe (transbordo real em tela estreita), a regra volta a valer. */
    #header #nav > li:not(.d-none) {
        display: flex !important;
        align-items: center !important;
    }

/* --------------------------------------------------------------------------
   55.2  A SETINHA DO DROPDOWN VIRAVA UM RISCO SOBRE A PALAVRA
   --------------------------------------------------------------------------
   Este era o "risco sobre Faturamento" da tela.

   O Bootstrap desenha a setinha do dropdown no ::after do proprio link. A
   secao 46.3 usa esse MESMO ::after para o traco do menu. Nos itens com
   submenu os dois se sobrepoem, e o resultado medido foi:

       position: absolute   bottom: 18px
       width: 6px           height: 3px
       background-color: rgb(51, 65, 85)      <- do traco
       opacity: .45                            <- da setinha

   Uma barrinha escura no meio do texto. A secao 54 tentou apagar o traco com
   opacity: 0, mas nao alcanca aqui: a regra da setinha
   (#header #nav .dropdown-toggle::after) e mais especifica e mantem o .45.

   A correcao devolve a setinha a geometria do Bootstrap: sem posicao absoluta,
   sem fundo, so as bordas que formam o triangulo.
   -------------------------------------------------------------------------- */

    #header #nav .dropdown-toggle::after {
        position: static !important;
        display: inline-block;
        left: auto; right: auto; bottom: auto; top: auto;
        width: 0; height: 0;
        background: none !important;
        background-color: transparent !important;
        border-top: .3em solid currentColor;
        border-right: .3em solid transparent;
        border-bottom: 0;
        border-left: .3em solid transparent;
        border-radius: 0;
        margin-left: .3rem;
        vertical-align: .1em;
        opacity: .5;
    }
    #header #nav > li:hover > .dropdown-toggle::after,
    #header #nav > li.show > .dropdown-toggle::after { opacity: .85; }

/* --------------------------------------------------------------------------
   55.3  A PILULA PINTAVA, MAS NINGUEM VIA
   --------------------------------------------------------------------------
   Nao estava quebrada: medido com as transicoes desligadas, o hover aplicava
   rgba(15, 23, 42, .055) com raio de 999px. O problema e que 5,5% de opacidade
   sobre branco da um cinza praticamente invisivel.

   (A primeira medicao chegou a acusar "transparente" - era leitura durante a
   transicao de background-color, que fica no topo da cascata enquanto corre.
   Com transition: none o valor real apareceu.)

   Subir so a opacidade nao resolve: com o verde #047857 por cima, o contraste
   caia junto. Medido no tema claro:

       alpha .055 -> 4.69:1   (invisivel, mas passa)
       alpha .075 -> 4.50:1   (no limite exato)
       alpha .085 -> 4.41:1   REPROVA

   A saida foi mexer nos dois ao mesmo tempo: pilula bem mais presente (.12) e
   texto no verde de hover que o tema ja define. Fica mais visivel E com mais
   folga de contraste:

       claro   #036b4d sobre pilula .12  ->  4.88:1
       escuro  #34d399 sobre pilula .12  ->  6.58:1

   O estado ATIVO continua no verde da marca com fundo brand-soft: os dois
   estados se distinguem pela COR, nao pela intensidade.
   -------------------------------------------------------------------------- */

    #header { --pt-nav-pilula: rgba(15, 23, 42, .12); }
    html[data-theme="dark"] #header { --pt-nav-pilula: rgba(255, 255, 255, .12); }

    #header #nav > li > a:hover,
    #header #nav > li > a:focus,
    #header #nav > li > a:focus-visible,
    #header .pt-header__nav .nav-link:hover,
    #header .pt-header__nav .nav-link:focus,
    #header .pt-header__nav .nav-link:focus-visible {
        color: var(--pt-brand-hover) !important;
    }
}

@media (min-width: 1200px) and (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) #header { --pt-nav-pilula: rgba(255, 255, 255, .12); }
}

/* ==========================================================================
   56. HERO — ETIQUETAS DE SERVICO E MODAL DO SINCRONIZADOR
   ==========================================================================
   Componentes NOVOS. Nada aqui alcanca o contador, o alerta de faturas, o
   avatar ou o menu. Prefixos .pt-tag, .pt-cred e .pt-sync nao existem em
   nenhuma outra parte do tema.
   ========================================================================== */

/* --------------------------------------------------------------------------
   56.1  ETIQUETAS DO QUE O CLIENTE CONTRATOU
   --------------------------------------------------------------------------
   Teal/emerald neutro, conforme especificado: fundo translucido a 10% e texto
   solido #0F766E. Medido sobre o card branco: 4.76:1, passa.

   No tema ESCURO esse par reprova (2.46:1 - o texto e escuro demais para o
   fundo escuro). La o tint sobe para 16% e o texto vai para #2dd4bf, que da
   5.60:1. Mesma familia de cor, contraste resolvido nos dois lados.
   -------------------------------------------------------------------------- */

.pt-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* Os 12px de cima nao sao enfeite: medido, a base do circulo do avatar e o
       topo da etiqueta ficavam no MESMO pixel (197 e 197), encostados. A linha
       do avatar nao tem margem inferior, e esta regra so tinha margem embaixo.
       Com 12px em cima o respiro fica igual ao de baixo, entre a etiqueta e o
       texto - mesmo ritmo nos dois lados. */
    margin: 12px 0;
}
.pt-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 50px;
    background: rgba(15, 118, 110, .10);
    color: #0F766E;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -.005em;
    white-space: nowrap;
}
html[data-theme="dark"] .pt-tag {
    background: rgba(45, 212, 191, .16);
    color: #2dd4bf;
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .pt-tag {
        background: rgba(45, 212, 191, .16);
        color: #2dd4bf;
    }
}

/* --------------------------------------------------------------------------
   56.2  MODAL DO SINCRONIZADOR
   --------------------------------------------------------------------------
   Sem moldura pesada: o card ja vem do estilo de modal do tema. Aqui so
   entram o respiro e as caixas de credencial.
   -------------------------------------------------------------------------- */

.pt-sync .modal-dialog { max-width: 480px; }

.pt-sync__titulo {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.015em;
}
.pt-sync__titulo i { font-size: .95rem; color: var(--pt-brand); }

.pt-sync__intro {
    margin: 0 0 1.1rem;
    font-size: .89rem;
    line-height: 1.55;
    color: var(--pt-text-dim);
}

.pt-cred { margin-bottom: .9rem; }
.pt-cred__rotulo {
    display: block;
    margin-bottom: .3rem;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pt-text-dim);
}
.pt-cred__caixa {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: 10px 10px 10px 14px;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
    background: #F3F4F6;
}
html[data-theme="dark"] .pt-cred__caixa { background: var(--pt-card-inset); }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .pt-cred__caixa { background: var(--pt-card-inset); }
}

.pt-cred__valor {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    background: none;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13.5px;
    color: var(--pt-text-strong);
    word-break: break-all;
}
.pt-cred__valor--oculto { letter-spacing: .12em; }

.pt-cred__acao {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--pt-text-dim);
    font-size: 13px;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}
.pt-cred__acao:hover { background: var(--pt-hover); color: var(--pt-text-strong); }
.pt-cred__acao--ok { color: var(--pt-brand); }

/* Acao principal do modal: mesma gramatica dos outros botoes do tema -
   branco sobre verde fundo, hover que aprofunda. */
.pt-sync__baixar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    width: 100%;
    margin-top: 1.3rem;
    padding: 13px 20px;
    border-radius: var(--pt-radius-sm);
    background: #047857;
    color: #ffffff !important;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 8px 22px -12px rgba(4, 120, 87, .70),
                inset 0 1px 0 rgba(255, 255, 255, .16);
    transition: background .2s ease, box-shadow .2s ease;
}
.pt-sync__baixar:hover,
.pt-sync__baixar:focus {
    background: #065f46;
    color: #ffffff !important;
    box-shadow: 0 12px 28px -12px rgba(4, 120, 87, .80),
                inset 0 1px 0 rgba(255, 255, 255, .18);
}

.pt-sync__rodape { justify-content: center; }
.pt-sync__ajuda {
    margin: 0;
    width: 100%;
    text-align: center;
    font-size: .82rem;
    color: var(--pt-text-dim);
}
.pt-sync__ajuda a { color: var(--pt-brand); font-weight: 600; }
.pt-sync__ajuda a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   56.3  A FILEIRA DE ACOES DO HERO
   --------------------------------------------------------------------------
   Com varios botoes lado a lado o desalinho aparece: medido, o calm tinha
   46px, o quiet 51px e o ghost 21px, cada um com um topo diferente. Numa
   fileira isso le como descuido.

   A altura comum vale SO dentro de .pt-welcome__actions. Os mesmos botoes
   usados em outras telas continuam com a geometria original.
   -------------------------------------------------------------------------- */

.pt-welcome__actions { align-items: center; }
.pt-welcome__actions > .pt-btn--calm,
.pt-welcome__actions > .pt-btn--quiet,
.pt-welcome__actions > .pt-btn--pay {
    min-height: 46px;
    padding-top: 0;
    padding-bottom: 0;
    align-items: center;
}

/* --------------------------------------------------------------------------
   56.4  RESPIRO ENTRE O AVATAR E A SAUDACAO
   --------------------------------------------------------------------------
   O circulo das iniciais ficava colado no "Ola, Nome".

   O afastamento sobe pelo GAP do flex, e nao por margin-right no avatar: o
   container ja tem gap: .8rem, entao uma margem se SOMARIA a ele e daria
   quase 29px - espaco demais. Mexer no gap deixa exatamente os 16px pedidos,
   com um numero so para ajustar no futuro.
   -------------------------------------------------------------------------- */

.pt-welcome__hi--ar { gap: 16px; }

@media (max-width: 575px) {
    .pt-welcome__hi--ar { gap: 12px; }
}

/* ==========================================================================
   57. CAMADA DE PROFUNDIDADE — "ULTRA PREMIUM"
   ==========================================================================
   O diagnostico, medido antes de mexer: a pagina (#f8fafc) e o card (#ffffff)
   tinham contraste de 1.046:1. Na pratica o card NAO EXISTIA - tudo flutuava
   no mesmo plano branco. Era disso que vinha a sensacao de design pobre.

   Para comparar, o tema escuro ja separava 1.22:1 - por isso o SyncBox, que e
   escuro, sempre pareceu mais acabado que a area do cliente.

   A secao 1 ja aprofundou a pagina (#e9eef5) e deu sombra de duas camadas aos
   cards. Aqui vem o resto: hero com presenca, numeros virando cartoes e os
   blocos ganhando elevacao de verdade.

   NENHUMA regra aqui muda logica, texto, condicional ou estrutura de DOM. E
   cor, sombra, raio e escala tipografica.
   ========================================================================== */

/* --------------------------------------------------------------------------
   57.1  O BRILHO AMBIENTE QUE JA EXISTIA, AGORA VISIVEL
   --------------------------------------------------------------------------
   O body::before da secao 2 ja pintava duas lavagens radiais de marca. Sobre
   um fundo quase branco elas simplesmente nao apareciam. Com a pagina mais
   funda elas passam a ler - e ganham um pouco mais de forca, no mesmo espirito
   do halo da pagina de vendas.
   -------------------------------------------------------------------------- */

body::before {
    background:
        radial-gradient(64rem 32rem at 10% -10%, rgba(16, 185, 129, .16), transparent 62%),
        radial-gradient(54rem 30rem at 94% 2%, rgba(59, 130, 246, .12), transparent 64%);
}
html[data-theme="dark"] body::before {
    background:
        radial-gradient(64rem 32rem at 10% -10%, rgba(16, 185, 129, .13), transparent 62%),
        radial-gradient(54rem 30rem at 94% 2%, rgba(59, 130, 246, .10), transparent 64%);
}

/* --------------------------------------------------------------------------
   57.2  O HERO GANHA PRESENCA
   --------------------------------------------------------------------------
   Era um retangulo branco chapado. Passa a ter uma lavagem diagonal de marca
   (quase imperceptivel isolada, decisiva no conjunto), elevacao maior e um
   halo verde discreto - a mesma ideia do card de destaque da pagina de vendas.

   A saudacao sobe de 22px para 30px: num hero, 22px e tamanho de paragrafo, e
   era isso que tirava a hierarquia da tela.
   -------------------------------------------------------------------------- */

.pt-welcome {
    background:
        linear-gradient(135deg,
            var(--pt-card) 0%,
            var(--pt-card) 52%,
            rgba(16, 185, 129, .055) 100%);
    border-color: rgba(15, 23, 42, .07);
    border-radius: var(--pt-radius-lg);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .04),
        0 24px 56px -24px rgba(15, 23, 42, .26),
        0 8px 24px -16px rgba(16, 185, 129, .30);
}
html[data-theme="dark"] .pt-welcome {
    background:
        linear-gradient(135deg,
            var(--pt-card) 0%,
            var(--pt-card) 52%,
            rgba(16, 185, 129, .09) 100%);
    border-color: rgba(148, 163, 184, .16);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, .40),
        0 24px 56px -24px rgba(0, 0, 0, .60),
        0 8px 24px -16px rgba(16, 185, 129, .22);
}

.pt-welcome__hello {
    font-size: 30px;
    letter-spacing: -.028em;
    line-height: 1.15;
}
@media (max-width: 767px) {
    .pt-welcome__hello { font-size: 25px; }
}

/* --------------------------------------------------------------------------
   57.3  A FAIXA DE NUMEROS VIRA CARTOES
   --------------------------------------------------------------------------
   Eram quatro numeros numa tira com fios de 1px entre eles - a parte mais
   pobre da tela. Viram cartoes soltos, com elevacao e resposta ao ponteiro.

   A grade NAO muda: continua o mesmo grid auto-fit do original. O que entra e
   o espacamento entre as celulas e a pele de cada uma.
   -------------------------------------------------------------------------- */

.pt-strip {
    gap: 14px;
    border-top: 0;
    border-bottom: 0;
    margin-bottom: 2.5rem;
}
.pt-strip__item,
.pt-strip__item:first-child {
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
    background: var(--pt-card);
    box-shadow: var(--pt-shadow-sm);
    transition: transform .22s var(--pt-ease),
                box-shadow .22s var(--pt-ease),
                border-color .22s var(--pt-ease);
}
.pt-strip__item:hover {
    background: var(--pt-card);
    transform: translateY(-3px);
    border-color: var(--pt-brand-ring);
    box-shadow:
        0 2px 4px rgba(15, 23, 42, .05),
        0 20px 40px -18px rgba(15, 23, 42, .28);
}
html[data-theme="dark"] .pt-strip__item:hover {
    box-shadow:
        0 2px 4px rgba(0, 0, 0, .45),
        0 20px 40px -18px rgba(0, 0, 0, .65);
}
@media (max-width: 575px) {
    .pt-strip { gap: 10px; }
    .pt-strip__item:nth-child(odd) { border-left: 1px solid var(--pt-border); }
}

/* --------------------------------------------------------------------------
   57.4  O BLOCO DE AJUDA SOBE DO FUNDO
   --------------------------------------------------------------------------
   Usava o tom "inset", que sobre a pagina mais funda passaria a parecer um
   buraco. Vira card branco com elevacao, como os demais.
   -------------------------------------------------------------------------- */

.pt-help {
    background: var(--pt-card);
    border-color: rgba(15, 23, 42, .07);
    border-radius: var(--pt-radius);
    box-shadow: var(--pt-shadow-sm);
}
html[data-theme="dark"] .pt-help {
    background: var(--pt-card);
    border-color: rgba(148, 163, 184, .16);
}

/* --------------------------------------------------------------------------
   57.5  PAINEIS E AVISOS COM A MESMA ELEVACAO
   -------------------------------------------------------------------------- */

.pt-panel,
.pt-alertbar,
.pt-aviso {
    border-radius: var(--pt-radius);
    box-shadow: var(--pt-shadow-sm);
}
.pt-panel:hover {
    box-shadow:
        0 2px 4px rgba(15, 23, 42, .05),
        0 18px 38px -18px rgba(15, 23, 42, .24);
}
html[data-theme="dark"] .pt-panel:hover {
    box-shadow:
        0 2px 4px rgba(0, 0, 0, .45),
        0 18px 38px -18px rgba(0, 0, 0, .62);
}

/* --------------------------------------------------------------------------
   57.6  AJUSTE DE CONTRASTE CAUSADO PELA PAGINA MAIS FUNDA
   --------------------------------------------------------------------------
   Efeito colateral medido do aprofundamento: o .pt-btn--soft tem fundo
   translucido, entao ele COMPOE com a pagina. Com a pagina mais escura o
   fundo do botao escureceu junto, e o verde escuro em cima caiu de 4.69 para
   4.33:1 - abaixo do minimo.

   A correcao desce o texto para o verde de hover, que o tema ja define:
   5.16:1 sobre a pagina e 5.95:1 quando o botao esta dentro de um card.

   Foi a unica reprovacao da varredura. Vale como lembrete de que mudar um
   fundo global mexe em todo componente translucido que vive sobre ele.
   -------------------------------------------------------------------------- */

.pt-btn--soft { color: var(--pt-brand-hover); }


/* ==========================================================================
   58. IDENTIDADE MIDIA PLAY — a area do cliente conversa com os outros dois
   ==========================================================================
   A secao 57 resolveu PROFUNDIDADE: a pagina e o card passaram a existir como
   planos separados. Resolvido isso, o que continuava faltando era IDENTIDADE.
   Medido, lado a lado com os outros dois produtos da casa:

       elemento        site de vendas    SyncBox        area do cliente
       -----------     --------------    -----------    ---------------
       tipografia      Inter             Inter          Open Sans
       raio            14px / 9px        14px           20px / 28px / 36px
       easing          .22,1,.36,1       -              .4,0,.2,1
       azul            #2B7FD4           #3B82F6        #2563EB
       barra do topo   vidro             vidro          OPACA (ver 58.6)

   Tres telas da mesma empresa com tres tipografias e tres raios diferentes
   nao leem como uma familia - leem como tres fornecedores. O que entra aqui e
   exatamente essa reconciliacao, mais o acabamento de componente que faltava:
   o hero com estrutura de duas colunas e a grade de marca, os numeros virando
   cartoes de metrica com icone, e a cauda da pagina deixando de ser texto solto.

   NADA aqui muda logica, texto, condicional ou estrutura de DOM. E tipografia,
   cor, raio, sombra, grade e espacamento.
   ========================================================================== */

/* --------------------------------------------------------------------------
   58.0  TOKENS DE IDENTIDADE
   --------------------------------------------------------------------------
   Um :root simples basta para estes tokens. Os blocos [data-theme="light"] e
   [data-theme="dark"] da secao 1 redeclaram superficie, marca e sombra - mas
   NAO redeclaram tipografia, geometria nem movimento. Entao nao ha disputa de
   especificidade aqui: estes valores valem nos dois temas.
   -------------------------------------------------------------------------- */

:root {
    /* TIPOGRAFIA — a mesma do site de vendas e do SyncBox.
       Inter primeiro, Open Sans logo atras: se o Google Fonts nao responder,
       a tela cai na fonte que o proprio WHMCS ja carrega e nada quebra. */
    --pt-font: Inter, "Open Sans", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* MOVIMENTO — a curva do site de vendas. O cubic-bezier(.4,0,.2,1) e a
       curva padrao do Material: correta e anonima. Esta tem uma desaceleracao
       longa no fim, que e o que faz um hover parecer caro em vez de mecanico. */
    --pt-ease: cubic-bezier(.22, 1, .36, 1);

    /* GEOMETRIA — 14px e o raio da casa (site e SyncBox usam o mesmo numero).
       Os 20/28/36px daqui vinham de outro lugar e deixavam a area do cliente
       com um ar mais arredondado - e portanto mais "app" e menos corporativo -
       que os outros dois produtos. Raio nao afeta fluxo: nenhuma caixa muda de
       tamanho ou de posicao por causa desta mudanca. */
    --pt-radius-sm:   10px;
    --pt-radius:      14px;
    --pt-radius-lg:   18px;
    --pt-radius-xl:   24px;
    --pt-radius-card: 14px;
    --pt-r-card:      14px;

    /* A GRADE DE MARCA — o fio da malha que aparece no hero (58.2). */
    --pt-grade: rgba(15, 23, 42, .055);
}
html[data-theme="dark"] { --pt-grade: rgba(148, 163, 184, .075); }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) { --pt-grade: rgba(148, 163, 184, .075); }
}

/* O AZUL DA MARCA.
   O site de vendas tem #2B7FD4 como cor primaria. Usar o MESMO valor aqui
   reprovaria no contraste: medido, #2B7FD4 sobre branco da 4.13:1, abaixo dos
   4.5 que o WCAG AA pede para texto normal. O tom de LETRA desce o suficiente
   para passar (5.08:1) e continua sendo reconhecivelmente o mesmo azul; no
   escuro entra o #4A97E4, que e literalmente o tom de hover do site (4.71:1
   sobre o card escuro). As TINTAS translucidas usam o #2B7FD4 puro, porque ali
   a cor e fundo e nao letra. */
:root,
:root[data-theme="light"] {
    --pt-blue:      #1F6FC4;
    --pt-blue-soft: rgba(43, 127, 212, .10);
}
:root[data-theme="dark"] {
    --pt-blue:      #4A97E4;
    --pt-blue-soft: rgba(74, 151, 228, .14);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --pt-blue:      #4A97E4;
        --pt-blue-soft: rgba(74, 151, 228, .14);
    }
}

/* --------------------------------------------------------------------------
   58.1  TIPOGRAFIA
   --------------------------------------------------------------------------
   A troca da familia ja veio pelo token. O que entra aqui e o ajuste fino que
   o Inter pede e o Open Sans nao pedia: ele foi desenhado para ser apertado em
   tamanho grande. Sem o letter-spacing negativo nos titulos, o Inter fica
   frouxo - que e o oposto do efeito que se quer.

   O arquivo da fonte e carregado em includes/head.tpl, com o mesmo preconnect
   e o mesmo carregamento nao-bloqueante do site de vendas.
   -------------------------------------------------------------------------- */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Numero em caixa de metrica sempre com largura fixa de digito: sem isso o
   contador "11" fica visivelmente mais estreito que o "44" ao lado. */
.pt-strip__value,
.pt-welcome__status,
.pt-header__dot {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* A saudacao e o unico texto de display da tela. Ela cresce com a janela, como
   o h1 do site de vendas, e fecha o espaco entre as letras na mesma proporcao. */
.pt-welcome__hello {
    font-size: clamp(26px, 2.6vw, 36px);
    font-weight: 800;
    letter-spacing: -.034em;
    line-height: 1.08;
}
@media (max-width: 767px) {
    .pt-welcome__hello { font-size: 26px; }
}

.pt-welcome__sub {
    margin-top: .7rem;
    font-size: 14.5px;
    line-height: 1.6;
    max-width: 62ch;
}

.pt-alertbar__title,
.pt-help__title {
    letter-spacing: -.022em;
}

/* --------------------------------------------------------------------------
   58.2  O HERO — duas colunas e a grade da marca
   --------------------------------------------------------------------------
   DOIS PROBLEMAS, UM ARRANJO.

   O primeiro era de leitura: com quatro botoes, o flex-wrap jogava a fileira
   inteira para baixo do texto e o hero virava dois blocos empilhados sem
   relacao visivel. Com a grade, o texto fica na coluna larga e as acoes numa
   coluna propria de largura fixa, separadas por um fio - o arranjo de console
   que Stripe, Vercel e Linear usam na mesma situacao.

   O segundo era de identidade: a pagina de vendas tem uma malha de 1px sob o
   hero, com mascara radial, e e o elemento grafico mais reconhecivel da marca.
   Ele entra aqui, no mesmo canto e na mesma forca.

   A mascara e o que impede a malha de virar papel quadriculado: ela so existe
   no canto superior direito e se dissolve antes de chegar no texto.

   NENHUM ELEMENTO SAI DO LUGAR NO DOM. O .pt-welcome__text e o
   .pt-welcome__actions continuam sendo os mesmos dois filhos, na mesma ordem.
   -------------------------------------------------------------------------- */

.pt-welcome {
    position: relative;
    overflow: hidden;
}

/* A malha. pointer-events:none porque ela cobre a area inteira do hero e nao
   pode roubar o clique dos botoes. */
.pt-welcome::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right,  var(--pt-grade) 1px, transparent 1px),
        linear-gradient(to bottom, var(--pt-grade) 1px, transparent 1px);
    background-size: 38px 38px;
    -webkit-mask-image: radial-gradient(38rem 17rem at 86% -14%, #000, transparent 70%);
            mask-image: radial-gradient(38rem 17rem at 86% -14%, #000, transparent 70%);
}

/* Os dois filhos sobem acima da malha. Sem isto o pseudo-elemento, por ser
   posicionado, pintaria por cima do texto estatico. */
.pt-welcome__text,
.pt-welcome__actions {
    position: relative;
    z-index: 1;
}

@media (min-width: 992px) {
    .pt-welcome {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(248px, 272px);
        align-items: center;
        gap: 2.75rem;
        padding: 2.1rem 2.4rem;
    }

    .pt-welcome__actions {
        flex-direction: column;
        align-items: stretch;
        gap: .55rem;
        padding-left: 2.75rem;
        margin-left: -2.75rem;   /* desfaz o gap: o fio encosta no meio dele */
        border-left: 1px solid var(--pt-divider);
    }

    /* Acoes alinhadas pela esquerda, como item de menu de console: os icones
       formam uma coluna e o olho percorre a lista de cima a baixo. */
    .pt-welcome__actions > .pt-btn--calm,
    .pt-welcome__actions > .pt-btn--quiet,
    .pt-welcome__actions > .pt-btn--pay {
        width: 100%;
        justify-content: flex-start;
        padding-left: 18px;
        padding-right: 18px;
        white-space: normal;
        text-align: left;
    }
    .pt-welcome__actions > .pt-btn--calm > i,
    .pt-welcome__actions > .pt-btn--quiet > i,
    .pt-welcome__actions > .pt-btn--pay > i {
        width: 18px;
        text-align: center;
        flex: 0 0 18px;
    }
}

/* O botao "Servicos" e o unico da coluna que nao tem icone, e por isso o texto
   dele comecava 25px antes dos outros - numa coluna de quatro, isso le como
   desalinho. Os 43px sao a conta exata: 18 de recuo + 18 de icone + 7 do gap.

   Regra SEPARADA, por causa do :has(). Num navegador que nao o suporta, um
   seletor invalido derruba a lista inteira em que ele aparece - se isto
   estivesse junto do bloco acima, a coluna de acoes perderia o alinhamento
   todo. Sozinho, o pior caso e este unico botao voltar ao recuo antigo. */
@media (min-width: 992px) {
    .pt-welcome__actions > .pt-btn--quiet:not(:has(> i)),
    .pt-welcome__actions > .pt-btn--calm:not(:has(> i)) {
        padding-left: 43px;
    }
}

/* --------------------------------------------------------------------------
   58.3  AS ETIQUETAS DE SERVICO ficam neutras
   --------------------------------------------------------------------------
   Contado na tela: o selo de situacao, as tres etiquetas e o botao principal
   davam CINCO verdes no mesmo hero. Verde demais e verde nenhum - a cor deixa
   de significar "acao" e vira papel de parede.

   As etiquetas sao informacao, nao acao. Viram chip neutro de superficie. O
   verde volta a ser so do selo de situacao e do botao, que e onde ele trabalha.
   -------------------------------------------------------------------------- */

.pt-tag {
    padding: 5px 12px;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-pill);
    background: var(--pt-card-inset);
    color: var(--pt-text-dim);
    font-weight: 600;
}
html[data-theme="dark"] .pt-tag {
    border-color: var(--pt-border);
    background: rgba(148, 163, 184, .10);
    color: var(--pt-text-dim);
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .pt-tag {
        border-color: var(--pt-border);
        background: rgba(148, 163, 184, .10);
        color: var(--pt-text-dim);
    }
}

/* --------------------------------------------------------------------------
   58.4  OS NUMEROS VIRAM CARTOES DE METRICA
   --------------------------------------------------------------------------
   A secao 57 ja tinha dado pele de cartao a cada celula. Faltava o conteudo
   ter forma de cartao de metrica: numero em cima, rotulo embaixo e o icone
   subindo para um ladrilho no canto, com trilho de acento no topo.

   O icone ja existe no HTML, dentro do rotulo. Ele nao e movido no DOM - sai
   do fluxo por position:absolute e vai ocupar o canto. O leitor de tela
   continua lendo a mesma sequencia de antes.
   -------------------------------------------------------------------------- */

/* 14px e o raio de CARTAO da casa; os 10px que a secao 57 deu vinham do token
   de botao e deixavam a metrica com cara de chip. */
.pt-strip { gap: 16px; }
.pt-strip__item,
.pt-strip__item:first-child { border-radius: var(--pt-radius); }

.pt-strip__item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 116px;
    padding: 18px 20px 18px;
    overflow: hidden;
}

/* Trilho de acento. Transparente por padrao: so as variantes acendem. */
.pt-strip__item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--pt-metrica-trilho, transparent);
}

/* O ladrilho do icone. */
.pt-strip__label > i {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--pt-metrica-tinta, rgba(148, 163, 184, .14));
    color: var(--pt-metrica-tinto, var(--pt-text-mute));
    font-size: 14px;
    transition: transform .22s var(--pt-ease);
}
.pt-strip__item:hover .pt-strip__label > i { transform: scale(1.08); }

.pt-strip__item--brand {
    --pt-metrica-trilho: var(--pt-brand);
    --pt-metrica-tinta:  var(--pt-brand-soft);
    --pt-metrica-tinto:  var(--pt-brand);
}
.pt-strip__item--amber {
    --pt-metrica-trilho: var(--pt-amber);
    --pt-metrica-tinta:  var(--pt-amber-soft);
    --pt-metrica-tinto:  var(--pt-amber);
}

.pt-strip__value { letter-spacing: -.042em; }
.pt-strip__label { margin-top: .5rem; padding-right: 44px; }

@media (max-width: 575px) {
    .pt-strip__item { min-height: 102px; padding: 15px 16px; }
    .pt-strip__label > i { top: 13px; right: 13px; width: 30px; height: 30px; }
}

/* --------------------------------------------------------------------------
   58.5  A CAUDA DA PAGINA DEIXA DE SER TEXTO SOLTO
   --------------------------------------------------------------------------
   Esta e a unica mudanca aqui que altera uma decisao anterior, entao vale
   dizer por que.

   Os paineis do fim da pagina eram achatados de proposito, para fugir da cara
   de WHMCS. A intencao estava certa, mas o efeito colateral ficou visivel
   depois da secao 57: cartoes com elevacao em cima, texto sem moldura embaixo.
   A tela conta duas historias e termina parecendo que acabou a folha de estilo.

   Eles voltam a ser cartoes - com a MESMA pele dos de cima, nao com a moldura
   pesada do WHMCS original. A tipografia de rotulo em versalete, as listas sem
   zebra e o hover que desliza, tudo o que a secao 17 desenhou, continua igual.

   Para voltar ao achatado basta apagar este bloco: nada mais depende dele.
   -------------------------------------------------------------------------- */

.pt-flatgrid .pt-panel,
.pt-panels__full .pt-panel.pt-panel--flat,
.pt-panel--flat {
    padding: 1.5rem 1.6rem !important;
    background: var(--pt-card) !important;
    border: 1px solid var(--pt-border) !important;
    border-radius: var(--pt-radius) !important;
    box-shadow: var(--pt-shadow-sm) !important;
}

/* O respiro entre colunas cai: a moldura ja separa, e 3rem de corredor entre
   dois cartoes deixava a pagina com buraco no meio. */
.pt-flatgrid { gap: 1.25rem; }
.pt-flatcol  { gap: 1.25rem; }

/* O cabecalho do cartao volta a ter o recuo do cartao, nao o recuo zero do
   texto solto. */
.pt-panel--flat .card-header { padding: 0 0 .85rem 0 !important; }
.pt-panel--flat .card-body   { padding: 1rem 0 0 0 !important; }

/* O item de lista encosta nas bordas do cartao no hover, em vez de flutuar:
   margem negativa igual ao padding do cartao, e o recuo volta por dentro. */
.pt-panel--flat .list-group-item {
    margin: 0 -1.6rem !important;
    padding: .85rem 1.6rem !important;
    border-radius: 0;
    transition: background .18s var(--pt-ease), color .18s var(--pt-ease);
}
.pt-panel--flat .list-group-item:hover {
    background: var(--pt-card-hover) !important;
    color: var(--pt-brand) !important;
    padding-left: 1.6rem !important;
}

@media (max-width: 575px) {
    .pt-flatgrid .pt-panel,
    .pt-panels__full .pt-panel.pt-panel--flat,
    .pt-panel--flat { padding: 1.25rem 1.2rem !important; }
    .pt-panel--flat .list-group-item {
        margin: 0 -1.2rem !important;
        padding: .85rem 1.2rem !important;
    }
    .pt-panel--flat .list-group-item:hover { padding-left: 1.2rem !important; }
}

/* --------------------------------------------------------------------------
   58.6  A BARRA DO TOPO PASSA A SER DE VIDRO DE VERDADE
   --------------------------------------------------------------------------
   BUG ENCONTRADO NA VARREDURA. A secao 16 pediu o vidro:

       backdrop-filter: saturate(180%) blur(12px);

   mas o fundo da mesma regra e `var(--pt-card)`, que e OPACO. backdrop-filter
   desfoca o que esta ATRAS do elemento - e atras de um fundo opaco nao se ve
   nada. O filtro estava sendo calculado a cada quadro de rolagem e jogado
   fora. Barra opaca e processamento gasto a toa.

   Com o fundo translucido o vidro aparece, e e justamente o acabamento que o
   site de vendas e o SyncBox ja tinham e esta tela nao. O @supports garante
   que quem nao tem backdrop-filter continue recebendo o fundo solido - sem
   ele, esses navegadores veriam o conteudo da pagina atravessando o menu.
   -------------------------------------------------------------------------- */

@supports ((backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px))) {
    #header.pt-header {
        background: rgba(255, 255, 255, .78);
        backdrop-filter: saturate(180%) blur(18px);
        -webkit-backdrop-filter: saturate(180%) blur(18px);
    }
    html[data-theme="dark"] #header.pt-header {
        background: rgba(13, 21, 40, .80);
    }
    @media (prefers-color-scheme: dark) {
        html:not([data-theme="light"]) #header.pt-header {
            background: rgba(13, 21, 40, .80);
        }
    }
}

/* --------------------------------------------------------------------------
   58.7  RITMO VERTICAL
   --------------------------------------------------------------------------
   Os blocos do dashboard usavam margens diferentes cada um (1.25rem, 2.5rem,
   3rem), herdadas de quando foram escritos em momentos distintos. Isso faz a
   pagina parecer montada por partes, que e metade da sensacao de "pobre".

   Um unico passo entre blocos, e um passo maior so antes dos cartoes de
   metrica - que e onde a tela realmente muda de assunto.
   -------------------------------------------------------------------------- */

.pt-dashboard > .pt-welcome,
.pt-dashboard > .pt-aviso,
.pt-dashboard > .pt-help,
.pt-dashboard > .pt-alertbar { margin-bottom: 1.25rem; }

.pt-dashboard > .pt-strip  { margin-top: 2rem; margin-bottom: 2rem; }
.pt-dashboard > .pt-panels { margin-top: 0; }

/* O aviso de suspensao parcial nasce com margem negativa no topo, para colar
   no hero de proposito. Isso continua: ele e um rodape do hero, nao um bloco
   independente. */
.pt-dashboard > .pt-aviso { margin-top: -.4rem; }

/* --------------------------------------------------------------------------
   58.8  O PONTEIRO RESPONDE
   --------------------------------------------------------------------------
   Com a curva nova, um unico hover bem feito em cada superficie clicavel ja
   muda a percepcao da tela inteira. Nada de transform em texto - so nas
   superficies, que e onde o movimento nao atrapalha a leitura.
   -------------------------------------------------------------------------- */

.pt-help__link {
    transition: background .2s var(--pt-ease),
                border-color .2s var(--pt-ease),
                color .2s var(--pt-ease),
                transform .2s var(--pt-ease);
}
.pt-help__link:hover { transform: translateY(-1px); }

.pt-flatgrid .pt-panel {
    transition: box-shadow .24s var(--pt-ease),
                border-color .24s var(--pt-ease);
}


/* --------------------------------------------------------------------------
   58.9  O SELO DE SITUACAO PASSA A TER FUNDO SOLIDO
   --------------------------------------------------------------------------
   ENCONTRADO NA AUDITORIA DESTA RODADA, e vale explicar porque a correcao e
   trocar o fundo e nao a letra.

   O selo usava tinta translucida (--pt-brand-soft, 10% de verde). Tinta
   translucida nao tem cor propria: ela assume a cor do que estiver atras. No
   hero isso agora significa o gradiente - e na parada final dele, a do canto
   verde, o par medido cai para 4.16:1, abaixo dos 4.5 que o WCAG AA pede.

   Na posicao real do selo, no alto a esquerda, o gradiente ainda e branco puro
   e o par da 5.06:1. Ou seja: na pratica ele passa. Mas depender da POSICAO
   para passar e uma garantia fraca - muda o texto, muda a largura, e o selo
   anda. Um fundo solido simplesmente retira a duvida.

   Os valores abaixo sao exatamente a tinta antiga achatada sobre o cartao, um
   para cada tema. Visualmente identicos ao que estava na tela; a diferenca e
   que agora o contraste e o mesmo em qualquer lugar onde o selo apareca.
       claro  #E7F8F2 com #047857 -> 5.06:1      ambar #FEF5E7 -> 5.64:1
       escuro #1C3A43 com #10B981 -> 4.71:1      ambar #383735 -> 5.51:1
   -------------------------------------------------------------------------- */

.pt-welcome__status { background: #E7F8F2; }
.pt-welcome__status--alerta { background: #FEF5E7 !important; }

html[data-theme="dark"] .pt-welcome__status { background: #1C3A43; }
html[data-theme="dark"] .pt-welcome__status--alerta { background: #383735 !important; }

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .pt-welcome__status { background: #1C3A43; }
    html:not([data-theme="light"]) .pt-welcome__status--alerta { background: #383735 !important; }
}


/* ==========================================================================
   59. VARREDURA — o que a auditoria desta rodada encontrou
   ==========================================================================
   Medidos 1.064 elementos de texto em 19 telas, nos dois temas, com o fundo
   efetivo calculado camada a camada (inclusive as paradas de cada gradiente).
   O que esta aqui sao as reprovacoes REAIS que sobraram depois de descartar os
   falsos positivos dos mocks.

   O ACHADO PRINCIPAL tem uma causa so, repetida em sete lugares:

       cor de TEMA ESCURO escrita na mao, dentro de regra que vale nos DOIS.

   As secoes 18 e 19 (pagina de fatura e etiquetas de status) foram escritas
   quando a area do cliente ainda era so escura. Ali, #f87171 e #fca5a5 sao os
   tons certos - vermelho claro sobre fundo preto. Quando o tema claro entrou,
   essas linhas continuaram fixas: vermelho CLARO sobre fundo CLARO.

   Medido na pagina de fatura, tema claro:
       "Em Aberto"                              2.77:1   (minimo 3.0)
       "ATENCAO: A BAIXA DESTE PAGAMENTO..."    1.15:1   (minimo 4.5)
       corpo do aviso vermelho                  1.69:1   (minimo 4.5)

   1.15:1 nao e "pouco contraste" - e texto invisivel. O cliente que abrisse
   uma fatura no tema claro simplesmente nao leria o aviso de que a baixa do
   pagamento e manual.

   A correcao e sempre a mesma: trocar o valor fixo pelo token, que ja muda
   sozinho com o tema. Nenhum tom de tema escuro foi alterado - as telas
   escuras continuam exatamente como estavam.
   ========================================================================== */

/* --------------------------------------------------------------------------
   59.0  TINTA AZUL PARA ESCREVER SOBRE TINTA AZUL
   --------------------------------------------------------------------------
   O --pt-blue serve para escrever sobre CARTAO. Sobre a tinta azul translucida
   (--pt-blue-soft) ele nao serve: medido, 3.81:1 no escuro. E a mesma distincao
   que o CSS do SyncBox ja faz entre --verde e --verde-txt - um e para
   preencher, o outro e para escrever.

       claro  #1A5FA8 sobre tinta azul -> 5.80:1
       escuro #93C5FD sobre tinta azul -> 6.51:1
   -------------------------------------------------------------------------- */

:root,
:root[data-theme="light"] { --pt-blue-ink: #1A5FA8; }
:root[data-theme="dark"]  { --pt-blue-ink: #93C5FD; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --pt-blue-ink: #93C5FD; }
}

/* --------------------------------------------------------------------------
   59.1  PAGINA DE FATURA — os tons presos no tema escuro
   -------------------------------------------------------------------------- */

/* "Em Aberto" / "Reembolsada" no cabecalho da fatura.
   claro  #b91c1c sobre branco -> 7.00:1      escuro #f87171 -> 4.74:1 */
.invoice-container .invoice-status .unpaid,
.invoice-container .unpaid { color: var(--pt-red) !important; }
.invoice-container .refunded { color: var(--pt-blue) !important; }

/* Avisos do corpo da fatura. O negrito usa o mesmo tom do corpo: destacar com
   OUTRA cor dentro de um aviso ja colorido so embaralha a leitura. */
.invoice-container .alert-warning { color: var(--pt-amber) !important; }
.invoice-container .alert-warning strong,
.invoice-container .alert-warning b { color: var(--pt-amber) !important; }
.invoice-container .alert-danger { color: var(--pt-red) !important; }
.invoice-container .alert-info { color: var(--pt-blue-ink) !important; }

/* --------------------------------------------------------------------------
   59.2  ETIQUETAS DE STATUS EM LISTAGEM
   --------------------------------------------------------------------------
   Mesmo defeito, outro lugar: .status-unpaid, .label-danger e .badge-danger
   sao as etiquetas vermelhas das tabelas de faturas e servicos.
   -------------------------------------------------------------------------- */

.status-unpaid,
.status-overdue,
.label-danger,
.badge-danger { color: var(--pt-red) !important; }

/* --------------------------------------------------------------------------
   59.3  ABA ATIVA — fundo solido
   --------------------------------------------------------------------------
   A aba ativa usa tinta verde a 10%. Dentro de um cartao branco isso da
   5.06:1 e passa. Mas as abas da area do cliente ficam DIRETO SOBRE A PAGINA,
   que a secao 57 aprofundou - e sobre ela o mesmo par cai para 4.38:1.

   Foi a secao 57 que empurrou este numero para baixo do minimo, entao a
   correcao pertence a esta varredura. Fundo solido: a aba passa a ter o mesmo
   contraste em qualquer lugar onde for colocada.
       claro #E7F8F2 com #047857 -> 5.06:1    escuro #1C3A43 com #10B981 -> 4.71:1
   -------------------------------------------------------------------------- */

#main-body .nav-tabs .nav-link.active,
#main-body .nav-tabs .nav-item.show .nav-link,
.pt-tabs.nav-tabs .nav-link.active { background: #E7F8F2 !important; }

html[data-theme="dark"] #main-body .nav-tabs .nav-link.active,
html[data-theme="dark"] #main-body .nav-tabs .nav-item.show .nav-link,
html[data-theme="dark"] .pt-tabs.nav-tabs .nav-link.active { background: #1C3A43 !important; }

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) #main-body .nav-tabs .nav-link.active,
    html:not([data-theme="light"]) #main-body .nav-tabs .nav-item.show .nav-link,
    html:not([data-theme="light"]) .pt-tabs.nav-tabs .nav-link.active { background: #1C3A43 !important; }
}

/* --------------------------------------------------------------------------
   59.4  TRECHO DE CODIGO NA RESPOSTA DO TICKET
   --------------------------------------------------------------------------
   O <code> usava --pt-bg-deep como fundo, que e cor de PAGINA e nao de
   superficie. Dentro do balao branco da resposta, verde sobre esse cinza da
   4.34:1. Com o tom de superficie embutida fecha em 5.17:1, e o chip ainda
   fica melhor: ele passa a parecer encaixado no balao, e nao um buraco.
   -------------------------------------------------------------------------- */

.markdown-content code,
.markdown-content pre { background: var(--pt-card-inset) !important; }

/* --------------------------------------------------------------------------
   59.5  DROPDOWN FORA DO CABECALHO
   --------------------------------------------------------------------------
   A cor de repouso do item de menu so estava definida dentro de .pt-scope e
   de #header. Qualquer dropdown que nasca fora dos dois - e o WHMCS cria
   varios, em tabelas e em seletores - fica com o #212529 de fabrica do
   Bootstrap. Sobre o menu escuro isso da 1.05:1: texto preto em caixa preta.

   Sem !important de proposito: as regras mais especificas de .pt-scope e de
   #header continuam mandando onde existem.
   -------------------------------------------------------------------------- */

.dropdown-menu .dropdown-item,
.dropdown-menu > li > a { color: var(--pt-text-dim); }

/* --------------------------------------------------------------------------
   59.6  ROTULO DENTRO DA BARRA DE PROGRESSO
   --------------------------------------------------------------------------
   O texto herdava a cor do corpo e ficava sobre o preenchimento verde: 2.54:1
   no escuro. O --pt-on-brand existe exatamente para isto - e o tom que cada
   tema usa para escrever EM CIMA da marca.
       claro #ffffff sobre #047857 -> 5.48:1   escuro #05261B sobre #10B981 -> 6.29:1
   -------------------------------------------------------------------------- */

.progress-bar { color: var(--pt-on-brand) !important; }

/* --------------------------------------------------------------------------
   59.7  O BOTAO DE TEMA USA A TINTA DO MENU
   --------------------------------------------------------------------------
   Era o unico texto do cabecalho em --pt-text-mute; todo o resto da barra usa
   um tom mais firme. Alem de fechar a diferenca de contraste quando a barra
   fica translucida (58.6), tira o ar de "desabilitado" que o botao tinha ao
   lado dos outros itens.
   -------------------------------------------------------------------------- */

.pt-toggle-slot .pt-themetoggle { color: var(--pt-text-dim); }

/* --------------------------------------------------------------------------
   59.8  O VIDRO DO CABECALHO, UM POUCO MAIS SOLIDO
   --------------------------------------------------------------------------
   78% deixava o conteudo rolando por baixo influenciar demais a leitura dos
   itens do menu. 85% mantem o efeito de vidro bem visivel e garante que a
   barra sempre leia como superficie propria, independente do que passe atras.
   -------------------------------------------------------------------------- */

@supports ((backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px))) {
    #header.pt-header { background: rgba(255, 255, 255, .85); }
    html[data-theme="dark"] #header.pt-header { background: rgba(13, 21, 40, .86); }
    @media (prefers-color-scheme: dark) {
        html:not([data-theme="light"]) #header.pt-header { background: rgba(13, 21, 40, .86); }
    }
}


/* --------------------------------------------------------------------------
   59.9  TINTA SOBRE AMBAR SOLIDO
   --------------------------------------------------------------------------
   Mesmo defeito que a secao 52.5 ja tinha descrito para o botao ambar, em
   tres irmaos que ficaram para tras: o selo do painel de faturas, o botao
   dentro do titulo desse painel e o icone do cartao de fatura vencida.

   Eles escrevem #2b1a00 sobre var(--pt-amber). Isso funcionava quando o ambar
   era claro nos dois temas. Depois que o tema CLARO aprofundou o ambar para
   #a1490a (para ele servir como LETRA), a tinta escura sobre ele caiu para
   2.78:1 - o conserto de um quebrou o outro, exatamente como aconteceu com o
   botao.

   A solucao aqui nao pode ser fixar uma cor so: o ambar e deliberadamente
   diferente nos dois temas. Entao entra o token que faltava - o tom com que
   cada tema escreve EM CIMA do ambar, irmao do --pt-on-brand que ja existe.

       claro  #FFFFFF sobre #a1490a -> 6.05:1
       escuro #2B1A00 sobre #f59e0b -> 7.79:1
   -------------------------------------------------------------------------- */

:root,
:root[data-theme="light"] { --pt-on-amber: #ffffff; }
:root[data-theme="dark"]  { --pt-on-amber: #2b1a00; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --pt-on-amber: #2b1a00; }
}

.pt-panel--invoices .card-title .badge { color: var(--pt-on-amber); }
.pt-panel--invoices .card-title .float-right .btn { color: var(--pt-on-amber) !important; }
.pt-stat--invoices.is-due .pt-stat__icon { color: var(--pt-on-amber); }

/* --------------------------------------------------------------------------
   59.10  COLUNA DE ACOES NO CELULAR
   --------------------------------------------------------------------------
   No celular so o botao verde ocupava a largura toda; os outros tres ficavam
   do tamanho do proprio texto, cada um com um fim diferente. Numa pilha
   vertical isso le como lista mal alinhada.

   Todos passam a ocupar a largura, e o conteudo volta ao centro - a mesma
   geometria que a coluna de acoes do computador ja tem, so que empilhada.
   -------------------------------------------------------------------------- */

@media (max-width: 575px) {
    .pt-welcome__actions > .pt-btn--calm,
    .pt-welcome__actions > .pt-btn--quiet,
    .pt-welcome__actions > .pt-btn--pay {
        width: 100%;
        justify-content: center;
    }
}


/* ==========================================================================
   60. CARRINHO — RESPONSIVO E RETENCAO
   ==========================================================================
   Levantado percorrendo a loja de teste de ponta a ponta, em 375px e em
   1280px: vitrine -> carrinho -> finalizacao.

   A "janela estranha" que aparecia no celular tem nome e causa. No passo de
   finalizacao havia um vao de ~450px de nada entre o topo e o primeiro campo.
   Medido no DOM:

       div.already-registered          altura 308px
         div.pull-right.float-right    altura  82px   largura 345px
         p.text-sm-left.overflow-hidden altura 294px  largura   0px

   Um paragrafo com 294px de altura e ZERO de largura. Ele existe, ocupa a
   tela inteira e nao mostra nada - e exatamente a impressao de pagina
   quebrada que o cliente via.

   POR QUE ISSO ACONTECIA, E A CULPA E NOSSA
   --------------------------------------------------------------------------
   O WHMCS esconde elementos com a classe .w-hidden:

       .w-hidden { display: none; }            especificidade (0,1,0)

   E o nosso tema tinha escrito:

       #order-standard_cart#order-standard_cart .btn { display: inline-flex; }   (1,1,0)
       #main-body .btn           { display: inline-flex; }   (1,1,0)

   (1,1,0) vence (0,1,0). Ou seja: todo botao que o WHMCS mandava esconder
   voltava a aparecer. No checkout isso fazia os DOIS botoes - "Ja registrado?"
   e "Criar uma nova conta" - renderizarem juntos. Somados passavam da largura
   da coluna, o float virou linha inteira, e o <p class="overflow-hidden"> ao
   lado, por criar contexto de formatacao propria, teve de desviar do float e
   sobrou com largura zero: cada palavra numa linha, 294px de vazio.

   E o mesmo erro de especificidade que ja tinha engolido itens do menu com
   .d-none. A licao se repete: regra com ID que impoe `display` atropela as
   classes utilitarias de esconder. Por isso a correcao da 60.1 nao e local -
   ela devolve a palavra final a quem manda esconder, no arquivo inteiro.

   O RESTO
   --------------------------------------------------------------------------
   O que sobrou nao e bug, e CSS de fabrica do standard_cart que nunca recebeu
   tratamento de celular nem a paleta da casa: o cartao de produto dividido em
   60%/40% fixos sem media query, o cabecalho da tabela em #058 e o resumo do
   pedido em #666 - dois azuis-cinza que nao existem em lugar nenhum da marca.
   ========================================================================== */

/* --------------------------------------------------------------------------
   60.1  QUEM MANDA ESCONDER TEM A PALAVRA FINAL
   --------------------------------------------------------------------------
   Vale para o site inteiro, e nao so para o carrinho, porque #main-body .btn
   alcanca todas as telas.

   O !important aqui e correto, nao preguica: .w-hidden e .hidden existem com
   um unico proposito, que e sumir. O proprio Bootstrap ja trata .d-none assim.
   Sem isso, qualquer regra futura com ID volta a ressuscitar elemento que o
   JavaScript do WHMCS acabou de esconder - e o defeito reaparece em outro
   lugar, meses depois, sem ninguem ligar uma coisa a outra.
   -------------------------------------------------------------------------- */

.w-hidden,
.hidden { display: none; }

/*
   O !important nao pode ser cego - e foi, e quebrou meia area do cliente.

   O WHMCS usa .w-hidden de DUAS maneiras incompativeis:

     (a) "fique escondido e pronto"  - o selo de ordenacao dentro da tabela,
         o botao alternativo do checkout;
     (b) "comece escondido"          - e entao o jQuery chama .show(), que
         escreve display INLINE no elemento.

   Com !important cego, o caso (b) para de funcionar: inline perde para
   !important. Medido, isso apagou TODA lista do sistema - servicos, dominios,
   faturas, orcamentos, tickets, e-mails, afiliados - porque todas sao
   <table class="table table-list w-hidden"> reveladas por
   jQuery('#tableX').show(). E apagou tambem o formulario de codigo de backup
   do 2FA e os blocos de meio de pagamento, pelo mesmo motivo.

   A saida e deixar o !important valer SO enquanto ninguem escreveu display
   inline. O :not([style*="display"]) faz exatamente isso:

     - elemento parado, sem style inline -> a regra vale com !important e
       vence as nossas regras de ID, que era o problema original;
     - jQuery .show() escreve style="display: table" -> o seletor deixa de
       casar, a regra sai de cena e o inline manda, como deve ser;
     - jQuery .hide() escreve style="display: none" -> idem, e o elemento
       continua escondido pelo proprio inline.

   A regra simples acima fica como base, para o caso de algum navegador
   tropecar no seletor composto.
*/
.w-hidden:not([style*="display"]),
.hidden:not([style*="display"]) { display: none !important; }

/* --------------------------------------------------------------------------
   60.2  O CABECALHO DO CHECKOUT DEIXA DE USAR FLOAT
   --------------------------------------------------------------------------
   A 60.1 ja mata o vao. Isto aqui e cinto de seguranca: enquanto o arranjo
   depender de float + overflow:hidden, basta um botao ficar mais largo (uma
   traducao maior, por exemplo) para o paragrafo voltar a ter largura zero.

   Vira flex. O texto e o botao dividem a linha quando cabe, empilham quando
   nao cabe, e o paragrafo nunca mais some.
   -------------------------------------------------------------------------- */

#order-standard_cart#order-standard_cart .already-registered {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
#order-standard_cart#order-standard_cart .already-registered > .float-right {
    float: none !important;
    order: 2;
    flex: 0 0 auto;
}
#order-standard_cart#order-standard_cart .already-registered > p {
    float: none !important;
    overflow: visible !important;
    order: 1;
    flex: 1 1 260px;
    min-width: 0;
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--pt-text-dim);
}
@media (max-width: 575px) {
    #order-standard_cart#order-standard_cart .already-registered > .float-right,
    #order-standard_cart#order-standard_cart .already-registered > .float-right .btn { width: 100%; }
}

/* O botao "Ja registrado?" entra na linguagem do tema: ele e uma alternativa,
   nao a acao principal. O azul .btn-info de fabrica competia com o verde. */
#order-standard_cart#order-standard_cart #btnAlreadyRegistered,
#order-standard_cart#order-standard_cart #btnNewUserSignup {
    background: transparent !important;
    border: 1px solid var(--pt-border-strong) !important;
    color: var(--pt-text-dim) !important;
    font-weight: 600 !important;
    white-space: nowrap;
}
#order-standard_cart#order-standard_cart #btnAlreadyRegistered:hover,
#order-standard_cart#order-standard_cart #btnNewUserSignup:hover {
    background: var(--pt-card-hover) !important;
    border-color: var(--pt-brand) !important;
    color: var(--pt-text-strong) !important;
}

/* --------------------------------------------------------------------------
   60.3  O CARTAO DE PRODUTO PARA DE SE PARTIR AO MEIO
   --------------------------------------------------------------------------
   O CSS de fabrica do standard_cart:

       .product div.product-desc { float: left;  width: 60%; }
       .product footer           { float: right; width: 40%; }

   Sem UMA media query. Num cartao de 345px no celular, o rodape fica com
   138px - e "Faca seu pedido agora" quebra em QUATRO linhas dentro de uma
   caixa estreita, encostada na direita, com a metade esquerda vazia quando o
   produto nao tem descricao cadastrada. Era isso que parecia falha de
   renderizacao na vitrine.

   O cartao vira coluna: cabecalho, descricao, rodape. No rodape, preco e
   botao dividem a linha no computador e empilham no celular. O
   row-eq-height do WHMCS continua funcionando, porque a altura do cartao
   continua sendo decidida pela linha da grade.
   -------------------------------------------------------------------------- */

#order-standard_cart#order-standard_cart .products .product {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 0 0 0;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    background: var(--pt-card);
    box-shadow: var(--pt-shadow-sm);
    overflow: hidden;
    transition: box-shadow .24s var(--pt-ease),
                border-color .24s var(--pt-ease),
                transform .24s var(--pt-ease);
}
#order-standard_cart#order-standard_cart .products .product:hover {
    transform: translateY(-2px);
    border-color: var(--pt-brand-ring);
    box-shadow: var(--pt-shadow);
}

#order-standard_cart#order-standard_cart .products .product header {
    margin: 0;
    padding: 16px 20px;
    background: var(--pt-card-inset);
    border-bottom: 1px solid var(--pt-divider);
    border-radius: 0;
}
#order-standard_cart#order-standard_cart .products .product header span {
    color: var(--pt-text-strong);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.02em;
}

/* Fim do 60/40. A descricao ocupa a largura toda e empurra o rodape para
   baixo; se o produto nao tiver descricao, ela simplesmente nao ocupa nada. */
#order-standard_cart#order-standard_cart .products .product div.product-desc {
    float: none;
    width: auto;
    flex: 1 1 auto;
    /* !important porque a secao 35 ja fixou o recuo deste bloco com
       !important; sem ele, a regra de baixo (descricao vazia) tambem perde. */
    padding: 16px 20px 0 !important;
    font-size: 14px;
    color: var(--pt-text-dim);
}
#order-standard_cart#order-standard_cart .products .product div.product-desc:empty,
#order-standard_cart#order-standard_cart .products .product div.product-desc > ul:empty { padding: 0; }

/* Produto sem descricao cadastrada: o div existe no HTML mesmo vazio (ele traz
   um <ul> sem itens), entao :empty nao pega. Medido, sobravam 90px de faixa
   branca entre o nome e o preco - um buraco no meio do cartao. Regra SEPARADA
   por causa do :has(); sem suporte, o pior caso e a faixa voltar. */
#order-standard_cart#order-standard_cart .products .product div.product-desc:not(:has(li)):not(:has(p)) {
    padding: 0 !important;
    flex: 0 0 auto;
}
#order-standard_cart#order-standard_cart .products .product div.product-desc ul { margin: 0; padding: 0; list-style: none; }
#order-standard_cart#order-standard_cart .products .product div.product-desc li {
    padding: 5px 0 5px 20px;
    position: relative;
}
#order-standard_cart#order-standard_cart .products .product div.product-desc li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 6px;
    font-size: 11px;
    color: var(--pt-brand);
}

#order-standard_cart#order-standard_cart .products .product footer {
    float: none;
    width: auto;
    margin: 0;
    margin-top: auto;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 14px;
    text-align: left;
    border-top: 1px solid var(--pt-divider);
}
#order-standard_cart#order-standard_cart .products .product div.product-pricing {
    margin: 0;
    line-height: 1.35;
    color: var(--pt-text-mute);
    font-size: 12.5px;
}
#order-standard_cart#order-standard_cart .products .product div.product-pricing span.price {
    display: block;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--pt-text-strong);
}
#order-standard_cart#order-standard_cart .products .product .btn-order-now {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 575px) {
    #order-standard_cart#order-standard_cart .products .product footer {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    #order-standard_cart#order-standard_cart .products .product .btn-order-now {
        width: 100%;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   60.4  OS DOIS CABECALHOS QUE NAO ERAM DA MARCA
   --------------------------------------------------------------------------
   #058 na faixa "Produtos/Opcoes" e #666 no "Resumo do Pedido". Dois tons que
   nao existem em nenhum outro lugar do sistema - e justamente nos dois blocos
   que o cliente mais olha antes de pagar. Era o que lia como "janela de outro
   site" dentro da loja.
   -------------------------------------------------------------------------- */

#order-standard_cart#order-standard_cart .view-cart-items-header {
    padding: 13px 20px;
    background: var(--pt-card-inset);
    border: 1px solid var(--pt-border);
    border-bottom: 0;
    border-radius: var(--pt-radius) var(--pt-radius) 0 0;
    color: var(--pt-text-mute);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}
#order-standard_cart#order-standard_cart .view-cart-items {
    margin: 0 0 1.25rem;
    border: 1px solid var(--pt-border);
    border-radius: 0 0 var(--pt-radius) var(--pt-radius);
    background: var(--pt-card);
    box-shadow: var(--pt-shadow-sm);
    overflow: hidden;
}
#order-standard_cart#order-standard_cart .view-cart-items .item {
    padding: 18px 20px;
    border-bottom: 1px solid var(--pt-divider);
}
#order-standard_cart#order-standard_cart .view-cart-items .item:last-child { border-bottom: 0; }
#order-standard_cart#order-standard_cart .view-cart-items .item-title {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--pt-text-strong);
    letter-spacing: -.015em;
}

#order-standard_cart#order-standard_cart .order-summary {
    margin: 0 0 1.25rem;
    background: var(--pt-card);
    border: 1px solid var(--pt-border);
    border-bottom: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    box-shadow: var(--pt-shadow-sm);
    overflow: hidden;
}
#order-standard_cart#order-standard_cart .order-summary h2 {
    padding: 15px 20px;
    background: var(--pt-card-inset);
    border-bottom: 1px solid var(--pt-divider);
    color: var(--pt-text-mute);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-align: left;
}
/* O fundo #f8f8f8 e a letra #777 do resumo vinham fixos do standard_cart.
   Juntos davam 4.22:1 na linha "Totais" - abaixo dos 4.5 em 12.6px. Alem de
   nao acompanharem o tema escuro, onde virariam um retangulo branco. */
#order-standard_cart#order-standard_cart .summary-container {
    padding: 20px;
    background: var(--pt-card);
    font-size: 1em;
}
#order-standard_cart#order-standard_cart .order-summary .recurring-charges {
    color: var(--pt-text-dim);
    font-style: normal;
}
#order-standard_cart#order-standard_cart .order-summary .btn-continue-shopping {
    color: var(--pt-text-dim);
    font-weight: 600;
}
#order-standard_cart#order-standard_cart .order-summary .subtotal,
#order-standard_cart#order-standard_cart .order-summary .summary-totals,
#order-standard_cart#order-standard_cart .order-summary .bordered-totals,
#order-standard_cart#order-standard_cart .order-summary .recurring-totals {
    border-color: var(--pt-divider);
    font-size: 14px;
    color: var(--pt-text-dim);
}
#order-standard_cart#order-standard_cart .order-summary .total-due-today .amt {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.035em;
    color: var(--pt-text-strong);
}
#order-standard_cart#order-standard_cart .order-summary .total-due-today span:not(.amt) {
    color: var(--pt-text-mute);
    font-size: 12.5px;
}

/* --------------------------------------------------------------------------
   60.5  "ESVAZIAR CARRINHO" VOLTA PARA DENTRO
   --------------------------------------------------------------------------
   Ele tinha margin-top:-20px e fundo #058: subia por cima da borda da tabela
   e ficava com metade do corpo para fora do cartao. Vira o que sempre deveria
   ter sido - um link discreto, abaixo da lista, do lado oposto da acao
   principal. Tirar um item do carrinho nao e acao de destaque.
   -------------------------------------------------------------------------- */

#order-standard_cart#order-standard_cart .empty-cart {
    margin: -.4rem 0 1.5rem;
    text-align: right;
    line-height: 1.4;
}
#order-standard_cart#order-standard_cart .empty-cart .btn {
    padding: 6px 2px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--pt-text-mute) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
#order-standard_cart#order-standard_cart .empty-cart .btn:hover { color: var(--pt-red) !important; }

/* --------------------------------------------------------------------------
   60.6  OS AVISOS DO CHECKOUT NA PALETA DA CASA
   --------------------------------------------------------------------------
   O "Total a pagar hoje" era um .alert-success palido - o numero mais
   importante da tela, no componente de menor peso visual dela. Vira o bloco
   de total que ja existe no resto do sistema.
   -------------------------------------------------------------------------- */

#order-standard_cart#order-standard_cart #totalDueToday.alert {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin: 0 0 1.25rem;
    padding: 18px 20px;
    background: var(--pt-brand-soft);
    border: 1px solid var(--pt-brand-ring);
    border-radius: var(--pt-radius);
    color: var(--pt-text-dim);
    font-size: 14px;
}
#order-standard_cart#order-standard_cart #totalDueToday strong,
#order-standard_cart#order-standard_cart #totalDueToday #totalCartPrice {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--pt-text-strong);
}

/* O selo de ambiente seguro e informacao de rodape, nao alerta. Em amarelo de
   aviso, logo abaixo do botao de comprar, ele sugeria que algo deu errado. */
#order-standard_cart#order-standard_cart .checkout-security-msg.alert {
    margin-top: 1.5rem;
    padding: 14px 18px;
    background: var(--pt-card-inset);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    color: var(--pt-text-mute);
    font-size: 12.5px;
    line-height: 1.55;
}
/* O cadeado usava recuo pendurado: padding-left:75px no bloco e margin-left:-48px
   no icone. Mexer no padding do bloco jogava o icone para FORA da caixa - foi o
   que aconteceu e apareceu na medicao, a 8px da borda esquerda da tela. Vira
   flex, que e recuo pendurado sem aritmetica. */
#order-standard_cart#order-standard_cart .checkout-security-msg.alert {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-left: 18px !important;
}
#order-standard_cart#order-standard_cart .checkout-security-msg i {
    float: none !important;
    margin: 0 !important;
    flex: 0 0 auto;
    font-size: 20px !important;
}
#order-standard_cart#order-standard_cart .checkout-security-msg .clearfix { display: none; }
#order-standard_cart#order-standard_cart .checkout-security-msg .fa-lock { color: var(--pt-brand); }
#order-standard_cart#order-standard_cart .checkout-security-msg strong { color: var(--pt-text-dim); }

/* --------------------------------------------------------------------------
   60.7  A NAVEGACAO SAI DO PASSO DE PAGAMENTO
   --------------------------------------------------------------------------
   Na tela de finalizacao, os painaeis "Categorias" e "Acoes" apareciam ANTES
   do formulario. No celular eles ocupavam a primeira tela inteira: o cliente
   abria a finalizacao e via dois seletores de categoria, nao os campos.

   Tirar navegacao da ultima etapa e pratica basica de carrinho: a unica coisa
   que deve existir ali e terminar a compra. Quem quiser voltar tem o carrinho
   um passo atras, com "Continuar Comprando".

   A regra e ESTREITA de proposito - vale so quando o formulario de checkout
   esta na pagina. Na vitrine e no carrinho a navegacao continua inteira.
   -------------------------------------------------------------------------- */

#order-standard_cart#order-standard_cart:has(#frmCheckout) .cart-sidebar,
#order-standard_cart#order-standard_cart:has(#frmCheckout) .sidebar-collapsed { display: none !important; }

#order-standard_cart#order-standard_cart:has(#frmCheckout) .cart-body {
    float: none;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   60.8  OS SELETORES DE CATEGORIA VIRAM UMA FAIXA FINA
   --------------------------------------------------------------------------
   Abaixo de 1200px o WHMCS esconde a barra lateral e mostra esta versao
   "recolhida" - mas recolhida so no nome: dois cartoes completos, com
   cabecalho e corpo, para abrigar um <select> cada. Medido no celular, os
   dois comiam 380px antes do primeiro produto aparecer.

   Viram dois seletores lado a lado numa faixa fina. Mesma funcao, mesmo HTML,
   um terco da altura - e o produto sobe para a primeira tela, que e o que
   decide a visita.
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    #order-standard_cart#order-standard_cart .sidebar-collapsed {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        gap: 10px;
        margin: 0 0 1.5rem;
    }
    #order-standard_cart#order-standard_cart .sidebar-collapsed .panel,
    #order-standard_cart#order-standard_cart .sidebar-collapsed .card {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    /* O cabecalho do painel ("Categorias", "Acoes") vira rotulo do campo. */
    #order-standard_cart#order-standard_cart .sidebar-collapsed .panel-heading,
    #order-standard_cart#order-standard_cart .sidebar-collapsed .card-header {
        padding: 0 0 6px 2px !important;
        background: transparent !important;
        border: 0 !important;
        color: var(--pt-text-mute) !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: .09em;
        text-transform: uppercase;
    }
    #order-standard_cart#order-standard_cart .sidebar-collapsed .panel-body,
    #order-standard_cart#order-standard_cart .sidebar-collapsed .card-body { padding: 0 !important; }
    #order-standard_cart#order-standard_cart .sidebar-collapsed .panel-heading i,
    #order-standard_cart#order-standard_cart .sidebar-collapsed .card-header i { display: none; }
}

/* --------------------------------------------------------------------------
   60.9  METODOS DE PAGAMENTO VIRAM CARTOES
   --------------------------------------------------------------------------
   Eram radios de 13px soltos no meio de um paragrafo centralizado. Num
   publico que paga por Pix, o metodo de pagamento e uma DECISAO, e decisao
   quer alvo grande: o minimo de 44px de area de toque do WCAG 2.5.5 nao era
   atendido por um radio de 13px.
   -------------------------------------------------------------------------- */

#order-standard_cart#order-standard_cart #paymentGatewaysContainer { margin-bottom: 1.5rem; }
#order-standard_cart#order-standard_cart #paymentGatewaysContainer > p.small {
    margin-bottom: .7rem;
    color: var(--pt-text-mute) !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-align: left;
}
#order-standard_cart#order-standard_cart #paymentGatewaysContainer > .text-center {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    text-align: left;
}
#order-standard_cart#order-standard_cart #paymentGatewaysContainer .radio-inline {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0 !important;
    padding: 15px 18px;
    min-height: 56px;
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius-sm);
    background: var(--pt-card);
    color: var(--pt-text);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s var(--pt-ease),
                background .2s var(--pt-ease),
                box-shadow .2s var(--pt-ease);
}
#order-standard_cart#order-standard_cart #paymentGatewaysContainer .radio-inline:hover {
    border-color: var(--pt-brand);
    background: var(--pt-card-hover);
}

/* Regra SEPARADA por causa do :has(). Num navegador sem suporte o seletor
   invalido derrubaria a lista inteira em que estivesse - aqui, sozinho, o
   pior caso e o cartao escolhido nao acender. */
#order-standard_cart#order-standard_cart #paymentGatewaysContainer .radio-inline:has(input:checked) {
    border-color: var(--pt-brand);
    background: var(--pt-brand-soft);
    box-shadow: 0 0 0 1px var(--pt-brand-ring);
}

/* --------------------------------------------------------------------------
   60.10  O BOTAO DE COMPRAR FICA SEMPRE AO ALCANCE NO CELULAR
   --------------------------------------------------------------------------
   O formulario de finalizacao tem 2.467px de altura no celular. O botao mora
   no fim dele. Entre o cliente decidido e a compra havia cinco rolagens.

   A barra gruda no rodape enquanto houver formulario abaixo e se solta
   naturalmente no fim - sem JavaScript, sem position:fixed e sem roubar
   altura do documento, entao nada mais na pagina muda de lugar.

   O env(safe-area-inset-bottom) e o respiro da barra de gestos do iPhone; sem
   ele o botao fica embaixo da faixa do sistema.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    #order-standard_cart#order-standard_cart form .text-center:has(> #btnCompleteOrder) {
        position: sticky;
        bottom: 0;
        z-index: 20;
        margin: 1.25rem -16px 0;
        padding: 14px 16px;
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        background: var(--pt-card);
        border-top: 1px solid var(--pt-border);
        box-shadow: 0 -12px 32px -14px rgba(15, 23, 42, .30);
    }
    html[data-theme="dark"] #order-standard_cart#order-standard_cart form .text-center:has(> #btnCompleteOrder) {
        box-shadow: 0 -12px 32px -14px rgba(0, 0, 0, .70);
    }
    #order-standard_cart#order-standard_cart #btnCompleteOrder { width: 100%; }
}

/* O "Finalizar" do carrinho e o "Faca seu pedido" da vitrine ocupam a largura
   no celular: alvo grande e fim de linha previsivel. */
@media (max-width: 575px) {
    #order-standard_cart#order-standard_cart .btn-checkout,
    #order-standard_cart#order-standard_cart .btn-continue-shopping { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   60.11  O QUE NAO E A COMPRA PERDE PESO
   --------------------------------------------------------------------------
   Antes do botao de comprar havia, nesta ordem: um textarea de 4 linhas para
   observacoes (campo opcional que quase ninguem usa) e um bloco de convite
   para a lista de e-mails com titulo de 18px e dois paragrafos.

   Nenhum dos dois e removido - os dois tem dono e motivo. Eles so param de
   competir com o botao: o textarea encolhe para 2 linhas e o convite vira
   nota de rodape. Quem quiser escrever, escreve; o campo cresce ao receber o
   foco.
   -------------------------------------------------------------------------- */

#order-standard_cart#order-standard_cart textarea[name="notes"] {
    min-height: 0;
    height: 72px;
    font-size: 14px;
    transition: height .25s var(--pt-ease);
}
#order-standard_cart#order-standard_cart textarea[name="notes"]:focus { height: 150px; }

#order-standard_cart#order-standard_cart .marketing-email-optin {
    margin: 1.25rem 0 0;
    padding: 16px 18px;
    background: var(--pt-card-inset);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
}
#order-standard_cart#order-standard_cart .marketing-email-optin h4 {
    margin: 0 0 .3rem;
    font-size: 14px !important;
    font-weight: 700;
    color: var(--pt-text-dim);
}
#order-standard_cart#order-standard_cart .marketing-email-optin p {
    margin: 0 0 .6rem;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--pt-text-mute);
}

/* --------------------------------------------------------------------------
   60.12  RESPIRO, TITULOS E A COLUNA DO RESUMO
   -------------------------------------------------------------------------- */

/* font-size-36 e literalmente 36px fixos. Num celular de 375px, "Revisar e
   Finalizar a Compra" ocupava duas linhas enormes antes de qualquer conteudo. */
#order-standard_cart#order-standard_cart .header-lined h1 {
    font-size: clamp(24px, 4.4vw, 34px);
    font-weight: 800;
    letter-spacing: -.032em;
    line-height: 1.12;
}
#order-standard_cart#order-standard_cart .header-lined { margin-bottom: 1.4rem; }

/* As legendas de secao ("Informacao pessoal", "Endereco de cobranca") sao
   divisores, nao titulos: ficam a esquerda e em versalete, como o resto. */
#order-standard_cart#order-standard_cart .sub-heading > span,
#order-standard_cart#order-standard_cart .sub-heading .primary-bg-color {
    background: transparent !important;
    color: var(--pt-text-mute) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: .09em;
    text-transform: uppercase;
}

/* Abaixo de 992px o resumo do pedido virava uma coluna de 300px FIXOS,
   centralizada - um cartao estreito no meio de uma tela de 375px, com as
   bordas sobrando dos dois lados. Ele acompanha a largura como todo o resto. */
@media (max-width: 991px) {
    #order-standard_cart#order-standard_cart .secondary-cart-sidebar {
        width: 100%;
        max-width: none;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
    }
    #order-standard_cart#order-standard_cart .secondary-cart-body { padding-left: 0; padding-right: 0; }
}

/* O bloco de cupom nao precisa de moldura propria no meio do caminho. */
#order-standard_cart#order-standard_cart .promo-code-container,
#order-standard_cart#order-standard_cart #promoCodeContainer { margin-bottom: 1.25rem; }


/* ==========================================================================
   61. TRES ACHADOS DA AUDITORIA DO CARRINHO
   ==========================================================================
   Medidos 343 elementos por tema na tela de finalizacao, repouso e ponteiro,
   com a pagina RECARREGADA em cada tema.

   O "recarregada" nao e detalhe de processo. Na primeira passagem eu troquei
   o data-theme com a pagina aberta e o navegador devolveu leitura suja: fundo
   ja no valor do tema claro, tinta ainda no do escuro. Dava 2.95:1 no botao
   "Completar Pedido" - um defeito grave, que nao existe. Recarregado, o par
   verdadeiro e #10B981 com #05261B: 6.29:1, aprovado.

   O que sobrou depois disso sao tres reprovacoes reais, e nenhuma delas nasceu
   nesta rodada - sao componentes de terceiros que nunca receberam a paleta.
   ========================================================================== */

/* --------------------------------------------------------------------------
   61.1  O INTERRUPTOR "SIM/NAO" DA LISTA DE E-MAILS
   --------------------------------------------------------------------------
   Vem do bootstrap-switch, que injeta a propria marcacao por JavaScript e traz
   o verde #5cb85c do Bootstrap 3. Branco sobre ele da 2.48:1 - o rotulo "Sim"
   praticamente nao se le. Passa para o verde da casa, que e o mesmo tom dos
   botoes solidos e ja tem contraste medido.

   Fixo nos dois temas de proposito: o verde aqui significa "ligado", e esse
   significado nao pode mudar de leitura conforme o tema.
       branco sobre #047857 -> 5.48:1
   -------------------------------------------------------------------------- */

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
    background: #047857 !important;
    color: #ffffff !important;
    font-weight: 600;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
    background: var(--pt-card-inset) !important;
    color: var(--pt-text-dim) !important;
    font-weight: 600;
}
.bootstrap-switch {
    border-color: var(--pt-border-strong) !important;
    border-radius: var(--pt-radius-pill) !important;
    overflow: hidden;
}
.bootstrap-switch .bootstrap-switch-label {
    background: var(--pt-card) !important;
    color: var(--pt-text-dim) !important;
}

/* --------------------------------------------------------------------------
   61.2  O SELETOR DE IDIOMA E MOEDA DO RODAPE
   --------------------------------------------------------------------------
   O item usa #dddddd de fabrica como fundo de ponteiro. No tema escuro o texto
   fica no verde claro da marca e o par cai para 1.42:1 - texto claro sobre
   fundo claro. Com os tokens, os dois temas acompanham o fundo.
   -------------------------------------------------------------------------- */

.item-selector .item {
    border-radius: var(--pt-radius-sm);
    color: var(--pt-text-dim);
    transition: background .18s var(--pt-ease), color .18s var(--pt-ease);
}
.item-selector .item:hover,
.item-selector .item:focus,
.item-selector .item.active {
    background: var(--pt-card-hover) !important;
    color: var(--pt-text-strong) !important;
}

/* --------------------------------------------------------------------------
   61.3  O RODAPE DE DIREITOS AUTORAIS
   --------------------------------------------------------------------------
   --pt-text-mute sobre --pt-bg-deep da 4.30:1 em 11.9px, logo abaixo dos 4.5
   exigidos. E o unico texto do site que ainda estava na tinta mais fraca sobre
   o fundo mais escuro da pagina - as duas pontas da escala ao mesmo tempo.
       --pt-text-dim sobre o mesmo fundo -> 5.93:1
   -------------------------------------------------------------------------- */

#footer .copyright,
.copyright { color: var(--pt-text-dim); }


/* --------------------------------------------------------------------------
   61.4  A LINHA DO CARRINHO NO TEMA ESCURO
   --------------------------------------------------------------------------
   ACHADO GRAVE, e so aparece no escuro. O standard_cart pinta cada item do
   carrinho com cor fixa:

       .view-cart-items .item                  { background-color: #fff; }
       .view-cart-items .item:nth-child(even)  { background-color: #eee; }

   Branco e cinza claro, sem tema. No escuro o texto do tema (quase branco)
   caia sobre esse branco: medido, 1.05:1 no nome do produto e 1.23:1 no preco.
   Na pratica, o cliente que usasse o tema escuro abria o carrinho e nao lia o
   que estava comprando.

   A zebra continua existindo - ela ajuda a separar itens quando sao varios -
   so que agora pelos tokens, entao acompanha os dois temas. Na mesma varredura
   vieram o dominio em #056 e o "remover" em #444, pela mesma razao.
   -------------------------------------------------------------------------- */

#order-standard_cart#order-standard_cart .view-cart-items .item { background: transparent; }
#order-standard_cart#order-standard_cart .view-cart-items .item:nth-child(even) { background: var(--pt-card-inset); }
#order-standard_cart#order-standard_cart .view-cart-items .item-domain { color: var(--pt-blue); }
#order-standard_cart#order-standard_cart .view-cart-items .item-group,
#order-standard_cart#order-standard_cart .view-cart-items .item-price .cycle { color: var(--pt-text-mute); }
#order-standard_cart#order-standard_cart .view-cart-items .item-price span { color: var(--pt-text-strong); }
#order-standard_cart#order-standard_cart .btn-remove-from-cart { color: var(--pt-text-mute); }
#order-standard_cart#order-standard_cart .btn-remove-from-cart:hover { color: var(--pt-red); }

/* O "Editar" de cada item usa o #369 de fabrica. Sobre o cartao claro ele
   passa (5.1:1); sobre o cartao escuro cai para 2.44:1. Mais um tom fixo que
   so tinha sido pensado para fundo branco. */
#order-standard_cart#order-standard_cart .view-cart-items .btn-link { color: var(--pt-brand); }
#order-standard_cart#order-standard_cart .view-cart-items .btn-link:hover { color: var(--pt-brand-hover); }


/* ==========================================================================
   62. TRILHA DE ETAPAS DO PEDIDO
   ==========================================================================
   Marcacao em orderforms/standard_cart/pt-passos.tpl.

   O pedido do cliente foi direto: "a forma que aparece as etapas do carrinho e
   confusa, o WHMCS nao pensou nisso". E verdade - o standard_cart nao tem
   indicacao de etapa nenhuma. No computador da para deduzir pelo titulo; no
   celular o titulo sai da tela na primeira rolagem e a pessoa fica sem saber
   se falta um passo ou cinco.

   A trilha fica ACIMA do titulo de proposito: e a primeira coisa a ser lida,
   antes mesmo do que a pagina pede. Em celular ela vira a ancora da tela.
   ========================================================================== */

.pt-passos {
    margin: 0 0 1.5rem;
}
.pt-passos__lista {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.pt-passos__item {
    position: relative;
    min-width: 0;
    text-align: center;
}

/* O fio que liga um passo ao outro. Nasce do selo do passo anterior e morre no
   selo do seguinte, atras dos dois - por isso o z-index 0 e o selo em 1. */
.pt-passos__item + .pt-passos__item::before {
    content: "";
    position: absolute;
    top: 15px;
    right: 50%;
    left: -50%;
    height: 2px;
    background: var(--pt-border-strong);
    z-index: 0;
}
.pt-passos__item.is-feito::before,
.pt-passos__item.is-atual::before { background: var(--pt-brand); }

.pt-passos__alvo {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 0 4px;
    text-decoration: none !important;
    color: inherit;
}

.pt-passos__selo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--pt-border-strong);
    background: var(--pt-card);
    color: var(--pt-text-mute);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    transition: background .22s var(--pt-ease),
                border-color .22s var(--pt-ease),
                color .22s var(--pt-ease),
                transform .22s var(--pt-ease);
}
.pt-passos__selo i { font-size: 12px; }

.pt-passos__nome {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--pt-text-mute);
    white-space: nowrap;
}

/* --- Ja cumprido: verde cheio com o visto ------------------------------- */
.pt-passos__item.is-feito .pt-passos__selo {
    /* #047857 fixo, e nao var(--pt-brand): branco sobre ele da 5.48:1 nos dois
       temas. Com o token, o verde claro do tema escuro deixaria o visto em
       2.54:1 - o mesmo erro de "tinta sobre preenchimento" que ja apareceu no
       botao de comprar. */
    background: #047857;
    border-color: #047857;
    color: #ffffff;
}
.pt-passos__item.is-feito .pt-passos__nome { color: var(--pt-text-dim); }
.pt-passos__item.is-feito .pt-passos__alvo:hover .pt-passos__selo { transform: scale(1.08); }
.pt-passos__item.is-feito .pt-passos__alvo:hover .pt-passos__nome { color: var(--pt-text-strong); }

/* --- Atual: anel de marca, numero em destaque --------------------------- */
.pt-passos__item.is-atual .pt-passos__selo {
    border-color: #047857;
    background: var(--pt-card);
    color: var(--pt-brand);
    box-shadow: 0 0 0 4px var(--pt-brand-soft);
}
.pt-passos__item.is-atual .pt-passos__nome {
    color: var(--pt-text-strong);
    font-weight: 800;
}

/* --- Celular: mesma trilha, mais apertada ------------------------------- */
@media (max-width: 575px) {
    .pt-passos { margin-bottom: 1.25rem; }
    .pt-passos__item + .pt-passos__item::before { top: 13px; }
    .pt-passos__selo { width: 28px; height: 28px; font-size: 12px; }
    .pt-passos__nome { font-size: 11px; }
}

/* Tela muito estreita (320px): o rotulo pode quebrar, entao ele para de ser
   nowrap em vez de empurrar a grade. */
@media (max-width: 359px) {
    .pt-passos__nome { white-space: normal; line-height: 1.25; }
}


/* --------------------------------------------------------------------------
   62.1  DOIS ACABAMENTOS QUE A TELA DE 375px MOSTROU
   -------------------------------------------------------------------------- */

/* (a) O CARRINHO ENCOSTAVA NOS DOIS LADOS DA TELA.
   A .row do order form usa as margens negativas do Bootstrap (0 -15px) e as
   colunas devolvem o recuo com padding de 15px. A conta fecha em ZERO: medido,
   o cartao do carrinho ia de 0 a 375 num aparelho de 375. Todo o resto do
   sistema tem respiro lateral; so o carrinho ficava colado na moldura do
   celular, que e justamente onde parece "app quebrado".

   Zerando a margem negativa, o padding das colunas vira recuo de verdade. */
@media (max-width: 991px) {
    #order-standard_cart#order-standard_cart > .row {
        margin-left: 0;
        margin-right: 0;
    }
}

/* (b) "REMOVER" NAO E ACAO VERDE.
   A regra que acertou o "Editar" no tema escuro alcancava tambem o botao de
   remover, por ser irmao dentro da mesma lista - e tirar um item do carrinho
   passou a ser convidativo. Esta regra vem DEPOIS e devolve o tom neutro, com
   o vermelho reservado para o ponteiro, que e quando a intencao ja existe. */
#order-standard_cart#order-standard_cart .view-cart-items .btn-remove-from-cart { color: var(--pt-text-mute); }
#order-standard_cart#order-standard_cart .view-cart-items .btn-remove-from-cart:hover { color: var(--pt-red); }


/* ==========================================================================
   63. ATALHOS DE CATEGORIA E BARRA DE ACAO
   ==========================================================================
   Duas correcoes vindas do teste em aparelho real, lado a lado com o mesmo
   carrinho no computador.

   O QUE O TESTE MOSTROU
   --------------------------------------------------------------------------
   No computador a navegacao de categorias e uma LISTA na barra lateral: tudo
   visivel, um clique, nenhuma duvida. No celular o WHMCS troca essa lista por
   dois <select>, e a troca estraga tres coisas de uma vez:

     - fora da vitrine nenhuma opcao fica marcada, entao o campo mostra
       "- Escolha Outra Categoria -" e LE COMO CAMPO POR PREENCHER, bem no
       meio do caminho de quem esta tentando comprar;
     - tocar abre a janela nativa do sistema, cinza, sem relacao com a loja;
     - sao dois toques, e as opcoes so existem depois do primeiro.

   E tinha um segundo problema, maior: no carrinho, o botao de continuar fica
   no fim da pagina, depois da lista e do cupom. Quem abre o carrinho nao tem
   nenhuma pista de que existe um proximo passo abaixo da dobra.

   AS DUAS DECISOES
   --------------------------------------------------------------------------
   1. Os <select> viram um trilho de pilhas - um toque, tudo visivel, desenho
      da casa. E eles somem dos passos 2 e 3, onde nunca foram navegacao util.
   2. O carrinho ganha barra fixa com total e botao, visivel desde o primeiro
      pixel.

   A marcacao esta em sidebar-categories-collapsed.tpl e pt-barra-acao.tpl, e
   os dois so existem abaixo de 1200px - acima disso o WHMCS ja mostra a barra
   lateral completa, que funciona.
   ========================================================================== */

/* --------------------------------------------------------------------------
   63.1  O TRILHO DE ATALHOS
   -------------------------------------------------------------------------- */

#order-standard_cart#order-standard_cart .pt-atalhos {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 1.5rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

#order-standard_cart#order-standard_cart .pt-atalhos__grupo { min-width: 0; }

#order-standard_cart#order-standard_cart .pt-atalhos__rotulo {
    display: block;
    margin: 0 0 7px 2px;
    color: var(--pt-text-mute);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

/* O trilho rola na horizontal quando nao cabe, em vez de quebrar em varias
   linhas e empurrar o conteudo para baixo - que e justamente o que nao pode
   acontecer na primeira tela do celular.

   overscroll-behavior-x: contain impede que a rolagem do trilho vaze e vire
   gesto de voltar pagina no Android quando a pessoa arrasta ate o fim. */
#order-standard_cart#order-standard_cart .pt-atalhos__trilho {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 2px 4px;
    margin: -2px -2px -4px;
}
#order-standard_cart#order-standard_cart .pt-atalhos__trilho::-webkit-scrollbar { display: none; }

#order-standard_cart#order-standard_cart .pt-atalhos__chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    /* 42px de altura mais o respiro do trilho passa dos 44px de area de toque
       que o WCAG 2.5.5 pede. O select antigo tinha caixa grande, mas exigia um
       segundo toque dentro da janela do sistema. */
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius-pill);
    background: var(--pt-card);
    color: var(--pt-text-dim);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none !important;
    transition: border-color .18s var(--pt-ease),
                background .18s var(--pt-ease),
                color .18s var(--pt-ease);
}
#order-standard_cart#order-standard_cart .pt-atalhos__chip i { font-size: 12px; opacity: .8; }
#order-standard_cart#order-standard_cart .pt-atalhos__chip:hover,
#order-standard_cart#order-standard_cart .pt-atalhos__chip:focus-visible {
    border-color: var(--pt-brand);
    background: var(--pt-card-hover);
    color: var(--pt-text-strong);
}

/* A categoria aberta e a unica pilha preenchida: ela responde "onde eu estou"
   antes de qualquer outra coisa na tela.
   #047857 fixo com branco da 5.48:1 nos dois temas. */
#order-standard_cart#order-standard_cart .pt-atalhos__chip.is-atual {
    background: #047857;
    border-color: #047857;
    color: #ffffff;
}
#order-standard_cart#order-standard_cart .pt-atalhos__chip.is-atual i { opacity: 1; }

#order-standard_cart#order-standard_cart .pt-atalhos__selo {
    padding: 1px 7px;
    border-radius: var(--pt-radius-pill);
    background: rgba(148, 163, 184, .22);
    font-size: 11px;
}

#order-standard_cart#order-standard_cart .pt-atalhos__grupo--moeda select {
    max-width: 160px;
}

/* --------------------------------------------------------------------------
   63.2  A BARRA DE ACAO DO CARRINHO
   --------------------------------------------------------------------------
   Nasce escondida e so aparece em tela estreita. Declarar assim, e nao o
   contrario, garante que num navegador que ignore a media query ela nunca
   apareca flutuando por cima do carrinho no computador.
   -------------------------------------------------------------------------- */

.pt-barra { display: none; }

@media (max-width: 991px) {

    .pt-barra {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;          /* acima do conteudo, abaixo dos modais (1050) */
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        background: var(--pt-card);
        border-top: 1px solid var(--pt-border);
        box-shadow: 0 -12px 32px -14px rgba(15, 23, 42, .30);
    }
    html[data-theme="dark"] .pt-barra {
        box-shadow: 0 -12px 32px -14px rgba(0, 0, 0, .70);
    }

    .pt-barra__info {
        display: flex;
        flex-direction: column;
        gap: 1px;
        min-width: 0;
    }
    .pt-barra__rotulo {
        color: var(--pt-text-mute);
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .pt-barra__valor {
        color: var(--pt-text-strong);
        font-size: 19px;
        font-weight: 800;
        letter-spacing: -.03em;
        line-height: 1.1;
        white-space: nowrap;
    }

    .pt-barra__acao {
        flex: 1 1 auto;
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        max-width: 62%;
        min-height: 48px;
        padding: 0 20px;
        border: 0;
        border-radius: var(--pt-radius-sm);
        /* Mesmo verde fixo do "Baixar Conteudos" e do "Completar Pedido":
           branco sobre #047857, 5.48:1, igual nos dois temas. Cor de acao nao
           muda de leitura conforme o tema. */
        background: #047857;
        color: #ffffff !important;
        font-size: 15px;
        font-weight: 700;
        text-decoration: none !important;
        white-space: nowrap;
        box-shadow: 0 6px 18px -8px rgba(16, 185, 129, .55);
    }
    .pt-barra__acao:hover,
    .pt-barra__acao:focus { background: #065f46; color: #ffffff !important; }

    /* O espaco que a barra ocupa e devolvido no fim do carrinho, senao ela
       cobriria o rodape. padding, e nao margin, para o fundo da pagina
       continuar inteiro por baixo dela. */
    #order-standard_cart#order-standard_cart:has(.pt-barra) {
        padding-bottom: 92px;
    }

    /* O total ao lado do botao de confirmar, no checkout: ali o container ja e
       a barra grudada (60.10), entao ele so precisa se alinhar. */
    #order-standard_cart#order-standard_cart .pt-barra__valor--junto {
        display: block;
        margin-bottom: 10px;
        text-align: center;
        font-size: 22px;
    }
}

/* No computador o total ja aparece em destaque logo acima do botao; repetir
   seria ruido. */
@media (min-width: 992px) {
    .pt-barra__valor--junto { display: none; }
}


/* ==========================================================================
   64. O BLOCO DE CUPOM PARA DE PARECER A ACAO PRINCIPAL
   ==========================================================================
   "Aplicar Codigo Promocional" nao e um botao: e a ABA de um sistema de abas
   do WHMCS, e o painel aberto embaixo e o conteudo dela. Como a aba nasce
   ativa, os dois aparecem sempre - e a regra da secao 59.3, que acende a aba
   ativa em verde para as abas da area do cliente, pintava esta aqui como se
   fosse a acao principal da tela.

   Resultado medido no carrinho: um botao verde de 122px de painel competindo
   com o "Finalizar", bem no ponto em que a decisao ja foi tomada. Campo de
   cupom em evidencia e vazamento conhecido de conversao - a pessoa sai da
   loja para procurar um codigo que talvez nem exista.

   Aqui ele nao e removido, so para de gritar. Quem tem cupom continua achando
   na hora; quem nao tem para de ser lembrado de que existe.

   A segunda aba ("Estimar Impostos") aparece so para visitante deslogado com
   imposto ligado. Quando ela existe, as duas voltam a se comportar como abas
   de verdade - por isso a regra do rotulo quieto e condicionada ao caso de
   UMA aba, com :has().
   ========================================================================== */

#order-standard_cart#order-standard_cart .view-cart-tabs {
    margin-top: 1.25rem;
}
#order-standard_cart#order-standard_cart .view-cart-tabs .nav-tabs {
    border-bottom: 0 !important;
    margin-bottom: 0;
}
#order-standard_cart#order-standard_cart .view-cart-tabs .tab-content {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 10px 0 0 0 !important;
}

/* Regra SEPARADA por causa do :has(). Num navegador sem suporte, o pior caso e
   a aba continuar com o realce verde - nada quebra. */
#order-standard_cart#order-standard_cart .view-cart-tabs .nav-tabs:not(:has(> li:nth-child(2))) .nav-link {
    background: transparent !important;
    border: 0 !important;
    padding: 0 2px 2px !important;
    color: var(--pt-text-dim) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: .02em;
}
#order-standard_cart#order-standard_cart .view-cart-tabs .nav-tabs:not(:has(> li:nth-child(2))) .nav-link:hover {
    color: var(--pt-text-strong) !important;
}

/* O botao "Validar Codigo" e acao secundaria: contorno, nao preenchimento. */
#order-standard_cart#order-standard_cart .view-cart-tabs .tab-pane .btn-default {
    background: transparent !important;
    border: 1px solid var(--pt-border-strong) !important;
    color: var(--pt-text-dim) !important;
    font-weight: 600 !important;
}
#order-standard_cart#order-standard_cart .view-cart-tabs .tab-pane .btn-default:hover {
    border-color: var(--pt-brand) !important;
    color: var(--pt-text-strong) !important;
    background: var(--pt-card-hover) !important;
}


/* ==========================================================================
   65. DOIS ACHADOS DO TESTE EM APARELHO
   ==========================================================================
   Os dois vieram do cliente testando no proprio celular, e os dois sao do
   mesmo tipo: a interface funcionava e mesmo assim passava a impressao errada.
   ========================================================================== */

/* --------------------------------------------------------------------------
   65.1  OS ATALHOS QUEBRAM LINHA EM VEZ DE ROLAR PARA O LADO
   --------------------------------------------------------------------------
   A secao 63 pos as pilhas num trilho horizontal, para economizar altura na
   primeira tela. Economizou - e cobrou caro por isso.

   O relato: "Transferencia em um domini..." aparecia cortado na borda, e nem
   um usuario experiente percebeu que dava para arrastar. Quem reparou foi o
   filho dele. A frase dele resume o problema melhor do que qualquer teoria:
   "a gente acha que vai aparecer sempre inteira as opcoes".

   E a expectativa certa. Rolagem lateral funciona em capa de filme e capa de
   album, onde o conteudo e IMAGEM e o pedaco visivel do proximo cartao ja
   avisa que ha mais. Com TEXTO cortado no meio da palavra, a leitura nao e
   "tem mais ao lado" - e "quebrou".

   Haveria como sinalizar: desbotar a borda, por seta, animar um empurrao na
   primeira visita. Todos sao remendo em cima de uma escolha que nao se paga:
   estariamos gastando pixel e codigo para ENSINAR um gesto, em vez de
   simplesmente nao exigir o gesto.

   As pilhas passam a quebrar linha. Nenhuma palavra cortada, nenhuma opcao
   escondida, nada para aprender. Custa algumas dezenas de pixels de altura -
   e opcao visivel vale mais que altura economizada numa tela de escolha.

   Para compensar parte do custo, elas ficam um pouco mais compactas no
   celular, sem descer dos 44px de area de toque do WCAG 2.5.5 (a altura de
   40px mais o espaco de 8px entre linhas fecha a conta).
   -------------------------------------------------------------------------- */

#order-standard_cart#order-standard_cart .pt-atalhos__trilho {
    flex-wrap: wrap;
    overflow: visible;
    padding: 0;
    margin: 0;
}

/* No celular as pilhas entram numa GRADE de duas colunas em vez de quebrarem
   soltas. Medido numa tela de 375px: as tres acoes padrao do WHMCS
   ("Registrar um novo dominio", "Transferencia em um Dominio", "Visualizar
   carrinho") tem entre 204 e 255px cada - nenhuma dupla cabe lado a lado numa
   quebra livre, entao viravam TRES linhas. Na grade sao duas, e o conjunto
   para de parecer quebra acidental e passa a parecer arranjo.

   auto-fit, e nao duas colunas fixas: com uma unica pilha, a coluna vazia some
   e ela ocupa a largura toda, como os outros botoes do celular. */
@media (max-width: 575px) {
    #order-standard_cart#order-standard_cart .pt-atalhos { gap: 10px; }
    #order-standard_cart#order-standard_cart .pt-atalhos__trilho {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 8px;
        align-items: stretch;
    }
    /* Sobrando uma pilha solta na ultima linha, ela ocupa as duas colunas em
       vez de ficar com meia largura ao lado de um vazio. Vale para contagem
       impar (1, 3, 5...), que e justamente quando sobra. */
    #order-standard_cart#order-standard_cart .pt-atalhos__chip:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
    #order-standard_cart#order-standard_cart .pt-atalhos__chip {
        min-height: 40px;
        padding: 0 14px;
        font-size: 13.5px;
    }
    /* Rotulo muito longo numa tela muito estreita quebra dentro da pilha em
       vez de furar a linha. */
    #order-standard_cart#order-standard_cart .pt-atalhos__chip {
        white-space: normal;
        line-height: 1.25;
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

/* --------------------------------------------------------------------------
   65.2  A BARRA SAI DE CENA QUANDO O BOTAO DE VERDADE APARECE
   --------------------------------------------------------------------------
   No fim do carrinho apareciam dois "Finalizar" e dois totais, um colado no
   outro: o do resumo e o da barra. O cliente chamou de bug, e e o nome certo -
   atalho que continua insistindo depois que o destino ja esta na tela deixa
   de ser atalho.

   Quem decide a hora e o IntersectionObserver do pt-barra-acao.tpl, que
   observa o botao do resumo. Aqui fica so o movimento: a barra desce e sai,
   em vez de piscar. 110% para o translate, e nao 100%, para a sombra de cima
   sair junto.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .pt-barra {
        transition: transform .3s var(--pt-ease), opacity .22s var(--pt-ease);
        will-change: transform;
    }
    .pt-barra.is-oculta {
        transform: translateY(110%);
        opacity: 0;
        pointer-events: none;
    }
}

/* Quem pediu menos animacao no sistema recebe a troca sem o deslize. */
@media (prefers-reduced-motion: reduce) {
    .pt-barra { transition: none; }
    .pt-barra.is-oculta { transform: none; display: none; }
}


/* ==========================================================================
   66. MODAL DO SINCRONIZADOR — AVISO E ACESSO AO PAINEL WEB
   ==========================================================================
   O modal mostrava usuario e senha e dizia "use para entrar no aplicativo".
   Faltava o resto da verdade: a MESMA conta abre o painel web do SyncBox.

   Quem entra pelo botao verde da tela inicial nunca digita nada - o acesso ao
   painel e automatico - e por isso mesmo nao sabe que tem senha. No dia em que
   abrir o painel do celular, ou de outro computador, vira chamado de suporte
   perguntando qual e a senha. E a resposta nao e obvia nem para quem atende:
   essa senha e gerada pelo WHMCS para o SERVICO, e nao e a mesma da central
   do cliente.

   Entra o link para o painel web. (Houve tambem uma nota avisando que esta
   senha nao e a da central; foi retirada a pedido do cliente, que mede poucos
   chamados por esse motivo e preferiu a janela mais limpa.)

   TODAS AS REGRAS DAQUI SAO SEM PREFIXO DE CONTAINER, como o resto do modal
   (secao 56.2). Eu tinha escrito #main-body .pt-sync__web e nao pegou: um
   modal do Bootstrap pode acabar FORA do container onde nasceu, e aqui o teste
   mostrou os dois elementos novos sem estilo nenhum. O modal inteiro ja era
   estilizado sem prefixo justamente por isso - faltou eu seguir a mesma regra.
   ========================================================================== */

/* NAO use flex aqui. Com display:flex, cada no de texto e cada <strong> viram
   ITENS separados do flex - medido, o "nao" em negrito saiu da frase e ficou
   sozinho num bloco, com buraco dos dois lados. Recuo pendurado resolve sem
   quebrar a frase: o paragrafo e um bloco normal e o icone sai do fluxo. */
/* O painel web e a alternativa, nao a acao principal: quem esta nesta janela
   veio instalar o aplicativo. Contorno, e nao preenchimento - o verde solido
   continua sendo so do "Baixar Instalador". */
.pt-sync__web {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-top: 10px;
    min-height: 46px;
    padding: 0 20px;
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius-sm);
    background: transparent;
    color: var(--pt-text-dim);
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none !important;
    transition: border-color .2s var(--pt-ease),
                background .2s var(--pt-ease),
                color .2s var(--pt-ease);
}
.pt-sync__web:hover,
.pt-sync__web:focus-visible {
    border-color: var(--pt-brand);
    background: var(--pt-card-hover);
    color: var(--pt-text-strong);
}
.pt-sync__web i { font-size: 13px; }


/* ==========================================================================
   67. NOMENCLATURA SYNCBOX E O DOMINIO QUE DEIXOU DE SER LINK
   ========================================================================== */

/* --------------------------------------------------------------------------
   67.1  O HOST DO SERVICO, NA LISTA, E TEXTO
   --------------------------------------------------------------------------
   Ele era um <a> e virou <span> (ver clientareaproducts.tpl). Sem regra
   propria herdaria a cor de paragrafo e competiria com o nome do produto logo
   acima. Como e informacao de apoio, vai no tom mais fraco - e perde o
   sublinhado e o cursor de mao que anunciavam um clique que nao existe mais.
   -------------------------------------------------------------------------- */

#main-body .pt-rowitem__dom {
    color: var(--pt-text-mute);
    font-size: 12.5px;
    cursor: inherit;
}

/* --------------------------------------------------------------------------
   67.2  RESPIRO ENTRE O DOWNLOAD E A PRIMEIRA CREDENCIAL
   --------------------------------------------------------------------------
   Com a ordem nova (baixar primeiro), o bloco de usuario encosta no botao
   verde. Os 18px separam as duas etapas: "baixe" e "depois entre com isto".
   -------------------------------------------------------------------------- */

.pt-cred--primeiro { margin-top: 18px; }


/* ==========================================================================
   68. MINHAS CREDENCIAIS - UMA JANELA, TODOS OS SERVICOS
   ==========================================================================
   O modal do SyncBox resolve quem vai INSTALAR. Nao resolve quem so quer
   saber a senha - e esse cliente nunca clicaria num botao escrito
   "Instalar o SyncBox no Windows" para descobri-la. Pior: quem tem dois
   servicos (conteudo e streaming, por exemplo) nao tinha onde ver o segundo.

   Entra uma janela so, listando cada servico ativo com usuario, senha e o
   caminho para o painel daquele servico. A senha chega coberta, com revelar e
   copiar - o mesmo comportamento, e o MESMO script, do modal do SyncBox: os
   botoes usam data-pt-copiar / data-pt-revelar, que o ouvinte de clique no
   documento ja atende para qualquer quantidade de blocos.

   Reaproveita .pt-sync__titulo, .pt-sync__intro e toda a familia .pt-cred da
   secao 56.2 - por isso o modal carrega as duas classes (pt-sync e
   pt-credenciais). Aqui entra so o que e proprio da LISTA.
   ========================================================================== */

/* --------------------------------------------------------------------------
   68.1  A JANELA
   --------------------------------------------------------------------------
   40px mais larga que a do SyncBox: ali havia um par de credenciais, aqui ha
   um bloco por servico, e o nome do produto ("Programetes e Programas") nao
   pode quebrar em duas linhas dentro do cartao.

   O corpo rola por conta propria em vez de alongar a janela. Com tres ou
   quatro servicos a lista passa da altura da tela no celular, e o modal do
   Bootstrap rolaria a pagina inteira por tras - levando o titulo embora. Com
   o limite aqui, o titulo fica parado e so a lista anda.
   -------------------------------------------------------------------------- */

.pt-credenciais .modal-dialog { max-width: 520px; }

.pt-credenciais__corpo {
    max-height: min(68vh, 580px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* --------------------------------------------------------------------------
   68.2  UM CARTAO POR SERVICO
   --------------------------------------------------------------------------
   Contorno, sem preenchimento: as caixas de credencial dentro dele JA sao
   cinza (.pt-cred__caixa). Se o cartao tambem fosse, as duas camadas se
   misturariam e o recorte do campo desapareceria.
   -------------------------------------------------------------------------- */

.pt-credlista { display: grid; gap: 12px; }

.pt-credlista__item {
    padding: 14px 14px 12px;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
}

.pt-credlista__nome {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .85rem;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--pt-text-strong);
}
.pt-credlista__nome i {
    flex: 0 0 auto;
    font-size: .85rem;
    color: var(--pt-brand);
}

/* A ultima credencial do cartao nao precisa do respiro de baixo: quem fecha
   o bloco e o padding do proprio cartao. */
.pt-credlista__item .pt-cred:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   68.3  O CAMINHO DO SERVICO
   --------------------------------------------------------------------------
   Um link por cartao, nao dois. Quando o painel daquele servico e conhecido,
   e ele; quando nao e, "ver detalhes" - que sempre existe. Dois links por
   cartao, vezes tres servicos, viram seis destinos numa janela que deveria
   responder uma pergunta so.

   44px de altura por decisao, nao por acaso: e um alvo de toque (WCAG 2.5.5)
   logo embaixo de dois botoes de 30px. No celular ele e a terceira coisa que
   o dedo encontra no cartao.
   -------------------------------------------------------------------------- */

.pt-credlista__link {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    margin-top: 10px;
    padding: 0 2px;
    font-size: .86rem;
    font-weight: 600;
    color: var(--pt-brand);
    text-decoration: none !important;
}
.pt-credlista__link:hover,
.pt-credlista__link:focus-visible {
    color: var(--pt-brand-hover);
    text-decoration: underline !important;
}
.pt-credlista__link i { font-size: .75rem; }

/* O servico que nao usa usuario e senha nao sai da lista calado - senao o
   cliente conta os servicos, acha um a menos e abre chamado. Ele aparece com
   a explicacao no lugar das caixas. */
.pt-credlista__sem {
    margin: 0;
    font-size: .84rem;
    line-height: 1.5;
    color: var(--pt-text-mute);
}

/* --------------------------------------------------------------------------
   68.4  O RESTO DA LISTA, QUANDO HA MUITO
   --------------------------------------------------------------------------
   A janela mostra no maximo doze. Treze cartoes numa janela que rola nao
   ajudam ninguem - e cada senha lida custa uma chamada de descriptografia no
   carregamento da tela inicial. Passando disso, o caminho e a lista de
   servicos, que pagina e busca.
   -------------------------------------------------------------------------- */

.pt-credlista__mais {
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--pt-border);
    font-size: .84rem;
    line-height: 1.5;
    color: var(--pt-text-dim);
    text-align: center;
}
.pt-credlista__mais a { color: var(--pt-brand); font-weight: 600; }
.pt-credlista__mais a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   68.5  CELULAR
   --------------------------------------------------------------------------
   Menos padding lateral no cartao para nao estreitar o campo da senha, que e
   monoespacado e quebra em qualquer largura perdida.
   -------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
    .pt-credlista__item { padding: 12px 11px 10px; }
    .pt-credenciais__corpo { max-height: 62vh; }
}



/* ==========================================================================
   69. CARTAO DO APLICATIVO NA PAGINA DO SERVICO (SYNCBOX E NEXTCLOUD)
   ==========================================================================
   Os dois modulos entregam o mesmo cartao (.sbx-cartao / .ncx-cartao): topo
   com titulo, intro, botao verde, campos com copiar, rodape. Eles foram
   feitos para funcionar em QUALQUER tema, entao vem com 500px de largura,
   centralizados e com cores fixas de tema claro.

   Dentro deste tema isso virava uma "janelinha" no meio da pagina - e no tema
   escuro, um retangulo branco. Aqui o cartao:
     - ocupa a largura toda, alinhado ao cartao de dados do servico acima;
     - usa as cores do tema (claro e escuro) pelas variaveis.

   O #main-body .pt-appcard e necessario: o <style> do modulo vem DEPOIS desta
   folha no HTML, entao so ganha dele quem for mais especifico.
   ========================================================================== */

.pt-appcard { margin-top: 1.25rem; }

/* ---- largura e moldura */
#main-body .pt-appcard .sbx-cartao,
#main-body .pt-appcard .ncx-cartao {
    max-width: none;
    margin: 0;
    border-color: var(--pt-border);
    border-radius: var(--pt-radius-card);
    background: var(--pt-card);
    box-shadow: var(--pt-shadow-card);
    color: var(--pt-text);
}

/* ---- divisorias */
#main-body .pt-appcard .sbx-topo,
#main-body .pt-appcard .ncx-topo,
#main-body .pt-appcard .sbx-rodape,
#main-body .pt-appcard .ncx-rodape,
#main-body .pt-appcard .ncx-secao,
#main-body .pt-appcard .sbx-secao { border-color: var(--pt-border); }

/* ---- textos */
#main-body .pt-appcard .sbx-topo h4,
#main-body .pt-appcard .ncx-topo h4,
#main-body .pt-appcard .ncx-secao h5,
#main-body .pt-appcard .sbx-secao h5,
#main-body .pt-appcard .sbx-ajuda b,
#main-body .pt-appcard .sbx-intro b,
#main-body .pt-appcard .ncx-intro b,
#main-body .pt-appcard .ncx-ajuda b { color: var(--pt-text-strong); }

#main-body .pt-appcard .sbx-intro,
#main-body .pt-appcard .ncx-intro,
#main-body .pt-appcard .ncx-ajuda,
#main-body .pt-appcard .ncx-espaco,
#main-body .pt-appcard .ncx-nota-btn,
#main-body .pt-appcard .sbx-ajuda,
#main-body .pt-appcard .sbx-nota-btn,
#main-body .pt-appcard .sbx-rotulo,
#main-body .pt-appcard .ncx-rotulo,
#main-body .pt-appcard .sbx-rodape,
#main-body .pt-appcard .ncx-rodape { color: var(--pt-text-dim); }

/* ---- campos (usuario, senha, endereco) */
#main-body .pt-appcard .sbx-campo,
#main-body .pt-appcard .ncx-campo {
    background: var(--pt-card-inset);
    border-color: var(--pt-border);
}
/* O campo de formulario do tema (fundo, borda, sombra, padding) vazava para
   dentro da caixa cinza e desenhava uma segunda caixa la dentro. O input aqui
   e so o texto: quem desenha a caixa e o .sbx-campo / .ncx-campo. */
#main-body .pt-appcard .sbx-campo input,
#main-body .pt-appcard .ncx-campo input {
    height: 48px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--pt-text-strong);
}

#main-body .pt-appcard .sbx-acao,
#main-body .pt-appcard .ncx-acao { color: var(--pt-text-dim); }
#main-body .pt-appcard .sbx-acao:hover,
#main-body .pt-appcard .ncx-acao:hover {
    background: var(--pt-hover);
    color: var(--pt-text-strong);
}

/* ---- botao secundario (painel web / aplicativo para Windows) */
/* Contorno e texto na cor da marca, com um fundo verde bem leve. Branco com
   texto cinza ficava apagado demais - parecia desabilitado. Verde SOLIDO e
   so o botao principal: o secundario fica visivel sem disputar com ele. */
#main-body .pt-appcard .sbx-btn-secundario,
#main-body .pt-appcard .ncx-btn-secundario {
    background: var(--pt-brand-soft);
    border-color: var(--pt-brand-ring);
    color: var(--pt-brand) !important;
    box-shadow: none;
}
#main-body .pt-appcard .sbx-btn-secundario:hover,
#main-body .pt-appcard .ncx-btn-secundario:hover,
#main-body .pt-appcard .sbx-btn-secundario:focus-visible,
#main-body .pt-appcard .ncx-btn-secundario:focus-visible {
    background: var(--pt-brand-soft);
    border-color: var(--pt-brand);
    color: var(--pt-brand-hover) !important;
}

/* ---- dica abaixo do usuario (Nextcloud) */
#main-body .pt-appcard .ncx-dica,
#main-body .pt-appcard .sbx-dica { color: var(--pt-text-dim); }
#main-body .pt-appcard .ncx-dica b,
#main-body .pt-appcard .sbx-dica b { color: var(--pt-text-strong); }

.pt-cred__dica {
    margin: .45rem 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--pt-text-dim);
}
.pt-cred__dica strong { color: var(--pt-text-strong); font-weight: 600; }

/* ---- links do rodape no tom de marca do tema */
#main-body .pt-appcard .sbx-rodape a,
#main-body .pt-appcard .ncx-rodape a { color: var(--pt-brand); }


/* ==========================================================================
   70. ITENS DE LISTA DOS PAINEIS DA TELA INICIAL - TEXTO CORTADO
   ==========================================================================
   "Ultimas noticias" mostrava "igado por escolher o WHMCS!" e ")8/2026": as
   primeiras letras sumiam.

   A secao 58 puxa o item ate a borda do cartao (margin: 0 -1.6rem) e devolve
   o recuo por dentro (padding 1.6rem), para o fundo do hover ocupar a largura
   toda. Mas uma regra antiga, "#main-body .pt-panel--flat .list-group-item
   { padding: .95rem 0 !important }", e mais especifica (tem o #main-body) e
   zerava o recuo. A margem negativa ficava, o texto ia junto para fora e o
   cartao cortava.

   Aqui o recuo ganha a mesma especificidade - e vem depois, entao vence.
   ========================================================================== */

#main-body .pt-panel--flat .list-group-item,
#main-body .pt-panel--flat .list-group-item:hover {
    padding: .85rem 1.6rem !important;
}

@media (max-width: 575px) {
    #main-body .pt-panel--flat .list-group-item,
    #main-body .pt-panel--flat .list-group-item:hover {
        padding: .85rem 1.2rem !important;
    }
}


/* ==========================================================================
   71. SELO "ATIVO" NO TEMA ESCURO
   ==========================================================================
   Achado na varredura de 25/10: no cartao do servico, o selo "Ativo" fica
   sobre o brilho verde do canto do cartao (.pt-hero). No escuro, o verde do
   texto (#10B981) sobre esse fundo esverdeado dava 3,92:1 - abaixo dos 4,5
   exigidos para letra pequena. Aqui ele usa o verde mais claro do proprio
   tema, que no escuro e o tom de destaque.
   ========================================================================== */

html[data-theme="dark"] .pt-status--active { color: var(--pt-brand-hover); }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .pt-status--active { color: var(--pt-brand-hover); }
}

/* ==========================================================================
   72. CABECALHO COM A LOGO REAL - o menu nunca passa por cima dos botoes
   --------------------------------------------------------------------------
   Com a logo da Midia Play (mais larga que o nome em texto) e o nome do
   cliente no botao da conta, entre 1200 e 1399px a soma dos itens passava
   da barra e o menu atropelava o botao de tema. Nessa faixa o tema fica so
   com o icone e os respiros encolhem; o nome da conta ganha um limite.
   Acima de 1400px a barra do cabecalho usa a largura extra da tela (o
   container do Bootstrap 4 para em 1140px) e o tema volta com o texto.
   ========================================================================== */

@media (min-width: 1400px) {
    #header > .container.pt-header__bar { max-width: 1320px; }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    #header .pt-header__bar { gap: 1.25rem; }
    #header #nav { gap: 1.3rem; }
    .pt-header__actions .pt-themetoggle { width: 38px; padding: 0; justify-content: center; }
    .pt-header__actions .pt-themetoggle__light,
    .pt-header__actions .pt-themetoggle__dark { font-size: 0; gap: 0; }
    .pt-header__actions .pt-themetoggle i { font-size: 13px; }
}

#header .pt-header__account > li > a { max-width: 220px; }
#header .pt-header__account > li > a > span,
#header .pt-header__account > li > a { overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   73. LOGIN COM A LOGO REAL - a marca no lugar do nome escrito
   --------------------------------------------------------------------------
   Com logo em imagem, o titulo com o nome da empresa vira sr-only (login.tpl)
   e a logo cresce para ocupar o lugar dele, com o respiro do titulo.
   ========================================================================== */

.pt-auth__logoslot--marca { margin-bottom: 1.1rem; }
.pt-auth__logoslot--marca img { max-height: 60px; max-width: 260px; }

/* Duas logos no HTML: a normal e a branca (img/pt-logo-branca.webp, feita
   da logo branca do site). Cada tema mostra a sua, nas mesmas tres camadas
   do resto do tema: claro por padrao, escuro pelo sistema, escolha manual. */
.pt-logo-escuro { display: none !important; }
html[data-theme="dark"] .pt-logo-claro { display: none !important; }
html[data-theme="dark"] .pt-logo-escuro { display: inline-block !important; }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .pt-logo-claro { display: none !important; }
    html:not([data-theme="light"]) .pt-logo-escuro { display: inline-block !important; }
}

/* Na barra de cima a logo segue a altura da barra (70px): o theme.css a
   deixava em 60px, alto demais para a barra de 70px. */
#header .pt-header__brand .logo-img { max-height: 50px; }

/* ==========================================================================
   74. LOGIN FACIL - Google e codigo por e-mail (addon midiaplay_login)
   --------------------------------------------------------------------------
   Os botoes alternativos ficam abaixo do "Entrar", separados por um "ou".
   Sao secundarios de proposito: o verde cheio continua sendo o caminho
   principal. O do Google segue o padrao visual dele (fundo claro, "G"
   colorido); o do codigo usa o contorno da marca.
   ========================================================================== */

.pt-authdiv {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin: 1.35rem 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pt-text-mute);
}
.pt-authdiv::before,
.pt-authdiv::after { content: ""; flex: 1; height: 1px; background: var(--pt-border); }

.pt-authalt { display: grid; gap: .7rem; }

/* Os secundarios: mesmo tamanho de toque, sem o peso do verde cheio. */
.pt-authbtn.pt-authbtn--google,
.pt-authbtn.pt-authbtn--sec {
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: none;
    text-decoration: none;
}
.pt-authbtn.pt-authbtn--google {
    background: #ffffff;
    color: #1F1F1F;
    border: 1px solid #DADCE0;
}
.pt-authbtn.pt-authbtn--google:hover,
.pt-authbtn.pt-authbtn--google:focus {
    background: #F8FAFF;
    color: #1F1F1F;
    border-color: #C6CAD1;
    box-shadow: 0 6px 18px -10px rgba(15, 23, 42, .35);
}
.pt-authbtn__g { width: 20px; height: 20px; flex: 0 0 20px; }

.pt-authbtn.pt-authbtn--sec {
    background: var(--pt-brand-soft);
    color: var(--pt-brand-ink, #065f46);
    border: 1px solid var(--pt-brand-ring);
}
.pt-authbtn.pt-authbtn--sec:hover,
.pt-authbtn.pt-authbtn--sec:focus {
    background: var(--pt-brand-soft);
    color: var(--pt-brand-ink, #065f46);
    border-color: var(--pt-brand);
    box-shadow: 0 6px 18px -10px rgba(4, 120, 87, .45);
}
html[data-theme="dark"] .pt-authbtn.pt-authbtn--sec,
html[data-theme="dark"] .pt-authbtn.pt-authbtn--sec:hover { color: var(--pt-brand-hover); }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .pt-authbtn.pt-authbtn--sec,
    html:not([data-theme="light"]) .pt-authbtn.pt-authbtn--sec:hover { color: var(--pt-brand-hover); }
}

/* --- Tela "Entrar sem senha" (pt-entrar.tpl) --- */
.pt-auth__title--etapa { font-size: 22px; }
.pt-auth__subtitle strong { color: var(--pt-text-strong); }

.pt-authmsg {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    margin: 0 0 1.1rem;
    padding: .8rem 1rem;
    border-radius: var(--pt-radius-sm);
    font-size: 13.5px;
    line-height: 1.5;
    text-align: left;
}
.pt-authmsg i { margin-top: .15rem; }
.pt-authmsg--erro {
    background: var(--pt-danger-soft, rgba(220, 38, 38, .08));
    color: var(--pt-danger-ink, #991B1B);
    border: 1px solid rgba(220, 38, 38, .25);
}
html[data-theme="dark"] .pt-authmsg--erro { color: #FCA5A5; }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .pt-authmsg--erro { color: #FCA5A5; }
}

/* Os 6 numeros, espacados como no e-mail. */
#main-body .pt-field__input--codigo,
.pt-field__input--codigo {
    font-family: Consolas, Menlo, monospace;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .45em;
}

.pt-authlinks {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem 1rem;
    margin-top: 1.1rem;
}
.pt-authlinks form { margin: 0; }
.pt-authlink {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--pt-text-dim);
    cursor: pointer;
}
.pt-authlink:hover,
.pt-authlink:focus { color: var(--pt-brand); text-decoration: underline; }
.pt-authnote { margin: 1rem 0 0; font-size: 12.5px; color: var(--pt-text-mute); }
.pt-authform { margin: 0; }

/* ==========================================================================
   75. ARTIGOS DA CENTRAL DE AJUDA - imagens e caixas de dica
   --------------------------------------------------------------------------
   O WHMCS passa o texto do artigo por um filtro que tira boa parte do style
   inline (max-width, border-radius, var(), fundo). Sem max-width, os prints
   de 800px passavam da coluna e ficavam cortados na direita. O visual vem
   daqui, pela classe .pt-kb-artigo do knowledgebasearticle.tpl; no texto do
   artigo, caixa de dica e um <blockquote>.
   ========================================================================== */

.pt-kb-artigo img {
    display: block;
    max-width: 100% !important;
    height: auto !important;
    margin: 14px auto 24px;
    border: 1px solid var(--pt-border) !important;
    border-radius: 12px;
    box-shadow: 0 10px 28px -18px rgba(15, 23, 42, .45);
}
.pt-kb-artigo h3 {
    margin: 34px 0 10px;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--pt-text-strong);
}
.pt-kb-artigo blockquote {
    margin: 18px 0 26px;
    padding: 14px 18px;
    border: 1px solid var(--pt-border);
    border-left: 4px solid var(--pt-brand);
    border-radius: 12px;
    background: var(--pt-card-inset);
    color: var(--pt-text);
    font-size: inherit;
    line-height: 1.65;
}
.pt-kb-artigo blockquote strong { color: var(--pt-text-strong); }

/* ==========================================================================
   76. CELULAR - cabecalho logado e fatura cabendo na tela
   --------------------------------------------------------------------------
   Com a logo real e o cliente logado (tema, avisos, carrinho e menu), a barra
   de cima passava 24px dos 375px de um celular comum e o botao do menu (o
   unico caminho para as paginas no celular) ficava cortado fora da tela.
   Abaixo de 576px a logo e os icones encolhem um pouco; abaixo de 375px
   (celulares pequenos) a logo encolhe mais.
   A fatura (viewinvoice) usa width:100% com margem de 15px dos dois lados e
   passava 15px da tela.
   ========================================================================== */

@media (max-width: 575px) {
    #header .pt-header__bar { gap: .5rem; }
    #header .pt-header__brand .logo-img { max-height: 38px; }
    .pt-header__actions { gap: .1rem; }
    .pt-header__icon,
    .pt-header__actions .pt-themetoggle { width: 34px; height: 34px; }
    .pt-header__dot { top: 1px; right: 0; }
}
@media (max-width: 374px) {
    #header .pt-header__brand .logo-img { max-height: 30px; }
}

@media (max-width: 767px) {
    .invoice-container {
        width: auto !important;
        max-width: none !important;
        margin: 12px !important;
        padding: 20px !important;
    }
}

/* Menu aberto pelo botao do celular (abaixo de 1200px): a setinha dos
   submenus herdava o traco animado dos links do menu de computador e virava
   uma barra cinza a esquerda do nome. Aqui ela volta a ser a setinha, depois
   do texto. O menu da conta ("Ola, ...") ganha o mesmo recuo dos outros. */
@media (max-width: 1199.98px) {
    #header .pt-header__nav .dropdown-toggle::after,
    #header #nav > li > a.dropdown-toggle::after {
        content: "";
        position: static;
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: .45rem;
        border: 0;
        border-top: 5px solid currentColor;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
        border-radius: 0;
        background: none;
        opacity: .6;
        vertical-align: middle;
        transition: none;
    }
    #header #mainNavbar .navbar-nav > li > a { padding-left: 14px !important; }
}
.pt-kb-artigo a > img { cursor: zoom-in; }
@media (max-width: 575px) {
    .pt-kb-artigo img { margin: 10px 0 6px; border-radius: 10px; }
    .pt-kb-artigo a[title]:has(> img)::after {
        content: "Toque na imagem para ampliar";
        display: block;
        margin: 0 0 20px;
        font-size: 12px;
        color: var(--pt-text-mute);
    }
}


/* ==========================================================================
   77. TELEFONE - folga entre a seta do pais e a divisoria
   ==========================================================================
   O all.min.css do WHMCS trava a caixa da bandeira (.iti-sdc-N .selected-flag)
   em 70/78/86/94px. Com bandeira + codigo + seta + o padding da secao 48, o
   conteudo precisa de ~89px no "+55": a seta passava por cima do padding da
   direita e encostava na divisoria (folga medida: 0,3px).

   A caixa agora encolhe ate o conteudo (folga de 11px dos dois lados) e o
   texto do campo recua 11px a mais que na secao 47.2, para a distancia entre
   a divisoria e o numero digitado continuar a mesma.
   ========================================================================== */

#main-body .intl-tel-input.separate-dial-code .selected-flag,
#main-body .iti--separate-dial-code .iti__selected-flag {
    width: auto !important;
}

#main-body .intl-tel-input.separate-dial-code.iti-sdc-2 > input,
#main-body .iti--separate-dial-code.iti.iti-sdc-2 > input { padding-left: 97px !important; }

#main-body .intl-tel-input.separate-dial-code.iti-sdc-3 > input,
#main-body .iti--separate-dial-code.iti.iti-sdc-3 > input { padding-left: 105px !important; }

#main-body .intl-tel-input.separate-dial-code.iti-sdc-4 > input,
#main-body .iti--separate-dial-code.iti.iti-sdc-4 > input { padding-left: 113px !important; }

#main-body .intl-tel-input.separate-dial-code.iti-sdc-5 > input,
#main-body .iti--separate-dial-code.iti.iti-sdc-5 > input { padding-left: 121px !important; }

#main-body .intl-tel-input.separate-dial-code.iti-sdc-6 > input,
#main-body .iti--separate-dial-code.iti.iti-sdc-6 > input { padding-left: 129px !important; }