:root {
  --eduloo-study-shell-offset: var(
    --eduloo-main-offset,
    calc(var(--navbar-offset, 60px) + 26px)
  );
  --eduloo-study-filters-bg: linear-gradient(
    136deg,
    color-mix(
        in srgb,
        var(--surface-container-lowest) 90%,
        var(--surface-container-low) 10%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-lowest) 82%,
        var(--surface-container) 18%
      )
      100%
  );
  --eduloo-study-filters-shadow: 0 20px 34px -28px
    color-mix(in srgb, var(--on-surface) 42%, transparent);
  --eduloo-study-filter-label: color-mix(
    in srgb,
    var(--primary) 76%,
    var(--on-surface) 24%
  );
  --eduloo-study-filter-input-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 90%,
    transparent
  );
  --eduloo-study-filter-input-bg-hover: color-mix(
    in srgb,
    var(--surface-container-lowest) 74%,
    var(--primary-container) 26%
  );
  --eduloo-study-filter-input-bg-focus: color-mix(
    in srgb,
    var(--surface-container-lowest) 66%,
    var(--primary-container) 34%
  );
  --eduloo-study-filter-input-border: color-mix(
    in srgb,
    var(--outline-variant) 44%,
    transparent
  );
  --eduloo-study-filter-input-border-strong: color-mix(
    in srgb,
    var(--primary-container) 60%,
    transparent
  );
  --eduloo-study-filter-focus: color-mix(
    in srgb,
    var(--secondary-container) 56%,
    transparent
  );
  --eduloo-study-tabs-bg: linear-gradient(
    138deg,
    color-mix(
        in srgb,
        var(--surface-container-lowest) 90%,
        var(--surface-container-low) 10%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-lowest) 82%,
        var(--surface-container) 18%
      )
      100%
  );
  --eduloo-study-tabs-shadow: 0 20px 34px -28px
    color-mix(in srgb, var(--on-surface) 40%, transparent);
  --eduloo-study-tab-text: color-mix(
    in srgb,
    var(--on-surface-variant) 82%,
    var(--primary) 18%
  );
  --eduloo-study-tab-text-hover: color-mix(
    in srgb,
    var(--on-surface) 86%,
    var(--primary) 14%
  );
  --eduloo-study-tab-hover-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 72%,
    var(--primary-container) 28%
  );
  --eduloo-study-tab-active-bg: linear-gradient(
    135deg,
    color-mix(in srgb, var(--info) 14%, transparent) 0%,
    color-mix(in srgb, var(--primary) 14%, transparent) 100%
  );
  --eduloo-study-tab-active-text: #1e293b;
  --eduloo-study-tab-active-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--info) 25%, transparent),
    0 8px 16px color-mix(in srgb, var(--on-surface) 8%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --eduloo-study-tab-icon: color-mix(
    in srgb,
    var(--primary) 74%,
    var(--on-primary-container) 26%
  );
  --eduloo-fc-shell-bg: linear-gradient(
    156deg,
    color-mix(in srgb, var(--surface-container-low) 84%, var(--surface) 16%) 0%,
    color-mix(in srgb, var(--surface-container) 82%, var(--surface-bright) 18%)
      100%
  );
  --eduloo-fc-shell-shadow: 0 30px 54px -38px
    color-mix(in srgb, var(--on-surface) 42%, transparent);
  --eduloo-fc-title: var(--on-surface);
  --eduloo-fc-text: var(--on-surface);
  --eduloo-fc-muted: var(--on-surface-variant);
  --eduloo-fc-hero-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 86%,
    var(--surface-container-low) 14%
  );
  --eduloo-fc-hero-shadow: 0 18px 30px -24px
    color-mix(in srgb, var(--on-surface) 34%, transparent);
  --eduloo-fc-surface-soft: color-mix(
    in srgb,
    var(--surface-container-lowest) 82%,
    var(--surface-container-low) 18%
  );
  --eduloo-fc-surface-border: color-mix(
    in srgb,
    var(--outline-variant) 42%,
    transparent
  );
  --eduloo-fc-input-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 92%,
    transparent
  );
  --eduloo-fc-input-focus-bg: color-mix(
    in srgb,
    var(--surface-bright) 82%,
    var(--surface-container-lowest) 18%
  );
  --eduloo-fc-focus: color-mix(
    in srgb,
    var(--secondary-container) 56%,
    transparent
  );
  --eduloo-fc-chip-bg: linear-gradient(
    135deg,
    color-mix(in srgb, var(--info) 12%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 10%, transparent) 48%,
    color-mix(in srgb, var(--primary) 12%, transparent) 100%
  );
  --eduloo-fc-chip-border: color-mix(in srgb, var(--info) 24%, transparent);
  --eduloo-fc-chip-text: color-mix(
    in srgb,
    var(--primary) 78%,
    var(--on-surface) 22%
  );
  --eduloo-fc-empty-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 78%,
    var(--primary-container) 22%
  );
  --eduloo-fc-empty-border: color-mix(
    in srgb,
    var(--primary-container) 48%,
    transparent
  );
  --eduloo-fc-card-bg: linear-gradient(
    145deg,
    color-mix(in srgb, var(--info) 10%, transparent) 0%,
    color-mix(in srgb, var(--primary) 10%, transparent) 100%
  );
  --eduloo-fc-card-border: color-mix(in srgb, var(--info) 24%, transparent);
  --eduloo-fc-card-shadow: 0 14px 24px -20px
    color-mix(in srgb, var(--on-surface) 20%, transparent);
  --eduloo-fc-editor-shell-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 88%,
    var(--surface-container-low) 12%
  );
  --eduloo-fc-editor-shell-border: color-mix(
    in srgb,
    var(--outline-variant) 42%,
    transparent
  );
  --eduloo-fc-editor-shell-shadow: 0 16px 26px -24px
    color-mix(in srgb, var(--on-surface) 40%, transparent);
  --eduloo-fc-editor-input-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 94%,
    transparent
  );
  --eduloo-fc-editor-input-border: color-mix(
    in srgb,
    var(--outline-variant) 44%,
    transparent
  );
  --eduloo-fc-editor-btn-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 82%,
    var(--surface-container-low) 18%
  );
  --eduloo-fc-editor-btn-bg-hover: color-mix(
    in srgb,
    var(--surface-container-lowest) 68%,
    var(--primary-container) 32%
  );
  --eduloo-fc-editor-btn-border: color-mix(
    in srgb,
    var(--outline-variant) 46%,
    transparent
  );
  --eduloo-fc-editor-btn-text: color-mix(
    in srgb,
    var(--on-surface-variant) 84%,
    var(--primary) 16%
  );
  --eduloo-fc-editor-save-bg: linear-gradient(
    136deg,
    color-mix(in srgb, var(--primary) 86%, var(--primary-container) 14%) 0%,
    color-mix(
        in srgb,
        var(--primary-container) 68%,
        var(--secondary-container) 32%
      )
      100%
  );
  --eduloo-fc-editor-save-bg-hover: linear-gradient(
    136deg,
    color-mix(in srgb, var(--primary) 90%, var(--primary-container) 10%) 0%,
    color-mix(
        in srgb,
        var(--primary-container) 72%,
        var(--secondary-container) 28%
      )
      100%
  );
  --eduloo-fc-editor-save-shadow: 0 16px 26px -22px
    color-mix(in srgb, var(--primary) 56%, transparent);
  --eduloo-fc-icon-rail-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 88%,
    var(--surface-container-low) 12%
  );
  --eduloo-fc-icon-rail-border: color-mix(
    in srgb,
    var(--outline-variant) 42%,
    transparent
  );
  --eduloo-fc-icon-btn-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 82%,
    var(--surface-container-low) 18%
  );
  --eduloo-fc-icon-btn-bg-hover: color-mix(
    in srgb,
    var(--surface-container-lowest) 66%,
    var(--primary-container) 34%
  );
  --eduloo-fc-icon-btn-border: color-mix(
    in srgb,
    var(--outline-variant) 44%,
    transparent
  );
  --eduloo-fc-icon-btn-border-strong: color-mix(
    in srgb,
    var(--primary-container) 58%,
    transparent
  );
  --eduloo-fc-icon-btn-text: color-mix(
    in srgb,
    var(--on-surface-variant) 84%,
    var(--primary) 16%
  );
  --eduloo-fc-icon-btn-primary-bg: linear-gradient(
    136deg,
    color-mix(in srgb, var(--primary) 84%, var(--primary-container) 16%) 0%,
    color-mix(
        in srgb,
        var(--primary-container) 64%,
        var(--secondary-container) 36%
      )
      100%
  );
  --eduloo-fc-icon-btn-primary-shadow: 0 16px 24px -20px
    color-mix(in srgb, var(--primary) 54%, transparent);
  --eduloo-fc-icon-btn-primary-icon: color-mix(
    in srgb,
    var(--on-primary) 58%,
    var(--secondary-container) 42%
  );
  --eduloo-fc-create-wrap-bg: linear-gradient(
    140deg,
    color-mix(
        in srgb,
        var(--surface-container-lowest) 88%,
        var(--surface-container-low) 12%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-lowest) 82%,
        var(--surface-container) 18%
      )
      100%
  );
  --eduloo-fc-create-wrap-border: color-mix(
    in srgb,
    var(--outline-variant) 44%,
    transparent
  );
  --eduloo-fc-create-wrap-shadow: 0 20px 30px -26px
    color-mix(in srgb, var(--on-surface) 42%, transparent);
  --eduloo-fc-create-primary-bg: linear-gradient(
    136deg,
    color-mix(in srgb, var(--primary) 86%, var(--primary-container) 14%) 0%,
    color-mix(
        in srgb,
        var(--primary-container) 68%,
        var(--secondary-container) 32%
      )
      100%
  );
  --eduloo-fc-create-primary-bg-hover: linear-gradient(
    136deg,
    color-mix(in srgb, var(--primary) 90%, var(--primary-container) 10%) 0%,
    color-mix(
        in srgb,
        var(--primary-container) 72%,
        var(--secondary-container) 28%
      )
      100%
  );
  --eduloo-fc-create-primary-shadow: 0 18px 28px -22px
    color-mix(in srgb, var(--primary) 58%, transparent);
  --eduloo-fc-create-secondary-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 82%,
    var(--secondary-container) 18%
  );
  --eduloo-fc-create-secondary-bg-hover: color-mix(
    in srgb,
    var(--surface-container-lowest) 66%,
    var(--secondary-container) 34%
  );
  --eduloo-fc-create-secondary-border: color-mix(
    in srgb,
    var(--secondary-container) 54%,
    transparent
  );
  --eduloo-fc-create-secondary-text: color-mix(
    in srgb,
    var(--on-surface) 84%,
    var(--secondary) 16%
  );
  --eduloo-fc-create-locked-bg: color-mix(
    in srgb,
    var(--surface-container-low) 74%,
    var(--outline-variant) 26%
  );
  --eduloo-fc-create-locked-text: color-mix(
    in srgb,
    var(--on-surface-variant) 86%,
    var(--on-surface) 14%
  );
}

