:root,
[data-theme="dark"] {
    /* Cosmic nebula -- deep purples & blues, stellar cyan + rose accents */

    /* Primary */
    --primary-color: #56b8d6;
    --primary-hover: #449bb5;
    --primary-glow: rgba(86, 184, 214, 0.12);
    --primary-text-on: #0c0918;

    /* Accent (rose/pink) */
    --accent-color: #e8457e;
    --accent-hover: #d03368;
    --accent-glow: rgba(232, 69, 126, 0.15);

    /* Semantic colors */
    --secondary-color: #7c85a6;
    --secondary-hover: #6b7394;
    --danger-color: #f43f5e;
    --danger-hover: #dc2c4b;
    --success-color: #34d399;
    --success-hover: #22b882;
    --warning-color: #f5a623;
    --warning-hover: #db9118;

    /* Gradient */
    --purple-mid: #a78bfa;
    --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--purple-mid), var(--accent-color));
    --gradient-glow: linear-gradient(135deg, rgba(86,184,214,0.15), rgba(167,139,250,0.15), rgba(232,69,126,0.15));
    --gradient-accent: linear-gradient(135deg, var(--purple-mid), var(--accent-color));

    /* Surfaces */
    --bg-color: #080510;
    --bg-subtle: #0c0918;
    --surface-color: #110e1f;
    --surface-hover: #1a1530;
    --card-bg: #14112a;

    /* Text */
    --text-primary: #e8e4f0;
    --text-secondary: #9691b0;

    /* Borders */
    --border-color: #201b3a;
    --border-hover: #2e2754;

    /* Elevation */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.7);

    /* Radii */
    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* Spacing scale */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space-lg: 1rem;
    --space-xl: 1.5rem;
    --space-2xl: 2rem;

    /* Typography scale */
    --text-xs: 0.75rem;
    --text-sm: 0.85rem;
    --text-base: 0.875rem;
    --text-lg: 1rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.75rem;

    /* Scrollbar */
    --scrollbar-track: transparent;
    --scrollbar-thumb: rgba(255, 255, 255, 0.08);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.15);
}

[data-theme="light"] {
    --primary-color: #2a8fa3;
    --primary-hover: #1f7a8c;
    --primary-glow: rgba(42, 143, 163, 0.12);
    --primary-text-on: #ffffff;
    --accent-color: #d03368;
    --accent-hover: #b82858;
    --accent-glow: rgba(208, 51, 104, 0.12);
    --secondary-color: #64748b;
    --secondary-hover: #556578;
    --danger-color: #e11d48;
    --danger-hover: #c4173d;
    --success-color: #059669;
    --success-hover: #047857;
    --warning-color: #c88514;
    --warning-hover: #a86f10;
    --purple-mid: #7c3aed;
    --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--purple-mid), var(--accent-color));
    --gradient-glow: linear-gradient(135deg, rgba(42,143,163,0.15), rgba(124,58,237,0.15), rgba(208,51,104,0.15));
    --gradient-accent: linear-gradient(135deg, var(--purple-mid), var(--accent-color));
    --bg-color: #f5f3f7;
    --bg-subtle: #faf9fc;
    --surface-color: #ffffff;
    --surface-hover: #f1eff5;
    --card-bg: #ffffff;
    --text-primary: #1a1530;
    --text-secondary: #64607a;
    --border-color: #e2dff0;
    --border-hover: #ccc8dc;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
    --scrollbar-track: transparent;
    --scrollbar-thumb: rgba(0, 0, 0, 0.12);
    --scrollbar-thumb-hover: rgba(0, 0, 0, 0.22);
}

/* ── Theme Presets ──────────────────────────────────────────────────── */
/* Cosmic Nebula is the default (defined in :root above) */

