.light-theme {
           --bg-primary: #f8f9fa;
           --bg-secondary: #ffffff;
           --bg-tertiary: #e9ecef;
           --text-primary: #212529;
           --text-secondary: #495057;
           --text-muted: #6c757d;
           --border-color: rgba(0, 0, 0, 0.1);
           --card-bg: rgba(255, 255, 255, 0.9);
       }

       body {
           background-color: var(--bg-primary);
           color: var(--text-primary);
           font-family: 'Segoe UI', system-ui, sans-serif;
           transition: background-color 0.3s, color 0.3s;
       }

       .header-bg {
           background-color: var(--bg-secondary);
           border-bottom: 1px solid var(--border-color);
           transition: background-color 0.3s;
       }

       .nav-bg {
           background-color: var(--bg-secondary);
           border-top: 1px solid var(--border-color);
           transition: background-color 0.3s;
       }

       .gold-gradient {
           background: linear-gradient(135deg, #f5d67f 0%, #d4af37 50%, #a07e1f 100%);
       }

       .card {
           background: var(--card-bg);
           backdrop-filter: blur(10px);
           border: 1px solid var(--border-color);
           transition: background-color 0.3s, border-color 0.3s;
       }

       .price-up {
           color: #4ade80;
       }

       .price-down {
           color: #f87171;
       }

       .tab-active {
           border-bottom: 3px solid var(--gold-primary);
           color: var(--gold-primary);
       }

       .shimmer {
           background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
           background-size: 200% 100%;
           animation: shimmer 1.5s infinite;
       }

       keyframes shimmer {
           0%

       {
           background-position: -200% 0;
       }

       100% {
           background-position: 200% 0;
       }

       }

       .modal {
           display: none;
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background-color: rgba(0, 0, 0, 0.7);
           z-index: 100;
           overflow: auto;
       }

       .modal-content {
           background: var(--bg-tertiary);
           border: 1px solid var(--border-color);
           border-radius: 12px;
           width: 90%;
           max-width: 400px;
           margin: 15% auto;
           padding: 20px;
           box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
           animation: modalFadeIn 0.3s;
           color: var(--text-primary);
           transition: background-color 0.3s, color 0.3s;
       }

       keyframes modalFadeIn {
           from

       {
           opacity: 0;
           transform: translateY(-20px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }

       }

       .form-input {
           background-color: rgba(255, 255, 255, 0.1);
           border: 1px solid var(--border-color);
           color: var(--text-primary);
           border-radius: 8px;
           padding: 12px 16px;
           width: 100%;
           margin-bottom: 16px;
           transition: all 0.3s;
       }

       .light-theme .form-input {
           background-color: rgba(0, 0, 0, 0.05);
       }

       .form-input:focus {
           border-color: var(--gold-primary);
           outline: none;
           box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.3);
       }

       .form-input::placeholder {
           color: var(--text-muted);
       }

       .slide-in {
           animation: slideIn 0.5s forwards;
       }

       keyframes slideIn {
           from

       {
           transform: translateX(100%);
           opacity: 0;
       }

       to {
           transform: translateX(0);
           opacity: 1;
       }

       }

       .slide-out {
           animation: slideOut 0.5s forwards;
       }

       keyframes slideOut {
           from

       {
           transform: translateX(0);
           opacity: 1;
       }

       to {
           transform: translateX(-100%);
           opacity: 0;
       }

       }

       /* Notification styles */
       .notification-container {
           position: fixed;
           top: 80px;
           right: 20px;
           z-index: 1000;
           width: 300px;
           max-width: 90%;
       }

       .notification {
           background: var(--bg-tertiary);
           border-left: 4px solid var(--gold-primary);
           border-radius: 8px;
           padding: 12px;
           margin-bottom: 10px;
           box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
           transform: translateX(120%);
           transition: transform 0.4s ease;
           display: flex;
           align-items: flex-start;
           color: var(--text-primary);
       }

           .notification.show {
               transform: translateX(0);
           }

       .notification-icon {
           background: var(--gold-primary);
           border-radius: 50%;
           width: 32px;
           height: 32px;
           display: flex;
           align-items: center;
           justify-content: center;
           margin-right: 12px;
           flex-shrink: 0;
       }

       .notification-content {
           flex-grow: 1;
       }

       .notification-close {
           color: var(--text-muted);
           background: none;
           border: none;
           cursor: pointer;
           padding: 4px;
           margin-left: 8px;
       }

       .notification-progress {
           position: absolute;
           bottom: 0;
           left: 0;
           height: 3px;
           background: var(--gold-primary);
           border-radius: 0 0 0 4px;
           width: 100%;
           transform-origin: left;
           animation: progress 5s linear forwards;
       }

       keyframes progress {
           from

       {
           transform: scaleX(1);
       }

       to {
           transform: scaleX(0);
       }

       }

       /* Theme toggle switch */
       .theme-switch {
           position: relative;
           display: inline-block;
           width: 50px;
           height: 24px;
       }

           .theme-switch input {
               opacity: 0;
               width: 0;
               height: 0;
           }

       .slider {
           position: absolute;
           cursor: pointer;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
           background-color: #2a2a2a;
           transition: .4s;
           border-radius: 24px;
       }

       .light-theme .slider {
           background-color: #e9ecef;
       }

       .slider:before {
           position: absolute;
           content: "";
           height: 18px;
           width: 18px;
           left: 3px;
           bottom: 3px;
           background-color: white;
           transition: .4s;
           border-radius: 50%;
       }

       input:checked + .slider {
           background-color: var(--gold-primary);
       }

           input:checked + .slider:before {
               transform: translateX(26px);
           }

       .theme-icon {
           position: absolute;
           top: 4px;
           font-size: 14px;
           transition: .4s;
       }

       .sun-icon {
           right: 6px;
           color: #f8d568;
       }

       .moon-icon {
           left: 6px;
           color: #ffffff;
       }
   
   
   
   .data-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .data-grid::-webkit-scrollbar {
        height: 6px;
    }

    .data-grid::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 3px;
    }

    .data-grid::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 3px;
    }

    .row-selected {
        background-color: #e0f2fe !important;
    }

    .sort-icon {
        transition: transform 0.2s ease;
    }

    .sort-active {
        transform: rotate(180deg);
    }

@media (max-width: 640px) {
        .responsive-header {
            position: sticky;
            left: 0;
            z-index: 10;
        }
    }