/*
 * まなび動画ナビ Future UI v240
 *
 * 既存のHTML、フォーム、URL、権限、通信、保存処理を一切所有しない、表示専用の
 * 最終カスケードです。すべての新規セレクターは .mnv-future-ui 配下に限定します。
 */

:root {
  --mnv-bg-primary: #061020;
  --mnv-bg-secondary: #0a1932;
  --mnv-surface: #102642;
  --mnv-surface-glass: rgba(14, 34, 62, .82);
  --mnv-text-primary: #f5f9ff;
  --mnv-text-secondary: #aec2dc;
  --mnv-accent-cyan: #62e6ff;
  --mnv-accent-blue: #4b7cff;
  --mnv-accent-violet: #8668ff;
  --mnv-accent-magenta: #db67ff;
  --mnv-success: #44d79b;
  --mnv-warning: #ffbf5a;
  --mnv-danger: #ff6f87;
  --mnv-info: #67bcff;
  --mnv-border: rgba(126, 180, 239, .22);
  --mnv-shadow-sm: 0 7px 22px rgba(2, 12, 31, .18);
  --mnv-shadow-md: 0 18px 50px rgba(2, 12, 31, .24);
  --mnv-shadow-lg: 0 32px 90px rgba(1, 8, 24, .34);
  --mnv-radius-sm: 12px;
  --mnv-radius-md: 18px;
  --mnv-radius-lg: 26px;
  --mnv-space-xs: .375rem;
  --mnv-space-sm: .75rem;
  --mnv-space-md: 1.25rem;
  --mnv-space-lg: 2rem;
  --mnv-motion-fast: 160ms;
  --mnv-motion-normal: 240ms;
  --mnv-motion-slow: 720ms;
  --mnv-ease: cubic-bezier(.2, .8, .2, 1);
  --mnv-focus: 0 0 0 3px rgba(37, 94, 214, .28), 0 0 0 6px rgba(37, 94, 214, .13);
}

body.mnv-future-ui {
  --mnv-page-bg: #f4f9ff;
  --mnv-page-bg-alt: #eaf4ff;
  --mnv-page-surface: rgba(255, 255, 255, .91);
  --mnv-page-surface-strong: #fff;
  --mnv-page-text: #102d4d;
  --mnv-page-muted: #55708f;
  --mnv-page-border: rgba(78, 133, 199, .22);
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--mnv-page-text);
  accent-color: var(--mnv-accent-blue);
}

body.mnv-future-ui[data-mnv-ui-ready="true"] {
  --mnv-ui-ready: 1;
}

