/* Creators Corner Admin Dashboard Styles */
/* Extracted from admin.html */

/* ==========================================================================
   AUTH SCREENS (Loading, Access Request, Pending, Denied)
   ========================================================================== */

.auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary, #12141a);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    font-family: var(--font-sans, 'General Sans', sans-serif);
}

.auth-overlay--hidden {
    display: none !important;
}

.auth-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border, #2e3440);
    border-top-color: var(--accent, #FF4D8D);
    border-radius: 50%;
    animation: auth-spin 0.8s linear infinite;
}

@keyframes auth-spin {
    to { transform: rotate(360deg); }
}

.auth-message {
    color: var(--text-secondary, #9aa5b8);
}

.auth-card {
    max-width: 480px;
    margin: 80px auto;
    padding: 40px;
    background: var(--bg-secondary, #1a1d24);
    border-radius: 16px;
    border: 1px solid var(--border, rgba(255,255,255,0.1));
}

.auth-header {
    text-align: center;
    margin-bottom: 32px;
}

.auth-icon {
    font-size: 3rem;
    margin-bottom: 16px;
}

.auth-icon--sm {
    font-size: 2rem;
}

.auth-title {
    color: var(--text-primary, #fff);
    font-size: 1.5rem;
    margin-bottom: 8px;
    font-weight: 600;
}

.auth-subtitle {
    color: var(--text-secondary, #9aa5b8);
    font-size: 0.95rem;
}

.auth-form-group {
    margin-bottom: 20px;
}

.auth-form-group--lg {
    margin-bottom: 24px;
}

.auth-label {
    display: block;
    color: var(--text-secondary, #9aa5b8);
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.auth-input {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-primary, #12141a);
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: 8px;
    color: var(--text-primary, #fff);
    font-size: 1rem;
}

.auth-input:focus {
    outline: none;
    border-color: var(--accent, #FF4D8D);
}

.auth-textarea {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-primary, #12141a);
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: 8px;
    color: var(--text-primary, #fff);
    font-size: 1rem;
    min-height: 80px;
    resize: vertical;
    font-family: inherit;
}

.auth-select {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-primary, #12141a);
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: 8px;
    color: var(--text-primary, #fff);
    font-size: 1rem;
    cursor: pointer;
}

.auth-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--accent, #FF4D8D) 0%, #ff6b35 100%);
    border: none;
    border-radius: 8px;
    color: #000;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.auth-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 77, 141, 0.3);
}

.auth-btn--secondary {
    background: var(--bg-card, #2e3440);
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    color: var(--text-primary, #fff);
    width: auto;
    padding: 10px 20px;
}

.auth-btn--ghost {
    background: transparent;
    border: 1px solid var(--border, rgba(255,255,255,0.2));
    color: var(--text-secondary, #9aa5b8);
    width: auto;
    padding: 10px 20px;
    font-size: 0.9rem;
}

.auth-state {
    display: none;
    text-align: center;
}

.auth-state--active {
    display: block;
}

.auth-state__status {
    font-weight: 600;
    margin-bottom: 8px;
}

.auth-state__status--pending {
    color: var(--accent, #FF4D8D);
}

.auth-state__status--denied {
    color: var(--danger, #ef4444);
}

.auth-state__message {
    color: var(--text-secondary, #9aa5b8);
    font-size: 0.9rem;
}

.auth-state__timestamp {
    color: var(--text-muted, #6b7280);
    font-size: 0.8rem;
    margin-top: 16px;
}

.auth-footer {
    text-align: center;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border, rgba(255,255,255,0.1));
}

/* ==========================================================================
   SIDEBAR HELPERS
   ========================================================================== */

/* Logo theme switching */
.logo-dark-mode { display: block; }
.logo-light-mode { display: none; }
[data-theme="light"] .logo-dark-mode { display: none; }
[data-theme="light"] .logo-light-mode { display: block; }

.sidebar-meta {
    padding: 8px 16px;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: center;
}

.data-freshness-indicator {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin: 8px 16px 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 13px;
    color: var(--text-secondary);
}
.data-freshness-indicator:hover {
    background: var(--bg-tertiary);
}

/* Circular light indicator */
.freshness-light {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
    box-shadow: 0 0 4px currentColor;
}
.data-freshness-indicator.current .freshness-light {
    background: var(--success);
    box-shadow: 0 0 6px var(--success);
}
.data-freshness-indicator.behind .freshness-light {
    background: var(--warning);
    box-shadow: 0 0 6px var(--warning);
}
.data-freshness-indicator.stale .freshness-light {
    background: var(--error);
    box-shadow: 0 0 6px var(--error);
}

.sidebar-user {
    border-top: 1px solid var(--border);
    padding: 12px 16px;
}

/* ==========================================================================
   TABLE HELPERS
   ========================================================================== */

.table-scrollable {
    max-height: 500px;
    overflow-y: auto;
}

.table-sticky-header {
    position: sticky;
    top: 0;
    background: var(--bg-card);
    z-index: 1;
}

.section-content--flush {
    padding: 0;
}

/* Column widths */
.col-w-50 { width: 50px; }
.col-w-80 { width: 80px; }
.col-w-100 { width: 100px; }
.col-w-120 { width: 120px; }
.col-w-150 { width: 150px; }
.col-w-180 { width: 180px; }
.col-w-200 { width: 200px; }

/* Input width helpers */
.input-w-xs { width: 100px; }
.input-w-sm { width: 120px; }
.input-w-md { width: 180px; }
.input-w-lg { width: 240px; }

/* Checkbox helpers */
.checkbox-md {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Special stat card variants */
.stat-card--highlight {
    border-left: 4px solid var(--accent);
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(255, 77, 141, 0.08) 100%);
}

/* ==========================================================================
   SIMPLE MODAL (for inline-style modals)
   ========================================================================== */

.simple-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.simple-modal--active {
    display: flex;
}

.simple-modal__content {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid var(--border);
    width: 90%;
}

.simple-modal__content--sm { max-width: 400px; }
.simple-modal__content--md { max-width: 500px; }
.simple-modal__content--lg { max-width: 600px; }
.simple-modal__content--xl { max-width: 800px; }

.simple-modal__content--scroll {
    max-height: 80vh;
    overflow-y: auto;
}

.simple-modal__title {
    margin-bottom: 16px;
    font-size: 1.1rem;
    font-weight: 600;
}

.simple-modal__desc {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 16px;
}

.simple-modal__input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.simple-modal__preview {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
    max-height: 200px;
    overflow-y: auto;
}

.simple-modal__stats {
    background: var(--accent-dim);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
    font-size: 0.85rem;
}

.simple-modal__label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.simple-modal__actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* Video Player Modal */
.video-player-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    cursor: pointer;
}

.video-player-modal--active,
.video-player-modal.show {
    display: flex;
}

.video-player-modal__container {
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 90vh;
    max-height: 720px;
    cursor: default;
}

.video-player-modal__close {
    position: absolute;
    top: -50px;
    right: 0;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10001;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.video-player-modal__close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.video-player-modal__embed {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

.video-player-modal__info {
    position: absolute;
    bottom: -40px;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

.video-player-modal__header {
    position: absolute;
    top: -60px;
    left: 0;
    right: 0;
    text-align: center;
}

.video-player-modal__title {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.video-player-modal__stats {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

.video-player-modal__footer {
    position: absolute;
    bottom: -50px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 12px;
}

.video-player-modal__link {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.85rem;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    transition: background 0.2s;
}

.video-player-modal__link:hover {
    background: rgba(255, 255, 255, 0.2);
}

.video-player-modal__copy {
    color: #fff;
    font-size: 0.85rem;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

.video-player-modal__copy:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   FORM MODAL HELPERS
   Utility classes for common modal form patterns
   ========================================================================== */

/* Hidden state for modals */
.modal--hidden {
    display: none !important;
}

/* Modal content size modifiers */
.modal-content--sm {
    max-width: 450px;
}

.modal-content--md {
    max-width: 500px;
}

.modal-content--lg {
    max-width: 700px;
}

.modal-content--xl {
    max-width: 1400px;
}

/* Form hint text (small muted helper) */
.form-hint {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 4px;
}

/* Checkbox with label (flex row) */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* 2-column grid for form rows */
.grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Color picker input styling */
.form-input--color {
    height: 42px;
    padding: 4px;
    cursor: pointer;
}

/* Info box / callout box */
.info-box {
    background: var(--bg-secondary);
    padding: 16px;
    border-radius: 8px;
    text-align: center;
}

.info-box__text {
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.info-box__code {
    background: var(--bg-primary);
    padding: 8px 12px;
    border-radius: 6px;
    display: block;
    word-break: break-all;
    font-size: 0.85rem;
    font-family: monospace;
}

.info-box__btn {
    margin-top: 12px;
}

/* Intro text for modals */
.modal-intro {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 16px;
}

/* ==========================================================================
   ORIGINAL ADMIN CSS (Variables and Components)
   ========================================================================== */

:root {
            --bg-primary: #12141a;
            --bg-secondary: #1a1d24;
            --bg-card: #21252e;
            --bg-card-hover: #2a2f3a;
            --border: #2e3440;
            --border-light: #3b4252;
            --text-primary: #eceff4;
            --text-secondary: #9aa5b8;
            --text-muted: #6b7280;
            --accent: #FF4D8D;
            --accent-hover: #ffd43b;
            --accent-dim: rgba(255, 77, 141, 0.12);
            --success: #34d399;
            --success-dim: rgba(52, 211, 153, 0.12);
            --warning: #fbbf24;
            --warning-dim: rgba(251, 191, 36, 0.12);
            --danger: #f87171;
            --danger-dim: rgba(248, 113, 113, 0.12);
            --info: #60a5fa;
            --info-dim: rgba(96, 165, 250, 0.12);
            --purple: #a78bfa;
            --purple-dim: rgba(167, 139, 250, 0.12);
            --blue: #60a5fa;
            --blue-dim: rgba(96, 165, 250, 0.12);
            --cyan: #22d3ee;
            --cyan-dim: rgba(34, 211, 238, 0.12);

            /* Status Colors */
            --ghost: #6b7280;
            --behind: #ef4444;
            --atrisk: #f59e0b;
            --ontrack: #22c55e;
            --hot: #f97316;
            --rising: #22c55e;
            --gold: #FF4D8D;
        }
        
        /* Light Theme */
        [data-theme="light"] {
            --bg-primary: #f5f5f7;
            --bg-secondary: #ffffff;
            --bg-card: #ffffff;
            --bg-card-hover: #f0f0f2;
            --border: #e0e0e0;
            --border-light: #d0d0d0;
            --text-primary: #1a1a1a;
            --text-secondary: #4a4a4a;
            --text-muted: #7a7a7a;
            --accent: #d4a017;
            --accent-hover: #b8860b;
            --accent-dim: rgba(212, 160, 23, 0.12);
            --success: #059669;
            --success-dim: rgba(5, 150, 105, 0.12);
            --warning: #d97706;
            --warning-dim: rgba(217, 119, 6, 0.12);
            --danger: #dc2626;
            --danger-dim: rgba(220, 38, 38, 0.12);
            --info: #2563eb;
            --info-dim: rgba(37, 99, 235, 0.12);
            --purple: #7c3aed;
            --purple-dim: rgba(124, 58, 237, 0.12);
            --blue: #2563eb;
            --blue-dim: rgba(37, 99, 235, 0.12);
            --cyan: #0891b2;
            --cyan-dim: rgba(8, 145, 178, 0.12);
        }
        
        [data-theme="light"] .sidebar {
            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        }
        
        [data-theme="light"] .card {
            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        }
        
        [data-theme="light"] .stat-card {
            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        }
        
        [data-theme="light"] .modal-content {
            box-shadow: 0 20px 50px rgba(0,0,0,0.2);
        }
        
        /* Theme Toggle - Clean Icon Button */
        .theme-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            margin: 8px 16px;
            padding: 0;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            color: var(--text-secondary);
        }
        .theme-toggle:hover {
            background: var(--bg-tertiary);
            border-color: var(--accent);
            color: var(--accent);
        }
        .theme-toggle:active {
            transform: scale(0.95);
        }
        .theme-toggle-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.2s, transform 0.3s ease;
        }
        .theme-toggle-icon svg {
            width: 18px;
            height: 18px;
        }
        /* Dark mode: show moon, hide sun */
        .theme-icon-sun { display: none; }
        .theme-icon-moon { display: flex; }
        /* Light mode: show sun, hide moon */
        [data-theme="light"] .theme-icon-sun { display: flex; }
        [data-theme="light"] .theme-icon-moon { display: none; }
        [data-theme="light"] .theme-toggle {
            background: var(--bg-card);
            color: #f59e0b;
        }
        [data-theme="light"] .theme-toggle:hover {
            background: var(--bg-secondary);
            border-color: #f59e0b;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: 'General Sans', -apple-system, sans-serif;
            background: var(--bg-primary);
            color: var(--text-primary);
            min-height: 100vh;
            line-height: 1.5;
        }

        /* Custom Scrollbar - Webkit (Chrome, Safari, Edge) */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: var(--bg-primary);
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb {
            background: var(--border-light);
            border-radius: 4px;
            transition: background 0.2s ease;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: var(--text-muted);
        }
        ::-webkit-scrollbar-corner {
            background: var(--bg-primary);
        }

        /* Custom Scrollbar - Firefox */
        * {
            scrollbar-width: thin;
            scrollbar-color: var(--border-light) var(--bg-primary);
        }

        .sidebar {
            position: fixed;
            left: 0;
            top: 0;
            width: 260px;
            height: 100vh;
            background: var(--bg-secondary);
            border-right: 1px solid var(--border);
            padding: 24px 16px;
            display: flex;
            flex-direction: column;
            z-index: 100;
            overflow-y: auto;
        }

        .logo-section {
            text-align: center;
            padding: 16px 8px 24px;
            margin-bottom: 24px;
        }

        .logo-img { width: 200px; }

        .nav-section { flex: 1; }

        .nav-label {
            font-size: 0.65rem;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 1.2px;
            margin-bottom: 12px;
            padding-left: 14px;
            margin-top: 20px;
        }

        .nav-label:first-child { margin-top: 0; }

        .nav-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 11px 16px;
            border-radius: 10px;
            color: var(--text-secondary);
            text-decoration: none;
            font-size: 0.875rem;
            font-weight: 500;
            margin-bottom: 4px;
            cursor: pointer;
            transition: all 0.2s ease;
            border: 1px solid transparent;
            position: relative;
        }

        .nav-item:hover { 
            background: var(--bg-card); 
            color: var(--text-primary);
            transform: translateX(4px);
        }
        .nav-item.active { 
            background: linear-gradient(135deg, var(--accent-dim), rgba(255, 77, 141, 0.05));
            color: var(--accent); 
            border-color: rgba(255, 77, 141, 0.3);
            font-weight: 600;
        }
        .nav-item.active::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 60%;
            background: var(--accent);
            border-radius: 0 3px 3px 0;
        }
        .nav-item .icon { font-size: 1.1rem; width: 24px; text-align: center; }
        .nav-item .badge-count {
            margin-left: auto;
            background: var(--danger);
            color: #fff;
            font-size: 0.7rem;
            padding: 2px 8px;
            border-radius: 10px;
            font-weight: 600;
        }
        
        /* Sub-navigation items - slightly muted and indented */
        .nav-item.nav-item-sub {
            padding-left: 28px;
            font-size: 0.82rem;
            color: var(--text-muted);
            margin-bottom: 2px;
            opacity: 0.85;
        }
        .nav-item.nav-item-sub:hover {
            opacity: 1;
            color: var(--text-primary);
        }
        .nav-item.nav-item-sub .icon {
            font-size: 0.95rem;
            width: 20px;
        }

        .nav-label-collapsible {
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-right: 14px;
            user-select: none;
        }
        .nav-label-collapsible:hover {
            color: var(--text-secondary);
        }
        .nav-group-collapsible {
            overflow: hidden;
        }

        /* ==================== COLLAPSIBLE SIDEBAR ==================== */

        /* Sidebar collapse toggle button */
        .sidebar-collapse-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 36px;
            margin: 8px 0;
            padding: 0;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            color: var(--text-muted);
        }
        .sidebar-collapse-toggle:hover {
            background: var(--bg-secondary);
            color: var(--text-primary);
            border-color: var(--accent);
        }
        .sidebar-collapse-toggle svg {
            transition: transform 0.3s ease;
        }

        /* Sidebar transition */
        .sidebar {
            transition: width 0.3s ease;
        }

        /* Main content transition */
        .main {
            transition: margin-left 0.3s ease;
        }

        /* Collapsed state */
        .sidebar.collapsed {
            width: 72px;
            padding: 24px 8px;
        }

        .sidebar.collapsed + .main {
            margin-left: 72px;
        }

        /* Hide text elements when collapsed */
        .sidebar.collapsed .nav-text,
        .sidebar.collapsed .nav-label .nav-text,
        .sidebar.collapsed .user-card__info,
        .sidebar.collapsed .sidebar-actions,
        .sidebar.collapsed .sidebar-version,
        .sidebar.collapsed #freshnessText {
            display: none;
        }

        /* Adjust nav labels when collapsed */
        .sidebar.collapsed .nav-label {
            height: 12px;
            margin-top: 16px;
            margin-bottom: 8px;
            padding: 0;
            border-top: 1px solid var(--border);
        }
        .sidebar.collapsed .nav-label:first-child {
            border-top: none;
            height: 0;
            margin: 0;
        }

        /* Center nav items when collapsed */
        .sidebar.collapsed .nav-item {
            justify-content: center;
            padding: 11px 8px;
            gap: 0;
        }
        .sidebar.collapsed .nav-item:hover {
            transform: none;
        }
        .sidebar.collapsed .nav-item .icon {
            margin: 0;
        }
        .sidebar.collapsed .nav-item .badge-count {
            position: absolute;
            top: 4px;
            right: 4px;
            margin: 0;
            padding: 1px 5px;
            font-size: 0.6rem;
            min-width: auto;
        }

        /* Hide logo, show mini version */
        .sidebar.collapsed .logo-section {
            padding: 8px 0 16px;
            margin-bottom: 16px;
        }
        .sidebar.collapsed .logo-img {
            width: 40px;
        }

        /* Data freshness indicator collapsed */
        .sidebar.collapsed .data-freshness-indicator {
            padding: 6px;
            justify-content: center;
        }

        /* Theme toggle collapsed */
        .sidebar.collapsed .theme-toggle {
            margin: 8px auto;
        }

        /* User profile collapsed */
        .sidebar.collapsed .sidebar-user {
            padding: 8px 0;
        }
        .sidebar.collapsed .user-card {
            justify-content: center;
        }
        .sidebar.collapsed .user-card__avatar {
            margin: 0;
        }

        /* Rotate chevron when collapsed */
        .sidebar.collapsed .sidebar-collapse-toggle svg {
            transform: rotate(180deg);
        }

        /* Tooltip on hover when collapsed */
        .sidebar.collapsed .nav-item::after {
            content: attr(title);
            position: absolute;
            left: 100%;
            top: 50%;
            transform: translateY(-50%);
            margin-left: 12px;
            padding: 6px 12px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 6px;
            font-size: 0.8rem;
            font-weight: 500;
            color: var(--text-primary);
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: all 0.2s ease;
            z-index: 1000;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        .sidebar.collapsed .nav-item:hover::after {
            opacity: 1;
            visibility: visible;
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        /* System Status Indicator */
        .system-status {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 0.75rem;
            color: var(--text-muted);
        }
        .system-status .status-dot {
            font-size: 0.6rem;
            animation: pulse 2s infinite;
        }
        .system-status .status-dot.connected { color: var(--success); }
        .system-status .status-dot.disconnected { color: var(--danger); }
        .system-status .status-dot.stale { color: var(--warning); }
        .system-status .status-text { font-weight: 500; }
        .system-status .status-divider { color: var(--border); }
        .system-status .status-label { color: var(--text-muted); }
        .system-status .status-value { font-weight: 600; color: var(--text-secondary); }
        .system-status .status-value.fresh { color: var(--success); }
        .system-status .status-value.stale { color: var(--warning); }
        .system-status .status-value.old { color: var(--danger); }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        .notification-bell {
            position: relative;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 8px 12px;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--text-secondary);
            font-size: 0.85rem;
        }
        .notification-bell:hover {
            background: var(--bg-card);
            color: var(--text-primary);
        }
        .notification-bell .bell-icon {
            font-size: 1.1rem;
        }
        .notification-bell .bell-count {
            background: var(--danger);
            color: #fff;
            font-size: 0.65rem;
            padding: 2px 6px;
            border-radius: 8px;
            font-weight: 600;
            min-width: 18px;
            text-align: center;
        }
        .notification-bell.has-alerts {
            border-color: var(--danger);
            animation: bellPulse 2s infinite;
        }
        @keyframes bellPulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
            50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
        }
        
        /* Notification Center Dropdown */
        .notification-center {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            width: 380px;
            max-height: 500px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
            z-index: 1000;
            display: none;
            overflow: hidden;
        }
        .notification-center.show {
            display: block;
            animation: slideDown 0.2s ease;
        }
        @keyframes slideDown {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .notification-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px;
            border-bottom: 1px solid var(--border);
            background: var(--bg-secondary);
        }
        .notification-header h3 {
            font-size: 0.95rem;
            font-weight: 700;
            margin: 0;
        }
        .notification-header button {
            background: none;
            border: none;
            color: var(--accent);
            font-size: 0.75rem;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
        }
        .notification-header button:hover {
            background: var(--accent-dim);
        }
        .notification-tabs {
            display: flex;
            border-bottom: 1px solid var(--border);
            background: var(--bg-secondary);
        }
        .notification-tab {
            flex: 1;
            padding: 10px;
            text-align: center;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--text-muted);
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.2s;
        }
        .notification-tab:hover {
            color: var(--text-primary);
        }
        .notification-tab.active {
            color: var(--accent);
            border-bottom-color: var(--accent);
        }
        .notification-tab .tab-count {
            display: inline-block;
            background: var(--bg-primary);
            padding: 2px 6px;
            border-radius: 10px;
            font-size: 0.65rem;
            margin-left: 4px;
        }
        .notification-list {
            max-height: 350px;
            overflow-y: auto;
        }
        .notification-item {
            display: flex;
            gap: 12px;
            padding: 14px 16px;
            border-bottom: 1px solid var(--border-light);
            cursor: pointer;
            transition: background 0.15s;
        }
        .notification-item:hover {
            background: var(--bg-secondary);
        }
        .notification-item.unread {
            background: rgba(255, 77, 141, 0.05);
            border-left: 3px solid var(--accent);
        }
        .notification-item.unread:hover {
            background: rgba(255, 77, 141, 0.1);
        }
        .notification-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            flex-shrink: 0;
        }
        .notification-icon.win { background: rgba(34, 197, 94, 0.15); }
        .notification-icon.alert { background: rgba(239, 68, 68, 0.15); }
        .notification-icon.info { background: rgba(59, 130, 246, 0.15); }
        .notification-icon.payment { background: rgba(168, 85, 247, 0.15); }
        .notification-icon.application { background: rgba(255, 77, 141, 0.15); }
        .notification-icon.milestone { background: rgba(236, 72, 153, 0.15); }
        .notification-content {
            flex: 1;
            min-width: 0;
        }
        .notification-content .title {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .notification-content .message {
            font-size: 0.75rem;
            color: var(--text-secondary);
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .notification-content .time {
            font-size: 0.65rem;
            color: var(--text-muted);
            margin-top: 4px;
        }
        .notification-empty {
            padding: 40px 20px;
            text-align: center;
            color: var(--text-muted);
        }
        .notification-empty .empty-icon {
            font-size: 2.5rem;
            margin-bottom: 12px;
            opacity: 0.5;
        }
        .notification-footer {
            padding: 12px;
            border-top: 1px solid var(--border);
            text-align: center;
        }
        .notification-footer a {
            color: var(--accent);
            font-size: 0.8rem;
            text-decoration: none;
            font-weight: 600;
        }
        .notification-footer a:hover {
            text-decoration: underline;
        }
        
        /* Leaderboard Styles */
        .view-toggle {
            display: flex;
            gap: 4px;
            background: var(--bg-secondary);
            padding: 4px;
            border-radius: 10px;
            border: 1px solid var(--border);
        }
        .view-toggle-btn {
            padding: 8px 16px;
            border: none;
            background: transparent;
            color: var(--text-muted);
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            border-radius: 8px;
            transition: all 0.2s;
        }
        .view-toggle-btn:hover {
            color: var(--text-primary);
        }
        .view-toggle-btn.active {
            background: var(--accent);
            color: #000;
        }
        
        .leaderboard-container {
            display: none;
        }
        .leaderboard-container.active {
            display: block;
        }

        /* Creators Table View Container */
        #creatorsTable {
            display: block;
        }
        #creatorsTable:not(.active) {
            display: none;
        }
        .leaderboard-podium {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            gap: 20px;
            padding: 40px 20px;
            margin-bottom: 24px;
        }
        .podium-place {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
        .podium-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: var(--bg-secondary);
            border: 4px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            margin-bottom: 12px;
            position: relative;
        }
        .podium-place.first .podium-avatar {
            width: 100px;
            height: 100px;
            border-color: #ffd700;
            box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
        }
        .podium-place.second .podium-avatar {
            border-color: #c0c0c0;
        }
        .podium-place.third .podium-avatar {
            border-color: #cd7f32;
        }
        .podium-rank {
            position: absolute;
            bottom: -8px;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
            font-weight: 800;
            color: #000;
        }
        .podium-place.first .podium-rank { background: #ffd700; }
        .podium-place.second .podium-rank { background: #c0c0c0; }
        .podium-place.third .podium-rank { background: #cd7f32; }
        .podium-name {
            font-weight: 700;
            font-size: 1rem;
            margin-bottom: 4px;
            max-width: 120px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .podium-gmv {
            font-size: 1.25rem;
            font-weight: 800;
            color: var(--success);
        }
        .podium-brand {
            font-size: 0.7rem;
            color: var(--text-muted);
            margin-top: 4px;
        }
        .podium-base {
            width: 100px;
            margin-top: 12px;
            border-radius: 8px 8px 0 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }
        .podium-place.first .podium-base {
            height: 80px;
            background: linear-gradient(180deg, #ffd700 0%, #b8860b 100%);
        }
        .podium-place.second .podium-base {
            height: 60px;
            background: linear-gradient(180deg, #c0c0c0 0%, #808080 100%);
        }
        .podium-place.third .podium-base {
            height: 40px;
            background: linear-gradient(180deg, #cd7f32 0%, #8b4513 100%);
        }
        
        .leaderboard-list {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            overflow: hidden;
        }
        .leaderboard-item {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 16px 20px;
            border-bottom: 1px solid var(--border-light);
            transition: all 0.2s ease;
            position: relative;
        }
        .leaderboard-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: var(--accent);
            opacity: 0;
            transition: opacity 0.2s;
        }
        .leaderboard-item:hover {
            background: var(--bg-secondary);
            padding-left: 24px;
        }
        .leaderboard-item:hover::before {
            opacity: 1;
        }
        .leaderboard-item:last-child {
            border-bottom: none;
        }
        /* Stagger animation for leaderboard items */
        .leaderboard-item:nth-child(1) { animation: slideInLeft 0.3s ease-out 0.05s both; }
        .leaderboard-item:nth-child(2) { animation: slideInLeft 0.3s ease-out 0.1s both; }
        .leaderboard-item:nth-child(3) { animation: slideInLeft 0.3s ease-out 0.15s both; }
        .leaderboard-item:nth-child(4) { animation: slideInLeft 0.3s ease-out 0.2s both; }
        .leaderboard-item:nth-child(5) { animation: slideInLeft 0.3s ease-out 0.25s both; }
        .leaderboard-item:nth-child(6) { animation: slideInLeft 0.3s ease-out 0.3s both; }
        .leaderboard-item:nth-child(7) { animation: slideInLeft 0.3s ease-out 0.35s both; }
        .leaderboard-item:nth-child(8) { animation: slideInLeft 0.3s ease-out 0.4s both; }
        .leaderboard-item:nth-child(9) { animation: slideInLeft 0.3s ease-out 0.45s both; }
        .leaderboard-item:nth-child(10) { animation: slideInLeft 0.3s ease-out 0.5s both; }
        @keyframes slideInLeft {
            from { opacity: 0; transform: translateX(-20px); }
            to { opacity: 1; transform: translateX(0); }
        }
        .leaderboard-rank {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 1.1rem;
            background: var(--bg-secondary);
            color: var(--text-muted);
            transition: transform 0.2s;
        }
        .leaderboard-item:hover .leaderboard-rank {
            transform: scale(1.1);
        }
        .leaderboard-rank.top-3 {
            color: #000;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }
        .leaderboard-rank.rank-1 { 
            background: linear-gradient(135deg, #ffd700, #ffed4a); 
            animation: goldShine 2s ease-in-out infinite;
        }
        .leaderboard-rank.rank-2 { 
            background: linear-gradient(135deg, #c0c0c0, #e8e8e8); 
        }
        .leaderboard-rank.rank-3 { 
            background: linear-gradient(135deg, #cd7f32, #daa06d); 
        }
        @keyframes goldShine {
            0%, 100% { box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3); }
            50% { box-shadow: 0 4px 20px rgba(255, 215, 0, 0.5); }
        }
        .leaderboard-creator {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 0;
        }
        .leaderboard-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--bg-secondary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
        }
        .leaderboard-info {
            min-width: 0;
        }
        .leaderboard-name {
            font-weight: 600;
            font-size: 0.95rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .leaderboard-brand {
            font-size: 0.75rem;
            color: var(--text-muted);
        }
        .leaderboard-stats {
            display: flex;
            gap: 24px;
            align-items: center;
        }
        .leaderboard-stat {
            text-align: right;
        }
        .leaderboard-stat .value {
            font-weight: 700;
            font-size: 1rem;
        }
        .leaderboard-stat .label {
            font-size: 0.7rem;
            color: var(--text-muted);
            text-transform: uppercase;
        }
        .leaderboard-stat.gmv .value {
            color: var(--success);
        }
        .leaderboard-change {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 0.8rem;
            font-weight: 600;
        }
        .leaderboard-change.up { color: var(--success); }
        .leaderboard-change.down { color: var(--danger); }
        .leaderboard-change.same { color: var(--text-muted); }
        
        .leaderboard-filters {
            display: flex;
            gap: 12px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        .leaderboard-period-btn {
            padding: 8px 16px;
            border: 1px solid var(--border);
            background: var(--bg-card);
            color: var(--text-secondary);
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.85rem;
            font-weight: 500;
            transition: all 0.2s;
        }
        .leaderboard-period-btn:hover {
            border-color: var(--accent);
            color: var(--text-primary);
        }
        .leaderboard-period-btn.active {
            background: var(--accent);
            border-color: var(--accent);
            color: #000;
        }
        
        /* Bulk Actions Styles */
        .bulk-actions-bar {
            display: none;
            align-items: center;
            gap: 16px;
            padding: 12px 20px;
            background: linear-gradient(135deg, var(--accent-dim) 0%, rgba(255, 77, 141, 0.1) 100%);
            border: 1px solid var(--accent);
            border-radius: 10px;
            margin-bottom: 16px;
            animation: slideIn 0.2s ease;
        }
        .bulk-actions-bar.show {
            display: flex;
        }
        @keyframes slideIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .bulk-select-count {
            font-weight: 700;
            color: var(--accent);
            font-size: 0.9rem;
        }
        .bulk-actions-buttons {
            display: flex;
            gap: 8px;
            margin-left: auto;
        }
        .bulk-btn {
            padding: 8px 14px;
            border: 1px solid var(--border);
            background: var(--bg-card);
            color: var(--text-primary);
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.8rem;
            font-weight: 500;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .bulk-btn:hover {
            background: var(--bg-secondary);
            border-color: var(--accent);
        }
        .bulk-btn.danger:hover {
            border-color: var(--danger);
            color: var(--danger);
        }
        .bulk-btn.success:hover {
            border-color: var(--success);
            color: var(--success);
        }
        .bulk-checkbox {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: var(--accent);
        }
        .select-all-checkbox {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: var(--accent);
        }
        .row-selected {
            background: rgba(255, 77, 141, 0.08) !important;
        }

        /* View Toggle Buttons */
        .view-toggle-btn {
            padding: 6px 12px;
            font-size: 0.8rem;
            border: none;
            background: transparent;
            color: var(--text-muted);
            cursor: pointer;
            border-radius: 6px;
            transition: all 0.2s;
            white-space: nowrap;
        }
        .view-toggle-btn:hover {
            color: var(--text-primary);
            background: var(--bg-tertiary);
        }
        .view-toggle-btn.active {
            background: var(--accent);
            color: var(--bg-primary);
            font-weight: 600;
        }
        
        /* Brand Pills in Identity View */
        .brand-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }
        .brand-pill {
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.7rem;
            font-weight: 500;
            white-space: nowrap;
        }
        .brand-pill.catakor { background: var(--blue-dim); color: var(--blue); }
        .brand-pill.jiyu { background: var(--purple-dim); color: var(--purple); }
        .brand-pill.physicians_choice { background: var(--green-dim); color: var(--success); }
        .brand-pill.peach_slices { background: var(--orange-dim); color: var(--warning); }
        .brand-pill.yerba_magic { background: var(--teal-dim); color: var(--teal); }
        
        /* Expandable Row */
        .roster-row-expandable {
            cursor: pointer;
        }
        .roster-row-expandable:hover {
            background: var(--bg-secondary);
        }
        .roster-expand-icon {
            display: inline-block;
            transition: transform 0.2s;
            margin-right: 8px;
            color: var(--text-muted);
        }
        .roster-expand-icon.expanded {
            transform: rotate(90deg);
        }
        .roster-detail-row {
            background: var(--bg-secondary);
        }
        .roster-detail-row td {
            padding: 0 !important;
        }
        /* ============================================
           ROSTER EXPANDED DROPDOWN - Modern Design
           ============================================ */
        .roster-brand-details {
            padding: 16px 20px 16px 48px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            background: linear-gradient(180deg, var(--bg-secondary) 0%, transparent 100%);
            border-top: 1px solid var(--border);
        }

        .roster-brand-detail-item {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.2s ease;
        }
        .roster-brand-detail-item:hover {
            border-color: var(--accent);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        /* Expand animation for detail row */
        .roster-detail-row {
            animation: slideDown 0.2s ease-out;
        }
        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-8px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Expandable row indicator */
        .roster-row-expandable {
            cursor: pointer;
            transition: background 0.15s ease;
        }
        .roster-row-expandable:hover {
            background: var(--bg-secondary);
        }
        .roster-row-expandable.expanded {
            background: var(--bg-secondary);
            border-bottom: none;
        }

        /* Chevron indicator for expandable rows */
        .roster-expand-indicator {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            margin-right: 8px;
            color: var(--text-muted);
            transition: transform 0.2s ease;
        }
        .roster-row-expandable.expanded .roster-expand-indicator {
            transform: rotate(90deg);
            color: var(--accent);
        }

        /* ============================================
           ROSTER VIEW - Complete CSS System
           ============================================ */

        /* --- View Toggle --- */
        .roster-view-toggle {
            display: flex;
            background: var(--bg-secondary);
            border-radius: 10px;
            padding: 4px;
            border: 1px solid var(--border);
        }
        .roster-view-toggle__btn {
            padding: 8px 14px;
            border: none;
            background: transparent;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.8rem;
            font-weight: 500;
            color: var(--text-muted);
            transition: all 0.2s ease;
        }
        .roster-view-toggle__btn:hover {
            color: var(--text-primary);
            background: rgba(255,255,255,0.05);
        }
        .roster-view-toggle__btn.active {
            background: var(--bg-card);
            font-weight: 600;
            color: var(--text-primary);
            box-shadow: 0 2px 8px rgba(0,0,0,0.12);
        }

        /* --- Filter Bar --- */
        .roster-filters {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            align-items: center;
            padding: 14px 18px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            margin-bottom: 20px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        }
        .roster-filters__spacer {
            flex: 1;
        }
        .roster-search {
            min-width: 200px;
            padding: 10px 14px;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-primary);
            font-size: 0.85rem;
            transition: all 0.2s ease;
        }
        .roster-search:focus {
            outline: none;
            border-color: var(--accent);
            background: var(--bg-card);
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
        }
        .roster-search::placeholder {
            color: var(--text-muted);
        }

        /* --- Search Wrapper (improved search UI) --- */
        .roster-search-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            min-width: 240px;
        }

        .roster-search-wrapper .roster-search {
            width: 100%;
            padding-left: 40px;
            padding-right: 70px;
        }

        .roster-search-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
            pointer-events: none;
            display: flex;
            align-items: center;
        }

        .roster-search-clear {
            position: absolute;
            right: 48px;
            top: 50%;
            transform: translateY(-50%);
            background: transparent;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s ease;
        }

        .roster-search-clear:hover {
            background: var(--bg-secondary);
            color: var(--text-primary);
        }

        .roster-search-hint {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 0.7rem;
            color: var(--text-muted);
            background: var(--bg-secondary);
            padding: 2px 6px;
            border-radius: 4px;
            border: 1px solid var(--border);
            pointer-events: none;
            font-family: monospace;
        }

        /* --- Active Filter Chips --- */
        .roster-active-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding: 12px 0;
            margin-bottom: 8px;
        }

        .filter-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            background: var(--accent-dim);
            color: var(--accent);
            border-radius: 16px;
            font-size: 0.8rem;
            font-weight: 500;
            border: 1px solid transparent;
            transition: all 0.15s ease;
        }

        .filter-chip[data-type="brand"] {
            background: rgba(99, 102, 241, 0.15);
            color: #818cf8;
        }

        .filter-chip[data-type="status"] {
            background: rgba(34, 197, 94, 0.15);
            color: #4ade80;
        }

        .filter-chip[data-type="quick"] {
            background: rgba(251, 146, 60, 0.15);
            color: #fb923c;
        }

        .filter-chip[data-type="search"] {
            background: rgba(147, 51, 234, 0.15);
            color: #a78bfa;
        }

        .filter-chip[data-type="product"] {
            background: rgba(6, 182, 212, 0.15);
            color: #22d3ee;
        }

        .filter-chip__remove {
            background: transparent;
            border: none;
            color: inherit;
            cursor: pointer;
            font-size: 1rem;
            line-height: 1;
            padding: 0;
            opacity: 0.7;
            transition: opacity 0.15s ease;
        }

        .filter-chip__remove:hover {
            opacity: 1;
        }

        .filter-chip--clear {
            background: transparent;
            color: var(--text-muted);
            border: 1px dashed var(--border);
            cursor: pointer;
            padding: 6px 12px;
        }

        .filter-chip--clear:hover {
            background: var(--bg-secondary);
            color: var(--text-primary);
            border-color: var(--text-muted);
        }

        /* --- Status Badges --- */
        .roster-status {
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 600;
            display: inline-block;
        }
        .roster-status--active {
            background: var(--success-dim);
            color: var(--success);
        }
        .roster-status--applied {
            background: var(--blue-dim);
            color: var(--blue);
        }
        .roster-status--pending {
            background: var(--purple-dim);
            color: var(--purple);
        }
        .roster-status--onhold {
            background: var(--warning-dim);
            color: var(--warning);
        }
        .roster-status--churned {
            background: var(--danger-dim);
            color: var(--danger);
        }

        /* --- Role Badges --- */
        .roster-role {
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 600;
            display: inline-block;
        }
        .roster-role--incubator {
            background: var(--blue-dim);
            color: var(--blue);
        }
        .roster-role--closer {
            background: var(--purple-dim);
            color: var(--purple);
        }
        .roster-role--creatives {
            background: var(--warning-dim);
            color: var(--warning);
        }
        .roster-role--default {
            background: var(--bg-secondary);
            color: var(--text-secondary);
        }

        /* --- GMV Display --- */
        .roster-gmv-change {
            font-size: 0.7rem;
            font-weight: 600;
            font-family: 'Space Mono', monospace;
        }
        .roster-gmv-change--positive {
            color: var(--success);
        }
        .roster-gmv-change--negative {
            color: var(--danger);
        }

        /* --- Retainer & ROI --- */
        .roster-retainer {
            font-size: 0.85rem;
            font-family: 'Space Mono', monospace;
            font-weight: 600;
        }
        .roster-retainer--paid {
            color: var(--success);
        }
        .roster-retainer--affiliate {
            background: var(--blue-dim);
            color: var(--blue);
            font-size: 0.7rem;
            font-family: inherit;
            font-weight: 500;
            padding: 2px 8px;
            border-radius: 4px;
        }
        .roster-retainer--none {
            color: var(--text-muted);
        }
        .roster-retainer--multi {
            cursor: help;
        }
        /* Retainer breakdown in dropdown */
        .roster-retainer-breakdown {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
        }
        .roster-retainer__item {
            display: inline-flex;
            align-items: center;
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 0.8rem;
            font-family: 'Space Mono', monospace;
            font-weight: 500;
        }
        .roster-retainer__base {
            background: var(--success-dim, rgba(16, 185, 129, 0.1));
            color: var(--success);
            border: 1px solid var(--success);
        }
        .roster-retainer__product {
            background: var(--accent-dim, rgba(139, 92, 246, 0.1));
            color: var(--accent);
            border: 1px solid var(--accent);
        }
        .roster-retainer__divider {
            width: 1px;
            height: 20px;
            background: var(--border);
            margin: 0 4px;
        }
        .roster-retainer__total {
            color: var(--text);
            font-weight: 600;
            font-size: 0.85rem;
            font-family: 'Space Mono', monospace;
        }

        .roster-roi {
            font-size: 0.85rem;
            text-align: center;
            font-weight: 600;
            font-family: 'Space Mono', monospace;
        }
        .roster-roi--good {
            color: var(--success);
        }
        .roster-roi--bad {
            color: var(--danger);
        }
        .roster-roi--none {
            color: var(--text-muted);
            font-weight: 400;
        }

        /* --- Health Indicators --- */
        .roster-health {
            text-align: center;
        }
        .roster-health__icon {
            font-size: 1rem;
        }
        .roster-health__icon--warning {
            color: var(--warning);
        }
        .roster-health__icon--ok {
            color: var(--success);
        }

        /* --- Multi-Brand Indicator --- */
        .roster-multi-brand {
            cursor: help;
            margin-left: 4px;
            font-size: 0.7rem;
            background: var(--purple-dim);
            color: var(--purple);
            padding: 2px 6px;
            border-radius: 4px;
        }

        /* --- Discord Handle --- */
        .roster-discord {
            font-size: 0.75rem;
            color: var(--text-muted);
        }
        .roster-discord::before {
            content: '💬 ';
        }

        /* --- Joined Date --- */
        .roster-joined {
            font-size: 0.85rem;
            color: var(--text-muted);
        }

        /* --- Stats Grid --- */
        .roster-stats {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 14px;
            margin-bottom: 24px;
        }
        @media (max-width: 1400px) {
            .roster-stats {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        @media (max-width: 768px) {
            .roster-stats {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .roster-stat-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 18px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
            transition: box-shadow 0.2s ease, transform 0.2s ease;
        }
        .roster-stat-card:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            transform: translateY(-1px);
        }
        .roster-stat-card__content {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .roster-stat-card__icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
        }
        .roster-stat-card__icon--yellow { background: var(--warning-dim); }
        .roster-stat-card__icon--purple { background: var(--purple-dim); }
        .roster-stat-card__icon--green { background: var(--success-dim); }
        .roster-stat-card__icon--blue { background: var(--blue-dim); }
        .roster-stat-card__icon--orange { background: var(--orange-dim); }
        .roster-stat-card__icon--teal { background: var(--teal-dim); }

        .roster-stat-card__value {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1.2;
        }
        .roster-stat-card__value--success { color: var(--success); }
        .roster-stat-card__value--error { color: var(--error); }

        .roster-stat-card__label {
            font-size: 0.7rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-top: 2px;
        }
        .roster-stat-card__subtext {
            font-size: 0.65rem;
            color: var(--text-muted);
            margin-top: 4px;
        }
        .roster-stat-card__subtext--error {
            color: var(--error);
        }

        /* --- Follow-ups Card --- */
        .roster-followups-card {
            max-width: 380px;
            margin-bottom: 20px;
        }
        .roster-followups-card .card-body {
            max-height: 280px;
            overflow-y: auto;
        }

        /* --- Main Table Card --- */
        .roster-table-card {
            margin-bottom: 0;
        }
        .roster-table-card__meta {
            font-size: 0.85rem;
            color: var(--text-muted);
        }

        /* --- Detail Row Account List --- */
        .roster-accounts {
            background: var(--bg-primary);
            border-radius: 6px;
            padding: 8px 12px;
        }
        /* --- Detail Row Header (Brand Card Header) --- */
        .roster-detail-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 14px 16px;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border);
        }
        .roster-detail-header__left {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }
        .roster-detail-header__right {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .roster-detail-header .gmv-value {
            font-size: 1rem;
            padding: 4px 10px;
            background: var(--success-dim);
            border-radius: 6px;
        }

        /* --- Accounts Section --- */
        .roster-accounts {
            padding: 12px 16px;
        }
        .roster-account-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 12px;
            margin: 0 -12px;
            border-radius: 8px;
            transition: background 0.15s ease;
        }
        .roster-account-row:hover {
            background: var(--bg-secondary);
        }
        .roster-account-row:not(:last-child) {
            border-bottom: 1px solid var(--border);
        }
        .roster-account-handle {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--text-primary);
            font-weight: 500;
        }
        .roster-account-handle::before {
            content: '@';
            color: var(--text-muted);
            font-weight: 400;
        }
        .roster-account-gmv {
            font-family: 'Space Mono', monospace;
            font-weight: 600;
            font-size: 0.9rem;
            padding: 4px 10px;
            border-radius: 6px;
            background: var(--bg-tertiary);
        }
        .roster-account-gmv--active {
            color: var(--success);
            background: var(--success-dim);
        }
        .roster-account-gmv--zero {
            color: var(--text-muted);
            background: var(--bg-tertiary);
        }
        .roster-account-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .roster-account-actions .roster-action-btn--stats {
            opacity: 0.6;
            transition: opacity 0.15s;
        }
        .roster-account-row:hover .roster-action-btn--stats {
            opacity: 1;
        }

        /* --- Detail Row Footer (Total Summary) --- */
        .roster-detail-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            background: linear-gradient(90deg, var(--accent-dim) 0%, transparent 50%);
            border-top: 1px solid var(--border);
        }
        .roster-detail-footer__total {
            font-size: 0.9rem;
            color: var(--text-secondary);
        }
        .roster-detail-footer__total strong {
            color: var(--accent);
            font-size: 1rem;
            font-family: 'Space Mono', monospace;
        }
        .roster-detail-footer__actions {
            display: flex;
            gap: 8px;
        }

        /* --- Action Buttons --- */
        .roster-action-btn {
            padding: 6px 10px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.8rem;
            transition: all 0.15s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .roster-action-btn--add {
            background: var(--success-dim);
            color: var(--success);
        }
        .roster-action-btn--add:hover {
            background: var(--success);
            color: white;
            transform: scale(1.05);
        }
        .roster-action-btn--merge {
            background: var(--purple-dim);
            color: var(--purple);
        }
        .roster-action-btn--merge:hover {
            background: var(--purple);
            color: white;
            transform: scale(1.05);
        }
        .roster-action-btn--stats {
            padding: 6px 10px;
            font-size: 0.8rem;
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            border: 1px solid var(--border);
        }
        .roster-action-btn--stats:hover {
            background: var(--accent);
            color: var(--bg-primary);
            border-color: var(--accent);
        }

        /* Dropdown action buttons (Edit/Delete in header) */
        .roster-detail-header .action-btn {
            width: 32px;
            height: 32px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            font-size: 0.9rem;
            transition: all 0.15s ease;
        }
        .roster-detail-header .action-btn.view {
            background: var(--blue-dim);
            color: var(--blue);
            border: 1px solid transparent;
        }
        .roster-detail-header .action-btn.view:hover {
            background: var(--blue);
            color: white;
            transform: scale(1.1);
        }
        .roster-detail-header .action-btn.remove {
            background: var(--danger-dim);
            color: var(--danger);
            border: 1px solid transparent;
        }
        .roster-detail-header .action-btn.remove:hover {
            background: var(--danger);
            color: white;
            transform: scale(1.1);
        }

        /* --- Bulk Actions Bar --- */
        .roster-bulk-bar {
            display: none;
            padding: 12px 16px;
            background: linear-gradient(135deg, var(--accent-dim) 0%, var(--purple-dim) 100%);
            border-bottom: 1px solid var(--border);
            align-items: center;
            gap: 16px;
        }
        .roster-bulk-bar--visible {
            display: flex;
        }
        .roster-bulk-bar__count {
            font-weight: 600;
            color: var(--accent);
        }
        .roster-bulk-bar__actions {
            display: flex;
            gap: 8px;
        }
        .roster-bulk-btn {
            padding: 6px 12px;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--bg-card);
            color: var(--text-primary);
            cursor: pointer;
            font-size: 0.8rem;
            transition: all 0.15s;
        }
        .roster-bulk-btn:hover {
            background: var(--bg-secondary);
            border-color: var(--accent);
        }
        .roster-bulk-btn--danger:hover {
            background: var(--danger-dim);
            border-color: var(--danger);
            color: var(--danger);
        }

        /* --- Table Enhancements --- */
        .roster-table-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
        }
        .roster-table-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
        }
        .roster-table-count {
            font-size: 0.85rem;
            color: var(--text-muted);
        }

        /* --- Empty State --- */
        .roster-empty {
            text-align: center;
            padding: 48px 24px;
        }
        .roster-empty__icon {
            font-size: 3rem;
            margin-bottom: 16px;
            opacity: 0.5;
        }
        .roster-empty__title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 8px;
        }
        .roster-empty__text {
            color: var(--text-muted);
        }

        /* Stat subtext */
        .stat-subtext {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-top: 2px;
        }

        .nav-bottom { padding-top: 16px; border-top: 1px solid var(--border); }

        .main {
            margin-left: 260px;
            padding: 32px 36px;
            min-height: 100vh;
            overflow-x: hidden;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 28px;
        }

        .header-title { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.5px; }
        .header-subtitle { color: var(--text-secondary); font-size: 0.875rem; margin-top: 4px; }
        .header-actions { display: flex; gap: 12px; align-items: center; }

        /* View transitions */
        .view-section { 
            display: none; 
            position: relative; 
            min-height: 400px;
            opacity: 0;
            transform: translateY(8px);
            transition: opacity 0.25s ease, transform 0.25s ease;
        }
        .view-section.active { 
            display: block;
            opacity: 1;
            transform: translateY(0);
        }
        
        /* Smooth scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: var(--bg-secondary);
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb {
            background: var(--border);
            border-radius: 4px;
            transition: background 0.2s;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: var(--text-muted);
        }
        
        /* Focus ring improvements */
        *:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }
        input:focus, select:focus, textarea:focus, button:focus-visible {
            border-color: var(--accent) !important;
            box-shadow: 0 0 0 3px var(--accent-dim);
        }
        
        /* Tooltip System */
        [data-tooltip] {
            position: relative;
            cursor: help;
        }
        [data-tooltip]::before,
        [data-tooltip]::after {
            position: absolute;
            opacity: 0;
            visibility: hidden;
            transition: all 0.2s ease;
            pointer-events: none;
            z-index: 1000;
        }
        [data-tooltip]::before {
            content: attr(data-tooltip);
            bottom: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%) translateY(4px);
            padding: 8px 12px;
            background: var(--bg-primary);
            color: var(--text-primary);
            font-size: 0.75rem;
            font-weight: 500;
            white-space: nowrap;
            border-radius: 6px;
            border: 1px solid var(--border);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }
        [data-tooltip]::after {
            content: '';
            bottom: calc(100% + 4px);
            left: 50%;
            transform: translateX(-50%) translateY(4px);
            border: 6px solid transparent;
            border-top-color: var(--border);
        }
        [data-tooltip]:hover::before,
        [data-tooltip]:hover::after {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }
        [data-tooltip-position="right"]::before {
            bottom: auto;
            left: calc(100% + 8px);
            top: 50%;
            transform: translateY(-50%) translateX(-4px);
        }
        [data-tooltip-position="right"]::after {
            bottom: auto;
            left: calc(100% + 2px);
            top: 50%;
            transform: translateY(-50%) translateX(-4px);
            border: 6px solid transparent;
            border-right-color: var(--border);
        }
        [data-tooltip-position="right"]:hover::before,
        [data-tooltip-position="right"]:hover::after {
            transform: translateY(-50%) translateX(0);
        }
        
        /* Help Icon for Tooltips */
        .help-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 16px;
            height: 16px;
            font-size: 0.65rem;
            font-weight: 700;
            color: var(--text-muted);
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 50%;
            cursor: help;
            margin-left: 6px;
            vertical-align: middle;
            transition: all 0.15s ease;
        }
        .help-icon:hover {
            color: var(--accent);
            border-color: var(--accent);
            background: var(--accent-dim);
        }
        
        /* Status Dot Indicators */
        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 6px;
        }
        .status-dot.online {
            background: var(--success);
            box-shadow: 0 0 0 0 var(--success);
            animation: statusPulse 2s infinite;
        }
        .status-dot.offline { background: var(--text-muted); }
        .status-dot.warning { 
            background: var(--warning);
            animation: statusPulse 1.5s infinite;
        }
        .status-dot.error { background: var(--danger); }
        @keyframes statusPulse {
            0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
            70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
            100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
        }
        
        /* Progress Bar Component */
        .progress-bar {
            width: 100%;
            height: 8px;
            background: var(--bg-secondary);
            border-radius: 4px;
            overflow: hidden;
            position: relative;
        }
        .progress-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--accent), var(--warning));
            border-radius: 4px;
            transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }
        .progress-bar-fill::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            animation: progressShimmer 2s infinite;
        }
        @keyframes progressShimmer {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }
        .progress-bar-label {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 0.65rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        
        /* Mini progress for table cells */
        .mini-progress {
            width: 60px;
            height: 4px;
            background: var(--bg-secondary);
            border-radius: 2px;
            overflow: hidden;
            display: inline-block;
            vertical-align: middle;
            margin-left: 8px;
        }
        .mini-progress-fill {
            height: 100%;
            border-radius: 2px;
            transition: width 0.3s ease;
        }
        .mini-progress-fill.low { background: var(--danger); }
        .mini-progress-fill.medium { background: var(--warning); }
        .mini-progress-fill.high { background: var(--success); }
        
        /* Copy Button Feedback */
        .copy-btn {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
            transition: all 0.2s;
            position: relative;
        }
        .copy-btn:hover {
            background: var(--bg-secondary);
            color: var(--text-primary);
        }
        .copy-btn.copied {
            color: var(--success);
        }
        .copy-btn.copied::after {
            content: 'Copied!';
            position: absolute;
            bottom: calc(100% + 4px);
            left: 50%;
            transform: translateX(-50%);
            background: var(--success);
            color: #000;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.7rem;
            font-weight: 600;
            animation: copyFeedback 1.5s ease forwards;
        }
        @keyframes copyFeedback {
            0% { opacity: 0; transform: translateX(-50%) translateY(4px); }
            15% { opacity: 1; transform: translateX(-50%) translateY(0); }
            85% { opacity: 1; transform: translateX(-50%) translateY(0); }
            100% { opacity: 0; transform: translateX(-50%) translateY(-4px); }
        }
        
        /* Active Filter Pills */
        .active-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 16px;
        }
        .filter-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background: var(--accent-dim);
            border: 1px solid rgba(255, 77, 141, 0.3);
            border-radius: 20px;
            font-size: 0.75rem;
            color: var(--accent);
            animation: scaleIn 0.2s ease-out;
        }
        .filter-pill-remove {
            background: none;
            border: none;
            color: var(--accent);
            cursor: pointer;
            padding: 0;
            font-size: 1rem;
            line-height: 1;
            opacity: 0.7;
            transition: opacity 0.15s;
        }
        .filter-pill-remove:hover { opacity: 1; }
        
        /* Enhanced Select Dropdown */
        select {
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
            padding-right: 36px;
        }
        select:hover {
            border-color: var(--border-light);
        }

        .filters {
            display: flex;
            gap: 12px;
            margin-bottom: 24px;
            flex-wrap: wrap;
            align-items: center;
        }

        .filter-group { display: flex; align-items: center; gap: 8px; }
        .filter-label { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; }

        select, input[type="text"], input[type="number"], input[type="date"], .date-input {
            background: var(--bg-card);
            border: 1px solid var(--border);
            color: var(--text-primary);
            padding: 10px 14px;
            border-radius: 8px;
            font-size: 0.85rem;
            font-family: inherit;
            cursor: pointer;
            min-width: 140px;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        
        input[type="text"]:hover, input[type="number"]:hover, select:hover {
            border-color: var(--border-light);
        }

        select:focus, input:focus, .date-input:focus { outline: none; border-color: var(--accent); }

        /* Litepicker custom styling - light theme for visibility */
        .litepicker {
            --litepicker-container-months-color-bg: #fff;
            --litepicker-month-header-color: #1a1d24;
            --litepicker-button-prev-month-color: #6b7280;
            --litepicker-button-next-month-color: #6b7280;
            --litepicker-button-prev-month-color-hover: var(--accent);
            --litepicker-button-next-month-color-hover: var(--accent);
            --litepicker-month-weekday-color: #6b7280;
            --litepicker-day-color: #1a1d24;
            --litepicker-day-color-hover: #1a1d24;
            --litepicker-is-in-range-color: rgba(255, 77, 141, 0.3);
            --litepicker-is-start-color: #000;
            --litepicker-is-start-color-bg: var(--accent);
            --litepicker-is-end-color: #000;
            --litepicker-is-end-color-bg: var(--accent);
            --litepicker-button-apply-color: #000;
            --litepicker-button-apply-color-bg: var(--accent);
            --litepicker-button-cancel-color: #1a1d24;
            --litepicker-button-cancel-color-bg: #e5e7eb;
            --litepicker-highlighted-day-color: #1a1d24;
            --litepicker-highlighted-day-color-bg: rgba(255, 77, 141, 0.3);
            font-family: 'General Sans', sans-serif !important;
            /* Must be higher than modals (999999) to show calendar above modal */
            z-index: 10000000 !important;
        }
        .litepicker .container__main {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            display: flex;
            flex-direction: row;
        }
        .litepicker .container__months {
            background: #fff;
            border-radius: 0 12px 12px 0;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
        }
        .litepicker .container__months .month-item {
            background: #fff;
            padding: 8px;
            width: 280px;
        }
        .litepicker .container__months .month-item-header {
            padding: 12px 8px;
            color: #1a1d24;
            font-weight: 600;
        }
        .litepicker .container__months .month-item-header div > .month-item-name {
            color: #1a1d24 !important;
            font-weight: 600;
        }
        .litepicker .container__months .month-item-header div > .month-item-year {
            color: #6b7280 !important;
        }
        .litepicker .container__months .month-item-weekdays-row {
            color: #6b7280;
        }
        .litepicker .container__months .month-item-weekdays-row > div {
            padding: 8px 0;
            font-size: 0.75rem;
            color: #6b7280 !important;
        }
        .litepicker .container__days > div, .litepicker .container__days > a {
            padding: 8px 0;
            border-radius: 6px;
            color: #1a1d24;
        }
        .litepicker .container__days .day-item {
            color: #1a1d24 !important;
            cursor: pointer;
        }
        .litepicker .container__days .day-item:hover {
            background: rgba(255, 77, 141, 0.3) !important;
            color: #1a1d24 !important;
            box-shadow: none;
        }
        .litepicker .container__days .day-item.is-locked {
            color: #d1d5db !important;
            text-decoration: line-through;
            cursor: not-allowed;
            pointer-events: none;
        }
        .litepicker .container__days .day-item.is-today {
            color: var(--accent) !important;
            font-weight: 700;
            border: 2px solid var(--accent);
        }
        .litepicker .container__days .day-item.is-start-date,
        .litepicker .container__days .day-item.is-end-date {
            background: var(--accent) !important;
            color: #000 !important;
        }
        .litepicker .container__days .day-item.is-in-range {
            background: rgba(255, 77, 141, 0.2) !important;
        }
        /* Preset ranges sidebar */
        .litepicker .container__preset {
            background: #f3f4f6;
            border-right: 1px solid #e5e7eb;
            border-radius: 12px 0 0 12px;
            padding: 12px;
            min-width: 140px;
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 10;
        }
        .litepicker .container__preset button {
            background: transparent;
            border: none;
            color: #4b5563;
            padding: 10px 14px;
            width: 100%;
            text-align: left;
            border-radius: 6px;
            cursor: pointer !important;
            pointer-events: all !important;
            font-size: 0.85rem;
            margin-bottom: 4px;
            transition: all 0.15s ease;
            position: relative;
            z-index: 11;
        }
        .litepicker .container__preset button:hover {
            background: #e5e7eb;
            color: #1a1d24;
        }
        .litepicker .container__preset button.active {
            background: rgba(255, 77, 141, 0.3);
            color: #92600a;
            font-weight: 500;
        }
        .litepicker .container__footer {
            background: #f3f4f6;
            border-top: 1px solid #e5e7eb;
            border-radius: 0 0 12px 12px;
            padding: 12px;
        }
        .litepicker .container__footer .button-apply {
            background: var(--accent) !important;
            color: #000 !important;
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
        }
        .litepicker .container__footer .button-apply:hover {
            background: #ffd54f !important;
        }
        .litepicker .container__footer .button-cancel {
            background: #e5e7eb;
            color: #1a1d24;
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            cursor: pointer;
            margin-right: 8px;
        }
        .litepicker .container__footer .button-cancel:hover {
            background: #d1d5db;
        }
        /* Navigation arrows */
        .litepicker .container__months .button-previous-month,
        .litepicker .container__months .button-next-month {
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
        }
        .litepicker .container__months .button-previous-month:hover,
        .litepicker .container__months .button-next-month:hover {
            background: #e5e7eb;
        }
        .litepicker .container__months .button-previous-month svg,
        .litepicker .container__months .button-next-month svg {
            fill: #6b7280;
        }
        .litepicker .container__months .button-previous-month:hover svg,
        .litepicker .container__months .button-next-month:hover svg {
            fill: var(--accent);
        }
        }
        
        /* Date range input styling */
        .date-range-input {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 10px 14px;
            color: var(--text-primary);
            font-size: 0.9rem;
            cursor: pointer;
            min-width: 240px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .date-range-input:hover {
            border-color: var(--border-light);
        }
        .date-range-input .icon {
            color: var(--text-muted);
        }

        /* Flatpickr custom styling (for comparison modal and calculator) */
        .flatpickr-calendar {
            background: var(--bg-card) !important;
            border: 1px solid var(--border) !important;
            box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
        }
        .flatpickr-months { background: var(--bg-secondary) !important; }
        .flatpickr-month { color: var(--text-primary) !important; }
        .flatpickr-current-month { color: var(--text-primary) !important; }
        .flatpickr-monthDropdown-months { background: var(--bg-card) !important; color: var(--text-primary) !important; }
        .numInputWrapper span { border-color: var(--border) !important; }
        .numInputWrapper input { color: var(--text-primary) !important; }
        .flatpickr-weekday { color: var(--text-muted) !important; }
        .flatpickr-day { color: var(--text-primary) !important; border-radius: 6px !important; }
        .flatpickr-day:hover { background: var(--accent-dim) !important; border-color: var(--accent) !important; }
        .flatpickr-day.selected { background: var(--accent) !important; color: #000 !important; border-color: var(--accent) !important; }
        .flatpickr-day.inRange { background: var(--accent-dim) !important; border-color: transparent !important; }
        .flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--accent) !important; color: #000 !important; }
        .flatpickr-day.flatpickr-disabled { color: var(--text-muted) !important; opacity: 0.3 !important; }
        .flatpickr-day.today { border-color: var(--accent) !important; }
        .flatpickr-prev-month, .flatpickr-next-month { fill: var(--text-primary) !important; }
        .flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: var(--accent) !important; }

        .period-toggle {
            display: flex;
            background: var(--bg-card);
            border-radius: 8px;
            padding: 4px;
            border: 1px solid var(--border);
        }

        .period-btn {
            padding: 8px 16px;
            border: none;
            background: transparent;
            color: var(--text-secondary);
            font-size: 0.85rem;
            font-weight: 500;
            cursor: pointer;
            border-radius: 6px;
            transition: all 0.2s;
            font-family: inherit;
        }

        .period-btn.active { background: var(--accent); color: #000; }
        .period-btn:hover:not(.active) { color: var(--text-primary); }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
            margin-bottom: 28px;
        }

        .stat-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 20px;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--accent), transparent);
            opacity: 0;
            transition: opacity 0.25s;
        }
        
        .stat-card:hover { 
            border-color: var(--border-light); 
            transform: translateY(-4px);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
        }
        .stat-card:hover::before { opacity: 1; }
        
        .stat-card.highlight { 
            background: linear-gradient(135deg, rgba(255, 77, 141, 0.1), var(--bg-card));
            border-color: rgba(255, 77, 141, 0.3);
        }
        .stat-card.highlight::before {
            background: linear-gradient(90deg, var(--accent), var(--warning));
            opacity: 1;
        }
        
        .stat-card.clickable {
            cursor: pointer;
        }
        .stat-card.clickable:active {
            transform: translateY(-1px);
        }

        .stat-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }

        .stat-icon {
            width: 42px;
            height: 42px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }

        .stat-icon.yellow { background: var(--accent-dim); }
        .stat-icon.green { background: var(--success-dim); }
        .stat-icon.purple { background: var(--purple-dim); }
        .stat-icon.blue { background: var(--blue-dim); }
        .stat-icon.red { background: var(--danger-dim); }
        .stat-icon.orange { background: var(--warning-dim); }
        .stat-icon.cyan { background: var(--cyan-dim); }

        .stat-value { font-size: 1.75rem; font-weight: 700; font-family: 'Space Mono', monospace; margin-bottom: 4px; }
        .stat-label { font-size: 0.8rem; color: var(--text-secondary); font-weight: 500; }
        .stat-change { font-size: 0.75rem; font-weight: 600; margin-top: 8px; }
        .stat-change.up { color: var(--success); }
        .stat-change.down { color: var(--danger); }
        .stat-change.neutral { color: var(--text-muted); }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px 18px;
            border-radius: 8px;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            border: none;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            font-family: inherit;
            text-decoration: none;
            position: relative;
            overflow: hidden;
        }
        
        .btn::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.4s, height 0.4s;
        }
        
        .btn:active::after {
            width: 200px;
            height: 200px;
        }

        .btn-primary { 
            background: var(--accent); 
            color: #000; 
            box-shadow: 0 2px 8px rgba(255, 77, 141, 0.3);
        }
        .btn-primary:hover { 
            background: var(--accent-hover);
            box-shadow: 0 4px 16px rgba(255, 77, 141, 0.4);
            transform: translateY(-1px);
        }
        .btn-primary:active {
            transform: translateY(0);
            box-shadow: 0 2px 8px rgba(255, 77, 141, 0.3);
        }
        
        .btn-secondary { 
            background: var(--bg-card); 
            color: var(--text-primary); 
            border: 1px solid var(--border); 
        }
        .btn-secondary:hover { 
            border-color: var(--accent);
            background: var(--bg-secondary);
        }
        
        .btn-success {
            background: var(--success);
            color: #000;
        }
        .btn-success:hover {
            filter: brightness(1.1);
        }
        
        .btn-danger {
            background: var(--danger);
            color: #fff;
        }
        .btn-danger:hover {
            filter: brightness(1.1);
        }

        /* Scout Mode Button */
        .btn-scout {
            background: linear-gradient(135deg, #1e3a5f 0%, #0d1f33 100%);
            color: #4fc3f7;
            border: 1px solid #4fc3f7;
            padding: 8px 16px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
            transition: all 0.2s ease;
        }
        .btn-scout:hover {
            background: linear-gradient(135deg, #2a4a6f 0%, #1a2f43 100%);
            box-shadow: 0 0 20px rgba(79, 195, 247, 0.3);
            transform: translateY(-1px);
        }
        .btn-scout.active {
            background: linear-gradient(135deg, #4fc3f7 0%, #29b6f6 100%);
            color: #0d1f33;
            border-color: #4fc3f7;
            box-shadow: 0 0 25px rgba(79, 195, 247, 0.5);
        }
        .btn-scout.active:hover {
            background: linear-gradient(135deg, #81d4fa 0%, #4fc3f7 100%);
        }
        .scout-icon {
            font-size: 1rem;
        }

        /* Scout Mode Active State - Banner */
        .scout-mode-banner {
            display: none;
            background: linear-gradient(135deg, rgba(79, 195, 247, 0.15) 0%, rgba(79, 195, 247, 0.05) 100%);
            border: 1px solid rgba(79, 195, 247, 0.3);
            border-radius: 10px;
            padding: 12px 20px;
            margin-bottom: 16px;
            align-items: center;
            gap: 16px;
        }
        .scout-mode-banner.active {
            display: flex;
        }
        .scout-mode-banner__icon {
            font-size: 1.5rem;
        }
        .scout-mode-banner__content {
            flex: 1;
        }
        .scout-mode-banner__title {
            color: #4fc3f7;
            font-weight: 600;
            font-size: 0.95rem;
        }
        .scout-mode-banner__subtitle {
            color: var(--text-muted);
            font-size: 0.8rem;
            margin-top: 2px;
        }
        .scout-mode-banner__stats {
            display: flex;
            gap: 24px;
        }
        .scout-mode-banner__stat {
            text-align: center;
        }
        .scout-mode-banner__stat-value {
            font-size: 1.25rem;
            font-weight: 700;
            color: #4fc3f7;
        }
        .scout-mode-banner__stat-label {
            font-size: 0.7rem;
            color: var(--text-muted);
            text-transform: uppercase;
        }

        /* Scout Mode Table Enhancements */
        .scout-row {
            background: linear-gradient(90deg, rgba(79, 195, 247, 0.05) 0%, transparent 100%);
        }
        .scout-row:hover {
            background: linear-gradient(90deg, rgba(79, 195, 247, 0.1) 0%, transparent 100%);
        }
        .scout-new-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
            color: #fff;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
        }
        .scout-growth-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
            color: #fff;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 600;
        }
        .scout-tiktok-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            background: #000;
            border: 1px solid #333;
            border-radius: 6px;
            color: #fff;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        .scout-tiktok-btn:hover {
            background: #fe2c55;
            border-color: #fe2c55;
            transform: scale(1.1);
        }
        .scout-add-btn {
            background: linear-gradient(135deg, #4fc3f7 0%, #29b6f6 100%);
            color: #0d1f33;
            border: none;
            padding: 6px 14px;
            border-radius: 6px;
            font-weight: 600;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        .scout-add-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(79, 195, 247, 0.4);
        }

        /* Grouped View Styles */
        .creator-group-row {
            cursor: pointer;
        }
        .creator-group-row:hover {
            background: var(--bg-secondary);
        }
        .creator-group-row.multi-brand {
            border-left: 3px solid var(--accent);
        }
        .creator-expand-icon {
            display: inline-block;
            width: 20px;
            text-align: center;
            color: var(--text-muted);
            transition: transform 0.2s;
        }
        .creator-expand-icon.expanded {
            transform: rotate(90deg);
        }
        .creator-group-detail {
            background: var(--bg-secondary);
        }
        .creator-group-detail table {
            border-collapse: collapse;
        }
        .creator-group-detail table tr:hover {
            background: var(--bg-card);
        }
        .creator-group-detail table th {
            text-align: left;
            font-weight: 600;
            color: var(--text-muted);
            font-size: 0.75rem;
            text-transform: uppercase;
        }

        /* ==================== PRODUCT CREATOR BREAKDOWN ==================== */
        .product-row {
            cursor: pointer;
            transition: background 0.15s;
        }
        .product-row:hover {
            background: var(--bg-secondary);
        }
        .product-row--expanded {
            background: var(--bg-secondary);
            border-left: 3px solid var(--accent);
        }
        .product-expand-icon {
            display: inline-block;
            width: 20px;
            text-align: center;
            color: var(--text-muted);
            font-size: 0.75rem;
            transition: transform 0.2s;
        }
        .product-detail-row {
            background: var(--bg-card);
        }
        .product-detail-row td {
            padding: 0 !important;
        }
        .product-creators-container {
            padding: 16px 20px;
            background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-card) 100%);
            border-top: 1px solid var(--border);
        }
        .product-creators-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        .product-creators-title {
            font-weight: 600;
            font-size: 0.9rem;
            color: var(--text-primary);
        }
        .product-creators-count {
            font-size: 0.8rem;
            color: var(--text-muted);
        }
        .product-creators-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 10px;
        }
        .product-creator-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 8px;
            transition: all 0.15s;
        }
        .product-creator-item:hover {
            border-color: var(--accent);
            transform: translateY(-1px);
        }
        .product-creator-item--managed {
            border-left: 3px solid var(--success);
        }
        .product-creator-rank {
            font-size: 1rem;
            min-width: 28px;
            text-align: center;
            color: var(--text-muted);
        }
        .product-creator-info {
            flex: 1;
            min-width: 0;
        }
        .product-creator-name {
            font-weight: 500;
            font-size: 0.85rem;
            color: var(--text-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .product-creator-badge {
            font-size: 0.65rem;
            padding: 2px 6px;
            background: var(--success);
            color: #fff;
            border-radius: 4px;
            font-weight: 600;
            white-space: nowrap;
        }
        .product-creator-stats {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-top: 2px;
        }
        .product-creator-gmv {
            text-align: right;
        }
        .product-creator-gmv-value {
            font-weight: 600;
            font-size: 0.9rem;
            color: var(--success);
            font-family: 'Space Mono', monospace;
        }
        .product-creator-gmv-pct {
            font-size: 0.7rem;
            color: var(--text-muted);
        }
        .product-creators-loading {
            padding: 20px;
            text-align: center;
            color: var(--text-muted);
        }
        .product-creators-empty {
            padding: 20px;
            text-align: center;
            color: var(--text-muted);
            font-style: italic;
        }
        .product-creators-more {
            margin-top: 10px;
            padding: 8px;
            text-align: center;
            font-size: 0.8rem;
            color: var(--text-muted);
            background: var(--bg-secondary);
            border-radius: 6px;
        }

        /* Last Refreshed Timestamp */
        .last-refreshed {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-left: auto;
            padding: 6px 12px;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 6px;
            font-size: 0.75rem;
            color: var(--text-muted);
        }
        .last-refreshed__icon {
            font-size: 0.8rem;
            opacity: 0.7;
        }
        .last-refreshed__text {
            font-family: var(--font-mono, monospace);
        }
        .last-refreshed--loading .last-refreshed__icon {
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .btn-outline-danger {
            background: transparent;
            border: 1px solid var(--danger);
            color: var(--danger);
        }
        .btn-outline-danger:hover {
            background: var(--danger);
            color: #fff;
        }

        .btn-warning {
            background: var(--warning);
            color: #000;
        }
        .btn-warning:hover {
            filter: brightness(1.1);
        }

        .btn-sm { padding: 6px 12px; font-size: 0.8rem; }
        
        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none !important;
        }
        
        .btn-loading {
            pointer-events: none;
            position: relative;
        }
        .btn-loading::before {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            border: 2px solid transparent;
            border-top-color: currentColor;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin-right: 8px;
        }

        .card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            margin-bottom: 24px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;
            border-bottom: 1px solid var(--border);
            background: var(--bg-card);
        }

        .card-title { font-size: 0.95rem; font-weight: 600; display: flex; align-items: center; gap: 10px; }
        .card-body { padding: 22px; }
        .card-body.no-padding { padding: 0; }

        .table-container { overflow-x: auto; }

        table { width: 100%; border-collapse: collapse; }
        
        /* Clickable links in tables and cards */
        table td a:hover, .card a:hover {
            text-decoration: underline !important;
        }

        th {
            text-align: left;
            padding: 12px 16px;
            font-size: 0.7rem;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-bottom: 1px solid var(--border);
            background: var(--bg-secondary);
            white-space: nowrap;
            cursor: pointer;
            transition: color 0.15s, background 0.15s;
            position: sticky;
            top: 0;
            z-index: 10;
        }

        th:hover { color: var(--accent); background: var(--bg-tertiary); }
        th.sorted { color: var(--accent); }
        th.sorted::after { content: ' ▼'; font-size: 0.6rem; }
        th.sorted.asc::after { content: ' ▲'; }

        td {
            padding: 14px 16px;
            font-size: 0.85rem;
            border-bottom: 1px solid var(--border);
            white-space: nowrap;
            transition: background 0.15s, transform 0.15s;
        }

        /* Zebra striping */
        tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.01); }
        
        /* Hover effect */
        tbody tr { transition: background 0.15s; }
        tbody tr:hover td { background: var(--bg-card-hover); }
        tbody tr:hover { transform: translateX(2px); }
        tr.clickable { cursor: pointer; }
        
        /* Row selection state */
        tbody tr.selected td { background: var(--accent-dim) !important; }
        tbody tr.highlighted td { 
            background: linear-gradient(90deg, var(--accent-dim), transparent) !important;
            animation: highlightFade 2s ease-out forwards;
        }
        @keyframes highlightFade {
            0% { background: var(--accent-dim); }
            100% { background: transparent; }
        }
        
        /* Row status states for validation */
        tbody tr.row-warning td { 
            background: rgba(239, 68, 68, 0.05) !important; 
        }
        tbody tr.row-warning:hover td { 
            background: rgba(239, 68, 68, 0.1) !important; 
        }
        tbody tr.row-muted td { 
            opacity: 0.6; 
        }
        tbody tr.row-success td {
            background: rgba(34, 197, 94, 0.05) !important;
        }

        .creator-cell { display: flex; align-items: center; gap: 12px; }

        .creator-avatar {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            background: linear-gradient(135deg, var(--accent-dim), rgba(255, 77, 141, 0.05));
            border: 1px solid rgba(255, 77, 141, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.85rem;
            color: var(--accent);
            overflow: hidden;
        }

        .creator-avatar img,
        .creator-avatar-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px;
        }

        .creator-info { display: flex; flex-direction: column; }
        .creator-name { font-weight: 600; color: var(--text-primary); }
        .creator-handle { font-size: 0.75rem; color: var(--text-muted); }

        .badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
        }

        .badge-managed { background: var(--success-dim); color: var(--success); }
        .badge-unmanaged { background: var(--bg-secondary); color: var(--text-muted); border: 1px solid var(--border); }

        .badge-tier { padding: 4px 10px; border-radius: 6px; font-size: 0.7rem; font-weight: 700; }
        .tier-bronze { background: linear-gradient(135deg, #cd7f32, #a0522d); color: #fff; }
        .tier-silver { background: linear-gradient(135deg, #c0c0c0, #a8a8a8); color: #000; }
        .tier-gold { background: linear-gradient(135deg, #ffd700, #ffaa00); color: #000; }
        .tier-platinum { background: linear-gradient(135deg, #e5e4e2, #b8b8b8); color: #000; }
        .tier-diamond { background: linear-gradient(135deg, #b9f2ff, #00d4ff); color: #000; }
        .tier-ruby { background: linear-gradient(135deg, #e0115f, #c41048); color: #fff; }
        .tier-new { background: var(--bg-secondary); color: var(--text-muted); border: 1px dashed var(--border); }

        .badge-brand {
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 0.7rem;
            font-weight: 600;
            background: var(--bg-secondary);
            color: var(--text-secondary);
            border: 1px solid var(--border);
        }

        /* Unified number styling - monospace for consistent alignment */
        .gmv-value {
            font-family: 'Space Mono', monospace;
            font-weight: 600;
            font-size: 0.95rem;
            letter-spacing: -0.02em;
        }
        .gmv-high { color: var(--success); }
        .gmv-medium { color: var(--accent); }
        .gmv-low { color: var(--text-secondary); }

        /* Number variants for different contexts */
        .number-value {
            font-family: 'Space Mono', monospace;
            font-weight: 600;
        }
        .number-large {
            font-family: 'Space Mono', monospace;
            font-weight: 700;
            font-size: 1.5rem;
        }

        .trend-indicator { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 0.8rem; }
        .trend-up { color: var(--success); }
        .trend-down { color: var(--danger); }
        .trend-neutral { color: var(--text-muted); }

        .action-btn {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            transition: all 0.2s;
            margin-right: 4px;
        }

        .action-btn.add { background: var(--success-dim); color: var(--success); }
        .action-btn.add:hover { background: var(--success); color: #fff; }
        .action-btn.remove { background: var(--danger-dim); color: var(--danger); }
        .action-btn.remove:hover { background: var(--danger); color: #fff; }
        .action-btn.view { background: var(--blue-dim); color: var(--blue); }
        .action-btn.view:hover { background: var(--blue); color: #fff; }

        .grid-2 { display: grid; grid-template-columns: 1fr 360px; gap: 24px; }
        .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
        .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
        .grid-equal { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

        @media (max-width: 1400px) {
            .grid-4 { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 1200px) {
            .grid-2, .grid-3, .grid-4, .grid-equal { grid-template-columns: 1fr; }
        }

        .leaderboard-item {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 16px 18px;
            border-bottom: 1px solid var(--border);
            transition: all 0.2s;
            cursor: pointer;
        }

        .leaderboard-item:last-child { border-bottom: none; }
        .leaderboard-item:hover { background: var(--bg-card-hover); }

        .leaderboard-rank {
            width: 34px;
            height: 34px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 0.85rem;
        }

        .rank-1 { background: linear-gradient(135deg, #ffd700, #ffaa00); color: #000; }
        .rank-2 { background: linear-gradient(135deg, #c0c0c0, #a0a0a0); color: #000; }
        .rank-3 { background: linear-gradient(135deg, #cd7f32, #a0522d); color: #fff; }
        .rank-other { background: var(--bg-secondary); color: var(--text-muted); }

        .leaderboard-info { flex: 1; }
        .leaderboard-name { font-weight: 600; font-size: 0.9rem; }
        .leaderboard-brand { font-size: 0.75rem; color: var(--text-muted); }
        .leaderboard-gmv { font-family: 'Space Mono', monospace; font-weight: 700; color: var(--accent); }

        .alert-item {
            display: flex;
            gap: 14px;
            padding: 16px;
            border-bottom: 1px solid var(--border);
            transition: background 0.2s;
        }

        .alert-item:hover { background: var(--bg-card-hover); }
        .alert-item:last-child { border-bottom: none; }

        .alert-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        .alert-icon.warning { background: var(--warning-dim); }
        .alert-icon.danger { background: var(--danger-dim); }
        .alert-icon.success { background: var(--success-dim); }
        .alert-icon.info { background: var(--blue-dim); }

        .alert-content { flex: 1; }
        .alert-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 4px; }
        .alert-message { font-size: 0.8rem; color: var(--text-secondary); }
        .alert-time { font-size: 0.75rem; color: var(--text-muted); margin-top: 6px; }

        .progress-bar {
            width: 100%;
            height: 8px;
            background: var(--bg-secondary);
            border-radius: 4px;
            overflow: hidden;
            margin-top: 8px;
        }

        .progress-fill {
            height: 100%;
            border-radius: 4px;
            transition: width 0.3s;
        }

        .progress-fill.green { background: var(--success); }
        .progress-fill.yellow { background: var(--accent); }
        .progress-fill.red { background: var(--danger); }

        .brand-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 20px;
            transition: all 0.2s;
        }

        .brand-card:hover { border-color: var(--accent); }

        .brand-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
        .brand-name { font-size: 1.1rem; font-weight: 700; }
        .brand-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
        .brand-stat { text-align: center; }
        .brand-stat-value { font-size: 1.25rem; font-weight: 700; font-family: 'Space Mono', monospace; }
        .brand-stat-label { font-size: 0.75rem; color: var(--text-muted); }

        /* Brand Comparison Grid - 5 columns for 5 brands */
        .brand-comparison-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 16px;
        }
        @media (max-width: 1400px) {
            .brand-comparison-grid { grid-template-columns: repeat(3, 1fr); }
        }
        @media (max-width: 900px) {
            .brand-comparison-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 600px) {
            .brand-comparison-grid { grid-template-columns: 1fr; }
        }
        .brand-comparison-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 16px;
            text-align: center;
            transition: all 0.2s;
        }
        .brand-comparison-card:hover {
            border-color: var(--accent);
            transform: translateY(-2px);
        }
        .brand-comparison-card.top-performer {
            border-color: var(--accent);
            background: linear-gradient(135deg, rgba(255, 77, 141, 0.1) 0%, var(--bg-card) 100%);
        }
        .brand-comparison-card .brand-title {
            font-size: 0.95rem;
            font-weight: 600;
            margin-bottom: 12px;
            color: var(--text-primary);
        }
        .brand-comparison-card .brand-gmv {
            font-size: 1.5rem;
            font-weight: 700;
            font-family: 'Space Mono', monospace;
            color: var(--accent);
            margin-bottom: 4px;
        }
        .brand-comparison-card .brand-change {
            font-size: 0.85rem;
            font-weight: 500;
            margin-bottom: 12px;
        }
        .brand-comparison-card .brand-mini-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
            font-size: 0.8rem;
            color: var(--text-muted);
        }
        .brand-comparison-card .brand-mini-stats span {
            background: var(--bg-secondary);
            padding: 6px 8px;
            border-radius: 6px;
        }

        .loading { display: flex; align-items: center; justify-content: center; padding: 60px; color: var(--text-muted); }

        .spinner {
            width: 24px;
            height: 24px;
            border: 3px solid var(--border);
            border-top-color: var(--accent);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin-right: 12px;
        }
        
        .spinner-lg {
            width: 48px;
            height: 48px;
            border-width: 4px;
            margin: 0 auto;
        }

        @keyframes spin { to { transform: rotate(360deg); } }
        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
        @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }
        
        /* Loading overlay for views - Enhanced */
        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(10, 10, 15, 0.97);
            backdrop-filter: blur(4px);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 100;
            border-radius: 12px;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        
        .loading-overlay.hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        /* Standalone loading spinner for modals */
        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 3px solid var(--border);
            border-top-color: var(--accent);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto;
        }

        .loading-overlay .loading-spinner-container {
            position: relative;
            width: 60px;
            height: 60px;
            margin-bottom: 20px;
        }
        
        .loading-overlay .spinner-ring {
            position: absolute;
            width: 100%;
            height: 100%;
            border: 3px solid var(--border);
            border-radius: 50%;
        }
        
        .loading-overlay .spinner-ring-active {
            border-color: transparent;
            border-top-color: var(--accent);
            animation: spin 1s linear infinite;
        }
        
        .loading-overlay .spinner-ring-pulse {
            border-color: var(--accent);
            opacity: 0.2;
            animation: pulse 2s ease-in-out infinite;
        }
        
        .loading-overlay .loading-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.5rem;
            animation: pulse 1.5s ease-in-out infinite;
        }
        
        .loading-overlay .loading-text {
            color: var(--text-primary);
            font-size: 1rem;
            font-weight: 500;
            margin-bottom: 8px;
        }
        
        .loading-overlay .loading-subtext {
            color: var(--text-muted);
            font-size: 0.85rem;
            opacity: 0.8;
        }
        
        .loading-overlay .loading-dots {
            display: flex;
            gap: 6px;
            margin-top: 16px;
        }
        
        .loading-overlay .loading-dot {
            width: 8px;
            height: 8px;
            background: var(--accent);
            border-radius: 50%;
            animation: bounce 1.4s infinite ease-in-out both;
        }
        
        .loading-overlay .loading-dot:nth-child(1) { animation-delay: -0.32s; }
        .loading-overlay .loading-dot:nth-child(2) { animation-delay: -0.16s; }
        .loading-overlay .loading-dot:nth-child(3) { animation-delay: 0s; }
        
        /* Card-level loading */
        .card-loading {
            position: relative;
            min-height: 200px;
        }
        
        .card-loading::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--bg-card);
            opacity: 0.8;
            z-index: 10;
        }
        
        /* Skeleton loading animation */
        .skeleton {
            background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-card) 50%, var(--bg-secondary) 75%);
            background-size: 200% 100%;
            animation: skeleton-loading 1.5s infinite;
            border-radius: 4px;
        }
        
        @keyframes skeleton-loading {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        
        .skeleton-text {
            height: 16px;
            margin-bottom: 8px;
        }
        
        .skeleton-stat {
            height: 32px;
            width: 120px;
        }
        
        /* Utility Animation Classes */
        .fade-in {
            animation: fadeIn 0.3s ease-out forwards;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .slide-in-right {
            animation: slideInRight 0.3s ease-out forwards;
        }
        @keyframes slideInRight {
            from { opacity: 0; transform: translateX(20px); }
            to { opacity: 1; transform: translateX(0); }
        }
        
        .slide-in-up {
            animation: slideInUp 0.3s ease-out forwards;
        }
        @keyframes slideInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .scale-in {
            animation: scaleIn 0.2s ease-out forwards;
        }
        @keyframes scaleIn {
            from { opacity: 0; transform: scale(0.95); }
            to { opacity: 1; transform: scale(1); }
        }
        
        .data-refreshed {
            animation: dataRefresh 0.6s ease-out;
        }
        @keyframes dataRefresh {
            0% { background: var(--accent-dim); }
            100% { background: transparent; }
        }
        
        .shake {
            animation: shake 0.5s ease-in-out;
        }
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            20%, 60% { transform: translateX(-5px); }
            40%, 80% { transform: translateX(5px); }
        }
        
        .success-pulse {
            animation: successPulse 0.5s ease-out;
        }
        @keyframes successPulse {
            0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
            100% { box-shadow: 0 0 0 20px rgba(34, 197, 94, 0); }
        }
        
        /* Number counter animation */
        .count-up {
            transition: all 0.4s ease-out;
        }
        
        /* Staggered list animations */
        .stagger-item {
            opacity: 0;
            animation: staggerIn 0.3s ease-out forwards;
        }
        .stagger-item:nth-child(1) { animation-delay: 0.05s; }
        .stagger-item:nth-child(2) { animation-delay: 0.1s; }
        .stagger-item:nth-child(3) { animation-delay: 0.15s; }
        .stagger-item:nth-child(4) { animation-delay: 0.2s; }
        .stagger-item:nth-child(5) { animation-delay: 0.25s; }
        @keyframes staggerIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* Notification Badge with Pulse */
        .notification-badge {
            position: relative;
            display: inline-flex;
        }
        .notification-badge::after {
            content: attr(data-count);
            position: absolute;
            top: -8px;
            right: -8px;
            min-width: 18px;
            height: 18px;
            background: var(--danger);
            color: #fff;
            font-size: 0.65rem;
            font-weight: 700;
            border-radius: 9px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 4px;
            animation: badgePop 0.3s ease-out;
        }
        .notification-badge[data-count="0"]::after {
            display: none;
        }
        .notification-badge.pulse::after {
            animation: badgePulse 2s infinite;
        }
        @keyframes badgePop {
            0% { transform: scale(0); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }
        @keyframes badgePulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
            50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
        }
        
        /* Data Refresh Indicator */
        .refresh-indicator {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 0.75rem;
            color: var(--text-muted);
            padding: 4px 10px;
            background: var(--bg-secondary);
            border-radius: 20px;
            transition: all 0.2s;
        }
        .refresh-indicator.refreshing {
            color: var(--accent);
        }
        .refresh-indicator.refreshing .refresh-icon {
            animation: spin 1s linear infinite;
        }
        .refresh-indicator.success {
            color: var(--success);
            background: var(--success-dim);
        }
        .refresh-icon {
            transition: transform 0.2s;
        }
        .refresh-indicator:hover .refresh-icon {
            transform: rotate(180deg);
        }
        
        /* Breadcrumb Navigation */
        .breadcrumb {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-bottom: 16px;
        }
        .breadcrumb-item {
            color: var(--text-muted);
            text-decoration: none;
            transition: color 0.15s;
        }
        .breadcrumb-item:hover {
            color: var(--accent);
        }
        .breadcrumb-item.active {
            color: var(--text-primary);
            font-weight: 500;
        }
        .breadcrumb-separator {
            color: var(--text-muted);
            opacity: 0.5;
        }
        
        /* Enhanced Tab Styling */
        .tabs {
            display: flex;
            gap: 4px;
            border-bottom: 1px solid var(--border);
            margin-bottom: 20px;
            padding-bottom: 0;
        }
        .tabs-container {
            display: flex;
            gap: 4px;
            border-bottom: 1px solid var(--border);
            margin-bottom: 20px;
            padding-bottom: 0;
        }
        .tab {
            padding: 12px 20px;
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            position: relative;
            transition: all 0.2s;
        }
        .tab::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--accent);
            transform: scaleX(0);
            transition: transform 0.2s ease;
        }
        .tab:hover {
            color: var(--text-primary);
        }
        .tab.active {
            color: var(--accent);
        }
        .tab.active::after {
            transform: scaleX(1);
        }
        .tab-count {
            background: var(--bg-secondary);
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 0.7rem;
            margin-left: 8px;
        }
        .tab.active .tab-count {
            background: var(--accent-dim);
            color: var(--accent);
        }
        
        /* Quick Stats Mini Cards */
        .quick-stat {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            background: var(--bg-secondary);
            border-radius: 8px;
            font-size: 0.8rem;
        }
        .quick-stat-icon {
            font-size: 1rem;
        }
        .quick-stat-value {
            font-weight: 700;
            font-family: 'Space Mono', monospace;
        }
        .quick-stat-label {
            color: var(--text-muted);
        }
        
        /* Collapsible Section */
        .collapsible-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            padding: 12px 16px;
            background: var(--bg-secondary);
            border-radius: 8px;
            transition: all 0.2s;
        }
        .collapsible-header:hover {
            background: var(--bg-tertiary);
        }
        .collapsible-icon {
            transition: transform 0.3s ease;
        }
        .collapsible.open .collapsible-icon {
            transform: rotate(180deg);
        }
        .collapsible-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease, padding 0.3s ease;
        }
        .collapsible.open .collapsible-content {
            max-height: 1000px;
            padding-top: 12px;
        }
        
        /* Hover Card Preview */
        .hover-card-trigger {
            position: relative;
        }
        .hover-card {
            position: absolute;
            bottom: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%) translateY(4px);
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 16px;
            min-width: 280px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.4);
            opacity: 0;
            visibility: hidden;
            transition: all 0.2s ease;
            z-index: 100;
        }
        .hover-card-trigger:hover .hover-card {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }
        
        /* Comparison Indicator */
        .comparison {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 0.75rem;
            padding: 2px 8px;
            border-radius: 4px;
        }
        .comparison.better {
            background: var(--success-dim);
            color: var(--success);
        }
        .comparison.worse {
            background: var(--danger-dim);
            color: var(--danger);
        }
        .comparison.neutral {
            background: var(--bg-secondary);
            color: var(--text-muted);
        }
        
        /* Sparkline Placeholder */
        .sparkline {
            width: 80px;
            height: 24px;
            display: inline-block;
            vertical-align: middle;
        }
        
        /* Text Truncate with Tooltip */
        .text-truncate {
            max-width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .text-truncate:hover {
            overflow: visible;
            white-space: normal;
            position: relative;
            z-index: 10;
            background: var(--bg-card);
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            padding: 4px 8px;
            margin: -4px -8px;
            border-radius: 4px;
        }

        /* Enhanced Empty States */
        .empty-state { 
            text-align: center; 
            padding: 60px 20px; 
            color: var(--text-muted);
            animation: fadeInUp 0.4s ease-out;
        }
        .empty-state .icon { 
            font-size: 4rem; 
            margin-bottom: 20px; 
            opacity: 0.6;
            animation: float 3s ease-in-out infinite;
        }
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .empty-state h3 { 
            color: var(--text-secondary); 
            margin-bottom: 8px;
            font-size: 1.1rem;
        }
        .empty-state p {
            color: var(--text-muted);
            font-size: 0.9rem;
            max-width: 300px;
            margin: 0 auto 20px;
        }
        .empty-state .btn {
            margin-top: 12px;
        }

        /* Enhanced Toast Notifications */
        /* z-index must be higher than modals (999999) to show on top */
        .toast {
            position: fixed;
            bottom: 24px;
            right: 24px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-left: 4px solid var(--accent);
            padding: 0;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            min-width: 320px;
            max-width: 420px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);
            transform: translateX(120%);
            opacity: 0;
            transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            z-index: 10000000;
            overflow: hidden;
        }
        .toast-content {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px 20px;
        }
        .toast-icon {
            font-size: 1.4rem;
            flex-shrink: 0;
        }
        .toast-message {
            flex: 1;
            font-size: 0.9rem;
            color: var(--text-primary);
            line-height: 1.4;
        }
        .toast-close {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px;
            font-size: 1.2rem;
            opacity: 0.6;
            transition: opacity 0.15s;
        }
        .toast-close:hover { opacity: 1; }
        .toast-progress {
            height: 3px;
            background: var(--accent);
            width: 100%;
            animation: toastProgress 4s linear forwards;
        }
        @keyframes toastProgress {
            from { width: 100%; }
            to { width: 0%; }
        }

        .toast.show { transform: translateX(0); opacity: 1; }
        .toast.success { border-left-color: var(--success); }
        .toast.success .toast-progress { background: var(--success); }
        .toast.error { border-left-color: var(--danger); }
        .toast.error .toast-progress { background: var(--danger); }
        .toast.warning { border-left-color: var(--warning); }
        .toast.warning .toast-progress { background: var(--warning); }
        .toast.info { border-left-color: var(--blue); }
        .toast.info .toast-progress { background: var(--blue); }
        
        /* Filter Select Polish */
        .filter-select {
            padding: 10px 14px;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-primary);
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.2s ease;
            min-width: 130px;
        }
        .filter-select:hover {
            border-color: var(--text-muted);
            background: var(--bg-card);
        }
        .filter-select:focus {
            outline: none;
            border-color: var(--accent);
            background: var(--bg-card);
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
        }
        
        /* Stat card hover for clickable ones */
        .stat-card[onclick]:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        
        /* Scroll to Top Button */
        .scroll-to-top {
            position: fixed;
            bottom: 24px;
            left: 24px;
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            color: var(--text-muted);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            opacity: 0;
            visibility: hidden;
            transform: translateY(20px);
            transition: all 0.3s;
            z-index: 998;
        }
        .scroll-to-top.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        .scroll-to-top:hover {
            background: var(--accent);
            color: #000;
            border-color: var(--accent);
        }
        
        @media (max-width: 768px) {
            .scroll-to-top {
                bottom: 80px; /* Above mobile nav */
            }
        }

        .search-input {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            color: var(--text-primary);
            padding: 10px 40px 10px 40px;
            border-radius: 8px;
            font-size: 0.85rem;
            font-family: inherit;
            width: 280px;
            transition: all 0.2s ease;
        }
        .search-input:hover {
            border-color: var(--border-light);
        }
        .search-input:focus {
            width: 320px;
            background: var(--bg-card);
        }
        .search-input::placeholder {
            color: var(--text-muted);
            transition: color 0.2s;
        }
        .search-input:focus::placeholder {
            color: transparent;
        }

        .search-wrapper { 
            position: relative;
            display: inline-flex;
            align-items: center;
        }
        .search-wrapper::before {
            content: "🔍";
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 0.85rem;
            opacity: 0.6;
            transition: opacity 0.2s;
            pointer-events: none;
        }
        .search-wrapper:focus-within::before {
            opacity: 1;
        }
        .search-clear {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            background: var(--bg-tertiary);
            border: none;
            color: var(--text-muted);
            width: 20px;
            height: 20px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: all 0.2s;
        }
        .search-wrapper:focus-within .search-clear,
        .search-input:not(:placeholder-shown) + .search-clear {
            opacity: 1;
        }
        .search-clear:hover {
            background: var(--danger);
            color: #fff;
        }
        
        /* Keyboard shortcut hint in search */
        .search-hint {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            background: var(--bg-tertiary);
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 0.65rem;
            color: var(--text-muted);
            font-family: monospace;
            pointer-events: none;
            transition: opacity 0.2s;
        }
        .search-input:focus ~ .search-hint,
        .search-input:not(:placeholder-shown) ~ .search-hint {
            opacity: 0;
        }
        
        /* Row Actions (appear on hover) */
        .row-actions {
            opacity: 0;
            transition: opacity 0.15s;
            display: flex;
            gap: 4px;
        }
        tr:hover .row-actions {
            opacity: 1;
        }
        .row-action-btn {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            color: var(--text-muted);
            padding: 4px 8px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.75rem;
            transition: all 0.15s;
        }
        .row-action-btn:hover {
            background: var(--accent);
            color: #000;
            border-color: var(--accent);
        }
        .row-action-btn.danger:hover {
            background: var(--danger);
            border-color: var(--danger);
            color: #fff;
        }
        
        /* Inline Edit Input */
        .inline-edit {
            background: transparent;
            border: 1px dashed transparent;
            padding: 4px 8px;
            margin: -4px -8px;
            border-radius: 4px;
            transition: all 0.15s;
            cursor: text;
        }
        .inline-edit:hover {
            border-color: var(--border);
            background: var(--bg-secondary);
        }
        .inline-edit:focus {
            border-style: solid;
            border-color: var(--accent);
            background: var(--bg-card);
            outline: none;
        }
        
        /* Number highlight animation */
        .number-highlight {
            display: inline-block;
            transition: all 0.3s ease;
        }
        .number-highlight.updated {
            animation: numberPop 0.4s ease-out;
        }
        @keyframes numberPop {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); color: var(--accent); }
            100% { transform: scale(1); }
        }
        
        /* Trend arrows with animation */
        .trend-arrow {
            display: inline-block;
            font-weight: 600;
        }
        .trend-arrow.up {
            color: var(--success);
            animation: trendUp 0.5s ease-out;
        }
        .trend-arrow.down {
            color: var(--danger);
            animation: trendDown 0.5s ease-out;
        }
        @keyframes trendUp {
            0% { transform: translateY(4px); opacity: 0; }
            100% { transform: translateY(0); opacity: 1; }
        }
        @keyframes trendDown {
            0% { transform: translateY(-4px); opacity: 0; }
            100% { transform: translateY(0); opacity: 1; }
        }

        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(18, 20, 26, 0.9);
            backdrop-filter: blur(4px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }

        .modal-overlay.show {
            display: flex !important;
        }

        /* Fix: Make inner .modal visible when overlay has .show class */
        /* Overrides shared/css/components.css opacity/visibility defaults */
        .modal-overlay.show .modal {
            opacity: 1 !important;
            visibility: visible !important;
        }

        .modal-content {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            width: 90%;
            max-width: 500px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        }
        
        .modal-content .modal-header {
            padding: 20px 24px;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .modal-content .modal-header h3 {
            margin: 0;
            font-size: 1.1rem;
        }
        
        .modal-content .modal-body {
            padding: 20px 24px;
        }
        
        .tab-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 18px;
            height: 18px;
            padding: 0 5px;
            margin-left: 6px;
            font-size: 0.7rem;
            font-weight: 700;
            color: white;
            background: var(--danger);
            border-radius: 10px;
        }
        
        .users-tab-content {
            animation: fadeIn 0.2s ease;
        }
        
        /* Modal - centered with fixed positioning */
        .modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            width: calc(100% - 40px);
            max-width: 700px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            z-index: 1001;
        }

        .modal-header {
            padding: 20px 24px;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            background: var(--bg-card);
            z-index: 10;
        }

        .modal-title { font-size: 1.1rem; font-weight: 700; }
        .modal-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.3rem; }
        .modal-close:hover { color: var(--text-primary); }

        /* Confirm Modal */
        .confirm-modal-content,
        .prompt-modal-content {
            max-width: 400px;
            animation: modalSlideIn 0.2s ease-out;
        }

        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: scale(0.95) translateY(-10px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        .confirm-modal-header,
        .prompt-modal-header {
            padding: 20px 24px 12px;
        }

        .confirm-modal-header h3,
        .prompt-modal-header h3 {
            margin: 0;
            font-size: 1.1rem;
            font-weight: 700;
        }

        .confirm-modal-body,
        .prompt-modal-body {
            padding: 0 24px 20px;
        }

        .confirm-modal-body p,
        .prompt-modal-body p {
            margin: 0 0 16px;
            color: var(--text-secondary);
            line-height: 1.5;
        }

        .prompt-modal-body input {
            width: 100%;
            padding: 12px 14px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--bg-secondary);
            color: var(--text-primary);
            font-size: 0.95rem;
            transition: border-color 0.2s;
        }

        .prompt-modal-body input:focus {
            outline: none;
            border-color: var(--accent);
        }

        .confirm-modal-actions,
        .prompt-modal-actions {
            display: flex;
            gap: 12px;
            justify-content: flex-end;
            padding: 16px 24px;
            border-top: 1px solid var(--border);
            background: var(--bg-tertiary);
            border-radius: 0 0 16px 16px;
        }

        .confirm-modal-actions .btn,
        .prompt-modal-actions .btn {
            padding: 10px 20px;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-secondary {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            color: var(--text-primary);
        }

        .btn-secondary:hover {
            background: var(--bg-tertiary);
            border-color: var(--text-muted);
        }

        .btn-danger {
            background: var(--danger);
            border: 1px solid var(--danger);
            color: white;
        }

        .btn-danger:hover {
            background: #c0392b;
            border-color: #c0392b;
        }

        .btn-warning {
            background: var(--warning);
            border: 1px solid var(--warning);
            color: #1a1a1a;
        }

        .btn-warning:hover {
            background: #e0a800;
            border-color: #e0a800;
        }

        .btn-primary {
            background: var(--accent);
            border: 1px solid var(--accent);
            color: #1a1a1a;
        }

        .btn-primary:hover {
            background: #d4a917;
            border-color: #d4a917;
        }

        .smart-match-tab {
            padding: 12px 20px;
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            font-size: 0.9rem;
            border-bottom: 2px solid transparent;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .smart-match-tab:hover { color: var(--text-primary); background: var(--bg-tertiary); }
        .smart-match-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
        .smart-match-tab .tab-count {
            background: var(--bg-tertiary);
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 0.75rem;
        }
        .smart-match-tab.active .tab-count { background: var(--accent-dim); color: var(--accent); }
        
        .match-card {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 16px;
            margin-bottom: 12px;
            transition: all 0.2s;
        }
        .match-card:hover { border-color: var(--accent); }
        .match-card.selected { border-color: var(--accent); background: var(--accent-dim); }
        .match-card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 12px;
        }
        .match-confidence {
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 600;
        }
        .match-confidence.high { background: var(--success-dim); color: var(--success); }
        .match-confidence.medium { background: var(--warning-dim); color: var(--warning); }
        .match-confidence.low { background: var(--bg-tertiary); color: var(--text-muted); }
        .modal-body { padding: 24px; }

        .detail-header { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }

        .detail-avatar {
            width: 80px;
            height: 80px;
            border-radius: 16px;
            background: linear-gradient(135deg, var(--accent-dim), rgba(255, 77, 141, 0.05));
            border: 2px solid var(--accent);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 2rem;
            color: var(--accent);
        }

        .detail-info { flex: 1; }
        .detail-name { font-size: 1.5rem; font-weight: 700; margin-bottom: 4px; }
        .detail-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

        .detail-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }

        .detail-stat {
            background: var(--bg-secondary);
            border-radius: 10px;
            padding: 16px;
            text-align: center;
        }

        .detail-stat-value { font-size: 1.5rem; font-weight: 700; font-family: 'Space Mono', monospace; }
        .detail-stat-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }

        .tabs { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }

        .tab-btn {
            padding: 8px 16px;
            border: none;
            background: transparent;
            color: var(--text-secondary);
            font-size: 0.85rem;
            font-weight: 500;
            cursor: pointer;
            border-radius: 6px;
            transition: all 0.2s;
            font-family: inherit;
        }

        .tab-btn.active { background: var(--accent); color: #000; }
        .tab-btn:hover:not(.active) { color: var(--text-primary); background: var(--bg-secondary); }

        .form-group { margin-bottom: 18px; }
        .form-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
        .form-input {
            width: 100%;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            color: var(--text-primary);
            padding: 12px 14px;
            border-radius: 8px;
            font-size: 0.9rem;
            font-family: inherit;
        }
        .form-input:focus { outline: none; border-color: var(--accent); }

        .form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

        .modal-footer {
            padding: 16px 24px;
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: flex-end;
            gap: 12px;
        }

        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            padding: 16px;
            border-top: 1px solid var(--border);
        }

        .pagination-btn {
            padding: 8px 14px;
            border-radius: 6px;
            border: 1px solid var(--border);
            background: var(--bg-card);
            color: var(--text-secondary);
            cursor: pointer;
            font-family: inherit;
            font-size: 0.85rem;
        }

        .pagination-btn:hover { border-color: var(--accent); }
        .pagination-btn:disabled { opacity: 0.4; cursor: not-allowed; }
        .pagination-info { color: var(--text-muted); font-size: 0.85rem; margin: 0 12px; }

        /* Daily Ops Styles */
        .win-card {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 16px;
            margin-bottom: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .win-card:hover {
            border-color: var(--accent);
            background: var(--bg-card);
        }
        .win-card.copied {
            border-color: var(--success);
            background: var(--success-dim);
        }
        .win-card .win-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 8px;
        }
        .win-card .win-type {
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 4px 10px;
            border-radius: 4px;
        }
        .win-card .win-type.tier { background: var(--purple-dim); color: var(--purple); }
        .win-card .win-type.milestone { background: var(--accent-dim); color: var(--accent); }
        .win-card .win-type.first-sale { background: var(--success-dim); color: var(--success); }
        .win-card .win-type.personal-best { background: var(--blue-dim); color: var(--blue); }
        .win-card .win-type.streak { background: var(--cyan-dim); color: var(--cyan); }
        .win-card .win-brand {
            font-size: 0.75rem;
            color: var(--text-muted);
        }
        .win-card .win-creator {
            font-weight: 600;
            color: var(--text-primary);
            font-size: 1rem;
        }
        .win-card .win-content {
            background: var(--bg-card);
            padding: 12px;
            border-radius: 6px;
            font-family: 'Space Mono', monospace;
            font-size: 0.8rem;
            color: var(--text-secondary);
            white-space: pre-wrap;
            line-height: 1.5;
        }
        .win-card .win-hint {
            font-size: 0.7rem;
            color: var(--text-muted);
            margin-top: 8px;
            text-align: right;
        }

        .spotlight-card {
            background: linear-gradient(135deg, var(--accent-dim), rgba(255, 77, 141, 0.02));
            border: 1px solid rgba(255, 77, 141, 0.3);
            border-radius: 12px;
            padding: 24px;
        }
        .spotlight-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }
        .spotlight-creator {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--accent);
        }
        .spotlight-brand {
            font-size: 0.8rem;
            color: var(--text-muted);
        }
        .spotlight-stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            margin-bottom: 20px;
        }
        .spotlight-stat {
            text-align: center;
            padding: 12px;
            background: var(--bg-secondary);
            border-radius: 8px;
        }
        .spotlight-stat .value {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--text-primary);
        }
        .spotlight-stat .label {
            font-size: 0.7rem;
            color: var(--text-muted);
            text-transform: uppercase;
        }
        .spotlight-reason {
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-bottom: 16px;
            padding: 12px;
            background: var(--bg-secondary);
            border-radius: 8px;
            border-left: 3px solid var(--accent);
        }
        .spotlight-copy {
            background: var(--bg-card);
            padding: 16px;
            border-radius: 8px;
            font-family: 'Space Mono', monospace;
            font-size: 0.8rem;
            white-space: pre-wrap;
            line-height: 1.6;
            color: var(--text-secondary);
        }
        .spotlight-actions {
            display: flex;
            gap: 12px;
            margin-top: 16px;
        }
        .btn-small {
            padding: 6px 12px;
            font-size: 0.8rem;
        }
        
        .btn-tiny {
            padding: 4px 8px;
            font-size: 0.7rem;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .btn-tiny:hover {
            background: var(--bg-secondary);
            border-color: var(--accent);
        }

        /* Action Items */
        .action-item {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 12px 16px;
            margin-bottom: 10px;
        }
        .action-item.win {
            border-left: 3px solid var(--success);
        }
        .action-item.attention {
            border-left: 3px solid var(--warning);
        }
        .action-item .action-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
        }
        .action-item .action-header strong {
            color: var(--text-primary);
        }
        .action-item .gmv {
            color: var(--success);
            font-weight: 600;
        }
        .action-item .prior-gmv {
            color: var(--text-muted);
            font-size: 0.8rem;
        }
        .action-item .action-reasons,
        .action-item .action-issues {
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }
        .action-item .action-buttons {
            display: flex;
            gap: 8px;
        }

        .empty-message {
            color: var(--text-muted);
            font-size: 0.85rem;
            padding: 12px;
            text-align: center;
        }

        /* Brand Action Cards */
        .brand-action-grid, .weekly-brand-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 12px;
        }
        .brand-action-card {
            background: var(--bg-secondary);
            border: 2px solid var(--border);
            border-radius: 12px;
            padding: 16px;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
        }
        .brand-action-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }
        .brand-action-card.completed {
            opacity: 0.6;
        }
        .brand-action-card.completed::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.1);
            border-radius: 12px;
        }
        .brand-action-card.health-great {
            border-color: var(--success);
        }
        .brand-action-card.health-ok {
            border-color: var(--warning);
        }
        .brand-action-card.health-bad {
            border-color: var(--danger);
        }
        .brand-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        .brand-card-header .brand-name {
            font-weight: 600;
            color: var(--text-primary);
        }
        .brand-card-header .complete-badge {
            font-size: 1rem;
        }
        .brand-card-stats {
            margin-bottom: 10px;
        }
        .brand-card-stats .stat {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--text-primary);
        }
        .brand-card-stats .stat-change {
            font-size: 0.8rem;
        }
        .brand-card-stats .stat-change.positive {
            color: var(--success);
        }
        .brand-card-stats .stat-change.negative {
            color: var(--danger);
        }
        .brand-card-actions {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }
        .action-badge {
            font-size: 0.75rem;
            padding: 4px 8px;
            border-radius: 4px;
            font-weight: 500;
        }
        .action-badge.wins {
            background: var(--success-dim);
            color: var(--success);
        }
        .action-badge.attention {
            background: var(--warning-dim);
            color: var(--warning);
        }
        .action-badge.neutral {
            background: var(--bg-card);
            color: var(--text-muted);
        }

        /* Daily Ops Progress Hero */
        .daily-progress-hero {
            background: linear-gradient(135deg, var(--bg-card), var(--bg-secondary));
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 20px 24px;
            margin-bottom: 24px;
        }
        .daily-progress-hero .progress-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        .daily-progress-hero .progress-label {
            font-weight: 600;
            color: var(--text-primary);
            font-size: 0.95rem;
        }
        .daily-progress-hero .progress-count {
            color: var(--accent);
            font-weight: 600;
            font-size: 0.9rem;
        }
        .daily-progress-hero .progress-bar-container {
            height: 10px;
            background: var(--bg-secondary);
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 16px;
        }
        .daily-progress-hero .progress-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--success), var(--accent));
            border-radius: 10px;
            transition: width 0.5s ease;
        }
        .daily-progress-hero .progress-brands {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }
        .daily-progress-hero .brand-check {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 0.85rem;
            color: var(--text-secondary);
        }
        .daily-progress-hero .brand-check:hover {
            border-color: var(--accent);
        }
        .daily-progress-hero .brand-check.completed {
            background: var(--success-dim);
            border-color: var(--success);
            color: var(--success);
        }
        .daily-progress-hero .brand-check input {
            width: 18px;
            height: 18px;
            accent-color: var(--success);
        }

        /* Daily Snapshot Stats */
        .daily-snapshot {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 16px;
        }
        .snapshot-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 20px;
            text-align: center;
        }
        .snapshot-card.primary {
            background: linear-gradient(135deg, var(--accent-dim), rgba(255, 77, 141, 0.05));
            border-color: rgba(255, 77, 141, 0.3);
        }
        .snapshot-card .snapshot-value {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 4px;
        }
        .snapshot-card.primary .snapshot-value {
            color: var(--accent);
        }
        .snapshot-card .snapshot-label {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-muted);
        }
        .snapshot-card .snapshot-change {
            font-size: 0.8rem;
            margin-top: 6px;
            font-weight: 600;
        }
        .snapshot-card .snapshot-change.positive {
            color: var(--success);
        }
        .snapshot-card .snapshot-change.negative {
            color: var(--danger);
        }

        /* Daily Wins Hero */
        .daily-wins-hero {
            border: 2px solid var(--success);
            border-radius: 16px;
        }
        .daily-wins-hero .card-header {
            background: var(--success-dim);
            border-radius: 14px 14px 0 0;
        }
        .wins-list {
            max-height: 500px;
            overflow-y: auto;
            padding: 16px;
        }
        .win-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 16px;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 10px;
            margin-bottom: 10px;
            transition: all 0.2s;
        }
        .win-item:hover {
            border-color: var(--success);
            background: var(--bg-card);
        }
        .win-item.copied {
            border-color: var(--success);
            background: var(--success-dim);
        }
        .win-item .win-info {
            flex: 1;
        }
        .win-item .win-creator {
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 4px;
        }
        .win-item .win-details {
            font-size: 0.85rem;
            color: var(--text-secondary);
        }
        .win-item .win-gmv {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--success);
            margin-right: 16px;
        }
        .win-item .win-actions {
            display: flex;
            gap: 8px;
        }

        @media (max-width: 900px) {
            .daily-snapshot {
                grid-template-columns: repeat(3, 1fr);
            }
            .daily-progress-hero .progress-brands {
                flex-direction: column;
            }
        }
        @media (max-width: 600px) {
            .daily-snapshot {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Win Card in All Wins section */
        .win-card .win-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 8px;
        }
        .win-card .badge-brand {
            background: var(--bg-card);
            color: var(--text-muted);
            font-size: 0.7rem;
            padding: 2px 6px;
            border-radius: 4px;
        }
        .win-card .win-reasons {
            font-size: 0.85rem;
            color: var(--text-secondary);
        }

        /* Spotlight Card (simple version) */
        .spotlight-card {
            background: linear-gradient(135deg, var(--accent-dim), rgba(255, 77, 141, 0.02));
            border: 1px solid rgba(255, 77, 141, 0.3);
            border-radius: 8px;
            padding: 12px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* Table badges */
        .badge-managed {
            background: var(--success-dim);
            color: var(--success);
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.75rem;
        }
        .badge-unmanaged {
            background: var(--bg-card);
            color: var(--text-muted);
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.75rem;
        }
        /* Removed duplicate .gmv-value - defined in main styles with monospace font */
        td.positive {
            color: var(--success);
        }
        td.negative {
            color: var(--danger);
        }
        .brand-kpi-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 16px;
        }
        .brand-kpi-card {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 20px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .brand-kpi-card:hover {
            border-color: var(--accent);
            background: var(--bg-card);
        }
        .brand-kpi-card.copied {
            border-color: var(--success);
            background: var(--success-dim);
        }
        .brand-kpi-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        .brand-kpi-name {
            font-weight: 700;
            font-size: 1rem;
            color: var(--text-primary);
        }
        .brand-kpi-change {
            font-size: 0.8rem;
            font-weight: 600;
            padding: 4px 8px;
            border-radius: 6px;
        }
        .brand-kpi-change.positive {
            background: var(--success-dim);
            color: var(--success);
        }
        .brand-kpi-change.negative {
            background: var(--danger-dim);
            color: var(--danger);
        }
        .brand-kpi-gmv {
            font-size: 1.75rem;
            font-weight: 800;
            color: var(--accent);
            margin-bottom: 16px;
        }
        .brand-kpi-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            padding-top: 12px;
            border-top: 1px solid var(--border);
        }
        .brand-kpi-stats > div {
            text-align: center;
        }
        .brand-kpi-stats .label {
            display: block;
            font-size: 0.7rem;
            color: var(--text-muted);
            text-transform: uppercase;
            margin-bottom: 4px;
        }
        .brand-kpi-stats .value {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        .brand-kpi-hint {
            font-size: 0.7rem;
            color: var(--text-muted);
            text-align: center;
            margin-top: 12px;
        }

        /* Attention List Styles */
        .issue-badge {
            display: inline-block;
            font-size: 0.7rem;
            font-weight: 600;
            padding: 3px 8px;
            border-radius: 4px;
            margin: 2px;
        }
        .issue-badge.severe { background: var(--danger-dim); color: var(--danger); }
        .issue-badge.warning { background: var(--warning-dim); color: var(--warning); }
        .issue-badge.info { background: var(--blue-dim); color: var(--blue); }
        
        .winner-badge {
            display: inline-block;
            font-size: 0.7rem;
            font-weight: 600;
            padding: 3px 8px;
            border-radius: 4px;
            margin: 2px;
            background: var(--success-dim);
            color: var(--success);
        }
        .winner-badge.gold { background: var(--accent-dim); color: var(--accent); }
        .winner-badge.purple { background: var(--purple-dim); color: var(--purple); }
        .winner-badge.blue { background: var(--blue-dim); color: var(--blue); }
        .winner-badge.cyan { background: var(--cyan-dim); color: var(--cyan); }
        
        .status-badge {
            display: inline-block;
            font-size: 0.7rem;
            font-weight: 600;
            padding: 4px 10px;
            border-radius: 4px;
        }
        .status-badge.managed { background: var(--accent-dim); color: var(--accent); }
        .status-badge.unmanaged { background: var(--bg-card); color: var(--text-muted); }

        .change-indicator {
            font-weight: 600;
            font-size: 0.85rem;
        }
        .change-indicator.positive { color: var(--success); }
        .change-indicator.negative { color: var(--danger); }
        .change-indicator.neutral { color: var(--text-muted); }

        /* Brand Detail Styles */
        .brand-detail-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            background: linear-gradient(135deg, var(--accent-dim), rgba(255, 77, 141, 0.02));
            border-radius: 12px;
            margin-bottom: 24px;
        }
        .brand-detail-title {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--accent);
        }
        .brand-detail-subtitle {
            font-size: 0.85rem;
            color: var(--text-muted);
            margin-top: 4px;
        }
        .brand-detail-gmv {
            text-align: right;
        }
        .brand-detail-gmv .value {
            font-size: 2rem;
            font-weight: 800;
            color: var(--text-primary);
        }
        .brand-detail-gmv .change {
            font-size: 0.9rem;
            font-weight: 600;
        }
        .brand-detail-gmv .change.positive { color: var(--success); }
        .brand-detail-gmv .change.negative { color: var(--danger); }

        .brand-metrics-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            margin-bottom: 24px;
        }
        .brand-metric-card {
            background: var(--bg-secondary);
            border-radius: 10px;
            padding: 16px;
            text-align: center;
        }
        .brand-metric-card .value {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-primary);
        }
        .brand-metric-card .label {
            font-size: 0.75rem;
            color: var(--text-muted);
            text-transform: uppercase;
            margin-top: 4px;
        }
        .brand-metric-card .change {
            font-size: 0.8rem;
            margin-top: 6px;
        }

        .filter-select {
            background: var(--bg-card);
            border: 1px solid var(--border);
            color: var(--text-primary);
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 0.85rem;
            cursor: pointer;
        }

        /* Rate Badge for Creator Breakdown */
        .rate-badge {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        .rate-badge.standard {
            background: var(--success-dim);
            color: var(--success);
        }
        .rate-badge.custom {
            background: var(--accent-dim);
            color: var(--accent);
        }
        .rate-badge:hover {
            transform: scale(1.05);
            filter: brightness(1.1);
        }

        /* Task Checklist */
        .task-checklist {
            display: flex;
            align-items: center;
            gap: 20px;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 12px 20px;
            margin-bottom: 24px;
            flex-wrap: wrap;
        }
        .checklist-title {
            font-weight: 700;
            font-size: 0.85rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .checklist-item {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            font-size: 0.9rem;
            color: var(--text-secondary);
            transition: color 0.2s ease;
        }
        .checklist-item:hover {
            color: var(--text-primary);
        }
        .checklist-item input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: var(--success);
            cursor: pointer;
        }
        .checklist-item input[type="checkbox"]:checked + span {
            color: var(--success);
            text-decoration: line-through;
        }
        .checklist-progress {
            flex: 1;
            min-width: 100px;
            max-width: 150px;
            height: 6px;
            background: var(--bg-card);
            border-radius: 3px;
            overflow: hidden;
        }
        .checklist-progress-bar {
            height: 100%;
            background: var(--success);
            transition: width 0.3s ease;
            border-radius: 3px;
        }

        /* Data Health Alert */
        .data-health-alert {
            background: var(--warning-dim);
            border: 1px solid rgba(255, 77, 141, 0.3);
            border-radius: 10px;
            margin-bottom: 16px;
            overflow: hidden;
        }
        .data-health-header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            cursor: pointer;
            transition: background 0.2s;
        }
        .data-health-header:hover {
            background: rgba(255, 77, 141, 0.1);
        }
        .data-health-icon {
            font-size: 1.2rem;
        }
        .data-health-title {
            flex: 1;
            font-size: 0.9rem;
            color: var(--text-primary);
        }
        .data-health-toggle {
            color: var(--text-muted);
            transition: transform 0.2s;
        }
        .data-health-alert.expanded .data-health-toggle {
            transform: rotate(180deg);
        }
        .data-health-details {
            border-top: 1px solid rgba(255, 77, 141, 0.2);
            padding: 12px 16px;
            background: var(--bg-secondary);
        }
        .data-health-table-wrapper {
            overflow-x: auto;
        }
        .data-health-table {
            width: 100%;
            font-size: 0.8rem;
            border-collapse: collapse;
        }
        .data-health-table th,
        .data-health-table td {
            padding: 8px 12px;
            text-align: center;
            border-bottom: 1px solid var(--border);
        }
        .data-health-table th {
            background: var(--bg-card);
            color: var(--text-muted);
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.7rem;
        }
        .data-health-table td:first-child,
        .data-health-table td:nth-child(2) {
            text-align: left;
        }
        .data-health-table .status-ok {
            color: var(--success);
        }
        .data-health-table .status-missing {
            color: var(--danger);
            font-weight: 600;
        }

        /* No Data Warning */
        .no-data-warning {
            display: flex;
            align-items: center;
            gap: 16px;
            background: var(--warning-dim);
            border: 1px solid rgba(255, 77, 141, 0.3);
            border-radius: 12px;
            padding: 20px 24px;
            margin-bottom: 24px;
        }
        .no-data-warning .warning-icon {
            font-size: 2rem;
        }
        .no-data-warning .warning-text {
            flex: 1;
        }
        .no-data-warning .warning-text strong {
            display: block;
            color: var(--text-primary);
            margin-bottom: 4px;
        }
        .no-data-warning .warning-text p {
            color: var(--text-secondary);
            font-size: 0.85rem;
            margin: 0;
        }

        /* Quick Copy Button on Brand Cards */
        .brand-kpi-card {
            position: relative;
        }
        .quick-copy-btn {
            position: absolute;
            top: 12px;
            right: 12px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 4px 8px;
            font-size: 0.75rem;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.2s ease;
            color: var(--text-secondary);
        }
        .brand-kpi-card:hover .quick-copy-btn {
            opacity: 1;
        }
        .quick-copy-btn:hover {
            background: var(--accent-dim);
            color: var(--accent);
            border-color: var(--accent);
        }
        .quick-copy-btn.copied {
            background: var(--success-dim);
            color: var(--success);
            border-color: var(--success);
        }

        /* Brand Action Board */
        .brand-action-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 12px;
        }
        .brand-action-card {
            background: var(--bg-secondary);
            border: 2px solid var(--border);
            border-radius: 12px;
            padding: 16px;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
        }
        .brand-action-card:hover {
            border-color: var(--accent);
            transform: translateY(-2px);
        }
        .brand-action-card.completed {
            border-color: var(--success);
            background: var(--success-dim);
        }
        .brand-action-card.completed::after {
            content: '✓';
            position: absolute;
            top: 8px;
            right: 12px;
            font-size: 1.2rem;
            color: var(--success);
        }
        .brand-action-card .brand-name {
            font-weight: 700;
            font-size: 1rem;
            margin-bottom: 12px;
            color: var(--text-primary);
        }
        .brand-action-card .action-counts {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .brand-action-card .action-row {
            display: flex;
            justify-content: space-between;
            font-size: 0.8rem;
        }
        .brand-action-card .action-row .label {
            color: var(--text-muted);
        }
        .brand-action-card .action-row .value {
            font-weight: 600;
        }
        .brand-action-card .action-row .value.has-items {
            color: var(--accent);
        }
        .brand-action-card .action-row .value.warning {
            color: var(--warning);
        }
        .brand-action-card .action-row .value.success {
            color: var(--success);
        }
        .brand-action-card .dod-change {
            font-size: 0.75rem;
            font-weight: 600;
            margin-left: 4px;
        }
        .brand-action-card .dod-change.positive { color: var(--success); }
        .brand-action-card .dod-change.negative { color: var(--error); }
        .brand-action-card .urgency-indicator {
            position: absolute;
            top: -4px;
            left: -4px;
            background: var(--warning);
            color: var(--bg-primary);
            font-size: 0.65rem;
            font-weight: 700;
            padding: 2px 6px;
            border-radius: 10px;
        }

        /* All Complete Celebration */
        .all-complete-msg {
            background: linear-gradient(135deg, var(--success-dim), var(--accent-dim));
            border: 2px solid var(--success);
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--success);
            margin-bottom: 16px;
            animation: celebrate 0.5s ease-out;
        }
        @keyframes celebrate {
            0% { transform: scale(0.9); opacity: 0; }
            50% { transform: scale(1.02); }
            100% { transform: scale(1); opacity: 1; }
        }

        /* Mini Stats */
        .mini-stat {
            background: var(--bg-card);
            border-radius: 8px;
            padding: 12px;
            text-align: center;
        }
        .mini-stat .value {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-primary);
        }
        .mini-stat .label {
            font-size: 0.7rem;
            color: var(--text-muted);
            text-transform: uppercase;
            margin-top: 4px;
        }

        /* Brand Section Headers */
        .brand-section h4 {
            font-size: 0.9rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* Collapsible Sections */
        .collapsible-section {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            margin-bottom: 16px;
            overflow: hidden;
        }
        .collapsible-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;
            cursor: pointer;
            font-weight: 600;
            color: var(--text-primary);
            transition: background 0.2s ease;
        }
        .collapsible-header:hover {
            background: var(--bg-secondary);
        }
        .collapsible-header::marker {
            color: var(--accent);
        }
        .collapsible-content {
            padding: 0 20px 20px;
        }

        /* Brand Checklist Items */
        #brandChecklistItems {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }
        .brand-check {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.85rem;
            color: var(--text-secondary);
        }
        .brand-check input[type="checkbox"] {
            width: 16px;
            height: 16px;
            accent-color: var(--success);
        }
        .brand-check.completed span {
            color: var(--success);
            text-decoration: line-through;
        }

        /* Weekly Brand Brief Cards */
        .weekly-brand-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 16px;
        }
        .weekly-brand-card {
            background: var(--bg-secondary);
            border: 2px solid var(--border);
            border-radius: 12px;
            padding: 20px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .weekly-brand-card:hover {
            border-color: var(--accent);
        }
        .weekly-brand-card.completed {
            border-color: var(--success);
            opacity: 0.7;
        }
        .weekly-brand-card .brand-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        .weekly-brand-card .brand-header h3 {
            font-size: 1.1rem;
            font-weight: 700;
        }
        .weekly-brand-card .brand-gmv {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--accent);
            margin-bottom: 16px;
        }
        .weekly-brand-card .brand-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }
        .weekly-brand-card .action-item {
            background: var(--bg-card);
            padding: 10px;
            border-radius: 8px;
            text-align: center;
        }
        .weekly-brand-card .action-item .count {
            font-size: 1.25rem;
            font-weight: 700;
        }
        .weekly-brand-card .action-item .label {
            font-size: 0.7rem;
            color: var(--text-muted);
        }
        .weekly-brand-card .action-item.winners .count { color: var(--success); }
        .weekly-brand-card .action-item.attention .count { color: var(--warning); }

        @media (max-width: 900px) {
            .sidebar { 
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                height: 100vh;
                z-index: 1000;
                transform: translateX(-100%);
                transition: transform 0.3s ease;
            }
            .sidebar.open {
                display: flex;
                transform: translateX(0);
            }
            .main { margin-left: 0; padding-bottom: 80px; }
            .mobile-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 12px 16px;
                background: var(--bg-secondary);
                border-bottom: 1px solid var(--border);
                position: sticky;
                top: 0;
                z-index: 100;
            }
            .mobile-menu-btn {
                background: var(--bg-card);
                border: 1px solid var(--border);
                border-radius: 8px;
                padding: 8px 12px;
                color: var(--text-primary);
                font-size: 1.2rem;
                cursor: pointer;
            }
            .mobile-logo { height: 32px; }
            .mobile-overlay {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0,0,0,0.6);
                z-index: 999;
            }
            .mobile-overlay.open { display: block; }
            .spotlight-stats { grid-template-columns: repeat(2, 1fr); }
            .brand-kpi-grid { grid-template-columns: 1fr; }
            .brand-metrics-grid { grid-template-columns: repeat(2, 1fr); }
            .task-checklist { flex-direction: column; align-items: flex-start; gap: 12px; }
            .checklist-progress { width: 100%; max-width: 100%; }
            .header-actions { flex-wrap: wrap; gap: 8px; }
            .brand-action-grid { grid-template-columns: repeat(2, 1fr); }
            .weekly-brand-grid { grid-template-columns: 1fr; }
            .brand-detail-stats { grid-template-columns: repeat(2, 1fr) !important; }
            #brandChecklistItems, #weeklyBrandChecklistItems { flex-direction: column; }
            .stats-grid { grid-template-columns: repeat(2, 1fr); }
            .filters { flex-wrap: wrap; }
            .filter-group { min-width: 45%; }
            
            /* Mobile bottom nav enhancements */
            .mobile-bottom-nav {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                background: var(--bg-secondary);
                border-top: 1px solid var(--border);
                display: flex;
                justify-content: space-around;
                padding: 8px 0;
                padding-bottom: max(8px, env(safe-area-inset-bottom));
                z-index: 100;
            }
            .mobile-nav-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 4px;
                padding: 8px 12px;
                background: none;
                border: none;
                color: var(--text-muted);
                font-size: 0.65rem;
                cursor: pointer;
                transition: color 0.2s;
                min-width: 60px;
            }
            .mobile-nav-item.active {
                color: var(--accent);
            }
            .mobile-nav-icon {
                font-size: 1.3rem;
            }
            
            /* Notification center mobile */
            .notification-center {
                width: calc(100vw - 24px);
                max-width: 400px;
                right: -50%;
                transform: translateX(50%);
            }
            
            /* Leaderboard podium mobile */
            .leaderboard-podium {
                padding: 24px 10px;
                gap: 10px;
            }
            .podium-avatar { width: 60px; height: 60px; font-size: 1.5rem; }
            .podium-place.first .podium-avatar { width: 70px; height: 70px; }
            .podium-name { font-size: 0.85rem; max-width: 80px; }
            .podium-gmv { font-size: 1rem; }
            .podium-base { width: 70px; }
            
            /* Bulk actions mobile */
            .bulk-actions-bar {
                flex-direction: column;
                gap: 12px;
                padding: 12px;
            }
            .bulk-actions-buttons {
                flex-wrap: wrap;
                margin-left: 0;
                justify-content: center;
            }
            .bulk-btn {
                flex: 1;
                min-width: 100px;
                justify-content: center;
            }
            
            /* View toggle mobile */
            .view-toggle {
                width: 100%;
                justify-content: center;
            }
        }

        /* Managed stats grid */
        .managed-stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            text-align: center;
        }

        @media (max-width: 600px) {
            .mobile-header { padding: 10px 12px; }
            .header { padding: 16px; flex-direction: column; align-items: flex-start; gap: 12px; }
            .header-title { font-size: 1.3rem; }
            .header-subtitle { font-size: 0.8rem; }
            .view-section { padding: 12px; }
            .stats-grid { grid-template-columns: 1fr; gap: 12px; }
            .stat-card { padding: 16px; }
            .stat-value { font-size: 1.5rem; }
            .brand-action-grid { grid-template-columns: 1fr; }
            .brand-action-card { padding: 14px; }
            .filters { gap: 8px; flex-direction: column; }
            .filter-group { min-width: 100%; width: 100%; }
            .filter-label { font-size: 0.7rem; }
            .card { padding: 16px; margin-bottom: 16px; }
            .card-title { font-size: 1rem; }
            .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
            table { min-width: 600px; }
            .leaderboard-item { padding: 12px; gap: 10px; }
            .leaderboard-name { font-size: 0.85rem; }
            .btn { padding: 8px 14px; font-size: 0.8rem; }
            .btn-primary { padding: 10px 16px; }
            .modal-content { width: 95%; margin: 10px; padding: 16px; max-height: 90vh; }
            .brand-detail-stats { grid-template-columns: 1fr !important; }
            .spotlight-stats { grid-template-columns: 1fr; }
            .spotlight-card { padding: 14px; }
            .checklist-item { padding: 8px 12px; font-size: 0.8rem; }
            
            /* Mobile card layout for tables */
            .mobile-card-view .table-container table { display: none; }
            .mobile-card-view .mobile-cards { display: block; }
            .mobile-cards { display: none; }
            .mobile-data-card {
                background: var(--bg-card);
                border: 1px solid var(--border);
                border-radius: 10px;
                padding: 16px;
                margin-bottom: 12px;
            }
            .mobile-data-card-header {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                margin-bottom: 12px;
            }
            .mobile-data-card-title {
                font-weight: 600;
                font-size: 1rem;
            }
            .mobile-data-card-subtitle {
                font-size: 0.8rem;
                color: var(--text-muted);
            }
            .mobile-data-card-stats {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
            }
            .mobile-data-card-stat {
                text-align: center;
                padding: 8px;
                background: var(--bg-secondary);
                border-radius: 6px;
            }
            .mobile-data-card-stat-value {
                font-weight: 700;
                font-size: 1.1rem;
            }
            .mobile-data-card-stat-label {
                font-size: 0.7rem;
                color: var(--text-muted);
            }
            .mobile-data-card-actions {
                display: flex;
                gap: 8px;
                margin-top: 12px;
                padding-top: 12px;
                border-top: 1px solid var(--border);
            }
            .mobile-data-card-actions .btn {
                flex: 1;
            }
            
            /* Managed/Unmanaged cards - single column on mobile */
            .managed-stats-grid {
                grid-template-columns: 1fr;
                gap: 12px;
            }
            .managed-stats-grid .stat-value {
                font-size: 1.3rem !important;
            }
            
            /* Header actions stack vertically */
            .header-actions {
                flex-direction: column;
                width: 100%;
            }
            .header-actions .btn {
                width: 100%;
                justify-content: center;
            }
            
            /* Mobile-friendly leaderboard stats */
            .leaderboard-stats {
                gap: 12px;
            }
            .leaderboard-stat {
                min-width: 50px;
            }
            .leaderboard-stat .value {
                font-size: 0.85rem;
            }
            
            /* Touch-friendly buttons */
            .action-btn {
                min-width: 36px;
                min-height: 36px;
            }
            
            /* Pull to refresh indicator */
            .pull-to-refresh {
                text-align: center;
                padding: 16px;
                color: var(--text-muted);
                font-size: 0.85rem;
                display: none;
            }
            .pull-to-refresh.active {
                display: block;
            }
        }

        @media (max-width: 400px) {
            .mobile-header { padding: 8px 10px; }
            .mobile-logo { height: 28px; }
            .header-title { font-size: 1.1rem; }
            .stat-value { font-size: 1.3rem; }
            .stat-label { font-size: 0.7rem; }
            .nav-item { padding: 10px 14px; font-size: 0.85rem; }
            .mobile-nav-item { min-width: 50px; padding: 6px 8px; }
            .mobile-nav-icon { font-size: 1.1rem; }
            .notification-center { width: calc(100vw - 16px); }
        }

        /* Hide mobile header on desktop */
        .mobile-header { display: none; }
        .mobile-overlay { display: none; }
        .mobile-bottom-nav { display: none; }

        /* Mobile bottom navigation */
        @media (max-width: 900px) {
            .mobile-bottom-nav {
                display: flex;
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                background: var(--bg-secondary);
                border-top: 1px solid var(--border);
                justify-content: space-around;
                padding: 8px 0;
                padding-bottom: calc(8px + env(safe-area-inset-bottom));
                z-index: 1000;
            }
            .mobile-nav-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 2px;
                padding: 8px 12px;
                color: var(--text-muted);
                text-decoration: none;
                font-size: 0.65rem;
                font-weight: 500;
                border: none;
                background: none;
                cursor: pointer;
                border-radius: 8px;
            }
            .mobile-nav-item.active {
                color: var(--accent);
                background: rgba(255, 77, 141, 0.1);
            }
            .mobile-nav-icon {
                font-size: 1.3rem;
            }
            .main {
                padding-bottom: 80px !important;
            }
        }

        /* Print Styles for PDF Export */
        @media print {
            body { background: white; color: black; }
            .sidebar, .mobile-header, .mobile-overlay, .nav-section, .filters, .header-actions, .btn, .period-toggle { display: none !important; }
            .main { margin-left: 0 !important; padding: 0 !important; }
            .view-section { display: none !important; padding: 0 !important; }
            .view-section.print-active { display: block !important; }
            .header { padding: 20px 0; border-bottom: 2px solid #333; }
            .header-title { color: black; }
            .header-subtitle { color: #666; }
            .stat-card { background: #f5f5f5; border: 1px solid #ddd; color: black; break-inside: avoid; }
            .stat-value { color: black !important; }
            .stat-label { color: #666; }
            .card { background: #f9f9f9; border: 1px solid #ddd; break-inside: avoid; }
            .card-title { color: black; }
            table { border-collapse: collapse; width: 100%; }
            th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
            th { background: #f0f0f0; }
            .badge-brand, .badge-tier { border: 1px solid #999; background: #eee; color: black; }
            .gmv-value { color: black !important; }
            .print-header { display: block !important; text-align: center; margin-bottom: 20px; }
            .print-header img { height: 50px; }
            .print-header h1 { margin: 10px 0 5px; }
            .print-header p { color: #666; }
            .no-print { display: none !important; }
        }
        .print-header { display: none; }

        /* Funnel Builder Styles - Revamped */
        .funnels-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 20px;
        }
        
        .funnel-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            overflow: hidden;
            transition: all 0.2s;
        }
        .funnel-card:hover {
            border-color: var(--accent);
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            transform: translateY(-2px);
        }
        
        /* Dropdown menu styles */
        .dropdown-item:hover {
            background: var(--bg-secondary);
        }
        
        .funnel-card-header {
            padding: 20px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: flex-start;
            gap: 16px;
        }
        .funnel-card-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            flex-shrink: 0;
        }
        .funnel-card-info { flex: 1; min-width: 0; }
        .funnel-card-name {
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .funnel-card-brand {
            font-size: 0.85rem;
            color: var(--text-muted);
        }
        .funnel-card-status {
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 600;
        }
        .funnel-card-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            padding: 16px 20px;
            gap: 12px;
            background: var(--bg-secondary);
        }
        .funnel-stat {
            text-align: center;
        }
        .funnel-stat-value {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-primary);
        }
        .funnel-stat-label {
            font-size: 0.75rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .funnel-card-actions {
            padding: 16px 20px;
            display: flex;
            gap: 8px;
        }
        .funnel-card-actions .btn { flex: 1; }
        
        /* New Builder Styles */
        .funnel-builder-modal { background: var(--bg-primary); }
        
        .form-group-sm { margin-bottom: 12px; }
        .form-group-sm label {
            display: block;
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-bottom: 4px;
        }
        .form-group-sm .form-input {
            padding: 8px 12px;
            font-size: 0.9rem;
        }
        
        .settings-section {
            border-bottom: 1px solid var(--border);
        }
        .settings-section-header {
            padding: 14px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            font-size: 0.9rem;
            font-weight: 500;
            transition: background 0.2s;
        }
        .settings-section-header:hover {
            background: var(--bg-card);
        }
        .settings-toggle {
            font-size: 0.75rem;
            color: var(--text-muted);
            transition: transform 0.2s;
        }
        .settings-section-content {
            padding: 0 16px 16px;
            display: none;
        }
        .settings-section-content.show {
            display: block;
        }
        
        .field-blocks-palette {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .draggable-block {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 8px;
            cursor: grab;
            font-size: 0.85rem;
            transition: all 0.2s;
        }
        .draggable-block:hover {
            border-color: var(--accent);
            background: var(--accent-dim);
        }
        .draggable-block:active {
            cursor: grabbing;
        }
        .draggable-block .block-icon {
            width: 28px;
            height: 28px;
            background: var(--bg-secondary);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
        }
        
        .fields-drop-zone {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            position: relative;
        }
        .fields-drop-zone.drag-over {
            background: var(--accent-dim);
        }
        .fields-list-new {
            display: flex;
            flex-direction: column;
            gap: 10px;
            min-height: 100px;
        }
        .drop-hint {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: var(--text-muted);
            font-size: 0.9rem;
            pointer-events: none;
            opacity: 0.7;
        }
        .fields-list-new:not(:empty) + .drop-hint { display: none; }
        
        .field-item-new {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 16px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 10px;
            cursor: grab;
            transition: all 0.2s;
        }
        .field-item-new:hover {
            border-color: var(--accent);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .field-item-new.dragging {
            opacity: 0.5;
            transform: scale(0.98);
        }
        .field-item-new .field-icon {
            width: 36px;
            height: 36px;
            background: var(--bg-secondary);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            flex-shrink: 0;
        }
        .field-item-new .field-info { flex: 1; min-width: 0; }
        .field-item-new .field-label-new {
            font-weight: 500;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .field-item-new .field-label-new .required-badge {
            background: var(--danger);
            color: white;
            font-size: 0.65rem;
            padding: 2px 5px;
            border-radius: 4px;
        }
        .field-item-new .field-meta-new {
            font-size: 0.8rem;
            color: var(--text-muted);
        }
        .field-item-new .field-actions-new {
            display: flex;
            gap: 6px;
            opacity: 0;
            transition: opacity 0.2s;
        }
        .field-item-new:hover .field-actions-new {
            opacity: 1;
        }
        .field-item-new .field-actions-new button {
            width: 32px;
            height: 32px;
            border: none;
            background: var(--bg-secondary);
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.85rem;
            transition: all 0.2s;
        }
        .field-item-new .field-actions-new button:hover {
            background: var(--accent-dim);
        }
        
        .step-tab {
            padding: 8px 12px;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.85rem;
            transition: all 0.2s;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .step-tab:hover { border-color: var(--accent); }
        .step-tab.active {
            background: var(--accent);
            color: white;
            border-color: var(--accent);
        }
        .step-tab.active button {
            color: rgba(255,255,255,0.7) !important;
        }
        .step-tab.active button:hover {
            color: white !important;
        }
        
        /* Preview Styles */
        .preview-device-btn {
            width: 32px;
            height: 32px;
            border: 1px solid rgba(255,255,255,0.2);
            background: transparent;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.9rem;
            transition: all 0.2s;
        }
        .preview-device-btn:hover {
            background: rgba(255,255,255,0.1);
        }
        .preview-device-btn.active {
            background: var(--accent);
            border-color: var(--accent);
        }
        
        .preview-mobile {
            width: 320px;
            background: #0d0d0d;
            border-radius: 24px;
            padding: 20px;
            box-shadow: 0 0 0 8px #333, 0 0 0 10px #1a1a1a;
            min-height: 500px;
        }
        .preview-desktop {
            width: 100%;
            max-width: 600px;
            background: #0d0d0d;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            min-height: 400px;
        }
        
        /* Legacy Funnel Builder Styles */
        .funnel-tab {
            padding: 12px 20px;
            background: transparent;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            font-size: 0.9rem;
            transition: all 0.2s;
            border-bottom: 2px solid transparent;
        }
        .funnel-tab:hover { color: var(--text-primary); }
        .funnel-tab.active {
            color: var(--accent);
            border-bottom-color: var(--accent);
        }
        .funnel-tab-content { display: none !important; }
        .funnel-tab-content.active { display: flex !important; flex-direction: column; }
        
        .field-type-btn {
            width: 40px;
            height: 40px;
            border: 1px solid var(--border);
            background: var(--bg-card);
            border-radius: 8px;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.2s;
            color: var(--text-primary);
        }
        .field-type-btn:hover {
            border-color: var(--accent);
            background: var(--accent-dim);
        }
        
        .fields-list, .steps-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .field-item, .step-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 8px;
            cursor: grab;
            transition: all 0.2s;
        }
        .field-item:hover, .step-item:hover {
            border-color: var(--accent);
        }
        .field-item.dragging, .step-item.dragging {
            opacity: 0.5;
            cursor: grabbing;
        }
        .field-item .drag-handle, .step-item .drag-handle {
            color: var(--text-muted);
            cursor: grab;
        }
        .field-item .field-info {
            flex: 1;
        }
        .field-item .field-label {
            font-weight: 500;
            color: var(--text-primary);
        }
        .field-item .field-meta {
            font-size: 0.8rem;
            color: var(--text-muted);
        }
        .field-item .field-actions {
            display: flex;
            gap: 8px;
        }
        .field-item .field-actions button {
            width: 28px;
            height: 28px;
            border: none;
            background: var(--bg-secondary);
            border-radius: 4px;
            cursor: pointer;
            color: var(--text-muted);
            transition: all 0.2s;
        }
        .field-item .field-actions button:hover {
            background: var(--accent-dim);
            color: var(--accent);
        }
        .field-item .field-actions button.delete:hover {
            background: var(--danger-dim);
            color: var(--danger);
        }
        
        /* Preview Styles */
        .preview-form {
            background: var(--bg-secondary);
            border-radius: 12px;
            padding: 20px;
        }
        .preview-header {
            text-align: center;
            margin-bottom: 20px;
        }
        .preview-header h2 {
            font-size: 1.1rem;
            margin-bottom: 4px;
        }
        .preview-header p {
            font-size: 0.85rem;
            color: var(--text-muted);
        }
        .preview-steps {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-bottom: 20px;
        }
        .preview-step {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 6px 12px;
            background: var(--bg-card);
            border-radius: 20px;
            font-size: 0.75rem;
        }
        .preview-step.active {
            background: var(--accent);
            color: var(--bg-primary);
        }
        .preview-field {
            margin-bottom: 16px;
        }
        .preview-field label {
            display: block;
            font-size: 0.85rem;
            margin-bottom: 4px;
            color: var(--text-secondary);
        }
        .preview-field input, .preview-field select, .preview-field textarea {
            width: 100%;
            padding: 10px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-primary);
            font-size: 0.9rem;
        }
        .preview-field.half {
            display: inline-block;
            width: calc(50% - 8px);
            margin-right: 16px;
        }
        .preview-field.half:nth-child(even) {
            margin-right: 0;
        }

/* ==========================================================================
   COMPONENT DESIGN SYSTEM
   Added 2025-12-26 for consistent styling across admin dashboard
   ========================================================================== */

/* --------------------------------------------------------------------------
   LAYOUT UTILITIES
   -------------------------------------------------------------------------- */

/* Flex Containers */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* Flex Alignment */
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }

/* Gap Utilities */
.gap-xs { gap: 4px; }
.gap-sm { gap: 8px; }
.gap-md { gap: 12px; }
.gap-lg { gap: 16px; }
.gap-xl { gap: 24px; }

/* Grid Layouts */
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.grid-auto-fit { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid-auto-fit-sm { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.col-span-full { grid-column: 1 / -1; }

@media (max-width: 1200px) {
    .grid-cols-6 { grid-template-columns: repeat(3, 1fr); }
    .grid-cols-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .grid-cols-6, .grid-cols-5, .grid-cols-4, .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .grid-cols-6, .grid-cols-5, .grid-cols-4, .grid-cols-3, .grid-cols-2 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   SPACING UTILITIES
   -------------------------------------------------------------------------- */

/* Padding */
.p-0 { padding: 0; }
.p-xs { padding: 4px; }
.p-sm { padding: 8px; }
.p-md { padding: 12px; }
.p-lg { padding: 16px; }
.p-xl { padding: 20px; }
.p-2xl { padding: 24px; }
.px-sm { padding-left: 8px; padding-right: 8px; }
.px-md { padding-left: 12px; padding-right: 12px; }
.px-lg { padding-left: 16px; padding-right: 16px; }
.px-xl { padding-left: 20px; padding-right: 20px; }
.py-sm { padding-top: 8px; padding-bottom: 8px; }
.py-md { padding-top: 12px; padding-bottom: 12px; }
.py-lg { padding-top: 16px; padding-bottom: 16px; }

/* Margin */
.m-0 { margin: 0; }
.mb-xs { margin-bottom: 4px; }
.mb-sm { margin-bottom: 8px; }
.mb-md { margin-bottom: 12px; }
.mb-lg { margin-bottom: 16px; }
.mb-xl { margin-bottom: 20px; }
.mb-2xl { margin-bottom: 24px; }
.mt-xs { margin-top: 4px; }
.mt-sm { margin-top: 8px; }
.mt-md { margin-top: 12px; }
.mt-lg { margin-top: 16px; }

/* --------------------------------------------------------------------------
   TEXT UTILITIES
   -------------------------------------------------------------------------- */

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.text-xs { font-size: 0.65rem; }
.text-sm { font-size: 0.75rem; }
.text-base { font-size: 0.85rem; }
.text-md { font-size: 0.95rem; }
.text-lg { font-size: 1.1rem; }
.text-xl { font-size: 1.4rem; }
.text-2xl { font-size: 1.8rem; }

.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
.text-info { color: var(--blue); }

/* Color-coded text for sections */
.text-hot { color: #f97316; }
.text-rising { color: #22c55e; }
.text-gold { color: #FF4D8D; }
.text-purple { color: #8b5cf6; }
.text-ghost { color: #6b7280; }
.text-behind { color: #ef4444; }
.text-atrisk { color: #f59e0b; }
.text-ontrack { color: #22c55e; }
.text-star { color: #FF4D8D; }

.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.min-w-0 { min-width: 0; }

/* --------------------------------------------------------------------------
   BORDER & SHAPE UTILITIES
   -------------------------------------------------------------------------- */

.rounded-sm { border-radius: 4px; }
.rounded { border-radius: 6px; }
.rounded-md { border-radius: 8px; }
.rounded-lg { border-radius: 12px; }
.rounded-xl { border-radius: 16px; }
.rounded-full { border-radius: 9999px; }

.border { border: 1px solid var(--border); }
.border-light { border: 1px solid var(--border-light); }
.border-t { border-top: 1px solid var(--border); }
.border-b { border-bottom: 1px solid var(--border); }
.border-l-4 { border-left: 4px solid; }

/* Border colors */
.border-hot { border-color: rgba(249, 115, 22, 0.3); }
.border-rising { border-color: rgba(34, 197, 94, 0.3); }
.border-gold { border-color: rgba(255, 77, 141, 0.3); }
.border-purple { border-color: rgba(139, 92, 246, 0.3); }
.border-ghost { border-color: #6b7280; }
.border-behind { border-color: #ef4444; }
.border-atrisk { border-color: #f59e0b; }
.border-ontrack { border-color: #22c55e; }
.border-star { border-color: #FF4D8D; }

/* --------------------------------------------------------------------------
   BACKGROUND UTILITIES
   -------------------------------------------------------------------------- */

.bg-primary { background: var(--bg-primary); }
.bg-secondary { background: var(--bg-secondary); }
.bg-card { background: var(--bg-card); }
.bg-transparent { background: transparent; }

/* Gradient backgrounds for section headers */
.bg-gradient-hot {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(249, 115, 22, 0.05));
}
.bg-gradient-rising {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05));
}
.bg-gradient-gold {
    background: linear-gradient(135deg, rgba(255, 77, 141, 0.15), rgba(255, 77, 141, 0.05));
}
.bg-gradient-purple {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05));
}

/* Dim backgrounds for badges/icons */
.bg-hot-dim { background: rgba(249, 115, 22, 0.2); }
.bg-rising-dim { background: rgba(34, 197, 94, 0.2); }
.bg-gold-dim { background: rgba(255, 77, 141, 0.2); }
.bg-purple-dim { background: rgba(139, 92, 246, 0.2); }

/* --------------------------------------------------------------------------
   INTERACTIVE UTILITIES
   -------------------------------------------------------------------------- */

.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.pointer-events-none { pointer-events: none; }

.transition { transition: all 0.2s; }
.hover\:bg-card:hover { background: var(--bg-card); }
.hover\:border-accent:hover { border-color: var(--accent); }

/* --------------------------------------------------------------------------
   COMPONENT: SECTION HEADER
   Used for collapsible section headers (Videos, Posting, etc.)
   -------------------------------------------------------------------------- */

.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.section-header.expanded {
    border-radius: 12px 12px 0 0;
}

.section-header--hot {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(249, 115, 22, 0.05));
    border: 1px solid rgba(249, 115, 22, 0.3);
}

.section-header--rising {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05));
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.section-header--gold {
    background: linear-gradient(135deg, rgba(255, 77, 141, 0.15), rgba(255, 77, 141, 0.05));
    border: 1px solid rgba(255, 77, 141, 0.3);
}

.section-header--purple {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05));
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.section-header--neutral {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
}

.section-header--ghost {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.15), rgba(107, 114, 128, 0.05));
    border: 1px solid rgba(107, 114, 128, 0.3);
}

.section-header--behind {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.section-header--atrisk {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05));
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.section-header--ontrack {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05));
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.section-header--star {
    background: linear-gradient(135deg, rgba(255, 77, 141, 0.15), rgba(255, 77, 141, 0.05));
    border: 1px solid rgba(255, 77, 141, 0.3);
}

.section-header__icon {
    font-size: 1.5rem;
}

.section-header__info {
    flex: 1;
}

.section-header__title {
    font-weight: 700;
    font-size: 1.1rem;
}

.section-header__subtitle {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.section-header__count {
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
}

.section-header__count--hot { background: rgba(249, 115, 22, 0.2); color: #f97316; }
.section-header__count--rising { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.section-header__count--gold { background: rgba(255, 77, 141, 0.2); color: #FF4D8D; }
.section-header__count--purple { background: rgba(139, 92, 246, 0.2); color: #8b5cf6; }
.section-header__count--neutral { background: var(--bg-card); color: var(--text-secondary); }
.section-header__count--ghost { background: rgba(107, 114, 128, 0.2); color: #6b7280; }
.section-header__count--behind { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.section-header__count--atrisk { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }
.section-header__count--ontrack { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.section-header__count--star { background: rgba(255, 77, 141, 0.2); color: #FF4D8D; }

.section-header__toggle {
    font-size: 1.2rem;
    color: var(--text-muted);
}

/* Section Content */
.section-content {
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 20px;
    background: var(--bg-card);
    display: none;
}

.section-content.expanded {
    display: block;
}

/* --------------------------------------------------------------------------
   COMPONENT: STAT CARD VARIANTS
   -------------------------------------------------------------------------- */

.stat-card--clickable {
    cursor: pointer;
    transition: all 0.2s;
}

.stat-card--clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stat-card--compact {
    padding: 16px;
    text-align: center;
}

.stat-value--hot { color: #f97316; }
.stat-value--rising, .stat-value--ontrack { color: #22c55e; }
.stat-value--gold, .stat-value--star { color: #FF4D8D; }
.stat-value--purple { color: #8b5cf6; }
.stat-value--ghost { color: #6b7280; }
.stat-value--behind { color: #ef4444; }
.stat-value--atrisk { color: #f59e0b; }
.stat-value--accent { color: var(--accent); }
.stat-value--success { color: var(--success); }
.stat-value--blue { color: var(--blue); }

/* --------------------------------------------------------------------------
   COMPONENT: OPS TABS
   -------------------------------------------------------------------------- */

.ops-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 24px;
    background: var(--bg-secondary);
    padding: 4px;
    border-radius: 12px;
    width: fit-content;
    border: 1px solid var(--border);
}

.ops-tab {
    padding: 10px 24px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-muted);
    transition: all 0.2s;
}

.ops-tab:hover {
    color: var(--text-primary);
    background: var(--bg-card);
}

.ops-tab.active {
    background: var(--bg-card);
    font-weight: 600;
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ops-tab-content {
    display: none;
}

.ops-tab-content.active {
    display: block;
}

/* --------------------------------------------------------------------------
   COMPONENT: VIEW HEADER
   -------------------------------------------------------------------------- */

.view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
}

.view-header__info {
    flex: 1;
    min-width: 200px;
}

.view-header__title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
}

.view-header__subtitle {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 4px 0 0 0;
}

.view-header__actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* --------------------------------------------------------------------------
   COMPONENT: FILTER SELECT
   -------------------------------------------------------------------------- */

.filter-select {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    min-width: 140px;
    font-size: 0.85rem;
}

.filter-select:focus {
    outline: none;
    border-color: var(--accent);
}

.filter-input {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.filter-input:focus {
    outline: none;
    border-color: var(--accent);
}

/* --------------------------------------------------------------------------
   COMPONENT: ACTION ITEM (for Overview action items list)
   -------------------------------------------------------------------------- */

.action-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--bg-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.action-item:hover {
    background: var(--bg-card);
}

.action-item__icon {
    font-size: 1.1rem;
}

.action-item__content {
    flex: 1;
    min-width: 0;
}

.action-item__title {
    font-weight: 500;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.action-item__subtitle {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.action-item__arrow {
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   COMPONENT: WIN ITEM (for Today's Wins list)
   -------------------------------------------------------------------------- */

.win-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.win-item__rank {
    font-size: 1rem;
    width: 24px;
    text-align: center;
}

.win-item__info {
    flex: 1;
    min-width: 0;
}

.win-item__name {
    font-weight: 500;
    font-size: 0.85rem;
}

.win-item__brand {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.win-item__stats {
    text-align: right;
}

.win-item__gmv {
    font-weight: 700;
    color: var(--success);
    font-size: 0.9rem;
}

.win-item__orders {
    font-size: 0.65rem;
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   COMPONENT: EMPTY STATE
   -------------------------------------------------------------------------- */

.empty-state {
    text-align: center;
    padding: 30px;
    color: var(--text-muted);
}

.empty-state--sm {
    padding: 20px;
}

.empty-state__icon {
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.empty-state__message {
    font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   COMPONENT: USER CARD (Sidebar)
   -------------------------------------------------------------------------- */

.user-card {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.user-card__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-dim);
    border: 2px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--accent);
    font-size: 0.85rem;
}

.user-card__info {
    flex: 1;
    min-width: 0;
}

.user-card__name {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-card__role {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   COMPONENT: SIDEBAR ACTIONS
   -------------------------------------------------------------------------- */

.sidebar-actions {
    display: flex;
    gap: 8px;
}

.sidebar-actions__link {
    flex: 1;
    padding: 8px;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.75rem;
    transition: all 0.2s;
}

.sidebar-actions__link:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.sidebar-actions__btn {
    flex: 1;
    padding: 8px;
    background: transparent;
    border: 1px solid var(--danger);
    border-radius: 6px;
    color: var(--danger);
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.2s;
}

.sidebar-actions__btn:hover {
    background: var(--danger-dim);
}

.sidebar-version {
    margin-top: 12px;
    text-align: center;
    font-size: 0.65rem;
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   COMPONENT: DISCORD COPY BUTTON
   -------------------------------------------------------------------------- */

.btn-discord-copy {
    padding: 6px 12px;
    font-size: 0.75rem;
}

.btn-discord-copy--hot {
    background: rgba(249, 115, 22, 0.2);
    border-color: rgba(249, 115, 22, 0.4);
    color: #f97316;
}

.btn-discord-copy--rising {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.4);
    color: #22c55e;
}

.btn-discord-copy--gold {
    background: rgba(255, 77, 141, 0.2);
    border-color: rgba(255, 77, 141, 0.4);
    color: #FF4D8D;
}

.btn-discord-copy--purple {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.4);
    color: #8b5cf6;
}

/* Video Actions Bar */
.video-actions-bar {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 1.5rem;
    padding: 0 4px;
}

.btn-whats-cooking {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 0.875rem;
    font-weight: 600;
    background: linear-gradient(135deg, #5865F2, #7289DA);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(88, 101, 242, 0.3);
}

.btn-whats-cooking:hover {
    background: linear-gradient(135deg, #4752C4, #5865F2);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.4);
}

.btn-whats-cooking:active {
    transform: translateY(0);
}

.btn-whos-cooking {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 0.875rem;
    font-weight: 600;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.3);
}

.btn-whos-cooking:hover {
    background: linear-gradient(135deg, #d97706, #ea580c);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);
}

.btn-whos-cooking:active {
    transform: translateY(0);
}

/* --------------------------------------------------------------------------
   COMPONENT: HELP ICON
   -------------------------------------------------------------------------- */

.help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    font-size: 0.65rem;
    color: var(--text-muted);
    cursor: help;
    margin-left: 4px;
}

.help-icon--hot {
    background: rgba(249, 115, 22, 0.2);
    border-color: rgba(249, 115, 22, 0.4);
}

.help-icon--rising {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.4);
}

.help-icon--gold {
    background: rgba(255, 77, 141, 0.2);
    border-color: rgba(255, 77, 141, 0.4);
}

.help-icon--purple {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.4);
}

/* --------------------------------------------------------------------------
   COMPONENT: POSTING CARD
   -------------------------------------------------------------------------- */

.posting-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.posting-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.2s;
}

.posting-card:hover {
    border-color: var(--border-light);
    transform: translateY(-1px);
}

.posting-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.posting-card__name {
    font-weight: 600;
    font-size: 0.9rem;
}

.posting-card__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.posting-card__stat {
    text-align: center;
    padding: 8px;
    background: var(--bg-secondary);
    border-radius: 6px;
}

.posting-card__stat-value {
    font-weight: 700;
    font-size: 1rem;
}

.posting-card__stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   COMPONENT: VIDEO CARD
   -------------------------------------------------------------------------- */

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.video-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s;
}

.video-card:hover {
    border-color: var(--border-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.video-card__thumbnail {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background: var(--bg-secondary);
}

.video-card__body {
    padding: 14px;
}

.video-card__creator {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.video-card__brand {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.video-card__stats {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.video-card__gmv {
    font-weight: 700;
    color: var(--success);
}

.video-card__date {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ==========================================================================
   USERS VIEW - Component Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   TABLE STATES (Empty, Loading, Error)
   -------------------------------------------------------------------------- */
.table-empty,
.table-loading,
.table-error {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

.table-error {
    color: var(--danger);
}

/* --------------------------------------------------------------------------
   USER ROW (Avatar + Info layout in tables)
   -------------------------------------------------------------------------- */
.user-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-row--lg {
    gap: 12px;
}

.user-row__name {
    font-weight: 600;
}

.user-row__sub {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.user-row__sub--sm {
    font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   AVATARS
   -------------------------------------------------------------------------- */
.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    overflow: hidden;
    flex-shrink: 0;
}

.avatar--sm {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
}

.avatar--lg {
    width: 40px;
    height: 40px;
}

.avatar--bordered {
    border: 2px solid var(--accent);
    background: var(--accent-dim);
    color: var(--accent);
}

.avatar--purple {
    background: var(--purple-dim);
    color: var(--purple);
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   ROLE BADGES
   -------------------------------------------------------------------------- */
.role-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.role-badge--admin {
    background: rgba(255, 77, 141, 0.15);
    color: #FF4D8D;
}

.role-badge--content_lead {
    background: rgba(236, 72, 153, 0.15);
    color: #ec4899;
}

.role-badge--analyst {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.role-badge--payments {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.role-badge--automations {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}

.role-badge--va {
    background: rgba(6, 182, 212, 0.15);
    color: #06b6d4;
}

.role-badge--creator {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.role-badge--brand {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.role-badge--pill {
    border-radius: 20px;
}

/* --------------------------------------------------------------------------
   STATUS INDICATORS
   -------------------------------------------------------------------------- */
.status-text {
    font-weight: 500;
}

.status-text--success {
    color: var(--success);
}

.status-text--warning {
    color: var(--warning);
}

.status-text--danger {
    color: var(--danger);
}

.status-text--muted {
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   USERS TABS
   -------------------------------------------------------------------------- */
.users-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-secondary);
    padding: 4px;
    border-radius: 10px;
}

.users-tab {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.users-tab:hover:not(.users-tab--active) {
    color: var(--text-secondary);
    background: var(--bg-card);
}

.users-tab--active {
    background: var(--bg-card);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Sub-tabs (smaller, nested) */
.users-subtabs {
    display: flex;
    gap: 4px;
    background: var(--bg-secondary);
    padding: 3px;
    border-radius: 8px;
}

.users-subtab {
    padding: 8px 16px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.users-subtab--active {
    background: var(--bg-card);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.users-tab-content {
    display: block;
}

.users-tab-content--active {
    display: block;
}

/* --------------------------------------------------------------------------
   INLINE CODE
   -------------------------------------------------------------------------- */
.code-inline {
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.9em;
}

/* --------------------------------------------------------------------------
   ACTION BUTTONS GROUP
   -------------------------------------------------------------------------- */
.action-btns {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.action-btns--sm {
    gap: 4px;
}

/* --------------------------------------------------------------------------
   TABLE CELL UTILITIES
   -------------------------------------------------------------------------- */
.cell-right {
    text-align: right;
}

.cell-muted {
    color: var(--text-muted);
}

.cell-sm {
    font-size: 0.85rem;
}

.cell-xs {
    font-size: 0.8rem;
}

/* --------------------------------------------------------------------------
   FORM SELECT (inline in tables)
   -------------------------------------------------------------------------- */
.select-inline {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8rem;
    cursor: pointer;
}

.select-inline:focus {
    outline: none;
    border-color: var(--accent);
}

/* --------------------------------------------------------------------------
   TEXT UTILITIES
   -------------------------------------------------------------------------- */
.text-truncate {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-truncate--lg {
    max-width: 300px;
}

.text-truncate--sm {
    max-width: 150px;
}

/* ==========================================================================
   APPLICATION REVIEW MODAL - Clean Professional Design
   ========================================================================== */

/* Modal Overlay */
.app-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.app-modal-container {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    width: 100%;
    max-width: 580px;
    max-height: calc(100vh - 40px);
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
}

.app-modal-container > #applicationModalBody {
    overflow-y: auto;
    flex: 1;
}

/* Custom scrollbar for modal */
.app-modal-container > #applicationModalBody::-webkit-scrollbar {
    width: 6px;
}

.app-modal-container > #applicationModalBody::-webkit-scrollbar-track {
    background: transparent;
}

.app-modal-container > #applicationModalBody::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.app-modal-container > #applicationModalBody::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.app-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 1.25rem;
    cursor: pointer;
    z-index: 10;
    transition: all 0.15s;
}

.app-modal-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Modal Header */
.app-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    padding-right: 60px; /* Space for close button */
    border-bottom: 1px solid var(--border);
    gap: 16px;
}

.app-modal-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.app-avatar {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--accent), var(--accent-dim));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.app-avatar span {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bg-primary);
}

.app-avatar--image {
    background: none;
    overflow: hidden;
}

.app-avatar--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-header-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.app-header-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}

.app-header-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-tiktok-link {
    color: var(--accent);
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    transition: opacity 0.15s;
}

.app-tiktok-link:hover {
    opacity: 0.8;
}

.app-discord-badge {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #5865F2;
    background: rgba(88, 101, 242, 0.12);
    padding: 3px 8px;
    border-radius: 4px;
}

.app-header-brand {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--brand-color) 12%, transparent);
    color: var(--brand-color);
    border: 1px solid color-mix(in srgb, var(--brand-color) 25%, transparent);
}

/* Performance Section */
.app-section {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.app-section-empty {
    text-align: center;
    padding: 24px;
    background: var(--bg-secondary);
    border-radius: 12px;
}

.app-section-empty-icon {
    font-size: 2rem;
    color: var(--border);
    margin-bottom: 8px;
}

.app-section-empty-text {
    font-weight: 600;
    color: var(--text-secondary);
}

.app-section-empty-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.app-perf-section {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.04), transparent);
}

.app-perf-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--success);
    margin-bottom: 16px;
}

.app-perf-indicator {
    width: 8px;
    height: 8px;
    background: var(--success);
    border-radius: 50%;
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.9); }
}

.app-perf-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.app-perf-stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
}

.app-perf-stat--primary {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
    border-color: rgba(34, 197, 94, 0.2);
}

.app-perf-stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.app-perf-stat--primary .app-perf-stat-value {
    color: var(--success);
}

.app-perf-stat-label {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-top: 6px;
}

.app-perf-brands {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.app-perf-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    background: var(--bg-secondary);
    padding: 6px 12px;
    border-radius: 6px;
}

.app-perf-brand-name {
    color: var(--text-secondary);
}

.app-perf-brand-gmv {
    font-weight: 600;
    color: var(--success);
}

.app-perf-single-brand {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 12px;
    text-align: center;
}

.app-roster-status {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
}

.app-roster-badge {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 6px;
}

.app-roster-badge--active {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success);
}

.app-roster-badge--inactive {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.app-roster-badge--pending {
    background: rgba(234, 179, 8, 0.1);
    color: var(--warning);
}

/* Contact Row */
.app-contact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}

.app-contact-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.app-contact-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    background: var(--bg-tertiary);
    border-radius: 4px;
    color: var(--text-muted);
}

.app-contact-item--time {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Answers Section */
.app-answers-section {
    border-bottom: 1px solid var(--border);
}

.app-answers-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: background 0.15s;
}

.app-answers-toggle:hover {
    background: var(--bg-secondary);
}

.app-answers-arrow {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border-radius: 6px;
}

.app-answers-content {
    display: none;
    padding: 0 24px 20px;
}

.app-answers-content.open {
    display: block;
}

.app-answer {
    padding: 14px 0;
    border-bottom: 1px solid var(--border-light);
}

.app-answer:last-child {
    border-bottom: none;
}

.app-answer-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.app-answer-value {
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.app-answer-value a {
    color: var(--accent);
}

.app-answers-empty {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-style: italic;
}

/* Notes Section */
.app-notes-section {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
}

.app-notes-input {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 0.9rem;
    color: var(--text-primary);
    transition: border-color 0.15s, background 0.15s;
}

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

.app-notes-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-card);
}

/* Modal Footer */
.app-modal-footer {
    padding: 20px 24px;
    background: var(--bg-secondary);
}

.app-main-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.app-action-group {
    display: flex;
    gap: 10px;
}

/* Buttons */
.app-btn {
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.app-btn--primary {
    background: var(--success);
    color: #fff;
}

.app-btn--primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.app-btn--secondary {
    background: var(--warning);
    color: #000;
}

.app-btn--secondary:hover {
    filter: brightness(1.1);
}

.app-btn--ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.app-btn--ghost:hover {
    background: var(--bg-tertiary);
    border-color: var(--text-muted);
}

.app-btn--reject {
    background: transparent;
    color: var(--danger);
    border: 1px solid var(--danger);
}

.app-btn--reject:hover {
    background: var(--danger);
    color: #fff;
}

.app-btn--danger {
    background: var(--danger);
    color: #fff;
}

.app-btn--danger:hover {
    filter: brightness(1.1);
}

/* Reject Panel */
.app-reject-panel {
    display: none;
    padding: 20px;
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 12px;
    margin-bottom: 16px;
}

.app-reject-panel.open {
    display: block;
}

.app-reject-title {
    font-weight: 600;
    color: var(--danger);
    margin-bottom: 16px;
}

.app-reject-select,
.app-reject-notes {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.app-reject-select:focus,
.app-reject-notes:focus {
    outline: none;
    border-color: var(--danger);
}

.app-reject-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Action Panels (Accept, Reject) */
.app-action-panel {
    display: none;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
}

.app-action-panel.open {
    display: block;
}

.app-action-panel-title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 16px;
}

.app-action-panel-title--danger {
    color: var(--danger);
}

.app-action-panel-title--success {
    color: var(--success);
}

.app-panel-input {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.app-panel-input:focus {
    outline: none;
    border-color: var(--accent);
}

.app-panel-field {
    margin-bottom: 16px;
}

.app-panel-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.app-panel-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: -8px;
}

.app-panel-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Retainer input */
.app-retainer-input-wrap {
    display: flex;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 8px;
}

.app-retainer-input-wrap:focus-within {
    border-color: var(--success);
}

.app-retainer-prefix,
.app-retainer-suffix {
    padding: 12px;
    color: var(--text-muted);
    font-size: 0.9rem;
    background: var(--bg-secondary);
}

.app-retainer-input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
    text-align: center;
    font-weight: 600;
    font-size: 1.1rem;
}

.app-retainer-input:focus {
    outline: none;
}

/* Success Panel */
.app-success-panel {
    display: none;
    text-align: center;
    padding: 32px 24px;
}

.app-success-panel.open {
    display: block;
}

.app-success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, var(--success), #059669);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #fff;
    animation: success-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes success-pop {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.app-success-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.app-success-subtitle {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 24px;
}

.app-success-subtitle span {
    color: var(--text-primary);
    font-weight: 500;
}

.app-success-message-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    text-align: left;
}

.app-success-message-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.app-success-message {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-primary);
    margin-bottom: 12px;
    white-space: pre-wrap;
}

.app-btn--copy {
    width: 100%;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.app-btn--copy:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.app-btn--full {
    width: 100%;
}

/* ==================== APPLICATIONS VIEW REDESIGN ==================== */

/* View Header */
.apps-view-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.apps-view-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px 0;
    letter-spacing: -0.02em;
}

.apps-view-subtitle {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
}

.apps-header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Segmented Tab Control */
.apps-tabs {
    display: inline-flex;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 24px;
    gap: 2px;
}

.apps-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.apps-tab:hover:not(.apps-tab--active) {
    background: rgba(255,255,255,0.05);
    color: var(--text-secondary);
}

.apps-tab--active {
    background: var(--bg-card);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.apps-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
}

.apps-tab-badge--warning {
    background: var(--warning);
    color: #000;
}

.apps-tab-badge--info {
    background: var(--info);
    color: #fff;
}

.apps-tab-badge--purple {
    background: var(--purple);
    color: #fff;
}

.apps-tab-badge--hidden {
    display: none;
}

/* Filter Bar */
.apps-filter-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.apps-filter-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.apps-filter-select {
    padding: 10px 14px;
    padding-right: 36px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    min-width: 140px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.apps-filter-select:hover {
    border-color: var(--accent);
}

.apps-filter-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.apps-filter-divider {
    width: 1px;
    height: 24px;
    background: var(--border);
    margin: 0 4px;
}

.apps-filter-spacer {
    flex: 1;
}

/* Search Input */
.apps-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 220px;
}

.apps-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    display: flex;
    align-items: center;
}

.apps-search-input {
    width: 100%;
    padding: 10px 14px;
    padding-left: 38px;
    padding-right: 32px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.apps-search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

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

.apps-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.apps-search-clear:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

/* Bulk Actions Bar */
.apps-bulk-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: var(--accent-dim);
    border: 1px solid var(--accent);
    border-radius: 8px;
    margin-bottom: 16px;
}

.apps-bulk-count {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent);
}

.apps-bulk-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.apps-bulk-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.apps-bulk-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--text-muted);
}

.apps-bulk-btn--danger {
    color: var(--danger);
    border-color: rgba(248, 113, 113, 0.3);
}

.apps-bulk-btn--danger:hover {
    background: rgba(248, 113, 113, 0.1);
    border-color: var(--danger);
}

/* Selected Row Style */
.apps-row--selected {
    background: var(--accent-dim) !important;
}

/* Refresh Button */
.apps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.apps-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--text-muted);
    color: var(--text-primary);
}

.apps-btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.apps-btn--primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.apps-btn--icon {
    padding: 10px;
    min-width: 40px;
}

/* Stats Grid */
.apps-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 1200px) {
    .apps-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .apps-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.apps-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.apps-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    border-color: var(--accent);
}

.apps-stat-card--active {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.apps-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.apps-stat-icon--pending {
    background: rgba(251, 191, 36, 0.15);
    color: var(--warning);
}

.apps-stat-icon--reviewing {
    background: rgba(59, 130, 246, 0.15);
    color: var(--blue);
}

.apps-stat-icon--accepted {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
}

.apps-stat-icon--rejected {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
}

.apps-stat-icon--total {
    background: rgba(139, 92, 246, 0.15);
    color: var(--purple);
}

.apps-stat-icon--waitlist {
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent);
}

.apps-stat-content {
    flex: 1;
    min-width: 0;
}

.apps-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.apps-stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Apply Links Dropdown */
.apps-dropdown {
    position: relative;
    display: inline-block;
}

.apps-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    min-width: 240px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.2);
    z-index: 100;
    overflow: hidden;
}

.apps-dropdown-menu--open {
    display: block;
}

.apps-dropdown-header {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.apps-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: background 0.15s;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.apps-dropdown-item:hover {
    background: var(--bg-tertiary);
}

.apps-dropdown-item-icon {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
}

.apps-dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

/* Table Container */
.apps-table-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow-x: auto;
    overflow-y: hidden;
}

/* Bulk Actions Bar */
.apps-bulk-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    border-bottom: 1px solid var(--border);
}

.apps-bulk-bar--visible {
    display: flex;
}

.apps-bulk-count {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 600;
}

.apps-bulk-count span {
    color: var(--accent);
}

.apps-bulk-actions {
    display: flex;
    gap: 8px;
}

.apps-bulk-btn {
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.apps-bulk-btn--success {
    background: var(--success);
    color: #fff;
}

.apps-bulk-btn--success:hover {
    background: #16a34a;
}

.apps-bulk-btn--danger {
    background: var(--danger);
    color: #fff;
}

.apps-bulk-btn--danger:hover {
    background: #dc2626;
}

.apps-bulk-btn--ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border);
}

.apps-bulk-btn--ghost:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Applications Table */
.apps-table {
    width: 100%;
    border-collapse: collapse;
}

.apps-table th {
    text-align: left;
    padding: 14px 16px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.apps-table th:first-child {
    width: 48px;
    text-align: center;
}

.apps-table th:last-child {
    text-align: right;
}

.apps-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
    color: var(--text-primary);
    vertical-align: middle;
}

.apps-table tr:last-child td {
    border-bottom: none;
}

.apps-table tr:hover {
    background: var(--bg-tertiary);
}

.apps-table td:first-child {
    text-align: center;
}

.apps-table td:last-child {
    text-align: right;
}

/* Table Checkbox */
.apps-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent);
}

/* Applicant Cell */
.apps-applicant {
    display: flex;
    align-items: center;
    gap: 12px;
}

.apps-applicant-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--purple));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    color: #fff;
    flex-shrink: 0;
}

.apps-applicant-avatar img,
.apps-applicant-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.apps-applicant-info {
    min-width: 0;
}

.apps-applicant-name {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.apps-applicant-discord {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* TikTok Handle */
.apps-tiktok {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--bg-secondary);
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.apps-tiktok-icon {
    font-size: 0.9rem;
}

/* Brand Badge */
.apps-brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.apps-brand--catakor {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.apps-brand--jiyu {
    background: rgba(236, 72, 153, 0.15);
    color: #ec4899;
}

.apps-brand--physicians_choice {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.apps-brand--peach_slices {
    background: rgba(251, 146, 60, 0.15);
    color: #fb923c;
}

.apps-brand--yerba_magic {
    background: rgba(132, 204, 22, 0.15);
    color: #84cc16;
}

.apps-brand--toplux {
    background: rgba(99, 102, 241, 0.15);
    color: #6366f1;
}

/* Status Badge */
.apps-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.apps-status--pending {
    background: rgba(251, 191, 36, 0.15);
    color: var(--warning);
}

.apps-status--reviewing {
    background: rgba(59, 130, 246, 0.15);
    color: var(--blue);
}

.apps-status--accepted {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
}

.apps-status--rejected {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
}

.apps-status--waitlist {
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent);
}

/* GMV Columns */
.apps-gmv {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}

/* Applied Date */
.apps-date {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.apps-date-relative {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0.7;
}

/* Action Buttons */
.apps-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.apps-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
}

.apps-action-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.apps-action-btn--view:hover {
    background: var(--blue);
    border-color: var(--blue);
}

.apps-action-btn--accept:hover {
    background: var(--success);
    border-color: var(--success);
}

.apps-action-btn--reject:hover {
    background: var(--danger);
    border-color: var(--danger);
}

/* Empty State */
.apps-empty {
    text-align: center;
    padding: 60px 40px;
}

.apps-empty-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.apps-empty-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.apps-empty-text {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Tab Content Info Boxes */
.apps-info-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 0.875rem;
    line-height: 1.5;
}

.apps-info-box--info {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: var(--blue);
}

.apps-info-box--purple {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.2);
    color: var(--purple);
}

.apps-info-box-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.apps-info-box strong {
    font-weight: 600;
}

/* ==================== USERS VIEW REDESIGN ==================== */

/* View Header */
.users-view-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.users-view-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px 0;
    letter-spacing: -0.02em;
}

.users-view-subtitle {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
}

.users-header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Stats Grid */
.users-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 900px) {
    .users-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .users-stats-grid {
        grid-template-columns: 1fr;
    }
}

.users-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.users-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    border-color: var(--accent);
}

.users-stat-card--active {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.users-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.users-stat-icon--team {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(99, 102, 241, 0.15));
    color: var(--purple);
}

.users-stat-icon--brands {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(14, 165, 233, 0.15));
    color: var(--blue);
}

.users-stat-icon--pending {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.15));
    color: var(--warning);
}

.users-stat-content {
    flex: 1;
    min-width: 0;
}

.users-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.users-stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Tab Navigation */
.users-tabs {
    display: inline-flex;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 24px;
    gap: 2px;
}

.users-tab-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.users-tab-btn:hover:not(.users-tab-btn--active) {
    background: rgba(255,255,255,0.05);
    color: var(--text-secondary);
}

.users-tab-btn--active {
    background: var(--bg-card);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.users-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--warning);
    color: #000;
}

.users-tab-badge--hidden {
    display: none;
}

/* Info Box */
.users-info-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 0.875rem;
    line-height: 1.5;
}

.users-info-box--purple {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.2);
    color: var(--purple);
}

.users-info-box--blue {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: var(--blue);
}

.users-info-box-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.users-info-box strong {
    font-weight: 600;
}

/* Pending Requests Section */
.users-pending-section {
    display: none;
    margin-bottom: 24px;
}

.users-pending-section--visible {
    display: block;
}

.users-pending-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.users-pending-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.users-pending-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--warning);
    color: #000;
}

.users-pending-card {
    background: var(--bg-card);
    border: 1px solid var(--warning);
    border-radius: 12px;
    overflow: hidden;
}

/* Filter Bar */
.users-filter-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.users-filter-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.users-filter-select {
    padding: 10px 14px;
    padding-right: 36px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    min-width: 140px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.users-filter-select:hover {
    border-color: var(--accent);
}

.users-filter-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.users-filter-spacer {
    flex: 1;
}

/* Buttons */
.users-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.users-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--text-muted);
    color: var(--text-primary);
}

.users-btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.users-btn--primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.users-btn--icon {
    padding: 10px;
    min-width: 40px;
}

/* Table Card */
.users-table-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}

/* Table */
.users-table {
    width: 100%;
    border-collapse: collapse;
}

.users-table th {
    text-align: left;
    padding: 14px 16px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.users-table th:last-child {
    text-align: right;
}

.users-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
    color: var(--text-primary);
    vertical-align: middle;
}

.users-table tr:last-child td {
    border-bottom: none;
}

.users-table tr:hover {
    background: var(--bg-tertiary);
}

.users-table td:last-child {
    text-align: right;
}

/* User Cell */
.users-user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.users-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    color: #fff;
    flex-shrink: 0;
}

