/* Mode surfaces are scoped so the existing navigation and card motion remain independent. */
html.cift-ui :is(.analytics-page:not(.study-plans-page), .sentence-favorites-page, .wrong-question-favorites-page, .settings-page, .admin-page, .study-app-shell) {
  --muted: var(--cift-muted);
  --line: var(--cift-line);
  color: var(--cift-ink);
  font-family: var(--cift-font-ui);
}

html.cift-ui .app-shell.workbench-shell :is(.analytics-page:not(.study-plans-page), .sentence-favorites-page, .wrong-question-favorites-page, .settings-page, .admin-page) {
  background: transparent;
}

html.cift-ui :is(.analytics-page:not(.study-plans-page), .sentence-favorites-page, .wrong-question-favorites-page, .settings-page, .admin-page) :is(.page-heading h1, .panel-head h2) {
  color: var(--cift-ink);
  letter-spacing: 0;
}

html.cift-ui :is(.analytics-page:not(.study-plans-page), .sentence-favorites-page, .wrong-question-favorites-page, .settings-page, .admin-page) :is(.page-heading p, .eyebrow, .panel-head > span, .panel-head > div > span) {
  color: var(--cift-muted);
}

html.cift-ui :is(.analytics-page:not(.study-plans-page), .sentence-favorites-page, .wrong-question-favorites-page, .settings-page, .admin-page, .study-app-shell) .button {
  border-color: transparent;
  border-radius: var(--cift-radius-pill);
  background: var(--cift-accent);
  color: var(--cift-on-accent);
  box-shadow: none;
  transition: background-color var(--cift-duration-fast) var(--cift-ease), color var(--cift-duration-fast) var(--cift-ease), box-shadow var(--cift-duration-fast) var(--cift-ease);
}

html.cift-ui :is(.analytics-page:not(.study-plans-page), .sentence-favorites-page, .wrong-question-favorites-page, .settings-page, .admin-page, .study-app-shell) .button.secondary {
  border-color: transparent;
  background: var(--cift-control);
  color: var(--cift-ink);
}

html.cift-ui :is(.analytics-page:not(.study-plans-page), .sentence-favorites-page, .wrong-question-favorites-page, .settings-page, .admin-page, .study-app-shell) .button.secondary:hover:not(:disabled) {
  background: var(--cift-control-hover);
}

html.cift-ui :is(.analytics-page:not(.study-plans-page), .sentence-favorites-page, .wrong-question-favorites-page, .settings-page, .admin-page, .study-app-shell) :is(.button.danger, .danger-text) {
  color: var(--cift-danger);
  background: var(--cift-danger-bg);
  border-color: transparent;
  border-radius: var(--cift-radius-pill);
}

html.cift-ui :is(.analytics-page:not(.study-plans-page), .wrong-question-favorites-page, .settings-page, .admin-page) :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
  color: var(--cift-ink);
  background: var(--cift-surface);
  border-color: var(--cift-line);
  border-radius: var(--cift-radius-sm);
  box-shadow: none;
  font-family: var(--cift-font-ui);
}

html.cift-ui :is(.analytics-page:not(.study-plans-page), .wrong-question-favorites-page, .settings-page, .admin-page) :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--cift-accent);
  outline-offset: 3px;
}

html.cift-ui :is(.settings-page, .admin-page, .study-app-shell) :is(input[type="checkbox"], input[type="radio"], input[type="range"]) {
  accent-color: var(--cift-accent);
}

/* Statistics retains its horizontal chart deck with one surface per chart. */
html.cift-ui .app-shell.workbench-shell .analytics-page:not(.study-plans-page) :is(.panel, .stat) {
  color: var(--cift-ink);
  border-color: var(--cift-line);
  border-radius: var(--cift-radius-md);
  background: var(--cift-surface) !important;
  box-shadow: var(--cift-shadow-soft);
  backdrop-filter: none;
}

html.cift-ui .analytics-page:not(.study-plans-page) .analytics-mode-tabs {
  border-color: transparent;
  background: var(--cift-control);
  box-shadow: none;
}