/* Public and reading shells stay bright, airy, and institution-ready. */
body.mnv-future-ui:is(.shell-public, .shell-reading, .shell-system, .shell-ops) {
  background:
    radial-gradient(circle at 8% 0%, rgba(98, 230, 255, .16), transparent 29rem),
    radial-gradient(circle at 91% 10%, rgba(134, 104, 255, .11), transparent 32rem),
    linear-gradient(180deg, #fbfdff 0%, var(--mnv-page-bg) 48%, var(--mnv-page-bg-alt) 100%);
}

/* Auth, learner, immersive, administrator and organization areas share one night cockpit. */
body.mnv-future-ui:is(.shell-auth, .shell-learner, .shell-immersive, .shell-admin),
body.mnv-future-ui.organization-app {
  --mnv-page-bg: var(--mnv-bg-primary);
  --mnv-page-bg-alt: var(--mnv-bg-secondary);
  --mnv-page-surface: var(--mnv-surface-glass);
  --mnv-page-surface-strong: #112b4b;
  --mnv-page-text: var(--mnv-text-primary);
  --mnv-page-muted: var(--mnv-text-secondary);
  --mnv-page-border: var(--mnv-border);
  --navy: #f5f9ff;
  --navy-soft: #d8e8fb;
  --slate: #aec2dc;
  --muted: #aec2dc;
  --bg: #061020;
  --card: #102642;
  --border: rgba(126, 180, 239, .22);
  --mnv-focus: 0 0 0 3px rgba(98, 230, 255, .34), 0 0 0 6px rgba(75, 124, 255, .16);
  --mist: rgba(126, 180, 239, .12);
  --ivory: #0b1d38;
  --teal: #44d79b;
  --teal-deep: #81efc3;
  --teal-soft: rgba(68, 215, 155, .14);
  --gold: #ffbf5a;
  --gold-deep: #ffd588;
  --gold-soft: rgba(255, 191, 90, .14);
  --blue: #6487ff;
  --blue-deep: #9dccff;
  --blue-soft: rgba(75, 124, 255, .14);
  --border-strong: rgba(151, 198, 245, .34);
  --ok: #81efc3;
  --ok-soft: rgba(68, 215, 155, .14);
  --warn: #ffd07c;
  --warn-soft: rgba(255, 191, 90, .14);
  --bad: #ff9aaa;
  --bad-soft: rgba(255, 111, 135, .14);
  --shadow-sm: var(--mnv-shadow-sm);
  --shadow-md: var(--mnv-shadow-md);
  --shadow-lg: var(--mnv-shadow-lg);
  --mf-ink-950: #f5f9ff;
  --mf-ink-800: #d8e8fb;
  --mf-blue-700: #9dccff;
  --mf-blue-600: #6487ff;
  --mf-blue-500: #78a2ff;
  --mf-cyan-400: #62e6ff;
  --mf-orange-600: #ffb15a;
  --mf-orange-500: #ffc071;
  --mf-green-700: #81efc3;
  --mf-green-600: #44d79b;
  --mf-red-700: #ff9aaa;
  --mf-red-600: #ff7c91;
  --mf-surface-0: #102642;
  --mf-surface-1: #07152b;
  --mf-surface-2: #0d2340;
  --mf-surface-warm: #192b41;
  --mf-line: rgba(126, 180, 239, .22);
  --mf-line-strong: rgba(151, 198, 245, .34);
  --mf-text-1: #f5f9ff;
  --mf-text-2: #aec2dc;
  --mf-success-soft: rgba(68, 215, 155, .14);
  --mf-warning-soft: rgba(255, 191, 90, .14);
  --mf-danger-soft: rgba(255, 111, 135, .14);
  --mf-info-soft: rgba(75, 124, 255, .14);
  --mf-shadow-1: var(--mnv-shadow-sm);
  --mf-shadow-2: var(--mnv-shadow-md);
  --mf-shadow-focus: 0 18px 48px rgba(75, 124, 255, .22);
  --mf-focus-ring: var(--mnv-focus);
  color-scheme: dark;
  background:
    radial-gradient(circle at 86% -4%, rgba(98, 230, 255, .12), transparent 31rem),
    radial-gradient(circle at 2% 34%, rgba(134, 104, 255, .12), transparent 29rem),
    linear-gradient(145deg, #040b19 0%, #07152b 42%, #0a1e3a 100%);
  color: var(--mnv-page-text);
}

body.mnv-future-ui:is(.shell-auth, .shell-learner, .shell-immersive, .shell-admin)::after,
body.mnv-future-ui.organization-app::after {
  background:
    linear-gradient(rgba(98, 230, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(98, 230, 255, .025) 1px, transparent 1px),
    radial-gradient(circle, rgba(98, 230, 255, .17), transparent 66%);
  background-size: 64px 64px, 64px 64px, auto;
  opacity: .58;
}

body.mnv-future-ui :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid #255ed6;
  outline-offset: 3px;
  box-shadow: var(--mnv-focus);
}

body.mnv-future-ui:is(.shell-auth, .shell-learner, .shell-immersive, .shell-admin) :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible,
body.mnv-future-ui.organization-app :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline-color: var(--mnv-accent-cyan);
}

body.mnv-future-ui .skip-link:focus {
  z-index: 10000;
  border-radius: var(--mnv-radius-sm);
  background: #fff;
  color: #07152b;
  box-shadow: var(--mnv-shadow-lg);
}

body.mnv-future-ui :where(.site-header, .admin-topbar) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.mnv-future-ui :where(.site-header, .admin-topbar, .panel, .card, .admin-card, .org-card, .org-panel, .auth-card, dialog) {
    -webkit-backdrop-filter: blur(18px) saturate(1.12);
    backdrop-filter: blur(18px) saturate(1.12);
  }
}

/* Dark chrome. Existing links, current-page state, and drawer ownership are unchanged. */
body.mnv-future-ui:is(.shell-auth, .shell-learner, .shell-immersive, .shell-admin) :where(.site-header, .admin-topbar),
body.mnv-future-ui.organization-app :where(.site-header, .admin-topbar) {
  border-bottom-color: rgba(126, 180, 239, .16);
  background: rgba(5, 16, 35, .91);
  box-shadow: 0 12px 38px rgba(1, 8, 24, .25);
}

body.mnv-future-ui:is(.shell-auth, .shell-learner, .shell-immersive, .shell-admin) :where(.brand-text strong, .site-nav a, .site-nav button, .nav-link, .header-user strong),
body.mnv-future-ui.organization-app :where(.brand-text strong, .site-nav a, .site-nav button, .nav-link, .header-user strong) {
  color: var(--mnv-text-primary);
}

body.mnv-future-ui:is(.shell-auth, .shell-learner, .shell-immersive, .shell-admin) :where(.brand-text small, .header-user small),
body.mnv-future-ui.organization-app :where(.brand-text small, .header-user small) {
  color: var(--mnv-text-secondary);
}

body.mnv-future-ui .site-nav a[aria-current="page"],
body.mnv-future-ui .site-nav a.is-active,
body.mnv-future-ui .nav-link[aria-current="page"] {
  border-color: rgba(98, 230, 255, .24);
  background: linear-gradient(135deg, rgba(75, 124, 255, .18), rgba(98, 230, 255, .09));
  color: var(--mnv-accent-cyan);
}

body.mnv-future-ui :where(.brand-mark, .icon-bubble, .mf-journey-step-icon, .mobile-tabbar-icon) {
  flex: 0 0 auto;
}

