:root {
            --bg-color: #f4f6f8; 
            --app-bg-color: #ffffff;
            --text-color: #333333;
            --heading-color: #2c3e50; 
            --border-color: #dce4ec;
            --hr-color: #dce4ec;

            --sidebar-section-bg: #fdfdfe; 
            --sidebar-text-color: #566573;
            --sidebar-heading-color: #34495e;
            
            --editor-bg: #fdfdfe;
            --editor-border: #d5dbdb;
            --editor-focus-border: #5dade2; 
            --editor-focus-shadow: rgba(93, 173, 226, 0.4);

            --button-primary-bg: #5dade2; 
            --button-primary-text: white;
            --button-primary-hover-bg: #3498db;

            --button-secondary-bg: #e4e7eb;
            --button-secondary-text: #566573;
            --button-secondary-border: #d5dbdb;
            --button-secondary-hover-bg: #d5d8dc;
            
            --button-success-bg: #58d68d; 
            --button-success-text: white;
            --button-success-hover-bg: #2ecc71;

            --button-warning-bg: #f5cba7; 
            --button-warning-text: #784212; 
            --button-warning-hover-bg: #f0b27a;

            --button-danger-bg: #ec7063; 
            --button-danger-text: white;
            --button-danger-hover-bg: #e74c3c;
            
            --button-disabled-bg: #bdc3c7;
            --button-disabled-text: #ecf0f1;

            --link-color: #5dade2;
            --link-hover-bg: #e4e7eb;

            --notification-info-bg: #d6eaf8;
            --notification-info-text: #2e86c1;
            --notification-info-border: #aed6f1;

            --notification-warning-bg: #fdebd0;
            --notification-warning-text: #d35400;
            --notification-warning-border: #f5cba7;

            --notification-success-bg: #d4efdf;
            --notification-success-text: #229954;
            --notification-success-border: #a9dfbf;
            
            --notification-error-bg: #f5b7b1;
            --notification-error-text: #c0392b;
            --notification-error-border: #ec7063;

            --copy-confirmation-text: #229954;
            --version-history-bg: #e4e7eb;
            --version-history-text: #566573;
            --version-history-heading: #34495e;

            --fs-stats-bg: rgba(0, 0, 0, 0.1);
            --fs-stats-text: var(--text-color);
            --fs-settings-icon-color: var(--sidebar-text-color);
            --fs-settings-modal-bg: var(--app-bg-color);
            --fs-settings-modal-border: var(--border-color);
            --fs-settings-modal-text: var(--text-color);

            --editor-toolbar-bg: rgba(240, 242, 245, 0.8); 
            --editor-toolbar-border: var(--border-color);
            --editor-toolbar-button-bg: var(--button-secondary-bg);
            --editor-toolbar-button-text: var(--button-secondary-text);
            --editor-toolbar-button-hover-bg: var(--button-secondary-hover-bg);
            --editor-toolbar-button-active-bg: var(--button-primary-bg); 
            --editor-toolbar-button-active-text: var(--button-primary-text);
            
            --tooltip-bg: rgba(51, 51, 51, 0.9); /* Slightly transparent dark background */
            --tooltip-text: #ffffff; 

            --progress-bar-bg: var(--border-color);
            --progress-bar-hover-bg: #c8d6e5; 
            --time-progress-color: #5dade2; 
            --word-progress-color: #58d68d; 
        }

        body.dark-mode {
            --bg-color: #212121; 
            --app-bg-color: #2c2c2c; 
            --text-color: #e0e0e0;
            --heading-color: #f5f5f5;
            --border-color: #424242;
            --hr-color: #424242;

            --sidebar-section-bg: #333333;
            --sidebar-text-color: #bdbdbd;
            --sidebar-heading-color: #eeeeee;

            --editor-bg: #262626;
            --editor-border: #555555;
            --editor-focus-border: #757575;
            --editor-focus-shadow: rgba(117, 117, 117, 0.4);
            
            --button-primary-bg: #555555; 
            --button-primary-text: #eeeeee;
            --button-primary-hover-bg: #666666;

            --button-secondary-bg: #424242;
            --button-secondary-text: #e0e0e0;
            --button-secondary-border: #616161;
            --button-secondary-hover-bg: #616161;

            --button-success-bg: #556b2f; 
            --button-success-text: #e0e0e0;
            --button-success-hover-bg: #6b8e23; 
            
            --button-warning-bg: #8b4513; 
            --button-warning-text: #e0e0e0;
            --button-warning-hover-bg: #a0522d;

            --button-danger-bg: #800000; 
            --button-danger-text: #e0e0e0;
            --button-danger-hover-bg: #a52a2a;

            --button-disabled-bg: #424242;
            --button-disabled-text: #757575;
            
            --link-color: #90a4ae; 
            --link-hover-bg: #373737;

            --notification-info-bg: #373737;
            --notification-info-text: #b0bec5;
            --notification-info-border: #4f4f4f;

            --notification-warning-bg: #4e342e; 
            --notification-warning-text: #ffcc80; 
            --notification-warning-border: #6d4c41;
            
            --notification-success-bg: #2e7d32; 
            --notification-success-text: #a5d6a7; 
            --notification-success-border: #388e3c;

            --notification-error-bg: #b71c1c; 
            --notification-error-text: #ef9a9a; 
            --notification-error-border: #c62828;
            
            --copy-confirmation-text: #a5d6a7;
            --version-history-bg: #333333;
            --version-history-text: #bdbdbd;
            --version-history-heading: #eeeeee;

            --fs-stats-bg: rgba(255, 255, 255, 0.1);
            --fs-stats-text: var(--text-color);
            --fs-settings-icon-color: var(--sidebar-text-color);
            --fs-settings-modal-bg: var(--app-bg-color);
            --fs-settings-modal-border: var(--border-color);
            --fs-settings-modal-text: var(--text-color);

            --editor-toolbar-bg: rgba(44, 44, 44, 0.8); 
            --editor-toolbar-border: var(--border-color);
            --editor-toolbar-button-bg: var(--button-secondary-bg);
            --editor-toolbar-button-text: var(--button-secondary-text);
            --editor-toolbar-button-hover-bg: var(--button-secondary-hover-bg);
            
            --tooltip-bg: rgba(238, 238, 238, 0.9); 
            --tooltip-text: #212121; 

            --progress-bar-bg: var(--border-color);
            --progress-bar-hover-bg: #555555; 
        }

        /* General body styling */
        body {
            font-family: 'Inter', sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 30px 20px 20px 20px; 
            background-color: var(--bg-color);
            color: var(--text-color);
            display: flex;
            flex-direction: column; 
            align-items: center; 
            min-height: 100vh;
        }
        
        .progress-bar-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 10005; 
            display: block; 
        }
        .progress-bar-wrapper.hidden-in-fullscreen {
            display: none !important; 
        }
        .progress-bar-container {
            position: relative; 
            width: 100%;
            height: 5px; 
            background-color: var(--progress-bar-bg);
            transition: background-color 0.2s ease; 
        }
        .progress-bar-container:hover {
            background-color: var(--progress-bar-hover-bg);
        }
        .progress-bar-fill {
            height: 100%;
            width: 0%; 
            transition: width 0.3s ease-out; 
        }
        #time-progress-bar {
            background-color: var(--time-progress-color);
        }
        #word-progress-bar {
            background-color: var(--word-progress-color);
        }
        /* Custom Tooltip for Progress Bars */
        .progress-bar-container::after {
            content: attr(data-tooltip);
            position: absolute;
            top: 100%; 
            left: 50%;
            transform: translateX(-50%) translateY(5px); 
            background-color: var(--tooltip-bg);
            color: var(--tooltip-text);
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.75em; 
            white-space: nowrap;
            z-index: 20; 
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.1s ease-out, visibility 0.1s ease-out; 
            pointer-events: none; 
        }
        .progress-bar-container:hover::after {
            visibility: visible;
            opacity: 1;
            transition-delay: 0s; 
        }


        .app-container {
            display: flex;
            gap: 25px;
            width: 100%;
            max-width: 1200px;
            background-color: var(--app-bg-color);
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
            margin-bottom: 30px; 
        }
        body.fullscreen-active .app-container {
            padding: 0;
            gap: 0;
            box-shadow: none;
            max-width: 100%;
            margin-top: 0; 
        }
        /* body.fullscreen-active .progress-bar-wrapper is handled by JS now */


        .writing-area {
            flex: 3;
            display: flex;
            flex-direction: column;
            position: relative; 
        }
        .writing-area.fullscreen-mode {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 10000;
            background-color: var(--app-bg-color);
            padding: 20px; 
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center; 
        }

        .writing-area-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 10px; 
            margin-bottom: 5px; 
        }
        .writing-area.fullscreen-mode .writing-area-header {
            width: 100%;
            max-width: 80ch; 
            margin-bottom: 15px; 
            flex-shrink: 0; 
        }

        .writing-area-header h2 {
            margin-top: 0;
            margin-bottom: 0;
            color: var(--heading-color);
        }

        .writing-controls {
            display: flex;
            gap: 8px;
        }

        .writing-controls button {
            padding: 6px 12px;
            font-size: 14px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 500;
            transition: background-color 0.2s ease, transform 0.1s ease;
        }
        .writing-controls button:hover {
            transform: translateY(-1px);
        }
        .writing-controls button:active {
            transform: translateY(0px);
        }
        
        #top-notification-area {
            width: 100%;
            padding: 12px;
            margin-top: 10px; 
            margin-bottom: 10px; 
            border-radius: 6px;
            text-align: center;
            font-weight: 500;
            display: none; 
            box-sizing: border-box;
            flex-shrink: 0; 
        }
         .writing-area.fullscreen-mode #top-notification-area {
            max-width: 80ch; 
        }
        #top-notification-area.info {
            background-color: var(--notification-info-bg); 
            color: var(--notification-info-text); 
            border: 1px solid var(--notification-info-border);
        }
        #top-notification-area.warning {
            background-color: var(--notification-warning-bg); 
            color: var(--notification-warning-text); 
            border: 1px solid var(--notification-warning-border);
        }
        #top-notification-area.success { 
            background-color: var(--notification-success-bg);
            color: var(--notification-success-text);
            border: 1px solid var(--notification-success-border);
        }
        #top-notification-area button {
            padding: 6px 10px;
            font-size: 13px;
            border: 1px solid transparent;
            border-radius: 5px;
            cursor: pointer;
            font-weight: 500;
            margin: 5px; 
            transition: background-color 0.2s ease, border-color 0.2s ease;
        }
        #top-notification-area .confirm-btn {
            background-color: var(--button-success-bg); 
            color: var(--button-success-text);
        }
        #top-notification-area .confirm-btn:hover {
            background-color: var(--button-success-hover-bg);
        }
        #top-notification-area .cancel-btn,
        #top-notification-area .secondary-btn {
            background-color: var(--button-secondary-bg);
            color: var(--button-secondary-text);
            border-color: var(--button-secondary-border);
        }
        #top-notification-area .cancel-btn:hover,
        #top-notification-area .secondary-btn:hover {
            background-color: var(--button-secondary-hover-bg);
        }
         #top-notification-area .danger-btn {
            background-color: var(--button-danger-bg); 
            color: var(--button-danger-text);
        }
        #top-notification-area .danger-btn:hover {
            background-color: var(--button-danger-hover-bg);
        }
        .copy-confirmation { 
            font-size: 0.8em;
            color: var(--copy-confirmation-text);
            margin-left: 5px;
            display: inline-block; 
        }

        .editor-container { 
            position: relative; 
            width: 100%;
            flex-grow: 1; 
            display: flex; 
            flex-direction: column;
            min-height: 0; 
        }
        .writing-area.fullscreen-mode .editor-container {
            max-width: 80ch;
            width: 100%;
        }


        .editor-toolbar {
            position: absolute;
            top: 5px;
            right: 20px; /* Adjusted */
            display: flex;
            gap: 3px; 
            padding: 4px; 
            background-color: var(--editor-toolbar-bg);
            border-radius: 4px;
            z-index: 10; 
            opacity: 0.7;
            transition: opacity 0.2s ease-in-out;
        }
        .editor-toolbar:hover {
            opacity: 1;
        }

        .editor-toolbar button {
            position: relative; 
            padding: 3px 6px; 
            font-size: 13px; 
            background-color: var(--editor-toolbar-button-bg);
            color: var(--editor-toolbar-button-text);
            border: 1px solid var(--button-secondary-border);
            border-radius: 3px;
            cursor: pointer;
            min-width: 28px; 
        }
        .editor-toolbar button:hover {
            background-color: var(--editor-toolbar-button-hover-bg);
        }
        .editor-toolbar button.active { 
            background-color: var(--editor-toolbar-button-active-bg);
            color: var(--editor-toolbar-button-active-text);
            border-color: var(--button-primary-bg); 
        }
        body.dark-mode .editor-toolbar button.active { 
            background-color: #5dade2; 
            color: white; 
            border-color: #3498db; 
        }


        /* Custom Tooltip Styles */
        .editor-toolbar button::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            margin-bottom: 5px; 
            background-color: var(--tooltip-bg);
            color: var(--tooltip-text);
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.75em; /* Adjusted font size */
            white-space: nowrap;
            z-index: 20; 
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.1s ease-out, visibility 0.1s ease-out; 
            pointer-events: none; 
        }
        .editor-toolbar button:hover::after {
            visibility: visible;
            opacity: 1;
            transition-delay: 0s; 
        }


        #editor {
            height: 75vh; 
            border: 1px solid var(--editor-border);
            padding: 15px;
            padding-top: 40px; 
            font-size: 16px;
            border-radius: 8px;
            background-color: var(--editor-bg);
            color: var(--text-color); 
            white-space: pre-wrap;
            overflow-wrap: break-word;
            overflow-y: auto; 
            outline: none;
            width: 100%; 
            box-sizing: border-box; 
        }
        .writing-area.fullscreen-mode #editor {
            height: 85vh; 
            max-width: 80ch; 
            width: 100%;
            flex-grow: 0; 
        }


        #editor:focus {
            border-color: var(--editor-focus-border);
            box-shadow: 0 0 0 3px var(--editor-focus-shadow);
        }

        .sidebar {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        body.fullscreen-active .sidebar {
            display: none;
        }

        .sidebar-top-controls { 
            display: flex;
            gap: 10px; 
            margin-bottom: 20px; 
        }
        .sidebar-top-controls button {
            flex-grow: 1; 
            padding: 8px 10px; 
            font-size: 14px; 
            background-color: var(--button-secondary-bg);
            color: var(--button-secondary-text);
            border: 1px solid var(--button-secondary-border);
            border-radius: 6px; 
            cursor: pointer; 
            transition: background-color 0.2s ease; 
        }
        .sidebar-top-controls button:hover {
             background-color: var(--button-secondary-hover-bg);
        }


        .sidebar-section {
            background-color: var(--sidebar-section-bg);
            padding: 15px;
            border-radius: 8px;
            border: 1px solid var(--border-color);
            transition: background-color 0.3s ease, border-color 0.3s ease; 
        }
        .sidebar-section.session-complete-highlight {
            background-color: var(--notification-success-bg); 
            border-color: var(--notification-success-border); 
        }
        body.dark-mode .sidebar-section.session-complete-highlight {
             background-color: var(--notification-success-bg); 
             border-color: var(--notification-success-border); 
        }


        .sidebar-section h3 {
            margin-top: 0;
            color: var(--sidebar-heading-color);
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 8px;
            margin-bottom: 12px;
            font-size: 1.1em;
        }

        .sidebar-section .stat-block {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
            flex-wrap: nowrap; 
        }
        .sidebar-section .stat-block .stat-label {
            margin: 0;
            margin-right: 10px; 
            color: var(--sidebar-text-color);
            white-space: nowrap;
            flex-shrink: 0; 
        }
        .sidebar-section .stat-block .stat-value-group { 
            display: flex;
            align-items: center;
            gap: 8px;
            flex-grow: 1; 
            justify-content: flex-end; 
        }
        .sidebar-section .stat-block .stat-value-group p,
        .sidebar-section .stat-block .stat-value-group span {
            margin: 0;
            font-weight: 600;
            color: var(--heading-color); 
        }
        .sidebar-section > p { /* For Sentence Count */
            margin: 8px 0;
            color: var(--sidebar-text-color);
            display: flex; 
            justify-content: space-between;
            align-items: center;
        }
         .sidebar-section > p span {
             font-weight: 600;
             color: var(--heading-color);
         }


        .sidebar-section label { 
            display: block;
            margin-bottom: 6px;
            font-weight: 500;
            color: var(--sidebar-text-color);
        }
        .sidebar-section input[type="number"] { 
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid var(--editor-border);
            background-color: var(--editor-bg);
            color: var(--text-color);
            border-radius: 6px;
            font-size: 15px;
        }
        
        #edit-target-btn, #edit-word-target-btn { 
            background: none;
            border: 1px solid transparent; 
            padding: 0 4px; 
            cursor: pointer;
            font-size: 0.85em; 
            color: var(--link-color); 
            border-radius: 4px;
            font-weight: 500;
            line-height: 1.6; 
        }
        #edit-target-btn:hover, #edit-word-target-btn:hover {
            background-color: var(--link-hover-bg);
            text-decoration: underline;
        }
        #edit-target-btn:disabled, #edit-word-target-btn:disabled {
            color: var(--button-disabled-text) !important;
            cursor: not-allowed;
            background-color: transparent !important;
            text-decoration: none;
        }

        #edit-target-controls, #edit-word-target-controls { 
            display: none; 
            margin-top: 5px; 
            margin-bottom: 10px; 
            padding: 10px;
            background-color: var(--sidebar-section-bg); 
            border-radius: 6px;
            border: 1px solid var(--border-color);
        }
        #edit-target-controls label, #edit-word-target-controls label {
            display: block; 
            margin-bottom: 5px;
            font-size: 0.9em;
            color: var(--sidebar-text-color);
        }
        #edit-target-controls input[type="number"], 
        #edit-word-target-controls input[type="number"] {
            width: 100%; 
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid var(--editor-border); 
            background-color: var(--editor-bg); 
            color: var(--text-color); 
            border-radius: 6px;
            font-size: 14px;
            margin-bottom: 8px; 
        }
        #set-new-target-btn, #set-new-word-target-btn { 
            display: block; 
            width: auto; 
            padding: 8px 10px;
            font-size: 14px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            background-color: var(--button-success-bg);
            color: var(--button-success-text);
            font-weight: 500;
            transition: background-color 0.2s ease;
        }
        #set-new-target-btn:hover, #set-new-word-target-btn:hover {
            background-color: var(--button-success-hover-bg);
        }

        #save-txt-btn { 
            display: block;
            width: 100%;
            padding: 10px 15px;
            font-size: 15px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            background-color: var(--button-primary-bg);
            color: var(--button-primary-text);
            font-weight: 500;
            transition: background-color 0.2s ease;
            text-align: center;
        }
        #save-txt-btn:hover {
            background-color: var(--button-primary-hover-bg);
        }


        #start-session-btn { background-color: var(--button-success-bg); color: var(--button-success-text); }
        #start-session-btn:hover { background-color: var(--button-success-hover-bg); }
        #pause-resume-btn { background-color: var(--button-warning-bg); color: var(--button-warning-text); }
        #pause-resume-btn:hover { background-color: var(--button-warning-hover-bg); }
        #reset-session-btn { background-color: var(--button-danger-bg); color: var(--button-danger-text); }
        #reset-session-btn:hover { background-color: var(--button-danger-hover-bg); }

        button:disabled {
            background-color: var(--button-disabled-bg) !important;
            color: var(--button-disabled-text) !important;
            cursor: not-allowed;
            transform: none !important;
        }
        #edit-target-btn:disabled, #edit-word-target-btn:disabled { 
             color: var(--button-disabled-text) !important;
             background-color: transparent !important;
        }


        #sidebar-message-area { 
            margin-top: 15px;
            padding: 10px;
            border-radius: 6px;
            text-align: center;
            font-weight: 500;
            display: none;
        }
        #sidebar-message-area.success { background-color: var(--notification-success-bg); color: var(--notification-success-text); border: 1px solid var(--notification-success-border); }
        #sidebar-message-area.info { background-color: var(--notification-info-bg); color: var(--notification-info-text); border: 1px solid var(--notification-info-border); }
        #sidebar-message-area.error { 
            background-color: var(--notification-error-bg); 
            color: var(--notification-error-text); 
            border: 1px solid var(--notification-error-border); 
        }


        /* Confetti Styles */
        .confetti-particle {
            position: fixed; 
            width: 10px;
            height: 10px;
            opacity: 0;
            pointer-events: none; 
            z-index: 10001; 
            border-radius: 2px;
        }
        
        /* Version History Styles */
        .version-history {
            width: 100%;
            max-width: 1200px;
            margin-top: 20px;
            padding: 15px;
            background-color: var(--version-history-bg);
            border-radius: 8px;
            font-size: 0.9em;
            color: var(--version-history-text);
        }
        body.fullscreen-active .version-history {
            display: none;
        }
        .version-history h3 {
            margin-top: 0;
            color: var(--version-history-heading);
        }
        .version-history ul {
            list-style-type: disc;
            padding-left: 20px;
        }
        .version-history li {
            margin-bottom: 5px;
        }

        /* Fullscreen Stats & Settings Styles */
        #fullscreen-stats-container {
            position: fixed;
            bottom: 10px;
            right: 10px;
            background-color: var(--fs-stats-bg);
            color: var(--fs-stats-text);
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 0.9em;
            z-index: 10002; 
            display: none; 
        }
        #fullscreen-stats-container p {
            margin: 3px 0;
        }

        #fullscreen-settings-btn {
            position: fixed;
            top: 45px;
            right: 10px;
            background: none;
            border: none;
            font-size: 1.8em; 
            color: var(--fs-settings-icon-color);
            cursor: pointer;
            z-index: 10003;
            display: none; 
            padding: 5px;
        }
         #fullscreen-settings-btn:hover {
            opacity: 0.8;
        }


        #fullscreen-settings-modal {
            position: fixed;
            top: 50px; 
            right: 15px;
            background-color: var(--fs-settings-modal-bg);
            border: 1px solid var(--fs-settings-modal-border);
            border-radius: 6px;
            padding: 15px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 10002;
            display: none; 
            color: var(--fs-settings-modal-text);
        }
        #fullscreen-settings-modal h4 {
            margin-top: 0;
            margin-bottom: 10px;
            color: var(--heading-color);
        }
        #fullscreen-settings-modal label {
            display: block;
            margin-bottom: 8px;
            cursor: pointer;
        }
        #fullscreen-settings-modal input[type="checkbox"] {
            margin-right: 8px;
            vertical-align: middle;
        }
        #fullscreen-settings-modal .fs-setting-group { /* Group for progress bar toggle */
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid var(--border-color);
        }
        #fullscreen-settings-modal button { /* For FS Dark Mode Toggle */
            margin-top: 10px;
            padding: 6px 10px;
            font-size: 13px;
            width: 100%;
            background-color: var(--button-secondary-bg);
            color: var(--button-secondary-text);
            border: 1px solid var(--button-secondary-border);
        }
         #fullscreen-settings-modal button:hover {
            background-color: var(--button-secondary-hover-bg);
        }


        @media (min-width: 769px) and (max-width: 1119.98px) { 
             .sidebar-section .stat-block {
                flex-direction: column;
                align-items: flex-start;
            }
            .sidebar-section .stat-block .stat-label {
                margin-bottom: 4px;
                margin-right: 0;
            }
            .sidebar-section .stat-block .stat-value-group {
                width: 100%; 
                justify-content: space-between; 
            }
        }

        @media (max-width: 768px) {
            .app-container { flex-direction: column; padding: 15px; }
            .writing-area, .sidebar { flex: none; width: 100%; }
            .writing-area-header { flex-direction: column; align-items: flex-start; }
            .writing-area-header h2 { margin-bottom: 10px; }
            .writing-controls { width: 100%; justify-content: space-around; }
            .writing-controls button { flex-grow: 1; margin-left: 0; }
            #editor { 
                min-height: 300px; 
                height: 50vh; 
            }
            .writing-area.fullscreen-mode #editor,
            .writing-area.fullscreen-mode .writing-area-header,
            .writing-area.fullscreen-mode #top-notification-area {
                 max-width: 95%; 
            }
            .sidebar-top-controls {
                flex-direction: column; 
            }
            .sidebar-top-controls button {
                width: 100%; 
            }
            #fullscreen-settings-btn {
                font-size: 1.5em; 
                top: 10px;
                right: 10px;
            }
            #fullscreen-settings-modal {
                top: 45px;
                right: 10px;
                padding: 10px;
            }
            #fullscreen-stats-container {
                font-size: 0.8em;
                padding: 6px 10px;
                bottom: 5px;
                right: 5px;
            }
            .sidebar-section .stat-block {
                flex-direction: row; 
                align-items: center;
            }
            .sidebar-section .stat-block .stat-label {
                 margin-bottom: 0; 
                 margin-right: 10px;
            }
        }