/* ================================ */
        /* DREAM JOURNAL CSS ARCHITECTURE   */
        /* ================================ */
        /* Modern HSL-based theme system with comprehensive utility classes and responsive design */
        /* Last Updated: 2025-01-15 */
        
        /* ================================ */
        /* CSS CUSTOM PROPERTIES SYSTEM     */
        /* ================================ */

        :root {
            /* Static design tokens - consistent across all themes */
            --border-radius: 8px;
            --border-radius-lg: 12px;
            --border-radius-xl: 15px;
            --font-weight-medium: 500;
            --font-weight-semibold: 600;
            --transition: all 0.3s ease;
            
            /* Responsive design tokens */
            --padding-responsive-sm: clamp(15px, 4vw, 25px);
            --padding-responsive-md: clamp(20px, 5vw, 40px);
            --padding-responsive-lg: clamp(25px, 6vw, 50px);
            --max-width-sm: 400px;
            --max-width-md: 600px;
            --max-width-lg: 800px;
            
            /* HSL Color Foundation - Hue and Saturation values (never change between themes) */
            /* Only lightness values change for light/dark theme switching */
            --primary-h: 238;    --primary-s: 84%;    /* Deep blue for primary actions */
            --success-h: 158;    --success-s: 64%;    /* Green for success states */
            --error-h: 0;        --error-s: 84%;      /* Red for error states */
            --warning-h: 32;     --warning-s: 95%;    /* Orange/yellow for warnings */
            --info-h: 199;       --info-s: 89%;       /* Light blue for informational states */
            
            /* Neutral color families for backgrounds and text */
            --neutral-h: 222;    --neutral-s: 47%;    /* Primary neutral base */
            --slate-h: 215;      --slate-s: 20%;      /* Secondary neutral base */
            --gray-h: 220;       --gray-s: 13%;       /* Tertiary neutral base */
            
            /* ================================ */
            /* LIGHT THEME LIGHTNESS VALUES    */
            /* ================================ */
            /* All lightness percentages for light theme appearance */
            
            /* Background hierarchy - from lightest to darker */
            --bg-primary-l: 100%;      --bg-secondary-l: 100%;      /* Pure white backgrounds */
            --bg-elevated-l: 100%;     --bg-input-l: 100%;          /* Form and elevated surfaces */
            --bg-hover-l: 98%;         --bg-subtle-l: 95%;          /* Hover and subtle backgrounds */
            --bg-light-l: 98%;         --bg-disabled-l: 99%;        /* Light and disabled states */
            --bg-selected-l: 97%;      /* Selected state backgrounds */
            
            /* Text hierarchy - from darkest to lightest */
            --text-primary-l: 11%;     --text-secondary-l: 38%;     /* Primary and secondary text */
            --text-tertiary-l: 42%;    --text-muted-l: 64%;         /* Tertiary and muted text */
            --text-inverse-l: 100%;    --text-disabled-l: 42%;      /* Inverse and disabled text */
            
            /* Border system - from lightest to darkest */
            --border-light-l: 95%;     --border-color-l: 88%;       /* Light and standard borders */
            --border-dark-l: 82%;      --border-hover-l: 82%;       /* Dark and hover borders */
            
            /* Semantic color lightness values */
            --primary-l: 59%;          --primary-hover-l: 52%;      /* Primary action colors */
            --primary-solid-l: 59%;                                 /* Primary as a button background under white text */
            --success-l: 28%;          --success-hover-l: 26%;      /* Success state colors */
            --error-l: 42%;            --error-hover-l: 40%;        /* Error state colors */
            --warning-l: 44%;          --warning-hover-l: 38%;      /* Warning and warning hover colors */
            --warning-text-l: 33%;                                  /* Warning text on warning backgrounds; the base orange is only 2.9:1 there */
            --info-l: 35%;             --info-hover-l: 30%;         /* Info and info hover colors */
            --secondary-l: 86%;        --secondary-hover-l: 75%;    /* Secondary action colors */
            
            /* Component-specific lightness values */
            --shadow-opacity: 0.1;     --modal-backdrop-opacity: 0.9;
            --voice-bg-l: 97%;         --voice-border-l: 86%;       --voice-text-l: 35%;
            --tag-bg-l: 97%;           --tag-text-l: 35%;           --tag-border-l: 86%;
            --dream-sign-bg-l: 95%;    --dream-sign-text-l: 32%;    --dream-sign-border-l: 88%;
            --notification-error-l: 93%;   --notification-success-l: 89%;
            --notification-warning-l: 95%; --notification-info-l: 97%;
            
            /* Light theme gradients - Subtle green tint for lucid dream highlighting */
            --light-lucid-gradient: linear-gradient(135deg, hsl(158, 47%, 97%), var(--bg-secondary));
        }
        
        /* ================================ */
        /* UTILITY CLASS SYSTEM            */
        /* ================================ */
        /* Reusable utility classes for consistent styling and rapid development */
        
        /* Card component base classes */
        .card { background: var(--bg-secondary); border: 2px solid var(--border-color); }
        .card-elevated { background: var(--bg-elevated); border: 2px solid var(--border-color); }
        .card-lg { border-radius: var(--border-radius-xl); padding: var(--padding-responsive-lg); }
        .card-md { border-radius: var(--border-radius-lg); padding: var(--padding-responsive-md); }
        .card-sm { border-radius: var(--border-radius); padding: var(--padding-responsive-sm); }
        
        /* Flexbox layout utilities */
        .flex-center { display: flex; align-items: center; justify-content: center; }
        .flex-between { display: flex; align-items: center; justify-content: space-between; }
        .flex-col { display: flex; flex-direction: column; }
        .flex-wrap { flex-wrap: wrap; }
        
        /* Spacing system utilities */
        .gap-xs { gap: 5px; } .gap-sm { gap: 8px; } .gap-md { gap: 15px; } .gap-lg { gap: 20px; } .gap-xl { gap: 30px; } .gap-2xl { gap: 40px; }
        .p-sm { padding: 8px; } .p-md { padding: 15px; } .p-lg { padding: 20px; } .p-xl { padding: 40px; }
        .mb-sm { margin-bottom: 10px; } .mb-md { margin-bottom: 15px; } .mb-lg { margin-bottom: 20px; }
        .mt-sm { margin-top: 10px; } .mt-md { margin-top: 15px; } .mt-lg { margin-top: 20px; }
        .mx-lg { margin-left: 20px; margin-right: 20px; }
        
        /* Typography utilities */
        .text-center { text-align: center; } .text-left { text-align: left; }
        /* Typography utilities with rem units for predictable sizing */
        .text-sm { font-size: 0.9rem; } .text-base { font-size: 1rem; } .text-lg { font-size: 1.2rem; } 
        .text-xl { font-size: 1.6rem; } .text-2xl { font-size: 1.8rem; } .text-4xl { font-size: 4rem; }
        .font-normal { font-weight: normal; } .font-semibold { font-weight: var(--font-weight-semibold); }
        .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); }
        .text-warning { color: var(--warning-text); }
        .line-height-relaxed { line-height: 1.5; } .line-height-loose { line-height: 1.6; }
        
        /* Width and sizing utilities */
        .w-full { width: 100%; } .max-w-sm { max-width: var(--max-width-sm); }
        
        /* Message utilities */
        .message-base { padding: 15px; border-radius: var(--border-radius); margin-bottom: 20px; 
                        font-weight: var(--font-weight-semibold); text-align: center; }
        .message-success { background: var(--notification-success-bg); color: var(--success-color); }
        .message-error { background: var(--notification-error-bg); color: var(--error-color); }
        .message-warning { background: var(--notification-warning-bg); color: var(--warning-text); }
        .message-info { background: var(--notification-info-bg); color: var(--info-color); }
        
        /* Input utilities */
        .input-pin { padding: 15px; border: 2px solid var(--border-color); border-radius: var(--border-radius);
                     font-size: 18px; text-align: center; letter-spacing: 3px; font-family: monospace;
                     background: var(--bg-input); color: var(--text-primary); }
        
        /* Box shadow utilities */
        .shadow-lg { box-shadow: var(--shadow-lg); }
        
        /* ARIA: Screen reader only content */
        .visually-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
        
        /*
         * ================================
         * VOICE NOTE COMPONENT SYSTEM
         * ================================
         * A self-contained component for displaying and managing voice recordings.
         * Ready for modularization into _voice-notes.scss
         *
         * Component Structure:
         * - .voice-note-container: Main flexbox wrapper with hover states
         * - .voice-note-info:      Left side containing title and metadata (flex-grow)
         * - .voice-note-controls:  Right side containing action buttons (play, delete, etc.)
         * - .delete-pending:       Modifier class applied via JavaScript during deletion confirmation
         *
         * Layout Strategy:
         * - Responsive flexbox design that adapts from horizontal to stacked on mobile
         * - Controls section maintains minimum width to prevent button squashing
         * - Info section grows to fill available space for long titles
         */
        .voice-note-container { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; 
                                background: var(--bg-secondary); border: 2px solid var(--border-color); 
                                border-radius: var(--border-radius); padding: 15px; margin-bottom: 15px; 
                                transition: var(--transition); }
        .voice-note-container:hover { border-color: var(--border-hover); box-shadow: var(--shadow-md); }
        /* Applied via JavaScript during deletion confirmation - provides visual feedback */
        .voice-note-container.delete-pending { background: var(--notification-warning-bg); 
                                               border-color: var(--warning-color); }
        
        /* Flex-grow item for the title and date - expands to fill available space */
        .voice-note-info { flex: 1; min-width: 200px; }
        .voice-note-title { font-weight: var(--font-weight-semibold); color: var(--text-primary); 
                            margin-bottom: 4px; }
        .voice-note-meta { color: var(--text-secondary); font-size: 14px; }
        /* Flex item for the group of buttons (play, download, delete) - maintains minimum width */
        .voice-note-controls { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; 
                               min-width: 300px; justify-content: flex-start; flex: 1; width: 100%; }
        
        /* Voice button base styling */
        .voice-btn-base { padding: 6px 12px; border: none; border-radius: 6px; font-size: 12px; 
                          font-weight: var(--font-weight-semibold); cursor: pointer; transition: var(--transition); 
                          display: flex; align-items: center; gap: 4px; }
        
        /* === STATS TAB SYSTEM === */
        #statsContainer {
            min-height: 1200px; /* Prevents layout jump on first load */
        }

        .stats-tabs {
            display: flex;
            background: var(--bg-secondary);
            border: 2px solid var(--border-color);
            border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
            margin: 0;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        .stats-tab {
            background: transparent;
            border: none;
            padding: 15px 20px;
            font-weight: var(--font-weight-semibold);
            color: var(--text-secondary);
            cursor: pointer;
            transition: var(--transition);
            white-space: nowrap;
            flex-shrink: 0;
            font-size: 14px;
        }
        
        .stats-tab:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
        }
        
        .stats-tab.active {
            background: var(--primary-color);
            color: var(--text-inverse);
        }
        
        .stats-tab-content {
            background: var(--bg-primary);
            border: 2px solid var(--border-color);
            border-top: none;
            border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
            padding: 20px;
            min-height: 800px; /* Prevents layout jump when switching between tabs with different content heights */
        }
        
        .stats-tab-panel {
            width: 100%;
        }

        .word-cloud {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 15px;
            padding: 20px;
        }
        .word-cloud-item {
            display: inline-block;
            font-weight: 600;
            transition: transform 0.2s ease;
            cursor: default;
        }
        .word-cloud-item:hover {
            transform: scale(1.1);
        }
        
        /* Voice button variants */
        .voice-btn-play { background: var(--info-color); color: var(--text-inverse); }
        .voice-btn-play:hover { background: var(--info-hover); }
        .voice-btn-pause { background: var(--warning-color); color: var(--text-inverse); }
        .voice-btn-pause:hover { background: var(--warning-hover); }
        .voice-btn-download { background: var(--success-color); color: var(--text-inverse); }
        .voice-btn-download:hover { background: var(--success-hover); }
        .voice-btn-delete { background: var(--error-color); color: var(--text-inverse); }
        .voice-btn-delete:hover { background: var(--error-hover); }
        
        /* Voice progress container */
        .voice-progress-container { flex: 1; min-width: 200px; display: flex; align-items: center; 
                                    gap: 8px; margin: 0 15px; flex-basis: 100%; }
        .voice-time-display { font-family: monospace; font-size: 12px; color: var(--text-secondary); 
                              min-width: 80px; text-align: center; }
        
        /* Voice warning messages */
        .voice-full-warning { background: var(--notification-error-bg); color: var(--error-color); 
                              padding: 12px; border-radius: var(--border-radius); 
                              border: 2px solid var(--error-color); margin-bottom: 15px; 
                              font-weight: var(--font-weight-semibold); text-align: center; }
        .no-voice-notes { text-align: center; color: var(--text-secondary); font-style: italic; 
                          padding: 30px; background: var(--bg-light); border: var(--border-dashed); 
                          border-radius: var(--border-radius); }
        
        /* === DREAM ENTRY UTILITIES === */
        /* Dream entry emotion display */
        .entry-emotions { margin-top: 8px; color: var(--text-secondary); font-size: 0.9rem; overflow-wrap: anywhere; }
        .entry-emotions span { font-weight: var(--font-weight-semibold); }
        
        /* === FINAL OPTIMIZATION UTILITIES === */
        /* Pagination and info display */
        .pagination-info { text-align: center; padding: 20px; color: var(--text-secondary); }
        
        /* Small text utilities */
        .text-xs { font-size: 0.75rem; } .text-xxs { font-size: 0.55rem; }
        .small-helper { color: var(--text-secondary); font-size: 0.9rem; margin-top: 5px; display: block; }
        .small-helper-warning { color: var(--warning-color); font-size: 0.9rem; margin-top: 5px; display: block; }
        
        /* Form utilities */
        .form-checkbox { width: 16px; height: 16px; accent-color: var(--primary-color); }
        .form-label-inline { font-size: 14px; font-weight: var(--font-weight-semibold); cursor: pointer; }
        
        /* Footer and structural elements */
        .app-footer { background: var(--bg-light); border: 2px solid var(--border-dark-l);
                      padding: 20px; margin-top: 4px; text-align: center;
                      color: var(--text-secondary); font-size: 14px;
                      border-top-left-radius: 0;
                      border-top-right-radius: 0;
                      border-bottom-left-radius: var(--border-radius); 
                      border-bottom-right-radius: var(--border-radius); }
        .app-footer p { margin: 0; font-size: 12px; }
        
        /* Feedback and autocomplete */
        .feedback-container { border-radius: var(--border-radius); display: none; }
        .autocomplete-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border-light); font-size: 14px; }
        
        /* === TAB CONTENT UTILITIES === */
        /* Progress bars */
        .progress-bar { background: var(--border-color); height: 8px; border-radius: 4px; overflow: hidden; }
        .progress-fill { background: var(--success-color); height: 100%; transition: width 0.3s; }
        .progress-success { background: var(--success-color); }
        .progress-primary { background: var(--primary-color); }
        
        /* Status indicators */
        .status-success { color: var(--success-color); font-weight: var(--font-weight-semibold); }
        .status-warning { color: var(--warning-text); font-weight: var(--font-weight-semibold); }
        .status-primary { color: var(--primary-color); font-weight: var(--font-weight-semibold); }
        .status-info { color: var(--info-color); font-weight: var(--font-weight-semibold); }
        
        /* Icon containers */
        .icon-lg { font-size: 2rem; margin-bottom: 10px; }
        .icon-xl { font-size: 2.5rem; margin-bottom: 10px; }
        
        /* Feature sections */
        .feature-item { background: var(--bg-light); padding: 15px; border-radius: var(--border-radius); 
                        display: flex; align-items: center; gap: 15px; }
        .feature-list { display: grid; gap: 15px; }
        
        /* Border accents */
        .border-l-primary { border-left: 4px solid var(--primary-color); }
        .border-l-success { border-left: 4px solid var(--success-color); }
        .border-l-warning { border-left: 4px solid var(--warning-color); }
        .border-l-info { border-left: 4px solid var(--info-color); }
        
        /* Layout grids */
        .grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
        .grid-1 { display: grid; grid-template-columns: 1fr; gap: 15px; }
        
        /* Progress display */
        .progress-display { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
        
        /* Content sections */
        .content-highlight { background: linear-gradient(135deg, var(--bg-elevated), var(--bg-secondary)); }
        
        /* Day counters */
        .day-counter { color: var(--primary-color); font-weight: var(--font-weight-semibold); }
        
        /* === DARK THEME - ONLY LIGHTNESS OVERRIDES === */
        [data-theme='dark'] {
            /* Backgrounds - dark */
            --bg-primary-l: 5%;        --bg-secondary-l: 11%;
            --bg-elevated-l: 20%;      --bg-input-l: 11%;
            --bg-hover-l: 20%;         --bg-subtle-l: 28%;
            --bg-light-l: 11%;         --bg-disabled-l: 5%;
            --bg-selected-l: 20%;
            
            /* Text - light */
            --text-primary-l: 98%;     --text-secondary-l: 83%;
            --text-tertiary-l: 68%;    --text-muted-l: 52%;
            --text-inverse-l: 5%;      --text-disabled-l: 52%;
            
            /* Borders - lighter */
            --border-light-l: 20%;     --border-color-l: 28%;
            --border-dark-l: 52%;      --border-hover-l: 59%;
            
            /* Semantic colors - adjusted for dark backgrounds */
            --primary-l: 70%;          --primary-hover-l: 53%;
            --primary-solid-l: 62%;    /* Darker than --primary-l so white button text reaches 4.5:1 */
            --success-l: 70%;          --success-hover-l: 30%;
            --error-l: 72%;            --error-hover-l: 51%;
            --warning-l: 71%;          --warning-hover-l: 65%;
            --warning-text-l: 71%;
            --info-l: 67%;             --info-hover-l: 61%;
            --secondary-l: 68%;        --secondary-hover-l: 83%;
            
            /* Component adjustments */
            --shadow-opacity: 0.3;     --modal-backdrop-opacity: 0.95;
            --voice-bg-l: 20%;         --voice-border-l: 67%;       --voice-text-l: 74%;
            --tag-bg-l: 20%;           --tag-text-l: 74%;           --tag-border-l: 67%;
            --dream-sign-bg-l: 15%;    --dream-sign-text-l: 81%;    --dream-sign-border-l: 35%;
            --notification-error-l: 20%;   --notification-success-l: 15%;
            --notification-warning-l: 15%; --notification-info-l: 20%;
            
            /* Dark theme specific warning colors for voice status */
            --dark-voice-warning-bg-l: 12%;
            --dark-voice-warning-text-l: 82%;
            --dark-voice-warning-border-l: 35%;
            
            /* Dark theme lucid dream gradient colors */
            --dark-lucid-bg-l: 8%;
            --dark-lucid-hover-bg-l: 13%;
            
            /* Dark theme gradients - Theme-aware lucid highlighting with deeper green tones */
            --dark-lucid-gradient: linear-gradient(135deg, hsl(var(--success-h), var(--success-s), var(--dark-lucid-bg-l)), var(--bg-secondary));
            --dark-lucid-hover-gradient: linear-gradient(135deg, hsl(var(--success-h), var(--success-s), var(--dark-lucid-hover-bg-l)), var(--bg-secondary));
            --dark-nav-btn-gradient: linear-gradient(145deg, hsl(var(--gray-h), 16%, 25%), hsl(var(--gray-h), 12%, 35%));
            --dark-nav-btn-hover-gradient: linear-gradient(145deg, hsl(var(--gray-h), 12%, 35%), hsl(var(--gray-h), 9%, 45%));
            
            /* Special dark theme hue adjustments */
            --warning-h: 45;  /* Warmer yellow in dark mode */
        }
        
        /* === GENERATED COLOR SYSTEM === */
        :root,
        [data-theme='light'],
        [data-theme='dark'] {
            /* Core Theme Colors */
            --primary-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
            --primary-hover: hsl(var(--primary-h), var(--primary-s), var(--primary-hover-l));
            --primary-solid: hsl(var(--primary-h), var(--primary-s), var(--primary-solid-l));
            --secondary-color: hsl(var(--slate-h), var(--slate-s), var(--secondary-l));
            --secondary-hover: hsl(var(--slate-h), var(--slate-s), var(--secondary-hover-l));
            --success-color: hsl(var(--success-h), var(--success-s), var(--success-l));
            --success-hover: hsl(var(--success-h), var(--success-s), var(--success-hover-l));
            --error-color: hsl(var(--error-h), var(--error-s), var(--error-l));
            --error-hover: hsl(var(--error-h), var(--error-s), var(--error-hover-l));
            --warning-color: hsl(var(--warning-h), var(--warning-s), var(--warning-l));
            --warning-hover: hsl(var(--warning-h), var(--warning-s), var(--warning-hover-l));
            --warning-text: hsl(var(--warning-h), var(--warning-s), var(--warning-text-l));
            --info-color: hsl(var(--info-h), var(--info-s), var(--info-l));
            --info-hover: hsl(var(--info-h), var(--info-s), var(--info-hover-l));
            
            /* Background Hierarchy */
            --bg-primary: hsl(var(--neutral-h), var(--neutral-s), var(--bg-primary-l));
            --bg-secondary: hsl(var(--neutral-h), var(--neutral-s), var(--bg-secondary-l));
            --bg-elevated: hsl(var(--gray-h), var(--gray-s), var(--bg-elevated-l));
            --bg-input: hsl(var(--neutral-h), var(--neutral-s), var(--bg-input-l));
            --bg-hover: hsl(var(--gray-h), var(--gray-s), var(--bg-hover-l));
            --bg-subtle: hsl(var(--slate-h), var(--slate-s), var(--bg-subtle-l));
            --bg-light: hsl(var(--gray-h), var(--gray-s), var(--bg-light-l));
            --bg-disabled: hsl(var(--gray-h), var(--gray-s), var(--bg-disabled-l));
            --bg-selected: hsl(var(--info-h), var(--info-s), var(--bg-selected-l));
            
            /* Text Hierarchy */
            --text-primary: hsl(var(--neutral-h), var(--neutral-s), var(--text-primary-l));
            --text-secondary: hsl(var(--slate-h), var(--slate-s), var(--text-secondary-l));
            --text-tertiary: hsl(var(--gray-h), var(--gray-s), var(--text-tertiary-l));
            --text-muted: hsl(var(--gray-h), var(--gray-s), var(--text-muted-l));
            --text-inverse: hsl(var(--neutral-h), var(--neutral-s), var(--text-inverse-l));
            --text-disabled: hsl(var(--gray-h), var(--gray-s), var(--text-disabled-l));
            
            /* Border System */
            --border-light: hsl(var(--slate-h), var(--slate-s), var(--border-light-l));
            --border-color: hsl(var(--slate-h), var(--slate-s), var(--border-color-l));
            --border-dark: hsl(var(--slate-h), var(--slate-s), var(--border-dark-l));
            --border-hover: hsl(var(--primary-h), var(--primary-s), var(--border-hover-l));
            --border-focus: var(--primary-color);
            
            /* Shadow System - Mathematical opacity scaling for visual hierarchy */
            --shadow-color: rgba(0, 0, 0, var(--shadow-opacity));
            --shadow-color-light: rgba(0, 0, 0, calc(var(--shadow-opacity) * 0.5)); /* Subtle shadows for light elements */
            --shadow-color-dark: rgba(0, 0, 0, calc(var(--shadow-opacity) * 1.5));  /* Pronounced shadows for emphasis */
            
            /* Component Specific */
            --modal-backdrop: rgba(0, 0, 0, var(--modal-backdrop-opacity));
            --gradient-primary: linear-gradient(135deg, var(--primary-color), hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 10%))); /* Creates subtle depth by darkening the end color by 10% */
            --border-dashed: 2px dashed var(--border-dark);
            
            /* Voice Component Colors */
            --voice-bg-primary: hsl(var(--info-h), var(--info-s), var(--voice-bg-l));
            --voice-border: hsl(var(--info-h), var(--info-s), var(--voice-border-l));
            --voice-text: hsl(var(--info-h), var(--info-s), var(--voice-text-l));
            
            /* Tag & Component Colors */
            --tag-bg: hsl(var(--info-h), var(--info-s), var(--tag-bg-l));
            --tag-text: hsl(var(--info-h), var(--info-s), var(--tag-text-l));
            --tag-border: hsl(var(--info-h), var(--info-s), var(--tag-border-l));
            --dream-sign-bg: hsl(var(--warning-h), var(--warning-s), var(--dream-sign-bg-l));
            --dream-sign-text: hsl(var(--warning-h), var(--warning-s), var(--dream-sign-text-l));
            --dream-sign-border: hsl(var(--warning-h), var(--warning-s), var(--dream-sign-border-l));
            
            /* Interactive States */
            --input-focus-ring: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.2);
            --selection-bg: var(--primary-color);
            --selection-text: var(--text-inverse);
            
            /* Notification Backgrounds */
            --notification-error-bg: hsl(var(--error-h), var(--error-s), var(--notification-error-l));
            --notification-success-bg: hsl(var(--success-h), var(--success-s), var(--notification-success-l));
            --notification-warning-bg: hsl(var(--warning-h), var(--warning-s), var(--notification-warning-l));
            --notification-info-bg: hsl(var(--info-h), var(--info-s), var(--notification-info-l));
            
            /* Dark theme voice warning colors */
            --dark-voice-warning-bg: hsl(var(--warning-h), var(--warning-s), var(--dark-voice-warning-bg-l));
            --dark-voice-warning-text: hsl(var(--warning-h), var(--warning-s), var(--dark-voice-warning-text-l));
            --dark-voice-warning-border: hsl(var(--warning-h), var(--warning-s), var(--dark-voice-warning-border-l));
        }
        
        /* Shadow definitions using the optimized theme system */
        :root,
        [data-theme='light'],
        [data-theme='dark'] {
            --shadow-sm: 0 1px 2px var(--shadow-color);
            --shadow-md: 0 4px 6px var(--shadow-color);
            --shadow-lg: 0 10px 25px var(--shadow-color);
            --shadow-xl: 0 20px 60px var(--shadow-color-dark);
            
            /* Theme-aware colored shadows */
            --shadow-primary: 0 4px 12px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.1);
            --shadow-success-light: 0 4px 12px hsla(var(--success-h), var(--success-s), var(--success-l), 0.2);
            --shadow-success-dark: 0 4px 12px hsla(var(--success-h), var(--success-s), var(--success-l), 0.3);
            --shadow-border-hover: 0 2px 8px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.1);
        }
        
        /* Extra Small Mobile Screens */
        @media (max-width: 480px) {
            body {
                padding: 2px;
            }
            
            .container {
                border-radius: 0;
                margin: 0;
            }
            
            .header {
                padding: 15px 10px;
            }
            
            .main-content,
            .tab-panel:not(#journalTab) {
                padding: 10px;
            }
            
            .controls {
                padding: 10px;
            }
            
            .entry-form,
            .settings-section {
                padding: 15px 10px;
            }
            
            .stats-card {
                padding: 15px 10px;
            }
            
            .voice-tab-content {
                padding: 10px;
            }
            
            /* Keep date filters inline on very small screens */
            .date-filter-group {
                grid-template-columns: auto 1fr !important;
                grid-template-rows: auto auto !important;
                gap: 6px !important;
            }

            .date-filter-group label:nth-child(3) {
                grid-column: 1;
                grid-row: 2;
            }

            .date-filter-group input:nth-child(4) {
                grid-column: 2;
                grid-row: 2;
            }
        }
        


        
        body {
            margin: 0;
            padding: clamp(20px, 5vw, 60px);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: var(--bg-subtle);
            color: var(--text-primary);
            transition: background-color 0.3s ease, color 0.3s ease;
            min-height: 100vh;
        }
        
        /* BASE STYLES & LAYOUT COMPONENTS */
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        /* Smooth theme transitions for all elements */
        *,
        *::before,
        *::after {
            transition: background-color 0.3s ease, 
                       color 0.3s ease, 
                       border-color 0.3s ease, 
                       box-shadow 0.3s ease;
        }
        
        /* Preserve faster transitions for interactive elements */
        button,
        .btn,
        input,
        select,
        textarea {
            transition: background-color 0.3s ease, 
                       color 0.3s ease, 
                       border-color 0.3s ease, 
                       box-shadow 0.3s ease,
                       transform 0.2s ease;
        }

        /* Reduced motion: no colour, shadow or transform transitions (a theme switch changes colours at once) */
        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                transition: none !important;
            }
        }

        .autocomplete-item {
            padding: 8px 12px;
            cursor: pointer;
            border-bottom: 1px solid var(--border-light);
            font-size: 14px;
            transition: background-color 0.2s;
        }
        .autocomplete-item:hover {
            background-color: var(--bg-hover);
        }
        .autocomplete-item:last-child {
            border-bottom: none;
        }
        
        /* Loading States - Applied via JavaScript during async operations */
        .loading-state, .search-loading, .loading-dreams {
            padding: 20px;
            text-align: center;
            color: var(--text-secondary);
            font-style: italic;
            background: var(--bg-light);
            border-radius: var(--border-radius);
            margin: 10px 0;
        }
        
        .loading-state.large, .loading-dreams {
            padding: 40px;
            font-style: normal;
        }
        .loading-state.large div:first-child, .loading-dreams div:first-child {
            font-size: 2em;
            margin-bottom: 10px;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: var(--bg-primary);
            border-radius: var(--border-radius-xl);
            box-shadow: var(--shadow-lg);
            overflow: hidden;
            width: 100%;
            box-sizing: border-box;
            padding-bottom: 0;
        }
        
        .search-loading {
            padding: 20px;
            text-align: center;
            color: var(--text-secondary);
            font-style: italic;
            background: var(--bg-light);
            border-radius: var(--border-radius);
            margin: 10px 0;
        }
        
        .loading-dreams {
            padding: 40px;
            text-align: center;
            color: var(--text-secondary);
        }
        .loading-dreams div:first-child {
            font-size: 2em;
            margin-bottom: 10px;
        }
        .header {
            background: var(--gradient-primary);
            color: var(--text-inverse);
            padding: 30px;
            text-align: center;
        }
        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            font-weight: 300;
        }
        .header p {
            opacity: 0.9;
            font-size: 1.1rem;
        }
        .controls {
            padding: 20px;
            background: var(--bg-light);
            border: 2px solid var(--border-color);
            border-radius: var(--border-radius);
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        .control-row-break {
            flex-basis: 100%;
            height: 0;
        }

        /* Search and Filter Section */
        .search-filter-section {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 15px;
            background: var(--bg-surface);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
        }

        .section-header {
            margin: 0 0 8px 0;
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
            opacity: 0.8;
        }

        .section-header-with-action {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }

        .section-header-with-action .section-header {
            margin: 0;
        }

        .search-filter-group {
            display: flex;
            gap: 10px;
            flex: 1;
            min-width: 0;
        }

        .filter-group {
            display: flex;
            gap: 10px;
            flex: 1;
            min-width: 0;
        }

        .date-filter-group {
            display: grid;
            grid-template-columns: auto 1fr auto 1fr;
            gap: 10px;
            align-items: center;
        }

        /* Display and Sort Section */
        .display-sort-section {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 15px;
            background: var(--bg-surface);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
        }

        .display-sort-group {
            display: flex;
            gap: 10px;
            align-items: center;
            justify-content: flex-start;
        }
        .export-import-controls {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 15px;
            flex-wrap: wrap;
        }
        .ai-export-control {
            margin-left: auto;
        }
        
        /* Hide file input completely */
        .file-input,
        input[type="file"].file-input,
        #importFile,
        #importAllDataFile {
            display: none !important;
            visibility: hidden !important;
            position: absolute !important;
            left: -9999px !important;
        }
        .search-box {
            flex: 2;
            min-width: 150px;
            padding: 12px 15px;
            border: 2px solid var(--border-color);
            border-radius: 8px;
            font-size: 16px;
            background: var(--bg-input);
            color: var(--text-primary);
            transition: border-color 0.3s;
        }
        .filter-select {
            flex: 1;
            min-width: 90px;
            padding: 12px 15px;
            border: 2px solid var(--border-color);
            border-radius: var(--border-radius);
            font-size: 16px;
            background: var(--bg-input);
            color: var(--text-primary);
            cursor: pointer;
            transition: border-color 0.3s;
        }
        .filter-select:focus,
        .search-box:focus {
            outline: none;
            border-color: var(--border-focus);
        }
        /* Button System */
        .btn {
            padding: 12px 20px;
            border: none;
            border-radius: var(--border-radius);
            font-size: 14px;
            font-weight: var(--font-weight-semibold);
            cursor: pointer;
            transition: var(--transition);
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }
        
        .btn-small {
            padding: 6px 12px;
            font-size: 12px;
            border-radius: 6px;
        }
        
        /* Button Colors - Combined selectors */
        .btn-primary, .btn-success {
            color: white;
        }
        
        .btn-primary {
            background: var(--primary-solid);
        }
        .btn-primary:hover {
            background: var(--primary-hover);
            transform: translateY(-2px);
        }
        
        .btn-secondary {
            background: var(--secondary-color);
            color: var(--text-primary);
        }
        .btn-secondary:hover {
            background: var(--secondary-hover);
        }
        
        /* Dark theme specific button hover fixes */
        /* Dark theme button compatibility */
        [data-theme='dark'] .btn-secondary {
            color: var(--text-inverse);
        }
        [data-theme='dark'] .btn-secondary:hover {
            background: var(--secondary-hover);
        }
        
        .btn-success {
            background: var(--success-color);
            color: var(--text-inverse);
        }
        .btn-success:hover {
            background: var(--success-hover);
            color: var(--text-inverse);
        }
        
        .btn-edit {
            background: var(--info-color);
            color: var(--text-inverse);
        }
        .btn-edit:hover {
            background: var(--info-hover);
        }
        
        .btn-delete {
            background: var(--error-color);
            color: var(--text-inverse);
        }
        .btn-delete:hover {
            background: var(--error-hover);
        }
        
        .btn-confirm-delete {
            background: var(--error-hover);
            color: var(--text-inverse);
            animation: pulse 0.5s ease-in-out;
        }
        .btn-confirm-delete:hover {
            background: hsl(var(--error-h), var(--error-s), calc(var(--error-hover-l) - 10%)); /* Extra darkening on hover for danger emphasis */
        }
        
        .btn-lock {
            background: var(--text-tertiary);
            color: var(--text-inverse);
            padding: 8px 12px;
            font-size: 12px;
        }
        .btn-lock:hover {
            background: var(--text-secondary);
        }
        
        /* Loading States - Consolidated */
        .loading-state {
            padding: 20px;
            text-align: center;
            color: var(--text-secondary);
            font-style: italic;
            background: var(--bg-light);
            border-radius: var(--border-radius);
            margin: 10px 0;
        }
        
        .loading-state.large {
            padding: 40px;
            font-style: normal;
        }
        .loading-state.large div:first-child {
            font-size: 2em;
            margin-bottom: 10px;
        }
        
        /* Notification Messages - Consolidated */
        .notification-message {
            font-size: 14px;
            margin-top: 10px;
            padding: 10px;
            border-radius: var(--border-radius);
            display: none;
            font-weight: var(--font-weight-semibold);
        }
        .notification-message.error {
            color: var(--error-color);
            background: var(--notification-error-bg);
        }
        .notification-message.success {
            color: var(--success-color);
            background: var(--notification-success-bg);
        }
        .notification-message.info {
            color: var(--info-color);
            background: var(--notification-info-bg);
        }
        .notification-message.warning {
            color: var(--warning-text);
            background: var(--notification-warning-bg);
        }
        
        /* FORM COMPONENTS & INTERACTIVE ELEMENTS */
        
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: var(--font-weight-semibold);
            color: var(--text-primary);
        }
        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid var(--border-color);
            border-radius: var(--border-radius);
            font-size: 16px;
            transition: border-color 0.3s;
            font-family: inherit;
            background: var(--bg-input);
            color: var(--text-primary);
        }
        .form-control:focus {
            outline: none;
            border-color: var(--border-focus);
        }
        /* Keyboard shortcut hints are hidden on devices whose main input is touch */
        @media (pointer: coarse) {
            .keyboard-hint {
                display: none;
            }
        }
        
        .form-control::placeholder,
        .search-box::placeholder {
            color: var(--text-tertiary);
            opacity: 1;
        }
        textarea.form-control {
            min-height: 120px; /* Provides adequate space for dream descriptions - roughly 4-5 lines of text */
            resize: vertical;
        }
        .lucid-checkbox {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 20px;
        }
        .lucid-checkbox input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: var(--primary-color);
        }
        .lucid-checkbox label {
            margin: 0;
            font-weight: var(--font-weight-semibold);
            color: var(--text-primary);
            cursor: pointer;
        }
        .dreams-section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 15px;
        }
        .dreams-section-header h2 {
            margin: 0;
            color: var(--text-primary);
            font-size: 1.3em;
        }
        .dreams-controls {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
        }

        .export-range-container {
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: flex-start;
        }

        .export-format-option {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 4px;
        }

        .export-format-checkbox {
            margin: 0;
        }

        .export-format-label {
            margin: 0;
            font-size: 0.9em;
            color: var(--text-secondary);
            cursor: pointer;
            user-select: none;
        }

        .export-format-label:hover {
            color: var(--text-primary);
        }

        .info-icon {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 1em;
            padding: 2px 4px;
            border-radius: 50%;
            transition: background-color 0.2s ease;
            margin-left: 4px;
        }

        /* Position search info icon on the right side of search container */
        .search-filter-group .info-icon {
            margin-left: auto;
        }

        .info-icon:hover {
            background-color: var(--background-secondary);
        }

        .info-icon:focus {
            outline: 2px solid var(--primary-color);
            outline-offset: 2px;
        }

        .export-info-tooltip {
            position: fixed;
            background: var(--background-primary);
            border: 2px solid var(--border-color);
            border-radius: var(--border-radius);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
            padding: 0;
            max-width: 400px;
            min-width: 320px;
            max-height: calc(100vh - 20px);
            overflow-y: auto;
            z-index: 1000;
            font-size: 0.9em;
            opacity: 1;
            background-color: var(--background-primary);
            backdrop-filter: blur(100px);
        }

        @media (max-width: 480px) {
            .export-info-tooltip {
                max-width: calc(100vw - 20px);
                min-width: calc(100vw - 20px);
                max-height: calc(100vh - 40px);
                /* Let JavaScript handle horizontal positioning */
                /* Let JavaScript handle all positioning */
            }
        }

        @media (max-height: 600px) {
            .export-info-tooltip {
                max-height: calc(100vh - 40px);
                font-size: 0.85em;
            }

            .tooltip-content {
                padding: 12px;
            }

            .emotion-categories,
            .tag-categories,
            .dream-signs-categories {
                gap: 6px;
                margin: 8px 0;
            }

            .emotion-group,
            .tag-group,
            .signs-group {
                padding: 6px;
            }
        }

        .tooltip-content {
            padding: 16px;
            background: var(--background-primary);
            color: var(--text-primary);
        }

        .tooltip-content h4 {
            margin: 0 0 12px 0;
            color: var(--text-primary);
            font-size: 1.1em;
            font-weight: 600;
        }

        .tooltip-body {
            margin-bottom: 16px;
        }

        .format-explanation {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .format-option {
            padding: 12px;
            border-radius: var(--border-radius);
            background: var(--background-secondary);
            border: 1px solid var(--border-color);
        }

        .format-option strong {
            display: block;
            color: var(--primary-color);
            margin-bottom: 6px;
            font-weight: 600;
        }

        .format-option p {
            margin: 0;
            color: var(--text-primary);
            font-size: 0.9em;
            line-height: 1.5;
        }

        .tooltip-footer {
            display: flex;
            justify-content: center;
            padding: 12px 0 0 0;
            border-top: 1px solid var(--border-color);
            background: var(--background-primary);
        }

        /* Ensure tooltip is fully opaque and visible */
        .export-info-tooltip * {
            opacity: 1 !important;
        }

        .form-label-with-info {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 8px;
        }

        .form-label-with-info label {
            margin: 0;
            flex: 1;
        }

        /* Form help tooltip specific styling */
        .help-content {
            line-height: 1.5;
        }

        .emotion-categories,
        .tag-categories,
        .dream-signs-categories {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin: 12px 0;
        }

        .emotion-group,
        .tag-group,
        .signs-group {
            padding: 8px;
            background: var(--background-secondary);
            border-radius: 4px;
            border-left: 3px solid var(--primary-color);
        }

        .emotion-group strong,
        .tag-group strong,
        .signs-group strong {
            color: var(--primary-color);
            display: block;
            margin-bottom: 4px;
        }
        
        .autocomplete-management-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            max-height: 250px;
            overflow-y: auto;
            border: 2px solid var(--border-color);
            border-radius: var(--border-radius);
            padding: 10px;
            margin-top: 15px;
            background: var(--bg-light);
        }

        .autocomplete-list-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 12px;
            background: var(--bg-secondary);
            border-radius: 6px;
            font-size: 14px;
            border: 1px solid var(--border-light);
        }

        .autocomplete-list-item.default .item-value {
            color: var(--text-secondary);
            font-style: italic;
        }

        .autocomplete-list-item .item-type {
            font-size: 11px;
            font-weight: 600;
            padding: 2px 6px;
            border-radius: 10px;
            background: var(--bg-input);
            color: var(--text-tertiary);
            text-transform: uppercase;
            margin-left: 10px;
        }
        .entries-section {
            margin-top: 24px;
            margin-bottom: 24px;
        }
        .entries-section h3 {
            margin-bottom: 20px;
            color: var(--text-primary);
            font-size: 1.3em;
        }
        .entry {
            background: var(--bg-secondary);
            border: 2px solid var(--border-color);
            border-radius: var(--border-radius-lg);
            padding: 20px;
            margin-bottom: 20px;
            transition: var(--transition);
        }
        .entry:hover {
            border-color: var(--border-hover);
            box-shadow: var(--shadow-primary);
        }
        /* Light Theme Lucid Dreams */
        :root .entry.lucid,
        [data-theme='light'] .entry.lucid {
            border-color: var(--success-color);
            background: var(--light-lucid-gradient);
            position: relative;
        }
        
        /* Dark Theme Lucid Dreams - Higher specificity approach */
        html[data-theme='dark'] .entry.lucid {
            border-color: var(--success-color);
            background: var(--dark-lucid-gradient);
            position: relative;
        }
        
        .entry.lucid::before {
            content: "✨ LUCID";
            position: absolute;
            top: -10px;
            right: 20px;
            background: var(--success-color);
            color: var(--text-inverse);
            padding: 4px 12px;
            border-radius: var(--border-radius-lg);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.5px;
        }
        
        /* Light Theme Lucid Hover */
        :root .entry.lucid:hover,
        [data-theme='light'] .entry.lucid:hover {
            border-color: var(--success-hover);
            box-shadow: var(--shadow-success-light);
        }
        
        /* This selector needs high specificity to override base styles
           for lucid dream entries ONLY when in dark mode */
        html[data-theme='dark'] .entry.lucid:hover {
            border-color: var(--success-hover);
            box-shadow: var(--shadow-success-dark);
            background: var(--dark-lucid-hover-gradient);
        }
        .entry-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            flex-wrap: wrap;
            gap: 10px;
        }
        .entry-title {
            font-size: 1.2rem;
            font-weight: var(--font-weight-semibold);
            color: var(--text-primary);
            flex: 1;
            min-width: 0;
            overflow-wrap: anywhere;
        }
        .entry-meta {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        .entry-date {
            color: var(--text-secondary);
            font-size: 0.9em;
            font-weight: var(--font-weight-medium);
        }
        .entry-actions {
            display: flex;
            gap: 5px;
        }
        .btn-small {
            padding: 6px 12px;
            font-size: 12px;
            border-radius: 6px;
        }
        .btn-edit {
            background: var(--info-color);
            color: var(--text-inverse);
        }
        .btn-edit:hover {
            background: var(--info-hover);
        }
        .btn-delete {
            background: var(--error-color);
            color: var(--text-inverse);
        }
        .btn-delete:hover {
            background: var(--error-hover);
        }
        .btn-confirm-delete {
            background: var(--error-hover);
            color: var(--text-inverse);
            animation: pulse 0.5s ease-in-out;
        }
        .btn-confirm-delete:hover {
            background: hsl(var(--error-h), var(--error-s), calc(var(--error-hover-l) - 10%)); /* Extra darkening on hover for danger emphasis */
        }
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        .entry.delete-pending {
            background: var(--notification-warning-bg);
            border-color: var(--warning-color);
        }
        /* Inline edit form styles managed by .inline-edit-form class below */
        .entry-content {
            color: var(--text-primary);
            line-height: 1.7;
            white-space: pre-wrap;
            overflow-wrap: anywhere;
        }

        .entry-form {
            background: var(--bg-light);
            padding: 25px;
            border-radius: 12px;
            margin-bottom: 30px;
            border: 2px solid var(--border-color);
        }

        .entry-form h3 {
            margin-bottom: 15px;
            color: var(--text-primary);
            font-size: 1.3em;
        }

        /* Dream form state management - both forms start hidden to prevent timing flash */
        #dreamFormCollapsed,
        #dreamFormFull {
            display: none;
        }

        .no-entries {
            text-align: center;
            color: var(--text-secondary);
            font-style: italic;
            padding: 40px;
            background: var(--bg-light);
            border-radius: var(--border-radius-lg);
            border: var(--border-dashed);
        }
        /* Pagination System */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
            padding: 30px 20px;
            margin-top: 20px;
            border-top: 1px solid var(--border-color);
            background: var(--bg-light);
            border-radius: var(--border-radius-lg);
            border: 2px solid var(--border-color);
        }
        
        .pagination-info {
            color: var(--text-secondary);
            font-size: 14px;
            font-weight: var(--font-weight-medium);
        }
        
        .pagination-btn, .page-btn {
            border: 2px solid var(--border-color);
            background: var(--bg-secondary);
            border-radius: 6px;
            font-size: 14px;
            font-weight: var(--font-weight-semibold);
            cursor: pointer;
            transition: var(--transition);
            color: var(--text-primary);
        }
        
        .pagination-btn {
            padding: 8px 16px;
        }
        
        .page-btn {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .pagination-btn:hover:not(:disabled), .page-btn:hover {
            border-color: var(--border-focus);
            color: var(--primary-color);
        }
        
        .pagination-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .pagination-ellipsis {
            display: flex;
            align-items: center;
            padding: 0 8px;
            color: var(--text-secondary);
            font-weight: var(--font-weight-semibold);
        }
        
        /* Applied via JavaScript to show current pagination page */
        .page-btn.active {
            background: var(--primary-color);
            border-color: var(--primary-color);
            color: var(--text-inverse);
        }
        
        .page-numbers {
            display: flex;
            gap: 5px;
        }
        
        .page-ellipsis {
            color: var(--text-secondary);
            font-weight: var(--font-weight-semibold);
            padding: 0 5px;
        }
        
        /* SPECIALIZED COMPONENTS (VOICE, SECURITY, MODALS) */
        
        /* Voice Recording & Tabs */
        .voice-tabs-container {
            background: var(--voice-bg-primary);
            border: 2px solid var(--voice-border);
            border-radius: var(--border-radius-lg);
            margin-bottom: 20px;
            overflow: hidden;
        }
        
        .voice-tabs {
            display: flex;
            border-bottom: 2px solid var(--voice-border);
            background: var(--bg-secondary);
        }
        
        .voice-tab {
            flex: 1;
            padding: 15px 20px;
            border: none;
            background: transparent;
            color: var(--text-secondary);
            font-weight: var(--font-weight-semibold);
            cursor: pointer;
            transition: var(--transition);
            border-bottom: 3px solid transparent;
        }
        
        .voice-tab:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
        }
        
        .voice-tab.active {
            background: var(--voice-bg-primary);
            color: var(--voice-text);
            border-bottom-color: var(--voice-text);
        }
        
        .voice-tab-content {
            padding: 20px;
        }
        
        .voice-tab-panel {
            display: block;
        }
        
        .voice-tab-panel:not(.active) {
            display: none;
        }
        
        .voice-recording-section {
            background: var(--voice-bg-primary);
            border: 2px solid var(--voice-border);
            border-radius: var(--border-radius-lg);
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .voice-recording-section h3 {
            color: var(--voice-text);
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .voice-controls {
            display: flex;
            align-items: center;
            gap: 15px;
            flex-wrap: wrap;
        }
        
        .record-btn {
            padding: 12px 20px;
            border: none;
            border-radius: 50px;
            font-size: 16px;
            font-weight: var(--font-weight-semibold);
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 140px;
            justify-content: center;
        }
        
        .record-btn.ready {
            background: var(--success-color);
            color: white;
        }
        .record-btn.ready:hover {
            background: var(--success-hover);
            transform: translateY(-2px);
        }
        
        /* Applied via JavaScript when voice recording is active */
        .record-btn.recording {
            background: var(--error-color);
            color: white;
            animation: pulse-record 1.5s ease-in-out infinite;
        }
        
        .record-btn.disabled {
            background: var(--text-muted);
            color: var(--text-tertiary);
            cursor: not-allowed;
        }
        
        .recording-timer {
            font-family: monospace;
            font-size: 18px;
            font-weight: var(--font-weight-semibold);
            color: var(--error-color);
            background: var(--notification-error-bg);
            padding: 8px 16px;
            border-radius: var(--border-radius);
            border: 2px solid var(--error-color);
        }
        
        .voice-status {
            font-size: 14px;
            padding: 8px 12px;
            border-radius: 6px;
            font-weight: var(--font-weight-semibold);
        }
        .voice-status.info {
            background: var(--notification-info-bg);
            color: var(--info-color);
        }
        .voice-status.warning {
            background: var(--notification-warning-bg);
            color: var(--warning-text);
        }
        .voice-status.error {
            background: var(--notification-error-bg);
            color: var(--error-color);
        }
        
        /* Voice Notes */
        .voice-notes-section {
            margin-top: 30px;
            padding: 25px;
            background: var(--bg-light);
            border: 2px solid var(--border-color);
            border-radius: var(--border-radius-lg);
        }
        
        .voice-notes-section h3 {
            color: var(--text-primary);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .voice-note {
            background: var(--bg-secondary);
            border: 2px solid var(--border-color);
            border-radius: var(--border-radius);
            padding: 15px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 15px;
            flex-wrap: wrap;
            transition: var(--transition);
        }
        
        .voice-note:hover {
            border-color: var(--border-hover);
            box-shadow: var(--shadow-border-hover);
        }
        
        .voice-note.delete-pending {
            background: var(--notification-warning-bg);
            border-color: var(--warning-color);
        }
        
        .voice-note-info {
            flex: 1;
            min-width: 200px;
        }
        
        .voice-note-title {
            font-weight: var(--font-weight-semibold);
            color: var(--text-primary);
            margin-bottom: 4px;
        }
        
        .voice-note-meta {
            color: var(--text-secondary);
            font-size: 14px;
        }
        
        .voice-note-controls {
            display: flex;
            gap: 8px;
            align-items: flex-start;
            flex-wrap: wrap;
            min-width: 300px;
            justify-content: flex-start;
            flex: 1;
            width: 100%;
        }
        
        .voice-btn {
            padding: 6px 12px;
            border: none;
            border-radius: 6px;
            font-size: 12px;
            font-weight: var(--font-weight-semibold);
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .voice-btn.play {
            background: var(--info-color);
            color: var(--text-inverse);
        }
        .voice-btn.play:hover {
            background: var(--info-hover);
        }
        
        .voice-btn.pause {
            background: var(--warning-color);
            color: var(--text-inverse);
        }
        .voice-btn.pause:hover {
            background: var(--warning-hover);
        }
        
        
        .voice-btn.download {
            background: var(--success-color);
            color: var(--text-inverse);
        }
        .voice-btn.download:hover {
            background: var(--success-hover);
        }
        
        .voice-btn.delete {
            background: var(--error-color);
            color: var(--text-inverse);
        }
        .voice-btn.delete:hover {
            background: var(--error-hover);
        }
        
        .voice-progress-container {
            flex: 1;
            min-width: 200px;
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 0 15px;
            flex-basis: 100%;
        }
        
        .voice-progress-bar {
            flex: 1;
            height: 6px;
            background: var(--border-color);
            border-radius: 3px;
            position: relative;
            cursor: pointer;
            transition: height 0.2s;
        }
        .voice-progress-bar:hover {
            height: 8px;
        }
        
        .voice-progress-fill {
            height: 100%;
            background: var(--primary-color);
            border-radius: 3px;
            width: 0%;
            /* Transition removed - will be controlled via JavaScript for Firefox compatibility */
        }
        
        .voice-time-display {
            font-family: monospace;
            font-size: 12px;
            color: var(--text-secondary);
            min-width: 80px;
            text-align: center;
        }
        
        .voice-full-warning {
            background: var(--notification-error-bg);
            color: var(--error-color);
            padding: 12px;
            border-radius: var(--border-radius);
            border: 2px solid var(--error-color);
            margin-bottom: 15px;
            font-weight: var(--font-weight-semibold);
            text-align: center;
        }
        
        .no-voice-notes {
            text-align: center;
            color: var(--text-secondary);
            font-style: italic;
            padding: 30px;
            background: var(--bg-light);
            border: var(--border-dashed);
            border-radius: var(--border-radius);
        }
        .pin-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--modal-backdrop);
            backdrop-filter: blur(10px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }
        .pin-container {
            background: var(--bg-elevated);
            padding: 40px;
            border-radius: var(--border-radius-xl);
            box-shadow: var(--shadow-xl);
            text-align: center;
            max-width: 400px;
            width: 90%;
        }
        .pin-container h2 {
            color: var(--text-primary);
            margin-bottom: 20px;
            font-size: 1.8em;
        }
        .pin-input {
            width: 100%;
            padding: 15px;
            border: 2px solid var(--border-color);
            border-radius: var(--border-radius);
            font-size: 18px;
            text-align: center;
            letter-spacing: 3px;
            margin-bottom: 20px;
            font-family: monospace;
            background: var(--bg-input);
            color: var(--text-primary);
        }
        .pin-input:focus {
            outline: none;
            border-color: var(--border-focus);
        }
        .pin-buttons {
            display: flex;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap;
        }
        .pin-setup-link {
            color: var(--primary-color);
            text-decoration: underline;
            cursor: pointer;
            font-size: 14px;
            margin-top: 15px;
            display: block;
        }
        .notification-message {
            font-size: 14px;
            margin-top: 10px;
            padding: 10px;
            border-radius: var(--border-radius);
            display: none;
            font-weight: var(--font-weight-semibold);
        }
        .notification-message.error {
            color: var(--error-color);
            background: var(--notification-error-bg);
        }
        .notification-message.success {
            color: var(--success-color);
            background: var(--notification-success-bg);
        }
        .notification-message.info {
            color: var(--info-color);
            background: var(--notification-info-bg);
        }
        .notification-message.warning {
            color: var(--warning-text);
            background: var(--notification-warning-bg);
        }
        
        /*
         * ================================
         * MAIN APPLICATION TAB SYSTEM
         * ================================
         * Dynamic navigation system for switching between app sections.
         * Ready for modularization into _tabs.scss
         *
         * Component Structure:
         * - .tab-scroll-container: Wrapper with gradient scroll indicators
         * - .app-tabs:       Horizontal flexbox container with scroll overflow
         * - .app-tab:        Individual tab buttons with hover states
         * - .app-tab.active: Applied via JavaScript to show current section
         * - .tab-panel:      Content containers controlled by tab state
         *
         * Navigation Strategy:
         * - Mobile-friendly horizontal scroll for narrow screens
         * - Equal flex distribution on wider screens
         * - JavaScript manages .active state and panel visibility
         * - Bottom border indicates active selection
         * - Subtle gradient indicators show scrollable content on mobile
         */
        .tab-scroll-container {
            position: relative;
            background: var(--bg-secondary);
            border-bottom: 2px solid var(--border-color);
        }

        .app-tabs {
            display: flex;
            background: transparent;
            padding: 0;
            margin: 0;
            overflow-x: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
            position: relative;
        }
        .app-tabs::-webkit-scrollbar {
            display: none;
        }

        /* Scroll indicators - subtle gradients that appear when content overflows */
        .tab-scroll-container::before,
        .tab-scroll-container::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 2px; /* Account for border */
            width: 20px;
            z-index: 10;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        /* Left scroll indicator */
        .tab-scroll-container::before {
            left: 0;
            background: linear-gradient(to right, var(--bg-secondary), transparent);
        }

        /* Right scroll indicator */
        .tab-scroll-container::after {
            right: 0;
            background: linear-gradient(to left, var(--bg-secondary), transparent);
        }

        /* Show indicators when scrollable content exists */
        .tab-scroll-container.scrollable-left::before {
            opacity: 1;
        }

        .tab-scroll-container.scrollable-right::after {
            opacity: 1;
        }
        
        .app-tab {
            flex: 1;
            min-width: 80px;
            padding: 16px 12px;
            border: none;
            background: transparent;
            color: var(--text-secondary);
            font-weight: var(--font-weight-semibold);
            font-size: 14px;
            cursor: pointer;
            transition: var(--transition);
            border-bottom: 3px solid transparent;
            white-space: nowrap;
        }
        
        .app-tab:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
        }
        
        /* The .active class is applied via JavaScript to the currently selected tab */
        .app-tab.active {
            background: var(--bg-primary);
            color: var(--primary-color);
            border-bottom-color: var(--primary-color);
        }
        
        .tab-content-container {
            background: var(--bg-primary);
            min-height: 300px; /* Ensures adequate viewport height for all tab content without scroll */
            overflow-x: hidden;
        }
        
        .tab-panel {
            display: none;
            width: 100%;
            min-height: 200px; /* Minimum content area height to prevent jarring layout shifts */
            background: var(--bg-primary);
            border: 2px solid transparent;
            overflow-x: hidden;
            box-sizing: border-box;
        }
        
        .tab-panel.active {
            display: block;
        }
        
        .tab-panel:not(#journalTab) {
            padding: 20px;
        }

        .main-content {
            padding: 15px;
            overflow-x: hidden;
            max-width: 100%;
            box-sizing: border-box;
        }
        
        /*
         * ================================
         * STATISTICS DASHBOARD COMPONENT
         * ================================
         * Grid-based analytics dashboard for dream tracking insights.
         * Ready for modularization into _statistics.scss
         *
         * Component Structure:
         * - .stats-grid:     CSS Grid container with responsive columns
         * - .stats-card:     Individual metric cards with hover effects
         * - .hover-card:     Interactive cards with lift animation
         * - .active:         Applied via JavaScript to highlight selected metrics
         *
         * Layout Strategy:
         * - Responsive grid that adapts from multi-column to single column
         * - Each card maintains minimum 250px width before wrapping
         * - Hover effects provide interactive feedback for clickable metrics
         */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            padding: 0;
            width: 100%;
            box-sizing: border-box;
        }
        
        .stats-card {
            background: var(--bg-secondary);
            border: 2px solid var(--border-color);
            border-radius: var(--border-radius-lg);
            padding: 20px;
            text-align: center;
            transition: var(--transition);
            margin-bottom: 15px;
            width: 100%;
            box-sizing: border-box;
        }
        
        .stats-card:hover {
            border-color: var(--border-hover);
            box-shadow: var(--shadow-md);
        }
        
        .hover-card {
            cursor: pointer;
            transition: var(--transition);
        }
        
        .hover-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }
        
        .goal-card {
            border-left: 4px solid var(--primary-color);
        }
        
        .goal-card.completed {
            border-left-color: var(--success-color);
            opacity: 0.8;
        }
        
        .goal-progress-section {
            background: var(--bg-light);
            padding: 15px;
            border-radius: var(--border-radius);
            margin: 15px 0;
            border: 2px solid var(--border-color);
        }
        
        .goal-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 15px;
        }
        
        .custom-goal-controls {
            border-top: 1px solid var(--border-color);
            padding-top: 15px;
        }
        
        .custom-goal-controls .btn {
            min-width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }
        
        /* Dark theme fixes for Goals/Advice content boxes */
        html[data-theme='dark'] .stats-card {
            background: var(--bg-secondary);
            border-color: var(--border-color);
        }
        
        /* Fix light backgrounds in dynamically created content */
        [data-theme='dark'] div[style*="background: linear-gradient(135deg, #f0f9ff"] {
            background: linear-gradient(135deg, var(--bg-elevated), var(--bg-secondary)) !important;
        }
        
        [data-theme='dark'] div[style*="background: #f8fafc"],
        [data-theme='dark'] div[style*="background: var(--bg-light)"] {
            background: var(--bg-elevated) !important;
        }
        
        [data-theme='dark'] div[style*="background: #f0f9ff"] {
            background: var(--bg-elevated) !important;
        }
        
        [data-theme='dark'] div[style*="background: linear-gradient(135deg, #f0f9ff"] {
            background: linear-gradient(135deg, var(--bg-elevated), var(--bg-secondary)) !important;
        }
        
        .stats-number {
            font-size: 2.5em;
            font-weight: var(--font-weight-semibold);
            color: var(--primary-color);
            margin-bottom: 10px;
        }
        
        .stats-label {
            color: var(--text-secondary);
            font-weight: var(--font-weight-medium);
            margin-bottom: 5px;
        }
        
        .stats-detail {
            color: var(--text-tertiary);
            font-size: 14px;
        }

        /* Pie Chart Styles */
        .pie-chart-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
        }

        .pie-chart {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            position: relative;
        }

        .pie-chart-center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80px;
            height: 80px;
            background: var(--bg-secondary);
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            border: 2px solid var(--border-color);
        }

        .pie-chart-total {
            font-size: 1.5em;
            font-weight: var(--font-weight-semibold);
            color: var(--text-primary);
        }

        .pie-chart-label {
            font-size: 0.8em;
            color: var(--text-secondary);
        }

        .pie-chart-legend {
            display: flex;
            flex-direction: column;
            gap: 8px;
            width: 100%;
            padding: 0 10px;
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            font-weight: var(--font-weight-medium);
            color: var(--text-secondary);
        }

        .legend-color-box {
            width: 16px;
            height: 16px;
            border-radius: 4px;
        }

        /* Calendar Styles */
        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .calendar-nav {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        #monthSelect {
            min-width: 140px; /* Adjust this value as needed */
        }
        
        /* Modern Calendar Navigation Buttons */
        .calendar-nav-btn {
            width: 40px;
            height: 40px;
            border: none;
            border-radius: 50%;
            background: linear-gradient(145deg, var(--bg-elevated), var(--bg-secondary));
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(255, 255, 255, 0.1);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
        }
        
        .calendar-nav-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 3px rgba(255, 255, 255, 0.2);
            background: linear-gradient(145deg, var(--bg-hover), var(--bg-elevated));
        }
        
        .calendar-nav-btn:active {
            transform: scale(0.95);
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        /* Triangular Arrow Shapes */
        .calendar-nav-btn::before {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
        }
        
        .calendar-nav-btn.prev::before {
            border-right: 8px solid var(--text-primary);
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            margin-left: -2px;
        }
        
        .calendar-nav-btn.next::before {
            border-left: 8px solid var(--text-primary);
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            margin-right: -2px;
        }
        
        /* Hover effect for triangle color */
        .calendar-nav-btn:hover::before {
            border-right-color: var(--primary-color);
            border-left-color: var(--primary-color);
        }
        
        /* Dark theme adjustments */
        [data-theme='dark'] .calendar-nav-btn {
            background: var(--dark-nav-btn-gradient);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.05);
        }
        
        [data-theme='dark'] .calendar-nav-btn:hover {
            background: var(--dark-nav-btn-hover-gradient);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 3px rgba(255, 255, 255, 0.1);
        }
        .calendar-grid {
            width: 100%;
            border-collapse: collapse;
        }
        .calendar-grid th {
            text-align: center;
            padding: 10px;
            font-weight: var(--font-weight-semibold);
            color: var(--text-secondary);
            font-size: 14px;
        }
        .calendar-grid td {
            border: 1px solid var(--border-color);
            height: 100px;
            vertical-align: top;
            padding: 8px;
            width: 14.28%;
        }
        .calendar-day {
            cursor: pointer;
            height: 100%;
            display: flex;
            flex-direction: column;
            border-radius: var(--border-radius);
            transition: background-color 0.2s;
        }
        .calendar-day:hover {
            background: var(--bg-hover);
        }
        .day-number {
            font-weight: var(--font-weight-semibold);
            font-size: 14px;
        }
        .calendar-day.other-month .day-number {
            color: var(--text-tertiary);
            font-weight: var(--font-weight-normal, 400);
        }
        .calendar-day.today .day-number {
            color: var(--primary-color);
            background-color: var(--bg-selected);
            border-radius: 50%;
            width: 28px;
            height: 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        /* --primary-color on --bg-selected is 2.8:1 in the dark theme */
        [data-theme='dark'] .calendar-day.today .day-number {
            color: var(--text-primary);
        }
        .dream-indicator {
            margin-top: 8px;
            background-color: var(--primary-color);
            color: var(--text-inverse);
            border-radius: 12px;
            padding: 2px 8px;
            font-size: 12px;
            font-weight: var(--font-weight-semibold);
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        
        /* Settings Tab Styling */
        .settings-section {
            background: var(--bg-secondary);
            border: 2px solid var(--border-color);
            border-radius: var(--border-radius-lg);
            padding: 25px;
            margin-bottom: 20px;
            width: 100%;
            box-sizing: border-box;
        }
        
        .settings-section h3 {
            color: var(--text-primary);
            margin-bottom: 15px;
            font-size: 1.2em;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* Tab titles are h2 elements sized like the h3 titles they replaced (margins come from the global reset) */
        .tab-title {
            font-size: 1.17em;
        }

        /* Collapsible section headers: a button inside the section's heading */
        .settings-section h3.collapsible-heading {
            display: block;
            margin: 0 0 15px;
        }

        .collapse-toggle {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            margin: 0;
            padding: 0;
            border: 0;
            background: none;
            color: inherit;
            font: inherit;
            text-align: left;
            cursor: pointer;
            user-select: none;
        }

        .collapse-toggle:focus-visible {
            outline: 2px solid var(--accent-color);
            outline-offset: 2px;
        }

        /* Settings headers have a larger click area that extends past the section padding */
        .collapse-toggle[data-action^="toggle-settings"] {
            transition: background-color 0.2s ease, color 0.2s ease;
            border-radius: var(--border-radius-md);
            box-sizing: border-box;
            width: calc(100% + 30px);
            padding: 12px 15px;
            margin: -12px -15px 0;
            position: relative;
        }

        .collapse-toggle[data-action^="toggle-settings"]:hover {
            background-color: var(--bg-hover);
            color: var(--text-hover);
        }

        .collapse-toggle[data-action^="toggle-settings"]:focus-visible {
            background-color: var(--bg-focus);
        }

        /* Collapse indicators */
        .collapse-indicator {
            font-size: 0.9em;
            margin-left: auto;
            transition: transform 0.2s ease;
            user-select: none;
        }

        .collapse-hint {
            margin-left: 8px;
            font-size: 0.75em;
            font-weight: normal;
            white-space: nowrap;
        }

        /* Settings section content area transitions */
        .settings-section-content {
            transition: opacity 0.2s ease;
        }

        /* Keyboard navigation indicator */
        .collapse-toggle:focus-visible .collapse-indicator {
            transform: scale(1.1);
        }

        .settings-grid {
            padding: 0;
            width: 100%;
            box-sizing: border-box;
        }
        
        .settings-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid var(--border-light);
        }
        
        .settings-row:last-child {
            border-bottom: none;
        }
        
        .settings-label {
            flex: 1;
            color: var(--text-primary);
            font-weight: var(--font-weight-medium);
        }
        
        .settings-description {
            color: var(--text-secondary);
            font-size: 14px;
            margin-top: 4px;
        }
        
        .settings-controls {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
        }
        
        /* Mobile Tab Optimizations */
        @media (max-width: 768px) {
            .app-tab {
                min-width: 100px;
                padding: 14px 16px;
                font-size: 14px;
            }
            
            .stats-grid {
                grid-template-columns: 1fr;
                padding: 0;
                gap: 15px;
            }
            
            .settings-grid {
                padding: 0;
            }
            
            .settings-row {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
            
            .settings-controls {
                width: 100%;
                justify-content: flex-start;
            }
        }

        /* Phones: the five tabs share the bar with the icon above the label, so none is cut off.
           This comes after the 768px rule above so that it wins; the bar still scrolls on very narrow screens. */
        @media (max-width: 560px) {
            .app-tab {
                flex: 1 1 0;
                min-width: 64px;
                min-height: 52px;
                padding: 8px 2px;
                font-size: 11px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 2px;
            }
            .app-tab .tab-icon {
                font-size: 18px;
                line-height: 1;
            }
        }

        /* Touch screens and phones: controls are at least 44 x 44 px (checkboxes 24 px, the WCAG 2.2 AA minimum) */
        @media (max-width: 768px), (pointer: coarse) {
            .btn,
            .btn-small,
            .stats-tab,
            .voice-tab,
            .record-btn,
            .calendar-nav-btn,
            .collapse-toggle,
            .info-icon {
                min-height: 44px;
            }
            .btn,
            .btn-small {
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }
            .calendar-nav-btn,
            .info-icon {
                min-width: 44px;
            }
            .info-icon {
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }
            input.form-control,
            select.form-control {
                min-height: 44px;
            }
            input[type="checkbox"],
            input[type="radio"],
            .lucid-checkbox input[type="checkbox"] {
                width: 24px;
                height: 24px;
                min-width: 24px;
                flex: none;
            }
            /* Seven day columns of 44 px need about 308 px, so the calendar card gives up some side padding */
            #calendarContainer {
                padding-left: 2px;
                padding-right: 2px;
            }
            .calendar-grid {
                table-layout: fixed;
            }
            .calendar-grid td {
                padding: 0;
            }
            footer a {
                display: inline-flex;
                align-items: center;
                min-height: 44px;
                padding: 0 6px;
            }
        }

        /* ================================ */
        /* CLOUD SYNC COMPONENT STYLES     */
        /* ================================ */
        /* Cloud synchronization interface styles using HSL theme system */

        /* Cloud sync status indicators */
        .cloud-sync-status {
            margin-top: 8px;
        }

        .status-indicator {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 8px;
            border-radius: var(--border-radius);
            font-size: 14px;
            font-weight: var(--font-weight-medium);
            background: var(--bg-light);
            border: 1px solid var(--border-light);
            color: var(--text-secondary);
        }

        .status-indicator.connected {
            background: hsl(var(--success-h), var(--success-s), 90%);
            border-color: hsl(var(--success-h), var(--success-s), 70%);
            color: hsl(var(--success-h), var(--success-s), 25%);
        }

        .status-indicator.connecting {
            background: hsl(var(--info-h), var(--info-s), 95%);
            border-color: hsl(var(--info-h), var(--info-s), 80%);
            color: hsl(var(--info-h), var(--info-s), 30%);
        }

        .status-indicator.error {
            background: hsl(var(--error-h), var(--error-s), 93%);
            border-color: hsl(var(--error-h), var(--error-s), 75%);
            color: hsl(var(--error-h), var(--error-s), 40%);
        }

        /* Cloud sync controls layout */
        .sync-controls {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .sync-controls .btn {
            min-width: 140px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        /* Sync progress indicator */
        .sync-progress-indicator {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .loading-spinner {
            width: 16px;
            height: 16px;
            border: 2px solid var(--border-light);
            border-top: 2px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Cloud sync information display */
        .cloud-sync-info {
            margin-top: 4px;
        }

        .cloud-sync-info .text-xs {
            font-size: 12px;
            opacity: 0.8;
        }

        /* Cloud sync notice styling */
        .cloud-sync-notice {
            margin-top: 20px;
        }

        .cloud-sync-notice .message-info {
            background: hsl(var(--info-h), var(--info-s), 97%);
            border-left: 3px solid hsl(var(--info-h), var(--info-s), 60%);
            padding: 12px 15px;
            border-radius: var(--border-radius);
            font-size: 14px;
            color: hsl(var(--info-h), var(--info-s), 25%);
        }

        /* Message styling for advanced configuration */
        .message-warning {
            background: hsl(var(--warning-h), var(--warning-s), 95%);
            border-left: 3px solid hsl(var(--warning-h), var(--warning-s), 60%);
            padding: 12px 15px;
            border-radius: var(--border-radius);
            font-size: 14px;
            color: hsl(var(--warning-h), var(--warning-s), 26%);
        }

        .border-l-warning {
            border-left: 3px solid hsl(var(--warning-h), var(--warning-s), 60%);
        }

        .message-success {
            background: hsl(var(--success-h), var(--success-s), 95%);
            border-left: 3px solid hsl(var(--success-h), var(--success-s), 60%);
            padding: 12px 15px;
            border-radius: var(--border-radius);
            font-size: 14px;
            color: hsl(var(--success-h), var(--success-s), 30%);
        }

        .border-l-success {
            border-left: 3px solid hsl(var(--success-h), var(--success-s), 60%);
        }

        /* Dark theme cloud sync adjustments */
        [data-theme="dark"] .status-indicator {
            background: hsl(var(--neutral-h), var(--neutral-s), 15%);
            border-color: hsl(var(--neutral-h), var(--neutral-s), 25%);
            color: hsl(var(--neutral-h), var(--neutral-s), 75%);
        }

        [data-theme="dark"] .status-indicator.connected {
            background: hsl(var(--success-h), var(--success-s), 15%);
            border-color: hsl(var(--success-h), var(--success-s), 35%);
            color: hsl(var(--success-h), var(--success-s), 80%);
        }

        [data-theme="dark"] .status-indicator.connecting {
            background: hsl(var(--info-h), var(--info-s), 15%);
            border-color: hsl(var(--info-h), var(--info-s), 35%);
            color: hsl(var(--info-h), var(--info-s), 80%);
        }

        [data-theme="dark"] .status-indicator.error {
            background: hsl(var(--error-h), var(--error-s), 15%);
            border-color: hsl(var(--error-h), var(--error-s), 35%);
            color: hsl(var(--error-h), var(--error-s), 80%);
        }

        [data-theme="dark"] .cloud-sync-notice .message-info {
            background: hsl(var(--info-h), var(--info-s), 10%);
            border-left-color: hsl(var(--info-h), var(--info-s), 40%);
            color: hsl(var(--info-h), var(--info-s), 85%);
        }

        /* Mobile responsive cloud sync styles */
        @media (max-width: 768px) {
            .sync-controls {
                width: 100%;
                justify-content: flex-end;
            }

            .sync-controls .btn {
                min-width: 120px;
                font-size: 13px;
            }

            .status-indicator {
                font-size: 13px;
            }
        }

        /* Utility classes for common spacing */
        .text-center { text-align: center; }
        .font-weight-600 { font-weight: 600; }
        .border-radius-8 { border-radius: 8px; }
        .margin-bottom-20 { margin-bottom: 20px; }
        .padding-15 { padding: 15px; }
        .meta-item { display: inline; }
        .tag, .dream-sign {
            display: inline-block;
            padding: 3px 8px;
            margin: 2px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
            text-transform: lowercase;
        }
        .tag {
            background: var(--tag-bg);
            color: var(--tag-text);
            border: 1px solid var(--tag-border);
        }
        .dream-sign {
            background: var(--dream-sign-bg);
            color: var(--dream-sign-text);
            border: 1px solid var(--dream-sign-border);
        }
        .dream-sign::before {
            content: "⚡ ";
            font-size: 10px;
        }
        .entry-tags {
            margin-top: 8px;
            line-height: 1.4;
        }
        .entry-tags .tag-section {
            display: inline-block;
            margin-right: 12px;
        }
        .entry-tags .tag-label {
            font-size: 11px;
            color: var(--text-secondary);
            font-weight: 600;
            margin-right: 4px;
        }
        .tag-input-group {
            position: relative;
        }
        .tag-autocomplete-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: var(--bg-elevated);
            border: 2px solid var(--border-color);
            border-top: none;
            border-radius: 0 0 var(--border-radius) var(--border-radius);
            max-height: 200px;
            overflow-y: auto;
            z-index: 1000;
            display: none;
            box-shadow: var(--shadow-md);
        }
        
        /* Autocomplete styles consolidated above - duplicated instance removed */
        
        .timer-warning {
            background: var(--error-color);
            color: var(--text-inverse);
            padding: 15px 20px;
            text-align: center;
            font-weight: var(--font-weight-semibold);
            font-size: 16px;
            display: none;
            position: relative;
        }
        /* Applied via JavaScript when PIN reset timer is active */
        .timer-warning.active {
            display: block;
        }
        .timer-warning button {
            background: var(--text-inverse);
            color: var(--error-color);
            border: none;
            padding: 5px 15px;
            border-radius: 5px;
            margin-left: 15px;
            cursor: pointer;
            font-weight: var(--font-weight-semibold);
        }
        .timer-warning button:hover {
            background: var(--notification-error-bg);
        }
        .migration-notice {
            background: var(--notification-info-bg);
            color: var(--info-color);
            padding: 15px;
            border-radius: var(--border-radius);
            margin: 20px;
            font-weight: var(--font-weight-semibold);
            text-align: center;
            display: none;
        }
        .voice-recording-section {
            background: var(--voice-bg-primary);
            border: 2px solid var(--voice-border);
            border-radius: var(--border-radius-lg);
            padding: 20px;
            margin-bottom: 20px;
        }
        .voice-recording-section h3 {
            color: var(--voice-text);
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .voice-controls {
            display: flex;
            align-items: center;
            gap: 15px;
            flex-wrap: wrap;
        }
        .record-btn {
            padding: 12px 20px;
            border: none;
            border-radius: 50px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 140px;
            justify-content: center;
        }
        .record-btn.ready {
            background: var(--success-color);
            color: var(--text-inverse);
        }
        .record-btn.ready:hover {
            background: var(--success-hover);
            transform: translateY(-2px);
        }
        .record-btn.recording {
            background: var(--error-color);
            color: var(--text-inverse);
            animation: pulse-record 1.5s ease-in-out infinite;
        }
        .record-btn.disabled {
            background: var(--text-muted);
            color: var(--text-tertiary);
            cursor: not-allowed;
        }
        @keyframes pulse-record {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        .recording-timer {
            font-family: monospace;
            font-size: 18px;
            font-weight: var(--font-weight-semibold);
            color: var(--error-color);
            background: var(--notification-error-bg);
            padding: 8px 16px;
            border-radius: var(--border-radius);
            border: 2px solid var(--error-color);
        }
        .voice-status {
            font-size: 14px;
            padding: 8px 12px;
            border-radius: 6px;
            font-weight: 600;
        }
        .voice-status.info {
            background: var(--notification-info-bg);
            color: var(--info-color);
        }
        .voice-status.warning {
            background: var(--notification-warning-bg);
            color: var(--warning-text);
        }
        
        /* Multiple high-specificity selectors needed to override voice status 
           styles across different container contexts in dark theme only */
        html[data-theme='dark'] .voice-status.warning,
        html[data-theme='dark'] .voice-recording-section .voice-status.warning,
        html[data-theme='dark'] .voice-tab-content .voice-status.warning,
        html[data-theme='dark'] body .voice-status.warning {
            background: var(--dark-voice-warning-bg);
            color: var(--dark-voice-warning-text);
            border: 1px solid var(--dark-voice-warning-border);
        }
        .voice-status.error {
            background: var(--notification-error-bg);
            color: var(--error-color);
        }
        .voice-notes-section {
            margin-top: 30px;
            padding: 25px;
            background: var(--bg-light);
            border: 2px solid var(--border-color);
            border-radius: var(--border-radius-lg);
        }
        .voice-notes-section h3 {
            color: var(--text-primary);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .voice-note {
            background: var(--bg-secondary);
            border: 2px solid var(--border-color);
            border-radius: var(--border-radius);
            padding: 15px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 15px;
            flex-wrap: wrap;
        }
        @media (max-width: 768px) {
            .voice-note-container {
                flex-direction: column;
                align-items: stretch;
                gap: 10px;
            }
            .voice-note-controls {
                min-width: auto;
                justify-content: center;
            }
            .voice-progress-container {
                min-width: auto;
                margin: 0 5px;
            }
            
            /* Voice Tabs Mobile */
            .voice-tab {
                padding: 12px 16px;
                font-size: 14px;
            }
            
            .voice-tab-content {
                padding: 15px;
            }
            
            /* Stats Tabs Mobile */
            .stats-tab {
                padding: 12px 16px;
                font-size: 14px;
            }
            
            .stats-tab-content {
                padding: 15px;
            }

            #tipText {
                font-size: 0.9em;
            }

            #tipCounter {
                font-size: 0.6em;
            }
        }
        .voice-note:hover {
            border-color: var(--border-hover);
            box-shadow: var(--shadow-border-hover);
        }
        .voice-note-info {
            flex: 1;
            min-width: 200px;
        }
        .voice-note-title {
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 4px;
        }
        .voice-note-meta {
            color: var(--text-secondary);
            font-size: 14px;
        }
        .voice-note-controls {
            display: flex;
            gap: 8px;
            align-items: flex-start;
            flex-wrap: wrap;
            min-width: 300px;
            justify-content: flex-start;
            flex: 1;
            width: 100%;
        }
        .voice-btn {
            padding: 6px 12px;
            border: none;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .voice-btn.play {
            background: var(--info-color);
            color: var(--text-inverse);
        }
        .voice-btn.play:hover {
            background: var(--info-hover);
        }
        .voice-btn.pause {
            background: var(--warning-color);
            color: var(--text-inverse);
        }
        .voice-btn.pause:hover {
            background: var(--warning-hover);
        }
        .voice-btn.download {
            background: var(--success-color);
            color: var(--text-inverse);
        }
        .voice-btn.download:hover {
            background: var(--success-hover);
        }
        .voice-btn.delete {
            background: var(--error-color);
            color: var(--text-inverse);
        }
        .voice-btn.delete:hover {
            background: var(--error-hover);
        }
        .voice-progress-container {
            flex: 1;
            min-width: 200px;
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 0 15px;
            flex-basis: 100%;
        }
        .voice-progress-bar {
            flex: 1;
            height: 6px;
            background: var(--border-color);
            border-radius: 3px;
            position: relative;
            cursor: pointer;
            transition: height 0.2s;
        }
        .voice-progress-bar:hover {
            height: 8px;
        }
        .voice-progress-fill {
            height: 100%;
            background: var(--primary-color);
            border-radius: 3px;
            width: 0%;
            /* Transition removed - will be controlled via JavaScript for Firefox compatibility */
        }
        .voice-time-display {
            font-family: monospace;
            font-size: 12px;
            color: var(--text-secondary);
            min-width: 80px;
            text-align: center;
        }
        .voice-full-warning {
            background: var(--notification-error-bg);
            color: var(--error-color);
            padding: 12px;
            border-radius: var(--border-radius);
            border: 2px solid var(--error-color);
            margin-bottom: 15px;
            font-weight: var(--font-weight-semibold);
            text-align: center;
        }
        .no-voice-notes {
            text-align: center;
            color: var(--text-secondary);
            font-style: italic;
            padding: 30px;
            background: var(--bg-light);
            border: var(--border-dashed);
            border-radius: var(--border-radius);
        }
            
        
        /* ================================ */
        /* RESPONSIVE DESIGN & MOBILE       */
        /* ================================ */
        /* Comprehensive mobile-first responsive design with breakpoint-specific optimizations */
        
        /* Mobile Responsive Design (768px and below) */
        @media (max-width: 768px) {
            body {
                padding: 10px;
            }
            
            .header {
                padding: 20px;
            }
            .header h1 {
                font-size: 2em;
            }
            
            .controls {
                flex-direction: column;
                align-items: stretch;
                gap: 10px;
            }

            .control-row-break {
                display: none;
            }

            .search-filter-section,
            .display-sort-section {
                padding: 12px;
            }

            .search-filter-group {
                flex-direction: row;
                min-width: auto;
                gap: 8px;
                align-items: center;
            }

            .filter-group {
                flex-direction: row;
                min-width: auto;
                gap: 10px;
            }

            .date-filter-group {
                display: grid !important;
                grid-template-columns: auto 1fr !important;
                grid-template-rows: auto auto !important;
                gap: 8px !important;
                align-items: center;
            }

            .date-filter-group label {
                font-weight: 600;
                color: var(--text-primary);
                margin-bottom: 0;
            }

            .date-filter-group label:nth-child(3) {
                grid-column: 1;
                grid-row: 2;
            }

            .date-filter-group input:nth-child(4) {
                grid-column: 2;
                grid-row: 2;
            }

            .date-filter-group input {
                width: 100%;
                box-sizing: border-box;
            }

            .display-sort-group {
                /* Keep horizontal layout longer - only stack on very small screens */
                min-width: auto;
                gap: 8px;
            }

            .search-box, .filter-select {
                min-width: auto;
                flex: 1;
            }

            .tab-panel:not(#journalTab) {
                padding: 15px;
            }
            
            .entry-form {
                padding: 15px;
                margin-bottom: 20px;
            }
            
            /* Mobile Form Control Fixes */
            .form-control {
                padding: 10px 12px;
                font-size: 16px;
                width: 100%;
                box-sizing: border-box;
                max-width: 100%;
            }
            
            .form-group {
                margin-bottom: 15px;
            }
            
            .form-group label {
                font-size: 14px;
                margin-bottom: 6px;
            }
            
            .lucid-checkbox {
                margin-bottom: 15px;
            }
            
            textarea.form-control {
                min-height: 100px; /* Mobile-optimized height - smaller than desktop to maximize screen space */
                resize: vertical;
            }
            
            .entry {
                padding: 15px;
            }
            
            .entry-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
            
            .entry-meta {
                width: 100%;
                justify-content: space-between;
                align-items: center;
            }
            
            .entry-actions {
                flex-shrink: 0;
            }
            
            .pagination {
                flex-direction: column;
                gap: 15px;
            }
            
            .page-numbers {
                order: -1;
            }
            
            .pagination-btn {
                min-width: 100px;
            }
            
            .security-controls {
                margin-left: 0;
                margin-top: 10px;
                justify-content: center;
            }
            
            .voice-note {
                flex-direction: column;
                align-items: stretch;
                gap: 10px;
            }
            
            .voice-note-controls {
                min-width: auto;
                justify-content: center;
            }
            
            .voice-progress-container {
                min-width: auto;
                margin: 0 5px;
            }
        }

        /* Very Small Screen Responsive Design (480px and below) */
        @media (max-width: 411px) { /* Common small phone width */
            .display-sort-group {
                flex-direction: column;
                gap: 10px;
            }
        }

        /* Footer Styles */
        footer {
            background: var(--bg-light);
            border-top: 1px solid var(--border-color);
            padding: 20px;
            margin-top: 40px;
            text-align: center;
            color: var(--text-secondary);
            font-size: 14px;
        }
        
        footer div {
            max-width: 800px;
            margin: 0 auto;
        }
        
        footer p {
            margin-bottom: 10px;
        }
        
        footer p:last-child {
            margin: 0;
            font-size: 12px;
        }

/* ============================
   Security Dialog Styles
   ============================ */

.security-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease-out;
}

.security-dialog-content {
    background-color: var(--background-color);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    max-width: 500px;
    width: 90%;
    box-shadow: var(--shadow-lg);
    color: var(--text-color);
    text-align: center;
    backdrop-filter: blur(100px);
}

.security-dialog-content h3 {
    margin-top: 0;
    color: var(--error-color);
    font-size: 1.3em;
    margin-bottom: 1rem;
}

.security-dialog-content p {
    margin: 1rem 0;
    line-height: 1.5;
}

.security-dialog-content .dialog-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.security-dialog-content .btn {
    min-width: 140px;
    padding: 0.8rem 1.5rem;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.security-dialog-content .btn-secondary {
    background-color: var(--secondary-color);
    color: var(--text-color);
}

.security-dialog-content .btn-secondary:hover {
    background-color: var(--accent-color);
}

.security-dialog-content .btn-primary {
    background-color: var(--primary-solid);
    color: white;
}

.security-dialog-content .btn-primary:hover {
    opacity: 0.9;
}

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

/* ================================ */
/* PROGRESS DIALOG STYLING          */
/* ================================ */

.progress-dialog .security-dialog-content {
    max-width: 400px;
    text-align: center;
}

.progress-dialog .security-dialog-content h3 {
    color: var(--primary-color);
    font-size: 1.4em;
    margin-bottom: 1.5rem;
}

.progress-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem 0;
}

.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-color);
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.progress-dialog .security-dialog-content p {
    margin: 1rem 0;
    font-size: 1.1em;
}

.progress-dialog .security-dialog-content small {
    color: var(--text-secondary);
    font-style: italic;
}

.progress-dialog .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--secondary-color);
    color: var(--text-secondary);
}

.progress-dialog .btn:disabled:hover {
    opacity: 0.6;
    background-color: var(--secondary-color);
}

/* Success and error states */
.progress-dialog .security-dialog-content h3:has-text("✅") {
    color: var(--success-color);
}

.progress-dialog .security-dialog-content h3:has-text("❌") {
    color: var(--error-color);
}

/* ================================ */
/* CLOUD SYNC BUTTON STATES         */
/* ================================ */

/* Disabled cloud sync buttons during operations */
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.btn:disabled:hover {
    opacity: 0.6;
}

/* Cloud sync buttons in comparing state */
.btn.btn-secondary:disabled {
    background-color: var(--secondary-color);
    color: var(--text-secondary);
    opacity: 0.8;
}




/* ================================ */
/* MOBILE SEARCH LAYOUT FIXES      */
/* ================================ */

/* Additional mobile improvements for better layout */
@media (max-width: 768px) {
    /* Enhanced mobile improvements for search controls */
    .date-filter-group input {
        padding: 10px 12px !important;
        font-size: 16px !important;
    }

    .date-filter-group label {
        font-size: 14px !important;
        margin-bottom: 4px;
    }

    /* Reduce visual clutter on mobile - removed .search-filter-section rule as container no longer exists */

    .controls {
        padding: 12px !important;
    }

    .settings-section-content {
        padding: 0 !important;
    }

    /* Improve spacing between control groups */
    .search-filter-group,
    .filter-group,
    .date-filter-group,
    .display-sort-group {
        margin-bottom: 15px !important;
    }

    .search-filter-group:last-child,
    .filter-group:last-child,
    .date-filter-group:last-child,
    .display-sort-group:last-child {
        margin-bottom: 0 !important;
    }

    /* Make buttons more touch-friendly on mobile */
    .btn-small {
        padding: 8px 12px !important;
        font-size: 14px !important;
        min-height: 44px !important;
    }
}


/* ================================ */
/* SMART SEARCH TOOLTIP FIXES      */
/* ================================ */

/* Smart Search Guide specific styling to fix content overflow */
.smart-search-examples {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.search-group {
    padding: 8px;
    background: var(--bg-subtle);
    border-radius: 4px;
    border-left: 3px solid var(--primary-color);
}

.search-group strong {
    display: block;
    color: var(--primary-color);
    margin-bottom: 6px;
    font-weight: 600;
}

.search-group ul {
    margin: 0;
    padding-left: 16px;
    list-style-type: disc;
}

.search-group li {
    margin-bottom: 4px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
}

.search-group code {
    background: var(--bg-input);
    color: var(--text-primary);
    padding: 2px 4px;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.9em;
    word-break: break-all;
}

/* Smart search tooltip centering and mobile improvements */
.smart-search-tooltip {
    max-width: 450px !important;
}

@media (max-width: 768px) {
    .smart-search-tooltip {
        max-width: calc(100vw - 20px) !important;
        min-width: calc(100vw - 20px) !important;
        left: 10px !important;
        right: 10px !important;
        transform: none !important;
    }
    
    .search-group {
        padding: 6px;
    }
    
    .search-group li {
        font-size: 14px;
        line-height: 1.3;
    }
    
    .search-group code {
        font-size: 0.8em;
        padding: 1px 3px;
    }
}



/* Mobile tooltip improvements - content only, no positioning interference */
@media (max-width: 768px) {
    /* All tooltip positioning handled by JavaScript for proper bounds checking */
}

/* Storage problem banner (storage-banner.js) */
.storage-banner {
    position: sticky; top: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 16px;
    background: var(--bg-elevated); color: var(--text-primary);
    border-bottom: 4px solid var(--error-color);
    font-size: 15px; line-height: 1.4;
}
.storage-banner[data-kind="blocked"] { border-bottom-color: var(--warning-color); }
@media (max-width: 560px) { .storage-banner { flex-direction: column; align-items: stretch; } }