body.theme-dark
  .st-pane.st-pane--summaries
  .st-sum-actions
  [data-summary-row-options-trigger].button.button-secondary.st-btn.st-btn--only-icon:active:not(
    :disabled
  ) {
  background: color-mix(
    in srgb,
    var(--surface-container-highest) 78%,
    var(--tertiary-container) 22%
  ) !important;
  transform: scale(0.97) !important;
}

body.theme-dark
  .st-pane.st-pane--summaries
  .st-doc-status-line
  > span:first-child {
  color: color-mix(
    in srgb,
    var(--on-surface) 74%,
    var(--on-surface-variant) 26%
  ) !important;
}

body.theme-dark
  .st-pane.st-pane--summaries
  .st-sum-row[data-summary-status='ready']
  .st-doc-status-line {
  border-color: color-mix(
    in srgb,
    var(--eduloo-study-success) 40%,
    var(--eduloo-sum-status-border) 60%
  ) !important;
}

body.theme-dark
  .st-pane.st-pane--summaries
  .st-sum-row[data-summary-status='ready']
  .st-doc-status-line
  .st-doc-status-value {
  color: var(--eduloo-study-success) !important;
}

body.theme-dark
  .st-pane.st-pane--summaries
  .st-sum-row[data-summary-status='failed']
  .st-doc-status-line {
  border-color: color-mix(
    in srgb,
    var(--eduloo-study-danger) 42%,
    var(--eduloo-sum-status-border) 58%
  ) !important;
}

body.theme-dark
  .st-pane.st-pane--summaries
  .st-sum-row[data-summary-status='failed']
  .st-doc-status-line
  .st-doc-status-value {
  color: var(--eduloo-study-danger) !important;
}

body.theme-dark
  .st-pane.st-pane--summaries
  .st-sum-row[data-summary-status='pending']
  .st-doc-status-line
  .st-doc-status-value,
body.theme-dark
  .st-pane.st-pane--summaries
  .st-sum-row[data-summary-status='running']
  .st-doc-status-line
  .st-doc-status-value,
body.theme-dark
  .st-pane.st-pane--summaries
  .st-sum-row[data-summary-status='generating']
  .st-doc-status-line
  .st-doc-status-value {
  color: color-mix(
    in srgb,
    var(--tertiary) 70%,
    var(--on-surface) 30%
  ) !important;
}

body.theme-dark
  .st-pane.st-pane--summaries
  .st-sum-actions
  .st-sum-preview-btn {
  border-color: var(--eduloo-sum-preview-border) !important;
  background: var(--eduloo-sum-preview-bg) !important;
  color: var(--eduloo-sum-preview-text) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--on-surface) 18%, transparent),
    0 6px 18px -6px color-mix(in srgb, var(--primary) 42%, transparent) !important;
}

body.theme-dark
  .st-pane.st-pane--summaries
  .st-sum-actions
  .st-sum-preview-btn:hover:not(:disabled),
body.theme-dark
  .st-pane.st-pane--summaries
  .st-sum-actions
  .st-sum-preview-btn:focus-visible {
  background: var(--eduloo-sum-preview-bg-hover) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--on-surface) 22%, transparent),
    0 8px 24px -6px color-mix(in srgb, var(--primary) 50%, transparent),
    0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent) !important;
}

body.theme-dark
  .st-pane.st-pane--summaries
  .st-sum-actions
  .st-sum-preview-btn:active:not(:disabled) {
  transform: scale(0.97) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--on-surface) 14%, transparent),
    0 3px 10px -4px color-mix(in srgb, var(--primary) 34%, transparent) !important;
}

@media (max-width: 750px) {
  body .st-pane.st-pane--summaries .st-sum-grid {
    gap: 10px !important;
  }

  body .st-pane.st-pane--summaries .st-sum-row {
    padding: 14px !important;
    border-radius: 14px !important;
    gap: 12px;
  }
}

@media (max-width: 520px) {
  body .st-pane.st-pane--summaries .st-sum-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 36px;
    flex-direction: unset !important;
    align-items: center;
    gap: 8px;
  }

  body .st-pane.st-pane--summaries .st-sum-actions .st-btn--only-icon {
    justify-self: end;
    margin-left: 0 !important;
  }

  body .st-pane.st-pane--summaries .st-sum-actions .st-sum-preview-btn {
    width: 100%;
    min-width: 0;
  }
}

body .st-pane.st-pane--quizzes .st-qz-list {
  gap: 14px;
}

body .st-pane.st-pane--quizzes .st-qz-toolbar::before {
  content: none;
}

body .st-pane.st-pane--quizzes .st-qz-toolbar {
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
}

body .st-pane.st-pane--quizzes .st-qz-toolbar .st-search-field {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
}

body[class] .st-pane .st-search-field .search-field__input {
  width: 100% !important;
  min-height: 46px !important;
  height: 46px !important;
  padding: 0 16px 0 40px !important;
  border-radius: 14px !important;
  background: var(--eduloo-study-filter-input-bg) !important;
  border: 1px solid color-mix(in srgb, var(--outline-variant) 70%, transparent) !important;
  box-shadow:
    inset 0 1px 2px color-mix(in srgb, var(--on-surface) 7%, transparent),
    0 1px 0 color-mix(in srgb, var(--on-surface) 3%, transparent) !important;
  font-size: 14px !important;
  transition:
    background 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    color 220ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

body[class]
  .st-pane
  .st-search-field
  .search-field__input:hover:not([disabled]):not([aria-disabled='true']) {
  background: var(--eduloo-study-filter-input-bg-hover) !important;
  border-color: color-mix(in srgb, var(--primary) 42%, transparent) !important;
  box-shadow: inset 0 1px 2px
    color-mix(in srgb, var(--on-surface) 6%, transparent) !important;
}

body[class] .st-pane .st-search-field .search-field__input:focus,
body[class] .st-pane .st-search-field .search-field__input:focus-visible {
  outline: none !important;
  background: var(--eduloo-study-filter-input-bg-focus) !important;
  border-color: color-mix(
    in srgb,
    var(--outline-variant) 70%,
    transparent
  ) !important;
  box-shadow: inset 0 1px 2px
    color-mix(in srgb, var(--on-surface) 6%, transparent) !important;
}

body .st-pane.st-pane--quizzes .st-qz-toolbar .st-create-actions {
  flex: 0 0 auto !important;
  width: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  grid-template-columns: none !important;
}

body
  .st-pane.st-pane--quizzes
  .st-qz-toolbar
  .st-create-actions
  .button-primary.st-btn {
  flex: 1 1 auto;
  width: 100% !important;
  background: var(--primary) !important;
  color: var(--on-primary) !important;
  border-color: color-mix(
    in srgb,
    var(--primary) 80%,
    var(--on-surface) 20%
  ) !important;
  box-shadow:
    0 10px 22px -14px color-mix(in srgb, var(--primary) 70%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

body
  .st-pane.st-pane--quizzes
  .st-qz-toolbar
  .st-create-actions
  .button-primary.st-btn:hover:not(:disabled),
body
  .st-pane.st-pane--quizzes
  .st-qz-toolbar
  .st-create-actions
  .button-primary.st-btn:focus-visible {
  background: color-mix(
    in srgb,
    var(--primary) 88%,
    var(--on-surface) 12%
  ) !important;
  color: var(--on-primary) !important;
}

body.theme-dark .st-pane.st-pane--quizzes .st-qz-toolbar .st-create-actions {
  border: none !important;
  box-shadow: none !important;
}

body
  .st-pane.st-pane--quizzes
  .st-qz-toolbar
  .st-create-actions
  .button-primary.st-btn:hover:not(:disabled) {
  box-shadow:
    0 14px 28px -12px color-mix(in srgb, var(--primary) 68%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

body
  .st-pane.st-pane--quizzes
  .st-qz-toolbar
  .st-create-actions
  .button-primary.st-btn
  .icon {
  font-size: 14px !important;
}

body
  .st-pane.st-pane--quizzes
  .st-qz-toolbar
  .st-create-actions
  .st-btn--upload-prompt {
  width: auto;
  min-width: 0;
  min-height: 46px;
  padding: 0 18px !important;
  white-space: nowrap;
}

@media (max-width: 760px) {
  body .st-pane.st-pane--quizzes .st-qz-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  body .st-pane.st-pane--quizzes .st-qz-toolbar .st-create-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
  }

  body
    .st-pane.st-pane--quizzes
    .st-qz-toolbar
    .st-create-actions
    .button-primary.st-btn,
  body
    .st-pane.st-pane--quizzes
    .st-qz-toolbar
    .st-create-actions
    .st-btn--upload-prompt {
    width: 100%;
    min-width: 0;
    min-height: 48px;
  }
}

body .st-pane.st-pane--quizzes .st-qz-row {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: none !important;
  border-radius: 22px !important;
  background: var(--eduloo-study-row-bg) !important;
  box-shadow:
    inset 0 0 0 1px var(--eduloo-qz-row-border),
    var(--eduloo-qz-row-shadow) !important;
  padding: 16px !important;
  display: grid;
  grid-template-columns: minmax(280px, 1.25fr) minmax(232px, 0.95fr) auto;
  gap: 14px;
  align-items: stretch;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease;
}

body .st-pane.st-pane--quizzes .st-qz-row::before {
  content: none !important;
}

body .st-pane.st-pane--quizzes .st-qz-meta {
  width: auto !important;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

body .st-pane.st-pane--quizzes .st-qz-meta-top {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 62px;
}

body .st-pane.st-pane--quizzes .st-qz-meta-bottom {
  margin-top: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

body .st-pane.st-pane--quizzes .st-qz-created-at {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: var(--eduloo-qz-meta-text) !important;
  font-variant-numeric: tabular-nums;
}

body .st-pane.st-pane--quizzes .st-qz-title-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

body .st-pane.st-pane--quizzes .st-qz-title-row h3 {
  order: 0;
  margin: 0 !important;
  min-width: 0;
  flex: 1 1 170px;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  font-size: 21px !important;
  line-height: 1.28 !important;
  font-weight: 800 !important;
  color: var(--eduloo-qz-title) !important;
  overflow-wrap: anywhere;
}

body .st-pane.st-pane--quizzes .st-qz-title-row::after {
  content: none !important;
  display: none !important;
}

body .st-pane.st-pane--quizzes .st-qz-rename-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px 40px;
  gap: 8px;
  align-items: center;
  width: 100%;
}

body .st-pane.st-pane--quizzes .st-qz-rename-row input {
  min-width: 0 !important;
  min-height: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

body .st-pane.st-pane--quizzes .st-qz-rename-row .st-btn {
  width: 40px;
  min-width: 40px !important;
  height: 40px;
  min-height: 40px !important;
  border-radius: 12px !important;
  margin: 0 !important;
}

body .st-pane.st-pane--quizzes .st-qz-meta p,
body .st-pane.st-pane--quizzes .st-qz-session > p {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--eduloo-qz-meta-text) !important;
}

body .st-pane.st-pane--quizzes .st-qz-meta p:not(.st-qz-question-count) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  font-variant-numeric: tabular-nums;
}

body .st-pane.st-pane--quizzes .st-qz-question-count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  min-height: 30px;
  max-width: 100%;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--eduloo-qz-count-bg) !important;
  box-shadow: inset 0 0 0 1px var(--eduloo-qz-count-border) !important;
  color: var(--eduloo-qz-count-text) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body .st-pane.st-pane--quizzes .st-qz-question-count::before {
  content: '';
  width: 7px;
  min-width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.74;
}

body .st-pane.st-pane--quizzes .st-qz-type-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 0 !important;
}

body .st-pane.st-pane--quizzes .st-qz-type-badge {
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--eduloo-qz-type-bg) !important;
  box-shadow: inset 0 0 0 1px var(--eduloo-qz-type-border) !important;
  color: var(--eduloo-qz-type-text) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.11px;
  white-space: nowrap;
}

body .st-pane.st-pane--quizzes .st-qz-type-badge .icon {
  margin: 0 !important;
  font-size: 10px !important;
}

body .st-pane.st-pane--quizzes .st-qz-session {
  width: auto !important;
  min-width: 0;
  border-radius: 14px;
  padding: 10px 11px;
  background: var(--eduloo-qz-session-bg) !important;
  box-shadow: inset 0 0 0 1px var(--eduloo-qz-session-border) !important;
  display: grid;
  align-content: start;
  gap: 6px;
  text-align: left;
  align-self: start;
}

body .st-pane.st-pane--quizzes .st-qz-session-title {
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  letter-spacing: 0.44px;
  text-transform: uppercase;
  color: var(--eduloo-study-muted) !important;
}

body .st-pane.st-pane--quizzes .st-qz-session-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

body .st-pane.st-pane--quizzes .st-qz-session-metric {
  margin: 0 !important;
  min-height: 34px;
  border-radius: 10px;
  padding: 6px 8px;
  display: grid;
  align-content: center;
  gap: 2px;
  background: var(--eduloo-qz-score-bg) !important;
  box-shadow: inset 0 0 0 1px var(--eduloo-qz-score-border) !important;
}

body .st-pane.st-pane--quizzes .st-qz-session-metric-label {
  display: block;
  margin: 0 !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: var(--eduloo-study-muted) !important;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

body .st-pane.st-pane--quizzes .st-qz-session-metric-value {
  display: block;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  font-weight: 800;
  color: var(--eduloo-study-text) !important;
}

body .st-pane.st-pane--quizzes .st-qz-generation-steps {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  align-self: start;
}

body .st-pane.st-pane--quizzes .st-qz-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-content: start;
  justify-items: stretch;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  width: auto !important;
  min-width: 220px;
  align-self: start;
}

body .st-pane.st-pane--quizzes .st-qz-actions .st-btn {
  min-height: 46px;
  margin: 0 !important;
  border: none !important;
  border-radius: 12px !important;
  background: var(--eduloo-qz-neutral-btn-bg) !important;
  box-shadow: inset 0 0 0 1px var(--eduloo-qz-neutral-btn-border) !important;
  color: var(--eduloo-qz-neutral-btn-text) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 0 14px !important;
  transform: none !important;
  transition:
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

body .st-pane.st-pane--quizzes .st-qz-actions .st-btn:hover:not(:disabled) {
  background: var(--eduloo-qz-neutral-btn-bg-hover) !important;
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--eduloo-qz-neutral-btn-border) 88%, transparent) !important;
  transform: translateY(-1px) !important;
}

body .st-pane.st-pane--quizzes .st-qz-actions .st-btn:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 3px var(--eduloo-study-focus),
    inset 0 0 0 1px
      color-mix(in srgb, var(--eduloo-qz-neutral-btn-border) 88%, transparent) !important;
}

body .st-pane.st-pane--quizzes .st-qz-actions .st-btn--quiz-start {
  width: 100%;
  min-width: 0 !important;
  height: auto;
  min-height: 50px !important;
  padding: 0 16px !important;
  border-radius: 14px !important;
  justify-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--eduloo-qz-start-btn-bg) !important;
  box-shadow: var(--eduloo-qz-start-btn-shadow) !important;
  color: var(--eduloo-qz-start-btn-text) !important;
}

body
  .st-pane.st-pane--quizzes
  .st-qz-actions
  .st-btn--quiz-start:hover:not(:disabled) {
  background: var(--eduloo-qz-start-btn-bg-hover) !important;
}

body .st-pane.st-pane--quizzes .st-qz-actions .st-btn--quiz-start .icon {
  font-size: 13px !important;
}

body
  .st-pane.st-pane--quizzes
  .st-qz-actions
  .st-btn--only-icon:not(.st-btn--quiz-start) {
  width: 42px;
  min-width: 42px !important;
  height: 42px;
  min-height: 42px !important;
  padding: 0 !important;
  align-self: center;
  justify-self: end;
}