/* Ocean */
[data-preset="ocean"][data-theme="dark"],
[data-preset="ocean"]:not([data-theme="light"]) {
    --primary-color: #38bdf8;
    --primary-hover: #0ea5e9;
    --primary-glow: rgba(56, 189, 248, 0.12);
    --primary-text-on: #0c1926;
    --accent-color: #818cf8;
    --accent-hover: #6366f1;
    --accent-glow: rgba(129, 140, 248, 0.15);
    --secondary-color: #7c8fa6;
    --secondary-hover: #6b7d94;
    --purple-mid: #818cf8;
    --gradient-primary: linear-gradient(135deg, #38bdf8, #818cf8, #a78bfa);
    --gradient-accent: linear-gradient(135deg, #818cf8, #a78bfa);
    --gradient-glow: linear-gradient(135deg, rgba(56,189,248,0.15), rgba(129,140,248,0.15), rgba(167,139,250,0.15));
    --bg-color: #06101a;
    --bg-subtle: #0a1628;
    --surface-color: #0d1b2a;
    --surface-hover: #162d42;
    --card-bg: #112240;
    --border-color: #1b3a5c;
    --border-hover: #274d70;
}
[data-preset="ocean"][data-theme="light"] {
    --primary-color: #0284c7;
    --primary-hover: #0369a1;
    --primary-glow: rgba(2, 132, 199, 0.12);
    --accent-color: #6366f1;
    --accent-hover: #4f46e5;
    --accent-glow: rgba(99, 102, 241, 0.12);
    --purple-mid: #6366f1;
    --gradient-primary: linear-gradient(135deg, #0284c7, #6366f1, #8b5cf6);
    --gradient-accent: linear-gradient(135deg, #6366f1, #8b5cf6);
    --gradient-glow: linear-gradient(135deg, rgba(2,132,199,0.15), rgba(99,102,241,0.15), rgba(139,92,246,0.15));
}

/* Forest */
[data-preset="forest"][data-theme="dark"],
[data-preset="forest"]:not([data-theme="light"]) {
    --primary-color: #4ade80;
    --primary-hover: #22c55e;
    --primary-glow: rgba(74, 222, 128, 0.12);
    --primary-text-on: #052e16;
    --accent-color: #f59e0b;
    --accent-hover: #d97706;
    --accent-glow: rgba(245, 158, 11, 0.15);
    --secondary-color: #86a68c;
    --secondary-hover: #74947a;
    --success-color: #34d399;
    --success-hover: #22b882;
    --warning-color: #f59e0b;
    --warning-hover: #d97706;
    --purple-mid: #a3e635;
    --gradient-primary: linear-gradient(135deg, #4ade80, #a3e635, #f59e0b);
    --gradient-accent: linear-gradient(135deg, #a3e635, #f59e0b);
    --gradient-glow: linear-gradient(135deg, rgba(74,222,128,0.15), rgba(163,230,53,0.15), rgba(245,158,11,0.15));
    --bg-color: #050f07;
    --bg-subtle: #091a0d;
    --surface-color: #0d1f12;
    --surface-hover: #1a3320;
    --card-bg: #122b18;
    --border-color: #1d3a23;
    --border-hover: #2a5432;
}
[data-preset="forest"][data-theme="light"] {
    --primary-color: #16a34a;
    --primary-hover: #15803d;
    --primary-glow: rgba(22, 163, 74, 0.12);
    --accent-color: #d97706;
    --accent-hover: #b45309;
    --accent-glow: rgba(217, 119, 6, 0.12);
    --purple-mid: #65a30d;
    --gradient-primary: linear-gradient(135deg, #16a34a, #65a30d, #d97706);
    --gradient-accent: linear-gradient(135deg, #65a30d, #d97706);
    --gradient-glow: linear-gradient(135deg, rgba(22,163,74,0.15), rgba(101,163,13,0.15), rgba(217,119,6,0.15));
}

/* Minimal */
[data-preset="minimal"][data-theme="dark"],
[data-preset="minimal"]:not([data-theme="light"]) {
    --primary-color: #a1a1aa;
    --primary-hover: #d4d4d8;
    --primary-glow: rgba(161, 161, 170, 0.1);
    --primary-text-on: #18181b;
    --accent-color: #f4f4f5;
    --accent-hover: #e4e4e7;
    --accent-glow: rgba(244, 244, 245, 0.1);
    --secondary-color: #71717a;
    --secondary-hover: #a1a1aa;
    --success-color: #4ade80;
    --success-hover: #22c55e;
    --danger-color: #f87171;
    --danger-hover: #ef4444;
    --warning-color: #fbbf24;
    --warning-hover: #f59e0b;
    --purple-mid: #d4d4d8;
    --gradient-primary: linear-gradient(135deg, #a1a1aa, #d4d4d8, #f4f4f5);
    --gradient-accent: linear-gradient(135deg, #a1a1aa, #d4d4d8);
    --gradient-glow: linear-gradient(135deg, rgba(161,161,170,0.1), rgba(212,212,216,0.1), rgba(244,244,245,0.1));
    --bg-color: #09090b;
    --bg-subtle: #18181b;
    --surface-color: #1c1c1f;
    --surface-hover: #27272a;
    --card-bg: #222225;
    --border-color: #2e2e32;
    --border-hover: #3f3f46;
}
[data-preset="minimal"][data-theme="light"] {
    --primary-color: #52525b;
    --primary-hover: #3f3f46;
    --primary-glow: rgba(82, 82, 91, 0.08);
    --primary-text-on: #ffffff;
    --accent-color: #27272a;
    --accent-hover: #18181b;
    --accent-glow: rgba(39, 39, 42, 0.08);
    --secondary-color: #71717a;
    --secondary-hover: #52525b;
    --purple-mid: #71717a;
    --gradient-primary: linear-gradient(135deg, #52525b, #71717a, #a1a1aa);
    --gradient-accent: linear-gradient(135deg, #52525b, #71717a);
    --gradient-glow: linear-gradient(135deg, rgba(82,82,91,0.1), rgba(113,113,122,0.1), rgba(161,161,170,0.1));
}

/* Sunset */
[data-preset="sunset"][data-theme="dark"],
[data-preset="sunset"]:not([data-theme="light"]) {
    --primary-color: #fb923c;
    --primary-hover: #f97316;
    --primary-glow: rgba(251, 146, 60, 0.12);
    --primary-text-on: #1c0a00;
    --accent-color: #f472b6;
    --accent-hover: #ec4899;
    --accent-glow: rgba(244, 114, 182, 0.15);
    --secondary-color: #a68c7c;
    --secondary-hover: #94796b;
    --purple-mid: #f472b6;
    --gradient-primary: linear-gradient(135deg, #fb923c, #f472b6, #c084fc);
    --gradient-accent: linear-gradient(135deg, #f472b6, #c084fc);
    --gradient-glow: linear-gradient(135deg, rgba(251,146,60,0.15), rgba(244,114,182,0.15), rgba(192,132,252,0.15));
    --bg-color: #120805;
    --bg-subtle: #1a0e08;
    --surface-color: #1f140d;
    --surface-hover: #2e1f15;
    --card-bg: #271a12;
    --border-color: #3a261a;
    --border-hover: #4d3525;
}
[data-preset="sunset"][data-theme="light"] {
    --primary-color: #ea580c;
    --primary-hover: #c2410c;
    --primary-glow: rgba(234, 88, 12, 0.12);
    --accent-color: #db2777;
    --accent-hover: #be185d;
    --accent-glow: rgba(219, 39, 119, 0.12);
    --purple-mid: #db2777;
    --gradient-primary: linear-gradient(135deg, #ea580c, #db2777, #9333ea);
    --gradient-accent: linear-gradient(135deg, #db2777, #9333ea);
    --gradient-glow: linear-gradient(135deg, rgba(234,88,12,0.15), rgba(219,39,119,0.15), rgba(147,51,234,0.15));
}

/* Ember */
[data-preset="ember"][data-theme="dark"],
[data-preset="ember"]:not([data-theme="light"]) {
    --primary-color: #ef4444;
    --primary-hover: #dc2626;
    --primary-glow: rgba(239, 68, 68, 0.12);
    --primary-text-on: #fff;
    --accent-color: #f97316;
    --accent-hover: #ea580c;
    --accent-glow: rgba(249, 115, 22, 0.15);
    --secondary-color: #a6877c;
    --secondary-hover: #94756b;
    --danger-color: #f43f5e;
    --danger-hover: #e11d48;
    --success-color: #f59e0b;
    --success-hover: #d97706;
    --warning-color: #fbbf24;
    --warning-hover: #f59e0b;
    --purple-mid: #f97316;
    --gradient-primary: linear-gradient(135deg, #ef4444, #f97316, #fbbf24);
    --gradient-accent: linear-gradient(135deg, #ef4444, #f97316);
    --gradient-glow: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(249,115,22,0.15), rgba(251,191,36,0.15));
    --bg-color: #0c0504;
    --bg-subtle: #140908;
    --surface-color: #1a0e0b;
    --surface-hover: #2a1812;
    --card-bg: #221410;
    --text-primary: #f0e4dc;
    --text-secondary: #b0948a;
    --border-color: #3a1e16;
    --border-hover: #4d2a1e;
}
[data-preset="ember"][data-theme="light"] {
    --primary-color: #dc2626;
    --primary-hover: #b91c1c;
    --primary-glow: rgba(220, 38, 38, 0.12);
    --primary-text-on: #fff;
    --accent-color: #ea580c;
    --accent-hover: #c2410c;
    --accent-glow: rgba(234, 88, 12, 0.12);
    --danger-color: #e11d48;
    --danger-hover: #be123c;
    --success-color: #d97706;
    --success-hover: #b45309;
    --warning-color: #eab308;
    --warning-hover: #ca8a04;
    --purple-mid: #ea580c;
    --gradient-primary: linear-gradient(135deg, #dc2626, #ea580c, #eab308);
    --gradient-accent: linear-gradient(135deg, #dc2626, #ea580c);
    --gradient-glow: linear-gradient(135deg, rgba(220,38,38,0.15), rgba(234,88,12,0.15), rgba(234,179,8,0.15));
    --bg-color: #fdf5f3;
    --bg-subtle: #fefaf8;
    --surface-color: #ffffff;
    --surface-hover: #fef2ee;
    --card-bg: #ffffff;
    --text-primary: #1c0a04;
    --text-secondary: #78503e;
    --border-color: #f0d8cc;
    --border-hover: #e0c0b0;
}

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--bg-color);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background var(--transition-base), color var(--transition-base);
}

/* Subtle nebula glow in dark mode (cosmic preset only) */
[data-preset="cosmic"][data-theme="dark"] body,
[data-preset="cosmic"]:not([data-theme="light"]) body,
:not([data-preset])[data-theme="dark"] body,
:not([data-preset]):not([data-theme="light"]) body {
    background:
        radial-gradient(ellipse 60% 40% at 10% 85%, rgba(124, 58, 237, 0.04) 0%, transparent 70%),
        radial-gradient(ellipse 50% 45% at 90% 15%, rgba(232, 69, 126, 0.04) 0%, transparent 70%),
        radial-gradient(ellipse 40% 35% at 50% 50%, rgba(86, 184, 214, 0.02) 0%, transparent 60%),
        var(--bg-color);
}

.app-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── Utility classes ─────────────────────────────────────────────────── */

/* Layout */
.d-flex { display: flex; }
.d-flex-col { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }

/* Gaps */
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* Spacing */
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* Visibility */
.hidden { display: none !important; }

/* Text */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-secondary { color: var(--text-secondary); }
.text-primary-color { color: var(--primary-color); }
.text-danger { color: var(--danger-color); }
.text-success { color: var(--success-color); }
.text-warning { color: var(--warning-color); }
.font-semibold { font-weight: 600; }

/* Navigation */
.navbar {
    background: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
    padding: 0.75rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background var(--transition-base), border-color var(--transition-base);
}

/* iOS PWA: extend navbar behind status bar with safe area padding.
   Workaround for iOS 26.1 WebKit bug #301994 where env() returns 0.
   -webkit-touch-callout scopes this to Safari/iOS only (not Android).
   max() guarantees a minimum inset even when env() is broken. */
@supports (-webkit-touch-callout: none) {
    @media (display-mode: standalone) {
        .navbar {
            padding-top: calc(0.75rem + max(env(safe-area-inset-top, 0px), 59px));
        }
    }
}

@media (max-width: 640px) {
    .navbar {
        padding: 0.75rem 1rem;
    }
}

@supports (-webkit-touch-callout: none) {
    @media (display-mode: standalone) and (max-width: 640px) {
        .navbar {
            padding-top: calc(0.75rem + max(env(safe-area-inset-top, 0px), 59px));
        }
    }
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-brand-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
}

.nav-brand h1 {
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.brand-bold {
    font-weight: 700;
}

.brand-light {
    font-weight: 300;
}

[data-theme="light"] .nav-brand h1 {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
}

@media (max-width: 640px) {
    .nav-brand h1 {
        font-size: 1.25rem;
    }
}

.nav-links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: all var(--transition-base);
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
}

.nav-link:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.nav-link.active {
    background: var(--primary-color);
    color: var(--primary-text-on);
    box-shadow: 0 0 12px var(--primary-glow);
}

/* Theme toggle button */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
    flex-shrink: 0;
}

.theme-toggle:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: var(--primary-glow);
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
    transition: transform var(--transition-base);
}

.theme-toggle:hover svg {
    transform: rotate(15deg);
}

.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* Nav actions group */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Hamburger button — hidden on desktop */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.nav-hamburger span {
    display: block;
    height: 2px;
    background: var(--text-secondary);
    border-radius: 1px;
    transition: all var(--transition-fast);
}

.nav-hamburger:hover {
    border-color: var(--primary-color);
}

.nav-hamburger:hover span {
    background: var(--primary-color);
}

/* Animated open state */
.navbar.nav-open .nav-hamburger span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.navbar.nav-open .nav-hamburger span:nth-child(2) {
    opacity: 0;
}

.navbar.nav-open .nav-hamburger span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 640px) {
    .navbar {
        flex-wrap: wrap;
    }

    .nav-hamburger {
        display: flex;
        order: 2;
        margin-left: auto;
    }

    .nav-brand {
        order: 1;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        order: 4;
        gap: 0.25rem;
        padding-top: 0.75rem;
    }

    .navbar.nav-open .nav-links {
        display: flex;
    }

    .nav-actions {
        order: 3;
        margin-left: 0.5rem;
    }
}

/* Import button in nav */
.nav-import-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--transition-base), background var(--transition-base);
    flex-shrink: 0;
}

.nav-import-btn:hover {
    color: var(--primary-color);
    background: var(--primary-glow);
}

/* Event bell button */
.event-bell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--transition-base), background var(--transition-base);
    flex-shrink: 0;
}

.event-bell:hover {
    color: var(--primary-color);
    background: var(--primary-glow);
}

.event-bell.has-unseen {
    border-color: transparent;
    color: var(--text-primary);
    position: relative;
    z-index: 0;
}

.event-bell.has-unseen::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: conic-gradient(from var(--spin-angle, 0deg), var(--purple-mid), var(--accent-color), var(--purple-mid));
    animation: event-spin 2.5s linear infinite;
    z-index: -1;
}

.event-bell.has-unseen::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--card-bg, #1a1a2e);
    z-index: -1;
}

.event-bell.has-unseen:hover {
    color: var(--primary-color);
}

@property --spin-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes event-spin {
    to { --spin-angle: 360deg; }
}

/* Event log panel */
.event-panel {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    width: 340px;
    max-height: 420px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    z-index: 1000;
    overflow: hidden;
}

.event-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-primary);
}

.event-panel-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.event-panel-close:hover {
    color: var(--text-primary);
}

.event-panel-body {
    overflow-y: auto;
    max-height: 370px;
    padding: 0.25rem 0;
}

.event-item {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle, var(--border-color));
    font-size: 0.78rem;
    line-height: 1.35;
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.event-item:last-child {
    border-bottom: none;
}

.event-item-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    border-radius: 50%;
    margin-top: 4px;
}

.event-item-dot.cat-job { background: var(--primary-color); }
.event-item-dot.cat-video { background: var(--purple-mid); }
.event-item-dot.cat-import { background: var(--success-color); }
.event-item-dot.cat-export { background: var(--warning-color); }
.event-item-dot.cat-system { background: var(--text-secondary); }

.event-item-content {
    flex: 1;
    min-width: 0;
}

.event-item-msg {
    color: var(--text-primary);
    word-break: break-word;
}

.event-item-time {
    color: var(--text-muted, var(--text-secondary));
    font-size: 0.7rem;
    margin-top: 2px;
}

.event-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* Main Content */
.main-content {
    flex: 1;
    padding: 2rem;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .main-content {
        padding: 1rem;
    }
}

.view {
    display: none;
}

.view.active {
    display: block;
}

.view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

@media (max-width: 640px) {
    .view-header {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}

.view-header h2 {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.detail-page-content {
    max-width: 100%;
}

/* Detail view: lock page scroll on desktop, flex chain constrains height */
body.detail-view-active {
    overflow: hidden;
}

body.detail-view-active .app-container {
    height: 100vh;
}

body.detail-view-active .main-content {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

body.detail-view-active .view.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Detail view header stays at top */
.detail-view-header {
    flex-shrink: 0;
    background: var(--bg-color);
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0;
}

.detail-view-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-top: var(--space-lg);
}

/* Job detail: sidebar (preview + meta + actions) + main (settings) */
.detail-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--space-xl);
}

.detail-sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    padding-bottom: var(--space-xl);
}

.detail-sidebar img {
    width: 100%;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    cursor: pointer;
    margin-bottom: var(--space-lg);
}

.detail-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    font-size: var(--text-sm);
}

.detail-meta div {
    line-height: 1.6;
}

.detail-meta-actions {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
    flex-wrap: wrap;
}

.detail-main {
    min-width: 0;
    padding-bottom: var(--space-xl);
    padding-right: var(--space-sm);
}

/* Detail page layout helpers */
.detail-info-grid {
    display: flex;
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.detail-info-col {
    flex: 1;
    min-width: 0;
}

.detail-sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding-top: var(--space-lg);
    margin-top: var(--space-lg);
    border-top: 1px solid var(--border-color);
}

.detail-sidebar-actions-row {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
    align-items: center;
}

.detail-sidebar-actions-row .btn {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.detail-sidebar-actions > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.form-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.form-row-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.form-section-row {
    display: flex;
    gap: var(--space-md);
    align-items: stretch;
}

.info-box {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
}

.modal-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
}

@media (max-width: 900px) {
    /* On mobile, revert to normal scrolling page */
    body.detail-view-active {
        overflow: visible;
    }
    body.detail-view-active .app-container {
        height: auto;
    }
    body.detail-view-active .main-content {
        overflow: visible;
        display: block;
    }
    body.detail-view-active .view.active {
        display: block;
    }
    .detail-view-body {
        overflow-y: visible;
        min-height: auto;
    }
    .detail-layout {
        grid-template-columns: 1fr;
    }
    .detail-sidebar {
        position: static;
    }
    .detail-sidebar img {
        max-width: 400px;
    }
    .detail-main {
        overflow-y: visible;
        max-height: none;
        padding-right: 0;
    }
}

@media (max-width: 768px) {
    .detail-info-grid {
        flex-direction: column;
        gap: var(--space-lg);
    }
    .detail-sidebar-actions-row {
        justify-content: center;
    }
    .form-section-row {
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .view-header h2 {
        font-size: 1.5rem;
    }
}

/* Buttons */
.btn {
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    display: inline-block;
}

.btn:disabled,
.btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    pointer-events: none;
}

.btn-primary {
    background: var(--primary-color);
    color: var(--primary-text-on);
}

.btn-primary:hover {
    background: var(--primary-hover);
    box-shadow: 0 4px 16px var(--primary-glow);
    transform: translateY(-1px);
}

.btn-secondary {
    background: var(--secondary-color);
    color: white;
}

.btn-secondary:hover {
    background: var(--secondary-hover);
    transform: translateY(-1px);
}

.btn-danger {
    background: var(--danger-color);
    color: white;
}

.btn-danger:hover {
    background: var(--danger-hover);
    transform: translateY(-1px);
}

.btn-warning {
    background: var(--warning-color);
    color: #1a1a2e;
}

.btn-warning:hover {
    background: var(--warning-hover);
}

.btn-success {
    background: var(--success-color);
    color: #1a1a2e;
}

.btn-success:hover {
    background: var(--success-hover);
}

.btn-accent,
.btn-purple {
    background: var(--accent-color);
    color: var(--primary-text-on);
}

.btn-accent:hover,
.btn-purple:hover {
    background: var(--accent-hover);
    box-shadow: 0 4px 16px var(--accent-glow);
    transform: translateY(-1px);
}

.btn-accent:disabled,
.btn-purple:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

.btn-icon {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    transition: all var(--transition-fast);
}

.btn-icon:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.stat-inline {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Jobs Grid */
.jobs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .jobs-grid {
        grid-template-columns: 1fr;
    }
}

.job-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: all var(--transition-base);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

.job-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(77, 208, 225, 0.07), 0 0 0 1px rgba(124, 58, 237, 0.05);
}

.job-card-header {
    margin-bottom: 0.5rem;
}

.job-card-status-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.job-card-tags {
    margin-top: auto;
    padding-top: 0.75rem;
}

.job-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.job-status {
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.job-status.active {
    background: rgba(52, 211, 153, 0.15);
    color: var(--success-color);
}

.job-status.sleeping {
    background: rgba(124, 58, 237, 0.15);
    color: var(--purple-mid);
}

.job-status.warning {
    background: rgba(232, 69, 126, 0.15);
    color: #e8457e;
}

.job-status.completed {
    background: rgba(150, 145, 176, 0.15);
    color: #9691b0;
}

.job-status.disabled {
    background: rgba(124, 133, 166, 0.15);
    color: #7c85a6;
}

.job-status.archived {
    background: rgba(124, 133, 166, 0.1);
    color: #7c85a6;
}

/* Light mode badge overrides — darker text for contrast */
[data-theme="light"] .job-status.active { color: #059669; }
[data-theme="light"] .job-status.sleeping { color: #6d28d9; }
[data-theme="light"] .job-status.warning { color: #b82858; }
[data-theme="light"] .job-status.completed { color: #64607a; }
[data-theme="light"] .job-status.disabled { color: #475569; }
[data-theme="light"] .job-status.archived { color: #475569; }

.job-info {
    margin: 1rem 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.job-info div {
    margin: 0.5rem 0;
}

.job-stats {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.stat {
    flex: 1;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.job-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .job-actions {
        flex-direction: column;
    }
    
    .job-actions .btn {
        width: 100%;
    }
}

/* Videos Grid */
.videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

#video-load-more {
    display: block;
    margin: 1.5rem auto 0;
}

@media (max-width: 768px) {
    .videos-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

.video-gallery-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
    position: relative;
}

.video-gallery-card.selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.video-gallery-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 12px rgba(167, 139, 250, 0.25);
    transform: translateY(-2px);
}

.video-gallery-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0c0918;
    overflow: hidden;
}

.video-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-gallery-thumb .thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    opacity: 0.4;
}

.video-gallery-thumb .thumb-placeholder svg {
    width: 40px;
    height: 40px;
}

.video-gallery-duration {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.02em;
}

.video-gallery-status {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.video-gallery-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.2s;
}

.video-gallery-card:hover .video-gallery-play {
    opacity: 1;
}

.video-gallery-play svg {
    width: 40px;
    height: 40px;
    color: white;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.video-gallery-info {
    padding: 0.6rem 0.75rem;
}

.video-gallery-name {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.2rem;
}

.video-gallery-job {
    font-size: 0.7rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.auto-build-badge {
    padding: 0.1rem 0.4rem;
    border-radius: 0.3rem;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: rgba(77, 208, 225, 0.15);
    color: var(--primary-color);
    vertical-align: middle;
}

.auto-build-badge.imported {
    background: var(--primary-glow);
    color: var(--primary-color);
}

[data-theme="light"] .auto-build-badge {
    color: #0e7490;
}

.auto-build-presets {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

.auto-build-presets .btn {
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
}

.video-gallery-progress {
    padding: 0 0.75rem 0.6rem;
}

.video-gallery-progress .progress-bar {
    height: 4px;
}

.progress-bar {
    width: 100%;
    height: 0.375rem;
    background: var(--border-color);
    border-radius: 1rem;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c3aed, #e8457e);
    transition: width var(--transition-base);
    border-radius: 1rem;
}

.video-gallery-progress .progress-text {
    font-size: 0.65rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* Video detail layout */

.video-detail-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.video-detail-player {
    width: 100%;
    background: #000;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.video-detail-player video {
    width: 100%;
    max-height: 60vh;
    display: block;
}

#video-detail-view .detail-view-header {
    flex-wrap: nowrap;
}

.video-detail-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
}

.video-detail-title-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
}

.video-detail-title-row #video-detail-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-detail-meta {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr;
    gap: 0.35rem 0.75rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    align-items: baseline;
}

.video-detail-meta dt {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.video-detail-meta dd {
    margin: 0;
}

.video-detail-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    #video-detail-view .detail-view-header {
        flex-wrap: wrap;
    }

    .video-detail-header-left {
        flex-direction: column;
        align-items: flex-start;
    }

    .video-detail-actions {
        flex-wrap: wrap;
        width: 100%;
    }

    .video-detail-meta {
        grid-template-columns: auto 1fr;
    }
}

.video-detail-meta .job-link {
    color: var(--primary-color);
    text-decoration: none;
    cursor: pointer;
}

.video-detail-meta .job-link:hover {
    text-decoration: underline;
}

/* Gallery filter bar */
.gallery-filters {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

.gallery-search {
    flex: 1;
    min-width: 180px;
    max-width: 320px;
    padding: 0.5rem 0.75rem;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-family: inherit;
    transition: border-color 0.2s;
}

.gallery-search:focus {
    outline: none;
    border-color: var(--primary-color);
}

.gallery-search::placeholder {
    color: var(--text-secondary);
    opacity: 0.6;
}

.gallery-filter-select {
    padding: 0.5rem 0.75rem;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
}

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

.gallery-filter-input {
    padding: 0.5rem 0.75rem;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-family: inherit;
    color-scheme: dark;
}

[data-theme="light"] .gallery-filter-input {
    color-scheme: light;
}

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

.gallery-date-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.gallery-date-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    margin: 0;
}

.gallery-count {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-left: auto;
}

/* Forms */
.form-group {
    margin-bottom: 1.5rem;
}

.form-section {
    margin-bottom: 1.75rem;
}
.form-section-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    padding-bottom: 0.4rem;
    margin-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-color);
}
.form-section > *:last-child {
    margin-bottom: 0;
}
.toggle-fields {
    transition: opacity 0.2s ease;
}
.toggle-fields.disabled {
    opacity: 0.35;
    pointer-events: none;
    user-select: none;
}

@media (max-width: 640px) {
    .toggle-fields {
        flex-wrap: wrap !important;
        width: 100%;
    }

    .toggle-fields input[type="datetime-local"] {
        flex: 1;
        min-width: 0;
    }
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
}

.form-group small {
    display: block;
    margin-top: 0.25rem;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.builder-layout {
    display: flex;
    gap: 1.5rem;
}

.builder-fields {
    flex: 3;
    min-width: 0;
}

.builder-preview {
    flex: 2;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    padding-top: 0.25rem;
}

.builder-preview-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    background: var(--surface-color);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--text-secondary);
}

.builder-preview-placeholder span {
    font-size: 0.75rem;
}

.builder-preview-image {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.builder-preview-image img {
    width: 100%;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.builder-preview-image span {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: center;
}

@media (max-width: 768px) {
    .builder-layout {
        flex-direction: column;
    }
    .builder-preview {
        width: 100%;
    }
}

/* Text overlay position grid */
.overlay-position-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    width: 130px;
}

/* Overlay two-column layout → stacked: preview on top, compact controls below */
.overlay-layout {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.overlay-controls {
    min-width: 0;
}

.overlay-controls .form-group {
    margin-bottom: 0.4rem;
}

.overlay-controls label {
    font-size: 0.8rem;
    margin-bottom: 0.15rem;
}

.overlay-controls .form-control {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
}

.overlay-controls small {
    font-size: 0.7rem;
}

.overlay-preview-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.overlay-preview-panel img {
    width: 100%;
}

/* Fullscreen overlay preview lightbox */
.overlay-lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.overlay-lightbox img {
    max-width: 95vw;
    max-height: 95vh;
    border-radius: var(--radius-lg);
}

.overlay-position-grid .pos-btn {
    width: 100%;
    aspect-ratio: 1.3;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    padding: 0;
}

.overlay-position-grid .pos-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--accent-color);
}

.overlay-position-grid .pos-btn.active {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}

.form-control {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-color);
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    color-scheme: dark;
}

[data-theme="light"] .form-control {
    color-scheme: light;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.form-row {
    display: flex;
    gap: 1rem;
}

@media (max-width: 640px) {
    .form-row {
        flex-direction: column;
    }
}

.flex-1 {
    flex: 1;
}

.settings-form {
    max-width: 600px;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow-y: auto;
    opacity: 0;
    transition: opacity var(--transition-base);
}

#confirm-modal {
    z-index: 1100;
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 1;
}

@media (max-width: 640px) {
    .modal.active {
        padding: 1rem;
        align-items: flex-start;
    }
}

.modal-content {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    transform: translateY(12px) scale(0.98);
    transition: transform var(--transition-base);
}

.modal.active .modal-content {
    transform: translateY(0) scale(1);
}

@media (max-width: 640px) {
    .modal-content {
        max-height: 95vh;
        border-radius: var(--radius-sm);
    }
}

.modal-content.large {
    max-width: 950px;
}

.modal-content.xlarge {
    max-width: 1200px;
}

@media (max-width: 640px) {
    .modal-content.large,
    .modal-content.xlarge {
        max-width: 100%;
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
}

.close {
    color: var(--text-secondary);
    font-size: 2rem;
    font-weight: 300;
    cursor: pointer;
    line-height: 1;
}

.close:hover {
    color: var(--text-primary);
}

.modal form {
    padding: 1.5rem;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

/* Notification Toast */
.notification-toast {
    position: fixed;
    top: 80px;
    right: 20px;
    background: var(--surface-color);
    color: var(--text-primary);
    padding: 1rem 2.5rem 1rem 1.5rem;
    border-radius: var(--radius-md);
    border-left: 4px solid var(--primary-color);
    box-shadow: var(--shadow-lg);
    z-index: 2000;
    opacity: 0;
    transform: translateX(400px);
    transition: all var(--transition-base);
    max-width: 400px;
    word-wrap: break-word;
    pointer-events: none;
}

.toast-close {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 0.3rem;
    line-height: 1;
    opacity: 0.6;
    transition: opacity var(--transition-base);
}

.toast-close:hover {
    opacity: 1;
}

.notification-toast.show {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.notification-toast.success {
    border-left-color: var(--success-color);
}

.notification-toast.error {
    border-left-color: var(--danger-color);
}

.notification-toast.warning {
    border-left-color: var(--warning-color);
}

/* Duration Estimate */
.duration-estimate {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.duration-estimate:empty::before {
    content: '—';
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.duration-estimate-inline {
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    min-height: 2.25rem;
}

/* Info Box */
.info-box {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-sm);
    padding: 1rem;
    color: var(--text-secondary);
}

.duration-estimate h4 {
    margin-bottom: 0.35rem;
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-align: center;
}

.duration-grid {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.duration-item {
    background: var(--surface-color);
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    text-align: center;
    min-width: 80px;
    flex: 1;
}

.duration-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.15rem;
}

.duration-fps {
    font-size: 0.65rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.duration-time {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary-color);
}

@media (max-width: 640px) {
    .duration-grid {
        flex-wrap: wrap;
    }
    
    .duration-item {
        min-width: 45%;
    }
}

/* Test Result */
.test-result {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: var(--radius-sm);
}

.test-result.success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.test-result.error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.test-result img {
    max-width: 100%;
    border-radius: var(--radius-sm);
    margin-top: 0.5rem;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
}

.empty-state h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Custom Time Picker */
.time-picker-container {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.time-picker-container select {
    padding: 0.5rem;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    color: var(--text-primary);
    font-size: 1rem;
    cursor: pointer;
    min-width: 70px;
}

.time-picker-container select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.time-picker-container .separator {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--text-secondary);
}

/* Time picker container for time-only inputs (time windows) */
.time-picker-container {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.time-picker-container input[type="time"] {
    flex: 0 0 auto;
    min-width: 120px;
    max-width: 140px;
}

/* Utility */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }

/* Storage View */
.storage-content {
    max-width: 1200px;
    margin: 0 auto;
}

.storage-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.storage-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.storage-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.storage-card-icon svg {
    width: 32px;
    height: 32px;
    color: var(--accent-color);
}

.storage-card-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.storage-card-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.storage-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.storage-section {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.storage-section h3 {
    font-size: 1.15rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
    font-weight: 600;
}

.storage-chart-container {
    position: relative;
    width: 100%;
    max-height: 300px;
    display: flex;
    justify-content: center;
}

.storage-chart-container canvas {
    max-height: 300px;
}

.storage-chart-wide {
    max-height: 400px;
}

.storage-chart-wide canvas {
    max-height: 400px;
    width: 100% !important;
}

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

@media (max-width: 500px) {
    .storage-summary {
        grid-template-columns: 1fr;
    }
}

/* Settings View */
.settings-content {
    max-width: 1200px;
    margin: 0 auto;
}

.settings-section {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-sm);
}

.settings-section h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.settings-section h4 {
    font-size: 1.25rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.settings-description {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

/* Theme preset picker */
.theme-preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-lg);
}

.theme-preset-card {
    cursor: pointer;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    transition: all var(--transition-fast);
    text-align: center;
}

.theme-preset-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.theme-preset-card.active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color), var(--shadow-md);
}

.theme-preset-swatches {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-bottom: var(--space-sm);
}

.theme-preset-swatches span {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
}

.theme-preset-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.api-key-container {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.api-key-input {
    flex: 1;
    min-width: 300px;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
}

.auth-methods {
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
}

.auth-methods li {
    padding: 0.75rem;
    background: var(--bg-color);
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
    font-family: 'Courier New', monospace;
}

.auth-methods code {
    color: var(--primary-color);
}

.api-endpoint-group {
    margin-top: 2rem;
}

.api-endpoint {
    background: var(--bg-color);
    border-radius: var(--radius-sm);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-left: 3px solid var(--primary-color);
}

.api-method-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.method-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.method-get {
    background: var(--success-color);
    color: #1a1a2e;
}

.method-post {
    background: var(--primary-color);
    color: var(--primary-text-on);
}

.method-patch {
    background: var(--warning-color);
    color: #1a1a2e;
}

.method-delete {
    background: var(--danger-color);
    color: white;
}

.api-method-header code {
    font-size: 1rem;
    color: var(--text-primary);
    background: var(--surface-color);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

.api-endpoint > p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.api-example {
    margin-top: 1rem;
}

.api-example strong {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.api-example pre {
    background: var(--surface-color);
    padding: 1rem;
    border-radius: 0.375rem;
    overflow-x: auto;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

/* Settings link icon styling */
/* API documentation link styling */
.api-docs-link {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.9em;
    margin-left: 0.5rem;
    white-space: nowrap;
}

.api-docs-link:hover {
    text-decoration: underline;
}

/* Webhook Settings */
.webhook-settings {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.webhook-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.webhook-template-row {
    flex-direction: column;
    align-items: stretch;
}

.webhook-label {
    min-width: 140px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

.webhook-input {
    flex: 1;
    max-width: 500px;
}

.webhook-input-sm {
    width: 80px;
}

.webhook-textarea {
    width: 100%;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    resize: vertical;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
}

.webhook-variables {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
}

.webhook-variables code {
    background: var(--bg-secondary);
    color: var(--accent-color);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    border: 1px solid var(--border-color);
}

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

.webhook-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

/* Nav Warning Badge */
.nav-link {
    position: relative;
}

.nav-warning-badge {
    position: absolute;
    top: -2px;
    right: -8px;
    width: 8px;
    height: 8px;
    background: #f59e0b;
    border-radius: 50%;
    border: 2px solid var(--bg-primary);
}

/* ===== Captures View ===== */
/* Captures selection controls */
.selection-controls {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
    background: var(--primary-color);
    color: var(--primary-text-on);
    border-radius: var(--radius-sm);
}

.ribbon-left {
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
}

.ribbon-center {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0 auto;
}

.ribbon-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    opacity: 0.85;
    transition: opacity var(--transition-base), background var(--transition-base);
}

.ribbon-icon-btn svg {
    width: 22px;
    height: 22px;
}

.ribbon-icon-btn:hover:not(:disabled) {
    opacity: 1;
    background: rgba(255,255,255,0.15);
}

.ribbon-icon-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.ribbon-icon-btn.ribbon-icon-danger:hover:not(:disabled) {
    background: rgba(239,68,68,0.25);
}

/* Favorite heart: gradient pink = will favorite, dark = will unfavorite */
.ribbon-icon-btn .fav-heart-icon {
    fill: url(#fav-gradient);
    stroke: none;
}

.ribbon-icon-btn.fav-active .fav-heart-icon {
    fill: rgba(0,0,0,0.5);
}

.ribbon-clear {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0.8;
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: opacity var(--transition-base), background var(--transition-base);
}

.ribbon-clear:hover {
    opacity: 1;
    background: rgba(255,255,255,0.15);
}

.captures-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

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

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

@media (max-width: 640px) {
    .captures-grid {
        grid-template-columns: 1fr;
    }
}

.capture-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
}

.capture-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(77, 208, 225, 0.07);
}

.capture-card.selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.capture-thumbnail {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    background: var(--bg-color);
}

.capture-checkbox {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    width: 24px;
    height: 24px;
    cursor: pointer;
    z-index: 10;
}

/* Cosmic gradient heart — shared by captures, videos, and filter buttons */
.fav-filter-btn .fav-heart-icon {
    width: 14px; height: 14px;
    fill: var(--purple-mid);
}
.fav-filter-btn.active .fav-heart-icon {
    fill: #fff;
}
.btn-fav-bulk .fav-heart-icon,
.btn-unfav-bulk .fav-heart-icon {
    width: 14px; height: 14px;
    fill: currentColor;
}

/* Heart button on gallery cards (captures + videos) */
.card-fav-btn {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    transition: opacity var(--transition-fast);
    padding: 0;
    line-height: 1;
}

.fav-heart-icon {
    width: 24px;
    height: 24px;
    fill: rgba(255, 255, 255, 0.35);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
    transition: fill var(--transition-fast);
}

.capture-card:hover .card-fav-btn,
.video-gallery-card:hover .card-fav-btn,
.card-fav-btn.favorited {
    opacity: 1;
}

.card-fav-btn:hover .fav-heart-icon {
    fill: #e8457e;
}

.card-fav-btn.favorited .fav-heart-icon {
    fill: url(#fav-gradient);
}

[data-theme="light"] .fav-heart-icon {
    fill: rgba(0, 0, 0, 0.2);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

[data-theme="light"] .card-fav-btn:hover .fav-heart-icon {
    fill: #d03368;
}

/* Favorites filter toggle in toolbar */
.fav-filter-btn {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    font-size: 1rem;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fav-filter-btn:hover {
    border-color: var(--accent-color);
}

.fav-filter-btn.active {
    background: var(--gradient-accent);
    border-color: transparent;
}

[data-theme="light"] .fav-filter-btn.active {
    background: var(--gradient-accent);
}

.gallery-toggle-row {
    margin-top: -0.5rem;
    gap: 0.5rem;
}

.source-filter-btn {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    font-size: 1rem;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}
.source-filter-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.source-filter-btn.active {
    background: var(--primary-color);
    border-color: transparent;
    color: var(--primary-text-on);
}

.filter-reset-btn {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    font-size: 1rem;
    padding: 0.35rem 0.55rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    line-height: 1;
    color: var(--text-secondary);
    opacity: 0.5;
}
.filter-reset-btn:hover {
    opacity: 1;
    border-color: var(--text-secondary);
}
.filter-reset-btn.active {
    opacity: 1;
    color: var(--accent-color);
    border-color: var(--accent-color);
}

/* ===== Homepage ===== */
.homepage {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1rem 0;
}

.homepage-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.homepage-stat-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.homepage-stat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-md);
    padding: 1.5px;
    background: var(--gradient-primary);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.homepage-stat-card:hover::before {
    opacity: 1;
}

.homepage-stat-card:hover {
    border-color: transparent;
    transform: translateY(-2px);
}

.homepage-stat-pulse {
    animation: statPulse 1.5s ease-out;
}

@keyframes statPulse {
    0% { box-shadow: 0 0 0 0 rgba(86, 184, 214, 0.4); }
    30% { box-shadow: 0 0 20px 4px rgba(86, 184, 214, 0.3); border-color: var(--primary-color); }
    100% { box-shadow: 0 0 0 0 rgba(86, 184, 214, 0); }
}

.homepage-stat-value {
    font-size: 2rem;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.homepage-stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.homepage-stat-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.homepage-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.homepage-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.homepage-section-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.homepage-spotlight {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.homepage-spotlight-card {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    height: 220px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    transition: all var(--transition-fast);
}

.homepage-spotlight-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px var(--primary-glow);
}

.homepage-spotlight-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.homepage-spotlight-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    z-index: 1;
    backdrop-filter: blur(4px);
}

.homepage-spotlight-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--text-muted);
    cursor: default;
}

.homepage-spotlight-placeholder:hover {
    transform: none;
    box-shadow: none;
}

.homepage-spotlight-placeholder p {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.homepage-spotlight-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    color: var(--text-muted);
    text-align: center;
}

.homepage-spotlight-empty p {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.homepage-spotlight-empty span {
    font-size: 0.8rem;
    max-width: 300px;
}

.homepage-spotlight-empty .btn {
    margin-top: 0.5rem;
}

.homepage-view-all {
    font-size: 0.8rem;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-fast);
}

.homepage-view-all:hover {
    color: var(--primary-hover);
}

.homepage-grid {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 0.25rem;
    scrollbar-width: thin;
}

.homepage-grid::-webkit-scrollbar {
    height: 4px;
}

.homepage-grid::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}

.homepage-capture-card {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    width: 260px;
    height: 162px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    transition: all var(--transition-fast);
    scroll-snap-align: start;
    flex-shrink: 0;
}

.homepage-capture-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px var(--primary-glow);
}

.homepage-capture-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.homepage-card-new {
    animation: homepageSlideIn 0.8s ease-out;
}

@keyframes homepageSlideIn {
    from {
        opacity: 0;
        transform: translateX(-40px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.homepage-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5rem 0.625rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
}

.homepage-card-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.homepage-card-sub {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.7);
}

@media (max-width: 768px) {
    .homepage-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .homepage-spotlight {
        grid-template-columns: 1fr;
    }
    .homepage-spotlight-card {
        height: 180px;
    }
    .homepage-capture-card {
        width: 220px;
        height: 138px;
    }
}

.homepage-empty {
    flex: 1;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    color: var(--text-muted);
    text-align: center;
}

.homepage-empty p {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.homepage-empty span {
    font-size: 0.8rem;
    max-width: 300px;
}

.homepage-empty .btn {
    margin-top: 0.5rem;
}

/* Bulk favorite buttons in selection bar */
.btn-fav-bulk {
    background: var(--gradient-accent);
    color: #fff;
    border: none;
    font-weight: 500;
}

.btn-fav-bulk:hover {
    filter: brightness(1.1);
}

.btn-unfav-bulk {
    background: var(--surface-color);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    font-weight: 500;
}

.btn-unfav-bulk:hover {
    border-color: var(--text-secondary);
}

.capture-info {
    padding: 0.75rem;
}

.capture-job-name {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.capture-time {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.pagination button {
    padding: 0.5rem 1rem;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.pagination button:hover:not(:disabled) {
    background: var(--surface-hover);
    border-color: var(--primary-color);
}

.pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination button.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-text-on);
}

.pagination-info {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.pagination-ellipsis {
    color: var(--text-secondary);
    padding: 0 0.5rem;
}

.capture-details {
    background: var(--surface-color);
    border-radius: var(--radius-sm);
    padding: 1rem;
}

.capture-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: all var(--transition-fast);
    z-index: 2;
    backdrop-filter: blur(4px);
}

.capture-nav-btn:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.75);
    transform: translateY(-50%) scale(1.1);
}

.capture-nav-btn:disabled {
    opacity: 0.25;
    cursor: default;
}

.capture-nav-prev {
    left: 0.5rem;
}

.capture-nav-next {
    right: 0.5rem;
}

.capture-nav-counter {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm);
    backdrop-filter: blur(4px);
}

.detail-row {
    display: flex;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-row strong {
    min-width: 100px;
    color: var(--text-secondary);
}

.detail-row span {
    flex: 1;
}

/* ===== Card entrance animation ===== */
@keyframes cardEnter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.job-card, .video-gallery-card, .capture-card {
    animation: cardEnter var(--transition-slow) ease both;
}

/* Stagger cards — JS sets --i on each card */
.job-card, .video-gallery-card, .capture-card {
    animation-delay: calc(var(--i, 0) * 50ms);
}

/* ===== Loading skeleton pulse ===== */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, var(--surface-color) 25%, var(--surface-hover) 50%, var(--surface-color) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

.skeleton-card {
    height: 180px;
    border-radius: var(--radius-lg);
}

.skeleton-text {
    height: 1rem;
    width: 60%;
    margin-bottom: 0.5rem;
}

/* ===== View transitions ===== */
.view {
    animation: fadeIn var(--transition-base) ease;
}

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

/* ===== Source Row ===== */
.source-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .source-row > input.form-control,
    .source-row > select.form-control {
        flex: 1 1 100%;
    }
}

.compare-btn {
    background: var(--secondary-color);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    padding: 0.5rem 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.compare-btn:hover {
    background: var(--secondary-hover);
}

.compare-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.source-row > input.form-control,
.source-row > select.form-control,
.source-row > .compare-btn,
.source-row .warn-after-group input {
    height: 38px;
    box-sizing: border-box;
}

/* ===== Source Type Icon Toggle ===== */
.source-icon-toggle {
    display: flex;
    gap: 2px;
}
.source-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.2s, border-color 0.2s, color 0.2s, background 0.2s;
    padding: 0;
}
.source-icon:hover {
    opacity: 0.75;
}
.source-icon.active {
    opacity: 1;
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(99, 102, 241, 0.1);
}

/* ===== Warn After Compact Group ===== */
.warn-after-group {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}
.warn-after-group label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin: 0;
}
.warn-after-group input {
    width: 52px;
    padding: 0.625rem 0.3rem;
    text-align: center;
    font-size: 0.8rem;
}

/* ===== Spinner ===== */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== Smooth scrollbar ===== */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* Prevent scrollbar from clipping rounded corners inside modals/cards */
.modal-content::-webkit-scrollbar-track {
    margin: var(--radius-lg) 0;
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* ===== Icon button utility ===== */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.icon-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: var(--primary-glow);
}

/* ===== Empty state ===== */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
}

.empty-state svg,
.empty-state .empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.4;
}

/* ===== Tooltip ===== */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--surface-hover);
    color: var(--text-primary);
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all var(--transition-fast);
}

[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ===== Capture Comparison ===== */
.compare-toolbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.compare-date-inline {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.compare-date-inline label {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.compare-date-inline .form-control-sm {
    padding: 0.3rem 0.4rem;
    font-size: 0.8rem;
    width: 13rem;
}

/* Fix datetime-local calendar/clock icons invisible in dark mode */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
    cursor: pointer;
}

[data-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: none;
}

.compare-mode-btn {
    background: var(--surface-hover);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.compare-mode-btn.active {
    background: var(--primary-color);
    color: var(--primary-text-on);
    border-color: var(--primary-color);
}

/* Side by side */
.compare-side-by-side {
    display: flex;
    gap: 0.75rem;
}

.compare-panel {
    flex: 1;
    min-width: 0;
}

.compare-panel img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    background: #000;
    display: block;
}

.compare-label {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
    font-weight: 500;
}

/* Slider overlay */
.compare-slider-container {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    cursor: ew-resize;
    user-select: none;
    -webkit-user-select: none;
    max-height: 65vh;
}

.compare-slider-img {
    width: 100%;
    height: auto;
    display: block;
    background: #000;
}

.compare-slider-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
}

.compare-slider-overlay img {
    width: var(--slider-full-width, 100%);
    height: 100%;
    object-fit: cover;
    display: block;
}

.compare-slider-handle {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    z-index: 10;
}

.compare-slider-line {
    flex: 1;
    width: 3px;
    background: white;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}

.compare-slider-grip {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-primary);
}

.compare-slider-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
}

