:root {
    --nav:#354351;
    --nav-hover:#293641;
    --card:#ffffff;
    --bg:#f3f6f8;
    --line:#d8e1e8;
    --text:#253444;
    --muted:#718092;
    --cyan:#43b9d2;
    --green:#28b16f;
    --orange:#e6aa36;
}

* {
    box-sizing:border-box;
}

html,
body {
    margin:0;
    min-height:100%;
    font-family:"Segoe UI",Arial,sans-serif;
    background:var(--bg);
    color:var(--text);
}

body {
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

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

button,
input {
    font:inherit;
}


/* ============================
   TOP NAV
============================ */

.topnav {
    min-height:52px;
    display:flex;
    align-items:stretch;
    background:var(--nav);
    color:#dbe3e9;
    position:relative;
    z-index:100;
}

.brand {
    width:68px;
    min-width:68px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-right:1px solid rgba(255,255,255,.08);
}

.brand img {
    width:48px;
    max-height:36px;
    object-fit:contain;
}

.brand-fallback {
    display:none;
    color:white;
    font-weight:900;
    font-size:12px;
}

.nav-items {
    display:flex;
    align-items:stretch;
    flex:1;
}

.nav-group {
    position:relative;
}

.nav-trigger,
.simple-nav {
    height:52px;
    padding:0 11px;
    display:flex;
    align-items:center;
    gap:5px;
    border:0;
    background:transparent;
    color:#e1e6eb;
    font-size:11px;
    white-space:nowrap;
    cursor:pointer;
}

.nav-trigger:hover,
.simple-nav:hover,
.nav-group:hover .nav-trigger {
    background:var(--nav-hover);
    color:white;
}

.dropdown {
    display:none;
    position:absolute;
    left:0;
    top:52px;
    width:230px;
    background:white;
    border-top:3px solid var(--cyan);
    box-shadow:0 12px 28px rgba(30,45,60,.20);
    z-index:200;
}

.nav-group:hover .dropdown {
    display:block;
}

.dropdown a {
    display:block;
    padding:11px 13px;
    color:#40505f;
    font-size:12px;
    border-bottom:1px solid #eef2f5;
}

.dropdown a:hover {
    color:#117b96;
    background:#eef6f8;
}

.dropdown-right {
    left:auto;
    right:0;
}


/* ============================
   ADMIN ACCOUNT
============================ */

.account-menu {
    min-width:108px;
    position:relative;
    background:#317f91;
}

.account-button {
    height:52px;
    padding:0 13px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    color:white;
    font-size:12px;
    cursor:pointer;
}

.account-dropdown {
    display:none;
    position:absolute;
    right:0;
    top:52px;
    width:220px;
    background:white;
    color:#3a4958;
    box-shadow:0 12px 28px rgba(30,45,60,.20);
    border-top:3px solid var(--cyan);
}

.account-menu:hover .account-dropdown {
    display:block;
}

.account-email {
    padding:12px;
    color:#7a8794;
    font-size:11px;
    border-bottom:1px solid #e8edf1;
}

.account-dropdown form {
    margin:0;
}

.account-dropdown button {
    width:100%;
    border:0;
    padding:11px 12px;
    text-align:left;
    cursor:pointer;
    color:#3a4958;
    background:white;
}

.account-dropdown button:hover {
    background:#f1f5f7;
}


/* ============================
   CONTENT
============================ */

.content {
    width:min(1450px,calc(100% - 32px));
    margin:0 auto;
    padding:28px 0 55px;
    flex:1;
}

.page-title {
    margin-bottom:18px;
}

.page-title h2 {
    margin:0;
    font-size:25px;
}

.page-title p {
    margin:5px 0 0;
    color:var(--muted);
    font-size:13px;
}

.architecture-box {
    margin-bottom:17px;
    padding:12px 14px;
    border:1px solid #bee5ed;
    border-radius:9px;
    background:#eaf9fc;
    color:#35636f;
    font-size:12px;
}

.dashboard-stats {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:15px;
    margin-bottom:18px;
}

.stat-card {
    background:white;
    border:1px solid var(--line);
    border-radius:13px;
    padding:17px;
    box-shadow:0 4px 12px rgba(30,50,70,.05);
}

.stat-card span {
    font-size:11px;
    color:#738293;
}

.stat-card strong {
    display:block;
    margin-top:7px;
    font-size:27px;
}

.server-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.server-card {
    border:1px solid var(--line);
    border-radius:13px;
    overflow:hidden;
    background:white;
    box-shadow:0 5px 14px rgba(30,50,70,.05);
}

.server-title {
    min-height:42px;
    padding:0 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#4e627c;
    color:white;
    font-weight:700;
    font-size:12px;
}

.server-body {
    padding:15px;
}

.badges {
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    margin-bottom:15px;
}

.badge {
    display:inline-block;
    padding:4px 7px;
    border-radius:999px;
    font-size:9px;
    font-weight:800;
}

.badge-main {
    background:#e5efff;
    color:#3868a1;
}

.badge-green {
    background:#ddf7e9;
    color:#17764a;
}

.badge-gray {
    background:#edf0f3;
    color:#6c7985;
}

.badge-orange {
    background:#fff0d5;
    color:#8d6519;
}

.server-numbers {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-bottom:14px;
}

.number-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:38px;
    font-size:11px;
}

.round {
    width:27px;
    height:27px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:white;
    font-size:10px;
}

.round.cyan {
    background:var(--cyan);
}

.round.gray {
    background:#a6b4bf;
}

.resource-line {
    padding:12px 0;
    margin-bottom:12px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    border-top:1px solid #e8edf1;
    border-bottom:1px solid #e8edf1;
}

.resource-label {
    display:flex;
    justify-content:space-between;
    margin-bottom:5px;
    color:#586776;
    font-size:9px;
}

.progress {
    height:7px;
    border-radius:30px;
    overflow:hidden;
    background:#e5e9ed;
}

.progress span {
    display:block;
    height:100%;
    background:var(--cyan);
}

.server-info {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px 18px;
    margin-bottom:12px;
    font-size:10px;
}

.service-box {
    padding:11px;
    border:1px solid #d9e2e8;
    border-radius:8px;
    background:#fbfcfd;
    font-size:10px;
}

.service-bottom {
    margin-top:9px;
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:center;
}

.empty-loader {
    min-height:175px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:#718092;
}

.empty-loader strong {
    color:#344555;
    margin-bottom:8px;
}

.empty-loader p {
    max-width:360px;
    line-height:1.55;
    font-size:11px;
}


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

.login-page {
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:25px;
    background:
        linear-gradient(rgba(5,31,45,.65),rgba(5,31,45,.70)),
        url("https://painel.dttdns.com/images/login-bg.jpg") center/cover fixed;
}

.login-card {
    width:min(430px,95vw);
    padding:30px;
    border-radius:18px;
    background:rgba(255,255,255,.97);
    box-shadow:0 25px 65px rgba(0,0,0,.30);
}

.login-card h1 {
    margin:0;
    text-align:center;
    font-size:26px;
}

.login-card .subtitle {
    text-align:center;
    color:var(--muted);
    margin:7px 0 22px;
}

.field {
    margin:13px 0;
}

.field label {
    display:block;
    margin-bottom:6px;
    font-size:12px;
    font-weight:700;
}

.field input {
    width:100%;
    height:44px;
    padding:0 12px;
    border:1px solid #cbd6df;
    border-radius:9px;
}

.btn-primary {
    display:inline-block;
    padding:11px 15px;
    border:0;
    border-radius:9px;
    background:linear-gradient(90deg,#28a8c6,#48bdd5);
    color:white;
    font-weight:800;
    cursor:pointer;
}

.btn-full {
    width:100%;
}

.auth-links {
    display:flex;
    justify-content:space-between;
    gap:15px;
    margin-top:15px;
    font-size:13px;
}

.alert {
    padding:11px 13px;
    margin-bottom:15px;
    border-radius:9px;
    font-size:13px;
}

.alert-success {
    background:#e4f6ec;
    color:#246c4a;
}

.alert-danger {
    background:#f9e5e5;
    color:#983e42;
}

.card {
    background:white;
    border:1px solid var(--line);
    border-radius:12px;
    padding:17px;
}


/* ============================
   FOOTER
============================ */

.footer {
    padding:17px 10px;
    text-align:center;
    border-top:1px solid var(--line);
    background:white;
    color:#718092;
    font-size:11px;
}


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

@media(max-width:1200px) {

    .nav-trigger,
    .simple-nav {
        padding:0 8px;
        font-size:10px;
    }

}

@media(max-width:1000px) {

    .nav-items {
        overflow-x:auto;
    }

    .server-grid {
        grid-template-columns:1fr;
    }

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

}

@media(max-width:650px) {

    .dashboard-stats {
        grid-template-columns:1fr;
    }

}


/* ========================================================
   REGISTOS / TABELAS ADMIN
======================================================== */

.table-panel {
    padding:0;
    overflow:hidden;
}

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

.data-table {
    width:100%;
    border-collapse:collapse;
    font-size:12px;
}

.data-table th {
    padding:12px 14px;
    text-align:left;
    background:#f6f8fa;
    color:#708090;
    border-bottom:1px solid #dfe6eb;
    font-size:10px;
    text-transform:uppercase;
    white-space:nowrap;
}

.data-table td {
    padding:12px 14px;
    border-bottom:1px solid #edf1f4;
    vertical-align:middle;
}

.data-table tbody tr:hover {
    background:#f9fbfc;
}

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

.actions-cell form {
    margin:0;
}

.action-btn {
    border:0;
    border-radius:6px;
    padding:7px 10px;
    color:white;
    cursor:pointer;
    font-size:10px;
    font-weight:700;
}

.btn-client {
    background:#299e69;
}

.btn-client:hover {
    background:#218659;
}

.btn-reseller {
    background:#319fbd;
}

.btn-reseller:hover {
    background:#2887a1;
}

.btn-ban {
    background:#c8565b;
}

.btn-ban:hover {
    background:#ae454a;
}

.btn-restore {
    background:#687988;
}

.btn-restore:hover {
    background:#536472;
}

.flash-success {
    margin-bottom:15px;
    padding:11px 14px;
    border:1px solid #bde5cf;
    border-radius:8px;
    background:#e4f7ec;
    color:#236b48;
    font-size:12px;
}

.empty-state {
    min-height:180px;
    padding:30px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:7px;
    color:#7c8996;
    text-align:center;
}

.empty-state strong {
    color:#354555;
    font-size:15px;
}




/* ==========================================================
   LOGIN / REGISTO - VISUAL V7
========================================================== */

.auth-page {
    min-height:100vh;
    margin:0;
    display:grid;
    place-items:center;
    padding:24px;

    background:
        linear-gradient(
            rgba(4,30,45,.64),
            rgba(4,30,45,.70)
        ),
        url("https://painel.dttdns.com/images/login-bg.jpg")
        center center / cover no-repeat fixed;
}


.auth-box {
    width:min(440px,94vw);
    padding:32px 30px 26px;

    background:rgba(255,255,255,.97);

    border-radius:18px;

    box-shadow:
        0 24px 70px
        rgba(0,0,0,.30);
}


.auth-brand {
    text-align:center;
}


.auth-brand img {
    display:block;

    width:235px;
    max-width:82%;
    height:auto;

    margin:0 auto 10px;
}


.auth-brand h1 {
    margin:0;

    color:#263647;

    font-size:22px;
    font-weight:800;
}


.auth-brand p {
    margin:6px 0 20px;

    color:#7c8998;

    font-size:13px;
}


.auth-tabs {
    display:grid;
    grid-template-columns:1fr 1fr;

    margin-bottom:17px;

    padding:4px;

    background:#edf2f5;

    border-radius:10px;
}


.auth-tab {
    padding:10px;

    text-align:center;

    border-radius:8px;

    color:#607080;

    font-size:13px;
}


.auth-tab.active {
    background:white;

    color:#1f2f3d;

    font-weight:800;

    box-shadow:
        0 2px 8px
        rgba(0,0,0,.08);
}


.auth-field {
    margin:13px 0;
}


.auth-field label {
    display:block;

    margin-bottom:6px;

    color:#263747;

    font-size:12px;
    font-weight:700;
}


.auth-field input {
    width:100%;
    height:44px;

    padding:0 13px;

    border:1px solid #ccd7df;

    border-radius:9px;

    outline:none;

    background:white;

    color:#263747;
}


.auth-field input:focus {
    border-color:#44b9d2;

    box-shadow:
        0 0 0 3px
        rgba(68,185,210,.12);
}


.auth-options {
    margin:9px 0 0;

    color:#5e6d7c;

    font-size:12px;
}


.auth-options label {
    cursor:pointer;
}


.auth-submit {
    width:100%;

    margin-top:13px;

    padding:12px 16px;

    border:0;

    border-radius:9px;

    background:
        linear-gradient(
            90deg,
            #29abc8,
            #48bdd5
        );

    color:white;

    font-weight:800;

    cursor:pointer;
}


.auth-submit:hover {
    filter:brightness(.97);
}


.auth-bottom {
    display:flex;

    justify-content:space-between;

    gap:12px;

    margin-top:16px;

    color:#596979;

    font-size:12px;
}


.auth-bottom a {
    color:#168ca8;

    font-weight:600;
}


.auth-info {
    margin-top:13px;

    padding:11px 12px;

    border-radius:9px;

    background:#eef8fb;

    color:#456b77;

    font-size:11px;

    line-height:1.5;
}


.auth-message {
    margin-bottom:13px;

    padding:10px 12px;

    border-radius:8px;

    font-size:12px;
}


.auth-message.error {
    background:#fae5e5;

    color:#a23d43;
}


.auth-message.success {
    background:#e2f5eb;

    color:#246d4b;
}


@media(max-width:520px) {

    .auth-box {
        padding:26px 20px;
    }

    .auth-brand img {
        width:210px;
    }

}



/* =========================================================
   AVISOS / BADGES DE ATENÇÃO
========================================================= */

.attention-badge {
    min-width:19px;
    height:19px;

    padding:0 5px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    margin-left:2px;

    border-radius:999px;

    background:#df3f45;
    color:white;

    font-size:10px;
    font-weight:800;

    line-height:1;

    box-shadow:
        0 0 0 2px rgba(255,255,255,.18);
}


.dropdown a {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}


.dropdown-count {
    min-width:20px;
    height:20px;

    padding:0 6px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border-radius:999px;

    background:#df3f45;
    color:white;

    font-size:10px;
    font-weight:800;
}



/* =========================================================
   CLIENTES
========================================================= */

.page-title-actions {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:15px;
}


.page-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:9px 13px;

    border:0;
    border-radius:7px;

    background:#32a9c4;
    color:white;

    font-size:11px;
    font-weight:700;

    cursor:pointer;
}