body .st-pane.st-pane--quizzes .st-qz-actions .st-btn .icon {
  font-size: 14px !important;
}

body .st-pane.st-pane--quizzes .st-qz-row--generating {
  box-shadow:
    inset 0 0 0 1px var(--eduloo-qz-row-border-strong),
    var(--eduloo-qz-row-shadow) !important;
}

body .st-pane.st-pane--quizzes .st-qz-row--generating::before {
  animation: st-qz-accent-pulse 1800ms ease-in-out infinite;
}

@keyframes st-qz-accent-pulse {
  0%,
  100% {
    opacity: 0.68;
  }
  50% {
    opacity: 1;
  }
}

body
  .st-pane.st-pane--quizzes
  .st-qz-row[data-quiz-status='ready']
  .st-qz-question-count,
body
  .st-pane.st-pane--quizzes
  .st-qz-row[data-quiz-status='completed']
  .st-qz-question-count {
  color: var(--eduloo-study-success) !important;
  background: var(--eduloo-qz-status-ready-bg) !important;
  box-shadow: inset 0 0 0 1px var(--eduloo-qz-status-ready-border) !important;
}

body
  .st-pane.st-pane--quizzes
  .st-qz-row[data-quiz-status='in_progress']
  .st-qz-question-count {
  color: var(--eduloo-study-text) !important;
  background: var(--eduloo-qz-status-progress-bg) !important;
  box-shadow: inset 0 0 0 1px var(--eduloo-qz-status-progress-border) !important;
}

body
  .st-pane.st-pane--quizzes
  .st-qz-row[data-quiz-status='pending']
  .st-qz-question-count,
body
  .st-pane.st-pane--quizzes
  .st-qz-row[data-quiz-status='generating']
  .st-qz-question-count,
body
  .st-pane.st-pane--quizzes
  .st-qz-row[data-quiz-status='running']
  .st-qz-question-count {
  color: var(--eduloo-study-text) !important;
  background: var(--eduloo-qz-status-pending-bg) !important;
  box-shadow: inset 0 0 0 1px var(--eduloo-qz-status-pending-border) !important;
}

body
  .st-pane.st-pane--quizzes
  .st-qz-row[data-quiz-status='failed']
  .st-qz-question-count {
  color: var(--eduloo-study-danger) !important;
  background: var(--eduloo-qz-status-failed-bg) !important;
  box-shadow: inset 0 0 0 1px var(--eduloo-qz-status-failed-border) !important;
}

@media (max-width: 1080px) {
  body .st-pane.st-pane--quizzes .st-qz-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
  }

  body .st-pane.st-pane--quizzes .st-qz-meta,
  body .st-pane.st-pane--quizzes .st-qz-generation-steps,
  body .st-pane.st-pane--quizzes .st-qz-session {
    grid-column: 1;
  }

  body .st-pane.st-pane--quizzes .st-qz-actions {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: start;
  }
}

@media (max-width: 760px) {
  body .st-pane.st-pane--quizzes .st-qz-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px !important;
    border-radius: 18px !important;
  }

  body .st-pane.st-pane--quizzes .st-qz-title-row h3 {
    font-size: 19px !important;
  }

  body .st-pane.st-pane--quizzes .st-qz-actions {
    grid-column: 1;
    grid-row: auto;
    width: 100% !important;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 8px;
    justify-items: stretch;
    align-items: center;
  }

  body .st-pane.st-pane--quizzes .st-qz-actions .st-btn--quiz-start {
    min-height: 48px !important;
  }

  body
    .st-pane.st-pane--quizzes
    .st-qz-actions
    .st-btn--only-icon:not(.st-btn--quiz-start) {
    justify-self: end;
  }

  body .st-pane.st-pane--quizzes .st-qz-session {
    padding: 9px 10px;
    border-radius: 14px;
  }

  body .st-pane.st-pane--quizzes .st-qz-session-metrics {
    gap: 5px;
  }

  body .st-pane.st-pane--quizzes .st-qz-session-metric {
    min-height: 32px;
    padding: 5px 7px;
  }
}

@media (max-width: 520px) {
  body .st-pane.st-pane--quizzes .st-qz-row {
    padding: 12px !important;
    border-radius: 16px !important;
  }

  body .st-pane.st-pane--quizzes .st-qz-title-row h3 {
    font-size: 18px !important;
  }

  body .st-pane.st-pane--quizzes .st-qz-title-row::after {
    min-height: 22px;
    padding: 0 9px;
    font-size: 10px;
  }

  body .st-pane.st-pane--quizzes .st-qz-question-count {
    min-height: 28px;
    padding: 0 10px;
    font-size: 11px !important;
  }

  body .st-pane.st-pane--quizzes .st-qz-type-badges {
    gap: 6px;
  }

  body .st-pane.st-pane--quizzes .st-qz-type-badge {
    min-height: 28px;
    padding: 0 10px;
  }

  body .st-pane.st-pane--quizzes .st-qz-session-metrics {
    grid-template-columns: 1fr;
  }

  body .st-pane.st-pane--quizzes .st-qz-actions .st-btn--quiz-start {
    min-height: 46px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }

  body .st-pane.st-pane--quizzes .st-qz-rename-row {
    grid-template-columns: minmax(0, 1fr) 38px 38px;
  }

  body .st-pane.st-pane--quizzes .st-qz-rename-row input {
    min-height: 38px !important;
    height: 38px !important;
  }

  body .st-pane.st-pane--quizzes .st-qz-rename-row .st-btn {
    width: 38px;
    min-width: 38px !important;
    height: 38px;
    min-height: 38px !important;
    border-radius: 11px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .st-pane.st-pane--quizzes .st-qz-row,
  body .st-pane.st-pane--quizzes .st-qz-row::before,
  body .st-pane.st-pane--quizzes .st-qz-actions .st-btn,
  body .st-pane.st-pane--quizzes .st-qz-edit-icon {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

body .st-pane.st-pane--quizzes .st-qz-row {
  grid-template-columns: minmax(280px, 1.25fr) minmax(232px, 0.9fr) auto;
  align-items: start;
  background: color-mix(
    in srgb,
    var(--surface-container-low) 90%,
    var(--primary-container) 10%
  ) !important;
}

body .st-pane.st-pane--quizzes .st-qz-meta {
  gap: 12px;
}

body .st-pane.st-pane--quizzes .st-qz-meta-top {
  gap: 10px;
  min-height: 0;
}

body .st-pane.st-pane--quizzes .st-qz-title-row {
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

body .st-pane.st-pane--quizzes .st-qz-title-row h3 {
  flex: 0 1 auto;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  line-height: 1.24 !important;
}

body .st-pane.st-pane--quizzes .st-qz-title-row::after {
  min-height: 22px;
  padding: 0 8px;
}

body .st-pane.st-pane--quizzes .st-qz-title-row .st-qz-edit-icon .icon {
  color: inherit !important;
}

body .st-pane.st-pane--quizzes .st-qz-meta p.st-qz-utility-line {
  margin: 0 !important;
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: var(--eduloo-qz-meta-utility-text) !important;
}

body .st-pane.st-pane--quizzes .st-qz-utility-dot {
  font-size: 12px;
  line-height: 1;
  color: color-mix(
    in srgb,
    var(--eduloo-qz-meta-utility-text) 72%,
    transparent
  );
}

body .st-pane.st-pane--quizzes .st-qz-question-count,
body .st-pane.st-pane--quizzes .st-qz-created-at {
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  padding: 0;
  border: none !important;
  border-radius: 0;
  background: none !important;
  box-shadow: none !important;
  color: var(--eduloo-qz-meta-utility-text) !important;
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
}

body .st-pane.st-pane--quizzes .st-qz-question-count::before {
  content: none;
}

body
  .st-pane.st-pane--quizzes
  .st-qz-row[data-quiz-status]
  .st-qz-question-count {
  background: none !important;
  box-shadow: none !important;
  color: var(--eduloo-qz-meta-utility-text) !important;
}

body .st-pane.st-pane--quizzes .st-qz-question-count .icon,
body .st-pane.st-pane--quizzes .st-qz-created-at .icon {
  margin: 0 !important;
  font-size: 12px !important;
  color: color-mix(
    in srgb,
    var(--eduloo-qz-meta-utility-text) 92%,
    var(--on-surface) 8%
  );
}

body .st-pane.st-pane--quizzes .st-qz-meta-bottom {
  margin-top: auto;
  min-height: 24px;
  align-items: center;
  gap: 8px;
}

body .st-pane.st-pane--quizzes .st-qz-type-badges {
  gap: 6px 8px;
}

body .st-pane.st-pane--quizzes .st-qz-type-badge {
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--eduloo-qz-type-bg-soft) !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--eduloo-qz-type-text-soft) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  letter-spacing: 0;
}

body
  .st-pane.st-pane--quizzes
  .st-qz-meta-bottom
  .st-qz-type-badges
  .st-qz-type-badge {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: var(--eduloo-qz-type-bg-soft) !important;
}

body .st-pane.st-pane--quizzes .st-qz-type-badge .icon {
  font-size: 11px !important;
}

body .st-pane.st-pane--quizzes .st-qz-session {
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--eduloo-qz-session-surface) !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: center;
}

body .st-pane.st-pane--quizzes .st-qz-session-title {
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  color: var(--eduloo-qz-meta-utility-text) !important;
}

body .st-pane.st-pane--quizzes .st-qz-session-row {
  display: flex;
  align-items: center !important;
  justify-content: space-between;
  gap: 10px;
}

body .st-pane.st-pane--quizzes .st-qz-session-date,
body .st-pane.st-pane--quizzes .st-qz-session-score {
  margin: 0 !important;
  font-family: 'Be Vietnam Pro', sans-serif !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 20px;
}

body .st-pane.st-pane--quizzes .st-qz-session-date {
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  color: var(--eduloo-qz-meta-utility-text) !important;
}

body .st-pane.st-pane--quizzes .st-qz-session-score {
  font-size: 16px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  color: var(--eduloo-qz-session-score-text) !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: auto !important;
  min-height: 20px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  align-self: auto !important;
  justify-content: flex-end;
  vertical-align: middle;
}

body .st-pane.st-pane--quizzes .st-qz-session p.st-qz-session-score:last-child,
body.theme-dark
  .st-pane.st-pane--quizzes
  .st-qz-session
  p.st-qz-session-score:last-child {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
}

body .st-pane.st-pane--quizzes .st-qz-session .st-qz-session-metrics {
  display: none !important;
}

body .st-pane.st-pane--quizzes .st-qz-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  width: auto !important;
  min-width: 0;
  margin-left: auto;
  align-self: center;
}

