:root {
  /* --- Base --- */
  --content-font: var(--content-font, 'Open Sans', sans-serif); /* Allow override */
  --font-family-base: 'Open Sans', sans-serif;
  --font-family-monospace: 'Fira Code', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;

  /* --- Primary Colors --- */
  --primary-color: #3066BE;
  --primary-color-rgb: 48, 102, 190;
  --primary-color-hover: #4a52fc; /* Was --secondary-color */
  --primary-color-light-bg: rgba(var(--primary-color-rgb), 0.1);

  /* --- Secondary/Accent Colors --- */
  --secondary-color: #4a90e2; /* Was --tertiary-color (e.g., global copy btn) */
  --secondary-color-hover: #357abd;
  --tertiary-color: #2c3e50; /* Was --dark-color (e.g., skilljar copy btn) */
  --tertiary-color-hover: #1a2530;

  /* --- Functional Colors --- */
  --success-text: #2E7D32;
  --success-bg-light: rgba(76, 175, 80, 0.1);
  --success-border-light: rgba(76, 175, 80, 0.3);
  --success-action-bg: #4CAF50; /* Was hardcoded green */
  --success-action-border: #4CAF50; /* Added */

  --warning-text: #856404;
  --warning-bg-light: #fff3cd;

  --error-text: #C62828;
  --error-bg-light: rgba(244, 67, 54, 0.1);
  --error-border-light: rgba(244, 67, 54, 0.3);
  --error-action-bg: #f44336; /* Was hardcoded red */
  --error-action-hover: #d32f2f;
  --error-action-bg-light: rgba(244, 67, 54, 0.1); /* Added */

  --info-action-bg: #2196F3; /* Was hardcoded blue */
  --info-action-hover: #0b7dda;

  /* --- Neutral Colors --- */
  --background-color-white: white;
  --background-color-lightest: #f8f9fa; /* Was --light-gray */
  --background-color-light: #f5f5f5;
  --background-color-medium-light: #ebebeb;
  --background-color-medium: #f0f0f0; /* Added (e.g., disabled button bg) */
  --background-color-dark: #f2f2f2; /* Added (e.g., option hover) */
  --background-color-code: #f5f5f5; /* Added */
  --background-color-overlay: rgba(0, 0, 0, 0.5); /* Added (modal) */
  --background-color-disabled: #ccc; /* Added */

  --border-color: #e0e0e0; /* Was --medium-gray */
  --border-color-light: #f0f0f0; /* Added */
  --border-color-medium: #ddd; /* Added */
  --border-color-dark: #ccc; /* Added */

  --text-color-base: #333;
  --text-color-light: #666; /* Was --dark-gray */
  --text-color-lighter: #999; /* Added */
  --text-color-white: white;
  --text-color-disabled: #666; /* Added */

  /* --- Button Specific Colors --- */
  --button-submit-bg: #05cb95; /* Was --submit-button-bg */
  --button-submit-hover: #04b883;
  --button-add-bg: var(--button-submit-bg); /* Alias */
  --button-add-hover: var(--button-submit-hover); /* Alias */
  --button-danger-bg: var(--error-action-bg); /* Alias */
  --button-danger-hover: var(--error-action-hover); /* Alias */

  /* --- AI Bulk Specific Colors --- */
  --ai-primary-color: #4f46e5;
  --ai-primary-hover: #4338ca;
  --ai-primary-disabled: #9ca3af;
  --ai-processing-text: #3949ab;
  --ai-processing-bg: #e8eaf6;
  --ai-success-bg: #d4edda;
  --ai-success-text: #155724;
  --ai-success-border: #c3e6cb;
  --ai-error-bg: #f8d7da;
  --ai-error-text: #721c24;
  --ai-error-border: #f5c6cb;
  --ai-scrollbar-thumb: var(--ai-primary-color);
  --ai-scrollbar-track: #e5e7eb;

  /* --- Spacing (rem, base 16px) --- */
  --space-xxs: 0.125rem;    /* 2px */
  --space-xs: 0.25rem;     /* 4px */
  --space-sm: 0.5rem;      /* 8px */
  --space-md: 0.75rem;     /* 12px */
  --space-lg-alt: 0.9375rem;/* 15px (Added for common use) */
  --space-lg: 1rem;        /* 16px */
  --space-xl: 1.25rem;     /* 20px */
  --space-xl-alt: 1.5625rem;/* 25px (Added for common use) */
  --space-xxl: 1.875rem;   /* 30px */
  --space-xxxl: 2.1875rem;  /* 35px (Added for select padding) */

  /* --- Paddings --- */
  --padding-input-y: var(--space-md);
  --padding-input-x: var(--space-lg-alt);
  --padding-button-y: var(--space-md);
  --padding-button-x: var(--space-xl);
  --padding-select-pr: var(--space-xxxl); /* 35px */

  /* --- Border Radius --- */
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-lg: 8px;
  --border-radius-xl: 12px;
  --border-radius-xxl: 20px; /* Added (e.g., status indicator) */
  --border-radius-round: 50%;

  /* --- Font Sizes (rem, base 16px) --- */
  --font-size-xs: 0.8125rem;   /* 13px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-md: 1.08rem;    /* ~17.3px (was 13pt in button) */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.16rem;    /* ~18.6px (was 14pt) */
  --font-size-xxl: 1.25rem;   /* 20px */
  --font-size-xxxl: 1.5rem;   /* 24px (was 18pt) */
  /* Specific point conversions */
  --font-size-11pt: 0.91rem; /* ~14.6px */
  --font-size-12pt: 1rem;    /* 16px */
  --font-size-13pt: var(--font-size-md); /* Alias for consistency */
  --font-size-14pt: var(--font-size-xl); /* Alias for consistency */
  --font-size-18pt: var(--font-size-xxxl); /* Alias for consistency */

  /* --- Borders --- */
  --border-width: 1px;
  --border-width-lg: 2px;
  --border-width-xl: 4px; /* Added */
  --border-base: var(--border-width) solid var(--border-color);
  --border-lg: var(--border-width-lg) solid var(--border-color);
  --border-light: var(--border-width) solid var(--border-color-light); /* Added */
  --border-medium: var(--border-width) solid var(--border-color-medium); /* Added */
  --border-dark: var(--border-width) solid var(--border-color-dark); /* Added */
  --border-left-success: var(--border-width-xl) solid var(--success-action-border); /* Added */
  --border-left-info: var(--border-width-xl) solid var(--info-action-bg); /* Added */

  /* --- Shadows --- */
  --box-shadow-sm: 0 0 12px rgba(0, 0, 0, 0.1);
  --box-shadow-md: 0 0 20px rgba(0, 0, 0, 0.15); /* hover */
  --box-shadow-lg: 0 0 20px rgba(0, 0, 0, 0.2); /* modal */
  --box-shadow-inset: 0 0 0 2px rgba(0, 0, 0, 0.1); /* Added (color picker active) */
  --box-shadow-quiz: 0 2px 4px rgba(0,0,0,0.05); /* Added */

  /* --- Transitions --- */
  --transition-fast: all 0.2s ease;
  --transition-medium: all 0.3s ease;

  /* --- Breakpoints & Container Widths --- */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1440px;
  --container-max-width-xxl: 1440px;
  --container-max-width-xl: 1200px;
  --container-max-width-lg: 992px;
  --container-max-width-md: 768px;
  --container-max-width-sm: 576px;
}