/* Shared future surfaces. */
body.mnv-future-ui :where(
  .panel,
  .card,
  .admin-card,
  .side-card,
  .stat-card,
  .kpi-card,
  .org-card,
  .org-panel,
  .org-kpi,
  .auth-card,
  .price-card,
  .course-card,
  .feature-card,
  .trust-card,
  .result-panel,
  .today-learning-card,
  .video-card,
  .route-card-s,
  .next-card,
  .assessment-shell,
  .dekiru-focus-card,
  .diagnostic-priority-card,
  .diagnostic-map-card,
  .diagnostic-basis-card,
  .empty-state
) {
  border-radius: var(--mnv-radius-md);
  transition:
    border-color var(--mnv-motion-normal) var(--mnv-ease),
    box-shadow var(--mnv-motion-normal) var(--mnv-ease),
    transform var(--mnv-motion-normal) var(--mnv-ease),
    background-color var(--mnv-motion-normal) ease;
}

body.mnv-future-ui:is(.shell-auth, .shell-learner, .shell-immersive, .shell-admin) :where(
  .panel,
  .card,
  .admin-card,
  .side-card,
  .stat-card,
  .kpi-card,
  .org-card,
  .org-panel,
  .org-kpi,
  .auth-card,
  .price-card,
  .course-card,
  .feature-card,
  .trust-card,
  .result-panel,
  .today-learning-card,
  .video-card,
  .route-card-s,
  .next-card,
  .assessment-shell,
  .dekiru-focus-card,
  .diagnostic-priority-card,
  .diagnostic-map-card,
  .diagnostic-basis-card,
  .empty-state
),
body.mnv-future-ui.organization-app :where(
  .panel, .card, .admin-card, .side-card, .stat-card, .kpi-card,
  .org-card, .org-panel, .org-kpi, .result-panel, .empty-state
) {
  border-color: var(--mnv-page-border);
  background:
    linear-gradient(145deg, rgba(17, 43, 75, .94), rgba(10, 28, 54, .86)) padding-box,
    linear-gradient(135deg, rgba(98, 230, 255, .30), rgba(134, 104, 255, .16), rgba(219, 103, 255, .10)) border-box;
  box-shadow: var(--mnv-shadow-md), inset 0 1px 0 rgba(255, 255, 255, .055);
  color: var(--mnv-page-text);
}

/* Legacy screens with named surfaces receive the same night material. */
body.mnv-future-ui:is(.shell-auth, .shell-learner, .shell-immersive, .shell-admin) :where(
  .auth-side,
  .save-cta,
  .adaptive-goal-card,
  .adaptive-plan-board,
  .adaptive-day-row,
  .study-session-summary,
  .study-session-player-card,
  .study-session-focus,
  .study-session-next,
  .course-learning-check,
  .learning-break-card,
  .learning-focus,
  .learning-mission,
  .today-video-choice,
  .practice-question,
  .practice-result-card,
  .practice-complete,
  .practice-source-strip,
  .practice-hints,
  .practice-video-hint,
  .practice-answer-contract,
  .practice-choice-card,
  .practice-unified-hero,
  .practice-unified-pane-head,
  .diagnostic-card,
  .assessment-form,
  .assessment-feedback-card,
  .assessment-result-block,
  .onboarding-card,
  .onboarding-summary,
  .goal-settings-card,
  .goal-settings-summary,
  .study-plan-day-card,
  .study-plan-status-panel,
  .study-plan-summary,
  .history-item,
  .notification-item,
  .standard-review-state-card,
  .standard-review-task-card,
  .dekiru-outcome-card,
  .dekiru-diagnosis-summary,
  .dekiru-clarifications
) {
  border-color: var(--mnv-border);
  background:
    radial-gradient(circle at 92% 4%, rgba(98, 230, 255, .07), transparent 15rem),
    linear-gradient(145deg, rgba(17, 43, 75, .94), rgba(8, 25, 49, .88));
  box-shadow: var(--mnv-shadow-sm), inset 0 1px rgba(255, 255, 255, .045);
  color: var(--mnv-text-primary);
}

body.mnv-future-ui:is(.shell-auth, .shell-learner, .shell-immersive, .shell-admin) :where(
  .diagnostic-option > span,
  .assessment-options label > span,
  .onboarding-choice > span,
  .onboarding-summary > div,
  .goal-time-options span,
  .goal-settings-summary > div,
  .practice-choice-grid label > span,
  .practice-confidence label > span,
  .dekiru-choice,
  .order-row
) {
  border-color: rgba(126, 180, 239, .24);
  background: rgba(5, 19, 40, .72);
  color: var(--mnv-text-primary);
}

body.mnv-future-ui:is(.shell-auth, .shell-learner, .shell-immersive, .shell-admin) :where(
  .diagnostic-option input:checked + span,
  .assessment-options input:checked + span,
  .onboarding-choice input:checked + span,
  .goal-time-options input:checked + span,
  .practice-choice-grid input:checked + span,
  .practice-confidence input:checked + span,
  .dekiru-choice:has(input:checked)
) {
  border-color: var(--mnv-accent-cyan);
  background: linear-gradient(135deg, rgba(75, 124, 255, .28), rgba(98, 230, 255, .10));
  color: #fff;
  box-shadow: 0 0 0 3px rgba(98, 230, 255, .10), var(--mnv-shadow-sm);
}

