* {
    box-sizing: border-box;
}

:root {
    --bg: #07110d;
    --bg2: #0a1711;
    --card: #0d1d16;
    --card2: #10251b;
    --border: #1b392a;
    --green: #39e58c;
    --green2: #23c977;
    --text: #f2fff8;
    --muted: #8fa99a;
    --danger: #ff6670;
}

html,
body {
    margin: 0;
    min-height: 100%;
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        radial-gradient(
            circle at 15% 0%,
            #123723,
            transparent 35%
        ),
        var(--bg);

    color:
        var(--text);
}

body {
    overflow-x: hidden;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

.hidden {
    display: none !important;
}


/* ==================================================
AUTH
================================================== */

.auth-screen {
    min-height: 100vh;

    display: grid;

    place-items: center;

    padding: 20px;
}

.auth-box {
    width:
        min(
            470px,
            100%
        );

    padding: 35px;

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

    border-radius:
        23px;

    background:
        rgba(
            13,
            29,
            22,
            .95
        );

    box-shadow:
        0 30px 100px
        rgba(0,0,0,.35);
}

.brand-logo {
    width: 62px;
    height: 62px;

    display: grid;

    place-items: center;

    margin: auto;

    border-radius:
        19px;

    background:
        linear-gradient(
            135deg,
            var(--green),
            var(--green2)
        );

    color:
        #041109;

    font-size:
        29px;

    font-weight:
        950;
}

.auth-box h1 {
    margin:
        18px 0 8px;

    text-align:
        center;
}

.auth-box > p {
    margin:
        0 0 25px;

    text-align:
        center;

    color:
        var(--muted);
}


/* ==================================================
SIDEBAR
================================================== */

#dashboard {
    display:
        flex;

    min-height:
        100vh;
}

.sidebar {
    width:
        260px;

    flex-shrink:
        0;

    display:
        flex;

    flex-direction:
        column;

    padding:
        22px 16px;

    background:
        rgba(
            8,
            20,
            14,
            .97
        );

    border-right:
        1px solid
        var(--border);
}

.brand {
    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        0 9px 27px;
}

.brand-small {
    width:
        41px;

    height:
        41px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            var(--green),
            var(--green2)
        );

    color:
        #041109;

    font-weight:
        950;
}

.brand strong,
.brand span {
    display:
        block;
}

.brand strong {
    font-size:
        15px;
}

.brand span {
    margin-top:
        2px;

    color:
        var(--muted);

    font-size:
        11px;
}

nav {
    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;
}

.nav {
    border:
        0;

    padding:
        12px 13px;

    border-radius:
        10px;

    background:
        transparent;

    color:
        var(--muted);

    text-align:
        left;
}

.nav:hover {
    color:
        var(--text);

    background:
        #0e2118;
}

.nav.active {
    color:
        var(--green);

    background:
        #103322;
}

.sidebar-bottom {
    margin-top:
        auto;
}

.main {
    flex:
        1;

    min-width:
        0;
}

.topbar {
    height:
        74px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0 34px;

    border-bottom:
        1px solid
        var(--border);

    background:
        rgba(
            7,
            17,
            13,
            .82
        );

    backdrop-filter:
        blur(18px);
}

.mobile-brand {
    display:
        none;

    font-weight:
        850;
}

.topbar-right {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--muted);

    font-size:
        11px;
}

.status-dot {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--green);

    box-shadow:
        0 0 14px
        var(--green);
}

.content {
    max-width:
        1500px;

    margin:
        auto;

    padding:
        34px;
}


/* ==================================================
HERO
================================================== */

.hero {
    padding:
        36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

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

    border-radius:
        23px;

    background:
        radial-gradient(
            circle at 100% 0,
            #16482f,
            transparent 38%
        ),
        var(--card);
}

.eyebrow {
    color:
        var(--green);

    font-size:
        10px;

    font-weight:
        950;

    letter-spacing:
        2px;
}

.hero h2 {
    max-width:
        650px;

    margin:
        9px 0 13px;

    font-size:
        clamp(
            31px,
            5vw,
            52px
        );

    line-height:
        1.02;
}

