body[data-page-key="studentLearningJourney"] {
  --ananfx-bg-primary: #0B0B0C;
  --ananfx-bg-secondary: #101011;
  --ananfx-bg-tertiary: #141415;
  --ananfx-card-primary: #1C1C1E;
  --ananfx-card-secondary: #222224;
  --ananfx-card-elevated: #28282B;
  --ananfx-card-hover: #2D2D30;
  --ananfx-border-primary: #38383C;
  --ananfx-border-secondary: #303034;
  --ananfx-divider: #28282B;
  --ananfx-yellow-primary: #FFD000;
  --ananfx-yellow-bright: #FFE066;
  --ananfx-yellow-dark: #D9A800;
  --ananfx-yellow-tint: rgba(255, 208, 0, 0.12);
  --ananfx-success: #42D392;
  --ananfx-success-tint: rgba(66, 211, 146, 0.13);
  --ananfx-danger: #EF5A4C;
  --ananfx-warning: #FFD000;
  --ananfx-info: #4EA1FF;
  --ananfx-text-primary: #F5F5F7;
  --ananfx-text-secondary: #B8B8BD;
  --ananfx-text-muted: #8E8E93;
  --ananfx-text-disabled: #636366;
  --ananfx-overlay: rgba(0, 0, 0, 0.74);
  --ananfx-shadow: rgba(0, 0, 0, 0.34);
  --ananfx-focus-ring: rgba(255, 208, 0, 0.32);
}

