/*
 * まなび動画ナビ — Photo Fidelity V242 / Application surfaces
 *
 * 20枚の設計画像のうち、アプリ内部（01,03–10,12–19）の構図を
 * 実在するDOMへ投影する最終プレゼンテーション層。
 * PHP、フォーム、通信、動画、手書き座標、QR形状は変更しない。
 */

:root {
  --mnv-v242-ink: #f7fbff;
  --mnv-v242-muted: #aebfd7;
  --mnv-v242-bg: #020814;
  --mnv-v242-bg-deep: #030b1c;
  --mnv-v242-panel: rgba(7, 25, 55, .94);
  --mnv-v242-panel-strong: rgba(9, 31, 67, .98);
  --mnv-v242-line: rgba(103, 184, 255, .24);
  --mnv-v242-line-bright: rgba(99, 232, 255, .54);
  --mnv-v242-cyan: #64eaff;
  --mnv-v242-blue: #2887ff;
  --mnv-v242-violet: #865cff;
  --mnv-v242-magenta: #d85cff;
  --mnv-v242-gold: #ffc65a;
  --mnv-v242-green: #47dba8;
  --mnv-v242-red: #ff718e;
  --mnv-v242-radius: 20px;
  --mnv-v242-radius-lg: 26px;
  --mnv-v242-shadow: 0 22px 64px rgba(0, 4, 20, .43);
  --mnv-v242-inner: inset 0 1px rgba(255, 255, 255, .055);
  --mnv-v242-gradient: linear-gradient(112deg, #1399ff 0%, #326eff 48%, #8c4dff 100%);
}

/* ========================================================================== */
/* 01–09 / shared learner cockpit                                              */
/* ========================================================================== */

body.mnv-future-ui:is(.shell-learner, .shell-immersive) {
  min-height: 100dvh;
  background:
    linear-gradient(180deg, rgba(2, 8, 24, .76), rgba(2, 8, 20, .94)),
    url("../mnv-command-skyline-v242.webp") center top / cover scroll,
    var(--mnv-v242-bg);
  color: var(--mnv-v242-ink);
}

body.mnv-future-ui:is(.shell-learner, .shell-immersive)::after {
  position: fixed;
  z-index: -1;
  top: -18rem;
  right: -16rem;
  width: 52rem;
  height: 52rem;
  border: 1px solid rgba(93, 174, 255, .12);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 44%, rgba(39, 125, 255, .19), transparent 30%),
    repeating-radial-gradient(circle, transparent 0 3.8rem, rgba(108, 103, 255, .055) 4rem 4.05rem);
  content: "";
  pointer-events: none;
}

body.mnv-future-ui:is(.shell-learner, .shell-immersive) main.shell-container {
  position: relative;
  z-index: 1;
  padding-top: 26px;
  padding-bottom: 54px;
}

body.mnv-future-ui:is(.shell-learner, .shell-immersive) main.shell-container > :is(h1, .page-title, .section-heading) {
  color: var(--mnv-v242-ink);
}

body.mnv-future-ui:is(.shell-learner, .shell-immersive) :is(.panel, .side-card, .card) {
  border-color: var(--mnv-v242-line);
  color: var(--mnv-v242-ink);
}

body.mnv-future-ui:is(.shell-learner, .shell-immersive) :is(.panel, .side-card, .card) :is(h1, h2, h3, h4, strong, legend) {
  color: var(--mnv-v242-ink);
}

body.mnv-future-ui:is(.shell-learner, .shell-immersive) :is(.panel, .side-card, .card) :is(p, small, .muted) {
  color: var(--mnv-v242-muted);
}

body.mnv-future-ui:is(.shell-learner, .shell-immersive) .button.primary {
  border-color: rgba(113, 236, 255, .68);
  background: var(--mnv-v242-gradient);
  color: #fff;
  box-shadow: 0 9px 28px rgba(47, 103, 255, .32), inset 0 1px rgba(255, 255, 255, .24);
}

body.mnv-future-ui:is(.shell-learner, .shell-immersive) .button:not(.primary):not(.danger) {
  border-color: rgba(123, 185, 235, .28);
  background: rgba(10, 35, 72, .86);
  color: #eaf5ff;
}

body.mnv-future-ui:is(.shell-learner, .shell-immersive) .button:hover {
  border-color: var(--mnv-v242-cyan);
  box-shadow: 0 10px 30px rgba(40, 135, 255, .25);
  transform: translateY(-2px);
}

body.mnv-future-ui:is(.shell-learner, .shell-immersive) .button:active {
  transform: translateY(0) scale(.985);
}

body.mnv-future-ui:is(.shell-learner, .shell-immersive) :is(input, select, textarea):focus-visible {
  border-color: var(--mnv-v242-cyan);
  outline: 3px solid rgba(100, 234, 255, .19);
  outline-offset: 2px;
  box-shadow: 0 0 24px rgba(40, 135, 255, .18);
}

/* Reference 01–09 use one persistent left rail on wide screens. The real
 * header remains fully present and every original link stays operable. */