/* Universal Container Styles */
.lmslab-quiz-container,
.lmslab-matching-container,
.lmslab-sorting-container,
.lmslab-flip-container,
.lmslab-dropdown,
.lmslab-callout-container {
    position: relative !important;
    max-width: 900px !important;
    margin: 20px 0 !important;
    padding: 15px !important;
    font-family: var(--content-font, 'Open Sans', sans-serif) !important;
}

/* Universal Card Styles */
.lmslab-quiz-card,
.lmslab-matching-card,
.lmslab-sorting-card,
.lmslab-flip-card-side,
.lmslab-dropdown details,
.lmslab-callout {
    background: white !important;
    border-radius: 12px !important;
    padding: 30px !important;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.1) !important;
    transition: box-shadow 0.3s ease !important;
}

.lmslab-quiz-card:hover,
.lmslab-matching-card:hover,
.lmslab-sorting-card:hover,
.lmslab-flip-card-side:hover,
.lmslab-dropdown details:hover,
.lmslab-callout:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15) !important;
}

/* Universal Question/Title Styles */
.lmslab-quiz-question,
.lmslab-matching-question,
.lmslab-sorting-question {
    font-size: 18pt !important;
    color: #333 !important;
    margin-bottom: 25px !important;
    line-height: 1.4 !important;
}

