body.offiweb-classes {
            font-family: 'Space Grotesk', sans-serif;
        }

        .math-content {
            font-size: 1.1em;
            line-height: 1.6;
        }

        .glass {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
        }

        .dark .glass {
            background: rgba(15, 23, 42, 0.8);
        }

        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }

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

        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #e2e8f0;
            border-radius: 10px;
        }

        .sortable-ghost {
            opacity: 0.4;
            background: #e2e8f0;
        }

        #exercise-preview-popover {
            pointer-events: none;
            z-index: 1000;
            max-width: 450px;
            width: 90vw;
            box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
        }

        .class-toggle-track {
            width: 44px;
            height: 24px;
            background: #e2e8f0;
            border-radius: 999px;
            position: relative;
            transition: background-color 0.2s ease;
            flex-shrink: 0;
        }

        .class-toggle-thumb {
            width: 20px;
            height: 20px;
            background: #ffffff;
            border-radius: 999px;
            position: absolute;
            top: 2px;
            left: 2px;
            transition: transform 0.2s ease;
            box-shadow: 0 2px 4px rgba(15, 23, 42, 0.16);
        }

        #class-published:checked + .class-toggle-track {
            background: #22c55e;
        }

        #class-published:checked + .class-toggle-track .class-toggle-thumb {
            transform: translateX(20px);
        }

        .dark #class-published + .class-toggle-track {
            background: #334155;
        }

        .group-row:hover {
            background: rgba(78, 70, 229, 0.12) !important;
        }

        .group-row-active {
            background: rgba(78, 70, 229, 0.12) !important;
        }

        .dark .group-row:hover {
            background: rgba(30, 41, 59, 0.6) !important;
        }

        .dark .group-row-active {
            background: rgba(30, 41, 59, 0.6) !important;
        }