body.mnv-future-ui:is(.shell-auth, .shell-learner, .shell-immersive, .shell-admin) :where(.handwriting-toolbar, .handwriting-zoom-tools) {
  border-color: var(--mnv-border);
  background: rgba(10, 31, 59, .88);
  color: var(--mnv-text-primary);
}

body.mnv-future-ui:is(.shell-auth, .shell-learner, .shell-immersive, .shell-admin) :where(.handwriting-toolbar, .handwriting-zoom-tools) button {
  border-color: rgba(126, 180, 239, .28);
  background: rgba(21, 48, 80, .82);
  color: var(--mnv-text-primary);
}

@media (hover: hover) and (pointer: fine) {
  body.mnv-future-ui :where(.video-card, .route-card-s, .next-card, .course-card, .feature-card, .price-card, .stat-card, .kpi-card):hover {
    border-color: rgba(98, 230, 255, .42);
    box-shadow: var(--mnv-shadow-lg), 0 0 30px rgba(75, 124, 255, .10);
    transform: translateY(-3px);
  }
}

/* Typography and secondary information on the night shells. */
body.mnv-future-ui:is(.shell-auth, .shell-learner, .shell-immersive, .shell-admin) :where(h1, h2, h3, h4, legend, dt, th, strong),
body.mnv-future-ui.organization-app :where(h1, h2, h3, h4, legend, dt, th, strong) {
  color: var(--mnv-text-primary);
}

body.mnv-future-ui:is(.shell-auth, .shell-learner, .shell-immersive, .shell-admin) :where(p, li, dd, small, .muted, .lead, .fineprint, .stat-text, .kpi-sub),
body.mnv-future-ui.organization-app :where(p, li, dd, small, .muted, .lead, .fineprint, .stat-text, .kpi-sub) {
  color: var(--mnv-text-secondary);
}

body.mnv-future-ui :where(.eyebrow, .section-kicker, .page-kicker) {
  color: #2474dc;
  font-weight: 900;
  letter-spacing: .11em;
}

body.mnv-future-ui:is(.shell-auth, .shell-learner, .shell-immersive, .shell-admin) :where(.eyebrow, .section-kicker, .page-kicker),
body.mnv-future-ui.organization-app :where(.eyebrow, .section-kicker, .page-kicker) {
  color: var(--mnv-accent-cyan);
}

body.mnv-future-ui :where(a:not(.button)) {
  text-underline-offset: .2em;
}

body.mnv-future-ui:is(.shell-auth, .shell-learner, .shell-immersive, .shell-admin) :where(main a:not(.button)),
body.mnv-future-ui.organization-app :where(main a:not(.button)) {
  color: #8fdcff;
}

/* Controls: visual only. Native types, names, values, and submit behavior stay intact. */
body.mnv-future-ui :where(.button, button, input[type="submit"], input[type="button"]) {
  min-height: 42px;
  border-radius: var(--mnv-radius-sm);
  font-weight: 800;
  transition:
    transform var(--mnv-motion-fast) var(--mnv-ease),
    box-shadow var(--mnv-motion-fast) ease,
    border-color var(--mnv-motion-fast) ease,
    filter var(--mnv-motion-fast) ease;
  -webkit-tap-highlight-color: transparent;
}

body.mnv-future-ui :where(.button.primary, button.primary, .nav-cta, .dekiru-primary, .onboarding-next, input[type="submit"].primary) {
  border-color: transparent;
  background: linear-gradient(135deg, #315fdd, #6748d9 62%, #754bdd);
  box-shadow: 0 12px 30px rgba(75, 124, 255, .30), inset 0 1px 0 rgba(255, 255, 255, .28);
  color: #fff;
  text-shadow: 0 1px 1px rgba(16, 20, 75, .24);
}

body.mnv-future-ui :where(.button.primary, button.primary, .nav-cta, .dekiru-primary, .onboarding-next, input[type="submit"].primary):hover {
  box-shadow: 0 16px 38px rgba(75, 124, 255, .38), 0 0 26px rgba(98, 230, 255, .10);
  filter: saturate(1.08) brightness(1.04);
  transform: translateY(-2px);
}

body.mnv-future-ui :where(.button, button, input[type="submit"], input[type="button"]):active,
body.mnv-future-ui :where(.button, button).mnv-ui-pressed {
  transform: translateY(0) scale(.982);
}

body.mnv-future-ui :where(.button.danger, button.danger, .button.is-danger) {
  border-color: rgba(255, 111, 135, .36);
  background: linear-gradient(135deg, #d74564, #b82f54);
  color: #fff;
}

body.mnv-future-ui :where(.button.success, button.success) {
  border-color: rgba(68, 215, 155, .35);
  background: linear-gradient(135deg, #20ad78, #168f6b);
  color: #fff;
}

body.mnv-future-ui:is(.shell-auth, .shell-learner, .shell-immersive, .shell-admin) :where(.button.ghost, button.ghost, .button.secondary, button.secondary),
body.mnv-future-ui.organization-app :where(.button.ghost, button.ghost, .button.secondary, button.secondary) {
  border-color: rgba(126, 180, 239, .28);
  background: rgba(21, 48, 80, .76);
  color: var(--mnv-text-primary);
  box-shadow: var(--mnv-shadow-sm);
}

body.mnv-future-ui :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  textarea,
  select
) {
  min-height: 44px;
  border-radius: var(--mnv-radius-sm);
}

body.mnv-future-ui:is(.shell-auth, .shell-learner, .shell-immersive, .shell-admin) :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  textarea,
  select
),
body.mnv-future-ui.organization-app :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  textarea,
  select
) {
  border-color: rgba(126, 180, 239, .27);
  background: rgba(5, 19, 40, .74);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18);
  color: var(--mnv-text-primary);
}