body.theme-dark {
  --eduloo-study-filters-bg: linear-gradient(
    142deg,
    color-mix(
        in srgb,
        var(--surface-container-highest) 76%,
        color-mix(in srgb, var(--secondary) 24%, transparent) 24%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-highest) 82%,
        color-mix(in srgb, var(--primary) 18%, transparent) 18%
      )
      100%
  );
  --eduloo-study-filters-shadow: 0 24px 38px -28px
    color-mix(in srgb, black 78%, transparent);
  --eduloo-study-filter-label: color-mix(
    in srgb,
    var(--on-surface) 88%,
    var(--secondary-container) 12%
  );
  --eduloo-study-filter-input-bg: color-mix(
    in srgb,
    var(--surface-container-high) 74%,
    var(--surface-container-highest) 26%
  );
  --eduloo-study-filter-input-bg-hover: color-mix(
    in srgb,
    var(--surface-container-highest) 58%,
    var(--primary-container) 42%
  );
  --eduloo-study-filter-input-bg-focus: linear-gradient(
    135deg,
    color-mix(in srgb, var(--secondary) 24%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 12%, transparent) 50%,
    color-mix(in srgb, var(--primary) 20%, transparent) 100%
  );
  --eduloo-study-filter-input-border: color-mix(
    in srgb,
    var(--outline-variant) 62%,
    transparent
  );
  --eduloo-study-filter-input-border-strong: color-mix(
    in srgb,
    var(--primary-container) 68%,
    transparent
  );
  --eduloo-study-filter-focus: color-mix(
    in srgb,
    var(--secondary-container) 52%,
    transparent
  );
  --eduloo-study-tabs-bg: linear-gradient(
    142deg,
    color-mix(
        in srgb,
        var(--surface-container-highest) 76%,
        color-mix(in srgb, var(--secondary) 22%, transparent) 24%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-highest) 82%,
        color-mix(in srgb, var(--primary) 16%, transparent) 18%
      )
      100%
  );
  --eduloo-study-tabs-shadow: 0 24px 40px -30px
    color-mix(in srgb, black 80%, transparent);
  --eduloo-study-tab-text: color-mix(
    in srgb,
    var(--on-surface-variant) 80%,
    var(--on-primary) 20%
  );
  --eduloo-study-tab-text-hover: color-mix(
    in srgb,
    var(--on-surface) 92%,
    var(--on-primary) 8%
  );
  --eduloo-study-tab-hover-bg: linear-gradient(
    135deg,
    color-mix(in srgb, var(--secondary) 22%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 12%, transparent) 50%,
    color-mix(in srgb, var(--primary) 18%, transparent) 100%
  );
  --eduloo-study-tab-active-bg: linear-gradient(
    135deg,
    color-mix(in srgb, var(--secondary) 30%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 16%, transparent) 50%,
    color-mix(in srgb, var(--primary) 24%, transparent) 100%
  );
  --eduloo-study-tab-active-text: color-mix(
    in srgb,
    var(--on-surface) 92%,
    var(--on-primary) 8%
  );
  --eduloo-study-tab-active-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--secondary) 40%, transparent),
    0 12px 20px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 color-mix(in srgb, var(--on-surface) 14%, transparent);
  --eduloo-study-tab-icon: color-mix(
    in srgb,
    var(--on-surface) 82%,
    var(--secondary-container) 18%
  );
  --eduloo-fc-shell-bg: linear-gradient(
    158deg,
    color-mix(
        in srgb,
        var(--surface-container-high) 84%,
        var(--surface-container-highest) 16%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-highest) 80%,
        var(--surface-container-high) 20%
      )
      100%
  );
  --eduloo-fc-shell-shadow: 0 34px 60px -40px
    color-mix(in srgb, black 76%, transparent);
  --eduloo-fc-title: color-mix(
    in srgb,
    var(--on-surface) 94%,
    var(--on-primary) 6%
  );
  --eduloo-fc-text: color-mix(
    in srgb,
    var(--on-surface) 92%,
    var(--secondary-container) 8%
  );
  --eduloo-fc-muted: color-mix(
    in srgb,
    var(--on-surface-variant) 84%,
    var(--primary-container) 16%
  );
  --eduloo-fc-hero-bg: linear-gradient(
    145deg,
    color-mix(in srgb, var(--secondary) 20%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 8%, transparent) 48%,
    color-mix(in srgb, var(--primary) 16%, transparent) 100%
  );
  --eduloo-fc-hero-shadow: 0 20px 32px -24px rgba(0, 0, 0, 0.62);
  --eduloo-fc-surface-soft: color-mix(
    in srgb,
    var(--surface-container-high) 78%,
    var(--surface-container-highest) 22%
  );
  --eduloo-fc-surface-border: color-mix(
    in srgb,
    var(--primary-container) 36%,
    transparent
  );
  --eduloo-fc-input-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 86%,
    transparent
  );
  --eduloo-fc-input-focus-bg: color-mix(
    in srgb,
    var(--surface-container-high) 76%,
    var(--surface-container-highest) 24%
  );
  --eduloo-fc-focus: color-mix(
    in srgb,
    var(--secondary-container) 50%,
    transparent
  );
  --eduloo-fc-chip-bg: linear-gradient(
    135deg,
    color-mix(in srgb, var(--secondary) 24%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 12%, transparent) 48%,
    color-mix(in srgb, var(--primary) 20%, transparent) 100%
  );
  --eduloo-fc-chip-border: color-mix(
    in srgb,
    var(--secondary) 34%,
    transparent
  );
  --eduloo-fc-chip-text: color-mix(
    in srgb,
    var(--on-surface) 90%,
    var(--on-primary) 10%
  );
  --eduloo-fc-empty-bg: linear-gradient(
    145deg,
    color-mix(in srgb, var(--secondary) 20%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 10%, transparent) 52%,
    color-mix(in srgb, var(--primary) 18%, transparent) 100%
  );
  --eduloo-fc-empty-border: color-mix(in srgb, var(--info) 40%, transparent);
  --eduloo-fc-card-bg: linear-gradient(
    145deg,
    color-mix(in srgb, var(--secondary) 20%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 8%, transparent) 52%,
    color-mix(in srgb, var(--primary) 16%, transparent) 100%
  );
  --eduloo-fc-card-border: color-mix(
    in srgb,
    var(--secondary) 34%,
    transparent
  );
  --eduloo-fc-card-shadow: 0 18px 28px -22px rgba(0, 0, 0, 0.68);
  --eduloo-fc-editor-shell-bg: linear-gradient(
    142deg,
    color-mix(
        in srgb,
        var(--surface-container-highest) 76%,
        color-mix(in srgb, var(--secondary) 22%, transparent) 24%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-highest) 82%,
        color-mix(in srgb, var(--primary) 16%, transparent) 18%
      )
      100%
  );
  --eduloo-fc-editor-shell-border: color-mix(
    in srgb,
    var(--secondary) 34%,
    transparent
  );
  --eduloo-fc-editor-shell-shadow: 0 18px 30px -22px rgba(0, 0, 0, 0.62);
  --eduloo-fc-editor-input-bg: color-mix(
    in srgb,
    var(--surface-container-high) 76%,
    var(--surface-container-highest) 24%
  );
  --eduloo-fc-editor-input-border: color-mix(
    in srgb,
    var(--outline-variant) 60%,
    transparent
  );
  --eduloo-fc-editor-btn-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 62%,
    var(--primary-container) 38%
  );
  --eduloo-fc-editor-btn-bg-hover: color-mix(
    in srgb,
    var(--surface-container-highest) 50%,
    var(--primary-container) 50%
  );
  --eduloo-fc-editor-btn-border: color-mix(
    in srgb,
    var(--primary-container) 56%,
    transparent
  );
  --eduloo-fc-editor-btn-text: color-mix(
    in srgb,
    var(--on-surface) 90%,
    var(--on-primary) 10%
  );
  --eduloo-fc-editor-save-bg: linear-gradient(
    136deg,
    color-mix(in srgb, var(--secondary) 34%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 16%, transparent) 50%,
    color-mix(in srgb, var(--primary) 28%, transparent) 100%
  );
  --eduloo-fc-editor-save-bg-hover: linear-gradient(
    136deg,
    color-mix(in srgb, var(--secondary) 42%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 22%, transparent) 50%,
    color-mix(in srgb, var(--primary) 34%, transparent) 100%
  );
  --eduloo-fc-editor-save-shadow: 0 18px 28px -22px rgba(0, 0, 0, 0.56);
  --eduloo-fc-icon-rail-bg: linear-gradient(
    142deg,
    color-mix(
        in srgb,
        var(--surface-container-highest) 76%,
        color-mix(in srgb, var(--secondary) 20%, transparent) 24%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-highest) 82%,
        color-mix(in srgb, var(--primary) 14%, transparent) 18%
      )
      100%
  );
  --eduloo-fc-icon-rail-border: color-mix(
    in srgb,
    var(--secondary) 34%,
    transparent
  );
  --eduloo-fc-icon-btn-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 62%,
    var(--primary-container) 38%
  );
  --eduloo-fc-icon-btn-bg-hover: color-mix(
    in srgb,
    var(--surface-container-highest) 50%,
    var(--primary-container) 50%
  );
  --eduloo-fc-icon-btn-border: color-mix(
    in srgb,
    var(--primary-container) 56%,
    transparent
  );
  --eduloo-fc-icon-btn-border-strong: color-mix(
    in srgb,
    var(--primary-container) 72%,
    transparent
  );
  --eduloo-fc-icon-btn-text: color-mix(
    in srgb,
    var(--on-surface) 90%,
    var(--on-primary) 10%
  );
  --eduloo-fc-icon-btn-primary-bg: linear-gradient(
    136deg,
    color-mix(in srgb, var(--secondary) 34%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 16%, transparent) 50%,
    color-mix(in srgb, var(--primary) 28%, transparent) 100%
  );
  --eduloo-fc-icon-btn-primary-shadow: 0 18px 28px -22px rgba(0, 0, 0, 0.56);
  --eduloo-fc-icon-btn-primary-icon: color-mix(
    in srgb,
    color-mix(in srgb, var(--on-primary-container) 86%, var(--info) 14%) 72%,
    var(--on-secondary-container) 28%
  );
  --eduloo-fc-create-wrap-bg: linear-gradient(
    142deg,
    color-mix(
        in srgb,
        var(--surface-container-highest) 76%,
        color-mix(in srgb, var(--secondary) 22%, transparent) 24%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-highest) 82%,
        color-mix(in srgb, var(--primary) 16%, transparent) 18%
      )
      100%
  );
  --eduloo-fc-create-wrap-border: color-mix(
    in srgb,
    var(--secondary) 34%,
    transparent
  );
  --eduloo-fc-create-wrap-shadow: 0 20px 32px -24px rgba(0, 0, 0, 0.62);
  --eduloo-fc-create-primary-bg: linear-gradient(
    136deg,
    color-mix(in srgb, var(--secondary) 40%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 18%, transparent) 50%,
    color-mix(in srgb, var(--primary) 32%, transparent) 100%
  );
  --eduloo-fc-create-primary-bg-hover: linear-gradient(
    136deg,
    color-mix(in srgb, var(--secondary) 48%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 24%, transparent) 50%,
    color-mix(in srgb, var(--primary) 38%, transparent) 100%
  );
  --eduloo-fc-create-primary-shadow: 0 20px 30px -24px rgba(0, 0, 0, 0.56);
  --eduloo-fc-create-secondary-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 58%,
    var(--secondary-container) 42%
  );
  --eduloo-fc-create-secondary-bg-hover: color-mix(
    in srgb,
    var(--surface-container-highest) 46%,
    var(--secondary-container) 54%
  );
  --eduloo-fc-create-secondary-border: color-mix(
    in srgb,
    var(--secondary-container) 62%,
    transparent
  );
  --eduloo-fc-create-secondary-text: color-mix(
    in srgb,
    var(--on-surface) 90%,
    var(--on-primary) 10%
  );
  --eduloo-fc-create-locked-bg: color-mix(
    in srgb,
    var(--surface-container-high) 70%,
    var(--outline-variant) 30%
  );
  --eduloo-fc-create-locked-text: color-mix(
    in srgb,
    var(--on-surface-variant) 90%,
    var(--on-surface) 10%
  );
}

:root {
  --eduloo-study-shell-offset: var(
    --eduloo-main-offset,
    calc(var(--navbar-offset, 60px) + 26px)
  );
  --eduloo-study-filters-bg: linear-gradient(
    136deg,
    color-mix(
        in srgb,
        var(--surface-container-lowest) 90%,
        var(--surface-container-low) 10%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-lowest) 82%,
        var(--surface-container) 18%
      )
      100%
  );
  --eduloo-study-filters-shadow: 0 20px 34px -28px
    color-mix(in srgb, var(--on-surface) 42%, transparent);
  --eduloo-study-filter-label: color-mix(
    in srgb,
    var(--primary) 76%,
    var(--on-surface) 24%
  );
  --eduloo-study-filter-input-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 90%,
    transparent
  );
  --eduloo-study-filter-input-bg-hover: color-mix(
    in srgb,
    var(--surface-container-lowest) 74%,
    var(--primary-container) 26%
  );
  --eduloo-study-filter-input-bg-focus: color-mix(
    in srgb,
    var(--surface-container-lowest) 66%,
    var(--primary-container) 34%
  );
  --eduloo-study-filter-input-border: color-mix(
    in srgb,
    var(--outline-variant) 44%,
    transparent
  );
  --eduloo-study-filter-input-border-strong: color-mix(
    in srgb,
    var(--primary-container) 60%,
    transparent
  );
  --eduloo-study-tabs-bg: linear-gradient(
    138deg,
    color-mix(
        in srgb,
        var(--surface-container-lowest) 90%,
        var(--surface-container-low) 10%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-lowest) 82%,
        var(--surface-container) 18%
      )
      100%
  );
  --eduloo-study-tabs-shadow: 0 20px 34px -28px
    color-mix(in srgb, var(--on-surface) 40%, transparent);
  --eduloo-study-tab-text: color-mix(
    in srgb,
    var(--on-surface-variant) 82%,
    var(--primary) 18%
  );
  --eduloo-study-tab-text-hover: color-mix(
    in srgb,
    var(--on-surface) 86%,
    var(--primary) 14%
  );
  --eduloo-study-tab-hover-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 72%,
    var(--primary-container) 28%
  );
  --eduloo-study-tab-active-bg: linear-gradient(
    135deg,
    color-mix(in srgb, var(--info) 14%, transparent) 0%,
    color-mix(in srgb, var(--primary) 14%, transparent) 100%
  );
  --eduloo-study-tab-active-text: #1e293b;
  --eduloo-study-tab-active-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--info) 25%, transparent),
    0 8px 16px color-mix(in srgb, var(--on-surface) 8%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --eduloo-study-tab-icon: color-mix(
    in srgb,
    var(--primary) 74%,
    var(--on-primary-container) 26%
  );
  --eduloo-doc-shell-bg: linear-gradient(
    156deg,
    color-mix(in srgb, var(--surface-container-low) 84%, var(--surface) 16%) 0%,
    color-mix(in srgb, var(--surface-container) 82%, var(--surface-bright) 18%)
      100%
  );
  --eduloo-doc-shell-shadow: 0 30px 54px -38px
    color-mix(in srgb, var(--on-surface) 42%, transparent);
  --eduloo-doc-title: var(--on-surface);
  --eduloo-doc-text: var(--on-surface);
  --eduloo-doc-muted: var(--on-surface-variant);
  --eduloo-doc-hero-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 86%,
    var(--surface-container-low) 14%
  );
  --eduloo-doc-hero-shadow: 0 18px 30px -24px
    color-mix(in srgb, var(--on-surface) 34%, transparent);
  --eduloo-doc-hero-copy-bg: linear-gradient(
    140deg,
    color-mix(
        in srgb,
        var(--surface-container-lowest) 92%,
        var(--surface-bright) 8%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-lowest) 80%,
        var(--primary-container) 20%
      )
      100%
  );
  --eduloo-doc-hero-copy-border: color-mix(
    in srgb,
    var(--outline-variant) 46%,
    transparent
  );
  --eduloo-doc-hero-copy-shadow: 0 14px 24px -20px
    color-mix(in srgb, var(--on-surface) 36%, transparent);
  --eduloo-doc-hero-accent: linear-gradient(
    136deg,
    color-mix(in srgb, var(--info) 82%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 72%, transparent) 52%,
    color-mix(in srgb, var(--primary) 82%, transparent) 100%
  );
  --eduloo-doc-hero-title-grad: linear-gradient(
    132deg,
    #4c63d5 0%,
    #7d67c8 56%,
    #bd649e 100%
  );
  --eduloo-doc-surface-soft: color-mix(
    in srgb,
    var(--surface-container-lowest) 82%,
    var(--surface-container-low) 18%
  );
  --eduloo-doc-surface-border: color-mix(
    in srgb,
    var(--outline-variant) 42%,
    transparent
  );
  --eduloo-doc-input-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 92%,
    transparent
  );
  --eduloo-doc-input-focus-bg: color-mix(
    in srgb,
    var(--surface-bright) 82%,
    var(--surface-container-lowest) 18%
  );
  --eduloo-doc-chip-bg: linear-gradient(
    135deg,
    color-mix(in srgb, var(--info) 12%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 10%, transparent) 48%,
    color-mix(in srgb, var(--primary) 12%, transparent) 100%
  );
  --eduloo-doc-chip-border: color-mix(in srgb, var(--info) 24%, transparent);
  --eduloo-doc-chip-text: color-mix(
    in srgb,
    var(--primary) 78%,
    var(--on-surface) 22%
  );
  --eduloo-doc-upload-bg: linear-gradient(
    140deg,
    color-mix(
        in srgb,
        var(--surface-container-lowest) 90%,
        var(--surface-container-low) 10%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-lowest) 82%,
        var(--surface-container) 18%
      )
      100%
  );
  --eduloo-doc-upload-border: color-mix(
    in srgb,
    var(--outline-variant) 44%,
    transparent
  );
  --eduloo-doc-dropzone-icon-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 72%,
    var(--primary-container) 28%
  );
  --eduloo-doc-dropzone-icon-text: color-mix(
    in srgb,
    var(--primary) 82%,
    var(--on-primary-container) 18%
  );
  --eduloo-doc-row-bg: linear-gradient(
    140deg,
    color-mix(
        in srgb,
        var(--surface-container-lowest) 88%,
        var(--surface-container-low) 12%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-lowest) 82%,
        var(--surface-container) 18%
      )
      100%
  );
  --eduloo-doc-row-border: color-mix(
    in srgb,
    var(--outline-variant) 44%,
    transparent
  );
  --eduloo-doc-row-shadow: 0 14px 24px -20px
    color-mix(in srgb, var(--on-surface) 44%, transparent);
  --eduloo-doc-action-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 82%,
    var(--surface-container-low) 18%
  );
  --eduloo-doc-action-bg-hover: color-mix(
    in srgb,
    var(--surface-container-lowest) 66%,
    var(--primary-container) 34%
  );
  --eduloo-doc-action-border: color-mix(
    in srgb,
    var(--outline-variant) 44%,
    transparent
  );
  --eduloo-doc-action-border-strong: color-mix(
    in srgb,
    var(--primary-container) 58%,
    transparent
  );
  --eduloo-doc-action-text: color-mix(
    in srgb,
    var(--on-surface-variant) 84%,
    var(--primary) 16%
  );
  --eduloo-doc-danger-bg: color-mix(
    in srgb,
    var(--error-container) 72%,
    var(--surface-container-lowest) 28%
  );
  --eduloo-doc-danger-border: color-mix(in srgb, var(--error) 44%, transparent);
  --eduloo-doc-danger-text: color-mix(
    in srgb,
    var(--error) 84%,
    var(--on-error-container) 16%
  );
}