html.cift-ui .analytics-page:not(.study-plans-page) .analytics-mode-tabs::before {
  background: var(--cift-accent);
  box-shadow: none;
}

html.cift-ui .analytics-page:not(.study-plans-page) .analytics-mode-tab {
  color: var(--cift-muted);
}

html.cift-ui .analytics-page:not(.study-plans-page) .analytics-mode-tab.active {
  color: var(--cift-on-accent);
}

html.cift-ui .analytics-page:not(.study-plans-page) :is(.analytics-range-tabs, .mono-chart-source-toggle) {
  background: var(--cift-control);
  border-color: transparent;
  border-radius: var(--cift-radius-pill);
  box-shadow: none;
}

html.cift-ui .analytics-page:not(.study-plans-page) .analytics-range-button {
  color: var(--cift-muted);
  background: transparent;
  border-color: transparent;
  border-radius: var(--cift-radius-pill);
}

html.cift-ui .analytics-page:not(.study-plans-page) :is(.analytics-range-button.active, .mono-chart-source-toggle .active) {
  color: var(--cift-on-accent);
  background: var(--cift-accent);
  box-shadow: none;
}

html.cift-ui .analytics-page:not(.study-plans-page) :is(.analytics-core-grid > details > summary, .practice-progress-panel > summary, .analytics-filter-panel > summary) {
  color: var(--cift-ink);
  background: transparent;
  border-color: var(--cift-line);
}

html.cift-ui .analytics-page:not(.study-plans-page) :is(.analytics-panel-summary-copy strong, .analytics-filter-copy strong, .mono-chart-source-head strong, .analytics-reading-type-top strong, .practice-progress-round) {
  color: var(--cift-ink);
}

html.cift-ui .analytics-page:not(.study-plans-page) :is(.analytics-panel-summary-copy small, .analytics-panel-summary-meta, .analytics-filter-copy > span, .analytics-filter-disclosure, .mono-chart-source-head small, .analytics-reading-type-copy small, .analytics-reading-type-top > span, .analytics-chart-caption, .analytics-chart-legend, .analytics-empty) {
  color: var(--cift-muted);
}

html.cift-ui .analytics-page:not(.study-plans-page) :is(.analytics-chart-panel-body, .analytics-reading-types-body, .mono-chart-source-card, .mono-donut-source-card) {
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}

html.cift-ui .analytics-page:not(.study-plans-page) .mono-chart-source-kicker {
  color: var(--cift-muted);
  letter-spacing: 0;
}

html.cift-ui .analytics-page:not(.study-plans-page) :is(.mono-source-stage, .mono-donut-stage) {
  border-color: transparent;
  background: var(--cift-surface-muted);
  border-radius: var(--cift-radius-md);
  box-shadow: none;
}

html.cift-ui .analytics-page:not(.study-plans-page) :is(.analytics-reading-type-row, .practice-progress-row, .analytics-recent-row, .analytics-content-row) {
  border-color: var(--cift-line);
  background: transparent;
  color: var(--cift-ink);
  box-shadow: none;
}

html.cift-ui .analytics-page:not(.study-plans-page) .analytics-error {
  color: var(--cift-danger);
  background: var(--cift-danger-bg) !important;
}

html.cift-ui .app-shell.workbench-shell .analytics-page:not(.study-plans-page) .analytics-chart-panel {
  border-color: var(--cift-line) !important;
}

html.cift-ui .app-shell.workbench-shell .analytics-page:not(.study-plans-page) :is(.analytics-chart-legend, .analytics-chart-caption) {
  background: transparent !important;
  border-color: var(--cift-line) !important;
}

html.cift-ui .analytics-page:not(.study-plans-page) .practice-progress-round {
  color: var(--cift-ink) !important;
}

/* The sentence stage consumes the space left above navigation; card motion remains independent. */
html.cift-ui .app-shell.workbench-shell.sentence-favorites-shell .main-area {
  min-height: 0;
  padding-bottom: max(86px, calc(env(safe-area-inset-bottom) + 72px));
}