.page-button:hover {
    background:#288fa7;
}


.btn-edit {
    display:inline-block;
    background:#536b82;
}


.btn-edit:hover {
    background:#435b71;
}


.status-pill {
    display:inline-block;

    padding:4px 8px;

    border-radius:999px;

    background:#e8edf1;

    font-size:9px;
    font-weight:800;
}


.status-active {
    background:#ddf7e9;
    color:#1e754d;
}


.status-banned {
    background:#fae5e5;
    color:#a23f44;
}


.form-card {
    padding:20px;

    border:1px solid #d8e1e8;
    border-radius:12px;

    background:white;

    box-shadow:
        0 4px 12px
        rgba(30,50,70,.05);
}


.form-grid {
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:16px;
}


.form-field label {
    display:block;

    margin-bottom:6px;

    color:#41505e;

    font-size:11px;
    font-weight:700;
}


.form-field input,
.form-field select {
    width:100%;
    height:42px;

    padding:0 11px;

    border:1px solid #ccd6de;

    border-radius:7px;

    background:white;

    color:#293947;
}


.form-field input:focus,
.form-field select:focus {
    outline:none;

    border-color:#40b1cb;

    box-shadow:
        0 0 0 3px
        rgba(64,177,203,.12);
}


.form-section-title {
    margin:7px 0 14px;

    color:#304151;

    font-size:13px;
    font-weight:800;
}


.form-section-title:not(:first-child) {
    margin-top:25px;
    padding-top:20px;

    border-top:1px solid #edf1f4;
}


.form-actions {
    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:9px;

    margin-top:20px;
}


.button-secondary {
    display:inline-flex;
    align-items:center;

    min-height:35px;

    padding:0 12px;

    border:1px solid #d5dde4;
    border-radius:7px;

    background:#f5f7f9;

    color:#556574;

    font-size:11px;
}


.form-note {
    margin-top:20px;

    padding:11px 13px;

    border:1px solid #c9e7ed;

    border-radius:8px;

    background:#eef9fb;

    color:#416976;

    font-size:11px;
}


.account-info {
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:10px;

    margin-top:20px;
}


.account-info div {
    padding:11px;

    border:1px solid #e0e6eb;

    border-radius:8px;

    background:#f9fbfc;
}


.account-info span {
    display:block;

    margin-bottom:4px;

    color:#7a8895;

    font-size:9px;

    text-transform:uppercase;
}


.account-info strong {
    font-size:11px;
}


@media(max-width:750px) {

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

    .page-title-actions {
        align-items:flex-start;
        flex-direction:column;
    }

}



/* =========================================================
   TELEGRAM / NOTAS
========================================================= */

.form-notes-field {
    margin-top:18px;
}

.form-notes-field label {
    display:block;

    margin-bottom:6px;

    color:#41505e;

    font-size:11px;
    font-weight:700;
}

.form-notes-field textarea {
    width:100%;

    min-height:120px;

    padding:11px;

    border:1px solid #ccd6de;
    border-radius:7px;

    background:white;

    color:#293947;

    font-family:inherit;

    resize:vertical;
}

.form-notes-field textarea:focus {
    outline:none;

    border-color:#40b1cb;

    box-shadow:
        0 0 0 3px
        rgba(64,177,203,.12);
}



/* =========================================================
   REVENDEDORES
========================================================= */

.credit-pill {
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:34px;

    padding:5px 8px;

    border-radius:999px;

    background:#e2f5eb;
    color:#26704e;

    font-size:10px;
    font-weight:800;
}


.credit-pill.credit-ip {
    background:#e3f2f7;
    color:#26758a;
}


.reseller-credit-summary {
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:12px;

    margin-bottom:17px;
}


.reseller-credit-card {
    padding:15px;

    border:1px solid #d9e3e8;
    border-radius:10px;

    background:white;

    box-shadow:
        0 4px 12px
        rgba(30,50,70,.04);
}


.reseller-credit-card span {
    display:block;

    color:#718090;

    font-size:9px;

    text-transform:uppercase;
}


.reseller-credit-card strong {
    display:block;

    margin-top:6px;

    color:#26704e;

    font-size:22px;
}


.reseller-credit-card.ip strong {
    color:#26758a;
}


@media(max-width:850px) {

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

}


@media(max-width:500px) {

    .reseller-credit-summary {
        grid-template-columns:1fr;
    }

}



/* =========================================================
   TESTES 24 HORAS
========================================================= */

.field-help {
    display:block;

    margin-top:5px;

    color:#8794a0;

    font-size:9px;
}

.reseller-credit-card.trial strong {
    color:#9a6b17;
}

@media(min-width:1100px) {

    .reseller-credit-summary {
        grid-template-columns:
            repeat(5,minmax(0,1fr));
    }

}



/* =========================================================
   PRODUTOS
========================================================= */

.products-admin-grid {
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:15px;
}


.product-admin-card {
    overflow:hidden;

    border:1px solid #d8e1e8;
    border-radius:11px;

    background:white;

    box-shadow:
        0 4px 12px
        rgba(30,50,70,.04);
}


.product-admin-header {
    display:flex;

    align-items:center;
    justify-content:space-between;

    padding:14px;

    background:#4e627c;

    color:white;
}


.product-admin-header strong {
    display:block;

    font-size:13px;
}


.product-admin-header span:not(.status-pill) {
    display:block;

    margin-top:3px;

    color:#ccd7df;

    font-size:8px;
}


.product-period-list {
    padding:6px 14px;
}


.product-period-row {
    display:flex;

    justify-content:space-between;
    align-items:center;

    min-height:54px;

    border-bottom:1px solid #edf1f4;
}


.product-period-row:last-child {
    border-bottom:0;
}


.product-period-row strong {
    display:block;

    font-size:11px;
}


.product-period-row small {
    display:block;

    margin-top:3px;

    color:#82909d;

    font-size:8px;
}


.product-price {
    color:#26758a;

    font-size:12px;
    font-weight:800;
}


.product-edit-button {
    margin:10px 14px 14px;
}


.product-master-switch {
    margin-bottom:17px;

    padding:11px 13px;

    border:1px solid #dce4e9;
    border-radius:8px;

    background:#f7f9fa;

    font-size:11px;
    font-weight:700;
}


.product-edit-table {
    border:1px solid #dce4e9;
    border-radius:9px;

    overflow:hidden;
}


.product-edit-head,
.product-edit-row {
    display:grid;

    grid-template-columns:
        1.4fr 1fr 1fr .5fr;

    align-items:center;

    gap:12px;

    padding:11px 13px;
}


.product-edit-head {
    background:#f2f5f7;

    color:#708090;

    font-size:9px;
    font-weight:800;

    text-transform:uppercase;
}


.product-edit-row {
    border-top:1px solid #edf1f4;

    font-size:11px;
}


.product-edit-row strong {
    display:block;
}


.product-edit-row small {
    display:block;

    margin-top:3px;

    color:#7d8a96;

    font-size:8px;
}


.price-input {
    width:110px;
    height:34px;

    padding:0 8px;

    border:1px solid #ccd6de;
    border-radius:6px;
}


@media(max-width:1000px) {

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

}


@media(max-width:650px) {

    .products-admin-grid {
        grid-template-columns:1fr;
    }

    .product-edit-head {
        display:none;
    }

    .product-edit-row {
        grid-template-columns:1fr;
    }

}



/* =========================================================
   STOCK PRODUTOS
========================================================= */

.product-stock-line {
    padding:10px 14px 0;
}


.stock-pill {
    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:5px 9px;

    border-radius:999px;

    font-size:9px;
    font-weight:800;
}


.stock-pill.in-stock {
    background:#def5e8;
    color:#20764b;
}


.stock-pill.sold-out {
    background:#fae1e3;
    color:#a9343c;
}


.stock-admin-box {
    display:grid;

    grid-template-columns:
        160px 220px 1fr;

    align-items:center;

    gap:12px;

    margin-bottom:17px;

    padding:12px 14px;

    border:1px solid #dce4e9;
    border-radius:8px;

    background:#f7f9fa;
}


.stock-admin-box label {
    font-size:11px;
    font-weight:800;
}


.stock-admin-box select {
    height:37px;

    padding:0 10px;

    border:1px solid #ccd6de;
    border-radius:6px;

    background:white;
}


.stock-admin-box small {
    color:#74828e;
    font-size:9px;
}


@media(max-width:700px) {

    .stock-admin-box {
        grid-template-columns:1fr;
    }

}



/* =========================================================
   PREÇOS PERSONALIZADOS POR CLIENTE
========================================================= */

.client-prices-card {
    margin-top:18px;
}


.custom-price-note {
    margin-bottom:16px;
}


.client-price-product {
    margin-bottom:18px;

    overflow:hidden;

    border:1px solid #dce4e9;
    border-radius:9px;
}


.client-price-product-title {
    display:flex;

    align-items:center;
    justify-content:space-between;

    padding:11px 13px;

    background:#4e627c;

    color:white;
}


.client-price-product-title strong {
    font-size:12px;
}


.client-price-product-title span {
    font-size:8px;

    opacity:.75;
}


.client-price-head,
.client-price-row {
    display:grid;

    grid-template-columns:
        1.2fr 1fr 1fr;

    align-items:center;

    gap:12px;

    padding:10px 13px;
}


