/* ═══════════════════════════════════════════════════════════════════════
   TeachEd — Design Unification Layer
   "Black + Lime" card system. Loaded LAST so it wins the cascade.

   Rules of the road:
   • Primary CTAs / default buttons → ink (#0E0E10)
   • Emphasis CTAs / "next step" buttons → lime (#C8E632)
   • Featured/hero cards → ink background with lime accents
   • Regular cards → white with lime edge glow on hover
   • Active tab/filter/level pill → ink + lime text
   • Pink (#EC2D8C) reserved for SEMANTIC URGENCY only:
       live dots, notification dots, "now/today" markers,
       italic em emphasis. Do NOT use for routine CTAs.
═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Override the legacy --accent token across all pages.
     harmony.css doesn't consume var(--accent) directly (uses var(--pink) explicitly),
     so this only redirects per-page inline styles that referenced --accent for CTAs. */
  --accent: #0E0E10;

  --u-ink:       #0E0E10;
  --u-ink-2:     #1C1C1E;
  --u-ink-hover: #1F1F22;
  --u-ink-soft:  rgba(14, 14, 16, 0.06);
  --u-ink-line:  rgba(14, 14, 16, 0.08);
  --u-ink-line2: rgba(14, 14, 16, 0.14);
  --u-lime:      #C8E632;
  --u-lime-pop:  #CDF24F;
  --u-lime-dark: #A8C42A;
  --u-lime-soft: rgba(200, 230, 50, 0.16);
  --u-lime-edge: rgba(205, 242, 79, 0.42);
  --u-lime-glow: rgba(200, 230, 50, 0.30);
  --u-card:      #FFFFFF;
}

[data-theme="dark"] {
  --u-card:      #2C2C2E;
  --u-ink-soft:  rgba(255, 255, 255, 0.06);
  --u-ink-line:  rgba(255, 255, 255, 0.08);
  --u-ink-line2: rgba(255, 255, 255, 0.14);
}

/* ═══════════════════════════════════════════════════════════════
   0. CANONICAL TYPOGRAPHY + LIGHT THEME LOCK
   Dark mode retired — force cream+lime everywhere.
   SF Pro (Apple system) is the single typeface; Fraunces falls
   back to SF Pro Display so headings stay in the same family.
═══════════════════════════════════════════════════════════════ */

:root {
  /* Override harmony.css's Manrope/Fraunces with the SF Pro stack */
  --font:       -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif !important;
  --font-sans:  -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif !important;
  --font-serif: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif !important;
  --font-mono:  'SFMono-Regular', 'SF Mono', ui-monospace, Menlo, Monaco, Consolas, monospace !important;

  /* Cream-light surface palette — same on every page */
  --bg:         #F5F0E8 !important;
  --bg-2:       #EDE8E0 !important;
  --bg2:        #EDE8E0 !important;
  --cream:      #F5F0E8 !important;
  --card:       #FFFFFF !important;
  --text:       #0E0E10 !important;
  --text-2:     #3A3A2E !important;
  --text-3:     #7A7A6A !important;
  --text2:      #3A3A2E !important;
  --text3:      #7A7A6A !important;
  --border:     rgba(14,14,16,0.08) !important;
  --border-2:   rgba(14,14,16,0.16) !important;
  --border2:    rgba(14,14,16,0.16) !important;
  --line:       rgba(14,14,16,0.08) !important;
  --line2:      rgba(14,14,16,0.16) !important;
  --ink:        #0E0E10 !important;
  --ink2:       #1C1C1E !important;
  --ink3:       #6A6A5A !important;
}

/* Neuter any stray [data-theme="dark"] still applied at runtime —
   variables fall back to the cream palette above. */
html[data-theme="dark"],
:root[data-theme="dark"] {
  --bg:         #F5F0E8 !important;
  --bg-2:       #EDE8E0 !important;
  --bg2:        #EDE8E0 !important;
  --cream:      #F5F0E8 !important;
  --card:       #FFFFFF !important;
  --text:       #0E0E10 !important;
  --text-2:     #3A3A2E !important;
  --text-3:     #7A7A6A !important;
  --ink:        #0E0E10 !important;
  --ink2:       #1C1C1E !important;
  --u-card:     #FFFFFF !important;
  --u-ink-soft: rgba(14, 14, 16, 0.06) !important;
  --u-ink-line: rgba(14, 14, 16, 0.08) !important;
  --u-ink-line2:rgba(14, 14, 16, 0.14) !important;
}

html, body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
  font-weight: 500;
  letter-spacing: -0.011em;
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Every text element inherits the same family — kills harmony.css Manrope override */
body, button, input, select, textarea,
.nav-link, .nav-logo-name, .nav-user,
h1, h2, h3, h4, h5, h6,
.section-h, .page-title, .tb-title, .card-title,
.stat-val, .stat-lbl, .badge, .chip, .btn, .mini-btn {
  font-family: var(--font) !important;
}