body.mnv-future-ui:is(.shell-auth, .shell-learner, .shell-immersive, .shell-admin) :where(input, textarea)::placeholder,
body.mnv-future-ui.organization-app :where(input, textarea)::placeholder {
  color: #839bb9;
  opacity: 1;
}

body.mnv-future-ui:is(.shell-auth, .shell-learner, .shell-immersive, .shell-admin) :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  textarea,
  select
):focus,
body.mnv-future-ui.organization-app :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  textarea,
  select
):focus {
  border-color: var(--mnv-accent-cyan);
  background: rgba(8, 26, 52, .96);
  box-shadow: var(--mnv-focus);
}

body.mnv-future-ui :where(input[type="checkbox"], input[type="radio"]) {
  width: 1.15em;
  height: 1.15em;
  accent-color: var(--mnv-accent-blue);
}

body.mnv-future-ui :where(label, .choice, .dekiru-choice, .onboarding-choice) {
  transition: border-color var(--mnv-motion-fast) ease, background-color var(--mnv-motion-fast) ease, box-shadow var(--mnv-motion-fast) ease;
}

body.mnv-future-ui :where(.choice, .dekiru-choice, .onboarding-choice):has(input:checked) {
  border-color: var(--mnv-accent-cyan);
  box-shadow: 0 0 0 3px rgba(98, 230, 255, .12), 0 12px 30px rgba(75, 124, 255, .15);
}

/* Navigation rails and command centers. */
body.mnv-future-ui :where(.admin-sidebar, .org-sidebar, .dash-nav) {
  border-color: rgba(126, 180, 239, .15);
  background:
    radial-gradient(circle at 50% -7%, rgba(98, 230, 255, .16), transparent 19rem),
    linear-gradient(165deg, #091a34, #040c1b);
  box-shadow: 16px 0 48px rgba(1, 8, 24, .22), inset -1px 0 rgba(255, 255, 255, .045);
  color: var(--mnv-text-secondary);
}

body.mnv-future-ui :where(.admin-sidebar, .org-sidebar, .dash-nav) :where(a, button, summary) {
  border-radius: var(--mnv-radius-sm);
}

body.mnv-future-ui :where(.admin-sidebar, .org-sidebar, .dash-nav) a:hover {
  border-color: rgba(98, 230, 255, .20);
  background: rgba(75, 124, 255, .14);
  color: #fff;
}

body.mnv-future-ui :where(.admin-sidebar, .org-sidebar, .dash-nav) :where(a.active, a.is-active, a[aria-current="page"]) {
  border-color: rgba(98, 230, 255, .27);
  background: linear-gradient(90deg, rgba(75, 124, 255, .34), rgba(98, 230, 255, .08));
  box-shadow: inset 3px 0 var(--mnv-accent-cyan), 0 10px 26px rgba(0, 0, 0, .18);
  color: #fff;
}

body.mnv-future-ui :where(.admin-page-head, .org-page-head, .dash-greet, .result-head) {
  border-radius: var(--mnv-radius-lg);
}

body.mnv-future-ui:is(.shell-learner, .shell-immersive, .shell-admin) :where(.admin-page-head, .dash-greet, .result-head),
body.mnv-future-ui.organization-app .org-page-head {
  border-color: var(--mnv-border);
  background:
    radial-gradient(circle at 86% 20%, rgba(98, 230, 255, .12), transparent 20rem),
    linear-gradient(145deg, rgba(17, 43, 75, .92), rgba(8, 25, 49, .86));
  box-shadow: var(--mnv-shadow-md), inset 0 1px rgba(255, 255, 255, .055);
}

/* Journey, recommendations, video and practice. */
body.mnv-future-ui .mf-journey-rail {
  overflow: hidden;
  border-radius: var(--mnv-radius-md);
}

body.mnv-future-ui:is(.shell-learner, .shell-immersive) .mf-journey-rail {
  border-color: var(--mnv-border);
  background: rgba(8, 27, 53, .82);
  box-shadow: var(--mnv-shadow-md);
}

body.mnv-future-ui:is(.shell-learner, .shell-immersive) .mf-journey-rail li {
  color: var(--mnv-text-secondary);
}

body.mnv-future-ui:is(.shell-learner, .shell-immersive) .mf-journey-rail li.is-current {
  border-color: rgba(98, 230, 255, .30);
  background: linear-gradient(135deg, rgba(75, 124, 255, .25), rgba(98, 230, 255, .08));
  box-shadow: 0 10px 28px rgba(2, 12, 31, .22);
  color: #fff;
}

body.mnv-future-ui:is(.shell-learner, .shell-immersive) .mf-journey-rail li.is-complete .mf-journey-step-icon {
  border-color: rgba(68, 215, 155, .38);
  background: rgba(68, 215, 155, .16);
  color: #81efc3;
}

body.mnv-future-ui :where(.video-card, .route-card-s, .next-card) {
  position: relative;
  overflow: clip;
}

body.mnv-future-ui :where(.video-card, .route-card-s, .next-card)::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--mnv-accent-cyan), var(--mnv-accent-blue), var(--mnv-accent-violet));
  content: "";
  opacity: .72;
  pointer-events: none;
}