.client-price-head {
    background:#f2f5f7;

    color:#73818e;

    font-size:9px;
    font-weight:800;

    text-transform:uppercase;
}


.client-price-row {
    border-top:1px solid #edf1f4;

    font-size:11px;
}


.client-price-row input {
    width:150px;
    height:35px;

    padding:0 9px;

    border:1px solid #ccd6de;
    border-radius:6px;
}


.client-price-row input:focus {
    outline:none;

    border-color:#40b1cb;

    box-shadow:
        0 0 0 3px
        rgba(64,177,203,.12);
}


@media(max-width:700px) {

    .client-price-head {
        display:none;
    }

    .client-price-row {
        grid-template-columns:1fr;
    }

}



/* =========================================================
   ACESSOS
========================================================= */

.client-accesses-card {
    margin-top:18px;
    margin-bottom:18px;
}


.small-muted {
    margin:0;

    color:#788794;

    font-size:10px;
}


.empty-state.compact {
    min-height:80px;
}


.access-status {
    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:4px 8px;

    border-radius:999px;

    font-size:9px;
    font-weight:800;
}


.access-status-active {
    background:#def5e8;
    color:#1e754d;
}


.access-status-suspended {
    background:#fff0cf;
    color:#8d6510;
}


.access-status-cancelled {
    background:#fae1e3;
    color:#a73740;
}


.access-status-expired {
    background:#e6e9ec;
    color:#596570;
}


.access-price-summary {
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:12px;

    margin-bottom:16px;
}


.access-price-summary > div {
    padding:13px;

    border:1px solid #dbe3e8;

    border-radius:9px;

    background:white;
}


.access-price-summary span {
    display:block;

    color:#778592;

    font-size:9px;
}


.access-price-summary strong {
    display:block;

    margin-top:5px;

    color:#263a49;

    font-size:15px;
}


@media(max-width:700px) {

    .access-price-summary {
        grid-template-columns:1fr;
    }

}



/* =========================================================
   ÁREA CLIENTE - PRODUTOS
========================================================= */

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


.client-access-card {
    overflow:hidden;

    border:1px solid #d9e2e8;
    border-radius:10px;

    background:white;
}


.client-access-header {
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:13px 15px;

    background:#4e627c;
    color:white;
}


.client-access-header strong {
    display:block;
}


.client-access-header small {
    display:block;

    margin-top:3px;

    opacity:.7;
}


.client-access-body {
    display:grid;
    grid-template-columns:repeat(2,1fr);

    gap:12px;

    padding:15px;
}


.client-access-info span,
.client-access-credentials span {
    display:block;

    color:#7b8894;

    font-size:9px;
}


.client-access-info strong,
.client-access-credentials strong {
    display:block;

    margin-top:4px;

    font-size:11px;
}


.client-access-credentials {
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:10px;

    padding:12px 15px;

    border-top:1px solid #edf1f4;

    background:#f8fafb;
}


/* =========================================================
   LOJA
========================================================= */

.store-info-note {
    margin-bottom:16px;
}


.store-grid {
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:15px;
}


.store-product-card {
    overflow:hidden;

    border:1px solid #d9e2e8;
    border-radius:10px;

    background:white;
}


.store-product-header {
    display:flex;

    justify-content:space-between;
    align-items:center;

    padding:14px;

    background:#4e627c;

    color:white;
}


.store-product-header strong {
    display:block;

    font-size:13px;
}


.store-product-header small {
    display:block;

    margin-top:3px;

    opacity:.7;
}


.store-periods {
    padding:5px 14px;
}


.store-period-row {
    display:grid;

    grid-template-columns:
        1fr 100px 105px;

    align-items:center;

    gap:12px;

    min-height:62px;

    border-bottom:1px solid #edf1f4;
}


.store-period-row:last-child {
    border-bottom:0;
}


.store-period-row strong {
    display:block;

    font-size:11px;
}


.store-period-row small {
    display:block;

    margin-top:3px;

    color:#7d8995;

    font-size:8px;
}


.store-price {
    text-align:right;

    color:#26758a;

    font-size:12px;
    font-weight:800;
}


.store-order-button {
    width:100%;
}


.store-order-button:disabled {
    cursor:not-allowed;

    background:#cbd3d8;

    opacity:.7;
}


/* =========================================================
   ENCOMENDAS
========================================================= */

.order-status {
    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:4px 8px;

    border-radius:999px;

    font-size:9px;
    font-weight:800;
}


.order-pending {
    background:#fff0cf;
    color:#8d6510;
}


.order-completed {
    background:#def5e8;
    color:#1e754d;
}


.order-cancelled {
    background:#fae1e3;
    color:#a73740;
}


@media(max-width:850px) {

    .client-access-grid,
    .store-grid {
        grid-template-columns:1fr;
    }

}


@media(max-width:650px) {

    .client-access-body,
    .client-access-credentials {
        grid-template-columns:1fr;
    }


    .store-period-row {
        grid-template-columns:1fr;
    }


    .store-price {
        text-align:left;
    }

}



/* =========================================================
   ENCOMENDA / PROFORMA
========================================================= */

.order-detail-grid,
.proforma-summary {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin-bottom:16px;
}


.proforma-summary {
    grid-template-columns:repeat(3,minmax(0,1fr));
}


.order-detail-card,
.proforma-summary > div {
    padding:13px;

    border:1px solid #dbe3e8;
    border-radius:9px;

    background:white;
}


.order-detail-card span,
.proforma-summary span,
.proforma-order-summary span {
    display:block;

    color:#778592;

    font-size:9px;
}


.order-detail-card strong,
.proforma-summary strong,
.proforma-order-summary strong {
    display:block;

    margin-top:4px;
}


.order-detail-card small {
    display:block;

    margin-top:3px;

    color:#788692;
}


.proforma-order-summary {
    display:grid;

    grid-template-columns:
        1fr 1fr 1fr auto;

    align-items:center;

    gap:14px;

    margin:14px 0;

    padding:14px;

    border:1px solid #dde5ea;
    border-radius:8px;

    background:#f8fafb;
}


.proforma-actions {
    display:flex;

    gap:10px;

    flex-wrap:wrap;
}