/* Headlines previously set to Fraunces serif — now SF Pro Display, kept tight */
.page-title, .section-title,
h1, h2, h3,
[style*="font-family:Fraunces"],
[style*="font-family: Fraunces"],
[style*="font-family:'Fraunces'"],
[style*='font-family:"Fraunces"'] {
  font-family: var(--font-serif) !important;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ═══════════════════════════════════════════════════════════════
   1. PRIMARY ACTION BUTTONS — ink default, lime emphasis
═══════════════════════════════════════════════════════════════ */

/* Default .btn and .btn-primary → ink (overrides harmony.css pink) */
.btn-primary,
.btn.btn-primary,
button.btn:not(.lime):not(.ghost):not(.btn-lime):not(.btn-ghost):not(.btn-pink-soft):not(.btn-ink),
a.btn:not(.lime):not(.ghost):not(.btn-lime):not(.btn-ghost):not(.btn-pink-soft):not(.btn-ink) {
  background: var(--u-ink) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(14, 14, 16, 0.18) !important;
}
.btn-primary:hover,
.btn.btn-primary:hover,
button.btn:not(.lime):not(.ghost):not(.btn-lime):not(.btn-ghost):hover,
a.btn:not(.lime):not(.ghost):not(.btn-lime):not(.btn-ghost):hover {
  background: var(--u-ink-hover) !important;
  box-shadow: 0 8px 22px rgba(14, 14, 16, 0.26) !important;
  transform: translateY(-1px);
}

/* Lime button — keep but harmonize with lime-glow shadow */
.btn-lime,
.btn.btn-lime {
  background: var(--u-lime) !important;
  color: var(--u-ink) !important;
  box-shadow: 0 4px 14px var(--u-lime-glow) !important;
}
.btn-lime:hover,
.btn.btn-lime:hover {
  background: var(--u-lime-dark) !important;
  box-shadow: 0 8px 22px rgba(200, 230, 50, 0.40) !important;
}

/* Community page .mini-btn (was inheriting pink via --accent) */
.mini-btn:not(.alt):not(.lime):not(.ghost) {
  background: var(--u-ink) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(14, 14, 16, 0.18) !important;
}
.mini-btn:not(.alt):not(.lime):not(.ghost):hover {
  background: var(--u-ink-hover) !important;
  box-shadow: 0 6px 18px rgba(14, 14, 16, 0.26) !important;
}
.mini-btn.alt {
  background: var(--u-lime-soft) !important;
  color: var(--u-ink) !important;
}
.mini-btn.alt:hover {
  background: rgba(200, 230, 50, 0.28) !important;
}
.mini-btn.lime {
  background: var(--u-lime) !important;
  color: var(--u-ink) !important;
}

/* Mobile mp-* "primary on ink card" CTA: was pink, now lime */
.mp-btn-pink-solid {
  background: var(--u-lime) !important;
  color: var(--u-ink) !important;
  box-shadow: 0 6px 18px var(--u-lime-glow) !important;
}
.mp-btn-pink-solid:hover {
  background: var(--u-lime-dark) !important;
}

/* ═══════════════════════════════════════════════════════════════
   2. CARD SYSTEM — white default, lime edge on hover, ink for featured
═══════════════════════════════════════════════════════════════ */

/* Regular content cards: white with subtle ink line
   NOTE: .board-card excluded on body.board-page — editor canvas cards
   manage their own background/border (sticky colors, frame, etc.) */
body:not(.board-page) .board-card,
.game-tile-comm,
.community-card,
.pack-card:not(.featured):not(.ink),
.tool-card,
.lesson-card:not(.featured):not(.ink):not(.lime):not(.dark),
.mp-board-card:not(.dark):not(.lime),
.stat-card:not(.active),
.curr-card:not(.dark):not(.lime),
.insight-card:not(.active) {
  background: var(--u-card) !important;
  border: 1px solid var(--u-ink-line) !important;
  transition: border-color 0.22s ease,
              box-shadow 0.22s ease,
              transform 0.22s cubic-bezier(0.34, 1.3, 0.64, 1) !important;
}

/* Lime edge glow on hover — signature accent (NOT on editor canvas) */
body:not(.board-page) .board-card:hover,
.game-tile-comm:hover,
.community-card:hover,
.pack-card:hover,
.tool-card:hover,
.lesson-card:not(.featured):not(.ink):not(.lime):not(.dark):hover {
  border-color: var(--u-lime-edge) !important;
  box-shadow: 0 12px 32px rgba(14, 14, 16, 0.08),
              inset 0 0 0 1px var(--u-lime-edge) !important;
}

/* Card top accent stripe — NOT on editor canvas (would draw a stripe
   across every sticky / shape / frame which is wrong) */
body:not(.board-page) .board-card::before,
.lesson-card::before,
.pack-card.featured::before,
.community-card.featured::before {
  background: linear-gradient(90deg, var(--u-lime), var(--u-ink)) !important;
}

/* Featured / hero cards — ink with lime CTAs inside */
.hero-card.ink,
.featured-card,
.lesson-card.featured,
.lesson-card.ink,
.lesson-card.dark,
.curr-card.dark,
.board-card.ink,
.pack-card.featured,
.pack-card.ink,
.mp-featured,
.mp-next-card {
  background: var(--u-ink) !important;
  color: #fff !important;
  border-color: var(--u-ink) !important;
}
.hero-card.ink *,
.featured-card *,
.lesson-card.featured *,
.lesson-card.ink *,
.pack-card.featured *,
.pack-card.ink *,
.mp-next-card *:not(.mp-btn-pink-solid):not(.mp-btn-ghost-white):not(.mp-btn-lime) {
  border-color: rgba(255, 255, 255, 0.10);
}

/* Lime variant card (highlight) */
.curr-card.lime,
.mp-board-card.lime,
.lesson-card.lime,
.board-card.lime,
.pack-card.lime {
  background: var(--u-lime) !important;
  color: var(--u-ink) !important;
  border-color: var(--u-lime-dark) !important;
}

/* Icon tiles inside cards — lime-tinted backgrounds */
.board-ic,
.tool-icon,
.feature-icon,
.icon-tile,
.mp-quick-ic,
.mp-quick-ic2 {
  background: var(--u-lime-soft) !important;
}
.curr-card.dark .board-ic,
.lesson-card.dark .tool-icon,
.featured-card .icon-tile,
.mp-next-card .icon-tile {
  background: rgba(205, 242, 79, 0.20) !important;
  color: var(--u-lime-pop) !important;
}

/* ═══════════════════════════════════════════════════════════════
   3. TABS, FILTERS, LEVEL PILLS — ink+lime active
═══════════════════════════════════════════════════════════════ */

/* Generic chips / filter pills */
.chip.active,
.fc-set.active,
.mp-filter.active,
.tab.active:not(.community-tab):not(.ltab),
.level-pill.active,
.lvl-pill.active,
.ltab.active,
.community-tab.active {
  background: var(--u-ink) !important;
  color: var(--u-lime-pop) !important;
  border-color: var(--u-ink) !important;
}

/* Inactive hover → lime tint */
.chip:hover:not(.active):not(.active-lime),
.fc-set:hover:not(.active),
.mp-filter:hover:not(.active),
.level-pill:hover:not(.active),
.ltab:hover:not(.active) {
  border-color: var(--u-lime-edge) !important;
  background: var(--u-lime-soft) !important;
  color: var(--u-ink) !important;
}

/* "Lime-active" variant — when ink would be visually heavy */
.chip.active-lime,
.sub-tab.active,
.tag-btn.active {
  background: var(--u-lime) !important;
  color: var(--u-ink) !important;
  border-color: var(--u-lime) !important;
}

/* ═══════════════════════════════════════════════════════════════
   4. SIDEBAR / NAV — ink+lime active state
═══════════════════════════════════════════════════════════════ */

.sb-item.active,
.nav-item.active {
  background: var(--u-lime-soft) !important;
  color: var(--u-ink) !important;
  font-weight: 800 !important;
  position: relative;
}
.sb-item.active::before,
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--u-lime);
  border-radius: 0 3px 3px 0;
}
/* Dark sidebar variant — keep lime accent visible */
[data-theme="dark"] .sb-item.active,
.sidebar.dark .sb-item.active {
  background: rgba(200, 230, 50, 0.12) !important;
  color: var(--u-lime-pop) !important;
}