body .st-pane.st-pane--quizzes .st-qz-actions .st-btn:not(.st-btn--only-icon) {
  min-height: 52px;
  border-radius: 999px !important;
  padding: 0 18px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

body .st-pane.st-pane--quizzes .st-qz-actions .st-btn--quiz-start {
  min-width: 166px;
  min-height: 52px !important;
}

body
  .st-pane.st-pane--quizzes
  .st-qz-actions
  .st-btn--only-icon:not(.st-btn--quiz-start) {
  width: 42px;
  min-width: 42px !important;
  height: 42px;
  min-height: 42px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  background: var(--eduloo-qz-options-bg) !important;
  box-shadow: inset 0 0 0 1px var(--eduloo-qz-options-border) !important;
  color: var(--eduloo-qz-options-text) !important;
}

body
  .st-pane.st-pane--quizzes
  .st-qz-actions
  .st-btn--only-icon:not(.st-btn--quiz-start):hover:not(:disabled) {
  background: color-mix(
    in srgb,
    var(--eduloo-qz-options-bg) 82%,
    var(--secondary-container) 18%
  ) !important;
}

body
  .st-pane.st-pane--quizzes
  .st-qz-actions
  .st-btn--only-icon:not(.st-btn--quiz-start)
  .icon {
  margin: 0 !important;
  font-size: 14px !important;
}

@media (max-width: 760px) {
  body .st-pane.st-pane--quizzes .st-qz-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body .st-pane.st-pane--quizzes .st-qz-meta,
  body .st-pane.st-pane--quizzes .st-qz-session,
  body .st-pane.st-pane--quizzes .st-qz-generation-steps,
  body .st-pane.st-pane--quizzes .st-qz-actions {
    grid-column: 1;
    grid-row: auto;
  }

  body .st-pane.st-pane--quizzes .st-qz-actions {
    width: 100% !important;
    margin-left: 0;
    justify-content: stretch;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 8px;
    align-self: stretch;
  }

  body .st-pane.st-pane--quizzes .st-qz-session {
    align-self: stretch;
  }

  body .st-pane.st-pane--quizzes .st-qz-actions .st-btn--quiz-start {
    width: 100%;
    min-width: 0 !important;
    min-height: 48px !important;
  }

  body
    .st-pane.st-pane--quizzes
    .st-qz-actions
    .st-btn--only-icon:not(.st-btn--quiz-start) {
    width: 42px;
    min-width: 42px !important;
    height: 42px;
    min-height: 42px !important;
    justify-content: center;
    justify-self: end;
  }
}

@media (max-width: 520px) {
  body .st-pane.st-pane--quizzes .st-qz-utility-line {
    font-size: 12px !important;
    gap: 6px;
  }

  body .st-pane.st-pane--quizzes .st-qz-question-count,
  body .st-pane.st-pane--quizzes .st-qz-created-at {
    font-size: 12px !important;
  }

  body .st-pane.st-pane--quizzes .st-qz-session-date {
    font-size: 12px !important;
  }

  body .st-pane.st-pane--quizzes .st-qz-session-score {
    font-size: 15px !important;
  }
}

body.theme-dark .st-pane.st-pane--flashcards,
body.theme-dark .st-pane.st-pane--quizzes,
body.theme-dark .st-pane.st-pane--summaries,
body.theme-dark .st-pane.st-pane--podcasts,
body.theme-dark .st-pane.st-pane--documents {
  --eduloo-study-surface-border: color-mix(
    in srgb,
    var(--primary) 16%,
    transparent
  );
  --eduloo-study-pane-border: color-mix(
    in srgb,
    var(--primary) 18%,
    transparent
  );
  --eduloo-study-inner-border: color-mix(
    in srgb,
    var(--primary) 14%,
    transparent
  );
  --eduloo-study-chip-border: color-mix(
    in srgb,
    var(--primary) 22%,
    transparent
  );
  --eduloo-study-tab-border: color-mix(
    in srgb,
    var(--primary) 16%,
    transparent
  );
  --eduloo-study-tab-border-hover: color-mix(
    in srgb,
    var(--primary) 32%,
    transparent
  );
  --eduloo-study-toolbar-border: color-mix(
    in srgb,
    var(--primary) 18%,
    transparent
  );
  --eduloo-study-input-border: color-mix(
    in srgb,
    var(--primary) 18%,
    transparent
  );
  --eduloo-study-filter-input-border: color-mix(
    in srgb,
    var(--primary) 20%,
    transparent
  );
  --eduloo-study-btn-muted-border: color-mix(
    in srgb,
    var(--primary) 18%,
    transparent
  );
  --eduloo-study-btn-secondary-border: color-mix(
    in srgb,
    var(--primary) 22%,
    transparent
  );
  --eduloo-study-cta-border: color-mix(
    in srgb,
    var(--primary) 32%,
    transparent
  );
  --eduloo-study-cta-border-hover: color-mix(
    in srgb,
    var(--primary) 48%,
    transparent
  );
  --eduloo-study-gen-panel-border: color-mix(
    in srgb,
    var(--primary) 18%,
    transparent
  );
  --eduloo-study-gen-step-border: color-mix(
    in srgb,
    var(--primary) 14%,
    transparent
  );
  --eduloo-study-gen-step-active-border: color-mix(
    in srgb,
    var(--primary) 34%,
    transparent
  );
  --eduloo-input-unified-border: color-mix(
    in srgb,
    var(--primary) 18%,
    transparent
  );
  --eduloo-input-unified-border-hover: color-mix(
    in srgb,
    var(--primary) 28%,
    transparent
  );
  --eduloo-input-unified-border-focus: color-mix(
    in srgb,
    var(--primary) 48%,
    transparent
  );
  --eduloo-input-unified-ring: color-mix(
    in srgb,
    var(--primary) 20%,
    transparent
  );
}

body.theme-dark .st-pane.st-pane--flashcards {
  --eduloo-fc-surface-border: color-mix(
    in srgb,
    var(--primary) 16%,
    transparent
  );
  --eduloo-fc-card-border: color-mix(in srgb, var(--primary) 20%, transparent);
  --eduloo-fc-chip-border: color-mix(in srgb, var(--primary) 22%, transparent);
  --eduloo-fc-empty-border: color-mix(in srgb, var(--primary) 18%, transparent);
  --eduloo-fc-icon-btn-border: color-mix(
    in srgb,
    var(--primary) 18%,
    transparent
  );
  --eduloo-fc-icon-rail-border: color-mix(
    in srgb,
    var(--primary) 14%,
    transparent
  );
  --eduloo-fc-toolbar-btn-border: color-mix(
    in srgb,
    var(--primary) 22%,
    transparent
  );
  --eduloo-fc-toolbar-btn-border-hover: color-mix(
    in srgb,
    var(--primary) 38%,
    transparent
  );
  --eduloo-fc-toolbar-btn-border-active: color-mix(
    in srgb,
    var(--primary) 52%,
    transparent
  );
  --eduloo-fc-editor-btn-border: color-mix(
    in srgb,
    var(--primary) 20%,
    transparent
  );
  --eduloo-fc-editor-input-border: color-mix(
    in srgb,
    var(--primary) 18%,
    transparent
  );
  --eduloo-fc-editor-shell-border: color-mix(
    in srgb,
    var(--primary) 16%,
    transparent
  );
  --eduloo-fc-create-wrap-border: color-mix(
    in srgb,
    var(--primary) 18%,
    transparent
  );
  --eduloo-fc-create-secondary-border: color-mix(
    in srgb,
    var(--primary) 22%,
    transparent
  );
}

body.theme-dark .st-pane.st-pane--quizzes {
  --eduloo-qz-count-border: color-mix(in srgb, var(--primary) 18%, transparent);
  --eduloo-qz-edit-btn-border: color-mix(
    in srgb,
    var(--primary) 22%,
    transparent
  );
  --eduloo-qz-icon-border: color-mix(in srgb, var(--primary) 20%, transparent);
  --eduloo-qz-icon-border-hover: color-mix(
    in srgb,
    var(--primary) 36%,
    transparent
  );
  --eduloo-qz-neutral-btn-border: color-mix(
    in srgb,
    var(--primary) 20%,
    transparent
  );
  --eduloo-qz-options-border: color-mix(
    in srgb,
    var(--primary) 16%,
    transparent
  );
  --eduloo-qz-row-border: color-mix(in srgb, var(--primary) 16%, transparent);
  --eduloo-qz-score-border: color-mix(in srgb, var(--primary) 20%, transparent);
  --eduloo-qz-session-border: color-mix(
    in srgb,
    var(--primary) 18%,
    transparent
  );
  --eduloo-qz-status-border: color-mix(
    in srgb,
    var(--primary) 20%,
    transparent
  );
  --eduloo-qz-type-border: color-mix(in srgb, var(--primary) 18%, transparent);
}

body.theme-dark .st-pane.st-pane--summaries {
  --eduloo-sum-card-border: color-mix(in srgb, var(--primary) 18%, transparent);
  --eduloo-sum-card-border-hover: color-mix(
    in srgb,
    var(--primary) 38%,
    transparent
  );
  --eduloo-sum-icon-btn-border: color-mix(
    in srgb,
    var(--primary) 20%,
    transparent
  );
  --eduloo-sum-icon-btn-border-hover: color-mix(
    in srgb,
    var(--primary) 36%,
    transparent
  );
  --eduloo-sum-btn-disabled-border: color-mix(
    in srgb,
    var(--outline-variant) 40%,
    transparent
  );
  --eduloo-sum-preview-border: color-mix(
    in srgb,
    var(--primary) 16%,
    transparent
  );
  --eduloo-sum-status-border: color-mix(
    in srgb,
    var(--primary) 22%,
    transparent
  );
}

body.theme-dark .st-pane.st-pane--documents {
  --eduloo-doc-surface-border: color-mix(
    in srgb,
    var(--primary) 16%,
    transparent
  );
  --eduloo-doc-action-border: color-mix(
    in srgb,
    var(--primary) 22%,
    transparent
  );
  --eduloo-doc-chip-border: color-mix(in srgb, var(--primary) 20%, transparent);
  --eduloo-doc-hero-copy-border: color-mix(
    in srgb,
    var(--primary) 16%,
    transparent
  );
  --eduloo-doc-upload-border: color-mix(
    in srgb,
    var(--primary) 22%,
    transparent
  );
  --eduloo-doc-row-border: color-mix(in srgb, var(--primary) 16%, transparent);
  --eduloo-doc-mode-overlay-card-border: color-mix(
    in srgb,
    var(--primary) 18%,
    transparent
  );
  --eduloo-doc-mode-overlay-btn-border: color-mix(
    in srgb,
    var(--primary) 22%,
    transparent
  );
  --eduloo-doc-mode-overlay-btn-border-hover: color-mix(
    in srgb,
    var(--primary) 38%,
    transparent
  );
  --eduloo-doc-mode-overlay-apply-border: color-mix(
    in srgb,
    var(--primary) 38%,
    transparent
  );
}

body.theme-dark
  .st-pane
  .st-btn:not(.button-primary):not(.st-btn--danger):not(.st-btn--quiz-start) {
  background: var(--eduloo-dark-btn-soft-bg) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent) !important;
  color: var(--on-surface) !important;
  box-shadow: 0 6px 14px -10px color-mix(in srgb, black 58%, transparent) !important;
}

body.theme-dark
  .st-pane
  .st-btn:not(.button-primary):not(.st-btn--danger):not(
    .st-btn--quiz-start
  ):hover:not(:disabled) {
  background: var(--eduloo-dark-btn-soft-bg-hover) !important;
  border-color: color-mix(in srgb, var(--primary) 40%, transparent) !important;
  box-shadow: 0 10px 20px -12px
    color-mix(in srgb, var(--primary) 32%, transparent) !important;
}

body.theme-dark .st-pane .st-btn.button-primary,
body.theme-dark .st-pane .st-btn--quiz-start {
  background: var(--eduloo-dark-btn-primary-bg) !important;
  color: var(--on-primary) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 48%, transparent) !important;
  box-shadow: var(--eduloo-dark-btn-primary-shadow) !important;
}

body.theme-dark .st-pane .st-btn.button-primary:hover:not(:disabled),
body.theme-dark .st-pane .st-btn--quiz-start:hover:not(:disabled) {
  background: var(--eduloo-dark-btn-primary-bg-hover) !important;
  filter: brightness(1.04);
}

body .st-pane.st-pane--summaries {
  --st-sum-card-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 96%,
    var(--primary-container) 4%
  );
  --st-sum-card-bg-hover: color-mix(
    in srgb,
    var(--surface-container-lowest) 90%,
    var(--primary-container) 10%
  );
  --st-sum-card-border: color-mix(in srgb, var(--primary) 14%, transparent);
  --st-sum-card-border-hover: color-mix(
    in srgb,
    var(--primary) 26%,
    transparent
  );
  --st-sum-card-shadow: 0 14px 28px -22px
    color-mix(in srgb, var(--primary) 24%, transparent);
  --st-sum-card-shadow-hover: 0 18px 34px -22px
    color-mix(in srgb, var(--primary) 32%, transparent);
  --st-sum-meta-text: color-mix(
    in srgb,
    var(--on-surface) 64%,
    var(--on-surface-variant) 36%
  );
  --st-sum-options-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 80%,
    var(--primary-container) 20%
  );
  --st-sum-options-bg-hover: color-mix(
    in srgb,
    var(--surface-container-lowest) 64%,
    var(--primary-container) 36%
  );
  --st-sum-options-border: color-mix(in srgb, var(--primary) 16%, transparent);
}

body.theme-dark .st-pane.st-pane--summaries {
  --st-sum-card-bg: color-mix(
    in srgb,
    var(--surface-container-high) 92%,
    var(--primary-container) 8%
  );
  --st-sum-card-bg-hover: color-mix(
    in srgb,
    var(--surface-container-high) 80%,
    var(--primary-container) 20%
  );
  --st-sum-card-border: color-mix(in srgb, var(--primary) 18%, transparent);
  --st-sum-card-border-hover: color-mix(
    in srgb,
    var(--primary) 38%,
    transparent
  );
  --st-sum-card-shadow: 0 18px 30px -22px
    color-mix(in srgb, black 64%, transparent);
  --st-sum-card-shadow-hover: 0 22px 40px -22px
    color-mix(in srgb, var(--primary) 30%, transparent);
  --st-sum-meta-text: var(--on-surface-variant);
  --st-sum-options-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 78%,
    var(--primary-container) 22%
  );
  --st-sum-options-bg-hover: color-mix(
    in srgb,
    var(--surface-container-highest) 60%,
    var(--primary-container) 40%
  );
  --st-sum-options-border: color-mix(in srgb, var(--primary) 22%, transparent);
}

body .st-pane.st-pane--summaries .st-sum-row,
body.theme-dark .st-pane.st-pane--summaries .st-sum-row {
  background: var(--st-sum-card-bg) !important;
  border: 1px solid var(--st-sum-card-border) !important;
  box-shadow: var(--st-sum-card-shadow) !important;
  padding: 18px 20px !important;
  border-radius: 18px !important;
  transition:
    background 200ms ease,
    border-color 200ms ease,
    box-shadow 220ms ease,
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

body .st-pane.st-pane--summaries .st-sum-row::before {
  content: none !important;
  background: none !important;
}

body .st-pane.st-pane--summaries .st-sum-row:hover,
body.theme-dark .st-pane.st-pane--summaries .st-sum-row:hover {
  background: var(--st-sum-card-bg-hover) !important;
  border-color: var(--st-sum-card-border-hover) !important;
  box-shadow: var(--st-sum-card-shadow-hover) !important;
  transform: translateY(-1px);
}

body .st-pane.st-pane--summaries .st-sum-meta {
  gap: 8px;
}

body .st-pane.st-pane--summaries .st-sum-title-row h3 {
  font-size: 17px !important;
  letter-spacing: -0.1px;
  color: var(--on-surface) !important;
}

body:not([data-mobile]) .st-pane.st-pane--summaries .st-sum-title-icon,
body:not([data-mobile]) .st-pane.st-pane--summaries .st-sum-status-chip,
body:not([data-mobile]) .st-pane.st-pane--summaries .st-sum-utility-line {
  display: none !important;
}

body .st-pane.st-pane--summaries .st-sum-meta p {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--st-sum-meta-text) !important;
  font-weight: 500;
}

body .st-pane.st-pane--summaries .st-doc-status-line {
  min-height: 24px;
  padding: 0 11px 0 9px;
  font-size: 10.5px;
  letter-spacing: 0.4px;
  background: color-mix(
    in srgb,
    var(--surface-container-lowest) 76%,
    var(--secondary-container) 24%
  );
  border-color: color-mix(in srgb, var(--secondary) 20%, transparent);
  color: color-mix(in srgb, var(--on-surface) 90%, transparent) !important;
}

body.theme-dark .st-pane.st-pane--summaries .st-doc-status-line {
  background: color-mix(
    in srgb,
    var(--surface-container-highest) 70%,
    var(--secondary-container) 30%
  );
}

body
  .st-pane.st-pane--summaries
  .st-sum-row[data-summary-status='ready']
  .st-doc-status-line {
  border-color: color-mix(
    in srgb,
    var(--secondary) 32%,
    transparent
  ) !important;
}

body
  .st-pane.st-pane--summaries
  .st-sum-row[data-summary-status='ready']
  .st-doc-status-value {
  color: color-mix(
    in srgb,
    var(--secondary) 70%,
    var(--on-surface) 30%
  ) !important;
  font-weight: 800;
}

body.theme-dark
  .st-pane.st-pane--summaries
  .st-sum-row[data-summary-status='ready']
  .st-doc-status-value {
  color: var(--secondary) !important;
}

body .st-pane.st-pane--summaries .st-sum-actions .st-sum-preview-btn {
  min-height: 40px !important;
  min-width: 124px;
  padding: 0 20px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px;
  background: linear-gradient(
    135deg,
    var(--primary) 0%,
    color-mix(in srgb, var(--primary) 58%, var(--secondary) 42%) 100%
  ) !important;
  color: var(--on-primary) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 38%, transparent) !important;
  box-shadow:
    0 10px 22px -12px color-mix(in srgb, var(--primary) 50%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--primary-strong) 40%, transparent) !important;
  transition:
    transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 200ms ease,
    filter 200ms ease !important;
}

body
  .st-pane.st-pane--summaries
  .st-sum-actions
  .st-sum-preview-btn:hover:not(:disabled),
body
  .st-pane.st-pane--summaries
  .st-sum-actions
  .st-sum-preview-btn:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow:
    0 14px 28px -12px color-mix(in srgb, var(--primary) 64%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--primary-strong) 50%, transparent) !important;
}

body .st-pane.st-pane--summaries .st-sum-actions .st-btn--only-icon,
body.theme-dark .st-pane.st-pane--summaries .st-sum-actions .st-btn--only-icon {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 999px !important;
  background: var(--st-sum-options-bg) !important;
  border: 1px solid var(--st-sum-options-border) !important;
  color: color-mix(
    in srgb,
    var(--on-surface) 78%,
    var(--primary) 22%
  ) !important;
  box-shadow: none !important;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

body
  .st-pane.st-pane--summaries
  .st-sum-actions
  .st-btn--only-icon:hover:not(:disabled) {
  background: var(--st-sum-options-bg-hover) !important;
  border-color: color-mix(in srgb, var(--primary) 36%, transparent) !important;
  color: var(--primary) !important;
  transform: translateY(-1px);
}

body.theme-dark
  .st-pane.st-pane--summaries
  .st-sum-actions
  .st-btn--only-icon:hover:not(:disabled) {
  color: var(--on-surface) !important;
}

body .st-pane.st-pane--summaries .st-sum-title-row .st-qz-edit-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  opacity: 0.55;
}

body .st-pane.st-pane--summaries .st-sum-row:hover .st-qz-edit-icon {
  opacity: 1;
}

@media (max-width: 720px) {
  body .st-pane.st-pane--summaries .st-sum-row {
    padding: 14px 14px !important;
    border-radius: 16px !important;
  }

  body .st-pane.st-pane--summaries .st-sum-actions {
    width: 100%;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 8px;
    align-items: center;
  }

  body .st-pane.st-pane--summaries .st-sum-actions .st-sum-preview-btn {
    width: 100%;
    min-width: 0;
  }

  body .st-pane.st-pane--summaries .st-sum-actions .st-btn--only-icon {
    justify-self: end;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .st-pane.st-pane--summaries .st-sum-row,
  body .st-pane.st-pane--summaries .st-sum-actions .st-sum-preview-btn,
  body .st-pane.st-pane--summaries .st-sum-actions .st-btn--only-icon {
    transition: none !important;
    transform: none !important;
  }
}

body .st-pane.st-pane--documents {
  --st-doc-card-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 96%,
    var(--primary-container) 4%
  );
  --st-doc-card-bg-hover: color-mix(
    in srgb,
    var(--surface-container-lowest) 90%,
    var(--primary-container) 10%
  );
  --st-doc-card-border: color-mix(in srgb, var(--primary) 14%, transparent);
  --st-doc-card-border-hover: color-mix(
    in srgb,
    var(--primary) 28%,
    transparent
  );
  --st-doc-card-shadow: 0 14px 28px -22px
    color-mix(in srgb, var(--primary) 22%, transparent);
  --st-doc-card-shadow-hover: 0 20px 36px -22px
    color-mix(in srgb, var(--primary) 32%, transparent);
  --st-doc-tile-bg: color-mix(
    in srgb,
    var(--surface-container-lowest) 80%,
    var(--surface-container) 20%
  );
  --st-doc-meta-text: color-mix(
    in srgb,
    var(--on-surface) 60%,
    var(--on-surface-variant) 40%
  );
}

