@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

        :root {
            --accent: #7643C9;
            --workspace: #F5F6FF;
            --hover-bg: rgba(118, 67, 201, .08);
            --active-bg: rgba(118, 67, 201, .12);
            --sidebar-width: 250px;
            --topbar-h: 64px;
            --purple: #5E2ADD;
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box
        }

        body {
            margin: 0;
            font-family: "Jost", sans-serif;
            background: var(--workspace);
            height: 100vh;
            overflow: hidden
        }

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

        /* ===== Topbar ===== */
        .topbar {
            position: sticky;
            top: 0;
            z-index: 1030;
            height: var(--topbar-h);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 1rem;
            background: #fff;
            border-bottom: 1px solid #E9E9F0
        }

        #menu-toggle {
            border: none;
            background: transparent;
            font-size: 1.8rem;
            line-height: 1;
            color: var(--accent)
        }

        /* Center logo always visible */
        .brand-center {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        /* Offset on desktop to account for pinned sidebar */
        @media (min-width:992px) {
            .brand-center {
                left: calc(50% + var(--sidebar-width)/2)
            }
        }

        .brand-center img {
            height: 34px
        }

        /* ===== Sidebar ===== */
        #sidebar {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            width: var(--sidebar-width);
            background: #fff;
            border-right: 1px solid #E9E9F0;
            overflow-y: auto;
            transition: left .25s ease;
            z-index: 2000
        }

        /* Hidden by default on <992px */
        @media (max-width:991.98px) {
            #sidebar {
                left: -260px
            }
        }

        #sidebar.open {
            left: 0
        }

        .sidebar-header {
            height: var(--topbar-h);
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: 1px solid #E9E9F0
        }

        .sidebar-header img {
            height: 34px
        }

        .sidebar-nav {
            list-style: none;
            margin: 0;
            padding: 0 0 24px
        }

        .sidebar-nav .nav-link {
            display: flex;
            align-items: center;
            gap: 14px;
            white-space: nowrap;
            padding: 10px 20px;
            font-size: .95rem;
            color: #4B4B4B;
            border-radius: 10px;
            transition: background .15s, color .15s
        }

        .sidebar-nav .nav-link:hover {
            background: var(--hover-bg);
            color: var(--accent)
        }

        .sidebar-nav .nav-link.active {
            background: var(--active-bg);
            color: var(--accent);
            font-weight: 600
        }

        .sidebar-nav i {
            font-size: 1rem
        }

        .sidebar-nav .link-text {
            flex-grow: 1
        }

        /* Submenu container overlays instead of pushing items */



        /* Chevron rotation */
        .nav-link[data-bs-toggle="collapse"] .bi-chevron-down {
            transition: transform .25s
        }

        .nav-link[aria-expanded="true"] .bi-chevron-down {
            transform: rotate(180deg)
        }

        /* ===== Content ===== */
   #content {
    /* keep the original inner spacing */
    padding: 2rem;

    /* push the whole block down by the height of the top-bar */
    margin-top: var(--topbar-h);

    /* let the area scroll without the page itself moving */
    overflow-y: auto;

    /* full-viewport height minus the sticky bar */
    height: calc(100vh - var(--topbar-h));
}

/* desktop: also offset for the pinned sidebar */
@media (min-width: 992px) {
    #content {
        margin-left: var(--sidebar-width);
    }
}

        .primery {
            color: #7643C9;
        }

        .footer {
            position: sticky;
            bottom: 0;
            left: 0;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            /* perfect centring */
            padding: 0.75rem 1rem;
            background: #fff;
            border-top: 1px solid #E9E9F0;
            font-size: .85rem;
            color: #6c6c6c;
        }

        @media(min-width:992px) {
            .footer {
                width: calc(100% - var(--sidebar-width));
                margin-left: var(--sidebar-width);
            }
        }

        @media(min-width:992px) {
            .footer {
                margin-left: var(--sidebar-width);
            }
        }

        .card .card-header {
            background: #ffffff;
            border-bottom: 1px solid #d8dae0;
            font-size: 18px;
            font-weight: 500;
            padding: 16px 24px;
            line-height: 1.1em;
            color: #252525;
        }

        .card .card-header:hover {
            background: #f6f6f6;
        }

        .hosting-item {
            border-radius: .5rem;
            padding: .75rem 1rem;
            min-height: 72px;
            /* keeps it close to screenshot height */

        }

        /* --- plan icon --- */
        .plan-icon {
            width: 48px;
            height: 48px;
            border-radius: .5rem;
            background: var(--accent-orange);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: .75rem;
        }


        /* --- text tweaks --- */
        .plan-name {
            font-weight: 600
        }

        .plan-expire {
            font-size: .875rem;
            color: var(--text-light)
        }

        .icon-img {
            width: 48px;
            height: 48px;
            display: block;
            /* removes bottom whitespace that pushed it up */
        }

        .plan-name {
            font-weight: 600;
            line-height: 1.1;
            /* keeps heading tight against expiry line */
        }

        /* --- purple button --- */
        .btn-primary {
            font-size: 14px;
            line-height: 24px;
            font-weight: 600;
            padding: 8px 24px;
            background-color: var(--purple);
            border-radius: 8px;

        }

        .btn-primary:hover {
            background-color: var(--accent);
        }

        .btn-primary i {
            display: flex;
            align-items: center;
        }