/* MusicMuse Dashboard Mobile Polish - safe override only */
@media (max-width: 768px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    background:
      radial-gradient(circle at top left, rgba(245,158,11,.12), transparent 32%),
      radial-gradient(circle at bottom right, rgba(99,102,241,.12), transparent 35%),
      #07070b !important;
  }

  .dashboard,
  .mm-dashboard,
  .dashboard-page,
  main,
  .main,
  .content,
  .page-content {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  .dashboard-header,
  .page-header,
  .hero,
  .mm-hero {
    border-radius: 22px !important;
    padding: 22px 18px !important;
    margin: 12px 0 18px !important;
    background: linear-gradient(135deg, rgba(20,20,32,.96), rgba(10,10,16,.96)) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.45) !important;
  }

  h1 {
    font-size: clamp(26px, 8vw, 38px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.04em !important;
  }

  h2 {
    font-size: clamp(20px, 6vw, 28px) !important;
    line-height: 1.15 !important;
  }

  p {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  .grid,
  .cards,
  .dashboard-grid,
  .stats-grid,
  .feature-grid,
  .quick-actions,
  .modules-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .card,
  .stat-card,
  .dashboard-card,
  .module-card,
  .action-card,
  .panel,
  .box {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px !important;
    padding: 18px !important;
    box-sizing: border-box !important;
    background: linear-gradient(180deg, rgba(18,18,28,.96), rgba(9,9,14,.96)) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    box-shadow: 0 14px 42px rgba(0,0,0,.35) !important;
  }

  a.button,
  button,
  .btn,
  .button,
  .cta,
  .primary-btn,
  .secondary-btn {
    width: 100% !important;
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    font-weight: 800 !important;
    text-align: center !important;
    margin-top: 8px !important;
  }

  img,
  video,
  canvas,
  iframe {
    max-width: 100% !important;
  }

  table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
  }

  .sidebar,
  aside {
    width: 100% !important;
    max-width: 100% !important;
  }

  nav,
  .nav,
  .top-nav,
  .navbar {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
}

/* ===== MOBILE DASHBOARD FULL-WIDTH FIX ===== */

@media (max-width: 768px) {

  body,
  html {
    overflow-x: hidden !important;
  }

  .dashboard-container,
  .dashboard-shell,
  .dashboard-content,
  .main-content,
  .content-area,
  .page-content {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .hero-section,
  .hero-card,
  .glass-card,
  .dashboard-card,
  .metric-card,
  .path-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 22px !important;
  }

  .hero-actions,
  .cta-group,
  .dashboard-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .hero-actions a,
  .hero-actions button,
  .cta-group a,
  .cta-group button,
  .dashboard-actions a,
  .dashboard-actions button {
    width: 100% !important;
    justify-content: center !important;
  }

  .floating-cta,
  .trial-button,
  .start-trial {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    margin-top: 14px !important;
  }

  h1 {
    font-size: 42px !important;
    line-height: 1.1 !important;
  }

  h2 {
    font-size: 28px !important;
  }

  p {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  .progress-ring,
  canvas {
    max-width: 220px !important;
    margin: 0 auto !important;
  }
}


/* Mobile hero cleanup */
@media (max-width: 768px) {
  .hero-section,
  .hero-card {
    padding-top: 28px !important;
  }

  .hero-section .floating-cta,
  .hero-section .trial-button,
  .hero-section .start-trial {
    position: static !important;
    display: block !important;
    width: 100% !important;
    margin: 22px 0 0 0 !important;
    text-align: center !important;
    border-radius: 18px !important;
  }

  .hero-section h1,
  .hero-card h1 {
    font-size: 38px !important;
    line-height: 1.05 !important;
    margin-top: 10px !important;
    margin-bottom: 20px !important;
    max-width: 100% !important;
  }

  .hero-section p,
  .hero-card p {
    max-width: 100% !important;
    margin-bottom: 18px !important;
  }

  .hero-section .eyebrow,
  .hero-card .eyebrow {
    font-size: 12px !important;
    white-space: normal !important;
  }
}


/* Force mobile hero to breathe */
@media (max-width: 768px) {
  .hero-section .floating-cta,
  .hero-section .trial-button,
  .hero-section .start-trial,
  a[href*="trial"],
  a[href*="pricing"] {
    position: static !important;
    display: block !important;
    width: 100% !important;
    margin: 18px 0 0 0 !important;
    transform: none !important;
  }

  .hero-section,
  .hero-card {
    padding-top: 42px !important;
  }

  .hero-section h1,
  .hero-card h1 {
    font-size: 34px !important;
    line-height: 1.08 !important;
    max-width: 92% !important;
  }

  .hero-section .eyebrow,
  .hero-card .eyebrow {
    display: none !important;
  }

  .hero-section .brand,
  .hero-card .brand {
    margin-bottom: 14px !important;
  }
}


@media (max-width: 768px) {
  .hero-brand,
  .brand-name,
  .hero-logo-text,
  .start-trial,
  .trial-btn,
  a[href*="trial"],
  a[href*="pricing"] {
    display: none !important;
  }

  .eyebrow,
  .hero-eyebrow,
  .hero-badge,
  .command-badge {
    margin-top: 22px !important;
    position: relative !important;
    top: 12px !important;
  }

  .hero h1,
  .dashboard-hero h1,
  main h1 {
    margin-top: 34px !important;
  }
}

/* Final mobile dashboard declutter */
@media (max-width: 768px) {
  /* Hide static desktop brand + Start Free Trial in top nav */
  body:has(.mm-chip) header a.btn-primary,
  body:has(.mm-chip) nav a.btn-primary {
    display: none !important;
  }

  body:has(.mm-chip) header,
  body:has(.mm-chip) nav {
    min-height: 72px !important;
  }

  /* Hide duplicated static MusicMuse wordmark near top on dashboard */
  body:has(.mm-chip) header > *:not(button):not(.menu-toggle):not([aria-label*="menu" i]) {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Push hero content down slightly so chip breathes */
  .mm-chip {
    margin-top: 22px !important;
    display: inline-flex !important;
    max-width: calc(100vw - 80px) !important;
    white-space: normal !important;
    line-height: 1.25 !important;
  }

  /* Give the hero headline cleaner spacing */
  .mm-chip + * {
    margin-top: 14px !important;
  }
}

/* Lesson page mobile layout fix */
@media (max-width: 768px) {
  #lesson-page {
    overflow-x: hidden !important;
  }

  #lesson-page > div,
  #lesson-page section,
  #lesson-page main {
    max-width: 100% !important;
  }

  #lesson-page [style*="grid-template-columns"] {
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  #lesson-page [style*="position:sticky"],
  #lesson-page [style*="sticky"] {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    margin-top: 24px !important;
  }

  #lesson-page aside,
  #lesson-page .sidebar {
    width: 100% !important;
    max-width: 100% !important;
  }

  #lesson-page img {
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  #lesson-page [style*="display:grid"],
  #lesson-page [style*="grid"] {
    display: block !important;
  }

  #lesson-page [style*="max-width:1180px"],
  #lesson-page [style*="max-width:1200px"] {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #lesson-page [style*="width:320px"],
  #lesson-page [style*="width: 320px"],
  #lesson-page [style*="min-width"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* FINAL Lesson mobile repair */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
  }

  #lesson-page {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #lesson-page * {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  #lesson-page [style*="grid"],
  #lesson-page [style*="display:grid"],
  #lesson-page [style*="grid-template-columns"] {
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  #lesson-page [style*="max-width"],
  #lesson-page [style*="width:320px"],
  #lesson-page [style*="width: 320px"],
  #lesson-page [style*="min-width"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #lesson-page a,
  #lesson-page p,
  #lesson-page div,
  #lesson-page span,
  #lesson-page h1,
  #lesson-page h2,
  #lesson-page h3 {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }

  #lesson-page > div {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* FORCE lesson page to single-column mobile */