.users-avatar--purple {
    background: linear-gradient(135deg, var(--purple), var(--accent));
}

.users-avatar--blue {
    background: linear-gradient(135deg, var(--blue), #0ea5e9);
}

.users-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.users-user-info {
    min-width: 0;
}

.users-user-name {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.users-user-sub {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Email */
.users-email {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Role Badge */
.users-role {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.users-role--admin {
    background: rgba(251, 191, 36, 0.15);
    color: #f59e0b;
}

.users-role--content_lead {
    background: rgba(139, 92, 246, 0.15);
    color: var(--purple);
}

.users-role--analyst {
    background: rgba(59, 130, 246, 0.15);
    color: var(--blue);
}

.users-role--payments {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
}

.users-role--automations {
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent);
}

.users-role--va {
    background: rgba(107, 114, 128, 0.15);
    color: var(--text-secondary);
}

.users-role--brand_viewer {
    background: rgba(59, 130, 246, 0.15);
    color: var(--blue);
}

.users-role--brand_admin {
    background: rgba(251, 191, 36, 0.15);
    color: #f59e0b;
}

/* Status Badge */
.users-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.users-status--pending {
    background: rgba(251, 191, 36, 0.15);
    color: var(--warning);
}

.users-status--approved {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
}

.users-status--rejected,
.users-status--denied {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
}

/* Brand Badge */
.users-brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.users-brand--catakor {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.users-brand--jiyu {
    background: rgba(236, 72, 153, 0.15);
    color: #ec4899;
}

.users-brand--physicians_choice {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.users-brand--peach_slices {
    background: rgba(251, 146, 60, 0.15);
    color: #fb923c;
}

.users-brand--yerba_magic {
    background: rgba(132, 204, 22, 0.15);
    color: #84cc16;
}

.users-brand--toplux {
    background: rgba(99, 102, 241, 0.15);
    color: #6366f1;
}

.users-brand--unassigned {
    background: rgba(107, 114, 128, 0.15);
    color: var(--text-muted);
}

/* Date */
.users-date {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.users-date-relative {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0.7;
}

/* Actions */
.users-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.users-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
}

.users-action-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.users-action-btn--approve:hover {
    background: var(--success);
    border-color: var(--success);
}

.users-action-btn--reject:hover {
    background: var(--danger);
    border-color: var(--danger);
}

.users-action-btn--edit:hover {
    background: var(--blue);
    border-color: var(--blue);
}

/* Empty State */
.users-empty {
    text-align: center;
    padding: 60px 40px;
}

.users-empty-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.users-empty-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.users-empty-text {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Tab Content Visibility */
.users-tab-content--hidden {
    display: none !important;
}

/* Pending Section States */
.users-pending-section--hidden {
    display: none !important;
}

/* Info Box Components */
.users-info-box__icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.users-info-box__content {
    flex: 1;
    line-height: 1.5;
}

/* Avatar Variants by Role */
.users-avatar--admin {
    background: linear-gradient(135deg, rgba(255, 77, 141, 0.15), rgba(255, 77, 141, 0.25));
}

.users-avatar--content_lead {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(236, 72, 153, 0.25));
}

.users-avatar--analyst {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.25));
}

.users-avatar--payments {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.25));
}

.users-avatar--automations {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.15), rgba(107, 114, 128, 0.25));
}