@media (min-width: 1181px) {
  body.mnv-future-ui:is(.shell-learner, .shell-immersive) .site-header {
    position: fixed;
    z-index: 620;
    inset: 0 auto 0 0;
    width: 284px;
    height: 100dvh;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-right: 1px solid rgba(104, 182, 255, .19);
    background:
      radial-gradient(circle at 20% 4%, rgba(76, 144, 255, .19), transparent 17rem),
      linear-gradient(180deg, rgba(3, 11, 29, .99), rgba(3, 15, 37, .985));
    box-shadow: 20px 0 58px rgba(0, 4, 18, .24), inset -1px 0 rgba(255, 255, 255, .025);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body.mnv-future-ui:is(.shell-learner, .shell-immersive) .site-header-inner {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 26px 18px 18px;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  body.mnv-future-ui:is(.shell-learner, .shell-immersive) .site-header .brand {
    display: grid;
    grid-template-columns: 49px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    padding: 0 6px 22px;
    border-bottom: 1px solid rgba(117, 186, 240, .15);
    color: #fff;
  }

  body.mnv-future-ui:is(.shell-learner, .shell-immersive) .site-header .brand-mark {
    width: 49px;
    height: 49px;
    background: linear-gradient(145deg, #0a224b, #0c1837);
    box-shadow: 0 0 26px rgba(63, 151, 255, .24);
  }

  body.mnv-future-ui:is(.shell-learner, .shell-immersive) .site-header .brand-text strong {
    color: #fff;
    font-size: 17px;
    letter-spacing: .02em;
  }

  body.mnv-future-ui:is(.shell-learner, .shell-immersive) .site-header .brand-text small {
    color: #91a8c2;
    font-size: 9px;
  }

  body.mnv-future-ui:is(.shell-learner, .shell-immersive) .site-header .nav-toggle,
  body.mnv-future-ui:is(.shell-learner, .shell-immersive) .site-header .nav-drawer-close {
    display: none;
  }

  body.mnv-future-ui:is(.shell-learner, .shell-immersive) .site-header .header-notification-quick {
    position: absolute;
    top: 31px;
    right: 16px;
    display: grid;
    width: 40px;
    height: 40px;
    border-color: rgba(119, 189, 239, .24);
    background: rgba(7, 29, 61, .92);
    color: #ddecfa;
  }

  body.mnv-future-ui:is(.shell-learner, .shell-immersive) .site-header .site-nav-area,
  body.mnv-future-ui:is(.shell-learner, .shell-immersive) .site-header .site-nav-area.open {
    position: static;
    display: flex;
    width: 100%;
    height: auto;
    max-height: none;
    min-height: 0;
    padding: 0 2px 2px;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #ddecfa;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  body.mnv-future-ui:is(.shell-learner, .shell-immersive) .site-header .site-nav {
    display: grid;
    width: 100%;
    margin: 0;
    gap: 5px;
  }

  body.mnv-future-ui:is(.shell-learner, .shell-immersive) .site-header .site-nav :is(a, .nav-guide-button) {
    display: grid;
    grid-template-columns: 29px minmax(0, 1fr);
    width: 100%;
    min-height: 44px;
    padding: 9px 11px;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 13px;
    background: transparent;
    color: #aebfd5;
    font-size: 13px;
    font-weight: 760;
    text-align: left;
    white-space: normal;
  }

  body.mnv-future-ui:is(.shell-learner, .shell-immersive) .site-header .site-nav :is(a, .nav-guide-button)::before {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border: 1px solid rgba(133, 189, 235, .20);
    border-radius: 9px;
    color: #8fb9dd;
    content: "◇";
    font-size: 13px;
  }

  body.mnv-future-ui:is(.shell-learner, .shell-immersive) .site-header .site-nav > :first-child {
    border-color: rgba(100, 234, 255, .32);
    background: linear-gradient(90deg, rgba(38, 107, 255, .30), rgba(96, 91, 255, .13));
    color: #fff;
    box-shadow: inset 3px 0 var(--mnv-v242-cyan), 0 13px 32px rgba(22, 77, 177, .21);
  }

  body.mnv-future-ui:is(.shell-learner, .shell-immersive) .site-header .site-nav > :first-child::before {
    border-color: rgba(100, 234, 255, .62);
    background: rgba(38, 125, 255, .25);
    color: #fff;
    box-shadow: 0 0 16px rgba(100, 234, 255, .25);
    content: "▶";
  }

  body.mnv-future-ui:is(.shell-learner, .shell-immersive) .site-header .site-nav :is(a, .nav-guide-button):hover,
  body.mnv-future-ui:is(.shell-learner, .shell-immersive) .site-header .site-nav :is(a, .nav-guide-button):focus-visible {
    border-color: rgba(100, 234, 255, .28);
    background: rgba(38, 107, 255, .16);
    color: #fff;
  }

  body.mnv-future-ui:is(.shell-learner, .shell-immersive) .site-header .nav-actions {
    display: grid;
    width: 100%;
    margin-top: auto;
    padding: 12px 0 0;
    gap: 6px;
    border-top: 1px solid rgba(117, 186, 240, .14);
  }

  body.mnv-future-ui:is(.shell-learner, .shell-immersive) .site-header .nav-actions :is(.nav-link, .button, summary) {
    min-height: 40px;
    border-color: rgba(117, 186, 240, .17);
    background: rgba(8, 29, 59, .83);
    color: #d6e6f5;
    font-size: 12px;
  }

  body.mnv-future-ui:is(.shell-learner, .shell-immersive) .site-header .notification-menu-panel {
    position: fixed;
    left: 245px;
    bottom: 88px;
    width: min(390px, calc(100vw - 290px));
  }

  body.mnv-future-ui:is(.shell-learner, .shell-immersive) main.container.shell-container {
    width: calc(100% - 316px);
    max-width: 1640px;
    margin-right: 16px;
    margin-left: 300px;
  }

  body.mnv-future-ui:is(.shell-learner, .shell-immersive) > footer {
    margin-left: 284px;
  }

  body.mnv-future-ui:is(.shell-learner, .shell-immersive) .nav-scrim {
    display: none;
  }
}

/* The real journey rail becomes the illuminated route at the top of refs 05–07. */
body.mnv-future-ui:is(.shell-learner, .shell-immersive) .mf-journey-rail {
  margin: 0 0 22px;
  padding: 15px 18px;
  overflow: hidden;
  border: 1px solid rgba(107, 183, 241, .20);
  border-radius: var(--mnv-v242-radius);
  background: linear-gradient(180deg, rgba(8, 30, 64, .86), rgba(4, 18, 42, .86));
  box-shadow: var(--mnv-v242-shadow), var(--mnv-v242-inner);
}

body.mnv-future-ui:is(.shell-learner, .shell-immersive) .mf-journey-rail ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

body.mnv-future-ui:is(.shell-learner, .shell-immersive) .mf-journey-rail li {
  position: relative;
  display: grid;
  grid-template-columns: 43px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 3px 22px 3px 0;
}

body.mnv-future-ui:is(.shell-learner, .shell-immersive) .mf-journey-rail li:not(:last-child)::after {
  position: absolute;
  top: 23px;
  right: 5px;
  left: 53px;
  height: 2px;
  background: linear-gradient(90deg, rgba(62, 131, 255, .78), rgba(100, 234, 255, .20));
  content: "";
  pointer-events: none;
}

body.mnv-future-ui:is(.shell-learner, .shell-immersive) .mf-journey-step-icon {
  z-index: 1;
  width: 43px;
  height: 43px;
  border: 1px solid rgba(123, 186, 237, .30);
  border-radius: 50%;
  background: #0b244b;
  color: #8eb7dc;
}

body.mnv-future-ui:is(.shell-learner, .shell-immersive) .mf-journey-rail .is-current .mf-journey-step-icon {
  border-color: var(--mnv-v242-cyan);
  background: linear-gradient(145deg, #1f6aff, #734eff);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(100, 234, 255, .09), 0 0 26px rgba(61, 126, 255, .42);
}

body.mnv-future-ui:is(.shell-learner, .shell-immersive) .mf-journey-rail .is-complete .mf-journey-step-icon {
  border-color: rgba(71, 219, 168, .62);
  background: rgba(21, 107, 92, .82);
  color: #a6f5d9;
}

body.mnv-future-ui:is(.shell-learner, .shell-immersive) .mf-journey-step-copy strong {
  color: #f6fbff;
  font-size: 13px;
}

body.mnv-future-ui:is(.shell-learner, .shell-immersive) .mf-journey-step-copy small {
  color: #8fa7c2;
  font-size: 10px;
}

/* ========================================================================== */
/* 01, 16 / Dashboard                                                          */
/* ========================================================================== */

body.mnv-future-ui.shell-learner .dash-layout {
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: 18px;
  align-items: start;
}

body.mnv-future-ui.shell-learner .dash-layout > .desktop-dash-nav {
  grid-column: 1 / -1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  width: 100%;
  padding: 8px;
  gap: 5px;
  overflow-x: auto;
  border: 1px solid rgba(109, 184, 239, .19);
  border-radius: 17px;
  background: rgba(4, 18, 42, .84);
  box-shadow: 0 14px 38px rgba(0, 4, 18, .24);
  scrollbar-color: rgba(100, 234, 255, .35) transparent;
}

body.mnv-future-ui.shell-learner .dash-layout > .desktop-dash-nav > hr {
  width: 1px;
  height: 34px;
  margin: 4px 3px;
  border: 0;
  background: rgba(117, 186, 240, .16);
}

body.mnv-future-ui.shell-learner .dash-layout > .desktop-dash-nav > a {
  min-height: 42px;
  padding: 8px 11px;
  border-radius: 11px;
  color: #aebfd4;
  font-size: 11px;
}

body.mnv-future-ui.shell-learner .dash-layout > .desktop-dash-nav > a.active {
  border-color: rgba(100, 234, 255, .42);
  background: linear-gradient(90deg, rgba(37, 104, 255, .34), rgba(113, 78, 255, .20));
  color: #fff;
}

body.mnv-future-ui.shell-learner .dash-layout > .mobile-mypage-menu {
  grid-column: 1 / -1;
}

body.mnv-future-ui.page-mypage .dash-greet {
  min-height: 112px;
  padding: 24px 28px;
  align-items: center;
  border-color: rgba(99, 221, 255, .31);
  background:
    url("../mnv-ai-companion-v242.webp") calc(100% - 232px) 54% / 104px auto no-repeat,
    radial-gradient(circle at 91% 20%, rgba(100, 234, 255, .22), transparent 16rem),
    linear-gradient(118deg, rgba(8, 40, 82, .98), rgba(10, 25, 59, .98));
}

body.mnv-future-ui.page-mypage .dash-greet::after {
  position: absolute;
  right: 18%;
  bottom: -90px;
  width: 240px;
  height: 180px;
  border: 1px solid rgba(112, 233, 255, .13);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(65, 138, 255, .13), transparent 63%);
  content: "";
  pointer-events: none;
}

body.mnv-future-ui.page-mypage .dash-greet h1 {
  margin: 0 0 7px;
  font-size: clamp(23px, 2vw, 30px);
}

body.mnv-future-ui.page-mypage .plan-chip-card {
  min-width: 230px;
  border-color: rgba(113, 188, 239, .20);
  background: rgba(3, 18, 43, .58);
}

body.mnv-future-ui.page-mypage .today-learning-card {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, .75fr) auto;
  gap: 22px;
  min-height: 194px;
  margin-top: 16px;
  padding: 28px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(100, 234, 255, .48);
  border-radius: var(--mnv-v242-radius-lg);
  background:
    linear-gradient(90deg, rgba(11, 53, 105, .98), rgba(10, 29, 67, .95)),
    var(--mnv-v242-panel-strong);
  box-shadow: 0 0 0 1px rgba(100, 234, 255, .07), 0 24px 64px rgba(0, 5, 24, .42), 0 0 32px rgba(40, 135, 255, .12);
}

body.mnv-future-ui.page-mypage .today-learning-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--mnv-v242-cyan), var(--mnv-v242-violet));
  content: "";
  pointer-events: none;
}

body.mnv-future-ui.page-mypage .today-learning-eyebrow {
  color: var(--mnv-v242-cyan);
  font-weight: 850;
  letter-spacing: .05em;
}

body.mnv-future-ui.page-mypage .today-learning-copy h2 {
  margin: 10px 0 8px;
  color: #fff;
  font-size: clamp(22px, 2vw, 28px);
}

body.mnv-future-ui.page-mypage .today-learning-metrics {
  display: grid;
  gap: 7px;
  padding: 13px 16px;
  border: 1px solid rgba(115, 187, 239, .17);
  border-radius: 15px;
  background: rgba(3, 17, 40, .50);
}

body.mnv-future-ui.page-mypage .today-learning-metrics > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(117, 186, 240, .10);
}

body.mnv-future-ui.page-mypage .today-learning-metrics > div:last-child {
  border-bottom: 0;
}

body.mnv-future-ui.page-mypage .today-learning-metrics dt {
  color: #8fa8c3;
  font-size: 11px;
}

body.mnv-future-ui.page-mypage .today-learning-metrics dd {
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

body.mnv-future-ui.page-mypage .today-learning-action {
  min-width: 178px;
  min-height: 55px;
}

body.mnv-future-ui.page-mypage .stat-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 16px;
}

body.mnv-future-ui.page-mypage .stat-card {
  min-height: 128px;
  padding: 20px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(70, 139, 255, .16), transparent 9rem),
    linear-gradient(145deg, rgba(10, 38, 77, .98), rgba(5, 21, 48, .98));
}

body.mnv-future-ui.page-mypage .stat-card .stat-text > span {
  color: #a4b8cf;
  font-size: 12px;
}

body.mnv-future-ui.page-mypage .stat-card .stat-text > strong {
  margin-top: 12px;
  color: #fff;
  font-size: clamp(25px, 2.3vw, 36px);
  font-variant-numeric: tabular-nums;
}

body.mnv-future-ui.page-mypage .stat-card .icon-bubble {
  border: 1px solid rgba(100, 234, 255, .18);
  background: rgba(38, 103, 255, .18);
  color: var(--mnv-v242-cyan);
}

body.mnv-future-ui.page-mypage .next-card {
  display: grid;
  grid-template-columns: minmax(190px, 31%) minmax(0, 1fr) auto;
  gap: 18px;
  min-height: 188px;
  padding: 18px;
  align-items: center;
  border-radius: 23px;
}

body.mnv-future-ui.page-mypage .next-thumb {
  overflow: hidden;
  border: 1px solid rgba(100, 234, 255, .34);
  border-radius: 16px;
  aspect-ratio: 16 / 9;
  box-shadow: 0 0 24px rgba(40, 135, 255, .16);
}

body.mnv-future-ui.page-mypage .next-body h3 {
  color: #fff;
  font-size: clamp(18px, 1.45vw, 23px);
}

body.mnv-future-ui.page-mypage .next-actions {
  display: grid;
  min-width: 165px;
  gap: 8px;
}

body.mnv-future-ui.page-mypage .route-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

body.mnv-future-ui.page-mypage .route-card-s {
  min-height: 214px;
  padding: 20px;
  border-radius: 18px;
}

body.mnv-future-ui.page-mypage .dash-side {
  display: grid;
  gap: 14px;
}

body.mnv-future-ui.page-mypage .dash-side .side-card {
  border-radius: 19px;
  background:
    radial-gradient(circle at 100% 0%, rgba(102, 89, 255, .14), transparent 10rem),
    linear-gradient(145deg, rgba(10, 38, 77, .97), rgba(5, 21, 48, .97));
}

