* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Fredoka', sans-serif;
            background: linear-gradient(135deg, rgba(3, 164, 241, 0.12) 0%, rgba(3, 164, 241, 0.05) 50%, white 100%);
            color: #1e293b;
            padding: 20px;
        }

        button, input, textarea, select, [role="button"] {
            font-family: 'Fredoka', sans-serif;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            display: none; /* Hidden by default until auth check completes */
        }

        .container.show {
            display: block;
        }

        /* Loading state */
        .auth-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            gap: 16px;
        }

        .auth-loading.hide {
            display: none;
        }

        .spinner {
            width: 48px;
            height: 48px;
            border: 4px solid rgba(3, 164, 241, 0.1);
            border-top-color: #03A4F1;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

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

        .floating-buttons {
            display: none; /* Hidden by default until auth check completes */
        }

        .floating-buttons.show {
            display: block;
        }

        .header {
            background: white;
            padding: 30px 40px;
            border-radius: 24px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
        }

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

        .header-title {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .header-title h1 {
            white-space: nowrap;
        }

        .header-actions {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 10px;
        }

        /* Compact header pills — the row holds ~12 items, full-size .btn overflows and squishes */
        .header-actions .btn,
        .header-actions .online-btn,
        .header-actions .logout-btn {
            padding: 10px 18px;
            font-size: 14px;
            white-space: nowrap;
        }

        .hash-icon {
            width: 36px;
            height: 36px;
            border-radius: 7px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        /* Leaderboard Popup */
        .logo-leaderboard-wrap {
            position: relative;
            display: inline-flex;
            cursor: pointer;
        }
        .logo-leaderboard-wrap img {
            transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s;
        }
        .logo-leaderboard-wrap:hover img {
            transform: scale(1.12) rotate(-3deg);
            box-shadow: 0 4px 14px rgba(3,164,241,0.35);
        }
        .leaderboard-popup {
            position: absolute;
            top: calc(100% + 12px);
            left: 0;
            min-width: 320px;
            background: linear-gradient(165deg, #ffffff 0%, #f8fafc 55%, #f1f5f9 100%);
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06);
            z-index: 1001;
            display: none;
            overflow: hidden;
        }
        .leaderboard-popup.show {
            display: block;
            animation: lbSlideIn 0.35s cubic-bezier(.34,1.56,.64,1);
        }
        @keyframes lbSlideIn {
            from { opacity: 0; transform: translateY(-14px) scale(0.96); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }
        .lb-header {
            padding: 20px 20px 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            border-bottom: 1px solid rgba(0,0,0,0.06);
        }
        .lb-header-icon { font-size: 22px; line-height: 1; }
        .lb-header-text {
            font-weight: 700;
            font-size: 15px;
            color: #1e293b;
            letter-spacing: 0.4px;
        }
        .lb-list { padding: 10px 12px 14px; }
        .lb-row {
            display: grid;
            grid-template-columns: 32px 1fr auto;
            align-items: center;
            gap: 10px;
            padding: 12px 10px;
            border-radius: 10px;
            transition: background 0.2s;
        }
        .lb-row:hover { background: rgba(0,0,0,0.03); }
        .lb-rank {
            width: 30px; height: 30px;
            display: flex; align-items: center; justify-content: center;
            border-radius: 8px;
            font-weight: 800; font-size: 13px;
        }
        .lb-rank-1 {
            background: linear-gradient(135deg, #fbbf24, #f59e0b);
            color: #78350f;
            box-shadow: 0 2px 10px rgba(251,191,36,0.3);
        }
        .lb-rank-2 {
            background: linear-gradient(135deg, #94a3b8, #cbd5e1);
            color: #334155;
            box-shadow: 0 2px 8px rgba(148,163,184,0.25);
        }
        .lb-rank-3 {
            background: linear-gradient(135deg, #d97706, #b45309);
            color: #fef3c7;
            box-shadow: 0 2px 8px rgba(217,119,6,0.25);
        }
        .lb-rank-other { background: rgba(0,0,0,0.05); color: #64748b; }
        .lb-user { min-width: 0; }
        .lb-name {
            font-weight: 700; font-size: 14px; color: #1e293b;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .lb-week { font-size: 11px; color: #64748b; margin-top: 2px; }
        .lb-week span { color: #03A4F1; font-weight: 600; }
        .lb-score { text-align: right; padding-right: 2px; }
        .lb-score-num {
            font-size: 22px; font-weight: 800;
            background: linear-gradient(135deg, #03A4F1, #38bdf8);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text; line-height: 1;
        }
        .lb-score-label {
            font-size: 10px; color: #475569;
            text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;
        }
        .lb-divider { height: 1px; background: rgba(0,0,0,0.05); margin: 4px 10px; }
        .lb-loading { padding: 32px 20px; text-align: center; color: #475569; font-size: 13px; }
        .lb-loading-spinner {
            width: 24px; height: 24px;
            border: 2.5px solid rgba(3,164,241,0.15); border-top-color: #03A4F1;
            border-radius: 50%; animation: lbSpin 0.7s linear infinite;
            margin: 0 auto 10px;
        }
        @keyframes lbSpin { to { transform: rotate(360deg); } }
        .lb-row-1 { animation: lbFadeRow 0.35s 0.05s both; }
        .lb-row-2 { animation: lbFadeRow 0.35s 0.12s both; }
        .lb-row-3 { animation: lbFadeRow 0.35s 0.19s both; }
        @keyframes lbFadeRow {
            from { opacity: 0; transform: translateX(-8px); }
            to   { opacity: 1; transform: translateX(0); }
        }

        /* Leaderboard dark mode */
        body.dark-mode .leaderboard-popup {
            background: linear-gradient(165deg, #0c1425 0%, #162032 55%, #1a2844 100%);
            box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06), inset 0 1px 0 rgba(255,255,255,0.05);
        }
        body.dark-mode .lb-header {
            border-bottom-color: rgba(255,255,255,0.06);
        }
        body.dark-mode .lb-header-text {
            color: #e2e8f0;
        }
        body.dark-mode .lb-name {
            color: #f1f5f9;
        }
        body.dark-mode .lb-row:hover {
            background: rgba(255,255,255,0.04);
        }
        body.dark-mode .lb-rank-other {
            background: rgba(255,255,255,0.06);
        }
        body.dark-mode .lb-divider {
            background: rgba(255,255,255,0.04);
        }

        h1 {
            color: #ffffff;
            font-size: 28px;
            font-weight: 600;
            margin: 0;
            text-shadow:
                -1px -1px 0 #000,
                1px -1px 0 #000,
                -1px 1px 0 #000,
                1px 1px 0 #000,
                -2px -2px 0 #000,
                2px -2px 0 #000,
                -2px 2px 0 #000,
                2px 2px 0 #000,
                -3px 0 0 #000,
                3px 0 0 #000,
                0 -3px 0 #000,
                0 3px 0 #000,
                -2px 0 0 #000,
                2px 0 0 #000,
                0 -2px 0 #000,
                0 2px 0 #000;
        }

        .search-container {
            display: flex;
            gap: 12px;
            align-items: center;
            margin-bottom: 20px;
            position: relative;
        }

        .search-container::before {
            content: '🔍';
            position: absolute;
            left: 18px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 16px;
            z-index: 1;
            pointer-events: none;
            opacity: 0.5;
            transition: opacity 0.2s;
        }

        .search-container:focus-within::before {
            opacity: 0.8;
        }

        .search-input {
            flex: 1;
            padding: 14px 16px 14px 44px;
            border: 2px solid #e5e7eb;
            border-radius: 24px;
            font-size: 16px;
            transition: border-color 0.2s, box-shadow 0.2s;
            background: white;
        }

        .search-input:focus {
            outline: none;
            border-color: #03A4F1;
            box-shadow: 0 0 0 4px rgba(3, 164, 241, 0.1);
        }

        .filter-controls {
            display: flex;
            gap: 12px;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .advanced-filters-container {
            display: flex;
            gap: 8px;
            align-items: center;
            flex-wrap: wrap;
            margin-left: auto;
        }

        .filter-badge {
            display: inline-block;
            padding: 6px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
            border: 2px solid #e5e7eb;
            background: white;
            color: #6b7280;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
        }

        .filter-badge:hover {
            border-color: #cbd5e1;
            background: #f9fafb;
        }

        .filter-badge.active {
            background: #03A4F1;
            color: white;
            border-color: #03A4F1;
        }

        /* Category-specific colors - matching Hash app */
        .filter-badge.cat-music.active { background: #FF717A; border-color: #FF717A; color: white; }
        .filter-badge.cat-festivals.active { background: #6BC1FF; border-color: #6BC1FF; color: white; }
        .filter-badge.cat-food.active { background: #c0f4bc; border-color: #c0f4bc; color: #1e293b; }
        .filter-badge.cat-sports.active { background: #FF8352; border-color: #FF8352; color: white; }
        .filter-badge.cat-comedy.active { background: #f8dc9c; border-color: #f8dc9c; color: #1e293b; }
        .filter-badge.cat-art.active { background: #d87cfc; border-color: #d87cfc; color: white; }
        .filter-badge.cat-bars.active { background: #FFBA0E; border-color: #FFBA0E; color: #1e293b; }
        .filter-badge.cat-nightclubs.active { background: #5963D1; border-color: #5963D1; color: white; }

        .filter-badge.cat-music { color: #FF717A; border-color: #FFB3B8; }
        .filter-badge.cat-festivals { color: #6BC1FF; border-color: #B3DFFF; }
        .filter-badge.cat-food { color: #7ec57e; border-color: #d8f9d1; }
        .filter-badge.cat-sports { color: #FF8352; border-color: #FFC4B1; }
        .filter-badge.cat-comedy { color: #d4b557; border-color: #fcefd3; }
        .filter-badge.cat-art { color: #d87cfc; border-color: #eab3ff; }
        .filter-badge.cat-bars { color: #d99b00; border-color: #ffd966; }
        .filter-badge.cat-nightclubs { color: #5963D1; border-color: #b8c3e8; }

        /* Sort toggle button - distinct styling */
        .sort-toggle {
            color: #d97706;
            border-color: #fed7aa;
            background: #fffbeb;
        }

        .sort-toggle:hover {
            border-color: #fb923c;
            background: #fef3c7;
        }

        .sort-toggle.active {
            background: #d97706;
            color: white;
            border-color: #b45309;
        }

        .filter-group-label {
            font-size: 11px;
            font-weight: 700;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-right: 6px;
        }

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

        .clear-filters-btn {
            padding: 6px 10px;
            font-size: 12px;
            background: #ef4444;
            color: white;
            border: none;
            border-radius: 18px;
            cursor: pointer;
            transition: background 0.2s;
            display: none;
        }

        .clear-filters-btn.show {
            display: block;
        }

        .clear-filters-btn:hover {
            background: #dc2626;
        }

        .month-selector {
            padding: 14px 20px;
            border: none;
            border-radius: 24px;
            font-size: 17px;
            font-weight: 600;
            text-transform: uppercase;
            background: linear-gradient(135deg, rgba(3, 164, 241, 0.08) 0%, rgba(3, 164, 241, 0.04) 100%);
            cursor: pointer;
            transition: all 0.2s;
            min-width: 200px;
            color: #000000;
            box-shadow: 0 2px 8px rgba(3, 164, 241, 0.12);
            text-align-last: center;
            text-align: center;
        }

        .month-selector option {
            text-align: center;
            padding: 10px 20px;
        }

        .month-selector:hover {
            background: linear-gradient(135deg, rgba(3, 164, 241, 0.12) 0%, rgba(3, 164, 241, 0.08) 100%);
            box-shadow: 0 4px 12px rgba(3, 164, 241, 0.2);
            transform: translateY(-1px);
        }

        .month-selector:focus {
            outline: none;
            box-shadow: 0 4px 16px rgba(3, 164, 241, 0.3);
        }

        .month-selector:disabled {
            background: #f3f4f6;
            cursor: not-allowed;
            opacity: 0.6;
        }

        .month-navigation {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .month-nav-btn {
            padding: 10px 12px;
            border: none;
            border-radius: 12px;
            background: linear-gradient(135deg, rgba(3, 164, 241, 0.08) 0%, rgba(3, 164, 241, 0.04) 100%);
            cursor: pointer;
            font-size: 20px;
            font-weight: bold;
            color: #03A4F1;
            transition: all 0.2s;
            min-width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(3, 164, 241, 0.12);
        }

        .month-today-btn {
            font-size: 14px;
            min-width: 64px;
        }

        .month-nav-btn:hover {
            background: linear-gradient(135deg, rgba(3, 164, 241, 0.15) 0%, rgba(3, 164, 241, 0.08) 100%);
            box-shadow: 0 4px 12px rgba(3, 164, 241, 0.2);
            transform: translateY(-2px);
        }

        .month-nav-btn:active {
            transform: scale(0.95);
        }

        @keyframes floatUp {
            0% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
            100% {
                opacity: 0;
                transform: translateY(-40px) scale(0.8);
            }
        }

        .counter-animation {
            position: absolute;
            font-weight: bold;
            font-size: 18px;
            pointer-events: none;
            animation: floatUp 1.2s ease-out forwards;
        }

        .counter-animation.plus {
            color: #d4af37;
        }

        .counter-animation.minus {
            color: #ef4444;
        }

        .grand-total-stats {
            display: flex;
            flex-shrink: 0;
            gap: 16px;
            padding: 8px 16px;
            background: white;
            border: none;
            border-radius: 16px;
            justify-content: center;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        }

        .grand-stat-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }

        .grand-stat-label {
            white-space: nowrap;
            font-size: 10px;
            color: #9ca3af;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .grand-stat-value {
            font-size: 16px;
            font-weight: 600;
            color: #6b7280;
            transition: all 0.3s ease;
        }
        .grand-stat-value.gold-shine {
            color: #d4af37;
            font-weight: 700;
            text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
            animation: goldPulseCounter 3s ease-in-out;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 24px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            transition: transform 0.2s, box-shadow 0.2s;
            text-decoration: none;
            display: inline-block;
        }

        .btn-primary {
            background: #03A4F1;
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 20px rgba(3, 164, 241, 0.3);
        }

        .btn-secondary {
            background: #e5e7eb;
            color: #374151;
        }

        .btn-secondary:hover {
            background: #d1d5db;
        }

        .btn-scraper {
            background: #f59e0b;
            color: white;
            font-family: 'Fredoka', sans-serif;
            font-size: 15px;
            font-weight: 600;
            letter-spacing: 0.02em;
            position: relative;
        }

        .board-count-badge {
            position: absolute;
            top: -8px;
            right: -8px;
            min-width: 20px;
            height: 20px;
            padding: 0 6px;
            border-radius: 999px;
            background: #ef4444;
            color: white;
            font-size: 12px;
            font-weight: 800;
            line-height: 20px;
            text-align: center;
            box-shadow: 0 2px 6px rgba(0,0,0,0.18);
        }
        .btn-scraper:hover {
            background: #d97706;
            box-shadow: 0 10px 20px rgba(245, 158, 11, 0.3);
            transform: translateY(-1px);
        }

        .tabs {
            display: flex;
            gap: 8px;
            border-bottom: 2px solid #e5e7eb;
        }

        .tab {
            padding: 12px 24px;
            border: none;
            background: none;
            cursor: pointer;
            font-size: 15px;
            font-weight: 500;
            color: #6b7280;
            border-bottom: 3px solid transparent;
            margin-bottom: -2px;
            transition: color 0.2s, border-color 0.2s;
        }

        .tab:hover {
            color: #03A4F1;
        }

        .tab.active {
            color: #03A4F1;
            border-bottom-color: #03A4F1;
        }

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

        /* Grid density: compact */
        .events-grid.density-compact {
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 10px;
        }
        .events-grid.density-compact .event-card {
            font-size: 12px;
        }
        .events-grid.density-compact .event-image {
            max-height: 120px;
        }
        .events-grid.density-compact .event-title {
            font-size: 13px;
        }
        .events-grid.density-compact .event-detail {
            font-size: 11px;
        }
        .events-grid.density-compact .btn-small {
            font-size: 9px;
            padding: 2px 4px;
        }

        /* Grid density: image audit (4:5 preview) */
        .events-grid.density-image-audit {
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 8px;
        }
        .events-grid.density-image-audit .event-card {
            font-size: 0;
            border-radius: 10px;
            position: relative;
            content-visibility: visible;
            contain-intrinsic-size: none;
            overflow: hidden;
        }
        .events-grid.density-image-audit .event-card > div:not(:first-child):not(:nth-child(3)),
        .events-grid.density-image-audit .event-content,
        .events-grid.density-image-audit .event-actions,
        .events-grid.density-image-audit .selection-checkbox-container,
        .events-grid.density-image-audit .btn-small.btn-paste-clipboard,
        .events-grid.density-image-audit .btn-small.btn-refresh-cache,
        .events-grid.density-image-audit .btn-small.btn-duplicate,
        .events-grid.density-image-audit .event-card > div:has(.btn-small) {
            display: none !important;
        }
        .events-grid.density-image-audit .event-card > div:nth-child(3) {
            position: relative;
            width: 100%;
            padding-top: 125%; /* 4:5 aspect ratio */
            overflow: hidden;
        }
        .events-grid.density-image-audit .event-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            max-height: none;
            object-fit: cover;
            border-radius: 0;
            transition: opacity 0.2s ease;
            cursor: zoom-in;
        }
        .events-grid.density-image-audit .event-image:hover {
            opacity: 0.85;
        }
        .events-grid.density-image-audit .drag-overlay,
        .events-grid.density-image-audit .search-image-btn,
        .events-grid.density-image-audit .low-quality-badge,
        .events-grid.density-image-audit .paste-hint {
            display: none !important;
        }
        .events-grid.density-image-audit .search-image-btn-mini {
            display: flex !important;
            top: 30px;
            right: 6px;
            left: auto;
            bottom: auto;
        }
        .audit-paste-btn {
            position: absolute;
            top: 8px;
            left: 8px;
            background: rgba(124, 58, 237, 0.9);
            color: white;
            border: none;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 14px;
            z-index: 5;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            transition: background 0.2s ease, transform 0.2s ease;
        }
        .audit-paste-btn:hover {
            background: rgba(109, 40, 217, 1);
            transform: scale(1.15);
        }
        .audit-upload-btn {
            position: absolute;
            right: 6px;
            background: rgba(16, 185, 129, 0.9);
            color: white;
            border: none;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 14px;
            z-index: 5;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            transition: background 0.2s ease, transform 0.2s ease;
        }
        .audit-upload-btn:hover {
            background: rgba(5, 150, 105, 1);
            transform: scale(1.15);
        }

        /* Audit Image Lightbox */
        .audit-lightbox {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 9000;
            background: rgba(10, 12, 20, 0.9);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            align-items: center;
            justify-content: center;
            padding: 32px 24px;
        }
        .audit-lightbox.open {
            display: flex;
        }
        .lightbox-inner {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: 28px;
            max-width: min(92vw, 960px);
            max-height: 88vh;
            animation: lightboxIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        }
        @keyframes lightboxIn {
            from { opacity: 0; transform: scale(0.88); }
            to   { opacity: 1; transform: scale(1); }
        }
        .lightbox-img {
            display: block;
            width: auto;
            max-width: 480px;
            max-height: 80vh;
            border-radius: 12px;
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.06);
            object-fit: contain;
            flex-shrink: 0;
        }
        .lightbox-panel {
            display: flex;
            flex-direction: column;
            gap: 10px;
            min-width: 200px;
            max-width: 320px;
            max-height: 80vh;
            overflow-y: auto;
            padding-right: 4px;
        }
        .lightbox-title {
            color: #f1f5f9;
            font-size: 16px;
            font-weight: 700;
            line-height: 1.4;
            letter-spacing: -0.01em;
        }
        .lightbox-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
        }
        .lightbox-badge {
            font-size: 11px;
            font-weight: 600;
            padding: 3px 9px;
            border-radius: 20px;
            letter-spacing: 0.02em;
        }
        .lightbox-badge-ratio {
            background: rgba(255,255,255,0.1);
            color: #cbd5e1;
            border: 1px solid rgba(255,255,255,0.12);
        }
        .lightbox-badge-ratio.ratio-good { background: rgba(16,185,129,0.2); color: #6ee7b7; border-color: rgba(16,185,129,0.3); }
        .lightbox-badge-ratio.ratio-ok   { background: rgba(251,191,36,0.2); color: #fde68a; border-color: rgba(251,191,36,0.3); }
        .lightbox-badge-ratio.ratio-bad  { background: rgba(239,68,68,0.2);  color: #fca5a5; border-color: rgba(239,68,68,0.3); }
        .lightbox-badge-collection {
            background: rgba(3, 164, 241, 0.18);
            color: #7dd3fc;
            border: 1px solid rgba(3, 164, 241, 0.25);
        }
        .lightbox-close {
            position: fixed;
            top: 20px;
            right: 24px;
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.12);
            color: #94a3b8;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            font-size: 20px;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.15s, color 0.15s;
            z-index: 9001;
        }
        .lightbox-close:hover {
            background: rgba(255,255,255,0.16);
            color: #f1f5f9;
        }
        .lightbox-nav {
            position: fixed;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.12);
            color: #94a3b8;
            width: 44px;
            height: 64px;
            border-radius: 8px;
            font-size: 32px;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.15s, color 0.15s;
            z-index: 9001;
            user-select: none;
        }
        .lightbox-nav:hover {
            background: rgba(255,255,255,0.16);
            color: #f1f5f9;
        }
        .lightbox-nav-prev { left: 16px; }
        .lightbox-nav-next { right: 16px; }

        /* Lightbox image interaction */
        .lightbox-img-wrap {
            position: relative;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .lightbox-img-wrap:hover .lb-img-hint { opacity: 1; }
        .lb-img-hint {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0,0,0,0.65);
            color: rgba(255,255,255,0.85);
            font-size: 11px;
            font-weight: 500;
            padding: 4px 10px;
            border-radius: 20px;
            white-space: nowrap;
            opacity: 0;
            transition: opacity 0.2s;
            pointer-events: none;
            backdrop-filter: blur(4px);
        }
        .lb-drop-overlay {
            position: absolute;
            inset: 0;
            border-radius: 8px;
            border: 2.5px dashed rgba(99,179,237,0.7);
            background: rgba(14,165,233,0.12);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.15s;
            font-size: 13px;
            color: #93c5fd;
            font-weight: 600;
            gap: 6px;
        }
        .lightbox-img-wrap.lb-dragover .lb-drop-overlay { opacity: 1; }
        .lightbox-img-wrap.lb-dragover .lightbox-img { opacity: 0.4; }
        .lb-upload-spinner {
            position: absolute;
            inset: 0;
            border-radius: 8px;
            background: rgba(0,0,0,0.55);
            display: none;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 8px;
            color: white;
            font-size: 12px;
            font-weight: 500;
        }
        .lb-upload-spinner.show { display: flex; }
        .lb-upload-spinner-ring {
            width: 36px; height: 36px;
            border: 3px solid rgba(255,255,255,0.25);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 0.9s linear infinite;
        }

        .lightbox-actions {
            margin-top: auto;
            padding-top: 14px;
            border-top: 1px solid rgba(255,255,255,0.07);
            display: flex;
            flex-direction: column;
            gap: 6px;
            flex-shrink: 0;
        }
        .lightbox-actions-row {
            display: flex;
            gap: 8px;
        }
        .lightbox-actions button {
            flex: 1;
            padding: 9px 10px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: background 0.15s, border-color 0.15s;
            letter-spacing: 0.01em;
        }
        .lightbox-utils-row {
            display: flex;
            gap: 8px;
        }
        .lightbox-search-btn {
            padding: 9px 10px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            letter-spacing: 0.01em;
            transition: background 0.15s, border-color 0.15s;
            border: 1px solid rgba(139,92,246,0.3);
            background: rgba(139,92,246,0.1);
            color: #c4b5fd;
            flex: 1;
        }
        .lightbox-search-btn:hover {
            background: rgba(139,92,246,0.22);
            border-color: rgba(139,92,246,0.55);
            color: #ddd6fe;
        }
        .lightbox-paste-btn {
            padding: 9px 10px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            letter-spacing: 0.01em;
            transition: background 0.15s, border-color 0.15s;
            border: 1px solid rgba(20,184,166,0.3);
            background: rgba(20,184,166,0.1);
            color: #5eead4;
            flex: 1;
        }
        .lightbox-paste-btn:hover {
            background: rgba(20,184,166,0.22);
            border-color: rgba(20,184,166,0.55);
            color: #99f6e4;
        }
        .lightbox-edit-btn {
            border: 1px solid rgba(99,179,237,0.3);
            background: rgba(99,179,237,0.1);
            color: #93c5fd;
        }
        .lightbox-edit-btn:hover {
            background: rgba(99,179,237,0.22);
            border-color: rgba(99,179,237,0.55);
            color: #bfdbfe;
        }
        .lightbox-delete-btn {
            border: 1px solid rgba(239,68,68,0.25);
            background: rgba(239,68,68,0.1);
            color: #fca5a5;
        }
        .lightbox-delete-btn:hover {
            background: rgba(239,68,68,0.22);
            border-color: rgba(239,68,68,0.5);
            color: #fee2e2;
        }
        .lightbox-delete-btn.confirming {
            background: rgba(239,68,68,0.35);
            border-color: rgba(239,68,68,0.7);
            color: #fee2e2;
            animation: lbDeletePulse 0.8s ease infinite alternate;
        }
        @keyframes lbDeletePulse {
            from { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
            to   { box-shadow: 0 0 0 4px rgba(239,68,68,0.25); }
        }
        .lightbox-counter {
            font-size: 11px;
            color: #475569;
            font-weight: 500;
            padding: 3px 0;
        }
        .lightbox-details {
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding-top: 10px;
            border-top: 1px solid rgba(255,255,255,0.08);
        }
        .lightbox-details:empty { display: none; }
        .lb-detail-row {
            display: flex;
            align-items: baseline;
            gap: 8px;
            font-size: 12.5px;
            line-height: 1.5;
        }
        .lb-detail-icon {
            flex-shrink: 0;
            width: 18px;
            text-align: center;
            font-size: 13px;
        }
        .lb-detail-val {
            color: #94a3b8;
            word-break: break-word;
        }
        /* Show title overlay on hover */
        .events-grid.density-image-audit .event-card > div:nth-child(3)::after {
            content: attr(data-audit-title);
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 24px 8px 8px;
            background: linear-gradient(transparent, rgba(0,0,0,0.75));
            color: white;
            font-size: 11px;
            font-weight: 600;
            line-height: 1.3;
            opacity: 0;
            transition: opacity 0.15s ease;
            pointer-events: none;
        }
        .events-grid.density-image-audit .event-card:hover > div:nth-child(3)::after {
            opacity: 1;
        }
        /* Aspect ratio badge */
        .events-grid.density-image-audit .aspect-ratio-badge {
            position: absolute;
            top: 6px;
            right: 6px;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 700;
            z-index: 5;
            pointer-events: none;
            line-height: 1.4;
        }
        .aspect-ratio-badge.ratio-good {
            background: rgba(34, 197, 94, 0.9);
            color: white;
        }
        .aspect-ratio-badge.ratio-ok {
            background: rgba(234, 179, 8, 0.9);
            color: #1a1a1a;
        }
        .aspect-ratio-badge.ratio-bad {
            background: rgba(239, 68, 68, 0.9);
            color: white;
        }

        /* Density toggle button styles */
        .density-toggle {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            background: #f3f4f6;
            border-radius: 8px;
            padding: 2px;
            vertical-align: middle;
        }
        .density-toggle button {
            border: none;
            background: transparent;
            padding: 4px 8px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
            color: #6b7280;
            transition: all 0.15s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .density-icon {
            display: inline-grid;
            gap: 2px;
            width: 14px;
            height: 14px;
        }
        .density-icon.grid-2x2 {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
        }
        .density-icon.grid-3x3 {
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            gap: 1.5px;
        }
        .density-icon span {
            background: currentColor;
            border-radius: 1px;
        }
        .density-toggle button.active {
            background: white;
            color: #1e293b;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .density-toggle button:hover:not(.active) {
            color: #374151;
        }
        body.dark-mode .density-toggle {
            background: #374151;
        }
        body.dark-mode .density-toggle button {
            color: #9ca3af;
        }
        body.dark-mode .density-toggle button.active {
            background: #4b5563;
            color: #f3f4f6;
        }

        /* Audit ratio filter pills */
        .audit-filters {
            display: none;
            align-items: center;
            gap: 2px;
            background: #f3f4f6;
            border-radius: 8px;
            padding: 2px;
            vertical-align: middle;
            animation: auditFiltersIn 0.2s ease-out;
        }
        .audit-filters.visible {
            display: inline-flex;
        }
        @keyframes auditFiltersIn {
            from { opacity: 0; transform: translateX(-6px); }
            to { opacity: 1; transform: translateX(0); }
        }
        .audit-filter-btn {
            border: none;
            background: transparent;
            padding: 4px 10px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 11px;
            font-weight: 600;
            color: #6b7280;
            transition: all 0.15s ease;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            white-space: nowrap;
        }
        .audit-filter-btn:hover:not(.active) {
            color: #374151;
            background: rgba(0,0,0,0.04);
        }
        .audit-filter-btn.active {
            background: white;
            color: #1e293b;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .audit-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
            flex-shrink: 0;
        }
        .audit-dot-all {
            background: linear-gradient(135deg, #22c55e 33%, #eab308 33%, #eab308 66%, #ef4444 66%);
        }
        .audit-dot-good { background: #22c55e; }
        .audit-dot-ok { background: #eab308; }
        .audit-dot-bad { background: #ef4444; }
        .audit-filter-count {
            font-size: 10px;
            font-weight: 700;
            background: rgba(0,0,0,0.08);
            padding: 1px 5px;
            border-radius: 8px;
            min-width: 16px;
            text-align: center;
        }
        .audit-filter-btn.active .audit-filter-count {
            background: rgba(0,0,0,0.06);
        }
        /* Dark mode */
        body.dark-mode .audit-filters {
            background: #374151;
        }
        body.dark-mode .audit-filter-btn {
            color: #9ca3af;
        }
        body.dark-mode .audit-filter-btn:hover:not(.active) {
            color: #d1d5db;
            background: rgba(255,255,255,0.05);
        }
        body.dark-mode .audit-filter-btn.active {
            background: #4b5563;
            color: #f3f4f6;
        }
        body.dark-mode .audit-filter-count {
            background: rgba(255,255,255,0.1);
        }

        /* === DENSITY: NO-IMAGES (Text Audit Mode) === */
        .events-grid.density-no-images {
            grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
            gap: 5px;
        }
        .events-grid.density-no-images .event-card {
            flex-direction: row;
            align-items: stretch;
            border-radius: 10px;
            min-height: 0;
            contain-intrinsic-size: auto 72px;
        }
        .events-grid.density-no-images .event-card:hover {
            transform: translateX(2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.12);
        }
        /* Hide image wrapper (3rd child) + paste/refresh/dup row (4th child) */
        .events-grid.density-no-images .event-card > div:nth-child(3),
        .events-grid.density-no-images .event-card > div:nth-child(4) {
            display: none !important;
        }
        /* Category color left-border accent */
        .events-grid.density-no-images .event-content {
            border-left: 4px solid #e2e8f0;
            border-radius: 0;
            flex-grow: 1;
            padding: 8px 10px;
        }
        .events-grid.density-no-images .event-content.cat-music     { border-left-color: #FF717A; }
        .events-grid.density-no-images .event-content.cat-festivals  { border-left-color: #6BC1FF; }
        .events-grid.density-no-images .event-content.cat-food       { border-left-color: #6cc96c; }
        .events-grid.density-no-images .event-content.cat-sports     { border-left-color: #FF8352; }
        .events-grid.density-no-images .event-content.cat-comedy     { border-left-color: #f5c842; }
        .events-grid.density-no-images .event-content.cat-art        { border-left-color: #d87cfc; }
        .events-grid.density-no-images .event-content.cat-bars       { border-left-color: #FFBA0E; }
        .events-grid.density-no-images .event-content.cat-nightclubs { border-left-color: #5963D1; }
        /* Compact text layout */
        .events-grid.density-no-images .event-title   { font-size: 14px; font-weight: 600; }
        .events-grid.density-no-images .event-detail  { font-size: 11px; }
        .events-grid.density-no-images .event-header  { margin-bottom: 3px; }
        .events-grid.density-no-images .event-tags    { margin-top: 3px; }
        /* Actions column on the right */
        .events-grid.density-no-images .event-actions {
            flex-direction: column;
            border-top: none;
            border-left: 1px solid rgba(0,0,0,0.07);
            padding: 6px;
            min-width: 70px;
            justify-content: center;
            border-radius: 0;
        }
        .events-grid.density-no-images .event-actions .btn-small {
            width: 100%;
            text-align: center;
            font-size: 11px;
            padding: 5px 6px;
        }
        body.dark-mode .events-grid.density-no-images .event-content { background: #1e293b; }
        body.dark-mode .events-grid.density-no-images .event-actions  { border-left-color: #334155; }

        /* === DENSITY: LO-RES (Thumbnail / Low-Bandwidth Mode) === */
        .events-grid.density-lo-res {
            grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
            gap: 5px;
        }
        /*
         * CSS Grid layout for the card:
         *   Col 0 (96px): image on top, Edit+Delete below
         *   Col 1 (1fr):  all event fields
         *
         * Children in DOM order:
         *   1 drag-overlay      → position:absolute, ignored by grid
         *   2 selection-checkbox→ hidden
         *   3 image wrapper     → grid-area: img
         *   4 paste/refresh row → hidden
         *   5 event-content     → grid-area: content (spans both rows)
         *   6 event-actions     → grid-area: actions
         */
        .events-grid.density-lo-res .event-card {
            display: grid;
            grid-template-columns: 96px 1fr;
            grid-template-rows: auto auto;
            grid-template-areas:
                "img     content"
                "actions content";
            border-radius: 8px;
            contain-intrinsic-size: auto 120px;
        }
        .events-grid.density-lo-res .event-card:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(0,0,0,0.12);
        }
        /* Checkbox: hide in lo-res */
        .events-grid.density-lo-res .selection-checkbox-container {
            display: none !important;
        }
        /* Thumbnail fills the img grid area */
        .events-grid.density-lo-res .event-card > div:nth-child(3) {
            grid-area: img;
            width: 96px;
            overflow: hidden;
            position: relative;
        }
        .events-grid.density-lo-res .event-image {
            width: 96px;
            height: 96px;
            object-fit: cover;
            object-position: center top;
            display: block;
            border-radius: 0;
        }
        /* Paste/refresh/dup row: hidden (inline style needs !important) */
        .events-grid.density-lo-res .event-card > div:nth-child(4) {
            display: none !important;
        }
        /* Hide floating search buttons */
        .events-grid.density-lo-res .search-image-btn,
        .events-grid.density-lo-res .search-image-btn-mini {
            display: none !important;
        }
        /* Thumbnail is only 96px wide — shrink the pill and let it wrap across lines */
        .events-grid.density-lo-res .paste-hint {
            display: block;
            box-sizing: border-box;
            width: 80px;
            padding: 3px 4px;
            border-radius: 6px;
            font-size: 8px;
            line-height: 1.3;
            white-space: normal;
            text-align: center;
        }
        .events-grid.density-lo-res .paste-hint kbd {
            font-size: 8px;
            padding: 1px 4px;
        }
        /* Content: spans both rows in right column */
        .events-grid.density-lo-res .event-content {
            grid-area: content;
            padding: 8px 10px 8px 10px;
            min-width: 0;
            border-left: 1px solid rgba(0,0,0,0.06);
        }
        .events-grid.density-lo-res .event-header { margin-bottom: 3px; }
        .events-grid.density-lo-res .event-title {
            font-size: 13px;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .events-grid.density-lo-res .event-detail {
            font-size: 11px;
            margin-top: 1px;
            line-height: 1.4;
        }
        /* Ticket link: single line, truncated */
        .events-grid.density-lo-res .event-detail a {
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .events-grid.density-lo-res .event-tags { margin-top: 4px; }
        .events-grid.density-lo-res .event-id-line { font-size: 10px !important; }
        /* Actions: sit below the thumbnail in the left column, stacked vertically */
        .events-grid.density-lo-res .event-actions {
            grid-area: actions;
            flex-direction: column;
            border-top: 1px solid rgba(0,0,0,0.06);
            border-left: none;
            padding: 5px 4px;
            justify-content: center;
            gap: 4px;
            border-radius: 0 0 0 8px;
            width: 96px;
        }
        .events-grid.density-lo-res .event-actions .btn-small {
            width: 100%;
            font-size: 10px;
            padding: 4px 3px;
            text-align: center;
            border-radius: 5px;
        }
        body.dark-mode .events-grid.density-lo-res .event-content { border-left-color: #334155; }
        body.dark-mode .events-grid.density-lo-res .event-actions  { border-top-color: #334155; }
        /* Highlight hovered card — shows where Cmd+V will paste */
        .event-card:hover {
            outline: 2px solid rgba(124, 58, 237, 0.5);
            outline-offset: -1px;
        }
        /* Search image pill button in lo-res actions gap */
        .events-grid.density-lo-res .lo-res-search-btn {
            display: block;
            width: 100%;
            text-align: center;
            font-size: 10px;
            font-weight: 600;
            padding: 3px 4px;
            border-radius: 5px;
            margin-bottom: 3px;
            border: 1px solid rgba(59,130,246,0.3);
            background: rgba(59,130,246,0.08);
            color: #3b82f6;
            cursor: pointer;
            transition: background 0.15s;
        }
        .events-grid.density-lo-res .lo-res-search-btn:hover {
            background: rgba(59,130,246,0.18);
        }
        body.dark-mode .events-grid.density-lo-res .lo-res-search-btn {
            color: #93c5fd;
            border-color: rgba(147,197,253,0.25);
            background: rgba(59,130,246,0.1);
        }
        /* Aspect ratio pill badge in the lo-res actions gap */
        .events-grid.density-lo-res .lo-res-ratio-badge {
            display: block;
            width: 100%;
            text-align: center;
            font-size: 10px;
            font-weight: 700;
            padding: 3px 4px;
            border-radius: 5px;
            letter-spacing: 0.02em;
            margin-bottom: 4px;
        }
        .events-grid.density-lo-res .lo-res-ratio-badge.ratio-good {
            background: rgba(34, 197, 94, 0.15);
            color: #15803d;
        }
        .events-grid.density-lo-res .lo-res-ratio-badge.ratio-ok {
            background: rgba(234, 179, 8, 0.15);
            color: #a16207;
        }
        .events-grid.density-lo-res .lo-res-ratio-badge.ratio-bad {
            background: rgba(239, 68, 68, 0.15);
            color: #dc2626;
        }
        body.dark-mode .events-grid.density-lo-res .lo-res-ratio-badge.ratio-good { color: #4ade80; background: rgba(34,197,94,0.12); }
        body.dark-mode .events-grid.density-lo-res .lo-res-ratio-badge.ratio-ok   { color: #fbbf24; background: rgba(234,179,8,0.12); }
        body.dark-mode .events-grid.density-lo-res .lo-res-ratio-badge.ratio-bad  { color: #f87171; background: rgba(239,68,68,0.12); }

        /* Lo-res image context menu */
        #loResCtxMenu {
            position: fixed;
            z-index: 99999;
            background: #1e293b;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 10px;
            padding: 4px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3);
            display: none;
            min-width: 168px;
            font-family: 'Fredoka', sans-serif;
            animation: ctxFadeIn 0.12s ease;
        }
        #loResCtxMenu.visible { display: block; }
        @keyframes ctxFadeIn {
            from { opacity: 0; transform: scale(0.94) translateY(-4px); }
            to   { opacity: 1; transform: scale(1) translateY(0); }
        }
        .ctx-item {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 7px 11px;
            border-radius: 7px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
            color: #e2e8f0;
            transition: background 0.1s;
            white-space: nowrap;
        }
        .ctx-item:hover { background: rgba(255,255,255,0.1); }
        .ctx-item .ctx-icon { font-size: 15px; flex-shrink: 0; }
        .ctx-sep {
            height: 1px;
            background: rgba(255,255,255,0.08);
            margin: 3px 4px;
        }

        @keyframes slideOutRemove {
            0% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
            100% {
                opacity: 0;
                transform: translateY(-20px) scale(0.95);
            }
        }

        @keyframes slideInAppear {
            0% {
                opacity: 0;
                transform: translateY(10px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .event-card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            transition: transform 0.2s, box-shadow 0.2s;
            display: flex;
            flex-direction: column;
            position: relative;
            /* Performance: skip rendering off-screen cards */
            content-visibility: auto;
            contain-intrinsic-size: auto 450px;
        }

        .event-card.removing {
            animation: slideOutRemove 0.3s ease-out forwards;
        }

        /* Simplified staggered animation - only first 3 cards */
        .event-card:nth-child(1) { animation: slideInAppear 0.3s ease-out; }
        .event-card:nth-child(2) { animation: slideInAppear 0.3s ease-out 0.05s; }
        .event-card:nth-child(3) { animation: slideInAppear 0.3s ease-out 0.1s; }

        /* Reduce motion for users who prefer it */
        @media (prefers-reduced-motion: reduce) {
            .event-card { animation: none !important; }
            .event-card.removing { animation: none !important; }
        }

        .event-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            will-change: transform;
        }

        .event-image {
            width: 100%;
            height: 170px;
            object-fit: contain;
            cursor: grab;
            transition: filter 0.2s, opacity 0.2s;
        }

        .event-image:hover {
            filter: brightness(0.9);
        }

        .event-image.dragover {
            filter: brightness(0.7);
            opacity: 0.7;
        }

        .search-image-btn {
            position: absolute;
            bottom: 8px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(59, 130, 246, 0.85);
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 500;
            transition: background 0.2s ease, transform 0.2s ease;
            z-index: 5;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .search-image-btn:hover {
            background: rgba(37, 99, 235, 0.95);
            transform: translateX(-50%) scale(1.05);
        }

        .search-image-btn:active {
            transform: translateX(-50%) scale(0.98);
        }

        .search-image-btn-mini {
            position: absolute;
            bottom: 8px;
            left: 8px;
            background: rgba(59, 130, 246, 0.9);
            color: white;
            border: none;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.2s ease, transform 0.2s ease;
            z-index: 5;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .search-image-btn-mini:hover {
            background: rgba(37, 99, 235, 1);
            transform: scale(1.15);
        }

        .search-image-btn-mini:active {
            transform: scale(0.95);
        }

        @keyframes spin {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        .image-upload-spinner-overlay {
            animation: fadeIn 0.2s ease-in;
        }
        /* Background upload queue badge */
        #uploadQueueBadge {
            position: fixed;
            bottom: 28px;
            right: 28px;
            padding: 9px 16px;
            border-radius: 22px;
            font-size: 13px;
            font-weight: 600;
            display: none;
            align-items: center;
            gap: 8px;
            z-index: 9999;
            box-shadow: 0 4px 20px rgba(0,0,0,0.18);
            pointer-events: none;
            transition: background 0.2s;
        }
        #uploadQueueBadge.uploading { background: #03A4F1; color: white; display: flex; }
        #uploadQueueBadge.queued   { background: #f59e0b; color: white; display: flex; }
        #uploadQueueBadge.done     { background: #10b981; color: white; display: flex; }
        .upload-queue-spinner {
            width: 14px; height: 14px;
            border: 2px solid rgba(255,255,255,0.35);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            flex-shrink: 0;
        }
        /* Queued overlay on card thumbnail */
        .image-queued-overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(245,158,11,0.18);
            border: 2px solid rgba(245,158,11,0.5);
            display: flex; align-items: center; justify-content: center;
            font-size: 10px; font-weight: 700; color: #92400e;
            z-index: 50; border-radius: 4px; letter-spacing: 0.03em;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        @keyframes fadeOut {
            from {
                opacity: 1;
            }
            to {
                opacity: 0;
            }
        }

        .drag-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(3, 164, 241, 0.25);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            font-size: 14px;
            border: 2px dashed #03A4F1;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.15s;
            z-index: 10;
        }

        .event-card.dragover .drag-overlay {
            opacity: 1;
        }

        /* Paste hint — subtle cue that Cmd/Ctrl+V pastes clipboard image onto this card */
        .paste-hint {
            position: absolute;
            top: 8px;
            left: 50%;
            transform: translate(-50%, -4px);
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 5px 10px;
            border-radius: 20px;
            background: rgba(17, 24, 39, 0.82);
            color: #fff;
            font-size: 11px;
            font-weight: 500;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.15s ease, transform 0.15s ease;
            z-index: 6;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
        }
        .paste-hint kbd {
            background: rgba(124, 58, 237, 0.9);
            border-radius: 4px;
            padding: 1px 5px;
            font: inherit;
            font-weight: 700;
        }
        .event-card:hover .paste-hint {
            opacity: 1;
            transform: translate(-50%, 0);
        }
        @media (hover: none) {
            .paste-hint { display: none; }
        }
        @media (prefers-reduced-motion: reduce) {
            .paste-hint { transition: none; }
        }

        .session-edited-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #3b82f6;
            position: absolute;
            top: 8px;
            left: 8px;
            z-index: 2;
            box-shadow: 0 0 0 2px white, 0 0 6px rgba(59, 130, 246, 0.5);
        }

        .low-quality-badge {
            position: absolute;
            top: 8px;
            right: 8px;
            display: inline-block;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: bold;
            color: white;
            background: #ef4444;
            text-decoration: none;
            white-space: nowrap;
            z-index: 10;
            border: 2px solid #dc2626;
            margin-top: 6px;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.6; }
        }

        .event-content {
            padding: 12px;
            flex-grow: 1;
            background: white;
            transition: background-color 0.2s ease;
            position: relative;
        }

        .event-content.cat-music { background: #FFF0F1; }
        .event-content.cat-festivals { background: #F0F9FF; }
        .event-content.cat-food { background: #F7FEF5; }
        .event-content.cat-sports { background: #FFF5F1; }
        .event-content.cat-comedy { background: #FFFBF0; }
        .event-content.cat-art { background: #FAF5FF; }
        .event-content.cat-bars { background: #FFFBF0; }
        .event-content.cat-nightclubs { background: #F5F7FF; }

        .event-header {
            display: flex;
            justify-content: space-between;
            align-items: start;
            gap: 6px;
            margin-bottom: 8px;
        }

        .event-title {
            font-size: 20px;
            font-weight: 600;
            color: #1e293b;
            margin: 0;
            flex-grow: 1;
            line-height: 1.3;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        }

        .event-title.long-title {
            font-size: 16px;
        }

        .collection-badge {
            padding: 3px 8px;
            border-radius: 8px;
            font-size: 9px;
            font-weight: bold;
            color: white;
            white-space: nowrap;
        }

        .badge-la { background: #FF6B6B; }
        .badge-austin { background: #CC5500; }
        .badge-bay { background: #4FC3F7; }
        .badge-chicago { background: #00A86B; }
        .badge-miami { background: #FF4FA3; }
        .badge-dallas { background: #003594; }
        .badge-san-diego { background: #94a3b8; }

        .link-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: bold;
            color: white;
            background: #3b82f6;
            text-decoration: none;
            white-space: nowrap;
            margin-top: 6px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .link-badge:hover {
            background: #2563eb;
        }


        .duplicate-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: bold;
            color: white;
            background: #1f2937;
            text-decoration: none;
            white-space: nowrap;
            margin-top: 6px;
            cursor: pointer;
            transition: background 0.2s, transform 0.2s;
            border-left: 3px solid #111827;
        }

        .duplicate-badge:hover {
            background: #111827;
            transform: translateY(-1px);
        }

        .event-detail {
            font-size: 14px;
            color: #6b7280;
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 6px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.03);
        }

        .editable-field {
            cursor: pointer;
            transition: background 0.2s ease, padding 0.2s ease;
            border-radius: 4px;
            padding: 2px 4px;
            margin: -2px -4px;
        }

        .editable-field:hover {
            background: rgba(3, 164, 241, 0.08);
            padding: 2px 4px;
        }

        .event-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin: 8px 0;
        }

        .tag {
            padding: 3px 8px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 500;
        }

        .tag-free {
            background: #10b981;
            color: white;
        }

        .tag-sold-out {
            background: #ef4444;
            color: white;
        }

        .tag-new {
            background: linear-gradient(135deg, #f59e0b, #f97316);
            color: white;
            animation: newPulse 2s ease-in-out infinite;
        }

        @keyframes newPulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
            50% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0); }
        }

        /* Event ID line — clickable appearance */
        .event-id-line {
            display: inline-block;
            background: #f3f4f6;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            padding: 2px 8px !important;
            font-family: monospace;
            transition: all 0.15s;
            user-select: none;
        }
        .event-id-line:hover {
            background: #e0f2fe;
            border-color: #03A4F1;
            color: #0284c7 !important;
        }
        .event-id-line:active {
            transform: scale(0.97);
        }
        body.dark-mode .event-id-line {
            background: #334155;
            border-color: #475569;
            color: #94a3b8 !important;
        }
        body.dark-mode .event-id-line:hover {
            background: #1e3a5f;
            border-color: #0284c7;
            color: #38bdf8 !important;
        }

        /* Multi-select ID mode */
        .id-selectable {
            background: rgba(3, 164, 241, 0.05);
            border-radius: 4px;
            padding: 2px 6px !important;
        }
        .id-selected {
            background: rgba(3, 164, 241, 0.15);
            border: 1px solid #03A4F1;
            border-radius: 4px;
            padding: 2px 6px !important;
            color: #03A4F1 !important;
            font-weight: 600;
        }
        .id-collector-panel {
            position: fixed;
            bottom: 20px;
            left: 20px;
            background: white;
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.2);
            padding: 16px;
            z-index: 10000;
            min-width: 280px;
            max-width: 400px;
            max-height: 300px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            animation: slideUp 0.2s ease;
        }
        @keyframes slideUp {
            from { transform: translateY(20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        .id-collector-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 600;
            font-size: 14px;
        }
        .id-collector-list {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            overflow-y: auto;
            max-height: 160px;
        }
        .id-collector-chip {
            background: #f0f9ff;
            border: 1px solid #03A4F1;
            color: #0284c7;
            padding: 4px 8px;
            border-radius: 8px;
            font-size: 11px;
            font-family: monospace;
            cursor: pointer;
            transition: all 0.15s;
        }
        .id-collector-chip:hover {
            background: #fef2f2;
            border-color: #ef4444;
            color: #ef4444;
            text-decoration: line-through;
        }
        .id-collector-actions {
            display: flex;
            gap: 8px;
        }
        .id-collector-actions button {
            flex: 1;
            padding: 8px 12px;
            border: none;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.1s;
        }
        .id-collector-actions button:active { transform: scale(0.97); }
        .id-collector-copy {
            background: linear-gradient(135deg, #03A4F1, #0284c7);
            color: white;
        }
        .id-collector-clear {
            background: #f3f4f6;
            color: #6b7280;
        }
        body.dark-mode .id-collector-panel {
            background: #1e293b;
            box-shadow: 0 8px 32px rgba(0,0,0,0.5);
        }
        body.dark-mode .id-collector-header { color: #e2e8f0; }
        body.dark-mode .id-collector-chip {
            background: #334155;
            border-color: #0284c7;
            color: #38bdf8;
        }
        body.dark-mode .id-collector-chip:hover {
            background: #3f1f1f;
            border-color: #ef4444;
            color: #f87171;
        }
        body.dark-mode .id-collector-clear {
            background: #334155;
            color: #94a3b8;
        }
        body.dark-mode .id-selected {
            background: rgba(3, 164, 241, 0.25);
            color: #38bdf8 !important;
        }

        /* Past event dimming */
        .event-card.past-event {
            opacity: 0.5;
            position: relative;
        }
        .event-card.past-event::after {
            content: 'PAST';
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(239, 68, 68, 0.85);
            color: white;
            font-size: 10px;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 6px;
            letter-spacing: 0.5px;
            z-index: 5;
            pointer-events: none;
        }
        .event-card.past-event:hover {
            opacity: 0.75;
        }

        /* Past events floating pill */
        .past-events-pill {
            position: fixed;
            bottom: 20px;
            left: 20px;
            transform: translateY(0);
            background: rgba(239, 68, 68, 0.45);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            color: white;
            padding: 8px 18px;
            border-radius: 24px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            z-index: 9999;
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 2px 12px rgba(239, 68, 68, 0.15);
            transition: all 0.25s ease;
            opacity: 0;
            pointer-events: none;
            user-select: none;
        }
        .past-events-pill.visible {
            opacity: 1;
            pointer-events: auto;
        }
        .past-events-pill:hover {
            background: rgba(220, 38, 38, 0.65);
            box-shadow: 0 4px 16px rgba(239, 68, 68, 0.25);
            transform: translateY(-2px);
        }
        .past-events-pill:active {
            transform: translateY(0);
        }
        .past-events-pill.expanded {
            background: rgba(75, 85, 99, 0.45);
            box-shadow: 0 2px 12px rgba(75, 85, 99, 0.15);
        }
        .past-events-pill.expanded:hover {
            background: rgba(55, 65, 81, 0.65);
            box-shadow: 0 4px 16px rgba(75, 85, 99, 0.25);
        }
        .past-events-pill .pill-count {
            background: rgba(255,255,255,0.25);
            padding: 1px 8px;
            border-radius: 12px;
            font-size: 12px;
        }

        /* Past events section in grid */
        .past-events-section {
            grid-column: 1 / -1;
            display: none;
        }
        .past-events-section.visible {
            display: block;
        }
        .past-events-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 20px;
        }
        .past-events-hide-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            width: 100%;
            padding: 10px;
            margin-bottom: 16px;
            background: rgba(239, 68, 68, 0.06);
            border: 1px solid #fecaca;
            border-radius: 10px;
            color: #dc2626;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s ease;
        }
        .past-events-hide-btn:hover {
            background: rgba(239, 68, 68, 0.12);
        }

        /* Dark mode */
        body.dark-mode .past-events-pill {
            background: rgba(220, 38, 38, 0.4);
        }
        body.dark-mode .past-events-pill.expanded {
            background: rgba(75, 85, 99, 0.4);
        }
        body.dark-mode .past-events-hide-btn {
            background: rgba(239, 68, 68, 0.1);
            border-color: #7f1d1d;
            color: #fca5a5;
        }
        body.dark-mode .past-events-hide-btn:hover {
            background: rgba(239, 68, 68, 0.18);
        }

        /* Hidden Events — clean inline status tags */
        .badge-hidden {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: #fff;
            font-size: 9px;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: 4px;
            letter-spacing: 0.6px;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .btn-hide {
            background: #f59e0b !important;
            border: none;
            color: white;
            cursor: pointer;
            transition: all 0.2s;
        }
        .btn-hide:hover {
            background: #d97706 !important;
            transform: scale(1.04);
        }
        .btn-hide.is-hidden {
            background: #10b981 !important;
        }
        .btn-hide.is-hidden:hover {
            background: #059669 !important;
        }

        /* Keyboard shortcuts overlay */
        .shortcuts-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            z-index: 20000;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.15s ease;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .shortcuts-panel {
            background: white;
            border-radius: 20px;
            padding: 28px 32px;
            max-width: 420px;
            width: 90%;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }
        .shortcuts-panel h2 {
            margin: 0 0 20px 0;
            font-size: 18px;
            font-weight: 700;
        }
        .shortcut-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #f3f4f6;
        }
        .shortcut-row:last-child { border-bottom: none; }
        .shortcut-desc {
            font-size: 14px;
            color: #374151;
        }
        .shortcut-keys {
            display: flex;
            gap: 4px;
        }
        .kbd {
            background: #f3f4f6;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            padding: 3px 8px;
            font-size: 12px;
            font-family: monospace;
            font-weight: 600;
            color: #374151;
            box-shadow: 0 1px 2px rgba(0,0,0,0.08);
        }
        body.dark-mode .shortcuts-panel {
            background: #1e293b;
        }
        body.dark-mode .shortcuts-panel h2 { color: #e2e8f0; }
        body.dark-mode .shortcut-desc { color: #cbd5e1; }
        body.dark-mode .shortcut-row { border-color: #334155; }
        /* Command Palette */
        .command-palette-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.55);
            z-index: 25000;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding-top: 18vh;
            animation: fadeIn 0.12s ease;
            backdrop-filter: blur(4px);
        }
        .command-palette {
            background: white;
            border-radius: 16px;
            width: 520px;
            max-width: 92vw;
            box-shadow: 0 24px 80px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.06);
            overflow: hidden;
        }
        .command-palette-input-wrap {
            display: flex;
            align-items: center;
            padding: 16px 20px;
            border-bottom: 1px solid #e5e7eb;
            gap: 10px;
        }
        .command-palette-input-wrap .cp-icon {
            font-size: 18px;
            opacity: 0.5;
        }
        .command-palette-input {
            flex: 1;
            border: none;
            outline: none;
            font-size: 16px;
            font-weight: 500;
            background: transparent;
            color: #111;
        }
        .command-palette-input::placeholder {
            color: #9ca3af;
        }
        .command-palette-input-wrap .cp-esc {
            font-size: 11px;
            font-weight: 600;
            color: #9ca3af;
            background: #f3f4f6;
            border: 1px solid #d1d5db;
            border-radius: 5px;
            padding: 2px 7px;
        }
        .command-palette-results {
            max-height: 340px;
            overflow-y: auto;
            padding: 6px;
        }
        .command-palette-results:empty {
            display: none;
        }
        .cp-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 14px;
            border-radius: 10px;
            cursor: pointer;
            transition: background 0.08s;
        }
        .cp-item:hover, .cp-item.active {
            background: #f0f7ff;
        }
        .cp-item-icon {
            font-size: 18px;
            width: 28px;
            text-align: center;
            flex-shrink: 0;
        }
        .cp-item-text {
            flex: 1;
            min-width: 0;
        }
        .cp-item-label {
            font-size: 14px;
            font-weight: 500;
            color: #111;
        }
        .cp-item-hint {
            font-size: 11px;
            color: #9ca3af;
            margin-top: 1px;
        }
        .cp-item-shortcut {
            font-size: 11px;
            font-weight: 600;
            color: #9ca3af;
            background: #f3f4f6;
            border: 1px solid #e5e7eb;
            border-radius: 5px;
            padding: 2px 7px;
            flex-shrink: 0;
        }
        .cp-section {
            padding: 8px 14px 4px;
            font-size: 11px;
            font-weight: 700;
            color: #9ca3af;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        body.dark-mode .command-palette {
            background: #1e293b;
            box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08);
        }
        body.dark-mode .command-palette-input-wrap {
            border-color: #334155;
        }
        body.dark-mode .command-palette-input {
            color: #e2e8f0;
        }
        body.dark-mode .cp-item:hover, body.dark-mode .cp-item.active {
            background: #334155;
        }
        body.dark-mode .cp-item-label { color: #e2e8f0; }
        body.dark-mode .cp-item-hint { color: #64748b; }
        body.dark-mode .cp-item-shortcut,
        body.dark-mode .command-palette-input-wrap .cp-esc {
            background: #334155;
            border-color: #475569;
            color: #94a3b8;
        }
        body.dark-mode .cp-section { color: #64748b; }
        /* Hovered card highlight for keyboard shortcuts */
        .event-card.keyboard-hover {
            outline: 2px solid #03A4F1;
            outline-offset: -2px;
        }
        body.dark-mode .kbd {
            background: #334155;
            border-color: #475569;
            color: #e2e8f0;
        }

        .tag-category {
            border: 1px solid #e5e7eb;
            background: white;
            color: #6b7280;
        }

        /* Category-specific tag colors */
        .tag-category[data-category="Music"] {
            background: #FF717A;
            color: white;
            border-color: #FF717A;
        }

        .tag-category[data-category="Festivals"] {
            background: #6BC1FF;
            color: white;
            border-color: #6BC1FF;
        }

        .tag-category[data-category="Food Events"] {
            background: #a8dca4;
            color: white;
            border-color: #a8dca4;
        }

        .tag-category[data-category="Sports/Games"] {
            background: #FF8352;
            color: white;
            border-color: #FF8352;
        }

        .tag-category[data-category="Comedy Shows"] {
            background: #e6c580;
            color: white;
            border-color: #e6c580;
        }

        .tag-category[data-category="Art Shows"],
        .tag-category[data-category="Art Events"] {
            background: #d87cfc;
            color: white;
            border-color: #d87cfc;
        }

        .tag-category[data-category="Bars"] {
            background: #FFBA0E;
            color: white;
            border-color: #FFBA0E;
        }

        .tag-category[data-category="Nightclubs"] {
            background: #5963D1;
            color: white;
            border-color: #5963D1;
        }

        .event-actions {
            display: flex;
            gap: 8px;
            padding: 16px;
        }

        /* Category backgrounds for event-actions */
        .event-actions.cat-music { background: #FFF0F1; }
        .event-actions.cat-festivals { background: #F0F9FF; }
        .event-actions.cat-food { background: #F7FEF5; }
        .event-actions.cat-sports { background: #FFF5F1; }
        .event-actions.cat-comedy { background: #FFFBF0; }
        .event-actions.cat-art { background: #FAF5FF; }
        .event-actions.cat-bars { background: #FFFBF0; }
        .event-actions.cat-nightclubs { background: #F5F7FF; }

        .btn-small {
            flex: 1;
            padding: 6px 12px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
            z-index: 10;
            pointer-events: auto;
        }

        .btn-paste-clipboard {
            transition: background 0.2s ease, transform 0.2s ease;
        }

        .btn-paste-clipboard:hover {
            background: #6d28d9 !important;
            transform: translateY(-1px);
        }

        .btn-paste-clipboard:active {
            transform: translateY(0);
        }

        .btn-refresh-cache {
            transition: background 0.2s ease, transform 0.2s ease;
        }

        .btn-refresh-cache:hover {
            background: #0891b2 !important;
            transform: translateY(-1px);
        }

        .btn-refresh-cache:active {
            transform: translateY(0);
        }

        .btn-duplicate {
            transition: background 0.2s ease, transform 0.2s ease;
        }

        .btn-duplicate:hover {
            background: #374151 !important;
            transform: translateY(-1px);
        }

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

        .btn-edit {
            border: 1px solid #03A4F1;
            background: white;
            color: #03A4F1;
        }

        .btn-edit:hover {
            background: rgba(3, 164, 241, 0.04);
        }

        .btn-delete {
            border: 1px solid #ef4444;
            background: white;
            color: #ef4444;
        }

        .btn-delete:hover {
            background: rgba(239, 68, 68, 0.04);
        }

        /* Batch Delete Feature Styles */
        .selection-checkbox-container {
            position: absolute;
            top: 8px;
            left: 8px;
            z-index: 10;
            display: none;
        }

        body.selection-mode .selection-checkbox-container {
            display: block;
        }

        .selection-checkbox {
            width: 24px;
            height: 24px;
            cursor: pointer;
            accent-color: #03A4F1;
        }

        .event-card.selected {
            outline: 3px solid #03A4F1;
            outline-offset: -3px;
            background: rgba(3, 164, 241, 0.05);
        }

        .floating-action-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            border-top: 2px solid #e5e7eb;
            padding: 16px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
            z-index: 100;
            transform: translateY(100%);
            transition: transform 0.3s ease;
        }

        .floating-action-bar.show {
            transform: translateY(0);
        }

        .floating-action-bar-left {
            display: flex;
            align-items: center;
            gap: 16px;
            font-size: 14px;
            font-weight: 600;
            color: #1e293b;
        }

        .floating-action-bar-right {
            display: flex;
            gap: 8px;
        }

        .batch-delete-btn {
            background: #ef4444;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 600;
            font-size: 14px;
            transition: background 0.2s;
        }

        .batch-delete-btn:hover {
            background: #dc2626;
        }

        .cancel-selection-btn {
            background: #f3f4f6;
            color: #374151;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 600;
            font-size: 14px;
            transition: background 0.2s;
        }

        .cancel-selection-btn:hover {
            background: #e5e7eb;
        }

        .selection-count {
            font-size: 14px;
            color: #6b7280;
        }

        .loading {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.95);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            text-align: center;
            padding: 20px;
        }


        .spinner {
            width: 48px;
            height: 48px;
            border: 4px solid #e5e7eb;
            border-top-color: #03A4F1;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 16px;
        }

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

        .empty-state {
            text-align: center;
            padding: 80px 20px;
            background: white;
            border-radius: 16px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.06);
        }
        .empty-state-icon {
            font-size: 48px;
            margin-bottom: 16px;
            opacity: 0.5;
        }
        .empty-state-title {
            color: #374151;
            font-size: 18px;
            font-weight: 600;
            margin: 0 0 8px;
        }
        .empty-state-sub {
            color: #9ca3af;
            font-size: 14px;
            margin: 0;
        }
        body.dark-mode .empty-state {
            background: #1e2433;
            box-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }
        body.dark-mode .empty-state-title {
            color: #e2e8f0;
        }
        body.dark-mode .empty-state-sub {
            color: #64748b;
        }

        /* Modal Styles */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            overflow-y: auto;
            padding: 20px;
            pointer-events: none;
        }

        .modal.show {
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: auto;
        }

        .modal-content {
            background: white;
            border-radius: 12px;
            max-width: 900px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }

        @media (max-width: 768px) {
            .modal-content {
                max-width: 600px;
            }
        }

        .image-preview-container {
            margin-bottom: 24px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
        }

        .image-preview {
            width: 285px;
            height: 300px;
            object-fit: contain;
            border-radius: 12px;
            border: 2px solid #e5e7eb;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .image-upload-btn {
            position: relative;
            display: inline-block;
            width: 100%;
            max-width: 285px;
        }

        .image-upload-btn input[type="file"] {
            position: absolute;
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
            top: 0;
            left: 0;
        }

        .upload-label {
            display: block;
            width: 100%;
            padding: 12px 24px;
            background: #f3f4f6;
            border: 2px dashed #cbd5e1;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            text-align: center;
            font-weight: 500;
            font-size: 15px;
        }

        .upload-label:hover {
            background: #e5e7eb;
            border-color: #03A4F1;
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .categories-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-top: 8px;
        }

        .category-option {
            position: relative;
        }

        .category-option input[type="checkbox"] {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
        }

        .category-label {
            display: block;
            padding: 12px 16px;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            text-align: center;
            font-weight: 500;
            background: white;
            color: #374151;
        }

        .category-label:hover {
            border-color: #cbd5e1;
            background: #f9fafb;
        }

        /* Category-specific colors */
        .category-option[data-category="Music"] input:checked + .category-label {
            background: #FF717A;
            color: white;
            border-color: #FF717A;
        }

        .category-option[data-category="Festivals"] input:checked + .category-label {
            background: #6BC1FF;
            color: white;
            border-color: #6BC1FF;
        }

        .category-option[data-category="Food Events"] input:checked + .category-label {
            background: #a8dca4;
            color: white;
            border-color: #a8dca4;
        }

        .category-option[data-category="Sports/Games"] input:checked + .category-label {
            background: #FF8352;
            color: white;
            border-color: #FF8352;
        }

        .category-option[data-category="Comedy Shows"] input:checked + .category-label {
            background: #e6c580;
            color: white;
            border-color: #e6c580;
        }

        .category-option[data-category="Art Shows"] input:checked + .category-label {
            background: #d87cfc;
            color: white;
            border-color: #d87cfc;
        }

        .category-option[data-category="Bars"] input:checked + .category-label {
            background: #FFBA0E;
            color: white;
            border-color: #FFBA0E;
        }

        .category-option[data-category="Nightclubs"] input:checked + .category-label {
            background: #5963D1;
            color: white;
            border-color: #5963D1;
        }

        .category-option input:disabled + .category-label {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Primary and Secondary category indicators */
        .category-option[data-category-priority="primary"]::before {
            content: "PRIMARY";
            position: absolute;
            top: -8px;
            left: 10px;
            background: #10b981;
            color: white;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.5px;
            z-index: 1;
        }

        .category-option[data-category-priority="secondary"]::before {
            content: "SECONDARY";
            position: absolute;
            top: -8px;
            left: 10px;
            background: #6b7280;
            color: white;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.5px;
            z-index: 1;
        }

        .category-option[data-category-priority] .category-label {
            border-width: 3px;
        }

        .modal-header {
            padding: 24px;
            border-bottom: 1px solid #e5e7eb;
        }

        .modal-header h2 {
            font-size: 24px;
            font-weight: 600;
            color: #1e293b;
            margin: 0;
        }

        .modal-body {
            padding: 24px;
        }

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

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #374151;
            font-size: 14px;
        }

        .form-input, .form-textarea, .form-select {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            font-size: 16px;
            font-family: inherit;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .form-input:focus, .form-textarea:focus, .form-select:focus {
            outline: none;
            border-color: #03A4F1;
            box-shadow: 0 0 0 3px rgba(3, 164, 241, 0.1);
        }

        .form-textarea {
            resize: vertical;
            min-height: 80px;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        .checkbox-group {
            display: flex;
            gap: 20px;
            align-items: center;
        }

        .checkbox-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }

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

        .checkbox-item label {
            margin: 0;
            cursor: pointer;
        }

        .cloud-dedup-modal {
            width: min(96vw, 980px);
            max-width: 980px;
            max-height: 86vh;
            display: flex;
            flex-direction: column;
        }

        .cloud-dedup-modal .modal-body {
            overflow-y: auto;
        }

        .cloud-dedup-help {
            color: #64748b;
            font-size: 14px;
            line-height: 1.5;
            margin-bottom: 16px;
        }

        .cloud-dedup-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 18px;
            margin-bottom: 16px;
        }

        .cloud-dedup-grid label {
            color: #475569;
            font-size: 12px;
            font-weight: 700;
            min-width: 0;
        }

        .cloud-dedup-grid input,
        .cloud-dedup-grid select {
            margin-top: 6px;
            min-width: 0;
        }

        #cloudDedupCollection {
            width: 100%;
            min-width: 0;
            padding-right: 44px;
        }

        .cloud-dedup-summary {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            color: #334155;
            font-size: 13px;
            line-height: 1.5;
            margin-bottom: 12px;
            padding: 12px 14px;
        }

        .cloud-dedup-results {
            display: grid;
            gap: 10px;
        }

        .cloud-dedup-tier {
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            overflow: hidden;
        }

        .cloud-dedup-tier h3 {
            background: #f1f5f9;
            color: #1e293b;
            font-size: 14px;
            margin: 0;
            padding: 10px 12px;
        }

        .cloud-dedup-list {
            display: grid;
            gap: 8px;
            max-height: 220px;
            overflow-y: auto;
            padding: 10px 12px;
        }

        .cloud-dedup-item {
            background: #ffffff;
            border: 1px solid #edf2f7;
            border-radius: 10px;
            font-size: 12px;
            line-height: 1.45;
            padding: 9px 10px;
        }

        .cloud-dedup-item strong {
            color: #0f172a;
        }

        .cloud-dedup-muted {
            color: #64748b;
        }

        .modal-footer {
            padding: 24px;
            border-top: 1px solid #e5e7eb;
            display: flex;
            gap: 12px;
            justify-content: flex-end;
        }

        .toast {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background: white;
            padding: 16px 24px;
            border-radius: 8px;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            display: none;
            align-items: center;
            gap: 12px;
            z-index: 2000;
            animation: slideIn 0.3s ease-out;
        }

        .toast.show {
            display: flex;
        }

        .toast-success {
            border-left: 4px solid #10b981;
        }

        .toast-error {
            border-left: 4px solid #ef4444;
        }

        .toast-undo-btn {
            background: rgba(255,255,255,0.2);
            border: 1px solid rgba(255,255,255,0.4);
            color: white;
            padding: 4px 12px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            margin-left: 8px;
            transition: background 0.15s;
            white-space: nowrap;
        }
        .toast-undo-btn:hover {
            background: rgba(255,255,255,0.35);
        }
        .toast.toast-success.has-undo {
            background: #059669;
            color: white;
            border-left: 4px solid #047857;
        }
        body.dark-mode .toast.toast-success.has-undo {
            background: #065f46;
            border-left-color: #047857;
        }

        /* Sticky filter summary bar */
        .sticky-filter-bar {
            position: fixed;
            top: -50px;
            left: 0;
            right: 0;
            background: rgba(255,255,255,0.92);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid #e5e7eb;
            padding: 8px 20px;
            z-index: 9000;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            transition: top 0.25s ease;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }
        .sticky-filter-bar.visible {
            top: 0;
        }
        .sticky-filter-chip {
            background: #e0f2fe;
            color: #0369a1;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
            white-space: nowrap;
        }
        .sticky-filter-chip.region {
            background: #f0fdf4;
            color: #16a34a;
        }
        .sticky-filter-chip.search {
            background: #fef3c7;
            color: #92400e;
        }
        .sticky-filter-chip.month {
            background: #f3e8ff;
            color: #7c3aed;
        }
        .sticky-filter-chip.filter {
            background: #fce7f3;
            color: #be185d;
        }
        .sticky-filter-count {
            margin-left: auto;
            font-weight: 600;
            color: #6b7280;
            white-space: nowrap;
        }
        body.dark-mode .sticky-filter-bar {
            background: rgba(15,23,42,0.92);
            border-color: #334155;
        }
        body.dark-mode .sticky-filter-chip {
            background: #1e3a5f;
            color: #7dd3fc;
        }
        body.dark-mode .sticky-filter-chip.region {
            background: #1a3a2a;
            color: #86efac;
        }
        body.dark-mode .sticky-filter-chip.search {
            background: #3a2f1a;
            color: #fde68a;
        }
        body.dark-mode .sticky-filter-chip.month {
            background: #2e1a4a;
            color: #d8b4fe;
        }
        body.dark-mode .sticky-filter-chip.filter {
            background: #4a1a3a;
            color: #f9a8d4;
        }
        body.dark-mode .sticky-filter-count {
            color: #94a3b8;
        }

        .export-btn {
            background: #f0fdf4;
            border: 1px solid #86efac;
            color: #16a34a;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s;
            white-space: nowrap;
        }
        .export-btn:hover {
            background: #16a34a;
            color: white;
        }
        body.dark-mode .export-btn {
            background: #1a3a2a;
            border-color: #22c55e;
            color: #86efac;
        }
        body.dark-mode .export-btn:hover {
            background: #22c55e;
            color: #0f172a;
        }
        .export-btn.dedup-action-btn,
        body.dark-mode .export-btn.dedup-action-btn {
            background: linear-gradient(135deg, #7c3aed 0%, #a855f7 45%, #ec4899 100%) !important;
            border-color: #8b5cf6 !important;
            color: #ffffff !important;
            box-shadow: 0 8px 20px rgba(124, 58, 237, 0.22);
        }
        .export-btn.dedup-action-btn:hover,
        body.dark-mode .export-btn.dedup-action-btn:hover {
            background: linear-gradient(135deg, #6d28d9 0%, #9333ea 45%, #db2777 100%) !important;
            color: #ffffff !important;
            transform: translateY(-1px);
            box-shadow: 0 10px 24px rgba(236, 72, 153, 0.28);
        }
        .export-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 6px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
            z-index: 5000;
            overflow: hidden;
            min-width: 160px;
        }
        .export-dropdown button {
            display: block;
            width: 100%;
            padding: 10px 16px;
            border: none;
            background: none;
            text-align: left;
            font-size: 13px;
            cursor: pointer;
            transition: background 0.1s;
        }
        .export-dropdown button:hover {
            background: #f3f4f6;
        }
        body.dark-mode .export-dropdown {
            background: #1e293b;
        }
        body.dark-mode .export-dropdown button:hover {
            background: #334155;
        }
        body.dark-mode .export-dropdown button {
            color: #e2e8f0;
        }

        @keyframes slideIn {
            from {
                transform: translateX(400px);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        /* Online Indicator Styles */
        .online-indicator {
            position: relative;
            display: inline-block;
        }

        .online-btn {
            background: #10b981;
            color: white;
            padding: 10px 16px;
            border-radius: 24px;
            border: none;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .online-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(16, 185, 129, 0.3);
        }

        /* Add " online" text on desktop only */
        #onlineCount::after {
            content: " online";
        }

        .online-dot {
            width: 8px;
            height: 8px;
            background: #ffffff;
            border-radius: 50%;
            animation: pulse 2s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        .online-dropdown {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
            min-width: 280px;
            max-height: 400px;
            overflow-y: auto;
            display: none;
            z-index: 1000;
            animation: dropdownSlide 0.2s ease-out;
        }

        .online-dropdown.show {
            display: block;
        }

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

        .online-header {
            padding: 16px;
            border-bottom: 1px solid #e5e7eb;
            font-weight: 600;
            color: #1e293b;
            font-size: 14px;
        }

        .online-list {
            padding: 8px;
        }

        .online-user {
            padding: 12px;
            border-radius: 8px;
            margin-bottom: 4px;
            transition: background 0.2s;
        }

        .online-user:hover {
            background: #f8fafc;
        }

        .online-user-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 4px;
        }

        .online-user-dot {
            width: 8px;
            height: 8px;
            background: #10b981;
            border-radius: 50%;
        }

        .online-user-email {
            font-weight: 600;
            color: #1e293b;
            font-size: 14px;
        }

        .online-user-info {
            font-size: 12px;
            color: #64748b;
            margin-left: 16px;
        }
        .online-user-events {
            font-size: 11px;
            color: #64748b;
            margin-left: 16px;
            margin-top: 4px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .online-empty {
            padding: 32px 16px;
            text-align: center;
            color: #64748b;
            font-size: 14px;
        }

        .stats-bar {
            display: flex;
            gap: 12px;
            padding: 16px 20px;
            background: #F3F4F6;
            border-radius: 24px;
            margin-bottom: 20px;
            align-items: stretch;
        }

        .stat-item {
            flex: 1;
            text-align: center;
            background: white;
            padding: 12px 8px;
            border-radius: 16px;
            box-shadow: 0 2px 8px rgba(3, 164, 241, 0.12);
            transition: all 0.2s ease;
            cursor: pointer;
            position: relative;
        }

        .stat-item + .stat-item::before {
            content: '';
            position: absolute;
            left: -7px;
            top: 20%;
            height: 60%;
            width: 1.5px;
            background: #d1d5db;
            border-radius: 1px;
        }

        .stat-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(3, 164, 241, 0.2);
        }

        .stat-item#statTotal:not(.active) {
            background: #FEF8E7;
        }

        .stat-item#statTotal:not(.active):hover {
            box-shadow: 0 4px 16px rgba(212, 175, 55, 0.2);
        }

        .stat-item#statHidden:not(.active) {
            background: #FEF3E2;
        }

        .stat-item#statHidden:not(.active):hover {
            box-shadow: 0 4px 16px rgba(245, 158, 11, 0.2);
        }

        .stat-item#statHidden:not(.active):not(.zero-hidden) .stat-value {
            color: #dc2626;
        }

        body.dark-mode .stat-item#statHidden:not(.active):not(.zero-hidden) .stat-value {
            color: #f87171;
        }

        .stat-item#statHidden.active {
            background: linear-gradient(135deg, #f59e0b, #d97706);
        }

        .stat-item#statHidden.zero-hidden:not(.active) {
            background: #f0fdf4;
        }

        .stat-item#statHidden.zero-hidden:not(.active):hover {
            box-shadow: 0 4px 16px rgba(34, 197, 94, 0.2);
        }

        .stat-item#statHidden.zero-hidden:not(.active) .stat-value {
            color: #16a34a;
        }

        .stat-item#statHidden.zero-hidden:not(.active) .stat-label {
            color: #16a34a;
        }

        .stat-item#statHidden.zero-hidden.active {
            background: linear-gradient(135deg, #22c55e, #16a34a);
        }

        .stat-item.active {
            background: #03A4F1;
            box-shadow: 0 4px 16px rgba(3, 164, 241, 0.3);
        }

        .stat-item.active .stat-value,
        .stat-item.active .stat-label {
            color: white;
        }

        .stat-value {
            font-size: 22px;
            font-weight: 600;
            color: #03A4F1;
            transition: all 0.3s ease;
        }
        .stat-value.gold-shine {
            color: #d4af37;
            font-weight: 700;
            text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
            animation: goldPulseCounter 3s ease-in-out;
        }
        @keyframes goldPulseCounter {
            0%, 100% {
                color: #d4af37;
                text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
            }
            50% {
                color: #ffd700;
                text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
            }
        }

        .stat-label {
            font-size: 11px;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-top: 3px;
            font-weight: 500;
        }

        /* Dark mode search icon */
        body.dark-mode .search-container::before {
            opacity: 0.6;
        }

        body.dark-mode .search-input {
            background: #334155;
            border-color: #475569;
            color: #e2e8f0;
        }

        body.dark-mode .search-input::placeholder {
            color: #94a3b8;
        }

        /* Dark mode stat dividers */
        body.dark-mode .stat-item + .stat-item::before {
            background: #475569;
        }

        /* Dark Mode Styles */
        body.dark-mode {
            background: #0f172a;
            color: #e2e8f0;
        }

        body.dark-mode .header {
            background: #1e293b;
            color: #e2e8f0;
        }

        body.dark-mode h1 {
            color: #e2e8f0;
        }

        body.dark-mode .search-bar input {
            background: #334155;
            border-color: #475569;
            color: #e2e8f0;
        }

        body.dark-mode .search-bar input::placeholder {
            color: #94a3b8;
        }

        body.dark-mode .search-bar input:focus {
            border-color: #03A4F1;
        }

        body.dark-mode .btn-clear {
            background: #374151;
            color: #e2e8f0;
            border-color: #475569;
        }

        body.dark-mode .stats-bar {
            background: #374151;
        }

        body.dark-mode .stat-item {
            background: #334155;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }

        body.dark-mode .stat-item:hover {
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
        }

        body.dark-mode .stat-item#statTotal:not(.active) {
            background: #3d3422;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }

        body.dark-mode .stat-item#statTotal:not(.active):hover {
            box-shadow: 0 4px 16px rgba(212, 175, 55, 0.3);
        }

        body.dark-mode .stat-item#statHidden:not(.active) {
            background: #3d2e12;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }

        body.dark-mode .stat-item#statHidden:not(.active):hover {
            box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
        }

        body.dark-mode .stat-item#statHidden.zero-hidden:not(.active) {
            background: rgba(34, 197, 94, 0.1);
        }

        body.dark-mode .stat-item#statHidden.zero-hidden:not(.active):hover {
            box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3);
        }

        body.dark-mode .stat-item#statHidden.zero-hidden:not(.active) .stat-value {
            color: #4ade80;
        }

        body.dark-mode .stat-item#statHidden.zero-hidden:not(.active) .stat-label {
            color: #4ade80;
        }

        /* Auto-hide button in Issues filter group */
        .filter-badge.auto-hide-btn {
            background: #fee2e2;
            border-color: #fca5a5;
            color: #dc2626;
            font-weight: 600;
        }
        .filter-badge.auto-hide-btn:hover {
            background: #dc2626;
            border-color: #dc2626;
            color: white;
        }
        body.dark-mode .filter-badge.auto-hide-btn {
            background: rgba(220,38,38,0.15);
            border-color: #7f1d1d;
            color: #f87171;
        }
        body.dark-mode .filter-badge.auto-hide-btn:hover {
            background: #dc2626;
            color: white;
        }

        body.dark-mode .stat-item.active {
            background: #0ea5e9;
            box-shadow: 0 4px 16px rgba(14, 165, 233, 0.5);
        }

        /* Admin avatar on active stat card */
        .stat-admin-avatar {
            position: absolute;
            bottom: -12px;
            left: 50%;
            transform: translateX(-50%);
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #1e293b;
            color: white;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid white;
            box-shadow: 0 2px 6px rgba(0,0,0,0.2);
            pointer-events: none;
            z-index: 10;
            text-transform: uppercase;
            transition: left 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        body.dark-mode .stat-admin-avatar {
            background: #0f172a;
            border-color: #0ea5e9;
        }
        .stat-other-avatar {
            position: absolute;
            bottom: -12px;
            left: 50%;
            transform: translateX(-50%);
            width: 24px;
            height: 24px;
            border-radius: 50%;
            color: white;
            font-size: 10px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid white;
            box-shadow: 0 2px 6px rgba(0,0,0,0.2);
            pointer-events: none;
            z-index: 9;
            text-transform: uppercase;
            transition: left 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        body.dark-mode .stat-other-avatar { border-color: #1e293b; }

        body.dark-mode .stat-item.active .stat-value,
        body.dark-mode .stat-item.active .stat-label {
            color: white;
        }

        body.dark-mode .stat-value {
            color: #38bdf8;
        }

        body.dark-mode .stat-label {
            color: #cbd5e1;
        }

        body.dark-mode .tabs {
            background: #1e293b;
            border-color: #475569;
        }

        body.dark-mode .tab {
            color: #94a3b8;
        }

        body.dark-mode .tab.active {
            color: #03A4F1;
            border-color: #03A4F1;
        }

        body.dark-mode .month-selector {
            background: linear-gradient(135deg, rgba(3, 164, 241, 0.15) 0%, rgba(3, 164, 241, 0.08) 100%);
            color: #e2e8f0;
            box-shadow: 0 2px 8px rgba(3, 164, 241, 0.2);
        }

        body.dark-mode .month-selector:hover {
            background: linear-gradient(135deg, rgba(3, 164, 241, 0.2) 0%, rgba(3, 164, 241, 0.12) 100%);
            box-shadow: 0 4px 12px rgba(3, 164, 241, 0.3);
        }

        body.dark-mode .month-selector:focus {
            box-shadow: 0 4px 16px rgba(3, 164, 241, 0.4);
        }

        body.dark-mode .month-selector:disabled {
            background: linear-gradient(135deg, rgba(3, 164, 241, 0.08) 0%, rgba(3, 164, 241, 0.04) 100%);
            opacity: 0.6;
        }

        body.dark-mode .month-nav-btn {
            background: linear-gradient(135deg, rgba(3, 164, 241, 0.15) 0%, rgba(3, 164, 241, 0.08) 100%);
            color: #38bdf8;
            box-shadow: 0 2px 8px rgba(3, 164, 241, 0.2);
        }

        body.dark-mode .month-nav-btn:hover {
            background: linear-gradient(135deg, rgba(3, 164, 241, 0.25) 0%, rgba(3, 164, 241, 0.15) 100%);
            box-shadow: 0 4px 12px rgba(3, 164, 241, 0.3);
            transform: translateY(-2px);
        }

        body.dark-mode .grand-total-stats {
            background: #1e293b;
            border-color: #d4af37;
        }

        body.dark-mode .grand-stat-label {
            color: #94a3b8;
        }

        body.dark-mode .grand-stat-value {
            color: #e2e8f0;
        }

        body.dark-mode .event-card {
            background: #1e293b;
            border-color: #334155;
        }

        body.dark-mode .event-card:hover {
            border-color: #475569;
        }

        body.dark-mode .event-title {
            color: #e2e8f0;
        }

        body.dark-mode .event-detail {
            color: #cbd5e1;
        }

        body.dark-mode .event-actions {
            border-top-color: #334155;
        }

        /* Dark mode category backgrounds for event-actions */
        body.dark-mode .event-actions.cat-music { background: #3a2122; }
        body.dark-mode .event-actions.cat-festivals { background: #1a2a3a; }
        body.dark-mode .event-actions.cat-food { background: #1f2a1e; }
        body.dark-mode .event-actions.cat-sports { background: #3a2418; }
        body.dark-mode .event-actions.cat-comedy { background: #3a3018; }
        body.dark-mode .event-actions.cat-art { background: #2a1a3a; }
        body.dark-mode .event-actions.cat-bars { background: #3a3018; }
        body.dark-mode .event-actions.cat-nightclubs { background: #1a1f3a; }

        body.dark-mode .btn-edit {
            background: #334155;
            border-color: #03A4F1;
            color: #03A4F1;
        }

        body.dark-mode .btn-edit:hover {
            background: rgba(3, 164, 241, 0.1);
        }

        body.dark-mode .btn-delete {
            background: #334155;
            border-color: #ef4444;
            color: #ef4444;
        }

        body.dark-mode .btn-delete:hover {
            background: rgba(239, 68, 68, 0.1);
        }

        body.dark-mode .modal-content {
            background: #1e293b;
            color: #e2e8f0;
        }

        body.dark-mode .modal-content h2 {
            color: #e2e8f0;
        }

        body.dark-mode .modal-content input,
        body.dark-mode .modal-content textarea,
        body.dark-mode .modal-content select {
            background: #334155;
            border-color: #475569;
            color: #e2e8f0;
        }

        body.dark-mode .modal-content input:focus,
        body.dark-mode .modal-content textarea:focus,
        body.dark-mode .modal-content select:focus {
            border-color: #03A4F1;
        }

        body.dark-mode .modal-content label {
            color: #d1d5db;
        }

        body.dark-mode .category-label {
            background: #374151;
            color: #e2e8f0;
            border-color: #475569;
        }

        body.dark-mode .image-preview {
            border-color: #475569;
        }

        body.dark-mode .upload-label {
            background: #374151;
            border-color: #475569;
            color: #d1d5db;
        }

        body.dark-mode .toast {
            background: #1e293b;
            color: #e2e8f0;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
        }

        /* Dark mode filter buttons */
        body.dark-mode .filter-badge {
            background: #334155;
            border-color: #475569;
            color: #cbd5e1;
        }

        body.dark-mode .filter-badge:hover {
            background: #475569;
            border-color: #64748b;
        }

        body.dark-mode .filter-badge.active {
            background: #0ea5e9;
            color: white;
            border-color: #0284c7;
        }

        /* Category-specific event-content backgrounds in dark mode */
        body.dark-mode .event-content.cat-music { background: #3a2122; }
        body.dark-mode .event-content.cat-festivals { background: #1a2a3a; }
        body.dark-mode .event-content.cat-food { background: #1f2a1e; }
        body.dark-mode .event-content.cat-sports { background: #3a2418; }
        body.dark-mode .event-content.cat-comedy { background: #3a3018; }
        body.dark-mode .event-content.cat-art { background: #2a1a3a; }
        body.dark-mode .event-content.cat-bars { background: #3a3018; }
        body.dark-mode .event-content.cat-nightclubs { background: #1a1f3a; }

        /* Category-specific colors in dark mode */
        body.dark-mode .filter-badge.cat-music { color: #ff9ca8; border-color: #7f3a3f; }
        body.dark-mode .filter-badge.cat-music.active { background: #FF717A; border-color: #FF717A; color: white; }

        body.dark-mode .filter-badge.cat-festivals { color: #7dd3fc; border-color: #1e3a8a; }
        body.dark-mode .filter-badge.cat-festivals.active { background: #6BC1FF; border-color: #6BC1FF; color: white; }

        body.dark-mode .filter-badge.cat-food { color: #86efac; border-color: #1b4332; }
        body.dark-mode .filter-badge.cat-food.active { background: #c0f4bc; border-color: #c0f4bc; color: #1e293b; }

        body.dark-mode .filter-badge.cat-sports { color: #ffb399; border-color: #7f3a1f; }
        body.dark-mode .filter-badge.cat-sports.active { background: #FF8352; border-color: #FF8352; color: white; }

        body.dark-mode .filter-badge.cat-comedy { color: #fde047; border-color: #7c2d12; }
        body.dark-mode .filter-badge.cat-comedy.active { background: #f8dc9c; border-color: #f8dc9c; color: #1e293b; }

        body.dark-mode .filter-badge.cat-art { color: #f0abfc; border-color: #5b21b6; }
        body.dark-mode .filter-badge.cat-art.active { background: #d87cfc; border-color: #d87cfc; color: white; }

        body.dark-mode .filter-badge.cat-bars { color: #fbbf24; border-color: #78350f; }
        body.dark-mode .filter-badge.cat-bars.active { background: #FFBA0E; border-color: #FFBA0E; color: #1e293b; }

        body.dark-mode .filter-badge.cat-nightclubs { color: #a5b4fc; border-color: #312e81; }
        body.dark-mode .filter-badge.cat-nightclubs.active { background: #5963D1; border-color: #5963D1; color: white; }

        /* Sort toggle in dark mode */
        body.dark-mode .sort-toggle {
            color: #fbbf24;
            border-color: #78350f;
            background: #332701;
        }

        body.dark-mode .sort-toggle:hover {
            border-color: #d97706;
            background: #422d1d;
        }

        body.dark-mode .sort-toggle.active {
            background: #d97706;
            color: white;
            border-color: #b45309;
        }

        /* Filter group label in dark mode */
        body.dark-mode .filter-group-label {
            color: #cbd5e1;
        }

        /* Clear filters button in dark mode */
        body.dark-mode .clear-filters-btn {
            background: #dc2626;
            color: white;
        }

        body.dark-mode .clear-filters-btn:hover {
            background: #b91c1c;
        }

        body.dark-mode .loading {
            background: rgba(15, 23, 42, 0.95);
        }

        body.dark-mode .spinner {
            border-color: #475569;
            border-top-color: #03A4F1;
        }

        body.dark-mode .loading p {
            color: #e2e8f0;
        }

        /* Floating Dark Mode Button */
        .floating-buttons {
            position: fixed;
            bottom: 20px;
            right: 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            z-index: 1000;
        }

        .floating-btn {
            width: 50px;
            height: 50px;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            font-size: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            position: fixed;
            z-index: 10000;
            opacity: 1;
            pointer-events: auto;
        }

        .floating-btn.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .dark-mode-btn {
            background: #6366f1;
            bottom: 20px;
            right: 20px;
        }

        .bell-mute-btn {
            background: #f59e0b;
            bottom: 80px;
            right: 20px;
        }

        .shortcuts-btn {
            background: #374151;
            bottom: 140px;
            right: 20px;
        }

        .floating-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
        }

        .floating-btn::after {
            content: attr(data-tooltip);
            position: absolute;
            right: 60px;
            top: 50%;
            transform: translateY(-50%);
            background: #1f2937;
            color: white;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 500;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .floating-btn:hover::after {
            opacity: 1;
        }

        /* Mobile Responsive Styles */
        @media (max-width: 1200px) {
            .header-content {
                flex-direction: column;
                gap: 16px;
                align-items: center;
            }

            .header-title {
                width: 100%;
            }

            h1 {
                font-size: 22px;
            }

            .hash-icon {
                width: 32px;
                height: 32px;
            }

            .header-actions {
                flex-wrap: wrap;
                justify-content: center;
                gap: 12px;
                width: 100%;
            }

            /* Keep buttons on same row */
            .header-actions > .btn,
            .header-actions > .online-indicator,
            .header-actions > button {
                flex: 0 0 auto;
            }

            .header-actions .btn,
            .header-actions .online-btn {
                padding: 10px 16px;
                font-size: 14px;
            }

            /* Hide "Event" text on mobile/tablet */
            .event-text {
                display: none;
            }

            /* Hide "online" text on tablet/mobile, show only number */
            #onlineCount::after {
                content: "";
            }

            .grand-total-stats {
                width: 100%;
                justify-content: center;
                flex: 0 0 100%;
            }

            .stats-bar {
                width: 100%;
                justify-content: center;
                flex-wrap: wrap;
                gap: 10px;
                padding: 12px;
            }

            .stat-item {
                flex: 1;
                min-width: 70px;
                padding: 12px 8px;
            }

            .stat-value {
                font-size: 20px;
            }

            .stat-label {
                font-size: 11px;
            }

            .tabs {
                gap: 4px;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

            .tab {
                padding: 12px 16px;
                font-size: 14px;
                white-space: nowrap;
                flex-shrink: 0;
            }

            /* Mobile optimization for advanced filters */
            .filter-controls {
                flex-direction: column;
                align-items: stretch;
            }

            .advanced-filters-container {
                flex-direction: column;
                gap: 12px;
            }

            .filter-group {
                flex-wrap: wrap;
                justify-content: center;
            }

            .filter-group-label {
                min-width: 100%;
                margin-bottom: 6px;
            }

            .filter-badge {
                flex: 0 1 calc(33.333% - 4px);
                font-size: 11px;
                padding: 5px 10px;
            }

            .clear-filters-btn {
                width: 100%;
            }

            .month-selector {
                width: 100%;
                min-width: unset;
            }

            .month-navigation {
                width: 100%;
                justify-content: space-between;
            }

            .month-nav-btn {
                flex: 0 0 auto;
            }
        }

        @media (max-width: 1280px) {
            .header {
                position: relative;
            }

            .logout-btn {
                position: absolute;
                top: 20px;
                right: 20px;
            }
        }

        @media (max-width: 480px) {
            h1 {
                font-size: 20px;
            }

            .header {
                padding: 20px;
            }

            .header-content {
                flex-direction: column;
            }

            body {
                padding: 12px;
            }

            /* Extra mobile optimization */
            .advanced-filters-container {
                gap: 10px;
            }

            .filter-group-label {
                font-size: 10px;
                margin-bottom: 4px;
            }

            .filter-badge {
                flex: 0 1 calc(50% - 3px);
                font-size: 10px;
                padding: 4px 8px;
                border-radius: 16px;
            }

            .clear-filters-btn {
                font-size: 11px;
                padding: 5px 8px;
            }

            /* Hide floating button tooltips on mobile */
            .floating-btn::after {
                display: none;
            }
        }

        /* Custom Modal Styles */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }

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

        .modal-content {
            background: white;
            border-radius: 12px;
            padding: 24px;
            max-width: 500px;
            width: 90%;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
        }

        .modal-title {
            font-size: 18px;
            font-weight: 600;
            color: #1e293b;
            margin: 0 0 16px 0;
        }

        .modal-input {
            width: 100%;
            padding: 10px 12px;
            border: 2px solid #e2e8f0;
            border-radius: 6px;
            font-size: 14px;
            font-family: monospace;
            box-sizing: border-box;
            margin-bottom: 16px;
            resize: vertical;
            min-height: 100px;
        }

        .modal-input:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .modal-buttons {
            display: flex;
            gap: 8px;
            justify-content: flex-end;
        }

        .modal-btn {
            padding: 8px 16px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }

        .modal-btn-confirm {
            background: #3b82f6;
            color: white;
        }

        .modal-btn-confirm:hover {
            background: #2563eb;
        }

        .modal-btn-cancel {
            background: #e2e8f0;
            color: #475569;
        }

        .modal-btn-cancel:hover {
            background: #cbd5e1;
        }

        .modal-description {
            font-size: 13px;
            color: #64748b;
            margin-bottom: 12px;
            line-height: 1.5;
        }

        .logout-btn {
            background: rgba(239, 68, 68, 0.1);
            color: #ef4444;
            font-weight: 600;
            padding: 8px 16px;
            border: none;
            border-radius: 20px;
            transition: all 0.2s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            cursor: pointer;
            font-size: 14px;
            font-family: 'Fredoka', sans-serif;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .logout-btn:hover {
            background: rgba(239, 68, 68, 0.15);
            color: #dc2626;
            box-shadow: 0 4px 8px rgba(239, 68, 68, 0.15);
            transform: translateY(-1px);
        }

        .logout-btn:active {
            transform: translateY(0);
        }
        /* ═══════════════════════════════════════════
           SIDE PANELS — Activity Feed & Analytics
           ═══════════════════════════════════════════ */
        .side-panel-overlay {
            position: fixed; inset: 0; background: rgba(0,0,0,0.35);
            backdrop-filter: blur(3px); z-index: 1100;
            opacity: 0; pointer-events: none;
            transition: opacity 0.3s ease;
        }
        .side-panel-overlay.show { opacity: 1; pointer-events: all; }

        .side-panel {
            position: fixed; top: 0; right: 0; height: 100vh;
            width: 400px; z-index: 1110;
            display: flex; flex-direction: column;
            transform: translateX(100%);
            transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            background: #fff;
            box-shadow: -8px 0 40px rgba(0,0,0,0.15);
        }
        .side-panel.open { transform: translateX(0); }
        .side-panel.analytics-panel { width: 480px; }

        body.dark-mode .side-panel {
            background: #0f172a;
            box-shadow: -8px 0 40px rgba(0,0,0,0.5), -1px 0 0 rgba(255,255,255,0.06);
        }

        .sp-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 18px 20px 14px;
            border-bottom: 1px solid #e5e7eb;
            flex-shrink: 0;
        }
        body.dark-mode .sp-header { border-bottom-color: #1e293b; }

        .sp-title {
            font-family: 'Fredoka', sans-serif;
            font-size: 18px; font-weight: 600; color: #0f172a;
            display: flex; align-items: center; gap: 8px;
        }
        body.dark-mode .sp-title { color: #f1f5f9; }

        .sp-title-icon {
            width: 30px; height: 30px; border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            font-size: 15px;
        }
        .sp-close {
            width: 30px; height: 30px; border-radius: 8px;
            border: none; background: #f1f5f9; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            color: #64748b; font-size: 16px; transition: all 0.15s;
        }
        .sp-close:hover { background: #e2e8f0; color: #0f172a; }
        body.dark-mode .sp-close { background: #1e293b; color: #94a3b8; }
        body.dark-mode .sp-close:hover { background: #334155; color: #f1f5f9; }

        .sp-body {
            flex: 1; overflow-y: auto; padding: 0;
        }
        .sp-body::-webkit-scrollbar { width: 4px; }
        .sp-body::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 2px; }
        body.dark-mode .sp-body::-webkit-scrollbar-thumb { background: #334155; }

        /* ─── Activity Feed ─── */
        .feed-empty {
            padding: 48px 20px; text-align: center;
            color: #94a3b8; font-size: 14px;
        }
        .feed-item {
            display: flex; align-items: flex-start; gap: 12px;
            padding: 12px 20px;
            border-bottom: 1px solid #f1f5f9;
            animation: feedSlideIn 0.25s ease;
            transition: background 0.15s;
        }
        .feed-item:hover { background: #f8fafc; }
        body.dark-mode .feed-item { border-bottom-color: #1e293b; }
        body.dark-mode .feed-item:hover { background: #1e293b; }

        @keyframes feedSlideIn {
            from { opacity: 0; transform: translateX(12px); }
            to   { opacity: 1; transform: translateX(0); }
        }

        .feed-avatar {
            width: 28px; height: 28px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 11px; font-weight: 700; color: white;
            flex-shrink: 0; margin-top: 1px;
        }
        .feed-content { flex: 1; min-width: 0; }
        .feed-action {
            font-size: 13px; color: #1e293b; line-height: 1.45;
            font-weight: 500;
        }
        body.dark-mode .feed-action { color: #e2e8f0; }
        .feed-event-title {
            font-style: italic; color: #475569;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            max-width: 220px; display: inline-block; vertical-align: bottom;
        }
        body.dark-mode .feed-event-title { color: #94a3b8; }
        .feed-meta {
            font-size: 11px; color: #94a3b8; margin-top: 2px;
            display: flex; gap: 6px; align-items: center;
        }
        .feed-region-badge {
            padding: 1px 6px; border-radius: 4px; font-size: 10px;
            font-weight: 600; background: #f1f5f9; color: #64748b;
        }
        body.dark-mode .feed-region-badge { background: #1e293b; color: #94a3b8; }

        .sp-section-label {
            padding: 10px 20px 6px;
            font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
            text-transform: uppercase; color: #94a3b8;
            position: sticky; top: 0;
            background: white; z-index: 1;
        }
        body.dark-mode .sp-section-label { background: #0f172a; }

        /* ─── Analytics Panel ─── */
        .analytics-section {
            padding: 20px 20px 0;
            border-bottom: 1px solid #f1f5f9;
            padding-bottom: 20px;
        }
        body.dark-mode .analytics-section { border-bottom-color: #1e293b; }
        .analytics-section:last-child { border-bottom: none; }

        .analytics-section-title {
            font-family: 'Fredoka', sans-serif;
            font-size: 14px; font-weight: 600; color: #475569;
            margin-bottom: 14px; display: flex; align-items: center; gap: 6px;
        }
        body.dark-mode .analytics-section-title { color: #94a3b8; }

        /* Summary KPI row */
        .analytics-kpis {
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
            margin-bottom: 4px;
        }
        .analytics-kpi {
            background: #f8fafc; border-radius: 10px; padding: 12px;
            text-align: center; border: 1px solid #e5e7eb;
        }
        body.dark-mode .analytics-kpi { background: #1e293b; border-color: #334155; }
        .analytics-kpi-value {
            font-family: 'Fredoka', sans-serif;
            font-size: 22px; font-weight: 600; color: #0f172a; line-height: 1;
        }
        body.dark-mode .analytics-kpi-value { color: #f1f5f9; }
        .analytics-kpi-label {
            font-size: 10px; color: #94a3b8; margin-top: 4px; font-weight: 500;
        }

        /* Bar chart */
        .bar-chart { display: flex; flex-direction: column; gap: 7px; }
        .bar-row {
            display: flex; align-items: center; gap: 8px;
        }
        .bar-label {
            font-size: 11px; color: #64748b; width: 80px; flex-shrink: 0;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            text-align: right;
        }
        body.dark-mode .bar-label { color: #94a3b8; }
        .bar-track {
            flex: 1; height: 8px; background: #f1f5f9; border-radius: 4px; overflow: hidden;
        }
        body.dark-mode .bar-track { background: #1e293b; }
        .bar-fill {
            height: 100%; border-radius: 4px;
            transform: scaleX(0); transform-origin: left;
            transition: transform 0.6s cubic-bezier(0.34, 1.26, 0.64, 1);
        }
        .bar-fill.animate { transform: scaleX(1); }
        .bar-value {
            font-size: 11px; color: #64748b; width: 28px; text-align: right; flex-shrink: 0;
        }
        body.dark-mode .bar-value { color: #94a3b8; }

        /* Stacked region bar */
        .bar-track-stacked {
            flex: 1; height: 10px; background: #f1f5f9; border-radius: 5px; overflow: hidden;
            display: flex; position: relative;
        }
        body.dark-mode .bar-track-stacked { background: #1e293b; }
        .bar-seg {
            height: 100%;
            transform: scaleX(0); transform-origin: left;
            transition: transform 0.6s cubic-bezier(0.34, 1.26, 0.64, 1);
        }
        .bar-seg.animate { transform: scaleX(1); }
        .bar-seg-paid { border-radius: 5px 0 0 5px; }
        .bar-seg-free {
            border-radius: 0 5px 5px 0; position: relative; overflow: hidden;
        }
        .bar-seg-free::after {
            content:''; position:absolute; inset:0;
            background: repeating-linear-gradient(
                135deg,
                rgba(255,255,255,0.45) 0px, rgba(255,255,255,0.45) 2.5px,
                transparent 2.5px, transparent 5px
            );
        }
        body.dark-mode .bar-seg-free::after {
            background: repeating-linear-gradient(
                135deg,
                rgba(255,255,255,0.3) 0px, rgba(255,255,255,0.3) 2.5px,
                transparent 2.5px, transparent 5px
            );
        }

        /* Free events summary grid */
        .free-summary {
            display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
            margin-top: 14px;
        }
        .free-chip {
            background: #f0fdf4; border: 1px solid #dcfce7; border-radius: 10px;
            padding: 10px 8px; text-align: center; position: relative; overflow: hidden;
        }
        body.dark-mode .free-chip { background: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.18); }
        .free-chip-region {
            font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
            text-transform: uppercase; margin-bottom: 6px;
        }
        .free-chip-ring {
            width: 38px; height: 38px; margin: 0 auto 6px; position: relative;
        }
        .free-chip-ring svg { width: 38px; height: 38px; transform: rotate(-90deg); }
        .free-chip-ring-bg { fill: none; stroke: #e5e7eb; stroke-width: 3; }
        body.dark-mode .free-chip-ring-bg { stroke: #334155; }
        .free-chip-ring-fill {
            fill: none; stroke: #22c55e; stroke-width: 3; stroke-linecap: round;
            transition: stroke-dashoffset 0.8s cubic-bezier(0.34, 1.26, 0.64, 1);
        }
        .free-chip-ring-label {
            position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
            font-family: 'Fredoka', sans-serif; font-size: 11px; font-weight: 600; color: #16a34a;
        }
        body.dark-mode .free-chip-ring-label { color: #4ade80; }
        .free-chip-count {
            font-family: 'Fredoka', sans-serif; font-size: 15px; font-weight: 600; color: #15803d; line-height: 1;
        }
        body.dark-mode .free-chip-count { color: #4ade80; }
        .free-chip-label { font-size: 9px; color: #86efac; margin-top: 2px; font-weight: 500; }
        body.dark-mode .free-chip-label { color: rgba(134, 239, 172, 0.6); }

        /* Trend chart (weekly) */
        .trend-chart {
            display: flex; align-items: flex-end; gap: 4px;
            height: 64px; margin-top: 4px;
        }
        .trend-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
        .trend-bar-wrap {
            flex: 1; width: 100%; display: flex; align-items: flex-end;
        }
        .trend-bar {
            width: 100%; border-radius: 3px 3px 0 0;
            background: #03A4F1;
            transition: height 0.5s cubic-bezier(0.34, 1.26, 0.64, 1);
            min-height: 2px;
        }
        .trend-week-label {
            font-size: 9px; color: #94a3b8; text-align: center; white-space: nowrap;
        }
        .trend-count {
            font-size: 9px; color: #64748b; font-weight: 600;
        }
        body.dark-mode .trend-count { color: #94a3b8; }

        /* Missing images donut-style */
        .missing-img-row {
            display: flex; align-items: center; gap: 10px; margin-top: 4px;
        }
        .missing-img-bar-wrap {
            flex: 1; height: 12px; background: #f1f5f9; border-radius: 6px; overflow: hidden;
        }
        body.dark-mode .missing-img-bar-wrap { background: #1e293b; }
        .missing-img-bar-fill {
            height: 100%; border-radius: 6px;
            background: linear-gradient(90deg, #22c55e, #4ade80);
            transition: width 0.7s cubic-bezier(0.34, 1.26, 0.64, 1);
        }
        .missing-img-label { font-size: 12px; color: #64748b; flex-shrink: 0; }
        body.dark-mode .missing-img-label { color: #94a3b8; }

        /* ── Team Productivity ── */
        .prod-bar-fill {
            height: 100%; border-radius: 4px;
            transition: width 0.6s cubic-bezier(0.34, 1.26, 0.64, 1);
        }
        .prod-admin-block { margin-bottom: 10px; }
        .prod-admin-header {
            display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
        }
        .prod-admin-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
        .prod-admin-name { font-size: 12px; font-weight: 600; color: #1e293b; flex: 1; }
        body.dark-mode .prod-admin-name { color: #e2e8f0; }
        .prod-admin-total { font-size: 11px; color: #64748b; }
        body.dark-mode .prod-admin-total { color: #94a3b8; }
        .prod-admin-share {
            font-size: 11px; font-weight: 700; color: #475569; width: 30px; text-align: right;
        }
        body.dark-mode .prod-admin-share { color: #cbd5e1; }
        .prod-actions-chart { display: flex; flex-direction: column; gap: 4px; padding-left: 14px; }
        .prod-action-row { display: flex; align-items: center; gap: 6px; }
        .prod-action-label { font-size: 10px; color: #94a3b8; width: 80px; flex-shrink: 0; text-align: right; }
        .prod-action-track { flex: 1; height: 6px; background: #f1f5f9; border-radius: 3px; overflow: hidden; }
        body.dark-mode .prod-action-track { background: #1e293b; }
        .prod-action-val { font-size: 10px; color: #94a3b8; width: 24px; text-align: right; flex-shrink: 0; }

        /* 7-day heatmap */
        .prod-daily-table { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
        .prod-daily-row { display: flex; align-items: center; gap: 4px; }
        .prod-daily-name { font-size: 10px; font-weight: 600; width: 44px; flex-shrink: 0; text-align: right; }
        .prod-daily-cells { display: flex; gap: 3px; flex: 1; }
        .prod-day-cell {
            flex: 1; height: 18px; border-radius: 3px;
            font-size: 9px; color: white; display: flex; align-items: center; justify-content: center;
            font-weight: 600;
        }
        .prod-day-hdr {
            flex: 1; font-size: 9px; color: #94a3b8; text-align: center; font-weight: 600;
        }
        .prod-day-today.prod-day-hdr { color: #03A4F1; }
        .prod-day-cell.prod-day-today { outline: 1.5px solid #03A4F1; outline-offset: 1px; }
        .prod-day-header-row .prod-daily-name { color: transparent; }

        /* Header icon buttons for Activity + Analytics */
        .header-icon-btn {
            width: 34px; height: 34px; border-radius: 9px;
            border: 1px solid #e2e8f0; background: white;
            cursor: pointer; display: flex; align-items: center; justify-content: center;
            font-size: 15px; color: #475569;
            transition: all 0.15s; flex-shrink: 0;
        }
        .header-icon-btn:hover { background: #f1f5f9; border-color: #cbd5e1; transform: translateY(-1px); }
        .header-icon-btn.active { background: #eff6ff; border-color: #93c5fd; color: #2563eb; }
        body.dark-mode .header-icon-btn {
            background: #1e293b; border-color: #334155; color: #94a3b8;
        }
        body.dark-mode .header-icon-btn:hover { background: #334155; border-color: #475569; }
        body.dark-mode .header-icon-btn.active { background: #1e3a5f; border-color: #3b82f6; color: #60a5fa; }

        /* Activity feed new-item pulse badge */
        .feed-new-dot {
            width: 6px; height: 6px; border-radius: 50%;
            background: #22c55e; flex-shrink: 0; margin-top: 7px;
            animation: feedPulse 2s infinite;
        }
        @keyframes feedPulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50%       { opacity: 0.5; transform: scale(0.8); }
        }

        /* Feed item — clickable jump */
        .feed-item.feed-jumpable { cursor: pointer; }
        .feed-item.feed-jumpable:hover { padding-right: 14px; }
        .feed-item.feed-jumpable:hover::after {
            content: '↗';
            font-size: 11px; color: #94a3b8;
            margin-left: auto; flex-shrink: 0; align-self: center;
        }

        /* Card highlight flash when jumped to */
        @keyframes feedJumpFlash {
            0%   { box-shadow: 0 0 0 3px rgba(245,158,11,0.85); }
            55%  { box-shadow: 0 0 0 7px rgba(245,158,11,0.25); }
            100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
        }
        .event-card.feed-jump-highlight {
            animation: feedJumpFlash 1.4s ease forwards;
        }

        /* Feed button — teammate activity badge */
        #activityFeedBtn { position: relative; }
        #activityFeedBtn.feed-btn-notify::after {
            content: '';
            position: absolute;
            top: 5px; right: 5px;
            width: 7px; height: 7px;
            border-radius: 50%;
            background: #22c55e;
            border: 1.5px solid white;
            animation: feedDotPulse 1.6s ease-in-out infinite;
        }
        body.dark-mode #activityFeedBtn.feed-btn-notify::after { border-color: #1e293b; }
        @keyframes feedDotPulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50%       { transform: scale(1.35); opacity: 0.75; }
        }

        /* Analytics loading state */
        .analytics-loading {
            padding: 40px 20px; text-align: center; color: #94a3b8; font-size: 14px;
        }


        /* Special Calendar Dates panel dark mode */
        body.dark-mode #specialDatesPanel {
            background: #1e293b !important;
            border-color: #334155 !important;
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28) !important;
        }
        body.dark-mode #specialDatesPanel h2 {
            color: #f8fafc !important;
        }
        body.dark-mode #specialDatesPanel p,
        body.dark-mode #specialDatesPanel label,
        body.dark-mode #specialDatesPanel span {
            color: #cbd5e1 !important;
        }
        body.dark-mode #specialDatesPanel strong {
            color: #e2e8f0 !important;
        }
        body.dark-mode #specialDatesPanel input,
        body.dark-mode #specialDatesPanel select {
            background: #0f172a !important;
            border-color: #475569 !important;
            color: #f8fafc !important;
            color-scheme: dark;
        }
        body.dark-mode #specialDatesPanel input:focus,
        body.dark-mode #specialDatesPanel select:focus {
            border-color: #03A4F1 !important;
            box-shadow: 0 0 0 3px rgba(3, 164, 241, 0.18) !important;
            outline: none;
        }
        body.dark-mode #specialDatesPanel input[type="checkbox"] {
            accent-color: #03A4F1;
        }
        body.dark-mode #specialDatesList > div {
            background: #0f172a !important;
            border-color: #334155 !important;
        }
        body.dark-mode #specialDatesList > div div {
            color: #e2e8f0 !important;
        }
        body.dark-mode #specialDatesList > div div[style*="font-size:12px"] {
            color: #94a3b8 !important;
        }
        body.dark-mode #specialDatesPanel .btn-secondary {
            background: #334155 !important;
            color: #e2e8f0 !important;
            border-color: #475569 !important;
        }
        body.dark-mode #specialDatesPanel .btn-secondary:hover {
            background: #475569 !important;
            border-color: #64748b !important;
        }

        /* ═══════════════════════════════════════════
           POLISH PASS (Oct 2026) — one loud thing per area
           ═══════════════════════════════════════════ */

        /* Keyboard focus was invisible everywhere */
        button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible,
        .stat-item:focus-visible {
            outline: 2px solid #03A4F1;
            outline-offset: 2px;
        }

        /* Filter rows: fixed-width sentence-case labels so every chip row starts on the same edge */
        .filter-group-label {
            text-transform: none;
            letter-spacing: 0;
            font-size: 12px;
            font-weight: 600;
        }
        @media (min-width: 1201px) {
            .advanced-filters-container .filter-group {
                flex-basis: 100%;
                flex-wrap: wrap;
            }
            .filter-group-label { min-width: 64px; }
        }

        /* Header: "+ Add Event" is the only filled button; Suggestions/Board drop to tinted */
        .btn-scraper {
            background: rgba(245, 158, 11, 0.12);
            color: #b45309;
        }
        .btn-scraper:hover {
            background: rgba(245, 158, 11, 0.22);
            box-shadow: none;
        }
        body.dark-mode .btn-scraper { color: #fbbf24; }

        /* Find Images (was an inline light-only style — glared in dark mode) */
        .export-btn.find-images-btn {
            background: #fef3c7;
            color: #92400e;
            border-color: #f59e0b;
        }
        .export-btn.find-images-btn:hover { background: #f59e0b; color: white; }
        body.dark-mode .export-btn.find-images-btn {
            background: rgba(245, 158, 11, 0.12);
            color: #fbbf24;
            border-color: #b45309;
        }
        body.dark-mode .export-btn.find-images-btn:hover { background: #f59e0b; color: #0f172a; }

        /* Dedup: drop the glow gradient, keep it recognisably purple */
        .export-btn.dedup-action-btn,
        body.dark-mode .export-btn.dedup-action-btn {
            background: #7c3aed !important;
            box-shadow: none;
        }
        .export-btn.dedup-action-btn:hover,
        body.dark-mode .export-btn.dedup-action-btn:hover {
            background: #6d28d9 !important;
            box-shadow: none;
            transform: none;
        }

        /* Dark mode: "Clear" next to search was a white pill */
        body.dark-mode .btn-secondary {
            background: #334155;
            color: #e2e8f0;
        }
        body.dark-mode .btn-secondary:hover { background: #475569; }

        /* Dark mode: grand totals are context, the month bar below is the focus */
        body.dark-mode .grand-stat-value { color: #94a3b8; }
        body.dark-mode .grand-stat-label { color: #64748b; }

        /* Dark mode cards: muddy category washes → faint tint of the real category color */
        body.dark-mode .event-content.cat-music,       body.dark-mode .event-actions.cat-music       { background: color-mix(in srgb, #FF717A 7%, #1e293b); }
        body.dark-mode .event-content.cat-festivals,   body.dark-mode .event-actions.cat-festivals   { background: color-mix(in srgb, #6BC1FF 7%, #1e293b); }
        body.dark-mode .event-content.cat-food,        body.dark-mode .event-actions.cat-food        { background: color-mix(in srgb, #7ec57e 7%, #1e293b); }
        body.dark-mode .event-content.cat-sports,      body.dark-mode .event-actions.cat-sports      { background: color-mix(in srgb, #FF8352 7%, #1e293b); }
        body.dark-mode .event-content.cat-comedy,      body.dark-mode .event-actions.cat-comedy      { background: color-mix(in srgb, #f8dc9c 7%, #1e293b); }
        body.dark-mode .event-content.cat-art,         body.dark-mode .event-actions.cat-art         { background: color-mix(in srgb, #d87cfc 7%, #1e293b); }
        body.dark-mode .event-content.cat-bars,        body.dark-mode .event-actions.cat-bars        { background: color-mix(in srgb, #FFBA0E 7%, #1e293b); }
        body.dark-mode .event-content.cat-nightclubs,  body.dark-mode .event-actions.cat-nightclubs  { background: color-mix(in srgb, #5963D1 9%, #1e293b); }

        /* Dark mode ticket link: #3b82f6 inline color is low-contrast on slate */
        body.dark-mode .event-detail a { color: #7cc8ff !important; }

        /* Hide: tinted like Edit/Delete instead of a solid orange block that outshouts them */
        .btn-hide {
            background: rgba(245, 158, 11, 0.12) !important;
            border: 1px solid #f59e0b;
            color: #b45309;
        }
        .btn-hide:hover { background: rgba(245, 158, 11, 0.24) !important; transform: none; }
        .btn-hide.is-hidden {
            background: rgba(16, 185, 129, 0.12) !important;
            border-color: #10b981;
            color: #047857;
        }
        .btn-hide.is-hidden:hover { background: rgba(16, 185, 129, 0.24) !important; }
        body.dark-mode .btn-hide { color: #fbbf24; }
        body.dark-mode .btn-hide.is-hidden { color: #34d399; }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }