/* ═══════════════════════════════════════════════════════════════
   TeachEd — Harmony Layer v2
   SF Pro + Fraunces design system. Lime × Pink × Cream.
═══════════════════════════════════════════════════════════════ */

/* ── Global token overrides ── */
:root {
  --ink:        #0E0E10;
  --ink2:       #3A3A40;
  --ink3:       #86868F;
  --cream:      #F7F3EA;
  --card:       #FFFFFF;
  --line:       rgba(14,14,16,0.08);
  --line2:      rgba(14,14,16,0.16);

  --pink:       #EC2D8C;
  --pink-soft:  #FCE3EF;
  --lime:       #CDF24F;
  --lime-dark:  #A8D02B;
  --lime-text:  #0E0E10;

  --lavender:   #D8C5FB;
  --peach:      #FFB5AE;
  --cyan:       #8FE6E6;
  --yellow:     #FFC94A;

  --accent:        var(--pink);
  --accent2:       #9F8CE8;
  --bg:            var(--cream);
  --bg2:           #EDE8E0;
  --text:          var(--ink);
  --text-2:        var(--ink2);
  --text-3:        var(--ink3);
  --border:        var(--line);
  --border2:       var(--line2);

  --font:          -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', system-ui, Arial, sans-serif;
  --font-serif:    'Fraunces', 'Times New Roman', serif;
  --font-sans:     var(--font);
  --font-mono:     'SF Mono', SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas, monospace;

  /* compat aliases (remote harmony used these) */
  --lime-2:      var(--lime-dark);
  --lime-soft:   rgba(205,242,79,0.18);
  --lime-border: rgba(205,242,79,0.48);
  --premium:     var(--ink);
  --premium-2:   #2A2A2E;
}

/* ── Form System v3: readable, colorful, touch-safe controls ───────────── */
:root {
  --form-bg: rgba(255, 255, 255, .92);
  --form-bg-soft: rgba(250, 250, 246, .84);
  --form-border: rgba(18, 18, 24, .13);
  --form-border-hover: rgba(236, 45, 140, .32);
  --form-ring-pink: rgba(236, 45, 140, .14);
  --form-ring-lime: rgba(205, 242, 79, .25);
  --form-text: #18181c;
  --form-muted: rgba(58, 58, 64, .52);
}

:is(.field, .form-field, .billing-field, .setting-field, .plan-field, .admin-field) {
  gap: 8px !important;
}

:is(.label, .form-label, .field label, .form-field label, .billing-field label, .setting-field label, .admin-field label) {
  color: rgba(24, 24, 28, .66) !important;
  font-family: var(--font-mono, "Space Mono", monospace) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
}

:is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
  textarea,
  select,
  .form-input,
  .invite-input,
  .module-field,
  .module-select,
  .sp-link-input,
  .sp-email-input
) {
  min-height: 46px !important;
  border: 1.5px solid var(--form-border) !important;
  border-radius: 17px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), var(--form-bg-soft)),
    radial-gradient(circle at 12% 0%, rgba(205,242,79,.18), transparent 34%) !important;
  color: var(--form-text) !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  outline: none !important;
  padding: 12px 15px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.86) inset,
    0 10px 28px rgba(18,18,24,.045) !important;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    transform .18s ease !important;
}

:is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
  textarea,
  select,
  .form-input,
  .invite-input,
  .module-field,
  .module-select,
  .sp-link-input,
  .sp-email-input
):hover {
  border-color: var(--form-border-hover) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 14px 34px rgba(236,45,140,.07) !important;
}

:is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
  textarea,
  select,
  .form-input,
  .invite-input,
  .module-field,
  .module-select,
  .sp-link-input,
  .sp-email-input
):focus,
:is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
  textarea,
  select,
  .form-input,
  .invite-input,
  .module-field,
  .module-select,
  .sp-link-input,
  .sp-email-input
):focus-visible {
  border-color: var(--pink, #ec2d8c) !important;
  background: #fff !important;
  box-shadow:
    0 0 0 4px var(--form-ring-pink),
    0 0 0 8px var(--form-ring-lime),
    0 18px 46px rgba(236,45,140,.13) !important;
}

:is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
  textarea,
  .form-input,
  .invite-input,
  .module-field,
  .sp-link-input,
  .sp-email-input
)::placeholder {
  color: var(--form-muted) !important;
  font-weight: 650 !important;
}

textarea {
  min-height: 108px !important;
  resize: vertical !important;
}

select {
  cursor: pointer !important;
}

input[type="file"] {
  width: 100%;
  border: 1.5px dashed rgba(236,45,140,.26) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(205,242,79,.13)) !important;
  color: rgba(24,24,28,.74) !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 12px !important;
}

input[type="file"]::file-selector-button {
  margin-right: 12px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--lime, #cdf24f), #f7ff8d);
  color: #101014;
  cursor: pointer;
  font-weight: 950;
  padding: 9px 14px;
}

:is(input, textarea, select):disabled,
:is(input, textarea, select)[readonly] {
  cursor: not-allowed !important;
  opacity: .68 !important;
  filter: saturate(.8) !important;
}

:is(.btn, .form-submit, .sp-copy-btn, .sp-invite-btn, .module-button, .price-btn, .plan-action, .billing-action) {
  border-radius: 999px !important;
  font-family: var(--font) !important;
  font-weight: 950 !important;
  min-height: 42px;
}

:is(.btn-primary, .form-submit, .sp-invite-btn, .module-button.primary, .price-btn.primary, .plan-action.primary, .billing-action.primary) {
  background:
    linear-gradient(135deg, var(--lime, #cdf24f), #f7ff8d 48%, #ff4fa8) !important;
  border-color: rgba(24,24,28,.1) !important;
  color: #101014 !important;
  box-shadow: 0 16px 38px rgba(205,242,79,.24) !important;
}

[data-theme="dark"] :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
  textarea,
  select,
  .form-input,
  .invite-input,
  .module-field,
  .module-select,
  .sp-link-input,
  .sp-email-input
) {
  background: rgba(18,18,22,0.80) !important;
  border: 1px solid rgba(205,242,79,0.10) !important;
  color: #F5F0E8 !important;
  font-family: var(--font) !important;
  font-weight: 600 !important;
  border-radius: 14px !important;
}
[data-theme="dark"] :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
  textarea,
  select,
  .form-input
):focus {
  border-color: rgba(205,242,79,0.25) !important;
  box-shadow: 0 0 0 3px rgba(205,242,79,0.06) !important;
  outline: none !important;
}
[data-theme="dark"] :is(
  input,
  textarea,
  select,
  .form-input
)::placeholder {
  color: rgba(245,240,232,0.30) !important;
  font-weight: 500 !important;
}

#sidebar:has(.sb-tabs) .sb-search input,
.board-shell #sidebar .sb-search input {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #fff !important;
  box-shadow: none !important;
}

@media (max-width: 860px) {
  :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
    textarea,
    select,
    .form-input,
    .invite-input,
    .module-field,
    .module-select,
    .sp-link-input,
    .sp-email-input
  ) {
    min-height: 48px !important;
    border-radius: 16px !important;
    font-size: 16px !important;
    padding: 13px 14px !important;
  }

  textarea {
    line-height: 1.55 !important;
  }
}

[data-theme="dark"] {
  --cream: #1C1C1E; --bg: #1C1C1E; --bg2: #2A2A2E;
  --ink: #F5F0E8; --ink2: #C8C8B4; --ink3: #6A6A5A;
  --line: rgba(255,255,255,0.08); --line2: rgba(255,255,255,0.15);
  --card: #2A2A2E; --text: #F5F0E8; --text-2: #C8C8B4; --text-3: #6A6A5A;
  --border: rgba(255,255,255,0.08);
}

/* ── Apply system font globally ── */
body { font-family: var(--font) !important; }

/* ═══════════════════════════════════════════════════════════════
   Global Performance — all viewports
═══════════════════════════════════════════════════════════════ */

/* Smooth scrolling everywhere */
*, *::before, *::after { scroll-behavior: smooth; }