.success-button,
.danger-button {
    border:0;
    border-radius:6px;

    padding:9px 13px;

    color:white;

    font-size:10px;
    font-weight:800;

    cursor:pointer;
}


.success-button {
    background:#249b64;
}


.danger-button {
    background:#cf4b53;
}


.soft-divider {
    border:0;

    border-top:1px solid #e7edf0;

    margin:20px 0;
}


.proforma-status {
    display:inline-flex;

    padding:4px 8px;

    border-radius:999px;

    font-size:9px;
    font-weight:800;
}


.proforma-unpaid {
    background:#fff0cf;
    color:#8d6510;
}


.proforma-paid {
    background:#def5e8;
    color:#1e754d;
}


.proforma-cancelled,
.proforma-refunded {
    background:#fae1e3;
    color:#a73740;
}


.row-expired {
    background:#fff5f5;
}


.expired-label {
    display:inline-flex;

    margin-top:3px;

    padding:2px 5px;

    border-radius:4px;

    background:#d9474f;

    color:white;

    font-size:8px;
    font-weight:800;
}


@media(max-width:850px) {

    .order-detail-grid,
    .proforma-summary,
    .proforma-order-summary {
        grid-template-columns:1fr;
    }

}



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

.dashboard-client-card {
    display:block;

    color:inherit;

    text-decoration:none;

    transition:
        transform .12s ease,
        box-shadow .12s ease;
}


.dashboard-client-card:hover {
    transform:translateY(-1px);

    box-shadow:
        0 5px 16px rgba(29,48,63,.09);
}



/* =========================================================
   NOTA CLIENTE + DOWNLOAD DO ACESSO
========================================================= */

.client-access-tools {
    display:flex;
    align-items:flex-end;
    gap:12px;

    padding:13px 15px;

    border-top:1px solid #e8eef2;

    background:#fff;
}


.client-access-note-form {
    flex:1;
}


.client-access-note-form label {
    display:block;

    margin-bottom:5px;

    color:#596b78;

    font-size:9px;
    font-weight:700;
}


.client-note-row {
    display:flex;
    gap:7px;
}


.client-note-row input {
    width:100%;
    min-width:0;

    border:1px solid #ccd8df;
    border-radius:6px;

    padding:8px 9px;

    font-size:10px;
}


.client-note-save {
    flex:0 0 auto;

    border:0;
    border-radius:6px;

    padding:8px 11px;

    background:#51677e;
    color:#fff;

    font-size:9px;
    font-weight:700;

    cursor:pointer;
}


.client-download-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:32px;

    padding:8px 12px;

    border-radius:6px;

    background:#2ba9c5;
    color:white;

    text-decoration:none;

    font-size:9px;
    font-weight:800;

    white-space:nowrap;
}


.client-download-button:hover {
    opacity:.9;
}


@media(max-width:700px) {

    .client-access-tools {
        flex-direction:column;
        align-items:stretch;
    }

    .client-download-button {
        width:100%;
    }
}



/* =========================================================
   RENOVAR JÁ
========================================================= */

.client-renew-box {
    padding:12px 15px;

    border-top:1px solid #e8eef2;

    background:#f8fafb;
}


.client-renew-box label {
    display:block;

    margin-bottom:5px;

    color:#536675;

    font-size:9px;
    font-weight:800;
}


.client-renew-row {
    display:flex;

    gap:7px;
}


.client-renew-row select {
    flex:1;

    min-width:0;

    padding:8px 9px;

    border:1px solid #ccd8df;
    border-radius:6px;

    background:white;

    font-size:10px;
}


.client-renew-button {
    flex:0 0 auto;

    border:0;
    border-radius:6px;

    padding:8px 12px;

    background:#249b64;
    color:white;

    font-size:9px;
    font-weight:800;

    cursor:pointer;
}


.client-renew-box small {
    display:block;

    margin-top:5px;

    color:#7d8995;

    font-size:8px;
}


@media(max-width:700px) {

    .client-renew-row {
        flex-direction:column;
    }

    .client-renew-button {
        width:100%;
    }
}



/* =========================================================
   LIVRO DE RECLAMACOES FOOTER
========================================================= */

.footer-inner {
    display:flex;

    align-items:center;
    justify-content:center;

    flex-wrap:wrap;

    gap:18px;
}


.footer-copy {
    line-height:1.4;
}


.footer-complaints {
    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:5px 9px;

    border-radius:6px;

    background:#34485b;

    text-decoration:none;

    transition:
        opacity .15s ease,
        transform .15s ease;
}


.footer-complaints:hover {
    opacity:.9;

    transform:translateY(-1px);
}


.footer-complaints img {
    display:block;

    width:145px;
    height:auto;
}


@media(max-width:650px) {

    .footer-inner {
        flex-direction:column;

        gap:10px;
    }

}



/* =========================================================
   FOOTER COMPACTO - COPYRIGHT + LIVRO AO LADO
========================================================= */

.footer {
    padding:6px 18px;

    min-height:42px;

    display:flex;
    align-items:center;

    border-top:1px solid var(--line);

    background:#fff;
}


.footer-inner {
    position:relative;

    width:100%;
    min-height:32px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:0;
}


.footer-copy {
    width:100%;

    padding-left:150px;
    padding-right:150px;

    text-align:center;

    line-height:1.2;

    white-space:nowrap;
}


.footer-complaints {
    position:absolute;

    right:0;
    top:50%;

    transform:translateY(-50%);

    display:flex;
    align-items:center;
    justify-content:center;

    width:128px;
    height:32px;

    padding:3px 6px;

    border-radius:4px;

    background:#34485b;

    text-decoration:none;
}


.footer-complaints:hover {
    opacity:.9;

    transform:translateY(-50%);
}


.footer-complaints img {
    display:block;

    width:112px;
    height:auto;

    max-height:26px;

    object-fit:contain;
}


