/**
 * Knowledge Base Editor - Complete Consolidated Styles
 * All CSS consolidated into single file following feature isolation rules
 */

/* ==========================================================================
   Design System (Feature: Home)
   Architecture: Tokens → Themes → Reset → Base → Utilities → Components → A11y
   ========================================================================== */

/* 1) Scope root: contain styles to the feature without over-specificity */
.feature-home {
    /* 1.1 Core tokens - Use theme system variables */
    --bg: var(--sidebar-bg);
    --bg-secondary: var(--sidebar-header-bg);
    --panel: var(--sidebar-bg);
    --panel-2: var(--sidebar-header-bg);
    --card: var(--content-bg);
    --surface: var(--content-bg);

    --text: var(--sidebar-text);
    --text-secondary: var(--content-text);
    --muted: var(--content-text);
    --disabled: #6b7280;

    --primary: var(--button-primary-bg);
    --primary-hover: var(--button-primary-hover);
    --primary-light: rgba(77, 163, 250, 0.15);
    --accent: var(--button-primary-bg);
    --accent-hover: var(--button-primary-hover);
    --accent-light: rgba(77, 163, 250, 0.15);
    --accent-2: #6bf2c3;

    --success: #22c55e;
    --danger: #ef4444;
    --warning: #f59e0b;
    --info: #3b82f6;

    --border: var(--sidebar-border);
    --border-light: var(--sidebar-border);
    --border-focus: var(--accent);

    --hover: rgba(255, 255, 255, 0.06);
    --active: rgba(77, 163, 250, 0.22);
    --focus-ring: 0 0 0 2px rgba(77, 163, 250, 0.15);
    --ring: 0 0 0 2px rgba(77, 163, 255, 0.3);

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.4);

    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    --font-sans:
        "Roboto", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
        "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-mono:
        "Roboto Mono", ui-monospace, SFMono-Regular, "SF Mono", Consolas,
        "Liberation Mono", Menlo, monospace;

    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 16px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    --font-size-3xl: 24px;
    --font-size-4xl: 32px;

    --line-height-tight: 1.25;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.6;

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-notification: 800;

    /* Automatic text color contrast variables */
    --text-on-dark-bg: #ffffff;
    --text-on-light-bg: #000000;
    --text-on-accent-dark: #ffffff;
    --text-on-accent-light: #000000;

    font-synthesis-weight: none;
}

/* Light theme removed - using simplified dark theme system */

/* 3) Reset & Base */
.feature-home,
.feature-home *::before,
.feature-home *::after {
    box-sizing: border-box;
}

.feature-home {
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
}

.feature-home body,
.feature-home p {
    margin: 0;
}

.feature-home a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.feature-home a:hover {
    color: var(--accent-hover);
}

/* Code Block Styling - Enhanced with maximum specificity rules */
/* Base styling handled by shared prism-theme.css, but edit mode overrides here */

/* 3.1 Headings */
.feature-home h1,
.feature-home h2,
.feature-home h3,
.feature-home h4,
.feature-home h5,
.feature-home h6 {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--text);
}
.feature-home h1 {
    font-size: var(--font-size-3xl);
}
.feature-home h2 {
    font-size: var(--font-size-2xl);
}
.feature-home h3 {
    font-size: var(--font-size-xl);
}
.feature-home h4 {
    font-size: var(--font-size-lg);
}
.feature-home h5 {
    font-size: var(--font-size-base);
}
.feature-home h6 {
    font-size: var(--font-size-sm);
}

/* 4) Utilities (flat, concise; no nested lists) */
/* Layout */
.feature-home .flex {
    display: flex;
}
.feature-home .inline-flex {
    display: inline-flex;
}
.feature-home .grid {
    display: grid;
}
.feature-home .hidden {
    display: none;
}
.feature-home .block {
    display: block;
}
.feature-home .inline-block {
    display: inline-block;
}
.feature-home .flex-col {
    flex-direction: column;
}
.feature-home .flex-row {
    flex-direction: row;
}
.feature-home .flex-wrap {
    flex-wrap: wrap;
}
.feature-home .flex-nowrap {
    flex-wrap: nowrap;
}
.feature-home .items-center {
    align-items: center;
}
.feature-home .items-start {
    align-items: flex-start;
}
.feature-home .items-end {
    align-items: flex-end;
}
.feature-home .items-stretch {
    align-items: stretch;
}
.feature-home .justify-center {
    justify-content: center;
}
.feature-home .justify-start {
    justify-content: flex-start;
}
.feature-home .justify-end {
    justify-content: flex-end;
}
.feature-home .justify-between {
    justify-content: space-between;
}
.feature-home .flex-1 {
    flex: 1;
}
.feature-home .flex-grow {
    flex-grow: 1;
}
.feature-home .flex-shrink-0 {
    flex-shrink: 0;
}

/* Spacing */
.feature-home .gap-1 {
    gap: var(--space-1);
}
.feature-home .gap-2 {
    gap: var(--space-2);
}
.feature-home .gap-3 {
    gap: var(--space-3);
}
.feature-home .gap-4 {
    gap: var(--space-4);
}
.feature-home .gap-5 {
    gap: var(--space-5);
}
.feature-home .gap-6 {
    gap: var(--space-6);
}

.feature-home .p-0 {
    padding: 0;
}
.feature-home .p-1 {
    padding: var(--space-1);
}
.feature-home .p-2 {
    padding: var(--space-2);
}
.feature-home .p-3 {
    padding: var(--space-3);
}
.feature-home .p-4 {
    padding: var(--space-4);
}
.feature-home .p-5 {
    padding: var(--space-5);
}
.feature-home .p-6 {
    padding: var(--space-6);
}

.feature-home .m-0 {
    margin: 0;
}
.feature-home .m-1 {
    margin: var(--space-1);
}
.feature-home .m-2 {
    margin: var(--space-2);
}
.feature-home .m-3 {
    margin: var(--space-3);
}
.feature-home .m-4 {
    margin: var(--space-4);
}
.feature-home .m-5 {
    margin: var(--space-5);
}
.feature-home .m-6 {
    margin: var(--space-6);
}

/* Typography utilities */
.feature-home .text-xs {
    font-size: var(--font-size-xs);
}
.feature-home .text-sm {
    font-size: var(--font-size-sm);
}
.feature-home .text-base {
    font-size: var(--font-size-base);
}
.feature-home .text-lg {
    font-size: var(--font-size-lg);
}
.feature-home .text-xl {
    font-size: var(--font-size-xl);
}
.feature-home .text-2xl {
    font-size: var(--font-size-2xl);
}

.feature-home .font-light {
    font-weight: var(--font-weight-light);
}
.feature-home .font-normal {
    font-weight: var(--font-weight-normal);
}
.feature-home .font-medium {
    font-weight: var(--font-weight-medium);
}
.feature-home .font-semibold {
    font-weight: var(--font-weight-semibold);
}
.feature-home .font-bold {
    font-weight: var(--font-weight-bold);
}

.feature-home .text-center {
    text-align: center;
}
.feature-home .text-left {
    text-align: left;
}
.feature-home .text-right {
    text-align: right;
}

.feature-home .text-primary {
    color: var(--text);
}
.feature-home .text-secondary {
    color: var(--text-secondary);
}
.feature-home .text-muted {
    color: var(--muted);
}
.feature-home .text-accent {
    color: var(--accent);
}
.feature-home .text-danger {
    color: var(--danger);
}
.feature-home .text-success {
    color: var(--success);
}
.feature-home .text-warning {
    color: var(--warning);
}

/* Borders & radius */
.feature-home .border {
    border: 1px solid var(--border);
}
.feature-home .border-t {
    border-top: 1px solid var(--border);
}
.feature-home .border-b {
    border-bottom: 1px solid var(--border);
}
.feature-home .border-l {
    border-left: 1px solid var(--border);
}
.feature-home .border-r {
    border-right: 1px solid var(--border);
}
.feature-home .rounded {
    border-radius: var(--radius);
}
.feature-home .rounded-sm {
    border-radius: var(--radius-sm);
}
.feature-home .rounded-lg {
    border-radius: var(--radius-lg);
}
.feature-home .rounded-xl {
    border-radius: var(--radius-xl);
}
.feature-home .rounded-full {
    border-radius: 9999px;
}

/* Background helpers */
.feature-home .bg-primary {
    background: var(--bg);
}
.feature-home .bg-secondary {
    background: var(--bg-secondary);
}
.feature-home .bg-panel {
    background: var(--panel);
}
.feature-home .bg-card {
    background: var(--card);
}
.feature-home .bg-surface {
    background: var(--surface);
}

/* Shadows */
.feature-home .shadow {
    box-shadow: var(--shadow);
}
.feature-home .shadow-sm {
    box-shadow: var(--shadow-sm);
}
.feature-home .shadow-lg {
    box-shadow: var(--shadow-lg);
}