body.theme-dark .st-pane.st-pane--documents {
  --st-doc-card-bg: color-mix(
    in srgb,
    var(--surface-container-high) 92%,
    var(--primary-container) 8%
  );
  --st-doc-card-bg-hover: color-mix(
    in srgb,
    var(--surface-container-high) 80%,
    var(--primary-container) 20%
  );
  --st-doc-card-border: color-mix(in srgb, var(--primary) 18%, transparent);
  --st-doc-card-border-hover: color-mix(
    in srgb,
    var(--primary) 38%,
    transparent
  );
  --st-doc-card-shadow: 0 18px 30px -22px
    color-mix(in srgb, black 64%, transparent);
  --st-doc-card-shadow-hover: 0 24px 42px -22px
    color-mix(in srgb, var(--primary) 32%, transparent);
  --st-doc-tile-bg: color-mix(
    in srgb,
    var(--surface-container-highest) 78%,
    var(--surface-container) 22%
  );
  --st-doc-meta-text: var(--on-surface-variant);
}

body .st-pane.st-pane--documents .st-doc-row:not(.st-doc-row--empty),
body.theme-dark
  .st-pane.st-pane--documents
  .st-doc-row:not(.st-doc-row--empty) {
  background: var(--st-doc-card-bg) !important;
  border: 1px solid var(--st-doc-card-border) !important;
  box-shadow: var(--st-doc-card-shadow) !important;
  border-radius: 22px !important;
  padding: 16px 18px 16px 16px !important;
  transition: none !important;
  transform: none !important;
}

body .st-pane.st-pane--documents .st-doc-row:not(.st-doc-row--empty)::before {
  content: none !important;
  background: none !important;
}

body .st-pane.st-pane--documents .st-doc-row:not(.st-doc-row--empty):hover,
body.theme-dark
  .st-pane.st-pane--documents
  .st-doc-row:not(.st-doc-row--empty):hover {
  background: var(--st-doc-card-bg) !important;
  border-color: var(--st-doc-card-border) !important;
  box-shadow: var(--st-doc-card-shadow) !important;
  transform: none !important;
}

body .st-pane.st-pane--documents .st-doc-row--empty {
  background: var(--st-doc-card-bg) !important;
  border: 1px dashed var(--st-doc-card-border) !important;
  box-shadow: var(--st-doc-card-shadow) !important;
  border-radius: 22px !important;
}

body.theme-dark .st-pane.st-pane--documents .st-doc-row--empty {
  background: var(--st-doc-card-bg) !important;
  border: 1px dashed var(--st-doc-card-border) !important;
}

body .st-pane.st-pane--documents .st-doc-file-type {
  width: 76px !important;
  height: 76px !important;
  border-radius: 18px !important;
  background: var(--st-doc-tile-bg) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent) !important;
  color: color-mix(
    in srgb,
    var(--primary) 72%,
    var(--on-surface) 28%
  ) !important;
  position: relative;
  isolation: isolate;
}

body .st-pane.st-pane--documents .st-doc-file-type::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    circle at 22% 18%,
    color-mix(
        in srgb,
        var(--st-doc-tile-accent, var(--primary)) 22%,
        transparent
      )
      0%,
    transparent 62%
  );
  z-index: 0;
}

body .st-pane.st-pane--documents .st-doc-file-type i {
  position: relative;
  z-index: 1;
  font-size: 28px !important;
  filter: drop-shadow(
    0 1px 0
      color-mix(
        in srgb,
        var(--st-doc-tile-accent, var(--primary)) 14%,
        transparent
      )
  );
}

body .st-pane.st-pane--documents .st-doc-file-type--pdf {
  --st-doc-tile-accent: var(--primary);
  background: color-mix(
    in srgb,
    var(--surface-container-lowest) 78%,
    var(--primary-container) 22%
  ) !important;
  border-color: color-mix(in srgb, var(--primary) 22%, transparent) !important;
  color: color-mix(
    in srgb,
    var(--primary) 80%,
    var(--on-surface) 20%
  ) !important;
}

body .st-pane.st-pane--documents .st-doc-file-type--doc {
  --st-doc-tile-accent: var(--info);
  background: color-mix(
    in srgb,
    var(--surface-container-lowest) 78%,
    var(--info-container) 22%
  ) !important;
  border-color: color-mix(in srgb, var(--info) 22%, transparent) !important;
  color: color-mix(in srgb, var(--info) 80%, var(--on-surface) 20%) !important;
}

body .st-pane.st-pane--documents .st-doc-file-type--ppt {
  --st-doc-tile-accent: var(--tertiary);
  background: color-mix(
    in srgb,
    var(--surface-container-lowest) 76%,
    var(--tertiary-container) 24%
  ) !important;
  border-color: color-mix(in srgb, var(--tertiary) 24%, transparent) !important;
  color: color-mix(
    in srgb,
    var(--tertiary) 78%,
    var(--on-surface) 22%
  ) !important;
}

body .st-pane.st-pane--documents .st-doc-file-type--img {
  --st-doc-tile-accent: var(--secondary);
  background: color-mix(
    in srgb,
    var(--surface-container-lowest) 78%,
    var(--secondary-container) 22%
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--secondary) 22%,
    transparent
  ) !important;
  color: color-mix(
    in srgb,
    var(--secondary) 76%,
    var(--on-surface) 24%
  ) !important;
}

body.theme-dark .st-pane.st-pane--documents .st-doc-file-type--pdf {
  background: color-mix(
    in srgb,
    var(--surface-container-highest) 70%,
    var(--primary-container) 30%
  ) !important;
  color: color-mix(
    in srgb,
    var(--primary) 90%,
    var(--on-primary-container) 10%
  ) !important;
}

body.theme-dark .st-pane.st-pane--documents .st-doc-file-type--doc {
  background: color-mix(
    in srgb,
    var(--surface-container-highest) 70%,
    var(--info-container) 30%
  ) !important;
  color: color-mix(
    in srgb,
    var(--info) 88%,
    var(--on-info-container) 12%
  ) !important;
}

body.theme-dark .st-pane.st-pane--documents .st-doc-file-type--ppt {
  background: color-mix(
    in srgb,
    var(--surface-container-highest) 68%,
    var(--tertiary-container) 32%
  ) !important;
  color: color-mix(
    in srgb,
    var(--tertiary) 90%,
    var(--on-tertiary-container) 10%
  ) !important;
}

body.theme-dark .st-pane.st-pane--documents .st-doc-file-type--img {
  background: color-mix(
    in srgb,
    var(--surface-container-highest) 70%,
    var(--secondary-container) 30%
  ) !important;
  color: color-mix(
    in srgb,
    var(--secondary) 88%,
    var(--on-secondary-container) 12%
  ) !important;
}

body .st-pane.st-pane--documents .st-doc-meta h3 {
  font-size: 16.5px !important;
  letter-spacing: -0.1px;
}

body .st-pane.st-pane--documents .st-doc-meta p {
  color: var(--st-doc-meta-text) !important;
  font-weight: 500;
}

body .st-pane.st-pane--documents .st-doc-status-line {
  font-size: 10px !important;
  letter-spacing: 0.4px;
  background: color-mix(
    in srgb,
    var(--surface-container-lowest) 78%,
    var(--secondary-container) 22%
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--secondary) 22%,
    transparent
  ) !important;
  color: color-mix(in srgb, var(--on-surface) 88%, transparent) !important;
}

body.theme-dark .st-pane.st-pane--documents .st-doc-status-line {
  background: color-mix(
    in srgb,
    var(--surface-container-highest) 70%,
    var(--secondary-container) 30%
  ) !important;
}

body
  .st-pane.st-pane--documents
  .st-doc-row[data-document-status='ready']
  .st-doc-status-value {
  color: color-mix(
    in srgb,
    var(--secondary) 70%,
    var(--on-surface) 30%
  ) !important;
}

body.theme-dark
  .st-pane.st-pane--documents
  .st-doc-row[data-document-status='ready']
  .st-doc-status-value {
  color: var(--secondary) !important;
}

body
  .st-pane.st-pane--documents
  .st-doc-row[data-document-status='failed']
  .st-doc-status-line {
  border-color: color-mix(in srgb, var(--error) 28%, transparent) !important;
}

body
  .st-pane.st-pane--documents
  .st-doc-row[data-document-status='failed']
  .st-doc-status-value {
  color: color-mix(in srgb, var(--error) 75%, var(--on-surface) 25%) !important;
}

body
  .st-pane.st-pane--documents
  .st-doc-row[data-document-status='pending']
  .st-doc-status-line,
body
  .st-pane.st-pane--documents
  .st-doc-row[data-document-status='extracting']
  .st-doc-status-line,
body
  .st-pane.st-pane--documents
  .st-doc-row[data-document-status='generating_topics']
  .st-doc-status-line {
  border-color: color-mix(in srgb, var(--tertiary) 28%, transparent) !important;
}

body
  .st-pane.st-pane--documents
  .st-doc-row[data-document-status='pending']
  .st-doc-status-value,
body
  .st-pane.st-pane--documents
  .st-doc-row[data-document-status='extracting']
  .st-doc-status-value,
body
  .st-pane.st-pane--documents
  .st-doc-row[data-document-status='generating_topics']
  .st-doc-status-value {
  color: color-mix(
    in srgb,
    var(--tertiary) 76%,
    var(--on-surface) 24%
  ) !important;
}

body .st-pane.st-pane--documents .st-doc-actions {
  gap: 8px;
}

body .st-pane.st-pane--documents .st-doc-actions .st-btn {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 999px !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

body
  .st-pane.st-pane--documents
  .st-doc-actions
  .st-btn:hover:not(:disabled):not([aria-disabled='true']) {
  transform: translateY(-1px);
}

body .st-pane.st-pane--documents .st-doc-actions .st-btn .icon {
  font-size: 14px !important;
}

body .st-pane.st-pane--documents .st-doc-actions [data-document-topics] {
  background: color-mix(
    in srgb,
    var(--surface-container-lowest) 76%,
    var(--primary-container) 24%
  ) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent) !important;
  color: color-mix(
    in srgb,
    var(--primary) 80%,
    var(--on-surface) 20%
  ) !important;
}

body
  .st-pane.st-pane--documents
  .st-doc-actions
  [data-document-topics]:hover:not(:disabled) {
  background: color-mix(
    in srgb,
    var(--surface-container-lowest) 60%,
    var(--primary-container) 40%
  ) !important;
  border-color: color-mix(in srgb, var(--primary) 44%, transparent) !important;
  color: var(--primary) !important;
}

body.theme-dark
  .st-pane.st-pane--documents
  .st-doc-actions
  .button.button-secondary.st-btn[data-document-topics] {
  background: color-mix(
    in srgb,
    var(--surface-container-highest) 70%,
    var(--primary-container) 30%
  ) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 36%, transparent) !important;
  color: var(--primary-strong) !important;
  box-shadow: none !important;
}

body.theme-dark
  .st-pane.st-pane--documents
  .st-doc-actions
  .button.button-secondary.st-btn[data-document-topics]
  .icon {
  color: var(--primary-strong) !important;
}

body.theme-dark
  .st-pane.st-pane--documents
  .st-doc-actions
  .button.button-secondary.st-btn[data-document-topics]:hover:not(:disabled) {
  background: color-mix(
    in srgb,
    var(--surface-container-highest) 52%,
    var(--primary-container) 48%
  ) !important;
  border-color: color-mix(in srgb, var(--primary) 56%, transparent) !important;
  color: var(--primary-strong) !important;
}

body .st-pane.st-pane--documents .st-doc-actions [data-document-download] {
  background: color-mix(
    in srgb,
    var(--surface-container-lowest) 76%,
    var(--secondary-container) 24%
  ) !important;
  border: 1px solid color-mix(in srgb, var(--secondary) 26%, transparent) !important;
  color: color-mix(
    in srgb,
    var(--secondary) 76%,
    var(--on-surface) 24%
  ) !important;
}

body
  .st-pane.st-pane--documents
  .st-doc-actions
  [data-document-download]:hover:not(:disabled) {
  background: color-mix(
    in srgb,
    var(--surface-container-lowest) 60%,
    var(--secondary-container) 40%
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--secondary) 46%,
    transparent
  ) !important;
  color: color-mix(
    in srgb,
    var(--secondary) 92%,
    var(--on-surface) 8%
  ) !important;
}

body.theme-dark
  .st-pane.st-pane--documents
  .st-doc-actions
  .button.button-secondary.st-btn[data-document-download] {
  background: color-mix(
    in srgb,
    var(--surface-container-highest) 68%,
    var(--secondary-container) 32%
  ) !important;
  border: 1px solid color-mix(in srgb, var(--secondary) 36%, transparent) !important;
  color: var(--secondary) !important;
  box-shadow: none !important;
}

body.theme-dark
  .st-pane.st-pane--documents
  .st-doc-actions
  .button.button-secondary.st-btn[data-document-download]
  .icon {
  color: var(--secondary) !important;
}

body.theme-dark
  .st-pane.st-pane--documents
  .st-doc-actions
  .button.button-secondary.st-btn[data-document-download]:hover:not(:disabled) {
  background: color-mix(
    in srgb,
    var(--surface-container-highest) 50%,
    var(--secondary-container) 50%
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--secondary) 56%,
    transparent
  ) !important;
  color: var(--secondary) !important;
}

body .st-pane.st-pane--documents .st-doc-actions [data-document-source-link] {
  background: color-mix(
    in srgb,
    var(--surface-container-lowest) 74%,
    var(--tertiary-container) 26%
  ) !important;
  border: 1px solid color-mix(in srgb, var(--tertiary) 28%, transparent) !important;
  color: color-mix(
    in srgb,
    var(--tertiary) 78%,
    var(--on-surface) 22%
  ) !important;
}

body
  .st-pane.st-pane--documents
  .st-doc-actions
  [data-document-source-link]:hover:not(:disabled) {
  background: color-mix(
    in srgb,
    var(--surface-container-lowest) 58%,
    var(--tertiary-container) 42%
  ) !important;
  border-color: color-mix(in srgb, var(--tertiary) 48%, transparent) !important;
  color: color-mix(
    in srgb,
    var(--tertiary) 92%,
    var(--on-surface) 8%
  ) !important;
}

body.theme-dark
  .st-pane.st-pane--documents
  .st-doc-actions
  .button.button-secondary.st-btn[data-document-source-link] {
  background: color-mix(
    in srgb,
    var(--surface-container-highest) 66%,
    var(--tertiary-container) 34%
  ) !important;
  border: 1px solid color-mix(in srgb, var(--tertiary) 38%, transparent) !important;
  color: var(--tertiary) !important;
  box-shadow: none !important;
}

body.theme-dark
  .st-pane.st-pane--documents
  .st-doc-actions
  .button.button-secondary.st-btn[data-document-source-link]
  .icon {
  color: var(--tertiary) !important;
}