body.theme-dark {
  --eduloo-study-filters-bg: linear-gradient(
    142deg,
    color-mix(
        in srgb,
        var(--surface-container-highest) 76%,
        color-mix(in srgb, var(--secondary) 24%, transparent) 24%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-highest) 82%,
        color-mix(in srgb, var(--primary) 18%, transparent) 18%
      )
      100%
  );
  --eduloo-study-filters-shadow: 0 24px 38px -28px
    color-mix(in srgb, black 78%, transparent);
  --eduloo-study-filter-label: color-mix(
    in srgb,
    var(--on-surface) 88%,
    var(--secondary-container) 12%
  );
  --eduloo-study-filter-input-bg: color-mix(
    in srgb,
    var(--surface-container-high) 74%,
    var(--surface-container-highest) 26%
  );
  --eduloo-study-filter-input-bg-hover: color-mix(
    in srgb,
    var(--surface-container-highest) 58%,
    var(--primary-container) 42%
  );
  --eduloo-study-filter-input-bg-focus: linear-gradient(
    135deg,
    color-mix(in srgb, var(--secondary) 24%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 12%, transparent) 50%,
    color-mix(in srgb, var(--primary) 20%, transparent) 100%
  );
  --eduloo-study-filter-input-border: color-mix(
    in srgb,
    var(--outline-variant) 62%,
    transparent
  );
  --eduloo-study-filter-input-border-strong: color-mix(
    in srgb,
    var(--primary-container) 68%,
    transparent
  );
  --eduloo-study-tabs-bg: linear-gradient(
    142deg,
    color-mix(
        in srgb,
        var(--surface-container-highest) 76%,
        color-mix(in srgb, var(--secondary) 22%, transparent) 24%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-highest) 82%,
        color-mix(in srgb, var(--primary) 16%, transparent) 18%
      )
      100%
  );
  --eduloo-study-tabs-shadow: 0 24px 40px -30px
    color-mix(in srgb, black 80%, transparent);
  --eduloo-study-tab-text: color-mix(
    in srgb,
    var(--on-surface-variant) 80%,
    var(--on-primary) 20%
  );
  --eduloo-study-tab-text-hover: color-mix(
    in srgb,
    var(--on-surface) 92%,
    var(--on-primary) 8%
  );
  --eduloo-study-tab-hover-bg: linear-gradient(
    135deg,
    color-mix(in srgb, var(--secondary) 22%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 12%, transparent) 50%,
    color-mix(in srgb, var(--primary) 18%, transparent) 100%
  );
  --eduloo-study-tab-active-bg: linear-gradient(
    135deg,
    color-mix(in srgb, var(--secondary) 30%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 16%, transparent) 50%,
    color-mix(in srgb, var(--primary) 24%, transparent) 100%
  );
  --eduloo-study-tab-active-text: color-mix(
    in srgb,
    var(--on-surface) 92%,
    var(--on-primary) 8%
  );
  --eduloo-study-tab-active-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--secondary) 40%, transparent),
    0 12px 20px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 color-mix(in srgb, var(--on-surface) 14%, transparent);
  --eduloo-study-tab-icon: color-mix(
    in srgb,
    var(--on-surface) 82%,
    var(--secondary-container) 18%
  );
  --eduloo-doc-shell-bg: linear-gradient(
    158deg,
    color-mix(
        in srgb,
        var(--surface-container-high) 84%,
        var(--surface-container-highest) 16%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-highest) 80%,
        var(--surface-container-high) 20%
      )
      100%
  );
  --eduloo-doc-shell-shadow: 0 34px 60px -40px
    color-mix(in srgb, black 76%, transparent);
  --eduloo-doc-title: color-mix(
    in srgb,
    var(--on-surface) 94%,
    var(--on-primary) 6%
  );
  --eduloo-doc-text: color-mix(
    in srgb,
    var(--on-surface) 92%,
    var(--secondary-container) 8%
  );
  --eduloo-doc-muted: color-mix(
    in srgb,
    var(--on-surface-variant) 84%,
    var(--primary-container) 16%
  );
  --eduloo-doc-hero-bg: linear-gradient(
    145deg,
    color-mix(in srgb, var(--secondary) 20%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 8%, transparent) 48%,
    color-mix(in srgb, var(--primary) 16%, transparent) 100%
  );
  --eduloo-doc-hero-shadow: 0 20px 32px -24px rgba(0, 0, 0, 0.62);
  --eduloo-doc-hero-copy-bg: linear-gradient(
    142deg,
    color-mix(
        in srgb,
        var(--surface-container-highest) 76%,
        color-mix(in srgb, var(--secondary) 20%, transparent) 24%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-highest) 82%,
        color-mix(in srgb, var(--primary) 14%, transparent) 18%
      )
      100%
  );
  --eduloo-doc-hero-copy-border: color-mix(
    in srgb,
    var(--secondary) 36%,
    transparent
  );
  --eduloo-doc-hero-copy-shadow: 0 18px 28px -22px rgba(0, 0, 0, 0.66);
  --eduloo-doc-hero-accent: linear-gradient(
    136deg,
    color-mix(in srgb, var(--secondary) 90%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 78%, transparent) 52%,
    color-mix(in srgb, var(--primary) 84%, transparent) 100%
  );
  --eduloo-doc-hero-title-grad: linear-gradient(
    132deg,
    color-mix(in srgb, var(--info) 70%, var(--on-info-container) 30%) 0%,
    color-mix(in srgb, var(--info) 70%, var(--on-info-container) 30%) 52%,
    color-mix(in srgb, var(--primary) 58%, var(--on-primary-container) 42%) 100%
  );
  --eduloo-doc-surface-soft: color-mix(
    in srgb,
    var(--surface-container-high) 78%,
    var(--surface-container-highest) 22%
  );
  --eduloo-doc-surface-border: color-mix(
    in srgb,
    var(--primary-container) 36%,
    transparent
  );
  --eduloo-doc-input-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 86%,
    transparent
  );
  --eduloo-doc-input-focus-bg: color-mix(
    in srgb,
    var(--surface-container-high) 76%,
    var(--surface-container-highest) 24%
  );
  --eduloo-doc-chip-bg: linear-gradient(
    135deg,
    color-mix(in srgb, var(--secondary) 24%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 12%, transparent) 48%,
    color-mix(in srgb, var(--primary) 20%, transparent) 100%
  );
  --eduloo-doc-chip-border: color-mix(
    in srgb,
    var(--secondary) 34%,
    transparent
  );
  --eduloo-doc-chip-text: color-mix(
    in srgb,
    var(--on-surface) 90%,
    var(--on-primary) 10%
  );
  --eduloo-doc-upload-bg: linear-gradient(
    142deg,
    color-mix(
        in srgb,
        var(--surface-container-highest) 76%,
        color-mix(in srgb, var(--secondary) 22%, transparent) 24%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-highest) 82%,
        color-mix(in srgb, var(--primary) 16%, transparent) 18%
      )
      100%
  );
  --eduloo-doc-upload-border: color-mix(
    in srgb,
    var(--secondary) 34%,
    transparent
  );
  --eduloo-doc-dropzone-icon-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 56%,
    var(--primary-container) 44%
  );
  --eduloo-doc-dropzone-icon-text: color-mix(
    in srgb,
    var(--on-surface) 92%,
    var(--on-primary) 8%
  );
  --eduloo-doc-row-bg: linear-gradient(
    142deg,
    color-mix(
        in srgb,
        var(--surface-container-highest) 76%,
        color-mix(in srgb, var(--secondary) 22%, transparent) 24%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-highest) 82%,
        color-mix(in srgb, var(--primary) 16%, transparent) 18%
      )
      100%
  );
  --eduloo-doc-row-border: color-mix(
    in srgb,
    var(--secondary) 34%,
    transparent
  );
  --eduloo-doc-row-shadow: 0 18px 28px -22px rgba(0, 0, 0, 0.68);
  --eduloo-doc-action-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 62%,
    var(--primary-container) 38%
  );
  --eduloo-doc-action-bg-hover: color-mix(
    in srgb,
    var(--surface-container-highest) 50%,
    var(--primary-container) 50%
  );
  --eduloo-doc-action-border: color-mix(
    in srgb,
    var(--primary-container) 56%,
    transparent
  );
  --eduloo-doc-action-border-strong: color-mix(
    in srgb,
    var(--primary-container) 72%,
    transparent
  );
  --eduloo-doc-action-text: color-mix(
    in srgb,
    var(--on-surface) 90%,
    var(--on-primary) 10%
  );
}

:root {
  --eduloo-study-shell-offset: var(
    --eduloo-main-offset,
    calc(var(--navbar-offset, 60px) + 26px)
  );
  --eduloo-study-shell-bg: linear-gradient(
    158deg,
    color-mix(in srgb, var(--surface-container-low) 84%, var(--surface) 16%) 0%,
    color-mix(in srgb, var(--surface-container) 82%, var(--surface-bright) 18%)
      100%
  );
  --eduloo-study-shell-shadow: 0 30px 54px -38px
    color-mix(in srgb, var(--on-surface) 42%, transparent);
  --eduloo-study-toolbar-bg: linear-gradient(
    138deg,
    color-mix(
        in srgb,
        var(--surface-container-lowest) 90%,
        var(--surface-container-low) 10%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-lowest) 84%,
        var(--surface-container) 16%
      )
      100%
  );
  --eduloo-study-toolbar-border: color-mix(
    in srgb,
    var(--outline-variant) 44%,
    transparent
  );
  --eduloo-study-toolbar-shadow: 0 20px 34px -28px
    color-mix(in srgb, var(--on-surface) 42%, transparent);
  --eduloo-study-filter-label: color-mix(
    in srgb,
    var(--primary) 76%,
    var(--on-surface) 24%
  );
  --eduloo-study-input-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 90%,
    transparent
  );
  --eduloo-study-input-bg-hover: color-mix(
    in srgb,
    var(--surface-container-lowest) 74%,
    var(--primary-container) 26%
  );
  --eduloo-study-input-bg-focus: color-mix(
    in srgb,
    var(--surface-container-lowest) 66%,
    var(--primary-container) 34%
  );
  --eduloo-study-input-border: color-mix(
    in srgb,
    var(--outline-variant) 44%,
    transparent
  );
  --eduloo-study-input-border-strong: color-mix(
    in srgb,
    var(--primary-container) 58%,
    transparent
  );
  --eduloo-study-focus: color-mix(
    in srgb,
    var(--primary-container) 56%,
    transparent
  );
  --eduloo-study-tab-bg: linear-gradient(
    138deg,
    color-mix(
        in srgb,
        var(--surface-container-lowest) 90%,
        var(--surface-container-low) 10%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-lowest) 84%,
        var(--surface-container) 16%
      )
      100%
  );
  --eduloo-study-tab-shadow: 0 20px 34px -28px
    color-mix(in srgb, var(--on-surface) 40%, transparent);
  --eduloo-study-tab-text: color-mix(
    in srgb,
    var(--on-surface-variant) 82%,
    var(--primary) 18%
  );
  --eduloo-study-tab-text-hover: color-mix(
    in srgb,
    var(--on-surface) 86%,
    var(--primary) 14%
  );
  --eduloo-study-tab-icon: color-mix(
    in srgb,
    var(--primary) 74%,
    var(--on-primary-container) 26%
  );
  --eduloo-study-tab-bg-hover: color-mix(
    in srgb,
    var(--surface-container-lowest) 72%,
    var(--primary-container) 28%
  );
  --eduloo-study-tab-bg-active: linear-gradient(
    135deg,
    color-mix(in srgb, var(--info) 14%, transparent) 0%,
    color-mix(in srgb, var(--primary) 14%, transparent) 100%
  );
  --eduloo-study-tab-text-active: #1e293b;
  --eduloo-study-tab-shadow-active:
    inset 0 0 0 1px color-mix(in srgb, var(--info) 25%, transparent),
    0 8px 16px color-mix(in srgb, var(--on-surface) 8%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --eduloo-study-pane-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 94%,
    transparent
  );
  --eduloo-study-pane-shadow: 0 24px 40px -34px
    color-mix(in srgb, var(--primary) 28%, transparent);
  --eduloo-study-surface-soft: color-mix(
    in srgb,
    var(--surface-container-lowest) 84%,
    var(--surface-container-low) 16%
  );
  --eduloo-study-surface-strong: color-mix(
    in srgb,
    var(--surface-container-lowest) 74%,
    var(--primary-container) 26%
  );
  --eduloo-study-surface-border: color-mix(
    in srgb,
    var(--outline-variant) 44%,
    transparent
  );
  --eduloo-study-title: var(--on-surface);
  --eduloo-study-text: var(--on-surface);
  --eduloo-study-muted: var(--on-surface-variant);
  --eduloo-study-hero-bg: linear-gradient(
    145deg,
    color-mix(
        in srgb,
        var(--surface-container-lowest) 88%,
        var(--surface-container-low) 12%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-lowest) 80%,
        var(--surface-container) 20%
      )
      100%
  );
  --eduloo-study-hero-shadow: 0 18px 30px -24px
    color-mix(in srgb, var(--on-surface) 36%, transparent);
  --eduloo-study-title-grad: linear-gradient(
    132deg,
    #4c63d5 0%,
    #7d67c8 56%,
    #bd649e 100%
  );
  --eduloo-study-hero-kicker-bg: color-mix(
    in srgb,
    var(--primary-container) 34%,
    transparent
  );
  --eduloo-study-hero-kicker-text: color-mix(
    in srgb,
    var(--primary) 84%,
    var(--on-primary-container) 16%
  );
  --eduloo-study-hero-accent: linear-gradient(
    136deg,
    color-mix(in srgb, var(--info) 82%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 72%, transparent) 52%,
    color-mix(in srgb, var(--primary) 82%, transparent) 100%
  );
  --eduloo-study-chip-bg: linear-gradient(
    135deg,
    color-mix(in srgb, var(--info) 10%, transparent) 0%,
    color-mix(in srgb, var(--primary) 10%, transparent) 100%
  );
  --eduloo-study-chip-border: color-mix(in srgb, var(--info) 24%, transparent);
  --eduloo-study-chip-text: #1e293b;
  --eduloo-study-btn-primary-bg: linear-gradient(
    136deg,
    color-mix(in srgb, var(--primary) 86%, var(--primary-container) 14%) 0%,
    color-mix(
        in srgb,
        var(--primary-container) 68%,
        var(--secondary-container) 32%
      )
      100%
  );
  --eduloo-study-btn-primary-bg-hover: linear-gradient(
    136deg,
    color-mix(in srgb, var(--primary) 90%, var(--primary-container) 10%) 0%,
    color-mix(
        in srgb,
        var(--primary-container) 72%,
        var(--secondary-container) 28%
      )
      100%
  );
  --eduloo-study-btn-primary-shadow: 0 18px 28px -22px
    color-mix(in srgb, var(--primary) 56%, transparent);
  --eduloo-study-btn-secondary-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 82%,
    var(--secondary-container) 18%
  );
  --eduloo-study-btn-secondary-bg-hover: color-mix(
    in srgb,
    var(--surface-container-lowest) 66%,
    var(--secondary-container) 34%
  );
  --eduloo-study-btn-secondary-border: color-mix(
    in srgb,
    var(--secondary-container) 54%,
    transparent
  );
  --eduloo-study-btn-secondary-text: color-mix(
    in srgb,
    var(--on-surface) 84%,
    var(--secondary) 16%
  );
  --eduloo-study-btn-muted-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 82%,
    var(--surface-container-low) 18%
  );
  --eduloo-study-btn-muted-bg-hover: color-mix(
    in srgb,
    var(--surface-container-lowest) 66%,
    var(--primary-container) 34%
  );
  --eduloo-study-btn-muted-border: color-mix(
    in srgb,
    var(--outline-variant) 46%,
    transparent
  );
  --eduloo-study-btn-muted-text: color-mix(
    in srgb,
    var(--on-surface-variant) 84%,
    var(--primary) 16%
  );
  --eduloo-study-row-bg: linear-gradient(
    140deg,
    color-mix(
        in srgb,
        var(--surface-container-lowest) 88%,
        var(--surface-container-low) 12%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-lowest) 82%,
        var(--surface-container) 18%
      )
      100%
  );
  --eduloo-study-row-shadow: 0 14px 24px -20px
    color-mix(in srgb, var(--on-surface) 40%, transparent);
  --eduloo-study-progress-track: color-mix(
    in srgb,
    var(--surface-container-low) 82%,
    var(--surface-container) 18%
  );
  --eduloo-study-progress-fill: linear-gradient(
    90deg,
    #5a74e0 0%,
    #bd649e 100%
  );
  --eduloo-study-success: #15803d;
  --eduloo-study-danger: #b91c1c;
  --eduloo-study-gen-panel-bg: linear-gradient(
    140deg,
    color-mix(
        in srgb,
        var(--surface-container-lowest) 82%,
        var(--surface-container-low) 18%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-lowest) 72%,
        var(--primary-container) 28%
      )
      100%
  );
  --eduloo-study-gen-panel-border: color-mix(
    in srgb,
    var(--eduloo-study-surface-border) 88%,
    transparent
  );
  --eduloo-study-gen-title: var(--eduloo-study-title);
  --eduloo-study-gen-muted: var(--eduloo-study-muted);
  --eduloo-study-gen-track-bg: color-mix(
    in srgb,
    var(--surface-container-low) 76%,
    var(--surface-container-lowest) 24%
  );
  --eduloo-study-gen-track-fill: var(--eduloo-study-progress-fill);
  --eduloo-study-gen-step-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 86%,
    var(--surface-container-low) 14%
  );
  --eduloo-study-gen-step-border: color-mix(
    in srgb,
    var(--eduloo-study-surface-border) 74%,
    transparent
  );
  --eduloo-study-gen-step-line: color-mix(
    in srgb,
    var(--eduloo-study-surface-border) 62%,
    transparent
  );
  --eduloo-study-gen-step-label: var(--eduloo-study-text);
  --eduloo-study-gen-step-pending-label: var(--eduloo-study-muted);
  --eduloo-study-gen-step-pending-icon: color-mix(
    in srgb,
    var(--eduloo-study-muted) 68%,
    transparent
  );
  --eduloo-study-gen-step-active-bg: color-mix(
    in srgb,
    var(--secondary-container) 30%,
    var(--surface-container-lowest) 70%
  );
  --eduloo-study-gen-step-active-border: color-mix(
    in srgb,
    var(--secondary) 36%,
    transparent
  );
  --eduloo-study-gen-step-active-label: color-mix(
    in srgb,
    var(--secondary) 74%,
    var(--on-surface) 26%
  );
  --eduloo-study-gen-step-active-icon: color-mix(
    in srgb,
    var(--secondary) 74%,
    var(--on-surface) 26%
  );
  --eduloo-study-gen-step-done-bg: color-mix(
    in srgb,
    var(--eduloo-study-success, var(--success)) 16%,
    var(--surface-container-lowest) 84%
  );
  --eduloo-study-gen-step-done-border: color-mix(
    in srgb,
    var(--eduloo-study-success, var(--success)) 48%,
    var(--eduloo-study-surface-border) 52%
  );
  --eduloo-study-gen-step-done-label: color-mix(
    in srgb,
    var(--eduloo-study-success, var(--success)) 84%,
    var(--on-surface) 16%
  );
  --eduloo-study-gen-step-done-icon: var(--eduloo-study-gen-step-done-label);
  --eduloo-study-gen-step-failed-bg: color-mix(
    in srgb,
    var(--error, var(--danger)) 18%,
    var(--surface-container-lowest) 82%
  );
  --eduloo-study-gen-step-failed-border: color-mix(
    in srgb,
    var(--error, var(--danger)) 56%,
    transparent
  );
  --eduloo-study-gen-step-failed-label: color-mix(
    in srgb,
    var(--error, var(--danger)) 84%,
    var(--on-surface) 16%
  );
  --eduloo-study-gen-step-failed-icon: var(
    --eduloo-study-gen-step-failed-label
  );
}

