/* ================================
       THEME SYSTEM - Dark & Light Mode
    ================================ */
    :root {
      /* Dark Mode (Default) - Warm palette */
      --bg-deep: #1a1512;
      --bg-card: #231e1a;
      --bg-elevated: #2d2620;
      --border-subtle: #3d342c;
      --border-hover: #5c4f44;
      
      /* Accent colors */
      --accent-primary: #f59e0b;
      --accent-primary-hover: #fbbf24;
      --accent-secondary: #8b5cf6;
      --accent-success: #10b981;
      --accent-danger: #ef4444;
      --accent-info: #3b82f6;
      
      /* Client status colors */
      --status-active: #10b981;
      --status-new: #8b5cf6;
      --status-attention: #f59e0b;
      --status-critical: #ef4444;
      --status-archived: #6b7280;
      
      /* Text colors - Improved contrast */
      --text-primary: #faf8f5;
      --text-secondary: #d4c8bc;
      --text-muted: #9a8d82;
      
      /* Shadows */
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
      --shadow-md: 0 4px 6px rgba(0,0,0,0.3);
      --shadow-lg: 0 10px 15px rgba(0,0,0,0.3);
    }
    
    /* Light Mode - Bright & Colorful */
    [data-theme="light"] {
      --bg-deep: #faf8f5;
      --bg-card: #ffffff;
      --bg-elevated: #f5f0eb;
      --border-subtle: #e5ddd4;
      --border-hover: #d4c8bc;
      
      /* Brighter accent colors for light mode */
      --accent-primary: #d97706;
      --accent-primary-hover: #b45309;
      --accent-secondary: #7c3aed;
      --accent-success: #059669;
      --accent-danger: #dc2626;
      --accent-info: #2563eb;
      
      /* Status colors - slightly darker for visibility */
      --status-active: #059669;
      --status-new: #7c3aed;
      --status-attention: #d97706;
      --status-critical: #dc2626;
      --status-archived: #6b7280;
      
      /* Text colors */
      --text-primary: #1f1a16;
      --text-secondary: #5c534a;
      --text-muted: #8c8279;
      
      /* Shadows - lighter */
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
      --shadow-md: 0 4px 8px rgba(0,0,0,0.1);
      --shadow-lg: 0 10px 20px rgba(0,0,0,0.12);
    }
    
    /* Light mode specific overrides */
    [data-theme="light"] .card {
      box-shadow: var(--shadow-sm);
    }
    
    [data-theme="light"] .btn-primary {
      color: white;
    }
    
    [data-theme="light"] .nav-item.active {
      color: white;
    }
    
    [data-theme="light"] .mobile-bottom-nav {
      background: white;
      border-color: #e5ddd4;
      box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
    }
    
    [data-theme="light"] .mobile-bottom-nav a {
      color: #8c8279;
    }
    
    [data-theme="light"] .mobile-bottom-nav a.active {
      color: #d97706;
    }
    
    [data-theme="light"] .mobile-bottom-nav .new-btn {
      color: white;
      box-shadow: 0 4px 15px rgba(217, 119, 6, 0.35);
    }
    
    [data-theme="light"] .ai-chat-bubble {
      background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    }
    
    [data-theme="light"] .ai-chat-bubble p {
      color: #4c1d95;
    }
    
    [data-theme="light"] .modal-backdrop {
      background: rgba(250, 248, 245, 0.9);
    }
    
    [data-theme="light"] .mobile-session-mode {
      background: var(--bg-deep);
    }
    
    [data-theme="light"] .input {
      background: white;
      border-color: var(--border-subtle);
    }
    
    [data-theme="light"] .input:focus {
      border-color: var(--accent-primary);
      box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
    }
    
    /* Sidebar light mode */
    [data-theme="light"] aside {
      background: linear-gradient(180deg, #f5f0eb 0%, #ebe4dc 100%);
      border-color: #e5ddd4;
    }
    
    [data-theme="light"] .nav-item:hover {
      background: rgba(217, 119, 6, 0.1);
    }
    
    /* Header light mode */
    [data-theme="light"] header {
      background: white;
      border-color: #e5ddd4;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    
    /* Colorful stat cards for dashboard */
    [data-theme="light"] .stat-card {
      box-shadow: var(--shadow-md);
    }
    
    [data-theme="light"] .card-clients {
      background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
      border-color: #fcd34d;
    }
    
    [data-theme="light"] .card-clients .stat-number { color: #92400e; }
    [data-theme="light"] .card-clients .stat-label { color: #a16207; }
    
    [data-theme="light"] .card-sessions {
      background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
      border-color: #6ee7b7;
    }
    
    [data-theme="light"] .card-sessions .stat-number { color: #065f46; }
    [data-theme="light"] .card-sessions .stat-label { color: #047857; }
    
    [data-theme="light"] .card-revenue {
      background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%);
      border-color: #a78bfa;
    }
    
    [data-theme="light"] .card-revenue .stat-number { color: #5b21b6; }
    [data-theme="light"] .card-revenue .stat-label { color: #6d28d9; }
    
    [data-theme="light"] .card-tasks {
      background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
      border-color: #f9a8d4;
    }
    
    [data-theme="light"] .card-tasks .stat-number { color: #9d174d; }
    [data-theme="light"] .card-tasks .stat-label { color: #be185d; }
    
    [data-theme="light"] .card-calendar {
      background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
      border-color: #7dd3fc;
    }
    
    [data-theme="light"] .card-calendar .stat-number { color: #0c4a6e; }
    [data-theme="light"] .card-calendar .stat-label { color: #0369a1; }
    
    /* Client cards in light mode */
    [data-theme="light"] .client-card {
      background: white;
      box-shadow: var(--shadow-sm);
    }
    
    [data-theme="light"] .client-card:hover {
      box-shadow: var(--shadow-md);
      border-color: var(--accent-primary);
    }
    
    /* Quick action cards light mode */
    [data-theme="light"] .quick-action-card {
      background: white;
      box-shadow: var(--shadow-sm);
    }
    
    [data-theme="light"] .quick-action-card:hover {
      box-shadow: var(--shadow-md);
    }
    
    /* Today session cards light mode */
    [data-theme="light"] .today-session-card {
      background: white;
      box-shadow: var(--shadow-sm);
    }
    
    /* Calendar light mode */
    [data-theme="light"] .calendar-day {
      background: white;
      border-color: #e5ddd4;
    }
    
    [data-theme="light"] .calendar-day:hover {
      background: #fef3c7;
      border-color: #fcd34d;
    }
    
    [data-theme="light"] .calendar-day.today {
      background: linear-gradient(135deg, #fef3c7, #fde68a);
      border-color: #f59e0b;
    }
    
    /* Pills in light mode */
    [data-theme="light"] .pill-green { background: #d1fae5; color: #065f46; }
    [data-theme="light"] .pill-blue { background: #dbeafe; color: #1e40af; }
    [data-theme="light"] .pill-amber { background: #fef3c7; color: #92400e; }
    [data-theme="light"] .pill-red { background: #fee2e2; color: #991b1b; }
    [data-theme="light"] .pill-purple { background: #ede9fe; color: #5b21b6; }
    [data-theme="light"] .pill-gray { background: #f3f4f6; color: #4b5563; }
    
    /* Modals light mode */
    [data-theme="light"] #fullProfileModal > div {
      background: white;
    }
    
    /* Dashboard gradient cards - light mode */
    [data-theme="light"] .from-blue-900\/30,
    [data-theme="light"] [class*="from-blue-900"] {
      background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
      border-color: #93c5fd !important;
    }
    
    [data-theme="light"] .from-green-900\/30,
    [data-theme="light"] [class*="from-green-900"] {
      background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
      border-color: #86efac !important;
    }
    
    [data-theme="light"] .from-yellow-900\/30,
    [data-theme="light"] [class*="from-yellow-900"] {
      background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%) !important;
      border-color: #fde047 !important;
    }
    
    [data-theme="light"] .from-purple-900\/30,
    [data-theme="light"] [class*="from-purple-900"] {
      background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%) !important;
      border-color: #d8b4fe !important;
    }
    
    [data-theme="light"] .from-cyan-900\/30,
    [data-theme="light"] [class*="from-cyan-900"] {
      background: linear-gradient(135deg, #cffafe 0%, #a5f3fc 100%) !important;
      border-color: #67e8f9 !important;
    }
    
    [data-theme="light"] .from-violet-900\/30,
    [data-theme="light"] [class*="from-violet-900"] {
      background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%) !important;
      border-color: #c4b5fd !important;
    }
    
    [data-theme="light"] .from-amber-900\/30,
    [data-theme="light"] [class*="from-amber-900"] {
      background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
      border-color: #fcd34d !important;
    }
    
    /* Dashboard icon backgrounds - light mode */
    [data-theme="light"] .bg-blue-500\/20 { background: #dbeafe !important; }
    [data-theme="light"] .bg-green-500\/20 { background: #dcfce7 !important; }
    [data-theme="light"] .bg-yellow-500\/20 { background: #fef9c3 !important; }
    [data-theme="light"] .bg-purple-500\/20 { background: #f3e8ff !important; }
    [data-theme="light"] .bg-cyan-500\/20 { background: #cffafe !important; }
    [data-theme="light"] .bg-violet-500\/20 { background: #ede9fe !important; }
    [data-theme="light"] .bg-amber-500\/20 { background: #fef3c7 !important; }
    
    /* Dashboard session cards - light mode */
    [data-theme="light"] .bg-zinc-800\/50 {
      background: #f5f0eb !important;
    }
    
    /* Resources section - light mode */
    [data-theme="light"] .bg-violet-900\/50,
    [data-theme="light"] .bg-violet-900 {
      background: #ede9fe !important;
    }
    
    [data-theme="light"] .bg-amber-900\/50,
    [data-theme="light"] .bg-amber-900 {
      background: #fef3c7 !important;
    }
    
    [data-theme="light"] .bg-violet-800 {
      background: #ddd6fe !important;
    }
    
    [data-theme="light"] .bg-amber-800 {
      background: #fde68a !important;
    }
    
    /* Resource card text - light mode */
    [data-theme="light"] .text-violet-300 { color: #7c3aed !important; }
    [data-theme="light"] .text-violet-400 { color: #8b5cf6 !important; }
    [data-theme="light"] .text-amber-300 { color: #d97706 !important; }
    [data-theme="light"] .text-amber-400 { color: #f59e0b !important; }
    
    /* Quick action buttons - light mode */
    [data-theme="light"] #view-dashboard .bg-zinc-800 {
      background: white !important;
      border: 1px solid #e5ddd4;
    }
    
    [data-theme="light"] #view-dashboard .bg-zinc-800:hover {
      background: #f5f0eb !important;
    }
    
    /* Pipeline progress bars - light mode */
    [data-theme="light"] .bg-zinc-800.rounded-full {
      background: #e5e7eb !important;
    }

    /* Resource cards - light mode */
    [data-theme="light"] .resource-card {
      background: white !important;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    
    [data-theme="light"] .resource-card:hover {
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    [data-theme="light"] .resource-title {
      color: #1f1a16 !important;
    }
    
    [data-theme="light"] .resource-desc {
      color: #5c534a !important;
    }
    
    [data-theme="light"] .resource-label-text {
      font-weight: 600;
    }
    
    /* Needs Attention card - light mode */
    [data-theme="light"] .attention-card {
      background: #fffbeb !important;
      border-color: #fcd34d !important;
    }

    [data-theme="light"] .bg-zinc-900 {
      background: white !important;
    }
    
    [data-theme="light"] .bg-zinc-800 {
      background: #f5f0eb !important;
    }
    
    [data-theme="light"] .border-zinc-800,
    [data-theme="light"] .border-zinc-700 {
      border-color: #e5ddd4 !important;
    }
    
    [data-theme="light"] .text-zinc-400 {
      color: #8c8279 !important;
    }
    
    [data-theme="light"] .text-zinc-500 {
      color: #6b6358 !important;
    }
    
    /* Only change text-white in specific contexts, not buttons */
    [data-theme="light"] .card .text-white:not(button):not(.btn):not([class*="bg-"]),
    [data-theme="light"] main .text-white:not(button):not(.btn):not([class*="bg-"]),
    [data-theme="light"] #sessionModeModal .text-white:not(button):not(.btn):not([class*="bg-"]) {
      color: #1f1a16 !important;
    }
    
    /* AI Coach panel light mode */
    [data-theme="light"] #aiCoachPanel {
      background: white;
      border-color: #e5ddd4;
    }
    
    /* Toast styling for light mode */
    [data-theme="light"] .toast {
      background: white;
      box-shadow: var(--shadow-lg);
    }
    
    /* ============================================ */
    /* COMPREHENSIVE LIGHT MODE OVERRIDES */
    /* ============================================ */
    
    /* Main content areas */
    [data-theme="light"] main {
      background: var(--bg-deep);
    }
    
    [data-theme="light"] .bg-black {
      background: white !important;
    }
    
    /* Specific text fixes - don't globally change text-white as it breaks buttons */
    [data-theme="light"] h1, 
    [data-theme="light"] h2, 
    [data-theme="light"] h3, 
    [data-theme="light"] h4 {
      color: #1f1a16;
    }
    
    [data-theme="light"] p:not(.btn *):not(button *) {
      color: #5c534a;
    }
    
    [data-theme="light"] label {
      color: #5c534a;
    }
    
    /* Session Mode Panel */
    [data-theme="light"] #sessionModeModal {
      background: #faf8f5 !important;
    }
    
    [data-theme="light"] #sessionModeModal .bg-zinc-900,
    [data-theme="light"] #sessionModeModal .bg-black {
      background: white !important;
    }
    
    [data-theme="light"] #sessionHeader {
      background: white !important;
      border-color: #e5ddd4 !important;
    }
    
    [data-theme="light"] #sessionClientName {
      color: #1f1a16 !important;
    }
    
    /* Video Session Area */
    [data-theme="light"] #videoStartUI,
    [data-theme="light"] #videoActiveUI {
      background: #f5f0eb !important;
    }
    
    [data-theme="light"] #videoActiveUI .bg-zinc-900 {
      background: #faf8f5 !important;
    }
    
    /* Clarity Coach Panel - Desktop */
    [data-theme="light"] #desktopClarityPanel {
      background: white !important;
      border-color: #e5ddd4 !important;
    }
    
    [data-theme="light"] #desktopClarityPanel .bg-black,
    [data-theme="light"] #desktopClarityPanel .bg-zinc-900 {
      background: #faf8f5 !important;
    }
    
    [data-theme="light"] #desktopClarityPanel p,
    [data-theme="light"] #desktopClarityPanel span {
      color: #5c534a;
    }
    
    [data-theme="light"] #desktopClarityPanel .text-blue-400,
    [data-theme="light"] #desktopClarityPanel .text-blue-100 {
      color: #1e40af !important;
    }
    
    [data-theme="light"] #desktopGuidancePanel {
      background: #eff6ff !important;
      border-color: #bfdbfe !important;
    }
    
    [data-theme="light"] #desktopClarityCard {
      background: #f5f3ff !important;
      border-color: #ddd6fe !important;
    }
    
    /* Mobile Session Mode Panel */
    [data-theme="light"] #mobileSessionMode {
      background: #faf8f5 !important;
    }
    
    [data-theme="light"] .mobile-session-header {
      background: white !important;
    }
    
    [data-theme="light"] #mobileSessionClientName {
      color: #1f1a16 !important;
    }
    
    /* Sales/Clarity Mode Panel */
    [data-theme="light"] #salesModePanel {
      background: white !important;
      border-color: #e5ddd4 !important;
    }
    
    [data-theme="light"] #salesModePanel .bg-black,
    [data-theme="light"] #salesModePanel .bg-zinc-900 {
      background: #faf8f5 !important;
    }
    
    [data-theme="light"] #primaryDirective {
      background: #eff6ff !important;
    }
    
    [data-theme="light"] #battleCard {
      background: #f5f3ff !important;
    }
    
    /* Live AI Feedback Bar */
    [data-theme="light"] #liveAiFeedbackBar {
      background: white !important;
      border-color: #e5ddd4 !important;
    }
    
    /* Tables */
    [data-theme="light"] table {
      background: white;
    }
    
    [data-theme="light"] th {
      background: #f5f0eb;
      color: #5c534a;
    }
    
    [data-theme="light"] td {
      color: #1f1a16;
      border-color: #e5ddd4;
    }
    
    [data-theme="light"] tr:hover {
      background: #fef3c7;
    }
    
    /* Modals */
    [data-theme="light"] .card {
      background: white;
      border-color: #e5ddd4;
    }
    
    [data-theme="light"] #fullProfileModal .card,
    [data-theme="light"] #endSessionModal .card,
    [data-theme="light"] #settingsModal .card,
    [data-theme="light"] #fullCalendarModal .card {
      background: white !important;
    }
    
    /* Dropdown menus */
    [data-theme="light"] select {
      background: white;
      color: #1f1a16;
      border-color: #e5ddd4;
    }
    
    /* Textarea */
    [data-theme="light"] textarea {
      background: white;
      color: #1f1a16;
      border-color: #e5ddd4;
    }
    
    /* Client List Items */
    [data-theme="light"] .client-row {
      background: white;
      border-color: #e5ddd4;
    }
    
    [data-theme="light"] .client-row:hover {
      background: #fef3c7;
    }
    
    /* Tabs */
    [data-theme="light"] .tab-btn {
      color: #5c534a;
    }
    
    [data-theme="light"] .tab-btn.active {
      color: #d97706;
      border-color: #d97706;
    }
    
    /* Progress bars and gauges */
    [data-theme="light"] .bg-zinc-700 {
      background: #e5ddd4 !important;
    }
    
    /* Scrollbar for light mode */
    [data-theme="light"] ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    
    [data-theme="light"] ::-webkit-scrollbar-track {
      background: #f5f0eb;
    }
    
    [data-theme="light"] ::-webkit-scrollbar-thumb {
      background: #d4c8bc;
      border-radius: 4px;
    }
    
    [data-theme="light"] ::-webkit-scrollbar-thumb:hover {
      background: #bfb3a6;
    }
    
    /* Specific text colors that should stay dark in light mode */
    [data-theme="light"] .text-zinc-300 {
      color: #5c534a !important;
    }
    
    [data-theme="light"] .text-zinc-200 {
      color: #3d362f !important;
    }
    
    [data-theme="light"] .text-zinc-100 {
      color: #1f1a16 !important;
    }
    
    /* Keep button text white */
    [data-theme="light"] .btn-primary,
    [data-theme="light"] .bg-blue-600,
    [data-theme="light"] .bg-green-600,
    [data-theme="light"] .bg-emerald-600,
    [data-theme="light"] .bg-amber-600,
    [data-theme="light"] .bg-red-600,
    [data-theme="light"] .bg-violet-600 {
      color: white !important;
    }
    
    /* Placeholder text */
    [data-theme="light"] ::placeholder {
      color: #a39990;
    }
    
    /* Focus rings */
    [data-theme="light"] *:focus {
      outline-color: #d97706;
    }
    
    /* Tool cards */
    [data-theme="light"] .tool-card {
      background: white;
      border-color: #e5ddd4;
    }
    
    [data-theme="light"] .tool-card:hover {
      background: #fef3c7;
      border-color: #fcd34d;
    }
    
    /* Assessment cards */
    [data-theme="light"] .assessment-card {
      background: white;
      border-color: #e5ddd4;
    }
    
    /* Conversation list */
    [data-theme="light"] .conversation-item {
      background: white;
      border-color: #e5ddd4;
    }
    
    [data-theme="light"] .conversation-item:hover {
      background: #fef3c7;
    }
    
    /* Fix specific zinc backgrounds that appear in dynamic content */
    [data-theme="light"] [class*="bg-zinc-800\\/"],
    [data-theme="light"] [class*="bg-zinc-900\\/"],
    [data-theme="light"] [class*="bg-black\\/"] {
      background: rgba(245, 240, 235, 0.8) !important;
    }
    
    /* ============================================ */
    /* GLOBAL TAILWIND CLASS LIGHT MODE OVERRIDES */
    /* ============================================ */
    
    /* Background colors - dark to light */
    [data-theme="light"] .bg-zinc-900 { background: #ffffff !important; }
    [data-theme="light"] .bg-zinc-800 { background: #f5f0eb !important; }
    [data-theme="light"] .bg-zinc-700 { background: #ebe5de !important; }
    [data-theme="light"] .bg-black { background: #faf8f5 !important; }
    
    /* Text colors - light to dark (only in content areas, not buttons) */
    [data-theme="light"] main .text-white,
    [data-theme="light"] .card .text-white,
    [data-theme="light"] .modal .text-white,
    [data-theme="light"] aside .text-white,
    [data-theme="light"] header .text-white:not(button .text-white) {
      color: #1f1a16 !important;
    }
    
    /* Preserve white text in buttons and pills */
    [data-theme="light"] button .text-white,
    [data-theme="light"] .btn .text-white,
    [data-theme="light"] .pill .text-white,
    [data-theme="light"] [class*="bg-blue-"] .text-white,
    [data-theme="light"] [class*="bg-green-"] .text-white,
    [data-theme="light"] [class*="bg-red-"] .text-white,
    [data-theme="light"] [class*="bg-purple-"] .text-white,
    [data-theme="light"] [class*="bg-amber-"] .text-white {
      color: white !important;
    }
    
    /* Secondary text colors */
    [data-theme="light"] .text-zinc-300 { color: #5c534a !important; }
    [data-theme="light"] .text-zinc-400 { color: #6b6358 !important; }
    [data-theme="light"] .text-zinc-500 { color: #7d7268 !important; }
    
    /* Border colors */
    [data-theme="light"] .border-zinc-700 { border-color: #e5ddd4 !important; }
    [data-theme="light"] .border-zinc-800 { border-color: #d4c8bc !important; }
    [data-theme="light"] .divide-zinc-700 > * + * { border-color: #e5ddd4 !important; }
    [data-theme="light"] .divide-zinc-800 > * + * { border-color: #d4c8bc !important; }
    
    /* Hover states */
    [data-theme="light"] .hover\:bg-zinc-700:hover { background: #ebe5de !important; }
    [data-theme="light"] .hover\:bg-zinc-800:hover { background: #f5f0eb !important; }
    
    /* ============================================ */
    /* SESSION MODE PANELS - LIGHT MODE */
    /* ============================================ */
    
    [data-theme="light"] #desktopSessionMode {
      background: #faf8f5 !important;
    }
    
    [data-theme="light"] #desktopSessionMode .bg-zinc-900,
    [data-theme="light"] #desktopSessionMode .bg-black {
      background: white !important;
    }
    
    [data-theme="light"] #desktopSessionMode .text-white:not(button):not(.btn) {
      color: #1f1a16 !important;
    }
    
    [data-theme="light"] #desktopSessionMode .border-zinc-700,
    [data-theme="light"] #desktopSessionMode .border-zinc-800 {
      border-color: #e5ddd4 !important;
    }
    
    /* Mobile session mode */
    [data-theme="light"] #mobileSessionMode {
      background: #faf8f5 !important;
    }
    
    [data-theme="light"] #mobileSessionMode .bg-zinc-900,
    [data-theme="light"] #mobileSessionMode .bg-black {
      background: white !important;
    }
    
    [data-theme="light"] #mobileSessionMode .text-white:not(button):not(.btn) {
      color: #1f1a16 !important;
    }
    
    /* ============================================ */
    /* AI COACH PANEL - LIGHT MODE */
    /* ============================================ */
    
    [data-theme="light"] #aiCoachPanel {
      background: white !important;
      border-color: #e5ddd4 !important;
    }
    
    [data-theme="light"] #aiCoachPanel .bg-zinc-900,
    [data-theme="light"] #aiCoachPanel .bg-zinc-800 {
      background: #f5f0eb !important;
    }
    
    [data-theme="light"] #aiCoachPanel .text-white:not(button):not(.btn) {
      color: #1f1a16 !important;
    }
    
    [data-theme="light"] #aiCoachPanel .text-zinc-400 {
      color: #6b6358 !important;
    }
    
    [data-theme="light"] #aiCoachPanel .border-zinc-700 {
      border-color: #e5ddd4 !important;
    }
    
    /* AI chat messages */
    [data-theme="light"] .ai-message {
      background: #f3e8ff !important;
      color: #1f1a16 !important;
    }
    
    [data-theme="light"] .user-message {
      background: #dbeafe !important;
      color: #1f1a16 !important;
    }
    
    /* ============================================ */
    /* SALES MODE PANEL - LIGHT MODE */
    /* ============================================ */
    
    [data-theme="light"] #salesModePanel {
      background: white !important;
      border-color: #e5ddd4 !important;
    }
    
    [data-theme="light"] #salesModePanel .bg-zinc-900,
    [data-theme="light"] #salesModePanel .bg-zinc-800 {
      background: #f5f0eb !important;
    }
    
    [data-theme="light"] #salesModePanel .text-white:not(button):not(.btn) {
      color: #1f1a16 !important;
    }
    
    [data-theme="light"] #clarityCoachPanel {
      background: #f5f0eb !important;
    }
    
    [data-theme="light"] #clarityCoachPanel .text-white:not(button):not(.btn) {
      color: #1f1a16 !important;
    }
    
    /* ============================================ */
    /* MODALS - LIGHT MODE */
    /* ============================================ */
    
    [data-theme="light"] .modal-content,
    [data-theme="light"] [id$="Modal"] > div,
    [data-theme="light"] [id$="modal"] > div {
      background: white !important;
    }
    
    [data-theme="light"] [id$="Modal"] .bg-zinc-900,
    [data-theme="light"] [id$="Modal"] .bg-zinc-800,
    [data-theme="light"] [id$="modal"] .bg-zinc-900,
    [data-theme="light"] [id$="modal"] .bg-zinc-800 {
      background: #f5f0eb !important;
    }
    
    [data-theme="light"] [id$="Modal"] .text-white:not(button):not(.btn):not(.pill),
    [data-theme="light"] [id$="modal"] .text-white:not(button):not(.btn):not(.pill) {
      color: #1f1a16 !important;
    }
    
    [data-theme="light"] [id$="Modal"] .border-zinc-700,
    [data-theme="light"] [id$="Modal"] .border-zinc-800,
    [data-theme="light"] [id$="modal"] .border-zinc-700,
    [data-theme="light"] [id$="modal"] .border-zinc-800 {
      border-color: #e5ddd4 !important;
    }
    
    /* ============================================ */
    /* DROPDOWN MENUS - LIGHT MODE */
    /* ============================================ */
    
    [data-theme="light"] .dropdown-menu,
    [data-theme="light"] [class*="dropdown"] {
      background: white !important;
      border-color: #e5ddd4 !important;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    }
    
    [data-theme="light"] .dropdown-item:hover {
      background: #f5f0eb !important;
    }
    
    /* ============================================ */
    /* SCROLLBARS - LIGHT MODE */
    /* ============================================ */
    
    [data-theme="light"] ::-webkit-scrollbar-track {
      background: #f5f0eb;
    }
    
    [data-theme="light"] ::-webkit-scrollbar-thumb {
      background: #d4c8bc;
    }
    
    [data-theme="light"] ::-webkit-scrollbar-thumb:hover {
      background: #c4b8ac;
    }
    
    /* ============================================ */
    /* TABLES - LIGHT MODE */
    /* ============================================ */
    
    [data-theme="light"] table {
      background: white;
    }
    
    [data-theme="light"] th {
      background: #f5f0eb !important;
      color: #5c534a !important;
    }
    
    [data-theme="light"] td {
      border-color: #e5ddd4 !important;
    }
    
    [data-theme="light"] tr:hover {
      background: #faf8f5 !important;
    }
    
    /* ============================================ */
    /* TOAST NOTIFICATIONS - LIGHT MODE */
    /* ============================================ */
    
    [data-theme="light"] .toast,
    [data-theme="light"] #toastContainer > div {
      background: white !important;
      color: #1f1a16 !important;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
      border: 1px solid #e5ddd4 !important;
    }
    
    /* ============================================ */
    /* PROFILE PANEL LIGHT MODE FIXES */
    /* ============================================ */
    
    /* Client Profile Name - force dark text */
    [data-theme="light"] #profileName {
      color: #1f1a16 !important;
    }
    
    /* Profile header area */
    [data-theme="light"] #fullProfileView {
      background: var(--bg-deep);
    }
    
    [data-theme="light"] #fullProfileView .bg-zinc-900,
    [data-theme="light"] #fullProfileView .bg-black {
      background: white !important;
    }
    
    [data-theme="light"] #fullProfileView .text-white:not(button):not(.btn):not(.pill) {
      color: #1f1a16 !important;
    }
    
    /* Profile cards */
    [data-theme="light"] #fullProfileView .card {
      background: white !important;
      border-color: #e5ddd4 !important;
    }
    
    /* Profile info labels */
    [data-theme="light"] #fullProfileView .text-zinc-400,
    [data-theme="light"] #fullProfileView .text-zinc-500 {
      color: #6b6358 !important;
    }
    
    /* ============================================ */
    /* RESOURCES LIGHT MODE FIXES */
    /* ============================================ */
    
    [data-theme="light"] #resourcesView {
      background: var(--bg-deep);
    }
    
    [data-theme="light"] #resourcesView .card {
      background: white !important;
      border-color: #e5ddd4 !important;
    }
    
    [data-theme="light"] #resourcesView .bg-zinc-900,
    [data-theme="light"] #resourcesView .bg-zinc-800 {
      background: #f5f0eb !important;
    }
    
    [data-theme="light"] #resourcesView .text-white:not(button):not(.btn) {
      color: #1f1a16 !important;
    }
    
    [data-theme="light"] #resourcesView .text-zinc-300,
    [data-theme="light"] #resourcesView .text-zinc-400 {
      color: #5c534a !important;
    }
    
    /* Resource cards hover */
    [data-theme="light"] #resourcesView .hover\\:bg-zinc-800:hover {
      background: #fef3c7 !important;
    }
    
    /* ============================================ */
    /* CALENDAR LIGHT MODE FIXES */
    /* ============================================ */
    
    [data-theme="light"] #calendarView {
      background: var(--bg-deep);
    }
    
    [data-theme="light"] .calendar-grid {
      background: white;
    }
    
    [data-theme="light"] .calendar-day {
      border-color: #e5ddd4 !important;
    }
    
    [data-theme="light"] .calendar-day:hover {
      background: #fef3c7 !important;
    }

    /* Theme Toggle Switch Styles */
    .theme-toggle {
      position: relative;
      width: 56px;
      height: 28px;
      background: var(--bg-elevated);
      border: 1px solid var(--border-subtle);
      border-radius: 14px;
      cursor: pointer;
      transition: all 0.3s;
    }
    
    .theme-toggle-handle {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 22px;
      height: 22px;
      background: var(--accent-primary);
      border-radius: 50%;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .theme-toggle-handle svg {
      width: 14px;
      height: 14px;
      color: white;
    }
    
    [data-theme="light"] .theme-toggle-handle {
      left: 30px;
      background: var(--accent-primary);
    }
    
    * { font-family: 'DM Sans', sans-serif; -webkit-tap-highlight-color: transparent; }
    .mono { font-family: 'Space Mono', monospace; }
    body { background: var(--bg-deep); min-height: 100vh; color: var(--text-primary); overscroll-behavior: none; transition: background 0.3s, color 0.3s; }
    
    /* Enforce hidden class - critical for login screen */
    .hidden { display: none !important; }
    
    /* Safe area for mobile notches */
    .safe-area-top { padding-top: env(safe-area-inset-top); }
    .safe-area-bottom { padding-bottom: env(safe-area-inset-bottom); }
    
    .card {
      background: var(--bg-card);
      transition: background 0.3s, border-color 0.3s;
      border-radius: 16px;
      border: 1px solid var(--border-subtle);
    }
    .card:hover { border-color: var(--border-hover); }
    
    .card-glass {
      background: rgba(35, 30, 26, 0.85);
      backdrop-filter: blur(20px);
      border-radius: 16px;
      border: 1px solid var(--border-subtle);
    }
    
    /* Warm gradient backgrounds */
    .bg-warm-gradient {
      background: linear-gradient(135deg, #2d2620 0%, #1a1512 100%);
    }
    
    .bg-accent-gradient {
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    }
    
    /* Calendar Styles */
    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px;
    }
    .calendar-day {
      min-height: 100px;
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      padding: 8px;
      transition: all 0.15s;
      cursor: pointer;
    }
    .calendar-day:hover { background: var(--bg-elevated); border-color: var(--accent-primary); }
    .calendar-day.today { background: #3d2d1a; border-color: var(--accent-primary); }
    .calendar-day.other-month { opacity: 0.4; }
    
    /* Calendar day numbers */
    .cal-day-num {
      color: var(--text-secondary);
    }
    
    /* Calendar events - dark mode default */
    .calendar-event {
      font-size: 11px;
      padding: 5px 8px;
      border-radius: 6px;
      margin-bottom: 3px;
      cursor: pointer;
      transition: all 0.15s;
      font-weight: 600;
      background: #3b82f6;
      color: white;
      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .calendar-event:hover { 
      transform: scale(1.02); 
      background: #2563eb;
      box-shadow: 0 2px 6px rgba(59,130,246,0.4);
    }
    
    /* Light mode calendar */
    [data-theme="light"] .cal-day-num {
      color: #374151;
    }
    
    [data-theme="light"] .calendar-event {
      background: #2563eb !important;
      color: white !important;
      font-weight: 600;
      box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    }
    
    [data-theme="light"] .calendar-event:hover {
      background: #1d4ed8 !important;
      box-shadow: 0 2px 8px rgba(37,99,235,0.3);
    }
    
    [data-theme="light"] .calendar-day {
      background: white;
      border-color: #e5e7eb;
    }
    
    [data-theme="light"] .calendar-day:hover {
      background: #f3f4f6;
      border-color: #d97706;
    }
    
    [data-theme="light"] .calendar-day.today {
      background: #fef3c7 !important;
      border-color: #f59e0b !important;
    }
    
    /* Client Quick Panel */
    .client-quick-panel {
      position: fixed;
      right: 0;
      top: 56px;
      bottom: 0;
      width: 420px;
      background: var(--bg-card);
      border-left: 1px solid var(--border-subtle);
      transform: translateX(100%);
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 40;
      overflow-y: auto;
    }
    .client-quick-panel.open { transform: translateX(0); }
    
    /* Pills */
    .pill {
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .pill-green { background: #064e3b; color: #6ee7b7; }
    .pill-blue { background: #1e3a5f; color: #7dd3fc; }
    .pill-amber { background: #78350f; color: #fcd34d; }
    .pill-red { background: #7f1d1d; color: #fca5a5; }
    .pill-purple { background: #4c1d95; color: #c4b5fd; }
    .pill-gray { background: #27272a; color: #a1a1aa; }
    
    /* Buttons */
    .btn {
      padding: 10px 18px;
      border-radius: 10px;
      font-weight: 600;
      font-size: 14px;
      transition: all 0.15s;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .btn:hover { transform: translateY(-1px); }
    .btn-primary { background: var(--accent-primary); color: #1a1512; }
    .btn-primary:hover { background: var(--accent-primary-hover); }
    .btn-secondary { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-subtle); }
    .btn-secondary:hover { background: var(--border-subtle); }
    .btn-success { background: var(--accent-success); color: white; }
    .btn-success:hover { background: #059669; }
    .btn-ai { background: linear-gradient(135deg, #8b5cf6, #6366f1); color: white; }
    .btn-ai:hover { background: linear-gradient(135deg, #7c3aed, #4f46e5); box-shadow: 0 0 20px rgba(139, 92, 246, 0.4); }
    .btn-danger { background: var(--accent-danger); color: white; }
    .btn-stripe { background: #635bff; color: white; }
    .btn-qb { background: #2ca01c; color: white; }
    
    /* Nav */
    .nav-item {
      padding: 10px 12px;
      border-radius: 8px;
      color: var(--text-muted);
      font-weight: 500;
      font-size: 14px;
      transition: all 0.15s;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .nav-item:hover { background: var(--bg-elevated); color: var(--text-primary); }
    .nav-item.active { background: var(--accent-primary); color: #1a1512; }
    .nav-item.active svg { color: #1a1512; }
    
    /* Mobile Bottom Navigation */
    .mobile-nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 6px 12px;
      color: #71717a;
      font-size: 10px;
      font-weight: 500;
      gap: 2px;
      transition: all 0.15s;
      border-radius: 8px;
    }
    .mobile-nav-item:hover,
    .mobile-nav-item:active {
      color: #fafafa;
      background: rgba(255,255,255,0.05);
    }
    .mobile-nav-item.active {
      color: var(--accent-primary);
    }
    .mobile-nav-item.active svg {
      color: var(--accent-primary);
    }
    .mobile-nav-item svg {
      width: 22px;
      height: 22px;
    }
    
    /* Safe area for iOS */
    .safe-area-bottom {
      padding-bottom: env(safe-area-inset-bottom, 8px);
    }
    
    /* Hide mobile nav on desktop */
    @media (min-width: 768px) {
      #mobileBottomNav {
        display: none !important;
      }
    }
    
    /* Client Status Colors */
    .client-status-active { border-left: 4px solid var(--status-active); }
    .client-status-new { border-left: 4px solid var(--status-new); }
    .client-status-attention { border-left: 4px solid var(--status-attention); }
    .client-status-critical { border-left: 4px solid var(--status-critical); }
    .client-status-archived { border-left: 4px solid var(--status-archived); }
    
    /* Color-coded pills for flags */
    .flag-red { background: rgba(239, 68, 68, 0.15); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.3); }
    .flag-yellow { background: rgba(245, 158, 11, 0.15); color: #fcd34d; border: 1px solid rgba(245, 158, 11, 0.3); }
    .flag-green { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; border: 1px solid rgba(16, 185, 129, 0.3); }
    .flag-purple { background: rgba(139, 92, 246, 0.15); color: #c4b5fd; border: 1px solid rgba(139, 92, 246, 0.3); }
    .flag-blue { background: rgba(59, 130, 246, 0.15); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.3); }
    
    /* Warm accent cards */
    .card-warm {
      background: linear-gradient(135deg, var(--bg-card) 0%, #2d2418 100%);
      border: 1px solid rgba(245, 158, 11, 0.2);
    }
    .card-warm:hover { border-color: rgba(245, 158, 11, 0.4); }
    
    /* Recording */
    .recording-pulse {
      animation: pulse 1.5s ease-in-out infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }
    
    .recording-wave {
      display: flex;
      align-items: center;
      gap: 3px;
      height: 24px;
    }
    .recording-wave span {
      width: 3px;
      background: var(--accent-danger);
      border-radius: 2px;
      animation: wave 0.8s ease-in-out infinite;
    }
    .recording-wave span:nth-child(1) { animation-delay: 0s; height: 8px; }
    .recording-wave span:nth-child(2) { animation-delay: 0.1s; height: 16px; }
    .recording-wave span:nth-child(3) { animation-delay: 0.2s; height: 12px; }
    .recording-wave span:nth-child(4) { animation-delay: 0.3s; height: 20px; }
    .recording-wave span:nth-child(5) { animation-delay: 0.4s; height: 10px; }
    @keyframes wave {
      0%, 100% { transform: scaleY(1); }
      50% { transform: scaleY(1.5); }
    }
    
    /* Modal */
    .modal-backdrop {
      background: rgba(15, 12, 10, 0.85);
      backdrop-filter: blur(8px);
    }
    
    /* AI Chat */
    .ai-chat-bubble {
      background: linear-gradient(135deg, #2d1f4e, #3d2963);
      border-radius: 16px;
      padding: 16px;
      border: 1px solid #4338ca;
    }
    
    /* Scrollbar */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: #52525b; }
    
    /* Inputs */
    .input {
      background: var(--bg-deep);
      border: 1px solid var(--border-subtle);
      border-radius: 10px;
      padding: 12px 16px;
      color: var(--text-primary);
      transition: all 0.15s;
    }
    .input:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15); }
    .input::placeholder { color: var(--text-muted); }
    
    /* Tabs */
    .tab { 
      padding: 8px 16px; 
      border-radius: 8px; 
      font-weight: 500;
      color: var(--text-muted);
      transition: all 0.15s;
    }
    .tab:hover { color: var(--text-primary); }
    .tab.active { background: var(--bg-elevated); color: var(--text-primary); }
    
    /* Finance Cards */
    .stat-card {
      background: linear-gradient(135deg, var(--bg-card), var(--bg-deep));
      border: 1px solid var(--border-subtle);
      border-radius: 16px;
      padding: 20px;
    }
    
    /* Transitions for SPA */
    .view-transition {
      animation: fadeIn 0.2s ease-out;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    /* AI Insight Panel Animation */
    .animate-slide-in {
      animation: slideIn 0.3s ease-out;
    }
    @keyframes slideIn {
      from { opacity: 0; transform: translateX(100px); }
      to { opacity: 1; transform: translateX(0); }
    }
    
    /* ================================
       MOBILE RESPONSIVE STYLES
    ================================ */
    @media (max-width: 768px) {
      /* Hide sidebar on mobile, show hamburger */
      aside {
        position: fixed;
        left: -280px;
        top: 0;
        bottom: 0;
        z-index: 50;
        transition: left 0.3s ease;
      }
      aside.mobile-open {
        left: 0;
      }
      
      /* Mobile nav toggle */
      .mobile-nav-toggle {
        display: flex !important;
      }
      
      /* Main content full width */
      main {
        margin-left: 0 !important;
      }
      
      /* Stack calendar grid */
      .calendar-grid {
        font-size: 12px;
      }
      .calendar-day {
        min-height: 60px;
        padding: 4px;
      }
      .calendar-event {
        font-size: 10px;
        padding: 2px 4px;
      }
      
      /* Session mode mobile layout */
      #sessionMode .grid-cols-3 {
        grid-template-columns: 1fr !important;
      }
      
      /* Video container mobile */
      .video-container {
        height: 200px !important;
      }
      
      /* Session controls mobile */
      #sessionMode .flex.gap-3 {
        flex-wrap: wrap;
        justify-content: center;
      }
      
      /* Modal full screen on mobile */
      .card {
        max-height: 95vh;
        overflow-y: auto;
      }
      
      /* Profile modal mobile */
      #fullProfileModal .grid-cols-2,
      #fullProfileModal .grid-cols-3 {
        grid-template-columns: 1fr !important;
      }
      
      /* AI Insight panel mobile */
      #aiInsightPanel {
        width: calc(100% - 2rem) !important;
        left: 1rem;
        right: 1rem;
        top: 4rem !important;
      }
      
      /* Day detail modal mobile */
      #dayDetailModal .card {
        max-height: 80vh;
      }
      
      /* Booking modal mobile */
      #quickBookModal .grid-cols-2 {
        grid-template-columns: 1fr !important;
      }
      
      /* Client panel mobile */
      #clientPanel {
        width: 100% !important;
        max-width: 100% !important;
      }
      
      /* Finance cards stack */
      .stat-card {
        padding: 12px;
      }
      
      /* Table scroll on mobile */
      table {
        display: block;
        overflow-x: auto;
      }
      
      /* Buttons more touch-friendly */
      .btn {
        min-height: 44px;
        padding: 10px 16px;
      }
      
      /* Input fields larger on mobile */
      .input, select, textarea {
        min-height: 44px;
        font-size: 16px; /* Prevents zoom on iOS */
      }
    }
    
    /* Small mobile */
    @media (max-width: 480px) {
      .calendar-day {
        min-height: 50px;
      }
      .calendar-event {
        display: none;
      }
      .calendar-day .text-xs.text-zinc-500 {
        display: none;
      }
      
      /* Show dot indicator instead */
      .calendar-day[data-has-bookings]::after {
        content: '';
        width: 6px;
        height: 6px;
        background: #3b82f6;
        border-radius: 50%;
        display: block;
        margin: 2px auto 0;
      }
    }
    
    /* ================================
       MOBILE BOTTOM NAVIGATION
    ================================ */
    .mobile-bottom-nav {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: var(--bg-card);
      border-top: 1px solid var(--border-subtle);
      padding: 8px 0 max(8px, env(safe-area-inset-bottom));
      z-index: 100;
    }
    
    /* Only show on mobile when NOT hidden */
    @media (max-width: 768px) {
      .mobile-bottom-nav:not(.hidden) {
        display: flex;
      }
    }
    
    .mobile-bottom-nav a {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 8px;
      color: var(--text-muted);
      font-size: 10px;
      font-weight: 500;
      transition: color 0.15s;
    }
    
    .mobile-bottom-nav a.active {
      color: var(--accent-primary);
    }
    
    .mobile-bottom-nav a svg {
      width: 24px;
      height: 24px;
    }
    
    .mobile-bottom-nav .new-btn {
      background: linear-gradient(135deg, var(--accent-primary), #d97706);
      color: white;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      margin-top: -28px;
      box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
    }
    
    .mobile-bottom-nav .new-btn svg {
      width: 28px;
      height: 28px;
    }
    
    @media (max-width: 768px) {
      /* Add padding to main content so bottom nav doesn't cover it */
      main {
        padding-bottom: 80px !important;
      }
      
      /* Hide desktop sidebar completely */
      aside {
        display: none !important;
      }
      
      /* Mobile header adjustments */
      .mobile-header {
        display: flex !important;
      }
    }
    
    /* ================================
       MOBILE SESSION MODE (In-Person)
    ================================ */
    .mobile-session-mode {
      position: fixed;
      inset: 0;
      background: var(--bg-deep);
      z-index: 200;
      display: flex;
      flex-direction: column;
    }
    
    /* Ensure hidden class works on mobile-session-mode */
    .mobile-session-mode.hidden {
      display: none !important;
    }
    
    .mobile-session-header {
      background: var(--bg-card);
      padding: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--border-subtle);
    }
    
    .mobile-session-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 24px 16px;
      overflow-y: auto;
    }
    
    .mobile-session-mic {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent-success), #047857);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 32px auto;
      box-shadow: 0 0 60px rgba(16, 185, 129, 0.3);
      transition: all 0.3s;
    }
    
    .mobile-session-mic.listening {
      animation: micPulse 1.5s ease-in-out infinite;
      box-shadow: 0 0 80px rgba(16, 185, 129, 0.5);
    }
    
    .mobile-session-mic.paused {
      background: linear-gradient(135deg, #525252, #404040);
      box-shadow: none;
    }
    
    @keyframes micPulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.05); }
    }
    
    .mobile-session-transcript {
      background: var(--bg-card);
      border-radius: 16px;
      padding: 16px;
      margin-top: 24px;
      flex: 1;
      overflow-y: auto;
      font-size: 15px;
      line-height: 1.6;
      color: #d4d4d4;
    }
    
    .mobile-session-footer {
      padding: 16px;
      background: #1a1a1a;
      border-top: 1px solid #2a2a2a;
      display: flex;
      gap: 12px;
    }
    
    .mobile-session-footer button {
      flex: 1;
      padding: 16px;
      border-radius: 12px;
      font-weight: 600;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    
    /* Speaker Toggle Buttons */
    .speaker-btn {
      background: #27272a;
      border: 2px solid transparent;
      color: #a1a1aa;
    }
    
    .speaker-btn.active {
      background: #1e40af;
      border-color: #3b82f6;
      color: white;
      box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
    }
    
    .speaker-btn.coach-active {
      background: #1e40af;
      border-color: #3b82f6;
    }
    
    .speaker-btn.client-active {
      background: #b45309;
      border-color: #f59e0b;
    }
    
    .speaker-btn.partner-active {
      background: #be185d;
      border-color: #ec4899;
    }
    
    /* Transcript Speaker Labels */
    .transcript-line {
      margin-bottom: 8px;
      padding: 8px 12px;
      border-radius: 8px;
    }
    
    .transcript-line.coach {
      background: rgba(59, 130, 246, 0.1);
      border-left: 3px solid #3b82f6;
    }
    
    .transcript-line.client {
      background: rgba(245, 158, 11, 0.1);
      border-left: 3px solid #f59e0b;
    }
    
    .transcript-line.partner {
      background: rgba(236, 72, 153, 0.1);
      border-left: 3px solid #ec4899;
    }
    
    .speaker-label {
      font-weight: 600;
      font-size: 11px;
      text-transform: uppercase;
      margin-bottom: 2px;
    }
    
    .speaker-label.coach { color: #60a5fa; }
    .speaker-label.client { color: #fbbf24; }
    .speaker-label.partner { color: #f472b6; }
    
    /* ================================
       SALES MODE STYLING
    ================================ */
    .sales-mode-active .mobile-session-header {
      background: linear-gradient(135deg, #064e3b, #065f46);
      border-bottom-color: #10b981;
    }
    
    .sales-mode-active .mobile-session-time {
      color: #6ee7b7 !important;
    }
    
    /* Desktop sales mode header */
    .sales-mode-header {
      background: linear-gradient(135deg, #064e3b, #065f46) !important;
      border-bottom-color: #10b981 !important;
    }
    
    .sales-mode-header #sessionTimer {
      color: #6ee7b7 !important;
    }
    
    /* CLARITY COACH SESSION STYLES */
    #salesModePanel {
      animation: slideDown 0.3s ease-out;
      font-family: 'Space Mono', monospace;
    }
    
    #salesModePanel * {
      font-family: inherit;
    }
    
    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    /* Tactical grid lines effect */
    #salesModePanel::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: 
        linear-gradient(90deg, rgba(245,158,11,0.03) 1px, transparent 1px),
        linear-gradient(rgba(245,158,11,0.03) 1px, transparent 1px);
      background-size: 20px 20px;
      pointer-events: none;
      z-index: 0;
    }
    
    #salesModePanel > * {
      position: relative;
      z-index: 1;
    }
    
    /* Tactical warning flash */
    .tactical-flash {
      animation: tacticalFlash 0.5s ease-out;
    }
    
    @keyframes tacticalFlash {
      0%, 100% { background-color: transparent; }
      50% { background-color: rgba(245, 158, 11, 0.2); }
    }
    
    /* Battle card entrance */
    #battleCard {
      animation: battleCardSlide 0.3s ease-out;
    }
    
    @keyframes battleCardSlide {
      from {
        opacity: 0;
        transform: translateX(-20px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
    
    /* Sentiment bar gradient animation */
    #sentimentBar {
      background: linear-gradient(90deg, #ef4444 0%, #f59e0b 50%, #10b981 100%);
    }
    
    #salesTipsContainer {
      transition: background 0.3s ease;
    }
    
    /* Sales mode pulse animation */
    .sales-pulse {
      animation: salesPulse 2s ease-in-out infinite;
    }
    
    @keyframes salesPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
      50% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
    }
    
    /* Session type button styles */
    .session-type-btn {
      cursor: pointer;
    }
    
    .session-type-btn:hover {
      transform: scale(1.02);
    }
    
    .session-type-btn:active {
      transform: scale(0.98);
    }
    
    /* Sales Tab Styles */
    .sales-tab {
      transition: all 0.2s ease;
    }
    
    .sales-tab:hover {
      opacity: 0.9;
    }
    
    .sales-content {
      transition: all 0.2s ease;
    }
    
    #salesContentObjections::-webkit-scrollbar,
    #salesContentPackages::-webkit-scrollbar,
    #salesContentProposal::-webkit-scrollbar {
      width: 4px;
    }
    
    #salesContentObjections::-webkit-scrollbar-thumb,
    #salesContentPackages::-webkit-scrollbar-thumb,
    #salesContentProposal::-webkit-scrollbar-thumb {
      background: #3f3f46;
      border-radius: 2px;
    }
    
    /* Live AI Feedback Bar */
    #liveAiFeedbackBar {
      animation: slideUp 0.3s ease-out;
    }
    
    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    #liveAiFeedback {
      min-height: 24px;
      transition: all 0.3s ease;
    }
    
    /* AI Suggestion Flash Animation */
    .ai-suggestion-flash {
      animation: suggestionFlash 1.5s ease-out !important;
    }
    
    @keyframes suggestionFlash {
      0% { 
        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.8);
        background: linear-gradient(to right, rgba(91, 33, 182, 0.9), rgba(67, 56, 202, 0.9));
      }
      30% { 
        box-shadow: 0 0 20px 10px rgba(139, 92, 246, 0.5);
        background: linear-gradient(to right, rgba(124, 58, 237, 0.9), rgba(99, 102, 241, 0.9));
      }
      100% { 
        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
      }
    }
    
    /* Speaking indicator animation */
    #liveAiSpeaking .animate-pulse {
      animation: speakingPulse 0.8s ease-in-out infinite;
    }
    
    @keyframes speakingPulse {
      0%, 100% { height: 8px; opacity: 0.5; }
      50% { height: 16px; opacity: 1; }
    }
    
    /* ================================
       QUICK ACTION CARDS (Mobile)
    ================================ */
    .quick-action-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: 16px;
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 16px;
      transition: all 0.15s;
    }
    
    .quick-action-card:active {
      transform: scale(0.98);
      background: var(--bg-elevated);
    }
    
    .quick-action-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* Today's Sessions Card */
    .today-session-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: 16px;
      padding: 16px;
      margin-bottom: 12px;
    }
    
    .today-session-card .start-btn {
      background: var(--accent-success);
      color: white;
      padding: 12px 24px;
      border-radius: 10px;
      font-weight: 600;
      margin-top: 12px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    
    .today-session-card .start-btn:active {
      background: #047857;
    }
  
    /* ================================
       CUSTOM TOOLTIP STYLES
    ================================ */
    
    /* Make native tooltips appear faster */
    [title] {
      position: relative;
    }
    
    /* Custom tooltip styling using CSS */
    .tooltip-wrapper {
      position: relative;
    }
    
    .tooltip-wrapper::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      padding: 6px 12px;
      background: #18181b;
      color: #fafafa;
      font-size: 12px;
      border-radius: 6px;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.15s, visibility 0.15s;
      pointer-events: none;
      z-index: 1000;
      border: 1px solid #3f3f46;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    
    .tooltip-wrapper:hover::after {
      opacity: 1;
      visibility: visible;
    }
    
    /* Ensure buttons with title attribute show pointer */
    button[title], 
    [onclick][title] {
      cursor: pointer;
    }

    /* ================================
       FLOATING ACTION BUTTON (FAB)
    ================================ */
    .fab-menu-item {
      animation: fabSlideIn 0.2s ease-out;
      transform-origin: bottom right;
    }
    
    @keyframes fabSlideIn {
      from {
        opacity: 0;
        transform: translateY(10px) scale(0.9);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    
    #fabMenu .fab-menu-item:nth-child(1) { animation-delay: 0s; }
    #fabMenu .fab-menu-item:nth-child(2) { animation-delay: 0.05s; }
    #fabMenu .fab-menu-item:nth-child(3) { animation-delay: 0.1s; }
    
    /* ================================
       SKELETON LOADERS
    ================================ */
    .skeleton {
      background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-card) 50%, var(--bg-elevated) 75%);
      background-size: 200% 100%;
      animation: skeletonShimmer 1.5s infinite;
      border-radius: 8px;
    }
    
    @keyframes skeletonShimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    
    .skeleton-text {
      height: 1em;
      margin-bottom: 0.5em;
    }
    
    .skeleton-text-sm { width: 60%; }
    .skeleton-text-md { width: 80%; }
    .skeleton-text-lg { width: 100%; }
    
    .skeleton-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
    }
    
    .skeleton-card {
      padding: 1rem;
      border-radius: 12px;
    }
    
    /* ================================
       TOAST IMPROVEMENTS
    ================================ */
    .toast-container {
      position: fixed;
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9999;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    
    @media (min-width: 768px) {
      .toast-container {
        bottom: 24px;
        right: 24px;
        left: auto;
        transform: none;
      }
    }
    
    .toast {
      animation: toastSlideIn 0.3s ease-out;
    }
    
    @keyframes toastSlideIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    /* ================================
       IMPROVED EMPTY STATES
    ================================ */
    .empty-state {
      text-align: center;
      padding: 3rem 1.5rem;
    }
    
    .empty-state-icon {
      width: 64px;
      height: 64px;
      margin: 0 auto 1rem;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .empty-state-title {
      font-size: 1.125rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 0.5rem;
    }
    
    .empty-state-text {
      color: var(--text-muted);
      font-size: 0.875rem;
      max-width: 300px;
      margin: 0 auto 1rem;
    }
    
    /* ================================
       TAB IMPROVEMENTS
    ================================ */
    .tab {
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      color: var(--text-muted);
      transition: all 0.15s;
      border: 1px solid transparent;
    }
    
    .tab:hover {
      color: var(--text-primary);
      background: var(--bg-elevated);
    }
    
    .tab.active {
      color: var(--accent-primary);
      background: rgba(245, 158, 11, 0.1);
      border-color: rgba(245, 158, 11, 0.3);
    }
    
    /* ================================
       CLIENT CARD HOVER ACTIONS
    ================================ */
    .client-card-actions {
      opacity: 0;
      transition: opacity 0.15s;
    }
    
    .client-card:hover .client-card-actions {
      opacity: 1;
    }
    
    @media (max-width: 768px) {
      .client-card-actions {
        opacity: 1;
      }
    }


/* Kanban Board Styles */
.kanban-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kanban-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.kanban-card.dragging {
  opacity: 0.5;
  transform: rotate(3deg);
}

.kanban-cards.drag-over {
  border-color: rgb(99, 102, 241) !important;
  background-color: rgba(99, 102, 241, 0.1) !important;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* Calendar Drag & Drop */
.calendar-event {
  cursor: grab;
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}

.calendar-event:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.calendar-event:active {
  cursor: grabbing;
}

.calendar-day {
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.calendar-day.drag-over {
  background-color: rgba(245, 158, 11, 0.1) !important;
  box-shadow: inset 0 0 0 2px rgb(245, 158, 11);
}

/* Sidebar Collapse */
#mainSidebar[data-collapsed="true"] .nav-item {
  justify-content: center;
  padding: 0.75rem;
}

#mainSidebar[data-collapsed="true"] .nav-item svg {
  margin: 0;
}

#mainSidebar[data-collapsed="true"] .stats-section .grid {
  grid-template-columns: 1fr;
}

#mainSidebar[data-collapsed="true"] .stats-section button {
  padding: 0.5rem;
}

/* Skeleton Loader Animation */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}

.animate-pulse {
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

/* Skeleton Base Styles */
.skeleton {
  background: linear-gradient(90deg, #27272a 25%, #3f3f46 50%, #27272a 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 0.375rem;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}