@media (max-width: 768px) {
  #lesson-page div[style*="grid-template-columns"],
  #lesson-page div[style*="grid"],
  #lesson-page [style*="display:grid"],
  #lesson-page [style*="display: grid"] {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 24px !important;
  }

  #lesson-page aside,
  #lesson-page [style*="width:320px"],
  #lesson-page [style*="width: 320px"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #lesson-page a[style*="background:linear-gradient"],
  #lesson-page a[style*="background: linear-gradient"] {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    padding: 16px 18px !important;
  }
}

/* EMERGENCY lesson mobile: kill desktop overlap */
@media (max-width: 768px) {
  #lesson-page,
  #lesson-page * {
    box-sizing: border-box !important;
  }

  #lesson-page {
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  #lesson-page [style*="position:absolute"],
  #lesson-page [style*="position: absolute"] {
    position: static !important;
  }

  #lesson-page [style*="grid"],
  #lesson-page [style*="display:grid"],
  #lesson-page [style*="display: grid"] {
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  #lesson-page img {
    max-width: 100% !important;
    height: auto !important;
  }

  #lesson-page h1,
  #lesson-page h2,
  #lesson-page h3,
  #lesson-page p,
  #lesson-page span,
  #lesson-page a,
  #lesson-page div {
    max-width: 100% !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }

  #lesson-page [style*="width:320px"],
  #lesson-page [style*="width: 320px"],
  #lesson-page [style*="min-width"],
  #lesson-page aside {
    width: 100% !important;
    min-width: 0 !important;
    margin: 18px 0 !important;
  }

  #lesson-page [style*="padding:72px"],
  #lesson-page [style*="padding: 72px"] {
    padding: 28px 18px !important;
  }
}