.hero p {
    max-width:
        610px;

    margin:
        0;

    color:
        var(--muted);

    line-height:
        1.6;
}


/* ==================================================
BUTTONS
================================================== */

.primary,
.secondary,
.danger-button,
.copy-button {
    border-radius:
        10px;

    font-weight:
        850;
}

.primary {
    padding:
        11px 15px;

    border:
        0;

    background:
        var(--green);

    color:
        #041109;
}

.primary:hover {
    background:
        #52efa0;
}

.secondary {
    padding:
        10px 14px;

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

    background:
        var(--card);

    color:
        var(--text);
}

.secondary:hover {
    border-color:
        #316047;
}

.full {
    width:
        100%;
}


/* ==================================================
STATS
================================================== */

.stats {
    display:
        grid;

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

    gap:
        13px;

    margin-top:
        16px;
}

.stat {
    padding:
        18px;

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

    border-radius:
        15px;

    background:
        var(--card);
}

.stat span,
.stat strong {
    display:
        block;
}

.stat span {
    color:
        var(--muted);

    font-size:
        11px;
}

.stat strong {
    margin-top:
        8px;

    font-size:
        23px;
}

.green {
    color:
        var(--green);
}


/* ==================================================
SECTION
================================================== */

.section-title {
    margin:
        34px 0 16px;

    display:
        flex;

    align-items:
        end;

    justify-content:
        space-between;

    gap:
        20px;
}

.section-title h2,
.section-title h3 {
    margin:
        5px 0;
}

.section-title p {
    margin:
        0;

    color:
        var(--muted);

    font-size:
        12px;
}


/* ==================================================
APPS
================================================== */

.apps-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                270px,
                1fr
            )
        );

    gap:
        14px;
}

.app-card {
    padding:
        18px;

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

    border-radius:
        17px;

    background:
        linear-gradient(
            180deg,
            #0e2118,
            #0a1711
        );

    transition:
        .2s ease;
}

.app-card:hover {
    transform:
        translateY(-2px);

    border-color:
        #2a553c;
}

.app-card-top {
    display:
        flex;

    align-items:
        start;

    justify-content:
        space-between;

    gap:
        12px;
}

.app-icon {
    width:
        45px;

    height:
        45px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        13px;

    background:
        #123322;

    color:
        var(--green);

    font-weight:
        950;
}

.app-card h3 {
    margin:
        14px 0 5px;
}

.app-card p {
    min-height:
        36px;

    margin:
        0;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.5;
}

.app-id {
    margin-top:
        14px;

    padding:
        9px;

    overflow:
        hidden;

    border-radius:
        9px;

    background:
        #07110d;

    color:
        #7eaa92;

    font-size:
        10px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}

.app-card button {
    margin-top:
        14px;
}


/* ==================================================
MODALS
================================================== */

.modal {
    position:
        fixed;

    inset:
        0;

    z-index:
        1000;

    display:
        grid;

    place-items:
        center;

    padding:
        20px;
}

.backdrop {
    position:
        absolute;

    inset:
        0;

    background:
        rgba(
            0,
            0,
            0,
            .68
        );

    backdrop-filter:
        blur(6px);
}

.modal-card,
.details-card {
    position:
        relative;

    width:
        min(
            500px,
            100%
        );

    max-height:
        90vh;

    overflow-y:
        auto;

    padding:
        25px;

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

    border-radius:
        20px;

    background:
        #0c1c14;

    box-shadow:
        0 35px 100px
        rgba(
            0,
            0,
            0,
            .4
        );
}

.details-card {
    width:
        min(
            650px,
            100%
        );
}

.modal-header {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        15px;

    margin-bottom:
        20px;
}

.modal-header h2 {
    margin:
        5px 0;
}

.modal-header p {
    margin:
        0;

    color:
        var(--muted);

    font-size:
        12px;
}

.close {
    width:
        36px;

    height:
        36px;

    flex-shrink:
        0;

    border:
        0;

    border-radius:
        9px;

    background:
        #12261c;

    color:
        var(--text);

    font-size:
        20px;
}