@media(max-width:700px) {

    .footer {
        padding:7px 10px;
    }


    .footer-inner {
        min-height:58px;

        flex-direction:column;

        justify-content:center;

        gap:5px;
    }


    .footer-copy {
        width:auto;

        padding:0;

        white-space:normal;

        text-align:center;
    }


    .footer-complaints {
        position:static;

        width:118px;
        height:29px;

        transform:none;
    }


    .footer-complaints:hover {
        transform:none;
    }


    .footer-complaints img {
        width:104px;
    }

}



/* =========================================================
   PACKS / COMBOS
========================================================= */

.packs-admin-grid {
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:16px;
}


.pack-admin-card {
    overflow:hidden;

    border:1px solid #dce4e9;
    border-radius:10px;

    background:#fff;
}


.pack-admin-header {
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:12px;

    padding:14px;

    background:#4e627c;

    color:#fff;
}


.pack-admin-header strong {
    display:block;

    font-size:13px;
}


.pack-admin-header small {
    display:block;

    margin-top:4px;

    opacity:.75;

    font-size:9px;
}


.pack-period-list {
    padding:5px 14px;
}


.pack-period-row {
    display:flex;

    justify-content:space-between;
    align-items:center;

    min-height:54px;

    gap:10px;

    border-bottom:1px solid #edf1f4;
}


.pack-period-row:last-child {
    border-bottom:0;
}


.pack-period-row strong {
    display:block;

    font-size:11px;
}


.pack-period-row small {
    display:block;

    margin-top:3px;

    color:#7d8995;

    font-size:8px;
}


.pack-price {
    color:#26758a;

    font-size:12px;
    font-weight:800;
}


.pack-edit-button {
    display:block;

    margin:12px 14px 14px;

    text-align:center;
}


.pack-edit-top {
    display:grid;

    grid-template-columns:
        minmax(250px,1fr)
        auto;

    gap:20px;

    align-items:end;

    margin-bottom:16px;
}


.pack-components-box {
    margin-bottom:16px;

    padding:13px;

    border:1px solid #dce4e9;
    border-radius:8px;

    background:#f7f9fa;
}


.pack-components-list {
    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin:8px 0;
}


.pack-components-list span {
    padding:5px 9px;

    border-radius:999px;

    background:#e4eef5;

    color:#314d61;

    font-size:10px;
    font-weight:800;
}


.pack-components-box small {
    color:#7d8995;

    font-size:9px;
}


.pack-price-info {
    display:flex;

    flex-direction:column;

    gap:3px;

    margin-bottom:12px;
}


.pack-price-info strong {
    font-size:12px;
}


.pack-price-info span {
    color:#73818c;

    font-size:9px;
}


.pack-edit-head,
.pack-edit-row {
    display:grid;

    grid-template-columns:
        1.3fr
        1fr
        .7fr;

    align-items:center;

    gap:12px;

    padding:11px 13px;
}


.pack-edit-head {
    background:#f2f5f7;

    color:#708090;

    font-size:9px;
    font-weight:800;

    text-transform:uppercase;
}


.pack-edit-row {
    border-top:1px solid #edf1f4;

    font-size:11px;
}


@media(max-width:1000px) {

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

}


@media(max-width:650px) {

    .packs-admin-grid {
        grid-template-columns:1fr;
    }


    .pack-edit-top {
        grid-template-columns:1fr;
    }


    .pack-edit-head {
        display:none;
    }


    .pack-edit-row {
        grid-template-columns:1fr;
    }

}



/* =========================================================
   PACKS NA LOJA
========================================================= */

.store-packs-section {
    margin-top:28px;
}


.store-section-title {
    margin-bottom:12px;
}


.store-section-title h3 {
    margin:0;

    font-size:17px;
}


.store-section-title p {
    margin:4px 0 0;

    color:#71808c;

    font-size:10px;
}


.store-pack-card
.store-product-header {
    background:#385d71;
}


.pack-store-pill {
    display:inline-flex;

    padding:4px 7px;

    border-radius:999px;

    background:#dff2f7;

    color:#216879;

    font-size:8px;
    font-weight:800;
}


.store-pack-products {
    display:flex;

    gap:7px;

    flex-wrap:wrap;

    padding:11px 14px;

    border-bottom:1px solid #edf1f4;

    background:#f8fafb;
}


.store-pack-products span {
    padding:5px 8px;

    border-radius:999px;

    background:#e5edf2;

    color:#42596a;

    font-size:9px;
    font-weight:800;
}


.pack-not-configured {
    color:#a37b24;

    font-size:9px;
    font-weight:800;
}


.order-pack-label {
    display:inline-flex;

    margin-top:3px;

    padding:2px 5px;

    border-radius:4px;

    background:#dff2f7;

    color:#216879;

    font-size:7px;
    font-weight:800;
}



/* =========================================================
   PRECO EDITAVEL ENCOMENDA
========================================================= */

.order-price-form {
    margin-top:6px;
}


.order-price-input-row {
    display:flex;
    align-items:center;
    gap:6px;
}


.order-price-input-row input {
    width:115px;
    height:35px;

    padding:0 9px;

    border:1px solid #cbd6de;
    border-radius:6px;

    font-size:13px;
    font-weight:800;
}


.order-price-input-row span {
    font-weight:800;
}


.order-price-save {
    margin-top:7px;

    border:0;
    border-radius:6px;

    padding:7px 10px;

    background:#2ba8c4;
    color:white;

    font-size:9px;
    font-weight:800;

    cursor:pointer;
}


.order-price-save:hover {
    opacity:.9;
}


.order-price-help {
    display:block;

    margin-top:6px;

    color:#758490;

    font-size:8px;
}



/* =========================================================
   ENCOMENDA PAGA / AGUARDA ATIVACAO
========================================================= */

.order-paid {
    background:#dff1f7;
    color:#206c83;
}



/* =========================================================
   PACK PROVISIONING
========================================================= */

.pack-provisioning-card {
    margin-top:18px;
}



/* =========================================================
   CLIENT PENDING PRODUCTS
========================================================= */

.dashboard-pending-product {
    border-left:4px solid #e3a126;
}


.dashboard-pending-message {
    margin-top:4px;

    color:#9a721f;

    font-size:9px;
    font-weight:700;
}


.client-pending-products {
    margin-bottom:20px;
}


