/* ==========================================================================
   GLOBAL HOST — Design System v2
   Inspiração: Vercel / Linear. Light mode. Denso, tipográfico, técnico.
   Carregado após theme.min.css — sobrescreve seletivamente Bootstrap + WHMCS.
   ========================================================================== */
/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
    /* Brand (extraído do logo Global Host) */
    --gh-brand-400: #38BDF8;
    --gh-brand-500: #0EA5E9;   /* azul principal do globo */
    --gh-brand-600: #0284C7;
    --gh-brand-700: #0369A1;
    --gh-brand-50:  #F0F9FF;
    --gh-brand-100: #E0F2FE;
    /* Navy da esfera */
    --gh-dark-900:  #0A2540;
    --gh-dark-800:  #0F2D4D;
    --gh-dark-700:  #153A5F;
    /* Neutros (escala slate) */
    --gh-n-0:   #FFFFFF;
    --gh-n-50:  #F8FAFC;
    --gh-n-100: #F1F5F9;
    --gh-n-200: #E2E8F0;
    --gh-n-300: #CBD5E1;
    --gh-n-400: #94A3B8;
    --gh-n-500: #64748B;
    --gh-n-600: #475569;
    --gh-n-700: #334155;
    --gh-n-800: #1E293B;
    --gh-n-900: #0F172A;
    /* Status */
    --gh-success:    #10B981;
    --gh-success-bg: #ECFDF5;
    --gh-success-bd: #A7F3D0;
    --gh-warning:    #D97706;
    --gh-warning-bg: #FFFBEB;
    --gh-warning-bd: #FCD34D;
    --gh-danger:     #DC2626;
    --gh-danger-bg:  #FEF2F2;
    --gh-danger-bd:  #FECACA;
    --gh-info:       #0284C7;
    --gh-info-bg:    #F0F9FF;
    --gh-info-bd:    #BAE6FD;
    /* Radii — tight, sem exagero */
    --gh-radius-sm: 4px;
    --gh-radius:    6px;
    --gh-radius-md: 8px;
    --gh-radius-lg: 12px;
    /* Shadows — leves, curtas */
    --gh-shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
    --gh-shadow-sm: 0 1px 2px rgba(15,23,42,0.06), 0 1px 1px rgba(15,23,42,0.03);
    --gh-shadow:    0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04);
    --gh-shadow-md: 0 4px 8px -2px rgba(15,23,42,0.08), 0 2px 4px -1px rgba(15,23,42,0.04);
    --gh-shadow-lg: 0 12px 24px -6px rgba(15,23,42,0.10);
    /* Typography */
    --gh-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --gh-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, 'Courier New', monospace;
    /* Focus */
    --gh-focus-ring: 0 0 0 3px rgba(14,165,233,0.25);
}
/* ==========================================================================
   2. BASE
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; }
body,
body.primary-bg-color {
    font-family: var(--gh-font-sans);
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    font-size: 15px;
    line-height: 1.5;
    color: var(--gh-n-700);
    background: var(--gh-n-50);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--gh-font-sans);
    color: var(--gh-n-900);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
}
h1, .h1 { font-size: 2rem; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1.125rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: 0.875rem; }
a {
    color: var(--gh-brand-600);
    text-decoration: none;
    transition: color 0.15s ease;
}
a:hover, a:focus {
    color: var(--gh-brand-700);
    text-decoration: underline;
    text-underline-offset: 2px;
}
code, pre, kbd, samp, .text-monospace, .mono {
    font-family: var(--gh-font-mono);
    font-size: 0.925em;
}
hr {
    border: 0;
    border-top: 1px solid var(--gh-n-200);
    margin: 1.5rem 0;
}
::selection {
    background: var(--gh-brand-100);
    color: var(--gh-dark-900);
}
/* Focus ring consistente */
*:focus-visible {
    outline: none;
    box-shadow: var(--gh-focus-ring);
    border-radius: var(--gh-radius);
}
/* ==========================================================================
   3. HEADER + NAVBAR
   ========================================================================== */
.header {
    background: var(--gh-n-0);
    border-bottom: 1px solid var(--gh-n-200);
    box-shadow: var(--gh-shadow-xs);
}
/* Topbar (logged-in) */
.header .topbar {
    background: var(--gh-n-50);
    border-bottom: 1px solid var(--gh-n-200);
    padding: 0.4rem 0;
    font-size: 0.8125rem;
    color: var(--gh-n-500);
}
.header .topbar .btn {
    font-size: 0.8125rem;
    color: var(--gh-n-600);
    padding: 0.25rem 0.6rem;
}
.header .topbar .input-group-text {
    background: transparent;
    border: 0;
    color: var(--gh-n-500);
    font-size: 0.8125rem;
    padding-right: 0.4rem;
}
.header .topbar .btn-active-client {
    background: var(--gh-n-0);
    border: 1px solid var(--gh-n-200);
    color: var(--gh-n-800);
    font-weight: 500;
}
.header .topbar .btn-active-client:hover {
    border-color: var(--gh-n-300);
    background: var(--gh-n-50);
}
/* Main navbar */
.navbar-light {
    background: var(--gh-n-0) !important;
    padding: 0.65rem 0;
}
.navbar-brand img.logo-img {
    max-height: 36px;
    width: auto;
}
.navbar .nav-link {
    color: var(--gh-n-600) !important;
    font-weight: 500;
    font-size: 0.9375rem;
    padding: 0.5rem 0.9rem !important;
    border-radius: var(--gh-radius);
    transition: color 0.15s ease, background 0.15s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--gh-n-900) !important;
    background: var(--gh-n-100);
    text-decoration: none;
}
.navbar .nav-link.active,
.navbar .active > .nav-link {
    color: var(--gh-brand-700) !important;
    background: var(--gh-brand-50);
}
.navbar .cart-btn {
    position: relative;
}
.navbar .cart-btn .badge {
    background: var(--gh-brand-500);
    color: #fff;
    font-weight: 600;
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: 100px;
}
.main-navbar-wrapper {
    background: var(--gh-n-0) !important;
    border-top: 1px solid var(--gh-n-100);
    padding: 0.35rem 0;
}
/* Search input no header */
.header .input-group.search .form-control {
    background: var(--gh-n-50);
    border: 1px solid var(--gh-n-200);
    border-left: 0;
    font-size: 0.875rem;
    min-height: 38px;
}
.header .input-group.search .input-group-prepend .btn {
    background: var(--gh-n-50);
    border: 1px solid var(--gh-n-200);
    border-right: 0;
    color: var(--gh-n-500);
}
.header .input-group.search .form-control:focus {
    background: var(--gh-n-0);
    border-color: var(--gh-brand-400);
    box-shadow: var(--gh-focus-ring);
}
/* ==========================================================================
   4. BREADCRUMB
   ========================================================================== */
.master-breadcrumb {
    background: var(--gh-n-0);
    border-bottom: 1px solid var(--gh-n-200);
    padding: 0.65rem 0;
}
.breadcrumb {
    background: transparent;
    margin: 0;
    padding: 0;
    font-size: 0.8125rem;
    color: var(--gh-n-500);
}
.breadcrumb-item a { color: var(--gh-n-500); }
.breadcrumb-item a:hover { color: var(--gh-brand-600); }
.breadcrumb-item.active { color: var(--gh-n-800); font-weight: 500; }
.breadcrumb-item + .breadcrumb-item::before {
    content: '/';
    color: var(--gh-n-300);
    padding: 0 0.5rem;
}
/* ==========================================================================
   5. BODY CONTAINER
   ========================================================================== */
#main-body {
    padding: 2rem 0 3rem;
}
.primary-content h1,
.primary-content h2 {
    letter-spacing: -0.02em;
}
/* ==========================================================================
   6. SIDEBAR (ÁREA DO CLIENTE)
   ========================================================================== */
.sidebar .card.card-sidebar {
    background: var(--gh-n-0);
    border: 1px solid var(--gh-n-200);
    border-radius: var(--gh-radius-md);
    box-shadow: var(--gh-shadow-xs);
    margin-bottom: 1rem;
}
.sidebar .card.card-sidebar .card-header {
    background: transparent;
    border-bottom: 1px solid var(--gh-n-100);
    padding: 0.8rem 1rem;
}
.sidebar .card.card-sidebar .card-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gh-n-500);
}
.sidebar .card.card-sidebar .card-title i {
    color: var(--gh-n-400);
    margin-right: 0.35rem;
}
/* itens do sidebar */
.sidebar .list-group { border-radius: 0; }
.sidebar .list-group-item {
    background: transparent;
    border: 0;
    padding: 0.55rem 1rem;
    font-size: 0.875rem;
    color: var(--gh-n-600);
    position: relative;
    transition: background 0.15s ease, color 0.15s ease;
    border-left: 2px solid transparent;
}
.sidebar .list-group-item:hover {
    background: var(--gh-n-50);
    color: var(--gh-n-900);
    text-decoration: none;
}
.sidebar .list-group-item.active,
.sidebar .list-group-item-action.active {
    background: var(--gh-brand-50);
    color: var(--gh-brand-700);
    border-left: 2px solid var(--gh-brand-500);
    font-weight: 500;
}
.sidebar-menu-item-wrapper {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.sidebar-menu-item-icon-wrapper {
    width: 18px;
    display: inline-flex;
    justify-content: center;
    color: var(--gh-n-400);
    flex-shrink: 0;
}
.sidebar .list-group-item.active .sidebar-menu-item-icon-wrapper,
.sidebar .list-group-item.active .sidebar-menu-item-icon {
    color: var(--gh-brand-600);
}
.sidebar-menu-item-label { flex: 1; }
.sidebar-menu-item-badge .badge {
    background: var(--gh-n-100);
    color: var(--gh-n-700);
    font-weight: 500;
    font-size: 0.7rem;
    padding: 0.15rem 0.45rem;
}
.card-minimise {
    color: var(--gh-n-400);
    font-size: 0.75rem;
    transition: transform 0.2s ease;
    cursor: pointer;
}
/* ==========================================================================
   7. DASHBOARD TILES (clientareahome)
   Redesign Vercel-style: métrica grande + label pequena
   ========================================================================== */
.tiles {
    margin-bottom: 2rem !important;
}
.tiles .row.no-gutters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin: 0;
}
.tiles .row.no-gutters > [class*="col-"] {
    padding: 0;
    max-width: 100%;
    flex: unset;
}
.tile {
    display: block;
    padding: 18px 20px 20px;
    background: var(--gh-n-0);
    border: 1px solid var(--gh-n-200);
    border-radius: var(--gh-radius-md);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    min-height: 108px;
}
.tile:hover {
    border-color: var(--gh-n-300);
    box-shadow: var(--gh-shadow-sm);
    text-decoration: none;
    transform: translateY(-1px);
}
.tile > i,
.tile > svg {
    color: var(--gh-n-400);
    font-size: 0.95rem;
    margin-bottom: 14px;
    display: block;
}
.tile .stat {
    font-size: 2rem;
    font-weight: 600;
    color: var(--gh-n-900);
    line-height: 1;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    margin-bottom: 6px;
    font-family: var(--gh-font-sans);
}
.tile .title {
    font-size: 0.75rem;
    color: var(--gh-n-500);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.tile .highlight { display: none; }
/* Accent colorido no ícone com base no contexto (mantém semântica) */
.tile[href*="services"] > i { color: var(--gh-brand-500); }
.tile[href*="domains"] > i { color: var(--gh-success); }
.tile[href*="tickets"] > i { color: var(--gh-danger); }
.tile[href*="invoices"] > i { color: var(--gh-warning); }
@media (max-width: 575px) {
    .tiles .row.no-gutters { grid-template-columns: repeat(2, 1fr); }
    .tile { min-height: 92px; padding: 14px 16px 16px; }
    .tile .stat { font-size: 1.6rem; }
}
/* ==========================================================================
   8. CARDS (home panels, client cards, genéricos)
   ========================================================================== */
.card {
    background: var(--gh-n-0);
    border: 1px solid var(--gh-n-200);
    border-radius: var(--gh-radius-md);
    box-shadow: var(--gh-shadow-xs);
    margin-bottom: 1rem;
}
.card-header {
    background: var(--gh-n-0);
    border-bottom: 1px solid var(--gh-n-100);
    padding: 0.85rem 1.15rem;
    border-top-left-radius: calc(var(--gh-radius-md) - 1px);
    border-top-right-radius: calc(var(--gh-radius-md) - 1px);
}
.card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gh-n-800);
    margin: 0;
    letter-spacing: -0.01em;
}
.card-body { padding: 1.15rem; }
.card-footer {
    background: var(--gh-n-50);
    border-top: 1px solid var(--gh-n-100);
    padding: 0.75rem 1.15rem;
    font-size: 0.8125rem;
    color: var(--gh-n-500);
}
/* Remove as barras coloridas de accent — visual mais limpo */
.card-accent-blue,
.card-accent-green,
.card-accent-red,
.card-accent-gold,
.card-accent-teal,
.card-accent-pomegranate,
.card-accent-sun-flower,
.card-accent-asbestos,
.card-accent-midnight-blue {
    border-top: 1px solid var(--gh-n-200);
}
/* Home cards (clientareahome panels) */
.client-home-cards .card {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.client-home-cards .card:hover {
    border-color: var(--gh-n-300);
    box-shadow: var(--gh-shadow-sm);
}
/* ==========================================================================
   9. TABELAS
   ========================================================================== */
.table {
    color: var(--gh-n-700);
    font-size: 0.875rem;
    margin-bottom: 0;
}
.table thead th {
    background: var(--gh-n-50);
    color: var(--gh-n-500);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--gh-n-200);
    border-top: 0;
    padding: 0.65rem 1rem;
}
.table td {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--gh-n-100);
    vertical-align: middle;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--gh-n-50);
}
.table-hover tbody tr:hover {
    background-color: var(--gh-brand-50);
}
/* Números + domínios/IPs em monospace */
.table td .mono,
.table td.mono,
.table .domain,
.table .ip,
.table .price {
    font-family: var(--gh-font-mono);
    font-size: 0.8125rem;
}
/* Tabela dentro de card sem bordas externas duplicadas */
.card .table { border-radius: 0; }
.card > .table:first-child thead th { border-top: 0; }
.card > .table:last-child tbody tr:last-child td { border-bottom: 0; }
/* ==========================================================================
   10. BOTÕES
   ========================================================================== */
.btn {
    font-family: var(--gh-font-sans);
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    border-radius: var(--gh-radius);
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    letter-spacing: 0;
    line-height: 1.35;
}
.btn:focus, .btn.focus { box-shadow: var(--gh-focus-ring); }
.btn-primary {
    background: var(--gh-brand-500) !important;
    border-color: var(--gh-brand-500) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--gh-brand-600) !important;
    border-color: var(--gh-brand-600) !important;
}
.btn-default,
.btn-secondary {
    background: var(--gh-n-0) !important;
    border-color: var(--gh-n-200) !important;
    color: var(--gh-n-700) !important;
}
.btn-default:hover,
.btn-secondary:hover {
    background: var(--gh-n-50) !important;
    border-color: var(--gh-n-300) !important;
    color: var(--gh-n-900) !important;
}
.btn-success {
    background: var(--gh-success) !important;
    border-color: var(--gh-success) !important;
    color: #fff !important;
}
.btn-danger {
    background: var(--gh-danger) !important;
    border-color: var(--gh-danger) !important;
    color: #fff !important;
}
.btn-warning {
    background: var(--gh-warning) !important;
    border-color: var(--gh-warning) !important;
    color: #fff !important;
}
.btn-info {
    background: var(--gh-info) !important;
    border-color: var(--gh-info) !important;
    color: #fff !important;
}
.btn-outline-primary {
    color: var(--gh-brand-600) !important;
    border-color: var(--gh-n-200) !important;
    background: var(--gh-n-0) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.active {
    background: var(--gh-brand-500) !important;
    border-color: var(--gh-brand-500) !important;
    color: #fff !important;
}
.btn-link {
    color: var(--gh-brand-600) !important;
    padding: 0.5rem 0.25rem;
}
.btn-link:hover { color: var(--gh-brand-700) !important; text-decoration: underline; }
.btn-sm, .btn-xs {
    padding: 0.3rem 0.7rem;
    font-size: 0.8125rem;
}
.btn-lg {
    padding: 0.7rem 1.3rem;
    font-size: 0.95rem;
}
.btn-block { display: block; width: 100%; }
/* ==========================================================================
   11. FORMULÁRIOS
   ========================================================================== */
label { font-weight: 500; color: var(--gh-n-700); font-size: 0.875rem; margin-bottom: 0.4rem; }
.form-control,
.form-select,
select.form-control,
textarea.form-control,
input.form-control {
    background: var(--gh-n-0);
    border: 1px solid var(--gh-n-200);
    border-radius: var(--gh-radius);
    color: var(--gh-n-900);
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    min-height: 38px;
    box-shadow: var(--gh-shadow-xs);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus {
    background: var(--gh-n-0);
    border-color: var(--gh-brand-400);
    box-shadow: var(--gh-focus-ring);
    outline: none;
}
.form-control::placeholder { color: var(--gh-n-400); }
.form-control:disabled, .form-control[readonly] {
    background: var(--gh-n-50);
    color: var(--gh-n-500);
}
.form-text, .form-text.text-muted {
    color: var(--gh-n-500) !important;
    font-size: 0.8125rem;
    margin-top: 0.3rem;
}
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-append > .input-group-text {
    background: var(--gh-n-50);
    border: 1px solid var(--gh-n-200);
    color: var(--gh-n-500);
    font-size: 0.8125rem;
    font-family: var(--gh-font-mono);
}
.custom-control-label { color: var(--gh-n-700); }
.custom-control-input:checked ~ .custom-control-label::before {
    background: var(--gh-brand-500);
    border-color: var(--gh-brand-500);
}
.was-validated .form-control:invalid,
.form-control.is-invalid { border-color: var(--gh-danger); }
.invalid-feedback { color: var(--gh-danger); font-size: 0.8125rem; }
/* ==========================================================================
   12. BADGES & STATUS PILLS
   ========================================================================== */
.badge {
    font-family: var(--gh-font-sans);
    font-weight: 500;
    font-size: 0.75rem;
    padding: 0.25rem 0.55rem;
    border-radius: 100px;
    letter-spacing: 0;
    line-height: 1.3;
}
.badge-primary,
.badge-info {
    background: var(--gh-info-bg);
    color: var(--gh-info);
    border: 1px solid var(--gh-info-bd);
}
.badge-success {
    background: var(--gh-success-bg);
    color: var(--gh-success);
    border: 1px solid var(--gh-success-bd);
}
.badge-warning {
    background: var(--gh-warning-bg);
    color: var(--gh-warning);
    border: 1px solid var(--gh-warning-bd);
}
.badge-danger {
    background: var(--gh-danger-bg);
    color: var(--gh-danger);
    border: 1px solid var(--gh-danger-bd);
}
.badge-secondary,
.badge-default,
.badge-light {
    background: var(--gh-n-100);
    color: var(--gh-n-600);
    border: 1px solid var(--gh-n-200);
}
.badge-dark {
    background: var(--gh-n-800);
    color: #fff;
}
/* Status labels WHMCS (active / pending / suspended / etc) */
.label,
.status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--gh-font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.6rem;
    border-radius: 100px;
    line-height: 1.3;
}
.label-success, .status-active {
    background: var(--gh-success-bg);
    color: var(--gh-success);
    border: 1px solid var(--gh-success-bd);
}
.label-warning, .status-pending {
    background: var(--gh-warning-bg);
    color: var(--gh-warning);
    border: 1px solid var(--gh-warning-bd);
}
.label-danger, .status-suspended, .status-terminated, .status-cancelled {
    background: var(--gh-danger-bg);
    color: var(--gh-danger);
    border: 1px solid var(--gh-danger-bd);
}
.label-info {
    background: var(--gh-info-bg);
    color: var(--gh-info);
    border: 1px solid var(--gh-info-bd);
}
/* ==========================================================================
   13. ALERTS
   ========================================================================== */
.alert {
    border-radius: var(--gh-radius-md);
    border: 1px solid transparent;
    padding: 0.85rem 1rem;
    font-size: 0.875rem;
}
.alert-success {
    background: var(--gh-success-bg);
    color: #065F46;
    border-color: var(--gh-success-bd);
}
.alert-warning {
    background: var(--gh-warning-bg);
    color: #92400E;
    border-color: var(--gh-warning-bd);
}
.alert-danger {
    background: var(--gh-danger-bg);
    color: #991B1B;
    border-color: var(--gh-danger-bd);
}
.alert-info {
    background: var(--gh-info-bg);
    color: #075985;
    border-color: var(--gh-info-bd);
}
/* ==========================================================================
   14. LIST GROUPS (no card e gerais)
   ========================================================================== */
.list-group-item {
    background: var(--gh-n-0);
    border-color: var(--gh-n-100);
    color: var(--gh-n-700);
    padding: 0.7rem 1.15rem;
    font-size: 0.875rem;
    transition: background 0.12s ease;
}
.list-group-item:hover { background: var(--gh-n-50); }
.list-group-item.active {
    background: var(--gh-brand-50);
    border-color: var(--gh-brand-100);
    color: var(--gh-brand-700);
    font-weight: 500;
}
.list-group-item .badge {
    margin-left: 0.5rem;
}
/* ==========================================================================
   15. MODALS
   ========================================================================== */
.modal-content {
    border: 1px solid var(--gh-n-200);
    border-radius: var(--gh-radius-lg);
    box-shadow: var(--gh-shadow-lg);
}
.modal-header {
    border-bottom: 1px solid var(--gh-n-100);
    padding: 1rem 1.25rem;
}
.modal-title { font-size: 1rem; font-weight: 600; color: var(--gh-n-900); }
.modal-footer {
    border-top: 1px solid var(--gh-n-100);
    padding: 0.85rem 1.25rem;
    background: var(--gh-n-50);
}
/* ==========================================================================
   16. NAV TABS / PILLS
   ========================================================================== */
.nav-tabs {
    border-bottom: 1px solid var(--gh-n-200);
}
.nav-tabs .nav-link {
    color: var(--gh-n-500);
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 0.7rem 1rem;
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: -1px;
    border-radius: 0;
    background: transparent !important;
}
.nav-tabs .nav-link:hover { color: var(--gh-n-800); border-color: transparent; }
.nav-tabs .nav-link.active {
    color: var(--gh-brand-700);
    border-bottom-color: var(--gh-brand-500);
    background: transparent;
}
.nav-pills .nav-link {
    color: var(--gh-n-600);
    border-radius: var(--gh-radius);
    padding: 0.45rem 0.85rem;
    font-size: 0.875rem;
    font-weight: 500;
}
.nav-pills .nav-link.active {
    background: var(--gh-brand-50);
    color: var(--gh-brand-700);
}
/* ==========================================================================
   17. PAGINATION
   ========================================================================== */
.pagination .page-link {
    border: 1px solid var(--gh-n-200);
    color: var(--gh-n-600);
    padding: 0.4rem 0.7rem;
    font-size: 0.875rem;
    margin: 0 2px;
    border-radius: var(--gh-radius) !important;
}
.pagination .page-link:hover { background: var(--gh-n-50); border-color: var(--gh-n-300); }
.pagination .page-item.active .page-link {
    background: var(--gh-brand-500);
    border-color: var(--gh-brand-500);
    color: #fff;
}
/* ==========================================================================
   18. DROPDOWN
   ========================================================================== */
.dropdown-menu {
    border: 1px solid var(--gh-n-200);
    border-radius: var(--gh-radius-md);
    box-shadow: var(--gh-shadow-lg);
    padding: 0.35rem 0;
    font-size: 0.875rem;
}
.dropdown-item {
    color: var(--gh-n-700);
    padding: 0.45rem 1rem;
}
.dropdown-item:hover { background: var(--gh-n-50); color: var(--gh-n-900); }
.dropdown-divider { border-color: var(--gh-n-100); }
/* ==========================================================================
   19. POPOVER / TOOLTIP
   ========================================================================== */
.popover {
    border: 1px solid var(--gh-n-200);
    border-radius: var(--gh-radius-md);
    box-shadow: var(--gh-shadow-lg);
    font-size: 0.875rem;
}
.popover-header {
    background: var(--gh-n-50);
    border-bottom: 1px solid var(--gh-n-100);
    font-size: 0.8125rem;
    font-weight: 600;
}
.tooltip-inner {
    background: var(--gh-n-900);
    font-size: 0.75rem;
    padding: 0.35rem 0.6rem;
    border-radius: var(--gh-radius);
}
/* ==========================================================================
   20. FOOTER
   ========================================================================== */
footer, .footer {
    background: var(--gh-n-0);
    border-top: 1px solid var(--gh-n-200);
    padding: 2rem 0;
    color: var(--gh-n-500);
    font-size: 0.875rem;
}
footer a, .footer a { color: var(--gh-n-600); }
footer a:hover, .footer a:hover { color: var(--gh-brand-600); }
/* ==========================================================================
   21. HOMEPAGE HERO (mantido da v1 — integrado ao DS)
   ========================================================================== */
.gh-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--gh-dark-900) 0%, var(--gh-dark-700) 55%, var(--gh-brand-500) 100%);
    color: #fff;
    border-radius: var(--gh-radius-lg);
    padding: 4rem 2.5rem;
    margin: 0.5rem 0 3rem;
    box-shadow: 0 20px 40px -12px rgba(10,37,64,0.30);
}
.gh-hero::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -15%;
    width: 620px;
    height: 620px;
    background: radial-gradient(circle, rgba(56,189,248,0.28) 0%, transparent 65%);
    pointer-events: none;
}
.gh-hero::after {
    content: '';
    position: absolute;
    bottom: -60%;
    left: -10%;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(14,165,233,0.22) 0%, transparent 70%);
    pointer-events: none;
}
.gh-hero__content { position: relative; z-index: 2; max-width: 760px; }
.gh-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.10);
    color: #fff;
    padding: 0.35rem 0.85rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(255,255,255,0.14);
}
.gh-hero__eyebrow i { color: var(--gh-brand-400); }
.gh-hero h1 {
    color: #fff;
    font-size: 2.85rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 1rem;
}
.gh-hero h1 strong { color: var(--gh-brand-400); font-weight: 700; }
.gh-hero__subtitle {
    font-size: 1.125rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.88);
    margin-bottom: 2rem;
    max-width: 640px;
}
.gh-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    color: var(--gh-dark-900);
    padding: 0.8rem 1.6rem;
    border-radius: var(--gh-radius);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.gh-hero__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.24);
    color: var(--gh-brand-700);
    text-decoration: none;
}
.gh-hero__cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255,255,255,0.9);
    margin-left: 0.75rem;
    padding: 0.8rem 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    transition: color 0.15s ease, border-color 0.15s ease;
}
.gh-hero__cta-secondary:hover {
    color: #fff;
    border-bottom-color: #fff;
    text-decoration: none;
}
.gh-hero__features {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.75rem;
    margin-top: 2.25rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255,255,255,0.14);
}
.gh-hero__feature {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255,255,255,0.94);
    font-size: 0.9rem;
    font-weight: 500;
}
.gh-hero__feature i { color: var(--gh-brand-400); }
@media (max-width: 767px) {
    .gh-hero { padding: 2.25rem 1.5rem; }
    .gh-hero h1 { font-size: 1.85rem; }
    .gh-hero__subtitle { font-size: 1rem; }
    .gh-hero__cta, .gh-hero__cta-secondary {
        display: flex; justify-content: center; margin-left: 0;
    }
    .gh-hero__cta-secondary {
        margin-top: 0.65rem; border: 1px solid rgba(255,255,255,0.18);
        border-radius: var(--gh-radius);
    }
}
/* ==========================================================================
   22. PRODUCT GROUP CARDS (homepage)
   ========================================================================== */
.card-columns.home .card {
    border: 1px solid var(--gh-n-200);
    border-radius: var(--gh-radius-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.card-columns.home .card:hover {
    transform: translateY(-2px);
    border-color: var(--gh-brand-400);
    box-shadow: var(--gh-shadow-md);
}
.card-columns.home .card-title {
    color: var(--gh-n-900);
    font-weight: 600;
    font-size: 1.125rem;
}
/* Action icon cards (homepage) — mais discretos */
.action-icon-btns a {
    background: var(--gh-n-0);
    border: 1px solid var(--gh-n-200);
    border-radius: var(--gh-radius-md);
    color: var(--gh-n-700);
    padding: 1.25rem 0.75rem;
    display: block;
    text-align: center;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    font-size: 0.875rem;
    font-weight: 500;
}
.action-icon-btns a:hover {
    border-color: var(--gh-brand-400);
    transform: translateY(-2px);
    box-shadow: var(--gh-shadow-sm);
    text-decoration: none;
    color: var(--gh-n-900);
}
.action-icon-btns .ico-container {
    margin-bottom: 0.6rem;
    color: var(--gh-brand-500);
    font-size: 1.5rem;
}
.action-icon-btns .card-accent-teal .ico-container { color: #0D9488; }
.action-icon-btns .card-accent-pomegranate .ico-container { color: var(--gh-danger); }
.action-icon-btns .card-accent-sun-flower .ico-container { color: var(--gh-warning); }
.action-icon-btns .card-accent-asbestos .ico-container { color: var(--gh-n-500); }
.action-icon-btns .card-accent-green .ico-container { color: var(--gh-success); }
.action-icon-btns .card-accent-midnight-blue .ico-container { color: var(--gh-dark-900); }
/* ==========================================================================
   23. INVOICE / VIEWINVOICE POLISH
   ========================================================================== */
.invoice-info, .invoice-header, .invoice-summary {
    background: var(--gh-n-0);
}
.invoice-totals td, .invoice-totals th { font-variant-numeric: tabular-nums; }
.invoice-amount { font-family: var(--gh-font-mono); }
/* Nota do total — destaque sutil */
tr.total-row td, td.text-right strong {
    color: var(--gh-n-900);
    font-weight: 600;
}
/* ==========================================================================
   24. PRODUCT DETAILS POLISH
   ========================================================================== */
.product-details-tab-header,
.product-details-actions .btn {
    font-weight: 500;
}
/* Barras de uso (usage) — progress bars */
.progress {
    background: var(--gh-n-100);
    border-radius: 100px;
    height: 6px;
    box-shadow: none;
    overflow: hidden;
}
.progress-bar {
    background: var(--gh-brand-500);
    transition: width 0.4s ease;
}
.progress-bar.bg-success { background: var(--gh-success) !important; }
.progress-bar.bg-warning { background: var(--gh-warning) !important; }
.progress-bar.bg-danger  { background: var(--gh-danger) !important; }
/* ==========================================================================
   25. UTILITIES / MISC
   ========================================================================== */
.text-muted { color: var(--gh-n-500) !important; }
.text-primary { color: var(--gh-brand-600) !important; }
.text-success { color: var(--gh-success) !important; }
.text-warning { color: var(--gh-warning) !important; }
.text-danger  { color: var(--gh-danger) !important; }
.bg-light { background: var(--gh-n-50) !important; }
.bg-white { background: var(--gh-n-0) !important; }
.border, .border-top, .border-bottom, .border-left, .border-right {
    border-color: var(--gh-n-200) !important;
}
/* Scrollbar (WebKit) — sutil e moderno */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--gh-n-200);
    border-radius: 100px;
    border: 2px solid var(--gh-n-50);
}
::-webkit-scrollbar-thumb:hover { background: var(--gh-n-300); }
/* Esconder elementos decorativos que datam o template */
.highlight.bg-color-blue,
.highlight.bg-color-green,
.highlight.bg-color-red,
.highlight.bg-color-gold {
    display: none !important;
}
/* Print — fatura imprimível fica limpa */
@media print {
    .header, .footer, .sidebar, nav, .btn { display: none !important; }
    body { background: #fff; }
}
/* ==========================================================================
   27. HEADER PREMIUM (sticky + backdrop blur)
   ========================================================================== */
.header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255,255,255,0.88);
    border-bottom: 1px solid rgba(226,232,240,0.7);
    box-shadow: 0 1px 0 rgba(15,23,42,0.02);
    transition: box-shadow 0.25s ease;
}
/* Top bar (quando logado) — fica discreta */
.header .topbar {
    background: var(--gh-n-900);
    color: var(--gh-n-400);
    font-size: 0.8125rem;
    padding: 0.5rem 0;
    border: none;
}
.header .topbar .btn { color: var(--gh-n-300); font-weight: 500; }
.header .topbar .btn:hover { color: #fff; }
.header .topbar .input-group-text {
    background: transparent;
    border: none;
    color: var(--gh-n-500);
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
}
.header .topbar .btn-active-client {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
    font-weight: 600;
    border-radius: var(--gh-radius);
}
.header .topbar .btn-active-client:hover { background: rgba(255,255,255,0.12); color: #fff; }
/* Barra principal */
.header .navbar-light {
    padding: 0.875rem 0;
    background: transparent;
}
/* Logo */
.header .navbar-brand {
    padding: 0;
    margin-right: 2rem;
}
.header .navbar-brand .logo-img {
    max-height: 38px;
    width: auto;
    display: block;
    transition: transform 0.2s ease;
}
.header .navbar-brand:hover .logo-img { transform: scale(1.02); }
/* Busca discreta */
.header .form-inline .input-group.search {
    max-width: 300px;
}
.header .form-inline .input-group.search .form-control {
    background: var(--gh-n-50);
    border: 1px solid var(--gh-n-200);
    border-left: none;
    font-size: 0.875rem;
    color: var(--gh-n-700);
    border-radius: 0 var(--gh-radius-md) var(--gh-radius-md) 0;
    height: 40px;
}
.header .form-inline .input-group.search .form-control:focus {
    background: #fff;
    border-color: var(--gh-brand-300, #7DD3FC);
    box-shadow: var(--gh-focus-ring);
}
.header .form-inline .input-group.search .btn {
    background: var(--gh-n-50);
    border: 1px solid var(--gh-n-200);
    border-right: none;
    color: var(--gh-n-500);
    border-radius: var(--gh-radius-md) 0 0 var(--gh-radius-md);
    height: 40px;
}
/* Toolbar: carrinho + hamburger */
.header .navbar-nav.toolbar .nav-item { align-self: center; }
.header .cart-btn {
    background: var(--gh-brand-50);
    border: 1px solid var(--gh-brand-100);
    color: var(--gh-brand-700);
    padding: 0.5rem 0.75rem;
    border-radius: var(--gh-radius-md);
    position: relative;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
.header .cart-btn:hover {
    background: var(--gh-brand-500);
    border-color: var(--gh-brand-500);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(14,165,233,0.25);
}
.header .cart-btn .badge {
    background: var(--gh-brand-500);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.2rem 0.4rem;
    border-radius: 100px;
    margin-left: 0.25rem;
}
.header .cart-btn:hover .badge {
    background: #fff;
    color: var(--gh-brand-600);
}
/* Navbar secundária (main menu) */
.header .main-navbar-wrapper {
    padding: 0;
    background: transparent;
    border-top: 1px solid var(--gh-n-100);
}
.header .main-navbar-wrapper .navbar-collapse { padding: 0; }
.header .main-navbar-wrapper .navbar-nav .nav-link {
    color: var(--gh-n-600) !important;
    font-weight: 500;
    font-size: 0.9375rem;
    padding: 0.875rem 1rem !important;
    border: none;
    position: relative;
    transition: color 0.15s ease;
}
.header .main-navbar-wrapper .navbar-nav .nav-link:hover {
    color: var(--gh-n-900) !important;
    background: transparent;
    text-decoration: none;
}
.header .main-navbar-wrapper .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0;
    height: 2px;
    background: var(--gh-brand-500);
    border-radius: 2px 2px 0 0;
    transform: scaleX(0);
    transition: transform 0.2s ease;
    transform-origin: center;
}
.header .main-navbar-wrapper .navbar-nav .nav-link:hover::after,
.header .main-navbar-wrapper .navbar-nav .nav-item.active .nav-link::after,
.header .main-navbar-wrapper .navbar-nav .nav-link.active::after {
    transform: scaleX(1);
}
.header .main-navbar-wrapper .navbar-nav .dropdown-toggle::before { display: none; }
.header .main-navbar-wrapper .dropdown-menu {
    border: 1px solid var(--gh-n-200);
    border-radius: var(--gh-radius-md);
    box-shadow: var(--gh-shadow-lg);
    padding: 0.5rem;
    margin-top: 0;
}
.header .main-navbar-wrapper .dropdown-item {
    font-size: 0.875rem;
    color: var(--gh-n-700);
    padding: 0.5rem 0.75rem;
    border-radius: var(--gh-radius);
    font-weight: 500;
}
.header .main-navbar-wrapper .dropdown-item:hover,
.header .main-navbar-wrapper .dropdown-item:focus {
    background: var(--gh-brand-50);
    color: var(--gh-brand-700);
}
/* Breadcrumb — esconder quando vazio */
.master-breadcrumb {
    background: var(--gh-n-0);
    border-bottom: 1px solid var(--gh-n-100);
    padding: 0.75rem 0;
}
.master-breadcrumb:empty,
.master-breadcrumb .container:empty,
.master-breadcrumb .breadcrumb:empty { display: none; }
/* ==========================================================================
   29. FOOTER PREMIUM (corporativo multi-coluna)
   ========================================================================== */
.gh-footer,
.footer.gh-footer {
    background: linear-gradient(180deg, var(--gh-n-900) 0%, #060F1F 100%);
    color: var(--gh-n-400);
    padding: 0;
    margin-top: 0;
    border-top: 1px solid rgba(56,189,248,0.15);
    font-size: 0.9375rem;
    line-height: 1.55;
}
.gh-footer .container {
    max-width: 1200px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
/* Faixa CTA no topo do footer */
.gh-footer__cta {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: center;
    padding: 3rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.gh-footer__cta-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gh-brand-400);
    margin-bottom: 0.5rem;
}
.gh-footer__cta h3 {
    color: #fff;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.15;
}
.gh-footer__cta-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.gh-footer__cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.375rem;
    border-radius: var(--gh-radius-md);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none !important;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    border: 1px solid transparent;
    white-space: nowrap;
}
.gh-footer__cta-btn--primary {
    background: var(--gh-brand-500);
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(14,165,233,0.3);
}
.gh-footer__cta-btn--primary:hover {
    background: var(--gh-brand-400);
    transform: translateY(-1px);
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(14,165,233,0.4);
}
.gh-footer__cta-btn--ghost {
    border-color: rgba(255,255,255,0.25);
    color: #E2E8F0 !important;
    background: transparent;
}
.gh-footer__cta-btn--ghost:hover {
    border-color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.06);
    color: #fff !important;
}
/* Grid de colunas */
.gh-footer__main {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr;
    gap: 2.5rem;
    padding: 4rem 0 3rem;
}
.gh-footer__brand {}
.gh-footer__logo {
    display: inline-block;
    margin-bottom: 1.25rem;
    text-decoration: none !important;
}
.gh-footer__logo img {
    max-height: 40px;
    width: auto;
    filter: brightness(1.05);
}
.gh-footer__logo-text {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.gh-footer__tagline {
    color: var(--gh-n-400);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0 0 1.5rem;
    max-width: 320px;
}
.gh-footer__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.gh-footer__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gh-brand-300, #7DD3FC);
    background: rgba(56,189,248,0.08);
    border: 1px solid rgba(56,189,248,0.2);
    padding: 0.3rem 0.625rem;
    border-radius: 100px;
}
.gh-footer__badge i { color: var(--gh-brand-400); font-size: 0.8125rem; }
.gh-footer__col {}
.gh-footer__heading {
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 1.25rem;
}
.gh-footer__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.gh-footer__col ul li {}
.gh-footer__col ul a {
    color: var(--gh-n-400);
    font-size: 0.9375rem;
    text-decoration: none;
    transition: color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.gh-footer__col ul a:hover {
    color: var(--gh-brand-400);
    text-decoration: none;
}
.gh-footer__contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    color: var(--gh-n-400);
}
.gh-footer__contact-list li i {
    color: var(--gh-brand-400);
    margin-top: 3px;
    width: 18px;
    flex-shrink: 0;
    text-align: center;
}
.gh-footer__contact-list a { color: var(--gh-n-300) !important; }
.gh-footer__contact-list a:hover { color: var(--gh-brand-400) !important; }
.gh-footer__social {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.5rem !important;
    margin-top: 1.5rem !important;
    flex-wrap: wrap;
}
.gh-footer__social li {
    list-style: none;
}
.gh-footer__social a,
.gh-footer__social .list-inline-item a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0 !important;
    border-radius: var(--gh-radius-md);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--gh-n-300) !important;
    font-size: 0.9375rem;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.gh-footer__social a:hover,
.gh-footer__social .list-inline-item a:hover {
    background: var(--gh-brand-500);
    border-color: var(--gh-brand-500);
    color: #fff !important;
    transform: translateY(-2px);
}
/* Trust strip */
.gh-footer__trust {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-wrap: wrap;
}
.gh-footer__payments { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.gh-footer__trust-label {
    color: var(--gh-n-500);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.gh-footer__payments-list { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.gh-pay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 28px;
    padding: 0 0.5rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--gh-radius);
    color: var(--gh-n-300);
    font-size: 1rem;
    font-weight: 600;
}
.gh-pay strong { font-size: 0.75rem; color: #00BCA1; font-weight: 700; }
.gh-pay:hover { border-color: rgba(56,189,248,0.35); }
.gh-footer__uptime {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--gh-n-400);
    font-weight: 500;
}
.gh-footer__uptime-dot {
    width: 8px;
    height: 8px;
    background: var(--gh-success);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.25);
    animation: gh-pulse-green 2s ease-in-out infinite;
}
@keyframes gh-pulse-green {
    0%, 100% { box-shadow: 0 0 0 3px rgba(16,185,129,0.25); }
    50%      { box-shadow: 0 0 0 6px rgba(16,185,129,0.1); }
}
/* Bottom bar */
.gh-footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    gap: 1rem;
    flex-wrap: wrap;
}
.gh-footer__legal p {
    margin: 0;
    color: var(--gh-n-500);
    font-size: 0.8125rem;
}
.gh-footer__legal a { color: var(--gh-n-400); }
.gh-footer__legal a:hover { color: var(--gh-brand-400); }
.gh-footer__locale-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--gh-n-300);
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--gh-radius-md);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.gh-footer__locale-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(56,189,248,0.3);
    color: #fff;
}
.gh-footer__locale-btn .iti-flag { margin-right: 0.25rem; }
/* Responsive footer */
@media (max-width: 991px) {
    .gh-footer__cta { grid-template-columns: 1fr; text-align: center; }
    .gh-footer__cta-actions { justify-content: center; }
    .gh-footer__main {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem 2rem;
        padding: 3rem 0 2rem;
    }
    .gh-footer__brand {
        grid-column: 1 / -1;
        text-align: center;
    }
    .gh-footer__tagline { margin-left: auto; margin-right: auto; }
    .gh-footer__badges { justify-content: center; }
}
@media (max-width: 575px) {
    .gh-footer__cta { padding: 2rem 0; }
    .gh-footer__main {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .gh-footer__cta-actions .gh-footer__cta-btn { width: 100%; justify-content: center; }
    .gh-footer__trust { justify-content: center; text-align: center; }
    .gh-footer__payments { justify-content: center; }
    .gh-footer__bottom { justify-content: center; text-align: center; }
}
/* ==========================================================================
   32. CTAs NA NAVBAR (Área do cliente + Contratar)
   ========================================================================== */
.gh-nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--gh-font-sans);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.55rem 1rem;
    border-radius: var(--gh-radius-md);
    text-decoration: none !important;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    border: 1px solid transparent;
    line-height: 1.2;
    white-space: nowrap;
    height: 40px;
}
.gh-nav-cta i { font-size: 0.8125rem; }
.gh-nav-cta--ghost {
    background: transparent;
    color: var(--gh-n-700) !important;
    border-color: var(--gh-n-300);
}
.gh-nav-cta--ghost:hover {
    background: var(--gh-n-50);
    border-color: var(--gh-n-400);
    color: var(--gh-n-900) !important;
    transform: translateY(-1px);
}
.gh-nav-cta--primary {
    background: var(--gh-brand-500);
    color: #fff !important;
    border-color: var(--gh-brand-500);
    box-shadow: 0 1px 2px rgba(14,165,233,0.2);
}
.gh-nav-cta--primary:hover {
    background: var(--gh-brand-600);
    border-color: var(--gh-brand-600);
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(14,165,233,0.35);
}
/* ============================================================
   35. BUGFIX — Search bar, ícones e nav (abril/2026)
   Correções: search ocupando tudo na homepage, ícones `far`
   que não existem no FA Free, nav WHMCS sparse.
   ============================================================ */
/* Search bar — escondida na homepage (landing de vendas, KB search
   não faz sentido aqui). Mantida nas demais páginas, mas com largura
   travada para não empurrar os CTAs. */
body.tpl-homepage .header .gh-header-search { display: none !important; }
.header .gh-header-search {
    flex: 0 0 auto;
    width: 280px;
    max-width: 280px;
}
.header .gh-header-search .input-group.search { width: 100%; }
.header .gh-header-search .form-control {
    height: 38px;
    font-size: 0.875rem;
}
/* Carrinho — garantir ícone visível e badge só quando > 0 */
.header .cart-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 10px;
    color: var(--ink-700, #334155);
    background: transparent;
    transition: background 0.15s ease, color 0.15s ease;
}
.header .cart-btn:hover,
.header .cart-btn:focus {
    background: var(--surface-100, #f1f5f9);
    color: var(--brand-600, #0284C7);
    text-decoration: none;
}
.header .cart-btn i.fa-shopping-cart {
    font-size: 1.05rem;
    line-height: 1;
}
.header .cart-btn #cartItemCount {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    background: var(--brand-500, #0EA5E9);
    color: #fff;
    box-shadow: 0 0 0 2px #fff;
}
/* Dropdown "Soluções" — estilo consistente com mega menu */
.main-navbar-wrapper .nav-item.dropdown .dropdown-menu {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15,23,42,0.08), 0 2px 6px rgba(15,23,42,0.04);
    padding: 0.5rem;
    margin-top: 0.5rem;
    min-width: 260px;
}
.main-navbar-wrapper .dropdown-menu .dropdown-item {
    padding: 0.625rem 0.875rem;
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--ink-700, #334155);
    transition: background 0.12s ease, color 0.12s ease;
}
.main-navbar-wrapper .dropdown-menu .dropdown-item:hover,
.main-navbar-wrapper .dropdown-menu .dropdown-item:focus {
    background: var(--surface-100, #f1f5f9);
    color: var(--brand-600, #0284C7);
}
.main-navbar-wrapper .dropdown-menu .dropdown-item i {
    color: var(--brand-500, #0EA5E9);
    opacity: 0.85;
}
/* Nav links — espaçamento e peso consistentes em TODAS as páginas */
.main-navbar-wrapper #ghMainNav > .nav-item > .nav-link {
    padding: 0.625rem 0.9rem !important;
    font-weight: 500;
    font-size: 0.92rem;
    color: var(--ink-700, #334155) !important;
    border-radius: 8px;
    transition: background 0.12s ease, color 0.12s ease;
}
.main-navbar-wrapper #ghMainNav > .nav-item > .nav-link:hover {
    background: var(--surface-100, #f1f5f9);
    color: var(--brand-600, #0284C7) !important;
}
.main-navbar-wrapper #ghMainNav > .nav-item > .nav-link i {
    color: var(--brand-500, #0EA5E9);
    opacity: 0.8;
    font-size: 0.85em;
}
/* Remove a underline (::after) padrão da seção 27 — temos hover bg agora */
.main-navbar-wrapper #ghMainNav > .nav-item > .nav-link::after {
    display: none;
}
/* ============================================================
   36. PAINEL — Dashboard, Login, Stats, Ações rápidas
   Pivô de landing→painel. Homepage.tpl agora é a home
   funcional do cliente em painel.globalhost.com.br.
   ============================================================ */
/* Header consistente em TODAS as páginas — sólido, opaco, gris/branco.
   Substitui a seção 27 (que tinha bg semi-transparente). */
.header {
    background: #ffffff !important;
    border-bottom: 1px solid var(--border, #e2e8f0) !important;
    box-shadow: 0 1px 0 rgba(15,23,42,0.04) !important;
}
.navbar-brand .logo-img {
    max-height: 38px;
    height: 38px;
}
/* ---- Container principal do painel ---- */
.gh-panel {
    padding: 2.5rem 0 4rem;
    background: var(--surface-50, #f8fafc);
    min-height: calc(100vh - 260px);
}
/* ---- Welcome header ---- */
.gh-panel__welcome {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}
.gh-panel__welcome-text { flex: 1 1 auto; min-width: 260px; }
.gh-panel__eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-600, #0284C7);
    margin-bottom: 0.5rem;
}
.gh-panel__title {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    color: var(--ink-900, #0F172A);
    margin: 0 0 0.5rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.gh-panel__lede {
    color: var(--ink-500, #64748B);
    font-size: 1rem;
    margin: 0;
    max-width: 540px;
}
.gh-panel__welcome-actions {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}
/* ---- Botões genéricos do painel ---- */
.gh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    text-decoration: none;
    line-height: 1;
}
.gh-btn i { font-size: 0.85em; }
.gh-btn--primary {
    background: var(--brand-500, #0EA5E9);
    color: #fff;
    box-shadow: 0 1px 3px rgba(14,165,233,0.25);
}
.gh-btn--primary:hover {
    background: var(--brand-600, #0284C7);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(14,165,233,0.3);
}
.gh-btn--ghost {
    background: #fff;
    color: var(--ink-700, #334155);
    border-color: var(--border, #e2e8f0);
}
.gh-btn--ghost:hover {
    background: var(--surface-100, #f1f5f9);
    color: var(--ink-900, #0F172A);
    text-decoration: none;
    border-color: var(--ink-300, #cbd5e1);
}
.gh-btn--block { width: 100%; }
/* ---- Stats cards ---- */
.gh-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.gh-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.25rem;
    background: #fff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 14px;
    color: var(--ink-900, #0F172A);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    position: relative;
}
.gh-stat:hover {
    border-color: var(--brand-400, #38BDF8);
    box-shadow: 0 4px 16px rgba(15,23,42,0.06);
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--ink-900, #0F172A);
}
.gh-stat__icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1.1rem;
    color: #fff;
}
.gh-stat__icon--services { background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%); }
.gh-stat__icon--invoices { background: linear-gradient(135deg, #10B981 0%, #059669 100%); }
.gh-stat__icon--tickets { background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%); }
.gh-stat__icon--domains { background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%); }
.gh-stat__body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.gh-stat__label {
    font-size: 0.8rem;
    color: var(--ink-500, #64748B);
    font-weight: 500;
    margin-bottom: 0.15rem;
}
.gh-stat__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink-900, #0F172A);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.gh-stat__arrow {
    color: var(--ink-300, #cbd5e1);
    font-size: 0.75rem;
    transition: transform 0.15s ease, color 0.15s ease;
}
.gh-stat:hover .gh-stat__arrow {
    color: var(--brand-500, #0EA5E9);
    transform: translateX(2px);
}
.gh-stat--alert {
    border-color: rgba(239,68,68,0.25);
    background: linear-gradient(180deg, rgba(254,242,242,0.6) 0%, #fff 100%);
}
.gh-stat--alert .gh-stat__icon--invoices {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
}
.gh-stat--alert .gh-stat__value { color: #B91C1C; }
/* ---- Due banner (faturas pendentes) ---- */
.gh-due-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
    border: 1px solid rgba(239,68,68,0.2);
    border-radius: 14px;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.gh-due-banner__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #DC2626;
    color: #fff;
    font-size: 1.2rem;
}
.gh-due-banner__body {
    flex: 1 1 auto;
    min-width: 200px;
    display: flex;
    flex-direction: column;
}
.gh-due-banner__body strong {
    color: #991B1B;
    font-size: 1rem;
    margin-bottom: 0.15rem;
}
.gh-due-banner__body span {
    color: #7F1D1D;
    font-size: 0.875rem;
}
/* ---- Ações rápidas ---- */
.gh-quick-actions { margin-bottom: 1.5rem; }
.gh-quick-actions__header { margin-bottom: 1rem; }
.gh-quick-actions__header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink-900, #0F172A);
    margin: 0 0 0.15rem;
    letter-spacing: -0.01em;
}
.gh-quick-actions__header p {
    color: var(--ink-500, #64748B);
    font-size: 0.875rem;
    margin: 0;
}
.gh-quick-actions__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.75rem;
}
.gh-action {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1.125rem;
    background: #fff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.gh-action:hover {
    border-color: var(--brand-400, #38BDF8);
    background: linear-gradient(180deg, rgba(14,165,233,0.02) 0%, #fff 100%);
    box-shadow: 0 2px 8px rgba(15,23,42,0.04);
    text-decoration: none;
    transform: translateY(-1px);
}
.gh-action__icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--surface-100, #f1f5f9);
    color: var(--brand-600, #0284C7);
    font-size: 1rem;
    transition: background 0.15s ease, color 0.15s ease;
}
.gh-action:hover .gh-action__icon {
    background: var(--brand-500, #0EA5E9);
    color: #fff;
}
.gh-action__body { display: flex; flex-direction: column; min-width: 0; }
.gh-action__body strong {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink-900, #0F172A);
    margin-bottom: 0.1rem;
}
.gh-action__body span {
    font-size: 0.8rem;
    color: var(--ink-500, #64748B);
}
/* ============================================================
   37. LOGIN (estado deslogado na home do painel)
   ============================================================ */
.gh-panel__login-wrap {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 3rem;
    align-items: start;
    padding-top: 1rem;
}
.gh-panel__login-left {
    padding-right: 1rem;
}
.gh-panel__login-left .gh-panel__title {
    font-size: clamp(1.875rem, 3.5vw, 2.5rem);
    margin-bottom: 0.75rem;
}
.gh-panel__login-left .gh-panel__lede {
    margin-bottom: 2rem;
    font-size: 1.05rem;
}
/* Acessos rápidos (lista compacta no lado esquerdo) */
.gh-quick-access {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 2rem;
}
.gh-quick-access__item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    background: #fff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.gh-quick-access__item:hover {
    border-color: var(--brand-400, #38BDF8);
    background: linear-gradient(180deg, rgba(14,165,233,0.03) 0%, #fff 100%);
    text-decoration: none;
    transform: translateY(-1px);
}
.gh-quick-access__icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--surface-100, #f1f5f9);
    color: var(--brand-600, #0284C7);
    font-size: 0.95rem;
    transition: background 0.15s ease, color 0.15s ease;
}
.gh-quick-access__icon i { line-height: 1; }
.gh-quick-access__item:hover .gh-quick-access__icon {
    background: var(--brand-500, #0EA5E9);
    color: #fff;
}
.gh-quick-access__body { display: flex; flex-direction: column; min-width: 0; }
.gh-quick-access__item strong {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink-900, #0F172A);
    margin-bottom: 0.1rem;
}
.gh-quick-access__item span {
    font-size: 0.78rem;
    color: var(--ink-500, #64748B);
}
/* ============================================================
   38. HOTFIX — Overlay travado + fallbacks robustos
   ============================================================ */
/* Força o fullpage-overlay do WHMCS escondido por padrão.
   Ele só deve aparecer quando explicitamente ativado via JS
   (ex: removendo a class w-hidden). */
#fullpage-overlay.w-hidden { display: none !important; }
#fullpage-overlay {
    /* Defensivo: se por algum motivo o overlay ficar travado visível,
       não bloqueia o conteúdo abaixo. */
    pointer-events: none;
}
#fullpage-overlay:not(.w-hidden) {
    pointer-events: auto;
}
/* Garantia extra: ícones do Font Awesome dentro de wrappers
   flex nunca devem receber display:flex diretamente (quebra o ::before). */
.gh-action__icon i,
.gh-quick-access__icon i,
.gh-stat__icon i,
.gh-due-banner__icon i {
    display: inline-block;
    line-height: 1;
}
/* Trust strip horizontal (LGPD · SSL · Datacenter · Uptime) */
.gh-trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border, #e2e8f0);
    font-size: 0.85rem;
    color: var(--ink-500, #64748B);
}
.gh-trust-strip__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 500;
}
.gh-trust-strip__item i {
    color: var(--brand-500, #0EA5E9);
    font-size: 0.9em;
}
/* ---- Card de login ---- */
.gh-login-card {
    background: #fff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(15,23,42,0.08), 0 2px 8px rgba(15,23,42,0.03);
    padding: 2rem;
}
.gh-login-card__header { margin-bottom: 1.5rem; }
.gh-login-card__header h2 {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--ink-900, #0F172A);
    margin: 0 0 0.35rem;
    letter-spacing: -0.01em;
}
.gh-login-card__header p {
    color: var(--ink-500, #64748B);
    font-size: 0.875rem;
    margin: 0;
}
.gh-login-card__form { display: flex; flex-direction: column; gap: 1rem; }
.gh-field { display: flex; flex-direction: column; gap: 0.4rem; }
.gh-field label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-700, #334155);
    margin: 0;
}
.gh-field__label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.gh-field__helper-link {
    font-size: 0.8rem;
    color: var(--brand-600, #0284C7);
    font-weight: 500;
}
.gh-field__helper-link:hover { text-decoration: underline; }
.gh-field input[type="email"],
.gh-field input[type="password"],
.gh-field input[type="text"] {
    width: 100%;
    height: 44px;
    padding: 0 0.875rem;
    font-size: 0.9rem;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    background: #fff;
    color: var(--ink-900, #0F172A);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
}
.gh-field input:focus {
    outline: none;
    border-color: var(--brand-500, #0EA5E9);
    box-shadow: 0 0 0 3px rgba(14,165,233,0.15);
}
.gh-field input::placeholder { color: var(--ink-400, #94A3B8); }
.gh-field-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--ink-700, #334155);
    cursor: pointer;
    margin: 0.25rem 0 0;
    user-select: none;
}
.gh-field-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--brand-500, #0EA5E9);
    cursor: pointer;
    margin: 0;
}
.gh-login-card__divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0 1rem;
    color: var(--ink-400, #94A3B8);
    font-size: 0.8rem;
}
.gh-login-card__divider::before,
.gh-login-card__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border, #e2e8f0);
}
.gh-login-card__footer { text-align: center; }
.gh-login-card__signup {
    font-size: 0.88rem;
    color: var(--ink-500, #64748B);
    margin: 0;
}
.gh-login-card__signup a {
    color: var(--brand-600, #0284C7);
    font-weight: 600;
    margin-left: 0.25rem;
}
.gh-login-card__signup a i { font-size: 0.75em; margin-left: 0.25rem; }
.gh-login-card__signup a:hover { text-decoration: underline; }
/* ---- Footer painel (ajustes) ---- */
.gh-footer--panel .gh-footer__main {
    grid-template-columns: 1.3fr 1fr 1fr 1fr 1.1fr;
    padding-top: 3rem;
}
.gh-footer--panel {
    margin-top: 3rem;
}
/* ---- Responsivo ---- */
@media (max-width: 991px) {
    .gh-panel__login-wrap {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .gh-panel__login-left { padding-right: 0; }
    .gh-panel__welcome {
        flex-direction: column;
        align-items: flex-start;
    }
    .gh-panel__welcome-actions {
        width: 100%;
        flex-wrap: wrap;
    }
    .gh-footer--panel .gh-footer__main {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 575px) {
    .gh-panel { padding: 1.5rem 0 3rem; }
    .gh-quick-access { grid-template-columns: 1fr; }
    .gh-login-card { padding: 1.5rem; }
    .gh-stats { grid-template-columns: 1fr; }
    .gh-footer--panel .gh-footer__main {
        grid-template-columns: 1fr;
    }
    .gh-panel__welcome-actions .gh-btn { flex: 1 1 auto; }
}
/* ============================================================
   39. DASHBOARD LOGADO — Header de boas-vindas, KPIs com
   sparklines, alertas, cards de domínios e notificações.
   Visual editorial — menos genérico, mais autoral.
   ============================================================ */
/* ---- Header da dashboard ---- */
.gh-dash__head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: end;
    padding: 0.5rem 0 1.75rem;
    border-bottom: 1px solid var(--border, #e2e8f0);
    margin-bottom: 1.75rem;
}
.gh-dash__date {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--ink-500, #64748B);
    text-transform: capitalize;
    letter-spacing: 0.02em;
    margin-bottom: 0.65rem;
}
.gh-dash__date i { color: var(--brand-500, #0EA5E9); font-size: 0.85em; }
.gh-dash__greeting {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ink-900, #0F172A);
    margin: 0 0 0.5rem;
    letter-spacing: -0.025em;
    line-height: 1.15;
}
.gh-dash__name {
    background: linear-gradient(120deg, var(--brand-500, #0EA5E9) 0%, var(--brand-700, #0369A1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.gh-dash__sub {
    font-size: 0.95rem;
    color: var(--ink-600, #475569);
    margin: 0;
    max-width: 60ch;
}
.gh-dash__sub strong { color: var(--ink-900, #0F172A); font-weight: 600; }
.gh-text-danger { color: var(--danger-600, #DC2626) !important; }
.gh-text-warning { color: var(--warning-600, #D97706) !important; }
.gh-dash__head-right {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-shrink: 0;
}
/* ---- Alertas (faturas vencidas) ---- */
.gh-alert {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    border-radius: 14px;
    margin-bottom: 1.5rem;
    border: 1px solid;
    font-size: 0.92rem;
    line-height: 1.5;
}
.gh-alert--danger {
    background: linear-gradient(180deg, #FEF2F2 0%, #FFE4E6 100%);
    border-color: #FECACA;
    color: #7F1D1D;
}
.gh-alert--warning {
    background: linear-gradient(180deg, #FFFBEB 0%, #FEF3C7 100%);
    border-color: #FDE68A;
    color: #78350F;
}
.gh-alert__icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}
.gh-alert--danger .gh-alert__icon {
    background: rgba(220,38,38,0.12);
    color: #B91C1C;
}
.gh-alert--warning .gh-alert__icon {
    background: rgba(217,119,6,0.12);
    color: #B45309;
}
.gh-alert__body strong { font-weight: 700; }
.gh-alert__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.gh-alert--danger .gh-alert__cta {
    background: #DC2626;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(220,38,38,0.25);
}
.gh-alert--warning .gh-alert__cta {
    background: #D97706;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(217,119,6,0.25);
}
.gh-alert__cta:hover { transform: translateY(-1px); }
/* ---- KPI grid ---- */
.gh-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.gh-kpi {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem 1.35rem;
    background: #fff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 14px;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    overflow: hidden;
}
.gh-kpi::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--brand-500, #0EA5E9);
    opacity: 0;
    transition: opacity 0.15s ease;
}
.gh-kpi:hover {
    transform: translateY(-2px);
    border-color: var(--brand-300, #7DD3FC);
    box-shadow: 0 12px 28px -10px rgba(15,23,42,0.12), 0 2px 6px rgba(15,23,42,0.04);
}
.gh-kpi:hover::before { opacity: 1; }
.gh-kpi__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}
.gh-kpi__label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-500, #64748B);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.gh-kpi__glyph {
    font-size: 1.05rem;
    color: var(--ink-300, #CBD5E1);
    transition: color 0.15s ease;
}
.gh-kpi:hover .gh-kpi__glyph { color: var(--brand-500, #0EA5E9); }
.gh-kpi__value {
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--ink-900, #0F172A);
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}
.gh-kpi__value--money {
    font-size: 1.55rem;
    letter-spacing: -0.02em;
}
.gh-kpi__foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
.gh-kpi__delta {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--ink-500, #64748B);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.gh-kpi__delta i { font-size: 0.65em; }
.gh-kpi__delta--up { color: #16A34A; }
.gh-kpi__delta--down { color: #DC2626; }
.gh-kpi__delta--warn { color: #D97706; }
.gh-kpi__delta--muted { color: var(--ink-400, #94A3B8); }
/* Sparkline SVG decorativo */
.gh-spark {
    width: 80px;
    height: 24px;
    flex-shrink: 0;
    opacity: 0.55;
    transition: opacity 0.15s ease;
}
.gh-spark polyline {
    fill: none;
    stroke: var(--brand-500, #0EA5E9);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.gh-kpi:hover .gh-spark { opacity: 0.95; }
/* Variantes coloridas dos KPIs (accent na borda esquerda) */
.gh-kpi--brand::before { background: var(--brand-500, #0EA5E9); }
.gh-kpi--danger::before { background: #DC2626; opacity: 1; }
.gh-kpi--warning::before { background: #D97706; opacity: 1; }
.gh-kpi--ok::before { background: #16A34A; opacity: 1; }
.gh-kpi--neutral::before { background: var(--ink-300, #CBD5E1); }
.gh-kpi--danger .gh-spark polyline { stroke: #DC2626; }
.gh-kpi--warning .gh-spark polyline { stroke: #D97706; }
.gh-kpi--ok .gh-spark polyline { stroke: #16A34A; }
.gh-kpi--danger .gh-kpi__value { color: #991B1B; }
/* ---- Split: Domínios + Notificações ---- */
.gh-dash__split {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}
.gh-card {
    background: #fff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.gh-card--accent {
    background:
        radial-gradient(ellipse at top right, rgba(14,165,233,0.06) 0%, transparent 60%),
        #fff;
}
.gh-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.35rem 0.85rem;
    border-bottom: 1px solid var(--surface-100, #f1f5f9);
}
.gh-card__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink-900, #0F172A);
    margin: 0 0 0.2rem;
    letter-spacing: -0.015em;
}
.gh-card__sub {
    font-size: 0.82rem;
    color: var(--ink-500, #64748B);
    margin: 0;
    line-height: 1.4;
}
.gh-card__sub strong { font-weight: 600; }
.gh-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--brand-600, #0284C7);
    text-decoration: none;
    flex-shrink: 0;
    padding: 0.35rem 0;
}
.gh-card__link:hover { color: var(--brand-700, #0369A1); }
.gh-card__link i { font-size: 0.75em; transition: transform 0.15s ease; }
.gh-card__link:hover i { transform: translateX(2px); }
.gh-card__body {
    padding: 1.1rem 1.35rem 1.35rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
/* Pill (badge contador) */
.gh-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 999px;
    background: var(--surface-100, #f1f5f9);
    color: var(--ink-700, #334155);
    flex-shrink: 0;
}
.gh-pill--info {
    background: var(--brand-100, #E0F2FE);
    color: var(--brand-700, #0369A1);
}
/* Domain alert dentro do card */
.gh-domain-alert {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.85rem;
    align-items: center;
    padding: 0.95rem 1.1rem;
    background: linear-gradient(180deg, #FFFBEB 0%, #FEF9E7 100%);
    border: 1px solid #FDE68A;
    border-radius: 12px;
}
.gh-domain-alert__icon {
    width: 36px; height: 36px;
    background: rgba(217,119,6,0.12);
    color: #B45309;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.gh-domain-alert__text strong {
    display: block;
    font-size: 0.9rem;
    color: #78350F;
    margin-bottom: 0.15rem;
    font-weight: 700;
}
.gh-domain-alert__text p {
    margin: 0;
    font-size: 0.82rem;
    color: #92400E;
    line-height: 1.45;
}
.gh-link {
    color: var(--brand-700, #0369A1);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.gh-link:hover { text-decoration: underline; }
/* Empty state genérico */
.gh-empty-state {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1.1rem;
    background: var(--surface-50, #f8fafc);
    border-radius: 12px;
    color: var(--ink-600, #475569);
}
.gh-empty-state i {
    width: 36px; height: 36px;
    background: var(--surface-100, #f1f5f9);
    color: var(--brand-500, #0EA5E9);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.gh-empty-state p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
}
.gh-card__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.gh-mini-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    background: var(--surface-50, #f8fafc);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ink-700, #334155);
    text-decoration: none;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.gh-mini-btn:hover {
    background: #fff;
    border-color: var(--brand-300, #7DD3FC);
    color: var(--brand-700, #0369A1);
    text-decoration: none;
}
.gh-mini-btn i { color: var(--brand-500, #0EA5E9); font-size: 0.85em; }
/* Feed de notificações */
.gh-feed {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.gh-feed__item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.85rem 1rem;
    background: var(--surface-50, #f8fafc);
    border-radius: 10px;
    border-left: 3px solid var(--ink-300, #CBD5E1);
    transition: background 0.12s ease;
}
.gh-feed__item:hover { background: var(--surface-100, #f1f5f9); }
.gh-feed__item--danger { border-left-color: #DC2626; }
.gh-feed__item--warning { border-left-color: #D97706; }
.gh-feed__item--info { border-left-color: var(--brand-500, #0EA5E9); }
.gh-feed__item--success { border-left-color: #16A34A; }
.gh-feed__icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
    background: rgba(255,255,255,0.7);
    color: var(--ink-500, #64748B);
}
.gh-feed__item--danger .gh-feed__icon { color: #DC2626; }
.gh-feed__item--warning .gh-feed__icon { color: #D97706; }
.gh-feed__item--info .gh-feed__icon { color: var(--brand-600, #0284C7); }
.gh-feed__item--success .gh-feed__icon { color: #16A34A; }
.gh-feed__content {
    flex: 1;
    font-size: 0.875rem;
    line-height: 1.45;
}
.gh-feed__content a {
    color: var(--ink-800, #1E293B);
    text-decoration: none;
    font-weight: 500;
}
.gh-feed__content a:hover { color: var(--brand-700, #0369A1); }
/* ---- Responsivo dashboard ---- */
@media (max-width: 1199px) {
    .gh-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    .gh-dash__head {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .gh-dash__head-right { justify-content: flex-start; flex-wrap: wrap; }
    .gh-dash__greeting { font-size: 1.65rem; }
    .gh-dash__split { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
    .gh-kpi-grid { grid-template-columns: 1fr; }
    .gh-alert {
        grid-template-columns: auto 1fr;
        gap: 0.75rem;
    }
    .gh-alert__cta { grid-column: 1 / -1; justify-content: center; }
    .gh-domain-alert {
        grid-template-columns: auto 1fr;
    }
    .gh-domain-alert .gh-link { grid-column: 1 / -1; padding-top: 0.5rem; }
}
/* ======================================================================
   40. REDIRECT STATE (clientareahome.tpl → index.php)
   ====================================================================== */
.gh-redirect {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    padding: 3rem 1rem;
}
.gh-redirect__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}
.gh-redirect__spinner {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3px solid rgba(15, 23, 42, 0.08);
    border-top-color: var(--brand-600, #2563eb);
    animation: ghSpin 0.7s linear infinite;
}
.gh-redirect__text {
    margin: 0;
    color: var(--ink-500, #64748b);
    font-size: 0.95rem;
}
.gh-redirect__text a {
    color: var(--brand-600, #2563eb);
    text-decoration: underline;
    margin-left: 0.25rem;
}
@keyframes ghSpin {
    to { transform: rotate(360deg); }
}
/* ============================================================================
   41. PÁGINAS INTERNAS — design system universal
   Aplica o visual do painel em todas as páginas: Serviços, Domínios, Tickets,
   Faturas, Base de Conhecimento, Status, Contato, etc.
   ============================================================================ */
/* ------- BREADCRUMB ------- */
.master-breadcrumb {
    background: transparent;
    padding: 1.25rem 0 0.75rem;
}
.master-breadcrumb .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
}
.master-breadcrumb .breadcrumb-item {
    color: var(--ink-500, #64748b);
}
.master-breadcrumb .breadcrumb-item a {
    color: var(--ink-500, #64748b);
    text-decoration: none;
    transition: color 0.12s ease;
}
.master-breadcrumb .breadcrumb-item a:hover { color: var(--brand-600, #2563eb); }
.master-breadcrumb .breadcrumb-item.active,
.master-breadcrumb .breadcrumb-item:last-child {
    color: var(--ink-900, #0f172a);
    font-weight: 600;
}
.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--ink-300, #cbd5e1);
    content: "/";
    padding: 0 0.4rem;
}
/* ------- SIDEBAR (filtros laterais das páginas) ------- */
.sidebar .card.card-sidebar,
.sidebar .card {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    overflow: hidden;
    margin-bottom: 1.25rem;
    background: #ffffff;
}
.sidebar .card-header {
    background: #fafbfd;
    border-bottom: 1px solid var(--border, #e2e8f0);
    padding: 0.85rem 1.1rem;
}
.sidebar .card-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-500, #64748b);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.sidebar .card-title i:not(.card-minimise) {
    color: var(--brand-600, #2563eb);
    font-size: 1rem;
}
.sidebar .card-minimise {
    color: var(--ink-300, #cbd5e1);
    font-size: 0.7rem;
    margin-left: auto;
    transition: transform 0.2s ease;
}
.sidebar .list-group-item,
.sidebar .list-group-item-action {
    border: none;
    border-top: 1px solid var(--border, #e2e8f0);
    padding: 0.75rem 1.1rem;
    color: var(--ink-700, #334155);
    font-size: 0.93rem;
    background: #ffffff;
    transition: background 0.12s ease, color 0.12s ease;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.sidebar .list-group-item:first-child { border-top: none; }
.sidebar .list-group-item:hover,
.sidebar .list-group-item-action:hover {
    background: var(--panel-tint, #f0f6ff);
    color: var(--ink-900, #0f172a);
}
.sidebar .list-group-item.active {
    background: var(--panel-tint, #eff6ff);
    color: var(--brand-600, #2563eb);
    font-weight: 600;
    border-left: 3px solid var(--brand-600, #2563eb);
    padding-left: calc(1.1rem - 3px);
}
.sidebar .list-group-item .badge,
.sidebar .list-group-item-action .badge {
    background: var(--ink-100, #f1f5f9);
    color: var(--ink-500, #64748b);
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    margin-left: auto;
}
.sidebar .list-group-item.active .badge {
    background: var(--brand-600, #2563eb);
    color: #ffffff;
}
.sidebar .sidebar-menu-item-wrapper {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
}
.sidebar .sidebar-menu-item-icon-wrapper {
    width: 28px;
    height: 28px;
    background: var(--ink-100, #f1f5f9);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-500, #64748b);
    flex-shrink: 0;
}
.sidebar .list-group-item.active .sidebar-menu-item-icon-wrapper {
    background: var(--brand-600, #2563eb);
    color: #ffffff;
}
.sidebar .sidebar-menu-item-label { flex: 1; }
.sidebar .sidebar-menu-item-badge { margin-left: auto; }
/* ------- DATATABLES (tabelas das páginas internas) ------- */
.primary-content .card,
.primary-content > .card {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    background: #ffffff;
    overflow: hidden;
}
.table-container,
.dataTables_wrapper {
    background: #ffffff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 14px;
    padding: 1.25rem 1.25rem 1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.dataTables_wrapper .listtable {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.dataTables_filter {
    margin-left: auto;
}
.dataTables_filter input {
    border: 1px solid var(--border, #e2e8f0) !important;
    border-radius: 8px !important;
    padding: 0.5rem 0.85rem !important;
    font-size: 0.9rem;
    width: 260px;
    background: #fafbfd;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.dataTables_filter input:focus {
    outline: none;
    border-color: var(--brand-600, #2563eb) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    background: #ffffff;
}
.dataTables_filter label {
    position: relative;
    margin: 0;
}
.dataTables_filter label::before {
    content: "\f002";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-300, #cbd5e1);
    font-size: 0.85rem;
    z-index: 1;
    pointer-events: none;
}
.dataTables_filter input { padding-left: 2.2rem !important; }
.dataTables_info {
    color: var(--ink-500, #64748b);
    font-size: 0.85rem;
    padding-top: 0.75rem !important;
}
.dataTables_length select,
.dataTables_length label {
    color: var(--ink-500, #64748b);
    font-size: 0.85rem;
}
.dataTables_length select {
    border: 1px solid var(--border, #e2e8f0) !important;
    border-radius: 6px !important;
    padding: 0.25rem 0.5rem !important;
    background: #ffffff;
    margin: 0 0.35rem;
}
/* Tabela em si */
.table-list,
table.dataTable {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0;
    margin-bottom: 0.5rem !important;
}
.table-list thead th,
table.dataTable thead th {
    background: #fafbfd;
    border-top: 1px solid var(--border, #e2e8f0);
    border-bottom: 1px solid var(--border, #e2e8f0) !important;
    color: var(--ink-500, #64748b);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.75rem 1rem !important;
}
.table-list thead th:first-child,
table.dataTable thead th:first-child { border-top-left-radius: 8px; border-left: 1px solid var(--border, #e2e8f0); }
.table-list thead th:last-child,
table.dataTable thead th:last-child { border-top-right-radius: 8px; border-right: 1px solid var(--border, #e2e8f0); }
.table-list tbody td,
table.dataTable tbody td {
    padding: 0.9rem 1rem !important;
    border-top: 1px solid var(--border, #e2e8f0) !important;
    color: var(--ink-700, #334155);
    font-size: 0.92rem;
    background: #ffffff;
}
.table-list tbody tr:hover td,
table.dataTable tbody tr:hover td {
    background: var(--panel-tint, #f8fafc);
    cursor: pointer;
}
.dataTables_empty {
    text-align: center;
    padding: 2.5rem 1rem !important;
    color: var(--ink-500, #64748b) !important;
    font-size: 0.95rem;
    background: #ffffff !important;
}
/* Paginação */
.dataTables_paginate {
    display: flex;
    justify-content: flex-end;
    gap: 0.35rem;
    padding-top: 0.75rem;
}
.dataTables_paginate .paginate_button {
    border: 1px solid var(--border, #e2e8f0) !important;
    border-radius: 8px !important;
    padding: 0.35rem 0.85rem !important;
    color: var(--ink-700, #334155) !important;
    background: #ffffff !important;
    font-size: 0.85rem;
    transition: all 0.12s ease;
    margin: 0 !important;
}
.dataTables_paginate .paginate_button:hover {
    background: var(--panel-tint, #f0f6ff) !important;
    color: var(--brand-600, #2563eb) !important;
    border-color: var(--brand-300, #bfdbfe) !important;
}
.dataTables_paginate .paginate_button.current {
    background: var(--brand-600, #2563eb) !important;
    color: #ffffff !important;
    border-color: var(--brand-600, #2563eb) !important;
}
.dataTables_paginate .paginate_button.disabled {
    opacity: 0.4;
    pointer-events: none;
}
/* Labels de status (ticket-status-open, etc) */
.label.status,
.label-status,
span.status {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
}
.status-open, .status-emdia, .status-active {
    background: #dcfce7; color: #166534; border-color: #bbf7d0;
}
.status-closed, .status-fechado, .status-suspended {
    background: #fee2e2; color: #991b1b; border-color: #fecaca;
}
.status-pending, .status-pendente, .status-answered {
    background: #fef3c7; color: #92400e; border-color: #fde68a;
}
.status-customerreply {
    background: #dbeafe; color: #1e40af; border-color: #bfdbfe;
}
/* ------- CARDS GERAIS das páginas internas ------- */
.primary-content .card {
    margin-bottom: 1.5rem;
}
.primary-content .card-header {
    background: #fafbfd;
    border-bottom: 1px solid var(--border, #e2e8f0);
    padding: 1rem 1.25rem;
}
.primary-content .card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink-900, #0f172a);
    margin: 0;
}
.primary-content .card-body {
    padding: 1.5rem;
    color: var(--ink-700, #334155);
}
/* ------- BOTÕES de ação (topo das páginas) ------- */
.primary-content .btn,
.btn-default {
    border-radius: 8px;
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.12s ease;
}
.primary-content .btn-primary,
.btn-primary {
    background: var(--brand-600, #2563eb) !important;
    border-color: var(--brand-600, #2563eb) !important;
}
.primary-content .btn-primary:hover,
.btn-primary:hover {
    background: var(--brand-700, #1d4ed8) !important;
    border-color: var(--brand-700, #1d4ed8) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
}
.primary-content .btn-default {
    background: #ffffff !important;
    border: 1px solid var(--border, #e2e8f0) !important;
    color: var(--ink-700, #334155) !important;
}
.primary-content .btn-default:hover {
    background: var(--panel-tint, #f0f6ff) !important;
    color: var(--brand-600, #2563eb) !important;
    border-color: var(--brand-300, #bfdbfe) !important;
}
/* ------- BASE DE CONHECIMENTO: busca bonita ------- */
.kb-search,
form.kb-search-form {
    background: #ffffff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 14px;
    padding: 1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
/* ------- "Powered by WHMCompleteSolution" — esconder via CSS ------- */
a[href*="whmcompletesolution.com"],
a[href*="whmcs.com"]:not(.gh-keep),
.copyright a[href*="whmcs"] {
    /* o link do core WHMCS + parent wrapper somem */
}
/* Hook via body.tpl-* para evitar afetar termos legítimos: ver JS em footer.tpl */
.gh-no-wcs-powered { display: none !important; }
/* ------- ALERT banners do WHMCS (success/error) ------- */
.primary-content .alert {
    border-radius: 10px;
    border: 1px solid transparent;
    padding: 0.85rem 1.1rem;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.primary-content .alert-success {
    background: #f0fdf4;
    color: #166534;
    border-color: #bbf7d0;
}
.primary-content .alert-danger {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}
.primary-content .alert-warning {
    background: #fffbeb;
    color: #92400e;
    border-color: #fde68a;
}
.primary-content .alert-info {
    background: #eff6ff;
    color: #1e40af;
    border-color: #bfdbfe;
}
/* ------- HEADINGS de páginas internas ------- */
.primary-content h1,
.primary-content .page-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ink-900, #0f172a);
    margin: 0 0 0.35rem;
    letter-spacing: -0.01em;
}
.primary-content h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ink-900, #0f172a);
}
.primary-content .lead,
.primary-content h1 + p {
    color: var(--ink-500, #64748b);
    font-size: 1rem;
    margin-bottom: 1.5rem;
}
/* ============================================================
   42. HERO ACTIONS + QUICK ACTIONS (dashboard logado)
   UX enxuto: 2 CTAs horizontais + 4 atalhos compactos.
   Sem eyebrows, sem descrições — design fala sozinho.
   ============================================================ */
.gh-hero-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 575px) { .gh-hero-actions { grid-template-columns: 1fr; } }
.gh-hero-action {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.1rem 1.3rem;
    border-radius: 12px;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.gh-hero-action:hover { transform: translateY(-1px); text-decoration: none; }
.gh-hero-action--primary {
    background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(14,165,233,0.4);
}
.gh-hero-action--primary:hover {
    box-shadow: 0 8px 20px -4px rgba(14,165,233,0.5);
    color: #fff;
}
.gh-hero-action--primary .gh-hero-action__icon {
    background: rgba(255,255,255,0.18);
    color: #fff;
}
.gh-hero-action--secondary {
    background: #fff;
    border: 1px solid var(--border, #e2e8f0);
    color: var(--ink-900, #0F172A);
}
.gh-hero-action--secondary:hover {
    border-color: var(--brand-400, #38BDF8);
    box-shadow: 0 4px 10px -4px rgba(15,23,42,0.08);
    color: var(--ink-900, #0F172A);
}
.gh-hero-action--secondary .gh-hero-action__icon {
    background: var(--surface-100, #f1f5f9);
    color: var(--brand-600, #0284C7);
}
.gh-hero-action__icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1.05rem;
}
.gh-hero-action__title {
    flex: 1;
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}
.gh-hero-action__arrow {
    font-size: 0.78rem;
    opacity: 0.55;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.gh-hero-action:hover .gh-hero-action__arrow {
    opacity: 1;
    transform: translateX(3px);
}
/* Quick actions simplificados — só ícone + label */
.gh-quick-actions__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.65rem;
}
@media (max-width: 767px) { .gh-quick-actions__grid { grid-template-columns: repeat(2, 1fr); } }
.gh-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 1.1rem 0.75rem;
    background: #fff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.gh-action:hover {
    border-color: var(--brand-400, #38BDF8);
    transform: translateY(-1px);
    text-decoration: none;
}
.gh-action__icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 0.95rem;
    background: var(--surface-100, #f1f5f9);
    color: var(--brand-600, #0284C7);
    transition: background 0.15s ease, color 0.15s ease;
}
.gh-action strong {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-900, #0F172A);
    letter-spacing: -0.005em;
}
.gh-action__icon--red    { background: #fef2f2; color: #dc2626; }
.gh-action__icon--yellow { background: #fffbeb; color: #d97706; }
.gh-action__icon--blue   { background: #eff6ff; color: #2563eb; }
.gh-action__icon--green  { background: #f0fdf4; color: #16a34a; }
/* ============================================================
   43. SERVER STATUS — redesign high-tech
   Status bar slim + heatmap 90d (peça central) + componentes
   em linha densa (statuspage.io / Vercel style).
   ============================================================ */
/* ---------- STATUS BAR (slim, horizontal) ---------- */
.gh-sb {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1rem 1.4rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    color: #fff;
    flex-wrap: wrap;
}
.gh-sb--ok        { background: #10b981; }
.gh-sb--scheduled { background: #d97706; }
.gh-sb--incident  { background: #dc2626; }
.gh-sb__left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.gh-sb__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
    animation: ghSbPulse 2s ease-out infinite;
    flex-shrink: 0;
}
@keyframes ghSbPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.gh-sb__label {
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #fff;
}
.gh-sb__right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.gh-sb__metric {
    display: flex;
    flex-direction: column;
    text-align: right;
    line-height: 1.15;
}
.gh-sb__metric-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}
.gh-sb__metric-unit {
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255,255,255,0.8);
    margin-left: 0.12rem;
}
.gh-sb__metric-label {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.78);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.15rem;
}
@media (max-width: 575px) {
    .gh-sb__right { width: 100%; justify-content: flex-start; }
    .gh-sb__metric { text-align: left; }
}
/* Ticker "sondagem há Xs" dentro da status bar */
.gh-sb__ticker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.68rem;
    color: #fff;
    letter-spacing: 0.02em;
    margin-left: 0.5rem;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    min-width: 130px;
}
.gh-sb__ticker-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    animation: ghBlink 1.4s ease-in-out infinite;
}
@keyframes ghBlink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.75); }
}
.gh-sb__metric-value [data-gh-latency] {
    /* suaviza mudança de número sem pular layout */
    display: inline-block;
    min-width: 2.2em;
    text-align: right;
    transition: opacity 0.15s ease;
}
/* ---------- HEATMAP 90 DIAS (peça principal) ---------- */
.gh-uptime {
    background: #fff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    padding: 1.25rem 1.5rem 1.15rem;
    margin-bottom: 1.5rem;
}
.gh-uptime__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.9rem;
    gap: 1rem;
    flex-wrap: wrap;
}
.gh-uptime__title {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.gh-uptime__key {
    font-size: 0.82rem;
    color: var(--ink-500, #64748B);
    letter-spacing: 0.01em;
}
.gh-uptime__value {
    font-size: 1.15rem;
    font-weight: 700;
    color: #10b981;
    letter-spacing: -0.01em;
}
.gh-uptime__legend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.72rem;
    color: var(--ink-500, #64748B);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.gh-uptime__legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.gh-uptime__sq {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    display: inline-block;
}
.gh-uptime__sq--ok   { background: #10b981; }
.gh-uptime__sq--deg  { background: #f59e0b; }
.gh-uptime__sq--down { background: #ef4444; }
/* Os 90 bars */
.gh-uptime__bars {
    display: flex;
    align-items: stretch;
    gap: 2px;
    height: 44px;
    margin-bottom: 0.5rem;
    position: relative;
    overflow: hidden;
    border-radius: 3px;
}
.gh-uptime__bar {
    flex: 1;
    background: #10b981;
    border-radius: 2px;
    transition: transform 0.12s ease, background 0.12s ease;
    cursor: pointer;
    position: relative;
}
.gh-uptime__bar:hover {
    transform: scaleY(1.15);
    background: #059669;
}
.gh-uptime__bar--deg  { background: #f59e0b; }
.gh-uptime__bar--deg:hover { background: #d97706; }
.gh-uptime__bar--down { background: #ef4444; }
.gh-uptime__bar--down:hover { background: #dc2626; }
/* Barra do dia atual — pulsa pra sinalizar "ao vivo" */
.gh-uptime__bar--live {
    background: #10b981;
    box-shadow: 0 0 8px rgba(16,185,129,0.75),
                0 0 2px rgba(16,185,129,0.55);
    animation: ghTodayPulse 2s ease-in-out infinite;
    position: relative;
    z-index: 2;
}
@keyframes ghTodayPulse {
    0%, 100% {
        opacity: 1;
        filter: brightness(1);
        box-shadow: 0 0 8px rgba(16,185,129,0.75),
                    0 0 2px rgba(16,185,129,0.55);
    }
    50% {
        opacity: 0.78;
        filter: brightness(1.35);
        box-shadow: 0 0 14px rgba(16,185,129,0.95),
                    0 0 4px rgba(16,185,129,0.85);
    }
}
/* Scan line — varredura verde clara passando nos bars a cada 7s */
.gh-uptime__bars::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 110px;
    left: -110px;
    background: linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.08) 30%,
        rgba(255,255,255,0.35) 50%,
        rgba(255,255,255,0.08) 70%,
        rgba(255,255,255,0) 100%);
    pointer-events: none;
    animation: ghScan 7s linear infinite;
    z-index: 3;
    mix-blend-mode: overlay;
}
@keyframes ghScan {
    0%   { left: -110px; opacity: 0; }
    6%   { opacity: 1; }
    94%  { opacity: 1; }
    100% { left: 100%;   opacity: 0; }
}
/* LIVE pill no header do heatmap */
.gh-uptime__live {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.62rem;
    font-weight: 700;
    color: #10b981;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 0.22rem 0.55rem;
    border-radius: 4px;
    background: rgba(16,185,129,0.1);
    border: 1px solid rgba(16,185,129,0.22);
    margin-left: 0.5rem;
    line-height: 1;
}
.gh-uptime__live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16,185,129,0.55);
    animation: ghLiveDot 1.6s ease-out infinite;
    flex-shrink: 0;
}
@keyframes ghLiveDot {
    0%   { box-shadow: 0 0 0 0 rgba(16,185,129,0.7);  transform: scale(1); }
    70%  { box-shadow: 0 0 0 9px rgba(16,185,129,0);  transform: scale(1.1); }
    100% { box-shadow: 0 0 0 0 rgba(16,185,129,0);    transform: scale(1); }
}
.gh-uptime__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.7rem;
    color: var(--ink-400, #94a3b8);
    letter-spacing: 0.02em;
}
.gh-uptime__tick { color: var(--ink-300, #cbd5e1); }
/* ---------- ALERT scheduled ---------- */
.gh-net-alert {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.gh-net-alert--scheduled {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #78350f;
}
.gh-net-alert a {
    color: #b45309;
    font-weight: 600;
    margin-left: 0.3rem;
    text-decoration: underline;
}
.gh-net-alert a:hover { color: #92400e; }
/* ---------- SECTION COMPONENTS / INCIDENTS ---------- */
.gh-comp { margin-bottom: 2rem; }
.gh-comp__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--border, #e2e8f0);
}
.gh-comp__title {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink-900, #0F172A);
    margin: 0;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}
.gh-comp__title::before {
    content: "# ";
    color: var(--ink-400, #94a3b8);
    font-weight: 500;
}
.gh-comp__count {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.72rem;
    color: var(--ink-500, #64748B);
    letter-spacing: 0.02em;
}
/* ---------- COMPONENT ROW ---------- */
.gh-comp__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.gh-comp-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px 64px;
    gap: 1.25rem;
    align-items: center;
    padding: 0.95rem 1.15rem;
    background: #fff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    transition: border-color 0.15s ease;
}
.gh-comp-row:hover {
    border-color: var(--brand-300, #7dd3fc);
}
@media (max-width: 767px) {
    .gh-comp-row {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}
.gh-comp-row__main { min-width: 0; }
.gh-comp-row__id {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.6rem;
}
.gh-comp-row__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 2px rgba(16,185,129,0.22);
    flex-shrink: 0;
}
.gh-comp-row__name {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink-900, #0F172A);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gh-comp-row__link {
    color: var(--ink-400, #94a3b8);
    font-size: 0.72rem;
    margin-left: auto;
    padding: 0.25rem 0.4rem;
    border-radius: 5px;
    transition: background 0.12s ease, color 0.12s ease;
}
.gh-comp-row__link:hover {
    background: var(--surface-100, #f1f5f9);
    color: var(--brand-600, #0284C7);
    text-decoration: none;
}
.gh-comp-row__services {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    align-items: center;
}
.gh-comp-svc {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
}
.gh-comp-svc__k {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.7rem;
    color: var(--ink-500, #64748B);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.gh-comp-svc__v {
    color: var(--ink-900, #0F172A);
    font-weight: 600;
    min-width: 14px;
    display: inline-flex;
    align-items: center;
}
.gh-comp-svc--mono .gh-comp-svc__v {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.78rem;
}
.gh-comp-svc__v .fa-check,
.gh-comp-svc__v .fa-check-circle { color: #10b981; font-size: 0.92rem; }
.gh-comp-svc__v .fa-times,
.gh-comp-svc__v .fa-times-circle,
.gh-comp-svc__v .fa-exclamation-triangle { color: #ef4444; font-size: 0.92rem; }
.gh-comp-svc__v .fa-spinner { color: var(--ink-400, #94a3b8); font-size: 0.82rem; }
/* Mini chart da linha (60 bars) */
.gh-comp-row__chart {
    display: flex;
    align-items: flex-end;
    gap: 1.5px;
    height: 32px;
}
.gh-comp-row__bar {
    flex: 1;
    background: #10b981;
    border-radius: 1px;
    opacity: 0.85;
    min-height: 14px;
}
.gh-comp-row__bar:nth-child(4n)   { height: 75%; }
.gh-comp-row__bar:nth-child(4n+1) { height: 100%; }
.gh-comp-row__bar:nth-child(4n+2) { height: 90%; }
.gh-comp-row__bar:nth-child(4n+3) { height: 82%; }
.gh-comp-row__bar--deg { background: #f59e0b; }
.gh-comp-row__pct {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.88rem;
    font-weight: 700;
    color: #10b981;
    text-align: right;
    letter-spacing: -0.01em;
}
/* ---------- EMPTY STATE ---------- */
.gh-comp-empty {
    padding: 1.5rem 1.25rem;
    background: #fff;
    border: 1px dashed var(--border, #e2e8f0);
    border-radius: 10px;
    text-align: center;
    color: var(--ink-500, #64748B);
    font-size: 0.85rem;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.gh-comp-empty--ok {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-style: solid;
    color: #166534;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    padding: 0.95rem 1.15rem;
}
.gh-comp-empty__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.22);
}
/* ---------- INCIDENTES ---------- */
.gh-incidents {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.gh-incident {
    display: flex;
    background: #fff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
}
.gh-incident__rail { flex: 0 0 3px; background: #64748b; }
.gh-incident--critical .gh-incident__rail { background: #dc2626; }
.gh-incident--high     .gh-incident__rail { background: #ea580c; }
.gh-incident--low      .gh-incident__rail { background: #10b981; }
.gh-incident--info     .gh-incident__rail { background: #0ea5e9; }
.gh-incident__content { flex: 1; padding: 0.95rem 1.2rem; min-width: 0; }
.gh-incident__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}
.gh-incident__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink-900, #0F172A);
    margin: 0;
    letter-spacing: -0.005em;
}
.gh-incident__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.gh-incident__badge--critical { background: #fef2f2; color: #991b1b; }
.gh-incident__badge--high     { background: #fff7ed; color: #9a3412; }
.gh-incident__badge--low      { background: #f0fdf4; color: #166534; }
.gh-incident__badge--info     { background: #eff6ff; color: #1e40af; }
.gh-incident__you {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem;
    background: #fff7ed;
    color: #9a3412;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 5px;
    margin-bottom: 0.5rem;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.gh-incident__you i { font-size: 0.72rem; }
.gh-incident__desc {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--ink-700, #334155);
    margin-bottom: 0.55rem;
}
.gh-incident__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border, #e2e8f0);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.7rem;
    color: var(--ink-500, #64748B);
    letter-spacing: 0.02em;
}
/* ---------- PAGINATION ---------- */
.gh-status-pagination {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.5rem;
}
.gh-status-pagination__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    background: #fff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    color: var(--ink-700, #334155);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.gh-status-pagination__btn:hover:not(.is-disabled) {
    border-color: var(--brand-400, #38BDF8);
    color: var(--brand-600, #0284C7);
    text-decoration: none;
}
.gh-status-pagination__btn.is-disabled { opacity: 0.4; pointer-events: none; }
.gh-status-pagination__btn i { font-size: 0.65rem; }
/* ============================================================
   44. CONTACT — UX enxuto
   2 colunas, sem eyebrows, sem lede, labels secos.
   ============================================================ */
.gh-contact-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 2rem;
    align-items: start;
    margin: 0.5rem 0 2rem;
}
@media (max-width: 991px) {
    .gh-contact-wrap {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}
.gh-contact-side__title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ink-900, #0F172A);
    letter-spacing: -0.015em;
    margin: 0 0 1.25rem;
}
.gh-contact-channels {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.gh-contact-channel {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.gh-contact-channel:hover {
    border-color: var(--brand-400, #38BDF8);
    transform: translateX(2px);
    text-decoration: none;
}
.gh-contact-channel__icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 0.95rem;
}
.gh-contact-channel__icon--blue   { background: #eff6ff; color: #2563eb; }
.gh-contact-channel__icon--green  { background: #f0fdf4; color: #16a34a; }
.gh-contact-channel__icon--purple { background: #faf5ff; color: #9333ea; }
.gh-contact-channel__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.gh-contact-channel__body strong {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink-900, #0F172A);
    line-height: 1.25;
}
.gh-contact-channel__body span {
    font-size: 0.78rem;
    color: var(--ink-500, #64748B);
    margin-top: 0.1rem;
}
.gh-contact-channel__arrow {
    font-size: 0.72rem;
    color: var(--ink-400, #94a3b8);
    transition: transform 0.15s ease, color 0.15s ease;
}
.gh-contact-channel:hover .gh-contact-channel__arrow {
    color: var(--brand-600, #0284C7);
    transform: translateX(2px);
}
/* Card do form */
.gh-contact-card {
    background: #fff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 14px;
    padding: 1.75rem 1.85rem;
}
@media (max-width: 575px) { .gh-contact-card { padding: 1.35rem 1.25rem; } }
.gh-contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.gh-contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 575px) { .gh-contact-row { grid-template-columns: 1fr; } }
.gh-contact-field { display: flex; flex-direction: column; }
.gh-contact-field > label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--ink-700, #334155);
    margin-bottom: 0.4rem;
}
.gh-contact-field .form-control {
    width: 100%;
    padding: 0.65rem 0.85rem;
    background: #fff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    font-size: 0.92rem;
    color: var(--ink-900, #0F172A);
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gh-contact-field .form-control:focus {
    outline: none;
    border-color: var(--brand-500, #0EA5E9);
    box-shadow: 0 0 0 3px rgba(14,165,233,0.12);
}
.gh-contact-field textarea.form-control { min-height: 130px; resize: vertical; }
.gh-contact-captcha {
    display: flex;
    justify-content: center;
    margin: 0.25rem 0;
}
.gh-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.75rem 1.4rem;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    font-family: inherit;
    align-self: flex-start;
}
.gh-contact-btn--primary {
    background: var(--brand-600, #0284C7);
    color: #fff;
}
.gh-contact-btn--primary:hover {
    background: var(--brand-700, #0369A1);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}
.gh-contact-btn--wide { min-width: 180px; justify-content: center; align-self: stretch; }
/* Success */
.gh-contact-success { text-align: center; padding: 1.5rem 0.5rem 0.5rem; }
.gh-contact-success__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    background: #10b981;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.35rem;
}
.gh-contact-success h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ink-900, #0F172A);
    margin: 0 0 0.35rem;
    letter-spacing: -0.01em;
}
.gh-contact-success p {
    font-size: 0.92rem;
    color: var(--ink-500, #64748B);
    margin: 0 0 1.25rem;
}
.gh-contact-success__actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}
/* Alert */
.gh-contact-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    font-size: 0.88rem;
}
.gh-contact-alert--error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}
.gh-contact-alert--error i { color: #dc2626; margin-top: 0.1rem; }
/* ============================================================
   SEÇÃO 45 — KPI CARDS v2 (sem sparklines fake, reflete real)
   ============================================================ */
.gh-kpi2 {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    min-height: 148px;
    position: relative;
    overflow: hidden;
}
.gh-kpi2::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: transparent;
    transition: background .2s ease;
}
.gh-kpi2:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    border-color: var(--ink-200, #cbd5e1);
    text-decoration: none;
    color: inherit;
}
.gh-kpi2--ok::before      { background: linear-gradient(90deg, #10b981, #34d399); }
.gh-kpi2--brand::before   { background: linear-gradient(90deg, var(--brand-500, #0ea5e9), var(--brand-400, #38bdf8)); }
.gh-kpi2--warn::before    { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.gh-kpi2--danger::before  { background: linear-gradient(90deg, #dc2626, #ef4444); }
.gh-kpi2--muted::before   { background: linear-gradient(90deg, #94a3b8, #cbd5e1); }
.gh-kpi2__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.85rem;
}
.gh-kpi2__glyph {
    width: 38px; height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border-radius: 10px;
    color: #475569;
    font-size: 1.05rem;
}
.gh-kpi2--ok .gh-kpi2__glyph     { background: #ecfdf5; color: #059669; }
.gh-kpi2--brand .gh-kpi2__glyph  { background: #eff6ff; color: var(--brand-600, #0284c7); }
.gh-kpi2--warn .gh-kpi2__glyph   { background: #fffbeb; color: #b45309; }
.gh-kpi2--danger .gh-kpi2__glyph { background: #fef2f2; color: #b91c1c; }
.gh-kpi2__arrow {
    color: #cbd5e1;
    font-size: 0.8rem;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .18s ease, transform .18s ease;
}
.gh-kpi2:hover .gh-kpi2__arrow { opacity: 1; transform: translateX(0); }
.gh-kpi2__label {
    font-size: 0.78rem;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}
.gh-kpi2__value {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--ink-900, #0f172a);
    line-height: 1;
    margin-bottom: 0.8rem;
}
.gh-kpi2__value--money {
    font-size: 1.55rem;
    letter-spacing: -0.01em;
}
.gh-kpi2__foot {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: auto;
    flex-wrap: wrap;
}
.gh-kpi2__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
}
.gh-kpi2__tag--ok     { background: #ecfdf5; color: #047857; }
.gh-kpi2__tag--brand  { background: #eff6ff; color: #0369a1; }
.gh-kpi2__tag--warn   { background: #fffbeb; color: #b45309; }
.gh-kpi2__tag--danger { background: #fef2f2; color: #b91c1c; }
.gh-kpi2__tag--muted  { background: #f1f5f9; color: #64748b; }
.gh-kpi2__pulse {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
    animation: ghKpiPulse 1.6s ease-in-out infinite;
    display: inline-block;
}
@keyframes ghKpiPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.7); }
}
.gh-kpi2__hint {
    font-size: 0.72rem;
    color: #94a3b8;
}
/* ============================================================
   SEÇÃO 46 — TOPBAR PREMIUM (logado como + notificações)
   ============================================================ */
.gh-topbar {
    background: linear-gradient(90deg, #0f172a 0%, #1e293b 100%);
    color: #e2e8f0;
    font-size: 0.8rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: relative;
    overflow: hidden;
}
.gh-topbar::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at 20% 50%, rgba(14, 165, 233, 0.12), transparent 60%);
    pointer-events: none;
}
.gh-topbar__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 0.4rem 0;
    gap: 1rem;
    position: relative;
    z-index: 1;
}
.gh-topbar__left,
.gh-topbar__right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
/* Status */
.gh-topbar__status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem 0.7rem;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 999px;
    color: #6ee7b7;
    font-size: 0.72rem;
    font-weight: 500;
}
.gh-topbar__status-dot {
    width: 6px; height: 6px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.8);
    animation: ghTopPulse 2s ease-in-out infinite;
}
@keyframes ghTopPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.85); }
}
@media (max-width: 600px) {
    .gh-topbar__status-label { display: none; }
}
/* Sino */
.gh-topbar__bell {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
    color: #cbd5e1;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
    position: relative;
}
.gh-topbar__bell:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.2);
    color: #fff;
}
.gh-topbar__bell.is-active {
    background: rgba(14, 165, 233, 0.15);
    border-color: rgba(14, 165, 233, 0.4);
    color: #7dd3fc;
}
.gh-topbar__badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    background: #ef4444;
    color: #fff;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px #0f172a;
}
/* Conta ativa */
.gh-topbar__account {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.gh-topbar__account-label {
    color: #94a3b8;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}
.gh-topbar__account-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.3rem 0.75rem 0.3rem 0.35rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    color: #f1f5f9;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
    font-size: 0.78rem;
    font-weight: 500;
}
.gh-topbar__account-pill:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(14, 165, 233, 0.4);
    color: #fff;
    text-decoration: none;
}
.gh-topbar__avatar {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-500, #0ea5e9), var(--brand-700, #0369a1));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.72rem;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.06);
}
.gh-topbar__account-name {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gh-topbar__account-chev {
    font-size: 0.62rem;
    opacity: 0.55;
}
.gh-topbar__icon-btn {
    width: 30px; height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #cbd5e1;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.gh-topbar__icon-btn:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
    border-color: rgba(255,255,255,0.2);
    text-decoration: none;
}
.gh-topbar__admin {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 999px;
    color: #fcd34d;
    font-size: 0.72rem;
    font-weight: 600;
    text-decoration: none;
}
.gh-topbar__admin:hover { background: rgba(245, 158, 11, 0.25); color: #fde68a; text-decoration: none; }
@media (max-width: 768px) {
    .gh-topbar__bell-text { display: none; }
    .gh-topbar__account-name { max-width: 120px; }
    .gh-topbar__status       { display: none; }
}
/* ============================================================
   SEÇÃO 47 — TICKETS PAGE (painel, sem sidebar)
   ============================================================ */
/* Esconde a sidebar e força full-width em páginas painel */
body.tpl-supportticketslist #main-body .sidebar,
body.tpl-supportticketslist #main-body aside.sidebar,
body.tpl-supportticketslist #main-body > .container > .row > div.col-lg-4,
body.tpl-supportticketslist #main-body > .container > .row > div.col-xl-3,
body.tpl-supportticketslist #main-body > .container > .row > div.col-md-4,
body.tpl-supportticketslist #main-body > .container > .row > div.col-md-3,
body.tpl-homepage #main-body .sidebar,
body.tpl-homepage #main-body aside.sidebar,
body.tpl-homepage #main-body > .container > .row > div.col-lg-4,
body.tpl-homepage #main-body > .container > .row > div.col-xl-3,
body.tpl-homepage #main-body > .container > .row > div.col-md-4,
body.tpl-homepage #main-body > .container > .row > div.col-md-3 {
    display: none !important;
}
body.tpl-supportticketslist #main-body > .container > .row > div.primary-content,
body.tpl-supportticketslist #main-body .primary-content,
body.tpl-homepage #main-body > .container > .row > div.primary-content,
body.tpl-homepage #main-body .primary-content {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}
/* Homepage: o .gh-panel já tem seu próprio container interno — evita padding dobrado */
body.tpl-homepage #main-body > .container {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
}
body.tpl-homepage #main-body .primary-content > .gh-panel > .container {
    max-width: 1320px;
}
.gh-tx-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.gh-tx-head__crumb {
    display: inline-block;
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.35rem;
    font-weight: 600;
}
.gh-tx-head__title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ink-900, #0f172a);
    margin: 0 0 0.3rem;
    letter-spacing: -0.015em;
}
.gh-tx-head__sub {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0;
}
.gh-tx-head__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.05rem;
    background: var(--brand-600, #0284c7);
    color: #fff;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.88rem;
    box-shadow: 0 4px 10px rgba(2, 132, 199, 0.25);
    transition: transform .18s ease, box-shadow .18s ease;
}
.gh-tx-head__cta:hover {
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(2, 132, 199, 0.35);
}
.gh-tx-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}
.gh-tx-stat {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    position: relative;
    overflow: hidden;
}
.gh-tx-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
    text-decoration: none;
    color: inherit;
}
.gh-tx-stat.is-active {
    border-color: var(--brand-500, #0ea5e9);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}
.gh-tx-stat__dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.gh-tx-stat--open .gh-tx-stat__dot      { background: #0ea5e9; box-shadow: 0 0 8px rgba(14,165,233,0.5); }
.gh-tx-stat--answered .gh-tx-stat__dot  { background: #10b981; box-shadow: 0 0 8px rgba(16,185,129,0.5); }
.gh-tx-stat--customer .gh-tx-stat__dot  { background: #f59e0b; box-shadow: 0 0 8px rgba(245,158,11,0.5); }
.gh-tx-stat--closed .gh-tx-stat__dot    { background: #94a3b8; }
.gh-tx-stat__body {
    display: flex;
    flex-direction: column;
}
.gh-tx-stat__label {
    font-size: 0.74rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.gh-tx-stat__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink-900, #0f172a);
    line-height: 1.15;
}
/* Painel achatado — deixa só UMA borda em volta da tabela */
.gh-tx-panel {
    background: transparent;
    border: 0;
    padding: 0;
}
/* Normaliza o container do DataTable e o dataTables_wrapper */
body.tpl-supportticketslist .gh-tx-panel .table-container,
body.tpl-supportticketslist .gh-tx-panel .dataTables_wrapper {
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    overflow: hidden;
}
/* Tabela interna sem bordas redundantes */
body.tpl-supportticketslist .gh-tx-panel table.dataTable,
body.tpl-supportticketslist .gh-tx-panel table.table-list {
    border: 0 !important;
    margin: 0 !important;
}
body.tpl-supportticketslist .gh-tx-panel table.dataTable thead th {
    border-top: 0 !important;
    border-bottom: 1px solid var(--border, #e5e7eb) !important;
    background: #f8fafc;
    color: #475569;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
    padding: 0.75rem 0.9rem;
}
body.tpl-supportticketslist .gh-tx-panel table.dataTable tbody td {
    border-top: 1px solid #f1f5f9 !important;
    padding: 0.85rem 0.9rem;
    vertical-align: middle;
}
body.tpl-supportticketslist .gh-tx-panel table.dataTable tbody tr:first-child td {
    border-top: 0 !important;
}
.gh-tx-table tbody tr {
    cursor: pointer;
    transition: background .15s ease;
}
.gh-tx-table tbody tr:hover {
    background: #f8fafc;
}
.gh-tx-subject {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.gh-tx-subject:hover { color: var(--brand-700, #0369a1); text-decoration: none; }
.gh-tx-subject__id {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.72rem;
    color: #94a3b8;
}
.gh-tx-subject__title {
    font-weight: 500;
    color: var(--ink-900, #0f172a);
}
.gh-tx-subject__title.is-unread {
    font-weight: 700;
    color: var(--brand-700, #0369a1);
}
.gh-tx-dept { color: #475569; font-size: 0.88rem; }
.gh-tx-time { color: #64748b; font-size: 0.82rem; }
/* ============================================================
   SEÇÃO 48 — ACCOUNT PAGES (dados, usuários, contatos, e-mails)
   ============================================================ */
.gh-account {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.gh-account__head {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 14px;
    padding: 1.25rem 1.4rem;
    flex-wrap: wrap;
}
.gh-account__avatar {
    width: 58px; height: 58px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--brand-500, #0ea5e9), var(--brand-700, #0369a1));
    color: #fff;
    font-weight: 700;
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 14px rgba(2, 132, 199, 0.25);
    letter-spacing: 0.02em;
}
.gh-account__ident {
    flex: 1;
    min-width: 240px;
}
.gh-account__name {
    margin: 0 0 0.3rem;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink-900, #0f172a);
}
.gh-account__meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.85rem;
    color: #64748b;
}
.gh-account__meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.gh-account__meta i { color: #94a3b8; font-size: 0.85em; }
.gh-account__chips {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.gh-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 999px;
    color: #475569;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
    transition: all .15s ease;
}
.gh-chip:hover {
    border-color: var(--brand-500, #0ea5e9);
    color: var(--brand-700, #0369a1);
    text-decoration: none;
}
/* Panel — card base */
.gh-panel {
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 14px;
    overflow: hidden;
}
.gh-panel__head {
    padding: 1.1rem 1.4rem 0.6rem;
    border-bottom: 1px solid #f1f5f9;
}
.gh-panel__title {
    margin: 0 0 0.2rem;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--ink-900, #0f172a);
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}
.gh-panel__title i { color: var(--brand-600, #0284c7); }
.gh-panel__sub {
    margin: 0;
    font-size: 0.82rem;
    color: #64748b;
}
.gh-panel__body { padding: 1.1rem 1.4rem; }
.gh-panel__foot {
    padding: 0.8rem 1.4rem;
    border-top: 1px solid #f1f5f9;
    font-size: 0.82rem;
    color: #64748b;
    background: #fbfcfd;
}
.gh-panel--flush .gh-panel__body { padding: 0.5rem; }
.gh-panel__text { margin: 0 0 0.9rem; color: #475569; font-size: 0.9rem; }
/* Grid */
.gh-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem 1rem;
}
@media (max-width: 640px) {
    .gh-grid-2 { grid-template-columns: 1fr; }
}
.gh-fld { display: flex; flex-direction: column; gap: 0.35rem; }
.gh-fld--wide { grid-column: 1 / -1; }
.gh-fld label {
    font-size: 0.78rem;
    font-weight: 500;
    color: #334155;
    letter-spacing: 0.01em;
}
.gh-fld input,
.gh-fld select,
.gh-fld textarea,
.gh-panel .form-control,
.gh-panel .custom-select {
    width: 100%;
    padding: 0.58rem 0.8rem;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #fff;
    font-size: 0.9rem;
    color: var(--ink-900, #0f172a);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.gh-fld input:focus,
.gh-fld select:focus,
.gh-fld textarea:focus {
    outline: none;
    border-color: var(--brand-500, #0ea5e9);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}
.gh-fld input:disabled,
.gh-fld select:disabled {
    background: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
}
.gh-fld__help { font-size: 0.75rem; color: #94a3b8; }
/* Toggles */
.gh-toggles {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.gh-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.88rem;
    color: #334155;
    margin: 0;
}
.gh-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.gh-toggle__switch {
    width: 40px; height: 22px;
    background: #cbd5e1;
    border-radius: 999px;
    position: relative;
    flex-shrink: 0;
    transition: background .2s ease;
}
.gh-toggle__switch::after {
    content: "";
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 3px; left: 3px;
    transition: transform .2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.gh-toggle input:checked + .gh-toggle__switch { background: var(--brand-600, #0284c7); }
.gh-toggle input:checked + .gh-toggle__switch::after { transform: translateX(18px); }
.gh-toggle__label { line-height: 1.3; }
/* Ações rodapé */
.gh-account__actions {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    padding: 0.5rem 0;
    flex-wrap: wrap;
}
.gh-account__actions--split { justify-content: space-between; }
.gh-account__actions--split > div { display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* Botões */
.gh-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .15s ease;
    line-height: 1;
}
.gh-btn--sm { padding: 0.4rem 0.75rem; font-size: 0.8rem; border-radius: 8px; }
.gh-btn--primary {
    background: var(--brand-600, #0284c7);
    color: #fff;
    border-color: var(--brand-600, #0284c7);
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.2);
}
.gh-btn--primary:hover { background: var(--brand-700, #0369a1); color: #fff; text-decoration: none; transform: translateY(-1px); }
.gh-btn--ghost {
    background: #fff;
    color: #334155;
    border-color: #e2e8f0;
}
.gh-btn--ghost:hover { background: #f8fafc; color: var(--brand-700, #0369a1); text-decoration: none; border-color: #cbd5e1; }
.gh-btn--danger {
    background: #fff;
    color: #b91c1c;
    border-color: #fecaca;
}
.gh-btn--danger:hover { background: #fee2e2; color: #991b1b; text-decoration: none; }
.gh-btn.is-disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; }
/* ---------- Users ---------- */
.gh-users { display: flex; flex-direction: column; gap: 0.55rem; padding: 0; }
.gh-panel__body.gh-users { padding: 0.6rem; }
.gh-user {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.8rem;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    background: #fff;
    transition: border-color .15s ease, background .15s ease;
}
.gh-user:hover { border-color: #e2e8f0; background: #fbfcfd; }
.gh-user__avatar {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--brand-500, #0ea5e9), var(--brand-700, #0369a1));
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.gh-user__avatar--muted { background: #f1f5f9; color: #94a3b8; }
.gh-user__info { flex: 1; min-width: 0; }
.gh-user__line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.gh-user__line--meta { font-size: 0.78rem; color: #94a3b8; margin-top: 0.15rem; }
.gh-user__line--meta i { color: #cbd5e1; }
.gh-user__email {
    font-size: 0.92rem;
    color: var(--ink-900, #0f172a);
    word-break: break-word;
}
.gh-user__actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.gh-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    background: #f1f5f9;
    color: #64748b;
}
.gh-tag--brand  { background: #eff6ff; color: #0369a1; }
.gh-tag--ok     { background: #ecfdf5; color: #047857; }
.gh-tag--warn   { background: #fffbeb; color: #b45309; }
.gh-tag--muted  { background: #f1f5f9; color: #94a3b8; }
.gh-user--invite { border-style: dashed; background: #fbfcfd; }
/* Convite - radios & permissões */
.gh-invite-form { display: flex; flex-direction: column; gap: 1rem; }
.gh-radio-group { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.gh-radio {
    flex: 1;
    min-width: 220px;
    display: block;
    padding: 0.85rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    cursor: pointer;
    margin: 0;
    transition: all .15s ease;
}
.gh-radio input { position: absolute; opacity: 0; pointer-events: none; }
.gh-radio__body { display: block; }
.gh-radio__body strong { display: block; font-size: 0.9rem; color: var(--ink-900, #0f172a); margin-bottom: 0.15rem; }
.gh-radio__body small { display: block; font-size: 0.78rem; color: #64748b; line-height: 1.4; }
.gh-radio:hover { border-color: #cbd5e1; }
.gh-radio:has(input:checked) {
    border-color: var(--brand-500, #0ea5e9);
    background: #f0f9ff;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.gh-perm-box {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.85rem;
    background: #fbfcfd;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}
.gh-perm {
    display: flex;
    gap: 0.65rem;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    cursor: pointer;
    margin: 0;
    transition: background .15s ease;
}
.gh-perm:hover { background: #fff; }
.gh-perm input { margin-top: 0.2rem; }
.gh-perm__body strong { display: block; font-size: 0.85rem; color: var(--ink-900, #0f172a); }
.gh-perm__body small { display: block; font-size: 0.75rem; color: #64748b; }
.gh-inline-form { display: inline-flex; gap: 0.4rem; }
/* ---------- Contact picker ---------- */
.gh-panel--pick { background: #fbfcfd; }
.gh-pick-form {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.9rem 1.2rem;
    flex-wrap: wrap;
}
.gh-pick-form__label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
    margin: 0;
    flex-shrink: 0;
}
.gh-pick-form__ctrl {
    flex: 1;
    display: flex;
    gap: 0.5rem;
    min-width: 280px;
}
.gh-pick-form__ctrl select {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    font-size: 0.88rem;
}
/* ---------- Emails log ---------- */
.gh-emails-wrap { border-radius: 10px; overflow: hidden; }
.gh-emails { width: 100%; margin: 0; }
.gh-emails thead th {
    background: #f8fafc;
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
}
.gh-emails tbody tr {
    cursor: pointer;
    transition: background .15s ease;
    border-bottom: 1px solid #f1f5f9;
}
.gh-emails tbody tr:hover { background: #f8fafc; }
.gh-emails tbody td { padding: 0.85rem 1rem; vertical-align: middle; }
.gh-emails__date-v { font-size: 0.82rem; color: #64748b; display: inline-flex; align-items: center; gap: 0.4rem; }
.gh-emails__date-v i { color: #cbd5e1; }
.gh-emails__subj-line { display: flex; align-items: center; gap: 0.6rem; }
.gh-emails__icon {
    width: 32px; height: 32px;
    background: #eff6ff;
    color: var(--brand-600, #0284c7);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.gh-emails__title {
    font-weight: 500;
    color: var(--ink-900, #0f172a);
    font-size: 0.9rem;
}
.gh-emails__attach {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.45rem;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
}
/* ============================================================
   SEÇÃO 49 — BLOG & KB & DOWNLOADS
   ============================================================ */
.gh-blog, .gh-kb, .gh-dl { display: flex; flex-direction: column; gap: 1.75rem; }
.gh-blog__head, .gh-kb__hero, .gh-dl__hero {
    text-align: center;
    padding: 2rem 1rem 1.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f0f9ff 100%);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 18px;
    position: relative;
    overflow: hidden;
}
.gh-blog__head::before, .gh-kb__hero::before, .gh-dl__hero::before {
    content: "";
    position: absolute;
    top: -50%; left: 50%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.08) 0%, transparent 60%);
    transform: translateX(-50%);
    pointer-events: none;
}
.gh-blog__eyebrow, .gh-kb__eyebrow, .gh-dl__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.85rem;
    background: #fff;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    color: var(--brand-700, #0369a1);
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.85rem;
    position: relative;
}
.gh-blog__title, .gh-kb__title, .gh-dl__title {
    margin: 0 0 0.55rem;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink-900, #0f172a);
    position: relative;
}
.gh-blog__lede, .gh-kb__lede, .gh-dl__lede {
    max-width: 620px;
    margin: 0 auto;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.5;
    position: relative;
}
/* Busca KB / Downloads */
.gh-kb__search, .gh-dl__search {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 620px;
    margin: 1.4rem auto 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.4rem 0.4rem 0.4rem 1rem;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
}
.gh-kb__search > i, .gh-dl__search > i {
    color: #94a3b8;
    font-size: 0.95rem;
    margin-right: 0.5rem;
}
.gh-kb__search input, .gh-dl__search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9rem;
    padding: 0.5rem 0;
    color: var(--ink-900, #0f172a);
}
.gh-kb__search button, .gh-dl__search button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    background: var(--brand-600, #0284c7);
    color: #fff;
    border: none;
    border-radius: 9px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background .15s ease;
}
.gh-kb__search button:hover, .gh-dl__search button:hover { background: var(--brand-700, #0369a1); }
.gh-blog__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}
.gh-post {
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 14px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.gh-post:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    border-color: #cbd5e1;
}
.gh-post__body { padding: 1.3rem 1.4rem; }
.gh-post__meta {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.7rem;
}
.gh-post__date {
    font-size: 0.75rem;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.gh-post__date i { color: #cbd5e1; }
.gh-post__tag {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    background: #eff6ff;
    color: var(--brand-700, #0369a1);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
}
.gh-post__title {
    margin: 0 0 0.55rem;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.gh-post__title a {
    color: var(--ink-900, #0f172a);
    text-decoration: none;
    transition: color .15s ease;
}
.gh-post__title a:hover { color: var(--brand-700, #0369a1); text-decoration: none; }
.gh-post__excerpt {
    color: #475569;
    font-size: 0.88rem;
    line-height: 1.55;
    margin-bottom: 0.85rem;
}
.gh-post__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.gh-post__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--brand-700, #0369a1);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
}
.gh-post__link:hover { gap: 0.55rem; text-decoration: none; color: var(--brand-700, #0369a1); }
.gh-post__edit {
    font-size: 0.78rem;
    color: #94a3b8;
    text-decoration: none;
}
.gh-blog__pagination {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
}
.gh-blog__page {
    min-width: 38px;
    height: 38px;
    padding: 0 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    color: #475569;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.85rem;
}
.gh-blog__page:hover { background: #f8fafc; color: var(--brand-700, #0369a1); text-decoration: none; }
.gh-blog__page.is-active { background: var(--brand-600, #0284c7); color: #fff; border-color: var(--brand-600, #0284c7); }
.gh-blog__page.is-disabled { opacity: 0.4; pointer-events: none; }
.gh-blog__empty {
    text-align: center;
    padding: 3rem 1rem;
    background: #fff;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    color: #64748b;
}
.gh-blog__empty i { font-size: 2.5rem; color: #cbd5e1; margin-bottom: 0.6rem; display: block; }
/* KB */
.gh-kb__section-head { margin-bottom: 0.9rem; }
.gh-kb__section-head h2 {
    margin: 0 0 0.2rem;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink-900, #0f172a);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.gh-kb__section-head p { margin: 0; font-size: 0.85rem; color: #64748b; }
.gh-kb__cats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0.85rem;
}
.gh-kb-cat {
    display: flex;
    align-items: flex-start;
    gap: 0.95rem;
    padding: 1.1rem 1.2rem;
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all .18s ease;
    position: relative;
}
.gh-kb-cat:hover {
    transform: translateY(-2px);
    border-color: var(--brand-500, #0ea5e9);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    text-decoration: none; color: inherit;
}
.gh-kb-cat__icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: #eff6ff;
    color: var(--brand-600, #0284c7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.gh-kb-cat__body { flex: 1; }
.gh-kb-cat__title {
    margin: 0 0 0.2rem;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--ink-900, #0f172a);
}
.gh-kb-cat__desc {
    margin: 0;
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.45;
}
.gh-kb-cat__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    flex-shrink: 0;
}
.gh-kb-cat__count {
    font-size: 0.72rem;
    padding: 0.2rem 0.55rem;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 999px;
    font-weight: 600;
}
.gh-kb-cat__arrow { color: #cbd5e1; transition: color .15s ease; }
.gh-kb-cat:hover .gh-kb-cat__arrow { color: var(--brand-600, #0284c7); }
.gh-kb__articles { display: flex; flex-direction: column; gap: 0.45rem; }
.gh-kb-art {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 1.15rem;
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: all .15s ease;
}
.gh-kb-art:hover { border-color: var(--brand-500, #0ea5e9); background: #fbfcfd; text-decoration: none; color: inherit; }
.gh-kb-art__num {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.82rem;
    color: #cbd5e1;
    font-weight: 700;
    flex-shrink: 0;
    min-width: 24px;
}
.gh-kb-art__body { flex: 1; min-width: 0; }
.gh-kb-art__title {
    margin: 0 0 0.2rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink-900, #0f172a);
}
.gh-kb-art__excerpt {
    margin: 0;
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.gh-kb-art__arrow { color: #cbd5e1; flex-shrink: 0; }
.gh-kb-art:hover .gh-kb-art__arrow { color: var(--brand-600, #0284c7); }
/* Downloads — plugin cards */
.gh-dl__section-head { margin-bottom: 0.9rem; }
.gh-dl__section-head h2 {
    margin: 0 0 0.2rem;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink-900, #0f172a);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.gh-dl__section-head p { margin: 0; font-size: 0.85rem; color: #64748b; }
.gh-dl__cats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.75rem;
}
.gh-dl-cat {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1.1rem;
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 11px;
    text-decoration: none;
    color: inherit;
    transition: all .15s ease;
}
.gh-dl-cat:hover { border-color: var(--brand-500, #0ea5e9); color: inherit; text-decoration: none; }
.gh-dl-cat__icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: var(--brand-700, #0369a1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.gh-dl-cat__body { flex: 1; min-width: 0; }
.gh-dl-cat__title { margin: 0 0 0.15rem; font-size: 0.92rem; font-weight: 600; color: var(--ink-900, #0f172a); }
.gh-dl-cat__desc { margin: 0; font-size: 0.78rem; color: #64748b; }
.gh-dl-cat__meta {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
    color: #94a3b8;
    font-size: 0.8rem;
}
.gh-dl-cat__badge {
    padding: 0.2rem 0.55rem;
    background: #f1f5f9;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #475569;
}
.gh-dl__plugins {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1rem;
}
.gh-plugin {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 14px;
    transition: all .2s ease;
    position: relative;
    overflow: hidden;
}
.gh-plugin::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-500, #0ea5e9), var(--brand-400, #38bdf8));
    opacity: 0;
    transition: opacity .2s ease;
}
.gh-plugin:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
    border-color: #cbd5e1;
}
.gh-plugin:hover::before { opacity: 1; }
.gh-plugin__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.85rem;
}
.gh-plugin__icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    box-shadow: 0 6px 14px rgba(14, 165, 233, 0.3);
}
.gh-plugin__lock, .gh-plugin__free {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
}
.gh-plugin__lock { background: #fef2f2; color: #b91c1c; }
.gh-plugin__free { background: #ecfdf5; color: #047857; }
.gh-plugin__title {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink-900, #0f172a);
    letter-spacing: -0.01em;
}
.gh-plugin__desc {
    margin: 0 0 0.9rem;
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.5;
    flex: 1;
}
.gh-plugin__specs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
    flex-wrap: wrap;
}
.gh-plugin__spec {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    background: #f1f5f9;
    color: #475569;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}
.gh-plugin__dl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.65rem 1rem;
    background: var(--brand-600, #0284c7);
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
    transition: background .15s ease, transform .15s ease;
}
.gh-plugin__dl:hover {
    background: var(--brand-700, #0369a1);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}
/* ============================================================
   SEÇÃO 50 — ÓRION (Assistente IA Global Host) · v2 "Big Tech"
   Dark premium. Glass surface, brand violeta Global Host,
   tipografia apertada. Sem blobs, sem arco-íris, sem emoji animado.
   Injetado via /includes/hooks/gh_orion_init.php só para logados.
   ============================================================ */
:root {
    --orion-bg:         #0B0D12;
    --orion-surface:    #12151C;
    --orion-surface-2:  #1A1E27;
    --orion-surface-3:  #222731;
    --orion-border:     #262B36;
    --orion-border-2:   #1A1E27;
    --orion-ink:        #E7EAF0;
    --orion-ink-2:      #B7BCC8;
    --orion-mute:       #7A8192;
    --orion-brand:      #8B5CF6;
    --orion-brand-2:    #6D28D9;
    --orion-accent:     #22D3EE;
    --orion-success:    #22C55E;
    --orion-radius:     20px;
    --orion-shadow:     0 40px 80px -20px rgba(0,0,0,0.55),
                        0 16px 32px -12px rgba(0,0,0,0.45),
                        0 0 0 1px rgba(255,255,255,0.04) inset;
    /* compat com refs antigas */
    --orion-brand-a:    #8B5CF6;
    --orion-brand-b:    #6D28D9;
    --orion-bg-soft:    #1A1E27;
}
/* ============== FAB (botão flutuante) ============== */
.orion-fab {
    position: fixed;
    bottom: 1.5rem; right: 1.5rem;
    z-index: 9998;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 1.15rem 0.55rem 0.55rem;
    background: linear-gradient(180deg, #1a1d26 0%, #0d1016 100%);
    color: var(--orion-ink);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow: 0 20px 40px -12px rgba(139, 92, 246, 0.45),
                0 8px 16px -8px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(139, 92, 246, 0.22) inset,
                0 1px 0 rgba(255,255,255,0.07) inset;
    transition: transform .25s cubic-bezier(.16,1,.3,1),
                box-shadow .25s ease,
                opacity .2s ease;
}
.orion-fab::before {
    content: "";
    position: absolute;
    inset: 1px 1px auto 1px;
    height: 55%;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.08), transparent);
    pointer-events: none;
}
.orion-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 48px -12px rgba(139, 92, 246, 0.6),
                0 10px 20px -8px rgba(0, 0, 0, 0.55),
                0 0 0 1px rgba(139, 92, 246, 0.45) inset,
                0 1px 0 rgba(255,255,255,0.1) inset;
}
.orion-fab:active { transform: translateY(0); }
.orion-fab.is-hidden { opacity: 0; pointer-events: none; transform: scale(0.9); }
.orion-fab__icon {
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center; justify-content: center;
    position: relative;
    flex-shrink: 0;
}
.orion-fab__icon svg {
    width: 100%; height: 100%;
    display: block;
    filter: drop-shadow(0 2px 6px rgba(139, 92, 246, 0.55));
}
.orion-fab__label { line-height: 1; }
.orion-fab__pulse {
    position: absolute;
    top: 6px; right: 6px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--orion-success);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
    animation: orionPulse 2.2s ease-out infinite;
}
@keyframes orionPulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
/* ============== PAINEL ============== */
.orion-panel {
    position: fixed;
    bottom: 1.5rem; right: 1.5rem;
    z-index: 9999;
    width: 440px;
    max-width: calc(100vw - 2rem);
    height: 680px;
    max-height: calc(100vh - 3rem);
    background: var(--orion-surface);
    border: 1px solid var(--orion-border);
    border-radius: var(--orion-radius);
    box-shadow: var(--orion-shadow);
    color: var(--orion-ink);
    display: none;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(16px) scale(0.96);
    opacity: 0;
    transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .2s ease;
}
.orion-panel::before {
    /* aurora discreta no canto */
    content: "";
    position: absolute;
    top: -140px; right: -100px;
    width: 380px; height: 380px;
    background: radial-gradient(circle at center, rgba(139, 92, 246, 0.22), transparent 62%);
    pointer-events: none;
    filter: blur(24px);
    z-index: 0;
}
.orion-panel::after {
    content: "";
    position: absolute;
    bottom: -120px; left: -80px;
    width: 280px; height: 280px;
    background: radial-gradient(circle at center, rgba(34, 211, 238, 0.1), transparent 60%);
    pointer-events: none;
    filter: blur(30px);
    z-index: 0;
}
.orion-panel.is-open {
    display: flex;
    transform: translateY(0) scale(1);
    opacity: 1;
}
.orion-panel > * { position: relative; z-index: 1; }
/* ============== HEAD (tabs + actions) ============== */
.orion-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--orion-border);
    background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.orion-tabs {
    display: inline-flex;
    gap: 0.15rem;
    padding: 0.2rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--orion-border);
    border-radius: 10px;
}
.orion-tab {
    padding: 0.4rem 0.9rem;
    background: transparent;
    border: 0;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--orion-mute);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.orion-tab.is-active {
    background: var(--orion-surface-3);
    color: var(--orion-ink);
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.orion-tab:hover { color: var(--orion-ink); }
.orion-panel__actions { display: inline-flex; gap: 0.2rem; }
.orion-icon-btn {
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center; justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--orion-mute);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    font-size: 0.85rem;
}
.orion-icon-btn:hover {
    background: rgba(255,255,255,0.05);
    color: var(--orion-ink);
}
/* ============== VIEWS ============== */
.orion-view {
    display: none;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}
.orion-view.is-active { display: flex; }
/* ============== MENSAGENS ============== */
.orion-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 1rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    scroll-behavior: smooth;
}
.orion-messages::-webkit-scrollbar { width: 4px; }
.orion-messages::-webkit-scrollbar-thumb { background: var(--orion-surface-3); border-radius: 99px; }
.orion-messages::-webkit-scrollbar-track { background: transparent; }
/* ---- Welcome hero ---- */
.orion-welcome {
    text-align: center;
    padding: 1.5rem 0.5rem 0.5rem;
    margin: auto 0;
}
.orion-welcome__logo {
    width: 96px; height: 96px;
    margin: 0 auto 1rem;
    position: relative;
    display: inline-flex;
    align-items: center; justify-content: center;
    border-radius: 50%;
}
.orion-welcome__logo::before {
    /* Glow radial atrás do SVG — dá peso visual sem competir com o anel orbital */
    content: "";
    position: absolute;
    inset: -8%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
        rgba(139, 92, 246, 0.28) 0%,
        rgba(34, 211, 238, 0.12) 40%,
        transparent 70%);
    filter: blur(6px);
    z-index: 0;
    pointer-events: none;
}
.orion-welcome__logo svg {
    position: relative; z-index: 1;
    width: 100%; height: 100%;
    filter: drop-shadow(0 6px 18px rgba(139, 92, 246, 0.4));
}
.orion-welcome__title {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--orion-ink);
    margin: 0 0 0.4rem;
}
.orion-welcome__title span {
    display: inline;
    animation: none;
    transform: none;
}
.orion-welcome__sub {
    font-size: 0.85rem;
    color: var(--orion-mute);
    max-width: 340px;
    margin: 0 auto 1.25rem;
    line-height: 1.45;
    letter-spacing: -0.005em;
    text-wrap: balance;
}
.orion-quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.orion-quick__btn {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem 0.85rem;
    background: var(--orion-surface-2);
    border: 1px solid var(--orion-border);
    border-radius: 12px;
    color: var(--orion-ink);
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.005em;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.orion-quick__btn i {
    color: var(--orion-brand);
    width: 16px;
    text-align: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.orion-quick__btn:hover {
    background: var(--orion-surface-3);
    border-color: var(--orion-brand);
    transform: translateY(-1px);
}
/* ---- Bolhas ---- */
.orion-msg {
    display: flex;
    gap: 0.65rem;
    max-width: 90%;
    animation: orionMsgIn .3s cubic-bezier(.16,1,.3,1);
}
@keyframes orionMsgIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.orion-msg--user {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.orion-msg__avatar {
    width: 28px; height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: conic-gradient(from 180deg at 50% 50%,
        var(--orion-brand),
        var(--orion-accent),
        var(--orion-brand-2),
        var(--orion-brand));
    padding: 2px;
    position: relative;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
}
.orion-msg__avatar::after {
    content: "";
    position: absolute; inset: 2px;
    border-radius: 50%;
    background: var(--orion-surface);
}
.orion-msg__avatar svg {
    position: relative; z-index: 1;
    width: 100%; height: 100%;
    padding: 5px;
    color: var(--orion-ink);
}
.orion-msg--user .orion-msg__avatar {
    background: var(--orion-surface-3);
    border: 1px solid var(--orion-border);
    padding: 0;
    display: inline-flex;
    align-items: center; justify-content: center;
    color: var(--orion-ink);
    font-size: 0.72rem;
    font-weight: 700;
    box-shadow: none;
}
.orion-msg--user .orion-msg__avatar::after { display: none; }
.orion-msg__body {
    padding: 0.75rem 1rem;
    border-radius: 14px;
    font-size: 0.9rem;
    line-height: 1.55;
    letter-spacing: -0.005em;
    white-space: pre-wrap;
    word-break: break-word;
}
.orion-msg--assistant .orion-msg__body {
    background: var(--orion-surface-2);
    color: var(--orion-ink);
    border: 1px solid var(--orion-border);
    border-top-left-radius: 4px;
}
.orion-msg--user .orion-msg__body {
    background: linear-gradient(135deg, var(--orion-brand), var(--orion-brand-2));
    color: #fff;
    border-top-right-radius: 4px;
    box-shadow: 0 6px 16px -4px rgba(139, 92, 246, 0.5);
}
/* typing */
.orion-msg.is-typing .orion-msg__body {
    display: inline-flex;
    gap: 5px;
    padding: 0.95rem 1.1rem;
}
.orion-dot {
    width: 6px; height: 6px;
    background: var(--orion-mute);
    border-radius: 50%;
    animation: orionDot 1.2s infinite ease-in-out;
}
.orion-dot:nth-child(2) { animation-delay: .15s; }
.orion-dot:nth-child(3) { animation-delay: .3s; }
@keyframes orionDot {
    0%, 60%, 100% { transform: scale(0.8); opacity: 0.45; }
    30% { transform: scale(1.15); opacity: 1; }
}
/* ============== COMPOSE ============== */
.orion-compose {
    padding: 0.85rem 1rem 1rem;
    border-top: 1px solid var(--orion-border);
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.2));
}
.orion-compose__box {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.55rem 0.55rem 0.55rem 1rem;
    background: var(--orion-surface-2);
    border: 1px solid var(--orion-border);
    border-radius: 14px;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.orion-compose__box:focus-within {
    border-color: var(--orion-brand) !important;
    background: var(--orion-surface-3);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.35);
}
.orion-compose__box textarea,
#orionPanel .orion-compose__box textarea#orionInput {
    flex: 1;
    border: 0 !important;
    background: transparent !important;
    resize: none;
    outline: none !important;
    box-shadow: none !important;
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 1.5;
    letter-spacing: -0.005em;
    color: var(--orion-ink);
    max-height: 160px;
    padding: 0.35rem 0;
    min-height: 24px;
}
.orion-compose__box textarea:focus,
.orion-compose__box textarea:focus-visible,
#orionPanel .orion-compose__box textarea:focus,
#orionPanel .orion-compose__box textarea:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
    background: transparent !important;
}
.orion-compose__box textarea::placeholder { color: var(--orion-mute); opacity: 1; }
.orion-send {
    width: 34px; height: 34px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--orion-brand), var(--orion-brand-2));
    color: #fff;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.88rem;
    transition: transform .15s ease, opacity .15s ease, box-shadow .2s ease;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.45),
                0 0 0 1px rgba(255,255,255,0.08) inset;
}
.orion-send:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.6),
                0 0 0 1px rgba(255,255,255,0.12) inset;
}
.orion-send:disabled { opacity: 0.35; cursor: not-allowed; }
.orion-compose__disclaimer {
    margin: 0.6rem 0 0;
    font-size: 0.68rem;
    color: var(--orion-mute);
    text-align: center;
    letter-spacing: 0;
}
/* ============== HISTÓRICO ============== */
.orion-history {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.orion-history::-webkit-scrollbar { width: 4px; }
.orion-history::-webkit-scrollbar-thumb { background: var(--orion-surface-3); border-radius: 99px; }
.orion-history__empty {
    margin: auto;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--orion-mute);
    font-size: 0.88rem;
}
.orion-history__empty i {
    font-size: 1.75rem;
    margin-bottom: 0.6rem;
    display: block;
    color: var(--orion-surface-3);
}
.orion-hist-item {
    position: relative;
    padding: 0.75rem 0.9rem;
    padding-right: 2.3rem;
    border: 1px solid var(--orion-border);
    border-radius: 12px;
    background: var(--orion-surface-2);
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
    cursor: pointer;
}
.orion-hist-item:hover {
    border-color: var(--orion-brand);
    background: var(--orion-surface-3);
    transform: translateY(-1px);
}
.orion-hist-item:hover .orion-hist-item__delete { opacity: 1; }
.orion-hist-item--user {
    background: linear-gradient(135deg, rgba(139,92,246,0.14), rgba(139,92,246,0.04));
    border-color: rgba(139,92,246,0.28);
}
.orion-hist-item__delete {
    position: absolute;
    top: 0.6rem; right: 0.55rem;
    width: 26px; height: 26px;
    display: inline-flex;
    align-items: center; justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: var(--orion-mute);
    cursor: pointer;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.orion-hist-item__delete:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}
.orion-hist-item__meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--orion-mute);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
}
.orion-hist-item__meta strong {
    color: var(--orion-ink);
    font-weight: 700;
    letter-spacing: -0.005em;
    text-transform: none;
    font-size: 0.78rem;
}
.orion-hist-item__text {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--orion-ink-2);
    letter-spacing: -0.005em;
    white-space: pre-wrap;
    word-break: break-word;
}
/* ============== AÇÕES EXECUTIVAS INLINE ============== */
.orion-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.2rem 0 0.1rem 2.6rem; /* alinha com a bolha do assistant */
    padding: 0;
}
.orion-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.95rem;
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.16), rgba(139, 92, 246, 0.08));
    color: var(--orion-ink);
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 2px 6px rgba(139, 92, 246, 0.12);
}
.orion-action-btn i { font-size: 0.85em; opacity: 0.9; }
.orion-action-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.24), rgba(139, 92, 246, 0.12));
    border-color: rgba(139, 92, 246, 0.55);
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 6px 14px rgba(139, 92, 246, 0.22);
}
.orion-action-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.orion-action-btn.is-done {
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.16), rgba(34, 197, 94, 0.08));
    border-color: rgba(34, 197, 94, 0.4);
    color: #22c55e;
}
.orion-action-result {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.55rem 0.85rem;
    border-radius: 12px;
    font-size: 0.83rem;
    line-height: 1.4;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--orion-surface-3);
    color: var(--orion-ink-2);
}
.orion-action-result.is-success {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.28);
    color: #bbf7d0;
}
.orion-action-result.is-error {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.28);
    color: #fca5a5;
}
.orion-action-result i { flex-shrink: 0; font-size: 0.9em; }
.orion-action-link {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: inherit;
    font-weight: 600;
    text-decoration: none;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    font-size: 0.8rem;
    transition: background .15s ease;
}
.orion-action-link:hover { background: rgba(255,255,255,0.14); color: inherit; }
/* ============== BADGES (FAB + TAB) ============== */
.orion-fab__badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px #0B0D12, 0 4px 10px rgba(239, 68, 68, 0.45);
    animation: orionBadgePulse 2.4s ease-in-out infinite;
}
@keyframes orionBadgePulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}
.orion-tab__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 0.35rem;
    border-radius: 999px;
    background: var(--orion-surface-3);
    color: var(--orion-ink-2);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0;
    vertical-align: 1px;
}
.orion-tab__badge.is-critical {
    background: #ef4444;
    color: #fff;
}
/* ============== VIEW: ALERTAS ============== */
.orion-alerts {
    flex: 1;
    padding: 1rem 0.9rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.orion-alerts::-webkit-scrollbar { width: 4px; }
.orion-alerts::-webkit-scrollbar-thumb { background: var(--orion-surface-3); border-radius: 99px; }
.orion-alerts__empty {
    margin: auto;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--orion-mute);
    font-size: 0.88rem;
    line-height: 1.55;
}
.orion-alerts__empty i {
    font-size: 1.75rem;
    margin-bottom: 0.6rem;
    display: block;
    color: var(--orion-surface-3);
}
.orion-alerts__empty strong {
    color: var(--orion-ink);
    font-size: 0.95rem;
    letter-spacing: -0.015em;
}
.orion-alerts__empty span {
    font-size: 0.83rem;
    line-height: 1.5;
    max-width: 260px;
}
.orion-alert {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    border-radius: 14px;
    background: var(--orion-surface-2);
    border: 1px solid var(--orion-surface-3);
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.orion-alert:hover {
    transform: translateY(-1px);
    border-color: rgba(139, 92, 246, 0.3);
}
.orion-alert__icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--orion-surface-3);
    color: var(--orion-ink-2);
    font-size: 1.05rem;
}
.orion-alert__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}
.orion-alert__body strong {
    font-size: 0.92rem;
    line-height: 1.35;
    color: var(--orion-ink);
    letter-spacing: -0.015em;
}
.orion-alert__body span {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--orion-ink-2);
}
.orion-alert__cta {
    margin-top: 0.35rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.14);
    color: #c4b5fd;
    border: 1px solid rgba(139, 92, 246, 0.3);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, transform .12s ease;
}
.orion-alert__cta:hover {
    background: rgba(139, 92, 246, 0.24);
    color: #ddd6fe;
    transform: translateX(2px);
}
.orion-alert--critical {
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.02));
    border-color: rgba(239, 68, 68, 0.3);
}
.orion-alert--critical .orion-alert__icon {
    background: rgba(239, 68, 68, 0.16);
    color: #fca5a5;
}
.orion-alert--critical .orion-alert__cta {
    background: rgba(239, 68, 68, 0.16);
    color: #fecaca;
    border-color: rgba(239, 68, 68, 0.35);
}
.orion-alert--critical .orion-alert__cta:hover { background: rgba(239, 68, 68, 0.26); }
.orion-alert--warning {
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.07), rgba(245, 158, 11, 0.02));
    border-color: rgba(245, 158, 11, 0.28);
}
.orion-alert--warning .orion-alert__icon {
    background: rgba(245, 158, 11, 0.14);
    color: #fcd34d;
}
.orion-alert--info .orion-alert__icon {
    background: rgba(34, 211, 238, 0.1);
    color: #67e8f9;
}
/* ============== CARD NO DASHBOARD (fora do widget) ============== */
.gh-orion-alert-card {
    background: linear-gradient(135deg, #fff7ed, #fef2f2);
    border: 1px solid #fecaca;
    border-left: 4px solid #ef4444;
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    margin: 0 0 1.25rem;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.08);
}
.gh-orion-alert-card__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    margin-bottom: 0.85rem;
}
.gh-orion-alert-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #b91c1c;
    text-transform: uppercase;
}
.gh-orion-alert-card__badge i { font-size: 0.9em; }
.gh-orion-alert-card__sub {
    font-size: 0.82rem;
    color: #64748b;
}
.gh-orion-alert-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.gh-orion-alert-card__item {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.65rem 0.8rem;
    background: #fff;
    border: 1px solid #fecaca;
    border-radius: 10px;
}
.gh-orion-alert-card__item i {
    width: 28px; height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #fef2f2;
    color: #ef4444;
    font-size: 0.88rem;
}
.gh-orion-alert-card__item-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.gh-orion-alert-card__item-body strong {
    font-size: 0.9rem;
    color: #0f172a;
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.gh-orion-alert-card__item-body span {
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.4;
}
.gh-orion-alert-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    background: #ef4444;
    color: #fff;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease;
    white-space: nowrap;
}
.gh-orion-alert-card__cta:hover { background: #dc2626; color: #fff; }
.gh-orion-alert-card__more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.7rem;
    padding-top: 0.65rem;
    border-top: 1px dashed rgba(239, 68, 68, 0.25);
    font-size: 0.82rem;
    color: #64748b;
}
.gh-orion-alert-card__open {
    padding: 0.35rem 0.85rem;
    background: transparent;
    border: 1px solid #ef4444;
    color: #ef4444;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.gh-orion-alert-card__open:hover { background: #ef4444; color: #fff; }
@media (max-width: 640px) {
    .gh-orion-alert-card__item {
        grid-template-columns: 28px 1fr;
    }
    .gh-orion-alert-card__cta {
        grid-column: 1 / -1;
        justify-content: center;
    }
}
/* ============== SEO DOCTOR ============== */
/* Card promocional de ferramenta (na mensagem de boas-vindas) */
.orion-tool-card {
    position: relative;
    margin-top: 1rem;
    padding: 0.75rem 0.8rem;
    border-radius: 14px;
    background: linear-gradient(135deg,
        rgba(139, 92, 246, 0.14) 0%,
        rgba(34, 211, 238, 0.08) 100%);
    border: 1px solid rgba(139, 92, 246, 0.28);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    overflow: hidden;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.orion-tool-card::before {
    /* brilho sutil de fundo, evoca "novidade" sem poluir */
    content: '';
    position: absolute;
    inset: -40% -20% auto auto;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.22) 0%, transparent 65%);
    pointer-events: none;
    filter: blur(4px);
}
.orion-tool-card:hover {
    border-color: rgba(139, 92, 246, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -12px rgba(139, 92, 246, 0.45);
}
.orion-tool-card__icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--orion-brand) 0%, var(--orion-brand-2) 100%);
    color: #fff;
    box-shadow: 0 6px 14px -6px rgba(139, 92, 246, 0.55);
    position: relative;
    z-index: 1;
}
.orion-tool-card__icon i { font-size: 1rem; }
.orion-tool-card__body {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    z-index: 1;
}
.orion-tool-card__head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.1rem;
}
.orion-tool-card__head h4 {
    margin: 0;
    color: var(--orion-ink);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.orion-tool-card__badge {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.14rem 0.4rem;
    border-radius: 99px;
    background: var(--orion-accent);
    color: #0B0D12;
    flex: 0 0 auto;
}
.orion-tool-card__body p {
    margin: 0;
    color: var(--orion-ink-2);
    font-size: 0.78rem;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.orion-tool-card__cta {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--orion-brand) 0%, var(--orion-brand-2) 100%);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 16px -6px rgba(139, 92, 246, 0.55);
    transition: filter .15s ease, transform .15s ease;
    position: relative;
    z-index: 1;
}
.orion-tool-card__cta:hover {
    filter: brightness(1.15);
    transform: translateX(2px);
}
.orion-tool-card__cta i { font-size: 0.8rem; }
/* Formulário de entrada do SEO (antes do scan) */
.orion-seo-prompt {
    margin-top: 0.75rem;
    padding: 1.1rem 1rem 1rem;
    background: var(--orion-surface-2);
    border: 1px solid var(--orion-border);
    border-radius: 14px;
    text-align: center;
}
.orion-seo-prompt__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 0.6rem;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--orion-brand) 0%, var(--orion-brand-2) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 10px 20px -8px rgba(139, 92, 246, 0.6);
}
.orion-seo-prompt h4 {
    margin: 0 0 0.25rem;
    color: var(--orion-ink);
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.orion-seo-prompt p {
    margin: 0 0 0.75rem;
    color: var(--orion-ink-2);
    font-size: 0.8rem;
    line-height: 1.45;
}
.orion-seo-prompt p code {
    padding: 0.08rem 0.35rem;
    border-radius: 5px;
    background: var(--orion-surface-3);
    color: var(--orion-accent);
    font-size: 0.76rem;
    font-family: 'JetBrains Mono', monospace;
}
.orion-seo-prompt__form {
    display: flex;
    gap: 0.45rem;
    max-width: 420px;
    margin: 0 auto 0.5rem;
}
.orion-seo-prompt__form input {
    flex: 1 1 auto;
    min-width: 0;
    appearance: none;
    -webkit-appearance: none;
    background: var(--orion-bg);
    border: 1px solid var(--orion-border);
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
    color: var(--orion-ink);
    font-size: 0.88rem;
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.orion-seo-prompt__form input:focus {
    outline: none;
    border-color: var(--orion-brand);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}
.orion-seo-prompt__form button {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: linear-gradient(135deg, var(--orion-brand) 0%, var(--orion-brand-2) 100%);
    color: #fff;
    border-radius: 10px;
    padding: 0 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    transition: filter .15s ease, transform .15s ease;
}
.orion-seo-prompt__form button:hover:not(:disabled) {
    filter: brightness(1.1);
    transform: translateY(-1px);
}
.orion-seo-prompt__form button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.orion-seo-prompt > small {
    display: block;
    color: var(--orion-mute);
    font-size: 0.72rem;
}
/* Estado de loading durante scan */
.orion-seo-loading {
    margin-top: 0.75rem;
    padding: 1.3rem 1rem;
    background: var(--orion-surface-2);
    border: 1px solid var(--orion-border);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}
.orion-seo-loading__spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid var(--orion-surface-3);
    border-top-color: var(--orion-brand);
    animation: orionSeoSpin 0.8s linear infinite;
    margin-bottom: 0.3rem;
}
@keyframes orionSeoSpin {
    to { transform: rotate(360deg); }
}
.orion-seo-loading strong {
    color: var(--orion-ink);
    font-size: 0.9rem;
    font-weight: 700;
}
.orion-seo-loading span {
    color: var(--orion-ink-2);
    font-size: 0.78rem;
}
/* Relatório completo */
.orion-seo-report {
    margin-top: 0.75rem;
    background: var(--orion-surface-2);
    border: 1px solid var(--orion-border);
    border-radius: 14px;
    overflow: hidden;
}
.orion-seo-report__head {
    padding: 1rem;
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 1rem;
    align-items: center;
    background: linear-gradient(135deg,
        rgba(139, 92, 246, 0.08) 0%,
        rgba(34, 211, 238, 0.04) 100%);
    border-bottom: 1px solid var(--orion-border);
}
.orion-seo-report__score {
    position: relative;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.orion-seo-report__score svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.orion-seo-report__score > span {
    position: relative;
    font-size: 2rem;
    font-weight: 800;
    color: var(--orion-ink);
    letter-spacing: -0.03em;
    line-height: 1;
    z-index: 1;
    /* Cor herdada via variável --sc (setada inline pelo JS) para acompanhar o anel */
    color: var(--sc, var(--orion-ink));
}
.orion-seo-report__meta {
    min-width: 0;
}
.orion-seo-report__meta h4 {
    margin: 0 0 0.25rem;
    color: var(--orion-ink);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    word-break: break-all;
}
.orion-seo-report__label {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    border-radius: 99px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.35rem;
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.3);
}
.orion-seo-report__meta p {
    margin: 0;
    color: var(--orion-ink-2);
    font-size: 0.76rem;
    line-height: 1.45;
}
@media (max-width: 520px) {
    .orion-seo-report__head {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
    .orion-seo-report__score { margin: 0 auto; }
}
/* Categorias colapsáveis */
.orion-seo-cat {
    border-top: 1px solid var(--orion-border);
}
.orion-seo-cat > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    user-select: none;
    transition: background .15s ease;
}
.orion-seo-cat > summary::-webkit-details-marker { display: none; }
.orion-seo-cat > summary:hover { background: var(--orion-surface-3); }
.orion-seo-cat__name {
    color: var(--orion-ink);
    font-size: 0.88rem;
    font-weight: 600;
    flex: 1 1 auto;
}
.orion-seo-cat__score {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.orion-seo-cat > summary i.fa-chevron-down {
    transition: transform .2s ease;
    color: var(--orion-mute);
    font-size: 0.75rem;
}
.orion-seo-cat[open] > summary i.fa-chevron-down {
    transform: rotate(180deg);
}
/* Findings dentro da categoria */
.orion-seo-findings {
    list-style: none;
    padding: 0 1rem 0.9rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.orion-seo-finding {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 0.55rem;
    padding: 0.6rem 0.7rem;
    background: var(--orion-bg);
    border: 1px solid var(--orion-border);
    border-radius: 10px;
    border-left-width: 3px;
}
.orion-seo-finding > i {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    margin-top: 1px;
}
.orion-seo-finding > div { min-width: 0; }
.orion-seo-finding strong {
    display: block;
    color: var(--orion-ink);
    font-size: 0.83rem;
    font-weight: 600;
    margin-bottom: 0.12rem;
    letter-spacing: -0.005em;
}
.orion-seo-finding__detail {
    display: block;
    color: var(--orion-ink-2);
    font-size: 0.76rem;
    line-height: 1.45;
    word-break: break-word;
}
.orion-seo-finding__rec {
    display: block;
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--orion-border);
    color: var(--orion-ink-2);
    font-size: 0.76rem;
    line-height: 1.45;
}
.orion-seo-finding__rec i {
    color: var(--orion-accent);
    margin-right: 0.35rem;
}
/* Variantes por severidade (BEM modifier) */
.orion-seo-finding--ok       { border-left-color: #22C55E; }
.orion-seo-finding--info     { border-left-color: #22D3EE; }
.orion-seo-finding--warning  { border-left-color: #F59E0B; }
.orion-seo-finding--critical { border-left-color: #EF4444; }
.orion-seo-finding--ok       > i { color: #22C55E; }
.orion-seo-finding--info     > i { color: #22D3EE; }
.orion-seo-finding--warning  > i { color: #F59E0B; }
.orion-seo-finding--critical > i { color: #EF4444; }
/* Bloco consultivo (conselho adaptado ao score, soft-sell) */
.orion-seo-report__advice {
    padding: 0.9rem 1rem 1rem;
    background: linear-gradient(135deg,
        rgba(139, 92, 246, 0.08) 0%,
        rgba(34, 211, 238, 0.04) 100%);
    border-top: 1px solid var(--orion-border);
}
.orion-seo-report__advice-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.5rem;
}
.orion-seo-report__advice-head i {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--orion-brand) 0%, var(--orion-brand-2) 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    flex-shrink: 0;
}
.orion-seo-report__advice-head strong {
    color: var(--orion-ink);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.orion-seo-report__advice p {
    margin: 0 0 0.5rem;
    color: var(--orion-ink-2);
    font-size: 0.8rem;
    line-height: 1.5;
}
.orion-seo-report__advice-note {
    color: var(--orion-mute) !important;
    font-size: 0.76rem !important;
    font-style: italic;
    margin-bottom: 0 !important;
}
/* Rodapé de ações do relatório (3 CTAs agora) */
.orion-seo-report__foot {
    padding: 0.75rem 1rem;
    background: var(--orion-surface);
    border-top: 1px solid var(--orion-border);
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.orion-seo-report__foot button {
    appearance: none;
    -webkit-appearance: none;
    flex: 1 1 160px;
    min-width: 150px;
    border-radius: 10px;
    padding: 0.6rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    line-height: 1.2;
    text-align: center;
    transition: transform .15s ease, filter .15s ease, background .15s ease, border-color .15s ease;
}
.orion-seo-report__again {
    background: transparent;
    color: var(--orion-ink-2);
    border: 1px solid var(--orion-border);
}
.orion-seo-report__again:hover {
    background: var(--orion-surface-3);
    color: var(--orion-ink);
}
.orion-seo-report__discuss {
    background: var(--orion-surface-3);
    color: var(--orion-ink);
    border: 1px solid rgba(34, 211, 238, 0.35);
}
.orion-seo-report__discuss:hover {
    background: rgba(34, 211, 238, 0.12);
    border-color: var(--orion-accent);
    transform: translateY(-1px);
}
.orion-seo-report__ticket {
    background: linear-gradient(135deg, var(--orion-brand) 0%, var(--orion-brand-2) 100%);
    color: #fff;
    border: none;
}
.orion-seo-report__ticket:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}
@media (max-width: 520px) {
    .orion-seo-report__foot button {
        flex: 1 1 100%;
    }
}
/* Hint textual em ações geradas pelo SEO (abre ticket) */
.orion-action-hint {
    color: var(--orion-mute);
    font-size: 0.74rem;
    line-height: 1.45;
    margin-top: 0.45rem;
    padding-left: 0.1rem;
    font-style: italic;
}
/* =========================================
   Fix scroll travado quando expande <details>
   ========================================= */
/* Força os cards grandes a não encolherem no container flex — isso garante
   que o conteúdo inteiro exista e que o .orion-messages possa rolar até o fim. */
.orion-messages > .orion-seo-report,
.orion-messages > .orion-seo-prompt,
.orion-messages > .orion-seo-loading,
.orion-messages > .orion-welcome > .orion-tool-card {
    flex-shrink: 0;
}
/* Details internas do report: garante visibilidade ao expandir e que o scroll
   do container pai (.orion-messages) funcione sem capturar o evento. */
.orion-seo-cat {
    overflow: visible;
}
.orion-seo-cat[open] .orion-seo-findings {
    overflow: visible;
}
/* iOS: momentum scroll */
.orion-messages {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
/* ============== RESPONSIVO ============== */
@media (max-width: 520px) {
    .orion-fab {
        bottom: 1rem; right: 1rem;
        padding: 0.5rem 1rem 0.5rem 0.5rem;
        font-size: 0.85rem;
    }
    .orion-panel {
        bottom: 0; right: 0; left: 0;
        width: 100%;
        max-width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 18px 18px 0 0;
    }
}
/* ================================================================
   51. SHELL hPanel — Sidebar vertical + Topbar slim + Auth shell + CmdK
   ---------------------------------------------------------------
   Aplicado em páginas logadas (gh-shell) e na tela de login (gh-auth-shell).
   Inspirado no hPanel da Hostinger. Mobile vira drawer com backdrop.
   ================================================================ */
:root {
    --gh-sh-bg:        #f5f7fb;
    --gh-sh-surface:   #ffffff;
    --gh-sh-border:    #e6eaf2;
    --gh-sh-ink:       #0f172a;
    --gh-sh-ink-2:     #475569;
    --gh-sh-mute:      #94a3b8;
    --gh-sh-brand:     #673ab7;
    --gh-sh-brand-2:   #00bcd4;
    --gh-sh-brand-ink: #ffffff;
    --gh-sh-hover:     #f1f3f9;
    --gh-sh-active:    rgba(103, 58, 183, 0.08);
    --gh-sh-active-ink:#673ab7;
    --gh-sh-shadow:    0 4px 16px rgba(15, 23, 42, 0.06);
    --gh-sh-shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.18);
    --gh-sh-radius:    14px;
    --gh-sh-w-open:    260px;
    --gh-sh-w-closed:  72px;
    --gh-sh-topbar-h:  62px;
}
/* ----- Reset do layout geral (páginas logadas usam shell próprio) ----- */
body.gh-shell-on {
    background: var(--gh-sh-bg);
    overflow-x: hidden;
}
body.gh-shell-on > header.header,
body.gh-shell-on > nav.navbar,
body.gh-shell-on > .secondary-navbar,
body.gh-shell-on > .header-lined,
body.gh-shell-on .primary-navbar,
body.gh-shell-on > .navbar-top,
body.gh-shell-on > footer.footer,
body.gh-shell-on > .footer-lined {
    display: none !important;
}
/* Esconde o footer legado do twenty-one quando shell está ativo */
body.gh-shell-on footer.footer,
body.gh-shell-on .footer,
body.gh-shell-on .footer-area {
    display: none !important;
}
/* ----- Shell (flex: sidebar + app) ----- */
.gh-shell {
    display: flex;
    min-height: 100vh;
    background: var(--gh-sh-bg);
    position: relative;
}
/* ============ SIDEBAR ============ */
.gh-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--gh-sh-w-open);
    background: var(--gh-sh-surface);
    border-right: 1px solid var(--gh-sh-border);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: width 0.22s cubic-bezier(.4,0,.2,1), transform 0.28s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}
.gh-shell.is-collapsed .gh-sidebar {
    width: var(--gh-sh-w-closed);
}
/* Logo / topo da sidebar */
.gh-sidebar__logo {
    height: var(--gh-sh-topbar-h);
    display: flex;
    align-items: center;
    padding: 0 1.1rem;
    border-bottom: 1px solid var(--gh-sh-border);
    gap: 0.65rem;
    flex-shrink: 0;
    overflow: hidden;
}
.gh-sidebar__logo img {
    height: 30px;
    width: auto;
    flex-shrink: 0;
}
.gh-sidebar__logo-text {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--gh-sh-ink);
    white-space: nowrap;
    letter-spacing: -0.01em;
    transition: opacity 0.18s ease;
}
.gh-shell.is-collapsed .gh-sidebar__logo-text { opacity: 0; }
/* Botão de busca (⌘K trigger) */
.gh-sidebar__search {
    margin: 0.85rem 0.85rem 0.4rem;
    flex-shrink: 0;
}
.gh-sidebar__search-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    background: var(--gh-sh-hover);
    border: 1px solid var(--gh-sh-border);
    border-radius: 10px;
    color: var(--gh-sh-ink-2);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
    overflow: hidden;
}
.gh-sidebar__search-btn:hover {
    background: #eef1f7;
    border-color: #d8def0;
}
.gh-sidebar__search-btn i.fa-search { color: var(--gh-sh-mute); font-size: 0.82rem; flex-shrink: 0; }
.gh-sidebar__search-btn-label { flex: 1; text-align: left; transition: opacity 0.18s ease; }
.gh-sidebar__search-btn kbd {
    background: #fff;
    border: 1px solid var(--gh-sh-border);
    border-radius: 5px;
    padding: 1px 6px;
    font-size: 0.7rem;
    color: var(--gh-sh-ink-2);
    font-family: inherit;
    box-shadow: 0 1px 0 rgba(15,23,42,0.04);
    transition: opacity 0.18s ease;
}
.gh-shell.is-collapsed .gh-sidebar__search-btn-label,
.gh-shell.is-collapsed .gh-sidebar__search-btn kbd { opacity: 0; pointer-events: none; }
.gh-shell.is-collapsed .gh-sidebar__search-btn {
    padding: 0.55rem;
    justify-content: center;
}
/* Nav */
.gh-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.35rem 0.55rem 1rem;
    list-style: none;
    margin: 0;
}
.gh-sidebar__nav::-webkit-scrollbar { width: 6px; }
.gh-sidebar__nav::-webkit-scrollbar-thumb { background: #d8def0; border-radius: 3px; }
.gh-sidebar__nav li { list-style: none; }
.gh-sidebar__section {
    padding: 1rem 0.85rem 0.35rem;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gh-sh-mute);
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.18s ease;
}
.gh-shell.is-collapsed .gh-sidebar__section { opacity: 0; height: 0; padding: 0; }
.gh-sidebar__link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.62rem 0.85rem;
    margin: 2px 0;
    border-radius: 10px;
    color: var(--gh-sh-ink-2);
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    transition: background 0.15s ease, color 0.15s ease;
    position: relative;
}
.gh-sidebar__link i {
    width: 20px;
    text-align: center;
    font-size: 1rem;
    flex-shrink: 0;
    color: var(--gh-sh-mute);
    transition: color 0.15s ease;
}
.gh-sidebar__link-label {
    flex: 1;
    transition: opacity 0.18s ease;
}
.gh-sidebar__link:hover {
    background: var(--gh-sh-hover);
    color: var(--gh-sh-ink);
    text-decoration: none;
}
.gh-sidebar__link:hover i { color: var(--gh-sh-ink); }
.gh-sidebar__link.is-active {
    background: var(--gh-sh-active);
    color: var(--gh-sh-active-ink);
    font-weight: 600;
}
.gh-sidebar__link.is-active i { color: var(--gh-sh-active-ink); }
.gh-sidebar__link.is-active::before {
    content: "";
    position: absolute;
    left: -0.55rem;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--gh-sh-brand);
}
.gh-shell.is-collapsed .gh-sidebar__link-label { opacity: 0; }
.gh-shell.is-collapsed .gh-sidebar__link {
    justify-content: center;
    padding: 0.62rem 0;
}
/* Tooltip quando colapsada (hover no ícone) */
.gh-shell.is-collapsed .gh-sidebar__link {
    position: relative;
}
.gh-shell.is-collapsed .gh-sidebar__link:hover .gh-sidebar__link-label {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--gh-sh-ink);
    color: #fff;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    opacity: 1;
    white-space: nowrap;
    z-index: 1050;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(15,23,42,0.25);
}
/* ============== CARD ÓRION no SIDEBAR ============== */
.gh-sidebar__orion {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: calc(100% - 1rem);
    margin: 0.5rem 0.5rem 0.9rem;
    padding: 0.55rem 0.6rem;
    border: 1px solid rgba(139, 92, 246, 0.28);
    border-radius: 12px;
    background: linear-gradient(135deg,
        rgba(139, 92, 246, 0.10) 0%,
        rgba(34, 211, 238, 0.06) 100%);
    color: var(--gh-sh-ink);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    position: relative;
    overflow: hidden;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.gh-sidebar__orion::before {
    /* brilho de fundo sutil */
    content: "";
    position: absolute;
    inset: -30% -20% auto auto;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.24) 0%, transparent 65%);
    pointer-events: none;
    filter: blur(4px);
}
.gh-sidebar__orion:hover {
    border-color: rgba(139, 92, 246, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -14px rgba(139, 92, 246, 0.55);
    background: linear-gradient(135deg,
        rgba(139, 92, 246, 0.16) 0%,
        rgba(34, 211, 238, 0.09) 100%);
}
.gh-sidebar__orion:active { transform: translateY(0); }
.gh-sidebar__orion:focus-visible {
    outline: 2px solid rgba(139, 92, 246, 0.6);
    outline-offset: 2px;
}
.gh-sidebar__orion-mark {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.gh-sidebar__orion-mark svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 2px 6px rgba(139, 92, 246, 0.35));
}
.gh-sidebar__orion-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.2;
    position: relative;
    z-index: 1;
    transition: opacity 0.18s ease;
}
.gh-sidebar__orion-title {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--gh-sh-ink);
    background: linear-gradient(90deg, #8B5CF6 0%, #22D3EE 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.gh-sidebar__orion-sub {
    font-size: 0.72rem;
    color: var(--gh-sh-mute);
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gh-sidebar__orion-arrow {
    flex: 0 0 auto;
    color: rgba(139, 92, 246, 0.55);
    font-size: 0.75rem;
    transition: transform .2s ease, color .2s ease;
    position: relative;
    z-index: 1;
}
.gh-sidebar__orion:hover .gh-sidebar__orion-arrow {
    transform: translateX(3px);
    color: #8B5CF6;
}
/* Quando sidebar colapsa: só mostra o mark, centraliza, sem background */
.gh-shell.is-collapsed .gh-sidebar__orion {
    width: 42px;
    height: 42px;
    margin: 0.5rem auto 0.9rem;
    padding: 4px;
    justify-content: center;
    gap: 0;
}
.gh-shell.is-collapsed .gh-sidebar__orion-body,
.gh-shell.is-collapsed .gh-sidebar__orion-arrow {
    opacity: 0;
    width: 0;
    overflow: hidden;
    pointer-events: none;
}
.gh-shell.is-collapsed .gh-sidebar__orion:hover .gh-sidebar__orion-body {
    /* Tooltip no hover quando colapsada */
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    opacity: 1;
    overflow: visible;
    background: var(--gh-sh-ink);
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    white-space: nowrap;
    z-index: 1050;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(15,23,42,0.25);
    flex-direction: row;
    gap: 6px;
}
.gh-shell.is-collapsed .gh-sidebar__orion:hover .gh-sidebar__orion-title {
    color: #fff;
    -webkit-text-fill-color: #fff;
    background: none;
    font-size: inherit;
}
.gh-shell.is-collapsed .gh-sidebar__orion:hover .gh-sidebar__orion-sub {
    color: rgba(255,255,255,0.65);
    font-size: inherit;
}
/* Foot (logout etc.) */
.gh-sidebar__foot {
    border-top: 1px solid var(--gh-sh-border);
    padding: 0.5rem;
    flex-shrink: 0;
}
/* ============ APP (área à direita da sidebar) ============ */
.gh-app {
    flex: 1;
    margin-left: var(--gh-sh-w-open);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left 0.22s cubic-bezier(.4,0,.2,1);
    min-width: 0;
}
.gh-shell.is-collapsed .gh-app {
    margin-left: var(--gh-sh-w-closed);
}
/* ============ TOPBAR SLIM ============ */
.gh-topbar-slim {
    height: var(--gh-sh-topbar-h);
    background: var(--gh-sh-surface);
    border-bottom: 1px solid var(--gh-sh-border);
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0 1.1rem;
    position: sticky;
    top: 0;
    z-index: 1030;
    flex-shrink: 0;
}
.gh-topbar-slim__toggle {
    background: transparent;
    border: 1px solid transparent;
    color: var(--gh-sh-ink-2);
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.gh-topbar-slim__toggle:hover {
    background: var(--gh-sh-hover);
    color: var(--gh-sh-ink);
}
.gh-topbar-slim__search {
    flex: 1;
    max-width: 420px;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.8rem;
    background: var(--gh-sh-hover);
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--gh-sh-ink-2);
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.gh-topbar-slim__search:hover {
    background: #eef1f7;
    border-color: var(--gh-sh-border);
}
.gh-topbar-slim__search i { color: var(--gh-sh-mute); font-size: 0.82rem; }
.gh-topbar-slim__search span { flex: 1; text-align: left; }
.gh-topbar-slim__search kbd {
    background: #fff;
    border: 1px solid var(--gh-sh-border);
    border-radius: 5px;
    padding: 1px 6px;
    font-size: 0.7rem;
    color: var(--gh-sh-ink-2);
    font-family: inherit;
}
.gh-topbar-slim__actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}
.gh-topbar-slim__action,
.gh-topbar-slim__avatar {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--gh-sh-ink-2);
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    text-decoration: none;
    font-size: 1rem;
}
.gh-topbar-slim__action:hover,
.gh-topbar-slim__avatar:hover {
    background: var(--gh-sh-hover);
    color: var(--gh-sh-ink);
    text-decoration: none;
}
.gh-topbar-slim__badge {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #ef4444;
    color: #fff;
    border-radius: 8px;
    font-size: 0.62rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    line-height: 1;
}
.gh-topbar-slim__avatar {
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, var(--gh-sh-brand), var(--gh-sh-brand-2));
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.gh-topbar-slim__avatar:hover {
    transform: scale(1.03);
    color: #fff;
    background: linear-gradient(135deg, var(--gh-sh-brand), var(--gh-sh-brand-2));
}
/* ============ ÁREA DE CONTEÚDO ============ */
.gh-main-area {
    flex: 1;
    padding: 1.5rem clamp(1rem, 2.5vw, 2rem);
    min-width: 0;
    overflow-x: hidden;
}
.gh-main-area > #main-body,
.gh-main-area #main-body {
    background: transparent;
    padding: 0;
}
/* Microfoot logado — discreto, do jeito que o Gabriel pediu */
.gh-app__microfoot {
    padding: 0.75rem 1.5rem 1.25rem;
    font-size: 0.72rem;
    color: var(--gh-sh-mute);
    text-align: center;
    opacity: 0.6;
}
/* ============ BACKDROP MOBILE ============ */
.gh-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(2px);
    z-index: 1035;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}
.gh-shell.is-mobile-open .gh-sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
}
/* ============ RESPONSIVO (mobile vira drawer) ============ */
@media (max-width: 991px) {
    .gh-sidebar {
        transform: translateX(-100%);
        width: var(--gh-sh-w-open) !important;
        box-shadow: var(--gh-sh-shadow-lg);
    }
    .gh-shell.is-mobile-open .gh-sidebar {
        transform: translateX(0);
    }
    .gh-app {
        margin-left: 0 !important;
    }
    /* Labels sempre visíveis no mobile drawer */
    .gh-shell.is-collapsed .gh-sidebar__logo-text,
    .gh-shell.is-collapsed .gh-sidebar__link-label,
    .gh-shell.is-collapsed .gh-sidebar__search-btn-label,
    .gh-shell.is-collapsed .gh-sidebar__search-btn kbd,
    .gh-shell.is-collapsed .gh-sidebar__section {
        opacity: 1;
        height: auto;
        padding: 1rem 0.85rem 0.35rem;
    }
    .gh-shell.is-collapsed .gh-sidebar__section { padding: 1rem 0.85rem 0.35rem; }
    .gh-shell.is-collapsed .gh-sidebar__link {
        justify-content: flex-start;
        padding: 0.62rem 0.85rem;
    }
    .gh-shell.is-collapsed .gh-sidebar__search-btn {
        justify-content: flex-start;
        padding: 0.55rem 0.7rem;
    }
}
@media (max-width: 576px) {
    .gh-topbar-slim { padding: 0 0.75rem; gap: 0.5rem; }
    .gh-topbar-slim__search { display: none; }
    .gh-main-area { padding: 1rem 0.9rem; }
}
/* ================================================================
   52. AUTH SHELL — Tela de login minimalista (estilo hPanel)
   Só aparece quando o usuário NÃO está logado.
   Sem menu, sem footer corporativo, só logo + card centralizado.
   ================================================================ */
.gh-auth-shell {
    min-height: 100vh;
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f3fb 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* Blobs decorativos de fundo */
.gh-auth-shell__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.gh-auth-shell__bg::before,
.gh-auth-shell__bg::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.35;
}
.gh-auth-shell__bg::before {
    width: 520px;
    height: 520px;
    top: -180px;
    left: -180px;
    background: radial-gradient(circle, var(--gh-sh-brand) 0%, transparent 70%);
}
.gh-auth-shell__bg::after {
    width: 600px;
    height: 600px;
    bottom: -200px;
    right: -160px;
    background: radial-gradient(circle, var(--gh-sh-brand-2) 0%, transparent 70%);
}
/* Topbar (logo + "voltar") */
.gh-auth-shell__topbar {
    position: relative;
    z-index: 2;
    padding: 1.25rem clamp(1rem, 3vw, 2rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-shrink: 0;
}
.gh-auth-shell__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--gh-sh-ink);
}
.gh-auth-shell__logo:hover { text-decoration: none; color: var(--gh-sh-ink); }
.gh-auth-shell__logo img { height: 32px; width: auto; }
.gh-auth-shell__logo-text {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}
.gh-auth-shell__back {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.88rem;
    color: var(--gh-sh-ink-2);
    text-decoration: none;
    padding: 0.45rem 0.8rem;
    border-radius: 8px;
    transition: all 0.15s ease;
}
.gh-auth-shell__back:hover {
    background: rgba(15, 23, 42, 0.04);
    color: var(--gh-sh-ink);
    text-decoration: none;
}
/* Área central (card) */
.gh-auth-shell__main {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem 3rem;
}
.gh-auth-card {
    width: 100%;
    max-width: 480px;
    background: var(--gh-sh-surface);
    border: 1px solid var(--gh-sh-border);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
    padding: 2rem clamp(1.25rem, 4vw, 2.5rem);
    position: relative;
}
.gh-auth-body {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}
.gh-auth-inner {
    /* row/col internos do WHMCS viram full width dentro do card */
}
.gh-auth-inner .row { margin: 0; }
.gh-auth-inner .col-12 { padding: 0; }
.gh-auth-inner h1,
.gh-auth-inner h2,
.gh-auth-inner .page-header {
    border: none !important;
    padding: 0 !important;
    margin: 0 0 1.25rem !important;
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--gh-sh-ink);
    letter-spacing: -0.01em;
}
/* Foot minimalista */
.gh-auth-shell__foot {
    position: relative;
    z-index: 2;
    padding: 1.2rem clamp(1rem, 3vw, 2rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.78rem;
    color: var(--gh-sh-mute);
    flex-wrap: wrap;
    flex-shrink: 0;
}
.gh-auth-shell__foot-right {
    display: inline-flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.gh-auth-shell__foot-right a {
    color: var(--gh-sh-ink-2);
    text-decoration: none;
    transition: color 0.15s ease;
}
.gh-auth-shell__foot-right a:hover { color: var(--gh-sh-brand); }
@media (max-width: 576px) {
    .gh-auth-shell__topbar { padding: 1rem; }
    .gh-auth-card { border-radius: 14px; padding: 1.5rem 1.15rem; }
    .gh-auth-shell__foot { flex-direction: column; text-align: center; gap: 0.6rem; padding: 1rem; }
}
/* ================================================================
   53. CMDK — Paleta de busca (⌘K / Ctrl+K)
   ================================================================ */
.gh-cmdk {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 10vh 1rem 2rem;
}
.gh-cmdk.is-open {
    display: flex;
    animation: ghCmdkFade 0.18s ease;
}
@keyframes ghCmdkFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.gh-cmdk__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
}
.gh-cmdk__panel {
    position: relative;
    width: 100%;
    max-width: 580px;
    background: var(--gh-sh-surface);
    border-radius: 14px;
    box-shadow: var(--gh-sh-shadow-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 72vh;
    animation: ghCmdkSlide 0.22s cubic-bezier(.4,0,.2,1);
}
@keyframes ghCmdkSlide {
    from { opacity: 0; transform: translateY(-10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.gh-cmdk__input-wrap {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.95rem 1.1rem;
    border-bottom: 1px solid var(--gh-sh-border);
    flex-shrink: 0;
}
.gh-cmdk__input-wrap i.fa-search {
    color: var(--gh-sh-mute);
    font-size: 0.95rem;
}
.gh-cmdk__input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1rem;
    color: var(--gh-sh-ink);
    background: transparent;
    font-family: inherit;
}
.gh-cmdk__input::placeholder { color: var(--gh-sh-mute); }
.gh-cmdk__esc {
    border: 1px solid var(--gh-sh-border);
    background: var(--gh-sh-hover);
    color: var(--gh-sh-ink-2);
    padding: 3px 10px;
    font-size: 0.72rem;
    border-radius: 6px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    transition: all 0.15s ease;
}
.gh-cmdk__esc:hover {
    background: #e8ebf3;
    color: var(--gh-sh-ink);
}
.gh-cmdk__list {
    flex: 1;
    overflow-y: auto;
    margin: 0;
    padding: 0.4rem 0;
    list-style: none;
}
.gh-cmdk__list::-webkit-scrollbar { width: 8px; }
.gh-cmdk__list::-webkit-scrollbar-thumb { background: #d8def0; border-radius: 4px; }
.gh-cmdk__list li { list-style: none; }
.gh-cmdk__section {
    padding: 0.7rem 1.1rem 0.25rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gh-sh-mute);
}
.gh-cmdk__item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.62rem 1.1rem;
    color: var(--gh-sh-ink);
    text-decoration: none;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background 0.12s ease;
}
.gh-cmdk__item:hover,
.gh-cmdk__item:focus {
    background: var(--gh-sh-active);
    color: var(--gh-sh-active-ink);
    text-decoration: none;
    outline: none;
}
.gh-cmdk__item i {
    width: 20px;
    text-align: center;
    color: var(--gh-sh-mute);
    flex-shrink: 0;
}
.gh-cmdk__item:hover i,
.gh-cmdk__item:focus i { color: var(--gh-sh-active-ink); }
.gh-cmdk__item span { flex: 1; }
.gh-cmdk__item kbd {
    background: var(--gh-sh-hover);
    border: 1px solid var(--gh-sh-border);
    border-radius: 5px;
    padding: 1px 7px;
    font-size: 0.72rem;
    color: var(--gh-sh-ink-2);
    font-family: inherit;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.gh-cmdk__item:hover kbd,
.gh-cmdk__item:focus kbd { opacity: 1; }
.gh-cmdk__empty {
    padding: 2rem 1.1rem;
    text-align: center;
    color: var(--gh-sh-mute);
    font-size: 0.9rem;
}
.gh-cmdk__foot {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 0.65rem 1.1rem;
    border-top: 1px solid var(--gh-sh-border);
    font-size: 0.75rem;
    color: var(--gh-sh-mute);
    background: var(--gh-sh-hover);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.gh-cmdk__foot kbd {
    background: #fff;
    border: 1px solid var(--gh-sh-border);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.7rem;
    color: var(--gh-sh-ink-2);
    font-family: inherit;
    margin-right: 4px;
}
@media (max-width: 576px) {
    .gh-cmdk { padding: 4vh 0.7rem 1rem; }
    .gh-cmdk__panel { max-height: 86vh; }
    .gh-cmdk__foot { justify-content: center; }
}
/* ================================================================
   54. Ajustes finais — zerar margens/padding que o twenty-one coloca
       no container pai quando a gente está dentro do shell.
   ================================================================ */
.gh-main-area .container,
.gh-main-area .container-fluid {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
}
.gh-main-area #main-body {
    background: transparent;
    box-shadow: none;
    padding: 0;
}
/* ================================================================
   55. FIX-UP da Seção 51 — alinha CSS com as classes reais do HTML
   e esconde a sidebar primária do WHMCS dentro do shell hPanel.
   ================================================================ */
/* ---- LOGO ---- */
/* Wrapper do logo dentro da sidebar */
.gh-sidebar__top {
    height: var(--gh-sh-topbar-h);
    display: flex;
    align-items: center;
    padding: 0 1.1rem;
    border-bottom: 1px solid var(--gh-sh-border);
    flex-shrink: 0;
}
.gh-sidebar__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none !important;
    max-width: 100%;
    overflow: hidden;
}
.gh-sidebar__logo-img {
    height: 30px;
    width: auto;
    max-width: 150px;
    flex-shrink: 0;
    object-fit: contain;
}
/* Se tem logo-img, esconde o "GH" redundante */
.gh-sidebar__logo:has(.gh-sidebar__logo-img) .gh-sidebar__logo-mark {
    display: none;
}
.gh-sidebar__logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--gh-sh-brand), var(--gh-sh-brand-2));
    color: #fff;
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 0.01em;
    flex-shrink: 0;
}
/* Sidebar colapsada: esconde tudo exceto o mark/img — cabe só um glyph */
.gh-shell.is-collapsed .gh-sidebar__top {
    justify-content: center;
    padding: 0;
}
.gh-shell.is-collapsed .gh-sidebar__logo-text { display: none; }
.gh-shell.is-collapsed .gh-sidebar__logo-img { max-width: 40px; height: 26px; }
/* ---- BOTÃO DE BUSCA (⌘K trigger na sidebar) ---- */
.gh-sidebar__search {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: calc(100% - 1.7rem);
    margin: 0.85rem 0.85rem 0.25rem;
    padding: 0.5rem 0.7rem;
    background: var(--gh-sh-hover);
    border: 1px solid var(--gh-sh-border);
    border-radius: 9px;
    color: var(--gh-sh-ink-2);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1.1;
}
.gh-sidebar__search:hover {
    background: #eef1f7;
    border-color: #d8def0;
}
.gh-sidebar__search > i.fa-search,
.gh-sidebar__search > .fa-search {
    color: var(--gh-sh-mute);
    font-size: 0.82rem;
    flex-shrink: 0;
}
.gh-sidebar__search-label {
    flex: 1;
    text-align: left;
    transition: opacity 0.15s ease;
}
.gh-sidebar__kbd,
.gh-sidebar__search kbd {
    background: #fff;
    border: 1px solid var(--gh-sh-border);
    border-radius: 5px;
    padding: 1px 6px;
    font-size: 0.68rem;
    color: var(--gh-sh-ink-2);
    font-family: inherit;
    box-shadow: 0 1px 0 rgba(15,23,42,0.04);
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.gh-shell.is-collapsed .gh-sidebar__search {
    justify-content: center;
    padding: 0.5rem;
}
.gh-shell.is-collapsed .gh-sidebar__search-label,
.gh-shell.is-collapsed .gh-sidebar__kbd { display: none; }
/* ---- LINKS DA NAV (nomes reais das classes: __icon e __text) ---- */
.gh-sidebar__link .gh-sidebar__icon {
    width: 20px;
    text-align: center;
    font-size: 1rem;
    flex-shrink: 0;
    color: var(--gh-sh-mute);
    transition: color 0.15s ease;
}
.gh-sidebar__link .gh-sidebar__text {
    flex: 1;
    transition: opacity 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
}
.gh-sidebar__link:hover .gh-sidebar__icon { color: var(--gh-sh-ink); }
.gh-sidebar__link.is-active .gh-sidebar__icon { color: var(--gh-sh-active-ink); }
.gh-shell.is-collapsed .gh-sidebar__link .gh-sidebar__text { display: none; }
/* Variantes do foot da sidebar (sair, voltar ao admin) */
.gh-sidebar__link--muted { color: var(--gh-sh-mute); }
.gh-sidebar__link--muted:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
}
.gh-sidebar__link--muted:hover .gh-sidebar__icon { color: #ef4444; }
.gh-sidebar__link--admin {
    color: #d97706;
    background: rgba(217, 119, 6, 0.06);
}
.gh-sidebar__link--admin .gh-sidebar__icon { color: #d97706; }
/* ---- TOPBAR: kbd do search trigger + ícones ---- */
.gh-topbar-slim__search kbd {
    background: #fff;
    border: 1px solid var(--gh-sh-border);
    border-radius: 5px;
    padding: 1px 6px;
    font-size: 0.68rem;
    color: var(--gh-sh-ink-2);
    font-family: inherit;
    box-shadow: 0 1px 0 rgba(15,23,42,0.04);
    line-height: 1.3;
    flex-shrink: 0;
}
.gh-topbar-slim a,
.gh-topbar-slim button { text-decoration: none; }
/* Account-name no topbar (usado quando loggedin) */
.gh-topbar-slim__account {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 3px 10px 3px 3px;
    border-radius: 24px;
    background: transparent;
    color: var(--gh-sh-ink-2);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease;
}
.gh-topbar-slim__account:hover {
    background: var(--gh-sh-hover);
    color: var(--gh-sh-ink);
    text-decoration: none;
}
.gh-topbar-slim__account-name { line-height: 1.1; }
/* ================================================================
   56. ESCONDER sidebar primária do WHMCS dentro do shell hPanel
   (coluna de "Ver" / "Ações" que duplica a navegação da sidebar)
   ================================================================ */
body.gh-shell-on .gh-main-area .col-lg-4.col-xl-3 {
    display: none !important;
}
body.gh-shell-on .gh-main-area .col-lg-8.col-xl-9 {
    flex: 0 0 100%;
    max-width: 100%;
}
body.gh-shell-on .gh-main-area .sidebar,
body.gh-shell-on .gh-main-area .sidebar-secondary {
    display: none !important;
}
body.gh-shell-on .gh-main-area .d-lg-none.sidebar {
    display: none !important;
}
/* Garante que primary-content ocupe 100% mesmo sem a classe col-12 */
body.gh-shell-on .gh-main-area .primary-content {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding-left: 0;
    padding-right: 0;
}
/* ================================================================
   57. AJUSTES DE PÁGINAS INTERNAS no shell hPanel
   (cards, tabelas, forms do WHMCS viram consistentes com o tema)
   ================================================================ */
/* Page header (Olá Gabriel / Meus serviços) — remove o border-bottom legado */
body.gh-shell-on .page-header,
body.gh-shell-on h1.page-header {
    border-bottom: none;
    padding: 0;
    margin-bottom: 1.25rem;
}
/* Tabelas do WHMCS dentro do shell */
body.gh-shell-on .table-container,
body.gh-shell-on .dataTables_wrapper {
    background: #fff;
    border: 1px solid var(--gh-sh-border);
    border-radius: var(--gh-sh-radius);
    padding: 0.5rem 1rem;
    box-shadow: var(--gh-sh-shadow);
}
body.gh-shell-on table.dataTable {
    border: none !important;
}
body.gh-shell-on table.dataTable thead th {
    background: transparent;
    border-bottom: 1px solid var(--gh-sh-border);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gh-sh-mute);
}
body.gh-shell-on table.dataTable tbody td {
    border-bottom: 1px solid var(--gh-sh-border);
    padding: 0.85rem 0.5rem;
}
body.gh-shell-on .dataTables_info,
body.gh-shell-on .dataTables_paginate,
body.gh-shell-on .dataTables_filter,
body.gh-shell-on .dataTables_length {
    padding: 0.5rem 0.25rem;
    color: var(--gh-sh-ink-2);
    font-size: 0.85rem;
}
body.gh-shell-on .dataTables_filter input {
    border: 1px solid var(--gh-sh-border);
    border-radius: 8px;
    padding: 0.35rem 0.65rem;
    background: #fff;
    min-width: 200px;
}
body.gh-shell-on .dataTables_length select {
    border: 1px solid var(--gh-sh-border);
    border-radius: 6px;
    padding: 0.2rem 0.4rem;
    background: #fff;
}
/* Paginação DataTable */
body.gh-shell-on .paginate_button {
    border: 1px solid var(--gh-sh-border) !important;
    border-radius: 7px !important;
    background: #fff !important;
    color: var(--gh-sh-ink-2) !important;
    padding: 0.25rem 0.7rem !important;
    margin: 0 2px !important;
    font-size: 0.82rem !important;
    box-shadow: none !important;
}
body.gh-shell-on .paginate_button.current {
    background: var(--gh-sh-brand) !important;
    border-color: var(--gh-sh-brand) !important;
    color: #fff !important;
}
body.gh-shell-on .paginate_button.disabled {
    opacity: 0.5;
    color: var(--gh-sh-mute) !important;
}
/* Panels / cards internos (vem do WHMCS twenty-one) */
body.gh-shell-on .panel,
body.gh-shell-on .card {
    background: #fff;
    border: 1px solid var(--gh-sh-border);
    border-radius: var(--gh-sh-radius);
    box-shadow: var(--gh-sh-shadow);
    margin-bottom: 1rem;
}
body.gh-shell-on .panel-heading,
body.gh-shell-on .card-header {
    background: transparent;
    border-bottom: 1px solid var(--gh-sh-border);
    padding: 0.9rem 1.1rem;
    font-weight: 600;
    color: var(--gh-sh-ink);
    border-radius: var(--gh-sh-radius) var(--gh-sh-radius) 0 0;
}
body.gh-shell-on .panel-body,
body.gh-shell-on .card-body {
    padding: 1rem 1.1rem;
}
/* Search vazio que aparece no canto superior direito do DataTable */
body.gh-shell-on .dataTables_wrapper .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 400;
}
/* Microfoot realmente minúsculo */
.gh-app__microfoot {
    padding: 0.6rem 1rem 1rem;
    font-size: 0.7rem;
    color: var(--gh-sh-mute);
    text-align: center;
    opacity: 0.45;
    letter-spacing: 0.02em;
}
/* ================================================================
   58. FIX topbar — remove focus rings feios, centraliza logo,
   ajusta alturas e espaçamento.
   ================================================================ */
/* Remove o outline quadrado preto/azul dos botões da topbar */
.gh-topbar-slim__toggle:focus,
.gh-topbar-slim__toggle:focus-visible,
.gh-topbar-slim__action:focus,
.gh-topbar-slim__action:focus-visible,
.gh-topbar-slim__avatar:focus,
.gh-topbar-slim__avatar:focus-visible,
.gh-topbar-slim__search:focus,
.gh-topbar-slim__search:focus-visible,
.gh-topbar-slim__account:focus,
.gh-topbar-slim__account:focus-visible,
.gh-sidebar__search:focus,
.gh-sidebar__search:focus-visible,
.gh-sidebar__logo:focus,
.gh-sidebar__logo:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(103, 58, 183, 0.18);
}
/* Elimina o focus ring azul padrão do Bootstrap/browser */
.gh-topbar-slim__toggle,
.gh-topbar-slim__action,
.gh-topbar-slim__avatar,
.gh-topbar-slim__account,
.gh-topbar-slim__search,
.gh-sidebar__search,
.gh-sidebar__link,
.gh-sidebar__logo {
    outline: none;
    box-shadow: none;
}
.gh-topbar-slim__toggle::-moz-focus-inner,
.gh-topbar-slim__action::-moz-focus-inner {
    border: 0;
}
/* Bell/cart sem o "square" feio — herdam estilo unificado */
.gh-topbar-slim a.gh-topbar-slim__action,
.gh-topbar-slim button.gh-topbar-slim__action {
    border: 1px solid transparent !important;
}
.gh-topbar-slim__action:hover {
    border-color: var(--gh-sh-border) !important;
}
/* ---- LOGO: aumenta o topo da sidebar e centraliza o logo ---- */
.gh-sidebar__top {
    height: var(--gh-sh-topbar-h);
    min-height: var(--gh-sh-topbar-h);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--gh-sh-border);
    flex-shrink: 0;
    overflow: hidden;
}
.gh-sidebar__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    height: 100%;
    text-decoration: none !important;
    max-width: 100%;
    overflow: hidden;
}
.gh-sidebar__logo-img {
    max-height: 36px;
    height: auto;
    width: auto;
    max-width: 150px;
    flex-shrink: 0;
    object-fit: contain;
    display: block;
}
/* Quando colapsada, logo centralizado e menor */
.gh-shell.is-collapsed .gh-sidebar__top {
    padding: 0;
    justify-content: center;
}
.gh-shell.is-collapsed .gh-sidebar__logo-img {
    max-height: 30px;
    max-width: 42px;
}
/* ---- TOPBAR: altura consistente + espaçamento limpo ---- */
.gh-topbar-slim {
    height: var(--gh-sh-topbar-h);
    min-height: var(--gh-sh-topbar-h);
}
.gh-topbar-slim__toggle {
    border-radius: 9px;
}
/* Kbd do input de busca do topbar — evita ficar com shadow quadrada */
.gh-topbar-slim__search {
    height: 40px;
    align-items: center;
}
/* Carrinho/Sino notificações — alinha verticalmente */
.gh-topbar-slim__actions {
    height: 100%;
    align-items: center;
}
/* Remove qualquer border-radius quadrado do shell */
.gh-topbar-slim input,
.gh-topbar-slim button {
    -webkit-appearance: none;
    appearance: none;
}
/* Fix global: bell/cart quando renderizados como <a> do WHMCS pegam estilo azul do Bootstrap */
.gh-topbar-slim__action,
.gh-topbar-slim__action:link,
.gh-topbar-slim__action:visited {
    color: var(--gh-sh-ink-2);
}
.gh-topbar-slim__action:hover,
.gh-topbar-slim__action:focus {
    color: var(--gh-sh-ink);
    background: var(--gh-sh-hover);
}
/* Remove outline padrão de links globais dentro do shell */
body.gh-shell-on a:focus,
body.gh-shell-on button:focus {
    outline: none;
}
body.gh-shell-on a:focus-visible,
body.gh-shell-on button:focus-visible {
    outline: 2px solid rgba(103, 58, 183, 0.35);
    outline-offset: 2px;
}
/* ================================================================
   59. FIX crítico — classes reais do topbar (__btn e __right)
   e upgrade da paleta CmdK para um visual mais premium.
   ================================================================ */
/* ---- TOPBAR BTNS REAIS (bell, cart, toggle) ---- */
.gh-topbar-slim__btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent !important;
    color: var(--gh-sh-ink-2);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    text-decoration: none !important;
    font-size: 1rem;
    position: relative;
    padding: 0;
    outline: none !important;
    box-shadow: none !important;
}
.gh-topbar-slim__btn:link,
.gh-topbar-slim__btn:visited {
    color: var(--gh-sh-ink-2);
    text-decoration: none !important;
}
.gh-topbar-slim__btn:hover {
    background: var(--gh-sh-hover);
    color: var(--gh-sh-ink);
    border-color: transparent !important;
    text-decoration: none !important;
}
.gh-topbar-slim__btn:focus,
.gh-topbar-slim__btn:focus-visible,
.gh-topbar-slim__btn:active {
    outline: none !important;
    background: var(--gh-sh-hover);
    border-color: transparent !important;
    box-shadow: none !important;
}
.gh-topbar-slim__btn.is-alert i {
    color: var(--gh-sh-brand);
}
.gh-topbar-slim__btn i {
    font-size: 1.02rem;
}
.gh-topbar-slim__btn::-moz-focus-inner { border: 0; padding: 0; }
/* Badge numérico (carrinho, notificações) */
.gh-topbar-slim__btn .gh-topbar-slim__badge {
    position: absolute;
    top: 5px;
    right: 5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    background: #ef4444;
    color: #fff;
    border-radius: 9px;
    font-size: 0.62rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    line-height: 1;
}
/* Wrapper actions do topbar (nome real: __right) */
.gh-topbar-slim__right {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
    height: 100%;
}
/* Separador sutil entre bell/cart e avatar */
.gh-topbar-slim__account {
    margin-left: 0.2rem;
    padding-left: 0.5rem;
    position: relative;
}
.gh-topbar-slim__account::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: var(--gh-sh-border);
}
/* ================================================================
   60. CMDK v2 — mais refinada e premium
   ================================================================ */
.gh-cmdk {
    padding: 12vh 1rem 2rem;
}
.gh-cmdk__backdrop {
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.gh-cmdk__panel {
    max-width: 640px;
    border-radius: 16px;
    box-shadow:
        0 2px 4px rgba(15, 23, 42, 0.04),
        0 12px 24px rgba(15, 23, 42, 0.08),
        0 30px 60px rgba(15, 23, 42, 0.18);
    border: 1px solid rgba(15, 23, 42, 0.04);
    max-height: 68vh;
}
/* Header do cmdk — input grande com ícone lilás */
.gh-cmdk__input-wrap {
    padding: 1.05rem 1.25rem;
    border-bottom: 1px solid var(--gh-sh-border);
    gap: 0.85rem;
    position: relative;
}
.gh-cmdk__input-wrap > i.fa-search,
.gh-cmdk__input-wrap > .fa-search {
    color: var(--gh-sh-brand);
    font-size: 1.02rem;
    opacity: 0.75;
}
.gh-cmdk__input {
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.3;
    padding: 0;
    background: transparent;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
.gh-cmdk__input:focus,
.gh-cmdk__input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}
.gh-cmdk__input::placeholder {
    color: var(--gh-sh-mute);
    font-weight: 400;
}
/* ESC chip refinado */
.gh-cmdk__esc {
    padding: 4px 11px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    border-radius: 7px;
    background: var(--gh-sh-hover);
    border: 1px solid var(--gh-sh-border);
    color: var(--gh-sh-ink-2);
    transition: all 0.15s ease;
}
/* Lista com padding inferior mais generoso */
.gh-cmdk__list {
    padding: 0.5rem 0.5rem 0.75rem;
}
/* Sections com hairline */
.gh-cmdk__section {
    padding: 0.95rem 0.85rem 0.35rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--gh-sh-mute);
    text-transform: uppercase;
    position: sticky;
    top: 0;
    background: linear-gradient(to bottom, #fff 80%, transparent);
    z-index: 1;
}
.gh-cmdk__list > li:first-child .gh-cmdk__section,
.gh-cmdk__list > .gh-cmdk__section:first-child {
    padding-top: 0.25rem;
}
/* Items com layout bem refinado */
.gh-cmdk__item {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    padding: 0.65rem 0.85rem;
    border-radius: 9px;
    margin: 0 0.15rem;
    color: var(--gh-sh-ink);
    font-size: 0.935rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
    position: relative;
    cursor: pointer;
}
.gh-cmdk__item:hover,
.gh-cmdk__item:focus,
.gh-cmdk__item.is-active {
    background: linear-gradient(90deg, rgba(103, 58, 183, 0.07), rgba(0, 188, 212, 0.04));
    color: var(--gh-sh-ink);
    text-decoration: none;
}
/* Ícone em "chip" circular sutil */
.gh-cmdk__item i {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gh-sh-hover);
    color: var(--gh-sh-ink-2);
    font-size: 0.92rem;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.gh-cmdk__item:hover i,
.gh-cmdk__item:focus i,
.gh-cmdk__item.is-active i {
    background: linear-gradient(135deg, var(--gh-sh-brand), var(--gh-sh-brand-2));
    color: #fff;
    box-shadow: 0 4px 10px rgba(103, 58, 183, 0.25);
}
.gh-cmdk__item span {
    flex: 1;
    color: var(--gh-sh-ink);
    line-height: 1.35;
}
/* Enter chip — aparece com hover, mais refinado */
.gh-cmdk__item kbd {
    background: #fff;
    border: 1px solid var(--gh-sh-border);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.72rem;
    color: var(--gh-sh-ink-2);
    font-family: inherit;
    opacity: 0;
    transform: translateX(-6px);
    transition: all 0.15s ease;
    font-weight: 600;
    box-shadow: 0 1px 0 rgba(15,23,42,0.03);
}
.gh-cmdk__item:hover kbd,
.gh-cmdk__item:focus kbd,
.gh-cmdk__item.is-active kbd {
    opacity: 1;
    transform: translateX(0);
    color: var(--gh-sh-brand);
    border-color: rgba(103, 58, 183, 0.2);
}
/* Empty state — ilustração via emoji textual */
.gh-cmdk__empty {
    padding: 2.5rem 1.1rem;
    text-align: center;
    color: var(--gh-sh-mute);
    font-size: 0.9rem;
    line-height: 1.55;
}
.gh-cmdk__empty::before {
    content: "🔎";
    display: block;
    font-size: 1.8rem;
    margin-bottom: 0.6rem;
    filter: grayscale(0.3);
}
/* Footer do cmdk com kbd escuros mais legíveis */
.gh-cmdk__foot {
    background: #fafbfc;
    border-top: 1px solid var(--gh-sh-border);
    padding: 0.75rem 1.25rem;
    font-size: 0.75rem;
    color: var(--gh-sh-mute);
    gap: 1.35rem;
}
.gh-cmdk__foot kbd {
    background: #fff;
    border: 1px solid var(--gh-sh-border);
    border-radius: 5px;
    padding: 2px 6px;
    font-size: 0.7rem;
    color: var(--gh-sh-ink-2);
    font-family: inherit;
    margin-right: 5px;
    font-weight: 600;
    line-height: 1.2;
    min-width: 20px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 1px 0 rgba(15,23,42,0.04);
}
/* Scrollbar custom */
.gh-cmdk__list::-webkit-scrollbar {
    width: 10px;
}
.gh-cmdk__list::-webkit-scrollbar-track { background: transparent; }
.gh-cmdk__list::-webkit-scrollbar-thumb {
    background: #d8def0;
    border-radius: 5px;
    border: 2px solid #fff;
}
.gh-cmdk__list::-webkit-scrollbar-thumb:hover {
    background: #c4cbe0;
}
/* ================================================================
   61. DASHBOARD LOGADO — Refinamento (hero compacto, CTAs roxos,
   cards sem arco-íris no topo, chips menores)
   ================================================================ */
/* ----- Hero do dashboard ----- */
body.gh-shell-on .gh-dash__head {
    background: #fff;
    border: 1px solid var(--gh-sh-border);
    border-radius: var(--gh-sh-radius);
    box-shadow: var(--gh-sh-shadow);
    padding: 1.35rem 1.5rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
}
body.gh-shell-on .gh-dash__head-left {
    min-width: 0;
    flex: 1 1 320px;
}
body.gh-shell-on .gh-dash__head-right {
    display: inline-flex;
    gap: 0.55rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}
/* "Painel do cliente" — removendo capitalize que virava "Painel Do Cliente" */
body.gh-shell-on .gh-dash__date {
    text-transform: none !important;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--gh-sh-mute);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}
body.gh-shell-on .gh-dash__date i {
    color: var(--gh-sh-brand);
    font-size: 0.78rem;
}
/* Saudação mais compacta — não precisa ser gigante */
body.gh-shell-on .gh-dash__greeting {
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 0.3rem;
    color: var(--gh-sh-ink);
    letter-spacing: -0.015em;
}
body.gh-shell-on .gh-dash__name {
    color: var(--gh-sh-brand);
    margin: 0 !important;
    padding: 0 !important;
}
/* Sub sem espaço antes do ponto, cor mais contida */
body.gh-shell-on .gh-dash__sub {
    font-size: 0.93rem;
    color: var(--gh-sh-ink-2);
    line-height: 1.45;
    margin: 0;
}
body.gh-shell-on .gh-dash__sub strong {
    color: var(--gh-sh-ink);
    font-weight: 600;
}
/* ================================================================
   72. DASH HEAD v2 — avatar + meta pills + saudação dinâmica
   ----------------------------------------------------------------
   Reformulação do hero do dashboard pra UX mais informativa.
   Adiciona avatar com iniciais + status dot, linha de meta
   (data, "conta ativa", nº de serviços) e corrige o vazamento
   do gradient cianico legado no .gh-dash__name.
   ================================================================ */
/* Layout: avatar à esquerda do intro */
body.gh-shell-on .gh-dash__head-left {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex: 1 1 320px;
    min-width: 0;
}
/* Avatar circular com iniciais + status pulse verde */
body.gh-shell-on .gh-dash__avatar {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #673ab7 0%, #8e24aa 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 8px 20px rgba(103, 58, 183, 0.28);
    flex-shrink: 0;
}
body.gh-shell-on .gh-dash__avatar-initials {
    text-transform: uppercase;
    line-height: 1;
}
body.gh-shell-on .gh-dash__avatar-status {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 14px;
    height: 14px;
    background: #10b981;
    border: 2.5px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18);
}
/* Intro (textos ao lado do avatar) */
body.gh-shell-on .gh-dash__intro {
    min-width: 0;
    flex: 1;
}
/* Meta pills acima da saudação: data · conta · serviços */
body.gh-shell-on .gh-dash__meta {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.72rem;
    color: var(--gh-sh-mute);
    margin-bottom: 0.35rem;
    flex-wrap: wrap;
    font-weight: 500;
}
body.gh-shell-on .gh-dash__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
body.gh-shell-on .gh-dash__meta-item i {
    font-size: 0.72rem;
    color: var(--gh-sh-mute);
}
body.gh-shell-on .gh-dash__meta-item--ok {
    color: #047857;
    font-weight: 600;
}
body.gh-shell-on .gh-dash__meta-item--ok i {
    color: #10b981;
}
body.gh-shell-on .gh-dash__meta-item--warn {
    color: #b45309;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
    cursor: pointer;
}
body.gh-shell-on .gh-dash__meta-item--warn:hover {
    color: #92400e;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
}
body.gh-shell-on .gh-dash__meta-item--warn i {
    color: #f59e0b;
}
body.gh-shell-on .gh-dash__meta-item--brand {
    color: var(--gh-sh-brand);
    font-weight: 600;
}
body.gh-shell-on .gh-dash__meta-item--brand i {
    color: var(--gh-sh-brand);
}
body.gh-shell-on .gh-dash__meta-sep {
    color: #cbd3dc;
    font-weight: 400;
}
/* FIX: .gh-dash__name no WHMCS legado tinha gradient ciano vazando
   via -webkit-text-fill-color. Reset completo aqui. */
body.gh-shell-on .gh-dash__name,
.gh-panel .gh-dash__name {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--gh-sh-brand) !important;
}
/* Link inline do subtítulo ("Ver planos →") */
body.gh-shell-on .gh-dash__sub-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--gh-sh-brand);
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.15s ease;
    margin-left: 0.15rem;
}
body.gh-shell-on .gh-dash__sub-link:hover {
    gap: 0.5rem;
    text-decoration: none;
    color: var(--gh-sh-brand);
}
body.gh-shell-on .gh-dash__sub-link i {
    font-size: 0.72em;
}
/* Responsivo */
@media (max-width: 600px) {
    body.gh-shell-on .gh-dash__head-left {
        gap: 0.85rem;
    }
    body.gh-shell-on .gh-dash__avatar {
        width: 46px;
        height: 46px;
        font-size: 0.95rem;
    }
    body.gh-shell-on .gh-dash__avatar-status {
        width: 12px;
        height: 12px;
        border-width: 2px;
    }
    body.gh-shell-on .gh-dash__meta {
        gap: 0.4rem;
        font-size: 0.68rem;
    }
    body.gh-shell-on .gh-dash__greeting {
        font-size: 1.3rem;
    }
}
/* ----- CTAs do hero (roxo da marca em vez do azul legado) ----- */
body.gh-shell-on .gh-btn--primary {
    background: linear-gradient(135deg, var(--gh-sh-brand), #5b30a8) !important;
    border: 1px solid transparent !important;
    color: #fff !important;
    padding: 0.55rem 1.05rem !important;
    border-radius: 10px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 2px 4px rgba(103, 58, 183, 0.12), 0 4px 12px rgba(103, 58, 183, 0.16) !important;
    transform: none !important;
}
body.gh-shell-on .gh-btn--primary:hover {
    background: linear-gradient(135deg, #5b30a8, #4a2690) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(103, 58, 183, 0.18), 0 8px 20px rgba(103, 58, 183, 0.22) !important;
    color: #fff !important;
}
body.gh-shell-on .gh-btn--ghost {
    background: #fff !important;
    border: 1px solid var(--gh-sh-border) !important;
    color: var(--gh-sh-ink-2) !important;
    padding: 0.55rem 1.05rem !important;
    border-radius: 10px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    box-shadow: none !important;
    transform: none !important;
}
body.gh-shell-on .gh-btn--ghost:hover {
    background: var(--gh-sh-hover) !important;
    color: var(--gh-sh-ink) !important;
    border-color: #d8def0 !important;
}
body.gh-shell-on .gh-btn i {
    font-size: 0.85em;
    color: currentColor;
}
/* ----- KPI cards refinados ----- */
/* Remove barra colorida arco-íris no topo (::before) */
body.gh-shell-on .gh-kpi2::before {
    display: none !important;
}
body.gh-shell-on .gh-kpi2 {
    min-height: 124px;
    padding: 1.15rem 1.2rem;
    border: 1px solid var(--gh-sh-border);
    border-radius: var(--gh-sh-radius);
    background: #fff;
    box-shadow: var(--gh-sh-shadow);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
body.gh-shell-on .gh-kpi2:hover {
    transform: translateY(-2px);
    border-color: #d8def0;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
/* Label em lowercase, mais legível */
body.gh-shell-on .gh-kpi2__label {
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--gh-sh-ink-2);
    margin-bottom: 0.25rem;
}
/* Valor menor + peso mais contido */
body.gh-shell-on .gh-kpi2__value {
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--gh-sh-ink);
    margin-bottom: 0.65rem;
}
body.gh-shell-on .gh-kpi2__value--money {
    font-size: 1.35rem;
}
/* Glyph/ícone — fica onde toda cor contextual vive agora */
body.gh-shell-on .gh-kpi2__glyph {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    font-size: 0.95rem;
}
body.gh-shell-on .gh-kpi2--brand .gh-kpi2__glyph {
    background: rgba(103, 58, 183, 0.08);
    color: var(--gh-sh-brand);
}
/* Chips menores e mais sutis */
body.gh-shell-on .gh-kpi2__tag {
    font-size: 0.7rem !important;
    padding: 0.15rem 0.55rem !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
}
body.gh-shell-on .gh-kpi2__tag--brand {
    background: rgba(103, 58, 183, 0.08) !important;
    color: var(--gh-sh-brand) !important;
}
body.gh-shell-on .gh-kpi2__hint {
    font-size: 0.7rem;
    color: var(--gh-sh-mute);
    font-weight: 500;
}
/* Grid dos KPIs — gap menor, breakpoints melhores */
body.gh-shell-on .gh-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}
@media (max-width: 1200px) {
    body.gh-shell-on .gh-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
    body.gh-shell-on .gh-kpi-grid { grid-template-columns: 1fr; }
    body.gh-shell-on .gh-dash__head { padding: 1.15rem; }
    body.gh-shell-on .gh-dash__greeting { font-size: 1.35rem; }
    body.gh-shell-on .gh-dash__head-right { width: 100%; }
    body.gh-shell-on .gh-btn--primary,
    body.gh-shell-on .gh-btn--ghost { flex: 1; justify-content: center; }
}
/* ----- Cards de Domínios e Notificações ----- */
body.gh-shell-on .gh-dash__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
@media (max-width: 992px) {
    body.gh-shell-on .gh-dash__split { grid-template-columns: 1fr; }
}
body.gh-shell-on .gh-card {
    background: #fff;
    border: 1px solid var(--gh-sh-border);
    border-radius: var(--gh-sh-radius);
    box-shadow: var(--gh-sh-shadow);
    overflow: hidden;
}
body.gh-shell-on .gh-card__head {
    padding: 1.1rem 1.25rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
body.gh-shell-on .gh-card__head h2,
body.gh-shell-on .gh-card__head h3,
body.gh-shell-on .gh-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gh-sh-ink);
    margin: 0;
    letter-spacing: -0.01em;
}
body.gh-shell-on .gh-card__link {
    color: var(--gh-sh-brand);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
body.gh-shell-on .gh-card__link:hover {
    color: #5b30a8;
    text-decoration: none;
}
body.gh-shell-on .gh-card__head p,
body.gh-shell-on .gh-card__sub {
    color: var(--gh-sh-mute);
    font-size: 0.85rem;
    margin: 0.15rem 0 0;
}
/* ============================================================
   62. Remover wrapper branco do dashboard
   ------------------------------------------------------------
   O homepage.tpl usa <div class="gh-panel"> como wrapper
   externo. Na CSS antiga, isso aplicava fundo branco/cinza
   e border — mas dentro do shell logado, isso cria um
   "card dentro de card" visual. Aqui neutralizamos esse
   wrapper e deixamos o fundo do shell (#f5f7fb) aparecer.
   Os cards internos (.gh-dash__head, .gh-kpi2, .gh-card)
   mantêm seu próprio fundo branco com borda e sombra.
   ============================================================ */
body.gh-shell-on .gh-panel,
body.gh-shell-on #main-body .gh-panel,
body.gh-shell-on .primary-content .gh-panel {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
}
body.gh-shell-on .gh-panel > .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}
/* Evita que o main-body/primary-content da WHMCS crie
   mais uma camada de fundo por baixo */
body.gh-shell-on #main-body,
body.gh-shell-on .primary-content,
body.gh-shell-on .main-content {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
}
/* ============================================================
   63. DataTables e cards internos — remover wrapper branco
   ------------------------------------------------------------
   Nas páginas internas (domínios, serviços, faturas, etc.),
   as DataTables vêm dentro de .dataTables_wrapper ou
   .table-container que, no CSS anterior, ganhavam fundo
   branco + borda + sombra. Isso cria uma "caixa branca"
   redundante que empurra a tabela pra dentro de um card
   enorme, ficando especialmente feio quando a tabela está
   vazia (screenshot do Gabriel).
   Aqui deixamos as tabelas "nuas" sobre o fundo do shell,
   no estilo dashboard moderno (hPanel, Notion, Linear).
   As próprias linhas da tabela continuam com separadores
   sutis — então a leitura não sofre.
   ============================================================ */
body.gh-shell-on .table-container,
body.gh-shell-on .dataTables_wrapper,
body.gh-shell-on .tab-content,
body.gh-shell-on .well {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
/* Cabeçalho da DataTable (buscar + mostrar N entradas + info
   "Mostrando X de Y") — agora fica solto em cima da tabela,
   sem padding lateral de wrapper. */
body.gh-shell-on .dataTables_wrapper .dataTables_filter,
body.gh-shell-on .dataTables_wrapper .dataTables_length,
body.gh-shell-on .dataTables_wrapper .dataTables_info,
body.gh-shell-on .dataTables_wrapper .dataTables_paginate {
    padding: 0.5rem 0 !important;
}
/* A tabela em si vira o card: fundo branco, borda, raio,
   sombra sutil — só a tabela, não o wrapper. */
body.gh-shell-on table.dataTable,
body.gh-shell-on .table-container > table,
body.gh-shell-on .primary-content > table.table {
    background: #fff !important;
    border: 1px solid var(--gh-sh-border) !important;
    border-radius: var(--gh-sh-radius) !important;
    box-shadow: var(--gh-sh-shadow) !important;
    overflow: hidden !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}
body.gh-shell-on table.dataTable thead th {
    background: #fafbfc !important;
    padding: 0.85rem 1rem !important;
}
body.gh-shell-on table.dataTable tbody td {
    padding: 0.85rem 1rem !important;
}
body.gh-shell-on table.dataTable tbody tr:last-child td {
    border-bottom: none !important;
}
/* "Nenhum Registro Encontrado" — visual mais leve quando vazio */
body.gh-shell-on table.dataTable td.dataTables_empty {
    padding: 3rem 1rem !important;
    color: var(--gh-sh-mute) !important;
    font-size: 0.95rem !important;
    text-align: center !important;
}
/* Cards genéricos do Bootstrap/twenty-one: quando existirem,
   mantemos o visual de card (muitas páginas usam pra separar
   seções), mas suavizamos a sombra pra não competir com a
   nova hierarquia. */
body.gh-shell-on .panel,
body.gh-shell-on .card {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
/* ============================================================
   64. FIX DataTables filter bugado
   ------------------------------------------------------------
   Problema: o ::before com "\f002" (lupa FA5) estava virando
   um quadradinho vazio porque a fonte não resolve naquele
   contexto + input esticando pra largura total porque a
   Section 63 zerou o padding do wrapper.
   Fix: remove o pseudo-elemento no shell (sem lupa visual,
   mas com placeholder claro dizendo "Buscar..."), devolve
   tamanho humano pro input e alinha o filter à direita.
   ============================================================ */
/* Mata o ::before do tema antigo — acabava renderizando
   um □ quando o webfont não carregava no contexto da DataTable */
body.gh-shell-on .dataTables_filter label::before {
    content: none !important;
    display: none !important;
}
/* Input volta ao padding natural (sem espaço pra lupa que não existe) */
body.gh-shell-on .dataTables_filter input {
    padding-left: 0.85rem !important;
    width: 260px !important;
    max-width: 100%;
    background: #fff !important;
}
/* Filter alinhado à direita, acima da tabela, como manda o figurino */
body.gh-shell-on .dataTables_wrapper .dataTables_filter {
    float: right !important;
    text-align: right !important;
    padding: 0.25rem 0 0.75rem !important;
}
body.gh-shell-on .dataTables_wrapper .dataTables_length {
    float: left !important;
    padding: 0.25rem 0 0.75rem !important;
}
body.gh-shell-on .dataTables_wrapper .dataTables_filter label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    font-weight: 500 !important;
    color: var(--gh-sh-ink-2) !important;
    font-size: 0.85rem !important;
}
/* Placeholder claro (WHMCS normalmente usa "Buscar..." em PT) */
body.gh-shell-on .dataTables_filter input::placeholder {
    color: var(--gh-sh-mute) !important;
    opacity: 1 !important;
}
/* Clear floats pra paginação não grudar no filter */
body.gh-shell-on .dataTables_wrapper::after {
    content: "";
    display: block;
    clear: both;
}
/* ============================================================
   65. Card "Minha hospedagem" + Atalhos do painel (cPanel-like)
   ------------------------------------------------------------
   Inspirado no hPanel: identidade do serviço, barras de uso
   (disco/banda), timestamp da última sync e grade de atalhos
   pras ferramentas do cPanel com ícones coloridos.
   ============================================================ */
/* ===== Card principal de hospedagem ===== */
body.gh-shell-on .gh-hosting {
    background: #fff;
    border: 1px solid var(--gh-sh-border);
    border-radius: 14px;
    padding: 1.4rem 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
body.gh-shell-on .gh-hosting__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 1.1rem;
    flex-wrap: wrap;
}
body.gh-shell-on .gh-hosting__ident {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}
body.gh-shell-on .gh-hosting__avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ede7f6, #e3f2fd);
    color: var(--gh-sh-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
body.gh-shell-on .gh-hosting__text { min-width: 0; }
body.gh-shell-on .gh-hosting__eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gh-sh-mute);
    display: block;
    margin-bottom: 0.1rem;
}
body.gh-shell-on .gh-hosting__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gh-sh-ink);
    margin: 0;
    letter-spacing: -0.01em;
}
body.gh-shell-on .gh-hosting__domain {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    color: var(--gh-sh-ink-2);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
body.gh-shell-on .gh-hosting__domain i {
    color: var(--gh-sh-mute);
    font-size: 0.75rem;
}
body.gh-shell-on .gh-hosting__status-wrap {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}
body.gh-shell-on .gh-hosting__status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #0e7a4f;
    background: rgba(34, 197, 94, 0.1);
}
body.gh-shell-on .gh-hosting__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
    animation: gh-pulse-ok 2.2s ease-out infinite;
}
@keyframes gh-pulse-ok {
    0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
    50%      { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.05); }
}
body.gh-shell-on .gh-btn--sm {
    padding: 0.4rem 0.8rem !important;
    font-size: 0.82rem !important;
}
/* ===== Barras de uso ===== */
body.gh-shell-on .gh-hosting__usage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.3rem;
    margin-bottom: 1.1rem;
}
@media (max-width: 720px) {
    body.gh-shell-on .gh-hosting__usage {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}
body.gh-shell-on .gh-usage__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.45rem;
    gap: 0.5rem;
}
body.gh-shell-on .gh-usage__label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gh-sh-ink-2);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
body.gh-shell-on .gh-usage__label i {
    color: var(--gh-sh-mute);
    font-size: 0.75rem;
}
body.gh-shell-on .gh-usage__value {
    font-size: 0.82rem;
    color: var(--gh-sh-ink-2);
    font-variant-numeric: tabular-nums;
    font-family: var(--gh-mono, ui-monospace, SF Mono, monospace);
}
body.gh-shell-on .gh-usage__value strong {
    color: var(--gh-sh-ink);
    font-weight: 700;
}
body.gh-shell-on .gh-usage__sep {
    color: var(--gh-sh-mute);
    margin: 0 0.2rem;
}
body.gh-shell-on .gh-usage__bar {
    height: 6px;
    background: #f1f5f9;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
body.gh-shell-on .gh-usage__fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gh-sh-brand), #9575cd);
    transition: width 0.6s ease;
}
body.gh-shell-on .gh-usage__fill--ok {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}
body.gh-shell-on .gh-usage__fill--warn {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}
body.gh-shell-on .gh-usage__fill--danger {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}
/* Banda ilimitada: padrão listrado sutil pra indicar "sem limite" */
body.gh-shell-on .gh-usage__fill--infinite {
    background: repeating-linear-gradient(
        45deg,
        rgba(103, 58, 183, 0.18),
        rgba(103, 58, 183, 0.18) 6px,
        rgba(0, 188, 212, 0.18) 6px,
        rgba(0, 188, 212, 0.18) 12px
    );
}
/* ===== Footer do card (timestamp) ===== */
body.gh-shell-on .gh-hosting__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid #f1f5f9;
    flex-wrap: wrap;
}
body.gh-shell-on .gh-hosting__update {
    font-size: 0.78rem;
    color: var(--gh-sh-mute);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
body.gh-shell-on .gh-hosting__update i {
    font-size: 0.75rem;
}
body.gh-shell-on .gh-hosting__foot .gh-link {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gh-sh-brand);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
body.gh-shell-on .gh-hosting__foot .gh-link:hover {
    color: #5b30a8;
    text-decoration: none;
}
/* ===== Estado vazio (sem hospedagem ativa) ===== */
body.gh-shell-on .gh-hosting__empty {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 0.5rem;
    flex-wrap: wrap;
}
body.gh-shell-on .gh-hosting__empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, #ede7f6, #e3f2fd);
    color: var(--gh-sh-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}
body.gh-shell-on .gh-hosting__empty-text {
    flex: 1;
    min-width: 240px;
}
body.gh-shell-on .gh-hosting__empty-text h2 {
    margin: 0 0 0.3rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gh-sh-ink);
}
body.gh-shell-on .gh-hosting__empty-text p {
    margin: 0;
    color: var(--gh-sh-ink-2);
    font-size: 0.9rem;
}
body.gh-shell-on .gh-hosting__empty-ctas {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}
/* ===== Atalhos do cPanel (grid colorido) ===== */
body.gh-shell-on .gh-cpanel {
    background: #fff;
    border: 1px solid var(--gh-sh-border);
    border-radius: 14px;
    padding: 1.3rem 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
body.gh-shell-on .gh-cpanel__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.1rem;
    flex-wrap: wrap;
}
body.gh-shell-on .gh-cpanel__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--gh-sh-ink);
    letter-spacing: -0.01em;
}
body.gh-shell-on .gh-cpanel__sub {
    margin: 0.15rem 0 0;
    font-size: 0.82rem;
    color: var(--gh-sh-mute);
}
body.gh-shell-on .gh-cpanel__head .gh-link {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gh-sh-brand);
    text-decoration: none;
}
body.gh-shell-on .gh-cpanel__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.7rem;
}
@media (max-width: 1100px) {
    body.gh-shell-on .gh-cpanel__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px) {
    body.gh-shell-on .gh-cpanel__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
    body.gh-shell-on .gh-cpanel__grid { grid-template-columns: repeat(2, 1fr); }
}
body.gh-shell-on .gh-cpanel__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 1.1rem 0.6rem;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--gh-sh-ink);
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none !important;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
body.gh-shell-on .gh-cpanel__item:hover {
    border-color: var(--gh-sh-border);
    background: #fafbfc;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
    color: var(--gh-sh-ink);
}
body.gh-shell-on .gh-cpanel__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: #fff;
    transition: transform 0.15s ease;
}
body.gh-shell-on .gh-cpanel__item:hover .gh-cpanel__icon {
    transform: scale(1.06);
}
/* Paleta distinta por tipo (estilo hPanel/Hostinger e cPanel Jupiter) */
body.gh-shell-on .gh-cpanel__icon--1  { background: linear-gradient(135deg, #f59e0b, #d97706); } /* Arquivos - laranja */
body.gh-shell-on .gh-cpanel__icon--2  { background: linear-gradient(135deg, #3b82f6, #2563eb); } /* E-mails - azul */
body.gh-shell-on .gh-cpanel__icon--3  { background: linear-gradient(135deg, #f97316, #ea580c); } /* MySQL - laranja escuro */
body.gh-shell-on .gh-cpanel__icon--4  { background: linear-gradient(135deg, #06b6d4, #0891b2); } /* phpMyAdmin - ciano */
body.gh-shell-on .gh-cpanel__icon--5  { background: linear-gradient(135deg, #64748b, #475569); } /* FTP - slate */
body.gh-shell-on .gh-cpanel__icon--6  { background: linear-gradient(135deg, #22c55e, #16a34a); } /* SSL - verde */
body.gh-shell-on .gh-cpanel__icon--7  { background: linear-gradient(135deg, #8b5cf6, #7c3aed); } /* Cron - violeta */
body.gh-shell-on .gh-cpanel__icon--8  { background: linear-gradient(135deg, #0ea5e9, #0284c7); } /* Backups - sky */
body.gh-shell-on .gh-cpanel__icon--9  { background: linear-gradient(135deg, #ec4899, #db2777); } /* DNS - rosa */
body.gh-shell-on .gh-cpanel__icon--10 { background: linear-gradient(135deg, #14b8a6, #0d9488); } /* Stats - teal */
body.gh-shell-on .gh-cpanel__icon--11 { background: linear-gradient(135deg, #1e293b, #0f172a); } /* WordPress - grafite */
body.gh-shell-on .gh-cpanel__icon--12 { background: linear-gradient(135deg, #94a3b8, #64748b); } /* Mais - cinza */
/* ============================================================
   66. JS inline injetado via CSS (data-fill) — fallback
   ------------------------------------------------------------
   As barras de uso usam o atributo data-fill como
   fonte de verdade. O JS no footer renderiza o width
   a partir desse atributo pra permitir calculos no
   back-end (razão diskusage/disklimit * 100).
   ============================================================ */
/* ============================================================
   67. Verification banners (e-mail, KYC, network issues)
   ------------------------------------------------------------
   O WHMCS injeta .verification-banner no topo de páginas
   logadas pra avisar sobre: e-mail não verificado, validação
   de identidade (KYC), problemas de rede.
   Por padrão vem chapado, com ícone cinza e botão genérico.
   Aqui transformamos em um card premium com:
   - Borda esquerda colorida (stripe 4px)
   - Ícone num círculo accent
   - Título em bold + descrição muted (via CSS content)
   - Botão de ação com cor semântica preenchida
   - Botão close redondo com hover
   - Layout flex (bypass grid Bootstrap)
   Paleta: amber/warning por padrão. Com classe modificadora,
   vira danger ou info.
   ============================================================ */
/* Wrapper do banner — TOAST flutuante no canto inferior direito.
   Não empurra o conteúdo, fica sempre visível enquanto a pessoa
   não verifica o e-mail (o WHMCS mostra em todo page load). */
body.gh-shell-on .verification-banner {
    position: fixed !important;
    bottom: 1.25rem;
    right: 1.25rem;
    left: auto;
    top: auto;
    width: 420px;
    max-width: calc(100vw - 2.5rem);
    z-index: 9990;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: 14px;
    padding: 1rem 1.15rem;
    margin: 0 !important;
    box-shadow:
        0 20px 40px -12px rgba(245, 158, 11, 0.25),
        0 8px 16px -4px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(245, 158, 11, 0.1);
    animation: gh-toast-in 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes gh-toast-in {
    0% {
        opacity: 0;
        transform: translateY(24px) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* Toast em mobile: full-width bottom, com respiro lateral */
@media (max-width: 540px) {
    body.gh-shell-on .verification-banner {
        width: auto !important;
        left: 0.75rem !important;
        right: 0.75rem !important;
        bottom: 0.75rem !important;
    }
}
/* Container interno — vertical stack pra caber no toast estreito */
body.gh-shell-on .verification-banner > .container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}
body.gh-shell-on .verification-banner .row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.85rem !important;
    margin: 0 !important;
}
/* Reset das cols */
body.gh-shell-on .verification-banner .row > [class*="col-"] {
    flex: 0 0 auto !important;
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
}
/* Ícone + texto: primeiro bloco, ícone à esquerda, texto à direita */
body.gh-shell-on .verification-banner .col-10,
body.gh-shell-on .verification-banner .col-sm-7,
body.gh-shell-on .verification-banner .col-md-8 {
    order: 1 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.85rem !important;
    padding-right: 2rem !important; /* reserva espaço pro X absoluto */
}
/* Botão de ação: segundo bloco, full-width do toast */
body.gh-shell-on .verification-banner .col-12.col-sm-4,
body.gh-shell-on .verification-banner .col-12.col-md-3,
body.gh-shell-on .verification-banner .col-sm-4,
body.gh-shell-on .verification-banner .col-md-3 {
    order: 2 !important;
}
/* X close: absoluto no canto superior direito do toast */
body.gh-shell-on .verification-banner .col-2,
body.gh-shell-on .verification-banner .col-sm-1 {
    position: absolute !important;
    top: 0.5rem !important;
    right: 0.5rem !important;
    width: auto !important;
    margin: 0 !important;
    z-index: 2 !important;
}
/* Ícone — vira um círculo com cor accent */
body.gh-shell-on .verification-banner i[class*="fa-"] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f59e0b;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
}
/* Texto — hierarquia: primeiro trecho forte, o resto mudo */
body.gh-shell-on .verification-banner .text {
    flex: 1;
    min-width: 0;
    font-size: 0.9rem;
    color: #78350f;
    line-height: 1.45;
    font-weight: 500;
}
/* Botão de ação — vira um botão preenchido estilo gh-btn */
body.gh-shell-on .verification-banner .btn-action,
body.gh-shell-on .verification-banner .btn-default {
    background: #f59e0b !important;
    background-image: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.55rem 1.1rem !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25) !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease !important;
    white-space: nowrap;
    width: auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
body.gh-shell-on .verification-banner .btn-action:hover,
body.gh-shell-on .verification-banner .btn-default:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important;
    color: #fff !important;
}
body.gh-shell-on .verification-banner .btn-action:active {
    transform: translateY(0);
}
/* Botão de fechar (X) — redondo discreto */
body.gh-shell-on .verification-banner .btn.close {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: none !important;
    color: #92400e !important;
    opacity: 0.55 !important;
    font-size: 1.35rem !important;
    line-height: 1 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, opacity 0.12s ease !important;
    box-shadow: none !important;
    text-shadow: none !important;
    flex-shrink: 0;
}
body.gh-shell-on .verification-banner .btn.close:hover {
    background: rgba(245, 158, 11, 0.15) !important;
    opacity: 1 !important;
    color: #78350f !important;
}
body.gh-shell-on .verification-banner .btn.close span {
    line-height: 1 !important;
    font-size: 1.4rem !important;
    font-weight: 400 !important;
}
/* Loader do reenvio */
body.gh-shell-on .verification-banner .loader {
    margin-right: 0.3rem;
}
body.gh-shell-on .verification-banner .loader i {
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
    font-size: 0.85rem !important;
}
/* ===== Variações semânticas ===== */
/* Email verification — usa amber (warning) padrão.
   KYC (user-validation) — eleva pra danger (vermelho forte)
   pois é mais urgente (fraud check). */
body.gh-shell-on .verification-banner.user-validation {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-color: #fecaca;
    border-left-color: #ef4444;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.1);
}
body.gh-shell-on .verification-banner.user-validation i[class*="fa-"] {
    background: #ef4444;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}
body.gh-shell-on .verification-banner.user-validation .text {
    color: #7f1d1d;
}
body.gh-shell-on .verification-banner.user-validation .btn-action,
body.gh-shell-on .verification-banner.user-validation .btn-default {
    background-image: linear-gradient(135deg, #ef4444, #dc2626) !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important;
}
body.gh-shell-on .verification-banner.user-validation .btn-action:hover {
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4) !important;
}
body.gh-shell-on .verification-banner.user-validation .btn.close {
    color: #991b1b !important;
}
body.gh-shell-on .verification-banner.user-validation .btn.close:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #7f1d1d !important;
}
/* Network issues — info (azul) */
body.gh-shell-on .network-issues-notifications,
body.gh-shell-on .verification-banner.network-issues {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
    border-left: 4px solid #3b82f6;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin: 0 0 1rem;
    color: #1e40af;
}
body.gh-shell-on .network-issues-notifications i[class*="fa-"] {
    background: #3b82f6;
    color: #fff;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}
/* Botão de ação do toast ocupa full-width do card (estilo notificação) */
body.gh-shell-on .verification-banner .btn-action,
body.gh-shell-on .verification-banner .btn-default {
    width: 100% !important;
    padding: 0.65rem 1rem !important;
}
/* Texto do toast: um pouco maior e com line-height confortável */
body.gh-shell-on .verification-banner .text {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
}
/* ============================================================
   68. Dropdown de conta no topbar (avatar + nome)
   ------------------------------------------------------------
   Estilo hPanel/Vercel: hover/click no avatar+nome abre um
   menu vertical com Minha conta, Segurança, Contatos,
   Faturas, Ajuda e Sair. Com header mostrando nome+email.
   ============================================================ */
body.gh-shell-on .gh-topbar-slim__account-wrap {
    position: relative;
    display: inline-block;
}
/* Trigger: reusa .gh-topbar-slim__account, mas agora é button */
body.gh-shell-on button.gh-topbar-slim__account {
    background: none;
    border: none;
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    border-radius: 10px;
    transition: background 0.12s ease;
    color: var(--gh-sh-ink);
}
body.gh-shell-on button.gh-topbar-slim__account:hover,
body.gh-shell-on .gh-topbar-slim__account-wrap.is-open > button.gh-topbar-slim__account {
    background: rgba(103, 58, 183, 0.06);
}
body.gh-shell-on .gh-topbar-slim__account-caret {
    font-size: 0.65rem !important;
    color: var(--gh-sh-mute);
    transition: transform 0.18s ease;
    margin-right: 0.1rem;
}
body.gh-shell-on .gh-topbar-slim__account-wrap:hover .gh-topbar-slim__account-caret,
body.gh-shell-on .gh-topbar-slim__account-wrap.is-open .gh-topbar-slim__account-caret {
    transform: rotate(180deg);
    color: var(--gh-sh-brand);
}
/* ===== Menu dropdown ===== */
body.gh-shell-on .gh-account-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 280px;
    background: #fff;
    border: 1px solid var(--gh-sh-border);
    border-radius: 14px;
    box-shadow:
        0 20px 40px -12px rgba(15, 23, 42, 0.18),
        0 8px 16px -4px rgba(15, 23, 42, 0.08),
        0 0 0 1px rgba(15, 23, 42, 0.04);
    padding: 0.35rem;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}
/* Abre no hover (desktop) ou com .is-open (click/mobile/a11y) */
body.gh-shell-on .gh-topbar-slim__account-wrap:hover .gh-account-menu,
body.gh-shell-on .gh-topbar-slim__account-wrap:focus-within .gh-account-menu,
body.gh-shell-on .gh-topbar-slim__account-wrap.is-open .gh-account-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
/* Pontinha triangular (opcional, dá ancoragem visual) */
body.gh-shell-on .gh-account-menu::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 18px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-top: 1px solid var(--gh-sh-border);
    border-left: 1px solid var(--gh-sh-border);
    transform: rotate(45deg);
    z-index: -1;
}
/* Bridge invisível pra não fechar se o mouse passar pelo gap */
body.gh-shell-on .gh-topbar-slim__account-wrap::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    height: 12px;
    z-index: 9998;
}
/* ===== Header do menu (avatar + nome + email) ===== */
body.gh-shell-on .gh-account-menu__header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 0.85rem 0.9rem;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 0.25rem;
}
body.gh-shell-on .gh-account-menu__avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--gh-sh-brand), var(--gh-sh-brand-2));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(103, 58, 183, 0.25);
}
body.gh-shell-on .gh-account-menu__info {
    min-width: 0;
    flex: 1;
}
body.gh-shell-on .gh-account-menu__name {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--gh-sh-ink);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.gh-shell-on .gh-account-menu__email {
    display: block;
    font-size: 0.76rem;
    color: var(--gh-sh-mute);
    line-height: 1.3;
    margin-top: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* ===== Grupos de links ===== */
body.gh-shell-on .gh-account-menu__group {
    padding: 0.15rem 0;
    border-bottom: 1px solid #f1f5f9;
}
body.gh-shell-on .gh-account-menu__group:last-child {
    border-bottom: none;
}
/* ===== Itens do menu ===== */
body.gh-shell-on .gh-account-menu__item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    color: var(--gh-sh-ink-2);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: background 0.1s ease, color 0.1s ease;
}
body.gh-shell-on .gh-account-menu__item i {
    width: 18px;
    font-size: 0.85rem;
    color: var(--gh-sh-mute);
    text-align: center;
    flex-shrink: 0;
    transition: color 0.1s ease;
}
body.gh-shell-on .gh-account-menu__item:hover {
    background: rgba(103, 58, 183, 0.07);
    color: var(--gh-sh-brand);
    text-decoration: none !important;
}
body.gh-shell-on .gh-account-menu__item:hover i {
    color: var(--gh-sh-brand);
}
/* Item Sair — vermelho no hover (destrutivo) */
body.gh-shell-on .gh-account-menu__item--danger {
    color: #dc2626;
}
body.gh-shell-on .gh-account-menu__item--danger i {
    color: #ef4444;
}
body.gh-shell-on .gh-account-menu__item--danger:hover {
    background: rgba(239, 68, 68, 0.08);
    color: #b91c1c;
}
body.gh-shell-on .gh-account-menu__item--danger:hover i {
    color: #dc2626;
}
/* Item "Voltar ao admin" — âmbar (aparece só se admin masquerading) */
body.gh-shell-on .gh-account-menu__item--admin {
    color: #b45309;
}
body.gh-shell-on .gh-account-menu__item--admin i {
    color: #f59e0b;
}
body.gh-shell-on .gh-account-menu__item--admin:hover {
    background: rgba(245, 158, 11, 0.08);
    color: #92400e;
}
/* ===== Responsivo ===== */
@media (max-width: 540px) {
    body.gh-shell-on .gh-account-menu {
        width: 260px;
        right: -0.5rem;
    }
    body.gh-shell-on .gh-topbar-slim__account-name {
        display: none !important;
    }
}
/* ============================================================
   69. FIX: lupa no filtro de DataTables (SVG inline)
   ------------------------------------------------------------
   Na Section 64 matei o ::before do tema antigo porque estava
   renderizando o quadradinho bugado. Agora devolvo a lupa via
   SVG inline no background do input — não depende de
   webfont carregar, funciona em qualquer contexto.
   ============================================================ */
body.gh-shell-on .dataTables_filter input,
body.gh-shell-on input[type="search"].form-control,
body.gh-shell-on .form-control[type="search"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z' /%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 0.7rem center !important;
    background-size: 15px 15px !important;
    padding-left: 2.25rem !important;
}
body.gh-shell-on .dataTables_filter input:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.2' stroke='%23673ab7'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z' /%3E%3C/svg%3E") !important;
    border-color: var(--gh-sh-brand) !important;
    box-shadow: 0 0 0 3px rgba(103, 58, 183, 0.12) !important;
    outline: none !important;
}
/* ============================================================
   70. Sub-nav das páginas de conta (Minha conta / Segurança /
   Contatos / Métodos de pagamento / Usuários)
   ------------------------------------------------------------
   A Section 56 esconde a sidebar do WHMCS em todo o shell.
   Aqui TRAZEMOS DE VOLTA apenas nas páginas de conta — é lá
   que os links "Detalhes / Segurança / Contatos / Métodos de
   pagamento / Usuários" aparecem, servindo de sub-nav.
   Além disso, restilizamos essa sidebar pra virar um card
   de tabs vertical consistente com o design do shell.
   ============================================================ */
/* Mostra a sidebar da WHMCS SÓ nas páginas de conta (sem Segurança) */
body.gh-shell-on.tpl-clientareadetails .col-lg-4.col-xl-3,
body.gh-shell-on.tpl-user-profile .col-lg-4.col-xl-3,
body.gh-shell-on.tpl-accountusermanagement .col-lg-4.col-xl-3,
body.gh-shell-on.tpl-contacts .col-lg-4.col-xl-3,
body.gh-shell-on.tpl-clientareacontact .col-lg-4.col-xl-3,
body.gh-shell-on.tpl-clientareapaymentmethods .col-lg-4.col-xl-3,
body.gh-shell-on.tpl-paymentmethods .col-lg-4.col-xl-3,
body.gh-shell-on.tpl-changepw .col-lg-4.col-xl-3,
body.gh-shell-on.tpl-clientareaemails .col-lg-4.col-xl-3,
body.gh-shell-on.tpl-clientareaemailsview .col-lg-4.col-xl-3 {
    display: block !important;
}
/* CRÍTICO: também mostra o elemento .sidebar dentro da coluna
   (Section 56 esconde ele globalmente com !important) */
body.gh-shell-on.tpl-clientareadetails .col-lg-4.col-xl-3 .sidebar,
body.gh-shell-on.tpl-user-profile .col-lg-4.col-xl-3 .sidebar,
body.gh-shell-on.tpl-accountusermanagement .col-lg-4.col-xl-3 .sidebar,
body.gh-shell-on.tpl-contacts .col-lg-4.col-xl-3 .sidebar,
body.gh-shell-on.tpl-clientareacontact .col-lg-4.col-xl-3 .sidebar,
body.gh-shell-on.tpl-clientareapaymentmethods .col-lg-4.col-xl-3 .sidebar,
body.gh-shell-on.tpl-paymentmethods .col-lg-4.col-xl-3 .sidebar,
body.gh-shell-on.tpl-changepw .col-lg-4.col-xl-3 .sidebar,
body.gh-shell-on.tpl-clientareaemails .col-lg-4.col-xl-3 .sidebar,
body.gh-shell-on.tpl-clientareaemailsview .col-lg-4.col-xl-3 .sidebar {
    display: block !important;
}
/* Faz o primary-content voltar ao grid Bootstrap (66%/75%) quando a
   sidebar aparece — NUNCA usar `flex: 0 0 auto` aqui senão a coluna
   encolhe pro tamanho do conteúdo e some quando a página tem pouco
   conteúdo (bug da tela branca na página de segurança). */
body.gh-shell-on.tpl-clientareadetails .col-lg-8.col-xl-9,
body.gh-shell-on.tpl-clientareasecurity .col-lg-8.col-xl-9,
body.gh-shell-on.tpl-user-security .col-lg-8.col-xl-9,
body.gh-shell-on.tpl-user-profile .col-lg-8.col-xl-9,
body.gh-shell-on.tpl-user-password .col-lg-8.col-xl-9,
body.gh-shell-on.tpl-accountusermanagement .col-lg-8.col-xl-9,
body.gh-shell-on.tpl-contacts .col-lg-8.col-xl-9,
body.gh-shell-on.tpl-clientareacontact .col-lg-8.col-xl-9,
body.gh-shell-on.tpl-clientareapaymentmethods .col-lg-8.col-xl-9,
body.gh-shell-on.tpl-paymentmethods .col-lg-8.col-xl-9,
body.gh-shell-on.tpl-changepw .col-lg-8.col-xl-9,
body.gh-shell-on.tpl-clientareaemails .col-lg-8.col-xl-9,
body.gh-shell-on.tpl-clientareaemailsview .col-lg-8.col-xl-9 {
    flex: 0 0 66.666667% !important;
    max-width: 66.666667% !important;
    width: 66.666667% !important;
}
@media (min-width: 1200px) {
    body.gh-shell-on.tpl-clientareadetails .col-lg-8.col-xl-9,
    body.gh-shell-on.tpl-clientareasecurity .col-lg-8.col-xl-9,
    body.gh-shell-on.tpl-user-security .col-lg-8.col-xl-9,
    body.gh-shell-on.tpl-user-profile .col-lg-8.col-xl-9,
    body.gh-shell-on.tpl-user-password .col-lg-8.col-xl-9,
    body.gh-shell-on.tpl-accountusermanagement .col-lg-8.col-xl-9,
    body.gh-shell-on.tpl-contacts .col-lg-8.col-xl-9,
    body.gh-shell-on.tpl-clientareacontact .col-lg-8.col-xl-9,
    body.gh-shell-on.tpl-clientareapaymentmethods .col-lg-8.col-xl-9,
    body.gh-shell-on.tpl-paymentmethods .col-lg-8.col-xl-9,
    body.gh-shell-on.tpl-changepw .col-lg-8.col-xl-9,
    body.gh-shell-on.tpl-clientareaemails .col-lg-8.col-xl-9,
    body.gh-shell-on.tpl-clientareaemailsview .col-lg-8.col-xl-9 {
        flex: 0 0 75% !important;
        max-width: 75% !important;
        width: 75% !important;
    }
}
/* ============================================================
   Remove TOTALMENTE a seção "Segurança" de todas as navegações
   ------------------------------------------------------------
   A sidebar nativa do WHMCS (renderizada server-side) inclui
   links pra Segurança / Change Password / 2FA. Escondemos eles
   via seletor de atributo href.
   ============================================================ */
body.gh-shell-on .sidebar a[href*="action=security"],
body.gh-shell-on .sidebar a[href*="/account/security"],
body.gh-shell-on .sidebar a[href*="user-security"],
body.gh-shell-on .sidebar li:has(a[href*="action=security"]),
body.gh-shell-on .sidebar li:has(a[href*="/account/security"]),
body.gh-shell-on .sidebar li:has(a[href*="user-security"]),
body.gh-shell-on .list-group-item[href*="action=security"],
body.gh-shell-on .list-group-item[href*="/account/security"],
body.gh-shell-on .list-group-item[href*="user-security"],
body.gh-shell-on .gh-account-menu a[href*="action=security"],
body.gh-shell-on .gh-account-menu a[href*="user-security"] {
    display: none !important;
}
/* Se o usuário chegar na página de segurança via URL direta,
   a tela renderiza um aviso discreto no lugar do conteúdo */
body.gh-shell-on.tpl-clientareasecurity .primary-content,
body.gh-shell-on.tpl-user-security .primary-content {
    min-height: 200px;
}
body.gh-shell-on.tpl-clientareasecurity .primary-content::before,
body.gh-shell-on.tpl-user-security .primary-content::before {
    content: "Esta seção não está disponível. Redirecionando…";
    display: block;
    padding: 2rem;
    text-align: center;
    color: var(--gh-sh-mute);
    font-size: 0.95rem;
    background: #fff;
    border: 1px solid var(--gh-sh-border);
    border-radius: var(--gh-sh-radius);
    margin-bottom: 1rem;
}
/* ===== Restiliza a sidebar da WHMCS pra parecer um card tab ===== */
body.gh-shell-on .sidebar {
    background: #fff;
    border: 1px solid var(--gh-sh-border);
    border-radius: 14px;
    padding: 0.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}
/* Título do bloco (ex: "Minha conta") */
body.gh-shell-on .sidebar .list-group-item.header,
body.gh-shell-on .sidebar .sidebar-header,
body.gh-shell-on .sidebar > h2,
body.gh-shell-on .sidebar > h3 {
    background: transparent !important;
    border: none !important;
    padding: 0.75rem 0.85rem 0.5rem !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--gh-sh-mute) !important;
    margin: 0 !important;
}
/* Items da lista */
body.gh-shell-on .sidebar .list-group {
    border: none !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
}
body.gh-shell-on .sidebar .list-group-item {
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.55rem 0.8rem !important;
    margin: 0.1rem 0 !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    color: var(--gh-sh-ink-2) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    transition: background 0.12s ease, color 0.12s ease !important;
}
body.gh-shell-on .sidebar .list-group-item i,
body.gh-shell-on .sidebar .list-group-item .fa {
    width: 18px !important;
    font-size: 0.88rem !important;
    color: var(--gh-sh-mute) !important;
    text-align: center !important;
    margin: 0 !important;
    transition: color 0.12s ease !important;
}
body.gh-shell-on .sidebar .list-group-item:hover {
    background: rgba(103, 58, 183, 0.06) !important;
    color: var(--gh-sh-brand) !important;
    text-decoration: none !important;
}
body.gh-shell-on .sidebar .list-group-item:hover i,
body.gh-shell-on .sidebar .list-group-item:hover .fa {
    color: var(--gh-sh-brand) !important;
}
/* Item ativo */
body.gh-shell-on .sidebar .list-group-item.active,
body.gh-shell-on .sidebar .list-group-item.panel-sidebar--active,
body.gh-shell-on .sidebar .list-group-item[class*="active"] {
    background: linear-gradient(135deg, rgba(103, 58, 183, 0.1), rgba(0, 188, 212, 0.08)) !important;
    color: var(--gh-sh-brand) !important;
    font-weight: 600 !important;
}
body.gh-shell-on .sidebar .list-group-item.active i,
body.gh-shell-on .sidebar .list-group-item[class*="active"] i {
    color: var(--gh-sh-brand) !important;
}
/* Badge à direita (contador em alguns items) */
body.gh-shell-on .sidebar .list-group-item .badge,
body.gh-shell-on .sidebar .list-group-item .label {
    margin-left: auto !important;
    background: rgba(103, 58, 183, 0.1) !important;
    color: var(--gh-sh-brand) !important;
    font-size: 0.7rem !important;
    padding: 0.15rem 0.45rem !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
}
/* Em mobile, a sidebar fica full-width em cima da página */
@media (max-width: 991px) {
    body.gh-shell-on.tpl-clientareadetails .col-lg-4.col-xl-3,
    body.gh-shell-on.tpl-clientareasecurity .col-lg-4.col-xl-3,
    body.gh-shell-on.tpl-user-security .col-lg-4.col-xl-3,
    body.gh-shell-on.tpl-user-profile .col-lg-4.col-xl-3,
    body.gh-shell-on.tpl-user-password .col-lg-4.col-xl-3,
    body.gh-shell-on.tpl-accountusermanagement .col-lg-4.col-xl-3,
    body.gh-shell-on.tpl-contacts .col-lg-4.col-xl-3,
    body.gh-shell-on.tpl-clientareacontact .col-lg-4.col-xl-3,
    body.gh-shell-on.tpl-clientareapaymentmethods .col-lg-4.col-xl-3,
    body.gh-shell-on.tpl-paymentmethods .col-lg-4.col-xl-3,
    body.gh-shell-on.tpl-changepw .col-lg-4.col-xl-3,
    body.gh-shell-on.tpl-clientareaemails .col-lg-4.col-xl-3,
    body.gh-shell-on.tpl-clientareaemailsview .col-lg-4.col-xl-3 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 1rem !important;
    }
    body.gh-shell-on.tpl-clientareadetails .col-lg-8.col-xl-9,
    body.gh-shell-on.tpl-clientareasecurity .col-lg-8.col-xl-9,
    body.gh-shell-on.tpl-user-security .col-lg-8.col-xl-9,
    body.gh-shell-on.tpl-user-profile .col-lg-8.col-xl-9,
    body.gh-shell-on.tpl-user-password .col-lg-8.col-xl-9,
    body.gh-shell-on.tpl-accountusermanagement .col-lg-8.col-xl-9,
    body.gh-shell-on.tpl-contacts .col-lg-8.col-xl-9,
    body.gh-shell-on.tpl-clientareacontact .col-lg-8.col-xl-9,
    body.gh-shell-on.tpl-clientareapaymentmethods .col-lg-8.col-xl-9,
    body.gh-shell-on.tpl-paymentmethods .col-lg-8.col-xl-9,
    body.gh-shell-on.tpl-changepw .col-lg-8.col-xl-9,
    body.gh-shell-on.tpl-clientareaemails .col-lg-8.col-xl-9,
    body.gh-shell-on.tpl-clientareaemailsview .col-lg-8.col-xl-9 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}
/* ============================================================
   71. DASHBOARD VAZIO — Hero welcome estilo hPanel
   ------------------------------------------------------------
   Quando o usuário não tem serviço ativo, trocamos o empty
   state do card de hospedagem por um hero em duas colunas:
   copy + CTA à esquerda, mockup de "site online" à direita.
   Sem blobs animados, sem orbita girando — estética de
   screenshot de produto, no espírito do hPanel da Hostinger.
   ============================================================ */
/* ===== HERO WELCOME (empty state) ===== */
.gh-welcome {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    gap: 2.5rem;
    align-items: center;
    padding: 2.75rem 2.5rem;
    background: #ffffff;
    border: 1px solid var(--gh-sh-border);
    border-radius: 16px;
    margin-bottom: 1.25rem;
}
.gh-welcome__content {
    position: relative;
    z-index: 1;
}
.gh-welcome__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.3rem 0.9rem 0.3rem 0.35rem;
    background: rgba(103, 58, 183, 0.08);
    color: #4d1fa1;
    border: 1px solid rgba(103, 58, 183, 0.12);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 1.35rem;
}
.gh-welcome__badge-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #673ab7;
    color: #fff;
    border-radius: 50%;
    font-size: 0.62rem;
    flex-shrink: 0;
}
.gh-welcome__title {
    font-size: clamp(1.9rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.12;
    color: var(--gh-sh-ink);
    margin: 0 0 1.75rem;
    letter-spacing: -0.025em;
}
/* Highlight sólido com "marca-texto" embaixo — vibe hPanel */
.gh-welcome__highlight {
    position: relative;
    color: #673ab7;
    white-space: nowrap;
    z-index: 1;
}
.gh-welcome__highlight::after {
    content: "";
    position: absolute;
    left: -0.08em;
    right: -0.08em;
    bottom: 0.08em;
    height: 0.38em;
    background: rgba(103, 58, 183, 0.14);
    border-radius: 4px;
    z-index: -1;
}
.gh-welcome__sub {
    font-size: 1rem;
    color: var(--gh-sh-ink-2);
    line-height: 1.6;
    margin: 0 0 1.75rem;
    max-width: 520px;
}
.gh-welcome__ctas {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.gh-welcome__trust {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
.gh-welcome__trust li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    color: var(--gh-sh-ink-2);
    font-weight: 500;
}
.gh-welcome__trust i {
    color: #10b981;
    font-size: 0.85rem;
}
/* ===== Visual: mockup de "site online" + chips flutuantes ===== */
.gh-welcome__visual {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0;
}
.gh-welcome__mockup {
    position: relative;
    width: 100%;
    max-width: 360px;
    padding: 1rem 0.5rem;
}
/* Janela principal — chrome de browser + card de hospedagem */
.gh-welcome__window {
    position: relative;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    box-shadow:
        0 2px 4px rgba(15, 23, 42, 0.04),
        0 18px 40px rgba(15, 23, 42, 0.1),
        0 6px 16px rgba(103, 58, 183, 0.06);
    overflow: hidden;
}
.gh-welcome__window-chrome {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 0.9rem;
    background: linear-gradient(to bottom, #fafbfc, #f3f4f7);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.gh-welcome__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.gh-welcome__dot--r { background: #ff5f57; }
.gh-welcome__dot--y { background: #febc2e; }
.gh-welcome__dot--g { background: #28c840; }
.gh-welcome__url {
    margin-left: 0.75rem;
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.65rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 6px;
    font-size: 0.72rem;
    color: var(--gh-sh-ink-2);
    font-family: var(--gh-font-mono, 'JetBrains Mono', monospace);
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gh-welcome__url i {
    color: #10b981;
    font-size: 0.65rem;
    flex-shrink: 0;
}
.gh-welcome__window-body {
    padding: 1.1rem 1.25rem 1.25rem;
    background: #fff;
}
.gh-welcome__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
}
.gh-welcome__row-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #673ab7 0%, #8e24aa 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.95rem;
    flex-shrink: 0;
    box-shadow: 0 6px 14px rgba(103, 58, 183, 0.28);
}
.gh-welcome__lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.38rem;
    min-width: 0;
}
.gh-welcome__line {
    display: block;
    height: 8px;
    background: #eef0f4;
    border-radius: 4px;
}
.gh-welcome__line--title {
    width: 62%;
    height: 10px;
    background: #dfe3ea;
}
.gh-welcome__line--sub {
    width: 38%;
}
.gh-welcome__status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.55rem;
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}
.gh-welcome__status > span {
    width: 6px;
    height: 6px;
    background: #10b981;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}
.gh-welcome__meter {
    margin-bottom: 0.85rem;
}
.gh-welcome__meter:last-child {
    margin-bottom: 0;
}
.gh-welcome__meter-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}
.gh-welcome__meter-head span:first-child {
    font-size: 0.72rem;
    color: var(--gh-sh-ink-2);
    font-weight: 600;
}
.gh-welcome__meter-head span:last-child {
    font-size: 0.68rem;
    color: var(--gh-sh-mute);
    font-family: var(--gh-font-mono, 'JetBrains Mono', monospace);
}
.gh-welcome__meter-bar {
    height: 6px;
    background: #eef0f4;
    border-radius: 999px;
    overflow: hidden;
}
.gh-welcome__meter-bar > div {
    height: 100%;
    background: linear-gradient(90deg, #673ab7, #9c27b0);
    border-radius: 999px;
}
.gh-welcome__meter-fill--full {
    background: linear-gradient(90deg, #10b981, #059669) !important;
}
/* Chips flutuantes — estáticos, levemente rotacionados */
.gh-welcome__chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.8rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
    z-index: 2;
}
.gh-welcome__chip > i {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #fff;
    flex-shrink: 0;
}
.gh-welcome__chip > div {
    line-height: 1.1;
}
.gh-welcome__chip strong {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gh-sh-ink);
    margin-bottom: 0.12rem;
    letter-spacing: -0.01em;
}
.gh-welcome__chip span {
    display: block;
    font-size: 0.7rem;
    color: var(--gh-sh-mute);
}
.gh-welcome__chip--ssl {
    top: 18%;
    left: -0.5rem;
}
.gh-welcome__chip--ssl > i {
    background: linear-gradient(135deg, #10b981, #059669);
}
.gh-welcome__chip--uptime {
    bottom: 14%;
    right: -0.5rem;
}
.gh-welcome__chip--uptime > i {
    background: linear-gradient(135deg, #f59e0b, #ea580c);
}
/* ===== Responsivo ===== */
@media (max-width: 1100px) {
    .gh-welcome {
        grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
        gap: 2rem;
        padding: 2.25rem 1.75rem;
    }
    .gh-welcome__mockup {
        max-width: 320px;
    }
    .gh-welcome__chip--ssl    { left: 0; }
    .gh-welcome__chip--uptime { right: 0; }
}
@media (max-width: 900px) {
    .gh-welcome {
        grid-template-columns: 1fr;
        padding: 2rem 1.5rem;
        gap: 1.75rem;
    }
    .gh-welcome__visual {
        order: -1;
    }
    .gh-welcome__mockup {
        max-width: 340px;
        margin: 0 auto;
    }
}
/* ===== Utilitários de botão (usados pelos CTAs) ===== */
.gh-btn--block { width: 100%; justify-content: center; }
.gh-btn--lg {
    padding: 0.85rem 1.5rem;
    font-size: 0.95rem;
    border-radius: 10px;
}

/* =========  LOGIN PREMIUM — INÍCIO  ========= */
/*
 * Global Host — Login v4 (Identidade ÓRION · Big Tech Dark Premium)
 *
 * Este bloco é APENDADO no FINAL do /assets/css/custom.css.
 * TODOS os estilos aqui são escopados em `body.gh-login-page` pra não
 * vazar pra outras páginas de auth.
 *
 * Reusa as mesmas variáveis CSS (--orion-*) declaradas na Seção 50,
 * pra garantir paridade visual com o assistente Órion.
 *
 * Características:
 *   - Fundo dark (#0B0D12) com aurora violeta + ciano (radial blobs animados)
 *   - Topbar glassmorphism (backdrop-filter blur)
 *   - Card escuro com sombra Órion (40px) e glow interno
 *   - Marca orbital animada acima do título (conic-gradient cyan→indigo→purple)
 *   - Botão "Entrar" gradient violeta + glow violeta (igual orion-send)
 *   - Inputs em surface-2 com foco violeta + ring glow
 *   - Botões sociais em surface-2 com hover violeta
 *   - Trust chip com dot verde pulsante (igual orion-fab__pulse)
 *   - Link "Esqueceu?" e "Cadastre-se" em accent ciano
 *
 * Pra remover: apague tudo entre "INÍCIO" e "FIM" e salve.
 *
 * NÃO mexe em nenhuma classe .orion-* — só em .gh-login-page e seus filhos.
 */

/* ============== BASE ==============
 *
 * Duas regras pra cobrir DOIS cenários de uso:
 *
 *   1) /login.php (login.tpl)        → <body class="gh-auth-shell gh-login-page">
 *      Body inteiro vira fullscreen dark com aurora.
 *
 *   2) /index.php deslogado (homepage.tpl) → <div class="gh-panel gh-login-page">
 *      Card embedado dentro do template padrão do WHMCS (header/menu/footer
 *      do site continuam aparecendo). Sem fullscreen.
 *
 * A regra `body.gh-login-page` cuida do fullscreen.
 * A regra `.gh-login-page` cuida do que se aplica em ambos os contextos.
 * Daqui pra baixo, todos os descendentes são escopados em `.gh-login-page`.
 */
body.gh-login-page {
    background: var(--orion-bg, #0B0D12) !important;
    min-height: 100vh;
    overflow-x: hidden;
}

.gh-login-page {
    color: var(--orion-ink, #E7EAF0);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: -0.01em;
    position: relative;
}

/* ============== AURORA DE FUNDO ============== */
.gh-login-page .gh-auth-shell__bg {
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.gh-login-page .gh-auth-shell__blob {
    position: absolute !important;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
}

.gh-login-page .gh-auth-shell__blob--1 {
    width: 600px; height: 600px;
    top: -180px; right: -180px;
    background: radial-gradient(circle at center,
        rgba(139, 92, 246, 0.55), transparent 65%);
    animation: ghLoginBlob1 14s ease-in-out infinite alternate;
}

.gh-login-page .gh-auth-shell__blob--2 {
    width: 500px; height: 500px;
    bottom: -150px; left: -150px;
    background: radial-gradient(circle at center,
        rgba(34, 211, 238, 0.32), transparent 65%);
    animation: ghLoginBlob2 16s ease-in-out infinite alternate;
}

/* ============== TOPBAR ============== */
.gh-login-page .gh-auth-shell__topbar {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: rgba(11, 13, 18, 0.6) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.gh-login-page .gh-auth-shell__logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.gh-login-page .gh-auth-shell__logo img {
    height: 36px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    /* Força o logo branco — independe da cor original do PNG/SVG */
    filter: brightness(0) invert(1);
}

.gh-login-page .gh-auth-shell__back {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.9rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--orion-border, #262B36);
    border-radius: 10px;
    color: var(--orion-ink-2, #B7BCC8) !important;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: -0.005em;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.gh-login-page .gh-auth-shell__back:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--orion-ink, #E7EAF0) !important;
    border-color: var(--orion-brand, #8B5CF6);
}

/* ============== MAIN ============== */
.gh-login-page .gh-auth-shell__main {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem 2rem;
    min-height: calc(100vh - 64px - 80px);
}

/* ============== CARD (estilo orion-panel) ============== */
.gh-login-page .gh-auth-card {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 440px;
    padding: 2.5rem 2rem 2rem !important;
    background: var(--orion-surface, #12151C) !important;
    border: 1px solid var(--orion-border, #262B36) !important;
    border-radius: 20px !important;
    box-shadow:
        0 40px 80px -20px rgba(0, 0, 0, 0.55),
        0 16px 32px -12px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
    backdrop-filter: none;
}

/* Glow interno (mesmo padrão do orion-panel::before/::after) */
.gh-login-page .gh-auth-card::before {
    content: "";
    position: absolute;
    top: -140px; right: -100px;
    width: 380px; height: 380px;
    background: radial-gradient(circle at center,
        rgba(139, 92, 246, 0.22), transparent 62%);
    filter: blur(24px);
    pointer-events: none;
    z-index: 0;
}

.gh-login-page .gh-auth-card::after {
    content: "";
    position: absolute;
    bottom: -120px; left: -80px;
    width: 280px; height: 280px;
    background: radial-gradient(circle at center,
        rgba(34, 211, 238, 0.10), transparent 60%);
    filter: blur(30px);
    pointer-events: none;
    z-index: 0;
}

.gh-login-page .gh-auth-card > * {
    position: relative;
    z-index: 1;
}

/* ============== HEADER + MARCA ORBITAL ============== */
.gh-login-page .gh-login-card__header {
    text-align: center;
    margin-bottom: 1.5rem;
}

/* Marca orbital — DESATIVADA (substituída pelo logo via .gh-login-brand) */
.gh-login-page .gh-login-card__header::before {
    content: none;
}

/* Logo dentro do card — DESATIVADO (logo agora fica no topbar top-left) */
.gh-login-page .gh-login-brand {
    display: none !important;
}

.gh-login-page .gh-login-card__header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--orion-ink, #E7EAF0) !important;
    margin: 0 0 0.45rem;
}

.gh-login-page .gh-login-card__header p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--orion-ink-2, #B7BCC8) !important;
    margin: 0;
    letter-spacing: -0.005em;
}

/* ============== SOCIAL AUTH ============== */
.gh-login-page .gh-social-auth {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.gh-login-page .gh-btn-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.7rem 0.85rem;
    background: var(--orion-surface-2, #1A1E27) !important;
    border: 1px solid var(--orion-border, #262B36) !important;
    border-radius: 12px;
    color: var(--orion-ink, #E7EAF0) !important;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.gh-login-page .gh-btn-social:hover {
    background: var(--orion-surface-3, #222731) !important;
    border-color: var(--orion-brand, #8B5CF6) !important;
    transform: translateY(-1px);
    color: var(--orion-ink, #E7EAF0) !important;
}

.gh-login-page .gh-btn-social svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

/* ============== DIVIDER ============== */
.gh-login-page .gh-login-card__divider {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 1.25rem 0;
    color: var(--orion-mute, #7A8192);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    text-transform: lowercase;
}

.gh-login-page .gh-login-card__divider::before,
.gh-login-page .gh-login-card__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--orion-border, #262B36);
}

.gh-login-page .gh-login-card__divider span {
    flex-shrink: 0;
}

/* ============== FORM ============== */
.gh-login-page .gh-login-card__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Field */
.gh-login-page .gh-field { margin: 0; }

.gh-login-page .gh-field__label,
.gh-login-page .gh-field label.gh-field__label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    color: var(--orion-ink-2, #B7BCC8) !important;
    margin: 0 0 0.4rem;
    text-transform: none;
}

.gh-login-page .gh-field__label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.gh-login-page .gh-field__label-row .gh-field__label {
    margin-bottom: 0;
}

.gh-login-page .gh-field__helper-link {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--orion-accent, #22D3EE) !important;
    text-decoration: none;
    letter-spacing: -0.005em;
    transition: color .15s ease;
}

.gh-login-page .gh-field__helper-link:hover {
    color: #67E8F9 !important;
    text-decoration: underline;
}

/* Input */
.gh-login-page .gh-field__input,
.gh-login-page .gh-field input[type="email"],
.gh-login-page .gh-field input[type="password"],
.gh-login-page .gh-field input[type="text"] {
    width: 100%;
    padding: 0.78rem 1rem !important;
    background: var(--orion-surface-2, #1A1E27) !important;
    border: 1px solid var(--orion-border, #262B36) !important;
    border-radius: 12px !important;
    color: var(--orion-ink, #E7EAF0) !important;
    font-family: inherit !important;
    font-size: 0.92rem !important;
    line-height: 1.4 !important;
    letter-spacing: -0.005em;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    -webkit-text-fill-color: var(--orion-ink, #E7EAF0);
}

.gh-login-page .gh-field__input::placeholder,
.gh-login-page .gh-field input::placeholder {
    color: var(--orion-mute, #7A8192) !important;
    opacity: 1;
}

.gh-login-page .gh-field__input:focus,
.gh-login-page .gh-field input:focus,
.gh-login-page .gh-field input:focus-visible {
    border-color: var(--orion-brand, #8B5CF6) !important;
    background: var(--orion-surface-3, #222731) !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.28) !important;
}

/* Autofill — mantém o look dark mesmo com o auto-preenchido do browser */
.gh-login-page .gh-field input:-webkit-autofill,
.gh-login-page .gh-field input:-webkit-autofill:hover,
.gh-login-page .gh-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--orion-ink, #E7EAF0) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--orion-surface-2, #1A1E27) inset !important;
    transition: background-color 999999s ease-out 0s;
}

/* Toggle senha */
.gh-login-page .gh-field__with-toggle {
    position: relative;
}

.gh-login-page .gh-field__with-toggle .gh-field__input,
.gh-login-page .gh-field__with-toggle input {
    padding-right: 2.75rem !important;
}

.gh-login-page .gh-field__toggle {
    position: absolute;
    right: 0.45rem;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--orion-mute, #7A8192);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    font-size: 0.85rem;
}

.gh-login-page .gh-field__toggle:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--orion-ink, #E7EAF0);
}

/* ============== CHECKBOX ============== */
.gh-login-page .gh-field-check {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.85rem;
    color: var(--orion-ink-2, #B7BCC8);
    cursor: pointer;
    user-select: none;
    letter-spacing: -0.005em;
    margin: -0.15rem 0 0.1rem;
}

.gh-login-page .gh-field-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    background: var(--orion-surface-2, #1A1E27);
    border: 1px solid var(--orion-border, #262B36);
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background .15s ease, border-color .15s ease;
}

.gh-login-page .gh-field-check input[type="checkbox"]:hover {
    border-color: var(--orion-brand, #8B5CF6);
}

.gh-login-page .gh-field-check input[type="checkbox"]:checked {
    background: linear-gradient(135deg,
        var(--orion-brand, #8B5CF6),
        var(--orion-brand-2, #6D28D9));
    border-color: var(--orion-brand, #8B5CF6);
}

.gh-login-page .gh-field-check input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 5px;
    width: 5px;
    height: 9px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
}

/* ============== BOTÃO PRIMÁRIO (estilo orion-send / FAB) ============== */
.gh-login-page .gh-btn--primary,
.gh-login-page button.gh-btn--primary,
.gh-login-page button[type="submit"].gh-btn--primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    width: 100%;
    padding: 0.95rem 1.5rem !important;
    background: linear-gradient(135deg,
        var(--orion-brand, #8B5CF6),
        var(--orion-brand-2, #6D28D9)) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 12px !important;
    font-family: inherit !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    cursor: pointer;
    transition: transform .15s ease, background .2s ease, opacity .15s ease;
    box-shadow: none !important;
    position: relative;
    overflow: hidden;
    margin-top: 0.4rem;
    text-decoration: none;
    line-height: 1;
    -webkit-appearance: none;
}

/* Sliver de luz no topo — DESATIVADO (visual mais limpo, sem glow) */
.gh-login-page .gh-btn--primary::before {
    content: none;
}

.gh-login-page .gh-btn--primary:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg,
        #9D70F8,
        #7C3AED) !important;
    box-shadow: none !important;
}

.gh-login-page .gh-btn--primary:active {
    transform: translateY(0);
}

.gh-login-page .gh-btn--primary i {
    transition: transform .2s ease;
    position: relative;
    z-index: 1;
}

.gh-login-page .gh-btn--primary span {
    position: relative;
    z-index: 1;
}

.gh-login-page .gh-btn--primary:hover i {
    transform: translateX(4px);
}

/* ============== FOOTER DO CARD ============== */
.gh-login-page .gh-login-card__footer {
    margin-top: 1.4rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--orion-border, #262B36);
    text-align: center;
}

.gh-login-page .gh-login-card__signup {
    margin: 0;
    font-size: 0.88rem;
    color: var(--orion-ink-2, #B7BCC8) !important;
    letter-spacing: -0.005em;
}

.gh-login-page .gh-login-card__signup a {
    color: var(--orion-accent, #22D3EE) !important;
    font-weight: 600;
    text-decoration: none;
    margin-left: 0.3rem;
    transition: color .15s ease;
}

.gh-login-page .gh-login-card__signup a:hover {
    color: #67E8F9 !important;
    text-decoration: underline;
}

/* ============== TRUST CHIP (com pulse verde) ============== */
.gh-login-page .gh-auth-shell__trust {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: static !important;
    width: 100%;
    max-width: 440px;
}

.gh-login-page .gh-trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    background: rgba(11, 13, 18, 0.55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--orion-border, #262B36);
    border-radius: 999px;
    color: var(--orion-ink-2, #B7BCC8);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: -0.005em;
}

.gh-login-page .gh-trust-chip::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--orion-success, #22C55E);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
    animation: ghLoginPulse 2.2s ease-out infinite;
    flex-shrink: 0;
}

.gh-login-page .gh-trust-chip i {
    color: var(--orion-mute, #7A8192);
    font-size: 0.85rem;
}

/* ============== FOOTER DO SHELL ============== */
.gh-login-page .gh-auth-shell__foot {
    position: relative;
    z-index: 1;
    padding: 1.5rem;
    text-align: center;
    color: var(--orion-mute, #7A8192);
    font-size: 0.8rem;
    letter-spacing: -0.005em;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    background: rgba(11, 13, 18, 0.4);
}

.gh-login-page .gh-auth-shell__foot p {
    margin: 0 0 0.5rem;
}

.gh-login-page .gh-auth-shell__foot nav {
    display: inline-flex;
    gap: 1.4rem;
}

.gh-login-page .gh-auth-shell__foot a {
    color: var(--orion-ink-2, #B7BCC8);
    text-decoration: none;
    transition: color .15s ease;
}

.gh-login-page .gh-auth-shell__foot a:hover {
    color: var(--orion-accent, #22D3EE);
}

/* ============== ALERTAS WHMCS INLINE ============== */
.gh-login-page .gh-login-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 0.95rem;
    border-radius: 12px;
    font-size: 0.85rem;
    line-height: 1.45;
    margin-bottom: 1rem;
    letter-spacing: -0.005em;
}

.gh-login-page .gh-login-alert--error {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.28);
    color: #fca5a5;
}

.gh-login-page .gh-login-alert--warning {
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.28);
    color: #fde68a;
}

.gh-login-page .gh-login-alert i {
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 0.95em;
}

/* ============== ANIMAÇÕES ============== */
@keyframes ghLoginPulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

@keyframes ghLoginMarkSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes ghLoginBlob1 {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(-40px, 30px) scale(1.1); }
}

@keyframes ghLoginBlob2 {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(50px, -40px) scale(1.15); }
}

/* Reduz movimento se o usuário pedir */
@media (prefers-reduced-motion: reduce) {
    .gh-login-page .gh-auth-shell__blob,
    .gh-login-page .gh-login-card__header::before,
    .gh-login-page .gh-trust-chip::before {
        animation: none !important;
    }
}

/* ============== MOBILE ============== */
@media (max-width: 540px) {
    .gh-login-page .gh-auth-shell__main {
        padding: 2rem 1rem 1.5rem;
        min-height: calc(100vh - 64px - 100px);
    }
    .gh-login-page .gh-auth-card {
        padding: 2rem 1.4rem 1.5rem !important;
    }
    .gh-login-page .gh-social-auth {
        grid-template-columns: 1fr;
    }
    .gh-login-page .gh-auth-shell__foot nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
}

/* ===================================================================
 * HOMEPAGE EMBED — login renderizado dentro do homepage.tpl deslogado
 * ===================================================================
 *
 * Diferente do /login.php (body fullscreen), aqui o login aparece
 * EMBEDADO dentro do template padrão do WHMCS — header/menu/footer
 * do site continuam visíveis acima/abaixo. Mesma identidade Órion:
 * card escuro centralizado, logo Global Host com glow, botão violeta,
 * aurora discreta.
 *
 * Ativação: <div class="gh-panel gh-login-page"> no homepage.tpl
 *           dentro: <section class="gh-home-auth">...</section>
 *
 * Layout (v4.1): card único centralizado (sem coluna institucional).
 * Reusa 100% da estilização v4 do card (.gh-auth-card, .gh-login-card__*,
 * .gh-field, .gh-btn--primary, .gh-social-auth, .gh-trust-chip).
 */

/* ====== container que sobe o painel WHMCS pra ficar dark ======
   FULL-BLEED: escapa de qualquer container/wrapper do tema WHMCS
   pra ocupar 100% da viewport horizontal (sem borda branca lateral). */
.gh-panel.gh-login-page {
    background: var(--orion-bg, #0B0D12) !important;
    color: var(--orion-ink, #E7EAF0) !important;
    padding: 0 !important;
    /* Full-bleed horizontal: ignora padding/max-width do parent */
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: calc(100vh - 200px);
    position: relative;
    overflow: hidden;
    /* Remove qualquer borda/sombra herdada de .gh-panel */
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.gh-panel.gh-login-page > .container {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

/* ====== aurora de fundo (versão discreta, dentro do container) ====== */
.gh-panel.gh-login-page::before,
.gh-panel.gh-login-page::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}

.gh-panel.gh-login-page::before {
    width: 620px; height: 620px;
    top: -180px; right: -180px;
    background: radial-gradient(circle at center,
        rgba(139, 92, 246, 0.45), transparent 65%);
    opacity: 0.55;
    animation: ghLoginBlob1 14s ease-in-out infinite alternate;
}

.gh-panel.gh-login-page::after {
    width: 480px; height: 480px;
    bottom: -150px; left: -120px;
    background: radial-gradient(circle at center,
        rgba(34, 211, 238, 0.30), transparent 65%);
    opacity: 0.5;
    animation: ghLoginBlob2 16s ease-in-out infinite alternate;
}

/* ====== layout: card único centralizado ====== */
.gh-home-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 360px);
    padding: 1rem 0;
    position: relative;
}

/* Wrapper do card centralizado */
.gh-home-auth__card-wrap {
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    min-width: 0;
    margin: 0 auto;
}

/* O card em si reusa .gh-auth-card do v4 — só ajustes de padding pro embed */
.gh-home-auth__card-wrap .gh-auth-card {
    max-width: none;
    padding: 2.25rem 1.85rem 1.85rem !important;
}

/* Trust chip embaixo do card */
.gh-home-auth__card-wrap .gh-auth-shell__trust {
    margin-top: 0;
    max-width: none;
}

/* ====== RESPONSIVO ====== */
@media (max-width: 880px) {
    .gh-panel.gh-login-page > .container {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
    .gh-home-auth {
        min-height: auto;
        padding: 0.5rem 0;
    }
}

@media (max-width: 540px) {
    .gh-panel.gh-login-page::before {
        width: 380px; height: 380px;
        top: -120px; right: -120px;
    }
    .gh-panel.gh-login-page::after {
        width: 320px; height: 320px;
        bottom: -100px; left: -100px;
    }
    .gh-panel.gh-login-page > .container {
        padding-top: 1.75rem;
        padding-bottom: 1.75rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .gh-home-auth__card-wrap .gh-auth-card {
        padding: 1.85rem 1.3rem 1.5rem !important;
    }
    .gh-home-auth__card-wrap {
        max-width: 100%;
    }
}

/* ===================================================================
 * FULLSCREEN DESLOGADO — esconde chrome do site WHMCS na home deslogada
 * ===================================================================
 *
 * Ativado via JS no homepage.tpl: `<html class="gh-deslogado-full">`
 * + `<body class="gh-deslogado-full">`. Resultado: a home deslogada
 * vira uma tela cheia escura (igual /login.php), sem o header/menu/
 * footer do site Global Host por cima e por baixo (que aparecem
 * brancos por serem do tema do site corporativo).
 *
 * As regras abaixo são DEFENSIVAS — escondem qualquer combinação
 * comum de seletores de header/footer que o tema WHMCS use.
 * Se algum elemento residual continuar aparecendo, é só adicionar
 * o seletor dele a esta lista.
 */

html.gh-deslogado-full,
body.gh-deslogado-full {
    background: var(--orion-bg, #0B0D12) !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh;
}

/* Esconde o chrome do site WHMCS quando estiver no modo deslogado fullscreen */
body.gh-deslogado-full > header,
body.gh-deslogado-full > nav,
body.gh-deslogado-full > footer,
body.gh-deslogado-full > .header,
body.gh-deslogado-full > .footer,
body.gh-deslogado-full > .navbar,
body.gh-deslogado-full > .topbar,
body.gh-deslogado-full > #header,
body.gh-deslogado-full > #footer,
body.gh-deslogado-full > .site-header,
body.gh-deslogado-full > .site-footer,
body.gh-deslogado-full .gh-site-header,
body.gh-deslogado-full .gh-site-footer,
body.gh-deslogado-full .main-navbar-wrapper,
body.gh-deslogado-full .navbar-wrapper,
body.gh-deslogado-full .main-header,
body.gh-deslogado-full .main-footer,
body.gh-deslogado-full .footer-wrap,
body.gh-deslogado-full .pre-footer {
    display: none !important;
}

/* Reset agressivo de padding/margin de TODOS os pais comuns do WHMCS
   quando estamos no modo deslogado fullscreen. Sem isso, o body/wrapper
   do tema deixa uma faixa preta vazia em cima do topbar. */
body.gh-deslogado-full,
body.gh-deslogado-full > div,
body.gh-deslogado-full > main,
body.gh-deslogado-full > section,
body.gh-deslogado-full .container,
body.gh-deslogado-full .container-fluid,
body.gh-deslogado-full #main-content,
body.gh-deslogado-full #main-body,
body.gh-deslogado-full #content,
body.gh-deslogado-full .main-content,
body.gh-deslogado-full .content-wrapper,
body.gh-deslogado-full .page-wrapper,
body.gh-deslogado-full .body-wrap,
body.gh-deslogado-full .main-body-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* SOLUÇÃO RADICAL: painel cobre a viewport inteira com position:fixed.
   Não importa que header/footer/wrapper o tema do WHMCS renderize ao
   redor — fica tudo coberto pelo painel. Acaba o jogo de gato-e-rato
   tentando esconder cada seletor.
   O topbar agora vive DENTRO do painel em fluxo normal (rola junto). */
body.gh-deslogado-full {
    overflow: hidden !important;
}
body.gh-deslogado-full .gh-panel.gh-login-page {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 9999 !important;
    background: #0A0A0F !important;
}

/* Neutraliza o .container interno do homepage.tpl no modo deslogado.
   O container do tema WHMCS tem max-width e padding que apertam o
   topbar e a seção do card. Aqui ele vira transparente. */
body.gh-deslogado-full .gh-panel.gh-login-page > .container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Topbar do homepage.tpl deslogado — em fluxo normal DENTRO do painel.
   Como o painel é position:fixed cobrindo a viewport, o topbar fica no
   topo automaticamente. Rolando o conteúdo, ele rola junto (sem overlap
   no card no mobile). Mesma identidade visual do /login.php. */
.gh-home-auth__topbar {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
}

/* .gh-home-auth — wrapper que centraliza o card.
   Padding lateral generoso pra dar respiro do card pras bordas da tela. */
.gh-home-auth {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2rem 1.5rem 3rem 1.5rem !important;
    margin: 0 !important;
}
body.gh-deslogado-full .gh-home-auth {
    min-height: calc(100vh - 80px);
    margin-top: 0 !important;
}

@media (max-width: 540px) {
    .gh-home-auth {
        padding: 1.5rem 1rem 2.5rem 1rem !important;
    }
    body.gh-deslogado-full .gh-home-auth {
        min-height: calc(100vh - 70px);
    }
}

/* =========================================================================
 * REFINO MINIMALISTA v4.3
 * -------------------------------------------------------------------------
 * Por cima dos blocos anteriores, esta camada ENXUGA o visual pra ficar
 * no padrão Stripe/Vercel/Linear/Anthropic: fundo sólido, sem aurora,
 * tipografia respirando, card com border 1px sutil (sem sombra dramática
 * nem glow), botão sólido (sem gradient), spacing generoso.
 *
 * Tirar elementos > somar elementos. É essa camada que separa "site de
 * agência boa" de "site de empresa de tecnologia premium".
 * ========================================================================= */

/* 1) Fundo sólido — mata a aurora violeta+ciano e os blobs animados */
.gh-login-page .gh-auth-shell__bg,
.gh-login-page .gh-auth-shell__blob,
.gh-login-page .gh-auth-shell__blob--1,
.gh-login-page .gh-auth-shell__blob--2 {
    display: none !important;
}

body.gh-login-page,
body.gh-deslogado-full,
.gh-panel.gh-login-page {
    background: #0A0A0F !important;
}

/* 2) Topbar minimalista — sem backdrop blur, sem borda, sem fundo.
      É só uma faixa de transição com logo + botão de voltar.
      No modo deslogado-full ele é position:fixed (regra do bloco
      FULLSCREEN DESLOGADO), aqui só refinamos a estética. */
.gh-login-page .gh-auth-shell__topbar,
.gh-home-auth__topbar {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    padding: 1.5rem 2.5rem !important;
}

.gh-login-page .gh-auth-shell__back,
.gh-home-auth__topbar .gh-auth-shell__back {
    background: transparent !important;
    border: 0 !important;
    color: rgba(231, 234, 240, .7) !important;
    font-size: .875rem !important;
    font-weight: 500 !important;
    padding: .5rem .75rem !important;
    border-radius: 8px !important;
    transition: color .15s ease, background .15s ease !important;
}
.gh-login-page .gh-auth-shell__back:hover,
.gh-home-auth__topbar .gh-auth-shell__back:hover {
    color: #FAFAFA !important;
    background: rgba(255, 255, 255, .05) !important;
}

/* Mobile — topbar tem que ficar 100% visível.
   Logo maior, cor totalmente sólida, botão de voltar com peso real. */
@media (max-width: 540px) {
    .gh-login-page .gh-auth-shell__topbar,
    .gh-home-auth__topbar {
        padding: 1rem 1.25rem !important;
    }
    .gh-login-page .gh-auth-shell__logo img {
        height: 30px !important;
        max-width: 150px !important;
        opacity: 1 !important;
    }
    .gh-login-page .gh-auth-shell__back,
    .gh-home-auth__topbar .gh-auth-shell__back {
        color: #FAFAFA !important;
        font-size: .8125rem !important;
        font-weight: 600 !important;
        padding: .5rem .625rem !important;
        background: rgba(255, 255, 255, .06) !important;
        border: 1px solid rgba(255, 255, 255, .1) !important;
    }
    .gh-login-page .gh-auth-shell__back i {
        font-size: .75rem !important;
    }
}

/* 3) Card limpo — border 1px sutil, sem sombra dramática, sem glow.
      Padding generoso pra dar respiro. */
.gh-login-page .gh-auth-card {
    background: #0F1015 !important;
    border: 1px solid rgba(255, 255, 255, .06) !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .02) inset, 0 0 0 1px rgba(0, 0, 0, .2) !important;
    padding: 3rem 2.75rem !important;
    max-width: 440px !important;
    width: 100% !important;
}

.gh-login-page .gh-auth-card::before,
.gh-login-page .gh-auth-card::after {
    content: none !important;
}

@media (max-width: 540px) {
    .gh-login-page .gh-auth-card {
        padding: 2.25rem 1.5rem !important;
        border-radius: 14px !important;
    }
}

/* 4) Tipografia confiante — título grande, peso 600 (não 700), tracking
      negativo sutil. Subtítulo em cinza sem peso visual. */
.gh-login-page .gh-login-card__header {
    text-align: left !important;
    margin-bottom: 2rem !important;
}

.gh-login-page .gh-login-card__header h2 {
    font-size: 1.625rem !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    color: #FAFAFA !important;
    margin: 0 0 .5rem 0 !important;
}

.gh-login-page .gh-login-card__header p {
    font-size: .9375rem !important;
    line-height: 1.5 !important;
    color: rgba(231, 234, 240, .55) !important;
    margin: 0 !important;
    font-weight: 400 !important;
}

/* 5) Spacing entre seções — respiro generoso */
.gh-login-page .gh-social-auth {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: .625rem !important;
    margin-bottom: 1.5rem !important;
}

.gh-login-page .gh-btn-social {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    color: #E7EAF0 !important;
    padding: .75rem 1rem !important;
    border-radius: 10px !important;
    font-size: .875rem !important;
    font-weight: 500 !important;
    transition: background .15s ease, border-color .15s ease !important;
    box-shadow: none !important;
}
.gh-login-page .gh-btn-social:hover {
    background: rgba(255, 255, 255, .03) !important;
    border-color: rgba(255, 255, 255, .14) !important;
}

.gh-login-page .gh-login-card__divider {
    margin: 1.5rem 0 !important;
    color: rgba(231, 234, 240, .35) !important;
    font-size: .75rem !important;
    text-transform: lowercase !important;
    letter-spacing: 0 !important;
}
.gh-login-page .gh-login-card__divider::before,
.gh-login-page .gh-login-card__divider::after {
    background: rgba(255, 255, 255, .08) !important;
}

/* 6) Inputs — fundo levemente mais claro que o card, border sutil,
      foco com outline violeta SUTIL (não glow) */
.gh-login-page .gh-field {
    margin-bottom: 1.125rem !important;
}

.gh-login-page .gh-field__label {
    font-size: .8125rem !important;
    font-weight: 500 !important;
    color: rgba(231, 234, 240, .8) !important;
    margin-bottom: .5rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.gh-login-page .gh-field__input {
    background: #16171D !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 10px !important;
    padding: .75rem .875rem !important;
    font-size: .9375rem !important;
    color: #FAFAFA !important;
    transition: border-color .15s ease, background .15s ease !important;
    box-shadow: none !important;
}
.gh-login-page .gh-field__input::placeholder {
    color: rgba(231, 234, 240, .3) !important;
}
.gh-login-page .gh-field__input:hover {
    border-color: rgba(255, 255, 255, .14) !important;
}
.gh-login-page .gh-field__input:focus {
    border-color: #7C3AED !important;
    background: #181A21 !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .15) !important;
}

.gh-login-page .gh-field__helper-link {
    color: rgba(231, 234, 240, .55) !important;
    font-size: .8125rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}
.gh-login-page .gh-field__helper-link:hover {
    color: #FAFAFA !important;
}

.gh-login-page .gh-field-check {
    margin: 1rem 0 1.5rem 0 !important;
    font-size: .875rem !important;
    color: rgba(231, 234, 240, .7) !important;
}

/* 7) Botão primário — sólido, sem gradient, sem glow.
      Hover sutil, transição rápida. Esse é o detalhe que mais conta. */
.gh-login-page .gh-btn--primary,
.gh-login-page button[type="submit"].gh-btn--primary {
    background: #7C3AED !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border: 0 !important;
    border-radius: 10px !important;
    padding: .8125rem 1.25rem !important;
    font-size: .9375rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
    transition: background .15s ease !important;
    height: auto !important;
    min-height: 0 !important;
}
.gh-login-page .gh-btn--primary:hover,
.gh-login-page button[type="submit"].gh-btn--primary:hover {
    background: #8B5CF6 !important;
    background-image: none !important;
    transform: none !important;
    box-shadow: none !important;
}
.gh-login-page .gh-btn--primary:active {
    background: #6D28D9 !important;
}
.gh-login-page .gh-btn--primary::before,
.gh-login-page .gh-btn--primary::after {
    content: none !important;
}

/* 8) Footer do card — link de cadastro discreto, sem destaque exagerado */
.gh-login-page .gh-login-card__footer {
    margin-top: 1.75rem !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid rgba(255, 255, 255, .06) !important;
    text-align: center !important;
}
.gh-login-page .gh-login-card__signup {
    font-size: .875rem !important;
    color: rgba(231, 234, 240, .55) !important;
    margin: 0 !important;
}
.gh-login-page .gh-login-card__signup a {
    color: #FAFAFA !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}
.gh-login-page .gh-login-card__signup a:hover {
    color: #A78BFA !important;
}

/* 9) Footer geral — bem discreto, cinza muito sutil */
.gh-login-page .gh-auth-shell__foot {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 1.5rem 2.5rem !important;
    color: rgba(231, 234, 240, .35) !important;
    font-size: .8125rem !important;
}
.gh-login-page .gh-auth-shell__foot a {
    color: rgba(231, 234, 240, .55) !important;
    text-decoration: none !important;
}
.gh-login-page .gh-auth-shell__foot a:hover {
    color: #E7EAF0 !important;
}

/* 10) Logo no topbar — branco sólido, tamanho moderado */
.gh-login-page .gh-auth-shell__logo img {
    height: 32px !important;
    max-width: 180px !important;
    filter: brightness(0) invert(1) !important;
    opacity: .9 !important;
}
.gh-login-page .gh-auth-shell__logo:hover img {
    opacity: 1 !important;
}

/* ============================================================
 * SOCIAL LOGIN WHMCS (linkedaccounts.tpl) — visual ÓRION
 * ============================================================
 * O include do WHMCS gera <div class="providerPreLinking">
 * → <div class="social-signin-btns"> → botões/anchors dos
 * provedores (Google, Facebook etc.). Aqui forçamos o visual
 * dark / pill com largura 100% pra casar com o card de login.
 *
 * Importante: NÃO mexer no JS dos botões — apenas estilo.
 */

.gh-social-auth--whmcs .providerPreLinking,
.gh-social-auth--whmcs .social-signin-btns {
    display: flex !important;
    flex-direction: column !important;
    gap: .55rem !important;
    width: 100% !important;
    margin: 0 0 .25rem !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Container default do WHMCS pode ser <ul> ou <div>: zera resets */
.gh-social-auth--whmcs ul.social-signin-btns,
.gh-social-auth--whmcs ol.social-signin-btns {
    margin: 0 !important;
    padding: 0 !important;
}
.gh-social-auth--whmcs .social-signin-btns > li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* Botão / link de cada provedor — pill dark, alinhado ao tema */
.gh-social-auth--whmcs .social-signin-btns a,
.gh-social-auth--whmcs .social-signin-btns button,
.gh-social-auth--whmcs .social-signin-btns input[type="submit"],
.gh-social-auth--whmcs .social-signin-btns .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .55rem !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: .65rem 1rem !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.04) !important;
    color: #F5F5FA !important;
    font: 600 .92rem/1.2 var(--gh-font, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background .15s ease, border-color .15s ease, transform .05s ease !important;
    box-shadow: none !important;
}
.gh-social-auth--whmcs .social-signin-btns a:hover,
.gh-social-auth--whmcs .social-signin-btns button:hover,
.gh-social-auth--whmcs .social-signin-btns .btn:hover {
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.22) !important;
    color: #fff !important;
    text-decoration: none !important;
}
.gh-social-auth--whmcs .social-signin-btns a:active,
.gh-social-auth--whmcs .social-signin-btns button:active {
    transform: translateY(1px) !important;
}

/* Ícones (FA ou imagens) dentro dos botões — tamanho consistente */
.gh-social-auth--whmcs .social-signin-btns i,
.gh-social-auth--whmcs .social-signin-btns svg,
.gh-social-auth--whmcs .social-signin-btns img {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
}

/* Variante específica por provedor — quando o WHMCS atribui
   classe contendo o nome (ex: "btn-google", "facebook-login-button"),
   pintamos a borda da cor da marca pra dar identidade. */
.gh-social-auth--whmcs .social-signin-btns [class*="google" i] i,
.gh-social-auth--whmcs .social-signin-btns [class*="google" i] svg path[fill]:first-child {
    color: #4285F4 !important;
}
.gh-social-auth--whmcs .social-signin-btns [class*="facebook" i] i {
    color: #1877F2 !important;
}
.gh-social-auth--whmcs .social-signin-btns [class*="twitter" i] i,
.gh-social-auth--whmcs .social-signin-btns [class*="x-twitter" i] i {
    color: #1DA1F2 !important;
}
.gh-social-auth--whmcs .social-signin-btns [class*="github" i] i {
    color: #fff !important;
}
.gh-social-auth--whmcs .social-signin-btns [class*="microsoft" i] i,
.gh-social-auth--whmcs .social-signin-btns [class*="windowslive" i] i {
    color: #00A4EF !important;
}
.gh-social-auth--whmcs .social-signin-btns [class*="apple" i] i {
    color: #fff !important;
}

/* Mensagens de feedback do OAuth (erro / sucesso) injetadas pelo WHMCS */
.gh-login-page .providerLinkingFeedback {
    margin: .5rem 0 0 !important;
    color: #F5F5FA !important;
    font-size: .88rem !important;
    text-align: center !important;
}
.gh-login-page .providerLinkingFeedback:empty { display: none !important; }
.gh-login-page .providerLinkingFeedback .alert {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: #F5F5FA !important;
    border-radius: 10px !important;
    padding: .55rem .8rem !important;
}

/* ============================================================
 * GOOGLE IDENTITY SERVICES — re-renderizado por nós via JS
 * ============================================================
 * O JS no login.tpl chama google.accounts.id.renderButton() na
 * div .g_id_signin com tema filled_black + shape pill + width
 * dinâmica = largura do parent. Aqui só zeramos qualquer borda
 * herdada do .gh-social-auth--whmcs (que é genérica) pra não
 * duplicar borda em volta do iframe oficial.
 */

.gh-social-auth--whmcs .g_id_signin {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
}
.gh-social-auth--whmcs .g_id_signin > div,
.gh-social-auth--whmcs .g_id_signin iframe {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    color-scheme: dark !important;
}
/* Skeleton enquanto o iframe não chegou */
.gh-social-auth--whmcs .g_id_signin:empty {
    min-height: 44px !important;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 22px !important;
    position: relative !important;
}
.gh-social-auth--whmcs .g_id_signin:empty::after {
    content: 'Carregando…' !important;
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255,255,255,.45) !important;
    font: 600 .85rem/1 var(--gh-font, "Inter", sans-serif) !important;
}

/* Container Google One Tap (a propaganda flutuante no topo direito)
   — quando aparece em cima do nosso card escuro pode ofuscar.
   Force z-index baixo pro caso de conflitar. */
#credential_picker_container,
#credential_picker_iframe { z-index: 99 !important; }

/* Wrapper do botão Facebook (anchor simples gerado pelo WHMCS) — fica
   no nosso pill dark já estilizado acima. Aqui só garantimos largura. */
.gh-social-auth--whmcs .fb-login-button,
.gh-social-auth--whmcs [data-provider="facebook"] {
    width: 100% !important;
}

/* ============================================================
 * SOCIAL LOGIN — variante ICON-ONLY (lado a lado, só logo)
 * ============================================================
 * Usado no login.tpl como `.gh-social-auth--icons`.
 * Layout: pills horizontais, mesma largura, logo da marca centrado,
 * texto escondido visualmente (acessível via aria-label + .gh-sr-only).
 * Hover: leve elevação + glow da cor da marca.
 */

/* IMPORTANTE: usa .gh-login-page na frente pra vencer a regra anterior
   (`.gh-login-page .gh-social-auth { display: grid; ... }` na linha ~12074
   força 2 colunas e quebra os 3 botões em 2 linhas). */
.gh-login-page .gh-social-auth.gh-social-auth--icons,
.gh-social-auth.gh-social-auth--icons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: .8rem !important;
    width: 100% !important;
    margin: 0 0 .25rem !important;
    padding: 0 !important;
    grid-template-columns: none !important;
}

.gh-login-page .gh-social-auth--icons .gh-btn-social,
.gh-social-auth--icons .gh-btn-social {
    flex: 0 0 auto !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 50% !important;
    color: #F5F5FA !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.02) inset !important;
    font-size: 0 !important;
}

.gh-social-auth--icons .gh-btn-social:hover {
    background: rgba(255,255,255,.07) !important;
    border-color: rgba(255,255,255,.22) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.04) inset !important;
}

.gh-social-auth--icons .gh-btn-social:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.4) !important;
}

.gh-social-auth--icons .gh-btn-social:focus-visible {
    outline: 2px solid rgba(168,85,247,.6) !important;
    outline-offset: 2px !important;
}

/* Hover com glow da cor da marca (sutil) */
.gh-social-auth--icons .gh-btn-social--google:hover {
    border-color: rgba(66,133,244,.45) !important;
    box-shadow: 0 6px 18px rgba(66,133,244,.18), 0 1px 0 rgba(255,255,255,.04) inset !important;
}
.gh-social-auth--icons .gh-btn-social--facebook:hover {
    border-color: rgba(24,119,242,.45) !important;
    box-shadow: 0 6px 18px rgba(24,119,242,.18), 0 1px 0 rgba(255,255,255,.04) inset !important;
}
.gh-social-auth--icons .gh-btn-social--github:hover {
    border-color: rgba(255,255,255,.45) !important;
    box-shadow: 0 6px 18px rgba(255,255,255,.10), 0 1px 0 rgba(255,255,255,.04) inset !important;
}

/* Logo da marca — tamanho consistente */
.gh-social-auth--icons .gh-btn-social svg {
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
    display: block !important;
}

/* Esconde texto visualmente mas mantém para leitor de tela.
   (Definido aqui pra não depender de outras libs como Bootstrap .sr-only) */
.gh-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Em telas estreitas, reduz pill e gap (mantendo especificidade alta). */
@media (max-width: 420px) {
    .gh-login-page .gh-social-auth.gh-social-auth--icons,
    .gh-social-auth.gh-social-auth--icons { gap: .55rem !important; }
    .gh-login-page .gh-social-auth--icons .gh-btn-social,
    .gh-social-auth--icons .gh-btn-social {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
    }
    .gh-social-auth--icons .gh-btn-social svg {
        width: 22px !important;
        height: 22px !important;
    }
}
@media (max-width: 340px) {
    .gh-login-page .gh-social-auth.gh-social-auth--icons,
    .gh-social-auth.gh-social-auth--icons { gap: .4rem !important; }
    .gh-login-page .gh-social-auth--icons .gh-btn-social,
    .gh-social-auth--icons .gh-btn-social {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
    }
    .gh-social-auth--icons .gh-btn-social svg {
        width: 20px !important;
        height: 20px !important;
    }
}

/* ============================================================
 * REFINAMENTOS — login.tpl (v5)
 * ============================================================ */

/* Cabeçalho do card centralizado */
.gh-login-page .gh-login-card__header {
    text-align: center !important;
    margin-bottom: 1.4rem !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}
.gh-login-page .gh-login-card__header h2 {
    text-align: center !important;
    margin: 0 0 .5rem !important;
    letter-spacing: -.01em !important;
}
.gh-login-page .gh-login-card__header p {
    text-align: center !important;
    color: rgba(245, 245, 250, .68) !important;
    font-size: .92rem !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    max-width: 32ch !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Caption sob os ícones de login social */
.gh-login-page .gh-social-caption {
    text-align: center !important;
    color: rgba(245, 245, 250, .48) !important;
    font-size: .78rem !important;
    font-weight: 500 !important;
    letter-spacing: .01em !important;
    margin: .55rem 0 0 !important;
    padding: 0 !important;
}

/* Divisor "ou com email" — gap maior antes dele */
.gh-login-page .gh-login-card__divider {
    margin: 1.35rem 0 1.15rem !important;
}

/* Footer signup — centralizado, link com peso visual */
.gh-login-page .gh-login-card__footer {
    text-align: center !important;
    margin-top: 1.25rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid rgba(255, 255, 255, .06) !important;
}
.gh-login-page .gh-login-card__signup {
    text-align: center !important;
    color: rgba(245, 245, 250, .68) !important;
    font-size: .9rem !important;
    margin: 0 !important;
}
.gh-login-page .gh-login-card__signup a {
    color: #C084FC !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    margin-left: .25rem !important;
}
.gh-login-page .gh-login-card__signup a:hover {
    color: #DDD6FE !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

/* Fade-in suave do card ao carregar a página */
.gh-login-page .gh-auth-card {
    animation: ghCardIn .55s cubic-bezier(.2, .7, .3, 1) both !important;
}
@keyframes ghCardIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Respeita usuário que pediu menos animação */
@media (prefers-reduced-motion: reduce) {
    .gh-login-page .gh-auth-card { animation: none !important; }
}

/* Botão Entrar — efeito sutil de elevação no hover (consistência com Órion) */
.gh-login-page .gh-btn--primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 24px rgba(168, 85, 247, .28) !important;
}
.gh-login-page .gh-btn--primary:active {
    transform: translateY(0) !important;
}

/* ============================================================
 * APERTAR ESPAÇOS — form de login (v5.1)
 * ============================================================
 * Removendo margem extra da checkbox "Lembrar" e diminuindo o gap
 * geral do form pra ficar mais compacto e elegante.
 */

/* Form com gap menor entre campos */
.gh-login-page .gh-login-card__form {
    gap: .85rem !important;
}

/* Zera margens do checkbox (estavam somando com o gap do form e
   criando ~70px de vazio ao redor de "Lembrar"). */
.gh-login-page .gh-field-check {
    margin: .15rem 0 .25rem !important;
}

/* Card com padding inferior reduzido (menos vazio sob o botão Entrar) */
.gh-login-page .gh-auth-card {
    padding-bottom: 1.5rem !important;
}

/* Botão Entrar com margem-top mínima (gap do form basta) */
.gh-login-page .gh-login-card__form .gh-btn--primary {
    margin-top: .25rem !important;
}

/* ============================================================
 * REGISTER PAGE v6 — design ÓRION minimalista
 * ============================================================
 * Sem fieldset boxes (zero "card-on-card"), sem step bubbles,
 * sem 3 colunas. Só uma coluna principal com pares 2-col onde
 * faz sentido (nome/sobrenome, cidade/CEP, estado/país, senha).
 * Headers de seção como labels uppercase sutis.
 */

/* Card largo elegante (não enorme) */
.gh-register-page .gh-auth-card,
.gh-register-page .gh-auth-card.gh-auth-card--register {
    max-width: 540px !important;
    padding: 2.25rem 2rem 1.75rem !important;
}
.gh-home-auth__card-wrap--wide {
    max-width: 580px !important;
    width: 100% !important;
}

.gh-register-page .gh-login-card__header {
    margin-bottom: 1.5rem !important;
}

/* Form: uma coluna, gap consistente. Sem reset zerado (era o bug). */
.gh-register-page .gh-register-form {
    display: flex !important;
    flex-direction: column !important;
    gap: .85rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* Linha 2-col com colapso mobile */
.gh-register-page .gh-form-row {
    display: grid !important;
    gap: .85rem !important;
    margin: 0 !important;
}
.gh-register-page .gh-form-row--2 { grid-template-columns: 1fr 1fr !important; }
@media (max-width: 540px) {
    .gh-register-page .gh-form-row--2 { grid-template-columns: 1fr !important; }
}

/* Header de seção — uppercase sutil, com line debaixo. SEM box. */
.gh-register-page .gh-form-section {
    margin: 1.5rem 0 .25rem !important;
    padding: 0 0 .55rem !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    color: rgba(245,245,250,.55) !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    background: transparent !important;
}
.gh-register-page .gh-form-section:first-of-type {
    margin-top: .25rem !important;
}

/* Tag "opcional" pequena ao lado do label */
.gh-register-page .gh-field__opt {
    color: rgba(245,245,250,.40) !important;
    font-weight: 400 !important;
    font-size: .72rem !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    margin-left: .4rem !important;
    vertical-align: middle !important;
}
.gh-register-page .gh-field__req {
    color: #F87171 !important;
    margin-left: .15rem !important;
    font-weight: 700 !important;
}
.gh-register-page .gh-field__hint {
    display: block !important;
    color: rgba(245,245,250,.5) !important;
    font-size: .78rem !important;
    margin-top: .35rem !important;
}

/* Select com seta custom (escopo register + login) */
.gh-register-page .gh-field__select,
.gh-login-page .gh-field__select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23B7BCC8' d='M6 8L0 0h12z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    padding-right: 2.5rem !important;
    cursor: pointer !important;
}
.gh-register-page .gh-field__select option,
.gh-login-page .gh-field__select option {
    background: #1A1E27 !important;
    color: #F5F5FA !important;
}

/* Custom field WHMCS (input/select/textarea injetados como HTML) */
.gh-register-page .gh-field__custom > * {
    width: 100% !important;
    padding: .75rem .9rem !important;
    background: var(--orion-surface-2, #1A1E27) !important;
    border: 1px solid var(--orion-border, #262B36) !important;
    border-radius: 10px !important;
    color: #F5F5FA !important;
    font-size: .92rem !important;
    line-height: 1.4 !important;
    transition: border-color .15s ease, background .15s ease !important;
    box-shadow: none !important;
}
.gh-register-page .gh-field__custom > *:focus {
    outline: none !important;
    border-color: #8B5CF6 !important;
    background: var(--orion-surface, #12151C) !important;
}

/* Banner "Quase lá!" — sutil, sem peso visual exagerado */
.gh-register-page .gh-oauth-note {
    display: flex !important;
    align-items: flex-start !important;
    gap: .7rem !important;
    background: rgba(139,92,246,.08) !important;
    border: 1px solid rgba(139,92,246,.20) !important;
    color: #E9D5FF !important;
    border-radius: 10px !important;
    padding: .7rem .85rem !important;
    margin: 0 0 1.25rem !important;
    font-size: .85rem !important;
    line-height: 1.45 !important;
}
.gh-register-page .gh-oauth-note i {
    color: #C084FC !important;
    margin-top: .15rem !important;
    font-size: .95rem !important;
    flex-shrink: 0 !important;
}
.gh-register-page .gh-oauth-note strong {
    color: #F5F5FA !important;
    font-weight: 600 !important;
    margin-right: .25rem !important;
}

/* Linha de meta da senha (strength + gerar) */
.gh-register-page .gh-pw-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    margin: -.15rem 0 .25rem !important;
    flex-wrap: wrap !important;
}
.gh-register-page .gh-pw-strength {
    flex: 1 1 220px !important;
    min-width: 180px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: .3rem !important;
}
.gh-register-page .gh-pw-strength__bar {
    width: 100% !important;
    height: 4px !important;
    background: rgba(255,255,255,.06) !important;
    border-radius: 99px !important;
    overflow: hidden !important;
}
.gh-register-page .gh-pw-strength__fill {
    height: 100% !important;
    width: 0% !important;
    background: linear-gradient(90deg, #ef4444, #f59e0b 50%, #10b981) !important;
    background-size: 200% 100% !important;
    transition: width .3s ease !important;
    border-radius: 99px !important;
}
.gh-register-page .gh-pw-strength__label {
    color: rgba(245,245,250,.5) !important;
    font-size: .72rem !important;
}
.gh-register-page .gh-link-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: .35rem !important;
    background: transparent !important;
    border: 0 !important;
    color: #C084FC !important;
    font-size: .8rem !important;
    font-weight: 500 !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: color .15s ease !important;
}
.gh-register-page .gh-link-btn:hover {
    color: #DDD6FE !important;
    text-decoration: underline !important;
}

/* Checkbox em bloco (TOS, marketing) — alinhamento e link violeta */
.gh-login-page .gh-field-check.gh-field-check--block {
    display: flex !important;
    align-items: flex-start !important;
    gap: .65rem !important;
    margin: .25rem 0 !important;
    color: rgba(231,234,240,.78) !important;
    font-size: .85rem !important;
    line-height: 1.5 !important;
}
.gh-login-page .gh-field-check.gh-field-check--block input[type="checkbox"] {
    margin: .15rem 0 0 !important;
    flex-shrink: 0 !important;
}
.gh-login-page .gh-field-check.gh-field-check--block a {
    color: #C084FC !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}
.gh-login-page .gh-field-check.gh-field-check--block a:hover {
    color: #DDD6FE !important;
    text-decoration: underline !important;
}

/* Captcha — escala 90% e centraliza pra caber bem em 540px */
.gh-register-page .CaptchaV2,
.gh-register-page .g-recaptcha,
.gh-register-page .h-captcha,
.gh-register-page #captchaImage {
    display: flex !important;
    justify-content: center !important;
    margin: .55rem 0 !important;
}
.gh-register-page .g-recaptcha > div,
.gh-register-page .h-captcha > div {
    transform: scale(.95) !important;
    transform-origin: center top !important;
}

/* Submit com mais separação visual (depois do TOS) */
.gh-register-page .gh-register-form > .gh-btn--primary {
    margin-top: .75rem !important;
}

/* Footer "Já tem conta?" — sem border-top duplicada (header CSS de login já cuida) */
.gh-register-page .gh-login-card__footer {
    margin-top: 1.25rem !important;
    padding-top: 1rem !important;
}

/* ============================================================
 * MULTI-STEP — stepper + steps + navegação (v7)
 * ============================================================ */

/* Stepper visual no topo */
.gh-register-page .gh-stepper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .35rem !important;
    margin: 0 0 1.5rem !important;
    padding: 0 !important;
    list-style: none !important;
}
.gh-register-page .gh-stepper__item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: .35rem !important;
    list-style: none !important;
}
.gh-register-page .gh-stepper__dot {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: rgba(245,245,250,.55) !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    transition: all .2s ease !important;
}
.gh-register-page .gh-stepper__label {
    font-size: .72rem !important;
    font-weight: 600 !important;
    color: rgba(245,245,250,.45) !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    transition: color .2s ease !important;
}
.gh-register-page .gh-stepper__item.is-active .gh-stepper__dot {
    background: linear-gradient(135deg, #8B5CF6, #6D28D9) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 0 0 4px rgba(139,92,246,.18) !important;
}
.gh-register-page .gh-stepper__item.is-active .gh-stepper__label {
    color: #F5F5FA !important;
}
.gh-register-page .gh-stepper__item.is-done .gh-stepper__dot {
    background: rgba(139,92,246,.20) !important;
    border-color: rgba(139,92,246,.40) !important;
    color: #C084FC !important;
}
.gh-register-page .gh-stepper__item.is-done .gh-stepper__dot::before {
    content: "\f00c" !important;
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: .8rem !important;
}
.gh-register-page .gh-stepper__item.is-done .gh-stepper__dot { font-size: 0 !important; }
.gh-register-page .gh-stepper__item.is-done .gh-stepper__label {
    color: rgba(192,132,252,.85) !important;
}
.gh-register-page .gh-stepper__line {
    flex: 1 1 24px !important;
    max-width: 56px !important;
    height: 2px !important;
    background: rgba(255,255,255,.08) !important;
    margin-bottom: 24px !important; /* alinha com os dots */
    border-radius: 99px !important;
    list-style: none !important;
}

/* Steps: por padrão escondidos, só ativo aparece */
.gh-register-page .gh-step {
    display: none !important;
    animation: ghStepIn .35s cubic-bezier(.2,.7,.3,1) both !important;
}
.gh-register-page .gh-step.is-active {
    display: flex !important;
    flex-direction: column !important;
    gap: .85rem !important;
}
@keyframes ghStepIn {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .gh-register-page .gh-step { animation: none !important; }
}

/* Título do step (substitui o gh-form-section nesta v7) */
.gh-register-page .gh-step__title {
    margin: 0 0 .5rem !important;
    padding: 0 0 .55rem !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    color: rgba(245,245,250,.92) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: -.005em !important;
    text-transform: none !important;
    background: transparent !important;
}

/* Form: sem gap (steps controlam o próprio) */
.gh-register-page .gh-register-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* Navegação dos steps (Voltar / Continuar / Submit) — 50/50 EXATO via grid.
   Flexbox com flex:1 sofre influência de conteúdo intrínseco; grid 1fr 1fr
   garante larguras idênticas independente do texto. */
.gh-register-page .gh-step-nav {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: .65rem !important;
    margin-top: 1.5rem !important;
}
.gh-register-page .gh-step-nav .gh-btn {
    width: 100% !important;
    flex: none !important;
    min-width: 0 !important;
    justify-content: center !important;
}
.gh-register-page .gh-step-nav [data-step-prev][hidden],
.gh-register-page .gh-step-nav [data-step-next][hidden],
.gh-register-page .gh-step-nav [data-step-submit][hidden] {
    display: none !important;
}
/* Step 1: só Continuar visível (Voltar oculto) → grid colapsa pra 1 coluna */
.gh-register-page .gh-step-nav:has([data-step-prev][hidden]) {
    grid-template-columns: 1fr !important;
}

/* Estado de erro nos inputs (validação por step) */
.gh-register-page .gh-field__input--error {
    border-color: #F87171 !important;
    box-shadow: 0 0 0 3px rgba(248,113,113,.12) !important;
}

/* ============================================================
 * FIX intl-tel-input (campo telefone bug)
 * ============================================================
 * O WHMCS injeta .iti em volta do <input type="tel"> com flag/dial
 * code do país no canto esquerdo. Sem padding suficiente, o
 * placeholder e o valor colidem com o flag.
 */
.gh-register-page .iti,
.gh-login-page .iti {
    width: 100% !important;
    display: block !important;
    position: relative !important;
}
.gh-register-page .iti input.gh-field__input,
.gh-register-page .iti--allow-dropdown input.gh-field__input,
.gh-register-page .iti--separate-dial-code input.gh-field__input,
.gh-login-page .iti input.gh-field__input {
    padding-left: 56px !important;
}
.gh-register-page .iti--separate-dial-code input.gh-field__input {
    padding-left: 92px !important; /* dial code mais largo */
}
.gh-register-page .iti__flag-container,
.gh-login-page .iti__flag-container {
    z-index: 2 !important;
}
.gh-register-page .iti__selected-flag,
.gh-login-page .iti__selected-flag {
    background: transparent !important;
    padding-left: 14px !important;
}
.gh-register-page .iti__country-list,
.gh-login-page .iti__country-list {
    background: #1A1E27 !important;
    border: 1px solid #262B36 !important;
    color: #F5F5FA !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.45) !important;
    z-index: 1000 !important;
    max-height: 240px !important;
    overflow-y: auto !important;
}
.gh-register-page .iti__country-list .iti__country,
.gh-login-page .iti__country-list .iti__country {
    color: #F5F5FA !important;
    padding: .5rem .8rem !important;
}
.gh-register-page .iti__country-list .iti__country:hover,
.gh-register-page .iti__country-list .iti__country.iti__highlight,
.gh-login-page .iti__country-list .iti__country:hover,
.gh-login-page .iti__country-list .iti__country.iti__highlight {
    background: rgba(139,92,246,.15) !important;
}
.gh-register-page .iti__divider,
.gh-login-page .iti__divider {
    border-bottom-color: rgba(255,255,255,.08) !important;
}
.gh-register-page .iti__dial-code,
.gh-login-page .iti__dial-code {
    color: rgba(245,245,250,.55) !important;
}

/* ============================================================
 * FIXES PONTUAIS v7.1
 * ============================================================ */

/* (1) Telefone: aniquila qualquer pedaço do intl-tel-input.
   O JS no clientregister.tpl desempacota o input, mas até o JS rodar,
   o CSS abaixo esconde flag, dial code, dropdown — sem flash visual. */
.gh-register-page .iti,
.gh-register-page .intl-tel-input,
.gh-login-page .iti,
.gh-login-page .intl-tel-input {
    display: contents !important; /* deixa o input aparecer como filho direto, ignora wrapper */
}
.gh-register-page .iti__flag-container,
.gh-register-page .iti__selected-flag,
.gh-register-page .iti__dial-code,
.gh-register-page .iti__country-list,
.gh-register-page .iti__arrow,
.gh-register-page .iti__flag,
.gh-login-page .iti__flag-container,
.gh-login-page .iti__selected-flag,
.gh-login-page .iti__dial-code,
.gh-login-page .iti__country-list,
.gh-login-page .iti__arrow,
.gh-login-page .iti__flag {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.gh-register-page .iti input,
.gh-login-page .iti input {
    padding-left: .9rem !important;
    width: 100% !important;
}

/* (2) Selects sempre dark — seletor universal. Cobre Estado (que vira
   select via StatesDropdown.js sem manter classes), País, currency e
   qualquer outro select dentro do .gh-field. Vence Bootstrap (.custom-select,
   .form-control) por especificidade do `.gh-register-page select.X`. */
.gh-register-page .gh-field select,
.gh-register-page select.form-control,
.gh-register-page select.custom-select,
.gh-register-page select#state,
.gh-register-page select#inputCountry,
.gh-register-page select#inputCurrency,
.gh-register-page select#inputSecurityQId,
.gh-login-page .gh-field select,
.gh-login-page select.form-control,
.gh-login-page select.custom-select {
    width: 100% !important;
    height: auto !important;
    padding: .75rem 2.5rem .75rem .9rem !important;
    background-color: var(--orion-surface-2, #1A1E27) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23B7BCC8' d='M6 8L0 0h12z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    border: 1px solid var(--orion-border, #262B36) !important;
    border-radius: 10px !important;
    color: #F5F5FA !important;
    font-size: .92rem !important;
    line-height: 1.4 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    cursor: pointer !important;
    box-shadow: none !important;
}
.gh-register-page .gh-field select:focus,
.gh-register-page select.form-control:focus,
.gh-login-page .gh-field select:focus {
    outline: none !important;
    border-color: #8B5CF6 !important;
    background-color: var(--orion-surface, #12151C) !important;
}
.gh-register-page .gh-field select option,
.gh-login-page .gh-field select option {
    background: #1A1E27 !important;
    color: #F5F5FA !important;
}

/* (3) Botão "Voltar" — variante ghost dark (estava saindo branco
   porque .gh-btn--ghost só estava definido no escopo da dashboard) */
.gh-register-page .gh-btn--ghost,
.gh-login-page .gh-btn--ghost {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    color: #E7EAF0 !important;
    box-shadow: none !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease !important;
}
.gh-register-page .gh-btn--ghost:hover,
.gh-login-page .gh-btn--ghost:hover {
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.24) !important;
    color: #FFFFFF !important;
}
.gh-register-page .gh-btn--ghost i,
.gh-login-page .gh-btn--ghost i {
    color: inherit !important;
}

/* (4) Barra de força da senha: REMOVE !important do width inicial pra
   o WHMCS PasswordStrength.js conseguir setar style.width inline. */
.gh-register-page .gh-pw-strength__fill {
    width: 0%;  /* sem !important — JS WHMCS sobrescreve via inline style */
    height: 100% !important;
    background: linear-gradient(90deg, #ef4444, #f59e0b 50%, #10b981) !important;
    background-size: 200% 100% !important;
    transition: width .3s ease !important;
    border-radius: 99px !important;
    display: block !important;
}
/* Quando o WHMCS adiciona classes Bootstrap (.bg-danger/warning/success),
   força a mesma cor verde forte do nosso gradient pro 100%. */
.gh-register-page .gh-pw-strength__fill.bg-danger {
    background: #ef4444 !important;
}
.gh-register-page .gh-pw-strength__fill.bg-warning {
    background: #f59e0b !important;
}
.gh-register-page .gh-pw-strength__fill.bg-success {
    background: linear-gradient(90deg, #10b981, #34d399) !important;
}

/* (5) Stepper checkmark: usa Unicode ✓ (não depende do FA carregado) */
.gh-register-page .gh-stepper__item.is-done .gh-stepper__dot::before {
    content: "\2713" !important;  /* ✓ check mark */
    font-family: inherit !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    color: #C084FC !important;
}
.gh-register-page .gh-stepper__item.is-done .gh-stepper__dot {
    font-size: 0 !important;  /* esconde o número original */
    background: rgba(139,92,246,.18) !important;
    border-color: rgba(139,92,246,.40) !important;
    box-shadow: none !important;
}

/* =========  LOGIN PREMIUM — FIM  ========= */