body.theme-dark
  .st-pane.st-pane--documents
  .st-doc-actions
  .button.button-secondary.st-btn[data-document-source-link]:hover:not(
    :disabled
  ) {
  background: color-mix(
    in srgb,
    var(--surface-container-highest) 48%,
    var(--tertiary-container) 52%
  ) !important;
  border-color: color-mix(in srgb, var(--tertiary) 58%, transparent) !important;
  color: var(--tertiary) !important;
}

body .st-pane.st-pane--documents .st-doc-actions [data-document-reextract] {
  background: color-mix(
    in srgb,
    var(--surface-container-lowest) 76%,
    var(--info-container) 24%
  ) !important;
  border: 1px solid color-mix(in srgb, var(--info) 26%, transparent) !important;
  color: color-mix(in srgb, var(--info) 76%, var(--on-surface) 24%) !important;
}

body
  .st-pane.st-pane--documents
  .st-doc-actions
  [data-document-reextract]:hover:not(:disabled) {
  background: color-mix(
    in srgb,
    var(--surface-container-lowest) 60%,
    var(--info-container) 40%
  ) !important;
  border-color: color-mix(in srgb, var(--info) 46%, transparent) !important;
  color: color-mix(in srgb, var(--info) 92%, var(--on-surface) 8%) !important;
}

body.theme-dark
  .st-pane.st-pane--documents
  .st-doc-actions
  .button.button-secondary.st-btn[data-document-reextract] {
  background: color-mix(
    in srgb,
    var(--surface-container-highest) 68%,
    var(--info-container) 32%
  ) !important;
  border: 1px solid color-mix(in srgb, var(--info) 36%, transparent) !important;
  color: var(--info) !important;
  box-shadow: none !important;
}

body.theme-dark
  .st-pane.st-pane--documents
  .st-doc-actions
  .button.button-secondary.st-btn[data-document-reextract]
  .icon {
  color: var(--info) !important;
}

body.theme-dark
  .st-pane.st-pane--documents
  .st-doc-actions
  .button.button-secondary.st-btn[data-document-reextract]:hover:not(
    :disabled
  ) {
  background: color-mix(
    in srgb,
    var(--surface-container-highest) 50%,
    var(--info-container) 50%
  ) !important;
  border-color: color-mix(in srgb, var(--info) 56%, transparent) !important;
  color: var(--info) !important;
}

body .st-pane.st-pane--documents .st-doc-actions [data-document-move] {
  background: color-mix(
    in srgb,
    var(--surface-container-lowest) 80%,
    var(--surface-container) 20%
  ) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent) !important;
  color: color-mix(
    in srgb,
    var(--on-surface) 70%,
    var(--on-surface-variant) 30%
  ) !important;
}

body
  .st-pane.st-pane--documents
  .st-doc-actions
  [data-document-move]:hover:not(:disabled) {
  background: color-mix(
    in srgb,
    var(--surface-container-lowest) 64%,
    var(--primary-container) 36%
  ) !important;
  border-color: color-mix(in srgb, var(--primary) 32%, transparent) !important;
  color: var(--on-surface) !important;
}

body.theme-dark
  .st-pane.st-pane--documents
  .st-doc-actions
  .button.button-secondary.st-btn[data-document-move] {
  background: color-mix(
    in srgb,
    var(--surface-container-highest) 78%,
    var(--surface-container) 22%
  ) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent) !important;
  color: color-mix(
    in srgb,
    var(--on-surface) 88%,
    var(--primary) 12%
  ) !important;
  box-shadow: none !important;
}

body.theme-dark
  .st-pane.st-pane--documents
  .st-doc-actions
  .button.button-secondary.st-btn[data-document-move]
  .icon {
  color: color-mix(
    in srgb,
    var(--on-surface) 88%,
    var(--primary) 12%
  ) !important;
}

body.theme-dark
  .st-pane.st-pane--documents
  .st-doc-actions
  .button.button-secondary.st-btn[data-document-move]:hover:not(:disabled) {
  background: color-mix(
    in srgb,
    var(--surface-container-highest) 58%,
    var(--primary-container) 42%
  ) !important;
  border-color: color-mix(in srgb, var(--primary) 44%, transparent) !important;
  color: var(--on-surface) !important;
}

body .st-pane.st-pane--documents .st-doc-actions .st-btn--danger {
  background: color-mix(
    in srgb,
    var(--surface-container-lowest) 78%,
    var(--error) 22%
  ) !important;
  border: 1px solid color-mix(in srgb, var(--error) 28%, transparent) !important;
  color: color-mix(in srgb, var(--error) 78%, var(--on-surface) 22%) !important;
}

body
  .st-pane.st-pane--documents
  .st-doc-actions
  .st-btn--danger:hover:not(:disabled) {
  background: color-mix(
    in srgb,
    var(--surface-container-lowest) 60%,
    var(--error) 40%
  ) !important;
  border-color: color-mix(in srgb, var(--error) 50%, transparent) !important;
  color: var(--error) !important;
}

body.theme-dark .st-pane.st-pane--documents .st-doc-actions .st-btn--danger {
  background: color-mix(
    in srgb,
    var(--surface-container-highest) 72%,
    var(--error) 28%
  ) !important;
  border-color: color-mix(in srgb, var(--error) 36%, transparent) !important;
  color: var(--error) !important;
}

body.theme-dark
  .st-pane.st-pane--documents
  .st-doc-actions
  .st-btn--danger:hover:not(:disabled) {
  background: color-mix(
    in srgb,
    var(--surface-container-highest) 56%,
    var(--error) 44%
  ) !important;
  border-color: color-mix(in srgb, var(--error) 56%, transparent) !important;
}

body .st-pane.st-pane--documents .st-doc-actions .st-btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent) !important;
}

body .st-pane.st-pane--documents .st-doc-actions .st-btn:disabled,
body .st-pane.st-pane--documents .st-doc-actions .st-btn[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body .st-pane.st-pane--documents .st-doc-row,
  body .st-pane.st-pane--documents .st-doc-actions .st-btn {
    transition: none !important;
    transform: none !important;
  }
}

body.theme-dark
  .st-pane.st-pane--documents
  #documentsDropzone.dropzone
  .dropzone-icon
  .icon,
body.theme-dark
  .st-pane.st-pane--documents
  #documentsDropzone.dropzone
  .dropzone-icon
  i {
  color: var(--primary-strong) !important;
}

body .st-pane.st-pane--flashcards .st-fc-card-action {
  color: color-mix(
    in srgb,
    var(--primary) 60%,
    var(--on-surface) 40%
  ) !important;
}

body .st-pane.st-pane--flashcards .st-fc-card-action .icon,
body .st-pane.st-pane--flashcards .st-fc-card-action i {
  color: color-mix(
    in srgb,
    var(--primary) 60%,
    var(--on-surface) 40%
  ) !important;
}

body .st-pane.st-pane--flashcards .st-fc-card-action:hover {
  color: var(--primary) !important;
}

body .st-pane.st-pane--flashcards .st-fc-card-action:hover .icon,
body .st-pane.st-pane--flashcards .st-fc-card-action:hover i {
  color: var(--primary) !important;
}

body.theme-dark .st-pane.st-pane--flashcards .st-fc-card-action {
  color: var(--primary-strong) !important;
}

body.theme-dark .st-pane.st-pane--flashcards .st-fc-card-action .icon,
body.theme-dark .st-pane.st-pane--flashcards .st-fc-card-action i {
  color: var(--primary-strong) !important;
}

body.theme-dark .st-pane.st-pane--flashcards .st-fc-card-action:hover {
  color: var(--primary-strong) !important;
}

body.theme-dark .st-pane.st-pane--flashcards .st-fc-card-action:hover .icon,
body.theme-dark .st-pane.st-pane--flashcards .st-fc-card-action:hover i {
  color: var(--primary-strong) !important;
}

body:not(.theme-dark) .st-pane .st-qz-edit-icon:hover,
body:not(.theme-dark) .st-pane .st-qz-row .st-qz-edit-icon:hover,
body:not(.theme-dark) .st-pane .st-sum-title-row .st-qz-edit-icon:hover,
body:not(.theme-dark) .st-qz-edit-icon:hover {
  background: color-mix(
    in srgb,
    var(--surface-container-lowest) 92%,
    var(--primary-container) 8%
  ) !important;
  border-color: color-mix(in srgb, var(--primary) 48%, transparent) !important;
  color: var(--primary) !important;
  box-shadow: 0 4px 10px -6px
    color-mix(in srgb, var(--primary) 28%, transparent) !important;
}

body:not(.theme-dark) .st-pane .st-qz-edit-icon:hover .icon,
body:not(.theme-dark) .st-pane .st-qz-edit-icon:hover i,
body:not(.theme-dark) .st-pane .st-qz-row .st-qz-edit-icon:hover .icon,
body:not(.theme-dark) .st-pane .st-qz-row .st-qz-edit-icon:hover i,
body:not(.theme-dark) .st-pane .st-sum-title-row .st-qz-edit-icon:hover .icon,
body:not(.theme-dark) .st-pane .st-sum-title-row .st-qz-edit-icon:hover i {
  color: var(--primary) !important;
}

body.theme-dark
  .st-pane.st-pane--quizzes
  .st-qz-actions
  .st-btn.st-btn--quiz-start:hover:not(:disabled):not([aria-disabled='true']),
body.theme-dark
  .st-pane.st-pane--quizzes
  .st-qz-actions
  .st-btn.st-btn--quiz-start:focus-visible:not(:disabled):not(
    [aria-disabled='true']
  ) {
  background: linear-gradient(
    140deg,
    var(--primary-strong) 0%,
    var(--primary) 38%,
    color-mix(in srgb, var(--primary) 36%, var(--secondary) 64%) 100%
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--primary-strong) 70%,
    transparent
  ) !important;
  color: var(--on-primary) !important;
  box-shadow:
    0 16px 34px -12px color-mix(in srgb, var(--primary) 72%, transparent),
    0 0 0 1px color-mix(in srgb, var(--primary-strong) 32%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--primary-strong) 56%, transparent) !important;
  filter: brightness(1.06);
  transform: translateY(-1px);
}

body.theme-dark
  .st-pane.st-pane--quizzes
  .st-qz-actions
  .st-btn.st-btn--quiz-start:hover:not(:disabled):not([aria-disabled='true'])
  .icon,
body.theme-dark
  .st-pane.st-pane--quizzes
  .st-qz-actions
  .st-btn.st-btn--quiz-start:hover:not(:disabled):not([aria-disabled='true'])
  i {
  color: var(--on-primary) !important;
}

body.theme-dark
  .st-container.st-fs-container
  .st-fs-board
  .st-quizz-actions-row
  .st-btn.st-quizz-action-btn--prev,
body.theme-dark
  .st-container.st-fs-container
  .st-fs-board
  .st-quizz-actions-row
  .st-btn.st-quizz-action-btn--next,
body.theme-dark
  .st-container.st-fs-container
  .st-fs-board
  .st-quizz-actions-row
  .st-btn.st-quizz-action-btn--finish {
  min-height: 50px !important;
  border-radius: 14px !important;
  padding: 0 22px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  transition:
    background 200ms ease,
    border-color 200ms ease,
    box-shadow 220ms ease,
    color 200ms ease,
    filter 220ms ease,
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

body
  .st-container.st-fs-container
  .st-fs-board
  .st-quizz-actions-row
  .st-btn.st-quizz-action-btn[hidden],
body.theme-dark
  .st-container.st-fs-container
  .st-fs-board
  .st-quizz-actions-row
  .st-btn.st-quizz-action-btn[hidden] {
  display: none !important;
}

body.theme-dark
  .st-container.st-fs-container
  .st-fs-board
  .st-quizz-actions-row
  .st-btn.st-quizz-action-btn--prev {
  background: color-mix(
    in srgb,
    var(--surface-container-high) 84%,
    var(--primary-container) 16%
  ) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent) !important;
  color: color-mix(
    in srgb,
    var(--on-surface) 92%,
    var(--primary) 8%
  ) !important;
  box-shadow:
    0 10px 22px -16px color-mix(in srgb, black 60%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--primary) 14%, transparent) !important;
  filter: none !important;
  transform: none !important;
}

body.theme-dark
  .st-container.st-fs-container
  .st-fs-board
  .st-quizz-actions-row
  .st-btn.st-quizz-action-btn--prev
  .icon,
body.theme-dark
  .st-container.st-fs-container
  .st-fs-board
  .st-quizz-actions-row
  .st-btn.st-quizz-action-btn--prev
  i {
  color: color-mix(
    in srgb,
    var(--primary-strong) 78%,
    var(--on-surface) 22%
  ) !important;
  font-size: 12px !important;
}

body.theme-dark
  .st-container.st-fs-container
  .st-fs-board
  .st-quizz-actions-row
  .st-btn.st-quizz-action-btn--prev:hover:not(:disabled):not(
    [aria-disabled='true']
  ),
body.theme-dark
  .st-container.st-fs-container
  .st-fs-board
  .st-quizz-actions-row
  .st-btn.st-quizz-action-btn--prev:focus-visible:not(:disabled):not(
    [aria-disabled='true']
  ) {
  background: color-mix(
    in srgb,
    var(--surface-container-high) 68%,
    var(--primary-container) 32%
  ) !important;
  border-color: color-mix(in srgb, var(--primary) 42%, transparent) !important;
  color: var(--on-surface) !important;
  box-shadow:
    0 14px 26px -14px color-mix(in srgb, var(--primary) 36%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--primary) 24%, transparent) !important;
  transform: translateY(-1px) !important;
}

body.theme-dark
  .st-container.st-fs-container
  .st-fs-board
  .st-quizz-actions-row
  .st-btn.st-quizz-action-btn--prev:hover:not(:disabled):not(
    [aria-disabled='true']
  )
  .icon,
body.theme-dark
  .st-container.st-fs-container
  .st-fs-board
  .st-quizz-actions-row
  .st-btn.st-quizz-action-btn--prev:hover:not(:disabled):not(
    [aria-disabled='true']
  )
  i {
  color: var(--primary-strong) !important;
}

body.theme-dark
  .st-container.st-fs-container
  .st-fs-board
  .st-quizz-actions-row
  .st-btn.st-quizz-action-btn--next {
  background: linear-gradient(
    138deg,
    var(--primary-strong) 0%,
    var(--primary) 48%,
    color-mix(in srgb, var(--primary) 38%, var(--secondary) 62%) 100%
  ) !important;
  border: 1px solid color-mix(in srgb, var(--primary-strong) 64%, transparent) !important;
  color: var(--on-primary) !important;
  box-shadow:
    0 14px 30px -14px color-mix(in srgb, var(--primary) 56%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--primary-strong) 46%, transparent) !important;
  filter: none !important;
  transform: none !important;
}

body.theme-dark
  .st-container.st-fs-container
  .st-fs-board
  .st-quizz-actions-row
  .st-btn.st-quizz-action-btn--next
  .icon,
body.theme-dark
  .st-container.st-fs-container
  .st-fs-board
  .st-quizz-actions-row
  .st-btn.st-quizz-action-btn--next
  i {
  color: var(--on-primary) !important;
  font-size: 12px !important;
}

body.theme-dark
  .st-container.st-fs-container
  .st-fs-board
  .st-quizz-actions-row
  .st-btn.st-quizz-action-btn--next:hover:not(:disabled):not(
    [aria-disabled='true']
  ),
body.theme-dark
  .st-container.st-fs-container
  .st-fs-board
  .st-quizz-actions-row
  .st-btn.st-quizz-action-btn--next:focus-visible:not(:disabled):not(
    [aria-disabled='true']
  ) {
  background: linear-gradient(
    138deg,
    color-mix(in srgb, var(--primary-strong) 88%, white 12%) 0%,
    var(--primary) 42%,
    color-mix(in srgb, var(--primary) 28%, var(--secondary) 72%) 100%
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--primary-strong) 80%,
    transparent
  ) !important;
  box-shadow:
    0 18px 38px -12px color-mix(in srgb, var(--primary) 64%, transparent),
    0 0 0 1px color-mix(in srgb, var(--primary-strong) 26%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--primary-strong) 56%, transparent) !important;
  filter: brightness(1.04);
  transform: translateY(-1px) !important;
}

