@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Lexend:wght@300;400;500;600;700&display=swap');
    :root {
      --font-primary: 'Lexend', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      --font-secondary: 'Inter', sans-serif;
      --font-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;

      --sidebar-width: 280px; 
      --sidebar-width-md: 300px;
      --content-max-width: 860px;
      
      --bg-body-light: #F8FAFC; 
      --bg-sidebar-light: #FFFFFF; 
      --bg-content-light: #FFFFFF; 
      --bg-accent-light: #3B82F6; 
      --bg-accent-hover-light: #2563EB; 
      --bg-code-light: #F1F5F9; 
      --bg-quote-light: #F3F4F6; 
      --bg-table-header-light: #F9FAFB; 
      --bg-copy-btn-light: #E0E7FF; 
      --bg-copy-btn-hover-light: #C7D2FE; 
      --bg-sidebar-toggle-light: #FFFFFF;
      --bg-sidebar-toggle-hover-light: #F1F5F9;
      --progress-bar-bg-light: #E5E7EB; 
      --progress-bar-value-light: var(--bg-accent-light); 
      --nav-button-bg-light: #E0E7FF; 
      --nav-button-text-light: #3730A3; 
      --nav-button-hover-bg-light: #C7D2FE;
      --nav-button-disabled-bg-light: #F3F4F6;
      --nav-button-disabled-text-light: #9CA3AF;
      --checkmark-color-light: #16A34A; 
      --attachment-bg-light: #EFF6FF; 
      --attachment-border-light: #BFDBFE; 
      --attachment-text-light: #1D4ED8; 
      --attachment-hover-bg-light: #DBEAFE; 
      --header-nav-link-bg-default-light: #F9FAFB; 
      --header-nav-link-border-default-light: #F3F4F6; 
      --header-nav-link-bg-hover-light: #E0E7FF;
      --header-nav-dropdown-bg-light: #FFFFFF;
      --cta-bg-light: #E0F2FE; /* Light blue, similar to info alert */
      --cta-border-light: #7DD3FC; /* Slightly darker blue border */
      --cta-text-light: #0C4A6E; /* Dark blue text */


      --text-primary-light: #1E293B; 
      --text-secondary-light: #475569; 
      --text-accent-light: var(--bg-accent-light);
      --text-on-accent-light: #FFFFFF;
      --text-code-light: #0F172A; 
      --text-copy-btn-light: #3730A3; 
      --text-sidebar-toggle-light: #334155; 
      --header-nav-link-text-light: #374151; 
      --header-nav-link-text-hover-light: var(--bg-accent-light);
      
      --border-primary-light: #E2E8F0; 
      --border-secondary-light: #CBD5E1; 
      --border-accent-light: var(--bg-accent-light);
      --border-code-light: #CBD5E1; 
      --border-sidebar-toggle-light: #CBD5E1;
      --nav-button-border-light: #A5B4FC;
      --header-nav-dropdown-border-light: #E5E7EB;


      --bg-body-dark: #0F172A; 
      --bg-sidebar-dark: #1E293B; 
      --bg-content-dark: #1E293B; 
      --bg-accent-dark: #60A5FA; 
      --bg-accent-hover-dark: #3B82F6; 
      --bg-code-dark: #334155; 
      --bg-quote-dark: #374151; 
      --bg-table-header-dark: #374151; 
      --bg-copy-btn-dark: #312E81; 
      --bg-copy-btn-hover-dark: #3730A3; 
      --bg-sidebar-toggle-dark: #1E293B;
      --bg-sidebar-toggle-hover-dark: #334155;
      --progress-bar-bg-dark: #374151;
      --progress-bar-value-dark: var(--bg-accent-dark);
      --nav-button-bg-dark: #312E81; 
      --nav-button-text-dark: #A5B4FC; 
      --nav-button-hover-bg-dark: #3730A3;
      --nav-button-disabled-bg-dark: #334155;
      --nav-button-disabled-text-dark: #6B7280;
      --checkmark-color-dark: #22C55E; 
      --attachment-bg-dark: #1E3A8A; 
      --attachment-border-dark: #2563EB; 
      --attachment-text-dark: #BFDBFE; 
      --attachment-hover-bg-dark: #1D4ED8; 
      --header-nav-link-bg-default-dark: #2C3E50; 
      --header-nav-link-border-default-dark: #374155; 
      --header-nav-link-bg-hover-dark: #334155;
      --header-nav-dropdown-bg-dark: #1F2937;
      --cta-bg-dark: #0C4A6E; /* Dark blue, similar to info alert dark */
      --cta-border-dark: #38BDF8; /* Lighter blue border */
      --cta-text-dark: #E0F2FE; /* Light text */


      --text-primary-dark: #E2E8F0; 
      --text-secondary-dark: #94A3B8; 
      --text-accent-dark: var(--bg-accent-dark);
      --text-on-accent-dark: #0F172A; 
      --text-code-dark: #F1F5F9; 
      --text-copy-btn-dark: #A5B4FC; 
      --text-sidebar-toggle-dark: #94A3B8; 
      --header-nav-link-text-dark: #D1D5DB; 
      --header-nav-link-text-hover-dark: var(--bg-accent-dark);

      --border-primary-dark: #334155; 
      --border-secondary-dark: #475569; 
      --border-accent-dark: var(--border-accent-dark);
      --border-code-dark: #475569; 
      --border-sidebar-toggle-dark: #475569;
      --nav-button-border-dark: #4F46E5;
      --header-nav-dropdown-border: var(--header-nav-dropdown-border-dark);
      
      --final-bg-alert-info-light: #e0f2fe;
      --final-border-alert-info-light: #3b82f6;
      --final-text-alert-info-light: #0c4a6e;
      --final-bg-alert-important-light: #fef9c3;
      --final-border-alert-important-light: #facc15;
      --final-text-alert-important-light: #713f12;
      --final-bg-alert-warning-light: #fee2e2;
      --final-border-alert-warning-light: #ef4444;
      --final-text-alert-warning-light: #7f1d1d;

      --final-bg-alert-info-dark: #073351; 
      --final-border-alert-info-dark: #38bdf8; 
      --final-text-alert-info-dark: #e0f2fe; 
      --final-bg-alert-important-dark: #452c08; 
      --final-border-alert-important-dark: #fcd34d; 
      --final-text-alert-important-dark: #fef9c3; 
      --final-bg-alert-warning-dark: #5c1212; 
      --final-border-alert-warning-dark: #f87171; 
      --final-text-alert-warning-dark: #fee2e2; 
      
      --bg-body: var(--bg-body-light);
      --bg-sidebar: var(--bg-sidebar-light);
      --bg-content: var(--bg-content-light);
      --bg-accent: var(--bg-accent-light);
      --bg-accent-hover: var(--bg-accent-hover-light);
      --bg-code: var(--bg-code-light);
      --bg-quote: var(--bg-quote-light);
      --bg-table-header: var(--bg-table-header-light);
      --bg-copy-btn: var(--bg-copy-btn-light);
      --bg-copy-btn-hover: var(--bg-copy-btn-hover-light);
      --bg-sidebar-toggle: var(--bg-sidebar-toggle-light);
      --bg-sidebar-toggle-hover: var(--bg-sidebar-toggle-hover-light);
      --progress-bar-bg: var(--progress-bar-bg-light);
      --progress-bar-value: var(--progress-bar-value-light);
      --nav-button-bg: var(--nav-button-bg-light);
      --nav-button-text: var(--nav-button-text-light);
      --nav-button-hover-bg: var(--nav-button-hover-bg-light);
      --nav-button-disabled-bg: var(--nav-button-disabled-bg-light);
      --nav-button-disabled-text: var(--nav-button-disabled-text-light);
      --checkmark-color: var(--checkmark-color-light);
      --attachment-bg: var(--attachment-bg-light);
      --attachment-border: var(--attachment-border-light);
      --attachment-text: var(--attachment-text-light);
      --attachment-hover-bg: var(--attachment-hover-bg-light);
      --header-nav-link-bg-default: var(--header-nav-link-bg-default-light);
      --header-nav-link-border-default: var(--header-nav-link-border-default-light);
      --header-nav-link-bg-hover: var(--header-nav-link-bg-hover-light);
      --header-nav-dropdown-bg: var(--header-nav-dropdown-bg-light);
      --header-nav-link-text: var(--header-nav-link-text-light);
      --header-nav-link-text-hover: var(--header-nav-link-text-hover-light);
      --header-nav-dropdown-border: var(--header-nav-dropdown-border-light);
      --cta-bg: var(--cta-bg-light);
      --cta-border: var(--cta-border-light);
      --cta-text: var(--cta-text-light);


      --text-primary: var(--text-primary-light);
      --text-secondary: var(--text-secondary-light);
      --text-accent: var(--text-accent-light);
      --text-on-accent: var(--text-on-accent-light);
      --text-code: var(--text-code-light);
      --text-copy-btn: var(--text-copy-btn-light);
      --text-sidebar-toggle: var(--text-sidebar-toggle-light);

      --border-primary: var(--border-primary-light);
      --border-secondary: var(--border-secondary-light);
      --border-accent: var(--border-accent-light);
      --border-code: var(--border-code-light);
      --border-sidebar-toggle: var(--border-sidebar-toggle-light);
      --nav-button-border: var(--nav-button-border-light);


      --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
      --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
      --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
      --rounded-sm: 0.125rem;
      --rounded-md: 0.375rem;
      --rounded-lg: 0.5rem;
      --rounded-full: 9999px;
      --transition-colors: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
      --transition-transform: transform 0.3s ease-in-out;
      --transition-margin: margin-left 0.3s ease-in-out, margin-right 0.3s ease-in-out;
    }

    html.theme-dark {
      --bg-body: var(--bg-body-dark);
      --bg-sidebar: var(--bg-sidebar-dark);
      --bg-content: var(--bg-content-dark);
      --bg-accent: var(--bg-accent-dark);
      --bg-accent-hover: var(--bg-accent-hover-dark);
      --bg-code: var(--bg-code-dark);
      --bg-quote: var(--bg-quote-dark);
      --bg-table-header: var(--bg-table-header-dark);
      --bg-copy-btn: var(--bg-copy-btn-dark);
      --bg-copy-btn-hover: var(--bg-copy-btn-hover-dark);
      --bg-sidebar-toggle: var(--bg-sidebar-toggle-dark);
      --bg-sidebar-toggle-hover: var(--bg-sidebar-toggle-hover-dark);
      --progress-bar-bg: var(--progress-bar-bg-dark);
      --progress-bar-value: var(--progress-bar-value-dark);
      --nav-button-bg: var(--nav-button-bg-dark);
      --nav-button-text: var(--nav-button-text-dark);
      --nav-button-hover-bg: var(--nav-button-hover-bg-dark);
      --nav-button-disabled-bg: var(--nav-button-disabled-bg-dark);
      --nav-button-disabled-text: var(--nav-button-disabled-text-dark);
      --checkmark-color: var(--checkmark-color-dark);
      --attachment-bg: var(--attachment-bg-dark);
      --attachment-border: var(--attachment-border-dark);
      --attachment-text: var(--attachment-text-dark);
      --attachment-hover-bg: var(--attachment-hover-bg-dark);
      --header-nav-link-bg-default: var(--header-nav-link-bg-default-dark);
      --header-nav-link-border-default: var(--header-nav-link-border-default-dark);
      --header-nav-link-bg-hover: var(--header-nav-link-bg-hover-dark);
      --header-nav-dropdown-bg: var(--header-nav-dropdown-bg-dark);
      --header-nav-link-text: var(--header-nav-link-text-dark);
      --header-nav-link-text-hover: var(--header-nav-link-text-hover-dark);
      --header-nav-dropdown-border: var(--header-nav-dropdown-border-dark);
      --cta-bg: var(--cta-bg-dark);
      --cta-border: var(--cta-border-dark);
      --cta-text: var(--cta-text-dark);


      --text-primary: var(--text-primary-dark);
      --text-secondary: var(--text-secondary-dark);
      --text-accent: var(--text-accent-dark);
      --text-on-accent: var(--text-on-accent-dark);
      --text-code: var(--text-code-dark);
      --text-copy-btn: var(--text-copy-btn-dark);
      --text-sidebar-toggle: var(--text-sidebar-toggle-dark);

      --border-primary: var(--border-primary-dark);
      --border-secondary: var(--border-secondary-dark);
      --border-accent: var(--border-accent-dark);
      --border-code: var(--border-code-dark);
      --border-sidebar-toggle: var(--border-sidebar-toggle-dark);
      --nav-button-border: var(--nav-button-border-dark);
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; font-family: var(--font-primary); transition: var(--transition-colors); }
    body {
      background-color: var(--bg-body); color: var(--text-primary);
      font-family: var(--font-secondary); line-height: 1.65;
      margin: 0; 
      display: flex;
      flex-direction: column; /* Ensure body stacks children vertically */
      min-height: 100vh;
      -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
      transition: var(--transition-colors);
      overflow-x: hidden; 
    }

    .e-learning-layout { 
      display: flex; /* This remains row for sidebar + content */
      flex-grow: 1; /* Takes up available vertical space in body's flex column */
      position: relative; 
    }
    
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border-secondary); border-radius: 10px; }
    #e-learning-sidebar::-webkit-scrollbar-thumb { border: 2px solid var(--bg-sidebar); }
    #e-learning-content-area::-webkit-scrollbar-thumb { border: 2px solid var(--bg-content); }
    ::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }
    #e-learning-sidebar, #e-learning-content-area, .toc-container { 
        scrollbar-width: thin; 
        scrollbar-color: var(--border-secondary) transparent;
    }

    
    #e-learning-sidebar {
      width: var(--sidebar-width); background-color: var(--bg-sidebar);
      border-right: 1px solid var(--border-primary);
      padding: 1.5rem 0.5rem 1.5rem 1.25rem; 
      height: 100vh; overflow-y: auto; position: fixed; top: 0; left: 0;
      display: flex; flex-direction: column; gap: 0.75rem; 
      box-shadow: var(--shadow-md);
      transition: var(--transition-colors), var(--transition-transform), border-color 0.3s ease, visibility 0.3s ease;
      z-index: 100; 
    }
    html[dir="rtl"] #e-learning-sidebar {
      left: auto; right: 0; border-left: 1px solid var(--border-primary); border-right: none;
      padding: 1.5rem 1.25rem 1.5rem 0.5rem; 
    }
    
    html.sidebar-is-collapsed #e-learning-sidebar {
      transform: translateX(-100%);
      visibility: hidden;
    }
    html[dir="rtl"].sidebar-is-collapsed #e-learning-sidebar {
      transform: translateX(100%);
    }

    .sidebar-guide-title-link {
        color: inherit;
        text-decoration: none;
        display: block;
    }
    .sidebar-guide-title-link:hover .sidebar-guide-title, .sidebar-guide-title-link:focus .sidebar-guide-title {
        color: var(--text-accent);
    }
    .sidebar-guide-title {
      font-family: var(--font-primary); font-size: 1.25em; font-weight: 700; color: var(--text-primary);
      margin: 0; padding: 0 0.5rem 0.75rem 0; 
      line-height: 1.3; 
      transition: var(--transition-colors);
    }
    html[dir="rtl"] .sidebar-guide-title { padding: 0 0 0.75rem 0.5rem; }

    .guide-progress-container {
      padding: 0 0.5rem 0.75rem 0;
      border-bottom: 1px solid var(--border-primary);
      margin-bottom: 0.75rem;
    }
    html[dir="rtl"] .guide-progress-container { padding: 0 0 0.75rem 0.5rem; }
    #guide-overall-progress {
      width: 100%;
      height: 0.625rem; 
      border-radius: var(--rounded-full);
      overflow: hidden;
      background-color: var(--progress-bar-bg);
      border: none; 
      margin-bottom: 0.375rem; 
    }
    #guide-overall-progress::-webkit-progress-bar {
      background-color: var(--progress-bar-bg);
      border-radius: var(--rounded-full);
    }
    #guide-overall-progress::-webkit-progress-value {
      background-color: var(--progress-bar-value);
      border-radius: var(--rounded-full);
      transition: background-color 0.3s ease, width 0.3s ease;
    }
    #guide-overall-progress::-moz-progress-bar {
      background-color: var(--progress-bar-value);
      border-radius: var(--rounded-full);
      transition: background-color 0.3s ease, width 0.3s ease;
    }
    #guide-progress-text {
      display: block;
      font-size: 0.75rem; 
      font-weight: 500;
      color: var(--text-secondary);
      text-align: center;
      margin-top: 0.25rem;
    }

    .toc-container { flex-grow: 1; overflow-y: auto; padding-right: 0.25rem; margin-bottom: 0.75rem; }
    html[dir="rtl"] .toc-container { padding-right: 0; padding-left: 0.25rem; }
    .toc-main-heading {
      font-family: var(--font-primary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
      color: var(--text-secondary); margin: 0 0 0.6rem 0.125rem; 
      letter-spacing: 0.05em; transition: var(--transition-colors);
    }
    html[dir="rtl"] .toc-main-heading { margin: 0 0.125rem 0.6rem 0; }
    .toc-container ul { list-style: none; padding: 0; margin: 0; }
    .toc-container li { margin-bottom: 0; } 
    
    .toc-item-content-wrapper {
        display: flex;
        align-items: center;
        min-height: 1.2em; 
    }
    .toc-toggle-button {
        background: none; border: none;
        padding: 0; 
        margin-inline-end: 0.1rem; 
        cursor: pointer; color: var(--text-secondary);
        display: inline-flex; align-items: center; justify-content: center;
        width: 1.1em; 
        height: 1.1em; 
        flex-shrink: 0; 
        border-radius: var(--rounded-full);
    }
    .toc-toggle-button:hover, .toc-toggle-button:focus {
        color: var(--text-primary);
        background-color: var(--bg-code); 
    }
    .toc-toggle-button svg.toc-toggle-icon {
        width: 0.85em; height: 0.85em; 
        transition: transform 0.2s ease-in-out;
    }
    .toc-toggle-button[aria-expanded="true"] svg.toc-toggle-icon {
        transform: rotate(90deg);
    }

    .completion-checkmark {
        display: inline-block;
        width: 1em; 
        height: 1em; 
        line-height: 1em; 
        text-align: center;
        font-weight: bold;
        color: var(--checkmark-color);
        margin-inline-end: 0.1rem; 
        font-size: 0.8em; 
        flex-shrink: 0;
    }
    .completion-checkmark.completed {
        content: '✓';
    }

    .toc-container a.toc-link {
      display: block; text-decoration: none; color: var(--text-secondary);
      padding: 0.35rem 0.6rem 0.35rem 0.1rem; 
      border-radius: var(--rounded-md); 
      font-size: 0.825rem; font-weight: 500; line-height: 1.3; 
      border-left: 3px solid transparent;
      position: relative;
      transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
      flex-grow: 1;
    }
    html[dir="ltr"] .toc-container a.toc-link { padding-left: 0.1rem; }
    html[dir="rtl"] .toc-container a.toc-link { padding-right: 0.1rem; border-left: none; border-right: 3px solid transparent; }

    .toc-container a.toc-link:hover, .toc-container a.toc-link:focus {
      background-color: var(--bg-code); 
      color: var(--text-primary);
    }
    .toc-container a.active-toc-link, .toc-container a.active-toc-link:hover, .toc-container a.active-toc-link:focus {
      background-color: var(--bg-accent);
      color: var(--text-on-accent);
      font-weight: 600;
      border-left-color: var(--border-accent);
    }
    html[dir="rtl"] .toc-container a.active-toc-link, html[dir="rtl"] .toc-container a.active-toc-link:hover {
      border-left-color: transparent; border-right-color: var(--border-accent);
    }
    .toc-container .toc-child-list { 
        padding-inline-start: 0.6rem; 
        margin-top: 0.1rem; margin-bottom: 0.1rem; 
    }
    .toc-child-list.collapsed { display: none; }
    .toc-container .toc-item-level-0 > .toc-item-content-wrapper > a.toc-link { font-weight: 600; font-size: 0.85rem; } 
    .toc-special-links { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px dashed var(--border-secondary); }
    .toc-offer-page-link a.toc-link {
        font-weight: 600;
        font-size: 0.9em;
        /* Special styling for offer link if needed */
    }
    .toc-offer-page-link a.toc-link:hover, .toc-offer-page-link a.toc-link:focus {
        background-color: var(--bg-accent-hover);
        color: var(--text-on-accent);
    }
     .toc-offer-page-link a.active-toc-link {
        background-color: var(--bg-accent-hover); /* A slightly different shade for active offer */
        color: var(--text-on-accent);
        border-left-color: var(--border-accent-dark); /* Darker border for emphasis */
    }
    html[dir="rtl"] .toc-offer-page-link a.active-toc-link {
        border-left-color: transparent;
        border-right-color: var(--border-accent-dark);
    }
    
    .sidebar-footer-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem 0.5rem 0 0.25rem;
      margin-top: auto;
      border-top: 1px solid var(--border-primary);
    }
    html[dir="rtl"] .sidebar-footer-actions {
      padding-left: 0.5rem;
      padding-right: 0.25rem;
    }
    .social-links-list {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      list-style: none;
      padding: 0;
      margin: 0;
      flex-grow: 1;
    }
    .social-link a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      color: var(--text-secondary);
      background-color: transparent;
      border: 1px solid var(--border-secondary);
      border-radius: var(--rounded-md);
      transition: all 0.2s ease;
    }
    .social-link a:hover, .social-link a:focus {
      color: var(--text-on-accent);
      background-color: var(--bg-accent);
      border-color: var(--bg-accent);
      transform: translateY(-1px);
    }
    .social-link svg {
        width: 14px;
        height: 14px;
        fill: currentColor;
    }

    .theme-toggle-button {
        display: flex; align-items: center; justify-content: center;
        padding: 0.6rem; 
        border: 1px solid var(--border-primary); border-radius: var(--rounded-lg);
        background-color: var(--bg-body); color: var(--text-secondary);
        cursor: pointer; transition: var(--transition-colors);
        flex-shrink: 0;
    }
    .theme-toggle-button:hover, .theme-toggle-button:focus {
        background-color: var(--bg-code); color: var(--text-primary); border-color: var(--border-secondary);
    }
    .theme-toggle-button svg { width: 1.125rem; height: 1.125rem; } 
    .theme-toggle-button .sun-icon { display: none; }
    html.theme-dark .theme-toggle-button .sun-icon { display: block; }
    html.theme-dark .theme-toggle-button .moon-icon { display: none; }
    
    #sidebar-toggle-button {
        position: fixed;
        top: 0.75rem;
        left: 0.75rem;
        z-index: 150; 
        background-color: var(--bg-sidebar-toggle);
        color: var(--text-sidebar-toggle);
        border: 1px solid var(--border-sidebar-toggle);
        border-radius: var(--rounded-full);
        padding: 0.5rem;
        cursor: pointer;
        box-shadow: var(--shadow-md);
        transition: var(--transition-colors), transform 0.2s ease;
    }
    #sidebar-toggle-button:hover, #sidebar-toggle-button:focus {
        background-color: var(--bg-sidebar-toggle-hover);
        transform: scale(1.05);
    }
    #sidebar-toggle-button svg {
        width: 1.25rem; height: 1.25rem;
        transition: transform 0.3s ease-in-out;
    }
    html[dir="rtl"] #sidebar-toggle-button {
        left: auto;
        right: 0.75rem;
    }
    #sidebar-toggle-button .icon-menu, #sidebar-toggle-button .icon-close { display: none; }
    html.sidebar-is-collapsed #sidebar-toggle-button .icon-menu { display: block; }
    html:not(.sidebar-is-collapsed) #sidebar-toggle-button .icon-close { display: block; }

    
    #e-learning-content-area {
      flex-grow: 1; 
      padding: 2rem 2.5rem;
      margin-left: var(--sidebar-width); 
      overflow-y: auto; background-color: var(--bg-content);
      transition: var(--transition-colors), var(--transition-margin), padding 0.3s ease-in-out;
      display: flex; 
      flex-direction: column; 
    }
    html[dir="rtl"] #e-learning-content-area { margin-left: 0; margin-right: var(--sidebar-width); }
    html.sidebar-is-collapsed #e-learning-content-area {
      margin-left: 0 !important; 
    }
    html[dir="rtl"].sidebar-is-collapsed #e-learning-content-area {
      margin-right: 0 !important;
    }
    #e-learning-content-area.offer-page-active-padding-reset {
        padding: 0 !important;
    }

    .page-content-pusher { /* New class to wrap main content and push footer down */
      flex-grow: 1;
      display: flex;
      flex-direction: column;
    }
    .content-wrapper { 
      max-width: var(--content-max-width); 
      margin: 0 auto; 
      width: 100%; /* Ensure content-wrapper takes available width */
    }
    
    .top-branding-bar {
      padding: 0.5rem 0;
      border-bottom: 1px solid var(--border-primary);
      margin-bottom: 1.5rem;
      transition: var(--transition-colors);
    }
    .branding-header-elements {
      display: flex;
      align-items: center;
      justify-content: space-between; 
      width: 100%; 
      gap: 1rem; 
      min-height: 30px; 
    }
    .guide-logo-header {
      max-height: 30px; 
      object-fit: contain;
      flex-shrink: 0;
    }
    .header-navigation {
      flex-grow: 1; 
      display: flex;
      justify-content: flex-end; 
    }
    .header-nav-links-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 0.25rem; 
    }
    .header-nav-item {
      position: relative; 
    }
    .header-nav-item > a, .header-nav-item > span {
      display: block;
      padding: 0.4rem 0.8rem;
      font-size: 0.875em;
      font-weight: 500;
      color: var(--header-nav-link-text);
      text-decoration: none;
      border-radius: var(--rounded-md);
      transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
      white-space: nowrap;
      background-color: var(--header-nav-link-bg-default);
      border: 1px solid var(--header-nav-link-border-default);
    }
    .header-nav-item > a:hover, .header-nav-item > a:focus,
    .header-nav-item > span:hover { 
      background-color: var(--header-nav-link-bg-hover);
      color: var(--header-nav-link-text-hover);
      border-color: var(--header-nav-link-bg-hover); 
    }
    .header-nav-item.has-dropdown > span::after, 
    .header-nav-item.has-dropdown > a::after { 
      content: ' ▼';
      font-size: 0.7em;
      margin-inline-start: 0.4em; 
      display: inline-block;
      vertical-align: middle;
    }

    /* Main dropdown panel */
    .dropdown-menu {
      list-style: none;
      padding: 0.5rem 0;
      margin: 0;
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 180px;
      background-color: var(--header-nav-dropdown-bg);
      border: 1px solid var(--header-nav-dropdown-border);
      border-radius: var(--rounded-md);
      box-shadow: var(--shadow-lg);
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
      display: flex; /* Ensure items are laid out by flex */
      flex-direction: column; /* Stack items vertically */
      align-items: stretch; /* Make items take full width */
    }
    html[dir="rtl"] .dropdown-menu {
        left: auto;
        right: 0;
    }
    .header-nav-item.has-dropdown:hover > .dropdown-menu,
    .header-nav-item.has-dropdown:focus-within > .dropdown-menu { 
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .dropdown-menu .header-nav-item {
      display: block; /* Can remain, or be removed if align-items: stretch is sufficient */
      width: 100%; /* Ensures it takes full width within the flex column */
    }
    .dropdown-menu .header-nav-item > a, .dropdown-menu .header-nav-item > span {
      padding: 0.5rem 1rem; 
      border-radius: 0; 
      border: none; 
      background-color: transparent; 
      display: block; /* Ensure anchors/spans take full width for clickability */
    }
     .dropdown-menu .header-nav-item:last-child > a, 
     .dropdown-menu .header-nav-item:last-child > span {
        border-bottom: none;
    }
    /* Arrow for items within a dropdown that have their own sub-dropdown */
    .dropdown-menu .header-nav-item.has-dropdown > span::after, 
    .dropdown-menu .header-nav-item.has-dropdown > a::after { 
      content: ' ▼'; /* Changed from ▶ to ▼ */
      margin-inline-start: 0.5em; 
      margin-inline-end: 0.1em;
      vertical-align: middle;
      /* No RTL specific change needed if '▼' is universally down */
    }

    /* Nested dropdowns (UL inside an LI that's already in a dropdown) */
    .dropdown-menu .header-nav-item.has-dropdown > .dropdown-menu {
      position: static; 
      box-shadow: none;
      border: none; 
      min-width: 100%; 
      background-color: transparent; 
      padding: 0; 
      margin: 0; 
      
      opacity: 1;
      visibility: visible; 
      transform: none; 
      
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.25s ease-in-out, padding-top 0.25s ease-in-out, padding-bottom 0.25s ease-in-out;
      /* Inherits display:flex, flex-direction:column, align-items:stretch from .dropdown-menu */
    }

    .dropdown-menu .header-nav-item.has-dropdown:hover > .dropdown-menu,
    .dropdown-menu .header-nav-item.has-dropdown:focus-within > .dropdown-menu {
      max-height: 500px; 
      padding-top: 0.25rem; 
      padding-bottom: 0.25rem;
    }

    /* Style for items within these nested dropdowns for indentation */
    .dropdown-menu .header-nav-item.has-dropdown > .dropdown-menu .header-nav-item > a,
    .dropdown-menu .header-nav-item.has-dropdown > .dropdown-menu .header-nav-item > span {
      padding-left: 1.75rem; 
      font-size: 0.9em; 
    }

    html[dir="rtl"] .dropdown-menu .header-nav-item.has-dropdown > .dropdown-menu .header-nav-item > a,
    html[dir="rtl"] .dropdown-menu .header-nav-item.has-dropdown > .dropdown-menu .header-nav-item > span {
      padding-left: 1rem; 
      padding-right: 1.75rem; 
    }
    
    .content-guide-header { 
      transition: var(--transition-colors); 
      margin-bottom: 1.5rem; 
    }
    .content-guide-header.hidden-initially {
      display: none;
    }
    
    .main-guide-context, .active-section-details {
      padding-top: 1.5rem; 
      transition: opacity 0.3s ease, var(--transition-colors), visibility 0.3s ease;
    }
    .main-guide-context.hidden, .active-section-details.hidden { 
        display: none; 
    }

    .content-guide-description { font-size: 1rem; color: var(--text-secondary); line-height: 1.7; transition: var(--transition-colors); margin-bottom: 1.5rem; }
    .guide-overview-content { font-size: 1rem; color: var(--text-primary); line-height: 1.7; margin-bottom: 1.5rem; }
    .guide-overview-content p { margin-bottom: 1em; }
    .guide-overview-content > *:last-child { margin-bottom: 0; }
    .main-video-content .youtube-embed-container { margin-top: 0; margin-bottom: 0; }

    .active-section-title-in-header { font-family:var(--font-primary); font-size: 1.75em; color: var(--text-primary); margin: 0 0 0.45rem 0; font-weight: 700; line-height: 1.3; }
    .active-section-description-in-header { font-size: 1rem; color: var(--text-secondary); line-height: 1.65; margin:0; white-space: pre-wrap; }

    .marketing-offer-page-section {
        background-color: var(--bg-content); 
    }
    .marketing-offer-page-section.hidden-section { display: none; }
    .marketing-offer-page-section.active-section {
        display: block;
        overflow: hidden; 
        width: 100%;
        height: 100vh; 
    }
    .marketing-offer-page-section iframe {
        width: 100%;
        height: 100%; 
        border: none;
    }

    /* Landing Page Specific Styles */
    .guide-landing-page-content {
      padding: 1rem 0; 
      animation: fadeIn 0.5s ease-out;
      border-bottom: 1px solid var(--border-primary);
      margin-bottom: 2rem;
    }
    .guide-landing-page-content.hidden-initially { display: none; }
    .guide-landing-page-content h1, .guide-landing-page-content h2, .guide-landing-page-content h3 {
        font-family: var(--font-primary); color: var(--text-primary); font-weight: 700; 
        margin-top: 1em; margin-bottom: 0.6em; line-height: 1.3;
    }
    .guide-landing-page-content h1 { font-size: 2em; } 
    .guide-landing-page-content h2 { font-size: 1.75em; }
    .guide-landing-page-content h3 { font-size: 1.5em; }
    .guide-landing-page-content p { margin-bottom: 1.25em; font-size: 1.05em; line-height: 1.7; }
    .guide-landing-page-content ul, .guide-landing-page-content ol { margin: 1.25em 0; padding-inline-start: 1.75em; }
    .guide-landing-page-content li { margin-bottom: 0.6em; }

    .start-learning-cta-container {
      margin-top: 2rem;
      text-align: center;
    }
    .start-learning-button {
      background-color: var(--bg-accent);
      color: var(--text-on-accent);
      border: none;
      padding: 0.8rem 2rem;
      font-size: 1.1rem;
      font-weight: 600;
      font-family: var(--font-primary);
      border-radius: var(--rounded-lg);
      cursor: pointer;
      transition: background-color 0.2s ease, transform 0.15s ease;
      box-shadow: var(--shadow-md);
    }
    .start-learning-button:hover, .start-learning-button:focus {
      background-color: var(--bg-accent-hover);
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg);
    }
    #guide-sections-container.hidden-initially {
      display:none;
    }

    .guide-breadcrumbs {
        margin-bottom: 1rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--border-primary);
        transition: opacity 0.3s ease-in-out;
    }
    .guide-breadcrumbs:empty {
        display: none;
    }
    .guide-breadcrumbs ol {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.25rem 0.5rem;
    }
    .guide-breadcrumbs li {
        display: flex;
        align-items: center;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--text-secondary);
    }
    .guide-breadcrumbs li::after {
        content: '/';
        margin: 0 0.5rem;
        color: var(--border-secondary);
        font-weight: 400;
    }
    .guide-breadcrumbs li:last-child::after {
        content: '';
    }
    .guide-breadcrumbs a {
        color: var(--text-secondary);
        text-decoration: none;
        border-radius: var(--rounded-sm);
        padding: 0.1rem 0.2rem;
        transition: var(--transition-colors);
    }
    .guide-breadcrumbs a:hover, .guide-breadcrumbs a:focus {
        color: var(--text-accent);
        background-color: var(--bg-code);
        text-decoration: underline;
    }
    .guide-breadcrumbs .breadcrumb-active {
        color: var(--text-primary);
        font-weight: 600;
    }

    
    .guide-section.hidden-section { display: none; }
    .guide-section.active-section { display: block; }
    .guide-section.active-section > [class*="section-title-h"] { 
        display: none; 
    }

    .guide-section { margin-bottom: 1.5rem; animation: fadeIn 0.5s ease-out; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

    .section-title-h2 { font-family:var(--font-primary); font-size: 1.875em; color: var(--text-primary); margin-top: 2em; margin-bottom: 1em; font-weight: 700; line-height: 1.3; transition: var(--transition-colors);}
    .section-title-h3 { font-family:var(--font-primary); font-size: 1.625em; color: var(--text-primary); margin-top: 1.8em; margin-bottom: 0.9em; font-weight: 700; line-height: 1.3; transition: var(--transition-colors);}
    .section-title-h4 { font-family:var(--font-primary); font-size: 1.375em; color: var(--text-primary); margin-top: 1.6em; margin-bottom: 0.8em; font-weight: 600; line-height: 1.4; transition: var(--transition-colors);}
    .section-title-h5 { font-family:var(--font-primary); font-size: 1.125em; color: var(--text-primary); margin-top: 1.5em; margin-bottom: 0.7em; font-weight: 600; line-height: 1.4; transition: var(--transition-colors);}
    .section-title-h6 { font-family:var(--font-primary); font-size: 1em; color: var(--text-primary); margin-top: 1.5em; margin-bottom: 0.7em; font-weight: 600; line-height: 1.5; transition: var(--transition-colors);}

    .section-content-wrapper { color: var(--text-primary); font-size: 1rem; transition: var(--transition-colors); }
    .section-content-wrapper h1, .section-content-wrapper h2, .section-content-wrapper h3, .section-content-wrapper h4, .section-content-wrapper h5, .section-content-wrapper h6 {
        font-family: var(--font-primary); color: var(--text-primary); font-weight: 600; margin-top: 1.8em; margin-bottom: 0.9em; line-height: 1.4; transition: var(--transition-colors);
    }
    .section-content-wrapper h1 { font-size: 1.75em; } .section-content-wrapper h2 { font-size: 1.5em; }
    .section-content-wrapper h3 { font-size: 1.25em; } .section-content-wrapper h4 { font-size: 1.125em; }
    
    .section-content-wrapper p { margin-top: 0; margin-bottom: 1.25em; }
    .section-content-wrapper p.empty-content-placeholder { color: var(--text-secondary); font-style: italic; text-align: center; padding: 2.5rem 0; font-size: 1.1em; transition: var(--transition-colors);}
    .section-content-wrapper ul, .section-content-wrapper ol { padding-inline-start: 1.75em; margin: 1.25em 0; }
    .section-content-wrapper ul { list-style-type: disc; } .section-content-wrapper ol { list-style-type: decimal; }
    .section-content-wrapper li { margin-bottom: 0.625em; }
    .section-content-wrapper li > p, .section-content-wrapper li > ul, .section-content-wrapper li > ol { margin-top: 0.5em; margin-bottom: 0.5em; }
    
    .section-content-wrapper blockquote { 
      border-inline-start: 4px solid var(--border-accent); background-color: var(--bg-quote);
      padding: 1rem 1.5rem; margin: 1.75em 0; color: var(--text-secondary); 
      border-radius: 0 var(--rounded-md) var(--rounded-md) 0;
      transition: var(--transition-colors);
    }
    html[dir="rtl"] .section-content-wrapper blockquote { border-radius: var(--rounded-md) 0 0 var(--rounded-md); }
    .section-content-wrapper blockquote p:last-child { margin-bottom: 0; }
    
    .section-content-wrapper pre { 
      position: relative; 
      background-color: var(--bg-code); border: 1px solid var(--border-code); 
      padding: 1.25em 1.5em; border-radius: var(--rounded-lg); overflow-x: auto; 
      font-family: var(--font-code); 
      font-size: 0.9em; line-height: 1.7; margin: 1.75em 0; box-shadow: var(--shadow-sm);
      color: var(--text-code);
      transition: var(--transition-colors);
    }
    .copy-code-button {
      position: absolute; top: 0.5rem; right: 0.5rem;
      background-color: var(--bg-copy-btn); color: var(--text-copy-btn);
      border: 1px solid var(--border-secondary); border-radius: var(--rounded-md);
      padding: 0.3rem 0.6rem; font-size: 0.75rem; font-family: var(--font-secondary);
      cursor: pointer; opacity: 0.7; transition: opacity 0.2s ease, var(--transition-colors);
      z-index: 10;
    }
    html[dir="rtl"] .copy-code-button { right: auto; left: 0.5rem; }
    .section-content-wrapper pre:hover .copy-code-button { opacity: 1; }
    .copy-code-button:hover { background-color: var(--bg-copy-btn-hover); }
    
    .section-content-wrapper pre code { font-family: inherit; background-color: transparent !important; padding: 0 !important; border-radius: 0 !important; color: inherit !important; font-size: 1em !important; border: none !important; }
    .section-content-wrapper code:not(pre > code) {
      font-family: var(--font-code); 
      background-color: var(--bg-code); padding: 0.25em 0.5em; border-radius: var(--rounded-md); 
      font-size: 0.875em; color: var(--text-accent); border: 1px solid var(--border-code);
      transition: var(--transition-colors);
    }
    
    .section-content-wrapper table { 
      width: 100%; border-collapse: collapse; margin: 1.75em 0; border: 1px solid var(--border-secondary); 
      font-size: 0.95em; box-shadow: var(--shadow-sm); border-radius: var(--rounded-lg); overflow: hidden; 
      transition: var(--transition-colors);
    }
    .section-content-wrapper th, .section-content-wrapper td { 
      border: 1px solid var(--border-secondary); padding: 0.75em 1em; text-align: start; vertical-align: top; 
      transition: var(--transition-colors);
    }
    .section-content-wrapper th { background-color: var(--bg-table-header); font-weight: 600; color: var(--text-primary); }
    .section-content-wrapper td { color: var(--text-primary); background-color: var(--bg-content); }
    .section-content-wrapper caption { caption-side: bottom; margin-top: 0.75em; font-style: italic; color: var(--text-secondary); text-align: center; font-size: 0.9em; transition: var(--transition-colors); }
    
    .section-content-wrapper a { color: var(--text-accent); text-decoration: none; font-weight: 500; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; }
    .section-content-wrapper a:hover, .section-content-wrapper a:focus { color: var(--bg-accent-hover); text-decoration: none; border-bottom-color: var(--bg-accent-hover); }
    .section-content-wrapper img { max-width: 100%; height: auto; border-radius: var(--rounded-lg); margin: 1.75em 0; display: block; box-shadow: var(--shadow-md); background-color: var(--bg-code); }
    
    .youtube-embed-container { 
      position: relative; overflow: hidden; width: 100%; max-width: 720px; margin: 2em auto; 
      aspect-ratio: 16 / 9;
      background-color: var(--bg-code); border-radius: var(--rounded-lg); 
      box-shadow: var(--shadow-md); 
      transition: var(--transition-colors);
    }
    .youtube-embed-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

    .alert {
      transition: var(--transition-colors);
    }
    .alert .alert-icon {
      flex-shrink: 0; 
    }
    .alert > div { 
      flex-grow: 1;
    }

    .alert.alert-info, .alert.alert-tip { 
      background-color: var(--final-bg-alert-info-light);
      border-left-color: var(--final-border-alert-info-light);
      color: var(--final-text-alert-info-light);
    }
    .alert.alert-important {
      background-color: var(--final-bg-alert-important-light);
      border-left-color: var(--final-border-alert-important-light);
      color: var(--final-text-alert-important-light);
    }
    .alert.alert-warning {
      background-color: var(--final-bg-alert-warning-light);
      border-left-color: var(--final-border-alert-warning-light);
      color: var(--final-text-alert-warning-light);
    }

    html.theme-dark .alert.alert-info, html.theme-dark .alert.alert-tip { 
      background-color: var(--final-bg-alert-info-dark) !important;
      border-left-color: var(--final-border-alert-info-dark) !important;
      color: var(--final-text-alert-info-dark) !important;
    }
    html.theme-dark .alert.alert-important {
      background-color: var(--final-bg-alert-important-dark) !important;
      border-left-color: var(--final-border-alert-important-dark) !important;
      color: var(--final-text-alert-important-dark) !important;
    }
    html.theme-dark .alert.alert-warning {
      background-color: var(--final-bg-alert-warning-dark) !important;
      border-left-color: var(--final-border-alert-warning-dark) !important;
      color: var(--final-text-alert-warning-dark) !important;
    }

    
    .section-attachments-container {
      margin-top: 2em;
      padding-top: 1.5em;
      border-top: 1px solid var(--border-secondary);
    }
    .attachments-title { 
      font-family: var(--font-primary);
      font-size: 1.25em; 
      color: var(--text-primary);
      margin-top: 0;
      margin-bottom: 0.8em;
      font-weight: 600;
      line-height: 1.4;
    }
    .attachments-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    .attachment-item {}
    .attachment-link {
      display: flex;
      align-items: center;
      padding: 0.6rem 0.8rem;
      background-color: var(--attachment-bg);
      border: 1px solid var(--attachment-border);
      border-radius: var(--rounded-md);
      color: var(--attachment-text);
      text-decoration: none;
      transition: var(--transition-colors), background-color 0.2s ease, transform 0.1s ease;
      font-size: 0.9rem;
    }
    .attachment-link:hover, .attachment-link:focus {
      background-color: var(--attachment-hover-bg);
      border-color: var(--text-accent);
      color: var(--text-accent);
      transform: translateY(-1px);
    }
    .attachment-icon {
      width: 1.1em;
      height: 1.1em;
      margin-inline-end: 0.6em;
      flex-shrink: 0;
    }
    .attachment-name {
      font-weight: 500;
      flex-grow: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-inline-end: 0.5em;
    }
    .attachment-size {
      font-size: 0.8em;
      color: var(--text-secondary);
      white-space: nowrap;
    }
    .attachment-link.preview-disabled-link {
        cursor: not-allowed;
        opacity: 0.6;
    }
    .attachment-link.preview-disabled-link:hover, .attachment-link.preview-disabled-link:focus {
        background-color: var(--attachment-bg);
        border-color: var(--attachment-border);
        color: var(--attachment-text);
        transform: none;
    }

    
    /* End of Section CTA Wrapper Styles */
    .end-of-section-cta-wrapper {
      margin-top: 2.5em;
      padding: 0; /* Wrapper itself has no padding, AI generated block will define its own */
      border-top: 1px solid var(--border-primary); /* Optional: separator line before CTA block */
      padding-top: 1.5em; /* Space above the CTA block */
    }

    /* Styles for AI-Generated CTA Block */
    .ai-generated-cta {
      padding: 1.5em;
      background-color: var(--cta-bg);
      border: 1px solid var(--cta-border);
      border-radius: var(--rounded-lg);
      text-align: center; 
      transition: var(--transition-colors);
      box-shadow: var(--shadow-md);
    }

    .cta-image-column {
      /* AI controls flex properties */
    }
    .cta-text-column {
      /* AI controls flex properties */
    }


    .cta-generated-image {
      max-width: 100%;
      max-height: 200px; 
      object-fit: contain; 
      border-radius: var(--rounded-md);
      margin-bottom: 1.25em; 
      box-shadow: var(--shadow-sm);
    }

    .cta-generated-headline {
      font-family: var(--font-primary);
      font-size: 1.5em; 
      font-weight: 700; 
      color: var(--cta-text);
      margin-top: 0;
      margin-bottom: 0.6em; 
      line-height: 1.3;
    }

    .cta-generated-text {
      font-size: 1em;
      color: var(--cta-text);
      line-height: 1.65;
      margin-bottom: 1.25em; 
      max-width: 600px; 
      margin-left: auto;
      margin-right: auto;
    }
    .cta-generated-text p { 
        margin-bottom: 0.75em;
    }
    .cta-generated-text p:last-child {
        margin-bottom: 0;
    }

    .cta-generated-button {
      display: inline-block;
      padding: 0.75em 1.75em; 
      background-color: var(--bg-accent);
      color: var(--text-on-accent);
      text-decoration: none;
      font-weight: 600; 
      font-size: 1em;
      border-radius: var(--rounded-md);
      transition: background-color 0.2s ease, transform 0.1s ease, var(--transition-colors);
      border: none; 
      cursor: pointer;
      box-shadow: var(--shadow-sm);
    }
    .cta-generated-button:hover,
    .cta-generated-button:focus {
      background-color: var(--bg-accent-hover);
      transform: translateY(-2px); 
      box-shadow: var(--shadow-md);
    }
    
    .cta-features-list {
      list-style: none !important;
      padding-left: 0 !important;
      margin-top: 0.75em !important;
      margin-bottom: 1em !important;
    }
    .cta-features-list li {
      display: flex !important;
      align-items: flex-start !important;
      margin-bottom: 0.4em !important;
      padding-left: 0 !important;
      font-size: 0.9em !important; 
      color: var(--cta-text) !important; 
      line-height: 1.5 !important;
    }
    .cta-features-list .cta-feature-icon {
      margin-right: 0.6em !important;
      color: var(--bg-accent) !important; 
      font-size: 1.1em !important; 
      line-height: 1.4 !important; 
      flex-shrink: 0;
    }
    html.theme-dark .cta-features-list .cta-feature-icon {
      color: var(--bg-accent-dark) !important;
    }

    .ai-generated-cta.layout-horizontal {
        text-align: left; 
        align-items: flex-start; 
    }
    .ai-generated-cta.layout-horizontal .cta-generated-image {
        margin-bottom: 0; 
    }
    .ai-generated-cta.layout-horizontal .cta-content-container { 
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .ai-generated-cta.layout-horizontal .cta-generated-text {
        max-width: none; 
        margin-left: 0;
        margin-right: 0;
    }
    .ai-generated-cta.layout-horizontal .cta-generated-button {
        align-self: flex-start; 
    }
    .ai-generated-cta.layout-horizontal .cta-features-list {
        margin-left: 0;
        margin-right: 0;
        max-width: none;
        text-align: left; 
    }

    /* New Styles for Global Guide Footer Offer */
    .guide-footer-offer-wrapper {
      padding: 1.5em 1em; 
      margin-top: 0; /* Removed margin-top to reduce space */
      background-color: var(--bg-quote); 
      border-top: 2px solid var(--border-accent);
      text-align: center;
      transition: var(--transition-colors);
      width: 100%; 
    }
    /* Styles for the .ai-generated-cta when it's inside the footer wrapper */
    .guide-footer-offer-wrapper .ai-generated-cta {
      background-color: transparent; 
      border: none; 
      box-shadow: none; 
      padding: 0; 
      display: flex; 
      flex-direction: column; 
      align-items: center;
      gap: 0.75em; 
      color: var(--text-primary); 
    }
    .guide-footer-offer-wrapper .cta-generated-headline {
      font-size: 1.2em; 
      color: var(--text-primary); 
      margin-bottom: 0.3em;
    }
    .guide-footer-offer-wrapper .cta-generated-text {
      font-size: 0.85em; 
      color: var(--text-secondary); 
      margin-bottom: 0.6em;
      max-width: 550px; 
    }
    .guide-footer-offer-wrapper .cta-generated-button {
      font-size: 0.9em; 
      padding: 0.5em 1.25em; 
    }
    .guide-footer-offer-wrapper .cta-generated-image {
      max-height: 70px; 
      margin-bottom: 0.5em; 
    }

    /* Responsive adjustments for footer offer if it uses two columns via inline flex styles from AI */
    @media (min-width: 600px) { 
      .guide-footer-offer-wrapper .ai-generated-cta[style*="display: flex"] {
        flex-direction: row; 
        justify-content: center; 
        align-items: center;
        text-align: left; 
        gap: 1.5em; 
      }
      .guide-footer-offer-wrapper .ai-generated-cta[style*="display: flex"] .cta-image-column {
         margin-bottom: 0; 
         margin-right: 1em; 
      }
      .guide-footer-offer-wrapper .ai-generated-cta[style*="display: flex"] .cta-text-column {
         text-align: left;
         margin-bottom: 0; 
       }
       .guide-footer-offer-wrapper .ai-generated-cta[style*="display: flex"] .cta-text-column .cta-generated-headline,
       .guide-footer-offer-wrapper .ai-generated-cta[style*="display: flex"] .cta-text-column .cta-generated-text {
           margin-bottom: 0.5em; 
       }
      .guide-footer-offer-wrapper .ai-generated-cta[style*="display: flex"] .cta-button-column {
         margin-left: 1em; 
         align-self: center; 
      }
    }

    /* --- New Popup/Modal Offer Styles --- */
    .popup-overlay {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2000;
        animation: fadeInOverlay 0.3s ease;
    }
    .popup-overlay.fade-out {
        animation: fadeOutOverlay 0.3s ease forwards;
    }
    .popup-modal {
        background-color: var(--bg-content);
        color: var(--text-primary);
        border-radius: var(--rounded-lg);
        box-shadow: var(--shadow-lg);
        width: 90%;
        max-width: 550px;
        position: relative;
        padding: 2rem;
        animation: scaleInModal 0.3s ease-out;
    }
    .popup-overlay.fade-out .popup-modal {
        animation: scaleOutModal 0.3s ease-in forwards;
    }
    .popup-close-button {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        background: transparent;
        border: none;
        font-size: 1.75rem;
        line-height: 1;
        color: var(--text-secondary);
        cursor: pointer;
        padding: 0.25rem;
        transition: color 0.2s ease, transform 0.2s ease;
    }
    .popup-close-button:hover {
        color: var(--text-primary);
        transform: rotate(90deg);
    }
    .popup-modal .ai-generated-cta {
        padding: 0;
        border: none;
        background-color: transparent;
        box-shadow: none;
    }
    @keyframes fadeInOverlay { from { opacity: 0; } to { opacity: 1; } }
    @keyframes fadeOutOverlay { from { opacity: 1; } to { opacity: 0; } }
    @keyframes scaleInModal { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
    @keyframes scaleOutModal { from { transform: scale(1); opacity: 1; } to { transform: scale(0.9); opacity: 0; } }

    /* --- New Sticky Bar Offer Styles --- */
    .sticky-bar-container {
        position: fixed;
        left: 0;
        right: 0;
        z-index: 1001; /* Above most content, but maybe below modals */
        padding: 0.75rem 1.5rem;
        background-color: var(--cta-bg);
        color: var(--cta-text);
        border-top: 1px solid var(--cta-border);
        border-bottom: 1px solid var(--cta-border);
        box-shadow: var(--shadow-md);
        transition: transform 0.3s ease-in-out, var(--transition-colors);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9em;
    }
    .sticky-bar-container.position-header {
        top: 0;
        border-top: none;
        transform: translateY(-100%);
    }
    .sticky-bar-container.position-footer {
        bottom: 0;
        border-bottom: none;
        transform: translateY(100%);
    }
    .sticky-bar-container.active {
        transform: translateY(0);
    }
    .sticky-bar-container p {
        margin: 0;
    }
    .sticky-bar-container a {
        color: var(--text-accent);
        text-decoration: underline;
        font-weight: 600;
        margin: 0 0.5em;
    }
    html.theme-dark .sticky-bar-container a {
        color: var(--text-accent-dark);
    }
    .sticky-bar-container a:hover {
        text-decoration: none;
    }
    
    /* --- New Slide-in Box Offer Styles --- */
    .slide-in-box-container {
        position: fixed;
        z-index: 1002; /* Above sticky bar, below popup overlay */
        width: 90%;
        max-width: 380px;
        background-color: var(--bg-content);
        color: var(--text-primary);
        border: 1px solid var(--border-primary);
        border-radius: var(--rounded-lg);
        box-shadow: var(--shadow-lg);
        transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
        opacity: 0;
        padding: 1.5rem;
        font-size: 0.9em;
    }
    .slide-in-box-container.position-bottom-right {
        bottom: 20px;
        right: 20px;
        transform: translateX(calc(100% + 20px));
    }
    .slide-in-box-container.position-bottom-left {
        bottom: 20px;
        left: 20px;
        transform: translateX(calc(-100% - 20px));
    }
    .slide-in-box-container.active {
        opacity: 1;
        transform: translateX(0);
    }
    .slide-in-box-close-button {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        background: transparent;
        border: none;
        font-size: 1.5rem;
        line-height: 1;
        color: var(--text-secondary);
        cursor: pointer;
        padding: 0.25rem;
        transition: color 0.2s ease, transform 0.2s ease;
    }
    .slide-in-box-close-button:hover {
        color: var(--text-primary);
        transform: scale(1.1);
    }
    .slide-in-box-container .ai-generated-cta {
        padding: 0;
        border: none;
        background-color: transparent;
        box-shadow: none;
        text-align: left;
    }
    /* Smaller text for slide-in */
    .slide-in-box-container .cta-generated-headline {
        font-size: 1.2em;
    }
    .slide-in-box-container .cta-generated-text {
        font-size: 0.95em;
    }
    .slide-in-box-container .cta-generated-button {
        font-size: 0.9em;
        padding: 0.5em 1em;
    }
    @media (max-width: 480px) {
        .slide-in-box-container {
            max-width: 100%;
            width: auto;
            left: 10px;
            right: 10px;
            bottom: 10px;
        }
        .slide-in-box-container.position-bottom-right,
        .slide-in-box-container.position-bottom-left {
            transform: translateY(calc(100% + 10px));
        }
        .slide-in-box-container.active {
            transform: translateY(0);
        }
    }

    
    .section-navigation-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 0;
        margin-top: 1.5rem;
        border-top: 1px solid var(--border-primary);
    }
    .nav-button {
        background-color: var(--nav-button-bg);
        color: var(--nav-button-text);
        border: 1px solid var(--nav-button-border);
        padding: 0.6rem 1rem;
        border-radius: var(--rounded-md);
        font-family: var(--font-secondary);
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        transition: var(--transition-colors), opacity 0.2s ease, transform 0.1s ease;
        display: inline-flex;
        align-items: center;
        text-decoration: none;
    }
    .nav-button:hover:not(:disabled) {
        background-color: var(--nav-button-hover-bg);
        transform: translateY(-1px);
    }
    .nav-button:disabled {
        background-color: var(--nav-button-disabled-bg);
        color: var(--nav-button-disabled-text);
        border-color: var(--border-secondary);
        cursor: not-allowed;
        opacity: 0.7;
    }
    .nav-button .nav-button-title {
        display: inline-block;
        max-width: 150px; 
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        margin: 0 0.25em;
    }
    .mark-complete-btn.completed {
        background-color: var(--checkmark-color);
        color: var(--text-on-accent-light); 
        border-color: var(--checkmark-color);
    }
    html.theme-dark .mark-complete-btn.completed {
        color: var(--text-on-accent-dark); 
    }
    .mark-complete-btn.completed:hover {
        opacity: 0.9;
    }

    
    @media (min-width: 769px) { 
      #e-learning-sidebar { width: var(--sidebar-width-md); }
      #e-learning-content-area { margin-left: var(--sidebar-width-md); }
      html[dir="rtl"] #e-learning-content-area { margin-left: 0; margin-right: var(--sidebar-width-md); }
      
      html.sidebar-is-collapsed #e-learning-content-area { margin-left: 0 !important; }
      html[dir="rtl"].sidebar-is-collapsed #e-learning-content-area { margin-right: 0 !important; }
    }

    @media (max-width: 992px) { 
        #e-learning-content-area { padding: 1.75rem 2rem; }
        .content-guide-title { font-size: 2em; }
        .active-section-title-in-header { font-size: 1.6em; }
        .section-title-h2 { font-size: 1.7em; }
    }
    @media (max-width: 768px) { 
      .e-learning-layout {
        flex-direction: column;
      }

      #e-learning-sidebar { 
        width: 100%; 
        height: auto; 
        position: static; 
        border-right: none; 
        border-bottom: 1px solid var(--border-primary); 
        padding: 1rem; 
        max-height: 50vh; 
        box-shadow: var(--shadow-sm); 
        transform: translateX(0) !important; 
        visibility: visible !important; 
        transition: none; 
      }
      html[dir="rtl"] #e-learning-sidebar { border-left: none; border-bottom: 1px solid var(--border-primary); }
      
      html.sidebar-is-collapsed #e-learning-sidebar {
          display: none;
      }
       html:not(.sidebar-is-collapsed) #e-learning-sidebar {
          display: flex;
      }

      #e-learning-content-area { 
        margin-left: 0 !important; 
        padding: 1.25rem 1rem;
        flex-grow: 0;
        overflow-y: visible;
      } 
      html[dir="rtl"] #e-learning-content-area { margin-right: 0 !important; }

      .content-guide-title { font-size: 1.75em; }
      .active-section-title-in-header { font-size: 1.4em; }
      .section-title-h2 { font-size: 1.5em; }
      #sidebar-toggle-button { top: 0.5rem; left: 0.5rem; padding: 0.4rem; } 
      html[dir="rtl"] #sidebar-toggle-button { left: auto; right: 0.5rem; }
       .section-navigation-footer {
            flex-direction: column;
            gap: 0.75rem;
        }
        .nav-button {
            width: 100%;
            justify-content: center;
        }
        .nav-button .nav-button-title {
            max-width: none; 
        }
        .top-branding-bar {
           margin-bottom: 1rem; 
           flex-wrap: wrap; 
        }
        .branding-header-elements {
            flex-direction: column; 
            align-items: flex-start;
        }
        .header-navigation {
            width: 100%;
            justify-content: flex-start; 
            margin-top: 0.5rem;
        }
        .header-nav-links-list {
            flex-direction: column; 
            align-items: flex-start;
            width: 100%;
        }
        .header-nav-item {
            width: 100%;
        }
        .header-nav-item > a, .header-nav-item > span {
             width: 100%;
             border-radius: var(--rounded-sm);
        }
        .dropdown-menu {
            position: static; 
            width: 100%;
            box-shadow: none;
            border-left: 2px solid var(--border-primary);
            padding-left: 0.5rem;
            margin-top: 0.25rem;
            opacity: 1; visibility: visible; transform: none; 
        }
        .content-guide-title {
           font-size: 1.75em; 
           margin-bottom: 1rem;
        }
        .main-guide-context, .active-section-details {
           padding-top: 1rem;
        }
    }

    
    @media print {
      body { 
        background-color: #fff !important; 
        color: #000 !important; 
      }
      :root {
        --bg-body: var(--bg-body-light) !important;
        --bg-content: var(--bg-content-light) !important;
        --text-primary: var(--text-primary-light) !important;
        --text-secondary: var(--text-secondary-light) !important;
      }
      html.theme-dark { 
        --bg-body: var(--bg-body-light) !important;
        --bg-content: var(--bg-content-light) !important;
        --text-primary: var(--text-primary-light) !important;
        --text-secondary: var(--text-secondary-light) !important;
      }

      #e-learning-sidebar, .theme-toggle-button, .copy-code-button, #sidebar-toggle-button, .active-section-details, .section-navigation-footer, .guide-progress-container, .main-guide-context, .section-attachments-container, .guide-logo-header, .header-navigation, .top-branding-bar, .end-of-section-cta { display: none !important; }
      #e-learning-content-area { margin: 0 !important; padding: 1cm !important; width: 100% !important; box-shadow: none !important; border: none !important; overflow: visible !important; background-color: #fff !important; }
      .content-wrapper { max-width: none !important; margin: 0 !important; }
      .guide-section { display: block !important; page-break-inside: avoid; }
      .hidden-section { display: block !important; } 
      .youtube-embed-container { display: none !important; }
      
      .alert.alert-info, .alert.alert-tip { 
        background-color: var(--final-bg-alert-info-light) !important; 
        border-left-color: var(--final-border-alert-info-light) !important; 
        color: var(--final-text-alert-info-light) !important; 
      }
      .alert.alert-important { 
        background-color: var(--final-bg-alert-important-light) !important; 
        border-left-color: var(--final-border-alert-important-light) !important; 
        color: var(--final-text-alert-important-light) !important; 
      }
      .alert.alert-warning { 
        background-color: var(--final-bg-alert-warning-light) !important; 
        border-left-color: var(--final-border-alert-warning-light) !important; 
        color: var(--final-text-alert-warning-light) !important; 
      }
      a { text-decoration: underline; color: #000 !important; border: none !important; }
      pre, blockquote { border: 1px solid #ccc; page-break-inside: avoid; background-color: #f8f8f8 !important; color: #000 !important;}
      pre code { color: #000 !important; }
    }