/* =====================================
   MUSICMUSE PREMIUM EXPERIENCE LAYER
===================================== */

:root{
  --mm-glow: rgba(245,158,11,.18);
  --mm-card: rgba(16,16,28,.82);
  --mm-border: rgba(255,255,255,.06);
}

/* smoother app feel */
html{
  scroll-behavior:smooth;
}

body{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* premium cards */
.dashboard-card,
.lesson-card,
.world-card,
.practice-card,
.region-card{
  background: var(--mm-card) !important;
  border:1px solid var(--mm-border) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  border-radius: 24px !important;
  overflow:hidden !important;
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease !important;
}

/* hover depth */
.dashboard-card:hover,
.lesson-card:hover,
.world-card:hover,
.practice-card:hover,
.region-card:hover{
  transform: translateY(-3px);
  border-color: rgba(245,158,11,.22) !important;
  box-shadow:
    0 12px 40px rgba(0,0,0,.45),
    0 0 24px var(--mm-glow) !important;
}

/* immersive images */
.dashboard-card img,
.lesson-card img,
.world-card img{
  transition: transform .6s ease !important;
}

.dashboard-card:hover img,
.lesson-card:hover img,
.world-card:hover img{
  transform: scale(1.04);
}

/* premium buttons */
button,
.btn,
a.button{
  transition:
    transform .2s ease,
    opacity .2s ease,
    box-shadow .25s ease !important;
}

button:active,
.btn:active{
  transform: scale(.98);
}

/* luxury gold CTA */
.primary-btn,
.continue-btn,
.start-btn{
  background:
    linear-gradient(
      135deg,
      #F59E0B 0%,
      #FF7A59 100%
    ) !important;

  color:#05050A !important;
  font-weight:800 !important;

  box-shadow:
    0 10px 30px rgba(245,158,11,.28) !important;
}

/* section spacing */
section,
.dashboard-section{
  margin-bottom: 28px !important;
}

/* headings */
h1,h2,h3{
  letter-spacing:-0.03em !important;
}

/* dashboard hero */
.continue-learning-card,
.hero-card{
  position:relative;
  overflow:hidden;
}

.continue-learning-card::before,
.hero-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      circle at top right,
      rgba(245,158,11,.16),
      transparent 45%
    );
  pointer-events:none;
}

/* progress bars */
.progress-bar-fill{
  background:
    linear-gradient(
      90deg,
      #F59E0B,
      #FF7A59
    ) !important;

  box-shadow:
    0 0 12px rgba(245,158,11,.4);
}

/* mobile native spacing */
@media (max-width: 900px){

  body{
    padding-bottom:120px !important;
  }

  .dashboard-card,
  .lesson-card,
  .world-card{
    border-radius:22px !important;
  }

  h1{
    font-size: clamp(36px, 10vw, 54px) !important;
    line-height:.95 !important;
  }

  h2{
    font-size: clamp(24px, 7vw, 34px) !important;
  }

  .dashboard-section{
    margin-bottom:24px !important;
  }

}

/* subtle glow animation */
@keyframes mmPulse {
  0%{
    box-shadow:0 0 0 rgba(245,158,11,0);
  }
  50%{
    box-shadow:0 0 24px rgba(245,158,11,.16);
  }
  100%{
    box-shadow:0 0 0 rgba(245,158,11,0);
  }
}

.xp-card,
.streak-card{
  animation:mmPulse 4s infinite ease-in-out;
}