html.cift-ui .app-shell.workbench-shell.sentence-favorites-shell .sentence-favorites-page {
  flex: 1 1 0%;
  min-height: 0;
  padding-top: 12px;
  padding-bottom: 0;
}

html.cift-ui .app-shell.workbench-shell.sentence-favorites-shell .sentence-favorites-page > .page-heading {
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  margin-bottom: 10px;
}

html.cift-ui .app-shell.workbench-shell.sentence-favorites-shell .page-heading > div:first-child {
  min-width: 0;
}

html.cift-ui .app-shell.workbench-shell.sentence-favorites-shell .page-heading :is(.eyebrow, p) {
  display: none;
}

html.cift-ui .app-shell.workbench-shell.sentence-favorites-shell .page-heading h1 {
  margin: 0;
  font-size: 24px;
}

html.cift-ui .app-shell.workbench-shell.sentence-favorites-shell .page-heading-actions {
  flex: 0 0 auto;
}

html.cift-ui .app-shell.workbench-shell.sentence-favorites-shell .sentence-favorites-deck {
  flex: 1 1 0%;
  min-height: 0;
  padding-top: 10px;
  padding-bottom: 0;
}

html.cift-ui .app-shell.workbench-shell.sentence-favorites-shell .sentence-favorites-deck-head {
  flex: 0 0 auto;
  margin-bottom: 12px;
}

html.cift-ui .app-shell.workbench-shell.sentence-favorites-shell .sentence-favorite-stage {
  flex: 1 1 0%;
  height: auto;
  min-height: 0;
}

html.cift-ui .app-shell.workbench-shell.sentence-favorites-shell .sentence-favorites-deck-controls {
  flex: 0 0 auto;
  margin-top: 12px;
}

html.cift-ui .app-shell.workbench-shell.sentence-favorites-shell .sentence-favorites-progress-control {
  flex: 0 0 auto;
  margin-top: 8px;
}

html.cift-ui .app-shell.workbench-shell :is(.sentence-favorites-deck, .wrong-favorites-deck, .sentence-favorite-stage, .wrong-favorite-stage) {
  background: transparent !important;
  border-color: transparent;
  box-shadow: none;
}

html.cift-ui .app-shell.workbench-shell.sentence-favorites-shell .sentence-favorite-card,
html.cift-ui .app-shell.workbench-shell.wrong-question-favorites-shell .wrong-favorite-card {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

html.cift-ui .app-shell.workbench-shell :is(.sentence-favorite-card-inner, .wrong-favorite-card-inner) {
  background: transparent;
  box-shadow: none;
}

html.cift-ui .app-shell.workbench-shell.sentence-favorites-shell .sentence-favorite-card-face,
html.cift-ui .app-shell.workbench-shell.wrong-question-favorites-shell .wrong-favorite-card-face {
  background: var(--cift-surface) !important;
  color: var(--cift-ink);
  border-color: var(--cift-line);
  box-shadow: var(--cift-shadow-float);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html.cift-ui .app-shell.workbench-shell.sentence-favorites-shell .sentence-favorite-card-back {
  background: var(--cift-surface-soft) !important;
}

html.cift-ui .app-shell.workbench-shell :is(.sentence-favorite-stack-card, .wrong-favorite-stack-card) {
  color: var(--cift-sage-ink);
  border-color: var(--cift-line);
  background: var(--cift-sage) !important;
  box-shadow: var(--cift-shadow-soft);
  backdrop-filter: none;
}

html.cift-ui .app-shell.workbench-shell :is(.sentence-favorite-stack-card, .wrong-favorite-stack-card):nth-of-type(2n) {
  color: var(--cift-sky-ink);
  background: var(--cift-sky) !important;
}

html.cift-ui .app-shell.workbench-shell.wrong-question-favorites-shell .wrong-favorite-card-hero {
  background: var(--cift-sage);
  color: var(--cift-sage-ink);
}

html.cift-ui .app-shell.workbench-shell.wrong-question-favorites-shell .wrong-favorite-card-hero em {
  color: var(--cift-sage-ink);
}

html.cift-ui .app-shell.workbench-shell :is(.wrong-favorite-card h2, .sentence-favorite-card h2, .wrong-favorite-prompt, .sentence-favorite-english, .sentence-favorite-translation) {
  color: var(--cift-ink);
  letter-spacing: 0;
}

html.cift-ui .app-shell.workbench-shell :is(.sentence-favorite-source, .sentence-favorite-card-head small, .wrong-favorite-card-face small, .wrong-favorite-prompt-zh, .wrong-favorite-content > header, .sentence-favorites-deck-head) {
  color: var(--cift-muted);
}

html.cift-ui .app-shell.workbench-shell :is(.sentence-favorite-card-foot, .wrong-favorite-card-face > footer) {
  color: var(--cift-muted);
  border-color: var(--cift-line);
  background: var(--cift-surface);
}

html.cift-ui .app-shell.workbench-shell :is(.sentence-favorite-flip, .sentence-favorite-nav, .wrong-favorite-controls .sentence-favorite-nav) {
  color: var(--cift-ink);
  border-color: transparent;
  border-radius: var(--cift-radius-pill);
  background: var(--cift-control);
  box-shadow: none;
}

html.cift-ui .app-shell.workbench-shell :is(.sentence-favorite-flip, .sentence-favorite-nav):hover:not(:disabled) {
  color: var(--cift-ink);
  background: var(--cift-control-hover);
}

html.cift-ui .app-shell.workbench-shell .wrong-favorite-option {
  color: var(--cift-ink);
  border-color: var(--cift-line);
  border-radius: var(--cift-radius-sm);
  background: var(--cift-surface);
}

html.cift-ui .app-shell.workbench-shell .wrong-favorite-option.is-selected {
  color: var(--cift-peach-ink);
  border-color: transparent;
  background: var(--cift-peach);
}

html.cift-ui .app-shell.workbench-shell .wrong-favorite-option.is-correct {
  color: var(--cift-sage-ink);
  border-color: transparent;
  background: var(--cift-sage);
}

html.cift-ui .app-shell.workbench-shell .wrong-favorite-analysis {
  color: var(--cift-ink);
  border-color: var(--cift-line);
  border-radius: var(--cift-radius-sm);
  background: var(--cift-surface-muted);
}

html.cift-ui .app-shell.workbench-shell.wrong-question-favorites-shell .wrong-favorite-filter-bar {
  color: var(--cift-ink);
  border-color: var(--cift-line);
  border-radius: var(--cift-radius-md);
  background: var(--cift-surface) !important;
  box-shadow: var(--cift-shadow-float);
}

html.cift-ui .app-shell.workbench-shell :is(.sentence-favorite-card-copy, .wrong-favorite-content) {
  scrollbar-color: var(--cift-scrollbar) transparent;
}

html.cift-ui .app-shell.workbench-shell.sentence-favorites-shell .sentence-favorite-card-copy {
  align-items: flex-start;
  align-items: safe center;
}

html.cift-ui .app-shell.workbench-shell.sentence-favorites-shell .sentence-favorite-english {
  font-size: 24px;
}

html.cift-ui .app-shell.workbench-shell.sentence-favorites-shell .sentence-favorite-translation {
  border-left: 0;
  padding-left: 0;
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
}

html.cift-ui .app-shell.workbench-shell.sentence-favorites-shell :is(.sentence-favorite-delete, .sentence-favorite-flip) {
  min-height: 36px;
  padding-inline: 12px;
  flex-shrink: 0;
}

html.cift-ui .app-shell.workbench-shell :is(.sentence-favorites-empty, .wrong-favorite-empty) {
  color: var(--cift-ink);
  border-color: transparent;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  backdrop-filter: none;
}

html.cift-ui .app-shell.workbench-shell :is(.sentence-favorites-empty, .wrong-favorite-empty) h2 {
  color: var(--cift-ink);
}

html.cift-ui .app-shell.workbench-shell :is(.sentence-favorites-empty, .wrong-favorite-empty) p {
  color: var(--cift-muted);
}

html.cift-ui .app-shell.workbench-shell :is(.sentence-favorites-empty-icon, .wrong-favorite-empty > span) {
  color: var(--cift-muted);
  background: transparent;
}

/* Vocabulary keeps the fullscreen work area and recognition decisions. */
html.cift-ui .study-app-shell {
  background: var(--cift-bg);
}

html.cift-ui .study-app-header {
  color: var(--cift-ink);
  border-color: var(--cift-line);
  background: var(--cift-bg);
  box-shadow: none;
  backdrop-filter: none;
}

html.cift-ui .study-app-header :is(.study-app-progress, .study-app-progress strong) {
  color: var(--cift-muted);
}

html.cift-ui .study-app-shell :is(.study-app-actions .exam-countdown, .study-timer-button, .study-more-button, .study-back-button, .study-word-actions .study-speak, .study-word-actions .study-too-easy) {
  color: var(--cift-ink);
  border-color: transparent;
  border-radius: var(--cift-radius-pill);
  background: var(--cift-control);
  box-shadow: none;
}

/* The phone header hides the countdown label. Center the remaining day count
   inside the pill rather than retaining the global text-baseline alignment. */
html.cift-ui .study-app-header .exam-countdown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html.cift-ui .study-app-header .exam-countdown strong {
  display: block;
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
}

html.cift-ui .study-app-shell :is(.study-timer-button, .study-more-button, .study-back-button, .study-word-actions .study-speak, .study-word-actions .study-too-easy):hover:not(:disabled) {
  background: var(--cift-control-hover);
  box-shadow: none;
}

html.cift-ui .study-app-shell button:hover:not(:disabled) {
  transform: none;
}

html.cift-ui .study-app-shell .study-timer-button.running {
  color: var(--cift-sage-ink);
  background: var(--cift-sage);
}

html.cift-ui .study-fullscreen > .study-session {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

html.cift-ui .study-fullscreen :is(.study-session-head, .study-answer-block) {
  border-color: var(--cift-line);
  background: transparent;
}

html.cift-ui .study-fullscreen :is(.study-word-title h2, .study-round-summary h2, .study-answer h3, .study-round-english strong, .definition-main, .example p) {
  color: var(--cift-ink);
}

html.cift-ui .study-fullscreen :is(.study-kicker, .study-random-note, .study-position, .phonetic, .study-hidden-answer, .study-hidden-answer span, .study-round-summary-intro p, .study-decision p, .example > span) {
  color: var(--cift-muted);
}

html.cift-ui .study-fullscreen :is(.study-hidden-answer, .study-decision) {
  background: var(--cift-surface-muted);
  border-color: transparent;
  border-radius: var(--cift-radius-md);
  box-shadow: none;
}

html.cift-ui .study-app-shell .study-decision .button.study-choice.known {
  color: var(--cift-sage-ink);
  border-color: transparent;
  background: var(--cift-sage);
  box-shadow: none;
}

html.cift-ui .study-app-shell .study-decision .button.study-choice.unknown {
  color: var(--cift-peach-ink);
  border-color: transparent;
  background: var(--cift-peach);
  box-shadow: none;
}

html.cift-ui .study-app-shell .study-decision-complete .button {
  border-radius: var(--cift-radius-pill);
  background: var(--cift-accent);
  color: var(--cift-on-accent);
  box-shadow: none;
}

html.cift-ui .study-fullscreen :is(.study-round-card, .example, .root-piece, .dictionary-details) {
  color: var(--cift-ink);
  border-color: var(--cift-line);
  border-radius: var(--cift-radius-sm);
  background: var(--cift-surface);
  box-shadow: none;
}

html.cift-ui .study-fullscreen .study-round-card {
  border-radius: var(--cift-radius-md);
}

html.cift-ui .study-fullscreen .study-summary-visibility {
  background: var(--cift-control);
  border-color: transparent;
  box-shadow: none;
}

html.cift-ui .study-fullscreen .study-summary-visibility button {
  color: var(--cift-muted);
}

html.cift-ui .study-fullscreen .study-summary-visibility button.is-active {
  background: var(--cift-accent);
  color: var(--cift-on-accent);
  box-shadow: none;
}

html.cift-ui .study-fullscreen :is(.study-round-result.known, .study-complete-mark) {
  color: var(--cift-sage-ink);
  background: var(--cift-sage);
}

html.cift-ui .study-fullscreen .study-result.known {
  color: var(--cift-sage-ink);
}

html.cift-ui .study-fullscreen :is(.study-round-result.unknown, .rare-sense) {
  color: var(--cift-peach-ink);
  background: var(--cift-peach);
}

html.cift-ui .study-fullscreen .study-result.unknown {
  color: var(--cift-peach-ink);
}

html.cift-ui .study-fullscreen :is(.study-round-english.is-hidden, .study-round-definitions.is-hidden)::after {
  color: var(--cift-muted);
  background: var(--cift-surface-muted);
}

/* Settings and administrative sections remain unframed; repeated rows carry the surface. */
html.cift-ui :is(.settings-page, .admin-page) > .panel,
html.cift-ui :is(.settings-grid, .admin-layout) > .panel,
html.cift-ui .admin-page :is(.activation-code-workspace, .contextual-gloss-workspace) > .panel {
  color: var(--cift-ink);
  background: transparent !important;
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
}

html.cift-ui :is(.settings-page, .admin-page) :is(.panel-head, .theme-settings-fieldset, .vocabulary-library-list, .table-wrap, th, td) {
  color: var(--cift-ink);
  border-color: var(--cift-line);
}

html.cift-ui :is(.settings-page, .admin-page) :is(.settings-form p, .settings-note-body p, .field, .definition-note, .settings-toggle small, .vocabulary-library-row small, .form-note) {
  color: var(--cift-muted);
}

html.cift-ui :is(.settings-page, .admin-page) :is(.settings-note-body, .settings-toggle, .vocabulary-library-row, .admin-feedback-card, .contextual-gloss-list-item, .activation-code-row) {
  color: var(--cift-ink);
  background: var(--cift-surface);
  border-color: var(--cift-line);
  border-radius: var(--cift-radius-sm);
  box-shadow: none;
}

html.cift-ui .admin-page :is(.contextual-gloss-candidate-chip, .activation-code-copy) {
  color: var(--cift-ink);
  background: var(--cift-control);
  border-color: transparent;
  border-radius: var(--cift-radius-pill);
  box-shadow: none;
}

html.cift-ui .admin-page :is(.contextual-gloss-candidate-chip, .activation-code-copy):hover:not(:disabled) {
  color: var(--cift-ink);
  background: var(--cift-control-hover);
  border-color: transparent;
  box-shadow: none;
}

html.cift-ui .admin-page .contextual-gloss-list-item.active {
  color: var(--cift-sage-ink);
  background: var(--cift-sage);
  border-color: transparent;
  box-shadow: none;
}

html.cift-ui .admin-page :is(.contextual-gloss-context, .contextual-gloss-candidates, .contextual-gloss-review-form, .contextual-gloss-provenance, .admin-feedback-content, .admin-feedback-update-form) {
  color: var(--cift-ink);
  background: transparent;
  border-color: var(--cift-line);
  box-shadow: none;
}

html.cift-ui :is(.settings-page, .admin-page) :is(.admin-tabs, .vocabulary-library-filter) {
  background: var(--cift-control);
  border-color: transparent;
  border-radius: var(--cift-radius-pill);
  box-shadow: none;
}

html.cift-ui .admin-page .admin-tab {
  color: var(--cift-muted);
  background: transparent;
  border-color: transparent;
  border-radius: var(--cift-radius-pill);
}

html.cift-ui :is(.settings-page, .admin-page) :is(.admin-tab.active, .vocabulary-library-filter.active) {
  color: var(--cift-on-accent);
  background: var(--cift-accent);
  box-shadow: none;
}

html.cift-ui .settings-page .vocabulary-library-filter strong {
  color: inherit;
}

html.cift-ui :is(.settings-page, .admin-page) :is(.tag, .vocabulary-library-status) {
  color: var(--cift-sage-ink);
  background: var(--cift-sage);
  border-color: transparent;
  border-radius: var(--cift-radius-pill);
}

html.cift-ui :is(.settings-page, .admin-page) :is(.tag.yellow, .tag.coral, .vocabulary-library-status.status-easy) {
  color: var(--cift-peach-ink);
  background: var(--cift-peach);
}

html.cift-ui .admin-page th {
  color: var(--cift-muted);
  background: var(--cift-surface-muted);
}

html.cift-ui .admin-page td {
  background: var(--cift-surface);
}

/* Shared account and vocabulary dialogs use the same quiet control palette. */
html.cift-ui :is(.access-backdrop, .feedback-backdrop, .site-notice-backdrop, .study-menu-backdrop, .word-lookup-backdrop) {
  background: var(--cift-scrim);
  backdrop-filter: blur(5px);
}

html.cift-ui :is(.access-dialog, .feedback-dialog, .site-notice-dialog, .study-menu, .word-lookup-dialog) {
  color: var(--cift-ink);
  background: var(--cift-surface);
  border-color: var(--cift-line);
  border-radius: var(--cift-radius-lg);
  box-shadow: var(--cift-shadow-float);
  font-family: var(--cift-font-ui);
}

html.cift-ui :is(.access-dialog, .feedback-dialog, .site-notice-dialog, .study-menu, .word-lookup-dialog) :is(h2, h3, strong) {
  color: var(--cift-ink);
}

html.cift-ui :is(.access-dialog, .feedback-dialog, .site-notice-dialog, .study-menu, .word-lookup-dialog) :is(p, .eyebrow, .study-kicker, .field, .phonetic) {
  color: var(--cift-muted);
}

html.cift-ui :is(.access-dialog, .feedback-dialog, .site-notice-dialog, .study-menu, .word-lookup-dialog) :is(input, select, textarea) {
  background: var(--cift-surface-muted);
  border-color: transparent;
  border-radius: var(--cift-radius-sm);
  color: var(--cift-ink);
  box-shadow: none;
}

html.cift-ui :is(.access-dialog, .feedback-dialog, .site-notice-dialog, .study-menu, .word-lookup-dialog) .button {
  color: var(--cift-on-accent);
  background: var(--cift-accent);
  border-color: transparent;
  border-radius: var(--cift-radius-pill);
  box-shadow: none;
}

html.cift-ui :is(.access-dialog, .feedback-dialog, .site-notice-dialog, .study-menu, .word-lookup-dialog) :is(.button.secondary, .icon-button),
html.cift-ui .study-menu-actions button {
  color: var(--cift-ink);
  background: var(--cift-control);
  border-color: transparent;
  border-radius: var(--cift-radius-pill);
  box-shadow: none;
}

html.cift-ui :is(.access-dialog, .feedback-dialog, .site-notice-dialog, .study-menu, .word-lookup-dialog) :is(.text-button, a) {
  color: var(--cift-ink);
}

html.cift-ui :is(.access-dialog, .feedback-dialog, .site-notice-dialog, .study-menu, .word-lookup-dialog) :is(.access-dialog-head, .feedback-dialog-head, .site-notice-dialog-head, .study-menu-head, .word-lookup-head, .word-lookup-source, .word-lookup-actions) {
  background: transparent;
  border-color: var(--cift-line);
}

@media (max-width: 620px) {
  html.cift-ui .app-shell.workbench-shell.sentence-favorites-shell .sentence-favorite-english {
    font-size: 20px;
  }

  html.cift-ui .analytics-page:not(.study-plans-page) :is(.analytics-panel-summary-copy small, .analytics-panel-summary-meta) {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}