body.theme-dark {
  --eduloo-study-shell-bg: linear-gradient(
    158deg,
    color-mix(
        in srgb,
        var(--surface-container-high) 84%,
        var(--surface-container-highest) 16%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-highest) 80%,
        var(--surface-container-high) 20%
      )
      100%
  );
  --eduloo-study-shell-shadow: 0 34px 60px -40px
    color-mix(in srgb, black 76%, transparent);
  --eduloo-study-toolbar-bg: linear-gradient(
    142deg,
    color-mix(
        in srgb,
        var(--surface-container-highest) 76%,
        color-mix(in srgb, var(--secondary) 24%, transparent) 24%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-highest) 82%,
        color-mix(in srgb, var(--primary) 18%, transparent) 18%
      )
      100%
  );
  --eduloo-study-toolbar-border: color-mix(
    in srgb,
    var(--secondary) 34%,
    transparent
  );
  --eduloo-study-toolbar-shadow: 0 24px 38px -28px
    color-mix(in srgb, black 78%, transparent);
  --eduloo-study-filter-label: color-mix(
    in srgb,
    var(--on-surface) 88%,
    var(--secondary-container) 12%
  );
  --eduloo-study-input-bg: color-mix(
    in srgb,
    var(--surface-container-high) 74%,
    var(--surface-container-highest) 26%
  );
  --eduloo-study-input-bg-hover: color-mix(
    in srgb,
    var(--surface-container-highest) 58%,
    var(--primary-container) 42%
  );
  --eduloo-study-input-bg-focus: linear-gradient(
    135deg,
    color-mix(in srgb, var(--secondary) 24%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 12%, transparent) 50%,
    color-mix(in srgb, var(--primary) 20%, transparent) 100%
  );
  --eduloo-study-input-border: color-mix(
    in srgb,
    var(--outline-variant) 62%,
    transparent
  );
  --eduloo-study-input-border-strong: color-mix(
    in srgb,
    var(--primary-container) 68%,
    transparent
  );
  --eduloo-study-focus: color-mix(
    in srgb,
    var(--secondary-container) 50%,
    transparent
  );
  --eduloo-study-tab-bg: linear-gradient(
    142deg,
    color-mix(
        in srgb,
        var(--surface-container-highest) 76%,
        color-mix(in srgb, var(--secondary) 22%, transparent) 24%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-highest) 82%,
        color-mix(in srgb, var(--primary) 16%, transparent) 18%
      )
      100%
  );
  --eduloo-study-tab-shadow: 0 24px 40px -30px
    color-mix(in srgb, black 80%, transparent);
  --eduloo-study-tab-text: color-mix(
    in srgb,
    var(--on-surface-variant) 80%,
    var(--on-primary) 20%
  );
  --eduloo-study-tab-text-hover: color-mix(
    in srgb,
    var(--on-surface) 92%,
    var(--on-primary) 8%
  );
  --eduloo-study-tab-icon: color-mix(
    in srgb,
    var(--on-surface) 82%,
    var(--secondary-container) 18%
  );
  --eduloo-study-tab-bg-hover: linear-gradient(
    135deg,
    color-mix(in srgb, var(--secondary) 22%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 12%, transparent) 50%,
    color-mix(in srgb, var(--primary) 18%, transparent) 100%
  );
  --eduloo-study-tab-bg-active: linear-gradient(
    135deg,
    color-mix(in srgb, var(--secondary) 30%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 16%, transparent) 50%,
    color-mix(in srgb, var(--primary) 24%, transparent) 100%
  );
  --eduloo-study-tab-text-active: color-mix(
    in srgb,
    var(--on-surface) 92%,
    var(--on-primary) 8%
  );
  --eduloo-study-tab-shadow-active:
    inset 0 0 0 1px color-mix(in srgb, var(--secondary) 40%, transparent),
    0 12px 20px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 color-mix(in srgb, var(--on-surface) 14%, transparent);
  --eduloo-study-pane-bg: linear-gradient(
    145deg,
    color-mix(
        in srgb,
        var(--surface-container-highest) 82%,
        color-mix(in srgb, var(--secondary) 18%, transparent) 18%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-highest) 84%,
        color-mix(in srgb, var(--primary) 14%, transparent) 16%
      )
      100%
  );
  --eduloo-study-pane-shadow: 0 22px 38px -28px rgba(0, 0, 0, 0.78);
  --eduloo-study-surface-soft: color-mix(
    in srgb,
    var(--surface-container-high) 78%,
    var(--surface-container-highest) 22%
  );
  --eduloo-study-surface-strong: linear-gradient(
    135deg,
    color-mix(in srgb, var(--secondary) 20%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 10%, transparent) 48%,
    color-mix(in srgb, var(--primary) 17%, transparent) 100%
  );
  --eduloo-study-surface-border: color-mix(
    in srgb,
    var(--secondary) 34%,
    transparent
  );
  --eduloo-study-title: color-mix(
    in srgb,
    var(--on-surface) 94%,
    var(--on-primary) 6%
  );
  --eduloo-study-text: color-mix(
    in srgb,
    var(--on-surface) 92%,
    var(--secondary-container) 8%
  );
  --eduloo-study-muted: color-mix(
    in srgb,
    var(--on-surface-variant) 86%,
    var(--primary-container) 14%
  );
  --eduloo-study-hero-bg: linear-gradient(
    145deg,
    color-mix(
        in srgb,
        var(--surface-container-highest) 82%,
        color-mix(in srgb, var(--secondary) 18%, transparent) 18%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-highest) 84%,
        color-mix(in srgb, var(--primary) 14%, transparent) 16%
      )
      100%
  );
  --eduloo-study-hero-shadow: 0 20px 32px -24px rgba(0, 0, 0, 0.62);
  --eduloo-study-title-grad: linear-gradient(
    132deg,
    color-mix(in srgb, var(--info) 70%, var(--on-info-container) 30%) 0%,
    color-mix(in srgb, var(--info) 70%, var(--on-info-container) 30%) 52%,
    color-mix(in srgb, var(--primary) 58%, var(--on-primary-container) 42%) 100%
  );
  --eduloo-study-hero-kicker-bg: linear-gradient(
    135deg,
    color-mix(in srgb, var(--secondary) 28%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 16%, transparent) 48%,
    color-mix(in srgb, var(--primary) 24%, transparent) 100%
  );
  --eduloo-study-hero-kicker-text: color-mix(
    in srgb,
    var(--on-surface) 90%,
    var(--on-primary) 10%
  );
  --eduloo-study-hero-accent: linear-gradient(
    136deg,
    color-mix(in srgb, var(--secondary) 90%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 78%, transparent) 52%,
    color-mix(in srgb, var(--primary) 84%, transparent) 100%
  );
  --eduloo-study-chip-bg: linear-gradient(
    135deg,
    color-mix(in srgb, var(--secondary) 24%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 12%, transparent) 48%,
    color-mix(in srgb, var(--primary) 20%, transparent) 100%
  );
  --eduloo-study-chip-border: color-mix(
    in srgb,
    var(--secondary) 34%,
    transparent
  );
  --eduloo-study-chip-text: color-mix(
    in srgb,
    var(--on-surface) 90%,
    var(--on-primary) 10%
  );
  --eduloo-study-btn-primary-bg: linear-gradient(
    136deg,
    color-mix(in srgb, var(--secondary) 40%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 18%, transparent) 50%,
    color-mix(in srgb, var(--primary) 32%, transparent) 100%
  );
  --eduloo-study-btn-primary-bg-hover: linear-gradient(
    136deg,
    color-mix(in srgb, var(--secondary) 48%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 24%, transparent) 50%,
    color-mix(in srgb, var(--primary) 38%, transparent) 100%
  );
  --eduloo-study-btn-primary-shadow: 0 20px 30px -24px rgba(0, 0, 0, 0.56);
  --eduloo-study-btn-secondary-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 58%,
    var(--secondary-container) 42%
  );
  --eduloo-study-btn-secondary-bg-hover: color-mix(
    in srgb,
    var(--surface-container-highest) 46%,
    var(--secondary-container) 54%
  );
  --eduloo-study-btn-secondary-border: color-mix(
    in srgb,
    var(--secondary-container) 62%,
    transparent
  );
  --eduloo-study-btn-secondary-text: color-mix(
    in srgb,
    var(--on-surface) 90%,
    var(--on-primary) 10%
  );
  --eduloo-study-btn-muted-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 62%,
    var(--primary-container) 38%
  );
  --eduloo-study-btn-muted-bg-hover: color-mix(
    in srgb,
    var(--surface-container-highest) 50%,
    var(--primary-container) 50%
  );
  --eduloo-study-btn-muted-border: color-mix(
    in srgb,
    var(--primary-container) 56%,
    transparent
  );
  --eduloo-study-btn-muted-text: color-mix(
    in srgb,
    var(--on-surface) 90%,
    var(--on-primary) 10%
  );
  --eduloo-study-row-bg: linear-gradient(
    142deg,
    color-mix(
        in srgb,
        var(--surface-container-highest) 76%,
        color-mix(in srgb, var(--secondary) 22%, transparent) 24%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-highest) 82%,
        color-mix(in srgb, var(--primary) 16%, transparent) 18%
      )
      100%
  );
  --eduloo-study-row-shadow: 0 18px 28px -22px rgba(0, 0, 0, 0.68);
  --eduloo-study-progress-track: color-mix(
    in srgb,
    var(--surface-container-high) 70%,
    var(--surface-container-highest) 30%
  );
  --eduloo-study-progress-fill: linear-gradient(
    90deg,
    color-mix(in srgb, var(--secondary) 94%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 86%, transparent) 52%,
    color-mix(in srgb, var(--primary) 90%, transparent) 100%
  );
  --eduloo-study-success: color-mix(
    in srgb,
    var(--secondary) 60%,
    var(--on-secondary-container) 40%
  );
  --eduloo-study-danger: var(--primary-strong);
  --eduloo-study-gen-panel-bg: linear-gradient(
    142deg,
    color-mix(
        in srgb,
        var(--surface-container-highest) 82%,
        color-mix(in srgb, var(--secondary) 24%, transparent) 18%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-highest) 86%,
        color-mix(in srgb, var(--primary) 20%, transparent) 14%
      )
      100%
  );
  --eduloo-study-gen-panel-border: color-mix(
    in srgb,
    var(--eduloo-study-surface-border) 96%,
    transparent
  );
  --eduloo-study-gen-title: color-mix(
    in srgb,
    var(--on-surface) 94%,
    var(--on-primary) 6%
  );
  --eduloo-study-gen-muted: color-mix(
    in srgb,
    var(--on-surface-variant) 84%,
    var(--primary-container) 16%
  );
  --eduloo-study-gen-track-bg: color-mix(
    in srgb,
    var(--surface-container-high) 74%,
    var(--surface-container-highest) 26%
  );
  --eduloo-study-gen-step-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 84%,
    color-mix(in srgb, var(--secondary) 16%, transparent) 16%
  );
  --eduloo-study-gen-step-border: color-mix(
    in srgb,
    var(--eduloo-study-surface-border) 78%,
    transparent
  );
  --eduloo-study-gen-step-line: color-mix(
    in srgb,
    var(--eduloo-study-surface-border) 68%,
    transparent
  );
  --eduloo-study-gen-step-label: var(--eduloo-study-text);
  --eduloo-study-gen-step-pending-label: var(--eduloo-study-muted);
  --eduloo-study-gen-step-pending-icon: color-mix(
    in srgb,
    var(--eduloo-study-muted) 76%,
    transparent
  );
  --eduloo-study-gen-step-active-bg: color-mix(
    in srgb,
    var(--secondary-container) 36%,
    var(--surface-container-highest) 64%
  );
  --eduloo-study-gen-step-active-border: color-mix(
    in srgb,
    var(--secondary-container) 56%,
    transparent
  );
  --eduloo-study-gen-step-active-label: color-mix(
    in srgb,
    var(--on-surface) 90%,
    var(--secondary-container) 10%
  );
  --eduloo-study-gen-step-active-icon: color-mix(
    in srgb,
    var(--on-surface) 88%,
    var(--secondary-container) 12%
  );
  --eduloo-study-gen-step-done-bg: color-mix(
    in srgb,
    var(--eduloo-study-success, var(--success)) 20%,
    var(--surface-container-highest) 80%
  );
  --eduloo-study-gen-step-done-border: color-mix(
    in srgb,
    var(--eduloo-study-success, var(--success)) 56%,
    var(--eduloo-study-surface-border) 44%
  );
  --eduloo-study-gen-step-done-label: color-mix(
    in srgb,
    var(--eduloo-study-success, var(--success)) 82%,
    var(--on-surface) 18%
  );
  --eduloo-study-gen-step-done-icon: var(--eduloo-study-gen-step-done-label);
  --eduloo-study-gen-step-failed-bg: color-mix(
    in srgb,
    var(--error, var(--danger)) 22%,
    var(--surface-container-highest) 78%
  );
  --eduloo-study-gen-step-failed-border: color-mix(
    in srgb,
    var(--error, var(--danger)) 62%,
    transparent
  );
  --eduloo-study-gen-step-failed-label: color-mix(
    in srgb,
    var(--error, var(--danger)) 84%,
    var(--on-surface) 16%
  );
  --eduloo-study-gen-step-failed-icon: var(
    --eduloo-study-gen-step-failed-label
  );
}

