/* April 2026 targeted UI fixes */

/* Keep decorative notes only inside home hero */
.page-home .home-hero {
  position: relative;
  overflow: hidden;
}

.page-home .home-hero .music-emoji-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.page-home .home-hero .music-emoji-note {
  position: absolute;
  color: color-mix(in srgb, var(--primary) 30%, transparent);
  line-height: 1;
  user-select: none;
}

.page-home .home-hero .container,
.page-home .home-hero .home-scroll-hint,
.page-home .home-hero .hero-bg-characters {
  position: relative;
  z-index: 1;
}

/* Thematic section glows, no hard purple tint */
.quick-access-section::before,
.piano-home-section::before,
.about-preview::before,
.home-leaderboard-section::before {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--primary) 8%, transparent), transparent 42%),
    radial-gradient(circle at 82% 26%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 24%) !important;
}

/* Dark themes: neutral category cards */
html[data-theme="graphite"] .quick-card,
html[data-theme="oled"] .quick-card {
  background: color-mix(in srgb, var(--surface-strong) 94%, #8d95a1 8%) !important;
  border-color: color-mix(in srgb, var(--border) 94%, #9aa3b1) !important;
}

html[data-theme="graphite"] .quick-card-icon,
html[data-theme="oled"] .quick-card-icon,
html[data-theme="graphite"] .quick-card-icon-tutor,
html[data-theme="oled"] .quick-card-icon-tutor {
  color: color-mix(in srgb, var(--text) 88%, #dce3ef) !important;
  background: color-mix(in srgb, var(--surface-hover) 82%, #788293) !important;
}

/* Mobile: hero action buttons stay compact */
@media (max-width: 640px) {
  .page-home .hero-actions {
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center !important;
    justify-content: flex-start;
    gap: 8px;
  }

  .page-home .hero-actions .btn {
    width: auto !important;
    flex: 0 0 auto !important;
  }
}

/* Home how-to: text-first mode (video hidden for prod, can be re-enabled with class) */
.howto-home-section.video-enabled .howto-video-wrap {
  display: block;
}

.howto-home-section:not(.video-enabled) .howto-video-wrap {
  display: none;
}

.howto-home-section:not(.video-enabled) .howto-shell {
  grid-template-columns: minmax(0, 1fr);
}

/* Leaderboard layout improvements */
.lb-split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.lb-split-card {
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 14px 8px;
}

.lb-split-title {
  font-weight: 800;
  margin-bottom: 10px;
  color: var(--text);
}

.lb-mini-table {
  width: 100%;
  border-collapse: collapse;
}

.lb-mini-table th,
.lb-mini-table td {
  padding: 8px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  font-size: 0.92rem;
}

.lb-mini-table th {
  color: var(--text-muted);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lb-mini-table td:last-child {
  text-align: right;
  font-weight: 700;
  color: var(--primary);
}

.lb-class-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.lb-class-tab {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--text);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}

.lb-class-tab.active {
  border-color: var(--primary);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.lb-class-panels {
  margin-top: 14px;
}

.lb-class-panel {
  display: none;
}

.lb-class-panel.active {
  display: block;
}

/* Better profile visuals */
.page-account .profile-header {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
}

.page-account .profile-stat-card {
  border-width: 1.5px;
}

/* Dark theme quiz answer correctness (remove white fill mismatch) */
html[data-theme="graphite"] .quiz-answer-btn.correct,
html[data-theme="oled"] .quiz-answer-btn.correct,
html[data-theme="graphite"] .answer-label.correct,
html[data-theme="oled"] .answer-label.correct {
  background: color-mix(in srgb, #16a34a 22%, var(--surface)) !important;
  color: var(--text) !important;
  border-color: color-mix(in srgb, #16a34a 75%, var(--border)) !important;
}

html[data-theme="graphite"] .quiz-answer-btn.wrong,
html[data-theme="oled"] .quiz-answer-btn.wrong,
html[data-theme="graphite"] .answer-label.wrong,
html[data-theme="oled"] .answer-label.wrong {
  background: color-mix(in srgb, #ef4444 18%, var(--surface)) !important;
  color: var(--text) !important;
  border-color: color-mix(in srgb, #ef4444 70%, var(--border)) !important;
}

/* Tutor mini piano mobile ergonomics */
#mini-piano {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

@media (max-width: 900px) {
  .lb-split-grid {
    grid-template-columns: 1fr;
  }
}

/* Home first screen compactness on mobile */
@media (max-width: 900px) {
  .page-home .hero {
    min-height: auto !important;
    padding-top: 64px !important;
    padding-bottom: 46px !important;
  }

  .page-home .hero-content {
    max-width: 100%;
  }

  .page-home .hero .container {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .page-home .hero-visual {
    width: 100%;
    justify-content: center;
  }

  .page-home .hero-actions {
    margin-top: 16px;
    gap: 8px;
  }

  .page-home .hero-actions .btn {
    padding: 10px 12px;
    font-size: 0.85rem;
  }

  .page-home .hero-meta-strip {
    margin-top: 14px;
    gap: 7px;
  }

  .page-home .hero-meta-pill {
    padding: 8px 11px;
    font-size: 0.77rem;
  }
}

@media (max-width: 640px) {
  .page-home .hero-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start;
    width: auto;
  }

  .page-home .hero-actions .btn {
    width: auto !important;
    min-width: 0;
  }

  .page-home .hero-meta-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
}

/* Header IA cleanup */
.main-nav {
  align-items: center;
}

.nav-group {
  position: relative;
}

.nav-group summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-group summary::-webkit-details-marker {
  display: none;
}

.nav-group summary::after {
  content: "▾";
  font-size: 0.72rem;
  opacity: 0.8;
  transition: transform 0.2s ease;
}

.nav-group[open] summary::after {
  transform: rotate(180deg);
}

.nav-group.active > .nav-link,
.nav-group[open] > .nav-link {
  color: #f8f5ff;
  background: linear-gradient(135deg, #7c5cff52, #5643c238);
  box-shadow: inset 0 0 0 1px #b5a3ff3d;
}

.nav-group-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 220px;
  display: none;
  padding: 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-strong) 96%, transparent);
  box-shadow: 0 22px 46px rgba(2, 0, 10, 0.4);
  z-index: 30;
}

.nav-group[open] .nav-group-menu {
  display: grid;
  gap: 6px;
}

.nav-group-link {
  display: block;
  padding: 10px 12px;
  border-radius: 14px;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.nav-group-link:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.nav-group-link.active {
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.mobile-nav-section {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
}

.mobile-nav-title {
  padding: 0 16px;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .nav-group-menu {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Public tests positioning */
.public-tests-hero .hero-content {
  max-width: 820px;
}

.public-tests-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.public-tests-badge {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 700;
}

.public-tests-panel {
  margin-bottom: 18px;
}

.public-tests-section-title {
  pointer-events: none;
}

.public-tests-panel-body {
  display: block !important;
  padding-top: 12px;
}

.public-tests-empty {
  color: var(--text-muted);
  margin: 0;
}

.music-land-preview-section .howto-shell,
.music-land-hero .hero-content {
  max-width: none;
}

.music-land-hero-actions {
  margin-top: 20px;
}

.teacher-drafts-list {
  display: grid;
  gap: 10px;
}

.teacher-draft-item {
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 12px;
  padding: 10px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.teacher-draft-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.teacher-draft-status {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-muted);
}

.teacher-draft-meta {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.84rem;
}

.teacher-draft-desc {
  margin: 8px 0;
  color: var(--text);
  font-size: 0.92rem;
}

.teacher-draft-link-wrap {
  margin-top: 8px;
}

.teacher-draft-link {
  font-size: 0.84rem;
}

.teacher-draft-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.teacher-public-questions {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 9px;
}

.teacher-public-questions li {
  line-height: 1.45;
}

@media (max-width: 460px) {
  .page-home .hero-actions {
    width: 100%;
  }

  .page-home .hero-actions .btn {
    width: 100% !important;
  }

  .page-home .hero-meta-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .quick-access-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (max-width: 430px) {
  .quick-access-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Games top cards: stable balanced grid on desktop and mobile */
.games-hub-cards {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  gap: 12px !important;
}

@media (min-width: 1200px) {
  .games-hub-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .games-hub-cards {
    grid-template-columns: 1fr !important;
  }

  .music-land-hero-actions {
    width: 100%;
  }

  .music-land-hero-actions .btn {
    width: 100%;
  }
}

/* Click-through safety for decorative layers */
.piano-decoration,
.piano-key-deco,
.music-emoji-field,
.music-emoji-note,
.hero-bg-characters,
.treble-clef {
  pointer-events: none !important;
}

.site-header,
.header-inner,
.main-nav,
.nav-group,
.nav-group-link,
.header-actions,
.theme-toggle,
.mobile-menu-btn {
  position: relative;
}

.nav-group-menu {
  position: absolute !important;
  z-index: 1000 !important;
  pointer-events: auto;
  background: var(--surface-strong) !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Progress bar should feel instant and not stutter */
.quiz-progress-fill,
#quiz-progress-fill,
#progress-bar,
#file-progress-bar,
.upload-progress-fill,
.progress-fill {
  transition: none !important;
  will-change: width;
  transform: translateZ(0);
}

/* Dropdown boundaries and click area stability */
.site-header,
.header-inner,
.main-nav,
.nav-group {
  overflow: visible !important;
}

.site-header {
  z-index: 2000 !important;
}

.nav-group {
  position: relative;
}

.nav-group-menu {
  top: calc(100% + 8px) !important;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  max-height: min(68vh, 420px);
  max-width: min(92vw, 360px);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 5000 !important;
}

/* Music Land: separate visual rhythm from Magic Solfa pages */
.page-music-land .main-content {
  min-height: calc(100vh - 64px);
}

.page-music-land .hero {
  padding: 68px 0 44px !important;
}

.page-music-land .section {
  padding: 44px 0 !important;
}

.page-music-land .hero .container {
  align-items: flex-start;
}

.page-music-land .music-land-hero .hero-content {
  max-width: 920px !important;
}

.page-music-land .hero-subtitle {
  font-size: clamp(1.18rem, 1.8vw, 1.55rem);
}

.page-music-land .hero-desc {
  max-width: 78ch;
}

.page-music-land .music-land-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.page-music-land .music-land-hero-actions .btn {
  min-width: 220px;
}

.page-music-land .quick-access-header {
  text-align: center;
  margin-bottom: 16px;
}

.page-music-land .quick-access-header .section-desc {
  margin: 0 auto;
  max-width: 760px;
}

.page-music-land .quick-access-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch;
}

.page-music-land .quick-card {
  min-height: 0 !important;
  border-radius: 20px;
  padding: 22px 20px;
}

.page-music-land .quick-card-text {
  display: grid;
  gap: 8px;
}

.page-music-land .lb-split-grid {
  gap: 16px;
  margin-top: 8px;
  align-items: start;
}

.page-music-land .lb-split-card {
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--text) 10%, transparent);
  padding: 16px;
}

.page-music-land .site-footer {
  margin-top: 26px !important;
}

/* Music Land nav readability */
body.page-music-land .site-header .header-inner {
  min-height: 72px;
}

body.page-music-land .main-nav {
  gap: 8px;
}

body.page-music-land .nav-link {
  font-size: 0.94rem;
  font-weight: 650;
  padding: 10px 14px;
}

/* Music Land teacher cabinet polish */
.page-music-land-cabinet .section.auth-scene,
.page-music-land-cabinet .section {
  padding-top: 28px !important;
}

.page-music-land-cabinet .music-land-cabinet-shell {
  max-width: 1180px;
}

.page-music-land-cabinet .ml-cabinet-header {
  margin-bottom: 10px;
}

.page-music-land-cabinet .ml-cabinet-header .section-title {
  margin-bottom: 8px;
}

.page-music-land-cabinet .ml-cabinet-header .section-desc {
  max-width: 56ch;
  margin: 0 auto;
}

.page-music-land-cabinet .ml-cabinet-pills {
  justify-content: center;
  margin-top: 12px;
}

.page-music-land-cabinet .ml-cabinet-pills .lb-class-tab {
  cursor: default;
  border-radius: 12px;
  padding: 8px 12px;
}

.page-music-land-cabinet .ml-cabinet-alert {
  margin-bottom: 12px;
}

.page-music-land-cabinet .ml-cabinet-row {
  margin-top: 12px !important;
}

.page-music-land-cabinet .lb-mini-table td:last-child {
  max-width: 280px;
  overflow-wrap: anywhere;
}

.page-music-land-cabinet .auth-form {
  gap: 12px;
}

.page-music-land-cabinet .teacher-drafts-list {
  gap: 12px;
}

.page-music-land-cabinet .teacher-draft-item {
  border-radius: 14px;
  padding: 12px;
}

.page-music-land-cabinet .ml-empty-state {
  border: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-strong) 90%, transparent);
  padding: 14px;
  color: var(--text-muted);
}

.page-music-land-cabinet input[type="file"].form-input {
  padding: 8px 10px;
  line-height: 1.35;
}

.page-music-land-cabinet input[type="file"]::file-selector-button {
  margin-right: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 10px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}

.page-music-land-cabinet .ml-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.page-music-land-cabinet .ml-action-card {
  display: block;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  color: var(--text);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.page-music-land-cabinet .ml-action-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 16%, transparent);
}

.page-music-land-cabinet .ml-action-card h3 {
  margin: 0 0 8px;
}

.page-music-land-cabinet .ml-action-card p {
  margin: 0;
  color: var(--text-muted);
}

.page-music-land-cabinet .ml-single-card {
  max-width: 820px;
  margin: 0 auto;
}

.page-music-land-cabinet .ml-builder-stack {
  display: grid;
  gap: 10px;
}

.page-music-land-cabinet .ml-builder-card {
  background: color-mix(in srgb, var(--surface-strong) 92%, transparent);
}

.page-music-land-cabinet .ml-options-wrap {
  display: grid;
  gap: 8px;
}

.page-music-land-cabinet .ml-option-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
}

.teacher-public-options {
  margin: 8px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.teacher-public-options li {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.teacher-option-correct {
  color: var(--primary);
  font-size: .8rem;
}

@media (max-width: 900px) {
  .page-music-land-cabinet .ml-cabinet-header .section-title {
    font-size: clamp(1.6rem, 6vw, 2rem);
  }

  .page-music-land-cabinet .lb-split-card {
    padding: 14px;
  }

  .page-music-land-cabinet .ml-action-grid {
    grid-template-columns: 1fr;
  }
}

/* Auth pages in Music Land: less empty space, cleaner balance */
.page-account .auth-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 460px);
  gap: 20px;
  align-items: start;
}

.page-account .section.auth-scene {
  padding-top: 32px !important;
  padding-bottom: 36px !important;
}

.page-account .auth-scene-copy {
  padding: 4px 0 0;
  max-width: 620px;
}

.page-account .auth-scene-copy .section-kicker {
  margin-bottom: 8px;
}

.page-account .auth-scene-copy .auth-title {
  margin: 0 0 12px;
  text-align: left;
}

.page-account .auth-scene-text {
  max-width: 48ch;
  color: var(--text-muted);
  line-height: 1.72;
  margin-bottom: 14px;
}

.page-account .auth-scene-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-account .auth-scene-pills span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 700;
}

.page-account .auth-card {
  margin-top: 0;
}

.page-music-land-auth .auth-layout {
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 460px);
  gap: 20px;
  align-items: start;
}

.page-music-land-auth .auth-scene-copy {
  padding: 8px 0 0;
  max-width: 620px;
}

.page-music-land-auth .auth-card {
  margin-top: 0;
}

.ml-material-text {
  margin: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-body);
  line-height: 1.7;
}

/* Tablet / mobile */
@media (max-width: 980px) {
  .page-music-land .hero {
    padding: 52px 0 34px !important;
  }

  .page-music-land .section {
    padding: 34px 0 !important;
  }

  .page-music-land .quick-access-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .page-music-land .music-land-hero-actions .btn {
    min-width: 0;
  }

  .page-music-land-auth .auth-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .page-music-land-auth .auth-scene-copy {
    padding: 0;
  }

  .page-account .auth-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .page-account .auth-scene-copy {
    padding: 0;
  }
}

@media (max-width: 560px) {
  .page-music-land .hero-title {
    font-size: clamp(2.4rem, 12vw, 3.2rem);
    line-height: 1;
  }

  .page-music-land .music-land-hero-actions {
    width: 100%;
  }

  .page-music-land .music-land-hero-actions .btn {
    width: 100%;
  }
}

.main-nav > .nav-group:first-of-type .nav-group-menu {
  left: 0;
  transform: none;
}

.main-nav > .nav-group:last-of-type .nav-group-menu {
  right: 0;
  left: auto;
  transform: none;
}

@media (max-width: 1100px) {
  .nav-group-menu {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    max-width: min(92vw, 360px);
  }
}

/* Mobile panel: allow full menu scrolling */
.mobile-nav {
  max-height: calc(100vh - 74px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.nav-open {
  overflow: hidden;
}

/* Dark themes: nav active must stay purple with white text */
html[data-theme="graphite"] .nav-link.active,
html[data-theme="oled"] .nav-link.active,
html[data-theme="dark"] .nav-link.active,
html[data-theme="graphite"] .mobile-nav-link.active,
html[data-theme="oled"] .mobile-nav-link.active,
html[data-theme="dark"] .mobile-nav-link.active,
html[data-theme="graphite"] .nav-group.active > .nav-link,
html[data-theme="oled"] .nav-group.active > .nav-link,
html[data-theme="dark"] .nav-group.active > .nav-link,
html[data-theme="graphite"] .nav-group[open] > .nav-link,
html[data-theme="oled"] .nav-group[open] > .nav-link,
html[data-theme="dark"] .nav-group[open] > .nav-link {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.55), rgba(86, 67, 194, 0.42)) !important;
  box-shadow: inset 0 0 0 1px rgba(181, 163, 255, 0.35) !important;
}

/* Enforce purple active nav in dark themes for dropdown summaries as well */
html[data-theme="graphite"] .site-header .main-nav .nav-link.active,
html[data-theme="oled"] .site-header .main-nav .nav-link.active,
html[data-theme="dark"] .site-header .main-nav .nav-link.active,
html[data-theme="graphite"] .site-header .main-nav details.nav-group.active > summary.nav-link,
html[data-theme="oled"] .site-header .main-nav details.nav-group.active > summary.nav-link,
html[data-theme="dark"] .site-header .main-nav details.nav-group.active > summary.nav-link,
html[data-theme="graphite"] .site-header .main-nav details.nav-group[open] > summary.nav-link,
html[data-theme="oled"] .site-header .main-nav details.nav-group[open] > summary.nav-link,
html[data-theme="dark"] .site-header .main-nav details.nav-group[open] > summary.nav-link {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.62), rgba(86, 67, 194, 0.5)) !important;
  border-color: rgba(181, 163, 255, 0.45) !important;
  box-shadow: inset 0 0 0 1px rgba(181, 163, 255, 0.42), 0 4px 14px rgba(50, 30, 118, 0.24) !important;
}

/* Public tests: cards should match platform style (not square/plain) */
.page-games .public-tests-panel,
.page-games .games-accordion.games-panel {
  border-radius: 20px !important;
  overflow: hidden;
}

.page-games .public-tests-panel-body {
  padding: 16px !important;
}

.page-games .public-tests-panel .games-quiz-grid,
.page-games .games-accordion.games-panel .games-quiz-grid {
  gap: 12px !important;
}

.page-games .public-tests-panel .games-quiz-card,
.page-games .games-accordion.games-panel .games-quiz-card {
  border-radius: 16px !important;
  border: 1px solid var(--border) !important;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--surface-strong) 96%, transparent),
    color-mix(in srgb, var(--surface-soft) 92%, transparent)
  ) !important;
  box-shadow: 0 10px 24px rgba(20, 28, 53, 0.12) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}

.page-games .public-tests-panel .games-quiz-card:hover,
.page-games .games-accordion.games-panel .games-quiz-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border)) !important;
  box-shadow: 0 14px 30px rgba(20, 28, 53, 0.18) !important;
}

.page-games .public-tests-panel .games-quiz-card-accent {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--primary) 10%, var(--surface-strong)),
    color-mix(in srgb, var(--accent) 8%, var(--surface-soft))
  ) !important;
  border-color: color-mix(in srgb, var(--primary) 36%, var(--border)) !important;
}