body.mnv-future-ui.page-mypage .dash-side .watch-info-list > div {
  border-color: rgba(114, 184, 237, .13);
  background: rgba(3, 17, 40, .43);
}

/* ========================================================================== */
/* 09 / Saved routes, favorites, histories                                    */
/* ========================================================================== */

body.mnv-future-ui:is(.page-favorites, .page-watch_history, .page-feedback_history, .page-learning_records) .dash-layout {
  grid-template-columns: minmax(0, 1fr) 286px;
}

body.mnv-future-ui:is(.page-favorites, .page-watch_history, .page-feedback_history) .history-list {
  display: grid;
  gap: 12px;
}

body.mnv-future-ui:is(.page-favorites, .page-watch_history, .page-feedback_history) .history-item {
  grid-template-columns: 205px minmax(0, 1fr) minmax(150px, auto);
  min-height: 142px;
  padding: 12px;
  align-items: center;
  border-radius: 18px;
  background:
    linear-gradient(100deg, rgba(9, 37, 76, .98), rgba(5, 21, 48, .96));
  box-shadow: 0 14px 40px rgba(0, 5, 22, .29), var(--mnv-v242-inner);
}

body.mnv-future-ui:is(.page-favorites, .page-watch_history, .page-feedback_history) .history-item:hover {
  border-color: rgba(100, 234, 255, .42);
  background: linear-gradient(100deg, rgba(11, 46, 94, .98), rgba(6, 24, 54, .97));
  box-shadow: 0 18px 48px rgba(0, 5, 22, .35), 0 0 26px rgba(40, 135, 255, .10);
}

body.mnv-future-ui:is(.page-favorites, .page-watch_history, .page-feedback_history) .history-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 13px;
}

body.mnv-future-ui:is(.page-favorites, .page-watch_history, .page-feedback_history) .history-body {
  min-width: 0;
  padding: 4px 10px;
}

body.mnv-future-ui:is(.page-favorites, .page-watch_history, .page-feedback_history) .history-topline {
  gap: 9px;
}

body.mnv-future-ui:is(.page-favorites, .page-watch_history, .page-feedback_history) .history-body h2,
body.mnv-future-ui:is(.page-favorites, .page-watch_history, .page-feedback_history) .history-body h3 {
  color: #fff;
  font-size: 18px;
}

body.mnv-future-ui:is(.page-favorites, .page-watch_history, .page-feedback_history) .history-actions {
  display: grid;
  min-width: 150px;
  gap: 7px;
}

body.mnv-future-ui .panel.empty-state,
body.mnv-future-ui .org-empty,
body.mnv-future-ui .user-empty-state {
  border: 1px dashed rgba(110, 190, 242, .34);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(100, 234, 255, .11), transparent 15rem),
    rgba(5, 22, 49, .89);
  color: #eaf5ff;
}

/* ========================================================================== */
/* 04, 13 / AI-selected three-video route                                     */
/* ========================================================================== */

body.mnv-future-ui:is(.page-route, .page-route_preview) .result-head {
  padding: 25px 29px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 95% 0%, rgba(113, 77, 255, .21), transparent 20rem),
    linear-gradient(115deg, rgba(7, 35, 75, .98), rgba(7, 21, 50, .98));
}

body.mnv-future-ui:is(.page-route, .page-route_preview) .result-head h1 {
  font-size: clamp(25px, 2.4vw, 36px);
  letter-spacing: .01em;
}

body.mnv-future-ui:is(.page-route, .page-route_preview) :is(.metric-strip, .mastery-contract, .adaptive-plan-board) {
  border-color: rgba(107, 184, 241, .21);
  border-radius: 20px;
  background: rgba(5, 22, 50, .88);
  color: #edf7ff;
  box-shadow: var(--mnv-v242-inner);
}

body.mnv-future-ui:is(.page-route, .page-route_preview) .route-timeline {
  position: relative;
  gap: 26px;
  margin-top: 24px;
  padding-top: 4px;
}

body.mnv-future-ui:is(.page-route, .page-route_preview) .route-timeline::before {
  position: absolute;
  z-index: 0;
  top: 27px;
  right: 9%;
  left: 9%;
  height: 2px;
  background: linear-gradient(90deg, var(--mnv-v242-cyan), var(--mnv-v242-blue) 48%, var(--mnv-v242-violet));
  box-shadow: 0 0 14px rgba(100, 234, 255, .35);
  content: "";
  pointer-events: none;
}

body.mnv-future-ui:is(.page-route, .page-route_preview) .route-step {
  position: relative;
  z-index: 1;
  gap: 13px;
}

body.mnv-future-ui:is(.page-route, .page-route_preview) .step-rail {
  grid-template-columns: 48px minmax(0, 1fr);
  min-height: 74px;
  padding: 5px 12px 5px 0;
  border: 0;
  background: transparent;
}

body.mnv-future-ui:is(.page-route, .page-route_preview) .step-marker {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid var(--mnv-v242-cyan);
  border-radius: 50%;
  background: linear-gradient(145deg, #114588, #0a2452);
  color: #fff;
  box-shadow: 0 0 0 5px rgba(100, 234, 255, .08), 0 0 22px rgba(40, 135, 255, .34);
}

body.mnv-future-ui:is(.page-route, .page-route_preview) .route-step:nth-child(3n) .step-marker {
  border-color: #b377ff;
  background: linear-gradient(145deg, #6b3dc2, #241550);
  box-shadow: 0 0 0 5px rgba(179, 119, 255, .08), 0 0 22px rgba(134, 92, 255, .32);
}

body.mnv-future-ui:is(.page-route, .page-route_preview) .step-marker small {
  display: none;
}

body.mnv-future-ui:is(.page-route, .page-route_preview) .step-marker b {
  font-size: 20px;
}

body.mnv-future-ui:is(.page-route, .page-route_preview) .step-role {
  color: var(--mnv-v242-cyan);
  font-size: 16px;
  font-weight: 880;
}

body.mnv-future-ui:is(.page-route, .page-route_preview) .step-line {
  display: none;
}

body.mnv-future-ui:is(.page-route, .page-route_preview) .video-card {
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(67, 126, 255, .15), transparent 13rem),
    linear-gradient(155deg, rgba(9, 35, 72, .99), rgba(4, 18, 42, .99));
  box-shadow: 0 20px 56px rgba(0, 4, 20, .38), var(--mnv-v242-inner);
}

body.mnv-future-ui:is(.page-route, .page-route_preview) .route-step:first-child .video-card {
  border-color: rgba(255, 198, 90, .74);
  box-shadow: 0 0 0 1px rgba(255, 198, 90, .13), 0 0 30px rgba(255, 177, 47, .14), 0 24px 60px rgba(0, 4, 20, .42);
}

body.mnv-future-ui:is(.page-route, .page-route_preview) .video-thumb {
  position: relative;
  border-bottom: 1px solid rgba(107, 184, 241, .18);
}

body.mnv-future-ui:is(.page-route, .page-route_preview) .route-step:first-child .video-thumb::before {
  position: absolute;
  z-index: 3;
  top: 9px;
  left: 9px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50% 50% 46% 46%;
  background: linear-gradient(145deg, #ffe27d, #ff9f27);
  color: #5c3400;
  content: "1";
  font-weight: 950;
  box-shadow: 0 0 20px rgba(255, 198, 90, .45);
  pointer-events: none;
}

body.mnv-future-ui:is(.page-route, .page-route_preview) .video-body {
  min-height: 315px;
  padding: 19px;
}

body.mnv-future-ui:is(.page-route, .page-route_preview) .video-title-row h2 {
  color: #fff;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.55;
}

body.mnv-future-ui:is(.page-route, .page-route_preview) .reason-block {
  padding: 13px 14px;
  border-radius: 12px;
  background: rgba(2, 15, 36, .65);
  line-height: 1.7;
}

body.mnv-future-ui:is(.page-route, .page-route_preview) .reason-block b {
  display: block;
  margin-bottom: 4px;
  color: var(--mnv-v242-cyan);
  font-size: 11px;
  letter-spacing: .08em;
}

body.mnv-future-ui:is(.page-route, .page-route_preview) .video-actions .button {
  width: 100%;
  min-height: 48px;
}

body.mnv-future-ui:is(.page-route, .page-route_preview) .save-cta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 22px 24px;
  border-color: rgba(100, 234, 255, .32);
  border-radius: 21px;
  background:
    linear-gradient(110deg, rgba(8, 45, 87, .98), rgba(15, 25, 63, .98));
}

/* ========================================================================== */
/* 05, 14 / Video and interactive learning                                    */
/* ========================================================================== */

body.mnv-future-ui:is(.page-watch, .page-study_session) .watch-topline,
body.mnv-future-ui.page-study_session .study-session-head {
  min-height: 104px;
  padding: 21px 25px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 0%, rgba(100, 234, 255, .13), transparent 16rem),
    rgba(6, 26, 57, .91);
}

body.mnv-future-ui:is(.page-watch, .page-study_session) .watch-topline h1 {
  font-size: clamp(23px, 2.2vw, 32px);
}

body.mnv-future-ui:is(.page-watch, .page-study_session) .page-grid,
body.mnv-future-ui.page-study_session .study-session-layout {
  grid-template-columns: minmax(0, 2.15fr) minmax(320px, 342px);
  gap: 24px;
  align-items: start;
}

body.mnv-future-ui:is(.page-watch, .page-study_session) :is(.unified-player, .player-card, .study-session-player-card) {
  border: 1px solid rgba(100, 234, 255, .42);
  border-radius: 14px;
  background: #020817;
  box-shadow: 0 28px 82px rgba(0, 3, 16, .60), 0 0 28px rgba(40, 135, 255, .11);
}

body.mnv-future-ui:is(.page-watch, .page-study_session) .unified-player-body {
  padding: 18px 20px 20px;
  background: linear-gradient(180deg, rgba(8, 27, 57, .96), rgba(4, 16, 37, .98));
}

body.mnv-future-ui:is(.page-watch, .page-study_session) .unified-player-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 15px;
  align-items: center;
}

body.mnv-future-ui:is(.page-watch, .page-study_session) .unified-playback-progress {
  min-height: 10px;
  border-radius: 999px;
  background: #071a38;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .36);
}

body.mnv-future-ui:is(.page-watch, .page-study_session) .unified-player-controls {
  border-color: rgba(111, 185, 239, .17);
  background: rgba(4, 18, 42, .78);
}

body.mnv-future-ui:is(.page-watch, .page-study_session) .unified-player-actions {
  padding: 12px;
  border-radius: 16px;
  background: rgba(5, 22, 49, .93);
}

body.mnv-future-ui:is(.page-watch, .page-study_session) .aside-col,
body.mnv-future-ui.page-study_session .study-session-side {
  top: 20px;
  display: grid;
  gap: 12px;
}

body.mnv-future-ui:is(.page-watch, .page-study_session) .aside-col .side-card,
body.mnv-future-ui.page-study_session .study-session-side > * {
  border-radius: 17px;
  background:
    radial-gradient(circle at 100% 0%, rgba(134, 92, 255, .13), transparent 10rem),
    linear-gradient(150deg, rgba(10, 39, 78, .98), rgba(5, 20, 47, .98));
}

body.mnv-future-ui:is(.page-watch, .page-study_session) .watch-info-list > div {
  min-height: 52px;
  border-bottom: 1px solid rgba(112, 184, 238, .12);
  background: transparent;
}

body.mnv-future-ui:is(.page-watch, .page-study_session) .focus-list {
  padding: 14px 14px 14px 32px;
  border-radius: 13px;
  background: linear-gradient(90deg, rgba(100, 234, 255, .09), rgba(5, 22, 49, .32));
}

body.mnv-future-ui:is(.page-watch, .page-study_session) .feedback-box {
  padding: 19px;
  background: rgba(5, 22, 49, .92);
  color: #f3f9ff;
}

body.mnv-future-ui:is(.page-watch, .page-study_session) .feedback-actions button {
  border-color: rgba(117, 186, 239, .23);
  background: rgba(10, 38, 76, .92);
  color: #e8f4ff;
}

body.mnv-future-ui:is(.page-watch, .page-study_session) .feedback-actions button:hover,
body.mnv-future-ui:is(.page-watch, .page-study_session) .feedback-actions button[aria-pressed="true"] {
  border-color: var(--mnv-v242-cyan);
  background: rgba(40, 103, 255, .30);
  box-shadow: 0 0 20px rgba(40, 135, 255, .17);
}

body.mnv-future-ui:is(.page-watch, .page-study_session) .future-study-dock {
  padding: 12px;
  border-radius: 18px;
  background: rgba(3, 16, 37, .97);
}

/* ========================================================================== */
/* 06, 07, 15 / Diagnosis, problems, handwriting outer chrome                 */
/* ========================================================================== */

body.mnv-future-ui:is(.page-dekiru_route, .page-diagnostic, .page-assessment, .page-practice_lab) :is(.dekiru-flow-head, .diagnostic-head, .assessment-head, .practice-hero, .practice-unified-hero) {
  border-radius: 21px;
  background:
    radial-gradient(circle at 88% 0%, rgba(100, 234, 255, .17), transparent 17rem),
    linear-gradient(118deg, rgba(9, 43, 85, .98), rgba(7, 22, 52, .98));
}

body.mnv-future-ui.page-dekiru_route .dekiru-progress {
  position: relative;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 18px 20px;
  gap: 0;
  border-radius: 20px;
}

body.mnv-future-ui.page-dekiru_route .dekiru-progress::before {
  position: absolute;
  top: 39px;
  right: 9%;
  left: 9%;
  height: 2px;
  background: linear-gradient(90deg, var(--mnv-v242-blue), rgba(100, 234, 255, .22));
  content: "";
  pointer-events: none;
}

body.mnv-future-ui.page-dekiru_route .dekiru-progress li {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

body.mnv-future-ui.page-dekiru_route .dekiru-progress li > span {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

body.mnv-future-ui.page-dekiru_route .dekiru-focus-card,
body.mnv-future-ui.page-dekiru_route .diagnostic-question {
  padding: clamp(22px, 3vw, 34px);
  border-radius: 22px;
}

body.mnv-future-ui.page-dekiru_route .dekiru-choice > span {
  min-height: 58px;
  padding: 14px 17px;
  border-radius: 13px;
  font-size: 15px;
}

body.mnv-future-ui:is(.page-diagnostic, .page-assessment) :is(.diagnostic-shell, .assessment-shell) {
  width: min(1040px, 100%);
  max-width: 1040px;
}

body.mnv-future-ui:is(.page-diagnostic, .page-assessment) :is(.diagnostic-card, .assessment-form) {
  padding: clamp(24px, 4vw, 42px);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 2%, rgba(134, 92, 255, .15), transparent 17rem),
    linear-gradient(145deg, rgba(10, 39, 78, .99), rgba(4, 18, 43, .99));
}

body.mnv-future-ui.page-diagnostic .diagnostic-option > span,
body.mnv-future-ui.page-assessment .assessment-options label > span {
  min-height: 61px;
  padding: 15px 18px;
  border-radius: 13px;
}

body.mnv-future-ui.page-diagnostic .diagnostic-option input:checked + span,
body.mnv-future-ui.page-assessment .assessment-options input:checked + span {
  background: linear-gradient(105deg, rgba(30, 106, 255, .46), rgba(124, 67, 255, .27));
}

body.mnv-future-ui.page-practice_lab .practice-unified-workspace {
  grid-template-columns: minmax(0, 2.05fr) minmax(310px, 1fr);
  grid-template-areas: "answer learning";
  gap: 17px;
}

body.mnv-future-ui.page-practice_lab .practice-unified-learning {
  grid-area: learning;
}

body.mnv-future-ui.page-practice_lab .practice-unified-answer {
  grid-area: answer;
}

body.mnv-future-ui.page-practice_lab :is(.practice-unified-learning, .practice-unified-answer) {
  border-radius: 21px;
  background:
    radial-gradient(circle at 100% 0%, rgba(78, 129, 255, .13), transparent 14rem),
    linear-gradient(150deg, rgba(9, 36, 74, .99), rgba(4, 18, 42, .99));
}

body.mnv-future-ui.page-practice_lab .practice-unified-pane-head {
  padding-bottom: 17px;
  border-bottom: 1px solid rgba(112, 184, 238, .14);
}

body.mnv-future-ui.page-practice_lab .practice-unified-mission {
  display: grid;
  gap: 9px;
}

body.mnv-future-ui.page-practice_lab .practice-unified-mission article {
  min-height: 91px;
  padding: 14px;
  border: 1px solid rgba(111, 185, 239, .16);
  border-radius: 14px;
  background: rgba(3, 17, 40, .55);
}

body.mnv-future-ui.page-practice_lab .practice-unified-mission article > span {
  color: var(--mnv-v242-cyan);
  font-size: 9px;
  letter-spacing: .12em;
}

body.mnv-future-ui.page-practice_lab .practice-question-head {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(112, 184, 238, .14);
}

body.mnv-future-ui.page-practice_lab .practice-choice-card {
  padding: clamp(20px, 3vw, 29px);
  border-radius: 18px;
  background: rgba(3, 17, 40, .64);
}

body.mnv-future-ui.page-practice_lab .practice-choice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.mnv-future-ui.page-practice_lab .practice-choice-grid label > span {
  min-height: 68px;
  border-radius: 13px;
}

body.mnv-future-ui.page-practice_lab .handwriting-toolbar,
body.mnv-future-ui.page-practice_lab .handwriting-zoom-tools {
  border-color: rgba(100, 234, 255, .26);
  background: linear-gradient(90deg, #092b55, #0b2148);
  box-shadow: 0 10px 30px rgba(0, 4, 18, .22);
}

body.mnv-future-ui.page-practice_lab .handwriting-problem-print {
  border: 1px solid #b9d3e7;
  border-radius: 15px;
  background: #f8fcff;
  color: #153553;
}

body.mnv-future-ui.page-practice_lab .handwriting-problem-print :is(span, strong, p, b) {
  color: #153553;
}

body.mnv-future-ui.page-practice_lab .practice-hints {
  border: 1px solid rgba(255, 198, 90, .26);
  border-radius: 16px;
  background: rgba(82, 57, 10, .30);
}

body.mnv-future-ui.page-practice_lab .practice-confidence {
  border-color: rgba(111, 185, 239, .18);
  border-radius: 15px;
  background: rgba(3, 17, 40, .54);
}

body.mnv-future-ui.page-practice_lab .practice-confidence input:checked + span {
  border-color: var(--mnv-v242-cyan);
  background: rgba(38, 103, 255, .31);
  color: #fff;
}

/* Completion copies reference 15's brighter success scene without creating
 * fictional content or an overlay over any application controls. */
body.mnv-future-ui :is(.practice-complete, .standard-review-complete, .diagnostic-complete, .dekiru-outcome-card[data-done-card-source]) {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 58px);
  border-color: rgba(117, 246, 207, .52);
  border-radius: 27px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 198, 90, .31), transparent 17rem),
    radial-gradient(circle at 88% 35%, rgba(100, 234, 255, .22), transparent 19rem),
    linear-gradient(145deg, rgba(8, 71, 87, .98), rgba(5, 28, 65, .98));
  box-shadow: 0 0 40px rgba(71, 219, 168, .14), 0 30px 82px rgba(0, 7, 24, .46);
}