body.theme-dark
  .st-container.st-fs-container
  .st-fs-board
  .st-quizz-actions-row
  .st-btn.st-quizz-action-btn--finish {
  min-width: 196px !important;
  background: linear-gradient(
    138deg,
    var(--primary-strong) 0%,
    var(--primary) 38%,
    var(--secondary) 100%
  ) !important;
  border: 1px solid color-mix(in srgb, var(--primary-strong) 70%, transparent) !important;
  color: var(--on-primary) !important;
  box-shadow:
    0 18px 36px -12px color-mix(in srgb, var(--primary) 62%, transparent),
    0 0 0 1px color-mix(in srgb, var(--primary-strong) 24%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 18%, transparent) !important;
  filter: none !important;
  transform: none !important;
}

body.theme-dark
  .st-container.st-fs-container
  .st-fs-board
  .st-quizz-actions-row
  .st-btn.st-quizz-action-btn--finish
  .icon,
body.theme-dark
  .st-container.st-fs-container
  .st-fs-board
  .st-quizz-actions-row
  .st-btn.st-quizz-action-btn--finish
  i {
  color: var(--on-primary) !important;
  font-size: 13px !important;
}

body.theme-dark
  .st-container.st-fs-container
  .st-fs-board
  .st-quizz-actions-row
  .st-btn.st-quizz-action-btn--finish:hover:not(:disabled):not(
    [aria-disabled='true']
  ),
body.theme-dark
  .st-container.st-fs-container
  .st-fs-board
  .st-quizz-actions-row
  .st-btn.st-quizz-action-btn--finish:focus-visible:not(:disabled):not(
    [aria-disabled='true']
  ) {
  background: linear-gradient(
    138deg,
    color-mix(in srgb, var(--primary-strong) 92%, white 8%) 0%,
    var(--primary) 36%,
    color-mix(in srgb, var(--secondary) 92%, white 8%) 100%
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--primary-strong) 86%,
    transparent
  ) !important;
  box-shadow:
    0 22px 44px -12px color-mix(in srgb, var(--primary) 72%, transparent),
    0 0 0 2px color-mix(in srgb, var(--primary-strong) 30%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 24%, transparent) !important;
  filter: brightness(1.05);
  transform: translateY(-1px) !important;
}

body.theme-dark
  .st-container.st-fs-container
  .st-fs-board
  .st-quizz-actions-row
  .st-btn.st-quizz-action-btn--finish[disabled],
body.theme-dark
  .st-container.st-fs-container
  .st-fs-board
  .st-quizz-actions-row
  .st-btn.st-quizz-action-btn--finish[aria-disabled='true'] {
  background: color-mix(
    in srgb,
    var(--surface-container-high) 78%,
    var(--primary-container) 22%
  ) !important;
  border-color: color-mix(in srgb, var(--primary) 18%, transparent) !important;
  color: color-mix(
    in srgb,
    var(--on-surface-variant) 80%,
    var(--primary) 20%
  ) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  opacity: 0.7;
  cursor: not-allowed !important;
}

body.theme-dark
  .st-container.st-fs-container
  .st-fs-board
  .st-quizz-actions-row
  .st-btn.st-quizz-action-btn--finish[disabled]
  .icon,
body.theme-dark
  .st-container.st-fs-container
  .st-fs-board
  .st-quizz-actions-row
  .st-btn.st-quizz-action-btn--finish[disabled]
  i,
body.theme-dark
  .st-container.st-fs-container
  .st-fs-board
  .st-quizz-actions-row
  .st-btn.st-quizz-action-btn--finish[aria-disabled='true']
  .icon,
body.theme-dark
  .st-container.st-fs-container
  .st-fs-board
  .st-quizz-actions-row
  .st-btn.st-quizz-action-btn--finish[aria-disabled='true']
  i {
  color: color-mix(
    in srgb,
    var(--primary) 60%,
    var(--on-surface-variant) 40%
  ) !important;
}

body.theme-dark
  .st-container.st-fs-container
  .st-fs-board
  .st-quizz-actions-row
  .st-btn.st-quizz-action-btn--prev[disabled],
body.theme-dark
  .st-container.st-fs-container
  .st-fs-board
  .st-quizz-actions-row
  .st-btn.st-quizz-action-btn--prev[aria-disabled='true'],
body.theme-dark
  .st-container.st-fs-container
  .st-fs-board
  .st-quizz-actions-row
  .st-btn.st-quizz-action-btn--next[disabled],
body.theme-dark
  .st-container.st-fs-container
  .st-fs-board
  .st-quizz-actions-row
  .st-btn.st-quizz-action-btn--next[aria-disabled='true'] {
  opacity: 0.55;
  filter: saturate(0.7);
  cursor: not-allowed !important;
  transform: none !important;
}

body.theme-dark
  .st-container.st-fs-container
  .st-fs-board
  .st-quizz-actions-row {
  background: color-mix(
    in srgb,
    var(--surface-container) 88%,
    var(--primary-container) 12%
  ) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent) !important;
  border-radius: 22px !important;
  padding: 14px !important;
  box-shadow:
    0 16px 32px -22px color-mix(in srgb, black 70%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--primary) 10%, transparent) !important;
}

@media (prefers-reduced-motion: reduce) {
  body.theme-dark
    .st-container.st-fs-container
    .st-fs-board
    .st-quizz-actions-row
    .st-btn.st-quizz-action-btn--prev,
  body.theme-dark
    .st-container.st-fs-container
    .st-fs-board
    .st-quizz-actions-row
    .st-btn.st-quizz-action-btn--next,
  body.theme-dark
    .st-container.st-fs-container
    .st-fs-board
    .st-quizz-actions-row
    .st-btn.st-quizz-action-btn--finish {
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}

body.theme-dark .st-pane.st-pane--flashcards.st-fs-board .st-fs-stage {
  padding-top: 22px !important;
}

body.theme-dark .st-pane.st-pane--flashcards.st-fs-board .st-fs-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    ellipse at 50% 0%,
    color-mix(in srgb, var(--primary) 12%, transparent) 0%,
    transparent 58%
  );
}

body.theme-dark .st-pane.st-pane--flashcards.st-fs-board .st-fs-deck-back {
  height: 16px !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 16px -14px color-mix(in srgb, black 70%, transparent) !important;
}

body.theme-dark .st-pane.st-pane--flashcards.st-fs-board .st-fs-deck-back--3 {
  top: 6px !important;
  width: min(100%, 632px) !important;
  background: color-mix(
    in srgb,
    var(--surface-container-highest) 70%,
    var(--tertiary-container) 30%
  ) !important;
  border: 1px solid color-mix(in srgb, var(--tertiary) 28%, transparent) !important;
  opacity: 0.92;
}

body.theme-dark .st-pane.st-pane--flashcards.st-fs-board .st-fs-deck-back--2 {
  top: 14px !important;
  width: min(100%, 652px) !important;
  background: color-mix(
    in srgb,
    var(--surface-container-highest) 68%,
    var(--secondary-container) 32%
  ) !important;
  border: 1px solid color-mix(in srgb, var(--secondary) 30%, transparent) !important;
  opacity: 0.96;
}

body.theme-dark .st-pane.st-pane--flashcards.st-fs-board .st-fs-deck-back--1 {
  top: 22px !important;
  width: min(100%, 670px) !important;
  background: color-mix(
    in srgb,
    var(--surface-container-highest) 64%,
    var(--primary-container) 36%
  ) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent) !important;
}

body.theme-dark .st-pane.st-pane--flashcards.st-fs-board .st-fs-card {
  z-index: 2 !important;
  background: linear-gradient(
    150deg,
    color-mix(
        in srgb,
        var(--surface-container-highest) 78%,
        var(--primary-container) 22%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-highest) 86%,
        var(--secondary-container) 14%
      )
      100%
  ) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent) !important;
  border-radius: 22px !important;
  padding: 22px !important;
  box-shadow:
    0 28px 52px -28px color-mix(in srgb, black 78%, transparent),
    0 0 0 1px color-mix(in srgb, var(--primary) 14%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--primary) 18%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--secondary) 12%, transparent) !important;
  transition:
    transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 220ms ease,
    box-shadow 220ms ease !important;
}

body.theme-dark .st-pane.st-pane--flashcards.st-fs-board .st-fs-card:hover {
  border-color: color-mix(in srgb, var(--primary) 42%, transparent) !important;
  box-shadow:
    0 36px 60px -28px color-mix(in srgb, black 80%, transparent),
    0 0 0 1px color-mix(in srgb, var(--primary) 28%, transparent),
    0 14px 28px -16px color-mix(in srgb, var(--primary) 32%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--primary) 26%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--secondary) 18%, transparent) !important;
  transform: translateY(-2px) !important;
}

body.theme-dark
  .st-pane.st-pane--flashcards.st-fs-board
  .st-fs-card:focus-visible {
  outline: none !important;
  border-color: color-mix(in srgb, var(--primary) 56%, transparent) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent),
    0 28px 52px -28px color-mix(in srgb, black 78%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--primary) 26%, transparent) !important;
}

@media (prefers-reduced-motion: reduce) {
  body.theme-dark .st-pane.st-pane--flashcards.st-fs-board .st-fs-card,
  body.theme-dark .st-pane.st-pane--flashcards.st-fs-board .st-fs-deck-back {
    transition: none !important;
    transform: none !important;
  }
}

body
  .st-panel-workspace-toolbar
  .st-panel-workspace-select
  .custom-dropdown-trigger
  .custom-dropdown-trigger-icon,
body
  .st-panel-workspace-toolbar
  .st-panel-workspace-select
  .custom-dropdown-trigger
  .custom-dropdown-trigger-image {
  display: none !important;
}

body .st-pane .st-library-toolbar {
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
}

body .st-pane .st-library-toolbar .st-search-field {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
}

body .st-pane .st-library-toolbar .st-create-actions {
  flex: 0 0 auto !important;
  width: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  grid-template-columns: none !important;
}

@media (max-width: 760px) {
  body .st-pane .st-library-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body .st-pane .st-library-toolbar .st-create-actions {
    width: 100% !important;
  }

  body .st-pane .st-library-toolbar .st-create-actions .button-primary.st-btn {
    width: 100% !important;
  }

  body .st-pane .st-library-toolbar .st-create-actions--flashcards {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body .st-pane .st-library-toolbar .st-create-actions--flashcards .st-btn {
    width: 100% !important;
  }
}

body[class] .st-pane .st-search-field .search-field__input[disabled],
body[class]
  .st-pane
  .st-search-field
  .search-field__input[aria-disabled='true'] {
  background: color-mix(
    in srgb,
    var(--surface-container) 84%,
    var(--outline-variant) 16%
  ) !important;
  border: 1px dashed color-mix(in srgb, var(--outline-variant) 70%, transparent) !important;
  color: var(--on-surface-variant) !important;
  box-shadow: none !important;
  opacity: 0.78;
  filter: saturate(0.55);
  cursor: not-allowed;
  pointer-events: none;
}

body[class]
  .st-pane
  .st-search-field
  .search-field__input[disabled]::placeholder,
body[class]
  .st-pane
  .st-search-field
  .search-field__input[aria-disabled='true']::placeholder {
  color: var(--on-surface-variant) !important;
  font-style: italic;
  opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {
  body[class] .st-pane .st-search-field .search-field__input {
    transition: none !important;
  }
}

body .st-pane .st-panel-box[data-empty='1'] {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.st-pane-empty[hidden],
body[class] .st-pane-empty[hidden] {
  display: none !important;
}

.st-pane-empty {
  grid-column: 1 / -1;
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 28px 26px;
  margin: 0;
  border: none;
  border-radius: 22px;
  background: linear-gradient(
    135deg,
    color-mix(
        in srgb,
        var(--surface-container-high) 88%,
        var(--primary-container) 12%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container-high) 92%,
        var(--secondary-container) 8%
      )
      100%
  );
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent),
    0 12px 28px -18px color-mix(in srgb, var(--primary) 22%, transparent);
  position: relative;
  overflow: hidden;
}

.st-pane-empty::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--primary) 22%, transparent) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.st-pane-empty__media {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: color-mix(
    in srgb,
    var(--primary) 18%,
    var(--surface-container-highest) 82%
  );
  color: var(--primary);
  font-size: 26px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--primary) 28%, transparent);
}

.st-pane-empty__media .icon,
.st-pane-empty__media i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  /* A global icon rule adds margin-right for inline icon+text spacing; the
     grid centers the margin box, which shoved the glyph 4px left of center. */
  margin: 0 !important;
  color: var(--primary) !important;
}

/* The FA mask glyph carries a baseline shift (vertical-align: -0.125em) that
   pushes it off-center whenever the <i> resolves to inline-block; neutralize
   it so the glyph centers in the circle regardless of display fallback. */
.st-pane-empty__media .icon::before,
.st-pane-empty__media i::before {
  vertical-align: 0 !important;
}

body.theme-dark .st-pane-empty__media .icon,
body.theme-dark .st-pane-empty__media i {
  color: var(--on-primary-container) !important;
}

.st-pane-empty__copy {
  position: relative;
  min-width: 0;
}

.st-pane-empty__title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  color: var(--on-surface);
  letter-spacing: 0.1px;
}

.st-pane-empty__hint {
  margin: 0;
  font-size: 14px;
  color: var(--on-surface-variant);
  line-height: 1.55;
}

/* Documents "Add new material" tabs: upload vs URL import (variant B).
   Reuses the base tabs component; pills restyled with the study-tab tokens.
   The base component draws its own boxed frame - flatten it so the tabs sit
   directly on the upload shell instead of a box-in-box. */
.st-doc-upload-tabs.tab-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 4px 0 0 !important;
}

.st-doc-upload-tabs .tab-nav {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
}

.st-doc-upload-tabs .tab-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 700 !important;
}

.st-doc-upload-tabs.tab-container.variant-pills .tab-button.active {
  background: var(--eduloo-study-tab-active-bg) !important;
  color: var(--eduloo-study-tab-active-text) !important;
  border-color: transparent !important;
}

.st-doc-upload-tabs.tab-container.variant-pills .tab-button.active .icon {
  color: var(--eduloo-study-tab-active-text) !important;
}

.st-doc-upload-tabs .tab-panel {
  padding: 0 !important;
}

.st-doc-upload-tabs .st-doc-url-import {
  margin-top: 0 !important;
}

html body .st-doc-upload-tabs .tab-panel .st-doc-processing-note {
  margin-top: 14px !important;
}

/* URL row: neutralize the framework's form-input bottom margin and button
   side margins, then center everything on one axis. The globe icon was
   absolutely pinned for the old stacked layout - recenter it dynamically. */
html body .st-doc-upload-tabs .st-doc-url-import-row {
  align-items: center !important;
  gap: 10px !important;
}

html body .st-doc-upload-tabs .st-doc-url-import-input {
  margin: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
}

html body .st-doc-upload-tabs .st-doc-url-import-btn {
  margin: 0 !important;
}

html body .st-doc-upload-tabs .st-doc-url-icon {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Ready document whose topic detection found nothing: generation from it
   yields nothing, so the state must be visible rather than a hidden row. */
.st-doc-meta-no-topics,
body[class] .st-doc-meta-no-topics {
  color: var(--tertiary) !important;
  font-weight: 600;
}

.st-pane-empty__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 16px;
}