/* Interactions */
.feature-home .hover\:bg-hover:hover {
    background: var(--hover);
}
.feature-home .focus\:ring:focus {
    outline: none;
    box-shadow: var(--focus-ring);
}
.feature-home .cursor-pointer {
    cursor: pointer;
}
.feature-home .cursor-not-allowed {
    cursor: not-allowed;
}

/* Transitions */
.feature-home .transition {
    transition: all var(--transition-base);
}
.feature-home .transition-fast {
    transition: all var(--transition-fast);
}
.feature-home .transition-colors {
    transition:
        color var(--transition-base),
        background-color var(--transition-base),
        border-color var(--transition-base);
}

/* 5) Scrollbars */
.feature-home .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.feature-home .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.feature-home .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}
.feature-home .scrollbar-thin::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}
.feature-home .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: var(--border-light);
}

/* 6) Animations (guarded by prefers-reduced-motion) */
@media (prefers-reduced-motion: reduce) {
    .feature-home * {
        animation: none !important;
        transition: none !important;
    }
}

@keyframes feature-home-fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes feature-home-slideInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes feature-home-slideInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes feature-home-spin {
    to {
        transform: rotate(360deg);
    }
}
@keyframes feature-home-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* 7) Responsive */
@media (max-width: 768px) {
    .feature-home {
        --space-3: 10px;
        --space-4: 14px;
        --space-5: 18px;
        --space-6: 22px;
        --font-size-base: 13px;
    }
    .feature-home .hidden-mobile {
        display: none !important;
    }
    .feature-home .text-responsive {
        font-size: var(--font-size-sm);
    }
}
@media (min-width: 769px) {
    .feature-home .hidden-desktop {
        display: none !important;
    }
}

/* 8) Print */
@media print {
    .feature-home .no-print {
        display: none !important;
    }
    .feature-home,
    .feature-home * {
        background: var(--text-on-light-bg, #ffffff) !important;
        color: var(--text-on-dark-bg, #000000) !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    .feature-home {
        font-family: "Roboto", Georgia, serif !important;
    }
}

/* 9) Component primitives (example buttons, cards) */
.feature-home .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 36px;
    padding: 0 var(--space-4);
    font: var(--font-weight-medium) var(--font-size-base) / 1 var(--font-sans);
    color: var(--text);
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition:
        background var(--transition-base),
        border-color var(--transition-base);
}
.feature-home .btn:hover {
    background: var(--hover);
}
.feature-home .btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.feature-home .btn-primary {
    color: var(--button-primary-text);
    background: var(--primary);
    border-color: var(--primary);
}
.feature-home .btn-primary:hover {
    background: var(--primary-hover);
}

.feature-home .card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--space-4);
}

/* 10) Accessibility helpers */
.feature-home .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================================================== */
/*  CONTENT MARKUP STYLES (from shared/css/content-markup.css)               */
/* ========================================================================== */

/* Blockquotes */
.content-area blockquote,
.page-content-scope blockquote,
.page-content-scope > blockquote:nth-child(18) {
    border-left: 4px solid var(--accent) !important;
    padding: 16px 20px !important;
    margin: 20px 0 !important;
    background: var(--active) !important;
    color: var(--text) !important;
    border-radius: 8px !important;
    font-style: normal;
    position: relative;
}

/* Override any inline styles on blockquotes */
blockquote[style],
.content-area blockquote[style],
.page-content-scope blockquote[style] {
    border-left: 4px solid var(--accent) !important;
    padding: 16px 20px !important;
    margin: 20px 0 !important;
    background: var(--active) !important;
    color: var(--text) !important;
    border-radius: 8px !important;
}

/* Table library variables and styles are now handled in table.css */

/* Note: All inline code and pre block styling handled by CodeHighlighter.js */
/* Home override: ensure inline code uses theme color, not white */
body.feature-home.theme-dark-modern {
    --inline-code-text: var(--text-on-dark-bg);
}
body.feature-home.theme-dark-professional {
    --inline-code-text: var(--text-on-dark-bg);
}
body.feature-home.theme-light-clean {
    --inline-code-text: var(--text-on-light-bg);
}

/* Strengthen inline code coloring for both modes */
body.feature-home
    .content-area.edit-mode
    code:not(.token):not([class*="language-"]),
body.feature-home
    .content-area.preview-mode
    code:not(.token):not([class*="language-"]) {
    color: var(--inline-code-text, var(--text-on-dark-bg)) !important;
    font-weight: 700 !important;
}

/* Headings */
.content-area h1,
.content-area h2,
.content-area h3 {
    line-height: 1.25;
    margin: 16px 0 8px;
}

/* Lists */
.content-area ul,
.page-content-scope ul {
    list-style-position: outside;
    margin: 0 0 20px;
    padding-left: 28px;
}

.content-area ul li::marker,
.page-content-scope ul li::marker {
    content: "‣  ";
    color: var(--accent);
    font-weight: 700;
    font-size: 1.05em;
    letter-spacing: 0.02em;
}

/* Ensure managed unordered list markers match ordered list blue accent (scoped to feature-home) */
.feature-home .content-area ul.list-lib-managed li::marker,
.feature-home .page-content-scope ul.list-lib-managed li::marker,
.feature-home ul.list-lib-managed li::marker {
    color: var(--accent) !important;
    font-weight: 600;
}

.content-area li,
.page-content-scope li {
    margin: 0.15rem 0;
    padding-left: 0;
}

/* Ordered lists */
.content-area ol,
.page-content-scope ol {
    list-style-position: outside;
    margin: 0 0 20px;
    padding-left: 28px;
}

.content-area ol li::marker,
.page-content-scope ol li::marker {
    color: var(--accent);
    font-weight: 600;
}

/* Horizontal rule */
.content-area hr,
.page-content-scope hr {
    border: 0;
    border-top: 1px solid var(--border-light);
    margin: var(--space-4, 24px) 0;
}

/* KBD */
.content-area kbd,
.page-content-scope kbd {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 2px 6px;
    border-radius: 6px;
    font-family: var(
        --font-mono,
        "Roboto Mono",
        ui-monospace,
        SFMono-Regular,
        Consolas,
        Menlo,
        monospace
    );
    font-size: 12px;
}

/* Light theme specific styling removed - using simplified dark theme system */

/* Links */
.content-area a {
    color: var(--link-color, #4da3ff) !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    font-weight: 500 !important;
}

.content-area a:visited {
    color: var(--link-visited-color, #b366ff) !important;
}

.content-area a:hover {
    color: var(--link-color, #4da3ff) !important;
    text-decoration: underline !important;
}

/* ========================================================================== */
/*  PRISM THEME STYLES                                                       */
/* ========================================================================== */

/* Token styles are now handled by isolated code block styling above */

/* Token styling is now handled by shared prism-theme.css */

/* Span styling in content areas is now handled by shared prism-theme.css */

/* Edit/preview modes (generic) */
.content-area.edit-mode [contenteditable],
.page-content-scope.edit-mode [contenteditable] {
    outline: none !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    cursor: text !important;
}

.content-area.preview-mode,
.content-area.preview-mode *,
.content-area.preview-mode [contenteditable] {
    cursor: default !important;
    /* Allow scrolling and normal link clicks in preview */
    pointer-events: auto !important;
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
}

/* Allow copy button interaction in preview mode */
.content-area.preview-mode .code-copy-btn {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Code Block UI Elements - Copy Button and Language Badge */
.feature-home .code-copy-btn {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    background: var(--code-panel) !important;
    border: 1px solid var(--code-border) !important;
    color: var(--code-text) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s ease !important;
    z-index: 10 !important;
    line-height: 1 !important;
    min-width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.feature-home .code-copy-btn:hover {
    opacity: 1 !important;
    background: var(--accent) !important;
    border-color: var(--accent) !important;
}

.feature-home .code-copy-btn.copied {
    background: var(--success) !important;
    border-color: var(--success) !important;
    color: var(--text-soft) !important;
}

.feature-home .code-lang-badge {
    position: absolute !important;
    top: 0px !important;
    left: 8px !important;
    background: var(--code-panel) !important;
    border: 1px solid var(--code-border) !important;
    color: var(--code-subtle) !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    font-size: 11px !important;
    font-family: var(--font-mono) !important;
    font-weight: var(--font-weight-medium) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    opacity: 0.8 !important;
    z-index: 5 !important;
    pointer-events: none !important;
}

/* Ensure code blocks have positioning context for UI elements */
.feature-home pre {
    position: relative !important;
}

/* Prevent UI elements from interfering with code selection */
.feature-home .code-copy-btn,
.feature-home .code-lang-badge {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Focus removal (generic) */
.content-area *:focus,
.page-content-scope *:focus {
    outline: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* Hide any line-highlight overlays */
.prism-line-highlight {
    display: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Code block positioning and controls handled by isolated styles above */

/* Table controls styles are now handled in table.css */

/* ========================================================================== */
/*  CURSOR POSITIONING STYLES                                                */
/* ========================================================================== */

/* Ensure contentArea maintains proper cursor behavior */
.cursor-positioning-enabled {
    cursor: text !important;
}

/* Visual feedback for cursor positioning */
.cursor-positioning-active {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

/* Ensure proper cursor display on all interactive elements within contentArea */
#contentArea.cursor-positioning-enabled {
    cursor: text;
}

#contentArea.cursor-positioning-enabled * {
    cursor: inherit;
}

/* Maintain normal cursor behavior on non-text elements */
#contentArea.cursor-positioning-enabled img,
#contentArea.cursor-positioning-enabled table,
#contentArea.cursor-positioning-enabled .rn-table,
#contentArea.cursor-positioning-enabled button,
#contentArea.cursor-positioning-enabled input,
#contentArea.cursor-positioning-enabled select {
    cursor: default;
}

#contentArea.cursor-positioning-enabled a {
    cursor: pointer;
}

/* Smooth cursor transitions */
.cursor-positioning-transition {
    transition: all 0.1s ease;
}

/* Debug mode styles (for development only) */
.cursor-positioning-debug .cursor-target {
    background-color: var(--warning);
    outline: 1px dashed var(--warning);
}

.cursor-positioning-debug .cursor-position {
    position: absolute;
    width: 2px;
    height: 16px;
    background: red;
    pointer-events: none;
    z-index: 9999;
    animation: cursor-blink 1s infinite;
}

@keyframes cursor-blink {
    0%,
    50% {
        opacity: 1;
    }
    51%,
    100% {
        opacity: 0;
    }
}

/* === Base Layout === */
body.feature-home * {
    box-sizing: border-box;
}
html.feature-home,
body.feature-home,
body.feature-home #app {
    height: 100%;
}
body.feature-home {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: var(--font-size-base) / 1.45 var(--font-sans);
}

/* Fixed Grid Layout System */
body.feature-home #app {
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-rows: 100vh;
    grid-template-areas: "sidebar main";
    height: 100vh;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Ensure sidebar base typography is stable across mode toggles */
body.feature-home #app > aside.sidebar {
    font-size: var(--font-size-base) !important;
    line-height: var(--line-height-base);
}

body.feature-home .sidebar {
    grid-area: sidebar;
    background: var(--panel);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    width: 300px;
    height: 100vh;
    position: relative;
    z-index: 10;
    overflow: hidden;
}

body.feature-home .main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
    background: var(--bg);
    isolation: isolate; /* isolate stacking and blending */
    contain: layout paint; /* prevent internal layout/paint from affecting sidebar */
}

body.feature-home .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--panel);
    isolation: isolate; /* ensure blending and stacking are isolated from main toolbar */
}

body.feature-home .app-title {
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--text);
    font-weight: 600;
}
/* Keep the app title text consistent regardless of mode */
body.feature-home .sidebar-header .app-title span {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.2px;
    white-space: nowrap;
}

body.feature-home .tree-actions {
    display: flex;
    gap: 6px;
}
body.feature-home .sidebar-header .left-controls,
body.feature-home .sidebar-header .right-controls,
body.feature-home .main-toolbar .left-controls,
body.feature-home .main-toolbar .right-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}
body.feature-home .status {
    color: var(--muted);
    font-size: 12px;
}

body.feature-home .visualization {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    min-height: 0; /* Allow flex item to shrink — flex:1 sizes this, no fixed height needed */
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

/* Single content area that toggles between preview and edit modes */
body.feature-home .content-area {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    position: relative;
    box-sizing: border-box;
    min-height: 0; /* Allow flex item to shrink properly — no height:100% so editor toolbar doesn't clip bottom */
    -webkit-overflow-scrolling: touch; /* smooth scrolling on macOS/iOS */
    overscroll-behavior: contain; /* keep scroll inside content area */
    touch-action: pan-y; /* allow vertical scroll gestures */
}

/* Safety: ensure edit mode remains interactive and scrollable */
body.feature-home .content-area.edit-mode {
    pointer-events: auto;
}

/* WYSIWYG Editor Toolbar - Hidden by default and in preview mode */
body.feature-home .editor-toolbar {
    display: none;
}

.content-area.edit-mode ~ .editor-toolbar,
body.feature-home .content-area.edit-mode + .editor-toolbar {
    display: block;
}

.content-area.preview-mode ~ .editor-toolbar,
body.feature-home .content-area.preview-mode + .editor-toolbar {
    display: none !important;
}

/* Ensure toolbar is hidden when hidden attribute is set */
body.feature-home .editor-toolbar[hidden] {
    display: none !important;
}

body.feature-home #editorToolbar[hidden] {
    display: none !important;
}

/* Modern toolbar styling - unified with theme variables */
body.feature-home .editor-toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--panel-2);
    border-bottom: 1px solid var(--border);
    padding: 6px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
body.feature-home .editor-toolbar .btn {
    background: var(--panel-2) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
    height: 30px;
    padding: 0 10px;
    border-radius: 8px;
}
body.feature-home .editor-toolbar .btn:hover {
    background: var(--hover) !important;
    border-color: var(--border-light) !important;
}
body.feature-home .editor-toolbar .btn.active {
    background: var(--active) !important;
    border-color: var(--accent) !important;
}
body.feature-home .editor-toolbar .sep {
    width: 1px;
    height: 24px;
    background: var(--border);
    margin: 0 2px;
}
/* Color button indicator */
body.feature-home .editor-toolbar #btnTextColor {
    position: relative;
    padding-right: 18px;
}
body.feature-home .editor-toolbar #btnTextColor::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--current-color, var(--text));
}

/* Preview mode styling */
body.feature-home .content-area.preview-mode {
    background: var(--bg);
    /* Use theme-aware text color - black for light themes, white for dark themes */
    color: var(--text-on-light-bg, #000000);
    padding: 18px; /* Match edit mode padding for consistent sizing */
    box-sizing: border-box; /* Ensure padding is included in height calculations */
}

/* Light theme preview mode styling removed - using simplified dark theme system */

/* Make links obviously interactive in both modes */
body.feature-home #contentArea a {
    cursor: pointer !important; /* Pointeur à la main */
    text-decoration: underline;
}

/* Ensure links in preview mode keep pointer cursor and remain clickable despite generic
   .content-area.preview-mode * { cursor: default !important; } rule */
body.feature-home #contentArea.preview-mode a,
body.feature-home .content-area.preview-mode a {
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Optional: slightly different style in edit mode to indicate click will navigate */
body.feature-home #contentArea.edit-mode a {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
}

/* Show hover effect for links in edit mode to indicate they are clickable with modifier keys */
body.feature-home #contentArea.edit-mode a:hover {
    opacity: 0.8;
    box-shadow: 0 0 0 1px var(--accent);
    border-radius: 2px;
}

/* Edit mode styling */
body.feature-home .content-area.edit-mode {
    background: var(--bg);
    padding: 18px;
    min-height: 0; /* Must stay 0 so flex:1 sizes correctly when editor toolbar is visible — 100% would overflow .visualization */
    box-sizing: border-box; /* Ensure padding is included in height calculations */
}

/* Reduce excessive div spacing in content area to prevent line spacing issues */
body.feature-home .content-area.edit-mode div[style*="padding:16px"],
body.feature-home .content-area.preview-mode div[style*="padding:16px"] {
    padding: 8px !important;
    margin: 4px 0 !important;
}

/* Theme-aware text coloring for regular content (excluding code blocks and tokens) */
body.feature-home .content-area.edit-mode .ProseMirror p:not(pre):not(code),
body.feature-home .content-area.edit-mode .ProseMirror li:not(pre):not(code),
body.feature-home .content-area.edit-mode .ProseMirror h1:not(pre):not(code),
body.feature-home .content-area.edit-mode .ProseMirror h2:not(pre):not(code),
body.feature-home .content-area.edit-mode .ProseMirror h3:not(pre):not(code),
body.feature-home .content-area.edit-mode .ProseMirror h4:not(pre):not(code),
body.feature-home .content-area.edit-mode .ProseMirror h5:not(pre):not(code),
body.feature-home .content-area.edit-mode .ProseMirror h6:not(pre):not(code),
body.feature-home .content-area.edit-mode .ProseMirror div:not(pre):not(code),
body.feature-home
    .content-area.edit-mode
    .ProseMirror
    blockquote:not(pre):not(code),