:root {
  --eduloo-doc-mode-overlay-backdrop: color-mix(
    in srgb,
    var(--on-surface) 48%,
    transparent
  );
  --eduloo-doc-mode-overlay-card-bg: linear-gradient(
    152deg,
    color-mix(
        in srgb,
        var(--surface-container-lowest) 92%,
        var(--surface-container-low) 8%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-lowest) 82%,
        var(--surface-container) 18%
      )
      100%
  );
  --eduloo-doc-mode-overlay-card-border: color-mix(
    in srgb,
    var(--outline-variant) 44%,
    transparent
  );
  --eduloo-doc-mode-overlay-card-shadow: 0 40px 72px -44px
    color-mix(in srgb, var(--on-surface) 66%, transparent);
  --eduloo-doc-mode-overlay-title: color-mix(
    in srgb,
    var(--on-surface) 92%,
    var(--primary) 8%
  );
  --eduloo-doc-mode-overlay-text: var(--on-surface-variant);
  --eduloo-doc-mode-overlay-btn-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 88%,
    var(--surface-container-low) 12%
  );
  --eduloo-doc-mode-overlay-btn-bg-hover: color-mix(
    in srgb,
    var(--surface-container-lowest) 72%,
    var(--primary-container) 28%
  );
  --eduloo-doc-mode-overlay-btn-border: color-mix(
    in srgb,
    var(--outline-variant) 46%,
    transparent
  );
  --eduloo-doc-mode-overlay-btn-border-hover: color-mix(
    in srgb,
    var(--primary-container) 62%,
    transparent
  );
  --eduloo-doc-mode-overlay-btn-title: color-mix(
    in srgb,
    var(--on-surface) 90%,
    var(--primary) 10%
  );
  --eduloo-doc-mode-overlay-btn-text: var(--on-surface-variant);
  --eduloo-doc-mode-overlay-icon-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 74%,
    var(--primary-container) 26%
  );
  --eduloo-doc-mode-overlay-icon-text-auto: color-mix(
    in srgb,
    var(--primary) 84%,
    var(--on-surface) 16%
  );
  --eduloo-doc-mode-overlay-icon-text-manual: color-mix(
    in srgb,
    var(--secondary) 74%,
    var(--on-surface) 26%
  );
  --eduloo-doc-mode-overlay-apply-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 82%,
    var(--surface-container-low) 18%
  );
  --eduloo-doc-mode-overlay-apply-border: color-mix(
    in srgb,
    var(--outline-variant) 42%,
    transparent
  );
}

body.theme-dark {
  --eduloo-doc-mode-overlay-backdrop: color-mix(
    in srgb,
    black 68%,
    transparent
  );
  --eduloo-doc-mode-overlay-card-bg: linear-gradient(
    152deg,
    color-mix(
        in srgb,
        var(--surface-container-highest) 78%,
        color-mix(in srgb, var(--secondary) 22%, transparent) 22%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-highest) 82%,
        color-mix(in srgb, var(--primary) 16%, transparent) 18%
      )
      100%
  );
  --eduloo-doc-mode-overlay-card-border: color-mix(
    in srgb,
    var(--primary-container) 42%,
    transparent
  );
  --eduloo-doc-mode-overlay-card-shadow: 0 40px 72px -44px
    color-mix(in srgb, black 84%, transparent);
  --eduloo-doc-mode-overlay-title: color-mix(
    in srgb,
    var(--on-surface) 96%,
    var(--on-primary) 4%
  );
  --eduloo-doc-mode-overlay-text: color-mix(
    in srgb,
    var(--on-surface-variant) 86%,
    var(--primary-container) 14%
  );
  --eduloo-doc-mode-overlay-btn-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 62%,
    var(--primary-container) 38%
  );
  --eduloo-doc-mode-overlay-btn-bg-hover: color-mix(
    in srgb,
    var(--surface-container-highest) 50%,
    var(--primary-container) 50%
  );
  --eduloo-doc-mode-overlay-btn-border: color-mix(
    in srgb,
    var(--primary-container) 56%,
    transparent
  );
  --eduloo-doc-mode-overlay-btn-border-hover: color-mix(
    in srgb,
    var(--primary-container) 72%,
    transparent
  );
  --eduloo-doc-mode-overlay-btn-title: color-mix(
    in srgb,
    var(--on-surface) 92%,
    var(--on-primary) 8%
  );
  --eduloo-doc-mode-overlay-btn-text: color-mix(
    in srgb,
    var(--on-surface-variant) 88%,
    var(--on-primary) 12%
  );
  --eduloo-doc-mode-overlay-icon-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 56%,
    var(--primary-container) 44%
  );
  --eduloo-doc-mode-overlay-icon-text-auto: color-mix(
    in srgb,
    var(--on-primary) 88%,
    var(--secondary-container) 12%
  );
  --eduloo-doc-mode-overlay-icon-text-manual: color-mix(
    in srgb,
    var(--on-primary) 78%,
    var(--tertiary-container) 22%
  );
  --eduloo-doc-mode-overlay-apply-bg: color-mix(
    in srgb,
    var(--surface-container-high) 78%,
    var(--surface-container-highest) 22%
  );
  --eduloo-doc-mode-overlay-apply-border: color-mix(
    in srgb,
    var(--primary-container) 44%,
    transparent
  );
}

body.theme-dark {
  --eduloo-study-filters-bg: linear-gradient(
    142deg,
    color-mix(
        in srgb,
        var(--surface-container-highest) 84%,
        color-mix(in srgb, var(--primary) 20%, transparent) 16%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-highest) 86%,
        color-mix(in srgb, var(--info) 14%, transparent) 14%
      )
      100%
  );
  --eduloo-study-filters-shadow: 0 22px 34px -28px
    color-mix(in srgb, black 70%, transparent);
  --eduloo-study-filter-label: color-mix(
    in srgb,
    var(--on-surface) 90%,
    color-mix(in srgb, var(--primary-strong) 28%, transparent) 10%
  );
  --eduloo-study-filter-input-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 78%,
    color-mix(in srgb, var(--primary) 14%, transparent) 22%
  );
  --eduloo-study-filter-input-bg-hover: color-mix(
    in srgb,
    var(--surface-container-highest) 70%,
    color-mix(in srgb, var(--primary) 22%, transparent) 30%
  );
  --eduloo-study-filter-input-bg-focus: color-mix(
    in srgb,
    var(--surface-container-highest) 64%,
    color-mix(in srgb, var(--info) 20%, transparent) 36%
  );
  --eduloo-study-filter-input-border: color-mix(
    in srgb,
    var(--outline-variant) 62%,
    color-mix(in srgb, var(--primary) 28%, transparent) 38%
  );
  --eduloo-study-filter-input-border-strong: color-mix(
    in srgb,
    var(--outline-variant) 48%,
    color-mix(in srgb, var(--primary) 52%, transparent) 52%
  );
  --eduloo-study-filter-focus: color-mix(
    in srgb,
    var(--primary) 34%,
    transparent
  );

  --eduloo-study-tabs-bg: linear-gradient(
    142deg,
    color-mix(
        in srgb,
        var(--surface-container-highest) 84%,
        color-mix(in srgb, var(--primary) 18%, transparent) 16%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-highest) 86%,
        color-mix(in srgb, var(--info) 12%, transparent) 14%
      )
      100%
  );
  --eduloo-study-tabs-shadow: 0 22px 34px -28px
    color-mix(in srgb, black 72%, transparent);
  --eduloo-study-tab-text: color-mix(
    in srgb,
    var(--on-surface) 90%,
    color-mix(in srgb, var(--primary-strong) 18%, transparent) 10%
  );
  --eduloo-study-tab-text-hover: color-mix(
    in srgb,
    var(--on-surface) 96%,
    color-mix(in srgb, var(--on-primary-container) 8%, transparent) 4%
  );
  --eduloo-study-tab-hover-bg: linear-gradient(
    135deg,
    color-mix(in srgb, var(--primary) 20%, transparent) 0%,
    color-mix(in srgb, var(--info) 14%, transparent) 100%
  );
  --eduloo-study-tab-active-bg: linear-gradient(
    135deg,
    color-mix(in srgb, var(--primary) 30%, transparent) 0%,
    color-mix(in srgb, var(--info) 20%, transparent) 100%
  );
  --eduloo-study-tab-active-text: color-mix(
    in srgb,
    var(--on-surface) 98%,
    color-mix(in srgb, var(--on-primary-container) 2%, transparent) 2%
  );
  --eduloo-study-tab-active-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--primary) 44%, transparent),
    0 10px 18px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 color-mix(in srgb, var(--on-surface) 12%, transparent);
  --eduloo-study-tab-icon: color-mix(
    in srgb,
    var(--on-surface) 88%,
    color-mix(in srgb, var(--primary-strong) 22%, transparent) 12%
  );

  --eduloo-study-shell-bg: linear-gradient(
    156deg,
    color-mix(
        in srgb,
        var(--surface-container-high) 86%,
        color-mix(in srgb, var(--primary) 14%, transparent) 14%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-highest) 88%,
        color-mix(in srgb, var(--info) 10%, transparent) 12%
      )
      100%
  );
  --eduloo-study-shell-shadow: 0 30px 48px -34px
    color-mix(in srgb, black 70%, transparent);
  --eduloo-study-pane-bg: linear-gradient(
    148deg,
    color-mix(
        in srgb,
        var(--surface-container-highest) 86%,
        color-mix(in srgb, var(--primary) 14%, transparent) 14%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-highest) 88%,
        color-mix(in srgb, var(--info) 10%, transparent) 12%
      )
      100%
  );
  --eduloo-study-pane-shadow: 0 20px 34px -26px rgba(0, 0, 0, 0.56);
  --eduloo-study-surface-soft: color-mix(
    in srgb,
    var(--surface-container-highest) 84%,
    color-mix(in srgb, var(--primary) 16%, transparent) 16%
  );
  --eduloo-study-surface-strong: color-mix(
    in srgb,
    var(--surface-container-highest) 76%,
    color-mix(in srgb, var(--primary) 24%, transparent) 24%
  );
  --eduloo-study-surface-border: color-mix(
    in srgb,
    var(--outline-variant) 58%,
    color-mix(in srgb, var(--primary) 28%, transparent) 42%
  );
  --eduloo-study-title: color-mix(
    in srgb,
    var(--on-surface) 95%,
    color-mix(in srgb, var(--on-primary-container) 12%, transparent) 5%
  );
  --eduloo-study-text: color-mix(
    in srgb,
    var(--on-surface) 92%,
    color-mix(in srgb, var(--primary-strong) 8%, transparent) 8%
  );
  --eduloo-study-muted: color-mix(
    in srgb,
    var(--on-surface-variant) 86%,
    color-mix(in srgb, var(--primary-strong) 14%, transparent) 14%
  );
  --eduloo-study-hero-bg: linear-gradient(
    148deg,
    color-mix(
        in srgb,
        var(--surface-container-highest) 84%,
        color-mix(in srgb, var(--primary) 16%, transparent) 16%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-highest) 86%,
        color-mix(in srgb, var(--info) 12%, transparent) 14%
      )
      100%
  );
  --eduloo-study-hero-shadow: 0 18px 28px -20px rgba(0, 0, 0, 0.52);
  --eduloo-study-title-grad: linear-gradient(
    132deg,
    color-mix(in srgb, var(--on-primary-container) 96%, transparent) 0%,
    color-mix(in srgb, var(--primary-strong) 90%, transparent) 48%,
    color-mix(in srgb, var(--info) 92%, transparent) 100%
  );
  --eduloo-study-hero-kicker-bg: color-mix(
    in srgb,
    color-mix(in srgb, var(--primary) 34%, transparent) 68%,
    color-mix(in srgb, var(--info) 18%, transparent) 32%
  );
  --eduloo-study-hero-kicker-text: color-mix(
    in srgb,
    var(--on-surface) 92%,
    color-mix(in srgb, var(--on-primary-container) 8%, transparent) 8%
  );
  --eduloo-study-hero-accent: linear-gradient(
    136deg,
    color-mix(in srgb, var(--primary) 84%, transparent) 0%,
    color-mix(in srgb, var(--info) 72%, transparent) 100%
  );
  --eduloo-study-chip-bg: linear-gradient(
    135deg,
    color-mix(in srgb, var(--primary) 24%, transparent) 0%,
    color-mix(in srgb, var(--info) 16%, transparent) 100%
  );
  --eduloo-study-chip-border: color-mix(
    in srgb,
    var(--primary) 38%,
    transparent
  );
  --eduloo-study-chip-text: color-mix(
    in srgb,
    var(--on-surface) 92%,
    color-mix(in srgb, var(--on-primary-container) 8%, transparent) 8%
  );

  --eduloo-study-btn-primary-bg: linear-gradient(
    136deg,
    color-mix(in srgb, var(--primary) 78%, transparent) 0%,
    color-mix(in srgb, var(--info) 62%, transparent) 100%
  );
  --eduloo-study-btn-primary-bg-hover: linear-gradient(
    136deg,
    color-mix(in srgb, var(--primary) 86%, transparent) 0%,
    color-mix(in srgb, var(--info) 70%, transparent) 100%
  );
  --eduloo-study-btn-primary-shadow: 0 16px 24px -18px rgba(0, 0, 0, 0.46);
  --eduloo-study-btn-secondary-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 74%,
    color-mix(in srgb, var(--primary) 22%, transparent) 26%
  );
  --eduloo-study-btn-secondary-bg-hover: color-mix(
    in srgb,
    var(--surface-container-highest) 66%,
    color-mix(in srgb, var(--primary) 30%, transparent) 34%
  );
  --eduloo-study-btn-secondary-border: color-mix(
    in srgb,
    var(--outline-variant) 52%,
    color-mix(in srgb, var(--primary) 34%, transparent) 48%
  );
  --eduloo-study-btn-secondary-text: color-mix(
    in srgb,
    var(--on-surface) 92%,
    color-mix(in srgb, var(--on-primary-container) 8%, transparent) 8%
  );
  --eduloo-study-btn-muted-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 78%,
    color-mix(in srgb, var(--primary) 20%, transparent) 22%
  );
  --eduloo-study-btn-muted-bg-hover: color-mix(
    in srgb,
    var(--surface-container-highest) 70%,
    color-mix(in srgb, var(--primary) 30%, transparent) 30%
  );
  --eduloo-study-btn-muted-border: color-mix(
    in srgb,
    var(--outline-variant) 56%,
    color-mix(in srgb, var(--primary) 30%, transparent) 44%
  );
  --eduloo-study-btn-muted-text: color-mix(
    in srgb,
    var(--on-surface) 90%,
    color-mix(in srgb, var(--on-primary-container) 10%, transparent) 10%
  );
  --eduloo-study-row-bg: linear-gradient(
    146deg,
    color-mix(
        in srgb,
        var(--surface-container-highest) 82%,
        color-mix(in srgb, var(--primary) 16%, transparent) 18%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-highest) 86%,
        color-mix(in srgb, var(--info) 10%, transparent) 14%
      )
      100%
  );
  --eduloo-study-row-shadow: 0 16px 24px -20px rgba(0, 0, 0, 0.52);
  --eduloo-study-progress-track: color-mix(
    in srgb,
    var(--surface-container-highest) 72%,
    color-mix(in srgb, var(--primary) 28%, transparent) 28%
  );
  --eduloo-study-progress-fill: linear-gradient(
    90deg,
    color-mix(in srgb, var(--primary) 90%, transparent) 0%,
    color-mix(in srgb, var(--info) 82%, transparent) 100%
  );

  --eduloo-fc-shell-bg: var(--eduloo-study-shell-bg);
  --eduloo-fc-shell-shadow: var(--eduloo-study-shell-shadow);
  --eduloo-fc-title: var(--eduloo-study-title);
  --eduloo-fc-text: var(--eduloo-study-text);
  --eduloo-fc-muted: var(--eduloo-study-muted);
  --eduloo-fc-hero-bg: var(--eduloo-study-hero-bg);
  --eduloo-fc-hero-shadow: var(--eduloo-study-hero-shadow);
  --eduloo-fc-surface-soft: var(--eduloo-study-surface-soft);
  --eduloo-fc-surface-border: var(--eduloo-study-surface-border);
  --eduloo-fc-input-bg: var(--eduloo-study-filter-input-bg);
  --eduloo-fc-input-focus-bg: var(--eduloo-study-filter-input-bg-focus);
  --eduloo-fc-focus: var(--eduloo-study-filter-focus);
  --eduloo-fc-chip-bg: var(--eduloo-study-chip-bg);
  --eduloo-fc-chip-border: var(--eduloo-study-chip-border);
  --eduloo-fc-chip-text: var(--eduloo-study-chip-text);
  --eduloo-fc-empty-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 72%,
    color-mix(in srgb, var(--primary) 28%, transparent) 28%
  );
  --eduloo-fc-empty-border: color-mix(
    in srgb,
    var(--outline-variant) 48%,
    color-mix(in srgb, var(--primary) 34%, transparent) 52%
  );
  --eduloo-fc-card-bg: var(--eduloo-study-row-bg);
  --eduloo-fc-card-border: var(--eduloo-study-surface-border);
  --eduloo-fc-card-shadow: var(--eduloo-study-row-shadow);
  --eduloo-fc-editor-shell-bg: var(--eduloo-study-surface-soft);
  --eduloo-fc-editor-shell-border: var(--eduloo-study-surface-border);
  --eduloo-fc-editor-shell-shadow: 0 14px 22px -18px rgba(0, 0, 0, 0.44);
  --eduloo-fc-editor-input-bg: var(--eduloo-study-filter-input-bg);
  --eduloo-fc-editor-input-border: var(--eduloo-study-surface-border);
  --eduloo-fc-editor-btn-bg: var(--eduloo-study-btn-muted-bg);
  --eduloo-fc-editor-btn-bg-hover: var(--eduloo-study-btn-muted-bg-hover);
  --eduloo-fc-editor-btn-border: var(--eduloo-study-btn-muted-border);
  --eduloo-fc-editor-btn-text: var(--eduloo-study-btn-muted-text);
  --eduloo-fc-editor-save-bg: var(--eduloo-study-btn-primary-bg);
  --eduloo-fc-editor-save-bg-hover: var(--eduloo-study-btn-primary-bg-hover);
  --eduloo-fc-editor-save-shadow: var(--eduloo-study-btn-primary-shadow);
  --eduloo-fc-icon-rail-bg: var(--eduloo-study-surface-soft);
  --eduloo-fc-icon-rail-border: var(--eduloo-study-surface-border);
  --eduloo-fc-icon-btn-bg: var(--eduloo-study-btn-muted-bg);
  --eduloo-fc-icon-btn-bg-hover: var(--eduloo-study-btn-muted-bg-hover);
  --eduloo-fc-icon-btn-border: var(--eduloo-study-btn-muted-border);
  --eduloo-fc-icon-btn-border-strong: var(--eduloo-study-btn-secondary-border);
  --eduloo-fc-icon-btn-text: var(--eduloo-study-btn-muted-text);
  --eduloo-fc-icon-btn-primary-bg: var(--eduloo-study-btn-primary-bg);
  --eduloo-fc-icon-btn-primary-shadow: var(--eduloo-study-btn-primary-shadow);
  --eduloo-fc-icon-btn-primary-icon: color-mix(
    in srgb,
    var(--on-primary) 88%,
    color-mix(in srgb, var(--on-primary-container) 12%, transparent) 12%
  );
  --eduloo-fc-create-wrap-bg: var(--eduloo-study-surface-soft);
  --eduloo-fc-create-wrap-border: var(--eduloo-study-surface-border);
  --eduloo-fc-create-wrap-shadow: 0 16px 24px -20px rgba(0, 0, 0, 0.46);
  --eduloo-fc-create-primary-bg: var(--eduloo-study-btn-primary-bg);
  --eduloo-fc-create-primary-bg-hover: var(--eduloo-study-btn-primary-bg-hover);
  --eduloo-fc-create-primary-shadow: var(--eduloo-study-btn-primary-shadow);
  --eduloo-fc-create-secondary-bg: var(--eduloo-study-btn-secondary-bg);
  --eduloo-fc-create-secondary-bg-hover: var(
    --eduloo-study-btn-secondary-bg-hover
  );
  --eduloo-fc-create-secondary-border: var(--eduloo-study-btn-secondary-border);
  --eduloo-fc-create-secondary-text: var(--eduloo-study-btn-secondary-text);
  --eduloo-fc-create-locked-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 74%,
    color-mix(in srgb, var(--primary) 16%, transparent) 26%
  );
  --eduloo-fc-create-locked-text: color-mix(
    in srgb,
    var(--on-surface-variant) 88%,
    color-mix(in srgb, var(--on-primary-container) 12%, transparent) 12%
  );

  --eduloo-doc-shell-bg: var(--eduloo-study-shell-bg);
  --eduloo-doc-shell-shadow: var(--eduloo-study-shell-shadow);
  --eduloo-doc-title: var(--eduloo-study-title);
  --eduloo-doc-text: var(--eduloo-study-text);
  --eduloo-doc-muted: var(--eduloo-study-muted);
  --eduloo-doc-surface-soft: var(--eduloo-study-surface-soft);
  --eduloo-doc-surface-border: var(--eduloo-study-surface-border);
  --eduloo-doc-input-bg: var(--eduloo-study-filter-input-bg);
  --eduloo-doc-input-focus-bg: var(--eduloo-study-filter-input-bg-focus);
  --eduloo-doc-chip-bg: var(--eduloo-study-chip-bg);
  --eduloo-doc-chip-border: var(--eduloo-study-chip-border);
  --eduloo-doc-chip-text: var(--eduloo-study-chip-text);
  --eduloo-doc-upload-bg: var(--eduloo-study-surface-soft);
  --eduloo-doc-upload-border: var(--eduloo-study-surface-border);
  --eduloo-doc-dropzone-icon-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 66%,
    color-mix(in srgb, var(--primary) 34%, transparent) 34%
  );
  --eduloo-doc-dropzone-icon-text: color-mix(
    in srgb,
    var(--on-surface) 92%,
    color-mix(in srgb, var(--on-primary-container) 8%, transparent) 8%
  );
  --eduloo-doc-row-bg: var(--eduloo-study-row-bg);
  --eduloo-doc-row-border: var(--eduloo-study-surface-border);
  --eduloo-doc-row-shadow: var(--eduloo-study-row-shadow);
  --eduloo-doc-action-bg: var(--eduloo-study-btn-muted-bg);
  --eduloo-doc-action-bg-hover: var(--eduloo-study-btn-muted-bg-hover);
  --eduloo-doc-action-border: var(--eduloo-study-btn-muted-border);
  --eduloo-doc-action-border-strong: var(--eduloo-study-btn-secondary-border);
  --eduloo-doc-action-text: var(--eduloo-study-btn-muted-text);

  --eduloo-doc-mode-overlay-backdrop: color-mix(
    in srgb,
    black 62%,
    transparent
  );
  --eduloo-doc-mode-overlay-card-bg: linear-gradient(
    152deg,
    color-mix(
        in srgb,
        var(--surface-container-highest) 84%,
        color-mix(in srgb, var(--primary) 16%, transparent) 16%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-highest) 88%,
        color-mix(in srgb, var(--info) 10%, transparent) 12%
      )
      100%
  );
  --eduloo-doc-mode-overlay-card-border: color-mix(
    in srgb,
    var(--outline-variant) 56%,
    color-mix(in srgb, var(--primary) 28%, transparent) 44%
  );
  --eduloo-doc-mode-overlay-card-shadow: 0 34px 58px -38px rgba(0, 0, 0, 0.54);
  --eduloo-doc-mode-overlay-title: var(--eduloo-study-title);
  --eduloo-doc-mode-overlay-text: var(--eduloo-study-muted);
  --eduloo-doc-mode-overlay-btn-bg: var(--eduloo-study-btn-muted-bg);
  --eduloo-doc-mode-overlay-btn-bg-hover: var(
    --eduloo-study-btn-muted-bg-hover
  );
  --eduloo-doc-mode-overlay-btn-border: var(--eduloo-study-btn-muted-border);
  --eduloo-doc-mode-overlay-btn-border-hover: var(
    --eduloo-study-btn-secondary-border
  );
  --eduloo-doc-mode-overlay-btn-title: var(--eduloo-study-btn-muted-text);
  --eduloo-doc-mode-overlay-btn-text: var(--eduloo-study-muted);
  --eduloo-doc-mode-overlay-icon-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 64%,
    color-mix(in srgb, var(--primary) 30%, transparent) 36%
  );
  --eduloo-doc-mode-overlay-icon-text-auto: color-mix(
    in srgb,
    var(--on-surface) 92%,
    color-mix(in srgb, var(--on-primary-container) 8%, transparent) 8%
  );
  --eduloo-doc-mode-overlay-icon-text-manual: color-mix(
    in srgb,
    var(--on-surface) 92%,
    color-mix(in srgb, var(--info) 12%, transparent) 8%
  );
  --eduloo-doc-mode-overlay-apply-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 78%,
    color-mix(in srgb, var(--primary) 20%, transparent) 22%
  );
  --eduloo-doc-mode-overlay-apply-border: color-mix(
    in srgb,
    var(--outline-variant) 54%,
    color-mix(in srgb, var(--primary) 28%, transparent) 46%
  );
}

