/**
 * BSHQ English v10.16.1 — Contrast Reset
 * Final UI authority. Presentation only; loaded after every legacy stylesheet.
 */

/* ========================================================================== 
   1. Canonical tokens — no translucent fog, no low-contrast inheritance
   ========================================================================== */
body.bshq-vocab-fullscreen-page #bshq-vocab-root {
  --ui-page: #F6F8FC;
  --ui-surface: #FFFFFF;
  --ui-surface-2: #F8FAFC;
  --ui-surface-3: #EEF2FF;
  --ui-border: #D8E0EC;
  --ui-border-strong: #B8C5D8;
  --ui-text: #0F172A;
  --ui-text-2: #334155;
  --ui-muted: #475569;
  --ui-subtle: #64748B;
  --ui-primary: #4F46E5;
  --ui-primary-hover: #4338CA;
  --ui-focus: rgba(79,70,229,.22);
  --ui-success: #0F9F7A;
  --ui-warning: #D97706;
  --ui-danger: #DC2626;
  --ui-shadow: 0 10px 28px rgba(15,23,42,.08);
  --ui-shadow-lg: 0 20px 48px rgba(15,23,42,.14);
  color: var(--ui-text) !important;
  background: var(--ui-page) !important;
}

body.bshq-vocab-fullscreen-page.bshq-theme-dark #bshq-vocab-root,
html[data-bshq-theme="dark"] body.bshq-vocab-fullscreen-page #bshq-vocab-root {
  --ui-page: #0B1220;
  --ui-surface: #111827;
  --ui-surface-2: #172033;
  --ui-surface-3: #1C2940;
  --ui-border: #334155;
  --ui-border-strong: #4B607C;
  --ui-text: #F8FAFC;
  --ui-text-2: #E2E8F0;
  --ui-muted: #CBD5E1;
  --ui-subtle: #94A3B8;
  --ui-primary: #6D5EF5;
  --ui-primary-hover: #8174FF;
  --ui-focus: rgba(129,116,255,.30);
  --ui-success: #34D399;
  --ui-warning: #FBBF24;
  --ui-danger: #FB7185;
  --ui-shadow: 0 12px 30px rgba(0,0,0,.28);
  --ui-shadow-lg: 0 24px 60px rgba(0,0,0,.38);
  color: var(--ui-text) !important;
  background: var(--ui-page) !important;
}

html.bshq-app-document,
html.bshq-app-document body.bshq-vocab-fullscreen-page,
body.bshq-vocab-fullscreen-page #bshq-vocab-root,
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-app-shell,
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-main,
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-view {
  background-color: var(--ui-page) !important;
}

body.bshq-vocab-fullscreen-page #bshq-vocab-root,
body.bshq-vocab-fullscreen-page #bshq-vocab-root * {
  text-shadow: none !important;
}

