<style>
    /* --- The "Celestial Onyx" Luxury Theme by Gemini --- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@600&display=swap');

    @keyframes flow-nebula {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

    /* --- General & Body --- */
    .wrapper-content__body {
    font-family: 'Manrope', 'Unbounded', sans-serif;
        /* A deep, polished onyx effect */
        background-color: #0A0A0A;
        background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 60%);
        color: #E0E0E0;
    }
    body, .wrapper-content {
  background-color: #000 !important;
}

html {
  background-color: #000 !important;
}

    /* --- Main Card with Nebula Border --- */
    .card {
        background: #111111;
        border: 2px solid transparent;
        border-radius: 12px;
        padding: 25px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    }
    .card::before {
        content: '';
        position: absolute;
        top: -50%; left: -50%;
        width: 200%; height: 200%;
        background: conic-gradient(from 180deg, #6A0DAD, #D900FF, #00BFFF, #D900FF, #6A0DAD);
        animation: flow-nebula 6s linear infinite;
        z-index: 1;
    }
    .card > * {
        position: relative;
        z-index: 2;
    }
    .card::after {
        content: '';
        position: absolute;
        inset: 2px;
        background: #111111;
        border-radius: 10px;
        z-index: 1;
    }
    
    /* --- Forms & Inputs (Cut into the Onyx) --- */
    .form-group label {
        color: #888;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .form-control {
        background: #0A0A0A;
        border: 1px solid #333;
        color: #E0E0E0;
        border-radius: 6px;
        padding: 12px;
        transition: all 0.3s ease;
    }
    .form-control:focus {
        border-color: #D900FF;
        box-shadow: 0 0 15px rgba(217, 0, 255, 0.3);
    }

    /* --- The "Living Nebula" Button --- */
    .btn.btn-big-primary {
        color: #FFFFFF;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        border: none;
        border-radius: 6px;
        padding: 14px;
        background: linear-gradient(125deg, #6A0DAD, #D900FF, #00BFFF, #D900FF, #6A0DAD);
        background-size: 400% 400%;
        animation: flow-nebula 8s ease infinite;
        transition: all 0.3s ease;
        box-shadow: 0 0 20px rgba(217, 0, 255, 0.4);
    }
    .btn.btn-big-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 0 30px rgba(217, 0, 255, 0.6);
        animation-duration: 4s;
    }

    /* --- Tables --- */
    .table-responsive { border: 1px solid #333; border-radius: 8px; }
    .table { width: 100%; border-collapse: collapse; background-color: #111111; }
    .table thead th {
        color: #888; font-weight: 700; text-align: left; text-transform: uppercase;
        letter-spacing: 1.5px; font-size: 11px; padding: 15px;
        border-bottom: 2px solid #333;
    }
    .table tbody tr { border-bottom: 1px solid #222; }
    .table tbody tr:last-child { border-bottom: none; }
    .table td { padding: 15px; vertical-align: middle; }
    .table td a { color: #00BFFF; }

    /* --- Status Badges (Glowing Indicators) --- */
    .status-badge {
        font-weight: 700; text-transform: capitalize; padding: 5px 12px;
        border-radius: 12px; box-shadow: 0 0 10px;
    }
    .status-badge.pending { color: #FBBF24; box-shadow: 0 0 10px rgba(251, 191, 36, 0.5); }
    .status-badge.completed { color: #10B981; box-shadow: 0 0 10px rgba(16, 185, 129, 0.5); }
    .status-badge.partial { color: #8B949E; box-shadow: 0 0 10px rgba(139, 148, 158, 0.5); }
    .status-badge.canceled { color: #EF4444; box-shadow: 0 0 10px rgba(239, 68, 68, 0.5); }
    .status-badge.inprogress { color: #00BFFF; box-shadow: 0 0 10px rgba(0, 191, 255, 0.5); }

    /* --- Navigation Tabs --- */
    .nav-pills .nav-link { color: #888; font-weight: 700; }
    .nav-pills .nav-link:hover { color: #FFFFFF; }
    .nav-pills .nav-link.active {
        color: #FFFFFF;
        background: linear-gradient(125deg, #6A0DAD, #D900FF, #00BFFF);
        border-radius: 6px;
        box-shadow: 0 0 15px rgba(217, 0, 255, 0.4);
    }
</style>