.users-avatar--va {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(6, 182, 212, 0.25));
}

.users-avatar--brand {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.25));
}

.users-avatar--warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.25));
}

.users-avatar__img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.users-avatar__initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
}

/* User Info Discord */
.users-user-discord {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Table Cell Variants */
.users-cell-muted {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.users-cell-truncate {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.users-cell-actions {
    text-align: right;
}

.users-th-actions {
    text-align: right !important;
}

/* Table State Cells */
.users-loading-cell,
.users-empty-cell,
.users-error-cell {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.users-error-cell {
    color: var(--danger);
}

/* Filter Select Inline */
.users-filter-select--inline {
    padding: 4px 8px;
    font-size: 0.8rem;
    min-width: auto;
}

/* Button Variants */
.users-btn--secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.users-btn--secondary:hover {
    background: var(--bg-tertiary);
    border-color: var(--text-muted);
}

.users-btn--success {
    background: var(--success);
    color: #fff;
}

.users-btn--success:hover {
    background: #16a34a;
}

.users-btn--danger {
    background: var(--danger);
    color: #fff;
}

.users-btn--danger:hover {
    background: #dc2626;
}

.users-btn--ghost {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid transparent;
}

.users-btn--ghost:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    border-color: rgba(239, 68, 68, 0.2);
}

.users-btn--sm {
    padding: 6px 12px;
    font-size: 0.8rem;
}

.users-btn__icon {
    font-size: 0.9rem;
}

/* Action Buttons Group */
.users-action-btns {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

/* Table Card Warning Variant */
.users-table-card--warning {
    border: 1px solid rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.03);
}

/* Role Badge for Brand */
.users-role--brand {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

/* ==================== EDIT MODAL STYLES ==================== */

.edit-user-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 10px;
    margin-bottom: 20px;
}

.edit-user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.3));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.edit-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.edit-user-info {
    flex: 1;
    min-width: 0;
}

.edit-user-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.edit-user-email {
    font-size: 0.85rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edit-form-group {
    margin-bottom: 16px;
}

.edit-form-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.edit-form-select {
    width: 100%;
    padding: 10px 14px;
    font-size: 0.9rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.edit-form-select:hover {
    border-color: var(--text-muted);
}

.edit-form-select:focus {
    outline: none;
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.modal-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
}

/* ==================== OPS CENTER REDESIGN ==================== */

/* View Header */
.ops-view-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.ops-view-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    letter-spacing: -0.02em;
}

.ops-view-subtitle {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
}

.ops-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Tab Navigation - Segmented Control Style */
.ops-tabs-container {
    margin-bottom: 24px;
}

.ops-tabs-nav {
    display: inline-flex;
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 4px;
    gap: 2px;
}

.ops-tab-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.ops-tab-btn:hover:not(.ops-tab-btn--active) {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.03);
}

.ops-tab-btn--active {
    background: var(--bg-card);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ops-tab-icon {
    font-size: 1rem;
}

.ops-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 10px;
    background: rgba(139, 92, 246, 0.15);
    color: var(--purple);
}

.ops-tab-badge--warning {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.ops-tab-badge--danger {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
}

.ops-tab-badge--hidden {
    display: none;
}

/* Tab Content */
.ops-tab-panel {
    display: none;
    max-width: 100%;
    overflow-x: hidden;
}

.ops-tab-panel--active {
    display: block;
    animation: fadeIn 0.2s ease;
}

/* Section Headers within tabs */
.ops-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.ops-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.ops-section-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 4px 0 0 0;
}

/* Filter Bar */
.ops-filter-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
}

