/* Header toggle functionality */
        #editor-header {
            transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
            max-height: 200px;
            opacity: 1;
            overflow: hidden;
        }
        
        #editor-wrapper.header-hidden #editor-header {
            max-height: 0;
            opacity: 0;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            border-bottom: none !important;
        }

        /* Focus mode functionality - hide all UI chrome */
        body.focus-mode #editor-header,
        body.focus-mode .toolbar,
        body.focus-mode #wordsmith-btn,
        body.focus-mode .scratchpad-icon-container,
        body.focus-mode .content-library-icon-container,
        body.focus-mode .editor-tabs,
        body.focus-mode #main-sync-button,
        body.focus-mode #main-screenshot-button,
        body.focus-mode #sync-button,
        body.focus-mode #playground-screenshot-button,
        body.focus-mode #actions-dropdown,
        body.focus-mode #published-posts-btn,
        body.focus-mode #logout-btn,
        body.focus-mode #scratchpad-toggle-btn,
        body.focus-mode #content-discovery-toggle-btn,
        body.focus-mode .toggle-btn,
        body.focus-mode .minimal-btn:not(#exit-focus-mode-btn),
        body.focus-mode #action-icons-container,
        body.focus-mode select,
        body.focus-mode #font-size-selector,
        body.focus-mode-exiting #editor-header,
        body.focus-mode-exiting .toolbar,
        body.focus-mode-exiting #wordsmith-btn,
        body.focus-mode-exiting .scratchpad-icon-container,
        body.focus-mode-exiting .content-library-icon-container,
        body.focus-mode-exiting .editor-tabs,
        body.focus-mode-exiting #main-sync-button,
        body.focus-mode-exiting #main-screenshot-button,
        body.focus-mode-exiting #sync-button,
        body.focus-mode-exiting #playground-screenshot-button,
        body.focus-mode-exiting #actions-dropdown,
        body.focus-mode-exiting #published-posts-btn,
        body.focus-mode-exiting #logout-btn,
        body.focus-mode-exiting #scratchpad-toggle-btn,
        body.focus-mode-exiting #content-discovery-toggle-btn,
        body.focus-mode-exiting .toggle-btn,
        body.focus-mode-exiting .minimal-btn,
        body.focus-mode-exiting #action-icons-container,
        body.focus-mode-exiting select,
        body.focus-mode-exiting #font-size-selector {
            display: none !important;
        }
        
        /* Hide the editor wrapper's border and styling but keep it visible */
        body.focus-mode #editor-wrapper {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            padding: 0 !important;
            margin: 0 !important;
            max-width: none !important;
        }
        
        /* Focus mode styling - animations handled by GSAP */
        body.focus-mode #editor,
        body.focus-mode-exiting #editor {
            z-index: 1000;
        }
        
        /* Hide all scrollbars in focus mode */
        body.focus-mode::-webkit-scrollbar,
        body.focus-mode *::-webkit-scrollbar,
        body.focus-mode-exiting::-webkit-scrollbar,
        body.focus-mode-exiting *::-webkit-scrollbar {
            display: none;
            width: 0;
            height: 0;
        }
        
        body.focus-mode,
        body.focus-mode-exiting {
            overflow: hidden;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        
        body.focus-mode #editor,
        body.focus-mode-exiting #editor {
            -ms-overflow-style: none;
            scrollbar-width: none;
            overflow-y: auto;
        }
        
        body.focus-mode #exit-focus-mode-btn {
            display: block !important;
            position: fixed;
            top: 2rem;
            right: 2rem;
            z-index: 1001;
            opacity: 0;
            animation: exitBtnFadeIn 0.3s ease-out 0.2s forwards;
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            padding: 0.5rem !important;
            color: #8B7355;
            cursor: pointer;
        }
        
        body.focus-mode #exit-focus-mode-btn:hover {
            color: #2d1810 !important;
            background: transparent !important;
            border: none !important;
        }
        
        @keyframes exitBtnFadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        body {
            font-family: 'adobe-caslon-pro', 'Lora', serif;
            background: 
                linear-gradient(rgba(254, 240, 220, 0.5), rgba(254, 240, 220, 0.5)),
                url('/newtexture.webp?cb=8') !important;
            background-size: auto;
            background-repeat: repeat;
            background-position: center;
            background-attachment: fixed;
            overflow-x: hidden;
            -webkit-text-size-adjust: 100%;
            -moz-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            text-size-adjust: 100%;
        }
        
        /* Specific handling for emoji + text in tabs */
        .editor-tab * {
            vertical-align: middle !important;
            line-height: inherit !important;
        }
        .editor-container {
            position: relative;
        }

        /* Center editor wrapper when panel is open */
        #editor-panel.panel-open #editor-wrapper {
            margin-left: auto;
            margin-right: auto;
        }
        .editor-content, #scratchpad-content, #editor, #playground-editor {
            font-family: 'adobe-caslon-pro', 'Lora', serif;
            color: #1a1a1a;
            line-height: 1.4;
            position: relative;
            background: 
                linear-gradient(rgba(254, 240, 220, 0.5), rgba(254, 240, 220, 0.5)),
                url('/newtexture.webp?cb=8');
            background-size: auto;
            background-repeat: repeat;
            background-position: center;
            background-attachment: scroll;
            overflow-x: hidden;
            caret-color: #1a1a1a;
        }
        .editor-content {
             padding: 3rem 4rem 4rem 3rem;
             font-size: 1.125rem;
             border-radius: 8px;
             box-shadow: 0 4px 20px rgba(139, 69, 19, 0.08), inset 0 0 30px rgba(160, 82, 45, 0.03);
             margin: 1rem;
             min-height: 60vh;
        }
        #scratchpad-content {
            padding: 2rem;
            font-size: 1rem;
            height: 100%;
            min-height: 100%;
        }
        .editor-content:focus, #scratchpad-content:focus {
            outline: none;
        }
        .editor-content.is-empty::before {
            content: 'Type or paste your text here...';
            position: absolute;
            left: 3rem;
            top: 3rem;
            color: #1a1a1a !important;
            pointer-events: none;
            font-style: normal;
            z-index: 2;
        }
        #scratchpad-content.is-empty::before {
            content: 'Your notes go here...';
            position: absolute;
            left: 2rem;
            top: 2rem;
            color: #1a1a1a !important;
            pointer-events: none;
            font-style: normal;
            z-index: 2;
        }

        .editor-content p, .editor-content div, #scratchpad-content div {
            margin-bottom: 1.5rem;  /* Match published view spacing */
            min-height: 1.75rem;
            color: #1a1a1a;
        }
        
        /* Link styling for editor */
        .editor-content a, #scratchpad-content a, #editor a, #playground-editor a {
            color: #8B4513;
            text-decoration: underline;
            cursor: pointer;
        }
        
        .editor-content a:hover, #scratchpad-content a:hover, #editor a:hover, #playground-editor a:hover {
            color: #A0522D;
            text-decoration: underline;
        }
        
        /* Image styling for editor to match publish view */
        #editor img, #playground-editor img, .editor-content img {
            display: block;
            max-width: 600px;
            width: 100%;
            height: auto;
            margin: 16px auto;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        /* Image container in editor */
        #editor .inline-image-container, #playground-editor .inline-image-container {
            display: block;
            text-align: center;
            margin: 16px 0;
        }
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; }
        ::-webkit-scrollbar-thumb { background: #d1d5db; }
        ::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

        .action-icon, .suggestion-control {
            cursor: pointer;
            transition: all 0.2s ease-in-out;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .sidebar { 
            transition: transform 0.3s ease-in-out;
            will-change: transform;
        }
        #history-sidebar, #style-sidebar, #posts-sidebar {
            transform: translateX(-100%);
        }
        #history-sidebar.is-open, #style-sidebar.is-open, #posts-sidebar.is-open {
            transform: translateX(0);
        }
        #scratchpad-sidebar, #content-discovery-sidebar {
            transform: translateX(100%);
        }
        #scratchpad-sidebar.is-open, #content-discovery-sidebar.is-open {
            transform: translateX(0);
        }

        .sidebar-button { transition: background-color 0.2s, color 0.2s; }
        .key-phrase {
            background: linear-gradient(to bottom, 
                transparent 0%, 
                transparent 15%, 
                rgba(252, 211, 77, 0.8) 15%, /* darker yellow to match hover */
                rgba(252, 211, 77, 0.8) 85%, 
                transparent 85%, 
                transparent 100%);
            cursor: pointer;
            transition: background 0.2s;
        }
        .key-phrase-selected {
            background: linear-gradient(to bottom, 
                transparent 0%, 
                transparent 15%, 
                rgba(254, 202, 202, 0.8) 15%, /* light red/pink */
                rgba(254, 202, 202, 0.8) 85%, 
                transparent 85%, 
                transparent 100%) !important;
        }
        .key-phrase:hover:not(.key-phrase-selected) { 
            background: linear-gradient(to bottom, 
                transparent 0%, 
                transparent 15%, 
                rgba(252, 211, 77, 0.8) 15%, /* amber-300 */
                rgba(252, 211, 77, 0.8) 85%, 
                transparent 85%, 
                transparent 100%);
        }
        .minimal-btn {
            padding: 0.65rem 1rem 0.35rem 1rem !important;
            font-weight: 600 !important;
            font-family: 'adobe-caslon-pro', 'Lora', serif !important;
            border: 1px solid #8B7355 !important;
            color: #8B7355 !important;
            background-color: #fefcf6 !important;
            background: linear-gradient(135deg, #fefcf6 0%, #f8f5ec 100%) !important;
            transition: all 0.15s ease-out;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-size: 0.875rem !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            vertical-align: middle !important;
            line-height: 1.2 !important;
            min-height: 2.5rem !important;
            box-sizing: border-box !important;
            box-shadow: 0 2px 4px rgba(139, 115, 85, 0.2), 0 1px 2px rgba(139, 115, 85, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
            cursor: pointer !important;
            transform: translateY(0) !important;
        }
        
        /* Publish page specific styles */
        .title-content {
            font-family: 'adobe-caslon-pro', 'Lora', serif !important;
            font-size: 3rem;
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 3rem;
            color: #1a1a1a;
            border: none;
            outline: none;
            background: transparent;
            text-align: center;
        }
        
        .title-content.is-empty::before {
            content: attr(data-placeholder);
            color: rgba(26, 26, 26, 0.4);
            font-style: normal;
            font-weight: 700;
            font-family: 'adobe-caslon-pro', 'Lora', serif !important;
        }
        
        .body-content {
            font-family: 'adobe-caslon-pro', 'Lora', serif !important;
            font-size: 1.125rem;
            line-height: 1.4;
            color: #1a1a1a;
            border: none;
            outline: none;
            background: transparent;
            max-width: none;
        }
        
        .body-content:focus, .title-content:focus {
            outline: none;
        }
        
        .body-content p, .body-content div {
            margin-bottom: 1rem;
        }
        
        /* Fix publish button styling on publish page */
        #publish-final-btn {
            background-color: #2d1810 !important;
            color: #fefcf6 !important;
            border-color: #2d1810 !important;
            background: #2d1810 !important;
        }
        
        /* Ensure fonts override Tailwind defaults */
        .title-content * {
            font-family: 'adobe-caslon-pro', 'Lora', serif !important;
        }
        
        .body-content * {
            font-family: 'adobe-caslon-pro', 'Lora', serif !important;
        }
        
        /* Margin Notes Styling */
        .margin-note {
            font-family: 'adobe-caslon-pro', 'Lora', serif !important;
            font-size: 0.75rem;
            line-height: 1.4;
            color: #1a1a1a;
            position: absolute;
            max-width: 240px;
            padding: 0.5rem;
            pointer-events: auto;
            z-index: 10;
        }
        
        .margin-note.editing {
            border: 1px solid rgba(26, 26, 26, 0.2);
            background: rgba(250, 247, 235, 0.8);
            border-radius: 4px;
        }
        
        /* Highlight styles for publish view */
        .publish-highlight {
            background-position: 0 -0.1em;
            position: relative;
            transition: background 0.2s;
        }
        
        /* Highlight-only text (green) - HIGH SPECIFICITY */
        .publish-highlight.publish-highlight-only {
            background: linear-gradient(to bottom, 
                transparent 0%, 
                transparent 15%, 
                rgba(179, 229, 97, 0.5) 15%, /* green highlight */
                rgba(179, 229, 97, 0.5) 85%, 
                transparent 85%, 
                transparent 100%) !important;
            background-position: 0 -0.1em !important;
        }
        
        /* Highlight with notes (yellow) */
        .publish-highlight-with-note {
            background: linear-gradient(to bottom, 
                transparent 0%, 
                transparent 15%, 
                rgba(255, 220, 116, 0.5) 15%, /* yellow for notes */
                rgba(255, 220, 116, 0.5) 85%, 
                transparent 85%, 
                transparent 100%);
            cursor: pointer;
        }
        
        .publish-highlight-with-note:hover {
            background: linear-gradient(to bottom, 
                transparent 0%, 
                transparent 15%, 
                rgba(255, 220, 116, 0.7) 15%, /* slightly more opaque on hover */
                rgba(255, 220, 116, 0.7) 85%, 
                transparent 85%, 
                transparent 100%);
        }
        
        /* Visual highlights for main editor - same green as publish view */
        .editor-highlight {
            background: linear-gradient(to bottom, 
                transparent 0%, 
                transparent 15%, 
                rgba(179, 229, 97, 0.5) 15%, /* green highlight - same as publish view */
                rgba(179, 229, 97, 0.5) 85%, 
                transparent 85%, 
                transparent 100%) !important;
            background-position: 0 -0.1em !important;
            position: relative;
            transition: background 0.2s;
        }
        
        /* Future: Editor highlights with notes (yellow) */
        .editor-highlight-with-note {
            background: linear-gradient(to bottom, 
                transparent 0%, 
                transparent 15%, 
                rgba(255, 220, 116, 0.5) 15%, /* yellow for notes */
                rgba(255, 220, 116, 0.5) 85%, 
                transparent 85%, 
                transparent 100%) !important;
            cursor: pointer;
        }
        
        .editor-highlight-with-note:hover {
            background: linear-gradient(to bottom, 
                transparent 0%, 
                transparent 15%, 
                rgba(255, 220, 116, 0.7) 15%, /* slightly more opaque on hover */
                rgba(255, 220, 116, 0.7) 85%, 
                transparent 85%, 
                transparent 100%) !important;
        }
        
        /* Glow effect for connected notes */
        .margin-note.glow {
            background: rgba(255, 255, 0, 0.1);
            box-shadow: 0 0 8px rgba(255, 255, 0, 0.3);
            transition: all 0.2s ease;
        }
        
        /* Mobile responsive - increased breakpoint to prevent note overlap */
        @media (max-width: 1300px) {
            #left-margin, #right-margin {
                display: none;
            }
            
            .margin-note {
                display: none;
            }
            
            .note-popup {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: rgba(250, 247, 235, 0.95);
                border: 1px solid rgba(26, 26, 26, 0.2);
                border-radius: 8px;
                padding: 1rem;
                max-width: min(80vw, 400px);
                min-width: 300px;
                z-index: 1000;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
                word-wrap: break-word;
                overflow-wrap: break-word;
                box-sizing: border-box;
            }
            
            .note-popup * {
                box-sizing: border-box;
                max-width: 100%;
            }
            
            .note-popup textarea {
                resize: vertical;
                min-height: 80px;
                max-height: 200px;
                word-wrap: break-word;
            }
            
            .note-popup-overlay {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.3);
                z-index: 999;
            }
        }
        
        /* Target specific problematic buttons */
        #modify-btn, #clear-btn, #transform-btn, #apply-transform-btn, #cancel-transform-btn,
        #analyze-pacing-btn, #graph-type-toggle-btn {
            padding: 0.65rem 1rem 0.35rem 1rem !important;
            text-align: center !important;
            line-height: 1.2 !important;
        }
        
        /* Special handling for analyze buttons with !p-2 override */
        #analyze-pacing-btn, #graph-type-toggle-btn {
            padding: 0.7rem 1rem 0.5rem 1rem !important;
            margin: 0 !important;
        }
        
        /* Active states for analyze buttons */
        #analyze-pacing-btn.active, #graph-type-toggle-btn.active {
            background: #8B7355 !important;
            background-color: #8B7355 !important;
            color: #fefcf6 !important;
            border-color: #8B7355 !important;
        }
        #analyze-pacing-btn:hover, #graph-type-toggle-btn:hover {
            background: #8B7355 !important;
            background-color: #8B7355 !important;
            color: #fefcf6 !important;
            border-color: #8B7355 !important;
        }
        .minimal-btn.invisible { visibility: hidden; }
        .minimal-btn:hover { 
            background: linear-gradient(135deg, #8B7355 0%, #A0643D 100%) !important;
            color: #fefcf6 !important;
            box-shadow: 0 3px 6px rgba(139, 115, 85, 0.3), 0 2px 4px rgba(139, 115, 85, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
            transform: translateY(-1px) !important;
        }
        .minimal-btn:active {
            background: linear-gradient(135deg, #A0643D 0%, #8B7355 100%) !important;
            color: #fefcf6 !important;
            box-shadow: 0 1px 2px rgba(139, 115, 85, 0.4), inset 0 2px 4px rgba(139, 115, 85, 0.2) !important;
            transform: translateY(1px) !important;
            transition: all 0.1s ease-out !important;
        }
        .minimal-btn.invisible:hover { background-color: transparent; color: #000; }
        .minimal-btn:disabled {
            border-color: #d1d5db;
            color: #9ca3af;
            cursor: not-allowed;
        }
        .minimal-btn:disabled:hover {
            background-color: transparent;
        }

        /* --- Suggestion Styling --- */
        .suggestion-wrapper {
            position: relative;
            display: inline;
            padding-top: 30px;
            margin-top: -30px;
            cursor: pointer;
        }
        .suggestion-deleted {
            text-decoration: line-through;
            color: #dc2626;
            background-color: rgba(254, 226, 226, 0.4); /* Reduced opacity from solid #fee2e2 */
            cursor: pointer;
        }
        .suggestion-inserted {
            background-color: rgba(220, 252, 231, 0.4); /* Reduced opacity from solid #dcfce7 */
            color: #16a34a;
            text-decoration: none;
            cursor: pointer;
        }
        .suggestion-controls {
            position: absolute;
            top: -2px;
            left: 50%;
            transform: translateX(-50%);
            display: none; /* Hidden by default */
            gap: 2px;
            background: linear-gradient(135deg, #fefcf6 0%, #f8f5ec 100%);
            border: 1px solid #8B7355;
            border-radius: 4px;
            padding: 2px;
            box-shadow: 0 4px 12px rgba(139, 115, 85, 0.25), 0 2px 6px rgba(139, 115, 85, 0.15);
            z-index: 10;
            pointer-events: auto;
        }
        .suggestion-controls.show {
            display: flex;
        }
        .suggestion-control {
            width: 20px !important;
            height: 20px !important;
            min-width: 20px !important;
            min-height: 20px !important;
            max-width: 20px !important;
            max-height: 20px !important;
            border: 1px solid #8B7355 !important;
            border-radius: 3px;
            font-size: 11px;
            font-weight: 600;
            padding: 0 !important;
            box-shadow: 0 2px 4px rgba(139, 115, 85, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
            transition: all 0.15s ease-out !important;
            cursor: pointer !important;
            transform: translateY(0) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
        .suggestion-control.accept { 
            background: linear-gradient(135deg, #f0f9f3 0%, #e8f5e8 100%); 
            color: #16a34a; 
        }
        .suggestion-control.accept:hover { 
            background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); 
            color: #fefcf6; 
            border-color: #15803d !important;
            box-shadow: 0 3px 8px rgba(22, 163, 74, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
            transform: translateY(-1px) !important;
        }
        .suggestion-control.accept:active {
            background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
            transform: translateY(1px) !important;
            box-shadow: inset 0 2px 3px rgba(22, 163, 74, 0.3) !important;
        }
        .suggestion-control.reject { 
            background: linear-gradient(135deg, #fef7f7 0%, #fdf2f2 100%); 
            color: #dc2626; 
        }
        .suggestion-control.reject:hover { 
            background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); 
            color: #fefcf6; 
            border-color: #b91c1c !important;
            box-shadow: 0 3px 8px rgba(220, 38, 38, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
            transform: translateY(-1px) !important;
        }
        .suggestion-control.reject:active {
            background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
            transform: translateY(1px) !important;
            box-shadow: inset 0 2px 3px rgba(220, 38, 38, 0.3) !important;
        }
        .suggestion-control.refresh { 
            background: linear-gradient(135deg, #f7f9fc 0%, #f1f5f9 100%); 
            color: #3b82f6; 
        }
        .suggestion-control.refresh:hover { 
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); 
            color: #fefcf6; 
            border-color: #2563eb !important;
            box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
            transform: translateY(-1px) !important;
        }
        .suggestion-control.refresh:active {
            background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
            transform: translateY(1px) !important;
            box-shadow: inset 0 2px 3px rgba(59, 130, 246, 0.3) !important;
        }
        .suggestion-control.copy { 
            background: linear-gradient(135deg, #f9f7ff 0%, #f3f0ff 100%); 
            color: #7c3aed; 
        }
        .suggestion-control.copy:hover { 
            background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%); 
            color: #fefcf6; 
            border-color: #6d28d9 !important;
            box-shadow: 0 3px 8px rgba(124, 58, 237, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
            transform: translateY(-1px) !important;
        }
        .suggestion-control.copy:active {
            background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%);
            transform: translateY(1px) !important;
            box-shadow: inset 0 2px 3px rgba(124, 58, 237, 0.3) !important;
        }
        .suggestion-control.refresh.loading svg, .idea-card-refresh.loading svg {
             animation: spin 1s linear infinite;
        }
        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        
        .toggle-btn {
            box-shadow: 0 2px 4px rgba(139, 115, 85, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
            transition: all 0.15s ease-out !important;
            transform: translateY(0) !important;
            background: linear-gradient(135deg, #fefcf6 0%, #f8f5ec 100%) !important;
        }
        .toggle-btn:hover {
            box-shadow: 0 3px 6px rgba(139, 115, 85, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
            transform: translateY(-1px) !important;
        }
        .toggle-btn:active {
            box-shadow: inset 0 2px 4px rgba(139, 115, 85, 0.2) !important;
            transform: translateY(1px) !important;
        }
        .toggle-btn.active, .toggle-btn.active:hover {
            background: linear-gradient(135deg, #8B7355 0%, #A0643D 100%) !important;
            color: #fefcf6 !important;
            box-shadow: 0 2px 4px rgba(139, 115, 85, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
            transform: translateY(0) !important;
        }
        .toggle-btn.active:active {
            box-shadow: inset 0 2px 4px rgba(139, 115, 85, 0.3) !important;
            transform: translateY(1px) !important;
        }
        .toggle-btn.active svg {
            color: #fefcf6 !important;
            stroke: #fefcf6 !important;
            fill: none !important;
        }

        /* --- Wordsmith Popover --- */
        #wordsmith-popover {
            position: absolute;
            z-index: 50;
            background-color: #fefcf6;
            border: 1px solid #A0643D;
            box-shadow: 0 4px 12px rgba(139, 115, 85, 0.15);
            min-width: 180px;
            display: none;
        }
        #wordsmith-popover-header {
            padding: 0.75rem;
            font-weight: 600;
            border-bottom: 1px solid #A0643D;
            text-align: center;
        }
        #wordsmith-popover-suggestions {
            max-height: 150px;
            overflow-y: auto;
        }
        .wordsmith-suggestion {
            padding: 0.5rem 0.75rem;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .wordsmith-suggestion:hover {
            background-color: #f0ede6;
        }
        #wordsmith-popover-footer {
            padding: 0.5rem;
            border-top: 1px solid #A0643D;
            text-align: center;
        }
        #open-wordsmith-sidebar-btn {
            background: none;
            border: none;
            color: #4b5563;
            font-weight: 600;
            cursor: pointer;
            padding: 0.25rem;
            width: 100%;
        }
        #open-wordsmith-sidebar-btn:hover {
            color: #000;
            text-decoration: underline;
        }
        
        /* --- Rhythm Graph --- */
        #rhythm-graph-container {
            height: 140px;
            background-color: #f5f2ec;
            border-top: 1px solid #A0643D;
            padding: 0.75rem 1rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            transition: opacity 0.3s;
        }
        #rhythm-graph-container.hidden {
            display: none;
        }
        #rhythm-graph-controls {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            padding: 1rem;
            background-color: rgba(254, 252, 246, 0.8);
            border-radius: 8px;
            border: 1px solid #D2B48C;
        }
        #analyze-pacing-btn, #graph-type-toggle-btn {
            flex-shrink: 0;
            margin: 0;
        }
        #rhythm-graph-stats {
            flex-shrink: 0;
            font-family: 'adobe-caslon-pro', 'Lora', serif;
            font-size: 0.875rem;
            color: #4b5563;
            min-width: 280px; /* Give it some space */
        }
        #rhythm-graph-svg {
            flex-grow: 1;
            height: 100%;
        }
        .rhythm-bar {
            fill: #d1d5db; /* gray-400 */
            transition: fill 0.2s ease-in-out;
            cursor: pointer;
        }
        .rhythm-bar:hover {
            fill: #6b7280; /* gray-600 */
        }
        .rhythm-bar.active {
            fill: #111827; /* gray-900 */
        }
        .rhythm-bar.monotony {
            fill: #fcd34d; /* amber-300 */
        }
        .sentence-highlight {
            background-color: rgba(252, 211, 77, 0.3); /* amber-300 with opacity */
            transition: background-color 0.2s;
        }
        .stat-item {
            position: relative;
            cursor: help;
        }
        .stat-tooltip {
            visibility: hidden;
            width: 240px;
            background-color: #1f2937;
            color: #fff;
            text-align: left;
            border-radius: 6px;
            padding: 8px 12px;
            position: absolute;
            z-index: 1;
            bottom: 50%;
            right: 105%;
            transform: translateY(50%);
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
        }
        .stat-item:hover .stat-tooltip {
            visibility: visible;
            opacity: 1;
        }

        /* --- Modifier Sidebar Styles --- */
        .modifier-section {
            border: 1px solid #A0643D;
            padding: 1rem;
            margin-bottom: 1.5rem;
        }
        .modifier-section-title {
            font-weight: 700;
            font-size: 1.125rem;
            font-family: 'adobe-caslon-pro', 'Lora', serif;
            text-align: center;
            margin-bottom: 1rem;
        }
        .modifier-control-group {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0.75rem;
        }
        .modifier-label {
            font-weight: 600;
            font-family: 'adobe-caslon-pro', 'Lora', serif;
            color: #374151;
            flex-shrink: 0;
            margin-right: 1rem;
        }
        .modifier-select, .modifier-input, .modifier-textarea {
            width: 100%;
            border: 1px solid #A0643D;
            padding: 0.375rem 0.5rem;
            background-color: #fefcf6;
            font-family: 'adobe-caslon-pro', 'Lora', serif;
            font-size: 0.875rem;
        }
        .modifier-select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            padding-right: 2rem;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.6rem center;
            cursor: pointer;
        }
        .modifier-select:disabled, .modifier-input:disabled, .modifier-textarea:disabled {
            background-color: #f3f4f6;
            cursor: not-allowed;
            color: #9ca3af;
            border-color: #d1d5db;
        }
        
        /* --- Transform Modal Styles --- */
        .transform-controls-container, .clean-controls-container {
            display: none;
        }
        .transform-controls-container.active, .clean-controls-container.active {
            display: block;
        }
        .transform-description {
            background-color: #f5f2ec;
            border: 1px solid #A0643D;
            padding: 0.75rem 1rem;
            text-align: center;
            border-radius: 0.25rem;
            color: #8B7355;
            font-size: 0.875rem;
        }
        
        /* --- Ideas Sidebar Buttons --- */
        .refresh-stack-btn {
            background: none !important;
            border: none !important;
            color: #8B7355 !important;
            cursor: pointer !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 24px !important;
            height: 24px !important;
            padding: 0 !important;
            transition: color 0.2s ease !important;
        }
        .refresh-stack-btn:hover {
            color: #A0643D !important;
        }
        .refresh-stack-btn:disabled {
            color: #d1d5db !important;
            cursor: not-allowed !important;
        }
        .refresh-stack-btn.loading {
            color: #8B7355 !important;
        }
        .refresh-stack-btn.loading svg {
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        #copy-selected-ideas-btn.minimal-btn {
            background: linear-gradient(135deg, #8B7355 0%, #A0643D 100%) !important;
            color: #fefcf6 !important;
            border-color: #8B7355 !important;
        }

        /* Icon-only buttons need equal padding to center icons */
        #rhythm-graph-btn,
        #actions-menu-btn {
            padding: 0.5rem 1rem !important;
        }

        /* --- Custom Select Dropdown --- */
        #transform-select-trigger {
            transition: all 0.2s;
        }
        #transform-select-trigger:focus {
            box-shadow: 0 0 0 2px rgba(139, 115, 85, 0.5);
        }
        .transform-select-option {
            padding: 0.75rem 1.25rem;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .transform-select-option:hover {
            background-color: #f0ede6; /* warm cream */
        }
        .transform-select-option.selected {
            background-color: #8B7355;
            color: #fefcf6;
        }
        .transform-select-option .option-text {
            font-weight: 600;
        }
        .transform-select-option .option-desc {
            font-size: 0.875rem;
            color: #8B7355; /* warm brown */
        }
        .transform-select-option.selected .option-desc {
            color: #D2B48C; /* light brown */
        }

        /* --- Clean Select Dropdown --- */
        #clean-select-trigger {
            transition: all 0.2s;
        }
        #clean-select-trigger:focus {
            box-shadow: 0 0 0 2px rgba(139, 115, 85, 0.5);
        }
        .clean-select-option {
            padding: 0.75rem 1.25rem;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .clean-select-option:hover {
            background-color: #f0ede6; /* warm cream */
        }
        .clean-select-option.selected {
            background-color: #8B7355;
            color: #fefcf6;
        }
        .clean-select-option .option-text {
            font-weight: 600;
        }
        .clean-select-option .option-desc {
            font-size: 0.875rem;
            color: #8B7355; /* warm brown */
        }
        .clean-select-option.selected .option-desc {
            color: #D2B48C; /* light brown */
        }

        /* --- Sync Button Styles --- */
        #sync-button {
            position: absolute;
            top: 1rem;
            right: 1rem;
            width: 32px;
            height: 32px;
            background: none;
            border: none;
            color: #8B7355;
            cursor: pointer;
            transition: all 0.15s ease-out;
            z-index: 5;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.7;
        }
        #sync-button:hover {
            color: #A0643D;
            opacity: 1;
            transform: scale(1.1);
        }
        #sync-button:active {
            transform: scale(0.95);
        }
        #sync-button svg, #main-sync-button svg {
            width: 16px;
            height: 16px;
        }
        #main-sync-button {
            position: absolute;
            top: 1rem;
            right: 1rem;
            width: 32px;
            height: 32px;
            background: none;
            border: none;
            color: #8B7355;
            cursor: pointer;
            transition: all 0.15s ease-out;
            z-index: 5;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.7;
        }
        #main-sync-button:hover {
            color: #A0643D;
            opacity: 1;
            transform: scale(1.1);
        }
        #main-sync-button:active {
            transform: scale(0.95);
        }

        /* --- Screenshot Button Styles --- */
        #main-screenshot-button, #playground-screenshot-button {
            position: absolute;
            top: 1rem;
            right: 3rem; /* Position to the left of sync button */
            width: 32px;
            height: 32px;
            background: none;
            border: none;
            color: #8B7355;
            cursor: pointer;
            transition: all 0.15s ease-out;
            z-index: 5;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.7;
        }
        #main-screenshot-button:hover, #playground-screenshot-button:hover {
            color: #A0643D;
            opacity: 1;
            transform: scale(1.1);
        }
        #main-screenshot-button:active, #playground-screenshot-button:active {
            transform: scale(0.95);
        }
        #main-screenshot-button svg, #playground-screenshot-button svg {
            width: 16px;
            height: 16px;
        }

        #font-size-selector {
            padding: 0.65rem 0.5rem 0.35rem 0.5rem !important;
            width: 3.5rem !important;
            min-width: 3.5rem !important;
            max-width: 3.5rem !important;
            font-weight: 600 !important;
            font-family: 'adobe-caslon-pro', 'Lora', serif !important;
            border: 1px solid #8B7355 !important;
            border-style: solid !important;
            border-width: 1px !important;
            border-color: #8B7355 !important;
            color: #8B7355 !important;
            background: linear-gradient(135deg, #fefcf6 0%, #f8f5ec 100%) !important;
            transition: all 0.15s ease-out;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-size: 0.875rem !important;
            display: inline-block !important;
            text-align: center !important;
            vertical-align: top !important;
            line-height: 1.2 !important;
            min-height: 2.5rem !important;
            box-sizing: border-box !important;
            box-shadow: 0 2px 4px rgba(139, 115, 85, 0.2), 0 1px 2px rgba(139, 115, 85, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
            cursor: pointer !important;
            transform: translateY(0) !important;
            border-radius: 0 !important;
            appearance: none;
        }


        #font-size-selector:hover {
            background: linear-gradient(135deg, #f5f2ec 0%, #f0ede6 100%) !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 4px 8px rgba(139, 115, 85, 0.25), 0 2px 4px rgba(139, 115, 85, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
        }

        #font-size-selector:focus {
            outline: none;
            background: linear-gradient(135deg, #f5f2ec 0%, #f0ede6 100%) !important;
        }

        #font-size-selector:active {
            transform: translateY(1px) !important;
            box-shadow: 0 1px 2px rgba(139, 115, 85, 0.2), inset 0 1px 2px rgba(139, 115, 85, 0.1) !important;
        }

        /* --- Tab Styles --- */
        .editor-tabs {
            display: flex;
            border-bottom: 1px solid #A0643D;
            background-color: #fefcf6;
        }
        .editor-tab {
            padding: 0.9rem 1.5rem 0.6rem 1.5rem !important;
            cursor: pointer;
            font-weight: 600 !important;
            font-family: 'adobe-caslon-pro', 'Lora', serif !important;
            color: #8B7355 !important;
            border-right: 1px solid #A0643D !important;
            border-top: 1px solid #A0643D !important;
            background: linear-gradient(180deg, #f8f5ec 0%, #f5f2ec 100%) !important;
            transition: all 0.15s ease-out;
            display: inline-block !important;
            text-align: center !important;
            vertical-align: top !important;
            line-height: 1.2 !important;
            min-height: 3rem !important;
            box-sizing: border-box !important;
            box-shadow: 0 -2px 4px rgba(139, 115, 85, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
            transform: translateY(0) !important;
        }
        .editor-tab:hover {
            background: linear-gradient(180deg, #f0ede6 0%, #ede8de 100%) !important;
            box-shadow: 0 -3px 6px rgba(139, 115, 85, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
            transform: translateY(-1px) !important;
        }
        .editor-tab:active {
            background: linear-gradient(180deg, #ede8de 0%, #f0ede6 100%) !important;
            box-shadow: inset 0 2px 4px rgba(139, 115, 85, 0.2) !important;
            transform: translateY(1px) !important;
        }
        .editor-tab.active {
            background: linear-gradient(180deg, #fefcf6 0%, #f8f5ec 100%) !important;
            color: #2d1810 !important;
            border-bottom: 1px solid #fefcf6 !important;
            margin-bottom: -1px !important;
            box-shadow: 0 -4px 8px rgba(139, 115, 85, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
            transform: translateY(-2px) !important;
        }
        .editor-tab.active:hover {
            transform: translateY(-2px) !important;
        }
        .editor-pane {
            display: none;
        }
        .editor-pane.active {
            display: flex; /* Use flex for layout */
            flex-direction: column;
            height: 100%; /* Take full height of parent */
        }
        .editor-pane.active#idea-engine-pane {
            display: block; /* Override flex for idea engine */
            height: auto; /* Don't force full height */
        }
        /* Remove special container mode - not needed */
        
        #idea-engine-pane.active {
            display: flex !important; /* Use flex like other panes */
            flex-direction: column;
            height: 100% !important; /* Fill available height */
        }
        #editor-wrapper.playground-active {
            border: 4px solid #f59e0b; /* amber-500 */
            box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.2), 0 8px 10px -6px rgba(245, 158, 11, 0.2);
        }
        #editor-wrapper.idea-engine-active {
            border: 4px solid #A0643D; /* warm brown */
            box-shadow: 0 10px 25px -5px rgba(160, 100, 61, 0.2), 0 8px 10px -6px rgba(160, 100, 61, 0.2);
        }
        
        /* Remove the container override - let it behave normally */

        /* --- Idea Engine Styles --- */
        #idea-engine-controls {
            padding: 2rem;
            background-color: #f5f2ec;
            height: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        #idea-engine-interests-container {
            height: 100%;
            overflow-y: auto;
            padding: 1rem;
            border: 1px solid #A0643D;
            background-color: #fefcf6;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 0.75rem;
            border-radius: 6px;
            grid-auto-rows: min-content;
        }
        .interest-label {
            display: flex;
            align-items: center;
            cursor: pointer;
            padding: 0.5rem;
            transition: background-color 0.2s;
        }
        .interest-label:hover {
            background-color: #f0ede6;
        }
        .interest-checkbox {
            margin-right: 0.75rem;
        }
        #idea-engine-results {
            flex-grow: 1;
            overflow-y: auto;
            padding: 2rem;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            grid-auto-rows: max-content;
            gap: 1.5rem;
            align-content: start;
            align-items: start;
        }
        .idea-card-stack {
            position: relative;
            min-height: 300px;
            transition: all 0.2s ease-in-out;
            perspective: 1000px;
        }
        .idea-card-stack:hover {
            transform: translateY(-2px);
        }
        .idea-card {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            border: 1px solid #A0643D;
            background-color: #fefcf6;
            display: flex;
            flex-direction: column;
            min-height: 280px;
            border-radius: 8px;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 4px 8px rgba(139, 115, 85, 0.1);
        }
        
        /* Base styles for stacked cards - transforms applied via JavaScript */
        .idea-card-stack.selected {
            background-color: #eff6ff;
            border: 2px solid #3b82f6;
        }
        .idea-card-stack.selected .idea-card {
             border: 2px solid #3b82f6;
        }
         .idea-card-stack.has-selection {
             border-color: #3b82f6;
             box-shadow: 0 0 0 2px #3b82f6;
         }
        .idea-card-header {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid #A0643D;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .idea-card-header-content {
            flex-grow: 1;
        }
        .idea-card-theme {
            font-weight: 700;
            font-size: 1rem;
            font-family: 'adobe-caslon-pro', 'Lora', serif;
            color: #1f2937;
        }
        .idea-card-anchor {
            font-size: 0.8rem;
            color: #6b7280;
            margin-top: 0.25rem;
            font-style: italic;
        }
        .idea-card-refresh {
            flex-shrink: 0;
            margin-left: 1rem;
            padding: 0.25rem;
            border-radius: 9999px;
            background-color: #f3f4f6;
            color: #4b5563;
            cursor: pointer;
            transition: all 0.2s;
        }
        .idea-card-refresh:hover {
            background-color: #e5e7eb;
            color: #1f2937;
        }
        .idea-card-body {
            padding: 1rem;
            flex-grow: 1;
            cursor: pointer;
        }
        .idea-card-suggestion {
            font-family: 'Lora', serif;
            font-size: 0.95rem;
            color: #374151;
            line-height: 1.6;
        }
        .idea-card-footer {
            padding: 0.5rem 1rem;
            border-top: 1px solid #D2B48C;
            background-color: #f5f2ec;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            min-height: 44px; /* Ensure footer has height even when empty */
        }
        .idea-card-nav {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            visibility: hidden;
        }
        .idea-card-nav.visible {
            visibility: visible;
        }
        .idea-card-nav-btn {
            background: none;
            border: 1px solid #d1d5db;
            border-radius: 9999px;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #6b7280;
            transition: all 0.2s;
        }
        .idea-card-nav-btn:hover {
            background-color: #e5e7eb;
            color: #1f2937;
        }
        .idea-card-nav-counter {
            font-size: 0.75rem;
            font-weight: 600;
            color: #4b5563;
            min-width: 40px;
            text-align: center;
        }
        #idea-engine-action-bar {
            position: absolute;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            z-index: 20;
            transition: opacity 0.3s, transform 0.3s;
            opacity: 0;
            pointer-events: none;
        }
        #idea-engine-action-bar.visible {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
            pointer-events: auto;
        }
        #copy-ideas-btn {
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        /* Ideas Sidebar */
        #ideas-sidebar {
            position: fixed;
            top: 0;
            right: 0;
            width: 450px;
            height: 100vh;
            background-color: #fefcf6;
            border-left: 1px solid #A0643D;
            transform: translateX(100%);
            transition: transform 0.3s ease-in-out;
            z-index: 1000;
            display: flex;
            flex-direction: column;
        }
        #ideas-sidebar.open {
            transform: translateX(0);
        }
        #ideas-sidebar-header {
            padding: 1rem;
            border-bottom: 1px solid #A0643D;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #f5f2ec;
        }
        #ideas-sidebar-content {
            flex: 1;
            overflow-y: auto;
            padding: 1rem;
        }
        #ideas-sidebar-footer {
            padding: 1rem;
            border-top: 1px solid #A0643D;
            background-color: #f5f2ec;
            flex-shrink: 0;
        }
        .sidebar-idea-stack {
            margin-bottom: 2rem;
        }
        .sidebar-stack-header {
            font-weight: 600;
            font-size: 1.1rem;
            font-family: 'adobe-caslon-pro', 'Lora', serif;
            margin-bottom: 1rem;
            color: #1f2937;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid #e5e7eb;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            user-select: none;
            padding: 0.5rem 0;
        }
        
        .sidebar-stack-header:hover {
            background-color: #f9fafb;
            border-radius: 0.25rem;
        }
        
        .collapse-icon {
            transition: transform 0.2s ease;
            margin-right: 0.5rem;
            font-size: 0.875rem;
            color: #6b7280;
        }
        
        .collapse-icon.collapsed {
            transform: rotate(-90deg);
        }
        
        .sidebar-stack-content {
            transition: all 0.3s ease;
            overflow: hidden;
        }
        
        .sidebar-stack-content.collapsed {
            max-height: 0;
            opacity: 0;
            margin-bottom: 0;
            padding: 0;
        }
        .sidebar-idea-item {
            padding: 1rem;
            border: 1px solid #e5e7eb;
            margin-bottom: 0.75rem;
            border-radius: 0.5rem;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
        }
        .sidebar-idea-item:hover {
            background-color: #f9fafb;
            border-color: #3b82f6;
        }
        .sidebar-idea-item.selected {
            background-color: #eff6ff;
            border-color: #3b82f6;
        }
        .sidebar-idea-item.selected::before {
            content: '✓';
            position: absolute;
            top: 0.5rem;
            right: 0.75rem;
            color: #3b82f6;
            font-weight: bold;
        }
        .sidebar-idea-anchor {
            font-size: 0.875rem;
            color: #6b7280;
            margin-bottom: 0.5rem;
            font-style: italic;
        }
        .sidebar-idea-text {
            color: #374151;
            line-height: 1.5;
        }

        /* View Stack Button */
        .view-stack-btn {
            background: #3b82f6;
            color: white;
            border: none;
            border-radius: 0.25rem;
            padding: 0.5rem 0.75rem;
            font-size: 0.75rem;
            cursor: pointer;
            margin-top: 0.5rem;
            transition: background-color 0.2s;
        }
        .view-stack-btn:hover {
            background-color: #2563eb;
        }

        /* Tab styles for content manager */
        .active-tab {
            border-bottom: 2px solid #8B7355;
        }
        
        .inactive-tab:hover {
            background-color: #f9f7f1;
            color: #8B7355;
        }
        
        .tab-content {
            display: block;
        }
        
        .tab-content.hidden {
            display: none !important;
        }
        
        .tab-content.active {
            display: block;
        }

        /* Rich Text Formatting Styles for Published Posts */
        .body-content h1, .published-mode .body-content h1, .published-mode #body-content h1 {
            font-family: 'adobe-caslon-pro', 'Lora', serif !important;
            font-size: 2.5rem !important;
            font-weight: 700 !important;
            line-height: 1.2 !important;
            margin-bottom: 1.5rem !important;
            margin-top: 2rem !important;
            color: #1a1a1a !important;
        }

        .body-content h2, .published-mode .body-content h2, .published-mode #body-content h2 {
            font-family: 'adobe-caslon-pro', 'Lora', serif !important;
            font-size: 2rem !important;
            font-weight: 600 !important;
            line-height: 1.3 !important;
            margin-bottom: 1.25rem !important;
            margin-top: 1.75rem !important;
            color: #1a1a1a !important;
        }

        .body-content h3, .published-mode .body-content h3, .published-mode #body-content h3 {
            font-family: 'adobe-caslon-pro', 'Lora', serif !important;
            font-size: 1.5rem !important;
            font-weight: 600 !important;
            line-height: 1.4 !important;
            margin-bottom: 1rem !important;
            margin-top: 1.5rem !important;
            color: #1a1a1a !important;
        }

        .body-content strong, .body-content b, .published-mode .body-content strong, .published-mode .body-content b, .published-mode #body-content strong, .published-mode #body-content b {
            font-weight: 700 !important;
            font-family: 'adobe-caslon-pro', 'Lora', serif !important;
            font-size: inherit !important;
        }

        .body-content em, .body-content i, .published-mode .body-content em, .published-mode .body-content i, .published-mode #body-content em, .published-mode #body-content i {
            font-style: italic !important;
            font-family: 'adobe-caslon-pro', 'Lora', serif !important;
            font-size: inherit !important;
        }

        .body-content u, .published-mode .body-content u, .published-mode #body-content u {
            text-decoration: underline !important;
            font-family: 'adobe-caslon-pro', 'Lora', serif !important;
            font-size: inherit !important;
        }

        /* Header styling within publish view (for live editing) */
        .body-content[contenteditable="true"] h1 {
            font-family: 'adobe-caslon-pro', 'Lora', serif !important;
            font-size: 2.5rem !important;
            font-weight: 700 !important;
            line-height: 1.2 !important;
            margin-bottom: 1.5rem !important;
            margin-top: 2rem !important;
            color: #1a1a1a !important;
        }

        .body-content[contenteditable="true"] h2 {
            font-family: 'adobe-caslon-pro', 'Lora', serif !important;
            font-size: 2rem !important;
            font-weight: 600 !important;
            line-height: 1.3 !important;
            margin-bottom: 1.25rem !important;
            margin-top: 1.75rem !important;
            color: #1a1a1a !important;
        }

        .body-content[contenteditable="true"] h3 {
            font-family: 'adobe-caslon-pro', 'Lora', serif !important;
            font-size: 1.5rem !important;
            font-weight: 600 !important;
            line-height: 1.4 !important;
            margin-bottom: 1rem !important;
            margin-top: 1.5rem !important;
            color: #1a1a1a !important;
        }

        /* Classic Blockquote Styling */
        .body-content blockquote, 
        .published-mode .body-content blockquote, 
        .published-mode #body-content blockquote,
        .body-content[contenteditable="true"] blockquote,
        .editor-content blockquote,
        #editor blockquote,
        #playground-editor blockquote {
            font-family: 'adobe-caslon-pro', 'Lora', serif !important;
            font-style: italic !important;
            font-size: 1.125rem !important;
            line-height: 1.6 !important;
            margin: 2rem 0 !important;
            padding: 1.5rem 0 1.5rem 3rem !important;
            border-left: 4px solid rgba(139, 69, 19, 0.3) !important;
            color: #4a4a4a !important;
            background: linear-gradient(90deg, rgba(254, 240, 220, 0.3) 0%, transparent 100%) !important;
            position: relative !important;
        }

        /* Blockquote before pseudo-element for decorative quotation mark */
        .body-content blockquote::before, 
        .published-mode .body-content blockquote::before, 
        .published-mode #body-content blockquote::before,
        .body-content[contenteditable="true"] blockquote::before,
        .editor-content blockquote::before,
        #editor blockquote::before,
        #playground-editor blockquote::before {
            content: '"' !important;
            font-family: 'adobe-caslon-pro', 'Lora', serif !important;
            font-size: 4rem !important;
            color: rgba(139, 69, 19, 0.2) !important;
            position: absolute !important;
            left: 0.5rem !important;
            top: -0.5rem !important;
            line-height: 1 !important;
            font-weight: 400 !important;
        }

        /* Nested elements within blockquotes */
        .body-content blockquote p, 
        .published-mode .body-content blockquote p, 
        .published-mode #body-content blockquote p,
        .body-content[contenteditable="true"] blockquote p,
        .editor-content blockquote p,
        #editor blockquote p,
        #playground-editor blockquote p {
            margin: 0 !important;
            font-style: inherit !important;
        }

        /* Header styling for main editor */
        .editor-content h1,
        #editor h1,
        #playground-editor h1 {
            font-family: 'adobe-caslon-pro', 'Lora', serif !important;
            font-size: 2.5rem !important;
            font-weight: 700 !important;
            line-height: 1.2 !important;
            margin-bottom: 1.5rem !important;
            margin-top: 2rem !important;
            color: #1a1a1a !important;
        }

        .editor-content h2,
        #editor h2,
        #playground-editor h2 {
            font-family: 'adobe-caslon-pro', 'Lora', serif !important;
            font-size: 2rem !important;
            font-weight: 600 !important;
            line-height: 1.3 !important;
            margin-bottom: 1.25rem !important;
            margin-top: 1.75rem !important;
            color: #1a1a1a !important;
        }

        .editor-content h3,
        #editor h3,
        #playground-editor h3 {
            font-family: 'adobe-caslon-pro', 'Lora', serif !important;
            font-size: 1.5rem !important;
            font-weight: 600 !important;
            line-height: 1.4 !important;
            margin-bottom: 1rem !important;
            margin-top: 1.5rem !important;
            color: #1a1a1a !important;
        }

        /* Center text alignment utility */
        .body-content [style*="text-align: center"], 
        .published-mode .body-content [style*="text-align: center"], 
        .published-mode #body-content [style*="text-align: center"],
        .body-content[contenteditable="true"] [style*="text-align: center"],
        .editor-content [style*="text-align: center"],
        #editor [style*="text-align: center"],
        #playground-editor [style*="text-align: center"] {
            text-align: center !important;
        }

        /* Horizontal Panel System */
        #panel-container {
            display: flex;
            overflow: hidden;
            width: 100vw;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            background-color: #fefcf6;
        }

        .panel {
            height: 100vh;
            position: relative;
            overflow: hidden;
        }

        #editor-panel {
            width: 100%;
            overflow: visible;
            position: relative;
        }

        /* Split.js Gutter Styling */
        .gutter {
            background-color: #fefcf6 !important;
            background-repeat: no-repeat !important;
            background-position: center !important;
            cursor: col-resize !important;
            z-index: 100 !important;
            position: relative !important;
        }

        .gutter.gutter-horizontal {
            background-image: url('data:image/svg+xml;utf8,<svg width="1" height="100%" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="0" y2="100%" stroke="%23A0643D" stroke-width="1"/></svg>') !important;
            cursor: col-resize !important;
        }

        .gutter.gutter-horizontal:hover {
            background-color: #f5f2ec !important;
        }

        /* Content Library Panel Specific Styles */
        #content-library-panel {
            display: none; /* Hidden by default */
        }

        #content-library-panel.active {
            display: block;
        }

        #content-library-panel iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        /* Panel Header for Content Library */
        .panel-header {
            position: absolute;
            bottom: 1.5rem;
            right: 1.5rem;
            z-index: 50;
        }

        .panel-header-btn {
            background: none;
            border: none;
            color: #8B7355;
            padding: 0;
            font-size: 1.5rem;
            cursor: pointer;
            transition: opacity 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .panel-header-btn:hover {
            opacity: 0.7;
        }

        /* Responsive Toolbar - single consolidated container */
        #main-controls-bar > div.flex.items-center {
            flex-wrap: wrap;
            gap: 0.5rem;
            justify-content: flex-end;
        }