body.mnv-future-ui :is(.practice-complete, .standard-review-complete, .diagnostic-complete, .dekiru-outcome-card[data-done-card-source])::after {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 18%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 78% 22%, #fff0a8 0 2px, transparent 3px),
    radial-gradient(circle at 88% 72%, #7cf1ff 0 1px, transparent 2px),
    radial-gradient(circle at 21% 81%, #ad86ff 0 2px, transparent 3px);
  content: "";
  opacity: .74;
  pointer-events: none;
}

body.mnv-future-ui :is(.practice-complete, .standard-review-complete, .diagnostic-complete, .dekiru-outcome-card[data-done-card-source])::before {
  position: absolute;
  z-index: 0;
  right: clamp(12px, 5vw, 64px);
  bottom: -18px;
  width: clamp(128px, 18vw, 218px);
  aspect-ratio: 1;
  background: url("../mnv-ai-companion-v242.webp") center / contain no-repeat;
  content: "";
  opacity: .94;
  pointer-events: none;
}

body.mnv-future-ui :is(.practice-complete, .standard-review-complete, .diagnostic-complete, .dekiru-outcome-card[data-done-card-source]) > * {
  position: relative;
  z-index: 1;
}

body.mnv-future-ui.page-diagnostic_result .diagnostic-result-shell {
  display: grid;
  width: min(1120px, 100%);
  margin-inline: auto;
  gap: 16px;
}

body.mnv-future-ui.page-diagnostic_result .diagnostic-result-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 188px;
  gap: 24px;
  min-height: 218px;
  padding: 31px 34px;
  align-items: center;
  overflow: hidden;
  border-radius: 24px;
  background:
    url("../mnv-ai-companion-v242.webp") calc(100% - 194px) 68% / 122px auto no-repeat,
    radial-gradient(circle at 82% 18%, rgba(100, 234, 255, .20), transparent 18rem),
    linear-gradient(125deg, #0a3b77, #111d50);
}

body.mnv-future-ui.page-diagnostic_result .diagnostic-result-hero > div:first-child {
  padding-right: 118px;
}

body.mnv-future-ui.page-diagnostic_result .diagnostic-result-hero h1 {
  margin: 9px 0 8px;
  font-size: clamp(27px, 3vw, 42px);
}

body.mnv-future-ui.page-diagnostic_result .diagnostic-overall {
  display: grid;
  min-height: 154px;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(100, 234, 255, .48);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(9, 37, 78, .96), rgba(3, 18, 42, .98));
  box-shadow: 0 0 0 8px rgba(100, 234, 255, .06), 0 0 35px rgba(40, 135, 255, .24);
}

body.mnv-future-ui.page-diagnostic_result .diagnostic-overall > strong {
  color: #fff;
  font-size: 44px;
  line-height: 1;
}

body.mnv-future-ui.page-diagnostic_result .diagnostic-result-note {
  border: 1px solid rgba(100, 234, 255, .22);
  border-radius: 16px;
  background: rgba(5, 22, 49, .88);
  color: #d8e9f8;
}

body.mnv-future-ui.page-diagnostic_result :is(.diagnostic-priority-section, .diagnostic-map-card, .diagnostic-basis-card, .diagnostic-plan-cta) {
  padding: clamp(22px, 3vw, 30px);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(93, 87, 255, .11), transparent 15rem),
    linear-gradient(145deg, rgba(10, 39, 78, .98), rgba(5, 21, 48, .98));
}

body.mnv-future-ui.page-diagnostic_result .diagnostic-priority-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body.mnv-future-ui.page-diagnostic_result .diagnostic-priority-card {
  min-height: 155px;
  padding: 18px;
  border-radius: 15px;
}

body.mnv-future-ui.page-diagnostic_result .priority-number {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #2189ff, #7656ff);
  color: #fff;
  box-shadow: 0 0 19px rgba(40, 135, 255, .29);
}

body.mnv-future-ui.page-diagnostic_result .diagnostic-skill-row {
  min-height: 98px;
  padding: 17px;
  border: 1px solid rgba(111, 185, 239, .14);
  border-radius: 14px;
  background: rgba(3, 17, 40, .49);
}

body.mnv-future-ui.page-diagnostic_result .diagnostic-plan-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-color: rgba(100, 234, 255, .35);
}

/* ========================================================================== */
/* 08, 17 / Review, calendar-like records and study plan                      */
/* ========================================================================== */

body.mnv-future-ui.page-dekiru_review .standard-review-layout {
  grid-template-columns: minmax(0, 1fr) 294px;
  gap: 18px;
}

body.mnv-future-ui.page-dekiru_review .standard-review-hero-v1324 {
  min-height: 162px;
  padding: 28px;
  border-radius: 23px;
}

body.mnv-future-ui.page-dekiru_review .standard-review-today-count {
  min-width: 126px;
  border-color: rgba(100, 234, 255, .35);
  background: rgba(3, 17, 40, .52);
  box-shadow: 0 0 24px rgba(40, 135, 255, .14);
}

body.mnv-future-ui.page-dekiru_review .standard-review-flow {
  border-color: rgba(111, 185, 239, .19);
  border-radius: 20px;
  background: rgba(5, 22, 49, .88);
}

body.mnv-future-ui.page-dekiru_review .standard-review-list-v1324 {
  display: grid;
  gap: 12px;
}

body.mnv-future-ui.page-dekiru_review .standard-review-task-card {
  position: relative;
  grid-template-columns: 52px minmax(0, 1fr) minmax(112px, auto);
  border-radius: 18px;
}

body.mnv-future-ui.page-dekiru_review .standard-review-task-card.is-primary {
  border-color: rgba(100, 234, 255, .45);
  box-shadow: 0 0 27px rgba(40, 135, 255, .12), 0 18px 48px rgba(0, 5, 22, .31);
}

body.mnv-future-ui.page-study_plan .study-plan-layout {
  grid-template-columns: minmax(0, 1fr) 292px;
}

body.mnv-future-ui.page-study_plan .study-plan-hero {
  min-height: 142px;
  padding: 27px 29px;
  border-radius: 22px;
  background:
    url("../mnv-ai-companion-v242.webp") calc(100% - 54px) 58% / 118px auto no-repeat,
    radial-gradient(circle at 89% 10%, rgba(255, 198, 90, .18), transparent 17rem),
    radial-gradient(circle at 70% 70%, rgba(100, 234, 255, .16), transparent 22rem),
    linear-gradient(120deg, #0a356e, #101d4d);
  padding-right: 190px;
}

body.mnv-future-ui.page-study_plan .study-plan-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
}

body.mnv-future-ui.page-study_plan .study-plan-summary > div {
  min-height: 105px;
  padding: 18px;
  border-radius: 17px;
}

body.mnv-future-ui.page-study_plan .study-plan-timeline {
  position: relative;
  padding-top: 7px;
}

body.mnv-future-ui.page-study_plan .study-plan-day-card {
  border-radius: 18px;
  background:
    linear-gradient(140deg, rgba(10, 39, 78, .98), rgba(5, 21, 48, .98));
}

body.mnv-future-ui.page-study_plan .study-plan-day.is-today .study-plan-day-card {
  border-color: rgba(255, 198, 90, .55);
  background:
    linear-gradient(105deg, rgba(69, 48, 18, .42), rgba(10, 39, 78, .98) 38%, rgba(5, 21, 48, .98));
  box-shadow: 0 0 28px rgba(255, 198, 90, .10), 0 18px 48px rgba(0, 5, 22, .30);
}

body.mnv-future-ui.page-study_plan .study-plan-task-list li {
  min-height: 62px;
  border-radius: 12px;
}

body.mnv-future-ui.page-learning_records .record-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.mnv-future-ui.page-learning_records .record-grid > div {
  padding: 20px;
  border-radius: 17px;
  background:
    radial-gradient(circle at 100% 0%, rgba(100, 234, 255, .12), transparent 9rem),
    linear-gradient(145deg, rgba(10, 39, 78, .98), rgba(5, 21, 48, .98));
}

/* ========================================================================== */
/* 19 / Child and family application                                          */
/* ========================================================================== */