body.mnv-future-ui :where(.video-role, .step-badge, .duration-badge, .chip, .status-chip, .org-status, .task-status) {
  border-radius: 999px;
  font-weight: 800;
}

body.mnv-future-ui:is(.shell-learner, .shell-immersive) :where(.video-role, .step-badge, .duration-badge, .chip, .status-chip) {
  border-color: rgba(126, 180, 239, .24);
  background: rgba(75, 124, 255, .13);
  color: #cde8ff;
}

body.mnv-future-ui :where(.video-frame, .video-shell, .player-wrap, .youtube-wrap) {
  overflow: hidden;
  border: 1px solid var(--mnv-page-border);
  border-radius: var(--mnv-radius-md);
  background: #000;
  box-shadow: var(--mnv-shadow-lg);
}

body.mnv-future-ui :where(.video-frame, .video-shell, .player-wrap, .youtube-wrap) iframe {
  display: block;
  max-width: 100%;
}

body.mnv-future-ui :where(.practice-processing-card, .ai-wait-card, .page-loader-card) {
  border-color: rgba(98, 230, 255, .23);
  background:
    radial-gradient(circle at 50% 0%, rgba(98, 230, 255, .12), transparent 22rem),
    linear-gradient(145deg, rgba(7, 22, 47, .98), rgba(12, 46, 83, .96));
  box-shadow: var(--mnv-shadow-lg), inset 0 1px rgba(255, 255, 255, .07);
}

body.mnv-future-ui :where(.practice-processing-card, .ai-wait-card, .page-loader-card)::after {
  position: absolute;
  inset: 8% 10%;
  border: 1px solid rgba(98, 230, 255, .10);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  animation: mnv-ui-scan 3.4s ease-in-out infinite;
}

@keyframes mnv-ui-scan {
  0%, 100% { opacity: .25; transform: scale(.92); }
  50% { opacity: .74; transform: scale(1.03); }
}

body.mnv-future-ui :where(.practice-processing-card, .ai-wait-card, .page-loader-card) :where(h1, h2, h3, strong) {
  color: #fff;
}

body.mnv-future-ui :where(.practice-processing-card, .ai-wait-card, .page-loader-card) :where(p, small) {
  color: #bed3eb;
}

/* Progress, completion, correctness and errors use color plus shape/text owned by existing markup. */
body.mnv-future-ui :where(progress, [role="progressbar"]) {
  accent-color: var(--mnv-accent-cyan);
}

body.mnv-future-ui :where(.progress-bar, .progress-line, .skill-meter-track) {
  overflow: hidden;
  border-radius: 999px;
  background: rgba(116, 151, 192, .21);
}

body.mnv-future-ui :where(.progress-bar, .progress-line, .skill-meter-track) > * {
  background: linear-gradient(90deg, var(--mnv-accent-blue), var(--mnv-accent-cyan));
  box-shadow: 0 0 18px rgba(98, 230, 255, .34);
  transition: transform var(--mnv-motion-slow) var(--mnv-ease), filter var(--mnv-motion-normal) ease;
}

body.mnv-future-ui :where(.ring, .diagnostic-overall, .progress-ring) {
  filter: drop-shadow(0 12px 25px rgba(75, 124, 255, .19));
}

body.mnv-future-ui :where(.alert, .org-notice, .mode-banner, .future-status-panel) {
  border-radius: var(--mnv-radius-sm);
  box-shadow: var(--mnv-shadow-sm);
}

body.mnv-future-ui:is(.shell-auth, .shell-learner, .shell-immersive, .shell-admin) :where(.alert, .org-notice, .mode-banner, .system-announcement, .maintenance-inline-banner),
body.mnv-future-ui.organization-app :where(.alert, .org-notice, .mode-banner, .system-announcement, .maintenance-inline-banner) {
  border-color: rgba(103, 188, 255, .32);
  background: rgba(37, 95, 154, .18);
  color: #dff2ff;
}

body.mnv-future-ui:is(.shell-auth, .shell-learner, .shell-immersive, .shell-admin) :where(.alert, .org-notice, .mode-banner, .system-announcement, .maintenance-inline-banner) :where(p, span, small, strong, a),
body.mnv-future-ui.organization-app :where(.alert, .org-notice, .mode-banner, .system-announcement, .maintenance-inline-banner) :where(p, span, small, strong, a) {
  color: inherit;
}

