.body-app {
            background:
                linear-gradient(180deg,
                    #212529 0%,
                    #f1f5f9 100%);
            color: #0f172a;
            font-family: 'Inter', sans-serif;
        }

        /* NAVBAR */

        .navbar {
            background: rgba(255, 255, 255, 0.95);
            border-bottom: 1px solid #e2e8f0;
            backdrop-filter: blur(10px);
        }

        .brand {
            font-weight: 700;
            font-size: 1.2rem;
            color: #0f172a;
            text-decoration: none;
        }

        /* HERO */

        .hero-box {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            border: 1px solid #e2e8f0;
            border-radius: 24px;
        }

        /* CARDS */

        .panel-card {
            background: rgba(255, 255, 255, 0.82);
            border: 1px solid rgba(226, 232, 240, 0.9);

            border-radius: 22px;

            backdrop-filter: blur(16px);

            box-shadow:
                0 1px 2px rgba(15, 23, 42, .03),
                0 10px 30px rgba(15, 23, 42, .04);
        }

        /* HOST ITEM */

        .hostname-box {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            padding: 16px;
            transition: 0.2s;
        }

        .hostname-box:hover {
            border-color: #93c5fd;
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(37, 99, 235, 0.05);
        }

        /* STATUS */

        .status-online {
            width: 10px;
            height: 10px;
            background: #22c55e;
            border-radius: 50%;
            display: inline-block;
            margin-right: 8px;
            box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
        }

        /* TEXTOS */

        .small-label {
            font-size: 0.78rem;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .text-secondary {
            color: #64748b !important;
        }



        /* TOKEN / CODE BOX */

        .token-box {
            background: #f1f5f9;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 12px;
            font-family: monospace;
            font-size: 0.9rem;
            color: #0f172a;
            overflow-x: auto;
        }

        /* FORM */



        /* BUTTONS */

        .btn-primary {

            background: linear-gradient(135deg,
                    #003b8e 0%,
                    #002962 100%);

            border: 1px solid rgba(0, 41, 98, 0.15);

            border-radius: 14px;


            font-weight: 600;

            box-shadow:
                0 8px 20px rgba(0, 41, 98, 0.16);

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

        .btn-primary:hover {

            background: linear-gradient(135deg,
                    #0047ab 0%,
                    #003474 100%);

            transform: translateY(-1px);

            box-shadow:
                0 12px 28px rgba(0, 41, 98, 0.22);
        }
.btn-success {

    background: linear-gradient(135deg,
            #017e55 0%,
            #015a3f 100%);

    border: 1px solid rgba(1, 126, 85, 0.15);

    border-radius: 14px;


    font-weight: 600;

    box-shadow:
        0 8px 20px rgba(1, 126, 85, 0.16);

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

.btn-success:hover {

    background: linear-gradient(135deg,
            #019e6b 0%,
            #017a53 100%);

    transform: translateY(-1px);

    box-shadow:
        0 12px 28px rgba(1, 126, 85, 0.22);
}
        .btn-outline-light {
            border: 1px solid #dbe2ea;
            color: #0f172a;
            background: white;
            border-radius: 12px;
        }

        .btn-outline-light:hover {
            background: #f1f5f9;
            color: #0f172a;
        }

        /* TABLE */

        .table {
            color: #0f172a;
        }

        /* BADGES */

        .badge.text-bg-primary {
            background: rgba(37, 99, 235, 0.1) !important;
            color: #2563eb !important;
            border: 1px solid rgba(37, 99, 235, 0.15);
        }

        .btn-outline-danger {
            border: 1px solid #fecaca;
            color: #dc2626;
            background: white;
            border-radius: 12px;
        }

        .btn-outline-danger:hover {
            background: #fef2f2;
            color: #b91c1c;
            border-color: #fca5a5;
        }
.btn-logout {

    color: #b02a37;
    background: transparent;

    border: 1px solid rgba(176, 42, 55, 0.25);

    border-radius: 14px;

    padding: 6px 12px;

    font-weight: 600;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease,
        color .18s ease;
}

.btn-logout:hover {

    background: linear-gradient(135deg,
            #b02a37 0%,
            #8e1f2a 100%);

    color: #fff;

    transform: translateY(-1px);

    box-shadow: 0 10px 22px rgba(176, 42, 55, 0.18);
}
.btn-outline-primary {

    color: #002962;

    background: transparent;

    border: 1px solid rgba(0, 41, 98, 0.25);

    border-radius: 14px;


    font-weight: 600;

    box-shadow: none;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease,
        color .18s ease,
        border-color .18s ease;
}

.btn-outline-primary:hover {

    color: #ffffff;

    background: linear-gradient(135deg,
            #003b8e 0%,
            #002962 100%);

    border-color: rgba(0, 41, 98, 0.15);

    transform: translateY(-1px);

    box-shadow:
        0 12px 28px rgba(0, 41, 98, 0.22);
}

.btn-outline-primary:active {

    transform: translateY(0px);
    box-shadow:
        0 6px 14px rgba(0, 41, 98, 0.18);
}
.btn-outline-success {

    color: #017e55;

    background: transparent;

    border: 1px solid rgba(1, 126, 85, 0.25);

    border-radius: 14px;


    font-weight: 600;

    box-shadow: none;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease,
        color .18s ease,
        border-color .18s ease;
}

.btn-outline-success:hover {

    color: #ffffff;

    background: linear-gradient(135deg,
            #017e55 0%,
            #015a3f 100%);

    border-color: rgba(1, 126, 85, 0.15);

    transform: translateY(-1px);

    box-shadow:
        0 12px 28px rgba(1, 126, 85, 0.22);
}

.btn-outline-success:active {

    transform: translateY(0px);
    box-shadow:
        0 6px 14px rgba(1, 126, 85, 0.18);
}
.btn-outline-secondary {

    color: #4b5563;

    background: transparent;

    border: 1px solid rgba(75, 85, 99, 0.25);

    border-radius: 14px;



    font-weight: 600;

    box-shadow: none;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease,
        color .18s ease,
        border-color .18s ease;
}

.btn-outline-secondary:hover {

    color: #ffffff;

    background: linear-gradient(135deg,
            #6b7280 0%,
            #374151 100%);

    border-color: rgba(75, 85, 99, 0.15);

    transform: translateY(-1px);

    box-shadow:
        0 12px 28px rgba(75, 85, 99, 0.20);
}

.btn-outline-secondary:active {

    transform: translateY(0px);
    box-shadow:
        0 6px 14px rgba(75, 85, 99, 0.16);
}

        .form-control,
        .input-group-text {

            background: rgba(248, 250, 252, .9);

            border: 1px solid #dbe2ea;


            border-radius: 14px;

            box-shadow: none;
        }

        .form-control:focus {

            border-color: #93c5fd;

            box-shadow:
                0 0 0 4px rgba(59, 130, 246, .08);

            background: white;
        }

        .brand-logo {

            height: 60px;

            width: auto;

            display: block;

            object-fit: contain;
        }

        @media (max-width: 768px) {

            .brand-logo {

                height: 30px;
            }

        }

        .brand-logo {
            transition: transform .2s ease;
        }

        .brand:hover .brand-logo {
            transform: scale(1.02);
        }

        .footer {

            padding:
                28px 0;

            border-top:
                1px solid rgba(226, 232, 240, .7);

            margin-top:
                80px;
        }

        .footer-link {

            color:
                #64748b;

            text-decoration:
                none;

            transition:
                .2s;
        }

        .footer-link:hover {

            color:
                #002962;
        }

        .hostname-box {
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        @media (max-width: 576px) {

            .input-group {
                flex-wrap: wrap;
            }

            .input-group>.form-control {
                width: 100%;
                flex: 1 1 auto;
                border-radius: 10px 10px 0 0;
            }

            .input-group>.input-group-text {
                width: 100%;
                justify-content: center;
                border-radius: 0;
            }

            .input-group>.btn {
                width: 100%;
                border-radius: 0 0 10px 10px;
            }
        }

        @media (max-width: 576px) {
            .input-group-text {
                display: none;
            }
        }


        #hosts-container {
    max-height: 500px;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin; /* Firefox */
}

#hosts-container::-webkit-scrollbar {
    width: 6px;
}

#hosts-container::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}
.modal-body{
    background-color: #dbdcdc;
}
.modal-header{
    background-color: #49505766;
}
.modal-footer{
    background-color: #49505766;
}