body.mnv-future-ui.shell-child {
  background:
    radial-gradient(circle at 88% 5%, rgba(83, 178, 255, .34), transparent 27rem),
    linear-gradient(155deg, #edf8ff, #f5f1ff 62%, #ecf6ff);
}

body.mnv-future-ui.shell-child .child-home-hero {
  min-height: 215px;
  overflow: hidden;
  border-radius: 27px;
  background:
    url("../mnv-ai-companion-v242.webp") calc(100% - 24px) 58% / 155px auto no-repeat,
    radial-gradient(circle at 86% 34%, rgba(118, 87, 255, .29), transparent 16rem),
    linear-gradient(120deg, #075eae, #167dce 52%, #6c5ee6);
  padding-right: 178px;
  color: #fff;
  box-shadow: 0 22px 58px rgba(37, 101, 168, .25);
}

body.mnv-future-ui.shell-child .child-home-hero :is(h1, h2, p, span, strong) {
  color: #fff;
}

body.mnv-future-ui.shell-child .child-today-board {
  border-radius: 24px;
  background: rgba(255, 255, 255, .97);
}

body.mnv-future-ui.shell-child .child-today-task,
body.mnv-future-ui.shell-child .child-assignment-card {
  border-radius: 21px;
  background: #fff;
}

body.mnv-future-ui.shell-child .child-home-quick-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

body.mnv-future-ui.shell-child .child-home-quick-nav > a {
  min-height: 104px;
  border-radius: 20px;
}

body.mnv-future-ui.shell-family .family-hero {
  min-height: 166px;
  padding: 28px;
  border-radius: 25px;
  background:
    radial-gradient(circle at 88% 12%, rgba(83, 178, 255, .28), transparent 18rem),
    linear-gradient(125deg, #fff, #eaf6ff 60%, #efeaff);
}

body.mnv-future-ui.shell-family :is(.family-child-card, .guardian-ring-card, .guardian-week-card, .guardian-plan-card, .guardian-activity-calendar) {
  border-radius: 21px;
}

/* ========================================================================== */
/* 10, 18 / Organization and administrator                                    */
/* ========================================================================== */

body.mnv-future-ui.organization-app .org-sidebar {
  width: auto;
  padding: 24px 16px;
  background:
    radial-gradient(circle at 15% 0%, rgba(69, 139, 255, .17), transparent 17rem),
    linear-gradient(180deg, #031027, #051b39);
}

body.mnv-future-ui.organization-app .org-brand {
  padding: 0 5px 20px;
  border-bottom: 1px solid rgba(114, 184, 238, .14);
}

body.mnv-future-ui.organization-app .org-switcher {
  border-color: rgba(111, 185, 239, .20);
  border-radius: 14px;
  background: rgba(7, 30, 62, .90);
}

body.mnv-future-ui.organization-app .org-nav {
  gap: 4px;
}

body.mnv-future-ui.organization-app .org-nav a {
  min-height: 43px;
  padding: 9px 11px;
  border-radius: 12px;
  font-size: 13px;
}

body.mnv-future-ui.organization-app .org-main {
  min-width: 0;
}

body.mnv-future-ui.organization-app.page-index .org-main {
  background:
    radial-gradient(circle at 93% 0%, rgba(61, 126, 255, .18), transparent 30rem),
    url("../mnv-command-skyline-v242.webp") center top / cover scroll,
    linear-gradient(145deg, #031027, #061936 58%, #09234b);
}

body.mnv-future-ui.organization-app .org-page-head {
  min-height: 105px;
  align-items: center;
  border-radius: 19px;
}

body.mnv-future-ui.organization-app .org-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

body.mnv-future-ui.organization-app .org-kpi {
  min-height: 126px;
  padding: 20px;
  border-radius: 17px;
}

body.mnv-future-ui.organization-app.page-index .org-kpi {
  background:
    radial-gradient(circle at 100% 0%, rgba(89, 92, 255, .17), transparent 10rem),
    linear-gradient(145deg, rgba(11, 42, 83, .98), rgba(5, 22, 49, .98));
}

body.mnv-future-ui.organization-app .org-kpi > strong {
  margin: 9px 0 5px;
  font-size: clamp(23px, 2.3vw, 34px);
  font-variant-numeric: tabular-nums;
}

body.mnv-future-ui.organization-app .org-card {
  border-radius: 18px;
}

body.mnv-future-ui.organization-app.page-index .org-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(100, 234, 255, .10), transparent 15rem),
    linear-gradient(145deg, rgba(10, 39, 78, .98), rgba(5, 21, 48, .98));
}

body.mnv-future-ui.organization-app:not(.page-index) .org-main {
  background:
    radial-gradient(circle at 95% 0%, rgba(72, 173, 255, .19), transparent 25rem),
    linear-gradient(155deg, #f6fbff, #eaf4ff 66%, #f1edff);
}

body.mnv-future-ui.organization-app:not(.page-index) .org-card,
body.mnv-future-ui.organization-app:not(.page-index) .org-kpi {
  border-color: #c3d9e9;
  border-radius: 18px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 14px 38px rgba(27, 77, 125, .10);
}

body.mnv-future-ui.organization-app .org-table-wrap,
body.mnv-future-ui.shell-admin .table-scroll {
  overflow-x: auto;
  border-radius: 14px;
}

body.mnv-future-ui.organization-app .org-table,
body.mnv-future-ui.shell-admin .data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

body.mnv-future-ui.organization-app .org-table :is(th, td),
body.mnv-future-ui.shell-admin .data-table :is(th, td) {
  min-height: 48px;
  padding: 13px 14px;
}

body.mnv-future-ui.organization-app .org-search-toolbar,
body.mnv-future-ui.organization-app .org-form-grid,
body.mnv-future-ui.shell-admin .settings-form {
  gap: 12px;
}

body.mnv-future-ui.organization-app:not(.page-index) :is(.org-search-toolbar, .org-form-grid) :is(input, select, textarea) {
  border-color: #aac8de;
  background: #fff;
  color: #173757;
}

body.mnv-future-ui.organization-app .org-action-list {
  gap: 9px;
}

body.mnv-future-ui.organization-app .org-action {
  min-height: 66px;
  border-radius: 13px;
}

body.mnv-future-ui.organization-app .org-learning-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

body.mnv-future-ui.organization-app .org-learning-card {
  border-radius: 17px;
}

body.mnv-future-ui.organization-app .org-plan-card {
  position: relative;
  overflow: hidden;
}

body.mnv-future-ui.organization-app .org-plan-card.recommended {
  border-color: #6b8cff;
  box-shadow: 0 0 0 2px rgba(83, 105, 255, .10), 0 19px 48px rgba(48, 82, 177, .17);
}

body.mnv-future-ui.organization-app .org-usage-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body.mnv-future-ui.organization-app .org-usage-grid > div,
body.mnv-future-ui.organization-app .org-credential-status-summary > div {
  border-radius: 13px;
}

/* QR/PIN issuance: only the surrounding command surfaces are styled. */
body.mnv-future-ui.organization-app :is(.org-manual-credential, .org-credential-upload, .org-credential-preview, .org-credential-issued) {
  position: relative;
  overflow: visible;
}

body.mnv-future-ui.organization-app .org-credential-status-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body.mnv-future-ui.organization-app .org-credential-status-summary > div {
  min-height: 82px;
  padding: 14px;
  border: 1px solid #c8dcea;
  background: #f8fbff;
}

body.mnv-future-ui.organization-app.page-index .org-credential-status-summary > div {
  border-color: rgba(111, 185, 239, .18);
  background: rgba(3, 17, 40, .52);
}

body.mnv-future-ui.organization-app .assignment-save-progress {
  overflow: hidden;
  border-radius: 21px;
  box-shadow: 0 20px 56px rgba(32, 65, 133, .18);
}

body.mnv-future-ui.organization-app .assignment-save-progress__steps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.mnv-future-ui.organization-app .assignment-save-progress__facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Personal contract screens historically resolve to the public shell even
 * after login. Qualify by page name so marketing pages are never recolored. */
body.mnv-future-ui:is(.page-subscription, .page-cancel, .page-cancel_subscription, .page-success).is-authenticated {
  min-height: 100dvh;
  background:
    linear-gradient(180deg, rgba(2, 8, 24, .78), rgba(2, 8, 20, .96)),
    url("../mnv-command-skyline-v242.webp") center top / cover scroll,
    var(--mnv-v242-bg);
  color: var(--mnv-v242-ink);
}

body.mnv-future-ui.page-subscription.is-authenticated main.container {
  width: min(1450px, calc(100% - 28px));
  max-width: none;
}

body.mnv-future-ui.page-subscription.is-authenticated .dash-layout {
  grid-template-columns: 235px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

body.mnv-future-ui.page-subscription.is-authenticated .desktop-dash-nav {
  position: sticky;
  top: 88px;
  max-height: calc(100dvh - 108px);
  overflow-y: auto;
  border: 1px solid rgba(111, 185, 239, .19);
  border-radius: 20px;
  background:
    radial-gradient(circle at 15% 0%, rgba(69, 139, 255, .16), transparent 14rem),
    linear-gradient(180deg, rgba(4, 18, 43, .98), rgba(6, 25, 55, .98));
  box-shadow: 0 18px 48px rgba(0, 4, 18, .30);
}

body.mnv-future-ui.page-subscription.is-authenticated .desktop-dash-nav > a {
  color: #aebfd4;
}

body.mnv-future-ui.page-subscription.is-authenticated .desktop-dash-nav > a.active {
  border-color: rgba(100, 234, 255, .36);
  background: linear-gradient(90deg, rgba(37, 104, 255, .32), rgba(113, 78, 255, .15));
  color: #fff;
  box-shadow: inset 3px 0 var(--mnv-v242-cyan);
}

body.mnv-future-ui:is(.page-subscription, .page-cancel, .page-cancel_subscription, .page-success).is-authenticated :is(.panel, .price-card) {
  border: 1px solid rgba(111, 185, 239, .20);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(93, 87, 255, .12), transparent 14rem),
    linear-gradient(145deg, rgba(10, 39, 78, .98), rgba(5, 21, 48, .98));
  color: #f5faff;
  box-shadow: 0 17px 46px rgba(0, 5, 22, .29);
}

body.mnv-future-ui:is(.page-subscription, .page-cancel, .page-cancel_subscription, .page-success).is-authenticated :is(.panel, .price-card) :is(h1, h2, h3, strong, label, span) {
  color: #f5faff;
}

body.mnv-future-ui:is(.page-subscription, .page-cancel, .page-cancel_subscription, .page-success).is-authenticated :is(.panel, .price-card) :is(p, small, .muted) {
  color: #afc2d7;
}

body.mnv-future-ui.page-subscription.is-authenticated .watch-info-list > div {
  min-height: 55px;
  border-color: rgba(111, 185, 239, .13);
  background: rgba(3, 17, 40, .47);
}

body.mnv-future-ui.page-subscription.is-authenticated :is(.table-scroll, .data-table) {
  border-color: rgba(111, 185, 239, .18);
  background: #071b36;
  color: #eff7ff;
}

body.mnv-future-ui.page-subscription.is-authenticated .data-table th {
  background: #0c2a50;
  color: #bfd2e5;
}

body.mnv-future-ui.page-subscription.is-authenticated .data-table td {
  border-color: rgba(111, 185, 239, .12);
  color: #edf7ff;
}

body.mnv-future-ui.page-subscription.is-authenticated .danger-zone {
  border-color: rgba(255, 113, 142, .32);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 113, 142, .10), transparent 13rem),
    linear-gradient(145deg, rgba(60, 22, 39, .96), rgba(18, 20, 44, .98));
}

body.mnv-future-ui.shell-admin .admin-shell {
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 19px;
}

body.mnv-future-ui.shell-admin .admin-sidebar {
  top: 86px;
  max-height: calc(100dvh - 104px);
  overflow-y: auto;
  border-radius: 19px;
}

body.mnv-future-ui.shell-admin .admin-main {
  min-width: 0;
}

body.mnv-future-ui.shell-admin .admin-page-head {
  min-height: 102px;
  padding: 21px 24px;
  border: 1px solid rgba(111, 185, 239, .19);
  border-radius: 19px;
  background: rgba(8, 29, 61, .86);
}

body.mnv-future-ui.shell-admin .kpi-row {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 11px;
}

body.mnv-future-ui.shell-admin .kpi-card {
  min-height: 119px;
  padding: 18px;
  border-radius: 16px;
}

body.mnv-future-ui.shell-admin .admin-card {
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(84, 121, 255, .11), transparent 14rem),
    linear-gradient(145deg, rgba(10, 39, 78, .98), rgba(5, 21, 48, .98));
}

body.mnv-future-ui.shell-admin :is(.admin-cols-2, .admin-cols-3) {
  gap: 14px;
}

/* Errors and recoveries use explicit semantic framing, not color alone. */
body.mnv-future-ui:is(.shell-learner, .shell-immersive, .shell-admin) .alert.error,
body.mnv-future-ui.organization-app .alert.error {
  position: relative;
  padding-left: 50px;
  border-color: rgba(255, 113, 142, .58);
  border-radius: 15px;
  background: linear-gradient(100deg, #471826, #2c1421);
  color: #ffd5de;
}

body.mnv-future-ui:is(.shell-learner, .shell-immersive, .shell-admin) .alert.error::before,
body.mnv-future-ui.organization-app .alert.error::before {
  position: absolute;
  top: 50%;
  left: 17px;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  content: "!";
  font-weight: 950;
  transform: translateY(-50%);
}

body.mnv-future-ui .child-search-error-card,
body.mnv-future-ui .future-status-panel[data-state="warning"] {
  border-color: rgba(255, 198, 90, .44);
  border-radius: 22px;
  background:
    radial-gradient(circle at 86% 0%, rgba(255, 198, 90, .16), transparent 17rem),
    linear-gradient(140deg, rgba(63, 43, 12, .96), rgba(9, 29, 61, .98));
  color: #fff5d6;
}

/* ========================================================================== */
/* Responsive / reference 19                                                  */
/* ========================================================================== */

@media (max-width: 1500px) and (min-width: 1181px) {
  body.mnv-future-ui:is(.shell-learner, .shell-immersive) .site-header {
    width: 284px;
  }

  body.mnv-future-ui:is(.shell-learner, .shell-immersive) main.container.shell-container {
    width: calc(100% - 312px);
    margin-left: 296px;
  }

  body.mnv-future-ui:is(.shell-learner, .shell-immersive) > footer {
    margin-left: 284px;
  }

  body.mnv-future-ui.page-mypage .today-learning-card {
    grid-template-columns: minmax(0, 1fr) minmax(210px, .72fr);
  }

  body.mnv-future-ui.page-mypage .today-learning-action {
    grid-column: 1 / -1;
    justify-self: end;
  }

  body.mnv-future-ui:is(.page-route, .page-route_preview) .route-timeline {
    gap: 24px;
  }

  body.mnv-future-ui:is(.page-route, .page-route_preview) .video-body {
    min-height: 340px;
    padding: 16px;
  }

  body.mnv-future-ui.shell-admin .kpi-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  body.mnv-future-ui:is(.shell-learner, .shell-immersive) {
    background-attachment: scroll;
  }

  body.mnv-future-ui:is(.shell-learner, .shell-immersive) main.container.shell-container {
    width: min(100% - 28px, 1180px);
    margin-inline: auto;
    padding-top: 18px;
  }

  body.mnv-future-ui.shell-learner .dash-layout,
  body.mnv-future-ui.page-dekiru_review .standard-review-layout,
  body.mnv-future-ui.page-study_plan .study-plan-layout,
  body.mnv-future-ui:is(.page-favorites, .page-watch_history, .page-feedback_history, .page-learning_records) .dash-layout {
    grid-template-columns: 1fr;
  }

  body.mnv-future-ui.shell-learner .dash-layout > .desktop-dash-nav {
    grid-column: auto;
  }

  body.mnv-future-ui.page-mypage .dash-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.mnv-future-ui:is(.page-route, .page-route_preview) .route-timeline {
    display: grid;
    grid-template-columns: repeat(3, minmax(290px, 1fr));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 3px 17px;
  }

  body.mnv-future-ui:is(.page-route, .page-route_preview) .route-step {
    scroll-snap-align: start;
  }

  body.mnv-future-ui:is(.page-watch, .page-study_session) .page-grid,
  body.mnv-future-ui.page-study_session .study-session-layout {
    grid-template-columns: minmax(0, 1fr) 290px;
  }

  body.mnv-future-ui.organization-app .org-kpis,
  body.mnv-future-ui.page-mypage .stat-cards,
  body.mnv-future-ui.page-study_plan .study-plan-summary,
  body.mnv-future-ui.page-learning_records .record-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.mnv-future-ui.shell-admin .admin-shell {
    grid-template-columns: 1fr;
  }

  body.mnv-future-ui.shell-admin .admin-sidebar {
    position: static;
    max-height: none;
  }
}

@media (max-width: 900px) {
  body.mnv-future-ui:is(.shell-learner, .shell-immersive) .mf-journey-rail {
    overflow-x: auto;
    padding: 12px;
  }

  body.mnv-future-ui:is(.shell-learner, .shell-immersive) .mf-journey-rail ol {
    min-width: 620px;
  }

  body.mnv-future-ui.page-mypage .today-learning-card {
    grid-template-columns: 1fr;
    padding: 23px;
  }

  body.mnv-future-ui.page-mypage .today-learning-action {
    grid-column: auto;
    width: 100%;
    justify-self: stretch;
  }

  body.mnv-future-ui.page-mypage .next-card {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  body.mnv-future-ui.page-mypage .next-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.mnv-future-ui:is(.page-watch, .page-study_session) .page-grid,
  body.mnv-future-ui.page-study_session .study-session-layout {
    grid-template-columns: 1fr;
  }

  body.mnv-future-ui:is(.page-watch, .page-study_session) .aside-col,
  body.mnv-future-ui.page-study_session .study-session-side {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.mnv-future-ui.page-practice_lab .practice-unified-workspace {
    grid-template-columns: 1fr;
    grid-template-areas:
      "learning"
      "answer";
  }

  body.mnv-future-ui.page-practice_lab .practice-unified-learning {
    order: 0;
  }

  body.mnv-future-ui.page-practice_lab .practice-unified-answer {
    order: 1;
  }

  body.mnv-future-ui.organization-app .org-learning-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.mnv-future-ui.organization-app .org-usage-grid,
  body.mnv-future-ui.organization-app .org-credential-status-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.mnv-future-ui.shell-admin .kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.mnv-future-ui.page-subscription.is-authenticated .dash-layout {
    grid-template-columns: 1fr;
  }

  body.mnv-future-ui.page-subscription.is-authenticated .desktop-dash-nav {
    position: static;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
  }
}

@media (max-width: 680px) {
  /* Reference 19 is a bright mobile workplane even for a normal learner.
   * Keep only the greeting/mission scene dark and make every reading card
   * explicitly light with dark copy. */
  body.mnv-future-ui.shell-learner.page-mypage {
    background:
      radial-gradient(circle at 92% 2%, rgba(91, 166, 255, .25), transparent 20rem),
      radial-gradient(circle at 8% 26%, rgba(141, 104, 255, .12), transparent 17rem),
      linear-gradient(160deg, #f7fbff, #eef4ff 55%, #f2efff);
    color: #143451;
  }

  body.mnv-future-ui.shell-learner.page-mypage main.container.shell-container {
    color: #143451;
  }

  body.mnv-future-ui.shell-learner.page-mypage :is(.dash-section-head, .section-heading) :is(h1, h2, h3, strong) {
    color: #143451;
  }

  body.mnv-future-ui.shell-learner.page-mypage :is(.dash-section-head, .section-heading) :is(p, span, small, .muted) {
    color: #61778d;
  }

  body.mnv-future-ui.shell-learner.page-mypage :is(
    .today-learning-card,
    .stat-card,
    .next-card,
    .route-card-s,
    .dash-side .side-card,
    .panel:not(.dash-greet),
    .mobile-mypage-menu
  ) {
    border-color: #c8dbea;
    background: rgba(255, 255, 255, .97);
    color: #143451;
    box-shadow: 0 14px 38px rgba(28, 78, 126, .10);
  }

  body.mnv-future-ui.shell-learner.page-mypage :is(
    .today-learning-card,
    .stat-card,
    .next-card,
    .route-card-s,
    .dash-side .side-card,
    .panel:not(.dash-greet),
    .mobile-mypage-menu
  ) :is(h1, h2, h3, h4, strong, label, legend, a:not(.button)) {
    color: #143451;
  }

  body.mnv-future-ui.shell-learner.page-mypage :is(
    .today-learning-card,
    .stat-card,
    .next-card,
    .route-card-s,
    .dash-side .side-card,
    .panel:not(.dash-greet),
    .mobile-mypage-menu
  ) :is(p, small, .muted, .rc-meta, dt, span:not(.chip):not(.status-chip):not(.icon-bubble)) {
    color: #61778d;
  }

  body.mnv-future-ui.shell-learner.page-mypage .today-learning-card {
    background:
      radial-gradient(circle at 100% 0%, rgba(87, 180, 255, .16), transparent 13rem),
      #fff;
  }

  body.mnv-future-ui.shell-learner.page-mypage .today-learning-card :is(h2, dd) {
    color: #143451;
  }

  body.mnv-future-ui.shell-learner.page-mypage .today-learning-eyebrow {
    color: #176ddd;
  }

  body.mnv-future-ui.shell-learner.page-mypage .today-learning-metrics {
    border-color: #d5e4ef;
    background: #f4f9ff;
  }

  body.mnv-future-ui.shell-learner.page-mypage .today-learning-metrics > div {
    border-color: #dce8f2;
  }

  body.mnv-future-ui.shell-learner.page-mypage .stat-card {
    background:
      radial-gradient(circle at 100% 0%, rgba(68, 151, 255, .13), transparent 9rem),
      #fff;
  }

  body.mnv-future-ui.shell-learner.page-mypage .stat-card .stat-text > span {
    color: #61778d;
  }

  body.mnv-future-ui.shell-learner.page-mypage .stat-card .stat-text > strong,
  body.mnv-future-ui.shell-learner.page-mypage .stat-card .stat-text > strong small {
    color: #143451;
  }

  body.mnv-future-ui.shell-learner.page-mypage .next-card {
    border-color: #9fc8e7;
    background:
      radial-gradient(circle at 100% 0%, rgba(87, 180, 255, .16), transparent 15rem),
      #fff;
  }

  body.mnv-future-ui.shell-learner.page-mypage .next-card .next-body h3 {
    color: #143451;
  }

  body.mnv-future-ui.shell-learner.page-mypage .route-card-s,
  body.mnv-future-ui.shell-learner.page-mypage .dash-side .side-card {
    background: #fff;
  }

  body.mnv-future-ui.shell-learner.page-mypage .dash-side .watch-info-list > div {
    border-color: #dde9f2;
    background: #f7fbff;
  }

  body.mnv-future-ui.shell-learner.page-mypage .mobile-mypage-menu > summary {
    color: #143451;
  }

  body.mnv-future-ui.shell-learner.page-mypage .mobile-mypage-menu-grid a {
    border-color: #d2e2ee;
    background: #f8fbff;
    color: #2f4e69;
  }

  body.mnv-future-ui.shell-learner.page-mypage .mobile-mypage-menu-grid a.is-active {
    border-color: #7fb6e3;
    background: #e6f2ff;
    color: #155fca;
    box-shadow: inset 0 3px #2583ef;
  }

  body.mnv-future-ui.shell-learner.page-mypage .progress-bar {
    background: #dbe8f3;
  }

  body.mnv-future-ui.shell-learner.page-mypage .pricing-teaser {
    border-color: #a9cae4;
    background: linear-gradient(110deg, #eef8ff, #f3efff);
  }

  body.mnv-future-ui:is(.shell-learner, .shell-immersive) main.container.shell-container {
    width: min(100% - 18px, 680px);
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }

  body.mnv-future-ui:is(.shell-learner, .shell-immersive)::after {
    width: 27rem;
    height: 27rem;
    top: -10rem;
    right: -14rem;
  }

  body.mnv-future-ui.shell-learner .dash-layout > .desktop-dash-nav {
    display: none;
  }

  body.mnv-future-ui.shell-learner .dash-layout > .mobile-mypage-menu {
    display: block;
    border-color: rgba(111, 185, 239, .22);
    background: rgba(5, 22, 49, .94);
    color: #fff;
  }

  body.mnv-future-ui.shell-learner .mobile-mypage-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.mnv-future-ui.shell-learner .mobile-mypage-menu-grid a {
    min-height: 78px;
    border-color: rgba(111, 185, 239, .18);
    background: rgba(8, 31, 65, .88);
    color: #eaf5ff;
  }

  body.mnv-future-ui.page-mypage .dash-greet {
    padding: 21px;
    align-items: stretch;
    background:
      url("../mnv-ai-companion-v242.webp") calc(100% - 14px) 12px / 72px auto no-repeat,
      radial-gradient(circle at 91% 20%, rgba(100, 234, 255, .22), transparent 16rem),
      linear-gradient(118deg, rgba(8, 40, 82, .98), rgba(10, 25, 59, .98));
  }

  body.mnv-future-ui.page-mypage .dash-greet > div:first-child {
    padding-right: 66px;
  }

  body.mnv-future-ui.page-mypage .plan-chip-card {
    min-width: 0;
  }

  body.mnv-future-ui.page-mypage .stat-cards,
  body.mnv-future-ui.page-learning_records .record-grid,
  body.mnv-future-ui.page-study_plan .study-plan-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.mnv-future-ui.page-mypage .stat-card {
    min-height: 111px;
    padding: 15px;
  }

  body.mnv-future-ui.page-mypage .stat-card .stat-text > strong {
    font-size: 25px;
  }

  body.mnv-future-ui.page-mypage .next-card {
    grid-template-columns: 1fr;
  }

  body.mnv-future-ui.page-mypage .next-thumb {
    width: 100%;
  }

  body.mnv-future-ui.page-mypage .route-cards,
  body.mnv-future-ui.page-mypage .dash-side {
    grid-template-columns: 1fr;
  }

  /* Reference 19 keeps saved routes as a swipeable card rail, while the
   * supporting dashboard cards remain a conventional single column. */
  body.mnv-future-ui.page-mypage .route-cards {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78vw;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    padding-bottom: 8px;
  }

  body.mnv-future-ui.page-mypage .route-cards > * {
    scroll-snap-align: start;
  }

  body.mnv-future-ui:is(.page-favorites, .page-watch_history, .page-feedback_history) .history-item {
    grid-template-columns: 116px minmax(0, 1fr);
    min-height: 112px;
    padding: 9px;
  }

  body.mnv-future-ui:is(.page-favorites, .page-watch_history, .page-feedback_history) .history-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  body.mnv-future-ui:is(.page-route, .page-route_preview) .route-timeline {
    grid-template-columns: repeat(3, minmax(84vw, 1fr));
  }

  body.mnv-future-ui:is(.page-route, .page-route_preview) .save-cta {
    grid-template-columns: auto minmax(0, 1fr);
  }

  body.mnv-future-ui:is(.page-route, .page-route_preview) .save-cta-actions {
    grid-column: 1 / -1;
    width: 100%;
  }

  body.mnv-future-ui:is(.page-watch, .page-study_session) .watch-topline {
    min-height: 0;
    padding: 16px;
  }

  body.mnv-future-ui:is(.page-watch, .page-study_session) .aside-col,
  body.mnv-future-ui.page-study_session .study-session-side {
    grid-template-columns: 1fr;
  }

  body.mnv-future-ui:is(.page-watch, .page-study_session) .feedback-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.mnv-future-ui:is(.page-watch, .page-study_session) .future-study-dock {
    position: static;
    grid-template-columns: 1fr;
  }

  body.mnv-future-ui.page-dekiru_route .dekiru-progress {
    overflow-x: auto;
  }

  body.mnv-future-ui.page-dekiru_route .dekiru-progress::before {
    display: none;
  }

  body.mnv-future-ui.page-dekiru_route .dekiru-progress li {
    min-width: 94px;
  }

  body.mnv-future-ui.page-practice_lab .practice-choice-grid {
    grid-template-columns: 1fr;
  }

  body.mnv-future-ui.page-dekiru_review .standard-review-task-card {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  body.mnv-future-ui.page-dekiru_review .standard-review-mastery,
  body.mnv-future-ui.page-dekiru_review .standard-review-actions-v1324 {
    grid-column: 1 / -1;
  }

  body.mnv-future-ui.page-diagnostic_result .diagnostic-result-hero {
    grid-template-columns: 1fr 116px;
    gap: 12px;
    min-height: 178px;
    padding: 22px;
    background:
      radial-gradient(circle at 82% 18%, rgba(100, 234, 255, .20), transparent 18rem),
      linear-gradient(125deg, #0a3b77, #111d50);
  }

  body.mnv-future-ui.page-diagnostic_result .diagnostic-result-hero > div:first-child {
    padding-right: 0;
  }

  body.mnv-future-ui.page-diagnostic_result .diagnostic-overall {
    min-height: 108px;
  }

  body.mnv-future-ui.page-diagnostic_result .diagnostic-overall > strong {
    font-size: 34px;
  }

  body.mnv-future-ui.page-diagnostic_result .diagnostic-priority-grid {
    grid-template-columns: 1fr;
  }

  body.mnv-future-ui.page-diagnostic_result .diagnostic-plan-cta {
    grid-template-columns: 1fr;
  }

  body.mnv-future-ui.page-study_plan .study-plan-day {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  body.mnv-future-ui.page-study_plan .study-plan-hero {
    padding-right: 88px;
    background:
      url("../mnv-ai-companion-v242.webp") calc(100% - 8px) 14px / 76px auto no-repeat,
      radial-gradient(circle at 89% 10%, rgba(255, 198, 90, .18), transparent 17rem),
      linear-gradient(120deg, #0a356e, #101d4d);
  }

  body.mnv-future-ui.page-study_plan .study-plan-marker {
    width: 46px;
    height: 46px;
  }

  body.mnv-future-ui.page-study_plan .study-plan-day:not(:last-child)::before {
    left: 22px;
  }

  body.mnv-future-ui.shell-child .child-home-quick-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.mnv-future-ui.shell-child .child-home-hero {
    padding-right: 112px;
    background:
      url("../mnv-ai-companion-v242.webp") calc(100% - 4px) 50% / 108px auto no-repeat,
      radial-gradient(circle at 86% 34%, rgba(118, 87, 255, .29), transparent 16rem),
      linear-gradient(120deg, #075eae, #167dce 52%, #6c5ee6);
  }

  body.mnv-future-ui.organization-app .org-kpis,
  body.mnv-future-ui.organization-app .org-learning-card-grid,
  body.mnv-future-ui.organization-app .org-usage-grid,
  body.mnv-future-ui.organization-app .org-credential-status-summary,
  body.mnv-future-ui.organization-app .assignment-save-progress__steps,
  body.mnv-future-ui.organization-app .assignment-save-progress__facts,
  body.mnv-future-ui.shell-admin .kpi-row {
    grid-template-columns: 1fr;
  }

  body.mnv-future-ui.has-mobile-tabbar .mobile-tabbar {
    min-height: calc(68px + env(safe-area-inset-bottom));
    padding: 6px 7px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(97, 174, 232, .25);
    background: rgba(247, 251, 255, .97);
    box-shadow: 0 -15px 38px rgba(14, 46, 91, .17);
  }

  body.mnv-future-ui.has-mobile-tabbar .mobile-tabbar a {
    min-height: 52px;
    border-radius: 14px;
    color: #506981;
  }

  body.mnv-future-ui.has-mobile-tabbar .mobile-tabbar a[aria-current="page"],
  body.mnv-future-ui.has-mobile-tabbar .mobile-tabbar a.active {
    background: #e5f1ff;
    color: #1767d7;
  }

  /* Keep the ordinary learner dashboard on the bright reference-19 plane.
   * These declarations intentionally follow the shared mobile menu rules so
   * the latter cannot repaint the real learner menu as a dark panel. */
  body.mnv-future-ui.shell-learner.page-mypage .dash-layout > .mobile-mypage-menu {
    border-color: #c8dbea;
    background: rgba(255, 255, 255, .97);
    color: #143451;
    box-shadow: 0 14px 38px rgba(28, 78, 126, .10);
  }

  body.mnv-future-ui.shell-learner.page-mypage .mobile-mypage-menu-grid a {
    border-color: #d2e2ee;
    background: #f8fbff;
    color: #2f4e69;
  }

  body.mnv-future-ui.shell-learner.page-mypage .mobile-mypage-menu-grid a.is-active {
    border-color: #7fb6e3;
    background: #e6f2ff;
    color: #155fca;
    box-shadow: inset 0 3px #2583ef;
  }

  body.mnv-future-ui.shell-learner.page-mypage::after {
    opacity: .16;
  }
}

@media (max-width: 420px) {
  body.mnv-future-ui.page-mypage .stat-cards,
  body.mnv-future-ui.page-learning_records .record-grid,
  body.mnv-future-ui.page-study_plan .study-plan-summary {
    grid-template-columns: 1fr;
  }

  body.mnv-future-ui.shell-child .child-home-quick-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  body.mnv-future-ui.has-mobile-tabbar .mobile-tabbar {
    position: static;
  }

  body.mnv-future-ui:is(.shell-learner, .shell-immersive) main.container.shell-container {
    padding-bottom: 26px;
  }
}

@media (forced-colors: active) {
  body.mnv-future-ui:is(.shell-learner, .shell-immersive) .site-header,
  body.mnv-future-ui :is(.panel, .side-card, .card, .video-card, .org-card, .admin-card) {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }

  body.mnv-future-ui .button.primary {
    border: 2px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mnv-future-ui:is(.shell-learner, .shell-immersive) .button,
  body.mnv-future-ui :is(.history-item, .video-card, .stat-card, .org-card, .admin-card) {
    transition-duration: .01ms;
  }

  body.mnv-future-ui:is(.shell-learner, .shell-immersive) .button:hover {
    transform: none;
  }
}