* {
    box-sizing: border-box;
}

:root {
    --bg: #08080f;
    --bg-2: #0d0d17;
    --sidebar: rgba(14, 14, 24, 0.96);
    --card: rgba(20, 20, 32, 0.94);
    --card-2: rgba(25, 25, 40, 0.96);
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.14);
    --text: #f5f5fa;
    --muted: #aaaabe;
    --muted-2: #77778a;
    --primary: #00ddff;
    --primary-dark: #00a9c7;
    --primary-soft: rgba(0, 221, 255, 0.14);
    --danger: #e45656;
    --danger-dark: #b93636;
    --success: #44d07b;
    --warning: #ffbf4d;
    --shadow: 0 18px 60px rgba(0, 0, 0, 0.38);
    --radius: 18px;
}

html {
    scroll-behavior: auto;
}

body {
    margin: 0;
    font-family: Inter, Arial, Helvetica, sans-serif;
    background:
        radial-gradient(circle at top center, rgba(0, 221, 255, 0.18), transparent 34%),
        linear-gradient(180deg, #0b0b14 0%, #07070d 100%);
    color: var(--text);
    min-height: 100vh;
}

a {
    color: inherit;
    text-decoration: none;
}

small {
    color: var(--muted);
}

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

.login-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-box {
    width: 410px;
    background: rgba(20, 20, 32, 0.94);
    border: 1px solid var(--border-strong);
    padding: 32px;
    border-radius: 22px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
}

.login-box h1 {
    margin: 0 0 7px;
    font-size: 25px;
    letter-spacing: -0.5px;
}

.login-box p {
    margin: 0 0 26px;
    color: var(--muted);
}

/* ===============================
   FORMULÁRIOS
================================ */

input,
select,
textarea {
    width: 100%;
    padding: 13px 14px;
    background: #0d0d17;
    color: #fff;
    border: 1px solid var(--border-strong);
    border-radius: 13px;
    outline: none;
    transition: 0.18s ease;
    font-size: 14px;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(0, 221, 255, 0.8);
    box-shadow: 0 0 0 4px rgba(0, 221, 255, 0.13);
    background: #10101c;
}

textarea {
    min-height: 110px;
    resize: vertical;
}

label {
    display: block;
    margin: 13px 0 7px;
    color: #dedee9;
    font-size: 14px;
    font-weight: 700;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

/* ===============================
   BOTÕES
================================ */

button,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    border: 0;
    padding: 11px 16px;
    border-radius: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.18s ease;
    box-shadow: 0 10px 24px rgba(0, 221, 255, 0.22);
    font-size: 14px;
}

button:hover,
.btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

button:active,
.btn:active {
    transform: translateY(0);
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger), var(--danger-dark));
    box-shadow: 0 10px 24px rgba(228, 86, 86, 0.16);
}

.btn-secondary {
    background: #252538;
    box-shadow: none;
}

.actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ===============================
   ALERTAS
================================ */

.error,
.success {
    padding: 13px 14px;
    border-radius: 14px;
    margin-bottom: 16px;
    font-weight: 700;
    font-size: 14px;
}

.error {
    background: rgba(228, 86, 86, 0.15);
    border: 1px solid rgba(228, 86, 86, 0.34);
    color: #ffbcbc;
}

.success {
    background: rgba(68, 208, 123, 0.14);
    border: 1px solid rgba(68, 208, 123, 0.34);
    color: #baffd1;
}

/* ===============================
   LAYOUT
================================ */

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

.sidebar {
    width: 265px;
    background: var(--sidebar);
    border-right: 1px solid var(--border);
    padding: 24px 18px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    backdrop-filter: blur(12px);
    z-index: 10;
}

.sidebar h2 {
    margin: 0 0 28px;
    font-size: 19px;
    color: #fff;
    letter-spacing: -0.3px;
    padding: 0 8px;
}

.sidebar a {
    display: flex;
    align-items: center;
    padding: 12px 13px;
    margin-bottom: 8px;
    color: #c9c9d6;
    border-radius: 13px;
    transition: 0.18s ease;
    font-weight: 700;
    font-size: 14px;
}

.sidebar a:hover,
.sidebar a.active {
    background: var(--primary-soft);
    color: #fff;
}

.sidebar a:last-child {
    margin-top: 18px;
    color: #ffb5b5;
}

.main {
    flex: 1;
    margin-left: 265px;
    padding: 30px;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    background: rgba(20, 20, 32, 0.62);
    border: 1px solid var(--border);
    padding: 18px 20px;
    border-radius: var(--radius);
    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.16);
}

.topbar strong {
    font-size: 17px;
}

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

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    margin-bottom: 20px;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.18);
}

.card h2 {
    margin: 0 0 18px;
    font-size: 22px;
    letter-spacing: -0.4px;
}

.card p {
    color: var(--muted);
    margin-top: -8px;
}

/* ===============================
   DASHBOARD
================================ */

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.stat {
    background:
        linear-gradient(135deg, rgba(0, 221, 255, 0.12), transparent 70%),
        rgba(20, 20, 32, 0.95);
    position: relative;
    overflow: hidden;
}

.stat::after {
    content: "";
    position: absolute;
    right: -35px;
    top: -35px;
    width: 95px;
    height: 95px;
    background: rgba(0, 221, 255, 0.12);
    border-radius: 999px;
}

.stat h3 {
    margin: 0;
    font-size: 33px;
    letter-spacing: -0.9px;
}

.stat p {
    margin: 7px 0 0;
    color: var(--muted);
    font-weight: 700;
}

/* ===============================
   TABELAS
================================ */

.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.table th,
.table td {
    padding: 14px 13px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

.table th {
    color: #b8b8c8;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 800;
}

.table td {
    color: #efeff6;
    font-size: 14px;
}

.table tr:hover td {
    background: rgba(255, 255, 255, 0.025);
}

.table tr:last-child td {
    border-bottom: 0;
}

/* ===============================
   BADGES
================================ */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.badge-ativo,
.badge-ativa {
    background: rgba(68, 208, 123, 0.14);
    color: #8cffb7;
}

.badge-bloqueado,
.badge-bloqueada,
.badge-expirada {
    background: rgba(228, 86, 86, 0.15);
    color: #ff9c9c;
}

.badge-pendente {
    background: rgba(255, 191, 77, 0.14);
    color: #ffd88a;
}

/* ===============================
   SCROLLBAR
================================ */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #0b0b13;
}