/* ========================================================================== 
   2. Shell, topbar and navigation
   ========================================================================== */
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-side {
  border-right: 1px solid #243451 !important;
  background: linear-gradient(180deg,#14213A 0%,#0E1729 100%) !important;
  box-shadow: none !important;
}

body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-nav-item,
body.bshq-vocab-fullscreen-page #bshq-vocab-root a.bshq-nav-item {
  color: #C5D0E2 !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-nav-item:hover {
  color: #FFFFFF !important;
  background: #21314E !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-nav-item.active {
  color: #FFFFFF !important;
  border-color: #53688B !important;
  background: linear-gradient(90deg,#394486,#1F385B) !important;
  box-shadow: inset 4px 0 0 #8B83FF !important;
}

body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-top {
  min-height: 76px !important;
  padding-block: 12px !important;
  border-bottom: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
  background: var(--ui-surface) !important;
  box-shadow: 0 5px 20px rgba(15,23,42,.05) !important;
  backdrop-filter: none !important;
}
body.bshq-vocab-fullscreen-page.bshq-theme-dark #bshq-vocab-root .bshq-top {
  box-shadow: 0 8px 24px rgba(0,0,0,.24) !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root #bshq-page-title {
  color: var(--ui-text) !important;
  font-size: clamp(22px,2vw,28px) !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-eyebrow {
  color: var(--ui-primary) !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-notification-toggle,
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-account-toggle {
  border-color: var(--ui-border) !important;
  color: var(--ui-text-2) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow) !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-top-add,
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-btn-primary {
  border-color: var(--ui-primary) !important;
  color: #FFFFFF !important;
  background: var(--ui-primary) !important;
  box-shadow: 0 10px 24px rgba(79,70,229,.22) !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-top-add:hover,
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-btn-primary:hover {
  border-color: var(--ui-primary-hover) !important;
  background: var(--ui-primary-hover) !important;
}

/* ========================================================================== 
   3. Hard surface reset — every card must separate from the page
   ========================================================================== */
body.bshq-vocab-fullscreen-page #bshq-vocab-root :is(
  .bshq-vocab-stats article,
  .bshq-rule-banner,
  .bshq-vocab-actions,
  .bshq-quick-add,
  .bshq-growth-stats article,
  .bshq-growth-card,
  .bshq-rank-row,
  .bshq-leaderboard-note,
  .bshq-segmented,
  .bshq-topic-card,
  .bshq-dd-lesson-card,
  .bshq-library-filter-strip,
  .bshq-dd-workspace,
  .bshq-dd-reference,
  .bshq-dd-playerbar,
  .bshq-admin-audio-tools,
  .bshq-dd-reference-panel,
  .bshq-dd-ref-block,
  .bshq-dd-panel,
  .bshq-dd-support-card,
  .bshq-review-card,
  .bshq-finish-card,
  .bshq-loading-card,
  .bshq-account-popover,
  .bshq-notification-popover,
  .bshq-theme-card,
  .bshq-notification-item,
  .bshq-system-banner
) {
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow) !important;
}

body.bshq-vocab-fullscreen-page #bshq-vocab-root :is(
  .bshq-lesson-card-body,
  .bshq-cut-tuner,
  .bshq-theme-option,
  .bshq-account-item,
  .bshq-dd-tabs,
  .bshq-dd-ref-block,
  .bshq-dd-transcript,
  .bshq-rating-grid button,
  .bshq-meaning-grade button
) {
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
  background: var(--ui-surface-2) !important;
}