/* ═══════════════════════════════════════════════════════════════
   5. STATUS BADGES & TAGS — neutralise pink "custom" tags
═══════════════════════════════════════════════════════════════ */

/* "My game" tag in community.html (inline pink) → neutral ink */
.tag[style*="236,45,140"],
.tag[style*="#EC2D8C"],
.tag[style*="#E85D75"] {
  background: var(--u-ink-soft) !important;
  color: var(--u-ink) !important;
}

/* Level badges baseline */
.tag.level,
.badge.level {
  background: var(--u-ink-soft);
  color: var(--u-ink);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* ═══════════════════════════════════════════════════════════════
   6. LESSON-PACKS — retire #E85D75 pink theme to ink+lime
═══════════════════════════════════════════════════════════════ */

/* Override accent stripes that used the pack accent variable */
.pack-card .pack-stripe,
.pack-card::before,
.pack-hero .pack-accent {
  background: linear-gradient(90deg, var(--u-lime), var(--u-ink)) !important;
}

/* Pack-card level/category badge */
.pack-card .pack-level,
.pack-card .pack-cat {
  background: var(--u-ink) !important;
  color: var(--u-lime-pop) !important;
}

/* lesson-packs ltab active was pink */
.ltab.active {
  background: var(--u-ink) !important;
  color: var(--u-lime-pop) !important;
  border-color: var(--u-ink) !important;
}

/* ═══════════════════════════════════════════════════════════════
   7. PROGRESS BARS / FILLS — lime instead of pink-magenta
═══════════════════════════════════════════════════════════════ */

.lc-prog-fill,
.fc-progress-fill,
.prog-lang-fill,
.progress-fill,
.sb-milestone-fill {
  background: linear-gradient(90deg, var(--u-lime), var(--u-lime-dark)) !important;
}

/* Today widget mixed bar can stay pink→lime (urgency + progress) */
/* .wg-today-prog-fill is already gradient pink→lime, keep it */

/* ═══════════════════════════════════════════════════════════════
   8. SEMANTIC PINK — preserved (do not touch these classes)
   • .dot-live              live status pulse
   • .di-dot, .tb-dot       notification badges
   • .mp-pulse.pink         live event pulse
   • .cal-cell.now          current calendar cell
   • .mp-day.now            current day
   • .mp-tl-row.now         current timeline row
   • .h-display em,
     .page-title em,
     .curr-title em         italic emphasis (brand signature)
   • .badge.live, .badge-live
═══════════════════════════════════════════════════════════════ */

/* Just make sure "today/now" still feels alive — current hour is pink */
.mp-tl-row.now .mp-tl-card,
.cal-cell.now .cal-day,
.day-pill.now,
.mp-day.now {
  /* Inherits from mobile-pro.css / harmony.css — pink stays */
}

/* ═══════════════════════════════════════════════════════════════
   9. DARK THEME — card surfaces stay consistent
═══════════════════════════════════════════════════════════════ */

body:not(.board-page)[data-theme="dark"] .board-card,
[data-theme="dark"] .game-tile-comm,
[data-theme="dark"] .pack-card,
[data-theme="dark"] .tool-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .mp-board-card,
[data-theme="dark"] .lesson-card:not(.featured):not(.ink) {
  background: #2C2C2E;
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .board-card:hover,
[data-theme="dark"] .game-tile-comm:hover,
[data-theme="dark"] .pack-card:hover {
  border-color: var(--u-lime-edge) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35),
              inset 0 0 0 1px var(--u-lime-edge) !important;
}

/* ═══════════════════════════════════════════════════════════════
   TARGETED LIGHT OVERRIDES
   Undo harmony.css desktop dark-glass rules that hit non-index pages.
   Scoped precisely so index.html OS wallpaper stays untouched.
═══════════════════════════════════════════════════════════════ */

/* 1a. teacher-tools / lesson-builder: hero-card and hero-side are intentionally
       dark (#181818). Restore dark bg + white text.
       Uses body:not(.os-desktop) prefix → specificity (0,3,1) beats the
       community rule below at (0,3,0) so this always wins on non-OS pages. */
@media (min-width: 861px) {
  body:not(.os-desktop) .hero-inner .hero-card,
  body:not(.os-desktop) .hero-in    .hero-side {
    background: #181818 !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 18px 44px rgba(24,24,24,.22) !important;
  }
  body:not(.os-desktop) .hero-inner .hero-card *,
  body:not(.os-desktop) .hero-in    .hero-side * {
    color: rgba(255,255,255,0.86) !important;
  }
  body:not(.os-desktop) .hero-inner .hero-card .small {
    color: rgba(255,255,255,0.55) !important;
  }
  /* .btn.ghost inside these dark cards → keep cream style */
  body:not(.os-desktop) .hero-inner .hero-card .btn.ghost,
  body:not(.os-desktop) .hero-in    .hero-side .btn.ghost,
  body:not(.os-desktop) .hero-actions .btn.ghost {
    background: rgba(255,255,255,0.10) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.20) !important;
  }
}