::-webkit-scrollbar-thumb {
    background: #28283b;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #3a3a55;
}

/* ===============================
   RESPONSIVO
================================ */

@media (max-width: 1100px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .layout {
        display: block;
    }

    .sidebar {
        position: relative;
        width: 100%;
        bottom: auto;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .main {
        margin-left: 0;
        padding: 20px;
    }

    .form-grid,
    .grid {
        grid-template-columns: 1fr;
    }

    .topbar {
        display: block;
    }

    .table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

.copy-config {
    white-space: nowrap;
}

.table td .btn,
.table td button {
    margin-bottom: 4px;
}

.card form .btn-secondary {
    margin-left: 8px;
}


.input-with-button {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.input-with-button input {
    flex: 1;
}

.input-with-button button {
    white-space: nowrap;
    box-shadow: none;
}


.main > .success,
.main > .error {
    position: relative;
    margin-bottom: 18px;
}


/* ===============================
   TABELA DE LICENÇAS MAIS ORGANIZADA
================================ */

.card-licencas {
    overflow: hidden;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
}

.table-licencas {
    min-width: 1380px;
    table-layout: fixed;
}

.table-licencas th,
.table-licencas td {
    padding: 13px 12px;
    line-height: 1.35;
}

.table-licencas td {
    word-break: break-word;
    overflow-wrap: anywhere;
}

.table-licencas .cell-cliente {
    width: 110px;
}

.table-licencas .cell-script {
    width: 155px;
}

.table-licencas .cell-chave {
    width: 130px;
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
}

.table-licencas .cell-email {
    width: 190px;
}

.table-licencas .cell-discord {
    width: 170px;
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
}

.table-licencas .cell-build {
    width: 150px;
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
}

.table-licencas .cell-ip {
    width: 130px;
    white-space: nowrap;
}

.table-licencas .cell-pasta {
    width: 120px;
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
}

.license-actions {
    min-width: 220px;
    width: 220px;
}

.actions-row {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.actions-row:last-child {
    margin-bottom: 0;
}

.btn-small {
    padding: 9px 12px;
    font-size: 13px;
    border-radius: 11px;
    min-height: 38px;
}

.license-actions .btn,
.license-actions button {
    margin: 0;
}

.license-actions .copy-config {
    flex: 1 1 100%;
}

.license-actions .actions-row:last-child .btn {
    flex: 1 1 auto;
}

@media (max-width: 900px) {
    .table-licencas {
        min-width: 1280px;
    }
}


/* ===============================
   CORREÇÃO FINAL - LICENÇAS / AÇÕES
================================ */

.card-licencas {
    overflow: visible !important;
}

.card-licencas .table-responsive {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 10px;
}

.table-licencas {
    width: 100%;
    min-width: 1180px;
    table-layout: fixed;
}

.table-licencas th,
.table-licencas td {
    padding: 12px 9px;
    vertical-align: middle;
}

.table-licencas th:nth-child(1),
.table-licencas td:nth-child(1) {
    width: 120px;
}

.table-licencas th:nth-child(2),
.table-licencas td:nth-child(2) {
    width: 135px;
}

.table-licencas th:nth-child(3),
.table-licencas td:nth-child(3) {
    width: 125px;
}

.table-licencas th:nth-child(4),
.table-licencas td:nth-child(4) {
    width: 150px;
}

.table-licencas th:nth-child(5),
.table-licencas td:nth-child(5) {
    width: 145px;
}

.table-licencas th:nth-child(6),
.table-licencas td:nth-child(6) {
    width: 130px;
}

.table-licencas th:nth-child(7),
.table-licencas td:nth-child(7) {
    width: 135px;
}

.table-licencas th:nth-child(8),
.table-licencas td:nth-child(8) {
    width: 115px;
}

.table-licencas th:nth-child(9),
.table-licencas td:nth-child(9) {
    width: 95px;
}

.table-licencas th:nth-child(10),
.table-licencas td:nth-child(10) {
    width: 95px;
}

.table-licencas th:nth-child(11),
.table-licencas td:nth-child(11) {
    width: 190px;
}

.license-actions {
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
    overflow: visible;
}

.license-actions .actions-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-bottom: 7px;
}

.license-actions .actions-row:last-child {
    grid-template-columns: 1fr 1fr;
}

.license-actions .actions-row:last-child .btn-danger {
    grid-column: 1 / 3;
}

.license-actions .btn,
.license-actions button {
    width: 100%;
    min-width: 0;
    padding: 8px 9px;
    font-size: 12px;
    line-height: 1.2;
    min-height: 36px;
    white-space: nowrap;
}

.table-licencas td {
    font-size: 13px;
}

.table-licencas small {
    font-size: 12px;
}

@media (max-width: 1400px) {
    .table-licencas {
        min-width: 1180px;
    }
}


/* ===============================
   DETALHES E FILTROS
================================ */

.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.details-grid > div {
    background: rgba(255,255,255,0.035);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
}

.details-grid small {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-weight: 700;
}

.details-grid strong {
    display: block;
    word-break: break-word;
}

@media (max-width: 1000px) {
    .grid-2,
    .details-grid {
        grid-template-columns: 1fr;
    }
}


/* ===============================
   FIX PARTE 1 - AÇÕES NÃO CORTAR
================================ */

.card-licencas {
    overflow: visible !important;
}

.card-licencas .table-responsive {
    width: 100%;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding-bottom: 14px;
}

.table-licencas {
    min-width: 1450px !important;
    table-layout: fixed !important;
}

.table-licencas th:nth-child(12),
.table-licencas td:nth-child(12) {
    width: 230px !important;
    min-width: 230px !important;
}

.license-actions {
    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
    overflow: visible !important;
}

.license-actions .actions-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}

.license-actions .actions-row:last-child {
    margin-bottom: 0 !important;
}

.license-actions .btn,
.license-actions button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 8px 8px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    min-height: 36px !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

@media (max-width: 1500px) {
    .table-licencas {
        min-width: 1450px !important;
    }
}


/* ===============================
   FIX COMPACTO - AÇÕES LICENÇAS
================================ */

.card-licencas {
    overflow: hidden !important;
}

.card-licencas .table-responsive {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 8px !important;
}

.table-licencas {
    min-width: 1320px !important;
    table-layout: fixed !important;
}

.table-licencas th,
.table-licencas td {
    padding-left: 7px !important;
    padding-right: 7px !important;
}

.table-licencas th:nth-child(12),
.table-licencas td:nth-child(12) {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
}

.license-actions {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    overflow: visible !important;
}

.license-actions .actions-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
}

.license-actions .actions-row:last-child {
    margin-bottom: 0 !important;
}

.license-actions .btn,
.license-actions button {
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px 6px !important;
    font-size: 11px !important;
    min-height: 34px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
}

.table-licencas .cell-cliente {
    width: 115px !important;
}

.table-licencas .cell-script {
    width: 135px !important;
}

.table-licencas .cell-email {
    width: 145px !important;
}

.table-licencas .cell-discord {
    width: 150px !important;
}

.table-licencas .cell-build {
    width: 125px !important;
}

.table-licencas .cell-ip {
    width: 125px !important;
}

.table-licencas .cell-pasta {
    width: 95px !important;
}


/* ===============================
   AJUSTE FINAL - AÇÕES COM BOTÕES E MENOS ESPAÇO
================================ */

.card-licencas {
    overflow: hidden !important;
}

.card-licencas .table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 10px !important;
}

