@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

        :root {
            /* Branding colors - Clean & Professional */
            --primary: #000000;
            --primary-light: #333333;
            --bg-body: #F5F5F7;
            --bg-card: #FFFFFF;

            /* Bento Grid Specs */
            --bento-radius: 28px;
            --bento-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
            --bento-shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.08);

            /* Typography */
            --font-sans: 'Plus Jakarta Sans', sans-serif;
        }

        body {
            font-family: var(--font-sans);
            background-color: var(--bg-body);
            color: #1A1A1E;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        /* Bento Box Core Elements */
        .bento-box {
            background-color: var(--bg-card);
            border-radius: var(--bento-radius);
            box-shadow: var(--bento-shadow);
            border: 1px solid rgba(0, 0, 0, 0.02);
            padding: 1.5rem;
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .bento-box:hover {
            transform: translateY(-2px);
            box-shadow: var(--bento-shadow-hover);
        }

        /* Ambient subtle gradients for specific bento boxes */
        .bento-gradient-primary {
            background: linear-gradient(135deg, #000000 0%, #333333 100%);
            color: white;
        }

        .bento-gradient-accent {
            background: linear-gradient(135deg, #F0F4FF 0%, #E0E8FF 100%);
            color: #2D4CBE;
            border: 1px solid #D0DBFE;
        }

        .bento-gradient-green {
            background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
            color: #065F46;
            border: 1px solid #A7F3D0;
        }

        /* Scrollbar aesthetics */
        ::-webkit-scrollbar {
            width: 4px;
            height: 4px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

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

        /* Sidebar Navigation Active states */
        .nav-item {
            color: #71717A;
            transition: all 0.2s ease;
        }

        .nav-item.active {
            background: #000000;
            color: #FFFFFF;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .nav-item:hover:not(.active) {
            background: #F4F4F5;
            color: #18181B;
        }

        /* Mobile Bottom Nav active state */
        .mob-nav-item i {
            transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .mob-nav-item.active {
            color: #000000;
        }

        .mob-nav-item.active i {
            transform: scale(1.15) translateY(-2px);
        }