.qzi-shell {
  --qzi-gap: 20px;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--qzi-gap) !important;
}

.qzi-shell > .st-doc-upload-head {
  margin: 0 !important;
}

.qzi-lead {
  margin: 0 !important;
  color: var(--on-surface-variant) !important;
}

.qzi-field {
  display: grid !important;
  gap: 8px !important;
}

.qzi-field__row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.qzi-label {
  color: var(--on-surface) !important;
}

.qzi-text,
.qzi-name,
.qzi-custom,
.qzi-card__input {
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border: 1px solid var(--outline-variant) !important;
  border-radius: var(--radius-medium, 8px) !important;
  background: var(--surface-container-lowest) !important;
  color: var(--on-surface) !important;
}

.qzi-text {
  min-height: 168px !important;
  padding: 12px 14px !important;
  resize: vertical !important;
  font-family: 'Be Vietnam Pro', sans-serif !important;
  line-height: 1.55 !important;
  tab-size: 4 !important;
}

.qzi-name,
.qzi-card__input {
  height: 44px !important;
  padding: 0 12px !important;
}

.qzi-custom {
  width: 96px !important;
  height: 36px !important;
  padding: 0 10px !important;
}

.qzi-seps {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px 24px !important;
}

.qzi-sep {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 12px !important;
}

.qzi-sep > .qzi-label {
  flex: 1 0 100% !important;
}

.qzi-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 10px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--success) 16%, transparent) !important;
  color: var(--on-surface) !important;
}

.qzi-badge[hidden],
.qzi-custom[hidden],
.qzi-preview[hidden],
.qzi-card__error[hidden] {
  display: none !important;
}

.qzi-preview {
  display: grid !important;
  gap: 12px !important;
}

.qzi-preview__head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.qzi-preview__count {
  color: var(--on-surface) !important;
}

.qzi-preview__bad,
.qzi-card__why,
.qzi-card__error {
  color: color-mix(in srgb, var(--warning) 78%, var(--on-surface)) !important;
}

.qzi-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 10px !important;
  max-height: 360px !important;
  overflow-y: auto !important;
  padding: 2px !important;
}

.qzi-card {
  display: grid !important;
  align-content: start !important;
  gap: 4px !important;
  min-width: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid var(--outline-variant) !important;
  border-radius: var(--radius-medium, 8px) !important;
  background: var(--surface-container-low) !important;
}

.qzi-card--bad {
  gap: 8px !important;
  border-color: color-mix(in srgb, var(--warning) 60%, transparent) !important;
  background: color-mix(
    in srgb,
    var(--warning) 8%,
    var(--surface-container-low)
  ) !important;
}

.qzi-card__term,
.qzi-card__def {
  overflow-wrap: anywhere !important;
}

.qzi-card__term {
  color: var(--on-surface) !important;
}

.qzi-card__def {
  color: var(--on-surface-variant) !important;
}

.qzi-card__use {
  justify-self: start !important;
  margin: 0 !important;
}

.qzi-actions {
  display: flex !important;
  gap: 12px !important;
}

.qzi-create {
  margin: 0 !important;
  min-height: 44px !important;
}

.qzi-note {
  margin: 0 !important;
  color: var(--on-surface-variant) !important;
}

.qzi-paste {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  min-height: 36px !important;
}

.qzi-appbar {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 44px !important;
  align-items: center !important;
  padding: calc(8px + var(--safe-top, 0px)) 16px 8px !important;
}

.qzi-appbar__close {
  margin: 0 !important;
}

.qzi-appbar__title {
  margin: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 640px) {
  .qzi-seps {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

body[data-mobile] .qzi-shell {
  --qzi-gap: 16px;
}

body[data-mobile] .st-pane--quizlet {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  max-width: none !important;
  padding: 12px 16px calc(24px + var(--safe-bottom, 0px)) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-mobile] .qzi-seps {
  grid-template-columns: minmax(0, 1fr) !important;
}

body[data-mobile] .qzi-cards {
  grid-template-columns: minmax(0, 1fr) !important;
  max-height: none !important;
  overflow: visible !important;
}

body[data-mobile] .qzi-create {
  width: 100% !important;
  min-height: 50px !important;
}

/* >>> type-scale */
html body:not([data-admin]) .qzi-lead,
html body:not([data-admin]) .qzi-text,
html body:not([data-admin]) .qzi-name,
html body:not([data-admin]) .qzi-card__input {
  font-size: 15px !important;
  font-weight: 400 !important;
}
html body:not([data-admin]) .qzi-label,
html body:not([data-admin]) .qzi-badge {
  font-size: 13px !important;
  font-weight: 600 !important;
}
html body:not([data-admin]) .qzi-preview__count,
html body:not([data-admin]) .qzi-card__term {
  font-size: 15px !important;
  font-weight: 600 !important;
}
html body:not([data-admin]) .qzi-preview__bad,
html body:not([data-admin]) .qzi-card__why {
  font-size: 13px !important;
  font-weight: 600 !important;
}
html body:not([data-admin]) .qzi-card__def,
html body:not([data-admin]) .qzi-card__error,
html body:not([data-admin]) .qzi-note {
  font-size: 13px !important;
  font-weight: 400 !important;
}
html body:not([data-admin]) .qzi-create,
html body:not([data-admin]) .qzi-card__use,
html body:not([data-admin]) .qzi-paste {
  font-size: 15px !important;
  font-weight: 600 !important;
}
body[data-mobile]:not([data-admin]) .qzi-appbar__title {
  font-size: 17px !important;
  font-weight: 600 !important;
}
body[data-mobile]:not([data-admin]) .qzi-create {
  font-size: 17px !important;
}
/* <<< type-scale */