/* Extracted from resources/views\pages\tutorial.blade.php. Keep page-specific styles centralized here. */
.tutorial-scroller {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-x: contain;
            scrollbar-width: thin;
            scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
            scroll-behavior: smooth;
            border-radius: 8px;
        }

        .tutorial-draggable {
            display: grid;
            grid-auto-flow: column;
            grid-template-rows: repeat(2, max-content);
            grid-auto-columns: 350px;
            gap: 20px;
            padding: 4px 4px 24px;
            cursor: grab;
            user-select: none;
            width: max-content;
            min-width: 100%;
        }

        .tutorial-draggable.dragging {
            cursor: grabbing;
        }

        .tutorial-scroller::-webkit-scrollbar {
            height: 8px;
        }

        .tutorial-scroller::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.25);
            border-radius: 999px;
        }

        .tutorial-scroller::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.08);
            border-radius: 999px;
        }

        .tutorial-item {
            scroll-snap-align: start;
            min-width: 0 !important;
            width: 100% !important;
            overflow: hidden !important;
            display: flex;
            flex-direction: column;
        }

        .tutorial-item h5 {
            margin-bottom: 0.5rem;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            width: 100% !important;
            display: block !important;
        }

        .tutorial-wrap {
            position: relative;
        }

        .tutorial-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 42px;
            height: 42px;
            border-radius: 50%;
            border: 1px solid rgba(0, 0, 0, 0.2);
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
            display: grid;
            place-items: center;
            color: #111;
            z-index: 2;
        }

        .tutorial-nav:hover {
            transform: translateY(-50%) scale(1.05);
        }

        .tutorial-prev {
            left: -10px;
        }

        .tutorial-next {
            right: -10px;
        }

        /* Mobile Table Optimization */
        @media screen and (max-width: 768px) {
            .mobile-table thead {
                display: none;
            }
            .mobile-table tr {
                display: block;
                margin-bottom: 1rem;
                background-color: #fff;
                border: 1px solid #dee2e6;
                border-radius: 0.25rem;
            }
            .mobile-table td {
                display: block;
                text-align: right;
                border-bottom: 1px solid #dee2e6;
                position: relative;
                padding-left: 50%;
                white-space: normal !important; /* Override text-nowrap */
            }
            .mobile-table td:last-child {
                border-bottom: 0;
            }
            .mobile-table td::before {
                content: attr(data-label);
                position: absolute;
                left: 0;
                width: 45%;
                padding-left: 1rem;
                font-weight: bold;
                text-align: left;
            }
        }

        @media (max-width: 576px) {
            .tutorial-draggable {
                grid-auto-columns: 210px;
                gap: 16px;
                padding-bottom: 24px;
            }
            .tutorial-item h5 {
                font-size: 0.95rem;
                margin-bottom: 0.4rem;
            }
            .tutorial-item p {
                display: none;
            }
            .tutorial-nav {
                width: 36px;
                height: 36px;
            }
            .tutorial-prev {
                left: -4px;
            }
            .tutorial-next {
                right: -4px;
            }
        }