/* Não estica a tabela até o canto direito. Isso remove o espaço grande antes dos botões. */
.table-licencas {
    width: max-content !important;
    min-width: 0 !important;
    table-layout: fixed !important;
}

.table-licencas th,
.table-licencas td {
    padding-left: 7px !important;
    padding-right: 7px !important;
    vertical-align: middle !important;
}

.table-licencas th:nth-child(1),
.table-licencas td:nth-child(1) {
    width: 120px !important;
}

.table-licencas th:nth-child(2),
.table-licencas td:nth-child(2) {
    width: 130px !important;
}

.table-licencas th:nth-child(3),
.table-licencas td:nth-child(3) {
    width: 125px !important;
}

.table-licencas th:nth-child(4),
.table-licencas td:nth-child(4) {
    width: 145px !important;
}

.table-licencas th:nth-child(5),
.table-licencas td:nth-child(5) {
    width: 155px !important;
}

.table-licencas th:nth-child(6),
.table-licencas td:nth-child(6) {
    width: 130px !important;
}

.table-licencas th:nth-child(7),
.table-licencas td:nth-child(7) {
    width: 75px !important;
}

.table-licencas th:nth-child(8),
.table-licencas td:nth-child(8) {
    width: 130px !important;
}

.table-licencas th:nth-child(9),
.table-licencas td:nth-child(9) {
    width: 105px !important;
}

.table-licencas th:nth-child(10),
.table-licencas td:nth-child(10) {
    width: 85px !important;
}

.table-licencas th:nth-child(11),
.table-licencas td:nth-child(11) {
    width: 85px !important;
}

/* Ações compactas, mas com Lic/Srv de volta */
.table-licencas th:nth-child(12),
.table-licencas td:nth-child(12),
.license-actions {
    width: 126px !important;
    min-width: 126px !important;
    max-width: 126px !important;
}

.license-actions {
    overflow: visible !important;
}

.license-actions .actions-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
}

.license-actions .actions-row:last-child {
    margin-bottom: 0 !important;
}

.license-actions .btn,
.license-actions button {
    width: 100% !important;
    min-width: 0 !important;
    padding: 7px 5px !important;
    font-size: 11px !important;
    min-height: 33px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
}

.table-licencas .cell-script,
.table-licencas .cell-chave,
.table-licencas .cell-email,
.table-licencas .cell-discord,
.table-licencas .cell-build,
.table-licencas .cell-pasta {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

.table-licencas .cell-ip {
    white-space: nowrap !important;
}


/* ===============================
   AÇÕES COMPLETAS - LICENÇAS
================================ */

.card-licencas {
    overflow: hidden !important;
}

.card-licencas .table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 12px !important;
}

/* Mantém a tabela compacta, sem criar um espaço enorme antes dos botões */
.table-licencas {
    width: max-content !important;
    min-width: 0 !important;
    table-layout: fixed !important;
}

.table-licencas th,
.table-licencas td {
    padding-left: 7px !important;
    padding-right: 7px !important;
    vertical-align: middle !important;
}

.table-licencas th:nth-child(1),
.table-licencas td:nth-child(1) {
    width: 120px !important;
}

.table-licencas th:nth-child(2),
.table-licencas td:nth-child(2) {
    width: 130px !important;
}

.table-licencas th:nth-child(3),
.table-licencas td:nth-child(3) {
    width: 125px !important;
}

.table-licencas th:nth-child(4),
.table-licencas td:nth-child(4) {
    width: 145px !important;
}

.table-licencas th:nth-child(5),
.table-licencas td:nth-child(5) {
    width: 155px !important;
}

.table-licencas th:nth-child(6),
.table-licencas td:nth-child(6) {
    width: 130px !important;
}

.table-licencas th:nth-child(7),
.table-licencas td:nth-child(7) {
    width: 75px !important;
}

.table-licencas th:nth-child(8),
.table-licencas td:nth-child(8) {
    width: 130px !important;
}

.table-licencas th:nth-child(9),
.table-licencas td:nth-child(9) {
    width: 105px !important;
}

.table-licencas th:nth-child(10),
.table-licencas td:nth-child(10) {
    width: 85px !important;
}

.table-licencas th:nth-child(11),
.table-licencas td:nth-child(11) {
    width: 85px !important;
}

/* Coluna Ações maior para caber nomes completos */
.table-licencas th:nth-child(12),
.table-licencas td:nth-child(12),
.license-actions {
    width: 235px !important;
    min-width: 235px !important;
    max-width: 235px !important;
}

.license-actions {
    overflow: visible !important;
}

.license-actions .actions-row {
    display: grid !important;
    gap: 7px !important;
    margin-bottom: 7px !important;
}

.license-actions .actions-row:last-child {
    margin-bottom: 0 !important;
}

.license-actions .actions-row-full {
    grid-template-columns: 1fr !important;
}

.license-actions .actions-row-three {
    grid-template-columns: 1fr 1fr 1fr !important;
}

.license-actions .btn,
.license-actions button {
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px 9px !important;
    font-size: 12px !important;
    min-height: 36px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
}