.ops-filter-select {
    padding: 8px 32px 8px 12px;
    font-size: 0.85rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    min-width: 140px;
    transition: border-color 0.15s;
}

.ops-filter-select:hover {
    border-color: var(--text-muted);
}

.ops-filter-select:focus {
    outline: none;
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.ops-filter-spacer {
    flex: 1;
}

.ops-filter-input {
    padding: 8px 12px;
    font-size: 0.85rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    min-width: 180px;
    transition: border-color 0.15s;
}

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

.ops-filter-input:hover {
    border-color: var(--text-muted);
}

.ops-filter-input:focus {
    outline: none;
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.ops-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.ops-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--text-muted);
}

.ops-btn--primary {
    background: var(--purple);
    border-color: var(--purple);
    color: #fff;
}

.ops-btn--primary:hover {
    background: #7c3aed;
    border-color: #7c3aed;
}

.ops-btn--icon {
    padding: 8px;
    min-width: 36px;
    justify-content: center;
}

/* Stats Grid */
.ops-stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 1400px) {
    .ops-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .ops-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ops-stat-card {
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: all 0.15s ease;
}

.ops-stat-card--clickable {
    cursor: pointer;
}

.ops-stat-card--clickable:hover {
    border-color: var(--purple);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ops-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
    line-height: 1.2;
}

.ops-stat-value--hot { color: #f97316; }
.ops-stat-value--rising { color: #22c55e; }
.ops-stat-value--gold { color: #FF4D8D; }
.ops-stat-value--purple { color: var(--purple); }
.ops-stat-value--success { color: var(--success); }
.ops-stat-value--danger { color: var(--danger); }

.ops-stat-loading {
    color: var(--text-muted) !important;
    animation: statPulse 1.5s ease-in-out infinite;
}

@keyframes statPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

.ops-stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.ops-stat-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    font-size: 0.65rem;
    background: var(--bg-tertiary);
    border-radius: 50%;
    color: var(--text-muted);
    cursor: help;
}

/* Table Card */
.ops-table-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
}

.ops-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}

.ops-table-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ops-table-title-icon {
    font-size: 1.1rem;
}

.ops-table {
    width: 100%;
    border-collapse: collapse;
}

.ops-table th {
    text-align: left;
    padding: 12px 16px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.ops-table td {
    padding: 14px 16px;
    font-size: 0.9rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.ops-table tr:last-child td {
    border-bottom: none;
}

.ops-table tr:hover {
    background: rgba(139, 92, 246, 0.03);
}

/* Empty State */
.ops-empty-state {
    padding: 60px 20px;
    text-align: center;
}

.ops-empty-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.ops-empty-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.ops-empty-text {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* ===== OPS CREATORS TAB - ENHANCED COMPONENTS ===== */

/* Pagination Controls */
.ops-pagination {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ops-pagination button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Small Button Variant */
.ops-btn--sm {
    padding: 6px 10px;
    font-size: 0.8rem;
}

.ops-btn--secondary {
    background: var(--bg-tertiary);
    border-color: var(--border);
    color: var(--text-secondary);
}

.ops-btn--secondary:hover {
    background: var(--bg-card);
    border-color: var(--text-muted);
    color: var(--text-primary);
}

/* Actions Dropdown */
.ops-dropdown {
    position: relative;
    display: inline-block;
}

.ops-dropdown-menu {
    position: absolute;
    right: 0;
    top: 100%;
    min-width: 180px;
    padding: 6px 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.15s ease;
}

.ops-dropdown-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(4px);
}

.ops-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.1s ease;
}

.ops-dropdown-item:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.ops-dropdown-item--danger {
    color: var(--danger);
}

.ops-dropdown-item--danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
}

.ops-dropdown-icon {
    font-size: 1rem;
    width: 20px;
    text-align: center;
}

.ops-dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 0;
}

/* Creator Cell in Table - uses .creator-cell from line ~3184 (flex row with avatar left of name) */

.creator-handle {
    font-weight: 600;
    color: var(--text-primary);
}

.creator-brand {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Retainer Badge */
.badge-retainer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--accent);
    color: #000;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 4px;
}

