/* =========================================================
   LAB DASH INSPIRED HOMEPAGE
   ========================================================= */

/* ---------- GLOBAL ---------- */

html,
body {
    font-family: Inter, Arial, sans-serif !important;
}

/* ---------- MAIN CONTAINER ---------- */

#page_container {
    background: transparent !important;
}

#inner_wrapper {
    max-width: 1800px !important;
    margin: 0 auto !important;
}

/* ---------- HEADER ---------- */

#header {
    background: rgba(15, 15, 25, 0.72) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border-bottom: 1px solid rgba(255,255,255,0.10);

    padding: 10px 20px !important;
}

/* ---------- SEARCH ---------- */

#search {
    background: rgba(20,20,30,0.55) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;

    border-radius: 12px !important;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#search input {
    color: white !important;
}

#search input::placeholder {
    color: rgba(255,255,255,0.45) !important;
}

/* ---------- GROUP HEADERS ---------- */

.service-group-title {
    color: rgba(255,255,255,0.85) !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
}

/* ---------- SERVICE CARDS ---------- */

.service-card {
    background: rgba(20, 20, 32, 0.68) !important;

    border: 1px solid rgba(255,255,255,0.12) !important;

    border-radius: 14px !important;

    box-shadow:
        0 8px 30px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.04) !important;

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease !important;
}

/* Hover */

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

    background: rgba(35, 35, 52, 0.82) !important;

    border-color: rgba(140, 90, 255, 0.45) !important;

    box-shadow:
        0 12px 35px rgba(0,0,0,0.35),
        0 0 20px rgba(110,70,220,0.12) !important;
}

/* ---------- SERVICE ICON ---------- */

.service-icon img {
    object-fit: contain;
}

/* ---------- SERVICE NAME ---------- */

.service-name {
    color: white !important;
    font-weight: 600 !important;
}

/* ---------- DESCRIPTION ---------- */

.service-description {
    color: rgba(255,255,255,0.55) !important;
}

/* ---------- WIDGETS ---------- */

.widget-container {
    background: rgba(15,15,25,0.45) !important;

    border: 1px solid rgba(255,255,255,0.08) !important;

    border-radius: 12px !important;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ---------- WIDGET TEXT ---------- */

.widget-container,
.widget-container * {
    color: rgba(255,255,255,0.92);
}

/* ---------- BOOKMARKS ---------- */

.bookmark-icon,
.bookmark-text {
    background: rgba(20,20,32,0.68) !important;

    border: 1px solid rgba(255,255,255,0.10) !important;

    border-radius: 12px !important;
}

/* ---------- STATUS DOT ---------- */

.service-status {
    filter: drop-shadow(0 0 4px rgba(100,255,120,0.45));
}

/* ---------- SCROLLBAR ---------- */

::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.15);
}

::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.20);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.35);
}