/* Custom variables and theme colors */
:root {
    /* Default Light Mode Variables */
    --bg-color: #f8fafc;
    --text-color: #071D49; /* ARU Rich Blue */
    --card-bg: rgba(255, 255, 255, 0.7);
    --card-border: rgba(7, 29, 73, 0.08);
    --border-color: rgba(7, 29, 73, 0.12);
    --sidebar-bg: rgba(255, 255, 255, 0.8);
    --header-bg: #071D49; /* Always Rich Blue for premium header */
    --header-text: #ffffff;
    --text-muted: #475569;
    --input-bg: rgba(255, 255, 255, 0.95);
    --input-border: rgba(7, 29, 73, 0.18);
    --accent-cyan: #0077C8; /* ARU Cyan */
    --accent-yellow: #FFD100; /* ARU Accent Yellow */
    --glass-blur: 16px;
    
    /* Tracks matching Curation Themes */
    --color-teaching: #0077C8; /* Cyan */
    --color-research: #5C068C; /* Purple */
    --color-life: #008578;     /* Teal */
    --color-work: #CF4520;     /* Orange */
    --color-bau: #64748b;
    --color-other: #64748b;

    /* Semantic remapping for light mode */
    --text-white: #071D49;
    --text-slate-100: #0f172a;
    --text-slate-200: #1e293b;
    --text-slate-300: #334155;
    --text-slate-400: #475569;
    --text-slate-500: #64748b;
    --bg-black-40: rgba(7, 29, 73, 0.04);
    --border-white-10: rgba(7, 29, 73, 0.12);
    
    /* Scrollbar variables for Light Mode */
    --scrollbar-track: rgba(7, 29, 73, 0.06);
    --scrollbar-thumb: rgba(7, 29, 73, 0.45);
    --scrollbar-thumb-hover: rgba(7, 29, 73, 0.7);
}

.theme-dark {
    /* Dark Mode Override Variables */
    --bg-color: #071D49; /* Premium brand rich blue background */
    --text-color: #f8fafc;
    --card-bg: rgba(15, 23, 42, 0.55);
    --card-border: rgba(255, 255, 255, 0.07);
    --border-color: rgba(255, 255, 255, 0.08);
    --sidebar-bg: rgba(15, 23, 42, 0.5);
    --header-bg: rgba(7, 29, 73, 0.8);
    --header-text: #f8fafc;
    --text-muted: #94a3b8;
    --input-bg: rgba(0, 0, 0, 0.4);
    --input-border: rgba(255, 255, 255, 0.1);
    
    /* Semantic remapping for dark mode */
    --text-white: #ffffff;
    --text-slate-100: #f1f5f9;
    --text-slate-200: #e2e8f0;
    --text-slate-300: #cbd5e1;
    --text-slate-400: #94a3b8;
    --text-slate-500: #64748b;
    --bg-black-40: rgba(0, 0, 0, 0.4);
    --border-white-10: rgba(255, 255, 255, 0.1);
    
    /* Scrollbar variables for Dark Mode */
    --scrollbar-track: rgba(255, 255, 255, 0.08);
    --scrollbar-thumb: rgba(255, 255, 255, 0.5);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.85);
}

/* Global locking to prevent outer browser scrolling */
html, body {
    height: 100vh !important;
    overflow: hidden !important;
}

/* Restrict main workspace height in standard mode to fit header + footer perfectly */
body:not(.fullscreen-canvas-active) #main-workspace-container {
    max-height: calc(100vh - 130px) !important;
}

/* Background Gradients & Color Application */
body {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    background-image: 
        radial-gradient(circle at 5% 10%, rgba(0, 119, 200, 0.03) 0%, transparent 35%),
        radial-gradient(circle at 95% 90%, rgba(255, 209, 0, 0.02) 0%, transparent 35%);
    background-attachment: fixed;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Intercept and remap Tailwind classes in Light Mode */
body:not(.theme-dark) .text-white { color: var(--text-white) !important; }
body:not(.theme-dark) .text-slate-100 { color: var(--text-slate-100) !important; }
body:not(.theme-dark) .text-slate-200 { color: var(--text-slate-200) !important; }
body:not(.theme-dark) .text-slate-300 { color: var(--text-slate-300) !important; }
body:not(.theme-dark) .text-slate-400 { color: var(--text-slate-400) !important; }
body:not(.theme-dark) .text-slate-500 { color: var(--text-slate-500) !important; }
body:not(.theme-dark) .bg-black\/40 { background-color: var(--bg-black-40) !important; }
body:not(.theme-dark) .border-white\/10 { border-color: var(--border-white-10) !important; }
body:not(.theme-dark) .border-white\/5 { border-color: var(--border-white-10) !important; }

/* Keep header background dark and text white in both modes for branding consistency */
header {
    background-color: var(--header-bg) !important;
    color: var(--header-text) !important;
    border-bottom-color: var(--border-color) !important;
}
header .text-white {
    color: #ffffff !important;
}
header .text-slate-400 {
    color: #cbd5e1 !important;
}

/* Input Fields styling overrides (excluding checkboxes and radio buttons) */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-color) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus {
    border-color: var(--accent-cyan) !important;
}

/* Target Checkbox and Radio input styling specifically */
input[type="checkbox"], input[type="radio"] {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Let checked checkboxes/radios show their colored background (rose/cyan) and display the white tick */
input[type="checkbox"]:checked, input[type="radio"]:checked {
    background-color: currentColor !important;
    border-color: currentColor !important;
}

/* High Contrast Mode Fixes for Checkbox Checked States */
body.theme-high-contrast input[type="checkbox"]:checked {
    background-color: #000000 !important;
    border-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
}
body:not(.theme-dark).theme-high-contrast input[type="checkbox"]:checked {
    background-color: #ffffff !important;
    border-color: #000000 !important;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
}
/* Style option tags inside select elements */
select option {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}

/* Glassmorphism panel styling */
.glass-card {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.theme-dark .glass-card {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* Tab selector buttons */
.sidebar-tab, .main-tab {
    padding: 0.6rem 1.2rem;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-slate-400) !important;
    background: transparent;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    outline: none;
}
.sidebar-tab:hover, .main-tab:hover {
    color: var(--text-white) !important;
}
.sidebar-tab.active, .main-tab.active {
    color: var(--accent-cyan) !important;
    border-bottom-color: var(--accent-cyan) !important;
}
.theme-dark .sidebar-tab.active, .theme-dark .main-tab.active {
    color: var(--accent-yellow) !important;
    border-bottom-color: var(--accent-yellow) !important;
}

/* Scrollbar customizations */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* Track filtering buttons styling */
.track-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.45rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #94a3b8;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: all 0.15s ease;
}
.track-btn:hover {
    color: #f8fafc;
    background: rgba(255, 255, 255, 0.05);
}
.track-btn.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Document List Item Buttons */
.doc-item-btn {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: left;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.doc-item-btn:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.07);
}
.doc-item-btn.active {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
}

/* Skill Directory Item Card */
.skill-directory-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: left;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    background: rgba(15, 23, 42, 0.3);
    transition: all 0.2s ease;
}
.skill-directory-item:hover {
    background: rgba(15, 23, 42, 0.55);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

/* Agent Matrix Card */
.agent-card {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: all 0.25s ease;
}
.agent-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(15, 23, 42, 0.65);
}
.agent-card.working {
    border-color: rgba(16, 185, 129, 0.25);
    background: rgba(16, 185, 129, 0.02);
}

/* Active status dot pulsing */
@keyframes status-blink {
    0%, 100% { opacity: 0.25; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}
.status-dot-active {
    animation: status-blink 1.8s infinite ease-in-out;
}

/* Kanban Task Card */
.task-card {
    background: rgba(30, 41, 59, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.task-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(30, 41, 59, 0.55);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Navigation Icon Buttons */
.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.03);
    color: #94a3b8;
    transition: all 0.2s ease;
}
.btn-icon:hover {
    color: #f8fafc;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Graph network canvas styles */
#network-graph canvas {
    outline: none;
    cursor: grab;
}
#network-graph canvas:active {
    cursor: grabbing;
}

/* Colors matching categories */
.bg-linkedin { background-color: var(--color-linkedin); }
.bg-fishing { background-color: var(--color-fishing); }
.bg-wikii { background-color: var(--color-wikii); }
.bg-gemma { background-color: var(--color-gemma); }
.bg-bau { background-color: var(--color-bau); }
.bg-other { background-color: var(--color-other); }

.border-linkedin { border-color: var(--color-linkedin); }
.border-fishing { border-color: var(--color-fishing); }
.border-wikii { border-color: var(--color-wikii); }
.border-gemma { border-color: var(--color-gemma); }
.border-bau { border-color: var(--color-bau); }
.border-other { border-color: var(--color-other); }

.text-linkedin { color: var(--color-linkedin); }
.text-fishing { color: var(--color-fishing); }
.text-wikii { color: var(--color-wikii); }
.text-gemma { color: var(--color-gemma); }
.text-bau { color: var(--color-bau); }
.text-other { color: var(--color-other); }

.bg-linkedin-opaque { background-color: rgba(59, 130, 246, 0.15); border: 1px solid rgba(59, 130, 246, 0.35); color: #93c5fd; }
.bg-fishing-opaque { background-color: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.35); color: #6ee7b7; }
.bg-wikii-opaque { background-color: rgba(139, 92, 246, 0.15); border: 1px solid rgba(139, 92, 246, 0.35); color: #c4b5fd; }
.bg-gemma-opaque { background-color: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.35); color: #fde047; }
.bg-bau-opaque { background-color: rgba(100, 116, 139, 0.15); border: 1px solid rgba(100, 116, 139, 0.35); color: #cbd5e1; }
.bg-other-opaque { background-color: rgba(100, 116, 139, 0.15); border: 1px solid rgba(100, 116, 139, 0.35); color: #cbd5e1; }

/* Markdown Prose styles */
#markdown-viewer h1, #markdown-viewer h2, #markdown-viewer h3, #markdown-viewer h4 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #ffffff;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}
#markdown-viewer h1 { font-size: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 0.4rem; }
#markdown-viewer h2 { font-size: 1.3rem; }
#markdown-viewer h3 { font-size: 1.15rem; }
#markdown-viewer h4 { font-size: 1rem; }

#markdown-viewer p {
    margin-bottom: 1rem;
}

#markdown-viewer ul, #markdown-viewer ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}
#markdown-viewer ul { list-style-type: disc; }
#markdown-viewer ol { list-style-type: decimal; }
#markdown-viewer li { margin-bottom: 0.35rem; }

#markdown-viewer a {
    color: #22d3ee;
    text-decoration: underline;
    transition: color 0.15s ease;
}
#markdown-viewer a:hover {
    color: #67e8f9;
}

#markdown-viewer blockquote {
    border-left: 4px solid rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1rem;
    margin: 1.25rem 0;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 0 8px 8px 0;
    color: #cbd5e1;
}

/* Callouts / GitHub Alerts */
#markdown-viewer blockquote.alert {
    border-left-width: 4px;
    padding: 0.75rem 1.25rem;
    margin: 1rem 0;
    border-radius: 4px 8px 8px 4px;
}
#markdown-viewer blockquote.alert-note {
    border-left-color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}
#markdown-viewer blockquote.alert-tip {
    border-left-color: #10b981;
    background: rgba(16, 185, 129, 0.05);
}
#markdown-viewer blockquote.alert-important {
    border-left-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.05);
}
#markdown-viewer blockquote.alert-warning {
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, 0.05);
}
#markdown-viewer blockquote.alert-caution {
    border-left-color: #ef4444;
    background: rgba(239, 68, 68, 0.05);
}

#markdown-viewer code {
    font-family: 'Fira Code', monospace;
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.08);
    padding: 0.15rem 0.3rem;
    border-radius: 4px;
    color: #cbd5e1;
}
#markdown-viewer pre {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1.25rem 0;
}
#markdown-viewer pre code {
    background: transparent;
    padding: 0;
    color: #e2e8f0;
}

#markdown-viewer table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.85rem;
}
#markdown-viewer th, #markdown-viewer td {
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.65rem 0.85rem;
    text-align: left;
}
#markdown-viewer th {
    background: rgba(255, 255, 255, 0.04);
    font-weight: 600;
}
#markdown-viewer tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.01);
}

/* Connections Tags inside reader */
.connection-tag {
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    transition: all 0.15s ease;
    cursor: pointer;
}
.connection-tag:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Sub-tabs additional active states */
.main-tab {
    position: relative;
    border-bottom: 2px solid transparent;
}
.main-tab.active {
    color: #06b6d4 !important;
    border-bottom-color: #06b6d4 !important;
}

/* Premium Showcase Preview styling */
.preview-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    width: 100%;
}

.preview-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Artistic poetry container */
.artistic-canvas {
    padding: 2rem;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}
.artistic-canvas::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.03), transparent);
    pointer-events: none;
}

/* Timeline schedule layout */
.timeline-item {
    position: relative;
    padding-left: 1.5rem;
    border-left: 2px solid rgba(255, 255, 255, 0.08);
}
.timeline-item::after {
    content: '';
    position: absolute;
    left: -5px;
    top: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22d3ee;
    box-shadow: 0 0 8px #22d3ee;
}

/* Storyboard cells layout */
.storyboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    width: 100%;
}
.storyboard-cell {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: transform 0.2s ease;
}
.storyboard-cell:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Admin Sub-tabs styling */
.admin-tab {
    padding: 0.6rem 1.2rem;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-slate-400) !important;
    background: transparent;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    outline: none;
}
.admin-tab:hover {
    color: var(--text-white) !important;
}
.admin-tab.active {
    color: var(--accent-cyan) !important;
    border-bottom-color: var(--accent-cyan) !important;
}
.theme-dark .admin-tab.active {
    color: var(--accent-yellow) !important;
    border-bottom-color: var(--accent-yellow) !important;
}

/* Nav Tab buttons in header */
.nav-tab-btn {
    transition: all 0.20s ease-in-out;
}
.nav-tab-btn.active {
    color: #ffffff !important;
}
body:not(.theme-dark) .nav-tab-btn.active {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

/* Draggable Showcase Cards on Canvas */
.showcase-canvas-card {
    position: absolute;
    width: 160px;
    z-index: 10;
    touch-action: none;
    cursor: default;
    transition: box-shadow 0.2s ease, transform 0.1s ease;
}
.showcase-canvas-card .drag-handle {
    cursor: grab;
}
.showcase-canvas-card .drag-handle:active {
    cursor: grabbing;
}

/* Pinned Showcase Container (Top bar style) */
#pinned-showcase-bar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
}

/* ==========================================
   Phase 13: Light Mode Accessibility & 3D Card Flip
   ========================================== */

/* Header accessibility in Light Mode */
body:not(.theme-dark) header .text-white,
body:not(.theme-dark) header #user-display-name,
body:not(.theme-dark) header .nav-tab-btn.active {
    color: #ffffff !important;
}
body:not(.theme-dark) header .text-slate-400,
body:not(.theme-dark) header #user-display-email,
body:not(.theme-dark) header .nav-tab-btn:not(.active),
body:not(.theme-dark) header .btn-icon,
body:not(.theme-dark) header #btn-settings,
body:not(.theme-dark) header #btn-theme-toggle {
    color: #cbd5e1 !important;
}
body:not(.theme-dark) header .nav-tab-btn:not(.active):hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Select fields and buttons overrides in Light Mode */
body:not(.theme-dark) select.bg-slate-800,
body:not(.theme-dark) .bg-slate-800 {
    background-color: #f1f5f9 !important;
    color: #071D49 !important;
    border-color: #cbd5e1 !important;
}
body:not(.theme-dark) .btn-start-compile {
    background-color: #f1f5f9 !important;
    color: #071D49 !important;
    border-color: #cbd5e1 !important;
}
body:not(.theme-dark) .btn-start-compile:hover {
    background-color: #e2e8f0 !important;
}

/* Translucent panel backgrounds remapped in Light Mode */
body:not(.theme-dark) .bg-black\/10,
body:not(.theme-dark) .bg-black\/15,
body:not(.theme-dark) .bg-black\/20,
body:not(.theme-dark) .bg-black\/25,
body:not(.theme-dark) .bg-black\/30,
body:not(.theme-dark) .bg-black\/35,
body:not(.theme-dark) .bg-black\/40 {
    background-color: rgba(7, 29, 73, 0.03) !important;
    border-color: rgba(7, 29, 73, 0.06) !important;
}

/* Canvas HUD Overlay styling in Light Mode */
body:not(.theme-dark) #gallery-canvas-hud {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(7, 29, 73, 0.15) !important;
    box-shadow: 0 4px 15px rgba(7, 29, 73, 0.1) !important;
}
body:not(.theme-dark) .drag-handle {
    background-color: rgba(7, 29, 73, 0.04) !important;
    border-bottom-color: rgba(7, 29, 73, 0.08) !important;
}

/* Pastel colors contrast remapping in Light Mode */
body:not(.theme-dark) .text-blue-400 { color: #1d4ed8 !important; }
body:not(.theme-dark) .text-emerald-400 { color: #047857 !important; }
body:not(.theme-dark) .text-purple-400 { color: #6d28d9 !important; }
body:not(.theme-dark) .text-cyan-400 { color: #0369a1 !important; }
body:not(.theme-dark) .text-yellow-400 { color: #b45309 !important; }
body:not(.theme-dark) .text-rose-400 { color: #be123c !important; }
body:not(.theme-dark) .text-orange-400 { color: #c2410c !important; }
body:not(.theme-dark) .text-teal-400 { color: #0f766e !important; }
body:not(.theme-dark) .text-amber-400 { color: #b45309 !important; }
body:not(.theme-dark) .text-emerald-300 { color: #047857 !important; }

/* Translucent badge background and border contrast in Light Mode */
body:not(.theme-dark) .bg-blue-500\/10 { background-color: rgba(29, 78, 216, 0.08) !important; border-color: rgba(29, 78, 216, 0.15) !important; }
body:not(.theme-dark) .bg-emerald-500\/10 { background-color: rgba(4, 120, 87, 0.08) !important; border-color: rgba(4, 120, 87, 0.15) !important; }
body:not(.theme-dark) .bg-purple-500\/10 { background-color: rgba(109, 40, 217, 0.08) !important; border-color: rgba(109, 40, 217, 0.15) !important; }
body:not(.theme-dark) .bg-cyan-500\/10 { background-color: rgba(3, 105, 161, 0.08) !important; border-color: rgba(3, 105, 161, 0.15) !important; }
body:not(.theme-dark) .bg-yellow-500\/10 { background-color: rgba(180, 83, 9, 0.08) !important; border-color: rgba(180, 83, 9, 0.15) !important; }
body:not(.theme-dark) .bg-rose-500\/10 { background-color: rgba(190, 18, 60, 0.08) !important; border-color: rgba(190, 18, 60, 0.15) !important; }
body:not(.theme-dark) .bg-orange-500\/10 { background-color: rgba(194, 65, 12, 0.08) !important; border-color: rgba(194, 65, 12, 0.15) !important; }
body:not(.theme-dark) .bg-teal-500\/10 { background-color: rgba(15, 118, 110, 0.08) !important; border-color: rgba(15, 118, 110, 0.15) !important; }

/* Registry sidebar item buttons contrast overrides in Light Mode */
body:not(.theme-dark) .doc-item-btn {
    background-color: rgba(7, 29, 73, 0.03) !important;
    border-color: rgba(7, 29, 73, 0.08) !important;
}
body:not(.theme-dark) .doc-item-btn:hover {
    background-color: rgba(7, 29, 73, 0.06) !important;
}
body:not(.theme-dark) .doc-item-btn.active {
    background-color: rgba(7, 29, 73, 0.1) !important;
    border-color: rgba(7, 29, 73, 0.2) !important;
}

/* Engineering blueprints whiteboard canvas in Light Mode */
body:not(.theme-dark) #gallery-canvas-viewport {
    background-color: #f1f5f9 !important;
}
body:not(.theme-dark) #canvas-grid-lines {
    background-image: 
        radial-gradient(circle, rgba(7, 29, 73, 0.08) 1.5px, transparent 1.5px), 
        linear-gradient(rgba(7, 29, 73, 0.04) 1px, transparent 1px), 
        linear-gradient(90deg, rgba(7, 29, 73, 0.04) 1px, transparent 1px) !important;
    opacity: 0.25 !important;
}

/* Light Mode canvas quadrant overrides for readable contrast */
body:not(.theme-dark) #canvas-zones-backdrop > div {
    background-color: rgba(7, 29, 73, 0.01) !important;
}
body:not(.theme-dark) #canvas-zones-backdrop .border-cyan-500\/20 { border-color: rgba(6, 182, 212, 0.35) !important; }
body:not(.theme-dark) #canvas-zones-backdrop .border-purple-500\/20 { border-color: rgba(168, 85, 247, 0.35) !important; }
body:not(.theme-dark) #canvas-zones-backdrop .border-emerald-500\/20 { border-color: rgba(16, 185, 129, 0.35) !important; }
body:not(.theme-dark) #canvas-zones-backdrop .border-amber-500\/20 { border-color: rgba(245, 158, 11, 0.35) !important; }

body:not(.theme-dark) #canvas-zones-backdrop .text-cyan-500\/15 { color: rgba(3, 105, 161, 0.35) !important; }
body:not(.theme-dark) #canvas-zones-backdrop .text-purple-500\/15 { color: rgba(109, 40, 217, 0.35) !important; }
body:not(.theme-dark) #canvas-zones-backdrop .text-emerald-500\/15 { color: rgba(4, 120, 87, 0.35) !important; }
body:not(.theme-dark) #canvas-zones-backdrop .text-amber-500\/15 { color: rgba(180, 83, 9, 0.35) !important; }

/* 3D Card Flipping layouts */
.card-flip-container {
    perspective: 1000px;
    width: 100%;
    height: 440px;
    position: relative;
    box-sizing: border-box !important;
}
.showcase-canvas-card .card-flip-container {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 320px !important;
    height: 440px !important;
    transform: scale(0.25) !important;
    transform-origin: top left !important;
    box-sizing: border-box !important;
}
.card-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    transform-origin: center center !important;
    box-sizing: border-box !important;
}
.flipped .card-flip-inner {
    transform: rotateY(180deg);
}
.card-front, .card-back {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 16px;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box !important;
    transform-origin: center center !important;
}
.card-front {
    z-index: 2;
    transform: rotateY(0deg);
}
.card-back {
    z-index: 1;
    transform: rotateY(180deg);
}

/* Override absolute draggable canvas card attributes for 3D rotation support */
.showcase-canvas-card {
    position: absolute;
    width: 80px !important;
    height: 110px !important; /* Lock height to prevent collapse due to absolute-positioned children */
    z-index: 10;
    touch-action: none;
    cursor: default;
    transition: left 0.8s cubic-bezier(0.25, 1, 0.3, 1), top 0.8s cubic-bezier(0.25, 1, 0.3, 1), box-shadow 0.2s ease, transform 0.1s ease;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}
.showcase-canvas-card .card-front {
    background: rgba(15, 23, 42, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    color: #f8fafc !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.showcase-canvas-card .card-back {
    background: #020617 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    color: #f8fafc !important;
}
body:not(.theme-dark) .showcase-canvas-card .card-front {
    background: rgba(15, 23, 42, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}
body:not(.theme-dark) .showcase-canvas-card .card-back {
    background: #020617 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Miro-style whiteboard canvas column lanes */
.canvas-lane-header {
    transition: left 0.8s cubic-bezier(0.25, 1, 0.3, 1);
}
.lane-title-pill {
    font-family: 'Outfit', 'Inter', sans-serif;
    background: rgba(15, 23, 42, 0.9) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #f8fafc !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.lane-guide-line {
    opacity: 0.12;
    border-left-style: dashed;
}

/* Card backing swan cover styles */
.card-back-swan-cover {
    background-size: cover;
    background-position: center;
    position: relative;
    filter: brightness(1.5) contrast(1.05); /* Amp up brightness so it is fully lit */
}
.card-back-swan-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2, 6, 23, 0.15) 0%, rgba(2, 6, 23, 0.4) 100%); /* Lighter overlay */
    z-index: 1;
}

/* Responsive Grid layouts card flip containers */
#gallery-grid .card-flip-container {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 320px !important;
    height: 440px !important;
    transform: scale(0.85) !important;
    transform-origin: top center !important;
    margin: 0 auto -66px auto !important; /* Offset the 15% unused scaled height space (440 * 0.15 = 66px) */
}

/* Responsive Grid layouts card fronts */
#gallery-grid .card-front {
    position: relative !important;
    height: auto;
    min-height: 250px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.55);
}
body:not(.theme-dark) #gallery-grid .card-front {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(7, 29, 73, 0.08);
}

/* --- Fullscreen Mode Styles --- */
:root {
    --fullscreen-z-index: 9999;
    --fullscreen-bg: #071D49; /* Premium dark theme canvas background */
}

/* Hide header and footer navigation when canvas is fullscreen */
body.fullscreen-canvas-active {
    overflow: hidden !important; /* Lock body scrolling completely */
}
body.fullscreen-canvas-active header,
body.fullscreen-canvas-active footer {
    display: none !important; /* Hide layout shell components */
}

/* Force main content grid block to fill screen */
body.fullscreen-canvas-active main {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
}

/* Force active tab content window to fill screen */
body.fullscreen-canvas-active #showcase-gallery-tab-content {
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Explode canvas viewport container to fixed overlay */
body.fullscreen-canvas-active #gallery-canvas-viewport {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: var(--fullscreen-z-index) !important;
    border-radius: 0 !important;
    border: none !important;
    margin: 0 !important;
    background-color: var(--fullscreen-bg) !important;
}

/* --- Phase 15: Split 2-Column Curation Hub UX and Toggles --- */

/* Parent split container */
#detail-review-section {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    overflow: hidden;
    width: 100%;
}

/* Left sidebar: curator ratings, themes, and AI drafting */
#curator-workspace-sidebar {
    width: 380px;
    flex-shrink: 0;
    overflow-y: auto;
    max-height: 100%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Right column: raw submission description, attachments, comments */
#curator-reading-column {
    flex: 1;
    overflow-y: auto;
    max-height: 100%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sidebar collapsed state overrides */
.curation-sidebar-collapsed #curator-workspace-sidebar {
    width: 0px !important;
    min-width: 0px !important;
    max-width: 0px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.curation-sidebar-collapsed #curator-reading-column {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Collapsible sidebars rotate arrow animations */
.rotate-180 {
    transform: rotate(180deg);
}

/* Smooth transitions for chevron icons */
#filters-collapse-icon,
#progress-collapse-icon {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* On mobile/tablet screens, fallback to stacked layout, disable independent column scrolls */
@media (max-width: 1024px) {
    #detail-review-section {
        flex-direction: column !important;
        overflow-y: auto !important;
    }
    #curator-workspace-sidebar,
    #curator-reading-column {
        width: 100% !important;
        max-height: none !important;
        overflow-y: visible !important;
    }
    .curation-sidebar-collapsed #curator-workspace-sidebar {
        display: none !important;
    }
}

/* Registry sidebar collapse transition rules */
#sidebar-panel {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.registry-sidebar-collapsed #sidebar-panel {
    width: 0px !important;
    min-width: 0px !important;
    max-width: 0px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* Phase 18: Completed Curation Overlay animations */
.animate-fade-in {
    animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Dashboard Infographics progress bar smooth fill */
.progress-bar-fill {
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Card Staggered Fade-in Animation */
@keyframes showcaseCardSlideUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-fade-in {
    opacity: 0;
    animation: showcaseCardSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Showcase Image Fade-in */
.storage-image {
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.storage-image.loaded {
    opacity: 1;
}

/* Showcase Gallery Zoomed Card Styles */
#showcase-zoom-card-wrapper {
    perspective: 1000px;
    width: 100% !important;
    height: 85vh !important;
    max-height: 780px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#showcase-zoom-card-wrapper > div {
    width: 544px !important; /* 320 * 1.7 */
    height: 748px !important; /* 440 * 1.7 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

#showcase-zoom-card-wrapper .card-flip-container {
    width: 320px !important;
    height: 440px !important;
    transform: scale(1.7) !important;
    transform-origin: center center !important;
    margin: 0 !important;
    transition: transform 0.3s ease;
}

/* Ensure no drag handles display pointers on hover since clicking does zoom closing/flips, not dragging */
#showcase-zoom-card-wrapper .drag-handle {
    cursor: default !important;
}

/* Responsive Zoomed Card for smaller viewports */
@media (max-width: 768px) {
    #showcase-zoom-card-wrapper > div {
        width: 416px !important; /* 320 * 1.3 */
        height: 572px !important; /* 440 * 1.3 */
    }
    #showcase-zoom-card-wrapper .card-flip-container {
        transform: scale(1.3) !important;
    }
}
@media (max-width: 480px) {
    #showcase-zoom-card-wrapper > div {
        width: 320px !important; /* 320 * 1.0 */
        height: 440px !important; /* 440 * 1.0 */
    }
    #showcase-zoom-card-wrapper .card-flip-container {
        transform: scale(1.0) !important;
    }
}

/* AI Output Request Panel Grid */
.ai-request-pane {
    animation: fadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.ai-option-card {
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(15, 23, 42, 0.4);
    border-radius: 12px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-option-card:hover {
    border-color: rgba(168, 85, 247, 0.4);
    background: rgba(168, 85, 247, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.1);
}

.ai-option-card.selected {
    border-color: #a855f7 !important;
    background: rgba(168, 85, 247, 0.15) !important;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.25) !important;
}

.option-icon-wrapper {
    transition: all 0.25s ease;
}

.ai-option-card:hover .option-icon-wrapper {
    border-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}


/* Custom Option Card layout and styles (normal view) */
.ai-option-card {
    padding: 12px !important;
    gap: 6px !important;
}
.ai-option-card .option-icon-wrapper {
    width: 36px !important;
    height: 36px !important;
}
.ai-option-card .option-icon-wrapper i {
    font-size: 16px !important;
}
.ai-option-card .option-label {
    font-size: 11px !important;
}
.ai-option-card .option-desc {
    font-size: 8.5px !important;
    line-height: 1.3 !important;
}
.ai-request-pane {
    padding: 8px !important;
}
.ai-request-pane > div:first-child {
    font-size: 11px !important;
    margin-bottom: 8px !important;
}
.ai-request-pane .btn-cancel-request,
.ai-request-pane .btn-submit-request {
    padding: 6px !important;
    font-size: 10px !important;
    border-radius: 8px !important;
}
.ai-request-pane .scrollable-card-body {
    gap: 8px !important;
}



/* Light Mode overrides for Zoomed Card and AI Request controls */
body:not(.theme-dark) #showcase-zoom-card-wrapper .card-front {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(7, 29, 73, 0.15) !important;
    box-shadow: 0 20px 50px rgba(7, 29, 73, 0.2) !important;
}
body:not(.theme-dark) #showcase-zoom-card-wrapper .card-back {
    background: rgba(250, 245, 255, 0.98) !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
    box-shadow: 0 20px 50px rgba(139, 92, 246, 0.25) !important;
}
body:not(.theme-dark) .btn-staging-request {
    background-color: rgba(109, 40, 217, 0.08) !important;
    border-color: rgba(109, 40, 217, 0.25) !important;
    color: #6d28d9 !important;
}
body:not(.theme-dark) .btn-staging-request:hover {
    background-color: #6d28d9 !important;
    color: #ffffff !important;
}
body:not(.theme-dark) .ai-option-card {
    background-color: rgba(7, 29, 73, 0.03) !important;
    border-color: rgba(7, 29, 73, 0.08) !important;
}
body:not(.theme-dark) .ai-option-card:hover {
    background-color: rgba(168, 85, 247, 0.05) !important;
    border-color: rgba(168, 85, 247, 0.3) !important;
}
body:not(.theme-dark) .ai-option-card.selected {
    background-color: rgba(168, 85, 247, 0.12) !important;
    border-color: #a855f7 !important;
}
body:not(.theme-dark) .option-icon-wrapper {
    background-color: rgba(7, 29, 73, 0.03) !important;
    border-color: rgba(7, 29, 73, 0.08) !important;
    color: #475569 !important;
}
body:not(.theme-dark) .btn-cancel-request {
    background-color: rgba(7, 29, 73, 0.03) !important;
    border-color: rgba(7, 29, 73, 0.08) !important;
    color: #334155 !important;
}
body:not(.theme-dark) .btn-cancel-request:hover {
    background-color: rgba(7, 29, 73, 0.06) !important;
    color: #071d49 !important;
}
body:not(.theme-dark) .btn-submit-request {
    background-color: rgba(109, 40, 217, 0.08) !important;
    border-color: rgba(109, 40, 217, 0.2) !important;
    color: #6d28d9 !important;
}
body:not(.theme-dark) .btn-submit-request:not(:disabled) {
    background-color: rgba(109, 40, 217, 0.15) !important;
    color: #6d28d9 !important;
    opacity: 1 !important;
    cursor: pointer !important;
}
body:not(.theme-dark) .btn-submit-request:not(:disabled):hover {
    background-color: #6d28d9 !important;
    color: #ffffff !important;
}

/* Obfuscated scores & report overlay styles */
#detail-ai-evaluation-section {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
}
#detail-ai-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    height: auto !important;
}
.obscured-overlay-container {
    position: relative;
}
.scores-obscured {
    filter: blur(4px) grayscale(50%) !important;
    opacity: 0.25 !important;
    pointer-events: none !important;
    user-select: none !important;
    transition: all 0.3s ease;
}
.obscured-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(11, 15, 25, 0.75);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 8px;
    z-index: 20;
    padding: 1rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    min-height: 140px;
}
.theme-dark .obscured-overlay {
    background: rgba(11, 15, 25, 0.75);
}
body:not(.theme-dark) .obscured-overlay {
    background: rgba(241, 245, 249, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.05);
}
body:not(.theme-dark) .obscured-overlay .text-slate-200 {
    color: #1e293b !important;
}
body:not(.theme-dark) .obscured-overlay .text-slate-400 {
    color: #475569 !important;
}
.obscured-overlay i {
    animation: pulse 2s infinite;
}
.curator-score-row-mini {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10px;
    padding: 1px 0;
    width: 100%;
}
.score-circle-mini {
    width: 18px;
    height: 18px;
    font-size: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: #64748b;
    transition: all 0.2s ease;
}
.score-circle-mini.active-purple {
    background: #a855f7 !important;
    color: #ffffff !important;
    border-color: #a855f7 !important;
    box-shadow: 0 0 6px rgba(168, 85, 247, 0.4);
}
body:not(.theme-dark) .score-circle-mini {
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.03);
    color: #64748b;
}
body:not(.theme-dark) .score-circle-mini.active-purple {
    background: #a855f7 !important;
    color: #ffffff !important;
    border-color: #a855f7 !important;
}

/* ==========================================================================
   Showcase Quad-Zone Miro Canvas & Level of Detail (LOD) Styling
   ========================================================================== */

/* Zone Backdrop Labels and Glow Effects */
#canvas-zones-backdrop > div {
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Subtle glowing hover/drag state for quadrants if cursor enters */
#canvas-zones-backdrop > div:hover {
    background-color: rgba(255, 255, 255, 0.005);
}

/* SVG Connector Lines Styling */
#canvas-connections-svg {
    transform-origin: 0 0;
    overflow: visible;
}
#canvas-connections-svg path.connection-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke-dashoffset 2s linear;
}
#canvas-connections-svg path.connection-line:hover {
    stroke-width: 4.5px !important;
    filter: drop-shadow(0 0 4px currentColor);
    cursor: pointer;
}

/* Color markers for different semantic connections */
.connection-extends { stroke: #06b6d4 !important; }
.connection-implements { stroke: #10b981 !important; }
.connection-depends_on { stroke: #a855f7 !important; }
.connection-governs { stroke: #eab308 !important; }
.connection-contradicts { stroke: #f43f5e !important; }
.connection-default { stroke: rgba(148, 163, 184, 0.25) !important; }

/* SVG text labels on curves */
.connection-text {
    font-size: 8px;
    font-family: 'Fira Code', monospace;
    font-weight: bold;
    fill: #94a3b8;
    paint-order: stroke;
    stroke: #071D49;
    stroke-width: 3px;
    stroke-linecap: round;
    stroke-linejoin: round;
    text-anchor: middle;
}
body:not(.theme-dark) .connection-text {
    stroke: #f1f5f9;
    fill: #475569;
}

/* --- Level of Detail (LOD) Rules --- */

/* 1. Low Zoom LOD (< 40%) - Miniature Playing Card Back */
/* 1. Low Zoom LOD (< 40%) - Miniature Content Preview */

.canvas-lod-low .showcase-canvas-card .card-back-watermark {
    display: none !important;
}
/* Hide complex content: headers, footers, flip buttons, attachments */
.canvas-lod-low .showcase-canvas-card .btn-flip-card,
.canvas-lod-low .showcase-canvas-card .drag-handle,
.canvas-lod-low .showcase-canvas-card .card-corner-index,
.canvas-lod-low .showcase-canvas-card .card-footer-content,
.canvas-lod-low .showcase-canvas-card .bg-black/35,
.canvas-lod-low .showcase-canvas-card .bg-black/40 {
    display: none !important;
}
/* Ensure the body fills the entire card container and scales down */
.canvas-lod-low .showcase-canvas-card .card-body-container,
.canvas-lod-low .showcase-canvas-card .card-back > div.relative.z-10 {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 3px !important;
    height: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}
.canvas-lod-low .showcase-canvas-card .card-body-content {
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow: hidden !important;
}
.canvas-lod-low .showcase-canvas-card .submission-media-preview {
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 4px !important;
}
.canvas-lod-low .showcase-canvas-card .submission-media-preview video,
.canvas-lod-low .showcase-canvas-card .submission-media-preview img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
}
.canvas-lod-low .showcase-canvas-card .submission-media-preview .w-12 {
    width: 1.5rem !important; /* shrink the play button */
    height: 1.5rem !important;
}
.canvas-lod-low .showcase-canvas-card .submission-media-preview .text-[10px],
.canvas-lod-low .showcase-canvas-card .submission-media-preview span {
    display: none !important; /* hide video filenames entirely at low LOD */
}
/* Scale down deliverable text cards / blocks at low LOD */
.canvas-lod-low .showcase-canvas-card p,
.canvas-lod-low .showcase-canvas-card span,
.canvas-lod-low .showcase-canvas-card div {
    font-size: 5px !important;
    line-height: 1.1 !important;
}
.canvas-lod-low .showcase-canvas-card h5,
.canvas-lod-low .showcase-canvas-card h4 {
    font-size: 6px !important;
    margin-bottom: 2px !important;
}
.canvas-lod-low .showcase-canvas-card .storyboard-grid,
.canvas-lod-low .showcase-canvas-card .grid {
    gap: 2px !important;
}
.canvas-lod-low .showcase-canvas-card .bg-black/30 {
    padding: 2px !important;
}

/* 2. Medium Zoom LOD (40% - 79%) - Mid-Size Playing Card */

.canvas-lod-med .showcase-canvas-card .card-back-watermark {
    display: none !important;
}
/* Hide complex chrome at medium zoom */
.canvas-lod-med .showcase-canvas-card .btn-flip-card,
.canvas-lod-med .showcase-canvas-card .drag-handle,
.canvas-lod-med .showcase-canvas-card .card-corner-index,
.canvas-lod-med .showcase-canvas-card .card-footer-content,
.canvas-lod-med .showcase-canvas-card .bg-black/35,
.canvas-lod-med .showcase-canvas-card .bg-black/40 {
    display: none !important;
}
/* Ensure body fills and matches size at medium LOD */
.canvas-lod-med .showcase-canvas-card .card-body-container,
.canvas-lod-med .showcase-canvas-card .card-back > div.relative.z-10 {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 6px !important;
    height: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}
.canvas-lod-med .showcase-canvas-card .card-body-content {
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow: hidden !important;
}
.canvas-lod-med .showcase-canvas-card .submission-media-preview {
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 6px !important;
}
.canvas-lod-med .showcase-canvas-card .submission-media-preview video,
.canvas-lod-med .showcase-canvas-card .submission-media-preview img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
}
.canvas-lod-med .showcase-canvas-card .submission-media-preview .w-12 {
    width: 2.25rem !important;
    height: 2.25rem !important;
}
/* Scale down deliverable text cards / blocks at medium LOD */
.canvas-lod-med .showcase-canvas-card p,
.canvas-lod-med .showcase-canvas-card span,
.canvas-lod-med .showcase-canvas-card div {
    font-size: 8px !important;
    line-height: 1.25 !important;
}
.canvas-lod-med .showcase-canvas-card h5,
.canvas-lod-med .showcase-canvas-card h4 {
    font-size: 10px !important;
    margin-bottom: 4px !important;
}

/* 3. High Zoom LOD (>= 80%) - Full Visual Detail */
/* Card dimensions are scale-invariant and do not grow layout-wise at high zoom */

/* Transition Zoom Animation for camera focusing */
#gallery-canvas.smooth-camera-pan {
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Ensure the canvas viewport grows to fill all vertical space and doesn't collapse to 0 height */
#gallery-canvas-viewport {
    height: 100% !important;
    min-height: 500px !important;
}

/* --- Campus Backgrounds & Playing Card Styles --- */

.canvas-zone-bg-img {
    opacity: 0.12;
    transition: opacity 0.3s ease;
    mix-blend-mode: luminosity;
}
body:not(.theme-dark) .canvas-zone-bg-img {
    opacity: 0.06;
}

/* Corner indices styling for playing cards */
.card-corner-index {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #eab308; /* brand yellow/gold */
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.1;
    z-index: 20;
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.card-corner-index .rank-code {
    text-transform: uppercase;
}
.card-corner-index .suit-icon {
    font-size: 12px;
    margin-top: 2px;
}
.card-corner-index.top-left {
    top: 12px;
    left: 12px;
}
.card-corner-index.bottom-right {
    bottom: 12px;
    right: 12px;
    transform: rotate(180deg);
}

/* Hide corner indices at medium or low zoom to avoid clutter */
.canvas-lod-med .card-corner-index,
.canvas-lod-low .card-corner-index {
    display: none !important;
}

/* Repeating geometric vector pattern on card backs */
.card-back-pattern {
    background-color: #061026 !important;
    background-image: 
        radial-gradient(rgba(234, 179, 8, 0.035) 1.5px, transparent 0),
        radial-gradient(rgba(234, 179, 8, 0.035) 1.5px, transparent 0),
        linear-gradient(rgba(234, 179, 8, 0.015) 1px, transparent 0),
        linear-gradient(90deg, rgba(234, 179, 8, 0.015) 1px, transparent 0);
    background-size: 20px 20px, 20px 20px, 10px 10px, 10px 10px;
    background-position: 0 0, 10px 10px, 0 0, 0 0;
}

/* Large faded format watermark in center of card backs */
.card-back-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 200px;
    color: rgba(234, 179, 8, 0.032) !important;
    pointer-events: none;
    z-index: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure text inside canvas cards remains light even in light theme */
body:not(.theme-dark) .showcase-canvas-card .text-white,
body:not(.theme-dark) .showcase-canvas-card .text-slate-100 { color: #f8fafc !important; }
body:not(.theme-dark) .showcase-canvas-card .text-slate-200 { color: #e2e8f0 !important; }
body:not(.theme-dark) .showcase-canvas-card .text-slate-300 { color: #cbd5e1 !important; }
body:not(.theme-dark) .showcase-canvas-card .text-slate-400 { color: #94a3b8 !important; }
body:not(.theme-dark) .showcase-canvas-card .text-slate-500 { color: #64748b !important; }
body:not(.theme-dark) .showcase-canvas-card .text-cyan-400 { color: #22d3ee !important; }
body:not(.theme-dark) .showcase-canvas-card .text-purple-400 { color: #c084fc !important; }
body:not(.theme-dark) .showcase-canvas-card .text-emerald-400 { color: #34d399 !important; }
body:not(.theme-dark) .showcase-canvas-card .text-amber-400 { color: #fbbf24 !important; }
body:not(.theme-dark) .showcase-canvas-card .text-rose-400 { color: #f87171 !important; }
body:not(.theme-dark) .showcase-canvas-card .text-orange-400 { color: #fb923c !important; }
body:not(.theme-dark) .showcase-canvas-card .text-teal-400 { color: #2dd4bf !important; }
body:not(.theme-dark) .showcase-canvas-card .text-yellow-400 { color: #facc15 !important; }

/* Keep dark backgrounds for layouts inside playing cards in light theme */
body:not(.theme-dark) .showcase-canvas-card .bg-black\/10 { background-color: rgba(0, 0, 0, 0.1) !important; }
body:not(.theme-dark) .showcase-canvas-card .bg-black\/15 { background-color: rgba(0, 0, 0, 0.15) !important; }
body:not(.theme-dark) .showcase-canvas-card .bg-black\/20 { background-color: rgba(0, 0, 0, 0.2) !important; }
body:not(.theme-dark) .showcase-canvas-card .bg-black\/25 { background-color: rgba(0, 0, 0, 0.25) !important; }
body:not(.theme-dark) .showcase-canvas-card .bg-black\/30 { background-color: rgba(0, 0, 0, 0.3) !important; }
body:not(.theme-dark) .showcase-canvas-card .bg-black\/35 { background-color: rgba(0, 0, 0, 0.35) !important; }
body:not(.theme-dark) .showcase-canvas-card .bg-black\/40 { background-color: rgba(0, 0, 0, 0.4) !important; }
body:not(.theme-dark) .showcase-canvas-card .border-white\/10 { border-color: rgba(255, 255, 255, 0.1) !important; }
body:not(.theme-dark) .showcase-canvas-card .border-white\/5 { border-color: rgba(255, 255, 255, 0.05) !important; }

/* Celestial Space background for floating island */
.bg-space-sky {
    background: radial-gradient(circle at 50% 50%, #040e24 0%, #01050e 100%);
    background-image: 
        radial-gradient(circle at 50% 50%, #040e24 0%, #01050e 100%),
        radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 0),
        radial-gradient(rgba(255, 255, 255, 0.1) 1.5px, transparent 0);
    background-size: 100% 100%, 60px 60px, 120px 120px;
    background-position: 0 0, 15px 15px, 40px 80px;
}

/* Floating animation for isometric map */
@keyframes island-float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}
#canvas-isometric-island-container {
    animation: island-float 8s ease-in-out infinite;
}

/* HUD Zone label styling */
.hud-zone-label {
    background: rgba(4, 10, 26, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 10px 16px;
    border-radius: 6px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(234, 179, 8, 0.25);
}

/* Text glow effects for HUD sectors */
.text-glow-cyan {
    text-shadow: 0 0 10px rgba(6, 182, 212, 0.3), 0 0 2px rgba(6, 182, 212, 0.6);
}
.text-glow-purple {
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.3), 0 0 2px rgba(168, 85, 247, 0.6);
}
.text-glow-emerald {
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.3), 0 0 2px rgba(16, 185, 129, 0.6);
}
.text-glow-amber {
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.3), 0 0 2px rgba(245, 158, 11, 0.6);
}

/* ==========================================================================
   🎮 DISCOVERY MODE GAMIFICATION STYLES
   ========================================================================== */

/* Hotspot Card Overrides */
.showcase-canvas-card.is-hotspot-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    width: 320px !important;
    height: 440px !important;
}

/* Adjust footprint sizes for hotspot cards at Low & Medium LOD levels */
.canvas-lod-low .showcase-canvas-card.is-hotspot-card {
    width: 80px !important;
    height: 110px !important;
}
.canvas-lod-med .showcase-canvas-card.is-hotspot-card {
    width: 160px !important;
    height: 220px !important;
}

/* Interactive Hotspot Element */
.discovery-hotspot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: visible;
    transition: transform 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10;
}
.discovery-hotspot:hover {
    transform: scale(1.25) translateY(-8px);
}

/* 16-Bit Pixel Art Biosphere Items Sprite */
.sprite-hotspot-item {
    width: 64px;
    height: 64px;
    background-image: url('../assets/discovery_sprites.png');
    background-size: 128px 256px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
    transition: filter 0.22s ease, transform 0.22s ease;
}
.discovery-hotspot:hover .sprite-hotspot-item {
    filter: drop-shadow(0 0 12px currentColor) drop-shadow(0 6px 12px rgba(0,0,0,0.7));
}

/* 16-Bit Pixel Art Agent Medallions Sprite */
.sprite-hotspot-agent {
    width: 48px;
    height: 48px;
    background-image: url('../assets/agent_discovery_sprites.png');
    background-size: 336px 48px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    border-radius: 50%;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
    transition: filter 0.22s ease, transform 0.22s ease;
}
.discovery-hotspot:hover .sprite-hotspot-agent {
    filter: drop-shadow(0 0 15px currentColor) drop-shadow(0 5px 10px rgba(0,0,0,0.7));
}

/* Sprite backgrounds based on item coordinates (64x64 grids) */
.sprite-scroll     { background-position: 0px 0px; color: #22d3ee; }
.sprite-grad-cap   { background-position: -64px 0px; color: #06b6d4; }
.sprite-crystal    { background-position: 0px -64px; color: #c084fc; }
.sprite-telescope  { background-position: -64px -64px; color: #a855f7; }
.sprite-coconut    { background-position: 0px -128px; color: #34d399; }
.sprite-heart      { background-position: -64px -128px; color: #10b981; }
.sprite-chest      { background-position: 0px -192px; color: #facc15; }
.sprite-compass    { background-position: -64px -192px; color: #fbbf24; }

/* Agent Medallion Background offsets (48x48 intervals) */
.sprite-agent-map         { background-position: 0px 0px; color: #eab308; }
.sprite-agent-activate    { background-position: -48px 0px; color: #f97316; }
.sprite-agent-protect     { background-position: -96px 0px; color: #3b82f6; }
.sprite-agent-orchestrate { background-position: -144px 0px; color: #ec4899; }
.sprite-agent-prototype   { background-position: -192px 0px; color: #06b6d4; }
.sprite-agent-align       { background-position: -240px 0px; color: #10b981; }
.sprite-agent-refine      { background-position: -288px 0px; color: #94a3b8; }

/* Zoom scaling adjustment overrides for sprites in LOD views */
.canvas-lod-low .sprite-hotspot-item  { transform: scale(0.65); }
.canvas-lod-low .sprite-hotspot-agent { transform: scale(0.65); }
.canvas-lod-med .sprite-hotspot-item  { transform: scale(0.9); }
.canvas-lod-med .sprite-hotspot-agent { transform: scale(0.9); }

/* Glowing pulse effect surrounding hotspots */
@keyframes hotspot-pulse-glow {
    0% { transform: scale(0.75); opacity: 0.9; }
    50% { transform: scale(1.15); opacity: 0.45; }
    100% { transform: scale(1.45); opacity: 0; }
}
.hotspot-pulse-ring {
    position: absolute;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 2px solid currentColor;
    pointer-events: none;
    animation: hotspot-pulse-glow 2s infinite ease-out;
    z-index: 1;
}
.canvas-lod-low .hotspot-pulse-ring  { width: 44px; height: 44px; }
.canvas-lod-med .hotspot-pulse-ring  { width: 56px; height: 56px; }

/* Small helper retro tooltips */
.hotspot-tooltip {
    position: absolute;
    bottom: -22px;
    background: rgba(9, 15, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    font-size: 8px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 7px;
    border-radius: 5px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease, bottom 0.2s ease;
    pointer-events: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.6);
    z-index: 20;
}
.discovery-hotspot:hover .hotspot-tooltip {
    opacity: 1;
    bottom: -28px;
}
.canvas-lod-low .hotspot-tooltip {
    display: none !important;
}

/* High-impact flash/bounce animation on unlock click */
@keyframes hotspot-unlock-bounce {
    0% { transform: scale(1.2); filter: brightness(1) drop-shadow(0 0 10px currentColor); }
    40% { transform: scale(1.6); filter: brightness(2.2) drop-shadow(0 0 35px currentColor); }
    100% { transform: scale(0); opacity: 0; filter: brightness(3.5); }
}
.hotspot-unlocked-pulse {
    animation: hotspot-unlock-bounce 0.55s cubic-bezier(0.19, 1, 0.22, 1) forwards !important;
}

/* Card reveal 3D zoom & flip effect */
@keyframes card-reveal-zoom-flip {
    0% { transform: scale(0.15) rotateY(180deg); opacity: 0; }
    60% { transform: scale(1.05) rotateY(-15deg); opacity: 0.95; }
    100% { transform: scale(1) rotateY(0deg); opacity: 1; }
}
.card-reveal-spin {
    animation: card-reveal-zoom-flip 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.15) forwards;
}

/* Floating Discovery Progress Panel */
#discovery-game-panel {
    background: rgba(7, 20, 52, 0.92) !important;
    border: 1px solid rgba(234, 179, 8, 0.25) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), inset 0 0 20px rgba(234, 179, 8, 0.05);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}
#discovery-game-panel:not(.hidden) {
    display: flex !important;
}
#discovery-game-panel.active {
    transform: translateX(0) !important;
}
.btn-discovery-pan {
    cursor: pointer !important;
    transition: all 0.2s ease;
}
.btn-discovery-pan:hover {
    background: rgba(6, 182, 212, 0.2) !important;
    border-color: rgba(6, 182, 212, 0.4) !important;
    transform: scale(1.05);
}
/* Pulsing unexplored indicators on cards */
.unexplored-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background-color: #06b6d4; /* cyan-500 */
    border-radius: 50%;
    box-shadow: 0 0 8px #06b6d4;
    animation: unexplored-pulse 2s infinite ease-in-out;
    pointer-events: none;
    z-index: 20;
}
.unexplored-attachment-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 6px;
    height: 6px;
    background-color: #f59e0b; /* amber-500 */
    border-radius: 50%;
    box-shadow: 0 0 6px #f59e0b;
    animation: unexplored-pulse 1.5s infinite ease-in-out;
    pointer-events: none;
    z-index: 20;
}
@keyframes unexplored-pulse {
    0% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 10px currentColor; }
    100% { transform: scale(0.8); opacity: 0.5; }
}

/* --- Brand Contrast & Title Styling For Gates --- */
#auth-gate, #coming-soon-gate {
    color: #f8fafc !important;
}
#auth-gate h1, #coming-soon-gate h1 {
    color: #ffffff !important;
}
#auth-gate p, #coming-soon-gate p {
    color: #cbd5e1 !important;
}

/* --- Card Back Light Mode Overrides --- */
body:not(.theme-dark) .card-back {
    background: #ffffff !important;
    color: #071D49 !important;
    border-color: rgba(7, 29, 73, 0.12) !important;
    box-shadow: 0 10px 30px rgba(7, 29, 73, 0.08) !important;
}

body:not(.theme-dark) .card-back-pattern {
    background-image: none !important;
}

body:not(.theme-dark) .card-back-watermark {
    opacity: 0.03 !important;
    color: #071D49 !important;
}

body:not(.theme-dark) .card-back .obscured-overlay {
    background-color: rgba(255, 255, 255, 0.95) !important;
}

body:not(.theme-dark) .card-back .obscured-overlay span {
    color: #071D49 !important;
}

body:not(.theme-dark) .card-back .obscured-overlay p {
    color: #475569 !important;
}

body:not(.theme-dark) .card-back p.text-slate-300 {
    color: #334155 !important;
}
body:not(.theme-dark) .card-back .text-slate-400 {
    color: #475569 !important;
}
body:not(.theme-dark) .card-back .text-slate-200 {
    color: #1e293b !important;
}
body:not(.theme-dark) .card-back .text-cyan-400 {
    color: #0077C8 !important; /* ARU Cyan in light mode */
}

/* Score block grid overrides for light mode card back */
body:not(.theme-dark) .card-back .bg-black\/35 {
    background-color: rgba(7, 29, 73, 0.03) !important;
    border-color: rgba(7, 29, 73, 0.08) !important;
}
body:not(.theme-dark) .card-back .grid .bg-black\/20 {
    background-color: rgba(7, 29, 73, 0.04) !important;
    border-color: rgba(7, 29, 73, 0.08) !important;
}
body:not(.theme-dark) .card-back .grid .text-white {
    color: #071D49 !important;
}
body:not(.theme-dark) .card-back .bg-black\/30,
body:not(.theme-dark) .card-back .bg-black\/40 {
    background-color: rgba(7, 29, 73, 0.04) !important;
}
body:not(.theme-dark) .card-back .border-white\/5 {
    border-color: rgba(7, 29, 73, 0.08) !important;
}
body:not(.theme-dark) .card-back .border-t {
    border-top-color: rgba(7, 29, 73, 0.08) !important;
}
body:not(.theme-dark) .card-back .btn-staging-like {
    color: #475569 !important;
}
body:not(.theme-dark) .card-back .btn-staging-like:hover {
    color: #071D49 !important;
}
body:not(.theme-dark) .card-back .btn-staging-like.text-emerald-400 {
    color: #059669 !important;
}

/* --- Zoom Modal Card Back Scaling --- */
#showcase-zoom-card-wrapper .card-back p.text-\[9px\] {
    font-size: 18px !important;
    line-height: 1.7 !important;
}
#showcase-zoom-card-wrapper .card-back span.text-\[8px\] {
    font-size: 13px !important;
}
#showcase-zoom-card-wrapper .card-back .grid .text-white {
    font-size: 32px !important;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 2px;
}
#showcase-zoom-card-wrapper .card-back .grid .text-\[7px\] {
    font-size: 10px !important;
}
#showcase-zoom-card-wrapper .card-back ul.list-disc {
    font-size: 15px !important;
    line-height: 1.6 !important;
}
#showcase-zoom-card-wrapper .card-back ul.list-disc li {
    margin-bottom: 4px;
}/* --- Donut Pie Chart Custom Styles --- */
.theme-donut-slice {
    transition: stroke-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease;
}
.theme-donut-slice:hover {
    filter: brightness(1.15) drop-shadow(0 0 4px rgba(6, 182, 212, 0.2));
}

.donut-cutout {
    background-color: var(--bg-color);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
body:not(.theme-dark) .donut-cutout {
    border: 1px solid rgba(7, 29, 73, 0.08);
}

/* Scaling Overall Box in Zoom Modal Focus View */
#showcase-zoom-card-wrapper .card-back .overall-score-box {
    width: 60px !important;
    padding: 8px !important;
    border-radius: 12px !important;
}

/* High-impact flash/bounce animation on unlock click */
@keyframes hotspot-unlock-bounce {
    0% { transform: scale(1.2); filter: brightness(1) drop-shadow(0 0 10px currentColor); }
    40% { transform: scale(1.6); filter: brightness(2.2) drop-shadow(0 0 35px currentColor); }
    100% { transform: scale(0); opacity: 0; filter: brightness(3.5); }
}
.hotspot-unlocked-pulse {
    animation: hotspot-unlock-bounce 0.55s cubic-bezier(0.19, 1, 0.22, 1) forwards !important;
}

/* Card reveal 3D zoom & flip effect */
@keyframes card-reveal-zoom-flip {
    0% { transform: scale(0.15) rotateY(180deg); opacity: 0; }
    60% { transform: scale(1.05) rotateY(-15deg); opacity: 0.95; }
    100% { transform: scale(1) rotateY(0deg); opacity: 1; }
}
.card-reveal-spin {
    animation: card-reveal-zoom-flip 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.15) forwards;
}



/* --- Brand Contrast & Title Styling For Gates --- */
#auth-gate, #coming-soon-gate {
    color: #f8fafc !important;
}
#auth-gate h1, #coming-soon-gate h1 {
    color: #ffffff !important;
}
#auth-gate p, #coming-soon-gate p {
    color: #cbd5e1 !important;
}

/* --- Card Back Light Mode Overrides --- */
body:not(.theme-dark) .card-back {
    background: #ffffff !important;
    color: #071D49 !important;
    border-color: rgba(7, 29, 73, 0.12) !important;
    box-shadow: 0 10px 30px rgba(7, 29, 73, 0.08) !important;
}

body:not(.theme-dark) .card-back-pattern {
    background-image: none !important;
}

body:not(.theme-dark) .card-back-watermark {
    opacity: 0.03 !important;
    color: #071D49 !important;
}

body:not(.theme-dark) .card-back .obscured-overlay {
    background-color: rgba(255, 255, 255, 0.95) !important;
}

body:not(.theme-dark) .card-back .obscured-overlay span {
    color: #071D49 !important;
}

body:not(.theme-dark) .card-back .obscured-overlay p {
    color: #475569 !important;
}

body:not(.theme-dark) .card-back p.text-slate-300 {
    color: #334155 !important;
}
body:not(.theme-dark) .card-back .text-slate-400 {
    color: #475569 !important;
}
body:not(.theme-dark) .card-back .text-slate-200 {
    color: #1e293b !important;
}
body:not(.theme-dark) .card-back .text-cyan-400 {
    color: #0077C8 !important; /* ARU Cyan in light mode */
}

/* Score block grid overrides for light mode card back */
body:not(.theme-dark) .card-back .bg-black\/35 {
    background-color: rgba(7, 29, 73, 0.03) !important;
    border-color: rgba(7, 29, 73, 0.08) !important;
}
body:not(.theme-dark) .card-back .grid .bg-black\/20 {
    background-color: rgba(7, 29, 73, 0.04) !important;
    border-color: rgba(7, 29, 73, 0.08) !important;
}
body:not(.theme-dark) .card-back .grid .text-white {
    color: #071D49 !important;
}
body:not(.theme-dark) .card-back .bg-black\/30,
body:not(.theme-dark) .card-back .bg-black\/40 {
    background-color: rgba(7, 29, 73, 0.04) !important;
}
body:not(.theme-dark) .card-back .border-white\/5 {
    border-color: rgba(7, 29, 73, 0.08) !important;
}
body:not(.theme-dark) .card-back .border-t {
    border-top-color: rgba(7, 29, 73, 0.08) !important;
}
body:not(.theme-dark) .card-back .btn-staging-like {
    color: #475569 !important;
}
body:not(.theme-dark) .card-back .btn-staging-like:hover {
    color: #071D49 !important;
}
body:not(.theme-dark) .card-back .btn-staging-like.text-emerald-400 {
    color: #059669 !important;
}

/* --- Zoom Modal Card Back Scaling --- */
#showcase-zoom-card-wrapper .card-back p.text-\[9px\] {
    font-size: 18px !important;
    line-height: 1.7 !important;
}
#showcase-zoom-card-wrapper .card-back span.text-\[8px\] {
    font-size: 13px !important;
}
#showcase-zoom-card-wrapper .card-back .grid .text-white {
    font-size: 32px !important;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 2px;
}
#showcase-zoom-card-wrapper .card-back .grid .text-\[7px\] {
    font-size: 10px !important;
}
#showcase-zoom-card-wrapper .card-back ul.list-disc {
    font-size: 15px !important;
    line-height: 1.6 !important;
}
#showcase-zoom-card-wrapper .card-back ul.list-disc li {
    margin-bottom: 4px;
}/* --- Donut Pie Chart Custom Styles --- */
.theme-donut-slice {
    transition: stroke-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease;
}
.theme-donut-slice:hover {
    filter: brightness(1.15) drop-shadow(0 0 4px rgba(6, 182, 212, 0.2));
}

.donut-cutout {
    background-color: var(--bg-color);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
body:not(.theme-dark) .donut-cutout {
    border: 1px solid rgba(7, 29, 73, 0.08);
}

/* Scaling Overall Box in Zoom Modal Focus View */
#showcase-zoom-card-wrapper .card-back .overall-score-box {
    width: 60px !important;
    padding: 8px !important;
    border-radius: 12px !important;
}
#showcase-zoom-card-wrapper .card-back .overall-score-box .text-white {
    font-size: 22px !important;
    margin-bottom: 2px;
}
#showcase-zoom-card-wrapper .card-back .overall-score-box .text-\[6px\] {
    font-size: 8px !important;
}

/* Theme Donut Labels Styling */
.theme-donut-label {
    fill: #000000 !important;
}
.theme-dark .theme-donut-label {
    fill: #ffffff !important;
}

/* ==========================================================================
   📎 INTERACTIVE CARD ATTACHMENTS OVERLAY
   ========================================================================== */

.card-attachments-overlay {
    background: #ffffff !important;
    border: 6px solid #071D49 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    position: absolute;
    inset: 0;
    z-index: 30;
    border-radius: 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 1.25rem !important;
    animation: attachmentsSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.card-attachments-overlay::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 1.5px solid #c59b27;
    border-radius: calc(1rem - 4px);
    pointer-events: none;
    z-index: 10;
}

@keyframes attachmentsSlideUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Force legibility and premium white card feel in both themes */
.card-attachments-overlay span.text-slate-800,
.card-attachments-overlay span.text-slate-200 {
    color: #0f172a !important;
}

.card-attachments-overlay button.btn-open-attachment {
    color: #0077C8 !important;
}

.card-attachments-overlay button.btn-open-attachment:hover {
    color: #025a99 !important;
}

.card-attachments-overlay button.btn-close-attachments {
    color: #64748b !important;
}

.card-attachments-overlay button.btn-close-attachments:hover {
    color: #071D49 !important;
}

/* ==========================================================================
   🔍 SCROLLABLE CARD BODY CURSOR FIX
   ========================================================================== */

/* Return cursor to normal in scrollable text areas to avoid misleading zoom-in icon */
.scrollable-card-body,
.scrollable-card-back-body {
    cursor: auto;
}

/* ==========================================================================
   📎 ACCESSIBILITY OVERRIDES & PROFILE PANEL
   ========================================================================== */

/* Dyslexic-Friendly text styling overrides */
body.font-accessible {
    letter-spacing: 0.06em !important;
    word-spacing: 0.12em !important;
    line-height: 1.7 !important;
}
body.font-accessible:not(.font-opendyslexic) {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
}

/* Unified User Profile Popover */
#user-menu-popover {
    min-width: 290px;
    z-index: 1000 !important; /* Force to be above all lists and scrollbars */
    background: #0f172a !important; /* Solid dark background */
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4) !important;
    border-radius: 12px !important;
}

body:not(.theme-dark) #user-menu-popover {
    background: #ffffff !important; /* Solid white background in light mode */
    border: 1px solid rgba(7, 29, 73, 0.15) !important;
    box-shadow: 0 20px 25px -5px rgba(7, 29, 73, 0.15), 0 10px 10px -5px rgba(7, 29, 73, 0.08) !important;
}

/* Ensure text and headings inside the popover menu have excellent contrast in light mode */
body:not(.theme-dark) #user-menu-popover span,
body:not(.theme-dark) #user-menu-popover label {
    color: #475569 !important; /* dark slate */
}
body:not(.theme-dark) #user-menu-popover .text-white {
    color: #071D49 !important; /* ARU Rich Blue */
}
body:not(.theme-dark) #user-menu-popover .text-slate-400 {
    color: #64748b !important;
}

/* Styling for scaling buttons inside the popover */
#user-menu-popover button {
    transition: all 0.2s ease;
}

/* Override active state scale button for high contrast/readability */
#user-menu-popover button.bg-cyan-600\/35 {
    background-color: rgba(6, 182, 212, 0.25) !important;
    border-color: rgba(6, 182, 212, 0.5) !important;
    color: #22d3ee !important;
}
body:not(.theme-dark) #user-menu-popover button.bg-cyan-600\/35 {
    background-color: rgba(0, 119, 200, 0.15) !important;
    border-color: rgba(0, 119, 200, 0.4) !important;
    color: #0077C8 !important;
}

body:not(.theme-dark) #user-menu-popover button:not(.bg-cyan-600\/35):not(#btn-logout) {
    background-color: rgba(7, 29, 73, 0.05) !important;
    border-color: rgba(7, 29, 73, 0.1) !important;
    color: #475569 !important;
}
body:not(.theme-dark) #user-menu-popover button:not(.bg-cyan-600\/35):not(#btn-logout):hover {
    background-color: rgba(7, 29, 73, 0.1) !important;
    color: #071D49 !important;
}

/* High Contrast mode style overrides */
body.theme-high-contrast {
    --bg-color: #000000 !important;
    --text-color: #ffffff !important;
    --card-bg: #000000 !important;
    --card-border: #ffffff !important;
    --border-color: #ffffff !important;
    --sidebar-bg: #000000 !important;
    --scrollbar-track: #000000 !important;
    --scrollbar-thumb: #ffffff !important;
    --scrollbar-thumb-hover: #ffffff !important;
    background-image: none !important;
}
body.theme-high-contrast .glass-card,
body.theme-high-contrast .card-back {
    background-color: #000000 !important;
    border: 2px solid #ffffff !important;
    box-shadow: none !important;
}
body.theme-high-contrast text,
body.theme-high-contrast span,
body.theme-high-contrast div,
body.theme-high-contrast p,
body.theme-high-contrast h1,
body.theme-high-contrast h2,
body.theme-high-contrast h3,
body.theme-high-contrast h4,
body.theme-high-contrast h5,
body.theme-high-contrast h6,
body.theme-high-contrast a,
body.theme-high-contrast i,
body.theme-high-contrast button {
    color: #ffffff !important;
    text-shadow: none !important;
}
body.theme-high-contrast button,
body.theme-high-contrast select,
body.theme-high-contrast input {
    background-color: #000000 !important;
    border: 1.5px solid #ffffff !important;
    color: #ffffff !important;
    background-image: none !important;
}
body.theme-high-contrast button:hover,
body.theme-high-contrast select:hover,
body.theme-high-contrast input:focus {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
}
body.theme-high-contrast .text-cyan-400,
body.theme-high-contrast .text-yellow-400,
body.theme-high-contrast .text-purple-400,
body.theme-high-contrast .text-emerald-400,
body.theme-high-contrast .text-amber-400,
body.theme-high-contrast .text-rose-400 {
    color: #ffff00 !important; /* High contrast yellow for highlights */
}
body.theme-high-contrast .text-slate-100,
body.theme-high-contrast .text-slate-200,
body.theme-high-contrast .text-slate-300,
body.theme-high-contrast .text-slate-400,
body.theme-high-contrast .text-slate-500,
body.theme-high-contrast .text-slate-600 {
    color: #ffffff !important;
}
body.theme-high-contrast .bg-cyan-600\/25,
body.theme-high-contrast .bg-white\/5,
body.theme-high-contrast .bg-slate-900\/25,
body.theme-high-contrast .bg-slate-900\/15,
body.theme-high-contrast .bg-black\/20,
body.theme-high-contrast .bg-black\/25,
body.theme-high-contrast .bg-black\/40,
body.theme-high-contrast .bg-blue-500\/10,
body.theme-high-contrast .bg-emerald-500\/10,
body.theme-high-contrast .bg-purple-500\/10,
body.theme-high-contrast .bg-amber-500\/10,
body.theme-high-contrast .bg-rose-500\/10,
body.theme-high-contrast .bg-slate-500\/10,
body.theme-high-contrast .bg-cyan-500\/10,
body.theme-high-contrast .border-blue-500\/20,
body.theme-high-contrast .border-emerald-500\/20,
body.theme-high-contrast .border-purple-500\/20,
body.theme-high-contrast .border-amber-500\/20,
body.theme-high-contrast .border-rose-500\/20,
body.theme-high-contrast .border-slate-500\/20,
body.theme-high-contrast .border-cyan-500\/20 {
    background-color: #000000 !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}

/* Dark HC Header and Navigation styling */
body.theme-high-contrast header {
    background-color: #000000 !important;
    border-bottom: 2px solid #ffffff !important;
}
body.theme-high-contrast header h1 {
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    -webkit-background-clip: initial !important;
    color: #ffffff !important;
}
body.theme-high-contrast header p,
body.theme-high-contrast header span,
body.theme-high-contrast header div,
body.theme-high-contrast header i {
    color: #ffffff !important;
}
body.theme-high-contrast #nav-tabs {
    background-color: #000000 !important;
    border: 1px solid #ffffff !important;
}
body.theme-high-contrast .nav-tab-btn {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
}
body.theme-high-contrast header .nav-tab-btn:not(.active) {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
}
body.theme-high-contrast .nav-tab-btn.active {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ffffff !important;
}
body.theme-high-contrast .nav-tab-btn.active i {
    color: #000000 !important;
}
body.theme-high-contrast .nav-tab-btn:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
}
body.theme-high-contrast header .nav-tab-btn:not(.active):hover {
    background-color: #ffffff !important;
    color: #000000 !important;
}
body.theme-high-contrast .nav-tab-btn:hover i,
body.theme-high-contrast header .nav-tab-btn:not(.active):hover i {
    color: #000000 !important;
}
body.theme-high-contrast #btn-user-avatar {
    background: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}
body.theme-high-contrast #btn-user-avatar:hover {
    background: #ffffff !important;
    color: #000000 !important;
}
body.theme-high-contrast #api-status-badge {
    color: #ffffff !important;
}
body.theme-high-contrast #api-status-badge span {
    border: 1px solid #ffffff !important;
}

/* User profile popover controls in Dark HC */
body.theme-high-contrast #user-menu-popover button.bg-cyan-600\/35 {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
}
body.theme-high-contrast #user-menu-popover button:not(.bg-cyan-600\/35):not(#btn-logout) {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}
body.theme-high-contrast #user-menu-popover button:not(.bg-cyan-600\/35):not(#btn-logout):hover {
    background-color: #ffffff !important;
    color: #000000 !important;
}
body.theme-high-contrast #btn-logout {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}
body.theme-high-contrast #btn-logout:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* High contrast light mode overrides */
body:not(.theme-dark).theme-high-contrast {
    --bg-color: #ffffff !important;
    --text-color: #000000 !important;
    --card-bg: #ffffff !important;
    --card-border: #000000 !important;
    --border-color: #000000 !important;
    --sidebar-bg: #ffffff !important;
    --scrollbar-track: #ffffff !important;
    --scrollbar-thumb: #000000 !important;
    --scrollbar-thumb-hover: #000000 !important;
}
body:not(.theme-dark).theme-high-contrast .glass-card,
body:not(.theme-dark).theme-high-contrast .card-back {
    background-color: #ffffff !important;
    border: 2px solid #000000 !important;
    box-shadow: none !important;
}
body:not(.theme-dark).theme-high-contrast text,
body:not(.theme-dark).theme-high-contrast span,
body:not(.theme-dark).theme-high-contrast div,
body:not(.theme-dark).theme-high-contrast p,
body:not(.theme-dark).theme-high-contrast h1,
body:not(.theme-dark).theme-high-contrast h2,
body:not(.theme-dark).theme-high-contrast h3,
body:not(.theme-dark).theme-high-contrast h4,
body:not(.theme-dark).theme-high-contrast h5,
body:not(.theme-dark).theme-high-contrast h6,
body:not(.theme-dark).theme-high-contrast a,
body:not(.theme-dark).theme-high-contrast i,
body:not(.theme-dark).theme-high-contrast button {
    color: #000000 !important;
}
body:not(.theme-dark).theme-high-contrast button,
body:not(.theme-dark).theme-high-contrast select,
body:not(.theme-dark).theme-high-contrast input {
    background-color: #ffffff !important;
    border: 1.5px solid #000000 !important;
    color: #000000 !important;
    background-image: none !important;
}
body:not(.theme-dark).theme-high-contrast button:hover,
body:not(.theme-dark).theme-high-contrast select:hover,
body:not(.theme-dark).theme-high-contrast input:focus {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
}
body:not(.theme-dark).theme-high-contrast .text-cyan-400,
body:not(.theme-dark).theme-high-contrast .text-yellow-400,
body:not(.theme-dark).theme-high-contrast .text-purple-400,
body:not(.theme-dark).theme-high-contrast .text-emerald-400,
body:not(.theme-dark).theme-high-contrast .text-amber-400,
body:not(.theme-dark).theme-high-contrast .text-rose-400 {
    color: #0000ff !important; /* High contrast blue for highlights */
    font-weight: 900 !important;
}
body:not(.theme-dark).theme-high-contrast .text-slate-100,
body:not(.theme-dark).theme-high-contrast .text-slate-200,
body:not(.theme-dark).theme-high-contrast .text-slate-300,
body:not(.theme-dark).theme-high-contrast .text-slate-400,
body:not(.theme-dark).theme-high-contrast .text-slate-500,
body:not(.theme-dark).theme-high-contrast .text-slate-600 {
    color: #000000 !important;
}
body:not(.theme-dark).theme-high-contrast .bg-cyan-600\/25,
body:not(.theme-dark).theme-high-contrast .bg-white\/5,
body:not(.theme-dark).theme-high-contrast .bg-slate-900\/25,
body:not(.theme-dark).theme-high-contrast .bg-slate-900\/15,
body:not(.theme-dark).theme-high-contrast .bg-black\/20,
body:not(.theme-dark).theme-high-contrast .bg-black\/25,
body:not(.theme-dark).theme-high-contrast .bg-black\/40,
body:not(.theme-dark).theme-high-contrast .bg-blue-500\/10,
body:not(.theme-dark).theme-high-contrast .bg-emerald-500\/10,
body:not(.theme-dark).theme-high-contrast .bg-purple-500\/10,
body:not(.theme-dark).theme-high-contrast .bg-amber-500\/10,
body:not(.theme-dark).theme-high-contrast .bg-rose-500\/10,
body:not(.theme-dark).theme-high-contrast .bg-slate-500\/10,
body:not(.theme-dark).theme-high-contrast .bg-cyan-500\/10,
body:not(.theme-dark).theme-high-contrast .border-blue-500\/20,
body:not(.theme-dark).theme-high-contrast .border-emerald-500\/20,
body:not(.theme-dark).theme-high-contrast .border-purple-500\/20,
body:not(.theme-dark).theme-high-contrast .border-amber-500\/20,
body:not(.theme-dark).theme-high-contrast .border-rose-500\/20,
body:not(.theme-dark).theme-high-contrast .border-slate-500\/20,
body:not(.theme-dark).theme-high-contrast .border-cyan-500\/20 {
    background-color: #ffffff !important;
    border-color: #000000 !important;
    color: #000000 !important;
}

/* Light HC Header and Navigation styling */
body:not(.theme-dark).theme-high-contrast header {
    background-color: #ffffff !important;
    border-bottom: 2px solid #000000 !important;
}
body:not(.theme-dark).theme-high-contrast header h1 {
    background: none !important;
    -webkit-text-fill-color: #000000 !important;
    -webkit-background-clip: initial !important;
    color: #000000 !important;
}
body:not(.theme-dark).theme-high-contrast header p,
body:not(.theme-dark).theme-high-contrast header span,
body:not(.theme-dark).theme-high-contrast header div,
body:not(.theme-dark).theme-high-contrast header i {
    color: #000000 !important;
}
body:not(.theme-dark).theme-high-contrast #nav-tabs {
    background-color: #ffffff !important;
    border: 1px solid #000000 !important;
}
body:not(.theme-dark).theme-high-contrast .nav-tab-btn {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
}
body:not(.theme-dark).theme-high-contrast header .nav-tab-btn:not(.active) {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
}
body:not(.theme-dark).theme-high-contrast .nav-tab-btn.active {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #000000 !important;
}
body:not(.theme-dark).theme-high-contrast .nav-tab-btn.active i {
    color: #ffffff !important;
}
body:not(.theme-dark).theme-high-contrast .nav-tab-btn:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
}
body:not(.theme-dark).theme-high-contrast header .nav-tab-btn:not(.active):hover {
    background-color: #000000 !important;
    color: #ffffff !important;
}
body:not(.theme-dark).theme-high-contrast .nav-tab-btn:hover i,
body:not(.theme-dark).theme-high-contrast header .nav-tab-btn:not(.active):hover i {
    color: #ffffff !important;
}
body:not(.theme-dark).theme-high-contrast #btn-user-avatar {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
}
body:not(.theme-dark).theme-high-contrast #btn-user-avatar:hover {
    background: #000000 !important;
    color: #ffffff !important;
}
body:not(.theme-dark).theme-high-contrast #api-status-badge {
    color: #000000 !important;
}
body:not(.theme-dark).theme-high-contrast #api-status-badge span {
    border: 1px solid #000000 !important;
}

/* User profile popover controls in Light HC */
body:not(.theme-dark).theme-high-contrast #user-menu-popover button.bg-cyan-600\/35 {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
}
body:not(.theme-dark).theme-high-contrast #user-menu-popover button:not(.bg-cyan-600\/35):not(#btn-logout) {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #000000 !important;
}
body:not(.theme-dark).theme-high-contrast #user-menu-popover button:not(.bg-cyan-600\/35):not(#btn-logout):hover {
    background-color: #000000 !important;
    color: #ffffff !important;
}
body:not(.theme-dark).theme-high-contrast #btn-logout {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #000000 !important;
}
body:not(.theme-dark).theme-high-contrast #btn-logout:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Showcase Gallery Card Sizing & Accessibility Overrides (User Control Panel)
   ========================================================================== */

/* 1 & 2. Card Header Area: Badges, Ref ID, Flip Button Sizing & Contrast */
.card-front .preview-badge,
.card-back .preview-badge,
.card-front .drag-handle .preview-badge,
.card-back .drag-handle .preview-badge {
    font-size: 0.85rem !important;
    padding: 0.35rem 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    line-height: 1 !important;
}

/* Hard contrast overrides for dynamic labels in Light/Dark high-contrast */
body.theme-high-contrast .card-front .preview-badge,
body.theme-high-contrast .card-back .preview-badge {
    background-color: #000000 !important;
    border: 1.5px solid #ffffff !important;
    color: #ffffff !important;
}
body:not(.theme-dark).theme-high-contrast .card-front .preview-badge,
body:not(.theme-dark).theme-high-contrast .card-back .preview-badge {
    background-color: #ffffff !important;
    border: 1.5px solid #000000 !important;
    color: #000000 !important;
}

/* Card Reference ID Text Sizing & Contrast */
.card-front span.font-mono,
.card-back span.font-mono,
.card-front .drag-handle span.font-mono,
.card-back .drag-handle span.font-mono {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
}
body.theme-high-contrast .card-front span.font-mono,
body.theme-high-contrast .card-back span.font-mono {
    color: #ffffff !important;
}
body:not(.theme-dark).theme-high-contrast .card-front span.font-mono,
body:not(.theme-dark).theme-high-contrast .card-back span.font-mono {
    color: #000000 !important;
}

/* Flip Card Button Icon (make larger & borderless) */
.card-front .btn-flip-card,
.card-back .btn-flip-card {
    font-size: 1.15rem !important;
    width: 1.75rem !important;
    height: 1.75rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
body.theme-high-contrast .card-front .btn-flip-card,
body.theme-high-contrast .card-back .btn-flip-card {
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
}
body:not(.theme-dark).theme-high-contrast .card-front .btn-flip-card,
body:not(.theme-dark).theme-high-contrast .card-back .btn-flip-card {
    color: #000000 !important;
    background: transparent !important;
    border: none !important;
}

/* 3. Card Inner Window Text Sizing & Scaling (rem-based) */

/* Card Titles */
.card-front h4,
.card-back h4 {
    font-size: 1.05rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.5rem !important;
}

/* Scrollable Card Body Paragraphs */
.scrollable-card-body,
.scrollable-card-back-body {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
}

/* Escaped Tailwind class overrides inside card contents (front and back) to enable scaling */
.card-flip-inner .text-\[11px\],
.card-flip-inner div.text-\[11px\],
.card-flip-inner p.text-\[11px\] {
    font-size: 0.9rem !important;
}
.card-flip-inner .text-\[10px\],
.card-flip-inner div.text-\[10px\],
.card-flip-inner p.text-\[10px\] {
    font-size: 0.85rem !important;
}
.card-flip-inner .text-\[9px\],
.card-flip-inner div.text-\[9px\],
.card-flip-inner p.text-\[9px\],
.card-flip-inner span.text-\[9px\],
.card-flip-inner button.text-\[9px\] {
    font-size: 0.85rem !important; /* Scaled to 0.85rem for optimal legibility of justification/takeaway texts */
}
.card-flip-inner .text-\[8px\],
.card-flip-inner div.text-\[8px\],
.card-flip-inner p.text-\[8px\],
.card-flip-inner span.text-\[8px\],
.card-flip-inner button.text-\[8px\] {
    font-size: 0.8rem !important;
}
.card-flip-inner .text-\[7px\],
.card-flip-inner div.text-\[7px\] {
    font-size: 0.75rem !important;
}
.card-flip-inner .text-\[6px\],
.card-flip-inner div.text-\[6px\] {
    font-size: 0.7rem !important;
}

/* Specific templates inside card bodies */
.card-flip-inner .bg-black\/20,
.card-flip-inner .bg-black\/30,
.card-flip-inner .bg-black\/40 {
    padding: 0.35rem 0.5rem !important;
}

/* Bottom metadata role/mode details row */
.card-front .flex.justify-between.items-center.text-\[9px\] {
    font-size: 0.8rem !important;
    margin-top: auto !important;
}

/* Card corner index markings */
.card-corner-index {
    font-size: 0.9rem !important;
}
.card-corner-index .suit-icon {
    font-size: 0.75rem !important;
}

/* 4. Bottom Panel Controls: Likes, Action Buttons, Pin Tap Targets (3x size boost) */

/* Footer Flex Wrap Wrapper */
.card-footer-content > div {
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    align-items: center !important;
}

/* Upvote / Likes Button Sizing */
.btn-staging-like,
.btn-upvote {
    font-size: 1.25rem !important; /* ~3x increase of base 9px/10px */
    padding: 0.5rem 1rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}
.btn-staging-like i,
.btn-upvote i {
    font-size: 1.5rem !important;
}

/* Bottom actions size on card front (Canvas / Zoomed Cards) */
.btn-enlarged {
    font-size: 1.5rem !important; /* ~24px, text-2xl */
    padding: 0 !important;
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    background: transparent !important;
    border: none !important;
}
.btn-enlarged i {
    font-size: 1.875rem !important; /* ~30px, text-3xl */
}


/* Publish / Unpublish / Request AI Buttons Sizing (compact & clean) */
.card-footer-content button.btn-staging-request,
.card-footer-content button[onclick*="publishSubmissionDirectly"],
.card-footer-content button[onclick*="unpublishSubmission"] {
    font-size: 0.85rem !important; /* Matches target scale for compact buttons */
    padding: 0.35rem 0.65rem !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
}
.card-footer-content button.btn-staging-request i,
.card-footer-content button[onclick*="publishSubmissionDirectly"] i,
.card-footer-content button[onclick*="unpublishSubmission"] i {
    font-size: 0.95rem !important;
}


/* Pin to Top Button Target Sizing */
.btn-staging-pin {
    font-size: 1.5rem !important; /* ~3x target of base 10px */
    padding: 0.4rem 0.8rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 2.25rem !important;
    min-height: 2.25rem !important;
}
.btn-staging-pin i {
    font-size: 1.6rem !important;
}



/* Zoom Card Modal Overrides supporting User CP Scale */
#showcase-zoom-card-wrapper .scrollable-card-body {
    font-size: 1.15rem !important;
}
#showcase-zoom-card-wrapper .scrollable-card-back-body {
    font-size: 1.15rem !important;
}
#showcase-zoom-card-wrapper .preview-badge {
    font-size: 0.95rem !important;
}
#showcase-zoom-card-wrapper .btn-flip-card {
    font-size: 1.35rem !important;
}
#showcase-zoom-card-wrapper .drag-handle span {
    font-size: 1rem !important;
}

/* ==========================================================================
   Campaign Event Public Page Styles (Big Pitch)
   ========================================================================== */

#public-event-view {
    font-family: 'Raleway', sans-serif;
}

.event-slide-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transform: translateX(30px);
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.event-slide-card.active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.event-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
}

.event-dot.active {
    background: #06b6d4;
    box-shadow: 0 0 8px #06b6d4;
    width: 14px;
    border-radius: 4px;
}

.event-mode-btn {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.3);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.event-mode-btn:hover {
    border-color: rgba(6, 182, 212, 0.3);
    background: rgba(6, 182, 212, 0.05);
    color: #f8fafc;
}

.event-mode-btn.active {
    border-color: #06b6d4;
    background: rgba(6, 182, 212, 0.1);
    color: #ffffff;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.15);
}

.event-mode-btn.active i {
    color: #06b6d4;
    filter: drop-shadow(0 0 5px rgba(6, 182, 212, 0.5));
}

#event-upload-dropzone.dragover {
    border-color: #06b6d4;
    background: rgba(6, 182, 212, 0.1);
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.15);
}

#event-upload-dropzone.dragover i {
    color: #06b6d4;
}

/* ==========================================================================
   🎤 VOICE-TO-TEXT DICTATION STYLING
   ========================================================================== */

@keyframes pulse-rose {
    0% {
        box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.4);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(244, 63, 94, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(244, 63, 94, 0);
    }
}

.mic-recording-pulse {
    animation: pulse-rose 1.5s infinite;
    background-color: rgba(244, 63, 94, 0.15) !important;
    border-color: rgba(244, 63, 94, 0.4) !important;
    color: #f43f5e !important;
}

.mic-transcribing-spin {
    color: #06b6d4 !important;
}

/* ==========================================================================
   📊 CURATION INSIGHTS REPORT STYLING & ACCESSIBILITY CONTRAST
   ========================================================================== */

/* Theme-specific overrides for Tailwind prose elements inside insights-content-area */
#insights-content-area .prose {
    max-width: none !important;
}

/* Light Mode Curation Report Typography Variables (High Contrast) */
body:not(.theme-dark) #insights-content-area .prose {
    --tw-prose-body: #334155 !important;
    --tw-prose-headings: #071D49 !important;
    --tw-prose-lead: #475569 !important;
    --tw-prose-links: #0077C8 !important;
    --tw-prose-bold: #071D49 !important;
    --tw-prose-counters: #64748b !important;
    --tw-prose-bullets: #64748b !important;
    --tw-prose-hr: rgba(7, 29, 73, 0.1) !important;
    --tw-prose-quotes: #0f172a !important;
    --tw-prose-quote-borders: rgba(7, 29, 73, 0.2) !important;
    --tw-prose-captions: #64748b !important;
    --tw-prose-code: #071D49 !important;
    --tw-prose-pre-code: #334155 !important;
    --tw-prose-pre-bg: rgba(7, 29, 73, 0.05) !important;
    --tw-prose-th-borders: rgba(7, 29, 73, 0.1) !important;
    --tw-prose-td-borders: rgba(7, 29, 73, 0.1) !important;
}
body:not(.theme-dark) #insights-content-area .prose,
body:not(.theme-dark) #insights-content-area .prose p,
body:not(.theme-dark) #insights-content-area .prose li,
body:not(.theme-dark) #insights-content-area .prose strong,
body:not(.theme-dark) #insights-content-area .prose h1,
body:not(.theme-dark) #insights-content-area .prose h2,
body:not(.theme-dark) #insights-content-area .prose h3,
body:not(.theme-dark) #insights-content-area .prose h4 {
    color: var(--tw-prose-body) !important;
}
body:not(.theme-dark) #insights-content-area .prose strong,
body:not(.theme-dark) #insights-content-area .prose h1,
body:not(.theme-dark) #insights-content-area .prose h2,
body:not(.theme-dark) #insights-content-area .prose h3,
body:not(.theme-dark) #insights-content-area .prose h4 {
    color: var(--tw-prose-headings) !important;
}

/* Dark Mode Curation Report Typography Variables (High Contrast) */
.theme-dark #insights-content-area .prose {
    --tw-prose-body: #cbd5e1 !important;
    --tw-prose-headings: #ffffff !important;
    --tw-prose-lead: #e2e8f0 !important;
    --tw-prose-links: #38bdf8 !important;
    --tw-prose-bold: #ffffff !important;
    --tw-prose-counters: #94a3b8 !important;
    --tw-prose-bullets: #94a3b8 !important;
    --tw-prose-hr: rgba(255, 255, 255, 0.1) !important;
    --tw-prose-quotes: #f1f5f9 !important;
    --tw-prose-quote-borders: rgba(255, 255, 255, 0.2) !important;
    --tw-prose-captions: #94a3b8 !important;
    --tw-prose-code: #ffffff !important;
    --tw-prose-pre-code: #e2e8f0 !important;
    --tw-prose-pre-bg: rgba(0, 0, 0, 0.3) !important;
    --tw-prose-th-borders: rgba(255, 255, 255, 0.1) !important;
    --tw-prose-td-borders: rgba(255, 255, 255, 0.1) !important;
}
.theme-dark #insights-content-area .prose,
.theme-dark #insights-content-area .prose p,
.theme-dark #insights-content-area .prose li,
.theme-dark #insights-content-area .prose strong,
.theme-dark #insights-content-area .prose h1,
.theme-dark #insights-content-area .prose h2,
.theme-dark #insights-content-area .prose h3,
.theme-dark #insights-content-area .prose h4 {
    color: var(--tw-prose-body) !important;
}
.theme-dark #insights-content-area .prose strong,
.theme-dark #insights-content-area .prose h1,
.theme-dark #insights-content-area .prose h2,
.theme-dark #insights-content-area .prose h3,
.theme-dark #insights-content-area .prose h4 {
    color: var(--tw-prose-headings) !important;
}

/* Pipeline visual layout overrides */
.pipeline-card {
    flex: 1 1 0%;
    width: 100%;
    border-radius: 12px;
    padding: 0.875rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    transition: all 0.2s ease-in-out;
}
.pipeline-card .icon {
    font-size: 1rem;
}
.pipeline-card .title {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: 'Raleway', sans-serif;
}
.pipeline-card .desc {
    font-size: 8px;
    line-height: 1.25;
    font-family: 'Raleway', sans-serif;
}

/* Light Mode Pipeline Colors (Accessible) */
body:not(.theme-dark) .pipeline-card {
    background-color: #f1f5f9; /* light grey bg */
    border: 1px solid rgba(7, 29, 73, 0.1);
}
body:not(.theme-dark) .pipeline-card .desc {
    color: #475569; /* text-slate-600 */
}
body:not(.theme-dark) .pipeline-card.card-iot {
    color: #334155; /* dark slate */
}
body:not(.theme-dark) .pipeline-card.card-iot .icon {
    color: #475569;
}
body:not(.theme-dark) .pipeline-card.card-hash {
    color: #0077C8; /* ARU cyan */
}
body:not(.theme-dark) .pipeline-card.card-hash .icon {
    color: #0077C8;
}
body:not(.theme-dark) .pipeline-card.card-ledger {
    color: #5C068C; /* ARU purple */
}
body:not(.theme-dark) .pipeline-card.card-ledger .icon {
    color: #5C068C;
}
body:not(.theme-dark) .pipeline-card.card-engine {
    color: #008578; /* ARU teal */
}
body:not(.theme-dark) .pipeline-card.card-engine .icon {
    color: #008578;
}
body:not(.theme-dark) .pipeline-card.card-bms {
    background-color: rgba(207, 69, 32, 0.08); /* light orange tint */
    border-color: rgba(207, 69, 32, 0.25);
    color: #CF4520; /* ARU Orange/Work color - MUCH better contrast than yellow! */
}
body:not(.theme-dark) .pipeline-card.card-bms .icon {
    color: #CF4520;
}

/* Dark Mode Pipeline Colors */
body.theme-dark .pipeline-card {
    background-color: rgba(15, 23, 42, 0.6); /* dark slate bg */
    border: 1px solid rgba(255, 255, 255, 0.08);
}
body.theme-dark .pipeline-card .desc {
    color: #94a3b8; /* text-slate-400 */
}
body.theme-dark .pipeline-card.card-iot {
    color: #cbd5e1; /* text-slate-300 */
}
body.theme-dark .pipeline-card.card-iot .icon {
    color: #94a3b8;
}
body.theme-dark .pipeline-card.card-hash {
    color: #38bdf8; /* light cyan */
}
body.theme-dark .pipeline-card.card-hash .icon {
    color: #38bdf8;
}
body.theme-dark .pipeline-card.card-ledger {
    color: #c084fc; /* light purple */
}
body.theme-dark .pipeline-card.card-ledger .icon {
    color: #c084fc;
}
body.theme-dark .pipeline-card.card-engine {
    color: #34d399; /* light emerald */
}
body.theme-dark .pipeline-card.card-engine .icon {
    color: #34d399;
}
body.theme-dark .pipeline-card.card-bms {
    background-color: rgba(253, 224, 71, 0.1); /* light yellow tint */
    border-color: rgba(253, 224, 71, 0.3);
    color: #fde047; /* bright yellow - good contrast on dark background! */
}
body.theme-dark .pipeline-card.card-bms .icon {
    color: #fde047;
}

/* Arrow styling */
.pipeline-arrow {
    color: #94a3b8;
}
body:not(.theme-dark) .pipeline-arrow {
    color: #64748b;
}

/* ==========================================================================
   📖 HELP & PLAYBOOK STYLES
   ========================================================================== */

/* Active tab button styles */
.help-nav-btn.active {
    background-color: rgba(6, 182, 212, 0.15) !important;
    border-color: rgba(6, 182, 212, 0.4) !important;
    color: #22d3ee !important;
}

body:not(.theme-dark) .help-nav-btn.active {
    background-color: rgba(0, 119, 200, 0.1) !important;
    border-color: rgba(0, 119, 200, 0.4) !important;
    color: #0077C8 !important;
}

/* Inactive/hover tab button overrides for Light Mode */
body:not(.theme-dark) .help-nav-btn:not(.active) {
    border-color: rgba(7, 29, 73, 0.12) !important;
    color: #475569 !important;
}

body:not(.theme-dark) .help-nav-btn:not(.active):hover {
    background-color: rgba(7, 29, 73, 0.04) !important;
    color: #071D49 !important;
}

body:not(.theme-dark) .help-nav-btn:not(.active) i {
    color: #64748b !important;
}

body:not(.theme-dark) .help-nav-btn:not(.active):hover i {
    color: #071D49 !important;
}

/* Tab content layout adjustments for Light Mode readability */
body:not(.theme-dark) .help-tab-content .glass-card {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(7, 29, 73, 0.1) !important;
    color: #475569 !important;
}

body:not(.theme-dark) .help-tab-content h3 {
    color: #071D49 !important;
}

body:not(.theme-dark) .help-tab-content h4 {
    color: #071D49 !important;
}

body:not(.theme-dark) .help-tab-content p {
    color: #475569 !important;
}

body:not(.theme-dark) .help-tab-content strong {
    color: #071D49 !important;
}

body:not(.theme-dark) .help-tab-content li strong {
    color: #071D49 !important;
}

body:not(.theme-dark) .help-tab-content li {
    color: #475569 !important;
}

body:not(.theme-dark) .help-tab-content .bg-black\/30,
body:not(.theme-dark) .help-tab-content .bg-black\/40 {
    background-color: rgba(7, 29, 73, 0.03) !important;
    border-color: rgba(7, 29, 73, 0.08) !important;
}

body:not(.theme-dark) .help-tab-content .bg-black\/40 svg {
    color: #071D49 !important;
}

body:not(.theme-dark) .help-tab-content .text-slate-300 {
    color: #071D49 !important;
}

body:not(.theme-dark) .help-tab-content .text-slate-400 {
    color: #475569 !important;
}

body:not(.theme-dark) .help-tab-content .text-slate-200 {
    color: #1e293b !important;
}

/* Selection Counter Badge - Dark Mode / Default Premium Styling */
#gallery-matching-count-badge {
    background-color: rgba(6, 182, 212, 0.1) !important;
    border: 1px solid rgba(6, 182, 212, 0.25) !important;
    color: #22d3ee !important; /* cyan-400 */
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.15) !important;
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important;
}

#gallery-matching-count-badge.badge-pop {
    transform: scale(1.1) !important;
}

/* Light Mode Overrides */
body:not(.theme-dark) #gallery-matching-count-badge {
    background-color: rgba(3, 105, 161, 0.08) !important;
    border: 1px solid rgba(3, 105, 161, 0.25) !important;
    color: #0369a1 !important; /* cyan-700 / dark cyan */
    box-shadow: 0 1px 3px rgba(3, 105, 161, 0.05) !important;
}


/* --- Showcase Gallery Coin Token & Card Back CSS --- */

.card-back-coin-wrapper {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 20;
}

.card-back-coin {
    width: 95px;
    height: 95px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translateZ(1px);
    transform-style: preserve-3d;
    cursor: pointer;
    z-index: 25;
    pointer-events: auto;
    opacity: 1;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
    transition: transform 0.15s linear, filter 0.15s ease;
    will-change: transform, filter;
}

/* Fast transition for manual interactive mouse tilts, but allow smooth Flipping */
.card-back-coin.flipping {
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.6s ease;
}

/* On hover of the card back, rise and scale */
.card-back:hover .card-back-coin {
    filter: drop-shadow(0 15px 20px rgba(0, 0, 0, 0.7));
}

.coin-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.coin-face-front {
    z-index: 2;
    transform: rotateX(0deg);
}

.coin-face-back {
    z-index: 1;
    transform: rotateX(180deg);
}

/* Reveal details at the bottom of the card on hover */
.card-back-hover-details {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.card-back:hover .card-back-hover-details {
    opacity: 1;
}

/* Clean up card layouts */
.card-front .drag-handle {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.card-front .card-body-container {
    padding-bottom: 0.5rem !important;
}

/* --- Canvas always dark mode theme overrides --- */
#gallery-canvas-viewport.dark-canvas-bg {
    background-color: #071D49 !important;
}
body:not(.theme-dark) #gallery-canvas-viewport.dark-canvas-bg {
    background-color: #071D49 !important;
}

#gallery-canvas-viewport.dark-canvas-bg #canvas-grid-lines,
body:not(.theme-dark) #gallery-canvas-viewport.dark-canvas-bg #canvas-grid-lines {
    background-image: 
        radial-gradient(circle, #fff 1.5px, transparent 1.5px), 
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), 
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px) !important;
    opacity: 0.08 !important;
}

body:not(.theme-dark) #gallery-canvas-viewport.dark-canvas-bg #canvas-zones-backdrop > div {
    background-color: rgba(255, 255, 255, 0.01) !important;
}
body:not(.theme-dark) #gallery-canvas-viewport.dark-canvas-bg #canvas-zones-backdrop .border-cyan-500\/20 { border-color: rgba(6, 182, 212, 0.2) !important; }
body:not(.theme-dark) #gallery-canvas-viewport.dark-canvas-bg #canvas-zones-backdrop .border-purple-500\/20 { border-color: rgba(168, 85, 247, 0.2) !important; }
body:not(.theme-dark) #gallery-canvas-viewport.dark-canvas-bg #canvas-zones-backdrop .border-emerald-500\/20 { border-color: rgba(16, 185, 129, 0.2) !important; }
body:not(.theme-dark) #gallery-canvas-viewport.dark-canvas-bg #canvas-zones-backdrop .border-amber-500\/20 { border-color: rgba(245, 158, 11, 0.2) !important; }

body:not(.theme-dark) #gallery-canvas-viewport.dark-canvas-bg #canvas-zones-backdrop .text-cyan-500\/15 { color: rgba(6, 182, 212, 0.15) !important; }
body:not(.theme-dark) #gallery-canvas-viewport.dark-canvas-bg #canvas-zones-backdrop .text-purple-500\/15 { color: rgba(168, 85, 247, 0.15) !important; }
body:not(.theme-dark) #gallery-canvas-viewport.dark-canvas-bg #canvas-zones-backdrop .text-emerald-500\/15 { color: rgba(16, 185, 129, 0.15) !important; }
body:not(.theme-dark) #gallery-canvas-viewport.dark-canvas-bg #canvas-zones-backdrop .text-amber-500\/15 { color: rgba(245, 158, 11, 0.15) !important; }

/* Force light text color contrast on dark canvas even in light mode body */
body:not(.theme-dark) #gallery-canvas-viewport.dark-canvas-bg .text-blue-400 { color: #60a5fa !important; }
body:not(.theme-dark) #gallery-canvas-viewport.dark-canvas-bg .text-emerald-400 { color: #34d399 !important; }
body:not(.theme-dark) #gallery-canvas-viewport.dark-canvas-bg .text-purple-400 { color: #c084fc !important; }
body:not(.theme-dark) #gallery-canvas-viewport.dark-canvas-bg .text-cyan-400 { color: #22d3ee !important; }
body:not(.theme-dark) #gallery-canvas-viewport.dark-canvas-bg .text-yellow-400 { color: #facc15 !important; }
body:not(.theme-dark) #gallery-canvas-viewport.dark-canvas-bg .text-rose-400 { color: #fb7185 !important; }
body:not(.theme-dark) #gallery-canvas-viewport.dark-canvas-bg .text-orange-400 { color: #fb923c !important; }
body:not(.theme-dark) #gallery-canvas-viewport.dark-canvas-bg .text-teal-400 { color: #2dd4bf !important; }
body:not(.theme-dark) #gallery-canvas-viewport.dark-canvas-bg .text-amber-400 { color: #fbbf24 !important; }
body:not(.theme-dark) #gallery-canvas-viewport.dark-canvas-bg .text-\[\#c59b27\] { color: #c59b27 !important; }
body:not(.theme-dark) #gallery-canvas-viewport.dark-canvas-bg .text-slate-300 { color: #cbd5e1 !important; }
body:not(.theme-dark) #gallery-canvas-viewport.dark-canvas-bg .text-slate-400 { color: #94a3b8 !important; }
body:not(.theme-dark) #gallery-canvas-viewport.dark-canvas-bg .text-slate-500 { color: #64748b !important; }
body:not(.theme-dark) #gallery-canvas-viewport.dark-canvas-bg .text-white { color: #ffffff !important; }
body:not(.theme-dark) #gallery-canvas-viewport.dark-canvas-bg .border-white\/10 { border-color: rgba(255, 255, 255, 0.1) !important; }
body:not(.theme-dark) #gallery-canvas-viewport.dark-canvas-bg .border-white\/5 { border-color: rgba(255, 255, 255, 0.05) !important; }
body:not(.theme-dark) #gallery-canvas-viewport.dark-canvas-bg .bg-slate-800 { background-color: #1e293b !important; }
body:not(.theme-dark) #gallery-canvas-viewport.dark-canvas-bg .bg-slate-900\/60 { background-color: rgba(15, 23, 42, 0.6) !important; }
body:not(.theme-dark) #gallery-canvas-viewport.dark-canvas-bg .bg-black\/20 { background-color: rgba(0, 0, 0, 0.2) !important; }

/* Custom premium yellow grab/grabbing cursors with dark outlines for contrast */
.cursor-grab-yellow {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='%23c59b27' stroke='%23071d49' stroke-width='1.5'><path d='M8 5a1.5 1.5 0 0 1 3 0v5h1V3.5a1.5 1.5 0 0 1 3 0v6.5h1V4.5a1.5 1.5 0 0 1 3 0v5.5h1V7.5a1.5 1.5 0 0 1 3 0v6.5c0 4.14-3.36 7.5-7.5 7.5h-2c-4.14 0-7.5-3.36-7.5-7.5V10a1.5 1.5 0 0 1 3 0v5h1V5z'/></svg>") 12 12, grab !important;
}
.cursor-grabbing-yellow {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='%23c59b27' stroke='%23071d49' stroke-width='1.5'><path d='M8 10a1.5 1.5 0 0 1 3 0v2h1V9.5a1.5 1.5 0 0 1 3 0v2.5h1V9.5a1.5 1.5 0 0 1 3 0v2.5h1V10.5a1.5 1.5 0 0 1 3 0v2c0 4.14-3.36 7.5-7.5 7.5h-2c-4.14 0-7.5-3.36-7.5-7.5V11a1.5 1.5 0 0 1 3 0v1h1V10z'/></svg>") 12 12, grabbing !important;
}

/* Ensure global confirm dialog sits on top of canvas fullscreen mode (z-index 9999) */
#custom-confirm-modal {
    z-index: 10005 !important;
}

/* ================= ACCESSIBILITY & CONTRAST REMEDIATIONS ================= */

/* 1. Solid background popovers for accessibility settings (public and workspace) */
#accessibility-popover-public,
#user-menu-popover {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
}
.theme-dark #accessibility-popover-public,
.theme-dark #user-menu-popover {
    background-color: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Popover Buttons and Inputs in Light Mode */
body:not(.theme-dark) #accessibility-popover-public button:not(.text-white),
body:not(.theme-dark) #user-menu-popover button:not(.text-white) {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
}
body:not(.theme-dark) #accessibility-popover-public button.text-white,
body:not(.theme-dark) #user-menu-popover button.text-white {
    background-color: #0077c8 !important;
    border-color: #005a9c !important;
    color: #ffffff !important;
}
body:not(.theme-dark) #accessibility-popover-public input[type="checkbox"],
body:not(.theme-dark) #user-menu-popover input[type="checkbox"] {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0077c8 !important;
}

/* 2. Force light text color contrast inside expert cards even in light mode body */
body:not(.theme-dark) .expert-card .text-white,
body:not(.theme-dark) .expert-card h3 {
    color: #ffffff !important;
}
body:not(.theme-dark) .expert-card .text-slate-300,
body:not(.theme-dark) .expert-card p {
    color: #cbd5e1 !important;
}
body:not(.theme-dark) .expert-card .text-slate-400,
body:not(.theme-dark) .expert-card .name-rotated {
    color: #94a3b8 !important;
}
body:not(.theme-dark) .expert-card .text-cyan-300 {
    color: #67e8f9 !important;
}

/* 3. Fix hero title yellow/cyan gradient contrast on light mode landing page */
body:not(.theme-dark) #hero-section h1 span {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    color: #0369a1 !important;
}

/* 4. Fix yellow and cyan text contrast in light mode globally on landing page */
body:not(.theme-dark) .text-\[\#FFD100\],
body:not(.theme-dark) .text-\[\#ffd100\] {
    color: #b45309 !important; /* WCAG compliant dark amber */
}
body:not(.theme-dark) .text-cyan-300 {
    color: #0369a1 !important; /* WCAG compliant dark cyan */
}

/* 5. Fix Save the Date and Open Invitation container/text contrast in light mode */
body:not(.theme-dark) #agenda-section .bg-slate-950\/40 {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}
body:not(.theme-dark) #agenda-section .bg-\[\#FFD100\]\/5 {
    background-color: #fefdf3 !important;
    border-color: #fcd34d !important;
}
body:not(.theme-dark) #agenda-section p.text-slate-300 {
    color: #334155 !important;
}

/* 6. Fix dynamically rendered Agenda rows and tracks contrast in light mode */
body:not(.theme-dark) .agenda-row .bg-slate-900\/30 {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}
body:not(.theme-dark) .agenda-row .bg-slate-900\/30 p {
    color: #1e293b !important;
}
body:not(.theme-dark) .agenda-row .text-cyan-300 {
    background-color: #e0f2fe !important; /* Soft sky blue/cyan background */
    border-color: #bae6fd !important;
    color: #0369a1 !important; /* High contrast cyan/blue text */
    padding: 0.25rem 0.5rem !important;
}

/* 7. Ensure yellow badges/labels inside dark expert cards remain bright yellow in light mode */
body:not(.theme-dark) .expert-card .text-\[\#FFD100\],
body:not(.theme-dark) .expert-card .text-\[\#ffd100\] {
    color: #FFD100 !important;
}

/* 8. Fix Get in Touch section container and text contrast in light mode */
body:not(.theme-dark) #cta-section .bg-gradient-to-tr {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}
body:not(.theme-dark) #cta-section p.text-slate-300 {
    color: #475569 !important;
}
body:not(.theme-dark) #cta-section a[href^="mailto:"] {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
}
body:not(.theme-dark) #cta-section a[href^="mailto:"] i {
    color: #0369a1 !important;
}


/* 1. Solid background popovers for accessibility settings (public and workspace) */
#accessibility-popover-public,
#user-menu-popover {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
}
.theme-dark #accessibility-popover-public,
.theme-dark #user-menu-popover {
    background-color: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Popover Buttons and Inputs in Light Mode */
body:not(.theme-dark) #accessibility-popover-public button:not(.text-white),
body:not(.theme-dark) #user-menu-popover button:not(.text-white) {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
}
body:not(.theme-dark) #accessibility-popover-public button.text-white,
body:not(.theme-dark) #user-menu-popover button.text-white {
    background-color: #0077c8 !important;
    border-color: #005a9c !important;
    color: #ffffff !important;
}
body:not(.theme-dark) #accessibility-popover-public input[type="checkbox"],
body:not(.theme-dark) #user-menu-popover input[type="checkbox"] {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0077c8 !important;
}

/* 2. Force light text color contrast inside expert cards even in light mode body */
body:not(.theme-dark) .expert-card .text-white,
body:not(.theme-dark) .expert-card h3 {
    color: #ffffff !important;
}
body:not(.theme-dark) .expert-card .text-slate-300,
body:not(.theme-dark) .expert-card p {
    color: #cbd5e1 !important;
}
body:not(.theme-dark) .expert-card .text-slate-400,
body:not(.theme-dark) .expert-card .name-rotated {
    color: #94a3b8 !important;
}
body:not(.theme-dark) .expert-card .text-cyan-300 {
    color: #67e8f9 !important;
}

/* 3. Fix hero title yellow/cyan gradient contrast on light mode landing page */
body:not(.theme-dark) #hero-section h1 span {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    color: #0369a1 !important;
}

/* 4. Fix yellow and cyan text contrast in light mode globally on landing page */
body:not(.theme-dark) .text-\[\#FFD100\],
body:not(.theme-dark) .text-\[\#ffd100\] {
    color: #b45309 !important; /* WCAG compliant dark amber */
}
body:not(.theme-dark) .text-cyan-300 {
    color: #0369a1 !important; /* WCAG compliant dark cyan */
}

/* 5. Fix Save the Date and Open Invitation container/text contrast in light mode */
body:not(.theme-dark) #agenda-section .bg-slate-950\/40 {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}
body:not(.theme-dark) #agenda-section .bg-\[\#FFD100\]\/5 {
    background-color: #fefdf3 !important;
    border-color: #fcd34d !important;
}
body:not(.theme-dark) #agenda-section p.text-slate-300 {
    color: #334155 !important;
}

/* 6. Fix dynamically rendered Agenda rows and tracks contrast in light mode */
body:not(.theme-dark) .agenda-row .bg-slate-900\/30 {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}
body:not(.theme-dark) .agenda-row .bg-slate-900\/30 p {
    color: #1e293b !important;
}
body:not(.theme-dark) .agenda-row .text-cyan-300 {
    background-color: #e0f2fe !important; /* Soft sky blue/cyan background */
    border-color: #bae6fd !important;
    color: #0369a1 !important; /* High contrast cyan/blue text */
    padding: 0.25rem 0.5rem !important;
}

/* 7. Ensure yellow badges/labels inside dark expert cards remain bright yellow in light mode */
body:not(.theme-dark) .expert-card .text-\[\#FFD100\],
body:not(.theme-dark) .expert-card .text-\[\#ffd100\] {
    color: #FFD100 !important;
}

/* 8. Fix Get in Touch section container and text contrast in light mode */
body:not(.theme-dark) #cta-section .bg-gradient-to-tr {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}
body:not(.theme-dark) #cta-section p.text-slate-300 {
    color: #475569 !important;
}
body:not(.theme-dark) #cta-section a[href^="mailto:"] {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
}
body:not(.theme-dark) #cta-section a[href^="mailto:"] i {
    color: #0369a1 !important;
}

/* 9. Ensure all header contents remain light and high-contrast in light mode */
body:not(.theme-dark) header a:not(.bg-gradient-to-r),
body:not(.theme-dark) header button,
body:not(.theme-dark) header span,
body:not(.theme-dark) header p {
    color: #ffffff !important;
}
body:not(.theme-dark) header .text-slate-300,
body:not(.theme-dark) header .text-slate-400 {
    color: #cbd5e1 !important;
}
body:not(.theme-dark) header .text-cyan-300,
body:not(.theme-dark) header .text-cyan-400 {
    color: #67e8f9 !important;
}
body:not(.theme-dark) header .border-white\/10 {
    border-color: rgba(255, 255, 255, 0.1) !important;
}
body:not(.theme-dark) header .border-white\/5 {
    border-color: rgba(255, 255, 255, 0.05) !important;
}
body:not(.theme-dark) header .bg-white\/5 {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* 10. Restore correct contrast for accessibility popovers inside the header in light mode */
body:not(.theme-dark) header #accessibility-popover-public,
body:not(.theme-dark) header #user-menu-popover {
    color: #334155 !important;
}
body:not(.theme-dark) header #accessibility-popover-public span,
body:not(.theme-dark) header #accessibility-popover-public label,
body:not(.theme-dark) header #accessibility-popover-public p,
body:not(.theme-dark) header #accessibility-popover-public i,
body:not(.theme-dark) header #user-menu-popover span,
body:not(.theme-dark) header #user-menu-popover label,
body:not(.theme-dark) header #user-menu-popover p,
body:not(.theme-dark) header #user-menu-popover i {
    color: #334155 !important;
}
body:not(.theme-dark) header #accessibility-popover-public .text-cyan-400,
body:not(.theme-dark) header #accessibility-popover-public .text-cyan-300,
body:not(.theme-dark) header #user-menu-popover .text-cyan-400,
body:not(.theme-dark) header #user-menu-popover .text-cyan-300 {
    color: #0369a1 !important;
}
body:not(.theme-dark) header #accessibility-popover-public .text-slate-300,
body:not(.theme-dark) header #accessibility-popover-public .text-slate-400,
body:not(.theme-dark) header #user-menu-popover .text-slate-300,
body:not(.theme-dark) header #user-menu-popover .text-slate-400 {
    color: #475569 !important;
}
body:not(.theme-dark) header #accessibility-popover-public button.text-white,
body:not(.theme-dark) header #user-menu-popover button.text-white {
    color: #ffffff !important;
}

/* ================= KEYBOARD & ACCESSIBILITY OUTLINE REMEDIATIONS ================= */

/* Global focus indicator for keyboard navigation */
.focus-ring:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid #0077c8 !important;
    outline-offset: 2px !important;
}

/* Specific focus visible ring for canvas cards */
.showcase-canvas-card:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 4px #0077c8, 0 0 0 6px rgba(255, 255, 255, 0.8) !important;
    border-radius: 12px !important;
    z-index: 100 !important;
}

/* Event next button contrast remediation (exceeds WCAG 4.5:1 AA with white text) */
#btn-next,
body:not(.theme-dark) #btn-next {
    background-color: #0c5a8a !important;
    box-shadow: 0 4px 6px -1px rgba(12, 90, 138, 0.25) !important;
}
#btn-next:hover,
body:not(.theme-dark) #btn-next:hover {
    background-color: #004b75 !important;
}

/* Footer links hover contrast fixes in light mode */
body:not(.theme-dark) footer a:hover,
body:not(.theme-dark) .mt-8.flex-wrap a:hover {
    color: #0f172a !important; /* Dark slate text on hover in light mode */
}

/* Footer links hover contrast fixes in dark mode */
body.theme-dark footer a:hover,
body.theme-dark .mt-8.flex-wrap a:hover {
    color: #ffffff !important; /* White text on hover in dark mode */
}