:root {
            --background: #f8fafc;
            --foreground: #09090b;
            --card: #ffffff;
            --card-foreground: #09090b;
            --popover: #ffffff;
            --popover-foreground: #09090b;
            --primary: #7c3aed;
            --primary-foreground: #ffffff;
            --secondary: #f4f4f5;
            --secondary-foreground: #18181b;
            --muted: #f4f4f5;
            --muted-foreground: #71717a;
            --accent: #f4f4f5;
            --accent-foreground: #18181b;
            --border: #e4e4e7;
            --input: #e4e4e7;
            --ring: #7c3aed;
        }

        .dark {
            --background: #09090b;
            --foreground: #f4f4f5;
            --card: #121215;
            --card-foreground: #f4f4f5;
            --popover: #121215;
            --popover-foreground: #f4f4f5;
            --primary: #8b5cf6;
            --primary-foreground: #ffffff;
            --secondary: #18181b;
            --secondary-foreground: #f4f4f5;
            --muted: #18181b;
            --muted-foreground: #a1a1aa;
            --accent: #18181b;
            --accent-foreground: #f4f4f5;
            --border: rgba(255, 255, 255, 0.08);
            --input: rgba(255, 255, 255, 0.12);
            --ring: #8b5cf6;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        ::-webkit-scrollbar-thumb {
            background: rgba(150, 150, 150, 0.2);
            border-radius: 9999px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: rgba(150, 150, 150, 0.35);
        }

        body {
            background-color: var(--background);
            color: var(--foreground);
            font-feature-settings: "cv02", "cv03", "cv04", "cv11";
        }

        .artifact-card {
            background-color: var(--card);
            border: 1px solid var(--border);
            border-radius: 1rem;
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .artifact-card:hover {
            border-color: rgba(139, 92, 246, 0.3);
        }

        .btn-artifact-primary {
            background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);
            color: #ffffff;
            font-weight: 500;
            transition: all 0.15s ease;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 0 15px -3px rgba(124, 58, 237, 0.3);
        }
        .btn-artifact-primary:hover {
            background: linear-gradient(135deg, #8b5cf6 0%, #6d70f5 100%);
            box-shadow: 0 0 20px -2px rgba(124, 58, 237, 0.45);
            transform: translateY(-0.5px);
        }

        .btn-artifact-secondary {
            background-color: var(--secondary);
            border: 1px solid var(--border);
            color: var(--foreground);
            font-weight: 500;
            transition: all 0.15s ease;
        }
        .btn-artifact-secondary:hover {
            background-color: var(--accent);
            border-color: rgba(139, 92, 246, 0.4);
        }

        /* Superadmin Only Controls - Disabled for non-superadmin */
        .superadmin-only-btn {
            display: inline-flex !important;
            transition: all 0.2s ease;
        }
        body:not(.superadmin-allowed) .superadmin-only-btn,
        .superadmin-only-btn:disabled {
            opacity: 0.35 !important;
            cursor: not-allowed !important;
            pointer-events: none !important;
            filter: grayscale(0.7) !important;
        }
        body.superadmin-allowed .superadmin-only-btn:not(:disabled) {
            opacity: 1 !important;
            cursor: pointer !important;
            pointer-events: auto !important;
            filter: none !important;
        }

        /* Developer / Isara Chootip Only Controls - Strictly hidden unless body has isara-allowed */
        .isara-only {
            display: none !important;
        }
        body.isara-allowed .isara-only {
            display: inline-flex !important;
        }


        /* Status Pills */
        .status-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
            padding: 0.2rem 0.65rem;
            border-radius: 9999px;
            font-size: 0.725rem;
            font-weight: 500;
            border: 1px solid transparent;
        }
        .status-pill::before {
            content: '';
            width: 0.375rem;
            height: 0.375rem;
            border-radius: 50%;
        }

        .status-draft { background: rgba(113, 113, 122, 0.12); color: #71717a; border-color: rgba(113, 113, 122, 0.25); }
        .status-draft::before { background: #71717a; }
        .dark .status-draft { color: #a1a1aa; }

        .status-new { background: rgba(244, 63, 94, 0.12); color: #e11d48; border-color: rgba(244, 63, 94, 0.32); font-weight: 700; }
        .status-new::before { background: #f43f5e; box-shadow: 0 0 6px #f43f5e; }
        .dark .status-new { color: #fb7185; }

        .badge-new-item {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.12rem 0.5rem;
            border-radius: 9999px;
            font-size: 0.65rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            background: linear-gradient(135deg, #f43f5e, #f97316);
            color: #ffffff !important;
            box-shadow: 0 2px 6px rgba(244, 63, 94, 0.35);
            border: 1px solid rgba(255, 255, 255, 0.25);
            animation: pulse-new-badge 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        @keyframes pulse-new-badge {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.93; transform: scale(1.04); }
        }

        .status-in-progress { background: rgba(245, 158, 11, 0.12); color: #d97706; border-color: rgba(245, 158, 11, 0.25); }
        .status-in-progress::before { background: #f59e0b; box-shadow: 0 0 6px #f59e0b; }
        .dark .status-in-progress { color: #fbbf24; }

        .status-qc-pending { background: rgba(139, 92, 246, 0.12); color: #7c3aed; border-color: rgba(139, 92, 246, 0.25); }
        .status-qc-pending::before { background: #8b5cf6; box-shadow: 0 0 6px #8b5cf6; }
        .dark .status-qc-pending { color: #c4b5fd; }

        .status-qc-passed { background: rgba(16, 185, 129, 0.12); color: #059669; border-color: rgba(16, 185, 129, 0.25); }
        .status-qc-passed::before { background: #10b981; }
        .dark .status-qc-passed { color: #34d399; }

        .status-after-sale { background: rgba(14, 165, 233, 0.12); color: #0284c7; border-color: rgba(14, 165, 233, 0.25); }
        .status-after-sale::before { background: #0ea5e9; }
        .dark .status-after-sale { color: #38bdf8; }

        .status-closed { background: rgba(16, 185, 129, 0.15); color: #047857; border-color: rgba(16, 185, 129, 0.3); }
        .status-closed::before { background: #10b981; }
        .dark .status-closed { color: #6ee7b7; }

        .hidden-view { display: none !important; }

        .nav-item-active {
            background-color: var(--accent) !important;
            color: var(--foreground) !important;
            font-weight: 600;
            border-left: 2.5px solid var(--primary);
        }

        .tab-item-active {
            border-bottom: 2px solid var(--primary);
            color: var(--foreground) !important;
        }