/* Metric Cell */
.metric-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Actions Cell */
.actions-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

/* Sortable Column Headers */
.ops-table th.sortable {
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}

.ops-table th.sortable:hover {
    color: var(--purple);
}

.ops-table th.sortable.sorted {
    color: var(--purple);
}

.ops-table th.sortable::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    vertical-align: middle;
}

.ops-table th.sortable.sorted::after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--purple);
}

/* Loading State */
.ops-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--purple);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 12px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Error State */
.ops-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: var(--danger);
}

.ops-error .error-detail {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 8px 0 16px;
}

/* Table Container */
.ops-table-container {
    overflow-x: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
}

/* Creator Panel (Slide-out) */
.creator-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 200;
}

.creator-panel-overlay.open {
    opacity: 1;
    visibility: visible;
}

.creator-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 90vw;
    height: 100vh;
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform 0.25s ease, visibility 0s 0.25s;
    z-index: 201;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    visibility: hidden;
}

.creator-panel.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.25s ease, visibility 0s 0s;
}

.creator-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}

.creator-panel-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.creator-panel-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.15s;
}

.creator-panel-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.creator-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.creator-panel-section {
    margin-bottom: 24px;
}

.creator-panel-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.creator-panel-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.creator-panel-info-item {
    background: var(--bg-tertiary);
    padding: 12px;
    border-radius: 8px;
}

