/* =============================================================================
   HEIRLOOM GOLD DESIGN SYSTEM - Phossil.ai
   A premium, timeless family archive aesthetic
   ============================================================================= */

:root {
    /* Primary Palette - "Heirloom Gold" Theme */
    --color-canvas: #F3F0E6;           /* Aged Vellum - Main background */
    --color-primary: #213535;           /* Deep Everglade - Sidebar/Headers */
    --color-accent: #D9A520;            /* Heirloom Goldenrod - Primary actions */
    --color-accent-hover: #EDB82F;      /* Lighter Gold - Hover states */
    --color-accent-light: rgba(217, 165, 32, 0.1); /* Gold tint - Backgrounds */
    --color-surface: #FFFFFF;           /* White - Cards/Modals */
    --color-secondary: #68868A;         /* River Stone - Borders/Secondary text */
    --color-destructive: #C05746;       /* Terracotta - Delete actions */

    /* Editorial Light Palette - The Lab Workspace */
    --lab-bg: #fafafa;                  /* bg-zinc-50 - soft gray canvas */
    --lab-surface: #FFFFFF;             /* Pure white for cards */
    --lab-text: #1a1a1a;                /* Deep charcoal - softer than black */
    --lab-text-secondary: #5c5c5c;      /* Medium charcoal */
    --lab-text-muted: #8a8a8a;          /* Light charcoal */
    --lab-border: #e4e4e7;              /* border-zinc-200 */
    --lab-border-light: #f4f4f5;        /* border-zinc-100 */
    --lab-sidebar-bg: #FFFFFF;          /* White sidebar */
    --lab-sidebar-border: #e4e4e7;      /* border-zinc-200 */
    --lab-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04);
    --lab-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);

    /* Dark Header Palette - Command Strip */
    --lab-header-bg: #213535;           /* Deep Everglade - brand primary */
    --lab-header-text: #a1a1aa;         /* text-zinc-400 */
    --lab-header-text-hover: #ffffff;   /* text-white */
    --lab-header-border: rgba(255, 255, 255, 0.1);  /* border-white/10 */

    /* Text Colors */
    --color-text-primary: #213535;      /* Deep Everglade for primary text */
    --color-text-secondary: #68868A;    /* River Stone for secondary text */
    --color-text-on-accent: #FFFFFF;    /* White text on Goldenrod - clean and readable */
    --color-text-on-primary: #F3F0E6;   /* Light text on Everglade */
    --color-text-muted: #8A9A9C;        /* Muted text */

    /* Semantic Colors */
    --color-success: #4A7C59;           /* Muted forest green - for form validation only, NOT status indicators */
    --color-warning: #D9A520;           /* Goldenrod for warnings */
    --color-error: #C05746;             /* Terracotta for errors */
    --color-info: #68868A;              /* River Stone for info */

    /* Status Indicator Colors (use these for photo/face status) */
    --color-verified-trained: #D9A520;  /* Goldenrod - user confirmed + AWS indexed (double border) */
    --color-verified: #D9A520;          /* Goldenrod - user confirmed identity */
    --color-recognized: #213535;        /* Everglade - AWS Rekognition 95%+ confidence */
    --color-suggested: #E6A817;         /* Amber - AWS Rekognition 70-94% confidence */
    --color-review: #C05746;            /* Terracotta - AWS Rekognition 1-69% confidence */
    --color-untagged: #9E9E9E;          /* Gray - no faces identified */

    /* Border Colors */
    --color-border: #E5E2D9;               /* Light border - matches canvas */
    --color-border-light: #EDEBE3;         /* Lighter border for cards */

    /* Overlay Colors */
    --color-overlay: rgba(0, 0, 0, 0.7);   /* Modal backdrop */
    --color-overlay-light: rgba(0, 0, 0, 0.5); /* Lighter overlay */

    /* Common Utility Colors */
    --color-white: #FFFFFF;                /* Pure white */
    --color-black: #000000;                /* Pure black */

    /* Shadows & Effects */
    --shadow-card: 0 4px 16px rgba(33, 53, 53, 0.08);
    --shadow-card-hover: 0 8px 24px rgba(33, 53, 53, 0.12);
    --shadow-modal: 0 20px 60px rgba(33, 53, 53, 0.2);
    --shadow-accent: 0 2px 12px rgba(217, 165, 32, 0.3);
    --shadow-accent-hover: 0 4px 20px rgba(217, 165, 32, 0.4);

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s ease;
}

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

html {
    /* Smooth scrolling for anchor links and programmatic scrolls */
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: var(--color-canvas);
    color: var(--color-text-primary);
    /* Performance: enable GPU-accelerated scrolling */
    -webkit-overflow-scrolling: touch;
}

/* =============================================================================
   EDITORIAL LIGHT THEME - The Lab Workspace
   A premium, clean workspace aesthetic for the admin/lab side
   ============================================================================= */

body.lab-workspace {
    background: var(--lab-bg);
    color: var(--lab-text);
}

/* Editorial Serif Typography for Lab Headings */
.lab-workspace h1,
.lab-workspace h2,
.lab-workspace .lab-heading {
    font-family: 'Libre Baskerville', Georgia, serif;
    color: var(--lab-text);
    font-weight: 400;
    letter-spacing: -0.01em;
}

.lab-workspace h1 {
    font-size: 2rem;
}

.lab-workspace h2 {
    font-size: 1.5rem;
}

/* Lab Header - Dark Command Strip (Compact) */
.lab-workspace header {
    background: var(--lab-header-bg);
    border-bottom: 1px solid var(--lab-header-border);
    box-shadow: none;
    border-radius: 0;
    margin-bottom: 0;
    padding: 6px 20px;  /* Tighter vertical padding */
}

/* Lab Logo - Compact size */
.lab-workspace .header-content img[onclick] {
    height: 48px !important;  /* Smaller logo */
}

/* Lab Container - Full bleed */
.lab-workspace .container {
    max-width: 100%;
    padding: 0;
}

/* Lab Main Grid - No gap, seamless */
.lab-workspace .main-grid {
    gap: 0;
    margin-bottom: 0;
}

/* Lab Content Area - Editorial background */
.lab-workspace .content-area {
    background: var(--lab-bg);
    border-radius: 0;
    box-shadow: none;
    padding: 32px 40px;
    color: var(--lab-text);
}

/* Lab secondary text color */
.lab-workspace .content-area p,
.lab-workspace .content-area span,
.lab-workspace .content-area label {
    color: var(--lab-text-secondary);
}

/* Lab Sidebar - White with right border (bridge between dark header and light content) */
.lab-workspace .sidebar {
    background: var(--lab-sidebar-bg);
    border-right: 1px solid var(--lab-sidebar-border);
    border-radius: 0;
    box-shadow: none;
    color: var(--lab-text);
}

.lab-workspace .sidebar h3 {
    color: var(--lab-text);
}

.lab-workspace .sidebar-family-name {
    border-bottom-color: var(--lab-border);
}

.lab-workspace .sidebar-family-name h2 {
    color: var(--lab-text);
}

/* =============================================================================
   ACCESSIBILITY - FOCUS STATES
   ============================================================================= */

/* Global focus-visible outline for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Remove default focus outline (replaced by focus-visible) */
:focus:not(:focus-visible) {
    outline: none;
}

/* Button focus states */
button:focus-visible,
[role="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(217, 165, 32, 0.2);
}

/* Input focus states */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(217, 165, 32, 0.15);
}

/* Link focus states */
a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Card focus states for clickable cards */
.photo-card:focus-visible,
.rail-card:focus-visible,
.collection-photo-card:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(217, 165, 32, 0.2);
}

/* Modal close button focus */
.modal-close:focus-visible,
.close-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 50%;
}

/* Skip link for keyboard users */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--color-accent);
    color: var(--color-primary);
    padding: 12px 24px;
    z-index: 100000;
    font-weight: 600;
    border-radius: 0 0 var(--radius-md) 0;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 0;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

header {
    background: var(--color-surface);
    padding: 8px 20px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    margin-bottom: 24px;
}

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

/* Logo clickable hover effect - return to dashboard */
.header-content img[onclick] {
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.header-content img[onclick]:hover {
    opacity: 0.8;
    transform: scale(1.02);
}

.family-selector {
    display: flex;
    align-items: center;
    gap: 10px;
}

.family-dropdown {
    padding: 8px 16px;
    border: 2px solid var(--color-secondary);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-primary);
    min-width: 160px;
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.family-dropdown:hover,
.family-dropdown:focus {
    border-color: var(--color-accent);
    outline: none;
}

.family-btn {
    padding: 8px 14px;
    border: 2px solid var(--color-secondary);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-primary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: var(--transition-fast);
}

.family-btn:hover {
    border-color: var(--color-accent);
    background: rgba(217, 165, 32, 0.1);
}

.family-btn.delete {
    border-color: var(--color-destructive);
    color: var(--color-destructive);
}

.family-btn.delete:hover {
    background: rgba(192, 87, 70, 0.1);
}

/* Header Train AI Button */
.header-train-ai-btn {
    padding: 10px 20px;
    background: var(--color-primary); /* Everglade #213535 */
    color: var(--color-text-on-primary);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: 0 2px 8px rgba(33, 53, 53, 0.3);
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-train-ai-btn svg {
    stroke: var(--color-accent); /* Gold #D9A520 */
}

.header-train-ai-btn:hover {
    background: #1a2a2a;
    box-shadow: 0 4px 12px rgba(33, 53, 53, 0.4);
    transform: translateY(-1px);
}

/* Header Upload Button - Primary Action */
.header-upload-btn {
    padding: 10px 20px;
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: 0 2px 8px rgba(217, 165, 32, 0.3);
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-upload-btn:hover {
    background: #C4941D;
    box-shadow: 0 4px 12px rgba(217, 165, 32, 0.4);
    transform: translateY(-1px);
}

.mode-btn {
    padding: 6px 14px;
    border: 2px solid var(--color-secondary);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: var(--transition-fast);
    min-width: 90px;
}

.mode-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-text-primary);
}

.mode-btn.simple {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.mode-btn.simple:hover {
    background: rgba(217, 165, 32, 0.1);
}

/* Tutorial System Styles - Heirloom Theme */
.tutorial-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(33, 53, 53, 0.7);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}

.tutorial-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 32px;
    max-width: 500px;
    margin: 20px;
    text-align: center;
    box-shadow: var(--shadow-modal);
    animation: tutorialSlideIn 0.3s ease-out;
}

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

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

.tutorial-card h3 {
    color: var(--color-text-primary);
    margin-bottom: 16px;
    font-size: 24px;
    font-weight: 600;
}

.tutorial-card p {
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
    font-size: 15px;
}

.tutorial-progress {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 20px 0;
}

.tutorial-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-secondary);
    transition: var(--transition-normal);
}

.tutorial-dot.active {
    background: var(--color-accent);
    transform: scale(1.3);
}

.tutorial-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.tutorial-btn {
    padding: 10px 24px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: var(--transition-fast);
}

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

.tutorial-btn.primary:hover {
    background: #C4941D;
}

.tutorial-btn.secondary {
    background: var(--color-canvas);
    color: var(--color-text-secondary);
    border: 2px solid var(--color-secondary);
}

.tutorial-btn.secondary:hover {
    border-color: var(--color-text-primary);
    color: var(--color-text-primary);
}

/* Welcome Card - Heirloom Theme */
.welcome-card {
    background: linear-gradient(135deg, var(--color-primary) 0%, #2A4545 100%);
    color: var(--color-text-on-primary);
    padding: 28px;
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
    text-align: center;
    box-shadow: var(--shadow-card);
}

.welcome-card h3 {
    margin: 0 0 16px 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--color-text-on-primary);
}

.welcome-card p {
    margin: 0 0 20px 0;
    opacity: 0.85;
    font-size: 15px;
    color: var(--color-text-on-primary);
}

.welcome-card .btn {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    border: none;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

.welcome-card .btn:hover {
    background: #C4941D;
    transform: translateY(-1px);
}

/* Step indicator */
.step-indicator {
    display: inline-block;
    background: rgba(243, 240, 230, 0.15);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 13px;
    margin-bottom: 12px;
    color: var(--color-accent);
}

/* Typography: Serif headings for Archive aesthetic */
h1, h2, h3 {
    font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
}

h1 {
    color: var(--color-text-primary);
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -0.5px;
}

h2 {
    color: var(--color-text-primary);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.3px;
}

h3 {
    color: var(--color-text-primary);
    font-weight: 400;
    font-size: 18px;
}

.subtitle {
    color: var(--color-text-secondary);
    font-size: 16px;
}

.main-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    margin-bottom: 30px;
}

.sidebar {
    background: var(--color-primary);
    padding: 24px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    height: fit-content;
    color: var(--color-text-on-primary);
}

.sidebar h3 {
    color: var(--color-text-on-primary);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(243, 240, 230, 0.2);
}

.content-area {
    background: var(--color-surface);
    padding: 24px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.tab-nav {
    display: flex;
    gap: 12px;
    margin-bottom: 28px;
    border-bottom: none;
    padding-bottom: 4px;
    width: 100%;
}

.tab {
    flex: 1;
    padding: 18px 24px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(217, 165, 32, 0.35);
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    transition: all 0.2s ease;
    text-align: center;
}

.tab:hover {
    color: var(--color-text-primary);
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(217, 165, 32, 0.7);
    transform: translateY(-2px);
}

.tab.active {
    color: var(--color-accent);
    background: rgba(217, 165, 32, 0.15);
    border-color: var(--color-accent);
    box-shadow: 0 0 20px rgba(217, 165, 32, 0.3);
}

.tab-content {
    display: none;
}

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

.upload-zone {
    border: 2px dashed var(--color-secondary);
    border-radius: var(--radius-md);
    padding: 40px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-normal);
    margin-bottom: 24px;
    background: rgba(104, 134, 138, 0.05);
}

.upload-zone:hover {
    border-color: var(--color-accent);
    background: rgba(217, 165, 32, 0.08);
}

.upload-zone.dragging {
    border-color: var(--color-accent);
    background: rgba(217, 165, 32, 0.12);
    border-style: solid;
}

/* Primary Button - Goldenrod with Dark Text */
.btn {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    border: none;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: var(--transition-fast);
    box-shadow: 0 2px 8px rgba(217, 165, 32, 0.3);
}

.btn:hover {
    background: #C4941D;
    box-shadow: 0 4px 12px rgba(217, 165, 32, 0.4);
    transform: translateY(-1px);
}

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