body.feature-home
    .content-area.edit-mode
    .ProseMirror
    span:not(pre):not(code):not(.token):not(.token):not(.token-comment):not(
        .token-punctuation
    ):not(.token-operator):not(.token-keyword):not(.token-string):not(
        .token-number
    ):not(.token-function):not(.token-class):not(.token-variable):not(
        span[data-color]
    ):not(span[style*="color"]) {
    color: var(--text-on-light-bg, #000000) !important;
}

/* CRITICAL: never override user-applied text color spans in edit mode */
/* Use `revert` so inline `style="color: ..."` wins even against other !important rules. */
body.feature-home .content-area.edit-mode span[data-color],
body.feature-home .content-area.edit-mode span[style*="color"] {
    color: revert !important;
}

/* When text is wrapped like: <span data-color style="color:..."> <span data-fs-px style="font-size:...">...</span></span>
   the inner size span can still be impacted by broad edit-mode rules. Ensure it inherits the outer color. */
body.feature-home .content-area.edit-mode span[data-color] span[data-fs-px],
body.feature-home
    .content-area.edit-mode
    span[style*="color"]
    span[data-fs-px] {
    color: inherit !important;
}

/* Light theme blockpage styling removed - using simplified dark theme system */

/* Blockpage specific classes if they exist */
body.feature-home .content-area.edit-mode [class*="bn-"] {
    color: var(--text-on-dark-bg, #ffffff) !important;
}

/* Placeholder text should be muted */
body.feature-home
    .content-area.edit-mode
    .ProseMirror
    .ProseMirror-focused
    .ProseMirror-gapcursor::before,
body.feature-home .content-area.edit-mode .ProseMirror::before {
    color: var(--muted) !important;
}

/* Comprehensive editor text coloring (EDIT MODE)
   Previous version used an aggressive `:not(... span[style*=color]) { color: ... !important }` rule.
   That rule incorrectly forced default theme color onto inner wrapper spans (like data-fs-px)
   even when an ancestor span already had a user-picked color.

   New approach:
   - Apply default theme color ONLY to common text containers.
   - Never force `color` on spans, because spans are used as style wrappers.
*/
body.feature-home .content-area.edit-mode p,
body.feature-home .content-area.edit-mode li,
body.feature-home
    .content-area.edit-mode
    div:not(.table-lib-inner):not(.tbl-inner):not([contenteditable]),
body.feature-home .content-area.edit-mode h1,
body.feature-home .content-area.edit-mode h2,
body.feature-home .content-area.edit-mode h3,
body.feature-home .content-area.edit-mode h4,
body.feature-home .content-area.edit-mode h5,
body.feature-home .content-area.edit-mode h6,
body.feature-home .content-area.edit-mode blockquote {
    color: var(--text-on-light-bg, #000000) !important;
}

/* Force text color inheritance for any Blockpage generated elements */
/* Exclude table elements, code blocks, and USER-COLORED SPANS from this inheritance */
body.feature-home
    .content-area.edit-mode
    .ProseMirror
    *:not(.agent-table):not(.table-lib-table):not(td):not(th):not(
        .tbl-inner
    ):not(.table-lib-inner):not([contenteditable]):not(pre):not(code):not(
        .token
    ):not(.keyword):not(.string):not(.comment):not(.function):not(.number):not(
        .operator
    ):not(.punctuation):not(span[style*="color"]):not(
        span[style*="backgroundColor"]
    ) {
    color: inherit;
}

/* Override any potential inline styles or third-party CSS */
/* Do not override color inside TABLES, CODE BLOCKS, or USER-COLORED SPANS */
body.feature-home
    .content-area.edit-mode
    .ProseMirror
    :not(.agent-table):not(.table-lib-table):not(td):not(th):not(
        .tbl-inner
    ):not(.table-lib-inner):not([contenteditable]):not(pre):not(code):not(
        .token
    ):not(.keyword):not(.string):not(.comment):not(.function):not(.number):not(
        .operator
    ):not(.punctuation):not(span[style*="color"]):not(
        span[style*="backgroundColor"]
    )[style*="color"] {
    color: var(--text-on-light-bg, #000000) !important;
}

/* Blockquote text in editor should match theme */
/* Exclude code blocks inside blockquotes from this rule */
body.feature-home .content-area.edit-mode blockquote:not(:has(pre, code)),
body.feature-home
    .content-area.edit-mode
    .ProseMirror
    blockquote:not(:has(pre, code)) {
    color: var(--text-on-light-bg, #000000) !important;
}

/* List items should follow theme colors */
/* Exclude code blocks inside list items from this rule */
body.feature-home .content-area.edit-mode ul li:not(:has(pre, code)),
body.feature-home .content-area.edit-mode ol li:not(:has(pre, code)) {
    color: var(--text-on-light-bg, #000000) !important;
}

body.feature-home .content-area.edit-mode:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Default message when no page is selected */
body.feature-home .no-page-selected {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: var(--muted);
}

body.feature-home .no-page-selected h2 {
    color: var(--text);
    margin-bottom: 8px;
}

/* Page content scope for CSS isolation */
body.feature-home .page-content-scope {
    min-height: 100%;
}

/* Global Buttons - unify important button styles across the app */
body.feature-home .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 var(--space-3);
    border-radius: var(--radius);
    font-size: var(--font-size-base);
    line-height: 1;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    cursor: pointer;
    transition: all var(--transition-base);
}
body.feature-home .btn.small {
    height: 34px;
    padding: 0 12px;
    font-size: var(--font-size-sm);
}
body.feature-home .btn.tiny {
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
}
body.feature-home .btn:hover {
    background: var(--hover);
}
body.feature-home .btn:active {
    transform: translateY(0);
    box-shadow: none;
}
body.feature-home .btn i {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
/* Ensure clicks on SVG icons bubble to the button (Safari/iOS quirk guard) */
body.feature-home .btn svg,
body.feature-home .btn svg * {
    pointer-events: none;
}

/* Primary (important) buttons use the main accent color to stand out */
body.feature-home .btn-primary {
    background: var(--accent);
    color: var(--text-on-accent-dark);
    border-color: var(--accent);
}
body.feature-home .btn-primary:hover {
    background: var(--accent-hover);
    box-shadow: 0 4px 12px rgba(77, 163, 255, 0.25);
}
body.feature-home .btn-secondary {
    background: var(--panel);
    color: var(--text);
    border-color: var(--border);
}
body.feature-home .btn-danger {
    background: var(--danger);
    color: var(--text-on-dark-bg);
    border-color: var(--danger);
}

/* External link styles - use link color variables */
body.feature-home .content-area a:not(.internal-link):not(.broken-link) {
    color: var(--link-color, #4da3ff) !important;
    border-bottom: 1px solid var(--link-color, #4da3ff) !important;
}

body.feature-home
    .content-area
    a:not(.internal-link):not(.broken-link):visited {
    color: var(--link-visited-color, #b366ff) !important;
    border-bottom-color: var(--link-visited-color, #b366ff) !important;
}

body.feature-home .content-area a:not(.internal-link):not(.broken-link):hover {
    color: var(--link-color, #4da3ff) !important;
    background: rgba(77, 163, 255, 0.1) !important;
    border-bottom-style: solid !important;
}

/* === Anti-Flash Styles for Table Controls === */
/* Prevent table controls from flashing during page initialization */
body.feature-home .enhanced-table-wrapper {
    position: relative;
}

/* Hide all table controls during initial page load */
.page-loading .table-controls,
.page-loading .simple-table-controls,
.page-loading .working-table-controls,
.page-loading .row-controls,
.page-loading .col-controls,
body.feature-home .page-loading .table-size-indicator {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: none !important;
}

/* Smooth transition when controls become visible */
.table-controls,
.simple-table-controls,
body.feature-home .working-table-controls {
    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}

/* Ensure controls only show in edit mode */
.content-area.preview-mode .table-controls,
.content-area.preview-mode .simple-table-controls,
.content-area.preview-mode .working-table-controls,
.content-area.preview-mode .row-controls,
body.feature-home .content-area.preview-mode .col-controls {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Internal link styles - visually distinct from external links */
body.feature-home .content-area a.internal-link {
    color: var(--accent-2, #6bf2c3) !important;
    position: relative;
    border-bottom: 1px dotted var(--accent-2, #6bf2c3) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

body.feature-home .content-area a.internal-link:hover {
    color: var(--accent-2, #6bf2c3) !important;
    border-bottom-style: solid;
    background: rgba(107, 242, 195, 0.1);
}

body.feature-home .content-area a.internal-link::before {
    content: "📄";
    font-size: 0.8em;
    margin-right: 2px;
    opacity: 0.7;
}

/* Broken internal link styles */
body.feature-home .content-area a.broken-link {
    color: var(--danger, #e74c3c) !important;
    border-bottom: 1px dashed var(--danger, #e74c3c);
    text-decoration: line-through;
    opacity: 0.7;
}

body.feature-home .content-area a.broken-link::before {
    content: "⚠️";
    font-size: 0.8em;
    margin-right: 2px;
}

body.feature-home .content-area a.broken-link:hover {
    color: var(--danger, #e74c3c) !important;
    background: rgba(231, 76, 60, 0.1);
}

/* Direct Image Resize Approach - With Inline Flow Support */
/* Default image styles - 250px default in all modes */
body.feature-home .content-area img {
    max-width: 100%;
    height: auto;
    display: inline-block; /* Changed from block to inline-block for text flow */
    vertical-align: middle; /* Align with text baseline */
    min-width: 50px; /* Minimum size */
    width: 250px; /* Default 250px width for all images */
    border-radius: 4px;
    transition: box-shadow 0.2s ease;
    margin: 2px; /* Small margin for spacing when multiple images are inline */
}

/* Image alignment classes */
body.feature-home .content-area img.align-left {
    float: left;
    margin: 4px 8px 4px 0;
}

body.feature-home .content-area img.align-right {
    float: right;
    margin: 4px 0 4px 8px;
}

body.feature-home .content-area img.align-center {
    display: block;
    margin: 8px auto;
}

body.feature-home .content-area img.align-inline {
    display: inline-block;
    vertical-align: middle;
    margin: 2px;
}

/* Table alignment styles are now handled in table.css */

/* Preview mode images - fixed size, no controls */
body.feature-home .content-area.preview-mode img {
    cursor: default;
    box-shadow: none;
}

/* Edit mode images - with resize controls */
body.feature-home .content-area.edit-mode img {
    cursor: pointer;
    position: relative;
}

/* Enhanced table manager styles are now handled in table.css */

/* Lock indicator next to Edit button */
body.feature-home .lock-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid transparent;
}
body.feature-home .lock-indicator .lock-icon {
    fill: currentColor;
}
body.feature-home .lock-indicator .lock-text {
    opacity: 0.9;
}
body.feature-home .lock-indicator.owned {
    color: var(--success);
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
}
body.feature-home .lock-indicator.held {
    color: var(--warning);
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
}
/* Hide legacy language selector in preview mode */
body.feature-home .content-area.preview-mode .language-selector {
    display: none !important;
}

.content-area.preview-mode td[contenteditable],
body.feature-home .content-area.preview-mode th[contenteditable] {
    contenteditable: false !important;
    /* Allow interaction (e.g. clicking links) in preview mode */
    pointer-events: auto;
}

body.feature-home .content-area.edit-mode img:hover {
    box-shadow:
        0 0 0 2px var(--accent),
        0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Focus ring for images only in edit mode */
body.feature-home .content-area.edit-mode img.image-focused {
    box-shadow:
        0 0 0 3px var(--accent),
        0 4px 12px rgba(0, 0, 0, 0.2);
    outline: none;
}
body.feature-home .content-area.preview-mode img.image-focused {
    box-shadow: none !important;
}

/* REMOVED: Image resize controls (+ and - buttons) no longer used */
/* Images now only show size indicator on hover for information */

/* Size indicator */
body.feature-home .image-size-indicator {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: var(--text-soft);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    display: none;
    z-index: 10;
    pointer-events: none;
}

/* Hide size indicator in preview mode */
body.feature-home .content-area.preview-mode .image-size-indicator {
    display: none !important;
}

.content-area.edit-mode img:hover + .image-size-indicator,
body.feature-home .image-size-indicator.show {
    display: block;
}

/* Resize toast notification */
body.feature-home .resize-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.8);
    color: var(--text-soft);
    padding: 12px 16px;
    border-radius: 6px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    z-index: 1000;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    font-family: "Roboto", sans-serif;
}

/* Duplicate code/pre styling removed - handled by CodeHighlighter.js */

body.feature-home .content-area blockquote {
    border-left: 4px solid var(--border);
    padding: 6px 12px;
    background: var(--surface);
    color: var(--text);
}

/* Editor toolbar positioning */
body.feature-home .editor-toolbar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px;
    background: var(--panel-2);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 4;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
    contain: layout;
}
body.feature-home .sep {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 2px;
}

body.feature-home .btn {
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 8px 12px;
    border-radius: var(--radius-xs);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
body.feature-home .btn:hover {
    border-color: var(--border-light);
    background: var(--hover);
}
body.feature-home .btn:active {
    transform: translateY(1px);
}
body.feature-home .btn:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.btn.active,
body.feature-home .btn.selected {
    background: linear-gradient(180deg, var(--accent), var(--primary-hover));
    color: var(--text-on-accent-dark);
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(77, 163, 255, 0.3);
}
body.feature-home .btn.ghost {
    background: transparent;
}
body.feature-home .btn.small {
    padding: 6px 8px;
    border-radius: 7px;
}
body.feature-home .btn.tiny {
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 12px;
}
body.feature-home .btn.tiny:hover {
    background: var(--hover);
    border-color: var(--border-light);
}
.btn.tiny.active,
body.feature-home .btn.tiny.selected {
    background: var(--accent);
    color: var(--text-on-accent-dark);
    border-color: var(--accent);
}

/* Color picker button styling - follow toolbar background */
body.feature-home #btnTextColor {
    position: relative;
    background: var(--panel-2);
    border: 1px solid var(--border);
}

body.feature-home #btnTextColor:hover {
    background: var(--hover);
    border-color: var(--border-light);
}

body.feature-home #btnTextColor::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 3px;
    background: var(--current-color, var(--accent));
    border-radius: 1px;
    transition: background 0.2s ease;
}

/* Hidden color input */
body.feature-home #colorPicker {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}
body.feature-home .btn.danger {
    color: var(--text-on-accent-dark);
    border-color: var(--danger);
    background: var(--danger);
}
body.feature-home .btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

body.feature-home .tree {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    height: calc(100vh - 120px); /* Account for header and search */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

body.feature-home .tree::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Lock sidebar tree typography so it doesn't change in Edit/Preview modes */
body.feature-home .sidebar .tree {
    font-size: var(--font-size-base) !important;
    line-height: var(--line-height-base);
}
body.feature-home .sidebar .tree .tree-item {
    font-size: inherit;
    line-height: inherit;
}
body.feature-home .sidebar .tree .tree-item .name {
    font-size: inherit;
    line-height: inherit;
}

body.feature-home .main-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    height: 50px;
    flex-shrink: 0;
    z-index: 5;
}
body.feature-home .tree ul {
    list-style: none !important;
    margin: 0;
    padding-left: 12px;
}
body.feature-home .tree li::marker {
    content: none !important;
}
body.feature-home .tree-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text);
    user-select: none; /* Prevent text selection for better UX */
}
body.feature-home .tree-item:hover {
    background: rgba(255, 255, 255, 0.04);
}
body.feature-home .tree-item.active {
    background: rgba(77, 163, 255, 0.16);
    outline: 1px solid rgba(77, 163, 255, 0.4);
}
body.feature-home .tree-item.selected {
    background: rgba(255, 193, 7, 0.16);
    outline: 1px solid rgba(255, 193, 7, 0.4);
}
body.feature-home .tree-item .name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.feature-home .tree-item .badge {
    font-size: 10px;
    color: var(--muted);
}

/* Enhanced search results */
body.feature-home .tree-item.search-result {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.feature-home .search-result-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body.feature-home .search-result-name {
    font-weight: 500;
    font-size: var(--font-size-sm);
    line-height: 1.3;
}

body.feature-home .search-result-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

body.feature-home .match-type {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

body.feature-home .search-result-snippet {
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-secondary, #ccc);
    margin-top: 2px;
    max-width: 100%;
    word-wrap: break-word;
}

/* Search highlighting */
body.feature-home mark {
    background: rgba(255, 235, 59, 0.3);
    color: var(--text);
    padding: 1px 2px;
    border-radius: 2px;
    font-weight: 500;
}

/* Search results list styling */
body.feature-home .search-results {
    padding: 0;
}

body.feature-home .search-results .tree-item.search-result:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body.feature-home .search-results .tree-item.search-result:hover {
    background: rgba(255, 255, 255, 0.06);
}

body.feature-home .search-results .tree-item.search-result.active {
    background: rgba(77, 163, 255, 0.2);
    border-color: rgba(77, 163, 255, 0.3);
}

body.feature-home .icon {
    width: 16px;
    height: 16px;
    display: inline-block;
}

/* Folder & Page icon colors */
body.feature-home .tree .tree-item.folder .icon svg path {
    fill: var(--warning) !important;
}
body.feature-home .tree .tree-item.page .icon svg path {
    fill: var(--info) !important;
}

/* Toolbar add buttons - tint icons to match types */
body.feature-home #btnAddFolder svg path {
    stroke: var(--warning) !important;
}
body.feature-home #btnAddPage svg path {
    stroke: var(--info) !important;
}

body.feature-home .drag-over {
    outline: 1px dashed var(--accent);
    background: rgba(77, 163, 255, 0.08);
}

/* Drag-to-left drop zone */
body.feature-home .drag-left-drop-zone {
    position: fixed;
    left: 0;
    top: 0;
    width: 50px;
    height: 100vh;
    z-index: 1000;
    pointer-events: none; /* Allow clicks through when not dragging */
    transition: background-color 0.2s ease;
}

/* Enable pointer events when dragging is active */
body.feature-home.dragging .drag-left-drop-zone {
    pointer-events: all;
    background: rgba(77, 163, 255, 0.05);
    border-right: 2px dashed rgba(77, 163, 255, 0.3);
}

/* Visual feedback when hovering over drop zone */
body.feature-home .drag-left-drop-zone.drag-over {
    background: rgba(77, 163, 255, 0.15) !important;
    border-right: 2px solid var(--accent) !important;
}

/* Legacy resizable containers - now used only for tables */
body.feature-home .resizable {
    display: inline-block;
    position: relative;
    overflow: hidden !important;
    max-width: 100%;
    min-width: 50px;
    min-height: 20px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    line-height: 0;
}

/* Table containers in edit mode */
body.feature-home .content-area.edit-mode .resizable[data-type="table"] {
    resize: both;
    border: 2px dashed var(--border);
    background: var(--surface);
    cursor: nw-resize;
    transition: all 0.2s ease;
    padding: 2px;
}

body.feature-home .content-area.edit-mode .resizable[data-type="table"]:hover {
    border-color: var(--accent);
    background-color: rgba(77, 163, 255, 0.1);
}

/* Table containers in preview mode */
body.feature-home .content-area.preview-mode .resizable {
    resize: none;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: default;
    display: inline-block;
    line-height: 0;
}

/* Ensure table containers have proper background */
body.feature-home .content-area.preview-mode .resizable > table {
    background: var(--table-cell-bg) !important;
}

/* Ensure table cells have proper background even in transparent containers - HIGHEST SPECIFICITY */
body.feature-home .content-area.preview-mode .resizable table td,
body.feature-home .content-area.preview-mode .resizable table th {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}

/* Ensure table headers have proper background - HIGHEST SPECIFICITY */
body.feature-home .content-area.preview-mode .resizable table th {
    background: var(--table-header-bg) !important;
    color: var(--table-header-text) !important;
    border: 1px solid var(--table-border) !important;
}

/* Table sizing in containers */
body.feature-home .resizable > table {
    width: 100%;
    height: auto;
    border-collapse: collapse;
    display: block;
    overflow: hidden;
}

body.feature-home .align-left {
    text-align: left;
}
body.feature-home .align-center {
    text-align: center;
}
body.feature-home .align-right {
    text-align: right;
}
/* Center/right for block elements like images/tables when class applied */
.resizable.align-center,
.enhanced-table-container.align-center,
body.feature-home img.align-center {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.resizable.align-right,
.enhanced-table-container.align-right,
body.feature-home img.align-right {
    margin-left: auto;
    margin-right: 0;
    display: block;
}
.resizable.align-left,
.enhanced-table-container.align-left,
body.feature-home img.align-left {
    margin-left: 0;
    margin-right: auto;
    display: block;
}

/* Resize Toast Notification */
body.feature-home .resize-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--panel);
    color: var(--text);
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    font-weight: 500;
    display: none;
    opacity: 0;
    z-index: 1100;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    min-width: 200px;
    text-align: center;
}

body.feature-home .resize-toast.show {
    display: block;
    opacity: 1;
}

/* Tree item selection styles for bulk operations */
body.feature-home .tree-item.selected {
    background: rgba(77, 163, 255, 0.2);
    border-left: 3px solid var(--accent, #4da3ff);
    box-shadow: inset 0 0 0 1px rgba(77, 163, 255, 0.3);
}

body.feature-home .tree-item.selected:hover {
    background: rgba(77, 163, 255, 0.3);
}

/* Multi-select mode indicator */
body.feature-home .tree-container.multi-select-mode {
    position: relative;
    border: 2px dashed var(--accent, #4da3ff);
    border-radius: 4px;
}

body.feature-home .tree-container.multi-select-mode::before {
    content: "Multi-Select Mode - Ctrl+Click to select multiple items";
    position: absolute;
    top: -25px;
    left: 0;
    font-size: 11px;
    color: var(--accent, #4da3ff);
    background: var(--bg, #1a1a1a);
    padding: 2px 6px;
    border-radius: 3px;
    z-index: 10;
}

/* Bulk operations toolbar */
body.feature-home .bulk-operations-bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--card, #2a2a2a);
    border: 1px solid var(--border, #3a3a3a);
    border-radius: 8px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
    transition: all 0.3s ease;
}

body.feature-home .bulk-operations-bar.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

body.feature-home .bulk-operations-bar .selection-count {
    color: var(--accent, #4da3ff);
    font-weight: 500;
    font-size: var(--font-size-sm);
}

body.feature-home .bulk-operations-bar .btn {
    padding: 6px 12px;
    font-size: 12px;
}

body.feature-home .bulk-operations-bar .btn.danger {
    background: var(--danger);
    color: var(--text-on-accent-dark);
    border-color: var(--danger);
}

body.feature-home .bulk-operations-bar .btn.danger:hover {
    background: var(--danger-hover);
}

/* Image focus state for keyboard resize */

/* ==================== Isolated table theme (preview + edit) ==================== */
/* High-specificity, prefixed under #contentArea to avoid bleed and override generic content-area styles */
#contentArea .enhanced-table-container .table-wrapper > table.enhanced-table,
#contentArea .enhanced-table-wrapper > table.enhanced-table,
body.feature-home #contentArea .table-wrapper > table.clean-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--table-border);
    background: var(--panel);
}

#contentArea .enhanced-table-container .table-wrapper > table.enhanced-table th,
#contentArea .enhanced-table-wrapper > table.enhanced-table th,
body.feature-home #contentArea .table-wrapper > table.clean-table th {
    background: var(--table-header-bg);
    color: var(--table-header-text);
    font-weight: 600;
    text-align: left;
    border: 1px solid var(--table-border);
    padding: 12px 16px;
}

#contentArea .enhanced-table-container .table-wrapper > table.enhanced-table td,
#contentArea .enhanced-table-wrapper > table.enhanced-table td,
body.feature-home #contentArea .table-wrapper > table.clean-table td {
    background: var(--table-cell-bg);
    color: var(--table-cell-text);
    border: 1px solid var(--table-border);
    padding: 12px 16px;
    vertical-align: top;
}

/* Hover/focus hints remain only in edit mode */
#contentArea.edit-mode .table-wrapper .clean-table th:hover,
body.feature-home #contentArea.edit-mode .table-wrapper .clean-table td:hover {
    background-color: var(--hover);
}

/* Ensure generic content-area table fallback never touches enhanced/clean tables */
.content-area table.enhanced-table,
body.feature-home .content-area table.clean-table {
    margin: 8px 0;
}

/* === Link Modal Styles === */
/* Modal uses modalSystem - these styles enhance the content */
body.feature-home .link-modal-content {
    font-family: var(--font-sans, "Inter", "Roboto", sans-serif);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--text);
}

body.feature-home .link-modal-section {
    margin-bottom: 28px;
}

body.feature-home .link-modal-section:last-child {
    margin-bottom: 0;
}

body.feature-home .link-modal-label {
    display: block;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
}

/* Selected Text Preview Section - Compact & Theme-Aware */
body.feature-home .link-modal-preview-section {
    margin-bottom: 16px;
}

body.feature-home .selected-text-preview {
    background: var(--panel-2, var(--panel));
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 16px;
}

body.feature-home .preview-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

body.feature-home .preview-icon {
    font-size: 12px;
}

body.feature-home .preview-text {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text);
    font-weight: 500;
    word-break: break-word;
}

body.feature-home .preview-hint {
    margin-top: 6px;
    font-size: 12px;
    color: var(--muted);
    opacity: 0.8;
}

body.feature-home .no-selection-notice {
    background: var(--warning-bg, rgba(255, 193, 7, 0.1));
    border: 1px solid var(--warning-border, rgba(255, 193, 7, 0.3));
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
}

body.feature-home .notice-icon {
    font-size: 16px;
    margin-top: 1px;
}

body.feature-home .notice-text {
    font-size: 13px;
    line-height: 1.4;
    color: var(--text);
}

body.feature-home .notice-text strong {
    color: var(--warning);
}

/* Modern Radio Button Styles - Spacious & Modern */
body.feature-home .link-modal-radio-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.feature-home .modern-radio-option {
    display: flex;
    align-items: center;
    padding: 16px 18px;
    background: var(--panel-2, var(--panel));
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

body.feature-home .modern-radio-option:hover {
    border-color: var(--accent);
    background: var(--hover);
    transform: translateY(-0.5px);
}

body.feature-home .modern-radio-option:has(.radio-input:checked) {
    border-color: var(--accent);
    background: var(--active);
}

body.feature-home .radio-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

body.feature-home .radio-content {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

body.feature-home .radio-icon {
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--panel);
    border-radius: 8px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

body.feature-home .modern-radio-option:has(.radio-input:checked) .radio-icon {
    background: var(--accent);
    transform: scale(1.05);
}

body.feature-home .radio-text {
    flex: 1;
    min-width: 0;
}

body.feature-home .radio-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

body.feature-home .radio-description {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.3;
    opacity: 0.9;
}

/* Custom radio indicator - Modern */
body.feature-home .modern-radio-option::before {
    content: "";
    position: absolute;
    top: 16px;
    right: 18px;
    width: 18px;
    height: 18px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg);
    transition: all 0.2s ease;
}

body.feature-home .modern-radio-option::after {
    content: "";
    position: absolute;
    top: 21px;
    right: 23px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    transform: scale(0);
    transition: all 0.2s ease;
}

body.feature-home .modern-radio-option:has(.radio-input:checked)::before {
    border-color: var(--accent);
    background: var(--accent);
}

body.feature-home .modern-radio-option:has(.radio-input:checked)::after {
    transform: scale(1);
    background: var(--bg);
}

/* Input styles - Theme-aware and compact */
.modal-input,
.link-modal input[type="text"],
body.feature-home .link-modal input[type="url"] {
    width: 100%;
    padding: 8px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-size: var(--font-size-sm);
    font-family: inherit;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.modal-input:focus,
.link-modal input[type="text"]:focus,
body.feature-home .link-modal input[type="url"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(77, 163, 255, 0.1);
}

body.feature-home .modal-input::placeholder {
    color: var(--muted);
    opacity: 0.7;
}

/* Link modal hints */
body.feature-home .link-modal-hint {
    margin-top: 4px;
    font-size: 12px;
    color: var(--muted);
    opacity: 0.8;
}

/* Checkbox styling */
body.feature-home .link-modal-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--text);
}

body.feature-home .link-modal-checkbox input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    accent-color: var(--accent);
}

/* Task Search Results */
body.feature-home .work item-results-container {
    margin-top: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    max-height: 300px;
    overflow-y: auto;
    box-shadow: var(--shadow);
}

body.feature-home .work item-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.15s ease;
}

body.feature-home .work item-result-item:last-child {
    border-bottom: none;
}

body.feature-home .work item-result-item:hover {
    background: var(--hover);
}

body.feature-home .work item-result-item.selected {
    background: var(--active, rgba(77, 163, 255, 0.1));
    border-color: var(--accent);
}

body.feature-home .work item-info {
    flex: 1;
    min-width: 0;
}

body.feature-home .work item-result-key {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--accent);
    margin-bottom: 2px;
}

body.feature-home .work item-result-title {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.9;
}

body.feature-home .work item-select-btn {
    padding: 6px 12px;
    background: var(--accent);
    color: var(--text-on-accent-dark);
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

body.feature-home .work item-select-btn:hover {
    background: var(--accent-hover, var(--accent));
    transform: translateY(-1px);
}

.work item-loading,
.no-tasks-found,
body.feature-home .work item-error {
    padding: 16px;
    text-align: center;
    color: var(--muted);
    font-size: var(--font-size-sm);
}

body.feature-home .work item-loading {
    color: var(--accent);
}

body.feature-home .work item-error {
    color: var(--danger);
}

body.feature-home .no-tasks-found {
    font-style: italic;
}

/* Code Block Text Color Fix - Maximum Specificity for Edit Mode */
/* Override Prism's default color: #ccc with white text for code blocks in edit mode */
body.feature-home .content-area.edit-mode pre code,
body.feature-home .content-area.edit-mode pre code[class*="language-"],
body.feature-home .content-area.edit-mode pre code.token,
body.feature-home .content-area.edit-mode pre code.token.comment,
body.feature-home .content-area.edit-mode pre code.token.punctuation,
body.feature-home .content-area.edit-mode pre code.token.operator,
body.feature-home .content-area.edit-mode pre code.token.keyword,
body.feature-home .content-area.edit-mode pre code.token.string,
body.feature-home .content-area.edit-mode pre code.token.number,
body.feature-home .content-area.edit-mode pre code.token.function,
body.feature-home .content-area.edit-mode pre code.token.class,
body.feature-home .content-area.edit-mode pre code.token.variable {
    color: #ffffff !important;
}

/* Additional specificity for language classes */
body.feature-home .content-area.edit-mode code[class*="language-"] {
    color: #ffffff !important;
}

/* Ensure all code elements in edit mode have white text */
body.feature-home .content-area.edit-mode pre code,
body.feature-home .content-area.edit-mode pre {
    color: #ffffff !important;
}

/* Maximum specificity rules for code blocks - override everything */
body.feature-home .content-area.edit-mode pre code,
body.feature-home .content-area.edit-mode pre code[class*="language-"],
body.feature-home .content-area.edit-mode pre code.token,
body.feature-home .content-area.edit-mode pre code.token.comment,
body.feature-home .content-area.edit-mode pre code.token.punctuation,
body.feature-home .content-area.edit-mode pre code.token.operator,
body.feature-home .content-area.edit-mode pre code.token.keyword,
body.feature-home .content-area.edit-mode pre code.token.string,
body.feature-home .content-area.edit-mode pre code.token.number,
body.feature-home .content-area.edit-mode pre code.token.function,
body.feature-home .content-area.edit-mode pre code.token.class,
body.feature-home .content-area.edit-mode pre code.token.variable,
body.feature-home .content-area.edit-mode code[class*="language-"] {
    color: #ffffff !important;
}

/* Ensure inline code also has proper styling */
body.feature-home
    .content-area.edit-mode
    code:not(.token):not([class*="language-"]) {
    color: var(--inline-code-text) !important;
    font-weight: 700 !important;
}

/* Preview mode code block styling - theme-aware colors */
body.feature-home .content-area.preview-mode pre code,
body.feature-home .content-area.preview-mode pre code[class*="language-"],
body.feature-home .content-area.preview-mode pre code.token,
body.feature-home .content-area.preview-mode pre code.token.comment,
body.feature-home .content-area.preview-mode pre code.token.punctuation,
body.feature-home .content-area.preview-mode pre code.token.operator,
body.feature-home .content-area.preview-mode pre code.token.keyword,
body.feature-home .content-area.preview-mode pre code.token.string,
body.feature-home .content-area.preview-mode pre code.token.number,
body.feature-home .content-area.preview-mode pre code.token.function,
body.feature-home .content-area.preview-mode pre code.token.class,
body.feature-home .content-area.preview-mode pre code.token.variable,
body.feature-home .content-area.preview-mode code[class*="language-"] {
    color: var(--code-text, #0f172a) !important;
}

/* Preview mode inline code styling */
body.feature-home
    .content-area.preview-mode
    code:not(.token):not([class*="language-"]) {
    color: var(--inline-code-text) !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   MAXIMUM SPECIFICITY CODE BLOCK RULES - OVERRIDE ALL PRISM STYLES
   ========================================================================== */

/* Edit mode - Force white text for ALL code elements, override Prism completely */
body.feature-home .content-area.edit-mode pre code,
body.feature-home .content-area.edit-mode pre code[class*="language-"],
body.feature-home .content-area.edit-mode pre code.token,
body.feature-home .content-area.edit-mode pre code.token.comment,
body.feature-home .content-area.edit-mode pre code.token.punctuation,
body.feature-home .content-area.edit-mode pre code.token.operator,
body.feature-home .content-area.edit-mode pre code.token.keyword,
body.feature-home .content-area.edit-mode pre code.token.string,
body.feature-home .content-area.edit-mode pre code.token.number,
body.feature-home .content-area.edit-mode pre code.token.function,
body.feature-home .content-area.edit-mode pre code.token.class,
body.feature-home .content-area.edit-mode pre code.token.variable,
body.feature-home .content-area.edit-mode code[class*="language-"],
body.feature-home .content-area.edit-mode .token,
body.feature-home .content-area.edit-mode .token.comment,
body.feature-home .content-area.edit-mode .token.punctuation,
body.feature-home .content-area.edit-mode .token.operator,
body.feature-home .content-area.edit-mode .token.keyword,
body.feature-home .content-area.edit-mode .token.string,
body.feature-home .content-area.edit-mode .token.number,
body.feature-home .content-area.edit-mode .token.function,
body.feature-home .content-area.edit-mode .token.class,
body.feature-home .content-area.edit-mode .token.variable,
body.feature-home .content-area.edit-mode .token.property,
body.feature-home .content-area.edit-mode .token.tag,
body.feature-home .content-area.edit-mode .token.boolean,
body.feature-home .content-area.edit-mode .token.constant,
body.feature-home .content-area.edit-mode .token.attr-name,
body.feature-home .content-area.edit-mode .token.attr-value,
body.feature-home .content-area.edit-mode .token.selector {
    color: var(--code-text) !important;
}

/* Override Prism's default token styles in edit mode */
body.feature-home .content-area.edit-mode .token.prolog,
body.feature-home .content-area.edit-mode .token.doctype,
body.feature-home .content-area.edit-mode .token.cdata {
    color: var(--code-text) !important;
}

/* Ensure pre elements themselves also have white text in edit mode */
body.feature-home .content-area.edit-mode pre {
    color: var(--code-text) !important;
}

/* Override any external Prism theme styles in edit mode */
body.feature-home .content-area.edit-mode code[class*="language-"],
body.feature-home .content-area.edit-mode pre[class*="language-"] {
    color: var(--code-text) !important;
}

/* Ajout d'une surcharge CSS pour les thèmes sombres afin de redéfinir --text-on-light-bg vers une couleur claire. Ceci corrige les règles existantes qui forcent la couleur via var(--text-on-light-bg, #000000) */
body.feature-home.theme-dark-modern,
body.feature-home.theme-dark-professional {
    --text-on-light-bg: #ffffff; /* utilisé par nombreuses règles existantes */
}

/* Force inline code inside tables to render as pure black in all modes */
body.feature-home table.agent-table code,
body.feature-home table.managed-table code,
body.feature-home .agent-table code,
body.feature-home .managed-table code,
body.feature-home table.agent-table .tbl-inner code,
body.feature-home table.managed-table .tbl-inner code,
body.feature-home .content-area.edit-mode table.agent-table code,
body.feature-home .content-area.preview-mode table.agent-table code,
body.feature-home .content-area.edit-mode .agent-table code,
body.feature-home .content-area.preview-mode .agent-table code {
    color: #000000 !important;
    background: transparent !important;
    border: 0 !important;
}

/* Ensure any Prism tokens inside inline code in tables stay black */
body.feature-home .agent-table code .token,
body.feature-home .managed-table code .token {
    color: #000000 !important;
}

/* Force links inside tables to have visible black text for all themes */
body.feature-home table a,
body.feature-home table td a,
body.feature-home table th a,
body.feature-home table .tbl-inner a,
body.feature-home .agent-table a,
body.feature-home .agent-table td a,
body.feature-home .agent-table th a,
body.feature-home .agent-table .tbl-inner a,
body.feature-home .managed-table a,
body.feature-home .managed-table td a,
body.feature-home .managed-table th a,
body.feature-home .managed-table .tbl-inner a,
body.feature-home .table-lib-table a,
body.feature-home .table-lib-table td a,
body.feature-home .table-lib-table th a,
body.feature-home .table-lib-table .tbl-inner a,
body.feature-home .content-area table a,
body.feature-home .content-area table td a,
body.feature-home .content-area table .tbl-inner a,
body.feature-home .content-area.edit-mode table a,
body.feature-home .content-area.edit-mode table td a,
body.feature-home .content-area.edit-mode table .tbl-inner a,
body.feature-home .content-area.preview-mode table a,
body.feature-home .content-area.preview-mode table td a,
body.feature-home .content-area.preview-mode table .tbl-inner a,
body.feature-home .content-area .agent-table a,
body.feature-home .content-area .agent-table td a,
body.feature-home .content-area .agent-table .tbl-inner a,
body.feature-home .content-area.edit-mode .agent-table a,
body.feature-home .content-area.edit-mode .agent-table td a,
body.feature-home .content-area.edit-mode .agent-table .tbl-inner a,
body.feature-home .content-area.preview-mode .agent-table a,
body.feature-home .content-area.preview-mode .agent-table td a,
body.feature-home .content-area.preview-mode .agent-table .tbl-inner a {
    color: #0066cc !important;
    text-decoration: underline !important;
}

body.feature-home table a:hover,
body.feature-home table td a:hover,
body.feature-home table .tbl-inner a:hover,
body.feature-home .agent-table a:hover,
body.feature-home .agent-table td a:hover,
body.feature-home .agent-table .tbl-inner a:hover,
body.feature-home .content-area table a:hover,
body.feature-home .content-area table td a:hover,
body.feature-home .content-area table .tbl-inner a:hover {
    color: #0044aa !important;
}

/* Force inline code inside tables to have black text - matches specificity of code:not() rules */
body.feature-home
    .content-area.edit-mode
    table
    code:not(.token):not([class*="language-"]),
body.feature-home
    .content-area.edit-mode
    table
    td
    code:not(.token):not([class*="language-"]),
body.feature-home
    .content-area.edit-mode
    table
    .tbl-inner
    code:not(.token):not([class*="language-"]),
body.feature-home
    .content-area.preview-mode
    table
    code:not(.token):not([class*="language-"]),
body.feature-home
    .content-area.preview-mode
    table
    td
    code:not(.token):not([class*="language-"]),
body.feature-home
    .content-area.preview-mode
    table
    .tbl-inner
    code:not(.token):not([class*="language-"]),
body.feature-home
    .content-area.edit-mode
    .agent-table
    code:not(.token):not([class*="language-"]),
body.feature-home
    .content-area.edit-mode
    .agent-table
    td
    code:not(.token):not([class*="language-"]),
body.feature-home
    .content-area.edit-mode
    .agent-table
    .tbl-inner
    code:not(.token):not([class*="language-"]),
body.feature-home
    .content-area.preview-mode
    .agent-table
    code:not(.token):not([class*="language-"]),
body.feature-home
    .content-area.preview-mode
    .agent-table
    td
    code:not(.token):not([class*="language-"]),
body.feature-home
    .content-area.preview-mode
    .agent-table
    .tbl-inner
    code:not(.token):not([class*="language-"]),
body.feature-home
    .content-area.edit-mode
    .managed-table
    code:not(.token):not([class*="language-"]),
body.feature-home
    .content-area.edit-mode
    .managed-table
    .tbl-inner
    code:not(.token):not([class*="language-"]),
body.feature-home
    .content-area.preview-mode
    .managed-table
    code:not(.token):not([class*="language-"]),
body.feature-home
    .content-area.preview-mode
    .managed-table
    .tbl-inner
    code:not(.token):not([class*="language-"]),
body.feature-home
    #contentArea.edit-mode
    table
    code:not(.token):not([class*="language-"]),
body.feature-home
    #contentArea.edit-mode
    table
    .tbl-inner
    code:not(.token):not([class*="language-"]),
body.feature-home
    #contentArea.preview-mode
    table
    code:not(.token):not([class*="language-"]),
body.feature-home
    #contentArea.preview-mode
    table
    .tbl-inner
    code:not(.token):not([class*="language-"]),
body.feature-home
    #contentArea.edit-mode
    .agent-table
    code:not(.token):not([class*="language-"]),
body.feature-home
    #contentArea.edit-mode
    .agent-table
    .tbl-inner
    code:not(.token):not([class*="language-"]),
body.feature-home
    #contentArea.preview-mode
    .agent-table
    code:not(.token):not([class*="language-"]),
body.feature-home
    #contentArea.preview-mode
    .agent-table
    .tbl-inner
    code:not(.token):not([class*="language-"]),
body.feature-home.theme-dark-modern
    .content-area
    table
    code:not(.token):not([class*="language-"]),
body.feature-home.theme-dark-modern
    .content-area
    table
    .tbl-inner
    code:not(.token):not([class*="language-"]),
body.feature-home.theme-dark-modern
    .content-area
    .agent-table
    code:not(.token):not([class*="language-"]),
body.feature-home.theme-dark-modern
    .content-area
    .agent-table
    .tbl-inner
    code:not(.token):not([class*="language-"]),
body.feature-home.theme-dark-professional
    .content-area
    table
    code:not(.token):not([class*="language-"]),
body.feature-home.theme-dark-professional
    .content-area
    table
    .tbl-inner
    code:not(.token):not([class*="language-"]),
body.feature-home.theme-dark-professional
    .content-area
    .agent-table
    code:not(.token):not([class*="language-"]),
body.feature-home.theme-dark-professional
    .content-area
    .agent-table
    .tbl-inner
    code:not(.token):not([class*="language-"]),
body.feature-home.theme-light-clean
    .content-area
    table
    code:not(.token):not([class*="language-"]),
body.feature-home.theme-light-clean
    .content-area
    table
    .tbl-inner
    code:not(.token):not([class*="language-"]),
body.feature-home.theme-light-clean
    .content-area
    .agent-table
    code:not(.token):not([class*="language-"]),
body.feature-home.theme-light-clean
    .content-area
    .agent-table
    .tbl-inner
    code:not(.token):not([class*="language-"]) {
    color: #000000 !important;
    background: transparent !important;
    font-weight: 700 !important;
}