/* GPU-composited scrollable containers */
.win-main, .win-sidebar, .notes-sidebar,
.sch-grid-wrap, .prog-body, .dict-body,
.curr-grid, .games-layout {
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Nav: macOS glass bar ── */
#nav { gap: 2px !important; padding: 0 18px !important; }
#nav .nav-link {
  padding: 0 14px !important;
  margin: 0 1px;
  letter-spacing: -.005em;
  font-family: var(--font) !important;
  font-weight: 600;
}
#nav .nav-link.active {
  background: rgba(205,242,79,0.14) !important;
  color: #CDF24F !important;
  font-weight: 800 !important;
}
#nav .nav-link:hover { background: rgba(205,242,79,0.08) !important; }
#nav {
  background: rgba(17,17,20,0.92) !important;
  border-bottom: 1px solid rgba(205,242,79,0.06) !important;
  backdrop-filter: blur(20px) !important;
}
#nav .nav-link {
  color: rgba(245,240,232,0.65) !important;
}
.nav-logo-name {
  color: #F5F0E8 !important;
}
#nav .nav-sep { margin: 0 8px !important; }
#nav .nav-logo { margin-right: 10px !important; }
.nav-logo-name { font-family: var(--font) !important; font-weight: 800; }

/* ── Nav user chip: lime avatar ── */
#nav-avatar {
  background: linear-gradient(135deg, var(--lime), var(--lime-dark)) !important;
  color: var(--lime-text) !important;
  box-shadow: 0 1px 3px rgba(205,242,79,0.35);
}
[data-theme="dark"] #nav-avatar {
  background: linear-gradient(135deg, var(--lime), var(--lime-dark)) !important;
  color: var(--lime-text) !important;
}

/* ── Fraunces display headings ── */
.h-display, .page-title, .win-title-serif,
.curr-title, .mp-greeting-name, .hero-title {
  font-family: var(--font-serif) !important;
  letter-spacing: -0.02em;
}
.h-display em, .page-title em, .curr-title em { color: var(--pink); font-style: italic; }

/* ── Mono eyebrows ── */
.eyebrow, .page-eyebrow, .curr-eyebrow,
.mp-topbar-eyebrow, .mp-greeting-meta, .lc-lang, .pc-eyebrow {
  font-family: var(--font-mono) !important;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink3);
}

/* ── Pink primary button ── */
.btn-primary, .btn.btn-primary {
  background: var(--pink) !important;
  color: #fff !important;
  border: none;
  font-family: var(--font);
  font-weight: 700;
  border-radius: 14px;
  transition: transform .12s, background .15s;
  box-shadow: 0 6px 18px rgba(236,45,140,0.25);
}
.btn-primary:hover, .btn.btn-primary:hover {
  background: #d4267f !important;
  transform: translateY(-1px);
}

/* ── Lime button ── */
.btn-lime, .btn.btn-lime {
  background: var(--lime) !important;
  color: var(--lime-text) !important;
  border: none;
  font-family: var(--font);
  font-weight: 800;
  border-radius: 14px;
  transition: transform .12s, background .15s;
  box-shadow: 0 4px 14px rgba(205,242,79,0.28);
}
.btn-lime:hover, .btn.btn-lime:hover { background: var(--lime-dark) !important; transform: translateY(-1px); }

/* ── Ink button ── */
.btn-ink {
  background: var(--ink) !important;
  color: #fff !important;
  border: none; font-family: var(--font); font-weight: 700;
  border-radius: 14px; transition: transform .12s, opacity .15s;
}
.btn-ink:hover { opacity: 0.85; transform: translateY(-1px); }

/* ── Colored status pills ── */
.pill-lime, .status-lime, .lc-status.in-progress, .lc-status.available,
.module-pill.active, .course-item.active .ci-dot {
  background: var(--lime) !important;
  color: var(--lime-text) !important;
  border-color: rgba(205,242,79,0.48) !important;
}
.course-item.active .ci-dot { box-shadow: 0 0 8px rgba(205,242,79,0.6); }

/* ── Live badge ── */
.badge-new, .badge-live {
  background: var(--lime); color: var(--lime-text);
  font-family: var(--font-mono); font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
}
.badge-pink { background: var(--pink-soft); color: var(--pink); }
.badge-ink  { background: var(--ink); color: #fff; }

/* ── Live dot — opacity only (GPU-composited, no paint cost) ── */
.dot-live {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--lime);
  margin-right: 6px;
  will-change: opacity;
  transform: translateZ(0);
  animation: dot-pulse 1.8s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

/* ── Cards ── */
.lesson-card, .pack-card, .tool-card, .mp-board-card, .stat-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.insight-card.active, .stat-card.active, .mp-stat-card.active {
  border-color: rgba(205,242,79,0.48) !important;
  background: linear-gradient(135deg, rgba(205,242,79,0.12), transparent 80%) !important;
}
.curr-card.lime, .lesson-card.lime, .mp-board-card.lime {
  background: var(--lime) !important;
  border-color: rgba(205,242,79,0.48) !important;
  color: var(--lime-text);
}
.curr-card.lime *, .lesson-card.lime *, .mp-board-card.lime * { color: var(--lime-text) !important; }
.curr-card.dark, .lesson-card.dark, .hero-card.dark, .mp-board-card.dark {
  background: var(--ink) !important;
  color: #F5F0E8;
  border-color: var(--ink) !important;
}
.curr-card.dark *, .lesson-card.dark * { color: #F5F0E8 !important; }

/* ── Lesson active stripe ── */
.lesson-card[data-status="active"]::before,
.lesson-card[data-status="in-progress"]::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--pink); border-radius: 12px 12px 0 0;
}
.lesson-card { position: relative; }

/* ── Schedule today/now ── */
.cal-cell.today .cal-day, .day-pill.today {
  background: var(--ink) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(14,14,16,0.25);
}
.cal-cell.now .cal-day, .day-pill.now {
  background: var(--pink) !important;
  color: #fff !important;
}

/* ── Chip filter ── */
.chip {
  font-family: var(--font); font-size: 12px; font-weight: 600;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line2); background: var(--card); color: var(--ink2);
  cursor: pointer; transition: border-color .12s, color .12s; white-space: nowrap;
}
.chip:hover { border-color: var(--pink); color: var(--pink); }
.chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip.active-lime { background: var(--lime); color: var(--lime-text); border-color: var(--lime); }

/* ── Page title: Fraunces on all pages ── */
.page-title { font-family: var(--font-serif) !important; font-weight: 700 !important; letter-spacing: -0.025em !important; }
.page-eyebrow { font-family: var(--font-mono) !important; font-size: 10px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--ink3) !important; margin-bottom: 4px !important; }

/* ── Colored stat tiles ── */
.stats-grid .stat-card, .stats-row .stat-card {
  border: none !important; box-shadow: none !important; border-radius: 18px !important;
}
.stats-grid .stat-card:nth-child(1), .stats-row .stat-card:nth-child(1) { background: var(--lavender) !important; }
.stats-grid .stat-card:nth-child(2), .stats-row .stat-card:nth-child(2) { background: var(--peach) !important; }
.stats-grid .stat-card:nth-child(3), .stats-row .stat-card:nth-child(3) { background: var(--cyan) !important; }
.stats-grid .stat-card:nth-child(4), .stats-row .stat-card:nth-child(4) { background: var(--lime) !important; }
.stats-grid .stat-card:nth-child(5), .stats-row .stat-card:nth-child(5) { background: var(--yellow) !important; }
.stats-grid .stat-card .stat-icon, .stats-row .stat-card .stat-icon { background: rgba(14,14,16,0.10) !important; border-radius: 12px !important; }
.stats-grid .stat-card .stat-val, .stats-row .stat-card .stat-val { color: var(--ink) !important; font-weight: 900 !important; }
.stats-grid .stat-card .stat-lbl, .stats-row .stat-card .stat-lbl { color: var(--ink2) !important; font-weight: 700 !important; }

/* ── Schedule stat pills ── */
.stat-row .stat-pill:nth-child(1) { background: var(--lavender) !important; border: none !important; }
.stat-row .stat-pill:nth-child(2) { background: var(--peach) !important; border: none !important; }
.stat-row .stat-pill:nth-child(3) { background: var(--cyan) !important; border: none !important; }
.stat-row .stat-pill .stat-num { color: var(--ink) !important; }
.stat-row .stat-pill .stat-lbl { color: var(--ink2) !important; }

/* ── Desktop widgets: Fraunces titles ── */
.wg-today-title { font-family: var(--font-serif) !important; font-size: 20px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.1 !important; }
.wg-clock-time { font-family: var(--font-serif) !important; letter-spacing: -0.04em !important; }
.wg-vocab-word { font-family: var(--font-serif) !important; letter-spacing: -0.02em !important; }
.wg-vocab-next { background: var(--lime) !important; color: var(--lime-text) !important; box-shadow: 0 4px 14px rgba(205,242,79,0.3) !important; }
.wg-vocab-next:hover { background: var(--lime-dark) !important; }