/* base_elements.css gives every <button> asymmetric margins (8px 8px 8px 0),
   which makes the flex gaps look unequal - spacing comes from gap alone. */
.st-pane-empty__actions > *,
body[class] .st-pane-empty__actions > * {
  margin: 0 !important;
}

/* One rule covers both the <button> and <a> variants; !important resets are
   needed because base_elements.css styles every <button> with !important and
   eduloo styles.css forces `a { text-decoration: none !important }`. */
button.st-pane-empty__alt-btn,
a.st-pane-empty__alt-btn,
body[class] .st-pane-empty__alt-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 9px 14px !important;
  min-height: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 1px solid
    color-mix(in srgb, var(--on-surface-variant) 34%, transparent) !important;
  box-shadow: none !important;
  color: var(--on-surface-variant) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer;
}

.st-pane-empty__alt-btn .icon,
body[class] .st-pane-empty__alt-btn .icon {
  font-size: 12px;
  color: inherit !important;
}

button.st-pane-empty__alt-btn:hover:not(:disabled),
a.st-pane-empty__alt-btn:hover,
body[class] .st-pane-empty__alt-btn:hover {
  color: var(--primary) !important;
  border-color: color-mix(in srgb, var(--primary) 55%, transparent) !important;
  background: color-mix(in srgb, var(--primary) 8%, transparent) !important;
}

#toast-topics-ready-return .toast-action-row {
  margin-top: 20px;
}

body.theme-dark .st-pane-empty {
  background: linear-gradient(
    135deg,
    color-mix(
        in srgb,
        var(--surface-container-high) 86%,
        var(--primary-container) 14%
      )
      0%,
    color-mix(
        in srgb,
        var(--surface-container) 92%,
        var(--primary-container) 8%
      )
      100%
  );
  box-shadow: none;
}

body.theme-dark .st-pane-empty__media {
  background: color-mix(
    in srgb,
    var(--primary-container) 60%,
    var(--surface-container-highest) 40%
  );
  color: var(--on-primary-container);
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--primary) 36%, transparent);
}

@media (max-width: 760px) {
  body[class] .st-pane-empty {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    text-align: center !important;
    padding: 24px 18px !important;
    gap: 12px !important;
  }

  body[class] .st-pane-empty__media {
    margin: 0 auto !important;
    justify-self: center !important;
  }

  body[class] .st-pane-empty__copy {
    width: 100% !important;
    text-align: center !important;
  }

  body[class] .st-pane-empty__title,
  body[class] .st-pane-empty__hint {
    text-align: center !important;
  }

  body[class] .st-pane-empty__actions {
    flex-direction: column !important;
    justify-content: center !important;
  }

  body[class] .st-pane-empty__actions .st-pane-empty__cta {
    width: 100% !important;
    justify-content: center !important;
  }
}

body.theme-dark[class][class]
  .st-pane
  .st-search-field
  .search-field__input:focus,
body.theme-dark[class][class]
  .st-pane
  .st-search-field
  .search-field__input:focus-visible,
body.theme-dark[class][class]
  .st-pane
  .st-search-field--flashcards
  .search-field__input:focus,
body.theme-dark[class][class]
  .st-pane
  .st-search-field--flashcards
  .search-field__input:focus-visible,
body.theme-dark[class][class]
  .st-pane.st-pane--flashcards
  .st-search-field
  .search-field__input:focus,
body.theme-dark[class][class]
  .st-pane.st-pane--flashcards
  .st-search-field
  .search-field__input:focus-visible,
body.theme-dark[class][class]
  .st-pane.st-pane--flashcards
  .st-search-field--flashcards
  .search-field__input:focus,
body.theme-dark[class][class]
  .st-pane.st-pane--flashcards
  .st-search-field--flashcards
  .search-field__input:focus-visible {
  border: 1px solid color-mix(in srgb, var(--outline-variant) 70%, transparent) !important;
  border-color: color-mix(
    in srgb,
    var(--outline-variant) 70%,
    transparent
  ) !important;
  box-shadow: inset 0 1px 2px
    color-mix(in srgb, var(--on-surface) 6%, transparent) !important;
  outline: none !important;
  outline-color: transparent !important;
  outline-width: 0 !important;
}

@media (max-width: 760px) {
  body[class] .st-pane .st-library-toolbar,
  body[class] .st-pane.st-pane--quizzes .st-qz-toolbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  body[class] .st-pane .st-library-toolbar .st-search-field,
  body[class] .st-pane.st-pane--quizzes .st-qz-toolbar .st-search-field {
    width: 100% !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    position: relative !important;
  }

  body[class] .st-pane .st-search-field .search-field__input {
    width: 100% !important;
    min-height: 54px !important;
    height: 54px !important;
    line-height: normal !important;
    padding: 0 18px 0 48px !important;
    border-radius: 16px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
  }

  body[class] .st-pane .st-search-field .search-field__icon {
    left: 18px !important;
    font-size: 16px !important;
  }

  body[class] .st-pane .st-library-toolbar .st-create-actions,
  body[class] .st-pane.st-pane--quizzes .st-qz-toolbar .st-create-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  body[class]
    .st-pane
    .st-library-toolbar
    .st-create-actions
    .button-primary.st-btn,
  body[class]
    .st-pane
    .st-library-toolbar
    .st-create-actions
    .st-btn--upload-prompt,
  body[class]
    .st-pane.st-pane--quizzes
    .st-qz-toolbar
    .st-create-actions
    .button-primary.st-btn,
  body[class]
    .st-pane.st-pane--quizzes
    .st-qz-toolbar
    .st-create-actions
    .st-btn--upload-prompt {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px !important;
    padding: 0 18px !important;
  }

  body[class]
    .st-pane
    .st-library-toolbar
    .st-create-actions
    .button-primary.st-btn
    .icon,
  body[class]
    .st-pane.st-pane--quizzes
    .st-qz-toolbar
    .st-create-actions
    .button-primary.st-btn
    .icon {
    font-size: 14px !important;
  }

  body[class] .st-pane.st-pane--documents .st-tab-content-controls--documents {
    padding: 12px !important;
    border-radius: 18px !important;
    gap: 10px !important;
  }

  body[class] .st-pane.st-pane--documents .st-doc-controls-main {
    width: 100% !important;
  }

  body[class] .st-pane.st-pane--documents .st-search-field--documents {
    width: 100% !important;
    height: auto !important;
  }

  body[class] .st-pane.st-pane--quizzes .st-qz-list {
    gap: 12px !important;
  }

  body[class] .st-pane.st-pane--quizzes .st-qz-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 20px !important;
  }

  body[class] .st-pane.st-pane--quizzes .st-qz-meta {
    gap: 10px !important;
  }

  body[class] .st-pane.st-pane--quizzes .st-qz-meta-top {
    gap: 8px !important;
    min-height: 0 !important;
  }

  body[class] .st-pane.st-pane--quizzes .st-qz-title-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  body[class] .st-pane.st-pane--quizzes .st-qz-title-row h3 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 19px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body[class] .st-pane.st-pane--quizzes .st-qz-edit-icon {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    flex: 0 0 32px !important;
  }

  body[class] .st-pane.st-pane--quizzes .st-qz-edit-icon .icon {
    font-size: 11px !important;
  }

  body[class] .st-pane.st-pane--quizzes .st-qz-utility-line {
    flex-wrap: wrap !important;
    gap: 6px 8px !important;
    font-size: 12.5px !important;
  }

  body[class] .st-pane.st-pane--quizzes .st-qz-question-count,
  body[class] .st-pane.st-pane--quizzes .st-qz-created-at {
    font-size: 12.5px !important;
  }

  body[class] .st-pane.st-pane--quizzes .st-qz-meta-bottom {
    gap: 6px !important;
  }

  body[class] .st-pane.st-pane--quizzes .st-qz-type-badges {
    gap: 6px !important;
  }

  body[class] .st-pane.st-pane--quizzes .st-qz-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    align-self: stretch !important;
    gap: 8px !important;
    grid-template-columns: none !important;
  }

  body[class] .st-pane.st-pane--quizzes .st-qz-actions .st-qz-session-info {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 14px !important;
    flex: 0 0 48px !important;
    font-size: 15px !important;
    align-self: stretch !important;
  }

  body[class] .st-pane.st-pane--quizzes .st-qz-actions .st-qz-session-info i,
  body[class]
    .st-pane.st-pane--quizzes
    .st-qz-actions
    .st-qz-session-info
    .icon {
    font-size: 15px !important;
  }

  body[class]
    .st-pane.st-pane--quizzes
    .st-qz-actions
    .st-btn--only-icon:not(.st-btn--quiz-start) {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 14px !important;
    flex: 0 0 48px !important;
    padding: 0 !important;
    justify-self: auto !important;
    align-self: stretch !important;
  }

  body[class] .st-pane.st-pane--quizzes .st-qz-actions .st-btn--quiz-start {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: 48px !important;
    border-radius: 999px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px !important;
  }

  body[class]
    .st-pane.st-pane--quizzes
    .st-qz-actions
    .st-btn--quiz-start
    .icon {
    font-size: 13px !important;
  }
}

@media (max-width: 520px) {
  body[class] .st-pane.st-pane--quizzes .st-qz-row {
    padding: 14px !important;
    border-radius: 18px !important;
  }

  body[class] .st-pane .st-search-field .search-field__input {
    min-height: 52px !important;
    height: 52px !important;
    padding: 0 16px 0 44px !important;
    font-size: 14.5px !important;
  }

  body[class] .st-pane .st-search-field .search-field__icon {
    left: 16px !important;
  }

  body[class]
    .st-pane
    .st-library-toolbar
    .st-create-actions
    .button-primary.st-btn,
  body[class]
    .st-pane
    .st-library-toolbar
    .st-create-actions
    .st-btn--upload-prompt,
  body[class]
    .st-pane.st-pane--quizzes
    .st-qz-toolbar
    .st-create-actions
    .button-primary.st-btn,
  body[class]
    .st-pane.st-pane--quizzes
    .st-qz-toolbar
    .st-create-actions
    .st-btn--upload-prompt {
    min-height: 50px !important;
    height: 50px !important;
    font-size: 13.5px !important;
  }

  body[class] .st-pane.st-pane--quizzes .st-qz-title-row h3 {
    font-size: 18px !important;
  }

  body[class] .st-pane.st-pane--quizzes .st-qz-actions .st-qz-session-info,
  body[class]
    .st-pane.st-pane--quizzes
    .st-qz-actions
    .st-btn--only-icon:not(.st-btn--quiz-start) {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    flex-basis: 46px !important;
    border-radius: 13px !important;
  }

  body[class] .st-pane.st-pane--quizzes .st-qz-actions .st-btn--quiz-start {
    min-height: 46px !important;
    height: 46px !important;
    font-size: 13.5px !important;
    padding: 0 14px !important;
  }
}

body.theme-dark:has(.st-container) .st-container,
body.theme-dark:has(.st-container) .st-tabs,
body.theme-dark:has(.st-container) .st-pane,
body.theme-dark:has(.st-container) [data-study-page] {
  --eduloo-study-filters-bg: var(--surface-container-low) !important;
  --eduloo-study-tabs-bg: var(--surface-container-low) !important;
  --eduloo-study-toolbar-bg: var(--surface-container-low) !important;
  --eduloo-study-shell-bg: var(--surface-container-lowest) !important;
  --eduloo-study-pane-bg: var(--surface-container-lowest) !important;
  --eduloo-study-hero-bg: var(--surface-container-high) !important;
  --eduloo-study-surface-soft: var(--surface-container-low) !important;
  --eduloo-study-surface-strong: var(--surface-container) !important;
  --eduloo-study-chip-bg: var(--surface-container) !important;
  --eduloo-study-row-bg: var(--surface-container-lowest) !important;
  --eduloo-study-gen-panel-bg: var(--surface-container-low) !important;
  --eduloo-fc-shell-bg: var(--surface-container-lowest) !important;
  --eduloo-fc-hero-bg: var(--surface-container-high) !important;
  --eduloo-fc-surface-soft: var(--surface-container-low) !important;
  --eduloo-fc-chip-bg: var(--surface-container) !important;
  --eduloo-fc-empty-bg: var(--surface-container-lowest) !important;
  --eduloo-fc-card-bg: var(--surface-container) !important;
  --eduloo-fc-editor-shell-bg: var(--surface-container-lowest) !important;
  --eduloo-doc-shell-bg: var(--surface-container-lowest) !important;
  --eduloo-doc-hero-bg: var(--surface-container-high) !important;
  --eduloo-doc-surface-soft: var(--surface-container-low) !important;
  --eduloo-doc-chip-bg: var(--surface-container) !important;
  --eduloo-doc-row-bg: var(--surface-container-lowest) !important;
  --eduloo-doc-mode-overlay-card-bg: var(--surface-container) !important;
}

body.theme-dark:has(.st-container) .st-tab-content-header {
  background: linear-gradient(
    177deg,
    color-mix(
        in srgb,
        var(--surface-container-highest) 72%,
        var(--surface-container-high) 28%
      )
      0%,
    var(--surface-container-high) 52%,
    var(--surface-container) 100%
  ) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 26px 54px -30px rgba(0, 0, 0, 0.76) !important;
}

body.theme-dark:has(.st-container)
  .st-fs-finished-container
  .st-tab-content-header,
body.theme-dark:has(.st-container)
  .st-quizz-finished-container
  .st-tab-content-header {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

body.theme-dark
  .st-pane.st-pane--quizzes
  .st-qz-toolbar
  .st-create-actions
  .button-primary.st-btn {
  background: var(--eduloo-study-cta-bg) !important;
  border: 1px solid var(--eduloo-study-cta-border) !important;
  color: var(--eduloo-study-cta-text) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--on-surface) 22%, transparent),
    var(--eduloo-study-cta-shadow) !important;
}

body.theme-dark:has(.st-container) .st-fc-card,
body.theme-dark:has(.st-container) .st-panel-box {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 14px 32px -24px rgba(0, 0, 0, 0.6) !important;
  transition:
    transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 200ms ease,
    box-shadow 200ms ease !important;
}

body.theme-dark:has(.st-container) .st-fc-card:hover,
body.theme-dark:has(.st-container) .st-panel-box:hover {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--primary) 30%, transparent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 22px 42px -24px color-mix(in srgb, var(--primary) 20%, black 80%) !important;
}

@media (prefers-reduced-motion: reduce) {
  body.theme-dark:has(.st-container) .st-fc-card,
  body.theme-dark:has(.st-container) .st-panel-box {
    transition: none !important;
  }
  body.theme-dark:has(.st-container) .st-fc-card:hover,
  body.theme-dark:has(.st-container) .st-panel-box:hover {
    transform: none !important;
  }
}

body[data-mobile].theme-dark:has(.st-container) .st-fc-card,
body[data-mobile].theme-dark:has(.st-container) .st-panel-box,
body[data-mobile].theme-dark:has(.st-container) .st-fc-card:hover,
body[data-mobile].theme-dark:has(.st-container) .st-panel-box:hover {
  box-shadow: none !important;
  transform: none !important;
}

body[class]:not([data-mobile])
  .st-pane.st-pane--quizzes
  .st-qz-actions
  .st-btn.st-btn--quiz-start {
  position: relative !important;
  overflow: hidden !important;
  background-color: transparent !important;
  background-image: linear-gradient(
    135deg,
    var(--primary) 0%,
    color-mix(in srgb, var(--primary) 84%, var(--primary-dim) 16%) 100%
  ) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 62%, transparent) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px -14px
    color-mix(in srgb, var(--primary) 44%, transparent) !important;
  filter: none !important;
  transition:
    border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
    color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body[class]:not([data-mobile]).theme-dark
  .st-pane.st-pane--quizzes
  .st-qz-actions
  .st-btn.st-btn--quiz-start {
  border-color: color-mix(in srgb, var(--primary) 46%, transparent) !important;
  box-shadow: 0 10px 22px -13px
    color-mix(in srgb, var(--primary) 56%, transparent) !important;
}