.table-licencas .cell-script,
.table-licencas .cell-chave,
.table-licencas .cell-email,
.table-licencas .cell-discord,
.table-licencas .cell-build,
.table-licencas .cell-pasta {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

.table-licencas .cell-ip {
    white-space: nowrap !important;
}


/* ===============================
   GERADOR DE BUILD
================================ */

.code-box {
    min-height: 145px;
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
    line-height: 1.45;
    white-space: pre;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}


/* ===============================
   FASE 9 - PROFISSIONALIZAÇÃO
================================ */
.stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.stat-card {
    background: rgba(255,255,255,0.045);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 14px 30px rgba(0,0,0,0.16);
}

.stat-card span {
    display: block;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 8px;
}

.stat-card strong {
    display: block;
    font-size: 30px;
    color: var(--text);
}

.btn-small {
    padding: 8px 10px;
    font-size: 12px;
    border-radius: 10px;
    margin: 2px;
}

.badge-pendente {
    background: rgba(255, 191, 77, 0.16);
    color: #ffd27a;
    border: 1px solid rgba(255, 191, 77, 0.28);
}

.table-responsive {
    overflow-x: auto;
}

@media (max-width: 1100px) {
    .stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .stats {
        grid-template-columns: 1fr;
    }
}




/* ===============================
   GERADOR PACOTE - GUIA PROFISSIONAL
================================ */
.package-guide {
    margin: 18px 0 26px;
    padding: 20px;
    border-radius: 22px;
    border: 1px solid rgba(0, 221, 255, 0.28);
    background:
        radial-gradient(circle at 0% 0%, rgba(0,221,255,0.18), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
    box-shadow: 0 20px 50px rgba(0,0,0,0.26);
}

.package-guide__top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.package-guide__icon {
    min-width: 52px;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    font-size: 25px;
    background: rgba(0,221,255,0.18);
    border: 1px solid rgba(0,221,255,0.35);
    box-shadow: inset 0 0 18px rgba(0,221,255,0.10);
}

.package-guide__top strong {
    display: block;
    font-size: 19px;
    color: #ffffff;
    margin-bottom: 5px;
    letter-spacing: 0.2px;
}

.package-guide__top span {
    display: block;
    color: rgba(255,255,255,0.72);
    font-size: 14px;
    line-height: 1.45;
}

.package-guide__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.package-guide__card {
    position: relative;
    min-height: 156px;
    padding: 16px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.045);
}

.package-guide__card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.9;
    background: linear-gradient(180deg, rgba(255,255,255,0.065), transparent);
}

.package-guide__card-title {
    position: relative;
    font-weight: 800;
    font-size: 14px;
    margin-bottom: 12px;
    color: #fff;
}

.package-guide__tags {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 11px;
}

.package-guide code {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 9px;
    font-size: 12px;
    color: #fff;
    background: rgba(0,0,0,0.28);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: inset 0 0 10px rgba(0,0,0,0.12);
}

.package-guide__card p {
    position: relative;
    margin: 0;
    color: rgba(255,255,255,0.70);
    line-height: 1.45;
    font-size: 13px;
}

.package-guide__card--required {
    background: linear-gradient(135deg, rgba(46,204,113,0.16), rgba(46,204,113,0.055));
    border-color: rgba(46,204,113,0.38);
}

.package-guide__card--optional {
    background: linear-gradient(135deg, rgba(52,152,219,0.16), rgba(52,152,219,0.055));
    border-color: rgba(52,152,219,0.38);
}

.package-guide__card--example {
    background: linear-gradient(135deg, rgba(0,221,255,0.18), rgba(0,221,255,0.060));
    border-color: rgba(0,221,255,0.42);
}

.package-guide__card--danger {
    background: linear-gradient(135deg, rgba(255,77,109,0.17), rgba(255,77,109,0.055));
    border-color: rgba(255,77,109,0.40);
}

@media (max-width: 1250px) {
    .package-guide__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .package-guide {
        padding: 16px;
    }

    .package-guide__top {
        align-items: flex-start;
    }

    .package-guide__grid {
        grid-template-columns: 1fr;
    }
}


/* ===============================
   FASE 10/11 - CONFIG, STATUS E SUPORTE
================================ */
.status-ok {
    color: #2ecc71;
    font-weight: 800;
}

.status-fail {
    color: #ff4d6d;
    font-weight: 800;
}

.config-hint {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(0,221,255,0.25);
    background: rgba(0,221,255,0.08);
    color: var(--muted);
}


/* ===============================
   MENU AGRUPADO PROFISSIONAL
================================ */

.sidebar {
    overflow-y: auto;
}

.sidebar .menu-main,
.sidebar .menu-logout {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.menu-section {
    margin: 12px 0;
    padding: 10px;
    border-radius: 16px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.055);
}

.menu-section.open {
    background: rgba(0,221,255,0.070);
    border-color: rgba(0,221,255,0.180);
}

.menu-section-title {
    padding: 4px 4px 9px;
    border-bottom: 1px solid rgba(255,255,255,0.055);
    margin-bottom: 8px;
}

.menu-section-title span {
    display: block;
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.2px;
}

.menu-section-title small {
    display: block;
    margin-top: 3px;
    color: rgba(255,255,255,0.45);
    font-size: 11px;
}

.menu-section-links {
    display: grid;
    gap: 5px;
}

.sidebar .menu-section-links a {
    margin: 0;
    padding: 9px 11px;
    font-size: 13px;
    border-radius: 11px;
    background: transparent;
    border: 1px solid transparent;
}

.sidebar .menu-section-links a:hover {
    background: rgba(255,255,255,0.055);
    border-color: rgba(255,255,255,0.075);
}

.sidebar .menu-section-links a.active {
    background: linear-gradient(135deg, rgba(0,221,255,0.28), rgba(0,221,255,0.12));
    border-color: rgba(0,221,255,0.32);
    color: #fff;
}

.sidebar .menu-main.active {
    background: linear-gradient(135deg, rgba(0,221,255,0.32), rgba(0,221,255,0.12));
    border-color: rgba(0,221,255,0.35);
}

.menu-logout {
    margin-top: 16px !important;
    background: rgba(255,77,109,0.08) !important;
    border: 1px solid rgba(255,77,109,0.18) !important;
    color: #ffb3c1 !important;
}

.menu-logout:hover {
    background: rgba(255,77,109,0.16) !important;
}


/* =========================================================
   ZG DESIGN V2 — Dashboard Premium inspirado na referência
   Cor principal editável: #00ddff
   ========================================================= */
