/* Custom Scrollbar for Subtle Look */
    .custom-scrollbar::-webkit-scrollbar {
        width: 6px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
        background: transparent;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 20px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }

    /* Active State Styling */
    .active-tab {
        background-color: rgba(255, 255, 255, 0.08) !important;
        color: #fff !important;
    }
    .active-tab .active-indicator {
        display: block;
    }
    .active-tab i {
        color: #818cf8; /* Soft Indigo */
        opacity: 1 !important;
    }

    /* Animations */
    @keyframes scaleIn {
        from { opacity: 0; transform: scale(0.95); }
        to { opacity: 1; transform: scale(1); }
    }
    .animate-scale-in {
        animation: scaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(5px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-in {
        animation: fadeIn 0.4s ease-out forwards;
    }

    /* GEAR ANIMATIONS */
    @keyframes spinRight {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    .animate-spin-slow-right {
        animation: spinRight 8s linear infinite;
    }

    @keyframes spinLeft {
        from { transform: rotate(0deg); }
        to { transform: rotate(-360deg); }
    }
    .animate-spin-slow-left {
        animation: spinLeft 8s linear infinite;
    }

    /* ═══════════════════════════════════════════════
       MOBILE APP-LIKE SETTINGS EXPERIENCE
       ═══════════════════════════════════════════════ */
    @media (max-width: 768px) {
        /* Full screen modal like native app */
        #settings-modal > div {
            border-radius: 0 !important;
            border: none !important;
            height: 100vh !important;
            max-height: 100vh !important;
        }

        /* Compact header like iOS/Android settings */
        #settings-modal > div > div:first-of-type {
            padding: 16px 20px !important;
        }
        #settings-modal > div > div:first-of-type h3 {
            font-size: 16px !important;
            letter-spacing: 0.05em !important;
        }
        #settings-modal > div > div:first-of-type p {
            font-size: 9px !important;
        }

        /* Sidebar becomes horizontal scrollable tab bar */
        #settings-modal .md\:w-64 {
            width: 100% !important;
            display: flex !important;
            flex-direction: row !important;
            overflow-x: auto !important;
            padding: 8px 12px !important;
            gap: 6px !important;
            border-right: none !important;
            border-bottom: 1px solid rgba(255,255,255,0.06) !important;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        #settings-modal .md\:w-64::-webkit-scrollbar {
            display: none;
        }

        /* Hide section labels on mobile (Account, System, etc) */
        #settings-modal .md\:w-64 > .px-3 {
            display: none !important;
        }

        /* Tab buttons become horizontal pills */
        #settings-modal .tab-btn {
            flex-shrink: 0 !important;
            white-space: nowrap !important;
            padding: 8px 16px !important;
            border-radius: 20px !important;
            font-size: 11px !important;
            background: rgba(255,255,255,0.04) !important;
            border: 1px solid rgba(255,255,255,0.06) !important;
        }
        #settings-modal .tab-btn.active-tab {
            background: rgba(99,102,241,0.15) !important;
            border-color: rgba(99,102,241,0.4) !important;
            color: #a5b4fc !important;
        }
        #settings-modal .tab-btn .active-indicator {
            display: none !important;
        }
        #settings-modal .tab-btn i {
            margin-right: 6px !important;
            font-size: 11px !important;
        }

        /* Content area: better mobile spacing */
        #settings-modal .flex-1.overflow-y-auto {
            padding: 16px !important;
        }

        /* Theme tab: optimize grid for mobile */
        #settings-team-grid {
            grid-template-columns: repeat(3, 1fr) !important;
            gap: 8px !important;
        }

        /* Theme category buttons: smaller on mobile */
        .settings-cat-btn {
            padding: 6px 12px !important;
            font-size: 10px !important;
            border-radius: 16px !important;
        }

        /* Profile avatar: smaller on mobile */
        #settings-modal .w-20.h-20 {
            width: 56px !important;
            height: 56px !important;
        }

        /* Save/Cancel buttons: full width on mobile */
        #settings-modal .mt-12 {
            margin-top: 24px !important;
            flex-direction: column !important;
            gap: 8px !important;
        }
        #settings-modal .mt-12 button[type="submit"] {
            width: 100% !important;
            padding: 14px !important;
            border-radius: 12px !important;
        }
    }