body[class]:not([data-mobile])
  .st-pane.st-pane--quizzes
  .st-qz-actions
  .st-btn.st-btn--quiz-start::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: 0;
  z-index: 0;
  background-image: linear-gradient(
    135deg,
    color-mix(in srgb, var(--primary) 84%, var(--primary-dim) 16%) 0%,
    color-mix(in srgb, var(--primary) 44%, var(--primary-dim) 56%) 100%
  );
  transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

body[class]:not([data-mobile])
  .st-pane.st-pane--quizzes
  .st-qz-actions
  .st-btn.st-btn--quiz-start
  .icon,
body[class]:not([data-mobile])
  .st-pane.st-pane--quizzes
  .st-qz-actions
  .st-btn.st-btn--quiz-start
  i,
body[class]:not([data-mobile])
  .st-pane.st-pane--quizzes
  .st-qz-actions
  .st-btn.st-btn--quiz-start
  span {
  position: relative !important;
  z-index: 1 !important;
  color: #ffffff !important;
}

body[class]:not([data-mobile])
  .st-pane.st-pane--quizzes
  .st-qz-actions
  .st-btn.st-btn--quiz-start:hover:not(:disabled):not(
    [aria-disabled='true']
  )::after,
body[class]:not([data-mobile])
  .st-pane.st-pane--quizzes
  .st-qz-actions
  .st-btn.st-btn--quiz-start:focus-visible:not(:disabled):not(
    [aria-disabled='true']
  )::after {
  opacity: 1;
}

body[class]:not([data-mobile])
  .st-pane.st-pane--quizzes
  .st-qz-actions
  .st-btn.st-btn--quiz-start:hover:not(:disabled):not([aria-disabled='true']),
body[class]:not([data-mobile])
  .st-pane.st-pane--quizzes
  .st-qz-actions
  .st-btn.st-btn--quiz-start:focus-visible:not(:disabled):not(
    [aria-disabled='true']
  ) {
  background-color: transparent !important;
  border-color: color-mix(in srgb, var(--primary) 80%, transparent) !important;
  color: #ffffff !important;
  box-shadow: 0 15px 28px -14px
    color-mix(in srgb, var(--primary) 60%, transparent) !important;
  filter: none !important;
  transform: translateY(-1px) !important;
}

body[class]:not([data-mobile])
  .st-pane.st-pane--quizzes
  .st-qz-actions
  .st-btn.st-btn--quiz-start:active:not(:disabled):not(
    [aria-disabled='true']
  )::after {
  opacity: 1;
  background-image: linear-gradient(
    135deg,
    color-mix(in srgb, var(--primary) 68%, var(--primary-dim) 32%) 0%,
    color-mix(in srgb, var(--primary) 28%, var(--primary-dim) 72%) 100%
  );
}

body[class]:not([data-mobile])
  .st-pane.st-pane--quizzes
  .st-qz-actions
  .st-btn.st-btn--quiz-start:active:not(:disabled):not([aria-disabled='true']) {
  box-shadow: 0 6px 12px -9px
    color-mix(in srgb, var(--primary) 58%, transparent) !important;
  filter: none !important;
  transform: translateY(0) !important;
}

body[class]:not([data-mobile])
  .st-pane.st-pane--quizzes
  .st-qz-actions
  .st-btn.st-btn--quiz-start:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 62%, transparent) !important;
  outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
  body[class]:not([data-mobile])
    .st-pane.st-pane--quizzes
    .st-qz-actions
    .st-btn.st-btn--quiz-start,
  body[class]:not([data-mobile])
    .st-pane.st-pane--quizzes
    .st-qz-actions
    .st-btn.st-btn--quiz-start:hover:not(:disabled):not(
      [aria-disabled='true']
    ) {
    transition: none !important;
    transform: none !important;
  }
}

/* Quiz generation: card-scoped overlay. The step rail becomes a blurred
   overlay covering only the generating row; the poller's attribute hooks
   (data-step-state, data-generation-complete, progress fill) are unchanged. */
body .st-pane.st-pane--quizzes .st-qz-row--generating,
body .st-pane.st-pane--quizzes .st-qz-row[data-quiz-status='generating'] {
  min-height: 236px;
}

/* Mobile JS wraps row content in a swipe-to-delete container, which becomes
   the overlay's containing block; stretch it so the overlay covers the row. */
body .st-pane.st-pane--quizzes .st-qz-row--generating .st-qz-row-swipe-content,
body
  .st-pane.st-pane--quizzes
  .st-qz-row[data-quiz-status='generating']
  .st-qz-row-swipe-content {
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  min-height: 204px;
}

body .st-pane.st-pane--quizzes .st-qz-row .st-qz-generation-steps {
  position: absolute;
  inset: 0;
  /* The row is a grid; a grid child's align/justify-self and any assigned
     grid area would otherwise redefine this absolutely positioned overlay's
     containing block to a single track instead of the whole row. */
  align-self: stretch !important;
  justify-self: stretch !important;
  grid-area: auto !important;
  z-index: 6;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  padding: 20px;
  background: color-mix(
    in srgb,
    var(--eduloo-study-row-bg, var(--container-bg)) 82%,
    transparent
  );
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

body .st-pane.st-pane--quizzes .st-qz-row .st-qz-generation-steps[hidden] {
  display: none !important;
}

body .st-pane.st-pane--quizzes .st-qz-generation-steps > .st-generation-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body
  .st-pane.st-pane--quizzes
  .st-qz-generation-steps
  > .st-generation-panel::before {
  content: '';
  width: 84px;
  height: 84px;
  background: url('/assets/img/loo-time.png') center / contain no-repeat;
  background: image-set(
      url('/assets/img/loo-time.webp') type('image/webp'),
      url('/assets/img/loo-time.png') type('image/png')
    )
    center / contain no-repeat;
  margin-bottom: 8px;
  animation: eduloo-qz-loo-bob 2.6s ease-in-out infinite;
}

body
  .st-pane.st-pane--quizzes
  .st-qz-generation-steps
  > .st-generation-panel[data-generation-complete]::before {
  background-image: url('/assets/img/loo-wave.png');
  background-image: image-set(
    url('/assets/img/loo-wave.webp') type('image/webp'),
    url('/assets/img/loo-wave.png') type('image/png')
  );
  animation: none;
}

@keyframes eduloo-qz-loo-bob {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

body
  .st-pane.st-pane--quizzes
  .st-qz-generation-steps
  .st-generation-panel-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 0 !important;
}

body
  .st-pane.st-pane--quizzes
  .st-qz-generation-steps
  .st-generation-panel-icon,
body
  .st-pane.st-pane--quizzes
  .st-qz-generation-steps
  .st-generation-panel-percent,
body
  .st-pane.st-pane--quizzes
  .st-qz-generation-steps
  .st-generation-panel-sub {
  display: none !important;
}

body
  .st-pane.st-pane--quizzes
  .st-qz-generation-steps
  .st-generation-panel-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--muted-text) !important;
}

body
  .st-pane.st-pane--quizzes
  .st-qz-generation-steps
  .st-generation-panel[data-generation-complete]
  .st-generation-panel-title {
  font-size: 18px !important;
  letter-spacing: 0;
  text-transform: none;
  color: var(--heading-color) !important;
}

body .st-pane.st-pane--quizzes .st-qz-generation-steps ol.st-generation-steps {
  order: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
}

body
  .st-pane.st-pane--quizzes
  .st-qz-generation-steps
  ol.st-generation-steps
  .st-generation-step {
  display: none !important;
}

body
  .st-pane.st-pane--quizzes
  .st-qz-generation-steps
  ol.st-generation-steps
  .st-generation-step[data-step-state='active'],
body
  .st-pane.st-pane--quizzes
  .st-qz-generation-steps
  ol.st-generation-steps
  .st-generation-step[data-step-state='failed'],
body
  .st-pane.st-pane--quizzes
  .st-qz-generation-steps
  .st-generation-panel:not([data-generation-complete])
  ol.st-generation-steps:not(
    :has(
      .st-generation-step[data-step-state='active'],
      .st-generation-step[data-step-state='failed']
    )
  )
  .st-generation-step:first-child {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  opacity: 1 !important;
}

body
  .st-pane.st-pane--quizzes
  .st-qz-generation-steps
  .st-generation-step-icon {
  display: none !important;
}

body
  .st-pane.st-pane--quizzes
  .st-qz-generation-steps
  .st-generation-step-label {
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.3;
  color: var(--heading-color) !important;
}

body
  .st-pane.st-pane--quizzes
  .st-qz-generation-steps
  .st-generation-step[data-step-state='failed']
  .st-generation-step-label {
  color: var(--error, var(--danger)) !important;
}

body .st-pane.st-pane--quizzes .st-qz-generation-steps .st-generation-step-sub {
  display: block !important;
  font-size: 12.5px;
  color: var(--muted-text);
}

body .st-pane.st-pane--quizzes .st-qz-generation-steps .st-generation-progress {
  order: 2;
  display: block !important;
  width: min(300px, 100%);
  height: 6px !important;
  margin: 14px 0 0 !important;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 14%, transparent) !important;
  overflow: hidden;
}

body
  .st-pane.st-pane--quizzes
  .st-qz-generation-steps
  .st-generation-progress-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--cta-gradient-start),
    var(--cta-gradient-end)
  ) !important;
  transition: width 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  body
    .st-pane.st-pane--quizzes
    .st-qz-generation-steps
    > .st-generation-panel::before {
    animation: none;
  }
}

/* Failure-family document statuses share the danger tone; the generic row
   meta color rules above would otherwise win over the framework red. */
body
  .st-pane.st-pane--documents
  .st-doc-row[data-document-status='failed']
  .st-doc-status-value,
body
  .st-pane.st-pane--documents
  .st-doc-row[data-document-status='insufficient_content']
  .st-doc-status-value,
body
  .st-pane.st-pane--documents
  .st-doc-row[data-document-status='quota_exceeded']
  .st-doc-status-value,
body
  .st-pane.st-pane--documents
  .mobile-card-gallery-card[data-document-status='failed']
  .st-doc-status-value-inline,
body
  .st-pane.st-pane--documents
  .mobile-card-gallery-card[data-document-status='insufficient_content']
  .st-doc-status-value-inline,
body
  .st-pane.st-pane--documents
  .mobile-card-gallery-card[data-document-status='quota_exceeded']
  .st-doc-status-value-inline {
  color: var(--eduloo-study-danger, #b91c1c) !important;
  font-weight: 700 !important;
}

/* Document row language flags (replaces the raw DE/EN code text). */
body .st-pane.st-pane--documents .st-doc-lang-flag {
  display: inline-block;
  width: 20px;
  height: 15px;
  border-radius: 3px;
  background-size: cover;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--on-surface) 14%, transparent);
  vertical-align: -3px;
}

body .st-pane.st-pane--documents .st-doc-lang-flag + .st-doc-lang-flag,
body .st-pane.st-pane--documents .st-doc-lang-flag + .st-doc-lang-code,
body .st-pane.st-pane--documents .st-doc-lang-code + .st-doc-lang-flag,
body .st-pane.st-pane--documents .st-doc-lang-code + .st-doc-lang-code {
  margin-left: 5px;
}

/* Document row thumbnails: first PDF page fills the file-type tile. */
body .st-pane.st-pane--documents .st-doc-file-type .st-doc-thumb {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: inherit;
}

body .st-pane.st-pane--documents .st-doc-file-type--thumb i {
  display: none !important;
}

/* Compact document rows: tile shrinks, meta collapses to one dotted line. */
body .st-pane.st-pane--documents .st-doc-row:not(.st-doc-row--empty) {
  padding: 10px 16px !important;
  gap: 14px !important;
  align-items: center !important;
}

body .st-pane.st-pane--documents .st-doc-file-type {
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px !important;
}

body .st-pane.st-pane--documents .st-doc-file-type i {
  font-size: 20px !important;
}

body .st-pane.st-pane--documents .st-doc-meta h3 {
  font-size: 15px !important;
  margin: 0 0 4px !important;
}

body .st-pane.st-pane--documents .st-doc-meta {
  gap: 0 !important;
}

body .st-pane.st-pane--documents .st-doc-meta-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0 !important;
  font-size: 12.5px !important;
  color: var(--muted-text) !important;
}

body .st-pane.st-pane--documents .st-doc-meta-piece {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body
  .st-pane.st-pane--documents
  .st-doc-meta-piece
  + .st-doc-meta-piece::before {
  content: '\00b7';
  margin-right: 8px;
  opacity: 0.5;
}

body .st-pane.st-pane--documents .st-doc-meta-date {
  font-variant-numeric: tabular-nums;
}

body .st-pane.st-pane--documents .st-doc-lang-more {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted-text);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  border-radius: 999px;
  padding: 0 6px;
  margin-left: 5px;
  cursor: default;
}

/* Quick-generate button: brand pill first in the actions cluster, with a
   divider separating "make things" from "manage file". */
body .st-pane.st-pane--documents .st-doc-generate-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 0 !important;
  padding: 8px 15px !important;
  border-radius: 999px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  margin: 0 14px 0 0 !important;
  position: relative;
}

body .st-pane.st-pane--documents .st-doc-generate-btn::after {
  content: '';
  position: absolute;
  right: -14px;
  top: 15%;
  height: 70%;
  width: 1px;
  background: color-mix(in srgb, var(--primary) 20%, transparent);
}

body .st-pane.st-pane--documents .st-doc-generate-btn + .st-btn {
  margin-left: 12px !important;
}

.st-doc-generate-item--locked {
  opacity: 0.55;
}

body .st-pane.st-pane--documents .st-doc-meta-piece[hidden] {
  display: none !important;
}

/* Eduloo's flat-button neutralizer strips .button-primary here; re-assert
   the brand gradient on the generate pill. */
body
  .st-pane.st-pane--documents
  .st-doc-generate-btn:not(:disabled):not(.is-disabled) {
  background: linear-gradient(
    135deg,
    var(--cta-gradient-start),
    var(--cta-gradient-end)
  ) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--primary) 30%, transparent) !important;
}

body
  .st-pane.st-pane--documents
  .st-doc-generate-btn:not(:disabled):not(.is-disabled)
  i {
  color: #fff !important;
}

body .st-pane.st-pane--documents .st-doc-generate-btn:disabled,
body .st-pane.st-pane--documents .st-doc-generate-btn.is-disabled {
  background: color-mix(in srgb, var(--on-surface) 8%, transparent) !important;
  color: var(--muted-text) !important;
  border: none !important;
  opacity: 0.7;
}

body .st-pane.st-pane--documents .st-doc-actions .st-doc-generate-btn {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  flex-shrink: 0;
}

/* base_elements' glossy inset highlight survives on the generate pill and
   makes it look pressed/fuzzy on dark; flatten to a single soft shadow. */
body
  .st-pane.st-pane--documents
  .st-doc-actions
  .st-doc-generate-btn:not(:disabled):not(.is-disabled),
body
  .st-pane.st-pane--documents
  .st-doc-actions
  .st-doc-generate-btn:not(:disabled):not(.is-disabled):hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  text-shadow: none !important;
  filter: none !important;
}

/* The row grid's first track was sized for the old 76px tile; with the 52px
   thumbnail it left a 28px phantom gap between tile and text. */
body .st-pane.st-pane--documents .st-doc-row:not(.st-doc-row--empty) {
  grid-template-columns: 52px minmax(0, 1fr) auto !important;
}

body .st-pane.st-pane--documents .st-doc-actions .st-doc-generate-btn {
  padding: 9px 18px !important;
  font-size: 13.5px !important;
}