.client-pending-title {
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:12px;

    margin-bottom:10px;
}


.client-pending-title strong {
    font-size:14px;
}


.client-pending-title span {
    color:#73818c;

    font-size:9px;
}


.client-pending-card {
    overflow:hidden;

    margin-bottom:12px;

    border:1px solid #e1d6b9;
    border-radius:10px;

    background:#fff;
}


.client-pending-header {
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:12px;

    padding:13px 15px;

    background:#596d84;
    color:#fff;
}


.client-pending-header strong {
    display:block;
}


.client-pending-header small {
    display:block;

    margin-top:3px;

    opacity:.72;
}


.pending-activation-pill {
    display:inline-flex;

    padding:5px 8px;

    border-radius:999px;

    background:#fff0c8;
    color:#876318;

    font-size:8px;
    font-weight:800;

    white-space:nowrap;
}


.client-pending-body {
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:14px;

    padding:14px 15px;
}


.client-pending-body span {
    display:block;

    color:#7b8994;

    font-size:9px;
}


.client-pending-body strong {
    display:block;

    margin-top:4px;

    font-size:11px;
}


.client-pending-pack {
    padding:0 15px 12px;
}


.client-pending-pack-label {
    margin-bottom:7px;

    color:#61717e;

    font-size:9px;
    font-weight:800;
}


.client-pending-component {
    display:grid;

    grid-template-columns:
        1fr 1fr auto;

    align-items:center;

    gap:12px;

    padding:9px 10px;

    border-top:1px solid #edf0f2;

    background:#fafbfc;
}


.client-pending-component strong {
    display:block;

    font-size:10px;
}


.client-pending-component small {
    display:block;

    margin-top:2px;

    color:#7b8994;

    font-size:8px;
}


.pending-component-pill {
    display:inline-flex;

    padding:4px 7px;

    border-radius:999px;

    background:#dff1f7;
    color:#216d82;

    font-size:8px;
    font-weight:800;
}


.client-pending-message {
    padding:10px 15px;

    border-top:1px solid #eee4c8;

    background:#fffaf0;

    color:#7c652d;

    font-size:9px;
}


.admin-pending-products {
    margin-top:18px;
    margin-bottom:18px;
}


@media(max-width:700px) {

    .client-pending-header {
        align-items:flex-start;
        flex-direction:column;
    }


    .client-pending-body {
        grid-template-columns:1fr;
    }


    .client-pending-component {
        grid-template-columns:1fr;
    }

}



/* =========================================================
   CFG PORTS
========================================================= */

.cfg-port-default,
.cfg-port-legacy {
    display:inline-flex;

    padding:4px 7px;

    border-radius:999px;

    font-size:8px;
    font-weight:800;
}


.cfg-port-default {
    background:#dff3e8;
    color:#24704b;
}


.cfg-port-legacy {
    background:#fff0cf;
    color:#8b6618;
}


.cfg-security-note {
    margin-top:18px;
}


.cfg-security-note p {
    margin-bottom:0;

    color:#697985;

    font-size:10px;
}


.cfg-security-note code {
    font-size:10px;
}



/* =========================================================
   SERVER INSTALLER
========================================================= */

.server-instance-grid {
    display:grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(210px,1fr)
        );
    gap:12px;
    margin-bottom:20px;
}


.server-instance-card {
    display:flex;
    flex-direction:column;
    gap:6px;

    padding:14px;

    border:1px solid #dfe5e9;
    border-radius:8px;

    background:#fff;

    cursor:pointer;
}


.server-instance-card > div {
    display:flex;
    align-items:center;
    gap:8px;
}


.server-instance-card span,
.server-instance-card small {
    color:#697985;
    font-size:10px;
}


.server-instance-card code {
    display:block;

    max-width:100%;
    overflow:auto;

    padding:6px;

    background:#f5f7f8;

    border-radius:5px;

    font-size:9px;
}


.server-warning {
    margin-top:20px;
    padding:12px 14px;

    border-radius:7px;

    background:#fff4d9;
    color:#725519;

    font-size:11px;
}


.server-test-result {
    margin-bottom:18px;

    border-left:4px solid #2a9d63;
}


.server-test-title {
    margin-bottom:14px;
    color:#24704b;
}


.server-test-grid {
    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(150px,1fr)
        );

    gap:10px;
}


.server-test-grid > div {
    padding:10px;

    border:1px solid #e5eaed;
    border-radius:6px;
}


.server-test-grid span {
    display:block;

    margin-bottom:4px;

    color:#788691;
    font-size:9px;
}


.server-test-grid strong {
    font-size:11px;
}


.server-fingerprint {
    margin-top:14px;
}


.server-fingerprint span {
    display:block;

    margin-bottom:5px;

    color:#788691;
    font-size:9px;
}


.server-fingerprint code {
    display:block;

    overflow:auto;

    padding:8px;

    background:#f5f7f8;

    border-radius:5px;

    font-size:9px;
}


.server-next-step {
    margin-top:15px;

    padding:10px;

    background:#eaf6ef;

    border-radius:6px;

    color:#246b49;

    font-size:10px;
}


.server-instance-pill {
    display:inline-flex;

    padding:3px 6px;
    margin:2px;

    border-radius:999px;

    background:#eef2f5;

    font-size:9px;
    font-weight:700;
}


.server-status {
    display:inline-flex;

    padding:4px 7px;

    border-radius:999px;

    background:#eceff1;

    font-size:8px;
    font-weight:800;
}


.server-status.online {
    background:#dff3e8;
    color:#24704b;
}


.server-status.error,
.server-status.offline {
    background:#fde5e5;
    color:#a64040;
}


.server-status.installing {
    background:#fff0cf;
    color:#8b6618;
}



.server-install-confirm {
    margin-top:12px;
    margin-bottom:18px;

    padding:12px 14px;

    border:1px solid #d8e0e5;
    border-radius:7px;

    background:#f7f9fa;

    font-size:11px;
    font-weight:700;
}


.server-install-confirm label {
    display:flex;
    align-items:center;
    gap:8px;
}


.server-install-confirm input {
    width:16px;
    height:16px;
}