/* ═══════════════════════════════════════════════════════════════════════
   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.
═══════════════════════════════════════════════════════════════════════ */

/* Desktop base for the mobile-only topbar. mobile-pro.css is now loaded with
   media="(max-width:860px)" so its base ".mp-mobile-only{display:none}" no
   longer reaches desktop — restate it here behind a desktop-only query so the
   mobile topbar stays hidden on wide screens. (mobile-pro.css flips it to
   display:flex inside its own ≤860px block, so the two never conflict.) */
@media (min-width: 861px) { .mp-mobile-only { display: none !important; } }

/* ═══════════════════════════════════════════════════════════════════════
   SMOOTH NAVIGATION — MPA View Transitions
   This is a multi-page app, so every link is a full document load that flashes
   / "redraws" between pages. Opting into cross-document view transitions makes
   same-origin navigations cross-fade instead of hard-cutting, which is what
   gives that "lightness" on both desktop and mobile. No-op in browsers that
   don't support it (Safari/Firefox today) — they just navigate as before.
═══════════════════════════════════════════════════════════════════════ */
@view-transition { navigation: auto; }

/* Keep the cross-fade fast and light — a slow fade feels heavier, not lighter. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 200ms;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}
/* New page fades in a touch later so there's no double-bright flash mid-swap. */
::view-transition-new(root) { animation-delay: 30ms; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* Shared elements: give the persistent chrome a stable transition name so it
   stays ANCHORED across navigations (morphs in place) instead of cross-fading
   with the page body — the top nav no longer flickers, only the content swaps.
   #nav is the desktop bar; .mp-topbar is the mobile header (only one renders
   per viewport, so the two names never collide). Names must be unique per page,
   and both elements appear exactly once, so this is safe. */
#nav { view-transition-name: te-nav; }
.mp-topbar { view-transition-name: te-topbar; }

/* The anchored bars shouldn't fade at all — hold them steady through the swap. */
::view-transition-group(te-nav),
::view-transition-group(te-topbar) { animation-duration: 200ms; }
::view-transition-old(te-nav),
::view-transition-new(te-nav),
::view-transition-old(te-topbar),
::view-transition-new(te-topbar) { animation: none; mix-blend-mode: normal; }

: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. GLOBAL: every native form control on the ENTIRE site renders light —
      light field, dark text — regardless of OS dark mode or which page it's on.
      :root inherits no color-scheme, so native <select>/<textarea>/<input> would
      otherwise fall back to the OS scheme (dark) and render dark-on-dark. This is
      the single source of truth; intentionally-dark panels are exempted below and
      win by higher specificity + later order. Board canvas cards are <div
      contenteditable>, not form controls, so they're untouched. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
textarea,
select {
  background-color: #ffffff !important;
  color: #1c1c1e !important;
  color-scheme: light !important;
}
/* <option> popups follow the same light scheme (Firefox/Chrome dark-mode dropdowns) */
select option,
select optgroup {
  background-color: #ffffff !important;
  color: #1c1c1e !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;
  }
}

/* NOTE: the old "dark ink panels / topic-bar" exemption was removed on purpose.
   The product direction is a single rule: every input field is light with dark
   text, everywhere, no exceptions. A white field with dark text reads fine even
   on the dark game-builder panels, and it kills the recurring dark-on-dark bug. */

/* ═══════════════════════════════════════════════════════════════
   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;
}

/* ═══════════════════════════════════════════════════════════════
   FIX — native <select> rendered grey/dark on light pages
   A native <select> with appearance:auto ignores its CSS background and
   paints in the OS theme, so on dark-mode browsers it showed up charcoal
   next to the white text inputs (Share board, tool forms, etc.). Force the
   styleable light box + a custom caret so selects match the inputs.
   Scope: all non-board light pages. Board (.board-page) keeps its own dark
   styling; intentionally-dark game-builder panels are re-asserted below.
   Specificity 0,6,2 (5 :not on select) beats harmony.css's :is(…select…)
   base rule (0,6,1).
═══════════════════════════════════════════════════════════════ */
body:not(.board-page) select:not([multiple]):not(.module-select):not(.topic-ctl):not(.native):not([data-native]) {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path fill='%231C1C1E' d='M1 1.5 6 6l5-4.5'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 11px 8px !important;
  padding-right: 38px !important;
  color: #1c1c1e !important;
  color-scheme: light !important;
}

/* Game-builder panel selects now follow the same single light rule as the rest
   of the site (white field, dark text) — the previous dark re-assertion was the
   source of the recurring dark-on-dark dropdowns and has been retired. */
body:not(.board-page) .topic-bar select:not([data-a]):not([data-b]):not([data-c]):not([data-d]):not([data-e]),
body:not(.board-page) .ink-panel select:not([data-a]):not([data-b]):not([data-c]):not([data-d]):not([data-e]),
body:not(.board-page) .topic-ctl select:not([data-a]):not([data-b]):not([data-c]):not([data-d]):not([data-e]) {
  -webkit-appearance: auto !important;
  appearance: auto !important;
  background-image: none !important;
  background-color: #ffffff !important;
  color: #1c1c1e !important;
  color-scheme: light !important;
  padding-right: 12px !important;
}