/* Accent hover button - CSP-compliant replacement for onmouseover/onmouseout */
.btn-hover-accent {
    transition: background 0.15s ease;
}

.btn-hover-accent:hover {
    background: var(--color-accent-hover) !important;
}

/* Secondary Button - Outlined */
.btn-secondary {
    background: transparent;
    color: var(--color-text-primary);
    border: 2px solid var(--color-secondary);
    box-shadow: none;
}

.btn-secondary:hover {
    background: rgba(104, 134, 138, 0.1);
    border-color: var(--color-text-primary);
    box-shadow: none;
    transform: none;
}

/* Destructive Button - Terracotta */
.btn-destructive {
    background: var(--color-destructive);
    color: white;
    box-shadow: 0 2px 8px rgba(192, 87, 70, 0.3);
}

.btn-destructive:hover {
    background: #A84A3D;
    box-shadow: 0 4px 12px rgba(192, 87, 70, 0.4);
}

/* Slideshow Styles */
.slideshow-speed-btn {
    padding: 8px 16px;
    border: 2px solid #ddd;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.slideshow-speed-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.slideshow-speed-btn.active {
    background: linear-gradient(135deg, var(--color-accent) 0%, #C4941D 100%);
    color: var(--color-text-on-accent);
    border-color: transparent;
}

/* Fullscreen Slideshow Overlay */
.slideshow-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 10000;
    display: none;
    cursor: none;
}

.slideshow-overlay.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.slideshow-overlay:hover {
    cursor: default;
}

.slideshow-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.slideshow-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slideshow-image.active {
    opacity: 1;
}

.slideshow-image.kenburns {
    animation: kenburns 12s ease-in-out infinite;
    max-width: 120%;
    max-height: 120%;
}

@keyframes kenburns {
    0% { transform: scale(1) translate(0, 0); }
    50% { transform: scale(1.1) translate(-2%, -1%); }
    100% { transform: scale(1) translate(0, 0); }
}

/* Live Photo video in slideshow */
.slideshow-video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slideshow-video.active {
    opacity: 1;
}

/* Live Photo badge in slideshow */
.slideshow-live-badge {
    position: absolute;
    top: 30px;
    left: 30px;
    background: rgba(255, 255, 255, 0.95);
    color: #000;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 6px 12px;
    border-radius: 6px;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.slideshow-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px 50px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: white;
    text-align: center;
    opacity: 1;
}

.slideshow-caption h3 {
    font-size: 28px;
    margin: 0 0 8px 0;
    font-weight: 500;
    color: var(--color-accent, #D9A520);
    text-shadow: 0 2px 8px var(--color-text-primary, #213535), 0 1px 3px rgba(0, 0, 0, 0.5);
}

.slideshow-caption p {
    font-size: 18px;
    margin: 0;
    opacity: 0.8;
    text-shadow: 0 2px 8px var(--color-text-primary, #213535), 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Note: .slideshow-controls and .slideshow-control-btn styles defined in SLIDESHOW PLAYER COMPONENT section below */

.slideshow-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-accent), #C4941D);
    transition: width linear;
}

/* =============================================================================
   SIDEBAR - Family Name Display
   ============================================================================= */
.sidebar-family-name {
    text-align: center;
    padding: 20px 12px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(243, 240, 230, 0.1);
}

.family-name-prefix,
.family-name-suffix {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.family-name-main {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--color-accent);
    margin: 4px 0;
    line-height: 1.2;
    word-break: break-word;
}

/* =============================================================================
   SIDEBAR - Add Person Action
   ============================================================================= */
.sidebar-add-person {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 20px;
    background: rgba(243, 240, 230, 0.08);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}

.sidebar-add-person:hover {
    background: rgba(243, 240, 230, 0.15);
}

.add-person-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-on-accent);
    flex-shrink: 0;
}

.add-person-label {
    color: var(--color-text-on-primary);
    font-size: 14px;
    font-weight: 500;
}

/* =============================================================================
   SIDEBAR - Section Headers (Goldenrod Serif)
   ============================================================================= */
.sidebar-section {
    margin-bottom: 16px;
}

.sidebar-section-header {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-accent);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(217, 165, 32, 0.3);
}

/* =============================================================================
   SIDEBAR - Family Member Cards
   ============================================================================= */
.family-member {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: rgba(243, 240, 230, 0.08);
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

.family-member:hover {
    background: rgba(243, 240, 230, 0.15);
}

.member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-weight: 600;
    font-size: 15px;
    color: var(--color-text-on-accent);
    flex-shrink: 0;
    position: relative;
    /* Goldenrod progress ring border */
    border: 2px solid var(--color-accent);
}

.member-avatar.extended {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
}

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

.member-name {
    font-weight: 500;
    font-size: 13px;
    color: var(--color-text-on-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.member-role {
    font-size: 11px;
    color: var(--color-secondary);
    margin-top: 2px;
}

.member-birth {
    font-size: 11px;
    color: rgba(243, 240, 230, 0.7);
    margin-top: 1px;
}

/* =============================================================================
   SIDEBAR - Trained Badge & Photo Counts
   ============================================================================= */
.family-member.is-trained .member-avatar {
    border-color: var(--color-secondary);
}

.member-trained-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    background: var(--color-secondary);
    color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    border: 2px solid var(--color-primary);
    line-height: 1;
}

.member-photo-counts {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    padding-left: 8px;
    font-size: 11px;
    font-family: var(--font-mono, monospace);
    color: rgba(243, 240, 230, 0.5);
    flex-shrink: 0;
}

.member-count-indexed {
    color: rgba(243, 240, 230, 0.6);
}

.member-count-separator {
    color: rgba(243, 240, 230, 0.3);
}

.member-count-tagged {
    color: var(--color-secondary);
    font-weight: 600;
}

/* Hover state shows counts more prominently */
.family-member:hover .member-photo-counts {
    color: rgba(243, 240, 230, 0.7);
}

.family-member:hover .member-count-indexed {
    color: rgba(243, 240, 230, 0.8);
}

/* =============================================================================
   SIDEBAR - Member Actions (Edit/Delete Icons)
   ============================================================================= */
.member-actions {
    display: flex;
    gap: 4px;
    margin-left: 8px;
    flex-shrink: 0;
}

.member-actions .icon-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
    color: rgba(243, 240, 230, 0.6);
}

.member-actions .icon-btn:hover {
    background: rgba(243, 240, 230, 0.15);
}

.member-actions .icon-btn:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.member-actions .edit-btn:hover {
    color: var(--color-accent);
}

.member-actions .delete-btn {
    color: var(--color-secondary);
}

.member-actions .delete-btn:hover {
    color: var(--color-destructive);
    background: rgba(192, 87, 70, 0.15);
}

/* =============================================================================
   SIDEBAR - Empty State
   ============================================================================= */
.sidebar-empty-state {
    text-align: center;
    padding: 24px 16px;
    color: rgba(243, 240, 230, 0.6);
    font-size: 13px;
    line-height: 1.5;
}

/* Sidebar Buttons - Light on Dark */
.sidebar .btn.sidebar-btn {
    padding: 10px 16px;
    font-size: 13px;
    border-radius: var(--radius-sm);
}

.sidebar .btn-secondary.sidebar-btn {
    background: transparent;
    color: var(--color-text-on-primary);
    border: 2px solid rgba(243, 240, 230, 0.3);
    box-shadow: none;
}

.sidebar .btn-secondary.sidebar-btn:hover {
    background: rgba(243, 240, 230, 0.1);
    border-color: rgba(243, 240, 230, 0.5);
}

/* Sidebar Progress Text */
.sidebar p {
    color: rgba(243, 240, 230, 0.7);
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
    /* Performance: contain layout calculations within grid */
    contain: layout style;
}

.photo-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: var(--shadow-card);
    /* Performance: isolate layout/paint and hint GPU for smooth scrolling */
    contain: content;
    will-change: transform;
    position: relative;
}

.photo-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

/* Hide actions until hover */
.photo-card .photo-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: var(--transition-fast);
}

.photo-card:hover .photo-actions {
    opacity: 1;
}

/* =============================================================================
   BULK PHOTO SELECTION MODE
   ============================================================================= */

/* Bulk Actions Toolbar */
.bulk-actions-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--color-primary);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.bulk-actions-left,
.bulk-actions-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.selection-count {
    color: var(--color-text-on-primary);
    font-weight: 600;
    font-size: 14px;
    padding-right: 10px;
    border-right: 1px solid rgba(255,255,255,0.2);
    margin-right: 4px;
}

/* Small button variant for toolbar */
.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-sm svg {
    flex-shrink: 0;
}

/* Danger button variant */
.btn-danger {
    background: var(--color-destructive);
    color: white;
}

.btn-danger:hover {
    background: #A84438;
}

/* Select Mode Toggle - Active State */
#selectModeToggle.active {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    border-color: var(--color-accent);
}

#selectModeToggle {
    display: inline-flex;
    align-items: center;
}

/* Photo Card in Select Mode - supports .photo-card, .tm-photo-card, and .tm-card */
.photo-grid.select-mode .photo-card,
.photo-grid.select-mode .tm-photo-card,
.photo-grid.select-mode .tm-card {
    cursor: pointer;
    position: relative;
}

/* Selection checkbox overlay - visible in select mode */
.photo-select-checkbox {
    display: none;
    position: absolute;
    top: 8px;
    left: 8px;
    width: 26px;
    height: 26px;
    border: 2px solid rgba(255,255,255,0.9);
    border-radius: 4px;
    background: rgba(0,0,0,0.4);
    z-index: 10;
    cursor: pointer;
    transition: all 0.15s ease;
}

.photo-grid.select-mode .photo-select-checkbox {
    display: block;
}

.photo-select-checkbox:hover {
    background: rgba(0,0,0,0.6);
    border-color: var(--color-accent);
    transform: scale(1.1);
}

/* Checkmark when selected */
.photo-select-checkbox::after {
    content: '';
    display: none;
    position: absolute;
    left: 8px;
    top: 4px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

.photo-card.selected .photo-select-checkbox,
.tm-photo-card.selected .photo-select-checkbox,
.tm-card.selected .photo-select-checkbox {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.photo-card.selected .photo-select-checkbox::after,
.tm-photo-card.selected .photo-select-checkbox::after,
.tm-card.selected .photo-select-checkbox::after {
    display: block;
}

/* Selection outline on selected photos */
.photo-grid.select-mode .photo-card.selected,
.photo-grid.select-mode .tm-photo-card.selected,
.photo-grid.select-mode .tm-card.selected {
    outline: 3px solid var(--color-accent);
    outline-offset: -3px;
}

/* Disable normal click behavior in select mode */
.photo-grid.select-mode .photo-card .delete-photo-btn,
.photo-grid.select-mode .tm-photo-card .delete-photo-btn,
.photo-grid.select-mode .tm-card .delete-photo-btn {
    display: none;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .bulk-actions-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .bulk-actions-left,
    .bulk-actions-right {
        justify-content: center;
    }

    .selection-count {
        border-right: none;
        padding-right: 0;
        margin-right: 0;
        text-align: center;
        width: 100%;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(255,255,255,0.2);
        margin-bottom: 4px;
    }
}

.photo-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    background: var(--color-canvas);
}

.photo-info {
    padding: 12px;
}

/* De-emphasize date, emphasize person */
.photo-date {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 6px;
}

/* Hide filename on photo cards - cleaner grid view */
.photo-filename {
    display: none;
}

.photo-person-tag {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.photo-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: var(--color-canvas);
    color: var(--color-text-secondary);
    border: 1px solid rgba(104, 134, 138, 0.3);
}

/* Tags with inline SVG icons */
.tag.tag-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
}

.tag.tag-icon svg {
    flex-shrink: 0;
}

/* Warm Caption on photo cards */
.photo-caption {
    font-size: 12px;
    font-style: italic;
    color: var(--color-text-secondary);
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(104, 134, 138, 0.15);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* AI-tagged people - Goldenrod accent */
.tag-ai-person {
    background: rgba(217, 165, 32, 0.15);
    color: var(--color-text-primary);
    border: 1px solid var(--color-accent);
}

/* Human-confirmed people - VERIFIED */
.tag-person {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    border: 1px solid var(--color-accent);
}

/* AI-trained tags - Goldenrod */
.tag-ai-trained {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    border: 1px solid var(--color-accent);
    font-weight: 600;
}

/* AI-confirmed tags - VERIFIED */
.tag-ai-confirmed {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    border: 1px solid var(--color-accent);
}

/* RECOGNIZED tags - AWS Rekognition 95%+ confidence */
.tag-ai-auto,
.tag-recognized {
    background: var(--color-primary);
    color: var(--color-accent);
    border: 1px solid var(--color-primary);
}

/* REVIEW tags - AWS Rekognition <95% confidence */
.tag-needs-review,
.tag-review {
    background: var(--color-review);
    color: var(--color-text-primary);
    border: 1px solid var(--color-review);
}

/* Date estimate confidence styles - Heirloom Theme */
.date-estimate {
    display: block;
    font-size: 11px;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-weight: 500;
}
.date-estimate-high {
    background: rgba(217, 165, 32, 0.15);
    color: var(--color-accent);
}
.date-estimate-medium {
    background: rgba(217, 165, 32, 0.15);
    color: #A8880E;
}
.date-estimate-low {
    background: rgba(192, 87, 70, 0.15);
    color: var(--color-destructive);
}
.date-estimate-manual {
    background: rgba(104, 134, 138, 0.15);
    color: var(--color-secondary);
}

.timeline-container {
    position: relative;
    padding: 20px 0;
}

.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e0e0e0;
}

.timeline-item {
    display: flex;
    margin-bottom: 40px;
    position: relative;
}

.timeline-item:nth-child(even) {
    flex-direction: row-reverse;
}

.timeline-content {
    width: 45%;
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.timeline-marker {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: var(--color-accent);
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(33, 53, 53, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1a1a1a;
    padding: 0;
    border-radius: 16px;
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(217, 165, 32, 0.15);
}

/* Premium dark modal inputs */
.modal-content .input-group label {
    color: #9A9890;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.modal-content .input-group input,
.modal-content .input-group select,
.modal-content .input-group textarea {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #F3F0E6;
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 15px;
    width: 100%;
    box-sizing: border-box;
}

/* ============================================================================
   Face Tagging Conflict Modal
   ============================================================================ */

.face-conflict-modal {
    max-width: 500px;
    padding: 24px;
}

.face-conflict-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-secondary);
}

.face-conflict-modal .modal-header h3 {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 20px;
    font-weight: 600;
}

.face-conflict-modal .close-btn {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.face-conflict-modal .close-btn:hover {
    color: var(--color-text-primary);
}

.modal-content .input-group input:focus,
.modal-content .input-group select:focus,
.modal-content .input-group textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(217, 165, 32, 0.15);
    background: rgba(0, 0, 0, 0.45);
    outline: none;
}

.modal-content .input-group input::placeholder {
    color: #68868A;
}

.modal-content .input-group select option {
    background: #1a1a1a;
    color: #F3F0E6;
}

/* Direct children padding (for modals without modal-body wrapper) */
.modal-content > .input-group {
    padding: 0 24px;
}

.modal-content > .input-group:first-of-type {
    padding-top: 20px;
}

.modal-content > .btn {
    margin: 24px;
    width: calc(100% - 48px);
    display: block;
}

/* Premium modal button styling */
.modal-content .btn {
    background: var(--color-accent);
    color: #0d1414;
    border: none;
    border-radius: 10px;
    padding: 16px 24px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-content .btn:hover {
    background: var(--color-accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-accent);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(217, 165, 32, 0.15);
}

.modal-header h3 {
    color: #F3F0E6;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 20px;
    font-weight: 700;
}

.modal-body {
    padding: 24px;
}

.close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #B8B5AA;
    transition: all 0.2s ease;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #F3F0E6;
}

/* =============================================================================
   EDITORIAL LIGHT MODALS - For Lab Workspace
   Clean, warm modal styling matching the Editorial Light theme
   ============================================================================= */

.lab-workspace .modal-content {
    background: var(--lab-surface, #FFFFFF);
    border: 1px solid var(--lab-border, #e8e8e6);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15);
}

.lab-workspace .modal-header {
    background: var(--lab-bg, #F9F9F7);
    border-bottom: 1px solid var(--lab-border, #e8e8e6);
}

.lab-workspace .modal-header h3 {
    color: var(--lab-text, #1a1a1a);
    font-family: 'Libre Baskerville', Georgia, serif;
}

.lab-workspace .close-btn {
    color: var(--lab-text-muted, #8a8a8a);
}

.lab-workspace .close-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--lab-text, #1a1a1a);
}

/* Editorial Light form inputs */
.lab-workspace .modal-content .input-group label {
    color: var(--lab-text-secondary, #5c5c5c);
}

.lab-workspace .modal-content .input-group input,
.lab-workspace .modal-content .input-group select,
.lab-workspace .modal-content .input-group textarea {
    background: var(--lab-surface, #FFFFFF);
    border: 1px solid var(--lab-border, #e8e8e6);
    color: var(--lab-text, #1a1a1a);
}

.lab-workspace .modal-content .input-group input:focus,
.lab-workspace .modal-content .input-group select:focus,
.lab-workspace .modal-content .input-group textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(217, 165, 32, 0.15);
    background: var(--lab-surface, #FFFFFF);
}

.lab-workspace .modal-content .input-group input::placeholder {
    color: var(--lab-text-muted, #8a8a8a);
}

.lab-workspace .modal-content .input-group select option {
    background: var(--lab-surface, #FFFFFF);
    color: var(--lab-text, #1a1a1a);
}

/* Editorial Light modal buttons */
.lab-workspace .modal-content .btn {
    background: var(--color-accent);
    color: #0d1414;
}

.lab-workspace .modal-content .btn-secondary {
    background: transparent;
    border: 1px solid var(--lab-border, #e8e8e6);
    color: var(--lab-text-secondary, #5c5c5c);
}

.lab-workspace .modal-content .btn-secondary:hover {
    background: var(--lab-bg, #F9F9F7);
    border-color: var(--lab-text-muted, #8a8a8a);
    color: var(--lab-text, #1a1a1a);
}

/* Modal body light background */
.lab-workspace .modal-body {
    background: var(--lab-surface, #FFFFFF);
}

/* =============================================================================
   PHOTO MODAL - Light Theme Override
   Photo modal stays light while other modals (Share) can be dark
   ============================================================================= */
#photoModal .modal-content {
    background: #ffffff;
    border: 1px solid rgba(104, 134, 138, 0.2);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
    /* FAT MODAL - This is where users correct AI predictions = training data gold */
    max-width: 720px;
    width: 95%;
}

/* Photo modal header - clean light style */
#photoModal .modal-content > div:first-child {
    background: #f8f9fa !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

/* Photo modal footer - clean light style */
#photoModal .modal-content > div:last-child {
    background: #f8f9fa !important;
    border-top: 1px solid #e0e0e0 !important;
}

/* Photo modal scrollable content area */
#photoModal .modal-content > div:nth-child(2) {
    background: #ffffff;
}

/* Photo modal close button */
#photoModal .close-btn {
    color: #666;
}

#photoModal .close-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #333;
}

/* Photo modal navigation buttons */
#photoModal .nav-btn {
    background: #f0f0f0;
    border: 1px solid #ddd;
    color: #333;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

#photoModal .nav-btn:hover {
    background: #e0e0e0;
    border-color: #ccc;
}

#photoModal .nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Photo modal buttons - appropriate for light theme */
#photoModal .btn {
    background: #1976d2;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

#photoModal .btn:hover {
    background: #1565c0;
    transform: none;
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
}

#photoModal .btn.btn-secondary {
    background: #f0f0f0;
    color: #333;
    border: 1px solid #ddd;
}

#photoModal .btn.btn-secondary:hover {
    background: #e0e0e0;
    border-color: #ccc;
    box-shadow: none;
}

#photoModal .btn.delete {
    background: transparent;
    color: #c62828;
    border: 1px solid #c62828;
}

#photoModal .btn.delete:hover {
    background: #ffebee;
    box-shadow: none;
}

/* =============================================================================
   PHOTO MODAL TABS - Integrated Tab Design
   Tabs connect visually to content panel, not floating sticky notes
   ============================================================================= */
.modal-tab-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 0;
    padding: 0 4px;
    background: #e8e8e8;
    border-radius: 8px 8px 0 0;
}

.modal-tab-btn {
    flex: 1;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    background: transparent;
    border: none;
    border-radius: 8px 8px 0 0;
    color: #666;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-top: 4px;
    position: relative;
}

.modal-tab-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.5);
    color: #333;
}

.modal-tab-btn.active {
    background: white;
    color: #1976d2;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}

/* Content area connects to active tab */
#tabEditDetails,
#tabAIEvidence {
    background: white;
    padding: 16px;
    border-radius: 0 0 8px 8px;
}

/* =============================================================================
   AI EVIDENCE CARDS - Light Theme for Photo Modal
   ============================================================================= */
#photoModal .ai-evidence-card {
    margin-bottom: 16px;
    padding: 14px;
    background: #f8f9fa;
    border-radius: 10px;
    border-left: 4px solid var(--color-accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

#photoModal .ai-evidence-card h4 {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-weight: 600;
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

#photoModal .ai-evidence-card h4 .ai-icon {
    color: var(--color-accent);
}

/* AI Evidence Header style for photo modal */
#photoModal .ai-evidence-header {
    font-weight: 600;
    font-size: 13px;
    color: #333;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* AI Evidence Grid for photo modal - Two columns */
#photoModal .ai-evidence-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    font-size: 12px;
}

#photoModal .ai-evidence-item {
    padding: 12px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

/* Text colors in AI evidence for photo modal */
#photoModal .ai-evidence-card,
#photoModal .ai-evidence-card div,
#photoModal .ai-evidence-card span {
    color: #333;
}

#photoModal .ai-evidence-card strong {
    color: #555;
}

/* Details/summary styling for photo modal */
#photoModal .ai-evidence-card details summary {
    color: #666;
    cursor: pointer;
}

#photoModal .ai-evidence-card details ul {
    color: #555;
}

/* =============================================================================
   AI EVIDENCE CARDS - Premium Dark Theme (for dark modals like Share)
   ============================================================================= */
.ai-evidence-card {
    margin-bottom: 16px;
    padding: 14px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    border-left: 4px solid #D9A520;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.ai-evidence-card h4 {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-weight: 400;
    font-size: 14px;
    color: #F3F0E6;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-evidence-card h4 .ai-icon {
    color: #D9A520;
}

/* AI Evidence Grid - Two columns */
.ai-evidence-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    font-size: 12px;
}

.ai-evidence-item {
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border: 1px solid rgba(217, 165, 32, 0.1);
}

.ai-evidence-item h5 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: #D9A520;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* AI Date Estimate Card - Special styling */
.ai-date-estimate-card {
    margin-bottom: 16px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    border-left: 4px solid #D9A520;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.ai-date-estimate-card .date-value {
    font-size: 24px;
    font-weight: 700;
    font-family: 'Libre Baskerville', Georgia, serif;
    color: #F3F0E6;
    margin: 8px 0;
}

.ai-date-estimate-card .confidence-badge {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(217, 165, 32, 0.2);
    color: #D9A520;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

/* Cluster Context - Dark themed */
.ai-cluster-card {
    margin-bottom: 16px;
    padding: 14px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    border: 2px dashed rgba(217, 165, 32, 0.3);
}

.ai-cluster-card.no-cluster {
    opacity: 0.7;
}

.ai-cluster-card h4 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #B8B5AA;
    margin-bottom: 6px;
}

/* Re-analyze Buttons - Dark Theme */
.reanalyze-btn {
    flex: 1;
    padding: 12px 16px;
    font-size: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.reanalyze-btn.secondary {
    background: rgba(0, 0, 0, 0.3);
    color: #F3F0E6;
    border: 2px solid rgba(217, 165, 32, 0.4);
}

.reanalyze-btn.secondary:hover {
    border-color: #D9A520;
    background: rgba(217, 165, 32, 0.15);
}

.reanalyze-btn.primary {
    background: rgba(217, 165, 32, 0.2);
    color: #D9A520;
    border: 2px solid #D9A520;
}

.reanalyze-btn.primary:hover {
    background: rgba(217, 165, 32, 0.35);
}

.input-group {
    margin-bottom: 16px;
}

.input-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.input-group input,
.input-group select,
.input-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid rgba(104, 134, 138, 0.3);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--color-text-primary);
    background: var(--color-surface);
    transition: var(--transition-fast);
}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(217, 165, 32, 0.15);
}

.input-group input::placeholder,
.input-group textarea::placeholder {
    color: var(--color-text-muted);
}

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

.people-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.person-chip {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    border: 2px solid var(--color-secondary);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition-fast);
    position: relative;
    font-size: 13px;
    color: var(--color-text-primary);
    background: var(--color-surface);
}

.person-chip:hover {
    border-color: var(--color-accent);
    background: rgba(217, 165, 32, 0.08);
}

.person-chip.selected {
    border-color: var(--color-accent);
    background: rgba(217, 165, 32, 0.15);
    color: var(--color-text-primary);
}

/* =================================================================
   PERSON CHIP TAG TYPE STYLING - 6-State Unified Taxonomy
   Status Indicators:
   1. VERIFIED-TRAINED: Gold bg, white text, ✓✓ double-check (user confirmed + indexed)
   2. VERIFIED: Gold bg, white text, ✓ checkmark (user confirmed)
   3. RECOGNIZED: Everglade bg, gold text, ✨ sparkle (AI 95%+ confidence)
   4. SUGGESTED: Amber bg, dark text, ~ tilde (AI 70-94% confidence)
   5. REVIEW: Terracotta bg, white text, ? question (AI 1-69% confidence)
   ================================================================= */

/* STATE 1: VERIFIED-TRAINED - Gold bg with double checkmark */
.person-chip.verified-trained {
    border-color: var(--color-verified-trained) !important;
    background: var(--color-verified-trained) !important;
    color: var(--color-text-on-accent) !important;
    position: relative;
    box-shadow: 0 2px 8px rgba(217, 165, 32, 0.4);
}

.person-chip.verified-trained .person-name {
    color: var(--color-text-on-accent) !important;
}

.person-chip.verified-trained::after {
    content: '✓✓';
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 10px;
    background: white;
    color: var(--color-verified-trained);
    border-radius: 50%;
    padding: 2px 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    font-weight: bold;
}

/* STATE 2: VERIFIED - Gold bg with single checkmark */
.person-chip.verified,
.person-chip.ai-trained,
.person-chip.ai-confirmed {
    border-color: var(--color-verified) !important;
    background: var(--color-verified) !important;
    color: var(--color-text-on-accent) !important;
    position: relative;
    box-shadow: 0 2px 8px rgba(217, 165, 32, 0.3);
}

.person-chip.verified .person-name,
.person-chip.ai-trained .person-name,
.person-chip.ai-confirmed .person-name {
    color: var(--color-text-on-accent) !important;
}

.person-chip.verified::after,
.person-chip.ai-trained::after,
.person-chip.ai-confirmed::after {
    content: '✓';
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 11px;
    background: white;
    color: var(--color-verified);
    border-radius: 50%;
    padding: 2px 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    font-weight: bold;
}

/* STATE 3: RECOGNIZED - Everglade bg with gold text and sparkle (AI 95%+) */
.person-chip.recognized,
.person-chip.ai-auto {
    border-color: var(--color-recognized) !important;
    background: var(--color-recognized) !important;
    color: var(--color-accent) !important;
    position: relative;
    box-shadow: 0 2px 8px rgba(33, 53, 53, 0.3);
}

.person-chip.recognized .person-name,
.person-chip.ai-auto .person-name {
    color: var(--color-accent) !important;
}

.person-chip.recognized::after,
.person-chip.ai-auto::after {
    content: '';
    position: absolute;
    top: -8px;
    right: -8px;
    width: 18px;
    height: 18px;
    background: var(--color-accent) url('/icons/sparkle-everglade.svg') center/12px no-repeat;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.person-chip.recognized .ai-confidence,
.person-chip.ai-auto .ai-confidence {
    font-size: 10px;
    color: rgba(217, 165, 32, 0.7);
    margin-left: 4px;
    font-weight: bold;
}

/* STATE 4: SUGGESTED - Amber bg with dark text and tilde (AI 70-94%) */
.person-chip.suggested {
    border-color: var(--color-suggested) !important;
    background: var(--color-suggested) !important;
    color: var(--color-text-primary) !important;
    position: relative;
    box-shadow: 0 2px 8px rgba(230, 168, 23, 0.3);
}

.person-chip.suggested .person-name {
    color: var(--color-text-primary) !important;
}

.person-chip.suggested::after {
    content: '~';
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 13px;
    background: white;
    color: var(--color-suggested);
    border-radius: 50%;
    padding: 2px 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    font-weight: bold;
}

/* STATE 5: REVIEW - Terracotta bg with white text and question mark (AI 1-69%) */
.person-chip.review,
.person-chip.needs-review {
    border-color: var(--color-review) !important;
    background: var(--color-review) !important;
    color: white !important;
    position: relative;
    box-shadow: 0 2px 8px rgba(192, 87, 70, 0.3);
}

.person-chip.review .person-name,
.person-chip.needs-review .person-name {
    color: white !important;
}

.person-chip.review::after,
.person-chip.needs-review::after {
    content: '?';
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 11px;
    background: white;
    color: var(--color-review);
    border-radius: 50%;
    padding: 2px 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    font-weight: bold;
}

/* Manual Tag (Dark Navy) - User manually tagged without AI */
.person-chip.manual-tag {
    border-color: #1e3a5f !important;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%) !important;
    position: relative;
}

.person-chip.manual-tag::after {
    content: '👤';
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 12px;
    background: white;
    border-radius: 50%;
    padding: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Legacy support - map old classes to new (Recognized = Everglade + sparkle) */
.person-chip.ai-selected {
    border-color: var(--color-primary) !important;
    background: var(--color-primary) !important;
    color: var(--color-accent) !important;
}

.person-chip.ai-selected::after {
    content: '✨';
    background: var(--color-accent);
    color: var(--color-primary);
}

.person-chip.selected:not(.ai-selected):not(.ai-confirmed):not(.ai-auto):not(.manual-tag) {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-text-on-accent);
}

/* Spin animation for loading states */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Pulse animation for trained chips (gold) */
@keyframes pulse-gold {
    0% { transform: scale(1); box-shadow: 0 0 0 rgba(245, 158, 11, 0.5); }
    50% { transform: scale(1.1); box-shadow: 0 0 20px rgba(245, 158, 11, 0.8); }
    100% { transform: scale(1); box-shadow: 0 0 12px rgba(245, 158, 11, 0.5); }
}

/* Pulse animation for AI suggestion chips (light blue) */
@keyframes pulse-lightblue {
    0% { transform: scale(1); box-shadow: 0 0 0 rgba(14, 165, 233, 0.5); }
    50% { transform: scale(1.1); box-shadow: 0 0 20px rgba(14, 165, 233, 0.8); }
    100% { transform: scale(1); box-shadow: 0 0 12px rgba(14, 165, 233, 0.5); }
}

/* Pulse animation (legacy - kept for backwards compatibility) */
@keyframes pulse-purple {
    0% { transform: scale(1); box-shadow: 0 0 0 rgba(156, 39, 176, 0.5); }
    50% { transform: scale(1.1); box-shadow: 0 0 20px rgba(156, 39, 176, 0.8); }
    100% { transform: scale(1); box-shadow: 0 0 12px rgba(156, 39, 176, 0.5); }
}

/* Confirm All Button - Heirloom Goldenrod */
.confirm-all-btn {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    border: none;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-fast);
    box-shadow: 0 4px 12px rgba(217, 165, 32, 0.3);
}

.confirm-all-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(217, 165, 32, 0.4);
    background: #C4941D;
}

.confirm-all-btn:disabled {
    background: var(--color-secondary);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.ai-applied-banner {
    background: rgba(217, 165, 32, 0.1);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-md);
    padding: 15px;
    margin-bottom: 15px;
    text-align: center;
}

/* Face Box Overlay Styles */
.photo-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.face-box {
    position: absolute;
    border: 3px solid var(--color-secondary);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.face-box:hover {
    border-color: #FF9800;
    border-width: 4px;
    box-shadow: 0 4px 12px rgba(255,152,0,0.5);
    z-index: 100 !important; /* Bring to front when hovered - critical for overlapping faces */
}

.face-box.tagged {
    border-color: #2196F3;
}

.face-box.tagged:hover {
    border-color: #1976D2;
}

/* AI Suggestion - orange/yellow with subtle pulse to draw attention */
.face-box.ai-suggestion {
    border-color: #FF9800;
    border-width: 3px;
    box-shadow: 0 0 10px rgba(255, 152, 0, 0.6);
    animation: ai-pulse 2s ease-in-out infinite;
}

@keyframes ai-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 152, 0, 0.6); }
    50% { box-shadow: 0 0 20px rgba(255, 152, 0, 0.9); }
}

.face-box.ai-suggestion .face-box-label {
    background: linear-gradient(135deg, #FF9800, #F57C00);
}

.face-box.ai-suggestion:hover {
    border-width: 4px;
    box-shadow: 0 0 25px rgba(255, 152, 0, 0.9);
}

/* Confirmed by human - Goldenrod verified state */
.face-box.confirmed {
    border-color: var(--color-accent);
    border-width: 3px;
    box-shadow: 0 0 8px rgba(217, 165, 32, 0.5);
}

.face-box.confirmed .face-box-label {
    background: linear-gradient(135deg, var(--color-accent), #C4941D);
}

.face-box.confirmed:hover {
    border-color: #C4941D;
    box-shadow: 0 0 12px rgba(217, 165, 32, 0.7);
}

/* Ignored - gray/muted, indicates false positive or irrelevant face */
.face-box.ignored {
    border-color: #9e9e9e;
    border-width: 2px;
    border-style: dashed;
    opacity: 0.6;
    box-shadow: none;
}

.face-box.ignored .face-box-label {
    background: #757575;
}

.face-box.ignored:hover {
    opacity: 0.9;
    border-style: solid;
}

/* ============================================================================
   6-STATE UNIFIED TAXONOMY (Phase 1 - Dec 2025)

   States (in priority order):
   1. verified-trained - Gold + DOUBLE border (user confirmed + AWS indexed)
   2. verified         - Gold + single border (user confirmed, not indexed)
   3. recognized       - Everglade + single border (AI 95%+ confidence)
   4. suggested        - Amber + single border (AI 70-94% confidence)
   5. review           - Terracotta + single border (AI 1-69% confidence)
   6. untagged         - Gray + DASHED border (no match)
   ============================================================================ */

/* STATE 1: Verified & Trained (Gold + Double Border) - User confirmed + AWS indexed */
.face-box.verified-trained {
    border-color: var(--color-verified-trained);
    border-width: 3px;
    border-style: double;
    box-shadow: 0 0 10px rgba(217, 165, 32, 0.6);
}

.face-box.verified-trained .face-box-label,
.face-box-label.label-verified-trained {
    background: linear-gradient(135deg, var(--color-verified-trained), #C4941D);
}

.face-box.verified-trained:hover {
    border-color: #C4941D;
    box-shadow: 0 0 15px rgba(217, 165, 32, 0.8);
}

/* STATE 2: Verified (Gold + Single Border) - User confirmed, not indexed */
.face-box.verified,
.face-box.verified-only {
    border-color: var(--color-verified);
    border-width: 3px;
    border-style: solid;
    box-shadow: 0 0 8px rgba(217, 165, 32, 0.4);
}

.face-box.verified .face-box-label,
.face-box.verified-only .face-box-label,
.face-box-label.label-verified,
.face-box-label.label-verified-only {
    background: linear-gradient(135deg, var(--color-verified), #C4941D);
}

.face-box.verified:hover,
.face-box.verified-only:hover {
    border-color: #C4941D;
    box-shadow: 0 0 12px rgba(217, 165, 32, 0.6);
}

/* STATE 3: Recognized (Everglade + Single Border) - AI 95%+ confidence */
.face-box.recognized,
.face-box.ai-high {
    border-color: var(--color-recognized);
    border-width: 3px;
    border-style: solid;
    box-shadow: 0 0 10px rgba(33, 53, 53, 0.5);
    animation: ai-high-pulse 2s ease-in-out infinite;
}

@keyframes ai-high-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(33, 53, 53, 0.5); }
    50% { box-shadow: 0 0 18px rgba(217, 165, 32, 0.6); }
}

.face-box.recognized .face-box-label,
.face-box.ai-high .face-box-label,
.face-box-label.label-recognized,
.face-box-label.label-ai-high {
    background: linear-gradient(135deg, var(--color-recognized), #2A4444);
    color: var(--color-accent);
}

.face-box.recognized:hover,
.face-box.ai-high:hover {
    border-color: var(--color-accent);
    border-width: 4px;
    box-shadow: 0 0 20px rgba(217, 165, 32, 0.7);
}

/* STATE 4: Suggested (Amber + Single Border) - AI 70-94% confidence */
.face-box.suggested {
    border-color: var(--color-suggested);
    border-width: 3px;
    border-style: solid;
    box-shadow: 0 0 8px rgba(230, 168, 23, 0.5);
    animation: suggested-pulse 2.2s ease-in-out infinite;
}

@keyframes suggested-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(230, 168, 23, 0.5); }
    50% { box-shadow: 0 0 16px rgba(230, 168, 23, 0.7); }
}

.face-box.suggested .face-box-label,
.face-box-label.label-suggested {
    background: linear-gradient(135deg, var(--color-suggested), #CC9414);
}

.face-box.suggested:hover {
    border-color: #CC9414;
    border-width: 4px;
    box-shadow: 0 0 18px rgba(230, 168, 23, 0.8);
}

/* STATE 5: Review (Terracotta + Single Border) - AI 1-69% confidence */
.face-box.review,
.face-box.needs-review {
    border-color: var(--color-review);
    border-width: 3px;
    border-style: solid;
    box-shadow: 0 0 10px rgba(192, 87, 70, 0.5);
    animation: needs-review-pulse 2.5s ease-in-out infinite;
}

@keyframes needs-review-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(192, 87, 70, 0.5); }
    50% { box-shadow: 0 0 18px rgba(192, 87, 70, 0.8); }
}

.face-box.review .face-box-label,
.face-box.needs-review .face-box-label,
.face-box-label.label-review,
.face-box-label.label-needs-review {
    background: linear-gradient(135deg, var(--color-review), #A84A3D);
}

.face-box.review:hover,
.face-box.needs-review:hover {
    border-color: #A84A3D;
    border-width: 4px;
    box-shadow: 0 0 20px rgba(192, 87, 70, 0.9);
}

/* STATE 6: Untagged (Gray + Dashed Border) - No match */
.face-box.untagged,
.face-box.unmatched {
    border-color: var(--color-untagged);
    border-width: 2px;
    border-style: dashed;
    box-shadow: none;
}

.face-box.untagged:hover,
.face-box.unmatched:hover {
    border-color: #616161;
    border-style: solid;
    box-shadow: 0 0 8px rgba(97, 97, 97, 0.5);
}

/* Matched (legacy - keep for backwards compatibility) */
.face-box.matched {
    border-color: #FF9800;
    border-width: 3px;
}

/* STATE: Loading - Face detected, waiting for suggestion data */
.face-box.loading {
    border-color: var(--color-secondary);
    border-width: 2px;
    border-style: dashed;
    box-shadow: none;
    position: relative;
    overflow: visible;
}

.face-box.loading::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--color-accent);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--color-accent), 0 0 16px var(--color-accent);
    animation: trace-box 2s linear infinite;
    z-index: 10;
}

/* Ball traces clockwise around the bounding box rectangle */
@keyframes trace-box {
    0% {
        top: -4px;
        left: -4px;
    }
    25% {
        top: -4px;
        left: calc(100% - 4px);
    }
    50% {
        top: calc(100% - 4px);
        left: calc(100% - 4px);
    }
    75% {
        top: calc(100% - 4px);
        left: -4px;
    }
    100% {
        top: -4px;
        left: -4px;
    }
}

.face-box.loading .face-box-label {
    background: rgba(136, 136, 136, 0.7);
}

/* Small face indicator - face is too small for AI training */
.small-face-indicator {
    margin-left: 4px;
    font-size: 10px;
    cursor: help;
}

.face-box-label.small-face {
    background: rgba(97, 97, 97, 0.8);
    font-size: 10px;
    padding: 1px 6px;
}

.face-box-label {
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    white-space: nowrap;
    pointer-events: none;
}

.face-box.tagged .face-box-label {
    background: #2196F3;
}

.face-hint {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: #FF9800;
    color: white;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 10px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s;
}

.face-box:hover .face-hint {
    opacity: 1;
}

/* First-view pulse animation - draws attention to face boxes on first photo open */
@keyframes face-box-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(217, 165, 32, 0.7);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(217, 165, 32, 0);
        transform: scale(1.02);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(217, 165, 32, 0);
        transform: scale(1);
    }
}

.face-box.first-view {
    animation: face-box-pulse 0.8s ease-out;
}

/* Stagger animation for multiple faces */
.face-box.first-view:nth-child(2) { animation-delay: 0.15s; }
.face-box.first-view:nth-child(3) { animation-delay: 0.3s; }
.face-box.first-view:nth-child(4) { animation-delay: 0.45s; }
.face-box.first-view:nth-child(5) { animation-delay: 0.6s; }

.face-popup {
    position: absolute;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    padding: 15px;
    min-width: 250px;
    z-index: 1000;
    max-height: 350px;
    overflow-y: auto;
}

.face-popup-header {
    font-weight: bold;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.face-popup-close {
    cursor: pointer;
    font-size: 18px;
    color: #999;
}

.face-popup-close:hover {
    color: #333;
}

.face-popup-person {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.face-popup-person:hover {
    background: #f0f0f0;
}

.face-popup-person.selected {
    background: var(--color-accent);
    border: 1px solid var(--color-accent);
    color: var(--color-text-on-accent);
}

.face-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.face-detection-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f5f5f5;
    border-radius: 8px;
    margin-bottom: 10px;
}

/* Stats Grid - Sidebar variant */
.sidebar .stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.sidebar .stat-card {
    background: rgba(243, 240, 230, 0.08);
    padding: 16px;
    border-radius: var(--radius-sm);
    text-align: center;
}

.sidebar .stat-number {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-accent);
}

.sidebar .stat-label {
    color: rgba(243, 240, 230, 0.7);
    margin-top: 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Stats Grid - Content area variant */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--color-surface);
    padding: 20px;
    border-radius: var(--radius-md);
    text-align: center;
    box-shadow: var(--shadow-card);
}

.stat-number {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-accent);
}

.stat-label {
    color: var(--color-text-secondary);
    margin-top: 4px;
    font-size: 13px;
}

/* Progress Bar - Sidebar variant */
.sidebar .progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(243, 240, 230, 0.15);
    border-radius: var(--radius-full);
    margin: 16px 0;
    overflow: hidden;
}

.sidebar .progress-fill {
    height: 100%;
    background: var(--color-accent);
    width: 0%;
    transition: width 0.3s;
    border-radius: var(--radius-full);
}

/* Progress Bar - Content area */
.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(104, 134, 138, 0.2);
    border-radius: var(--radius-full);
    margin: 20px 0;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--color-accent);
    width: 0%;
    transition: width 0.3s;
    border-radius: var(--radius-full);
}

.story-content {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    line-height: 1.8;
    font-size: 16px;
}

.story-content h1 {
    color: #2c3e50;
    margin-bottom: 20px;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 10px;
}

.story-content h2 {
    color: #34495e;
    margin: 30px 0 15px 0;
}

.story-content h3 {
    color: var(--color-accent);
    margin: 20px 0 10px 0;
}

.story-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 10px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.story-content em {
    color: #666;
    font-style: italic;
}

.member-actions {
    display: flex;
    gap: 5px;
}

.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 5px;
    border-radius: 4px;
    transition: background 0.2s;
}

.icon-btn:hover {
    background: #e0e0e0;
}

.delete-photo-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--color-secondary);
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
    opacity: 1;
}

.delete-photo-btn:hover {
    background: var(--color-destructive);
    transform: scale(1.1);
}

.photo-card {
    position: relative;
}

.modal-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 0 24px;
}

.nav-btn {
    background: var(--color-canvas);
    border: 2px solid var(--color-secondary);
    border-radius: var(--radius-sm);
    padding: 8px 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-btn:hover:not(:disabled) {
    border-color: var(--color-accent);
    background: rgba(217, 165, 32, 0.1);
}

.nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

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

.nav-btn.primary:hover:not(:disabled) {
    background: #C4941D;
}

.photo-counter {
    font-size: 13px;
    color: var(--color-text-secondary);
    padding: 8px 16px;
    font-weight: 500;
}

.photo-section {
    margin-bottom: 30px;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(104, 134, 138, 0.2);
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-count {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    min-width: 24px;
    text-align: center;
}

.section-count.untagged {
    background: var(--color-secondary);
    color: white;
}

.empty-section {
    text-align: center;
    color: var(--color-text-secondary);
    font-style: italic;
    padding: 48px 24px;
    background: var(--color-canvas);
    border-radius: var(--radius-md);
    border: 2px dashed var(--color-secondary);
}

/* Pulse animation for indeterminate progress */
@keyframes pulse {
    0% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.6;
    }
}

/* Pulse-highlight animation for "Wrong Person" scroll target */
@keyframes pulse-highlight {
    0% {
        background-color: transparent;
        box-shadow: none;
    }
    25% {
        background-color: #fff3e0;
        box-shadow: 0 0 8px rgba(255, 152, 0, 0.5);
    }
    50% {
        background-color: #ffe0b2;
        box-shadow: 0 0 12px rgba(255, 152, 0, 0.7);
    }
    75% {
        background-color: #fff3e0;
        box-shadow: 0 0 8px rgba(255, 152, 0, 0.5);
    }
    100% {
        background-color: transparent;
        box-shadow: none;
    }
}

/* Notification animations */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* ========================================
   ANALYTICS DASHBOARD STYLES - Heirloom Gold Theme
   Clean Horizontal Bar Chart Design
   ======================================== */
.analytics-dashboard {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: 20px;
    margin: 20px 0;
    box-shadow: var(--shadow-card);
}

/* Analytics Grid Layout - 2x2 for equal cards, full width for wide cards */
.analytics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

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

/* Analytics Card - Base */
.analytics-card {
    background: var(--color-canvas);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid rgba(33, 53, 53, 0.08);
    transition: var(--transition-fast);
}

.analytics-card:hover {
    border-color: rgba(33, 53, 53, 0.15);
}

/* Wide card spans 2 columns */
.analytics-card-wide {
    grid-column: span 2;
}

@media (max-width: 768px) {
    .analytics-card-wide {
        grid-column: span 1;
    }
}

/* Full width card spans all columns */
.analytics-card-full {
    grid-column: 1 / -1;
}

/* Card Header - Collapsible */
.analytics-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
    user-select: none;
    transition: var(--transition-fast);
    background: transparent;
}

.analytics-card-header:hover {
    background: rgba(33, 53, 53, 0.03);
}

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

.analytics-card-title h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.analytics-card-count {
    font-size: 12px;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.analytics-card-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--color-text-secondary);
    transition: transform 0.2s ease;
}

/* Collapsed state */
.analytics-card.collapsed .analytics-card-content {
    max-height: 0;
    padding: 0 16px;
    opacity: 0;
    overflow: hidden;
}

.analytics-card.collapsed .analytics-card-chevron {
    transform: rotate(-90deg);
}

/* Has active filter - prevent collapse */
.analytics-card.has-active-filter .analytics-card-header {
    cursor: default;
}

.analytics-card.has-active-filter .analytics-card-chevron {
    opacity: 0.3;
}

.analytics-card.has-active-filter .analytics-card-title::after {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--color-accent);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

/* Card Content */
.analytics-card-content {
    padding: 0 16px 16px 16px;
    transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.2s ease;
    max-height: 500px;
    opacity: 1;
}

/* Scrollable content for long lists */
.analytics-card-scrollable {
    max-height: 280px;
    overflow-y: auto;
    padding-right: 8px;
}

.analytics-card-scrollable::-webkit-scrollbar {
    width: 6px;
}

.analytics-card-scrollable::-webkit-scrollbar-track {
    background: transparent;
}

.analytics-card-scrollable::-webkit-scrollbar-thumb {
    background: var(--color-secondary);
    border-radius: 3px;
}

.analytics-card-scrollable::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-secondary);
}

/* Clear Filter Button */
.clear-filter-btn {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    background: rgba(192, 87, 70, 0.1);
    color: var(--color-review);
    border: 1px solid var(--color-review);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}

.clear-filter-btn:hover {
    background: var(--color-review);
    color: white;
}

/* ========================================
   HORIZONTAL BAR CHART ROWS
   Futuristic clean design
   ======================================== */
.bar-chart-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bar-chart-row {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 6px 8px;
    margin: 0 -8px;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

.bar-chart-row:hover {
    background: rgba(33, 53, 53, 0.04);
}

.bar-chart-row.active {
    background: rgba(217, 165, 32, 0.1);
}

.bar-chart-label {
    min-width: 90px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.bar-chart-label-icon {
    font-size: 12px;
}

.bar-chart-track {
    flex: 1;
    height: 24px;
    background: rgba(33, 53, 53, 0.06);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.bar-chart-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    min-width: 2px;
}

/* Futuristic glow effect on bars */
.bar-chart-fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
    border-radius: 0 4px 4px 0;
}

.bar-chart-row:hover .bar-chart-fill::after {
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { opacity: 0.3; }
    50% { opacity: 0.6; }
    100% { opacity: 0.3; }
}

/* Bar colors by category */
.bar-chart-fill.verified { background: linear-gradient(90deg, var(--color-accent), #E5B93A); }
.bar-chart-fill.ai-high,
.bar-chart-fill.recognized { background: linear-gradient(90deg, var(--color-primary), #2A4545); }
.bar-chart-fill.needs-review,
.bar-chart-fill.review { background: linear-gradient(90deg, var(--color-review), #D06555); }
.bar-chart-fill.untagged { background: linear-gradient(90deg, #8A9A9C, #A0B0B2); }

/* Training tier colors */
.bar-chart-fill.training-none { background: linear-gradient(90deg, #9E9E9E, #BDBDBD); }
.bar-chart-fill.training-low { background: linear-gradient(90deg, var(--color-review), #D06555); }
.bar-chart-fill.training-medium { background: linear-gradient(90deg, var(--color-primary), #2A4545); }
.bar-chart-fill.training-optimal { background: linear-gradient(90deg, var(--color-accent), #E5B93A); }

.bar-chart-count {
    min-width: 45px;
    text-align: right;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

/* ========================================
   PERSON STACKED BAR CHART
   Shows person with stacked status segments
   ======================================== */
.person-bar-chart {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.person-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.person-bar-name {
    min-width: 100px;
    max-width: 120px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.person-bar-track {
    flex: 1;
    height: 20px;
    background: rgba(33, 53, 53, 0.06);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    position: relative;
}

.person-bar-segment {
    height: 100%;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.2s ease;
    position: relative;
}

.person-bar-segment:hover {
    filter: brightness(1.15);
    transform: scaleY(1.1);
    z-index: 1;
}

.person-bar-segment.verified { background: var(--color-accent); }
.person-bar-segment.ai-auto,
.person-bar-segment.recognized { background: var(--color-primary); }
.person-bar-segment.legacy { background: var(--color-secondary); }
.person-bar-segment.review { background: var(--color-review); }

.person-bar-count {
    min-width: 40px;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

/* ========================================
   TRAINING BAR CHART (Photos Training AI)
   ======================================== */
.training-bar-chart {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.training-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 4px 8px;
    margin: 0 -8px;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

.training-bar-row:hover {
    background: rgba(33, 53, 53, 0.04);
}

.training-bar-name {
    min-width: 100px;
    max-width: 120px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.training-bar-track {
    flex: 1;
    height: 18px;
    background: rgba(33, 53, 53, 0.06);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

/* Tier markers on track */
.training-bar-track::before {
    content: '';
    position: absolute;
    left: 50%; /* 5 photos marker at 50% of 10 max */
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(33, 53, 53, 0.15);
    z-index: 1;
}

.training-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.training-bar-count {
    min-width: 35px;
    text-align: right;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.training-bar-tier {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
    font-weight: 500;
    white-space: nowrap;
}

.training-bar-tier.tier-none {
    background: rgba(158, 158, 158, 0.15);
    color: #757575;
}

.training-bar-tier.tier-low {
    background: rgba(192, 87, 70, 0.15);
    color: var(--color-review);
}

.training-bar-tier.tier-medium {
    background: rgba(33, 53, 53, 0.15);
    color: var(--color-primary);
}

.training-bar-tier.tier-optimal {
    background: rgba(217, 165, 32, 0.15);
    color: #B8890A;
}

/* ========================================
   DECADE BAR CHART (Timeline)
   ======================================== */
.decade-bar-chart {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.decade-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 6px 8px;
    margin: 0 -8px;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

.decade-bar-row:hover {
    background: rgba(33, 53, 53, 0.04);
}

.decade-bar-row.active {
    background: rgba(217, 165, 32, 0.1);
}

.decade-bar-row.expanded {
    margin-bottom: 4px;
}

.decade-bar-label {
    min-width: 70px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.decade-bar-track {
    flex: 1;
    height: 22px;
    background: rgba(33, 53, 53, 0.06);
    border-radius: 4px;
    overflow: hidden;
}

.decade-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), #2A4545);
    border-radius: 4px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.decade-bar-fill.unknown {
    background: linear-gradient(90deg, #9E9E9E, #BDBDBD);
}

.decade-bar-count {
    min-width: 40px;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

/* Year sub-rows (when decade is expanded) */
.year-bar-rows {
    margin-left: 20px;
    padding-left: 12px;
    border-left: 2px solid rgba(33, 53, 53, 0.1);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.year-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 4px 8px;
    margin: 0 -8px;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

.year-bar-row:hover {
    background: rgba(33, 53, 53, 0.04);
}

.year-bar-row.active {
    background: rgba(217, 165, 32, 0.15);
}

.year-bar-label {
    min-width: 50px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.year-bar-track {
    flex: 1;
    height: 14px;
    background: rgba(33, 53, 53, 0.04);
    border-radius: 3px;
    overflow: hidden;
}

.year-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent), #E5B93A);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.year-bar-count {
    min-width: 30px;
    text-align: right;
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

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

.analytics-header h3 {
    font-size: 16px;
    color: var(--color-text-primary);
    margin: 0;
    font-weight: 600;
}

.analytics-total {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* ========================================
   COLLAPSIBLE FILTER SECTIONS
   ======================================== */
.filter-section {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.filter-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.filter-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 8px 0;
    user-select: none;
    transition: var(--transition-fast);
}

.filter-section-header:hover {
    opacity: 0.8;
}

.filter-section-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.filter-section-title-row h3,
.filter-section-title-row h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.filter-section-title-row h3 {
    font-size: 16px;
}

.section-count-badge {
    background: var(--color-surface);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    color: var(--color-text-secondary);
}

.filter-section-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--color-text-secondary);
    transition: transform 0.2s ease;
}

.filter-section-content {
    padding-top: 12px;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease;
}

/* Collapsed State */
.filter-section.collapsed .filter-section-content {
    max-height: 0;
    padding-top: 0;
    opacity: 0;
}

.filter-section.collapsed .filter-section-chevron {
    transform: rotate(-90deg);
}

/* Active Filter Lock - prevent collapsing when filter is active */
.filter-section.has-active-filter .filter-section-chevron {
    opacity: 0.3;
    cursor: not-allowed;
}

.filter-section.has-active-filter .filter-section-header {
    cursor: default;
}

/* Active indicator dot on section header */
.filter-section.has-active-filter .filter-section-title-row::after {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--color-accent);
    border-radius: 50%;
    margin-left: 4px;
}

/* ========================================
   FACE RECOGNITION STATUS PILLS
   ======================================== */
.face-status-pills {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.face-status-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 2px solid var(--color-border);
    position: relative;
    transition: var(--transition-fast);
}

.face-status-pill:hover {
    border-color: var(--color-text-secondary);
}

.face-status-pill.verified {
    border-color: var(--color-accent);
}

.face-status-pill.ai-high {
    border-color: var(--color-primary);
}

.face-status-pill.needs-review {
    border-color: var(--color-review);
}

.face-status-pill .pill-progress-ring {
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: conic-gradient(
        currentColor calc(var(--progress, 0) * 1%),
        transparent calc(var(--progress, 0) * 1%)
    );
    opacity: 0.15;
    pointer-events: none;
}

.face-status-pill .pill-icon {
    font-size: 14px;
}

.face-status-pill .pill-count {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.face-status-pill .pill-label {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.face-status-empty {
    color: var(--color-text-secondary);
    font-size: 13px;
    padding: 8px 0;
}

/* ========================================
   TRAINING PILLS (Photos Training AI)
   ======================================== */
.training-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.training-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    transition: var(--transition-fast);
    cursor: default;
}

.training-pill-name {
    font-weight: 500;
    color: inherit;
}

.training-pill-count {
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.2);
    font-size: 11px;
}

/* Training tier: Not started (0 photos) */
.training-pill.training-none {
    background: transparent;
    border: 2px dashed var(--color-border);
    color: var(--color-text-secondary);
}

.training-pill.training-none .training-pill-count {
    background: var(--color-surface);
}

/* Training tier: Low (1-4 photos) - Terracotta */
.training-pill.training-low {
    background: var(--color-review);
    color: #fff;
    border: 2px solid var(--color-review);
}

/* Training tier: Medium (5-9 photos) - Everglade */
.training-pill.training-medium {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    border: 2px solid var(--color-primary);
}

/* Training tier: Optimal (10+ photos) - Gold */
.training-pill.training-optimal {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    border: 2px solid var(--color-accent);
}

.training-empty {
    color: var(--color-text-secondary);
    font-size: 13px;
    padding: 8px 0;
}

/* ========================================
   SEGMENTED CONTROL / FILTER BAR - Heirloom Style
   ======================================== */
.filter-tabs {
    display: flex;
    gap: 8px;
    padding: 4px;
    background: var(--color-canvas);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
}

.filter-tab {
    padding: 10px 20px;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
}

.filter-tab:hover {
    background: var(--color-surface);
    color: var(--color-text-primary);
}

.filter-tab.active {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    font-weight: 600;
}

.filter-tab.inactive {
    background: transparent;
    border-color: var(--color-secondary);
    color: var(--color-text-secondary);
}

/* Horizontal Bar Chart */
.confidence-bar-container {
    margin-bottom: 20px;
}

.confidence-bar {
    display: flex;
    height: 40px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-canvas);
}

.confidence-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
    min-width: 0;
    position: relative;
    overflow: hidden;
}

.confidence-segment:hover {
    filter: brightness(1.1);
    transform: scaleY(1.05);
}

.confidence-segment.active {
    box-shadow: inset 0 0 0 3px rgba(33, 53, 53, 0.4);
}

.confidence-segment.empty {
    cursor: default;
}

.confidence-segment.empty:hover {
    filter: none;
    transform: none;
}

.segment-label {
    font-size: 12px;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    white-space: nowrap;
    padding: 0 8px;
}

/* Heirloom-themed Segment Colors - Photo Tagging Status */
/* All segments have white text for readability on colored backgrounds */
.segment-verified {
    background: linear-gradient(135deg, var(--color-accent), #C4941D);
    color: #ffffff;
}
.segment-recognized,
.segment-ai-high {
    background: linear-gradient(135deg, var(--color-primary), #2A4444);
    color: #ffffff;  /* White text on Everglade */
}
.segment-review,
.segment-needs-review {
    background: linear-gradient(135deg, var(--color-review), #A84A3D);
    color: #ffffff;
}
.segment-untagged {
    background: linear-gradient(135deg, #9E9E9E, #757575);
    color: #ffffff;
}

/* =============================================================================
   STATUS TABS - Segmented filter chips for photo status
   ============================================================================= */
.status-tabs-container {
    margin-bottom: 20px;
}

.status-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.status-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    border-radius: var(--radius-full);
    background: var(--color-canvas);
    color: var(--color-primary);
    cursor: pointer;
    transition: var(--transition-fast);
    --progress: 0;
    --ring-color: var(--color-secondary);
    z-index: 1;
}

/* Progress ring background using conic-gradient */
.status-tab::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-full);
    padding: 3px;
    background: conic-gradient(
        from -90deg,
        var(--ring-color) calc(var(--progress) * 3.6deg),
        rgba(0, 0, 0, 0.15) calc(var(--progress) * 3.6deg)
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    pointer-events: none;
}

/* Specific ring colors per category */
.status-tab.verified { --ring-color: var(--color-accent); }
.status-tab.recognized,
.status-tab.ai-high { --ring-color: var(--color-primary); }
.status-tab.review,
.status-tab.needs-review { --ring-color: var(--color-review); }
.status-tab.untagged { --ring-color: var(--color-untagged); }
.status-tab[data-filter="all"] { --ring-color: var(--color-primary); --progress: 100; }

.status-tab:hover {
    background: var(--color-canvas);
    color: var(--color-primary);
}

.status-tab.active {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
}

.status-tab.active::before {
    background: var(--ring-color);
}

.status-tab.verified.active {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
}

.status-tab.recognized.active,
.status-tab.ai-high.active {
    background: var(--color-primary);
    color: var(--color-accent);
}

.status-tab.review.active,
.status-tab.needs-review.active {
    background: var(--color-review);
    color: var(--color-text-primary);
}

.status-tab.untagged.active {
    background: var(--color-secondary);
    color: white;
}

.tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.1);
}

.status-tab.active .tab-count {
    background: rgba(255, 255, 255, 0.25);
}

/* Legacy Legend (hidden but kept for backwards compatibility) */
.confidence-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
    border: 1px solid transparent;
}

.legend-item:hover {
    background: var(--color-canvas);
    border-color: var(--color-secondary);
}

.legend-item.active {
    background: rgba(217, 165, 32, 0.15);
    border-color: var(--color-accent);
    color: var(--color-text-primary);
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

/* Heirloom-themed Legend Dots */
.legend-dot.verified { background: var(--color-accent); }
.legend-dot.ai-high { background: var(--color-primary); }
.legend-dot.needs-review { background: var(--color-secondary); }
.legend-dot.untagged { background: #9E9E9E; }

/* Person Filter Pills */
.person-filter-section {
    border-top: 1px solid rgba(104, 134, 138, 0.2);
    padding-top: 16px;
    margin-top: 16px;
}

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

.person-filter-header h4 {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
    font-weight: 600;
}

.clear-filter-btn {
    font-size: 12px;
    color: var(--color-accent);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}

.clear-filter-btn:hover {
    background: rgba(217, 165, 32, 0.15);
}

.person-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.person-filter-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 20px;
    border: 2px solid var(--color-secondary);
    background: var(--color-canvas);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
}

.person-filter-pill:hover {
    border-color: var(--color-accent);
    background: rgba(217, 165, 32, 0.1);
}

.person-filter-pill.active {
    border-color: var(--color-accent);
    background: rgba(217, 165, 32, 0.2);
}

.person-filter-pill .person-name {
    font-weight: 500;
    color: var(--color-primary);
}

.person-filter-pill .person-counts {
    display: flex;
    gap: 4px;
    font-size: 11px;
}

/* VERIFIED count badge - Gold bg, dark text */
.person-filter-pill .count-confirmed,
.person-filter-pill .count-verified {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    padding: 2px 6px;
    border-radius: 10px;
    border: 1px solid var(--color-accent);
    font-weight: 600;
}

/* RECOGNIZED count badge - Dark bg, gold text */
.person-filter-pill .count-ai,
.person-filter-pill .count-recognized {
    background: var(--color-primary);
    color: var(--color-accent);
    padding: 2px 6px;
    border-radius: 10px;
    border: 1px solid var(--color-primary);
    font-weight: 600;
}

/* REVIEW count badge - Terracotta bg, dark text */
.person-filter-pill .count-review {
    background: var(--color-review);
    color: var(--color-text-primary);
    padding: 2px 6px;
    border-radius: 10px;
    border: 1px solid var(--color-review);
    font-weight: 600;
}

/* Legacy manual tag count */
.person-filter-pill .count-legacy {
    background: rgba(104, 134, 138, 0.15);
    color: var(--color-secondary);
    padding: 2px 6px;
    border-radius: 10px;
}

/* Combined recognized count - updated style */
.person-filter-pill .person-count {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 12px;
}

/* Review dot - shows when person has faces needing review */
.person-filter-pill .review-dot {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 10px;
    height: 10px;
    background: var(--color-review);
    border-radius: 50%;
    border: 2px solid var(--color-canvas);
}

.person-filter-pill {
    position: relative;
}

.person-filter-pill.has-review {
    border-color: var(--color-review);
}

.person-filter-pill.has-review:hover .review-dot::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-review);
    color: #fff;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    white-space: nowrap;
    margin-bottom: 4px;
}

/* Multi-person filter mode toggle */
.person-filter-mode-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid;
    margin-left: 4px;
}

/* ANY mode - default, more permissive */
.person-filter-mode-toggle.any {
    background: rgba(217, 165, 32, 0.15);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.person-filter-mode-toggle.any:hover {
    background: rgba(217, 165, 32, 0.25);
}

/* ALL mode - more restrictive, different color */
.person-filter-mode-toggle.all {
    background: rgba(76, 175, 80, 0.15);
    border-color: #4CAF50;
    color: #4CAF50;
}

.person-filter-mode-toggle.all:hover {
    background: rgba(76, 175, 80, 0.25);
}

/* Decade Filter Section */
.decade-filter-section {
    border-top: 1px solid rgba(104, 134, 138, 0.2);
    padding-top: 16px;
    margin-top: 16px;
}

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

.decade-filter-header h4 {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
    font-weight: 600;
}

.decade-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.decade-filter-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 20px;
    border: 2px solid var(--color-secondary);
    background: var(--color-canvas);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
}

.decade-filter-pill:hover {
    border-color: var(--color-accent);
    background: rgba(217, 165, 32, 0.1);
}

.decade-filter-pill.active {
    border-color: var(--color-accent);
    background: rgba(217, 165, 32, 0.2);
}

.decade-filter-pill .decade-label {
    font-weight: 500;
    color: var(--color-primary);
}

.decade-filter-pill .decade-count {
    background: var(--color-primary);
    color: var(--color-accent);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.decade-filter-pill.active .decade-count {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
}

/* Decade filter wrapper for expandable years */
.decade-filter-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.decade-filter-wrapper.expanded {
    background: rgba(217, 165, 32, 0.05);
    border-radius: 12px;
    padding: 8px;
    margin: -4px;
}

/* Year filter pills (nested under decade) */
.year-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-left: 8px;
    margin-top: 4px;
}

.year-filter-pill {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 14px;
    border: 1.5px solid var(--color-secondary);
    background: var(--color-canvas);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 12px;
}

.year-filter-pill:hover {
    border-color: var(--color-accent);
    background: rgba(217, 165, 32, 0.1);
}

.year-filter-pill.active {
    border-color: var(--color-accent);
    background: rgba(217, 165, 32, 0.25);
}

.year-filter-pill .year-label {
    font-weight: 500;
    color: var(--color-primary);
}

.year-filter-pill .year-count {
    background: rgba(104, 134, 138, 0.3);
    color: var(--color-text-primary);
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
}

.year-filter-pill.active .year-count {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
}

/* Active filter indicator */
.filter-active-indicator {
    display: none;
    background: var(--color-canvas);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-sm);
    padding: 10px 15px;
    margin-bottom: 15px;
    align-items: center;
    justify-content: space-between;
}

.filter-active-indicator.visible {
    display: flex;
}

.filter-active-indicator span {
    color: var(--color-primary);
    font-size: 14px;
}

.filter-active-indicator button {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    border: none;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
}

.filter-active-indicator button:hover {
    background: #C4941D;
}

/* =============================================================
   SORT CONTROLS
   ============================================================= */
.sort-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.sort-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.sort-controls select {
    padding: 8px 12px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-canvas);
    color: var(--color-text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
}

.sort-controls select:hover {
    border-color: var(--color-accent);
}

.sort-controls select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(217, 165, 32, 0.2);
}

.sort-direction-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-canvas);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
}

.sort-direction-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.sort-direction-btn svg {
    transition: transform 0.2s ease;
}

/* =============================================================
   ADDITIONAL STYLES (previously inline in body)
   ============================================================= */
.detail-section {
    margin-bottom: 20px;
}

.detail-section h4 {
    font-size: 14px;
    font-weight: 600;
    color: #666;
    margin-bottom: 8px;
}

.detail-text {
    font-size: 15px;
    color: #333;
    margin: 0;
}

.tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-container .empty-state {
    color: #999;
    font-style: italic;
}

.tag-container .tag {
    background: #e8f4f9;
    color: #0066cc;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 14px;
}

.upload-date-group {
    margin-bottom: 30px;
}

.date-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e0e0e0;
}

.date-header h3 {
    margin: 0;
    color: #333;
    font-size: 18px;
}

.photo-count {
    background: #f0f0f0;
    color: #666;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
}

.training-status {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(255, 255, 255, 0.9);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 16px;
    z-index: 1;
}

.photo-card.trained {
    opacity: 0.7;
    border: 2px solid #4caf50;
}

.photo-card.trained:hover {
    opacity: 1;
}

/* Training Wizard Styles */
.training-wizard-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}

.training-wizard-card {
    background: white;
    border-radius: 16px;
    padding: 30px;
    max-width: 700px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    animation: wizardSlideIn 0.3s ease-out;
}

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

.training-wizard-header {
    margin-bottom: 25px;
}

.training-wizard-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.training-wizard-title-row > div:first-child {
    flex: 1;
}

.training-wizard-header h2 {
    color: var(--color-text-primary);
    margin-bottom: 8px;
    font-size: 22px;
}

.training-wizard-header p {
    color: var(--color-text-secondary);
    font-size: 14px;
}

/* Tools Dropdown */
.tools-dropdown-container {
    position: relative;
    flex-shrink: 0;
}

.tools-dropdown-btn {
    padding: 8px 16px;
    font-size: 13px;
    white-space: nowrap;
}

.tools-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--color-surface);
    border: 2px solid var(--color-secondary);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    min-width: 220px;
    z-index: 100;
    overflow: hidden;
}

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

.tools-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    text-align: left;
    font-size: 13px;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: var(--transition-fast);
}

.tools-dropdown-item:hover {
    background: var(--color-canvas);
}

.tools-dropdown-item:not(:last-child) {
    border-bottom: 1px solid rgba(104, 134, 138, 0.15);
}

.tools-icon {
    font-size: 14px;
}

/* Training Wizard Footer */
.training-wizard-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(104, 134, 138, 0.2);
}

.person-training-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    border: 2px solid transparent;
    transition: all 0.3s;
}

.person-training-card.ready {
    border-color: var(--color-accent);
    background: rgba(217, 165, 32, 0.1);
}

.person-training-card.in-progress {
    border-color: #FF9800;
    background: #fff3e0;
}

.person-training-card.needs-photos {
    border-color: #f44336;
    background: #ffebee;
}

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

.person-training-name {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
}

.person-training-status {
    font-size: 14px;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 500;
}

.person-training-status.ready {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
}

.person-training-status.in-progress {
    background: #FF9800;
    color: white;
}

.person-training-status.needs-photos {
    background: #f44336;
    color: white;
}

.training-progress-bar {
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.training-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent), #E8C547);
    transition: width 0.5s ease;
}

.training-progress-fill.in-progress {
    background: linear-gradient(90deg, #FF9800, #FFC107);
}

.training-progress-text {
    font-size: 13px;
    color: #666;
    display: flex;
    justify-content: space-between;
}

.train-person-btn {
    background: #2196F3;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
    margin-top: 10px;
}

.train-person-btn:hover {
    background: #1976D2;
}

.train-person-btn.ready {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
}

/* Member training indicator in sidebar */
.member-photo-count {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
}

.member-photo-count.ready {
    background: rgba(217, 165, 32, 0.15);
    color: var(--color-accent);
}

.member-photo-count.in-progress {
    background: #fff3e0;
    color: #e65100;
}

.member-photo-count.needs-photos {
    background: #ffebee;
    color: #c62828;
}

/* Celebration animation */
@keyframes celebratePop {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

.celebration-badge {
    animation: celebratePop 0.5s ease-out;
    display: inline-block;
}

/* ========== Match Celebration Toast ========== */
.match-celebration-toast {
    display: none;
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
    border: 2px solid #ffc107;
    border-radius: 12px;
    padding: 14px 20px;
    margin-bottom: 16px;
    animation: toastSlideIn 0.4s ease-out, goldPulse 2s ease-in-out;
    box-shadow: 0 4px 20px rgba(255, 193, 7, 0.3);
    position: relative;
    overflow: hidden;
}

.match-celebration-toast.show {
    display: flex;
    align-items: center;
    gap: 12px;
}

.match-celebration-toast .toast-icon {
    font-size: 28px;
    animation: celebratePop 0.5s ease-out 0.2s both;
}

.match-celebration-toast .toast-content {
    flex: 1;
}

.match-celebration-toast .toast-title {
    font-size: 16px;
    font-weight: 700;
    color: #e65100;
    margin: 0 0 4px 0;
}

.match-celebration-toast .toast-subtitle {
    font-size: 13px;
    color: #795548;
    margin: 0;
}

.match-celebration-toast .toast-action {
    background: #ff9800;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.match-celebration-toast .toast-action:hover {
    background: #f57c00;
    transform: scale(1.05);
}

.match-celebration-toast .toast-dismiss {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    font-size: 18px;
    color: #bbb;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.match-celebration-toast .toast-dismiss:hover {
    color: #666;
}

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

@keyframes goldPulse {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(255, 193, 7, 0.3);
    }
    50% {
        box-shadow: 0 4px 30px rgba(255, 193, 7, 0.6);
    }
}

/* Golden flash on photo container */
@keyframes goldenFlash {
    0% {
        box-shadow: inset 0 0 0 0 rgba(255, 193, 7, 0);
    }
    30% {
        box-shadow: inset 0 0 60px 20px rgba(255, 193, 7, 0.4);
    }
    100% {
        box-shadow: inset 0 0 0 0 rgba(255, 193, 7, 0);
    }
}

.photo-container.golden-flash {
    animation: goldenFlash 1s ease-out;
}

.training-tip {
    background: #e3f2fd;
    border-left: 4px solid #2196F3;
    padding: 12px 16px;
    margin: 15px 0;
    border-radius: 0 8px 8px 0;
    font-size: 14px;
    color: #1565c0;
}

.training-tip strong {
    display: block;
    margin-bottom: 4px;
}

/* =============================================================================
   LIVE PHOTO - Harry Potter style animated photos
   ============================================================================= */

.live-photo-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    right: auto;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 14px;
    padding: 4px 6px;
    border-radius: 4px;
    z-index: 5;
    pointer-events: none;
}

.photo-card .live-photo-badge {
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.photo-card:hover .live-photo-badge {
    opacity: 1;
}

/* Live photo video overlay */
.live-photo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.live-photo-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.live-photo-loader {
    font-size: 32px;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
}

/* =========================================
   Authentication Modal
   ========================================= */

.auth-tab {
    flex: 1;
    padding: 14px 20px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.auth-tab:hover {
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.auth-tab.active {
    color: var(--color-accent);
    background: var(--color-surface);
}

.auth-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-accent);
}

#authModal .modal-content {
    position: relative;
}

#authModal input:focus {
    border-color: var(--color-accent);
    outline: none;
    box-shadow: 0 0 0 2px rgba(217, 165, 32, 0.15);
}

#authModal button[type="submit"]:hover {
    filter: brightness(1.1);
}

#authModal button[type="submit"]:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ============================================================================
   RESPONSIVE DESIGN - MAIN APP
   ============================================================================ */

/* Tablet breakpoint (1024px) */
@media (max-width: 1024px) {
    .main-grid {
        grid-template-columns: 240px 1fr;
        gap: 16px;
    }

    .sidebar {
        padding: 20px;
    }

    .content-area {
        padding: 20px;
    }

    .tab {
        padding: 14px 16px;
        font-size: 13px;
    }

    .header-content {
        padding: 16px 20px;
    }

    .header-content img {
        height: 50px;
    }
}

/* Mobile breakpoint (768px) - Sidebar collapses */
@media (max-width: 768px) {
    .container {
        padding: 0 12px 12px;
    }

    .main-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Hide sidebar on mobile by default */
    .sidebar {
        display: none;
    }

    /* Show sidebar when toggled */
    .sidebar.mobile-open {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        border-radius: 0;
        overflow-y: auto;
        padding: 80px 20px 20px;
    }

    .content-area {
        padding: 16px;
        border-radius: var(--radius-md);
    }

    /* Header adjustments */
    .header-content {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 12px;
    }

    .header-content img {
        height: 42px;
    }

    .header-content > div {
        gap: 8px !important;
    }

    /* Mode toggle on mobile */
    .mode-toggle {
        display: none;
    }

    /* Header buttons - icon only on mobile */
    .header-train-ai-btn,
    .header-upload-btn {
        padding: 10px 12px;
        font-size: 0;
        gap: 0;
    }

    .header-train-ai-btn svg,
    .header-upload-btn svg {
        width: 20px;
        height: 20px;
    }

    /* Tab navigation - horizontal scroll */
    .tab-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 8px;
        margin-bottom: 20px;
        padding-bottom: 8px;
    }

    .tab-nav::-webkit-scrollbar {
        display: none;
    }

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

    /* Photo grid */
    .photo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    /* Upload container */
    .uploaded-photos-container {
        gap: 16px;
    }

    /* Stats grid */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    /* Modals */
    .modal-content {
        width: 95%;
        max-width: none;
        margin: 10px;
        max-height: 90vh;
        overflow-y: auto;
    }

    .modal-header {
        padding: 16px;
    }

    .modal-body {
        padding: 16px;
    }

    .modal-footer {
        padding: 16px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .modal-footer .btn {
        flex: 1;
        min-width: 120px;
    }

    /* Form groups */
    .form-group {
        margin-bottom: 16px;
    }

    .input-group {
        margin-bottom: 16px;
    }

    /* Sort controls */
    .sort-controls {
        flex-wrap: wrap;
        gap: 8px;
    }

    .sort-controls select {
        flex: 1;
        min-width: 140px;
    }

    /* Timeline */
    .timeline-container {
        padding-left: 20px;
    }

    .timeline-item {
        margin-left: 20px;
    }

    /* Face boxes */
    .face-tag-popup {
        width: 90vw;
        max-width: 300px;
    }
}

/* Small mobile (480px) */
@media (max-width: 480px) {
    .container {
        padding: 0 8px 8px;
    }

    header {
        margin-bottom: 12px;
    }

    .header-content {
        padding: 10px 12px;
    }

    .header-content img {
        height: 36px;
    }

    .content-area {
        padding: 12px;
    }

    .tab {
        padding: 10px 12px;
        font-size: 11px;
        letter-spacing: 0.5px;
    }

    /* Photo grid - single column on very small screens */
    .photo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    /* Analytics grid */
    .analytics-grid {
        gap: 12px;
    }

    /* Upload date groups */
    .upload-date-header h3 {
        font-size: 14px;
    }

    /* Progress container */
    #uploadProgressContainer {
        padding: 12px;
        margin: 12px 0;
    }

    /* Buttons */
    .btn {
        padding: 10px 16px;
        font-size: 13px;
    }

    /* Modals */
    .modal-content {
        margin: 8px;
    }

    .modal-header h2 {
        font-size: 18px;
    }

    /* Photo modal */
    #photoModal .modal-content {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
        margin: 0;
    }
}

/* Mobile menu toggle button - Dark header compatible */
.mobile-sidebar-toggle {
    display: none;
    background: transparent;
    color: #a1a1aa;  /* text-zinc-400 */
    border: none;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: color 0.2s ease;
}

.mobile-sidebar-toggle:hover {
    color: #ffffff;  /* text-white */
}

@media (max-width: 768px) {
    .mobile-sidebar-toggle {
        display: flex;
        align-items: center;
        gap: 6px;
    }
}

/* Close button for mobile sidebar */
.mobile-sidebar-close {
    display: none;
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1001;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--color-accent);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
}

.sidebar.mobile-open ~ .mobile-sidebar-close,
.sidebar.mobile-open + .mobile-sidebar-close {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =============================================================================
   SKELETON LOADING STATES
   ============================================================================= */

/* Shimmer Animation */
@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Base Skeleton Style */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-canvas) 0%,
        rgba(255, 255, 255, 0.5) 50%,
        var(--color-canvas) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

/* Dark Theme Skeleton */
.dark .skeleton,
.dashboard-body .skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 100%
    );
    background-size: 200% 100%;
}

/* Skeleton Variants */
.skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
}

.skeleton-text-sm {
    height: 0.75em;
    width: 60%;
}

.skeleton-text-lg {
    height: 1.5em;
    width: 80%;
}

.skeleton-title {
    height: 2em;
    width: 50%;
    margin-bottom: 1em;
}

.skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
}

.skeleton-avatar-sm {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
}

.skeleton-avatar-lg {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
}

.skeleton-image {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
}

.skeleton-image-wide {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
}

.skeleton-card {
    padding: 20px;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.skeleton-card-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Photo Grid Skeleton */
.skeleton-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.skeleton-photo-item {
    aspect-ratio: 1;
    border-radius: var(--radius-md);
}

/* Family Card Skeleton */
.skeleton-family-card {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}

.skeleton-family-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}

/* Timeline Skeleton */
.skeleton-timeline {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 20px;
}

.skeleton-timeline-year {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.skeleton-timeline-header {
    height: 2em;
    width: 120px;
}

.skeleton-timeline-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

/* Stats Skeleton */
.skeleton-stat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.skeleton-stat-value {
    height: 2.5em;
    width: 60px;
}

.skeleton-stat-label {
    height: 0.875em;
    width: 80px;
}

/* Button Skeleton */
.skeleton-button {
    height: 44px;
    width: 120px;
    border-radius: var(--radius-full);
}

.skeleton-button-sm {
    height: 36px;
    width: 80px;
    border-radius: var(--radius-full);
}

/* List Skeleton */
.skeleton-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.skeleton-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius-sm);
}

.skeleton-list-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Pulse Animation Alternative (for simpler elements) */
@keyframes skeleton-pulse {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.8;
    }
}

.skeleton-pulse {
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    background: var(--color-secondary);
    border-radius: var(--radius-sm);
}

/* =============================================================================
   EMPTY STATE COMPONENTS
   ============================================================================= */

/* Base Empty State Container */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 30px;
    min-height: 300px;
}

.empty-state-compact {
    padding: 40px 20px;
    min-height: 200px;
}

/* Empty State Icon */
.empty-state-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 24px;
    color: var(--color-secondary);
    opacity: 0.6;
}

.empty-state-icon svg {
    width: 100%;
    height: 100%;
}

/* Emoji-based Icon Alternative */
.empty-state-emoji {
    font-size: 64px;
    margin-bottom: 24px;
    opacity: 0.8;
}

.empty-state-compact .empty-state-emoji {
    font-size: 48px;
    margin-bottom: 16px;
}

/* Empty State Content */
.empty-state-title {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 12px;
}

.empty-state-compact .empty-state-title {
    font-size: 1.25em;
}

.empty-state-description {
    font-size: 1em;
    color: var(--color-text-secondary);
    max-width: 400px;
    margin-bottom: 24px;
    line-height: 1.6;
}

.empty-state-compact .empty-state-description {
    font-size: 0.9em;
    margin-bottom: 16px;
}

/* Empty State Actions */
.empty-state-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.empty-state-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.95em;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
}

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

.empty-state-btn-primary:hover {
    background: var(--color-accent-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-accent);
}

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

.empty-state-btn-secondary:hover {
    background: var(--color-accent-light);
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* Dark Theme Empty States */
.dark .empty-state,
.dashboard-body .empty-state {
    --color-text-primary: #F3F0E6;
    --color-text-secondary: #B8B5AA;
}

/* Specific Empty State Variants */

/* No Photos */
.empty-state-photos .empty-state-icon {
    background: var(--color-accent-light);
    border-radius: var(--radius-lg);
    padding: 20px;
}

/* No Families */
.empty-state-families .empty-state-icon {
    background: linear-gradient(135deg, var(--color-accent-light) 0%, rgba(217, 165, 32, 0.05) 100%);
    border-radius: 50%;
    padding: 24px;
}

/* No Results (Search) */
.empty-state-search {
    padding: 40px 20px;
}

.empty-state-search .empty-state-title {
    font-size: 1.25em;
}

/* No People Tagged */
.empty-state-people .empty-state-icon {
    display: flex;
    gap: -10px;
}

.empty-state-people .empty-state-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-secondary);
    opacity: 0.4;
    border: 2px solid var(--color-surface);
}

.empty-state-people .empty-state-avatar:nth-child(2) {
    margin-left: -15px;
}

.empty-state-people .empty-state-avatar:nth-child(3) {
    margin-left: -15px;
}

/* Error State */
.empty-state-error {
    --accent-color: var(--color-error);
}

.empty-state-error .empty-state-icon {
    color: var(--color-error);
    opacity: 0.8;
}

.empty-state-error .empty-state-title {
    color: var(--color-error);
}

/* Inline Empty State (for smaller areas) */
.empty-state-inline {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--color-accent-light);
    border-radius: var(--radius-md);
    text-align: left;
}

.empty-state-inline .empty-state-emoji {
    font-size: 32px;
    margin: 0;
}

.empty-state-inline .empty-state-content {
    flex: 1;
}

.empty-state-inline .empty-state-title {
    font-size: 1em;
    margin-bottom: 4px;
}

.empty-state-inline .empty-state-description {
    font-size: 0.875em;
    margin-bottom: 0;
}

/* Responsive Empty States */
@media (max-width: 768px) {
    .empty-state {
        padding: 40px 20px;
        min-height: 250px;
    }

    .empty-state-icon {
        width: 64px;
        height: 64px;
        margin-bottom: 20px;
    }

    .empty-state-emoji {
        font-size: 48px;
        margin-bottom: 20px;
    }

    .empty-state-title {
        font-size: 1.25em;
    }

    .empty-state-description {
        font-size: 0.9em;
    }

    .empty-state-actions {
        flex-direction: column;
        width: 100%;
        max-width: 280px;
    }

    .empty-state-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .empty-state {
        padding: 30px 15px;
    }

    .empty-state-emoji {
        font-size: 40px;
    }

    .empty-state-title {
        font-size: 1.1em;
    }

    .empty-state-description {
        font-size: 0.85em;
    }
}

/* =============================================================================
   SOFT LIMITS - Locked Photos & Upgrade Prompts
   ============================================================================= */

/* Locked photo card in gallery */
.photo-card.photo-locked {
    position: relative;
    cursor: pointer;
}

.photo-card.photo-locked .photo-img {
    opacity: 0.3;
    filter: grayscale(50%);
}

.photo-card.photo-locked .lock-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    padding: 16px;
    color: var(--color-accent, #D9A520);
}

.photo-card.photo-locked:hover .lock-overlay {
    background: rgba(0, 0, 0, 0.8);
}

/* Locked tag in photo info */
.tag.tag-locked {
    background: rgba(217, 165, 32, 0.15);
    color: var(--color-accent, #D9A520);
    border: 1px solid var(--color-accent, #D9A520);
}

/* Locked Photo Modal */
.locked-photo-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.locked-photo-content {
    background: var(--color-surface, #2C2C2C);
    border-radius: 16px;
    padding: 32px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    position: relative;
    animation: fadeSlideIn 0.3s ease-out;
}

.locked-photo-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    color: var(--color-secondary, #999);
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

.locked-photo-close:hover {
    color: var(--color-text, #fff);
}

.locked-photo-preview {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 24px;
    border-radius: 12px;
    overflow: hidden;
}

.locked-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(8px);
}

.locked-photo-preview .locked-photo-blur {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
}

.locked-photo-preview .locked-photo-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-accent, #D9A520);
}

.locked-photo-content h3 {
    margin: 0 0 12px;
    font-size: 1.5em;
    color: var(--color-text, #fff);
}

.locked-photo-content p {
    margin: 0 0 8px;
    color: var(--color-secondary, #999);
}

.locked-photo-note {
    font-size: 0.9em;
    margin-bottom: 24px !important;
}

.locked-photo-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.locked-photo-btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.locked-photo-btn.primary {
    background: var(--color-accent, #D9A520);
    color: var(--color-primary, #1a1a1a);
}

.locked-photo-btn.primary:hover {
    background: var(--color-accent-hover, #b38a1a);
}

.locked-photo-btn.secondary {
    background: transparent;
    color: var(--color-secondary, #999);
    border: 1px solid var(--color-border, #444);
}

.locked-photo-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text, #fff);
}

/* Soft Limit Warning Modal (Scanner) */
.soft-limit-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10001;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.soft-limit-content {
    background: var(--color-surface, #2C2C2C);
    border-radius: 16px;
    padding: 32px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    animation: fadeSlideIn 0.3s ease-out;
}

.soft-limit-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.soft-limit-content h3 {
    margin: 0 0 16px;
    font-size: 1.5em;
    color: var(--color-text, #fff);
}

.soft-limit-content p {
    margin: 0 0 12px;
    color: var(--color-secondary, #999);
    line-height: 1.5;
}

.soft-limit-note {
    background: rgba(217, 165, 32, 0.1);
    border: 1px solid rgba(217, 165, 32, 0.3);
    border-radius: 8px;
    padding: 12px;
    margin: 20px 0 !important;
    font-size: 0.9em;
}

.soft-limit-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.soft-limit-btn {
    display: inline-block;
    padding: 14px 24px;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.soft-limit-btn.primary {
    background: var(--color-accent, #D9A520);
    color: var(--color-primary, #1a1a1a);
}

.soft-limit-btn.primary:hover {
    background: var(--color-accent-hover, #b38a1a);
}

.soft-limit-btn.secondary {
    background: transparent;
    color: var(--color-secondary, #999);
    border: 1px solid var(--color-border, #444);
}

.soft-limit-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text, #fff);
}

/* Scanner Over-Limit Banner */
.scanner-over-limit-banner {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(90deg, rgba(217, 165, 32, 0.15), rgba(217, 165, 32, 0.25));
    border-bottom: 1px solid rgba(217, 165, 32, 0.4);
    padding: 12px 16px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 100;
    flex-wrap: wrap;
}

.scanner-over-limit-banner .banner-icon {
    font-size: 18px;
}

.scanner-over-limit-banner .banner-text {
    color: var(--color-accent, #D9A520);
    font-size: 14px;
    font-weight: 500;
}

.scanner-over-limit-banner .banner-upgrade-btn {
    background: var(--color-accent, #D9A520);
    color: var(--color-primary, #1a1a1a);
    border: none;
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.scanner-over-limit-banner .banner-upgrade-btn:hover {
    background: var(--color-accent-hover, #b38a1a);
}

/* Animation */
@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .locked-photo-content,
    .soft-limit-content {
        padding: 24px;
    }

    .locked-photo-preview {
        width: 150px;
        height: 150px;
    }

    .scanner-over-limit-banner {
        padding: 10px 12px;
    }

    .scanner-over-limit-banner .banner-text {
        font-size: 12px;
    }
}

/* =============================================================================
   SLIDESHOW PLAYER COMPONENT
   ============================================================================= */

/* Note: .slideshow-overlay styles defined above in "Fullscreen Slideshow Overlay" section */

.slideshow-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.slideshow-media-container {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
}

.slideshow-media {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slideshow-media-item {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transition: opacity 0.8s ease-in-out;
}

.slideshow-media-item.entering {
    opacity: 0;
    position: absolute;
}

.slideshow-media-item.active {
    opacity: 1;
    position: relative;
}

.slideshow-media-item.leaving {
    opacity: 0;
    position: absolute;
}

/* Controls */
.slideshow-controls {
    position: absolute;
    bottom: 140px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 16px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    padding: 12px 24px;
    border-radius: 50px;
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.slideshow-overlay:hover .slideshow-controls,
.slideshow-controls:focus-within {
    opacity: 1;
}

.slideshow-control-btn {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}

.slideshow-control-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.slideshow-control-btn:active {
    transform: scale(0.95);
}

/* Play/Pause button states */
.slideshow-control-btn .pause-icon {
    display: none;
}

.slideshow-control-btn.playing .play-icon {
    display: none;
}

.slideshow-control-btn.playing .pause-icon {
    display: block;
}

.slideshow-control-btn.paused .play-icon {
    display: block;
}

.slideshow-control-btn.paused .pause-icon {
    display: none;
}

/* Progress */
.slideshow-progress {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

#slideshowCounter {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 500;
}

.slideshow-progress-bar {
    width: 200px;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
}

.slideshow-progress-fill {
    height: 100%;
    background: var(--color-accent, #D9A520);
    transition: width 0.3s ease;
}

/* Close button */
.slideshow-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    cursor: pointer;
    padding: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
    z-index: 10;
    backdrop-filter: blur(10px);
}

.slideshow-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* =============================================================================
   SLIDESHOW CONFIG MODAL
   ============================================================================= */

.slideshow-config-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(4px);
}

.slideshow-config-modal.active {
    opacity: 1;
    visibility: visible;
}

.slideshow-config-content {
    background: var(--color-surface, #fff);
    border-radius: 16px;
    padding: 32px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.slideshow-config-modal.active .slideshow-config-content {
    transform: scale(1);
}

.slideshow-config-content h2 {
    margin: 0 0 4px 0;
    font-size: 24px;
    color: var(--color-text-primary, #213535);
}

.slideshow-config-subtitle {
    margin: 0 0 24px 0;
    color: var(--color-text-secondary, #68868A);
    font-size: 14px;
}

.slideshow-config-option {
    margin-bottom: 20px;
}

.slideshow-config-option > label {
    display: block;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--color-text-primary, #213535);
    font-size: 14px;
}

.slideshow-config-radio-group {
    display: flex;
    gap: 12px;
}

.slideshow-config-radio-group.vertical {
    flex-direction: column;
    gap: 8px;
}

.slideshow-config-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 8px;
    border: 2px solid var(--color-border, #E5E2D9);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.slideshow-config-radio:hover {
    border-color: var(--color-accent, #D9A520);
}

.slideshow-config-radio:has(input:checked) {
    border-color: var(--color-accent, #D9A520);
    background: var(--color-accent-light, rgba(217, 165, 32, 0.1));
}

.slideshow-config-radio input {
    margin: 0;
    accent-color: var(--color-accent, #D9A520);
}

.slideshow-config-radio span {
    font-size: 14px;
    color: var(--color-text-primary, #213535);
}

.slideshow-config-actions {
    display: flex;
    gap: 12px;
    margin-top: 28px;
}

.slideshow-config-btn {
    flex: 1;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s ease, transform 0.1s ease;
}

.slideshow-config-btn.secondary {
    background: transparent;
    border: 2px solid var(--color-border, #E5E2D9);
    color: var(--color-text-secondary, #68868A);
}

.slideshow-config-btn.secondary:hover {
    background: var(--color-canvas, #F3F0E6);
}

.slideshow-config-btn.primary {
    background: var(--color-accent, #D9A520);
    border: none;
    color: white;
}

.slideshow-config-btn.primary:hover {
    background: var(--color-accent-hover, #EDB82F);
}

.slideshow-config-btn:active {
    transform: scale(0.98);
}

/* =============================================================================
   SLIDESHOW BUTTON STYLES (for hero sections)
   ============================================================================= */

.slideshow-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
    backdrop-filter: blur(10px);
}

.slideshow-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.slideshow-btn:active {
    transform: scale(0.98);
}

.slideshow-btn svg {
    flex-shrink: 0;
}

/* Mobile adjustments for slideshow */
@media (max-width: 768px) {
    .slideshow-media-container {
        padding: 20px;
    }

    .slideshow-controls {
        bottom: 100px;
        padding: 10px 20px;
        gap: 12px;
        opacity: 1; /* Always visible on mobile */
    }

    .slideshow-close-btn {
        top: 12px;
        right: 12px;
        padding: 10px;
    }

    .slideshow-config-content {
        padding: 24px;
    }

    .slideshow-config-radio-group:not(.vertical) {
        flex-wrap: wrap;
    }
}

/* =============================================================================
   QUICK WINS CHECKLIST - Onboarding Progress
   ============================================================================= */

.quick-wins-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 280px;
    background: var(--color-surface);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 100;
    overflow: hidden;
    border: 1px solid var(--lab-border);
}

.quick-wins-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--color-primary), #2a4444);
    color: white;
    cursor: pointer;
    gap: 8px;
    user-select: none;
}

.quick-wins-header:hover {
    background: linear-gradient(135deg, #2a4444, var(--color-primary));
}

.quick-wins-icon {
    font-size: 16px;
}

.quick-wins-title {
    flex: 1;
    font-weight: 600;
    font-size: 14px;
}

.quick-wins-progress {
    font-size: 12px;
    opacity: 0.9;
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 8px;
    border-radius: 12px;
}

.quick-wins-chevron {
    font-size: 10px;
    opacity: 0.7;
}

.quick-wins-body {
    padding: 16px;
}

.quick-wins-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.quick-wins-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    gap: 10px;
    font-size: 13px;
    color: var(--lab-text);
    border-bottom: 1px solid var(--lab-border-light);
}

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

.quick-wins-item.done {
    opacity: 0.6;
}

.quick-wins-item.done .quick-wins-label {
    text-decoration: line-through;
}

.quick-wins-check {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--lab-text-muted);
}

.quick-wins-item.done .quick-wins-check {
    color: var(--color-accent);
}

.quick-wins-label {
    flex: 1;
}

.quick-wins-reward {
    font-size: 11px;
    color: var(--color-accent);
    font-weight: 600;
}

.quick-wins-total {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--lab-border);
    font-size: 12px;
    color: var(--lab-text-secondary);
    text-align: center;
}

.quick-wins-dismiss {
    margin-top: 12px;
    text-align: center;
}

.quick-wins-dismiss-btn {
    background: none;
    border: none;
    color: var(--lab-text-muted);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 12px;
}

.quick-wins-dismiss-btn:hover {
    color: var(--lab-text-secondary);
    text-decoration: underline;
}

/* =============================================================================
   ONBOARDING TOUR - 3-Step Introduction
   ============================================================================= */

.tour-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    pointer-events: none;
}

.tour-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    pointer-events: auto;
}

.tour-spotlight {
    position: absolute;
    border-radius: 8px;
    box-shadow:
        0 0 0 4px var(--color-accent),
        0 0 0 9999px rgba(0, 0, 0, 0.6);
    transition: all 0.3s ease;
    pointer-events: none;
}

.tour-tooltip {
    position: absolute;
    width: 320px;
    background: var(--color-surface);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
    animation: tour-tooltip-enter 0.3s ease-out;
}

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

.tour-progress {
    font-size: 11px;
    color: var(--lab-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.tour-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 8px 0;
}

.tour-content {
    font-size: 14px;
    color: var(--lab-text-secondary);
    line-height: 1.5;
    margin: 0 0 16px 0;
}

.tour-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tour-skip {
    background: none;
    border: none;
    color: var(--lab-text-muted);
    font-size: 13px;
    cursor: pointer;
    padding: 8px 0;
}

.tour-skip:hover {
    color: var(--lab-text-secondary);
    text-decoration: underline;
}

.tour-next {
    background: var(--color-accent);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.tour-next:hover {
    background: var(--color-accent-hover);
}

.tour-reset {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--lab-text-muted);
    font-size: 14px;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.2s ease;
}

.tour-reset:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-primary);
}