@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap');
        
        body {
            font-family: 'Sarabun', sans-serif;
            /* Radial Gradient แบบ Fixed ไม่ให้ยืดตาม Content */
            background-image: radial-gradient(circle at top right, #e0e7ff 0%, #ffffff 50%, #f3e8ff 100%);
            background-attachment: fixed;
            background-size: cover;
            transition: background-color 0.3s, background-image 0.3s;
        }

        .dark body {
            background-image: radial-gradient(circle at top right, #1e1b4b 0%, #0f172a 50%, #2e1065 100%);
        }

        /* Glassmorphism effects */
        .glass {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .dark .glass {
            background: rgba(30, 41, 59, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .glass-nav {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.46));
            backdrop-filter: blur(18px) saturate(140%);
            -webkit-backdrop-filter: blur(18px) saturate(140%);
            border-bottom: 1px solid rgba(255, 255, 255, 0.45);
            box-shadow: 0 12px 36px rgba(79, 70, 229, 0.12);
        }

        .dark .glass-nav {
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.78), rgba(30, 41, 59, 0.5));
            border-bottom-color: rgba(255, 255, 255, 0.12);
            box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
        }

        .glass-table {
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.34)) !important;
            backdrop-filter: blur(16px) saturate(145%);
            -webkit-backdrop-filter: blur(16px) saturate(145%);
            border: 1px solid rgba(255, 255, 255, 0.48) !important;
            box-shadow: 0 18px 42px rgba(15, 23, 42, 0.1);
        }

        .dark .glass-table {
            background: linear-gradient(145deg, rgba(30, 41, 59, 0.72), rgba(15, 23, 42, 0.42)) !important;
            border-color: rgba(255, 255, 255, 0.12) !important;
            box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
        }

        .glass-table table thead {
            background: rgba(255, 255, 255, 0.36) !important;
        }

        .dark .glass-table table thead {
            background: rgba(15, 23, 42, 0.38) !important;
        }

        .tracking-pagination {
            border-top: 1px solid rgba(148, 163, 184, 0.22);
            background: rgba(255, 255, 255, 0.28);
        }

        .dark .tracking-pagination {
            background: rgba(15, 23, 42, 0.25);
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
        .dark ::-webkit-scrollbar-thumb { background: #475569; }
        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

        /* Hide elements smoothly */
        .fade-in { animation: fadeIn 0.3s ease-in-out; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

        /* Loader */
        .loader {
            border: 3px solid #f3f3f3;
            border-top: 3px solid #4F46E5;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            animation: spin 1s linear infinite;
        }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

        @media print {
            body {
                background: #ffffff !important;
                color: #111827 !important;
            }

            nav,
            #user-view,
            #tracking-view,
            .print-hidden,
            #login-modal,
            #pdpa-modal,
            #success-modal {
                display: none !important;
            }

            main,
            #admin-view,
            #admin-view .glass {
                display: block !important;
                width: 100% !important;
                max-width: none !important;
                box-shadow: none !important;
                border: none !important;
                background: #ffffff !important;
            }

            #admin-view {
                color: #111827 !important;
            }

            #admin-view table {
                font-size: 10px !important;
            }

            #admin-view .overflow-x-auto {
                overflow: visible !important;
            }
        }