@media (max-width: 768px) {
    .compare-side-by-side {
        flex-direction: column;
    }
    .compare-toolbar {
        flex-wrap: wrap;
    }
}

/* =============================================================================
   Tags
   ============================================================================= */

.tag-manager { margin-top: 0.75rem; }

.tag-create-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.tag-create-row .form-control { flex: 1; max-width: 250px; }

.tag-color-picker {
    display: none;
}

.color-swatch-row {
    display: flex; gap: 4px; align-items: center;
}
.color-swatch {
    width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
    border: 2px solid transparent; transition: border-color 0.15s, transform 0.15s;
    flex-shrink: 0;
}
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.selected { border-color: var(--text-primary); transform: scale(1.15); }

.tag-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }

.tag-list-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    min-width: 0;
}
.tag-list-item .tag-chip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag-list-item .tag-usage {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-left: auto;
    white-space: nowrap;
}
.tag-list-item .tag-actions {
    display: flex; gap: 0.25rem;
}
.tag-list-item:has(> .color-swatch-row) {
    grid-column: 1 / -1;
    flex-wrap: wrap;
}
.tag-action-btn {
    background: none; border: none; cursor: pointer;
    padding: 0.3rem; color: var(--text-secondary);
    border-radius: 4px; display: inline-flex; align-items: center;
    opacity: 0.5; transition: opacity 0.15s, color 0.15s, background 0.15s;
}
.tag-action-btn:hover {
    opacity: 1; background: var(--hover-bg);
}
.tag-action-delete:hover {
    color: #ef4444;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.tag-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }

.card-tags {
    display: flex; flex-wrap: wrap; gap: 0.2rem;
    padding: 0 0.5rem 0.35rem;
}
.card-tags .tag-chip { font-size: 0.6rem; padding: 0.1rem 0.4rem; }

/* Tag picker (for modals) */
.tag-picker {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
    padding: 0.5rem;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    min-height: 38px;
    align-items: center;
}
.tag-picker .tag-chip {
    cursor: pointer; opacity: 0.4; transition: opacity 0.15s;
}
.tag-picker .tag-chip.selected { opacity: 1; }
.tag-picker .tag-chip:hover { opacity: 0.8; }

/* "+New Tag" button and inline creator below tag picker */
.tag-picker-footer {
    margin-top: 0.5rem;
    position: relative;
}
.tag-create-btn {
    position: absolute; top: 0; left: 0; z-index: 1;
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.85rem; font-weight: 500;
    cursor: pointer;
    background: var(--gradient-accent);
    color: var(--primary-text-on);
    border: none;
    transition: opacity 0.15s;
}
.tag-create-btn:hover { opacity: 0.85; }
.tag-inline-form {
    display: flex; align-items: center; gap: 0.5rem;
    flex-wrap: wrap;
}
.tag-inline-form .form-control {
    flex: 1; max-width: 220px;
}
.tag-inline-form .color-swatch-row { gap: 3px; }
.tag-inline-form .color-swatch { width: 18px; height: 18px; }

.tag-picker-inline {
    display: flex; align-items: center; gap: 0.35rem;
}
.tag-picker-inline input { width: 100px; font-size: 0.8rem; padding: 0.2rem 0.4rem; }

/* Tag filter dropdown in galleries */
.tag-filter-wrap {
    position: relative; display: inline-block;
}
.tag-filter-trigger {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    white-space: nowrap;
    transition: border-color 0.15s;
}
.tag-filter-trigger:hover, .tag-filter-trigger.active {
    border-color: var(--primary-color);
    color: var(--text-primary);
}
.tag-filter-trigger .tag-filter-count {
    background: var(--primary-color); color: var(--primary-text-on);
    font-size: 0.65rem; padding: 0.05rem 0.35rem;
    border-radius: 999px; font-weight: 600;
}
.tag-filter-dropdown {
    position: absolute; top: 100%; left: 0; z-index: 100;
    min-width: 220px; max-height: 280px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    margin-top: 4px;
    display: none; flex-direction: column;
}
.tag-filter-dropdown.open { display: flex; }
.tag-filter-search {
    padding: 0.4rem; border-bottom: 1px solid var(--border-color);
}
.tag-filter-search input {
    width: 100%; font-size: 0.8rem; padding: 0.3rem 0.5rem;
    background: var(--input-bg); border: 1px solid var(--border-color);
    border-radius: 4px; color: var(--text-primary); outline: none;
}
.tag-filter-search input:focus { border-color: var(--primary-color); }
.tag-filter-list {
    overflow-y: auto; padding: 0.3rem;
    display: flex; flex-direction: column; gap: 0.15rem;
}
.tag-filter-item {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.3rem 0.5rem; border-radius: 4px;
    cursor: pointer; font-size: 0.8rem; color: var(--text-primary);
    transition: background 0.1s;
}
.tag-filter-item:hover { background: var(--hover-bg); }
.tag-filter-item .tag-filter-check {
    width: 14px; height: 14px; border-radius: 3px;
    border: 1.5px solid var(--text-secondary);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: all 0.1s;
}
.tag-filter-item.selected .tag-filter-check {
    background: var(--primary-color); border-color: var(--primary-color);
}
.tag-filter-item.selected .tag-filter-check::after {
    content: '✓'; font-size: 0.6rem; color: #fff; font-weight: 700;
}
.tag-filter-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.tag-picker-inline .tag-color-picker { width: 24px; height: 24px; }

/* =============================================================================
   GIF Download
   ============================================================================= */

/* GIF popover */
.gif-popover-wrap {
    position: relative;
}
.gif-popover {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 0.75rem;
    min-width: 180px;
    z-index: 100;
}
.gif-popover-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.toggle-switch {
    position: relative; display: inline-block; width: 40px; height: 22px;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute; cursor: pointer; inset: 0;
    background: var(--border-color); border-radius: 22px;
    transition: background 0.2s;
}
.toggle-slider::before {
    content: ''; position: absolute;
    height: 16px; width: 16px; left: 3px; bottom: 3px;
    background: #fff; border-radius: 50%;
    transition: transform 0.2s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--primary-color); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }

/* =============================================================================
   Video Comparison
   ============================================================================= */


.comparison-modal-content {
    max-width: 95vw;
    width: 1400px;
}
.comparison-players {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 0.75rem;
}
.comparison-players.compare-grid-3,
.comparison-players.compare-grid-4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
}
.comparison-side video {
    width: 100%;
    max-height: 50vh;
    border-radius: 6px;
    background: #000;
}
.compare-grid-3 .comparison-side video,
.compare-grid-4 .comparison-side video {
    max-height: 35vh;
}
.comparison-label {
    margin-top: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.comparison-label strong {
    font-size: 0.85rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.comparison-label span {
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.comparison-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.25rem 0.5rem 0.75rem;
    border-top: 1px solid var(--border-color);
}
.comparison-controls .btn-compare-play {
    background: var(--gradient-accent);
    color: #fff;
    border: none;
    padding: 0.4rem 1rem;
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.comparison-controls .btn-compare-play:hover {
    opacity: 0.9;
    box-shadow: 0 2px 8px var(--accent-glow);
}
.compare-scrubber {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border-color);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.compare-scrubber::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
}
.compare-scrubber::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--primary-color);
    border: none;
    cursor: pointer;
}
.compare-time {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    min-width: 3rem;
    text-align: center;
}

@media (max-width: 768px) {
    .comparison-players {
        grid-template-columns: 1fr;
    }
    .comparison-players.compare-grid-3,
    .comparison-players.compare-grid-4 {
        grid-template-columns: 1fr;
    }
    .comparison-side video {
        max-height: 40vh;
    }
}

/* ── Import modal ─────────────────────────────────────── */
.import-drop-zone {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    cursor: pointer;
}
.import-drop-zone:hover {
    border-color: var(--purple);
}
.import-drop-zone.drag-over {
    border-color: var(--purple);
    background: rgba(168, 85, 247, 0.08);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.15);
}

.import-browse-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.15s;
}
.import-browse-item:hover {
    background: var(--bg-hover);
}
.import-browse-item .browse-icon {
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    font-size: 0.9rem;
}
.import-browse-item .browse-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.import-browse-item .browse-size {
    color: var(--text-secondary);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.import-video-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.import-video-card .video-meta {
    flex: 1;
    font-size: 0.85rem;
}
.import-video-card .video-meta small {
    color: var(--text-secondary);
}
.import-video-card .duplicate-badge {
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
}