body.mnv-future-ui:is(.shell-auth, .shell-learner, .shell-immersive, .shell-admin) :where(.alert.success, .org-notice.success),
body.mnv-future-ui.organization-app :where(.alert.success, .org-notice.success) {
  border-color: rgba(68, 215, 155, .38);
  background: rgba(68, 215, 155, .13);
  color: #bdf7de;
}

body.mnv-future-ui:is(.shell-auth, .shell-learner, .shell-immersive, .shell-admin) :where(.alert.warning, .org-notice.warning, .mode-banner, .maintenance-inline-banner),
body.mnv-future-ui.organization-app :where(.alert.warning, .org-notice.warning, .mode-banner, .maintenance-inline-banner) {
  border-color: rgba(255, 191, 90, .42);
  background: rgba(255, 191, 90, .13);
  color: #ffe2ad;
}

body.mnv-future-ui:is(.shell-auth, .shell-learner, .shell-immersive, .shell-admin) :where(.alert.error, .org-notice.error, .system-announcement.severity-critical),
body.mnv-future-ui.organization-app :where(.alert.error, .org-notice.error, .system-announcement.severity-critical) {
  border-color: rgba(255, 111, 135, .46);
  background: rgba(255, 111, 135, .13);
  color: #ffd0d8;
}

body.mnv-future-ui :where(.alert.success, .is-correct, .practice-complete, .mnv-ui-complete) {
  border-color: rgba(68, 215, 155, .38);
}

body.mnv-future-ui .mnv-ui-complete {
  animation: mnv-ui-complete 820ms var(--mnv-ease) both;
}

@keyframes mnv-ui-complete {
  0% { opacity: .7; transform: scale(.985); box-shadow: 0 0 0 rgba(68, 215, 155, 0); }
  55% { opacity: 1; transform: scale(1.008); box-shadow: 0 0 36px rgba(68, 215, 155, .20); }
  100% { transform: none; }
}

body.mnv-future-ui :where(.alert.error, .is-incorrect, .practice-form-error, .mnv-ui-error) {
  border-color: rgba(255, 111, 135, .48);
}

body.mnv-future-ui .mnv-ui-error {
  animation: mnv-ui-error 260ms ease-in-out both;
}

@keyframes mnv-ui-error {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(-3px); }
  70% { transform: translateX(3px); }
}

/* Tables stay dense and horizontally scroll only inside their established wrappers. */
body.mnv-future-ui :where(.table-scroll, .org-table-wrap, .comparison-table-wrap) {
  border-radius: var(--mnv-radius-md);
  scrollbar-color: rgba(98, 230, 255, .48) rgba(89, 113, 145, .16);
}

body.mnv-future-ui:is(.shell-admin, .shell-learner, .shell-immersive) :where(table, .data-table),
body.mnv-future-ui.organization-app :where(table, .data-table, .org-table) {
  border-color: var(--mnv-border);
  background: rgba(7, 24, 48, .58);
  color: var(--mnv-text-primary);
}

body.mnv-future-ui:is(.shell-admin, .shell-learner, .shell-immersive) :where(table, .data-table) thead,
body.mnv-future-ui.organization-app :where(table, .data-table, .org-table) thead {
  background: linear-gradient(180deg, rgba(28, 61, 99, .95), rgba(17, 43, 75, .95));
  color: #dff2ff;
}

body.mnv-future-ui:is(.shell-admin, .shell-learner, .shell-immersive) :where(table, .data-table) :where(td, th),
body.mnv-future-ui.organization-app :where(table, .data-table, .org-table) :where(td, th) {
  border-color: rgba(126, 180, 239, .15);
}

body.mnv-future-ui:is(.shell-admin, .shell-learner, .shell-immersive) :where(table, .data-table) tbody tr:hover,
body.mnv-future-ui.organization-app :where(table, .data-table, .org-table) tbody tr:hover {
  background: rgba(75, 124, 255, .11);
  box-shadow: inset 3px 0 var(--mnv-accent-cyan);
}

/* Modal and utility overlays never cover their own controls. */
body.mnv-future-ui :where(dialog, .guide-panel, .qr-login-modal, .mf-command-palette, .mf-detail-drawer, .luxury-command-panel) {
  max-width: min(94vw, 760px);
  max-height: min(90vh, 90dvh);
  border-radius: var(--mnv-radius-lg);
}

body.mnv-future-ui:is(.shell-auth, .shell-learner, .shell-immersive, .shell-admin) :where(dialog, .guide-panel, .qr-login-modal, .mf-command-palette, .mf-detail-drawer, .luxury-command-panel),
body.mnv-future-ui.organization-app :where(dialog, .guide-panel, .qr-login-modal, .mf-command-palette, .mf-detail-drawer, .luxury-command-panel) {
  border-color: var(--mnv-border);
  background: rgba(9, 28, 54, .97);
  box-shadow: var(--mnv-shadow-lg), inset 0 1px rgba(255, 255, 255, .06);
  color: var(--mnv-text-primary);
}