:root{
  --primary:#00ddff;
  --primary-rgb:0,221,255;
  --primary-dark:#009db8;
  --accent:#00ddff;
  --bg:#050812;
  --bg-2:#070b15;
  --sidebar:rgba(5,9,18,.96);
  --card:rgba(10,15,28,.88);
  --card-2:rgba(13,19,34,.92);
  --border:rgba(148,177,200,.12);
  --border-strong:rgba(0,221,255,.22);
  --text:#f6f8ff;
  --muted:#9aa7b9;
  --muted-2:#627086;
  --success:#00e48a;
  --danger:#ff5468;
  --warning:#ffd34d;
  --radius:16px;
  --shadow:0 24px 70px rgba(0,0,0,.38);
}
body{
  background:
    radial-gradient(circle at 18% -8%, rgba(var(--primary-rgb),.13), transparent 32%),
    radial-gradient(circle at 78% 5%, rgba(var(--primary-rgb),.07), transparent 28%),
    linear-gradient(180deg,#050812 0%,#03050b 100%) !important;
  color:var(--text);
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(180deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:70px 70px; opacity:.12;
}
.layout{position:relative; z-index:1;}
.sidebar{
  width:282px !important; padding:22px 18px !important;
  background:linear-gradient(180deg,rgba(6,10,20,.98),rgba(4,7,14,.96)) !important;
  border-right:1px solid rgba(0,221,255,.10) !important;
  box-shadow:18px 0 60px rgba(0,0,0,.28);
  overflow-y:auto;
}
.sidebar h2{display:none;}
.zg-brand{
  display:flex; align-items:center; gap:12px; padding:2px 8px 22px; margin-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.zg-brand-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:rgba(var(--primary-rgb),.12);border:1px solid rgba(var(--primary-rgb),.32);box-shadow:0 0 28px rgba(var(--primary-rgb),.16);font-size:22px;}
.zg-brand-title{font-weight:900;letter-spacing:-.4px;font-size:17px;}
.zg-brand-sub{display:block;color:var(--muted);font-size:12px;margin-top:3px;}
.menu-label{color:var(--primary);font-size:12px;font-weight:900;letter-spacing:.7px;text-transform:uppercase;margin:18px 8px 9px;}
.sidebar a,.menu-section-title{
  border:1px solid transparent;
}
.sidebar .menu-main,.sidebar a{
  border-radius:12px !important;
}
.sidebar a:hover,.sidebar a.active,.sidebar .menu-main.active{
  background:linear-gradient(90deg,rgba(var(--primary-rgb),.16),rgba(var(--primary-rgb),.05)) !important;
  border-color:rgba(var(--primary-rgb),.35);
  color:#fff !important;
  box-shadow:inset 3px 0 0 var(--primary),0 0 24px rgba(var(--primary-rgb),.08);
}
.menu-section{
  background:rgba(255,255,255,.018) !important;
  border:1px solid rgba(255,255,255,.07) !important;
  border-radius:15px !important;
  margin-bottom:12px !important;
  overflow:hidden;
}
.menu-section-title{padding:14px 14px !important;}
.menu-section-title span{color:#fff;font-weight:900;}
.menu-section-title small{color:var(--muted-2) !important;}
.menu-section-links{padding:0 10px 10px !important;}
.menu-section-links a{font-size:13px !important;margin-bottom:4px !important;}
.menu-logout{background:rgba(255,84,104,.08)!important;border:1px solid rgba(255,84,104,.24)!important;color:#ffc2c9!important;margin-top:16px!important;}
.zg-sidebar-secure{
  margin:18px 4px 6px; padding:18px; border-radius:17px;
  background:linear-gradient(135deg,rgba(var(--primary-rgb),.10),rgba(255,255,255,.025));
  border:1px solid rgba(var(--primary-rgb),.20);
  box-shadow:0 0 35px rgba(var(--primary-rgb),.08);
}
.zg-secure-head{display:flex;align-items:center;gap:11px;color:#fff;font-weight:900;margin-bottom:8px;}
.zg-secure-head span{width:35px;height:35px;border-radius:12px;background:rgba(var(--primary-rgb),.12);display:grid;place-items:center;border:1px solid rgba(var(--primary-rgb),.35);}
.zg-sidebar-secure p{margin:0;color:var(--muted);font-size:12px;line-height:1.45;}
.zg-service-line{height:5px;border-radius:999px;background:rgba(255,255,255,.08);margin-top:15px;overflow:hidden;}
.zg-service-line i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--primary),#66f0ff);box-shadow:0 0 18px rgba(var(--primary-rgb),.6);}
.main{margin-left:282px !important; padding:24px 28px 34px !important;}
.topbar{
  background:rgba(9,14,26,.74) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 22px 70px rgba(0,0,0,.22) !important;
  backdrop-filter:blur(18px);
  padding:16px 18px !important;
  gap:16px;
}
.zg-topbar-left strong{font-size:20px !important;letter-spacing:-.5px;}
.zg-topbar-left small{font-size:13px;}
.zg-topbar-actions{display:flex;align-items:center;gap:12px;}
.zg-search{width:min(420px,32vw);display:flex;align-items:center;gap:9px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.10);border-radius:13px;padding:10px 12px;color:var(--muted);}
.zg-search kbd{margin-left:auto;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);padding:3px 7px;border-radius:8px;color:var(--muted);font-size:11px;}
.zg-user-chip{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);padding:8px 11px;border-radius:13px;}
.zg-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,rgba(var(--primary-rgb),.35),rgba(var(--primary-rgb),.08));border:1px solid rgba(var(--primary-rgb),.35);font-weight:900;color:#fff;}
.zg-icon-btn{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);color:#fff;}
.card,.stat-card,.stat,.zg-panel-card{
  background:linear-gradient(180deg,rgba(12,17,31,.92),rgba(9,13,24,.88)) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:17px !important;
  box-shadow:0 22px 70px rgba(0,0,0,.26) !important;
}
.card:hover,.stat-card:hover{border-color:rgba(var(--primary-rgb),.22)!important;}
.card h2{letter-spacing:-.6px;}
input,select,textarea{
  background:rgba(5,7,14,.74)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:13px!important;
}
input:focus,select:focus,textarea:focus{border-color:rgba(var(--primary-rgb),.65)!important;box-shadow:0 0 0 4px rgba(var(--primary-rgb),.10)!important;}
button,.btn{background:linear-gradient(135deg,var(--primary),#0097b2)!important;color:#031016!important;box-shadow:0 12px 32px rgba(var(--primary-rgb),.20)!important;}
.btn-secondary{background:rgba(255,255,255,.08)!important;color:#fff!important;box-shadow:none!important;}
.btn-danger{background:linear-gradient(135deg,#ff5b70,#d7384c)!important;color:#fff!important;}
.table th{color:#95a5bd!important;letter-spacing:.8px;}
.table td{border-bottom:1px solid rgba(255,255,255,.07)!important;}
.table tr:hover td{background:rgba(var(--primary-rgb),.035)!important;}
.badge{border:1px solid currentColor;}
.badge-ativo,.badge-ativa,.badge-sucesso{background:rgba(0,228,138,.12)!important;color:#33f0a2!important;}
.badge-bloqueado,.badge-bloqueada,.badge-expirada{background:rgba(255,84,104,.12)!important;color:#ff7c8c!important;}
.badge-pendente{background:rgba(255,211,77,.12)!important;color:#ffd34d!important;}
/* Dashboard v2 */
.zg-dash-shell{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start;}
.zg-dash-main{min-width:0;}
.zg-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px;padding:22px 24px;border-radius:18px;background:linear-gradient(135deg,rgba(11,17,31,.94),rgba(10,15,28,.72));border:1px solid rgba(255,255,255,.08);box-shadow:0 22px 70px rgba(0,0,0,.24);}
.zg-hero h1{margin:0 0 6px;font-size:23px;letter-spacing:-.7px;}.zg-hero p{margin:0;color:var(--muted);}
.zg-hero-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;min-width:370px;}
.zg-hero-chip{padding:13px 15px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);}
.zg-hero-chip span{display:block;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px}.zg-hero-chip strong{display:block;margin-top:4px;}
.zg-status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 14px var(--success);margin-left:6px;}
.zg-stats-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:16px;}
.zg-stat{position:relative;min-height:116px;padding:17px;border-radius:16px;background:linear-gradient(180deg,rgba(13,19,34,.94),rgba(8,12,22,.92));border:1px solid rgba(255,255,255,.08);overflow:hidden;}
.zg-stat::after{content:"";position:absolute;right:-30px;top:-30px;width:86px;height:86px;border-radius:50%;background:rgba(var(--primary-rgb),.10);filter:blur(2px);}
.zg-stat span{display:block;color:var(--muted);font-size:12px;font-weight:800}.zg-stat strong{display:block;font-size:30px;margin:9px 0 3px;letter-spacing:-1px}.zg-stat small{font-size:11px}.zg-stat i{position:absolute;right:15px;top:15px;color:var(--primary);font-style:normal;font-size:22px;}
.zg-dash-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;margin-bottom:16px;}
.zg-chart-card,.zg-table-card,.zg-side-card{padding:18px;border-radius:17px;background:linear-gradient(180deg,rgba(12,17,31,.92),rgba(9,13,24,.88));border:1px solid rgba(255,255,255,.08);box-shadow:0 22px 70px rgba(0,0,0,.20);}
.zg-card-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.zg-card-title h2{font-size:17px;margin:0}.zg-card-title small{border:1px solid rgba(255,255,255,.09);padding:6px 9px;border-radius:10px;background:rgba(255,255,255,.035);}
.zg-fake-chart{height:180px;position:relative;border-radius:13px;background:linear-gradient(180deg,rgba(var(--primary-rgb),.08),rgba(var(--primary-rgb),.02));overflow:hidden;border:1px solid rgba(255,255,255,.055);}
.zg-fake-chart svg{position:absolute;inset:0;width:100%;height:100%;}.zg-fake-chart .gridline{stroke:rgba(255,255,255,.07);stroke-width:1}.zg-fake-chart .line{fill:none;stroke:var(--primary);stroke-width:3;filter:drop-shadow(0 0 8px rgba(var(--primary-rgb),.75));}.zg-fake-chart .area{fill:rgba(var(--primary-rgb),.16);}
.zg-donut-wrap{display:flex;align-items:center;justify-content:center;gap:22px;min-height:180px}.zg-donut{width:132px;height:132px;border-radius:50%;background:conic-gradient(var(--primary) 0 73%,#ff5468 73% 92%,#536176 92% 100%);display:grid;place-items:center;box-shadow:0 0 38px rgba(var(--primary-rgb),.13);}.zg-donut>div{width:82px;height:82px;border-radius:50%;background:#070b15;display:grid;place-items:center;text-align:center;border:1px solid rgba(255,255,255,.08)}.zg-donut strong{font-size:26px}.zg-legend{display:grid;gap:12px;color:var(--muted)}.zg-legend b{color:#fff;font-weight:700}.zg-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px}.zg-dot.cyan{background:var(--primary)}.zg-dot.red{background:#ff5468}.zg-dot.gray{background:#536176}
.zg-tables-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}.zg-table-card table{width:100%;border-collapse:collapse}.zg-table-card th,.zg-table-card td{padding:12px 8px;border-bottom:1px solid rgba(255,255,255,.07);text-align:left}.zg-table-card th{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:#91a0b7}.zg-table-card td{font-size:13px}.zg-table-link{display:inline-flex;margin-top:12px;color:var(--primary);font-weight:900;font-size:13px}.zg-key{font-family:Consolas,monospace;color:#cfd8e8}.zg-status{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border-radius:999px;font-size:10px;font-weight:900;text-transform:uppercase}.zg-status.ok{background:rgba(0,228,138,.12);color:#3df0a5}.zg-status.warn{background:rgba(255,211,77,.12);color:#ffd34d}.zg-status.block{background:rgba(255,84,104,.12);color:#ff7c8c}.zg-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;}
.zg-temp-card{padding:18px;border-radius:17px;background:linear-gradient(180deg,rgba(12,17,31,.92),rgba(9,13,24,.88));border:1px solid rgba(255,255,255,.08)}
.zg-side{display:grid;gap:14px}.zg-side-card h2{font-size:19px;margin:0 0 6px}.zg-side-card p{margin:0 0 14px;color:var(--muted)}.zg-side-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.zg-side-stat{padding:13px;border-radius:13px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}.zg-side-stat span{display:block;color:var(--muted);font-size:11px}.zg-side-stat strong{font-size:24px}.zg-member,.zg-activity{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}.zg-member:last-child,.zg-activity:last-child{border-bottom:0}.zg-member-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(var(--primary-rgb),.12);border:1px solid rgba(var(--primary-rgb),.24)}.zg-member-info{flex:1}.zg-member-info strong{display:block;font-size:13px}.zg-member-info small{font-size:11px}.zg-online{color:#00e48a;font-size:11px;font-weight:900}.zg-offline{color:#7f8ca0;font-size:11px;font-weight:900}.zg-shield-card{display:flex;align-items:center;gap:14px}.zg-shield-icon{margin-left:auto;width:70px;height:70px;border-radius:22px;display:grid;place-items:center;color:var(--primary);font-size:34px;background:rgba(var(--primary-rgb),.09);border:1px solid rgba(var(--primary-rgb),.28);box-shadow:0 0 30px rgba(var(--primary-rgb),.16)}
@media(max-width:1500px){.zg-dash-shell{grid-template-columns:1fr}.zg-side{grid-template-columns:repeat(2,1fr)}.zg-stats-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:980px){.main{margin-left:0!important}.zg-hero{display:block}.zg-hero-meta{min-width:0;margin-top:15px}.zg-dash-grid,.zg-tables-grid,.zg-side{grid-template-columns:1fr}.zg-stats-grid{grid-template-columns:repeat(2,1fr)}.zg-search{display:none}.topbar{align-items:flex-start!important}.zg-topbar-actions{margin-top:12px}.sidebar{position:relative!important;width:100%!important}.layout{display:block!important}}
@media(max-width:620px){.zg-stats-grid,.zg-hero-meta{grid-template-columns:1fr}.zg-topbar-actions{flex-wrap:wrap}}


/* =========================================================
   ZG DESIGN V3 - PÁGINAS INTERNAS PREMIUM
   Referência visual: dashboard SaaS escuro + #00ddff suave
   ========================================================= */
:root{
    --primary:#00ddff;
    --primary-dark:#00a9c7;
    --primary-soft:rgba(0,221,255,.11);
    --primary-line:rgba(0,221,255,.28);
    --glass:rgba(255,255,255,.045);
    --glass-2:rgba(255,255,255,.065);
    --cyan-glow:0 0 34px rgba(0,221,255,.10);
}
body{
    background:
        radial-gradient(circle at 18% -10%, rgba(0,221,255,.18), transparent 34%),
        radial-gradient(circle at 90% 4%, rgba(0,95,115,.20), transparent 28%),
        linear-gradient(180deg,#071018 0%,#070911 48%,#05070d 100%) !important;
}
.main{position:relative;}
.main:before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
    background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.016) 1px,transparent 1px);
    background-size:42px 42px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 90%);
}
.zg-brand-icon,.zg-icon-btn,.package-guide__icon{
    background:linear-gradient(135deg,rgba(0,221,255,.20),rgba(0,221,255,.055)) !important;
    border-color:rgba(0,221,255,.32) !important;
    box-shadow:inset 0 0 18px rgba(0,221,255,.08),0 0 20px rgba(0,221,255,.07) !important;
}
.zg-brand-title,.menu-label,.menu-section-title span{letter-spacing:.2px;}
.sidebar{
    background:linear-gradient(180deg,rgba(7,14,22,.98),rgba(8,9,18,.96)) !important;
    border-right:1px solid rgba(0,221,255,.10) !important;
    box-shadow:10px 0 50px rgba(0,0,0,.25);
}
.menu-section{background:rgba(255,255,255,.025)!important;border-color:rgba(255,255,255,.06)!important;}
.menu-section.open,.sidebar a.active,.sidebar a:hover{
    background:linear-gradient(135deg,rgba(0,221,255,.13),rgba(0,221,255,.045))!important;
    border-color:rgba(0,221,255,.22)!important;
    color:#fff!important;
    box-shadow:0 10px 28px rgba(0,221,255,.055);
}
.zg-sidebar-secure{
    border:1px solid rgba(0,221,255,.18)!important;
    background:linear-gradient(135deg,rgba(0,221,255,.10),rgba(255,255,255,.025))!important;
    box-shadow:var(--cyan-glow);
}
.zg-service-line i{background:linear-gradient(90deg,#00ddff,#55f2ff)!important;}
.topbar{
    background:linear-gradient(135deg,rgba(13,22,34,.82),rgba(12,13,25,.72))!important;
    border:1px solid rgba(0,221,255,.12)!important;
    box-shadow:0 18px 60px rgba(0,0,0,.22),var(--cyan-glow)!important;
}
.zg-search{border-color:rgba(0,221,255,.12)!important;background:rgba(0,0,0,.18)!important;}
.zg-search kbd{border-color:rgba(0,221,255,.18)!important;color:#8df4ff!important;background:rgba(0,221,255,.06)!important;}
.card{
    position:relative;
    background:linear-gradient(180deg,rgba(17,28,42,.86),rgba(13,14,25,.92))!important;
    border:1px solid rgba(255,255,255,.075)!important;
    box-shadow:0 18px 55px rgba(0,0,0,.23)!important;
    overflow:hidden;
}
.card:before{
    content:"";position:absolute;left:0;right:0;top:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(0,221,255,.45),transparent);
    opacity:.68;pointer-events:none;
}
.card h2{
    display:flex;align-items:center;gap:10px;
    color:#fff!important;font-size:20px!important;margin-bottom:18px!important;
}
.card h2:before{
    content:"";width:10px;height:10px;border-radius:50%;
    background:#00ddff;box-shadow:0 0 18px rgba(0,221,255,.65);
    flex:0 0 auto;
}
.card p{line-height:1.55;}
input,select,textarea{
    background:rgba(4,9,16,.72)!important;
    border:1px solid rgba(255,255,255,.10)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
input:focus,select:focus,textarea:focus{
    border-color:rgba(0,221,255,.70)!important;
    box-shadow:0 0 0 4px rgba(0,221,255,.10),0 0 24px rgba(0,221,255,.065)!important;
}
label{color:#e8f7fa!important;}
button,.btn{
    background:linear-gradient(135deg,#00ddff,#0088a3)!important;
    color:#031017!important;
    box-shadow:0 12px 28px rgba(0,221,255,.14)!important;
    border:1px solid rgba(255,255,255,.08)!important;
}
.btn-secondary{
    background:rgba(255,255,255,.06)!important;
    color:#eafaff!important;
    border:1px solid rgba(0,221,255,.14)!important;
    box-shadow:none!important;
}
.btn-danger{background:linear-gradient(135deg,#ff5b73,#b92e44)!important;color:#fff!important;box-shadow:0 12px 28px rgba(255,91,115,.12)!important;}
.actions .btn,.actions button,.table .btn,.table button{border-radius:11px!important;}
.table-responsive{border-radius:16px;border:1px solid rgba(255,255,255,.055);background:rgba(0,0,0,.10);}
.table{border-spacing:0!important;}
.table th{
    background:rgba(0,221,255,.045)!important;
    color:#a9f6ff!important;
    border-bottom:1px solid rgba(0,221,255,.12)!important;
}
.table td{border-bottom-color:rgba(255,255,255,.06)!important;}
.table tr:hover td{background:rgba(0,221,255,.035)!important;}
.badge{border:1px solid rgba(255,255,255,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);}
.badge-ativo,.badge-ativa,.status-ok,.api-result-autorizado{
    background:rgba(50,220,130,.13)!important;color:#88ffbd!important;border-color:rgba(50,220,130,.28)!important;
}
.badge-bloqueado,.badge-bloqueada,.badge-expirada,.status-fail,.api-result-bloqueado{
    background:rgba(255,92,118,.13)!important;color:#ff9bad!important;border-color:rgba(255,92,118,.28)!important;
}
.badge-pendente{background:rgba(255,190,75,.13)!important;color:#ffd98a!important;border-color:rgba(255,190,75,.28)!important;}
.stats,.zg-stat-grid,.grid{gap:18px!important;}
.stat-card,.zg-stat,.stat{
    background:linear-gradient(135deg,rgba(0,221,255,.10),rgba(255,255,255,.035))!important;
    border:1px solid rgba(0,221,255,.12)!important;
    box-shadow:0 16px 42px rgba(0,0,0,.20)!important;
}
.stat-card strong,.zg-stat strong,.stat h3{color:#fff!important;text-shadow:0 0 18px rgba(0,221,255,.10);}
.details-grid > div{
    background:rgba(0,221,255,.035)!important;
    border-color:rgba(0,221,255,.12)!important;
}
.code-box,.lic-mono,.mono,code{
    color:#baf8ff!important;
    background:rgba(0,0,0,.22)!important;
    border-color:rgba(0,221,255,.12)!important;
}
.error,.success{border-radius:16px!important;box-shadow:0 14px 34px rgba(0,0,0,.18);}
.success{background:rgba(50,220,130,.12)!important;border-color:rgba(50,220,130,.32)!important;color:#baffd4!important;}
.error{background:rgba(255,92,118,.12)!important;border-color:rgba(255,92,118,.32)!important;color:#ffc4cc!important;}
.package-guide{
    border-color:rgba(0,221,255,.20)!important;
    background:radial-gradient(circle at 0% 0%,rgba(0,221,255,.13),transparent 34%),linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.025))!important;
}
.package-guide__card--example{background:linear-gradient(135deg,rgba(0,221,255,.14),rgba(0,221,255,.045))!important;border-color:rgba(0,221,255,.32)!important;}
.zg-demo-modal{border-color:rgba(0,221,255,.24)!important;box-shadow:0 24px 70px rgba(0,0,0,.46),0 0 45px rgba(0,221,255,.10)!important;}
.zg-demo-field{background:rgba(0,221,255,.035)!important;border-color:rgba(0,221,255,.14)!important;}
/* Painéis internos: dá aparência de seção premium mesmo sem alterar a lógica PHP */
.main > .card:first-of-type{
    border-color:rgba(0,221,255,.14)!important;
}
.main > .card:first-of-type h2{font-size:22px!important;}
.main > .card:first-of-type form{position:relative;z-index:1;}
.form-grid{gap:18px!important;}
.table-licencas th,.table-licencas td{border-color:rgba(255,255,255,.055)!important;}
.license-actions .btn,.license-actions button{box-shadow:none!important;}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(0,221,255,.38),rgba(255,255,255,.10))!important;}
@media(max-width:900px){
    .sidebar{box-shadow:none!important;}
    .topbar{gap:16px;}
    .zg-topbar-actions{margin-top:12px;}
}


/* =========================================================
   Design v5 — presença real da equipe + ajustes finais
   ========================================================= */
.zg-member-info small{color:rgba(223,231,245,.64)!important;}
.zg-online,.zg-offline{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;font-size:10px!important;letter-spacing:.04em;}
.zg-online{background:rgba(0,228,138,.10);border:1px solid rgba(0,228,138,.20);color:#00e48a!important;}
.zg-offline{background:rgba(127,140,160,.10);border:1px solid rgba(127,140,160,.18);color:#9aa8ba!important;}
.zg-online:before,.zg-offline:before{content:'';width:6px;height:6px;border-radius:50%;display:inline-block;}
.zg-online:before{background:#00e48a;box-shadow:0 0 10px rgba(0,228,138,.7);}
.zg-offline:before{background:#718096;}
.zg-side-stat strong{line-height:1;}


/* =========================================================
   AJUSTE FINAL TOPO LIMPO — ADM
   Remove o bloco textual do topo e centraliza a busca.
========================================================= */
.topbar.topbar-clean{
    display:grid !important;
    grid-template-columns:1fr minmax(320px, 520px) 1fr !important;
    align-items:center !important;
    gap:18px !important;
    min-height:66px !important;
    padding:12px 18px !important;
}
.topbar.topbar-clean .zg-topbar-spacer{
    min-width:1px;
}
.topbar.topbar-clean .zg-search-centered{
    width:100% !important;
    justify-self:center !important;
}
.topbar.topbar-clean .zg-topbar-actions-right{
    justify-self:end !important;
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
}
.zg-demo-banner-clean{
    margin:-12px 0 18px !important;
    width:max-content;
    max-width:100%;
}
@media(max-width:980px){
    .topbar.topbar-clean{
        grid-template-columns:1fr !important;
        justify-items:stretch !important;
    }
    .topbar.topbar-clean .zg-topbar-spacer{display:none !important;}
    .topbar.topbar-clean .zg-search-centered{display:flex !important; max-width:none !important;}
    .topbar.topbar-clean .zg-topbar-actions-right{justify-self:start !important; flex-wrap:wrap !important;}
}
@media(max-width:620px){
    .topbar.topbar-clean .zg-user-chip div:last-child{display:none !important;}
    .topbar.topbar-clean .zg-search-centered kbd{display:none !important;}
}


/* ZG Tickets */
.ticket-thread{display:flex;flex-direction:column;gap:14px;margin-top:12px}.ticket-message{padding:14px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035)}.ticket-message p{margin:8px 0 0;line-height:1.55;color:var(--text, #e8edf5)}.ticket-message small{color:var(--muted, #8c95a8);font-size:12px}.ticket-client{border-color:rgba(0,221,255,.22);background:rgba(0,221,255,.06)}.ticket-admin{border-color:rgba(90,255,160,.18);background:rgba(90,255,160,.045)}