/* Universal Button Styles */
.lmslab-check-answer{
    margin-top: 20px !important;
    width: 100% !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    background: white !important;
    color: #333 !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: 2px solid #e0e0e0 !important;
    display: none !important;
}

.lmslab-check-answer.visible{
    display: block !important;
}

.lmslab-check-answer:hover:not(.disabled){
    background: #fafafa !important;
}

.lmslab-check-answer.disabled {
    background: #f0f0f0 !important;
    border-color: #e0e0e0 !important;
    color: #999 !important;
    cursor: not-allowed !important;
    opacity: 0.5 !important;
    pointer-events: none !important;
}

.lmslab-check-answer.answered {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

/* Universal Feedback Styles */
.lmslab-quiz-feedback,
.lmslab-matching-feedback,
.lmslab-sorting-feedback {
    margin-top: 20px !important;
    padding: 20px !important;
    border-radius: 8px !important;
    font-size: 14pt !important;
    line-height: 1.5 !important;
    display: none !important;
}

.lmslab-quiz-feedback.correct,
.lmslab-matching-feedback.correct,
.lmslab-sorting-feedback.correct,
.lmslab-quiz-feedback.incorrect,
.lmslab-matching-feedback.incorrect,
.lmslab-sorting-feedback.incorrect {
    display: block !important;
}

.lmslab-quiz-feedback.correct,
.lmslab-matching-feedback.correct,
.lmslab-sorting-feedback.correct {
    background: rgba(76, 175, 80, 0.1) !important;
    color: #2E7D32 !important;
}

.lmslab-quiz-feedback.incorrect,
.lmslab-matching-feedback.incorrect,
.lmslab-sorting-feedback.incorrect {
    background: rgba(244, 67, 54, 0.1) !important;
    color: #C62828 !important;
}

/* Universal Text Styles */
.lmslab-quiz-container *,
.lmslab-matching-container *,
.lmslab-sorting-container *,
.lmslab-flip-container *,
.lmslab-dropdown *,
.lmslab-callout-container * {
    line-height: 1.6 !important;
    color: #333;
}

/* Universal Content Styles */
.lmslab-quiz-container p,
.lmslab-matching-container p,
.lmslab-sorting-container p,
.lmslab-flip-container p,
.lmslab-dropdown p,
.lmslab-callout-container p {
    margin: 0 0 10px 0 !important;
}

.lmslab-quiz-container p:last-child,
.lmslab-matching-container p:last-child,
.lmslab-sorting-container p:last-child,
.lmslab-flip-container p:last-child,
.lmslab-dropdown p:last-child,
.lmslab-callout-container p:last-child {
    margin-bottom: 0 !important;
}

/* Universal Image Styles */
.lmslab-quiz-container img,
.lmslab-matching-container img,
.lmslab-sorting-container img,
.lmslab-flip-container img,
.lmslab-dropdown img,
.lmslab-callout-container img {
    max-width: 100% !important;
    height: auto !important;
}

/* Universal Required Quiz Styles */
.lmslab-quiz-required {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 15px !important;
    padding: 10px !important;
    background: #fff3cd !important;
    border-radius: 4px !important;
    color: #856404 !important;
}

.lmslab-quiz-required svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
}

/* Universal Focus Style Override */
button:not(.focus-after-v2):focus::before {
    border: none !important;
    box-shadow: none !important;
}