@media (max-width: 767px) {
  body[data-page-key="studentLearningJourney"] {
    margin: 0;
    min-width: 320px;
    background: var(--ananfx-bg-primary);
    color: var(--ananfx-text-primary);
    overflow-x: hidden;
    font-family: var(--font-family-th, "Noto Sans Thai", "Inter", Arial, sans-serif);
  }

  body[data-page-key="studentLearningJourney"] *,
  body[data-page-key="studentLearningJourney"] *::before,
  body[data-page-key="studentLearningJourney"] *::after { box-sizing: border-box; }

  body[data-page-key="studentLearningJourney"] img { display: block; max-width: 100%; }
  body[data-page-key="studentLearningJourney"] button,
  body[data-page-key="studentLearningJourney"] input,
  body[data-page-key="studentLearningJourney"] select { font: inherit; }
  body[data-page-key="studentLearningJourney"] button,
  body[data-page-key="studentLearningJourney"] a { -webkit-tap-highlight-color: transparent; }
  body[data-page-key="studentLearningJourney"] a { color: inherit; text-decoration: none; }
  body[data-page-key="studentLearningJourney"] [hidden] { display: none; }
  body[data-page-key="studentLearningJourney"] .student-learning-journey-desktop-fallback { display: none; }

  body[data-page-key="studentLearningJourney"] .student-journey-mobile-page {
    --gold: var(--ananfx-yellow-primary);
    --gold-dark: var(--ananfx-yellow-bright);
    --gold-soft: var(--ananfx-yellow-tint);
    --black: var(--ananfx-bg-primary);
    --text: var(--ananfx-text-primary);
    --muted: var(--ananfx-text-muted);
    --border: var(--ananfx-border-primary);
    --surface: var(--ananfx-card-secondary);
    min-height: 100vh;
    background: var(--ananfx-bg-primary);
  }

  body[data-page-key="studentLearningJourney"] .student-journey-container { width: min(100% - 32px, 704px); margin-inline: auto; }
  body[data-page-key="studentLearningJourney"] .student-journey-header {
    position: sticky; top: 0; z-index: 50; background: rgba(11,11,12,.96); border-bottom: 1px solid var(--ananfx-divider); backdrop-filter: blur(14px);
  }
  body[data-page-key="studentLearningJourney"] .student-journey-header__top {
    height: 68px; padding: 0 14px; display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 8px;
  }
  body[data-page-key="studentLearningJourney"] .student-journey-icon-button,
  body[data-page-key="studentLearningJourney"] .student-journey-avatar-button {
    width: 44px; height: 44px; min-width: 44px; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; cursor: pointer;
  }
  body[data-page-key="studentLearningJourney"] .student-journey-icon-button img { width: 24px; height: 24px; object-fit: contain; }
  body[data-page-key="studentLearningJourney"] .student-journey-brand { justify-self: center; min-width: 0; }
  body[data-page-key="studentLearningJourney"] .student-journey-brand img { width: min(214px, 49vw); height: auto; }
  body[data-page-key="studentLearningJourney"] .student-journey-header__actions { display: flex; align-items: center; gap: 1px; }
  body[data-page-key="studentLearningJourney"] .student-journey-avatar-button img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1px solid var(--ananfx-border-primary); }
  body[data-page-key="studentLearningJourney"] .student-journey-notification-button { position: relative; }
  body[data-page-key="studentLearningJourney"] .student-journey-notification-button > span { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); right: 8px; top: 7px; border: 1px solid var(--ananfx-bg-primary); }

  body[data-page-key="studentLearningJourney"] .student-journey-main { padding-bottom: 28px; }
  body[data-page-key="studentLearningJourney"] .student-journey-hero { padding: 30px 0 24px; border-bottom: 1px solid var(--ananfx-divider); overflow: hidden; }
  body[data-page-key="studentLearningJourney"] .student-journey-hero__layout { display: grid; grid-template-columns: minmax(0,1.02fr) minmax(130px,.98fr); align-items: center; gap: 8px; }
  body[data-page-key="studentLearningJourney"] .student-journey-hero__copy { min-width: 0; position: relative; z-index: 2; }
  body[data-page-key="studentLearningJourney"] .student-journey-breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: 12px; margin-bottom: 14px; }
  body[data-page-key="studentLearningJourney"] .student-journey-breadcrumb a { text-decoration: underline; text-underline-offset: 3px; }
  body[data-page-key="studentLearningJourney"] .student-journey-eyebrow { display: inline-block; color: var(--gold-dark); font-size: 11px; font-weight: 800; letter-spacing: .08em; margin-bottom: 7px; }
  body[data-page-key="studentLearningJourney"] .student-journey-hero h1 { margin: 0; font-size: clamp(30px, 8.8vw, 46px); line-height: 1.16; letter-spacing: -.035em; }
  body[data-page-key="studentLearningJourney"] .student-journey-hero__copy > p { margin: 13px 0 0; color: var(--ananfx-text-secondary); font-size: 15px; line-height: 1.72; }
  body[data-page-key="studentLearningJourney"] .student-journey-user-line { font-size: 13px; }
  body[data-page-key="studentLearningJourney"] .student-journey-user-line strong { color: var(--text); }
  body[data-page-key="studentLearningJourney"] .student-journey-sample-notice { margin-top: 14px; display: inline-flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 10px; background: var(--gold-soft); border: 1px solid var(--ananfx-yellow-dark); font-size: 11px; }
  body[data-page-key="studentLearningJourney"] .student-journey-sample-notice strong { color: var(--ananfx-yellow-primary); }
  body[data-page-key="studentLearningJourney"] .student-journey-sample-notice span { color: var(--ananfx-text-secondary); }
  body[data-page-key="studentLearningJourney"] .student-journey-hero__art { min-width: 0; align-self: stretch; display: flex; align-items: center; justify-content: center; transform: translateX(9px); }
  body[data-page-key="studentLearningJourney"] .student-journey-hero__art img { width: 100%; max-height: 286px; object-fit: cover; object-position: center 62%; border-radius: 32px; mix-blend-mode: multiply; }

  body[data-page-key="studentLearningJourney"] .student-journey-section { padding-top: 24px; scroll-margin-top: 82px; }
  body[data-page-key="studentLearningJourney"] .student-journey-section-heading { margin-bottom: 12px; }
  body[data-page-key="studentLearningJourney"] .student-journey-section-heading--row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  body[data-page-key="studentLearningJourney"] .student-journey-section-heading--row > div { display: flex; align-items: center; gap: 9px; min-width: 0; }
  body[data-page-key="studentLearningJourney"] .student-journey-section-heading h2 { margin: 0; font-size: 21px; line-height: 1.35; letter-spacing: -.02em; }
  body[data-page-key="studentLearningJourney"] .student-journey-section-heading p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
  body[data-page-key="studentLearningJourney"] .student-journey-heading-icon { flex: 0 0 36px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--gold-soft); }
  body[data-page-key="studentLearningJourney"] .student-journey-heading-icon img { width: 25px; height: 25px; object-fit: contain; }
  body[data-page-key="studentLearningJourney"] .student-journey-panel { padding: 18px; border: 1px solid var(--border); border-radius: 18px; background: var(--ananfx-card-primary); box-shadow: 0 10px 28px var(--ananfx-shadow); }
  body[data-page-key="studentLearningJourney"] .student-journey-data-badge,
  body[data-page-key="studentLearningJourney"] .student-journey-level,
  body[data-page-key="studentLearningJourney"] .student-journey-module-badge { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 9px; border-radius: 999px; background: var(--gold-soft); color: var(--ananfx-yellow-primary); border: 1px solid var(--ananfx-yellow-dark); font-size: 11px; font-weight: 700; }
  body[data-page-key="studentLearningJourney"] .student-journey-data-badge { white-space: nowrap; }

  body[data-page-key="studentLearningJourney"] .student-journey-current-stage__top { display: flex; justify-content: space-between; gap: 12px; align-items: end; margin-top: 18px; }
  body[data-page-key="studentLearningJourney"] .student-journey-current-stage__top h3 { margin: 8px 0 2px; font-size: 23px; }
  body[data-page-key="studentLearningJourney"] .student-journey-current-stage__top p { margin: 0; color: var(--muted); font-size: 13px; }
  body[data-page-key="studentLearningJourney"] .student-journey-current-stage__top > strong { font-size: 28px; line-height: 1; }
  body[data-page-key="studentLearningJourney"] .student-journey-progress { width: 100%; height: 8px; border-radius: 999px; overflow: hidden; background: var(--ananfx-card-secondary); margin-top: 12px; }
  body[data-page-key="studentLearningJourney"] .student-journey-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--gold); }
  body[data-page-key="studentLearningJourney"] .student-journey-current-stage__lesson { margin-top: 15px; padding: 13px; border-radius: 13px; background: var(--surface); display: grid; gap: 3px; }
  body[data-page-key="studentLearningJourney"] .student-journey-current-stage__lesson span,
  body[data-page-key="studentLearningJourney"] .student-journey-current-stage__lesson small { color: var(--muted); font-size: 12px; }
  body[data-page-key="studentLearningJourney"] .student-journey-current-stage__lesson strong { font-size: 16px; }
  body[data-page-key="studentLearningJourney"] .student-journey-current-stage__metrics { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; color: var(--muted); font-size: 12px; }
  body[data-page-key="studentLearningJourney"] .student-journey-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  body[data-page-key="studentLearningJourney"] .student-journey-primary-button,
  body[data-page-key="studentLearningJourney"] .student-journey-secondary-button,
  body[data-page-key="studentLearningJourney"] .student-journey-dark-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 11px; font-weight: 750; font-size: 13px; cursor: pointer; }
  body[data-page-key="studentLearningJourney"] .student-journey-primary-button { border: 1px solid var(--gold); background: var(--gold); color: var(--ananfx-bg-primary); }
  body[data-page-key="studentLearningJourney"] .student-journey-secondary-button { border: 1px solid var(--ananfx-border-primary); background: var(--ananfx-card-primary); color: var(--text); }
  body[data-page-key="studentLearningJourney"] .student-journey-text-link { min-height: 44px; display: inline-flex; align-items: center; color: var(--ananfx-yellow-primary); font-weight: 750; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }

  body[data-page-key="studentLearningJourney"] .student-journey-recommendation-card { display: grid; grid-template-columns: 132px minmax(0,1fr); gap: 15px; padding: 16px; border: 1px solid var(--border); border-radius: 18px; background: var(--ananfx-card-primary); box-shadow: 0 10px 28px var(--ananfx-shadow); }
  body[data-page-key="studentLearningJourney"] .student-journey-recommendation-card > img { width: 132px; height: 132px; border-radius: 14px; object-fit: cover; background: var(--ananfx-bg-primary); }
  body[data-page-key="studentLearningJourney"] .student-journey-recommendation-card h3 { margin: 8px 0 3px; font-size: 18px; }
  body[data-page-key="studentLearningJourney"] .student-journey-recommendation-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
  body[data-page-key="studentLearningJourney"] .student-journey-progress-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 11px; font-size: 12px; }

  body[data-page-key="studentLearningJourney"] .student-journey-overview-progress > div:first-child { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
  body[data-page-key="studentLearningJourney"] .student-journey-overview-progress strong { font-size: 24px; }
  body[data-page-key="studentLearningJourney"] .student-journey-overview-grid { margin: 16px 0 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
  body[data-page-key="studentLearningJourney"] .student-journey-overview-grid div { min-width: 0; padding: 12px 8px; text-align: center; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  body[data-page-key="studentLearningJourney"] .student-journey-overview-grid div:nth-child(3n) { border-right: 0; }
  body[data-page-key="studentLearningJourney"] .student-journey-overview-grid div:nth-last-child(-n+3) { border-bottom: 0; }
  body[data-page-key="studentLearningJourney"] .student-journey-overview-grid dt { color: var(--muted); font-size: 10px; line-height: 1.35; }
  body[data-page-key="studentLearningJourney"] .student-journey-overview-grid dd { margin: 4px 0 0; font-size: 14px; font-weight: 800; line-height: 1.3; }
  body[data-page-key="studentLearningJourney"] .student-journey-inline-note { margin: 12px 0 0; color: var(--ananfx-text-secondary); background: var(--gold-soft); border-radius: 10px; padding: 9px 10px; font-size: 11px; line-height: 1.55; }

  body[data-page-key="studentLearningJourney"] .student-journey-process { list-style: none; margin: 0; padding: 3px 0 10px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--ananfx-yellow-dark) transparent; }
  body[data-page-key="studentLearningJourney"] .student-journey-process li { flex: 0 0 132px; min-height: 145px; padding: 16px 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--ananfx-card-primary); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; scroll-snap-align: start; }
  body[data-page-key="studentLearningJourney"] .student-journey-process li.is-current { border-color: var(--ananfx-yellow-primary); background: var(--ananfx-yellow-tint); }
  body[data-page-key="studentLearningJourney"] .student-journey-process li.is-complete { border-color: var(--ananfx-success); }
  body[data-page-key="studentLearningJourney"] .student-journey-process__number { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--ananfx-card-secondary); font-weight: 850; }
  body[data-page-key="studentLearningJourney"] .student-journey-process .is-complete .student-journey-process__number { background: var(--ananfx-success-tint); color: var(--ananfx-success); }
  body[data-page-key="studentLearningJourney"] .student-journey-process .is-current .student-journey-process__number { background: var(--gold); color: var(--ananfx-bg-primary); }
  body[data-page-key="studentLearningJourney"] .student-journey-process strong { font-size: 13px; line-height: 1.4; }
  body[data-page-key="studentLearningJourney"] .student-journey-process small { color: var(--muted); font-size: 11px; }

  body[data-page-key="studentLearningJourney"] .student-journey-lesson-card { display: grid; grid-template-columns: minmax(120px, 40%) minmax(0,1fr); gap: 16px; padding: 16px; border: 1px solid var(--border); border-radius: 18px; background: var(--ananfx-card-primary); }
  body[data-page-key="studentLearningJourney"] .student-journey-lesson-card__visual img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 14px; background: var(--ananfx-bg-primary); }
  body[data-page-key="studentLearningJourney"] .student-journey-lesson-card__body { min-width: 0; }
  body[data-page-key="studentLearningJourney"] .student-journey-status { display: inline-flex; min-height: 26px; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 750; }
  body[data-page-key="studentLearningJourney"] .student-journey-status.is-current { background: var(--ananfx-yellow-tint); color: var(--ananfx-yellow-bright); }
  body[data-page-key="studentLearningJourney"] .student-journey-status.is-locked { background: var(--ananfx-card-secondary); color: var(--ananfx-text-disabled); }
  body[data-page-key="studentLearningJourney"] .student-journey-lesson-card h3,
  body[data-page-key="studentLearningJourney"] .student-journey-next-card h3 { margin: 9px 0 2px; font-size: 18px; }
  body[data-page-key="studentLearningJourney"] .student-journey-english-title { margin: 0; color: var(--ananfx-text-muted); font-size: 12px; }
  body[data-page-key="studentLearningJourney"] .student-journey-lesson-card__body > p:not(.student-journey-english-title),
  body[data-page-key="studentLearningJourney"] .student-journey-next-card p:not(.student-journey-english-title) { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
  body[data-page-key="studentLearningJourney"] .student-journey-next-card { display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 14px; padding: 17px; border: 1px solid var(--border); border-radius: 18px; background: var(--ananfx-card-secondary); }
  body[data-page-key="studentLearningJourney"] .student-journey-lock-icon { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: var(--ananfx-card-secondary); color: var(--ananfx-text-muted); }
  body[data-page-key="studentLearningJourney"] .student-journey-lock-icon svg { width: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }

  body[data-page-key="studentLearningJourney"] .student-journey-module-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-bottom: 12px; }
  body[data-page-key="studentLearningJourney"] .student-journey-module-summary span { padding: 11px 7px; text-align: center; border: 1px solid var(--border); border-radius: 12px; color: var(--muted); font-size: 10px; }
  body[data-page-key="studentLearningJourney"] .student-journey-module-summary strong { display: block; color: var(--text); font-size: 20px; margin-bottom: 2px; }
  body[data-page-key="studentLearningJourney"] .student-journey-modules { display: grid; gap: 9px; }
  body[data-page-key="studentLearningJourney"] .student-journey-module { border: 1px solid var(--border); border-radius: 16px; background: var(--ananfx-card-primary); overflow: clip; scroll-margin-top: 84px; }
  body[data-page-key="studentLearningJourney"] .student-journey-module.is-current { border-color: var(--ananfx-yellow-primary); box-shadow: 0 8px 22px var(--ananfx-yellow-tint); }
  body[data-page-key="studentLearningJourney"] .student-journey-module__trigger { width: 100%; min-height: 78px; padding: 12px; border: 0; background: transparent; display: grid; grid-template-columns: 42px minmax(0,1fr) 24px; gap: 10px; align-items: center; text-align: left; cursor: pointer; }
  body[data-page-key="studentLearningJourney"] .student-journey-module__index { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--ananfx-card-secondary); font-weight: 850; }
  body[data-page-key="studentLearningJourney"] .student-journey-module.is-complete .student-journey-module__index { background: var(--ananfx-success-tint); color: var(--ananfx-success); }
  body[data-page-key="studentLearningJourney"] .student-journey-module.is-current .student-journey-module__index { background: var(--gold); }
  body[data-page-key="studentLearningJourney"] .student-journey-module__trigger > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
  body[data-page-key="studentLearningJourney"] .student-journey-module__trigger strong { font-size: 14px; line-height: 1.4; }
  body[data-page-key="studentLearningJourney"] .student-journey-module__trigger small,
  body[data-page-key="studentLearningJourney"] .student-journey-module__trigger em { color: var(--muted); font-size: 10px; font-style: normal; }
  body[data-page-key="studentLearningJourney"] .student-journey-module__trigger > svg { width: 22px; fill: none; stroke: var(--ananfx-text-muted); stroke-width: 1.8; transition: transform .2s ease; }
  body[data-page-key="studentLearningJourney"] .student-journey-module__trigger[aria-expanded="true"] > svg { transform: rotate(180deg); }
  body[data-page-key="studentLearningJourney"] .student-journey-module__panel { border-top: 1px solid var(--border); background: var(--ananfx-card-secondary); }
  body[data-page-key="studentLearningJourney"] .student-journey-module__panel > div { padding: 14px; }
  body[data-page-key="studentLearningJourney"] .student-journey-module__panel p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
  body[data-page-key="studentLearningJourney"] .student-journey-module-progress { padding-bottom: 13px; }
  body[data-page-key="studentLearningJourney"] .student-journey-module-progress > div:first-child { display: flex; justify-content: space-between; font-size: 12px; }
  body[data-page-key="studentLearningJourney"] .student-journey-lesson-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
  body[data-page-key="studentLearningJourney"] .student-journey-lesson-list li > button,
  body[data-page-key="studentLearningJourney"] .student-journey-lesson-list li > a { width: 100%; min-height: 64px; padding: 9px; border: 1px solid var(--ananfx-border-primary); border-radius: 12px; background: var(--ananfx-card-primary); display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 8px; text-align: left; cursor: pointer; }
  body[data-page-key="studentLearningJourney"] .student-journey-lesson-list li > button > span:first-child,
  body[data-page-key="studentLearningJourney"] .student-journey-lesson-list li > a > span:first-child { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--ananfx-card-secondary); font-size: 11px; font-weight: 800; }
  body[data-page-key="studentLearningJourney"] .student-journey-lesson-list li > button > span:nth-child(2),
  body[data-page-key="studentLearningJourney"] .student-journey-lesson-list li > a > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
  body[data-page-key="studentLearningJourney"] .student-journey-lesson-list strong { font-size: 12px; line-height: 1.35; }
  body[data-page-key="studentLearningJourney"] .student-journey-lesson-list small { color: var(--muted); font-size: 9px; }
  body[data-page-key="studentLearningJourney"] .student-journey-lesson-list em { font-style: normal; color: var(--muted); font-size: 9px; white-space: nowrap; }
  body[data-page-key="studentLearningJourney"] .student-journey-lesson-list .is-current > a { border-color: var(--ananfx-yellow-primary); background: var(--ananfx-yellow-tint); }
  body[data-page-key="studentLearningJourney"] .student-journey-lesson-list .is-complete em { color: var(--ananfx-success); }
  body[data-page-key="studentLearningJourney"] .student-journey-lesson-list .is-locked > button { background: var(--ananfx-card-secondary); color: var(--ananfx-text-disabled); }

  body[data-page-key="studentLearningJourney"] .student-journey-checklist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 17px; background: var(--ananfx-card-primary); overflow: hidden; }
  body[data-page-key="studentLearningJourney"] .student-journey-checklist li { min-height: 70px; padding: 11px 12px; display: grid; grid-template-columns: 26px minmax(0,1fr) auto; align-items: center; gap: 9px; border-bottom: 1px solid var(--border); }
  body[data-page-key="studentLearningJourney"] .student-journey-checklist li:last-child { border-bottom: 0; }
  body[data-page-key="studentLearningJourney"] .student-journey-check-icon { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ananfx-border-primary); }
  body[data-page-key="studentLearningJourney"] .student-journey-checklist .is-current .student-journey-check-icon { border-color: var(--gold); box-shadow: inset 0 0 0 4px var(--ananfx-card-primary); background: var(--gold); }
  body[data-page-key="studentLearningJourney"] .student-journey-checklist li > div { display: grid; gap: 2px; }
  body[data-page-key="studentLearningJourney"] .student-journey-checklist strong { font-size: 13px; }
  body[data-page-key="studentLearningJourney"] .student-journey-checklist small { color: var(--muted); font-size: 10px; }
  body[data-page-key="studentLearningJourney"] .student-journey-checklist a,
  body[data-page-key="studentLearningJourney"] .student-journey-checklist button { min-height: 44px; padding: 7px 8px; border: 0; background: transparent; color: var(--ananfx-yellow-primary); font-size: 11px; font-weight: 750; cursor: pointer; }

  body[data-page-key="studentLearningJourney"] .student-journey-estimate-card { padding: 18px; border: 1px solid var(--ananfx-yellow-dark); border-radius: 18px; background: var(--ananfx-yellow-tint); display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 12px; align-items: start; }
  body[data-page-key="studentLearningJourney"] .student-journey-estimate-card__icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--ananfx-card-primary); color: var(--gold-dark); }
  body[data-page-key="studentLearningJourney"] .student-journey-estimate-card__icon svg { width: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }
  body[data-page-key="studentLearningJourney"] .student-journey-estimate-card h2 { margin: 8px 0 4px; font-size: 20px; }
  body[data-page-key="studentLearningJourney"] .student-journey-estimate-card p { margin: 0; color: var(--muted); font-size: 12px; }
  body[data-page-key="studentLearningJourney"] .student-journey-estimate-card strong { display: block; margin-top: 8px; font-size: 20px; }
  body[data-page-key="studentLearningJourney"] .student-journey-estimate-card small { display: block; margin-top: 3px; color: var(--ananfx-text-secondary); font-size: 10px; }
  body[data-page-key="studentLearningJourney"] .student-journey-estimate-card > a { grid-column: 1/-1; }

  body[data-page-key="studentLearningJourney"] .student-journey-graduation-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  body[data-page-key="studentLearningJourney"] .student-journey-graduation-list li { min-height: 58px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 13px; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 9px; }
  body[data-page-key="studentLearningJourney"] .student-journey-graduation-list li > span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-soft); color: var(--ananfx-yellow-primary); font-weight: 850; }
  body[data-page-key="studentLearningJourney"] .student-journey-graduation-list strong { font-size: 12px; }
  body[data-page-key="studentLearningJourney"] .student-journey-graduation-list a,
  body[data-page-key="studentLearningJourney"] .student-journey-graduation-list button { min-height: 44px; border: 0; background: transparent; color: var(--ananfx-yellow-primary); font-size: 10px; font-weight: 750; cursor: pointer; }
  body[data-page-key="studentLearningJourney"] .student-journey-full-button { width: 100%; margin-top: 12px; }

  body[data-page-key="studentLearningJourney"] .student-journey-final-cta { margin-top: 26px; padding: 25px 18px; border-radius: 20px; background: var(--ananfx-bg-secondary); color: var(--ananfx-text-primary); text-align: center; position: relative; overflow: hidden; }
  body[data-page-key="studentLearningJourney"] .student-journey-final-cta::before,
  body[data-page-key="studentLearningJourney"] .student-journey-final-cta::after { content: ""; position: absolute; width: 220px; height: 70px; border: 1px solid var(--ananfx-focus-ring); border-radius: 50%; transform: rotate(-12deg); }
  body[data-page-key="studentLearningJourney"] .student-journey-final-cta::before { left: -90px; bottom: -45px; }
  body[data-page-key="studentLearningJourney"] .student-journey-final-cta::after { right: -90px; top: -45px; }
  body[data-page-key="studentLearningJourney"] .student-journey-final-cta > * { position: relative; z-index: 1; }
  body[data-page-key="studentLearningJourney"] .student-journey-final-cta h2 { margin: 0; font-size: 22px; }
  body[data-page-key="studentLearningJourney"] .student-journey-final-cta p { margin: 8px auto 0; max-width: 520px; color: var(--ananfx-text-secondary); font-size: 13px; line-height: 1.65; }
  body[data-page-key="studentLearningJourney"] .student-journey-final-cta__actions { margin-top: 15px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  body[data-page-key="studentLearningJourney"] .student-journey-dark-link { border: 1px solid var(--ananfx-border-primary); color: var(--ananfx-text-primary); }

  body[data-page-key="studentLearningJourney"] .student-journey-footer { margin-top: 28px; padding: 28px 0 calc(20px + env(safe-area-inset-bottom)); background: var(--ananfx-card-secondary); border-top: 1px solid var(--border); }
  body[data-page-key="studentLearningJourney"] .student-journey-footer__brand img { width: 172px; height: auto; }
  body[data-page-key="studentLearningJourney"] .student-journey-footer__inner > p { color: var(--muted); font-size: 11px; line-height: 1.6; }
  body[data-page-key="studentLearningJourney"] .student-journey-footer__socials { display: flex; gap: 8px; margin: 14px 0; }
  body[data-page-key="studentLearningJourney"] .student-journey-footer__socials a { min-height: 44px; padding: 9px 14px; border: 1px solid var(--border); border-radius: 10px; display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; }
  body[data-page-key="studentLearningJourney"] .student-journey-footer__accordions { border-top: 1px solid var(--border); }
  body[data-page-key="studentLearningJourney"] .student-journey-footer__accordions section { border-bottom: 1px solid var(--border); }
  body[data-page-key="studentLearningJourney"] .student-journey-footer__accordions button { width: 100%; min-height: 48px; padding: 8px 0; border: 0; background: transparent; display: flex; justify-content: space-between; align-items: center; text-align: left; font-weight: 750; cursor: pointer; }
  body[data-page-key="studentLearningJourney"] .student-journey-footer__accordions [data-footer-panel] { padding: 0 0 12px; display: grid; gap: 4px; }
  body[data-page-key="studentLearningJourney"] .student-journey-footer__accordions [data-footer-panel] a,
  body[data-page-key="studentLearningJourney"] .student-journey-footer__accordions [data-footer-panel] span { min-height: 40px; display: flex; align-items: center; color: var(--muted); font-size: 12px; }
  body[data-page-key="studentLearningJourney"] .student-journey-footer__copyright { margin-top: 15px; text-align: center; }

  body[data-page-key="studentLearningJourney"] .student-journey-panel-backdrop,
  body[data-page-key="studentLearningJourney"] .student-journey-dialog-backdrop { position: fixed; inset: 0; z-index: 90; background: var(--ananfx-overlay); }
  body[data-page-key="studentLearningJourney"] .student-journey-page-panel { position: fixed; z-index: 91; inset: auto 0 0; max-height: min(86vh, 720px); padding: 20px 16px calc(18px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: var(--ananfx-card-elevated); overflow-y: auto; box-shadow: 0 -14px 40px var(--ananfx-shadow); }
  body[data-page-key="studentLearningJourney"] .student-journey-panel__header { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
  body[data-page-key="studentLearningJourney"] .student-journey-panel__header h2 { margin: 0; font-size: 21px; }
  body[data-page-key="studentLearningJourney"] .student-journey-panel__header > button,
  body[data-page-key="studentLearningJourney"] .student-journey-dialog__close { width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 12px; background: var(--ananfx-card-primary); color: var(--ananfx-text-primary); font-size: 24px; cursor: pointer; }
  body[data-page-key="studentLearningJourney"] .student-journey-search-field { display: grid; gap: 6px; font-size: 12px; font-weight: 700; }
  body[data-page-key="studentLearningJourney"] .student-journey-search-field input { width: 100%; min-height: 48px; border: 1px solid var(--ananfx-border-primary); background: var(--ananfx-card-primary); color: var(--ananfx-text-primary); caret-color: var(--ananfx-yellow-primary); border-radius: 12px; padding: 0 13px; font-size: 14px; }
  body[data-page-key="studentLearningJourney"] .student-journey-search-status,
  body[data-page-key="studentLearningJourney"] .student-journey-search-empty,
  body[data-page-key="studentLearningJourney"] .student-journey-panel-note { color: var(--muted); font-size: 12px; }
  body[data-page-key="studentLearningJourney"] .student-journey-search-results,
  body[data-page-key="studentLearningJourney"] .student-journey-notification-list { display: grid; gap: 7px; }
  body[data-page-key="studentLearningJourney"] .student-journey-search-results a,
  body[data-page-key="studentLearningJourney"] .student-journey-notification-list a { min-height: 58px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; display: grid; gap: 2px; }
  body[data-page-key="studentLearningJourney"] .student-journey-search-results a { font-weight: 750; font-size: 13px; }
  body[data-page-key="studentLearningJourney"] .student-journey-search-results span,
  body[data-page-key="studentLearningJourney"] .student-journey-notification-list span { color: var(--muted); font-size: 11px; }
  body[data-page-key="studentLearningJourney"] .student-journey-notification-list strong { font-size: 13px; }

  body[data-page-key="studentLearningJourney"] .student-journey-dialog { position: fixed; z-index: 101; left: 16px; right: 16px; top: 50%; transform: translateY(-50%); max-width: 520px; margin-inline: auto; max-height: min(82vh, 680px); overflow-y: auto; padding: 22px 18px 18px; border-radius: 20px; background: var(--ananfx-card-elevated); box-shadow: 0 24px 70px var(--ananfx-shadow); }
  body[data-page-key="studentLearningJourney"] .student-journey-dialog-backdrop { z-index: 100; }
  body[data-page-key="studentLearningJourney"] .student-journey-dialog__close { position: absolute; right: 12px; top: 12px; }
  body[data-page-key="studentLearningJourney"] .student-journey-dialog__icon { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: var(--gold-soft); }
  body[data-page-key="studentLearningJourney"] .student-journey-dialog__icon img { width: 30px; height: 30px; object-fit: contain; }
  body[data-page-key="studentLearningJourney"] .student-journey-dialog h2 { margin: 14px 48px 0 0; font-size: 21px; }
  body[data-page-key="studentLearningJourney"] .student-journey-dialog [data-dialog-message] { margin-top: 9px; color: var(--muted); font-size: 13px; line-height: 1.65; }
  body[data-page-key="studentLearningJourney"] .student-journey-dialog [data-dialog-message] p { margin: 0 0 8px; }
  body[data-page-key="studentLearningJourney"] .student-journey-dialog__actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
  body[data-page-key="studentLearningJourney"] .student-journey-route-toast { position: fixed; z-index: 110; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(calc(100% - 32px), 480px); padding: 11px 14px; border-radius: 12px; background: var(--ananfx-card-elevated); color: var(--ananfx-text-primary); text-align: center; font-size: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.2); }

  body[data-page-key="studentLearningJourney"] button:focus-visible,
  body[data-page-key="studentLearningJourney"] a:focus-visible,
  body[data-page-key="studentLearningJourney"] input:focus-visible,
  body[data-page-key="studentLearningJourney"] [tabindex]:focus-visible { outline: 3px solid var(--ananfx-yellow-bright); outline-offset: 3px; }
  body[data-page-key="studentLearningJourney"] .is-hash-highlight { animation: studentJourneyHighlight 1.8s ease; }
  @keyframes studentJourneyHighlight { 0%,100% { box-shadow: 0 0 0 0 rgba(255,208,0,0); } 20%,70% { box-shadow: 0 0 0 4px var(--ananfx-focus-ring); } }

  @media (max-width: 430px) {
    body[data-page-key="studentLearningJourney"] .student-journey-header__top { grid-template-columns: 44px minmax(0,1fr) auto; padding-inline: 8px; }
    body[data-page-key="studentLearningJourney"] .student-journey-header__actions { gap: 0; }
    body[data-page-key="studentLearningJourney"] .student-journey-icon-button,
    body[data-page-key="studentLearningJourney"] .student-journey-avatar-button { width: 42px; min-width: 42px; }
    body[data-page-key="studentLearningJourney"] .student-journey-hero__layout { grid-template-columns: minmax(0,1.12fr) minmax(116px,.88fr); }
    body[data-page-key="studentLearningJourney"] .student-journey-hero__art img { max-height: 245px; }
    body[data-page-key="studentLearningJourney"] .student-journey-recommendation-card { grid-template-columns: 112px minmax(0,1fr); gap: 12px; }
    body[data-page-key="studentLearningJourney"] .student-journey-recommendation-card > img { width: 112px; height: 112px; }
    body[data-page-key="studentLearningJourney"] .student-journey-lesson-card { grid-template-columns: 112px minmax(0,1fr); gap: 12px; }
  }
  @media (max-width: 359px) {
    body[data-page-key="studentLearningJourney"] .student-journey-brand img { width: 150px; }
    body[data-page-key="studentLearningJourney"] .student-journey-header__actions .student-journey-avatar-button { display: none; }
    body[data-page-key="studentLearningJourney"] .student-journey-hero__layout { display: block; }
    body[data-page-key="studentLearningJourney"] .student-journey-hero__art { margin-top: 16px; transform: none; }
    body[data-page-key="studentLearningJourney"] .student-journey-hero__art img { max-height: 210px; object-position: center 55%; }
    body[data-page-key="studentLearningJourney"] .student-journey-recommendation-card,
    body[data-page-key="studentLearningJourney"] .student-journey-lesson-card { grid-template-columns: 1fr; }
    body[data-page-key="studentLearningJourney"] .student-journey-recommendation-card > img,
    body[data-page-key="studentLearningJourney"] .student-journey-lesson-card__visual img { width: 100%; height: auto; aspect-ratio: 16/9; }
    body[data-page-key="studentLearningJourney"] .student-journey-overview-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    body[data-page-key="studentLearningJourney"] .student-journey-overview-grid div:nth-child(3n) { border-right: 1px solid var(--border); }
    body[data-page-key="studentLearningJourney"] .student-journey-overview-grid div:nth-child(2n) { border-right: 0; }
    body[data-page-key="studentLearningJourney"] .student-journey-overview-grid div:nth-last-child(-n+3) { border-bottom: 1px solid var(--border); }
    body[data-page-key="studentLearningJourney"] .student-journey-overview-grid div:nth-last-child(-n+2) { border-bottom: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    body[data-page-key="studentLearningJourney"] *,
    body[data-page-key="studentLearningJourney"] *::before,
    body[data-page-key="studentLearningJourney"] *::after { scroll-behavior: auto; animation-duration: .01ms; animation-iteration-count: 1; transition-duration: .01ms; }
  }
}

@media (min-width: 768px) {
  body[data-page-key="studentLearningJourney"] .student-journey-mobile-page { display: none; }
  body[data-page-key="studentLearningJourney"] .student-learning-journey-desktop-fallback { min-height: 100vh; display: grid; place-items: center; padding: 40px; background: var(--ananfx-bg-primary); font-family: Arial, sans-serif; color: var(--ananfx-text-primary); }
  body[data-page-key="studentLearningJourney"] .student-learning-journey-desktop-fallback section { width: min(100%, 640px); padding: 44px; border: 1px solid var(--ananfx-border-primary); border-radius: 20px; background: var(--ananfx-card-primary); text-align: center; box-shadow: 0 18px 50px var(--ananfx-shadow); }
  body[data-page-key="studentLearningJourney"] .student-learning-journey-desktop-fallback h2 { margin: 0 0 12px; font-size: 30px; }
  body[data-page-key="studentLearningJourney"] .student-learning-journey-desktop-fallback p { margin: 0 0 22px; color: var(--ananfx-text-secondary); line-height: 1.7; }
  body[data-page-key="studentLearningJourney"] .student-learning-journey-desktop-fallback a { display: inline-flex; min-height: 46px; align-items: center; padding: 10px 18px; border-radius: 10px; background: var(--ananfx-yellow-primary); color: var(--ananfx-bg-primary); text-decoration: none; font-weight: 700; }
}


/* Page-scoped Dark Premium interaction states */
body[data-page-key="studentLearningJourney"] .student-journey-primary-button:hover {
  background: var(--ananfx-yellow-bright);
  border-color: var(--ananfx-yellow-bright);
}
body[data-page-key="studentLearningJourney"] .student-journey-secondary-button:hover,
body[data-page-key="studentLearningJourney"] .student-journey-icon-button:hover,
body[data-page-key="studentLearningJourney"] .student-journey-avatar-button:hover,
body[data-page-key="studentLearningJourney"] .student-journey-search-results a:hover,
body[data-page-key="studentLearningJourney"] .student-journey-notification-list a:hover {
  background: var(--ananfx-card-hover);
}
body[data-page-key="studentLearningJourney"] input::placeholder {
  color: var(--ananfx-text-muted);
}
body[data-page-key="studentLearningJourney"] input:focus {
  border-color: var(--ananfx-yellow-primary);
  box-shadow: 0 0 0 3px var(--ananfx-focus-ring);
}
body[data-page-key="studentLearningJourney"] ::selection {
  background: var(--ananfx-yellow-primary);
  color: var(--ananfx-bg-primary);
}