/* 1a-2. .btn.ghost on light non-OS-desktop pages: restore dark ink text.
   harmony.css @min-width:861 forces cream text on ALL .btn.ghost globally.
   On light-background pages this makes ghost buttons invisible. */
@media (min-width: 861px) {
  body:not(.os-desktop) .btn.ghost:not(.hero-actions .btn.ghost):not(.hero-inner .btn.ghost):not(.hero-in .btn.ghost) {
    background: rgba(255,255,255,0.90) !important;
    color: #1C1C1E !important;
    border: 1px solid rgba(14,14,16,0.16) !important;
  }
  body:not(.os-desktop) .btn.ghost:hover:not(.hero-actions .btn.ghost):not(.hero-inner .btn.ghost) {
    background: rgba(200,230,50,0.12) !important;
    border-color: rgba(200,230,50,0.40) !important;
    color: #1C1C1E !important;
  }
}

/* 1b. Community hero-card + share-card: force light on cream bg
      (harmony.css @min-width:861 makes these dark glass — wrong on community)
      Note: .hero-inner .hero-card rule above has higher specificity and
      comes later → it overrides these light rules for teacher-tools pages. */
@media (min-width: 861px) {
  .hero-card:not(.ink):not(.dark) {
    background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(237,232,224,.84)) !important;
    border: 1px solid rgba(14,14,16,0.07) !important;
    color: var(--text) !important;
    box-shadow: 0 18px 50px rgba(94,94,74,.09) !important;
  }
  .hero-card:not(.ink):not(.dark) h1,
  .hero-card:not(.ink):not(.dark) h2,
  .hero-card:not(.ink):not(.dark) p,
  .hero-card:not(.ink):not(.dark) .hero-copy,
  .hero-card:not(.ink):not(.dark) .eyebrow {
    color: inherit !important;
  }
  .share-card {
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(14,14,16,0.07) !important;
    color: var(--text) !important;
    box-shadow: 0 18px 50px rgba(94,94,74,.09) !important;
  }
  .share-card .share-title,
  .share-card .label,
  .share-card .field * {
    color: var(--text) !important;
  }
  .share-card input,
  .share-card select,
  .share-card textarea {
    background: #fff !important;
    color: var(--text) !important;
    border-color: rgba(14,14,16,0.12) !important;
  }
}

/* 2. Modal inputs (onboarding, settings): light regardless of OS dark mode.
      Inline-styled inputs have no background — harmony gradient should apply,
      but OS dark mode can override before color-scheme propagates. Lock it. */
#onboarding-overlay input,
#onboarding-overlay textarea,
#onboarding-overlay select,
.modal input:not([type="checkbox"]):not([type="radio"]),
.modal textarea,
.modal select,
[id$="-modal"] input:not([type="checkbox"]):not([type="radio"]),
[id$="-modal"] textarea,
[id$="-modal"] select,
[id$="-overlay"] input:not([type="checkbox"]):not([type="radio"]),
[id$="-overlay"] textarea,
[id$="-overlay"] select {
  background: #ffffff !important;
  color: #1c1c1e !important;
  border-color: rgba(14,14,16,0.14) !important;
  color-scheme: light !important;
}

/* 3. All remaining inputs / selects on non-board pages — lock to light.
      Prevents any browser auto-dark from sneaking in. */
body:not(.board-page) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
body:not(.board-page) textarea,
body:not(.board-page) select {
  background-color: #ffffff !important;
  color: #1c1c1e !important;
  color-scheme: light !important;
}

/* ═══════════════════════════════════════════════════════════════
   POINT FIX — sb-item text on light backgrounds
   harmony.css @min-width:861px sets .sb-item to cream/light text
   (designed for dark board sidebar). Restore dark text on light-bg pages.
═══════════════════════════════════════════════════════════════ */

@media (min-width: 861px) {
  /* Non-board pages: sidebar sits on cream --bg, needs dark text */
  body:not(.board-page) #sidebar .sb-item,
  body:not(.board-page) .sb-item {
    color: var(--text-2, #3A3A2E) !important;
  }
  body:not(.board-page) #sidebar .sb-item:hover,
  body:not(.board-page) .sb-item:hover {
    background: rgba(200, 230, 50, 0.10) !important;
    color: var(--ink, #0E0E10) !important;
  }
  body:not(.board-page) #sidebar .sb-item.active,
  body:not(.board-page) .sb-item.active {
    background: rgba(200, 230, 50, 0.16) !important;
    color: var(--ink, #0E0E10) !important;
    font-weight: 800 !important;
  }
  body:not(.board-page) #sidebar .sb-label,
  body:not(.board-page) .sb-section-label {
    color: var(--text-3, #7A7A6A) !important;
  }
  body:not(.board-page) #sidebar {
    background: var(--bg, #F5F0E8) !important;
    border-right-color: rgba(14,14,16,.08) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   POINT FIX — dark ink panels / topic-bar inside game-builder
   These are intentionally dark and must keep dark inputs.
═══════════════════════════════════════════════════════════════ */

/* Exempt intentionally dark panels from the global light-input override */
.topic-bar input,
.topic-bar select,
.topic-bar textarea,
.ink-panel input,
.ink-panel select,
.ink-panel textarea,
[style*="background:#0E0E10"] input,
[style*="background:#1C1C1E"] input,
[style*="background: #0E0E10"] input,
[style*="background: #1C1C1E"] input,
.topic-ctl input,
.topic-ctl select {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.12) !important;
  color-scheme: dark !important;
}

/* ═══════════════════════════════════════════════════════════════
   POINT FIX — community board cards: reduce top stripe height
   The lime→ink gradient stripe is too thick on community cards.
═══════════════════════════════════════════════════════════════ */

body:not(.board-page) .board-card::before {
  height: 3px !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE FIX — btn-primary must be lime, not pink.
   harmony.css sets .btn-primary → var(--pink) which is wrong for
   action buttons like "Create course". unify.css wins the cascade.
═══════════════════════════════════════════════════════════════ */

.btn-primary,
.btn.btn-primary {
  background: #C8E632 !important;
  color: #1C1C1E !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(200,230,50,0.28) !important;
}
.btn-primary:hover,
.btn.btn-primary:hover {
  background: #A8C42A !important;
  color: #1C1C1E !important;
  transform: translateY(-1px);
}

/* ── btn-soft: neutral ink tone, not purple ── */
.btn-soft,
.btn.btn-soft {
  background: rgba(94,94,74,0.08) !important;
  color: #1C1C1E !important;
  border: 1.5px solid rgba(94,94,74,0.20) !important;
  box-shadow: none !important;
}
.btn-soft:hover,
.btn.btn-soft:hover {
  background: rgba(94,94,74,0.14) !important;
  border-color: rgba(94,94,74,0.32) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP FIXES — harmony.css @media(min-width:861px) forces
   .sb-item-badge → pink. Override to lime. Also fix sch-view.active
   (schedule "Open full schedule" button) and the board search input.
═══════════════════════════════════════════════════════════════ */

@media (min-width: 861px) {
  /* Sidebar skill/category count badges: lime, not pink */
  .sb-item-badge {
    background: rgba(200,230,50,0.22) !important;
    color: #1C1C1E !important;
    border-radius: 10px !important;
  }
  .sb-item.active .sb-item-badge {
    background: #C8E632 !important;
    color: #1C1C1E !important;
  }
}

/* Schedule "Open full schedule →" active tab button: ink, not pink */
.sch-view.active {
  background: #0E0E10 !important;
  color: #F5F0E8 !important;
}

/* Board search input: keep transparent so the container bg shows through */
.curr-search input {
  background: none !important;
  background-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════
   LESSON CARD TEXT FIX
   harmony.css @media(min-width:861px) forces .lesson-card to a
   near-black background BUT only defines .lc-title/.lc-desc for
   the text — courses.html uses .lc-name/.lc-num which keep their
   dark ink color (#1C1C1E) → black on black = invisible.
   Fix: make those text nodes cream/white when inside dark cards.
═══════════════════════════════════════════════════════════════ */

@media (min-width: 861px) {
  .lesson-card .lc-name,
  .lesson-card .lc-title {
    color: #F5F0E8 !important;
  }
  .lesson-card .lc-num {
    color: rgba(245,240,232,0.55) !important;
  }
  .lesson-card .lc-meta,
  .lesson-card .lc-dur {
    color: rgba(245,240,232,0.50) !important;
  }
  /* Top stripe: lime only, no pink */
  .lesson-card::before {
    background: linear-gradient(90deg, #C8E632, #A8C42A) !important;
  }

  /* ── .lc-lang language badge: harmony forces pink-on-pink — fix to lime ── */
  .lc-lang {
    background: rgba(200,230,50,0.16) !important;
    border-color: rgba(200,230,50,0.28) !important;
    color: #5A7A00 !important;
  }

  /* ── .lc-prog-fill: pure lime, remove pink gradient ── */
  .lc-prog-fill {
    background: linear-gradient(90deg, #C8E632, #A8C42A) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CALENDAR TODAY CIRCLE & EVENT CHIPS
   Both index.html and schedule.html use var(--accent) for the
   today date circle background and event text. When harmony.css
   wins --accent=pink, these show pink. Override to ink.
═══════════════════════════════════════════════════════════════ */

/* index.html calendar widget */
.sch-cell.today .sch-day-num {
  background: #0E0E10 !important;
  color: #F5F0E8 !important;
}
.sch-event {
  color: #1C1C1E !important;
  background: linear-gradient(135deg, rgba(200,230,50,0.18),
    rgba(202,201,183,0.15)) !important;
  border-color: rgba(200,230,50,0.22) !important;
}

/* schedule.html full-page calendar */
.gh-day.today .gh-day-num {
  background: #0E0E10 !important;
  color: #fff !important;
}
.gh-day.today {
  color: #0E0E10 !important;
}

/* ═══════════════════════════════════════════════════════════════
   PROFILE PAGE — board card names & recent-boards names are
   near-invisible (inherit from a faint cascade chain).
   Pin them to solid ink.
═══════════════════════════════════════════════════════════════ */

/* Profile board grid: board name */
.bc-name {
  color: #0E0E10 !important;
}
.bc-meta {
  color: #7A7A6A !important;
}

/* Profile board grid: Primary "Open" button — ink, not pink */
.bc-btn.primary {
  background: #0E0E10 !important;
  color: #F5F0E8 !important;
  border-color: #0E0E10 !important;
}
.bc-btn.primary:hover {
  background: #1C1C1E !important;
  border-color: #1C1C1E !important;
  color: #F5F0E8 !important;
}

/* Profile "Recent Boards" list: board name & meta */
.rbi-name {
  color: #0E0E10 !important;
}
.rbi-meta {
  color: #7A7A6A !important;
}

/* lesson-card text: dark-bg cards (courses.html etc.) → cream text */
@media (min-width: 861px) {
  body:not(.os-desktop) .lesson-card .lc-title { color: #F5F0E8 !important; }
  body:not(.os-desktop) .lesson-card .lc-meta,
  body:not(.os-desktop) .lesson-card .lc-dur  { color: rgba(245,240,232,0.55) !important; }
  /* OS window: white-bg cards → dark text */
  body.os-desktop .lesson-card .lc-title      { color: #171719 !important; }
  body.os-desktop .lesson-card .lc-meta,
  body.os-desktop .lesson-card .lc-dur        { color: #7A7A6A !important; }
}

/* ═══════════════════════════════════════════════════════════════
   NON-OS-DESKTOP PAGE RESETS (lesson-builder, teacher-tools, etc.)
   harmony.css @media(min-width:861px) forces dark body bg + cream
   text + dark glass inputs globally. This is only correct for
   index.html (which has class="os-desktop"). All other pages get
   their light cream/white theme restored here.
═══════════════════════════════════════════════════════════════ */

@media (min-width: 861px) {
  /* ── Body: restore light background & dark text ── */
  body:not(.os-desktop) {
    background-color: transparent !important;
    color: #171719 !important;
  }

  /* ── .wrap: restore dark ink text ── */
  body:not(.os-desktop) .wrap {
    color: #171719 !important;
  }
  body:not(.os-desktop) .grid {
    color: #171719 !important;
  }

  /* ── Form inputs / textareas / selects: restore light ── */
  body:not(.os-desktop) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
  body:not(.os-desktop) textarea,
  body:not(.os-desktop) select,
  body:not(.os-desktop) .form-input {
    background: #ffffff !important;
    background-image: none !important;
    background-color: #ffffff !important;
    color: #171719 !important;
    border: 1px solid rgba(23,23,25,0.12) !important;
    box-shadow: none !important;
  }
  body:not(.os-desktop) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):focus,
  body:not(.os-desktop) textarea:focus,
  body:not(.os-desktop) select:focus {
    border-color: rgba(88,103,255,0.55) !important;
    box-shadow: 0 0 0 4px rgba(88,103,255,0.10) !important;
    background: #ffffff !important;
  }
  body:not(.os-desktop) input::placeholder,
  body:not(.os-desktop) textarea::placeholder {
    color: rgba(23,23,25,0.38) !important;
  }

  /* ── Form labels: restore visible dark label ── */
  body:not(.os-desktop) :is(.label, .form-label, .field label, .form-field label) {
    color: rgba(23,23,25,0.50) !important;
  }

  /* ── select options: restore light ── */
  body:not(.os-desktop) select option {
    background: #ffffff !important;
    color: #171719 !important;
  }

  /* ── Panel titles / headings: restore dark ink ── */
  body:not(.os-desktop) .panel-title,
  body:not(.os-desktop) h1,
  body:not(.os-desktop) h2,
  body:not(.os-desktop) h3 {
    color: inherit !important;
  }

  /* ── section-title: harmony forces cream, restore to ink ── */
  body:not(.os-desktop) .section-title {
    color: #0E0E10 !important;
  }

  /* ── Schedule nav buttons: replace pink with neutral ink ── */
  body:not(.os-desktop) .sch-nav-btn {
    background: rgba(23,23,25,0.06) !important;
    border-color: rgba(23,23,25,0.14) !important;
    color: #171719 !important;
  }
  body:not(.os-desktop) .sch-nav-btn:hover {
    background: rgba(23,23,25,0.11) !important;
    color: #0E0E10 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ISSUE 1 — WIN WINDOWS: LIGHT CREAM THEME
   harmony.css forces dark glass on .win, .win-sidebar, .win-main
   and all inner board cards. The user wants the OS windows to be
   light cream (matching the rest of the design language).
═══════════════════════════════════════════════════════════════ */

@media (min-width: 861px) {
  /* Window chrome */
  body.os-desktop .win {
    background: rgba(245,240,232,0.97) !important;
    border: 1px solid rgba(23,23,25,0.10) !important;
    box-shadow:
      0 24px 72px rgba(0,0,0,0.14),
      0 8px 24px rgba(0,0,0,0.08),
      inset 0 1px 0 rgba(255,255,255,0.70) !important;
  }
  body.os-desktop .win-titlebar {
    background: rgba(234,228,216,0.98) !important;
    border-bottom: 1px solid rgba(23,23,25,0.08) !important;
  }
  body.os-desktop .win-title {
    color: #171719 !important;
  }
  body.os-desktop .win-sidebar {
    background: rgba(228,222,210,0.92) !important;
    border-right: 1px solid rgba(23,23,25,0.08) !important;
  }
  body.os-desktop .win-main {
    background: rgba(250,248,243,0.98) !important;
    color: #171719 !important;
  }

  /* Sidebar nav items */
  body.os-desktop .sb-section-label {
    color: rgba(23,23,25,0.40) !important;
  }
  body.os-desktop .sb-item {
    color: rgba(23,23,25,0.72) !important;
  }
  body.os-desktop .sb-item:hover {
    background: rgba(200,230,50,0.18) !important;
    color: #0E0E10 !important;
  }
  body.os-desktop .sb-item.active {
    background: rgba(200,230,50,0.22) !important;
    color: #0E0E10 !important;
  }

  /* Curriculum hero text inside win */
  body.os-desktop .curr-title {
    color: #0E0E10 !important;
  }
  body.os-desktop .curr-title em {
    color: #6A8A0A !important;
  }
  body.os-desktop .curr-eyebrow {
    color: #6A8A0A !important;
  }
  body.os-desktop .curr-copy {
    color: #5A5A4A !important;
  }
  body.os-desktop .curr-tabs {
    border-bottom-color: rgba(23,23,25,0.10) !important;
  }
  body.os-desktop .curr-tab {
    color: rgba(23,23,25,0.50) !important;
  }
  body.os-desktop .curr-tab:hover {
    background: rgba(200,230,50,0.14) !important;
    color: #0E0E10 !important;
  }
  body.os-desktop .curr-search {
    background: rgba(255,255,255,0.80) !important;
    border-color: rgba(23,23,25,0.12) !important;
    box-shadow: none !important;
  }
  body.os-desktop .curr-search input,
  body.os-desktop .curr-search input:not([type="checkbox"]) {
    color: #171719 !important;
    background: none !important;
  }
  body.os-desktop .curr-search input::placeholder {
    color: rgba(23,23,25,0.35) !important;
  }
  body.os-desktop .curr-search-ic {
    color: rgba(23,23,25,0.35) !important;
  }

  /* Board cards inside win */
  body.os-desktop .mp-board-card {
    background: rgba(255,255,255,0.85) !important;
    border-color: rgba(23,23,25,0.09) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
  }
  body.os-desktop .mp-board-card:hover {
    border-color: rgba(200,230,50,0.50) !important;
    box-shadow: 0 4px 16px rgba(200,230,50,0.14) !important;
  }
  body.os-desktop .mp-board-title {
    color: #171719 !important;
  }
  body.os-desktop .mp-board-meta {
    color: rgba(23,23,25,0.50) !important;
  }
  body.os-desktop .mp-board-eyebrow {
    color: rgba(23,23,25,0.38) !important;
  }
  body.os-desktop .mp-board-status {
    color: #6A8A0A !important;
  }
  body.os-desktop .mp-board-status::before {
    background: #6A8A0A !important;
  }

  /* Quick-start cards inside win */
  body.os-desktop .mp-quick {
    background: rgba(255,255,255,0.80) !important;
    border-color: rgba(23,23,25,0.09) !important;
  }
  body.os-desktop .mp-quick:hover {
    background: rgba(200,230,50,0.12) !important;
    border-color: rgba(200,230,50,0.35) !important;
  }
  body.os-desktop .mp-quick-t {
    color: #171719 !important;
  }
  body.os-desktop .mp-quick-s {
    color: rgba(23,23,25,0.52) !important;
  }
  body.os-desktop .mp-quick-arrow {
    color: #6A8A0A !important;
  }
  body.os-desktop .mp-quick-ic {
    background: rgba(200,230,50,0.20) !important;
  }

  /* Win forms (inputs inside win windows) */
  body.os-desktop .win input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
  body.os-desktop .win textarea,
  body.os-desktop .win select {
    background: rgba(255,255,255,0.90) !important;
    color: #171719 !important;
    border-color: rgba(23,23,25,0.14) !important;
    box-shadow: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   NAV USER CHIP — text visibility on dark nav
   harmony.css forces #nav dark glass globally (not inside @media).
   The .nav-user chip inherits dark text (--text2 = #3A3A2E) which
   is invisible on rgba(17,17,20,0.92). Force cream text to match
   the rest of the nav-link styling.
═══════════════════════════════════════════════════════════════ */

#nav .nav-user {
  color: rgba(245,240,232,0.85) !important;
  border-color: rgba(205,242,79,0.20) !important;
  background: rgba(205,242,79,0.08) !important;
}
#nav .nav-user:hover {
  background: rgba(205,242,79,0.14) !important;
  border-color: rgba(205,242,79,0.32) !important;
}
#nav #nav-name {
  color: rgba(245,240,232,0.85) !important;
}

/* ═══════════════════════════════════════════════════════════════
   COMMUNITY / PROFILE BOARD CARD TEXT CONTRAST
   harmony.css @media(min-width:861px) forces .board-name / .board-desc /
   .board-meta to near-invisible cream (designed for OS dark glass).
   Restore proper ink on every non-index page.
═══════════════════════════════════════════════════════════════ */

@media (min-width: 861px) {
  body:not(.os-desktop) .board-name {
    color: #1C1C1E !important;
  }
  body:not(.os-desktop) .board-desc {
    color: #3A3A2E !important;
  }
  body:not(.os-desktop) .board-meta {
    color: #A2A28C !important;
  }
  body:not(.os-desktop) .hero-copy {
    color: #3A3A2E !important;
  }
  body:not(.os-desktop) .share-title {
    color: #1C1C1E !important;
  }
  /* mp-board-card: harmony sets dark glass bg globally — restore on non-OS pages */
  body:not(.os-desktop) .mp-board-card:not(.dark):not(.lime) {
    background: #FFFFFF !important;
    border-color: rgba(14,14,16,0.08) !important;
  }
  body:not(.os-desktop) .mp-board-title {
    color: #1C1C1E !important;
  }
  body:not(.os-desktop) .mp-board-meta {
    color: #7A7A6A !important;
  }
  body:not(.os-desktop) .mp-board-eyebrow {
    color: #A2A28C !important;
  }
}

/* ── Chrome autofill yellow override — auth overlay inputs ── */
/* When Chrome autofills email/password it forces a yellow bg that
   overrides our cream. Fake the bg with an inset box-shadow. */
#os-auth-fields input:-webkit-autofill,
#os-auth-fields input:-webkit-autofill:hover,
#os-auth-fields input:-webkit-autofill:focus,
#os-auth-fields input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 40px rgba(248,244,236,0.97) inset !important;
  -webkit-text-fill-color: #1C1C1E !important;
  caret-color: #1C1C1E !important;
  transition: background-color 9999s ease-in-out 0s !important;
}

/* ═══════════════════════════════════════════════════════════════
   ISSUE 3 — CONTENT JUMP PREVENTION
   A) Mobile: pre-declare body padding-bottom so mobile-nav.js
      injection doesn't cause a layout shift (jitter).
   B) All pages: subtle fade-in on load to soften the flash
      when navigating between pages.
═══════════════════════════════════════════════════════════════ */

/* A — Mobile nav padding pre-declare (kills jitter on all pages) */
@media (max-width: 860px) {
  body {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* B — Page fade-in: 180 ms softens the hard cut between pages */
@keyframes teachedPageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body {
  animation: teachedPageIn 0.18s ease-out both;
}

/* ═══════════════════════════════════════════════════════════════
   LESSON BUILDER CONTRAST FIX
   The desktop wallpaper layer darkens generic .btn.ghost/.label rules.
   Lesson Builder is a light workspace, so lock its controls back to ink.
═══════════════════════════════════════════════════════════════ */
body.lesson-builder-page {
  color: #171719 !important;
}

body.lesson-builder-page .hero-side {
  background:
    radial-gradient(circle at 100% 0%, rgba(200,230,50,0.24), transparent 36%),
    radial-gradient(circle at 0% 100%, rgba(236,45,140,0.16), transparent 38%),
    linear-gradient(135deg, #0E0E10, #18191D 58%, #241426) !important;
  border: 1px solid rgba(205,242,79,0.16) !important;
  color: #F7F3EA !important;
  box-shadow: 0 22px 56px rgba(14,14,16,0.24) !important;
}

body.lesson-builder-page .hero-side b {
  color: var(--u-lime) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

body.lesson-builder-page .hero-side li {
  color: rgba(247,243,234,0.86) !important;
  font-weight: 650 !important;
}

body.lesson-builder-page .hero-side li::before {
  background: var(--u-lime) !important;
  box-shadow: 0 0 0 4px rgba(205,242,79,0.10) !important;
}

body.lesson-builder-page .panel,
body.lesson-builder-page .lesson-doc,
body.lesson-builder-page .preset,
body.lesson-builder-page .activity-btn,
body.lesson-builder-page .quality-card,
body.lesson-builder-page .stage,
body.lesson-builder-page .lib-item {
  background: rgba(255,255,255,0.94) !important;
  border-color: rgba(23,23,25,0.11) !important;
  color: #171719 !important;
}

body.lesson-builder-page .panel-sub,
body.lesson-builder-page .preset span,
body.lesson-builder-page .activity-btn span,
body.lesson-builder-page .lib-item span,
body.lesson-builder-page .doc-meta,
body.lesson-builder-page .doc-section p,
body.lesson-builder-page .doc-section li {
  color: #5F615F !important;
}

body.lesson-builder-page :is(.label, .form-label, .field label, .form-field label) {
  color: rgba(23,23,25,0.58) !important;
}

body.lesson-builder-page .btn.ghost {
  background: rgba(255,255,255,0.94) !important;
  border: 1px solid rgba(23,23,25,0.13) !important;
  color: #171719 !important;
  box-shadow: 0 8px 22px rgba(14,14,16,0.055) !important;
}

body.lesson-builder-page .btn.ghost:hover {
  background: rgba(200,230,50,0.18) !important;
  border-color: rgba(168,196,42,0.42) !important;
  color: #0E0E10 !important;
}

body.lesson-builder-page .view-toggle .btn.ghost.active,
body.lesson-builder-page .btn.ghost.active {
  background: rgba(200,230,50,0.20) !important;
  border-color: rgba(168,196,42,0.48) !important;
  color: #6F8C00 !important;
}

body.lesson-builder-page .btn.soft {
  background: #0E0E10 !important;
  border: 1px solid #0E0E10 !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 24px rgba(14,14,16,0.18) !important;
}

body.lesson-builder-page .btn.soft:hover {
  background: #232326 !important;
  color: #FFFFFF !important;
}

body.lesson-builder-page .btn.lime {
  background: linear-gradient(135deg, var(--u-lime), var(--u-lime-pop)) !important;
  color: #0E0E10 !important;
  border: 1px solid rgba(168,196,42,0.28) !important;
  box-shadow: 0 12px 28px rgba(200,230,50,0.26) !important;
}

body.lesson-builder-page .doc-head h2,
body.lesson-builder-page .doc-section h3,
body.lesson-builder-page .stage-title,
body.lesson-builder-page .preset b,
body.lesson-builder-page .activity-btn {
  color: #171719 !important;
}

body.lesson-builder-page .chip {
  background: rgba(14,14,16,0.06) !important;
  color: #3A3A2E !important;
}

body.lesson-builder-page .chip.ok {
  background: rgba(35,191,114,0.14) !important;
  color: #168A52 !important;
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP WIDGETS — LIGHT CARDS ON SPACE WALLPAPER
   Keep the space wallpaper, but make right-side widgets readable,
   soft and consistent with the light OS windows.
═══════════════════════════════════════════════════════════════ */
body.os-desktop .widget {
  background:
    radial-gradient(circle at 88% 0%, rgba(205,242,79,0.24), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(236,45,140,0.10), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,0.94), rgba(245,240,232,0.88)) !important;
  border: 1px solid rgba(255,255,255,0.56) !important;
  color: #0E0E10 !important;
  backdrop-filter: blur(34px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(34px) saturate(1.16) !important;
  box-shadow:
    0 18px 48px rgba(0,0,0,0.18),
    0 1px 0 rgba(255,255,255,0.84) inset,
    0 0 0 1px rgba(14,14,16,0.045) inset !important;
}

body.os-desktop .widget:hover {
  background:
    radial-gradient(circle at 88% 0%, rgba(205,242,79,0.30), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(236,45,140,0.14), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,0.97), rgba(245,240,232,0.92)) !important;
  border-color: rgba(205,242,79,0.46) !important;
  box-shadow:
    0 24px 58px rgba(0,0,0,0.22),
    0 1px 0 rgba(255,255,255,0.92) inset,
    0 0 0 1px rgba(205,242,79,0.24) inset !important;
}

body.os-desktop .wg-clock-time,
body.os-desktop .wg-today-title,
body.os-desktop .wg-vocab-word {
  color: #0E0E10 !important;
  text-shadow: none !important;
}

body.os-desktop .wg-clock-time em,
body.os-desktop .wg-streak-n,
body.os-desktop .wg-vocab-trans {
  color: #A5C900 !important;
  text-shadow: none !important;
}

body.os-desktop .wg-clock-date,
body.os-desktop .wg-streak-label,
body.os-desktop .wg-today-label,
body.os-desktop .wg-vocab-label {
  color: rgba(14,14,16,0.46) !important;
}

body.os-desktop .wg-streak-sub,
body.os-desktop .wg-today-meta,
body.os-desktop .wg-vocab-lang,
body.os-desktop .wg-vocab-ex {
  color: rgba(14,14,16,0.64) !important;
}

body.os-desktop .wg-streak-sub a,
body.os-desktop .wg-today-meta a {
  color: #7FA000 !important;
  font-weight: 900 !important;
}

body.os-desktop .wg-clock-lang,
body.os-desktop .wg-today-badge {
  background: rgba(236,45,140,0.10) !important;
  border-color: rgba(236,45,140,0.20) !important;
  color: #B81D69 !important;
}

body.os-desktop .wg-today-prog {
  background: rgba(14,14,16,0.10) !important;
}

body.os-desktop .wg-vocab-next {
  background: linear-gradient(135deg, var(--u-lime), var(--u-lime-pop)) !important;
  color: #0E0E10 !important;
  box-shadow: 0 12px 28px rgba(200,230,50,0.28) !important;
}

body.os-desktop .wg-vocab-next:hover {
  box-shadow: 0 16px 34px rgba(200,230,50,0.36) !important;
}