:root {
  --eduloo-study-btn-primary-flat-bg: color-mix(
    in srgb,
    var(--primary) 84%,
    var(--surface-container-lowest) 16%
  );
  --eduloo-study-btn-primary-flat-bg-hover: color-mix(
    in srgb,
    var(--primary) 92%,
    var(--surface-container-lowest) 8%
  );
  --eduloo-study-btn-primary-flat-border: color-mix(
    in srgb,
    var(--primary-container) 52%,
    transparent
  );
  --eduloo-study-btn-primary-flat-text: var(--on-primary);
  --eduloo-study-btn-primary-flat-shadow: 0 12px 20px -16px
    color-mix(in srgb, var(--primary) 42%, transparent);
}

body.theme-dark {
  --eduloo-study-btn-primary-flat-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 66%,
    var(--primary-container) 34%
  );
  --eduloo-study-btn-primary-flat-bg-hover: color-mix(
    in srgb,
    var(--surface-container-highest) 56%,
    var(--primary-container) 44%
  );
  --eduloo-study-btn-primary-flat-border: color-mix(
    in srgb,
    var(--outline-variant) 52%,
    var(--primary-container) 48%
  );
  --eduloo-study-btn-primary-flat-text: color-mix(
    in srgb,
    var(--on-surface) 94%,
    var(--on-primary) 6%
  );
  --eduloo-study-btn-primary-flat-shadow: 0 14px 22px -18px rgba(0, 0, 0, 0.48);
}

body.theme-dark {
  --eduloo-study-focus: color-mix(in srgb, var(--primary) 52%, transparent);
  --eduloo-study-filter-focus: color-mix(
    in srgb,
    var(--primary) 58%,
    transparent
  );
  --eduloo-study-shell-bg: linear-gradient(
    158deg,
    color-mix(in srgb, var(--surface-container-low) 90%, var(--surface-dim) 10%)
      0%,
    color-mix(
        in srgb,
        var(--surface-container) 84%,
        var(--surface-container-high) 16%
      )
      100%
  );
  --eduloo-study-shell-shadow: 0 12px 24px -16px rgba(0, 0, 0, 0.36);
  --eduloo-study-pane-bg: linear-gradient(
    150deg,
    color-mix(
        in srgb,
        var(--surface-container-high) 88%,
        var(--primary-container) 12%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-highest) 84%,
        var(--secondary-container) 16%
      )
      100%
  );
  --eduloo-study-pane-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.34);
  --eduloo-study-surface-soft: color-mix(
    in srgb,
    var(--surface-container-highest) 84%,
    var(--primary-container) 16%
  );
  --eduloo-study-surface-strong: color-mix(
    in srgb,
    var(--surface-container-highest) 72%,
    var(--primary-container) 28%
  );
  --eduloo-study-surface-border: color-mix(
    in srgb,
    var(--outline-variant) 78%,
    color-mix(in srgb, var(--on-surface) 20%, transparent) 22%
  );
  --eduloo-study-input-bg: color-mix(
    in srgb,
    var(--surface-container) 88%,
    var(--surface-container-low) 12%
  );
  --eduloo-study-input-bg-hover: color-mix(
    in srgb,
    var(--surface-container) 76%,
    var(--primary-container) 24%
  );
  --eduloo-study-input-bg-focus: color-mix(
    in srgb,
    var(--surface-container) 68%,
    var(--primary-container) 32%
  );
  --eduloo-study-input-border: color-mix(
    in srgb,
    var(--outline-variant) 76%,
    color-mix(in srgb, var(--on-surface) 18%, transparent) 24%
  );
  --eduloo-study-input-border-strong: color-mix(
    in srgb,
    var(--primary) 44%,
    var(--outline-variant) 56%
  );
  --eduloo-study-filter-input-bg: var(--eduloo-study-input-bg);
  --eduloo-study-filter-input-bg-hover: var(--eduloo-study-input-bg-hover);
  --eduloo-study-filter-input-bg-focus: var(--eduloo-study-input-bg-focus);
  --eduloo-study-filter-input-border: var(--eduloo-study-input-border);
  --eduloo-study-filter-input-border-strong: var(
    --eduloo-study-input-border-strong
  );
  --eduloo-study-filters-bg: var(--eduloo-study-surface-soft);
  --eduloo-study-filters-shadow: 0 10px 20px -14px rgba(0, 0, 0, 0.32);
  --eduloo-study-tabs-bg: color-mix(
    in srgb,
    var(--surface-container-high) 90%,
    var(--surface-container) 10%
  );
  --eduloo-study-tabs-shadow: 0 8px 18px -14px rgba(0, 0, 0, 0.34);
  --eduloo-study-tab-bg: var(--eduloo-study-tabs-bg);
  --eduloo-study-tab-shadow: var(--eduloo-study-tabs-shadow);
  --eduloo-study-tab-bg-hover: color-mix(
    in srgb,
    var(--surface-container-highest) 72%,
    var(--primary-container) 28%
  );
  --eduloo-study-tab-hover-bg: var(--eduloo-study-tab-bg-hover);
  --eduloo-study-tab-bg-active: linear-gradient(
    135deg,
    color-mix(in srgb, var(--primary) 48%, var(--surface-container-highest) 52%)
      0%,
    color-mix(in srgb, var(--secondary) 26%, var(--primary-container) 74%) 100%
  );
  --eduloo-study-tab-active-bg: var(--eduloo-study-tab-bg-active);
  --eduloo-study-tab-text: color-mix(
    in srgb,
    var(--on-surface-variant) 88%,
    var(--on-surface) 12%
  );
  --eduloo-study-tab-text-hover: color-mix(
    in srgb,
    var(--on-surface) 92%,
    var(--on-primary) 8%
  );
  --eduloo-study-tab-text-active: color-mix(
    in srgb,
    var(--on-surface) 96%,
    var(--on-primary) 4%
  );
  --eduloo-study-tab-active-text: var(--eduloo-study-tab-text-active);
  --eduloo-study-tab-icon: color-mix(
    in srgb,
    var(--on-surface) 86%,
    var(--primary) 14%
  );
  --eduloo-study-tab-shadow-active:
    inset 0 0 0 1px
      color-mix(
        in srgb,
        var(--primary) 62%,
        color-mix(in srgb, var(--on-surface) 38%, transparent) 38%
      ),
    0 6px 14px -10px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 color-mix(in srgb, var(--on-surface) 16%, transparent);
  --eduloo-study-tab-active-shadow: var(--eduloo-study-tab-shadow-active);
  --eduloo-study-btn-primary-bg: linear-gradient(
    136deg,
    color-mix(in srgb, var(--primary) 88%, var(--on-primary-container) 12%) 0%,
    color-mix(in srgb, var(--primary) 64%, var(--secondary) 36%) 100%
  );
  --eduloo-study-btn-primary-bg-hover: linear-gradient(
    136deg,
    color-mix(in srgb, var(--primary) 94%, var(--on-primary-container) 6%) 0%,
    color-mix(in srgb, var(--primary) 70%, var(--secondary) 30%) 100%
  );
  --eduloo-study-btn-primary-shadow: 0 12px 20px -12px
    color-mix(in srgb, var(--primary) 38%, black 62%);
  --eduloo-study-btn-secondary-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 82%,
    var(--secondary-container) 18%
  );
  --eduloo-study-btn-secondary-bg-hover: color-mix(
    in srgb,
    var(--surface-container-highest) 68%,
    var(--secondary-container) 32%
  );
  --eduloo-study-btn-secondary-border: color-mix(
    in srgb,
    var(--outline-variant) 74%,
    var(--secondary) 26%
  );
  --eduloo-study-btn-secondary-text: color-mix(
    in srgb,
    var(--on-surface) 94%,
    var(--on-primary) 6%
  );
  --eduloo-study-btn-muted-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 84%,
    var(--primary-container) 16%
  );
  --eduloo-study-btn-muted-bg-hover: color-mix(
    in srgb,
    var(--surface-container-highest) 70%,
    var(--primary-container) 30%
  );
  --eduloo-study-btn-muted-border: color-mix(
    in srgb,
    var(--outline-variant) 78%,
    color-mix(in srgb, var(--on-surface) 18%, transparent) 22%
  );
  --eduloo-study-btn-muted-text: color-mix(
    in srgb,
    var(--on-surface) 92%,
    var(--on-primary) 8%
  );
  --eduloo-study-chip-bg: color-mix(
    in srgb,
    var(--primary-container) 44%,
    var(--surface-container-highest) 56%
  );
  --eduloo-study-chip-border: color-mix(
    in srgb,
    var(--primary) 40%,
    var(--outline-variant) 60%
  );
  --eduloo-study-chip-text: color-mix(
    in srgb,
    var(--on-surface) 94%,
    var(--on-primary) 6%
  );
  --eduloo-study-row-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 86%,
    var(--primary-container) 14%
  );
  --eduloo-study-row-shadow: 0 8px 18px -14px rgba(0, 0, 0, 0.34);
  --eduloo-study-progress-track: color-mix(
    in srgb,
    var(--surface-container) 84%,
    var(--surface-container-low) 16%
  );
  --eduloo-study-progress-fill: linear-gradient(
    90deg,
    color-mix(in srgb, var(--primary) 90%, var(--on-primary-container) 10%) 0%,
    color-mix(in srgb, var(--primary) 62%, var(--secondary) 38%) 100%
  );
}

