/* ── Quick link buttons ── */
        .quick-link-btn { border-radius: 10px !important; background: rgba(0,220,255,.07) !important; border: 1px solid rgba(0,220,255,.12) !important; }
        .quick-link-btn:hover { background: rgba(0,220,255,.15) !important; border-color: rgba(0,220,255,.32) !important; box-shadow: 0 0 14px rgba(0,220,255,.14) !important; transform: translateY(-1px) !important; }

        /* ── Search box ── */
        .search-box { background: rgba(0,24,68,.42) !important; border: 1px solid rgba(0,200,255,.12) !important; border-radius: 10px !important; }
        .search-box:focus { border-color: rgba(0,220,255,.44) !important; background: rgba(0,40,110,.40) !important; box-shadow: 0 0 0 3px rgba(0,220,255,.09), 0 0 20px rgba(0,200,255,.07) !important; }

        /* ── Filter chips ── */
        .filter-chip { border-radius: 22px !important; border: 1px solid rgba(0,200,255,.14) !important; background: rgba(0,200,255,.05) !important; transition: all .2s ease !important; }
        .filter-chip:hover { background: rgba(0,200,255,.12) !important; border-color: rgba(0,200,255,.28) !important; box-shadow: 0 0 12px rgba(0,200,255,.10) !important; }
        .filter-chip.active { background: rgba(0,200,255,.17) !important; border-color: rgba(0,220,255,.50) !important; box-shadow: 0 0 16px rgba(0,200,255,.18) !important; }

        /* ── Payment method cards ── */
        .pay-method-card { background: rgba(0,24,72,.42) !important; border: 2px solid rgba(0,200,255,.13) !important; border-radius: 14px !important; transition: all .22s ease !important; }
        .pay-method-card:hover { border-color: rgba(0,200,255,.44) !important; background: rgba(0,70,170,.24) !important; box-shadow: 0 0 22px rgba(0,180,255,.15) !important; transform: translateY(-2px) !important; }
        .pay-method-card.selected { border-color: #00DDFF !important; background: rgba(0,150,220,.17) !important; box-shadow: 0 0 0 1px rgba(0,200,255,.24), 0 0 26px rgba(0,200,255,.16) !important; }

        /* ── Bulk bar ── */
        .bulk-bar { background: rgba(2,8,30,.98) !important; border: 1px solid rgba(0,220,255,.34) !important; border-radius: 16px !important; box-shadow: 0 16px 48px rgba(0,0,0,.65), 0 0 26px rgba(0,200,255,.15) !important; backdrop-filter: blur(30px) !important; }

        /* ── Multi-assignee dropdown ── */
        .multi-assignee-dropdown { background: rgba(2,8,30,.99) !important; border: 1px solid rgba(0,200,255,.19) !important; border-radius: 14px !important; box-shadow: 0 18px 48px rgba(0,0,0,.72), 0 0 26px rgba(0,150,255,.11) !important; }

        /* ── Photo groups ── */
        .photo-group { border: 1px solid rgba(0,200,255,.10) !important; border-radius: 10px !important; background: rgba(0,18,55,.30) !important; }
        .photo-group-header { background: rgba(0,200,255,.05) !important; }
        .photo-group-header:hover { background: rgba(0,200,255,.10) !important; }

        /* ── Toast ── */
        .toast { background: rgba(2,8,30,.97) !important; border: 1px solid rgba(0,200,255,.18) !important; border-radius: 14px !important; box-shadow: 0 14px 44px rgba(0,0,0,.55), 0 0 24px rgba(0,150,255,.09) !important; }

        /* ── Scrollbar refined ── */
        ::-webkit-scrollbar { width: 4px; height: 4px; }
        ::-webkit-scrollbar-track { background: rgba(0,0,0,.10); border-radius: 4px; }
        ::-webkit-scrollbar-thumb { background: rgba(0,200,255,.20); border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: rgba(0,200,255,.38); }

        /* dark-only theme */

        /* ╔════════════════════════════════════════════════════════════╗
           ║  v9.3+ — MOBILE ANIMATIONS (Safari-safe)                   ║
           ║  Rules: only transform + opacity (GPU-only, no filter/      ║
           ║  backdrop-filter in keyframes — Safari crashes on those)    ║
           ╚════════════════════════════════════════════════════════════╝ */

        /* ════════════════════════════════════════════════════════════
           KEYFRAMES — только transform + opacity (GPU, Safari OK)
           ════════════════════════════════════════════════════════════ */

        @keyframes overlayFadeIn  { from{opacity:0} to{opacity:1} }
        @keyframes overlayFadeOut { from{opacity:1} to{opacity:0} }

        /* Modal — slide from bottom, spring overshoot */
        @keyframes modalSlideUp {
            0%   { opacity:0; transform:translateY(80px) scale(0.95); }
            50%  { opacity:1; transform:translateY(-6px) scale(1.006); }
            75%  { transform:translateY(3px)  scale(0.999); }
            100% { opacity:1; transform:translateY(0)    scale(1); }
        }
        @keyframes modalSlideDown {
            0%   { opacity:1; transform:translateY(0)    scale(1); }
            100% { opacity:0; transform:translateY(60px) scale(0.95); }
        }

        /* Lightbox — scale + opacity only (no filter!) */
        @keyframes lightboxBgIn  { from{opacity:0} to{opacity:1} }
        @keyframes lightboxBgOut { from{opacity:1} to{opacity:0} }
        @keyframes lightboxImgIn {
            0%   { opacity:0; transform:scale(0.75) translateY(16px); }
            55%  { opacity:1; transform:scale(1.04) translateY(-3px); }
            80%  { transform:scale(0.988) translateY(1px); }
            100% { opacity:1; transform:scale(1)    translateY(0); }
        }
        @keyframes lightboxImgOut {
            from { opacity:1; transform:scale(1); }
            to   { opacity:0; transform:scale(0.76) translateY(10px); }
        }

        /* Page transition */
        @keyframes pageEnter {
            from { opacity:0; transform:translateY(16px); }
            to   { opacity:1; transform:translateY(0); }
        }

        /* Toast — bounce, no filter */
        @keyframes toastBounce {
            0%   { opacity:0; transform:translateY(24px) scale(0.88); }
            50%  { opacity:1; transform:translateY(-6px) scale(1.022); }
            75%  { transform:translateY(3px)  scale(0.998); }
            100% { opacity:1; transform:translateY(0)    scale(1); }
        }
        @keyframes toastOut {
            from { opacity:1; transform:translateY(0) scale(1); }
            to   { opacity:0; transform:translateY(12px) scale(0.90); }
        }

        /* Photo / card stagger — no filter */
        @keyframes photoSlideIn {
            from { opacity:0; transform:translateY(10px) scale(0.92); }
            to   { opacity:1; transform:translateY(0)    scale(1); }
        }
        @keyframes cardStagger {
            from { opacity:0; transform:translateY(18px) scale(0.95); }
            to   { opacity:1; transform:translateY(0)    scale(1); }
        }

        /* Chat bubble */
        @keyframes chatBubbleIn {
            from { opacity:0; transform:translateY(12px) scale(0.94); }
            to   { opacity:1; transform:translateY(0)    scale(1); }
        }

        /* Notification */
        @keyframes notifSlideIn {
            from { opacity:0; transform:translateX(20px); }
            to   { opacity:1; transform:translateX(0); }
        }
        @keyframes notifPanelIn {
            from { opacity:0; transform:translateY(-10px) scale(0.96); }
            to   { opacity:1; transform:translateY(0)     scale(1); }
        }

        /* Login card — no filter */
        @keyframes loginCardIn {
            0%   { opacity:0; transform:translateY(36px) scale(0.94); }
            55%  { opacity:1; transform:translateY(-5px) scale(1.005); }
            80%  { transform:translateY(2px) scale(0.999); }
            100% { opacity:1; transform:translateY(0)    scale(1); }
        }

        /* Sidebar mobile slide */
        @keyframes sidebarSlideIn {
            from { opacity:0; transform:translateX(-100%); }
            to   { opacity:1; transform:translateX(0); }
        }

        /* Accent pulse */
        @keyframes accentPulse {
            0%,100% { box-shadow: 0 0 0 0 rgba(0,200,255,0); }