body.mnv-future-ui :where(.nav-scrim, .guide-scrim, .qr-login-scrim, .mf-command-scrim, .mf-detail-scrim, .luxury-command-scrim) {
  background: rgba(2, 8, 22, .66);
}

/* QR, handwriting and media safety contracts. */
body.mnv-future-ui :where(
  .qr-code,
  .qr-image,
  [data-qr-code],
  [data-qr-value],
  [data-sheet-qr],
  [data-coupon-qr],
  .family-qr,
  .learner-sheet-qr,
  img[src*="qr" i]
) {
  box-sizing: content-box;
  border-radius: 0;
  background: #fff;
  filter: none;
  opacity: 1;
  transform: none;
}

body.mnv-future-ui :where(.qr-code, .qr-image, [data-qr-code], [data-qr-value], [data-sheet-qr], [data-coupon-qr], .family-qr, .learner-sheet-qr) {
  padding: max(12px, 4%);
}

body.mnv-future-ui :where([data-qr-value], [data-sheet-qr], [data-coupon-qr], .family-qr, .learner-sheet-qr) :where(svg, img, canvas) {
  border-radius: 0;
  background: #fff;
  filter: none;
  opacity: 1;
  transform: none;
}

body.mnv-future-ui :where(iframe, video) {
  isolation: isolate;
}

/* Mobile navigation and PWA-safe controls use the same quiet night dock. */
body.mnv-future-ui :where(.mobile-tabbar, .future-study-dock) {
  border-color: rgba(126, 180, 239, .19);
  background: linear-gradient(135deg, rgba(6, 17, 38, .97), rgba(13, 40, 75, .96));
  box-shadow: 0 -14px 44px rgba(1, 8, 24, .28), inset 0 1px rgba(255, 255, 255, .08);
}

body.mnv-future-ui .mobile-tabbar a {
  color: #a9bfd9;
}

body.mnv-future-ui .mobile-tabbar :where(a.is-active, a[aria-current="page"]) {
  background: linear-gradient(180deg, rgba(98, 230, 255, .16), rgba(75, 124, 255, .14));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(98, 230, 255, .20);
}

/* Public first impression: bright sky, restrained dimensionality, familiar real copy. */
body.mnv-future-ui.page-index .koto-cosmic-hero {
  background:
    radial-gradient(circle at 72% 12%, rgba(98, 230, 255, .20), transparent 28rem),
    radial-gradient(circle at 12% 45%, rgba(134, 104, 255, .11), transparent 25rem),
    linear-gradient(180deg, #fcfeff 0%, #eef8ff 68%, #e8f4ff 100%);
}

body.mnv-future-ui.page-index .koto-device {
  border-color: rgba(98, 230, 255, .38);
  box-shadow: 0 36px 100px rgba(32, 91, 169, .20), 0 0 54px rgba(98, 230, 255, .10);
}

body.mnv-future-ui.page-index .koto-search-submit {
  background: linear-gradient(135deg, #315fdd, #6748d9);
  box-shadow: 0 15px 38px rgba(75, 124, 255, .32);
}

/* Child and family use the same system with warmer, clearer touch affordances. */
body.mnv-future-ui:is(.shell-child, .shell-child-auth, .shell-family) {
  --mnv-page-bg: #f5faff;
  --mnv-page-bg-alt: #eaf5ff;
  --mnv-page-text: #123253;
  --mnv-page-muted: #58728e;
  background:
    radial-gradient(circle at 10% 2%, rgba(98, 230, 255, .20), transparent 25rem),
    radial-gradient(circle at 93% 14%, rgba(219, 103, 255, .10), transparent 24rem),
    linear-gradient(180deg, #fbfdff, #eef8ff);
}

body.mnv-future-ui:is(.shell-child, .shell-child-auth, .shell-family) :where(.button, button, input, select) {
  min-height: 48px;
}

body.mnv-future-ui:is(.shell-child, .shell-child-auth, .shell-family) :where(.panel, .card, .child-task-card, .family-child-card) {
  border-radius: 24px;
}

/* Visual-only state hooks written by mnv-ui-effects.js. */
body.mnv-future-ui .mnv-ui-field-focus {
  color: var(--mnv-accent-cyan);
}

body.mnv-future-ui .mnv-ui-busy {
  cursor: progress;
}

body.mnv-future-ui .mnv-ui-open > summary {
  color: var(--mnv-accent-blue);
}

body.mnv-future-ui:is(.shell-auth, .shell-learner, .shell-immersive, .shell-admin) .mnv-ui-open > summary,
body.mnv-future-ui.organization-app .mnv-ui-open > summary {
  color: var(--mnv-accent-cyan);
}

@media (forced-colors: active) {
  body.mnv-future-ui :where(.panel, .card, .admin-card, .org-card, .org-panel, .auth-card, dialog) {
    border: 2px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  body.mnv-future-ui :where(.button, button, input, textarea, select, summary, a):focus-visible {
    outline: 3px solid Highlight;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mnv-future-ui *,
  body.mnv-future-ui *::before,
  body.mnv-future-ui *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}