body.theme-dark {
  --eduloo-study-shell-bg: linear-gradient(
    160deg,
    color-mix(in srgb, var(--surface-container-low) 90%, var(--surface) 10%) 0%,
    color-mix(
        in srgb,
        var(--surface-container) 84%,
        var(--surface-container-low) 16%
      )
      100%
  );
  --eduloo-study-pane-bg: color-mix(
    in srgb,
    var(--surface-container-high) 86%,
    var(--primary-container) 14%
  );
  --eduloo-study-pane-shadow: var(--eduloo-dark-shadow-soft-sm);
  --eduloo-study-surface-soft: var(--eduloo-dark-surface-panel);
  --eduloo-study-surface-strong: color-mix(
    in srgb,
    var(--surface-container-highest) 72%,
    var(--primary-container) 28%
  );
  --eduloo-study-surface-border: color-mix(
    in srgb,
    var(--outline-variant) 72%,
    color-mix(in srgb, var(--on-surface) 28%, transparent) 28%
  );
  --eduloo-study-input-bg: var(--eduloo-input-inset-bg);
  --eduloo-study-input-bg-hover: color-mix(
    in srgb,
    var(--eduloo-input-inset-bg) 72%,
    var(--primary-container) 28%
  );
  --eduloo-study-input-bg-focus: color-mix(
    in srgb,
    var(--eduloo-input-inset-bg) 64%,
    var(--primary-container) 36%
  );
  --eduloo-study-input-border: var(--eduloo-input-inset-border);
  --eduloo-study-input-border-strong: color-mix(
    in srgb,
    var(--outline-variant) 54%,
    var(--primary) 46%
  );
  --eduloo-study-filter-input-bg: var(--eduloo-study-input-bg);
  --eduloo-study-filter-input-bg-hover: var(--eduloo-study-input-bg-hover);
  --eduloo-study-filter-input-bg-focus: var(--eduloo-study-input-bg-focus);
  --eduloo-study-filter-input-border: var(--eduloo-study-input-border);
  --eduloo-study-filter-input-border-strong: var(
    --eduloo-study-input-border-strong
  );
  --eduloo-study-filter-focus: color-mix(
    in srgb,
    var(--primary) 56%,
    transparent
  );
  --eduloo-study-tabs-bg: color-mix(
    in srgb,
    var(--surface-container-high) 90%,
    var(--surface-container) 10%
  );
  --eduloo-study-tab-bg: var(--eduloo-study-tabs-bg);
  --eduloo-study-tab-bg-hover: color-mix(
    in srgb,
    var(--surface-container-highest) 72%,
    var(--primary-container) 28%
  );
  --eduloo-study-tab-bg-active: linear-gradient(
    135deg,
    color-mix(in srgb, var(--primary) 52%, var(--surface-container-highest) 48%)
      0%,
    color-mix(in srgb, var(--primary) 74%, var(--secondary) 26%) 100%
  );
  --eduloo-study-tab-active-bg: var(--eduloo-study-tab-bg-active);
  --eduloo-study-tab-text: color-mix(
    in srgb,
    var(--on-surface-variant) 88%,
    var(--on-surface) 12%
  );
  --eduloo-study-tab-text-active: var(--on-surface);
  --eduloo-study-tab-active-text: var(--on-surface);
  --eduloo-study-tab-shadow-active:
    inset 0 0 0 1px
      color-mix(
        in srgb,
        var(--primary) 66%,
        color-mix(in srgb, var(--on-surface) 34%, transparent) 34%
      ),
    inset 0 1px 0 color-mix(in srgb, var(--on-surface) 14%, transparent);
  --eduloo-study-tab-active-shadow: var(--eduloo-study-tab-shadow-active);
  --eduloo-study-chip-bg: color-mix(
    in srgb,
    var(--primary-container) 48%,
    var(--surface-container-highest) 52%
  );
  --eduloo-study-chip-border: color-mix(
    in srgb,
    var(--primary) 42%,
    var(--outline-variant) 58%
  );
  --eduloo-study-chip-text: var(--on-surface);
  --eduloo-study-progress-fill: var(--eduloo-progress-gradient);
  --eduloo-study-btn-muted-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 84%,
    var(--primary-container) 16%
  );
  --eduloo-study-btn-muted-bg-hover: color-mix(
    in srgb,
    var(--surface-container-highest) 68%,
    var(--primary-container) 32%
  );
  --eduloo-study-btn-muted-border: color-mix(
    in srgb,
    var(--outline-variant) 78%,
    color-mix(in srgb, var(--on-surface) 20%, transparent) 22%
  );
  --eduloo-study-btn-secondary-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 80%,
    var(--secondary-container) 20%
  );
  --eduloo-study-btn-secondary-bg-hover: color-mix(
    in srgb,
    var(--surface-container-highest) 66%,
    var(--secondary-container) 34%
  );
  --eduloo-study-btn-secondary-border: color-mix(
    in srgb,
    var(--outline-variant) 70%,
    var(--secondary) 30%
  );
  --eduloo-study-btn-primary-bg: linear-gradient(
    136deg,
    color-mix(in srgb, var(--primary) 90%, var(--on-primary-container) 10%) 0%,
    color-mix(in srgb, var(--primary) 70%, var(--secondary) 30%) 100%
  );
  --eduloo-study-btn-primary-bg-hover: linear-gradient(
    136deg,
    color-mix(in srgb, var(--primary) 96%, var(--on-primary-container) 4%) 0%,
    color-mix(in srgb, var(--primary) 74%, var(--secondary) 26%) 100%
  );
  --eduloo-study-btn-primary-shadow: 0 10px 18px -10px
    color-mix(in srgb, var(--primary) 34%, black 66%);
}

body.theme-dark {
  --eduloo-study-shell-bg: linear-gradient(
    160deg,
    color-mix(in srgb, var(--surface-container-low) 90%, var(--surface) 10%) 0%,
    color-mix(
        in srgb,
        var(--surface-container) 84%,
        var(--surface-container-low) 16%
      )
      100%
  );
  --eduloo-study-pane-bg: color-mix(
    in srgb,
    var(--surface-container-high) 86%,
    var(--primary-container) 14%
  );
  --eduloo-study-surface-soft: color-mix(
    in srgb,
    var(--surface-container-highest) 78%,
    var(--surface-container-high) 22%
  );
  --eduloo-study-surface-border: color-mix(
    in srgb,
    var(--outline-variant) 72%,
    color-mix(in srgb, var(--on-surface) 28%, transparent) 28%
  );
  --eduloo-study-input-bg: var(--eduloo-input-unified-bg);
  --eduloo-study-input-bg-hover: var(--eduloo-input-unified-bg-hover);
  --eduloo-study-input-bg-focus: var(--eduloo-input-unified-bg-focus);
  --eduloo-study-input-border: var(--eduloo-input-unified-border);
  --eduloo-study-input-border-strong: var(--eduloo-input-unified-border-focus);
  --eduloo-study-tab-active-bg: linear-gradient(
    135deg,
    color-mix(in srgb, var(--primary) 92%, var(--on-primary-container) 8%) 0%,
    color-mix(in srgb, var(--primary) 76%, var(--secondary) 24%) 100%
  );
  --eduloo-study-tab-active-text: var(--on-primary-container);
}

body.theme-dark {
  --eduloo-study-shell-bg: color-mix(
    in srgb,
    var(--surface-container-low) 88%,
    var(--surface-container) 12%
  );
  --eduloo-study-pane-bg: color-mix(
    in srgb,
    var(--surface-container-high) 86%,
    var(--primary-container) 14%
  );
  --eduloo-study-surface-border: color-mix(
    in srgb,
    var(--outline-variant) 72%,
    color-mix(in srgb, var(--on-surface) 28%, transparent) 28%
  );
  --eduloo-study-pane-border: var(--eduloo-study-surface-border);
  --eduloo-study-pane-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.34);
  --eduloo-study-inner-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 78%,
    var(--surface-container-high) 22%
  );
  --eduloo-study-inner-border: var(--eduloo-study-surface-border);
  --eduloo-study-tab-bg: transparent;
  --eduloo-study-tab-bg-hover: color-mix(
    in srgb,
    var(--surface-container-highest) 58%,
    var(--primary-container) 42%
  );
  --eduloo-study-tab-bg-active: linear-gradient(
    136deg,
    color-mix(in srgb, var(--primary) 72%, var(--surface-container-highest) 28%)
      0%,
    color-mix(in srgb, var(--primary) 56%, var(--secondary) 44%) 100%
  );
  --eduloo-study-tab-border: color-mix(
    in srgb,
    var(--outline-variant) 54%,
    transparent 46%
  );
  --eduloo-study-tab-border-hover: color-mix(
    in srgb,
    var(--outline-variant) 40%,
    var(--primary) 60%
  );
  --eduloo-study-tab-border-active: color-mix(
    in srgb,
    var(--primary) 68%,
    color-mix(in srgb, var(--on-surface) 32%, transparent) 32%
  );
  --eduloo-study-cta-bg: linear-gradient(
    136deg,
    color-mix(in srgb, var(--primary) 84%, var(--surface-container-highest) 16%)
      0%,
    color-mix(in srgb, var(--primary) 68%, var(--secondary) 32%) 100%
  );
  --eduloo-study-cta-bg-hover: linear-gradient(
    136deg,
    color-mix(in srgb, var(--primary) 88%, var(--surface-container-highest) 12%)
      0%,
    color-mix(in srgb, var(--primary) 72%, var(--secondary) 28%) 100%
  );
  --eduloo-study-cta-bg-active: linear-gradient(
    136deg,
    color-mix(in srgb, var(--primary) 80%, var(--surface-container-highest) 20%)
      0%,
    color-mix(in srgb, var(--primary) 64%, var(--secondary) 36%) 100%
  );
  --eduloo-study-cta-border: color-mix(
    in srgb,
    var(--primary) 58%,
    color-mix(in srgb, var(--on-surface) 30%, transparent) 42%
  );
  --eduloo-study-cta-border-hover: color-mix(
    in srgb,
    var(--primary) 66%,
    color-mix(in srgb, var(--on-surface) 30%, transparent) 34%
  );
  --eduloo-study-cta-text: var(--on-primary-container);
  --eduloo-study-cta-shadow: 0 10px 18px -12px
    color-mix(in srgb, var(--primary) 28%, transparent);
}

