body { background-color: #f1f5f9; color: #0f172a; -webkit-tap-highlight-color: transparent; margin: 0; padding: 0; overflow: hidden; font-family: '"Plus Jakarta Sans"', sans-serif; }
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #3B82F6; }
        .hide-scroll::-webkit-scrollbar { display: none; }
        .hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }

        .input-field { background: #ffffff; border: 1px solid #cbd5e1; color: #0f172a; width: 100%; padding: 10px 14px; border-radius: 10px; font-size: 13px; font-weight: 700; transition: all 0.3s ease; outline: none; box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.02); }
        .input-field::placeholder { color: #94a3b8; font-weight: 500; }
        .input-field:focus { border-color: #3B82F6; box-shadow: 0 0 0 4px rgba(59, 130, 246,0.15); }
        select.input-field { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 40px; cursor: pointer; }
        select.input-field:focus { border-color: #3B82F6; box-shadow: 0 0 0 4px rgba(59, 130, 246,0.15); }

        .btn-primary { background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%); color: #ffffff; width: 100%; padding: 12px; border-radius: 10px; font-weight: 800; font-size: 14px; transition: all 0.3s ease; box-shadow: 0 6px 20px -5px rgba(59, 130, 246,0.4); display: flex; justify-content: center; align-items: center; border: none; cursor: pointer; }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px -5px rgba(59, 130, 246,0.5); }
        .btn-primary:active:not(:disabled) { transform: translateY(1px); }
        .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
        .btn-danger { background: #ef4444; color: #ffffff; padding: 8px 14px; border-radius: 8px; font-weight: 700; font-size: 12px; cursor: pointer; border: none; transition: background 0.3s; }
        .btn-danger:hover { background: #dc2626; }
        .btn-success { background: #10b981; color: #ffffff; padding: 8px 14px; border-radius: 8px; font-weight: 700; font-size: 12px; cursor: pointer; border: none; transition: background 0.3s; }
        .btn-success:hover { background: #059669; }
        .btn-warn { background: #f59e0b; color: #ffffff; padding: 8px 14px; border-radius: 8px; font-weight: 700; font-size: 12px; cursor: pointer; border: none; transition: background 0.3s; }
        .btn-warn:hover { background: #d97706; }

        .view-section { display: none; opacity: 0; }
        .view-section.active-view { display: flex; }
        .admin-tab { display: none; opacity: 0; }
        .admin-tab.active-tab { display: block; opacity: 1; }

        .toggle-checkbox:checked + .toggle-label { background-color: #3B82F6; }
        .toggle-checkbox:checked + .toggle-label .toggle-dot { transform: translateX(100%); }
        .toggle-label { transition: background-color 0.3s ease; pointer-events: none; }
        .toggle-dot { transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); }

        .sidebar-link.active { background-color: rgba(59, 130, 246,0.12); color: #2563EB; border-right-color: #3B82F6; }
        .nav-item.active { color: #3B82F6; }
        .nav-item.active .nav-indicator { opacity: 1; transform: scale(1); }

        .circle-progress { animation: rotate 1.5s linear infinite; width: 20px; height: 20px; display: none; }
        .circle-progress circle { stroke: currentColor; stroke-width: 4; stroke-dasharray: 1,200; stroke-dashoffset: 0; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; fill: none; }
        @keyframes rotate { 100% { transform: rotate(360deg); } }
        @keyframes dash { 0% { stroke-dasharray: 1,200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90,200; stroke-dashoffset: -35px; } 100% { stroke-dasharray: 90,200; stroke-dashoffset: -124px; } }

        .drag-handle { cursor: grab; transition: color 0.2s; }
        .drag-handle:active { cursor: grabbing; color: #3B82F6; }
        .sortable-ghost { opacity: 0.4; background-color: #DBEAFE; }

        @media (min-width: 1024px) { .sticky-col { position: sticky; top: 1rem; align-self: flex-start; z-index: 20; } }
        .pb-safe { padding-bottom: max(env(safe-area-inset-bottom), 0.5rem); }

        /* Stats filter pill */
        .filter-pill { padding: 5px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; cursor: pointer; border: 1px solid #e2e8f0; background: #fff; color: #64748b; transition: all 0.2s; white-space: nowrap; }
        .filter-pill.active { background: #3B82F6; color: #ffffff; border-color: #3B82F6; box-shadow: 0 4px 12px -2px rgba(59, 130, 246,0.4); }
        .filter-pill:hover:not(.active) { background: #f8fafc; border-color: #3B82F6; }

        /* Status badge */
        .badge-pending { background:#DBEAFE; color:#b45309; border:1px solid #fde68a; }
        .badge-completed { background:#d1fae5; color:#065f46; border:1px solid #a7f3d0; }
        .badge-failed { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
        .badge-refunded { background:#e0e7ff; color:#3730a3; border:1px solid #c7d2fe; }

        /* Quick action card */
        .qa-card { background:#fff; border:1px solid #e2e8f0; border-radius:16px; padding:14px 10px; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s; }
        .qa-card:hover { box-shadow:0 6px 20px -5px rgba(0,0,0,0.1); transform:translateY(-2px); }
        .qa-card:active { transform:scale(0.97); }

        /* Sidebar more section */
        .sidebar-section-label { font-size:9px; font-weight:800; color:#94a3b8; text-transform:uppercase; letter-spacing:0.1em; padding: 4px 24px 4px; }

        /* User card */
        .user-card { background:#fff; border:1px solid #e2e8f0; border-radius:16px; padding:12px 14px; display:flex; align-items:center; gap:10px; transition:border-color 0.2s; }
        .user-card:hover { border-color:#cbd5e1; }
        .user-card.suspended { border-left:3px solid #ef4444; background:#fff5f5; }

        /* Chart container */
        .chart-box { background:#fff; border:1px solid #e2e8f0; border-radius:20px; padding:20px; box-shadow:0 2px 8px -2px rgba(0,0,0,0.05); }

        /* Gift card code display */
        .gc-code { font-family: monospace; font-size:15px; font-weight:800; letter-spacing:0.15em; color:#0f172a; background:#f8fafc; border:1px dashed #cbd5e1; border-radius:8px; padding:8px 14px; }

        /* Report metric card */
        .metric-card { background:linear-gradient(135deg, #fff 0%, #f8fafc 100%); border:1px solid #e2e8f0; border-radius:16px; padding:16px; }
        .metric-card .metric-value { font-size:28px; font-weight:900; color:#0f172a; }
        .metric-card .metric-label { font-size:10px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:0.1em; }
        /* ----- Added CSS for Sub-tabs & Modals ----- */
        .tab-btn { padding: 8px 16px; font-size: 11px; font-weight: 800; border-radius: 8px; color: #64748b; background: transparent; transition: all 0.2s; text-transform: uppercase; letter-spacing: 0.05em; }
        .tab-btn.active { background: #3B82F6; color: #fff; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); }
        .tab-btn:hover:not(.active) { background: #f1f5f9; color: #0f172a; }
        .tab-content { display: none; }
        .tab-content.active { display: block; animation: fadeIn 0.3s ease; }
        .search-highlight { background: #fef08a; padding: 0 2px; border-radius: 2px; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }