/* Nude Project Task Manager - Main Stylesheet */
/* Modern, clean design with light/dark theme support */

:root {
    /* Typography */
    --font-main: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    
    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    
    /* Borders */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
    
    /* Sidebar */
    --sidebar-width: 260px;
    --sidebar-collapsed: 72px;
    
    /* Z-index */
    --z-sidebar: 100;
    --z-header: 90;
    --z-modal: 200;
    --z-toast: 300;
}

/* Light Theme (Default) */
[data-theme="light"] {
    --bg-primary: #fafafa;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f4f4f5;
    --bg-elevated: #ffffff;
    
    --text-primary: #18181b;
    --text-secondary: #52525b;
    --text-tertiary: #a1a1aa;
    --text-inverse: #ffffff;
    
    --border-primary: #e4e4e7;
    --border-secondary: #f4f4f5;
    
    --accent-primary: #18181b;
    --accent-secondary: #3f3f46;
    --accent-hover: #27272a;
    
    --success: #22c55e;
    --success-bg: #dcfce7;
    --warning: #f59e0b;
    --warning-bg: #fef3c7;
    --error: #ef4444;
    --error-bg: #fee2e2;
    --info: #3b82f6;
    --info-bg: #dbeafe;
    
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.1);
    
    --sidebar-bg: #18181b;
    --sidebar-text: #a1a1aa;
    --sidebar-text-active: #ffffff;
    --sidebar-hover: #27272a;

    --terminal-bg: #0b0b0f;
    --terminal-text: #e5e7eb;
    --terminal-border: #27272a;
}

/* Dark Theme */
[data-theme="dark"] {
    --bg-primary: #09090b;
    --bg-secondary: #18181b;
    --bg-tertiary: #27272a;
    --bg-elevated: #1f1f23;
    
    --text-primary: #fafafa;
    --text-secondary: #a1a1aa;
    --text-tertiary: #71717a;
    --text-inverse: #18181b;
    
    --border-primary: #27272a;
    --border-secondary: #3f3f46;
    
    --accent-primary: #fafafa;
    --accent-secondary: #e4e4e7;
    --accent-hover: #d4d4d8;
    
    --success: #4ade80;
    --success-bg: #14532d;
    --warning: #fbbf24;
    --warning-bg: #713f12;
    --error: #f87171;
    --error-bg: #7f1d1d;
    --info: #60a5fa;
    --info-bg: #1e3a5f;
    
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.4);
    
    --sidebar-bg: #18181b;
    --sidebar-text: #71717a;
    --sidebar-text-active: #ffffff;
    --sidebar-hover: #27272a;

    --terminal-bg: #050508;
    --terminal-text: #e5e7eb;
    --terminal-border: #27272a;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }

/* Lucide Icons Fix - Map lucide-* classes to icon-* font */
[class*=" lucide-"], [class^="lucide-"] {
    font-family: 'lucide' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* Icon mappings for commonly used icons */
.lucide-x::before { content: "\e5cd"; }
.lucide-heart::before { content: "\e0ec"; }
.lucide-star::before { content: "\e1b4"; }
.lucide-flame::before { content: "\e0c7"; }
.lucide-flask-conical::before { content: "\e30b"; }
.lucide-chevron-down::before { content: "\e074"; }
.lucide-briefcase::before { content: "\e05e"; }
.lucide-scroll-text::before { content: "\e4a0"; }
.lucide-calendar::before { content: "\e060"; }
.lucide-bell::before { content: "\e053"; }
.lucide-lightbulb::before { content: "\e115"; }
.lucide-bot::before { content: "\e2ef"; }
.lucide-user::before { content: "\e1fe"; }
.lucide-sun::before { content: "\e1c7"; }
.lucide-moon::before { content: "\e13c"; }
.lucide-log-out::before { content: "\e11f"; }
.lucide-menu::before { content: "\e130"; }
.lucide-search::before { content: "\e19c"; }
.lucide-code-2::before { content: "\e084"; }
.lucide-check-circle::before { content: "\e06e"; }
.lucide-alert-circle::before { content: "\e03c"; }
.lucide-alert-triangle::before { content: "\e03e"; }
.lucide-loader::before { content: "\e11b"; }
.lucide-circle::before { content: "\e07c"; }
.lucide-info::before { content: "\e106"; }
.lucide-refresh-cw::before { content: "\e180"; }
.lucide-users::before { content: "\e202"; }
.lucide-heart-crack::before { content: "\e0ed"; }
.lucide-trash-2::before { content: "\e1f1"; }
.lucide-plus::before { content: "\e16c"; }
.lucide-globe::before { content: "\e0db"; }
body { font-family: var(--font-main); background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; }

/* Layout */
body { display: flex; }
.sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-width); background: var(--sidebar-bg); z-index: var(--z-sidebar); display: flex; flex-direction: column; transition: transform var(--transition-base); }
.main-content { flex: 1; margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; max-width: calc(100vw - var(--sidebar-width)); overflow-x: hidden; }

/* Sidebar */
.sidebar-header { padding: var(--space-lg); display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: var(--space-md); }
.logo-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #fff 0%, #e4e4e7 100%); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.25rem; color: #18181b; }
.logo-icon.large { width: 56px; height: 56px; font-size: 1.5rem; }
.logo-text { color: #fff; font-weight: 600; font-size: 1.1rem; }
.mobile-close { display: none; color: var(--sidebar-text); padding: var(--space-sm); }

.sidebar-nav { flex: 1; padding: var(--space-md); overflow-y: auto; }
.nav-list { display: flex; flex-direction: column; gap: var(--space-xs); }
.nav-link { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); border-radius: var(--radius-md); color: var(--sidebar-text); transition: all var(--transition-fast); font-weight: 500; width: 100%; font-size: inherit; font-family: inherit; background: none; border: none; cursor: pointer; text-align: left; }
.nav-link:hover { background: var(--sidebar-hover); color: var(--sidebar-text-active); }
.nav-link.active { background: var(--sidebar-hover); color: var(--sidebar-text-active); }
.nav-link i { font-size: 1.25rem; }
.nav-badge { background: var(--error); color: #fff; font-size: 0.7rem; font-weight: 600; padding: 2px 6px; border-radius: var(--radius-full); margin-left: auto; }
.nav-badge-new { background: var(--info); color: #fff; font-size: 0.65rem; font-weight: 600; padding: 2px 6px; border-radius: var(--radius-full); margin-left: auto; text-transform: uppercase; }

.sidebar-footer { padding: var(--space-lg); border-top: 1px solid var(--sidebar-hover); }
.user-menu { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); border-radius: var(--radius-md); transition: background var(--transition-fast); }
.user-menu:hover { background: var(--sidebar-hover); }
.user-avatar { width: 40px; height: 40px; border-radius: var(--radius-full); background: linear-gradient(135deg, #6366f1, #8b5cf6); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; overflow: hidden; }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-info { flex: 1; min-width: 0; }
.user-name { display: block; color: #fff; font-weight: 500; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-email { display: block; color: var(--sidebar-text); font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-actions { display: flex; gap: var(--space-sm); margin-top: var(--space-md); }
.theme-toggle, .logout-btn { width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--sidebar-text); transition: all var(--transition-fast); }
.theme-toggle:hover, .logout-btn:hover { background: var(--sidebar-hover); color: var(--sidebar-text-active); }
[data-theme="light"] #themeIconDark { display: none; }
[data-theme="dark"] #themeIconLight { display: none; }

/* Main Header */
.main-header { padding: var(--space-lg) var(--space-xl); display: flex; align-items: center; gap: var(--space-lg); background: var(--bg-secondary); border-bottom: 1px solid var(--border-primary); position: sticky; top: 0; z-index: var(--z-header); }
.mobile-menu-btn { display: none; width: 40px; height: 40px; border-radius: var(--radius-md); align-items: center; justify-content: center; color: var(--text-secondary); }
.header-title { flex: 1; }
.header-title h1 { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); }
.header-title .subtitle { color: var(--text-secondary); font-size: 0.875rem; margin-top: 2px; }
.header-actions { display: flex; align-items: center; gap: var(--space-md); margin-left: auto; justify-content: flex-end; }

/* Content Wrapper */
.content-wrapper { flex: 1; padding: var(--space-xl); min-width: 0; }

/* Flash Messages */
.flash-messages { padding: 0 var(--space-xl); display: flex; flex-direction: column; gap: var(--space-sm); }
.flash-message { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md); font-weight: 500; }
.flash-success { background: var(--success-bg); color: var(--success); }
.flash-error { background: var(--error-bg); color: var(--error); }
.flash-warning { background: var(--warning-bg); color: var(--warning); }
.flash-info { background: var(--info-bg); color: var(--info); }
.flash-close { margin-left: auto; opacity: 0.7; }
.flash-close:hover { opacity: 1; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-md); font-weight: 500; font-size: 0.9rem; transition: all var(--transition-fast); white-space: nowrap; }
.btn-primary { background: var(--accent-primary); color: var(--text-inverse); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.btn-danger { background: var(--error); color: #fff; }
.btn-danger:hover { opacity: 0.9; }
.btn-block { width: 100%; }
.btn-sm { padding: var(--space-xs) var(--space-md); font-size: 0.8rem; }
/* Icon Buttons - Job Detail Header */
.btn-icon { width: 42px; height: 42px; padding: 0; border: 2px solid var(--text-tertiary); border-radius: var(--radius-md); background: var(--bg-secondary); color: var(--text-secondary); transition: all var(--transition-fast); }
.btn-icon:hover { border-color: var(--accent-primary); color: var(--accent-primary); background: var(--bg-tertiary); }
.btn-icon.active { color: #fff; background: var(--warning); border-color: var(--warning); }
.btn-icon.active:hover { background: var(--warning); opacity: 0.9; }
.btn-icon.active svg, .btn-icon.active i { fill: #fff; stroke: #fff; color: #fff; }
/* Notification button specific */
.btn-icon.notify-btn.active { background: var(--info); border-color: var(--info); }
.btn-icon.notify-btn.active:hover { background: var(--info); }

/* Forms */
.form-group { margin-bottom: var(--space-lg); }
.form-group label { display: block; font-weight: 500; margin-bottom: var(--space-sm); color: var(--text-primary); font-size: 0.9rem; }
.input-wrapper { position: relative; display: flex; align-items: center; }
.input-wrapper > svg { position: absolute; left: var(--space-md); color: var(--text-tertiary); flex-shrink: 0; z-index: 2; }
.input-wrapper .toggle-password { position: absolute; right: var(--space-sm); padding: var(--space-sm); color: var(--text-tertiary); }
.email-with-domain input { border-radius: var(--radius-md) 0 0 var(--radius-md); border-right: none; position: relative; z-index: 1; }
.email-domain { display: flex; align-items: center; padding: var(--space-md); padding-left: calc(var(--space-md) + 6px); margin-left: -10px; background: var(--bg-tertiary); border: 1px solid var(--border-primary); border-left: none; border-radius: 0 var(--radius-md) var(--radius-md) 0; color: var(--text-secondary); font-size: 0.9rem; white-space: nowrap; user-select: none; align-self: stretch; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="datetime-local"], input[type="number"], select, textarea {
    width: 100%; padding: var(--space-md); border: 1px solid var(--border-primary); border-radius: var(--radius-md); background: var(--bg-secondary);
    color: var(--text-primary); transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    box-sizing: border-box; max-width: 100%;
}
.input-wrapper input { padding-left: 2.75rem; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(0,0,0,0.05); }
input:disabled { background: var(--bg-tertiary); cursor: not-allowed; }
textarea { resize: vertical; min-height: 100px; }
textarea.textarea-compact { min-height: 64px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
.form-actions { display: flex; justify-content: flex-end; gap: var(--space-md); margin-top: var(--space-lg); }

/* Checkbox */
.checkbox-wrapper { display: flex; align-items: center; gap: var(--space-sm); cursor: pointer; }
.checkbox-wrapper input { display: none; }
.checkmark { width: 20px; height: 20px; border: 2px solid var(--border-primary); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); }
.checkbox-wrapper input:checked + .checkmark { background: var(--accent-primary); border-color: var(--accent-primary); }
.checkbox-wrapper input:checked + .checkmark::after { content: '✓'; color: var(--text-inverse); font-size: 0.75rem; }

/* Toggle Switch */
.toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0; }
.toggle-switch input { display: none; }
.toggle-slider { position: absolute; inset: 0; background: var(--text-tertiary); border-radius: var(--radius-full); cursor: pointer; transition: background var(--transition-fast); }
.toggle-slider::before { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform var(--transition-fast); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.toggle-switch input:checked + .toggle-slider { background: var(--accent-primary); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(22px); }
[data-theme="dark"] .toggle-slider { background: #3f3f46; }
[data-theme="dark"] .toggle-switch input:checked + .toggle-slider { background: #6366f1; }
[data-theme="dark"] .toggle-slider::before { background: #e4e4e7; }

/* View Toggle - Modern Animated Switch */
.view-toggle-wrapper { display: flex; align-items: center; gap: var(--space-sm); background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-full); padding: 6px 12px; }
.view-toggle-icon { color: var(--text-tertiary); display: flex; align-items: center; transition: color var(--transition-fast); }
.toggle-icon-svg { width: 18px; height: 18px; }
.view-toggle-wrapper:has(input:not(:checked)) .view-toggle-icon:first-child { color: var(--accent-primary); }
.view-toggle-wrapper:has(input:checked) .view-toggle-icon:last-child { color: var(--accent-primary); }
.view-toggle-switch { position: relative; width: 44px; height: 24px; cursor: pointer; }
.view-toggle-switch input { display: none; }
.view-toggle-track { position: absolute; inset: 0; background: var(--bg-tertiary); border: 1px solid var(--border-primary); border-radius: var(--radius-full); transition: all var(--transition-base); }
.view-toggle-thumb { position: absolute; width: 18px; height: 18px; top: 2px; left: 2px; background: var(--accent-primary); border-radius: 50%; transition: transform var(--transition-base) cubic-bezier(0.68, -0.55, 0.265, 1.55); box-shadow: var(--shadow-sm); }
.view-toggle-switch input:checked + .view-toggle-track .view-toggle-thumb { transform: translateX(20px); }
.view-toggle-switch:hover .view-toggle-track { border-color: var(--accent-primary); }
.view-toggle-switch:active .view-toggle-thumb { width: 22px; }
.view-toggle-switch input:checked:active + .view-toggle-track .view-toggle-thumb { transform: translateX(16px); }

/* Filter Bar */
.filters-bar { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-bottom: var(--space-xl); align-items: center; }
.search-box { position: relative; flex: 0 0 auto; min-width: 200px; max-width: 320px; }
.search-box i { position: absolute; left: var(--space-md); top: 50%; transform: translateY(-50%); color: var(--text-tertiary); }
.search-box input { padding-left: 2.5rem; height: 44px; }
.filter-group { display: flex; gap: var(--space-md); flex-wrap: nowrap; align-items: center; }
.filter-select { height: 44px; padding: 0 var(--space-lg); min-width: 140px; }
.date-filters { display: flex; gap: var(--space-md); align-items: center; margin-left: auto; }
.date-input { display: flex; flex-direction: column; gap: 4px; }
.date-input label { font-size: 0.75rem; color: var(--text-tertiary); }
.date-input input { height: 36px; padding: 0 var(--space-sm); }

/* Jobs Grid (Cards View) */
.jobs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-lg); }
.job-card { background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); overflow: hidden; position: relative; transition: all var(--transition-fast); }
.job-card:hover { border-color: var(--border-secondary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.job-card-link { position: absolute; inset: 0; z-index: 1; }
.job-card-header { position: relative; padding: var(--space-md); }
.job-image { height: 120px; background: var(--bg-tertiary); border-radius: var(--radius-md); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.job-placeholder { color: var(--text-tertiary); font-size: 2.5rem; }
.job-image img { width: 100%; height: 100%; object-fit: cover; }
/* Favorite Star Button - Card View */
.favorite-btn { position: absolute; top: var(--space-lg); right: var(--space-lg); z-index: 2; width: 38px; height: 38px; border-radius: var(--radius-full); background: var(--bg-secondary); border: 2px solid var(--text-tertiary); display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); transition: all var(--transition-fast); box-shadow: var(--shadow-sm); }
.favorite-btn:hover { color: var(--warning); border-color: var(--warning); transform: scale(1.1); }
.favorite-btn.active { color: var(--warning); background: var(--warning); border-color: var(--warning); }
.favorite-btn.active svg, .favorite-btn.active i { fill: #fff; stroke: #fff; color: #fff; }
.favorite-btn.favorite-animating { animation: favorite-pop 0.3s ease; }
@keyframes favorite-pop { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }
.job-card-body { padding: var(--space-md) var(--space-lg) var(--space-lg); }
.job-status-row { display: flex; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; }
.status-ok { background: var(--success-bg); color: var(--success); }
.status-error { background: var(--error-bg); color: var(--error); }
.status-running { background: var(--info-bg); color: var(--info); }
.status-stopped { background: var(--warning-bg); color: var(--warning); }
.status-none { background: var(--bg-tertiary); color: var(--text-tertiary); }
.inactive-badge { background: var(--bg-tertiary); color: var(--text-tertiary); padding: 4px 10px; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; }
.job-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 4px; }
.job-title a { position: relative; z-index: 2; }
.job-title a:hover { color: var(--accent-primary); }
.job-id { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-tertiary); margin-bottom: var(--space-md); }
.job-tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); position: relative; z-index: 2; }
.tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 500; background: color-mix(in srgb, var(--tag-color, #6366f1) 15%, transparent); color: var(--tag-color, #6366f1); }
.tag-more { background: var(--bg-tertiary); color: var(--text-tertiary); }

/* Jobs Table (List View) */
.jobs-table-wrapper { overflow-x: auto; background: var(--bg-secondary); border-radius: var(--radius-lg); border: 1px solid var(--border-primary); }
.jobs-table { width: 100%; border-collapse: collapse; }
.jobs-table th { text-align: left; padding: var(--space-md) var(--space-lg); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; color: var(--text-tertiary); border-bottom: 1px solid var(--border-primary); background: var(--bg-tertiary); }
.jobs-table td { padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--border-secondary); vertical-align: middle; }
.jobs-table tr:last-child td { border-bottom: none; }
.job-row { transition: background var(--transition-fast); }
.job-row:hover { background: var(--bg-tertiary); }
/* Favorite Star Button - List View */
.favorite-btn-sm { width: 34px; height: 34px; border-radius: var(--radius-full); color: var(--text-tertiary); display: flex; align-items: center; justify-content: center; background: transparent; border: 2px solid var(--text-tertiary); transition: all var(--transition-fast); }
.favorite-btn-sm:hover { color: var(--warning); border-color: var(--warning); transform: scale(1.1); }
.favorite-btn-sm.active { color: #fff; background: var(--warning); border-color: var(--warning); }
.favorite-btn-sm.active svg, .favorite-btn-sm.active i { fill: #fff; stroke: #fff; color: #fff; }
.favorite-btn-sm.active i { fill: currentColor; }
.favorite-btn-sm.favorite-animating { animation: favorite-pop 0.3s ease; }
.job-link { display: flex; flex-direction: column; }
/* Mobile job cards - hidden on desktop */
.mobile-job-cards { display: none; }
.job-name { font-weight: 600; color: var(--text-primary); }
.job-code { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-tertiary); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.status-dot.status-ok { background: var(--success); }
.status-dot.status-error { background: var(--error); }
.status-dot.status-running { background: var(--info); }
.status-dot.status-stopped { background: var(--warning); }
.status-dot.status-none { background: var(--text-tertiary); }
.owner-name { font-weight: 500; }
.no-owner { color: var(--text-tertiary); font-style: italic; }
.datetime { font-size: 0.9rem; }
.tag-sm { font-size: 0.7rem; padding: 2px 8px; }

/* Empty State */
.empty-state { text-align: center; padding: var(--space-2xl); color: var(--text-tertiary); }
.empty-state i { font-size: 3rem; margin-bottom: var(--space-lg); }
.empty-state h3 { font-size: 1.25rem; color: var(--text-primary); margin-bottom: var(--space-sm); }
.empty-row { padding: var(--space-2xl); }

/* Job Detail */
.job-detail-page { max-width: 100%; min-width: 0; box-sizing: border-box; }
.tabs-wrapper { margin-bottom: var(--space-xl); }
.tabs { display: flex; gap: var(--space-sm); border-bottom: 1px solid var(--border-primary); padding-bottom: var(--space-sm); }
.tab { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md) var(--radius-md) 0 0; color: var(--text-secondary); font-weight: 500; transition: all var(--transition-fast); }
.tab:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.tab.active { color: var(--text-primary); border-bottom: 2px solid var(--accent-primary); margin-bottom: -1px; }
.tab-content { display: none; min-width: 0; }
.tab-content.active { display: block; }
.detail-actions { display: flex; gap: var(--space-sm); }

/* Info Grid */
.info-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-lg); min-width: 0; }
.info-card { background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); padding: var(--space-lg); }
.info-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: var(--space-lg); display: flex; align-items: center; gap: var(--space-sm); }
.info-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-lg); }
.info-header h3 { margin-bottom: 0; }
.info-row { display: flex; justify-content: space-between; padding: var(--space-md) 0; border-bottom: 1px solid var(--border-secondary); }
.info-row:last-child { border-bottom: none; }
.info-row .label { color: var(--text-secondary); font-weight: 500; }
.info-row .value { color: var(--text-primary); }
.info-row .mono { font-family: var(--font-mono); }
.status-active { background: var(--success-bg); color: var(--success); }
.status-inactive { background: var(--bg-tertiary); color: var(--text-tertiary); }
.owner-pill { display: inline-flex; align-items: center; gap: var(--space-sm); }
.avatar-sm { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #6366f1, #8b5cf6); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.7rem; font-weight: 600; }
.info-form.hidden, .schedule-form.hidden { display: none; }
.meta-pill { font-size: 0.75rem; color: var(--text-secondary); background: var(--bg-tertiary); border: 1px solid var(--border-secondary); border-radius: var(--radius-full); padding: 4px 10px; }

/* Shipping Extraction Card */
.shipping-extract-card { grid-column: 1 / -1; }
.shipping-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); margin-bottom: var(--space-md); }
.shipping-summary-item { background: var(--bg-tertiary); border: 1px solid var(--border-secondary); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); display: flex; flex-direction: column; gap: 4px; }
.shipping-summary-item .meta-label { margin-bottom: 0; font-size: 0.7rem; }
.shipping-files-table-wrapper { overflow-x: auto; border: 1px solid var(--border-primary); border-radius: var(--radius-md); background: var(--bg-secondary); }
.shipping-files-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.shipping-files-table th { text-align: left; padding: var(--space-sm) var(--space-md); font-size: 0.72rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border-primary); background: var(--bg-tertiary); white-space: nowrap; }
.shipping-files-table td { padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--border-secondary); vertical-align: top; color: var(--text-secondary); }
.shipping-files-table tr:first-child td { border-top: none; }
.shipping-files-table a { color: var(--accent-primary); text-decoration: none; }
.shipping-files-table a:hover { text-decoration: underline; }

/* Control Panel Tab */
.control-panel { display: flex; flex-direction: column; gap: var(--space-xl); min-width: 0; }

.panel-section { background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); padding: var(--space-lg); min-width: 0; overflow: hidden; }
.panel-section-header { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.panel-section-header h3 { font-size: 1rem; font-weight: 600; margin: 0; }
.panel-section-header .meta-pill { margin-left: auto; }

.panel-inputs-card { display: flex; flex-direction: column; gap: var(--space-lg); }
.panel-field { display: flex; flex-direction: column; gap: var(--space-xs); }
.panel-field label { font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); }
.panel-field input[type="url"],
.panel-field input[type="text"],
.panel-field input[type="number"],
.panel-field select { width: 100%; padding: var(--space-sm) var(--space-md); background: var(--bg-tertiary); border: 1px solid var(--border-primary); border-radius: var(--radius-md); color: var(--text-primary); font-size: 0.9rem; transition: border-color var(--transition-fast); box-sizing: border-box; min-width: 0; }
.panel-field input:focus,
.panel-field select:focus { outline: none; border-color: var(--accent-primary); }
.panel-required { color: var(--error); }
.panel-help { font-size: 0.78rem; color: var(--text-tertiary); }
.panel-checkbox-label { display: flex; align-items: center; gap: var(--space-sm); font-size: 0.9rem; color: var(--text-primary); padding: var(--space-xs) 0; }
.panel-checkbox-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent-primary); cursor: pointer; }

.panel-output-card { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; }
.panel-empty-state { text-align: center; padding: var(--space-2xl) var(--space-lg); color: var(--text-tertiary); }
.panel-empty-state svg { margin-bottom: var(--space-md); opacity: 0.5; }
.panel-empty-state p { font-style: italic; font-size: 0.9rem; }
.panel-empty-hint { color: var(--text-tertiary); font-style: italic; padding: var(--space-sm) 0; }

/* Status Card */
.last-exec { text-align: center; }
.exec-status { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-lg); font-size: 1.25rem; font-weight: 700; margin-bottom: var(--space-lg); }
.exec-status.status-ok { background: var(--success-bg); color: var(--success); }
.exec-status.status-error { background: var(--error-bg); color: var(--error); }
.exec-status.status-running { background: var(--info-bg); color: var(--info); }
.exec-status.status-stopped { background: var(--warning-bg); color: var(--warning); }
.exec-details { text-align: left; }
.exec-row { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0; color: var(--text-secondary); }
.no-exec { text-align: center; color: var(--text-tertiary); padding: var(--space-xl); }
.no-exec i { font-size: 2rem; margin-bottom: var(--space-md); display: block; }

/* Schedule Card */
.cron-display { background: var(--bg-tertiary); padding: var(--space-md); border-radius: var(--radius-md); margin-bottom: var(--space-md); }
.cron-display code { font-family: var(--font-mono); font-size: 1.1rem; }
.schedule-description { margin-top: var(--space-sm); color: var(--text-secondary); font-size: 0.85rem; font-style: italic; }
.next-run { display: flex; align-items: center; gap: var(--space-sm); color: var(--text-secondary); font-size: 0.9rem; }
.no-schedule { color: var(--text-tertiary); font-style: italic; }

/* Tags & Teams */
.tags-list, .teams-list { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.no-tags, .no-teams { color: var(--text-tertiary); font-style: italic; }
.team-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--team-color, #6366f1) 15%, transparent); color: var(--team-color, #6366f1); font-weight: 500; font-size: 0.85rem; }

/* Logs List (Detail Page) */
.logs-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.log-item { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-md); transition: all var(--transition-fast); }
.log-item:hover { border-color: var(--border-secondary); }
.log-status { width: 36px; height: 36px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.log-status.status-ok { background: var(--success-bg); color: var(--success); }
.log-status.status-error { background: var(--error-bg); color: var(--error); }
.log-status.status-running { background: var(--info-bg); color: var(--info); }
.log-status.status-stopped { background: var(--warning-bg); color: var(--warning); }
.log-info { flex: 1; }
.log-main { display: flex; align-items: center; gap: var(--space-md); }
.log-status-text { font-weight: 600; }
.log-date { color: var(--text-secondary); font-size: 0.9rem; }
.log-meta { display: flex; gap: var(--space-lg); margin-top: 4px; font-size: 0.85rem; color: var(--text-tertiary); }
.log-meta span { display: flex; align-items: center; gap: 4px; }
.empty-logs { text-align: center; padding: var(--space-2xl); color: var(--text-tertiary); }
.empty-logs i { font-size: 2.5rem; margin-bottom: var(--space-md); }

/* Settings */
.settings-grid { display: grid; gap: var(--space-lg); max-width: 600px; }
.settings-card { background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); padding: var(--space-lg); }
.settings-card h3 { font-size: 1rem; margin-bottom: var(--space-lg); }
.toggle-setting { display: flex; justify-content: space-between; align-items: center; }
.toggle-info { flex: 1; }
.toggle-label { font-weight: 500; display: block; }
.toggle-desc { font-size: 0.85rem; color: var(--text-tertiary); }
.danger-zone { border-color: var(--error); }
.danger-zone h3 { color: var(--error); }
.danger-warning { color: var(--text-secondary); margin-bottom: var(--space-lg); }

/* Modal */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: center; justify-content: center; padding: var(--space-lg); }
.modal.active { display: flex; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }
.modal-content { position: relative; background: var(--bg-secondary); border-radius: var(--radius-xl); width: 100%; max-width: 560px; max-height: 90vh; overflow: auto; box-shadow: var(--shadow-lg); }
.modal-sm { max-width: 420px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-lg); border-bottom: 1px solid var(--border-primary); }
.modal-header h3 { font-size: 1.1rem; }
.modal-close { width: 36px; height: 36px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); transition: all var(--transition-fast); }
.modal-close:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.modal-body { padding: var(--space-lg); overflow-y: auto; max-height: 70vh; }
.modal-footer { display: flex; justify-content: flex-end; gap: var(--space-sm); padding: var(--space-md) var(--space-lg) var(--space-lg); border-top: 1px solid var(--border-primary); }

/* Job notification preferences modal */
.job-notify-options { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.job-notify-item { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); border: 1px solid var(--border-primary); border-radius: var(--radius-md); background: var(--bg-primary); }
.job-notify-item-icon { width: 32px; height: 32px; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.job-notify-icon-error { background: var(--error-bg); color: var(--error); }
.job-notify-icon-finish { background: var(--success-bg); color: var(--success); }
.job-notify-icon-start { background: var(--info-bg); color: var(--info); }
.job-notify-item-text { flex: 1; color: var(--text-primary); font-size: 0.9rem; cursor: pointer; }
.job-notify-actions { display: flex; justify-content: flex-end; gap: var(--space-sm); }

/* Execution Detail Modal */
.exec-detail { }
.exec-status-large { display: flex; align-items: center; justify-content: center; gap: var(--space-md); padding: var(--space-lg); border-radius: var(--radius-lg); font-size: 1.5rem; font-weight: 700; margin-bottom: var(--space-lg); }
.exec-job-info { text-align: center; margin-bottom: var(--space-lg); }
.job-link-large { font-size: 1.1rem; font-weight: 600; color: var(--accent-primary); }
.exec-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-bottom: var(--space-lg); }
.meta-item { background: var(--bg-tertiary); padding: var(--space-md); border-radius: var(--radius-md); }
.meta-label { display: block; font-size: 0.75rem; color: var(--text-tertiary); text-transform: uppercase; margin-bottom: 4px; }
.meta-value { font-weight: 600; }
.exec-output, .exec-error, .exec-traceback { margin-top: var(--space-lg); }
.exec-output h4, .exec-error h4, .exec-traceback h4 { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: var(--space-sm); }
.exec-output pre, .exec-error pre, .exec-traceback pre { background: var(--bg-tertiary); padding: var(--space-md); border-radius: var(--radius-md); overflow-x: auto; font-family: var(--font-mono); font-size: 0.85rem; white-space: pre-wrap; word-break: break-word; max-height: 200px; }
.exec-error pre { background: var(--error-bg); color: var(--error); }

/* Terminal Modal */
.terminal-modal { max-width: 900px; }
.terminal-status { display: flex; align-items: flex-start; gap: var(--space-md); margin-bottom: var(--space-md); }
.terminal-status .running-animation { margin: 0; }
.terminal-status-text { flex: 1; min-width: 0; }
.terminal-status-text p { margin: 0; }
.terminal-hint { margin-top: 4px; color: var(--text-tertiary); font-size: 0.85rem; }
.terminal-meta { margin-top: 4px; color: var(--text-secondary); font-size: 0.85rem; font-weight: 500; }
.terminal-safe-close { margin-top: 6px; color: var(--text-tertiary); font-size: 0.8rem; font-style: italic; }
.terminal-actions { display: flex; gap: var(--space-sm); margin-bottom: var(--space-md); }
.terminal-notify-toggle { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); font-size: 0.85rem; color: var(--text-secondary); }
.terminal-notify-label { display: inline-flex; align-items: center; gap: 6px; }
.terminal-output { background: var(--terminal-bg); color: var(--terminal-text); border: 1px solid var(--terminal-border); padding: var(--space-md); border-radius: var(--radius-md); overflow: auto; font-family: var(--font-mono); font-size: 0.85rem; white-space: pre-wrap; word-break: break-word; max-height: 55vh; }

/* Loading */
.loading { display: flex; align-items: center; justify-content: center; padding: var(--space-2xl); }
.spinner { width: 40px; height: 40px; border: 3px solid var(--border-primary); border-top-color: var(--accent-primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.running-animation { margin-bottom: var(--space-lg); }
.running-animation .spinner { width: 60px; height: 60px; margin: 0 auto; }
.spinner-sm { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; flex-shrink: 0; }
.btn-running { cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-sm); }

/* Logs Page */
.logs-page { }
.logs-table-wrapper { background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); overflow-x: auto; }
.logs-table { width: 100%; border-collapse: collapse; }
.logs-table thead { border-bottom: 1px solid var(--border-primary); }
.logs-table th { text-align: left; padding: var(--space-sm) var(--space-md); font-size: 0.75rem; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.logs-table td { text-align: left; padding: var(--space-sm) var(--space-md); vertical-align: middle; border-top: 1px solid var(--border-primary); }
.logs-table .col-status { width: 110px; }
.logs-table .col-duration { width: 100px; }
.logs-table .col-trigger { width: 120px; }
.logs-table .col-user { width: 140px; }
.logs-table .col-actions { width: 50px; text-align: center; }
.log-row { transition: background var(--transition-fast); }
.log-row:hover { background: var(--bg-tertiary); }
.logs-table .job-link { text-decoration: none; color: inherit; }
.logs-table .job-link:hover .job-title { color: var(--accent-primary); }
.logs-table .job-title { font-size: 0.875rem; font-weight: 500; }
.logs-table .job-id { font-size: 0.75rem; }
.logs-table .datetime { font-size: 0.85rem; color: var(--text-secondary); }
.logs-table .user-name { font-size: 0.85rem; color: var(--text-primary); }
.logs-table .empty-row { border-top: none; }
.trigger-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 500; background: var(--bg-tertiary); color: var(--text-secondary); }
.system-user { color: var(--text-tertiary); font-style: italic; font-size: 0.85rem; }
.duration { font-family: var(--font-mono); font-size: 0.85rem; }

/* Pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); margin-top: var(--space-xl); }
.page-btn { width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border-primary); transition: all var(--transition-fast); }
.page-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.page-numbers { display: flex; gap: var(--space-xs); }
.page-num { width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: all var(--transition-fast); }
.page-num:hover { background: var(--bg-tertiary); }
.page-num.active { background: var(--accent-primary); color: var(--text-inverse); }
.page-dots { color: var(--text-tertiary); padding: 0 var(--space-sm); }

/* Calendar Page */
.calendar-page { background: var(--bg-secondary); border-radius: var(--radius-lg); border: 1px solid var(--border-primary); padding: var(--space-lg); }
#calendar { --fc-border-color: var(--border-primary); --fc-button-bg-color: var(--bg-tertiary); --fc-button-border-color: var(--border-primary); --fc-button-text-color: var(--text-primary); --fc-button-hover-bg-color: var(--border-primary); --fc-button-hover-border-color: var(--border-secondary); --fc-button-active-bg-color: var(--accent-primary); --fc-button-active-border-color: var(--accent-primary); --fc-today-bg-color: color-mix(in srgb, var(--accent-primary) 10%, transparent); --fc-event-border-color: transparent; }
.fc { font-family: var(--font-main); }
.fc-toolbar-title { font-size: 1.25rem !important; font-weight: 600; }
.fc-button { border-radius: var(--radius-md) !important; font-weight: 500 !important; }
.fc-button-active, .fc-button:active { color: var(--text-inverse) !important; }
.fc-button-group .fc-button-active { background: var(--accent-primary) !important; border-color: var(--accent-primary) !important; color: var(--text-inverse) !important; }
.fc-daygrid-day-number { font-weight: 500; }
.fc-event { border-radius: var(--radius-sm); padding: 2px 6px; font-weight: 500; }
.color-picker { display: flex; gap: var(--space-sm); }
.color-option { cursor: pointer; }
.color-option input { display: none; }
.color-option span { width: 32px; height: 32px; border-radius: var(--radius-full); display: block; border: 2px solid transparent; transition: all var(--transition-fast); }
.color-option input:checked + span { border-color: var(--text-primary); transform: scale(1.1); }

/* Tasks Page */
.tasks-page { }
.tasks-stats { display: flex; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.stat-card { background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); padding: var(--space-lg); display: flex; align-items: center; gap: var(--space-lg); flex: 1; }
.stat-icon { width: 48px; height: 48px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.stat-icon.unread { background: var(--info-bg); color: var(--info); }
.stat-icon.pending { background: var(--warning-bg); color: var(--warning); }
.stat-info { }
.stat-value { font-size: 1.75rem; font-weight: 700; display: block; }
.stat-label { color: var(--text-secondary); font-size: 0.85rem; }
.filter-tabs { display: flex; gap: var(--space-sm); margin-bottom: var(--space-xl); flex-wrap: wrap; }
.filter-tab { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-full); color: var(--text-secondary); font-weight: 500; transition: all var(--transition-fast); }
.filter-tab:hover { background: var(--bg-tertiary); }
.filter-tab.active { background: var(--accent-primary); color: var(--text-inverse); }
.mark-all-btn { margin-left: auto; }
.notifications-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.notification-item { display: flex; align-items: flex-start; gap: var(--space-md); padding: var(--space-lg); background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); transition: all var(--transition-fast); cursor: pointer; }
.notification-item:hover { border-color: var(--border-secondary); }
.notification-item.unread { background: color-mix(in srgb, var(--info) 5%, var(--bg-secondary)); border-color: color-mix(in srgb, var(--info) 20%, var(--border-primary)); }
.notification-item.completed { opacity: 0.6; }
.notification-item.completed .notif-title { text-decoration: line-through; }
.notif-icon { width: 40px; height: 40px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.notif-icon.type-info { background: var(--info-bg); color: var(--info); }
.notif-icon.type-success { background: var(--success-bg); color: var(--success); }
.notif-icon.type-warning { background: var(--warning-bg); color: var(--warning); }
.notif-icon.type-error { background: var(--error-bg); color: var(--error); }
.notif-icon.type-task { background: var(--bg-tertiary); color: var(--text-secondary); }
.notif-content { flex: 1; min-width: 0; }
.notif-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-md); margin-bottom: 4px; }
.notif-title { font-weight: 600; }
.notif-time { font-size: 0.8rem; color: var(--text-tertiary); white-space: nowrap; }
.notif-message { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: var(--space-sm); }
.notif-due { display: flex; align-items: center; gap: 4px; font-size: 0.8rem; color: var(--warning); }
.notif-actions { display: flex; gap: var(--space-xs); }

/* Suggestions Page */
.suggestions-page { }
.boards-nav { display: flex; gap: var(--space-sm); margin-bottom: var(--space-xl); flex-wrap: wrap; border-bottom: 1px solid var(--border-primary); padding-bottom: var(--space-md); }
.board-tab { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-full); color: var(--text-secondary); font-weight: 500; transition: all var(--transition-fast); }
.board-tab:hover { background: var(--bg-tertiary); }
.board-tab.active { background: var(--tab-color, var(--accent-primary)); color: var(--text-inverse); }
.board-tab i { font-size: 1rem; }
.board-tab.active i { color: var(--text-inverse) !important; }
.board-tab-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-sm); flex-shrink: 0; }
.board-tab-icon svg { width: 16px; height: 16px; }
.board-tab.active .board-tab-icon { background: rgba(255,255,255,0.2) !important; color: #fff !important; }
.board-tab.active .board-tab-icon svg { stroke: #fff; }
.board-count { background: var(--bg-tertiary); padding: 2px 8px; border-radius: var(--radius-full); font-size: 0.75rem; }
.board-tab.active .board-count { background: rgba(255,255,255,0.2); }
.board-content { }
.board-header { margin-bottom: var(--space-xl); }
.board-header h2 { font-size: 1.25rem; margin-bottom: var(--space-sm); }
.board-header p { color: var(--text-secondary); }
.suggestions-list { display: flex; flex-direction: column; gap: var(--space-md); }
.suggestion-card { display: flex; gap: var(--space-lg); padding: var(--space-lg); background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); }
.suggestion-vote { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); }
/* Vote Buttons */
.vote-btn { width: 38px; height: 38px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); background: transparent; border: 2px solid var(--border-primary); transition: all var(--transition-fast); cursor: pointer; }
.upvote-btn:hover { border-color: var(--success); color: var(--success); transform: translateY(-2px); }
.upvote-btn.voted { background: var(--success); border-color: var(--success); color: #fff; }
.upvote-btn.voted svg { stroke: #fff; }
.downvote-btn:hover { border-color: var(--error, #ef4444); color: var(--error, #ef4444); transform: translateY(2px); }
.downvote-btn.voted { background: var(--error, #ef4444); border-color: var(--error, #ef4444); color: #fff; }
.downvote-btn.voted svg { stroke: #fff; }
.vote-count { font-weight: 700; font-size: 1rem; }
.downvote-count { font-size: 0.85rem; color: var(--text-tertiary); }
.suggestion-content { flex: 1; }
.suggestion-header { display: flex; gap: var(--space-md); margin-bottom: var(--space-sm); align-items: center; flex-wrap: wrap; }
.suggestion-header .status-badge { font-size: 0.7rem; }
.status-open { background: var(--info-bg); color: var(--info); }
.status-in_progress { background: var(--warning-bg); color: var(--warning); }
.status-resolved { background: var(--success-bg); color: var(--success); }
.status-closed { background: var(--bg-tertiary); color: var(--text-tertiary); }
.suggestion-date { font-size: 0.8rem; color: var(--text-tertiary); display: flex; align-items: center; gap: 4px; }
.suggestion-expiry { font-size: 0.8rem; color: var(--text-tertiary); display: flex; align-items: center; gap: 4px; }
.suggestion-expiry.expired { color: var(--error, #ef4444); font-weight: 600; }
.suggestion-expiry.no-expiry { color: var(--success); }
.suggestion-expired { opacity: 0.6; border-color: var(--error, #ef4444); }
.suggestion-title { font-size: 1.1rem; font-weight: 600; margin-bottom: var(--space-sm); }
.suggestion-text { color: var(--text-secondary); margin-bottom: var(--space-md); }
.suggestion-footer { }
.suggestion-author { display: flex; align-items: center; gap: 4px; font-size: 0.85rem; color: var(--text-tertiary); }
.delete-suggestion-btn { align-self: flex-start; padding: var(--space-sm) var(--space-lg); min-width: 100px; }

/* AI Page */
.ai-page { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-xl); height: calc(100vh - 200px); }
.chat-container { display: flex; flex-direction: column; background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); overflow: hidden; }
.chat-messages { flex: 1; overflow-y: auto; padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
.message { display: flex; gap: var(--space-md); max-width: 80%; }
.message.user { flex-direction: row-reverse; margin-left: auto; }
.message-avatar { width: 36px; height: 36px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.message.bot .message-avatar { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; }
.message.user .message-avatar { background: var(--bg-tertiary); color: var(--text-secondary); }
.message-content { background: var(--bg-tertiary); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-lg); }
.message.user .message-content { background: var(--accent-primary); color: var(--text-inverse); }
.message-content p { margin-bottom: var(--space-sm); }
.message-content p:last-of-type { margin-bottom: 0; }
.message-time { font-size: 0.75rem; color: var(--text-tertiary); margin-top: var(--space-sm); }
.message.user .message-time { color: rgba(255,255,255,0.7); }
.typing-dots { display: flex; gap: 4px; padding: var(--space-sm) 0; }
.typing-dots span { width: 8px; height: 8px; background: var(--text-tertiary); border-radius: 50%; animation: typing 1.4s infinite; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }
.chat-suggestions { padding: 0 var(--space-lg) var(--space-md); }
.chat-suggestions p { font-size: 0.85rem; color: var(--text-tertiary); margin-bottom: var(--space-sm); }
.suggestion-chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.chip { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--bg-tertiary); border-radius: var(--radius-full); font-size: 0.85rem; color: var(--text-secondary); transition: all var(--transition-fast); }
.chip:hover { background: var(--accent-primary); color: var(--text-inverse); }
.chat-input { padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--border-primary); }
.chat-input .input-wrapper { display: flex; gap: var(--space-md); }
.chat-input input { flex: 1; padding-left: var(--space-lg); }
.send-btn { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--accent-primary); color: var(--text-inverse); display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); }
.send-btn:hover { opacity: 0.9; }
.ai-sidebar { display: flex; flex-direction: column; gap: var(--space-lg); }
.ai-info-card { background: linear-gradient(135deg, #6366f1, #8b5cf6); border-radius: var(--radius-lg); padding: var(--space-xl); color: #fff; text-align: center; }
.info-icon { width: 56px; height: 56px; background: rgba(255,255,255,0.2); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto var(--space-md); }
.ai-info-card h3 { font-size: 1.1rem; margin-bottom: var(--space-sm); }
.ai-info-card p { opacity: 0.9; font-size: 0.9rem; }
.ai-capabilities { background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); padding: var(--space-lg); }
.ai-capabilities h4 { font-size: 0.9rem; font-weight: 600; margin-bottom: var(--space-md); }
.ai-capabilities ul { display: flex; flex-direction: column; gap: var(--space-sm); }
.ai-capabilities li { display: flex; align-items: center; gap: var(--space-sm); font-size: 0.9rem; color: var(--text-secondary); }
.ai-capabilities li i { color: var(--success); }
.ai-capabilities li i.lucide-clock { color: var(--warning); }

/* User Profile Page */
.user-page { max-width: 900px; }
.profile-header { display: flex; align-items: center; gap: var(--space-xl); padding: var(--space-xl); background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-xl); margin-bottom: var(--space-xl); position: relative; }
.profile-logout-btn { position: absolute; top: var(--space-lg); right: var(--space-lg); color: var(--text-tertiary); gap: var(--space-xs); }
.profile-logout-btn:hover { color: var(--error); background: var(--error-bg); }
.profile-avatar { width: 100px; height: 100px; border-radius: var(--radius-xl); background: linear-gradient(135deg, #6366f1, #8b5cf6); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2.5rem; font-weight: 700; overflow: hidden; flex-shrink: 0; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-info h2 { font-size: 1.5rem; margin-bottom: 4px; }
.profile-email { color: var(--text-secondary); margin-bottom: var(--space-md); }
.profile-teams { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.team-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--team-color, #6366f1) 15%, transparent); color: var(--team-color, #6366f1); font-weight: 500; font-size: 0.9rem; }
.profile-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-lg); }
.profile-card { background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); padding: var(--space-lg); }
.profile-card h3 { display: flex; align-items: center; gap: var(--space-sm); font-size: 1rem; margin-bottom: var(--space-lg); }
.preference-item { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md) 0; border-bottom: 1px solid var(--border-secondary); }
.preference-item:last-child { border-bottom: none; }
.pref-info { }
.pref-label { font-weight: 500; display: block; }
.pref-desc { font-size: 0.8rem; color: var(--text-tertiary); }
.pref-select { width: auto; padding: var(--space-sm) var(--space-md); }
.theme-toggle-row { display: flex; align-items: center; gap: var(--space-sm); }
.theme-icon-sun, .theme-icon-moon { color: var(--text-tertiary); flex-shrink: 0; }
[data-theme="light"] .theme-icon-sun { color: var(--warning); }
[data-theme="dark"] .theme-icon-moon { color: var(--info); }
.stats-card { }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.stat-item { text-align: center; padding: var(--space-md); background: var(--bg-tertiary); border-radius: var(--radius-md); }
.stat-item .stat-value { font-size: 1.5rem; font-weight: 700; display: block; }
.stat-item .stat-label { font-size: 0.75rem; color: var(--text-tertiary); }

/* Auth Pages */
.auth-page { background: var(--bg-primary); }
.auth-main { display: flex; min-height: 100vh; width: 100%; }
.auth-container { display: flex; width: 100%; }
.auth-card { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: var(--space-2xl); max-width: 480px; margin: 0 auto; }
.auth-header { text-align: center; margin-bottom: var(--space-2xl); }
.auth-logo { margin-bottom: var(--space-lg); }
.auth-header h1 { font-size: 1.75rem; margin-bottom: var(--space-sm); }
.auth-header p { color: var(--text-secondary); }
.auth-flash-messages { margin-bottom: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); }
.auth-flash { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); font-size: 0.875rem; }
.auth-flash-error { background: var(--error-bg); color: var(--error); }
.auth-flash-success { background: var(--success-bg); color: var(--success); }
.auth-flash-info { background: var(--info-bg); color: var(--info); }
.auth-flash-warning { background: var(--warning-bg); color: var(--warning); }
.auth-flash svg { flex-shrink: 0; }
.user-welcome { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); background: var(--bg-tertiary); border-radius: var(--radius-md); margin-bottom: var(--space-xl); }
.welcome-avatar { width: 40px; height: 40px; border-radius: var(--radius-full); background: linear-gradient(135deg, #6366f1, #8b5cf6); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; }
.welcome-email { font-weight: 500; }
.auth-form { }
.auth-form .form-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-lg); }
.forgot-link { color: var(--text-secondary); font-size: 0.9rem; }
.forgot-link:hover { color: var(--text-primary); }
.auth-footer { text-align: center; margin-top: var(--space-xl); color: var(--text-tertiary); font-size: 0.9rem; }
.back-link { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--text-secondary); }
.back-link:hover { color: var(--text-primary); }
.password-requirements { background: var(--bg-tertiary); padding: var(--space-md); border-radius: var(--radius-md); margin-bottom: var(--space-lg); }
.requirements-title { font-weight: 500; margin-bottom: var(--space-sm); font-size: 0.9rem; }
.password-requirements ul { display: flex; flex-direction: column; gap: var(--space-xs); }
.password-requirements li { display: flex; align-items: center; gap: var(--space-sm); font-size: 0.85rem; color: var(--text-tertiary); }
.password-requirements li.valid { color: var(--success); }
.auth-decoration { flex: 1; background: var(--accent-primary); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.decoration-content { position: relative; z-index: 1; text-align: center; color: #fff; padding: var(--space-2xl); max-width: 400px; }
.decoration-content h2 { font-size: 2rem; margin-bottom: var(--space-md); }
.decoration-content p { opacity: 0.9; margin-bottom: var(--space-xl); }
.decoration-features { display: flex; flex-direction: column; gap: var(--space-md); }
.decoration-features .feature { display: flex; align-items: center; gap: var(--space-md); font-weight: 500; }
.decoration-pattern { position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }

/* Mobile Bottom Navigation */
.mobile-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg-secondary); border-top: 1px solid var(--border-primary); z-index: var(--z-header); padding: var(--space-sm) 0; padding-bottom: env(safe-area-inset-bottom, var(--space-sm)); }
.mobile-bottom-nav .nav-items { display: flex; justify-content: space-around; align-items: center; }
.mobile-bottom-nav .nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-xs) var(--space-sm); color: var(--text-tertiary); text-decoration: none; font-size: 0.65rem; font-weight: 500; transition: color var(--transition-fast); min-width: 60px; }
.mobile-bottom-nav .nav-item i { font-size: 1.25rem; }
.mobile-bottom-nav .nav-item.active { color: var(--accent-primary); }
.mobile-bottom-nav .nav-item:hover { color: var(--text-primary); }
.mobile-bottom-nav .more-btn { background: none; border: none; cursor: pointer; }

/* Mobile More Menu Popup */
.mobile-more-menu { display: none; position: fixed; bottom: 80px; left: var(--space-md); right: var(--space-md); background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-xl); box-shadow: 0 -4px 32px rgba(0,0,0,0.18); z-index: var(--z-modal); padding: var(--space-sm); transform: translateY(20px); opacity: 0; transition: transform 0.25s ease, opacity 0.25s ease; }
.mobile-more-menu.active { display: block; transform: translateY(0); opacity: 1; }
.mobile-more-menu .menu-items { display: flex; flex-direction: column; gap: 4px; }
.mobile-more-menu .menu-item { display: flex; align-items: center; gap: var(--space-md); padding: 14px var(--space-lg); border-radius: var(--radius-lg); color: var(--text-primary); text-decoration: none; font-size: 0.95rem; font-weight: 500; transition: background var(--transition-fast), transform 0.15s ease; }
.mobile-more-menu .menu-item:active { transform: scale(0.97); }
.mobile-more-menu .menu-item svg { flex-shrink: 0; }
.mobile-more-menu .menu-item.active { background: var(--bg-tertiary); }
.mobile-more-menu .menu-item:nth-child(1) svg { color: #6366f1; }
.mobile-more-menu .menu-item:nth-child(2) svg { color: #8b5cf6; }
.mobile-more-menu .menu-item:nth-child(3) svg { color: #f59e0b; }
.mobile-more-menu .menu-item:nth-child(4) svg { color: #3b82f6; }
.mobile-more-menu .menu-item:nth-child(5) svg { color: #ef4444; }
.mobile-more-menu .menu-item:hover { background: var(--bg-tertiary); }
.mobile-more-menu button.menu-item { width: 100%; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 0.95rem; text-align: left; }
.mobile-more-backdrop { display: none; position: fixed; inset: 0; z-index: calc(var(--z-modal) - 1); background: rgba(0,0,0,0.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity 0.25s ease; }
.mobile-more-backdrop.active { display: block; }

/* Responsive */
@media (max-width: 1024px) {
    .ai-page { grid-template-columns: 1fr; }
    .ai-sidebar { display: none; }
    .info-grid { grid-template-columns: 1fr; }
    .shipping-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .mobile-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: calc(var(--z-sidebar) - 1); display: none; }
    .mobile-overlay.active { display: block; }
    .mobile-close { display: flex; }
    .mobile-menu-btn { display: none; }
    .mobile-bottom-nav { display: block; }
    .main-content { margin-left: 0; padding-bottom: 80px; max-width: 100vw; }
    .content-wrapper { padding: var(--space-md); padding-bottom: var(--space-xl); }
    .main-header { padding: var(--space-md); }
    .header-title h1 { font-size: 1.25rem; }
    .filters-bar { flex-direction: column; }
    .search-box { max-width: none; width: 100%; }
    .filter-group { width: 100%; flex-wrap: wrap; }
    .filter-select { flex: 1; min-width: 120px; }
    .date-filters { width: 100%; margin-left: 0; }
    .jobs-grid { grid-template-columns: 1fr; }
    /* Hide table view on mobile, show cards instead */
    .jobs-table-wrapper { display: none; }
    .mobile-job-cards { display: flex; flex-direction: column; gap: var(--space-md); }
    .mobile-job-card { background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); padding: var(--space-lg); }
    .mobile-job-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-md); }
    .mobile-job-card-title { font-weight: 600; font-size: 1rem; margin-bottom: 4px; }
    .mobile-job-card-title a { color: var(--text-primary); }
    .mobile-job-card-id { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-tertiary); }
    .mobile-job-card-body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
    .mobile-job-card-row { display: flex; flex-direction: column; gap: 2px; }
    .mobile-job-card-label { font-size: 0.7rem; color: var(--text-tertiary); text-transform: uppercase; }
    .mobile-job-card-value { font-size: 0.85rem; color: var(--text-primary); }
    .mobile-job-card-tags { grid-column: span 2; display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); }
    .auth-decoration { display: none; }
    .auth-card { padding: var(--space-lg); }
    .profile-header { flex-direction: column; text-align: center; padding-top: calc(var(--space-xl) + 36px); }
    .profile-logout-btn { top: var(--space-md); right: var(--space-md); }
    .profile-teams { justify-content: center; }
    .tabs { overflow-x: auto; flex-wrap: nowrap; }
    .tab span { display: none; }
    .form-row { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr; }
    .exec-meta-grid { grid-template-columns: 1fr; }
    .shipping-summary-grid { grid-template-columns: 1fr; }
    /* Suggestion card mobile */
    .suggestion-card { flex-direction: column; }
    .suggestion-vote { flex-direction: row; gap: var(--space-md); }
    .delete-suggestion-btn { align-self: stretch; }
}

/* ========================================
   MATCHES - Tinder-style Matching Section
   ======================================== */

.matches-page {
    display: flex;
    gap: var(--space-xl);
    height: calc(100vh - 200px);
    min-height: 500px;
    position: relative;
    overflow-x: hidden;
}

.swipe-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
}

.cards-stack {
    position: relative;
    width: 100%;
    max-width: 380px;
    height: 520px;
}

.swipe-card {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    cursor: grab;
    user-select: none;
    touch-action: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: flex;
    flex-direction: column;
}

.swipe-card:active {
    cursor: grabbing;
}

.swipe-card.swiped {
    pointer-events: none;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.swipe-card.swipe-right {
    transform: translateX(150%) rotate(30deg);
    opacity: 0;
}

.swipe-card.swipe-left {
    transform: translateX(-150%) rotate(-30deg);
    opacity: 0;
}

.card-image {
    position: relative;
    width: 100%;
    background-size: cover;
    background-position: center;
}


.swipe-indicator {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.like-indicator {
    right: 20px;
    background: var(--success);
    color: #fff;
    border: 4px solid #fff;
}

.pass-indicator {
    left: 20px;
    background: var(--error);
    color: #fff;
    border: 4px solid #fff;
}

.card-info {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

.card-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.card-role {
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.card-department {
    color: var(--text-tertiary);
    font-weight: 400;
}

.card-bio {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.card-tags,
.card-interests {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
    overflow: hidden;
    max-height: 3.2em;
}

.interest-tag {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Desktop swipe detail panel (hidden on mobile) */
.swipe-detail-panel { display: none; }
.swipe-detail-panel-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.sdp-name { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); }
.sdp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); color: var(--text-secondary); font-size: 0.9rem; }
.sdp-meta span + span::before { content: '\00b7'; margin-right: var(--space-sm); }
.sdp-bio { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; }
.sdp-tags-section h4 { font-size: 0.8rem; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-xs); }
.sdp-tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.sdp-tags .interest-tag { font-size: 0.8rem; }

.empty-stack {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    border: 2px dashed var(--border-primary);
    color: var(--text-tertiary);
    text-align: center;
    padding: var(--space-xl);
}

.empty-stack i {
    font-size: 3rem;
    opacity: 0.5;
}

.empty-stack h3 {
    color: var(--text-primary);
    font-weight: 600;
}

.swipe-actions {
    display: flex;
    gap: var(--space-lg);
    align-items: center;
}

.action-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-md);
}

.action-btn:hover {
    transform: scale(1.1);
}

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

.pass-btn {
    background: var(--bg-secondary);
    color: var(--error);
    border: 2px solid var(--error);
}

.pass-btn:hover {
    background: var(--error);
    color: #fff;
}

.like-btn {
    background: var(--bg-secondary);
    color: var(--success);
    border: 2px solid var(--success);
}

.like-btn:hover {
    background: var(--success);
    color: #fff;
}

.superlike-btn {
    width: 52px;
    height: 52px;
    background: var(--bg-secondary);
    color: var(--info);
    border: 2px solid var(--info);
    font-size: 1.25rem;
}

.superlike-btn:hover {
    background: var(--info);
    color: #fff;
}

/* Matches Sidebar */
.matches-sidebar {
    position: fixed;
    right: -360px;
    top: 0;
    bottom: 0;
    width: 360px;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-primary);
    z-index: var(--z-modal);
    transition: right var(--transition-base);
    display: flex;
    flex-direction: column;
}

.matches-sidebar.open {
    right: 0;
}

.matches-sidebar .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--border-primary);
}

.matches-sidebar .sidebar-header h3 {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 1.1rem;
    color: var(--text-primary);
}

.matches-sidebar .sidebar-header h3 i {
    color: var(--error);
}

.close-sidebar-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

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

.matches-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
}

.match-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
}

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

.match-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.match-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.match-name {
    font-weight: 600;
    color: var(--text-primary);
}

.match-role {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.no-matches {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-2xl);
    color: var(--text-tertiary);
    text-align: center;
}

.no-matches i {
    font-size: 2.5rem;
    opacity: 0.5;
}

.match-count-badge {
    background: var(--error);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--radius-full);
    margin-left: var(--space-xs);
}

/* Match Modal */
.match-modal {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-modal) + 10);
    display: none;
    align-items: center;
    justify-content: center;
}

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

.match-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
}

.match-modal-content {
    position: relative;
    z-index: 1;
    max-width: 400px;
    width: 90%;
}

.match-celebration {
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 50%, #ef4444 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    text-align: center;
    color: #fff;
    animation: matchPop 0.5s ease;
}

@keyframes matchPop {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

.hearts-animation {
    position: relative;
    height: 60px;
    margin-bottom: var(--space-md);
}

.hearts-animation i {
    position: absolute;
    font-size: 2rem;
    animation: floatHeart 2s ease-in-out infinite;
}

.heart-1 { left: 30%; animation-delay: 0s; }
.heart-2 { left: 50%; transform: translateX(-50%); animation-delay: 0.3s; }
.heart-3 { right: 30%; animation-delay: 0.6s; }

@keyframes floatHeart {
    0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
    50% { transform: translateY(-20px) scale(1.2); opacity: 0.8; }
}

.match-celebration h2 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: var(--space-sm);
}

.match-celebration p {
    opacity: 0.9;
    margin-bottom: var(--space-xl);
}

.match-avatars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.match-avatar-large {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 4px solid #fff;
    overflow: hidden;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
}

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

.match-heart-icon {
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ec4899;
    font-size: 1.5rem;
    animation: pulse 1s ease infinite;
}

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

.match-celebration .btn-primary {
    background: #fff;
    color: #ec4899;
    font-weight: 600;
}

.match-celebration .btn-primary:hover {
    background: rgba(255,255,255,0.9);
}

.match-modal-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.match-celebration .btn-secondary {
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.4);
}

.match-celebration .btn-secondary:hover {
    background: rgba(255,255,255,0.3);
}

/* Matches Mobile Responsive */
@media (max-width: 768px) {
    .content-wrapper:has(.matches-page) { padding: 0; }

    .matches-page {
        height: calc(100vh - 280px);
    }

    .card-info {
        padding: var(--space-md);
    }

    .card-name {
        font-size: 1.25rem;
    }

    .action-btn {
        width: 56px;
        height: 56px;
        font-size: 1.25rem;
    }

    .superlike-btn {
        width: 46px;
        height: 46px;
        font-size: 1rem;
    }

    .matches-sidebar {
        width: 100%;
        right: -100%;
    }

    .match-avatar-large {
        width: 70px;
        height: 70px;
    }

    .match-celebration h2 {
        font-size: 1.5rem;
    }
}

/* ========================================
   ACTION BUTTON ICONS FIX
   ======================================== */

.action-btn i {
    font-size: inherit;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========================================
   MATCHES APP SHELL & VIEWS
   ======================================== */

body.matches-section .mobile-bottom-nav { display: none !important; }
body.matches-section .main-content { padding-bottom: 0; }
body.matches-section .content-wrapper { display: flex; flex-direction: column; overflow: hidden; }

.matches-app { position: relative; flex: 1; min-height: 0; }
.matches-view { min-height: 0; }

/* Active profile switcher (in main header actions) */
.profile-switcher {
    position: relative;
    z-index: var(--z-header);
}
.profile-switcher-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.profile-switcher-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.profile-switcher-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}
.profile-switcher-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-switcher-chevron { color: var(--text-tertiary); }
.profile-switcher-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    padding: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.profile-switcher.open .profile-switcher-menu { display: block; }
.profile-switcher-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--text-primary);
    transition: background var(--transition-fast);
}
.profile-switcher-item:hover { background: var(--bg-tertiary); }
.profile-switcher-item.active {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.10), rgba(168, 85, 247, 0.10));
}
.profile-switcher-item-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}
.profile-switcher-item-label {
    font-size: 0.9rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.no-profile-prompt {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--space-md); padding: var(--space-2xl); text-align: center; min-height: 400px;
    color: var(--text-tertiary);
}
.no-profile-prompt h3 { color: var(--text-primary); font-size: 1.25rem; }
.no-profile-prompt svg { opacity: 0.5; }

/* Matches-specific bottom nav */
.matches-bottom-nav {
    display: none; position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--bg-secondary); border-top: 1px solid var(--border-primary);
    z-index: var(--z-header); padding: var(--space-sm) 0;
    padding-bottom: env(safe-area-inset-bottom, var(--space-sm));
}
.matches-bottom-nav .nav-items { display: flex; justify-content: space-around; }
.matches-bottom-nav .nav-item {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: var(--space-xs) var(--space-sm); color: var(--text-tertiary);
    font-size: 0.65rem; font-weight: 500; min-width: 60px;
    background: none; border: none; cursor: pointer; text-decoration: none;
    transition: color var(--transition-fast);
}
.matches-bottom-nav .nav-item.active { color: var(--accent-primary); }
.matches-bottom-nav .nav-item:hover { color: var(--text-primary); }

/* Matches desktop right sidebar nav */
.matches-desktop-nav {
    display: none; /* hidden on mobile, shown on desktop */
    position: fixed; right: 0; top: 0; bottom: 0;
    width: 220px;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-primary);
    z-index: var(--z-header);
    flex-direction: column;
    padding: var(--space-lg) 0;
}
.desktop-nav-brand {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: 0 var(--space-lg); margin-bottom: var(--space-xl);
    font-weight: 800; font-size: 1.05rem;
    color: var(--text-primary);
}
.desktop-nav-brand svg {
    color: var(--accent-primary);
}
.desktop-nav-items {
    flex: 1; display: flex; flex-direction: column; gap: 2px;
    padding: 0 var(--space-sm);
}
.desktop-nav-item {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: 10px var(--space-md);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.9rem; font-weight: 500;
    background: none; border: none; cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none; width: 100%; text-align: left;
}
.desktop-nav-item:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.desktop-nav-item.active {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.08), rgba(168, 85, 247, 0.08));
    color: var(--accent-primary);
    font-weight: 600;
}
.desktop-nav-item.active svg {
    color: var(--accent-primary);
}
.desktop-nav-item svg {
    flex-shrink: 0;
    color: var(--text-tertiary);
    transition: color var(--transition-fast);
}
.desktop-nav-item:hover svg {
    color: var(--text-primary);
}
.desktop-nav-footer {
    padding: 0 var(--space-sm);
    border-top: 1px solid var(--border-primary);
    padding-top: var(--space-md);
    margin-top: auto;
}
.desktop-nav-exit {
    color: var(--text-tertiary) !important;
}
.desktop-nav-exit:hover {
    color: var(--text-secondary) !important;
    background: var(--bg-tertiary);
}

/* Desktop layout: show sidebar, adjust content */
@media (min-width: 769px) {
    .matches-desktop-nav {
        display: flex;
    }
    body.matches-section .main-content {
        margin-right: 220px;
    }
    .matches-bottom-nav {
        display: none !important;
    }

    /* Desktop swipe: card + detail panel side by side */
    .swipe-container {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: var(--space-2xl);
        flex-wrap: wrap;
    }
    .swipe-detail-panel {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;
        min-width: 280px;
        max-width: 420px;
        max-height: 520px;
        overflow-y: auto;
        background: var(--bg-secondary);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-lg);
        padding: var(--space-xl);
    }
    .swipe-actions {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   MULTI-IMAGE CARDS
   ======================================== */

.card-images { position: relative; width: 100%; height: 65%; overflow: hidden; }
.card-images .card-image {
    position: absolute; inset: 0; background-size: cover; background-position: center top;
    opacity: 0; transition: opacity var(--transition-fast);
}
.card-images .card-image.active { opacity: 1; }

.image-tap-left, .image-tap-right {
    position: absolute; top: 0; bottom: 0; width: 40%; z-index: 5; cursor: pointer;
}
.image-tap-left { left: 0; }
.image-tap-right { right: 0; }

.image-dots {
    position: absolute; top: var(--space-sm); left: 0; right: 0;
    display: flex; justify-content: center; gap: 4px; z-index: 6;
    padding: 0 var(--space-md);
}
.image-dots .dot {
    flex: 1; height: 3px; border-radius: 2px; max-width: 60px;
    background: rgba(255,255,255,0.4); transition: all var(--transition-fast);
}
.image-dots .dot.active { background: #fff; }

/* ========================================
   PROFILE DETAIL OVERLAY
   ======================================== */

.matches-detail-overlay {
    position: fixed; inset: 0; z-index: calc(var(--z-modal) + 5);
    background: var(--bg-primary); overflow-y: auto;
    flex-direction: column;
}
.detail-header {
    position: absolute; top: 0; left: 0; right: 0; z-index: 10;
    padding: var(--space-md);
}
.detail-close-btn { background: rgba(0,0,0,0.3); color: #fff; border-radius: var(--radius-full); }
.detail-close-btn:hover { background: rgba(0,0,0,0.5); }
.detail-images {
    width: 100%; height: 55vh; position: relative; flex-shrink: 0; overflow: hidden;
}
.detail-images .card-image {
    position: absolute; inset: 0; background-size: cover; background-position: center top;
    opacity: 0; transition: opacity var(--transition-fast);
}
.detail-images .card-image.active { opacity: 1; }
.detail-images .image-tap-left, .detail-images .image-tap-right {
    position: absolute; top: 0; bottom: 0; width: 50%; z-index: 5; cursor: pointer;
}
.detail-images .image-tap-left { left: 0; }
.detail-images .image-tap-right { right: 0; }
.detail-images .image-dots { position: absolute; top: var(--space-sm); left: 0; right: 0; display: flex; justify-content: center; gap: 4px; z-index: 6; padding: 0 var(--space-md); }
.detail-images .dot { flex: 1; height: 3px; border-radius: 2px; max-width: 60px; background: rgba(255,255,255,0.4); }
.detail-images .dot.active { background: #fff; }

.detail-info { padding: var(--space-xl); flex: 1; overflow-y: auto; }
.detail-name { font-size: 1.75rem; font-weight: 700; color: var(--text-primary); }
.detail-meta { display: flex; align-items: center; gap: var(--space-sm); color: var(--text-secondary); margin: var(--space-sm) 0; font-size: 0.95rem; flex-wrap: wrap; }
.detail-sep { color: var(--text-tertiary); }
.detail-bio { color: var(--text-secondary); line-height: 1.6; margin-top: var(--space-md); }
.detail-section { margin-top: var(--space-xl); }
.detail-section h3 { font-size: 0.8rem; color: var(--text-tertiary); margin-bottom: var(--space-sm); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.detail-tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.detail-actions {
    position: sticky; bottom: 0; padding: var(--space-lg);
    background: var(--bg-secondary); border-top: 1px solid var(--border-primary);
    display: flex; justify-content: center; gap: var(--space-xl);
}

/* Desktop: profile detail as centered card with side-by-side layout */
.detail-card { display: contents; }
.detail-body { display: contents; }
@media (min-width: 769px) {
    .matches-detail-overlay {
        background: rgba(0,0,0,0.45);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .detail-card {
        display: flex;
        flex-direction: row;
        width: 90%;
        max-width: 820px;
        height: 80vh;
        max-height: 640px;
        background: var(--bg-primary);
        border-radius: var(--radius-xl);
        box-shadow: 0 24px 64px rgba(0,0,0,0.25);
        overflow: hidden;
        position: relative;
    }
    .detail-header {
        position: absolute; top: 0; left: 0; z-index: 15;
    }
    .detail-images {
        width: 45%; height: 100%; flex-shrink: 0;
        border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    }
    .detail-body {
        display: flex;
        flex-direction: column;
        width: 55%;
        min-height: 0;
    }
    .detail-info {
        flex: 1; overflow-y: auto;
        padding: var(--space-2xl) var(--space-xl) var(--space-lg);
    }
    .detail-actions {
        position: relative;
        border-radius: 0;
    }
}

/* ========================================
   MATCHES LIST VIEW
   ======================================== */

.matches-list-view { padding: var(--space-lg); }
.matches-list-header { margin-bottom: var(--space-lg); }
.matches-list-header h2 { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); }

.matches-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-md); }

.matches-empty {
    grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: var(--space-md); padding: var(--space-2xl);
    color: var(--text-tertiary); text-align: center;
}
.matches-empty svg { opacity: 0.4; }

.match-card {
    background: var(--bg-secondary); border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg); overflow: hidden; cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.match-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.match-card-image { width: 100%; aspect-ratio: 3/4; background-size: cover; background-position: center; position: relative; }
.match-card-info { padding: var(--space-md); }
.match-card-name { font-weight: 600; font-size: 0.95rem; color: var(--text-primary); display: flex; align-items: center; gap: var(--space-sm); }
.match-card-preview { font-size: 0.8rem; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.unread-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--error); color: #fff; font-size: 0.7rem; font-weight: 600;
}

/* ========================================
   MATCH CHAT
   ======================================== */

.match-chat-container {
    display: flex; flex-direction: column; height: calc(100vh - 200px);
    background: var(--bg-secondary); border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg); overflow: hidden;
}
.match-chat-header {
    display: flex; align-items: center; gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-primary); flex-shrink: 0;
}
.match-chat-user { display: flex; align-items: center; gap: var(--space-md); flex: 1; min-width: 0; }
.match-chat-user[style*="cursor"] .match-chat-avatar { transition: box-shadow var(--transition-fast); }
.match-chat-user[style*="cursor"]:hover .match-chat-avatar { box-shadow: 0 0 0 2px var(--accent-primary); }
.match-chat-avatar { width: 40px; height: 40px; border-radius: 50%; background-size: cover; background-position: center; flex-shrink: 0; }
.match-chat-name { font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-delete-match-btn {
    margin-left: auto; flex-shrink: 0;
    color: var(--text-tertiary) !important;
}
.chat-delete-match-btn:hover {
    color: #ef4444 !important; background: rgba(239, 68, 68, 0.1) !important;
}
.match-chat-messages {
    flex: 1; overflow-y: auto; padding: var(--space-lg);
    display: flex; flex-direction: column; gap: var(--space-sm);
}
.match-chat-input {
    display: flex; gap: var(--space-sm); padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--border-primary); flex-shrink: 0;
}
.match-chat-input input {
    flex: 1; border: 1px solid var(--border-primary); border-radius: var(--radius-full);
    padding: var(--space-sm) var(--space-lg); background: var(--bg-primary);
    color: var(--text-primary); font-size: 0.9rem;
}
.match-chat-input input:focus { outline: none; border-color: var(--accent-primary); }
.match-chat-input .send-btn {
    width: 40px; height: 40px; border-radius: 50%; border: none;
    background: var(--accent-primary); color: var(--text-inverse);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: opacity var(--transition-fast); flex-shrink: 0;
}
.match-chat-input .send-btn:hover { opacity: 0.85; }

.chat-msg { display: flex; flex-direction: column; max-width: 75%; }
.chat-msg.mine { align-self: flex-end; align-items: flex-end; }
.chat-msg.theirs { align-self: flex-start; align-items: flex-start; }
.chat-msg-bubble {
    padding: var(--space-sm) var(--space-md); border-radius: var(--radius-lg);
    font-size: 0.9rem; line-height: 1.5; word-break: break-word;
}
.chat-msg.mine .chat-msg-bubble { background: var(--accent-primary); color: var(--text-inverse); border-bottom-right-radius: var(--radius-sm); }
.chat-msg.theirs .chat-msg-bubble { background: var(--bg-tertiary); color: var(--text-primary); border-bottom-left-radius: var(--radius-sm); }
.chat-msg-time { font-size: 0.7rem; color: var(--text-tertiary); margin-top: 2px; }
.chat-msg.pending .chat-msg-bubble { opacity: 0.7; }
.chat-msg.failed .chat-msg-bubble {
    background: rgba(239, 68, 68, 0.12);
    color: var(--text-primary);
    border: 1px solid rgba(239, 68, 68, 0.25);
}
.chat-msg.failed .chat-msg-time { color: var(--error); }

/* ========================================
   MY PROFILES VIEW
   ======================================== */

.my-profiles-view { padding: var(--space-lg); }
.profiles-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-xl); }
.profiles-header h2 { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); }
.profiles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-lg); }

.profile-card-own {
    background: var(--bg-secondary); border: 2px solid var(--border-primary);
    border-radius: var(--radius-lg); overflow: hidden;
    transition: all var(--transition-fast);
}
.profile-card-own.active-profile { border-color: var(--success); }
.profile-card-own-image { width: 100%; aspect-ratio: 3/4; background-size: cover; background-position: center; position: relative; }
.profile-card-own-info { padding: var(--space-md); }
.profile-card-own-name { font-weight: 600; font-size: 0.95rem; color: var(--text-primary); }
.profile-card-own-meta { font-size: 0.8rem; color: var(--text-tertiary); margin-top: 2px; }
.profile-card-own-actions { display: flex; gap: var(--space-xs); margin-top: var(--space-sm); flex-wrap: wrap; align-items: center; }
.active-badge {
    display: inline-flex; align-items: center; padding: 2px 8px;
    border-radius: var(--radius-full); background: var(--success-bg, rgba(34,197,94,0.1));
    color: var(--success); font-size: 0.75rem; font-weight: 600;
}
.active-badge-card {
    position: absolute; top: 8px; left: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.6rem; font-weight: 800; letter-spacing: 0.05em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white; padding: 3px 8px; border-radius: var(--radius-full);
    line-height: 1.4; white-space: nowrap;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
    z-index: 2;
}

/* Profile subsections */
.profiles-subsection {
    margin-bottom: var(--space-xl);
}
.profiles-subsection-header {
    display: flex; align-items: center; gap: var(--space-sm);
    font-weight: 700; font-size: 0.95rem; color: var(--text-primary);
    margin-bottom: var(--space-md); padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-primary);
}
.profiles-subsection-header svg { color: var(--accent-primary); flex-shrink: 0; }
.profiles-subsection-header-ai svg { color: #6366f1; }
.profiles-subsection-ai {
    padding: var(--space-lg);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.03), rgba(6, 182, 212, 0.03));
    border: 1px solid rgba(99, 102, 241, 0.12);
    border-radius: var(--radius-lg);
}
.profiles-subsection-desc {
    font-size: 0.8rem; color: var(--text-tertiary);
    margin: calc(var(--space-sm) * -1) 0 var(--space-md) 0;
    line-height: 1.5;
}
.profiles-empty-subsection {
    display: flex; align-items: center; gap: var(--space-md);
    padding: var(--space-lg);
    color: var(--text-tertiary); font-size: 0.9rem;
    border: 1px dashed var(--border-primary);
    border-radius: var(--radius-md);
}

/* Restart swipe button */
.restart-swipe-btn {
    margin-top: var(--space-md);
    display: inline-flex; align-items: center; gap: var(--space-sm);
}

/* Profile action buttons (edit/delete) */
.profile-action-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; border-radius: var(--radius-md);
    font-size: 0.75rem; font-weight: 600; cursor: pointer;
    border: none; transition: all var(--transition-fast);
    line-height: 1;
}
.profile-action-btn svg { flex-shrink: 0; }

.profile-edit-btn {
    background: rgba(59, 130, 246, 0.1); color: #3b82f6;
}
.profile-edit-btn:hover {
    background: #3b82f6; color: #fff;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    transform: translateY(-1px);
}

.profile-delete-btn {
    background: rgba(239, 68, 68, 0.1); color: #ef4444;
}
.profile-delete-btn:hover {
    background: #ef4444; color: #fff;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
    transform: translateY(-1px);
}

/* Delete confirmation modal */
.delete-modal {
    position: fixed; inset: 0; z-index: 600;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: all var(--transition-base);
}
.delete-modal.active {
    opacity: 1; visibility: visible;
}
.delete-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(6px);
}
.delete-modal-content {
    position: relative; z-index: 1;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    max-width: 380px; width: 90%;
    text-align: center;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
    transform: scale(0.9) translateY(10px);
    transition: transform var(--transition-base);
}
.delete-modal.active .delete-modal-content {
    transform: scale(1) translateY(0);
}
.delete-modal-icon {
    width: 56px; height: 56px; margin: 0 auto var(--space-md);
    display: flex; align-items: center; justify-content: center;
    background: rgba(239, 68, 68, 0.1);
    border-radius: var(--radius-full);
    color: #ef4444;
}
.delete-modal-content h3 {
    font-size: 1.15rem; font-weight: 700;
    color: var(--text-primary); margin-bottom: var(--space-sm);
}
.delete-modal-content p {
    font-size: 0.9rem; color: var(--text-secondary);
    line-height: 1.5; margin-bottom: var(--space-lg);
}
.delete-modal-actions {
    display: flex; gap: var(--space-sm); justify-content: center;
}
.delete-modal-confirm-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: #ef4444 !important; color: #fff !important;
    border: none; padding: 8px 20px; font-weight: 600;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}
.delete-modal-confirm-btn:hover {
    background: #dc2626 !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
    transform: translateY(-1px);
}

/* Activate Profile Modal */
.activate-modal {
    position: fixed; inset: 0; z-index: 600;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: all var(--transition-base);
}
.activate-modal.active {
    opacity: 1; visibility: visible;
}
.activate-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(6px);
}
.activate-modal-content {
    position: relative; z-index: 1;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    max-width: 380px; width: 90%;
    text-align: center;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
    transform: scale(0.9) translateY(10px);
    transition: transform var(--transition-base);
}
.activate-modal.active .activate-modal-content {
    transform: scale(1) translateY(0);
}
.activate-modal-icon {
    width: 56px; height: 56px; margin: 0 auto var(--space-md);
    display: flex; align-items: center; justify-content: center;
    background: rgba(34, 197, 94, 0.1);
    border-radius: var(--radius-full);
    color: #22c55e;
}
.activate-modal-content h3 {
    font-size: 1.15rem; font-weight: 700;
    color: var(--text-primary); margin-bottom: var(--space-sm);
}
.activate-modal-content p {
    font-size: 0.9rem; color: var(--text-secondary);
    line-height: 1.5; margin-bottom: var(--space-lg);
}
.activate-modal-actions {
    display: flex; gap: var(--space-sm); justify-content: center;
}
.activate-modal-confirm-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: #22c55e !important; color: #fff !important;
    border: none; padding: 8px 20px; font-weight: 600;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}
.activate-modal-confirm-btn:hover {
    background: #16a34a !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);
    transform: translateY(-1px);
}
.profile-card-own-image.activatable {
    cursor: pointer;
    transition: filter var(--transition-fast);
}
.profile-card-own-image.activatable:hover {
    filter: brightness(0.85);
}

/* ========================================
   PROFILE FORM
   ======================================== */

.profile-form-container { max-width: 600px; width: 100%; margin: 0 auto; padding: var(--space-lg); box-sizing: border-box; overflow-x: hidden; }
.profile-form-header { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); }
.profile-form-header h2 { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); }
.form-help { font-size: 0.8rem; color: var(--text-tertiary); margin-top: var(--space-xs); display: block; }

/* Mobile-only profile editor UI (enabled via media query) */
#profileEditorMobileTabs,
#profileEditorMobileSavebar { display: none; }

/* Intro banner */
.profile-form-intro {
    text-align: center; padding: var(--space-xl) var(--space-lg);
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.08), rgba(168, 85, 247, 0.08));
    border-radius: var(--radius-lg); margin-bottom: var(--space-xl);
    border: 1px solid rgba(236, 72, 153, 0.15);
}
.profile-form-intro .intro-emoji { font-size: 2.5rem; margin-bottom: var(--space-sm); }
.profile-form-intro h3 {
    font-size: 1.3rem; font-weight: 700; color: var(--text-primary);
    margin-bottom: var(--space-xs);
}
.profile-form-intro p {
    font-size: 0.9rem; color: var(--text-secondary); max-width: 380px;
    margin: 0 auto; line-height: 1.5;
}

/* Form sections */
.pf-section {
    background: var(--bg-secondary); border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg); padding: var(--space-lg);
    margin-bottom: var(--space-lg); box-sizing: border-box; overflow: hidden;
}
.pf-section-header {
    display: flex; align-items: center; gap: var(--space-sm);
    font-weight: 700; font-size: 1rem; color: var(--text-primary);
    margin-bottom: var(--space-md); padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-primary);
}
.pf-section-header svg { color: var(--accent-primary); flex-shrink: 0; }
.pf-section-desc {
    font-size: 0.85rem; color: var(--text-tertiary);
    margin: calc(var(--space-sm) * -1) 0 var(--space-md) 0;
}
.pf-optional-badge {
    font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em;
    background: linear-gradient(135deg, #ec4899, #a855f7);
    color: white; padding: 2px 8px; border-radius: var(--radius-full);
    margin-left: auto;
}
.pf-optional { font-size: 0.8rem; color: var(--text-tertiary); font-weight: 400; }
.pf-required { color: #ec4899; font-weight: 600; }

/* Image upload grid */
.image-upload-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md);
}
.image-upload-slot {
    aspect-ratio: 3/4; border: 2px dashed var(--border-primary);
    border-radius: var(--radius-md); display: flex; align-items: center;
    justify-content: center; cursor: pointer; position: relative;
    overflow: hidden; transition: all var(--transition-fast);
    background-size: cover !important; background-position: center !important;
    background-repeat: no-repeat !important; background-color: var(--bg-tertiary);
    color: var(--text-tertiary); flex-direction: column; gap: var(--space-xs);
    box-sizing: border-box; /* prevent grid overflow on mobile when borders are present */
}
.image-upload-slot:hover {
    border-color: #ec4899; color: #ec4899;
    transform: translateY(-2px); box-shadow: 0 4px 12px rgba(236, 72, 153, 0.15);
}
.image-upload-slot.has-image { border-style: solid; border-color: #a855f7; }
.image-upload-slot.has-image svg { display: none; }
.image-upload-slot-main {
    grid-row: span 2; border-color: rgba(236, 72, 153, 0.3);
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.04), rgba(168, 85, 247, 0.04));
}
.slot-label {
    font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-tertiary); margin-top: var(--space-xs);
}
.image-upload-slot.has-image .slot-label { display: none; }

/* Stock photos */
.stock-photos-section { margin-top: var(--space-lg); }
.stock-photos-label {
    font-size: 0.85rem; font-weight: 600; color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}
.stock-photos-grid {
    display: flex; gap: var(--space-sm); overflow-x: auto;
    padding-bottom: var(--space-sm); scrollbar-width: thin;
}
.stock-photo {
    flex-shrink: 0; width: 56px; height: 56px; border-radius: var(--radius-full);
    overflow: hidden; cursor: pointer; border: 3px solid transparent;
    transition: all var(--transition-fast); position: relative;
}
.stock-photo img { width: 100%; height: 100%; object-fit: cover; }
.stock-photo:hover {
    border-color: #ec4899; transform: scale(1.1);
    box-shadow: 0 2px 10px rgba(236, 72, 153, 0.3);
}
.stock-photo.selected {
    border-color: #a855f7;
    animation: stockPick 0.6s ease;
}
@keyframes stockPick {
    0% { transform: scale(1); }
    30% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Tag quick-pick */
.pf-tags-quickpick {
    display: flex; flex-wrap: wrap; gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}
.pf-tag-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 14px; border-radius: var(--radius-full);
    border: 1.5px solid var(--border-primary);
    background: var(--bg-tertiary); color: var(--text-secondary);
    font-size: 0.85rem; font-weight: 500; cursor: pointer;
    transition: all var(--transition-fast);
}
.pf-tag-chip:hover {
    border-color: #a855f7; color: #a855f7;
    background: rgba(168, 85, 247, 0.06);
}
.pf-tag-chip.active {
    border-color: #a855f7; background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(168, 85, 247, 0.1));
    color: #a855f7; font-weight: 600;
}

/* Save button */
.btn-save-profile {
    display: inline-flex; align-items: center; gap: var(--space-sm);
    background: linear-gradient(135deg, #ec4899, #a855f7) !important;
    border: none; color: white; font-weight: 600;
    padding: 10px 28px; font-size: 0.95rem;
}
.btn-save-profile:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.3);
}

/* Age emoji next to input */
.age-input-wrapper {
    position: relative; display: flex; align-items: center; gap: var(--space-sm);
}
.age-input-wrapper input { flex: 1; }
.age-emoji {
    width: 36px; height: 36px; flex-shrink: 0;
    transition: transform var(--transition-fast);
}
.age-emoji.emoji-bounce {
    animation: emojiBounce 0.5s ease;
}
@keyframes emojiBounce {
    0% { transform: scale(0.5) rotate(-10deg); opacity: 0; }
    50% { transform: scale(1.3) rotate(5deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Gender "Other" text input */
.gender-other-input {
    margin-top: var(--space-sm);
}

/* Image preview modal */
.slot-preview-modal {
    position: fixed; inset: 0; z-index: 500;
    display: flex; align-items: center; justify-content: center;
}
.slot-preview-backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px);
}
.slot-preview-content {
    position: relative; z-index: 1;
    max-width: 90vw; max-height: 85vh;
    display: flex; flex-direction: column; align-items: center; gap: var(--space-lg);
}
.slot-preview-close {
    position: absolute; top: -40px; right: 0;
    background: none; border: none; color: white; cursor: pointer;
    padding: 4px; border-radius: var(--radius-full);
    transition: background var(--transition-fast);
}
.slot-preview-close:hover { background: rgba(255, 255, 255, 0.15); }
.slot-preview-img {
    max-width: 100%; max-height: 70vh;
    border-radius: var(--radius-lg); object-fit: contain;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.slot-preview-actions {
    display: flex; gap: var(--space-md);
}
.slot-preview-delete {
    color: #ef4444 !important; border-color: rgba(239, 68, 68, 0.3) !important;
}
.slot-preview-delete:hover {
    background: rgba(239, 68, 68, 0.1) !important;
}
.slot-preview-replace {
    background: linear-gradient(135deg, #ec4899, #a855f7) !important;
    border: none; color: white;
}

/* ========================================
   AI PROFILE STYLES
   ======================================== */

/* AI Badge - shared base */
.ai-badge {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.65rem; font-weight: 800; letter-spacing: 0.05em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #6366f1, #06b6d4);
    color: white; padding: 2px 7px; border-radius: var(--radius-full);
    line-height: 1.4; white-space: nowrap;
    box-shadow: 0 1px 4px rgba(99, 102, 241, 0.3);
}

/* AI badge on swipe/match cards - positioned overlay */
.ai-badge-card {
    position: absolute; top: 8px; left: 8px;
    font-size: 0.6rem; padding: 3px 8px;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
    z-index: 2;
}
.ai-badge-card-tr {
    position: absolute; top: 10px; right: 10px;
    font-size: 0.65rem; padding: 3px 10px;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
    z-index: 7;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
    background: linear-gradient(135deg, #6366f1, #06b6d4);
    color: white; border-radius: var(--radius-full); line-height: 1.4;
}
.card-star-sign {
    font-weight: 400; opacity: 0.7; font-size: 1.1em;
}

/* AI badge in chat header - smaller inline */
.ai-badge-sm {
    font-size: 0.55rem; padding: 1px 5px;
    vertical-align: middle; margin-left: 4px;
}

/* AI section in profile form */
.pf-section-ai {
    border-color: rgba(99, 102, 241, 0.2);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.03), rgba(6, 182, 212, 0.03));
}
.pf-section-ai .pf-section-header {
    border-bottom-color: rgba(99, 102, 241, 0.15);
}
.pf-section-ai .pf-section-header svg {
    color: #6366f1;
}

/* AI toggle switch */
.pf-ai-toggle {
    display: flex; align-items: center; gap: var(--space-sm);
    cursor: pointer; margin-bottom: var(--space-sm);
    user-select: none;
}
.pf-ai-toggle input[type="checkbox"] {
    display: none;
}
.pf-ai-toggle-slider {
    position: relative; width: 44px; height: 24px;
    background: var(--bg-tertiary); border: 2px solid var(--border-primary);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
    flex-shrink: 0;
}
.pf-ai-toggle-slider::after {
    content: ''; position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    background: var(--text-tertiary);
    border-radius: 50%;
    transition: all var(--transition-fast);
}
.pf-ai-toggle input:checked + .pf-ai-toggle-slider {
    background: linear-gradient(135deg, #6366f1, #06b6d4);
    border-color: #6366f1;
}
.pf-ai-toggle input:checked + .pf-ai-toggle-slider::after {
    left: 22px; background: white;
}
.pf-ai-toggle-label {
    font-size: 0.9rem; font-weight: 600; color: var(--text-primary);
}

/* AI context textarea wrapper */
.pf-ai-context-wrapper {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid rgba(99, 102, 241, 0.1);
}

/* AI profile card styling in "My Profiles" grid */
.profile-card-own.ai-profile {
    border: 1.5px solid rgba(99, 102, 241, 0.25);
}
.profile-card-own.ai-profile .profile-card-own-image {
    position: relative;
}
.profile-card-own.ai-profile .profile-card-own-meta {
    color: #6366f1; font-weight: 500;
}

/* ========================================
   MATCHES MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .matches-bottom-nav { display: block; }
    .matches-desktop-nav { display: none !important; }
    body.matches-section .main-content { margin-right: 0; }
    .matches-app {
        padding-bottom: 60px;
        min-height: 0;
    }
    .matches-view {
        min-height: 0;
    }
    .matches-view[data-view="swipe"] {
        height: calc(100vh - 200px);
        height: calc(100dvh - 200px);
        display: flex;
    }
    .swipe-container {
        flex: 1;
        min-height: 0;
        justify-content: flex-start;
        padding-top: var(--space-md);
        gap: var(--space-md);
    }
    .cards-stack {
        max-width: 320px;
        height: min(450px, calc(100% - 80px));
    }

    .match-chat-container {
        position: fixed; inset: 0; border-radius: 0; border: none;
        height: auto; z-index: var(--z-modal);
    }
    .match-chat-input {
        padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
    }

    .matches-list-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .profiles-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .image-upload-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
    .image-upload-slot-main { grid-row: span 2; }
    .profile-form-container { padding: var(--space-md); }
    .profile-form-intro { padding: var(--space-lg) var(--space-md); }
    .pf-section { padding: var(--space-md); }
    .stock-photo { width: 48px; height: 48px; }
    .pf-tag-chip { font-size: 0.8rem; padding: 5px 10px; }
    /* Profile edit form actions: avoid horizontal overflow on narrow screens */
    #viewProfileEdit .form-actions {
        flex-direction: column;
        align-items: stretch;
    }
    #viewProfileEdit .form-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Prevent mobile browser auto-zoom on input focus (requires >= 16px) */
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="date"], input[type="datetime-local"],
    select, textarea {
        font-size: 16px;
    }

    /* ========================================
       MOBILE PROFILE EDITOR (EDIT/CREATE)
       New UI used ONLY on mobile for the profile edit/create view.
       ======================================== */
    body.matches-profile-editor-open { overflow: hidden; }

    #viewProfileEdit {
        position: fixed;
        inset: 0;
        z-index: var(--z-modal);
        background: var(--bg-primary);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    #viewProfileEdit .profile-form-container {
        max-width: none;
        margin: 0;
        padding: 0;
        overflow-x: visible;
    }

    #viewProfileEdit .profile-editor-mobile-sticky {
        position: sticky;
        top: 0;
        z-index: calc(var(--z-modal) + 1);
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-primary);
        padding: var(--space-md);
        padding-top: calc(var(--space-md) + env(safe-area-inset-top, 0px));
    }

    #viewProfileEdit .profile-form-header {
        margin-bottom: var(--space-sm);
    }

    #viewProfileEdit .profile-form-header h2 {
        font-size: 1.05rem;
    }

    /* Hide the old intro + action row; mobile uses tabs + fixed save bar */
    #viewProfileEdit .profile-form-intro { display: none; }
    #viewProfileEdit .form-actions { display: none; }

    #viewProfileEdit #profileForm {
        padding: var(--space-md);
        padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
    }

    #profileEditorMobileTabs {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 6px;
        scrollbar-width: none;
    }

    #profileEditorMobileTabs::-webkit-scrollbar { display: none; }

    #profileEditorMobileTabs .pem-tab {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 12px;
        border-radius: var(--radius-full);
        border: 1px solid var(--border-primary);
        background: var(--bg-tertiary);
        color: var(--text-secondary);
        font-size: 0.8rem;
        font-weight: 800;
        letter-spacing: 0.02em;
        cursor: pointer;
        white-space: nowrap;
    }

    #profileEditorMobileTabs .pem-tab.active {
        background: linear-gradient(135deg, rgba(236, 72, 153, 0.14), rgba(168, 85, 247, 0.14));
        border-color: rgba(236, 72, 153, 0.35);
        color: var(--text-primary);
    }

    #viewProfileEdit .pf-section[data-mobile-section] { display: none; }
    #viewProfileEdit .pf-section[data-mobile-section].is-mobile-active { display: block; }

    #profileEditorMobileSavebar {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: calc(var(--z-modal) + 2);
        padding: var(--space-md);
        padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
        background: var(--bg-secondary);
        border-top: 1px solid var(--border-primary);
    }

    #profileEditorMobileSavebar .profile-editor-mobile-save-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   NUDE LABS DROPDOWN
   ======================================== */

.nav-item-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.9rem;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
}

.nav-dropdown-toggle:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.nav-dropdown-toggle.active {
    background: var(--accent-bg);
    color: var(--accent-primary);
}

.nav-dropdown-toggle i:first-child {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.nav-dropdown-toggle span {
    flex: 1;
}

.dropdown-arrow {
    font-size: 0.8rem;
    transition: transform var(--transition-fast);
}

.nav-dropdown-toggle.open .dropdown-arrow {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    display: none;
    padding: var(--space-xs) 0 var(--space-xs) var(--space-lg);
    margin-top: var(--space-xs);
}

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

.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.85rem;
    transition: all var(--transition-fast);
}

.nav-dropdown-item:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.nav-dropdown-item.active {
    background: var(--accent-bg);
    color: var(--accent-primary);
}

.nav-dropdown-item i {
    font-size: 1rem;
    width: 18px;
    text-align: center;
}

/* Flame icon special color */
.nav-dropdown-item i.lucide-flame {
    color: #f97316;
}

.nav-dropdown-item:hover i.lucide-flame,
.nav-dropdown-item.active i.lucide-flame {
    color: #ea580c;
}

/* ========================================
   MOBILE MENU GROUP (Nude Labs)
   ======================================== */

.menu-item-group {
    border-top: 1px solid var(--border-primary);
    border-bottom: 1px solid var(--border-primary);
    padding: var(--space-sm) 0;
    margin: var(--space-sm) 0;
}

.menu-group-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.menu-group-header i {
    font-size: 0.9rem;
}

.menu-item-nested {
    padding-left: var(--space-2xl);
}

.menu-item-nested i.lucide-flame {
    color: #f97316;
}

/* ========================================
   NUDE LABS MODAL
   ======================================== */

.nude-labs-modal {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-modal) + 20);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
}

.nude-labs-modal.active {
    display: flex;
}

.nude-labs-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.nude-labs-content {
    position: relative;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 34%),
        var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.32);
    width: 100%;
    max-width: 660px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.3s ease;
}

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

.nude-labs-header {
    position: relative;
    padding: var(--space-xl);
    text-align: center;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    color: #fff;
}

.nude-labs-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-md);
}

.nude-labs-icon svg {
    stroke: #fff;
}

.nude-labs-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--space-xs);
}

.nude-labs-header p {
    opacity: 0.9;
    font-size: 0.9rem;
}

.nude-labs-close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: rgba(255, 255, 255, 0.8);
    transition: all var(--transition-fast);
}

.nude-labs-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.nude-labs-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: var(--space-md);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.nude-labs-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.nude-labs-option:hover {
    background: var(--bg-secondary);
    border-color: rgba(14, 116, 144, 0.45);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.nude-labs-option.active {
    border-color: rgba(14, 116, 144, 0.5);
    box-shadow: var(--shadow-md);
    background:
        linear-gradient(120deg, rgba(14, 116, 144, 0.13), rgba(245, 158, 11, 0.12)),
        var(--bg-primary);
}

.nude-labs-option.active .option-arrow {
    color: #0e7490;
}

.option-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.option-icon-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
}

.option-icon.flame {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
    color: #fff;
}

.option-icon.flame svg {
    stroke: #fff;
}

.option-icon.dilemma {
    background: #fff;
    border: 1px solid var(--border-primary);
    overflow: hidden;
    padding: 0;
}

.option-icon.dilemma .option-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.option-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.option-title {
    font-weight: 700;
    font-size: 0.93rem;
    color: var(--text-primary);
}

.option-desc {
    font-size: 0.78rem;
    line-height: 1.25;
    color: var(--text-tertiary);
}

.option-arrow {
    color: var(--text-tertiary);
    flex-shrink: 0;
    transition: transform var(--transition-fast), color var(--transition-fast);
}

.nude-labs-option:hover .option-arrow {
    color: var(--text-primary);
    transform: translateX(2px);
}

.nude-labs-option.dilemma-option {
    border-color: rgba(217, 119, 6, 0.4);
    background:
        linear-gradient(120deg, rgba(15, 39, 71, 0.14), rgba(180, 83, 9, 0.12)),
        var(--bg-primary);
}

.nude-labs-option.dilemma-option::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(250, 204, 21, 0.25);
    pointer-events: none;
}

.nude-labs-option.dilemma-option .option-icon.dilemma {
    border-color: rgba(250, 204, 21, 0.45);
    box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.2), 0 8px 14px rgba(15, 39, 71, 0.25);
}

.nude-labs-option.dilemma-option .option-desc {
    color: rgba(245, 158, 11, 0.92);
}

[data-theme="dark"] .nude-labs-option.dilemma-option .option-desc {
    color: #fcd34d;
}

@media (max-width: 600px) {
    .nude-labs-modal {
        padding: 0;
        align-items: stretch;
    }
    .nude-labs-content {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
    .nude-labs-options {
        grid-template-columns: 1fr;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}

/* Nav link SVG icons alignment */
.nav-link svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ========================================
   CODING CAMP
   ======================================== */

/* --- Nude Labs option icon for Coding Camp --- */
.option-icon.code {
    background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
    color: #fff;
    border-radius: var(--radius-md);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.option-icon.code svg { stroke: #fff; }

/* --- Progress Bar --- */
.cc-progress-bar {
    margin-bottom: var(--space-lg);
}
.cc-progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xs);
    font-size: 0.85rem;
}
.cc-progress-label {
    color: var(--text-secondary);
    font-weight: 500;
}
.cc-progress-count {
    color: var(--text-primary);
    font-weight: 600;
}
.cc-progress-track {
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}
.cc-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #06b6d4, #3b82f6);
    border-radius: 3px;
    transition: width var(--transition-slow);
}

/* --- Index: Sections --- */
.cc-section { margin-bottom: var(--space-xl); }
.cc-section-header { margin-bottom: var(--space-md); }
.cc-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    color: var(--text-primary);
}
.cc-section-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

/* --- Index: Exercise Grid --- */
.cc-exercise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-lg);
}
.cc-exercise-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    position: relative;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
}
.cc-exercise-card.cc-locked {
    opacity: 0.45;
    cursor: pointer;
}

/* Bypass confirmation modal */
.cc-bypass-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}
.cc-bypass-dialog {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    max-width: 420px;
    width: 90%;
    box-shadow: var(--shadow-lg);
}
.cc-bypass-dialog h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: var(--space-md);
    color: var(--text-primary);
}
.cc-bypass-dialog p {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.55;
    margin-bottom: var(--space-xl);
}
.cc-bypass-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
}

.cc-exercise-card.cc-completed {
    border-color: var(--success);
}
.cc-exercise-card.cc-unlocked:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.cc-card-lock {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    color: var(--text-tertiary);
}
.cc-card-check {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    color: var(--success);
    background: var(--success-bg);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cc-card-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-tertiary);
    line-height: 1;
    margin-bottom: var(--space-sm);
}
.cc-exercise-card.cc-completed .cc-card-number { color: var(--success); }
.cc-exercise-card.cc-unlocked .cc-card-number { color: var(--accent-primary); }

.cc-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}
.cc-card-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    flex: 1;
}
.cc-card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}
.cc-difficulty {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}
.cc-difficulty.cc-beginner {
    color: var(--success);
    background: var(--success-bg);
}
.cc-difficulty.cc-intermediate {
    color: var(--warning);
    background: var(--warning-bg);
}
.cc-card-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-md);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--accent-primary);
    text-decoration: none;
    transition: gap var(--transition-fast);
}
.cc-card-link:hover { gap: var(--space-sm); }

/* --- Exercise Page: 3-Panel Layout --- */
.coding-camp-exercise .main-header { display: none; }
.coding-camp-exercise .sidebar { display: none; }
.coding-camp-exercise .main-content { margin-left: 0; max-width: 100%; }
.coding-camp-exercise .mobile-bottom-nav { display: none; }
.coding-camp-exercise .content-wrapper { padding: 0; max-width: none; }

.cc-exercise-layout {
    display: grid;
    grid-template-columns: 240px 3fr 1.2fr;
    gap: var(--space-sm);
    height: 100vh;
    width: 100%;
    padding: var(--space-sm);
    box-sizing: border-box;
}
.cc-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
.cc-panel-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-primary);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.cc-panel-header svg { flex-shrink: 0; }

/* --- Variables Panel --- */
.cc-variables-panel { overflow-y: auto; }
.cc-variables-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-xs) 0;
}
.cc-variables-empty {
    padding: var(--space-lg) var(--space-md);
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.8rem;
}
.cc-variable-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--space-xs) var(--space-md);
    border-bottom: 1px solid var(--border-secondary);
    gap: var(--space-sm);
}
.cc-var-name {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    color: #06b6d4;
    white-space: nowrap;
}
[data-theme="dark"] .cc-var-name { color: #22d3ee; }
.cc-var-value {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-primary);
    text-align: right;
    word-break: break-all;
}

/* --- Editor Panel --- */
.cc-editor-panel { min-width: 0; }

.cc-instructions {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
}
.cc-instructions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}
.cc-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}
.cc-back-btn:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}
.cc-exercise-badge {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-tertiary);
    background: var(--bg-tertiary);
    padding: 3px 10px;
    border-radius: var(--radius-sm);
}
.cc-exercise-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.cc-exercise-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.cc-hints-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--warning);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 0;
    margin-top: var(--space-xs);
    font-weight: 500;
}
.cc-hints-toggle:hover { text-decoration: underline; }
.cc-hints-toggle.active { color: var(--text-secondary); }

.cc-hints {
    margin-top: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--warning-bg);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--warning);
}
.cc-hint {
    display: flex;
    gap: var(--space-sm);
    align-items: baseline;
    font-size: 0.8rem;
    color: var(--text-secondary);
    padding: 2px 0;
}
.cc-hint-num {
    font-weight: 700;
    color: var(--warning);
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* --- Code Editor Area --- */
.cc-code-editor-wrapper {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.cc-code-editor {
    display: flex;
    align-items: flex-start;
    height: 100%;
    background: var(--terminal-bg);
    overflow: auto;
}
.cc-line-numbers {
    padding: 0;
    background: var(--terminal-bg);
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.65;
    text-align: right;
    user-select: none;
    overflow: visible;
    min-width: 36px;
    border-right: 1px solid var(--terminal-border);
    position: sticky;
    left: 0;
}
.cc-line-num {
    padding: 0 6px 0 4px;
    height: 1.65em;
}
.cc-line-num.cc-readonly {
    background: rgba(128, 128, 128, 0.1);
    color: var(--text-tertiary);
}

/* --- Segment-based code body --- */
.cc-code-body {
    flex: 1;
    overflow: visible;
}

/* Readonly line: inert, unselectable, visually distinct */
.cc-readonly-line {
    display: block;
    padding: 0 var(--space-md);
    height: 1.65em;
    background: rgba(128, 128, 128, 0.08);
    color: #6b7280;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.65;
    white-space: pre;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    cursor: default;
    border-left: 2px solid rgba(128, 128, 128, 0.2);
    margin: 0;
    box-sizing: border-box;
}
[data-theme="dark"] .cc-readonly-line {
    background: rgba(255, 255, 255, 0.03);
    color: #6b7280;
    border-left-color: rgba(255, 255, 255, 0.08);
}

/* Editable segment: styled like a code editor */
.cc-editable-block {
    display: block;
    width: 100%;
    margin: 0;
    min-height: 0;
    padding: 0 var(--space-md);
    background: var(--terminal-bg);
    color: var(--terminal-text);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.65;
    border: none;
    outline: none;
    resize: none;
    tab-size: 4;
    -moz-tab-size: 4;
    white-space: pre;
    overflow: hidden;
    word-wrap: off;
    box-sizing: border-box;
    margin: 0;
    border-left: 2px solid transparent;
}
.cc-editable-block:focus {
    background: rgba(59, 130, 246, 0.04);
    border-left-color: var(--accent-primary);
}
[data-theme="dark"] .cc-editable-block:focus {
    background: rgba(59, 130, 246, 0.06);
}

/* --- Action Bar --- */
.cc-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    border-top: 1px solid var(--border-primary);
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
    gap: var(--space-sm);
}
.cc-action-left, .cc-action-right {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.cc-run-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.85rem;
}
.cc-shortcut-hint {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
}
.cc-reset-btn {
    background: none;
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    transition: all var(--transition-fast);
}
.cc-reset-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}
.cc-nav-btn {
    background: none;
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    transition: all var(--transition-fast);
    text-decoration: none;
}
.cc-nav-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}
.cc-nav-next {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}
.cc-nav-next:hover {
    opacity: 0.9;
    color: #fff;
}
.cc-complete-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    background: var(--success);
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: opacity var(--transition-fast);
}
.cc-complete-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.cc-complete-btn:not(:disabled):hover { opacity: 0.9; }

.cc-completed-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--success);
}
.cc-next-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
}

/* --- Output Panel --- */
.cc-output-panel {
    flex-shrink: 0;
    max-height: 180px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
}
.cc-output-content {
    padding: var(--space-sm) var(--space-md);
    background: var(--terminal-bg);
    color: var(--terminal-text);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.5;
    overflow: auto;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    flex: 1;
    min-height: 40px;
}
.cc-output-content.cc-output-error { color: var(--error); }
.cc-output-content.cc-output-success { color: var(--success); }

/* --- Output / Variables Tabs --- */
.cc-output-tabs { gap: 0; }
.cc-output-tab {
    background: none;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-tertiary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.cc-output-tab:hover { color: var(--text-secondary); }
.cc-output-tab.active {
    color: var(--text-secondary);
    border-bottom-color: var(--accent-primary);
}
.cc-output-tabcontent { display: none; }
.cc-output-tabcontent.active { display: block; }
.cc-output-panel .cc-variables-list {
    overflow-y: auto;
    max-height: 140px;
}

/* --- Spinner --- */
.cc-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cc-spin 0.6s linear infinite;
}
@keyframes cc-spin {
    to { transform: rotate(360deg); }
}

/* --- Chat Panel --- */
.cc-chat-panel { min-height: 0; }
.cc-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-height: 0;
}
.cc-chat-message {
    display: flex;
}
.cc-chat-message .cc-chat-bubble {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-size: 0.82rem;
    line-height: 1.5;
    max-width: 88%;
    margin: 0;
    word-break: break-word;
}
.cc-chat-user {
    justify-content: flex-end;
}
.cc-chat-user .cc-chat-bubble {
    background: var(--accent-primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.cc-chat-assistant .cc-chat-bubble {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}
.cc-chat-message.cc-typing .cc-chat-bubble {
    opacity: 0.5;
    font-style: italic;
}
.cc-chat-assistant code {
    background: rgba(0, 0, 0, 0.15);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.8rem;
}
.cc-chat-assistant pre {
    background: var(--terminal-bg);
    color: var(--terminal-text);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    margin: var(--space-xs) 0;
    overflow-x: auto;
    font-size: 0.8rem;
}
.cc-chat-assistant pre code {
    background: none;
    padding: 0;
}
.cc-chat-input {
    display: flex;
    padding: var(--space-sm);
    border-top: 1px solid var(--border-primary);
    gap: var(--space-xs);
    flex-shrink: 0;
}
.cc-chat-input input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-family: var(--font-main);
    outline: none;
    transition: border-color var(--transition-fast);
}
.cc-chat-input input:focus {
    border-color: var(--accent-primary);
}
.cc-chat-send {
    background: var(--accent-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    padding: 8px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-fast);
}
.cc-chat-send:hover { opacity: 0.85; }

/* --- Mobile Panel Tabs --- */
.cc-mobile-tabs {
    display: none;
    position: fixed;
    bottom: 60px;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-primary);
    z-index: 90;
    padding: 0 var(--space-sm);
}
.cc-mobile-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px;
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
}
.cc-mobile-tab.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

/* --- Success Modal --- */
.cc-success-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.cc-success-modal.active { display: flex; }
.cc-success-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
}
#confettiCanvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.cc-success-content {
    position: relative;
    z-index: 2;
    background: var(--bg-primary);
    border-radius: var(--radius-xl, 16px);
    padding: 2.5rem 2rem;
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: cc-success-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes cc-success-pop {
    from { transform: scale(0.7); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.cc-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981, #06d6a0);
    color: #fff;
    margin-bottom: 1rem;
}
.cc-success-content h2 {
    font-size: 1.5rem;
    margin: 0 0 0.5rem;
    color: var(--text-primary);
}
.cc-success-content p {
    color: var(--text-secondary);
    margin: 0 0 1.5rem;
}
.cc-success-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
}
.cc-success-next {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border-radius: var(--radius-md);
}
.cc-success-dismiss {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0.5rem;
}
.cc-success-dismiss:hover { color: var(--text-primary); }

/* --- Responsive --- */
@media (max-width: 1100px) {
    .cc-exercise-layout {
        grid-template-columns: 1fr;
        height: auto;
        min-height: calc(100vh - 80px);
    }
    .cc-variables-panel,
    .cc-chat-panel {
        display: none;
    }
    .cc-panel.cc-mobile-visible {
        display: flex !important;
    }
    .cc-editor-panel {
        min-height: 60vh;
    }
    .cc-editor-panel.cc-mobile-visible,
    .cc-editor-panel {
        display: flex;
    }
    .cc-mobile-tabs {
        display: flex;
    }
    .cc-shortcut-hint { display: none; }
}

@media (max-width: 600px) {
    .cc-exercise-grid {
        grid-template-columns: 1fr;
    }
    .cc-instructions {
        padding: var(--space-sm) var(--space-md);
    }
}

/* =============================================
   PRISONER'S DILEMMA (.pd-)
   ============================================= */

/* --- Active Banner (coding camp index) --- */
.pd-active-banner {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(168,85,247,0.08));
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-lg);
}
.pd-active-banner-icon {
    color: var(--accent-primary);
    flex-shrink: 0;
}
.pd-active-banner-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.85rem;
}
.pd-active-banner-text strong { font-size: 0.95rem; }
.pd-active-banner-text span { color: var(--text-secondary); font-size: 0.8rem; }
.pd-active-banner-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    padding: 8px 16px;
}

/* --- Dilemma Index --- */
.pd-theme-page .content-wrapper {
    background:
        radial-gradient(circle at 8% -8%, rgba(14, 116, 144, 0.2), rgba(14, 116, 144, 0)),
        radial-gradient(circle at 94% -12%, rgba(217, 119, 6, 0.2), rgba(217, 119, 6, 0));
    border-radius: var(--radius-xl);
}

.pd-page-title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

.pd-page-title-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(245, 158, 11, 0.45);
    box-shadow: 0 8px 18px rgba(15, 39, 71, 0.22);
    flex-shrink: 0;
    background: #fff;
}

.pd-page-title-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pd-index {
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.pd-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px;
    gap: var(--space-lg);
    align-items: end;
    padding: clamp(1.1rem, 2.3vw, 2rem);
    border-radius: calc(var(--radius-xl) + 2px);
    border: 1px solid rgba(217, 119, 6, 0.46);
    background: linear-gradient(145deg, #0f2747 0%, #154d63 48%, #5c3b17 100%);
    color: #fff;
    overflow: hidden;
    box-shadow: 0 18px 36px rgba(2, 6, 23, 0.28);
}

.pd-hero::before {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    right: -48px;
    top: -124px;
    background: radial-gradient(circle, rgba(250, 204, 21, 0.32) 0%, rgba(250, 204, 21, 0) 72%);
    pointer-events: none;
}

.pd-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.pd-hero-back {
    width: fit-content;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.12);
}

.pd-hero-back:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
}

.pd-hero-badge {
    width: fit-content;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(250, 204, 21, 0.45);
    background: rgba(15, 23, 42, 0.28);
}

.pd-hero-title {
    margin: 0;
    font-size: clamp(1.2rem, 2.6vw, 2rem);
    line-height: 1.15;
    letter-spacing: 0.01em;
}

.pd-hero-copy {
    margin: 0;
    max-width: 56ch;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.88);
}

.pd-hero-metrics {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.pd-hero-metric {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(15, 23, 42, 0.32);
}

.pd-hero-metric-value {
    font-size: 1rem;
    font-weight: 700;
}

.pd-hero-metric-label {
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.84);
}

.pd-hero-emblem {
    position: relative;
    z-index: 1;
    width: 148px;
    height: 148px;
    border-radius: 22px;
    overflow: hidden;
    justify-self: end;
    transform: rotate(-6deg);
    border: 1px solid rgba(250, 204, 21, 0.45);
    box-shadow: 0 12px 24px rgba(15, 39, 71, 0.34);
}

.pd-hero-emblem-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pd-create-section {
    background:
        linear-gradient(180deg, rgba(15, 39, 71, 0.06), rgba(180, 83, 9, 0.08)),
        var(--bg-secondary);
    border: 1px solid rgba(180, 83, 9, 0.36);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
}

.pd-create-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.pd-create-section h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.pd-create-chip {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(180, 83, 9, 0.35);
    color: #b45309;
    background: rgba(245, 158, 11, 0.14);
}

.pd-create-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.pd-create-label {
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-weight: 600;
}

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

.pd-minutes-input {
    width: 92px;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    text-align: center;
}

.pd-minutes-input:focus {
    outline: none;
    border-color: #0e7490;
    box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.14);
}

.pd-theme-page #createSessionBtn {
    background: linear-gradient(135deg, #0e7490 0%, #b45309 100%);
    color: #fff;
}

.pd-theme-page #createSessionBtn:hover {
    filter: brightness(1.05);
}

.pd-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.pd-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.pd-section-title {
    font-size: 1.03rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}

.pd-section-note {
    font-size: 0.73rem;
    color: var(--text-secondary);
    border: 1px dashed rgba(148, 163, 184, 0.55);
    border-radius: var(--radius-full);
    padding: 4px 10px;
}

/* --- Session Cards Grid --- */
.pd-sessions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--space-md);
}

.pd-session-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0)),
        var(--bg-secondary);
    border: 1px solid rgba(148, 163, 184, 0.42);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-decoration: none;
    color: var(--text-primary);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
    cursor: pointer;
}

[data-theme="dark"] .pd-session-card {
    background:
        linear-gradient(180deg, rgba(148, 163, 184, 0.09), rgba(148, 163, 184, 0)),
        var(--bg-secondary);
    border-color: rgba(148, 163, 184, 0.28);
}

.pd-session-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0e7490 0%, #f59e0b 100%);
}

.pd-session-card:hover {
    border-color: rgba(14, 116, 144, 0.48);
    box-shadow: 0 16px 32px rgba(2, 6, 23, 0.15);
    transform: translateY(-3px);
}

.pd-session-finished {
    opacity: 0.9;
}

.pd-session-finished::before {
    background: linear-gradient(90deg, #64748b 0%, #22c55e 100%);
}

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

.pd-session-id {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.pd-session-card-body {
    display: flex;
    gap: var(--space-lg);
}

.pd-session-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.pd-session-stat svg {
    color: #0e7490;
    flex-shrink: 0;
}

[data-theme="dark"] .pd-session-stat svg {
    color: #22d3ee;
}

.pd-session-card-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    font-size: 0.76rem;
    color: var(--text-tertiary);
}

.pd-session-enter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 0.64rem;
    border: 1px solid rgba(14, 116, 144, 0.4);
    color: #0e7490;
    background: rgba(14, 116, 144, 0.08);
}

/* --- Status Badges --- */
.pd-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid transparent;
}
.pd-status-lobby {
    background: rgba(14, 116, 144, 0.1);
    color: #0e7490;
    border-color: rgba(14, 116, 144, 0.26);
}
.pd-status-coding {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.3);
}
.pd-status-simulating {
    background: rgba(15, 118, 110, 0.12);
    color: #0f766e;
    border-color: rgba(15, 118, 110, 0.3);
}
.pd-status-finished {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
    border-color: rgba(34, 197, 94, 0.3);
}

/* --- Empty State --- */
.pd-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl) var(--space-lg);
    color: var(--text-secondary);
    text-align: center;
    gap: 10px;
    border: 1px dashed rgba(148, 163, 184, 0.5);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(14, 116, 144, 0.05), rgba(14, 116, 144, 0)),
        var(--bg-secondary);
}

.pd-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(245, 158, 11, 0.35);
    box-shadow: 0 10px 20px rgba(15, 39, 71, 0.14);
}

.pd-empty-state p { margin: 0; }
.pd-empty-hint { font-size: 0.84rem; color: var(--text-tertiary); }

/* --- Lobby Phase --- */
.pd-lobby-card {
    max-width: 600px;
    margin: 0 auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
}
.pd-lobby-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
}
.pd-lobby-title {
    text-align: center;
    padding: var(--space-lg) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}
.pd-lobby-title h2 { margin: 0; font-size: 1.3rem; }
.pd-lobby-title p { margin: 0; color: var(--text-secondary); font-size: 0.9rem; }
.pd-lobby-title svg { color: var(--accent-primary); }

.pd-lobby-participants {
    margin: var(--space-lg) 0;
    padding: var(--space-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}
.pd-lobby-participants h4 {
    margin: 0 0 var(--space-sm) 0;
    font-size: 0.85rem;
    font-weight: 600;
}

.pd-participant-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pd-participant-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 6px var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
}
.pd-participant-row:nth-child(odd) { background: rgba(0,0,0,0.02); }
[data-theme="dark"] .pd-participant-row:nth-child(odd) { background: rgba(255,255,255,0.02); }
.pd-participant-name { font-weight: 500; }
.pd-tag-submitted {
    margin-left: auto;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--success);
    background: rgba(34,197,94,0.1);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.pd-lobby-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    margin: var(--space-lg) 0;
}
.pd-join-btn, .pd-start-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* --- Rules Summary (Lobby) --- */
.pd-rules-summary {
    border-top: 1px solid var(--border-primary);
    padding-top: var(--space-lg);
}
.pd-rules-summary h4 {
    margin: 0 0 var(--space-md) 0;
    font-size: 0.85rem;
    font-weight: 600;
}
.pd-rules-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
}
.pd-rule-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--space-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    text-align: center;
}
.pd-rule-emoji { font-size: 1.3rem; }
.pd-rule-label { font-size: 0.72rem; color: var(--text-secondary); }
.pd-rule-score { font-family: var(--font-mono); font-weight: 700; font-size: 0.9rem; }
.pd-rule-both-attack .pd-rule-score { color: var(--error); }
.pd-rule-both-coop .pd-rule-score { color: var(--success); }
.pd-rule-mixed .pd-rule-score { color: var(--warning, #ca8a04); }
.pd-rules-note {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin: var(--space-md) 0 0;
}

/* --- Timer Bar --- */
.pd-timer-bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-primary);
    font-size: 0.82rem;
    flex-shrink: 0;
}
.pd-timer-bar svg { color: var(--text-tertiary); flex-shrink: 0; }
#timerDisplay {
    font-family: var(--font-mono);
    font-weight: 700;
    min-width: 50px;
}
.pd-timer-progress {
    flex: 1;
    height: 6px;
    background: var(--bg-primary);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.pd-timer-fill {
    height: 100%;
    background: var(--accent-primary);
    border-radius: var(--radius-full);
    transition: width 1s linear, background 0.3s ease;
}
.pd-submitted-badge {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--success);
    background: rgba(34,197,94,0.1);
    padding: 3px 10px;
    border-radius: var(--radius-full);
}

/* --- Right Panel (Coding Phase) --- */
.pd-rules-panel-body {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    overflow-y: auto;
    flex: 1;
}
.pd-scoring-table {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pd-score-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px var(--space-sm);
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
}
.pd-score-row span:last-child {
    font-family: var(--font-mono);
    font-weight: 600;
}
.pd-participants-sidebar h4 {
    margin: 0 0 var(--space-sm) 0;
    font-size: 0.82rem;
    font-weight: 600;
}
.pd-tournament-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: auto;
}

/* --- Simulation Arena --- */
.pd-sim-section {
    border-top: 1px solid var(--border-primary);
    padding: var(--space-md);
    overflow-y: auto;
    flex-shrink: 0;
    max-height: 50vh;
}
.pd-arena {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
    padding: var(--space-lg) 0;
}
.pd-char {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    transition: color 0.3s ease;
    position: relative;
}
.pd-char-figure { line-height: 0; }
.pd-char-name {
    font-weight: 600;
    font-size: 0.85rem;
}
.pd-char-score {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.1rem;
}
.pd-attacking {
    color: var(--error);
}
.pd-attacking .pd-char-figure svg {
    filter: drop-shadow(0 0 8px rgba(239,68,68,0.4));
}
.pd-cooperating {
    color: var(--success);
}
.pd-cooperating .pd-char-figure svg {
    filter: drop-shadow(0 0 8px rgba(34,197,94,0.4));
}

.pd-vs-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.pd-vs-text {
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--text-tertiary);
    letter-spacing: 2px;
}
.pd-vs-turns {
    font-size: 0.7rem;
    color: var(--text-tertiary);
}

/* --- Turns History Table --- */
.pd-turns-table-wrap {
    max-height: 250px;
    overflow-y: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-primary);
}
.pd-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}
.pd-history-table th {
    position: sticky;
    top: 0;
    background: var(--bg-tertiary);
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-primary);
}
.pd-history-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-primary);
}
.pd-history-table tr:last-child td { border-bottom: none; }
.pd-history-table tr:hover { background: rgba(0,0,0,0.02); }
[data-theme="dark"] .pd-history-table tr:hover { background: rgba(255,255,255,0.02); }

.pd-attack {
    color: var(--error);
    font-weight: 600;
}
.pd-cooperate {
    color: var(--success);
    font-weight: 600;
}

/* --- Simulating Phase --- */
.pd-loading-card {
    max-width: 400px;
    margin: var(--space-2xl) auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-2xl);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    text-align: center;
}
.pd-loading-card h3 { margin: 0; font-size: 1.1rem; }
.pd-loading-card p { margin: 0; color: var(--text-secondary); font-size: 0.85rem; }

/* --- Finished Phase: Results --- */
.pd-results-container {
    max-width: 900px;
    margin: 0 auto;
}
.pd-results-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}
.pd-results-header h2 { margin: 0; font-size: 1.2rem; }

/* --- Leaderboard Table --- */
.pd-leaderboard {
    margin-bottom: var(--space-xl);
}
.pd-leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.pd-leaderboard-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-primary);
}
.pd-leaderboard-table td {
    padding: 12px 16px;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--border-primary);
}
.pd-leaderboard-table tr:last-child td { border-bottom: none; }
.pd-leaderboard-table tr:hover { background: rgba(0,0,0,0.015); }
[data-theme="dark"] .pd-leaderboard-table tr:hover { background: rgba(255,255,255,0.02); }

.pd-rank-1 td:first-child { font-size: 1.2rem; }
.pd-rank-2 td:first-child { font-size: 1.1rem; }
.pd-rank-3 td:first-child { font-size: 1rem; }
.pd-rank-1 { background: rgba(234,179,8,0.04); }
.pd-rank-2 { background: rgba(148,163,184,0.04); }
.pd-rank-3 { background: rgba(180,83,9,0.04); }

/* --- Match Cards --- */
.pd-matches-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 var(--space-md) 0;
}
.pd-match-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-md);
}
.pd-match-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}
.pd-match-card:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    transform: translateY(-1px);
}
.pd-match-players {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    font-size: 0.82rem;
    font-weight: 500;
    margin-bottom: var(--space-sm);
}
.pd-match-vs {
    font-weight: 700;
    color: var(--text-tertiary);
    font-size: 0.72rem;
    text-transform: uppercase;
}
.pd-match-score {
    font-family: var(--font-mono);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.pd-match-turns {
    font-size: 0.72rem;
    color: var(--text-tertiary);
}

/* --- Replay Overlay --- */
.pd-replay-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
}
.pd-replay-content {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    max-width: 600px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
}
.pd-replay-close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast);
}
.pd-replay-close:hover { color: var(--text-primary); }
.pd-replay-arena {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
    padding: var(--space-lg) 0;
}

/* --- Wider Layout for Dilemma (no sidebar) --- */
.pd-layout {
    grid-template-columns: 280px 1fr 280px;
}

/* --- Back Button (coding phase) --- */
.pd-back-btn {
    margin: var(--space-sm) var(--space-md);
    flex-shrink: 0;
}

/* --- Turn Controls --- */
.pd-turn-controls {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0 var(--space-md);
    border-bottom: 1px solid var(--border-primary);
    margin-bottom: var(--space-md);
}
.pd-ctrl-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.pd-ctrl-btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.pd-ctrl-btn:disabled { opacity: 0.4; cursor: default; }
.pd-ctrl-btn:disabled:hover { border-color: var(--border-primary); color: var(--text-primary); }
.pd-ctrl-primary {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}
.pd-ctrl-primary:hover { opacity: 0.85; color: #fff; }
.pd-ctrl-primary:disabled { opacity: 0.4; }
.pd-ctrl-primary:disabled:hover { color: #fff; }
.pd-turn-info {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
}

/* --- Arena Animations --- */
@keyframes pd-attack-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(8px); }
    40% { transform: translateX(-6px); }
    60% { transform: translateX(4px); }
    80% { transform: translateX(-2px); }
}
@keyframes pd-cooperate-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
@keyframes pd-point-float {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-30px); }
}
@keyframes pd-row-flash {
    0% { background: rgba(99,102,241,0.12); }
    100% { background: transparent; }
}

.pd-char.pd-animate.pd-attacking .pd-char-figure {
    animation: pd-attack-shake 0.4s ease;
}
.pd-char.pd-animate.pd-cooperating .pd-char-figure {
    animation: pd-cooperate-pulse 0.4s ease;
}

.pd-point-float {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.9rem;
    pointer-events: none;
    animation: pd-point-float 0.7s ease-out forwards;
    white-space: nowrap;
}
.pd-attacking .pd-point-float { color: var(--error); }
.pd-cooperating .pd-point-float { color: var(--success); }

.pd-row-new {
    animation: pd-row-flash 0.6s ease;
}

/* --- Expandable Variable Groups --- */
.pd-var-group {
    border-bottom: 1px solid var(--border-primary);
}
.pd-var-group:last-child { border-bottom: none; }
.pd-var-group-header {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 8px var(--space-md);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.pd-var-group-header:hover { background: var(--bg-tertiary); }
.pd-var-arrow {
    transition: transform var(--transition-fast);
    flex-shrink: 0;
    color: var(--text-tertiary);
}
.pd-var-expanded .pd-var-arrow {
    transform: rotate(90deg);
}
.pd-var-type {
    margin-left: auto;
    font-style: italic;
    opacity: 0.6;
    font-size: 0.72rem;
}
.pd-var-attrs {
    display: none;
    padding-left: var(--space-lg);
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-primary);
}
.pd-var-expanded .pd-var-attrs {
    display: block;
}
.pd-var-attr {
    padding: 6px var(--space-md) !important;
    border-bottom: 1px solid var(--border-primary);
}
.pd-var-attr:last-child { border-bottom: none; }
.pd-var-attr .cc-var-name {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

/* --- Error Button & Log --- */
.pd-error-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--error);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    animation: pd-error-pulse 1.5s ease-in-out;
}
.pd-error-btn:hover { filter: brightness(1.1); }
@keyframes pd-error-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
    50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}
.pd-error-log {
    background: var(--bg-secondary);
    border: 1px solid var(--error);
    border-radius: var(--radius-md);
    margin-top: var(--space-sm);
    overflow: hidden;
}
.pd-error-log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--error) 10%, transparent);
    color: var(--error);
    font-weight: 600;
    font-size: 0.8rem;
}
.pd-error-log-close {
    background: none;
    border: none;
    color: var(--error);
    cursor: pointer;
    padding: 2px;
    display: flex;
}
.pd-error-log-body {
    padding: 8px 12px;
    max-height: 160px;
    overflow-y: auto;
}
.pd-error-entry {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--error);
    padding: 4px 0;
    border-bottom: 1px solid var(--border-primary);
}
.pd-error-entry:last-child { border-bottom: none; }

/* --- Confirmation Modal --- */
.pd-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
}
.pd-modal-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.pd-modal-header {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
}
.pd-modal-body {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: var(--space-lg);
}
.pd-modal-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
}
.pd-modal-cancel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
}
.pd-modal-cancel:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* --- Tournament VS Screen --- */
.pd-tournament-vs {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-lg);
}
.pd-vs-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}
.pd-vs-header h2 {
    flex: 1;
    margin: 0;
    font-size: 1.3rem;
}
.pd-vs-progress {
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
}
.pd-vs-selector {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
}
.pd-vs-side {
    flex: 1;
}
.pd-vs-select {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    cursor: pointer;
}
.pd-vs-select option:disabled {
    color: var(--text-tertiary);
}
.pd-vs-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    min-width: 80px;
}
.pd-vs-vs-text {
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--text-tertiary);
    letter-spacing: 2px;
}
.pd-vs-random-btn {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: 6px 10px;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
}
.pd-vs-random-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}
.pd-vs-play-btn {
    padding: 8px 20px;
    font-size: 0.85rem;
    gap: 6px;
}
.pd-vs-play-btn:disabled {
    opacity: 0.4;
    cursor: default;
}
.pd-vs-leaderboard {
    margin-bottom: var(--space-lg);
}
.pd-vs-empty {
    color: var(--text-tertiary);
    text-align: center;
    padding: var(--space-md);
    font-size: 0.85rem;
}
.pd-vs-matches-section {
    margin-bottom: var(--space-lg);
}
.pd-vs-matches-section h4 {
    margin-bottom: var(--space-sm);
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.pd-vs-finish-btn {
    width: 100%;
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.pd-vs-finish-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-primary);
}

/* --- Tournament Fight Playback --- */
.pd-tournament-fight {
    max-width: 700px;
    margin: 0 auto;
    padding: var(--space-lg);
}
.pd-fight-header {
    text-align: center;
    margin-bottom: var(--space-md);
}
.pd-fight-header h3 {
    margin: 0;
    font-size: 1.1rem;
}
.pd-fight-controls {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}
.pd-fight-auto-btn.pd-auto-active {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}
.pd-fight-back-btn {
    width: 100%;
    margin-top: var(--space-md);
}

/* --- Mobile Responsive --- */
@media (max-width: 1100px) {
    .pd-layout { grid-template-columns: 1fr; }
    .pd-hero {
        grid-template-columns: 1fr;
        align-items: start;
    }
    .pd-hero-emblem {
        justify-self: start;
        transform: none;
        width: 112px;
        height: 112px;
    }
}
@media (max-width: 600px) {
    .pd-rules-grid { grid-template-columns: 1fr; }
    .pd-lobby-card { padding: var(--space-md); }
    .pd-arena { gap: var(--space-md); }
    .pd-match-cards { grid-template-columns: 1fr; }
    .pd-sessions-grid { grid-template-columns: 1fr; }
    .pd-active-banner { flex-direction: column; text-align: center; }
    .pd-replay-content { padding: var(--space-md); }
    .pd-leaderboard-table th,
    .pd-leaderboard-table td { padding: 8px 10px; font-size: 0.78rem; }
    .pd-turn-controls { flex-wrap: wrap; }
    .pd-section-head {
        flex-direction: column;
        align-items: flex-start;
    }
    .pd-create-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .pd-create-row {
        flex-wrap: wrap;
    }
    .pd-vs-selector {
        flex-direction: column;
    }
    .pd-vs-center {
        flex-direction: row;
    }
    .pd-tournament-vs,
    .pd-tournament-fight { padding: var(--space-md); }
    .pd-fight-controls { flex-wrap: wrap; }
}

/* --- Admin: Users --- */
.admin-users-page {
    max-width: 1100px;
}
.admin-users-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}
.admin-users-search {
    flex: 1;
}
.admin-users-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    overflow: auto;
}
.admin-users-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 780px;
}
.admin-users-table th,
.admin-users-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-primary);
    vertical-align: middle;
    white-space: nowrap;
}
.admin-users-table td.admin-user-identity {
    white-space: normal;
}
.admin-users-table th {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
}
.admin-users-table th:nth-child(n+4) {
    text-align: center;
}
.admin-user-active,
.admin-user-labs,
.admin-user-teams {
    text-align: center;
}
.admin-user-email {
    opacity: 0.8;
    font-size: 0.85rem;
    margin-top: 2px;
}
.btn-action {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}
.btn-action:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}
.btn-action svg {
    opacity: 0.7;
}
.btn-action:hover svg {
    opacity: 1;
}
.admin-teams-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}
.admin-team-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    background: var(--bg-tertiary);
}
.admin-team-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--team-color, var(--primary));
}
.admin-team-name {
    font-weight: 600;
}

/* --- Admin: Tabs --- */
.admin-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: var(--space-lg);
    border-bottom: 2px solid var(--border-primary);
    padding-bottom: 0;
}
.admin-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: none;
    background: none;
    color: var(--text-tertiary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--transition-fast);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.admin-tab:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}
.admin-tab.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}
.admin-tab svg {
    opacity: 0.6;
}
.admin-tab.active svg {
    opacity: 1;
}
.admin-tab-panel {
    display: none;
}
.admin-tab-panel.active {
    display: block;
}

/* --- Admin: Role dropdown --- */
.role-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 5px 28px 5px 10px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}
.role-select:hover {
    border-color: var(--accent-primary);
}
.role-select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}
.role-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Admin: Teams tab --- */
.admin-teams-table th:nth-child(n+2) {
    text-align: center;
}
.admin-team-identity-inner {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.admin-team-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}
.admin-team-icon-badge svg {
    width: 18px;
    height: 18px;
}
.admin-team-label {
    font-weight: 600;
    font-size: 0.92rem;
}
.admin-team-actions {
    text-align: center;
    white-space: nowrap;
}
.admin-team-actions .btn {
    margin: 0 3px;
}
.btn-danger-ghost {
    background: transparent;
    border: 1px solid var(--border-primary);
    color: var(--text-tertiary);
    transition: all var(--transition-fast);
}
.btn-danger-ghost:hover {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
}
[data-theme="dark"] .btn-danger-ghost:hover {
    background: #450a0a;
    border-color: #991b1b;
    color: #f87171;
}
.btn-danger {
    background: #dc2626;
    border: 1px solid #dc2626;
    color: #fff;
}
.btn-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
}
.text-center { text-align: center; }

/* --- Admin: Modal sizes --- */
.modal-content--md { max-width: 520px; }
.modal-content--sm { max-width: 420px; }

/* --- Admin: Icon picker --- */
.icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
    gap: 6px;
}
.icon-picker-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.icon-picker-item:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: var(--bg-secondary);
}
.icon-picker-item.active {
    border-color: var(--accent-primary);
    background: rgba(99,102,241,0.12);
    color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(99,102,241,0.2);
}

/* --- Admin: Color picker --- */
.color-picker-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}
.color-swatch:hover {
    transform: scale(1.15);
}
.color-swatch.active {
    border-color: var(--text-primary);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1), 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--text-primary);
}

/* --- Admin: Confirm modal --- */
.confirm-text {
    font-size: 0.95rem;
    margin-bottom: var(--space-sm);
}
.confirm-warn {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    padding: 10px 12px;
    background: #fef2f2;
    border-radius: var(--radius-md);
    border: 1px solid #fecaca;
}
[data-theme="dark"] .confirm-warn {
    background: #450a0a;
    border-color: #991b1b;
}

/* --- Job detail: Access tab --- */
.access-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
}
.access-hint {
    margin-top: 6px;
    color: var(--text-tertiary);
    font-size: 0.9rem;
}
.access-form {
    margin-top: var(--space-md);
}
.access-form-row {
    display: flex;
    align-items: flex-end;
    gap: var(--space-md);
    flex-wrap: wrap;
}
.access-form-row .form-group {
    flex: 1;
    min-width: 220px;
}
.access-form-action {
    flex: 0 0 auto;
}
.access-table-wrapper {
    margin-top: var(--space-md);
    overflow: auto;
}
.access-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 520px;
}
.access-table th,
.access-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-primary);
    vertical-align: top;
}
.access-table th {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.perm-user-email {
    opacity: 0.8;
    font-size: 0.85rem;
    margin-top: 2px;
}
.perm-actions {
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .access-grid {
        grid-template-columns: 1fr;
    }
    .admin-teams-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Gifting Tracker ────────────────────────────────────────────────── */
.gifting-tracker-page { max-width: 100%; }
.gifting-stats-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); flex-wrap: wrap; }
.gifting-stats-row .date-filters { margin-left: auto; }
.gifting-stats { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.stat-chip { display: flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-full); background: var(--bg-secondary); border: 1px solid var(--border-primary); font-size: 0.8rem; }
.stat-chip .stat-label { color: var(--text-tertiary); font-weight: 500; }
.stat-chip .stat-value { font-weight: 700; color: var(--text-primary); }
.stat-chip.stat-delivered .stat-value { color: var(--success); }
.stat-chip.stat-transit .stat-value { color: var(--info); }
.stat-chip.stat-pending .stat-value { color: var(--text-tertiary); }

.gifting-table .col-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gifting-table .col-date { white-space: nowrap; font-size: 0.82rem; }
.gifting-table .col-order .order-id { font-weight: 600; font-size: 0.82rem; }
.gifting-table .col-tracking { white-space: nowrap; }
.gifting-table .col-status { white-space: nowrap; }
.gifting-table .col-scrape { white-space: nowrap; min-width: 140px; }

.tracking-link { color: var(--accent-primary); text-decoration: none; font-size: 0.82rem; font-family: 'JetBrains Mono', monospace; }
.tracking-link:hover { text-decoration: underline; }

.carrier-badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius-full); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.carrier-gls { background: #fef3c7; color: #92400e; }
.carrier-ups { background: #dbeafe; color: #1e40af; }
.carrier-other { background: var(--bg-tertiary); color: var(--text-tertiary); }
[data-theme="dark"] .carrier-gls { background: #78350f; color: #fde68a; }
[data-theme="dark"] .carrier-ups { background: #1e3a5f; color: #93c5fd; }

/* Status pills */
.status-pill { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 4px 10px; border-radius: var(--radius-md); font-size: 0.78rem; font-weight: 600; border: none; cursor: pointer; transition: opacity var(--transition-fast); background: var(--bg-tertiary); color: var(--text-secondary); }
.status-pill:hover { opacity: 0.85; }
.status-pill .status-text { line-height: 1.3; }
.status-pill .status-ts { font-size: 0.65rem; font-weight: 400; opacity: 0.7; }

.status-pill.status-delivered { background: var(--success-bg); color: var(--success); }
.status-pill.status-in-transit { background: var(--info-bg); color: var(--info); }
.status-pill.status-out-for-delivery { background: #fff7ed; color: #c2410c; }
.status-pill.status-picked-up { background: #f0fdf4; color: #15803d; }
.status-pill.status-exception { background: var(--error-bg); color: var(--error); }
.status-pill.status-returned { background: var(--warning-bg); color: var(--warning); }
.status-pill.status-unknown { background: var(--bg-tertiary); color: var(--text-tertiary); }
.status-pill.status-pending { background: var(--bg-tertiary); color: var(--text-tertiary); }

[data-theme="dark"] .status-pill.status-out-for-delivery { background: #431407; color: #fdba74; }
[data-theme="dark"] .status-pill.status-picked-up { background: #052e16; color: #86efac; }

/* Scrape cell */
.scrape-cell { display: flex; align-items: center; gap: 6px; }
.scrape-ts { font-size: 0.75rem; color: var(--text-tertiary); }
.btn-icon-sm { width: 28px; height: 28px; padding: 0; border: 1px solid var(--border-primary); border-radius: var(--radius-sm); background: var(--bg-secondary); color: var(--text-tertiary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition-fast); }
.btn-icon-sm:hover { border-color: var(--accent-primary); color: var(--accent-primary); background: var(--bg-tertiary); }
.btn-icon-sm:disabled { opacity: 0.5; cursor: not-allowed; }

/* Spin animation */
@keyframes gifting-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.spin { animation: gifting-spin 1s linear infinite; }

/* Status timeline in modal */
.status-timeline { display: flex; flex-direction: column; gap: 0; padding: 4px 0; }
.timeline-event { display: flex; gap: 12px; padding: 10px 0; position: relative; }
.timeline-event:not(:last-child)::before { content: ''; position: absolute; left: 7px; top: 28px; bottom: 0; width: 2px; background: var(--border-primary); }
.timeline-dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; background: var(--bg-tertiary); border: 2px solid var(--border-primary); }
.timeline-current .timeline-dot { border-width: 3px; }
.status-dot-delivered { background: var(--success); border-color: var(--success) !important; }
.status-dot-in-transit { background: var(--info); border-color: var(--info) !important; }
.status-dot-out-for-delivery { background: #f97316; border-color: #f97316 !important; }
.status-dot-picked-up { background: #22c55e; border-color: #22c55e !important; }
.status-dot-exception { background: var(--error); border-color: var(--error) !important; }
.status-dot-returned { background: var(--warning); border-color: var(--warning) !important; }
.status-dot-unknown { background: var(--text-tertiary); border-color: var(--text-tertiary) !important; }

.timeline-info { flex: 1; min-width: 0; }
.timeline-status { font-weight: 600; font-size: 0.85rem; color: var(--text-primary); }
.timeline-desc { display: block; font-size: 0.78rem; color: var(--text-secondary); margin-top: 2px; }
.timeline-meta { display: flex; gap: 12px; font-size: 0.72rem; color: var(--text-tertiary); margin-top: 3px; }
.timeline-current .timeline-status { font-size: 0.9rem; }

/* Scrape progress modal */
.scrape-progress-spinner { text-align: center; padding: 20px 0; }
.scrape-progress-spinner svg { margin-bottom: 12px; }
.scrape-results { display: flex; flex-direction: column; gap: 8px; }
.result-item { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; padding: 8px 12px; border-radius: var(--radius-md); background: var(--bg-tertiary); }
.result-item.result-success { color: var(--success); }
.result-item.result-error { color: var(--error); }

.text-muted { color: var(--text-tertiary); font-size: 0.8rem; }
.text-error { color: var(--error); font-size: 0.85rem; }

/* Multi-select dropdown */
.multi-select { position: relative; }
.multi-select-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; cursor: pointer; }
.multi-select-btn.has-selection { border-color: var(--accent-primary); color: var(--accent-primary); }
.multi-select-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi-select-dropdown { display: none; position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; max-height: 260px; overflow-y: auto; background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 50; padding: 6px 0; }
.multi-select-dropdown.open { display: block; }
.multi-select-dropdown label { display: flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: 0.82rem; cursor: pointer; white-space: nowrap; color: var(--text-primary); transition: background var(--transition-fast); }
.multi-select-dropdown label:hover { background: var(--bg-tertiary); }
.multi-select-dropdown input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent-primary); flex-shrink: 0; cursor: pointer; }

/* Sortable headers */
th.sortable { user-select: none; position: relative; }
th.sortable:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.sort-arrow { font-size: 0.65rem; opacity: 0.7; margin-left: 2px; }

/* Pagination */
.gifting-tracker-page .pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-md); margin-top: var(--space-lg); flex-wrap: wrap; }
.page-info { font-size: 0.8rem; color: var(--text-tertiary); }
.page-numbers { display: flex; align-items: center; gap: 4px; }
.page-num, .page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid var(--border-primary); border-radius: var(--radius-md); background: var(--bg-secondary); color: var(--text-secondary); font-size: 0.82rem; font-weight: 500; cursor: pointer; transition: all var(--transition-fast); }
.page-num:hover, .page-btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); background: var(--bg-tertiary); }
.page-num.active { background: var(--accent-primary); color: var(--text-inverse); border-color: var(--accent-primary); }
.page-dots { padding: 0 4px; color: var(--text-tertiary); font-size: 0.82rem; }

/* Responsive */
@media (max-width: 768px) {
    .gifting-table .col-name { max-width: 120px; }
    .gifting-stats { gap: 4px; }
    .stat-chip { padding: 4px 10px; font-size: 0.72rem; }
}