/* ── Board sidebar: light Miro-style panel (was dark — kept compatibility, now neutral) ── */
#sidebar:has(.sb-tabs) {
  background: #fff;
  border-right: 1px solid rgba(0,0,0,.08);
}
.sb-tabs { border-bottom-color: rgba(0,0,0,.06); }
.sb-tab { color: #9999AA; }
.sb-tab:hover { color: #4262FF; background: rgba(66,98,255,.04); }
.sb-tab.active { color: #4262FF; border-bottom-color: #4262FF; }
.sb-tab-lbl { color: inherit; }
.sb-search input {
  background: #F5F5F7;
  border-color: rgba(0,0,0,.10);
  color: #050038;
}
.sb-search input::placeholder { color: #9999AA; }
.sb-search input:focus { border-color: #4262FF; background: #fff; box-shadow: 0 0 0 3px rgba(66,98,255,.10); }
.sb-body { scrollbar-color: rgba(0,0,0,.12) transparent; }
.sb-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); }
.sb-label { color: #9999AA; }
.sb-sep { background: rgba(0,0,0,.06); }

/* Snippet cards — light Miro */
.snippet {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
}
.snippet:hover {
  border-color: #4262FF;
  box-shadow: 0 4px 14px rgba(66,98,255,.10);
}
.sn-title { font-family: var(--font); font-weight: 600; color: #050038; }
.sn-label { font-family: var(--font); color: #9999AA; }

/* Badges: readable on light bg */
.badge.active-s, .badge.active {
  background: rgba(34,197,94,.12);
  color: #16a34a;
  border: 1px solid rgba(34,197,94,.25);
}
.badge.a2 { background: rgba(96,165,250,.12); color: #2563eb; }
.badge.b1 { background: rgba(167,139,250,.14); color: #7c3aed; }
.badge.b2 { background: rgba(110,201,138,.14); color: #16a34a; }
.badge.grammar { background: rgba(248,113,113,.12); color: #dc2626; }
.badge.vocab { background: rgba(0,0,0,.06); color: #444466; }
.badge.speaking { background: rgba(167,139,250,.12); color: #7c3aed; }
.badge.draft { background: rgba(0,0,0,.06); color: #9999AA; }
.badge.pink { background: rgba(236,45,140,.12); color: #db2777; }
.badge.amber { background: rgba(245,158,11,.14); color: #d97706; }
.badge.a1 { background: rgba(56,189,248,.14); color: #0284c7; }
.badge.c1 { background: rgba(251,146,60,.14); color: #ea580c; }

/* Element grid — light Miro */
.el-item {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
}
.el-item:hover {
  border-color: #4262FF;
  box-shadow: 0 4px 14px rgba(66,98,255,.10);
}
.el-label { color: #444466; }
.el-icon { filter: none; }

/* ── Profile title ── */
.mobile-profile-title { font-family: var(--font-serif) !important; letter-spacing: -0.02em !important; }
.win-title { font-family: var(--font-serif) !important; letter-spacing: -0.02em !important; }

/* ── Section headers ── */
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.section-h { font-family: var(--font); font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.section-action { font-family: var(--font-mono); font-size: 10px; color: var(--pink); letter-spacing: 0.08em; cursor: pointer; }

/* ── Palette tiles ── */
.tile-lavender { background: var(--lavender) !important; }
.tile-peach    { background: var(--peach) !important; }
.tile-cyan     { background: var(--cyan) !important; }
.tile-yellow   { background: var(--yellow) !important; }
.tile-lime     { background: var(--lime) !important; }
.tile-pink     { background: var(--pink) !important; }
.tile-ink      { background: var(--ink) !important; color: #fff !important; }

/* ── Ghost lime hover ── */
.btn-ghost.lime-hover:hover, .mod-btn.lime-hover:hover { background: rgba(205,242,79,0.15) !important; color: var(--lime-dark) !important; }

/* ── Mobile helpers ── */
.mp-mobile-only { display: none; }
@media (max-width: 860px) {
  .mp-mobile-only { display: flex; }
  .mp-desktop-only { display: none !important; }
  /* no backdrop-filter on mobile navs — kills scroll perf */
  #nav { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #111114 !important; }

  /* ═══════════════════════════════════════════════════════════════
     Mobile Performance Guard
     Strip heavy GPU hints that cause scroll artifacts & jank
     on resource-constrained mobile GPUs.
  ═══════════════════════════════════════════════════════════════ */

  /* Remove will-change everywhere — too many layers = OOM & stretching */
  .widget, .win, .di, #dock, #menubar,
  .board-card, .snippet, .el-item, .mt-btn,
  .cls-block, .cls-item, .stat-pill,
  .card, .stat-card, .bc-btn,
  .hero-card, .panel, .share-card,
  .lesson-card, .pack-card, .tool-card,
  .mp-board-card, .curr-card,
  .sb-item, .games-nav-item,
  .chip, .fc-set, .btn-primary, .btn-lime, .btn-ink,
  #toast, .dot-live, .blob1, .blob2, .blob3, .blob4,
  .wp-card, .modal {
    will-change: auto !important;
  }

  /* Flatten GPU layers — translateZ(0) not needed on mobile */
  .board-card, .snippet, .el-item,
  .cls-block, .cls-item, .stat-pill,
  .card, .stat-card,
  .hero-card, .panel, .share-card,
  #toast {
    transform: none !important;
  }
  /* Preserve functional transforms on hover/active but drop translateZ */
  .board-card:hover, .snippet:hover, .el-item:hover,
  .cls-block:hover, .cls-item:hover,
  .card:hover, .stat-card:hover,
  .hero-card:hover, .share-card:hover {
    transform: none !important;
  }

  /* Kill backdrop-filter on everything — very expensive on mobile */
  .widget, .win, #dock, #menubar,
  .modal, #toast, .wp-card,
  .share-card, .hero-card, .panel {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Mobile transition tiers — speed by category, not a blanket kill */
  /* Tier 1: background/border state changes — visible but not distracting */
  .board-card, .snippet, .el-item,
  .cls-block, .cls-item, .stat-pill,
  .card, .stat-card, .hero-card, .panel, .share-card,
  .recent-board-item, .setting-btn {
    transition: background 0.2s ease, border-color 0.18s ease, color 0.18s ease !important;
  }
  /* Tier 2: interactive buttons — fast color + spring press feedback */
  .btn, .btn-add, .btn-save, .btn-cancel, .bc-btn,
  .mt-btn, .tb-btn, .nav-link {
    transition: background 0.15s ease, color 0.12s ease,
                transform 0.14s cubic-bezier(0.34, 1.3, 0.64, 1) !important;
  }
  /* Tier 3: form fields — border / shadow only */
  .form-input, .form-select, .setting-input {
    transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
  }
  /* Tier 4: list rows */
  .st-item { transition: background 0.15s ease !important; }

  /* Toast: simple slide, no blur */
  #toast {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.15) !important;
  }
  #toast.show {
    transform: translateY(0) !important;
  }

  /* Modal: simpler animation, no scale */
  .modal {
    transform: translateY(-8px) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,.2) !important;
  }
  .modal-overlay.open .modal {
    transform: translateY(0) !important;
  }

  /* Disable hover lifts on touch — they cause sticky states */
  .board-card:hover, .snippet:hover, .el-item:hover,
  .cls-block:hover, .cls-item:hover, .stat-pill:hover,
  .card:hover, .stat-card:hover,
  .recent-board-item:hover, .setting-btn:hover,
  .btn-add:hover, .btn-save:hover, .btn-cancel:hover,
  .hero-card:hover, .share-card:hover {
    transform: none !important;
    box-shadow: inherit !important;
  }

  /* Keep active press feedback — lightweight scale only */
  .board-card:active, .snippet:active, .el-item:active,
  .cls-item:active, .card:active, .stat-card:active,
  .btn:active, .btn-add:active, .btn-save:active,
  .bc-btn:active, .st-item:active, .setting-btn:active,
  .tb-btn:active, .mt-btn:active {
    transform: scale(0.97) !important;
  }

  /* Contain layout to prevent expensive reflows */
  .mp-shell, .mp-stats, .mp-hscroll {
    contain: layout style;
  }

  /* ── Mobile entrance animations ── */
  @keyframes mp-enter {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .mp-topbar        { animation: mp-enter 0.38s cubic-bezier(0.34, 1.1, 0.64, 1) both; }
  .mp-hero-head,
  .mp-next-card     { animation: mp-enter 0.40s cubic-bezier(0.34, 1.1, 0.64, 1) 0.05s both; }
  .mp-stats         { animation: mp-enter 0.40s cubic-bezier(0.34, 1.1, 0.64, 1) 0.10s both; }
  .mp-section-head  { animation: mp-enter 0.40s cubic-bezier(0.34, 1.1, 0.64, 1) 0.14s both; }
  .mp-hscroll,
  .mp-quick-list    { animation: mp-enter 0.40s cubic-bezier(0.34, 1.1, 0.64, 1) 0.18s both; }
  .mp-daypicker     { animation: mp-enter 0.38s cubic-bezier(0.34, 1.1, 0.64, 1) 0.06s both; }
  .mp-timeline      { animation: mp-enter 0.40s cubic-bezier(0.34, 1.1, 0.64, 1) 0.16s both; }

  /* ── Consistent active-press scale across all interactive mp-* elements ── */
  .mp-btn:active,
  .mp-icon-btn:active  { transform: scale(0.95) !important;
                         transition: transform 0.10s cubic-bezier(0.34, 1.3, 0.64, 1) !important; }
  .mp-board-card:active,
  .mp-board-card2:active,
  .mp-next-card:active  { transform: scale(0.97) !important;
                          transition: transform 0.12s cubic-bezier(0.34, 1.3, 0.64, 1) !important; }
  .mp-quick:active,
  .mp-tl-card:active   { transform: scale(0.98) !important;
                         transition: transform 0.12s cubic-bezier(0.34, 1.3, 0.64, 1) !important; }
  .mp-day:active       { transform: scale(0.92) !important;
                         transition: transform 0.10s cubic-bezier(0.34, 1.3, 0.64, 1) !important; }
  .mp-filter:active    { transform: scale(0.95) !important;
                         transition: transform 0.10s cubic-bezier(0.34, 1.3, 0.64, 1) !important; }
  .mp-stat:active      { transform: scale(0.97) !important;
                         transition: transform 0.12s cubic-bezier(0.34, 1.3, 0.64, 1) !important; }
}

/* ═══════════════════════════════════════════════════════════════
   Desktop PC Harmonization — SF Pro × Fraunces × Lime × Pink
   Loaded after inline <style> so !important overrides take effect.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 861px) {

  /* ── Menubar: dark glass + lime accents ── */
  #menubar {
    font-family: var(--font) !important;
    background: rgba(14,14,16,0.72) !important;
    border-bottom: 1px solid rgba(205,242,79,0.06) !important;
    box-shadow: 0 1px 0 rgba(205,242,79,0.03) inset, 0 2px 12px rgba(0,0,0,0.18) !important;
  }
  .mb-app-name {
    font-family: var(--font) !important;
    font-weight: 900 !important;
    color: rgba(245,240,232,0.90) !important;
    letter-spacing: -0.02em !important;
  }
  .mb-item {
    font-family: var(--font) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    color: rgba(245,240,232,0.60) !important;
    border-radius: 8px !important;
    transition: background .12s, color .12s !important;
  }
  .mb-item:hover {
    background: rgba(205,242,79,0.08) !important;
    color: rgba(245,240,232,0.90) !important;
  }
  #mb-clock {
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: rgba(245,240,232,0.50) !important;
    letter-spacing: 0.02em !important;
  }
  .mb-right {
    gap: 12px !important;
  }
  .mb-icon {
    color: rgba(245,240,232,0.40) !important;
  }
  #desktop-user-chip {
    font-family: var(--font) !important;
    border: 1px solid rgba(205,242,79,0.25) !important;
    background: rgba(205,242,79,0.12) !important;
    color: rgba(245,240,232,0.85) !important;
  }

  /* ── Widgets: dark panels with lime glow ── */
  .widget {
    background: rgba(18,18,22,0.88) !important;
    border: 1px solid rgba(205,242,79,0.10) !important;
    border-radius: 20px !important;
    backdrop-filter: blur(32px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(32px) saturate(1.4) !important;
    box-shadow:
      0 8px 32px rgba(0,0,0,0.35),
      0 2px 8px rgba(0,0,0,0.18),
      inset 0 1px 0 rgba(205,242,79,0.05) !important;
    font-family: var(--font) !important;
    color: #F5F0E8 !important;
  }
  .widget:hover {
    box-shadow:
      0 14px 44px rgba(0,0,0,0.40),
      0 4px 12px rgba(0,0,0,0.22),
      inset 0 1px 0 rgba(205,242,79,0.08) !important;
  }
  .widget * {
    font-family: inherit !important;
  }

  /* Clock — top-right */
  #wg-clock {
    top: 48px !important;
    right: 24px !important;
    width: 192px !important;
  }
  .wg-clock-time {
    font-family: var(--font) !important;
    font-size: 52px !important;
    font-weight: 900 !important;
    letter-spacing: -0.05em !important;
    color: #F5F0E8 !important;
    line-height: 1 !important;
  }
  .wg-clock-time em {
    color: var(--lime) !important;
    font-style: normal !important;
  }
  .wg-clock-date {
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: rgba(245,240,232,0.55) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin-top: 6px !important;
  }
  .wg-clock-lang {
    font-family: var(--font) !important;
    font-size: 10px !important;
    color: #f472b6 !important;
    background: rgba(236,45,140,0.15) !important;
    border: 1px solid rgba(236,45,140,0.30) !important;
    font-weight: 800 !important;
    border-radius: 20px !important;
    padding: 3px 10px !important;
    display: inline-block !important;
    margin-top: 10px !important;
  }

  /* Classes Today — second column, top */
  #wg-streak {
    top: 48px !important;
    right: 232px !important;
    width: 192px !important;
  }
  .wg-streak-n {
    font-family: var(--font) !important;
    font-size: 42px !important;
    font-weight: 900 !important;
    color: var(--lime) !important;
    line-height: 1 !important;
    letter-spacing: -0.03em !important;
    text-shadow: 0 0 24px rgba(205,242,79,0.25) !important;
  }
  .wg-streak-fire {
    font-size: 22px !important;
  }
  .wg-streak-label {
    font-family: var(--font-mono) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    color: rgba(245,240,232,0.55) !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    margin-top: 5px !important;
  }
  .wg-streak-sub {
    font-family: var(--font) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: rgba(245,240,232,0.65) !important;
    line-height: 1.4 !important;
    margin-top: 7px !important;
  }

  /* Next Class — below clock */
  #wg-today {
    top: 260px !important;
    right: 24px !important;
    width: 192px !important;
  }
  .wg-today-label {
    font-family: var(--font-mono) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    color: rgba(245,240,232,0.55) !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
  }
  .wg-today-title {
    font-family: var(--font) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #F5F0E8 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 5px !important;
  }
  .wg-today-meta {
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    color: rgba(245,240,232,0.45) !important;
    display: flex !important;
    gap: 8px !important;
    margin-top: 5px !important;
  }
  .wg-today-badge {
    font-family: var(--font-mono) !important;
    font-size: 9px !important;
    color: var(--lime) !important;
    background: rgba(205,242,79,0.12) !important;
    border: 1px solid rgba(205,242,79,0.25) !important;
    border-radius: 20px !important;
    padding: 2px 8px !important;
    margin-top: 8px !important;
    letter-spacing: 0.06em !important;
  }
  .wg-today-prog {
    background: rgba(245,240,232,0.08) !important;
    height: 2px !important;
    border-radius: 2px !important;
    margin-top: 10px !important;
  }
  .wg-today-prog-fill {
    background: linear-gradient(90deg, var(--pink), var(--lime)) !important;
  }

  /* My Boards — second column, below classes */
  #wg-vocab {
    top: 260px !important;
    right: 232px !important;
    width: 192px !important;
  }
  .wg-vocab-label {
    font-family: var(--font-mono) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    color: rgba(245,240,232,0.55) !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    margin-bottom: 10px !important;
  }
  .wg-vocab-word {
    font-family: var(--font) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #F5F0E8 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 3px !important;
  }
  .wg-vocab-lang {
    font-family: var(--font-mono) !important;
    font-size: 9px !important;
    color: rgba(245,240,232,0.40) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin-bottom: 7px !important;
  }
  .wg-vocab-trans {
    color: var(--lime) !important;
    font-family: var(--font) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    margin-bottom: 5px !important;
  }
  .wg-vocab-ex {
    color: rgba(245,240,232,0.50) !important;
    font-family: var(--font) !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
    font-style: italic !important;
  }
  .wg-vocab-next {
    background: linear-gradient(135deg, var(--lime), var(--lime-dark)) !important;
    color: #0E0E10 !important;
    font-family: var(--font) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 8px !important;
    margin-top: 10px !important;
    width: 100% !important;
    cursor: pointer !important;
    box-shadow: 0 4px 18px rgba(205,242,79,0.25) !important;
    text-align: center !important;
    transition: box-shadow .15s, transform .15s !important;
  }
  .wg-vocab-next:hover {
    box-shadow: 0 6px 24px rgba(205,242,79,0.35) !important;
    transform: translateY(-1px) !important;
  }

  /* ── Dock: dark glass + lime accents ── */
  #dock {
    background: rgba(18,18,22,0.75) !important;
    border: 1px solid rgba(205,242,79,0.08) !important;
    border-radius: 22px !important;
    backdrop-filter: blur(48px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(48px) saturate(1.6) !important;
    box-shadow:
      0 12px 48px rgba(0,0,0,0.35),
      0 4px 14px rgba(0,0,0,0.18),
      inset 0 1px 0 rgba(205,242,79,0.04) !important;
    gap: 8px !important;
    padding: 8px 16px 6px !important;
  }
  .di-label {
    font-family: var(--font) !important;
    font-weight: 800 !important;
    font-size: 9px !important;
    color: rgba(245,240,232,0.55) !important;
  }
  .di:hover .di-label {
    color: var(--lime) !important;
  }
  .di-dot {
    background: var(--pink) !important;
  }
  .di-icon {
    border-radius: 14px !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  }
  .di-sep {
    background: rgba(245,240,232,0.10) !important;
  }

  /* ── Windows: dark contrasty panels ── */
  .win {
    border-radius: 18px !important;
    background: rgba(18,18,22,0.92) !important;
    border: 1px solid rgba(205,242,79,0.08) !important;
    box-shadow:
      0 24px 72px rgba(0,0,0,0.35),
      0 8px 24px rgba(0,0,0,0.18),
      inset 0 1px 0 rgba(205,242,79,0.04) !important;
  }
  .win-titlebar {
    font-family: var(--font) !important;
    background: rgba(14,14,16,0.80) !important;
    border-bottom: 1px solid rgba(205,242,79,0.06) !important;
  }
  .win-title {
    font-family: var(--font) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    color: rgba(245,240,232,0.85) !important;
    letter-spacing: -0.01em !important;
  }
  .win-sidebar {
    background: rgba(14,14,16,0.65) !important;
    border-right: 1px solid rgba(205,242,79,0.06) !important;
    font-family: var(--font) !important;
  }
  .win-main {
    background: rgba(22,22,26,0.90) !important;
    font-family: var(--font) !important;
    color: #F5F0E8 !important;
  }
  .win-main * {
    font-family: inherit !important;
  }
  .sb-section-label {
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: rgba(245,240,232,0.40) !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
  }
  .sb-item {
    font-family: var(--font) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: rgba(245,240,232,0.70) !important;
    letter-spacing: 0 !important;
    border-radius: 10px !important;
    padding: 6px 10px !important;
    transition: background .12s, color .12s !important;
  }
  .sb-item:hover {
    background: rgba(205,242,79,0.10) !important;
    color: var(--lime) !important;
  }
  .sb-item.active {
    background: rgba(205,242,79,0.14) !important;
    color: var(--lime) !important;
    font-weight: 800 !important;
  }
  .sb-item-ic {
    font-size: 15px !important;
  }
  .sb-item-badge {
    background: var(--pink) !important;
    color: #fff !important;
    font-family: var(--font) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    letter-spacing: 0 !important;
  }

  /* ── Global letter-spacing reset for UI text ── */
  .mb-item,
  .mp-btn,
  .mp-btn-lime,
  .mp-btn-ghost-dark,
  .studio-chip,
  .mp-board-title,
  .mp-quick-t,
  .mp-quick-s,
  .mp-stat-n,
  .mp-stat-sub,
  .mp-featured-title,
  .mp-featured-meta,
  .wg-vocab-next,
  .wg-vocab-word,
  .wg-vocab-trans,
  .wg-streak-sub,
  .wg-today-title,
  .di-label {
    letter-spacing: 0 !important;
  }

  /* ── Mono labels: consistent positive letter-spacing ── */
  .mp-board-meta,
  .mp-board-eyebrow,
  .wg-today-meta {
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  /* ── Badge styling ── */
  .mp-badge {
    font-family: var(--font) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
  }

  /* ── h1 font override ── */
  h1 {
    font-family: var(--font) !important;
    letter-spacing: -0.02em !important;
  }

  /* ── Spotlight: dark glass ── */
  #spotlight-box {
    font-family: var(--font) !important;
    border-radius: 20px !important;
    background: rgba(18,18,22,0.95) !important;
    border: 1px solid rgba(205,242,79,0.12) !important;
    box-shadow: 0 24px 72px rgba(0,0,0,0.50) !important;
  }
  #spotlight-input {
    font-family: var(--font) !important;
    font-weight: 800 !important;
    color: #F5F0E8 !important;
  }
  #spotlight-input::placeholder {
    color: rgba(245,240,232,0.35) !important;
  }
  #spotlight-input-wrap .sp-ic {
    color: var(--lime) !important;
  }
  .sp-result {
    color: #F5F0E8 !important;
  }
  .sp-result:hover, .sp-result.selected {
    background: rgba(205,242,79,0.10) !important;
  }
  .sp-result-title {
    font-family: var(--font) !important;
    color: #F5F0E8 !important;
  }
  .sp-result-sub {
    font-family: var(--font-mono) !important;
    color: rgba(245,240,232,0.45) !important;
  }
  .sp-section-hd {
    font-family: var(--font-mono) !important;
    color: rgba(245,240,232,0.40) !important;
  }

  /* ── Notification panel: dark ── */
  #notif-panel {
    font-family: var(--font) !important;
    border-radius: 18px !important;
    background: rgba(18,18,22,0.95) !important;
    border: 1px solid rgba(205,242,79,0.10) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.40) !important;
    color: #F5F0E8 !important;
  }

  /* ── Curriculum / Boards in window ── */
  .curr-title {
    font-family: var(--font-serif) !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    color: #F5F0E8 !important;
    line-height: 1.1 !important;
  }
  .curr-title em {
    color: var(--lime) !important;
    font-style: italic !important;
  }
  .curr-eyebrow {
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--lime) !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
  }
  .curr-copy {
    font-family: var(--font) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: rgba(245,240,232,0.55) !important;
    line-height: 1.6 !important;
  }
  .curr-search {
    font-family: var(--font) !important;
    background: rgba(18,18,22,0.80) !important;
    border: 1.5px solid rgba(205,242,79,0.12) !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25), inset 0 1px 0 rgba(205,242,79,0.04) !important;
  }
  .curr-search:focus-within {
    border-color: rgba(205,242,79,0.30) !important;
    box-shadow: 0 0 0 3px rgba(205,242,79,0.08), 0 2px 12px rgba(0,0,0,0.25) !important;
  }
  .curr-search input,
  .curr-search input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]) {
    color: #F5F0E8 !important;
    font-family: var(--font) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    background: none !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    min-height: unset !important;
    padding: 0 !important;
  }
  .curr-search input::placeholder {
    color: rgba(245,240,232,0.28) !important;
    font-weight: 600 !important;
  }
  .curr-search-ic {
    color: rgba(245,240,232,0.30) !important;
  }

  /* ── Labels: dark mode ── */
  :is(.label, .form-label, .field label, .form-field label) {
    color: rgba(245,240,232,0.45) !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
  }

  /* ── Buttons: dark mode ── */
  :is(.btn, .form-submit) {
    font-family: var(--font) !important;
    font-weight: 900 !important;
  }
  :is(.btn-primary, .form-submit) {
    background: linear-gradient(135deg, var(--lime), var(--lime-dark)) !important;
    color: #0E0E10 !important;
    border-color: var(--lime) !important;
    box-shadow: 0 4px 14px rgba(205,242,79,0.25) !important;
  }

  /* ── Global dark form overrides for desktop ── */
  :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
    textarea,
    select,
    .form-input,
    .invite-input,
    .module-field,
    .module-select,
    .sp-link-input,
    .sp-email-input
  ) {
    background: rgba(18,18,22,0.80) !important;
    background-image: none !important;
    border: 1.5px solid rgba(205,242,79,0.10) !important;
    color: #F5F0E8 !important;
    font-family: var(--font) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.20), inset 0 1px 0 rgba(205,242,79,0.03) !important;
  }
  :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
    textarea,
    select,
    .form-input
  ):focus {
    border-color: rgba(205,242,79,0.30) !important;
    background: rgba(18,18,22,0.90) !important;
    background-image: none !important;
    box-shadow: 0 0 0 3px rgba(205,242,79,0.08), 0 2px 8px rgba(0,0,0,0.20) !important;
    outline: none !important;
  }
  :is(input, textarea, .form-input)::placeholder {
    color: rgba(245,240,232,0.28) !important;
    font-weight: 600 !important;
  }
  :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
    textarea,
    select
  ):hover:not(:focus) {
    border-color: rgba(205,242,79,0.18) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25), inset 0 1px 0 rgba(205,242,79,0.04) !important;
  }

  /* Lesson cards: dark contrasty on desktop */
  .lesson-card {
    background: rgba(28,28,32,0.95) !important;
    border: 1.5px solid rgba(205,242,79,0.10) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.30) !important;
  }
  .lesson-card:hover {
    border-color: rgba(205,242,79,0.30) !important;
    box-shadow: 0 8px 32px rgba(205,242,79,0.08), 0 4px 16px rgba(0,0,0,0.30) !important;
  }
  .lesson-card::before {
    background: linear-gradient(90deg, #EC2D8C, #CDF24F) !important;
  }
  .lc-title {
    color: #F5F0E8 !important;
    font-family: var(--font) !important;
    font-size: 16px !important;
    font-weight: 900 !important;
  }
  .lc-desc {
    color: rgba(245,240,232,0.55) !important;
    font-family: var(--font) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
  }
  .lc-lang {
    background: rgba(236,45,140,0.15) !important;
    border-color: rgba(236,45,140,0.30) !important;
    color: #f472b6 !important;
    font-family: var(--font-mono) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }
  .lc-meta {
    color: rgba(245,240,232,0.45) !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
  }
  .lc-dur {
    color: rgba(245,240,232,0.40) !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
  }
  .lc-prog {
    background: rgba(245,240,232,0.08) !important;
  }
  .lc-prog-fill {
    background: linear-gradient(90deg, #EC2D8C, #CDF24F) !important;
  }

  /* Studio hero card: enhance contrast */
  .studio-hero {
    background: #0E0E10 !important;
    box-shadow: 0 20px 70px rgba(0,0,0,0.40) !important;
  }
  .studio-eyebrow {
    color: var(--lime) !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
  }
  .studio-title {
    color: #F5F0E8 !important;
    font-family: var(--font) !important;
    font-size: 24px !important;
    font-weight: 900 !important;
  }
  .studio-title em {
    color: var(--lime) !important;
  }
  .studio-copy {
    color: rgba(245,240,232,0.55) !important;
    font-family: var(--font) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
  }
  .studio-chip {
    background: rgba(245,240,232,0.08) !important;
    color: rgba(245,240,232,0.80) !important;
    border: 1px solid rgba(245,240,232,0.12) !important;
    font-family: var(--font) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }
  .studio-chip:hover {
    background: rgba(205,242,79,0.12) !important;
    border-color: rgba(205,242,79,0.25) !important;
    color: var(--lime) !important;
  }
  .studio-chip.primary {
    background: linear-gradient(135deg, var(--lime), var(--lime-dark)) !important;
    color: #0E0E10 !important;
    border-color: var(--lime) !important;
    font-weight: 900 !important;
    box-shadow: 0 4px 14px rgba(205,242,79,0.25) !important;
  }
  .studio-chip.primary:hover {
    background: var(--lime-dark) !important;
    box-shadow: 0 6px 20px rgba(205,242,79,0.35) !important;
  }

  /* Mobile-pro components inside desktop windows */
  .mp-shell {
    background: transparent !important;
    color: #F5F0E8 !important;
    font-family: var(--font) !important;
  }
  .mp-shell * {
    font-family: inherit !important;
  }
  .mp-topbar { background: transparent !important; }
  .mp-avatar {
    background: linear-gradient(135deg, var(--lime), var(--lime-dark)) !important;
    color: #0E0E10 !important;
    font-family: var(--font) !important;
    font-weight: 800 !important;
  }
  .mp-greeting-meta {
    color: rgba(245,240,232,0.40) !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }
  .mp-greeting-name {
    color: #F5F0E8 !important;
    font-family: var(--font) !important;
    font-size: 18px !important;
    font-weight: 900 !important;
  }
  .mp-hero-serif {
    color: #F5F0E8 !important;
    font-family: var(--font-serif) !important;
    font-size: 30px !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
  }
  .mp-hero-serif em {
    color: var(--lime) !important;
    font-style: italic !important;
  }
  .mp-icon-btn {
    color: rgba(245,240,232,0.60) !important;
  }
  .mp-icon-btn:hover {
    background: rgba(205,242,79,0.10) !important;
    color: var(--lime) !important;
  }

  /* Featured dark card inside window */
  .mp-featured {
    background: #0E0E10 !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.35) !important;
    border-radius: 20px !important;
  }
  .mp-featured-title {
    color: #F5F0E8 !important;
    font-family: var(--font) !important;
    font-size: 20px !important;
    font-weight: 800 !important;
  }
  .mp-featured-meta {
    color: rgba(245,240,232,0.55) !important;
    font-family: var(--font) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }
  .mp-eyebrow-dark {
    color: rgba(245,240,232,0.50) !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
  }

  /* Buttons inside windows */
  .mp-btn {
    font-family: var(--font) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    border-radius: 999px !important;
    padding: 10px 18px !important;
  }
  .mp-btn-lime {
    background: linear-gradient(135deg, var(--lime), var(--lime-dark)) !important;
    color: #0E0E10 !important;
    box-shadow: 0 4px 14px rgba(200,230,50,0.30) !important;
  }
  .mp-btn-lime:hover {
    box-shadow: 0 6px 20px rgba(200,230,50,0.40) !important;
  }
  .mp-btn-ghost-dark {
    background: rgba(245,240,232,0.08) !important;
    color: rgba(245,240,232,0.80) !important;
    border: 1px solid rgba(245,240,232,0.12) !important;
  }
  .mp-btn-ghost-dark:hover {
    background: rgba(245,240,232,0.14) !important;
    border-color: rgba(245,240,232,0.20) !important;
  }

  /* Stat tiles on desktop */
  .mp-stat {
    background: rgba(28,28,32,0.90) !important;
    border: 1px solid rgba(205,242,79,0.08) !important;
  }
  .mp-stat-lavender {
    border-color: rgba(216,197,251,0.25) !important;
    background: rgba(216,197,251,0.10) !important;
  }
  .mp-stat-peach {
    border-color: rgba(255,181,174,0.25) !important;
    background: rgba(255,181,174,0.10) !important;
  }
  .mp-stat-cyan {
    border-color: rgba(143,230,230,0.25) !important;
    background: rgba(143,230,230,0.10) !important;
  }
  .mp-stat-label {
    color: rgba(245,240,232,0.45) !important;
    font-family: var(--font-mono) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
  }
  .mp-stat-n {
    color: #F5F0E8 !important;
    font-family: var(--font) !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }
  .mp-stat-sub {
    color: rgba(245,240,232,0.50) !important;
    font-family: var(--font) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
  }

  /* Section headers in window */
  .mp-section-h {
    color: #F5F0E8 !important;
    font-family: var(--font) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
  }
  .mp-see-all {
    color: var(--lime) !important;
    font-family: var(--font) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  /* Board cards inside window */
  .mp-board-card {
    background: rgba(28,28,32,0.95) !important;
    border-color: rgba(205,242,79,0.10) !important;
  }
  .mp-board-card:hover {
    border-color: rgba(205,242,79,0.30) !important;
  }
  .mp-board-eyebrow {
    color: rgba(245,240,232,0.45) !important;
    font-family: var(--font-mono) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
  }
  .mp-board-title {
    color: #F5F0E8 !important;
    font-family: var(--font) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }
  .mp-board-meta {
    color: rgba(245,240,232,0.40) !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
  }
  .mp-board-status {
    color: var(--lime) !important;
    font-family: var(--font) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
  }
  .mp-board-status::before {
    background: var(--lime) !important;
  }

  /* Quick start items in window */
  .mp-quick {
    background: rgba(28,28,32,0.90) !important;
    border-color: rgba(205,242,79,0.06) !important;
  }
  .mp-quick:hover {
    border-color: rgba(236,45,140,0.25) !important;
    background: rgba(236,45,140,0.06) !important;
  }
  .mp-quick-ic {
    background: rgba(205,242,79,0.12) !important;
  }
  .mp-quick-t {
    color: #F5F0E8 !important;
    font-family: var(--font) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }
  .mp-quick-s {
    color: rgba(245,240,232,0.45) !important;
    font-family: var(--font) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
  }
  .mp-quick-arrow {
    color: var(--pink) !important;
    font-size: 16px !important;
  }

  /* Curr tabs */
  .curr-tab {
    color: rgba(245,240,232,0.45) !important;
    font-family: var(--font) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }
  .curr-tab:hover {
    background: rgba(205,242,79,0.08) !important;
    color: rgba(245,240,232,0.75) !important;
  }
  .curr-tab.active {
    background: var(--lime) !important;
    color: #0E0E10 !important;
    font-weight: 900 !important;
  }
  .curr-tabs {
    border-bottom-color: rgba(245,240,232,0.08) !important;
  }

  /* ── Snap preview: pink accent ── */
  .win-snap-preview {
    background: rgba(236,45,140,0.12) !important;
    border: 2px solid rgba(236,45,140,0.45) !important;
  }

  /* ── Blob accents: use harmony palette ── */
  .blob1 {
    background: radial-gradient(circle, rgba(205,242,79,0.45), transparent 70%) !important;
  }
  .blob2 {
    background: radial-gradient(circle, rgba(236,45,140,0.25), transparent 70%) !important;
  }
  .blob3 {
    background: radial-gradient(circle, rgba(216,197,251,0.20), transparent 70%) !important;
  }
  .blob4 {
    background: radial-gradient(circle, rgba(236,45,140,0.12), transparent 70%) !important;
  }

  /* ── Notes app: harmony styling ── */
  .notes-toolbar {
    background: rgba(247,243,234,0.60) !important;
    font-family: var(--font) !important;
  }
  .notes-tb-btn:hover {
    background: rgba(236,45,140,0.08) !important;
    color: var(--pink) !important;
  }
  .notes-new-btn {
    background: var(--pink) !important;
    color: #fff !important;
    font-family: var(--font) !important;
    box-shadow: 0 4px 14px rgba(236,45,140,0.25) !important;
  }
  .notes-footer {
    font-family: var(--font-mono) !important;
    background: rgba(247,243,234,0.50) !important;
    color: var(--ink3) !important;
  }
  .note-item:hover {
    background: rgba(236,45,140,0.06) !important;
  }
  .note-item-title {
    font-family: var(--font) !important;
  }
  .note-item-date {
    font-family: var(--font-mono) !important;
  }
  .notes-editor-area {
    font-family: var(--font) !important;
    color: var(--ink) !important;
  }

  /* ── Schedule app: harmony colors ── */
  .sch-month {
    font-family: var(--font) !important;
    color: var(--ink) !important;
  }
  .sch-nav-btn {
    background: rgba(236,45,140,0.06) !important;
    border: 1.5px solid rgba(236,45,140,0.15) !important;
    color: var(--pink) !important;
  }
  .sch-nav-btn:hover {
    background: rgba(236,45,140,0.12) !important;
  }
  .sch-view.active {
    background: var(--pink) !important;
    color: #fff !important;
  }
  .sch-event {
    background: linear-gradient(135deg, rgba(205,242,79,0.18), rgba(247,243,234,0.20)) !important;
    border: 1px solid rgba(205,242,79,0.25) !important;
    color: var(--lime-dark) !important;
    font-family: var(--font-mono) !important;
  }
  .sch-day-num {
    font-family: var(--font-mono) !important;
  }
  .sch-cell.today {
    background: rgba(236,45,140,0.04) !important;
  }
  .sch-cell.today .sch-day-num {
    background: var(--pink) !important;
    color: #fff !important;
  }

  /* ── Di-badge: pink accent ── */
  .di-badge {
    background: var(--pink) !important;
    color: #fff !important;
    font-family: var(--font) !important;
  }

  /* ═══════════════════════════════════════════════════════════════
     GPU Acceleration & Performance Layer
     Promote animated / interactive elements to own compositor layer
  ═══════════════════════════════════════════════════════════════ */

  /* Composited widgets — avoid repaint during hover lift */
  .widget {
    will-change: transform, box-shadow;
    transform: translateZ(0);
    contain: layout style;
    transition:
      transform .28s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)),
      box-shadow .28s var(--ease-default, cubic-bezier(.4,0,.2,1)) !important;
  }
  .widget:hover {
    transform: translateY(-4px) translateZ(0) !important;
  }

  /* Composited dock items */
  .di {
    will-change: transform;
    transform: translateZ(0);
    transition: transform .24s cubic-bezier(.34,1.56,.64,1) !important;
  }
  .di:hover {
    transform: translateY(-14px) scale(1.18) translateZ(0) !important;
  }

  /* Composited windows — GPU layer for drag/resize */
  .win {
    will-change: transform, opacity;
    transform: translateZ(0);
    contain: layout style;
    transition:
      opacity .22s cubic-bezier(.4,0,.2,1),
      transform .22s cubic-bezier(.34,1.3,.64,1) !important;
  }
  @keyframes winAppear {
    from { opacity: 0; transform: scale(0.94) translateZ(0); }
    to   { opacity: 1; transform: scale(1) translateZ(0); }
  }
  .win.appear {
    animation: winAppear .26s cubic-bezier(.34,1.3,.64,1) !important;
  }

  /* Dock container — GPU composited glass */
  #dock {
    will-change: transform;
    transform: translateZ(0);
  }

  /* Menubar — composited for blur */
  #menubar {
    will-change: backdrop-filter;
    transform: translateZ(0);
  }

  /* ═══════════════════════════════════════════════════════════════
     Desktop ↔ Wallpaper Harmonization
     Blend UI chrome with the dark space wallpaper
  ═══════════════════════════════════════════════════════════════ */

  /* Desktop fade-in: slower, more cinematic */
  @keyframes desktopIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  #desktop {
    animation: desktopIn .8s cubic-bezier(.4,0,.2,1) both !important;
  }

  /* Menubar: darker tint to sit over space wallpaper */
  #menubar {
    background: rgba(18,18,22,0.62) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.04) inset,
      0 2px 12px rgba(0,0,0,0.18) !important;
  }
  .mb-app-name { color: rgba(255,255,255,0.92) !important; }
  .mb-item { color: rgba(255,255,255,0.65) !important; }
  .mb-item:hover {
    background: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.92) !important;
  }
  #mb-clock { color: rgba(255,255,255,0.55) !important; }
  .mb-icon { color: rgba(255,255,255,0.40) !important; }
  #desktop-user-chip {
    background: rgba(205,242,79,0.12) !important;
    border: 1px solid rgba(205,242,79,0.25) !important;
    color: rgba(255,255,255,0.85) !important;
  }

  /* Widgets: dark solid panels — contrasty on space wallpaper */
  .widget {
    background: rgba(18,18,22,0.82) !important;
    border: 1px solid rgba(205,242,79,0.12) !important;
    backdrop-filter: blur(40px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(40px) saturate(1.4) !important;
    box-shadow:
      0 8px 40px rgba(0,0,0,0.40),
      0 2px 8px rgba(0,0,0,0.20),
      inset 0 1px 0 rgba(205,242,79,0.06) !important;
  }
  .widget:hover {
    background: rgba(22,22,28,0.88) !important;
    border-color: rgba(205,242,79,0.22) !important;
    box-shadow:
      0 16px 56px rgba(0,0,0,0.45),
      0 4px 14px rgba(0,0,0,0.22),
      inset 0 1px 0 rgba(205,242,79,0.10) !important;
  }

  /* Widget text: crisp light on dark panels */
  .wg-clock-time { color: #F5F0E8 !important; }
  .wg-clock-time em { color: var(--lime) !important; }
  .wg-clock-date { color: rgba(245,240,232,0.50) !important; }
  .wg-clock-lang {
    background: rgba(236,45,140,0.18) !important;
    border-color: rgba(236,45,140,0.35) !important;
    color: #f472b6 !important;
    font-weight: 800 !important;
  }
  .wg-streak-n { color: var(--lime) !important; text-shadow: 0 0 24px rgba(205,242,79,0.30) !important; }
  .wg-streak-label { color: rgba(245,240,232,0.50) !important; }
  .wg-streak-sub { color: rgba(245,240,232,0.75) !important; }
  .wg-streak-sub a { color: var(--lime) !important; text-decoration: underline !important; }
  .wg-today-label { color: rgba(245,240,232,0.50) !important; }
  .wg-today-title { color: #F5F0E8 !important; }
  .wg-today-meta { color: rgba(245,240,232,0.45) !important; }
  .wg-today-badge {
    color: var(--lime) !important;
    background: rgba(205,242,79,0.14) !important;
    border-color: rgba(205,242,79,0.30) !important;
  }
  .wg-today-prog { background: rgba(245,240,232,0.10) !important; }
  .wg-today-prog-fill {
    background: linear-gradient(90deg, var(--pink), var(--lime)) !important;
    box-shadow: 0 0 12px rgba(236,45,140,0.30) !important;
  }
  .wg-vocab-label { color: rgba(245,240,232,0.50) !important; }
  .wg-vocab-word { color: #F5F0E8 !important; }
  .wg-vocab-lang { color: rgba(245,240,232,0.40) !important; }
  .wg-vocab-trans { color: var(--lime) !important; font-weight: 800 !important; }
  .wg-vocab-ex { color: rgba(245,240,232,0.50) !important; }
  .wg-vocab-next {
    background: linear-gradient(135deg, var(--lime), var(--lime-dark)) !important;
    color: #0E0E10 !important;
    box-shadow: 0 4px 18px rgba(205,242,79,0.30) !important;
    font-weight: 900 !important;
  }
  .wg-vocab-next:hover {
    box-shadow: 0 6px 24px rgba(205,242,79,0.40) !important;
  }

  /* Dock: dark glass to match wallpaper */
  #dock {
    background: rgba(18,18,22,0.72) !important;
    border: 1px solid rgba(205,242,79,0.08) !important;
    backdrop-filter: blur(48px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(48px) saturate(1.6) !important;
    box-shadow:
      0 12px 48px rgba(0,0,0,0.35),
      0 4px 14px rgba(0,0,0,0.18),
      inset 0 1px 0 rgba(205,242,79,0.04) !important;
  }
  .di-label {
    background: rgba(18,18,22,0.90) !important;
    color: rgba(245,240,232,0.88) !important;
    border: 1px solid rgba(205,242,79,0.10) !important;
  }
  .di:hover .di-label { color: var(--lime) !important; }
  .di-sep { background: rgba(245,240,232,0.10) !important; }
  .di-icon {
    box-shadow: 0 4px 14px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  }

  /* ── Community page: dark overrides ── */
  .hero-card {
    background: rgba(18,18,22,0.85) !important;
    border: 1px solid rgba(205,242,79,0.10) !important;
    color: #F5F0E8 !important;
  }
  .hero-card h2, .hero-card h1 {
    color: #F5F0E8 !important;
    font-family: var(--font) !important;
  }
  .hero-copy {
    color: rgba(245,240,232,0.55) !important;
    font-family: var(--font) !important;
  }
  .share-card {
    background: rgba(18,18,22,0.90) !important;
    border: 1px solid rgba(205,242,79,0.10) !important;
    color: #F5F0E8 !important;
  }
  .share-title {
    color: #F5F0E8 !important;
    font-family: var(--font) !important;
  }
  .board-name {
    color: #F5F0E8 !important;
    font-family: var(--font) !important;
    font-weight: 800 !important;
  }
  .board-meta {
    color: rgba(245,240,232,0.45) !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
  }
  .board-desc {
    color: rgba(245,240,232,0.55) !important;
    font-family: var(--font) !important;
  }
  .board-ic {
    background: rgba(205,242,79,0.12) !important;
  }
  .tag {
    background: rgba(245,240,232,0.08) !important;
    color: rgba(245,240,232,0.65) !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    border: 1px solid rgba(245,240,232,0.10) !important;
  }
  .mini-btn {
    font-family: var(--font) !important;
    font-weight: 900 !important;
    font-size: 11px !important;
    letter-spacing: 0 !important;
    border-radius: 999px !important;
  }
  .mini-btn.alt {
    background: rgba(205,242,79,0.12) !important;
    color: var(--lime) !important;
    border: 1px solid rgba(205,242,79,0.20) !important;
  }
  .btn.ghost {
    background: rgba(245,240,232,0.08) !important;
    color: rgba(245,240,232,0.80) !important;
    border: 1px solid rgba(245,240,232,0.12) !important;
    font-family: var(--font) !important;
    font-weight: 800 !important;
  }
  .btn.ghost:hover {
    background: rgba(205,242,79,0.12) !important;
    border-color: rgba(205,242,79,0.25) !important;
    color: var(--lime) !important;
  }
  .btn.lime {
    font-family: var(--font) !important;
    font-weight: 900 !important;
  }
  .comm-tab {
    font-family: var(--font) !important;
    font-weight: 800 !important;
  }
  .comm-tab.active {
    color: var(--lime) !important;
    border-bottom-color: var(--lime) !important;
  }
  .section-title {
    color: #F5F0E8 !important;
    font-family: var(--font) !important;
    font-weight: 900 !important;
  }
  .label {
    color: rgba(245,240,232,0.40) !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
  }
  .wrap {
    color: #F5F0E8 !important;
  }

  /* ── Page-level dark background for all screens ── */
  body {
    background-color: #0E0E10 !important;
    color: #F5F0E8 !important;
  }
  main.wrap {
    background: transparent !important;
  }
  .grid {
    color: #F5F0E8 !important;
  }

  /* ── Select dropdowns: force dark on desktop ── */
  select {
    background-color: rgba(18,18,22,0.80) !important;
    color: #F5F0E8 !important;
    border: 1.5px solid rgba(205,242,79,0.10) !important;
    font-family: var(--font) !important;
  }
  select option {
    background: #1C1C20 !important;
    color: #F5F0E8 !important;
  }
  textarea {
    background: rgba(18,18,22,0.80) !important;
    color: #F5F0E8 !important;
  }

  /* ═══════════════════════════════════════════════════════════════
     Smoother Blob Animations
  ═══════════════════════════════════════════════════════════════ */
  .blob1,.blob2,.blob3,.blob4 {
    display: block !important;
    will-change: opacity;
    transform: translateZ(0);
  }
  @keyframes blobPulse1 {
    0%, 100% { opacity: .55; }
    50%      { opacity: .30; }
  }
  @keyframes blobPulse2 {
    0%, 100% { opacity: .45; }
    50%      { opacity: .22; }
  }
  @keyframes blobPulse3 {
    0%, 100% { opacity: .30; }
    50%      { opacity: .15; }
  }
  .blob1 { animation-duration: 18s !important; animation-timing-function: ease-in-out !important; }
  .blob2 { animation-duration: 24s !important; animation-timing-function: ease-in-out !important; }
  .blob3 { animation-duration: 28s !important; animation-timing-function: ease-in-out !important; }
  .blob4 { animation-duration: 22s !important; animation-timing-function: ease-in-out !important; }

  /* ═══════════════════════════════════════════════════════════════
     Smoother Global Interactions
  ═══════════════════════════════════════════════════════════════ */

  /* Buttons: consistent spring transitions */
  .btn-primary, .btn-lime, .btn-ink,
  .wg-vocab-next, .notes-new-btn {
    transition:
      transform .2s cubic-bezier(.34,1.56,.64,1),
      background .18s ease,
      box-shadow .22s ease,
      opacity .15s ease !important;
  }

  /* Cards: smoother hover lifts */
  .lesson-card, .pack-card, .tool-card,
  .mp-board-card, .stat-card, .curr-card {
    will-change: transform, box-shadow;
    transition:
      transform .24s cubic-bezier(.34,1.3,.64,1),
      box-shadow .24s ease,
      border-color .2s ease !important;
  }

  /* Sidebar items: smoother transitions */
  .sb-item, .games-nav-item {
    transition:
      background .18s ease,
      color .18s ease,
      transform .18s cubic-bezier(.34,1.3,.64,1) !important;
  }

  /* Chips and pills: consistent timing */
  .chip, .fc-set, .dict-syn, .dict-hist-item {
    transition:
      background .15s ease,
      border-color .15s ease,
      color .15s ease,
      transform .15s cubic-bezier(.34,1.3,.64,1) !important;
  }

  /* Menu items: faster, crisper feedback */
  .mb-item {
    transition: background .1s ease, color .1s ease !important;
  }

  /* Progress bars: smooth fill animation */
  .lc-prog-fill, .wg-today-prog-fill,
  .fc-progress-fill, .prog-lang-fill {
    transition: width .5s cubic-bezier(.4,0,.2,1) !important;
  }
}