.modal-card label,
.config-box label {
    display:
        block;

    margin:
        14px 0 6px;

    color:
        var(--muted);

    font-size:
        11px;

    font-weight:
        800;
}

.modal-card input,
.modal-card textarea,
.config-box input,
.config-box textarea,
.config-box select {
    width:
        100%;

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

    border-radius:
        10px;

    outline:
        none;

    padding:
        11px 12px;

    background:
        #07110d;

    color:
        var(--text);
}

.modal-card input,
.config-box input {
    height:
        44px;
}

.modal-card textarea,
.config-box textarea {
    min-height:
        100px;

    resize:
        vertical;
}

.modal-card input:focus,
.modal-card textarea:focus,
.config-box input:focus,
.config-box textarea:focus,
.config-box select:focus {
    border-color:
        var(--green);
}

.config-box select {
    height:
        44px;

    padding:
        0 12px;
}


/* ==================================================
APP ID
================================================== */

.app-id-box,
.install-box,
.config-box,
.security-note {
    padding:
        15px;

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

    border-radius:
        13px;

    background:
        #07110d;
}

.app-id-box {
    margin-bottom:
        13px;
}

.app-id-box > span {
    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--muted);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        1px;
}

.app-id-box code {
    display:
        block;

    margin-bottom:
        10px;

    overflow-wrap:
        anywhere;

    color:
        var(--green);

    font-size:
        12px;
}

.copy-button {
    padding:
        8px 10px;

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

    background:
        #10271b;

    color:
        var(--text);

    font-size:
        11px;
}


/* ==================================================
INSTALLATION
================================================== */

.install-box {
    margin-bottom:
        13px;
}

.install-title {
    margin-bottom:
        8px;

    font-size:
        12px;

    font-weight:
        900;
}

.install-box pre {
    margin:
        0 0 10px;

    padding:
        13px;

    overflow-x:
        auto;

    border-radius:
        10px;

    background:
        #020805;

    color:
        #9ae1ba;

    font-size:
        11px;

    line-height:
        1.5;
}


/* ==================================================
CONFIG
================================================== */

.config-box h3 {
    margin-top:
        0;
}

.toggle-row {
    display:
        flex !important;

    align-items:
        center;

    justify-content:
        space-between;
}

.knowledge-help {
    margin-top:
        7px;

    color:
        var(--muted);

    font-size:
        11px;

    line-height:
        1.5;
}

.security-note {
    margin-top:
        15px;

    color:
        #a3bcb0;

    font-size:
        11px;

    line-height:
        1.5;
}


/* ==================================================
CONSENT
================================================== */

.consent-config {
    margin-top:
        13px;
}

.config-divider {
    height:
        1px;

    margin:
        10px 0 25px;

    background:
        #1b392a;
}

.config-description {
    margin:
        -5px 0 15px;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.5;
}


/* ==================================================
DANGER
================================================== */

.danger-zone {
    margin-top:
        18px;
}

.danger-button {
    width:
        100%;

    padding:
        11px;

    border:
        1px solid
        #552329;

    background:
        #32171b;

    color:
        #ff8d96;
}

.error {
    min-height:
        18px;

    margin-top:
        10px;

    color:
        #ff7f87;

    font-size:
        12px;
}


/* ==================================================
TOAST
================================================== */

.toast {
    position:
        fixed;

    right:
        20px;

    bottom:
        20px;

    z-index:
        2000;

    padding:
        13px 16px;

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

    border-radius:
        11px;

    background:
        #10271b;

    box-shadow:
        0 15px 50px
        rgba(
            0,
            0,
            0,
            .3
        );

    font-size:
        13px;
}


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

@media (max-width: 850px) {

    .sidebar {
        width:
            220px;
    }

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

    .hero {
        flex-direction:
            column;

        align-items:
            flex-start;
    }

}


@media (max-width: 680px) {

    #dashboard {
        display:
            block;
    }

    .sidebar {
        display:
            none;
    }

    .mobile-brand {
        display:
            block;
    }

    .content {
        padding:
            18px;
    }

    .topbar {
        padding:
            0 18px;
    }

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

    .section-title {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .auth-box {
        padding:
            24px;
    }

}