body.bshq-vocab-fullscreen-page #bshq-vocab-root :is(
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select
) {
  border: 1px solid var(--ui-border-strong) !important;
  color: var(--ui-text) !important;
  background: var(--ui-surface) !important;
  box-shadow: none !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root :is(input,textarea)::placeholder {
  color: var(--ui-subtle) !important;
  opacity: 1 !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root :is(input,textarea,select):focus {
  border-color: var(--ui-primary) !important;
  outline: 3px solid var(--ui-focus) !important;
  outline-offset: 0 !important;
}

/* Canonical text hierarchy. */
body.bshq-vocab-fullscreen-page #bshq-vocab-root :is(
  .bshq-vocab-stats strong,
  .bshq-growth-stats article > strong,
  .bshq-growth-card h3,
  .bshq-growth-card-head > b,
  .bshq-rank-number,
  .bshq-rank-row b,
  .bshq-dd-card-title,
  .bshq-library-heading h2,
  .bshq-catalog-head strong,
  .bshq-dd-title-row strong,
  .bshq-dd-play-label b,
  .bshq-dd-ref-block p,
  .bshq-dd-ref-block strong,
  .bshq-review-term,
  .bshq-review-meaning,
  .bshq-account-item strong,
  .bshq-theme-card strong,
  .bshq-notification-item strong
) {
  color: var(--ui-text) !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root :is(
  .bshq-vocab-stats span,
  .bshq-vocab-actions p,
  .bshq-quick-add small,
  .bshq-growth-stat-label span,
  .bshq-growth-stats small,
  .bshq-growth-card p,
  .bshq-rank-row small,
  .bshq-library-heading p,
  .bshq-catalog-head span,
  .bshq-catalog-head small,
  .bshq-lesson-card-footer small,
  .bshq-dd-card-meta,
  .bshq-dd-title-row span,
  .bshq-dd-play-label small,
  .bshq-admin-audio-tools summary small,
  .bshq-cut-tuner small,
  .bshq-dd-ref-block > span,
  .bshq-dd-shortcuts,
  .bshq-account-item small,
  .bshq-theme-card small,
  .bshq-notification-item p
) {
  color: var(--ui-subtle) !important;
}

/* ========================================================================== 
   4. Dashboard — compact and readable
   ========================================================================== */
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-growth-dashboard {
  display: grid !important;
  gap: 18px !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-growth-hero {
  min-height: 168px !important;
  padding: 24px 28px !important;
  border: 1px solid #5367C9 !important;
  border-radius: 22px !important;
  color: #FFFFFF !important;
  background:
    radial-gradient(240px 180px at 84% 8%,rgba(251,191,36,.76),transparent 58%),
    linear-gradient(135deg,#3949D8 0%,#5968EA 62%,#7C83ED 100%) !important;
  box-shadow: 0 14px 36px rgba(38,51,158,.24) !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-growth-hero :is(h2,strong,span,b) {
  color: #FFFFFF !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-growth-hero h2 {
  margin: 6px 0 14px !important;
  line-height: 1.02 !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-growth-hero h2 > strong {
  color: #5EEAD4 !important;
  font-size: clamp(42px,5vw,62px) !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-growth-hero h2 > span {
  font-size: clamp(28px,4vw,48px) !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-growth-primary-action {
  min-height: 46px !important;
  padding: 0 18px !important;
  border-color: #FFFFFF !important;
  color: #3730A3 !important;
  background: #FFFFFF !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-growth-stats {
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  gap: 12px !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-growth-stats article {
  min-height: 104px !important;
  padding: 15px 16px !important;
  border-radius: 17px !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-growth-stats article > strong {
  margin-top: 8px !important;
  font-size: 28px !important;
  line-height: 1 !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-growth-stat-label i {
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-primary) !important;
  background: var(--ui-surface-3) !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-growth-grid {
  gap: 14px !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-growth-card {
  min-height: 146px !important;
  padding: 18px 20px !important;
  border-radius: 18px !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-growth-card-head h3 {
  margin-top: 3px !important;
  font-size: 19px !important;
}

/* ========================================================================== 
   5. My Library / SRS dashboard
   ========================================================================== */
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-vocab-dashboard {
  display: grid !important;
  gap: 18px !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-vocab-stats {
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  gap: 12px !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-vocab-stats article {
  min-height: 100px !important;
  padding: 16px 18px !important;
  border-radius: 17px !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-vocab-stats strong {
  margin-top: 8px !important;
  font-size: 29px !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-rule-banner,
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-vocab-actions,
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-quick-add {
  padding: 16px 18px !important;
  border-radius: 18px !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-vocab-actions {
  display: flex !important;
  align-items: center !important;
  min-height: 64px !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-quick-add label {
  color: var(--ui-text) !important;
}

/* ========================================================================== 
   6. Lesson catalog — aligned, compact, fully visible
   ========================================================================== */
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-library-filter-strip {
  border-radius: 18px !important;
  background: var(--ui-surface) !important;
  backdrop-filter: none !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-lesson-catalog-grid {
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  grid-auto-rows: 180px !important;
  align-items: stretch !important;
  gap: 12px !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-dd-lesson-card {
  width: 100% !important;
  height: 180px !important;
  min-height: 180px !important;
  padding: 0 !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 18px !important;
  background: var(--ui-surface) !important;
  overflow: hidden !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-lesson-cover {
  width: 100% !important;
  height: 66px !important;
  min-height: 66px !important;
  flex: 0 0 66px !important;
  margin: 0 !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-lesson-card-body {
  width: 100% !important;
  flex: 1 1 auto !important;
  padding: 10px 12px !important;
  color: var(--ui-text) !important;
  background: var(--ui-surface) !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-mode-row span {
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text-2) !important;
  background: var(--ui-surface-3) !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-dd-fav {
  border-color: var(--ui-border) !important;
  color: var(--ui-subtle) !important;
  background: var(--ui-surface-2) !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-dd-card-state {
  color: var(--ui-primary) !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-dd-card-progress {
  background: var(--ui-border) !important;
}

/* ========================================================================== 
   7. Dictation workspace — high contrast in both modes
   ========================================================================== */
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-dd-layout {
  gap: 18px !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-dd-workspace,
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-dd-reference {
  border: 1px solid var(--ui-border) !important;
  border-radius: 20px !important;
  color: var(--ui-text) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow) !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-dd-playerbar {
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
  background: var(--ui-surface-3) !important;
  box-shadow: none !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-dd-play {
  border-color: var(--ui-primary) !important;
  color: #FFFFFF !important;
  background: var(--ui-primary) !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-shadowing-toggle,
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-dd-speeds button,
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-cut-tuner button {
  border: 1px solid var(--ui-border-strong) !important;
  color: var(--ui-text-2) !important;
  background: var(--ui-surface-2) !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-shadowing-toggle.active,
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-dd-speeds button.active {
  border-color: var(--ui-primary) !important;
  color: #FFFFFF !important;
  background: var(--ui-primary) !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-admin-audio-tools {
  border: 1px solid var(--ui-border) !important;
  background: var(--ui-surface) !important;
  box-shadow: none !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-cut-time {
  color: var(--ui-success) !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root #bshq-audio-answer {
  min-height: 98px !important;
  color: var(--ui-text) !important;
  background: var(--ui-surface-2) !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-dd-reference-panel {
  background: transparent !important;
  box-shadow: none !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-dd-ref-block {
  border: 1px solid var(--ui-border) !important;
  border-radius: 16px !important;
  color: var(--ui-text) !important;
  background: var(--ui-surface-2) !important;
  box-shadow: none !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-dd-ref-block .is-hidden-answer {
  color: var(--ui-muted) !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-dd-tabs button {
  color: var(--ui-muted) !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-dd-tabs button.active {
  color: #FFFFFF !important;
  background: var(--ui-primary) !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-dd-answer-options label {
  color: var(--ui-muted) !important;
}

/* ========================================================================== 
   8. Leaderboard, notifications and account popovers
   ========================================================================== */
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-segmented button {
  color: var(--ui-muted) !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-segmented button.active {
  color: #FFFFFF !important;
  background: var(--ui-primary) !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-rank-row.is-me {
  border-color: var(--ui-primary) !important;
  background: var(--ui-surface-3) !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-rank-avatar {
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-primary) !important;
  background: var(--ui-surface-3) !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-account-popover,
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-notification-popover {
  color: var(--ui-text) !important;
  background: var(--ui-surface) !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-account-summary,
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-notification-popover > header {
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
  background: var(--ui-surface) !important;
  backdrop-filter: none !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-account-item:hover,
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-notification-item.is-unread {
  background: var(--ui-surface-3) !important;
}
body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-theme-option.active {
  border-color: var(--ui-primary) !important;
  color: #FFFFFF !important;
  background: var(--ui-primary) !important;
}

/* ========================================================================== 
   9. Responsive
   ========================================================================== */
@media (max-width: 1240px) {
  body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-lesson-catalog-grid {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  }
}
@media (max-width: 1050px) {
  body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-growth-stats,
  body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-vocab-stats {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
}
@media (max-width: 767px) {
  body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-top {
    min-height: 68px !important;
  }
  body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-growth-hero {
    min-height: 150px !important;
    padding: 20px !important;
  }
  body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-growth-stats,
  body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-vocab-stats {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
  body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-lesson-catalog-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
  }
  body.bshq-vocab-fullscreen-page #bshq-vocab-root .bshq-dd-lesson-card {
    height: 172px !important;
    min-height: 172px !important;
  }
}