:root {
  --eduloo-qz-row-border: color-mix(
    in srgb,
    var(--eduloo-study-surface-border) 92%,
    transparent
  );
  --eduloo-qz-row-border-strong: color-mix(
    in srgb,
    var(--primary-container) 54%,
    var(--eduloo-study-surface-border) 46%
  );
  --eduloo-qz-row-shadow: 0 16px 28px -24px
    color-mix(in srgb, var(--on-surface) 46%, transparent);
  --eduloo-qz-row-shadow-hover: 0 24px 34px -24px
    color-mix(in srgb, var(--primary) 30%, transparent);
  --eduloo-qz-row-accent: linear-gradient(
    180deg,
    color-mix(in srgb, var(--primary) 30%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 22%, transparent) 100%
  );
  --eduloo-qz-meta-text: color-mix(
    in srgb,
    var(--eduloo-study-muted) 92%,
    var(--eduloo-study-text) 8%
  );
  --eduloo-qz-title: var(--eduloo-study-title);
  --eduloo-qz-status-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 80%,
    var(--primary-container) 20%
  );
  --eduloo-qz-status-border: color-mix(
    in srgb,
    var(--outline-variant) 44%,
    transparent
  );
  --eduloo-qz-status-text: color-mix(
    in srgb,
    var(--on-surface) 86%,
    var(--primary) 14%
  );
  --eduloo-qz-count-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 76%,
    var(--primary-container) 24%
  );
  --eduloo-qz-count-border: color-mix(
    in srgb,
    var(--outline-variant) 46%,
    transparent
  );
  --eduloo-qz-count-text: color-mix(
    in srgb,
    var(--on-surface) 88%,
    var(--primary) 12%
  );
  --eduloo-qz-type-bg: var(--eduloo-study-chip-bg);
  --eduloo-qz-type-border: var(--eduloo-study-chip-border);
  --eduloo-qz-type-text: var(--eduloo-study-chip-text);
  --eduloo-qz-session-bg: color-mix(
    in srgb,
    var(--eduloo-study-surface-soft) 76%,
    var(--eduloo-study-surface-strong) 24%
  );
  --eduloo-qz-session-border: color-mix(
    in srgb,
    var(--eduloo-study-surface-border) 86%,
    transparent
  );
  --eduloo-qz-score-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 74%,
    var(--primary-container) 26%
  );
  --eduloo-qz-score-border: color-mix(
    in srgb,
    var(--outline-variant) 48%,
    transparent
  );
  --eduloo-qz-icon-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 78%,
    var(--primary-container) 22%
  );
  --eduloo-qz-icon-bg-hover: color-mix(
    in srgb,
    var(--surface-container-lowest) 62%,
    var(--primary-container) 38%
  );
  --eduloo-qz-icon-border: color-mix(
    in srgb,
    var(--outline-variant) 46%,
    transparent
  );
  --eduloo-qz-icon-border-hover: color-mix(
    in srgb,
    var(--primary) 52%,
    var(--outline-variant) 48%
  );
  --eduloo-qz-icon-text: color-mix(
    in srgb,
    var(--on-surface) 88%,
    var(--primary) 12%
  );
  --eduloo-qz-neutral-btn-bg: var(--eduloo-study-btn-muted-bg);
  --eduloo-qz-neutral-btn-bg-hover: var(--eduloo-study-btn-muted-bg-hover);
  --eduloo-qz-neutral-btn-border: var(--eduloo-study-btn-muted-border);
  --eduloo-qz-neutral-btn-text: var(--eduloo-study-btn-muted-text);
  --eduloo-qz-edit-btn-bg: var(--eduloo-study-btn-secondary-bg);
  --eduloo-qz-edit-btn-bg-hover: var(--eduloo-study-btn-secondary-bg-hover);
  --eduloo-qz-edit-btn-border: var(--eduloo-study-btn-secondary-border);
  --eduloo-qz-edit-btn-text: var(--eduloo-study-btn-secondary-text);
  --eduloo-qz-start-btn-bg: var(--eduloo-study-btn-primary-flat-bg);
  --eduloo-qz-start-btn-bg-hover: var(--eduloo-study-btn-primary-flat-bg-hover);
  --eduloo-qz-start-btn-text: color-mix(
    in srgb,
    var(--on-primary) 90%,
    var(--surface-container-lowest) 10%
  );
  --eduloo-qz-start-btn-shadow: 0 12px 20px -16px
    color-mix(in srgb, var(--primary) 60%, transparent);
  --eduloo-qz-status-ready-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 72%,
    var(--eduloo-study-success) 28%
  );
  --eduloo-qz-status-ready-border: color-mix(
    in srgb,
    var(--eduloo-study-success) 56%,
    transparent
  );
  --eduloo-qz-status-progress-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 72%,
    var(--secondary-container) 28%
  );
  --eduloo-qz-status-progress-border: color-mix(
    in srgb,
    var(--secondary) 56%,
    transparent
  );
  --eduloo-qz-status-pending-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 72%,
    var(--primary-container) 28%
  );
  --eduloo-qz-status-pending-border: color-mix(
    in srgb,
    var(--primary) 56%,
    transparent
  );
  --eduloo-qz-status-failed-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 72%,
    var(--error, var(--danger)) 28%
  );
  --eduloo-qz-status-failed-border: color-mix(
    in srgb,
    var(--error, var(--danger)) 56%,
    transparent
  );
}

body.theme-dark {
  --eduloo-qz-row-border: color-mix(
    in srgb,
    var(--eduloo-study-surface-border) 96%,
    transparent
  );
  --eduloo-qz-row-border-strong: color-mix(
    in srgb,
    var(--primary-container) 60%,
    var(--eduloo-study-surface-border) 40%
  );
  --eduloo-qz-row-shadow: 0 20px 30px -22px
    color-mix(in srgb, black 72%, transparent);
  --eduloo-qz-row-shadow-hover: 0 28px 38px -24px
    color-mix(in srgb, var(--primary) 34%, transparent);
  --eduloo-qz-row-accent: linear-gradient(
    180deg,
    color-mix(in srgb, var(--primary) 46%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 34%, transparent) 100%
  );
  --eduloo-qz-status-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 64%,
    var(--primary-container) 36%
  );
  --eduloo-qz-status-border: color-mix(
    in srgb,
    var(--primary-container) 56%,
    var(--outline-variant) 44%
  );
  --eduloo-qz-status-text: color-mix(
    in srgb,
    var(--on-surface) 92%,
    var(--primary-container) 8%
  );
  --eduloo-qz-count-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 66%,
    var(--primary-container) 34%
  );
  --eduloo-qz-count-border: color-mix(
    in srgb,
    var(--primary-container) 58%,
    var(--outline-variant) 42%
  );
  --eduloo-qz-count-text: color-mix(
    in srgb,
    var(--on-surface) 92%,
    var(--primary-container) 8%
  );
  --eduloo-qz-session-bg: color-mix(
    in srgb,
    var(--surface-container-high) 62%,
    var(--primary-container) 38%
  );
  --eduloo-qz-session-border: color-mix(
    in srgb,
    var(--eduloo-study-surface-border) 98%,
    transparent
  );
  --eduloo-qz-score-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 58%,
    var(--primary-container) 42%
  );
  --eduloo-qz-score-border: color-mix(
    in srgb,
    var(--primary-container) 62%,
    var(--outline-variant) 38%
  );
  --eduloo-qz-icon-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 64%,
    var(--secondary-container) 36%
  );
  --eduloo-qz-icon-bg-hover: color-mix(
    in srgb,
    var(--surface-container-highest) 50%,
    var(--secondary-container) 50%
  );
  --eduloo-qz-icon-border: color-mix(
    in srgb,
    var(--secondary-container) 58%,
    var(--outline-variant) 42%
  );
  --eduloo-qz-icon-border-hover: color-mix(
    in srgb,
    var(--secondary) 62%,
    var(--outline-variant) 38%
  );
  --eduloo-qz-icon-text: color-mix(
    in srgb,
    var(--on-surface) 94%,
    var(--secondary-container) 6%
  );
  --eduloo-qz-start-btn-text: color-mix(
    in srgb,
    var(--on-surface) 94%,
    var(--on-primary) 6%
  );
  --eduloo-qz-start-btn-shadow: 0 14px 24px -16px
    color-mix(in srgb, var(--primary) 58%, transparent);
  --eduloo-qz-status-ready-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 64%,
    var(--eduloo-study-success) 36%
  );
  --eduloo-qz-status-progress-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 64%,
    var(--secondary-container) 36%
  );
  --eduloo-qz-status-pending-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 64%,
    var(--primary-container) 36%
  );
  --eduloo-qz-status-failed-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 64%,
    var(--error, var(--danger)) 36%
  );
}

:root {
  --eduloo-qz-meta-utility-text: color-mix(
    in srgb,
    var(--on-surface) 84%,
    var(--on-surface-variant) 16%
  );
  --eduloo-qz-session-score-text: color-mix(
    in srgb,
    var(--primary) 74%,
    var(--on-surface) 26%
  );
  --eduloo-qz-session-surface: color-mix(
    in srgb,
    var(--surface-container-lowest) 74%,
    var(--secondary-container) 26%
  );
  --eduloo-qz-type-bg-soft: color-mix(
    in srgb,
    var(--surface-container-highest) 78%,
    var(--secondary-container) 22%
  );
  --eduloo-qz-type-text-soft: color-mix(
    in srgb,
    var(--on-surface-variant) 86%,
    var(--on-surface) 14%
  );
  --eduloo-qz-options-bg: color-mix(
    in srgb,
    var(--secondary-container) 68%,
    var(--surface-container-lowest) 32%
  );
  --eduloo-qz-options-border: color-mix(
    in srgb,
    var(--outline-variant) 62%,
    transparent
  );
  --eduloo-qz-options-text: color-mix(
    in srgb,
    var(--on-surface) 88%,
    var(--secondary) 12%
  );
}

body.theme-dark {
  --eduloo-qz-meta-utility-text: color-mix(
    in srgb,
    var(--on-surface) 90%,
    var(--on-surface-variant) 10%
  );
  --eduloo-qz-session-score-text: color-mix(
    in srgb,
    var(--primary) 68%,
    var(--on-surface) 32%
  );
  --eduloo-qz-session-surface: color-mix(
    in srgb,
    var(--surface-container-high) 70%,
    var(--primary-container) 30%
  );
  --eduloo-qz-type-bg-soft: color-mix(
    in srgb,
    var(--surface-container-highest) 72%,
    var(--primary-container) 28%
  );
  --eduloo-qz-type-text-soft: color-mix(
    in srgb,
    var(--on-surface-variant) 80%,
    var(--on-surface) 20%
  );
  --eduloo-qz-options-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 68%,
    var(--secondary-container) 32%
  );
  --eduloo-qz-options-border: color-mix(
    in srgb,
    var(--secondary-container) 62%,
    var(--outline-variant) 38%
  );
}

.st-tabs {
  display: flex;
  gap: 4px;
  background: var(--card-bg);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 0;
}

.st-tab {
  flex: 1;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted-text);
  text-decoration: none;
}

.st-tab-icon {
  display: none;
  font-size: 14px;
  margin-right: 0 !important;
}

.st-tab--active {
  background: #ede9fe;
  color: #5b21b6;
}

body.theme-dark .st-tab--active {
  background: #2a3550;
  color: #c4b5fd;
}

body .st-container.st-fs-container .st-tabs {
  margin: 0 !important;
  padding: 8px !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px !important;
  border: none !important;
  border-radius: 24px !important;
  background: var(--eduloo-study-tabs-bg) !important;
  box-shadow:
    inset 0 0 0 1px var(--eduloo-study-filter-input-border),
    var(--eduloo-study-tabs-shadow) !important;
}

body .st-container.st-fs-container .st-tabs .st-tab {
  min-height: 50px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: none !important;
  border-radius: 18px !important;
  background: transparent !important;
  color: var(--eduloo-study-tab-text) !important;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  transition:
    background 220ms ease,
    color 220ms ease,
    transform 220ms ease,
    box-shadow 220ms ease;
}

body .st-container.st-fs-container .st-tabs .st-tab .st-tab-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 16px;
  min-width: 16px;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1;
  color: var(--eduloo-study-tab-icon) !important;
}

body .st-container.st-fs-container .st-tabs .st-tab .st-tab-label {
  display: inline-block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body .st-container.st-fs-container .st-tabs .st-tab:hover {
  background: var(--eduloo-study-tab-hover-bg) !important;
  color: var(--eduloo-study-tab-text-hover) !important;
  transform: translateY(-1px);
}

body .st-container.st-fs-container .st-tabs .st-tab:hover .st-tab-icon {
  color: var(--eduloo-study-tab-text-hover) !important;
}

body .st-container.st-fs-container .st-tabs .st-tab:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--eduloo-study-filter-focus) !important;
}

body .st-container.st-fs-container .st-tabs .st-tab.st-tab--active {
  background: var(--eduloo-study-tab-active-bg) !important;
  color: var(--eduloo-study-tab-active-text) !important;
  box-shadow: var(--eduloo-study-tab-active-shadow) !important;
}

body
  .st-container.st-fs-container
  .st-tabs
  .st-tab.st-tab--active
  .st-tab-icon {
  color: var(--eduloo-study-tab-active-text) !important;
}

body .st-container.st-fs-container .st-tabs .st-tab {
  min-height: 50px !important;
  border-radius: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: var(--eduloo-study-tab-text) !important;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body .st-container.st-fs-container .st-tabs .st-tab:hover {
  background: var(--eduloo-study-tab-hover-bg) !important;
  color: var(--eduloo-study-tab-text-hover) !important;
}

body .st-container.st-fs-container .st-tabs {
  margin: 0 !important;
  padding: 8px !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px !important;
  border: none !important;
  border-radius: 24px !important;
  background: var(--eduloo-study-tab-bg) !important;
  box-shadow:
    inset 0 0 0 1px var(--eduloo-study-toolbar-border),
    var(--eduloo-study-tab-shadow) !important;
}

body .st-container.st-fs-container .st-tabs .st-tab {
  min-height: 50px !important;
  border: none !important;
  border-radius: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: var(--eduloo-study-tab-text) !important;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px !important;
  font-weight: 700 !important;
  transition:
    background 220ms ease,
    color 220ms ease,
    box-shadow 220ms ease;
}

body .st-container.st-fs-container .st-tabs .st-tab .st-tab-icon {
  color: var(--eduloo-study-tab-icon) !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

body .st-container.st-fs-container .st-tabs .st-tab:hover {
  background: var(--eduloo-study-tab-bg-hover) !important;
  color: var(--eduloo-study-tab-text-hover) !important;
}

body .st-container.st-fs-container .st-tabs .st-tab.st-tab--active {
  background: var(--eduloo-study-tab-bg-active) !important;
  color: var(--eduloo-study-tab-text-active) !important;
  box-shadow: var(--eduloo-study-tab-shadow-active) !important;
}

body
  .st-container.st-fs-container
  .st-tabs
  .st-tab.st-tab--active
  .st-tab-icon {
  color: currentColor !important;
}

body .st-container.st-fs-container .st-tabs.st-tabs--study {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body .st-container.st-fs-container .st-tabs.st-tabs--study::-webkit-scrollbar {
  display: none;
}

body.theme-dark .st-container.st-fs-container .st-tabs {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.theme-dark .st-container.st-fs-container .st-tabs,
body.theme-dark .st-container.st-fs-container .st-tabs.st-tabs--study,
body.theme-dark
  .st-container.st-fs-container
  .st-study-tabs-wrap
  .st-tabs.st-tabs--study {
  background: color-mix(
    in srgb,
    var(--surface-container) 78%,
    var(--surface-container-low) 22%
  ) !important;
  border: 1px solid color-mix(in srgb, var(--outline-variant) 52%, transparent) !important;
  border-radius: 22px !important;
  box-shadow: inset 0 1px 0
    color-mix(in srgb, var(--on-surface) 5%, transparent) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 6px !important;
}

body.theme-dark .st-container.st-fs-container .st-tabs .st-tab,
body.theme-dark .st-container.st-fs-container .st-tabs.st-tabs--study .st-tab,
body.theme-dark
  .st-container.st-fs-container
  .st-study-tabs-wrap
  .st-tabs.st-tabs--study
  .st-tab {
  background: var(--eduloo-study-tab-bg) !important;
  border: 1px solid var(--eduloo-study-tab-border) !important;
  border-radius: 16px !important;
  color: color-mix(
    in srgb,
    var(--on-surface) 72%,
    var(--on-surface-variant) 28%
  ) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease !important;
}

body.theme-dark .st-container.st-fs-container .st-tabs .st-tab:hover,
body.theme-dark
  .st-container.st-fs-container
  .st-tabs.st-tabs--study
  .st-tab:hover,
body.theme-dark
  .st-container.st-fs-container
  .st-study-tabs-wrap
  .st-tabs.st-tabs--study
  .st-tab:hover {
  background: var(--eduloo-study-tab-bg-hover) !important;
  border-color: var(--eduloo-study-tab-border-hover) !important;
  color: var(--eduloo-text-title) !important;
  box-shadow: inset 0 1px 0
    color-mix(in srgb, var(--on-surface) 8%, transparent) !important;
  filter: none !important;
  transform: none !important;
}

body.theme-dark .st-container.st-fs-container .st-tabs .st-tab.st-tab--active,
body.theme-dark
  .st-container.st-fs-container
  .st-tabs.st-tabs--study
  .st-tab.st-tab--active,
body.theme-dark
  .st-container.st-fs-container
  .st-study-tabs-wrap
  .st-tabs.st-tabs--study
  .st-tab.st-tab--active {
  background: var(--eduloo-study-tab-bg-active) !important;
  border-color: var(--eduloo-study-tab-border-active) !important;
  color: var(--on-primary) !important;
  font-weight: 800 !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--on-surface) 20%, transparent),
    0 6px 18px -6px color-mix(in srgb, var(--primary) 44%, transparent) !important;
}

body.theme-dark .st-container.st-fs-container .st-tabs .st-tab .st-tab-icon,
body.theme-dark
  .st-container.st-fs-container
  .st-tabs.st-tabs--study
  .st-tab
  .st-tab-icon {
  color: currentColor !important;
}

body.theme-dark
  .st-container.st-fs-container
  .st-tabs
  .st-tab.st-tab--active
  .st-tab-icon,
body.theme-dark
  .st-container.st-fs-container
  .st-tabs.st-tabs--study
  .st-tab.st-tab--active
  .st-tab-icon {
  color: var(--on-primary) !important;
}