.creator-panel-info-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.creator-panel-info-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Contact History in Panel */
.contact-history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-history-item {
    background: var(--bg-tertiary);
    padding: 12px;
    border-radius: 8px;
    border-left: 3px solid var(--purple);
}

.contact-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.contact-history-type {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: capitalize;
}

.contact-history-date {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.contact-history-notes {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ==================== NEW PANEL STYLES (Data Dense v2) ==================== */

/* Panel Header */
.panel-header-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.panel-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--purple);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 600;
    flex-shrink: 0;
}

.panel-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.panel-header-info {
    flex: 1;
    min-width: 0;
}

.panel-header-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel-header-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Panel Sections */
.panel-section {
    margin-bottom: 20px;
}

.panel-section--highlight {
    background: var(--bg-tertiary);
    margin-left: -24px;
    margin-right: -24px;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.panel-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.panel-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

/* TikTok Links */
.panel-tiktok-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.panel-tiktok-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.15s;
}

.panel-tiktok-link:hover {
    background: var(--purple);
    color: white;
}

.panel-tiktok-link .link-arrow {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Stats Grid */
.panel-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.panel-stat {
    background: var(--bg-tertiary);
    padding: 12px 8px;
    border-radius: 8px;
    text-align: center;
}

.panel-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.panel-stat-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 2px;
}

/* Status Row */
.panel-status-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.panel-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.panel-status-badge--ghost { background: rgba(107, 114, 128, 0.2); color: #9ca3af; }
.panel-status-badge--behind { background: rgba(239, 68, 68, 0.2); color: #f87171; }
.panel-status-badge--atrisk { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
.panel-status-badge--ontrack { background: rgba(34, 197, 94, 0.2); color: #4ade80; }
.panel-status-badge--star { background: rgba(139, 92, 246, 0.2); color: #a78bfa; }

.panel-retainer-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 6px;
    background: rgba(99, 102, 241, 0.15);
    color: var(--purple);
}

/* Decision Buttons */
.panel-decision-buttons {
    display: flex;
    gap: 8px;
}

.panel-decision-btn {
    flex: 1;
    padding: 10px 12px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.panel-decision-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--text-muted);
}

.panel-decision-btn--active {
    border-width: 2px;
}

.panel-decision-btn--active.panel-decision-btn--keep {
    background: rgba(34, 197, 94, 0.15);
    border-color: var(--success);
    color: var(--success);
}

.panel-decision-btn--active.panel-decision-btn--watch {
    background: rgba(245, 158, 11, 0.15);
    border-color: var(--warning);
    color: var(--warning);
}

.panel-decision-btn--active.panel-decision-btn--cut {
    background: rgba(239, 68, 68, 0.15);
    border-color: var(--danger);
    color: var(--danger);
}

/* Action Buttons */
.panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.panel-action-btn {
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s;
}

.panel-action-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--text-muted);
}

.panel-action-btn--discord {
    background: #5865F2;
    border-color: #5865F2;
    color: white;
}

.panel-action-btn--discord:hover {
    background: #4752C4;
    border-color: #4752C4;
}

/* Contact Form */
.panel-contact-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.panel-contact-row {
    display: flex;
    gap: 8px;
}

.panel-select {
    flex: 1;
    padding: 8px 12px;
    font-size: 0.85rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
}

.panel-select:focus {
    outline: none;
    border-color: var(--purple);
}

.panel-textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 0.85rem;
    font-family: inherit;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    resize: vertical;
    min-height: 60px;
}

.panel-textarea:focus {
    outline: none;
    border-color: var(--purple);
}

.panel-textarea::placeholder {
    color: var(--text-muted);
}

.panel-btn {
    padding: 10px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.panel-btn--primary {
    background: var(--purple);
    color: white;
}

.panel-btn--primary:hover {
    background: var(--purple-dark, #5b4fc4);
}

.panel-btn--primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* History List */
.panel-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.panel-history-item {
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    border-left: 3px solid var(--purple);
}

.panel-history-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}

.panel-history-icon {
    font-size: 0.9rem;
}

.panel-history-type {
    font-weight: 600;
    color: var(--text-primary);
    text-transform: capitalize;
}

.panel-history-time {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.panel-history-notes {
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.panel-empty-text {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Message Templates */
.panel-templates {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.panel-template-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
}

.panel-template-btn:hover {
    background: var(--bg-card);
    border-color: var(--purple);
}

.panel-template-emoji {
    font-size: 1.1rem;
}

.panel-template-label {
    flex: 1;
    font-weight: 500;
}

.panel-template-copy {
    opacity: 0;
    font-size: 0.9rem;
    transition: opacity 0.15s;
}

.panel-template-btn:hover .panel-template-copy {
    opacity: 0.7;
}

.panel-template-btn--checkin { border-left: 3px solid var(--success); }
.panel-template-btn--warning { border-left: 3px solid var(--warning); }
.panel-template-btn--final { border-left: 3px solid var(--danger); }
.panel-template-btn--praise { border-left: 3px solid var(--star); }

.panel-template-preview {
    margin-top: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-secondary);
    white-space: pre-wrap;
    max-height: 120px;
    overflow-y: auto;
}

/* Contact History Delete Button */
.panel-history-delete {
    margin-left: 8px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: 1rem;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    opacity: 0;
    transition: all 0.15s;
}

.panel-history-item:hover .panel-history-delete {
    opacity: 1;
}

.panel-history-delete:hover {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
}

/* Smooth removal animation for deleted items */
.panel-history-item {
    transition: opacity 0.2s, transform 0.2s;
}

/* Account Breakdown */
.panel-account-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.panel-account-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
}

.panel-account-link {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.85rem;
    transition: color 0.15s;
}

.panel-account-link:hover {
    color: var(--purple);
}

.panel-account-stats {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.panel-account-stats--na {
    color: var(--text-muted);
    font-style: italic;
}

/* Posting Sparkline */
.sparkline-cell {
    padding: 4px 8px !important;
    vertical-align: middle;
}

.posting-sparkline {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: default;
}

.sparkline-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 20px;
    min-width: 44px;
}

.sparkline-bar {
    flex: 1;
    min-width: 4px;
    max-width: 6px;
    border-radius: 1px;
    transition: opacity 0.15s;
    min-height: 2px;
}

.sparkline-bar--today {
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-sizing: border-box;
}

.posting-sparkline:hover .sparkline-bar {
    opacity: 0.8;
}

.posting-sparkline:hover .sparkline-bar:hover {
    opacity: 1;
    transform: scaleY(1.1);
}

.sparkline-total {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 16px;
    text-align: right;
}

/* Panel Edit Button */
.panel-edit-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.15s;
}

.panel-edit-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--purple);
    color: var(--purple);
}

/* Custom template indicator */
.panel-template-btn--custom {
    position: relative;
}

.panel-template-btn--custom::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    background: var(--purple);
    border-radius: 50%;
}

/* Template Editor Modal */
.template-editor-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 300;
    padding: 20px;
}

.template-editor-overlay.open {
    display: flex;
}

.template-editor-modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    width: 100%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.template-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.template-editor-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.template-editor-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.15s;
}

.template-editor-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.template-editor-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

.template-editor-info {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0 0 16px 0;
}

.template-editor-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.template-tab {
    padding: 8px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}

.template-tab:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

.template-tab--active {
    background: var(--purple);
    border-color: var(--purple);
    color: white;
}

.template-tab-custom {
    color: var(--purple);
    margin-left: 4px;
}

.template-tab--active .template-tab-custom {
    color: white;
}

.template-edit-pane {
    display: none;
}

.template-edit-pane--active {
    display: block;
}

.template-edit-row {
    margin-bottom: 16px;
}

.template-edit-row label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.template-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 0.9rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    transition: border-color 0.15s;
}

.template-input:focus {
    outline: none;
    border-color: var(--purple);
}

.template-input--emoji {
    width: 60px;
    text-align: center;
    font-size: 1.2rem;
}

.template-textarea {
    width: 100%;
    padding: 12px;
    font-size: 0.9rem;
    font-family: inherit;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
    transition: border-color 0.15s;
}

.template-textarea:focus {
    outline: none;
    border-color: var(--purple);
}

.template-edit-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

.template-btn {
    padding: 10px 18px;
    font-size: 0.9rem;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.template-btn--primary {
    background: var(--purple);
    color: white;
}

.template-btn--primary:hover {
    background: var(--purple-dark, #5b4fc4);
}

.template-btn--secondary {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.template-btn--secondary:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

/* Status Badges */
.ops-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 6px;
    white-space: nowrap;
}

.ops-status-badge--ghost {
    background: rgba(107, 114, 128, 0.15);
    color: #9ca3af;
}

.ops-status-badge--behind {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.ops-status-badge--atrisk {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

.ops-status-badge--ontrack {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

.ops-status-badge--star {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}

.ops-status-badge--cut {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.ops-status-badge--watch {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

.ops-status-badge--keep {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

/* Section Header */
.ops-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.ops-section-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.ops-section-subtitle {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
}

/* ===== CONTACT LOG FORM ===== */

.contact-log-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
}

.form-select,
.form-input,
.form-textarea {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.9rem;
    color: var(--text-primary);
    width: 100%;
    transition: border-color 0.15s;
}

.form-select:focus,
.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

/* Fix select dropdown option styling for dark mode */
.form-select option,
.form-input option,
select.form-input option {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 8px 12px;
}

.form-textarea {
    resize: vertical;
    min-height: 80px;
}

@media (max-width: 600px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   OPS CENTER - VIDEOS TAB
   ========================================================================== */

/* Video Grid Layout */
.ops-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

@media (max-width: 768px) {
    .ops-video-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* Video Card */
.ops-video-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    transition: transform 0.15s, box-shadow 0.15s;
}

.ops-video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.ops-video-card__thumbnail {
    aspect-ratio: 9/16;
    background: var(--bg-card);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ops-video-card__thumbnail .video-thumbnail {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 2rem;
}

.ops-video-card__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ops-video-card__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
}

.ops-video-card__play {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    text-decoration: none;
    transition: background 0.15s;
}

.ops-video-card__play:hover {
    background: rgba(0, 0, 0, 0.9);
}

.ops-video-card__content {
    padding: 12px;
}

.ops-video-card__title {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}

.ops-video-card__creator {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.ops-video-card__creator a {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.8rem;
}

.ops-video-card__creator a:hover {
    text-decoration: underline;
}

.ops-video-card__brand {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.ops-video-card__stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ops-video-card__gmv {
    font-weight: 700;
    color: var(--success);
}

.ops-video-card__orders {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Efficiency Card */
.ops-efficiency-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid var(--border);
    transition: transform 0.15s, box-shadow 0.15s;
}

.ops-efficiency-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ops-efficiency-card__header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 12px;
}

.ops-efficiency-card__creator {
    flex: 1;
    min-width: 0;
}

.ops-efficiency-card__name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.ops-efficiency-card__brand {
    display: inline-block;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
}

.ops-efficiency-card__rate {
    text-align: right;
}

.ops-efficiency-card__rate-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--success);
}

.ops-efficiency-card__rate-label {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.ops-efficiency-card__stats {
    display: flex;
    gap: 16px;
}

.ops-efficiency-card__stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.ops-efficiency-card__stat-value {
    font-weight: 600;
    color: var(--text-primary);
}

.ops-efficiency-card__stat-value--success {
    color: var(--success);
}

/* Videos Tab Table Cells */
.ops-table-cell--title {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ops-table-cell--center {
    text-align: center;
}

.ops-table-cell--right {
    text-align: right;
}

.ops-table-cell--muted {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.ops-table-cell--gmv {
    font-weight: 600;
    color: var(--success);
}

.ops-table-empty {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

/* Video Links */
.ops-video-link {
    color: var(--text-primary);
    text-decoration: none;
}

.ops-video-link:hover {
    color: var(--accent);
}

.ops-creator-link {
    color: var(--accent);
    text-decoration: none;
}

.ops-creator-link:hover {
    text-decoration: underline;
}

/* Status Icons */
.ops-managed-icon {
    margin-right: 4px;
}

.ops-hot-icon {
    color: #f97316;
}

.ops-check-icon {
    color: var(--success);
}

.ops-muted-icon {
    color: var(--text-muted);
}

/* Videos Empty State */
.ops-videos-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

/* Section Headers (Videos Tab) */
.ops-video-section {
    margin-bottom: 32px;
}

.ops-video-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s;
    margin-bottom: 16px;
}

.ops-video-section-header:hover {
    background: var(--bg-tertiary);
}

.ops-video-section-header--hot {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.05));
    border: 1px solid rgba(249, 115, 22, 0.2);
}

.ops-video-section-header--rising {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(22, 163, 74, 0.05));
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.ops-video-section-header--top {
    background: linear-gradient(135deg, rgba(255, 77, 141, 0.1), rgba(202, 138, 4, 0.05));
    border: 1px solid rgba(255, 77, 141, 0.2);
}

.ops-video-section-header--efficiency {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(124, 58, 237, 0.05));
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.ops-video-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-primary);
}

.ops-video-section-count {
    background: var(--bg-card);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.ops-video-section-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ops-video-section-toggle {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Show More Button Container */
.ops-show-more {
    text-align: center;
    margin-top: 16px;
}

.ops-show-more button {
    padding: 8px 20px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
}

.ops-show-more button:hover {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

/* Status Badges */
.ops-status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.ops-status-badge--ghost {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.ops-status-badge--behind {
    background: rgba(249, 115, 22, 0.15);
    color: #f97316;
}

.ops-status-badge--atrisk {
    background: rgba(234, 179, 8, 0.15);
    color: #FF6FA3;
}

.ops-status-badge--ontrack {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.ops-status-badge--star {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.ops-status-badge--cut {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.ops-status-badge--watch {
    background: rgba(234, 179, 8, 0.15);
    color: #FF6FA3;
}

.ops-status-badge--keep {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

/* ==================== CREATOR IDENTITY COMPONENT ==================== */

/* Base identity container */
.creator-identity {
    display: flex;
    align-items: center;
    gap: 10px;
}

.creator-identity--clickable {
    cursor: pointer;
    border-radius: 8px;
    padding: 4px;
    margin: -4px;
    transition: background 0.15s;
}

.creator-identity--clickable:hover {
    background: var(--bg-tertiary);
}

/* Avatar sizes */
.creator-avatar {
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.creator-avatar--sm { width: 24px; height: 24px; font-size: 0.65rem; }
.creator-avatar--md { width: 32px; height: 32px; font-size: 0.75rem; }
.creator-avatar--lg { width: 40px; height: 40px; font-size: 0.85rem; }
.creator-avatar--xl { width: 48px; height: 48px; font-size: 1rem; }

/* Placeholder avatar with initials */
.creator-avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
}

/* Identity info */
.creator-identity__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.creator-identity__name {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.creator-identity--sm .creator-identity__name { font-size: 0.85rem; }
.creator-identity--md .creator-identity__name { font-size: 0.9rem; }
.creator-identity--lg .creator-identity__name { font-size: 1rem; }
.creator-identity--xl .creator-identity__name { font-size: 1.1rem; }

.creator-identity__handle {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.creator-identity__handle--link {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.15s;
}

.creator-identity__handle--link:hover {
    color: var(--purple);
    text-decoration: underline;
}

.creator-identity__brand {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 6px;
    font-size: 0.65rem;
    font-weight: 600;
    border-radius: 4px;
    background: color-mix(in srgb, var(--brand-color) 15%, transparent);
    color: var(--brand-color);
}

/* ==================== ALERT BAR COMPONENT ==================== */

.ops-alert-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.ops-alert-bar--loading {
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.ops-alert-bar__alerts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ops-alert-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
}

.ops-alert-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.ops-alert-chip__icon {
    font-size: 0.9rem;
}

.ops-alert-chip__count {
    font-weight: 700;
}

.ops-alert-chip__label {
    color: var(--text-muted);
    font-weight: 500;
}

/* Alert chip colors */
.ops-alert-chip--ghost {
    border-color: rgba(239, 68, 68, 0.3);
}
.ops-alert-chip--ghost .ops-alert-chip__count { color: #ef4444; }
.ops-alert-chip--ghost:hover { background: rgba(239, 68, 68, 0.1); border-color: #ef4444; }

.ops-alert-chip--behind {
    border-color: rgba(249, 115, 22, 0.3);
}
.ops-alert-chip--behind .ops-alert-chip__count { color: #f97316; }
.ops-alert-chip--behind:hover { background: rgba(249, 115, 22, 0.1); border-color: #f97316; }

.ops-alert-chip--atrisk {
    border-color: rgba(234, 179, 8, 0.3);
}
.ops-alert-chip--atrisk .ops-alert-chip__count { color: #FF6FA3; }
.ops-alert-chip--atrisk:hover { background: rgba(234, 179, 8, 0.1); border-color: #FF6FA3; }

.ops-alert-chip--ontrack {
    border-color: rgba(34, 197, 94, 0.3);
}
.ops-alert-chip--ontrack .ops-alert-chip__count { color: #22c55e; }
.ops-alert-chip--ontrack:hover { background: rgba(34, 197, 94, 0.1); border-color: #22c55e; }

.ops-alert-chip--warning {
    border-color: rgba(168, 85, 247, 0.3);
    margin-left: 8px;
}
.ops-alert-chip--warning .ops-alert-chip__count { color: #a855f7; }
.ops-alert-chip--warning:hover { background: rgba(168, 85, 247, 0.1); border-color: #a855f7; }

.ops-alert-chip--zero {
    opacity: 0.5;
}

/* Alert bar stats */
.ops-alert-bar__stats {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.ops-alert-bar__stat strong {
    color: var(--text-primary);
    font-weight: 600;
}

.ops-alert-bar__divider {
    color: var(--text-muted);
}

/* ==================== CREATOR CARD COMPONENT ==================== */

.ops-creator-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    position: relative;
    transition: all 0.15s;
}

.ops-creator-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-color: var(--text-muted);
}

.ops-creator-card__badge {
    position: absolute;
    top: -8px;
    right: 12px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
}

.ops-creator-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
    gap: 12px;
}

.ops-creator-card__metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

.ops-metric-box {
    text-align: center;
    padding: 10px 8px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.ops-metric-box__value {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
}

.ops-metric-box__value--success { color: var(--success); }
.ops-metric-box__value--blue { color: var(--blue); }
.ops-metric-box__value--warning { color: var(--warning); }
.ops-metric-box__value--danger { color: var(--danger); }

.ops-metric-box__label {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.ops-creator-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.ops-creator-card__videos {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.ops-creator-card__actions {
    display: flex;
    gap: 6px;
}

/* Compact creator row */
.ops-creator-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: all 0.15s;
}

.ops-creator-row:hover {
    background: var(--bg-secondary);
    border-color: var(--text-muted);
}

.ops-creator-row__metrics {
    display: flex;
    gap: 16px;
    margin-left: auto;
}

.ops-metric {
    font-size: 0.85rem;
    font-weight: 600;
}

.ops-metric--gmv { color: var(--success); }
.ops-metric--roi { font-size: 0.8rem; }

.ops-creator-row__actions {
    display: flex;
    gap: 6px;
}

/* Status badge additions for creator cards */
.ops-status-badge--active {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.ops-status-badge--on-hold {
    background: rgba(234, 179, 8, 0.15);
    color: #FF6FA3;
}

.ops-status-badge--churned {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}

/* ==================== ACTION QUEUE COMPONENT (Row-based) ==================== */

.action-queue {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
}

.action-queue--empty {
    background: var(--bg-secondary);
    border-color: transparent;
}

.action-queue__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--border);
}

.action-queue--empty .action-queue__header {
    border-bottom: none;
}

.action-queue__header:hover {
    background: var(--bg-hover);
}

.action-queue__icon {
    font-size: 1.25rem;
}

.action-queue__header-text {
    flex: 1;
}

.action-queue__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.action-queue__subtitle {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.action-queue__toggle {
    font-size: 0.7rem;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.action-queue--collapsed .action-queue__toggle {
    transform: rotate(-90deg);
}

.action-queue--collapsed .action-queue__body {
    display: none;
}

.action-queue__body {
    padding: 0;
}

.action-queue__list {
    display: flex;
    flex-direction: column;
}

.action-queue__hidden {
    display: none;
}

.action-queue__hidden--expanded {
    display: block;
}

.action-queue__expand-btn {
    display: block;
    width: 100%;
    padding: 10px;
    background: var(--bg-secondary);
    border: none;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
}

.action-queue__expand-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Action Row */
.action-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
}

.action-row:last-child {
    border-bottom: none;
}

.action-row:hover {
    background: var(--bg-hover);
}

.action-row__reason {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.action-row__creator {
    flex: 1;
    min-width: 0;
}

.action-row__name {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.action-row__handle {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.action-row__brand {
    width: 100px;
    font-size: 0.75rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.action-row__detail {
    width: 80px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: center;
    flex-shrink: 0;
}

.action-row__actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.action-row__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.1s;
}

.action-row__btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--text-muted);
}

.action-row__btn--discord {
    background: #5865F2;
    border-color: #5865F2;
}

.action-row__btn--discord:hover {
    background: #4752C4;
}

/* Row color variants */
.action-row--ghost {
    border-left: 3px solid var(--ghost, #9ca3af);
}

.action-row--danger {
    border-left: 3px solid var(--danger, #ef4444);
}

.action-row--warning {
    border-left: 3px solid var(--warning, #f59e0b);
}

.action-row--followup {
    border-left: 3px solid var(--accent, #6366f1);
    background: var(--bg-secondary);
}

/* Responsive */
@media (max-width: 768px) {
    .action-row__brand {
        display: none;
    }
    .action-row__detail {
        width: 60px;
    }
}

/* Legacy Action Card styles (kept for compatibility) */
.action-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.action-card__menu {
    position: absolute;
    bottom: 48px;
    right: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 100;
    min-width: 140px;
    display: none;
}

.action-card__menu.open {
    display: block;
}

.action-card__menu button {
    display: block;
    width: 100%;
    padding: 10px 14px;
    text-align: left;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
}

.action-card__menu button:hover {
    background: var(--bg-secondary);
}

.action-card__menu hr {
    margin: 4px 0;
    border: none;
    border-top: 1px solid var(--border);
}

/* Follow-ups Due (kept for compatibility) */
.action-queue__followups {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.action-queue__followups-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px 0;
}

.action-queue__followups-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.action-queue__followup-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.action-queue__followup-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.action-queue__followup-notes {
    flex: 1;
    font-size: 0.85rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==================== OUTREACH PULSE COMPONENT ==================== */

.pulse-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
}

.pulse-section--empty {
    padding: 24px;
}

.pulse-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
}

.pulse-empty__icon {
    font-size: 1.5rem;
}

.pulse-empty__text {
    font-size: 0.95rem;
    color: var(--text-muted);
}

.pulse-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.pulse-header:hover {
    background: var(--bg-tertiary);
}

.pulse-header__left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.pulse-header__icon {
    font-size: 1.3rem;
}

.pulse-header__text {
    display: flex;
    flex-direction: column;
}

.pulse-header__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.pulse-header__subtitle {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.pulse-header__badges {
    display: flex;
    gap: 8px;
    margin-right: 16px;
}

.pulse-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.pulse-badge--fire {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.pulse-badge--bot {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.pulse-badge--personal {
    background: rgba(147, 51, 234, 0.2);
    color: #9333ea;
}

.pulse-header__toggle {
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.pulse-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Pulse Category */
.pulse-category {
    background: var(--category-bg);
    border: 1px solid var(--category-border);
    border-radius: 10px;
    overflow: hidden;
}

.pulse-category__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--category-border);
    flex-wrap: wrap;
}

.pulse-category__title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.pulse-category__title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--category-text);
    letter-spacing: 0.5px;
}

.pulse-category__count {
    background: var(--category-text);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

.pulse-category__subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
    flex-basis: 100%;
    margin-top: -4px;
}

.pulse-category__action {
    margin-left: auto;
}

.pulse-category__list {
    display: flex;
    flex-direction: column;
}

.pulse-category__hidden {
    display: none;
}

.pulse-category__hidden--expanded {
    display: flex;
    flex-direction: column;
}

.pulse-category__expand {
    display: block;
    width: 100%;
    padding: 10px;
    background: none;
    border: none;
    border-top: 1px solid var(--category-border);
    color: var(--category-text);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s;
}

.pulse-category__expand:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Pulse Row */
.pulse-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}

.pulse-row:last-child {
    border-bottom: none;
}

.pulse-row:hover {
    background: rgba(0, 0, 0, 0.03);
}

.pulse-row__identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 200px;
    flex: 1;
}

.pulse-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    flex-shrink: 0;
    object-fit: cover;
}

.pulse-row__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pulse-row__name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pulse-row__handle {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pulse-row__metrics {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}

.pulse-row__metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
}

.pulse-row__metric-value {
    font-weight: 600;
    font-size: 0.9rem;
    font-family: 'Space Mono', monospace;
    color: var(--text-primary);
}

.pulse-row__metric-value--money {
    color: var(--success);
}

.pulse-row__metric-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pulse-row__reason {
    flex: 1;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
    min-width: 120px;
    max-width: 180px;
}

.pulse-row__actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.pulse-row__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.15s;
}

.pulse-row__btn:hover {
    background: var(--bg-secondary);
    border-color: var(--text-muted);
}

.pulse-row__btn--danger {
    border-color: var(--danger);
    color: var(--danger);
}

.pulse-row__btn--danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* Responsive */
@media (max-width: 900px) {
    .pulse-row {
        flex-wrap: wrap;
    }

    .pulse-row__reason {
        flex-basis: 100%;
        max-width: none;
        margin-top: 8px;
    }

    .pulse-row__metrics {
        gap: 12px;
    }
}

@media (max-width: 600px) {
    .pulse-header__badges {
        display: none;
    }

    .pulse-row__metrics {
        gap: 8px;
    }

    .pulse-row__metric {
        min-width: 40px;
    }

    .pulse-row__metric-value {
        font-size: 0.8rem;
    }
}

/* ==================== PORTFOLIO SNAPSHOT COMPONENT ==================== */

.portfolio-snapshot {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 2fr;
    gap: 16px;
    margin-bottom: 20px;
}

.portfolio-snapshot--loading {
    grid-column: 1 / -1;
    padding: 32px;
    text-align: center;
    color: var(--text-muted);
    background: var(--bg-card);
    border-radius: 12px;
}

.portfolio-snapshot__stats {
    display: contents;
}

/* Portfolio Stat Cards - Match dashboard stat-card styling */
.portfolio-stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 90px;
}

.portfolio-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    opacity: 0;
    transition: opacity 0.2s;
}

.portfolio-stat:hover {
    border-color: var(--border-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.portfolio-stat:hover::before {
    opacity: 1;
}

.portfolio-stat--creators::before { background: var(--accent); }
.portfolio-stat--retainer::before { background: var(--purple); }
.portfolio-stat--gmv::before { background: var(--success); }
.portfolio-stat--roi::before { background: var(--warning); }

.portfolio-stat__value {
    font-size: 1.75rem;
    font-weight: 700;
    font-family: 'Space Mono', monospace;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 6px;
    display: block;
}

.portfolio-stat__value--purple { color: var(--purple); }
.portfolio-stat__value--success { color: var(--success); }
.portfolio-stat__value--danger { color: var(--danger); }

.portfolio-stat__label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
}

/* Health Section */
.portfolio-snapshot__health {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: center;
}

/* Health Bar */
.health-bar {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.health-bar__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

.health-bar__label {
    color: var(--text-secondary);
    font-weight: 500;
}

.health-bar__value {
    color: var(--text-primary);
    font-weight: 600;
    font-family: 'Space Mono', monospace;
}

.health-bar__track {
    height: 10px;
    background: var(--bg-tertiary);
    border-radius: 5px;
    overflow: hidden;
}

.health-bar__fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.5s ease;
}

.health-bar__fill--good { background: linear-gradient(90deg, var(--success), #4ade80); }
.health-bar__fill--warning { background: linear-gradient(90deg, var(--warning), #fbbf24); }
.health-bar__fill--danger { background: linear-gradient(90deg, var(--danger), #f87171); }

@media (max-width: 1100px) {
    .portfolio-snapshot {
        grid-template-columns: repeat(2, 1fr);
    }

    .portfolio-snapshot__health {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .portfolio-snapshot {
        grid-template-columns: 1fr 1fr;
    }
}

/* ==================== SNAPSHOT V2 COMPONENT ==================== */

.snapshot-v2 {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
}

.snapshot-v2--loading {
    padding: 40px;
    text-align: center;
    color: var(--text-muted);
}

/* Metrics Row */
.snapshot-v2__metrics {
    display: flex;
    gap: 24px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.snapshot-v2__metric {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.snapshot-v2__icon {
    font-size: 1.5rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: 10px;
}

.snapshot-v2__data {
    display: flex;
    flex-direction: column;
}

.snapshot-v2__value {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'Space Mono', monospace;
    color: var(--text-primary);
    line-height: 1.2;
}

.snapshot-v2__value--purple { color: var(--purple); }
.snapshot-v2__value--success { color: var(--success); }
.snapshot-v2__value--danger { color: var(--danger); }

.snapshot-v2__label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Status Breakdown */
.snapshot-v2__breakdown {
    margin-bottom: 20px;
}

.snapshot-v2__breakdown-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.snapshot-v2__statuses {
    display: flex;
    gap: 10px;
}

.status-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border-radius: 10px;
    border: 1px solid transparent;
    transition: all 0.2s;
    cursor: default;
    flex: 1;
}

.status-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.status-chip__icon {
    font-size: 1.1rem;
}

.status-chip__count {
    font-size: 1.25rem;
    font-weight: 700;
    font-family: 'Space Mono', monospace;
}

.status-chip__label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-chip--ghost { border-color: var(--ghost); }
.status-chip--ghost .status-chip__count { color: var(--ghost); }

.status-chip--behind { border-color: var(--behind); }
.status-chip--behind .status-chip__count { color: var(--behind); }

.status-chip--atrisk { border-color: var(--atrisk); }
.status-chip--atrisk .status-chip__count { color: var(--atrisk); }

.status-chip--ontrack { border-color: var(--ontrack); }
.status-chip--ontrack .status-chip__count { color: var(--ontrack); }

.status-chip--star { border-color: var(--gold); }
.status-chip--star .status-chip__count { color: var(--gold); }

/* Footer Row */
.snapshot-v2__footer {
    display: flex;
    gap: 24px;
    align-items: stretch;
}

.snapshot-v2__health {
    flex: 1;
    display: flex;
    gap: 16px;
}

.health-bar-v2 {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.health-bar-v2__header {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.health-bar-v2__pct {
    font-weight: 700;
    font-family: 'Space Mono', monospace;
}

.health-bar-v2__pct--good { color: var(--success); }
.health-bar-v2__pct--warning { color: var(--warning); }
.health-bar-v2__pct--danger { color: var(--danger); }

.health-bar-v2__track {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.health-bar-v2__fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.health-bar-v2__fill--good { background: linear-gradient(90deg, var(--success), #4ade80); }
.health-bar-v2__fill--warning { background: linear-gradient(90deg, var(--warning), #fbbf24); }
.health-bar-v2__fill--danger { background: linear-gradient(90deg, var(--danger), #f87171); }

/* Action Badges */
.snapshot-v2__actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.action-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
}

.action-badge__count {
    font-weight: 700;
    font-family: 'Space Mono', monospace;
}

.action-badge--warning {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.action-badge--danger {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.action-badge--success {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

@media (max-width: 900px) {
    .snapshot-v2__metrics {
        flex-wrap: wrap;
    }
    .snapshot-v2__metric {
        flex: 0 0 calc(50% - 12px);
    }
    .snapshot-v2__statuses {
        flex-wrap: wrap;
    }
    .status-chip {
        flex: 0 0 calc(33% - 7px);
    }
    .snapshot-v2__footer {
        flex-direction: column;
    }
}

/* ==================== CREATOR SECTION COMPONENT ==================== */

.creator-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
}

.creator-section--collapsed .creator-section__content {
    display: none;
}

.creator-section--collapsed .creator-section__toggle {
    transform: rotate(-90deg);
}

.creator-section__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.15s;
}

.creator-section__header:hover {
    background: var(--bg-secondary);
}

.creator-section__header--ghost { border-left: 4px solid var(--ghost); }
.creator-section__header--behind { border-left: 4px solid var(--behind); }
.creator-section__header--atrisk { border-left: 4px solid var(--atrisk); }
.creator-section__header--ontrack { border-left: 4px solid var(--ontrack); }
.creator-section__header--star { border-left: 4px solid var(--gold); }
.creator-section__header--purple { border-left: 4px solid var(--purple); }
.creator-section__header--neutral { border-left: 4px solid var(--text-muted); }

.creator-section__icon {
    font-size: 1.2rem;
}

.creator-section__info {
    flex: 1;
}

.creator-section__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.creator-section__subtitle {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 2px;
    display: block;
}

.creator-section__count {
    font-size: 1rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 16px;
    background: var(--bg-tertiary);
}

.creator-section__count--ghost { background: rgba(239, 68, 68, 0.15); color: var(--ghost); }
.creator-section__count--behind { background: rgba(249, 115, 22, 0.15); color: var(--behind); }
.creator-section__count--atrisk { background: rgba(234, 179, 8, 0.15); color: var(--atrisk); }
.creator-section__count--ontrack { background: rgba(34, 197, 94, 0.15); color: var(--ontrack); }
.creator-section__count--star { background: rgba(255, 77, 141, 0.15); color: var(--gold); }
.creator-section__count--purple { background: rgba(139, 92, 246, 0.15); color: var(--purple); }

.creator-section__toggle {
    font-size: 0.8rem;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.creator-section__content {
    padding: 16px;
    border-top: 1px solid var(--border);
}

.creator-section__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.creator-section__empty {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.creator-section__more {
    text-align: center;
    margin-top: 16px;
}

/* ==========================================================================
   TRIAGE TIER SECTIONS (Creator Triage View)
   ========================================================================== */

.tier-section {
    background: var(--bg-card);
    border-radius: 16px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    overflow: hidden;
}

.tier-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: background 0.15s;
}

.tier-header:hover {
    background: var(--bg-tertiary);
}

.tier-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.tier-content.expanded {
    max-height: 2000px;
    padding: 16px;
    border-top: 1px solid var(--border);
}

.tier-chevron {
    transition: transform 0.2s;
}

.tier-content.expanded + .tier-header .tier-chevron,
.tier-section:has(.tier-content.expanded) .tier-chevron {
    transform: rotate(180deg);
}

/* Section Card */
.section-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    transition: all 0.15s;
    cursor: pointer;
}

.section-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    border-color: var(--text-muted);
    background: var(--bg-card);
}

.section-card .creator-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-card .creator-avatar {
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
}

.section-card .creator-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.section-card .creator-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section-card .creator-handle {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.section-card--ghost { border-top: 3px solid var(--ghost); }
.section-card--behind { border-top: 3px solid var(--behind); }
.section-card--atrisk { border-top: 3px solid var(--atrisk); }
.section-card--ontrack { border-top: 3px solid var(--ontrack); }
.section-card--star { border-top: 3px solid var(--gold); }
.section-card--purple { border-top: 3px solid var(--purple); }

/* Video dump indicator - flags when most posts came on 1 day */
.section-card--dump {
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.4);
}
.video-dump-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.65rem;
    font-weight: 600;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.15);
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

.section-card__header {
    margin-bottom: 12px;
}

.section-card__metrics {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.section-card__metric {
    display: flex;
    flex-direction: column;
}

.section-card__metric-value {
    font-size: 0.95rem;
    font-weight: 700;
}

.section-card__metric-value--success { color: var(--success); }

.section-card__metric-label {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.section-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.section-card__brand {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.section-card__actions {
    display: flex;
    gap: 4px;
}

.section-card__action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: var(--bg-card);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.15s;
}

.section-card__action:hover {
    background: var(--bg-tertiary);
}

/* ==================== VIDEO MODAL ==================== */

.ops-video-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.ops-video-modal--open {
    display: flex;
}

.ops-video-modal__content {
    background: var(--bg-card);
    border-radius: 16px;
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.ops-video-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 24px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s;
}

.ops-video-modal__close:hover {
    background: rgba(0, 0, 0, 0.8);
}

.ops-video-modal__header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.ops-video-modal__creator {
    font-size: 0.85rem;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 4px;
}

.ops-video-modal__title {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ops-video-modal__embed {
    background: #000;
    width: 100%;
    height: 0;
    padding-bottom: 177.78%; /* 9:16 aspect ratio */
    position: relative;
    overflow: hidden;
}

.ops-video-modal__embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.ops-video-modal__loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: white;
    text-align: center;
}

.ops-video-modal__stats {
    display: flex;
    padding: 16px 20px;
    gap: 20px;
    border-top: 1px solid var(--border);
}

.ops-video-modal__stat {
    flex: 1;
    text-align: center;
}

.ops-video-modal__stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
}

.ops-video-modal__stat-value--success {
    color: var(--success);
}

.ops-video-modal__stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.ops-video-modal__link {
    display: inline-block;
    padding: 8px 16px;
    background: var(--bg-tertiary);
    color: var(--accent);
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    transition: background 0.2s;
}

.ops-video-modal__link:hover {
    background: var(--bg-secondary);
}

/* Video thumbnail placeholder styling */
.video-thumbnail {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
    border-radius: 8px;
    font-size: 2rem;
    color: var(--text-muted);
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* Video card thumbnail area */
.ops-video-card__thumbnail {
    position: relative;
    aspect-ratio: 9/16;
    background: var(--bg-tertiary);
    border-radius: 8px;
    overflow: hidden;
}

.ops-video-card__thumbnail::after {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    transition: background 0.2s ease;
    pointer-events: none;
}

.ops-video-card__thumbnail:hover::after {
    background: rgba(0, 0, 0, 0.35);
}

.ops-video-card__thumbnail:hover .ops-video-card__play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.ops-video-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.85);
    background: var(--accent);
    color: #000;
    padding: 12px 20px;
    border-radius: 24px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    opacity: 0;
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

@media (max-width: 600px) {
    .ops-video-modal__content {
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .ops-video-modal__embed {
        max-height: 70vh;
    }
}

/* ==========================================================================
   MANAGERS VIEW
   ========================================================================== */

.managers-tab-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.managers-tab-btn:hover:not(.managers-tab-btn--active) {
    background: rgba(255,255,255,0.05);
    color: var(--text-secondary);
}

.managers-tab-btn--active {
    background: var(--bg-card);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.managers-tab-content--hidden {
    display: none !important;
}

/* Trend indicators */
.trend--up {
    color: var(--success);
}

.trend--down {
    color: var(--danger);
}

/* ==========================================================================
   PAYMENTS VIEW - Verification & Workflow
   ========================================================================== */

/* Posts Indicator */
.posts-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}

.posts-indicator.posts-met {
    background: var(--success-dim);
    color: var(--success);
}

.posts-indicator.posts-close {
    background: var(--warning-dim);
    color: var(--warning);
}

.posts-indicator.posts-behind {
    background: rgba(249, 115, 22, 0.15);
    color: #f97316;
}

.posts-indicator.posts-failed {
    background: var(--danger-dim);
    color: var(--danger);
}

/* Verified Row Highlight */
.row-verified {
    background: rgba(34, 197, 94, 0.05);
}

.row-verified:hover {
    background: rgba(34, 197, 94, 0.1);
}

/* Payment Action Buttons */
.btn-xs {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--blue-dim);
    color: var(--blue);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-xs:hover {
    background: var(--blue);
    color: white;
}

/* Payment Status Flow */
.payment-status-flow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.payment-status-flow__step {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--bg-tertiary);
}

.payment-status-flow__step--active {
    background: var(--accent-dim);
    color: var(--accent);
    font-weight: 600;
}

.payment-status-flow__step--complete {
    background: var(--success-dim);
    color: var(--success);
}

/* Verification Badge */
.verification-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.verification-badge--verified {
    background: var(--success-dim);
    color: var(--success);
}

.verification-badge--pending {
    background: var(--warning-dim);
    color: var(--warning);
}

.verification-badge--failed {
    background: var(--danger-dim);
    color: var(--danger);
}

/* ==========================================================================
   RETAINER CLAIMS - Workflow Dashboard
   ========================================================================== */

/* Summary Bar (Stage Chips) */
.claims-summary-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.claims-stage-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
    min-width: 160px;
}

.claims-stage-chip:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.claims-stage-chip .chip-icon {
    font-size: 1.25rem;
}

.claims-stage-chip .chip-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.claims-stage-chip .chip-count {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.claims-stage-chip .chip-amount {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--success);
    margin-left: auto;
}

/* Chip color variants */
.claims-stage-chip.pending-chip:hover {
    border-color: var(--blue);
    background: var(--blue-dim);
}

.claims-stage-chip.ready-chip:hover {
    border-color: var(--success);
    background: var(--success-dim);
}

.claims-stage-chip.queue-chip:hover {
    border-color: var(--purple);
    background: var(--purple-dim);
}

.claims-stage-chip.paid-chip:hover {
    border-color: var(--success);
    background: var(--success-dim);
}

/* Actions Bar */
.claims-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    flex-wrap: wrap;
}

.claims-actions-left,
.claims-actions-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Claims Sections Container */
.claims-sections-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Claims Section */
.claims-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.claims-section__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    cursor: pointer;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
}

.claims-section__header:hover {
    background: var(--bg-tertiary);
}

.claims-section__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 1rem;
}

.claims-section__title .section-icon {
    font-size: 1.1rem;
}

.claims-section__title .section-count {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
}

.claims-section__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.claims-section__actions .section-toggle {
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.claims-section.collapsed .section-toggle {
    transform: rotate(-90deg);
}

.claims-section__content {
    padding: 0;
}

.claims-section__content table {
    width: 100%;
    border-collapse: collapse;
}

.claims-section__content table th,
.claims-section__content table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.claims-section__content table th {
    background: var(--bg-tertiary);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.claims-section__content table tbody tr:hover {
    background: var(--bg-secondary);
}

/* When content has payment queue groups instead of table */
.claims-section__content .payment-queue-group:first-child {
    margin-top: 16px;
}

.claims-section__content .payment-queue-group {
    margin: 0 16px 16px 16px;
}

.claims-loading {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

/* Empty State */
.claims-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.claims-empty__icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.claims-empty__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.claims-empty__text {
    font-size: 0.85rem;
}

/* Claim Card */
.claim-card {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.claim-card:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.claim-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 14px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.claim-card__creator {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.claim-card__handle {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.claim-card__discord {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.claim-card__amount-area {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.claim-card__brand {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.claim-card__amount {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--success);
}

.claim-card__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.claim-card__stat {
    text-align: center;
}

.claim-card__stat-value {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.claim-card__stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.claim-card__period {
    padding: 10px 16px;
    font-size: 0.8rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
}

.claim-card__actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
}

.claim-card__actions .btn {
    flex: 1;
    justify-content: center;
}

/* Status indicators for claim cards */
.claim-card--pending {
    border-left: 3px solid var(--blue);
}

.claim-card--ready {
    border-left: 3px solid var(--success);
}

.claim-card--queue {
    border-left: 3px solid var(--purple);
}

.claim-card--paid {
    border-left: 3px solid var(--text-muted);
}

/* Payment Queue Groups */
.payment-queue-group {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.payment-queue-group__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.payment-queue-group__title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.payment-queue-group__brand {
    font-weight: 600;
    font-size: 1rem;
}

.payment-queue-group__method {
    font-size: 0.85rem;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--bg-tertiary);
}

.payment-queue-group__summary {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.payment-queue-group__summary strong {
    color: var(--success);
    font-weight: 600;
}

.payment-queue-group__actions {
    display: flex;
    gap: 8px;
}

.payment-queue-group__content {
    padding: 16px 20px;
}

.payment-queue-group__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.payment-queue-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.payment-queue-item__creator {
    font-weight: 500;
    font-size: 0.9rem;
}

.payment-queue-item__amount {
    font-weight: 600;
    color: var(--success);
}

/* Quick Claim Modal Styles */
#quickClaimCreatorsList tr {
    border-bottom: 1px solid var(--border);
}

#quickClaimCreatorsList tr:hover {
    background: var(--bg-tertiary);
}

#quickClaimCreatorsList tr.has-existing-claim {
    opacity: 0.5;
}

#quickClaimCreatorsList tr.has-existing-claim td:last-child {
    color: var(--warning);
}

/* ==================== COMMISSIONS VIEW ==================== */

/* Drag-over state for upload area */
#commissionsUploadArea.drag-over {
    border-color: var(--accent) !important;
    background: rgba(99, 102, 241, 0.1) !important;
}

/* Status filter buttons */
#commStatusFilters .btn-xs {
    background: transparent;
    border: none;
    color: var(--text-muted);
    transition: all 0.2s;
}

#commStatusFilters .btn-xs:hover {
    color: var(--text-primary);
}

#commStatusFilters .btn-xs.active {
    background: var(--accent);
    color: white;
    border-radius: 6px;
}

/* 1% creator badge */
.pct-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
}

.pct-badge--known {
    background: var(--success-dim);
    color: var(--success);
}

.pct-badge--unknown {
    background: var(--warning-dim);
    color: var(--warning);
}

/* Settlement status badges */
.settlement-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
}

.settlement-badge--completed {
    background: var(--success-dim);
    color: var(--success);
}

.settlement-badge--processing {
    background: var(--warning-dim);
    color: var(--warning);
}

/* Add to 1% button */
.btn-add-1pct {
    padding: 4px 8px;
    font-size: 0.7rem;
    background: var(--accent-dim);
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-add-1pct:hover {
    background: var(--accent);
    color: white;
}

/* ==================== CAMPAIGNS VIEW ==================== */

/* Campaign Cards */
.campaign-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

.campaign-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.campaign-card__accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.campaign-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-top: 4px;
}

.campaign-card__brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.campaign-card__status {
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.campaign-card__status--active {
    background: rgba(5, 150, 105, 0.1);
    color: #059669;
}

.campaign-card__status--paused {
    background: rgba(217, 119, 6, 0.1);
    color: #d97706;
}

.campaign-card__status--inactive {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.campaign-card__title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.campaign-card__desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    line-height: 1.4;
}

.campaign-card__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    background: var(--bg-secondary);
    padding: 16px;
    border-radius: 12px;
}

.campaign-card__stat {
    text-align: center;
    padding: 4px 0;
}

.campaign-card__stat-value {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.campaign-card__roi--positive {
    color: #059669;
}

.campaign-card__roi--negative {
    color: #dc2626;
}

.campaign-card__stat-label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 4px;
}

/* Brand Folder Cards (Level 1) */
.brand-folder-card {
    transition: all 0.2s ease;
}

.brand-folder-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Breadcrumb Button Styling */
button.breadcrumb-item {
    background: none;
    border: none;
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
}

button.breadcrumb-item:hover {
    background: var(--bg-tertiary);
    color: var(--accent);
}

.breadcrumb-current {
    color: var(--text-primary);
    font-weight: 600;
}

/* Campaign Detail Header */
.campaign-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.campaign-detail-header__info {
    flex: 1;
}

.campaign-detail-header__brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.campaign-detail-header__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.campaign-detail-header__desc {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.campaign-detail-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-top: 24px;
}

@media (max-width: 768px) {
    .campaign-detail-stats {
        grid-template-columns: repeat(3, 1fr);
    }
    .campaign-card__stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Campaign Tabs */
.campaign-tab-btn {
    padding: 10px 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    margin-right: 8px;
}

.campaign-tab-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.campaign-tab-btn.active {
    background: var(--accent);
    color: var(--bg-primary);
    border-color: var(--accent);
}

/* Campaign Table Selected Rows */
.data-table tr.selected-row {
    background: rgba(99, 102, 241, 0.08);
}

/* ==================== VIEW TOGGLE GROUP ==================== */
.view-toggle-group {
    display: flex;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.view-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.view-toggle-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.view-toggle-btn.active {
    background: var(--accent);
    color: white;
}

/* ==================== DATE RANGE SELECTOR ==================== */
.date-range-selector {
    display: flex;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.date-range-btn {
    padding: 8px 14px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.date-range-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.date-range-btn.active {
    background: var(--accent);
    color: white;
}

/* ==================== CAMPAIGNS LIST VIEW ==================== */
.campaigns-list-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.campaigns-list-table th {
    background: var(--bg-secondary);
    padding: 12px 16px;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}

.campaigns-list-table td {
    padding: 14px 16px;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}

.campaigns-list-table tr:last-child td {
    border-bottom: none;
}

.campaigns-list-table tr:hover td {
    background: var(--bg-hover);
}

.campaigns-list-table tr {
    cursor: pointer;
    transition: background 0.15s;
}

.list-brand-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 600;
}

.list-roi {
    font-weight: 700;
    font-size: 0.9rem;
}

.list-roi--positive {
    color: var(--success);
}

.list-roi--negative {
    color: var(--error);
}

/* ==================== ROSTER DECISIONS TAB ==================== */
.roster-decisions-intro {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    border-left: 4px solid var(--accent);
}

.roster-decisions-intro strong {
    color: var(--text-primary);
}

.roster-decisions-intro .threshold-info {
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ROI Summary Cards */
.roi-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.roi-summary-card {
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    color: white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.roi-summary-card--cut {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

.roi-summary-card--watch {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.roi-summary-card--keep {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.roi-summary-card--star {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.roi-summary-card__emoji {
    font-size: 1.75rem;
    margin-bottom: 6px;
}

.roi-summary-card__count {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
}

.roi-summary-card__label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
    margin-top: 4px;
}

.roi-summary-card__sublabel {
    font-size: 0.75rem;
    margin-top: 8px;
    opacity: 0.8;
}

/* Decision Sections */
.decision-section {
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

.decision-section--cut {
    background: rgba(220, 38, 38, 0.06);
    border-color: rgba(220, 38, 38, 0.2);
}

.decision-section--watch {
    background: rgba(245, 158, 11, 0.06);
    border-color: rgba(245, 158, 11, 0.2);
}

.decision-section--keep {
    background: rgba(34, 197, 94, 0.06);
    border-color: rgba(34, 197, 94, 0.2);
}

.decision-section--star {
    background: rgba(139, 92, 246, 0.06);
    border-color: rgba(139, 92, 246, 0.2);
}

.decision-section__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.decision-section__title {
    font-size: 1.15rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.decision-section__title--cut { color: #dc2626; }
.decision-section__title--watch { color: #f59e0b; }
.decision-section__title--keep { color: #22c55e; }
.decision-section__title--star { color: #8b5cf6; }

.decision-section__desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 4px 0 0 0;
}

.decision-section__actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.decision-section__stats {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Decision Grid */
.decision-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

/* Decision Card */
.decision-card {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 18px;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.decision-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.decision-card__header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.decision-card__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.decision-card__avatar--placeholder {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
}

.decision-card__info {
    min-width: 0;
    flex: 1;
}

.decision-card__name {
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.decision-card__handle {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Decision Card Stats */
.decision-card__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    text-align: center;
    padding: 12px 0;
    background: var(--bg-secondary);
    border-radius: 10px;
    margin: 0 -4px;
    padding: 12px 8px;
}

.decision-card__stat-value {
    font-weight: 700;
    font-size: 0.95rem;
}

.decision-card__stat-value--positive {
    color: #22c55e;
}

.decision-card__stat-value--neutral {
    color: var(--text-primary);
}

.decision-card__stat-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
}

/* Decision Card Footer */
.decision-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.decision-card__actions {
    display: flex;
    gap: 6px;
}

.decision-card__action-btn {
    padding: 6px 10px;
    font-size: 0.75rem;
    border-radius: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.15s;
}

.decision-card__action-btn:hover {
    background: var(--bg-hover);
}

.decision-card__action-btn--active {
    opacity: 0.5;
    pointer-events: none;
}

.decision-card__action-btn--danger:hover {
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.3);
}

/* Copy to Discord Button */
.decision-copy-btn {
    background: #5865F2;
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s;
}

.decision-copy-btn:hover {
    background: #4752c4;
}

/* Responsive */
@media (max-width: 1200px) {
    .roi-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .roi-summary-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .roi-summary-card {
        padding: 16px;
    }

    .roi-summary-card__count {
        font-size: 1.5rem;
    }

    .decision-section {
        padding: 16px;
    }

    .decision-grid {
        grid-template-columns: 1fr;
    }

    .decision-section__header {
        flex-direction: column;
    }
}

/* ==================== CREATOR DETAIL VIEW (LEVEL 4) ==================== */
.creator-detail-header {
    display: flex;
    gap: 16px;
    align-items: center;
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px 20px;
    border: 1px solid var(--border);
    margin-bottom: 16px;
}

.creator-detail-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent) 0%, #4f46e5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

.creator-detail-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.creator-detail-info {
    flex: 1;
}

.creator-detail-name {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 2px;
    color: var(--text-primary);
}

.creator-detail-handles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.creator-handle-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.creator-handle-badge a {
    color: var(--accent);
    text-decoration: none;
}

.creator-handle-badge a:hover {
    text-decoration: underline;
}

.creator-detail-meta {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.creator-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.creator-detail-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.creator-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
}

.creator-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.creator-stat-value--success {
    color: var(--success);
}

.creator-stat-value--warning {
    color: var(--warning);
}

.creator-stat-value--danger {
    color: var(--error);
}

.creator-stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.creator-detail-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
}

.creator-detail-section-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.creator-detail-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding: 20px 0;
}

.creator-action-btn {
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Posting Activity Chart */
.posting-activity-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-top: 16px;
}

.posting-day {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}

.posting-day-name {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.posting-day-count {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.posting-day--active {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.posting-day--active .posting-day-count {
    color: var(--success);
}

/* Video Grid for Creator Detail */
.creator-videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.creator-video-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    transition: all 0.2s;
}

.creator-video-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.creator-video-thumb {
    width: 100%;
    aspect-ratio: 9/16;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.creator-video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.creator-video-info {
    padding: 12px;
}

.creator-video-gmv {
    font-size: 1rem;
    font-weight: 700;
    color: var(--success);
}

.creator-video-date {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Contact History */
.contact-history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.contact-history-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 10px;
    border: 1px solid var(--border);
}

.contact-history-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-history-content {
    flex: 1;
}

.contact-history-method {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.contact-history-note {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

.contact-history-date {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 6px;
}

/* Responsive */
@media (max-width: 768px) {
    .creator-detail-header {
        flex-direction: column;
        text-align: center;
    }

    .creator-detail-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .creator-videos-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .posting-activity-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.data-table tr.selected-row:hover {
    background: rgba(99, 102, 241, 0.12);
}

/* Videos Grid for Campaigns */
.videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.video-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.video-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.video-card__rank {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent);
}

.video-card__info {
    flex: 1;
}

.video-card__creator {
    font-weight: 600;
    color: var(--text-primary);
}

.video-card__product {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-card__stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.video-card__gmv {
    font-weight: 700;
    color: var(--success);
}

.video-card__orders {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Compliance Summary */
.compliance-summary {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.compliance-stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 24px;
    text-align: center;
    min-width: 120px;
}

.compliance-stat__count {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
}

.compliance-stat__label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.compliance-stat.ghost .compliance-stat__count { color: var(--error); }
.compliance-stat.behind .compliance-stat__count { color: #f97316; }
.compliance-stat.atrisk .compliance-stat__count { color: var(--warning); }
.compliance-stat.ontrack .compliance-stat__count { color: var(--success); }
.compliance-stat.star .compliance-stat__count { color: var(--accent); }

/* Posting Status Badges */
.posting-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status--ghost { background: var(--error-dim); color: var(--error); }
.status--behind { background: rgba(249, 115, 22, 0.15); color: #f97316; }
.status--atrisk { background: var(--warning-dim); color: var(--warning); }
.status--ontrack { background: var(--success-dim); color: var(--success); }
.status--star { background: var(--accent-dim); color: var(--accent); }

/* Stat Card (reusable) */
.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.stat-card__value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-card__value.positive { color: var(--success); }
.stat-card__value.negative { color: var(--error); }

.stat-card__label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Creator Identity in Tables */
.creator-identity {
    display: flex;
    align-items: center;
    gap: 8px;
}

.creator-name {
    font-weight: 600;
}

/* TikTok Link */
.tiktok-link {
    color: var(--accent);
    text-decoration: none;
}

.tiktok-link:hover {
    text-decoration: underline;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.empty-state .empty-icon {
    font-size: 3rem;
    margin-bottom: 16px;
}

.empty-state h3 {
    color: var(--text-primary);
    margin-bottom: 8px;
}

.empty-state p {
    margin-bottom: 20px;
}

.empty-state__icon {
    font-size: 3rem;
    margin-bottom: 16px;
}

/* Campaign Info Bar */
.campaign-info-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 10px;
    border: 1px solid var(--border);
}

.info-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.info-chip__icon {
    font-size: 0.9rem;
}

/* Tab Info Banner */
.tab-info-banner {
    padding: 12px 16px;
    background: var(--accent-dim);
    border: 1px solid var(--accent);
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.tab-info-banner code {
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.8rem;
}

/* Campaign Videos Grid (new style) */
.campaign-videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

.campaign-video-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.campaign-video-card:hover {
    border-color: var(--accent);
    background: var(--bg-hover);
}

.campaign-video-card__rank {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 36px;
}

.campaign-video-card__rank.rank--top3 {
    color: #fbbf24;
}

.campaign-video-card__rank.rank--top10 {
    color: var(--accent);
}

.campaign-video-card__content {
    flex: 1;
    min-width: 0;
}

.campaign-video-card__creator {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.campaign-video-card__product {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.campaign-video-card__metrics {
    text-align: right;
}

.campaign-video-card__gmv {
    display: block;
    font-weight: 700;
    color: var(--success);
    font-size: 0.95rem;
}

.campaign-video-card__orders {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Badges */
.badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.badge--success {
    background: var(--success-dim);
    color: var(--success);
}

.badge--muted {
    background: var(--bg-secondary);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.badge--warning {
    background: var(--warning-dim);
    color: var(--warning);
}

/* Table Container for scrolling */
.table-container {
    overflow-x: auto;
}

/* Sortable Table Headers */
th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: background 0.15s ease;
}

th.sortable:hover {
    background: var(--bg-secondary);
}

th.sortable.sorted {
    background: var(--bg-secondary);
    color: var(--accent);
}

th.sortable .sort-indicator {
    font-size: 0.7em;
    opacity: 0.8;
    margin-left: 2px;
}

/* Text utilities */
.text-center {
    text-align: center;
}

/* Form Help Text */
.form-help {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ==========================================================================
   DAILY PULSE V2 - Dense Dashboard Layout
   ========================================================================== */

/* ==================== COMPACT SUMMARY BAR ==================== */

.ops-summary-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 12px;
}

.ops-summary-bar__chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ops-summary-bar__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid transparent;
    background: var(--bg-tertiary);
}

.ops-summary-bar__chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.ops-summary-bar__chip--ghost {
    background: rgba(107, 114, 128, 0.15);
    color: #9ca3af;
    border-color: rgba(107, 114, 128, 0.3);
}
.ops-summary-bar__chip--ghost:hover { background: rgba(107, 114, 128, 0.25); }

.ops-summary-bar__chip--behind {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
}
.ops-summary-bar__chip--behind:hover { background: rgba(239, 68, 68, 0.2); }

.ops-summary-bar__chip--atrisk {
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.3);
}
.ops-summary-bar__chip--atrisk:hover { background: rgba(245, 158, 11, 0.2); }

.ops-summary-bar__chip--ontrack {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.3);
}
.ops-summary-bar__chip--ontrack:hover { background: rgba(34, 197, 94, 0.2); }

.ops-summary-bar__chip--star {
    background: rgba(139, 92, 246, 0.12);
    color: #a78bfa;
    border-color: rgba(139, 92, 246, 0.3);
}
.ops-summary-bar__chip--star:hover { background: rgba(139, 92, 246, 0.2); }

.ops-summary-bar__chip-count {
    font-weight: 700;
    font-size: 0.9rem;
}

.ops-summary-bar__chip-label {
    opacity: 0.9;
}

.ops-summary-bar__divider {
    width: 1px;
    height: 24px;
    background: var(--border);
    margin: 0 8px;
}

.ops-summary-bar__metrics {
    display: flex;
    gap: 16px;
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.ops-summary-bar__metric {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ops-summary-bar__metric strong {
    color: var(--text-primary);
    font-weight: 600;
}

.ops-summary-bar__metric--success strong {
    color: var(--success);
}

/* ==================== COMPACT FILTER STRIP ==================== */

.ops-filter-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 12px;
}

.ops-filter-strip__search {
    flex: 1;
    max-width: 200px;
    padding: 6px 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.8rem;
}

.ops-filter-strip__search:focus {
    outline: none;
    border-color: var(--accent);
}

.ops-filter-strip__select {
    padding: 6px 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.8rem;
    cursor: pointer;
}

.ops-filter-strip__btn {
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
}

.ops-filter-strip__btn:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

.ops-filter-strip__btn--primary {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
    font-weight: 600;
}

.ops-filter-strip__btn--primary:hover {
    background: var(--accent-hover, #e5b617);
}

/* ==================== DENSE TABLE ==================== */

.ops-table--dense {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.ops-table--dense th {
    text-align: left;
    padding: 8px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.ops-table--dense td {
    padding: 8px 10px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.ops-table--dense tr:last-child td {
    border-bottom: none;
}

.ops-table--dense tbody tr {
    transition: background 0.1s;
}

.ops-table--dense tbody tr:hover {
    background: rgba(139, 92, 246, 0.05);
}

.ops-table--dense tbody tr:hover .ops-row-actions {
    opacity: 1;
}

/* Status indicator column */
.ops-table--dense .status-cell {
    width: 36px;
    text-align: center;
    font-size: 1rem;
}

.status-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: 0.9rem;
}

.status-indicator--ghost { background: rgba(107, 114, 128, 0.15); }
.status-indicator--behind { background: rgba(239, 68, 68, 0.15); }
.status-indicator--atrisk { background: rgba(245, 158, 11, 0.15); }
.status-indicator--ontrack { background: rgba(34, 197, 94, 0.15); }
.status-indicator--star { background: rgba(139, 92, 246, 0.15); }

/* Creator cell (avatar + name) */
.ops-table--dense .creator-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 180px;
}

.ops-table--dense .creator-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.ops-table--dense .creator-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.ops-table--dense .creator-info {
    min-width: 0;
    overflow: hidden;
}

.ops-table--dense .creator-name {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.85rem;
}

.ops-table--dense .creator-handle {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Numeric cells */
.ops-table--dense .num-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ops-table--dense .num-cell--posts {
    font-weight: 600;
}

.ops-table--dense .num-cell--gmv {
    color: var(--success);
    font-weight: 600;
}

/* ROI badge */
.roi-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.roi-badge--cut {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}

.roi-badge--watch {
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
}

.roi-badge--keep {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
}

.roi-badge--star {
    background: rgba(139, 92, 246, 0.12);
    color: #a78bfa;
}

/* Contact cell */
.contact-cell {
    font-size: 0.8rem;
    white-space: nowrap;
}

.contact-cell--never {
    color: var(--danger);
}

.contact-cell--recent {
    color: var(--success);
}

.contact-cell--stale {
    color: var(--warning);
}

/* Row actions (show on hover) */
.ops-row-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}

.ops-row-actions__btn {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.1s;
}

.ops-row-actions__btn:hover {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.ops-row-actions__btn--discord:hover {
    background: #5865F2;
    color: white;
    border-color: #5865F2;
}

/* Brand badge */
.brand-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Retainer indicator */
.retainer-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: var(--accent-dim, rgba(255, 77, 141, 0.15));
    color: var(--accent);
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 3px;
    margin-left: 4px;
}

/* ==================== VIDEOS DENSE TABLE ==================== */

.ops-table--dense .video-cell {
    max-width: 250px;
}

.ops-table--dense .video-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
    font-weight: 500;
}

.ops-table--dense .video-title:hover {
    color: var(--accent);
    cursor: pointer;
}

.video-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    font-size: 0.85rem;
}

.video-type-badge--hot {
    background: rgba(249, 115, 22, 0.15);
}

.video-type-badge--rising {
    background: rgba(34, 197, 94, 0.15);
}

.video-type-badge--top {
    background: rgba(255, 77, 141, 0.15);
}

/* ==================== TABLE CONTAINER ==================== */

.ops-table-wrapper {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.ops-table-wrapper__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.ops-table-wrapper__title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ops-table-wrapper__count {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 400;
}

.ops-table-wrapper__actions {
    display: flex;
    gap: 6px;
}

.ops-table-wrapper__body {
    max-height: 600px;
    overflow-y: auto;
}

/* Scrollbar styling for table body */
.ops-table-wrapper__body::-webkit-scrollbar {
    width: 6px;
}

.ops-table-wrapper__body::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

.ops-table-wrapper__body::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 3px;
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 768px) {
    .ops-summary-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .ops-summary-bar__metrics {
        margin-left: 0;
        margin-top: 8px;
    }

    .ops-filter-strip {
        flex-wrap: wrap;
    }

    .ops-filter-strip__search {
        flex: 1 1 100%;
        max-width: none;
        margin-bottom: 6px;
    }

    .ops-table--dense .creator-cell {
        min-width: 140px;
    }

    .ops-row-actions {
        opacity: 1;
    }
}

/* ==================== DAILY BRIEF (Newspaper Style) ==================== */

/* Masthead */
.daily-brief-header {
    margin-bottom: 0;
    padding: 24px 0;
    border-bottom: 4px double var(--text-primary);
    background: linear-gradient(to bottom, var(--bg-secondary), transparent);
}

.daily-brief-masthead {
    text-align: center;
}

.daily-brief-edition {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.daily-brief-title {
    font-size: 3.5rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    color: var(--text-primary);
    text-transform: uppercase;
    line-height: 1;
}

.daily-brief-date {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 8px;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
}

/* By The Numbers Bar */
.brief-numbers-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 16px 24px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
}

.brief-number {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 24px;
}

.brief-number-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: Georgia, 'Times New Roman', serif;
}

.brief-number-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-top: 2px;
}

.brief-number-divider {
    width: 1px;
    height: 32px;
    background: var(--border);
}

.brief-weather {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
}

.brief-weather-icon {
    font-size: 1.5rem;
}

.brief-weather-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

/* Headline Section */
.brief-headline-section {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
}

.brief-headline-main {
    padding-right: 24px;
    border-right: 1px solid var(--border);
}

.brief-section-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--purple);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.brief-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.brief-headline {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 12px 0;
    font-family: Georgia, 'Times New Roman', serif;
    color: var(--text-primary);
}

.brief-headline-sub {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
}

/* Quick Hits Sidebar */
.brief-headline-sidebar {
    padding-left: 0;
}

.brief-quick-hits {
    list-style: none;
    padding: 0;
    margin: 0;
}

.brief-quick-hits li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.brief-quick-hits li:last-child {
    border-bottom: none;
}

.brief-quick-hits li strong {
    color: var(--text-primary);
}

/* Section Headers */
.brief-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.brief-context {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
    margin: 0 0 16px 0;
}

/* Filter Bar */
.daily-brief-content {
    display: block;
}

.daily-brief-filters {
    display: flex;
    align-items: center;
    gap: 8px;
}

.daily-brief-select {
    padding: 6px 10px;
    font-size: 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    cursor: pointer;
}

.daily-brief-select:hover {
    border-color: var(--purple);
}

.daily-brief-refresh {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.daily-brief-refresh:hover {
    background: var(--purple);
    border-color: var(--purple);
    color: white;
}

/* ==================== BRAND TICKER (Static) ==================== */
.brand-ticker-wrapper {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.brand-ticker {
    display: flex;
    justify-content: center;
}

.brand-ticker-track {
    display: flex;
    gap: 32px;
    padding: 10px 24px;
    justify-content: center;
    flex-wrap: wrap;
}

.ticker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.ticker-brand {
    color: var(--text-primary);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
}

.ticker-change {
    font-weight: 700;
    font-family: Georgia, 'Times New Roman', serif;
}

.ticker-change--up {
    color: #22c55e;
}

.ticker-change--down {
    color: #ef4444;
}

.ticker-change--flat {
    color: var(--text-muted);
}

.ticker-divider {
    color: var(--text-muted);
    opacity: 0.4;
}

/* ==================== BELOW THE FOLD ==================== */
.below-fold-section {
    padding: 24px 0;
    border-bottom: 2px solid var(--border);
}

.below-fold-stories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.below-fold-story {
    padding: 0 20px;
    border-left: 3px solid var(--border);
}

.below-fold-story:first-child {
    padding-left: 0;
    border-left: none;
}

.below-fold-story-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.below-fold-headline {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 8px 0;
    font-family: Georgia, 'Times New Roman', serif;
    color: var(--text-primary);
}

.below-fold-sub {
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-secondary);
    margin: 0;
}

/* ==================== NEWSPAPER SECTIONS ==================== */
.newspaper-section {
    margin: 32px 0;
    padding: 0;
}

.newspaper-section-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.newspaper-rule {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, var(--border) 0%, var(--text-muted) 50%, var(--border) 100%);
}

.newspaper-section-title {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-secondary);
    white-space: nowrap;
    padding: 0 8px;
}

.newspaper-section-subtitle {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--text-muted);
    text-align: center;
    margin: 8px 0 0 0;
}

/* Video Market Report */
.video-market-report {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
}

.market-stat {
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    background: var(--bg-secondary);
}

.market-stat-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-primary);
    font-family: 'Playfair Display', Georgia, serif;
    line-height: 1.2;
}

.market-stat-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 4px;
}

.market-stat-change {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    margin-top: 6px;
}

.market-stat-change.up {
    color: #059669;
}

.market-stat-change.down {
    color: #dc2626;
}

.market-stat-change.flat {
    color: var(--text-muted);
}

/* Featured Videos by Brand */
.featured-videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.featured-video-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
    font-style: italic;
}

.featured-video-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.featured-video-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.featured-video-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.featured-video-brand-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.featured-video-brand-name {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.featured-video-headline {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 8px;
}

.featured-video-creator {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.featured-video-gmv {
    font-size: 1.25rem;
    font-weight: 800;
    color: #059669;
    margin-top: 8px;
}

.featured-video-copy-btn {
    margin-top: 12px;
    width: 100%;
    padding: 8px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.featured-video-copy-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

/* Responsive */
@media (max-width: 768px) {
    .video-market-report {
        grid-template-columns: repeat(2, 1fr);
    }

    .featured-videos-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== SECTION TEASERS ==================== */
.section-teasers {
    display: flex;
    gap: 16px;
    padding: 20px 0;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.section-teaser {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.section-teaser:hover {
    border-color: var(--purple);
    background: var(--bg-secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.teaser-label {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--purple);
    padding: 4px 8px;
    background: var(--purple-subtle, rgba(139, 92, 246, 0.1));
    border-radius: 4px;
    flex-shrink: 0;
}

.teaser-text {
    flex: 1;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

.teaser-arrow {
    font-size: 1.1rem;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.section-teaser:hover .teaser-arrow {
    transform: translateX(4px);
    color: var(--purple);
}

/* Responsive */
@media (max-width: 768px) {
    .daily-brief-title {
        font-size: 2rem;
    }

    .brief-numbers-bar {
        flex-wrap: wrap;
        gap: 16px;
    }

    .brief-number-divider {
        display: none;
    }

    .brief-headline-section {
        grid-template-columns: 1fr;
    }

    .brief-headline-main {
        padding-right: 0;
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding-bottom: 24px;
    }

    .below-fold-stories {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .below-fold-story {
        padding: 16px 0;
        border-left: none;
        border-top: 1px solid var(--border);
    }

    .below-fold-story:first-child {
        border-top: none;
        padding-top: 0;
    }

    .section-teasers {
        flex-direction: column;
        gap: 12px;
    }

    .brand-ticker-track {
        animation-duration: 20s;
    }
}

/* Legacy styles (kept for compatibility) */
.daily-pulse-alerts__chips {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Individual Alert Cards */
.pulse-alert {
    flex: 1;
    min-width: 180px;
    max-width: 280px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pulse-alert:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.pulse-alert--danger {
    border-left: 4px solid var(--danger);
    background: rgba(239, 68, 68, 0.05);
}

.pulse-alert--warning {
    border-left: 4px solid var(--warning);
    background: rgba(245, 158, 11, 0.05);
}

.pulse-alert--behind {
    border-left: 4px solid var(--behind);
    background: rgba(239, 68, 68, 0.05);
}

.pulse-alert__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.pulse-alert__icon {
    font-size: 1.5rem;
}

.pulse-alert__count {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.pulse-alert__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pulse-alert__label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.pulse-alert__subtext {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.pulse-alert--danger .pulse-alert__count {
    color: var(--danger);
}

.pulse-alert--warning .pulse-alert__count {
    color: var(--warning);
}

.pulse-alert--behind .pulse-alert__count {
    color: var(--behind);
}

/* ==================== HOT VIDEOS GRID ==================== */

.hot-videos-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hot-video-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.hot-video-card:hover {
    background: var(--bg-tertiary);
    border-color: var(--purple);
}

.hot-video-rank {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 32px;
    text-align: center;
}

.hot-video-card:first-child .hot-video-rank {
    color: #ffd700;
}

.hot-video-card:nth-child(2) .hot-video-rank {
    color: #c0c0c0;
}

.hot-video-card:nth-child(3) .hot-video-rank {
    color: #cd7f32;
}

.hot-video-content {
    flex: 1;
    min-width: 0;
}

.hot-video-title {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.hot-video-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8rem;
}

.hot-video-creator {
    color: var(--purple);
    font-weight: 500;
}

.hot-video-brand {
    padding: 2px 8px;
    background: rgba(var(--brand-color), 0.15);
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--brand-color, var(--text-muted));
}

.hot-video-date {
    color: var(--text-muted);
}

.hot-video-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 100px;
}

.hot-video-gmv {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--success);
}

.hot-video-orders {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ==================== CONTACT PANEL ==================== */

.contact-panel {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    max-width: 90vw;
    height: 100vh;
    background: var(--bg-primary);
    border-left: 1px solid var(--border);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
}

.contact-panel.open {
    right: 0;
}

.contact-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.contact-panel-overlay.open {
    opacity: 1;
    visibility: visible;
}

.contact-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}

.contact-panel-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}

.contact-panel-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-card);
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.contact-panel-close:hover {
    background: var(--danger);
    color: white;
}

.contact-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.contact-panel-section {
    margin-bottom: 24px;
}

.contact-panel-section:last-child {
    margin-bottom: 0;
}

/* Template Cards */
.contact-template-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    transition: all 0.2s;
}

.contact-template-card:last-child {
    margin-bottom: 0;
}

.contact-template-card:hover {
    border-color: var(--primary);
    background: var(--bg-card);
}

.contact-template-card--suggested {
    border-color: var(--warning);
    background: rgba(245, 158, 11, 0.05);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15);
}

.contact-template-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.contact-template-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-template-badge {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
}

.contact-template-message {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
    white-space: pre-wrap;
}

/* Log Contact Button */
.btn-contact {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: white !important;
    border: none !important;
}

.btn-contact:hover {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    transform: translateY(-1px);
}

/* ==================== LEADERBOARDS VIEW ==================== */

.leaderboards-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.leaderboard-period-btns {
    display: flex;
    gap: 4px;
}

.leaderboard-period-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    transition: all 0.15s ease;
}

.leaderboard-period-btn.active {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
    font-weight: 600;
}

.leaderboard-period-btn:hover:not(.active) {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.leaderboards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.leaderboard-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.leaderboard-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.leaderboard-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1rem 0.5rem;
}

.leaderboard-card__brand {
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
}

.leaderboard-card__brand .brand-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.leaderboard-card__dates {
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 0 1rem 0.75rem;
}

.leaderboard-card__body {
    padding: 0;
    border-top: 1px solid var(--border-light, var(--border));
    border-bottom: 1px solid var(--border-light, var(--border));
}

.leaderboard-row {
    display: grid;
    grid-template-columns: 2.5rem 1fr auto auto;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    align-items: center;
    border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.05));
    font-size: 0.85rem;
}

.leaderboard-row:last-child {
    border-bottom: none;
}

.leaderboard-row--top3 {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.1) 0%, transparent 100%);
}

.leaderboard-rank {
    font-weight: 700;
    text-align: center;
    font-size: 0.9rem;
}

.leaderboard-creator {
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leaderboard-gmv {
    font-weight: 700;
    color: var(--accent);
    text-align: right;
}

.leaderboard-videos {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: right;
    min-width: 2rem;
}

.leaderboard-card__footer {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--bg-muted, rgba(0,0,0,0.1));
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.leaderboard-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .leaderboards-grid {
        grid-template-columns: 1fr;
    }

    .leaderboards-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .leaderboard-period-btns {
        justify-content: center;
    }
}

/* ==========================================================================
   VIDEO INTELLIGENCE
   ========================================================================== */

/* Queue Banner */
.queue-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--bg-secondary);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border);
}

.queue-banner--empty {
    justify-content: center;
    gap: 1rem;
    color: var(--text-secondary);
}

.queue-icon {
    font-size: 1.5rem;
}

.queue-stats {
    display: flex;
    gap: 2rem;
}

.queue-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.queue-count {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.queue-stat--pending .queue-count { color: var(--warning, #f59e0b); }
.queue-stat--processing .queue-count { color: var(--info, #3b82f6); }
.queue-stat--completed .queue-count { color: var(--success, #10b981); }
.queue-stat--failed .queue-count { color: var(--danger, #ef4444); }

.queue-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.queue-actions {
    display: flex;
    gap: 0.5rem;
}

/* Correlations Dashboard */
.correlations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.correlation-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border);
    padding: 1rem 1.25rem;
}

.correlation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.correlation-header h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.correlation-count {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.correlation-bars {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.correlation-bar-row {
    display: grid;
    grid-template-columns: 100px 1fr 50px;
    align-items: center;
    gap: 0.75rem;
}

.correlation-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: capitalize;
}

.correlation-bar-container {
    height: 8px;
    background: var(--bg-muted, rgba(255,255,255,0.05));
    border-radius: 4px;
    overflow: hidden;
}

.correlation-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.correlation-bar.positive {
    background: linear-gradient(90deg, var(--success, #10b981), #34d399);
}

.correlation-bar.negative {
    background: linear-gradient(90deg, var(--danger, #ef4444), #f87171);
}

.correlation-value {
    font-size: 0.8rem;
    font-weight: 600;
    text-align: right;
}

.correlation-value.positive { color: var(--success, #10b981); }
.correlation-value.negative { color: var(--danger, #ef4444); }

.correlation-footer {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.correlation-avg {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Intelligence Table */
.intelligence-row .video-cell {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.intelligence-row .video-id {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-primary);
}

.intelligence-row .video-creator {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.intelligence-row .video-link {
    color: var(--accent);
    text-decoration: none;
}

.intelligence-row .video-link:hover {
    text-decoration: underline;
}

/* Attribute Tags */
.attribute-tag {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 4px;
    background: var(--bg-muted, rgba(255,255,255,0.05));
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: capitalize;
}

.attribute-tag:hover {
    background: var(--bg-hover, rgba(255,255,255,0.1));
    color: var(--text-primary);
}

.attribute-tag--empty {
    color: var(--text-muted);
    font-style: italic;
    border: 1px dashed var(--border);
    background: transparent;
}

.attribute-tag--edited {
    border: 1px solid var(--accent);
}

.attribute-tag .edit-indicator {
    color: var(--accent);
    font-weight: 700;
    margin-left: 0.25rem;
}

/* Format-specific colors */
.attribute-tag--talking_head { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.attribute-tag--grwm { background: rgba(236, 72, 153, 0.15); color: #ec4899; }
.attribute-tag--demo { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.attribute-tag--review { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
.attribute-tag--tutorial { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.attribute-tag--unboxing { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

/* Location-specific colors */
.attribute-tag--car { background: rgba(107, 114, 128, 0.15); color: #9ca3af; }
.attribute-tag--bathroom { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.attribute-tag--kitchen { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.attribute-tag--bedroom { background: rgba(139, 92, 246, 0.15); color: #a78bfa; }
.attribute-tag--gym { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.attribute-tag--outdoors { background: rgba(16, 185, 129, 0.15); color: #34d399; }

/* Confidence Meter */
.confidence-meter {
    position: relative;
    width: 60px;
    height: 6px;
    background: var(--bg-muted, rgba(255,255,255,0.1));
    border-radius: 3px;
    overflow: visible;
}

.confidence-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--danger) 0%, var(--warning) 50%, var(--success) 100%);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.confidence-value {
    position: absolute;
    right: -35px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Inline Edit */
.inline-edit-select {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 4px;
    background: var(--bg-primary);
    border: 1px solid var(--accent);
    color: var(--text-primary);
    min-width: 120px;
}

.inline-edit-select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 77, 141, 0.3);
}

/* Queue Videos Modal */
.queue-filters {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.queue-stats-bar {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: var(--bg-muted, rgba(255,255,255,0.05));
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.queue-videos-list {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.queue-select-all {
    padding: 0.75rem 1rem;
    background: var(--bg-muted, rgba(255,255,255,0.03));
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1;
}

.queue-select-all label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.queue-video-item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 1rem;
    padding: 0.75rem 1rem;
    align-items: center;
    border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.05));
}

.queue-video-item:hover {
    background: var(--bg-hover, rgba(255,255,255,0.02));
}

.queue-video-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.queue-video-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.queue-video-id {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-primary);
}

.queue-video-creator {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.queue-video-gmv {
    font-weight: 600;
    color: var(--accent);
    font-size: 0.85rem;
}

/* Video Attributes Modal */
.video-attr-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.video-attr-id {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.video-attr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.video-attr-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.video-attr-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.video-attr-value {
    font-size: 0.9rem;
    color: var(--text-primary);
    text-transform: capitalize;
}

.video-attr-value.edited {
    color: var(--accent);
}

.video-attr-booleans {
    margin-bottom: 1.5rem;
}

.video-attr-booleans h4 {
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

.boolean-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.boolean-grid span {
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    border-radius: 20px;
    background: var(--bg-muted, rgba(255,255,255,0.05));
    color: var(--text-muted);
}

.boolean-grid span.active {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success, #10b981);
}

.video-attr-meta {
    display: flex;
    gap: 1.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* Intelligence View Empty States */
#view-intelligence .empty-state {
    text-align: center;
    padding: 3rem 2rem;
}

#view-intelligence .empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

#view-intelligence .empty-state h3 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

#view-intelligence .empty-state p {
    color: var(--text-muted);
    max-width: 400px;
    margin: 0 auto;
}

/* Server Status Indicator */
.server-status {
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0.25rem;
    border-radius: 4px;
    transition: transform 0.2s;
}

.server-status:hover {
    transform: scale(1.2);
}

/* Processing Indicator Animation */
.processing-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: currentColor;
    border-radius: 50%;
    animation: pulse 1s infinite;
    margin-right: 0.25rem;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* Processing Status Panel */
.processing-status-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
}

.processing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.processing-header h4 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1rem;
}

.processing-current {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-muted, rgba(255,255,255,0.05));
    border-radius: 8px;
    margin-bottom: 1rem;
}

.processing-video {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-primary);
}

.processing-step {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.processing-progress {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.progress-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-muted, rgba(255,255,255,0.1));
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--success, #10b981));
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.processing-counts {
    display: flex;
    gap: 1.5rem;
    font-size: 0.85rem;
}

.count-success {
    color: var(--success, #10b981);
}

.count-failed {
    color: var(--danger, #ef4444);
}

.processing-log {
    margin-top: 1rem;
}

.processing-log summary {
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-muted);
    padding: 0.5rem 0;
}

.processing-log pre {
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-primary);
    border-radius: 8px;
    font-size: 0.75rem;
    font-family: var(--font-mono);
    color: var(--text-secondary);
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Server Instructions Modal */
.server-instructions {
    background: var(--bg-muted, rgba(255,255,255,0.05));
    border-radius: 8px;
    padding: 1.25rem;
    margin: 1.5rem 0;
}

.server-instructions h4 {
    margin: 0 0 0.75rem 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.code-block {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--accent);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

.server-instructions .hint {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}

.server-status-check {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.status-success {
    color: var(--success, #10b981);
    font-weight: 600;
}

.status-error {
    color: var(--danger, #ef4444);
    font-weight: 600;
}

/* Status Badges */
.status-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.status-badge--pending {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning, #f59e0b);
}

.status-badge--processing {
    background: rgba(59, 130, 246, 0.15);
    color: var(--info, #3b82f6);
}

.status-badge--completed {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success, #10b981);
}

.status-badge--failed {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger, #ef4444);
}

/* Extra small button */
.btn-xs {
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
}

/* Responsive */
@media (max-width: 768px) {
    .correlations-grid {
        grid-template-columns: 1fr;
    }

    .queue-banner {
        flex-direction: column;
        gap: 1rem;
    }

    .queue-stats {
        gap: 1rem;
    }

    .correlation-bar-row {
        grid-template-columns: 80px 1fr 40px;
    }
}